*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #f5f0eb;--surface: #faf7f3;--border: #d4cdc4;--text: #2c2420;--muted: #8a7f74;--accent: #6b5c4d;--accent-hover: #8a7464;--error: #c44d3f;--font-mono: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;--font-serif: Georgia, "Times New Roman", "Palatino Linotype", serif;--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-hand: "Caveat", cursive;--scope-1: #8b7355;--scope-2: #6b8e6b;--scope-3: #7b8daa;--scope-4: #a07da0;--scope-5: #c4836e;--scope-6: #8a9e6e}html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font-serif)}header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.25rem;border-bottom:1px solid var(--border)}header h1{font-size:1rem;font-weight:600;color:var(--muted)}#run{padding:.4rem 1.25rem;border:none;border-radius:6px;background:var(--accent);color:#faf7f3;font-family:var(--font-serif);font-size:.85rem;font-weight:600;cursor:pointer;transition:background .15s}#run:hover{background:var(--accent-hover)}.header-actions{display:flex;align-items:center;gap:1rem}.github-link{color:var(--muted);display:flex;transition:color .15s}.github-link:hover{color:var(--text)}main{display:grid;grid-template-columns:1fr 1fr;height:calc(100vh - 49px)}.pane{display:flex;flex-direction:column;overflow:hidden}.pane:first-child{border-right:1px solid var(--border)}.pane-header{display:flex;align-items:center;gap:.5rem;padding:0 1rem;border-bottom:1px solid var(--border)}#font-select{font-family:var(--font-serif);font-size:.7rem;background:var(--surface);color:var(--muted);border:1px solid var(--border);border-radius:4px;padding:.2rem .4rem;outline:none;cursor:pointer}#font-select:hover{color:var(--text);border-color:var(--muted)}.pane-header #examples{margin-left:auto}.view-toggle{display:flex;border:1px solid var(--border);border-radius:4px;overflow:hidden}.view-toggle-btn{font-family:var(--font-serif);font-size:.7rem;padding:.15rem .5rem;border:none;background:transparent;color:var(--muted);cursor:pointer;transition:background .15s,color .15s}.view-toggle-btn.active{background:var(--accent);color:#faf7f3}.view-toggle-btn:not(.active):hover{color:var(--text)}.pane label{padding:.6rem 0;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.pane>label{padding:.6rem 1rem;border-bottom:1px solid var(--border)}#examples{font-family:var(--font-serif);font-size:.7rem;background:var(--surface);color:var(--muted);border:1px solid var(--border);border-radius:4px;padding:.2rem .4rem;outline:none;cursor:pointer}#examples:hover{color:var(--text);border-color:var(--muted)}#examples optgroup{font-style:normal;color:var(--muted)}#examples option{background:var(--surface);color:var(--text)}#tab-bar{display:flex;border-bottom:1px solid var(--border);background:var(--bg);overflow-x:auto;flex-shrink:0}#tab-bar:empty{display:none}#tab-bar .tab{display:flex;align-items:center;gap:.35rem;padding:.4rem .75rem;font-family:var(--font-serif);font-size:.7rem;color:var(--muted);background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s}#tab-bar .tab:hover{color:var(--text)}#tab-bar .tab.active{color:var(--text);border-bottom-color:var(--accent)}.tab-close{opacity:0;font-size:.65rem;line-height:1;padding:.1rem .25rem;border:none;background:transparent;color:inherit;border-radius:3px;cursor:pointer;transition:opacity .15s,background .15s}#tab-bar .tab:hover .tab-close{opacity:1}.tab-close:hover{background:var(--border)}.tab-rename-input{font-family:var(--font-mono);font-size:.7rem;background:var(--surface);color:var(--text);border:1px solid var(--accent);border-radius:3px;padding:0 .25rem;width:10ch;outline:none}.tab-add{font-family:var(--font-serif);font-size:.8rem;color:var(--muted);background:transparent;border:none;padding:.4rem .5rem;cursor:pointer;transition:color .15s}.tab-add:hover{color:var(--text)}.tab-spacer{flex:1}.tab-download{font-family:var(--font-serif);font-size:.65rem;color:var(--muted);background:transparent;border:none;padding:.4rem .75rem;cursor:pointer;white-space:nowrap;transition:color .15s}.tab-download:hover{color:var(--text)}#editor-container{flex:1;overflow:hidden;position:relative;background:#fff}#scope-bg{position:absolute;top:0;left:0;right:0;padding-top:1rem;pointer-events:none;z-index:0}.scope-bg-line{position:relative;line-height:1.6;font-size:.9rem;height:calc(.9rem * 1.6)}.scope-bg-band{position:absolute;top:0;bottom:0}.scope-bg-band.level-1{background:#8b73551f}.scope-bg-band.level-2{background:#6b8e6b1f}.scope-bg-band.level-3{background:#7b8daa1f}.scope-bg-band.level-4{background:#a07da01f}.scope-bg-band.level-5{background:#c4836e1f}.scope-bg-band.level-6{background:#8a9e6e1f}.scope-bar{position:absolute;top:0;bottom:0;width:2px}.scope-bar.level-1{background:var(--scope-1)}.scope-bar.level-2{background:var(--scope-2)}.scope-bar.level-3{background:var(--scope-3)}.scope-bar.level-4{background:var(--scope-4)}.scope-bar.level-5{background:var(--scope-5)}.scope-bar.level-6{background:var(--scope-6)}#editor{position:relative;z-index:1;width:100%;height:100%;resize:none;border:none;outline:none;white-space:pre;padding:1rem 1rem 1rem 32px;font-family:var(--font-mono);font-size:.9rem;line-height:1.6;background:transparent;color:var(--text);-moz-tab-size:2;tab-size:2}#output{flex:1;overflow:auto;padding:1rem;font-family:var(--font-serif);font-size:.9rem;line-height:1.6;background:var(--bg);color:var(--text);white-space:pre-wrap;word-break:break-word}#output.error{color:var(--error)}.inline-input{font-family:var(--font-mono);font-size:.9rem;line-height:1.6;background:transparent;color:var(--accent);border:none;border-bottom:1px solid var(--accent);outline:none;caret-color:var(--accent);width:50%;min-width:8ch}.inline-input.submitted{color:var(--muted);border-bottom-color:transparent}#preview{flex:1;overflow:auto;padding:1rem;background:var(--surface);font-family:var(--font-serif);font-size:.9rem;line-height:1.6;color:var(--text)}#preview h1,#preview h2,#preview h3,#preview h4,#preview h5,#preview h6{margin:1em 0 .5em;line-height:1.3}#preview h1{font-size:1.6rem}#preview h2{font-size:1.3rem}#preview h3{font-size:1.1rem}#preview p{margin:.5em 0}#preview ul,#preview ol{margin:.5em 0;padding-left:1.5em}#preview li{margin:.25em 0}#preview code{font-family:var(--font-mono);font-size:.85em;background:var(--bg);padding:.15em .3em;border-radius:3px}#preview pre{background:var(--bg);padding:.75rem 1rem;border-radius:4px;overflow-x:auto;margin:.5em 0}#preview pre code{background:none;padding:0}#preview hr{border:none;border-top:1px solid var(--border);margin:1em 0}#preview a{color:var(--accent);text-decoration:underline}#preview blockquote{border-left:3px solid var(--border);margin:.5em 0;padding:.25em .75em;color:var(--muted)}#preview strong{font-weight:700}#preview em{font-style:italic}@media(max-width:700px){main{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.pane:first-child{border-right:none;border-bottom:1px solid var(--border)}}