@aginies/webuikit 0.2.0

package/dist/styles.css

@@ -0,0 +1,2269 @@
+/* @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); }
+
+/* @aginies/webuikit — component styles. Tokens come from @aginies/tokens (prepended at build). */
+
+/* ─── reset inside widgets ─── */
+.agi-chat,
+.agi-bubble,
+.agi-panel,
+.agi-btn,
+.agi-input,
+.agi-tag,
+.agi-chip {
+  box-sizing: border-box;
+  font-family: var(--font-body);
+  color: var(--text);
+}
+.agi-chat *,
+.agi-bubble * {
+  box-sizing: border-box;
+}
+
+/* ─── buttons ─── */
+.agi-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 36px;
+  padding: 0 12px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--line-2);
+  background: transparent;
+  color: var(--text);
+  font: inherit;
+  font-size: 13.5px;
+  font-weight: 600;
+  letter-spacing: -0.005em;
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    background var(--duration-fast) ease,
+    border-color var(--duration-fast) ease,
+    color var(--duration-fast) ease,
+    transform var(--duration-fast) ease;
+}
+.agi-btn:hover {
+  border-color: var(--text-2);
+  background: var(--panel);
+}
+.agi-btn:active {
+  transform: translateY(1px);
+}
+.agi-btn:focus-visible {
+  outline: var(--focus-ring);
+  outline-offset: var(--focus-ring-offset);
+}
+.agi-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+.agi-btn--primary {
+  background: var(--text);
+  border-color: var(--text);
+  color: var(--bg);
+}
+.agi-btn--primary:hover {
+  background: var(--signal);
+  border-color: var(--signal);
+  color: var(--signal-ink);
+}
+.agi-btn--signal {
+  background: var(--signal);
+  border-color: var(--signal);
+  color: var(--signal-ink);
+}
+.agi-btn--signal:hover {
+  background: var(--signal);
+  border-color: var(--signal);
+  color: var(--signal-ink);
+  filter: brightness(1.08);
+}
+.agi-btn--destructive {
+  background: var(--bad);
+  border-color: var(--bad);
+  color: var(--bad-ink);
+}
+.agi-btn--ghost {
+  border-color: transparent;
+  color: var(--text-2);
+}
+.agi-btn--ghost:hover {
+  background: var(--panel-2);
+  color: var(--text);
+}
+.agi-btn--sm {
+  height: 30px;
+  padding: 0 10px;
+  font-size: 12.5px;
+}
+.agi-btn--lg {
+  height: 44px;
+  padding: 0 18px;
+  font-size: 15px;
+}
+
+/* ─── tags / chips ─── */
+.agi-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-family: var(--font-mono);
+  font-size: var(--fs-tag);
+  letter-spacing: var(--ls-tag);
+  padding: 3px 8px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--line-2);
+  color: var(--text-2);
+  white-space: nowrap;
+}
+.agi-tag--signal {
+  color: var(--signal);
+  border-color: color-mix(in srgb, var(--signal) 45%, transparent);
+  background: var(--signal-soft);
+}
+.agi-tag--ok {
+  color: var(--ok);
+  border-color: color-mix(in srgb, var(--ok) 45%, transparent);
+  background: var(--ok-soft);
+}
+.agi-tag--warn {
+  color: var(--warn);
+  border-color: color-mix(in srgb, var(--warn) 45%, transparent);
+  background: var(--warn-soft);
+}
+.agi-tag--bad {
+  color: var(--bad);
+  border-color: color-mix(in srgb, var(--bad) 45%, transparent);
+  background: var(--bad-soft);
+}
+.agi-chip {
+  display: inline-flex;
+  align-items: center;
+  height: 32px;
+  padding: 0 12px;
+  border-radius: var(--radius-full);
+  border: 1px solid var(--line-2);
+  background: transparent;
+  font: inherit;
+  font-size: 13px;
+  color: var(--text-2);
+  cursor: pointer;
+  transition: all var(--duration-fast) ease;
+}
+.agi-chip:hover {
+  border-color: var(--text-2);
+  color: var(--text);
+}
+.agi-chip[aria-pressed="true"] {
+  background: var(--signal);
+  border-color: var(--signal);
+  color: var(--signal-ink);
+  font-weight: 600;
+}
+
+/* ─── surfaces / type ─── */
+.agi-panel {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-lg);
+}
+.agi-panel--2 {
+  background: var(--panel-2);
+}
+.agi-eyebrow {
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: var(--fs-eyebrow);
+  letter-spacing: var(--ls-eyebrow);
+  text-transform: uppercase;
+  color: var(--signal);
+  font-weight: 500;
+}
+.agi-eyebrow--quiet {
+  color: var(--mute);
+}
+.agi-stat {
+  display: grid;
+  gap: 4px;
+}
+.agi-stat__v {
+  font-family: var(--font-display);
+  font-size: var(--fs-stat);
+  line-height: 1;
+  letter-spacing: -0.03em;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+.agi-stat__k {
+  font-family: var(--font-mono);
+  font-size: var(--fs-eyebrow);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--mute);
+}
+
+/* ─── fields ─── */
+.agi-field {
+  display: grid;
+  gap: 6px;
+}
+.agi-field__label {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--mute);
+}
+.agi-field__error {
+  color: var(--bad);
+  font-size: 13px;
+}
+.agi-field__hint {
+  font-size: 12px;
+  color: var(--mute);
+}
+.agi-input {
+  width: 100%;
+  background: var(--bg-2);
+  border: 1px solid var(--line-2);
+  border-radius: var(--radius-md);
+  padding: 9px 12px;
+  color: var(--text);
+  font: inherit;
+  font-size: 14px;
+  transition: border-color var(--duration-fast) ease;
+}
+.agi-input::placeholder {
+  color: var(--mute);
+}
+.agi-input:focus {
+  outline: none;
+  border-color: var(--signal);
+  box-shadow: var(--focus-field-ring);
+}
+.agi-textarea {
+  resize: vertical;
+  min-height: 90px;
+}
+
+/* ─── spinner ─── */
+.agi-spinner {
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+}
+.agi-spinner span {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--signal);
+  animation: agi-pulse 1.2s ease-in-out infinite;
+}
+.agi-spinner span:nth-child(2) {
+  animation-delay: 0.15s;
+}
+.agi-spinner span:nth-child(3) {
+  animation-delay: 0.3s;
+}
+@keyframes agi-pulse {
+  0%,
+  80%,
+  100% {
+    opacity: 0.25;
+    transform: scale(0.8);
+  }
+  40% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* ─── table ─── */
+.agi-table {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: 13.5px;
+}
+.agi-table th,
+.agi-table td {
+  text-align: left;
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--line);
+  vertical-align: top;
+}
+.agi-table th {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--mute);
+  font-weight: 500;
+}
+.agi-table td {
+  color: var(--text-2);
+}
+
+/* ─── chat ─── */
+.agi-chat {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  font-size: 14.5px;
+  line-height: 1.5;
+}
+.agi-chat--inline {
+  height: 100%;
+  min-height: 420px;
+}
+.agi-chat--full {
+  position: fixed;
+  inset: 0;
+  border-radius: 0;
+  border: 0;
+  z-index: var(--z-modal);
+}
+.agi-chat--bubble {
+  width: min(400px, calc(100vw - 32px));
+  height: min(600px, calc(100vh - 110px));
+  box-shadow: var(--shadow);
+}
+.agi-chat__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--line);
+  background: var(--panel-2);
+}
+.agi-chat__title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+.agi-chat__title img {
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  object-fit: cover;
+  flex: none;
+}
+.agi-chat__name {
+  font-family: var(--font-display);
+  font-weight: 600;
+  font-size: 15px;
+  letter-spacing: -0.01em;
+}
+.agi-chat__desc {
+  color: var(--mute);
+  font-size: 12.5px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.agi-chat__close {
+  width: 30px;
+  height: 30px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--line-2);
+  background: transparent;
+  color: var(--text-2);
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+}
+.agi-chat__close:hover {
+  color: var(--text);
+  border-color: var(--text-2);
+}
+.agi-chat__messages {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 14px;
+  display: grid;
+  gap: 12px;
+  align-content: start;
+  background-image: radial-gradient(var(--line) 1px, transparent 1px);
+  background-size: 18px 18px;
+}
+.agi-msg {
+  display: grid;
+  gap: 4px;
+  max-width: 88%;
+}
+.agi-msg--user {
+  justify-self: end;
+  text-align: right;
+}
+.agi-msg__who {
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--mute);
+}
+.agi-msg__body {
+  padding: 10px 12px;
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--line);
+  background: var(--bg-2);
+  color: var(--text);
+  text-align: left;
+}
+.agi-msg__body p {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.agi-msg--user .agi-msg__body {
+  background: var(--signal-soft);
+  border-color: color-mix(in srgb, var(--signal) 35%, transparent);
+}
+.agi-msg--error .agi-msg__body {
+  border-color: color-mix(in srgb, var(--bad) 45%, transparent);
+  background: var(--bad-soft);
+  color: var(--bad);
+}
+.agi-msg__thinking {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--mute);
+  font-size: 13px;
+}
+.agi-chat__composer {
+  display: grid;
+  gap: 8px;
+  padding: 10px 12px;
+  border-top: 1px solid var(--line);
+  background: var(--panel);
+}
+.agi-chat__row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.agi-chat__row .agi-input {
+  flex: 1;
+  min-width: 0;
+}
+.agi-chat__pending {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+}
+.agi-chat__file-error {
+  font-size: 12px;
+  color: var(--bad);
+}
+.agi-file {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 100%;
+  padding: 3px 8px;
+  border-radius: 999px;
+  border: 1px solid var(--line);
+  background: var(--panel-2);
+  color: var(--text-2);
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+.agi-file__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text);
+}
+.agi-file__size {
+  color: var(--mute);
+}
+.agi-file__remove {
+  border: 0;
+  background: none;
+  padding: 0 2px;
+  color: var(--mute);
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 1;
+}
+.agi-file__remove:hover {
+  color: var(--bad);
+}
+.agi-msg__files {
+  list-style: none;
+  margin: 8px 0 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.agi-chat__auth-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+/* ─── markdown in replies ─── */
+.agi-md {
+  display: grid;
+  gap: 8px;
+  word-break: break-word;
+}
+.agi-md p {
+  margin: 0;
+  white-space: normal;
+}
+.agi-md h3,
+.agi-md h4,
+.agi-md h5,
+.agi-md h6 {
+  margin: 4px 0 0;
+  font-family: var(--font-display);
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  line-height: 1.3;
+}
+.agi-md h3 {
+  font-size: 15.5px;
+}
+.agi-md h4 {
+  font-size: 14.5px;
+}
+.agi-md h5,
+.agi-md h6 {
+  font-size: 13.5px;
+}
+.agi-md ul,
+.agi-md ol {
+  margin: 0;
+  padding-left: 20px;
+  display: grid;
+  gap: 3px;
+}
+.agi-md a {
+  color: var(--signal);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.agi-md code {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  padding: 1px 5px;
+  border-radius: 4px;
+  background: var(--panel-3);
+  border: 1px solid var(--line);
+}
+.agi-md pre {
+  margin: 0;
+  padding: 10px 12px;
+  overflow-x: auto;
+  border-radius: var(--radius);
+  background: var(--panel-3);
+  border: 1px solid var(--line);
+}
+.agi-md pre code {
+  padding: 0;
+  border: 0;
+  background: none;
+  font-size: 12px;
+  line-height: 1.55;
+}
+.agi-md blockquote {
+  margin: 0;
+  padding: 2px 0 2px 12px;
+  border-left: 2px solid var(--line-2);
+  color: var(--text-2);
+  display: grid;
+  gap: 6px;
+}
+.agi-md hr {
+  border: 0;
+  border-top: 1px solid var(--line);
+  margin: 4px 0;
+}
+.agi-md__table {
+  overflow-x: auto;
+}
+.agi-md table {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: 12.5px;
+}
+.agi-md th,
+.agi-md td {
+  padding: 6px 8px;
+  border: 1px solid var(--line);
+  text-align: left;
+  vertical-align: top;
+}
+.agi-md th {
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--mute);
+  background: var(--panel-2);
+}
+.agi-chat__foot {
+  padding: 6px 12px;
+  border-top: 1px solid var(--line);
+  text-align: right;
+}
+.agi-chat__foot a {
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--mute);
+  text-decoration: none;
+}
+.agi-chat__foot a:hover {
+  color: var(--signal);
+}
+.agi-chat__state {
+  flex: 1;
+  display: grid;
+  align-content: center;
+  justify-items: start;
+  gap: 12px;
+  padding: 24px;
+}
+.agi-chat__state h3 {
+  margin: 0;
+  font-family: var(--font-display);
+  font-weight: 600;
+  font-size: 17px;
+  letter-spacing: -0.01em;
+}
+.agi-chat__state p {
+  margin: 0;
+  color: var(--text-2);
+}
+.agi-chat__auth .agi-field {
+  width: 100%;
+  max-width: 360px;
+}
+
+/* ─── structured replies ─── */
+.agi-sui {
+  display: grid;
+  gap: 12px;
+}
+.agi-sui__item {
+  display: grid;
+  gap: 10px;
+}
+.agi-sui__text {
+  margin: 0;
+  white-space: pre-wrap;
+}
+.agi-sui__figure {
+  margin: 0;
+}
+.agi-sui__figure img {
+  max-width: 100%;
+  border-radius: var(--radius-md);
+  display: block;
+}
+.agi-sui__figure figcaption {
+  font-size: 12.5px;
+  color: var(--mute);
+  margin-top: 4px;
+}
+.agi-sui__cards {
+  display: grid;
+  gap: 8px;
+}
+.agi-sui__card {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 10px;
+  padding: 10px;
+  background: var(--panel-2);
+}
+.agi-sui__card img {
+  width: 56px;
+  height: 56px;
+  border-radius: var(--radius-md);
+  object-fit: cover;
+}
+.agi-sui__card p {
+  margin: 4px 0 0;
+  color: var(--text-2);
+  font-size: 13.5px;
+}
+.agi-sui__card-title {
+  font-weight: 600;
+}
+.agi-sui__card-sub {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--mute);
+}
+.agi-sui__scroll {
+  overflow-x: auto;
+}
+.agi-sui__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.agi-sui__pie {
+  display: grid;
+  grid-template-columns: 96px 1fr;
+  gap: 12px;
+  align-items: center;
+}
+.agi-sui__pie svg {
+  width: 96px;
+  height: 96px;
+}
+.agi-sui__pie ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 4px;
+  font-size: 13px;
+}
+.agi-sui__pie li {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--text-2);
+}
+.agi-sui__pie li span {
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+  flex: none;
+}
+.agi-sui__pie li b {
+  margin-left: auto;
+  font-family: var(--font-mono);
+  font-weight: 500;
+  color: var(--text);
+}
+
+/* ─── bubble launcher ─── */
+.agi-bubble {
+  position: fixed;
+  bottom: 20px;
+  z-index: var(--z-toast);
+  display: grid;
+  gap: 10px;
+  justify-items: end;
+}
+.agi-bubble--right {
+  right: 20px;
+}
+.agi-bubble--left {
+  left: 20px;
+  justify-items: start;
+}
+.agi-bubble__launcher {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 48px;
+  padding: 0 18px 0 14px;
+  border-radius: var(--radius-full);
+  border: 1px solid var(--signal);
+  background: var(--signal);
+  color: var(--signal-ink);
+  font: inherit;
+  font-family: var(--font-body);
+  font-weight: 600;
+  font-size: 14px;
+  cursor: pointer;
+  box-shadow: var(--shadow-sm);
+  transition: transform var(--duration-fast) ease;
+}
+.agi-bubble__launcher:hover {
+  transform: translateY(-1px);
+}
+.agi-bubble__launcher--open {
+  width: 48px;
+  padding: 0;
+  justify-content: center;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .agi-spinner span {
+    animation: none;
+    opacity: 0.7;
+  }
+}
+
+/* ─── agent runner ─── */
+.agi-run {
+  display: grid;
+  gap: 14px;
+  padding: 16px;
+  font-size: 14.5px;
+}
+.agi-run__title {
+  margin: 0;
+  font-family: var(--font-display);
+  font-weight: 600;
+  font-size: 17px;
+  letter-spacing: -0.01em;
+}
+.agi-run__desc {
+  margin: 4px 0 0;
+  color: var(--text-2);
+}
+.agi-run__form {
+  display: grid;
+  gap: 12px;
+}
+.agi-run__actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.agi-run__status {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--mute);
+  font-size: 13px;
+}
+.agi-checkbox {
+  width: 16px;
+  height: 16px;
+  accent-color: var(--signal);
+}
+.agi-run__steps {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 4px;
+}
+.agi-run__step {
+  display: grid;
+  grid-template-columns: 10px 1fr auto;
+  gap: 8px;
+  align-items: center;
+  font-size: 13px;
+  color: var(--text-2);
+}
+.agi-run__step-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--line-2);
+}
+.agi-run__step.is-running .agi-run__step-dot {
+  background: var(--signal);
+  animation: agi-pulse 1.2s ease-in-out infinite;
+}
+.agi-run__step.is-done .agi-run__step-dot {
+  background: var(--ok);
+}
+.agi-run__step.is-error .agi-run__step-dot {
+  background: var(--bad);
+}
+.agi-run__step-meta {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--mute);
+}
+.agi-run__result {
+  display: grid;
+  gap: 8px;
+  padding: 12px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--line);
+  background: var(--bg-2);
+}
+.agi-run__text {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.agi-run__output {
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: 12.5px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--text-2);
+}
+.agi-run__error {
+  margin: 0;
+  color: var(--bad);
+}
+.agi-run__meta {
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  color: var(--mute);
+}
+.agi-run__meta b {
+  font-weight: 500;
+  color: var(--text-2);
+}
+
+/* ─── approval ─── */
+.agi-approval {
+  display: grid;
+  gap: 14px;
+  padding: 16px;
+  font-size: 14.5px;
+}
+.agi-approval__head {
+  display: grid;
+  gap: 4px;
+}
+.agi-approval__title {
+  margin: 0;
+  font-family: var(--font-display);
+  font-weight: 600;
+  font-size: 17px;
+  letter-spacing: -0.01em;
+}
+.agi-approval__desc {
+  margin: 0;
+  color: var(--text-2);
+}
+.agi-approval__meta {
+  margin: 2px 0 0;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  color: var(--mute);
+}
+.agi-approval__meta-value {
+  font-weight: 500;
+  color: var(--text-2);
+}
+.agi-approval__state {
+  display: grid;
+  gap: 10px;
+  justify-items: start;
+  color: var(--text-2);
+}
+.agi-approval__state p {
+  margin: 0;
+}
+.agi-approval__points {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.agi-approval__point {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--line);
+  background: transparent;
+  color: var(--text-2);
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+}
+.agi-approval__point.is-selected {
+  border-color: var(--signal);
+  color: var(--text);
+}
+.agi-approval__status {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.agi-approval__queue {
+  font-size: 13px;
+  color: var(--mute);
+}
+.agi-approval__output {
+  display: grid;
+  gap: 8px;
+  padding: 12px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--line);
+  background: var(--bg-2);
+}
+.agi-approval__output-label {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--mute);
+}
+.agi-approval__kv {
+  margin: 0;
+  display: grid;
+  gap: 6px;
+}
+.agi-approval__kv-row {
+  display: grid;
+  grid-template-columns: minmax(80px, 160px) 1fr;
+  gap: 10px;
+  align-items: start;
+}
+.agi-approval__kv dt {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--text-2);
+  word-break: break-word;
+}
+.agi-approval__kv dd {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-size: 13.5px;
+}
+.agi-approval__form {
+  display: grid;
+  gap: 12px;
+}
+.agi-approval__json {
+  font-family: var(--font-mono);
+  font-size: 12.5px;
+}
+.agi-approval__actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.agi-approval__error {
+  margin: 0;
+  color: var(--bad);
+}
+.agi-approval__done {
+  display: grid;
+  gap: 8px;
+  justify-items: start;
+  padding: 12px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--line);
+  background: var(--bg-2);
+}
+.agi-approval__done p {
+  margin: 0;
+  color: var(--text-2);
+}
+
+/* ─── observability ─── */
+.agi-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 12px;
+}
+.agi-stats__tile {
+  display: grid;
+  gap: 4px;
+  padding: 16px;
+}
+.agi-stat__v.is-ok {
+  color: var(--ok);
+}
+.agi-stat__v.is-warn {
+  color: var(--warn);
+}
+.agi-stat__v.is-bad {
+  color: var(--bad);
+}
+.agi-stats__delta {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-2);
+}
+
+.agi-heat {
+  display: grid;
+  gap: 6px;
+  font-size: 12.5px;
+}
+.agi-heat__table {
+  border-collapse: separate;
+  border-spacing: 3px;
+  width: 100%;
+  table-layout: fixed;
+}
+.agi-heat__label {
+  width: 140px;
+  color: var(--text-2);
+  font-weight: 400;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-right: 8px;
+}
+.agi-heat__col {
+  font-family: var(--font-mono);
+  font-size: 9.5px;
+  font-weight: 500;
+  letter-spacing: 0.06em;
+  color: var(--mute);
+  text-align: center;
+}
+.agi-heat__td {
+  padding: 0;
+}
+.agi-heat__cell {
+  display: block;
+  height: 18px;
+  border-radius: 3px;
+  background: var(--line);
+}
+.agi-heat__cell.is-ok {
+  background: var(--ok);
+}
+.agi-heat__cell.is-warn {
+  background: var(--warn);
+}
+.agi-heat__cell.is-bad {
+  background: var(--bad);
+}
+.agi-heat__cell.is-none {
+  background: var(--line);
+  opacity: 0.6;
+}
+.agi-heat__legend {
+  display: flex;
+  gap: 6px;
+}
+
+.agi-timeline {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 4px;
+}
+.agi-timeline__step {
+  display: grid;
+  grid-template-columns: 18px minmax(120px, 1fr) minmax(120px, 2fr) auto;
+  gap: 10px;
+  align-items: center;
+  padding: 6px 8px;
+  border-radius: var(--radius-md);
+  border: 1px solid transparent;
+  font-size: 13px;
+}
+.agi-timeline__step.is-running {
+  background: var(--signal-soft);
+  border-color: color-mix(in srgb, var(--signal) 40%, transparent);
+}
+.agi-timeline__step.is-waiting {
+  background: var(--warn-soft);
+  border-color: color-mix(in srgb, var(--warn) 45%, transparent);
+}
+.agi-timeline__step.is-error {
+  background: var(--bad-soft);
+  border-color: color-mix(in srgb, var(--bad) 45%, transparent);
+}
+.agi-timeline__glyph {
+  color: var(--mute);
+  text-align: center;
+}
+.agi-timeline__step.is-done .agi-timeline__glyph,
+.agi-timeline__step.k-verify .agi-timeline__glyph,
+.agi-timeline__step.k-write .agi-timeline__glyph {
+  color: var(--ok);
+}
+.agi-timeline__step.is-running .agi-timeline__glyph {
+  color: var(--signal);
+}
+.agi-timeline__step.is-waiting .agi-timeline__glyph,
+.agi-timeline__step.k-approval .agi-timeline__glyph {
+  color: var(--warn);
+}
+.agi-timeline__name {
+  color: var(--text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.agi-timeline__detail {
+  display: block;
+  color: var(--mute);
+  font-size: 11.5px;
+}
+.agi-timeline__bar {
+  position: relative;
+  height: 6px;
+  border-radius: 3px;
+  background: var(--line);
+}
+.agi-timeline__fill {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  border-radius: 3px;
+  background: var(--signal);
+}
+.agi-timeline__step.is-done .agi-timeline__fill {
+  background: var(--ok);
+}
+.agi-timeline__step.is-error .agi-timeline__fill {
+  background: var(--bad);
+}
+.agi-timeline__step.is-waiting .agi-timeline__fill {
+  background: var(--warn);
+}
+.agi-timeline__meta {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--mute);
+  white-space: nowrap;
+}
+
+.agi-bars {
+  display: grid;
+  gap: 8px;
+  font-size: 13px;
+}
+.agi-bars__row {
+  display: grid;
+  grid-template-columns: minmax(100px, 1fr) minmax(120px, 3fr) auto;
+  gap: 10px;
+  align-items: center;
+}
+.agi-bars__label {
+  color: var(--text-2);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.agi-bars__track {
+  height: 10px;
+  border-radius: 5px;
+  background: var(--line);
+  overflow: hidden;
+}
+.agi-bars__fill {
+  display: block;
+  height: 100%;
+  border-radius: 5px;
+}
+.agi-bars__value {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--text);
+  white-space: nowrap;
+  display: grid;
+  text-align: right;
+}
+.agi-bars__note {
+  font-size: 10.5px;
+  color: var(--mute);
+}