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

.ccm-vinyl-disc { width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle at center, #1a1a1a 30%, transparent 31%), repeating-radial-gradient(circle at center, #0a0a0a 0, #0a0a0a 1px, #1a1a1a 1px, #1a1a1a 3px); position: relative; animation: ccm-vinyl-spin 8s linear infinite; box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 8px 24px rgba(0,0,0,0.5); }

.ccm-vinyl-disc::after { content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: #f5a84a; }

.ccm-vinyl-label { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin: -50px; border-radius: 50%; background: linear-gradient(135deg, #ff6c8a, #f5a84a); }

.ccm-vinyl-i { position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; margin: -11px; border-radius: 50%; background: rgba(0,0,0,0.45); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; text-decoration: none; transform: rotate(var(--a)) translate(28px) rotate(calc(var(--a) * -1)); }

.ccm-vinyl-i:hover { background: rgba(0,0,0,0.7); }

.ccm-vinyl:hover .ccm-vinyl-disc { 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; }
}