@tangle-network/sandbox-ui 0.117.3 → 0.119.0

package/dist/globals.css

@@ -3,11 +3,8 @@
 @layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
-    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
-      "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-      "Segoe UI Symbol", "Noto Color Emoji";
-    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-      "Courier New", monospace;
+    --font-sans: "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
+    --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
     --color-red-200: oklch(88.5% 0.062 18.334);
     --color-red-400: oklch(70.4% 0.191 22.216);
     --color-red-500: oklch(63.7% 0.237 25.331);
@@ -78,10 +75,10 @@
     --leading-tight: 1.25;
     --leading-snug: 1.375;
     --leading-relaxed: 1.625;
-    --radius-sm: 0.25rem;
-    --radius-md: 0.375rem;
-    --radius-lg: 0.5rem;
-    --radius-xl: 0.75rem;
+    --radius-sm: 6px;
+    --radius-md: 8px;
+    --radius-lg: 10px;
+    --radius-xl: 12px;
     --radius-2xl: 1rem;
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
@@ -95,31 +92,13 @@
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
+    --font-display: "Inter", "Geist", sans-serif;
+    --radius-full: 999px;
+    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
+    --shadow-dropdown: 0 8px 30px rgba(0, 0, 0, 0.45);
+    --shadow-glow: none;
     --color-background: hsl(var(--background));
-    --color-foreground: hsl(var(--foreground));
-    --color-card: hsl(var(--card));
-    --color-card-foreground: hsl(var(--card-foreground));
-    --color-popover-foreground: hsl(var(--popover-foreground));
-    --color-primary: hsl(var(--primary));
-    --color-primary-foreground: hsl(var(--primary-foreground));
-    --color-secondary: hsl(var(--secondary));
-    --color-secondary-foreground: hsl(var(--secondary-foreground));
     --color-muted: hsl(var(--muted));
-    --color-muted-foreground: hsl(var(--muted-foreground));
-    --color-accent: hsl(var(--accent));
-    --color-accent-foreground: hsl(var(--accent-foreground));
-    --color-destructive: hsl(var(--destructive));
-    --color-destructive-foreground: hsl(var(--destructive-foreground));
-    --color-border: hsl(var(--border));
-    --color-input: hsl(var(--input));
-    --color-ring: hsl(var(--ring));
-    --color-surface: var(--md3-surface);
-    --color-surface-dim: var(--md3-surface-dim);
-    --color-surface-container-lowest: var(--md3-surface-container-lowest);
-    --color-surface-container-low: var(--md3-surface-container-low);
-    --color-surface-container: var(--md3-surface-container);
-    --color-surface-container-high: var(--md3-surface-container-high);
-    --color-surface-container-highest: var(--md3-surface-container-highest);
   }
 }
 @layer base {
@@ -537,6 +516,9 @@
   .-mx-3 {
     margin-inline: calc(var(--spacing) * -3);
   }
+  .mx-0 {
+    margin-inline: 0px;
+  }
   .mx-1 {
     margin-inline: var(--spacing);
   }
@@ -1533,6 +1515,9 @@
   .min-w-\[20px\] {
     min-width: 20px;
   }
+  .min-w-\[40rem\] {
+    min-width: 40rem;
+  }
   .min-w-\[120px\] {
     min-width: 120px;
   }
@@ -1563,6 +1548,9 @@
   .flex-\[1_1_12rem\] {
     flex: 1 1 12rem;
   }
+  .flex-\[1_1_16rem\] {
+    flex: 1 1 16rem;
+  }
   .flex-\[2\] {
     flex: 2;
   }
@@ -1584,6 +1572,9 @@
   .basis-1\/3 {
     flex-basis: calc(1 / 3 * 100%);
   }
+  .basis-64 {
+    flex-basis: calc(var(--spacing) * 64);
+  }
   .table-fixed {
     table-layout: fixed;
   }
@@ -1933,7 +1924,7 @@
     border-color: var(--md3-outline-variant);
   }
   :where(.divide-border > :not(:last-child)) {
-    border-color: var(--color-border);
+    border-color: hsl(var(--border));
   }
   .self-start {
     align-self: flex-start;
@@ -1968,7 +1959,7 @@
     overscroll-behavior: contain;
   }
   .\!rounded-full {
-    border-radius: calc(infinity * 1px) !important;
+    border-radius: var(--radius-full) !important;
   }
   .rounded {
     border-radius: 0.25rem;
@@ -2013,7 +2004,7 @@
     border-radius: var(--radius-xl);
   }
   .rounded-full {
-    border-radius: calc(infinity * 1px);
+    border-radius: var(--radius-full);
   }
   .rounded-lg {
     border-radius: var(--radius-lg);
@@ -2126,7 +2117,7 @@
     border-style: none;
   }
   .\!border-border {
-    border-color: var(--color-border) !important;
+    border-color: hsl(var(--border)) !important;
   }
   .border-\[var\(--accent-text\)\] {
     border-color: var(--accent-text);
@@ -2204,7 +2195,7 @@
     border-color: var(--surface-warning-border);
   }
   .border-background {
-    border-color: var(--color-background);
+    border-color: hsl(var(--background));
   }
   .border-blue-500\/30 {
     border-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 30%, transparent);
@@ -2213,30 +2204,30 @@
     }
   }
   .border-border {
-    border-color: var(--color-border);
+    border-color: hsl(var(--border));
   }
   .border-destructive\/20 {
-    border-color: color-mix(in srgb, hsl(var(--destructive)) 20%, transparent);
+    border-color: hsl(var(--destructive));
     @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
+      border-color: color-mix(in oklab, hsl(var(--destructive)) 20%, transparent);
     }
   }
   .border-destructive\/25 {
-    border-color: color-mix(in srgb, hsl(var(--destructive)) 25%, transparent);
+    border-color: hsl(var(--destructive));
     @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-destructive) 25%, transparent);
+      border-color: color-mix(in oklab, hsl(var(--destructive)) 25%, transparent);
     }
   }
   .border-destructive\/30 {
-    border-color: color-mix(in srgb, hsl(var(--destructive)) 30%, transparent);
+    border-color: hsl(var(--destructive));
     @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-destructive) 30%, transparent);
+      border-color: color-mix(in oklab, hsl(var(--destructive)) 30%, transparent);
     }
   }
   .border-destructive\/40 {
-    border-color: color-mix(in srgb, hsl(var(--destructive)) 40%, transparent);
+    border-color: hsl(var(--destructive));
     @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
+      border-color: color-mix(in oklab, hsl(var(--destructive)) 40%, transparent);
     }
   }
   .border-emerald-500\/30 {
@@ -2251,9 +2242,6 @@
       border-color: color-mix(in oklab, var(--color-emerald-500) 40%, transparent);
     }
   }
