.ccm-solar { position: relative; width: 240px; height: 240px; display: flex; align-items: center; justify-content: center; }

.ccm-solar-c { width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #ffd479, #f5a84a); display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.85); font-size: 20px; text-decoration: none; box-shadow: 0 0 24px #f5a84a; z-index: 5; }

.ccm-solar-o { position: absolute; border-radius: 50%; border: 1px dashed rgba(255,255,255,0.08); animation: ccm-solar-spin linear infinite; }

.ccm-solar-o1 { inset: 20px;  animation-duration: 11s; }

.ccm-solar-o2 { inset: 50px;  animation-duration: 8s; }

.ccm-solar-o3 { inset: 80px;  animation-duration: 6s; }

.ccm-solar-o4 { inset: 105px; animation-duration: 4s; }

.ccm-solar-pos { position: absolute; top: 0; left: 50%; width: 0; height: 0; }

.ccm-solar-p { position: absolute; top: 0; left: 0; width: 24px; height: 24px; margin: -12px; border-radius: 50%; background: #1f1f2e; color: #c4b5fd; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; border: 1px solid rgba(124,108,255,0.4); animation: ccm-solar-counter linear infinite; z-index: 6; }

.ccm-solar-o1 .ccm-solar-p { animation-duration: 11s; }

.ccm-solar-o2 .ccm-solar-p { animation-duration: 8s; }

.ccm-solar-o3 .ccm-solar-p { animation-duration: 6s; }

.ccm-solar-o4 .ccm-solar-p { animation-duration: 4s; }

.ccm-solar-p:hover { background: #7c6cff; color: #fff; }

.ccm-solar:hover .ccm-solar-o, .ccm-solar:hover .ccm-solar-p { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .ccm-holo-rim,
  .ccm-snow-flakes,
  .ccm-orbit-sat, .ccm-orbit-i,
  .ccm-solar-o, .ccm-solar-o a,
  .ccm-tri-grp,
  .ccm-vinyl-disc,
  .ccm-bh-disk,
  .ccm-neb-cloud, .ccm-neb-i { animation: none !important; }
}