:root{--ink:#f3ecdf;--dim:#f3ecdf99;--glass:#0e0b1c9e;--line:#ffffff1a;--accent:#ffc46b;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--ink);font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace}*{box-sizing:border-box}body{background:#0f0c1f;height:100dvh;margin:0;overflow:hidden}#scene{width:100%;height:100%;image-rendering:pixelated;position:fixed;inset:0}body:after{content:"";pointer-events:none;background:radial-gradient(#0000 55%,#00000073),repeating-linear-gradient(0deg,#00000014 0 1px,#0000 1px 3px);position:fixed;inset:0}button{font:inherit;color:inherit;cursor:pointer}#hud,#upnext,.panel{z-index:2;background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);border-radius:12px;position:fixed}#hud{left:max(16px, env(safe-area-inset-left));bottom:max(16px, env(safe-area-inset-bottom));width:min(640px,100vw - 32px);padding:16px 18px 14px}.eyebrow{color:var(--dim);letter-spacing:.04em;font-size:12px}#title{letter-spacing:-.01em;margin:4px 0 6px;font-size:clamp(20px,3.4vw,28px);font-weight:600}.meta{color:var(--dim);flex-wrap:wrap;gap:12px;font-size:12px;display:flex}.chord{color:var(--accent)}.progress{background:var(--line);border-radius:2px;height:3px;margin:12px 0 14px;overflow:hidden}#progress{background:var(--accent);width:0;height:100%;transition:width .25s linear}.controls{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.sep{background:var(--line);width:1px;height:22px;margin:0 4px}.btn,.chip{border:1px solid var(--line);background:#ffffff0f;border-radius:8px;height:34px;padding:0 11px;font-size:13px}.btn:hover,.chip:hover{background:#ffffff24}.btn.primary{background:var(--accent);color:#1b1330;border-color:#0000;min-width:44px;font-weight:700}.btn.big{height:46px;padding:0 22px;font-size:16px}.chip[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}.vol{color:var(--dim);align-items:center;gap:6px;font-size:13px;display:inline-flex}.vol input{width:76px;accent-color:var(--accent)}#upnext{top:max(16px, env(safe-area-inset-top));right:max(16px, env(safe-area-inset-right));width:280px;padding:14px 16px;font-size:12px}#upnext h2{text-transform:uppercase;letter-spacing:.12em;color:var(--dim);margin:0 0 8px;font-size:11px;font-weight:500}#queue{gap:8px;margin:0;padding:0;list-style:none;display:grid}#queue li{gap:2px;display:grid}#queue .t{color:var(--ink)}#queue .k{color:var(--dim);font-size:11px}.seed{color:var(--dim);margin-top:12px;font-size:11px;text-decoration:none;display:block}.seed:hover{color:var(--accent)}.panel{left:max(16px, env(safe-area-inset-left));bottom:calc(max(16px, env(safe-area-inset-bottom)) + 190px);width:min(460px,100vw - 32px);padding:14px 16px}.panel h3{margin:4px 0 8px;font-size:12px;font-weight:600}.panel h3 small{color:var(--dim);margin-left:6px;font-weight:400}.seg{gap:4px;margin-bottom:12px;display:flex}.seg button{border:1px solid var(--line);background:#ffffff0d;border-radius:8px;flex:1;height:32px;font-size:12px}.seg button[aria-pressed=true]{background:var(--accent);color:#1b1330;border-color:#0000}.mix-row{grid-template-columns:80px 1fr 44px;align-items:center;gap:10px;margin:6px 0;font-size:12px;display:grid}.mix-row.off{opacity:.4}.mix-row input{width:100%;accent-color:var(--accent)}.mix-row output{text-align:right;color:var(--dim)}.overlay{z-index:5;background:#0806128c;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.overlay[hidden]{display:none}.card{text-align:center;max-width:440px}.card h1{margin:6px 0 12px;font-size:clamp(24px,5vw,34px)}.card p{color:var(--dim);font-size:14px;line-height:1.5}.kicker{text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--accent)!important}.keys{margin-top:18px;font-size:11px!important}[hidden]{display:none!important}@media (width<=760px){#upnext{display:none}.panel{bottom:calc(max(16px, env(safe-area-inset-bottom)) + 230px)}.sep{display:none}.vol input{width:64px}}