-  .border-foreground {
-    border-color: var(--color-foreground);
-  }
   .border-green-500\/30 {
     border-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2261,30 +2249,27 @@
     }
   }
   .border-input {
-    border-color: var(--color-input);
-  }
-  .border-muted-foreground {
-    border-color: var(--color-muted-foreground);
+    border-color: hsl(var(--input));
   }
   .border-primary {
-    border-color: var(--color-primary);
+    border-color: hsl(var(--primary));
   }
   .border-primary\/20 {
-    border-color: color-mix(in srgb, hsl(var(--primary)) 20%, transparent);
+    border-color: hsl(var(--primary));
     @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
+      border-color: color-mix(in oklab, hsl(var(--primary)) 20%, transparent);
     }
   }
   .border-primary\/30 {
-    border-color: color-mix(in srgb, hsl(var(--primary)) 30%, transparent);
+    border-color: hsl(var(--primary));
     @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
+      border-color: color-mix(in oklab, hsl(var(--primary)) 30%, transparent);
     }
   }
   .border-primary\/40 {
-    border-color: color-mix(in srgb, hsl(var(--primary)) 40%, transparent);
+    border-color: hsl(var(--primary));
     @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
+      border-color: color-mix(in oklab, hsl(var(--primary)) 40%, transparent);
     }
   }
   .border-red-500\/20 {
@@ -2327,21 +2312,21 @@
     }
   }
   .border-t-muted-foreground\/30 {
-    border-top-color: color-mix(in srgb, hsl(var(--muted-foreground)) 30%, transparent);
+    border-top-color: hsl(var(--muted-foreground));
     @supports (color: color-mix(in lab, red, red)) {
-      border-top-color: color-mix(in oklab, var(--color-muted-foreground) 30%, transparent);
+      border-top-color: color-mix(in oklab, hsl(var(--muted-foreground)) 30%, transparent);
     }
   }
   .border-t-transparent {
     border-top-color: transparent;
   }
   .border-b-primary {
-    border-bottom-color: var(--color-primary);
+    border-bottom-color: hsl(var(--primary));
   }
   .\!bg-muted-foreground\/70 {
-    background-color: color-mix(in srgb, hsl(var(--muted-foreground)) 70%, transparent) !important;
+    background-color: hsl(var(--muted-foreground)) !important;
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-muted-foreground) 70%, transparent) !important;
+      background-color: color-mix(in oklab, hsl(var(--muted-foreground)) 70%, transparent) !important;
     }
   }
   .\!bg-transparent {
@@ -2416,6 +2401,9 @@
   .bg-\[var\(--code-error\)\] {
     background-color: var(--code-error);
   }
+  .bg-\[var\(--code-header-bg\,hsl\(var\(--background\)\)\)\] {
+    background-color: var(--code-header-bg,hsl(var(--background)));
+  }
   .bg-\[var\(--code-number\)\] {
     background-color: var(--code-number);
   }
@@ -2492,7 +2480,7 @@
     background-color: var(--surface-warning-text);
   }
   .bg-accent {
-    background-color: var(--color-accent);
+    background-color: hsl(var(--accent));
   }
   .bg-amber-500\/10 {
     background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 10%, transparent);
@@ -2501,12 +2489,12 @@
     }
   }
   .bg-background {
-    background-color: var(--color-background);
+    background-color: hsl(var(--background));
   }
   .bg-background\/80 {
-    background-color: color-mix(in srgb, hsl(var(--background)) 80%, transparent);
+    background-color: hsl(var(--background));
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-background) 80%, transparent);
+      background-color: color-mix(in oklab, hsl(var(--background)) 80%, transparent);
     }
   }
   .bg-black {
@@ -2546,54 +2534,54 @@
     }
   }
   .bg-border {
-    background-color: var(--color-border);
+    background-color: hsl(var(--border));
   }
   .bg-card {
-    background-color: var(--color-card);
+    background-color: hsl(var(--card));
   }
   .bg-card\/50 {
-    background-color: color-mix(in srgb, hsl(var(--card)) 50%, transparent);
+    background-color: hsl(var(--card));
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-card) 50%, transparent);
+      background-color: color-mix(in oklab, hsl(var(--card)) 50%, transparent);
     }
   }
   .bg-card\/60 {
-    background-color: color-mix(in srgb, hsl(var(--card)) 60%, transparent);
+    background-color: hsl(var(--card));
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-card) 60%, transparent);
+      background-color: color-mix(in oklab, hsl(var(--card)) 60%, transparent);
     }
   }
   .bg-card\/80 {
-    background-color: color-mix(in srgb, hsl(var(--card)) 80%, transparent);
+    background-color: hsl(var(--card));
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-card) 80%, transparent);
+      background-color: color-mix(in oklab, hsl(var(--card)) 80%, transparent);
     }
   }
   .bg-card\/90 {
-    background-color: color-mix(in srgb, hsl(var(--card)) 90%, transparent);
+    background-color: hsl(var(--card));
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-card) 90%, transparent);
+      background-color: color-mix(in oklab, hsl(var(--card)) 90%, transparent);
     }
   }
   .bg-destructive {
-    background-color: var(--color-destructive);
+    background-color: hsl(var(--destructive));
   }
   .bg-destructive\/5 {
-    background-color: color-mix(in srgb, hsl(var(--destructive)) 5%, transparent);
+    background-color: hsl(var(--destructive));
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-destructive) 5%, transparent);
+      background-color: color-mix(in oklab, hsl(var(--destructive)) 5%, transparent);
     }
   }
   .bg-destructive\/10 {
-    background-color: color-mix(in srgb, hsl(var(--destructive)) 10%, transparent);
+    background-color: hsl(var(--destructive));
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-destructive) 10%, transparent);
+      background-color: color-mix(in oklab, hsl(var(--destructive)) 10%, transparent);
     }
   }
   .bg-destructive\/15 {
-    background-color: color-mix(in srgb, hsl(var(--destructive)) 15%, transparent);
+    background-color: hsl(var(--destructive));
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-destructive) 15%, transparent);
+      background-color: color-mix(in oklab, hsl(var(--destructive)) 15%, transparent);
     }
   }
   .bg-emerald-500\/10 {
@@ -2603,7 +2591,7 @@
     }
   }
   .bg-foreground {
-    background-color: var(--color-foreground);
+    background-color: hsl(var(--foreground));
   }
   .bg-green-400 {
     background-color: var(--color-green-400);
@@ -2618,78 +2606,78 @@
     }
   }
   .bg-muted {
-    background-color: var(--color-muted);
+    background-color: hsl(var(--muted));
   }
   .bg-muted-foreground {
-    background-color: var(--color-muted-foreground);
+    background-color: hsl(var(--muted-foreground));
   }
   .bg-muted-foreground\/40 {
-    background-color: color-mix(in srgb, hsl(var(--muted-foreground)) 40%, transparent);
+    background-color: hsl(var(--muted-foreground));
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-muted-foreground) 40%, transparent);
+      background-color: color-mix(in oklab, hsl(var(--muted-foreground)) 40%, transparent);
     }
   }
   .bg-muted\/10 {
-    background-color: color-mix(in srgb, hsl(var(--muted)) 10%, transparent);
+    background-color: hsl(var(--muted));
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-muted) 10%, transparent);
+      background-color: color-mix(in oklab, hsl(var(--muted)) 10%, transparent);
     }
   }
   .bg-muted\/30 {
-    background-color: color-mix(in srgb, hsl(var(--muted)) 30%, transparent);
+    background-color: hsl(var(--muted));
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-muted) 30%, transparent);
+      background-color: color-mix(in oklab, hsl(var(--muted)) 30%, transparent);
     }
   }
   .bg-muted\/40 {
-    background-color: color-mix(in srgb, hsl(var(--muted)) 40%, transparent);
+    background-color: hsl(var(--muted));
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-muted) 40%, transparent);
+      background-color: color-mix(in oklab, hsl(var(--muted)) 40%, transparent);
     }
   }
   .bg-muted\/50 {
-    background-color: color-mix(in srgb, hsl(var(--muted)) 50%, transparent);
+    background-color: hsl(var(--muted));
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
+      background-color: color-mix(in oklab, hsl(var(--muted)) 50%, transparent);
     }
   }
   .bg-muted\/55 {
-    background-color: color-mix(in srgb, hsl(var(--muted)) 55%, transparent);
+    background-color: hsl(var(--muted));
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-muted) 55%, transparent);
+      background-color: color-mix(in oklab, hsl(var(--muted)) 55%, transparent);
     }
   }
   .bg-muted\/60 {
-    background-color: color-mix(in srgb, hsl(var(--muted)) 60%, transparent);
+    background-color: hsl(var(--muted));
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-muted) 60%, transparent);
+      background-color: color-mix(in oklab, hsl(var(--muted)) 60%, transparent);
     }
   }
   .bg-primary {
-    background-color: var(--color-primary);
+    background-color: hsl(var(--primary));
   }
   .bg-primary\/5 {
-    background-color: color-mix(in srgb, hsl(var(--primary)) 5%, transparent);
+    background-color: hsl(var(--primary));
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-primary) 5%, transparent);
+      background-color: color-mix(in oklab, hsl(var(--primary)) 5%, transparent);
     }
   }
   .bg-primary\/10 {
-    background-color: color-mix(in srgb, hsl(var(--primary)) 10%, transparent);
+    background-color: hsl(var(--primary));
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
+      background-color: color-mix(in oklab, hsl(var(--primary)) 10%, transparent);
     }
   }
   .bg-primary\/15 {
-    background-color: color-mix(in srgb, hsl(var(--primary)) 15%, transparent);
+    background-color: hsl(var(--primary));
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-primary) 15%, transparent);
+      background-color: color-mix(in oklab, hsl(var(--primary)) 15%, transparent);
     }
   }
   .bg-primary\/20 {
-    background-color: color-mix(in srgb, hsl(var(--primary)) 20%, transparent);
+    background-color: hsl(var(--primary));
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
+      background-color: color-mix(in oklab, hsl(var(--primary)) 20%, transparent);
     }
   }
   .bg-red-500 {
@@ -2711,40 +2699,40 @@
     }
   }
   .bg-secondary {
-    background-color: var(--color-secondary);
+    background-color: hsl(var(--secondary));
   }
   .bg-surface {
-    background-color: var(--color-surface);
+    background-color: var(--md3-surface);
   }
   .bg-surface-container {
-    background-color: var(--color-surface-container);
+    background-color: var(--md3-surface-container);
   }
   .bg-surface-container-high {
-    background-color: var(--color-surface-container-high);
+    background-color: var(--md3-surface-container-high);
   }
   .bg-surface-container-high\/40 {
-    background-color: var(--color-surface-container-high);
+    background-color: var(--md3-surface-container-high);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-surface-container-high) 40%, transparent);
+      background-color: color-mix(in oklab, var(--md3-surface-container-high) 40%, transparent);
     }
   }
   .bg-surface-container-high\/60 {
-    background-color: var(--color-surface-container-high);
+    background-color: var(--md3-surface-container-high);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-surface-container-high) 60%, transparent);
+      background-color: color-mix(in oklab, var(--md3-surface-container-high) 60%, transparent);
     }
   }
   .bg-surface-container-highest {
-    background-color: var(--color-surface-container-highest);
+    background-color: var(--md3-surface-container-highest);
   }
   .bg-surface-container-low {
-    background-color: var(--color-surface-container-low);
+    background-color: var(--md3-surface-container-low);
   }
   .bg-surface-container-lowest {
-    background-color: var(--color-surface-container-lowest);
+    background-color: var(--md3-surface-container-lowest);
   }
   .bg-surface-dim {
-    background-color: var(--color-surface-dim);
+    background-color: var(--md3-surface-dim);
   }
   .bg-transparent {
     background-color: transparent;
@@ -2814,11 +2802,11 @@
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
   .from-card {
-    --tw-gradient-from: var(--color-card);
+    --tw-gradient-from: hsl(var(--card));
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
   .from-muted {
-    --tw-gradient-from: var(--color-muted);
+    --tw-gradient-from: hsl(var(--muted));
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
   .from-white\/5 {
@@ -3072,12 +3060,18 @@
   .pb-8 {
     padding-bottom: calc(var(--spacing) * 8);
   }
+  .pl-1 {
+    padding-left: var(--spacing);
+  }
   .pl-2 {
     padding-left: calc(var(--spacing) * 2);
   }
   .pl-3 {
     padding-left: calc(var(--spacing) * 3);
   }
+  .pl-4 {
+    padding-left: calc(var(--spacing) * 4);
+  }
   .pl-6 {
     padding-left: calc(var(--spacing) * 6);
   }
@@ -3114,6 +3108,9 @@
   .align-top {
     vertical-align: top;
   }
+  .font-display {
+    font-family: var(--font-display);
+  }
   .font-mono {
     font-family: var(--font-mono);
   }
@@ -3195,9 +3192,6 @@
   .text-\[length\:var\(--font-size-3xl\,1\.875rem\)\] {
     font-size: var(--font-size-3xl,1.875rem);
   }
-  .text-\[length\:var\(--font-size-base\,0\.9375rem\)\] {
-    font-size: var(--font-size-base,0.9375rem);
-  }
   .text-\[length\:var\(--font-size-display\,3rem\)\] {
     font-size: var(--font-size-display,3rem);
   }
@@ -3372,12 +3366,18 @@
   .text-balance {
     text-wrap: balance;
   }
+  .\[overflow-wrap\:anywhere\] {
+    overflow-wrap: anywhere;
+  }
   .break-words {
     overflow-wrap: break-word;
   }
   .break-all {
     word-break: break-all;
   }
+  .whitespace-normal {
+    white-space: normal;
+  }
   .whitespace-nowrap {
     white-space: nowrap;
   }
@@ -3429,9 +3429,6 @@
   .text-\[var\(--code-function\)\] {
     color: var(--code-function);
   }
-  .text-\[var\(--code-keyword\)\] {
-    color: var(--code-keyword);
-  }
   .text-\[var\(--code-number\)\] {
     color: var(--code-number);
   }
@@ -3517,11 +3514,14 @@
     }
   }
   .text-accent-foreground {
-    color: var(--color-accent-foreground);
+    color: hsl(var(--accent-foreground));
   }
   .text-amber-600 {
     color: var(--color-amber-600);
   }
+  .text-background {
+    color: hsl(var(--background));
+  }
   .text-blue-400 {
     color: var(--color-blue-400);
   }
@@ -3529,16 +3529,16 @@
     color: var(--color-blue-500);
   }
   .text-border {
-    color: var(--color-border);
+    color: hsl(var(--border));
   }
   .text-card-foreground {
-    color: var(--color-card-foreground);
+    color: hsl(var(--card-foreground));
   }
   .text-destructive {
-    color: var(--color-destructive);
+    color: hsl(var(--destructive));
   }
   .text-destructive-foreground {
-    color: var(--color-destructive-foreground);
+    color: hsl(var(--destructive-foreground));
   }
   .text-emerald-400 {
     color: var(--color-emerald-400);
@@ -3547,60 +3547,60 @@
     color: var(--color-emerald-500);
   }
   .text-foreground {
-    color: var(--color-foreground);
+    color: hsl(var(--foreground));
   }
   .text-foreground\/70 {
-    color: color-mix(in srgb, hsl(var(--foreground)) 70%, transparent);
+    color: hsl(var(--foreground));
     @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-foreground) 70%, transparent);
