:root{--paper:#e6e4df;--face:#f7f6f3;--edge:#a9a6a0;--mute:#8c8a85;--ink:#1a1a1a;--acc:#ff5a1f;
 --t1:9px;--t2:11px;--t3:14px;--u:8px;--hit:40px;--dots:radial-gradient(var(--edge) .8px,transparent 1.1px) 0 0/4px 4px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--paper);color:var(--ink);font-family:ui-monospace,"Roboto Mono",Menlo,monospace;font-size:var(--t2);overflow:hidden}
#dev{height:100vh;height:var(--app-h,100dvh);display:flex;flex-direction:column;padding:var(--u) var(--u) calc(var(--u) + env(safe-area-inset-bottom,0px))}
header{display:flex;justify-content:space-between;align-items:center;height:var(--hit);flex:0 0 auto;margin-bottom:var(--u)}
.brand b{font-size:22px;font-weight:800;letter-spacing:-.5px;display:block;line-height:1}.brand i{display:block;font-style:normal;font-size:var(--t1);letter-spacing:2px;color:var(--mute);margin-top:3px}
.hdr{display:flex;gap:var(--u);align-items:center}.led{width:8px;height:8px;border-radius:50%;background:var(--edge)}.led.on{background:var(--acc);box-shadow:0 0 6px var(--acc)}
svg{width:18px;height:18px;display:block}svg.ln{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square}svg.fl{fill:currentColor}
button{font:inherit;font-size:var(--t2);letter-spacing:.5px;text-transform:uppercase;border:0;background:var(--face);color:var(--ink);border-radius:6px;min-height:var(--hit);min-width:var(--hit);padding:0 6px;box-shadow:0 2px 0 var(--edge),inset 0 0 0 1px #d8d4cc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-flex;align-items:center;justify-content:center;gap:4px;cursor:pointer}
button:active{transform:translateY(2px);box-shadow:none}button.on{background:var(--ink);color:var(--face);box-shadow:0 2px 0 #000}button.acc{background:var(--acc);color:#fff;box-shadow:0 2px 0 #b83a0d}
button:disabled{color:var(--mute);background:var(--face) var(--dots);opacity:.75}
input,select{font:inherit;font-size:var(--t2);min-height:var(--hit);padding:0 8px;border-radius:6px;border:1px solid var(--edge);background:var(--face);color:var(--ink);width:100%;min-width:0}
.lbl{font-size:var(--t1);letter-spacing:1.5px;color:var(--mute);text-transform:uppercase;margin:var(--u) 0 4px}
.row{display:grid;gap:6px;margin-top:6px}.g6{grid-template-columns:repeat(6,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.hide{display:none!important}
#main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--u)}
#side{order:2;flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
#stage{order:1;flex:0 1 auto;display:flex;flex-direction:column;min-height:0}
#extra{flex:1 1 auto;min-height:0;overflow-y:auto}
@media (max-width:699px){#side{flex:1 0 34%}#stage{max-height:66%}}
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;flex:0 0 auto}
#pane{flex:1 1 auto;min-height:0;overflow-y:auto;padding:2px 0 var(--u)}
#vwrap{position:relative;background:#111;border-radius:6px;overflow:hidden;aspect-ratio:16/9;touch-action:none;flex:0 0 auto}
#v,#gl{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform-origin:center}
#gl{display:none}#vwrap.glon #gl{display:block}#vwrap.glon #v{opacity:0}
#empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--mute);font-size:var(--t1);letter-spacing:2px;background:#111 radial-gradient(#333 .8px,transparent 1.1px) 0 0/4px 4px}#empty span{color:var(--acc);margin-left:6px}
#osd{position:absolute;left:8px;top:8px;color:#fff;font-size:var(--t1);letter-spacing:1px;background:rgba(0,0,0,.5);padding:2px 6px;border-radius:3px;pointer-events:none}#osd:empty{display:none}
.hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--t3);pointer-events:none;opacity:0;transition:opacity .3s}.hint.on{opacity:1}
#sub{position:absolute;left:5%;right:5%;bottom:8%;text-align:center;color:#fff;font-size:var(--t3);text-shadow:0 1px 2px #000,0 0 4px #000;pointer-events:none}
#bar{display:flex;align-items:center;gap:var(--u);height:24px;margin-top:6px;font-size:var(--t1)}
#scrub{position:relative;flex:1;height:24px;background:var(--face) var(--dots);border-radius:4px;touch-action:none;cursor:pointer}
#prog{position:absolute;left:0;top:0;bottom:0;background:var(--ink);opacity:.85;border-radius:4px 0 0 4px}
#abz{position:absolute;top:0;bottom:0;background:var(--acc);opacity:.35}
#scrub i{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--acc)}#scrub i:empty{}
#tool{flex:0 0 auto}
.strip{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.card{flex:0 0 112px;background:var(--face);border-radius:6px;box-shadow:inset 0 0 0 1px #d8d4cc;overflow:hidden;cursor:pointer}
.card .th{aspect-ratio:16/9;background:#222 radial-gradient(#444 .8px,transparent 1.1px) 0 0/4px 4px;background-size:cover;background-position:center}
.card .tt{padding:4px 6px 0;font-size:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}.card .why{padding:0 6px 4px;font-size:var(--t1);color:var(--acc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item{display:flex;gap:var(--u);align-items:center;padding:4px;border-bottom:1px solid #d8d4cc;min-height:48px;cursor:pointer}
.item .th{width:72px;height:40px;flex:0 0 auto;border-radius:3px;background:#222 radial-gradient(#444 .8px,transparent 1.1px) 0 0/4px 4px;background-size:cover;background-position:center}
.item .bd{flex:1;min-width:0}.item .bd b{display:block;font-size:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
.item .bd small{display:block;font-size:var(--t1);color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item.cur{box-shadow:inset 3px 0 0 var(--acc)}
.tag{display:inline-block;font-size:var(--t1);padding:1px 5px;border:1px solid var(--edge);border-radius:3px;margin:0 3px 3px 0;text-transform:uppercase}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}.chips button{min-height:32px;min-width:0;font-size:var(--t1)}
.mini{min-height:var(--hit);min-width:var(--hit);padding:0 6px;font-size:var(--t1)}
#sheet{position:fixed;inset:0;background:rgba(26,26,26,.35);display:flex;align-items:flex-end;justify-content:center;z-index:9}
.sh{background:var(--paper);width:100%;max-width:560px;max-height:85%;overflow-y:auto;border-radius:10px 10px 0 0;padding:var(--u) calc(var(--u)*2) calc(var(--u)*2)}
.shh{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--u)}.shh b{font-size:var(--t3)}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--face);padding:8px 12px;border-radius:6px;font-size:var(--t1);letter-spacing:1px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:10;max-width:90%}#toast.on{opacity:1}
.sl{display:grid;grid-template-columns:64px 1fr 40px;gap:6px;align-items:center;font-size:var(--t1)}input[type=range]{accent-color:var(--ink);min-height:32px;border:0;background:none;padding:0}
.note{font-size:var(--t1);color:var(--mute);line-height:1.5}
.ac{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
/* unfolded: two panes */
@media (min-width:700px){
 #main{flex-direction:row}#side{order:1;flex:0 0 300px}#stage{order:2;flex:1 1 auto}
 #vwrap{aspect-ratio:auto;flex:1 1 auto;min-height:200px}
}
@media (min-width:700px) and (max-height:820px){#relwrap .card{flex-basis:96px}}
body.pip header,body.pip #side,body.pip #bar,body.pip .row,body.pip #tool,body.pip #relwrap{display:none!important}
body.pip #dev{padding:0}body.pip #vwrap{flex:1;border-radius:0;aspect-ratio:auto}body.pip #stage{flex:1}