zabi-components 8.1.0 → 9.0.0

package/dist/zabi-components.css

@@ -48,7 +48,6 @@
     --tracking-tight: -0.025em;
     --tracking-normal: 0em;
     --tracking-wide: 0.025em;
-    --tracking-wider: 0.05em;
     --leading-tight: 1.25;
     --leading-snug: 1.375;
     --leading-relaxed: 1.625;
@@ -58,17 +57,17 @@
     --radius-xl: 0.75rem;
     --radius-2xl: 1rem;
     --radius-3xl: 1.5rem;
-    --shadow-sm: 0 1px 3px 0 rgb(var(--shadow-color) / var(--shadow-opacity)), 0 1px 2px -1px rgb(var(--shadow-color) / var(--shadow-opacity));
-    --shadow-md: 0 4px 6px -1px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 2px 4px -2px rgb(var(--shadow-color) / var(--shadow-opacity));
-    --shadow-lg: 0 10px 15px -3px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 4px 6px -4px rgb(var(--shadow-color) / var(--shadow-opacity));
-    --shadow-xl: 0 20px 25px -5px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 8px 10px -6px rgb(var(--shadow-color) / var(--shadow-opacity));
+    --shadow-sm: 0 1px 2px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 2px 6px -1px rgb(var(--shadow-color) / var(--shadow-opacity));
+    --shadow-md: 0 1px 3px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 6px 14px -2px rgb(var(--shadow-color) / var(--shadow-opacity));
+    --shadow-lg: 0 1px 2px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 10px 30px 0 rgb(var(--shadow-color) / var(--shadow-opacity));
+    --shadow-xl: 0 2px 4px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 20px 50px -8px rgb(var(--shadow-color) / var(--shadow-opacity));
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --blur-md: 12px;
-    --default-transition-duration: 150ms;
-    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --default-transition-duration: var(--duration-base);
+    --default-transition-timing-function: var(--ease-standard);
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
     --zabi-base-50: #fafafa;
@@ -92,10 +91,12 @@
     --zabi-base-900: #18181b;
     --zabi-base-925: #101013;
     --zabi-base-950: #09090b;
-    --font-family-sans: 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
+    --font-family-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-family-heading: var(--font-family-sans);
-    --font-family-mono: "Monaco", "Menlo", "Ubuntu Mono", monospace;
+    --font-family-display: var(--font-family-heading);
+    --font-family-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
     --font-heading: var(--font-family-heading);
+    --font-display: var(--font-family-display);
     --font-weight-regular: 400;
     --zabi-brand-50: #f4f6ff;
     --zabi-brand-100: #e9eeff;
@@ -119,17 +120,17 @@
     --color-brand-800: var(--zabi-brand-800);
     --color-brand-900: var(--zabi-brand-900);
     --color-brand-950: var(--zabi-brand-950);
-    --zabi-citron-50: #f6f7ef;
-    --zabi-citron-100: #edefdf;
-    --zabi-citron-200: #dcdfbf;
-    --zabi-citron-300: #c5ca95;
-    --zabi-citron-400: #aab063;
-    --zabi-citron-500: #8c9027;
-    --zabi-citron-600: #707400;
-    --zabi-citron-700: #5a5d00;
-    --zabi-citron-800: #454700;
-    --zabi-citron-900: #313200;
-    --zabi-citron-950: #202100;
+    --zabi-citron-50: #f4f8ee;
+    --zabi-citron-100: #e9f0de;
+    --zabi-citron-200: #d4e2bd;
+    --zabi-citron-300: #b9ce92;
+    --zabi-citron-400: #99b55e;
+    --zabi-citron-500: #769619;
+    --zabi-citron-600: #5d7900;
+    --zabi-citron-700: #4a6100;
+    --zabi-citron-800: #384a00;
+    --zabi-citron-900: #273500;
+    --zabi-citron-950: #192300;
     --color-citron-50: var(--zabi-citron-50);
     --color-citron-100: var(--zabi-citron-100);
     --color-citron-200: var(--zabi-citron-200);
@@ -163,17 +164,17 @@
     --color-accent-800: var(--zabi-accent-800);
     --color-accent-900: var(--zabi-accent-900);
     --color-accent-950: var(--zabi-accent-950);
-    --zabi-pine-50: #f0f8f5;
-    --zabi-pine-100: #e2f1eb;
-    --zabi-pine-200: #c5e4d7;
-    --zabi-pine-300: #9fd1bd;
-    --zabi-pine-400: #70ba9e;
-    --zabi-pine-500: #399c7a;
-    --zabi-pine-600: #00805e;
-    --zabi-pine-700: #00674a;
-    --zabi-pine-800: #004f37;
-    --zabi-pine-900: #003826;
-    --zabi-pine-950: #002518;
+    --zabi-pine-50: #f0f9f3;
+    --zabi-pine-100: #e1f2e8;
+    --zabi-pine-200: #c3e5d0;
+    --zabi-pine-300: #9cd3b2;
+    --zabi-pine-400: #6cbb8e;
+    --zabi-pine-500: #319e67;
+    --zabi-pine-600: #00804b;
+    --zabi-pine-700: #00683b;
+    --zabi-pine-800: #00502b;
+    --zabi-pine-900: #00391c;
+    --zabi-pine-950: #002610;
     --color-pine-50: var(--zabi-pine-50);
     --color-pine-100: var(--zabi-pine-100);
     --color-pine-200: var(--zabi-pine-200);
@@ -207,17 +208,17 @@
     --color-iris-800: var(--zabi-iris-800);
     --color-iris-900: var(--zabi-iris-900);
     --color-iris-950: var(--zabi-iris-950);
-    --zabi-warning-50: #fbf6ed;
-    --zabi-warning-100: #f7ecda;
-    --zabi-warning-200: #f1d9b6;
-    --zabi-warning-300: #e8bf87;
-    --zabi-warning-400: #db9e4c;
-    --zabi-warning-500: #c17b00;
-    --zabi-warning-600: #9e6000;
-    --zabi-warning-700: #824c00;
+    --zabi-warning-50: #fdf5ec;
+    --zabi-warning-100: #fbebda;
+    --zabi-warning-200: #f6d7b4;
+    --zabi-warning-300: #efbc84;
+    --zabi-warning-400: #e49a44;
+    --zabi-warning-500: #c67800;
+    --zabi-warning-600: #a05f00;
+    --zabi-warning-700: #834b00;
     --zabi-warning-800: #663800;
-    --zabi-warning-900: #4b2600;
-    --zabi-warning-950: #341800;
+    --zabi-warning-900: #4b2700;
+    --zabi-warning-950: #331800;
     --color-warning-50: var(--zabi-warning-50);
     --color-warning-100: var(--zabi-warning-100);
     --color-warning-200: var(--zabi-warning-200);
@@ -272,22 +273,36 @@
     --color-base-900: var(--zabi-base-900);
     --color-base-925: var(--zabi-base-925);
     --color-base-950: var(--zabi-base-950);
-    --color-surface-base: var(--color-base-150);
+    --color-surface-base: var(--color-base-50);
     --color-surface-raised: #ffffff;
     --color-surface-elevated: var(--color-base-100);
     --color-surface-overlay: #ffffff;
+    --color-surface-chrome: var(--color-surface-base);
+    --color-bar: var(--color-surface-chrome);
+    --color-bar-border: color-mix(in srgb, #18181b 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      & {
+        --color-bar-border: color-mix(in srgb, var(--color-headline) 10%, transparent);
+      }
+    }
+    --color-bar-brand: var(--color-action-primary);
+    --color-tabbar-active: var(--color-nav-menu-active);
     --color-surface-inset: var(--color-base-100);
     --color-surface-overlay-hover: var(--color-base-150);
     --color-border-overlay: rgba(9, 9, 11, 0.1);
     --color-background: var(--color-surface-base);
-    --color-background-secondary: var(--color-base-50);
+    --color-background-secondary: var(--color-base-100);
     --color-background-tertiary: var(--color-base-150);
-    --color-page: var(--color-base-150);
+    --color-page: var(--color-surface-base);
     --color-page-secondary: var(--color-base-200);
     --color-card: var(--color-surface-raised);
-    --color-card-hover: var(--color-base-100);
-    --color-card-active: var(--color-base-150);
+    --color-card-hover: var(--color-base-150);
+    --color-card-active: var(--color-base-200);
     --color-card-elevated: var(--color-surface-overlay);
+    --color-card-tint: var(--color-brand-100);
+    --color-card-flat: var(--color-card);
+    --color-card-flat-hover: var(--color-card-hover);
+    --color-card-flat-active: var(--color-card-active);
     --color-surface-1: var(--color-surface-raised);
     --color-surface-2: var(--color-surface-elevated);
     --color-surface-3: var(--color-base-75);
@@ -295,8 +310,15 @@
     --color-control-track: var(--color-base-400);
     --color-control-track-hover: var(--color-base-450);
     --color-control-track-active: var(--color-base-500);
+    --color-toggle-track: var(--color-base-200);
+    --color-toggle-track-hover: var(--color-base-250);
+    --color-toggle-track-active: var(--color-base-300);
+    --color-toggle-track-border: var(--color-input-border);
+    --color-toggle-knob: var(--color-base-500);
+    --color-toggle-knob-checked: var(--color-action-primary-text);
     --color-progress-fill: var(--color-action-primary);
     --color-progress-track: var(--color-input);
+    --color-progress-track-border: var(--color-input-border);
     --color-surface-hover: rgba(9, 9, 11, 0.09);
     --color-surface-active: rgba(9, 9, 11, 0.15);
     --color-overlay: rgba(0, 0, 0, 0.5);
@@ -304,9 +326,18 @@
     --color-input-border: var(--color-base-500);
     --color-input-border-hover: var(--color-base-550);
     --color-input-hover: var(--color-base-100);
-    --color-input-active: var(--color-base-200);
+    --color-input-active: color-mix(in srgb, #18181b 12%, #ffffff);
+    @supports (color: color-mix(in lab, red, red)) {
+      & {
+        --color-input-active: color-mix(in srgb, var(--zabi-base-900) 12%, var(--color-input));
+      }
+    }
     --color-input-focus: var(--color-surface-raised);
-    --color-input-disabled: var(--color-surface-base);
+    --color-input-disabled: var(--color-base-150);
+    --color-input-solid: var(--color-input);
+    --color-input-solid-hover: var(--color-input-hover);
+    --color-input-solid-focus: var(--color-input-focus);
+    --color-input-solid-active: var(--color-input-active);
     --color-headline: var(--color-base-900);
     --color-body: var(--color-base-800);
     --color-description: var(--color-base-600);
@@ -334,6 +365,9 @@
     --color-border-medium: var(--color-base-400);
     --color-border-strong: var(--color-base-500);
     --color-control-border: var(--color-base-500);
+    --color-segment-thumb: var(--color-surface-raised);
+    --color-segment-thumb-text: var(--color-headline);
+    --color-segment-thumb-border: var(--color-control-border);
     --color-focus: var(--color-brand-600);
     --color-focus-weak: var(--color-brand-700);
     --color-focus-medium: var(--color-brand-800);
@@ -354,31 +388,31 @@
     --color-success-weak: var(--color-pine-700);
     --color-success-medium: var(--color-pine-800);
     --color-success-strong: var(--color-pine-900);
-    --color-success-subtle: var(--color-pine-200);
-    --color-success-border: var(--color-pine-300);
+    --color-success-subtle: var(--color-pine-100);
+    --color-success-border: var(--color-pine-200);
     --color-warning: var(--color-warning-600);
     --color-warning-weak: var(--color-warning-700);
     --color-warning-medium: var(--color-warning-800);
     --color-warning-strong: var(--color-warning-900);
-    --color-warning-subtle: var(--color-warning-200);
-    --color-warning-border: var(--color-warning-300);
+    --color-warning-subtle: var(--color-warning-100);
+    --color-warning-border: var(--color-warning-200);
     --color-error: var(--color-error-600);
     --color-error-weak: var(--color-error-700);
     --color-error-medium: var(--color-error-800);
     --color-error-strong: var(--color-error-900);
-    --color-error-subtle: var(--color-error-200);
-    --color-error-border: var(--color-error-300);
+    --color-error-subtle: var(--color-error-100);
+    --color-error-border: var(--color-error-200);
     --color-energetic: var(--color-citron-600);
     --color-energetic-weak: var(--color-citron-700);
     --color-energetic-medium: var(--color-citron-800);
     --color-energetic-strong: var(--color-citron-900);
-    --color-energetic-subtle: var(--color-citron-200);
-    --color-energetic-border: var(--color-citron-300);
+    --color-energetic-subtle: var(--color-citron-100);
+    --color-energetic-border: var(--color-citron-200);
     --color-accent: var(--color-accent-600);
     --color-accent-hover: var(--color-accent-700);
     --color-accent-active: var(--color-accent-800);
-    --color-accent-subtle: var(--color-accent-200);
-    --color-accent-border: var(--color-accent-300);
+    --color-accent-subtle: var(--color-accent-100);
+    --color-accent-border: var(--color-accent-200);
     --color-accent-text: var(--color-accent-700);
     --zabi-on-accent: #ffffff;
     --zabi-on-accent-dark: var(--zabi-accent-950);
@@ -387,29 +421,30 @@
     --color-neutral-weak: var(--color-base-600);
     --color-neutral-medium: var(--color-base-700);
     --color-neutral-strong: var(--color-base-900);
-    --color-neutral-subtle: var(--color-base-250);
-    --color-neutral-border: var(--color-base-300);
+    --color-neutral-subtle: var(--color-base-200);
+    --color-neutral-border: var(--color-base-250);
     --color-info: var(--color-iris-600);
     --color-info-weak: var(--color-iris-700);
     --color-info-medium: var(--color-iris-800);
     --color-info-strong: var(--color-iris-900);
     --color-info-active: var(--color-iris-400);
-    --color-info-subtle: var(--color-iris-200);
-    --color-info-border: var(--color-iris-300);
+    --color-info-subtle: var(--color-iris-100);
+    --color-info-border: var(--color-iris-200);
     --color-info-text: var(--color-iris-700);
     --color-action-primary: var(--color-brand-600);
     --color-action-primary-hover: var(--color-brand-700);
     --color-action-primary-active: var(--color-brand-800);
-    --color-action-primary-subtle: var(--color-brand-200);
-    --color-action-primary-subtle-hover: var(--color-brand-300);
-    --color-action-primary-subtle-active: color-mix(in srgb, #92a9ff 50%, #b5c6ff);
+    --color-action-primary-subtle: var(--color-brand-100);
+    --color-action-primary-subtle-hover: var(--color-brand-200);
+    --color-action-primary-border: var(--color-brand-200);
+    --color-action-primary-subtle-active: color-mix(in srgb, #b5c6ff 50%, #d3dcff);
     @supports (color: color-mix(in lab, red, red)) {
       & {
-        --color-action-primary-subtle-active: color-mix(in srgb, var(--color-brand-400) 50%, var(--color-brand-300));
+        --color-action-primary-subtle-active: color-mix(in srgb, var(--color-brand-300) 50%, var(--color-brand-200));
       }
     }
     --zabi-on-brand: #ffffff;
-    --zabi-on-brand-dark: var(--zabi-brand-950);
+    --zabi-on-brand-dark: var(--zabi-on-brand);
     --color-on-brand: var(--zabi-on-brand);
     --color-action-primary-text: var(--color-on-brand);
     --color-action-secondary: rgba(9, 9, 11, 0.1);
@@ -418,6 +453,25 @@
     --color-action-secondary-subtle: var(--color-base-100);
     --color-action-secondary-subtle-hover: var(--color-base-200);
     --color-action-secondary-text: var(--color-headline);
+    --color-action-tonal: var(--color-action-primary-subtle);
+    --color-action-tonal-hover: var(--color-action-primary-subtle-hover);
+    --color-action-tonal-active: color-mix(in srgb, #b5c6ff 50%, #d3dcff);
+    @supports (color: color-mix(in lab, red, red)) {
+      & {
+        --color-action-tonal-active: color-mix(in srgb, var(--color-brand-300) 50%, var(--color-brand-200));
+      }
+    }
+    --color-action-tonal-text: var(--color-brand-800);
+    --color-chip: var(--color-base-200);
+    --color-chip-hover: var(--color-base-300);
+    --color-chip-active: var(--color-base-350);
+    --color-chip-text: var(--color-headline);
+    --color-chip-selected: var(--color-action-tonal);
+    --color-chip-selected-hover: var(--color-action-tonal-hover);
+    --color-chip-selected-active: var(--color-action-tonal-active);
+    --color-chip-selected-text: var(--color-action-tonal-text);
+    --color-action-outline-border: var(--color-input-border);
+    --color-action-outline-border-hover: var(--color-input-border-hover);
     --color-action-disabled: var(--color-base-250);
     --color-action-disabled-text: var(--color-base-500);
     --color-action-disabled-border: var(--color-base-300);
@@ -434,7 +488,107 @@
     }
     --color-action-danger-text: var(--color-error-50);
     --shadow-color: 24 24 27;
-    --shadow-opacity: 0.14;
+    --shadow-opacity: 0.1;
+    --shadow-opacity-contact: 0.06;
+    --shadow-material: 0 1px 2px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 10px 30px 0 rgb(var(--shadow-color) / var(--shadow-opacity));
+    --duration-fast: 100ms;
+    --duration-base: 150ms;
+    --duration-moderate: 200ms;
+    --duration-slow: 300ms;
+    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --material-alpha-thin: 58%;
+    --material-alpha-regular: 84%;
+    --material-alpha-thick: 88%;
+    --color-material-thin: color-mix(in srgb, #fafafa 58%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      & {
+        --color-material-thin: color-mix(in srgb, var(--color-surface-chrome) var(--material-alpha-thin), transparent);
+      }
+    }
+    --color-material-regular: color-mix(in srgb, #fafafa 84%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      & {
+        --color-material-regular: color-mix(in srgb, var(--color-surface-chrome) var(--material-alpha-regular), transparent);
+      }
+    }
+    --color-material-thick: color-mix(in srgb, #ffffff 88%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      & {
+        --color-material-thick: color-mix(in srgb, var(--color-surface-overlay) var(--material-alpha-thick), transparent);
+      }
+    }
+    --material-blur-thin: 16px;
+    --material-blur-regular: 24px;
+    --material-blur-thick: 32px;
+    --material-saturate: 180%;
+    --material-backdrop-brightness: 1;
+    --material-filter-thin: blur(var(--material-blur-thin)) saturate(var(--material-saturate)) brightness(var(--material-backdrop-brightness));
+    --material-filter-regular: blur(var(--material-blur-regular)) saturate(var(--material-saturate)) brightness(var(--material-backdrop-brightness));
+    --material-filter-thick: blur(var(--material-blur-thick)) saturate(var(--material-saturate)) brightness(var(--material-backdrop-brightness));
+    --color-material-highlight: color-mix(in srgb, #fafafa 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      & {
+        --color-material-highlight: color-mix(in srgb, var(--zabi-base-50) 60%, transparent);
+      }
+    }
+    --color-material-rim: color-mix(in srgb, #18181b 9%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      & {
+        --color-material-rim: color-mix(in srgb, var(--zabi-base-900) 9%, transparent);
+      }
+    }
+    --gradient-canvas-strength: 55%;
+    --color-canvas-wash-brand: color-mix(in srgb, #b5c6ff 55%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      & {
+        --color-canvas-wash-brand: color-mix(in srgb, var(--color-brand-300) var(--gradient-canvas-strength), transparent);
+      }
+    }
+    --color-canvas-wash-accent: color-mix(in srgb, #b9ce92 55%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      & {
+        --color-canvas-wash-accent: color-mix(in srgb, var(--color-accent-300) var(--gradient-canvas-strength), transparent);
+      }
+    }
+    --gradient-canvas: radial-gradient(90% 46% at 8% 0%, var(--color-canvas-wash-brand), transparent 70%),
+    radial-gradient(80% 40% at 100% 4%, var(--color-canvas-wash-accent), transparent 70%);
+    --gradient-control-top-strength: 0%;
+    --gradient-control-bottom-strength: 14%;
+    --gradient-control-accent-top-strength: var(--gradient-control-top-strength);
+    --gradient-control-accent-bottom-strength: var(--gradient-control-bottom-strength);
+    --color-control-gradient-start: color-mix(in srgb, #fafafa 0%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      & {
+        --color-control-gradient-start: color-mix(in srgb, var(--zabi-base-50) var(--gradient-control-top-strength), transparent);
+      }
+    }
+    --color-control-gradient-end: color-mix(in srgb, #09090b 14%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      & {
+        --color-control-gradient-end: color-mix(in srgb, var(--zabi-base-950) var(--gradient-control-bottom-strength), transparent);
+      }
+    }
+    --gradient-control: linear-gradient(to bottom, var(--color-control-gradient-start), var(--color-control-gradient-end));
+    --color-control-gradient-accent-start: color-mix(in srgb, #fafafa 0%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      & {
+        --color-control-gradient-accent-start: color-mix(in srgb, var(--zabi-base-50) var(--gradient-control-accent-top-strength), transparent);
+      }
+    }
+    --color-control-gradient-accent-end: color-mix(in srgb, #09090b 14%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      & {
+        --color-control-gradient-accent-end: color-mix(in srgb, var(--zabi-base-950) var(--gradient-control-accent-bottom-strength), transparent);
+      }
+    }
+    --gradient-control-accent: linear-gradient(to bottom, var(--color-control-gradient-accent-start), var(--color-control-gradient-accent-end));
+    --shadow-control-highlight: inset 0 1px 0 color-mix(in srgb, #fafafa 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      & {
+        --shadow-control-highlight: inset 0 1px 0 color-mix(in srgb, var(--zabi-base-50) 40%, transparent);
+      }
+    }
     --spacing-xs: 0.25rem;
     --spacing-sm: 0.5rem;
     --spacing-md: 1rem;
