:root{color-scheme:light;--bg:#f5f6f8;--surface:#fff;--sidebar:#fafbfc;--border:#e5e8ed;--text:#202936;--muted:#7a8391;--accent:#147d65;--accent-soft:#eaf5f0;--editor-bg:#fff;--shadow:0 3px 16px #24314004;--dot:#dbe1e5}*{box-sizing:border-box}body{margin:0;font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:wait;opacity:.55}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}a{color:inherit;text-decoration:none}button{color:inherit}button,input{transition:background .15s,color .15s,border-color .15s}.topbar{height:76px;display:flex;align-items:center;padding:0 28px;border-bottom:1px solid var(--border);background:var(--surface);gap:24px}.brand{display:flex;align-items:center;gap:12px;font-size:21px;font-weight:750;letter-spacing:-.7px;line-height:1.15}.brand-icon{width:38px;height:38px;border-radius:11px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:27px;font-weight:400}.brand-light{font-weight:450}.brand small{display:block;font-size:8px;letter-spacing:2.9px;color:var(--muted);margin-top:5px}.header-meta{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}.live-dot{display:inline-block;flex-shrink:0;width:6px;height:6px;border-radius:50%;background:#3daa86}.button{border:1px solid var(--border);border-radius:7px;padding:9px 13px;background:var(--surface);display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;font-size:12px;font-weight:550}.button:hover{background:var(--bg);border-color:#bbc5ce}.button.primary{background:var(--accent);border-color:var(--accent);color:#fff}.button.primary:hover{filter:brightness(1.1)}.icon-button{width:34px;height:34px;padding:0;font-size:21px}.workspace{display:flex;min-height:calc(100dvh - 76px)}.sidebar{width:225px;flex-shrink:0;padding:27px 18px 22px;background:var(--sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column}.new-button{width:100%;justify-content:flex-start;padding-left:14px}.new-button span{font-size:19px;line-height:20px}.section-label{font-size:9px;font-weight:650;letter-spacing:1.15px;color:var(--muted);margin:32px 12px 10px}.nav-current{display:flex;align-items:center;gap:10px;border:0;background:var(--accent-soft);color:var(--accent);font-weight:600;font-size:12px;padding:11px 13px;border-radius:7px}.nav-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);margin-left:auto}.templates-label{margin-top:35px}.templates button{width:100%;display:flex;text-align:left;align-items:center;gap:10px;background:transparent;border:0;padding:12px 9px;border-radius:8px;font-size:12px}.templates button:hover{background:var(--accent-soft)}.template-icon{width:30px;height:32px;border:1px solid var(--border);background:var(--surface);display:grid;place-items:center;border-radius:7px;font-size:18px;color:#6d7b8b}.templates small{display:block;font-size:10px;color:var(--muted);margin-top:2px}.arrow{color:var(--muted);font-size:12px;margin-left:auto}.sidebar-bottom{margin-top:auto;padding:38px 10px 0}.local-badge{display:flex;gap:8px;align-items:center;font-size:11px;color:var(--accent)}.local-badge span{color:var(--text);font-weight:550}.sidebar-bottom p{font-size:11px;color:var(--muted);line-height:1.8;margin:8px 0 19px}.sidebar-bottom a{font-size:11px;display:flex;justify-content:space-between;color:var(--muted);border-top:1px solid var(--border);padding-top:16px}main{flex:1;min-width:0;padding:32px 30px 12px;display:flex;flex-direction:column;max-height:calc(100dvh - 76px)}.document-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:28px}.eyebrow{display:block;font-size:9px;letter-spacing:1.3px;color:var(--muted);font-weight:550;margin-bottom:7px}.document-title input{display:block;max-width:100%;width:300px;font-size:26px;font-weight:630;letter-spacing:-.8px;color:var(--text);border:0;border-bottom:1px solid transparent;background:none;padding:0}.document-title input:hover,.document-title input:focus{border-bottom-color:var(--border)}.save-state{font-size:10px;color:var(--muted);margin-top:4px}.document-actions{display:flex;gap:8px}.editor-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:18px;flex:1;min-height:320px}.panel{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:10px;min-width:0;overflow:hidden;box-shadow:var(--shadow)}.panel-bar{height:53px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--border);flex-shrink:0}.panel-title{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;white-space:nowrap}.code-symbol{font:600 13px monospace;color:var(--muted)}.language-tag{font-size:9px;color:var(--muted);font-weight:400;background:var(--bg);padding:3px 6px;border-radius:4px;margin-left:4px}.small{font-size:10px;padding:5px 8px;border-color:transparent}.export-actions{display:flex;gap:4px}.panel-footer{height:35px;flex-shrink:0;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;padding:0 14px;font-size:9px;color:var(--muted);gap:8px}.separator{margin:0 7px;color:var(--muted)}#editor{flex:1;min-height:240px;position:relative;background:var(--editor-bg)}#fallback{position:absolute;inset:0;width:100%;height:100%;resize:none;border:0;background:var(--surface);color:var(--text);font:13px/1.7 monospace;padding:18px;outline:none}.preview{flex:1;min-height:240px;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:35px 24px;background-color:var(--surface);background-image:radial-gradient(var(--dot) .8px,transparent .8px);background-size:18px 18px}.preview img{display:block;max-width:100%;height:auto;flex-shrink:0;background:white;border-radius:4px;padding:14px;box-shadow:0 3px 20px #17243606;margin:auto}.preview img[hidden]{display:none}.empty-state{margin:auto;text-align:center;color:var(--muted);font-size:12px}.empty-state>span{display:block;font-size:40px;color:var(--accent);margin-bottom:8px}.empty-state strong{font-size:14px;color:var(--text)}.empty-state p{font-size:11px}.zoom-controls{display:flex;align-items:center;gap:4px}.zoom-controls button{background:none;border:0;color:var(--muted);font-size:11px;padding:2px 5px}.zoom-controls button:hover{color:var(--accent)}#render-state{display:flex;align-items:center;gap:6px;max-width:70%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#render-state.error{color:#c35a43}.workspace-footer{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:9px;padding-top:14px;gap:10px}.workspace-footer>span:first-child{display:flex;align-items:center;gap:6px}kbd{font:9px inherit;background:var(--surface);border:1px solid var(--border);border-radius:3px;padding:1px 4px}#toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);max-width:90vw;padding:12px 20px;background:var(--text);color:var(--surface);border-radius:9px;box-shadow:0 5px 30px #0002;font-size:13px;z-index:50}dialog{width:440px;max-width:92vw;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:14px;padding:28px;box-shadow:0 10px 80px #0003}dialog::backdrop{background:#18263670}dialog h2{font-size:19px;letter-spacing:-.4px;margin:0 0 12px}dialog p{font-size:13px;color:var(--muted);line-height:1.8}.dialog-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:24px}[data-theme=dark]{color-scheme:dark;--bg:#111820;--surface:#1a232e;--sidebar:#151e27;--border:#2a3542;--text:#e0e7ee;--muted:#8b9bac;--accent:#2c9d80;--accent-soft:#1b3733;--editor-bg:#1e1e1e;--dot:#2b3946}button:active{transform:translateY(1px)}@media(min-width:1600px){main{padding:40px 40px 18px}.editor-layout{gap:24px}}@media(max-width:1150px){.sidebar{width:190px;padding-inline:12px}main{padding:24px 20px 12px}.document-title input{width:240px;font-size:24px}.document-actions{gap:5px}.document-actions .button{padding:8px}.language-tag{display:none}.panel-bar{padding:0 10px}}@media(max-width:900px){.sidebar{display:none}.topbar{height:65px;padding:0 20px}.workspace{min-height:calc(100dvh - 65px)}main{max-height:calc(100dvh - 65px)}.document-bar{margin-bottom:20px}.document-title input{font-size:23px}}@media(max-width:650px){.header-meta{font-size:10px}.brand{font-size:18px}.brand-icon{width:32px;height:32px;font-size:24px}.topbar{gap:12px;padding:0 15px}main{padding:20px 12px 12px;max-height:none}.document-bar{flex-direction:column;align-items:stretch;gap:14px}.document-title input{width:100%;font-size:25px}.document-actions{justify-content:space-between}.document-actions .button{flex:1;padding:8px 6px;font-size:11px}.editor-layout{grid-template-columns:1fr;gap:14px}.editor-panel{height:410px}.preview-panel{height:450px}.workspace-footer{font-size:8px}.workspace-footer>span:last-child{display:none}.preview{padding:20px 12px}.dialog-actions{flex-wrap:wrap}.eyebrow{font-size:8px}}

.mobile-tools{display:none}@media(max-width:900px){.mobile-tools{display:flex;gap:8px;margin:-5px 0 16px}.mobile-tools select{font:12px inherit;border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--text);padding:8px 12px}}