+      color: color-mix(in oklab, hsl(var(--foreground)) 70%, transparent);
     }
   }
   .text-foreground\/75 {
-    color: color-mix(in srgb, hsl(var(--foreground)) 75%, transparent);
+    color: hsl(var(--foreground));
     @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-foreground) 75%, transparent);
+      color: color-mix(in oklab, hsl(var(--foreground)) 75%, transparent);
     }
   }
   .text-foreground\/80 {
-    color: color-mix(in srgb, hsl(var(--foreground)) 80%, transparent);
+    color: hsl(var(--foreground));
     @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-foreground) 80%, transparent);
+      color: color-mix(in oklab, hsl(var(--foreground)) 80%, transparent);
     }
   }
   .text-green-400 {
     color: var(--color-green-400);
   }
   .text-muted-foreground {
-    color: var(--color-muted-foreground);
+    color: hsl(var(--muted-foreground));
   }
   .text-muted-foreground\/40 {
-    color: color-mix(in srgb, hsl(var(--muted-foreground)) 40%, transparent);
+    color: hsl(var(--muted-foreground));
     @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-muted-foreground) 40%, transparent);
+      color: color-mix(in oklab, hsl(var(--muted-foreground)) 40%, transparent);
     }
   }
   .text-muted-foreground\/50 {
-    color: color-mix(in srgb, hsl(var(--muted-foreground)) 50%, transparent);
+    color: hsl(var(--muted-foreground));
     @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-muted-foreground) 50%, transparent);
+      color: color-mix(in oklab, hsl(var(--muted-foreground)) 50%, transparent);
     }
   }
   .text-muted-foreground\/60 {
-    color: color-mix(in srgb, hsl(var(--muted-foreground)) 60%, transparent);
+    color: hsl(var(--muted-foreground));
     @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-muted-foreground) 60%, transparent);
+      color: color-mix(in oklab, hsl(var(--muted-foreground)) 60%, transparent);
     }
   }
   .text-muted-foreground\/70 {
-    color: color-mix(in srgb, hsl(var(--muted-foreground)) 70%, transparent);
+    color: hsl(var(--muted-foreground));
     @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-muted-foreground) 70%, transparent);
+      color: color-mix(in oklab, hsl(var(--muted-foreground)) 70%, transparent);
     }
   }
   .text-muted-foreground\/90 {
-    color: color-mix(in srgb, hsl(var(--muted-foreground)) 90%, transparent);
+    color: hsl(var(--muted-foreground));
     @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-muted-foreground) 90%, transparent);
