:root{--bg:#f2f3f6;--fg:#1b1f27;--panel:#fff;--bd:#d5d9e2;--mut:#667;--ac:#2f6df6;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0b0d12;--fg:#e6e9f0;--panel:#151922;--bd:#2a3140;--mut:#8b94a8;--ac:#6c9bff}}
:root[data-theme="dark"]{--bg:#0b0d12;--fg:#e6e9f0;--panel:#151922;--bd:#2a3140;--mut:#8b94a8;--ac:#6c9bff}
*{box-sizing:border-box}html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--fg);font:13px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;display:flex;flex-direction:column;overflow:hidden}
header{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--bd)}
header h1{font-size:14px;margin:0 6px 0 0}header label{display:flex;gap:5px;align-items:center;cursor:pointer;white-space:nowrap}
select,button{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--bd);border-radius:6px;padding:3px 8px}button{cursor:pointer}
#stage{position:relative;flex:1;min-height:0}canvas{display:block;width:100%;height:100%;touch-action:none}
#hud{position:absolute;left:8px;top:8px;background:#000a;color:#fff;padding:5px 9px;border-radius:6px;font-size:12px;pointer-events:none;max-width:90%}
#legend{position:absolute;right:8px;top:8px;background:#000a;color:#fff;padding:6px 9px;border-radius:6px;font-size:11px;display:grid;grid-template-columns:auto auto;gap:2px 10px}
#legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px}
#mini{height:84px;width:100%;background:var(--panel);border-top:1px solid var(--bd);cursor:pointer;touch-action:none}
#load{position:absolute;inset:0;display:grid;place-items:center;background:var(--bg);font-size:15px}
#play{font-weight:600;border-color:var(--ac);color:var(--ac)}#play:disabled{opacity:.5;cursor:default}#popts{display:none}
.playing #mini{cursor:crosshair;position:fixed;left:0;bottom:0;z-index:4;opacity:0;transition:opacity .15s}.playing #mini:hover{opacity:1}
.playing header{position:fixed;left:0;right:0;top:0;z-index:5;transform:translateY(-100%);transition:transform .15s;box-shadow:0 2px 10px #0008}.playing.hdr header{transform:none}
@media(max-width:640px){#legend{display:none}}