@@ -700,9 +854,6 @@
   .inset-y-0 {
     inset-block: calc(var(--spacing) * 0);
   }
-  .-start-0\.5 {
-    inset-inline-start: calc(var(--spacing) * -0.5);
-  }
   .start-0 {
     inset-inline-start: calc(var(--spacing) * 0);
   }
@@ -721,6 +872,9 @@
   .end-0 {
     inset-inline-end: calc(var(--spacing) * 0);
   }
+  .end-0\.5 {
+    inset-inline-end: calc(var(--spacing) * 0.5);
+  }
   .end-1 {
     inset-inline-end: calc(var(--spacing) * 1);
   }
@@ -802,6 +956,9 @@
   .right-\[calc\(env\(safe-area-inset-right\,0px\)_\+_var\(--toaster-edge\)\)\] {
     right: calc(env(safe-area-inset-right,0px) + var(--toaster-edge));
   }
+  .bottom-\(--shell-nav-bottom\) {
+    bottom: var(--shell-nav-bottom);
+  }
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
@@ -835,6 +992,9 @@
   .bottom-\[calc\(var\(--app-shell-bottom-inset\,0px\)\+var\(--fab-bottom-offset\,0px\)\+16px\)\] {
     bottom: calc(var(--app-shell-bottom-inset,0px) + var(--fab-bottom-offset,0px) + 16px);
   }
+  .bottom-\[calc\(var\(--app-shell-footer-overlay\,0px\)\+0\.5rem\)\] {
+    bottom: calc(var(--app-shell-footer-overlay,0px) + 0.5rem);
+  }
   .bottom-\[max\(0\.5rem\,env\(safe-area-inset-bottom\)\)\] {
     bottom: max(0.5rem, env(safe-area-inset-bottom));
   }
@@ -844,6 +1004,9 @@
   .bottom-full {
     bottom: 100%;
   }
+  .-left-0\.5 {
+    left: calc(var(--spacing) * -0.5);
+  }
   .-left-px {
     left: -1px;
   }
@@ -865,9 +1028,15 @@
   .left-full {
     left: 100%;
   }
+  .isolate {
+    isolation: isolate;
+  }
   .z-10 {
     z-index: 10;
   }
+  .order-last {
+    order: 9999;
+  }
   .row-span-3 {
     grid-row: span 3 / span 3;
   }
@@ -907,6 +1076,9 @@
       max-width: 96rem;
     }
   }
+  .-m-1 {
+    margin: calc(var(--spacing) * -1);
+  }
   .-m-2 {
     margin: calc(var(--spacing) * -2);
   }
@@ -916,12 +1088,15 @@
   .m-4 {
     margin: calc(var(--spacing) * 4);
   }
+  .m-xl {
+    margin: var(--spacing-xl);
+  }
+  .m-xs {
+    margin: var(--spacing-xs);
+  }
   .-mx-4 {
     margin-inline: calc(var(--spacing) * -4);
   }
-  .-mx-8 {
-    margin-inline: calc(var(--spacing) * -8);
-  }
   .mx-1 {
     margin-inline: calc(var(--spacing) * 1);
   }
@@ -973,6 +1148,12 @@
   .-me-2 {
     margin-inline-end: calc(var(--spacing) * -2);
   }
+  .me-2 {
+    margin-inline-end: calc(var(--spacing) * 2);
+  }
+  .me-auto {
+    margin-inline-end: auto;
+  }
   .me-px {
     margin-inline-end: 1px;
   }
@@ -982,6 +1163,12 @@
   .-mt-2 {
     margin-top: calc(var(--spacing) * -2);
   }
+  .-mt-sm {
+    margin-top: calc(var(--spacing-sm) * -1);
+  }
+  .mt-0 {
+    margin-top: calc(var(--spacing) * 0);
+  }
   .mt-0\.5 {
     margin-top: calc(var(--spacing) * 0.5);
   }
@@ -1024,6 +1211,9 @@
   .mt-auto {
     margin-top: auto;
   }
+  .mt-md {
+    margin-top: var(--spacing-md);
+  }
   .-mr-0\.5 {
     margin-right: calc(var(--spacing) * -0.5);
   }
@@ -1168,6 +1358,14 @@
     width: calc(var(--spacing) * 12);
     height: calc(var(--spacing) * 12);
   }
+  .size-14 {
+    width: calc(var(--spacing) * 14);
+    height: calc(var(--spacing) * 14);
+  }
+  .size-\[16px\] {
+    width: 16px;
+    height: 16px;
+  }
   .size-\[20px\] {
     width: 20px;
     height: 20px;
@@ -1180,6 +1378,10 @@
     width: 32px;
     height: 32px;
   }
