:root{--bg:#eff0f3;--panel:#fdfdfd;--panel-alt:#f6f6f9;--text:#19181f;--muted:#6b6a75;--border:#e3e3e9;--hover:#eaeaf0;--accent:#239dad;--err:#b42318;--preview-bg:#f4f4f6;--mono:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;--sans:"Inter", system-ui, -apple-system, sans-serif}*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}body{font:13px/1.4 var(--sans);color:var(--text);background:var(--bg)}#app{flex-direction:column;height:100%;display:flex}.topbar{background:var(--bg);flex:0 0 40px;align-items:center;gap:12px;height:40px;padding:0 16px;display:flex}.topbar .logo{font-weight:600}.topbar .filename{color:var(--muted);position:relative}.topbar .spacer{flex:1}.file-menu{display:inline-block;position:relative}.file-menu-summary{cursor:pointer;color:var(--text);-webkit-user-select:none;user-select:none;border-radius:4px;padding:3px 8px;font-weight:500;list-style:none}.file-menu-summary::-webkit-details-marker{display:none}.file-menu-summary:hover,.file-menu[open]>.file-menu-summary{background:var(--hover)}.file-menu-body{background:var(--panel);border:1px solid var(--border);z-index:10;border-radius:6px;flex-direction:column;min-width:200px;padding:4px 0;display:flex;position:absolute;top:calc(100% + 4px);left:0;box-shadow:0 6px 20px #0000001f}.file-menu-item{text-align:left;color:var(--text);cursor:pointer;background:0 0;border:0;padding:5px 12px;font-family:inherit;font-size:13px}.file-menu-item:hover{background:var(--hover)}.file-menu-item[data-active=true]{color:var(--accent);font-weight:600}.file-menu-item[data-active=true]:before{content:"● ";vertical-align:1px;margin-right:4px;font-size:8px}.file-menu-action{color:var(--muted)}.file-menu-separator{background:var(--border);height:1px;margin:4px 0}.topbar .mobile-toggle{border:1px solid var(--border);cursor:pointer;color:var(--text);background:0 0;border-radius:5px;padding:4px 8px;display:none}.status-host{color:var(--muted);align-items:center;gap:6px;font-size:12px;display:inline-flex}.status-host .dot{background:var(--accent);border-radius:50%;width:8px;height:8px}.status-host .dot[data-state=compiling]{background:#e0a800;animation:1s infinite pulse}.status-host .dot[data-state=kernel-loading]{background:#7c3aed;animation:1s infinite pulse}.status-host .dot[data-state=error]{background:var(--err)}.cells-status{align-items:center;gap:4px;margin-left:8px;display:inline-flex}.cells-status .cell-dot{background:#d1d5db;border-radius:50%;width:7px;height:7px;transition:background .12s}.cells-status .cell-dot[data-state=ok]{background:var(--accent)}.cells-status .cell-dot[data-state=running]{background:#e0a800;animation:1s infinite pulse}.cells-status .cell-dot[data-state=stale]{background:#d1d5db}.cells-status .cell-dot[data-state=error]{background:var(--err)}.cells-status .cell-dot[data-state=idle]{opacity:.5;background:#d1d5db}.cm-editor .tok-comment,.cm-editor .tok-lineComment,.cm-editor .tok-blockComment{color:#6b6a75;font-style:italic}.cm-editor .tok-string,.cm-editor .tok-docString,.cm-editor .tok-character{color:#16a34a}.cm-editor .tok-keyword,.cm-editor .tok-controlKeyword,.cm-editor .tok-operatorKeyword,.cm-editor .tok-definitionKeyword,.cm-editor .tok-moduleKeyword,.cm-editor .tok-self{color:#7c3aed;font-weight:500}.cm-editor .tok-number,.cm-editor .tok-integer,.cm-editor .tok-float{color:#b91c1c}.cm-editor .tok-bool,.cm-editor .tok-null,.cm-editor .tok-atom{color:#b45309}.cm-editor .tok-typeName,.cm-editor .tok-className{color:#2563eb}.cm-editor .tok-propertyName,.cm-editor .tok-variableName{color:#19181f}.cm-editor .tok-function{color:#2563eb}.cm-editor .tok-meta,.cm-editor .tok-annotation,.cm-editor .tok-processingInstruction{color:#ca8a04}.cm-editor .tok-operator,.cm-editor .tok-punctuation,.cm-editor .tok-derefOperator,.cm-editor .tok-arithmeticOperator,.cm-editor .tok-logicOperator,.cm-editor .tok-bitwiseOperator,.cm-editor .tok-compareOperator{color:#6b6a75}.cm-editor .tok-heading,.cm-editor .tok-heading1,.cm-editor .tok-heading2,.cm-editor .tok-heading3,.cm-editor .tok-heading4{color:#19181f;font-weight:700}.cm-editor .tok-emphasis{font-style:italic}.cm-editor .tok-strong{font-weight:700}.cm-editor .tok-link,.cm-editor .tok-url{color:#2563eb;text-decoration:underline}.cm-editor .tok-invalid{color:var(--err);-webkit-text-decoration:underline wavy;text-decoration:underline wavy}.cm-cell-line{background:#7c3aed0a;box-shadow:inset 2px 0 #7c3aed59}.cm-cell-line-first{box-shadow:inset 2px 0 #7c3aed59,inset 0 1px #7c3aed2e}.cm-cell-line-last{box-shadow:inset 2px 0 #7c3aed59,inset 0 -1px #7c3aed2e}.cm-cell-gutter{width:44px}.cm-cell-actions{align-items:center;gap:2px;margin:1px 2px;display:inline-flex}.cm-cell-actions button{border:1px solid var(--border);width:18px;height:18px;color:var(--muted);cursor:pointer;background:0 0;border-radius:3px;justify-content:center;align-items:center;padding:0;font-size:9px;line-height:1;transition:background 80ms,color 80ms,border-color 80ms;display:inline-flex}.cm-cell-actions button:hover{background:var(--hover);color:var(--text);border-color:var(--text)}.cm-run-cell[data-state=ok]{color:var(--accent);border-color:var(--accent)}.cm-run-cell[data-state=error]{color:var(--err);border-color:var(--err)}.cm-run-cell[data-state=running]{color:#e0a800;border-color:#e0a800;animation:1s infinite pulse}.cm-run-cell[data-state=stale]{color:#b45309;border-color:#b45309}.cm-hide-cell{font-size:11px}.cm-hide-cell[data-hidden=true]{color:var(--text)}.cm-hidden-body{font-family:var(--mono);color:var(--muted);-webkit-user-select:none;user-select:none;background:#7c3aed14;border:1px dashed #7c3aed59;border-radius:3px;margin:0 2px;padding:1px 8px;font-size:11px;display:inline-block}@keyframes pulse{50%{opacity:.3}}.split{background:var(--panel);border:1px solid var(--border);border-top-left-radius:6px;flex:1;grid-template-columns:1fr 1fr;margin:0 16px 16px;display:grid;overflow:hidden;box-shadow:0 4px 12px #59556533}.pane{min-width:0;min-height:0;overflow:hidden}.editor-pane{display:flex}.editor-pane>.cm-editor{flex:1;height:100%}.preview-pane{background:var(--preview-bg);position:relative}.preview-scroll{width:100%;height:100%;padding:24px;overflow:auto}.preview-pages{flex-direction:column;align-items:center;gap:16px;display:flex}.preview-pages .page{background:#fff;width:100%;max-width:900px;box-shadow:0 2px 8px #00000014}.preview-pages .page svg{width:100%;height:auto;display:block}.preview-error{color:var(--err);font:12px/1.5 var(--mono);white-space:pre-wrap;background:#fff1f0;margin:0;padding:16px;position:absolute;inset:0;overflow:auto}@media (width<=800px){.topbar .mobile-toggle{display:inline-flex}.split{grid-template-columns:1fr}.preview-pane,#app.show-preview .editor-pane{display:none}#app.show-preview .preview-pane{display:block}}