@vireo-ai/trellis-ui 0.1.0 → 0.1.2

package/trellis_ui/static/trellis_ui/css/styles.css

@@ -6,6 +6,7 @@
     --font-sans: Inter var, Lexend, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
     --color-red-600: oklch(57.7% 0.245 27.325);
+    --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
     --container-xs: 20rem;
@@ -34,6 +35,7 @@
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
+    --tracking-normal: 0em;
     --tracking-wide: 0.025em;
     --animate-spin: spin 1s linear infinite;
     --default-transition-duration: 150ms;
@@ -47,7 +49,9 @@
     --spacing-4: 1rem;
     --spacing-5: 1.25rem;
     --spacing-6: 1.5rem;
+    --spacing-7: 1.75rem;
     --spacing-8: 2rem;
+    --spacing-9: 2.25rem;
     --spacing-10: 2.5rem;
     --spacing-12: 3rem;
     --spacing-popover: var(--ui-popover-padding);
@@ -65,22 +69,34 @@
     --radius-2: 2px;
     --radius-3: 4px;
     --radius-4: 6px;
+    --radius-5: 8px;
+    --radius-6: 12px;
     --radius-full: 9999px;
-    --radius-control: var(--ui-control-radius);
     --radius-scrollbar-thumb: var(--ui-scrollbar-thumb-radius);
     --spacing-control-xs: 1.25rem;
     --spacing-control-sm: 1.5rem;
     --spacing-control-md: 1.75rem;
     --spacing-control-lg: 2rem;
     --spacing-control-xlg: 2.25rem;
+    --color-black-a1: rgb(0 0 0 / 0.04);
+    --color-black-a2: rgb(0 0 0 / 0.08);
+    --color-black-a3: rgb(0 0 0 / 0.12);
+    --color-black-a4: rgb(0 0 0 / 0.18);
+    --color-black-a5: rgb(0 0 0 / 0.28);
+    --color-black-a6: rgb(0 0 0 / 0.40);
     --shadow-border: var(--ui-shadow-border);
     --shadow-border-hover: var(--ui-shadow-border-hover);
-    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.04);
+    --shadow-1: var(--ui-shadow-1);
+    --shadow-2: var(--ui-shadow-2);
+    --shadow-3: var(--ui-shadow-3);
+    --shadow-4: var(--ui-shadow-4);
+    --shadow-5: var(--ui-shadow-5);
+    --shadow-6: var(--ui-shadow-6);
     --shadow-popover: var(--ui-popover-shadow);
-    --shadow-panel: var(--ui-panel-shadow);
-    --shadow-inset: inset 0 1px 1px rgb(0 0 0 / 0.04);
+    --shadow-modal: var(--ui-modal-shadow);
     --shadow-control: var(--ui-control-shadow);
     --shadow-focus: 0 0 0 3px var(--color-focus-a4);
+    --shadow-danger-focus: var(--shadow-control), 0 0 0 3px var(--color-danger-a4);
     --container-reading: 42rem;
     --z-index-popover: 50;
     --z-index-dialog: 60;
@@ -89,6 +105,8 @@
     --color-base-2: #f9f9fb;
     --color-base-3: #f0f0f3;
     --color-base-4: #e8e8ec;
+    --color-base-5: #e0e1e6;
+    --color-base-6: #d9d9e0;
     --color-base-9: #8b8d98;
     --color-base-10: #80838d;
     --color-base-11: #60646c;
@@ -101,8 +119,11 @@
     --color-base-a7: #00062e32;
     --color-accent-8: #5eb1ef;
     --color-accent-9: #0090ff;
+    --color-accent-10: #0588f0;
     --color-accent-11: #0d74ce;
     --color-accent-12: #113264;
+    --color-accent-a3: #008ff519;
+    --color-accent-a4: #009eff2a;
     --color-danger-3: #feebec;
     --color-danger-4: #ffdbdc;
     --color-danger-7: #f4a9aa;
@@ -129,13 +150,30 @@
     --color-warning-11: #ab6400;
     --color-warning-12: #4f3422;
     --color-app: var(--color-base-1);
-    --color-app-subtle: var(--color-base-2);
-    --color-surface: #ffffff;
-    --color-surface-muted: var(--color-base-2);
-    --color-surface-raised: #ffffff;
+    --color-chrome: var(--color-base-2);
+    --color-chrome-alpha: color-mix(in srgb, #f9f9fb 86%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --color-chrome-alpha: color-mix(in srgb, var(--color-chrome) 86%, transparent);
+    }
+    --color-surface-subtle: var(--color-base-2);
+    --color-surface-panel: var(--color-base-1);
+    --color-surface-panel-alpha: color-mix(in srgb, #fcfcfd 88%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --color-surface-panel-alpha: color-mix(in srgb, var(--color-surface-panel) 88%, transparent);
+    }
+    --color-surface-raised: var(--color-base-1);
+    --color-surface-overlay: var(--color-base-1);
+    --color-surface-overlay-alpha: color-mix(in srgb, #fcfcfd 92%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --color-surface-overlay-alpha: color-mix(in srgb, var(--color-surface-overlay) 92%, transparent);
+    }
+    --color-surface-accent: var(--color-accent-9);
+    --color-surface-accent-fg: var(--color-accent-contrast);
+    --color-surface-inverse: var(--color-base-12);
+    --color-surface-inverse-fg: var(--color-base-1);
     --color-foreground: var(--color-base-12);
     --color-foreground-muted: var(--color-base-11);
-    --color-foreground-subtle: var(--color-base-10);
+    --color-foreground-subtle: var(--color-base-11);
     --color-border: var(--color-base-a5);
     --color-border-interactive: var(--color-base-a6);
     --color-control: var(--ui-control-bg);
