:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0b0f14;--ink:#e8e4db;--muted:#e8e4db9e;--line:#e8e4db24;--panel:#0b0f14d1;--accent:#8fc3c6;--sans:"Instrument Sans","Helvetica Neue",Arial,sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace}html,body{height:100%}body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;margin:0;font-size:14px;overflow:hidden}#gl{background:var(--bg);width:100%;height:100%;display:block;position:fixed;inset:0}.ui{pointer-events:none;position:fixed;inset:0}.ui>*{pointer-events:auto}.brand{font-family:var(--mono);letter-spacing:.14em;color:var(--muted);text-transform:lowercase;font-size:12px;transition:opacity .6s;position:fixed;top:22px;left:24px}.center{pointer-events:none;place-items:center;display:grid;position:fixed;inset:0}.play{pointer-events:auto;appearance:none;color:var(--ink);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0b0f1459;border:1px solid #e8e4db59;border-radius:50%;place-items:center;width:96px;height:96px;transition:transform .25s,opacity .5s,border-color .25s,visibility;display:grid}.play:hover{border-color:#e8e4dbb3;transform:scale(1.04)}.play:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.play svg{width:34px;height:34px;fill:var(--ink);margin-left:4px}body[data-playing="1"] .play{opacity:0;visibility:hidden;pointer-events:none;transition:transform .25s,opacity .5s,border-color .25s,visibility 0s linear .5s;transform:scale(.8)}.hud{padding:18px 22px calc(18px + env(safe-area-inset-bottom));opacity:0;visibility:hidden;align-items:center;gap:16px;transition:opacity .5s,visibility 0s linear .5s;display:flex;position:fixed;bottom:0;left:0;right:0}body[data-playing="1"] .hud{opacity:1;visibility:visible;transition:opacity .5s,visibility}body[data-idle="1"] .hud,body[data-idle="1"] .brand{opacity:0}.hud button{appearance:none;border:1px solid var(--line);color:var(--ink);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0b0f1466;border-radius:50%;place-items:center;width:40px;height:40px;display:grid}.hud button:focus-visible,.panel button:focus-visible,.panel input:focus-visible,.hud input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.hud svg{width:16px;height:16px;fill:var(--ink)}.vol{color:var(--muted);font-family:var(--mono);align-items:center;gap:10px;font-size:11px;display:flex}.vol input{width:120px;accent-color:var(--accent)}.status{font-family:var(--mono);color:var(--muted);letter-spacing:.04em;text-align:right;margin-left:auto;font-size:11px;line-height:1.5}.panel{background:var(--panel);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-left:1px solid var(--line);visibility:hidden;width:min(360px,92vw);padding:22px 22px calc(22px + env(safe-area-inset-bottom));box-sizing:border-box;flex-direction:column;gap:22px;transition:transform .35s cubic-bezier(.2,.7,.2,1),visibility 0s linear .35s;display:flex;position:fixed;top:0;bottom:0;right:0;overflow-y:auto;transform:translate(100%)}.panel[data-open="1"]{visibility:visible;transition:transform .35s cubic-bezier(.2,.7,.2,1),visibility;transform:none}.panel h2{font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;font-size:11px;font-weight:400}.panel .top{justify-content:space-between;align-items:center;display:flex}.panel .top b{font-family:var(--mono);letter-spacing:.14em;font-size:12px;font-weight:400}.panel .close{appearance:none;color:var(--muted);cursor:pointer;background:0 0;border:0;padding:4px 8px;font-size:20px}.ctl{flex-direction:column;gap:8px;margin-bottom:14px;display:flex}.ctl label,.ctl .lbl{justify-content:space-between;font-size:13px;display:flex}.ctl label b,.ctl .lbl b{font-family:var(--mono);color:var(--muted);font-size:11px;font-weight:400}.ctl input[type=range]{width:100%;accent-color:var(--accent)}.seg{border:1px solid var(--line);border-radius:6px;display:flex;overflow:hidden}.seg button{appearance:none;color:var(--ink);font:500 12.5px var(--sans);cursor:pointer;background:0 0;border:0;flex:1;padding:8px 6px}.seg button+button{border-left:1px solid var(--line)}.seg button[aria-pressed=true]{background:var(--accent);color:#0b0f14}.foot{left:24px;bottom:calc(18px + env(safe-area-inset-bottom));font-family:var(--mono);color:var(--muted);margin:0;font-size:11px;transition:opacity .5s;position:fixed}body[data-playing="1"] .foot{opacity:0;pointer-events:none}@media (prefers-reduced-motion:reduce){.play,.hud,.panel{transition:none}}