+  .size-\[44px\] {
+    width: 44px;
+    height: 44px;
+  }
   .size-\[48px\] {
     width: 48px;
     height: 48px;
@@ -1233,6 +1435,9 @@
   .h-12 {
     height: calc(var(--spacing) * 12);
   }
+  .h-14 {
+    height: calc(var(--spacing) * 14);
+  }
   .h-16 {
     height: calc(var(--spacing) * 16);
   }
@@ -1245,6 +1450,9 @@
   .h-40 {
     height: calc(var(--spacing) * 40);
   }
+  .h-44 {
+    height: calc(var(--spacing) * 44);
+  }
   .h-48 {
     height: calc(var(--spacing) * 48);
   }
@@ -1344,6 +1552,9 @@
   .min-h-8 {
     min-height: calc(var(--spacing) * 8);
   }
+  .min-h-9 {
+    min-height: calc(var(--spacing) * 9);
+  }
   .min-h-10 {
     min-height: calc(var(--spacing) * 10);
   }
@@ -1365,6 +1576,9 @@
   .min-h-\[32px\] {
     min-height: 32px;
   }
+  .min-h-\[44px\] {
+    min-height: 44px;
+  }
   .min-h-\[100px\] {
     min-height: 100px;
   }
@@ -1389,6 +1603,9 @@
   .w-3 {
     width: calc(var(--spacing) * 3);
   }
+  .w-3\/5 {
+    width: calc(3/5 * 100%);
+  }
   .w-4 {
     width: calc(var(--spacing) * 4);
   }
@@ -1413,6 +1630,9 @@
   .w-12 {
     width: calc(var(--spacing) * 12);
   }
+  .w-20 {
+    width: calc(var(--spacing) * 20);
+  }
   .w-32 {
     width: calc(var(--spacing) * 32);
   }
@@ -1431,9 +1651,24 @@
   .w-80 {
     width: calc(var(--spacing) * 80);
   }
+  .w-96 {
+    width: calc(var(--spacing) * 96);
+  }
   .w-\[3px\] {
     width: 3px;
   }
+  .w-\[32rem\] {
+    width: 32rem;
+  }
+  .w-\[40rem\] {
+    width: 40rem;
+  }
+  .w-\[44rem\] {
+    width: 44rem;
+  }
+  .w-\[56rem\] {
+    width: 56rem;
+  }
   .w-\[72px\] {
     width: 72px;
   }
@@ -1501,6 +1736,9 @@
   .max-w-7xl {
     max-width: var(--container-7xl);
   }
+  .max-w-24 {
+    max-width: calc(var(--spacing) * 24);
+  }
   .max-w-\[266px\] {
     max-width: 266px;
   }
@@ -1570,6 +1808,9 @@
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
+  .min-w-8 {
+    min-width: calc(var(--spacing) * 8);
+  }
   .min-w-11 {
     min-width: calc(var(--spacing) * 11);
   }
@@ -1594,6 +1835,9 @@
   .min-w-\[24px\] {
     min-width: 24px;
   }
+  .min-w-\[28px\] {
+    min-width: 28px;
+  }
   .min-w-\[32px\] {
     min-width: 32px;
   }
@@ -1631,6 +1875,9 @@
   .flex-\[1_1_8rem\] {
     flex: 1 1 8rem;
   }
+  .flex-shrink {
+    flex-shrink: 1;
+  }
   .flex-shrink-0 {
     flex-shrink: 0;
   }
@@ -1702,6 +1949,9 @@
   .animate-\[slideUp_0\.3s_ease-out\] {
     animation: slideUp 0.3s ease-out;
   }
+  .animate-\[slideUp_var\(--duration-slow\)_var\(--ease-out\)\] {
+    animation: slideUp var(--duration-slow) var(--ease-out);
+  }
   .animate-pulse {
     animation: var(--animate-pulse);
   }
@@ -1726,6 +1976,12 @@
   .cursor-pointer {
     cursor: pointer;
   }
+  .cursor-progress {
+    cursor: progress;
+  }
+  .cursor-text {
+    cursor: text;
+  }
   .touch-pan-y {
     --tw-pan-y: pan-y;
     touch-action: var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,);
@@ -1736,12 +1992,21 @@
   .resize {
     resize: both;
   }
+  .resize-none {
+    resize: none;
+  }
   .resize-y {
     resize: vertical;
   }
+  .scroll-px-8 {
+    scroll-padding-inline: calc(var(--spacing) * 8);
+  }
   .scroll-pt-\(--app-shell-top-inset\) {
     scroll-padding-top: var(--app-shell-top-inset);
   }
+  .scroll-pb-\(--app-shell-bottom-inset\) {
+    scroll-padding-bottom: var(--app-shell-bottom-inset);
+  }
   .list-disc {
     list-style-type: disc;
   }
@@ -1768,6 +2033,9 @@
   .flex-row {
     flex-direction: row;
   }
+  .flex-nowrap {
+    flex-wrap: nowrap;
+  }
   .flex-wrap {
     flex-wrap: wrap;
   }
@@ -1786,6 +2054,9 @@
   .items-stretch {
     align-items: stretch;
   }
+  .justify-around {
+    justify-content: space-around;
+  }
   .justify-between {
     justify-content: space-between;
   }
@@ -1837,9 +2108,15 @@
   .gap-14 {
     gap: calc(var(--spacing) * 14);
   }
+  .gap-\[2px\] {
+    gap: 2px;
+  }
   .gap-\[4px\] {
     gap: 4px;
   }
+  .gap-\[6px\] {
+    gap: 6px;
+  }
   .gap-\[8px\] {
     gap: 8px;
   }
@@ -1852,6 +2129,9 @@
   .gap-md {
     gap: var(--spacing-md);
   }
+  .gap-sm {
+    gap: var(--spacing-sm);
+  }
   .space-y-0 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1936,6 +2216,24 @@
       margin-block-end: calc(8px * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-y-md {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(var(--spacing-md) * var(--tw-space-y-reverse));
+      margin-block-end: calc(var(--spacing-md) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .space-y-sm {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(var(--spacing-sm) * var(--tw-space-y-reverse));
+      margin-block-end: calc(var(--spacing-sm) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .gap-x-2 {
+    -moz-column-gap: calc(var(--spacing) * 2);
+         column-gap: calc(var(--spacing) * 2);
+  }
   .gap-x-4 {
     -moz-column-gap: calc(var(--spacing) * 4);
          column-gap: calc(var(--spacing) * 4);
@@ -1944,9 +2242,9 @@
     -moz-column-gap: calc(var(--spacing) * 6);
          column-gap: calc(var(--spacing) * 6);
   }
-  .gap-x-8 {
-    -moz-column-gap: calc(var(--spacing) * 8);
-         column-gap: calc(var(--spacing) * 8);
+  .gap-x-10 {
+    -moz-column-gap: calc(var(--spacing) * 10);
+         column-gap: calc(var(--spacing) * 10);
   }
   .gap-x-12 {
     -moz-column-gap: calc(var(--spacing) * 12);
@@ -1956,6 +2254,10 @@
     -moz-column-gap: 12px;
          column-gap: 12px;
   }
+  .gap-x-xs {
+    -moz-column-gap: var(--spacing-xs);
+         column-gap: var(--spacing-xs);
+  }
   .space-x-4 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -1969,8 +2271,11 @@
   .gap-y-2 {
     row-gap: calc(var(--spacing) * 2);
   }
-  .gap-y-6 {
-    row-gap: calc(var(--spacing) * 6);
+  .gap-y-5 {
+    row-gap: calc(var(--spacing) * 5);
+  }
+  .gap-y-8 {
+    row-gap: calc(var(--spacing) * 8);
   }
   .gap-y-10 {
     row-gap: calc(var(--spacing) * 10);
@@ -1992,6 +2297,9 @@
       border-color: var(--color-border);
     }
   }
+  .self-center {
+    align-self: center;
+  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -2027,6 +2335,9 @@
   .overscroll-contain {
     overscroll-behavior: contain;
   }
+  .overscroll-x-contain {
+    overscroll-behavior-x: contain;
+  }
   .overscroll-y-contain {
     overscroll-behavior-y: contain;
   }
@@ -2060,8 +2371,8 @@
   .rounded-\[calc\(var\(--radius-container\)-0\.5rem\)\] {
     border-radius: calc(var(--radius-container) - 0.5rem);
   }
-  .rounded-\[calc\(var\(--radius-container\)-0\.5rem-1px\)\] {
-    border-radius: calc(var(--radius-container) - 0.5rem - 1px);
+  .rounded-\[calc\(var\(--radius-container\)-0\.5rem-var\(--zabi-alert-border-width\,1px\)\)\] {
+    border-radius: calc(var(--radius-container) - 0.5rem - var(--zabi-alert-border-width,1px));
   }
   .rounded-\[calc\(var\(--radius-container\)-0\.25rem-1px\)\] {
     border-radius: calc(var(--radius-container) - 0.25rem - 1px);
@@ -2132,10 +2443,6 @@
     border-top-left-radius: 0.25rem;
     border-top-right-radius: 0.25rem;
   }
-  .rounded-t-\[calc\(var\(--radius-overlay\)-1px\)\] {
-    border-top-left-radius: calc(var(--radius-overlay) - 1px);
-    border-top-right-radius: calc(var(--radius-overlay) - 1px);
-  }
   .rounded-t-control {
     border-top-left-radius: var(--radius-control);
     border-top-right-radius: var(--radius-control);
@@ -2190,9 +2497,13 @@
     border-style: var(--tw-border-style);
     border-width: 2px;
   }
-  .border-s {
-    border-inline-start-style: var(--tw-border-style);
-    border-inline-start-width: 1px;
+  .border-\[3px\] {
+    border-style: var(--tw-border-style);
+    border-width: 3px;
+  }
+  .border-\[length\:var\(--zabi-alert-border-width\,1px\)\] {
+    border-style: var(--tw-border-style);
+    border-width: var(--zabi-alert-border-width,1px);
   }
   .border-e {
     border-inline-end-style: var(--tw-border-style);
@@ -2214,6 +2525,10 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
   }
+  .border-b-0 {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 0px;
+  }
   .border-b-2 {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 2px;
@@ -2230,6 +2545,12 @@
     --tw-border-style: none;
     border-style: none;
   }
+  .border-\(--color-surface-overlay\) {
+    border-color: var(--color-surface-overlay);
+  }
+  .border-\[color\:var\(--zabi-list-row-border-color\,transparent\)\] {
+    border-color: var(--zabi-list-row-border-color,transparent);
+  }
   .border-\[var\(--color-success\)\] {
     border-color: var(--color-success);
   }
@@ -2242,6 +2563,12 @@
   .border-action-primary {
     border-color: var(--color-action-primary);
   }
+  .border-action-primary-border {
+    border-color: var(--color-action-primary-border);
+  }
+  .border-bar {
+    border-color: var(--color-bar);
+  }
   .border-base-200 {
     border-color: var(--color-base-200);
   }
@@ -2305,6 +2632,9 @@
   .border-primary {
     border-color: var(--color-primary);
   }
+  .border-progress-track-border {
+    border-color: var(--color-progress-track-border);
+  }
   .border-success {
     border-color: var(--color-success);
   }
@@ -2335,6 +2665,9 @@
   .bg-\(--color-surface-2\) {
     background-color: var(--color-surface-2);
   }
+  .bg-\(--color-toggle-track\) {
+    background-color: var(--color-toggle-track);
+  }
   .bg-accent {
     background-color: var(--color-accent);
   }
@@ -2371,9 +2704,15 @@
   .bg-action-secondary-active {
     background-color: var(--color-action-secondary-active);
   }
+  .bg-action-tonal {
+    background-color: var(--color-action-tonal);
+  }
   .bg-background {
     background-color: var(--color-background);
   }
+  .bg-bar-brand {
+    background-color: var(--color-bar-brand);
+  }
   .bg-base-50 {
     background-color: var(--color-base-50);
   }
@@ -2403,14 +2742,38 @@
   .bg-brand-100 {
     background-color: var(--color-brand-100);
   }
+  .bg-brand-500 {
+    background-color: var(--color-brand-500);
+  }
   .bg-card {
     background-color: var(--color-card);
   }
+  .bg-card-active {
+    background-color: var(--color-card-active);
+  }
   .bg-card-elevated {
     background-color: var(--color-card-elevated);
   }
-  .bg-control-track {
-    background-color: var(--color-control-track);
+  .bg-card-flat {
+    background-color: var(--color-card-flat);
+  }
+  .bg-card-flat-active {
+    background-color: var(--color-card-flat-active);
+  }
+  .bg-card-tint {
+    background-color: var(--color-card-tint);
+  }
+  .bg-chip {
+    background-color: var(--color-chip);
+  }
+  .bg-chip-selected {
+    background-color: var(--color-chip-selected);
+  }
+  .bg-chip-selected-active {
+    background-color: var(--color-chip-selected-active);
+  }
+  .bg-chip-selected-hover {
+    background-color: var(--color-chip-selected-hover);
   }
   .bg-current {
     background-color: currentcolor;
@@ -2439,6 +2802,9 @@
   .bg-input {
     background-color: var(--color-input);
   }
+  .bg-input-disabled {
+    background-color: var(--color-input-disabled);
+  }
   .bg-nav-menu-active {
     background-color: var(--color-nav-menu-active);
   }
@@ -2481,6 +2847,9 @@
   .bg-surface-base {
     background-color: var(--color-surface-base);
   }
+  .bg-surface-chrome {
+    background-color: var(--color-surface-chrome);
+  }
   .bg-surface-elevated {
     background-color: var(--color-surface-elevated);
   }
@@ -2504,6 +2873,12 @@
   .bg-surface-raised {
     background-color: var(--color-surface-raised);
   }
+  .bg-tabbar-active {
+    background-color: var(--color-tabbar-active);
+  }
+  .bg-toggle-track {
+    background-color: var(--color-toggle-track);
+  }
   .bg-tooltip-bg {
     background-color: var(--color-tooltip-bg);
   }
@@ -2526,6 +2901,9 @@
     }
     background-image: linear-gradient(var(--tw-gradient-stops));
   }
+  .bg-none {
+    background-image: none;
+  }
   .from-transparent {
     --tw-gradient-from: transparent;
     --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));
@@ -2557,6 +2935,9 @@
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
+  .p-2xl {
+    padding: var(--spacing-2xl);
+  }
   .p-3 {
     padding: calc(var(--spacing) * 3);
   }
@@ -2572,6 +2953,9 @@
   .p-8 {
     padding: calc(var(--spacing) * 8);
   }
+  .p-\[4px\] {
+    padding: 4px;
+  }
   .p-\[16px\] {
     padding: 16px;
   }
@@ -2584,6 +2968,12 @@
   .p-md {
     padding: var(--spacing-md);
   }
+  .p-sm {
+    padding: var(--spacing-sm);
+  }
+  .p-xs {
+    padding: var(--spacing-xs);
+  }
   .px-0 {
     padding-inline: calc(var(--spacing) * 0);
   }
@@ -2611,18 +3001,21 @@
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
-  .px-8 {
-    padding-inline: calc(var(--spacing) * 8);
-  }
-  .px-\[4px\] {
-    padding-inline: 4px;
+  .px-\[2px\] {
+    padding-inline: 2px;
   }
   .px-\[5px\] {
     padding-inline: 5px;
   }
+  .px-\[6px\] {
+    padding-inline: 6px;
+  }
   .px-\[8px\] {
     padding-inline: 8px;
   }
+  .px-\[10px\] {
+    padding-inline: 10px;
+  }
   .px-\[12px\] {
     padding-inline: 12px;
   }
@@ -2635,6 +3028,12 @@
   .px-\[max\(8px\,env\(safe-area-inset-left\)\,env\(safe-area-inset-right\)\)\] {
     padding-inline: max(8px, env(safe-area-inset-left), env(safe-area-inset-right));
   }
+  .px-lg {
+    padding-inline: var(--spacing-lg);
+  }
+  .px-md {
+    padding-inline: var(--spacing-md);
+  }
   .py-0 {
     padding-block: calc(var(--spacing) * 0);
   }
@@ -2668,9 +3067,6 @@
   .py-8 {
     padding-block: calc(var(--spacing) * 8);
   }
-  .py-10 {
-    padding-block: calc(var(--spacing) * 10);
-  }
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
@@ -2683,6 +3079,9 @@
   .py-24 {
     padding-block: calc(var(--spacing) * 24);
   }
+  .py-\[2px\] {
+    padding-block: 2px;
+  }
   .py-\[3px\] {
     padding-block: 3px;
   }
@@ -2707,9 +3106,15 @@
   .ps-4 {
     padding-inline-start: calc(var(--spacing) * 4);
   }
+  .ps-7 {
+    padding-inline-start: calc(var(--spacing) * 7);
+  }
   .ps-\[4px\] {
     padding-inline-start: 4px;
   }
+  .ps-\[12px\] {
+    padding-inline-start: 12px;
+  }
   .pe-8 {
     padding-inline-end: calc(var(--spacing) * 8);
   }
@@ -2749,6 +3154,9 @@
   .pt-7 {
     padding-top: calc(var(--spacing) * 7);
   }
+  .pt-12 {
+    padding-top: calc(var(--spacing) * 12);
+  }
   .pt-14 {
     padding-top: calc(var(--spacing) * 14);
   }
@@ -2785,6 +3193,9 @@
   .pr-5 {
     padding-right: calc(var(--spacing) * 5);
   }
+  .pr-\[calc\(env\(safe-area-inset-right\)\+12px\)\] {
+    padding-right: calc(env(safe-area-inset-right) + 12px);
+  }
   .pr-\[env\(safe-area-inset-right\)\] {
     padding-right: env(safe-area-inset-right);
   }
@@ -2797,6 +3208,9 @@
   .pr-\[max\(24px\,env\(safe-area-inset-right\,0px\)\)\] {
     padding-right: max(24px, env(safe-area-inset-right,0px));
   }
+  .pb-\(--app-shell-bottom-inset\) {
+    padding-bottom: var(--app-shell-bottom-inset);
+  }
   .pb-1 {
     padding-bottom: calc(var(--spacing) * 1);
   }
@@ -2809,12 +3223,21 @@
   .pb-4 {
     padding-bottom: calc(var(--spacing) * 4);
   }
+  .pb-6 {
+    padding-bottom: calc(var(--spacing) * 6);
+  }
+  .pb-8 {
+    padding-bottom: calc(var(--spacing) * 8);
+  }
   .pb-20 {
     padding-bottom: calc(var(--spacing) * 20);
   }
   .pb-24 {
     padding-bottom: calc(var(--spacing) * 24);
   }
+  .pb-\[8px\] {
+    padding-bottom: 8px;
+  }
   .pb-\[16px\] {
     padding-bottom: 16px;
   }
@@ -2827,12 +3250,12 @@
   .pb-\[calc\(1\.5rem\+env\(safe-area-inset-bottom\,0px\)\)\] {
     padding-bottom: calc(1.5rem + env(safe-area-inset-bottom,0px));
   }
-  .pb-\[calc\(2rem\+env\(safe-area-inset-bottom\,0px\)\)\] {
-    padding-bottom: calc(2rem + env(safe-area-inset-bottom,0px));
-  }
   .pb-\[calc\(16px\+env\(safe-area-inset-bottom\,0px\)\)\] {
     padding-bottom: calc(16px + env(safe-area-inset-bottom,0px));
   }
+  .pb-\[calc\(env\(safe-area-inset-bottom\)\+12px\)\] {
+    padding-bottom: calc(env(safe-area-inset-bottom) + 12px);
+  }
   .pb-\[env\(safe-area-inset-bottom\)\] {
     padding-bottom: env(safe-area-inset-bottom);
   }
@@ -2848,6 +3271,9 @@
   .pb-\[max\(24px\,calc\(env\(safe-area-inset-bottom\,0px\)_\+_8px\)\)\] {
     padding-bottom: max(24px, calc(env(safe-area-inset-bottom,0px) + 8px));
   }
+  .pl-\(--shell-content-pl\) {
+    padding-left: var(--shell-content-pl);
+  }
   .pl-4 {
     padding-left: calc(var(--spacing) * 4);
   }
@@ -2860,6 +3286,9 @@
   .pl-\[32px\] {
     padding-left: 32px;
   }
+  .pl-\[calc\(env\(safe-area-inset-left\)\+12px\)\] {
+    padding-left: calc(env(safe-area-inset-left) + 12px);
+  }
   .pl-\[env\(safe-area-inset-left\)\] {
     padding-left: env(safe-area-inset-left);
   }
@@ -2875,6 +3304,9 @@
   .text-center {
     text-align: center;
   }
+  .text-end {
+    text-align: end;
+  }
   .text-left {
     text-align: left;
   }
@@ -2890,6 +3322,9 @@
   .align-top {
     vertical-align: top;
   }
+  .font-display {
+    font-family: var(--font-display);
+  }
   .font-family-heading {
     font-family: var(--font-family-heading);
   }
@@ -2936,6 +3371,10 @@
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
+  .text-sm\! {
+    font-size: var(--text-sm) !important;
+    line-height: var(--tw-leading, var(--text-sm--line-height)) !important;
+  }
   .text-xl {
     font-size: var(--text-xl);
     line-height: var(--tw-leading, var(--text-xl--line-height));
@@ -2962,6 +3401,9 @@
   .text-\[12px\] {
     font-size: 12px;
   }
+  .text-\[13px\] {
+    font-size: 13px;
+  }
   .text-\[16px\] {
     font-size: 16px;
   }
@@ -2977,6 +3419,9 @@
   .text-\[length\:min\(1\.125rem\,23\.4px\)\] {
     font-size: min(1.125rem, 23.4px);
   }
+  .text-\[length\:min\(1\.875rem\,39px\)\] {
+    font-size: min(1.875rem, 39px);
+  }
   .leading-4 {
     --tw-leading: calc(var(--spacing) * 4);
     line-height: calc(var(--spacing) * 4);
@@ -3009,10 +3454,30 @@
     --tw-leading: 0.98;
     line-height: 0.98;
   }
+  .leading-\[1\.0\] {
+    --tw-leading: 1.0;
+    line-height: 1.0;
+  }
+  .leading-\[1\.1\] {
+    --tw-leading: 1.1;
+    line-height: 1.1;
+  }
+  .leading-\[1\.2\] {
+    --tw-leading: 1.2;
+    line-height: 1.2;
+  }
   .leading-\[1\.4\] {
     --tw-leading: 1.4;
     line-height: 1.4;
   }
+  .leading-\[1\.05\] {
+    --tw-leading: 1.05;
+    line-height: 1.05;
+  }
+  .leading-\[1\.15\] {
+    --tw-leading: 1.15;
+    line-height: 1.15;
+  }
   .leading-\[1\.34\] {
     --tw-leading: 1.34;
     line-height: 1.34;
@@ -3045,6 +3510,10 @@
     --tw-leading: var(--leading-tight);
     line-height: var(--leading-tight);
   }
+  .font-\[number\:var\(--zabi-display-weight\,700\)\] {
+    --tw-font-weight: var(--zabi-display-weight,700);
+    font-weight: var(--zabi-display-weight,700);
+  }
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
@@ -3077,6 +3546,14 @@
     --tw-tracking: -0.015em;
     letter-spacing: -0.015em;
   }
+  .tracking-\[0\.35em\] {
+    --tw-tracking: 0.35em;
+    letter-spacing: 0.35em;
+  }
+  .tracking-\[var\(--zabi-display-tracking\,-0\.02em\)\] {
+    --tw-tracking: var(--zabi-display-tracking,-0.02em);
+    letter-spacing: var(--zabi-display-tracking,-0.02em);
+  }
   .tracking-normal {
     --tw-tracking: var(--tracking-normal);
     letter-spacing: var(--tracking-normal);
@@ -3089,10 +3566,6 @@
     --tw-tracking: var(--tracking-wide);
     letter-spacing: var(--tracking-wide);
   }
-  .tracking-wider {
-    --tw-tracking: var(--tracking-wider);
-    letter-spacing: var(--tracking-wider);
-  }
   .text-balance {
     text-wrap: balance;
   }
@@ -3114,6 +3587,9 @@
   .wrap-break-word {
     overflow-wrap: break-word;
   }
+  .text-ellipsis {
+    text-overflow: ellipsis;
+  }
   .hyphens-auto {
     hyphens: auto;
   }
@@ -3129,8 +3605,8 @@
   .whitespace-pre-line {
     white-space: pre-line;
   }
-  .text-\(color\:--color-action-primary\) {
-    color: var(--color-action-primary);
+  .text-\(color\:--color-link\) {
+    color: var(--color-link);
   }
   .text-accent {
     color: var(--color-accent);
@@ -3147,6 +3623,9 @@
   .text-action-primary {
     color: var(--color-action-primary);
   }
+  .text-action-tonal {
+    color: var(--color-action-tonal);
+  }
   .text-base-100 {
     color: var(--color-base-100);
   }
@@ -3174,6 +3653,12 @@
   .text-card {
     color: var(--color-card);
   }
+  .text-chip-selected-text {
+    color: var(--color-chip-selected-text);
+  }
+  .text-chip-text {
+    color: var(--color-chip-text);
+  }
   .text-control-border {
     color: var(--color-control-border);
   }
@@ -3243,6 +3728,9 @@
   .text-tooltip-fg {
     color: var(--color-tooltip-fg);
   }
+  .text-transparent {
+    color: transparent;
+  }
   .text-warning {
     color: var(--color-warning);
   }
@@ -3271,6 +3759,9 @@
   .underline-offset-4 {
     text-underline-offset: 4px;
   }
+  .caret-transparent {
+    caret-color: transparent;
+  }
   .accent-border {
     accent-color: var(--color-border);
   }
@@ -3306,16 +3797,20 @@
     --tw-shadow: 0 0 0 1px var(--tw-shadow-color, rgba(0,0,0,0.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-\[0_0_0_2px_var\(--color-focus-ring-offset\)\,0_0_0_4px_var\(--color-focus-ring\)\] {
+    --tw-shadow: 0 0 0 2px var(--tw-shadow-color, var(--color-focus-ring-offset)), 0 0 0 4px var(--tw-shadow-color, var(--color-focus-ring));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[0_0_0_2px_var\(--zabi-avatar-ring\,var\(--color-surface-raised\)\)\] {
     --tw-shadow: 0 0 0 2px var(--tw-shadow-color, var(--zabi-avatar-ring,var(--color-surface-raised)));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .shadow-lg {
-    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity))), 0 4px 6px -4px var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity)));
+    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity-contact))), 0 10px 30px 0 var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity)));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .shadow-md {
-    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity))), 0 2px 4px -2px var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity)));
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity-contact))), 0 6px 14px -2px var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity)));
     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 {
@@ -3323,11 +3818,11 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .shadow-sm {
-    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity))), 0 1px 2px -1px var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity)));
+    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity-contact))), 0 2px 6px -1px var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity)));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .shadow-xl {
-    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity))), 0 8px 10px -6px var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity)));
+    --tw-shadow: 0 2px 4px 0 var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity-contact))), 0 20px 50px -8px var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity)));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .ring {
@@ -3338,6 +3833,19 @@
     --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);
   }
+  .ring-2 {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + 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);
+  }
+  .ring-\(--color-surface-overlay\) {
+    --tw-ring-color: var(--color-surface-overlay);
+  }
+  .ring-\(color\:--an-badge-ring\) {
+    --tw-ring-color: var(--an-badge-ring);
+  }
+  .ring-\(color\:--color-bar\) {
+    --tw-ring-color: var(--color-bar);
+  }
   .ring-border {
     --tw-ring-color: var(--color-border);
   }
@@ -3352,6 +3860,9 @@
   .ring-input-border {
     --tw-ring-color: var(--color-input-border);
   }
+  .ring-toggle-track {
+    --tw-ring-color: var(--color-toggle-track);
+  }
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -3376,15 +3887,9 @@
   .outline-\(--color-border\) {
     outline-color: var(--color-border);
   }
-  .outline-\(color\:--color-action-primary\) {
-    outline-color: var(--color-action-primary);
-  }
   .outline-current {
     outline-color: currentcolor;
   }
-  .outline-transparent {
-    outline-color: 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,);
@@ -3404,10 +3909,6 @@
   .filter {
     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,);
   }
-  .backdrop-blur {
-    --tw-backdrop-blur: blur(8px);
-    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-  }
   .backdrop-blur-md {
     --tw-backdrop-blur: blur(var(--blur-md));
     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
@@ -3450,6 +3951,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[transform\,width\,height\] {
+    transition-property: transform,width,height;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-all {
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3470,6 +3976,18 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .duration-\(--duration-base\) {
+    --tw-duration: var(--duration-base);
+    transition-duration: var(--duration-base);
+  }
+  .duration-\(--duration-moderate\) {
+    --tw-duration: var(--duration-moderate);
+    transition-duration: var(--duration-moderate);
+  }
+  .duration-\(--duration-slow\) {
+    --tw-duration: var(--duration-slow);
+    transition-duration: var(--duration-slow);
+  }
   .duration-150 {
     --tw-duration: 150ms;
     transition-duration: 150ms;
@@ -3494,6 +4012,18 @@
     --tw-ease: var(--ease-out);
     transition-timing-function: var(--ease-out);
   }
+  .ease-spring {
+    --tw-ease: var(--ease-spring);
+    transition-timing-function: var(--ease-spring);
+  }
+  .ease-standard {
+    --tw-ease: var(--ease-standard);
+    transition-timing-function: var(--ease-standard);
+  }
+  .outline-dashed {
+    --tw-outline-style: dashed;
+    outline-style: dashed;
+  }
   .outline-none {
     --tw-outline-style: none;
     outline-style: none;
@@ -3503,6 +4033,33 @@
     -moz-user-select: none;
          user-select: none;
   }
+  .\[--color-bar\:inherit\] {
+    --color-bar: inherit;
+  }
+  .\[--color-bar\:transparent\] {
+    --color-bar: transparent;
+  }
+  .\[--color-bar\:var\(--block\)\] {
+    --color-bar: var(--block);
+  }
+  .\[--color-bar\:var\(--color-bar-brand\)\] {
+    --color-bar: var(--color-bar-brand);
+  }
+  .\[--color-bar\:var\(--my-block-colour\)\] {
+    --color-bar: var(--my-block-colour);
+  }
+  .\[--color-bar\:var\(--your-block-colour\)\] {
+    --color-bar: var(--your-block-colour);
+  }
+  .\[--color-bar\:…\] {
+    --color-bar: …;
+  }
+  .\[--color-focus-ring-offset\:transparent\] {
+    --color-focus-ring-offset: transparent;
+  }
+  .\[--color-on-brand\:currentColor\] {
+    --color-on-brand: currentColor;
+  }
   .\[--spacing\:4px\] {
     --spacing: 4px;
   }
@@ -3518,9 +4075,15 @@
   .\[--toaster-width\:100vw\] {
     --toaster-width: 100vw;
   }
+  .\[clip-path\:inset\(-100vh_-100vw_0_-100vw\)\] {
+    clip-path: inset(-100vh -100vw 0 -100vw);
+  }
   .\[max-inline-size\:100\%\] {
     max-inline-size: 100%;
   }
+  .\[max-inline-size\:calc\(100\%-8px\)\] {
+    max-inline-size: calc(100% - 8px);
+  }
   .\[max-inline-size\:calc\(100\%_-_32px\)\] {
     max-inline-size: calc(100% - 32px);
   }
@@ -3529,6 +4092,21 @@
       pointer-events: auto;
     }
   }
+  .not-has-\[\:checked\]\:bg-chip {
+    &:not(*:has(*:is(:checked))) {
+      background-color: var(--color-chip);
+    }
+  }
+  .not-has-\[\:checked\]\:text-chip-text {
+    &:not(*:has(*:is(:checked))) {
+      color: var(--color-chip-text);
+    }
+  }
+  .not-forced-colors\:border-transparent {
+    @media not (forced-colors: active) {
+      border-color: transparent;
+    }
+  }
   .group-open\:rotate-180 {
     &:is(:where(.group):is([open], :popover-open, :open) *) {
       rotate: 180deg;
@@ -3617,6 +4195,11 @@
       }
     }
   }
+  .group-has-checked\/chip\:block {
+    &:is(:where(.group\/chip):has(*:checked) *) {
+      display: block;
+    }
+  }
   .group-has-checked\/control\:opacity-100 {
     &:is(:where(.group\/control):has(*:checked) *) {
       opacity: 100%;
@@ -3667,6 +4250,20 @@
       text-transform: uppercase;
     }
   }
+  .selection\:bg-transparent {
+    & *::-moz-selection {
+      background-color: transparent;
+    }
+    & *::selection {
+      background-color: transparent;
+    }
+    &::-moz-selection {
+      background-color: transparent;
+    }
+    &::selection {
+      background-color: transparent;
+    }
+  }
   .placeholder\:text-input-placeholder {
     &::-moz-placeholder {
       color: var(--color-input-placeholder);
@@ -3747,32 +4344,128 @@
       content: var(--tw-content);
     }
   }
-  .first\:pt-1 {
-    &:first-child {
-      padding-top: calc(var(--spacing) * 1);
+  .after\:pointer-events-none {
+    &::after {
+      content: var(--tw-content);
+      pointer-events: none;
     }
   }
-  .last\:pb-1 {
-    &:last-child {
-      padding-bottom: calc(var(--spacing) * 1);
+  .after\:absolute {
+    &::after {
+      content: var(--tw-content);
+      position: absolute;
     }
   }
-  .read-only\:cursor-default {
-    &:-moz-read-only {
-      cursor: default;
-    }
-    &:read-only {
-      cursor: default;
+  .after\:inset-0 {
+    &::after {
+      content: var(--tw-content);
+      inset: calc(var(--spacing) * 0);
     }
   }
-  .read-only\:opacity-75 {
-    &:-moz-read-only {
-      opacity: 75%;
+  .after\:inset-x-0 {
+    &::after {
+      content: var(--tw-content);
+      inset-inline: calc(var(--spacing) * 0);
+    }
+  }
+  .after\:top-full {
+    &::after {
+      content: var(--tw-content);
+      top: 100%;
+    }
+  }
+  .after\:h-8 {
+    &::after {
+      content: var(--tw-content);
+      height: calc(var(--spacing) * 8);
+    }
+  }
+  .after\:rounded-\[inherit\] {
+    &::after {
+      content: var(--tw-content);
+      border-radius: inherit;
+    }
+  }
+  .after\:bg-\(--color-material-thick\) {
+    &::after {
+      content: var(--tw-content);
+      background-color: var(--color-material-thick);
+    }
+  }
+  .after\:bg-current {
+    &::after {
+      content: var(--tw-content);
+      background-color: currentcolor;
+    }
+  }
+  .after\:opacity-0 {
+    &::after {
+      content: var(--tw-content);
+      opacity: 0%;
+    }
+  }
+  .after\:opacity-12 {
+    &::after {
+      content: var(--tw-content);
+      opacity: 12%;
+    }
+  }
+  .after\:transition-opacity {
+    &::after {
+      content: var(--tw-content);
+      transition-property: opacity;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+  }
+  .after\:duration-\(--duration-base\) {
+    &::after {
+      content: var(--tw-content);
+      --tw-duration: var(--duration-base);
+      transition-duration: var(--duration-base);
+    }
+  }
+  .after\:content-\[\'\'\] {
+    &::after {
+      --tw-content: '';
+      content: var(--tw-content);
+    }
+  }
+  .after\:\[background\:inherit\] {
+    &::after {
+      content: var(--tw-content);
+      background: inherit;
+    }
+  }
+  .placeholder-shown\:text-ellipsis {
+    &:-moz-placeholder {
+      text-overflow: ellipsis;
+    }
+    &:placeholder-shown {
+      text-overflow: ellipsis;
+    }
+  }
+  .read-only\:cursor-default {
+    &:-moz-read-only {
+      cursor: default;
+    }
+    &:read-only {
+      cursor: default;
+    }
+  }
+  .read-only\:opacity-75 {
+    &:-moz-read-only {
+      opacity: 75%;
     }
     &:read-only {
       opacity: 75%;
     }
   }
+  .empty\:hidden {
+    &:empty {
+      display: none;
+    }
+  }
   .hover\:border-accent-hover {
     &:hover {
       @media (hover: hover) {
@@ -3822,6 +4515,18 @@
       }
     }
   }
+  .hover\:bg-\[color-mix\(in_srgb\,var\(--color-on-brand\)_16\%\,transparent\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb,#ffffff 16%,transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          & {
+            background-color: color-mix(in srgb,var(--color-on-brand) 16%,transparent);
+          }
+        }
+      }
+    }
+  }
   .hover\:bg-accent-active {
     &:hover {
       @media (hover: hover) {
@@ -3913,6 +4618,13 @@
       }
     }
   }
+  .hover\:bg-card-flat-hover {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-card-flat-hover);
+      }
+    }
+  }
   .hover\:bg-card-hover {
     &:hover {
       @media (hover: hover) {
@@ -3920,10 +4632,24 @@
       }
     }
   }
-  .hover\:bg-control-track-hover {
+  .hover\:bg-chip-hover {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-chip-hover);
+      }
+    }
+  }
+  .hover\:bg-chip-selected-hover {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-control-track-hover);
+        background-color: var(--color-chip-selected-hover);
+      }
+    }
+  }
+  .hover\:bg-input-disabled {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-input-disabled);
       }
     }
   }
@@ -4084,7 +4810,7 @@
   .hover\:shadow-lg {
     &:hover {
       @media (hover: hover) {
-        --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity))), 0 4px 6px -4px var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity)));
+        --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity-contact))), 0 10px 30px 0 var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity)));
         box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
       }
     }
@@ -4119,6 +4845,25 @@
       }
     }
   }
+  .not-has-\[\:checked\]\:hover\:bg-chip-hover {
+    &:not(*:has(*:is(:checked))) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-chip-hover);
+        }
+      }
+    }
+  }
+  .hover\:after\:opacity-8 {
+    &:hover {
+      @media (hover: hover) {
+        &::after {
+          content: var(--tw-content);
+          opacity: 8%;
+        }
+      }
+    }
+  }
   .focus\:not-sr-only {
     &:focus {
       position: static;
@@ -4138,7 +4883,7 @@
   }
   .focus\:shadow-md {
     &:focus {
-      --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity))), 0 2px 4px -2px var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity)));
+      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity-contact))), 0 6px 14px -2px var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity)));
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
@@ -4312,6 +5057,16 @@
       border-color: var(--color-accent-active);
     }
   }
+  .active\:bg-\[color-mix\(in_srgb\,var\(--color-on-brand\)_26\%\,transparent\)\] {
+    &:active {
+      background-color: color-mix(in srgb,#ffffff 26%,transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        & {
+          background-color: color-mix(in srgb,var(--color-on-brand) 26%,transparent);
+        }
+      }
+    }
+  }
   .active\:bg-accent-active {
     &:active {
       background-color: var(--color-accent-active);
@@ -4357,9 +5112,19 @@
       background-color: var(--color-card-active);
     }
   }
-  .active\:bg-control-track-active {
+  .active\:bg-card-flat-active {
+    &:active {
+      background-color: var(--color-card-flat-active);
+    }
+  }
+  .active\:bg-chip-active {
     &:active {
-      background-color: var(--color-control-track-active);
+      background-color: var(--color-chip-active);
+    }
+  }
+  .active\:bg-chip-selected-active {
+    &:active {
+      background-color: var(--color-chip-selected-active);
     }
   }
   .active\:bg-info-active {
@@ -4372,6 +5137,11 @@
       background-color: var(--color-input-active);
     }
   }
+  .active\:bg-input-disabled {
+    &:active {
+      background-color: var(--color-input-disabled);
+    }
+  }
   .active\:bg-nav-menu-active {
     &:active {
       background-color: var(--color-nav-menu-active);
@@ -4445,6 +5215,21 @@
       --tw-ring-color: var(--color-border-strong);
     }
   }
+  .not-has-\[\:checked\]\:active\:bg-chip-active {
+    &:not(*:has(*:is(:checked))) {
+      &:active {
+        background-color: var(--color-chip-active);
+      }
+    }
+  }
+  .active\:after\:opacity-12 {
+    &:active {
+      &::after {
+        content: var(--tw-content);
+        opacity: 12%;
+      }
+    }
+  }
   .enabled\:hover\:border-action-primary {
     &:enabled {
       &:hover {
@@ -4515,6 +5300,11 @@
       background-color: var(--color-input-disabled);
     }
   }
+  .disabled\:bg-none {
+    &:disabled {
+      background-image: none;
+    }
+  }
   .disabled\:text-action-disabled-text {
     &:disabled {
       color: var(--color-action-disabled-text);
@@ -4536,6 +5326,12 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .disabled\:inset-shadow-none {
+    &:disabled {
+      --tw-inset-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);
+    }
+  }
   .disabled\:hover\:border-transparent {
     &:disabled {
       &:hover {
@@ -4604,6 +5400,32 @@
       background-color: var(--color-brand-500);
     }
   }
+  .has-\[\:checked\]\:bg-chip-selected {
+    &:has(*:is(:checked)) {
+      background-color: var(--color-chip-selected);
+    }
+  }
+  .has-\[\:checked\]\:bg-surface-hover {
+    &:has(*:is(:checked)) {
+      background-color: var(--color-surface-hover);
+    }
+  }
+  .has-\[\:checked\]\:font-semibold {
+    &:has(*:is(:checked)) {
+      --tw-font-weight: var(--font-weight-semibold);
+      font-weight: var(--font-weight-semibold);
+    }
+  }
+  .has-\[\:checked\]\:text-chip-selected-text {
+    &:has(*:is(:checked)) {
+      color: var(--color-chip-selected-text);
+    }
+  }
+  .has-\[\:checked\]\:text-headline {
+    &:has(*:is(:checked)) {
+      color: var(--color-headline);
+    }
+  }
   .has-\[\:checked\]\:group-hover\:border-action-primary-hover {
     &:has(*:is(:checked)) {
       &:is(:where(.group):hover *) {
@@ -4622,6 +5444,22 @@
       }
     }
   }
+  .has-\[\:checked\]\:hover\:bg-chip-selected-hover {
+    &:has(*:is(:checked)) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-chip-selected-hover);
+        }
+      }
+    }
+  }
+  .has-\[\:checked\]\:active\:bg-chip-selected-active {
+    &:has(*:is(:checked)) {
+      &:active {
+        background-color: var(--color-chip-selected-active);
+      }
+    }
+  }
   .has-\[\:disabled\]\:cursor-not-allowed {
     &:has(*:is(:disabled)) {
       cursor: not-allowed;
@@ -4670,6 +5508,17 @@
       outline-color: var(--color-focus-ring);
     }
   }
+  .has-\[\>\[data-chip-subgroup\]\]\:gap-6 {
+    &:has(>[data-chip-subgroup]) {
+      gap: calc(var(--spacing) * 6);
+    }
+  }
+  .has-\[\>\[data-chip-subgroup\]\]\:gap-x-6 {
+    &:has(>[data-chip-subgroup]) {
+      -moz-column-gap: calc(var(--spacing) * 6);
+           column-gap: calc(var(--spacing) * 6);
+    }
+  }
   .aria-checked\:bg-card {
     &[aria-checked="true"] {
       background-color: var(--color-card);
@@ -4682,7 +5531,7 @@
   }
   .aria-checked\:shadow-sm {
     &[aria-checked="true"] {
-      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity))), 0 1px 2px -1px var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity)));
+      --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity-contact))), 0 2px 6px -1px var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity)));
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
@@ -4696,6 +5545,15 @@
       opacity: 50%;
     }
   }
+  .aria-disabled\:hover\:bg-transparent {
+    &[aria-disabled="true"] {
+      &:hover {
+        @media (hover: hover) {
+          background-color: transparent;
+        }
+      }
+    }
+  }
   .aria-pressed\:bg-action-primary-subtle {
     &[aria-pressed="true"] {
       background-color: var(--color-action-primary-subtle);
@@ -4711,16 +5569,6 @@
       color: var(--color-nav-menu-item-active);
     }
   }
-  .supports-\[backdrop-filter\]\:bg-surface-raised\/90 {
-    @supports (backdrop-filter: var(--tw)) {
-      background-color: color-mix(in srgb, #ffffff 90%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        & {
-          background-color: color-mix(in oklab, var(--color-surface-raised) 90%, transparent);
-        }
-      }
-    }
-  }
   .motion-reduce\:animate-none {
     @media (prefers-reduced-motion: reduce) {
       animation: none;
@@ -4736,6 +5584,14 @@
       transition-property: none;
     }
   }