/* Diagram viewport and full-screen presentation. */
.preview{justify-content:flex-start;touch-action:pan-x pan-y;overscroll-behavior:contain;outline-offset:-3px;min-height:0}
.preview img{padding:0;max-width:none;user-select:none;-webkit-user-drag:none}
.preview.can-pan{cursor:grab}.preview.panning{cursor:grabbing;user-select:none}
.zoom-controls{gap:4px;flex-shrink:0}.zoom-controls button{min-width:28px;min-height:28px;border-radius:4px}.zoom-controls button:hover{background:var(--accent-soft)}
#zoom-level{font-variant-numeric:tabular-nums;min-width:38px;text-align:right;margin-right:4px}#fit[aria-pressed=true]{color:var(--accent);background:var(--accent-soft)}
#presentation{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:var(--bg);overflow:hidden;box-shadow:none}
#presentation[open]{display:flex;flex-direction:column}#presentation::backdrop{background:var(--bg)}
#presentation #preview-panel{width:100%;height:100%;flex:1;min-height:0;border:0;border-radius:0}
#presentation .panel-bar{height:64px;padding:0 24px}#presentation .panel-title{font-size:14px}#presentation .small{font-size:12px;padding:8px 12px}
#presentation .preview{min-height:0;flex:1;padding:24px}
#presentation .panel-footer{height:55px;padding:0 24px;font-size:11px}
#presentation .zoom-controls{gap:10px}#presentation .zoom-controls button{font-size:14px;min-height:36px;min-width:36px}
#presentation-help{order:1;flex-shrink:0;text-align:center;color:var(--muted);font-size:11px;padding:7px 12px 10px;background:var(--surface);border-top:1px solid var(--border)}
body.presenting{overflow:hidden}
@media(max-width:650px){#fullscreen{padding:5px}#fullscreen span{display:none}.preview-panel .panel-footer{padding:0 8px}.preview-panel #render-state{max-width:40%}.zoom-controls{gap:1px}#zoom-level{min-width:32px;font-size:9px}#presentation .panel-bar{padding:0 10px;height:56px}#presentation .panel-title{font-size:12px}#presentation .small{font-size:11px;padding:6px 8px}#presentation #fullscreen span{display:inline}#presentation .panel-footer{padding:0 10px}#presentation .zoom-controls{gap:3px}#presentation .preview{padding:16px}#presentation-help{font-size:10px}}

#presentation-help{display:none}#presentation[open] #presentation-help{display:block}#preview-panel:fullscreen{width:100vw;height:100dvh;background:var(--surface)}