:root {
  /* midnight & gold */
  --bg: #0f1428;
  --bg-deep: #0a0e1d;
  --ink: #eef1fb;
  --muted: #8b93b8;
  --line: #262e52;
  --accent: #f2b544;
  --accent-ink: #141a33;
  --glow: rgba(242, 181, 68, .15);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; background: var(--bg-deep) linear-gradient(170deg, #151b36 0%, var(--bg) 45%, var(--bg-deep) 100%) fixed; color: var(--ink); font: 17px/1.5 Rubik, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
main { max-width: 520px; margin: 0 auto; padding: 48px 16px 64px; }

h1 { font-size: 28px; font-weight: 500; margin: 0 0 28px; }
h2 { font-size: 22px; font-weight: 500; margin: 8px 0 24px; line-height: 1.3; }
.muted { color: var(--muted); }

.list { list-style: none; margin: 0; padding: 0; }
.list button { display: flex; gap: 14px; width: 100%; text-align: start; padding: 13px 0; border-bottom: 1px solid var(--line); }
.list button:hover .t { color: var(--accent); }
.list .n:empty { display: none; }
.list .n { flex: none; width: 2.6em; color: var(--muted); font-variant-numeric: tabular-nums; }
.list .t { flex: 1; min-width: 0; }
.list li:first-child button { border-top: 1px solid var(--line); }

.back { display: block; color: var(--muted); font-size: 15px; text-align: start; }
.back:hover { color: var(--ink); }

#player { text-align: center; position: relative; }
#player::before { content: ""; position: absolute; left: 50%; top: 210px; width: 460px; height: 460px; margin: -230px 0 0 -230px; background: radial-gradient(circle, var(--glow), transparent 62%); pointer-events: none; z-index: -1; }
#player > * { position: relative; }
#player h2 { margin-bottom: 40px; }
.disk {
  position: relative; isolation: isolate;
  width: 240px; height: 240px; border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 60px rgba(242, 181, 68, .18);
}
/* the record itself: grooves + a sheen so the spin is visible; the label stays still */
.disk::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: -1;
  background:
    radial-gradient(circle, var(--bg) 0 10px, transparent 11px),
    conic-gradient(from 0deg, transparent 0 8%, rgba(255,255,255,.22) 12%, transparent 18% 58%, rgba(255,255,255,.14) 62%, transparent 68%),
    repeating-radial-gradient(circle, transparent 0 5px, rgba(0,0,0,.07) 5.5px 6px),
    radial-gradient(circle, transparent 0 34%, rgba(0,0,0,.06) 35% 36%, transparent 37%),
    var(--accent);
}
/* the whole record turns (label photo included) while a chord plays */
.disk { animation: spin 1.8s linear infinite; animation-play-state: paused; }
.disk.playing { animation-play-state: running; }
.disk img { position: absolute; inset: 16%; width: 68%; height: 68%; border-radius: 50%; object-fit: cover; z-index: 0; box-shadow: 0 0 0 3px rgba(0,0,0,.08); }
.disk::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--bg); z-index: 1; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .disk { animation: none; } }
.count { color: var(--muted); margin-top: 22px; min-height: 26px; font-variant-numeric: tabular-nums; }
.buttons { display: flex; justify-content: center; gap: 12px; margin-top: 28px; }
.btn {
  min-width: 128px; height: 52px; padding: 0 24px; border-radius: 26px; font-size: 19px; font-weight: 500;
  border: 1.5px solid var(--line); -webkit-tap-highlight-color: transparent; transition: transform .06s;
}
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn:hover:not(:disabled) { border-color: var(--muted); }
.btn.primary:hover:not(:disabled) { border-color: var(--accent); filter: brightness(1.06); }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: default; }
.keys { color: var(--muted); font-size: 13px; margin-top: 18px; }

@media (max-width: 480px) {
  main { padding-top: 28px; }
  .disk { width: 200px; height: 200px; }
  .btn { flex: 1; min-width: 0; }
  .keys { display: none; }
}
.disk:has(img:not([hidden]))::after { display: none; }