@aginies/tokens 0.1.0

package/dist/tokens.css

@@ -0,0 +1,1002 @@
+/* @aginies/tokens v0.1.0 — generated from src/tokens.ts. Do not edit by hand. */
+
+/* Static tokens: type, shape, spacing, motion, layout. */
+:root {
+  --font-display: 'Bricolage Grotesque Variable', 'Instrument Sans Variable', ui-sans-serif, system-ui, sans-serif;
+  --font-body: 'Instrument Sans Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
+  --font-mono: 'JetBrains Mono Variable', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 10px;
+  --radius-xl: 14px;
+  --radius-2xl: 20px;
+  --radius-full: 9999px;
+  --radius: var(--radius-lg);
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 24px;
+  --space-6: 32px;
+  --space-7: 48px;
+  --space-8: 64px;
+  --fs-display: clamp(40px, 6.4vw, 88px);
+  --lh-display: 0.96;
+  --ls-display: -0.04em;
+  --fs-h1: clamp(36px, 5.2vw, 68px);
+  --lh-h1: 1;
+  --ls-h1: -0.035em;
+  --fs-h2: clamp(28px, 3.8vw, 50px);
+  --lh-h2: 1.04;
+  --ls-h2: -0.03em;
+  --fs-h3: clamp(20px, 2vw, 26px);
+  --lh-h3: 1.2;
+  --ls-h3: -0.02em;
+  --fs-h4: 17px;
+  --lh-h4: 1.3;
+  --ls-h4: -0.01em;
+  --fs-stat: clamp(30px, 3.4vw, 44px);
+  --lh-stat: 1;
+  --ls-stat: -0.03em;
+  --fs-lede: clamp(17px, 1.4vw, 20px);
+  --lh-lede: 1.5;
+  --fs-body: 16px;
+  --lh-body: 1.55;
+  --fs-body-2: 15px;
+  --lh-body-2: 1.5;
+  --fs-small: 13.5px;
+  --lh-small: 1.45;
+  --fs-eyebrow: 11.5px;
+  --lh-eyebrow: 1;
+  --ls-eyebrow: 0.14em;
+  --fs-label: 11px;
+  --lh-label: 1;
+  --ls-label: 0.1em;
+  --fs-tag: 11.5px;
+  --lh-tag: 1;
+  --ls-tag: 0.04em;
+  --fs-ui: 13px;
+  --lh-ui: 1.4;
+  --fs-ui-sm: 12px;
+  --lh-ui-sm: 1.35;
+  --fs-ui-xs: 11px;
+  --lh-ui-xs: 1.3;
+  --duration-fast: 150ms;
+  --duration-base: 200ms;
+  --duration-slow: 300ms;
+  --duration-enter: 600ms;
+  --ease-enter: cubic-bezier(0.2, 0.7, 0.2, 1);
+  --max: 1200px;
+  --gutter: clamp(20px, 4vw, 40px);
+  --section-y: clamp(64px, 9vw, 128px);
+  --section-y-tight: clamp(40px, 6vw, 80px);
+  --bp-sm: 640px;
+  --bp-md: 768px;
+  --bp-lg: 1024px;
+  --bp-xl: 1280px;
+  --bp-2xl: 1536px;
+  --bp-nav: 1180px;
+  --bp-wide: 1340px;
+  --z-base: 0;
+  --z-raised: 10;
+  --z-sticky: 50;
+  --z-dropdown: 100;
+  --z-modal: 200;
+  --z-toast: 300;
+  --focus-ring: 2px solid var(--signal);
+  --focus-ring-offset: 3px;
+  --focus-field-ring: 0 0 0 3px var(--signal-soft);
+  --neutral-50: #F4F6FA;
+  --neutral-50-rgb: 244 246 250;
+  --neutral-100: #EEF1F7;
+  --neutral-100-rgb: 238 241 247;
+  --neutral-200: #DCE1EC;
+  --neutral-200-rgb: 220 225 236;
+  --neutral-300: #C5CCDB;
+  --neutral-300-rgb: 197 204 219;
+  --neutral-400: #A9B2CC;
+  --neutral-400-rgb: 169 178 204;
+  --neutral-500: #7F8AA8;
+  --neutral-500-rgb: 127 138 168;
+  --neutral-600: #6B7590;
+  --neutral-600-rgb: 107 117 144;
+  --neutral-700: #3C4560;
+  --neutral-700-rgb: 60 69 96;
+  --neutral-800: #2A3350;
+  --neutral-800-rgb: 42 51 80;
+  --neutral-900: #1B2238;
+  --neutral-900-rgb: 27 34 56;
+  --neutral-950: #0B1020;
+  --neutral-950-rgb: 11 16 32;
+}
+
+
+/* Dark is the default theme. */
+:root {
+  --bg: #070A14;
+  --bg-rgb: 7 10 20;
+  --bg-2: #0B1020;
+  --bg-2-rgb: 11 16 32;
+  --panel: #0E1426;
+  --panel-rgb: 14 20 38;
+  --panel-2: #121A30;
+  --panel-2-rgb: 18 26 48;
+  --panel-3: #182240;
+  --panel-3-rgb: 24 34 64;
+  --line: #1B2238;
+  --line-rgb: 27 34 56;
+  --line-2: #2A3350;
+  --line-2-rgb: 42 51 80;
+  --line-3: #3C4560;
+  --line-3-rgb: 60 69 96;
+  --text: #E7ECF7;
+  --text-rgb: 231 236 247;
+  --text-2: #A9B2CC;
+  --text-2-rgb: 169 178 204;
+  --mute: #7F8AA8;
+  --mute-rgb: 127 138 168;
+  --signal: #5FC8FF;
+  --signal-rgb: 95 200 255;
+  --signal-2: #01B1F7;
+  --signal-2-rgb: 1 177 247;
+  --signal-ink: #06111F;
+  --signal-ink-rgb: 6 17 31;
+  --signal-soft: rgba(95, 200, 255, 0.12);
+  --ok: #4FD1A0;
+  --ok-rgb: 79 209 160;
+  --ok-ink: #06111F;
+  --ok-ink-rgb: 6 17 31;
+  --ok-soft: rgba(79, 209, 160, 0.14);
+  --warn: #F2B35B;
+  --warn-rgb: 242 179 91;
+  --warn-ink: #06111F;
+  --warn-ink-rgb: 6 17 31;
+  --warn-soft: rgba(242, 179, 91, 0.14);
+  --bad: #FF7A7A;
+  --bad-rgb: 255 122 122;
+  --bad-ink: #06111F;
+  --bad-ink-rgb: 6 17 31;
+  --bad-soft: rgba(255, 122, 122, 0.14);
+  --shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
+  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.35);
+  --overlay: rgba(7, 10, 20, 0.6);
+  --signal-50: 235 247 255;
+  --signal-100: 211 238 255;
+  --signal-200: 173 222 251;
+  --signal-300: 122 199 241;
+  --signal-400: 75 175 226;
+  --signal-500: 33 150 202;
+  --signal-600: 8 125 172;
+  --signal-700: 1 100 139;
+  --signal-800: 2 77 107;
+  --signal-900: 0 54 78;
+  --signal-950: 0 36 53;
+  --ok-50: 231 251 241;
+  --ok-100: 208 243 226;
+  --ok-200: 171 229 202;
+  --ok-300: 118 210 171;
+  --ok-400: 65 188 142;
+  --ok-500: 16 163 118;
+  --ok-600: 0 136 97;
+  --ok-700: 5 109 78;
+  --ok-800: 5 84 59;
+  --ok-900: 1 60 41;
+  --ok-950: 1 40 26;
+  --warn-50: 255 243 229;
+  --warn-100: 251 230 204;
+  --warn-200: 241 208 166;
+  --warn-300: 227 178 114;
+  --warn-400: 208 150 67;
+  --warn-500: 185 125 25;
+  --warn-600: 156 102 1;
+  --warn-700: 125 82 5;
+  --warn-800: 97 62 0;
+  --warn-900: 69 43 1;
+  --warn-950: 47 28 0;
+  --bad-50: 255 242 241;
+  --bad-100: 255 226 224;
+  --bad-200: 255 197 194;
+  --bad-300: 254 158 155;
+  --bad-400: 244 119 119;
+  --bad-500: 220 90 93;
+  --bad-600: 188 69 72;
+  --bad-700: 155 51 55;
+  --bad-800: 120 38 41;
+  --bad-900: 86 26 28;
+  --bad-950: 60 14 16;
+  --data-1: var(--signal);
+  --data-2: var(--ok);
+  --data-3: var(--warn);
+  --data-4: var(--bad);
+  --data-5: var(--text-2);
+  --data-6: var(--mute);
+  --canvas-bg: var(--bg);
+  --canvas-grid: var(--line);
+  --canvas-node: var(--panel);
+  --canvas-node-line: var(--line-2);
+  --edge: var(--line-2);
+  --edge-hover: var(--text-2);
+  --edge-active: var(--signal);
+  --execution: var(--ok);
+  --check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%235FC8FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  color-scheme: dark;
+}
+
+.dark, [data-theme="dark"] {
+  --bg: #070A14;
+  --bg-rgb: 7 10 20;
+  --bg-2: #0B1020;
+  --bg-2-rgb: 11 16 32;
+  --panel: #0E1426;
+  --panel-rgb: 14 20 38;
+  --panel-2: #121A30;
+  --panel-2-rgb: 18 26 48;
+  --panel-3: #182240;
+  --panel-3-rgb: 24 34 64;
+  --line: #1B2238;
+  --line-rgb: 27 34 56;
+  --line-2: #2A3350;
+  --line-2-rgb: 42 51 80;
+  --line-3: #3C4560;
+  --line-3-rgb: 60 69 96;
+  --text: #E7ECF7;
+  --text-rgb: 231 236 247;
+  --text-2: #A9B2CC;
+  --text-2-rgb: 169 178 204;
+  --mute: #7F8AA8;
+  --mute-rgb: 127 138 168;
+  --signal: #5FC8FF;
+  --signal-rgb: 95 200 255;
+  --signal-2: #01B1F7;
+  --signal-2-rgb: 1 177 247;
+  --signal-ink: #06111F;
+  --signal-ink-rgb: 6 17 31;
+  --signal-soft: rgba(95, 200, 255, 0.12);
+  --ok: #4FD1A0;
+  --ok-rgb: 79 209 160;
+  --ok-ink: #06111F;
+  --ok-ink-rgb: 6 17 31;
+  --ok-soft: rgba(79, 209, 160, 0.14);
+  --warn: #F2B35B;
+  --warn-rgb: 242 179 91;
+  --warn-ink: #06111F;
+  --warn-ink-rgb: 6 17 31;
+  --warn-soft: rgba(242, 179, 91, 0.14);
+  --bad: #FF7A7A;
+  --bad-rgb: 255 122 122;
+  --bad-ink: #06111F;
+  --bad-ink-rgb: 6 17 31;
+  --bad-soft: rgba(255, 122, 122, 0.14);
+  --shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
+  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.35);
+  --overlay: rgba(7, 10, 20, 0.6);
+  --signal-50: 235 247 255;
+  --signal-100: 211 238 255;
+  --signal-200: 173 222 251;
+  --signal-300: 122 199 241;
+  --signal-400: 75 175 226;
+  --signal-500: 33 150 202;
+  --signal-600: 8 125 172;
+  --signal-700: 1 100 139;
+  --signal-800: 2 77 107;
+  --signal-900: 0 54 78;
+  --signal-950: 0 36 53;
+  --ok-50: 231 251 241;
+  --ok-100: 208 243 226;
+  --ok-200: 171 229 202;
+  --ok-300: 118 210 171;
+  --ok-400: 65 188 142;
+  --ok-500: 16 163 118;
+  --ok-600: 0 136 97;
+  --ok-700: 5 109 78;
+  --ok-800: 5 84 59;
+  --ok-900: 1 60 41;
+  --ok-950: 1 40 26;
+  --warn-50: 255 243 229;
+  --warn-100: 251 230 204;
+  --warn-200: 241 208 166;
+  --warn-300: 227 178 114;
+  --warn-400: 208 150 67;
+  --warn-500: 185 125 25;
+  --warn-600: 156 102 1;
+  --warn-700: 125 82 5;
+  --warn-800: 97 62 0;
+  --warn-900: 69 43 1;
+  --warn-950: 47 28 0;
+  --bad-50: 255 242 241;
+  --bad-100: 255 226 224;
+  --bad-200: 255 197 194;
+  --bad-300: 254 158 155;
+  --bad-400: 244 119 119;
+  --bad-500: 220 90 93;
+  --bad-600: 188 69 72;
+  --bad-700: 155 51 55;
+  --bad-800: 120 38 41;
+  --bad-900: 86 26 28;
+  --bad-950: 60 14 16;
+  --data-1: var(--signal);
+  --data-2: var(--ok);
+  --data-3: var(--warn);
+  --data-4: var(--bad);
+  --data-5: var(--text-2);
+  --data-6: var(--mute);
+  --canvas-bg: var(--bg);
+  --canvas-grid: var(--line);
+  --canvas-node: var(--panel);
+  --canvas-node-line: var(--line-2);
+  --edge: var(--line-2);
+  --edge-hover: var(--text-2);
+  --edge-active: var(--signal);
+  --execution: var(--ok);
+  --check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%235FC8FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  color-scheme: dark;
+}
+
+.light, [data-theme="light"] {
+  --bg: #F4F6FA;
+  --bg-rgb: 244 246 250;
+  --bg-2: #FFFFFF;
+  --bg-2-rgb: 255 255 255;
+  --panel: #FFFFFF;
+  --panel-rgb: 255 255 255;
+  --panel-2: #EEF1F7;
+  --panel-2-rgb: 238 241 247;
+  --panel-3: #E4E9F2;
+  --panel-3-rgb: 228 233 242;
+  --line: #DCE1EC;
+  --line-rgb: 220 225 236;
+  --line-2: #C5CCDB;
+  --line-2-rgb: 197 204 219;
+  --line-3: #A9B2CC;
+  --line-3-rgb: 169 178 204;
+  --text: #0B1220;
+  --text-rgb: 11 18 32;
+  --text-2: #3C4560;
+  --text-2-rgb: 60 69 96;
+  --mute: #6B7590;
+  --mute-rgb: 107 117 144;
+  --signal: #0077C2;
+  --signal-rgb: 0 119 194;
+  --signal-2: #005E9A;
+  --signal-2-rgb: 0 94 154;
+  --signal-ink: #FFFFFF;
+  --signal-ink-rgb: 255 255 255;
+  --signal-soft: rgba(0, 119, 194, 0.10);
+  --ok: #0B7F57;
+  --ok-rgb: 11 127 87;
+  --ok-ink: #FFFFFF;
+  --ok-ink-rgb: 255 255 255;
+  --ok-soft: rgba(11, 127, 87, 0.12);
+  --warn: #9C5A12;
+  --warn-rgb: 156 90 18;
+  --warn-ink: #FFFFFF;
+  --warn-ink-rgb: 255 255 255;
+  --warn-soft: rgba(156, 90, 18, 0.12);
+  --bad: #B3261E;
+  --bad-rgb: 179 38 30;
+  --bad-ink: #FFFFFF;
+  --bad-ink-rgb: 255 255 255;
+  --bad-soft: rgba(179, 38, 30, 0.10);
+  --shadow: 0 20px 50px rgba(11, 18, 32, 0.10);
+  --shadow-sm: 0 8px 20px rgba(11, 18, 32, 0.08);
+  --overlay: rgba(11, 18, 32, 0.45);
+  --signal-50: 238 246 255;
+  --signal-100: 217 236 255;
+  --signal-200: 181 219 254;
+  --signal-300: 130 195 253;
+  --signal-400: 82 170 244;
+  --signal-500: 46 144 221;
+  --signal-600: 21 120 191;
+  --signal-700: 3 96 157;
+  --signal-800: 3 73 121;
+  --signal-900: 3 52 87;
+  --signal-950: 1 34 61;
+  --ok-50: 234 250 241;
+  --ok-100: 213 242 226;
+  --ok-200: 180 227 202;
+  --ok-300: 135 206 171;
+  --ok-400: 94 184 143;
+  --ok-500: 60 160 118;
+  --ok-600: 38 134 96;
+  --ok-700: 22 109 75;
+  --ok-800: 16 83 57;
+  --ok-900: 10 59 40;
+  --ok-950: 2 40 25;
+  --warn-50: 255 243 233;
+  --warn-100: 253 228 209;
+  --warn-200: 244 205 174;
+  --warn-300: 231 175 127;
+  --warn-400: 213 146 87;
+  --warn-500: 189 120 56;
+  --warn-600: 161 98 36;
+  --warn-700: 132 77 22;
+  --warn-800: 101 59 15;
+  --warn-900: 73 41 9;
+  --warn-950: 50 26 3;
+  --bad-50: 255 242 240;
+  --bad-100: 254 226 221;
+  --bad-200: 255 198 189;
+  --bad-300: 254 159 145;
+  --bad-400: 251 115 99;
+  --bad-500: 226 85 71;
+  --bad-600: 194 63 52;
+  --bad-700: 160 46 37;
+  --bad-800: 124 34 27;
+  --bad-900: 89 23 17;
+  --bad-950: 63 11 8;
+  --data-1: var(--signal);
+  --data-2: var(--ok);
+  --data-3: var(--warn);
+  --data-4: var(--bad);
+  --data-5: var(--text-2);
+  --data-6: var(--mute);
+  --canvas-bg: var(--bg);
+  --canvas-grid: var(--line);
+  --canvas-node: var(--panel);
+  --canvas-node-line: var(--line-2);
+  --edge: var(--line-2);
+  --edge-hover: var(--text-2);
+  --edge-active: var(--signal);
+  --execution: var(--ok);
+  --check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%230077C2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  color-scheme: light;
+}
+
+@media (prefers-color-scheme: light) {
+  :root:not(.dark):not([data-theme="dark"]) {
+    --bg: #F4F6FA;
+    --bg-rgb: 244 246 250;
+    --bg-2: #FFFFFF;
+    --bg-2-rgb: 255 255 255;
+    --panel: #FFFFFF;
+    --panel-rgb: 255 255 255;
+    --panel-2: #EEF1F7;
+    --panel-2-rgb: 238 241 247;
+    --panel-3: #E4E9F2;
+    --panel-3-rgb: 228 233 242;
+    --line: #DCE1EC;
+    --line-rgb: 220 225 236;
+    --line-2: #C5CCDB;
+    --line-2-rgb: 197 204 219;
+    --line-3: #A9B2CC;
+    --line-3-rgb: 169 178 204;
+    --text: #0B1220;
+    --text-rgb: 11 18 32;
+    --text-2: #3C4560;
+    --text-2-rgb: 60 69 96;
+    --mute: #6B7590;
+    --mute-rgb: 107 117 144;
+    --signal: #0077C2;
+    --signal-rgb: 0 119 194;
+    --signal-2: #005E9A;
+    --signal-2-rgb: 0 94 154;
+    --signal-ink: #FFFFFF;
+    --signal-ink-rgb: 255 255 255;
+    --signal-soft: rgba(0, 119, 194, 0.10);
+    --ok: #0B7F57;
+    --ok-rgb: 11 127 87;
+    --ok-ink: #FFFFFF;
+    --ok-ink-rgb: 255 255 255;
+    --ok-soft: rgba(11, 127, 87, 0.12);
+    --warn: #9C5A12;
+    --warn-rgb: 156 90 18;
+    --warn-ink: #FFFFFF;
+    --warn-ink-rgb: 255 255 255;
+    --warn-soft: rgba(156, 90, 18, 0.12);
+    --bad: #B3261E;
+    --bad-rgb: 179 38 30;
+    --bad-ink: #FFFFFF;
+    --bad-ink-rgb: 255 255 255;
+    --bad-soft: rgba(179, 38, 30, 0.10);
+    --shadow: 0 20px 50px rgba(11, 18, 32, 0.10);
+    --shadow-sm: 0 8px 20px rgba(11, 18, 32, 0.08);
+    --overlay: rgba(11, 18, 32, 0.45);
+    --signal-50: 238 246 255;
+    --signal-100: 217 236 255;
+    --signal-200: 181 219 254;
+    --signal-300: 130 195 253;
+    --signal-400: 82 170 244;
+    --signal-500: 46 144 221;
+    --signal-600: 21 120 191;
+    --signal-700: 3 96 157;
+    --signal-800: 3 73 121;
+    --signal-900: 3 52 87;
+    --signal-950: 1 34 61;
+    --ok-50: 234 250 241;
+    --ok-100: 213 242 226;
+    --ok-200: 180 227 202;
+    --ok-300: 135 206 171;
+    --ok-400: 94 184 143;
+    --ok-500: 60 160 118;
+    --ok-600: 38 134 96;
+    --ok-700: 22 109 75;
+    --ok-800: 16 83 57;
+    --ok-900: 10 59 40;
+    --ok-950: 2 40 25;
+    --warn-50: 255 243 233;
+    --warn-100: 253 228 209;
+    --warn-200: 244 205 174;
+    --warn-300: 231 175 127;
+    --warn-400: 213 146 87;
+    --warn-500: 189 120 56;
+    --warn-600: 161 98 36;
+    --warn-700: 132 77 22;
+    --warn-800: 101 59 15;
+    --warn-900: 73 41 9;
+    --warn-950: 50 26 3;
+    --bad-50: 255 242 240;
+    --bad-100: 254 226 221;
+    --bad-200: 255 198 189;
+    --bad-300: 254 159 145;
+    --bad-400: 251 115 99;
+    --bad-500: 226 85 71;
+    --bad-600: 194 63 52;
+    --bad-700: 160 46 37;
+    --bad-800: 124 34 27;
+    --bad-900: 89 23 17;
+    --bad-950: 63 11 8;
+    --data-1: var(--signal);
+    --data-2: var(--ok);
+    --data-3: var(--warn);
+    --data-4: var(--bad);
+    --data-5: var(--text-2);
+    --data-6: var(--mute);
+    --canvas-bg: var(--bg);
+    --canvas-grid: var(--line);
+    --canvas-node: var(--panel);
+    --canvas-node-line: var(--line-2);
+    --edge: var(--line-2);
+    --edge-hover: var(--text-2);
+    --edge-active: var(--signal);
+    --execution: var(--ok);
+    --check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%230077C2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    color-scheme: light;
+  }
+
+}
+
+/* A .room section always carries the palette opposite to its ambient theme. */
+:root .room, .dark .room, [data-theme="dark"] .room {
+  --bg: #F4F6FA;
+  --bg-rgb: 244 246 250;
+  --bg-2: #FFFFFF;
+  --bg-2-rgb: 255 255 255;
+  --panel: #FFFFFF;
+  --panel-rgb: 255 255 255;
+  --panel-2: #EEF1F7;
+  --panel-2-rgb: 238 241 247;
+  --panel-3: #E4E9F2;
+  --panel-3-rgb: 228 233 242;
+  --line: #DCE1EC;
+  --line-rgb: 220 225 236;
+  --line-2: #C5CCDB;
+  --line-2-rgb: 197 204 219;
+  --line-3: #A9B2CC;
+  --line-3-rgb: 169 178 204;
+  --text: #0B1220;
+  --text-rgb: 11 18 32;
+  --text-2: #3C4560;
+  --text-2-rgb: 60 69 96;
+  --mute: #6B7590;
+  --mute-rgb: 107 117 144;
+  --signal: #0077C2;
+  --signal-rgb: 0 119 194;
+  --signal-2: #005E9A;
+  --signal-2-rgb: 0 94 154;
+  --signal-ink: #FFFFFF;
+  --signal-ink-rgb: 255 255 255;
+  --signal-soft: rgba(0, 119, 194, 0.10);
+  --ok: #0B7F57;
+  --ok-rgb: 11 127 87;
+  --ok-ink: #FFFFFF;
+  --ok-ink-rgb: 255 255 255;
+  --ok-soft: rgba(11, 127, 87, 0.12);
+  --warn: #9C5A12;
+  --warn-rgb: 156 90 18;
+  --warn-ink: #FFFFFF;
+  --warn-ink-rgb: 255 255 255;
+  --warn-soft: rgba(156, 90, 18, 0.12);
+  --bad: #B3261E;
+  --bad-rgb: 179 38 30;
+  --bad-ink: #FFFFFF;
+  --bad-ink-rgb: 255 255 255;
+  --bad-soft: rgba(179, 38, 30, 0.10);
+  --shadow: 0 20px 50px rgba(11, 18, 32, 0.10);
+  --shadow-sm: 0 8px 20px rgba(11, 18, 32, 0.08);
+  --overlay: rgba(11, 18, 32, 0.45);
+  --signal-50: 238 246 255;
+  --signal-100: 217 236 255;
+  --signal-200: 181 219 254;
+  --signal-300: 130 195 253;
+  --signal-400: 82 170 244;
+  --signal-500: 46 144 221;
+  --signal-600: 21 120 191;
+  --signal-700: 3 96 157;
+  --signal-800: 3 73 121;
+  --signal-900: 3 52 87;
+  --signal-950: 1 34 61;
+  --ok-50: 234 250 241;
+  --ok-100: 213 242 226;
+  --ok-200: 180 227 202;
+  --ok-300: 135 206 171;
+  --ok-400: 94 184 143;
+  --ok-500: 60 160 118;
+  --ok-600: 38 134 96;
+  --ok-700: 22 109 75;
+  --ok-800: 16 83 57;
+  --ok-900: 10 59 40;
+  --ok-950: 2 40 25;
+  --warn-50: 255 243 233;
+  --warn-100: 253 228 209;
+  --warn-200: 244 205 174;
+  --warn-300: 231 175 127;
+  --warn-400: 213 146 87;
+  --warn-500: 189 120 56;
+  --warn-600: 161 98 36;
+  --warn-700: 132 77 22;
+  --warn-800: 101 59 15;
+  --warn-900: 73 41 9;
+  --warn-950: 50 26 3;
+  --bad-50: 255 242 240;
+  --bad-100: 254 226 221;
+  --bad-200: 255 198 189;
+  --bad-300: 254 159 145;
+  --bad-400: 251 115 99;
+  --bad-500: 226 85 71;
+  --bad-600: 194 63 52;
+  --bad-700: 160 46 37;
+  --bad-800: 124 34 27;
+  --bad-900: 89 23 17;
+  --bad-950: 63 11 8;
+  --data-1: var(--signal);
+  --data-2: var(--ok);
+  --data-3: var(--warn);
+  --data-4: var(--bad);
+  --data-5: var(--text-2);
+  --data-6: var(--mute);
+  --canvas-bg: var(--bg);
+  --canvas-grid: var(--line);
+  --canvas-node: var(--panel);
+  --canvas-node-line: var(--line-2);
+  --edge: var(--line-2);
+  --edge-hover: var(--text-2);
+  --edge-active: var(--signal);
+  --execution: var(--ok);
+  --check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%230077C2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  color-scheme: light;
+}
+
+.light .room, [data-theme="light"] .room {
+  --bg: #070A14;
+  --bg-rgb: 7 10 20;
+  --bg-2: #0B1020;
+  --bg-2-rgb: 11 16 32;
+  --panel: #0E1426;
+  --panel-rgb: 14 20 38;
+  --panel-2: #121A30;
+  --panel-2-rgb: 18 26 48;
+  --panel-3: #182240;
+  --panel-3-rgb: 24 34 64;
+  --line: #1B2238;
+  --line-rgb: 27 34 56;
+  --line-2: #2A3350;
+  --line-2-rgb: 42 51 80;
+  --line-3: #3C4560;
+  --line-3-rgb: 60 69 96;
+  --text: #E7ECF7;
+  --text-rgb: 231 236 247;
+  --text-2: #A9B2CC;
+  --text-2-rgb: 169 178 204;
+  --mute: #7F8AA8;
+  --mute-rgb: 127 138 168;
+  --signal: #5FC8FF;
+  --signal-rgb: 95 200 255;
+  --signal-2: #01B1F7;
+  --signal-2-rgb: 1 177 247;
+  --signal-ink: #06111F;
+  --signal-ink-rgb: 6 17 31;
+  --signal-soft: rgba(95, 200, 255, 0.12);
+  --ok: #4FD1A0;
+  --ok-rgb: 79 209 160;
+  --ok-ink: #06111F;
+  --ok-ink-rgb: 6 17 31;
+  --ok-soft: rgba(79, 209, 160, 0.14);
+  --warn: #F2B35B;
+  --warn-rgb: 242 179 91;
+  --warn-ink: #06111F;
+  --warn-ink-rgb: 6 17 31;
+  --warn-soft: rgba(242, 179, 91, 0.14);
+  --bad: #FF7A7A;
+  --bad-rgb: 255 122 122;
+  --bad-ink: #06111F;
+  --bad-ink-rgb: 6 17 31;
+  --bad-soft: rgba(255, 122, 122, 0.14);
+  --shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
+  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.35);
+  --overlay: rgba(7, 10, 20, 0.6);
+  --signal-50: 235 247 255;
+  --signal-100: 211 238 255;
+  --signal-200: 173 222 251;
+  --signal-300: 122 199 241;
+  --signal-400: 75 175 226;
+  --signal-500: 33 150 202;
+  --signal-600: 8 125 172;
+  --signal-700: 1 100 139;
+  --signal-800: 2 77 107;
+  --signal-900: 0 54 78;
+  --signal-950: 0 36 53;
+  --ok-50: 231 251 241;
+  --ok-100: 208 243 226;
+  --ok-200: 171 229 202;
+  --ok-300: 118 210 171;
+  --ok-400: 65 188 142;
+  --ok-500: 16 163 118;
+  --ok-600: 0 136 97;
+  --ok-700: 5 109 78;
+  --ok-800: 5 84 59;
+  --ok-900: 1 60 41;
+  --ok-950: 1 40 26;
+  --warn-50: 255 243 229;
+  --warn-100: 251 230 204;
+  --warn-200: 241 208 166;
+  --warn-300: 227 178 114;
+  --warn-400: 208 150 67;
+  --warn-500: 185 125 25;
+  --warn-600: 156 102 1;
+  --warn-700: 125 82 5;
+  --warn-800: 97 62 0;
+  --warn-900: 69 43 1;
+  --warn-950: 47 28 0;
+  --bad-50: 255 242 241;
+  --bad-100: 255 226 224;
+  --bad-200: 255 197 194;
+  --bad-300: 254 158 155;
+  --bad-400: 244 119 119;
+  --bad-500: 220 90 93;
+  --bad-600: 188 69 72;
+  --bad-700: 155 51 55;
+  --bad-800: 120 38 41;
+  --bad-900: 86 26 28;
+  --bad-950: 60 14 16;
+  --data-1: var(--signal);
+  --data-2: var(--ok);
+  --data-3: var(--warn);
+  --data-4: var(--bad);
+  --data-5: var(--text-2);
+  --data-6: var(--mute);
+  --canvas-bg: var(--bg);
+  --canvas-grid: var(--line);
+  --canvas-node: var(--panel);
+  --canvas-node-line: var(--line-2);
+  --edge: var(--line-2);
+  --edge-hover: var(--text-2);
+  --edge-active: var(--signal);
+  --execution: var(--ok);
+  --check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%235FC8FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  color-scheme: dark;
+}
+
+@media (prefers-color-scheme: light) {
+  :root:not(.dark):not([data-theme="dark"]) .room {
+    --bg: #070A14;
+    --bg-rgb: 7 10 20;
+    --bg-2: #0B1020;
+    --bg-2-rgb: 11 16 32;
+    --panel: #0E1426;
+    --panel-rgb: 14 20 38;
+    --panel-2: #121A30;
+    --panel-2-rgb: 18 26 48;
+    --panel-3: #182240;
+    --panel-3-rgb: 24 34 64;
+    --line: #1B2238;
+    --line-rgb: 27 34 56;
+    --line-2: #2A3350;
+    --line-2-rgb: 42 51 80;
+    --line-3: #3C4560;
+    --line-3-rgb: 60 69 96;
+    --text: #E7ECF7;
+    --text-rgb: 231 236 247;
+    --text-2: #A9B2CC;
+    --text-2-rgb: 169 178 204;
+    --mute: #7F8AA8;
+    --mute-rgb: 127 138 168;
+    --signal: #5FC8FF;
+    --signal-rgb: 95 200 255;
+    --signal-2: #01B1F7;
+    --signal-2-rgb: 1 177 247;
+    --signal-ink: #06111F;
+    --signal-ink-rgb: 6 17 31;
+    --signal-soft: rgba(95, 200, 255, 0.12);
+    --ok: #4FD1A0;
+    --ok-rgb: 79 209 160;
+    --ok-ink: #06111F;
+    --ok-ink-rgb: 6 17 31;
+    --ok-soft: rgba(79, 209, 160, 0.14);
+    --warn: #F2B35B;
+    --warn-rgb: 242 179 91;
+    --warn-ink: #06111F;
+    --warn-ink-rgb: 6 17 31;
+    --warn-soft: rgba(242, 179, 91, 0.14);
+    --bad: #FF7A7A;
+    --bad-rgb: 255 122 122;
+    --bad-ink: #06111F;
+    --bad-ink-rgb: 6 17 31;
+    --bad-soft: rgba(255, 122, 122, 0.14);
+    --shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
+    --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.35);
+    --overlay: rgba(7, 10, 20, 0.6);
+    --signal-50: 235 247 255;
+    --signal-100: 211 238 255;
+    --signal-200: 173 222 251;
+    --signal-300: 122 199 241;
+    --signal-400: 75 175 226;
+    --signal-500: 33 150 202;
+    --signal-600: 8 125 172;
+    --signal-700: 1 100 139;
+    --signal-800: 2 77 107;
+    --signal-900: 0 54 78;
+    --signal-950: 0 36 53;
+    --ok-50: 231 251 241;
+    --ok-100: 208 243 226;
+    --ok-200: 171 229 202;
+    --ok-300: 118 210 171;
+    --ok-400: 65 188 142;
+    --ok-500: 16 163 118;
+    --ok-600: 0 136 97;
+    --ok-700: 5 109 78;
+    --ok-800: 5 84 59;
+    --ok-900: 1 60 41;
+    --ok-950: 1 40 26;
+    --warn-50: 255 243 229;
+    --warn-100: 251 230 204;
+    --warn-200: 241 208 166;
+    --warn-300: 227 178 114;
+    --warn-400: 208 150 67;
+    --warn-500: 185 125 25;
+    --warn-600: 156 102 1;
+    --warn-700: 125 82 5;
+    --warn-800: 97 62 0;
+    --warn-900: 69 43 1;
+    --warn-950: 47 28 0;
+    --bad-50: 255 242 241;
+    --bad-100: 255 226 224;
+    --bad-200: 255 197 194;
+    --bad-300: 254 158 155;
+    --bad-400: 244 119 119;
+    --bad-500: 220 90 93;
+    --bad-600: 188 69 72;
+    --bad-700: 155 51 55;
+    --bad-800: 120 38 41;
+    --bad-900: 86 26 28;
+    --bad-950: 60 14 16;
+    --data-1: var(--signal);
+    --data-2: var(--ok);
+    --data-3: var(--warn);
+    --data-4: var(--bad);
+    --data-5: var(--text-2);
+    --data-6: var(--mute);
+    --canvas-bg: var(--bg);
+    --canvas-grid: var(--line);
+    --canvas-node: var(--panel);
+    --canvas-node-line: var(--line-2);
+    --edge: var(--line-2);
+    --edge-hover: var(--text-2);
+    --edge-active: var(--signal);
+    --execution: var(--ok);
+    --check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%235FC8FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    color-scheme: dark;
+  }
+
+  :root:not(.dark):not([data-theme="dark"]) .light .room {
+    --bg: #070A14;
+    --bg-rgb: 7 10 20;
+    --bg-2: #0B1020;
+    --bg-2-rgb: 11 16 32;
+    --panel: #0E1426;
+    --panel-rgb: 14 20 38;
+    --panel-2: #121A30;
+    --panel-2-rgb: 18 26 48;
+    --panel-3: #182240;
+    --panel-3-rgb: 24 34 64;
+    --line: #1B2238;
+    --line-rgb: 27 34 56;
+    --line-2: #2A3350;
+    --line-2-rgb: 42 51 80;
+    --line-3: #3C4560;
+    --line-3-rgb: 60 69 96;
+    --text: #E7ECF7;
+    --text-rgb: 231 236 247;
+    --text-2: #A9B2CC;
+    --text-2-rgb: 169 178 204;
+    --mute: #7F8AA8;
+    --mute-rgb: 127 138 168;
+    --signal: #5FC8FF;
+    --signal-rgb: 95 200 255;
+    --signal-2: #01B1F7;
+    --signal-2-rgb: 1 177 247;
+    --signal-ink: #06111F;
+    --signal-ink-rgb: 6 17 31;
+    --signal-soft: rgba(95, 200, 255, 0.12);
+    --ok: #4FD1A0;
+    --ok-rgb: 79 209 160;
+    --ok-ink: #06111F;
+    --ok-ink-rgb: 6 17 31;
+    --ok-soft: rgba(79, 209, 160, 0.14);
+    --warn: #F2B35B;
+    --warn-rgb: 242 179 91;
+    --warn-ink: #06111F;
+    --warn-ink-rgb: 6 17 31;
+    --warn-soft: rgba(242, 179, 91, 0.14);
+    --bad: #FF7A7A;
+    --bad-rgb: 255 122 122;
+    --bad-ink: #06111F;
+    --bad-ink-rgb: 6 17 31;
+    --bad-soft: rgba(255, 122, 122, 0.14);
+    --shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
+    --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.35);
+    --overlay: rgba(7, 10, 20, 0.6);
+    --signal-50: 235 247 255;
+    --signal-100: 211 238 255;
+    --signal-200: 173 222 251;
+    --signal-300: 122 199 241;
+    --signal-400: 75 175 226;
+    --signal-500: 33 150 202;
+    --signal-600: 8 125 172;
+    --signal-700: 1 100 139;
+    --signal-800: 2 77 107;
+    --signal-900: 0 54 78;
+    --signal-950: 0 36 53;
+    --ok-50: 231 251 241;
+    --ok-100: 208 243 226;
+    --ok-200: 171 229 202;
+    --ok-300: 118 210 171;
+    --ok-400: 65 188 142;
+    --ok-500: 16 163 118;
+    --ok-600: 0 136 97;
+    --ok-700: 5 109 78;
+    --ok-800: 5 84 59;
+    --ok-900: 1 60 41;
+    --ok-950: 1 40 26;
+    --warn-50: 255 243 229;
+    --warn-100: 251 230 204;
+    --warn-200: 241 208 166;
+    --warn-300: 227 178 114;
+    --warn-400: 208 150 67;
+    --warn-500: 185 125 25;
+    --warn-600: 156 102 1;
+    --warn-700: 125 82 5;
+    --warn-800: 97 62 0;
+    --warn-900: 69 43 1;
+    --warn-950: 47 28 0;
+    --bad-50: 255 242 241;
+    --bad-100: 255 226 224;
+    --bad-200: 255 197 194;
+    --bad-300: 254 158 155;
+    --bad-400: 244 119 119;
+    --bad-500: 220 90 93;
+    --bad-600: 188 69 72;
+    --bad-700: 155 51 55;
+    --bad-800: 120 38 41;
+    --bad-900: 86 26 28;
+    --bad-950: 60 14 16;
+    --data-1: var(--signal);
+    --data-2: var(--ok);
+    --data-3: var(--warn);
+    --data-4: var(--bad);
+    --data-5: var(--text-2);
+    --data-6: var(--mute);
+    --canvas-bg: var(--bg);
+    --canvas-grid: var(--line);
+    --canvas-node: var(--panel);
+    --canvas-node-line: var(--line-2);
+    --edge: var(--line-2);
+    --edge-hover: var(--text-2);
+    --edge-active: var(--signal);
+    --execution: var(--ok);
+    --check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%235FC8FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    color-scheme: dark;
+  }
+
+}
+
+.room { background: var(--bg); color: var(--text); }