+      color: color-mix(in oklab, hsl(var(--muted-foreground)) 90%, transparent);
     }
   }
   .text-neutral-400 {
@@ -3610,18 +3610,18 @@
     color: var(--color-orange-400);
   }
   .text-popover-foreground {
-    color: var(--color-popover-foreground);
+    color: hsl(var(--popover-foreground));
   }
   .text-primary {
-    color: var(--color-primary);
+    color: hsl(var(--primary));
   }
   .text-primary-foreground {
-    color: var(--color-primary-foreground);
+    color: hsl(var(--primary-foreground));
   }
   .text-primary\/70 {
-    color: color-mix(in srgb, hsl(var(--primary)) 70%, transparent);
+    color: hsl(var(--primary));
     @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-primary) 70%, transparent);
+      color: color-mix(in oklab, hsl(var(--primary)) 70%, transparent);
     }
   }
   .text-red-200 {
@@ -3631,7 +3631,7 @@
     color: var(--color-red-400);
   }
   .text-secondary-foreground {
-    color: var(--color-secondary-foreground);
+    color: hsl(var(--secondary-foreground));
   }
   .text-sky-400 {
     color: var(--color-sky-400);
@@ -3696,7 +3696,7 @@
     -moz-osx-font-smoothing: grayscale;
   }
   .accent-primary {
-    accent-color: var(--color-primary);
+    accent-color: hsl(var(--primary));
   }
   .opacity-0 {
     opacity: 0%;
@@ -3817,21 +3817,21 @@
     --tw-ring-color: var(--md3-outline-variant);
   }
   .ring-border {
-    --tw-ring-color: var(--color-border);
+    --tw-ring-color: hsl(var(--border));
   }
   .ring-card {
-    --tw-ring-color: var(--color-card);
+    --tw-ring-color: hsl(var(--card));
   }
   .ring-primary\/20 {
-    --tw-ring-color: color-mix(in srgb, hsl(var(--primary)) 20%, transparent);
+    --tw-ring-color: hsl(var(--primary));
     @supports (color: color-mix(in lab, red, red)) {
-      --tw-ring-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
+      --tw-ring-color: color-mix(in oklab, hsl(var(--primary)) 20%, transparent);
     }
   }
   .ring-primary\/25 {
-    --tw-ring-color: color-mix(in srgb, hsl(var(--primary)) 25%, transparent);
+    --tw-ring-color: hsl(var(--primary));
     @supports (color: color-mix(in lab, red, red)) {
-      --tw-ring-color: color-mix(in oklab, var(--color-primary) 25%, transparent);
+      --tw-ring-color: color-mix(in oklab, hsl(var(--primary)) 25%, transparent);
     }
   }
   .outline-hidden {
@@ -4012,37 +4012,37 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
     .group-hover\:border-primary\/40:is(:where(.group):hover *) {
-      border-color: color-mix(in srgb, hsl(var(--primary)) 40%, transparent);
+      border-color: hsl(var(--primary));
     }
     @supports (color: color-mix(in lab, red, red)) {
       .group-hover\:border-primary\/40:is(:where(.group):hover *) {
-        border-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
+        border-color: color-mix(in oklab, hsl(var(--primary)) 40%, transparent);
       }
     }
     .group-hover\:bg-primary\/20:is(:where(.group):hover *) {
-      background-color: color-mix(in srgb, hsl(var(--primary)) 20%, transparent);
+      background-color: hsl(var(--primary));
     }
     @supports (color: color-mix(in lab, red, red)) {
       .group-hover\:bg-primary\/20:is(:where(.group):hover *) {
-        background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
+        background-color: color-mix(in oklab, hsl(var(--primary)) 20%, transparent);
       }
     }
     .group-hover\:text-\[var\(--accent-text\)\]:is(:where(.group):hover *) {
       color: var(--accent-text);
     }
     .group-hover\:text-foreground:is(:where(.group):hover *) {
-      color: var(--color-foreground);
+      color: hsl(var(--foreground));
     }
     .group-hover\:text-foreground\/40:is(:where(.group):hover *) {
-      color: color-mix(in srgb, hsl(var(--foreground)) 40%, transparent);
+      color: hsl(var(--foreground));
     }
     @supports (color: color-mix(in lab, red, red)) {
       .group-hover\:text-foreground\/40:is(:where(.group):hover *) {
-        color: color-mix(in oklab, var(--color-foreground) 40%, transparent);
+        color: color-mix(in oklab, hsl(var(--foreground)) 40%, transparent);
       }
     }
     .group-hover\:text-primary:is(:where(.group):hover *) {
-      color: var(--color-primary);
+      color: hsl(var(--primary));
     }
     .group-hover\:opacity-100:is(:where(.group):hover *) {
       opacity: 100%;
@@ -4058,9 +4058,9 @@
     }
   }
   .group-focus-visible\:bg-primary\/30:is(:where(.group):focus-visible *) {
-    background-color: color-mix(in srgb, hsl(var(--primary)) 30%, transparent);
+    background-color: hsl(var(--primary));
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
+      background-color: color-mix(in oklab, hsl(var(--primary)) 30%, transparent);
     }
   }
   .peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled ~ *) {
@@ -4085,7 +4085,7 @@
     font-weight: var(--font-weight-medium);
   }
   .placeholder\:text-muted-foreground::placeholder {
-    color: var(--color-muted-foreground);
+    color: hsl(var(--muted-foreground));
   }
   .after\:absolute::after {
     content: var(--tw-content);
@@ -4109,7 +4109,7 @@
   }
   .after\:bg-primary::after {
     content: var(--tw-content);
-    background-color: var(--color-primary);
+    background-color: hsl(var(--primary));
   }
   .last\:border-0:last-child {
     border-style: var(--tw-border-style);
@@ -4143,27 +4143,27 @@
       border-color: var(--surface-danger-border);
     }
     .hover\:border-accent\/50:hover {
-      border-color: color-mix(in srgb, hsl(var(--accent)) 50%, transparent);
+      border-color: hsl(var(--accent));
     }
     @supports (color: color-mix(in lab, red, red)) {
       .hover\:border-accent\/50:hover {
-        border-color: color-mix(in oklab, var(--color-accent) 50%, transparent);
+        border-color: color-mix(in oklab, hsl(var(--accent)) 50%, transparent);
       }
     }
     .hover\:border-border\/80:hover {
-      border-color: color-mix(in srgb, hsl(var(--border)) 80%, transparent);
+      border-color: hsl(var(--border));
     }
     @supports (color: color-mix(in lab, red, red)) {
       .hover\:border-border\/80:hover {
-        border-color: color-mix(in oklab, var(--color-border) 80%, transparent);
+        border-color: color-mix(in oklab, hsl(var(--border)) 80%, transparent);
       }
     }
     .hover\:border-destructive\/30:hover {
-      border-color: color-mix(in srgb, hsl(var(--destructive)) 30%, transparent);
+      border-color: hsl(var(--destructive));
     }
     @supports (color: color-mix(in lab, red, red)) {
       .hover\:border-destructive\/30:hover {
-        border-color: color-mix(in oklab, var(--color-destructive) 30%, transparent);
+        border-color: color-mix(in oklab, hsl(var(--destructive)) 30%, transparent);
       }
     }
     .hover\:border-emerald-500\/30:hover {
@@ -4175,50 +4175,50 @@
       }
     }
     .hover\:border-foreground\/15:hover {
-      border-color: color-mix(in srgb, hsl(var(--foreground)) 15%, transparent);
+      border-color: hsl(var(--foreground));
     }
     @supports (color: color-mix(in lab, red, red)) {
       .hover\:border-foreground\/15:hover {
-        border-color: color-mix(in oklab, var(--color-foreground) 15%, transparent);
+        border-color: color-mix(in oklab, hsl(var(--foreground)) 15%, transparent);
       }
     }
     .hover\:border-foreground\/20:hover {
-      border-color: color-mix(in srgb, hsl(var(--foreground)) 20%, transparent);
+      border-color: hsl(var(--foreground));
     }
     @supports (color: color-mix(in lab, red, red)) {
       .hover\:border-foreground\/20:hover {
-        border-color: color-mix(in oklab, var(--color-foreground) 20%, transparent);
+        border-color: color-mix(in oklab, hsl(var(--foreground)) 20%, transparent);
       }
     }
     .hover\:border-primary:hover {
-      border-color: var(--color-primary);
+      border-color: hsl(var(--primary));
     }
     .hover\:border-primary\/20:hover {
-      border-color: color-mix(in srgb, hsl(var(--primary)) 20%, transparent);
+      border-color: hsl(var(--primary));
     }
     @supports (color: color-mix(in lab, red, red)) {
       .hover\:border-primary\/20:hover {
-        border-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
+        border-color: color-mix(in oklab, hsl(var(--primary)) 20%, transparent);
       }
     }
     .hover\:border-primary\/30:hover {
-      border-color: color-mix(in srgb, hsl(var(--primary)) 30%, transparent);
+      border-color: hsl(var(--primary));
     }
     @supports (color: color-mix(in lab, red, red)) {
       .hover\:border-primary\/30:hover {
-        border-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
+        border-color: color-mix(in oklab, hsl(var(--primary)) 30%, transparent);
       }
     }
     .hover\:border-primary\/50:hover {
-      border-color: color-mix(in srgb, hsl(var(--primary)) 50%, transparent);
+      border-color: hsl(var(--primary));
     }
     @supports (color: color-mix(in lab, red, red)) {
       .hover\:border-primary\/50:hover {
-        border-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
+        border-color: color-mix(in oklab, hsl(var(--primary)) 50%, transparent);
       }
     }
     .hover\:\!bg-primary:hover {
-      background-color: var(--color-primary) !important;
+      background-color: hsl(var(--primary)) !important;
     }
     .hover\:bg-\[var\(--accent-surface-soft\)\]:hover {
       background-color: var(--accent-surface-soft);
@@ -4256,42 +4256,42 @@
       background-color: var(--surface-success-border);
     }
     .hover\:bg-accent:hover {
-      background-color: var(--color-accent);
+      background-color: hsl(var(--accent));
     }
     .hover\:bg-accent\/30:hover {
-      background-color: color-mix(in srgb, hsl(var(--accent)) 30%, transparent);
+      background-color: hsl(var(--accent));
     }
     @supports (color: color-mix(in lab, red, red)) {
       .hover\:bg-accent\/30:hover {
-        background-color: color-mix(in oklab, var(--color-accent) 30%, transparent);
+        background-color: color-mix(in oklab, hsl(var(--accent)) 30%, transparent);
       }
     }
     .hover\:bg-accent\/40:hover {
-      background-color: color-mix(in srgb, hsl(var(--accent)) 40%, transparent);
+      background-color: hsl(var(--accent));
     }
     @supports (color: color-mix(in lab, red, red)) {
       .hover\:bg-accent\/40:hover {
-        background-color: color-mix(in oklab, var(--color-accent) 40%, transparent);
+        background-color: color-mix(in oklab, hsl(var(--accent)) 40%, transparent);
       }
     }
     .hover\:bg-accent\/45:hover {
-      background-color: color-mix(in srgb, hsl(var(--accent)) 45%, transparent);
+      background-color: hsl(var(--accent));
     }
     @supports (color: color-mix(in lab, red, red)) {
       .hover\:bg-accent\/45:hover {
-        background-color: color-mix(in oklab, var(--color-accent) 45%, transparent);
+        background-color: color-mix(in oklab, hsl(var(--accent)) 45%, transparent);
       }
     }
     .hover\:bg-accent\/50:hover {
-      background-color: color-mix(in srgb, hsl(var(--accent)) 50%, transparent);
+      background-color: hsl(var(--accent));
     }
     @supports (color: color-mix(in lab, red, red)) {
       .hover\:bg-accent\/50:hover {
-        background-color: color-mix(in oklab, var(--color-accent) 50%, transparent);
+        background-color: color-mix(in oklab, hsl(var(--accent)) 50%, transparent);
       }
     }
     .hover\:bg-background:hover {
-      background-color: var(--color-background);
+      background-color: hsl(var(--background));
     }
     .hover\:bg-black\/60:hover {
       background-color: color-mix(in srgb, #000 60%, transparent);
@@ -4310,27 +4310,27 @@
       }
     }
     .hover\:bg-destructive\/5:hover {
-      background-color: color-mix(in srgb, hsl(var(--destructive)) 5%, transparent);
+      background-color: hsl(var(--destructive));
     }
     @supports (color: color-mix(in lab, red, red)) {
       .hover\:bg-destructive\/5:hover {
-        background-color: color-mix(in oklab, var(--color-destructive) 5%, transparent);
+        background-color: color-mix(in oklab, hsl(var(--destructive)) 5%, transparent);
       }
     }
     .hover\:bg-destructive\/10:hover {
-      background-color: color-mix(in srgb, hsl(var(--destructive)) 10%, transparent);
+      background-color: hsl(var(--destructive));
     }
     @supports (color: color-mix(in lab, red, red)) {
       .hover\:bg-destructive\/10:hover {
-        background-color: color-mix(in oklab, var(--color-destructive) 10%, transparent);
+        background-color: color-mix(in oklab, hsl(var(--destructive)) 10%, transparent);
       }
     }
     .hover\:bg-destructive\/90:hover {
-      background-color: color-mix(in srgb, hsl(var(--destructive)) 90%, transparent);
+      background-color: hsl(var(--destructive));
     }
     @supports (color: color-mix(in lab, red, red)) {
       .hover\:bg-destructive\/90:hover {
-        background-color: color-mix(in oklab, var(--color-destructive) 90%, transparent);
+        background-color: color-mix(in oklab, hsl(var(--destructive)) 90%, transparent);
       }
     }
     .hover\:bg-emerald-500\/10:hover {
@@ -4358,49 +4358,49 @@
       }
     }
     .hover\:bg-muted:hover {
-      background-color: var(--color-muted);
+      background-color: hsl(var(--muted));
     }
     .hover\:bg-muted\/50:hover {
-      background-color: color-mix(in srgb, hsl(var(--muted)) 50%, transparent);
+      background-color: hsl(var(--muted));
     }
     @supports (color: color-mix(in lab, red, red)) {
       .hover\:bg-muted\/50:hover {
-        background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
+        background-color: color-mix(in oklab, hsl(var(--muted)) 50%, transparent);
       }
     }
     .hover\:bg-muted\/80:hover {
-      background-color: color-mix(in srgb, hsl(var(--muted)) 80%, transparent);
+      background-color: hsl(var(--muted));
     }
     @supports (color: color-mix(in lab, red, red)) {
       .hover\:bg-muted\/80:hover {
-        background-color: color-mix(in oklab, var(--color-muted) 80%, transparent);
+        background-color: color-mix(in oklab, hsl(var(--muted)) 80%, transparent);
       }
     }
     .hover\:bg-primary:hover {
-      background-color: var(--color-primary);
+      background-color: hsl(var(--primary));
     }
     .hover\:bg-primary\/15:hover {
-      background-color: color-mix(in srgb, hsl(var(--primary)) 15%, transparent);
+      background-color: hsl(var(--primary));
     }
     @supports (color: color-mix(in lab, red, red)) {
       .hover\:bg-primary\/15:hover {
-        background-color: color-mix(in oklab, var(--color-primary) 15%, transparent);
+        background-color: color-mix(in oklab, hsl(var(--primary)) 15%, transparent);
       }
     }
     .hover\:bg-primary\/20:hover {
-      background-color: color-mix(in srgb, hsl(var(--primary)) 20%, transparent);
+      background-color: hsl(var(--primary));
     }
     @supports (color: color-mix(in lab, red, red)) {
       .hover\:bg-primary\/20:hover {
-        background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
+        background-color: color-mix(in oklab, hsl(var(--primary)) 20%, transparent);
       }
     }
     .hover\:bg-primary\/90:hover {
-      background-color: color-mix(in srgb, hsl(var(--primary)) 90%, transparent);
+      background-color: hsl(var(--primary));
     }
     @supports (color: color-mix(in lab, red, red)) {
       .hover\:bg-primary\/90:hover {
-        background-color: color-mix(in oklab, var(--color-primary) 90%, transparent);
+        background-color: color-mix(in oklab, hsl(var(--primary)) 90%, transparent);
       }
     }
     .hover\:bg-red-600\/30:hover {
@@ -4415,13 +4415,13 @@
       background-color: var(--color-red-700);
     }
     .hover\:bg-surface-container:hover {
-      background-color: var(--color-surface-container);
+      background-color: var(--md3-surface-container);
     }
     .hover\:bg-surface-container-high:hover {
-      background-color: var(--color-surface-container-high);
+      background-color: var(--md3-surface-container-high);
     }
     .hover\:bg-surface-container-highest:hover {
-      background-color: var(--color-surface-container-highest);
+      background-color: var(--md3-surface-container-highest);
     }
     .hover\:bg-white\/5:hover {
       background-color: color-mix(in srgb, #fff 5%, transparent);
@@ -4452,37 +4452,37 @@
       color: var(--surface-danger-text);
     }
     .hover\:text-accent-foreground:hover {
-      color: var(--color-accent-foreground);
+      color: hsl(var(--accent-foreground));
     }
     .hover\:text-destructive:hover {
-      color: var(--color-destructive);
+      color: hsl(var(--destructive));
     }
     .hover\:text-foreground:hover {
-      color: var(--color-foreground);
+      color: hsl(var(--foreground));
     }
     .hover\:text-green-600:hover {
       color: var(--color-green-600);
     }
     .hover\:text-muted-foreground\/70:hover {
-      color: color-mix(in srgb, hsl(var(--muted-foreground)) 70%, transparent);
+      color: hsl(var(--muted-foreground));
     }
     @supports (color: color-mix(in lab, red, red)) {
       .hover\:text-muted-foreground\/70:hover {
-        color: color-mix(in oklab, var(--color-muted-foreground) 70%, transparent);
+        color: color-mix(in oklab, hsl(var(--muted-foreground)) 70%, transparent);
       }
     }
     .hover\:text-primary:hover {
-      color: var(--color-primary);
+      color: hsl(var(--primary));
     }
     .hover\:text-primary-foreground:hover {
-      color: var(--color-primary-foreground);
+      color: hsl(var(--primary-foreground));
     }
     .hover\:text-primary\/70:hover {
-      color: color-mix(in srgb, hsl(var(--primary)) 70%, transparent);
+      color: hsl(var(--primary));
     }
     @supports (color: color-mix(in lab, red, red)) {
       .hover\:text-primary\/70:hover {
-        color: color-mix(in oklab, var(--color-primary) 70%, transparent);
+        color: color-mix(in oklab, hsl(var(--primary)) 70%, transparent);
       }
     }
     .hover\:underline:hover {
@@ -4519,40 +4519,40 @@
     background-color: var(--accent-surface-strong);
   }
   .focus\:bg-accent:focus {
-    background-color: var(--color-accent);
+    background-color: hsl(var(--accent));
   }
   .focus\:bg-accent\/40:focus {
-    background-color: color-mix(in srgb, hsl(var(--accent)) 40%, transparent);
+    background-color: hsl(var(--accent));
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-accent) 40%, transparent);
+      background-color: color-mix(in oklab, hsl(var(--accent)) 40%, transparent);
     }
   }
   .focus\:bg-accent\/50:focus {
-    background-color: color-mix(in srgb, hsl(var(--accent)) 50%, transparent);
+    background-color: hsl(var(--accent));
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-accent) 50%, transparent);
+      background-color: color-mix(in oklab, hsl(var(--accent)) 50%, transparent);
     }
   }
   .focus\:bg-destructive\/10:focus {
-    background-color: color-mix(in srgb, hsl(var(--destructive)) 10%, transparent);
+    background-color: hsl(var(--destructive));
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-destructive) 10%, transparent);
+      background-color: color-mix(in oklab, hsl(var(--destructive)) 10%, transparent);
     }
   }
   .focus\:bg-muted\/50:focus {
-    background-color: color-mix(in srgb, hsl(var(--muted)) 50%, transparent);
+    background-color: hsl(var(--muted));
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
+      background-color: color-mix(in oklab, hsl(var(--muted)) 50%, transparent);
     }
   }
   .focus\:text-\[var\(--surface-danger-text\)\]:focus {
     color: var(--surface-danger-text);
   }
   .focus\:text-destructive:focus {
-    color: var(--color-destructive);
+    color: hsl(var(--destructive));
   }
   .focus\:text-foreground:focus {
-    color: var(--color-foreground);
+    color: hsl(var(--foreground));
   }
   .focus\:text-red-400:focus {
     color: var(--color-red-400);
@@ -4576,7 +4576,7 @@
     --tw-ring-color: var(--focus-halo-danger);
   }
   .focus\:ring-ring:focus {
-    --tw-ring-color: var(--color-ring);
+    --tw-ring-color: hsl(var(--ring));
   }
   .focus\:outline-hidden:focus {
     --tw-outline-style: none;
@@ -4594,13 +4594,13 @@
     pointer-events: auto;
   }
   .focus-visible\:bg-background:focus-visible {
-    background-color: var(--color-background);
+    background-color: hsl(var(--background));
   }
   .focus-visible\:bg-surface-container:focus-visible {
-    background-color: var(--color-surface-container);
+    background-color: var(--md3-surface-container);
   }
   .focus-visible\:text-foreground:focus-visible {
-    color: var(--color-foreground);
+    color: hsl(var(--foreground));
   }
   .focus-visible\:opacity-100:focus-visible {
     opacity: 100%;
@@ -4694,6 +4694,12 @@
   .has-\[\:is\(textarea\,select\,\[contenteditable\]\:not\(\[contenteditable\=false\]\)\,input\:not\(\[type\=button\]\,\[type\=submit\]\,\[type\=reset\]\,\[type\=image\]\,\[type\=checkbox\]\,\[type\=radio\]\,\[type\=range\]\,\[type\=color\]\,\[type\=file\]\)\)\:focus\]\:ring-\[var\(--focus-halo\)\]:has(:is(:is(textarea, select, [contenteditable]:not([contenteditable=false]), input:not([type=button], [type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range], [type=color], [type=file])):focus)) {
     --tw-ring-color: var(--focus-halo);
   }
+  .aria-disabled\:cursor-not-allowed[aria-disabled="true"] {
+    cursor: not-allowed;
+  }
+  .aria-disabled\:opacity-50[aria-disabled="true"] {
+    opacity: 50%;
+  }
   .data-\[disabled\]\:pointer-events-none[data-disabled] {
     pointer-events: none;
   }
@@ -4717,19 +4723,19 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
   .data-\[state\=active\]\:border-primary[data-state="active"] {
-    border-color: var(--color-primary);
+    border-color: hsl(var(--primary));
   }
   .data-\[state\=active\]\:bg-background[data-state="active"] {
-    background-color: var(--color-background);
+    background-color: hsl(var(--background));
   }
   .data-\[state\=active\]\:bg-primary[data-state="active"] {
-    background-color: var(--color-primary);
+    background-color: hsl(var(--primary));
   }
   .data-\[state\=active\]\:text-foreground[data-state="active"] {
-    color: var(--color-foreground);
+    color: hsl(var(--foreground));
   }
   .data-\[state\=active\]\:text-primary-foreground[data-state="active"] {
-    color: var(--color-primary-foreground);
+    color: hsl(var(--primary-foreground));
   }
   .data-\[state\=active\]\:shadow-sm[data-state="active"] {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
@@ -4746,7 +4752,7 @@
     background-color: var(--accent-surface-strong);
   }
   .data-\[state\=checked\]\:bg-primary[data-state="checked"] {
-    background-color: var(--color-primary);
+    background-color: hsl(var(--primary));
   }
   .data-\[state\=checked\]\:text-\[var\(--accent-text\)\][data-state="checked"] {
     color: var(--accent-text);
@@ -4755,14 +4761,14 @@
     color: var(--brand-primary);
   }
   .data-\[state\=checked\]\:text-foreground[data-state="checked"] {
-    color: var(--color-foreground);
+    color: hsl(var(--foreground));
   }
   .data-\[state\=inactive\]\:text-muted-foreground[data-state="inactive"] {
-    color: var(--color-muted-foreground);
+    color: hsl(var(--muted-foreground));
   }
   @media (hover: hover) {
     .data-\[state\=inactive\]\:hover\:bg-muted[data-state="inactive"]:hover {
-      background-color: var(--color-muted);
+      background-color: hsl(var(--muted));
     }
   }
   .data-\[state\=open\]\:rotate-180[data-state="open"] {
@@ -4775,33 +4781,33 @@
     border-color: var(--md3-outline-variant);
   }
   .data-\[state\=open\]\:border-primary[data-state="open"] {
-    border-color: var(--color-primary);
+    border-color: hsl(var(--primary));
   }
   .data-\[state\=open\]\:bg-\[var\(--accent-surface-strong\)\][data-state="open"] {
     background-color: var(--accent-surface-strong);
   }
   .data-\[state\=open\]\:bg-accent[data-state="open"] {
-    background-color: var(--color-accent);
+    background-color: hsl(var(--accent));
   }
   .data-\[state\=open\]\:bg-muted\/50[data-state="open"] {
-    background-color: color-mix(in srgb, hsl(var(--muted)) 50%, transparent);
+    background-color: hsl(var(--muted));
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
+      background-color: color-mix(in oklab, hsl(var(--muted)) 50%, transparent);
     }
   }
   .data-\[state\=open\]\:bg-surface-container-high[data-state="open"] {
-    background-color: var(--color-surface-container-high);
+    background-color: var(--md3-surface-container-high);
   }
   .data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
