<div class="ccm-solar">
  <a href="#" class="ccm-solar-c" aria-label="Sun">☀</a>
  <div class="ccm-solar-o ccm-solar-o1">
    <span class="ccm-solar-pos"><a href="#" class="ccm-solar-p" aria-label="Mercury">☿</a></span>
  </div>
  <div class="ccm-solar-o ccm-solar-o2">
    <span class="ccm-solar-pos"><a href="#" class="ccm-solar-p" aria-label="Venus">♀</a></span>
  </div>
  <div class="ccm-solar-o ccm-solar-o3">
    <span class="ccm-solar-pos"><a href="#" class="ccm-solar-p" aria-label="Earth">♁</a></span>
  </div>
  <div class="ccm-solar-o ccm-solar-o4">
    <span class="ccm-solar-pos"><a href="#" class="ccm-solar-p" aria-label="Mars">♂</a></span>
  </div>
</div>

.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;
  }
}

@keyframes ccm-solar-spin { to { transform: rotate(360deg); } }

@keyframes ccm-solar-counter { to { transform: rotate(-360deg); } }