:root{--bg: #0d0e11;--surface: #17191e;--surface-hi: #21242b;--text: #f2f3f5;--muted: #9aa1ad;--accent: #2b4c7e;--radius: 14px;--gap: clamp(.5rem, 1.4vh, 1.1rem);color-scheme:dark}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;height:100%;overflow:hidden}body{background:var(--bg);color:var(--text);font:16px/1.4 system-ui,-apple-system,Segoe UI,sans-serif;-webkit-tap-highlight-color:transparent}#app{height:100dvh;display:flex;flex-direction:column;padding:var(--gap)}.picker{flex:1;min-height:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:var(--gap)}.picker>.tile{grid-column:span 2}.picker>.tile:nth-child(5){grid-column:2 / span 2}.tile{appearance:none;border:2px solid transparent;border-radius:var(--radius);background:var(--surface);color:var(--text);font:inherit;padding:clamp(.4rem,1vh,.9rem);min-height:0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(.3rem,.8vh,.7rem);cursor:pointer;transition:background .12s,border-color .12s}.tile:active{background:var(--surface-hi)}.tile__art{flex:1 1 auto;min-height:0;height:100%;width:auto;max-width:100%;aspect-ratio:1;object-fit:contain;border-radius:10px;display:block}.tile__label{flex:none;font-weight:600;text-align:center;line-height:1.2;font-size:clamp(.75rem,1.5vh,1rem)}.now{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--gap)}.hero{flex:1;min-height:0;display:flex;align-items:center;gap:clamp(.9rem,2.5vw,2.25rem);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 42%,var(--surface)),var(--surface));border-radius:var(--radius);padding:clamp(.8rem,2.4vh,2rem)}.hero__art{flex:none;height:100%;width:auto;max-width:30%;aspect-ratio:1;object-fit:contain;border-radius:12px}.hero__text{flex:1;min-width:0}.hero__album{margin:0 0 .4rem;color:color-mix(in srgb,var(--text) 72%,transparent);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:clamp(.75rem,1.6vh,1rem)}.hero__title{margin:0;font-size:clamp(1.3rem,5.2vh,3.1rem);line-height:1.15;font-weight:650;overflow-wrap:anywhere}.hero__performer{margin:.5rem 0 0;font-size:clamp(.9rem,2.2vh,1.35rem);color:color-mix(in srgb,var(--text) 82%,transparent);overflow-wrap:anywhere}.hero__status{margin:.7rem 0 0;color:var(--muted);font-size:clamp(.75rem,1.6vh,.95rem)}.hero__toggle{appearance:none;border:2px solid color-mix(in srgb,var(--text) 30%,transparent);background:color-mix(in srgb,#000 35%,transparent);color:var(--text);font:inherit;font-weight:650;font-size:clamp(.95rem,2.1vh,1.25rem);border-radius:999px;min-width:clamp(96px,11vw,140px);min-height:clamp(60px,10vh,84px);padding:0 1.25rem;flex:none;cursor:pointer}.hero__toggle:active{background:color-mix(in srgb,#000 55%,transparent)}.strip{flex:none;height:clamp(78px,17vh,132px);display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.5rem}.tile--compact{padding:.4rem;gap:.3rem}.tile--compact .tile__label{font-size:clamp(.62rem,1.35vh,.85rem)}.tile--compact.is-active{border-color:var(--accent);background:var(--surface-hi)}@media(max-width:720px){html,body{overflow:auto}#app{height:auto;min-height:100dvh}.picker{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:none}.picker>.tile:nth-child(5){grid-column:span 2}.tile__art{height:auto;width:100%}.hero{flex-direction:column;text-align:center}.hero__art{height:auto;width:45%;max-width:220px}.strip{height:auto;grid-template-columns:repeat(4,minmax(0,1fr))}}.debug{position:fixed;inset:auto 0 0;z-index:10;margin:0;padding:.8rem 1rem;max-height:45dvh;overflow:auto;background:#000e;border-top:1px solid #2a2d34;color:#8ee6a8;font:12px/1.5 ui-monospace,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere}