@byline/ui 0.9.3 → 0.10.1

package/dist/styles/styles.css

@@ -0,0 +1,2922 @@
+@layer byline-base {
+  @keyframes enterFromRight {
+    from {
+      opacity: 0;
+      transform: translateX(200px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes enterFromLeft {
+    from {
+      opacity: 0;
+      transform: translateX(-200px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes exitToRight {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    to {
+      opacity: 0;
+      transform: translateX(200px);
+    }
+  }
+
+  @keyframes exitToLeft {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    to {
+      opacity: 0;
+      transform: translateX(-200px);
+    }
+  }
+
+  @keyframes scaleIn {
+    from {
+      opacity: 0;
+      transform: rotateX(-30deg) scale(.9);
+    }
+
+    to {
+      opacity: 1;
+      transform: rotateX(0) scale(1);
+    }
+  }
+
+  @keyframes scaleOut {
+    from {
+      opacity: 1;
+      transform: rotateX(0) scale(1);
+    }
+
+    to {
+      opacity: 0;
+      transform: rotateX(-10deg) scale(.95);
+    }
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fadeOut {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes slideUpAndFade {
+    from {
+      opacity: 0;
+      transform: translateY(2px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slideRightAndFade {
+    from {
+      opacity: 0;
+      transform: translateX(-2px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slideDownAndFade {
+    from {
+      opacity: 0;
+      transform: translateY(-2px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slideLeftAndFade {
+    from {
+      opacity: 0;
+      transform: translateX(2px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  :root {
+    --border-width-thin: 1px;
+    --border-width-normal: 2px;
+    --border-width-thick: 4px;
+    --border-style-solid: solid;
+    --border-style-dashed: dashed;
+    --border-style-dotted: dotted;
+    --border-radius-none: 0px;
+    --border-radius-sm: 4px;
+    --border-radius-md: 8px;
+    --border-radius-lg: 12px;
+    --border-radius-xl: 16px;
+    --border-radius-2xl: 24px;
+    --border-radius-full: 9999px;
+    --ring-offset-width: 2px;
+    --ring-inset: ;
+    --ring-shadow: 0 0 #0000;
+    --breakpoint-xs: 30rem;
+    --breakpoint-sm: 40rem;
+    --breakpoint-md: 48rem;
+    --breakpoint-lg: 66rem;
+    --breakpoint-xl: 77rem;
+    --breakpoint-2xl: 94rem;
+    --theme-base: oklch(43.11% .1 317.53);
+    --theme-25: oklch(from var(--theme-base) calc(l * 2) c h);
+    --theme-50: oklch(from var(--theme-base) calc(l * 1.75) c h);
+    --theme-100: oklch(from var(--theme-base) calc(l * 1.5) c h);
+    --theme-200: oklch(from var(--theme-base) calc(l * 1.25) c h);
+    --theme-300: oklch(from var(--theme-base) calc(l * 1.1) c h);
+    --theme-400: var(--theme-base);
+    --theme-500: oklch(from var(--theme-base) calc(l * .95) c h);
+    --theme-600: oklch(from var(--theme-base) calc(l * .9) c h);
+    --theme-700: oklch(from var(--theme-base) calc(l * .85) c h);
+    --theme-800: oklch(from var(--theme-base) calc(l * .8) c h);
+    --theme-900: oklch(from var(--theme-base) calc(l * .75) c h);
+    --theme-950: oklch(from var(--theme-base) calc(l * .7) c h);
+    --primary-base: oklch(49.7% .189 295.76);
+    --primary-25: oklch(from var(--primary-base) calc(l * 2) c h);
+    --primary-50: oklch(from var(--primary-base) calc(l * 1.75) c h);
+    --primary-100: oklch(from var(--primary-base) calc(l * 1.5) c h);
+    --primary-200: oklch(from var(--primary-base) calc(l * 1.25) c h);
+    --primary-300: oklch(from var(--primary-base) calc(l * 1.1) c h);
+    --primary-400: var(--primary-base);
+    --primary-500: oklch(from var(--primary-base) calc(l * .95) c h);
+    --primary-600: oklch(from var(--primary-base) calc(l * .9) c h);
+    --primary-700: oklch(from var(--primary-base) calc(l * .85) c h);
+    --primary-800: oklch(from var(--primary-base) calc(l * .8) c h);
+    --primary-900: oklch(from var(--primary-base) calc(l * .75) c h);
+    --primary-950: oklch(from var(--primary-base) calc(l * .7) c h);
+    --secondary-base: oklch(84.61% .15 82.94);
+    --secondary-25: oklch(from var(--secondary-base) calc(l * 2.25) .1 h);
+    --secondary-50: oklch(from var(--secondary-base) calc(l * 2) c h);
+    --secondary-100: oklch(from var(--secondary-base) calc(l * 1.75) c h);
+    --secondary-200: oklch(from var(--secondary-base) calc(l * 1.5) c h);
+    --secondary-300: oklch(from var(--secondary-base) calc(l * 1.1) c h);
+    --secondary-400: var(--secondary-base);
+    --secondary-500: oklch(from var(--secondary-base) calc(l * .95) c h);
+    --secondary-600: oklch(from var(--secondary-base) calc(l * .9) c h);
+    --secondary-700: oklch(from var(--secondary-base) calc(l * .85) c h);
+    --secondary-800: oklch(from var(--secondary-base) calc(l * .8) c h);
+    --secondary-900: oklch(from var(--secondary-base) calc(l * .75) c h);
+    --secondary-950: oklch(from var(--secondary-base) calc(l * .7) c h);
+    --accent-base: oklch(75.4% .1 324.9);
+    --accent-25: oklch(from var(--accent-base) .985 .06 h);
+    --accent-50: oklch(from var(--accent-base) .975 .08 h);
+    --accent-100: oklch(from var(--accent-base) .9 .07 h);
+    --accent-200: oklch(from var(--accent-base) .85 c h);
+    --accent-300: oklch(from var(--accent-base) .8 c h);
+    --accent-400: var(--accent-base);
+    --accent-500: oklch(from var(--accent-base) .7 c h);
+    --accent-600: oklch(from var(--accent-base) .68 c h);
+    --accent-700: oklch(from var(--accent-base) .62 .1 h);
+    --accent-800: oklch(from var(--accent-base) .6 .1 h);
+    --accent-900: oklch(from var(--accent-base) .58 .1 h);
+    --accent-950: oklch(from var(--accent-base) .5 .11 h);
+    --canvas-base: oklch(54.2% .0037 275.34);
+    --canvas-25: oklch(from var(--canvas-base) calc(l * 1.9) c h);
+    --canvas-50: oklch(from var(--canvas-base) calc(l * 1.75) c h);
+    --canvas-100: oklch(from var(--canvas-base) calc(l * 1.6) c h);
+    --canvas-200: oklch(from var(--canvas-base) calc(l * 1.4) c h);
+    --canvas-300: oklch(from var(--canvas-base) calc(l * 1.2) c h);
+    --canvas-400: var(--canvas-base);
+    --canvas-500: oklch(from var(--canvas-base) calc(l * .9) c h);
+    --canvas-600: oklch(from var(--canvas-base) calc(l * .7) c h);
+    --canvas-700: oklch(from var(--canvas-base) calc(l * .5) c h);
+    --canvas-800: oklch(from var(--canvas-base) calc(l * .335) c h);
+    --canvas-900: oklch(from var(--canvas-base) calc(l * .3) c h);
+    --canvas-950: oklch(from var(--canvas-base) calc(l * .225) c h);
+    --gray-base: oklch(59.84% 0 0);
+    --gray-25: oklch(from var(--gray-base) calc(l * 1.625) c h);
+    --gray-50: oklch(from var(--gray-base) calc(l * 1.575) c h);
+    --gray-100: oklch(from var(--gray-base) calc(l * 1.475) c h);
+    --gray-200: oklch(from var(--gray-base) calc(l * 1.35) c h);
+    --gray-300: oklch(from var(--gray-base) calc(l * 1.175) c h);
+    --gray-400: var(--gray-base);
+    --gray-500: oklch(from var(--gray-base) calc(l * .85) c h);
+    --gray-600: oklch(from var(--gray-base) calc(l * .725) c h);
+    --gray-700: oklch(from var(--gray-base) calc(l * .6126) c h);
+    --gray-800: oklch(from var(--gray-base) calc(l * .5) c h);
+    --gray-900: oklch(from var(--gray-base) calc(l * .4) c h);
+    --gray-950: oklch(from var(--gray-base) calc(l * .3) c h);
+    --green-base: oklch(65.26% .18 142.58);
+    --green-25: oklch(from var(--green-base) calc(l * 2) c h);
+    --green-50: oklch(from var(--green-base) calc(l * 1.75) c h);
+    --green-100: oklch(from var(--green-base) calc(l * 1.5) c h);
+    --green-200: oklch(from var(--green-base) calc(l * 1.25) c h);
+    --green-300: oklch(from var(--green-base) calc(l * 1.1) c h);
+    --green-400: var(--green-base);
+    --green-500: oklch(from var(--green-base) calc(l * .95) c h);
+    --green-600: oklch(from var(--green-base) calc(l * .9) c h);
+    --green-700: oklch(from var(--green-base) calc(l * .85) c h);
+    --green-800: oklch(from var(--green-base) calc(l * .8) c h);
+    --green-900: oklch(from var(--green-base) calc(l * .75) c h);
+    --green-950: oklch(from var(--green-base) calc(l * .7) c h);
+    --blue-base: oklch(53.66% .1942 265.89);
+    --blue-25: oklch(from var(--blue-base) calc(l * 2) c h);
+    --blue-50: oklch(from var(--blue-base) calc(l * 1.75) c h);
+    --blue-100: oklch(from var(--blue-base) calc(l * 1.5) c h);
+    --blue-200: oklch(from var(--blue-base) calc(l * 1.25) c h);
+    --blue-300: oklch(from var(--blue-base) calc(l * 1.1) c h);
+    --blue-400: var(--blue-base);
+    --blue-500: oklch(from var(--blue-base) calc(l * .95) c h);
+    --blue-600: oklch(from var(--blue-base) calc(l * .9) c h);
+    --blue-700: oklch(from var(--blue-base) calc(l * .85) c h);
+    --blue-800: oklch(from var(--blue-base) calc(l * .8) c h);
+    --blue-900: oklch(from var(--blue-base) calc(l * .75) c h);
+    --blue-950: oklch(from var(--blue-base) calc(l * .7) c h);
+    --yellow-base: oklch(75% .15 82.94);
+    --yellow-25: oklch(from var(--yellow-base) calc(l * 2) c h);
+    --yellow-50: oklch(from var(--yellow-base) calc(l * 1.75) c h);
+    --yellow-100: oklch(from var(--yellow-base) calc(l * 1.5) c h);
+    --yellow-200: oklch(from var(--yellow-base) calc(l * 1.25) c h);
+    --yellow-300: oklch(from var(--yellow-base) calc(l * 1.1) c h);
+    --yellow-400: var(--yellow-base);
+    --yellow-500: oklch(from var(--yellow-base) calc(l * .95) c h);
+    --yellow-600: oklch(from var(--yellow-base) calc(l * .9) c h);
+    --yellow-700: oklch(from var(--yellow-base) calc(l * .85) c h);
+    --yellow-800: oklch(from var(--yellow-base) calc(l * .8) c h);
+    --yellow-900: oklch(from var(--yellow-base) calc(l * .75) c h);
+    --yellow-950: oklch(from var(--yellow-base) calc(l * .7) c h);
+    --red-base: oklch(54.27% .18 31.76);
+    --red-25: oklch(from var(--red-base) calc(l * 2) c h);
+    --red-50: oklch(from var(--red-base) calc(l * 1.75) c h);
+    --red-100: oklch(from var(--red-base) calc(l * 1.5) c h);
+    --red-200: oklch(from var(--red-base) calc(l * 1.25) c h);
+    --red-300: oklch(from var(--red-base) calc(l * 1.1) c h);
+    --red-400: var(--red-base);
+    --red-500: oklch(from var(--red-base) calc(l * .95) c h);
+    --red-600: oklch(from var(--red-base) calc(l * .9) c h);
+    --red-700: oklch(from var(--red-base) calc(l * .85) c h);
+    --red-800: oklch(from var(--red-base) calc(l * .8) c h);
+    --red-900: oklch(from var(--red-base) calc(l * .75) c h);
+    --red-950: oklch(from var(--red-base) calc(l * .7) c h);
+    --opacity-0: 0;
+    --opacity-25: .25;
+    --opacity-50: .5;
+    --opacity-75: .75;
+    --opacity-100: 1;
+    --shadow: 0 0 #0000;
+    --shadow-xs: 0px 1px 2px #0000000d;
+    --shadow-sm: 0px 2px 4px #0000001a;
+    --shadow-md: 0px 4px 6px #0000001a;
+    --shadow-lg: 0px 6px 12px #00000026;
+    --shadow-xl: 0px 8px 16px #0003;
+    --spacing-0: 0;
+    --spacing-2: .125rem;
+    --spacing-4: .25rem;
+    --spacing-6: .375rem;
+    --spacing-8: .5rem;
+    --spacing-12: .75rem;
+    --spacing-16: 1rem;
+    --spacing-20: 1.25rem;
+    --spacing-24: 1.5rem;
+    --spacing-28: 1.75rem;
+    --spacing-32: 2rem;
+    --spacing-36: 2.25rem;
+    --spacing-40: 2.5rem;
+    --spacing-44: 2.75rem;
+    --spacing-48: 3rem;
+    --spacing-64: 4rem;
+    --spacing-80: 5rem;
+    --spacing-96: 6rem;
+    --spacing-112: 7rem;
+    --spacing-128: 8rem;
+    --size-0: 0;
+    --size-2: .125rem;
+    --size-4: .25rem;
+    --size-6: .375rem;
+    --size-8: .5rem;
+    --size-12: .75rem;
+    --size-16: 1rem;
+    --size-20: 1.25rem;
+    --size-24: 1.5rem;
+    --size-28: 1.75rem;
+    --size-32: 2rem;
+    --size-36: 2.25rem;
+    --size-40: 2.5rem;
+    --size-44: 2.75rem;
+    --size-48: 3rem;
+    --size-64: 4rem;
+    --size-80: 5rem;
+    --size-96: 6rem;
+    --size-112: 7rem;
+    --size-128: 8rem;
+    --transition-fast: .175s ease-in-out;
+    --transition-normal: .23s ease-in-out;
+    --transition-slow: .4s ease-in-out;
+    --font-size-xs: .75rem;
+    --font-size-sm: .875rem;
+    --font-size-base: 1rem;
+    --font-size-lg: 1.125rem;
+    --font-size-xl: 1.25rem;
+    --font-size-2xl: 1.5rem;
+    --font-size-3xl: 1.875rem;
+    --font-size-4xl: 2.25rem;
+    --font-size-5xl: 2.625rem;
+    --font-size-6xl: 3rem;
+    --font-size-7xl: 3.375rem;
+    --font-size-8xl: 3.75rem;
+    --font-weight-light: 300;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --font-weight-extrabold: 800;
+    --font-weight-ultrabold: 900;
+    --line-height-tight: 1.1;
+    --line-height-snug: 1.25;
+    --line-height-normal: 1.5;
+    --line-height-relaxed: 1.625;
+    --line-height-loose: 2;
+    --letter-spacing-tight: -.02em;
+    --letter-spacing-normal: 0;
+    --letter-spacing-wide: .05em;
+    --z-index-low: 10;
+    --z-index-medium: 100;
+    --z-index-high: 1000;
+    --z-index-modal: 1050;
+    --z-index-toast: 1100;
+  }
+}
+
+@layer byline-functional {
+  :root {
+    --primary: var(--primary-500);
+    --secondary: var(--secondary-500);
+    --accent: var(--accent-500);
+    --noeffect: var(--gray-500);
+    --success: var(--green-500);
+    --info: var(--blue-500);
+    --warning: var(--yellow-500);
+    --danger: var(--red-500);
+    --focus-ring: var(--ring-primary);
+    --fill-primary-strong: var(--primary-500);
+    --fill-primary-strong-hover: oklch(from var(--primary-500) calc(l * .9) c h);
+    --fill-primary-strong-disabled: oklch(from var(--primary-500) calc(l * 1.1) calc(c * .85) h);
+    --fill-primary-weak: oklch(from var(--primary-500) calc(l * 2.04) calc(c * .2) h / .7);
+    --fill-primary-weak-hover: oklch(from var(--primary-500) calc(l * 2) calc(c * .2) h / .7);
+    --fill-primary-weak-disabled: oklch(from var(--primary-500) calc(l * 2) calc(c * .2) h / .7);
+    --fill-primary-outlined: transparent;
+    --fill-primary-outlined-hover: oklch(from var(--primary-500) calc(l * 2) calc(c * .2) h / .7);
+    --fill-primary-outlined-disabled: oklch(from var(--primary-500) calc(l * 2) calc(c * .2) h /
+      .7);
+    --fill-primary-text: transparent;
+    --fill-primary-text-hover: oklch(from var(--primary-500) calc(l * 2) calc(c * .2) h / .7);
+    --fill-primary-text-disabled: oklch(from var(--primary-500) calc(l * 2) calc(c * .2) h / .7);
+    --text-on-primary-strong: white;
+    --text-on-primary-strong-hover: var(--primary-600);
+    --text-on-primary-strong-disabled: oklch(90% 5.0664e-8 90);
+    --text-on-primary-weak: oklch(from var(--primary-500) calc(l * .7) c h);
+    --text-on-primary-weak-hover: oklch(from var(--primary-600) calc(l * 1.5) calc(c * .5) h);
+    --text-on-primary-weak-disabled: oklch(from var(--primary-600) calc(l * 1.5) calc(c * .5) h);
+    --text-on-primary-outlined: oklch(from var(--primary-500) calc(l * .7) c h);
+    --text-on-primary-outlined-hover: oklch(from var(--primary-600) calc(l * 1.5) calc(c * .5) h);
+    --text-on-primary-outlined-disabled: oklch(from var(--primary-600) calc(l * 1.5) calc(c * .5) h);
+    --text-primary: var(--primary-500);
+    --text-primary-weak: oklch(from var(--primary-500) calc(l * .7) c h);
+    --text-primary-hover: oklch(from var(--primary-500) calc(l * .7) c h);
+    --text-primary-disabled: oklch(from var(--primary-500) calc(l * 1.5) calc(c * .5) h);
+    --stroke-primary: var(--primary-600);
+    --stroke-primary-hover: oklch(from var(--primary-600) calc(l * .85) c h);
+    --stroke-primary-disabled: oklch(from var(--primary-600) calc(l * 1.5) calc(c * .8) h);
+    --ring-primary: var(--primary-500);
+    --gradient-primary-start: var(--primary-500);
+    --gradient-primary-end: var(--primary-700);
+    --gradient-primary-foreground: white;
+    --gradient-primary-disabled: oklch(from var(--primary-700) calc(l * 1.2) calc(c * .85) h);
+    --fill-secondary-strong: var(--secondary-500);
+    --fill-secondary-strong-hover: oklch(from var(--secondary-500) calc(l * .95) c h);
+    --fill-secondary-strong-disabled: oklch(from var(--secondary-500) calc(l * 1.1) calc(c * .85) h);
+    --fill-secondary-weak: oklch(from var(--secondary-500) calc(l * 1.6) calc(c * .4) h / .5);
+    --fill-secondary-weak-hover: oklch(from var(--secondary-500) calc(l * 1.2) calc(c * .4) h /
+      .5);
+    --fill-secondary-weak-disabled: oklch(from var(--secondary-500) calc(l * 2) calc(c * .4) c h /
+      .5);
+    --fill-secondary-outlined: transparent;
+    --fill-secondary-outlined-hover: oklch(from var(--secondary-500) calc(l * 2) calc(c * .4) h /
+      .7);
+    --fill-secondary-outlined-disabled: oklch(from var(--secondary-500) calc(l * 2) calc(c * .4) c h /
+      .7);
+    --fill-secondary-text: transparent;
+    --fill-secondary-text-hover: oklch(from var(--secondary-500) calc(l * 2) calc(c * .4) h / .7);
+    --fill-secondary-text-disabled: oklch(from var(--secondary-500) calc(l * 2) calc(c * .4) c h /
+      .7);
+    --text-on-secondary-strong: black;
+    --text-on-secondary-strong-disabled: oklch(0% 0 0);
+    --text-on-secondary-strong-hover: oklch(0% 0 0);
+    --text-on-secondary-weak: var(--secondary-900);
+    --text-on-secondary-weak-hover: oklch(from var(--secondary-900) calc(l * 1.5) calc(c * .5) h);
+    --text-on-secondary-weak-disabled: oklch(from var(--secondary-900) calc(l * 1.5) calc(c * .5) h);
+    --text-on-secondary-outlined: var(--secondary-800);
+    --text-on-secondary-outlined-hover: oklch(from var(--secondary-950) calc(l * 1.5) calc(c * .5) h);
+    --text-on-secondary-outlined-disabled: oklch(from var(--secondary-950) calc(l * 1.5) calc(c * .5) h);
+    --text-secondary: var(--secondary-800);
+    --text-secondary-weak: oklch(from var(--secondary-500) calc(l * .7) c h);
+    --text-secondary-hover: oklch(from var(--secondary-900) calc(l * .7) c h);
+    --text-secondary-disabled: oklch(from var(--secondary-700) calc(l * 1.5) calc(c * .5) h);
+    --stroke-secondary: var(--secondary-700);
+    --stroke-secondary-hover: oklch(from var(--secondary-700) calc(l * .85) c h);
+    --stroke-secondary-disabled: oklch(from var(--secondary-700) calc(l * 1.5) calc(c * .8) h);
+    --ring-secondary: var(--secondary-500);
+    --gradient-secondary-start: var(--secondary-500);
+    --gradient-secondary-end: var(--secondary-700);
+    --gradient-secondary-foreground: black;
+    --gradient-secondary-disabled: oklch(from var(--secondary-700) calc(l * 1.2) calc(c * .85) h);
+    --fill-noeffect-strong: var(--gray-100);
+    --fill-noeffect-strong-hover: oklch(from var(--gray-100) calc(l * .95) c h);
+    --fill-noeffect-strong-disabled: oklch(from var(--gray-100) calc(l * 1.1) calc(c * .85) h);
+    --fill-noeffect-weak: oklch(from var(--gray-100) calc(l * 1.07) c h / .7);
+    --fill-noeffect-weak-hover: oklch(from var(--gray-100) calc(l * 1.05) c h / .7);
+    --fill-noeffect-weak-disabled: oklch(from var(--gray-100) calc(l * 1.07) c h / .7);
+    --fill-noeffect-outlined: transparent;
+    --fill-noeffect-outlined-hover: oklch(from var(--gray-100) calc(l * 1.05) c h / .5);
+    --fill-noeffect-outlined-disabled: oklch(from var(--gray-100) calc(l * 1.07) c h / .5);
+    --fill-noeffect-text: transparent;
+    --fill-noeffect-text-hover: oklch(from var(--gray-100) calc(l * 1.05) c h / .5);
+    --fill-noeffect-text-disabled: oklch(from var(--gray-100) calc(l * 1.07) c h / .5);
+    --text-on-noeffect-strong: black;
+    --text-on-noeffect-strong-hover: oklch(0% 0 0);
+    --text-on-noeffect-strong-disabled: oklch(0% 0 0);
+    --text-on-noeffect-weak: oklch(from var(--gray-100) calc(l * .5) c h);
+    --text-on-noeffect-weak-hover: oklch(from var(--gray-800) calc(l * 1.5) calc(c * .5) h);
+    --text-on-noeffect-weak-disabled: oklch(from var(--gray-800) calc(l * 1.5) calc(c * .5) h);
+    --text-on-noeffect-outlined: oklch(from var(--gray-100) calc(l * .5) c h);
+    --text-on-noeffect-outlined-hover: oklch(from var(--gray-800) calc(l * 1.5) calc(c * .5) h);
+    --text-on-noeffect-outlined-disabled: oklch(from var(--gray-800) calc(l * 1.5) calc(c * .5) h);
+    --text-on-noeffect-text: oklch(from var(--gray-100) calc(l * .5) c h);
+    --text-on-noeffect-text-hover: oklch(from var(--gray-800) calc(l * 1.5) calc(c * .5) h);
+    --text-on-noeffect-text-disabled: oklch(from var(--gray-800) calc(l * 1.5) calc(c * .5) h);
+    --text-noeffect: var(--gray-600);
+    --text-noeffect-weak: oklch(from var(--gray-400) calc(l * .7) c h);
+    --text-noeffect-hover: oklch(from var(--gray-400) calc(l * .7) c h);
+    --text-noeffect-disabled: oklch(from var(--gray-600) calc(l * 1.5) calc(c * .5) h);
+    --stroke-noeffect: var(--gray-500);
+    --stroke-noeffect-hover: oklch(from var(--gray-500) calc(l * .75) c h);
+    --stroke-noeffect-disabled: oklch(from var(--gray-500) calc(l * 1.5) calc(c * .8) h);
+    --ring-noeffect: var(--gray-200);
+    --gradient-noeffect-start: var(--gray-100);
+    --gradient-noeffect-end: var(--gray-200);
+    --gradient-noeffect-foreground: black;
+    --gradient-noeffect-hover: var(--gray-400);
+    --gradient-noeffect-disabled: oklch(from var(--gray-200) calc(l * 1.2) calc(c * .85) h);
+    --fill-success-strong: var(--green-400);
+    --fill-success-strong-hover: oklch(from var(--green-400) calc(l * .9) c h);
+    --fill-success-strong-disabled: oklch(from var(--green-400) calc(l * 1.1) calc(c * .85) h);
+    --fill-success-weak: oklch(from var(--green-100) calc(l * 1.09) calc(c * .85) h / .5);
+    --fill-success-weak-hover: oklch(from var(--green-100) calc(l * .975) calc(c * .85) h / .5);
+    --fill-success-weak-disabled: oklch(from var(--green-100) calc(l * 1.07) calc(c * .85) h /
+      .5);
+    --fill-success-outlined: transparent;
+    --fill-success-outlined-hover: oklch(from var(--green-100) calc(l * .975) calc(c * .85) h /
+      .4);
+    --fill-success-outlined-disabled: oklch(from var(--green-100) calc(l * 1.07) calc(c * .85) h /
+      .4);
+    --fill-success-text: transparent;
+    --fill-success-text-hover: oklch(from var(--green-100) calc(l * .975) calc(c * .85) h / .4);
+    --fill-success-text-disabled: oklch(from var(--green-100) calc(l * 1.07) calc(c * .85) h /
+      .4);
+    --text-on-success-strong: white;
+    --text-on-success-strong-hover: oklch(90% 5.0664e-8 90);
+    --text-on-success-strong-disabled: oklch(90% 5.0664e-8 90);
+    --text-on-success-weak: oklch(from var(--green-400) calc(l * .7) c h);
+    --text-on-success-weak-hover: oklch(from var(--green-400) calc(l * .7) c h);
+    --text-on-success-weak-disabled: oklch(from var(--green-400) calc(l * .7) c h);
+    --text-on-success-outlined: var(--green-600);
+    --text-on-success-outlined-hover: oklch(from var(--green-600) calc(l * .7) c h);
+    --text-on-success-outlined-disabled: oklch(from var(--green-600) calc(l * .7) c h);
+    --text-success: var(--green-600);
+    --text-success-weak: oklch(from var(--green-400) calc(l * .7) c h);
+    --text-success-hover: oklch(from var(--green-400) calc(l * .7) c h);
+    --text-success-disabled: oklch(from var(--green-600) calc(l * 1.5) calc(c * .5) h);
+    --stroke-success: var(--green-600);
+    --stroke-success-hover: oklch(from var(--green-600) calc(l * .85) c h);
+    --stroke-success-disabled: oklch(from var(--green-600) calc(l * 1.5) calc(c * .8) h);
+    --ring-success: var(--green-400);
+    --gradient-success-start: var(--green-500);
+    --gradient-success-end: var(--green-700);
+    --gradient-success-foreground: white;
+    --gradient-success-disabled: oklch(from var(--green-700) calc(l * 1.2) calc(c * .85) h);
+    --fill-info-strong: var(--blue-400);
+    --fill-info-strong-hover: oklch(from var(--blue-400) calc(l * .9) c h);
+    --fill-info-strong-disabled: oklch(from var(--blue-400) calc(l * 1.1) calc(c * .85) h);
+    --fill-info-weak: oklch(from var(--blue-400) calc(l * 1.75) calc(c * .2) h / .7);
+    --fill-info-weak-hover: oklch(from var(--blue-400) calc(l * 1.7) calc(c * .2) h / .7);
+    --fill-info-weak-disabled: oklch(from var(--blue-400) calc(l * 1.8) calc(c * .2) h / .7);
+    --fill-info-outlined: transparent;
+    --fill-info-outlined-hover: oklch(from var(--blue-400) calc(l * 1.7) calc(c * .2) h / .7);
+    --fill-info-outlined-disabled: oklch(from var(--blue-400) calc(l * 1.8) calc(c * .2) h / .7);
+    --fill-info-text: transparent;
+    --fill-info-text-hover: oklch(from var(--blue-400) calc(l * 1.7) calc(c * .2) h / .7);
+    --fill-info-text-disabled: oklch(from var(--blue-400) calc(l * 1.8) calc(c * .2) h / .7);
+    --text-on-info-strong: white;
+    --text-on-info-strong-hover: oklch(90% 5.0664e-8 90);
+    --text-on-info-strong-disabled: oklch(90% 5.0664e-8 90);
+    --text-on-info-weak: oklch(from var(--blue-400) calc(l * .7) c h);
+    --text-on-info-weak-hover: oklch(from var(--blue-400) calc(l * .7) c h);
+    --text-on-info-weak-disabled: oklch(from var(--blue-400) calc(l * .7) c h);
+    --text-on-info-outlined: oklch(from var(--blue-400) calc(l * .7) c h);
+    --text-on-info-outlined-hover: oklch(from var(--blue-400) calc(l * .7) c h);
+    --text-on-info-outlined-disabled: oklch(from var(--blue-400) calc(l * .7) c h);
+    --text-info: var(--blue-300);
+    --text-info-weak: oklch(from var(--blue-400) calc(l * .7) c h);
+    --text-info-hover: oklch(from var(--blue-400) calc(l * .7) c h);
+    --text-info-disabled: oklch(from var(--blue-300) calc(l * 1.5) calc(c * .5) h);
+    --stroke-info: var(--blue-500);
+    --stroke-info-hover: oklch(from var(--blue-500) calc(l * .85) c h);
+    --stroke-info-disabled: oklch(from var(--blue-500) calc(l * 1.5) calc(c * .8) h);
+    --ring-info: var(--blue-400);
+    --gradient-info-start: var(--blue-500);
+    --gradient-info-end: var(--blue-700);
+    --gradient-info-foreground: white;
+    --gradient-info-disabled: oklch(from var(--blue-700) calc(l * 1.2) calc(c * .85) h);
+    --fill-warning-strong: var(--yellow-300);
+    --fill-warning-strong-hover: oklch(from var(--yellow-300) calc(l * .95) c h);
+    --fill-warning-strong-disabled: oklch(from var(--yellow-300) calc(l * 1.1) calc(c * .85) h);
+    --fill-warning-weak: oklch(from var(--yellow-300) calc(l * 1.5) calc(c * .5) h / .7);
+    --fill-warning-weak-hover: oklch(from var(--yellow-300) calc(l * 1.15) calc(c * .5) h / .7);
+    --fill-warning-weak-disabled: oklch(from var(--yellow-300) calc(l * 1.8) calc(c * .5) h / .7);
+    --fill-warning-outlined: transparent;
+    --fill-warning-outlined-hover: oklch(from var(--yellow-300) calc(l * 1.15) calc(c * .5) h /
+      .7);
+    --fill-warning-outlined-disabled: oklch(from var(--yellow-300) calc(l * 1.8) calc(c * .5) h /
+      .7);
+    --fill-warning-text: transparent;
+    --fill-warning-text-hover: oklch(from var(--yellow-300) calc(l * 1.15) calc(c * .5) h / .7);
+    --fill-warning-text-disabled: oklch(from var(--yellow-300) calc(l * 1.8) calc(c * .5) h / .7);
+    --text-on-warning-strong: black;
+    --text-on-warning-strong-hover: oklch(0% 0 0);
+    --text-on-warning-strong-disabled: oklch(0% 0 0);
+    --text-on-warning-weak: var(--yellow-700);
+    --text-on-warning-weak-hover: oklch(from var(--yellow-700) calc(l * .9) calc(c * .85) h);
+    --text-on-warning-weak-disabled: oklch(from var(--yellow-700) calc(l * .9) calc(c * .85) h);
+    --text-on-warning-outlined: var(--yellow-800);
+    --text-on-warning-outlined-hover: oklch(from var(--yellow-800) calc(l * .9) calc(c * .85) h);
+    --text-on-warning-outlined-disabled: oklch(from var(--yellow-800) calc(l * .9) calc(c * .85) h);
+    --text-warning: var(--yellow-700);
+    --text-warning-weak: oklch(from var(--yellow-700) calc(l * .6) c h);
+    --text-warning-hover: oklch(from var(--yellow-700) calc(l * .6) c h);
+    --text-warning-disabled: oklch(from var(--yellow-700) calc(l * 1.5) calc(c * .5) h);
+    --stroke-warning: var(--yellow-500);
+    --stroke-warning-hover: oklch(from var(--yellow-500) calc(l * .85) c h);
+    --stroke-warning-disabled: oklch(from var(--yellow-500) calc(l * 1.5) calc(c * .8) h);
+    --ring-warning: var(--yellow-300);
+    --gradient-warning-start: var(--yellow-300);
+    --gradient-warning-end: var(--yellow-400);
+    --gradient-warning-foreground: black;
+    --gradient-warning-disabled: oklch(from var(--yellow-400) calc(l * 1.2) calc(c * .85) h);
+    --fill-danger-strong: var(--red-400);
+    --fill-danger-strong-hover: oklch(from var(--red-400) calc(l * .9) c h);
+    --fill-danger-strong-disabled: oklch(from var(--red-400) calc(l * 1.1) calc(c * .85) h);
+    --fill-danger-weak: oklch(from var(--red-300) calc(l * 1.75) calc(c * .5) h / .7);
+    --fill-danger-weak-hover: oklch(from var(--red-300) calc(l * 1.65) calc(c * .5) h / .7);
+    --fill-danger-weak-disabled: oklch(from var(--red-300) calc(l * 1.65) calc(c * .5) h / .7);
+    --fill-danger-outlined: transparent;
+    --fill-danger-outlined-hover: oklch(from var(--red-300) calc(l * 1.65) calc(c * .5) h / .7);
+    --fill-danger-outlined-disabled: oklch(from var(--red-300) calc(l * 1.65) calc(c * .5) h /
+      .7);
+    --fill-danger-text: transparent;
+    --fill-danger-text-hover: oklch(from var(--red-300) calc(l * 1.65) calc(c * .5) h / .7);
+    --fill-danger-text-disabled: oklch(from var(--red-300) calc(l * 1.65) calc(c * .5) h / .7);
+    --text-on-danger-strong: white;
+    --text-on-danger-strong-hover: oklch(90% 5.0664e-8 90);
+    --text-on-danger-strong-disabled: oklch(90% 5.0664e-8 90);
+    --text-on-danger-weak: oklch(from var(--red-400) calc(l * .7) c h);
+    --text-on-danger-weak-hover: oklch(from var(--red-400) calc(l * .7) c h);
+    --text-on-danger-weak-disabled: oklch(from var(--red-400) calc(l * .7) c h);
+    --text-on-danger-outlined: oklch(from var(--red-400) calc(l * .7) c h);
+    --text-on-danger-outlined-hover: oklch(from var(--red-400) calc(l * .7) c h);
+    --text-on-danger-outlined-disabled: oklch(from var(--red-400) calc(l * .7) c h);
+    --text-danger: var(--red-500);
+    --text-danger-weak: oklch(from var(--red-400) calc(l * .7) c h);
+    --text-danger-hover: oklch(from var(--red-400) calc(l * .7) c h);
+    --text-danger-disabled: oklch(from var(--red-500) calc(l * 1.5) calc(c * .5) h);
+    --stroke-danger: var(--red-500);
+    --stroke-danger-hover: oklch(from var(--red-500) calc(l * .85) c h);
+    --stroke-danger-disabled: oklch(from var(--red-500) calc(l * 1.5) calc(c * .8) h);
+    --ring-danger: var(--red-400);
+    --gradient-danger-start: var(--red-500);
+    --gradient-danger-end: var(--red-700);
+    --gradient-danger-foreground: white;
+    --gradient-danger-disabled: oklch(from var(--red-700) calc(l * 1.2) calc(c * .85) h);
+  }
+
+  .dark, [data-theme="dark"], [data-theme="dark"]::backdrop {
+    --primary: var(--primary-500);
+    --secondary: var(--secondary-500);
+    --accent: var(--accent-500);
+    --noeffect: var(--gray-500);
+    --success: var(--green-500);
+    --info: var(--blue-500);
+    --warning: var(--yellow-500);
+    --danger: var(--red-500);
+    --focus-ring: var(--ring-primary);
+    --fill-primary-strong: var(--primary-500);
+    --fill-primary-strong-hover: oklch(from var(--primary-500) calc(l * .9) c h);
+    --fill-primary-strong-disabled: oklch(from var(--primary-500) calc(l * 1.1) calc(c * .85) h);
+    --fill-primary-weak: oklch(from var(--primary-500) calc(l * 1.05) calc(c * .9) h / .5);
+    --fill-primary-weak-hover: oklch(from var(--primary-500) l calc(c * .9) h / .5);
+    --fill-primary-weak-disabled: oklch(from var(--primary-500) l calc(c * .9) h / .5);
+    --fill-primary-outlined: transparent;
+    --fill-primary-outlined-hover: oklch(from var(--primary-500) calc(l * .9) calc(c * .9) h /
+      .3);
+    --fill-primary-outlined-disabled: oklch(from var(--primary-500) calc(l * .9) calc(c * .9) h /
+      .3);
+    --fill-primary-text: transparent;
+    --fill-primary-text-hover: oklch(from var(--primary-500) calc(l * .9) calc(c * .9) h / .3);
+    --fill-primary-text-disabled: oklch(from var(--primary-500) calc(l * .9) calc(c * .9) h /
+      .3);
+    --text-on-primary-strong: white;
+    --text-on-primary-strong-hover: var(--primary-600);
+    --text-on-primary-strong-disabled: oklch(90% 5.0664e-8 90);
+    --text-on-primary-weak: var(--primary-200);
+    --text-on-primary-weak-hover: oklch(from var(--primary-600) calc(l * 1.5) calc(c * .5) h);
+    --text-on-primary-weak-disabled: oklch(from var(--primary-600) calc(l * 1.5) calc(c * .5) h);
+    --text-on-primary-outlined: var(--primary-200);
+    --text-on-primary-outlined-hover: oklch(from var(--primary-200) l calc(c * .5) h);
+    --text-on-primary-outlined-disabled: oklch(from var(--primary-200) l calc(c * .5) h);
+    --text-primary: var(--primary-300);
+    --text-primary-weak: oklch(from var(--primary-300) calc(l * .7) c h);
+    --text-primary-hover: oklch(from var(--primary-300) calc(l * .7) c h);
+    --text-primary-disabled: oklch(from var(--primary-300) calc(l * 1.5) calc(c * .5) h);
+    --stroke-primary: var(--primary-300);
+    --stroke-primary-hover: oklch(from var(--primary-300) calc(l * 1.1) c h);
+    --stroke-primary-disabled: oklch(from var(--primary-300) calc(l * .8) calc(c * .8) h);
+    --ring-primary: var(--primary-300);
+    --gradient-primary-start: var(--primary-500);
+    --gradient-primary-end: var(--primary-700);
+    --gradient-primary-foreground: white;
+    --gradient-primary-disabled: oklch(from var(--primary-700) calc(l * .85) calc(c * .85) h);
+    --fill-secondary-strong: var(--secondary-500);
+    --fill-secondary-strong-hover: oklch(from var(--secondary-500) calc(l * .95) c h);
+    --fill-secondary-strong-disabled: oklch(from var(--secondary-500) calc(l * 1.1) calc(c * .85) h);
+    --fill-secondary-weak: oklch(from var(--secondary-500) calc(l * 1.1) calc(c * .8) h / .2);
+    --fill-secondary-weak-hover: oklch(from var(--secondary-500) l calc(c * .8) h / .2);
+    --fill-secondary-weak-disabled: oklch(from var(--secondary-500) l calc(c * .8) c h / .2);
+    --fill-secondary-outlined: transparent;
+    --fill-secondary-outlined-hover: oklch(from var(--secondary-500) calc(l * 1.1) calc(c * .8) h /
+      .1);
+    --fill-secondary-outlined-disabled: oklch(from var(--secondary-500) calc(l * 1.1) calc(c * .8) h /
+      .1);
+    --fill-secondary-text: transparent;
+    --fill-secondary-text-hover: oklch(from var(--secondary-500) calc(l * 1.1) calc(c * .8) h /
+      .1);
+    --fill-secondary-text-disabled: oklch(from var(--secondary-500) calc(l * 1.1) calc(c * .8) h /
+      .1);
+    --text-on-secondary-strong: black;
+    --text-on-secondary-strong-disabled: oklch(0% 0 0);
+    --text-on-secondary-strong-hover: oklch(0% 0 0);
+    --text-on-secondary-weak: oklch(from var(--secondary-500) calc(l * .7) c h);
+    --text-on-secondary-weak-hover: oklch(from var(--secondary-950) calc(l * 1.5) calc(c * .5) h);
+    --text-on-secondary-weak-disabled: oklch(from var(--secondary-950) calc(l * 1.5) calc(c * .5) h);
+    --text-on-secondary-outlined: oklch(from var(--secondary-500) calc(l * .7) c h);
+    --text-on-secondary-outlined-hover: oklch(from var(--secondary-950) calc(l * 1.5) calc(c * .5) h);
+    --text-on-secondary-outlined-disabled: oklch(from var(--secondary-950) calc(l * 1.5) calc(c * .5) h);
+    --text-secondary: var(--secondary-500);
+    --text-secondary-weak: oklch(from var(--secondary-500) calc(l * .7) c h);
+    --text-secondary-hover: oklch(from var(--secondary-500) calc(l * .7) c h);
+    --text-secondary-disabled: oklch(from var(--secondary-500) calc(l * 1.5) calc(c * .5) h);
+    --stroke-secondary: var(--secondary-500);
+    --stroke-secondary-hover: oklch(from var(--secondary-500) calc(l * 1.1) c h);
+    --stroke-secondary-disabled: oklch(from var(--secondary-500) calc(l * .8) calc(c * .8) h);
+    --ring-secondary: var(--secondary-500);
+    --gradient-secondary-start: var(--secondary-500);
+    --gradient-secondary-end: var(--secondary-700);
+    --gradient-secondary-foreground: black;
+    --gradient-secondary-disabled: oklch(from var(--secondary-700) calc(l * .85) calc(c * .85) h);
+    --fill-noeffect-strong: var(--gray-700);
+    --fill-noeffect-strong-hover: oklch(from var(--gray-700) calc(l * .95) c h);
+    --fill-noeffect-strong-disabled: oklch(from var(--gray-700) calc(l * 1.1) calc(c * .85) h);
+    --fill-noeffect-weak: oklch(from var(--gray-100) calc(l * 1.09) c h / .3);
+    --fill-noeffect-weak-hover: oklch(from var(--gray-100) calc(l * 1.05) c h / .3);
+    --fill-noeffect-weak-disabled: oklch(from var(--gray-100) calc(l * 1.07) c h / .3);
+    --fill-noeffect-outlined: transparent;
+    --fill-noeffect-outlined-hover: oklch(from var(--gray-300) calc(l * 1.05) c h / .1);
+    --fill-noeffect-outlined-disabled: oklch(from var(--gray-300) calc(l * 1.07) c h / .1);
+    --fill-noeffect-text: transparent;
+    --fill-noeffect-text-hover: oklch(from var(--gray-300) calc(l * 1.05) c h / .1);
+    --fill-noeffect-text-disabled: oklch(from var(--gray-300) calc(l * 1.07) c h / .1);
+    --text-on-noeffect-strong: white;
+    --text-on-noeffect-strong-hover: oklch(0% 0 0);
+    --text-on-noeffect-strong-disabled: oklch(0% 0 0);
+    --text-on-noeffect-weak: var(--gray-950);
+    --text-on-noeffect-weak-hover: oklch(from var(--gray-800) calc(l * 1.5) calc(c * .5) h);
+    --text-on-noeffect-weak-disabled: oklch(from var(--gray-800) calc(l * 1.5) calc(c * .5) h);
+    --text-on-noeffect-outlined: var(--gray-200);
+    --text-on-noeffect-outlined-hover: oklch(from var(--gray-200) calc(l * 1.5) calc(c * .5) h);
+    --text-on-noeffect-outlined-disabled: oklch(from var(--gray-200) calc(l * 1.5) calc(c * .5) h);
+    --text-on-noeffect-text: var(--gray-200);
+    --text-on-noeffect-text-hover: oklch(from var(--gray-200) calc(l * 1.5) calc(c * .5) h);
+    --text-on-noeffect-text-disabled: oklch(from var(--gray-200) calc(l * 1.5) calc(c * .5) h);
+    --text-noeffect: var(--gray-200);
+    --text-noeffect-weak: oklch(from var(--gray-200) calc(l * .7) c h);
+    --text-noeffect-hover: oklch(from var(--gray-200) calc(l * .7) c h);
+    --text-noeffect-disabled: oklch(from var(--gray-200) calc(l * 1.5) calc(c * .5) h);
+    --stroke-noeffect: var(--gray-500);
+    --stroke-noeffect-hover: oklch(from var(--gray-500) calc(l * 1.2) c h);
+    --stroke-noeffect-disabled: oklch(from var(--gray-500) calc(l * .8) calc(c * .8) h);
+    --ring-noeffect: var(--gray-900);
+    --gradient-noeffect-start: var(--gray-700);
+    --gradient-noeffect-end: var(--gray-800);
+    --gradient-noeffect-foreground: white;
+    --gradient-noeffect-hover: var(--gray-800);
+    --gradient-noeffect-disabled: oklch(from var(--gray-800) calc(l * .85) calc(c * .85) h);
+    --fill-success-strong: var(--green-400);
+    --fill-success-strong-hover: oklch(from var(--green-400) calc(l * .9) c h);
+    --fill-success-strong-disabled: oklch(from var(--green-400) calc(l * 1.1) calc(c * .85) h);
+    --fill-success-weak: oklch(from var(--green-100) calc(l * 1.09) calc(c * .85) h / .2);
+    --fill-success-weak-hover: oklch(from var(--green-100) calc(l * .975) calc(c * .85) h / .2);
+    --fill-success-weak-disabled: oklch(from var(--green-100) calc(l * 1.07) calc(c * .85) h /
+      .2);
+    --fill-success-outlined: transparent;
+    --fill-success-outlined-hover: oklch(from var(--green-300) calc(l * .975) calc(c * .85) h /
+      .2);
+    --fill-success-outlined-disabled: oklch(from var(--green-300) calc(l * 1.07) calc(c * .85) h /
+      .2);
+    --fill-success-text: transparent;
+    --fill-success-text-hover: oklch(from var(--green-300) calc(l * .975) calc(c * .85) h / .1);
+    --fill-success-text-disabled: oklch(from var(--green-300) calc(l * 1.07) calc(c * .85) h /
+      .1);
+    --text-on-success-strong: white;
+    --text-on-success-strong-hover: oklch(90% 5.0664e-8 90);
+    --text-on-success-strong-disabled: oklch(90% 5.0664e-8 90);
+    --text-on-success-weak: var(--green-400);
+    --text-on-success-weak-hover: oklch(from var(--green-400) calc(l * .7) c h);
+    --text-on-success-weak-disabled: oklch(from var(--green-400) calc(l * .7) c h);
+    --text-on-success-outlined: oklch(from var(--green-200) calc(l * .7) c h);
+    --text-on-success-outlined-hover: oklch(from var(--green-200) calc(l * .7) c h);
+    --text-on-success-outlined-disabled: oklch(from var(--green-200) calc(l * .7) c h);
+    --text-success: var(--green-300);
+    --text-success-weak: oklch(from var(--green-300) calc(l * .7) c h);
+    --text-success-hover: oklch(from var(--green-300) calc(l * .7) c h);
+    --text-success-disabled: oklch(from var(--green-300) calc(l * 1.5) calc(c * .5) h);
+    --stroke-success: var(--green-400);
+    --stroke-success-hover: oklch(from var(--green-400) calc(l * 1.1) c h);
+    --stroke-success-disabled: oklch(from var(--green-400) calc(l * .8) calc(c * .8) h);
+    --ring-success: var(--green-400);
+    --gradient-success-start: var(--green-500);
+    --gradient-success-end: var(--green-700);
+    --gradient-success-foreground: white;
+    --gradient-success-disabled: oklch(from var(--green-700) calc(l * .85) calc(c * .85) h);
+    --fill-info-strong: var(--blue-400);
+    --fill-info-strong-hover: oklch(from var(--blue-400) calc(l * .9) c h);
+    --fill-info-strong-disabled: oklch(from var(--blue-400) calc(l * 1.1) calc(c * .85) h);
+    --fill-info-weak: oklch(from var(--blue-400) calc(l * 1.75) calc(c * .9) h / .2);
+    --fill-info-weak-hover: oklch(from var(--blue-400) calc(l * 1.7) calc(c * .9) h / .2);
+    --fill-info-weak-disabled: oklch(from var(--blue-400) calc(l * 1.8) calc(c * .9) h / .2);
+    --fill-info-outlined: transparent;
+    --fill-info-outlined-hover: oklch(from var(--blue-400) calc(l * 1.1) calc(c * .9) h / .2);
+    --fill-info-outlined-disabled: oklch(from var(--blue-400) calc(l * 1.1) calc(c * .9) h / .2);
+    --fill-info-text: transparent;
+    --fill-info-text-hover: oklch(from var(--blue-400) calc(l * 1.1) calc(c * .9) h / .2);
+    --fill-info-text-disabled: oklch(from var(--blue-400) calc(l * 1.1) calc(c * .9) h / .2);
+    --text-on-info-strong: white;
+    --text-on-info-strong-hover: oklch(90% 5.0664e-8 90);
+    --text-on-info-strong-disabled: oklch(90% 5.0664e-8 90);
+    --text-on-info-weak: var(--blue-200);
+    --text-on-info-weak-hover: oklch(from var(--blue-400) calc(l * .7) c h);
+    --text-on-info-weak-disabled: oklch(from var(--blue-400) calc(l * .7) c h);
+    --text-on-info-outlined: var(--blue-200);
+    --text-on-info-outlined-hover: oklch(from var(--blue-400) calc(l * .7) c h);
+    --text-on-info-outlined-disabled: oklch(from var(--blue-400) calc(l * .7) c h);
+    --text-info: var(--blue-200);
+    --text-info-weak: oklch(from var(--blue-200) calc(l * .7) c h);
+    --text-info-hover: oklch(from var(--blue-200) calc(l * .7) c h);
+    --text-info-disabled: oklch(from var(--blue-200) calc(l * 1.5) calc(c * .5) h);
+    --stroke-info: var(--blue-400);
+    --stroke-info-hover: oklch(from var(--blue-400) calc(l * 1.1) c h);
+    --stroke-info-disabled: oklch(from var(--blue-400) calc(l * .8) calc(c * .8) h);
+    --ring-info: var(--blue-400);
+    --gradient-info-start: var(--blue-500);
+    --gradient-info-end: var(--blue-700);
+    --gradient-info-foreground: white;
+    --gradient-info-disabled: oklch(from var(--blue-700) calc(l * .85) calc(c * .85) h);
+    --fill-warning-strong: var(--yellow-300);
+    --fill-warning-strong-hover: oklch(from var(--yellow-300) calc(l * .875) c h);
+    --fill-warning-strong-disabled: oklch(from var(--yellow-300) calc(l * 1.1) calc(c * .85) h);
+    --fill-warning-weak: oklch(from var(--yellow-300) calc(l * 1.5) calc(c * .8) h / .2);
+    --fill-warning-weak-hover: oklch(from var(--yellow-300) calc(l * 1.15) calc(c * .8) h / .2);
+    --fill-warning-weak-disabled: oklch(from var(--yellow-300) calc(l * 1.8) calc(c * .8) h / .2);
+    --fill-warning-outlined: transparent;
+    --fill-warning-outlined-hover: oklch(from var(--yellow-300) calc(l * 1.15) calc(c * .8) h /
+      .1);
+    --fill-warning-outlined-disabled: oklch(from var(--yellow-300) calc(l * 1.8) calc(c * .8) h /
+      .1);
+    --fill-warning-text: transparent;
+    --fill-warning-text-hover: oklch(from var(--yellow-300) calc(l * 1.15) calc(c * .8) h / .1);
+    --fill-warning-text-disabled: oklch(from var(--yellow-300) calc(l * 1.8) calc(c * .8) h / .1);
+    --text-on-warning-strong: black;
+    --text-on-warning-strong-hover: oklch(0% 0 0);
+    --text-on-warning-strong-disabled: oklch(0% 0 0);
+    --text-on-warning-weak: var(--yellow-400);
+    --text-on-warning-weak-hover: oklch(from var(--yellow-400) calc(l * .9) calc(c * .85) h);
+    --text-on-warning-weak-disabled: oklch(from var(--yellow-400) calc(l * .9) calc(c * .85) h);
+    --text-on-warning-outlined: var(--yellow-400);
+    --text-on-warning-outlined-hover: oklch(from var(--yellow-400) calc(l * .9) calc(c * .85) h);
+    --text-on-warning-outlined-disabled: oklch(from var(--yellow-400) calc(l * .9) calc(c * .85) h);
+    --text-warning: var(--yellow-400);
+    --text-warning-weak: oklch(from var(--yellow-300) calc(l * .6) c h);
+    --text-warning-hover: oklch(from var(--yellow-300) calc(l * .6) c h);
+    --text-warning-disabled: oklch(from var(--yellow-700) calc(l * 1.5) calc(c * .5) h);
+    --stroke-warning: var(--yellow-500);
+    --stroke-warning-hover: oklch(from var(--yellow-500) calc(l * 1.1) c h);
+    --stroke-warning-disabled: oklch(from var(--yellow-500) calc(l * .8) calc(c * .8) h);
+    --ring-warning: var(--yellow-300);
+    --gradient-warning-start: var(--yellow-300);
+    --gradient-warning-end: var(--yellow-400);
+    --gradient-warning-foreground: black;
+    --gradient-warning-disabled: oklch(from var(--yellow-400) calc(l * .85) calc(c * .85) h);
+    --fill-danger-strong: var(--red-400);
+    --fill-danger-strong-hover: oklch(from var(--red-400) calc(l * .9) c h);
+    --fill-danger-strong-disabled: oklch(from var(--red-400) calc(l * 1.1) calc(c * .85) h);
+    --fill-danger-weak: oklch(from var(--red-400) calc(l * 1.75) calc(c * .9) h / .2);
+    --fill-danger-weak-hover: oklch(from var(--red-400) calc(l * 1.65) calc(c * .9) h / .2);
+    --fill-danger-weak-disabled: oklch(from var(--red-400) calc(l * 1.65) calc(c * .9) h / .2);
+    --fill-danger-outlined: transparent;
+    --fill-danger-outlined-hover: oklch(from var(--red-300) calc(l * 1.65) c h / .1);
+    --fill-danger-outlined-disabled: oklch(from var(--red-300) calc(l * 1.65) c h / .1);
+    --fill-danger-text: transparent;
+    --fill-danger-text-hover: oklch(from var(--red-300) calc(l * 1.65) c h / .1);
+    --fill-danger-text-disabled: oklch(from var(--red-300) calc(l * 1.65) c h / .1);
+    --text-on-danger-strong: white;
+    --text-on-danger-strong-hover: oklch(90% 5.0664e-8 90);
+    --text-on-danger-strong-disabled: oklch(90% 5.0664e-8 90);
+    --text-on-danger-weak: oklch(from var(--red-100) calc(l * .7) c h);
+    --text-on-danger-weak-hover: oklch(from var(--red-100) calc(l * .7) c h);
+    --text-on-danger-weak-disabled: oklch(from var(--red-100) calc(l * .7) c h);
+    --text-on-danger-outlined: var(--red-400);
+    --text-on-danger-outlined-hover: oklch(from var(--red-400) calc(l * .7) c h);
+    --text-on-danger-outlined-disabled: oklch(from var(--red-400) calc(l * .7) c h);
+    --text-danger: var(--red-400);
+    --text-danger-weak: oklch(from var(--red-400) calc(l * .7) c h);
+    --text-danger-hover: oklch(from var(--red-400) calc(l * .7) c h);
+    --text-danger-disabled: oklch(from var(--red-500) calc(l * 1.5) calc(c * .5) h);
+    --stroke-danger: var(--red-400);
+    --stroke-danger-hover: oklch(from var(--red-400) calc(l * 1.1) c h);
+    --stroke-danger-disabled: oklch(from var(--red-400) calc(l * .8) calc(c * .8) h);
+    --ring-danger: var(--red-400);
+    --gradient-danger-start: var(--red-500);
+    --gradient-danger-end: var(--red-700);
+    --gradient-danger-foreground: white;
+    --gradient-danger-disabled: oklch(from var(--red-700) calc(l * .85) calc(c * .85) h);
+  }
+
+  .not-dark {
+    --primary: var(--primary-500);
+    --secondary: var(--secondary-500);
+    --accent: var(--accent-500);
+    --noeffect: var(--gray-500);
+    --success: var(--green-500);
+    --info: var(--blue-500);
+    --warning: var(--yellow-500);
+    --danger: var(--red-500);
+    --focus-ring: var(--ring-primary);
+    --fill-primary-strong: var(--primary-500);
+    --fill-primary-strong-hover: oklch(from var(--primary-500) calc(l * .9) c h);
+    --fill-primary-strong-disabled: oklch(from var(--primary-500) calc(l * 1.1) calc(c * .85) h);
+    --fill-primary-weak: oklch(from var(--primary-500) calc(l * 2.04) calc(c * .2) h / .7);
+    --fill-primary-weak-hover: oklch(from var(--primary-500) calc(l * 2) calc(c * .2) h / .7);
+    --fill-primary-weak-disabled: oklch(from var(--primary-500) calc(l * 2) calc(c * .2) h / .7);
+    --fill-primary-outlined: transparent;
+    --fill-primary-outlined-hover: oklch(from var(--primary-500) calc(l * 2) calc(c * .2) h / .7);
+    --fill-primary-outlined-disabled: oklch(from var(--primary-500) calc(l * 2) calc(c * .2) h /
+      .7);
+    --fill-primary-text: transparent;
+    --fill-primary-text-hover: oklch(from var(--primary-500) calc(l * 2) calc(c * .2) h / .7);
+    --fill-primary-text-disabled: oklch(from var(--primary-500) calc(l * 2) calc(c * .2) h / .7);
+    --text-on-primary-strong: white;
+    --text-on-primary-strong-hover: var(--primary-600);
+    --text-on-primary-strong-disabled: oklch(90% 5.0664e-8 90);
+    --text-on-primary-weak: oklch(from var(--primary-500) calc(l * .7) c h);
+    --text-on-primary-weak-hover: oklch(from var(--primary-600) calc(l * 1.5) calc(c * .5) h);
+    --text-on-primary-weak-disabled: oklch(from var(--primary-600) calc(l * 1.5) calc(c * .5) h);
+    --text-on-primary-outlined: oklch(from var(--primary-500) calc(l * .7) c h);
+    --text-on-primary-outlined-hover: oklch(from var(--primary-600) calc(l * 1.5) calc(c * .5) h);
+    --text-on-primary-outlined-disabled: oklch(from var(--primary-600) calc(l * 1.5) calc(c * .5) h);
+    --text-primary: var(--primary-500);
+    --text-primary-weak: oklch(from var(--primary-500) calc(l * .7) c h);
+    --text-primary-hover: oklch(from var(--primary-500) calc(l * .7) c h);
+    --text-primary-disabled: oklch(from var(--primary-500) calc(l * 1.5) calc(c * .5) h);
+    --stroke-primary: var(--primary-600);
+    --stroke-primary-hover: oklch(from var(--primary-600) calc(l * .85) c h);
+    --stroke-primary-disabled: oklch(from var(--primary-600) calc(l * 1.5) calc(c * .8) h);
+    --ring-primary: var(--primary-500);
+    --gradient-primary-start: var(--primary-500);
+    --gradient-primary-end: var(--primary-700);
+    --gradient-primary-foreground: white;
+    --gradient-primary-disabled: oklch(from var(--primary-700) calc(l * 1.2) calc(c * .85) h);
+    --fill-secondary-strong: var(--secondary-500);
+    --fill-secondary-strong-hover: oklch(from var(--secondary-500) calc(l * .95) c h);
+    --fill-secondary-strong-disabled: oklch(from var(--secondary-500) calc(l * 1.1) calc(c * .85) h);
+    --fill-secondary-weak: oklch(from var(--secondary-500) calc(l * 1.6) calc(c * .4) h / .5);
+    --fill-secondary-weak-hover: oklch(from var(--secondary-500) calc(l * 2) calc(c * .4) h / .5);
+    --fill-secondary-weak-disabled: oklch(from var(--secondary-500) calc(l * 2) calc(c * .4) c h /
+      .5);
+    --fill-secondary-outlined: transparent;
+    --fill-secondary-outlined-hover: oklch(from var(--secondary-500) calc(l * 2) calc(c * .4) h /
+      .7);
+    --fill-secondary-outlined-disabled: oklch(from var(--secondary-500) calc(l * 2) calc(c * .4) c h /
+      .7);
+    --fill-secondary-text: transparent;
+    --fill-secondary-text-hover: oklch(from var(--secondary-500) calc(l * 2) calc(c * .4) h / .7);
+    --fill-secondary-text-disabled: oklch(from var(--secondary-500) calc(l * 2) calc(c * .4) c h /
+      .7);
+    --text-on-secondary-strong: black;
+    --text-on-secondary-strong-disabled: oklch(0% 0 0);
+    --text-on-secondary-strong-hover: oklch(0% 0 0);
+    --text-on-secondary-weak: oklch(from var(--secondary-500) calc(l * .7) c h);
+    --text-on-secondary-weak-hover: oklch(from var(--secondary-950) calc(l * 1.5) calc(c * .5) h);
+    --text-on-secondary-weak-disabled: oklch(from var(--secondary-950) calc(l * 1.5) calc(c * .5) h);
+    --text-on-secondary-outlined: oklch(from var(--secondary-500) calc(l * .7) c h);
+    --text-on-secondary-outlined-hover: oklch(from var(--secondary-950) calc(l * 1.5) calc(c * .5) h);
+    --text-on-secondary-outlined-disabled: oklch(from var(--secondary-950) calc(l * 1.5) calc(c * .5) h);
+    --text-secondary: var(--secondary-500);
+    --text-secondary-weak: oklch(from var(--secondary-500) calc(l * .7) c h);
+    --text-secondary-hover: oklch(from var(--secondary-500) calc(l * .7) c h);
+    --text-secondary-disabled: oklch(from var(--secondary-500) calc(l * 1.5) calc(c * .5) h);
+    --stroke-secondary: var(--secondary-700);
+    --stroke-secondary-hover: oklch(from var(--secondary-700) calc(l * .85) c h);
+    --stroke-secondary-disabled: oklch(from var(--secondary-700) calc(l * 1.5) calc(c * .8) h);
+    --ring-secondary: var(--secondary-500);
+    --gradient-secondary-start: var(--secondary-500);
+    --gradient-secondary-end: var(--secondary-700);
+    --gradient-secondary-foreground: black;
+    --gradient-secondary-disabled: oklch(from var(--secondary-700) calc(l * 1.2) calc(c * .85) h);
+    --fill-noeffect-strong: var(--gray-100);
+    --fill-noeffect-strong-hover: oklch(from var(--gray-100) calc(l * .95) c h);
+    --fill-noeffect-strong-disabled: oklch(from var(--gray-100) calc(l * 1.1) calc(c * .85) h);
+    --fill-noeffect-weak: oklch(from var(--gray-100) calc(l * 1.07) c h / .7);
+    --fill-noeffect-weak-hover: oklch(from var(--gray-100) calc(l * 1.05) c h / .7);
+    --fill-noeffect-weak-disabled: oklch(from var(--gray-100) calc(l * 1.07) c h / .7);
+    --fill-noeffect-outlined: transparent;
+    --fill-noeffect-outlined-hover: oklch(from var(--gray-100) calc(l * 1.05) c h / .7);
+    --fill-noeffect-outlined-disabled: oklch(from var(--gray-100) calc(l * 1.07) c h / .7);
+    --fill-noeffect-text: transparent;
+    --fill-noeffect-text-hover: oklch(from var(--gray-100) calc(l * 1.05) c h / .5);
+    --fill-noeffect-text-disabled: oklch(from var(--gray-100) calc(l * 1.07) c h / .5);
+    --text-on-noeffect-strong: black;
+    --text-on-noeffect-strong-hover: oklch(0% 0 0);
+    --text-on-noeffect-strong-disabled: oklch(0% 0 0);
+    --text-on-noeffect-weak: oklch(from var(--gray-100) calc(l * .5) c h);
+    --text-on-noeffect-weak-hover: oklch(from var(--gray-800) calc(l * 1.5) calc(c * .5) h);
+    --text-on-noeffect-weak-disabled: oklch(from var(--gray-800) calc(l * 1.5) calc(c * .5) h);
+    --text-on-noeffect-outlined: oklch(from var(--gray-100) calc(l * .5) c h);
+    --text-on-noeffect-outlined-hover: oklch(from var(--gray-800) calc(l * 1.5) calc(c * .5) h);
+    --text-on-noeffect-outlined-disabled: oklch(from var(--gray-800) calc(l * 1.5) calc(c * .5) h);
+    --text-on-noeffect-text: oklch(from var(--gray-100) calc(l * .5) c h);
+    --text-on-noeffect-text-hover: oklch(from var(--gray-800) calc(l * 1.5) calc(c * .5) h);
+    --text-on-noeffect-text-disabled: oklch(from var(--gray-800) calc(l * 1.5) calc(c * .5) h);
+    --text-noeffect: var(--gray-600);
+    --text-noeffect-weak: oklch(from var(--gray-400) calc(l * .7) c h);
+    --text-noeffect-hover: oklch(from var(--gray-400) calc(l * .7) c h);
+    --text-noeffect-disabled: oklch(from var(--gray-600) calc(l * 1.5) calc(c * .5) h);
+    --stroke-noeffect: var(--gray-500);
+    --stroke-noeffect-hover: oklch(from var(--gray-500) calc(l * .75) c h);
+    --stroke-noeffect-disabled: oklch(from var(--gray-500) calc(l * 1.5) calc(c * .8) h);
+    --ring-noeffect: var(--gray-200);
+    --gradient-noeffect-start: var(--gray-100);
+    --gradient-noeffect-end: var(--gray-200);
+    --gradient-noeffect-foreground: black;
+    --gradient-noeffect-hover: var(--gray-400);
+    --gradient-noeffect-disabled: oklch(from var(--gray-200) calc(l * 1.2) calc(c * .85) h);
+    --fill-success-strong: var(--green-400);
+    --fill-success-strong-hover: oklch(from var(--green-400) calc(l * .9) c h);
+    --fill-success-strong-disabled: oklch(from var(--green-400) calc(l * 1.1) calc(c * .85) h);
+    --fill-success-weak: oklch(from var(--green-100) calc(l * 1.09) calc(c * .85) h / .7);
+    --fill-success-weak-hover: oklch(from var(--green-100) calc(l * .975) calc(c * .85) h / .7);
+    --fill-success-weak-disabled: oklch(from var(--green-100) calc(l * 1.07) calc(c * .85) h /
+      .7);
+    --fill-success-outlined: transparent;
+    --fill-success-outlined-hover: oklch(from var(--green-100) calc(l * .975) calc(c * .85) h /
+      .7);
+    --fill-success-outlined-disabled: oklch(from var(--green-100) calc(l * 1.07) calc(c * .85) h /
+      .7);
+    --fill-success-text: transparent;
+    --fill-success-text-hover: oklch(from var(--green-100) calc(l * .975) calc(c * .85) h / .7);
+    --fill-success-text-disabled: oklch(from var(--green-100) calc(l * 1.07) calc(c * .85) h /
+      .7);
+    --text-on-success-strong: white;
+    --text-on-success-strong-hover: oklch(90% 5.0664e-8 90);
+    --text-on-success-strong-disabled: oklch(90% 5.0664e-8 90);
+    --text-on-success-weak: oklch(from var(--green-400) calc(l * .7) c h);
+    --text-on-success-weak-hover: oklch(from var(--green-400) calc(l * .7) c h);
+    --text-on-success-weak-disabled: oklch(from var(--green-400) calc(l * .7) c h);
+    --text-on-success-outlined: oklch(from var(--green-400) calc(l * .7) c h);
+    --text-on-success-outlined-hover: oklch(from var(--green-400) calc(l * .7) c h);
+    --text-on-success-outlined-disabled: oklch(from var(--green-400) calc(l * .7) c h);
+    --text-success: var(--green-600);
+    --text-success-weak: oklch(from var(--green-400) calc(l * .7) c h);
+    --text-success-hover: oklch(from var(--green-400) calc(l * .7) c h);
+    --text-success-disabled: oklch(from var(--green-600) calc(l * 1.5) calc(c * .5) h);
+    --stroke-success: var(--green-600);
+    --stroke-success-hover: oklch(from var(--green-600) calc(l * .85) c h);
+    --stroke-success-disabled: oklch(from var(--green-600) calc(l * 1.5) calc(c * .8) h);
+    --ring-success: var(--green-400);
+    --gradient-success-start: var(--green-500);
+    --gradient-success-end: var(--green-700);
+    --gradient-success-foreground: white;
+    --gradient-success-disabled: oklch(from var(--green-700) calc(l * 1.2) calc(c * .85) h);
+    --fill-info-strong: var(--blue-400);
+    --fill-info-strong-hover: oklch(from var(--blue-400) calc(l * .9) c h);
+    --fill-info-strong-disabled: oklch(from var(--blue-400) calc(l * 1.1) calc(c * .85) h);
+    --fill-info-weak: oklch(from var(--blue-400) calc(l * 1.75) calc(c * .2) h / .7);
+    --fill-info-weak-hover: oklch(from var(--blue-400) calc(l * 1.7) calc(c * .2) h / .7);
+    --fill-info-weak-disabled: oklch(from var(--blue-400) calc(l * 1.8) calc(c * .2) h / .7);
+    --fill-info-outlined: transparent;
+    --fill-info-outlined-hover: oklch(from var(--blue-400) calc(l * 1.7) calc(c * .2) h / .7);
+    --fill-info-outlined-disabled: oklch(from var(--blue-400) calc(l * 1.8) calc(c * .2) h / .7);
+    --fill-info-text: transparent;
+    --fill-info-text-hover: oklch(from var(--blue-400) calc(l * 1.7) calc(c * .2) h / .7);
+    --fill-info-text-disabled: oklch(from var(--blue-400) calc(l * 1.8) calc(c * .2) h / .7);
+    --text-on-info-strong: white;
+    --text-on-info-strong-hover: oklch(90% 5.0664e-8 90);
+    --text-on-info-strong-disabled: oklch(90% 5.0664e-8 90);
+    --text-on-info-weak: oklch(from var(--blue-400) calc(l * .7) c h);
+    --text-on-info-weak-hover: oklch(from var(--blue-400) calc(l * .7) c h);
+    --text-on-info-weak-disabled: oklch(from var(--blue-400) calc(l * .7) c h);
+    --text-on-info-outlined: oklch(from var(--blue-400) calc(l * .7) c h);
+    --text-on-info-outlined-hover: oklch(from var(--blue-400) calc(l * .7) c h);
+    --text-on-info-outlined-disabled: oklch(from var(--blue-400) calc(l * .7) c h);
+    --text-info: var(--blue-300);
+    --text-info-weak: oklch(from var(--blue-400) calc(l * .7) c h);
+    --text-info-hover: oklch(from var(--blue-400) calc(l * .7) c h);
+    --text-info-disabled: oklch(from var(--blue-300) calc(l * 1.5) calc(c * .5) h);
+    --stroke-info: var(--blue-500);
+    --stroke-info-hover: oklch(from var(--blue-500) calc(l * .85) c h);
+    --stroke-info-disabled: oklch(from var(--blue-500) calc(l * 1.5) calc(c * .8) h);
+    --ring-info: var(--blue-400);
+    --gradient-info-start: var(--blue-500);
+    --gradient-info-end: var(--blue-700);
+    --gradient-info-foreground: white;
+    --gradient-info-disabled: oklch(from var(--blue-700) calc(l * 1.2) calc(c * .85) h);
+    --fill-warning-strong: var(--yellow-300);
+    --fill-warning-strong-hover: oklch(from var(--yellow-300) calc(l * .95) c h);
+    --fill-warning-strong-disabled: oklch(from var(--yellow-300) calc(l * 1.1) calc(c * .85) h);
+    --fill-warning-weak: oklch(from var(--yellow-300) calc(l * 1.5) calc(c * .5) h / .7);
+    --fill-warning-weak-hover: oklch(from var(--yellow-300) calc(l * 1.15) calc(c * .5) h / .7);
+    --fill-warning-weak-disabled: oklch(from var(--yellow-300) calc(l * 1.8) calc(c * .5) h / .7);
+    --fill-warning-outlined: transparent;
+    --fill-warning-outlined-hover: oklch(from var(--yellow-300) calc(l * 1.15) calc(c * .5) h /
+      .7);
+    --fill-warning-outlined-disabled: oklch(from var(--yellow-300) calc(l * 1.8) calc(c * .5) h /
+      .7);
+    --fill-warning-text: transparent;
+    --fill-warning-text-hover: oklch(from var(--yellow-300) calc(l * 1.15) calc(c * .5) h / .7);
+    --fill-warning-text-disabled: oklch(from var(--yellow-300) calc(l * 1.8) calc(c * .5) h / .7);
+    --text-on-warning-strong: black;
+    --text-on-warning-strong-hover: oklch(0% 0 0);
+    --text-on-warning-strong-disabled: oklch(0% 0 0);
+    --text-on-warning-weak: var(--yellow-700);
+    --text-on-warning-weak-hover: oklch(from var(--yellow-700) calc(l * .9) calc(c * .85) h);
+    --text-on-warning-weak-disabled: oklch(from var(--yellow-700) calc(l * .9) calc(c * .85) h);
+    --text-on-warning-outlined: var(--yellow-800);
+    --text-on-warning-outlined-hover: oklch(from var(--yellow-800) calc(l * .9) calc(c * .85) h);
+    --text-on-warning-outlined-disabled: oklch(from var(--yellow-800) calc(l * .9) calc(c * .85) h);
+    --text-warning: var(--yellow-700);
+    --text-warning-weak: oklch(from var(--yellow-300) calc(l * .6) c h);
+    --text-warning-hover: oklch(from var(--yellow-300) calc(l * .6) c h);
+    --text-warning-disabled: oklch(from var(--yellow-700) calc(l * 1.5) calc(c * .5) h);
+    --stroke-warning: var(--yellow-500);
+    --stroke-warning-hover: oklch(from var(--yellow-500) calc(l * .85) c h);
+    --stroke-warning-disabled: oklch(from var(--yellow-500) calc(l * 1.5) calc(c * .8) h);
+    --ring-warning: var(--yellow-300);
+    --gradient-warning-start: var(--yellow-300);
+    --gradient-warning-end: var(--yellow-400);
+    --gradient-warning-foreground: black;
+    --gradient-warning-disabled: oklch(from var(--yellow-400) calc(l * 1.2) calc(c * .85) h);
+    --fill-danger-strong: var(--red-400);
+    --fill-danger-strong-hover: oklch(from var(--red-400) calc(l * .9) c h);
+    --fill-danger-strong-disabled: oklch(from var(--red-400) calc(l * 1.1) calc(c * .85) h);
+    --fill-danger-weak: oklch(from var(--red-300) calc(l * 1.75) calc(c * .5) h / .7);
+    --fill-danger-weak-hover: oklch(from var(--red-300) calc(l * 1.65) calc(c * .5) h / .7);
+    --fill-danger-weak-disabled: oklch(from var(--red-300) calc(l * 1.65) calc(c * .5) h / .7);
+    --fill-danger-outlined: transparent;
+    --fill-danger-outlined-hover: oklch(from var(--red-300) calc(l * 1.65) calc(c * .5) h / .7);
+    --fill-danger-outlined-disabled: oklch(from var(--red-300) calc(l * 1.65) calc(c * .5) h /
+      .7);
+    --fill-danger-text: transparent;
+    --fill-danger-text-hover: oklch(from var(--red-300) calc(l * 1.65) calc(c * .5) h / .7);
+    --fill-danger-text-disabled: oklch(from var(--red-300) calc(l * 1.65) calc(c * .5) h / .7);
+    --text-on-danger-strong: white;
+    --text-on-danger-strong-hover: oklch(90% 5.0664e-8 90);
+    --text-on-danger-strong-disabled: oklch(90% 5.0664e-8 90);
+    --text-on-danger-weak: oklch(from var(--red-400) calc(l * .7) c h);
+    --text-on-danger-weak-hover: oklch(from var(--red-400) calc(l * .7) c h);
+    --text-on-danger-weak-disabled: oklch(from var(--red-400) calc(l * .7) c h);
+    --text-on-danger-outlined: oklch(from var(--red-400) calc(l * .7) c h);
+    --text-on-danger-outlined-hover: oklch(from var(--red-400) calc(l * .7) c h);
+    --text-on-danger-outlined-disabled: oklch(from var(--red-400) calc(l * .7) c h);
+    --text-danger: var(--red-500);
+    --text-danger-weak: oklch(from var(--red-400) calc(l * .7) c h);
+    --text-danger-hover: oklch(from var(--red-400) calc(l * .7) c h);
+    --text-danger-disabled: oklch(from var(--red-500) calc(l * 1.5) calc(c * .5) h);
+    --stroke-danger: var(--red-500);
+    --stroke-danger-hover: oklch(from var(--red-500) calc(l * .85) c h);
+    --stroke-danger-disabled: oklch(from var(--red-500) calc(l * 1.5) calc(c * .8) h);
+    --ring-danger: var(--red-400);
+    --gradient-danger-start: var(--red-500);
+    --gradient-danger-end: var(--red-700);
+    --gradient-danger-foreground: white;
+    --gradient-danger-disabled: oklch(from var(--red-700) calc(l * 1.2) calc(c * .85) h);
+  }
+
+  :root {
+    --background: var(--canvas-25);
+    --foreground: var(--gray-900);
+    --shadow: var(--shadow-md);
+    --loader-color: currentColor;
+    --surface-panel: var(--canvas-25);
+    --surface-panel-elevated: white;
+    --surface-panel-border: var(--border-color);
+    --surface-item: transparent;
+    --surface-item-hover: var(--canvas-50);
+    --surface-item-active: var(--canvas-100);
+    --surface-item-text: var(--text);
+    --surface-item-text-hover: var(--text);
+    --surface-item-text-active: var(--text);
+    --surface-item-text-disabled: var(--gray-400);
+    --surface-subtle: var(--canvas-50);
+    --surface-subtle-hover: var(--canvas-100);
+    --surface-subtle-active: var(--canvas-200);
+    --surface-panel-scrollbar: var(--gray-50);
+    --surface-panel-scrollbar-thumb: var(--primary-100);
+  }
+
+  .dark, [data-theme="dark"], [data-theme="dark"]::backdrop {
+    --background: var(--canvas-900);
+    --foreground: var(--gray-50);
+    --shadow: var(--shadow-lg);
+    --loader-color: currentColor;
+    --surface-panel: var(--canvas-800);
+    --surface-panel-elevated: var(--canvas-800);
+    --surface-panel-border: var(--border-color);
+    --surface-item: transparent;
+    --surface-item-hover: var(--canvas-700);
+    --surface-item-active: var(--canvas-600);
+    --surface-item-text: var(--text);
+    --surface-item-text-hover: var(--text);
+    --surface-item-text-active: var(--text);
+    --surface-item-text-disabled: var(--gray-500);
+    --surface-subtle: var(--canvas-800);
+    --surface-subtle-hover: var(--canvas-700);
+    --surface-subtle-active: var(--canvas-600);
+    --surface-panel-scrollbar: var(--canvas-700);
+    --surface-panel-scrollbar-thumb: var(--primary-400);
+  }
+
+  .not-dark {
+    --background: var(--canvas-25);
+    --foreground: var(--gray-900);
+    --shadow: var(--shadow-md);
+    --loader-color: currentColor;
+    --surface-panel: var(--canvas-25);
+    --surface-panel-elevated: white;
+    --surface-panel-border: var(--border-color);
+    --surface-item: transparent;
+    --surface-item-hover: var(--canvas-50);
+    --surface-item-active: var(--canvas-100);
+    --surface-item-text: var(--text);
+    --surface-item-text-hover: var(--text);
+    --surface-item-text-active: var(--text);
+    --surface-item-text-disabled: var(--gray-400);
+    --surface-subtle: var(--canvas-50);
+    --surface-subtle-hover: var(--canvas-100);
+    --surface-subtle-active: var(--canvas-200);
+    --surface-panel-scrollbar: var(--gray-50);
+    --surface-panel-scrollbar-thumb: var(--primary-100);
+  }
+
+  :root {
+    --text: var(--gray-900);
+    --headings: var(--primary-700);
+    --muted: oklch(from var(--foreground) calc(l * 2) c h);
+    --text-subtle: var(--muted);
+    --text-placeholder: var(--muted);
+  }
+
+  .dark, [data-theme="dark"], [data-theme="dark"]::backdrop {
+    --text: var(--gray-50);
+    --headings: var(--gray-50);
+    --muted: oklch(from var(--foreground) calc(l * .75) c h);
+    --text-subtle: var(--muted);
+    --text-placeholder: var(--muted);
+  }
+
+  .not-dark {
+    --text: var(--gray-900);
+    --headings: var(--primary-800);
+    --muted: oklch(from var(--foreground) calc(l * 2) c h);
+    --text-subtle: var(--muted);
+    --text-placeholder: var(--muted);
+  }
+
+  :root {
+    --border-color: var(--gray-100);
+    --field-border: var(--border-color);
+    --field-border-hover: var(--stroke-noeffect-hover);
+    --field-border-invalid: var(--stroke-danger);
+    --field-ring: var(--ring-primary);
+    --field-ring-invalid: var(--ring-danger);
+  }
+
+  .dark, [data-theme="dark"] {
+    --border-color: var(--canvas-600);
+    --field-border: var(--border-color);
+    --field-border-hover: var(--stroke-noeffect-hover);
+    --field-border-invalid: var(--stroke-danger);
+    --field-ring: var(--ring-primary);
+    --field-ring-invalid: var(--ring-danger);
+  }
+
+  .not-dark {
+    --border-color: var(--gray-100);
+    --field-border: var(--border-color);
+    --field-border-hover: var(--stroke-noeffect-hover);
+    --field-border-invalid: var(--stroke-danger);
+    --field-ring: var(--ring-primary);
+    --field-ring-invalid: var(--ring-danger);
+  }
+
+  :root {
+    --grid-columns-2: 2;
+    --grid-columns-3: 3;
+    --grid-columns-4: 4;
+    --grid-columns-5: 5;
+    --grid-columns-6: 6;
+    --grid-columns-7: 7;
+    --grid-columns-8: 8;
+    --grid-columns-9: 9;
+    --grid-columns-10: 10;
+    --grid-columns-11: 11;
+    --grid-columns-12: 12;
+    --grid-gap-sm: 8px;
+    --grid-gap-md: 16px;
+    --grid-gap-lg: 24px;
+    --grid-column-size-xs: 240px;
+    --grid-column-size-sm: 260px;
+    --grid-column-size-md: 320px;
+    --grid-column-size-lg: 480px;
+    --gap-0: var(--spacing-0);
+    --gap-1: var(--spacing-4);
+    --gap-2: var(--spacing-8);
+    --gap-3: var(--spacing-12);
+    --gap-4: var(--spacing-16);
+    --gap-5: var(--spacing-20);
+    --gap-6: var(--spacing-6);
+    --gap-8: var(--spacing-8);
+    --gap-10: var(--spacing-40);
+    --gap-12: var(--spacing-48);
+    --gap-16: var(--spacing-64);
+    --gap-20: var(--spacing-80);
+    --gap-24: var(--spacing-96);
+    --gap-32: var(--spacing-128);
+    --flex-row: row;
+    --flex-column: column;
+    --flex-wrap: wrap;
+    --flex-nowrap: nowrap;
+    --flex-center: center;
+    --shadcn-background: var(--background);
+    --shadcn-foreground: var(--foreground);
+    --shadcn-card: var(--surface-panel);
+    --shadcn-card-foreground: var(--text);
+    --shadcn-popover: var(--surface-panel-elevated);
+    --shadcn-popover-foreground: var(--text);
+    --shadcn-primary: var(--fill-primary-strong);
+    --shadcn-primary-foreground: var(--text-on-primary-strong);
+    --shadcn-secondary: var(--fill-secondary-strong);
+    --shadcn-secondary-foreground: var(--text-on-secondary-strong);
+    --shadcn-muted: var(--surface-subtle-hover);
+    --shadcn-muted-foreground: var(--text-subtle);
+    --shadcn-accent: var(--surface-subtle-hover);
+    --shadcn-accent-foreground: var(--text);
+    --shadcn-destructive: var(--fill-danger-strong);
+    --shadcn-destructive-foreground: var(--text-on-danger-strong);
+    --shadcn-border: var(--border-color);
+    --shadcn-input: var(--field-border);
+    --shadcn-ring: var(--focus-ring);
+    --shadcn-radius-sm: var(--border-radius-sm);
+    --shadcn-radius-md: var(--border-radius-md);
+    --shadcn-radius-lg: var(--border-radius-lg);
+    --shadcn-radius-xl: var(--border-radius-xl);
+    --shadcn-radius: var(--shadcn-radius-md);
+    --shadcn-chart-1: var(--primary);
+    --shadcn-chart-2: var(--secondary);
+    --shadcn-chart-3: var(--info);
+    --shadcn-chart-4: var(--warning);
+    --shadcn-chart-5: var(--success);
+    --shadcn-sidebar: var(--surface-panel);
+    --shadcn-sidebar-foreground: var(--text);
+    --shadcn-sidebar-primary: var(--fill-primary-strong);
+    --shadcn-sidebar-primary-foreground: var(--text-on-primary-strong);
+    --shadcn-sidebar-accent: var(--surface-subtle-hover);
+    --shadcn-sidebar-accent-foreground: var(--text);
+    --shadcn-sidebar-border: var(--border-color);
+    --shadcn-sidebar-ring: var(--focus-ring);
+  }
+}
+
+@layer byline-utilities {
+  .sr-only {
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    position: absolute;
+    overflow: hidden;
+  }
+
+  .background {
+    background-color: var(--background);
+  }
+
+  .foreground {
+    color: var(--foreground);
+  }
+
+  .text {
+    color: var(--text);
+  }
+
+  .headings {
+    color: var(--headings);
+  }
+
+  .muted {
+    color: var(--muted);
+    font-size: .925rem;
+  }
+
+  .external-link:after {
+    content: "";
+    background-image: url("/external-link-light.svg");
+    background-position: 20%;
+    background-repeat: no-repeat;
+    background-size: 65%;
+    width: 1.1rem;
+    height: 1.1rem;
+    margin-right: -5px;
+    display: inline-block;
+  }
+
+  .dark .external-link:after, [data-theme="dark"] .external-link:after {
+    background-image: url("/external-link-dark.svg");
+  }
+
+  .primary-strong {
+    background-color: var(--fill-primary-strong);
+    color: var(--text-on-primary-strong);
+  }
+
+  .primary-weak {
+    background-color: var(--fill-primary-weak);
+    color: var(--text-on-primary-weak);
+  }
+
+  .secondary-strong {
+    background-color: var(--fill-secondary-strong);
+    color: var(--text-on-secondary-strong);
+  }
+
+  .secondary-weak {
+    background-color: var(--fill-secondary-weak);
+    color: var(--text-on-secondary-weak);
+  }
+
+  .info-strong {
+    background-color: var(--fill-info-strong);
+    color: var(--text-on-info-strong);
+  }
+
+  .info-weak {
+    background-color: var(--fill-info-weak);
+    color: var(--text-on-info-weak);
+  }
+
+  .success-strong {
+    background-color: var(--fill-success-strong);
+    color: var(--text-on-success-strong);
+  }
+
+  .success-weak {
+    background-color: var(--fill-success-weak);
+    color: var(--text-on-success-weak);
+  }
+
+  .warning-strong {
+    background-color: var(--fill-warning-strong);
+    color: var(--text-on-warning-strong);
+  }
+
+  .warning-weak {
+    background-color: var(--fill-warning-weak);
+    color: var(--text-on-warning-weak);
+  }
+
+  .danger-strong {
+    background-color: var(--fill-danger-strong);
+    color: var(--text-on-danger-strong);
+  }
+
+  .danger-weak {
+    background-color: var(--fill-danger-weak);
+    color: var(--text-on-danger-weak);
+  }
+
+  .text-xs {
+    font-size: var(--font-size-xs);
+  }
+
+  .text-sm {
+    font-size: var(--font-size-sm);
+  }
+
+  .text-base {
+    font-size: var(--font-size-base);
+  }
+
+  .text-lg {
+    font-size: var(--font-size-lg);
+  }
+
+  .text-xl {
+    font-size: var(--font-size-xl);
+  }
+
+  .text-2xl {
+    font-size: var(--font-size-2xl);
+  }
+
+  .text-3xl {
+    font-size: var(--font-size-3xl);
+  }
+
+  .text-4xl {
+    font-size: var(--font-size-4xl);
+  }
+
+  .text-5xl {
+    font-size: var(--font-size-5xl);
+  }
+
+  .text-6xl {
+    font-size: var(--font-size-6xl);
+  }
+
+  .text-7xl {
+    font-size: var(--font-size-7xl);
+  }
+
+  .text-8xl {
+    font-size: var(--font-size-8xl);
+  }
+
+  .font-light {
+    font-weight: var(--font-weight-light);
+  }
+
+  .font-normal {
+    font-weight: var(--font-weight-normal);
+  }
+
+  .font-medium {
+    font-weight: var(--font-weight-medium);
+  }
+
+  .font-semibold {
+    font-weight: var(--font-weight-semibold);
+  }
+
+  .font-bold {
+    font-weight: var(--font-weight-bold);
+  }
+
+  .font-extrabold {
+    font-weight: var(--font-weight-extrabold);
+  }
+
+  .font-ultrabold {
+    font-weight: var(--font-weight-ultrabold);
+  }
+
+  .leading-tight {
+    line-height: var(--line-height-tight);
+  }
+
+  .leading-snug {
+    line-height: var(--line-height-snug);
+  }
+
+  .leading-normal {
+    line-height: var(--line-height-normal);
+  }
+
+  .leading-relaxed {
+    line-height: var(--line-height-relaxed);
+  }
+
+  .leading-loose {
+    line-height: var(--line-height-loose);
+  }
+
+  .tracking-tight {
+    letter-spacing: var(--letter-spacing-tight);
+  }
+
+  .tracking-normal {
+    letter-spacing: var(--letter-spacing-normal);
+  }
+
+  .tracking-wide {
+    letter-spacing: var(--letter-spacing-wide);
+  }
+
+  @media (width >= 40rem) {
+    .sm\:text-xs {
+      font-size: var(--font-size-xs);
+    }
+
+    .sm\:text-sm {
+      font-size: var(--font-size-sm);
+    }
+
+    .sm\:text-base {
+      font-size: var(--font-size-base);
+    }
+
+    .sm\:text-lg {
+      font-size: var(--font-size-lg);
+    }
+
+    .sm\:text-xl {
+      font-size: var(--font-size-xl);
+    }
+
+    .sm\:text-2xl {
+      font-size: var(--font-size-2xl);
+    }
+
+    .sm\:text-3xl {
+      font-size: var(--font-size-3xl);
+    }
+
+    .sm\:text-4xl {
+      font-size: var(--font-size-4xl);
+    }
+
+    .sm\:text-5xl {
+      font-size: var(--font-size-5xl);
+    }
+
+    .sm\:text-6xl {
+      font-size: var(--font-size-6xl);
+    }
+
+    .sm\:text-7xl {
+      font-size: var(--font-size-7xl);
+    }
+
+    .sm\:text-8xl {
+      font-size: var(--font-size-8xl);
+    }
+
+    .sm\:font-light {
+      font-weight: var(--font-weight-light);
+    }
+
+    .sm\:font-normal {
+      font-weight: var(--font-weight-normal);
+    }
+
+    .sm\:font-medium {
+      font-weight: var(--font-weight-medium);
+    }
+
+    .sm\:font-semibold {
+      font-weight: var(--font-weight-semibold);
+    }
+
+    .sm\:font-bold {
+      font-weight: var(--font-weight-bold);
+    }
+
+    .sm\:font-extrabold {
+      font-weight: var(--font-weight-extrabold);
+    }
+
+    .sm\:font-ultrabold {
+      font-weight: var(--font-weight-ultrabold);
+    }
+
+    .sm\:leading-tight {
+      line-height: var(--line-height-tight);
+    }
+
+    .sm\:leading-snug {
+      line-height: var(--line-height-snug);
+    }
+
+    .sm\:leading-normal {
+      line-height: var(--line-height-normal);
+    }
+
+    .sm\:leading-relaxed {
+      line-height: var(--line-height-relaxed);
+    }
+
+    .sm\:leading-loose {
+      line-height: var(--line-height-loose);
+    }
+
+    .sm\:tracking-tight {
+      letter-spacing: var(--letter-spacing-tight);
+    }
+
+    .sm\:tracking-normal {
+      letter-spacing: var(--letter-spacing-normal);
+    }
+
+    .sm\:tracking-wide {
+      letter-spacing: var(--letter-spacing-wide);
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:text-xs {
+      font-size: var(--font-size-xs);
+    }
+
+    .md\:text-sm {
+      font-size: var(--font-size-sm);
+    }
+
+    .md\:text-base {
+      font-size: var(--font-size-base);
+    }
+
+    .md\:text-lg {
+      font-size: var(--font-size-lg);
+    }
+
+    .md\:text-xl {
+      font-size: var(--font-size-xl);
+    }
+
+    .md\:text-2xl {
+      font-size: var(--font-size-2xl);
+    }
+
+    .md\:text-3xl {
+      font-size: var(--font-size-3xl);
+    }
+
+    .md\:text-4xl {
+      font-size: var(--font-size-4xl);
+    }
+
+    .md\:text-5xl {
+      font-size: var(--font-size-5xl);
+    }
+
+    .md\:text-6xl {
+      font-size: var(--font-size-6xl);
+    }
+
+    .md\:text-7xl {
+      font-size: var(--font-size-7xl);
+    }
+
+    .md\:text-8xl {
+      font-size: var(--font-size-8xl);
+    }
+
+    .md\:font-light {
+      font-weight: var(--font-weight-light);
+    }
+
+    .md\:font-normal {
+      font-weight: var(--font-weight-normal);
+    }
+
+    .md\:font-medium {
+      font-weight: var(--font-weight-medium);
+    }
+
+    .md\:font-semibold {
+      font-weight: var(--font-weight-semibold);
+    }
+
+    .md\:font-bold {
+      font-weight: var(--font-weight-bold);
+    }
+
+    .md\:font-extrabold {
+      font-weight: var(--font-weight-extrabold);
+    }
+
+    .md\:font-ultrabold {
+      font-weight: var(--font-weight-ultrabold);
+    }
+
+    .md\:leading-tight {
+      line-height: var(--line-height-tight);
+    }
+
+    .md\:leading-snug {
+      line-height: var(--line-height-snug);
+    }
+
+    .md\:leading-normal {
+      line-height: var(--line-height-normal);
+    }
+
+    .md\:leading-relaxed {
+      line-height: var(--line-height-relaxed);
+    }
+
+    .md\:leading-loose {
+      line-height: var(--line-height-loose);
+    }
+
+    .md\:tracking-tight {
+      letter-spacing: var(--letter-spacing-tight);
+    }
+
+    .md\:tracking-normal {
+      letter-spacing: var(--letter-spacing-normal);
+    }
+
+    .md\:tracking-wide {
+      letter-spacing: var(--letter-spacing-wide);
+    }
+  }
+
+  .m-0 {
+    margin: var(--spacing-0);
+  }
+
+  .m-1 {
+    margin: var(--spacing-4);
+  }
+
+  .m-2 {
+    margin: var(--spacing-8);
+  }
+
+  .m-3 {
+    margin: var(--spacing-12);
+  }
+
+  .m-4 {
+    margin: var(--spacing-16);
+  }
+
+  .m-5 {
+    margin: var(--spacing-20);
+  }
+
+  .m-6 {
+    margin: var(--spacing-6);
+  }
+
+  .m-8 {
+    margin: var(--spacing-8);
+  }
+
+  .m-10 {
+    margin: var(--spacing-40);
+  }
+
+  .m-12 {
+    margin: var(--spacing-48);
+  }
+
+  .m-16 {
+    margin: var(--spacing-64);
+  }
+
+  .p-0 {
+    padding: var(--spacing-0);
+  }
+
+  .p-1 {
+    padding: var(--spacing-4);
+  }
+
+  .p-2 {
+    padding: var(--spacing-8);
+  }
+
+  .p-3 {
+    padding: var(--spacing-12);
+  }
+
+  .p-4 {
+    padding: var(--spacing-16);
+  }
+
+  .p-5 {
+    padding: var(--spacing-20);
+  }
+
+  .p-6 {
+    padding: var(--spacing-6);
+  }
+
+  .p-8 {
+    padding: var(--spacing-8);
+  }
+
+  .p-10 {
+    padding: var(--spacing-40);
+  }
+
+  .p-12 {
+    padding: var(--spacing-48);
+  }
+
+  .p-16 {
+    padding: var(--spacing-64);
+  }
+
+  .p-20 {
+    padding: var(--spacing-80);
+  }
+
+  .p-24 {
+    padding: var(--spacing-96);
+  }
+
+  .p-32 {
+    padding: var(--spacing-128);
+  }
+
+  @media (width >= 40rem) {
+    .sm\:m-0 {
+      margin: var(--spacing-0);
+    }
+
+    .sm\:m-1 {
+      margin: var(--spacing-4);
+    }
+
+    .sm\:m-2 {
+      margin: var(--spacing-8);
+    }
+
+    .sm\:m-3 {
+      margin: var(--spacing-12);
+    }
+
+    .sm\:m-4 {
+      margin: var(--spacing-16);
+    }
+
+    .sm\:m-5 {
+      margin: var(--spacing-20);
+    }
+
+    .sm\:m-6 {
+      margin: var(--spacing-6);
+    }
+
+    .sm\:m-8 {
+      margin: var(--spacing-8);
+    }
+
+    .sm\:m-10 {
+      margin: var(--spacing-40);
+    }
+
+    .sm\:m-12 {
+      margin: var(--spacing-48);
+    }
+
+    .sm\:m-16 {
+      margin: var(--spacing-64);
+    }
+
+    .sm\:p-0 {
+      padding: var(--spacing-0);
+    }
+
+    .sm\:p-1 {
+      padding: var(--spacing-4);
+    }
+
+    .sm\:p-2 {
+      padding: var(--spacing-8);
+    }
+
+    .sm\:p-3 {
+      padding: var(--spacing-12);
+    }
+
+    .sm\:p-4 {
+      padding: var(--spacing-16);
+    }
+
+    .sm\:p-5 {
+      padding: var(--spacing-20);
+    }
+
+    .sm\:p-6 {
+      padding: var(--spacing-6);
+    }
+
+    .sm\:p-8 {
+      padding: var(--spacing-8);
+    }
+
+    .sm\:p-10 {
+      padding: var(--spacing-40);
+    }
+
+    .sm\:p-12 {
+      padding: var(--spacing-48);
+    }
+
+    .sm\:p-16 {
+      padding: var(--spacing-64);
+    }
+
+    .sm\:p-20 {
+      padding: var(--spacing-80);
+    }
+
+    .sm\:p-24 {
+      padding: var(--spacing-96);
+    }
+
+    .sm\:p-32 {
+      padding: var(--spacing-128);
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:m-0 {
+      margin: var(--spacing-0);
+    }
+
+    .md\:m-1 {
+      margin: var(--spacing-4);
+    }
+
+    .md\:m-2 {
+      margin: var(--spacing-8);
+    }
+
+    .md\:m-3 {
+      margin: var(--spacing-12);
+    }
+
+    .md\:m-4 {
+      margin: var(--spacing-16);
+    }
+
+    .md\:m-5 {
+      margin: var(--spacing-20);
+    }
+
+    .md\:m-6 {
+      margin: var(--spacing-6);
+    }
+
+    .md\:m-8 {
+      margin: var(--spacing-8);
+    }
+
+    .md\:m-10 {
+      margin: var(--spacing-40);
+    }
+
+    .md\:m-12 {
+      margin: var(--spacing-48);
+    }
+
+    .md\:m-16 {
+      margin: var(--spacing-64);
+    }
+
+    .md\:p-0 {
+      padding: var(--spacing-0);
+    }
+
+    .md\:p-1 {
+      padding: var(--spacing-4);
+    }
+
+    .md\:p-2 {
+      padding: var(--spacing-8);
+    }
+
+    .md\:p-3 {
+      padding: var(--spacing-12);
+    }
+
+    .md\:p-4 {
+      padding: var(--spacing-16);
+    }
+
+    .md\:p-5 {
+      padding: var(--spacing-20);
+    }
+
+    .md\:p-6 {
+      padding: var(--spacing-6);
+    }
+
+    .md\:p-8 {
+      padding: var(--spacing-8);
+    }
+
+    .md\:p-10 {
+      padding: var(--spacing-40);
+    }
+
+    .md\:p-12 {
+      padding: var(--spacing-48);
+    }
+
+    .md\:p-16 {
+      padding: var(--spacing-64);
+    }
+
+    .md\:p-20 {
+      padding: var(--spacing-80);
+    }
+
+    .md\:p-24 {
+      padding: var(--spacing-96);
+    }
+
+    .md\:p-32 {
+      padding: var(--spacing-128);
+    }
+  }
+
+  .flex {
+    display: flex;
+  }
+
+  .flex-row {
+    flex-direction: var(--flex-row);
+  }
+
+  .flex-column {
+    flex-direction: var(--flex-column);
+  }
+
+  .flex-wrap {
+    flex-wrap: var(--flex-wrap);
+  }
+
+  .flex-nowrap {
+    flex-wrap: var(--flex-nowrap);
+  }
+
+  .items-center {
+    align-items: var(--flex-center);
+  }
+
+  .justify-center {
+    justify-content: var(--flex-center);
+  }
+
+  @media (width >= 40rem) {
+    .sm\:flex {
+      display: flex;
+    }
+
+    .sm\:flex-row {
+      flex-direction: var(--flex-row);
+    }
+
+    .sm\:flex-column {
+      flex-direction: var(--flex-column);
+    }
+
+    .sm\:flex-wrap {
+      flex-wrap: var(--flex-wrap);
+    }
+
+    .sm\:flex-nowrap {
+      flex-wrap: var(--flex-nowrap);
+    }
+
+    .sm\:items-center {
+      align-items: var(--flex-center);
+    }
+
+    .sm\:justify-center {
+      justify-content: var(--flex-center);
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:flex {
+      display: flex;
+    }
+
+    .md\:flex-row {
+      flex-direction: var(--flex-row);
+    }
+
+    .md\:flex-column {
+      flex-direction: var(--flex-column);
+    }
+
+    .md\:flex-wrap {
+      flex-wrap: var(--flex-wrap);
+    }
+
+    .md\:flex-nowrap {
+      flex-wrap: var(--flex-nowrap);
+    }
+
+    .md\:items-center {
+      align-items: var(--flex-center);
+    }
+
+    .md\:justify-center {
+      justify-content: var(--flex-center);
+    }
+  }
+
+  .grid {
+    display: grid;
+  }
+
+  .grid-cols-2 {
+    grid-template-columns: repeat(var(--grid-columns-2), minmax(0, 1fr));
+  }
+
+  .grid-cols-3 {
+    grid-template-columns: repeat(var(--grid-columns-3), minmax(0, 1fr));
+  }
+
+  .grid-cols-4 {
+    grid-template-columns: repeat(var(--grid-columns-4), minmax(0, 1fr));
+  }
+
+  .grid-cols-5 {
+    grid-template-columns: repeat(var(--grid-columns-5), minmax(0, 1fr));
+  }
+
+  .grid-cols-6 {
+    grid-template-columns: repeat(var(--grid-columns-6), minmax(0, 1fr));
+  }
+
+  .grid-cols-7 {
+    grid-template-columns: repeat(var(--grid-columns-7), minmax(0, 1fr));
+  }
+
+  .grid-cols-8 {
+    grid-template-columns: repeat(var(--grid-columns-8), minmax(0, 1fr));
+  }
+
+  .grid-cols-9 {
+    grid-template-columns: repeat(var(--grid-columns-9), minmax(0, 1fr));
+  }
+
+  .grid-cols-10 {
+    grid-template-columns: repeat(var(--grid-columns-10), minmax(0, 1fr));
+  }
+
+  .grid-cols-11 {
+    grid-template-columns: repeat(var(--grid-columns-11), minmax(0, 1fr));
+  }
+
+  .grid-cols-12 {
+    grid-template-columns: repeat(var(--grid-columns-12), minmax(0, 1fr));
+  }
+
+  .gap-0 {
+    gap: var(--gap-0);
+  }
+
+  .gap-1 {
+    gap: var(--gap-1);
+  }
+
+  .gap-2 {
+    gap: var(--gap-2);
+  }
+
+  .gap-3 {
+    gap: var(--gap-3);
+  }
+
+  .gap-4 {
+    gap: var(--gap-4);
+  }
+
+  .gap-5 {
+    gap: var(--gap-5);
+  }
+
+  .gap-6 {
+    gap: var(--gap-6);
+  }
+
+  .gap-8 {
+    gap: var(--gap-8);
+  }
+
+  .gap-10 {
+    gap: var(--gap-10);
+  }
+
+  .gap-12 {
+    gap: var(--gap-12);
+  }
+
+  .gap-16 {
+    gap: var(--gap-16);
+  }
+
+  .gap-20 {
+    gap: var(--gap-20);
+  }
+
+  .gap-24 {
+    gap: var(--gap-24);
+  }
+
+  .gap-32 {
+    gap: var(--gap-32);
+  }
+
+  @media (width >= 40rem) {
+    .sm\:grid {
+      display: grid;
+    }
+
+    .sm\:grid-cols-12 {
+      grid-template-columns: repeat(var(--grid-columns), 1fr);
+    }
+
+    .sm\:gap-0 {
+      gap: .5rem;
+      gap: var(--gap-0);
+    }
+
+    .sm\:gap-1 {
+      gap: var(--gap-1);
+    }
+
+    .sm\:gap-2 {
+      gap: var(--gap-2);
+    }
+
+    .sm\:gap-3 {
+      gap: var(--gap-3);
+    }
+
+    .sm\:gap-4 {
+      gap: var(--gap-4);
+    }
+
+    .sm\:gap-5 {
+      gap: var(--gap-5);
+    }
+
+    .sm\:gap-6 {
+      gap: var(--gap-6);
+    }
+
+    .sm\:gap-8 {
+      gap: var(--gap-8);
+    }
+
+    .sm\:gap-10 {
+      gap: var(--gap-10);
+    }
+
+    .sm\:gap-12 {
+      gap: var(--gap-12);
+    }
+
+    .sm\:gap-16 {
+      gap: var(--gap-16);
+    }
+
+    .sm\:gap-20 {
+      gap: var(--gap-20);
+    }
+
+    .sm\:gap-24 {
+      gap: var(--gap-24);
+    }
+
+    .sm\:gap-32 {
+      gap: var(--gap-32);
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:grid {
+      display: grid;
+    }
+
+    .md\:grid-cols-12 {
+      grid-template-columns: repeat(var(--grid-columns), 1fr);
+    }
+
+    .md\:gap-0 {
+      gap: .5rem;
+      gap: var(--gap-0);
+    }
+
+    .md\:gap-1 {
+      gap: var(--gap-1);
+    }
+
+    .md\:gap-2 {
+      gap: var(--gap-2);
+    }
+
+    .md\:gap-3 {
+      gap: var(--gap-3);
+    }
+
+    .md\:gap-4 {
+      gap: var(--gap-4);
+    }
+
+    .md\:gap-5 {
+      gap: var(--gap-5);
+    }
+
+    .md\:gap-6 {
+      gap: var(--gap-6);
+    }
+
+    .md\:gap-8 {
+      gap: var(--gap-8);
+    }
+
+    .md\:gap-10 {
+      gap: var(--gap-10);
+    }
+
+    .md\:gap-12 {
+      gap: var(--gap-12);
+    }
+
+    .md\:gap-16 {
+      gap: var(--gap-16);
+    }
+
+    .md\:gap-20 {
+      gap: var(--gap-20);
+    }
+
+    .md\:gap-24 {
+      gap: var(--gap-24);
+    }
+
+    .md\:gap-32 {
+      gap: var(--gap-32);
+    }
+  }
+
+  .border {
+    border-width: var(--border-width-normal);
+    border-style: var(--border-style-solid);
+    border-color: var(--border-color);
+  }
+
+  .border-thin {
+    border-width: var(--border-width-thin);
+    border-style: var(--border-style-solid);
+    border-color: var(--border-color);
+  }
+
+  .border-thick {
+    border-width: var(--border-width-thick);
+    border-style: var(--border-style-solid);
+    border-color: var(--border-color);
+  }
+
+  .rounded-none {
+    border-radius: var(--border-radius-none);
+  }
+
+  .rounded-sm {
+    border-radius: var(--border-radius-sm);
+  }
+
+  .rounded, .rounded-md {
+    border-radius: var(--border-radius-md);
+  }
+
+  .rounded-lg {
+    border-radius: var(--border-radius-lg);
+  }
+
+  .rounded-xl {
+    border-radius: var(--border-radius-xl);
+  }
+
+  .rounded-2xl {
+    border-radius: var(--border-radius-2xl);
+  }
+
+  .rounded-full {
+    border-radius: var(--border-radius-full);
+  }
+
+  @media (width >= 40rem) {
+    .sm\:border {
+      border-width: var(--border-width-normal);
+      border-style: var(--border-style-solid);
+      border-color: var(--border-color);
+    }
+
+    .sm\:border-thin {
+      border-width: var(--border-width-thin);
+      border-style: var(--border-style-solid);
+      border-color: var(--border-color);
+    }
+
+    .sm\:border-thick {
+      border-width: var(--border-width-thick);
+      border-style: var(--border-style-solid);
+      border-color: var(--border-color);
+    }
+
+    .sm\:rounded-none {
+      border-radius: var(--border-radius-none);
+    }
+
+    .sm\:rounded-sm, .sm\:rounded, .sm\:rounded-md {
+      border-radius: var(--border-radius-sm);
+    }
+
+    .sm\:rounded-lg {
+      border-radius: var(--border-radius-lg);
+    }
+
+    .sm\:rounded-xl {
+      border-radius: var(--border-radius-xl);
+    }
+
+    .sm\:rounded-2xl {
+      border-radius: var(--border-radius-2xl);
+    }
+
+    .sm\:rounded-full {
+      border-radius: var(--border-radius-full);
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:border {
+      border-width: var(--border-width-normal);
+      border-style: var(--border-style-solid);
+      border-color: var(--border-color);
+    }
+
+    .md\:border-thin {
+      border-width: var(--border-width-thin);
+      border-style: var(--border-style-solid);
+      border-color: var(--border-color);
+    }
+
+    .md\:border-thick {
+      border-width: var(--border-width-thick);
+      border-style: var(--border-style-solid);
+      border-color: var(--border-color);
+    }
+
+    .md\:rounded-none {
+      border-radius: var(--border-radius-none);
+    }
+
+    .md\:rounded-sm {
+      border-radius: var(--border-radius-sm);
+    }
+
+    .md\:rounded, .md\:rounded-md {
+      border-radius: var(--border-radius-md);
+    }
+
+    .md\:rounded-lg {
+      border-radius: var(--border-radius-lg);
+    }
+
+    .md\:rounded-xl {
+      border-radius: var(--border-radius-xl);
+    }
+
+    .md\:rounded-2xl {
+      border-radius: var(--border-radius-2xl);
+    }
+
+    .md\:rounded-full {
+      border-radius: var(--border-radius-full);
+    }
+  }
+
+  .shadow {
+    box-shadow: var(--shadow);
+  }
+
+  .shadow-xs {
+    box-shadow: var(--shadow-xs);
+  }
+
+  .shadow-sm {
+    box-shadow: var(--shadow-sm);
+  }
+
+  .shadow-md {
+    box-shadow: var(--shadow-md);
+  }
+
+  .shadow-lg {
+    box-shadow: var(--shadow-lg);
+  }
+
+  .shadow-xl {
+    box-shadow: var(--shadow-xl);
+  }
+
+  @media (width >= 48rem) {
+    .md\:shadow {
+      box-shadow: var(--shadow);
+    }
+
+    .md\:shadow-xs {
+      box-shadow: var(--shadow-xs);
+    }
+
+    .md\:shadow-sm {
+      box-shadow: var(--shadow-sm);
+    }
+
+    .md\:shadow-md {
+      box-shadow: var(--shadow-md);
+    }
+
+    .md\:shadow-lg {
+      box-shadow: var(--shadow-lg);
+    }
+
+    .md\:shadow-xl {
+      box-shadow: var(--shadow-xl);
+    }
+  }
+
+  .opacity-0 {
+    opacity: var(--opacity-0);
+  }
+
+  .opacity-25 {
+    opacity: var(--opacity-25);
+  }
+
+  .opacity-50 {
+    opacity: var(--opacity-50);
+  }
+
+  .opacity-75 {
+    opacity: var(--opacity-75);
+  }
+
+  .opacity-100 {
+    opacity: var(--opacity-100);
+  }
+
+  @media (width >= 48rem) {
+    .md\:opacity-0 {
+      opacity: var(--opacity-0);
+    }
+
+    .md\:opacity-25 {
+      opacity: var(--opacity-25);
+    }
+
+    .md\:opacity-50 {
+      opacity: var(--opacity-50);
+    }
+
+    .md\:opacity-75 {
+      opacity: var(--opacity-75);
+    }
+
+    .md\:opacity-100 {
+      opacity: var(--opacity-100);
+    }
+  }
+
+  .transition-fast {
+    transition: var(--transition-fast);
+  }
+
+  .transition-normal {
+    transition: var(--transition-normal);
+  }
+
+  .transition-slow {
+    transition: var(--transition-slow);
+  }
+
+  .ring-primary-offset-primary:focus:not(.dark *), .ring-primary-offset-primary:active:not(.dark *) {
+    --ring-shadow: var(--ring-inset) 0 0 0 calc(1px + var(--ring-offset-width)) var(--primary-700);
+    --ring-offset-shadow: var(--ring-inset) 0 0 0 var(--ring-offset-width) var(--primary-400);
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--shadow, 0 0 #0000);
+  }
+
+  .ring-secondary-offset-secondary:focus:not(.dark *), .ring-secondary-offset-secondary:active:not(.dark *) {
+    --ring-shadow: var(--ring-inset) 0 0 0 calc(1px + var(--ring-offset-width)) var(--secondary-700);
+    --ring-offset-shadow: var(--ring-inset) 0 0 0 var(--ring-offset-width) var(--secondary-400);
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--shadow, 0 0 #0000);
+  }
+
+  .ring-accent-offset-accent:focus:not(.dark *), .ring-accent-offset-accent:active:not(.dark *) {
+    --ring-shadow: var(--ring-inset) 0 0 0 calc(1px + var(--ring-offset-width)) var(--accent-700);
+    --ring-offset-shadow: var(--ring-inset) 0 0 0 var(--ring-offset-width) var(--accent-400);
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--shadow, 0 0 #0000);
+  }
+
+  .fix-scroll-layout-shift-right {
+    padding-right: var(--removed-body-scroll-bar-size);
+  }
+
+  .fix-scroll-layout-shift-left {
+    padding-left: var(--removed-body-scroll-bar-size);
+  }
+}
+
+@layer byline-theme {
+  input:autofill, input:autofill:hover, input:autofill:focus, textarea:autofill, textarea:autofill:hover, textarea:autofill:focus, select:autofill, select:autofill:hover, select:autofill:focus {
+    -webkit-text-fill-color: black;
+    color: #000;
+    background-color: #fad9a7;
+    border: 1px solid #d89d3d;
+    transition: background-color 5000s ease-in-out;
+    -webkit-box-shadow: inset 0 0 0 1000px #fff2dc;
+    box-shadow: inset 0 0 0 1000px #fff2dc;
+  }
+
+  .dark input:autofill, .dark input:autofill:hover, .dark input:autofill:focus, .dark textarea:autofill, .dark textarea:autofill:hover, .dark textarea:autofill:focus, .dark select:autofill, .dark select:autofill:hover, .dark select:autofill:focus, [data-theme="dark"] input:autofill, [data-theme="dark"] input:autofill:hover, [data-theme="dark"] input:autofill:focus, [data-theme="dark"] textarea:autofill, [data-theme="dark"] textarea:autofill:hover, [data-theme="dark"] textarea:autofill:focus, [data-theme="dark"] select:autofill, [data-theme="dark"] select:autofill:hover, [data-theme="dark"] select:autofill:focus {
+    border: 1px solid var(--theme-600);
+    -webkit-text-fill-color: white;
+    -webkit-box-shadow: 0 0 0px 1000px var(--theme-600) inset;
+    box-shadow: 0 0 0px 1000px var(--theme-600) inset;
+    color: #fff;
+    background-color: #64646480;
+    transition: background-color 5000s ease-in-out;
+  }
+
+  :root {
+    --scroll-bar-thumb: var(--theme-400);
+    --scroll-bar-track: var(--theme-600);
+  }
+
+  :root.dark, :root[data-theme="dark"] {
+    --scroll-bar-thumb: var(--canvas-700);
+    --scroll-bar-track: var(--canvas-900);
+  }
+
+  ::-webkit-scrollbar {
+    width: .6em;
+    height: .6em;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--scroll-bar-thumb);
+  }
+
+  ::-webkit-scrollbar-track {
+    background: var(--scroll-bar-track);
+  }
+
+  ::-webkit-scrollbar-corner {
+    background: var(--scroll-bar-track);
+  }
+
+  html {
+    scrollbar-width: thin;
+    scrollbar-color: var(--scroll-bar-thumb) var(--scroll-bar-track);
+  }
+
+  .component--scroller, .dark .component--scroller, [data-theme="dark"] .component--scroller {
+    --scroll-bar-thumb: var(--scroll-bar-thumb);
+    --scroll-bar-track: var(--scroll-bar-track);
+  }
+
+  .component--scroller {
+    scrollbar-width: thin;
+    scrollbar-color: var(--scroll-bar-thumb) var(--scroll-bar-track);
+    overflow-y: auto;
+  }
+
+  html {
+    color: var(--text);
+    font-size: 1rem;
+  }
+
+  html .not-dark {
+    color: var(--text);
+  }
+
+  ::selection {
+    background-color: var(--theme-600);
+    color: #fff;
+  }
+
+  .dark ::selection, [data-theme="dark"] ::selection {
+    background-color: var(--theme-200);
+    color: var(--gray-900);
+  }
+
+  h1 {
+    font-size: 1.75rem;
+    font-weight: 600;
+    line-height: 1.125;
+  }
+
+  h2 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    line-height: 1.125;
+  }
+
+  h3 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    line-height: 1.1;
+  }
+
+  h4 {
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 1.1;
+  }
+
+  .external-link:after {
+    content: "";
+    background-image: url("/external-link-light.svg");
+    background-position: 20%;
+    background-repeat: no-repeat;
+    background-size: 65%;
+    width: 1.1rem;
+    height: 1.1rem;
+    margin-right: -5px;
+    display: inline-block;
+  }
+
+  .dark .external-link:after, [data-theme="dark"] .external-link:after {
+    background-image: url("/external-link-dark.svg");
+  }
+}
+
+@layer byline-typography;
+
+@layer byline-components {
+  .component--hamburger {
+    z-index: 200;
+    cursor: pointer;
+    width: 42px;
+    height: 34px;
+    font: inherit;
+    color: inherit;
+    text-transform: none;
+    background-color: #0000;
+    border: 0;
+    border-radius: 4px;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    transition-property: opacity, filter;
+    transition-duration: .15s;
+    transition-timing-function: ease;
+    display: flex;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .component--hamburger:active, .component--hamburger:focus {
+    border: .5px dashed #fff;
+    border-radius: 4px;
+    outline: none;
+  }
+
+  .component--hamburger .box {
+    width: 24px;
+    height: 24px;
+    display: block;
+    position: relative;
+  }
+
+  .component--hamburger .inner {
+    margin-top: -1px;
+    transition-duration: 75ms;
+    transition-timing-function: cubic-bezier(.55, .055, .675, .19);
+    display: block;
+    top: 50%;
+  }
+
+  .component--hamburger .inner, .component--hamburger .inner:before, .component--hamburger .inner:after {
+    border-radius: 0;
+    width: 24px;
+    height: 2px;
+    transition-property: transform;
+    transition-duration: .15s;
+    transition-timing-function: ease;
+    position: absolute;
+  }
+
+  .component--hamburger .inner:before, .component--hamburger .inner:after {
+    content: "";
+    display: block;
+  }
+
+  .component--hamburger .inner:before {
+    transition: top 75ms .12s, opacity 75ms;
+    top: -8px;
+  }
+
+  .component--hamburger .inner:after {
+    transition: bottom 75ms .12s, transform 75ms cubic-bezier(.55, .055, .675, .19);
+    bottom: -8px;
+  }
+
+  .component--hamburger.is_active .inner {
+    transition-delay: .12s;
+    transition-timing-function: cubic-bezier(.215, .61, .355, 1);
+    transform: rotate(45deg);
+  }
+
+  .component--hamburger.is_active .inner:before {
+    opacity: 0;
+    transition: top 75ms, opacity 75ms .12s;
+    top: 0;
+  }
+
+  .component--hamburger.is_active .inner:after {
+    transition: bottom 75ms, transform 75ms cubic-bezier(.215, .61, .355, 1) .12s;
+    bottom: 0;
+    transform: rotate(-90deg);
+  }
+}
+
+.component--fade-in-lift {
+  opacity: 0;
+  visibility: hidden;
+  will-change: opacity, visibility;
+  transition: opacity .5s ease-out, transform .7s ease-out;
+  transform: matrix(1, 0, 0, 1, 0, 18);
+}
+
+.component--fade-in-lift.is-visible {
+  opacity: 1;
+  visibility: visible;
+  transform: matrix(1, 0, 0, 1, 0, 0);
+}