+  .motion-reduce\:after\:transition-none {
+    @media (prefers-reduced-motion: reduce) {
+      &::after {
+        content: var(--tw-content);
+        transition-property: none;
+      }
+    }
+  }
   .motion-reduce\:active\:scale-100 {
     @media (prefers-reduced-motion: reduce) {
       &:active {
@@ -4922,6 +5778,11 @@
       line-height: var(--tw-leading, var(--text-base--line-height));
     }
   }
+  .max-sm\:\[clip-path\:inset\(-100vh_-100vw_0_-100vw\)\] {
+    @media (width < 40rem) {
+      clip-path: inset(-100vh -100vw 0 -100vw);
+    }
+  }
   .sm\:left-auto {
     @media (width >= 40rem) {
       left: auto;
@@ -4997,6 +5858,12 @@
       justify-content: space-between;
     }
   }
+  .sm\:gap-x-16 {
+    @media (width >= 40rem) {
+      -moz-column-gap: calc(var(--spacing) * 16);
+           column-gap: calc(var(--spacing) * 16);
+    }
+  }
   .sm\:p-6 {
     @media (width >= 40rem) {
       padding: calc(var(--spacing) * 6);
@@ -5052,6 +5919,12 @@
       padding-top: calc(var(--spacing) * 20);
     }
   }
+  .sm\:text-4xl {
+    @media (width >= 40rem) {
+      font-size: var(--text-4xl);
+      line-height: var(--tw-leading, var(--text-4xl--line-height));
+    }
+  }
   .sm\:text-5xl {
     @media (width >= 40rem) {
       font-size: var(--text-5xl);
@@ -5232,9 +6105,9 @@
       justify-content: space-between;
     }
   }
-  .md\:rounded-\[calc\(var\(--radius-overlay\)-1px\)\] {
+  .md\:gap-16 {
     @media (width >= 48rem) {
-      border-radius: calc(var(--radius-overlay) - 1px);
+      gap: calc(var(--spacing) * 16);
     }
   }
   .md\:rounded-none {
@@ -5247,12 +6120,6 @@
       border-radius: var(--radius-overlay);
     }
   }
-  .md\:border-x {
-    @media (width >= 48rem) {
-      border-inline-style: var(--tw-border-style);
-      border-inline-width: 1px;
-    }
-  }
   .md\:border-t-0 {
     @media (width >= 48rem) {
       border-top-style: var(--tw-border-style);
@@ -5310,11 +6177,6 @@
       padding-bottom: 24px;
     }
   }
-  .md\:text-left {
-    @media (width >= 48rem) {
-      text-align: left;
-    }
-  }
   .lg\:not-sr-only {
     @media (width >= 64rem) {
       position: static;
@@ -5512,6 +6374,11 @@
       font-size: 4.75rem;
     }
   }
+  .\@min-\[calc\(24px\+3\.5rem\)\]\:block {
+    @container (width >= calc(24px + 3.5rem)) {
+      display: block;
+    }
+  }
   .\@\[480px\]\:grid-cols-4 {
     @container (width >= 480px) {
       grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -5532,6 +6399,11 @@
       --swipeable-direction: 1;
     }
   }
+  .forced-colors\:hidden {
+    @media (forced-colors: active) {
+      display: none;
+    }
+  }
   .forced-colors\:border {
     @media (forced-colors: active) {
       border-style: var(--tw-border-style);
@@ -5543,83 +6415,182 @@
       border-color: ButtonText;
     }
   }
-  .forced-colors\:bg-\[CanvasText\] {
+  .forced-colors\:border-\[CanvasText\] {
     @media (forced-colors: active) {
-      background-color: CanvasText;
+      border-color: CanvasText;
     }
   }
-  .forced-colors\:outline-2 {
+  .forced-colors\:border-\[color\:ButtonBorder\] {
     @media (forced-colors: active) {
-      outline-style: var(--tw-outline-style);
-      outline-width: 2px;
+      border-color: ButtonBorder;
     }
   }
-  .forced-colors\:-outline-offset-2 {
+  .forced-colors\:border-\[color\:GrayText\] {
     @media (forced-colors: active) {
-      outline-offset: calc(2px * -1);
+      border-color: GrayText;
     }
   }
-  .forced-colors\:outline-solid {
+  .forced-colors\:bg-\[CanvasText\] {
     @media (forced-colors: active) {
-      --tw-outline-style: solid;
-      outline-style: solid;
+      background-color: CanvasText;
     }
   }
-  .pointer-coarse\:relative {
-    @media (pointer: coarse) {
-      position: relative;
+  .forced-colors\:bg-\[Highlight\] {
+    @media (forced-colors: active) {
+      background-color: Highlight;
     }
   }
-  .pointer-coarse\:-start-3\.5 {
-    @media (pointer: coarse) {
-      inset-inline-start: calc(var(--spacing) * -3.5);
+  .forced-colors\:bg-\[color\:Highlight\]\! {
+    @media (forced-colors: active) {
+      background-color: Highlight !important;
     }
   }
-  .pointer-coarse\:-top-3\.5 {
-    @media (pointer: coarse) {
-      top: calc(var(--spacing) * -3.5);
+  .forced-colors\:text-\[color\:GrayText\] {
+    @media (forced-colors: active) {
+      color: GrayText;
     }
   }
-  .pointer-coarse\:bottom-auto {
-    @media (pointer: coarse) {
-      bottom: auto;
+  .forced-colors\:outline {
+    @media (forced-colors: active) {
+      outline-style: var(--tw-outline-style);
+      outline-width: 1px;
     }
   }
-  .pointer-coarse\:my-0 {
-    @media (pointer: coarse) {
-      margin-block: calc(var(--spacing) * 0);
+  .forced-colors\:outline-1 {
+    @media (forced-colors: active) {
+      outline-style: var(--tw-outline-style);
+      outline-width: 1px;
     }
   }
-  .pointer-coarse\:mt-1\.5 {
-    @media (pointer: coarse) {
-      margin-top: calc(var(--spacing) * 1.5);
+  .forced-colors\:outline-2 {
+    @media (forced-colors: active) {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
     }
   }
-  .pointer-coarse\:inline-flex {
-    @media (pointer: coarse) {
-      display: inline-flex;
+  .forced-colors\:-outline-offset-1 {
+    @media (forced-colors: active) {
+      outline-offset: calc(1px * -1);
     }
   }
-  .pointer-coarse\:size-11 {
-    @media (pointer: coarse) {
-      width: calc(var(--spacing) * 11);
-      height: calc(var(--spacing) * 11);
+  .forced-colors\:-outline-offset-2 {
+    @media (forced-colors: active) {
+      outline-offset: calc(2px * -1);
     }
   }
-  .pointer-coarse\:size-\[44px\] {
-    @media (pointer: coarse) {
-      width: 44px;
-      height: 44px;
+  .forced-colors\:outline-\[color\:CanvasText\] {
+    @media (forced-colors: active) {
+      outline-color: CanvasText;
     }
   }
-  .pointer-coarse\:h-11 {
-    @media (pointer: coarse) {
-      height: calc(var(--spacing) * 11);
+  .forced-colors\:outline-\[color\:GrayText\] {
+    @media (forced-colors: active) {
+      outline-color: GrayText;
     }
   }
-  .pointer-coarse\:min-h-0 {
-    @media (pointer: coarse) {
-      min-height: calc(var(--spacing) * 0);
+  .forced-colors\:outline-\[color\:Highlight\] {
+    @media (forced-colors: active) {
+      outline-color: Highlight;
+    }
+  }
+  .forced-colors\:outline-dashed {
+    @media (forced-colors: active) {
+      --tw-outline-style: dashed;
+      outline-style: dashed;
+    }
+  }
+  .forced-colors\:outline-solid {
+    @media (forced-colors: active) {
+      --tw-outline-style: solid;
+      outline-style: solid;
+    }
+  }
+  .disabled\:forced-colors\:border {
+    &:disabled {
+      @media (forced-colors: active) {
+        border-style: var(--tw-border-style);
+        border-width: 1px;
+      }
+    }
+  }
+  .disabled\:forced-colors\:border-\[color\:GrayText\] {
+    &:disabled {
+      @media (forced-colors: active) {
+        border-color: GrayText;
+      }
+    }
+  }
+  .has-\[\:checked\]\:forced-colors\:outline-2 {
+    &:has(*:is(:checked)) {
+      @media (forced-colors: active) {
+        outline-style: var(--tw-outline-style);
+        outline-width: 2px;
+      }
+    }
+  }
+  .has-\[\:checked\]\:forced-colors\:-outline-offset-2 {
+    &:has(*:is(:checked)) {
+      @media (forced-colors: active) {
+        outline-offset: calc(2px * -1);
+      }
+    }
+  }
+  .has-\[\:checked\]\:forced-colors\:outline-\[color\:Highlight\] {
+    &:has(*:is(:checked)) {
+      @media (forced-colors: active) {
+        outline-color: Highlight;
+      }
+    }
+  }
+  .pointer-coarse\:relative {
+    @media (pointer: coarse) {
+      position: relative;
+    }
+  }
+  .pointer-coarse\:top-1\/2 {
+    @media (pointer: coarse) {
+      top: calc(1/2 * 100%);
+    }
+  }
+  .pointer-coarse\:bottom-auto {
+    @media (pointer: coarse) {
+      bottom: auto;
+    }
+  }
+  .pointer-coarse\:left-1\/2 {
+    @media (pointer: coarse) {
+      left: calc(1/2 * 100%);
+    }
+  }
+  .pointer-coarse\:my-0 {
+    @media (pointer: coarse) {
+      margin-block: calc(var(--spacing) * 0);
+    }
+  }
+  .pointer-coarse\:mt-1\.5 {
+    @media (pointer: coarse) {
+      margin-top: calc(var(--spacing) * 1.5);
+    }
+  }
+  .pointer-coarse\:inline-flex {
+    @media (pointer: coarse) {
+      display: inline-flex;
+    }
+  }
+  .pointer-coarse\:size-\[44px\] {
+    @media (pointer: coarse) {
+      width: 44px;
+      height: 44px;
+    }
+  }
+  .pointer-coarse\:h-11 {
+    @media (pointer: coarse) {
+      height: calc(var(--spacing) * 11);
+    }
+  }
+  .pointer-coarse\:min-h-0 {
+    @media (pointer: coarse) {
+      min-height: calc(var(--spacing) * 0);
     }
   }
   .pointer-coarse\:min-h-11 {
@@ -5647,6 +6618,23 @@
       min-width: 44px;
     }
   }
+  .pointer-coarse\:-translate-x-1\/2 {
+    @media (pointer: coarse) {
+      --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .pointer-coarse\:-translate-y-1\/2 {
+    @media (pointer: coarse) {
+      --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .pointer-coarse\:resize-none {
+    @media (pointer: coarse) {
+      resize: none;
+    }
+  }
   .pointer-coarse\:items-center {
     @media (pointer: coarse) {
       align-items: center;
@@ -5771,6 +6759,12 @@
       display: none;
     }
   }
+  .\[\&\:\:-webkit-search-cancel-button\]\:appearance-none {
+    &::-webkit-search-cancel-button {
+      -webkit-appearance: none;
+              appearance: none;
+    }
+  }
   .\[\&\>\*\>tr\]\:block {
     &>*>tr {
       display: block;
@@ -6382,6 +7376,26 @@
       display: none;
     }
   }
+  .\[\:where\(\&\)\]\:h-3 {
+    :where(&) {
+      height: calc(var(--spacing) * 3);
+    }
+  }
+  .\[\:where\(\&\)\]\:h-32 {
+    :where(&) {
+      height: calc(var(--spacing) * 32);
+    }
+  }
+  .\[\:where\(\&\)\]\:w-10 {
+    :where(&) {
+      width: calc(var(--spacing) * 10);
+    }
+  }
+  .\[\:where\(\&\)\]\:w-full {
+    :where(&) {
+      width: 100%;
+    }
+  }
   .\[\@media\(hover\:none\)\]\:bottom-auto {
     @media (hover:none) {
       bottom: auto;
@@ -6565,79 +7579,208 @@ body {
   --color-base-925: var(--zabi-base-75);
   --color-base-950: var(--zabi-base-50);
   --color-surface-base: var(--zabi-base-900);
-  --color-surface-raised: color-mix(in srgb, #fafafa 6.4%, #18181b);
-  @supports (color: color-mix(in lab, red, red)) {
-    & {
-      --color-surface-raised: color-mix(in srgb, var(--zabi-base-50) 6.4%, var(--zabi-base-900));
-    }
-  }
-  --color-surface-elevated: color-mix(in srgb, #fafafa 13.1%, #18181b);
-  @supports (color: color-mix(in lab, red, red)) {
-    & {
-      --color-surface-elevated: color-mix(in srgb, var(--zabi-base-50) 13.1%, var(--zabi-base-900));
-    }
-  }
-  --color-surface-overlay: color-mix(in srgb, #fafafa 19.7%, #18181b);
+  --color-surface-raised: var(--zabi-base-850);
+  --color-surface-elevated: var(--zabi-base-800);
+  --color-surface-overlay: var(--zabi-base-800);
+  --color-surface-overlay-hover: var(--zabi-base-750);
+  --color-surface-inset: var(--zabi-base-900);
+  --color-surface-chrome: var(--color-surface-base);
+  --color-bar: var(--color-surface-chrome);
+  --color-bar-border: color-mix(in srgb, #18181b 10%, transparent);
   @supports (color: color-mix(in lab, red, red)) {
     & {
-      --color-surface-overlay: color-mix(in srgb, var(--zabi-base-50) 19.7%, var(--zabi-base-900));
+      --color-bar-border: color-mix(in srgb, var(--color-headline) 10%, transparent);
     }
   }
-  --color-surface-overlay-hover: var(--color-base-400);
-  --color-surface-inset: var(--color-base-150);
+  --color-bar-brand: var(--color-action-primary);
+  --color-tabbar-active: var(--color-nav-menu-active);
   --color-neutral-subtle: var(--color-base-300);
   --color-neutral-border: var(--color-base-200);
   --color-border-overlay: var(--color-base-450);
   --color-background: var(--color-surface-base);
   --color-background-tertiary: var(--color-base-100);
-  --color-page: var(--color-base-100);
+  --color-page: var(--color-surface-base);
   --color-card: var(--color-surface-raised);
   --color-card-hover: var(--color-surface-elevated);
-  --color-card-active: var(--color-surface-overlay);
+  --color-card-active: var(--color-surface-overlay-hover);
   --color-card-elevated: var(--color-surface-elevated);
+  --color-card-tint: color-mix(in srgb, #6d87f1 8%, #ffffff);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-card-tint: color-mix(in srgb, var(--zabi-brand-500) 8%, var(--color-surface-raised));
+    }
+  }
+  --color-card-flat: color-mix(in srgb, #fafafa 7%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-card-flat: color-mix(in srgb, var(--zabi-base-50) 7%, transparent);
+    }
+  }
+  --color-card-flat-hover: color-mix(in srgb, #fafafa 11%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-card-flat-hover: color-mix(in srgb, var(--zabi-base-50) 11%, transparent);
+    }
+  }
+  --color-card-flat-active: color-mix(in srgb, #fafafa 15%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-card-flat-active: color-mix(in srgb, var(--zabi-base-50) 15%, transparent);
+    }
+  }
   --color-surface-1: var(--color-surface-raised);
   --color-surface-2: var(--color-surface-elevated);
   --color-surface-3: var(--color-surface-overlay);
-  --color-surface-4: var(--color-base-400);
+  --color-surface-4: var(--color-surface-overlay-hover);
   --color-description: var(--color-base-700);
   --color-caption: var(--color-base-650);
   --color-surface-hover: rgba(250, 250, 250, 0.08);
   --color-surface-active: rgba(250, 250, 250, 0.14);
   --color-overlay: rgba(0, 0, 0, 0.7);
-  --color-input: var(--color-surface-inset);
+  --color-input: color-mix(in srgb, #fafafa 7%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-input: color-mix(in srgb, var(--zabi-base-50) 7%, transparent);
+    }
+  }
+  --color-input-solid: var(--color-surface-inset);
+  --color-input-solid-hover: var(--color-base-200);
+  --color-input-solid-focus: var(--color-base-150);
+  --color-input-solid-active: color-mix(in srgb, #fafafa 10%, #f4f4f5);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-input-solid-active: color-mix(in srgb, var(--zabi-base-50) 10%, var(--color-surface-inset));
+    }
+  }
   --color-progress-fill: var(--color-action-primary);
-  --color-progress-track: var(--color-input);
+  --color-progress-track: var(--color-base-75);
+  --color-progress-track-border: var(--color-input-border);
   --color-input-border: var(--color-base-500);
   --color-input-border-hover: var(--color-input-border);
-  --color-input-hover: var(--color-base-200);
-  --color-input-active: var(--color-base-250);
-  --color-input-focus: var(--color-base-150);
-  --color-input-disabled: var(--color-base-100);
-  --color-input-placeholder: var(--color-base-600);
+  --color-border: var(--color-base-250);
+  --color-border-weak: var(--color-base-250);
+  --color-toggle-track: var(--color-base-300);
+  --color-toggle-track-hover: var(--color-base-350);
+  --color-toggle-track-active: var(--color-base-400);
+  --color-toggle-track-border: var(--color-input-border);
+  --color-toggle-knob: var(--color-base-700);
+  --color-toggle-knob-checked: var(--color-action-primary-text);
+  --color-input-hover: color-mix(in srgb, #fafafa 10%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-input-hover: color-mix(in srgb, var(--zabi-base-50) 10%, transparent);
+    }
+  }
+  --color-input-active: color-mix(in srgb, #fafafa 15%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-input-active: color-mix(in srgb, var(--zabi-base-50) 15%, transparent);
+    }
+  }
+  --color-input-focus: color-mix(in srgb, #fafafa 7%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-input-focus: color-mix(in srgb, var(--zabi-base-50) 7%, transparent);
+    }
+  }
+  --color-input-disabled: var(--color-base-75);
+  --color-input-placeholder: color-mix(in srgb, #babac1 40%, #a1a1aa);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-input-placeholder: color-mix(in srgb, var(--zabi-base-350) 40%, var(--zabi-base-400));
+    }
+  }
   --color-control-border: var(--color-base-600);
+  --color-segment-thumb: var(--color-base-400);
+  --color-segment-thumb-text: var(--color-headline);
+  --color-segment-thumb-border: var(--color-control-border);
   --color-focus: var(--color-brand-600);
   --color-focus-weak: var(--color-brand-700);
   --color-focus-medium: var(--color-brand-800);
   --color-focus-strong: var(--color-brand-900);
   --color-focus-ring-muted: var(--color-base-600);
-  --color-success-subtle: var(--color-pine-100);
-  --color-success-border: var(--color-pine-200);
-  --color-warning-subtle: var(--color-warning-100);
-  --color-warning-border: var(--color-warning-200);
-  --color-error-subtle: var(--color-error-100);
-  --color-error-border: var(--color-error-200);
-  --color-energetic-subtle: var(--color-citron-100);
-  --color-energetic-border: var(--color-citron-200);
-  --color-accent-subtle: var(--color-accent-100);
-  --color-accent-border: var(--color-accent-200);
+  --color-success-subtle: color-mix(in srgb, #319e67 16%, #ffffff);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-success-subtle: color-mix(in srgb, var(--zabi-pine-500) 16%, var(--color-surface-raised));
+    }
+  }
+  --color-success-border: color-mix(in srgb, #319e67 36%, #ffffff);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-success-border: color-mix(in srgb, var(--zabi-pine-500) 36%, var(--color-surface-raised));
+    }
+  }
+  --color-warning-subtle: color-mix(in srgb, #c67800 16%, #ffffff);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-warning-subtle: color-mix(in srgb, var(--zabi-warning-500) 16%, var(--color-surface-raised));
+    }
+  }
+  --color-warning-border: color-mix(in srgb, #c67800 36%, #ffffff);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-warning-border: color-mix(in srgb, var(--zabi-warning-500) 36%, var(--color-surface-raised));
+    }
+  }
+  --color-error-subtle: color-mix(in srgb, #ed564e 16%, #ffffff);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-error-subtle: color-mix(in srgb, var(--zabi-error-500) 16%, var(--color-surface-raised));
+    }
+  }
+  --color-error-border: color-mix(in srgb, #ed564e 36%, #ffffff);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-error-border: color-mix(in srgb, var(--zabi-error-500) 36%, var(--color-surface-raised));
+    }
+  }
+  --color-energetic-subtle: color-mix(in srgb, #769619 16%, #ffffff);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-energetic-subtle: color-mix(in srgb, var(--zabi-citron-500) 16%, var(--color-surface-raised));
+    }
+  }
+  --color-energetic-border: color-mix(in srgb, #769619 36%, #ffffff);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-energetic-border: color-mix(in srgb, var(--zabi-citron-500) 36%, var(--color-surface-raised));
+    }
+  }
+  --color-accent-subtle: color-mix(in srgb, #769619 16%, #ffffff);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-accent-subtle: color-mix(in srgb, var(--zabi-accent-500) 16%, var(--color-surface-raised));
+    }
+  }
+  --color-accent-border: color-mix(in srgb, #769619 36%, #ffffff);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-accent-border: color-mix(in srgb, var(--zabi-accent-500) 36%, var(--color-surface-raised));
+    }
+  }
   --color-on-accent: var(--zabi-on-accent-dark);
-  --color-info-subtle: var(--color-iris-100);
-  --color-info-border: var(--color-iris-200);
+  --color-info-subtle: color-mix(in srgb, #8486cd 16%, #ffffff);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-info-subtle: color-mix(in srgb, var(--zabi-iris-500) 16%, var(--color-surface-raised));
+    }
+  }
+  --color-info-border: color-mix(in srgb, #8486cd 36%, #ffffff);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-info-border: color-mix(in srgb, var(--zabi-iris-500) 36%, var(--color-surface-raised));
+    }
+  }
   --color-neutral: var(--color-base-600);
+  --color-action-primary: var(--zabi-brand-600);
+  --color-action-primary-hover: var(--zabi-brand-700);
+  --color-action-primary-active: var(--zabi-brand-800);
   --color-on-brand: var(--zabi-on-brand-dark);
   --color-action-primary-text: var(--color-on-brand);
   --color-action-primary-subtle: var(--color-brand-100);
   --color-action-primary-subtle-hover: var(--color-brand-200);
+  --color-action-primary-border: var(--color-brand-200);
   --color-action-primary-subtle-active: color-mix(in srgb, #b5c6ff 50%, #d3dcff);
   @supports (color: color-mix(in lab, red, red)) {
     & {
@@ -6647,20 +7790,82 @@ body {
   --color-action-secondary: rgba(250, 250, 250, 0.09);
   --color-action-secondary-hover: rgba(250, 250, 250, 0.15);
   --color-action-secondary-active: rgba(250, 250, 250, 0.21);
+  --color-action-tonal: var(--color-action-primary-subtle);
+  --color-action-tonal-hover: var(--color-action-primary-subtle-hover);
+  --color-action-tonal-active: color-mix(in srgb, #b5c6ff 50%, #d3dcff);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-action-tonal-active: color-mix(in srgb, var(--color-brand-300) 50%, var(--color-brand-200));
+    }
+  }
+  --color-action-tonal-text: var(--color-brand-800);
+  --color-chip: var(--zabi-base-750);
+  --color-chip-hover: var(--zabi-base-700);
+  --color-chip-active: var(--zabi-base-650);
+  --color-chip-text: var(--color-headline);
+  --color-chip-selected: var(--color-action-tonal);
+  --color-chip-selected-hover: var(--color-action-tonal-hover);
+  --color-chip-selected-active: var(--color-action-tonal-active);
+  --color-chip-selected-text: var(--color-action-tonal-text);
+  --color-action-outline-border: var(--color-input-border);
+  --color-action-outline-border-hover: var(--color-input-border-hover);
   --color-action-disabled: var(--color-base-200);
   --color-action-disabled-border: var(--color-base-250);
-  --color-action-danger: var(--color-error-600);
-  --color-action-danger-hover: var(--color-error-700);
-  --color-action-danger-active: var(--color-error-800);
-  --color-action-danger-subtle: var(--color-error-100);
-  --color-action-danger-subtle-hover: var(--color-error-200);
-  --color-action-danger-text: var(--color-error-50);
+  --color-action-danger: var(--zabi-error-600);
+  --color-action-danger-hover: var(--zabi-error-700);
+  --color-action-danger-active: var(--zabi-error-800);
+  --color-action-danger-subtle: var(--color-error-subtle);
+  --color-action-danger-subtle-hover: color-mix(in srgb, #ed564e 20%, #ffffff);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-action-danger-subtle-hover: color-mix(in srgb, var(--zabi-error-500) 20%, var(--color-surface-raised));
+    }
+  }
+  --color-action-danger-subtle-active: color-mix(in srgb, #ed564e 32%, #ffffff);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-action-danger-subtle-active: color-mix(in srgb, var(--zabi-error-500) 32%, var(--color-surface-raised));
+    }
+  }
+  --color-action-danger-text: var(--zabi-error-50);
   --shadow-color: 0 0 0;
-  --shadow-opacity: 0.3;
-  --shadow-sm: 0 1px 3px 0 rgb(var(--shadow-color) / var(--shadow-opacity)), 0 1px 2px -1px rgb(var(--shadow-color) / var(--shadow-opacity));
-  --shadow-md: 0 4px 6px -1px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 2px 4px -2px rgb(var(--shadow-color) / var(--shadow-opacity));
-  --shadow-lg: 0 10px 15px -3px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 4px 6px -4px rgb(var(--shadow-color) / var(--shadow-opacity));
-  --shadow-xl: 0 20px 25px -5px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 8px 10px -6px rgb(var(--shadow-color) / var(--shadow-opacity));
+  --shadow-opacity: 0.5;
+  --shadow-opacity-contact: 0.4;
+  --shadow-sm: 0 1px 2px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 2px 6px -1px rgb(var(--shadow-color) / var(--shadow-opacity));
+  --shadow-md: 0 1px 3px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 6px 14px -2px rgb(var(--shadow-color) / var(--shadow-opacity));
+  --shadow-lg: 0 1px 2px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 10px 30px 0 rgb(var(--shadow-color) / var(--shadow-opacity));
+  --shadow-xl: 0 2px 4px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 20px 50px -8px rgb(var(--shadow-color) / var(--shadow-opacity));
+  --shadow-material: 0 1px 2px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 10px 30px 0 rgb(var(--shadow-color) / var(--shadow-opacity));
+  --material-backdrop-brightness: 0.6;
+  --material-alpha-thin: 60%;
+  --material-alpha-regular: 68%;
+  --material-alpha-thick: 72%;
+  --material-filter-thin: blur(var(--material-blur-thin)) saturate(var(--material-saturate)) brightness(var(--material-backdrop-brightness));
+  --material-filter-regular: blur(var(--material-blur-regular)) saturate(var(--material-saturate)) brightness(var(--material-backdrop-brightness));
+  --material-filter-thick: blur(var(--material-blur-thick)) saturate(var(--material-saturate)) brightness(var(--material-backdrop-brightness));
+  --color-material-highlight: color-mix(in srgb, #fafafa 14%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-material-highlight: color-mix(in srgb, var(--zabi-base-50) 14%, transparent);
+    }
+  }
+  --color-material-rim: color-mix(in srgb, #fafafa 14%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-material-rim: color-mix(in srgb, var(--zabi-base-50) 14%, transparent);
+    }
+  }
+  --gradient-canvas-strength: 25%;
+  --gradient-control-top-strength: 0%;
+  --gradient-control-bottom-strength: 14%;
+  --gradient-control-accent-top-strength: 22%;
+  --gradient-control-accent-bottom-strength: 6%;
+  --shadow-control-highlight: inset 0 1px 0 color-mix(in srgb, #fafafa 25%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --shadow-control-highlight: inset 0 1px 0 color-mix(in srgb, var(--zabi-base-50) 25%, transparent);
+    }
+  }
   color-scheme: dark;
 }
 @media (prefers-color-scheme: dark) {
@@ -6764,79 +7969,208 @@ body {
   --color-base-925: var(--zabi-base-75);
   --color-base-950: var(--zabi-base-50);
   --color-surface-base: var(--zabi-base-900);
-  --color-surface-raised: color-mix(in srgb, #fafafa 6.4%, #18181b);
-  @supports (color: color-mix(in lab, red, red)) {
-    & {
-      --color-surface-raised: color-mix(in srgb, var(--zabi-base-50) 6.4%, var(--zabi-base-900));
-    }
-  }
-  --color-surface-elevated: color-mix(in srgb, #fafafa 13.1%, #18181b);
-  @supports (color: color-mix(in lab, red, red)) {
-    & {
-      --color-surface-elevated: color-mix(in srgb, var(--zabi-base-50) 13.1%, var(--zabi-base-900));
-    }
-  }
-  --color-surface-overlay: color-mix(in srgb, #fafafa 19.7%, #18181b);
+  --color-surface-raised: var(--zabi-base-850);
+  --color-surface-elevated: var(--zabi-base-800);
+  --color-surface-overlay: var(--zabi-base-800);
+  --color-surface-overlay-hover: var(--zabi-base-750);
+  --color-surface-inset: var(--zabi-base-900);
+  --color-surface-chrome: var(--color-surface-base);
+  --color-bar: var(--color-surface-chrome);
+  --color-bar-border: color-mix(in srgb, #18181b 10%, transparent);
   @supports (color: color-mix(in lab, red, red)) {
     & {
-      --color-surface-overlay: color-mix(in srgb, var(--zabi-base-50) 19.7%, var(--zabi-base-900));
+      --color-bar-border: color-mix(in srgb, var(--color-headline) 10%, transparent);
     }
   }
-  --color-surface-overlay-hover: var(--color-base-400);
-  --color-surface-inset: var(--color-base-150);
+  --color-bar-brand: var(--color-action-primary);
+  --color-tabbar-active: var(--color-nav-menu-active);
   --color-neutral-subtle: var(--color-base-300);
   --color-neutral-border: var(--color-base-200);
   --color-border-overlay: var(--color-base-450);
   --color-background: var(--color-surface-base);
   --color-background-tertiary: var(--color-base-100);
-  --color-page: var(--color-base-100);
+  --color-page: var(--color-surface-base);
   --color-card: var(--color-surface-raised);
   --color-card-hover: var(--color-surface-elevated);
-  --color-card-active: var(--color-surface-overlay);
+  --color-card-active: var(--color-surface-overlay-hover);
   --color-card-elevated: var(--color-surface-elevated);
+  --color-card-tint: color-mix(in srgb, #6d87f1 8%, #ffffff);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-card-tint: color-mix(in srgb, var(--zabi-brand-500) 8%, var(--color-surface-raised));
+    }
+  }
+  --color-card-flat: color-mix(in srgb, #fafafa 7%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-card-flat: color-mix(in srgb, var(--zabi-base-50) 7%, transparent);
+    }
+  }
+  --color-card-flat-hover: color-mix(in srgb, #fafafa 11%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-card-flat-hover: color-mix(in srgb, var(--zabi-base-50) 11%, transparent);
+    }
+  }
+  --color-card-flat-active: color-mix(in srgb, #fafafa 15%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-card-flat-active: color-mix(in srgb, var(--zabi-base-50) 15%, transparent);
+    }
+  }
   --color-surface-1: var(--color-surface-raised);
   --color-surface-2: var(--color-surface-elevated);
   --color-surface-3: var(--color-surface-overlay);
-  --color-surface-4: var(--color-base-400);
+  --color-surface-4: var(--color-surface-overlay-hover);
   --color-description: var(--color-base-700);
   --color-caption: var(--color-base-650);
   --color-surface-hover: rgba(250, 250, 250, 0.08);
   --color-surface-active: rgba(250, 250, 250, 0.14);
   --color-overlay: rgba(0, 0, 0, 0.7);
-  --color-input: var(--color-surface-inset);
+  --color-input: color-mix(in srgb, #fafafa 7%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-input: color-mix(in srgb, var(--zabi-base-50) 7%, transparent);
+    }
+  }
+  --color-input-solid: var(--color-surface-inset);
+  --color-input-solid-hover: var(--color-base-200);
+  --color-input-solid-focus: var(--color-base-150);
+  --color-input-solid-active: color-mix(in srgb, #fafafa 10%, #f4f4f5);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-input-solid-active: color-mix(in srgb, var(--zabi-base-50) 10%, var(--color-surface-inset));
+    }
+  }
   --color-progress-fill: var(--color-action-primary);
-  --color-progress-track: var(--color-input);
+  --color-progress-track: var(--color-base-75);
+  --color-progress-track-border: var(--color-input-border);
   --color-input-border: var(--color-base-500);
   --color-input-border-hover: var(--color-input-border);
-  --color-input-hover: var(--color-base-200);
-  --color-input-active: var(--color-base-250);
-  --color-input-focus: var(--color-base-150);
-  --color-input-disabled: var(--color-base-100);
-  --color-input-placeholder: var(--color-base-600);
+  --color-border: var(--color-base-250);
+  --color-border-weak: var(--color-base-250);
+  --color-toggle-track: var(--color-base-300);
+  --color-toggle-track-hover: var(--color-base-350);
+  --color-toggle-track-active: var(--color-base-400);
+  --color-toggle-track-border: var(--color-input-border);
+  --color-toggle-knob: var(--color-base-700);
+  --color-toggle-knob-checked: var(--color-action-primary-text);
+  --color-input-hover: color-mix(in srgb, #fafafa 10%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-input-hover: color-mix(in srgb, var(--zabi-base-50) 10%, transparent);
+    }
+  }
+  --color-input-active: color-mix(in srgb, #fafafa 15%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-input-active: color-mix(in srgb, var(--zabi-base-50) 15%, transparent);
+    }
+  }
+  --color-input-focus: color-mix(in srgb, #fafafa 7%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-input-focus: color-mix(in srgb, var(--zabi-base-50) 7%, transparent);
+    }
+  }
+  --color-input-disabled: var(--color-base-75);
+  --color-input-placeholder: color-mix(in srgb, #babac1 40%, #a1a1aa);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-input-placeholder: color-mix(in srgb, var(--zabi-base-350) 40%, var(--zabi-base-400));
+    }
+  }
   --color-control-border: var(--color-base-600);
+  --color-segment-thumb: var(--color-base-400);
+  --color-segment-thumb-text: var(--color-headline);
+  --color-segment-thumb-border: var(--color-control-border);
   --color-focus: var(--color-brand-600);
   --color-focus-weak: var(--color-brand-700);
   --color-focus-medium: var(--color-brand-800);
   --color-focus-strong: var(--color-brand-900);
   --color-focus-ring-muted: var(--color-base-600);
-  --color-success-subtle: var(--color-pine-100);
-  --color-success-border: var(--color-pine-200);
-  --color-warning-subtle: var(--color-warning-100);
-  --color-warning-border: var(--color-warning-200);
-  --color-error-subtle: var(--color-error-100);
-  --color-error-border: var(--color-error-200);
-  --color-energetic-subtle: var(--color-citron-100);
-  --color-energetic-border: var(--color-citron-200);
-  --color-accent-subtle: var(--color-accent-100);
-  --color-accent-border: var(--color-accent-200);
+  --color-success-subtle: color-mix(in srgb, #319e67 16%, #ffffff);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-success-subtle: color-mix(in srgb, var(--zabi-pine-500) 16%, var(--color-surface-raised));
+    }
+  }
+  --color-success-border: color-mix(in srgb, #319e67 36%, #ffffff);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-success-border: color-mix(in srgb, var(--zabi-pine-500) 36%, var(--color-surface-raised));
+    }
+  }
+  --color-warning-subtle: color-mix(in srgb, #c67800 16%, #ffffff);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-warning-subtle: color-mix(in srgb, var(--zabi-warning-500) 16%, var(--color-surface-raised));
+    }
+  }
+  --color-warning-border: color-mix(in srgb, #c67800 36%, #ffffff);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-warning-border: color-mix(in srgb, var(--zabi-warning-500) 36%, var(--color-surface-raised));
+    }
+  }
+  --color-error-subtle: color-mix(in srgb, #ed564e 16%, #ffffff);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-error-subtle: color-mix(in srgb, var(--zabi-error-500) 16%, var(--color-surface-raised));
+    }
+  }
+  --color-error-border: color-mix(in srgb, #ed564e 36%, #ffffff);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-error-border: color-mix(in srgb, var(--zabi-error-500) 36%, var(--color-surface-raised));
+    }
+  }
+  --color-energetic-subtle: color-mix(in srgb, #769619 16%, #ffffff);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-energetic-subtle: color-mix(in srgb, var(--zabi-citron-500) 16%, var(--color-surface-raised));
+    }
+  }
+  --color-energetic-border: color-mix(in srgb, #769619 36%, #ffffff);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-energetic-border: color-mix(in srgb, var(--zabi-citron-500) 36%, var(--color-surface-raised));
+    }
+  }
+  --color-accent-subtle: color-mix(in srgb, #769619 16%, #ffffff);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-accent-subtle: color-mix(in srgb, var(--zabi-accent-500) 16%, var(--color-surface-raised));
+    }
+  }
+  --color-accent-border: color-mix(in srgb, #769619 36%, #ffffff);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-accent-border: color-mix(in srgb, var(--zabi-accent-500) 36%, var(--color-surface-raised));
+    }
+  }
   --color-on-accent: var(--zabi-on-accent-dark);
