:root{--bg:#e2e2e2;--surface:#f7f7f7;--secondary-surface:#dedede;--divider:#d7d7d7;--text:#2b2b2b;--text-key:#3a76a8;--text-muted:#6b6b6b;--text-warn:#bb2a2a;--primary:#222;--primary-hover:#3a76a8;--secondary:#46b1ba;--border:#222;--tone-active:#4a4;--divider-size:.4rem;letter-spacing:.01em;--font-sans:sans-serif;--font-mono:monospace;--transition-time:.2s;--swatch-surround:#777;--border-radius:1rem;--sticky-left-margin:1rem;--sticky-max-width:15rem}[data-theme=dark]{--bg:#0f0f10;--surface:#1c1c1e;--divider:#333334;--text:#d3d3d3;--text-muted:#ababab;--text-warn:#fd9999;--primary:#9c9c9c;--primary-hover:#61b554;--border:#505052}[data-theme=jungle]{--bg:#6a7f4e;--surface:#627354;--secondary-surface:#758c63;--text:#eee;--text-muted:#ffffffc7;--text-hint:#ffffffad;--text-key:#ffffd7;--primary:#bbd1f9;--primary-hover:#bbd1f9;--secondary:#e0bf07;--accent:#defff3;--divider:#e7e7e7;--text-warn:#f04040;--tone-active:#0f0;--border:#a98754}[data-theme=salt-flats]{--bg:#0a2b31;--surface:#066b6a;--secondary-surface:#38685e;--text:#fafaf2;--text-muted:#bbb;--text-hint:#fafaf2ad;--text-key:#ffffd7;--primary:#e9da39;--primary-hover:#fbb617;--secondary:#4ff6f2;--accent:#ecf3c6;--divider:#e7f2df;--text-warn:#d55;--tone-active:#5aff92;--border:#6eb498}[data-theme=brutalist]{--bg:#d0d0d0;--surface:#b4b4b4;--secondary-surface:#ede0d1;--divider:#8a8a8a;--text:#161616;--text-muted:#3a3a3a;--text-warn:#b00000;--primary:#1f1f1f;--primary-hover:#005c62;--secondary:#ac7e4f;--tone-active:#518cc2;--border:#1f1f1f}html{background-color:var(--bg)}body{background-color:none;color:var(--text);font-family:var(--font-sans);margin:0}p{font-size:1.2em}.card{background-color:var(--surface);border:2px solid var(--border);border-radius:var(--border-radius);min-width:2rem;min-height:2rem;color:var(--text);margin:1rem;padding:1rem}button{border:2px solid var(--border);color:var(--text);cursor:pointer;background:0 0;border-radius:.75rem;margin:.25rem;padding:.25rem .75rem}button:hover{background:color-mix(in srgb, var(--text) 10%, transparent);border-color:var(--primary-hover);color:var(--primary-hover)}button:active{border-color:var(--primary-hover);color:var(--primary-hover)}.inverse{background:color-mix(in srgb, var(--text) 70%, transparent);color:var(--surface)}.inverse:hover{background:color-mix(in srgb, var(--text) 80%, transparent);color:var(--surface)}.onelineForm{field-sizing:content;white-space:pre;resize:none;width:auto;min-width:8ch;max-width:100%;font:inherit;border:1px solid #ccc;border-radius:4px;padding:2px 6px;overflow:hidden}