whipped 0.8.0 → 0.9.0

package/dist/web-ui/assets/{index-CRXPsGTP.css → index-DPjATOCj.css}

@@ -5,11 +5,6 @@
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
-      --tw-rotate-x: initial;
-      --tw-rotate-y: initial;
-      --tw-rotate-z: initial;
-      --tw-skew-x: initial;
-      --tw-skew-y: initial;
       --tw-space-y-reverse: 0;
       --tw-divide-y-reverse: 0;
       --tw-border-style: solid;
@@ -57,57 +52,14 @@
   :root, :host {
     --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-      "Courier New", monospace;
+    --font-mono: "Geist Mono Variable", ui-monospace, monospace;
     --color-red-100: oklch(93.6% .032 17.717);
-    --color-red-300: oklch(80.8% .114 19.571);
     --color-red-400: oklch(70.4% .191 22.216);
     --color-red-500: oklch(63.7% .237 25.331);
     --color-red-600: oklch(57.7% .245 27.325);
-    --color-red-700: oklch(50.5% .213 27.518);
-    --color-orange-400: oklch(75% .183 55.934);
     --color-orange-500: oklch(70.5% .213 47.604);
-    --color-amber-200: oklch(92.4% .12 95.746);
-    --color-amber-300: oklch(87.9% .169 91.605);
-    --color-amber-400: oklch(82.8% .189 84.429);
-    --color-amber-500: oklch(76.9% .188 70.08);
-    --color-amber-800: oklch(47.3% .137 46.201);
-    --color-amber-950: oklch(27.9% .077 45.635);
-    --color-yellow-200: oklch(94.5% .129 101.54);
-    --color-yellow-400: oklch(85.2% .199 91.936);
-    --color-yellow-500: oklch(79.5% .184 86.047);
-    --color-yellow-600: oklch(68.1% .162 75.834);
-    --color-yellow-800: oklch(47.6% .114 61.907);
-    --color-yellow-950: oklch(28.6% .066 53.813);
-    --color-green-300: oklch(87.1% .15 154.449);
-    --color-green-400: oklch(79.2% .209 151.711);
     --color-green-500: oklch(72.3% .219 149.579);
-    --color-green-600: oklch(62.7% .194 149.214);
-    --color-green-700: oklch(52.7% .154 150.069);
-    --color-green-800: oklch(44.8% .119 151.328);
-    --color-emerald-300: oklch(84.5% .143 164.978);
-    --color-emerald-400: oklch(76.5% .177 163.223);
-    --color-emerald-500: oklch(69.6% .17 162.48);
-    --color-blue-300: oklch(80.9% .105 251.813);
-    --color-blue-400: oklch(70.7% .165 254.624);
     --color-blue-500: oklch(62.3% .214 259.815);
-    --color-blue-600: oklch(54.6% .245 262.881);
-    --color-purple-100: oklch(94.6% .033 307.174);
-    --color-purple-400: oklch(71.4% .203 305.504);
-    --color-purple-500: oklch(62.7% .265 303.9);
-    --color-purple-700: oklch(49.6% .265 301.924);
-    --color-purple-800: oklch(43.8% .218 303.724);
-    --color-purple-950: oklch(29.1% .149 302.717);
-    --color-slate-400: oklch(70.4% .04 256.788);
-    --color-gray-100: oklch(96.7% .003 264.542);
-    --color-gray-200: oklch(92.8% .006 264.531);
-    --color-gray-300: oklch(87.2% .01 258.338);
-    --color-gray-400: oklch(70.7% .022 261.325);
-    --color-gray-500: oklch(55.1% .027 264.364);
-    --color-gray-600: oklch(44.6% .03 256.802);
-    --color-gray-700: oklch(37.3% .034 259.733);
-    --color-gray-800: oklch(27.8% .033 256.848);
-    --color-neutral-300: oklch(87% 0 0);
     --color-black: #000;
     --color-white: #fff;
     --spacing: .25rem;
@@ -122,8 +74,6 @@
     --text-sm--line-height: calc(1.25 / .875);
     --text-base: 1rem;
     --text-base--line-height: calc(1.5 / 1);
-    --text-lg: 1.125rem;
-    --text-lg--line-height: calc(1.75 / 1.125);
     --text-xl: 1.25rem;
     --text-xl--line-height: calc(1.75 / 1.25);
     --text-4xl: 2.25rem;
@@ -133,6 +83,7 @@
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
     --tracking-wide: .025em;
+    --leading-tight: 1.25;
     --leading-snug: 1.375;
     --leading-normal: 1.5;
     --leading-relaxed: 1.625;
@@ -148,6 +99,18 @@
     --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
+    --color-whip-bg: var(--whip-bg);
+    --color-whip-surface: var(--whip-surface);
+    --color-whip-panel: var(--whip-panel);
+    --color-whip-panel-2: var(--whip-panel-2);
+    --color-whip-border: var(--whip-border);
+    --color-whip-border-soft: var(--whip-border-soft);
+    --color-whip-border-hover: var(--whip-border-hover);
+    --color-whip-text: var(--whip-text);
+    --color-whip-muted: var(--whip-muted);
+    --color-whip-faint: var(--whip-faint);
+    --color-whip-accent: var(--whip-accent);
+    --color-whip-accent-text: var(--whip-accent-text);
   }
 }
 
@@ -402,10 +365,10 @@
   }
 
   body {
-    color: #f0f0f5;
-    background: #0a0a0e;
+    background: var(--color-whip-bg);
+    color: var(--color-whip-text);
     margin: 0;
-    font-family: ui-sans-serif, system-ui, sans-serif;
+    font-family: Geist Variable, ui-sans-serif, system-ui, sans-serif;
   }
 
   ::-webkit-scrollbar {
@@ -418,12 +381,16 @@
   }
 
   ::-webkit-scrollbar-thumb {
-    background: #2a2a35;
+    background: var(--color-whip-border);
     border-radius: 3px;
   }
 
   ::-webkit-scrollbar-thumb:hover {
-    background: #3a3a48;
+    background: var(--color-whip-border-hover);
+  }
+
+  button {
+    cursor: pointer;
   }
 }
 
@@ -3960,6 +3927,10 @@
     }
   }
 
+  .-mx-1 {
+    margin-inline: calc(var(--spacing) * -1);
+  }
+
   .-mx-2 {
     margin-inline: calc(var(--spacing) * -2);
   }
@@ -4036,6 +4007,14 @@
     margin-top: calc(var(--spacing) * 6);
   }
 
+  .mt-\[2px\] {
+    margin-top: 2px;
+  }
+
+  .mt-\[3px\] {
+    margin-top: 3px;
+  }
+
   .mt-px {
     margin-top: 1px;
   }
@@ -4076,6 +4055,10 @@
     margin-left: calc(var(--spacing) * .5);
   }
 
+  .ml-1 {
+    margin-left: calc(var(--spacing) * 1);
+  }
+
   .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
@@ -4143,11 +4126,6 @@
     height: calc(var(--spacing) * 2);
   }
 
-  .size-3\.5 {
-    width: calc(var(--spacing) * 3.5);
-    height: calc(var(--spacing) * 3.5);
-  }
-
   .size-4 {
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
@@ -4163,11 +4141,6 @@
     height: calc(var(--spacing) * 7);
   }
 
-  .size-8 {
-    width: calc(var(--spacing) * 8);
-    height: calc(var(--spacing) * 8);
-  }
-
   .size-16 {
     width: calc(var(--spacing) * 16);
     height: calc(var(--spacing) * 16);
@@ -4178,11 +4151,26 @@
     height: 5px;
   }
 
+  .size-\[6px\] {
+    width: 6px;
+    height: 6px;
+  }
+
   .size-\[7px\] {
     width: 7px;
     height: 7px;
   }
 
+  .size-\[30px\] {
+    width: 30px;
+    height: 30px;
+  }
+
+  .size-\[34px\] {
+    width: 34px;
+    height: 34px;
+  }
+
   .h-0\.5 {
     height: calc(var(--spacing) * .5);
   }
@@ -4227,6 +4215,10 @@
     height: calc(var(--spacing) * 9);
   }
 
+  .h-11 {
+    height: calc(var(--spacing) * 11);
+  }
+
   .h-12 {
     height: calc(var(--spacing) * 12);
   }
@@ -4279,6 +4271,18 @@
     height: 22px;
   }
 
+  .h-\[34px\] {
+    height: 34px;
+  }
+
+  .h-\[38px\] {
+    height: 38px;
+  }
+
+  .h-\[82px\] {
+    height: 82px;
+  }
+
   .h-\[85vh\] {
     height: 85vh;
   }
@@ -4347,6 +4351,14 @@
     max-height: 85vh;
   }
 
+  .max-h-\[280px\] {
+    max-height: 280px;
+  }
+
+  .max-h-\[320px\] {
+    max-height: 320px;
+  }
+
   .max-h-\[850px\] {
     max-height: 850px;
   }
@@ -4375,6 +4387,10 @@
     min-height: 12px;
   }
 
+  .min-h-\[100px\] {
+    min-height: 100px;
+  }
+
   .min-h-screen {
     min-height: 100vh;
   }
@@ -4483,6 +4499,14 @@
     width: 92vw;
   }
 
+  .w-\[150px\] {
+    width: 150px;
+  }
+
+  .w-\[170px\] {
+    width: 170px;
+  }
+
   .w-\[200px\] {
     width: 200px;
   }
@@ -4495,10 +4519,18 @@
     width: 240px;
   }
 
+  .w-\[250px\] {
+    width: 250px;
+  }
+
   .w-\[300px\] {
     width: 300px;
   }
 
+  .w-\[336px\] {
+    width: 336px;
+  }
+
   .w-\[340px\] {
     width: 340px;
   }
@@ -4523,6 +4555,10 @@
     width: 560px;
   }
 
+  .w-\[1000px\] {
+    width: 1000px;
+  }
+
   .w-\[1100px\] {
     width: 1100px;
   }
@@ -4575,10 +4611,22 @@
     max-width: 200px;
   }
 
+  .max-w-\[220px\] {
+    max-width: 220px;
+  }
+
   .max-w-\[280px\] {
     max-width: 280px;
   }
 
+  .max-w-\[420px\] {
+    max-width: 420px;
+  }
+
+  .max-w-\[720px\] {
+    max-width: 720px;
+  }
+
   .max-w-\[980px\] {
     max-width: 980px;
   }
@@ -4631,14 +4679,18 @@
     min-width: 16px;
   }
 
-  .min-w-\[18px\] {
-    min-width: 18px;
-  }
-
   .min-w-\[80px\] {
     min-width: 80px;
   }
 
+  .min-w-\[180px\] {
+    min-width: 180px;
+  }
+
+  .min-w-\[220px\] {
+    min-width: 220px;
+  }
+
   .min-w-\[320px\] {
     min-width: 320px;
   }