-  --color-info-subtle: var(--color-iris-100);
-  --color-info-border: var(--color-iris-200);
+  --color-info-subtle: color-mix(in srgb, #8486cd 16%, #ffffff);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-info-subtle: color-mix(in srgb, var(--zabi-iris-500) 16%, var(--color-surface-raised));
+    }
+  }
+  --color-info-border: color-mix(in srgb, #8486cd 36%, #ffffff);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-info-border: color-mix(in srgb, var(--zabi-iris-500) 36%, var(--color-surface-raised));
+    }
+  }
   --color-neutral: var(--color-base-600);
+  --color-action-primary: var(--zabi-brand-600);
+  --color-action-primary-hover: var(--zabi-brand-700);
+  --color-action-primary-active: var(--zabi-brand-800);
   --color-on-brand: var(--zabi-on-brand-dark);
   --color-action-primary-text: var(--color-on-brand);
   --color-action-primary-subtle: var(--color-brand-100);
   --color-action-primary-subtle-hover: var(--color-brand-200);
+  --color-action-primary-border: var(--color-brand-200);
   --color-action-primary-subtle-active: color-mix(in srgb, #b5c6ff 50%, #d3dcff);
   @supports (color: color-mix(in lab, red, red)) {
     & {
@@ -6846,23 +8180,284 @@ body {
   --color-action-secondary: rgba(250, 250, 250, 0.09);
   --color-action-secondary-hover: rgba(250, 250, 250, 0.15);
   --color-action-secondary-active: rgba(250, 250, 250, 0.21);
+  --color-action-tonal: var(--color-action-primary-subtle);
+  --color-action-tonal-hover: var(--color-action-primary-subtle-hover);
+  --color-action-tonal-active: color-mix(in srgb, #b5c6ff 50%, #d3dcff);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-action-tonal-active: color-mix(in srgb, var(--color-brand-300) 50%, var(--color-brand-200));
+    }
+  }
+  --color-action-tonal-text: var(--color-brand-800);
+  --color-chip: var(--zabi-base-750);
+  --color-chip-hover: var(--zabi-base-700);
+  --color-chip-active: var(--zabi-base-650);
+  --color-chip-text: var(--color-headline);
+  --color-chip-selected: var(--color-action-tonal);
+  --color-chip-selected-hover: var(--color-action-tonal-hover);
+  --color-chip-selected-active: var(--color-action-tonal-active);
+  --color-chip-selected-text: var(--color-action-tonal-text);
+  --color-action-outline-border: var(--color-input-border);
+  --color-action-outline-border-hover: var(--color-input-border-hover);
   --color-action-disabled: var(--color-base-200);
   --color-action-disabled-border: var(--color-base-250);
-  --color-action-danger: var(--color-error-600);
-  --color-action-danger-hover: var(--color-error-700);
-  --color-action-danger-active: var(--color-error-800);
-  --color-action-danger-subtle: var(--color-error-100);
-  --color-action-danger-subtle-hover: var(--color-error-200);
-  --color-action-danger-text: var(--color-error-50);
+  --color-action-danger: var(--zabi-error-600);
+  --color-action-danger-hover: var(--zabi-error-700);
+  --color-action-danger-active: var(--zabi-error-800);
+  --color-action-danger-subtle: var(--color-error-subtle);
+  --color-action-danger-subtle-hover: color-mix(in srgb, #ed564e 20%, #ffffff);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-action-danger-subtle-hover: color-mix(in srgb, var(--zabi-error-500) 20%, var(--color-surface-raised));
+    }
+  }
+  --color-action-danger-subtle-active: color-mix(in srgb, #ed564e 32%, #ffffff);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-action-danger-subtle-active: color-mix(in srgb, var(--zabi-error-500) 32%, var(--color-surface-raised));
+    }
+  }
+  --color-action-danger-text: var(--zabi-error-50);
   --shadow-color: 0 0 0;
-  --shadow-opacity: 0.3;
-  --shadow-sm: 0 1px 3px 0 rgb(var(--shadow-color) / var(--shadow-opacity)), 0 1px 2px -1px rgb(var(--shadow-color) / var(--shadow-opacity));
-  --shadow-md: 0 4px 6px -1px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 2px 4px -2px rgb(var(--shadow-color) / var(--shadow-opacity));
-  --shadow-lg: 0 10px 15px -3px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 4px 6px -4px rgb(var(--shadow-color) / var(--shadow-opacity));
-  --shadow-xl: 0 20px 25px -5px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 8px 10px -6px rgb(var(--shadow-color) / var(--shadow-opacity));
+  --shadow-opacity: 0.5;
+  --shadow-opacity-contact: 0.4;
+  --shadow-sm: 0 1px 2px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 2px 6px -1px rgb(var(--shadow-color) / var(--shadow-opacity));
+  --shadow-md: 0 1px 3px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 6px 14px -2px rgb(var(--shadow-color) / var(--shadow-opacity));
+  --shadow-lg: 0 1px 2px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 10px 30px 0 rgb(var(--shadow-color) / var(--shadow-opacity));
+  --shadow-xl: 0 2px 4px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 20px 50px -8px rgb(var(--shadow-color) / var(--shadow-opacity));
+  --shadow-material: 0 1px 2px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 10px 30px 0 rgb(var(--shadow-color) / var(--shadow-opacity));
+  --material-backdrop-brightness: 0.6;
+  --material-alpha-thin: 60%;
+  --material-alpha-regular: 68%;
+  --material-alpha-thick: 72%;
+  --material-filter-thin: blur(var(--material-blur-thin)) saturate(var(--material-saturate)) brightness(var(--material-backdrop-brightness));
+  --material-filter-regular: blur(var(--material-blur-regular)) saturate(var(--material-saturate)) brightness(var(--material-backdrop-brightness));
+  --material-filter-thick: blur(var(--material-blur-thick)) saturate(var(--material-saturate)) brightness(var(--material-backdrop-brightness));
+  --color-material-highlight: color-mix(in srgb, #fafafa 14%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-material-highlight: color-mix(in srgb, var(--zabi-base-50) 14%, transparent);
+    }
+  }
+  --color-material-rim: color-mix(in srgb, #fafafa 14%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --color-material-rim: color-mix(in srgb, var(--zabi-base-50) 14%, transparent);
+    }
+  }
+  --gradient-canvas-strength: 25%;
+  --gradient-control-top-strength: 0%;
+  --gradient-control-bottom-strength: 14%;
+  --gradient-control-accent-top-strength: 22%;
+  --gradient-control-accent-bottom-strength: 6%;
+  --shadow-control-highlight: inset 0 1px 0 color-mix(in srgb, #fafafa 25%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    & {
+      --shadow-control-highlight: inset 0 1px 0 color-mix(in srgb, var(--zabi-base-50) 25%, transparent);
+    }
+  }
   color-scheme: dark;
 }
 }