@@ -158,11 +196,11 @@
     --color-accent-contrast: white;
     --color-accent-surface: #0090ff;
     @supports (color: color-mix(in lab, red, red)) {
-      --color-accent-surface: color-mix(in srgb, var(--color-accent-9) var(--ui-accent-strength), var(--color-surface));
+      --color-accent-surface: color-mix(in srgb, var(--color-accent-9) var(--ui-accent-strength), var(--color-surface-panel));
     }
     --color-accent-surface-hover: #0090ff;
     @supports (color: color-mix(in lab, red, red)) {
-      --color-accent-surface-hover: color-mix(in srgb, var(--color-accent-9) var(--ui-accent-hover-strength), var(--color-surface));
+      --color-accent-surface-hover: color-mix(in srgb, var(--color-accent-9) var(--ui-accent-hover-strength), var(--color-surface-panel));
     }
     --color-accent-border: #0090ff;
     @supports (color: color-mix(in lab, red, red)) {
@@ -188,6 +226,7 @@
     --color-popover-fg: var(--ui-popover-fg);
     --color-popover-border: var(--ui-popover-border);
     --color-toast: var(--ui-toast-bg);
+    --color-menu-item-hover: var(--ui-menu-item-bg-hover);
     --color-menu-item-fg: var(--ui-menu-item-fg);
     --color-menu-item-muted: var(--ui-menu-item-fg-muted);
     --color-menu-item-danger-hover: var(--ui-menu-item-danger-bg-hover);
@@ -519,18 +558,96 @@
   .m-0 {
     margin: var(--spacing-0);
   }
+  .m-1 {
+    margin: var(--spacing-1);
+  }
+  .m-2 {
+    margin: var(--spacing-2);
+  }
+  .m-3 {
+    margin: var(--spacing-3);
+  }
+  .m-4 {
+    margin: var(--spacing-4);
+  }
+  .m-5 {
+    margin: var(--spacing-5);
+  }
+  .m-6 {
+    margin: var(--spacing-6);
+  }
+  .m-7 {
+    margin: var(--spacing-7);
+  }
+  .m-8 {
+    margin: var(--spacing-8);
+  }
+  .m-9 {
+    margin: var(--spacing-9);
+  }
   .m-auto {
     margin: auto;
   }
   .-mx-popover {
     margin-inline: calc(var(--spacing-popover) * -1);
   }
+  .mx-1 {
+    margin-inline: var(--spacing-1);
+  }
+  .mx-2 {
+    margin-inline: var(--spacing-2);
+  }
+  .mx-3 {
+    margin-inline: var(--spacing-3);
+  }
+  .mx-4 {
+    margin-inline: var(--spacing-4);
+  }
+  .mx-5 {
+    margin-inline: var(--spacing-5);
+  }
+  .mx-6 {
+    margin-inline: var(--spacing-6);
+  }
+  .mx-7 {
+    margin-inline: var(--spacing-7);
+  }
+  .mx-8 {
+    margin-inline: var(--spacing-8);
+  }
+  .mx-9 {
+    margin-inline: var(--spacing-9);
+  }
   .mx-auto {
     margin-inline: auto;
   }
+  .my-1 {
+    margin-block: var(--spacing-1);
+  }
   .my-2 {
     margin-block: var(--spacing-2);
   }
+  .my-3 {
+    margin-block: var(--spacing-3);
+  }
+  .my-4 {
+    margin-block: var(--spacing-4);
+  }
+  .my-5 {
+    margin-block: var(--spacing-5);
+  }
+  .my-6 {
+    margin-block: var(--spacing-6);
+  }
+  .my-7 {
+    margin-block: var(--spacing-7);
+  }
+  .my-8 {
+    margin-block: var(--spacing-8);
+  }
+  .my-9 {
+    margin-block: var(--spacing-9);
+  }
   .my-popover {
     margin-block: var(--spacing-popover);
   }
@@ -546,6 +663,9 @@
   .mt-1 {
     margin-top: var(--spacing-1);
   }
+  .mt-2 {
+    margin-top: var(--spacing-2);
+  }
   .-mr-1 {
     margin-right: calc(var(--spacing-1) * -1);
   }
@@ -573,6 +693,9 @@
   .mb-0 {
     margin-bottom: var(--spacing-0);
   }
+  .mb-4 {
+    margin-bottom: var(--spacing-4);
+  }
   .-ml-1\.5 {
     margin-left: calc(var(--spacing) * -1.5);
   }
@@ -684,8 +807,8 @@
     height: var(--spacing-8);
   }
   .size-9 {
-    width: calc(var(--spacing) * 9);
-    height: calc(var(--spacing) * 9);
+    width: var(--spacing-9);
+    height: var(--spacing-9);
   }
   .size-12 {
     width: var(--spacing-12);
@@ -753,7 +876,7 @@
     height: var(--spacing-6);
   }
   .h-7 {
-    height: calc(var(--spacing) * 7);
+    height: var(--spacing-7);
   }
   .h-36 {
     height: calc(var(--spacing) * 36);
@@ -770,12 +893,15 @@
   .h-72 {
     height: calc(var(--spacing) * 72);
   }
+  .h-80 {
+    height: calc(var(--spacing) * 80);
+  }
+  .h-96 {
+    height: calc(var(--spacing) * 96);
+  }
   .h-\[24rem\] {
     height: 24rem;
   }
-  .h-\[28rem\] {
-    height: 28rem;
-  }
   .h-\[30rem\] {
     height: 30rem;
   }
@@ -906,10 +1032,10 @@
     width: var(--spacing-6);
   }
   .w-7 {
-    width: calc(var(--spacing) * 7);
+    width: var(--spacing-7);
   }
   .w-9 {
-    width: calc(var(--spacing) * 9);
+    width: var(--spacing-9);
   }
   .w-10 {
     width: var(--spacing-10);
@@ -926,6 +1052,9 @@
   .w-36 {
     width: calc(var(--spacing) * 36);
   }
+  .w-56 {
+    width: calc(var(--spacing) * 56);
+  }
   .w-80 {
     width: calc(var(--spacing) * 80);
   }
@@ -953,6 +1082,9 @@
   .w-control-xs {
     width: var(--spacing-control-xs);
   }
+  .w-fit {
+    width: fit-content;
+  }
   .w-full {
     width: 100%;
   }
@@ -1046,6 +1178,9 @@
   .flex-1 {
     flex: 1;
   }
+  .flex-none {
+    flex: none;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
@@ -1141,12 +1276,6 @@
   .grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
-  .grid-cols-\[1fr_auto\] {
-    grid-template-columns: 1fr auto;
-  }
-  .grid-cols-\[auto_1fr_auto\] {
-    grid-template-columns: auto 1fr auto;
-  }
   .grid-cols-\[auto_minmax\(0\,1fr\)\] {
     grid-template-columns: auto minmax(0,1fr);
   }
@@ -1159,6 +1288,9 @@
   .grid-cols-\[minmax\(0\,1fr\)_auto\] {
     grid-template-columns: minmax(0,1fr) auto;
   }
+  .grid-rows-\[auto_auto_minmax\(0\,1fr\)_auto\] {
+    grid-template-rows: auto auto minmax(0,1fr) auto;
+  }
   .grid-rows-\[auto_minmax\(0\,1fr\)_auto\] {
     grid-template-rows: auto minmax(0,1fr) auto;
   }
@@ -1246,27 +1378,88 @@
   .gap-6 {
     gap: var(--spacing-6);
   }
+  .gap-7 {
+    gap: var(--spacing-7);
+  }
   .gap-8 {
     gap: var(--spacing-8);
   }
+  .gap-9 {
+    gap: var(--spacing-9);
+  }
   .gap-control {
     gap: var(--spacing-control);
   }
+  .space-y-16 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 16) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 16) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .gap-x-1 {
+    column-gap: var(--spacing-1);
+  }
   .gap-x-1\.5 {
     column-gap: calc(var(--spacing) * 1.5);
   }
+  .gap-x-2 {
+    column-gap: var(--spacing-2);
+  }
   .gap-x-3 {
     column-gap: var(--spacing-3);
   }
+  .gap-x-4 {
+    column-gap: var(--spacing-4);
+  }
+  .gap-x-5 {
+    column-gap: var(--spacing-5);
+  }
+  .gap-x-6 {
+    column-gap: var(--spacing-6);
+  }
+  .gap-x-7 {
+    column-gap: var(--spacing-7);
+  }
+  .gap-x-8 {
+    column-gap: var(--spacing-8);
+  }
+  .gap-x-9 {
+    column-gap: var(--spacing-9);
+  }
   .gap-y-1 {
     row-gap: var(--spacing-1);
   }
   .gap-y-2 {
     row-gap: var(--spacing-2);
   }
+  .gap-y-3 {
+    row-gap: var(--spacing-3);
+  }
+  .gap-y-4 {
+    row-gap: var(--spacing-4);
+  }
+  .gap-y-5 {
+    row-gap: var(--spacing-5);
+  }
+  .gap-y-6 {
+    row-gap: var(--spacing-6);
+  }
+  .gap-y-7 {
+    row-gap: var(--spacing-7);
+  }
+  .gap-y-8 {
+    row-gap: var(--spacing-8);
+  }
+  .gap-y-9 {
+    row-gap: var(--spacing-9);
+  }
   .self-center {
     align-self: center;
   }
+  .self-end {
+    align-self: flex-end;
+  }
   .self-start {
     align-self: flex-start;
   }
@@ -1320,8 +1513,11 @@
   .rounded-4 {
     border-radius: var(--radius-4);
   }
