:root{
  --room:#13161c;--panel:#20262f;--panel2:#29303b;--edge:#343c49;
  --aqua:#4ad9ea;--aqua2:#2fbfd2;--gold:#e8b73c;--hot:#ff4f5c;
  --fur:#8e97a6;--text:#edf1f6;--soft:#9aa4b3;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  min-height:100vh;overflow-x:hidden;color:var(--text);
  font:400 15.5px/1.55 Lexend,system-ui,sans-serif;
  background:
    radial-gradient(60% 45% at 75% 20%,rgba(74,217,234,.13),transparent 70%),
    radial-gradient(50% 40% at 15% 85%,rgba(43,95,196,.22),transparent 70%),
    repeating-linear-gradient(90deg,transparent 0 46px,rgba(255,255,255,.018) 46px 47px),
    var(--room);
  background-attachment:fixed;
}
a{color:inherit}
.spindle{max-width:940px;margin:0 auto;padding:24px 16px 24px}

.lp{display:grid;gap:22px;align-items:center}

/* record + sleeve */
.deck{position:relative;width:100%;max-width:420px;margin:0 auto;aspect-ratio:1.3/1}
.sleeve{position:absolute;left:0;top:0;width:76.9%;aspect-ratio:1;border-radius:6px;overflow:hidden;box-shadow:12px 18px 40px -12px #000,inset 0 0 0 1px rgba(255,255,255,.08);z-index:2}
.sleeve svg{display:block;width:100%;height:100%}
.sleeve::after{content:"";position:absolute;inset:0;background:linear-gradient(130deg,rgba(255,255,255,.14),transparent 40%)}
.sleeve-sticker{position:absolute;right:8px;top:8px;z-index:1;font:11px/1 Chango,sans-serif;color:var(--room);background:var(--gold);border-radius:50%;width:54px;height:54px;display:grid;place-items:center;text-align:center;transform:rotate(12deg);box-shadow:0 3px 8px rgba(0,0,0,.4)}
.disc{position:absolute;right:0;top:3%;width:70%;aspect-ratio:1;z-index:1}
.disc svg{display:block;width:100%;height:100%;filter:drop-shadow(0 10px 18px rgba(0,0,0,.6))}

/* liner notes */
.liner-logo{display:inline-block;font:26px/1 Chango,sans-serif;text-decoration:none;color:var(--text)}
.liner-logo span{color:var(--aqua)}
.liner-kick{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.liner-kick i{width:9px;height:9px;border-radius:50%;background:var(--hot);box-shadow:0 0 10px var(--hot)}
.liner h1{font:clamp(22px,5.4vw,31px)/1.2 Chango,sans-serif;margin:8px 0 12px;font-weight:400}
.liner h1 b{font-weight:400;color:var(--gold)}
.liner-note{color:#c4ccd8}
.liner-note a{color:var(--aqua);font-weight:700}

.tracks{display:grid;grid-template-columns:1fr;gap:10px;margin:16px 0}
.side{background:var(--panel);border:1px solid var(--edge);border-radius:14px;padding:12px 14px}
.side h2{font:12px/1 Chango,sans-serif;font-weight:400;letter-spacing:.1em;color:var(--gold);margin-bottom:8px}
.side ol{list-style:none}
.side li{display:flex;align-items:baseline;gap:8px;padding:5px 0;border-top:1px dashed var(--edge);font-size:14px}
.side li:first-child{border-top:0}
.no{font-weight:800;font-size:12px;color:var(--aqua);min-width:22px}
.tt{flex:1;min-width:0}
.len{font-weight:700;font-size:12.5px;color:var(--soft);white-space:nowrap}

.needle{display:flex;gap:10px;flex-wrap:wrap}
.needle a{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:800;border-radius:12px;padding:15px 22px;transition:transform .12s,filter .12s}
.needle a:hover{transform:translateY(-2px);filter:brightness(1.08)}
.needle-up{flex:1 1 200px;font-size:17px;color:var(--room);background:linear-gradient(180deg,#6be6f3,var(--aqua) 50%,var(--aqua2));box-shadow:0 10px 24px -10px rgba(74,217,234,.8)}
.needle-in{flex:0 1 auto;font-size:15px;color:var(--text);background:var(--panel2);border:1px solid var(--edge)}
.liner-tc{font-size:12px;color:var(--soft);margin-top:10px}

.credits{margin-top:22px;padding-top:14px;border-top:1px solid var(--edge);text-align:center;font-size:12px;color:var(--soft);line-height:1.7}
.credits b{color:var(--room);background:var(--gold);border-radius:4px;padding:0 5px}
.credits a{color:var(--text)}

@media (min-width:600px) and (max-width:819px){.tracks{grid-template-columns:1fr 1fr}}
@media (min-width:820px){
  .lp{grid-template-columns:400px 1fr;gap:36px}
  .deck{max-width:none}
}
@media (prefers-reduced-motion:no-preference){
  .disc svg{animation:turn 6s linear infinite}
  .disc{animation:slide .9s .2s cubic-bezier(.2,.8,.2,1) both}
  .liner-kick i{animation:blink 1.4s infinite}
}
@keyframes turn{to{transform:rotate(360deg)}}
@keyframes slide{from{transform:translateX(-30%)}to{transform:none}}
@keyframes blink{50%{opacity:.3}}