@font-face{font-family:'Bodoni Moda';src:url('../fonts/bodoni-moda-var.woff2') format('woff2-variations');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'Bodoni Moda';src:url('../fonts/bodoni-moda-italic-var.woff2') format('woff2-variations');font-weight:400 900;font-style:italic;font-display:swap}

:root{
  --void:#0C0A09; --void-2:#141110; --red:#E1301F; --red-deep:#8C1710;
  --bone:#EDE6DA; --smoke:#8B857C; --wood:#A0693A; --wood-hi:#C89060;
  --hairline:rgba(237,230,218,.14);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--void);color:var(--bone);
  font:16px/1.5 Georgia,serif;min-height:100dvh;padding-bottom:96px}
.liner{font-family:'Bodoni Moda',Didot,"Bodoni MT",Georgia,serif}
.panel{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  text-transform:uppercase;letter-spacing:.3em;font-weight:600}

/* ---- compact utility header ---- */
.topbar{display:flex;align-items:center;gap:12px;max-width:920px;margin:0 auto;
  padding:22px 6vw 16px;border-bottom:1px solid var(--hairline)}
.chip{width:10px;height:30px;border-radius:3px;flex:none;
  background:linear-gradient(180deg,var(--red-deep),var(--red))}
.tb-text{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.tb-title{font-size:19px;letter-spacing:.12em;color:var(--red)}
.tb-sub{font-size:11px;letter-spacing:.18em;color:var(--smoke);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase}

/* ---- track list ---- */
.wrap{max-width:920px;margin:0 auto;padding:0 6vw}
.sec-label{font-size:11px;color:var(--smoke);margin:22px 0 14px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  text-transform:uppercase;letter-spacing:.34em}
.tracklist{border-top:1px solid var(--hairline)}
.track{display:flex;align-items:center;gap:16px;padding:16px 4px;
  border-bottom:1px solid var(--hairline);cursor:pointer;transition:background .15s}
.track:hover,.track.active{background:var(--void-2)}
.track .num{width:26px;flex:none;color:var(--smoke);font-size:13px;font-variant-numeric:tabular-nums}
.track.active .num{color:var(--red)}
.track .play{width:30px;height:30px;border-radius:50%;flex:none;border:1px solid var(--hairline);
  display:flex;align-items:center;justify-content:center;color:var(--bone);background:transparent}
.track.active .play{border-color:var(--red);color:var(--red)}
.track .main{flex:1;min-width:0}
.ttitle{font-size:18px;outline:none;border:none;background:transparent;color:var(--bone);
  width:100%;font-family:inherit;cursor:text}
.ttitle:focus{color:var(--red)}
.tmeta{font-size:11.5px;color:var(--smoke);margin-top:4px;letter-spacing:.08em;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase}
.tdur{width:48px;flex:none;text-align:right;color:var(--smoke);font-size:13px;
  font-variant-numeric:tabular-nums;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}
.blank{border:1px dashed var(--hairline);border-radius:8px;padding:26px;margin:18px 0;
  color:var(--smoke);font-style:italic;text-align:center;font-family:'Bodoni Moda',Georgia,serif}
.empty{color:var(--smoke);font-size:13px;padding:20px 4px;font-style:italic}

/* ---- mini player deck ---- */
.deck{position:fixed;left:0;right:0;bottom:0;background:rgba(12,10,9,.92);
  backdrop-filter:blur(10px);border-top:1px solid var(--hairline);padding:10px 6vw 14px;
  transform:translateY(100%);transition:transform .25s ease}
.deck.show{transform:translateY(0)}
.deck-top{display:flex;align-items:center;gap:12px;max-width:920px;margin:0 auto 8px}
.deck-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.deck-time{font-size:11.5px;color:var(--smoke);font-variant-numeric:tabular-nums;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}
.deck-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--hairline);
  background:transparent;color:var(--bone);flex:none;cursor:pointer}
.wavewrap{max-width:920px;margin:0 auto;position:relative;height:40px;cursor:pointer}
canvas{width:100%;height:100%;display:block}
.scrub{position:absolute;top:-3px;width:9px;height:46px;margin-left:-4.5px;border-radius:5px;
  background:linear-gradient(180deg,var(--wood-hi),var(--wood));box-shadow:0 4px 12px -3px rgba(0,0,0,.6);
  pointer-events:none}

@media (prefers-reduced-motion:reduce){.deck{transition:none}}
@media (max-width:520px){.tdur{display:none}}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}