:root{--bg: #08090a;--bg-elev: #0d0e10;--bg-elev-2: #141517;--surface: #1c1d20;--surface-hi: #26272b;--border: #1e1f22;--border-hi: #2a2c30;--text: #f7f8f8;--text-dim: #8a8f98;--text-faint: #62666d;--accent: #f7f8f8;--accent-soft: rgba(255, 255, 255, .07);--danger: #d16b6b;--danger-soft: rgba(209, 107, 107, .11);--node-fill: #16171a;--node-fill-sel: #1f2024;--node-stroke: #33353a;--node-stroke-hover: #4c4f56;--edge: #6f747c;--text-code: #c4c9d0;--grid-dot: rgba(255, 255, 255, .055);--scroll-thumb: #2a2c30;--topbar-h: 44px;--sidebar-w: 232px;--panel-w: 336px;--radius: 8px;--radius-sm: 6px;--radius-xs: 4px;--shadow: 0 16px 40px rgba(0, 0, 0, .6);--shadow-dock: 0 4px 16px rgba(0, 0, 0, .5), 0 0 0 1px var(--border-hi);--font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;background:var(--bg);color:var(--text);font-family:var(--font);font-size:13px;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}*{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) transparent}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border:3px solid transparent;background-clip:content-box;border-radius:5px}:focus-visible{outline:1px solid rgba(255,255,255,.45);outline-offset:1px}button{font-family:inherit;font-size:inherit;letter-spacing:inherit;cursor:pointer;color:inherit;touch-action:manipulation;-webkit-touch-callout:none}#app{height:100vh;height:100dvh;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;gap:6px;flex:0 0 auto;padding:0 max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left));padding-top:env(safe-area-inset-top);height:calc(var(--topbar-h) + env(safe-area-inset-top));background:var(--bg-elev);border-bottom:1px solid var(--border);z-index:40}.topbar-spacer{flex:1 1 auto}.brand-mark{display:grid;place-items:center;flex:0 0 auto;width:24px;height:24px;border-radius:var(--radius-sm);background:var(--accent);color:var(--bg);margin-right:2px}.brand-mark svg{width:15px;height:15px}.doc{display:flex;align-items:baseline;gap:8px;min-width:0}.doc-title{max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:transparent;border:none;border-radius:var(--radius-xs);padding:3px 6px;margin-left:-6px;font-size:13px;font-weight:500;color:var(--text)}.doc-meta{font-size:11px;color:var(--text-faint);white-space:nowrap}.dir-select{height:26px;border-radius:var(--radius-sm);border:1px solid var(--border-hi);background:var(--bg-elev-2);color:var(--text-dim);font-family:inherit;font-size:11.5px;padding:0 4px}.search-btn{display:flex;align-items:center;gap:6px;height:26px;padding:0 7px;border-radius:var(--radius-sm);border:1px solid var(--border-hi);background:var(--bg-elev-2);color:var(--text-faint)}.search-btn svg{width:14px;height:14px}.search-hint{font-size:11px;letter-spacing:.02em}.icon-btn{display:grid;place-items:center;flex:0 0 auto;width:28px;height:28px;border-radius:var(--radius-sm);border:none;background:transparent;color:var(--text-dim);transition:background .1s,color .1s}.icon-btn svg{width:16px;height:16px}.btn{display:flex;align-items:center;gap:5px;height:26px;padding:0 8px;border-radius:var(--radius-sm);border:1px solid var(--border-hi);background:var(--bg-elev-2);color:var(--text-dim);font-size:12px;font-weight:500;transition:background .1s,color .1s,border-color .1s}.btn svg{width:13px;height:13px}.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--bg)}.btn-danger{background:var(--danger);border-color:var(--danger);color:#17090a}@media(hover:hover){.icon-btn:hover{background:var(--surface);color:var(--text)}.btn:hover{background:var(--surface);border-color:var(--surface-hi);color:var(--text)}.btn-primary:hover{background:#fff;color:var(--bg)}.btn-danger:hover{background:#dd7c7c}.doc-title:hover{background:var(--surface)}.dir-select:hover,.search-btn:hover{background:var(--surface);color:var(--text);border-color:var(--surface-hi)}}.inline-edit{height:24px;min-width:0;border-radius:var(--radius-xs);border:1px solid var(--accent);background:var(--surface);color:var(--text);font-family:inherit;font-size:13px;font-weight:500;letter-spacing:inherit;padding:0 5px}.inline-edit:focus{outline:none}.app-main{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:0 minmax(0,1fr) 0;transition:grid-template-columns .16s ease}.app.sidebar-open .app-main{grid-template-columns:var(--sidebar-w) minmax(0,1fr) 0}.app.panel-open .app-main{grid-template-columns:0 minmax(0,1fr) var(--panel-w)}.app.sidebar-open.panel-open .app-main{grid-template-columns:var(--sidebar-w) minmax(0,1fr) var(--panel-w)}.sidebar,.panel{min-height:0;min-width:0;overflow:hidden;display:flex;flex-direction:column;background:var(--bg-elev);padding-bottom:env(safe-area-inset-bottom)}.sidebar{border-right:1px solid var(--border)}.panel{border-left:1px solid var(--border)}.pane-head{display:flex;align-items:center;gap:6px;flex:0 0 auto;height:36px;padding:0 6px 0 10px;border-bottom:1px solid var(--border)}.pane-title{flex:1 1 auto;font-size:11px;font-weight:550;letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint)}.pane-actions{display:flex;align-items:center;gap:4px;margin-left:auto}.pane-foot{flex:0 0 auto;padding:8px 10px;border-top:1px solid var(--border)}.hint{font-size:11px;color:var(--text-faint)}.icon-btn.drawer-close{display:none}.diagram-list{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:4px;display:flex;flex-direction:column;gap:1px}.diagram-item{display:flex;align-items:center;border-radius:var(--radius-sm);padding-right:2px}.diagram-item.active{background:var(--surface)}.diagram-open{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;text-align:left;background:none;border:none;height:28px;padding:0 6px;border-radius:var(--radius-sm)}.diagram-name{flex:1 1 auto;min-width:0;font-size:12.5px;font-weight:450;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.diagram-item.active .diagram-name{color:var(--text);font-weight:500}.diagram-count{flex:0 0 auto;font-size:11px;font-variant-numeric:tabular-nums;color:var(--text-faint)}.diagram-actions{display:flex;align-items:center;gap:0;flex:0 0 auto}.row-btn{display:grid;place-items:center;width:22px;height:22px;border:none;border-radius:var(--radius-xs);background:transparent;color:var(--text-faint)}.row-btn svg{width:13px;height:13px}@media(hover:hover){.diagram-actions{opacity:0;transition:opacity .1s}.diagram-item:hover .diagram-actions,.diagram-item:focus-within .diagram-actions{opacity:1}.diagram-item:hover:not(.active){background:var(--bg-elev-2)}.row-btn:hover{background:var(--surface-hi);color:var(--text)}.diagram-actions .row-btn[aria-label=Delete]:hover{color:var(--danger);background:var(--danger-soft)}.diagram-count{transition:opacity .1s}.diagram-item:hover .diagram-count{opacity:0}}.editor-area{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--bg)}.canvas{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background-color:var(--bg);background-image:radial-gradient(circle at 1px 1px,var(--grid-dot) 1px,transparent 0);background-size:24px 24px}.editor-svg{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;user-select:none;-webkit-user-select:none}.editor-svg[data-mode=connect]{cursor:crosshair}.editor-svg[data-mode=pan]{cursor:grab}.canvas-empty{position:absolute;top:0;right:0;bottom:0;left:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;pointer-events:none;text-align:center}.canvas-empty.visible{display:flex}.canvas-empty p{margin:0;font-size:13px;font-weight:500;color:var(--text-dim)}.canvas-empty span{font-size:12px;color:var(--text-faint)}.canvas-overlay{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;padding:10px;padding-bottom:max(10px,env(safe-area-inset-bottom));z-index:20;pointer-events:none}.dock,.selection-bar{display:flex;align-items:center;gap:1px;padding:3px;border-radius:var(--radius);background:#141517d1;-webkit-backdrop-filter:blur(14px) saturate(120%);backdrop-filter:blur(14px) saturate(120%);box-shadow:var(--shadow-dock);pointer-events:auto}.dock-btn{display:grid;place-items:center;width:30px;height:30px;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-dim);transition:background .1s,color .1s}.dock-btn svg{width:16px;height:16px}.dock-btn.active{background:var(--surface-hi);color:var(--text)}.dock-sep{width:1px;height:18px;margin:0 3px;background:var(--border-hi);flex:0 0 auto}.zoom-level{min-width:42px;height:30px;padding:0 2px;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-dim);font-size:11.5px;font-variant-numeric:tabular-nums}@media(hover:hover){.dock-btn:hover,.zoom-level:hover{background:var(--surface);color:var(--text)}}.selection-bar{position:absolute;left:50%;transform:translate(-50%);bottom:calc(56px + env(safe-area-inset-bottom));z-index:21;display:none;max-width:calc(100% - 20px);overflow-x:auto;overscroll-behavior-x:contain}.selection-bar.visible{display:flex}.seg{display:flex;align-items:center;gap:1px;flex:0 0 auto}.seg-btn{display:grid;place-items:center;flex:0 0 auto;width:30px;height:30px;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-dim);transition:background .1s,color .1s}.seg-btn svg{width:17px;height:17px}.seg-btn.active{background:var(--accent);color:var(--bg)}.sel-count{font-size:11px;font-variant-numeric:tabular-nums;color:var(--text-faint);padding:0 4px}@media(hover:hover){.seg-btn:hover:not(.active){background:var(--surface);color:var(--text)}.seg-btn.danger:hover{background:var(--danger-soft);color:var(--danger)}}.node{cursor:grab}.node-shape{fill:var(--node-fill);stroke:var(--node-stroke);stroke-width:1.25;transition:stroke .1s,fill .1s}@media(hover:hover){.node:hover .node-shape{stroke:var(--node-stroke-hover)}}.node.selected .node-shape{stroke:var(--accent);stroke-width:1.75;fill:var(--node-fill-sel)}.shape-text .node-shape{fill:transparent;stroke:transparent}.shape-text.selected .node-shape{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1;stroke-dasharray:3 3}@media(hover:hover){.shape-text:hover .node-shape{stroke:var(--node-stroke);stroke-dasharray:3 3}}.node-label{fill:var(--text);font-size:14px;font-family:var(--font);letter-spacing:-.01em;text-anchor:middle;dominant-baseline:central;pointer-events:none}.node-label.start{text-anchor:start}.node-icon{fill:none;stroke:var(--text-dim);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.node.selected .node-icon{stroke:var(--text)}.edge-path{stroke:var(--edge);stroke-width:1.5;fill:none}.edge-hit{stroke:transparent;stroke-width:20;fill:none;cursor:pointer}.arrowhead{fill:var(--edge);stroke:none}.edge-arrow .edge-path,.edge-thick .edge-path{stroke-linecap:round}.edge-thick .edge-path{stroke-width:3.25}.edge-dotted .edge-path{stroke-dasharray:2 5;stroke-linecap:round}.edge.selected .edge-path{stroke:var(--accent)}.edge.selected .arrowhead{fill:var(--accent)}.edge-label{fill:var(--text-dim);font-size:12px;font-family:var(--font);text-anchor:middle;dominant-baseline:central;pointer-events:none}.edge-label-bg{fill:var(--bg);stroke:var(--border-hi);stroke-width:1;pointer-events:none}.marquee{fill:#ffffff0d;stroke:#ffffff6b;stroke-width:1;stroke-dasharray:4 3}.temp-link{stroke:var(--accent);stroke-width:1.5;stroke-dasharray:5 4;fill:none}.label-editor{position:absolute;z-index:30;resize:none;border:1px solid var(--accent);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-family:var(--font);font-size:14px;letter-spacing:-.01em;text-align:center;padding:4px;overflow:hidden;box-shadow:var(--shadow)}.label-editor:focus{outline:none}.tabs{display:flex;align-items:center;gap:2px}.tab{border:none;background:transparent;color:var(--text-faint);padding:4px 8px;border-radius:var(--radius-sm);font-size:12px;font-weight:500;transition:background .1s,color .1s}.tab.active{background:var(--surface-hi);color:var(--text)}@media(hover:hover){.tab:hover:not(.active){color:var(--text-dim);background:var(--bg-elev-2)}}.panel-body{flex:1 1 auto;min-height:0;position:relative}.panel-view{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.source{width:100%;height:100%;border:none;resize:none;background:var(--bg);color:var(--text-code);padding:12px;font-family:var(--mono);font-size:12px;letter-spacing:0;line-height:1.65;white-space:pre}.source:focus{outline:none}.preview{min-height:100%;display:grid;place-items:center;padding:16px}.preview svg{max-width:100%;height:auto}.preview-error{align-self:start;justify-self:stretch;color:var(--danger);font-size:12.5px}.preview-error pre{white-space:pre-wrap;color:var(--text-dim);background:var(--bg-elev-2);padding:10px;border-radius:var(--radius-sm);border:1px solid var(--border);font-family:var(--mono);font-size:11.5px}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;background:#0000008c;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.palette-overlay{align-items:flex-start;padding-top:min(15vh,120px)}.palette{width:min(560px,100%);max-height:min(60vh,460px);display:flex;flex-direction:column;background:var(--bg-elev);border:1px solid var(--border-hi);border-radius:10px;box-shadow:var(--shadow);overflow:hidden}.palette-head{flex:0 0 auto;border-bottom:1px solid var(--border);padding:4px}.palette-input{width:100%;height:38px;border:none;background:transparent;color:var(--text);font-family:inherit;font-size:14px;letter-spacing:inherit;padding:0 10px}.palette-input::placeholder{color:var(--text-faint)}.palette-input:focus{outline:none}.palette-list{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:4px}.palette-group{padding:8px 8px 4px;font-size:10.5px;font-weight:550;letter-spacing:.05em;text-transform:uppercase;color:var(--text-faint)}.palette-item{display:flex;align-items:center;gap:8px;width:100%;height:30px;padding:0 8px;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-dim);text-align:left;font-size:12.5px}.palette-item.active{background:var(--surface);color:var(--text)}.palette-label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.palette-hint{flex:0 0 auto;font-size:11px;color:var(--text-faint);letter-spacing:.02em}.palette-empty{padding:16px 10px;font-size:12.5px;color:var(--text-faint);text-align:center}.picker{position:fixed;z-index:60;width:268px;max-height:min(60vh,340px);display:flex;flex-direction:column;background:var(--bg-elev);border:1px solid var(--border-hi);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.picker-head{flex:0 0 auto;padding:4px;border-bottom:1px solid var(--border)}.picker-search{width:100%;height:28px;border:none;background:transparent;color:var(--text);font-family:inherit;font-size:12.5px;letter-spacing:inherit;padding:0 8px}.picker-search::placeholder{color:var(--text-faint)}.picker-search:focus{outline:none}.picker-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:4px}.picker-group{padding:8px 6px 4px;font-size:10.5px;font-weight:550;letter-spacing:.05em;text-transform:uppercase;color:var(--text-faint)}.picker-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:2px}.picker-icon{display:grid;place-items:center;height:34px;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-dim);transition:background .1s,color .1s}.picker-icon.active{background:var(--accent);color:var(--bg)}.picker-none{display:flex;align-items:center;gap:7px;width:100%;height:30px;padding:0 7px;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-dim);font-size:12.5px;text-align:left}.picker-none-icon{display:grid;place-items:center}.picker-none-icon svg{width:13px;height:13px}.picker-empty{padding:14px 8px;font-size:12.5px;color:var(--text-faint);text-align:center}@media(hover:hover){.picker-icon:hover:not(.active),.picker-none:hover{background:var(--surface);color:var(--text)}}@media(pointer:coarse){.picker{width:300px}.picker-search{height:38px;font-size:16px}.picker-icon{height:44px}.picker-grid{grid-template-columns:repeat(5,1fr)}.picker-none{height:40px}}.dialog{width:min(400px,100%);background:var(--bg-elev);border:1px solid var(--border-hi);border-radius:10px;box-shadow:var(--shadow);padding:18px}.dialog-title{margin:0;font-size:14px;font-weight:550}.dialog-body{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--text-dim)}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.dialog-actions .btn{height:28px;padding:0 12px}.backdrop{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#0000009e;z-index:45}@media(max-width:940px){.app-main,.app.sidebar-open .app-main,.app.panel-open .app-main,.app.sidebar-open.panel-open .app-main{grid-template-columns:minmax(0,1fr)}.sidebar,.panel{position:fixed;top:calc(var(--topbar-h) + env(safe-area-inset-top));bottom:0;z-index:50;width:min(84vw,300px);transition:transform .2s ease;box-shadow:var(--shadow)}.sidebar{left:0;padding-left:env(safe-area-inset-left);transform:translate(-105%)}.panel{right:0;width:min(92vw,420px);padding-right:env(safe-area-inset-right);transform:translate(105%)}.app.sidebar-open .sidebar,.app.panel-open .panel{transform:translate(0)}.app.sidebar-open .backdrop,.app.panel-open .backdrop{display:block}.icon-btn.drawer-close{display:grid}.doc-title{max-width:40vw}}@media(max-width:560px){.doc-meta,.search-hint{display:none}.doc-title{max-width:46vw}.preview{padding:12px}}@media(pointer:coarse){:root{--topbar-h: 52px}.icon-btn{width:44px;height:44px}.icon-btn svg{width:19px;height:19px}.doc-title{min-height:40px;padding:0 8px}.search-btn,.dir-select,.btn{height:42px;padding:0 10px}.btn{font-size:13px}.tab{padding:10px 13px;font-size:13px}.row-btn{width:36px;height:36px}.row-btn svg{width:16px;height:16px}.dock-btn,.seg-btn{width:44px;height:44px}.dock-btn svg{width:19px;height:19px}.seg-btn svg{width:20px;height:20px}.zoom-level{height:44px;min-width:48px;font-size:12.5px}.dock-sep{height:24px}.selection-bar{bottom:calc(72px + env(safe-area-inset-bottom))}.diagram-open{height:44px}.pane-head{height:52px}.palette-item{height:40px;font-size:13.5px}.palette-input,.inline-edit,.dir-select,.label-editor,.source{font-size:16px}.edge-hit{stroke-width:34}}@media(max-width:560px)and (pointer:coarse){.zoom-step{display:none}.selection-bar{max-width:calc(100% - 12px);padding:3px 2px}.selection-bar .dock-sep{margin:0 1px}}@media(max-height:500px)and (orientation:landscape){:root{--topbar-h: 38px}.canvas-overlay{padding:6px}.zoom-step{display:none}.selection-bar{bottom:calc(58px + env(safe-area-inset-bottom))}@media(pointer:coarse){.dock-btn,.seg-btn{width:38px;height:38px}.zoom-level{height:38px}}}