sunpeak 0.2.6 → 0.3.2

package/dist/style.css

@@ -0,0 +1,5014 @@
+@layer theme, base, components, utilities;
+
+@layer theme {
+  @theme default {
+    --font-sans:
+      ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+    --font-mono:
+      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+      "Courier New", monospace;
+
+    --color-red-50: oklch(97.1% 0.013 17.38);
+    --color-red-100: oklch(93.6% 0.032 17.717);
+    --color-red-200: oklch(88.5% 0.062 18.334);
+    --color-red-300: oklch(80.8% 0.114 19.571);
+    --color-red-400: oklch(70.4% 0.191 22.216);
+    --color-red-500: oklch(63.7% 0.237 25.331);
+    --color-red-600: oklch(57.7% 0.245 27.325);
+    --color-red-700: oklch(50.5% 0.213 27.518);
+    --color-red-800: oklch(44.4% 0.177 26.899);
+    --color-red-900: oklch(39.6% 0.141 25.723);
+    --color-red-950: oklch(25.8% 0.092 26.042);
+
+    --color-orange-50: oklch(98% 0.016 73.684);
+    --color-orange-100: oklch(95.4% 0.038 75.164);
+    --color-orange-200: oklch(90.1% 0.076 70.697);
+    --color-orange-300: oklch(83.7% 0.128 66.29);
+    --color-orange-400: oklch(75% 0.183 55.934);
+    --color-orange-500: oklch(70.5% 0.213 47.604);
+    --color-orange-600: oklch(64.6% 0.222 41.116);
+    --color-orange-700: oklch(55.3% 0.195 38.402);
+    --color-orange-800: oklch(47% 0.157 37.304);
+    --color-orange-900: oklch(40.8% 0.123 38.172);
+    --color-orange-950: oklch(26.6% 0.079 36.259);
+
+    --color-amber-50: oklch(98.7% 0.022 95.277);
+    --color-amber-100: oklch(96.2% 0.059 95.617);
+    --color-amber-200: oklch(92.4% 0.12 95.746);
+    --color-amber-300: oklch(87.9% 0.169 91.605);
+    --color-amber-400: oklch(82.8% 0.189 84.429);
+    --color-amber-500: oklch(76.9% 0.188 70.08);
+    --color-amber-600: oklch(66.6% 0.179 58.318);
+    --color-amber-700: oklch(55.5% 0.163 48.998);
+    --color-amber-800: oklch(47.3% 0.137 46.201);
+    --color-amber-900: oklch(41.4% 0.112 45.904);
+    --color-amber-950: oklch(27.9% 0.077 45.635);
+
+    --color-yellow-50: oklch(98.7% 0.026 102.212);
+    --color-yellow-100: oklch(97.3% 0.071 103.193);
+    --color-yellow-200: oklch(94.5% 0.129 101.54);
+    --color-yellow-300: oklch(90.5% 0.182 98.111);
+    --color-yellow-400: oklch(85.2% 0.199 91.936);
+    --color-yellow-500: oklch(79.5% 0.184 86.047);
+    --color-yellow-600: oklch(68.1% 0.162 75.834);
+    --color-yellow-700: oklch(55.4% 0.135 66.442);
+    --color-yellow-800: oklch(47.6% 0.114 61.907);
+    --color-yellow-900: oklch(42.1% 0.095 57.708);
+    --color-yellow-950: oklch(28.6% 0.066 53.813);
+
+    --color-lime-50: oklch(98.6% 0.031 120.757);
+    --color-lime-100: oklch(96.7% 0.067 122.328);
+    --color-lime-200: oklch(93.8% 0.127 124.321);
+    --color-lime-300: oklch(89.7% 0.196 126.665);
+    --color-lime-400: oklch(84.1% 0.238 128.85);
+    --color-lime-500: oklch(76.8% 0.233 130.85);
+    --color-lime-600: oklch(64.8% 0.2 131.684);
+    --color-lime-700: oklch(53.2% 0.157 131.589);
+    --color-lime-800: oklch(45.3% 0.124 130.933);
+    --color-lime-900: oklch(40.5% 0.101 131.063);
+    --color-lime-950: oklch(27.4% 0.072 132.109);
+
+    --color-green-50: oklch(98.2% 0.018 155.826);
+    --color-green-100: oklch(96.2% 0.044 156.743);
+    --color-green-200: oklch(92.5% 0.084 155.995);
+    --color-green-300: oklch(87.1% 0.15 154.449);
+    --color-green-400: oklch(79.2% 0.209 151.711);
+    --color-green-500: oklch(72.3% 0.219 149.579);
+    --color-green-600: oklch(62.7% 0.194 149.214);
+    --color-green-700: oklch(52.7% 0.154 150.069);
+    --color-green-800: oklch(44.8% 0.119 151.328);
+    --color-green-900: oklch(39.3% 0.095 152.535);
+    --color-green-950: oklch(26.6% 0.065 152.934);
+
+    --color-emerald-50: oklch(97.9% 0.021 166.113);
+    --color-emerald-100: oklch(95% 0.052 163.051);
+    --color-emerald-200: oklch(90.5% 0.093 164.15);
+    --color-emerald-300: oklch(84.5% 0.143 164.978);
+    --color-emerald-400: oklch(76.5% 0.177 163.223);
+    --color-emerald-500: oklch(69.6% 0.17 162.48);
+    --color-emerald-600: oklch(59.6% 0.145 163.225);
+    --color-emerald-700: oklch(50.8% 0.118 165.612);
+    --color-emerald-800: oklch(43.2% 0.095 166.913);
+    --color-emerald-900: oklch(37.8% 0.077 168.94);
+    --color-emerald-950: oklch(26.2% 0.051 172.552);
+
+    --color-teal-50: oklch(98.4% 0.014 180.72);
+    --color-teal-100: oklch(95.3% 0.051 180.801);
+    --color-teal-200: oklch(91% 0.096 180.426);
+    --color-teal-300: oklch(85.5% 0.138 181.071);
+    --color-teal-400: oklch(77.7% 0.152 181.912);
+    --color-teal-500: oklch(70.4% 0.14 182.503);
+    --color-teal-600: oklch(60% 0.118 184.704);
+    --color-teal-700: oklch(51.1% 0.096 186.391);
+    --color-teal-800: oklch(43.7% 0.078 188.216);
+    --color-teal-900: oklch(38.6% 0.063 188.416);
+    --color-teal-950: oklch(27.7% 0.046 192.524);
+
+    --color-cyan-50: oklch(98.4% 0.019 200.873);
+    --color-cyan-100: oklch(95.6% 0.045 203.388);
+    --color-cyan-200: oklch(91.7% 0.08 205.041);
+    --color-cyan-300: oklch(86.5% 0.127 207.078);
+    --color-cyan-400: oklch(78.9% 0.154 211.53);
+    --color-cyan-500: oklch(71.5% 0.143 215.221);
+    --color-cyan-600: oklch(60.9% 0.126 221.723);
+    --color-cyan-700: oklch(52% 0.105 223.128);
+    --color-cyan-800: oklch(45% 0.085 224.283);
+    --color-cyan-900: oklch(39.8% 0.07 227.392);
+    --color-cyan-950: oklch(30.2% 0.056 229.695);
+
+    --color-sky-50: oklch(97.7% 0.013 236.62);
+    --color-sky-100: oklch(95.1% 0.026 236.824);
+    --color-sky-200: oklch(90.1% 0.058 230.902);
+    --color-sky-300: oklch(82.8% 0.111 230.318);
+    --color-sky-400: oklch(74.6% 0.16 232.661);
+    --color-sky-500: oklch(68.5% 0.169 237.323);
+    --color-sky-600: oklch(58.8% 0.158 241.966);
+    --color-sky-700: oklch(50% 0.134 242.749);
+    --color-sky-800: oklch(44.3% 0.11 240.79);
+    --color-sky-900: oklch(39.1% 0.09 240.876);
+    --color-sky-950: oklch(29.3% 0.066 243.157);
+
+    --color-blue-50: oklch(97% 0.014 254.604);
+    --color-blue-100: oklch(93.2% 0.032 255.585);
+    --color-blue-200: oklch(88.2% 0.059 254.128);
+    --color-blue-300: oklch(80.9% 0.105 251.813);
+    --color-blue-400: oklch(70.7% 0.165 254.624);
+    --color-blue-500: oklch(62.3% 0.214 259.815);
+    --color-blue-600: oklch(54.6% 0.245 262.881);
+    --color-blue-700: oklch(48.8% 0.243 264.376);
+    --color-blue-800: oklch(42.4% 0.199 265.638);
+    --color-blue-900: oklch(37.9% 0.146 265.522);
+    --color-blue-950: oklch(28.2% 0.091 267.935);
+
+    --color-indigo-50: oklch(96.2% 0.018 272.314);
+    --color-indigo-100: oklch(93% 0.034 272.788);
+    --color-indigo-200: oklch(87% 0.065 274.039);
+    --color-indigo-300: oklch(78.5% 0.115 274.713);
+    --color-indigo-400: oklch(67.3% 0.182 276.935);
+    --color-indigo-500: oklch(58.5% 0.233 277.117);
+    --color-indigo-600: oklch(51.1% 0.262 276.966);
+    --color-indigo-700: oklch(45.7% 0.24 277.023);
+    --color-indigo-800: oklch(39.8% 0.195 277.366);
+    --color-indigo-900: oklch(35.9% 0.144 278.697);
+    --color-indigo-950: oklch(25.7% 0.09 281.288);
+
+    --color-violet-50: oklch(96.9% 0.016 293.756);
+    --color-violet-100: oklch(94.3% 0.029 294.588);
+    --color-violet-200: oklch(89.4% 0.057 293.283);
+    --color-violet-300: oklch(81.1% 0.111 293.571);
+    --color-violet-400: oklch(70.2% 0.183 293.541);
+    --color-violet-500: oklch(60.6% 0.25 292.717);
+    --color-violet-600: oklch(54.1% 0.281 293.009);
+    --color-violet-700: oklch(49.1% 0.27 292.581);
+    --color-violet-800: oklch(43.2% 0.232 292.759);
+    --color-violet-900: oklch(38% 0.189 293.745);
+    --color-violet-950: oklch(28.3% 0.141 291.089);
+
+    --color-purple-50: oklch(97.7% 0.014 308.299);
+    --color-purple-100: oklch(94.6% 0.033 307.174);
+    --color-purple-200: oklch(90.2% 0.063 306.703);
+    --color-purple-300: oklch(82.7% 0.119 306.383);
+    --color-purple-400: oklch(71.4% 0.203 305.504);
+    --color-purple-500: oklch(62.7% 0.265 303.9);
+    --color-purple-600: oklch(55.8% 0.288 302.321);
+    --color-purple-700: oklch(49.6% 0.265 301.924);
+    --color-purple-800: oklch(43.8% 0.218 303.724);
+    --color-purple-900: oklch(38.1% 0.176 304.987);
+    --color-purple-950: oklch(29.1% 0.149 302.717);
+
+    --color-fuchsia-50: oklch(97.7% 0.017 320.058);
+    --color-fuchsia-100: oklch(95.2% 0.037 318.852);
+    --color-fuchsia-200: oklch(90.3% 0.076 319.62);
+    --color-fuchsia-300: oklch(83.3% 0.145 321.434);
+    --color-fuchsia-400: oklch(74% 0.238 322.16);
+    --color-fuchsia-500: oklch(66.7% 0.295 322.15);
+    --color-fuchsia-600: oklch(59.1% 0.293 322.896);
+    --color-fuchsia-700: oklch(51.8% 0.253 323.949);
+    --color-fuchsia-800: oklch(45.2% 0.211 324.591);
+    --color-fuchsia-900: oklch(40.1% 0.17 325.612);
+    --color-fuchsia-950: oklch(29.3% 0.136 325.661);
+
+    --color-pink-50: oklch(97.1% 0.014 343.198);
+    --color-pink-100: oklch(94.8% 0.028 342.258);
+    --color-pink-200: oklch(89.9% 0.061 343.231);
+    --color-pink-300: oklch(82.3% 0.12 346.018);
+    --color-pink-400: oklch(71.8% 0.202 349.761);
+    --color-pink-500: oklch(65.6% 0.241 354.308);
+    --color-pink-600: oklch(59.2% 0.249 0.584);
+    --color-pink-700: oklch(52.5% 0.223 3.958);
+    --color-pink-800: oklch(45.9% 0.187 3.815);
+    --color-pink-900: oklch(40.8% 0.153 2.432);
+    --color-pink-950: oklch(28.4% 0.109 3.907);
+
+    --color-rose-50: oklch(96.9% 0.015 12.422);
+    --color-rose-100: oklch(94.1% 0.03 12.58);
+    --color-rose-200: oklch(89.2% 0.058 10.001);
+    --color-rose-300: oklch(81% 0.117 11.638);
+    --color-rose-400: oklch(71.2% 0.194 13.428);
+    --color-rose-500: oklch(64.5% 0.246 16.439);
+    --color-rose-600: oklch(58.6% 0.253 17.585);
+    --color-rose-700: oklch(51.4% 0.222 16.935);
+    --color-rose-800: oklch(45.5% 0.188 13.697);
+    --color-rose-900: oklch(41% 0.159 10.272);
+    --color-rose-950: oklch(27.1% 0.105 12.094);
+
+    --color-slate-50: oklch(98.4% 0.003 247.858);
+    --color-slate-100: oklch(96.8% 0.007 247.896);
+    --color-slate-200: oklch(92.9% 0.013 255.508);
+    --color-slate-300: oklch(86.9% 0.022 252.894);
+    --color-slate-400: oklch(70.4% 0.04 256.788);
+    --color-slate-500: oklch(55.4% 0.046 257.417);
+    --color-slate-600: oklch(44.6% 0.043 257.281);
+    --color-slate-700: oklch(37.2% 0.044 257.287);
+    --color-slate-800: oklch(27.9% 0.041 260.031);
+    --color-slate-900: oklch(20.8% 0.042 265.755);
+    --color-slate-950: oklch(12.9% 0.042 264.695);
+
+    --color-gray-50: oklch(98.5% 0.002 247.839);
+    --color-gray-100: oklch(96.7% 0.003 264.542);
+    --color-gray-200: oklch(92.8% 0.006 264.531);
+    --color-gray-300: oklch(87.2% 0.01 258.338);
+    --color-gray-400: oklch(70.7% 0.022 261.325);
+    --color-gray-500: oklch(55.1% 0.027 264.364);
+    --color-gray-600: oklch(44.6% 0.03 256.802);
+    --color-gray-700: oklch(37.3% 0.034 259.733);
+    --color-gray-800: oklch(27.8% 0.033 256.848);
+    --color-gray-900: oklch(21% 0.034 264.665);
+    --color-gray-950: oklch(13% 0.028 261.692);
+
+    --color-zinc-50: oklch(98.5% 0 0);
+    --color-zinc-100: oklch(96.7% 0.001 286.375);
+    --color-zinc-200: oklch(92% 0.004 286.32);
+    --color-zinc-300: oklch(87.1% 0.006 286.286);
+    --color-zinc-400: oklch(70.5% 0.015 286.067);
+    --color-zinc-500: oklch(55.2% 0.016 285.938);
+    --color-zinc-600: oklch(44.2% 0.017 285.786);
+    --color-zinc-700: oklch(37% 0.013 285.805);
+    --color-zinc-800: oklch(27.4% 0.006 286.033);
+    --color-zinc-900: oklch(21% 0.006 285.885);
+    --color-zinc-950: oklch(14.1% 0.005 285.823);
+
+    --color-neutral-50: oklch(98.5% 0 0);
+    --color-neutral-100: oklch(97% 0 0);
+    --color-neutral-200: oklch(92.2% 0 0);
+    --color-neutral-300: oklch(87% 0 0);
+    --color-neutral-400: oklch(70.8% 0 0);
+    --color-neutral-500: oklch(55.6% 0 0);
+    --color-neutral-600: oklch(43.9% 0 0);
+    --color-neutral-700: oklch(37.1% 0 0);
+    --color-neutral-800: oklch(26.9% 0 0);
+    --color-neutral-900: oklch(20.5% 0 0);
+    --color-neutral-950: oklch(14.5% 0 0);
+
+    --color-stone-50: oklch(98.5% 0.001 106.423);
+    --color-stone-100: oklch(97% 0.001 106.424);
+    --color-stone-200: oklch(92.3% 0.003 48.717);
+    --color-stone-300: oklch(86.9% 0.005 56.366);
+    --color-stone-400: oklch(70.9% 0.01 56.259);
+    --color-stone-500: oklch(55.3% 0.013 58.071);
+    --color-stone-600: oklch(44.4% 0.011 73.639);
+    --color-stone-700: oklch(37.4% 0.01 67.558);
+    --color-stone-800: oklch(26.8% 0.007 34.298);
+    --color-stone-900: oklch(21.6% 0.006 56.043);
+    --color-stone-950: oklch(14.7% 0.004 49.25);
+
+    --color-black: #000;
+    --color-white: #fff;
+
+    --spacing: 0.25rem;
+
+    --breakpoint-sm: 40rem;
+    --breakpoint-md: 48rem;
+    --breakpoint-lg: 64rem;
+    --breakpoint-xl: 80rem;
+    --breakpoint-2xl: 96rem;
+
+    --container-3xs: 16rem;
+    --container-2xs: 18rem;
+    --container-xs: 20rem;
+    --container-sm: 24rem;
+    --container-md: 28rem;
+    --container-lg: 32rem;
+    --container-xl: 36rem;
+    --container-2xl: 42rem;
+    --container-3xl: 48rem;
+    --container-4xl: 56rem;
+    --container-5xl: 64rem;
+    --container-6xl: 72rem;
+    --container-7xl: 80rem;
+
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.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-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
+    --text-3xl: 1.875rem;
+    --text-3xl--line-height: calc(2.25 / 1.875);
+    --text-4xl: 2.25rem;
+    --text-4xl--line-height: calc(2.5 / 2.25);
+    --text-5xl: 3rem;
+    --text-5xl--line-height: 1;
+    --text-6xl: 3.75rem;
+    --text-6xl--line-height: 1;
+    --text-7xl: 4.5rem;
+    --text-7xl--line-height: 1;
+    --text-8xl: 6rem;
+    --text-8xl--line-height: 1;
+    --text-9xl: 8rem;
+    --text-9xl--line-height: 1;
+
+    --font-weight-thin: 100;
+    --font-weight-extralight: 200;
+    --font-weight-light: 300;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --font-weight-extrabold: 800;
+    --font-weight-black: 900;
+
+    --tracking-tighter: -0.05em;
+    --tracking-tight: -0.025em;
+    --tracking-normal: 0em;
+    --tracking-wide: 0.025em;
+    --tracking-wider: 0.05em;
+    --tracking-widest: 0.1em;
+
+    --leading-tight: 1.25;
+    --leading-snug: 1.375;
+    --leading-normal: 1.5;
+    --leading-relaxed: 1.625;
+    --leading-loose: 2;
+
+    --radius-xs: 0.125rem;
+    --radius-sm: 0.25rem;
+    --radius-md: 0.375rem;
+    --radius-lg: 0.5rem;
+    --radius-xl: 0.75rem;
+    --radius-2xl: 1rem;
+    --radius-3xl: 1.5rem;
+    --radius-4xl: 2rem;
+
+    --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
+    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --shadow-md:
+      0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-lg:
+      0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --shadow-xl:
+      0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+
+    --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
+    --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
+    --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
+
+    --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
+    --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
+    --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
+    --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
+    --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
+    --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
+
+    --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.15);
+    --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 0.2);
+    --text-shadow-sm:
+      0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075),
+      0px 2px 2px rgb(0 0 0 / 0.075);
+    --text-shadow-md:
+      0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1),
+      0px 2px 4px rgb(0 0 0 / 0.1);
+    --text-shadow-lg:
+      0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1),
+      0px 4px 8px rgb(0 0 0 / 0.1);
+
+    --ease-in: cubic-bezier(0.4, 0, 1, 1);
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+    --animate-spin: spin 1s linear infinite;
+    --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    --animate-bounce: bounce 1s infinite;
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    @keyframes ping {
+      75%,
+      100% {
+        transform: scale(2);
+        opacity: 0;
+      }
+    }
+
+    @keyframes pulse {
+      50% {
+        opacity: 0.5;
+      }
+    }
+
+    @keyframes bounce {
+      0%,
+      100% {
+        transform: translateY(-25%);
+        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+      }
+
+      50% {
+        transform: none;
+        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+      }
+    }
+
+    --blur-xs: 4px;
+    --blur-sm: 8px;
+    --blur-md: 12px;
+    --blur-lg: 16px;
+    --blur-xl: 24px;
+    --blur-2xl: 40px;
+    --blur-3xl: 64px;
+
+    --perspective-dramatic: 100px;
+    --perspective-near: 300px;
+    --perspective-normal: 500px;
+    --perspective-midrange: 800px;
+    --perspective-distant: 1200px;
+
+    --aspect-video: 16 / 9;
+
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --default-font-family: --theme(--font-sans, initial);
+    --default-font-feature-settings: --theme(
+      --font-sans--font-feature-settings,
+      initial
+    );
+    --default-font-variation-settings: --theme(
+      --font-sans--font-variation-settings,
+      initial
+    );
+    --default-mono-font-family: --theme(--font-mono, initial);
+    --default-mono-font-feature-settings: --theme(
+      --font-mono--font-feature-settings,
+      initial
+    );
+    --default-mono-font-variation-settings: --theme(
+      --font-mono--font-variation-settings,
+      initial
+    );
+  }
+
+  /* Deprecated */
+  @theme default inline reference {
+    --blur: 8px;
+    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+    --drop-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.06);
+    --radius: 0.25rem;
+    --max-width-prose: 65ch;
+  }
+}
+
+@layer base {
+  /*
+  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+  2. Remove default margins and padding
+  3. Reset all borders.
+*/
+
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    box-sizing: border-box; /* 1 */
+    margin: 0; /* 2 */
+    padding: 0; /* 2 */
+    border: 0 solid; /* 3 */
+  }
+
+  /*
+  1. Use a consistent sensible line-height in all browsers.
+  2. Prevent adjustments of font size after orientation changes in iOS.
+  3. Use a more readable tab size.
+  4. Use the user's configured `sans` font-family by default.
+  5. Use the user's configured `sans` font-feature-settings by default.
+  6. Use the user's configured `sans` font-variation-settings by default.
+  7. Disable tap highlights on iOS.
+*/
+
+  html,
+  :host {
+    line-height: 1.5; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+    tab-size: 4; /* 3 */
+    font-family: --theme(
+      --default-font-family,
+      ui-sans-serif,
+      system-ui,
+      sans-serif,
+      "Apple Color Emoji",
+      "Segoe UI Emoji",
+      "Segoe UI Symbol",
+      "Noto Color Emoji"
+    ); /* 4 */
+    font-feature-settings: --theme(
+      --default-font-feature-settings,
+      normal
+    ); /* 5 */
+    font-variation-settings: --theme(
+      --default-font-variation-settings,
+      normal
+    ); /* 6 */
+    -webkit-tap-highlight-color: transparent; /* 7 */
+  }
+
+  /*
+  1. Add the correct height in Firefox.
+  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+  3. Reset the default border style to a 1px solid border.
+*/
+
+  hr {
+    height: 0; /* 1 */
+    color: inherit; /* 2 */
+    border-top-width: 1px; /* 3 */
+  }
+
+  /*
+  Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+
+  /*
+  Remove the default font size and weight for headings.
+*/
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  /*
+  Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+
+  /*
+  Add the correct font weight in Edge and Safari.
+*/
+
+  b,
+  strong {
+    font-weight: bolder;
+  }
+
+  /*
+  1. Use the user's configured `mono` font-family by default.
+  2. Use the user's configured `mono` font-feature-settings by default.
+  3. Use the user's configured `mono` font-variation-settings by default.
+  4. Correct the odd `em` font sizing in all browsers.
+*/
+
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family: --theme(
+      --default-mono-font-family,
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Monaco,
+      Consolas,
+      "Liberation Mono",
+      "Courier New",
+      monospace
+    ); /* 1 */
+    font-feature-settings: --theme(
+      --default-mono-font-feature-settings,
+      normal
+    ); /* 2 */
+    font-variation-settings: --theme(
+      --default-mono-font-variation-settings,
+      normal
+    ); /* 3 */
+    font-size: 1em; /* 4 */
+  }
+
+  /*
+  Add the correct font size in all browsers.
+*/
+
+  small {
+    font-size: 80%;
+  }
+
+  /*
+  Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+
+  /*
+  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+  3. Remove gaps between table borders by default.
+*/
+
+  table {
+    text-indent: 0; /* 1 */
+    border-color: inherit; /* 2 */
+    border-collapse: collapse; /* 3 */
+  }
+
+  /*
+  Use the modern Firefox focus style for all focusable elements.
+*/
+
+  :-moz-focusring {
+    outline: auto;
+  }
+
+  /*
+  Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+  progress {
+    vertical-align: baseline;
+  }
+
+  /*
+  Add the correct display in Chrome and Safari.
+*/
+
+  summary {
+    display: list-item;
+  }
+
+  /*
+  Make lists unstyled by default.
+*/
+
+  ol,
+  ul,
+  menu {
+    list-style: none;
+  }
+
+  /*
+  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+      This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+  img,
+  svg,
+  video,
+  canvas,
+  audio,
+  iframe,
+  embed,
+  object {
+    display: block; /* 1 */
+    vertical-align: middle; /* 2 */
+  }
+
+  /*
+  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+  img,
+  video {
+    max-width: 100%;
+    height: auto;
+  }
+
+  /*
+  1. Inherit font styles in all browsers.
+  2. Remove border radius in all browsers.
+  3. Remove background color in all browsers.
+  4. Ensure consistent opacity for disabled states in all browsers.
+*/
+
+  button,
+  input,
+  select,
+  optgroup,
+  textarea,
+  ::file-selector-button {
+    font: inherit; /* 1 */
+    font-feature-settings: inherit; /* 1 */
+    font-variation-settings: inherit; /* 1 */
+    letter-spacing: inherit; /* 1 */
+    color: inherit; /* 1 */
+    border-radius: 0; /* 2 */
+    background-color: transparent; /* 3 */
+    opacity: 1; /* 4 */
+  }
+
+  /*
+  Restore default font weight.
+*/
+
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+
+  /*
+  Restore indentation.
+*/
+
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+
+  /*
+  Restore space after button.
+*/
+
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+
+  /*
+  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+*/
+
+  ::placeholder {
+    opacity: 1;
+  }
+
+  /*
+  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
+  crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
+*/
+
+  @supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or
+    (contain-intrinsic-size: 1px) /* Safari 17+ */ {
+    ::placeholder {
+      color: color-mix(in oklab, currentcolor 50%, transparent);
+    }
+  }
+
+  /*
+  Prevent resizing textareas horizontally by default.
+*/
+
+  textarea {
+    resize: vertical;
+  }
+
+  /*
+  Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  /*
+  1. Ensure date/time inputs have the same height when empty in iOS Safari.
+  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
+*/
+
+  ::-webkit-date-and-time-value {
+    min-height: 1lh; /* 1 */
+    text-align: inherit; /* 2 */
+  }
+
+  /*
+  Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.
+*/
+
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+
+  /*
+  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
+*/
+
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+
+  ::-webkit-datetime-edit,
+  ::-webkit-datetime-edit-year-field,
+  ::-webkit-datetime-edit-month-field,
+  ::-webkit-datetime-edit-day-field,
+  ::-webkit-datetime-edit-hour-field,
+  ::-webkit-datetime-edit-minute-field,
+  ::-webkit-datetime-edit-second-field,
+  ::-webkit-datetime-edit-millisecond-field,
+  ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+
+  /*
+  Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)
+*/
+
+  ::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
+
+  /*
+  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+
+  /*
+  Correct the inability to style the border radius in iOS Safari.
+*/
+
+  button,
+  input:where([type="button"], [type="reset"], [type="submit"]),
+  ::file-selector-button {
+    appearance: button;
+  }
+
+  /*
+  Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+  ::-webkit-inner-spin-button,
+  ::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  /*
+  Make elements with the HTML hidden attribute stay hidden by default.
+*/
+
+  [hidden]:where(:not([hidden="until-found"])) {
+    display: none !important;
+  }
+}
+
+@layer utilities {
+  @tailwind utilities;
+}
+
+/* Tailwind & Reset */
+
+/* =============================================
+  Opinionated resets
+============================================= */
+
+@layer base {
+  html,
+  :host {
+    /* Disallow browsers from synthesizing bold weights when missing */
+    font-synthesis-weight: none;
+  }
+
+  textarea {
+    /* Prevent resizing by default */
+    resize: none;
+  }
+
+  img,
+  svg {
+    flex-grow: 0;
+    /* Prevent flexbox from forcing visual assets to shrink/grow size unintentionally */
+    flex-shrink: 0;
+  }
+
+  input,
+  textarea,
+  select,
+  optgroup {
+    /* Normalize mobile Safari styles */
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none;
+    box-shadow: none;
+    /* Prevent Firefox autofill coloring (preview and confirmed modes) */
+    filter: none;
+    /* Normalize default outline offset and width in Safari */
+    outline-offset: 0;
+    outline-width: 2px;
+  }
+
+  /*
+   * Prevent non-standard gestures on interactive Elements, like double-tap to zoom.
+   * Single taps will be dispatched immediately, instead of delayed.
+   */
+  a,
+  button,
+  input,
+  label,
+  select,
+  textarea,
+  :where([aria-role="button"]) {
+    touch-action: manipulation;
+  }
+
+  button {
+    /* Reset default transform */
+    text-transform: none;
+    /* Remove gap below button in certain conditions where inline-block is used */
+    vertical-align: middle;
+  }
+
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    /* Normalize cursor to pointer type */
+    cursor: pointer;
+  }
+
+  pre {
+    /* Avoid overflow by default in preformatted text */
+    white-space: pre-wrap;
+  }
+
+  table {
+    /* Remove gaps between table borders by default */
+    border-spacing: 0;
+  }
+
+  /* Remove default quote elements */
+  blockquote,
+  q {
+    quotes: none;
+  }
+
+  blockquote::before,
+  blockquote::after,
+  q::before,
+  q::after {
+    content: none;
+  }
+}
+
+/* =============================================
+  Directives
+============================================= */
+
+@custom-variant hover {
+  @media (hover: hover) and (pointer: fine) {
+    &:hover {
+      @slot;
+    }
+  }
+}
+
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+
+@custom-variant light (&:where([data-theme=light], [data-theme=light] *));
+
+/* Tier 1 tokens: Primitives */
+
+@layer theme {
+  :root,
+  :where([data-theme]) {
+    /* =============================================
+      Gray
+    ============================================= */
+    --gray-500: #5d5d5d;
+
+    /* =============================================
+      Alpha transparency
+    ============================================= */
+    --alpha-0: color-mix(in oklab, var(--alpha-base) 0%, transparent);
+    --alpha-02: color-mix(in oklab, var(--alpha-base) 2%, transparent);
+    --alpha-04: color-mix(in oklab, var(--alpha-base) 4%, transparent);
+    --alpha-05: color-mix(in oklab, var(--alpha-base) 5%, transparent);
+    --alpha-06: color-mix(in oklab, var(--alpha-base) 6%, transparent);
+    --alpha-08: color-mix(in oklab, var(--alpha-base) 8%, transparent);
+    --alpha-10: color-mix(in oklab, var(--alpha-base) 10%, transparent);
+    --alpha-12: color-mix(in oklab, var(--alpha-base) 12%, transparent);
+    --alpha-15: color-mix(in oklab, var(--alpha-base) 15%, transparent);
+    --alpha-16: color-mix(in oklab, var(--alpha-base) 16%, transparent);
+    --alpha-20: color-mix(in oklab, var(--alpha-base) 20%, transparent);
+    --alpha-25: color-mix(in oklab, var(--alpha-base) 25%, transparent);
+    --alpha-30: color-mix(in oklab, var(--alpha-base) 30%, transparent);
+    --alpha-35: color-mix(in oklab, var(--alpha-base) 35%, transparent);
+    --alpha-40: color-mix(in oklab, var(--alpha-base) 40%, transparent);
+    --alpha-50: color-mix(in oklab, var(--alpha-base) 50%, transparent);
+    --alpha-60: color-mix(in oklab, var(--alpha-base) 60%, transparent);
+    --alpha-70: color-mix(in oklab, var(--alpha-base) 70%, transparent);
+
+    /* =============================================
+      Consistent contrast
+    ============================================= */
+    --white: #ffffff;
+    --black: #000000;
+
+    /* =============================================
+      Green
+    ============================================= */
+    --green-25: #edfaf2;
+    --green-50: #d9f4e4;
+    --green-75: #b8ebcc;
+    --green-100: #8cdfad;
+    --green-200: #66d492;
+    --green-300: #40c977;
+    --green-400: #04b84c;
+    --green-500: #00a240;
+    --green-600: #008635;
+    --green-700: #00692a;
+    --green-800: #004f1f;
+    --green-900: #003716;
+    --green-950: #011c0b;
+    --green-1000: #001207;
+    --green-a25: color-mix(in oklab, var(--green-400) 8%, transparent);
+    --green-a50: color-mix(in oklab, var(--green-400) 15%, transparent);
+    --green-a75: color-mix(in oklab, var(--green-400) 29%, transparent);
+    --green-a100: color-mix(in oklab, var(--green-400) 45%, transparent);
+    --green-a200: color-mix(in oklab, var(--green-400) 60%, transparent);
+    --green-a300: color-mix(in oklab, var(--green-400) 75%, transparent);
+
+    /* =============================================
+      Red
+    ============================================= */
+    --red-25: #fff0f0;
+    --red-50: #ffd9d9;
+    --red-75: #ffc6c5;
+    --red-100: #ffa4a2;
+    --red-200: #ff8583;
+    --red-300: #ff6764;
+    --red-400: #fa423e;
+    --red-500: #e02e2a;
+    --red-600: #ba2623;
+    --red-700: #911e1b;
+    --red-800: #6e1615;
+    --red-900: #4d100e;
+    --red-950: #280b0a;
+    --red-1000: #1f0909;
+    --red-a25: color-mix(in oklab, var(--red-400) 8%, transparent);
+    --red-a50: color-mix(in oklab, var(--red-400) 16%, transparent);
+    --red-a75: color-mix(in oklab, var(--red-400) 30%, transparent);
+    --red-a100: color-mix(in oklab, var(--red-400) 48%, transparent);
+    --red-a200: color-mix(in oklab, var(--red-400) 64%, transparent);
+    --red-a300: color-mix(in oklab, var(--red-400) 79%, transparent);
+
+    /* =============================================
+      Pink
+    ============================================= */
+    --pink-25: #fff4f9;
+    --pink-50: #ffe8f3;
+    --pink-75: #ffd4e8;
+    --pink-100: #ffbada;
+    --pink-200: #ffa3ce;
+    --pink-300: #ff8cc1;
+    --pink-400: #ff66ad;
+    --pink-500: #e04c91;
+    --pink-600: #ba437a;
+    --pink-700: #963c67;
+    --pink-800: #6e2c4a;
+    --pink-900: #4d1f34;
+    --pink-950: #29101c;
+    --pink-1000: #1a0a11;
+    --pink-a25: color-mix(in oklab, var(--pink-400) 8%, transparent);
+    --pink-a50: color-mix(in oklab, var(--pink-400) 16%, transparent);
+    --pink-a75: color-mix(in oklab, var(--pink-400) 28%, transparent);
+    --pink-a100: color-mix(in oklab, var(--pink-400) 45%, transparent);
+    --pink-a200: color-mix(in oklab, var(--pink-400) 60%, transparent);
+    --pink-a300: color-mix(in oklab, var(--pink-400) 76%, transparent);
+
+    /* =============================================
+      Orange
+    ============================================= */
+    --orange-25: #fff5f0;
+    --orange-50: #ffe7d9;
+    --orange-75: #ffcfb4;
+    --orange-100: #ffb790;
+    --orange-200: #ff9e6c;
+    --orange-300: #ff8549;
+    --orange-400: #fb6a22;
+    --orange-500: #e25507;
+    --orange-600: #b9480d;
+    --orange-700: #923b0f;
+    --orange-800: #6d2e0f;
+    --orange-900: #4a2206;
+    --orange-950: #281105;
+    --orange-1000: #211107;
+    --orange-a25: color-mix(in oklab, var(--orange-400) 7%, transparent);
+    --orange-a50: color-mix(in oklab, var(--orange-400) 16%, transparent);
+    --orange-a75: color-mix(in oklab, var(--orange-400) 33%, transparent);
+    --orange-a100: color-mix(in oklab, var(--orange-400) 48%, transparent);
+    --orange-a200: color-mix(in oklab, var(--orange-400) 65%, transparent);
+    --orange-a300: color-mix(in oklab, var(--orange-400) 81%, transparent);
+
+    /* =============================================
+      Yellow
+    ============================================= */
+    --yellow-25: #fffbed;
+    --yellow-50: #fff6d9;
+    --yellow-75: #ffeeb8;
+    --yellow-100: #ffe48c;
+    --yellow-200: #ffdb66;
+    --yellow-300: #ffd240;
+    --yellow-400: #ffc300;
+    --yellow-500: #e0ac00;
+    --yellow-600: #ba8e00;
+    --yellow-700: #916f00;
+    --yellow-800: #6e5400;
+    --yellow-900: #4d3b00;
+    --yellow-950: #261d00;
+    --yellow-1000: #1a1400;
+    --yellow-a25: color-mix(in oklab, var(--yellow-400) 8%, transparent);
+    --yellow-a50: color-mix(in oklab, var(--yellow-400) 15%, transparent);
+    --yellow-a75: color-mix(in oklab, var(--yellow-400) 27%, transparent);
+    --yellow-a100: color-mix(in oklab, var(--yellow-400) 45%, transparent);
+    --yellow-a200: color-mix(in oklab, var(--yellow-400) 59%, transparent);
+    --yellow-a300: color-mix(in oklab, var(--yellow-400) 74%, transparent);
+
+    /* =============================================
+      Purple
+    ============================================= */
+    --purple-25: #f9f5fe;
+    --purple-50: #efe5fe;
+    --purple-75: #e0cefd;
+    --purple-100: #ceb0fb;
+    --purple-200: #be95fa;
+    --purple-300: #ad7bf9;
+    --purple-400: #924ff7;
+    --purple-500: #8046d9;
+    --purple-600: #6b3ab4;
+    --purple-700: #532d8d;
+    --purple-800: #3f226a;
+    --purple-900: #2c184a;
+    --purple-950: #160c25;
+    --purple-1000: #100a19;
+    --purple-a25: color-mix(in oklab, var(--purple-400) 6%, transparent);
+    --purple-a50: color-mix(in oklab, var(--purple-400) 15%, transparent);
+    --purple-a75: color-mix(in oklab, var(--purple-400) 28%, transparent);
+    --purple-a100: color-mix(in oklab, var(--purple-400) 45%, transparent);
+    --purple-a200: color-mix(in oklab, var(--purple-400) 60%, transparent);
+    --purple-a300: color-mix(in oklab, var(--purple-400) 75%, transparent);
+
+    /* =============================================
+      Blue
+    ============================================= */
+    --blue-25: #f5faff;
+    --blue-50: #e5f3ff;
+    --blue-75: #cce6ff;
+    --blue-100: #99ceff;
+    --blue-200: #66b5ff;
+    --blue-300: #339cff;
+    --blue-400: #0285ff;
+    --blue-500: #0169cc;
+    --blue-600: #004f99;
+    --blue-700: #003f7a;
+    --blue-800: #013566;
+    --blue-900: #00284d;
+    --blue-950: #000e1a;
+    --blue-1000: #000d19;
+    --blue-a25: color-mix(in oklab, var(--blue-400) 4%, transparent);
+    --blue-a50: color-mix(in oklab, var(--blue-400) 13%, transparent);
+    --blue-a75: color-mix(in oklab, var(--blue-400) 25%, transparent);
+    --blue-a100: color-mix(in oklab, var(--blue-400) 40%, transparent);
+    --blue-a200: color-mix(in oklab, var(--blue-400) 60%, transparent);
+    --blue-a300: color-mix(in oklab, var(--blue-400) 80%, transparent);
+
+    /* =============================================
+    Sizes
+    ============================================= */
+    --hairline: 1px;
+
+    /* =============================================
+    Shadows
+    ============================================= */
+    /* Color */
+    /* Geometry – x | y | blur | spread */
+  }
+  :where(:root), :where([data-theme="light"]) {
+    --gray-0: #ffffff;
+    --gray-25: #fcfcfc;
+    --gray-50: #f9f9f9;
+    --gray-75: #f3f3f3;
+    --gray-100: #ededed;
+    --gray-150: #dfdfdf;
+    --gray-200: #cdcdcd;
+    --gray-250: #b9b9b9;
+    --gray-300: #afafaf;
+    --gray-350: #9f9f9f;
+    --gray-400: #8f8f8f;
+    --gray-450: #767676;
+    --gray-550: #4f4f4f;
+    --gray-600: #414141;
+    --gray-650: #393939;
+    --gray-700: #303030;
+    --gray-750: #282828;
+    --gray-800: #212121;
+    --gray-850: #1c1c1c;
+    --gray-900: #181818;
+    --gray-925: #161616;
+    --gray-950: #131313;
+    --gray-975: #101010;
+    --gray-1000: #0d0d0d;
+    --alpha-base: #0d0d0d;
+  }
+  :where([data-theme="dark"]) {
+    --gray-0: #0d0d0d;
+    --gray-25: #101010;
+    --gray-50: #131313;
+    --gray-75: #161616;
+    --gray-100: #181818;
+    --gray-150: #1c1c1c;
+    --gray-200: #212121;
+    --gray-250: #282828;
+    --gray-300: #303030;
+    --gray-350: #393939;
+    --gray-400: #414141;
+    --gray-450: #4f4f4f;
+    --gray-550: #767676;
+    --gray-600: #8f8f8f;
+    --gray-650: #9f9f9f;
+    --gray-700: #afafaf;
+    --gray-750: #b9b9b9;
+    --gray-800: #cdcdcd;
+    --gray-850: #dcdcdc;
+    --gray-900: #ededed;
+    --gray-925: #f3f3f3;
+    --gray-950: #f3f3f3;
+    --gray-975: #f9f9f9;
+    --gray-1000: #ffffff;
+    --alpha-base: #ffffff;
+  }
+
+    @media (resolution >= 150dpi), (resolution >= 1.5dppx) {
+  :root,
+  :where([data-theme]) {
+      --hairline: 0.5px;
+  }
+    }
+
+    :root,
+  :where([data-theme]) {
+    --shadow-color: 0 0 0;
+    --elevation-100-geo: 0 1px 2px -1px;
+    --elevation-200-geo: 0 2px 4px -1px;
+    --elevation-300-geo: 0 4px 8px -2px;
+    --elevation-400-geo: 0 8px 16px -4px;
+  }
+
+  :where(:root),
+  :where([data-theme="light"]) {
+    /* Alpha */
+    --shadow-alpha-100: 0.08;
+    --shadow-alpha-200: 0.08;
+    --shadow-alpha-300: 0.1;
+    --shadow-alpha-400: 0.12;
+    --shadow-hairline-width: 1px;
+    --shadow-hairline-color: rgb(0 0 0 / 8%);
+  }
+
+    @media (resolution >= 150dpi), (resolution >= 1.5dppx) {
+
+  :where(:root),
+  :where([data-theme="light"]) {
+      --shadow-hairline-width: 0.5px;
+      --shadow-hairline-color: rgb(0 0 0 / 10%)
+  }
+    }
+
+  :where([data-theme="dark"]) {
+    --shadow-alpha-100: 0.2;
+    --shadow-alpha-200: 0.2;
+    --shadow-alpha-300: 0.36;
+    --shadow-alpha-400: 0.3;
+    --shadow-hairline-width: 1px;
+    --shadow-hairline-color: rgb(255 255 255 / 10%);
+  }
+
+    @media (resolution >= 150dpi), (resolution >= 1.5dppx) {
+
+  :where([data-theme="dark"]) {
+      --shadow-hairline-width: 0.5px;
+      --shadow-hairline-color: rgb(255 255 255 / 12%)
+  }
+    }
+
+    :where([data-theme="dark"]) [data-surface="elevated"] {
+      --shadow-hairline: 0 0 rgb(0 0 0 / 0%); /* no edge on lighter gray */
+    }
+}
+
+/* Tier 2 tokens: Semantic */
+
+/* stylelint-disable custom-property-pattern -- Tailwind requires this sometimes */
+
+/* Always generate these variables, but they are also available to Tailwind */
+
+@theme static {
+  /* =============================================
+    Breakpoints - configured in postcss.config
+  ============================================= */
+  --breakpoint-xs: 380px;
+  --breakpoint-sm: 576px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
+
+  /* =============================================
+    Font families
+  ============================================= */
+  --font-serif: initial;
+  --font-sans: ui-sans-serif, -apple-system, system-ui, "Segoe UI", "Noto Sans", "Helvetica",
+    "Arial", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+  --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", "Menlo", "Monaco", "Consolas",
+    "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
+
+  /* =============================================
+    Font weights
+  ============================================= */
+  --font-weight-*: initial;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* =============================================
+    Radius
+  ============================================= */
+  --radius-*: initial;
+  --radius-2xs: 0.125rem; /* 2px */
+  --radius-xs: 0.25rem; /* 4px */
+  --radius-sm: 0.375rem; /* 6px */
+  --radius-md: 0.5rem; /* 8px */
+  --radius-lg: 0.625rem; /* 10px */
+  --radius-xl: 0.75rem; /* 12px */
+  --radius-2xl: 1rem; /* 16px */
+  --radius-3xl: 1.25rem; /* 20px */
+  --radius-4xl: 1.5rem; /* 24px */
+  --radius-full: 9999px;
+
+  /* =============================================
+    Spacing
+  ============================================= */
+  --spacing: 0.25rem; /* 4px */
+}
+
+@layer theme {
+  :root,
+  :where([data-theme]) {
+    /* =============================================
+      Text colors
+    ============================================= */
+    --color-text: var(--gray-1000);
+    --color-text-inverse: var(--gray-0);
+
+    /* =============================================
+      Ring colors
+    ============================================= */
+
+    /* =============================================
+      Primary colors
+    ============================================= */
+    /* Text */
+    --color-text-primary: var(--color-text);
+    /* Soft */
+    --color-text-primary-soft: var(--color-text);
+    --color-background-primary-soft-alt: var(--alpha-02);
+    --color-border-primary-soft-alt: var(--alpha-06);
+    --color-text-primary-soft-alt: var(--color-text);
+    /* Surface */
+    --color-text-primary-surface: var(--color-text);
+    /* Solid */
+    --color-text-primary-solid: var(--color-text-inverse);
+    /* Outline */
+    --color-text-primary-outline: var(--color-text);
+    --color-text-primary-outline-hover: var(--color-text);
+    /* Ghost */
+    --color-text-primary-ghost: var(--color-text);
+    --color-text-primary-ghost-hover: var(--color-text);
+    /* Ring */
+    --color-ring-primary: var(--color-ring);
+    --color-ring-primary-soft: var(--color-ring-primary);
+    --color-ring-primary-solid: var(--color-ring-primary);
+    --color-ring-primary-outline: var(--color-ring-primary);
+    --color-ring-primary-ghost: var(--color-ring-primary);
+
+    /* =============================================
+      Secondary colors
+    ============================================= */
+    /* Soft */
+    --color-text-secondary-soft: var(--color-text);
+    --color-background-secondary-soft-alt: var(--alpha-02);
+    --color-border-secondary-soft-alt: var(--alpha-06);
+    --color-text-secondary-soft-alt: var(--color-text);
+    /* Solid */
+    --color-text-secondary-solid: var(--white);
+    /* Outline */
+    --color-text-secondary-outline: var(--color-text-secondary);
+    --color-text-secondary-outline-hover: var(--color-text);
+    /* Ghost */
+    --color-text-secondary-ghost: var(--color-text-secondary);
+    --color-text-secondary-ghost-hover: var(--color-text);
+    /* Ring */
+    --color-ring-secondary: var(--color-ring);
+    --color-ring-secondary-soft: var(--color-ring-secondary);
+    --color-ring-secondary-solid: var(--color-ring-secondary);
+    --color-ring-secondary-outline: var(--color-ring-secondary);
+    --color-ring-secondary-ghost: var(--color-ring-secondary);
+
+    /* =============================================
+      Info colors
+    ============================================= */
+    /* Text */
+    /* Soft */
+    --color-background-info-soft: var(--blue-50);
+    --color-background-info-soft-hover: var(--blue-75);
+    --color-background-info-soft-active: var(--blue-75);
+    --color-background-info-soft-alpha: var(--blue-a50);
+    --color-background-info-soft-alpha-hover: var(--blue-a75);
+    --color-background-info-soft-alpha-active: var(--blue-a75);
+    /* Surface */
+    /* Solid */
+    --color-background-info-solid: var(--blue-400);
+    --color-background-info-solid-hover: var(--blue-500);
+    --color-background-info-solid-active: var(--blue-500);
+    --color-text-info-solid: var(--white);
+    /* Outline */
+    --color-background-info-outline-hover: var(--blue-a25);
+    --color-background-info-outline-active: var(--blue-a25);
+    --color-border-info-outline: var(--blue-500);
+    --color-border-info-outline-hover: var(--blue-500);
+    --color-text-info-outline: var(--blue-500);
+    --color-text-info-outline-hover: var(--blue-500);
+    /* Ghost */
+    --color-background-info-ghost-hover: var(--blue-a50);
+    --color-background-info-ghost-active: var(--blue-a50);
+    /* Ring */
+    --color-ring-info: var(--color-ring);
+    --color-ring-info-soft: var(--color-ring-info);
+    --color-ring-info-solid: var(--color-ring-info);
+    --color-ring-info-outline: var(--color-ring-info);
+    --color-ring-info-ghost: var(--color-ring-info);
+
+    /* =============================================
+      Warning colors
+    ============================================= */
+    /* Text */
+    /* Soft */
+    --color-background-warning-soft: var(--orange-50);
+    --color-background-warning-soft-hover: var(--orange-75);
+    --color-background-warning-soft-active: var(--orange-75);
+    --color-background-warning-soft-alpha: var(--orange-a50);
+    --color-background-warning-soft-alpha-hover: var(--orange-a75);
+    --color-background-warning-soft-alpha-active: var(--orange-a75);
+    /* Surface */
+    /* Solid */
+    --color-background-warning-solid: var(--orange-500);
+    --color-background-warning-solid-hover: var(--orange-600);
+    --color-background-warning-solid-active: var(--orange-600);
+    --color-text-warning-solid: var(--white);
+    /* Outline */
+    --color-background-warning-outline-hover: var(--orange-a25);
+    --color-background-warning-outline-active: var(--orange-a25);
+    --color-border-warning-outline: var(--orange-500);
+    --color-border-warning-outline-hover: var(--orange-500);
+    --color-text-warning-outline: var(--orange-500);
+    --color-text-warning-outline-hover: var(--orange-500);
+    /* Ghost */
+    --color-background-warning-ghost-hover: var(--orange-a50);
+    --color-background-warning-ghost-active: var(--orange-a50);
+    --color-text-warning-ghost: var(--orange-500);
+    --color-text-warning-ghost-hover: var(--orange-500);
+    /* Ring */
+    --color-ring-warning: var(--color-ring);
+    --color-ring-warning-soft: var(--color-ring-warning);
+    --color-ring-warning-solid: var(--color-ring-warning);
+    --color-ring-warning-outline: var(--color-ring-warning);
+    --color-ring-warning-ghost: var(--color-ring-warning);
+
+    /* =============================================
+      Caution colors
+    ============================================= */
+    /* Text */
+    --color-text-caution-hover: var(--yellow-800);
+    /* Soft */
+    --color-background-caution-soft: var(--yellow-50);
+    --color-background-caution-soft-hover: var(--yellow-75);
+    --color-background-caution-soft-active: var(--yellow-75);
+    --color-background-caution-soft-alpha: var(--yellow-a50);
+    --color-background-caution-soft-alpha-hover: var(--yellow-a75);
+    --color-background-caution-soft-alpha-active: var(--yellow-a75);
+    /* Surface */
+    /* Solid */
+    --color-background-caution-solid: var(--yellow-600);
+    --color-background-caution-solid-hover: var(--yellow-700);
+    --color-background-caution-solid-active: var(--yellow-700);
+    --color-text-caution-solid: var(--white);
+    /* Outline */
+    --color-background-caution-outline-hover: var(--yellow-a25);
+    --color-background-caution-outline-active: var(--yellow-a25);
+    --color-border-caution-outline: var(--yellow-700);
+    --color-border-caution-outline-hover: var(--yellow-700);
+    --color-text-caution-outline: var(--yellow-700);
+    --color-text-caution-outline-hover: var(--yellow-700);
+    /* Ghost */
+    --color-background-caution-ghost-hover: var(--yellow-a50);
+    --color-background-caution-ghost-active: var(--yellow-a50);
+    --color-text-caution-ghost: var(--yellow-700);
+    --color-text-caution-ghost-hover: var(--yellow-700);
+    /* Ring */
+    --color-ring-caution: var(--color-ring);
+    --color-ring-caution-soft: var(--color-ring-caution);
+    --color-ring-caution-solid: var(--color-ring-caution);
+    --color-ring-caution-outline: var(--color-ring-caution);
+    --color-ring-caution-ghost: var(--color-ring-caution);
+
+    /* =============================================
+      Danger colors
+    ============================================= */
+    /* Text */
+    /* Soft */
+    --color-background-danger-soft: var(--red-50);
+    --color-background-danger-soft-hover: var(--red-75);
+    --color-background-danger-soft-active: var(--red-75);
+    --color-background-danger-soft-alpha: var(--red-a50);
+    --color-background-danger-soft-alpha-hover: var(--red-a75);
+    --color-background-danger-soft-alpha-active: var(--red-a75);
+    /* Surface */
+    /* Solid */
+    --color-background-danger-solid: var(--red-500);
+    --color-background-danger-solid-hover: var(--red-600);
+    --color-background-danger-solid-active: var(--red-600);
+    --color-text-danger-solid: var(--white);
+    /* Outline */
+    --color-background-danger-outline-hover: var(--red-a25);
+    --color-background-danger-outline-active: var(--red-a25);
+    --color-border-danger-outline: var(--red-500);
+    --color-border-danger-outline-hover: var(--red-500);
+    --color-text-danger-outline: var(--red-500);
+    --color-text-danger-outline-hover: var(--red-500);
+    /* Ghost */
+    --color-background-danger-ghost-hover: var(--red-a50);
+    --color-background-danger-ghost-active: var(--red-a50);
+    --color-text-danger-ghost: var(--red-500);
+    --color-text-danger-ghost-hover: var(--red-500);
+    /* Ring */
+    --color-ring-danger: var(--red-200);
+    --color-ring-danger-soft: var(--color-ring-danger);
+    --color-ring-danger-solid: var(--color-ring-danger);
+    --color-ring-danger-outline: var(--color-ring-danger);
+    --color-ring-danger-ghost: var(--color-ring-danger);
+
+    /* =============================================
+      Success colors
+    ============================================= */
+    /* Text */
+    /* Soft */
+    --color-background-success-soft: var(--green-50);
+    --color-background-success-soft-hover: var(--green-75);
+    --color-background-success-soft-active: var(--green-75);
+    --color-background-success-soft-alpha: var(--green-a50);
+    --color-background-success-soft-alpha-hover: var(--green-a75);
+    --color-background-success-soft-alpha-active: var(--green-a75);
+    /* Surface */
+    /* Solid */
+    --color-text-success-solid: var(--white);
+    /* Outline */
+    --color-background-success-outline-hover: var(--green-a25);
+    --color-background-success-outline-active: var(--green-a25);
+    --color-text-success-outline: var(--green-500);
+    --color-text-success-outline-hover: var(--green-500);
+    /* Ghost */
+    --color-background-success-ghost-hover: var(--green-a50);
+    --color-background-success-ghost-active: var(--green-a50);
+    --color-text-success-ghost: var(--green-500);
+    --color-text-success-ghost-hover: var(--green-500);
+    /* Ring */
+    --color-ring-success: var(--color-ring);
+    --color-ring-success-soft: var(--color-ring-info);
+    --color-ring-success-solid: var(--color-ring-info);
+    --color-ring-success-outline: var(--color-ring-info);
+    --color-ring-success-ghost: var(--color-ring-info);
+
+    /* =============================================
+      Discovery colors
+    ============================================= */
+    /* Text */
+    /* Soft */
+    --color-background-discovery-soft: var(--purple-50);
+    --color-background-discovery-soft-hover: var(--purple-75);
+    --color-background-discovery-soft-active: var(--purple-75);
+    --color-background-discovery-soft-alpha: var(--purple-a50);
+    --color-background-discovery-soft-alpha-hover: var(--purple-a75);
+    --color-background-discovery-soft-alpha-active: var(--purple-a75);
+    /* Surface */
+    /* Solid */
+    --color-background-discovery-solid: var(--purple-400);
+    --color-background-discovery-solid-hover: var(--purple-500);
+    --color-background-discovery-solid-active: var(--purple-500);
+    --color-text-discovery-solid: var(--white);
+    /* Outline */
+    --color-background-discovery-outline-hover: var(--purple-a25);
+    --color-background-discovery-outline-active: var(--purple-a25);
+    --color-border-discovery-outline: var(--purple-500);
+    --color-border-discovery-outline-hover: var(--purple-500);
+    /* Ghost */
+    --color-background-discovery-ghost-hover: var(--purple-a50);
+    --color-background-discovery-ghost-active: var(--purple-a50);
+    --color-text-discovery-ghost: var(--purple-500);
+    --color-text-discovery-ghost-hover: var(--purple-500);
+    /* Ring */
+    --color-ring-discovery: var(--color-ring);
+    --color-ring-discovery-soft: var(--color-ring);
+    --color-ring-discovery-solid: var(--color-ring);
+    --color-ring-discovery-outline: var(--color-ring);
+    --color-ring-discovery-ghost: var(--color-ring);
+
+    /* =============================================
+      Disabled colors
+    ============================================= */
+    /* Common disabled styles that are typically shared across all semantic colors */
+    --color-background-disabled: var(--alpha-05);
+    --color-border-disabled: var(--alpha-06);
+
+    /* =============================================
+      Border colors
+    ============================================= */
+
+    /* =============================================
+      Typography
+    ============================================= */
+    /* Tracking */
+    --font-tracking-wide: 0em;
+    --font-tracking-normal: 0em;
+    --font-tracking-tight: 0em;
+    /* Sizes */
+    --font-heading-5xl-size: 4.5rem; /* 72px  */
+    --font-heading-5xl-line-height: 4.5rem; /* 72px  */
+    --font-heading-5xl-weight: var(--font-weight-semibold);
+    --font-heading-5xl-tracking: var(--tracking-tight);
+    --font-heading-4xl-size: 3.75rem; /* 60px  */
+    --font-heading-4xl-line-height: 3.75rem; /* 60px  */
+    --font-heading-4xl-weight: var(--font-weight-semibold);
+    --font-heading-4xl-tracking: var(--tracking-tight);
+    --font-heading-3xl-size: 3rem; /* 48px  */
+    --font-heading-3xl-line-height: 3rem; /* 48px  */
+    --font-heading-3xl-weight: var(--font-weight-semibold);
+    --font-heading-3xl-tracking: var(--tracking-tight);
+    --font-heading-2xl-size: 2.25rem; /* 36px  */
+    --font-heading-2xl-line-height: 2.625rem; /* 42px */
+    --font-heading-2xl-weight: var(--font-weight-semibold);
+    --font-heading-2xl-tracking: var(--tracking-tight);
+    --font-heading-xl-size: 2rem; /* 32px  */
+    --font-heading-xl-line-height: 2.375rem; /* 38px */
+    --font-heading-xl-weight: var(--font-weight-semibold);
+    --font-heading-xl-tracking: var(--tracking-tight);
+    --font-heading-lg-size: 1.5rem; /* 24px  */
+    --font-heading-lg-line-height: 1.75rem; /* 28px */
+    --font-heading-lg-weight: var(--font-weight-semibold);
+    --font-heading-lg-tracking: var(--tracking-normal);
+    --font-heading-md-size: 1.25rem; /* 20px  */
+    --font-heading-md-line-height: 1.625rem; /* 26px */
+    --font-heading-md-weight: var(--font-weight-semibold);
+    --font-heading-md-tracking: var(--tracking-normal);
+    --font-heading-sm-size: 1.125rem; /* 18px  */
+    --font-heading-sm-line-height: 1.625rem; /* 26px */
+    --font-heading-sm-weight: var(--font-weight-semibold);
+    --font-heading-sm-tracking: var(--tracking-normal);
+    --font-heading-xs-size: 1rem; /* 16px  */
+    --font-heading-xs-line-height: 1.5rem; /* 24px */
+    --font-heading-xs-weight: var(--font-weight-semibold);
+    --font-heading-xs-tracking: var(--tracking-normal);
+    --font-text-lg-size: 1.125rem; /* 18px  */
+    --font-text-lg-line-height: 1.8125rem; /* 29px */
+    --font-text-lg-weight: var(--font-weight-normal);
+    --font-text-lg-tracking: var(--tracking-normal);
+    --font-text-md-size: 1rem; /* 16px  */
+    --font-text-md-line-height: 1.5rem; /* 24px */
+    --font-text-md-weight: var(--font-weight-normal);
+    --font-text-md-tracking: var(--tracking-normal);
+    --font-text-sm-size: 0.875rem; /* 14px  */
+    --font-text-sm-line-height: 1.25rem; /* 20px */
+    --font-text-sm-weight: var(--font-weight-normal);
+    --font-text-sm-tracking: var(--tracking-normal);
+    --font-text-xs-size: 0.75rem; /* 12px  */
+    --font-text-xs-line-height: 1.125rem; /* 18px */
+    --font-text-xs-weight: var(--font-weight-normal);
+    --font-text-xs-tracking: var(--tracking-wide);
+    --font-text-2xs-size: 0.625rem; /* 10px  */
+    --font-text-2xs-line-height: 0.875rem; /* 14px */
+    --font-text-2xs-weight: var(--font-weight-normal);
+    --font-text-2xs-tracking: var(--tracking-wide);
+    --font-text-3xs-size: 0.5rem; /* 8px  */
+    --font-text-3xs-line-height: 0.75rem; /* 12px  */
+    --font-text-3xs-weight: var(--font-weight-normal);
+    --font-text-3xs-tracking: var(--tracking-wide);
+
+    /* =============================================
+    Control sizes
+  ============================================= */
+    --control-size-3xs: 1.375rem; /* 22px */
+    --control-size-2xs: 1.5rem; /* 24px */
+    --control-size-xs: 1.625rem; /* 26px */
+    --control-size-sm: 1.75rem; /* 28px */
+    --control-size-md: 2rem; /* 32px */
+    --control-size-lg: 2.25rem; /* 36px */
+    --control-size-xl: 2.5rem; /* 40px */
+    --control-size-2xl: 2.75rem; /* 44px */
+    --control-size-3xl: 3rem; /* 48px */
+    --control-gutter-2xs: 0.375rem; /* 6px */
+    --control-gutter-xs: 0.5rem; /* 8px */
+    --control-gutter-sm: 0.625rem; /* 10px */
+    --control-gutter-md: 0.75rem; /* 12px */
+    --control-gutter-lg: 0.875rem; /* 14px */
+    --control-gutter-xl: 1rem; /* 16px */
+    --control-gutter-pill-scaling: 1.33;
+    --control-radius-sm: var(--radius-sm);
+    --control-radius-md: var(--radius-md);
+    --control-radius-lg: var(--radius-lg);
+    --control-radius-xl: var(--radius-xl);
+    --control-font-size-sm: var(--font-text-xs-size);
+    --control-font-size-md: var(--font-text-sm-size);
+    --control-font-size-lg: var(--font-text-md-size);
+    --control-icon-size-xs: 0.875rem; /* 14px */
+    --control-icon-size-sm: 1rem; /* 16px */
+    --control-icon-size-md: 1.125rem; /* 18px */
+    --control-icon-size-lg: 1.25rem; /* 20px */
+    --control-icon-size-xl: 1.375rem; /* 22px */
+    --control-icon-size-2xl: 1.5rem; /* 24px */
+
+    /* =============================================
+      Motion
+    ============================================= */
+    --cubic-enter: cubic-bezier(0.19, 1, 0.22, 1);
+    --cubic-exit: cubic-bezier(0.8, 0, 0.4, 1);
+    --cubic-exit-snappy: cubic-bezier(0.65, 0, 0.4, 1); /* less inertia delay */
+    --cubic-move: cubic-bezier(0.65, 0, 0.35, 1);
+    --transition-duration-basic: 150ms;
+    --transition-ease-basic: ease;
+
+    /* =============================================
+      Scrollbar
+    ============================================= */
+    --scrollbar-color: var(--alpha-30);
+
+    /* =============================================
+      Shadows
+    ============================================= */
+    --shadow-hairline: 0 0 0 var(--shadow-hairline-width) var(--shadow-hairline-color);
+    /* 100 */
+    --shadow-100: var(--elevation-100-geo) rgb(var(--shadow-color) / var(--shadow-alpha-100));
+    --shadow-100-strong: var(--elevation-100-geo)
+      rgb(var(--shadow-color) / calc(var(--shadow-alpha-100) * 1.25));
+    --shadow-100-stronger: var(--elevation-100-geo)
+      rgb(var(--shadow-color) / calc(var(--shadow-alpha-100) * 1.6));
+    /* 200 */
+    --shadow-200: var(--elevation-200-geo) rgb(var(--shadow-color) / var(--shadow-alpha-200));
+    --shadow-200-strong: var(--elevation-200-geo)
+      rgb(var(--shadow-color) / calc(var(--shadow-alpha-200) * 1.25));
+    --shadow-200-stronger: var(--elevation-200-geo)
+      rgb(var(--shadow-color) / calc(var(--shadow-alpha-200) * 1.6));
+    /* 300 */
+    --shadow-300: var(--elevation-300-geo) rgb(var(--shadow-color) / var(--shadow-alpha-300));
+    --shadow-300-strong: var(--elevation-300-geo)
+      rgb(var(--shadow-color) / calc(var(--shadow-alpha-300) * 1.25));
+    --shadow-300-stronger: var(--elevation-300-geo)
+      rgb(var(--shadow-color) / calc(var(--shadow-alpha-300) * 1.6));
+    /* 400 */
+    --shadow-400: var(--elevation-400-geo) rgb(var(--shadow-color) / var(--shadow-alpha-400));
+    --shadow-400-strong: var(--elevation-400-geo)
+      rgb(var(--shadow-color) / calc(var(--shadow-alpha-400) * 1.25));
+    --shadow-400-stronger: var(--elevation-400-geo)
+      rgb(var(--shadow-color) / calc(var(--shadow-alpha-400) * 1.6));
+
+    /* =============================================
+      Surfaces
+    ============================================= */
+  }
+  :where(:root), :where([data-theme="light"]) {
+    --color-text-secondary: var(--gray-500);
+    --color-text-tertiary: var(--gray-400);
+    --color-ring: var(--blue-500);
+    --color-background-primary-soft: var(--gray-100);
+    --color-background-primary-soft-hover: var(--gray-150);
+    --color-background-primary-soft-active: var(--gray-200);
+    --color-background-primary-soft-alpha: var(--alpha-08);
+    --color-background-primary-soft-alpha-hover: var(--alpha-12);
+    --color-background-primary-soft-alpha-active: var(--alpha-16);
+    --color-background-primary-surface: var(--alpha-05);
+    --color-border-primary-surface: var(--alpha-05);
+    --color-background-primary-solid: var(--gray-900);
+    --color-background-primary-solid-hover: var(--gray-700);
+    --color-background-primary-solid-active: var(--gray-600);
+    --color-background-primary-outline-hover: var(--alpha-02);
+    --color-background-primary-outline-active: var(--alpha-04);
+    --color-border-primary-outline: var(--alpha-16);
+    --color-border-primary-outline-hover: var(--alpha-20);
+    --color-background-primary-ghost-hover: var(--alpha-08);
+    --color-background-primary-ghost-active: var(--alpha-12);
+    --color-background-secondary-soft: var(--gray-100);
+    --color-background-secondary-soft-hover: var(--gray-150);
+    --color-background-secondary-soft-active: var(--gray-200);
+    --color-background-secondary-soft-alpha: var(--alpha-08);
+    --color-background-secondary-soft-alpha-hover: var(--alpha-12);
+    --color-background-secondary-soft-alpha-active: var(--alpha-16);
+    --color-background-secondary-solid: var(--gray-500);
+    --color-background-secondary-solid-hover: var(--gray-600);
+    --color-background-secondary-solid-active: var(--gray-700);
+    --color-background-secondary-outline-hover: var(--alpha-02);
+    --color-background-secondary-outline-active: var(--alpha-04);
+    --color-border-secondary-outline: var(--alpha-16);
+    --color-border-secondary-outline-hover: var(--alpha-20);
+    --color-background-secondary-ghost-hover: var(--alpha-08);
+    --color-background-secondary-ghost-active: var(--alpha-12);
+    --color-text-info: var(--blue-500);
+    --color-text-info-soft: var(--blue-600);
+    --color-background-info-surface: var(--blue-a25);
+    --color-border-info-surface: var(--blue-a25);
+    --color-text-info-surface: var(--blue-600);
+    --color-text-info-ghost: var(--blue-500);
+    --color-text-info-ghost-hover: var(--blue-500);
+    --color-text-warning: var(--orange-700);
+    --color-text-warning-soft: var(--orange-700);
+    --color-background-warning-surface: var(--orange-a25);
+    --color-border-warning-surface: var(--orange-a25);
+    --color-text-warning-surface: var(--orange-700);
+    --color-text-caution: var(--yellow-700);
+    --color-text-caution-soft: var(--yellow-800);
+    --color-background-caution-surface: var(--yellow-a25);
+    --color-border-caution-surface: var(--yellow-a25);
+    --color-text-caution-surface: var(--yellow-800);
+    --color-text-danger: var(--red-700);
+    --color-text-danger-soft: var(--red-600);
+    --color-background-danger-surface: var(--red-a25);
+    --color-border-danger-surface: var(--red-a25);
+    --color-text-danger-surface: var(--red-600);
+    --color-text-success: var(--green-700);
+    --color-text-success-soft: var(--green-600);
+    --color-background-success-surface: var(--green-a25);
+    --color-border-success-surface: var(--green-a25);
+    --color-text-success-surface: var(--green-600);
+    --color-background-success-solid: var(--green-500);
+    --color-background-success-solid-hover: var(--green-500);
+    --color-background-success-solid-active: var(--green-500);
+    --color-border-success-outline: var(--green-500);
+    --color-border-success-outline-hover: var(--green-500);
+    --color-text-discovery: var(--purple-700);
+    --color-text-discovery-soft: var(--purple-600);
+    --color-background-discovery-surface: var(--purple-a25);
+    --color-border-discovery-surface: var(--purple-a25);
+    --color-text-discovery-surface: var(--purple-600);
+    --color-text-discovery-outline: var(--purple-500);
+    --color-text-discovery-outline-hover: var(--purple-500);
+    --color-text-disabled: var(--gray-400);
+    --color-border-subtle: var(--alpha-05);
+    --color-border: var(--alpha-10);
+    --color-border-strong: var(--alpha-15);
+    --shadow: 0 10px 15px -3px rgba(0 0 0 / 10%),
+      0 4px 6px -4px rgba(0 0 0 / 10%);
+    --color-surface: var(--gray-0);
+    --color-surface-secondary: var(--gray-50);
+    --color-surface-tertiary: var(--gray-75);
+    --color-surface-elevated: var(--gray-0);
+    --color-surface-elevated-secondary: var(--gray-50)
+  }
+  :where([data-theme="dark"]) {
+    --color-text-secondary: var(--gray-700);
+    --color-text-tertiary: var(--gray-600);
+    --color-ring: var(--blue-400);
+    --color-background-primary-soft: var(--gray-300);
+    --color-background-primary-soft-hover: var(--gray-350);
+    --color-background-primary-soft-active: var(--gray-400);
+    --color-background-primary-soft-alpha: var(--alpha-12);
+    --color-background-primary-soft-alpha-hover: var(--alpha-16);
+    --color-background-primary-soft-alpha-active: var(--alpha-20);
+    --color-background-primary-surface: var(--alpha-08);
+    --color-border-primary-surface: var(--alpha-08);
+    --color-background-primary-solid: var(--gray-950);
+    --color-background-primary-solid-hover: var(--gray-900);
+    --color-background-primary-solid-active: var(--gray-850);
+    --color-background-primary-outline-hover: var(--alpha-04);
+    --color-background-primary-outline-active: var(--alpha-06);
+    --color-border-primary-outline: var(--alpha-25);
+    --color-border-primary-outline-hover: var(--alpha-30);
+    --color-background-primary-ghost-hover: var(--alpha-12);
+    --color-background-primary-ghost-active: var(--alpha-16);
+    --color-background-secondary-soft: var(--gray-300);
+    --color-background-secondary-soft-hover: var(--gray-350);
+    --color-background-secondary-soft-active: var(--gray-400);
+    --color-background-secondary-soft-alpha: var(--alpha-12);
+    --color-background-secondary-soft-alpha-hover: var(--alpha-16);
+    --color-background-secondary-soft-alpha-active: var(--alpha-20);
+    --color-background-secondary-solid: var(--gray-400);
+    --color-background-secondary-solid-hover: var(--gray-450);
+    --color-background-secondary-solid-active: var(--gray-500);
+    --color-background-secondary-outline-hover: var(--alpha-04);
+    --color-background-secondary-outline-active: var(--alpha-06);
+    --color-border-secondary-outline: var(--alpha-25);
+    --color-border-secondary-outline-hover: var(--alpha-30);
+    --color-background-secondary-ghost-hover: var(--alpha-12);
+    --color-background-secondary-ghost-active: var(--alpha-16);
+    --color-text-info: var(--blue-200);
+    --color-text-info-soft: var(--blue-300);
+    --color-background-info-surface: var(--blue-a50);
+    --color-border-info-surface: var(--blue-a50);
+    --color-text-info-surface: var(--blue-300);
+    --color-text-info-ghost: var(--blue-200);
+    --color-text-info-ghost-hover: var(--blue-200);
+    --color-text-warning: var(--orange-500);
+    --color-text-warning-soft: var(--orange-400);
+    --color-background-warning-surface: var(--orange-a50);
+    --color-border-warning-surface: var(--orange-a50);
+    --color-text-warning-surface: var(--orange-400);
+    --color-text-caution: var(--yellow-500);
+    --color-text-caution-soft: var(--yellow-400);
+    --color-background-caution-surface: var(--yellow-a50);
+    --color-border-caution-surface: var(--yellow-a50);
+    --color-text-caution-surface: var(--yellow-400);
+    --color-text-danger: var(--red-500);
+    --color-text-danger-soft: var(--red-400);
+    --color-background-danger-surface: var(--red-a50);
+    --color-border-danger-surface: var(--red-a50);
+    --color-text-danger-surface: var(--red-400);
+    --color-text-success: var(--green-400);
+    --color-text-success-soft: var(--green-400);
+    --color-background-success-surface: var(--green-a50);
+    --color-border-success-surface: var(--green-a50);
+    --color-text-success-surface: var(--green-400);
+    --color-background-success-solid: var(--green-600);
+    --color-background-success-solid-hover: var(--green-600);
+    --color-background-success-solid-active: var(--green-600);
+    --color-border-success-outline: var(--green-600);
+    --color-border-success-outline-hover: var(--green-600);
+    --color-text-discovery: var(--purple-500);
+    --color-text-discovery-soft: var(--purple-200);
+    --color-background-discovery-surface: var(--purple-a50);
+    --color-border-discovery-surface: var(--purple-a50);
+    --color-text-discovery-surface: var(--purple-200);
+    --color-text-discovery-outline: var(--purple-400);
+    --color-text-discovery-outline-hover: var(--purple-400);
+    --color-text-disabled: var(--gray-500);
+    --color-border-subtle: var(--alpha-06);
+    --color-border: var(--alpha-12);
+    --color-border-strong: var(--alpha-20);
+    --shadow: 0 10px 15px -3px rgba(0 0 0 / 20%),
+      0 4px 6px -4px rgba(0 0 0 / 20%);
+    --color-surface: var(--gray-200);
+    --color-surface-secondary: var(--gray-100);
+    --color-surface-tertiary: var(--gray-50);
+    --color-surface-elevated: var(--gray-300);
+    --color-surface-elevated-secondary: var(--gray-400)
+  }
+}
+
+/* Tier 3 tokens: Components */
+
+@layer theme {
+  :root,
+  :where([data-theme]) {
+    /* =============================================
+      Alert
+    ============================================= */
+    --alert-border-radius: var(--radius-xl);
+    --alert-gap: calc(var(--spacing) * 3);
+    --alert-gutter: calc(var(--spacing) * 4);
+    --alert-font-size: var(--font-text-sm-size);
+    --alert-line-height: var(--font-text-sm-line-height);
+    --alert-title-font-weight: var(--font-weight-semibold);
+
+    /* =============================================
+      Avatar
+    ============================================= */
+    --avatar-radius: var(--radius-full);
+    --avatar-size: 28px;
+    --avatar-font-size-scaling: 0.5;
+    --avatar-overflow-font-size-scaling-one: 0.45;
+    --avatar-overflow-font-size-scaling-two: 0.37;
+    --avatar-overflow-font-size-scaling-three: 0.3;
+
+    /* =============================================
+      AvatarGroup
+    ============================================= */
+    --avatar-group-cutout-width: 3px;
+    --avatar-group-cutout-color: var(--color-surface);
+    --avatar-group-spacing: -8px;
+
+    /* =============================================
+      Badge
+    ============================================= */
+    --badge-gutter-sm: calc(var(--control-gutter-2xs) - 1px);
+    --badge-gutter-md: var(--control-gutter-2xs);
+    --badge-gutter-lg: var(--control-gutter-xs);
+    --badge-size-sm: calc(var(--control-size-3xs) - 2px);
+    --badge-size-md: var(--control-size-3xs);
+    --badge-size-lg: var(--control-size-2xs);
+    --badge-radius-sm: var(--radius-xs);
+    --badge-radius-md: var(--radius-xs);
+    --badge-radius-lg: var(--radius-sm);
+    --badge-font-size-sm: var(--font-text-xs-size);
+    --badge-font-size-md: var(--font-text-sm-size);
+    --badge-font-size-lg: var(--font-text-sm-size);
+    --badge-tracking-sm: var(--tracking-wide);
+    --badge-tracking-md: var(--tracking-normal);
+    --badge-tracking-lg: var(--tracking-normal);
+    --badge-font-weight-sm: var(--font-weight-semibold);
+    --badge-font-weight-md: var(--font-weight-semibold);
+    --badge-font-weight-lg: var(--font-weight-semibold);
+    --badge-icon-font-size-sm: var(--font-text-xs-size);
+    --badge-icon-font-size-md: var(--font-text-md-size);
+    --badge-icon-font-size-lg: var(--font-text-md-size);
+    --badge-indicator-size-sm: var(--font-text-xs-size);
+    --badge-indicator-size-md: var(--font-text-xs-size);
+    --badge-indicator-size-lg: var(--font-text-sm-size);
+
+    /* =============================================
+      Button
+    ============================================= */
+    --button-gap-sm: 3px;
+    --button-gap-md: 4px;
+    --button-gap-lg: 6px;
+    --button-font-weight: var(--font-weight-medium);
+
+    /* =============================================
+      Input
+    ============================================= */
+    --input-gap-xs: 4px;
+    --input-gap-sm: 6px;
+    --input-gap-md: 8px;
+    --input-gap-lg: 10px;
+    --input-text-color: var(--color-text);
+    --input-placeholder-text-color: var(--color-text-tertiary);
+    --input-outline-border-color: var(--color-border-primary-outline);
+    --input-outline-border-color-focus: var(--alpha-50);
+    --input-soft-background-color: var(--color-background-primary-soft-alpha);
+    --input-soft-border-color-focus: var(--alpha-20);
+
+    /* =============================================
+      Link
+    ============================================= */
+    --link-font-weight: inherit;
+    --link-gap: calc(var(--spacing) * 0.5);
+    --link-radius: var(--radius-sm);
+    --link-underline-decoration-offset: 0.1em;
+
+    /* =============================================
+      Chat
+    ============================================= */
+    --chat-max-width: 800px;
+    --chat-gutter: calc(var(--spacing) * 5);
+    --chat-background-color: var(--color-surface);
+    --thread-gutter: calc(var(--spacing) * 4); /* 12px (composer gutter) + 4px (input inset) */
+    --composer-gutter: calc(var(--spacing) * 3);
+    --composer-compact-gutter: calc(var(--spacing) * 2);
+    --composer-radius: var(--radius-4xl);
+    --composer-background-color: var(--color-surface-elevated);
+    --smoothing-background-color: var(--color-surface);
+    --user-message-text-color: var(--color-text);
+    --source-list-gutter: var(--thread-gutter);
+
+    /* =============================================
+      CodeBlock
+    ============================================= */
+    --codeblock-background-color: var(--gray-25);
+    --codeblock-syntax-4: var(--pink-500);
+
+    /* =============================================
+      Dialog
+    ============================================= */
+    --dialog-min-width: 250px;
+    --dialog-max-width: 450px;
+    --dialog-container-inner-padding: calc(var(--spacing) * 5);
+    --dialog-backdrop-fade-background: color-mix(in oklab, var(--color-surface-elevated) 60%, transparent);
+
+    /* =============================================
+      Menu
+    ============================================= */
+    --menu-gutter: calc(var(--spacing) * 1.5);
+    --menu-radius: var(--radius-xl);
+    --menu-font-size: var(--font-text-sm-size);
+    /* Important that this line-height is ~an even number for centering with icons */
+    --menu-line-height: var(--font-text-sm-line-height);
+    --menu-item-padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
+    --menu-item-gap: calc(var(--spacing) * 1.5);
+    --menu-separator-gutter: var(--menu-gutter) calc(-1 * var(--menu-gutter));
+    --menu-separator-background-color: var(--color-border);
+    --menu-radio-indicator-size: var(--font-text-lg-size);
+    --menu-radio-indicator-hole-size: var(--font-text-3xs-size);
+    --menu-checkbox-indicator-size: var(--font-text-lg-size);
+
+    /* =============================================
+      Modal
+    ============================================= */
+    --modal-container-inner-padding: calc(var(--spacing) * 5);
+
+    /* =============================================
+      Popover
+    ============================================= */
+    --popover-radius: var(--radius-xl);
+
+    /* =============================================
+      RadioGroup
+    ============================================= */
+    --radio-group-col-gap: calc(var(--spacing) * 2.5);
+    --radio-group-row-gap: calc(var(--spacing) * 5);
+    --radio-group-item-gap: calc(var(--spacing) * 1.5);
+    --radio-group-item-font-size: var(--font-text-sm-size);
+    --radio-group-item-line-height: var(--font-text-sm-line-height);
+    --radio-group-indicator-size: var(--font-text-md-size);
+    --radio-group-indicator-border-color: var(--color-border-primary-outline);
+    --radio-group-indicator-border-color-hover: var(--alpha-25);
+    --radio-group-indicator-background-color: var(--color-background-primary-solid);
+    --radio-group-indicator-hole-size: 0.375rem;
+    --radio-group-indicator-hole-background-color: var(--color-text-primary-solid);
+
+    /* =============================================
+      Segmented Control
+    ============================================= */
+    --segmented-control-gap: 2px;
+    --segmented-control-gutter: 2px;
+    --segmented-control-font-weight: var(--font-weight-semibold);
+    --segmented-control-thumb-shadow: 0 1px 4px -1px rgb(0 0 0 / 20%);
+    --segmented-control-option-highlight-gutter: 1px;
+
+    /* =============================================
+      SelectControl
+    ============================================= */
+    --select-control-font-weight: var(--font-weight-medium);
+
+    /* =============================================
+      Slider
+    ============================================= */
+
+    /* =============================================
+      Switch
+    ============================================= */
+    --switch-track-width: 32px;
+    --switch-track-height: 19px;
+    --switch-thumb-offset: 3px;
+    --switch-thumb-size: calc(var(--switch-track-height) - 2 * var(--switch-thumb-offset));
+    --switch-thumb-shadow: 0 1px 2px rgb(0 0 0 / 20%);
+    --switch-label-gap: calc(var(--spacing) * 2);
+  }
+  :where(:root), :where([data-theme="light"]) {
+    --avatar-image-border-color: var(--alpha-04);
+    --input-outline-border-color-hover: var(--alpha-25);
+    --input-border-color-invalid: var(--red-500);
+    --link-primary-text-color: var(--blue-500);
+    --link-primary-text-color-hover: var(--blue-800);
+    --user-message-background-color: var(--alpha-05);
+    --codeblock-syntax-1: #c0660d;
+    --codeblock-syntax-2: var(--blue-500);
+    --codeblock-syntax-3: var(--green-600);
+    --codeblock-syntax-5: var(--purple-500);
+    --dialog-backdrop-dim-background: rgb(0 0 0 / 30%);
+    --menu-item-background-color: var(--alpha-08);
+    --modal-backdrop-background: rgb(0 0 0 / 30%);
+    --segmented-control-background: var(--gray-100);
+    --segmented-control-thumb-background: var(--gray-0);
+    --segmented-control-option-highlight-background-color: var(--gray-200);
+    --slider-track-color: var(--gray-150);
+    --slider-range-color: var(--gray-450);
+    --switch-track-color: var(--gray-150);
+    --switch-track-color-hover: var(--gray-200);
+    --switch-track-color-checked: var(--gray-900);
+    --switch-track-color-checked-disabled: var(--gray-300);
+    --switch-track-color-disabled: var(--gray-100);
+    --switch-thumb-color: var(--gray-0);
+    --switch-thumb-color-disabled: var(--gray-0);
+  }
+  :where([data-theme="dark"]) {
+    --avatar-image-border-color: var(--alpha-15);
+    --input-outline-border-color-hover: var(--alpha-30);
+    --input-border-color-invalid: var(--red-600);
+    --link-primary-text-color: var(--blue-300);
+    --link-primary-text-color-hover: var(--blue-400);
+    --user-message-background-color: var(--alpha-08);
+    --codeblock-syntax-1: var(--yellow-100);
+    --codeblock-syntax-2: var(--blue-200);
+    --codeblock-syntax-3: var(--green-300);
+    --codeblock-syntax-5: var(--purple-300);
+    --dialog-backdrop-dim-background: rgb(0 0 0 / 50%);
+    --menu-item-background-color: var(--alpha-10);
+    --modal-backdrop-background: rgb(0 0 0 / 50%);
+    --segmented-control-background: var(--gray-0);
+    --segmented-control-thumb-background: var(--gray-300);
+    --segmented-control-option-highlight-background-color: var(--gray-300);
+    --slider-track-color: var(--gray-400);
+    --slider-range-color: var(--gray-600);
+    --switch-track-color: var(--gray-400);
+    --switch-track-color-hover: var(--gray-450);
+    --switch-track-color-checked: var(--blue-400);
+    --switch-track-color-checked-disabled: var(--blue-700);
+    --switch-track-color-disabled: var(--gray-300);
+    --switch-thumb-color: var(--gray-1000);
+    --switch-thumb-color-disabled: var(--gray-800);
+  }
+}
+
+/* Tailwind-only variables for utility classes */
+
+/* stylelint-disable custom-property-pattern -- Tailwind requires this sometimes */
+
+/*
+ * Exposing to Tailwind classes, but not necessary to always generate
+ * These are pointers to variables that already exist, and shouldn't be used by CSS modules.
+ */
+
+@theme {
+  /* =============================================
+    Text sizes
+  ============================================= */
+  --text-*: initial;
+  --text-lg: var(--font-text-lg-size);
+  --text-lg--line-height: var(--font-text-lg-line-height);
+  --text-lg--font-weight: var(--font-text-lg-weight);
+  --text-lg--letter-spacing: var(--font-text-lg-tracking);
+  --text-base: var(--font-text-md-size);
+  --text-base--line-height: var(--font-text-md-line-height);
+  --text-base--font-weight: var(--font-text-md-weight);
+  --text-base--letter-spacing: var(--font-text-md-tracking);
+  --text-sm: var(--font-text-sm-size);
+  --text-sm--line-height: var(--font-text-sm-line-height);
+  --text-sm--font-weight: var(--font-text-sm-weight);
+  --text-sm--letter-spacing: var(--font-text-sm-tracking);
+  --text-xs: var(--font-text-xs-size);
+  --text-xs--line-height: var(--font-text-xs-line-height);
+  --text-xs--font-weight: var(--font-text-xs-weight);
+  --text-xs--letter-spacing: var(--font-text-xs-tracking);
+  --text-2xs: var(--font-text-2xs-size);
+  --text-2xs--line-height: var(--font-text-2xs-line-height);
+  --text-2xs--font-weight: var(--font-text-2xs-weight);
+  --text-2xs--letter-spacing: var(--font-text-2xs-tracking);
+  --text-3xs: var(--font-text-3xs-size);
+  --text-3xs--line-height: var(--font-text-3xs-line-height);
+  --text-3xs--font-weight: var(--font-text-3xs-weight);
+  --text-3xs--letter-spacing: var(--font-text-3xs-tracking);
+  /* Maintaining parity with Tailwind defaults, but use heading classes instead of these! */
+  --text-xl: var(--font-heading-md-size);
+  --text-xl--line-height: var(--font-heading-md-line-height);
+  --text-xl--font-weight: var(--font-text-lg-weight);
+  --text-xl--letter-spacing: var(--font-heading-md-tracking);
+  --text-2xl: var(--font-heading-lg-size);
+  --text-2xl--line-height: var(--font-heading-lg-line-height);
+  --text-2xl--font-weight: var(--font-text-lg-weight);
+  --text-2xl--letter-spacing: var(--font-heading-lg-tracking);
+  --text-3xl: var(--font-heading-xl-size);
+  --text-3xl--line-height: var(--font-heading-xl-line-height);
+  --text-3xl--font-weight: var(--font-text-lg-weight);
+  --text-3xl--letter-spacing: var(--font-heading-xl-tracking);
+  --text-4xl: var(--font-heading-2xl-size);
+  --text-4xl--line-height: var(--font-heading-2xl-line-height);
+  --text-4xl--font-weight: var(--font-text-lg-weight);
+  --text-4xl--letter-spacing: var(--font-heading-2xl-tracking);
+  --text-5xl: var(--font-heading-3xl-size);
+  --text-5xl--line-height: var(--font-heading-3xl-line-height);
+  --text-5xl--font-weight: var(--font-text-lg-weight);
+  --text-5xl--letter-spacing: var(--font-heading-3xl-tracking);
+  --text-6xl: var(--font-heading-4xl-size);
+  --text-6xl--line-height: var(--font-heading-4xl-line-height);
+  --text-6xl--font-weight: var(--font-text-lg-weight);
+  --text-6xl--letter-spacing: var(--font-heading-4xl-tracking);
+  /* Unsupported by Typography scale beyond 5xl */
+  --text-7xl: var(--font-heading-5xl-size);
+  --text-7xl--line-height: var(--font-heading-5xl-line-height);
+  --text-7xl--font-weight: var(--font-text-lg-weight);
+  --text-7xl--letter-spacing: var(--font-heading-5xl-tracking);
+  --text-8xl: 6rem;
+  --text-8xl--line-height: 1;
+  --text-8xl--letter-spacing: var(--font-heading-4xl-tracking);
+  --text-9xl: 8rem;
+  --text-9xl--line-height: 1;
+  --text-9xl--letter-spacing: var(--font-heading-4xl-tracking);
+
+  /* =============================================
+    Font tracking
+  ============================================= */
+  --tracking-*: initial;
+  --tracking-wide: var(--font-tracking-wide);
+  --tracking-normal: var(--font-tracking-normal);
+  --tracking-tight: var(--font-tracking-tight);
+
+  /* =============================================
+    Shadows
+  ============================================= */
+  --inset-shadow-*: initial;
+  --drop-shadow-*: initial;
+  --shadow-*: initial;
+  --shadow-sm: var(--shadow-100);
+  --shadow-md: var(--shadow-200);
+  --shadow-lg: var(--shadow-300);
+  --shadow-xl: var(--shadow-400);
+  --shadow-hairline: var(--shadow-hairline);
+  --inset-shadow-hairline: inset var(--shadow-hairline);
+
+  /* =============================================
+    Color palettes
+  ============================================= */
+  --color-*: initial;
+  /* Grays */
+  --color-gray-0: var(--gray-0);
+  --color-gray-25: var(--gray-25);
+  --color-gray-50: var(--gray-50);
+  --color-gray-75: var(--gray-75);
+  --color-gray-100: var(--gray-100);
+  --color-gray-150: var(--gray-150);
+  --color-gray-200: var(--gray-200);
+  --color-gray-250: var(--gray-250);
+  --color-gray-300: var(--gray-300);
+  --color-gray-350: var(--gray-350);
+  --color-gray-400: var(--gray-400);
+  --color-gray-450: var(--gray-450);
+  --color-gray-500: var(--gray-500);
+  --color-gray-550: var(--gray-550);
+  --color-gray-600: var(--gray-600);
+  --color-gray-650: var(--gray-650);
+  --color-gray-700: var(--gray-700);
+  --color-gray-750: var(--gray-750);
+  --color-gray-800: var(--gray-800);
+  --color-gray-850: var(--gray-850);
+  --color-gray-900: var(--gray-900);
+  --color-gray-950: var(--gray-950);
+  --color-gray-975: var(--gray-975);
+  --color-gray-1000: var(--gray-1000);
+  /* Greens */
+  --color-green-25: var(--green-25);
+  --color-green-50: var(--green-50);
+  --color-green-75: var(--green-75);
+  --color-green-100: var(--green-100);
+  --color-green-200: var(--green-200);
+  --color-green-300: var(--green-300);
+  --color-green-400: var(--green-400);
+  --color-green-500: var(--green-500);
+  --color-green-600: var(--green-600);
+  --color-green-700: var(--green-700);
+  --color-green-800: var(--green-800);
+  --color-green-900: var(--green-900);
+  --color-green-1000: var(--green-1000);
+  /* Reds */
+  --color-red-25: var(--red-25);
+  --color-red-50: var(--red-50);
+  --color-red-75: var(--red-75);
+  --color-red-100: var(--red-100);
+  --color-red-200: var(--red-200);
+  --color-red-300: var(--red-300);
+  --color-red-400: var(--red-400);
+  --color-red-500: var(--red-500);
+  --color-red-600: var(--red-600);
+  --color-red-700: var(--red-700);
+  --color-red-800: var(--red-800);
+  --color-red-900: var(--red-900);
+  --color-red-1000: var(--red-1000);
+  /* Pinks */
+  --color-pink-25: var(--pink-25);
+  --color-pink-50: var(--pink-50);
+  --color-pink-75: var(--pink-75);
+  --color-pink-100: var(--pink-100);
+  --color-pink-200: var(--pink-200);
+  --color-pink-300: var(--pink-300);
+  --color-pink-400: var(--pink-400);
+  --color-pink-500: var(--pink-500);
+  --color-pink-600: var(--pink-600);
+  --color-pink-700: var(--pink-700);
+  --color-pink-800: var(--pink-800);
+  --color-pink-900: var(--pink-900);
+  --color-pink-1000: var(--pink-1000);
+  /* Oranges */
+  --color-orange-25: var(--orange-25);
+  --color-orange-50: var(--orange-50);
+  --color-orange-75: var(--orange-75);
+  --color-orange-100: var(--orange-100);
+  --color-orange-200: var(--orange-200);
+  --color-orange-300: var(--orange-300);
+  --color-orange-400: var(--orange-400);
+  --color-orange-500: var(--orange-500);
+  --color-orange-600: var(--orange-600);
+  --color-orange-700: var(--orange-700);
+  --color-orange-800: var(--orange-800);
+  --color-orange-900: var(--orange-900);
+  --color-orange-1000: var(--orange-1000);
+  /* Yellows */
+  --color-yellow-25: var(--yellow-25);
+  --color-yellow-50: var(--yellow-50);
+  --color-yellow-75: var(--yellow-75);
+  --color-yellow-100: var(--yellow-100);
+  --color-yellow-200: var(--yellow-200);
+  --color-yellow-300: var(--yellow-300);
+  --color-yellow-400: var(--yellow-400);
+  --color-yellow-500: var(--yellow-500);
+  --color-yellow-600: var(--yellow-600);
+  --color-yellow-700: var(--yellow-700);
+  --color-yellow-800: var(--yellow-800);
+  --color-yellow-900: var(--yellow-900);
+  --color-yellow-1000: var(--yellow-1000);
+  /* Purples */
+  --color-purple-25: var(--purple-25);
+  --color-purple-50: var(--purple-50);
+  --color-purple-75: var(--purple-75);
+  --color-purple-100: var(--purple-100);
+  --color-purple-200: var(--purple-200);
+  --color-purple-300: var(--purple-300);
+  --color-purple-400: var(--purple-400);
+  --color-purple-500: var(--purple-500);
+  --color-purple-600: var(--purple-600);
+  --color-purple-700: var(--purple-700);
+  --color-purple-800: var(--purple-800);
+  --color-purple-900: var(--purple-900);
+  --color-purple-1000: var(--purple-1000);
+  /* Blues */
+  --color-blue-25: var(--blue-25);
+  --color-blue-50: var(--blue-50);
+  --color-blue-75: var(--blue-75);
+  --color-blue-100: var(--blue-100);
+  --color-blue-200: var(--blue-200);
+  --color-blue-300: var(--blue-300);
+  --color-blue-400: var(--blue-400);
+  --color-blue-500: var(--blue-500);
+  --color-blue-600: var(--blue-600);
+  --color-blue-700: var(--blue-700);
+  --color-blue-800: var(--blue-800);
+  --color-blue-900: var(--blue-900);
+  --color-blue-1000: var(--blue-1000);
+  /* Alphas (e.g., bg-alpha/15, color-alpha/75) */
+  --color-alpha: var(--alpha-base);
+  /* Consistent contrast */
+  --color-white: var(--white);
+  --color-black: var(--black);
+
+  /* =============================================
+    Motion
+  ============================================= */
+  --ease-*: initial;
+  --duration-basic: var(--transition-duration-basic);
+  --ease-basic: var(--transition-ease-basic);
+  --ease-cubic-enter: var(--cubic-enter);
+  --ease-cubic-exit: var(--cubic-exit);
+  --ease-cubic-exit-snappy: var(--cubic-exit-snappy);
+  --ease-cubic-move: var(--cubic-move);
+}
+
+/* =============================================
+  Heading utilities
+============================================= */
+
+@utility heading-5xl {
+  font-size: var(--font-heading-5xl-size);
+  font-weight: var(--font-heading-5xl-weight);
+  letter-spacing: var(--font-heading-5xl-tracking);
+  line-height: var(--font-heading-5xl-line-height);
+}
+
+@utility heading-4xl {
+  font-size: var(--font-heading-4xl-size);
+  font-weight: var(--font-heading-4xl-weight);
+  letter-spacing: var(--font-heading-4xl-tracking);
+  line-height: var(--font-heading-4xl-line-height);
+}
+
+@utility heading-3xl {
+  font-size: var(--font-heading-3xl-size);
+  font-weight: var(--font-heading-3xl-weight);
+  letter-spacing: var(--font-heading-3xl-tracking);
+  line-height: var(--font-heading-3xl-line-height);
+}
+
+@utility heading-2xl {
+  font-size: var(--font-heading-2xl-size);
+  font-weight: var(--font-heading-2xl-weight);
+  letter-spacing: var(--font-heading-2xl-tracking);
+  line-height: var(--font-heading-2xl-line-height);
+}
+
+@utility heading-xl {
+  font-size: var(--font-heading-xl-size);
+  font-weight: var(--font-heading-xl-weight);
+  letter-spacing: var(--font-heading-xl-tracking);
+  line-height: var(--font-heading-xl-line-height);
+}
+
+@utility heading-lg {
+  font-size: var(--font-heading-lg-size);
+  font-weight: var(--font-heading-lg-weight);
+  letter-spacing: var(--font-heading-lg-tracking);
+  line-height: var(--font-heading-lg-line-height);
+}
+
+@utility heading-md {
+  font-size: var(--font-heading-md-size);
+  font-weight: var(--font-heading-md-weight);
+  letter-spacing: var(--font-heading-md-tracking);
+  line-height: var(--font-heading-md-line-height);
+}
+
+@utility heading-sm {
+  font-size: var(--font-heading-sm-size);
+  font-weight: var(--font-heading-sm-weight);
+  letter-spacing: var(--font-heading-sm-tracking);
+  line-height: var(--font-heading-sm-line-height);
+}
+
+@utility heading-xs {
+  font-size: var(--font-heading-xs-size);
+  font-weight: var(--font-heading-xs-weight);
+  letter-spacing: var(--font-heading-xs-tracking);
+  line-height: var(--font-heading-xs-line-height);
+}
+
+/* =============================================
+  Text utilities
+============================================= */
+
+@utility text-default {
+  color: var(--color-text);
+}
+
+@utility text-secondary {
+  color: var(--color-text-secondary);
+}
+
+@utility text-tertiary {
+  color: var(--color-text-tertiary);
+}
+
+@utility text-inverse {
+  color: var(--color-text-inverse);
+}
+
+@utility fill-default {
+  fill: var(--color-text);
+}
+
+@utility fill-secondary {
+  fill: var(--color-text-secondary);
+}
+
+@utility fill-tertiary {
+  fill: var(--color-text-tertiary);
+}
+
+/* =============================================
+  Surface utilities
+============================================= */
+
+@utility bg-surface {
+  background-color: var(--color-surface);
+}
+
+@utility bg-surface-secondary {
+  background-color: var(--color-surface-secondary);
+}
+
+@utility bg-surface-tertiary {
+  background-color: var(--color-surface-tertiary);
+}
+
+@utility bg-surface-elevated {
+  background-color: var(--color-surface-elevated);
+}
+
+@utility bg-surface-elevated-secondary {
+  background-color: var(--color-surface-elevated-secondary);
+}
+
+/* =============================================
+  Border utilities
+============================================= */
+
+@utility border-default {
+  border-color: var(--color-border);
+}
+
+@utility border-subtle {
+  border-color: var(--color-border-subtle);
+}
+
+@utility border-strong {
+  border-color: var(--color-border-strong);
+}
+
+/* =============================================
+  Info semantic utilities
+============================================= */
+
+@utility text-info {
+  color: var(--color-text-info);
+}
+
+/* Soft */
+
+@utility bg-info-soft {
+  background-color: var(--color-background-info-soft);
+}
+
+@utility bg-info-soft-hover {
+  background-color: var(--color-background-info-soft-hover);
+}
+
+@utility bg-info-soft-active {
+  background-color: var(--color-background-info-soft-active);
+}
+
+@utility bg-info-soft-alpha {
+  background-color: var(--color-background-info-soft-alpha);
+}
+
+@utility bg-info-soft-alpha-hover {
+  background-color: var(--color-background-info-soft-alpha-hover);
+}
+
+@utility bg-info-soft-alpha-active {
+  background-color: var(--color-background-info-soft-alpha-active);
+}
+
+@utility text-info-soft {
+  color: var(--color-text-info-soft);
+}
+
+/* Solid */
+
+@utility bg-info-solid {
+  background-color: var(--color-background-info-solid);
+}
+
+@utility bg-info-solid-hover {
+  background-color: var(--color-background-info-solid-hover);
+}
+
+@utility bg-info-solid-active {
+  background-color: var(--color-background-info-solid-active);
+}
+
+@utility text-info-solid {
+  color: var(--color-text-info-solid);
+}
+
+/* Outline */
+
+@utility bg-info-outline-hover {
+  background-color: var(--color-background-info-outline-hover);
+}
+
+@utility bg-info-outline-active {
+  background-color: var(--color-background-info-outline-active);
+}
+
+@utility border-info-outline {
+  border-color: var(--color-border-info-outline);
+}
+
+@utility border-info-outline-hover {
+  border-color: var(--color-border-info-outline-hover);
+}
+
+@utility text-info-outline {
+  color: var(--color-text-info-outline);
+}
+
+@utility text-info-outline-hover {
+  color: var(--color-text-info-outline-hover);
+}
+
+/* Ghost */
+
+@utility bg-info-ghost-hover {
+  background-color: var(--color-background-info-ghost-hover);
+}
+
+@utility bg-info-ghost-active {
+  background-color: var(--color-background-info-ghost-active);
+}
+
+@utility text-info-ghost {
+  color: var(--color-text-info-ghost);
+}
+
+@utility text-info-ghost-hover {
+  color: var(--color-text-info-ghost-hover);
+}
+
+/* Ring */
+
+@utility ring-info {
+  outline-color: var(--color-ring-info);
+}
+
+/* Surface */
+
+@utility bg-info-surface {
+  background-color: var(--color-background-info-surface);
+}
+
+@utility border-info-surface {
+  border-color: var(--color-border-info-surface);
+}
+
+@utility text-info-surface {
+  color: var(--color-text-info-surface);
+}
+
+/* =============================================
+  Primary semantic utilities
+============================================= */
+
+@utility text-primary {
+  color: var(--color-text-primary);
+}
+
+/* Soft */
+
+@utility bg-primary-soft {
+  background-color: var(--color-background-primary-soft);
+}
+
+@utility bg-primary-soft-hover {
+  background-color: var(--color-background-primary-soft-hover);
+}
+
+@utility bg-primary-soft-active {
+  background-color: var(--color-background-primary-soft-active);
+}
+
+@utility bg-primary-soft-alpha {
+  background-color: var(--color-background-primary-soft-alpha);
+}
+
+@utility bg-primary-soft-alpha-hover {
+  background-color: var(--color-background-primary-soft-alpha-hover);
+}
+
+@utility bg-primary-soft-alpha-active {
+  background-color: var(--color-background-primary-soft-alpha-active);
+}
+
+@utility text-primary-soft {
+  color: var(--color-text-primary-soft);
+}
+
+/* Surface */
+
+@utility bg-primary-surface {
+  background-color: var(--color-background-primary-surface);
+}
+
+@utility border-primary-surface {
+  border-color: var(--color-border-primary-surface);
+}
+
+@utility text-primary-surface {
+  color: var(--color-text-primary-surface);
+}
+
+/* Solid */
+
+@utility bg-primary-solid {
+  background-color: var(--color-background-primary-solid);
+}
+
+@utility bg-primary-solid-hover {
+  background-color: var(--color-background-primary-solid-hover);
+}
+
+@utility bg-primary-solid-active {
+  background-color: var(--color-background-primary-solid-active);
+}
+
+@utility text-primary-solid {
+  color: var(--color-text-primary-solid);
+}
+
+/* Outline */
+
+@utility bg-primary-outline-hover {
+  background-color: var(--color-background-primary-outline-hover);
+}
+
+@utility bg-primary-outline-active {
+  background-color: var(--color-background-primary-outline-active);
+}
+
+@utility border-primary-outline {
+  border-color: var(--color-border-primary-outline);
+}
+
+@utility border-primary-outline-hover {
+  border-color: var(--color-border-primary-outline-hover);
+}
+
+@utility text-primary-outline {
+  color: var(--color-text-primary-outline);
+}
+
+@utility text-primary-outline-hover {
+  color: var(--color-text-primary-outline-hover);
+}
+
+/* Ghost */
+
+@utility bg-primary-ghost-hover {
+  background-color: var(--color-background-primary-ghost-hover);
+}
+
+@utility bg-primary-ghost-active {
+  background-color: var(--color-background-primary-ghost-active);
+}
+
+@utility text-primary-ghost {
+  color: var(--color-text-primary-ghost);
+}
+
+@utility text-primary-ghost-hover {
+  color: var(--color-text-primary-ghost-hover);
+}
+
+/* Ring */
+
+@utility ring-primary {
+  outline-color: var(--color-ring-primary);
+}
+
+/* =============================================
+  Secondary semantic utilities
+============================================= */
+
+/* Soft */
+
+@utility text-secondary-soft {
+  color: var(--color-text-secondary-soft);
+}
+
+@utility bg-secondary-soft {
+  background-color: var(--color-background-secondary-soft);
+}
+
+@utility bg-secondary-soft-hover {
+  background-color: var(--color-background-secondary-soft-hover);
+}
+
+@utility bg-secondary-soft-active {
+  background-color: var(--color-background-secondary-soft-active);
+}
+
+@utility bg-secondary-soft-alpha {
+  background-color: var(--color-background-secondary-soft-alpha);
+}
+
+@utility bg-secondary-soft-alpha-hover {
+  background-color: var(--color-background-secondary-soft-alpha-hover);
+}
+
+@utility bg-secondary-soft-alpha-active {
+  background-color: var(--color-background-secondary-soft-alpha-active);
+}
+
+@utility bg-secondary-soft-alt {
+  background-color: var(--color-background-secondary-soft-alt);
+}
+
+@utility border-secondary-soft-alt {
+  border-color: var(--color-border-secondary-soft-alt);
+}
+
+@utility text-secondary-soft-alt {
+  color: var(--color-text-secondary-soft-alt);
+}
+
+/* Solid */
+
+@utility bg-secondary-solid {
+  background-color: var(--color-background-secondary-solid);
+}
+
+@utility bg-secondary-solid-hover {
+  background-color: var(--color-background-secondary-solid-hover);
+}
+
+@utility bg-secondary-solid-active {
+  background-color: var(--color-background-secondary-solid-active);
+}
+
+@utility text-secondary-solid {
+  color: var(--color-text-secondary-solid);
+}
+
+/* Outline */
+
+@utility bg-secondary-outline-hover {
+  background-color: var(--color-background-secondary-outline-hover);
+}
+
+@utility bg-secondary-outline-active {
+  background-color: var(--color-background-secondary-outline-active);
+}
+
+@utility border-secondary-outline {
+  border-color: var(--color-border-secondary-outline);
+}
+
+@utility border-secondary-outline-hover {
+  border-color: var(--color-border-secondary-outline-hover);
+}
+
+@utility text-secondary-outline {
+  color: var(--color-text-secondary-outline);
+}
+
+@utility text-secondary-outline-hover {
+  color: var(--color-text-secondary-outline-hover);
+}
+
+/* Ghost */
+
+@utility bg-secondary-ghost-hover {
+  background-color: var(--color-background-secondary-ghost-hover);
+}
+
+@utility bg-secondary-ghost-active {
+  background-color: var(--color-background-secondary-ghost-active);
+}
+
+@utility text-secondary-ghost {
+  color: var(--color-text-secondary-ghost);
+}
+
+@utility text-secondary-ghost-hover {
+  color: var(--color-text-secondary-ghost-hover);
+}
+
+/* Ring */
+
+@utility ring-secondary {
+  outline-color: var(--color-ring-secondary);
+}
+
+/* =============================================
+  Danger semantic utilities
+============================================= */
+
+@utility text-danger {
+  color: var(--color-text-danger);
+}
+
+/* Soft */
+
+@utility bg-danger-soft {
+  background-color: var(--color-background-danger-soft);
+}
+
+@utility bg-danger-soft-hover {
+  background-color: var(--color-background-danger-soft-hover);
+}
+
+@utility bg-danger-soft-active {
+  background-color: var(--color-background-danger-soft-active);
+}
+
+@utility bg-danger-soft-alpha {
+  background-color: var(--color-background-danger-soft-alpha);
+}
+
+@utility bg-danger-soft-alpha-hover {
+  background-color: var(--color-background-danger-soft-alpha-hover);
+}
+
+@utility bg-danger-soft-alpha-active {
+  background-color: var(--color-background-danger-soft-alpha-active);
+}
+
+@utility text-danger-soft {
+  color: var(--color-text-danger-soft);
+}
+
+/* Surface */
+
+@utility bg-danger-surface {
+  background-color: var(--color-background-danger-surface);
+}
+
+@utility border-danger-surface {
+  border-color: var(--color-border-danger-surface);
+}
+
+@utility text-danger-surface {
+  color: var(--color-text-danger-surface);
+}
+
+/* Solid */
+
+@utility bg-danger-solid {
+  background-color: var(--color-background-danger-solid);
+}
+
+@utility bg-danger-solid-hover {
+  background-color: var(--color-background-danger-solid-hover);
+}
+
+@utility bg-danger-solid-active {
+  background-color: var(--color-background-danger-solid-active);
+}
+
+@utility text-danger-solid {
+  color: var(--color-text-danger-solid);
+}
+
+/* Outline */
+
+@utility bg-danger-outline-hover {
+  background-color: var(--color-background-danger-outline-hover);
+}
+
+@utility bg-danger-outline-active {
+  background-color: var(--color-background-danger-outline-active);
+}
+
+@utility border-danger-outline {
+  border-color: var(--color-border-danger-outline);
+}
+
+@utility border-danger-outline-hover {
+  border-color: var(--color-border-danger-outline-hover);
+}
+
+@utility text-danger-outline {
+  color: var(--color-text-danger-outline);
+}
+
+@utility text-danger-outline-hover {
+  color: var(--color-text-danger-outline-hover);
+}
+
+/* Ghost */
+
+@utility bg-danger-ghost-hover {
+  background-color: var(--color-background-danger-ghost-hover);
+}
+
+@utility bg-danger-ghost-active {
+  background-color: var(--color-background-danger-ghost-active);
+}
+
+@utility text-danger-ghost {
+  color: var(--color-text-danger-ghost);
+}
+
+@utility text-danger-ghost-hover {
+  color: var(--color-text-danger-ghost-hover);
+}
+
+/* Ring */
+
+@utility ring-danger {
+  outline-color: var(--color-ring-danger);
+}
+
+/* =============================================
+  Warning semantic utilities
+============================================= */
+
+@utility text-warning {
+  color: var(--color-text-warning);
+}
+
+/* Soft */
+
+@utility bg-warning-soft {
+  background-color: var(--color-background-warning-soft);
+}
+
+@utility bg-warning-soft-hover {
+  background-color: var(--color-background-warning-soft-hover);
+}
+
+@utility bg-warning-soft-active {
+  background-color: var(--color-background-warning-soft-active);
+}
+
+@utility bg-warning-soft-alpha {
+  background-color: var(--color-background-warning-soft-alpha);
+}
+
+@utility bg-warning-soft-alpha-hover {
+  background-color: var(--color-background-warning-soft-alpha-hover);
+}
+
+@utility bg-warning-soft-alpha-active {
+  background-color: var(--color-background-warning-soft-alpha-active);
+}
+
+@utility text-warning-soft {
+  color: var(--color-text-warning-soft);
+}
+
+/* Surface */
+
+@utility bg-warning-surface {
+  background-color: var(--color-background-warning-surface);
+}
+
+@utility border-warning-surface {
+  border-color: var(--color-border-warning-surface);
+}
+
+@utility text-warning-surface {
+  color: var(--color-text-warning-surface);
+}
+
+/* Solid */
+
+@utility bg-warning-solid {
+  background-color: var(--color-background-warning-solid);
+}
+
+@utility bg-warning-solid-hover {
+  background-color: var(--color-background-warning-solid-hover);
+}
+
+@utility bg-warning-solid-active {
+  background-color: var(--color-background-warning-solid-active);
+}
+
+@utility text-warning-solid {
+  color: var(--color-text-warning-solid);
+}
+
+/* Outline */
+
+@utility bg-warning-outline-hover {
+  background-color: var(--color-background-warning-outline-hover);
+}
+
+@utility bg-warning-outline-active {
+  background-color: var(--color-background-warning-outline-active);
+}
+
+@utility border-warning-outline {
+  border-color: var(--color-border-warning-outline);
+}
+
+@utility border-warning-outline-hover {
+  border-color: var(--color-border-warning-outline-hover);
+}
+
+@utility text-warning-outline {
+  color: var(--color-text-warning-outline);
+}
+
+@utility text-warning-outline-hover {
+  color: var(--color-text-warning-outline-hover);
+}
+
+/* Ghost */
+
+@utility bg-warning-ghost-hover {
+  background-color: var(--color-background-warning-ghost-hover);
+}
+
+@utility bg-warning-ghost-active {
+  background-color: var(--color-background-warning-ghost-active);
+}
+
+@utility text-warning-ghost {
+  color: var(--color-text-warning-ghost);
+}
+
+@utility text-warning-ghost-hover {
+  color: var(--color-text-warning-ghost-hover);
+}
+
+/* Ring */
+
+@utility ring-warning {
+  outline-color: var(--color-ring-warning);
+}
+
+/* =============================================
+  Caution semantic utilities
+============================================= */
+
+@utility text-caution {
+  color: var(--color-text-caution);
+}
+
+/* Soft */
+
+@utility bg-caution-soft {
+  background-color: var(--color-background-caution-soft);
+}
+
+@utility bg-caution-soft-hover {
+  background-color: var(--color-background-caution-soft-hover);
+}
+
+@utility bg-caution-soft-active {
+  background-color: var(--color-background-caution-soft-active);
+}
+
+@utility bg-caution-soft-alpha {
+  background-color: var(--color-background-caution-soft-alpha);
+}
+
+@utility bg-caution-soft-alpha-hover {
+  background-color: var(--color-background-caution-soft-alpha-hover);
+}
+
+@utility bg-caution-soft-alpha-active {
+  background-color: var(--color-background-caution-soft-alpha-active);
+}
+
+@utility text-caution-soft {
+  color: var(--color-text-caution-soft);
+}
+
+/* Surface */
+
+@utility bg-caution-surface {
+  background-color: var(--color-background-caution-surface);
+}
+
+@utility border-caution-surface {
+  border-color: var(--color-border-caution-surface);
+}
+
+@utility text-caution-surface {
+  color: var(--color-text-caution-surface);
+}
+
+/* Solid */
+
+@utility bg-caution-solid {
+  background-color: var(--color-background-caution-solid);
+}
+
+@utility bg-caution-solid-hover {
+  background-color: var(--color-background-caution-solid-hover);
+}
+
+@utility bg-caution-solid-active {
+  background-color: var(--color-background-caution-solid-active);
+}
+
+@utility text-caution-solid {
+  color: var(--color-text-caution-solid);
+}
+
+/* Outline */
+
+@utility bg-caution-outline-hover {
+  background-color: var(--color-background-caution-outline-hover);
+}
+
+@utility bg-caution-outline-active {
+  background-color: var(--color-background-caution-outline-active);
+}
+
+@utility border-caution-outline {
+  border-color: var(--color-border-caution-outline);
+}
+
+@utility border-caution-outline-hover {
+  border-color: var(--color-border-caution-outline-hover);
+}
+
+@utility text-caution-outline {
+  color: var(--color-text-caution-outline);
+}
+
+@utility text-caution-outline-hover {
+  color: var(--color-text-caution-outline-hover);
+}
+
+/* Ghost */
+
+@utility bg-caution-ghost-hover {
+  background-color: var(--color-background-caution-ghost-hover);
+}
+
+@utility bg-caution-ghost-active {
+  background-color: var(--color-background-caution-ghost-active);
+}
+
+@utility text-caution-ghost {
+  color: var(--color-text-caution-ghost);
+}
+
+@utility text-caution-ghost-hover {
+  color: var(--color-text-caution-ghost-hover);
+}
+
+/* Ring */
+
+@utility ring-caution {
+  outline-color: var(--color-ring-caution);
+}
+
+/* =============================================
+  Success semantic utilities
+============================================= */
+
+@utility text-success {
+  color: var(--color-text-success);
+}
+
+/* Soft */
+
+@utility bg-success-soft {
+  background-color: var(--color-background-success-soft);
+}
+
+@utility bg-success-soft-hover {
+  background-color: var(--color-background-success-soft-hover);
+}
+
+@utility bg-success-soft-active {
+  background-color: var(--color-background-success-soft-active);
+}
+
+@utility bg-success-soft-alpha {
+  background-color: var(--color-background-success-soft-alpha);
+}
+
+@utility bg-success-soft-alpha-hover {
+  background-color: var(--color-background-success-soft-alpha-hover);
+}
+
+@utility bg-success-soft-alpha-active {
+  background-color: var(--color-background-success-soft-alpha-active);
+}
+
+@utility text-success-soft {
+  color: var(--color-text-success-soft);
+}
+
+/* Surface */
+
+@utility bg-success-surface {
+  background-color: var(--color-background-success-surface);
+}
+
+@utility border-success-surface {
+  border-color: var(--color-border-success-surface);
+}
+
+@utility text-success-surface {
+  color: var(--color-text-success-surface);
+}
+
+/* Solid */
+
+@utility bg-success-solid {
+  background-color: var(--color-background-success-solid);
+}
+
+@utility bg-success-solid-hover {
+  background-color: var(--color-background-success-solid-hover);
+}
+
+@utility bg-success-solid-active {
+  background-color: var(--color-background-success-solid-active);
+}
+
+@utility text-success-solid {
+  color: var(--color-text-success-solid);
+}
+
+/* Outline */
+
+@utility bg-success-outline-hover {
+  background-color: var(--color-background-success-outline-hover);
+}
+
+@utility bg-success-outline-active {
+  background-color: var(--color-background-success-outline-active);
+}
+
+@utility border-success-outline {
+  border-color: var(--color-border-success-outline);
+}
+
+@utility border-success-outline-hover {
+  border-color: var(--color-border-success-outline-hover);
+}
+
+@utility text-success-outline {
+  color: var(--color-text-success-outline);
+}
+
+@utility text-success-outline-hover {
+  color: var(--color-text-success-outline-hover);
+}
+
+/* Ghost */
+
+@utility bg-success-ghost-hover {
+  background-color: var(--color-background-success-ghost-hover);
+}
+
+@utility bg-success-ghost-active {
+  background-color: var(--color-background-success-ghost-active);
+}
+
+@utility text-success-ghost {
+  color: var(--color-text-success-ghost);
+}
+
+@utility text-success-ghost-hover {
+  color: var(--color-text-success-ghost-hover);
+}
+
+/* Ring */
+
+@utility ring-success {
+  outline-color: var(--color-ring-success);
+}
+
+/* =============================================
+  Discovery semantic utilities
+============================================= */
+
+@utility text-discovery {
+  color: var(--color-text-discovery);
+}
+
+/* Soft */
+
+@utility bg-discovery-soft {
+  background-color: var(--color-background-discovery-soft);
+}
+
+@utility bg-discovery-soft-hover {
+  background-color: var(--color-background-discovery-soft-hover);
+}
+
+@utility bg-discovery-soft-active {
+  background-color: var(--color-background-discovery-soft-active);
+}
+
+@utility bg-discovery-soft-alpha {
+  background-color: var(--color-background-discovery-soft-alpha);
+}
+
+@utility bg-discovery-soft-alpha-hover {
+  background-color: var(--color-background-discovery-soft-alpha-hover);
+}
+
+@utility bg-discovery-soft-alpha-active {
+  background-color: var(--color-background-discovery-soft-alpha-active);
+}
+
+@utility text-discovery-soft {
+  color: var(--color-text-discovery-soft);
+}
+
+/* Surface */
+
+@utility bg-discovery-surface {
+  background-color: var(--color-background-discovery-surface);
+}
+
+@utility border-discovery-surface {
+  border-color: var(--color-border-discovery-surface);
+}
+
+@utility text-discovery-surface {
+  color: var(--color-text-discovery-surface);
+}
+
+/* Solid */
+
+@utility bg-discovery-solid {
+  background-color: var(--color-background-discovery-solid);
+}
+
+@utility bg-discovery-solid-hover {
+  background-color: var(--color-background-discovery-solid-hover);
+}
+
+@utility bg-discovery-solid-active {
+  background-color: var(--color-background-discovery-solid-active);
+}
+
+@utility text-discovery-solid {
+  color: var(--color-text-discovery-solid);
+}
+
+/* Outline */
+
+@utility bg-discovery-outline-hover {
+  background-color: var(--color-background-discovery-outline-hover);
+}
+
+@utility bg-discovery-outline-active {
+  background-color: var(--color-background-discovery-outline-active);
+}
+
+@utility border-discovery-outline {
+  border-color: var(--color-border-discovery-outline);
+}
+
+@utility border-discovery-outline-hover {
+  border-color: var(--color-border-discovery-outline-hover);
+}
+
+@utility text-discovery-outline {
+  color: var(--color-text-discovery-outline);
+}
+
+@utility text-discovery-outline-hover {
+  color: var(--color-text-discovery-outline-hover);
+}
+
+/* Ghost */
+
+@utility bg-discovery-ghost-hover {
+  background-color: var(--color-background-discovery-ghost-hover);
+}
+
+@utility bg-discovery-ghost-active {
+  background-color: var(--color-background-discovery-ghost-active);
+}
+
+@utility text-discovery-ghost {
+  color: var(--color-text-discovery-ghost);
+}
+
+@utility text-discovery-ghost-hover {
+  color: var(--color-text-discovery-ghost-hover);
+}
+
+/* Ring */
+
+@utility ring-discovery {
+  outline-color: var(--color-ring-discovery);
+}
+
+/* =============================================
+  Disabled semantic utilities
+============================================= */
+
+@utility bg-disabled {
+  background-color: var(--color-background-disabled);
+}
+
+@utility border-disabled {
+  border-color: var(--color-border-disabled);
+}
+
+@utility text-disabled {
+  color: var(--color-text-disabled);
+}
+
+/* =============================================
+  Icon size utilities
+============================================= */
+
+@utility icon-xs {
+  width: var(--control-icon-size-xs);
+  height: var(--control-icon-size-xs);
+}
+
+@utility icon-sm {
+  width: var(--control-icon-size-sm);
+  height: var(--control-icon-size-sm);
+}
+
+@utility icon-md {
+  width: var(--control-icon-size-md);
+  height: var(--control-icon-size-md);
+}
+
+@utility icon-lg {
+  width: var(--control-icon-size-lg);
+  height: var(--control-icon-size-lg);
+}
+
+@utility icon-xl {
+  width: var(--control-icon-size-xl);
+  height: var(--control-icon-size-xl);
+}
+
+@utility icon-2xl {
+  width: var(--control-icon-size-2xl);
+  height: var(--control-icon-size-2xl);
+}
+
+/* Opinionated globals */
+
+/* =============================================
+  Opinionated globals
+============================================= */
+
+@layer base {
+  html,
+  :host {
+    /* Apply default color */
+    color: var(--color-text);
+    /* Smooth font rendering by default */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    /* Apply default letter-spacing */
+    letter-spacing: var(--tracking-normal);
+  }
+
+  [data-theme="light"] {
+    color-scheme: light;
+  }
+
+  [data-theme="dark"] {
+    color-scheme: dark;
+  }
+
+  * {
+    /* Aesthetic scrollbar defaults */
+    scrollbar-color: var(--scrollbar-color) transparent;
+    scrollbar-width: thin;
+  }
+
+  /* All exiting <TransitionGroup> components should be non-interactive */
+  [data-exiting] {
+    pointer-events: none;
+  }
+
+  /* Default placeholder text color */
+  ::-moz-placeholder {
+    color: var(--color-text-tertiary);
+  }
+  ::placeholder {
+    color: var(--color-text-tertiary);
+  }
+
+  /* Use semibold weight as the defacto bold */
+  b,
+  strong {
+    font-weight: var(--font-weight-semibold);
+  }
+}
+
+/* Katex bundled global CSS */
+
+@layer base{
+/* stylelint-disable font-family-no-missing-generic-family-keyword */
+/* stylelint-disable number-max-precision */
+@font-face {
+  font-family: "KaTeX_AMS";
+  font-style: normal;
+  font-weight: 400;
+  src: url("https://cdn.openai.com/common/fonts/katex/KaTeX_AMS-Regular.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "KaTeX_Caligraphic";
+  font-style: normal;
+  font-weight: 700;
+  src: url("https://cdn.openai.com/common/fonts/katex/KaTeX_Caligraphic-Bold.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "KaTeX_Caligraphic";
+  font-style: normal;
+  font-weight: 400;
+  src: url("https://cdn.openai.com/common/fonts/katex/KaTeX_Caligraphic-Regular.woff2")
+    format("woff2");
+}
+
+@font-face {
+  font-family: "KaTeX_Fraktur";
+  font-style: normal;
+  font-weight: 700;
+  src: url("https://cdn.openai.com/common/fonts/katex/KaTeX_Fraktur-Bold.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "KaTeX_Fraktur";
+  font-style: normal;
+  font-weight: 400;
+  src: url("https://cdn.openai.com/common/fonts/katex/KaTeX_Fraktur-Regular.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "KaTeX_Main";
+  font-style: normal;
+  font-weight: 700;
+  src: url("https://cdn.openai.com/common/fonts/katex/KaTeX_Main-Bold.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "KaTeX_Main";
+  font-style: italic;
+  font-weight: 700;
+  src: url("https://cdn.openai.com/common/fonts/katex/KaTeX_Main-BoldItalic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "KaTeX_Main";
+  font-style: italic;
+  font-weight: 400;
+  src: url("https://cdn.openai.com/common/fonts/katex/KaTeX_Main-Italic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "KaTeX_Main";
+  font-style: normal;
+  font-weight: 400;
+  src: url("https://cdn.openai.com/common/fonts/katex/KaTeX_Main-Regular.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "KaTeX_Math";
+  font-style: italic;
+  font-weight: 700;
+  src: url("https://cdn.openai.com/common/fonts/katex/KaTeX_Math-BoldItalic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "KaTeX_Math";
+  font-style: italic;
+  font-weight: 400;
+  src: url("https://cdn.openai.com/common/fonts/katex/KaTeX_Math-Italic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "KaTeX_SansSerif";
+  font-style: normal;
+  font-weight: 700;
+  src: url("https://cdn.openai.com/common/fonts/katex/KaTeX_SansSerif-Bold.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "KaTeX_SansSerif";
+  font-style: italic;
+  font-weight: 400;
+  src: url("https://cdn.openai.com/common/fonts/katex/KaTeX_SansSerif-Italic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "KaTeX_SansSerif";
+  font-style: normal;
+  font-weight: 400;
+  src: url("https://cdn.openai.com/common/fonts/katex/KaTeX_SansSerif-Regular.woff2")
+    format("woff2");
+}
+
+@font-face {
+  font-family: "KaTeX_Script";
+  font-style: normal;
+  font-weight: 400;
+  src: url("https://cdn.openai.com/common/fonts/katex/KaTeX_Script-Regular.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "KaTeX_Size1";
+  font-style: normal;
+  font-weight: 400;
+  src: url("https://cdn.openai.com/common/fonts/katex/KaTeX_Size1-Regular.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "KaTeX_Size2";
+  font-style: normal;
+  font-weight: 400;
+  src: url("https://cdn.openai.com/common/fonts/katex/KaTeX_Size2-Regular.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "KaTeX_Size3";
+  font-style: normal;
+  font-weight: 400;
+  src: url("https://cdn.openai.com/common/fonts/katex/KaTeX_Size3-Regular.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "KaTeX_Size4";
+  font-style: normal;
+  font-weight: 400;
+  src: url("https://cdn.openai.com/common/fonts/katex/KaTeX_Size4-Regular.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "KaTeX_Typewriter";
+  font-style: normal;
+  font-weight: 400;
+  src: url("https://cdn.openai.com/common/fonts/katex/KaTeX_Typewriter-Regular.woff2")
+    format("woff2");
+}
+
+.katex {
+  font:
+    normal 1.21em "KaTeX_Main",
+    "Times New Roman",
+    serif;
+  line-height: 1.2;
+  text-indent: 0;
+  text-rendering: auto;
+}
+
+.katex * {
+  border-color: currentcolor;
+  -ms-high-contrast-adjust: none !important;
+}
+
+.katex .katex-version::after {
+  content: "0.16.0";
+}
+
+.katex .katex-mathml {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+.katex .katex-html > .newline {
+  display: block;
+}
+
+.katex .base {
+  position: relative;
+  width: -moz-min-content;
+  width: min-content;
+  white-space: nowrap;
+}
+
+.katex .base,
+.katex .strut {
+  display: inline-block;
+}
+
+.katex .textbf {
+  font-weight: 700;
+}
+
+.katex .textit {
+  font-style: italic;
+}
+
+.katex .textrm {
+  font-family: "KaTeX_Main";
+}
+
+.katex .textsf {
+  font-family: "KaTeX_SansSerif";
+}
+
+.katex .texttt {
+  font-family: "KaTeX_Typewriter";
+}
+
+.katex .mathnormal {
+  font-family: "KaTeX_Math";
+  font-style: italic;
+}
+
+.katex .mathit {
+  font-family: "KaTeX_Main";
+  font-style: italic;
+}
+
+.katex .mathrm {
+  font-style: normal;
+}
+
+.katex .mathbf {
+  font-family: "KaTeX_Main";
+  font-weight: 700;
+}
+
+.katex .boldsymbol {
+  font-family: "KaTeX_Math";
+  font-style: italic;
+  font-weight: 700;
+}
+
+.katex .amsrm,
+.katex .mathbb,
+.katex .textbb {
+  font-family: "KaTeX_AMS";
+}
+
+.katex .mathcal {
+  font-family: "KaTeX_Caligraphic";
+}
+
+.katex .mathfrak,
+.katex .textfrak {
+  font-family: "KaTeX_Fraktur";
+}
+
+.katex .mathtt {
+  font-family: "KaTeX_Typewriter";
+}
+
+.katex .mathscr,
+.katex .textscr {
+  font-family: "KaTeX_Script";
+}
+
+.katex .mathsf,
+.katex .textsf {
+  font-family: "KaTeX_SansSerif";
+}
+
+.katex .mathboldsf,
+.katex .textboldsf {
+  font-family: "KaTeX_SansSerif";
+  font-weight: 700;
+}
+
+.katex .mathitsf,
+.katex .textitsf {
+  font-family: "KaTeX_SansSerif";
+  font-style: italic;
+}
+
+.katex .mainrm {
+  font-family: "KaTeX_Main";
+  font-style: normal;
+}
+
+.katex .vlist-t {
+  display: inline-table;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+.katex .vlist-r {
+  display: table-row;
+}
+
+.katex .vlist {
+  position: relative;
+  display: table-cell;
+  vertical-align: bottom;
+}
+
+.katex .vlist > span {
+  position: relative;
+  display: block;
+  height: 0;
+}
+
+.katex .vlist > span > span {
+  display: inline-block;
+}
+
+.katex .vlist > span > .pstrut {
+  overflow: hidden;
+  width: 0;
+}
+
+.katex .vlist-t2 {
+  margin-right: -2px;
+}
+
+.katex .vlist-s {
+  display: table-cell;
+  width: 2px;
+  min-width: 2px;
+  font-size: 1px;
+  vertical-align: bottom;
+}
+
+.katex .vbox {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: baseline;
+}
+
+.katex .hbox {
+  width: 100%;
+}
+
+.katex .hbox,
+.katex .thinbox {
+  display: inline-flex;
+  flex-direction: row;
+}
+
+.katex .thinbox {
+  width: 0;
+  max-width: 0;
+}
+
+.katex .msupsub {
+  text-align: left;
+}
+
+.katex .mfrac > span > span {
+  text-align: center;
+}
+
+.katex .mfrac .frac-line {
+  display: inline-block;
+  width: 100%;
+  border-bottom-style: solid;
+}
+
+.katex .hdashline,
+.katex .hline,
+.katex .mfrac .frac-line,
+.katex .overline .overline-line,
+.katex .rule,
+.katex .underline .underline-line {
+  min-height: 1px;
+}
+
+.katex .mspace {
+  display: inline-block;
+}
+
+.katex .clap,
+.katex .llap,
+.katex .rlap {
+  position: relative;
+  width: 0;
+}
+
+.katex .clap > .inner,
+.katex .llap > .inner,
+.katex .rlap > .inner {
+  position: absolute;
+}
+
+.katex .clap > .fix,
+.katex .llap > .fix,
+.katex .rlap > .fix {
+  display: inline-block;
+}
+
+.katex .llap > .inner {
+  right: 0;
+}
+
+.katex .clap > .inner,
+.katex .rlap > .inner {
+  left: 0;
+}
+
+.katex .clap > .inner > span {
+  margin-right: 50%;
+  margin-left: -50%;
+}
+
+.katex .rule {
+  position: relative;
+  display: inline-block;
+  border: 0 solid;
+}
+
+.katex .hline,
+.katex .overline .overline-line,
+.katex .underline .underline-line {
+  display: inline-block;
+  width: 100%;
+  border-bottom-style: solid;
+}
+
+.katex .hdashline {
+  display: inline-block;
+  width: 100%;
+  border-bottom-style: dashed;
+}
+
+.katex .sqrt > .root {
+  margin-right: -0.55555556em;
+  margin-left: 0.27777778em;
+}
+
+.katex .fontsize-ensurer.reset-size1.size1,
+.katex .sizing.reset-size1.size1 {
+  font-size: 1em;
+}
+
+.katex .fontsize-ensurer.reset-size1.size2,
+.katex .sizing.reset-size1.size2 {
+  font-size: 1.2em;
+}
+
+.katex .fontsize-ensurer.reset-size1.size3,
+.katex .sizing.reset-size1.size3 {
+  font-size: 1.4em;
+}
+
+.katex .fontsize-ensurer.reset-size1.size4,
+.katex .sizing.reset-size1.size4 {
+  font-size: 1.6em;
+}
+
+.katex .fontsize-ensurer.reset-size1.size5,
+.katex .sizing.reset-size1.size5 {
+  font-size: 1.8em;
+}
+
+.katex .fontsize-ensurer.reset-size1.size6,
+.katex .sizing.reset-size1.size6 {
+  font-size: 2em;
+}
+
+.katex .fontsize-ensurer.reset-size1.size7,
+.katex .sizing.reset-size1.size7 {
+  font-size: 2.4em;
+}
+
+.katex .fontsize-ensurer.reset-size1.size8,
+.katex .sizing.reset-size1.size8 {
+  font-size: 2.88em;
+}
+
+.katex .fontsize-ensurer.reset-size1.size9,
+.katex .sizing.reset-size1.size9 {
+  font-size: 3.456em;
+}
+
+.katex .fontsize-ensurer.reset-size1.size10,
+.katex .sizing.reset-size1.size10 {
+  font-size: 4.148em;
+}
+
+.katex .fontsize-ensurer.reset-size1.size11,
+.katex .sizing.reset-size1.size11 {
+  font-size: 4.976em;
+}
+
+.katex .fontsize-ensurer.reset-size2.size1,
+.katex .sizing.reset-size2.size1 {
+  font-size: 0.83333333em;
+}
+
+.katex .fontsize-ensurer.reset-size2.size2,
+.katex .sizing.reset-size2.size2 {
+  font-size: 1em;
+}
+
+.katex .fontsize-ensurer.reset-size2.size3,
+.katex .sizing.reset-size2.size3 {
+  font-size: 1.16666667em;
+}
+
+.katex .fontsize-ensurer.reset-size2.size4,
+.katex .sizing.reset-size2.size4 {
+  font-size: 1.33333333em;
+}
+
+.katex .fontsize-ensurer.reset-size2.size5,
+.katex .sizing.reset-size2.size5 {
+  font-size: 1.5em;
+}
+
+.katex .fontsize-ensurer.reset-size2.size6,
+.katex .sizing.reset-size2.size6 {
+  font-size: 1.66666667em;
+}
+
+.katex .fontsize-ensurer.reset-size2.size7,
+.katex .sizing.reset-size2.size7 {
+  font-size: 2em;
+}
+
+.katex .fontsize-ensurer.reset-size2.size8,
+.katex .sizing.reset-size2.size8 {
+  font-size: 2.4em;
+}
+
+.katex .fontsize-ensurer.reset-size2.size9,
+.katex .sizing.reset-size2.size9 {
+  font-size: 2.88em;
+}
+
+.katex .fontsize-ensurer.reset-size2.size10,
+.katex .sizing.reset-size2.size10 {
+  font-size: 3.45666667em;
+}
+
+.katex .fontsize-ensurer.reset-size2.size11,
+.katex .sizing.reset-size2.size11 {
+  font-size: 4.14666667em;
+}
+
+.katex .fontsize-ensurer.reset-size3.size1,
+.katex .sizing.reset-size3.size1 {
+  font-size: 0.71428571em;
+}
+
+.katex .fontsize-ensurer.reset-size3.size2,
+.katex .sizing.reset-size3.size2 {
+  font-size: 0.85714286em;
+}
+
+.katex .fontsize-ensurer.reset-size3.size3,
+.katex .sizing.reset-size3.size3 {
+  font-size: 1em;
+}
+
+.katex .fontsize-ensurer.reset-size3.size4,
+.katex .sizing.reset-size3.size4 {
+  font-size: 1.14285714em;
+}
+
+.katex .fontsize-ensurer.reset-size3.size5,
+.katex .sizing.reset-size3.size5 {
+  font-size: 1.28571429em;
+}
+
+.katex .fontsize-ensurer.reset-size3.size6,
+.katex .sizing.reset-size3.size6 {
+  font-size: 1.42857143em;
+}
+
+.katex .fontsize-ensurer.reset-size3.size7,
+.katex .sizing.reset-size3.size7 {
+  font-size: 1.71428571em;
+}
+
+.katex .fontsize-ensurer.reset-size3.size8,
+.katex .sizing.reset-size3.size8 {
+  font-size: 2.05714286em;
+}
+
+.katex .fontsize-ensurer.reset-size3.size9,
+.katex .sizing.reset-size3.size9 {
+  font-size: 2.46857143em;
+}
+
+.katex .fontsize-ensurer.reset-size3.size10,
+.katex .sizing.reset-size3.size10 {
+  font-size: 2.96285714em;
+}
+
+.katex .fontsize-ensurer.reset-size3.size11,
+.katex .sizing.reset-size3.size11 {
+  font-size: 3.55428571em;
+}
+
+.katex .fontsize-ensurer.reset-size4.size1,
+.katex .sizing.reset-size4.size1 {
+  font-size: 0.625em;
+}
+
+.katex .fontsize-ensurer.reset-size4.size2,
+.katex .sizing.reset-size4.size2 {
+  font-size: 0.75em;
+}
+
+.katex .fontsize-ensurer.reset-size4.size3,
+.katex .sizing.reset-size4.size3 {
+  font-size: 0.875em;
+}
+
+.katex .fontsize-ensurer.reset-size4.size4,
+.katex .sizing.reset-size4.size4 {
+  font-size: 1em;
+}
+
+.katex .fontsize-ensurer.reset-size4.size5,
+.katex .sizing.reset-size4.size5 {
+  font-size: 1.125em;
+}
+
+.katex .fontsize-ensurer.reset-size4.size6,
+.katex .sizing.reset-size4.size6 {
+  font-size: 1.25em;
+}
+
+.katex .fontsize-ensurer.reset-size4.size7,
+.katex .sizing.reset-size4.size7 {
+  font-size: 1.5em;
+}
+
+.katex .fontsize-ensurer.reset-size4.size8,
+.katex .sizing.reset-size4.size8 {
+  font-size: 1.8em;
+}
+
+.katex .fontsize-ensurer.reset-size4.size9,
+.katex .sizing.reset-size4.size9 {
+  font-size: 2.16em;
+}
+
+.katex .fontsize-ensurer.reset-size4.size10,
+.katex .sizing.reset-size4.size10 {
+  font-size: 2.5925em;
+}
+
+.katex .fontsize-ensurer.reset-size4.size11,
+.katex .sizing.reset-size4.size11 {
+  font-size: 3.11em;
+}
+
+.katex .fontsize-ensurer.reset-size5.size1,
+.katex .sizing.reset-size5.size1 {
+  font-size: 0.55555556em;
+}
+
+.katex .fontsize-ensurer.reset-size5.size2,
+.katex .sizing.reset-size5.size2 {
+  font-size: 0.66666667em;
+}
+
+.katex .fontsize-ensurer.reset-size5.size3,
+.katex .sizing.reset-size5.size3 {
+  font-size: 0.77777778em;
+}
+
+.katex .fontsize-ensurer.reset-size5.size4,
+.katex .sizing.reset-size5.size4 {
+  font-size: 0.88888889em;
+}
+
+.katex .fontsize-ensurer.reset-size5.size5,
+.katex .sizing.reset-size5.size5 {
+  font-size: 1em;
+}
+
+.katex .fontsize-ensurer.reset-size5.size6,
+.katex .sizing.reset-size5.size6 {
+  font-size: 1.11111111em;
+}
+
+.katex .fontsize-ensurer.reset-size5.size7,
+.katex .sizing.reset-size5.size7 {
+  font-size: 1.33333333em;
+}
+
+.katex .fontsize-ensurer.reset-size5.size8,
+.katex .sizing.reset-size5.size8 {
+  font-size: 1.6em;
+}
+
+.katex .fontsize-ensurer.reset-size5.size9,
+.katex .sizing.reset-size5.size9 {
+  font-size: 1.92em;
+}
+
+.katex .fontsize-ensurer.reset-size5.size10,
+.katex .sizing.reset-size5.size10 {
+  font-size: 2.30444444em;
+}
+
+.katex .fontsize-ensurer.reset-size5.size11,
+.katex .sizing.reset-size5.size11 {
+  font-size: 2.76444444em;
+}
+
+.katex .fontsize-ensurer.reset-size6.size1,
+.katex .sizing.reset-size6.size1 {
+  font-size: 0.5em;
+}
+
+.katex .fontsize-ensurer.reset-size6.size2,
+.katex .sizing.reset-size6.size2 {
+  font-size: 0.6em;
+}
+
+.katex .fontsize-ensurer.reset-size6.size3,
+.katex .sizing.reset-size6.size3 {
+  font-size: 0.7em;
+}
+
+.katex .fontsize-ensurer.reset-size6.size4,
+.katex .sizing.reset-size6.size4 {
+  font-size: 0.8em;
+}
+
+.katex .fontsize-ensurer.reset-size6.size5,
+.katex .sizing.reset-size6.size5 {
+  font-size: 0.9em;
+}
+
+.katex .fontsize-ensurer.reset-size6.size6,
+.katex .sizing.reset-size6.size6 {
+  font-size: 1em;
+}
+
+.katex .fontsize-ensurer.reset-size6.size7,
+.katex .sizing.reset-size6.size7 {
+  font-size: 1.2em;
+}
+
+.katex .fontsize-ensurer.reset-size6.size8,
+.katex .sizing.reset-size6.size8 {
+  font-size: 1.44em;
+}
+
+.katex .fontsize-ensurer.reset-size6.size9,
+.katex .sizing.reset-size6.size9 {
+  font-size: 1.728em;
+}
+
+.katex .fontsize-ensurer.reset-size6.size10,
+.katex .sizing.reset-size6.size10 {
+  font-size: 2.074em;
+}
+
+.katex .fontsize-ensurer.reset-size6.size11,
+.katex .sizing.reset-size6.size11 {
+  font-size: 2.488em;
+}
+
+.katex .fontsize-ensurer.reset-size7.size1,
+.katex .sizing.reset-size7.size1 {
+  font-size: 0.41666667em;
+}
+
+.katex .fontsize-ensurer.reset-size7.size2,
+.katex .sizing.reset-size7.size2 {
+  font-size: 0.5em;
+}
+
+.katex .fontsize-ensurer.reset-size7.size3,
+.katex .sizing.reset-size7.size3 {
+  font-size: 0.58333333em;
+}
+
+.katex .fontsize-ensurer.reset-size7.size4,
+.katex .sizing.reset-size7.size4 {
+  font-size: 0.66666667em;
+}
+
+.katex .fontsize-ensurer.reset-size7.size5,
+.katex .sizing.reset-size7.size5 {
+  font-size: 0.75em;
+}
+
+.katex .fontsize-ensurer.reset-size7.size6,
+.katex .sizing.reset-size7.size6 {
+  font-size: 0.83333333em;
+}
+
+.katex .fontsize-ensurer.reset-size7.size7,
+.katex .sizing.reset-size7.size7 {
+  font-size: 1em;
+}
+
+.katex .fontsize-ensurer.reset-size7.size8,
+.katex .sizing.reset-size7.size8 {
+  font-size: 1.2em;
+}
+
+.katex .fontsize-ensurer.reset-size7.size9,
+.katex .sizing.reset-size7.size9 {
+  font-size: 1.44em;
+}
+
+.katex .fontsize-ensurer.reset-size7.size10,
+.katex .sizing.reset-size7.size10 {
+  font-size: 1.72833333em;
+}
+
+.katex .fontsize-ensurer.reset-size7.size11,
+.katex .sizing.reset-size7.size11 {
+  font-size: 2.07333333em;
+}
+
+.katex .fontsize-ensurer.reset-size8.size1,
+.katex .sizing.reset-size8.size1 {
+  font-size: 0.34722222em;
+}
+
+.katex .fontsize-ensurer.reset-size8.size2,
+.katex .sizing.reset-size8.size2 {
+  font-size: 0.41666667em;
+}
+
+.katex .fontsize-ensurer.reset-size8.size3,
+.katex .sizing.reset-size8.size3 {
+  font-size: 0.48611111em;
+}
+
+.katex .fontsize-ensurer.reset-size8.size4,
+.katex .sizing.reset-size8.size4 {
+  font-size: 0.55555556em;
+}
+
+.katex .fontsize-ensurer.reset-size8.size5,
+.katex .sizing.reset-size8.size5 {
+  font-size: 0.625em;
+}
+
+.katex .fontsize-ensurer.reset-size8.size6,
+.katex .sizing.reset-size8.size6 {
+  font-size: 0.69444444em;
+}
+
+.katex .fontsize-ensurer.reset-size8.size7,
+.katex .sizing.reset-size8.size7 {
+  font-size: 0.83333333em;
+}
+
+.katex .fontsize-ensurer.reset-size8.size8,
+.katex .sizing.reset-size8.size8 {
+  font-size: 1em;
+}
+
+.katex .fontsize-ensurer.reset-size8.size9,
+.katex .sizing.reset-size8.size9 {
+  font-size: 1.2em;
+}
+
+.katex .fontsize-ensurer.reset-size8.size10,
+.katex .sizing.reset-size8.size10 {
+  font-size: 1.44027778em;
+}
+
+.katex .fontsize-ensurer.reset-size8.size11,
+.katex .sizing.reset-size8.size11 {
+  font-size: 1.72777778em;
+}
+
+.katex .fontsize-ensurer.reset-size9.size1,
+.katex .sizing.reset-size9.size1 {
+  font-size: 0.28935185em;
+}
+
+.katex .fontsize-ensurer.reset-size9.size2,
+.katex .sizing.reset-size9.size2 {
+  font-size: 0.34722222em;
+}
+
+.katex .fontsize-ensurer.reset-size9.size3,
+.katex .sizing.reset-size9.size3 {
+  font-size: 0.40509259em;
+}
+
+.katex .fontsize-ensurer.reset-size9.size4,
+.katex .sizing.reset-size9.size4 {
+  font-size: 0.46296296em;
+}
+
+.katex .fontsize-ensurer.reset-size9.size5,
+.katex .sizing.reset-size9.size5 {
+  font-size: 0.52083333em;
+}
+
+.katex .fontsize-ensurer.reset-size9.size6,
+.katex .sizing.reset-size9.size6 {
+  font-size: 0.5787037em;
+}
+
+.katex .fontsize-ensurer.reset-size9.size7,
+.katex .sizing.reset-size9.size7 {
+  font-size: 0.69444444em;
+}
+
+.katex .fontsize-ensurer.reset-size9.size8,
+.katex .sizing.reset-size9.size8 {
+  font-size: 0.83333333em;
+}
+
+.katex .fontsize-ensurer.reset-size9.size9,
+.katex .sizing.reset-size9.size9 {
+  font-size: 1em;
+}
+
+.katex .fontsize-ensurer.reset-size9.size10,
+.katex .sizing.reset-size9.size10 {
+  font-size: 1.20023148em;
+}
+
+.katex .fontsize-ensurer.reset-size9.size11,
+.katex .sizing.reset-size9.size11 {
+  font-size: 1.43981481em;
+}
+
+.katex .fontsize-ensurer.reset-size10.size1,
+.katex .sizing.reset-size10.size1 {
+  font-size: 0.24108004em;
+}
+
+.katex .fontsize-ensurer.reset-size10.size2,
+.katex .sizing.reset-size10.size2 {
+  font-size: 0.28929605em;
+}
+
+.katex .fontsize-ensurer.reset-size10.size3,
+.katex .sizing.reset-size10.size3 {
+  font-size: 0.33751205em;
+}
+
+.katex .fontsize-ensurer.reset-size10.size4,
+.katex .sizing.reset-size10.size4 {
+  font-size: 0.38572806em;
+}
+
+.katex .fontsize-ensurer.reset-size10.size5,
+.katex .sizing.reset-size10.size5 {
+  font-size: 0.43394407em;
+}
+
+.katex .fontsize-ensurer.reset-size10.size6,
+.katex .sizing.reset-size10.size6 {
+  font-size: 0.48216008em;
+}
+
+.katex .fontsize-ensurer.reset-size10.size7,
+.katex .sizing.reset-size10.size7 {
+  font-size: 0.57859209em;
+}
+
+.katex .fontsize-ensurer.reset-size10.size8,
+.katex .sizing.reset-size10.size8 {
+  font-size: 0.69431051em;
+}
+
+.katex .fontsize-ensurer.reset-size10.size9,
+.katex .sizing.reset-size10.size9 {
+  font-size: 0.83317261em;
+}
+
+.katex .fontsize-ensurer.reset-size10.size10,
+.katex .sizing.reset-size10.size10 {
+  font-size: 1em;
+}
+
+.katex .fontsize-ensurer.reset-size10.size11,
+.katex .sizing.reset-size10.size11 {
+  font-size: 1.19961427em;
+}
+
+.katex .fontsize-ensurer.reset-size11.size1,
+.katex .sizing.reset-size11.size1 {
+  font-size: 0.20096463em;
+}
+
+.katex .fontsize-ensurer.reset-size11.size2,
+.katex .sizing.reset-size11.size2 {
+  font-size: 0.24115756em;
+}
+
+.katex .fontsize-ensurer.reset-size11.size3,
+.katex .sizing.reset-size11.size3 {
+  font-size: 0.28135048em;
+}
+
+.katex .fontsize-ensurer.reset-size11.size4,
+.katex .sizing.reset-size11.size4 {
+  font-size: 0.32154341em;
+}
+
+.katex .fontsize-ensurer.reset-size11.size5,
+.katex .sizing.reset-size11.size5 {
+  font-size: 0.36173633em;
+}
+
+.katex .fontsize-ensurer.reset-size11.size6,
+.katex .sizing.reset-size11.size6 {
+  font-size: 0.40192926em;
+}
+
+.katex .fontsize-ensurer.reset-size11.size7,
+.katex .sizing.reset-size11.size7 {
+  font-size: 0.48231511em;
+}
+
+.katex .fontsize-ensurer.reset-size11.size8,
+.katex .sizing.reset-size11.size8 {
+  font-size: 0.57877814em;
+}
+
+.katex .fontsize-ensurer.reset-size11.size9,
+.katex .sizing.reset-size11.size9 {
+  font-size: 0.69453376em;
+}
+
+.katex .fontsize-ensurer.reset-size11.size10,
+.katex .sizing.reset-size11.size10 {
+  font-size: 0.83360129em;
+}
+
+.katex .fontsize-ensurer.reset-size11.size11,
+.katex .sizing.reset-size11.size11 {
+  font-size: 1em;
+}
+
+.katex .delimsizing.size1 {
+  font-family: "KaTeX_Size1";
+}
+
+.katex .delimsizing.size2 {
+  font-family: "KaTeX_Size2";
+}
+
+.katex .delimsizing.size3 {
+  font-family: "KaTeX_Size3";
+}
+
+.katex .delimsizing.size4 {
+  font-family: "KaTeX_Size4";
+}
+
+.katex .delimsizing.mult .delim-size1 > span {
+  font-family: "KaTeX_Size1";
+}
+
+.katex .delimsizing.mult .delim-size4 > span {
+  font-family: "KaTeX_Size4";
+}
+
+.katex .nulldelimiter {
+  display: inline-block;
+  width: 0.12em;
+}
+
+.katex .delimcenter,
+.katex .op-symbol {
+  position: relative;
+}
+
+.katex .op-symbol.small-op {
+  font-family: "KaTeX_Size1";
+}
+
+.katex .op-symbol.large-op {
+  font-family: "KaTeX_Size2";
+}
+
+.katex .accent > .vlist-t,
+.katex .op-limits > .vlist-t {
+  text-align: center;
+}
+
+.katex .accent .accent-body {
+  position: relative;
+}
+
+.katex .accent .accent-body:not(.accent-full) {
+  width: 0;
+}
+
+.katex .overlay {
+  display: block;
+}
+
+.katex .mtable .vertical-separator {
+  display: inline-block;
+  min-width: 1px;
+}
+
+.katex .mtable .arraycolsep {
+  display: inline-block;
+}
+
+.katex .mtable .col-align-c > .vlist-t {
+  text-align: center;
+}
+
+.katex .mtable .col-align-l > .vlist-t {
+  text-align: left;
+}
+
+.katex .mtable .col-align-r > .vlist-t {
+  text-align: right;
+}
+
+.katex .svg-align {
+  text-align: left;
+}
+
+.katex svg {
+  position: absolute;
+  display: block;
+  width: 100%;
+  height: inherit;
+  fill: currentcolor;
+  fill-opacity: 1;
+  fill-rule: nonzero;
+  stroke: currentcolor;
+  stroke-dasharray: none;
+  stroke-dashoffset: 0;
+  stroke-linecap: butt;
+  stroke-linejoin: miter;
+  stroke-miterlimit: 4;
+  stroke-opacity: 1;
+  stroke-width: 1;
+}
+
+.katex svg path {
+  stroke: none;
+}
+
+.katex img {
+  min-width: 0;
+  max-width: none;
+  min-height: 0;
+  max-height: none;
+  border-style: none;
+}
+
+.katex .stretchy {
+  position: relative;
+  overflow: hidden;
+  display: block;
+  width: 100%;
+}
+
+.katex .stretchy::after,
+.katex .stretchy::before {
+  content: "";
+}
+
+.katex .hide-tail {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+}
+
+.katex .halfarrow-left {
+  position: absolute;
+  left: 0;
+  overflow: hidden;
+  width: 50.2%;
+}
+
+.katex .halfarrow-right {
+  position: absolute;
+  right: 0;
+  overflow: hidden;
+  width: 50.2%;
+}
+
+.katex .brace-left {
+  position: absolute;
+  left: 0;
+  overflow: hidden;
+  width: 25.1%;
+}
+
+.katex .brace-center {
+  position: absolute;
+  left: 25%;
+  overflow: hidden;
+  width: 50%;
+}
+
+.katex .brace-right {
+  position: absolute;
+  right: 0;
+  overflow: hidden;
+  width: 25.1%;
+}
+
+.katex .x-arrow-pad {
+  padding: 0 0.5em;
+}
+
+.katex .cd-arrow-pad {
+  padding: 0 0.55556em 0 0.27778em;
+}
+
+.katex .mover,
+.katex .munder,
+.katex .x-arrow {
+  text-align: center;
+}
+
+.katex .boxpad {
+  padding: 0 0.3em;
+}
+
+.katex .fbox,
+.katex .fcolorbox {
+  box-sizing: border-box;
+  border: 0.04em solid;
+}
+
+.katex .cancel-pad {
+  padding: 0 0.2em;
+}
+
+.katex .cancel-lap {
+  margin-right: -0.2em;
+  margin-left: -0.2em;
+}
+
+.katex .sout {
+  border-bottom-width: 0.08em;
+  border-bottom-style: solid;
+}
+
+.katex .angl {
+  box-sizing: border-box;
+  border-top: 0.049em solid;
+  border-right: 0.049em solid;
+  margin-right: 0.03889em;
+}
+
+.katex .anglpad {
+  padding: 0 0.03889em;
+}
+
+.katex .eqn-num::before {
+  content: "(" counter(katexEqnNo) ")";
+  counter-increment: katexEqnNo;
+}
+
+.katex .mml-eqn-num::before {
+  content: "(" counter(mmlEqnNo) ")";
+  counter-increment: mmlEqnNo;
+}
+
+.katex .mtr-glue {
+  width: 50%;
+}
+
+.katex .cd-vert-arrow {
+  position: relative;
+  display: inline-block;
+}
+
+.katex .cd-label-left {
+  position: absolute;
+  right: calc(50% + 0.3em);
+  display: inline-block;
+  text-align: left;
+}
+
+.katex .cd-label-right {
+  position: absolute;
+  left: calc(50% + 0.3em);
+  display: inline-block;
+  text-align: right;
+}
+
+.katex-display {
+  display: block;
+  margin: 1em 0;
+  text-align: center;
+}
+
+.katex-display > .katex {
+  display: block;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.katex-display > .katex > .katex-html {
+  position: relative;
+  display: block;
+}
+
+.katex-display > .katex > .katex-html > .tag {
+  position: absolute;
+  right: 0;
+}
+
+.katex-display.leqno > .katex > .katex-html > .tag {
+  right: auto;
+  left: 0;
+}
+
+.katex-display.fleqn > .katex {
+  padding-left: 2em;
+  text-align: left;
+}
+
+body {
+  counter-reset: katexEqnNo mmlEqnNo;
+}
+}
+
+/* Scan simulator source files for Tailwind classes */
+
+@source "./**/*.{ts,tsx}";
+
+/* Required for Tailwind to find class references in Apps SDK UI components. */
+
+@source "../node_modules/@openai/apps-sdk-ui";
+
+/* Configure dark mode to use data-theme attribute (OpenAI SDK standard) */
+
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));