:root{color-scheme:light dark;--bg:#fff;--fg:#242424;--muted:#616161;--accent:#6254bb;--line:#e4e1f2}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:14px system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
main{width:100%;max-width:380px;margin:0 auto;padding:12px}.player{display:flex;align-items:center;gap:12px;min-height:52px}
#play{flex:0 0 42px;width:42px;height:42px;border:0;border-radius:50%;background:var(--accent);color:#fff;font-size:17px;cursor:pointer}
button:disabled{opacity:.45;cursor:wait}.track{min-width:0;flex:1}.caption{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted)}
.caption span{white-space:nowrap}output{font-variant-numeric:tabular-nums;white-space:nowrap}input[type=range]{width:100%;margin:10px 0 0;accent-color:var(--accent);cursor:pointer;min-height:20px}
p{margin:6px 0 0;font-size:12px;color:var(--muted)}p:empty{display:none}#signin,#retry,#switch-account{margin-top:8px;border:1px solid var(--accent);border-radius:5px;padding:8px 12px;background:transparent;color:var(--fg);cursor:pointer}
button:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:3px}audio{display:none}[hidden]{display:none!important}
body[data-theme=dark]{--bg:#292929;--fg:#fff;--muted:#d1d1d1;--accent:#a69bea}
body[data-theme=contrast]{--bg:#000;--fg:#fff;--muted:#fff;--accent:#ff0}
@media(prefers-color-scheme:dark){:root{--bg:#292929;--fg:#fff;--muted:#d1d1d1;--accent:#a69bea}}

#device-signin{padding-top:8px}#device-code{display:block;font:600 20px ui-monospace,monospace;letter-spacing:2px;margin:8px 0}#device-link{color:var(--accent)}