.disc {
  position: relative;
  overflow: hidden;
  border-color: #11151a;
  background: repeating-radial-gradient(circle, #111820 0 7px, #05080c 8px 12px);
  box-shadow: 0 0 0 8px rgba(14, 17, 22, .08), 0 0 28px rgba(32, 208, 224, .2);
}

.disc:before {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  border-color: rgba(224, 246, 250, .72);
  background: #111820;
  transform: translate(-50%, -50%);
}

.disc span {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: #dffaff;
  box-shadow: 0 0 0 4px rgba(41, 211, 229, .18);
  transform: translate(-50%, -50%);
}

.record-cover {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 64%;
  height: 64%;
  border: 1px solid rgba(227, 247, 250, .72);
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 4px 4px 0 rgba(28, 202, 221, .58), -3px -3px 0 rgba(241, 76, 102, .42);
  transform: translate(-50%, -50%);
}

.disc.playing .record-cover {
  animation: recordCoverSpin 5s linear infinite;
}

.disc.playing:after {
  position: absolute;
  inset: 10%;
  z-index: 5;
  content: "";
  border: 1px solid rgba(156, 238, 248, .26);
  border-radius: 50%;
  pointer-events: none;
}

@keyframes recordCoverSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .disc.playing .record-cover { animation: none; }
}