:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#171817;background:#fafafa;font-synthesis:none}body{margin:0;min-width:320px;min-height:100vh}#root{min-height:100vh}*{box-sizing:border-box}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #4f5bd5;outline-offset:2px}button:disabled{cursor:not-allowed;opacity:.38}.workbench{--paper:#fafafa;--sheet:#fff;--ink:#171817;--muted:#676b73;--line:#e1e3e8;--soft:#f3f4f6;--accent:#4f5bd5;--selection:#e9ebff;--editor-height: calc(100dvh - 126px) ;height:100dvh;min-height:600px;display:grid;grid-template-columns:224px minmax(350px,.88fr) minmax(440px,1.5fr);grid-template-rows:61px minmax(0,1fr);color:var(--ink);background:var(--paper)}.workbench.dark{--paper:#151616;--sheet:#1b1c1d;--ink:#f0f1ed;--muted:#a8aaa9;--line:#323436;--soft:#242627;--selection:#282c59;color-scheme:dark}.topbar{grid-column:1/-1;display:flex;align-items:center;gap:32px;padding:0 18px;border-bottom:1px solid var(--line);background:var(--paper);min-width:0}.brand{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;letter-spacing:-.03em;white-space:nowrap}.brand-mark{display:grid;place-items:center;width:24px;height:24px;border:1px solid var(--ink);border-radius:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}.product-label{color:var(--muted);font-weight:500;border-left:1px solid var(--line);padding-left:8px}.document-title{display:flex;flex-direction:column;gap:1px;min-width:0}.document-title strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.eyebrow{display:block;text-transform:uppercase;letter-spacing:.11em;color:var(--muted);font:600 9px ui-monospace,SFMono-Regular,Menlo,monospace}.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px}.save-status{font-size:11px;color:var(--muted);white-space:nowrap}.button,.icon-button{border:1px solid var(--line);background:var(--sheet);color:var(--ink);min-height:31px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;gap:7px}.button{padding:0 10px;font-size:12px;font-weight:600}.icon-button{width:31px;padding:0}.icon-button svg,.button svg,.import-row svg{width:15px;height:15px;stroke-width:1.7}.zoom-readout{width:44px;font:600 10px ui-monospace,SFMono-Regular,Menlo,monospace}.icon-button:hover:not(:disabled),.button:hover:not(:disabled){border-color:#aeb4c2;background:var(--soft)}.sidebar{grid-column:1;grid-row:2;border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--paper)}.sidebar-head{padding:18px 14px 10px;display:flex;justify-content:space-between;align-items:center}.new-menu{position:relative}.new-options{position:absolute;z-index:10;top:32px;right:0;padding:5px;min-width:145px;background:var(--sheet);border:1px solid var(--line);box-shadow:0 10px 24px #17181718;border-radius:6px;display:none}.new-menu:focus-within .new-options{display:grid}.new-options button{background:transparent;border:0;color:var(--ink);padding:7px 8px;text-align:left;font-size:12px;border-radius:4px}.new-options button:hover{background:var(--soft)}.sidebar nav{padding:0 7px;display:grid;gap:2px}.document-row{position:relative;min-width:0;border:0;border-radius:5px;padding:9px 8px;display:flex;align-items:center;gap:8px;background:transparent;color:var(--ink);text-align:left;font-size:12px}.document-row:hover{background:var(--soft)}.document-row.active{background:var(--selection);font-weight:650}.active-rail{position:absolute;left:0;width:2px;height:17px;background:var(--accent)}.type-dot{width:7px;height:7px;border:1px solid currentColor;border-radius:50%;flex:none}.type-dot.class{border-radius:1px}.type-dot.sequence{transform:rotate(45deg);border-radius:1px}.import-row{margin:16px 12px 0;padding:9px;display:flex;align-items:center;gap:7px;border-top:1px solid var(--line);color:var(--muted);font-size:11px;cursor:pointer}.import-row input{display:none}.sidebar-foot{margin:auto 14px 14px;padding-top:12px;border-top:1px solid var(--line);color:var(--muted);font-size:10px;line-height:1.5}.source-panel,.preview-panel{min-width:0;min-height:0;overflow:hidden;background:var(--sheet)}.source-panel{grid-column:2;grid-row:2;border-right:1px solid var(--line);display:grid;grid-template-rows:55px minmax(0,1fr) 30px}.panel-head{height:55px;padding:0 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}.filename{display:block;margin-top:3px;font:11px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink)}.editor-actions,.canvas-actions{display:flex;gap:4px}.source-footer{height:30px;padding:0 14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;color:var(--muted);font:10px ui-monospace,SFMono-Regular,Menlo,monospace}.source-editor{height:var(--editor-height);max-height:100%;min-height:0}.cm-editor{height:100%;min-height:0;font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace}.cm-editor.cm-focused{outline:none}.cm-gutters{border-right:1px solid var(--line)!important;background:var(--sheet)!important}.cm-content{padding-top:13px!important}.cm-activeLine{background:#4f5bd50c!important}.preview-panel{grid-column:3;grid-row:2;display:grid;grid-template-areas:"head" "alert" "stale" "canvas" "inspector";grid-template-rows:55px auto auto minmax(0,1fr) auto;position:relative}.preview-head{grid-area:head}.compile-error{grid-area:alert;margin:10px 12px 0;padding:9px 10px;display:flex;gap:8px;background:#fff7e9;color:#6a4310;border:1px solid #ecd49d;border-radius:6px;font-size:11px;line-height:1.4}.dark .compile-error{background:#382b18;color:#ffe1a8;border-color:#6b5224}.compile-error svg{width:15px;flex:none}.compile-error strong,.compile-error span{display:block}.stale-label{grid-area:stale;margin:9px 12px 0;color:var(--accent);font:600 10px ui-monospace,SFMono-Regular,Menlo,monospace}.canvas{grid-area:canvas;min-height:0;overflow:hidden;position:relative;display:grid;place-items:center;background:var(--paper)}.canvas-stage{width:min(92%,920px);min-height:0;align-self:stretch;margin:5% 0;position:relative;transform-origin:center;transition:transform .15s ease}.diagram-svg{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%;max-width:100%;max-height:100%;margin:auto;overflow:visible;filter:none}.diagram-svg g[data-node-id]{cursor:grab}.diagram-svg g[data-node-id]:active{cursor:grabbing}.diagram-svg g.selected-node>:first-child{stroke:#4f5bd5!important;stroke-width:2.5!important}.empty-canvas{color:var(--muted);font-size:13px}.inspector{grid-area:inspector;border-top:1px solid var(--line);padding:10px 14px 13px;display:grid;grid-template-columns:minmax(170px,1fr) minmax(140px,1fr) 86px 86px auto;gap:11px;align-items:end}.inspector-title{grid-row:1}.inspector-title span:last-child{display:block;margin-top:3px;font-size:10px;color:var(--muted)}.inspector label{display:grid;gap:5px;color:var(--muted);font:600 9px ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.08em}.inspector select,.inspector input{width:100%;height:29px;padding:0 7px;border-radius:4px;border:1px solid var(--line);background:var(--sheet);color:var(--ink);font:12px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0;text-transform:none}.coordinate-fields{display:contents}.apply-position{height:29px;padding:0 10px;white-space:nowrap}.mobile-tabs{display:none}@media(max-width:950px){.workbench{grid-template-columns:190px minmax(300px,.8fr) minmax(360px,1.2fr)}.save-status{display:none}.inspector{grid-template-columns:minmax(145px,1fr) minmax(125px,1fr) 72px 72px auto;gap:8px}}@media(max-width:900px){.workbench{--editor-height: calc(100dvh - 128px) ;display:grid;grid-template-columns:1fr;grid-template-rows:55px 1fr;min-height:100dvh}.topbar{grid-column:1;padding:0 12px;gap:12px}.product-label,.document-title{display:none}.top-actions{margin-left:auto}.top-actions .button{display:none}.button{padding:0 8px;font-size:11px}.sidebar{display:none}.mobile-tabs{grid-row:2;grid-column:1;display:flex;height:43px;border-bottom:1px solid var(--line);background:var(--paper);position:relative}.mobile-tabs>button{flex:1;border:0;background:transparent;color:var(--muted);font-size:12px}.mobile-tabs button.active{color:var(--ink);box-shadow:inset 0 -2px var(--accent)}.mobile-documents{position:relative}.mobile-documents summary{height:43px;padding:13px 10px;list-style:none;color:var(--muted);font-size:12px;cursor:pointer}.mobile-documents[open]>div{position:absolute;z-index:20;right:6px;top:40px;width:min(300px,calc(100vw - 12px));padding:9px;display:grid;gap:6px;background:var(--sheet);border:1px solid var(--line);border-radius:6px;box-shadow:0 10px 24px #17181718}.mobile-documents select,.mobile-documents button,.mobile-documents label{min-height:32px;width:100%;text-align:left;background:var(--sheet);color:var(--ink);border:1px solid var(--line);border-radius:4px;padding:6px 8px;font-size:12px}.mobile-documents input{display:none}.source-panel,.preview-panel{grid-column:1;grid-row:2;margin-top:43px}.mobile-hidden,.source-footer{display:none}.preview-panel{grid-template-rows:55px auto auto minmax(0,1fr) auto}.canvas-stage{width:94%}.inspector{grid-template-columns:1fr 1fr;padding:10px;gap:8px}.inspector-title{grid-column:1/-1}.inspector>label{grid-column:1/-1}.coordinate-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px;grid-column:1/-1}.apply-position{grid-column:1/-1}}@media(prefers-reduced-motion:reduce){.canvas-stage{transition:none}}