:root{--acc-rgb:232,176,74;--sec-rgb:47,107,255;--glow-rgb:255,150,40;--bg-rgb:5,3,9;--bg2-rgb:10,6,18;--mut-rgb:160,140,112;--fg-rgb:241,230,211;
  --bg:rgb(var(--bg-rgb));--fg:rgb(var(--fg-rgb));--mut:rgb(var(--mut-rgb));--acc:rgb(var(--acc-rgb));--blue:rgb(var(--sec-rgb));
  --card:rgba(var(--bg-rgb),.66);--line:rgba(var(--acc-rgb),.28)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);transition:none;color:var(--fg);font:15px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;min-height:100vh}
#viz{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.8}
/* lounge backdrop: blue stage spotlights, amber curtain glow, deco pillars, candle bokeh */
.grid{position:fixed;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(circle at 12% 88%,rgba(var(--glow-rgb),.7) 0 3px,transparent 14px),
  radial-gradient(circle at 31% 94%,rgba(var(--glow-rgb),.6) 0 3px,transparent 12px),
  radial-gradient(circle at 58% 90%,rgba(var(--glow-rgb),.6) 0 4px,transparent 16px),
  radial-gradient(circle at 77% 96%,rgba(var(--glow-rgb),.7) 0 3px,transparent 13px),
  radial-gradient(circle at 92% 86%,rgba(var(--glow-rgb),.55) 0 4px,transparent 15px),
  radial-gradient(ellipse 14% 60% at 15% -5%,rgba(var(--sec-rgb),.6),transparent 70%),
  radial-gradient(ellipse 14% 60% at 38% -5%,rgba(var(--sec-rgb),.5),transparent 70%),
  radial-gradient(ellipse 14% 60% at 62% -5%,rgba(var(--sec-rgb),.5),transparent 70%),
  radial-gradient(ellipse 14% 60% at 85% -5%,rgba(var(--sec-rgb),.6),transparent 70%),
  radial-gradient(ellipse 90% 55% at 50% 115%,rgba(var(--glow-rgb),.5),transparent 70%),
  radial-gradient(ellipse 70% 55% at 0% 30%,rgba(var(--sec-rgb),.22),transparent 70%),
  radial-gradient(ellipse 70% 55% at 100% 30%,rgba(var(--acc-rgb),.2),transparent 70%),
  repeating-linear-gradient(90deg,rgba(var(--acc-rgb),.07) 0 1px,transparent 1px 96px),
  linear-gradient(rgb(var(--bg2-rgb)),rgb(var(--bg-rgb)))}
/* bass-reactive glow in the cover colors */
.pulse{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--pulse,0);
  background:radial-gradient(ellipse 85% 60% at 50% 105%,rgba(var(--glow-rgb),.75),transparent 70%),
  radial-gradient(ellipse 60% 50% at 8% 0%,rgba(var(--sec-rgb),.5),transparent 70%),
  radial-gradient(ellipse 60% 50% at 92% 0%,rgba(var(--acc-rgb),.45),transparent 70%)}
main{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:16px}
.mono{font-size:.8rem;color:var(--mut);letter-spacing:.04em}
.hud{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:center;font-size:.8rem;color:var(--mut);padding-bottom:10px;margin-bottom:14px;border-bottom:1px solid var(--line);position:relative}
.hud::after{content:"";position:absolute;left:50%;bottom:-3px;width:10px;height:10px;background:var(--acc);transform:translateX(-50%) rotate(45deg)}
.brand{font:400 1.7rem/1 "Bodoni 72","Didot","Playfair Display","Hoefler Text",Georgia,serif;letter-spacing:.02em;color:var(--fg)}
.brand i{color:var(--acc);font-style:normal}
section,.panel{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:12px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 0 30px rgba(var(--acc-rgb),.06),inset 0 0 0 1px rgba(255,255,255,.02)}
#now{display:flex;gap:16px;align-items:center}#now .meta{flex:1;min-width:0}
#art{width:184px;height:184px;object-fit:cover;border:1px solid var(--line);border-radius:8px;flex:none;box-shadow:0 0 34px rgba(var(--acc-rgb),.3)}
#title{font:400 1.5rem/1.15 "Bodoni 72","Didot","Playfair Display",Georgia,serif;color:var(--acc);word-break:break-word}
#artist{margin-top:4px}#album{color:var(--mut)}#specs{margin-top:8px}
.row{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.ctl{justify-content:center;margin:10px 0}
button,select{background:rgba(var(--acc-rgb),.07);color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:8px 11px;font:inherit;font-size:.8rem;letter-spacing:.05em;cursor:pointer;min-height:40px}
button:hover,select:hover{border-color:var(--acc);box-shadow:0 0 12px rgba(var(--acc-rgb),.25)}
button[aria-pressed=true],button.on{color:#1a1006;background:var(--acc);border-color:var(--acc)}
#play{color:var(--acc);font-size:1.15rem;min-width:60px;border-radius:999px}
input[type=range]{width:100%;accent-color:var(--acc);background:none}
#seek{height:28px}#vol{max-width:180px}
#q{flex:1;min-width:120px;background:rgba(var(--bg-rgb),.6);border:1px solid var(--line);color:var(--fg);padding:9px;border-radius:6px;font:inherit}
.panel summary{cursor:pointer;color:var(--acc);letter-spacing:.14em;font-size:.8rem}
.eq{display:grid;gap:8px;margin-top:10px}.eq label{display:grid;grid-template-columns:48px 1fr 56px;gap:8px;align-items:center;font-size:.8rem}
.tools{margin-bottom:10px}
.album{margin-bottom:16px}
.ahead{display:flex;gap:10px;align-items:center;margin-bottom:6px}
.ahead img,.ph{width:56px;height:56px;object-fit:cover;border:1px solid var(--line);border-radius:6px;background:rgba(255,255,255,.04)}
.ahead b{color:var(--acc);font:400 1.1rem "Bodoni 72","Didot",Georgia,serif}.ahead small{display:block;color:var(--mut)}.ahead div{flex:1;min-width:0}
.tr{display:flex;align-items:center;gap:10px;padding:9px 6px;border-bottom:1px solid rgba(var(--acc-rgb),.1);cursor:pointer}
.tr:hover{background:rgba(var(--acc-rgb),.08)}
.tr.on{color:var(--acc);background:rgba(var(--acc-rgb),.13)}
.tr .n{width:28px;color:var(--mut);text-align:right;flex:none}
.tr img{width:36px;height:36px;object-fit:cover;border-radius:4px}
.tr .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr small{color:var(--mut)}
.empty{color:var(--mut);padding:20px;text-align:center}
@media(max-width:520px){.brand{font-size:1.4rem}}
@media(prefers-reduced-motion:reduce){#viz{display:none}}

.up{display:flex;flex-direction:column;align-items:center;gap:6px;width:104px;flex:none;padding:8px;text-align:center;background:rgba(var(--acc-rgb),.05)}
.up img{width:88px;height:88px;object-fit:cover;border-radius:6px;opacity:.85;border:1px solid var(--line)}
.up .lbl{font-size:.65rem;letter-spacing:.14em;color:var(--mut)}
.up #nextTitle{font-size:.75rem;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
@media(max-width:560px){#now{flex-wrap:wrap;justify-content:center;text-align:center}#art{order:-1;width:70%;height:auto;aspect-ratio:1}#now .meta{flex-basis:100%}.up{order:5;flex-direction:row;width:100%;text-align:left}.up img{width:48px;height:48px}.up .lbl{flex:none}.up #nextTitle{flex:1}}
.up[hidden],#art[hidden],#nextArt[hidden]{display:none}