@import "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap";@font-face{font-family:DejaVu Sans Mono;src:url(https://cdn.jsdelivr.net/gh/typst/typst-assets@v0.13.1/files/fonts/DejaVuSansMono.ttf)format("truetype");font-style:normal;font-weight:400;font-display:swap}:root{color-scheme:light dark;--bg:#f4ecdf;--panel:#fffaf4cc;--surface:#895c4814;--chip:#895c481a;--border:#71533f2e;--text:#5a4537;--text-strong:#23160f;--muted:#756252;--accent:#bf5b31;--accent-contrast:#fff8ee;--danger:#a5392f;--paper-top:#fffaf5eb;--paper-bottom:#f8f1e8;--paper-border:#76533c1a;--shadow:0 24px 60px #4b2b181f;--sans:"IBM Plex Sans", "Avenir Next", sans-serif;--heading:"Fraunces", Georgia, serif;--mono:"IBM Plex Mono", "SFMono-Regular", monospace;font:16px/1.5 var(--sans);color:var(--text);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:radial-gradient(circle at top,#fffc,#0000 32%),linear-gradient(#f8f1e6,#f1e5d4 55%,#eadbc7)}*{box-sizing:border-box}html,body,#root{min-height:100%}body{color:var(--text);background:radial-gradient(circle at top,#fffc,#0000 32%),linear-gradient(#f8f1e6,#f1e5d4 55%,#eadbc7);margin:0}h1,h2,h3,p{margin:0}h1,h2,h3{color:var(--text-strong);font-family:var(--heading)}h1{letter-spacing:-.05em;margin-bottom:.75rem;font-size:clamp(2.4rem,5vw,4.7rem);line-height:.98}button,input,textarea{font:inherit}@media (prefers-color-scheme:dark){:root{--bg:#15120f;--panel:#1f1916d1;--surface:#ffdec214;--chip:#ffdec21c;--border:#ffdfc21f;--text:#d9c5b4;--text-strong:#fff1e5;--muted:#b59d8a;--accent:#f08a57;--accent-contrast:#20110a;--danger:#ff8a7b;--paper-top:#f7eee4fa;--paper-bottom:#efe1d1;--paper-border:#fff2e524;--shadow:0 28px 70px #00000073;background:radial-gradient(circle at top,#f08a5724,#0000 28%),linear-gradient(#17120f,#110d0b 58%,#0d0907)}body{background:radial-gradient(circle at top,#f08a5724,#0000 28%),linear-gradient(#17120f,#110d0b 58%,#0d0907)}}.app-shell{gap:.875rem;padding:1rem;display:grid}.app-header,.workspace,.editor-pane,.preview-pane{border:1px solid var(--border);background:var(--panel);box-shadow:var(--shadow);border-radius:20px}.app-header{background:radial-gradient(circle at top left, #d0623a38, transparent 32%), radial-gradient(circle at top right, #d9b45b47, transparent 36%), var(--panel);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;padding:.75rem 1rem;display:flex}.app-header h1{margin:0;font-size:1rem;line-height:1.1}.header-tagline{color:var(--text-muted);margin:.35rem 0 0;font-size:.85rem;line-height:1.4}.header-metrics{flex-wrap:wrap;justify-content:flex-end;gap:.5rem;display:flex}.header-metrics span,.preview-status,.mode-button{background:var(--chip);color:var(--text-strong);font-family:var(--mono);border-radius:999px;align-items:center;gap:.5rem;padding:.45rem .75rem;font-size:.8rem;display:inline-flex}.workspace{backdrop-filter:blur(16px);padding:.875rem}.workspace-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;display:grid}.toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:1rem;display:flex}.toolbar-group{flex-wrap:wrap;gap:.75rem;display:flex}.mode-switch{background:var(--surface);border:1px solid var(--border);border-radius:999px;gap:.3rem;padding:.3rem;display:inline-flex}.toolbar-divider{background:var(--border);border-radius:999px;align-self:stretch;width:1px;margin:0 .4rem}.mode-button{cursor:pointer;background:0 0;border:0}.mode-button.is-active{background:var(--accent);color:var(--accent-contrast)}.toolbar-button{font:inherit;cursor:pointer;border:0;border-radius:999px;padding:.8rem 1.2rem;transition:transform .18s,opacity .18s,background .18s}.toolbar-button:hover{transform:translateY(-1px)}.toolbar-button:disabled{opacity:.6;cursor:progress}.toolbar-button.primary{background:var(--accent);color:var(--accent-contrast)}.toolbar-button.secondary{background:var(--surface);color:var(--text-strong)}.toolbar-button.secondary.is-active{background:color-mix(in srgb, var(--accent) 18%, var(--surface));color:var(--text-strong)}.editor-pane,.preview-pane{min-height:42rem;overflow:hidden}.pane-header{justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1rem 0;display:flex}.pane-header p{color:var(--muted)}.editor-wrap{padding:1rem}.editor-wrap .cm-editor{min-height:37rem;font-family:var(--mono);border:1px solid var(--border);border-radius:20px;font-size:.95rem;overflow:hidden}.editor-wrap .cm-focused{outline:2px solid #d0623a47}.preview-body{padding:1rem}.preview-canvas{background:linear-gradient(180deg, var(--paper-top), var(--paper-bottom));min-height:37rem;box-shadow:inset 0 0 0 1px var(--paper-border);border-radius:20px;padding:0;overflow:auto}.preview-frame{background:0 0;border:0;width:100%;min-height:50rem;display:block}.preview-canvas svg{width:100%;height:auto;display:block}.preview-empty,.preview-error{text-align:center;min-height:20rem;color:var(--muted);place-items:center;display:grid}.preview-error{color:var(--danger);white-space:pre-wrap}@media (prefers-color-scheme:dark){.editor-wrap .cm-focused{outline-color:#fa996861}}@media (width<=1080px){.workspace-grid{grid-template-columns:1fr}.editor-pane,.preview-pane{min-height:32rem}.editor-wrap .cm-editor,.preview-canvas,.preview-frame{min-height:26rem}}@media (width<=720px){.app-shell{padding:1rem}.app-header,.workspace{border-radius:18px}.app-header{padding:.75rem}.toolbar{align-items:stretch}}