+@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
+  :root:root {
+    --color-material-thin: var(--color-surface-chrome);
+    --color-material-regular: var(--color-surface-chrome);
+    --color-material-thick: var(--color-surface-overlay);
+    --material-filter-thin: none;
+    --material-filter-regular: none;
+    --material-filter-thick: none;
+  }
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  :root:root {
+    --color-material-thin: var(--color-surface-chrome);
+    --color-material-regular: var(--color-surface-chrome);
+    --color-material-thick: var(--color-surface-overlay);
+    --material-filter-thin: none;
+    --material-filter-regular: none;
+    --material-filter-thick: none;
+  }
+}
+[data-materials="opaque"][data-materials="opaque"] {
+  --color-material-thin: var(--color-surface-chrome);
+  --color-material-regular: var(--color-surface-chrome);
+  --color-material-thick: var(--color-surface-overlay);
+  --material-filter-thin: none;
+  --material-filter-regular: none;
+  --material-filter-thick: none;
+}
+@supports (transition-timing-function: linear(0, 1)) {
+  :root {
+    --ease-spring: linear(0, 0.14, 0.409, 0.668, 0.859, 0.974, 1.029, 1.046, 1.041, 1.03, 1.017, 1.008, 1.002, 0.999, 0.998, 0.998, 1);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  :root:root {
+    --duration-fast: 0s;
+    --duration-base: 0s;
+    --duration-moderate: 0s;
+    --duration-slow: 0s;
+    --ease-spring: var(--ease-standard);
+  }
+}
+.material-thin,
+.material-regular,
+.material-thick {
+  --tw-shadow: inset 0 1px 0 var(--color-material-highlight),
+    inset 0 0 0 1px var(--color-material-rim),
+    var(--shadow-material);
+  box-shadow: var(--tw-inset-shadow, 0 0 #0000),
+    var(--tw-inset-ring-shadow, 0 0 #0000),
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
+.material-thin {
+  background-color: var(--color-material-thin);
+  backdrop-filter: var(--material-filter-thin);
+}
+.material-regular {
+  background-color: var(--color-material-regular);
+  backdrop-filter: var(--material-filter-regular);
+}
+.material-thick {
+  background-color: var(--color-material-thick);
+  backdrop-filter: var(--material-filter-thick);
+}
+@media (forced-colors: active) {
+  .material-thin,
+  .material-regular,
+  .material-thick {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
+}
+.material-layer-thick {
+  isolation: isolate;
+  background-color: transparent;
+  --tw-shadow: var(--shadow-material);
+  box-shadow: var(--tw-inset-shadow, 0 0 #0000),
+    var(--tw-inset-ring-shadow, 0 0 #0000),
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
+.material-layer-thick::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  pointer-events: none;
+  background-color: var(--color-material-thick);
+  backdrop-filter: var(--material-filter-thick);
+  box-shadow: inset 0 1px 0 var(--color-material-highlight),
+    inset 0 0 0 1px var(--color-material-rim);
+}
+@media (forced-colors: active) {
+  .material-layer-thick {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
+}
+.material-layer-regular {
+  isolation: isolate;
+  background-color: transparent;
+  --tw-shadow: var(--shadow-material);
+  box-shadow: var(--tw-inset-shadow, 0 0 #0000),
+    var(--tw-inset-ring-shadow, 0 0 #0000),
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
+.material-layer-regular::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  pointer-events: none;
+  background-color: var(--color-material-regular);
+  backdrop-filter: var(--material-filter-regular);
+  box-shadow: inset 0 1px 0 var(--color-material-highlight),
+    inset 0 0 0 1px var(--color-material-rim);
+}
+@media (forced-colors: active) {
+  .material-layer-regular {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
+}
+.material-bar {
+  isolation: isolate;
+  background-color: transparent;
+}
+.material-bar::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  box-sizing: border-box;
+  pointer-events: none;
+  background-color: var(--color-bar);
+  border: 0 solid transparent;
+  border-bottom-width: 1px;
+  transition-property: background-color, border-color;
+  transition-duration: var(--duration-moderate);
+  transition-timing-function: var(--ease-standard);
+}
+.material-bar[data-bar-edge="bottom"]::before {
+  border-bottom-width: 0;
+  border-top-width: 1px;
+}
+.material-bar[data-scrolled-under="true"]::before {
+  background-color: var(--color-material-regular);
+  backdrop-filter: var(--material-filter-regular);
+  border-color: var(--color-bar-border);
+}
+@media (forced-colors: active) {
+  .material-bar[data-scrolled-under="true"]::before {
+    border-color: CanvasText;
+  }
+}
+.bg-canvas {
+  background-color: var(--color-surface-base);
+  background-image: var(--gradient-canvas);
+  background-repeat: no-repeat;
+}
+.bg-control-gradient,
+.bg-control-gradient-accent {
+  --tw-inset-shadow: var(--shadow-control-highlight);
+  box-shadow: var(--tw-inset-shadow, 0 0 #0000),
+    var(--tw-inset-ring-shadow, 0 0 #0000),
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow, 0 0 #0000);
+}
+.bg-control-gradient {
+  background-image: var(--gradient-control);
+}
+.bg-control-gradient-accent {
+  background-image: var(--gradient-control-accent);
+}
+.ring-toggle-track {
+  --tw-inset-ring-shadow: inset 0 0 0 1px var(--color-toggle-track-border);
+  box-shadow: var(--tw-inset-shadow, 0 0 #0000),
+    var(--tw-inset-ring-shadow, 0 0 #0000),
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow, 0 0 #0000);
+}
+.rounded-button {
+  border-radius: var(--zabi-button-radius, var(--radius-control));
+}
+.font-button {
+  font-weight: var(--zabi-button-font-weight, 500);
+}
+.font-button-strong {
+  font-weight: var(--zabi-button-font-weight, 600);
+}
 .bg-base-50 {
   background-color: var(--color-base-50);
 }
@@ -6994,10 +8589,22 @@ body {
 .bg-card {
   background-color: var(--color-card);
 }
+.bg-toggle-thumb {
+  background-color: var(--color-toggle-thumb, var(--color-toggle-knob));
+}
+.bg-toggle-thumb-checked {
+  background-color: var(--color-toggle-thumb-checked, var(--color-toggle-thumb, var(--color-toggle-knob-checked)));
+}
+.bg-card-flat {
+  background-color: var(--color-card-flat);
+}
 @media (hover: hover) {
   .hover\:bg-card-hover:hover {
     background-color: var(--color-card-hover);
   }
+  .hover\:bg-card-flat-hover:hover {
+    background-color: var(--color-card-flat-hover);
+  }
 }
 .bg-surface-1 {
   background-color: var(--color-surface-1);
@@ -7037,6 +8644,9 @@ body {
 .active\:bg-card-active:active {
   background-color: var(--color-card-active);
 }
+.active\:bg-card-flat-active:active {
+  background-color: var(--color-card-flat-active);
+}
 .disabled\:bg-input-disabled:disabled {
   background-color: var(--color-input-disabled);
 }
@@ -7190,6 +8800,15 @@ body {
 .bg-nav-menu-item-active {
   background-color: var(--color-nav-menu-item-active);
 }
+.bg-tabbar-active {
+  background-color: var(--color-tabbar-active);
+}
+.bg-bar-brand {
+  background-color: var(--color-bar-brand);
+}
+.border-bar {
+  border-color: var(--color-bar-border);
+}
 .text-success {
   color: var(--color-success-text);
 }
@@ -7310,7 +8929,7 @@ body {
   .focus-ring--muted {
     --zabi-focus-ring-color: var(--color-focus-ring-muted, var(--color-base-500));
   }
-  :where(:has(> .on-brand, > .on-accent):not(.on-brand, .on-accent, .on-brand *, .on-accent *)) {
+  :where(:has(> .on-brand, > .on-accent, > .on-fill):not(.on-brand, .on-accent, .on-fill, .on-brand *, .on-accent *, .on-fill *)) {
     --zabi-theme-headline: var(--color-headline);
     --zabi-theme-body: var(--color-body);
     --zabi-theme-label: var(--color-label);
@@ -7322,6 +8941,8 @@ body {
     --zabi-theme-border-medium: var(--color-border-medium);
     --zabi-theme-border-strong: var(--color-border-strong);
     --zabi-theme-control-border: var(--color-control-border);
+    --zabi-theme-action-outline-border: var(--color-action-outline-border);
+    --zabi-theme-action-outline-border-hover: var(--color-action-outline-border-hover);
     --zabi-theme-focus-ring: var(--color-focus-ring);
     --zabi-theme-focus-ring-muted: var(--color-focus-ring-muted);
     --zabi-theme-nav-menu-focus: var(--color-nav-menu-focus);
@@ -7346,6 +8967,8 @@ body {
     --color-border-medium: var(--color-on-brand);
     --color-border-strong: var(--color-on-brand);
     --color-control-border: var(--color-on-brand);
+    --color-action-outline-border: var(--color-on-brand);
+    --color-action-outline-border-hover: var(--color-on-brand);
   }
   .on-accent {
     color: var(--color-on-accent);
@@ -7365,15 +8988,128 @@ body {
     --color-border-medium: var(--color-on-accent);
     --color-border-strong: var(--color-on-accent);
     --color-control-border: var(--color-on-accent);
+    --color-action-outline-border: var(--color-on-accent);
+    --color-action-outline-border-hover: var(--color-on-accent);
+  }
+  .on-fill {
+    color: var(--zabi-on-fill, currentColor);
+    --color-focus-ring: var(--zabi-on-fill, currentColor);
+    --color-focus-ring-muted: var(--zabi-on-fill, currentColor);
+    --color-nav-menu-focus: var(--zabi-on-fill, currentColor);
+    --color-focus-ring-offset: transparent;
+    --color-focus-ring-danger: var(--zabi-on-fill, currentColor);
+    --color-headline: var(--zabi-on-fill, currentColor);
+    --color-body: var(--zabi-on-fill, currentColor);
+    --color-label: var(--zabi-on-fill, currentColor);
+    --color-description: var(--zabi-on-fill, currentColor);
+    --color-caption: var(--zabi-on-fill, currentColor);
+    --color-link: var(--zabi-on-fill, currentColor);
+    --color-link-hover: var(--zabi-on-fill, currentColor);
+    --color-border: var(--zabi-on-fill, currentColor);
+    --color-border-medium: var(--zabi-on-fill, currentColor);
+    --color-border-strong: var(--zabi-on-fill, currentColor);
+    --color-control-border: var(--zabi-on-fill, currentColor);
+    --color-action-outline-border: var(--zabi-on-fill, currentColor);
+    --color-action-outline-border-hover: var(--zabi-on-fill, currentColor);
+  }
+  :where(.on-brand, .on-accent, .on-fill) {
+    --zabi-inv-primary: var(--color-action-primary);
+    --zabi-inv-primary-hover: var(--color-action-primary-hover);
+    --zabi-inv-primary-active: var(--color-action-primary-active);
+    --zabi-inv-primary-text: var(--color-action-primary-text);
+    --zabi-inv-accent: var(--color-accent);
+    --zabi-inv-accent-hover: var(--color-accent-hover);
+    --zabi-inv-accent-active: var(--color-accent-active);
+    --zabi-inv-accent-text: var(--color-on-accent);
+    --zabi-inv-secondary: var(--color-action-secondary);
+    --zabi-inv-secondary-hover: var(--color-action-secondary-hover);
+    --zabi-inv-secondary-active: var(--color-action-secondary-active);
+  }
+  :where(.on-brand) {
+    --zabi-inv-secondary: rgba(9, 9, 11, 0.1);
+    --zabi-inv-secondary-hover: rgba(9, 9, 11, 0.15);
+    --zabi-inv-secondary-active: rgba(9, 9, 11, 0.2);
+  }
+  :where(.on-brand) {
+    --zabi-inv-primary: var(--color-on-brand);
+    --zabi-inv-primary-hover: color-mix(in srgb, #ffffff 88%, #4f68da);
+    @supports (color: color-mix(in lab, red, red)) {
+      & {
+        --zabi-inv-primary-hover: color-mix(in srgb, var(--color-on-brand) 88%, var(--color-action-primary));
+      }
+    }
+    --zabi-inv-primary-active: color-mix(in srgb, #ffffff 76%, #4f68da);
+    @supports (color: color-mix(in lab, red, red)) {
+      & {
+        --zabi-inv-primary-active: color-mix(in srgb, var(--color-on-brand) 76%, var(--color-action-primary));
+      }
+    }
+    --zabi-inv-primary-text: var(--color-action-primary);
+    --zabi-inv-star: var(--color-on-brand);
+  }
+  :where(.on-accent) {
+    --zabi-inv-accent: var(--color-on-accent);
+    --zabi-inv-accent-hover: color-mix(in srgb, #ffffff 88%, #5d7900);
+    @supports (color: color-mix(in lab, red, red)) {
+      & {
+        --zabi-inv-accent-hover: color-mix(in srgb, var(--color-on-accent) 88%, var(--color-accent));
+      }
+    }
+    --zabi-inv-accent-active: color-mix(in srgb, #ffffff 76%, #5d7900);
+    @supports (color: color-mix(in lab, red, red)) {
+      & {
+        --zabi-inv-accent-active: color-mix(in srgb, var(--color-on-accent) 76%, var(--color-accent));
+      }
+    }
+    --zabi-inv-accent-text: var(--color-accent);
+    --zabi-inv-star: var(--color-on-accent);
+  }
+  :where(.on-fill) {
+    --zabi-inv-primary: var(--zabi-on-fill, currentColor);
+    --zabi-inv-primary-hover: var(--zabi-on-fill, currentColor);
+    @supports (color: color-mix(in lab, red, red)) {
+      & {
+        --zabi-inv-primary-hover: color-mix(in srgb, var(--zabi-on-fill, currentColor) 88%, var(--zabi-fill, var(--color-card)));
+      }
+    }
+    --zabi-inv-primary-active: var(--zabi-on-fill, currentColor);
+    @supports (color: color-mix(in lab, red, red)) {
+      & {
+        --zabi-inv-primary-active: color-mix(in srgb, var(--zabi-on-fill, currentColor) 76%, var(--zabi-fill, var(--color-card)));
+      }
+    }
+    --zabi-inv-primary-text: var(--zabi-fill, var(--color-card));
+    --zabi-inv-star: var(--zabi-on-fill, currentColor);
+  }
+  :where(.bg-action-primary:not(.on-brand, .on-accent, .on-fill)):where(.on-brand *, .on-accent *, .on-fill *) {
+    --color-action-primary: var(--zabi-inv-primary);
+    --color-action-primary-hover: var(--zabi-inv-primary-hover);
+    --color-action-primary-active: var(--zabi-inv-primary-active);
+    --color-action-primary-text: var(--zabi-inv-primary-text);
   }
-  :where(.on-brand, .on-accent)
+  :where(.bg-action-secondary, .bg-action-secondary-active):where(.on-brand *, .on-accent *, .on-fill *) {
+    --color-action-secondary: var(--zabi-inv-secondary);
+    --color-action-secondary-hover: var(--zabi-inv-secondary-hover);
+    --color-action-secondary-active: var(--zabi-inv-secondary-active);
+  }
+  :where(.bg-accent:not(.on-brand, .on-accent, .on-fill)):where(.on-brand *, .on-accent *, .on-fill *) {
+    --color-accent: var(--zabi-inv-accent);
+    --color-accent-hover: var(--zabi-inv-accent-hover);
+    --color-accent-active: var(--zabi-inv-accent-active);
+    --color-on-accent: var(--zabi-inv-accent-text);
+  }
+  :where(.rating):where(.on-brand *, .on-accent *, .on-fill *) {
+    --zabi-rating-on: var(--zabi-inv-star);
+  }
+  :where(.on-brand, .on-accent, .on-fill)
     :where(
-      .bg-card, .bg-card-elevated, .bg-background, .bg-surface-base,
+      .bg-card, .bg-card-flat, .bg-card-elevated, .bg-background, .bg-surface-base,
       .bg-surface-raised, .bg-surface-elevated, .bg-surface-overlay, .bg-surface-overlay-hover,
-      .bg-surface-inset, .bg-surface-1, .bg-surface-2, .bg-surface-3,
+      .bg-surface-chrome, .bg-surface-inset, .bg-surface-1, .bg-surface-2, .bg-surface-3,
       .bg-surface-4, .bg-input, .bg-input-disabled, .bg-accent-subtle,
-      .bg-action-danger-subtle, .bg-action-primary-subtle, .bg-energetic-subtle, .bg-error-subtle,
-      .bg-info-subtle, .bg-neutral-subtle, .bg-success-subtle, .bg-warning-subtle,
+      .bg-action-danger-subtle, .bg-action-primary-subtle, .bg-action-tonal, .bg-card-tint, .bg-chip, .bg-chip-selected,
+      .bg-energetic-subtle, .bg-error-subtle,
+      .bg-info-subtle, .bg-neutral-subtle, .bg-badge-neutral, .bg-toggle-thumb, .bg-toggle-thumb-checked, .bg-success-subtle, .bg-warning-subtle,
       .bg-nav-menu-active, .bg-action-disabled, .list-group, .on-surface
     ) {
     color: var(--zabi-theme-body);
@@ -7388,15 +9124,41 @@ body {
     --color-border-medium: var(--zabi-theme-border-medium);
     --color-border-strong: var(--zabi-theme-border-strong);
     --color-control-border: var(--zabi-theme-control-border);
-  }
-  :where(.on-brand, .on-accent)
+    --color-action-outline-border: var(--zabi-theme-action-outline-border);
+    --color-action-outline-border-hover: var(--zabi-theme-action-outline-border-hover);
+    --zabi-inv-primary: var(--color-action-primary);
+    --zabi-inv-primary-hover: var(--color-action-primary-hover);
+    --zabi-inv-primary-active: var(--color-action-primary-active);
+    --zabi-inv-primary-text: var(--color-action-primary-text);
+    --zabi-inv-accent: var(--color-accent);
+    --zabi-inv-accent-hover: var(--color-accent-hover);
+    --zabi-inv-accent-active: var(--color-accent-active);
+    --zabi-inv-accent-text: var(--color-on-accent);
+    --zabi-inv-secondary: var(--color-action-secondary);
+    --zabi-inv-secondary-hover: var(--color-action-secondary-hover);
+    --zabi-inv-secondary-active: var(--color-action-secondary-active);
+    --zabi-inv-star: initial;
+  }
+  :where(.on-brand, .on-accent, .on-fill) :where(.bg-card-flat) {
+    --color-card-flat: var(--color-card);
+    --color-card-flat-hover: var(--color-card-hover);
+    --color-card-flat-active: var(--color-card-active);
+  }
+  :where(.on-brand, .on-accent, .on-fill) :where(.bg-input) {
+    --color-input: var(--color-input-solid);
+    --color-input-hover: var(--color-input-solid-hover);
+    --color-input-focus: var(--color-input-solid-focus);
+    --color-input-active: var(--color-input-solid-active);
+  }
+  :where(.on-brand, .on-accent, .on-fill)
     :where(
-      .bg-card, .bg-card-elevated, .bg-background, .bg-surface-base,
+      .bg-card, .bg-card-flat, .bg-card-elevated, .bg-background, .bg-surface-base,
       .bg-surface-raised, .bg-surface-elevated, .bg-surface-overlay, .bg-surface-overlay-hover,
-      .bg-surface-inset, .bg-surface-1, .bg-surface-2, .bg-surface-3,
+      .bg-surface-chrome, .bg-surface-inset, .bg-surface-1, .bg-surface-2, .bg-surface-3,
       .bg-surface-4, .bg-input, .bg-input-disabled, .bg-accent-subtle,
-      .bg-action-danger-subtle, .bg-action-primary-subtle, .bg-energetic-subtle, .bg-error-subtle,
-      .bg-info-subtle, .bg-neutral-subtle, .bg-success-subtle, .bg-warning-subtle,
+      .bg-action-danger-subtle, .bg-action-primary-subtle, .bg-action-tonal, .bg-card-tint, .bg-chip, .bg-chip-selected,
+      .bg-energetic-subtle, .bg-error-subtle,
+      .bg-info-subtle, .bg-neutral-subtle, .bg-badge-neutral, .bg-toggle-thumb, .bg-toggle-thumb-checked, .bg-success-subtle, .bg-warning-subtle,
       .bg-nav-menu-active, .bg-action-disabled, .list-group, .on-surface
     )
     > :where(*) {
@@ -7406,6 +9168,24 @@ body {
     --color-focus-ring-offset: var(--zabi-theme-focus-ring-offset);
     --color-focus-ring-danger: var(--zabi-theme-focus-ring-danger);
   }
+  .list-dividers > li + li,
+  .list-group > li + li {
+    position: relative;
+  }
+  .list-dividers > li + li::before,
+  .list-group > li + li::before {
+    content: "";
+    position: absolute;
+    inset-inline: 1rem;
+    top: calc(-0.125rem - 0.5px);
+    height: 1px;
+    background-color: var(--zabi-list-divider-color, var(--color-border));
+    pointer-events: none;
+  }
+  :is(.list-dividers, .list-group) > li:has(> [data-selected="true"])::before,
+  :is(.list-dividers, .list-group) > li:has(> [data-selected="true"]) + li::before {
+    display: none;
+  }
   .list-group {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -7491,6 +9271,9 @@ body {
     box-shadow: 0 0 0 2px var(--color-focus-ring-offset),
       0 0 0 4px var(--color-focus-ring);
   }
+  .select-container {
+    max-width: 100%;
+  }
   .selection-control-option-row {
     box-shadow: none;
   }
@@ -7498,6 +9281,9 @@ body {
     box-shadow: 0 0 0 2px var(--color-focus-ring-offset),
       0 0 0 4px var(--color-focus-ring);
   }
+  .selection-control-option-row-quiet:has(:checked):not(:has(:focus-visible)) {
+    box-shadow: none;
+  }
 }
 @media (forced-colors: active) {
   .focus-ring:focus-visible,
@@ -7508,6 +9294,69 @@ body {
     outline-offset: 2px;
   }
 }
+@media (forced-colors: active) {
+  .toggle-switch {
+    border: 1px solid ButtonText;
+    background-color: Canvas;
+    background-image: none;
+  }
+  .toggle-switch-thumb {
+    top: 1px;
+    left: 1px;
+    background-color: ButtonText;
+  }
+  .toggle-switch[aria-checked="true"] {
+    border-color: Highlight;
+    background-color: Highlight;
+  }
+  .toggle-switch[aria-checked="true"] .toggle-switch-thumb {
+    background-color: HighlightText;
+  }
+  .toggle-switch:disabled {
+    border-color: GrayText;
+    opacity: 1;
+  }
+  .toggle-switch:disabled[aria-checked="true"] {
+    background-color: GrayText;
+  }
+  .toggle-switch:disabled .toggle-switch-thumb {
+    background-color: GrayText;
+  }
+  .toggle-switch:disabled[aria-checked="true"] .toggle-switch-thumb,
+  .toggle-switch:disabled[aria-busy="true"] .toggle-switch-thumb {
+    background-color: Canvas;
+  }
+  .selection-control-shell {
+    border-color: ButtonText;
+  }
+  .selection-control-shell:has(:checked) {
+    border-color: Highlight;
+    background-color: Highlight;
+  }
+  .selection-control-shell:has(:checked) > svg {
+    color: HighlightText;
+  }
+  .selection-control-shell:has(:checked) > .selection-control-dot {
+    background-color: HighlightText;
+  }
+  .selection-control-shell:has(:disabled) {
+    border-color: GrayText;
+    opacity: 1;
+  }
+  .selection-control-shell:has(:checked):has(:disabled) {
+    background-color: GrayText;
+  }
+  .selection-control-shell:has(:checked):has(:disabled) > svg {
+    color: Canvas;
+  }
+  .selection-control-shell:has(:checked):has(:disabled) > .selection-control-dot {
+    background-color: Canvas;
+  }
+  .selection-control-label-row-interaction:has(:disabled) {
+    opacity: 1;
+    color: GrayText;
+  }
+}
 .bg-action-primary {
   background-color: var(--color-action-primary);
 }
@@ -7557,6 +9406,108 @@ body {
     background-color: var(--color-action-secondary-subtle-hover);
   }
 }
+.bg-action-tonal {
+  background-color: var(--color-action-tonal);
+}
+@media (hover: hover) {
+  .bg-action-tonal:hover {
+    background-color: var(--color-action-tonal-hover);
+  }
+}
+.bg-action-tonal:active {
+  background-color: var(--color-action-tonal-active);
+}
+.bg-action-tonal:disabled {
+  background-color: var(--color-action-disabled);
+  color: var(--color-action-disabled-text);
+}
+.text-action-tonal {
+  color: var(--color-action-tonal-text);
+}
+@layer utilities {
+  .bg-badge-neutral {
+    background-color: var(--zabi-badge-neutral-fill, var(--color-neutral-subtle));
+  }
+  .text-badge-neutral {
+    color: var(--zabi-badge-neutral-text, var(--color-neutral-text));
+  }
+}
+@layer utilities {
+  .bg-skeleton-on-color {
+    background-color: var(--zabi-skeleton-fill, currentColor);
+    @supports (color: color-mix(in lab, red, red)) {
+      & {
+        background-color: var(--zabi-skeleton-fill, color-mix(in srgb, currentColor 24%, transparent));
+      }
+    }
+  }
+}
+.bg-chip {
+  background-color: var(--color-chip);
+}
+.bg-chip-hover {
+  background-color: var(--color-chip-hover);
+}
+.bg-chip-active {
+  background-color: var(--color-chip-active);
+}
+@media (hover: hover) {
+  .hover\:bg-chip-hover:hover {
+    background-color: var(--color-chip-hover);
+  }
+}
+.active\:bg-chip-active:active {
+  background-color: var(--color-chip-active);
+}
+.text-chip-text {
+  color: var(--color-chip-text);
+}
+.bg-chip-selected {
+  background-color: var(--color-chip-selected);
+}
+.bg-chip-selected-hover {
+  background-color: var(--color-chip-selected-hover);
+}
+.bg-chip-selected-active {
+  background-color: var(--color-chip-selected-active);
+}
+@media (hover: hover) {
+  .hover\:bg-chip-selected-hover:hover {
+    background-color: var(--color-chip-selected-hover);
+  }
+}
+.active\:bg-chip-selected-active:active {
+  background-color: var(--color-chip-selected-active);
+}
+.text-chip-selected-text {
+  color: var(--color-chip-selected-text);
+}
+.bg-card-tint {
+  background-color: var(--color-card-tint);
+}
+.border-progress-track-border {
+  border-color: var(--color-progress-track-border);
+}
+.bg-toggle-track {
+  background-color: var(--color-toggle-track);
+}
+@media (hover: hover) {
+  .bg-toggle-track:hover {
+    background-color: var(--color-toggle-track-hover);
+  }
+}
+.bg-toggle-track:active {
+  background-color: var(--color-toggle-track-active);
+}
+.border-action-outline {
+  border-color: var(--color-action-outline-border);
+}
+@media (hover: hover) {
+  .border-action-outline:hover,
+.hover\:border-action-outline-hover:hover {
+    border-color: var(--color-action-outline-border-hover);
+  }
+}
 .bg-action-danger {
   background-color: var(--color-action-danger);
 }
@@ -7678,6 +9629,9 @@ body {
 .z-sticky {
   z-index: var(--z-sticky);
 }
+.z-fixed {
+  z-index: var(--z-fixed);
+}
 .z-dropdown {
   z-index: var(--z-dropdown);
 }