:root{--font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;--radius: 8px;--radius-sm: 5px}:root[data-theme=dark]{color-scheme:dark;--bg: #0b0c0f;--bg-elev: #14161b;--bg-elev-2: #1b1e25;--border: #262a33;--border-strong: #353a45;--text: #e6e8ee;--text-dim: #9aa3b2;--text-faint: #6b7280;--accent: #5b8def;--accent-strong: #7aa2ff;--ok: #2eb67d;--warn: #ecb22e;--err: #e0506e;--err-bg: rgba(224, 80, 110, .08);--ok-bg: rgba(46, 182, 125, .1);--warn-bg: rgba(236, 178, 46, .12);--ok-text: #6ee0aa;--err-text: #ff8aa0;--warn-text: #ffd166;--error-msg: #ffc4cf;--chip-invalid-text: #ffb1bf;--code-bg: rgba(255, 255, 255, .05);--topbar-gradient-top: #0f1116;--cm-bg: transparent;--cm-caret: #7aa2ff;--cm-gutter-text: #4b525e;--cm-active-bg: rgba(91, 141, 239, .06);--cm-selection-bg: rgba(91, 141, 239, .25);--cm-tooltip-bg: #1b1e25;--cm-tooltip-border: #353a45}:root[data-theme=light]{color-scheme:light;--bg: #f7f8fa;--bg-elev: #ffffff;--bg-elev-2: #f0f2f5;--border: #e1e4ea;--border-strong: #c9cfd9;--text: #1a1d23;--text-dim: #535b6a;--text-faint: #7e8696;--accent: #3e6ed6;--accent-strong: #2c58c2;--ok: #2c8c5a;--warn: #b8810a;--err: #c4344f;--err-bg: rgba(196, 52, 79, .07);--ok-bg: rgba(44, 140, 90, .08);--warn-bg: rgba(184, 129, 10, .1);--ok-text: #1f6e44;--err-text: #a52340;--warn-text: #8c6207;--error-msg: #832135;--chip-invalid-text: #a52340;--code-bg: rgba(0, 0, 0, .05);--topbar-gradient-top: #ffffff;--cm-bg: transparent;--cm-caret: #2c58c2;--cm-gutter-text: #a4abb7;--cm-active-bg: rgba(62, 110, 214, .07);--cm-selection-bg: rgba(62, 110, 214, .18);--cm-tooltip-bg: #ffffff;--cm-tooltip-border: #c9cfd9}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:14px;line-height:1.45;min-height:100vh}body{display:flex;flex-direction:column}a{color:var(--accent-strong);text-decoration:none}a:hover{text-decoration:underline}h1,h2{margin:0;font-weight:600}code{font-family:var(--font-mono);font-size:.92em;background:var(--code-bg);padding:1px 5px;border-radius:4px;color:var(--text)}.topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 28px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,var(--topbar-gradient-top) 0%,var(--bg) 100%)}.topbar__brand{display:flex;align-items:center;gap:14px}.topbar__brand h1{font-size:16px;letter-spacing:-.01em}.topbar__tagline{margin:2px 0 0;font-size:12.5px;color:var(--text-dim)}.logo{width:32px;height:32px;flex-shrink:0}.topbar__links{display:flex;align-items:center;gap:18px;font-size:13px}.topbar__links a{color:var(--text-dim)}.topbar__links a:hover{color:var(--text);text-decoration:none}.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:var(--bg-elev-2);border:1px solid var(--border-strong);border-radius:6px;color:var(--text-dim);cursor:pointer;transition:color .12s ease,border-color .12s ease,background .12s ease;margin-left:4px}.theme-toggle:hover{color:var(--text);border-color:var(--accent)}.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.theme-toggle__icon{display:none}:root[data-theme=dark] .theme-toggle__icon--sun{display:block}:root[data-theme=light] .theme-toggle__icon--moon{display:block}.controls{display:flex;flex-direction:column;gap:14px;padding:18px 28px 16px;border-bottom:1px solid var(--border);background:var(--bg-elev)}.controls__row{display:flex;align-items:center;gap:22px;min-height:44px}.controls__row--tabs{justify-content:space-between;flex-wrap:wrap}.controls__row--presets{gap:14px;flex-wrap:wrap}.controls__about{margin:0;font-size:12.5px;color:var(--text-dim);max-width:60ch;line-height:1.5}.control-label{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);font-weight:600;flex-shrink:0}.surface-tabs{display:inline-flex;background:var(--bg);border:1px solid var(--border-strong);border-radius:var(--radius);padding:4px;gap:2px;flex-shrink:0}.surface-tab{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:transparent;border:1px solid transparent;border-radius:5px;cursor:pointer;color:var(--text-dim);font:inherit;font-size:13.5px;font-weight:500;transition:background .12s ease,color .12s ease,border-color .12s ease}.surface-tab:hover{color:var(--text);background:var(--bg-elev-2)}.surface-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.surface-tab[aria-selected=true]{background:var(--bg-elev-2);color:var(--text);border-color:var(--border-strong);box-shadow:inset 0 0 0 1px var(--border)}.surface-tab__icon{display:inline-flex;align-items:center;color:currentColor;opacity:.85}.surface-tab__label{font-weight:600}.surface-tab__hint{font-size:11.5px;color:var(--text-faint);font-weight:400}.surface-tab[aria-selected=true] .surface-tab__hint{color:var(--text-dim)}.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.chip{display:inline-flex;align-items:center;gap:6px;background:var(--bg-elev-2);border:1px solid var(--border-strong);color:var(--text-dim);font:inherit;font-size:12.5px;padding:5px 11px;border-radius:999px;cursor:pointer;transition:color .12s ease,background .12s ease,border-color .12s ease;white-space:nowrap}.chip:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);flex-shrink:0}.chip[data-tone=invalid]:before{background:var(--err)}.chip:hover{color:var(--text);border-color:var(--accent)}.chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}.chip[aria-pressed=true]:before{background:#ffffffd9}.chip[data-tone=invalid]{border-color:#e0506e59;color:var(--chip-invalid-text)}.chip[data-tone=invalid][aria-pressed=true]{background:var(--err);border-color:var(--err);color:#fff}.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1px;background:var(--border);flex:1;min-height:0}.pane{display:flex;flex-direction:column;background:var(--bg);min-height:60vh}.pane__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:12px 18px;border-bottom:1px solid var(--border);background:var(--bg-elev);min-height:60px}.pane__title{display:flex;flex-direction:column;gap:2px;min-width:0}.pane__title h2{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);font-weight:600}.pane__blurb{margin:0;font-size:12px;color:var(--text-faint);line-height:1.4;max-width:60ch}.editor{flex:1;overflow:hidden;min-height:0}.cm-editor{height:100%}.cm-editor .cm-scroller{font-family:var(--font-mono);font-size:13px;line-height:1.6}.badge{font-size:11.5px;font-weight:600;padding:3px 8px;border-radius:999px;letter-spacing:.02em;flex-shrink:0}.badge--neutral{background:var(--bg-elev-2);color:var(--text-dim);border:1px solid var(--border-strong)}.badge--ok{background:var(--ok-bg);color:var(--ok-text);border:1px solid rgba(46,182,125,.4)}.badge--err{background:var(--err-bg);color:var(--err-text);border:1px solid rgba(224,80,110,.4)}.badge--warn{background:var(--warn-bg);color:var(--warn-text);border:1px solid rgba(236,178,46,.4)}.results{flex:1;overflow:auto;padding:16px 18px}.results__empty{color:var(--text-faint);font-style:italic;margin:0}.results__valid{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 16px;background:var(--ok-bg);border:1px solid rgba(46,182,125,.35);border-radius:var(--radius)}.results__valid strong{color:var(--ok-text)}.results__valid p{margin:0;color:var(--text-dim);font-size:12.5px}.errors{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.error{display:grid;grid-template-columns:auto 1fr;gap:10px 12px;align-items:start;padding:12px 14px;background:var(--err-bg);border:1px solid rgba(224,80,110,.3);border-left-width:3px;border-radius:var(--radius-sm)}.error__index{font-family:var(--font-mono);font-size:12px;color:var(--text-faint);padding-top:1px}.error__msg{margin:0;font-family:var(--font-mono);font-size:12.5px;color:var(--error-msg);word-break:break-word;white-space:pre-wrap}.footer{padding:14px 28px;border-top:1px solid var(--border);font-size:12.5px;color:var(--text-faint);background:var(--bg);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px}.footer p{margin:0}.footer__credit a{color:var(--text-dim)}@media(max-width:900px){.topbar{flex-direction:column;align-items:flex-start;gap:12px}.controls{padding:16px 18px 14px}.controls__row--tabs{gap:12px;flex-direction:column;align-items:flex-start}.controls__about{order:2}.surface-tab{padding:8px 12px}.surface-tab__hint{display:none}.workspace{grid-template-columns:1fr;grid-template-rows:minmax(45vh,auto) minmax(45vh,auto)}.pane{min-height:45vh}}@media(max-width:520px){.surface-tabs{width:100%;justify-content:space-between}.surface-tab{flex:1;justify-content:center}}