:root{--top-h:34px;--radius:5px;--font-ui:ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;--font-mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace}html[data-theme=dark]{--bg:#0d0f13;--bg-elev:#14171d;--bg-sunk:#0a0c0f;--border:#242932;--border-strong:#363d49;--fg:#e6e9ef;--fg-dim:#8b94a3;--fg-faint:#5c6472;--accent:#4ee0b5;--accent-fg:#07231c;--danger:#ff6b6b;--danger-bg:#2a1416;--warn:#f0b64a;--hover:#ffffff0f;--shadow:0 10px 34px #0000008c}html[data-theme=light]{--bg:#f2f4f7;--bg-elev:#fff;--bg-sunk:#e8ebef;--border:#dde1e7;--border-strong:#c3cad3;--fg:#1b202a;--fg-dim:#616a78;--fg-faint:#8b94a1;--accent:#0f9d76;--accent-fg:#fff;--danger:#cf3b3b;--danger-bg:#fdeaea;--warn:#a06a00;--hover:#0000000d;--shadow:0 10px 30px #1018282e}:root{--gutter:6px}html[data-theme=dark]{--bg-canvas:#101318;--grid:#ffffff0d}html[data-theme=light]{--bg-canvas:#fbfbfc;--grid:#0000000e}*{box-sizing:border-box}html,body{overscroll-behavior:none;height:100%;margin:0;overflow:hidden}body{font-family:var(--font-ui);color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased;font-size:13px}#app{flex-direction:column;height:100%;display:flex}.topbar{flex:0 0 var(--top-h);height:var(--top-h);background:var(--bg-elev);border-bottom:1px solid var(--border);-webkit-user-select:none;user-select:none;align-items:center;gap:6px;padding:0 6px;display:flex}.brand{letter-spacing:.02em;color:var(--fg-dim);white-space:nowrap;align-items:center;gap:6px;padding:0 10px 0 2px;font-size:12px;font-weight:650;display:flex}.brand:hover{color:var(--fg)}.brand svg{width:15px;height:15px;display:block}.chip{border:1px solid var(--border);color:var(--fg-dim);font:10.5px var(--font-mono);white-space:nowrap;background:0 0;border-radius:10px;flex:none;padding:1px 7px}.chip[data-state=error]{color:var(--danger);border-color:var(--danger)}.chip[data-state=busy]{color:var(--accent);border-color:var(--accent)}.grow{flex:auto;min-width:8px}.ib{min-width:25px;height:25px;color:var(--fg-dim);cursor:pointer;background:0 0;border:0;border-radius:4px;flex:none;justify-content:center;align-items:center;gap:4px;padding:0;display:inline-flex}.ib:has(.ib-label){padding:0 7px}.ib-label{font-size:11.5px}.ib:hover{background:var(--hover);color:var(--fg)}.ib:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.ib.on{color:var(--accent-fg);background:var(--accent)}.ib[aria-pressed=true]{color:var(--accent);background:var(--hover)}.ib svg{fill:none;stroke:currentColor;width:16px;height:16px;display:block}.sel{border:1px solid var(--border);background:var(--bg-sunk);max-width:132px;height:24px;color:var(--fg-dim);font:12px var(--font-ui);cursor:pointer;appearance:none;border-radius:4px;flex:none;padding:0 4px}.sel:hover{color:var(--fg);border-color:var(--border-strong)}.vr{background:var(--border);flex:none;width:1px;height:16px;margin:0 3px}.workspace{flex-direction:row;flex:auto;min-height:0;display:flex}.workspace[data-dir=vertical]{flex-direction:column}.pane{flex-direction:column;min-width:0;min-height:0;display:flex;position:relative;overflow:hidden}.pane-editor{background:var(--bg);flex:0 0 38%}.pane-view{background:var(--bg-canvas);flex:auto}.workspace[data-collapsed=true] .pane-editor,.workspace[data-collapsed=true] .gutter{display:none}.gutter{flex:0 0 var(--gutter);background:var(--bg-elev);border-left:1px solid var(--border);border-right:1px solid var(--border);cursor:col-resize;touch-action:none;position:relative}.workspace[data-dir=vertical] .gutter{cursor:row-resize;border:0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.gutter:after{content:"";background:var(--border-strong);border-radius:2px;width:2px;height:22px;position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%)}.workspace[data-dir=vertical] .gutter:after{width:22px;height:2px}.gutter:hover:after,.gutter[data-dragging=true]:after{background:var(--accent)}.editor-host{flex:auto;min-height:0;overflow:hidden}.cm-editor{height:100%;font-size:12.5px}.cm-editor .cm-scroller{font-family:var(--font-mono);line-height:1.55}.cm-editor.cm-focused{outline:none!important}.cm-gutters{border-right:1px solid var(--border)!important}.canvas{cursor:grab;touch-action:none;background-image:linear-gradient(to right, var(--grid) 1px, transparent 1px), linear-gradient(to bottom, var(--grid) 1px, transparent 1px);background-size:22px 22px;position:absolute;inset:0;overflow:hidden}.canvas[data-panning=true]{cursor:grabbing}.stage{transform-origin:0 0;will-change:transform;position:absolute;top:0;left:0}.stage svg{display:block}.stage[data-stale=true]{opacity:.45;filter:saturate(.5)}.zoombar{background:color-mix(in srgb, var(--bg-elev) 88%, transparent);border:1px solid var(--border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:.55;-webkit-user-select:none;user-select:none;border-radius:8px;align-items:center;gap:1px;padding:2px;transition:opacity .15s;display:flex;position:absolute;bottom:8px;right:8px}.pane-view:hover .zoombar,.zoombar:focus-within{opacity:1}.zoom-level{text-align:center;min-width:44px;font-family:var(--font-mono);color:var(--fg-dim);cursor:pointer;background:0 0;border:0;padding:0 2px;font-size:11px}.zoom-level:hover{color:var(--fg)}.error{background:var(--danger-bg);border:1px solid var(--danger);border-radius:var(--radius);max-height:42%;color:var(--danger);font-family:var(--font-mono);white-space:pre-wrap;word-break:break-word;padding:7px 26px 8px 9px;font-size:11.5px;line-height:1.5;position:absolute;bottom:8px;left:8px;right:8px;overflow:auto}.error[hidden]{display:none}.error-close{width:18px;height:18px;color:inherit;cursor:pointer;opacity:.7;background:0 0;border:0;font-size:14px;line-height:1;position:absolute;top:3px;right:4px}.error-close:hover{opacity:1}.empty{text-align:center;color:var(--fg-dim);pointer-events:none;place-content:center;gap:4px;font-size:12px;display:grid;position:absolute;inset:0}.empty[hidden]{display:none}.empty kbd{font-family:var(--font-mono);border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:4px;padding:1px 4px;font-size:11px}@media (max-width:720px){.brand span,.ib-label{display:none}.sel{max-width:92px}}.toast{background:var(--bg-elev);border:1px solid var(--border-strong);max-width:calc(100% - 120px);color:var(--fg);white-space:nowrap;text-overflow:ellipsis;box-shadow:var(--shadow);pointer-events:none;z-index:2;border-radius:14px;padding:5px 12px;font-size:11.5px;line-height:1.4;position:absolute;bottom:10px;left:50%;overflow:hidden;transform:translate(-50%)}.toast[hidden]{display:none}