:root{--font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--bg: #e9ecef;--surface: #ffffff;--surface-2: #f4f6f7;--surface-3: #e7ebee;--border: #d2d8dd;--border-strong: #b6bfc7;--text: #12171b;--text-2: #57626b;--text-3: #879099;--accent: #0a6a8e;--accent-text: #ffffff;--accent-soft: rgba(10, 106, 142, .1);--warn: #9c4a12;--warn-soft: rgba(184, 84, 28, .1);--warn-border: rgba(184, 84, 28, .3);--danger: #b03a28;--danger-soft: rgba(192, 57, 43, .09);--danger-border: rgba(192, 57, 43, .28);--radius: 6px;--radius-lg: 10px;--canvas-grid: rgba(128, 138, 148, .28);--canvas-seam: #c2703a}:root[data-theme=dark]{--bg: #101417;--surface: #1a2024;--surface-2: #212930;--surface-3: #2a333a;--border: #303a42;--border-strong: #43505a;--text: #e7edf1;--text-2: #98a4ad;--text-3: #6a757e;--accent: #47b4dc;--accent-text: #0b1418;--accent-soft: rgba(71, 180, 220, .14);--warn: #e2a15c;--warn-soft: rgba(226, 161, 92, .12);--warn-border: rgba(226, 161, 92, .3);--danger: #e8705a;--danger-soft: rgba(232, 112, 90, .12);--danger-border: rgba(232, 112, 90, .3)}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-display);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em}.readout{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}.label{font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}button{font-family:var(--font-display);font-size:13px;font-weight:500;padding:7px 11px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:background .12s,border-color .12s}button:hover{background:var(--surface-2);border-color:var(--border-strong)}button:active{background:var(--surface-3)}button[data-active=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}input,select{font-family:var(--font-display);font-size:13px;padding:6px 8px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);min-width:0;max-width:100%}select,.dims input{width:100%}input[type=number]{font-family:var(--font-mono);font-variant-numeric:tabular-nums}input[type=color]{padding:2px;height:30px;cursor:pointer}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.layout{display:grid;grid-template-columns:minmax(260px,320px) 1fr;gap:20px;align-items:start}.col-side,.col-main{display:flex;flex-direction:column;gap:14px}.col-main{min-width:0}.app-shell{min-height:100vh;padding:24px;max-width:1180px;margin:0 auto}@media (max-width: 860px){.layout{display:flex;flex-direction:column}.layout>.col-side,.layout>.col-main{display:contents}.layout section,.layout>main>div{order:5}.layout [data-ord="1"]{order:1}.layout [data-ord="2"]{order:2}.layout [data-ord="3"]{order:3}.layout [data-ord="4"]{order:4}.layout [data-ord="5"]{order:5}.layout [data-ord="6"]{order:6}.layout [data-ord="7"]{order:7}.layout [data-ord="8"]{order:8}.layout [data-ord="0"]{order:0}}@media (max-width: 560px){body{font-size:15px}.app-shell{padding:14px}.layout{gap:14px}button{min-height:42px;padding:9px 13px;font-size:14px}input,select{min-height:42px;font-size:16px}input[type=range]{min-height:30px}input[type=color]{min-height:36px}input[type=checkbox]{width:20px;height:20px}}@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}