@@ -4686,10 +4738,6 @@
     rotate: 180deg;
   }
 
-  .transform {
-    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
-  }
-
   .animate-pulse {
     animation: var(--animate-pulse);
   }
@@ -4822,6 +4870,10 @@
     gap: calc(var(--spacing) * 7);
   }
 
+  .gap-\[3px\] {
+    gap: 3px;
+  }
+
   .gap-\[5px\] {
     gap: 5px;
   }
@@ -4830,6 +4882,10 @@
     gap: 6px;
   }
 
+  .gap-\[7px\] {
+    gap: 7px;
+  }
+
   .gap-\[10px\] {
     gap: 10px;
   }
@@ -4886,8 +4942,12 @@
     border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
   }
 
-  :where(.divide-\[\#2a2a38\] > :not(:last-child)) {
-    border-color: #2a2a38;
+  :where(.divide-whip-border > :not(:last-child)) {
+    border-color: var(--color-whip-border);
+  }
+
+  .self-end {
+    align-self: flex-end;
   }
 
   .self-start {
@@ -4940,8 +5000,8 @@
     border-radius: 5px;
   }
 
-  .rounded-\[6px\] {
-    border-radius: 6px;
+  .rounded-\[7px\] {
+    border-radius: 7px;
   }
 
   .rounded-\[10px\] {
@@ -4969,11 +5029,6 @@
     border-width: 1px;
   }
 
-  .border-0 {
-    border-style: var(--tw-border-style);
-    border-width: 0;
-  }
-
   .border-2 {
     border-style: var(--tw-border-style);
     border-width: 2px;
@@ -5019,38 +5074,14 @@
     border-style: dashed;
   }
 
-  .\!border-\[\#ef444440\] {
-    border-color: #ef444440 !important;
-  }
-
-  .border-\[\#1a1a1f\] {
-    border-color: #1a1a1f;
-  }
-
-  .border-\[\#1a2d3d\]\/60 {
-    border-color: oklab(28.87% -.0162366 -.0349719 / .6);
+  .\!border-\[\#ff3b4d40\] {
+    border-color: #ff3b4d40 !important;
   }
 
   .border-\[\#1a4a1a\] {
     border-color: #1a4a1a;
   }
 
-  .border-\[\#1e1e28\] {
-    border-color: #1e1e28;
-  }
-
-  .border-\[\#1f1f27\] {
-    border-color: #1f1f27;
-  }
-
-  .border-\[\#2a2a35\] {
-    border-color: #2a2a35;
-  }
-
-  .border-\[\#2a2a38\] {
-    border-color: #2a2a38;
-  }
-
   .border-\[\#2a4a2a\] {
     border-color: #2a4a2a;
   }
@@ -5063,14 +5094,6 @@
     border-color: #3a3a15;
   }
 
-  .border-\[\#3a3a50\] {
-    border-color: #3a3a50;
-  }
-
-  .border-\[\#3a3a55\] {
-    border-color: #3a3a55;
-  }
-
   .border-\[\#3a3aff40\] {
     border-color: #3a3aff40;
   }
@@ -5079,10 +5102,6 @@
     border-color: #3a3aff60;
   }
 
-  .border-\[\#3b82f6\] {
-    border-color: #3b82f6;
-  }
-
   .border-\[\#3b82f6\]\/25 {
     border-color: oklab(62.3083% -.0332476 -.185052 / .25);
   }
@@ -5099,278 +5118,134 @@
     border-color: #4a2a1a;
   }
 
-  .border-\[\#7c6aff30\] {
-    border-color: #7c6aff30;
-  }
-
-  .border-\[\#7c6aff\] {
-    border-color: #7c6aff;
+  .border-\[\#8b5cf6\]\/20 {
+    border-color: oklab(60.5631% .0845415 -.201932 / .2);
   }
 
-  .border-\[\#7c6aff\]\/20 {
-    border-color: oklab(62.0615% .0507061 -.20665 / .2);
+  .border-\[\#8b5cf6\]\/25 {
+    border-color: oklab(60.5631% .0845415 -.201932 / .25);
   }
 
-  .border-\[\#7c6aff\]\/25 {
-    border-color: oklab(62.0615% .0507061 -.20665 / .25);
+  .border-\[\#8b5cf6\]\/40 {
+    border-color: oklab(60.5631% .0845415 -.201932 / .4);
   }
 
-  .border-\[\#7c6aff\]\/40 {
-    border-color: oklab(62.0615% .0507061 -.20665 / .4);
+  .border-\[\#8b5cf6\]\/60 {
+    border-color: oklab(60.5631% .0845415 -.201932 / .6);
   }
 
   .border-\[\#22c55e\]\/25 {
     border-color: oklab(72.2746% -.165574 .0972219 / .25);
   }
 
-  .border-\[\#21212a\] {
-    border-color: #21212a;
-  }
-
-  .border-\[\#222228\] {
-    border-color: #222228;
-  }
-
-  .border-\[\#ef4444\]\/25 {
-    border-color: oklab(63.6834% .187864 .0889286 / .25);
-  }
-
-  .border-\[\#f97316\]\/25 {
-    border-color: oklab(70.4871% .125896 .137895 / .25);
-  }
-
-  .border-\[\#fb8147\]\/25 {
-    border-color: oklab(73.1647% .118121 .115767 / .25);
-  }
-
-  .border-\[var\(--color-border-secondary\)\] {
-    border-color: var(--color-border-secondary);
-  }
-
-  .border-amber-500\/30 {
-    border-color: #f99c004d;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .border-amber-500\/30 {
-      border-color: color-mix(in oklab, var(--color-amber-500) 30%, transparent);
-    }
-  }
-
-  .border-amber-500\/40 {
-    border-color: #f99c0066;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .border-amber-500\/40 {
-      border-color: color-mix(in oklab, var(--color-amber-500) 40%, transparent);
-    }
-  }
-
-  .border-amber-800\/40 {
-    border-color: #953d0066;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .border-amber-800\/40 {
-      border-color: color-mix(in oklab, var(--color-amber-800) 40%, transparent);
-    }
-  }
-
-  .border-blue-500 {
-    border-color: var(--color-blue-500);
-  }
-
-  .border-emerald-400\/25 {
-    border-color: #00d29440;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .border-emerald-400\/25 {
-      border-color: color-mix(in oklab, var(--color-emerald-400) 25%, transparent);
-    }
-  }
-
-  .border-emerald-500\/50 {
-    border-color: #00bb7f80;
+  .border-\[\#22c55e\]\/40 {
+    border-color: oklab(72.2746% -.165574 .0972219 / .4);
   }
 
-  @supports (color: color-mix(in lab, red, red)) {
-    .border-emerald-500\/50 {
-      border-color: color-mix(in oklab, var(--color-emerald-500) 50%, transparent);
-    }
+  .border-\[\#22c55e\]\/50 {
+    border-color: oklab(72.2746% -.165574 .0972219 / .5);
   }
 
-  .border-gray-400\/25 {
-    border-color: #99a1af40;
+  .border-\[\#21212a\] {
+    border-color: #21212a;
   }
 
-  @supports (color: color-mix(in lab, red, red)) {
-    .border-gray-400\/25 {
-      border-color: color-mix(in oklab, var(--color-gray-400) 25%, transparent);
-    }
+  .border-\[\#eab308\]\/25 {
+    border-color: oklab(79.5243% .0111457 .161283 / .25);
   }
 
-  .border-gray-700 {
-    border-color: var(--color-gray-700);
+  .border-\[\#eab308\]\/30 {
+    border-color: oklab(79.5243% .0111457 .161283 / .3);
   }
 
-  .border-gray-800 {
-    border-color: var(--color-gray-800);
+  .border-\[\#eab308\]\/40 {
+    border-color: oklab(79.5243% .0111457 .161283 / .4);
   }
 
-  .border-green-700\/50 {
-    border-color: #00813880;
+  .border-\[\#f97316\]\/25 {
+    border-color: oklab(70.4871% .125896 .137895 / .25);
   }
 
-  @supports (color: color-mix(in lab, red, red)) {
-    .border-green-700\/50 {
-      border-color: color-mix(in oklab, var(--color-green-700) 50%, transparent);
-    }
+  .border-\[\#fb8147\]\/25 {
+    border-color: oklab(73.1647% .118121 .115767 / .25);
   }
 
-  .border-orange-400\/25 {
-    border-color: #ff8b1a40;
+  .border-\[\#ff3b4d\]\/25 {
+    border-color: oklab(65.7568% .212691 .0854228 / .25);
   }
 
-  @supports (color: color-mix(in lab, red, red)) {
-    .border-orange-400\/25 {
-      border-color: color-mix(in oklab, var(--color-orange-400) 25%, transparent);
-    }
+  .border-\[\#ff3b4d\]\/30 {
+    border-color: oklab(65.7568% .212691 .0854228 / .3);
   }
 
-  .border-purple-800 {
-    border-color: var(--color-purple-800);
+  .border-\[\#ff3b4d\]\/40 {
+    border-color: oklab(65.7568% .212691 .0854228 / .4);
   }
 
-  .border-red-400\/25 {
-    border-color: #ff656840;
+  .border-\[var\(--color-border-secondary\)\] {
+    border-color: var(--color-border-secondary);
   }
 
-  @supports (color: color-mix(in lab, red, red)) {
-    .border-red-400\/25 {
-      border-color: color-mix(in oklab, var(--color-red-400) 25%, transparent);
-    }
+  .border-transparent {
+    border-color: #0000;
   }
 
-  .border-red-500\/30 {
-    border-color: #fb2c364d;
+  .border-whip-accent {
+    border-color: var(--color-whip-accent);
   }
 
-  @supports (color: color-mix(in lab, red, red)) {
-    .border-red-500\/30 {
-      border-color: color-mix(in oklab, var(--color-red-500) 30%, transparent);
-    }
+  .border-whip-border {
+    border-color: var(--color-whip-border);
   }
 
-  .border-red-500\/40 {
-    border-color: #fb2c3666;
+  .border-whip-border-hover {
+    border-color: var(--color-whip-border-hover);
   }
 
-  @supports (color: color-mix(in lab, red, red)) {
-    .border-red-500\/40 {
-      border-color: color-mix(in oklab, var(--color-red-500) 40%, transparent);
-    }
+  .border-whip-border-soft {
+    border-color: var(--color-whip-border-soft);
   }
 
-  .border-slate-400\/25 {
-    border-color: #90a1b940;
+  .border-whip-faint\/25 {
+    border-color: var(--color-whip-faint);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .border-slate-400\/25 {
-      border-color: color-mix(in oklab, var(--color-slate-400) 25%, transparent);
+    .border-whip-faint\/25 {
+      border-color: color-mix(in oklab, var(--color-whip-faint) 25%, transparent);
     }
   }
 
-  .border-transparent {
-    border-color: #0000;
-  }
-
-  .border-yellow-400\/25 {
-    border-color: #fac80040;
+  .border-whip-panel {
+    border-color: var(--color-whip-panel);
   }
 
-  @supports (color: color-mix(in lab, red, red)) {
-    .border-yellow-400\/25 {
-      border-color: color-mix(in oklab, var(--color-yellow-400) 25%, transparent);
-    }
+  .border-whip-panel-2 {
+    border-color: var(--color-whip-panel-2);
   }
 
-  .border-yellow-800\/40 {
-    border-color: #874b0066;
+  .border-whip-text, .border-whip-text\/25 {
+    border-color: var(--color-whip-text);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .border-yellow-800\/40 {
-      border-color: color-mix(in oklab, var(--color-yellow-800) 40%, transparent);
+    .border-whip-text\/25 {
+      border-color: color-mix(in oklab, var(--color-whip-text) 25%, transparent);
     }
   }
 
-  .bg-\[\#0a0a0e\] {
-    background-color: #0a0a0e;
-  }
-
-  .bg-\[\#0c0c0f\] {
-    background-color: #0c0c0f;
-  }
-
-  .bg-\[\#0d0d12\] {
-    background-color: #0d0d12;
-  }
-
-  .bg-\[\#0d1a2d\] {
-    background-color: #0d1a2d;
-  }
-
-  .bg-\[\#0e0e12\] {
-    background-color: #0e0e12;
-  }
-
-  .bg-\[\#0f0f10\] {
-    background-color: #0f0f10;
-  }
-
-  .bg-\[\#0f0f16\] {
-    background-color: #0f0f16;
-  }
-
   .bg-\[\#0f1f0f\] {
     background-color: #0f1f0f;
   }
 
-  .bg-\[\#0f3321\] {
-    background-color: #0f3321;
-  }
-
   .bg-\[\#1a1a1a\] {
     background-color: #1a1a1a;
   }
 
-  .bg-\[\#1a1a1f\] {
-    background-color: #1a1a1f;
-  }
-
-  .bg-\[\#1a1a1f\]\/40 {
-    background-color: oklab(21.9981% .00260042 -.00932831 / .4);
-  }
-
   .bg-\[\#1a1a2e\] {
     background-color: #1a1a2e;
   }
 
-  .bg-\[\#1a1a22\] {
-    background-color: #1a1a22;
-  }
-
-  .bg-\[\#1a1a24\] {
-    background-color: #1a1a24;
-  }
-
-  .bg-\[\#1a1a28\] {
-    background-color: #1a1a28;
-  }
-
   .bg-\[\#1a2a1a\] {
     background-color: #1a2a1a;
   }
@@ -5383,36 +5258,12 @@
     background-color: #1e1e0e;
   }
 
-  .bg-\[\#1e1e28\] {
-    background-color: #1e1e28;
-  }
-
-  .bg-\[\#1f1f28\] {
-    background-color: #1f1f28;
-  }
-
   .bg-\[\#2a1a1a\] {
     background-color: #2a1a1a;
   }
 
-  .bg-\[\#2a2a35\] {
-    background-color: #2a2a35;
-  }
-
-  .bg-\[\#2a2a38\] {
-    background-color: #2a2a38;
-  }
-
-  .bg-\[\#3a3a45\] {
-    background-color: #3a3a45;
-  }
-
-  .bg-\[\#3a3a48\] {
-    background-color: #3a3a48;
-  }
-
-  .bg-\[\#3a3a50\] {
-    background-color: #3a3a50;
+  .bg-\[\#3a3a3a\] {
+    background-color: #3a3a3a;
   }
 
   .bg-\[\#3b82f6\] {
@@ -5431,48 +5282,32 @@
     background-color: #3b82f615;
   }
 
-  .bg-\[\#3d1416\] {
-    background-color: #3d1416;
-  }
-
-  .bg-\[\#7c6aff08\] {
-    background-color: #7c6aff08;
-  }
-
-  .bg-\[\#7c6aff10\] {
-    background-color: #7c6aff10;
-  }
-
-  .bg-\[\#7c6aff12\] {
-    background-color: #7c6aff12;
-  }
-
-  .bg-\[\#7c6aff15\] {
-    background-color: #7c6aff15;
+  .bg-\[\#5f6672\] {
+    background-color: #5f6672;
   }
 
-  .bg-\[\#7c6aff18\] {
-    background-color: #7c6aff18;
+  .bg-\[\#5f6672\]\/10 {
+    background-color: oklab(50.849% -.003167 -.0206783 / .1);
   }
 
-  .bg-\[\#7c6aff20\] {
-    background-color: #7c6aff20;
+  .bg-\[\#8b5cf6\] {
+    background-color: #8b5cf6;
   }
 
-  .bg-\[\#7c6aff\] {
-    background-color: #7c6aff;
+  .bg-\[\#8b5cf6\]\/8 {
+    background-color: oklab(60.5631% .0845415 -.201932 / .08);
   }
 
-  .bg-\[\#7c6aff\]\/8 {
-    background-color: oklab(62.0615% .0507061 -.20665 / .08);
+  .bg-\[\#8b5cf6\]\/10 {
+    background-color: oklab(60.5631% .0845415 -.201932 / .1);
   }
 
-  .bg-\[\#7c6aff\]\/10 {
-    background-color: oklab(62.0615% .0507061 -.20665 / .1);
+  .bg-\[\#8b5cf6\]\/15 {
+    background-color: oklab(60.5631% .0845415 -.201932 / .15);
   }
 
-  .bg-\[\#7c6aff\]\/15 {
-    background-color: oklab(62.0615% .0507061 -.20665 / .15);
+  .bg-\[\#8b5cf615\] {
+    background-color: #8b5cf615;
   }
 
   .bg-\[\#22c55e15\] {
@@ -5487,20 +5322,12 @@
     background-color: oklab(72.2746% -.165574 .0972219 / .1);
   }
 
-  .bg-\[\#22c55e\]\/40 {
-    background-color: oklab(72.2746% -.165574 .0972219 / .4);
-  }
-
-  .bg-\[\#143d27\] {
-    background-color: #143d27;
-  }
-
-  .bg-\[\#330f10\] {
-    background-color: #330f10;
+  .bg-\[\#22c55e\]\/20 {
+    background-color: oklab(72.2746% -.165574 .0972219 / .2);
   }
 
-  .bg-\[\#13131a\] {
-    background-color: #13131a;
+  .bg-\[\#22c55e\]\/40 {
+    background-color: oklab(72.2746% -.165574 .0972219 / .4);
   }
 
   .bg-\[\#16160a\] {
@@ -5511,38 +5338,22 @@
     background-color: #16161c;
   }
 
-  .bg-\[\#111115\] {
-    background-color: #111115;
-  }
-
-  .bg-\[\#111118\] {
-    background-color: #111118;
-  }
-
-  .bg-\[\#141417\] {
-    background-color: #141417;
+  .bg-\[\#eab308\] {
+    background-color: #eab308;
   }
 
-  .bg-\[\#141418\] {
-    background-color: #141418;
+  .bg-\[\#eab308\]\/10 {
+    background-color: oklab(79.5243% .0111457 .161283 / .1);
   }
 
-  .bg-\[\#a78bfa10\] {
-    background-color: #a78bfa10;
+  .bg-\[\#eab308\]\/15 {
+    background-color: oklab(79.5243% .0111457 .161283 / .15);
   }
 
   .bg-\[\#eab30815\] {
     background-color: #eab30815;
   }
 
-  .bg-\[\#ef4444\] {
-    background-color: #ef4444;
-  }
-
-  .bg-\[\#ef4444\]\/10 {
-    background-color: oklab(63.6834% .187864 .0889286 / .1);
-  }
-
   .bg-\[\#f59e0b\] {
     background-color: #f59e0b;
   }
@@ -5563,44 +5374,20 @@
     background-color: oklab(73.1647% .118121 .115767 / .1);
   }
 
-  .bg-amber-400\/10 {
-    background-color: #fcbb001a;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-amber-400\/10 {
-      background-color: color-mix(in oklab, var(--color-amber-400) 10%, transparent);
-    }
-  }
-
-  .bg-amber-500\/10 {
-    background-color: #f99c001a;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-amber-500\/10 {
-      background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
-    }
-  }
-
-  .bg-amber-500\/15 {
-    background-color: #f99c0026;
+  .bg-\[\#ff3b4d\] {
+    background-color: #ff3b4d;
   }
 
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-amber-500\/15 {
-      background-color: color-mix(in oklab, var(--color-amber-500) 15%, transparent);
-    }
+  .bg-\[\#ff3b4d\]\/5 {
+    background-color: oklab(65.7568% .212691 .0854228 / .05);
   }
 
-  .bg-amber-950\/40 {
-    background-color: #46190166;
+  .bg-\[\#ff3b4d\]\/10 {
+    background-color: oklab(65.7568% .212691 .0854228 / .1);
   }
 
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-amber-950\/40 {
-      background-color: color-mix(in oklab, var(--color-amber-950) 40%, transparent);
-    }
+  .bg-\[\#ff3b4d\]\/20 {
+    background-color: oklab(65.7568% .212691 .0854228 / .2);
   }
 
   .bg-black\/50 {
@@ -5633,248 +5420,172 @@
     }
   }
 
-  .bg-blue-400 {
-    background-color: var(--color-blue-400);
+  .bg-transparent {
+    background-color: #0000;
   }
 
-  .bg-blue-400\/10 {
-    background-color: #54a2ff1a;
+  .bg-whip-accent, .bg-whip-accent\/8 {
+    background-color: var(--color-whip-accent);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .bg-blue-400\/10 {
-      background-color: color-mix(in oklab, var(--color-blue-400) 10%, transparent);
+    .bg-whip-accent\/8 {
+      background-color: color-mix(in oklab, var(--color-whip-accent) 8%, transparent);
     }
   }
 
-  .bg-blue-500 {
-    background-color: var(--color-blue-500);
+  .bg-whip-accent\/10 {
+    background-color: var(--color-whip-accent);
   }
 
-  .bg-emerald-400 {
-    background-color: var(--color-emerald-400);
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-whip-accent\/10 {
+      background-color: color-mix(in oklab, var(--color-whip-accent) 10%, transparent);
+    }
   }
 
-  .bg-emerald-400\/10 {
-    background-color: #00d2941a;
+  .bg-whip-accent\/12 {
+    background-color: var(--color-whip-accent);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .bg-emerald-400\/10 {
-      background-color: color-mix(in oklab, var(--color-emerald-400) 10%, transparent);
+    .bg-whip-accent\/12 {
+      background-color: color-mix(in oklab, var(--color-whip-accent) 12%, transparent);
     }
   }
 
-  .bg-gray-400 {
-    background-color: var(--color-gray-400);
-  }
-
-  .bg-gray-400\/10 {
-    background-color: #99a1af1a;
+  .bg-whip-accent\/15 {
+    background-color: var(--color-whip-accent);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .bg-gray-400\/10 {
-      background-color: color-mix(in oklab, var(--color-gray-400) 10%, transparent);
+    .bg-whip-accent\/15 {
+      background-color: color-mix(in oklab, var(--color-whip-accent) 15%, transparent);
     }
   }
 
-  .bg-gray-500 {
-    background-color: var(--color-gray-500);
-  }
-
-  .bg-gray-500\/10 {
-    background-color: #6a72821a;
+  .bg-whip-accent\/18 {
+    background-color: var(--color-whip-accent);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .bg-gray-500\/10 {
-      background-color: color-mix(in oklab, var(--color-gray-500) 10%, transparent);
+    .bg-whip-accent\/18 {
+      background-color: color-mix(in oklab, var(--color-whip-accent) 18%, transparent);
     }
   }
 
-  .bg-gray-700 {
-    background-color: var(--color-gray-700);
-  }
-
-  .bg-gray-700\/30 {
-    background-color: #3641534d;
+  .bg-whip-accent\/20 {
+    background-color: var(--color-whip-accent);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .bg-gray-700\/30 {
-      background-color: color-mix(in oklab, var(--color-gray-700) 30%, transparent);
+    .bg-whip-accent\/20 {
+      background-color: color-mix(in oklab, var(--color-whip-accent) 20%, transparent);
     }
   }
 
-  .bg-gray-700\/50 {
-    background-color: #36415380;
+  .bg-whip-accent\/\[7\%\] {
+    background-color: var(--color-whip-accent);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .bg-gray-700\/50 {
-      background-color: color-mix(in oklab, var(--color-gray-700) 50%, transparent);
+    .bg-whip-accent\/\[7\%\] {
+      background-color: color-mix(in oklab, var(--color-whip-accent) 7%, transparent);
     }
   }
 
-  .bg-green-400\/10 {
-    background-color: #05df721a;
+  .bg-whip-bg {
+    background-color: var(--color-whip-bg);
   }
 
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-green-400\/10 {
-      background-color: color-mix(in oklab, var(--color-green-400) 10%, transparent);
-    }
-  }
-
-  .bg-green-600 {
-    background-color: var(--color-green-600);
+  .bg-whip-border {
+    background-color: var(--color-whip-border);
   }
 
-  .bg-green-700 {
-    background-color: var(--color-green-700);
+  .bg-whip-border-soft {
+    background-color: var(--color-whip-border-soft);
   }
 
-  .bg-green-800\/60 {
-    background-color: #01663099;
+  .bg-whip-border\/30 {
+    background-color: var(--color-whip-border);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .bg-green-800\/60 {
-      background-color: color-mix(in oklab, var(--color-green-800) 60%, transparent);
+    .bg-whip-border\/30 {
+      background-color: color-mix(in oklab, var(--color-whip-border) 30%, transparent);
     }
   }
 
-  .bg-orange-400 {
-    background-color: var(--color-orange-400);
-  }
-
-  .bg-orange-400\/10 {
-    background-color: #ff8b1a1a;
+  .bg-whip-border\/50 {
+    background-color: var(--color-whip-border);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .bg-orange-400\/10 {
-      background-color: color-mix(in oklab, var(--color-orange-400) 10%, transparent);
+    .bg-whip-border\/50 {
+      background-color: color-mix(in oklab, var(--color-whip-border) 50%, transparent);
     }
   }
 
-  .bg-orange-500 {
-    background-color: var(--color-orange-500);
-  }
-
-  .bg-purple-400\/10 {
-    background-color: #c07eff1a;
+  .bg-whip-faint, .bg-whip-faint\/10 {
+    background-color: var(--color-whip-faint);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .bg-purple-400\/10 {
-      background-color: color-mix(in oklab, var(--color-purple-400) 10%, transparent);
+    .bg-whip-faint\/10 {
+      background-color: color-mix(in oklab, var(--color-whip-faint) 10%, transparent);
     }
   }
 
-  .bg-purple-500 {
-    background-color: var(--color-purple-500);
-  }
-
-  .bg-purple-950\/30 {
-    background-color: #3c03664d;
+  .bg-whip-muted {
+    background-color: var(--color-whip-muted);
   }
 
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-purple-950\/30 {
-      background-color: color-mix(in oklab, var(--color-purple-950) 30%, transparent);
-    }
+  .bg-whip-panel {
+    background-color: var(--color-whip-panel);
   }
 
-  .bg-red-400 {
-    background-color: var(--color-red-400);
+  .bg-whip-panel-2 {
+    background-color: var(--color-whip-panel-2);
   }
 
-  .bg-red-400\/10 {
-    background-color: #ff65681a;
+  .bg-whip-panel\/40 {
+    background-color: var(--color-whip-panel);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .bg-red-400\/10 {
-      background-color: color-mix(in oklab, var(--color-red-400) 10%, transparent);
+    .bg-whip-panel\/40 {
+      background-color: color-mix(in oklab, var(--color-whip-panel) 40%, transparent);
     }
   }
 
-  .bg-red-500 {
-    background-color: var(--color-red-500);
+  .bg-whip-surface {
+    background-color: var(--color-whip-surface);
   }
 
-  .bg-red-500\/5 {
-    background-color: #fb2c360d;
+  .bg-whip-text, .bg-whip-text\/10 {
+    background-color: var(--color-whip-text);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .bg-red-500\/5 {
-      background-color: color-mix(in oklab, var(--color-red-500) 5%, transparent);
+    .bg-whip-text\/10 {
+      background-color: color-mix(in oklab, var(--color-whip-text) 10%, transparent);
     }
   }
 
-  .bg-red-500\/10 {
-    background-color: #fb2c361a;
+  .bg-whip-text\/12 {
+    background-color: var(--color-whip-text);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .bg-red-500\/10 {
-      background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
+    .bg-whip-text\/12 {
+      background-color: color-mix(in oklab, var(--color-whip-text) 12%, transparent);
     }
   }
 
-  .bg-slate-400 {
-    background-color: var(--color-slate-400);
-  }
-
-  .bg-slate-400\/10 {
-    background-color: #90a1b91a;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-slate-400\/10 {
-      background-color: color-mix(in oklab, var(--color-slate-400) 10%, transparent);
-    }
-  }
-
-  .bg-transparent {
-    background-color: #0000;
-  }
-
   .bg-white {
     background-color: var(--color-white);
   }
 
-  .bg-yellow-400 {
-    background-color: var(--color-yellow-400);
-  }
-
-  .bg-yellow-400\/10 {
-    background-color: #fac8001a;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-yellow-400\/10 {
-      background-color: color-mix(in oklab, var(--color-yellow-400) 10%, transparent);
-    }
-  }
-
-  .bg-yellow-500 {
-    background-color: var(--color-yellow-500);
-  }
-
-  .bg-yellow-950\/20 {
-    background-color: #43200433;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-yellow-950\/20 {
-      background-color: color-mix(in oklab, var(--color-yellow-950) 20%, transparent);
-    }
-  }
-
   .fill-current {
     fill: currentColor;
   }
@@ -5935,10 +5646,6 @@
     padding: 2px;
   }
 
-  .p-\[18px\] {
-    padding: 18px;
-  }
-
   .px-0 {
     padding-inline: calc(var(--spacing) * 0);
   }
@@ -6075,6 +5782,10 @@
     padding-block: 5px;
   }
 
+  .py-\[7px\] {
+    padding-block: 7px;
+  }
+
   .py-\[9px\] {
     padding-block: 9px;
   }
@@ -6087,10 +5798,6 @@
     padding-block: 18px;
   }
 
-  .py-px {
-    padding-block: 1px;
-  }
-
   .pt-0\.5 {
     padding-top: calc(var(--spacing) * .5);
   }
@@ -6115,10 +5822,6 @@
     padding-top: calc(var(--spacing) * 3.5);
   }
 
-  .pt-5 {
-    padding-top: calc(var(--spacing) * 5);
-  }
-
   .pt-6 {
     padding-top: calc(var(--spacing) * 6);
   }
@@ -6127,6 +5830,10 @@
     padding-top: 14px;
   }
 
+  .pt-\[18px\] {
+    padding-top: 18px;
+  }
+
   .pr-2 {
     padding-right: calc(var(--spacing) * 2);
   }
@@ -6135,6 +5842,10 @@
     padding-right: calc(var(--spacing) * 2.5);
   }
 
+  .pr-3 {
+    padding-right: calc(var(--spacing) * 3);
+  }
+
   .pr-7 {
     padding-right: calc(var(--spacing) * 7);
   }
@@ -6187,20 +5898,16 @@
     padding-left: calc(var(--spacing) * 3);
   }
 
-  .pl-3\.5 {
-    padding-left: calc(var(--spacing) * 3.5);
-  }
-
   .pl-4 {
     padding-left: calc(var(--spacing) * 4);
   }
 
-  .pl-10 {
-    padding-left: calc(var(--spacing) * 10);
+  .pl-5 {
+    padding-left: calc(var(--spacing) * 5);
   }
 
-  .pl-\[10px\] {
-    padding-left: 10px;
+  .pl-10 {
+    padding-left: calc(var(--spacing) * 10);
   }
 
   .pl-\[18px\] {
@@ -6241,11 +5948,6 @@
     line-height: var(--tw-leading, var(--text-base--line-height));
   }
 
-  .text-lg {
-    font-size: var(--text-lg);
-    line-height: var(--tw-leading, var(--text-lg--line-height));
-  }
-
   .text-sm {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -6318,6 +6020,11 @@
     line-height: 1.7;
   }
 
+  .leading-\[1\.45\] {
+    --tw-leading: 1.45;
+    line-height: 1.45;
+  }
+
   .leading-none {
     --tw-leading: 1;
     line-height: 1;
@@ -6338,6 +6045,11 @@
     line-height: var(--leading-snug);
   }
 
+  .leading-tight {
+    --tw-leading: var(--leading-tight);
+    line-height: var(--leading-tight);
+  }
+
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
@@ -6373,11 +6085,6 @@
     letter-spacing: .5px;
   }
 
-  .tracking-\[0\.8px\] {
-    --tw-tracking: .8px;
-    letter-spacing: .8px;
-  }
-
   .tracking-\[1px\] {
     --tw-tracking: 1px;
     letter-spacing: 1px;
@@ -6408,16 +6115,8 @@
     white-space: pre-wrap;
   }
 
-  .\!text-\[\#ef4444\] {
-    color: #ef4444 !important;
-  }
-
-  .text-\[\#0c0c0f\] {
-    color: #0c0c0f;
-  }
-
-  .text-\[\#2a2a35\] {
-    color: #2a2a35;
+  .\!text-\[\#ff3b4d\] {
+    color: #ff3b4d !important;
   }
 
   .text-\[\#2a6a2a\] {
@@ -6428,88 +6127,44 @@
     color: #3a3a4a;
   }
 
-  .text-\[\#3a3a45\] {
-    color: #3a3a45;
-  }
-
   .text-\[\#3b82f6\] {
     color: #3b82f6;
   }
 
-  .text-\[\#4a4a5a\] {
-    color: #4a4a5a;
-  }
-
-  .text-\[\#4a7aad\]\/90 {
-    color: oklab(56.7767% -.0307338 -.0901333 / .9);
-  }
-
   .text-\[\#4ade80\] {
     color: #4ade80;
   }
 
-  .text-\[\#6a6a80\] {
-    color: #6a6a80;
-  }
-
-  .text-\[\#6b6b80\] {
-    color: #6b6b80;
-  }
-
   .text-\[\#7a7a40\] {
     color: #7a7a40;
   }
 
-  .text-\[\#7aa2f7\] {
-    color: #7aa2f7;
+  .text-\[\#8b5cf6\] {
+    color: #8b5cf6;
   }
 
-  .text-\[\#7c6aff\] {
-    color: #7c6aff;
+  .text-\[\#8b5cf6\]\/70 {
+    color: oklab(60.5631% .0845415 -.201932 / .7);
   }
 
   .text-\[\#22c55e\] {
     color: #22c55e;
   }
 
-  .text-\[\#8888a0\] {
-    color: #8888a0;
+  .text-\[\#86efac\] {
+    color: #86efac;
   }
 
-  .text-\[\#45455a\] {
-    color: #45455a;
-  }
-
-  .text-\[\#60607a\] {
-    color: #60607a;
-  }
-
-  .text-\[\#a0a0b8\] {
-    color: #a0a0b8;
+  .text-\[\#111111\] {
+    color: #111;
   }
 
   .text-\[\#a0a0c0\] {
     color: #a0a0c0;
   }
 
-  .text-\[\#a78bfa\] {
-    color: #a78bfa;
-  }
-
-  .text-\[\#b3a8ff\] {
-    color: #b3a8ff;
-  }
-
-  .text-\[\#b7f5d0\] {
-    color: #b7f5d0;
-  }
-
-  .text-\[\#c0c0d0\] {
-    color: #c0c0d0;
-  }
-
-  .text-\[\#c4baff\] {
-    color: #c4baff;
+  .text-\[\#c4b5fd\] {
+    color: #c4b5fd;
   }
 
   .text-\[\#c4c4d4\] {
@@ -6524,24 +6179,20 @@
     color: #c8c8d4;
   }
 
-  .text-\[\#e0e0ea\] {
-    color: #e0e0ea;
-  }
-
   .text-\[\#eab308\] {
     color: #eab308;
   }
 
-  .text-\[\#ef4444\] {
-    color: #ef4444;
+  .text-\[\#eab308\]\/60 {
+    color: oklab(79.5243% .0111457 .161283 / .6);
   }
 
-  .text-\[\#f0f0f5\] {
-    color: #f0f0f5;
+  .text-\[\#eab308\]\/90 {
+    color: oklab(79.5243% .0111457 .161283 / .9);
   }
 
-  .text-\[\#f59e0b80\] {
-    color: #f59e0b80;
+  .text-\[\#f5f5f5\] {
+    color: #f5f5f5;
   }
 
   .text-\[\#f87171\] {
@@ -6560,210 +6211,48 @@
     color: #fb8147;
   }
 
-  .text-\[\#ffd0d2\] {
-    color: #ffd0d2;
-  }
-
-  .text-amber-200 {
-    color: var(--color-amber-200);
-  }
-
-  .text-amber-200\/90 {
-    color: #fee685e6;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .text-amber-200\/90 {
-      color: color-mix(in oklab, var(--color-amber-200) 90%, transparent);
-    }
-  }
-
-  .text-amber-300 {
-    color: var(--color-amber-300);
-  }
-
-  .text-amber-300\/90 {
-    color: #ffd236e6;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .text-amber-300\/90 {
-      color: color-mix(in oklab, var(--color-amber-300) 90%, transparent);
-    }
-  }
-
-  .text-amber-400 {
-    color: var(--color-amber-400);
-  }
-
-  .text-amber-500 {
-    color: var(--color-amber-500);
-  }
-
-  .text-blue-300 {
-    color: var(--color-blue-300);
-  }
-
-  .text-blue-400 {
-    color: var(--color-blue-400);
-  }
-
-  .text-blue-500 {
-    color: var(--color-blue-500);
-  }
-
-  .text-emerald-400 {
-    color: var(--color-emerald-400);
-  }
-
-  .text-emerald-500 {
-    color: var(--color-emerald-500);
-  }
-
-  .text-gray-100 {
-    color: var(--color-gray-100);
-  }
-
-  .text-gray-200 {
-    color: var(--color-gray-200);
-  }
-
-  .text-gray-300 {
-    color: var(--color-gray-300);
-  }
-
-  .text-gray-400 {
-    color: var(--color-gray-400);
-  }
-
-  .text-gray-500 {
-    color: var(--color-gray-500);
-  }
-
-  .text-gray-600 {
-    color: var(--color-gray-600);
-  }
-
-  .text-gray-700 {
-    color: var(--color-gray-700);
-  }
-
-  .text-green-300 {
-    color: var(--color-green-300);
-  }
-
-  .text-green-400 {
-    color: var(--color-green-400);
-  }
-
-  .text-green-500 {
-    color: var(--color-green-500);
-  }
-
-  .text-green-600 {
-    color: var(--color-green-600);
-  }
-
-  .text-green-700 {
-    color: var(--color-green-700);
-  }
-
-  .text-neutral-300 {
-    color: var(--color-neutral-300);
-  }
-
-  .text-orange-400 {
-    color: var(--color-orange-400);
-  }
-
-  .text-purple-100 {
-    color: var(--color-purple-100);
-  }
-
-  .text-purple-400 {
-    color: var(--color-purple-400);
-  }
-
-  .text-purple-400\/70 {
-    color: #c07effb3;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .text-purple-400\/70 {
-      color: color-mix(in oklab, var(--color-purple-400) 70%, transparent);
-    }
-  }
-
-  .text-red-300\/90 {
-    color: #ffa3a3e6;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .text-red-300\/90 {
-      color: color-mix(in oklab, var(--color-red-300) 90%, transparent);
-    }
-  }
-
-  .text-red-400 {
-    color: var(--color-red-400);
-  }
-
-  .text-red-500 {
-    color: var(--color-red-500);
+  .text-\[\#fca5a5\] {
+    color: #fca5a5;
   }
 
-  .text-red-600 {
-    color: var(--color-red-600);
+  .text-\[\#ff3b4d\] {
+    color: #ff3b4d;
   }
 
-  .text-red-700 {
-    color: var(--color-red-700);
-  }
-
-  .text-slate-400 {
-    color: var(--color-slate-400);
+  .text-\[\#ff9aa4\] {
+    color: #ff9aa4;
   }
 
   .text-transparent {
     color: #0000;
   }
 
-  .text-white {
-    color: var(--color-white);
-  }
-
-  .text-yellow-200\/90 {
-    color: #fff085e6;
+  .text-whip-accent {
+    color: var(--color-whip-accent);
   }
 
-  @supports (color: color-mix(in lab, red, red)) {
-    .text-yellow-200\/90 {
-      color: color-mix(in oklab, var(--color-yellow-200) 90%, transparent);
-    }
+  .text-whip-accent-text {
+    color: var(--color-whip-accent-text);
   }
 
-  .text-yellow-400 {
-    color: var(--color-yellow-400);
+  .text-whip-border {
+    color: var(--color-whip-border);
   }
 
-  .text-yellow-500\/60 {
-    color: #edb20099;
+  .text-whip-faint {
+    color: var(--color-whip-faint);
   }
 
-  @supports (color: color-mix(in lab, red, red)) {
-    .text-yellow-500\/60 {
-      color: color-mix(in oklab, var(--color-yellow-500) 60%, transparent);
-    }
+  .text-whip-muted {
+    color: var(--color-whip-muted);
   }
 
-  .text-yellow-600\/60 {
-    color: #cd890099;
+  .text-whip-text {
+    color: var(--color-whip-text);
   }
 
-  @supports (color: color-mix(in lab, red, red)) {
-    .text-yellow-600\/60 {
-      color: color-mix(in oklab, var(--color-yellow-600) 60%, transparent);
-    }
+  .text-white {
+    color: var(--color-white);
   }
 
   .capitalize {
@@ -6795,20 +6284,12 @@
     text-underline-offset: 2px;
   }
 
-  .placeholder-\[\#2a2a35\]::placeholder {
-    color: #2a2a35;
-  }
-
-  .placeholder-\[\#60607a\]::placeholder {
-    color: #60607a;
+  .placeholder-whip-faint::placeholder {
+    color: var(--color-whip-faint);
   }
 
-  .placeholder-gray-600::placeholder {
-    color: var(--color-gray-600);
-  }
-
-  .accent-blue-500 {
-    accent-color: var(--color-blue-500);
+  .accent-whip-accent {
+    accent-color: var(--color-whip-accent);
   }
 
   .opacity-0 {
@@ -6827,18 +6308,23 @@
     opacity: .7;
   }
 
+  .shadow {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
   .shadow-2xl {
     --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
-  .shadow-\[0_0_10px_rgba\(59\,130\,246\,0\.15\)\] {
-    --tw-shadow: 0 0 10px var(--tw-shadow-color, #3b82f626);
+  .shadow-\[0_0_10px_rgba\(255\,255\,255\,0\.15\)\] {
+    --tw-shadow: 0 0 10px var(--tw-shadow-color, #ffffff26);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
-  .shadow-\[0_4px_20px_rgba\(0\,0\,0\,0\.4\)\] {
-    --tw-shadow: 0 4px 20px var(--tw-shadow-color, #0006);
+  .shadow-\[0_8px_32px_rgba\(0\,0\,0\,0\.4\)\] {
+    --tw-shadow: 0 8px 32px var(--tw-shadow-color, #0006);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
@@ -6862,24 +6348,18 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
-  .shadow-blue-500\/20 {
-    --tw-shadow-color: #3080ff33;
+  .shadow-black\/40 {
+    --tw-shadow-color: #0006;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .shadow-blue-500\/20 {
-      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-500) 20%, transparent) var(--tw-shadow-alpha), transparent);
+    .shadow-black\/40 {
+      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 40%, transparent) var(--tw-shadow-alpha), transparent);
     }
   }
 
-  .ring-green-500\/50 {
-    --tw-ring-color: #00c75880;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .ring-green-500\/50 {
-      --tw-ring-color: color-mix(in oklab, var(--color-green-500) 50%, transparent);
-    }
+  .ring-\[\#22c55e\]\/50 {
+    --tw-ring-color: oklab(72.2746% -.165574 .0972219 / .5);
   }
 
   .transition-\[filter\] {
@@ -6941,23 +6421,17 @@
       display: none;
     }
 
-    .group-hover\:bg-blue-500\/60:is(:where(.group):hover *) {
-      background-color: #3080ff99;
+    .group-hover\:bg-\[\#ff3b4d\]\/10:is(:where(.group):hover *) {
+      background-color: oklab(65.7568% .212691 .0854228 / .1);
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .group-hover\:bg-blue-500\/60:is(:where(.group):hover *) {
-        background-color: color-mix(in oklab, var(--color-blue-500) 60%, transparent);
-      }
-    }
-
-    .group-hover\:bg-red-400\/10:is(:where(.group):hover *) {
-      background-color: #ff65681a;
+    .group-hover\:bg-white\/60:is(:where(.group):hover *) {
+      background-color: #fff9;
     }
 
     @supports (color: color-mix(in lab, red, red)) {
-      .group-hover\:bg-red-400\/10:is(:where(.group):hover *) {
-        background-color: color-mix(in oklab, var(--color-red-400) 10%, transparent);
+      .group-hover\:bg-white\/60:is(:where(.group):hover *) {
+        background-color: color-mix(in oklab, var(--color-white) 60%, transparent);
       }
     }
 
@@ -6966,16 +6440,8 @@
     }
   }
 
-  .placeholder\:text-\[\#3a3a45\]::placeholder {
-    color: #3a3a45;
-  }
-
-  .placeholder\:text-\[\#3a3a48\]::placeholder {
-    color: #3a3a48;
-  }
-
-  .placeholder\:text-\[\#4a4a5a\]::placeholder {
-    color: #4a4a5a;
+  .placeholder\:text-whip-faint::placeholder {
+    color: var(--color-whip-faint);
   }
 
   .last\:mb-0:last-child {
@@ -6987,135 +6453,99 @@
     border-width: 0;
   }
 
-  .focus-within\:border-\[\#3a3a50\]:focus-within {
-    border-color: #3a3a50;
+  .focus-within\:border-whip-border-hover:focus-within {
+    border-color: var(--color-whip-border-hover);
   }
 
   @media (hover: hover) {
-    .hover\:border-\[\#3a3a45\]:hover {
-      border-color: #3a3a45;
-    }
-
-    .hover\:border-\[\#3a3a48\]:hover {
-      border-color: #3a3a48;
-    }
-
-    .hover\:border-\[\#3a3a50\]:hover {
-      border-color: #3a3a50;
-    }
-
-    .hover\:border-blue-600:hover {
-      border-color: var(--color-blue-600);
+    .hover\:border-\[\#8b5cf6\]\/60:hover {
+      border-color: oklab(60.5631% .0845415 -.201932 / .6);
     }
 
-    .hover\:border-gray-600:hover {
-      border-color: var(--color-gray-600);
+    .hover\:border-whip-border-hover:hover {
+      border-color: var(--color-whip-border-hover);
     }
 
-    .hover\:border-purple-700:hover {
-      border-color: var(--color-purple-700);
-    }
-
-    .hover\:border-red-500\/60:hover {
-      border-color: #fb2c3699;
+    .hover\:border-white\/40:hover {
+      border-color: #fff6;
     }
 
     @supports (color: color-mix(in lab, red, red)) {
-      .hover\:border-red-500\/60:hover {
-        border-color: color-mix(in oklab, var(--color-red-500) 60%, transparent);
+      .hover\:border-white\/40:hover {
+        border-color: color-mix(in oklab, var(--color-white) 40%, transparent);
       }
     }
 
-    .hover\:bg-\[\#1a1a1f\]:hover {
-      background-color: #1a1a1f;
-    }
-
     .hover\:bg-\[\#1a1a22\]:hover {
       background-color: #1a1a22;
     }
 
-    .hover\:bg-\[\#1a1a24\]:hover {
-      background-color: #1a1a24;
-    }
-
-    .hover\:bg-\[\#1e1e28\]:hover {
-      background-color: #1e1e28;
-    }
-
-    .hover\:bg-\[\#2a2a35\]:hover {
-      background-color: #2a2a35;
+    .hover\:bg-\[\#22c55e\]:hover {
+      background-color: #22c55e;
     }
 
-    .hover\:bg-\[\#6a5ae0\]:hover {
-      background-color: #6a5ae0;
+    .hover\:bg-\[\#22c55e\]\/20:hover {
+      background-color: oklab(72.2746% -.165574 .0972219 / .2);
     }
 
-    .hover\:bg-\[\#7c6aff\]\/40:hover {
-      background-color: oklab(62.0615% .0507061 -.20665 / .4);
-    }
-
-    .hover\:bg-\[\#13131a\]:hover {
-      background-color: #13131a;
+    .hover\:bg-\[\#252510\]:hover {
+      background-color: #252510;
     }
 
-    .hover\:bg-\[\#15151b\]:hover {
-      background-color: #15151b;
+    .hover\:bg-\[\#e0293a\]:hover {
+      background-color: #e0293a;
     }
 
-    .hover\:bg-\[\#17171f\]:hover {
-      background-color: #17171f;
+    .hover\:bg-\[\#ff3b4d20\]:hover {
+      background-color: #ff3b4d20;
     }
 
-    .hover\:bg-\[\#252510\]:hover {
-      background-color: #252510;
+    .hover\:bg-\[\#ff3b4d\]\/10:hover {
+      background-color: oklab(65.7568% .212691 .0854228 / .1);
     }
 
-    .hover\:bg-\[\#252530\]:hover {
-      background-color: #252530;
-    }
-
-    .hover\:bg-\[\#ef444420\]:hover {
-      background-color: #ef444420;
+    .hover\:bg-\[\#ff3b4d\]\/20:hover {
+      background-color: oklab(65.7568% .212691 .0854228 / .2);
     }
 
     .hover\:bg-\[var\(--color-surface-hover\)\]:hover {
       background-color: var(--color-surface-hover);
     }
 
-    .hover\:bg-blue-500\/40:hover {
-      background-color: #3080ff66;
+    .hover\:bg-whip-accent\/40:hover {
+      background-color: var(--color-whip-accent);
     }
 
     @supports (color: color-mix(in lab, red, red)) {
-      .hover\:bg-blue-500\/40:hover {
-        background-color: color-mix(in oklab, var(--color-blue-500) 40%, transparent);
+      .hover\:bg-whip-accent\/40:hover {
+        background-color: color-mix(in oklab, var(--color-whip-accent) 40%, transparent);
       }
     }
 
-    .hover\:bg-gray-800:hover {
-      background-color: var(--color-gray-800);
+    .hover\:bg-whip-border:hover {
+      background-color: var(--color-whip-border);
     }
 
-    .hover\:bg-green-400\/20:hover {
-      background-color: #05df7233;
+    .hover\:bg-whip-border-soft:hover {
+      background-color: var(--color-whip-border-soft);
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .hover\:bg-green-400\/20:hover {
-        background-color: color-mix(in oklab, var(--color-green-400) 20%, transparent);
-      }
+    .hover\:bg-whip-panel:hover {
+      background-color: var(--color-whip-panel);
     }
 
-    .hover\:bg-green-700:hover {
-      background-color: var(--color-green-700);
+    .hover\:bg-whip-panel-2:hover {
+      background-color: var(--color-whip-panel-2);
     }
 
-    .hover\:bg-red-500:hover {
-      background-color: var(--color-red-500);
+    .hover\:bg-white\/20:hover {
+      background-color: #fff3;
     }
 
-    .hover\:bg-red-600:hover {
-      background-color: var(--color-red-600);
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-white\/20:hover {
+        background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
+      }
     }
 
     .hover\:bg-white\/\[0\.02\]:hover {
@@ -7148,24 +6578,12 @@
       }
     }
 
-    .hover\:text-\[\#7c6aff\]:hover {
-      color: #7c6aff;
-    }
-
-    .hover\:text-\[\#9a9ab0\]:hover {
-      color: #9a9ab0;
-    }
-
     .hover\:text-\[\#22c55e\]:hover {
       color: #22c55e;
     }
 
-    .hover\:text-\[\#8888a0\]:hover {
-      color: #8888a0;
-    }
-
-    .hover\:text-\[\#c0c0d0\]:hover {
-      color: #c0c0d0;
+    .hover\:text-\[\#22c55e\]\/80:hover {
+      color: oklab(72.2746% -.165574 .0972219 / .8);
     }
 
     .hover\:text-\[\#c8b866\]:hover {
@@ -7176,60 +6594,24 @@
       color: #e0d080;
     }
 
-    .hover\:text-\[\#ef4444\]:hover {
-      color: #ef4444;
-    }
-
-    .hover\:text-\[\#f0f0f5\]:hover {
-      color: #f0f0f5;
-    }
-
-    .hover\:text-amber-400:hover {
-      color: var(--color-amber-400);
-    }
-
-    .hover\:text-blue-300:hover {
-      color: var(--color-blue-300);
-    }
-
-    .hover\:text-blue-400:hover {
-      color: var(--color-blue-400);
-    }
-
-    .hover\:text-emerald-300:hover {
-      color: var(--color-emerald-300);
-    }
-
-    .hover\:text-emerald-400:hover {
-      color: var(--color-emerald-400);
-    }
-
-    .hover\:text-gray-100:hover {
-      color: var(--color-gray-100);
+    .hover\:text-\[\#eab308\]:hover {
+      color: #eab308;
     }
 
-    .hover\:text-gray-200:hover {
-      color: var(--color-gray-200);
+    .hover\:text-\[\#ff3b4d\]:hover {
+      color: #ff3b4d;
     }
 
-    .hover\:text-gray-300:hover {
-      color: var(--color-gray-300);
+    .hover\:text-whip-accent:hover {
+      color: var(--color-whip-accent);
     }
 
-    .hover\:text-gray-400:hover {
-      color: var(--color-gray-400);
+    .hover\:text-whip-muted:hover {
+      color: var(--color-whip-muted);
     }
 
-    .hover\:text-green-300:hover {
-      color: var(--color-green-300);
-    }
-
-    .hover\:text-green-400:hover {
-      color: var(--color-green-400);
-    }
-
-    .hover\:text-red-400:hover {
-      color: var(--color-red-400);
+    .hover\:text-whip-text:hover {
+      color: var(--color-whip-text);
     }
 
     .hover\:text-white:hover {
@@ -7248,18 +6630,26 @@
       opacity: .8;
     }
 
+    .hover\:opacity-85:hover {
+      opacity: .85;
+    }
+
+    .hover\:opacity-90:hover {
+      opacity: .9;
+    }
+
     .hover\:brightness-110:hover {
       --tw-brightness: brightness(110%);
       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, );
     }
   }
 
-  .focus\:border-\[\#3a3a48\]:focus {
-    border-color: #3a3a48;
+  .focus\:border-whip-accent:focus {
+    border-color: var(--color-whip-accent);
   }
 
-  .focus\:border-\[\#7c6aff\]:focus {
-    border-color: #7c6aff;
+  .focus\:border-whip-border-hover:focus {
+    border-color: var(--color-whip-border-hover);
   }
 
   .focus\:outline-none:focus {
@@ -7267,8 +6657,14 @@
     outline-style: none;
   }
 
-  .active\:bg-\[\#7c6aff\]\/60:active {
-    background-color: oklab(62.0615% .0507061 -.20665 / .6);
+  .active\:bg-whip-accent\/60:active {
+    background-color: var(--color-whip-accent);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .active\:bg-whip-accent\/60:active {
+      background-color: color-mix(in oklab, var(--color-whip-accent) 60%, transparent);
+    }
   }
 
   .disabled\:cursor-not-allowed:disabled {
@@ -7314,47 +6710,153 @@
   }
 }
 
-@property --tw-translate-x {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
+@font-face {
+  font-family: Geist Variable;
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url("/assets/geist-cyrillic-ext-wght-normal-DjL33-gN.woff2") format("woff2-variations");
+  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 
-@property --tw-translate-y {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
+@font-face {
+  font-family: Geist Variable;
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url("/assets/geist-cyrillic-wght-normal-BEAKL7Jp.woff2") format("woff2-variations");
+  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
 }
 
-@property --tw-translate-z {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
+@font-face {
+  font-family: Geist Variable;
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url("/assets/geist-vietnamese-wght-normal-6IgcOCM7.woff2") format("woff2-variations");
+  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
 }
 
-@property --tw-rotate-x {
-  syntax: "*";
-  inherits: false
+@font-face {
+  font-family: Geist Variable;
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url("/assets/geist-latin-ext-wght-normal-DC-KSUi6.woff2") format("woff2-variations");
+  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
-@property --tw-rotate-y {
-  syntax: "*";
-  inherits: false
+@font-face {
+  font-family: Geist Variable;
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url("/assets/geist-latin-wght-normal-BgDaEnEv.woff2") format("woff2-variations");
+  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: Geist Mono Variable;
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url("/assets/geist-mono-cyrillic-ext-wght-normal-I4S5GZfc.woff2") format("woff2-variations");
+  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+@font-face {
+  font-family: Geist Mono Variable;
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url("/assets/geist-mono-cyrillic-wght-normal-BmXc_FBt.woff2") format("woff2-variations");
+  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
+}
+
+@font-face {
+  font-family: Geist Mono Variable;
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url("/assets/geist-mono-symbols2-wght-normal-GZpp1pK2.woff2") format("woff2-variations");
+  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
+}
+
+@font-face {
+  font-family: Geist Mono Variable;
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url("/assets/geist-mono-vietnamese-wght-normal-D8KDMBhC.woff2") format("woff2-variations");
+  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
+}
+
+@font-face {
+  font-family: Geist Mono Variable;
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url("/assets/geist-mono-latin-ext-wght-normal-DrnZ1wKl.woff2") format("woff2-variations");
+  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+  font-family: Geist Mono Variable;
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url("/assets/geist-mono-latin-wght-normal-B_7UjwxQ.woff2") format("woff2-variations");
+  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+.dark {
+  --whip-bg: #050505;
+  --whip-surface: #0b0b0b;
+  --whip-panel: #111;
+  --whip-panel-2: #161616;
+  --whip-border: #2a2a2a;
+  --whip-border-soft: #1f1f1f;
+  --whip-border-hover: #3a3a3a;
+  --whip-text: #ededed;
+  --whip-muted: #8a8f98;
+  --whip-faint: #5f6672;
+  --whip-accent: #fff;
+  --whip-accent-text: #050505;
+  --whip-overlay: #000;
 }
 
-@property --tw-rotate-z {
+.light {
+  --whip-bg: #fff;
+  --whip-surface: #f7f7f8;
+  --whip-panel: #f1f1f3;
+  --whip-panel-2: #e7e7ea;
+  --whip-border: #e0e0e3;
+  --whip-border-soft: #ececef;
+  --whip-border-hover: #c7c7cc;
+  --whip-text: #0a0a0a;
+  --whip-muted: #52525b;
+  --whip-faint: #71717a;
+  --whip-accent: #0a0a0a;
+  --whip-accent-text: #fff;
+  --whip-overlay: #00000080;
+}
+
+@property --tw-translate-x {
   syntax: "*";
-  inherits: false
+  inherits: false;
+  initial-value: 0;
 }
 
-@property --tw-skew-x {
+@property --tw-translate-y {
   syntax: "*";
-  inherits: false
+  inherits: false;
+  initial-value: 0;
 }
 
-@property --tw-skew-y {
+@property --tw-translate-z {
   syntax: "*";
-  inherits: false
+  inherits: false;
+  initial-value: 0;
 }
 
 @property --tw-space-y-reverse {
@@ -7582,209 +7084,300 @@
    over @geckoui/geckoui/styles.css (which is imported inside @layer components
    — un-layered always beats layered regardless of order).
 
-   The `.dark` class lives on <html> (see index.html) so these rules also reach
+   `.dark`/`.light` live on <html> (see index.html) so these rules also reach
    GeckoUI components rendered through GeckoUIPortal at <body> level (Dialog,
-   ConfirmDialog, Toast, Drawer, Menu popups).
-
-   Palette: #0a0a0e / #141418 / #1a1a1f / #2a2a35 / #7c6aff
+   ConfirmDialog, Toast, Drawer, Menu popups). Every rule here reads the
+   --whip-* custom properties (defined per-theme in index.css) rather than
+   literal hex, so GeckoUI components automatically follow the active theme.
+
+   Palette (Vercel-style monochrome + status): bg/surface/panel/panel-2,
+   border/border-soft, text/muted/faint, and a single accent that's white on
+   dark / near-black on light (text flips to the opposite on top of it).
+   Status colors (green/red/yellow/orange/purple) stay constant across themes.
    ──────────────────────────────────────────────────────────────────────── */
-.dark {
-	--color-surface-primary: #141418; /* dialog / menu bg */
-	--color-surface-secondary: #1a1a1f; /* input / select bg */
-	--color-surface-tertiary: #111115; /* sidebar bg */
-	--color-surface-hover: #222228; /* subtle hover */
-	--color-surface-hover-strong: #2a2a35; /* strong hover / selected */
-	--color-surface-active: #2a2a35;
-	--color-surface-disabled: #1a1a1f;
-	--color-surface-emphasis: #2a2a35;
-	--color-surface-overlay: #000000;
-
-	--color-border-primary: #2a2a35;
-	--color-border-secondary: #2a2a35;
-	--color-border-focus: #7c6aff;
-	--color-border-hover: #3a3a48;
-	--color-border-disabled: #1a1a1f;
-
-	--color-text-primary: #f0f0f5;
-	--color-text-secondary: #8888a0;
-	--color-text-tertiary: #8888a0;
-	--color-text-muted: #60607a;
-	--color-text-placeholder: #4a4a5a;
-	--color-text-disabled: #4a4a5a;
-	--color-text-inverse: #141418;
-	--color-text-on-primary: #ffffff;
-
-	/* Accent purple — drives focus rings, checked states, primary buttons */
-	--color-primary-300: #a78bfa;
-	--color-primary-400: #7c6aff;
-	--color-primary-500: #6c5ce7;
-	--color-primary-600: #5b4bd8;
-	--color-primary-700: #4c3fc4;
+:where(.dark, .light) {
+	--color-surface-primary: var(--whip-surface); /* dialog / menu bg */
+	--color-surface-secondary: var(--whip-panel); /* input / select bg */
+	--color-surface-tertiary: var(--whip-panel); /* sidebar bg */
+	--color-surface-hover: var(--whip-panel-2); /* subtle hover */
+	--color-surface-hover-strong: var(--whip-border); /* strong hover / selected */
+	--color-surface-active: var(--whip-border);
+	--color-surface-disabled: var(--whip-panel);
+	--color-surface-emphasis: var(--whip-border);
+	--color-surface-overlay: var(--whip-overlay);
+
+	--color-border-primary: var(--whip-border);
+	--color-border-secondary: var(--whip-border);
+	--color-border-focus: var(--whip-accent);
+	--color-border-hover: var(--whip-border-hover);
+	--color-border-disabled: var(--whip-border-soft);
+
+	--color-text-primary: var(--whip-text);
+	--color-text-secondary: var(--whip-muted);
+	--color-text-tertiary: var(--whip-muted);
+	--color-text-muted: var(--whip-faint);
+	--color-text-placeholder: var(--whip-faint);
+	--color-text-disabled: var(--whip-faint);
+	--color-text-inverse: var(--whip-accent-text);
+	--color-text-on-primary: var(--whip-accent-text);
+
+	/* Accent — drives focus rings, checked states, primary buttons */
+	--color-primary-300: var(--whip-accent);
+	--color-primary-400: var(--whip-accent);
+	--color-primary-500: var(--whip-accent);
+	--color-primary-600: var(--whip-accent);
+	--color-primary-700: var(--whip-accent);
 }
 
 /* ─── Button ─────────────────────────────────────────────────────────────────
-   GeckoUI's variant text colors can read low-contrast on the dark panels, so
-   pin them explicitly. */
-.dark .GeckoUIButton[data-variant="filled"] {
-	background-color: #7c6aff;
-	color: #ffffff;
+   GeckoUI's variant text colors can read low-contrast on the panels, so pin
+   them explicitly. */
+:where(.dark, .light) .GeckoUIButton[data-variant="filled"] {
+	background-color: var(--whip-accent);
+	color: var(--whip-accent-text);
 	border: 1px solid transparent;
 }
-.dark .GeckoUIButton[data-variant="filled"]:hover:not(:disabled) {
-	background-color: #6c5ce7;
+:where(.dark, .light) .GeckoUIButton[data-variant="filled"]:hover:not(:disabled) {
+	opacity: 0.85;
 }
-.dark .GeckoUIButton[data-variant="outlined"] {
+:where(.dark, .light) .GeckoUIButton[data-variant="outlined"] {
 	background-color: transparent;
-	color: #d0d0e0;
-	border: 1px solid #2a2a35;
+	color: var(--whip-text);
+	border: 1px solid var(--whip-border);
 }
-.dark .GeckoUIButton[data-variant="outlined"]:hover:not(:disabled) {
-	background-color: #1a1a1f;
-	border-color: #3a3a48;
+:where(.dark, .light) .GeckoUIButton[data-variant="outlined"]:hover:not(:disabled) {
+	background-color: var(--whip-panel);
+	border-color: var(--whip-border-hover);
 }
-.dark .GeckoUIButton[data-variant="ghost"] {
+:where(.dark, .light) .GeckoUIButton[data-variant="ghost"] {
 	background-color: transparent;
-	color: #8888a0;
+	color: var(--whip-muted);
 }
-.dark .GeckoUIButton[data-variant="ghost"]:hover:not(:disabled) {
-	background-color: #1a1a1f;
-	color: #d0d0e0;
+:where(.dark, .light) .GeckoUIButton[data-variant="ghost"]:hover:not(:disabled) {
+	background-color: var(--whip-panel);
+	color: var(--whip-text);
 }
-.dark .GeckoUIButton:disabled {
+:where(.dark, .light) .GeckoUIButton:disabled {
 	opacity: 0.4;
 }
 
 /* ─── Input ──────────────────────────────────────────────────────────────── */
-.dark .GeckoUIInput {
-	background-color: #1a1a1f;
+:where(.dark, .light) .GeckoUIInput {
+	background-color: var(--whip-panel);
 	min-height: 36px;
 	font-size: 12px;
 }
-.dark .GeckoUIInput__input {
-	color: #f0f0f5;
+:where(.dark, .light) .GeckoUIInput__input {
+	color: var(--whip-text);
+}
+/* The base component's hover/focus border rides on the accent color, which is
+   pure white/near-black here — far too bright against the muted panels. */
+:where(.dark, .light) .GeckoUIInput[data-state="enabled"]:hover,
+:where(.dark, .light) .GeckoUIInput[data-state="enabled"]:focus-within {
+	border-color: var(--whip-border-hover);
 }
 
 /* ─── Select trigger ─────────────────────────────────────────────────────── */
-.dark .GeckoUISelectButton {
-	background-color: #1a1a1f;
+:where(.dark, .light) .GeckoUISelectButton {
+	background-color: var(--whip-panel);
 	min-height: 36px;
 	font-size: 12px;
-	color: #f0f0f5;
+	color: var(--whip-text);
 }
 
-.dark .GeckoUISelectButton__value {
+:where(.dark, .light) .GeckoUISelectButton__value {
 	font-size: 12px;
-	color: #f0f0f5;
+	color: var(--whip-text);
 }
 
-.dark .GeckoUISelectButton__multiselected {
-	background-color: #7c6aff15;
-	color: #c4baff;
+:where(.dark, .light) .GeckoUISelectButton__multiselected {
+	background-color: color-mix(in srgb, var(--whip-accent) 10%, transparent);
+	color: var(--whip-text);
 	border-radius: 4px;
 	font-size: 11px;
 }
 
-.dark .GeckoUISelectButton__icons {
-	color: #60607a;
+:where(.dark, .light) .GeckoUISelectButton__icons {
+	color: var(--whip-faint);
 }
 
-.dark .GeckoUISelectButton__search__input {
+:where(.dark, .light) .GeckoUISelectButton__search__input {
 	font-size: 12px;
-	color: #f0f0f5;
+	color: var(--whip-text);
 	background: transparent;
 }
 
 /* ─── Select dropdown ────────────────────────────────────────────────────── */
-.dark .GeckoUISelectMenu {
-	background-color: #141418;
-	border: 1px solid #2a2a35;
+:where(.dark, .light) .GeckoUISelectMenu {
+	background-color: var(--whip-surface);
+	border: 1px solid var(--whip-border);
 	border-radius: 8px;
-	box-shadow: 0 8px 32px #00000060;
+	box-shadow: 0 8px 32px #00000030;
 }
 
-.dark .GeckoUISelectMenu__search {
-	background-color: #1a1a1f;
-	border-bottom: 1px solid #2a2a35;
+:where(.dark, .light) .GeckoUISelectMenu__search {
+	background-color: var(--whip-panel);
+	border-bottom: 1px solid var(--whip-border);
 	padding: 8px;
 }
 
-.dark .GeckoUISelectMenu__items {
+:where(.dark, .light) .GeckoUISelectMenu__items {
 	border-radius: 8px;
 }
 
-.dark .GeckoUISelectEmpty {
-	color: #4a4a5a;
+:where(.dark, .light) .GeckoUISelectEmpty {
+	color: var(--whip-faint);
 	font-size: 12px;
 }
 
 /* ─── Select option ──────────────────────────────────────────────────────── */
-.dark .GeckoUISelectOption {
+:where(.dark, .light) .GeckoUISelectOption {
 	font-size: 12px;
-	color: #d0d0e0;
+	color: var(--whip-text);
 	border-radius: 4px;
 }
 
-.dark .GeckoUISelectOption:not([data-disabled="true"]):hover {
-	background-color: #1a1a1f;
+:where(.dark, .light) .GeckoUISelectOption:not([data-disabled="true"]):hover {
+	background-color: var(--whip-panel);
 }
 
-.dark .GeckoUISelectOption[data-selected="true"] {
-	background-color: #7c6aff15;
-	color: #c4baff;
+:where(.dark, .light) .GeckoUISelectOption[data-selected="true"] {
+	background-color: color-mix(in srgb, var(--whip-accent) 10%, transparent);
+	color: var(--whip-text);
 }
 
-.dark .GeckoUISelectOption__check {
-	color: #7c6aff;
+:where(.dark, .light) .GeckoUISelectOption__check {
+	color: var(--whip-accent);
+}
+
+/* ─── Switch ─────────────────────────────────────────────────────────────── */
+:where(.dark, .light) .GeckoUISwitch {
+	background-color: var(--whip-border);
+}
+:where(.dark, .light) .GeckoUISwitch:has(input:checked) {
+	background-color: var(--whip-accent);
+}
+:where(.dark, .light) .GeckoUISwitch__thumb {
+	background-color: var(--whip-text);
+}
+:where(.dark, .light) .GeckoUISwitch:has(input:checked) .GeckoUISwitch__thumb {
+	background-color: var(--whip-accent-text);
 }
 
 /* ─── Textarea ───────────────────────────────────────────────────────────── */
-.dark .GeckoUITextarea {
-	background-color: #1a1a1f;
-	color: #d0d0e0;
+:where(.dark, .light) .GeckoUITextarea {
+	background-color: var(--whip-bg);
+	color: var(--whip-text);
 	font-size: 13px;
 }
+:where(.dark, .light) .GeckoUITextarea:hover {
+	border-color: var(--whip-border-hover);
+}
+/* The base component's focus-visible outline rides on the accent color, which
+   is pure white/near-black here — far too bright against the muted panels. */
+:where(.dark, .light) .GeckoUITextarea:focus-visible {
+	outline: 2px solid var(--whip-border-hover);
+}
 
 /* ─── Dialog / ConfirmDialog ─────────────────────────────────────────────── */
-.dark .GeckoUIDialog__dialog,
-.dark .GeckoUIConfirmDialog__dialog {
-	background-color: #141418;
-	border: 1px solid #2a2a35;
+:where(.dark, .light) .GeckoUIDialog__dialog,
+:where(.dark, .light) .GeckoUIConfirmDialog__dialog {
+	background-color: var(--whip-surface);
+	border: 1px solid var(--whip-border);
 	border-radius: 0.75rem;
 }
-.dark .GeckoUIConfirmDialog__title {
-	color: #f0f0f5;
+:where(.dark, .light) .GeckoUIConfirmDialog__title {
+	color: var(--whip-text);
 }
-.dark .GeckoUIConfirmDialog__content {
-	color: #8888a0;
+:where(.dark, .light) .GeckoUIConfirmDialog__content {
+	color: var(--whip-muted);
 }
 
 /* ─── Drawer ─────────────────────────────────────────────────────────────── */
-.dark .GeckoUIDrawer__drawer {
-	background-color: #141418;
-	border-color: #2a2a35;
+:where(.dark, .light) .GeckoUIDrawer__drawer {
+	background-color: var(--whip-surface);
+	border-color: var(--whip-border);
 }
 
 /* ─── Menu popup ─────────────────────────────────────────────────────────── */
-.dark .GeckoUIMenu__items {
-	background-color: #141418;
-	border: 1px solid #2a2a35;
+:where(.dark, .light) .GeckoUIMenu__items {
+	background-color: var(--whip-surface);
+	border: 1px solid var(--whip-border);
 	border-radius: 8px;
-	box-shadow: 0 8px 32px #00000060;
+	box-shadow: 0 8px 32px #00000030;
 }
 
-.dark .GeckoUIMenu__item {
-	color: #d0d0e0;
+:where(.dark, .light) .GeckoUIMenu__item {
+	color: var(--whip-text);
 }
 
-.dark .GeckoUIMenu__item:hover {
-	background-color: #1a1a1f;
+:where(.dark, .light) .GeckoUIMenu__item:hover {
+	background-color: var(--whip-panel);
 }
 
 /* ─── Tooltip ────────────────────────────────────────────────────────────── */
-.dark .GeckoUITooltip {
-	background-color: #1a1a1f;
-	color: #f0f0f5;
-	border: 1px solid #2a2a35;
+:where(.dark, .light) .GeckoUITooltip {
+	background-color: var(--whip-panel);
+	color: var(--whip-text);
+	border: 1px solid var(--whip-border);
+}
+/* ─── Canvas block content ──────────────────────────────────────────────────
+   Shared by MarkdownBlock (react-markdown output) and HtmlBlock (raw injected
+   HTML) via the `.canvas-content` class — both need the same width-prone
+   elements (images, embeds, tables, pre/code) kept inside the resizable
+   panel, and HtmlBlock has no per-element className hook to style tables
+   individually, so this covers both through plain descendant selectors
+   instead of duplicating Tailwind's `[&_x]:` arbitrary-variant syntax.
+
+   Palette matches the code block styling in ChatComments/markdown.tsx:
+   border #2a2a2a, background #161616.
+   ──────────────────────────────────────────────────────────────────────── */
+
+.canvas-content {
+	max-width: 100%;
+}
+
+.canvas-content img,
+.canvas-content video,
+.canvas-content iframe {
+	max-width: 100%;
+}
+
+.canvas-content img {
+	height: auto;
+}
+
+.canvas-content pre {
+	max-width: 100%;
+	overflow-x: auto;
+	white-space: pre-wrap;
+}
+
+.canvas-content table {
+	display: block;
+	max-width: 100%;
+	overflow-x: auto;
+	border-collapse: collapse;
+	margin: 4px 0;
+	font-size: 12px;
+}
+
+.canvas-content th,
+.canvas-content td {
+	border: 1px solid #2a2a2a;
+	padding: 6px 10px;
+	text-align: left;
+	vertical-align: top;
+}
+
+.canvas-content th {
+	background: #161616;
+	color: #ededed;
+	font-weight: 600;
+}
+
+.canvas-content td {
+	color: #8a8f98;
 }
 /**
  * Copyright (c) 2014 The xterm.js authors. All rights reserved.