:root{--hue:250;--bg-base:oklch(.18 .02 var(--hue));--bg-surface:oklch(.24 .02 var(--hue));--bg-surface-hover:oklch(.28 .02 var(--hue));--text-primary:oklch(.95 .01 var(--hue));--text-muted:oklch(.75 .02 var(--hue));--border-subtle:oklch(.35 .02 var(--hue));--bg-btn:oklch(.3 .02 var(--hue));--bg-btn-hover:oklch(.35 .02 var(--hue));--radius-sm:2px;--radius-base:4px;--text-base:1rem;--text-h4:1.4rem;--text-h3:1.96rem;--text-h2:2.74rem;--text-h1:3.84rem;--gap-half:.5rem;--gap-1:1rem;--gap-2:2rem;--gap-3:3rem;--gap-4:4rem;--gap-5:5rem;--gap-6:6rem}*,:before,:after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0;padding:0}body{background-color:var(--bg-base);min-height:100vh;color:var(--text-primary);-webkit-font-smoothing:antialiased;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5}.h1{font-size:var(--text-h1);letter-spacing:-.02em;font-weight:700;line-height:1.2}.h2{font-size:var(--text-h2);letter-spacing:-.01em;font-weight:700;line-height:1.2}.h3{font-size:var(--text-h3);font-weight:600;line-height:1.3}.h4{font-size:var(--text-h4);font-weight:600;line-height:1.3}.text-base{font-size:var(--text-base)}.text-muted{color:var(--text-muted)}.app-container{max-width:1400px;padding:var(--gap-4) var(--gap-2);margin:0 auto}.h-screen{height:100vh}.flex-col{flex-direction:column;display:flex}.flex-row{flex-direction:row;display:flex}.flex-1{flex:1}.overflow-auto{overflow:auto}.grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));display:grid}.gap-half{gap:var(--gap-half)}.gap-1{gap:var(--gap-1)}.gap-2{gap:var(--gap-2)}.gap-3{gap:var(--gap-3)}.gap-4{gap:var(--gap-4)}.gap-5{gap:var(--gap-5)}.gap-6{gap:var(--gap-6)}.surface{background-color:var(--bg-surface);border-radius:var(--radius-sm);padding:var(--gap-2)}.surface:hover{background-color:var(--bg-surface-hover)}.btn{background-color:var(--bg-btn);color:var(--text-primary);padding:var(--gap-half) var(--gap-1);border-radius:var(--radius-sm);cursor:pointer;font-family:inherit;font-size:var(--text-base);border:none}.btn:hover{background-color:var(--bg-btn-hover)}code-editor{flex:1;height:100%;display:flex}.cm-editor{width:100%;height:100%}code-snippet{display:block}code-snippet .cm-editor{border-radius:var(--radius-sm);background-color:var(--bg-base)}.cm-error-highlight{border-bottom:2px wavy oklch(60% .15 20);background-color:#ff646426}.inline-code{border-radius:var(--radius-sm);background-color:var(--bg-base);color:var(--text-primary);padding:.1em .3em;font-family:monospace;font-size:.9em}