:root{color-scheme:dark;--mw-bg:#172329;--mw-panel:#1e2e35;--mw-text:#f4ede0;--mw-muted:#bdc8c6;--mw-accent:#c8aa6c;--mw-border:#435456;--mw-font:system-ui,sans-serif}
:root[data-theme=fairies]{--mw-bg:#241e38;--mw-panel:#302640;--mw-text:#fff1df;--mw-muted:#cabed6;--mw-accent:#a9ddd7;--mw-border:#5b4868;--mw-font:Georgia,serif}
:root[data-theme=diplomacy]{--mw-bg:#142922;--mw-panel:#1c342b;--mw-text:#f5ebd2;--mw-muted:#bdc8af;--mw-accent:#d6b76c;--mw-border:#455c44;--mw-font:Georgia,serif}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:transparent;color:var(--mw-text);font:14px var(--mw-font);overflow-x:hidden}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;background:transparent;border:1px solid transparent;border-radius:7px;min-height:36px;padding:5px 10px}button:hover{background:var(--mw-panel);border-color:var(--mw-border)}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--mw-accent);outline-offset:2px}a{color:var(--mw-accent);text-underline-offset:3px}input[type=range]{accent-color:var(--mw-accent);cursor:pointer;min-width:0}button[aria-pressed=true]{color:var(--mw-bg);background:var(--mw-accent)}[hidden]{display:none!important}
#player{background:var(--mw-bg);border-bottom:1px solid var(--mw-border)}.bar{height:64px;display:flex;align-items:center;gap:10px;padding:7px clamp(8px,2vw,24px);max-width:1600px;margin:auto}#cover{border-radius:7px;object-fit:cover;flex:none}.identity{display:flex;flex:1;min-width:0;flex-direction:column;align-items:flex-start;text-align:left;padding:0 6px;line-height:1.2}.identity>*{max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.eyebrow{font:9px system-ui,sans-serif;letter-spacing:.15em;color:var(--mw-accent)}#title{font-size:14px;font-weight:600;margin:2px 0}#artist{font-size:11px;color:var(--mw-muted)}.transport{display:flex;align-items:center;gap:2px}.transport button{font:28px system-ui,sans-serif;width:36px;padding:0}.transport .play{font-size:17px;width:38px;height:38px;border:1px solid var(--mw-accent);color:var(--mw-accent);border-radius:50%}.timeline{flex:1;max-width:360px;min-width:100px;display:flex;align-items:center;gap:12px}.timeline input{width:100%}#time{font:10px system-ui,sans-serif;color:var(--mw-muted);white-space:nowrap}#expand{font-size:24px;width:36px;padding:0}
#drawer{background:var(--mw-panel);border-top:1px solid var(--mw-border);padding:10px clamp(14px,3vw,36px) 16px;max-height:calc(var(--mw-available-height,100dvh) - 68px - var(--mw-notice-height,0px));overflow:auto;overscroll-behavior:contain}.detail-heading,.queue-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:1000px;margin:auto}.detail-heading button{font-size:24px}.details{display:flex;gap:20px;max-width:1000px;margin:0 auto 16px;align-items:center}.details img{object-fit:cover;border:1px solid var(--mw-border);border-radius:9px}.details>div{min-width:0}h1{font-size:clamp(18px,3vw,25px);margin:0 0 7px;overflow-wrap:anywhere}p{margin:5px 0;color:var(--mw-muted)}.details a{display:inline-block;margin-top:6px;font-size:12px}.full-controls{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;max-width:1000px;margin:0 auto 14px;padding:10px 0;border-top:1px solid var(--mw-border);border-bottom:1px solid var(--mw-border)}.full-controls button,.full-controls select{border:1px solid var(--mw-border);font-size:12px}.full-controls label{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mw-muted)}select{background:var(--mw-bg);color:var(--mw-text);padding:7px;border-radius:5px}.volume input{width:90px}h2{font:11px system-ui,sans-serif;text-transform:uppercase;letter-spacing:.12em;color:var(--mw-muted);margin:7px 0}#refresh{font-size:11px}#queue{list-style:none;max-width:1000px;margin:0 auto 14px;padding:0;max-height:190px;overflow:auto;border-top:1px solid var(--mw-border)}#queue li{border-bottom:1px solid var(--mw-border)}#queue button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:16px;text-align:left;border-radius:0;padding:9px 8px}#queue button[aria-current=true]{color:var(--mw-accent);background:var(--mw-bg)}#queue small{color:var(--mw-muted);text-align:right}footer{max-width:1000px;margin:auto;display:flex;gap:15px;flex-wrap:wrap;font-size:10px}#notice{padding:8px 16px;font:12px system-ui,sans-serif;color:var(--mw-accent);border-top:1px solid var(--mw-border)}
@media(max-width:600px){.bar{gap:4px}#cover{width:34px;height:34px}.timeline{flex:0 0 64px;width:64px;min-width:0}.timeline input{display:none}#time{font-size:9px}.transport button{width:30px}.transport .play{width:34px;height:34px}.eyebrow{font-size:8px;letter-spacing:.07em}#title{font-size:12px}#artist{font-size:10px}.details{gap:12px}.details img{width:74px;height:74px}#queue small{max-width:35%}}
@media(max-width:380px){.timeline{display:none}.bar{padding-inline:6px}#cover{width:28px;height:28px}.transport button{width:28px}#expand{width:28px}}
.detail-timeline{display:flex;align-items:center;gap:14px;max-width:1000px;margin:0 auto 14px}.detail-timeline input{flex:1;min-width:0}#detail-time{font:11px system-ui,sans-serif;color:var(--mw-muted);white-space:nowrap}

.transport,#expand,.timeline{flex-shrink:0}
#corsair-auth{max-width:1000px;margin:0 auto 20px;padding:14px;border:1px solid var(--mw-border);border-radius:8px}#corsair-auth>div{display:flex;gap:8px;margin-top:8px}#corsair-auth input{min-width:0;flex:1;background:var(--mw-bg);color:var(--mw-text);border:1px solid var(--mw-border);padding:9px;border-radius:6px}#corsair-auth button{border-color:var(--mw-accent)}#corsair-auth p{font-size:11px}#signout{font-size:10px;padding:0 6px;min-height:20px}
.overlap input{width:90px}.overlap output{min-width:32px;font-size:11px;color:var(--mw-accent)}

#queue li[data-state="history"]{opacity:.45}#queue li[data-state="current"]{border-top:2px solid var(--mw-accent);border-bottom:2px solid var(--mw-accent)}