.ccm-holo { position: relative; width: 200px; height: 110px; }

.ccm-holo-rim { position: absolute; bottom: -2px; left: -2px; right: -2px; height: 114px; border-radius: 100px 100px 0 0; background: conic-gradient(from var(--ccm-holo-a), #7c6cff, #ff6c8a, #2ecc8a, #00e5ff, #7c6cff); animation: ccm-holo-spin 4s linear infinite; filter: blur(0.5px); }

.ccm-holo-dome { position: absolute; bottom: 0; left: 0; right: 0; height: 110px; border-radius: 100px 100px 0 0; background: rgba(15,15,25,0.7); backdrop-filter: blur(8px); border-bottom: none; }

.ccm-holo-i { position: absolute; bottom: 0; left: 50%; width: 32px; height: 32px; margin-left: -16px; border-radius: 50%; background: #15151d; border: 1px solid rgba(255,255,255,0.18); color: #c4b5fd; display: flex; align-items: center; justify-content: center; text-decoration: none; transform: rotate(var(--a)) translate(95px) rotate(calc(var(--a) * -1)); transition: transform 0.3s, color 0.2s; }

.ccm-holo-i:hover { color: #fff; transform: rotate(var(--a)) translate(95px) rotate(calc(var(--a) * -1)) scale(1.2); }

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