-    color: var(--color-muted-foreground);
+    color: hsl(var(--muted-foreground));
   }
   .data-\[state\=open\]\:opacity-100[data-state="open"] {
     opacity: 100%;
   }
   .data-\[state\=selected\]\:bg-muted\/50[data-state="selected"] {
-    background-color: color-mix(in srgb, hsl(var(--muted)) 50%, transparent);
+    background-color: hsl(var(--muted));
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
+      background-color: color-mix(in oklab, hsl(var(--muted)) 50%, transparent);
     }
   }
   .data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
@@ -4809,7 +4815,7 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
   .data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] {
-    background-color: var(--color-input);
+    background-color: hsl(var(--input));
   }
   @supports (display:grid) {
     .supports-\[display\:grid\]\:text-white\/50 {
@@ -4821,6 +4827,20 @@
       }
     }
   }
+  @media (prefers-reduced-motion: reduce) {
+    .motion-reduce\:animate-none {
+      animation: none;
+    }
+    .motion-reduce\:transition-none {
+      transition-property: none;
+    }
+    .motion-reduce\:active\:scale-100:active {
+      --tw-scale-x: 100%;
+      --tw-scale-y: 100%;
+      --tw-scale-z: 100%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+  }
   @media (width < 359px) {
     .max-\[359px\]\:w-full {
       width: 100%;
@@ -4897,9 +4917,6 @@
     .sm\:items-center {
       align-items: center;
     }
-    .sm\:items-start {
-      align-items: flex-start;
-    }
     .sm\:justify-between {
       justify-content: space-between;
     }
@@ -4909,6 +4926,9 @@
     .sm\:gap-2 {
       gap: calc(var(--spacing) * 2);
     }
+    .sm\:gap-3 {
+      gap: calc(var(--spacing) * 3);
+    }
     .sm\:gap-x-2 {
       column-gap: calc(var(--spacing) * 2);
     }
@@ -4934,17 +4954,14 @@
     .sm\:px-4 {
       padding-inline: calc(var(--spacing) * 4);
     }
-    .sm\:px-5 {
-      padding-inline: calc(var(--spacing) * 5);
-    }
     .sm\:px-6 {
       padding-inline: calc(var(--spacing) * 6);
     }
     .sm\:py-1 {
       padding-block: var(--spacing);
     }
-    .sm\:py-4 {
-      padding-block: calc(var(--spacing) * 4);
+    .sm\:pr-6 {
+      padding-right: calc(var(--spacing) * 6);
     }
     .sm\:text-left {
       text-align: left;
@@ -4953,9 +4970,9 @@
       font-size: var(--text-5xl);
       line-height: var(--tw-leading, var(--text-5xl--line-height));
     }
-    .sm\:break-normal {
-      overflow-wrap: normal;
-      word-break: normal;
+    .sm\:text-sm {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
     }
     .sm\:opacity-0 {
       opacity: 0%;
@@ -4985,6 +5002,9 @@
     .md\:hidden {
       display: none;
     }
+    .md\:table-cell {
+      display: table-cell;
+    }
     .md\:grid-cols-2 {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
@@ -5004,11 +5024,11 @@
       justify-content: space-between;
     }
     .md\:bg-card\/60 {
-      background-color: color-mix(in srgb, hsl(var(--card)) 60%, transparent);
+      background-color: hsl(var(--card));
     }
     @supports (color: color-mix(in lab, red, red)) {
       .md\:bg-card\/60 {
-        background-color: color-mix(in oklab, var(--color-card) 60%, transparent);
+        background-color: color-mix(in oklab, hsl(var(--card)) 60%, transparent);
       }
     }
   }
@@ -5058,6 +5078,9 @@
     .lg\:p-0 {
       padding: 0px;
     }
+    .lg\:px-0 {
+      padding-inline: 0px;
+    }
     .lg\:px-8 {
       padding-inline: calc(var(--spacing) * 8);
     }
@@ -5171,19 +5194,19 @@
     height: calc(var(--spacing) * 1.5);
   }
   .\[\&\:\:-moz-range-track\]\:rounded-full::-moz-range-track {
-    border-radius: calc(infinity * 1px);
+    border-radius: var(--radius-full);
   }
   .\[\&\:\:-moz-range-track\]\:bg-border::-moz-range-track {
-    background-color: var(--color-border);
+    background-color: hsl(var(--border));
   }
   .\[\&\:\:-webkit-slider-runnable-track\]\:h-1\.5::-webkit-slider-runnable-track {
     height: calc(var(--spacing) * 1.5);
   }
   .\[\&\:\:-webkit-slider-runnable-track\]\:rounded-full::-webkit-slider-runnable-track {
-    border-radius: calc(infinity * 1px);
+    border-radius: var(--radius-full);
   }
   .\[\&\:\:-webkit-slider-runnable-track\]\:bg-border::-webkit-slider-runnable-track {
-    background-color: var(--color-border);
+    background-color: hsl(var(--border));
   }
   .\[\&\:\:-webkit-slider-thumb\]\:-mt-\[5px\]::-webkit-slider-thumb {
     margin-top: calc(5px * -1);
@@ -5198,17 +5221,17 @@
     appearance: none;
   }
   .\[\&\:\:-webkit-slider-thumb\]\:rounded-full::-webkit-slider-thumb {
-    border-radius: calc(infinity * 1px);
+    border-radius: var(--radius-full);
   }
   .\[\&\:\:-webkit-slider-thumb\]\:border-2::-webkit-slider-thumb {
     border-style: var(--tw-border-style);
     border-width: 2px;
   }
   .\[\&\:\:-webkit-slider-thumb\]\:border-primary-foreground::-webkit-slider-thumb {
-    border-color: var(--color-primary-foreground);
+    border-color: hsl(var(--primary-foreground));
   }
   .\[\&\:\:-webkit-slider-thumb\]\:bg-primary::-webkit-slider-thumb {
-    background-color: var(--color-primary);
+    background-color: hsl(var(--primary));
   }
   .\[\&\:\:-webkit-slider-thumb\]\:shadow-sm::-webkit-slider-thumb {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
@@ -5217,6 +5240,9 @@
   .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
     padding-right: 0px;
   }
+  .\[\&\:not\(\:first-child\)\]\:pt-0:not(:first-child) {
+    padding-top: 0px;
+  }
   @media (width < 40rem) {
     .max-sm\:\[\&\:not\(\:nth-child\(2n\+1\)\)\]\:border-l:not(:nth-child(2n+1)) {
       border-left-style: var(--tw-border-style);
@@ -5235,6 +5261,12 @@
       border-left-width: 1px;
     }
   }
+  .\[\&\>\*\]\:max-w-full > * {
+    max-width: 100%;
+  }
+  .\[\&\>\*\]\:min-w-0 > * {
+    min-width: 0px;
+  }
   .\[\&\>span\]\:line-clamp-1 > span {
     overflow: hidden;
     display: -webkit-box;
@@ -5252,8 +5284,19 @@
 }
 :root,
 [data-sandbox-ui],
+[data-sandbox-theme="vault"],
+[data-sandbox-theme="dawn"],
 [data-theme="dark"],
+[data-theme="light"],
+[data-theme="aubergine"],
+[data-theme="aubergine-light"],
+[data-theme="arena"],
+[data-theme="arena-light"],
+[data-theme="tangle-dark"],
+[data-theme="tangle-light"],
+.light,
 .dark {
+  color-scheme: dark;
   --md3-surface: #161616;
   --md3-surface-dim: #101010;
   --md3-surface-bright: #3b3b3b;
@@ -5278,6 +5321,7 @@
   --md3-on-secondary: #E8E5FF;
   --md3-on-secondary-container: #E8E5FF;
   --md3-tertiary: #10B981;
+  --md3-tertiary-container: var(--surface-success-bg);
   --md3-outline: #8e8e8e;
   --md3-outline-variant: #4c4c4c;
   --md3-error: #ff5277;
@@ -5487,6 +5531,7 @@
   --tool-card-px: 0.75rem;
   --tool-card-py: 0.5rem;
   --tool-icon-size: 1.75rem;
+  --code-header-bg: hsl(var(--hsl-background));
   --syntax-comment: #8b8fbc;
   --syntax-keyword: #A78FFF;
   --syntax-string: #10b981;
@@ -5496,6 +5541,25 @@
   --syntax-error: #FF4D6D;
   --syntax-variable: #C4C0D8;
   --syntax-foreground: #E8E6F6;
+  --duration-instant: 90ms;
+  --duration-fast: 150ms;
+  --duration-base: 240ms;
+  --duration-slow: 360ms;
+  --duration-stream: 420ms;
+  --duration-arrive: 600ms;
+  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --ease-entrance: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
+  --ease-expo: cubic-bezier(0.23, 1, 0.32, 1);
+  --motion-control: var(--duration-fast) var(--ease-standard);
+  --motion-surface: var(--duration-base) var(--ease-entrance);
+  --motion-dismiss: var(--duration-instant) var(--ease-exit);
+  --motion-stream: var(--duration-stream) var(--ease-expo);
+  --motion-arrive: var(--duration-arrive) var(--ease-expo);
+  --stagger-step: 50ms;
+  --stagger-index: 0;
+  --arrive-distance: 8px;
+  --stream-blur: 4px;
   --transition-fast: 0.1s ease;
   --transition-default: 0.16s ease;
   --transition-medium: 0.24s ease;
@@ -5503,9 +5567,27 @@
   --font-display: "Inter", "Geist", sans-serif;
   --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
 }
-[data-sandbox-theme="vault"],
+[data-sandbox-theme="vault"]:where(:not(.dark)),
+[data-sandbox-theme="dawn"]:where(:not(.dark)),
 [data-theme="light"],
+[data-theme="aubergine-light"],
+[data-theme="arena-light"],
+[data-theme="tangle-light"],
 .light {
+  color-scheme: light;
+  --code-header-bg: hsl(var(--hsl-muted));
+  @supports (color: color-mix(in lab, red, red)) {
+    --code-header-bg: color-mix(in srgb, hsl(var(--hsl-muted)) 50%, transparent);
+  }
+  --syntax-foreground: #24292f;
+  --syntax-comment: #57606a;
+  --syntax-keyword: #6d28d9;
+  --syntax-string: #047857;
+  --syntax-function: #1d4ed8;
+  --syntax-number: #92400e;
+  --syntax-meta: #7c3aed;
+  --syntax-variable: #24292f;
+  --syntax-error: #b91c1c;
   --md3-surface: #eaeaea;
   --md3-surface-dim: #dadada;
   --md3-surface-bright: #ffffff;
@@ -5712,7 +5794,8 @@
   --chart-tier-a: #8b87f0;
   --chart-tier-s: #b1a9ff;
 }
-[data-sandbox-theme="vault"],
+[data-sandbox-theme="vault"]:where(:not(.dark)),
+[data-sandbox-theme="dawn"]:where(:not(.dark)),
 [data-theme="light"],
 .light,
 [data-theme$="-light"] {
@@ -5722,26 +5805,61 @@
   --chart-tier-a: #5b5bd6;
   --chart-tier-s: #272962;
 }
+@media (prefers-reduced-motion: reduce) {
+  :root,
+  .dark,
+  .light,
+  [data-sandbox-ui],
+  [data-sandbox-theme],
+  [data-theme] {
+    --duration-instant: 0ms;
+    --duration-fast: 0ms;
+    --duration-base: 0ms;
+    --duration-slow: 0ms;
+    --duration-stream: 0ms;
+    --duration-arrive: 0ms;
+    --stagger-step: 0ms;
+    --motion-control: var(--duration-fast) var(--ease-standard);
+    --motion-surface: var(--duration-base) var(--ease-entrance);
+    --motion-dismiss: var(--duration-instant) var(--ease-exit);
+    --motion-stream: var(--duration-stream) var(--ease-expo);
+    --motion-arrive: var(--duration-arrive) var(--ease-expo);
+  }
+}
+:root,
+.dark,
+.light,
+[data-sandbox-ui],
+[data-sandbox-theme],
 [data-theme] {
-  --color-background: hsl(var(--hsl-background));
-  --color-foreground: hsl(var(--hsl-foreground));
-  --color-card: hsl(var(--hsl-card));
-  --color-card-foreground: hsl(var(--hsl-card-foreground));
-  --color-popover: hsl(var(--hsl-popover));
-  --color-popover-foreground: hsl(var(--hsl-popover-foreground));
-  --color-primary: hsl(var(--hsl-primary));
-  --color-primary-foreground: hsl(var(--hsl-primary-foreground));
-  --color-secondary: hsl(var(--hsl-secondary));
-  --color-secondary-foreground: hsl(var(--hsl-secondary-foreground));
-  --color-muted: hsl(var(--hsl-muted));
-  --color-muted-foreground: hsl(var(--hsl-muted-foreground));
-  --color-accent: hsl(var(--hsl-accent));
-  --color-accent-foreground: hsl(var(--hsl-accent-foreground));
-  --color-destructive: hsl(var(--hsl-destructive));
-  --color-destructive-foreground: hsl(var(--hsl-destructive-foreground));
-  --color-border: hsl(var(--hsl-border));
-  --color-input: hsl(var(--hsl-muted-foreground));
-  --color-ring: hsl(var(--hsl-ring));
+  --text-display: var(--font-size-display);
+  --text-hero: var(--font-size-hero);
+  --text-page: var(--font-size-3xl);
+  --text-section: var(--font-size-xl);
+  --text-eyebrow: var(--font-size-sm);
+  --color-depth-1: var(--depth-1);
+  --color-depth-2: var(--depth-2);
+  --color-depth-3: var(--depth-3);
+  --color-depth-4: var(--depth-4);
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
   --color-surface-container-lowest: var(--md3-surface-container-lowest);
   --color-surface-container-low: var(--md3-surface-container-low);
   --color-surface-container: var(--md3-surface-container);
@@ -5754,37 +5872,9 @@
 [data-theme="aubergine-light"],
 [data-theme="arena-light"],
 [data-theme="tangle-light"] {
-  --surface-success-bg: #ecfdf5;
-  --surface-success-border: #a7f3d0;
-  --surface-success-text: #047857;
-  --surface-warning-bg: #fffbeb;
-  --surface-warning-border: #fde68a;
-  --surface-warning-text: #ab4f09;
-  --surface-danger-bg: #fff1f2;
-  --surface-danger-border: #fecdd3;
-  --surface-danger-text: #b91c1c;
-  --surface-info-bg: #f0f9ff;
-  --surface-info-border: #bae6fd;
-  --surface-info-text: #0369a1;
-  --hsl-destructive: 0 72% 41%;
-  --hsl-destructive-foreground: 0 0% 100%;
   --hsl-secondary-foreground: 0 0% 10%;
   --surface-neutral-text: #4b5563;
 }
-[data-theme="light"],
-[data-theme="aubergine-light"],
-[data-theme="arena-light"],
-[data-theme="tangle-light"] {
-  --syntax-foreground: #24292f;
-  --syntax-comment: #57606a;
-  --syntax-keyword: #6d28d9;
-  --syntax-string: #047857;
-  --syntax-function: #1d4ed8;
-  --syntax-number: #92400e;
-  --syntax-meta: #7c3aed;
-  --syntax-variable: #24292f;
-  --syntax-error: #b91c1c;
-}
 [data-theme="aubergine"] {
   --hsl-background: 258 44% 12%;
   --hsl-foreground: 258 50% 97%;