@tangle-network/sandbox-ui 0.124.0 → 0.125.1

package/dist/styles.css

@@ -2888,12 +2888,6 @@
       background-color: color-mix(in oklab, var(--color-violet-500) 8%, transparent);
     }
   }
-  .bg-violet-500\/20 {
-    background-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-violet-500) 20%, transparent);
-    }
-  }
   .bg-white {
     background-color: var(--color-white);
   }
@@ -5751,20 +5745,7 @@
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
 }
-:root,
-[data-sandbox-ui],
-[data-sandbox-theme="vault"],
-[data-sandbox-theme="dawn"],
-[data-theme="dark"],
-[data-theme="light"],
-[data-theme="aubergine"],
-[data-theme="aubergine-light"],
-[data-theme="arena"],
-[data-theme="arena-light"],
-[data-theme="tangle-dark"],
-[data-theme="tangle-light"],
-.light,
-.dark {
+:root, [data-sandbox-ui], [data-sandbox-theme="vault"], [data-sandbox-theme="dawn"], [data-theme="dark"], [data-theme="light"], [data-theme="aubergine"], [data-theme="aubergine-light"], [data-theme="arena"], [data-theme="arena-light"], [data-theme="super"], [data-theme="super-light"], [data-theme="tangle-dark"], [data-theme="tangle-light"], [data-theme="hospitality"], [data-theme="agents"], [data-theme="agents-light"], [data-theme="website"], .light, .dark {
   color-scheme: dark;
   --md3-surface: #161616;
   --md3-surface-dim: #101010;
@@ -6092,13 +6073,7 @@
   --font-display: "Inter", "Geist", sans-serif;
   --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
 }
-[data-sandbox-theme="vault"]:where(:not(.dark)),
-[data-sandbox-theme="dawn"]:where(:not(.dark)),
-[data-theme="light"],
-[data-theme="aubergine-light"],
-[data-theme="arena-light"],
-[data-theme="tangle-light"],
-.light {
+[data-sandbox-theme="vault"]:where(:not(.dark)), [data-sandbox-theme="dawn"]:where(:not(.dark)), [data-theme="hospitality"]:where(:not(.dark)), [data-theme="website"]:where(:not(.dark)), [data-theme="light"], [data-theme="aubergine-light"], [data-theme="arena-light"], [data-theme="super-light"], [data-theme="tangle-light"], [data-theme="agents-light"], .light {
   color-scheme: light;
   --code-header-bg: hsl(var(--hsl-muted));
   @supports (color: color-mix(in lab, red, red)) {
@@ -6343,12 +6318,7 @@
   --radius-full: 999px;
   --radius-composer: 26px;
 }
-:root,
-.dark,
-.light,
-[data-sandbox-ui],
-[data-sandbox-theme],
-[data-theme] {
+:root, .dark, .light, [data-sandbox-ui], [data-sandbox-theme], [data-theme] {
   --focus-border: hsl(var(--hsl-ring) / 0.8);
   --focus-halo: hsl(var(--hsl-ring) / 0.18);
   --focus-border-danger: var(--surface-danger-text);
@@ -6375,11 +6345,7 @@
   --chart-tier-a: #8b87f0;
   --chart-tier-s: #b1a9ff;
 }
-[data-sandbox-theme="vault"]:where(:not(.dark)),
-[data-sandbox-theme="dawn"]:where(:not(.dark)),
-[data-theme="light"],
-.light,
-[data-theme$="-light"] {
+[data-sandbox-theme="vault"]:where(:not(.dark)), [data-sandbox-theme="dawn"]:where(:not(.dark)), [data-theme="hospitality"]:where(:not(.dark)), [data-theme="website"]:where(:not(.dark)), [data-theme="light"], .light, [data-theme$="-light"] {
   --chart-accent: hsl(var(--hsl-primary));
   --chart-tier-c: #9b9ef0;
   --chart-tier-b: #7c7fe3;
@@ -6387,12 +6353,7 @@
   --chart-tier-s: #272962;
 }
 @media (prefers-reduced-motion: reduce) {
-  :root,
-  .dark,
-  .light,
-  [data-sandbox-ui],
-  [data-sandbox-theme],
-  [data-theme] {
+  :root, .dark, .light, [data-sandbox-ui], [data-sandbox-theme], [data-theme] {
     --duration-instant: 0ms;
     --duration-fast: 0ms;
     --duration-base: 0ms;
@@ -6407,12 +6368,79 @@
     --motion-arrive: var(--duration-arrive) var(--ease-expo);
   }
 }
-:root,
-.dark,
-.light,
-[data-sandbox-ui],
-[data-sandbox-theme],
-[data-theme] {
+[data-tone="violet"], [data-tone="violet"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+  --tone-bg: var(--tone-violet-bg);
+  --tone-bg-hover: var(--tone-violet-bg-hover);
+  --tone-bg-selected: var(--tone-violet-bg-selected);
+  --tone-border: var(--tone-violet-border);
+  --tone-border-selected: var(--tone-violet-border-selected);
+  --tone-text: var(--tone-violet-text);
+  --tone-icon: var(--tone-violet-icon);
+}
+[data-tone="orange"], [data-tone="orange"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+  --tone-bg: var(--tone-orange-bg);
+  --tone-bg-hover: var(--tone-orange-bg-hover);
+  --tone-bg-selected: var(--tone-orange-bg-selected);
+  --tone-border: var(--tone-orange-border);
+  --tone-border-selected: var(--tone-orange-border-selected);
+  --tone-text: var(--tone-orange-text);
+  --tone-icon: var(--tone-orange-icon);
+}
+[data-tone="teal"], [data-tone="teal"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+  --tone-bg: var(--tone-teal-bg);
+  --tone-bg-hover: var(--tone-teal-bg-hover);
+  --tone-bg-selected: var(--tone-teal-bg-selected);
+  --tone-border: var(--tone-teal-border);
+  --tone-border-selected: var(--tone-teal-border-selected);
+  --tone-text: var(--tone-teal-text);
+  --tone-icon: var(--tone-teal-icon);
+}
+[data-tone="blue"], [data-tone="blue"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+  --tone-bg: var(--tone-blue-bg);
+  --tone-bg-hover: var(--tone-blue-bg-hover);
+  --tone-bg-selected: var(--tone-blue-bg-selected);
+  --tone-border: var(--tone-blue-border);
+  --tone-border-selected: var(--tone-blue-border-selected);
+  --tone-text: var(--tone-blue-text);
+  --tone-icon: var(--tone-blue-icon);
+}
+[data-tone="pink"], [data-tone="pink"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+  --tone-bg: var(--tone-pink-bg);
+  --tone-bg-hover: var(--tone-pink-bg-hover);
+  --tone-bg-selected: var(--tone-pink-bg-selected);
+  --tone-border: var(--tone-pink-border);
+  --tone-border-selected: var(--tone-pink-border-selected);
+  --tone-text: var(--tone-pink-text);
+  --tone-icon: var(--tone-pink-icon);
+}
+[data-tone="brown"], [data-tone="brown"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+  --tone-bg: var(--tone-brown-bg);
+  --tone-bg-hover: var(--tone-brown-bg-hover);
+  --tone-bg-selected: var(--tone-brown-bg-selected);
+  --tone-border: var(--tone-brown-border);
+  --tone-border-selected: var(--tone-brown-border-selected);
+  --tone-text: var(--tone-brown-text);
+  --tone-icon: var(--tone-brown-icon);
+}
+[data-tone="cyan"], [data-tone="cyan"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+  --tone-bg: var(--tone-cyan-bg);
+  --tone-bg-hover: var(--tone-cyan-bg-hover);
+  --tone-bg-selected: var(--tone-cyan-bg-selected);
+  --tone-border: var(--tone-cyan-border);
+  --tone-border-selected: var(--tone-cyan-border-selected);
+  --tone-text: var(--tone-cyan-text);
+  --tone-icon: var(--tone-cyan-icon);
+}
+[data-tone="lime"], [data-tone="lime"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+  --tone-bg: var(--tone-lime-bg);
+  --tone-bg-hover: var(--tone-lime-bg-hover);
+  --tone-bg-selected: var(--tone-lime-bg-selected);
+  --tone-border: var(--tone-lime-border);
+  --tone-border-selected: var(--tone-lime-border-selected);
+  --tone-text: var(--tone-lime-text);
+  --tone-icon: var(--tone-lime-icon);
+}
+:root, .dark, .light, [data-sandbox-ui], [data-sandbox-theme], [data-theme] {
   --text-display: var(--font-size-display);
   --text-hero: var(--font-size-hero);
   --text-page: var(--font-size-3xl);
@@ -6450,9 +6478,7 @@
   --color-fg-muted: var(--text-muted);
   --color-fg-dim: var(--text-dim);
 }
-[data-theme="aubergine-light"],
-[data-theme="arena-light"],
-[data-theme="tangle-light"] {
+[data-theme="aubergine-light"], [data-theme="arena-light"], [data-theme="super-light"], [data-theme="tangle-light"], [data-theme="agents-light"] {
   --hsl-secondary-foreground: 0 0% 10%;
   --surface-neutral-text: #4b5563;
 }
@@ -6493,8 +6519,14 @@
   --brand-glow: #c4b0ff;
   --text-primary: #f4f1fd;
   --text-secondary: #cec4e8;
-  --text-muted: #a99fc8;
-  --text-dim: #786d99;
+  --text-muted: #b7afd1;
+  --text-dim: #a59ebb;
+  --md3-surface: var(--bg-root);
+  --md3-surface-dim: var(--md3-surface-container-lowest);
+  --md3-surface-bright: var(--md3-surface-container-highest);
+  --md3-surface-variant: var(--md3-surface-container-high);
+  --md3-on-surface: var(--text-primary);
+  --md3-on-surface-variant: var(--text-muted);
 }
 [data-theme="aubergine-light"] {
   --hsl-background: 258 60% 96%;
@@ -6533,8 +6565,14 @@
   --brand-glow: #8b5cf6;
   --text-primary: #160f22;
   --text-secondary: #3f3460;
-  --text-muted: #6c6289;
-  --text-dim: #8a82a6;
+  --text-muted: #585070;
+  --text-dim: #655d82;
+  --md3-surface: var(--bg-root);
+  --md3-surface-dim: var(--depth-2);
+  --md3-surface-bright: #ffffff;
+  --md3-surface-variant: var(--md3-surface-container-high);
+  --md3-on-surface: var(--text-primary);
+  --md3-on-surface-variant: var(--text-muted);
 }
 [data-theme="arena"] {
   --hsl-background: 160 16% 6%;
@@ -6574,7 +6612,13 @@
   --text-primary: #ecfdf5;
   --text-secondary: #c2e8d6;
   --text-muted: #8fb6a3;
-  --text-dim: #5f8472;
+  --text-dim: #7ba08e;
+  --md3-surface: var(--bg-root);
+  --md3-surface-dim: var(--md3-surface-container-lowest);
+  --md3-surface-bright: var(--md3-surface-container-highest);
+  --md3-surface-variant: var(--md3-surface-container-high);
+  --md3-on-surface: var(--text-primary);
+  --md3-on-surface-variant: var(--text-muted);
 }
 [data-theme="arena-light"] {
   --hsl-background: 150 30% 96%;
@@ -6613,8 +6657,132 @@
   --brand-glow: #10b981;
   --text-primary: #06231a;
   --text-secondary: #285048;
-  --text-muted: #5f8472;
-  --text-dim: #82a699;
+  --text-muted: #455f52;
+  --text-dim: #4e6d62;
+  --md3-surface: var(--bg-root);
+  --md3-surface-dim: var(--depth-2);
+  --md3-surface-bright: #ffffff;
+  --md3-surface-variant: var(--md3-surface-container-high);
+  --md3-on-surface: var(--text-primary);
+  --md3-on-surface-variant: var(--text-muted);
+}
+[data-theme="super"] {
+  --hsl-background: 120 12% 8%;
+  --hsl-foreground: 86 20% 93%;
+  --hsl-card: 120 11% 12%;
+  --hsl-card-foreground: 86 20% 93%;
+  --hsl-popover: 120 10% 15%;
+  --hsl-popover-foreground: 86 20% 93%;
+  --hsl-primary: 139 31% 61%;
+  --hsl-primary-foreground: 140 35% 8%;
+  --hsl-secondary: 120 9% 17%;
+  --hsl-secondary-foreground: 86 20% 93%;
+  --hsl-muted: 120 9% 17%;
+  --hsl-muted-foreground: 95 10% 67%;
+  --hsl-accent: 120 10% 18%;
+  --hsl-accent-foreground: 86 20% 93%;
+  --hsl-border: 120 9% 25%;
+  --hsl-input: 120 9% 17%;
+  --hsl-ring: 139 31% 61%;
+  --depth-1: #121712;
+  --depth-2: #1c231c;
+  --depth-3: #232b23;
+  --depth-4: #2b342b;
+  --bg-root: #121712;
+  --bg-card: var(--depth-2);
+  --bg-input: var(--depth-3);
+  --md3-surface-container-lowest: #0d110d;
+  --md3-surface-container-low: #171d17;
+  --md3-surface-container: #1c231c;
+  --md3-surface-container-high: #232b23;
+  --md3-surface-container-highest: #2b342b;
+  --md3-outline-variant: #3a453a;
+  --border-subtle: rgba(190,210,180,0.12);
+  --border-default: rgba(190,210,180,0.20);
+  --border-hover: rgba(190,210,180,0.34);
+  --accent-text: #8fd0a4;
+  --brand-primary: #7dbb91;
+  --brand-glow: #8fd0a4;
+  --text-primary: #eef1ea;
+  --text-secondary: #cbd3c5;
+  --text-muted: #a9b3a2;
+  --text-dim: #959f8f;
+  --md3-primary: #8fd0a4;
+  --bg-hover: rgba(190,210,180,0.06);
+  --bg-selection: rgba(125,187,145,0.28);
+  --accent-surface-soft: rgba(125,187,145,0.08);
+  --accent-surface-strong: rgba(125,187,145,0.24);
+  --border-accent: rgba(125,187,145,0.38);
+  --border-accent-hover: rgba(125,187,145,0.56);
+  --btn-primary-bg: #7dbb91;
+  --btn-primary-hover: #8fcaa1;
+  --btn-primary-text: #0e1d13;
+  --btn-cta-bg: #7dbb91;
+  --btn-cta-text: #0e1d13;
+  --md3-surface: var(--bg-root);
+  --md3-surface-dim: var(--md3-surface-container-lowest);
+  --md3-surface-bright: var(--md3-surface-container-highest);
+  --md3-surface-variant: var(--md3-surface-container-high);
+  --md3-on-surface: var(--text-primary);
+  --md3-on-surface-variant: var(--text-muted);
+}
+[data-theme="super-light"] {
+  --hsl-background: 75 22% 96%;
+  --hsl-foreground: 114 13% 15%;
+  --hsl-card: 0 0% 100%;
+  --hsl-card-foreground: 114 13% 15%;
+  --hsl-popover: 0 0% 100%;
+  --hsl-popover-foreground: 114 13% 15%;
+  --hsl-primary: 148 40% 25%;
+  --hsl-primary-foreground: 0 0% 100%;
+  --hsl-secondary: 80 18% 93%;
+  --hsl-muted: 80 18% 93%;
+  --hsl-muted-foreground: 99 9% 37%;
+  --hsl-accent: 80 18% 93%;
+  --hsl-border: 87 17% 87%;
+  --hsl-input: 92 14% 78%;
+  --hsl-ring: 144 31% 34%;
+  --depth-1: #f7f8f4;
+  --depth-2: #eff1eb;
+  --depth-3: #ffffff;
+  --depth-4: #ffffff;
+  --bg-root: #f7f8f4;
+  --bg-card: #ffffff;
+  --bg-input: #eff1eb;
+  --md3-surface-container-lowest: #ffffff;
+  --md3-surface-container-low: #fcfcf9;
+  --md3-surface-container: #f7f8f4;
+  --md3-surface-container-high: #eff1eb;
+  --md3-surface-container-highest: #e6eae1;
+  --md3-outline-variant: #dfe4d9;
+  --border-subtle: rgba(34,43,33,0.10);
+  --border-default: rgba(34,43,33,0.16);
+  --border-hover: rgba(34,43,33,0.30);
+  --accent-text: #275a3f;
+  --brand-primary: #275a3f;
+  --brand-glow: #3b7050;
+  --text-primary: #222b21;
+  --text-secondary: #46523f;
+  --text-muted: #5d6857;
+  --text-dim: #616c5a;
+  --md3-primary: #275a3f;
+  --bg-hover: rgba(34,43,33,0.04);
+  --bg-selection: rgba(39,90,63,0.16);
+  --accent-surface-soft: rgba(39,90,63,0.06);
+  --accent-surface-strong: rgba(39,90,63,0.14);
+  --border-accent: rgba(39,90,63,0.30);
+  --border-accent-hover: rgba(39,90,63,0.45);
+  --btn-primary-bg: #275a3f;
+  --btn-primary-hover: #1e4832;
+  --btn-primary-text: #ffffff;
+  --btn-cta-bg: #275a3f;
+  --btn-cta-text: #ffffff;
+  --md3-surface: var(--bg-root);
+  --md3-surface-dim: var(--depth-2);
+  --md3-surface-bright: #ffffff;
+  --md3-surface-variant: var(--md3-surface-container-high);
+  --md3-on-surface: var(--text-primary);
+  --md3-on-surface-variant: var(--text-muted);
 }
 [data-theme="tangle-dark"] {
   --hsl-background: 0 0% 8.6275%;
@@ -6697,8 +6865,8 @@
   --brand-glow: #818cf8;
   --text-primary: #15131f;
   --text-secondary: #3f3a52;
-  --text-muted: #6a6680;
-  --text-dim: #9490a6;
+  --text-muted: #59556b;
+  --text-dim: #67627b;
 }
 .dark[data-theme="intelligence"] {
   --md3-surface: #0d0a10;
@@ -6736,6 +6904,362 @@
   --border-default: rgba(120, 108, 158, 0.18);
   --border-hover: rgba(120, 108, 158, 0.28);
 }
+[data-theme="hospitality"]:where(:not(.dark)) {
+  --hsl-background: 102 18% 92%;
+  --hsl-foreground: 143 25% 12%;
+  --hsl-card: 0 0% 100%;
+  --hsl-card-foreground: 143 25% 12%;
+  --hsl-popover: 0 0% 100%;
+  --hsl-popover-foreground: 143 25% 12%;
+  --hsl-primary: 153 38% 25%;
+  --hsl-primary-foreground: 0 0% 100%;
+  --hsl-secondary: 126 17% 94%;
+  --hsl-secondary-foreground: 143 25% 12%;
+  --hsl-muted: 126 17% 94%;
+  --hsl-muted-foreground: 146 9% 39%;
+  --hsl-accent: 131 20% 91%;
+  --hsl-accent-foreground: 143 25% 12%;
+  --hsl-border: 130 15% 84%;
+  --hsl-input: 105 22% 97.5%;
+  --hsl-ring: 148 28% 43%;
+  --sidebar-background: 0 0% 100%;
+  --sidebar-foreground: 143 25% 12%;
+  --sidebar-primary: 153 38% 25%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 126 17% 94%;
+  --sidebar-accent-foreground: 143 25% 12%;
+  --sidebar-border: 130 15% 84%;
+  --sidebar-ring: 148 28% 43%;
+  --md3-surface: #e9eee7;
+  --md3-surface-dim: #d5ded3;
+  --md3-surface-bright: #ffffff;
+  --md3-surface-container-lowest: #ffffff;
+  --md3-surface-container-low: #f8faf7;
+  --md3-surface-container: #ffffff;
+  --md3-surface-container-high: #edf2ee;
+  --md3-surface-container-highest: #ffffff;
+  --md3-surface-variant: #edf2ee;
+  --md3-on-surface: #17261d;
+  --md3-on-surface-variant: #5a6c62;
+  --md3-outline: #6d8376;
+  --md3-outline-variant: #d0dcd2;
+  --md3-primary: #285842;
+  --md3-primary-dim: #1f4735;
+  --md3-primary-container: #1f4735;
+  --md3-on-primary: #ffffff;
+  --md3-surface-tint: #285842;
+  --depth-1: #e9eee7;
+  --depth-2: #ffffff;
+  --depth-3: #edf2ee;
+  --depth-4: #ffffff;
+  --bg-root: #e9eee7;
+  --bg-dark: #e9eee7;
+  --bg-section: #e9eee7;
+  --bg-card: #ffffff;
+  --bg-elevated: #ffffff;
+  --bg-input: #f8faf7;
+  --bg-hover: rgba(40, 88, 66, 0.05);
+  --bg-selection: rgba(40, 88, 66, 0.16);
+  --border-subtle: rgba(23, 38, 29, 0.10);
+  --border-default: rgba(23, 38, 29, 0.14);
+  --border-hover: rgba(23, 38, 29, 0.24);
+  --border-accent: rgba(40, 88, 66, 0.20);
+  --border-accent-hover: rgba(40, 88, 66, 0.36);
+  --accent-text: #285842;
+  --accent-surface-soft: rgba(40, 88, 66, 0.05);
+  --accent-surface-strong: rgba(40, 88, 66, 0.13);
+  --accent-gradient-strong: linear-gradient(135deg, #1f4735, #336c52);
+  --brand-primary: #3d7b5f;
+  --brand-cool: #4f8c6c;
+  --brand-glow: #6cac8a;
+  --brand-vibrant: #3d7b5f;
+  --btn-primary-bg: #285842;
+  --btn-primary-hover: #336c52;
+  --btn-primary-text: #ffffff;
+  --text-primary: #17261d;
+  --text-secondary: #36493e;
+  --text-muted: #5a6c62;
+  --text-dim: #5f6d65;
+}
+.dark[data-theme="hospitality"] {
+  --hsl-background: 150 8% 8.6%;
+  --hsl-foreground: 140 12% 90.2%;
+  --hsl-card: 150 6% 18.8%;
+  --hsl-card-foreground: 140 12% 90.2%;
+  --hsl-popover: 150 6% 20.8%;
+  --hsl-popover-foreground: 140 12% 90.2%;
+  --hsl-primary: 145 31% 59%;
+  --hsl-primary-foreground: 153 35% 10%;
+  --hsl-secondary: 150 6% 20.8%;
+  --hsl-secondary-foreground: 140 12% 90.2%;
+  --hsl-muted: 150 6% 20.8%;
+  --hsl-muted-foreground: 145 8% 71%;
+  --hsl-accent: 150 6% 20.8%;
+  --hsl-accent-foreground: 140 12% 90.2%;
+  --hsl-border: 150 5% 29.8%;
+  --hsl-input: 150 8% 12.2%;
+  --hsl-ring: 145 31% 59%;
+  --sidebar-background: 150 9% 6.3%;
+  --sidebar-foreground: 140 12% 90.2%;
+  --sidebar-primary: 145 31% 59%;
+  --sidebar-primary-foreground: 153 35% 10%;
+  --sidebar-accent: 150 6% 20.8%;
+  --sidebar-accent-foreground: 140 12% 90.2%;
+  --sidebar-border: 150 5% 29.8%;
+  --sidebar-ring: 145 31% 59%;
+  --md3-surface: #141816;
+  --md3-surface-dim: #0f1210;
+  --md3-surface-bright: #383e3b;
+  --md3-surface-container-lowest: #0f1210;
+  --md3-surface-container-low: #212624;
+  --md3-surface-container: #2d3330;
+  --md3-surface-container-high: #323835;
+  --md3-surface-container-highest: #383e3b;
+  --md3-surface-variant: #323835;
+  --md3-on-surface: #e3e9e5;
+  --md3-on-surface-variant: #afbbb4;
+  --md3-outline: #8a938e;
+  --md3-outline-variant: #48504c;
+  --md3-primary: #76b791;
+  --md3-primary-dim: #396a52;
+  --md3-primary-container: #396a52;
+  --md3-on-primary: #11221a;
+  --md3-surface-tint: #76b791;
+  --depth-1: #141816;
+  --depth-2: #2d3330;
+  --depth-3: #323835;
+  --depth-4: #383e3b;
+  --bg-root: #141816;
+  --bg-dark: #141816;
+  --bg-section: #141816;
+  --bg-card: #2d3330;
+  --bg-elevated: #383e3b;
+  --bg-input: #1d221f;
+  --bg-hover: rgba(118, 183, 145, 0.07);
+  --bg-selection: rgba(118, 183, 145, 0.28);
+  --border-subtle: rgba(227, 233, 229, 0.10);
+  --border-default: rgba(227, 233, 229, 0.16);
+  --border-hover: rgba(227, 233, 229, 0.28);
+  --border-accent: rgba(118, 183, 145, 0.35);
+  --border-accent-hover: rgba(118, 183, 145, 0.50);
+  --accent-text: #76b791;
+  --accent-surface-soft: rgba(118, 183, 145, 0.07);
+  --accent-surface-strong: rgba(57, 106, 82, 0.40);
+  --accent-gradient-strong: linear-gradient(135deg, #396a52, #76b791);
+  --brand-primary: #529873;
+  --brand-cool: #76b791;
+  --brand-glow: #94c7a9;
+  --brand-vibrant: #529873;
+  --btn-primary-bg: #76b791;
+  --btn-primary-hover: #8dc3a4;
+  --btn-primary-text: #11221a;
+  --text-primary: #e3e9e5;
+  --text-secondary: #c5cec9;
+  --text-muted: #afbbb4;
+  --text-dim: #9ea9a2;
+}
+[data-theme="agents"] {
+  --bg-card: #1a191b;
+  --hsl-background: 270 5.6% 7.1%;
+  --hsl-foreground: 240 6.2% 93.7%;
+  --hsl-card: 270 3.8% 10.2%;
+  --hsl-card-foreground: 240 6.2% 93.7%;
+  --hsl-popover: 260 4.2% 13.9%;
+  --hsl-popover-foreground: 240 6.2% 93.7%;
+  --hsl-secondary: 260 4.2% 13.9%;
+  --hsl-secondary-foreground: 240 6.2% 93.7%;
+  --hsl-muted: 260 4.2% 13.9%;
+  --hsl-muted-foreground: 258 6.9% 71.8%;
+  --hsl-accent: 270 4.7% 16.9%;
+  --hsl-accent-foreground: 240 6.2% 93.7%;
+  --hsl-border: 270 5% 23.5%;
+  --hsl-input: 251 4.8% 44.9%;
+  --sidebar-background: 270 3.8% 10.2%;
+  --sidebar-foreground: 240 6.2% 93.7%;
+  --sidebar-accent: 270 4.7% 16.9%;
+  --sidebar-accent-foreground: 240 6.2% 93.7%;
+  --sidebar-border: 270 5% 23.5%;
+  --md3-surface: #121113;
+  --md3-surface-dim: #121113;
+  --md3-surface-bright: #323035;
+  --md3-surface-container-lowest: #121113;
+  --md3-surface-container-low: #1a191b;
+  --md3-surface-container: #1a191b;
+  --md3-surface-container-high: #232225;
+  --md3-surface-container-highest: #2b292d;
+  --md3-surface-variant: #232225;
+  --md3-on-surface: #eeeef0;
+  --md3-on-surface-variant: #b5b2bc;
+  --md3-outline: #6f6d78;
+  --md3-outline-variant: #3c393f;
+  --depth-1: #121113;
+  --depth-2: #1a191b;
+  --depth-3: #232225;
+  --depth-4: #2b292d;
+  --bg-root: #121113;
+  --bg-dark: #121113;
+  --bg-elevated: #232225;
+  --bg-section: #121113;
+  --bg-input: #1a191b;
+  --bg-hover: #232225;
+  --text-primary: #eeeef0;
+  --text-secondary: #eeeef0;
+  --text-muted: #b5b2bc;
+  --text-dim: #b5b2bc;
+  --border-subtle: #3c393f;
+  --border-default: #49474e;
+  --border-hover: #625f69;
+  --shadow-card: inset 0 0 0 1px rgb(255 255 255 / 0.06);
+  --shadow-dropdown: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 8px 24px rgb(0 0 0 / 0.5);
+  --shadow-overlay: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 16px 48px rgb(0 0 0 / 0.6);
+}
+[data-theme="agents-light"] {
+  --bg-card: #ffffff;
+  --hsl-background: 0 0% 100%;
+  --hsl-foreground: 257 10.1% 13.5%;
+  --hsl-card: 0 0% 100%;
+  --hsl-card-foreground: 257 10.1% 13.5%;
+  --hsl-popover: 0 0% 100%;
+  --hsl-popover-foreground: 257 10.1% 13.5%;
+  --hsl-secondary: 285 14.3% 94.5%;
+  --hsl-secondary-foreground: 257 10.1% 13.5%;
+  --hsl-muted: 285 14.3% 94.5%;
+  --hsl-muted-foreground: 252 4.8% 40.8%;
+  --hsl-accent: 276 11.6% 91.6%;
+  --hsl-accent-foreground: 257 10.1% 13.5%;
+  --hsl-border: 262 11.4% 86.3%;
+  --hsl-input: 249 6% 57.5%;
+  --sidebar-background: 270 20% 98%;
+  --sidebar-foreground: 257 10.1% 13.5%;
+  --sidebar-accent: 276 11.6% 91.6%;
+  --sidebar-accent-foreground: 257 10.1% 13.5%;
+  --sidebar-border: 262 11.4% 86.3%;
+  --md3-surface: #ffffff;
+  --md3-surface-dim: #faf9fb;
+  --md3-surface-bright: #ffffff;
+  --md3-surface-container-lowest: #ffffff;
+  --md3-surface-container-low: #faf9fb;
+  --md3-surface-container: #ffffff;
+  --md3-surface-container-high: #f2eff3;
+  --md3-surface-container-highest: #ffffff;
+  --md3-surface-variant: #f2eff3;
+  --md3-on-surface: #211f26;
+  --md3-on-surface-variant: #65636d;
+  --md3-outline: #8e8c99;
+  --md3-outline-variant: #dbd8e0;
+  --depth-1: #ffffff;
+  --depth-2: #ffffff;
+  --depth-3: #faf9fb;
+  --depth-4: #ffffff;
+  --bg-root: #ffffff;
+  --bg-dark: #faf9fb;
+  --bg-elevated: #ffffff;
+  --bg-section: #faf9fb;
+  --bg-input: #ffffff;
+  --bg-hover: #f2eff3;
+  --text-primary: #211f26;
+  --text-secondary: #211f26;
+  --text-muted: #65636d;
+  --text-dim: #65636d;
+  --border-subtle: #dbd8e0;
+  --border-default: #d0cdd7;
+  --border-hover: #bcbac7;
+  --shadow-card: 0 0 0 1px rgb(33 31 38 / 0.03), 0 2px 6px rgb(33 31 38 / 0.05), 0 4px 8px rgb(33 31 38 / 0.08);
+  --shadow-dropdown: 0 0 0 1px rgb(33 31 38 / 0.04), 0 6px 16px rgb(33 31 38 / 0.12);
+  --shadow-overlay: 0 8px 28px rgb(33 31 38 / 0.28);
+}
+[data-theme="website"]:where(:not(.dark)) {
+  --hsl-background: 240 42.9% 97.3%;
+  --hsl-foreground: 224 18% 12%;
+  --hsl-card: 0 0% 100%;
+  --hsl-card-foreground: 224 18% 12%;
+  --hsl-popover: 0 0% 100%;
+  --hsl-popover-foreground: 224 18% 12%;
+  --hsl-secondary: 240 35.7% 94.5%;
+  --hsl-secondary-foreground: 224 18% 12%;
+  --hsl-muted: 240 35.7% 94.5%;
+  --hsl-muted-foreground: 240 13% 42.4%;
+  --hsl-accent: 240 23.1% 92.4%;
+  --hsl-accent-foreground: 224 18% 12%;
+  --hsl-border: 240 26.3% 88.8%;
+  --hsl-input: 240 42.9% 97.3%;
+  --md3-surface: #f5f5fb;
+  --md3-surface-dim: #e7e7f0;
+  --md3-surface-bright: #ffffff;
+  --md3-surface-container-lowest: #ffffff;
+  --md3-surface-container-low: #fafafd;
+  --md3-surface-container: #ffffff;
+  --md3-surface-container-high: #ececf6;
+  --md3-surface-container-highest: #ffffff;
+  --md3-surface-variant: #ececf6;
+  --md3-on-surface: #191c24;
+  --md3-on-surface-variant: #5e5e7a;
+  --md3-outline: #5e5e7a;
+  --md3-outline-variant: #dbdbea;
+  --depth-1: #f5f5fb;
+  --depth-2: #ffffff;
+  --depth-3: #ececf6;
+  --depth-4: #ffffff;
+  --bg-root: #f5f5fb;
+  --bg-dark: #f5f5fb;
+  --bg-section: #ececf6;
+  --bg-card: #ffffff;
+  --bg-elevated: #ffffff;
+  --bg-input: #f5f5fb;
+  --border-subtle: rgba(25, 28, 36, 0.08);
+  --border-default: rgba(25, 28, 36, 0.12);
+  --border-hover: rgba(25, 28, 36, 0.24);
+  --text-primary: #191c24;
+  --text-secondary: #3a3a50;
+  --text-muted: #5e5e7a;
+  --text-dim: #5e5e7a;
+}
+.dark[data-theme="website"] {
+  --hsl-background: 243 45% 7.8%;
+  --hsl-foreground: 0 0% 99.2%;
+  --hsl-card: 244 34.9% 16.3%;
+  --hsl-card-foreground: 0 0% 99.2%;
+  --hsl-popover: 243 33.3% 21.2%;
+  --hsl-popover-foreground: 0 0% 99.2%;
+  --hsl-secondary: 244 34% 19%;
+  --hsl-secondary-foreground: 0 0% 99.2%;
+  --hsl-muted: 244 34% 19%;
+  --hsl-muted-foreground: 237 23% 65.9%;
+  --hsl-accent: 243 33.3% 21.2%;
+  --hsl-accent-foreground: 0 0% 99.2%;
+  --hsl-border: 243 31.9% 28.2%;
+  --hsl-input: 243 41.2% 10%;
+  --md3-surface: #0c0b1d;
+  --md3-surface-dim: #080814;
+  --md3-surface-bright: #2e2c56;
+  --md3-surface-container-lowest: #080814;
+  --md3-surface-container-low: #141328;
+  --md3-surface-container: #1d1b38;
+  --md3-surface-container-high: #222041;
+  --md3-surface-container-highest: #262448;
+  --md3-surface-variant: #222041;
+  --md3-on-surface: #fdfdfd;
+  --md3-on-surface-variant: #aaa8b8;
+  --md3-outline: #9496bc;
+  --md3-outline-variant: #33315f;
+  --depth-1: #0c0b1d;
+  --depth-2: #1d1b38;
+  --depth-3: #222041;
+  --depth-4: #262448;
+  --bg-root: #0c0b1d;
+  --bg-dark: #0c0b1d;
+  --bg-section: #141328;
+  --bg-card: #1d1b38;
+  --bg-elevated: #262448;
+  --bg-input: #100f24;
+  --border-subtle: rgba(255, 255, 255, 0.08);
+  --border-default: rgba(255, 255, 255, 0.15);
+  --border-hover: rgba(255, 255, 255, 0.28);
+  --text-primary: #fdfdfd;
+  --text-secondary: #aaa8b8;
+  --text-muted: #9496bc;
+  --text-dim: #9496bc;
+}
 :is(.dark, .light, [data-theme], [data-sandbox-theme="vault"]) {
   --foreground: var(--hsl-foreground);
   --muted-foreground: var(--hsl-muted-foreground);
@@ -6828,41 +7352,12 @@
   * {
     border-color: hsl(var(--border));
   }
-  :where(
-      a[href],
-      button,
-      summary,
-      input:is([type="checkbox"], [type="radio"]),
-      [role="button"],
-      [role="checkbox"],
-      [role="link"],
-      [role="menuitem"],
-      [role="option"],
-      [role="radio"],
-      [role="switch"],
-      [role="tab"],
-      [tabindex]:not([tabindex="-1"])
-    ):focus-visible {
+  :where( a[href], button, summary, input:is([type="checkbox"], [type="radio"]), [role="button"], [role="checkbox"], [role="link"], [role="menuitem"], [role="option"], [role="radio"], [role="switch"], [role="tab"], [tabindex]:not([tabindex="-1"]) ):focus-visible {
     outline: 1px solid var(--focus-border);
     outline-offset: 0;
     box-shadow: 0 0 0 4px var(--focus-halo);
   }
-  :where(
-      input:not(
-          [type="button"],
-          [type="checkbox"],
-          [type="color"],
-          [type="file"],
-          [type="hidden"],
-          [type="image"],
-          [type="radio"],
-          [type="range"],
-          [type="reset"],
-          [type="submit"]
-        ),
-      select,
-      textarea
-    ):focus-visible {
+  :where( input:not( [type="button"], [type="checkbox"], [type="color"], [type="file"], [type="hidden"], [type="image"], [type="radio"], [type="range"], [type="reset"], [type="submit"] ), select, textarea ):focus-visible {
     outline: 1px solid var(--focus-border);
     outline-offset: -1px;
     box-shadow: none;
@@ -6876,9 +7371,7 @@
     background-color: hsl(var(--background));
     color: hsl(var(--foreground));
     font-family: var(--font-sans);
-    font-feature-settings: "rlig" 1,
-      "calt" 1,
-      "ss01" 1;
+    font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1;
   }
   ::selection {
     background: var(--bg-selection);
@@ -6904,8 +7397,7 @@
   }
 }
 @layer utilities {
-  .text-gradient-sandbox,
-  .text-gradient-brand {
+  .text-gradient-sandbox, .text-gradient-brand {
     background-image: var(--tangle-gradient);
     background-clip: text;
     -webkit-background-clip: text;
@@ -7026,24 +7518,12 @@
     animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   }
   .shimmer {
-    background: linear-gradient(
-      90deg,
-      hsl(var(--muted)) 0%,
-      hsl(var(--accent)) 50%,
-      hsl(var(--muted)) 100%
-    );
+    background: linear-gradient( 90deg, hsl(var(--muted)) 0%, hsl(var(--accent)) 50%, hsl(var(--muted)) 100% );
     background-size: 200% 100%;
     animation: shimmer 2s infinite;
   }
   .shimmer-text {
-    background-image: linear-gradient(
-      90deg,
-      hsl(var(--muted-foreground) / 0.5) 0%,
-      hsl(var(--muted-foreground) / 0.5) 40%,
-      hsl(var(--primary)) 50%,
-      hsl(var(--muted-foreground) / 0.5) 60%,
-      hsl(var(--muted-foreground) / 0.5) 100%
-    );
+    background-image: linear-gradient( 90deg, hsl(var(--muted-foreground) / 0.5) 0%, hsl(var(--muted-foreground) / 0.5) 40%, hsl(var(--primary)) 50%, hsl(var(--muted-foreground) / 0.5) 60%, hsl(var(--muted-foreground) / 0.5) 100% );
     background-size: 200% 100%;
     -webkit-background-clip: text;
     background-clip: text;
@@ -7165,12 +7645,10 @@
   }
 }
 @keyframes agent-caret {
-  0%,
-  49% {
+  0%, 49% {
     opacity: 1;
   }
-  50%,
-  100% {
+  50%, 100% {
     opacity: 0;
   }
 }
@@ -7195,12 +7673,7 @@
   animation-delay: calc(min(var(--stagger-index), 8) * var(--stagger-step));
 }
 .agent-shimmer {
-  background: linear-gradient(
-    90deg,
-    hsl(var(--muted-foreground)) 0%,
-    hsl(var(--foreground)) 45%,
-    hsl(var(--muted-foreground)) 60%
-  );
+  background: linear-gradient( 90deg, hsl(var(--muted-foreground)) 0%, hsl(var(--foreground)) 45%, hsl(var(--muted-foreground)) 60% );
   background-size: 250% auto;
   background-clip: text;
   -webkit-background-clip: text;
@@ -7231,9 +7704,7 @@
     --duration-arrive: 1ms;
     --stagger-step: 0ms;
   }
-  *:where(:not([data-motion="essential"], [data-motion="essential"] *)),
-  *:where(:not([data-motion="essential"], [data-motion="essential"] *))::before,
-  *:where(:not([data-motion="essential"], [data-motion="essential"] *))::after {
+  *:where(:not([data-motion="essential"], [data-motion="essential"] *)), *:where(:not([data-motion="essential"], [data-motion="essential"] *))::before, *:where(:not([data-motion="essential"], [data-motion="essential"] *))::after {
     animation-duration: 1ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 1ms !important;