:root{--bg:#f4f6f8;--panel:#fff;--line:#d5dbe2;--ink:#1d2630;--mute:#5d6875;--acc:#1f6fd0;--warn:#d9822b;--bad:#c93c3c;--ok:#2f9e5b}@media (prefers-color-scheme:dark){:root{--bg:#14181d;--panel:#1c2229;--line:#2f3945;--ink:#e6ebf0;--mute:#93a0ae}}*{box-sizing:border-box}body{background:var(--bg);color:var(--ink);flex-direction:column;height:100vh;margin:0;font:14px system-ui,sans-serif;display:flex}header{background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;display:flex}header h1{margin:0 10px 0 0;font-size:15px}button,select,input{font:inherit;color:inherit;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:5px 10px}button{cursor:pointer}button:hover:not(:disabled){border-color:var(--acc)}button:disabled{opacity:.45;cursor:default}button.primary{background:var(--acc);border-color:var(--acc);color:#fff}button.tool.on{background:var(--acc);color:#fff;border-color:var(--acc)}main{flex:1;min-height:0;display:flex}#tools{background:var(--panel);border-right:1px solid var(--line);flex-direction:column;gap:6px;width:92px;padding:8px;display:flex}#tools button{text-align:left;width:100%}#stage{flex:1;min-width:0;position:relative}svg{touch-action:none;-webkit-user-select:none;user-select:none;background:#fff;width:100%;height:100%;display:block}#side{background:var(--panel);border-left:1px solid var(--line);width:310px;padding:10px;overflow:auto}#side h3{color:var(--mute);text-transform:uppercase;letter-spacing:.04em;margin:12px 0 6px;font-size:13px}.row{flex-wrap:wrap;align-items:center;gap:6px;margin:4px 0;display:flex}.mute{color:var(--mute)}.tag{border:1px solid var(--line);border-radius:9px;padding:1px 6px;font-size:11px}.tag.warn{border-color:var(--warn);color:var(--warn)}.tag.ok{border-color:var(--ok);color:var(--ok)}#hint{color:#fff;pointer-events:none;background:#000000a6;border-radius:6px;padding:4px 10px;font-size:12px;position:absolute;bottom:8px;left:10px}#toast{background:var(--bad);color:#fff;border-radius:6px;max-width:360px;padding:8px 12px;display:none;position:absolute;top:8px;right:10px}dialog{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:10px;max-width:440px}a{color:var(--acc)}.proj{cursor:pointer;border:1px solid var(--line);border-radius:6px;margin:4px 0;padding:6px}.proj:hover{border-color:var(--acc)}#overlay{background:var(--bg);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:20px;display:none;position:absolute;inset:0}#pv{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;background:#fff;width:100%;height:100%;display:block}#pvbar{background:var(--panel);border:1px solid var(--line);border-radius:8px;align-items:center;gap:6px;padding:6px 8px;display:none;position:absolute;top:8px;left:10px}.vbtn{padding:4px 10px}.vbtn.on{background:var(--acc);border-color:var(--acc);color:#fff}pre{white-space:pre-wrap;text-align:left;max-width:620px;max-height:200px;font-size:11px;overflow:auto}