*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg: #0a0a12;--surface: #13111c;--surface-hover: #1a1625;--surface-alt: #0f0e17;--cyan: #00d9ff;--cyan-dim: #00a3bf;--violet: #8b5cf6;--violet-dim: #6d42d1;--text: #f4f4f5;--text-secondary: #a1a1aa;--text-muted: #71717a;--border: #27272a;--border-light: #3f3f46;--red: #ef4444;--font-display: "Space Grotesk", sans-serif;--font-body: "Inter", sans-serif;--font-mono: "JetBrains Mono", monospace}html,body{height:100%;font-family:var(--font-body);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::selection{background-color:color-mix(in srgb,var(--cyan) 30%,transparent)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}#app{display:flex;flex-direction:column;height:100vh;overflow:hidden}.toolbar{display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:48px;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;gap:16px}.toolbar-left{display:flex;align-items:center;gap:8px}.logo{font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--text);letter-spacing:-.02em}.logo-dot{color:var(--cyan)}.logo-sep{color:var(--border-light);font-weight:300;font-size:18px}.title{font-family:var(--font-display);font-weight:500;font-size:14px;color:var(--text-secondary)}.toolbar-actions{display:flex;align-items:center;gap:8px}.toolbar-divider{width:1px;height:20px;background:var(--border);margin:0 4px}.view-toggle{display:flex;background:var(--bg);border:1px solid var(--border);border-radius:6px;overflow:hidden}.view-btn{display:flex;align-items:center;gap:5px;background:transparent;border:none;color:var(--text-muted);padding:5px 10px;font-family:var(--font-body);font-size:12px;font-weight:500;cursor:pointer;transition:all .15s}.view-btn:hover{color:var(--text-secondary);background:var(--surface-hover)}.view-btn.active{color:var(--cyan);background:color-mix(in srgb,var(--cyan) 10%,transparent)}.view-btn+.view-btn{border-left:1px solid var(--border)}.tool-btn{display:flex;align-items:center;gap:5px;background:transparent;border:1px solid var(--border);color:var(--text-muted);padding:5px 10px;border-radius:6px;font-family:var(--font-body);font-size:12px;font-weight:500;cursor:pointer;transition:all .15s}.tool-btn:hover{color:var(--text-secondary);border-color:var(--border-light);background:var(--surface-hover)}.tool-btn.active{color:var(--cyan);border-color:color-mix(in srgb,var(--cyan) 40%,transparent);background:color-mix(in srgb,var(--cyan) 8%,transparent)}.editor-container{display:flex;flex:1;min-height:0;position:relative}.pane{display:flex;flex-direction:column;min-width:0;overflow:hidden}.pane-editor,.pane-preview{flex:1 1 50%}.pane-header{display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:32px;background:var(--surface-alt);border-bottom:1px solid var(--border);flex-shrink:0}.pane-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}.divider{width:5px;flex-shrink:0;background:var(--border);cursor:col-resize;position:relative;display:flex;align-items:center;justify-content:center;transition:background .15s}.divider:hover,.divider.dragging{background:var(--cyan)}.divider-handle{width:3px;height:24px;border-radius:2px;background:var(--text-muted);opacity:0;transition:opacity .15s}.divider:hover .divider-handle,.divider.dragging .divider-handle{opacity:1;background:var(--bg)}#editor{flex:1;resize:none;border:none;outline:none;padding:24px;font-family:var(--font-mono);font-size:13.5px;font-weight:400;line-height:1.7;background:var(--bg);color:var(--text);-moz-tab-size:2;tab-size:2;overflow-y:auto}#editor::placeholder{color:var(--text-muted)}.preview-content{flex:1;padding:24px;overflow-y:auto;line-height:1.7;font-size:15px;background:var(--bg)}.preview-content h1,.preview-content h2,.preview-content h3,.preview-content h4,.preview-content h5,.preview-content h6{font-family:var(--font-display);margin-top:1.4em;margin-bottom:.5em;font-weight:600;color:var(--text);letter-spacing:-.01em}.preview-content h1:first-child,.preview-content h2:first-child,.preview-content h3:first-child{margin-top:0}.preview-content h1{font-size:2em;border-bottom:1px solid var(--border);padding-bottom:.3em}.preview-content h2{font-size:1.5em;border-bottom:1px solid var(--border);padding-bottom:.25em}.preview-content h3{font-size:1.25em}.preview-content h4{font-size:1.1em}.preview-content p{margin-bottom:1em}.preview-content strong{color:var(--text);font-weight:600}.preview-content a{color:var(--cyan);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s}.preview-content a:hover{border-bottom-color:var(--cyan)}.preview-content code{background:var(--surface);border:1px solid var(--border);padding:1px 6px;border-radius:4px;font-family:var(--font-mono);font-size:.88em;color:var(--cyan)}.preview-content pre{background:var(--surface);padding:16px 20px;border-radius:8px;overflow-x:auto;margin-bottom:1em;border:1px solid var(--border)}.preview-content pre code{background:none;border:none;padding:0;font-size:13px;color:var(--text);line-height:1.6}.preview-content blockquote{border-left:3px solid var(--violet);padding:4px 0 4px 16px;margin:0 0 1em;color:var(--text-secondary);background:color-mix(in srgb,var(--violet) 5%,transparent);border-radius:0 6px 6px 0}.preview-content blockquote p:last-child{margin-bottom:0}.preview-content ul,.preview-content ol{margin-bottom:1em;padding-left:2em}.preview-content li{margin-bottom:.3em}.preview-content li::marker{color:var(--cyan-dim)}.preview-content table{border-collapse:collapse;width:100%;margin-bottom:1em;font-size:14px}.preview-content th,.preview-content td{border:1px solid var(--border);padding:8px 14px;text-align:left}.preview-content th{background:var(--surface);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary)}.preview-content tr:hover td{background:var(--surface-alt)}.preview-content img{max-width:100%;border-radius:8px}.preview-content hr{border:none;border-top:1px solid var(--border);margin:2em 0}.preview-content .mermaid{display:flex;justify-content:center;padding:16px;margin:1em 0;background:var(--surface);border:1px solid var(--border);border-radius:8px}.preview-content .mermaid svg{max-width:100%}.preview-content input[type=checkbox]{margin-right:6px;accent-color:var(--cyan)}.editor-container.preview-only .pane-editor,.editor-container.preview-only .divider{display:none}.editor-container.preview-only .pane-preview{flex:1 1 100%}body.dragging{cursor:col-resize;-webkit-user-select:none;user-select:none}body.dragging #editor,body.dragging .preview-content{pointer-events:none}