@wallarm-org/claude-design 0.0.0-stage → 4.8.0

package/dist/project/tokens.css

@@ -0,0 +1,1395 @@
+/* Wallarm Design System — generated from tokens.json */
+:root, [data-theme="light"] {
+  --animated-bg-accent-dot: var(--color-red-400);
+  --animated-bg-caught-dot: var(--color-green-500);
+  --animated-bg-dot: var(--color-slate-500);
+  --color-amber-100: #fef3c6;
+  --color-amber-200: #fee685;
+  --color-amber-300: #ffd230;
+  --color-amber-400: #ffb900;
+  --color-amber-50: #fffbeb;
+  --color-amber-500: #fe9a00;
+  --color-amber-600: #e17100;
+  --color-amber-700: #bb4d00;
+  --color-amber-800: #973c00;
+  --color-amber-900: #7b3306;
+  --color-amber-950: #461901;
+  --color-badge-amber-dark: var(--color-amber-800);
+  --color-badge-amber-light: var(--color-amber-100);
+  --color-badge-amber-strong: var(--color-amber-500);
+  --color-badge-badge-bg: var(--color-white);
+  --color-badge-blue-dark: var(--color-blue-800);
+  --color-badge-blue-light: var(--color-blue-100);
+  --color-badge-blue-strong: var(--color-blue-500);
+  --color-badge-cyan-dark: var(--color-cyan-800);
+  --color-badge-cyan-light: var(--color-cyan-100);
+  --color-badge-cyan-strong: var(--color-cyan-500);
+  --color-badge-emerald-dark: var(--color-emerald-800);
+  --color-badge-emerald-light: var(--color-emerald-100);
+  --color-badge-emerald-strong: var(--color-emerald-500);
+  --color-badge-fuchsia-dark: var(--color-fuchsia-800);
+  --color-badge-fuchsia-light: var(--color-fuchsia-100);
+  --color-badge-fuchsia-strong: var(--color-fuchsia-500);
+  --color-badge-gray-dark: var(--color-gray-700);
+  --color-badge-gray-dark-alt: var(--color-gray-500);
+  --color-badge-gray-light: var(--color-gray-100);
+  --color-badge-gray-strong: var(--color-gray-700);
+  --color-badge-green-dark: var(--color-green-800);
+  --color-badge-green-light: var(--color-green-100);
+  --color-badge-green-strong: var(--color-green-500);
+  --color-badge-indigo-dark: var(--color-indigo-800);
+  --color-badge-indigo-light: var(--color-indigo-100);
+  --color-badge-indigo-strong: var(--color-indigo-500);
+  --color-badge-label-primary: var(--color-slate-700);
+  --color-badge-lime-dark: var(--color-lime-800);
+  --color-badge-lime-light: var(--color-lime-100);
+  --color-badge-lime-strong: var(--color-lime-500);
+  --color-badge-neutral-dark: var(--color-neutral-700);
+  --color-badge-neutral-dark-alt: var(--color-neutral-500);
+  --color-badge-neutral-light: var(--color-neutral-100);
+  --color-badge-neutral-strong: var(--color-neutral-700);
+  --color-badge-on-solid: rgba(255, 255, 255, 0.95);
+  --color-badge-pink-dark: var(--color-pink-800);
+  --color-badge-pink-light: var(--color-pink-100);
+  --color-badge-pink-strong: var(--color-pink-500);
+  --color-badge-purple-dark: var(--color-purple-800);
+  --color-badge-purple-light: var(--color-purple-100);
+  --color-badge-purple-strong: var(--color-purple-500);
+  --color-badge-red-dark: var(--color-red-800);
+  --color-badge-red-light: var(--color-red-100);
+  --color-badge-red-strong: var(--color-red-500);
+  --color-badge-rose-dark: var(--color-rose-800);
+  --color-badge-rose-light: var(--color-rose-100);
+  --color-badge-rose-strong: var(--color-rose-500);
+  --color-badge-sky-dark: var(--color-sky-800);
+  --color-badge-sky-light: var(--color-sky-100);
+  --color-badge-sky-strong: var(--color-sky-500);
+  --color-badge-slate-dark: var(--color-slate-700);
+  --color-badge-slate-dark-alt: var(--color-slate-500);
+  --color-badge-slate-light: var(--color-slate-100);
+  --color-badge-slate-strong: var(--color-slate-700);
+  --color-badge-stone-dark: var(--color-stone-700);
+  --color-badge-stone-dark-alt: var(--color-stone-500);
+  --color-badge-stone-light: var(--color-stone-100);
+  --color-badge-stone-strong: var(--color-stone-700);
+  --color-badge-teal-dark: var(--color-teal-800);
+  --color-badge-teal-light: var(--color-teal-100);
+  --color-badge-teal-strong: var(--color-teal-500);
+  --color-badge-violet-dark: var(--color-violet-800);
+  --color-badge-violet-light: var(--color-violet-100);
+  --color-badge-violet-strong: var(--color-violet-500);
+  --color-badge-w-orange-dark: var(--color-w-orange-800);
+  --color-badge-w-orange-light: var(--color-w-orange-100);
+  --color-badge-w-orange-strong: var(--color-w-orange-500);
+  --color-badge-yellow-dark: var(--color-yellow-800);
+  --color-badge-yellow-light: var(--color-yellow-100);
+  --color-badge-yellow-strong: var(--color-yellow-500);
+  --color-badge-zinc-dark: var(--color-zinc-700);
+  --color-badge-zinc-dark-alt: var(--color-zinc-500);
+  --color-badge-zinc-light: var(--color-zinc-100);
+  --color-badge-zinc-strong: var(--color-zinc-700);
+  --color-bg-ai: var(--color-purple-100);
+  --color-bg-brand: var(--color-w-orange-100);
+  --color-bg-danger: var(--color-red-100);
+  --color-bg-fill-ai: var(--color-purple-600);
+  --color-bg-fill-brand: var(--color-w-orange-600);
+  --color-bg-fill-danger: var(--color-red-600);
+  --color-bg-fill-info: var(--color-blue-600);
+  --color-bg-fill-success: var(--color-green-600);
+  --color-bg-fill-warning: var(--color-amber-500);
+  --color-bg-info: var(--color-blue-100);
+  --color-bg-light-ai: var(--color-purple-50);
+  --color-bg-light-brand: var(--color-w-orange-50);
+  --color-bg-light-danger: var(--color-red-50);
+  --color-bg-light-info: var(--color-blue-50);
+  --color-bg-light-primary: var(--color-slate-50);
+  --color-bg-light-success: var(--color-green-50);
+  --color-bg-light-warning: var(--color-amber-50);
+  --color-bg-page-bg: var(--color-white);
+  --color-bg-primary: var(--color-slate-100);
+  --color-bg-strong-ai: var(--color-purple-300);
+  --color-bg-strong-brand: var(--color-w-orange-300);
+  --color-bg-strong-danger: var(--color-red-300);
+  --color-bg-strong-info: var(--color-blue-300);
+  --color-bg-strong-primary: var(--color-slate-300);
+  --color-bg-strong-success: var(--color-green-300);
+  --color-bg-strong-warning: var(--color-amber-100);
+  --color-bg-success: var(--color-green-100);
+  --color-bg-surface-1: var(--color-white);
+  --color-bg-surface-2: var(--color-white);
+  --color-bg-surface-3: var(--color-white);
+  --color-bg-surface-4: var(--color-white);
+  --color-bg-surface-5: var(--color-slate-100);
+  --color-bg-warning: var(--color-amber-100);
+  --color-black: #000000;
+  --color-blue-100: #dbeafe;
+  --color-blue-200: #bedbff;
+  --color-blue-300: #8ec5ff;
+  --color-blue-400: #51a2ff;
+  --color-blue-50: #eff6ff;
+  --color-blue-500: #2b7fff;
+  --color-blue-600: #155dfc;
+  --color-blue-700: #1447e6;
+  --color-blue-800: #193cb8;
+  --color-blue-900: #1c398e;
+  --color-blue-950: #162456;
+  --color-border-ai: var(--color-purple-300);
+  --color-border-brand: var(--color-w-orange-300);
+  --color-border-danger: var(--color-red-300);
+  --color-border-info: var(--color-blue-300);
+  --color-border-primary: var(--color-slate-300);
+  --color-border-primary-light: var(--color-slate-200);
+  --color-border-strong-ai: var(--color-purple-500);
+  --color-border-strong-brand: var(--color-w-orange-500);
+  --color-border-strong-danger: var(--color-red-600);
+  --color-border-strong-info: var(--color-blue-500);
+  --color-border-strong-primary: var(--color-slate-500);
+  --color-border-strong-success: var(--color-green-500);
+  --color-border-strong-warning: var(--color-amber-500);
+  --color-border-success: var(--color-green-300);
+  --color-border-warning: var(--color-amber-300);
+  --color-component-app-shell-ambient-dot: rgba(98, 116, 142, 0.28);
+  --color-component-app-shell-bg: var(--color-slate-100);
+  --color-component-app-shell-bg-branded: var(--color-w-orange-50);
+  --color-component-avatar-overlay: rgba(255, 255, 255, 0.8);
+  --color-component-border-hotkey: var(--color-slate-200);
+  --color-component-border-input-hover: var(--color-slate-400);
+  --color-component-code-snippet-bg: rgba(98, 116, 142, 0.06);
+  --color-component-dialog-overlay: rgba(255, 255, 255, 0.6);
+  --color-component-empty-state-medallion-bg-from: var(--color-white);
+  --color-component-empty-state-medallion-bg-to: rgba(241, 245, 249, 0.8);
+  --color-component-empty-state-medallion-border: rgba(202, 213, 226, 0.7);
+  --color-component-input-bg: var(--color-white);
+  --color-component-kbi-tooltip-bg: rgba(255, 255, 255, 0.2);
+  --color-component-logo-ic: var(--color-w-orange-600);
+  --color-component-logo-wordmark: var(--color-slate-950);
+  --color-component-logo-wordmark-alt: var(--color-white);
+  --color-component-outline-button-bg: var(--color-white);
+  --color-component-overlay: rgba(69, 85, 108, 0.6);
+  --color-component-switcher-bg: var(--color-slate-200);
+  --color-component-toast-bg: var(--color-slate-800);
+  --color-component-toast-ic-destructive: var(--color-red-400);
+  --color-component-toast-ic-info: var(--color-blue-400);
+  --color-component-toast-ic-success: var(--color-green-400);
+  --color-component-toast-ic-warning: var(--color-amber-400);
+  --color-component-tooltip-bg: rgba(2, 6, 24, 0.8);
+  --color-cyan-100: #cefafe;
+  --color-cyan-200: #a2f4fd;
+  --color-cyan-300: #53eafd;
+  --color-cyan-400: #00d3f3;
+  --color-cyan-50: #ecfeff;
+  --color-cyan-500: #00b8db;
+  --color-cyan-600: #0092b8;
+  --color-cyan-700: #007595;
+  --color-cyan-800: #005f78;
+  --color-cyan-900: #104e64;
+  --color-cyan-950: #053345;
+  --color-emerald-100: #d0fae5;
+  --color-emerald-200: #a4f4cf;
+  --color-emerald-300: #5ee9b5;
+  --color-emerald-400: #00d492;
+  --color-emerald-50: #ecfdf5;
+  --color-emerald-500: #00bc7d;
+  --color-emerald-600: #009966;
+  --color-emerald-700: #007a55;
+  --color-emerald-800: #006045;
+  --color-emerald-900: #004f3b;
+  --color-emerald-950: #002c22;
+  --color-focus-brand: rgba(255, 68, 28, 0.3);
+  --color-focus-destructive: rgba(231, 0, 11, 0.2);
+  --color-focus-destructive-hover: rgba(231, 0, 11, 0.3);
+  --color-focus-primary: rgba(144, 161, 185, 0.3);
+  --color-focus-ring-primary: rgba(144, 161, 185, 0.3);
+  --color-fuchsia-100: #fae8ff;
+  --color-fuchsia-200: #f6cfff;
+  --color-fuchsia-300: #f4a8ff;
+  --color-fuchsia-400: #ed6aff;
+  --color-fuchsia-50: #fdf4ff;
+  --color-fuchsia-500: #e12afb;
+  --color-fuchsia-600: #c800de;
+  --color-fuchsia-700: #a800b7;
+  --color-fuchsia-800: #8a0194;
+  --color-fuchsia-900: #721378;
+  --color-fuchsia-950: #4b004f;
+  --color-gray-100: #f3f4f6;
+  --color-gray-200: #e5e7eb;
+  --color-gray-300: #d1d5dc;
+  --color-gray-400: #99a1af;
+  --color-gray-50: #f9fafb;
+  --color-gray-500: #6a7282;
+  --color-gray-600: #4a5565;
+  --color-gray-700: #364153;
+  --color-gray-800: #1e2939;
+  --color-gray-900: #101828;
+  --color-gray-950: #030712;
+  --color-green-100: #dcfce7;
+  --color-green-200: #b9f8cf;
+  --color-green-300: #7bf1a8;
+  --color-green-400: #05df72;
+  --color-green-50: #f0fdf4;
+  --color-green-500: #00c950;
+  --color-green-600: #00a63e;
+  --color-green-700: #008236;
+  --color-green-800: #016630;
+  --color-green-900: #0d542b;
+  --color-green-950: #032e15;
+  --color-icon-ai: var(--color-purple-600);
+  --color-icon-brand: var(--color-w-orange-600);
+  --color-icon-danger: var(--color-red-600);
+  --color-icon-info: var(--color-blue-600);
+  --color-icon-primary: var(--color-slate-900);
+  --color-icon-primary-alt: var(--color-white);
+  --color-icon-primary-alt-disable: rgba(255, 255, 255, 0.4);
+  --color-icon-primary-alt-fixed: var(--color-white);
+  --color-icon-primary-disable: rgba(15, 23, 43, 0.4);
+  --color-icon-primary-fixed: var(--color-slate-900);
+  --color-icon-secondary: var(--color-slate-600);
+  --color-icon-secondary-alt: rgba(255, 255, 255, 0.8);
+  --color-icon-success: var(--color-green-600);
+  --color-icon-warning: var(--color-amber-600);
+  --color-indigo-100: #e0e7ff;
+  --color-indigo-200: #c6d2ff;
+  --color-indigo-300: #a3b3ff;
+  --color-indigo-400: #7c86ff;
+  --color-indigo-50: #eef2ff;
+  --color-indigo-500: #615fff;
+  --color-indigo-600: #4f39f6;
+  --color-indigo-700: #432dd7;
+  --color-indigo-800: #372aac;
+  --color-indigo-900: #312c85;
+  --color-indigo-950: #1e1a4d;
+  --color-lime-100: #ecfcca;
+  --color-lime-200: #d8f999;
+  --color-lime-300: #bbf451;
+  --color-lime-400: #9ae600;
+  --color-lime-50: #f7fee7;
+  --color-lime-500: #7ccf00;
+  --color-lime-600: #5ea500;
+  --color-lime-700: #497d00;
+  --color-lime-800: #3c6300;
+  --color-lime-900: #35530e;
+  --color-lime-950: #192e03;
+  --color-neutral-100: #f5f5f5;
+  --color-neutral-200: #e5e5e5;
+  --color-neutral-300: #d4d4d4;
+  --color-neutral-400: #a1a1a1;
+  --color-neutral-50: #fafafa;
+  --color-neutral-500: #737373;
+  --color-neutral-600: #525252;
+  --color-neutral-700: #404040;
+  --color-neutral-800: #262626;
+  --color-neutral-900: #171717;
+  --color-neutral-950: #0a0a0a;
+  --color-orange-100: #ffedd4;
+  --color-orange-200: #ffd6a8;
+  --color-orange-300: #ffb86a;
+  --color-orange-400: #ff8904;
+  --color-orange-50: #fff7ed;
+  --color-orange-500: #ff6900;
+  --color-orange-600: #f54900;
+  --color-orange-700: #ca3500;
+  --color-orange-800: #9f2d00;
+  --color-orange-900: #7e2a0c;
+  --color-orange-950: #441306;
+  --color-pink-100: #fce7f3;
+  --color-pink-200: #fccee8;
+  --color-pink-300: #fda5d5;
+  --color-pink-400: #fb64b6;
+  --color-pink-50: #fdf2f8;
+  --color-pink-500: #f6339a;
+  --color-pink-600: #e60076;
+  --color-pink-700: #c6005c;
+  --color-pink-800: #a3004c;
+  --color-pink-900: #861043;
+  --color-pink-950: #510424;
+  --color-purple-100: #f3e8ff;
+  --color-purple-200: #e9d4ff;
+  --color-purple-300: #dab2ff;
+  --color-purple-400: #c27aff;
+  --color-purple-50: #faf5ff;
+  --color-purple-500: #ad46ff;
+  --color-purple-600: #9810fa;
+  --color-purple-700: #8200db;
+  --color-purple-800: #6e11b0;
+  --color-purple-900: #59168b;
+  --color-purple-950: #3c0366;
+  --color-red-100: #ffe2e2;
+  --color-red-200: #ffc9c9;
+  --color-red-300: #ffa2a2;
+  --color-red-400: #ff6467;
+  --color-red-50: #fef2f2;
+  --color-red-500: #fb2c36;
+  --color-red-600: #e7000b;
+  --color-red-700: #c10007;
+  --color-red-800: #9f0712;
+  --color-red-900: #82181a;
+  --color-red-950: #460809;
+  --color-rose-100: #ffe4e6;
+  --color-rose-200: #ffccd3;
+  --color-rose-300: #ffa1ad;
+  --color-rose-400: #ff637e;
+  --color-rose-50: #fff1f2;
+  --color-rose-500: #ff2056;
+  --color-rose-600: #ec003f;
+  --color-rose-700: #c70036;
+  --color-rose-800: #a50036;
+  --color-rose-900: #8b0836;
+  --color-rose-950: #4d0218;
+  --color-sky-100: #dff2fe;
+  --color-sky-200: #b8e6fe;
+  --color-sky-300: #74d4ff;
+  --color-sky-400: #00bcff;
+  --color-sky-50: #f0f9ff;
+  --color-sky-500: #00a6f4;
+  --color-sky-600: #0084d1;
+  --color-sky-700: #0069a8;
+  --color-sky-800: #00598a;
+  --color-sky-900: #024a70;
+  --color-sky-950: #052f4a;
+  --color-slate-100: #f1f5f9;
+  --color-slate-200: #e2e8f0;
+  --color-slate-300: #cad5e2;
+  --color-slate-400: #90a1b9;
+  --color-slate-50: #f8fafc;
+  --color-slate-500: #62748e;
+  --color-slate-600: #45556c;
+  --color-slate-700: #314158;
+  --color-slate-800: #1d293d;
+  --color-slate-900: #0f172b;
+  --color-slate-950: #020618;
+  --color-slate-975: #010413;
+  --color-states-ai-active: rgba(173, 70, 255, 0.12);
+  --color-states-ai-default-alt: rgba(173, 70, 255, 0.06);
+  --color-states-ai-hover: rgba(173, 70, 255, 0.08);
+  --color-states-ai-pressed: rgba(173, 70, 255, 0.16);
+  --color-states-brand-active: rgba(255, 102, 51, 0.12);
+  --color-states-brand-default-alt: rgba(255, 102, 51, 0.06);
+  --color-states-brand-hover: rgba(255, 102, 51, 0.08);
+  --color-states-brand-pressed: rgba(255, 102, 51, 0.16);
+  --color-states-danger-active: rgba(251, 44, 54, 0.12);
+  --color-states-danger-default-alt: rgba(251, 44, 54, 0.06);
+  --color-states-danger-hover: rgba(251, 44, 54, 0.08);
+  --color-states-danger-pressed: rgba(251, 44, 54, 0.16);
+  --color-states-default-all: rgba(255, 255, 255, 0);
+  --color-states-info-active: rgba(43, 127, 255, 0.12);
+  --color-states-info-default-alt: rgba(43, 127, 255, 0.06);
+  --color-states-info-hover: rgba(43, 127, 255, 0.08);
+  --color-states-info-pressed: rgba(43, 127, 255, 0.16);
+  --color-states-on-fill-disabled: rgba(255, 255, 255, 0.4);
+  --color-states-on-fill-hover: rgba(255, 255, 255, 0.1);
+  --color-states-on-fill-pressed: rgba(255, 255, 255, 0.4);
+  --color-states-primary-active: rgba(98, 116, 142, 0.1);
+  --color-states-primary-alt-active: rgba(255, 255, 255, 0.12);
+  --color-states-primary-alt-default-alt: rgba(255, 255, 255, 0.06);
+  --color-states-primary-alt-hover: rgba(255, 255, 255, 0.08);
+  --color-states-primary-alt-pressed: rgba(255, 255, 255, 0.16);
+  --color-states-primary-default-alt: rgba(98, 116, 142, 0.06);
+  --color-states-primary-hover: rgba(98, 116, 142, 0.08);
+  --color-states-primary-pressed: rgba(98, 116, 142, 0.16);
+  --color-states-success-active: rgba(0, 201, 80, 0.12);
+  --color-states-success-default-alt: rgba(0, 201, 80, 0.06);
+  --color-states-success-hover: rgba(0, 201, 80, 0.08);
+  --color-states-success-pressed: rgba(0, 201, 80, 0.16);
+  --color-states-warning-active: rgba(254, 154, 0, 0.12);
+  --color-states-warning-default-alt: rgba(254, 154, 0, 0.06);
+  --color-states-warning-hover: rgba(254, 154, 0, 0.08);
+  --color-states-warning-pressed: rgba(254, 154, 0, 0.16);
+  --color-stone-100: #f5f5f4;
+  --color-stone-200: #e7e5e4;
+  --color-stone-300: #d6d3d1;
+  --color-stone-400: #a6a09b;
+  --color-stone-50: #fafaf9;
+  --color-stone-500: #79716b;
+  --color-stone-600: #57534d;
+  --color-stone-700: #44403b;
+  --color-stone-800: #292524;
+  --color-stone-900: #1c1917;
+  --color-stone-950: #0c0a09;
+  --color-syntax-attr-name: var(--color-syntax-attribute);
+  --color-syntax-attr-value: var(--color-syntax-string);
+  --color-syntax-attribute: var(--color-amber-700);
+  --color-syntax-boolean: var(--color-syntax-keyword);
+  --color-syntax-builtin: var(--color-syntax-keyword);
+  --color-syntax-class-name: var(--color-syntax-type);
+  --color-syntax-comment: var(--color-slate-400);
+  --color-syntax-constant: var(--color-syntax-keyword);
+  --color-syntax-function: var(--color-blue-600);
+  --color-syntax-highlight-ai-code: var(--color-purple-600);
+  --color-syntax-highlight-ai-highlight: rgba(173, 70, 255, 0.06);
+  --color-syntax-highlight-ai-indicator: var(--color-purple-600);
+  --color-syntax-highlight-brand-code: var(--color-w-orange-600);
+  --color-syntax-highlight-brand-highlight: rgba(255, 102, 51, 0.06);
+  --color-syntax-highlight-brand-indicator: var(--color-w-orange-600);
+  --color-syntax-highlight-error-code: var(--color-red-600);
+  --color-syntax-highlight-error-highlight: rgba(251, 44, 54, 0.06);
+  --color-syntax-highlight-error-indicator: var(--color-red-600);
+  --color-syntax-highlight-info-code: var(--color-blue-600);
+  --color-syntax-highlight-info-highlight: rgba(43, 127, 255, 0.06);
+  --color-syntax-highlight-info-indicator: var(--color-blue-600);
+  --color-syntax-highlight-neutral-code: var(--color-slate-900);
+  --color-syntax-highlight-neutral-highlight: rgba(98, 116, 142, 0.06);
+  --color-syntax-highlight-neutral-indicator: var(--color-slate-600);
+  --color-syntax-highlight-selected-code: var(--color-white);
+  --color-syntax-highlight-selected-highlight: var(--color-slate-950);
+  --color-syntax-highlight-success-code: var(--color-green-600);
+  --color-syntax-highlight-success-highlight: rgba(0, 201, 80, 0.06);
+  --color-syntax-highlight-success-indicator: var(--color-green-600);
+  --color-syntax-highlight-warning-code: var(--color-amber-700);
+  --color-syntax-highlight-warning-highlight: rgba(254, 154, 0, 0.06);
+  --color-syntax-highlight-warning-indicator: var(--color-amber-600);
+  --color-syntax-keyword: var(--color-purple-600);
+  --color-syntax-no-syntax: var(--color-slate-900);
+  --color-syntax-number: var(--color-syntax-number-boolean);
+  --color-syntax-number-boolean: var(--color-amber-700);
+  --color-syntax-operator: var(--color-slate-700);
+  --color-syntax-property: var(--color-syntax-variable);
+  --color-syntax-punctuation: var(--color-syntax-operator);
+  --color-syntax-regex: var(--color-syntax-string);
+  --color-syntax-string: var(--color-green-600);
+  --color-syntax-tag: var(--color-red-600);
+  --color-syntax-type: var(--color-yellow-700);
+  --color-syntax-variable: var(--color-red-600);
+  --color-teal-100: #cbfbf1;
+  --color-teal-200: #96f7e4;
+  --color-teal-300: #46ecd5;
+  --color-teal-400: #00d5be;
+  --color-teal-50: #f0fdfa;
+  --color-teal-500: #00bba7;
+  --color-teal-600: #009689;
+  --color-teal-700: #00786f;
+  --color-teal-800: #005f5a;
+  --color-teal-900: #0b4f4a;
+  --color-teal-950: #022f2e;
+  --color-text-ai: var(--color-purple-600);
+  --color-text-brand: var(--color-w-orange-600);
+  --color-text-danger: var(--color-red-600);
+  --color-text-disable-ai: var(--color-purple-200);
+  --color-text-disable-brand: var(--color-w-orange-200);
+  --color-text-disable-danger: var(--color-red-200);
+  --color-text-disable-info: var(--color-blue-200);
+  --color-text-disable-primary: rgba(15, 23, 43, 0.4);
+  --color-text-disable-primary-alt: rgba(255, 255, 255, 0.4);
+  --color-text-disable-succes: var(--color-green-200);
+  --color-text-disable-warning: var(--color-amber-300);
+  --color-text-hint: var(--color-slate-300);
+  --color-text-info: var(--color-blue-600);
+  --color-text-link-default: var(--color-blue-600);
+  --color-text-link-default-alt: var(--color-blue-300);
+  --color-text-link-hover: var(--color-blue-800);
+  --color-text-link-hover-alt: var(--color-blue-200);
+  --color-text-primary: var(--color-slate-900);
+  --color-text-primary-alt: var(--color-white);
+  --color-text-primary-alt-fixed: var(--color-white);
+  --color-text-primary-fixed: var(--color-slate-900);
+  --color-text-secondary: var(--color-slate-600);
+  --color-text-secondary-alt: rgba(255, 255, 255, 0.8);
+  --color-text-success: var(--color-green-600);
+  --color-text-tertiary: var(--color-slate-300);
+  --color-text-tertiary-alt: rgba(255, 255, 255, 0.7);
+  --color-text-warning: var(--color-amber-700);
+  --color-violet-100: #ede9fe;
+  --color-violet-200: #ddd6ff;
+  --color-violet-300: #c4b4ff;
+  --color-violet-400: #a684ff;
+  --color-violet-50: #f5f3ff;
+  --color-violet-500: #8e51ff;
+  --color-violet-600: #7f22fe;
+  --color-violet-700: #7008e7;
+  --color-violet-800: #5d0ec0;
+  --color-violet-900: #4d179a;
+  --color-violet-950: #2f0d68;
+  --color-w-orange-100: #ffe1d0;
+  --color-w-orange-200: #ffc8ac;
+  --color-w-orange-300: #ffa985;
+  --color-w-orange-400: #ff8a52;
+  --color-w-orange-50: #fff5ed;
+  --color-w-orange-500: #ff6633;
+  --color-w-orange-600: #ff441c;
+  --color-w-orange-700: #e12f0c;
+  --color-w-orange-800: #b82005;
+  --color-w-orange-900: #911908;
+  --color-w-orange-950: #560e06;
+  --color-white: #ffffff;
+  --color-yellow-100: #fef9c2;
+  --color-yellow-200: #fff085;
+  --color-yellow-300: #ffdf20;
+  --color-yellow-400: #fdc700;
+  --color-yellow-50: #fefce8;
+  --color-yellow-500: #f0b100;
+  --color-yellow-600: #d08700;
+  --color-yellow-700: #a65f00;
+  --color-yellow-800: #894b00;
+  --color-yellow-900: #733e0a;
+  --color-yellow-950: #432004;
+  --color-zinc-100: #f4f4f5;
+  --color-zinc-200: #e4e4e7;
+  --color-zinc-300: #d4d4d8;
+  --color-zinc-400: #9f9fa9;
+  --color-zinc-50: #fafafa;
+  --color-zinc-500: #71717b;
+  --color-zinc-600: #52525c;
+  --color-zinc-700: #3f3f47;
+  --color-zinc-800: #27272a;
+  --color-zinc-900: #18181b;
+  --color-zinc-950: #09090b;
+  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --shadow-2xs: 0 1px 0 0 rgba(0, 0, 0, 0.05);
+  --shadow-empty-state-medallion: inset 0 1px 0 0 rgba(255, 255, 255, 0.45), inset 0 -1px 1px 0 rgba(15, 23, 43, 0.04), inset 0 0 0 1px rgba(202, 213, 226, 0.7), 0 2px 2.5px 0 rgba(15, 23, 43, 0.03), 0 1px 1px 0 rgba(15, 23, 43, 0.05);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
+  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+[data-theme="dark"] {
+  --animated-bg-accent-dot: var(--color-red-400);
+  --animated-bg-caught-dot: var(--color-green-300);
+  --animated-bg-dot: var(--color-slate-500);
+  --color-amber-100: #fef3c6;
+  --color-amber-200: #fee685;
+  --color-amber-300: #ffd230;
+  --color-amber-400: #ffb900;
+  --color-amber-50: #fffbeb;
+  --color-amber-500: #fe9a00;
+  --color-amber-600: #e17100;
+  --color-amber-700: #bb4d00;
+  --color-amber-800: #973c00;
+  --color-amber-900: #7b3306;
+  --color-amber-950: #461901;
+  --color-badge-amber-dark: var(--color-amber-300);
+  --color-badge-amber-light: var(--color-amber-950);
+  --color-badge-amber-strong: var(--color-amber-400);
+  --color-badge-badge-bg: var(--color-slate-900);
+  --color-badge-blue-dark: var(--color-blue-300);
+  --color-badge-blue-light: var(--color-blue-950);
+  --color-badge-blue-strong: var(--color-blue-400);
+  --color-badge-cyan-dark: var(--color-cyan-300);
+  --color-badge-cyan-light: var(--color-cyan-950);
+  --color-badge-cyan-strong: var(--color-cyan-400);
+  --color-badge-emerald-dark: var(--color-emerald-300);
+  --color-badge-emerald-light: var(--color-emerald-950);
+  --color-badge-emerald-strong: var(--color-emerald-400);
+  --color-badge-fuchsia-dark: var(--color-fuchsia-300);
+  --color-badge-fuchsia-light: var(--color-fuchsia-950);
+  --color-badge-fuchsia-strong: var(--color-fuchsia-400);
+  --color-badge-gray-dark: var(--color-gray-300);
+  --color-badge-gray-dark-alt: var(--color-gray-400);
+  --color-badge-gray-light: var(--color-gray-900);
+  --color-badge-gray-strong: var(--color-gray-500);
+  --color-badge-green-dark: var(--color-green-300);
+  --color-badge-green-light: var(--color-green-950);
+  --color-badge-green-strong: var(--color-green-400);
+  --color-badge-indigo-dark: var(--color-indigo-300);
+  --color-badge-indigo-light: var(--color-indigo-950);
+  --color-badge-indigo-strong: var(--color-indigo-400);
+  --color-badge-label-primary: var(--color-slate-200);
+  --color-badge-lime-dark: var(--color-lime-300);
+  --color-badge-lime-light: var(--color-lime-950);
+  --color-badge-lime-strong: var(--color-lime-400);
+  --color-badge-neutral-dark: var(--color-neutral-300);
+  --color-badge-neutral-dark-alt: var(--color-neutral-400);
+  --color-badge-neutral-light: var(--color-neutral-900);
+  --color-badge-neutral-strong: var(--color-neutral-500);
+  --color-badge-on-solid: rgba(255, 255, 255, 0.95);
+  --color-badge-pink-dark: var(--color-pink-300);
+  --color-badge-pink-light: var(--color-pink-950);
+  --color-badge-pink-strong: var(--color-pink-400);
+  --color-badge-purple-dark: var(--color-purple-300);
+  --color-badge-purple-light: var(--color-purple-950);
+  --color-badge-purple-strong: var(--color-purple-400);
+  --color-badge-red-dark: var(--color-red-300);
+  --color-badge-red-light: var(--color-red-950);
+  --color-badge-red-strong: var(--color-red-400);
+  --color-badge-rose-dark: var(--color-rose-300);
+  --color-badge-rose-light: var(--color-rose-900);
+  --color-badge-rose-strong: var(--color-rose-400);
+  --color-badge-sky-dark: var(--color-sky-300);
+  --color-badge-sky-light: var(--color-sky-950);
+  --color-badge-sky-strong: var(--color-sky-400);
+  --color-badge-slate-dark: var(--color-slate-300);
+  --color-badge-slate-dark-alt: var(--color-slate-400);
+  --color-badge-slate-light: var(--color-slate-800);
+  --color-badge-slate-strong: var(--color-slate-500);
+  --color-badge-stone-dark: var(--color-stone-300);
+  --color-badge-stone-dark-alt: var(--color-stone-400);
+  --color-badge-stone-light: var(--color-stone-900);
+  --color-badge-stone-strong: var(--color-stone-500);
+  --color-badge-teal-dark: var(--color-teal-300);
+  --color-badge-teal-light: var(--color-teal-950);
+  --color-badge-teal-strong: var(--color-teal-400);
+  --color-badge-violet-dark: var(--color-violet-300);
+  --color-badge-violet-light: var(--color-violet-950);
+  --color-badge-violet-strong: var(--color-violet-400);
+  --color-badge-w-orange-dark: var(--color-w-orange-300);
+  --color-badge-w-orange-light: var(--color-w-orange-950);
+  --color-badge-w-orange-strong: var(--color-w-orange-400);
+  --color-badge-yellow-dark: var(--color-yellow-300);
+  --color-badge-yellow-light: var(--color-yellow-950);
+  --color-badge-yellow-strong: var(--color-yellow-400);
+  --color-badge-zinc-dark: var(--color-zinc-300);
+  --color-badge-zinc-dark-alt: var(--color-zinc-400);
+  --color-badge-zinc-light: var(--color-zinc-900);
+  --color-badge-zinc-strong: var(--color-zinc-500);
+  --color-bg-ai: #1a0f38;
+  --color-bg-brand: #25131c;
+  --color-bg-danger: #220516;
+  --color-bg-fill-ai: var(--color-purple-400);
+  --color-bg-fill-brand: var(--color-w-orange-400);
+  --color-bg-fill-danger: var(--color-red-400);
+  --color-bg-fill-info: var(--color-blue-400);
+  --color-bg-fill-success: var(--color-green-400);
+  --color-bg-fill-warning: var(--color-amber-400);
+  --color-bg-info: #081738;
+  --color-bg-light-ai: #100b2a;
+  --color-bg-light-brand: #160e1a;
+  --color-bg-light-danger: #140617;
+  --color-bg-light-info: #05102a;
+  --color-bg-light-primary: #1b1f30;
+  --color-bg-light-success: #02161c;
+  --color-bg-light-warning: #161216;
+  --color-bg-page-bg: var(--color-slate-950);
+  --color-bg-primary: #262a3b;
+  --color-bg-strong-ai: #28144b;
+  --color-bg-strong-brand: #3a1b1e;
+  --color-bg-strong-danger: #340515;
+  --color-bg-strong-info: #0b214b;
+  --color-bg-strong-primary: #333848;
+  --color-bg-strong-success: #023124;
+  --color-bg-strong-warning: #392713;
+  --color-bg-success: #022120;
+  --color-bg-surface-1: #0d1123;
+  --color-bg-surface-2: #141829;
+  --color-bg-surface-3: #1b1f30;
+  --color-bg-surface-4: #1f2334;
+  --color-bg-surface-5: #262a3b;
+  --color-bg-warning: #251b15;
+  --color-black: #000000;
+  --color-blue-100: #dbeafe;
+  --color-blue-200: #bedbff;
+  --color-blue-300: #8ec5ff;
+  --color-blue-400: #51a2ff;
+  --color-blue-50: #eff6ff;
+  --color-blue-500: #2b7fff;
+  --color-blue-600: #155dfc;
+  --color-blue-700: #1447e6;
+  --color-blue-800: #193cb8;
+  --color-blue-900: #1c398e;
+  --color-blue-950: #162456;
+  --color-border-ai: var(--color-purple-700);
+  --color-border-brand: var(--color-w-orange-700);
+  --color-border-danger: var(--color-red-700);
+  --color-border-info: var(--color-blue-700);
+  --color-border-primary: var(--color-slate-600);
+  --color-border-primary-light: var(--color-slate-700);
+  --color-border-strong-ai: var(--color-purple-500);
+  --color-border-strong-brand: var(--color-w-orange-600);
+  --color-border-strong-danger: var(--color-red-500);
+  --color-border-strong-info: var(--color-blue-500);
+  --color-border-strong-primary: var(--color-slate-400);
+  --color-border-strong-success: var(--color-green-500);
+  --color-border-strong-warning: var(--color-amber-600);
+  --color-border-success: var(--color-green-700);
+  --color-border-warning: var(--color-amber-700);
+  --color-component-app-shell-ambient-dot: rgba(248, 250, 252, 0.15);
+  --color-component-app-shell-bg: var(--color-slate-975);
+  --color-component-app-shell-bg-branded: #160e1a;
+  --color-component-avatar-overlay: rgba(2, 6, 24, 0.8);
+  --color-component-border-hotkey: var(--color-slate-700);
+  --color-component-border-input-hover: var(--color-slate-500);
+  --color-component-code-snippet-bg: rgba(202, 213, 226, 0.12);
+  --color-component-dialog-overlay: rgba(2, 6, 24, 0.6);
+  --color-component-empty-state-medallion-bg-from: rgba(255, 255, 255, 0.07);
+  --color-component-empty-state-medallion-bg-to: rgba(255, 255, 255, 0.02);
+  --color-component-empty-state-medallion-border: rgba(255, 255, 255, 0.13);
+  --color-component-input-bg: rgba(226, 232, 240, 0.05);
+  --color-component-kbi-tooltip-bg: rgba(2, 6, 24, 0.2);
+  --color-component-logo-ic: var(--color-w-orange-600);
+  --color-component-logo-wordmark: var(--color-white);
+  --color-component-logo-wordmark-alt: var(--color-slate-950);
+  --color-component-outline-button-bg: rgba(226, 232, 240, 0.05);
+  --color-component-overlay: rgba(2, 6, 24, 0.6);
+  --color-component-switcher-bg: rgba(248, 250, 252, 0.3);
+  --color-component-toast-bg: var(--color-slate-100);
+  --color-component-toast-ic-destructive: var(--color-red-600);
+  --color-component-toast-ic-info: var(--color-blue-600);
+  --color-component-toast-ic-success: var(--color-green-600);
+  --color-component-toast-ic-warning: var(--color-amber-600);
+  --color-component-tooltip-bg: rgba(241, 245, 249, 0.93);
+  --color-cyan-100: #cefafe;
+  --color-cyan-200: #a2f4fd;
+  --color-cyan-300: #53eafd;
+  --color-cyan-400: #00d3f3;
+  --color-cyan-50: #ecfeff;
+  --color-cyan-500: #00b8db;
+  --color-cyan-600: #0092b8;
+  --color-cyan-700: #007595;
+  --color-cyan-800: #005f78;
+  --color-cyan-900: #104e64;
+  --color-cyan-950: #053345;
+  --color-emerald-100: #d0fae5;
+  --color-emerald-200: #a4f4cf;
+  --color-emerald-300: #5ee9b5;
+  --color-emerald-400: #00d492;
+  --color-emerald-50: #ecfdf5;
+  --color-emerald-500: #00bc7d;
+  --color-emerald-600: #009966;
+  --color-emerald-700: #007a55;
+  --color-emerald-800: #006045;
+  --color-emerald-900: #004f3b;
+  --color-emerald-950: #002c22;
+  --color-focus-brand: rgba(255, 68, 28, 0.3);
+  --color-focus-destructive: rgba(231, 0, 11, 0.2);
+  --color-focus-destructive-hover: rgba(231, 0, 11, 0.3);
+  --color-focus-primary: rgba(144, 161, 185, 0.3);
+  --color-focus-ring-primary: rgba(144, 161, 185, 0.3);
+  --color-fuchsia-100: #fae8ff;
+  --color-fuchsia-200: #f6cfff;
+  --color-fuchsia-300: #f4a8ff;
+  --color-fuchsia-400: #ed6aff;
+  --color-fuchsia-50: #fdf4ff;
+  --color-fuchsia-500: #e12afb;
+  --color-fuchsia-600: #c800de;
+  --color-fuchsia-700: #a800b7;
+  --color-fuchsia-800: #8a0194;
+  --color-fuchsia-900: #721378;
+  --color-fuchsia-950: #4b004f;
+  --color-gray-100: #f3f4f6;
+  --color-gray-200: #e5e7eb;
+  --color-gray-300: #d1d5dc;
+  --color-gray-400: #99a1af;
+  --color-gray-50: #f9fafb;
+  --color-gray-500: #6a7282;
+  --color-gray-600: #4a5565;
+  --color-gray-700: #364153;
+  --color-gray-800: #1e2939;
+  --color-gray-900: #101828;
+  --color-gray-950: #030712;
+  --color-green-100: #dcfce7;
+  --color-green-200: #b9f8cf;
+  --color-green-300: #7bf1a8;
+  --color-green-400: #05df72;
+  --color-green-50: #f0fdf4;
+  --color-green-500: #00c950;
+  --color-green-600: #00a63e;
+  --color-green-700: #008236;
+  --color-green-800: #016630;
+  --color-green-900: #0d542b;
+  --color-green-950: #032e15;
+  --color-icon-ai: var(--color-purple-300);
+  --color-icon-brand: var(--color-w-orange-300);
+  --color-icon-danger: var(--color-red-300);
+  --color-icon-info: var(--color-blue-300);
+  --color-icon-primary: var(--color-slate-50);
+  --color-icon-primary-alt: var(--color-slate-900);
+  --color-icon-primary-alt-disable: rgba(15, 23, 43, 0.4);
+  --color-icon-primary-alt-fixed: var(--color-white);
+  --color-icon-primary-disable: rgba(248, 250, 252, 0.4);
+  --color-icon-primary-fixed: var(--color-slate-900);
+  --color-icon-secondary: rgba(248, 250, 252, 0.8);
+  --color-icon-secondary-alt: var(--color-slate-500);
+  --color-icon-success: var(--color-green-300);
+  --color-icon-warning: var(--color-amber-300);
+  --color-indigo-100: #e0e7ff;
+  --color-indigo-200: #c6d2ff;
+  --color-indigo-300: #a3b3ff;
+  --color-indigo-400: #7c86ff;
+  --color-indigo-50: #eef2ff;
+  --color-indigo-500: #615fff;
+  --color-indigo-600: #4f39f6;
+  --color-indigo-700: #432dd7;
+  --color-indigo-800: #372aac;
+  --color-indigo-900: #312c85;
+  --color-indigo-950: #1e1a4d;
+  --color-lime-100: #ecfcca;
+  --color-lime-200: #d8f999;
+  --color-lime-300: #bbf451;
+  --color-lime-400: #9ae600;
+  --color-lime-50: #f7fee7;
+  --color-lime-500: #7ccf00;
+  --color-lime-600: #5ea500;
+  --color-lime-700: #497d00;
+  --color-lime-800: #3c6300;
+  --color-lime-900: #35530e;
+  --color-lime-950: #192e03;
+  --color-neutral-100: #f5f5f5;
+  --color-neutral-200: #e5e5e5;
+  --color-neutral-300: #d4d4d4;
+  --color-neutral-400: #a1a1a1;
+  --color-neutral-50: #fafafa;
+  --color-neutral-500: #737373;
+  --color-neutral-600: #525252;
+  --color-neutral-700: #404040;
+  --color-neutral-800: #262626;
+  --color-neutral-900: #171717;
+  --color-neutral-950: #0a0a0a;
+  --color-orange-100: #ffedd4;
+  --color-orange-200: #ffd6a8;
+  --color-orange-300: #ffb86a;
+  --color-orange-400: #ff8904;
+  --color-orange-50: #fff7ed;
+  --color-orange-500: #ff6900;
+  --color-orange-600: #f54900;
+  --color-orange-700: #ca3500;
+  --color-orange-800: #9f2d00;
+  --color-orange-900: #7e2a0c;
+  --color-orange-950: #441306;
+  --color-pink-100: #fce7f3;
+  --color-pink-200: #fccee8;
+  --color-pink-300: #fda5d5;
+  --color-pink-400: #fb64b6;
+  --color-pink-50: #fdf2f8;
+  --color-pink-500: #f6339a;
+  --color-pink-600: #e60076;
+  --color-pink-700: #c6005c;
+  --color-pink-800: #a3004c;
+  --color-pink-900: #861043;
+  --color-pink-950: #510424;
+  --color-purple-100: #f3e8ff;
+  --color-purple-200: #e9d4ff;
+  --color-purple-300: #dab2ff;
+  --color-purple-400: #c27aff;
+  --color-purple-50: #faf5ff;
+  --color-purple-500: #ad46ff;
+  --color-purple-600: #9810fa;
+  --color-purple-700: #8200db;
+  --color-purple-800: #6e11b0;
+  --color-purple-900: #59168b;
+  --color-purple-950: #3c0366;
+  --color-red-100: #ffe2e2;
+  --color-red-200: #ffc9c9;
+  --color-red-300: #ffa2a2;
+  --color-red-400: #ff6467;
+  --color-red-50: #fef2f2;
+  --color-red-500: #fb2c36;
+  --color-red-600: #e7000b;
+  --color-red-700: #c10007;
+  --color-red-800: #9f0712;
+  --color-red-900: #82181a;
+  --color-red-950: #460809;
+  --color-rose-100: #ffe4e6;
+  --color-rose-200: #ffccd3;
+  --color-rose-300: #ffa1ad;
+  --color-rose-400: #ff637e;
+  --color-rose-50: #fff1f2;
+  --color-rose-500: #ff2056;
+  --color-rose-600: #ec003f;
+  --color-rose-700: #c70036;
+  --color-rose-800: #a50036;
+  --color-rose-900: #8b0836;
+  --color-rose-950: #4d0218;
+  --color-sky-100: #dff2fe;
+  --color-sky-200: #b8e6fe;
+  --color-sky-300: #74d4ff;
+  --color-sky-400: #00bcff;
+  --color-sky-50: #f0f9ff;
+  --color-sky-500: #00a6f4;
+  --color-sky-600: #0084d1;
+  --color-sky-700: #0069a8;
+  --color-sky-800: #00598a;
+  --color-sky-900: #024a70;
+  --color-sky-950: #052f4a;
+  --color-slate-100: #f1f5f9;
+  --color-slate-200: #e2e8f0;
+  --color-slate-300: #cad5e2;
+  --color-slate-400: #90a1b9;
+  --color-slate-50: #f8fafc;
+  --color-slate-500: #62748e;
+  --color-slate-600: #45556c;
+  --color-slate-700: #314158;
+  --color-slate-800: #1d293d;
+  --color-slate-900: #0f172b;
+  --color-slate-950: #020618;
+  --color-slate-975: #010413;
+  --color-states-ai-active: rgba(218, 178, 255, 0.12);
+  --color-states-ai-default-alt: rgba(218, 178, 255, 0.06);
+  --color-states-ai-hover: rgba(218, 178, 255, 0.08);
+  --color-states-ai-pressed: rgba(218, 178, 255, 0.16);
+  --color-states-brand-active: rgba(255, 169, 133, 0.12);
+  --color-states-brand-default-alt: rgba(255, 169, 133, 0.06);
+  --color-states-brand-hover: rgba(255, 169, 133, 0.08);
+  --color-states-brand-pressed: rgba(255, 169, 133, 0.16);
+  --color-states-danger-active: rgba(255, 162, 162, 0.12);
+  --color-states-danger-default-alt: rgba(255, 162, 162, 0.06);
+  --color-states-danger-hover: rgba(255, 162, 162, 0.08);
+  --color-states-danger-pressed: rgba(255, 162, 162, 0.16);
+  --color-states-default-all: rgba(241, 245, 249, 0);
+  --color-states-info-active: rgba(142, 197, 255, 0.12);
+  --color-states-info-default-alt: rgba(142, 197, 255, 0.06);
+  --color-states-info-hover: rgba(142, 197, 255, 0.08);
+  --color-states-info-pressed: rgba(142, 197, 255, 0.16);
+  --color-states-on-fill-disabled: rgba(255, 255, 255, 0.4);
+  --color-states-on-fill-hover: rgba(255, 255, 255, 0.1);
+  --color-states-on-fill-pressed: rgba(255, 255, 255, 0.4);
+  --color-states-primary-active: rgba(241, 245, 249, 0.12);
+  --color-states-primary-alt-active: rgba(98, 116, 142, 0.12);
+  --color-states-primary-alt-default-alt: rgba(98, 116, 142, 0.06);
+  --color-states-primary-alt-hover: rgba(98, 116, 142, 0.08);
+  --color-states-primary-alt-pressed: rgba(98, 116, 142, 0.16);
+  --color-states-primary-default-alt: rgba(241, 245, 249, 0.06);
+  --color-states-primary-hover: rgba(241, 245, 249, 0.08);
+  --color-states-primary-pressed: rgba(241, 245, 249, 0.16);
+  --color-states-success-active: rgba(123, 241, 168, 0.12);
+  --color-states-success-default-alt: rgba(123, 241, 168, 0.06);
+  --color-states-success-hover: rgba(123, 241, 168, 0.08);
+  --color-states-success-pressed: rgba(123, 241, 168, 0.16);
+  --color-states-warning-active: rgba(255, 210, 48, 0.12);
+  --color-states-warning-default-alt: rgba(255, 210, 48, 0.06);
+  --color-states-warning-hover: rgba(255, 210, 48, 0.08);
+  --color-states-warning-pressed: rgba(255, 210, 48, 0.16);
+  --color-stone-100: #f5f5f4;
+  --color-stone-200: #e7e5e4;
+  --color-stone-300: #d6d3d1;
+  --color-stone-400: #a6a09b;
+  --color-stone-50: #fafaf9;
+  --color-stone-500: #79716b;
+  --color-stone-600: #57534d;
+  --color-stone-700: #44403b;
+  --color-stone-800: #292524;
+  --color-stone-900: #1c1917;
+  --color-stone-950: #0c0a09;
+  --color-syntax-attr-name: var(--color-syntax-attribute);
+  --color-syntax-attr-value: var(--color-syntax-string);
+  --color-syntax-attribute: var(--color-amber-300);
+  --color-syntax-boolean: var(--color-syntax-keyword);
+  --color-syntax-builtin: var(--color-syntax-keyword);
+  --color-syntax-class-name: var(--color-syntax-type);
+  --color-syntax-comment: var(--color-slate-500);
+  --color-syntax-constant: var(--color-syntax-keyword);
+  --color-syntax-function: var(--color-blue-400);
+  --color-syntax-highlight-ai-code: var(--color-purple-300);
+  --color-syntax-highlight-ai-highlight: rgba(194, 122, 255, 0.08);
+  --color-syntax-highlight-ai-indicator: var(--color-purple-400);
+  --color-syntax-highlight-brand-code: var(--color-w-orange-300);
+  --color-syntax-highlight-brand-highlight: rgba(255, 138, 82, 0.08);
+  --color-syntax-highlight-brand-indicator: var(--color-w-orange-400);
+  --color-syntax-highlight-error-code: var(--color-red-300);
+  --color-syntax-highlight-error-highlight: rgba(255, 100, 103, 0.08);
+  --color-syntax-highlight-error-indicator: var(--color-red-400);
+  --color-syntax-highlight-info-code: var(--color-blue-300);
+  --color-syntax-highlight-info-highlight: rgba(81, 162, 255, 0.08);
+  --color-syntax-highlight-info-indicator: var(--color-blue-400);
+  --color-syntax-highlight-neutral-code: var(--color-slate-200);
+  --color-syntax-highlight-neutral-highlight: rgba(144, 161, 185, 0.08);
+  --color-syntax-highlight-neutral-indicator: var(--color-slate-400);
+  --color-syntax-highlight-selected-code: var(--color-slate-50);
+  --color-syntax-highlight-selected-highlight: var(--color-slate-700);
+  --color-syntax-highlight-success-code: var(--color-green-300);
+  --color-syntax-highlight-success-highlight: rgba(5, 223, 114, 0.08);
+  --color-syntax-highlight-success-indicator: var(--color-green-400);
+  --color-syntax-highlight-warning-code: var(--color-amber-300);
+  --color-syntax-highlight-warning-highlight: var(--color-amber-400);
+  --color-syntax-highlight-warning-indicator: var(--color-amber-400);
+  --color-syntax-keyword: var(--color-purple-400);
+  --color-syntax-no-syntax: var(--color-slate-200);
+  --color-syntax-number: var(--color-syntax-number-boolean);
+  --color-syntax-number-boolean: var(--color-amber-300);
+  --color-syntax-operator: var(--color-slate-300);
+  --color-syntax-property: var(--color-syntax-variable);
+  --color-syntax-punctuation: var(--color-syntax-operator);
+  --color-syntax-regex: var(--color-syntax-string);
+  --color-syntax-string: var(--color-green-300);
+  --color-syntax-tag: var(--color-red-400);
+  --color-syntax-type: var(--color-yellow-300);
+  --color-syntax-variable: var(--color-red-300);
+  --color-teal-100: #cbfbf1;
+  --color-teal-200: #96f7e4;
+  --color-teal-300: #46ecd5;
+  --color-teal-400: #00d5be;
+  --color-teal-50: #f0fdfa;
+  --color-teal-500: #00bba7;
+  --color-teal-600: #009689;
+  --color-teal-700: #00786f;
+  --color-teal-800: #005f5a;
+  --color-teal-900: #0b4f4a;
+  --color-teal-950: #022f2e;
+  --color-text-ai: var(--color-purple-300);
+  --color-text-brand: var(--color-w-orange-300);
+  --color-text-danger: var(--color-red-300);
+  --color-text-disable-ai: rgba(218, 178, 255, 0.6);
+  --color-text-disable-brand: rgba(255, 169, 133, 0.6);
+  --color-text-disable-danger: rgba(255, 162, 162, 0.6);
+  --color-text-disable-info: rgba(142, 197, 255, 0.6);
+  --color-text-disable-primary: rgba(248, 250, 252, 0.4);
+  --color-text-disable-primary-alt: rgba(15, 23, 43, 0.4);
+  --color-text-disable-succes: rgba(123, 241, 168, 0.6);
+  --color-text-disable-warning: rgba(255, 210, 48, 0.6);
+  --color-text-hint: rgba(248, 250, 252, 0.4);
+  --color-text-info: var(--color-blue-300);
+  --color-text-link-default: var(--color-blue-300);
+  --color-text-link-default-alt: var(--color-blue-600);
+  --color-text-link-hover: var(--color-blue-200);
+  --color-text-link-hover-alt: var(--color-blue-800);
+  --color-text-primary: var(--color-slate-50);
+  --color-text-primary-alt: var(--color-slate-900);
+  --color-text-primary-alt-fixed: var(--color-white);
+  --color-text-primary-fixed: var(--color-slate-900);
+  --color-text-secondary: rgba(248, 250, 252, 0.8);
+  --color-text-secondary-alt: var(--color-slate-700);
+  --color-text-success: var(--color-green-300);
+  --color-text-tertiary: rgba(248, 250, 252, 0.4);
+  --color-text-tertiary-alt: var(--color-slate-600);
+  --color-text-warning: var(--color-amber-300);
+  --color-violet-100: #ede9fe;
+  --color-violet-200: #ddd6ff;
+  --color-violet-300: #c4b4ff;
+  --color-violet-400: #a684ff;
+  --color-violet-50: #f5f3ff;
+  --color-violet-500: #8e51ff;
+  --color-violet-600: #7f22fe;
+  --color-violet-700: #7008e7;
+  --color-violet-800: #5d0ec0;
+  --color-violet-900: #4d179a;
+  --color-violet-950: #2f0d68;
+  --color-w-orange-100: #ffe1d0;
+  --color-w-orange-200: #ffc8ac;
+  --color-w-orange-300: #ffa985;
+  --color-w-orange-400: #ff8a52;
+  --color-w-orange-50: #fff5ed;
+  --color-w-orange-500: #ff6633;
+  --color-w-orange-600: #ff441c;
+  --color-w-orange-700: #e12f0c;
+  --color-w-orange-800: #b82005;
+  --color-w-orange-900: #911908;
+  --color-w-orange-950: #560e06;
+  --color-white: #ffffff;
+  --color-yellow-100: #fef9c2;
+  --color-yellow-200: #fff085;
+  --color-yellow-300: #ffdf20;
+  --color-yellow-400: #fdc700;
+  --color-yellow-50: #fefce8;
+  --color-yellow-500: #f0b100;
+  --color-yellow-600: #d08700;
+  --color-yellow-700: #a65f00;
+  --color-yellow-800: #894b00;
+  --color-yellow-900: #733e0a;
+  --color-yellow-950: #432004;
+  --color-zinc-100: #f4f4f5;
+  --color-zinc-200: #e4e4e7;
+  --color-zinc-300: #d4d4d8;
+  --color-zinc-400: #9f9fa9;
+  --color-zinc-50: #fafafa;
+  --color-zinc-500: #71717b;
+  --color-zinc-600: #52525c;
+  --color-zinc-700: #3f3f47;
+  --color-zinc-800: #27272a;
+  --color-zinc-900: #18181b;
+  --color-zinc-950: #09090b;
+  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --shadow-2xs: 0 1px 0 0 rgba(0, 0, 0, 0.05);
+  --shadow-empty-state-medallion: inset 0 1px 0 0 rgba(255, 255, 255, 0.05), inset 0 -1px 2px 0 rgba(0, 0, 0, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.13), 0 2px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
+  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+:root {
+  --blur-2xl: 40px;
+  --blur-3xl: 64px;
+  --blur-lg: 16px;
+  --blur-md: 12px;
+  --blur-sm: 8px;
+  --blur-xl: 24px;
+  --blur-xs: 4px;
+  --dialog-pushed-back-offset: 32px;
+  --dialog-pushed-back-ratio: 0.02;
+  --dialog-pushed-back-scale: 0.98;
+  --drawer-overlay-z-index: 40;
+  --drawer-positioner-z-index: 50;
+  --drawer-pushed-back-offset: 60px;
+  --drawer-pushed-back-ratio: 0.02;
+  --drawer-pushed-back-scale: 0.98;
+  --toast-z-index: 900;
+  --tooltip-z-index: 1000;
+  --font-weight-black: 900;
+  --font-weight-bold: 700;
+  --font-weight-extrablod: 800;
+  --font-weight-extralight: 200;
+  --font-weight-light: 300;
+  --font-weight-medium: 450;
+  --font-weight-normal: 400;
+  --font-weight-semibold: 600;
+  --font-weight-thin: 100;
+  --icon-2xl: 32px;
+  --icon-lg: 20px;
+  --icon-md: 16px;
+  --icon-sm: 12px;
+  --icon-xl: 24px;
+  --icon-xs: 10px;
+  --leading-2xl: 32px;
+  --leading-2xs: 12px;
+  --leading-3xl: 36px;
+  --leading-4xl: 40px;
+  --leading-5xl: 48px;
+  --leading-6xl: 60px;
+  --leading-7xl: 72px;
+  --leading-8xl: 96px;
+  --leading-9xl: 128px;
+  --leading-base: 24px;
+  --leading-lg: 24px;
+  --leading-sm: 20px;
+  --leading-xl: 28px;
+  --leading-xs: 16px;
+  --radius-10: 10px;
+  --radius-12: 12px;
+  --radius-16: 16px;
+  --radius-2: 2px;
+  --radius-24: 24px;
+  --radius-32: 32px;
+  --radius-4: 4px;
+  --radius-6: 6px;
+  --radius-8: 8px;
+  --radius-full: 9999px;
+  --spacing: 1px;
+  --spacing-1: 1px;
+  --spacing-112: 112px;
+  --spacing-12: 12px;
+  --spacing-128: 128px;
+  --spacing-144: 144px;
+  --spacing-16: 16px;
+  --spacing-2: 2px;
+  --spacing-20: 20px;
+  --spacing-24: 24px;
+  --spacing-28: 28px;
+  --spacing-32: 32px;
+  --spacing-36: 36px;
+  --spacing-4: 4px;
+  --spacing-40: 40px;
+  --spacing-44: 44px;
+  --spacing-48: 48px;
+  --spacing-56: 56px;
+  --spacing-6: 6px;
+  --spacing-64: 64px;
+  --spacing-8: 8px;
+  --spacing-80: 80px;
+  --spacing-96: 96px;
+  --spacing-none: 0px;
+  --text-2xl: 24px;
+  --text-2xl--line-height: 32px;
+  --text-2xs: 10px;
+  --text-2xs--line-height: 12px;
+  --text-3xl: 30px;
+  --text-3xl--line-height: 36px;
+  --text-4xl: 36px;
+  --text-4xl--line-height: 40px;
+  --text-5xl: 48px;
+  --text-5xl--line-height: 48px;
+  --text-6xl: 60px;
+  --text-6xl--line-height: 60px;
+  --text-7xl: 72px;
+  --text-7xl--line-height: 72px;
+  --text-8xl: 96px;
+  --text-8xl--line-height: 96px;
+  --text-9xl: 128px;
+  --text-9xl--line-height: 128px;
+  --text-base: 16px;
+  --text-base--line-height: 24px;
+  --text-lg: 18px;
+  --text-lg--line-height: 24px;
+  --text-md: 14px;
+  --text-md--line-height: 20px;
+  --text-sm: 14px;
+  --text-sm--line-height: 20px;
+  --text-xl: 20px;
+  --text-xl--line-height: 28px;
+  --text-xs: 12px;
+  --text-xs--line-height: 16px;
+  --tracking-2xl: -0.01em;
+  --tracking-3xl: -0.01em;
+  --tracking-4xl: -0.015em;
+  --tracking-5xl: -0.015em;
+  --tracking-6xl: -0.02em;
+  --tracking-7xl: -0.02em;
+  --tracking-xl: -0.005em;
+  --font-pixel: 'Geist Pixel', ui-sans-serif, system-ui, sans-serif;
+  --font-serif: 'Inter', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+  --font-sans: 'Geist-Variable', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-sans-display: 'Geist-Variable', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-mono: 'GeistMono-Variable', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+}
+.body-2xs {
+  font-family: var(--font-sans-display);
+  font-size: 10px;
+  font-weight: 400;
+  line-height: 12px;
+}
+.body-xs {
+  font-family: var(--font-sans-display);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+}
+.body-sm {
+  font-family: var(--font-sans-display);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+}
+.body-base {
+  font-family: var(--font-sans-display);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+}
+.body-lg {
+  font-family: var(--font-sans-display);
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 24px;
+}
+.body-xl {
+  font-family: var(--font-sans-display);
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 28px;
+}
+.heading-sm {
+  font-family: var(--font-sans-display);
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 20px;
+  letter-spacing: 0;
+}
+.heading-base {
+  font-family: var(--font-sans-display);
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 24px;
+  letter-spacing: 0;
+}
+.heading-lg {
+  font-family: var(--font-sans-display);
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 24px;
+  letter-spacing: 0;
+}
+.heading-xl {
+  font-family: var(--font-sans-display);
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 28px;
+  letter-spacing: -0.005em;
+}
+.heading-2xl {
+  font-family: var(--font-sans-display);
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 32px;
+  letter-spacing: -0.01em;
+}
+.heading-3xl {
+  font-family: var(--font-sans-display);
+  font-size: 30px;
+  font-weight: 700;
+  line-height: 36px;
+  letter-spacing: -0.01em;
+}
+.heading-4xl {
+  font-family: var(--font-sans-display);
+  font-size: 36px;
+  font-weight: 700;
+  line-height: 40px;
+  letter-spacing: -0.015em;
+}
+.heading-5xl {
+  font-family: var(--font-sans-display);
+  font-size: 48px;
+  font-weight: 700;
+  line-height: 48px;
+  letter-spacing: -0.015em;
+}
+.heading-6xl {
+  font-family: var(--font-sans-display);
+  font-size: 60px;
+  font-weight: 700;
+  line-height: 60px;
+  letter-spacing: -0.02em;
+}
+.heading-7xl {
+  font-family: var(--font-sans-display);
+  font-size: 72px;
+  font-weight: 700;
+  line-height: 72px;
+  letter-spacing: -0.02em;
+}
+.display-5xl {
+  font-family: var(--font-sans-display);
+  font-size: 48px;
+  font-weight: 700;
+  line-height: 48px;
+  letter-spacing: -0.015em;
+}
+.display-6xl {
+  font-family: var(--font-sans-display);
+  font-size: 60px;
+  font-weight: 700;
+  line-height: 60px;
+  letter-spacing: -0.02em;
+}
+.display-7xl {
+  font-family: var(--font-sans-display);
+  font-size: 72px;
+  font-weight: 700;
+  line-height: 72px;
+  letter-spacing: -0.02em;
+}
+.display-8xl {
+  font-family: var(--font-sans-display);
+  font-size: 96px;
+  font-weight: 700;
+  line-height: 96px;
+  letter-spacing: 0;
+}
+.display-9xl {
+  font-family: var(--font-sans-display);
+  font-size: 128px;
+  font-weight: 700;
+  line-height: 128px;
+  letter-spacing: 0;
+}
+.code-2xs {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 400;
+  line-height: 12px;
+}
+.code-xs {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+}
+.code-sm {
+  font-family: var(--font-mono);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+}
+.code-base {
+  font-family: var(--font-mono);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+}
+@font-face {
+  font-family: "Geist Pixel";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("fonts/GeistPixel-Square.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Geist-Variable";
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("fonts/Geist-Variable.woff2") format("woff2");
+}
+@font-face {
+  font-family: "GeistMono-Variable";
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("fonts/GeistMono-Variable.woff2") format("woff2");
+}