:root{--bg:#fbfaf7;--text:#6f6a60;--text-h:#17130d;--border:#dfd9cc;--code-bg:#f3efe6;--accent:#b15b18;--mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;--sans:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;color:var(--text);background:var(--bg);font:16px/1.5 var(--sans);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0}h1{color:var(--text-h);letter-spacing:-.05em;margin:10px 0 14px;font-size:clamp(32px,5vw,56px);line-height:.98}p{margin:0}::selection{color:#17130d;background:#f3c086}.page{min-height:100svh;padding:32px 24px 64px}.banner{background:var(--code-bg);border:1px solid var(--border);color:var(--text-h);border-radius:14px;max-width:1120px;margin:0 auto 28px;padding:12px 16px;font-size:14px;line-height:1.45}.banner-link{color:var(--accent);text-underline-offset:3px;font-weight:700;text-decoration:underline}.hero{max-width:760px;margin:0 auto 28px}.eyebrow{color:var(--accent);font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;font-size:13px;font-weight:700}.lede{color:var(--text);max-width:42rem;font-size:18px}.toolbar{justify-content:space-between;gap:12px;max-width:1120px;margin:0 auto 18px;display:flex}.toolbar label{text-align:left;gap:6px;display:grid}.actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}input,textarea,pre,button{border:1px solid var(--border);box-sizing:border-box;font:inherit;border-radius:14px}input,textarea,pre{background:var(--code-bg);color:var(--text-h)}input{min-width:260px;padding:12px 14px}button{background:var(--bg);color:var(--text-h);cursor:pointer;align-self:end;padding:12px 16px;font-weight:700}button.primary{background:var(--text-h);color:var(--bg)}button:disabled{cursor:not-allowed;opacity:.45}.workspace{grid-template-columns:1fr 1fr;gap:18px;max-width:1120px;margin:0 auto;display:grid}.pane{text-align:left;gap:10px;min-width:0;display:grid}.pane span{color:var(--text-h);font-weight:700}textarea,pre{resize:vertical;height:min(70svh,640px);margin:0;padding:18px;overflow:auto}textarea,pre,code{font-family:var(--mono);font-size:13px;line-height:1.6}.output pre{white-space:pre-wrap}@media (width<=860px){.page{padding:20px 16px 48px}.toolbar,.workspace{grid-template-columns:1fr}.toolbar{display:grid}.actions{justify-content:stretch}.actions button{flex:1}input{width:100%;min-width:0}}