-  .rounded-control {
-    border-radius: var(--radius-control);
+  .rounded-5 {
+    border-radius: var(--radius-5);
+  }
+  .rounded-6 {
+    border-radius: var(--radius-6);
   }
   .rounded-full {
     border-radius: var(--radius-full);
@@ -1332,10 +1528,6 @@
   .rounded-scrollbar-thumb {
     border-radius: var(--radius-scrollbar-thumb);
   }
-  .rounded-t-none {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
   .rounded-l-none {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
@@ -1344,10 +1536,6 @@
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
-  .rounded-b-none {
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -1412,6 +1600,12 @@
   .border-border-interactive {
     border-color: var(--color-border-interactive);
   }
+  .border-border\/60 {
+    border-color: color-mix(in srgb, #0009321f 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-border) 60%, transparent);
+    }
+  }
   .border-control-border {
     border-color: var(--color-control-border);
   }
@@ -1430,6 +1624,9 @@
   .border-warning-border {
     border-color: var(--color-warning-border);
   }
+  .bg-accent-9 {
+    background-color: var(--color-accent-9);
+  }
   .bg-accent-solid {
     background-color: var(--color-accent-solid);
   }
@@ -1439,9 +1636,6 @@
   .bg-app {
     background-color: var(--color-app);
   }
-  .bg-app-subtle {
-    background-color: var(--color-app-subtle);
-  }
   .bg-base-9 {
     background-color: var(--color-base-9);
   }
@@ -1466,6 +1660,12 @@
   .bg-border-interactive {
     background-color: var(--color-border-interactive);
   }
+  .bg-chrome {
+    background-color: var(--color-chrome);
+  }
+  .bg-chrome-alpha {
+    background-color: var(--color-chrome-alpha);
+  }
   .bg-control {
     background-color: var(--color-control);
   }
@@ -1475,6 +1675,12 @@
   .bg-current {
     background-color: currentcolor;
   }
+  .bg-current\/10 {
+    background-color: currentcolor;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, currentcolor 10%, transparent);
+    }
+  }
   .bg-danger-solid {
     background-color: var(--color-danger-solid);
   }
@@ -1499,21 +1705,39 @@
   .bg-scrollbar-thumb {
     background-color: var(--color-scrollbar-thumb);
   }
+  .bg-success-9 {
+    background-color: var(--color-success-9);
+  }
   .bg-success-solid {
     background-color: var(--color-success-solid);
   }
   .bg-success-surface {
     background-color: var(--color-success-surface);
   }
-  .bg-surface {
-    background-color: var(--color-surface);
+  .bg-surface-accent {
+    background-color: var(--color-surface-accent);
+  }
+  .bg-surface-inverse {
+    background-color: var(--color-surface-inverse);
   }
-  .bg-surface-muted {
-    background-color: var(--color-surface-muted);
+  .bg-surface-overlay {
+    background-color: var(--color-surface-overlay);
+  }
+  .bg-surface-overlay-alpha {
+    background-color: var(--color-surface-overlay-alpha);
+  }
+  .bg-surface-panel {
+    background-color: var(--color-surface-panel);
+  }
+  .bg-surface-panel-alpha {
+    background-color: var(--color-surface-panel-alpha);
   }
   .bg-surface-raised {
     background-color: var(--color-surface-raised);
   }
+  .bg-surface-subtle {
+    background-color: var(--color-surface-subtle);
+  }
   .bg-toast {
     background-color: var(--color-toast);
   }
@@ -1568,12 +1792,27 @@
   .p-6 {
     padding: var(--spacing-6);
   }
+  .p-7 {
+    padding: var(--spacing-7);
+  }
+  .p-8 {
+    padding: var(--spacing-8);
+  }
+  .p-9 {
+    padding: var(--spacing-9);
+  }
+  .p-10 {
+    padding: var(--spacing-10);
+  }
   .p-popover {
     padding: var(--spacing-popover);
   }
   .px-0 {
     padding-inline: var(--spacing-0);
   }
+  .px-1 {
+    padding-inline: var(--spacing-1);
+  }
   .px-1\.5 {
     padding-inline: calc(var(--spacing) * 1.5);
   }
@@ -1589,9 +1828,21 @@
   .px-4 {
     padding-inline: var(--spacing-4);
   }
+  .px-5 {
+    padding-inline: var(--spacing-5);
+  }
   .px-6 {
     padding-inline: var(--spacing-6);
   }
+  .px-7 {
+    padding-inline: var(--spacing-7);
+  }
+  .px-8 {
+    padding-inline: var(--spacing-8);
+  }
+  .px-9 {
+    padding-inline: var(--spacing-9);
+  }
   .px-menu-item-x {
     padding-inline: var(--spacing-menu-item-x);
   }
@@ -1607,12 +1858,30 @@
   .py-2 {
     padding-block: var(--spacing-2);
   }
+  .py-2\.5 {
+    padding-block: calc(var(--spacing) * 2.5);
+  }
   .py-3 {
     padding-block: var(--spacing-3);
   }
+  .py-4 {
+    padding-block: var(--spacing-4);
+  }
+  .py-5 {
+    padding-block: var(--spacing-5);
+  }
+  .py-6 {
+    padding-block: var(--spacing-6);
+  }
+  .py-7 {
+    padding-block: var(--spacing-7);
+  }
   .py-8 {
     padding-block: var(--spacing-8);
   }
+  .py-9 {
+    padding-block: var(--spacing-9);
+  }
   .ps-2 {
     padding-inline-start: var(--spacing-2);
   }
@@ -1635,7 +1904,7 @@
     padding-right: var(--spacing-8);
   }
   .pr-9 {
-    padding-right: calc(var(--spacing) * 9);
+    padding-right: var(--spacing-9);
   }
   .pb-2 {
     padding-bottom: var(--spacing-2);
@@ -1694,6 +1963,10 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  .leading-4 {
+    --tw-leading: var(--spacing-4);
+    line-height: var(--spacing-4);
+  }
   .leading-5 {
     --tw-leading: var(--spacing-5);
     line-height: var(--spacing-5);
@@ -1718,6 +1991,10 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
+  .tracking-normal {
+    --tw-tracking: var(--tracking-normal);
+    letter-spacing: var(--tracking-normal);
+  }
   .tracking-wide {
     --tw-tracking: var(--tracking-wide);
     letter-spacing: var(--tracking-wide);
@@ -1785,6 +2062,12 @@
   .text-success-text {
     color: var(--color-success-text);
   }
+  .text-surface-accent-fg {
+    color: var(--color-surface-accent-fg);
+  }
+  .text-surface-inverse-fg {
+    color: var(--color-surface-inverse-fg);
+  }
   .text-warning-contrast {
     color: var(--color-warning-contrast);
   }
@@ -1834,20 +2117,35 @@
   .opacity-75 {
     opacity: 75%;
   }
+  .opacity-80 {
+    opacity: 80%;
+  }
   .shadow {
     --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));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .shadow-1 {
-    --tw-shadow: 0 1px 2px var(--tw-shadow-color, rgb(0 0 0 / 0.04));
+    --tw-shadow: var(--ui-shadow-1);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .shadow-2 {
-    --tw-shadow: 0 1px 2px var(--tw-shadow-color, rgb(0 0 0 / 0.05)), 0 8px 24px var(--tw-shadow-color, rgb(0 0 0 / 0.08));
+    --tw-shadow: var(--ui-shadow-2);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .shadow-3 {
-    --tw-shadow: 0 2px 4px var(--tw-shadow-color, rgb(0 0 0 / 0.05)), 0 16px 48px var(--tw-shadow-color, rgb(0 0 0 / 0.14));
+    --tw-shadow: var(--ui-shadow-3);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-4 {
+    --tw-shadow: var(--ui-shadow-4);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-5 {
+    --tw-shadow: var(--ui-shadow-5);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-6 {
+    --tw-shadow: var(--ui-shadow-6);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .shadow-border {
@@ -1862,18 +2160,22 @@
     --tw-shadow: inset 0 1px 1px var(--tw-shadow-color, rgb(0 0 0 / 0.04));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-none {
-    --tw-shadow: 0 0 #0000;
+  .shadow-modal {
+    --tw-shadow: var(--ui-modal-shadow);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-panel {
-    --tw-shadow: var(--ui-panel-shadow);
+  .shadow-none {
+    --tw-shadow: 0 0 #0000;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .shadow-popover {
     --tw-shadow: var(--ui-popover-shadow);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow\/depth {
+    --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));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .ring {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1895,13 +2197,35 @@
   .ring-accent-9 {
     --tw-ring-color: var(--color-accent-9);
   }
+  .ring-accent-border {
+    --tw-ring-color: var(--color-accent-border);
+  }
   .ring-base-a3 {
     --tw-ring-color: var(--color-base-a3);
   }
+  .ring-border-interactive {
+    --tw-ring-color: var(--color-border-interactive);
+  }
+  .ring-danger-border {
+    --tw-ring-color: var(--color-danger-border);
+  }
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
+  .outline-1 {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
+  .-outline-offset-1 {
+    outline-offset: calc(1px * -1);
+  }
+  .outline-black\/10 {
+    outline-color: color-mix(in srgb, #000 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      outline-color: color-mix(in oklab, var(--color-black) 10%, transparent);
+    }
+  }
   .blur {
     --tw-blur: blur(8px);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -1914,6 +2238,15 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-opacity {
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .duration-150 {
+    --tw-duration: 150ms;
+    transition-duration: 150ms;
+  }
   .outline-none {
     --tw-outline-style: none;
     outline-style: none;
@@ -1955,6 +2288,9 @@
   .\[print-color-adjust\:exact\] {
     print-color-adjust: exact;
   }
+  .ring-inset {
+    --tw-ring-inset: inset;
+  }
   .group-open\/sidebar-group\:rotate-90 {
     &:is(:where(.group\/sidebar-group):is([open], :popover-open, :open) *) {
       rotate: 90deg;
@@ -2038,6 +2374,11 @@
       background-color: transparent;
     }
   }
+  .last\:mb-0 {
+    &:last-child {
+      margin-bottom: var(--spacing-0);
+    }
+  }
   .last\:border-b-0 {
     &:last-child {
       border-bottom-style: var(--tw-border-style);
@@ -2049,12 +2390,6 @@
       border-color: var(--color-control-border-focus);
     }
   }
-  .focus-within\:shadow-focus {
-    &:focus-within {
-      --tw-shadow: 0 0 0 3px var(--tw-shadow-color, var(--color-focus-a4));
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-  }
   .hover\:border-border-interactive {
     &:hover {
       @media (hover: hover) {
@@ -2128,10 +2463,10 @@
       }
     }
   }
-  .hover\:bg-surface-muted {
+  .hover\:bg-surface-subtle {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-surface-muted);
+        background-color: var(--color-surface-subtle);
       }
     }
   }
@@ -2149,10 +2484,10 @@
       }
     }
   }
-  .hover\:text-danger-contrast {
+  .hover\:text-danger-12 {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-danger-contrast);
+        color: var(--color-danger-12);
       }
     }
   }
@@ -2171,11 +2506,6 @@
       }
     }
   }
-  .focus\:border-control-border-focus {
-    &:focus {
-      border-color: var(--color-control-border-focus);
-    }
-  }
   .focus-visible\:bg-border-interactive {
     &:focus-visible {
       background-color: var(--color-border-interactive);
@@ -2228,6 +2558,11 @@
       --tw-ring-offset-color: var(--color-app);
     }
   }
+  .focus-visible\:ring-offset-transparent {
+    &:focus-visible {
+      --tw-ring-offset-color: transparent;
+    }
+  }
   .focus-visible\:ring-inset {
     &:focus-visible {
       --tw-ring-inset: inset;
@@ -2248,26 +2583,6 @@
       opacity: 50%;
     }
   }
-  .aria-\[invalid\=true\]\:border-control-border-invalid {
-    &[aria-invalid="true"] {
-      border-color: var(--color-control-border-invalid);
-    }
-  }
-  .aria-\[invalid\=true\]\:focus\:border-control-border-invalid-focus {
-    &[aria-invalid="true"] {
-      &:focus {
-        border-color: var(--color-control-border-invalid-focus);
-      }
-    }
-  }
-  .aria-\[invalid\=true\]\:focus\:shadow-danger-focus {
-    &[aria-invalid="true"] {
-      &:focus {
-        --tw-shadow: var(--shadow-control), 0 0 0 3px var(--tw-shadow-color, var(--color-danger-a4));
-        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-      }
-    }
-  }
   .data-checked\:translate-x-2\.5 {
     &[data-checked] {
       --tw-translate-x: calc(var(--spacing) * 2.5);
@@ -2294,7 +2609,7 @@
   }
   .data-checked\:translate-x-7 {
     &[data-checked] {
-      --tw-translate-x: calc(var(--spacing) * 7);
+      --tw-translate-x: var(--spacing-7);
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
@@ -2349,9 +2664,9 @@
       cursor: not-allowed;
     }
   }
-  .data-disabled\:bg-surface {
+  .data-disabled\:bg-surface-panel {
     &[data-disabled] {
-      background-color: var(--color-surface);
+      background-color: var(--color-surface-panel);
     }
   }
   .data-disabled\:opacity-50 {
@@ -2364,20 +2679,15 @@
       opacity: 60%;
     }
   }
-  .data-disabled\:hover\:bg-surface {
+  .data-disabled\:hover\:bg-surface-panel {
     &[data-disabled] {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--color-surface);
+          background-color: var(--color-surface-panel);
         }
       }
     }
   }
-  .data-dragging\:border-control-border-focus {
-    &[data-dragging] {
-      border-color: var(--color-control-border-focus);
-    }
-  }
   .data-dragging\:bg-base-a3 {
     &[data-dragging] {
       background-color: var(--color-base-a3);
@@ -2522,18 +2832,6 @@
       display: none;
     }
   }
-  .data-\[state\=open\]\:border-control-border-focus {
-    &[data-state="open"] {
-      border-color: var(--color-control-border-focus);
-    }
-  }
-  .data-invalid\:data-\[state\=open\]\:border-control-border-invalid-focus {
-    &[data-invalid] {
-      &[data-state="open"] {
-        border-color: var(--color-control-border-invalid-focus);
-      }
-    }
-  }
   .data-invalid\:data-\[state\=open\]\:shadow-danger-focus {
     &[data-invalid] {
       &[data-state="open"] {
@@ -2547,9 +2845,14 @@
       min-width: fit-content;
     }
   }
-  .sm\:h-\[34rem\] {
-    @media (width >= 40rem) {
-      height: 34rem;
+  .max-sm\:flex-col {
+    @media (width < 40rem) {
+      flex-direction: column;
+    }
+  }
+  .max-sm\:px-6 {
+    @media (width < 40rem) {
+      padding-inline: var(--spacing-6);
     }
   }
   .sm\:w-fit {
@@ -2817,7 +3120,7 @@
     @media (width >= 64rem) {
       &[data-desktop-state="stashed"] {
         &[data-drawer-state="open"] {
-          --tw-shadow: 0 1px 2px var(--tw-shadow-color, rgb(0 0 0 / 0.05)), 0 8px 24px var(--tw-shadow-color, rgb(0 0 0 / 0.08));
+          --tw-shadow: var(--ui-shadow-2);
           box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
         }
       }
@@ -2914,14 +3217,32 @@
       grid-template-columns: minmax(0,56rem) 16rem;
     }
   }
-  .dark\:bg-base-12 {
-    &:where(.dark, .dark *) {
-      background-color: var(--color-base-12);
+  .dark\:block {
+    &:where(.dark, .dark *):not(:where(.light, .light *)) {
+      display: block;
+    }
+  }
+  .dark\:hidden {
+    &:where(.dark, .dark *):not(:where(.light, .light *)) {
+      display: none;
+    }
+  }
+  .dark\:inline {
+    &:where(.dark, .dark *):not(:where(.light, .light *)) {
+      display: inline;
     }
   }
-  .dark\:bg-surface-raised {
-    &:where(.dark, .dark *) {
-      background-color: var(--color-surface-raised);
+  .dark\:bg-surface-inverse {
+    &:where(.dark, .dark *):not(:where(.light, .light *)) {
+      background-color: var(--color-surface-inverse);
+    }
+  }
+  .dark\:outline-white\/10 {
+    &:where(.dark, .dark *):not(:where(.light, .light *)) {
+      outline-color: color-mix(in srgb, #fff 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        outline-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+      }
     }
   }
   .ui-interactive\:hover\:bg-interactive-hover {
@@ -2955,7 +3276,7 @@
   .ui-interactive-surface\:focus-visible\:shadow-interactive-focus {
     &:is([data-ui-interactive="surface"]) {
       &:focus-visible {
-        --tw-shadow: var(--shadow-focus), var(--shadow-border-hover);
+        --tw-shadow: var(--ui-interactive-shadow-focus);
         box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
       }
     }
@@ -2984,9 +3305,9 @@
       background-color: var(--color-base-a3);
     }
   }
-  .ui-selected\:bg-surface {
+  .ui-selected\:bg-surface-panel {
     &:is([data-selected], [aria-selected="true"], [data-current], [aria-current]:not([aria-current="false"]), [data-checked], [aria-checked="true"], [data-pressed], [aria-pressed="true"]) {
-      background-color: var(--color-surface);
+      background-color: var(--color-surface-panel);
     }
   }
   .ui-selected\:font-medium {
@@ -3162,9 +3483,9 @@
       z-index: 10;
     }
   }
-  .\[\&_\[data-ui-table-header\]\]\:bg-surface {
+  .\[\&_\[data-ui-table-header\]\]\:bg-surface-panel {
     & [data-ui-table-header] {
-      background-color: var(--color-surface);
+      background-color: var(--color-surface-panel);
     }
   }
   .\[\&_\[data-ui-table-row-header\]\]\:min-w-0 {
@@ -3229,6 +3550,16 @@
       border-left-width: 1px;
     }
   }
+  .\[\&_\[data-ui-table-row\]\>\*\:first-child\]\:ps-0 {
+    & [data-ui-table-row]>*:first-child {
+      padding-inline-start: var(--spacing-0);
+    }
+  }
+  .\[\&_\[data-ui-table-row\]\>\*\:last-child\]\:pe-0 {
+    & [data-ui-table-row]>*:last-child {
+      padding-inline-end: var(--spacing-0);
+    }
+  }
   .\[\&_tbody_\[data-ui-table-row\]\:not\(\:last-child\)\>\*\]\:border-b {
     & tbody [data-ui-table-row]:not(:last-child)>* {
       border-bottom-style: var(--tw-border-style);
@@ -3280,16 +3611,66 @@
   .ui-interactive-surface\:\[\&\:has\(\:focus-visible\)\]\:shadow-interactive-focus {
     &:is([data-ui-interactive="surface"]) {
       &:has(:focus-visible) {
-        --tw-shadow: var(--shadow-focus), var(--shadow-border-hover);
+        --tw-shadow: var(--ui-interactive-shadow-focus);
         box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
       }
     }
   }
+  .\[\&\:has\(\[data-ui-select-option-label\]\>\*\+\*\)\]\:h-auto {
+    &:has([data-ui-select-option-label]>*+*) {
+      height: auto;
+    }
+  }
+  .\[\&\:has\(\[data-ui-select-option-label\]\>\*\+\*\)\]\:items-start {
+    &:has([data-ui-select-option-label]>*+*) {
+      align-items: flex-start;
+    }
+  }
+  .\[\&\:has\(\[data-ui-select-option-label\]\>\*\+\*\)\]\:py-2 {
+    &:has([data-ui-select-option-label]>*+*) {
+      padding-block: var(--spacing-2);
+    }
+  }
   .\[\&\>\*\]\:bg-base-a3 {
     &>* {
       background-color: var(--color-base-a3);
     }
   }
+  .\[\&\>\[data-ui-modal-body\]\]\:-mx-1 {
+    &>[data-ui-modal-body] {
+      margin-inline: calc(var(--spacing-1) * -1);
+    }
+  }
+  .\[\&\>\[data-ui-modal-body\]\]\:min-h-0 {
+    &>[data-ui-modal-body] {
+      min-height: var(--spacing-0);
+    }
+  }
+  .\[\&\>\[data-ui-modal-body\]\]\:content-start {
+    &>[data-ui-modal-body] {
+      align-content: flex-start;
+    }
+  }
+  .\[\&\>\[data-ui-modal-body\]\]\:overflow-x-hidden {
+    &>[data-ui-modal-body] {
+      overflow-x: hidden;
+    }
+  }
+  .\[\&\>\[data-ui-modal-body\]\]\:overflow-y-auto {
+    &>[data-ui-modal-body] {
+      overflow-y: auto;
+    }
+  }
+  .\[\&\>\[data-ui-modal-body\]\]\:px-1 {
+    &>[data-ui-modal-body] {
+      padding-inline: var(--spacing-1);
+    }
+  }
+  .\[\&\>\[data-ui-modal-footer\]\]\:self-end {
+    &>[data-ui-modal-footer] {
+      align-self: flex-end;
+    }
+  }
   .\[\&\>\[data-ui-separator\]\]\:-mx-2 {
     &>[data-ui-separator] {
       margin-inline: calc(var(--spacing-2) * -1);
@@ -3337,12 +3718,45 @@
   }
 }
 @layer components {
+  [data-ui-select-popover]:has([data-ui-select-search]) {
+    grid-template-rows: auto minmax(0, 1fr);
+  }
+  [data-ui-select-popover]:has([data-ui-select-search]) [data-ui-select-listbox] {
+    min-height: 0;
+    overflow: hidden;
+  }
+  [data-ui-select-option-label]:has(>*+*) {
+    display: grid;
+    gap: var(--spacing-1);
+    overflow: visible;
+    text-overflow: clip;
+    white-space: normal;
+  }
+  [data-ui-select-option-label]:has(>*+*) > * {
+    min-width: 0;
+    max-width: 100%;
+    overflow-wrap: break-word;
+    white-space: normal;
+  }
+  [data-ui-select][data-mark="none"] [data-ui-select-option-indicator] {
+    display: none;
+  }
+  [data-ui-select-native]:is(:hover, :active):not(:focus):not(:disabled):not([aria-invalid="true"]) {
+    --ui-control-shadow: var(--ui-control-shadow-hover);
+  }
+  [data-ui-select-native]:focus:not([aria-invalid="true"]) {
+    --ui-control-shadow: var(--ui-control-shadow-focus);
+    box-shadow: var(--shadow-control), var(--shadow-focus);
+  }
   [data-ui-select-native][aria-invalid="true"] {
-    border-color: var(--ui-control-border-invalid);
+    --ui-control-shadow: var(--ui-control-shadow-invalid);
+  }
+  [data-ui-select-native][aria-invalid="true"]:is(:hover, :active):not(:focus):not(:disabled) {
+    --ui-control-shadow: var(--ui-control-shadow-invalid-hover);
   }
   [data-ui-select-native][aria-invalid="true"]:focus {
-    border-color: var(--ui-control-border-invalid-focus);
-    box-shadow: var(--shadow-control), 0 0 0 3px var(--color-danger-a4);
+    --ui-control-shadow: var(--ui-control-shadow-invalid-focus);
+    box-shadow: var(--shadow-danger-focus);
   }
 }
 @layer components {
@@ -3359,33 +3773,46 @@
     box-shadow: var(--shadow-focus);
   }
   [data-ui-radio-group][data-variant="cards"] > [data-ui-radio], [data-ui-radio][data-variant="cards"] {
-    align-items: center;
-    background-color: var(--color-surface);
-    border-radius: var(--radius-3);
+    align-items: flex-start !important;
+    background-color: var(--color-surface-panel);
+    border-radius: var(--radius-4) !important;
     box-shadow: var(--shadow-border);
-    min-height: var(--ui-control-height-xlg);
-    padding: 0.875rem 1rem;
-  }
-  [data-ui-radio-group][data-variant="cards"] > [data-ui-radio][data-invalid], [data-ui-radio][data-variant="cards"][data-invalid] {
-    background-color: var(--color-danger-surface);
-    box-shadow: 0 0 0 1px var(--color-danger-border);
+    display: flex !important;
+    flex: 1 1 0;
+    gap: var(--spacing-3);
+    padding: 1rem !important;
+    width: auto !important;
   }
   [data-ui-radio-group][data-variant="pills"] > [data-ui-radio], [data-ui-radio][data-variant="pills"] {
-    align-items: center;
-    background-color: var(--color-surface);
-    border-radius: var(--radius-full);
-    box-shadow: var(--shadow-border);
+    align-items: center !important;
+    background-color: currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb, currentColor 10%, transparent);
+    }
+    border-radius: var(--radius-full) !important;
+    box-shadow: none;
+    color: var(--color-foreground-muted);
+    display: inline-flex !important;
+    flex: 0 0 auto;
     min-height: var(--ui-control-height-md);
-    padding: 0.25rem 0.75rem;
+    padding: 0 0.625rem !important;
+    width: auto !important;
   }
   [data-ui-radio-group][data-variant="pills"] > [data-ui-radio][data-checked], [data-ui-radio][data-variant="pills"][data-checked] {
-    background-color: var(--color-accent-surface);
-    color: var(--color-foreground);
-    box-shadow: 0 0 0 1px var(--color-accent-border), var(--shadow-1);
+    background-color: var(--color-base-12);
+    color: var(--color-base-1) !important;
+    box-shadow: var(--shadow-1);
   }
   [data-ui-radio-group][data-variant="pills"] > [data-ui-radio][data-checked]:hover:not([data-disabled]), [data-ui-radio][data-variant="pills"][data-checked]:hover:not([data-disabled]) {
-    background-color: var(--color-accent-surface);
-    box-shadow: 0 0 0 1px var(--color-accent-border), var(--shadow-1);
+    background-color: var(--color-base-12);
+    box-shadow: var(--shadow-1);
+  }
+  [data-ui-radio-group][data-variant="pills"] [data-ui-radio-indicator], [data-ui-radio][data-variant="pills"] [data-ui-radio-indicator] {
+    display: none !important;
+  }
+  [data-ui-radio-group][data-variant="cards"] > [data-ui-radio][data-invalid], [data-ui-radio][data-variant="cards"][data-invalid] {
+    background-color: var(--color-danger-surface);
+    box-shadow: 0 0 0 1px var(--color-danger-border);
   }
   [data-ui-radio-group][data-indicator="false"] [data-ui-radio-indicator], [data-ui-radio][data-indicator="false"] [data-ui-radio-indicator] {
     display: none !important;
@@ -3426,7 +3853,7 @@
   [data-ui-date-picker] {
     --ui-date-picker-selected-bg: var(--color-base-12);
     --ui-date-picker-selected-bg-hover: var(--color-base-12);
-    --ui-date-picker-selected-fg: var(--color-surface);
+    --ui-date-picker-selected-fg: var(--color-surface-inverse-fg);
     --ui-date-picker-range-bg: var(--color-base-a3);
     --ui-date-picker-range-bg-hover: var(--color-base-a4);
     --ui-date-picker-month-heading-size: 1.75rem;
@@ -3441,6 +3868,23 @@
     --ui-date-picker-range-bg: var(--color-accent-surface);
     --ui-date-picker-range-bg-hover: var(--color-accent-surface-hover);
   }
+  [data-ui-date-picker-native]:is(:hover, :active):not(:focus):not(:disabled):not([aria-invalid="true"]) {
+    --ui-control-shadow: var(--ui-control-shadow-hover);
+  }
+  [data-ui-date-picker-native]:focus:not([aria-invalid="true"]) {
+    --ui-control-shadow: var(--ui-control-shadow-focus);
+    box-shadow: var(--shadow-control), var(--shadow-focus);
+  }
+  [data-ui-date-picker-native][aria-invalid="true"] {
+    --ui-control-shadow: var(--ui-control-shadow-invalid);
+  }
+  [data-ui-date-picker-native][aria-invalid="true"]:is(:hover, :active):not(:focus):not(:disabled) {
+    --ui-control-shadow: var(--ui-control-shadow-invalid-hover);
+  }
+  [data-ui-date-picker-native][aria-invalid="true"]:focus {
+    --ui-control-shadow: var(--ui-control-shadow-invalid-focus);
+    box-shadow: var(--shadow-danger-focus);
+  }
   [data-ui-date-picker-calendar] {
     --color-accent: var(--ui-date-picker-selected-bg);
     --color-text-on-accent: var(--ui-date-picker-selected-fg);
@@ -3754,6 +4198,28 @@
     }
   }
 }
+@layer components {
+  [data-ui-file-upload-dropzone]:is(:hover, :active):not(:focus-within):not([data-dragging]):not([data-disabled]):not([data-invalid]) {
+    --ui-control-shadow: var(--ui-control-shadow-hover);
+  }
+  [data-ui-file-upload-dropzone]:focus-within:not([data-invalid]) {
+    --ui-control-shadow: var(--ui-control-shadow-focus);
+    box-shadow: var(--shadow-control), var(--shadow-focus);
+  }
+  [data-ui-file-upload-dropzone][data-dragging]:not([data-invalid]) {
+    --ui-control-shadow: var(--ui-control-shadow-focus);
+  }
+  [data-ui-file-upload-dropzone][data-invalid] {
+    --ui-control-shadow: var(--ui-control-shadow-invalid);
+  }
+  [data-ui-file-upload-dropzone][data-invalid]:is(:hover, :active):not(:focus-within):not([data-dragging]):not([data-disabled]) {
+    --ui-control-shadow: var(--ui-control-shadow-invalid-hover);
+  }
+  [data-ui-file-upload-dropzone][data-invalid]:focus-within:not([data-disabled]), [data-ui-file-upload-dropzone][data-invalid][data-dragging]:not([data-disabled]) {
+    --ui-control-shadow: var(--ui-control-shadow-invalid-focus);
+    box-shadow: var(--shadow-danger-focus);
+  }
+}
 @layer components {
   [data-ui-button] {
     isolation: isolate;
@@ -3780,35 +4246,48 @@
     position: relative;
     z-index: 1;
   }
-  [data-ui-button][data-variant="default"], [data-ui-button][data-variant="outline"] {
+  [data-ui-button][data-variant="surface"], [data-ui-button][data-variant="outline"] {
     --_ui-button-overlay: var(--color-base-a2);
     --_ui-button-overlay-active: var(--color-base-a3);
   }
-  [data-ui-button][data-variant="default"]:hover, [data-ui-button][data-variant="default"]:active, [data-ui-button][data-variant="outline"]:hover, [data-ui-button][data-variant="outline"]:active {
-    background-color: var(--color-surface) !important;
+  [data-ui-button][data-variant="surface"]:hover, [data-ui-button][data-variant="surface"]:active {
+    background-color: var(--ui-control-bg) !important;
+  }
+  [data-ui-button][data-variant="outline"]:hover, [data-ui-button][data-variant="outline"]:active {
+    background-color: transparent !important;
   }
-  [data-ui-button][data-variant="filled"][data-color="accent"] {
+  [data-ui-button][data-variant="solid"] {
     --_ui-button-overlay: rgb(255 255 255 / 0.10);
     --_ui-button-overlay-active: rgb(255 255 255 / 0.16);
-    --_ui-button-highlight: rgb(255 255 255 / 0.22);
+    --_ui-button-highlight: rgb(255 255 255 / 0.18);
     box-shadow: inset 0 1px var(--_ui-button-highlight), var(--shadow-1) !important;
   }
-  [data-ui-button][data-variant="filled"][data-color="accent"]:hover, [data-ui-button][data-variant="filled"][data-color="accent"]:active {
+  [data-ui-button][data-variant="solid"][data-color="neutral"]:hover, [data-ui-button][data-variant="solid"][data-color="neutral"]:active {
+    background-color: var(--color-base-12) !important;
+  }
+  [data-ui-button][data-variant="solid"][data-color="accent"]:hover, [data-ui-button][data-variant="solid"][data-color="accent"]:active {
     background-color: var(--color-accent-solid) !important;
   }
-  [data-ui-button][data-variant="subtle"] {
+  [data-ui-button][data-variant="soft"][data-color="neutral"] {
     --_ui-button-overlay: var(--color-base-a3);
     --_ui-button-overlay-active: var(--color-base-a4);
   }
-  [data-ui-button][data-variant="subtle"]:hover, [data-ui-button][data-variant="subtle"]:active {
+  [data-ui-button][data-variant="soft"][data-color="neutral"]:hover, [data-ui-button][data-variant="soft"][data-color="neutral"]:active {
     background-color: var(--color-base-a2) !important;
   }
-  [data-ui-button][data-variant="filled"] {
-    --_ui-button-overlay: var(--color-base-a4);
-    --_ui-button-overlay-active: var(--color-base-a5);
+  [data-ui-button][data-variant="soft"][data-color="accent"] {
+    --_ui-button-overlay: var(--color-accent-a3);
+    --_ui-button-overlay-active: var(--color-accent-a4);
+  }
+  [data-ui-button][data-variant="soft"][data-color="accent"]:hover, [data-ui-button][data-variant="soft"][data-color="accent"]:active {
+    background-color: var(--color-accent-surface) !important;
+  }
+  [data-ui-button][data-variant="soft"][data-color="danger"] {
+    --_ui-button-overlay: var(--color-danger-a3);
+    --_ui-button-overlay-active: var(--color-danger-a4);
   }
-  [data-ui-button][data-variant="filled"]:hover, [data-ui-button][data-variant="filled"]:active {
-    background-color: var(--color-base-a3) !important;
+  [data-ui-button][data-variant="soft"][data-color="danger"]:hover, [data-ui-button][data-variant="soft"][data-color="danger"]:active {
+    background-color: var(--color-danger-surface) !important;
   }
   [data-ui-button][data-variant="ghost"] {
     --_ui-button-overlay: var(--color-base-a3);
@@ -3817,13 +4296,15 @@
   [data-ui-button][data-variant="ghost"]:hover, [data-ui-button][data-variant="ghost"]:active {
     background-color: transparent !important;
   }
-  [data-ui-button][data-variant="filled"][data-color="danger"] {
-    --_ui-button-overlay: rgb(255 255 255 / 0.10);
-    --_ui-button-overlay-active: rgb(255 255 255 / 0.16);
-    --_ui-button-highlight: rgb(255 255 255 / 0.20);
-    box-shadow: inset 0 1px var(--_ui-button-highlight), var(--shadow-1) !important;
+  [data-ui-button][data-variant="ghost"][data-color="accent"], [data-ui-button][data-variant="outline"][data-color="accent"] {
+    --_ui-button-overlay: var(--color-accent-a3);
+    --_ui-button-overlay-active: var(--color-accent-a4);
+  }
+  [data-ui-button][data-variant="ghost"][data-color="danger"], [data-ui-button][data-variant="outline"][data-color="danger"] {
+    --_ui-button-overlay: var(--color-danger-a3);
+    --_ui-button-overlay-active: var(--color-danger-a4);
   }
-  [data-ui-button][data-variant="filled"][data-color="danger"]:hover, [data-ui-button][data-variant="filled"][data-color="danger"]:active {
+  [data-ui-button][data-variant="solid"][data-color="danger"]:hover, [data-ui-button][data-variant="solid"][data-color="danger"]:active {
     background-color: var(--color-danger-solid) !important;
   }
   [data-ui-button][data-ui-loading] {
@@ -3921,15 +4402,6 @@
     user-select: none;
   }
 }
-@layer components {
-  .ui-image-outline {
-    outline: 1px solid rgba(0, 0, 0, 0.1);
-    outline-offset: -1px;
-  }
-  .dark .ui-image-outline {
-    outline-color: rgba(255, 255, 255, 0.1);
-  }
-}
 @layer components {
   [data-ui-sidebar-state-icon] [data-ui-sidebar-state-icon-when] {
     display: none;
@@ -3938,18 +4410,10 @@
     display: block;
   }
 }
-@layer components {
-  [data-ui-theme-icon] [data-ui-theme-icon-when], [data-ui-theme-text] [data-ui-theme-text-when] {
-    display: none;
-  }
-  html:not(.dark) [data-ui-theme-icon] [data-ui-theme-icon-when="light"], html.dark [data-ui-theme-icon] [data-ui-theme-icon-when="dark"], html:not(.dark) [data-ui-theme-text] [data-ui-theme-text-when="light"], html.dark [data-ui-theme-text] [data-ui-theme-text-when="dark"] {
-    display: block;
-  }
-}
-:root {
+:root, .light, .dark {
   color-scheme: light;
   --ui-bg: var(--color-app);
-  --ui-bg-subtle: var(--color-app-subtle);
+  --ui-bg-subtle: var(--color-surface-subtle);
   --ui-fg: var(--color-foreground);
   --ui-fg-muted: var(--color-foreground-muted);
   --ui-fg-subtle: var(--color-foreground-subtle);
@@ -3961,15 +4425,43 @@
   --ui-interactive-bg-selected-hover: var(--color-accent-surface-hover);
   --ui-interactive-shadow-hover: var(--shadow-border-hover);
   --ui-interactive-shadow-selected: 0 0 0 1px var(--color-accent-border);
+  --ui-interactive-shadow-focus: var(--shadow-focus), var(--shadow-border-hover);
   --ui-focus: var(--color-focus);
   --ui-focus-ring: var(--shadow-focus);
   --ui-overlay: var(--color-overlay);
-  --ui-shadow-border: 0px 0px 0px 1px rgb(0 0 0 / 0.06),
-    0px 1px 2px -1px rgb(0 0 0 / 0.06),
-    0px 2px 4px 0px rgb(0 0 0 / 0.04);
-  --ui-shadow-border-hover: 0px 0px 0px 1px rgb(0 0 0 / 0.08),
-    0px 1px 2px -1px rgb(0 0 0 / 0.08),
-    0px 2px 4px 0px rgb(0 0 0 / 0.06);
+  --color-black-a1: rgb(0 0 0 / 0.04);
+  --color-black-a2: rgb(0 0 0 / 0.08);
+  --color-black-a3: rgb(0 0 0 / 0.12);
+  --color-black-a4: rgb(0 0 0 / 0.18);
+  --color-black-a5: rgb(0 0 0 / 0.28);
+  --color-black-a6: rgb(0 0 0 / 0.40);
+  --shadow-ring-weak: var(--color-base-a3);
+  --shadow-ring: var(--color-base-a5);
+  --shadow-ring-strong: var(--color-base-a6);
+  --ui-shadow-border: 0 0 0 1px var(--shadow-ring),
+    0 1px 2px -1px var(--color-black-a1),
+    0 2px 4px 0 var(--color-black-a1);
+  --ui-shadow-border-hover: 0 0 0 1px var(--shadow-ring-strong),
+    0 1px 2px -1px var(--color-black-a2),
+    0 2px 4px 0 var(--color-black-a2);
+  --ui-shadow-1: var(--shadow-border);
+  --ui-shadow-2: 0 0 0 1px var(--shadow-ring),
+    0 1px 1px var(--color-base-a2),
+    0 2px 4px -2px var(--color-black-a2),
+    0 4px 8px -4px var(--color-black-a1);
+  --ui-shadow-3: 0 0 0 1px var(--shadow-ring),
+    0 2px 4px -2px var(--color-base-a3),
+    0 6px 16px -6px var(--color-black-a2),
+    0 8px 24px -12px var(--color-black-a2);
+  --ui-shadow-4: 0 0 0 1px var(--shadow-ring),
+    0 8px 24px -8px var(--color-black-a2),
+    0 12px 32px -16px var(--color-black-a3);
+  --ui-shadow-5: 0 0 0 1px var(--shadow-ring),
+    0 12px 40px -12px var(--color-black-a3),
+    0 20px 64px -24px var(--color-black-a4);
+  --ui-shadow-6: 0 0 0 1px var(--shadow-ring),
+    0 16px 48px -12px var(--color-black-a4),
+    0 24px 80px -24px var(--color-black-a5);
   --ui-accent-strength: 12%;
   --ui-accent-hover-strength: 16%;
   --ui-accent-border-strength: 38%;
@@ -3988,7 +4480,7 @@
   --ui-control-padding-x: 0.75rem;
   --ui-control-gap: 0.5rem;
   --ui-control-radius: var(--radius-3);
-  --ui-control-bg: var(--color-surface);
+  --ui-control-bg: var(--color-surface-panel);
   --ui-control-bg-hover: var(--color-base-a2);
   --ui-control-bg-active: var(--color-base-a3);
   --ui-control-fg: var(--color-foreground);
@@ -3996,7 +4488,7 @@
   --ui-control-border: var(--color-border);
   --ui-control-border-hover: var(--ui-control-border);
   @supports (color: color-mix(in lab, red, red)) {
-    --ui-control-border-hover: color-mix(in srgb, var(--ui-control-border) 88%, var(--ui-fg) 12%);
+    --ui-control-border-hover: color-mix(in srgb, var(--ui-control-border) 90%, var(--ui-fg) 10%);
   }
   --ui-control-border-focus: var(--color-accent-9);
   --ui-control-border-invalid: var(--color-danger-border);
@@ -4005,20 +4497,25 @@
     --ui-control-border-invalid-hover: color-mix(in srgb, var(--ui-control-border-invalid) 84%, var(--color-danger-text) 16%);
   }
   --ui-control-border-invalid-focus: var(--color-danger-9);
-  --ui-control-shadow: var(--shadow-inset);
-  --ui-panel-shadow: var(--ui-shadow-border),
-    0px 2px 4px rgb(0 0 0 / 0.05),
-    0px 16px 48px rgb(0 0 0 / 0.14);
-  --ui-popover-bg: var(--color-surface-raised);
+  --ui-control-shadow: var(--ui-shadow-border);
+  --ui-control-shadow-hover: 0 0 0 1px var(--ui-control-border-hover);
+  --ui-control-shadow-focus: 0 0 0 1px var(--ui-control-border-focus);
+  --ui-control-shadow-invalid: 0 0 0 1px var(--ui-control-border-invalid);
+  --ui-control-shadow-invalid-hover: 0 0 0 1px var(--ui-control-border-invalid-hover);
+  --ui-control-shadow-invalid-focus: 0 0 0 1px var(--ui-control-border-invalid-focus);
+  --ui-panel-shadow: var(--shadow-2);
+  --ui-popover-bg: var(--color-surface-overlay);
   --ui-popover-fg: var(--color-foreground);
   --ui-popover-border: var(--color-border);
   --ui-popover-radius: var(--radius-4);
-  --ui-popover-shadow: var(--ui-shadow-border),
-    0px 1px 2px rgb(0 0 0 / 0.05),
-    0px 8px 24px rgb(0 0 0 / 0.08);
+  --ui-popover-shadow: var(--shadow-border),
+    0 8px 24px -8px var(--color-black-a2),
+    0 12px 32px -16px var(--color-black-a3);
+  --ui-dialog-shadow: var(--shadow-5);
+  --ui-modal-shadow: var(--shadow-6);
   --ui-popover-padding: 0.375rem;
   --ui-popover-z: var(--z-index-popover);
-  --ui-toast-bg: var(--color-surface-raised);
+  --ui-toast-bg: var(--color-surface-overlay);
   --ui-toast-stack-peek: 8px;
   --ui-combobox-listbox-max-height: 16rem;
   --ui-menu-item-height: var(--spacing-control-lg);
@@ -4042,20 +4539,193 @@
   --ui-scrollbar-thumb-bg: var(--color-base-a5);
   --ui-scrollbar-thumb-bg-hover: var(--color-base-a7);
   --ui-scrollbar-thumb-radius: var(--radius-full);
+  --color-control: var(--ui-control-bg);
+  --color-control-hover: var(--ui-control-bg-hover);
+  --color-control-active: var(--ui-control-bg-active);
+  --color-control-fg: var(--ui-control-fg);
+  --color-control-placeholder: var(--ui-control-placeholder);
+  --color-control-border: var(--ui-control-border);
+  --color-control-border-focus: var(--ui-control-border-focus);
+  --color-control-border-invalid: var(--ui-control-border-invalid);
+  --color-control-border-invalid-focus: var(--ui-control-border-invalid-focus);
+  --color-focus: var(--color-accent-8);
+  --color-focus-a4: #5eb1ef;
+  @supports (color: color-mix(in lab, red, red)) {
+    --color-focus-a4: color-mix(in srgb, var(--color-focus) var(--ui-focus-strength), transparent);
+  }
+  --color-accent-solid: var(--color-accent-11);
+  --color-accent-solid-hover: var(--color-accent-12);
+  --color-accent-surface: #0090ff;
+  @supports (color: color-mix(in lab, red, red)) {
+    --color-accent-surface: color-mix(in srgb, var(--color-accent-9) var(--ui-accent-strength), var(--color-surface-panel));
+  }
+  --color-accent-surface-hover: #0090ff;
+  @supports (color: color-mix(in lab, red, red)) {
+    --color-accent-surface-hover: color-mix(in srgb, var(--color-accent-9) var(--ui-accent-hover-strength), var(--color-surface-panel));
+  }
+  --color-accent-border: #0090ff;
+  @supports (color: color-mix(in lab, red, red)) {
+    --color-accent-border: color-mix(in srgb, var(--color-accent-9) var(--ui-accent-border-strength), var(--color-border));
+  }
+  --color-danger-solid: var(--color-danger-11);
+  --color-danger-solid-hover: var(--color-danger-12);
+  --color-danger-contrast: white;
+  --color-success-solid: var(--color-success-9);
+  --color-success-solid-hover: var(--color-success-10);
+  --color-success-contrast: white;
+  --color-success-surface: var(--color-success-3);
+  --color-success-surface-hover: var(--color-success-4);
+  --color-success-border: var(--color-success-7);
+  --color-warning-solid: var(--color-warning-9);
+  --color-warning-solid-hover: var(--color-warning-10);
+  --color-warning-contrast: var(--color-warning-12);
+  --color-warning-surface: var(--color-warning-3);
+  --color-warning-surface-hover: var(--color-warning-4);
+  --color-warning-border: var(--color-warning-7);
+  --color-popover: var(--ui-popover-bg);
+  --color-popover-fg: var(--ui-popover-fg);
+  --color-popover-border: var(--ui-popover-border);
+  --color-toast: var(--ui-toast-bg);
+  --color-menu-item-hover: var(--ui-menu-item-bg-hover);
+  --color-menu-item-active: var(--ui-menu-item-bg-active);
+  --color-menu-item-fg: var(--ui-menu-item-fg);
+  --color-menu-item-muted: var(--ui-menu-item-fg-muted);
+  --color-menu-item-danger-hover: var(--ui-menu-item-danger-bg-hover);
+  --color-menu-item-danger-fg: var(--ui-menu-item-danger-fg);
+  --color-menu-separator: var(--ui-menu-separator);
+  --color-menu-heading-fg: var(--ui-menu-heading-fg);
+  --color-interactive-hover: var(--ui-interactive-bg-hover);
+  --color-interactive-active: var(--ui-interactive-bg-active);
+  --color-interactive-selected: var(--ui-interactive-bg-selected);
+  --color-interactive-selected-hover: var(--ui-interactive-bg-selected-hover);
+  --color-icon: var(--ui-icon-fg);
+  --color-scrollbar-thumb: var(--ui-scrollbar-thumb-bg);
+  --color-scrollbar-thumb-hover: var(--ui-scrollbar-thumb-bg-hover);
+  --shadow-interactive-hover: var(--ui-interactive-shadow-hover);
+  --shadow-interactive-selected: var(--ui-interactive-shadow-selected);
+  --shadow-interactive-focus: var(--ui-interactive-shadow-focus);
+}
+.light {
+  --color-base-1: #fcfcfd;
+  --color-base-2: #f9f9fb;
+  --color-base-3: #f0f0f3;
+  --color-base-4: #e8e8ec;
+  --color-base-5: #e0e1e6;
+  --color-base-6: #d9d9e0;
+  --color-base-7: #cdced6;
+  --color-base-8: #b9bbc6;
+  --color-base-9: #8b8d98;
+  --color-base-10: #80838d;
+  --color-base-11: #60646c;
+  --color-base-12: #1c2024;
+  --color-base-a1: #00005503;
+  --color-base-a2: #00005506;
+  --color-base-a3: #0000330f;
+  --color-base-a4: #00002d17;
+  --color-base-a5: #0009321f;
+  --color-base-a6: #00002f26;
+  --color-base-a7: #00062e32;
+  --color-base-a8: #00083046;
+  --color-base-a9: #00051d74;
+  --color-base-a10: #00071b7f;
+  --color-base-a11: #0007149f;
+  --color-base-a12: #000509e3;
+  --color-app: var(--color-base-1);
+  --color-chrome: var(--color-base-2);
+  --color-chrome-alpha: color-mix(in srgb, #f9f9fb 86%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    --color-chrome-alpha: color-mix(in srgb, var(--color-chrome) 86%, transparent);
+  }
+  --color-surface-subtle: var(--color-base-2);
+  --color-surface-panel: var(--color-base-1);
+  --color-surface-panel-alpha: color-mix(in srgb, #fcfcfd 88%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    --color-surface-panel-alpha: color-mix(in srgb, var(--color-surface-panel) 88%, transparent);
+  }
+  --color-surface-raised: var(--color-base-1);
+  --color-surface-overlay: var(--color-base-1);
+  --color-surface-overlay-alpha: color-mix(in srgb, #fcfcfd 92%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    --color-surface-overlay-alpha: color-mix(in srgb, var(--color-surface-overlay) 92%, transparent);
+  }
+  --color-surface-inverse: var(--color-base-12);
+  --color-surface-inverse-fg: var(--color-base-1);
+  --color-foreground: var(--color-base-12);
+  --color-foreground-muted: var(--color-base-11);
+  --color-foreground-subtle: var(--color-base-11);
+  --color-border: var(--color-base-a5);
+  --color-border-interactive: var(--color-base-a6);
+  --color-border-strong: var(--color-base-a7);
+  --color-overlay: rgb(0 0 0 / 0.35);
+  --ui-accent-strength: 12%;
+  --ui-accent-hover-strength: 16%;
+  --ui-accent-border-strength: 38%;
+  --ui-focus-strength: 24%;
+  --color-accent-contrast: white;
+  --color-accent-text: var(--color-accent-11);
+  --color-danger-surface: var(--color-danger-3);
+  --color-danger-surface-hover: var(--color-danger-4);
+  --color-danger-border: var(--color-danger-7);
+  --color-danger-text: var(--color-danger-11);
+  --color-success-text: var(--color-success-11);
+  --color-warning-text: var(--color-warning-11);
+  --color-black-a1: rgb(0 0 0 / 0.04);
+  --color-black-a2: rgb(0 0 0 / 0.08);
+  --color-black-a3: rgb(0 0 0 / 0.12);
+  --color-black-a4: rgb(0 0 0 / 0.18);
+  --color-black-a5: rgb(0 0 0 / 0.28);
+  --color-black-a6: rgb(0 0 0 / 0.40);
+  --shadow-ring-weak: var(--color-base-a3);
+  --shadow-ring: var(--color-base-a5);
+  --shadow-ring-strong: var(--color-base-a6);
+  --ui-shadow-border: 0 0 0 1px var(--shadow-ring),
+    0 1px 2px -1px var(--color-black-a1),
+    0 2px 4px 0 var(--color-black-a1);
+  --ui-shadow-border-hover: 0 0 0 1px var(--shadow-ring-strong),
+    0 1px 2px -1px var(--color-black-a2),
+    0 2px 4px 0 var(--color-black-a2);
+  --ui-shadow-1: var(--shadow-border);
+  --ui-shadow-2: 0 0 0 1px var(--shadow-ring),
+    0 1px 1px var(--color-base-a2),
+    0 2px 4px -2px var(--color-black-a2),
+    0 4px 8px -4px var(--color-black-a1);
+  --ui-shadow-3: 0 0 0 1px var(--shadow-ring),
+    0 2px 4px -2px var(--color-base-a3),
+    0 6px 16px -6px var(--color-black-a2),
+    0 8px 24px -12px var(--color-black-a2);
+  --ui-shadow-4: 0 0 0 1px var(--shadow-ring),
+    0 8px 24px -8px var(--color-black-a2),
+    0 12px 32px -16px var(--color-black-a3);
+  --ui-shadow-5: 0 0 0 1px var(--shadow-ring),
+    0 12px 40px -12px var(--color-black-a3),
+    0 20px 64px -24px var(--color-black-a4);
+  --ui-shadow-6: 0 0 0 1px var(--shadow-ring),
+    0 16px 48px -12px var(--color-black-a4),
+    0 24px 80px -24px var(--color-black-a5);
+  --ui-panel-shadow: var(--shadow-2);
+  --ui-popover-shadow: var(--shadow-border),
+    0 8px 24px -8px var(--color-black-a2),
+    0 12px 32px -16px var(--color-black-a3);
+  --ui-dialog-shadow: var(--shadow-5);
+  --ui-modal-shadow: var(--shadow-6);
+  --ui-toast-bg: var(--color-surface-overlay);
 }
 @layer components {
   [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"]):is(:hover, :active):not(:focus-within):not([data-state="open"]):not([data-disabled]):not([data-invalid]) {
-    border-color: var(--ui-control-border-hover);
+    --ui-control-shadow: var(--ui-control-shadow-hover);
   }
   [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"]):focus-within:not([data-invalid]), [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"])[data-state="open"]:not([data-invalid]) {
-    border-color: var(--ui-control-border-focus);
+    --ui-control-shadow: var(--ui-control-shadow-focus);
+  }
+  [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"])[data-invalid] {
+    --ui-control-shadow: var(--ui-control-shadow-invalid);
   }
   [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"])[data-invalid]:is(:hover, :active):not(:focus-within):not([data-state="open"]):not([data-disabled]) {
-    border-color: var(--ui-control-border-invalid-hover);
+    --ui-control-shadow: var(--ui-control-shadow-invalid-hover);
   }
   [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"])[data-invalid]:focus-within:not([data-disabled]), [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"])[data-invalid][data-state="open"]:not([data-disabled]) {
-    border-color: var(--ui-control-border-invalid-focus);
-    box-shadow: var(--shadow-control), 0 0 0 3px var(--color-danger-a4);
+    --ui-control-shadow: var(--ui-control-shadow-invalid-focus);
+    box-shadow: var(--shadow-danger-focus);
   }
   [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"]):has(:focus-visible):not([data-invalid]) {
     box-shadow: var(--shadow-control), var(--shadow-focus);
@@ -4088,11 +4758,26 @@
   --color-base-a11: #ffffffaf;
   --color-base-a12: #ffffffed;
   --color-app: var(--color-base-2);
-  --color-app-subtle: var(--color-base-1);
-  --color-surface: var(--color-base-2);
-  --color-surface-muted: var(--color-base-1);
+  --color-chrome: var(--color-base-1);
+  --color-chrome-alpha: color-mix(in srgb, #f9f9fb 86%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    --color-chrome-alpha: color-mix(in srgb, var(--color-chrome) 86%, transparent);
+  }
+  --color-surface-subtle: var(--color-base-1);
+  --color-surface-panel: var(--color-base-2);
+  --color-surface-panel-alpha: color-mix(in srgb, #fcfcfd 88%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    --color-surface-panel-alpha: color-mix(in srgb, var(--color-surface-panel) 88%, transparent);
+  }
   --color-surface-raised: var(--color-base-3);
-  --ui-toast-bg: var(--color-base-4);
+  --color-surface-overlay: var(--color-base-4);
+  --color-surface-overlay-alpha: color-mix(in srgb, #fcfcfd 92%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    --color-surface-overlay-alpha: color-mix(in srgb, var(--color-surface-overlay) 92%, transparent);
+  }
+  --color-surface-inverse: var(--color-base-12);
+  --color-surface-inverse-fg: var(--color-base-1);
+  --ui-toast-bg: var(--color-surface-overlay);
   --color-foreground: var(--color-base-12);
   --color-foreground-muted: var(--color-base-11);
   --color-foreground-subtle: var(--color-base-10);
@@ -4112,10 +4797,55 @@
   --color-danger-text: var(--color-danger-8);
   --color-success-text: var(--color-success-8);
   --color-warning-text: var(--color-warning-8);
-  --ui-shadow-border: 0 0 0 1px rgb(255 255 255 / 0.07);
-  --ui-shadow-border-hover: 0 0 0 1px rgb(255 255 255 / 0.11);
-  --ui-popover-shadow: var(--ui-shadow-border);
-  --ui-panel-shadow: var(--ui-shadow-border);
+  --color-black-a1: rgb(0 0 0 / 0.20);
+  --color-black-a2: rgb(0 0 0 / 0.32);
+  --color-black-a3: rgb(0 0 0 / 0.44);
+  --color-black-a4: rgb(0 0 0 / 0.56);
+  --color-black-a5: rgb(0 0 0 / 0.68);
+  --color-black-a6: rgb(0 0 0 / 0.76);
+  --shadow-ring-weak: var(--color-base-a3);
+  --shadow-ring: var(--color-base-a4);
+  --shadow-ring-strong: var(--color-base-a5);
+  --ui-shadow-border: 0 0 0 1px var(--shadow-ring-weak);
+  --ui-shadow-border-hover: 0 0 0 1px var(--shadow-ring);
+  --ui-control-shadow-hover: 0 0 0 1px var(--color-base-a7);
+  --ui-shadow-1: var(--shadow-border);
+  --ui-shadow-2: 0 0 0 1px var(--shadow-ring-weak),
+    0 1px 1px var(--color-black-a2),
+    0 2px 4px -2px var(--color-black-a2),
+    0 4px 8px -4px var(--color-black-a2);
+  --ui-shadow-3: 0 0 0 1px var(--shadow-ring),
+    0 2px 4px -2px var(--color-black-a2),
+    0 6px 16px -6px var(--color-black-a3),
+    0 8px 24px -12px var(--color-black-a3);
+  --ui-shadow-4: 0 0 0 1px var(--shadow-ring),
+    0 8px 24px -8px var(--color-black-a3),
+    0 12px 32px -16px var(--color-black-a4);
+  --ui-shadow-5: 0 0 0 1px var(--shadow-ring-strong),
+    0 12px 40px -12px var(--color-black-a4),
+    0 20px 64px -24px var(--color-black-a5);
+  --ui-shadow-6: 0 0 0 1px var(--shadow-ring-strong),
+    0 16px 48px -12px var(--color-black-a5),
+    0 24px 80px -24px var(--color-black-a6);
+  --ui-panel-shadow: var(--shadow-2);
+  --ui-popover-shadow: var(--shadow-border);
+  --ui-dialog-shadow: var(--shadow-5);
+  --ui-modal-shadow: var(--shadow-6);
+}
+@supports (color: color-mix(in oklab, white, black)) {
+  :root, .light {
+    --shadow-ring-weak: color-mix(in oklab, var(--color-base-a3), var(--color-base-3) 25%);
+    --shadow-ring: color-mix(in oklab, var(--color-base-a5), var(--color-base-5) 20%);
+    --shadow-ring-strong: color-mix(in oklab, var(--color-base-a6), var(--color-base-6) 20%);
+  }
+  .dark {
+    --shadow-ring-weak: var(--color-base-a3);
+    --shadow-ring: var(--color-base-a4);
+    --shadow-ring-strong: var(--color-base-a5);
+  }
+}
+html, body {
+  overscroll-behavior-y: none;
 }
 @property --tw-border-spacing-x {
   syntax: "<length>";
@@ -4162,6 +4892,11 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-space-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -4322,6 +5057,10 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -4340,6 +5079,7 @@
       --tw-rotate-z: initial;
       --tw-skew-x: initial;
       --tw-skew-y: initial;
+      --tw-space-y-reverse: 0;
       --tw-border-style: solid;
       --tw-leading: initial;
       --tw-font-weight: initial;
@@ -4377,6 +5117,7 @@
       --tw-drop-shadow-color: initial;
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
+      --tw-duration: initial;
     }
   }
 }