/* inter-tight-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Inter Tight Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(https://theraphea-ads.vercel.app/assets/inter-tight-cyrillic-ext-wght-normal-okcGN4Nq.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-tight-cyrillic-wght-normal */
@font-face {
  font-family: 'Inter Tight Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(https://theraphea-ads.vercel.app/assets/inter-tight-cyrillic-wght-normal-BS41q_Tv.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-tight-greek-ext-wght-normal */
@font-face {
  font-family: 'Inter Tight Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(https://theraphea-ads.vercel.app/assets/inter-tight-greek-ext-wght-normal-DQgQPNk4.woff2) format('woff2-variations');
  unicode-range: U+1F00-1FFF;
}

/* inter-tight-greek-wght-normal */
@font-face {
  font-family: 'Inter Tight Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(https://theraphea-ads.vercel.app/assets/inter-tight-greek-wght-normal-sS1B39LI.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-tight-vietnamese-wght-normal */
@font-face {
  font-family: 'Inter Tight Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(https://theraphea-ads.vercel.app/assets/inter-tight-vietnamese-wght-normal-TKKdAiBA.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-tight-latin-ext-wght-normal */
@font-face {
  font-family: 'Inter Tight Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(https://theraphea-ads.vercel.app/assets/inter-tight-latin-ext-wght-normal-B4u9PlvR.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-tight-latin-wght-normal */
@font-face {
  font-family: 'Inter Tight Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(https://theraphea-ads.vercel.app/assets/inter-tight-latin-wght-normal-DX-nOvPD.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-pan-x: initial;
      --tw-pan-y: initial;
      --tw-pinch-zoom: initial;
      --tw-scroll-snap-strictness: proximity;
      --tw-space-y-reverse: 0;
      --tw-space-x-reverse: 0;
      --tw-divide-x-reverse: 0;
      --tw-border-style: solid;
      --tw-divide-y-reverse: 0;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-contain-size: initial;
      --tw-contain-layout: initial;
      --tw-contain-paint: initial;
      --tw-contain-style: initial;
      --tw-text-shadow-color: initial;
      --tw-text-shadow-alpha: 100%;
      --tw-content: "";
      --tw-animation-delay: 0s;
      --tw-animation-direction: normal;
      --tw-animation-duration: initial;
      --tw-animation-fill-mode: none;
      --tw-animation-iteration-count: 1;
      --tw-enter-blur: 0;
      --tw-enter-opacity: 1;
      --tw-enter-rotate: 0;
      --tw-enter-scale: 1;
      --tw-enter-translate-x: 0;
      --tw-enter-translate-y: 0;
      --tw-exit-blur: 0;
      --tw-exit-opacity: 1;
      --tw-exit-rotate: 0;
      --tw-exit-scale: 1;
      --tw-exit-translate-x: 0;
      --tw-exit-translate-y: 0;
      --tw-border-spacing-x: 0;
      --tw-border-spacing-y: 0;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
      "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji";
    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-red-200: oklch(88.5% .062 18.334);
    --color-red-300: oklch(80.8% .114 19.571);
    --color-red-400: oklch(70.4% .191 22.216);
    --color-red-500: oklch(63.7% .237 25.331);
    --color-red-700: oklch(50.5% .213 27.518);
    --color-red-950: oklch(25.8% .092 26.042);
    --color-orange-100: oklch(95.4% .038 75.164);
    --color-orange-300: oklch(83.7% .128 66.29);
    --color-orange-500: oklch(70.5% .213 47.604);
    --color-orange-700: oklch(55.3% .195 38.402);
    --color-orange-800: oklch(47% .157 37.304);
    --color-amber-400: oklch(82.8% .189 84.429);
    --color-yellow-300: oklch(90.5% .182 98.111);
    --color-yellow-500: oklch(79.5% .184 86.047);
    --color-yellow-700: oklch(55.4% .135 66.442);
    --color-green-200: oklch(92.5% .084 155.995);
    --color-green-400: oklch(79.2% .209 151.711);
    --color-green-500: oklch(72.3% .219 149.579);
    --color-green-600: oklch(62.7% .194 149.214);
    --color-emerald-300: oklch(84.5% .143 164.978);
    --color-emerald-500: oklch(69.6% .17 162.48);
    --color-emerald-700: oklch(50.8% .118 165.612);
    --color-cyan-300: oklch(86.5% .127 207.078);
    --color-cyan-500: oklch(71.5% .143 215.221);
    --color-cyan-700: oklch(52% .105 223.128);
    --color-sky-100: oklch(95.1% .026 236.824);
    --color-sky-300: oklch(82.8% .111 230.318);
    --color-sky-500: oklch(68.5% .169 237.323);
    --color-sky-700: oklch(50% .134 242.749);
    --color-blue-50: oklch(97% .014 254.604);
    --color-blue-100: oklch(93.2% .032 255.585);
    --color-blue-300: oklch(80.9% .105 251.813);
    --color-blue-400: oklch(70.7% .165 254.624);
    --color-blue-500: oklch(62.3% .214 259.815);
    --color-blue-700: oklch(48.8% .243 264.376);
    --color-indigo-300: oklch(78.5% .115 274.713);
    --color-indigo-500: oklch(58.5% .233 277.117);
    --color-indigo-700: oklch(45.7% .24 277.023);
    --color-indigo-800: oklch(39.8% .195 277.366);
    --color-violet-300: oklch(81.1% .111 293.571);
    --color-violet-500: oklch(60.6% .25 292.717);
    --color-violet-700: oklch(49.1% .27 292.581);
    --color-purple-50: oklch(97.7% .014 308.299);
    --color-purple-500: oklch(62.7% .265 303.9);
    --color-fuchsia-300: oklch(83.3% .145 321.434);
    --color-fuchsia-500: oklch(66.7% .295 322.15);
    --color-fuchsia-700: oklch(51.8% .253 323.949);
    --color-rose-300: oklch(81% .117 11.638);
    --color-rose-500: oklch(64.5% .246 16.439);
    --color-rose-700: oklch(51.4% .222 16.935);
    --color-slate-50: oklch(98.4% .003 247.858);
    --color-slate-100: oklch(96.8% .007 247.896);
    --color-slate-300: oklch(86.9% .022 252.894);
    --color-slate-600: oklch(44.6% .043 257.281);
    --color-slate-700: oklch(37.2% .044 257.287);
    --color-slate-950: oklch(12.9% .042 264.695);
    --color-gray-50: oklch(98.5% .002 247.839);
    --color-gray-100: oklch(96.7% .003 264.542);
    --color-gray-200: oklch(92.8% .006 264.531);
    --color-gray-300: oklch(87.2% .01 258.338);
    --color-gray-400: oklch(70.7% .022 261.325);
    --color-gray-500: oklch(55.1% .027 264.364);
    --color-gray-600: oklch(44.6% .03 256.802);
    --color-gray-900: oklch(21% .034 264.665);
    --color-zinc-800: oklch(27.4% .006 286.033);
    --color-neutral-300: oklch(87% 0 none);
    --color-neutral-500: oklch(55.6% 0 none);
    --color-neutral-700: oklch(37.1% 0 none);
    --color-neutral-900: oklch(20.5% 0 none);
    --color-stone-300: oklch(86.9% .005 56.366);
    --color-stone-500: oklch(55.3% .013 58.071);
    --color-stone-700: oklch(37.4% .01 67.558);
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --breakpoint-lg: 64rem;
    --breakpoint-2xl: 96rem;
    --container-3xs: 16rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --container-7xl: 80rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-tight: -.025em;
    --tracking-normal: 0em;
    --tracking-wide: .025em;
    --tracking-widest: .1em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --radius-xs: calc(var(--radius) * .25);
    --radius-sm: calc(var(--radius) * .5);
    --radius-md: calc(var(--radius) * .75);
    --radius-lg: calc(var(--radius) * 1);
    --radius-xl: calc(var(--radius) * 1.5);
    --radius-2xl: calc(var(--radius) * 2);
    --radius-3xl: calc(var(--radius) * 3);
    --radius-4xl: calc(var(--radius) * 4);
    --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
    --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
    --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
    --shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
    --shadow-2xl: 0 25px 50px -12px #00000040;
    --drop-shadow-xs: 0 1px 1px #0000000d;
    --ease-in: cubic-bezier(.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --blur-xs: 4px;
    --blur-sm: 8px;
    --blur-md: 12px;
    --blur-lg: 16px;
    --blur-xl: 24px;
    --blur-2xl: 40px;
    --blur-3xl: 64px;
    --aspect-video: 16 / 9;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --animate-in: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-surface: var(--surface);
    --color-surface-secondary: var(--surface-secondary);
    --color-surface-tertiary: var(--surface-tertiary);
    --color-overlay: var(--overlay);
    --color-muted: var(--muted);
    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);
    --color-border: var(--border);
    --color-separator: var(--separator);
    --color-focus: var(--focus);
    --color-link: var(--link);
    --color-default: var(--default);
    --color-default-foreground: var(--default-foreground);
    --color-backdrop: var(--backdrop);
    --shadow-overlay: var(--overlay-shadow);
    --shadow-field: var(--field-shadow);
    --color-field-foreground: var(--field-foreground, var(--foreground));
    --color-field-placeholder: var(--field-placeholder, var(--muted));
    --color-field-border: var(--field-border, var(--border));
    --border-width-field: var(--field-border-width, var(--border-width));
    --color-background-secondary: var(--background-secondary);
    --color-background-tertiary: var(--background-tertiary);
    --color-background-inverse: var(--background-inverse);
    --color-default-hover: var(--default-hover);
    --color-accent-hover: var(--accent-hover);
    --color-success-hover: var(--success-hover);
    --color-warning-hover: var(--warning-hover);
    --color-danger-hover: var(--danger-hover);
    --color-default-soft: var(--default-soft);
    --color-default-soft-foreground: var(--default-soft-foreground);
    --color-default-soft-hover: var(--default-soft-hover);
    --color-accent-soft: var(--accent-soft);
    --color-accent-soft-foreground: var(--accent-soft-foreground);
    --color-accent-soft-hover: var(--accent-soft-hover);
    --color-danger-soft: var(--danger-soft);
    --color-warning-soft: var(--warning-soft);
    --color-success-soft: var(--success-soft);
    --color-border-secondary: var(--border-secondary);
    --color-border-tertiary: var(--border-tertiary);
    --ease-smooth: ease;
    --ease-out-quad: cubic-bezier(.25, .46, .45, .94);
    --ease-out-quart: cubic-bezier(.165, .84, .44, 1);
    --ease-out-fluid: cubic-bezier(.32, .72, 0, 1);
    --ease-linear: linear;
  }

  @layer theme {
    @layer base {
      :root, .light, .default, [data-theme="light"], [data-theme="default"] {
        color-scheme: light;
        --white: oklch(100% 0 0);
        --black: oklch(0% 0 0);
        --snow: oklch(99.11% 0 0);
        --eclipse: oklch(21.03% .0059 285.89);
        --spacing: .25rem;
        --border-width: 1px;
        --field-border-width: 0px;
        --disabled-opacity: .5;
        --ring-offset-width: 2px;
        --cursor-interactive: pointer;
        --cursor-disabled: not-allowed;
        --radius: .5rem;
        --field-radius: calc(var(--radius) * 1.5);
        --background: oklch(97.02% 0 0);
        --foreground: var(--eclipse);
        --surface: var(--white);
        --surface-foreground: var(--foreground);
        --surface-secondary: oklch(95.24% .0013 286.37);
        --surface-secondary-foreground: var(--foreground);
        --surface-tertiary: oklch(93.73% .0013 286.37);
        --surface-tertiary-foreground: var(--foreground);
        --overlay: var(--white);
        --overlay-foreground: var(--foreground);
        --muted: oklch(55.17% .0138 285.94);
        --scrollbar: var(--scrollbar-thumb);
        --scrollbar-thumb: var(--foreground);
      }

      @supports (color: color-mix(in lab, red, red)) {
        :root, .light, .default, [data-theme="light"], [data-theme="default"] {
          --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent);
        }
      }

      :root, .light, .default, [data-theme="light"], [data-theme="default"] {
        --scrollbar-track: transparent;
        --scrollbar-gutter: auto;
        --scrollbar-width: thin;
        --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
        --default: oklch(94% .001 286.375);
        --default-foreground: var(--eclipse);
        --accent: oklch(62.04% .195 253.83);
        --accent-foreground: var(--snow);
        --field-background: var(--white);
        --field-foreground: oklch(21.03% .0059 285.89);
        --field-placeholder: var(--muted);
        --field-border: transparent;
        --success: oklch(73.29% .1935 150.81);
        --success-foreground: var(--eclipse);
        --warning: oklch(78.19% .1585 72.33);
        --warning-foreground: var(--eclipse);
        --danger: oklch(65.32% .2328 25.74);
        --danger-foreground: var(--snow);
        --segment: var(--white);
        --segment-foreground: var(--eclipse);
        --border: oklch(90% .004 286.32);
        --separator: oklch(92% .004 286.32);
        --focus: var(--accent);
        --link: var(--foreground);
        --backdrop: #00000080;
        --surface-hover: var(--surface);
      }

      @supports (color: color-mix(in lab, red, red)) {
        :root, .light, .default, [data-theme="light"], [data-theme="default"] {
          --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
        }
      }

      :root, .light, .default, [data-theme="light"], [data-theme="default"] {
        --background-secondary: var(--background);
      }

      @supports (color: color-mix(in lab, red, red)) {
        :root, .light, .default, [data-theme="light"], [data-theme="default"] {
          --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
        }
      }

      :root, .light, .default, [data-theme="light"], [data-theme="default"] {
        --background-tertiary: var(--background);
      }

      @supports (color: color-mix(in lab, red, red)) {
        :root, .light, .default, [data-theme="light"], [data-theme="default"] {
          --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
        }
      }

      :root, .light, .default, [data-theme="light"], [data-theme="default"] {
        --background-inverse: var(--foreground);
        --default-hover: var(--default);
      }

      @supports (color: color-mix(in lab, red, red)) {
        :root, .light, .default, [data-theme="light"], [data-theme="default"] {
          --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
        }
      }

      :root, .light, .default, [data-theme="light"], [data-theme="default"] {
        --accent-hover: var(--accent);
      }

      @supports (color: color-mix(in lab, red, red)) {
        :root, .light, .default, [data-theme="light"], [data-theme="default"] {
          --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
        }
      }

      :root, .light, .default, [data-theme="light"], [data-theme="default"] {
        --success-hover: var(--success);
      }

      @supports (color: color-mix(in lab, red, red)) {
        :root, .light, .default, [data-theme="light"], [data-theme="default"] {
          --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%);
        }
      }

      :root, .light, .default, [data-theme="light"], [data-theme="default"] {
        --warning-hover: var(--warning);
      }

      @supports (color: color-mix(in lab, red, red)) {
        :root, .light, .default, [data-theme="light"], [data-theme="default"] {
          --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%);
        }
      }

      :root, .light, .default, [data-theme="light"], [data-theme="default"] {
        --danger-hover: var(--danger);
      }

      @supports (color: color-mix(in lab, red, red)) {
        :root, .light, .default, [data-theme="light"], [data-theme="default"] {
          --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);
        }
      }

      :root, .light, .default, [data-theme="light"], [data-theme="default"] {
        --field-hover: var(--field-background, var(--default));
      }

      @supports (color: color-mix(in lab, red, red)) {
        :root, .light, .default, [data-theme="light"], [data-theme="default"] {
          --field-hover: color-mix(in oklab,
      var(--field-background, var(--default)) 90%,
      var(--field-foreground, var(--foreground)) 2%);
        }
      }

      :root, .light, .default, [data-theme="light"], [data-theme="default"] {
        --field-focus: var(--field-background, var(--default));
        --field-border-hover: var(--field-border, var(--border));
      }

      @supports (color: color-mix(in lab, red, red)) {
        :root, .light, .default, [data-theme="light"], [data-theme="default"] {
          --field-border-hover: color-mix(in oklab,
      var(--field-border, var(--border)) 88%,
      var(--field-foreground, var(--foreground)) 10%);
        }
      }

      :root, .light, .default, [data-theme="light"], [data-theme="default"] {
        --field-border-focus: var(--field-border, var(--border));
      }

      @supports (color: color-mix(in lab, red, red)) {
        :root, .light, .default, [data-theme="light"], [data-theme="default"] {
          --field-border-focus: color-mix(in oklab,
      var(--field-border, var(--border)) 74%,
      var(--field-foreground, var(--foreground)) 22%);
        }
      }

      :root, .light, .default, [data-theme="light"], [data-theme="default"] {
        --default-soft: var(--default);
      }

      @supports (color: color-mix(in lab, red, red)) {
        :root, .light, .default, [data-theme="light"], [data-theme="default"] {
          --default-soft: color-mix(in oklab, var(--default) 50%, transparent);
        }
      }

      :root, .light, .default, [data-theme="light"], [data-theme="default"] {
        --default-soft-foreground: var(--default-foreground);
        --default-soft-hover: var(--default);
      }

      @supports (color: color-mix(in lab, red, red)) {
        :root, .light, .default, [data-theme="light"], [data-theme="default"] {
          --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent);
        }
      }

      :root, .light, .default, [data-theme="light"], [data-theme="default"] {
        --accent-soft: var(--accent);
      }

      @supports (color: color-mix(in lab, red, red)) {
        :root, .light, .default, [data-theme="light"], [data-theme="default"] {
          --accent-soft: color-mix(in oklab, var(--accent) 15%, transparent);
        }
      }

      :root, .light, .default, [data-theme="light"], [data-theme="default"] {
        --accent-soft-foreground: var(--accent);
      }

      @supports (color: color-mix(in lab, red, red)) {
        :root, .light, .default, [data-theme="light"], [data-theme="default"] {
          --accent-soft-foreground: color-mix(in oklab, var(--accent) 70%, var(--foreground) 30%);
        }
      }

      :root, .light, .default, [data-theme="light"], [data-theme="default"] {
        --accent-soft-hover: var(--accent);
      }

      @supports (color: color-mix(in lab, red, red)) {
        :root, .light, .default, [data-theme="light"], [data-theme="default"] {
          --accent-soft-hover: color-mix(in oklab, var(--accent) 20%, transparent);
        }
      }

      :root, .light, .default, [data-theme="light"], [data-theme="default"] {
        --danger-soft: var(--danger);
      }

      @supports (color: color-mix(in lab, red, red)) {
        :root, .light, .default, [data-theme="light"], [data-theme="default"] {
          --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
        }
      }

      :root, .light, .default, [data-theme="light"], [data-theme="default"] {
        --danger-soft-foreground: var(--danger);
      }

      @supports (color: color-mix(in lab, red, red)) {
        :root, .light, .default, [data-theme="light"], [data-theme="default"] {
          --danger-soft-foreground: color-mix(in oklab, var(--danger) 70%, var(--foreground) 40%);
        }
      }

      :root, .light, .default, [data-theme="light"], [data-theme="default"] {
        --danger-soft-hover: var(--danger);
      }

      @supports (color: color-mix(in lab, red, red)) {
        :root, .light, .default, [data-theme="light"], [data-theme="default"] {
          --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);
        }
      }

      :root, .light, .default, [data-theme="light"], [data-theme="default"] {
        --warning-soft: var(--warning);
      }

      @supports (color: color-mix(in lab, red, red)) {
        :root, .light, .default, [data-theme="light"], [data-theme="default"] {
          --warning-soft: color-mix(in oklab, var(--warning) 15%, transparent);
        }
      }

      :root, .light, .default, [data-theme="light"], [data-theme="default"] {
        --warning-soft-foreground: var(--warning);
      }

      @supports (color: color-mix(in lab, red, red)) {
        :root, .light, .default, [data-theme="light"], [data-theme="default"] {
          --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 70%);
        }
      }

      :root, .light, .default, [data-theme="light"], [data-theme="default"] {
        --warning-soft-hover: var(--warning);
      }

      @supports (color: color-mix(in lab, red, red)) {
        :root, .light, .default, [data-theme="light"], [data-theme="default"] {
          --warning-soft-hover: color-mix(in oklab, var(--warning) 20%, transparent);
        }
      }

      :root, .light, .default, [data-theme="light"], [data-theme="default"] {
        --success-soft: var(--success);
      }

      @supports (color: color-mix(in lab, red, red)) {
        :root, .light, .default, [data-theme="light"], [data-theme="default"] {
          --success-soft: color-mix(in oklab, var(--success) 15%, transparent);
        }
      }

      :root, .light, .default, [data-theme="light"], [data-theme="default"] {
        --success-soft-foreground: var(--success);
      }

      @supports (color: color-mix(in lab, red, red)) {
        :root, .light, .default, [data-theme="light"], [data-theme="default"] {
          --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 60%);
        }
      }

      :root, .light, .default, [data-theme="light"], [data-theme="default"] {
        --success-soft-hover: var(--success);
      }

      @supports (color: color-mix(in lab, red, red)) {
        :root, .light, .default, [data-theme="light"], [data-theme="default"] {
          --success-soft-hover: color-mix(in oklab, var(--success) 20%, transparent);
        }
      }

      :root, .light, .default, [data-theme="light"], [data-theme="default"] {
        --separator-secondary: var(--surface);
      }

      @supports (color: color-mix(in lab, red, red)) {
        :root, .light, .default, [data-theme="light"], [data-theme="default"] {
          --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
        }
      }

      :root, .light, .default, [data-theme="light"], [data-theme="default"] {
        --separator-tertiary: var(--surface);
      }

      @supports (color: color-mix(in lab, red, red)) {
        :root, .light, .default, [data-theme="light"], [data-theme="default"] {
          --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
        }
      }

      :root, .light, .default, [data-theme="light"], [data-theme="default"] {
        --border-secondary: var(--surface);
      }

      @supports (color: color-mix(in lab, red, red)) {
        :root, .light, .default, [data-theme="light"], [data-theme="default"] {
          --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
        }
      }

      :root, .light, .default, [data-theme="light"], [data-theme="default"] {
        --border-tertiary: var(--surface);
      }

      @supports (color: color-mix(in lab, red, red)) {
        :root, .light, .default, [data-theme="light"], [data-theme="default"] {
          --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
        }
      }

      :root, .light, .default, [data-theme="light"], [data-theme="default"] {
        --surface-shadow: 0 2px 4px 0 #0000000a, 0 1px 2px 0 #0000000f,
      0 0 1px 0 #0000000f;
        --overlay-shadow: 0 2px 8px 0 #0000000f, 0 -6px 12px 0 #00000008,
      0 14px 28px 0 #00000014;
        --field-shadow: 0 2px 4px 0 #0000000a, 0 1px 2px 0 #0000000f,
      0 0 1px 0 #0000000f;
        --skeleton-animation: shimmer;
        --tooltip-delay: 1.5s;
        --tooltip-close-delay: .5s;
      }

      .dark, [data-theme="dark"] {
        color-scheme: dark;
        --background: oklch(12% .005 285.823);
        --foreground: var(--snow);
        --surface: oklch(21.03% .0059 285.89);
        --surface-foreground: var(--foreground);
        --surface-secondary: oklch(25.7% .0037 286.14);
        --surface-tertiary: oklch(27.21% .0024 247.91);
        --overlay: oklch(21.03% .0059 285.89);
        --overlay-foreground: var(--foreground);
        --muted: oklch(70.5% .015 286.067);
        --scrollbar: var(--scrollbar-thumb);
        --scrollbar-thumb: var(--foreground);
      }

      @supports (color: color-mix(in lab, red, red)) {
        .dark, [data-theme="dark"] {
          --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent);
        }
      }

      .dark, [data-theme="dark"] {
        --scrollbar-track: transparent;
        --scrollbar-gutter: auto;
        --scrollbar-width: thin;
        --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
        --default: oklch(27.4% .006 286.033);
        --default-foreground: var(--snow);
        --field-background: oklch(21.03% .0059 285.89);
        --field-foreground: var(--foreground);
        --warning: oklch(82.03% .1388 76.34);
        --warning-foreground: var(--eclipse);
        --danger: oklch(59.4% .1967 24.63);
        --danger-foreground: var(--snow);
        --segment: oklch(39.64% .01 285.93);
        --segment-foreground: var(--foreground);
        --border: oklch(28% .006 286.033);
        --separator: oklch(25% .006 286.033);
        --focus: var(--accent);
        --link: var(--foreground);
        --backdrop: #0009;
        --surface-shadow: 0 0 0 0 transparent inset;
        --overlay-shadow: 0 0 1px 0 #ffffff4d inset;
        --field-shadow: 0 0 0 0 transparent inset;
        --surface-hover: var(--surface);
      }

      @supports (color: color-mix(in lab, red, red)) {
        .dark, [data-theme="dark"] {
          --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
        }
      }

      .dark, [data-theme="dark"] {
        --background-secondary: var(--background);
      }

      @supports (color: color-mix(in lab, red, red)) {
        .dark, [data-theme="dark"] {
          --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
        }
      }

      .dark, [data-theme="dark"] {
        --background-tertiary: var(--background);
      }

      @supports (color: color-mix(in lab, red, red)) {
        .dark, [data-theme="dark"] {
          --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
        }
      }

      .dark, [data-theme="dark"] {
        --background-inverse: var(--foreground);
        --default-hover: var(--default);
      }

      @supports (color: color-mix(in lab, red, red)) {
        .dark, [data-theme="dark"] {
          --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
        }
      }

      .dark, [data-theme="dark"] {
        --accent-hover: var(--accent);
      }

      @supports (color: color-mix(in lab, red, red)) {
        .dark, [data-theme="dark"] {
          --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
        }
      }

      .dark, [data-theme="dark"] {
        --success-hover: var(--success);
      }

      @supports (color: color-mix(in lab, red, red)) {
        .dark, [data-theme="dark"] {
          --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%);
        }
      }

      .dark, [data-theme="dark"] {
        --warning-hover: var(--warning);
      }

      @supports (color: color-mix(in lab, red, red)) {
        .dark, [data-theme="dark"] {
          --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%);
        }
      }

      .dark, [data-theme="dark"] {
        --danger-hover: var(--danger);
      }

      @supports (color: color-mix(in lab, red, red)) {
        .dark, [data-theme="dark"] {
          --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);
        }
      }

      .dark, [data-theme="dark"] {
        --field-hover: var(--field-background, var(--default));
      }

      @supports (color: color-mix(in lab, red, red)) {
        .dark, [data-theme="dark"] {
          --field-hover: color-mix(in oklab,
      var(--field-background, var(--default)) 90%,
      var(--field-foreground, var(--foreground)) 2%);
        }
      }

      .dark, [data-theme="dark"] {
        --field-focus: var(--field-background, var(--default));
        --field-border-hover: var(--field-border, var(--border));
      }

      @supports (color: color-mix(in lab, red, red)) {
        .dark, [data-theme="dark"] {
          --field-border-hover: color-mix(in oklab,
      var(--field-border, var(--border)) 88%,
      var(--field-foreground, var(--foreground)) 10%);
        }
      }

      .dark, [data-theme="dark"] {
        --field-border-focus: var(--field-border, var(--border));
      }

      @supports (color: color-mix(in lab, red, red)) {
        .dark, [data-theme="dark"] {
          --field-border-focus: color-mix(in oklab,
      var(--field-border, var(--border)) 74%,
      var(--field-foreground, var(--foreground)) 22%);
        }
      }

      .dark, [data-theme="dark"] {
        --default-soft: var(--default);
      }

      @supports (color: color-mix(in lab, red, red)) {
        .dark, [data-theme="dark"] {
          --default-soft: color-mix(in oklab, var(--default) 50%, transparent);
        }
      }

      .dark, [data-theme="dark"] {
        --default-soft-foreground: var(--default-foreground);
        --default-soft-hover: var(--default);
      }

      @supports (color: color-mix(in lab, red, red)) {
        .dark, [data-theme="dark"] {
          --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent);
        }
      }

      .dark, [data-theme="dark"] {
        --accent-soft: var(--accent);
      }

      @supports (color: color-mix(in lab, red, red)) {
        .dark, [data-theme="dark"] {
          --accent-soft: color-mix(in oklab, var(--accent) 12%, transparent);
        }
      }

      .dark, [data-theme="dark"] {
        --accent-soft-foreground: var(--accent);
      }

      @supports (color: color-mix(in lab, red, red)) {
        .dark, [data-theme="dark"] {
          --accent-soft-foreground: color-mix(in oklab, var(--accent) 80%, var(--foreground) 30%);
        }
      }

      .dark, [data-theme="dark"] {
        --accent-soft-hover: var(--accent);
      }

      @supports (color: color-mix(in lab, red, red)) {
        .dark, [data-theme="dark"] {
          --accent-soft-hover: color-mix(in oklab, var(--accent) 16%, transparent);
        }
      }

      .dark, [data-theme="dark"] {
        --danger-soft: var(--danger);
      }

      @supports (color: color-mix(in lab, red, red)) {
        .dark, [data-theme="dark"] {
          --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
        }
      }

      .dark, [data-theme="dark"] {
        --danger-soft-foreground: var(--danger);
      }

      @supports (color: color-mix(in lab, red, red)) {
        .dark, [data-theme="dark"] {
          --danger-soft-foreground: color-mix(in oklab, var(--danger) 80%, var(--foreground) 30%);
        }
      }

      .dark, [data-theme="dark"] {
        --danger-soft-hover: var(--danger);
      }

      @supports (color: color-mix(in lab, red, red)) {
        .dark, [data-theme="dark"] {
          --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);
        }
      }

      .dark, [data-theme="dark"] {
        --warning-soft: var(--warning);
      }

      @supports (color: color-mix(in lab, red, red)) {
        .dark, [data-theme="dark"] {
          --warning-soft: color-mix(in oklab, var(--warning) 12%, transparent);
        }
      }

      .dark, [data-theme="dark"] {
        --warning-soft-foreground: var(--warning);
      }

      @supports (color: color-mix(in lab, red, red)) {
        .dark, [data-theme="dark"] {
          --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 30%);
        }
      }

      .dark, [data-theme="dark"] {
        --warning-soft-hover: var(--warning);
      }

      @supports (color: color-mix(in lab, red, red)) {
        .dark, [data-theme="dark"] {
          --warning-soft-hover: color-mix(in oklab, var(--warning) 16%, transparent);
        }
      }

      .dark, [data-theme="dark"] {
        --success-soft: var(--success);
      }

      @supports (color: color-mix(in lab, red, red)) {
        .dark, [data-theme="dark"] {
          --success-soft: color-mix(in oklab, var(--success) 12%, transparent);
        }
      }

      .dark, [data-theme="dark"] {
        --success-soft-foreground: var(--success);
      }

      @supports (color: color-mix(in lab, red, red)) {
        .dark, [data-theme="dark"] {
          --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 30%);
        }
      }

      .dark, [data-theme="dark"] {
        --success-soft-hover: var(--success);
      }

      @supports (color: color-mix(in lab, red, red)) {
        .dark, [data-theme="dark"] {
          --success-soft-hover: color-mix(in oklab, var(--success) 16%, transparent);
        }
      }

      .dark, [data-theme="dark"] {
        --separator-secondary: var(--surface);
      }

      @supports (color: color-mix(in lab, red, red)) {
        .dark, [data-theme="dark"] {
          --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
        }
      }

      .dark, [data-theme="dark"] {
        --separator-tertiary: var(--surface);
      }

      @supports (color: color-mix(in lab, red, red)) {
        .dark, [data-theme="dark"] {
          --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
        }
      }

      .dark, [data-theme="dark"] {
        --border-secondary: var(--surface);
      }

      @supports (color: color-mix(in lab, red, red)) {
        .dark, [data-theme="dark"] {
          --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
        }
      }

      .dark, [data-theme="dark"] {
        --border-tertiary: var(--surface);
      }

      @supports (color: color-mix(in lab, red, red)) {
        .dark, [data-theme="dark"] {
          --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
        }
      }

      [data-vibrant-palette="true"]:not(.dark):not([data-theme="dark"]) {
        --accent-soft-foreground: var(--accent);
      }

      @supports (color: color-mix(in lab, red, red)) {
        [data-vibrant-palette="true"]:not(.dark):not([data-theme="dark"]) {
          --accent-soft-foreground: color-mix(in oklab, var(--accent) 92%, var(--foreground) 8%);
        }
      }

      [data-vibrant-palette="true"]:not(.dark):not([data-theme="dark"]) {
        --danger-soft-foreground: var(--danger);
      }

      @supports (color: color-mix(in lab, red, red)) {
        [data-vibrant-palette="true"]:not(.dark):not([data-theme="dark"]) {
          --danger-soft-foreground: color-mix(in oklab, var(--danger) 92%, var(--foreground) 8%);
        }
      }

      [data-vibrant-palette="true"]:not(.dark):not([data-theme="dark"]) {
        --warning-soft-foreground: var(--warning);
      }

      @supports (color: color-mix(in lab, red, red)) {
        [data-vibrant-palette="true"]:not(.dark):not([data-theme="dark"]) {
          --warning-soft-foreground: color-mix(in oklab, var(--warning) 92%, var(--foreground) 8%);
        }
      }

      [data-vibrant-palette="true"]:not(.dark):not([data-theme="dark"]) {
        --success-soft-foreground: var(--success);
      }

      @supports (color: color-mix(in lab, red, red)) {
        [data-vibrant-palette="true"]:not(.dark):not([data-theme="dark"]) {
          --success-soft-foreground: color-mix(in oklab, var(--success) 92%, var(--foreground) 8%);
        }
      }

      [data-vibrant-palette="true"].dark, [data-vibrant-palette="true"][data-theme="dark"] {
        --accent-soft-foreground: var(--accent);
      }

      @supports (color: color-mix(in lab, red, red)) {
        [data-vibrant-palette="true"].dark, [data-vibrant-palette="true"][data-theme="dark"] {
          --accent-soft-foreground: color-mix(in oklab, var(--accent) 92%, var(--foreground) 8%);
        }
      }

      [data-vibrant-palette="true"].dark, [data-vibrant-palette="true"][data-theme="dark"] {
        --danger-soft-foreground: var(--danger);
      }

      @supports (color: color-mix(in lab, red, red)) {
        [data-vibrant-palette="true"].dark, [data-vibrant-palette="true"][data-theme="dark"] {
          --danger-soft-foreground: color-mix(in oklab, var(--danger) 92%, var(--foreground) 8%);
        }
      }

      [data-vibrant-palette="true"].dark, [data-vibrant-palette="true"][data-theme="dark"] {
        --warning-soft-foreground: var(--warning);
      }

      @supports (color: color-mix(in lab, red, red)) {
        [data-vibrant-palette="true"].dark, [data-vibrant-palette="true"][data-theme="dark"] {
          --warning-soft-foreground: color-mix(in oklab, var(--warning) 92%, var(--foreground) 8%);
        }
      }

      [data-vibrant-palette="true"].dark, [data-vibrant-palette="true"][data-theme="dark"] {
        --success-soft-foreground: var(--success);
      }

      @supports (color: color-mix(in lab, red, red)) {
        [data-vibrant-palette="true"].dark, [data-vibrant-palette="true"][data-theme="dark"] {
          --success-soft-foreground: color-mix(in oklab, var(--success) 92%, var(--foreground) 8%);
        }
      }
    }
  }

  @layer components;
}

@layer base {
  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }

  *, :after, :before, ::backdrop {
    border-color: var(--border, currentColor);
  }

  ::file-selector-button {
    border-color: var(--border, currentColor);
  }

  :root {
    view-transition-name: none;
  }

  ::view-transition {
    pointer-events: none;
  }

  [data-scrollbar="thin"] {
    --scrollbar-width: thin;
    --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    --scrollbar-gutter: auto;
  }

  [data-scrollbar="default"] {
    --scrollbar-width: auto;
    --scrollbar-color: auto;
    --scrollbar-gutter: auto;
  }

  [data-scrollbar="none"] {
    --scrollbar-width: none;
    --scrollbar-color: auto;
    --scrollbar-gutter: auto;
  }
}

@layer components {
  .close-button {
    isolation: isolate;
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    transform-origin: center;
    border-radius: calc(var(--radius) * 1.5);
    padding: var(--spacing);
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    cursor: var(--cursor-interactive);
    transition: transform .25s var(--ease-out-quart), color .15s var(--ease-out), background-color .1s var(--ease-out), box-shadow .15s var(--ease-out);
    transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: relative;
  }

  .close-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .close-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .close-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .close-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .close-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .close-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .close-button:focus-visible:not(:focus), .close-button[data-focus-visible="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: var(--ring-offset-width);
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--background);
    --tw-outline-style: none;
    outline-style: none;
  }

  .close-button:disabled, .close-button[aria-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  .close-button[data-pending="true"] {
    pointer-events: none;
  }

  .close-button svg {
    pointer-events: none;
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    margin-inline: calc(var(--spacing) * -.5);
    margin-block: calc(var(--spacing) * .5);
    flex-shrink: 0;
    align-self: center;
  }

  .close-button--default {
    background-color: var(--default);
    color: var(--muted);
  }

  @media (hover: hover) {
    .close-button--default:hover, .close-button--default[data-hovered="true"] {
      background-color: var(--default-hover);
    }
  }

  .close-button--default:active, .close-button--default[data-pressed="true"] {
    transform: scale(.93);
  }

  .description {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    text-wrap: wrap;
    overflow-wrap: break-word;
    color: var(--muted);
  }

  .error-message {
    height: auto;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    overflow-wrap: break-word;
    color: var(--danger);
    transition: opacity .15s var(--ease-out), height .35s var(--ease-smooth);
  }

  .error-message:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .error-message:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .error-message:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .error-message:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .error-message:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .error-message:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .field-error {
    height: 0;
    padding-inline: var(--spacing);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    overflow-wrap: break-word;
    color: var(--danger);
    opacity: 0;
  }

  .field-error[data-visible] {
    opacity: 1;
    height: auto;
  }

  .field-error {
    transition: opacity .15s var(--ease-out), height .35s var(--ease-smooth);
  }

  .field-error:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .field-error:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .field-error:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .field-error:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .field-error:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .field-error:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .checkbox > .field-error, .checkbox > [data-slot="field-error"], .switch > .field-error, .switch > [data-slot="field-error"], .radio > .field-error, .radio > [data-slot="field-error"] {
    height: auto;
    min-height: 0;
    color: var(--muted);
    opacity: 1;
    margin: 0;
    padding: 0;
    transition: none;
  }

  .label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
  }

  :is(.label--required, [data-required="true"]:not([role="group"]):not([role="radiogroup"]):not([role="checkboxgroup"]) > .label, [data-required="true"]:not([data-slot="radio"]):not([data-slot="checkbox"]) > .label):after {
    margin-left: calc(var(--spacing) * .5);
    color: var(--danger);
    --tw-content: "*";
    content: var(--tw-content);
  }

  .label--disabled, [data-disabled="true"] .label {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  .label--invalid, [data-invalid="true"] .label, [aria-invalid="true"] .label {
    color: var(--danger);
  }

  .accordion {
    contain: layout style;
    width: 100%;
  }

  .accordion__body {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .accordion__body-inner {
    padding-inline: calc(var(--spacing) * 4);
    padding-top: 0;
    padding-bottom: calc(var(--spacing) * 4);
    color: var(--muted);
  }

  .accordion__indicator {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    color: var(--muted);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .25s;
    flex-shrink: 0;
    margin-left: auto;
    transition-duration: .25s;
  }

  .accordion__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .accordion__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .accordion__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .accordion__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .accordion__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .accordion__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .accordion__indicator[data-expanded="true"] {
    rotate: -180deg;
  }

  .accordion__item {
    --tw-border-style: none;
    border-style: none;
    position: relative;
  }

  .accordion__item:after {
    content: "";
    border-radius: calc(var(--radius) * .25);
    background-color: var(--separator);
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 0;
  }

  .accordion__item:last-child:after {
    content: none;
  }

  .accordion__item[data-hide-separator="true"]:after {
    display: none;
  }

  .accordion__trigger {
    cursor: var(--cursor-interactive);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 4);
    text-align: left;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    -webkit-tap-highlight-color: transparent;
    transition: opacity .15s var(--ease-out), box-shadow .15s var(--ease-out);
    flex: 1;
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .accordion__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .accordion__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .accordion__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .accordion__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .accordion__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .accordion__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  @media (hover: hover) {
    .accordion__trigger:hover:not([aria-expanded="true"]), .accordion__trigger[data-hovered="true"]:not([aria-expanded="true"]) {
      background-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .accordion__trigger:hover:not([aria-expanded="true"]), .accordion__trigger[data-hovered="true"]:not([aria-expanded="true"]) {
        background-color: color-mix(in oklab, var(--foreground) 3%, transparent 90%);
      }
    }
  }

  .accordion__trigger:focus-visible:not(:focus), .accordion__trigger[data-focus-visible="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: var(--ring-offset-width);
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--background);
    --tw-outline-style: none;
    outline-style: none;
  }

  .accordion__trigger:disabled, .accordion__trigger[aria-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  .accordion__panel {
    opacity: 0;
    height: var(--disclosure-panel-height);
    transition: height .2s var(--ease-out-quad), opacity .2s var(--ease-out);
    overflow: clip;
  }

  .accordion__panel:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .accordion__panel:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .accordion__panel:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .accordion__panel:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .accordion__panel:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .accordion__panel:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .accordion__panel[data-expanded="true"] {
    will-change: height, opacity;
    opacity: 1;
  }

  .accordion--surface {
    background-color: var(--surface);
    border-radius: min(32px, var(--radius-3xl));
  }

  @media (hover: hover) {
    .accordion--surface .accordion__trigger:hover:not([aria-expanded="true"]), .accordion--surface .accordion__trigger[data-hovered="true"]:not([aria-expanded="true"]) {
      background-color: var(--default);
    }
  }

  .accordion--surface .accordion__item:after {
    background-color: var(--surface-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .accordion--surface .accordion__item:after {
      background-color: color-mix(in oklab, var(--surface-foreground) 6%, transparent);
    }
  }

  .accordion--surface .accordion__item:after {
    width: 94%;
    left: 3%;
  }

  .accordion--surface .accordion__item:first-child [data-slot="accordion-trigger"] {
    border-top-left-radius: min(32px, var(--radius-3xl));
    border-top-right-radius: min(32px, var(--radius-3xl));
  }

  .accordion--surface .accordion__item:last-child:not(:has([data-slot="accordion-trigger"][aria-expanded="true"])) [data-slot="accordion-trigger"] {
    border-bottom-left-radius: min(32px, var(--radius-3xl));
    border-bottom-right-radius: min(32px, var(--radius-3xl));
  }

  .breadcrumbs {
    align-items: center;
    display: flex;
  }

  .breadcrumbs .breadcrumbs__link {
    padding-inline: calc(var(--spacing) * .5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--muted);
    opacity: 1;
    text-decoration-line: none;
    position: relative;
  }

  .breadcrumbs .breadcrumbs__link:hover, .breadcrumbs .breadcrumbs__link[data-hovered="true"] {
    text-decoration-line: underline;
  }

  .breadcrumbs .breadcrumbs__link[data-current="true"] {
    color: var(--link);
    opacity: 1;
  }

  .breadcrumbs .breadcrumbs__item {
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing) * .5);
    padding-inline: calc(var(--spacing) * .5);
    flex-shrink: 0;
    display: flex;
  }

  .breadcrumbs .breadcrumbs__separator {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
    color: var(--muted);
  }

  .breadcrumbs .breadcrumbs__separator:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
    rotate: 180deg;
  }

  .disclosure-group {
    contain: layout style;
    width: 100%;
  }

  .disclosure {
    position: relative;
  }

  .accordion__heading {
    display: flex;
  }

  .disclosure__trigger {
    cursor: var(--cursor-interactive);
    -webkit-tap-highlight-color: transparent;
    display: inline-block;
  }

  .disclosure__trigger:focus-visible:not(:focus), .disclosure__trigger[data-focus-visible="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: var(--ring-offset-width);
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--background);
    --tw-outline-style: none;
    outline-style: none;
  }

  .disclosure__trigger:disabled, .disclosure__trigger[aria-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  .disclosure__indicator {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    color: inherit;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .25s;
    flex-shrink: 0;
    margin-left: auto;
    transition-duration: .25s;
  }

  .disclosure__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .disclosure__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .disclosure__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .disclosure__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .disclosure__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .disclosure__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .disclosure__indicator[data-expanded="true"] {
    rotate: -180deg;
  }

  .disclosure__content {
    opacity: 0;
    height: var(--disclosure-panel-height);
    transition: height .2s var(--ease-out-quad), opacity .2s var(--ease-out);
    overflow: clip;
  }

  .disclosure__content:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .disclosure__content:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .disclosure__content:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .disclosure__content:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .disclosure__content:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .disclosure__content:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .disclosure__content[data-expanded="true"] {
    will-change: height, opacity;
    opacity: 1;
  }

  .disclosure__body {
    padding: calc(var(--spacing) * 2);
  }

  .link {
    border-radius: calc(var(--radius) * 1.5);
    --tw-font-weight: var(--font-weight-medium);
    width: fit-content;
    height: fit-content;
    font-weight: var(--font-weight-medium);
    color: var(--link);
    text-decoration-line: none;
    -webkit-text-decoration-color: var(--separator-tertiary);
    -webkit-text-decoration-color: var(--separator-tertiary);
    text-decoration-color: var(--separator-tertiary);
    text-underline-offset: 4px;
    -webkit-tap-highlight-color: transparent;
    transition: color .1s var(--ease-smooth), background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out), opacity .1s var(--ease-out);
    align-items: center;
    text-decoration-thickness: 1.5px;
    display: inline-flex;
    position: relative;
  }

  .link:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .link:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .link:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .link:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .link:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .link:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .link {
    cursor: var(--cursor-interactive);
  }

  @media (hover: hover) {
    .link:hover, .link[data-hovered="true"] {
      text-decoration-line: underline;
      -webkit-text-decoration-color: var(--muted);
      -webkit-text-decoration-color: var(--muted);
      text-decoration-color: var(--muted);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .link:hover, .link[data-hovered="true"] {
        -webkit-text-decoration-color: color-mix(in oklab, var(--muted) 50%, transparent);
        -webkit-text-decoration-color: color-mix(in oklab, var(--muted) 50%, transparent);
        text-decoration-color: color-mix(in oklab, var(--muted) 50%, transparent);
      }
    }

    :is(.link:hover, .link[data-hovered="true"]) .link__icon {
      opacity: 1;
    }
  }

  .link:active, .link[data-pressed="true"] {
    text-decoration-line: underline;
    -webkit-text-decoration-color: var(--muted);
    -webkit-text-decoration-color: var(--muted);
    text-decoration-color: var(--muted);
  }

  :is(.link:active, .link[data-pressed="true"]) .link__icon {
    opacity: 1;
  }

  .link:focus-visible:not(:focus), .link[data-focus-visible="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: var(--ring-offset-width);
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--background);
    --tw-outline-style: none;
    outline-style: none;
  }

  :is(.link:focus-visible:not(:focus), .link[data-focus-visible="true"]) .link__icon {
    opacity: 1;
  }

  .link[aria-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  .link .link__icon {
    pointer-events: none;
    color: currentColor;
    opacity: .6;
    width: .75em;
    height: .75em;
    transition: opacity .15s var(--ease-out);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  .link .link__icon:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .link .link__icon:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .link .link__icon:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .link .link__icon:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .link .link__icon:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .link .link__icon:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .link .link__icon svg {
    transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .link .link__icon[data-default-icon="true"] {
    margin-left: var(--spacing);
    padding-bottom: calc(var(--spacing) * 1.5);
  }

  .link.button {
    gap: 0;
    text-decoration-line: none;
  }

  .pagination {
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing) * 4);
    flex-direction: column;
    width: 100%;
    display: flex;
  }

  @media (min-width: 40rem) {
    .pagination {
      flex-direction: row;
    }
  }

  .pagination__summary {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--muted);
    align-self: flex-start;
    display: flex;
  }

  @media (min-width: 40rem) {
    .pagination__summary {
      align-self: center;
    }
  }

  .pagination__content {
    align-items: center;
    gap: var(--spacing);
    align-self: flex-start;
    display: flex;
  }

  @media (min-width: 40rem) {
    .pagination__content {
      align-self: center;
    }
  }

  .pagination__item {
    display: inline-flex;
  }

  .pagination__link {
    isolation: isolate;
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
    transform-origin: center;
    border-radius: calc(var(--radius) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    --tw-outline-style: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    outline-style: none;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: relative;
  }

  @media (min-width: 48rem) {
    .pagination__link {
      width: calc(var(--spacing) * 8);
      height: calc(var(--spacing) * 8);
    }
  }

  .pagination__link {
    cursor: var(--cursor-interactive);
    transition: transform .25s var(--ease-smooth), background-color .1s var(--ease-out), box-shadow .1s var(--ease-out);
    transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .pagination__link:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .pagination__link:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .pagination__link:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .pagination__link:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .pagination__link:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .pagination__link:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .pagination__link {
    --pagination-link-bg: transparent;
    --pagination-link-bg-hover: var(--default-hover);
    --pagination-link-bg-pressed: var(--default-hover);
    --pagination-link-fg: var(--default-foreground);
    background-color: var(--pagination-link-bg);
    color: var(--pagination-link-fg);
  }

  .pagination__link:focus-visible, .pagination__link[data-focus-visible="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: var(--ring-offset-width);
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--background);
    --tw-outline-style: none;
    outline-style: none;
  }

  .pagination__link:disabled, .pagination__link[aria-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  @media (hover: hover) {
    .pagination__link:hover, .pagination__link[data-hovered="true"] {
      background-color: var(--pagination-link-bg-hover);
    }
  }

  .pagination__link:active, .pagination__link[data-pressed="true"] {
    background-color: var(--pagination-link-bg-pressed);
    transform: scale(.97);
  }

  .pagination__link[data-active="true"] {
    --pagination-link-bg: var(--default);
    --pagination-link-bg-hover: var(--default-hover);
    --pagination-link-bg-pressed: var(--default-hover);
  }

  .pagination__ellipsis {
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--muted);
    -webkit-user-select: none;
    user-select: none;
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  @media (min-width: 48rem) {
    .pagination__ellipsis {
      width: calc(var(--spacing) * 8);
      height: calc(var(--spacing) * 8);
    }
  }

  .pagination__link--nav {
    gap: calc(var(--spacing) * 1.5);
    width: auto;
    padding-inline: calc(var(--spacing) * 2.5);
  }

  .pagination--sm .pagination__link {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  @media (min-width: 48rem) {
    .pagination--sm .pagination__link {
      width: calc(var(--spacing) * 7);
      height: calc(var(--spacing) * 7);
    }
  }

  .pagination--sm .pagination__link:active, .pagination--sm .pagination__link[data-pressed="true"] {
    transform: scale(.98);
  }

  .pagination--sm .pagination__link--nav {
    width: auto;
    padding-inline: calc(var(--spacing) * 2);
  }

  .pagination--sm .pagination__ellipsis {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  @media (min-width: 48rem) {
    .pagination--sm .pagination__ellipsis {
      width: calc(var(--spacing) * 7);
      height: calc(var(--spacing) * 7);
    }
  }

  .pagination--sm .pagination__summary {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .pagination--lg .pagination__link {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }

  @media (min-width: 48rem) {
    .pagination--lg .pagination__link {
      width: calc(var(--spacing) * 9);
      height: calc(var(--spacing) * 9);
    }
  }

  .pagination--lg .pagination__link:active, .pagination--lg .pagination__link[data-pressed="true"] {
    transform: scale(.96);
  }

  .pagination--lg .pagination__link--nav {
    width: auto;
    padding-inline: calc(var(--spacing) * 3);
  }

  .pagination--lg .pagination__ellipsis {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }

  @media (min-width: 48rem) {
    .pagination--lg .pagination__ellipsis {
      width: calc(var(--spacing) * 9);
      height: calc(var(--spacing) * 9);
    }
  }

  .pagination--lg .pagination__summary {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }

  .tabs {
    gap: calc(var(--spacing) * 2);
    display: flex;
  }

  .tabs[data-orientation="horizontal"] {
    flex-direction: column;
  }

  .tabs[data-orientation="vertical"] {
    flex-direction: row;
  }

  .tabs__list-container {
    background-color: var(--default);
    border-radius: calc(var(--radius) * 2.5);
    position: relative;
  }

  .tabs__list-container > .tabs__list-container__scroller[data-orientation="vertical"] {
    height: 100%;
  }

  .tabs__list-container > .tabs__list-container__scroll-prev, .tabs__list-container > .tabs__list-container__scroll-next {
    z-index: 2;
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    cursor: var(--cursor-interactive);
    border-style: var(--tw-border-style);
    color: var(--foreground);
    --tw-outline-style: none;
    transition: opacity .15s var(--ease-smooth);
    background-color: #0000;
    border-width: 0;
    border-radius: 3.40282e38px;
    outline-style: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: none;
    position: absolute;
  }

  :is(.tabs__list-container > .tabs__list-container__scroll-prev, .tabs__list-container > .tabs__list-container__scroll-next):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), :is(.tabs__list-container > .tabs__list-container__scroll-prev, .tabs__list-container > .tabs__list-container__scroll-next):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, :is(.tabs__list-container > .tabs__list-container__scroll-prev, .tabs__list-container > .tabs__list-container__scroll-next):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    :is(.tabs__list-container > .tabs__list-container__scroll-prev, .tabs__list-container > .tabs__list-container__scroll-next):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), :is(.tabs__list-container > .tabs__list-container__scroll-prev, .tabs__list-container > .tabs__list-container__scroll-next):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, :is(.tabs__list-container > .tabs__list-container__scroll-prev, .tabs__list-container > .tabs__list-container__scroll-next):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  @media (hover: hover) {
    :is(.tabs__list-container > .tabs__list-container__scroll-prev, .tabs__list-container > .tabs__list-container__scroll-next):hover {
      opacity: .7;
    }
  }

  :is(.tabs__list-container > .tabs__list-container__scroll-prev, .tabs__list-container > .tabs__list-container__scroll-next):focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: var(--ring-offset-width);
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--background);
    --tw-outline-style: none;
    outline-style: none;
  }

  .tabs__list-container:has([data-orientation="horizontal"]) > .tabs__list-container__scroll-prev {
    top: 50%;
    left: var(--spacing);
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .tabs__list-container:has([data-orientation="horizontal"]) > .tabs__list-container__scroll-next {
    top: 50%;
    right: var(--spacing);
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .tabs__list-container:has([data-orientation="vertical"]) > .tabs__list-container__scroll-prev {
    top: var(--spacing);
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    left: 50%;
  }

  .tabs__list-container:has([data-orientation="vertical"]) > .tabs__list-container__scroll-next {
    bottom: var(--spacing);
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    left: 50%;
  }

  .tabs__list-container:has( > :is([data-left-scroll="true"], [data-left-right-scroll="true"], [data-top-scroll="true"], [data-top-bottom-scroll="true"])) > .tabs__list-container__scroll-prev, .tabs__list-container:has( > :is([data-right-scroll="true"], [data-left-right-scroll="true"], [data-bottom-scroll="true"], [data-top-bottom-scroll="true"])) > .tabs__list-container__scroll-next {
    display: inline-flex;
  }

  .tabs__list {
    padding: var(--spacing);
    display: inline-flex;
  }

  .tabs__list[data-orientation="horizontal"] {
    flex-direction: row;
    width: max-content;
    min-width: 100%;
  }

  .tabs__list[data-orientation="vertical"] {
    gap: var(--spacing);
    flex-direction: column;
  }

  .tabs__list[data-orientation="vertical"] .tabs__tab {
    min-width: calc(var(--spacing) * 20);
  }

  .tabs__tab {
    height: calc(var(--spacing) * 8);
    border-radius: calc(var(--radius) * 3);
    width: 100%;
    padding-inline: calc(var(--spacing) * 4);
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--muted);
    --tw-outline-style: none;
    -webkit-tap-highlight-color: transparent;
    z-index: 1;
    cursor: var(--cursor-interactive);
    transition: color .15s var(--ease-smooth), background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out), opacity .15s var(--ease-smooth);
    outline-style: none;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
  }

  .tabs__tab:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .tabs__tab:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .tabs__tab:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .tabs__tab:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .tabs__tab:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .tabs__tab:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .tabs__tab[data-selected="true"] {
    color: var(--segment-foreground);
  }

  .tabs__tab[data-selected="true"] .tabs__separator, .tabs__tab[data-selected="true"] + .tabs__tab .tabs__separator {
    opacity: 0;
  }

  .tabs__tab:disabled, .tabs__tab[data-disabled="true"], .tabs__tab[aria-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  @media (hover: hover) {
    .tabs__tab:not([data-selected="true"]):not([data-disabled="true"]):hover, .tabs__tab[data-hovered="true"]:not([data-selected="true"]):not([data-disabled="true"]) {
      opacity: .7;
    }
  }

  .tabs__tab:focus-visible:not(:focus), .tabs__tab[data-focus-visible="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: var(--ring-offset-width);
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--background);
    --tw-outline-style: none;
    outline-style: none;
  }

  .tabs__separator {
    pointer-events: none;
    border-radius: calc(var(--radius) * .5);
    background-color: var(--muted);
    position: absolute;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .tabs__separator {
      background-color: color-mix(in oklab, var(--muted) 25%, transparent);
    }
  }

  .tabs__separator {
    transition: opacity .15s var(--ease-smooth);
  }

  .tabs__separator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .tabs__separator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .tabs__separator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .tabs__separator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .tabs__separator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .tabs__separator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .tabs__list[data-orientation="horizontal"] .tabs__separator {
    width: 1px;
    height: 50%;
    top: 25%;
    left: 0;
  }

  .tabs__list[data-orientation="vertical"] .tabs__separator {
    width: 90%;
    height: 1px;
    top: 0;
    left: 5%;
  }

  .tabs__panel {
    width: 100%;
    padding: calc(var(--spacing) * 2);
    --tw-outline-style: none;
    outline-style: none;
  }

  .tabs__panel[data-exiting="true"] {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .tabs__panel[data-orientation="horizontal"] {
    margin-top: calc(var(--spacing) * 4);
  }

  .tabs__panel[data-orientation="vertical"] {
    margin-left: calc(var(--spacing) * 4);
  }

  .tabs__indicator {
    border-radius: calc(var(--radius) * 3);
    background-color: var(--segment);
    --tw-shadow: var(--surface-shadow);
    width: 100%;
    height: 100%;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    z-index: -1;
    transition-property: translate, width, height;
    transition-duration: .25s;
    transition-timing-function: var(--ease-out-fluid);
    position: absolute;
    top: 0;
    left: 0;
  }

  .tabs__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .tabs__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .tabs__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .tabs__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .tabs__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .tabs__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .tabs--secondary > .tabs__list-container {
    background-color: #0000;
    border-radius: 0;
  }

  .tabs--secondary > .tabs__list-container .tabs__list {
    padding: 0;
  }

  .tabs--secondary > .tabs__list-container .tabs__separator {
    display: none;
  }

  .tabs--secondary > .tabs__list-container .tabs__tab {
    border-radius: 0;
  }

  .tabs--secondary > .tabs__list-container .tabs__tab[data-selected="true"] {
    color: var(--foreground);
  }

  .tabs--secondary > .tabs__list-container .tabs__indicator {
    background-color: var(--accent);
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    border-radius: 0;
  }

  .tabs--secondary[data-orientation="horizontal"] > .tabs__list-container {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--border);
  }

  .tabs--secondary[data-orientation="horizontal"] > .tabs__list-container .tabs__indicator {
    height: calc(var(--spacing) * .5);
    top: auto;
    bottom: 0;
  }

  .tabs--secondary[data-orientation="vertical"] > .tabs__list-container {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
    border-color: var(--border);
  }

  .tabs--secondary[data-orientation="vertical"] > .tabs__list-container .tabs__indicator {
    height: 100%;
    width: calc(var(--spacing) * .5);
    top: 0;
    left: 0;
  }

  .button {
    isolation: isolate;
    height: calc(var(--spacing) * 10);
    transform-origin: center;
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: calc(var(--radius) * 3);
    width: fit-content;
    padding-inline: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    --tw-outline-style: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    outline-style: none;
    display: inline-flex;
    position: relative;
  }

  @media (min-width: 48rem) {
    .button {
      height: calc(var(--spacing) * 9);
    }
  }

  .button {
    transition: transform .25s var(--ease-smooth), background-color .1s var(--ease-out), box-shadow .1s var(--ease-out);
    transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
    will-change: transform;
  }

  .button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .button {
    cursor: var(--cursor-interactive);
    --button-bg: transparent;
    --button-bg-hover: var(--button-bg);
    --button-bg-pressed: var(--button-bg-hover);
    --button-fg: currentColor;
    background-color: var(--button-bg);
    color: var(--button-fg);
  }

  .button:focus-visible:not(:focus), .button[data-focus-visible="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: var(--ring-offset-width);
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--background);
    --tw-outline-style: none;
    outline-style: none;
  }

  .button:disabled, .button[aria-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  .button[data-pending="true"] {
    pointer-events: none;
  }

  .button:active, .button[data-pressed="true"] {
    background-color: var(--button-bg-pressed);
    transform: scale(.97);
  }

  @media (hover: hover) {
    .button:hover, .button[data-hovered="true"] {
      background-color: var(--button-bg-hover);
    }
  }

  .button svg:not([data-slot="spinner"] svg, [data-slot="link-icon"] svg) {
    pointer-events: none;
    margin-inline: calc(var(--spacing) * -.5);
    margin-block: calc(var(--spacing) * .5);
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
    flex-shrink: 0;
    align-self: center;
  }

  @media (min-width: 40rem) {
    .button svg:not([data-slot="spinner"] svg, [data-slot="link-icon"] svg) {
      margin-block: var(--spacing);
      width: calc(var(--spacing) * 4);
      height: calc(var(--spacing) * 4);
    }
  }

  .button--sm {
    height: calc(var(--spacing) * 9);
    padding-inline: calc(var(--spacing) * 3);
  }

  @media (min-width: 48rem) {
    .button--sm {
      height: calc(var(--spacing) * 8);
    }
  }

  .button--sm svg:not([data-slot="spinner"] svg, [data-slot="link-icon"] svg) {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .button--sm:active, .button--sm[data-pressed="true"] {
    transform: scale(.98);
  }

  .button--lg {
    height: calc(var(--spacing) * 11);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }

  @media (min-width: 48rem) {
    .button--lg {
      height: calc(var(--spacing) * 10);
    }
  }

  .button--lg:active, .button--lg[data-pressed="true"] {
    transform: scale(.96);
  }

  .button--primary {
    --button-bg: var(--accent);
    --button-bg-hover: var(--accent-hover);
    --button-bg-pressed: var(--accent-hover);
    --button-fg: var(--accent-foreground);
  }

  .button--secondary {
    --button-bg: var(--default);
    --button-bg-hover: var(--default-hover);
    --button-bg-pressed: var(--default-hover);
    --button-fg: var(--accent-soft-foreground);
  }

  .button--tertiary {
    --button-bg: var(--default);
    --button-bg-hover: var(--default-hover);
    --button-bg-pressed: var(--default-hover);
  }

  .button--ghost, .button--outline {
    --button-bg: transparent;
    --button-bg-hover: var(--default);
    --button-bg-pressed: var(--default);
    --button-fg: var(--default-foreground);
  }

  .button--outline {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--border);
    --button-bg-hover: var(--default);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .button--outline {
      --button-bg-hover: color-mix(in srgb, var(--default) 60%, transparent);
    }
  }

  .button--danger {
    --button-bg: var(--danger);
    --button-bg-hover: var(--danger-hover);
    --button-bg-pressed: var(--danger-hover);
    --button-fg: var(--danger-foreground);
  }

  .button--danger-soft {
    --button-bg: var(--danger-soft);
    --button-bg-hover: var(--danger-soft-hover);
    --button-bg-pressed: var(--danger-soft-hover);
    --button-fg: var(--danger-soft-foreground);
  }

  .button--icon-only {
    width: calc(var(--spacing) * 10);
    padding: 0;
  }

  @media (min-width: 48rem) {
    .button--icon-only {
      width: calc(var(--spacing) * 9);
    }
  }

  .button--icon-only.button--sm {
    width: calc(var(--spacing) * 9);
  }

  @media (min-width: 48rem) {
    .button--icon-only.button--sm {
      width: calc(var(--spacing) * 8);
    }
  }

  .button--icon-only.button--lg {
    width: calc(var(--spacing) * 11);
  }

  @media (min-width: 48rem) {
    .button--icon-only.button--lg {
      width: calc(var(--spacing) * 10);
    }
  }

  .button--full-width {
    width: 100%;
  }

  .button-group {
    justify-content: center;
    align-items: center;
    gap: 0;
    height: auto;
    display: inline-flex;
  }

  .button-group--horizontal {
    flex-direction: row;
  }

  .button-group--vertical {
    flex-direction: column;
  }

  .button-group .button {
    border-radius: 0;
  }

  .button-group--horizontal .button:first-child {
    border-start-start-radius: calc(var(--radius) * 3);
    border-end-start-radius: calc(var(--radius) * 3);
  }

  .button-group--horizontal .button:last-child {
    border-start-end-radius: calc(var(--radius) * 3);
    border-end-end-radius: calc(var(--radius) * 3);
  }

  .button-group--horizontal .button:first-child:last-child {
    border-radius: calc(var(--radius) * 3);
  }

  .button-group--vertical .button:first-child {
    border-top-left-radius: calc(var(--radius) * 3);
    border-top-right-radius: calc(var(--radius) * 3);
  }

  .button-group--vertical .button:last-child {
    border-bottom-right-radius: calc(var(--radius) * 3);
    border-bottom-left-radius: calc(var(--radius) * 3);
  }

  .button-group--vertical .button:first-child:last-child {
    border-radius: calc(var(--radius) * 3);
  }

  .button-group .button:active, .button-group .button[data-pressed="true"] {
    transform: none;
  }

  .button-group .button:focus-visible:not(:focus), .button-group .button[data-focus-visible="true"] {
    --tw-ring-offset-width: 0px;
    --tw-ring-inset: inset;
  }

  .button-group__separator {
    border-radius: calc(var(--radius) * .5);
    opacity: .15;
    pointer-events: none;
    transition: opacity .15s var(--ease-smooth);
    background-color: currentColor;
    position: absolute;
  }

  .button-group__separator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .button-group__separator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .button-group__separator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .button-group__separator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .button-group__separator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .button-group__separator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .button-group--horizontal .button-group__separator {
    width: 1px;
    height: 50%;
    top: 25%;
    left: -1px;
  }

  .button-group--vertical .button-group__separator {
    width: 50%;
    height: 1px;
    top: -1px;
    left: 25%;
  }

  .button-group--horizontal .button--outline:first-child {
    border-inline-end-style: var(--tw-border-style);
    border-inline-end-width: 0;
  }

  .button-group--horizontal .button--outline:last-child {
    border-inline-start-style: var(--tw-border-style);
    border-inline-start-width: 0;
  }

  .button-group--horizontal .button--outline:not(:first-child):not(:last-child) {
    border-inline-style: var(--tw-border-style);
    border-inline-width: 0;
  }

  .button-group--vertical .button--outline:first-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0;
  }

  .button-group--vertical .button--outline:last-child {
    border-top-style: var(--tw-border-style);
    border-top-width: 0;
  }

  .button-group--vertical .button--outline:not(:first-child):not(:last-child) {
    border-block-style: var(--tw-border-style);
    border-block-width: 0;
  }

  .button-group--full-width {
    width: 100%;
  }

  .toggle-button {
    isolation: isolate;
    height: calc(var(--spacing) * 10);
    transform-origin: center;
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: calc(var(--radius) * 3);
    width: fit-content;
    padding-inline: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    --tw-outline-style: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    outline-style: none;
    display: inline-flex;
    position: relative;
  }

  @media (min-width: 48rem) {
    .toggle-button {
      height: calc(var(--spacing) * 9);
    }
  }

  .toggle-button {
    transition: transform .25s var(--ease-smooth), background-color .1s var(--ease-out), box-shadow .1s var(--ease-out);
    transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .toggle-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .toggle-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .toggle-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .toggle-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .toggle-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .toggle-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .toggle-button {
    cursor: var(--cursor-interactive);
    --toggle-button-bg: var(--default);
    --toggle-button-bg-hover: var(--default-hover);
    --toggle-button-bg-pressed: var(--default-hover);
    --toggle-button-fg: currentColor;
    --toggle-button-bg-selected: var(--accent-soft);
    --toggle-button-bg-selected-hover: var(--accent-soft-hover);
    --toggle-button-bg-selected-pressed: var(--accent-soft-hover);
    --toggle-button-fg-selected: var(--accent-soft-foreground);
    background-color: var(--toggle-button-bg);
    color: var(--toggle-button-fg);
  }

  .toggle-button:focus-visible:not(:focus), .toggle-button[data-focus-visible="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: var(--ring-offset-width);
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--background);
    --tw-outline-style: none;
    outline-style: none;
  }

  .toggle-button:disabled, .toggle-button[aria-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  @media (hover: hover) {
    .toggle-button:hover, .toggle-button[data-hovered="true"] {
      background-color: var(--toggle-button-bg-hover);
    }
  }

  .toggle-button:active, .toggle-button[data-pressed="true"] {
    background-color: var(--toggle-button-bg-pressed);
    transform: scale(.97);
  }

  .toggle-button[data-selected="true"] {
    background-color: var(--toggle-button-bg-selected);
    color: var(--toggle-button-fg-selected);
  }

  @media (hover: hover) {
    .toggle-button[data-selected="true"]:hover, .toggle-button[data-selected="true"][data-hovered="true"] {
      background-color: var(--toggle-button-bg-selected-hover);
    }
  }

  .toggle-button[data-selected="true"]:active, .toggle-button[data-selected="true"][data-pressed="true"] {
    background-color: var(--toggle-button-bg-selected-pressed);
  }

  .toggle-button svg {
    pointer-events: none;
    margin-inline: calc(var(--spacing) * -.5);
    margin-block: calc(var(--spacing) * .5);
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
    flex-shrink: 0;
    align-self: center;
  }

  @media (min-width: 40rem) {
    .toggle-button svg {
      margin-block: var(--spacing);
      width: calc(var(--spacing) * 4);
      height: calc(var(--spacing) * 4);
    }
  }

  .toggle-button--sm {
    height: calc(var(--spacing) * 9);
    padding-inline: calc(var(--spacing) * 3);
  }

  @media (min-width: 48rem) {
    .toggle-button--sm {
      height: calc(var(--spacing) * 8);
    }
  }

  .toggle-button--sm svg {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .toggle-button--sm:active, .toggle-button--sm[data-pressed="true"] {
    transform: scale(.98);
  }

  .toggle-button--lg {
    height: calc(var(--spacing) * 11);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }

  @media (min-width: 48rem) {
    .toggle-button--lg {
      height: calc(var(--spacing) * 10);
    }
  }

  .toggle-button--lg:active, .toggle-button--lg[data-pressed="true"] {
    transform: scale(.96);
  }

  .toggle-button--default {
    --toggle-button-bg: var(--default);
    --toggle-button-bg-hover: var(--default-hover);
    --toggle-button-bg-pressed: var(--default-hover);
  }

  .toggle-button--ghost {
    --toggle-button-bg: transparent;
    --toggle-button-bg-hover: var(--default);
    --toggle-button-bg-pressed: var(--default);
    --toggle-button-fg: var(--default-foreground);
  }

  .toggle-button--icon-only {
    width: calc(var(--spacing) * 10);
    padding: 0;
  }

  @media (min-width: 48rem) {
    .toggle-button--icon-only {
      width: calc(var(--spacing) * 9);
    }
  }

  .toggle-button--icon-only.toggle-button--sm {
    width: calc(var(--spacing) * 9);
  }

  @media (min-width: 48rem) {
    .toggle-button--icon-only.toggle-button--sm {
      width: calc(var(--spacing) * 8);
    }
  }

  .toggle-button--icon-only.toggle-button--lg {
    width: calc(var(--spacing) * 11);
  }

  @media (min-width: 48rem) {
    .toggle-button--icon-only.toggle-button--lg {
      width: calc(var(--spacing) * 10);
    }
  }

  .toggle-button-group {
    justify-content: center;
    align-items: center;
    gap: 0;
    width: fit-content;
    height: auto;
    display: inline-flex;
  }

  .toggle-button-group--horizontal {
    flex-direction: row;
  }

  .toggle-button-group--vertical {
    flex-direction: column;
  }

  .toggle-button-group--full-width {
    width: 100%;
  }

  .toggle-button-group .toggle-button {
    border-radius: 0;
  }

  .toggle-button-group--horizontal .toggle-button:first-child {
    border-start-start-radius: calc(var(--radius) * 3);
    border-end-start-radius: calc(var(--radius) * 3);
  }

  .toggle-button-group--horizontal .toggle-button:last-child {
    border-start-end-radius: calc(var(--radius) * 3);
    border-end-end-radius: calc(var(--radius) * 3);
  }

  .toggle-button-group--horizontal .toggle-button:first-child:last-child {
    border-radius: calc(var(--radius) * 3);
  }

  .toggle-button-group--vertical .toggle-button:first-child {
    border-top-left-radius: calc(var(--radius) * 3);
    border-top-right-radius: calc(var(--radius) * 3);
  }

  .toggle-button-group--vertical .toggle-button:last-child {
    border-bottom-right-radius: calc(var(--radius) * 3);
    border-bottom-left-radius: calc(var(--radius) * 3);
  }

  .toggle-button-group--vertical .toggle-button:first-child:last-child {
    border-radius: calc(var(--radius) * 3);
  }

  .toggle-button-group .toggle-button:active, .toggle-button-group .toggle-button[data-pressed="true"] {
    transform: none;
  }

  .toggle-button-group .toggle-button:focus-visible:not(:focus), .toggle-button-group .toggle-button[data-focus-visible="true"] {
    --tw-ring-offset-width: 0px;
    --tw-ring-inset: inset;
  }

  .toggle-button-group--full-width .toggle-button {
    flex: 1;
  }

  .toggle-button-group__separator {
    border-radius: calc(var(--radius) * .5);
    opacity: .15;
    pointer-events: none;
    transition: opacity .15s var(--ease-smooth);
    background-color: currentColor;
    position: absolute;
  }

  .toggle-button-group__separator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .toggle-button-group__separator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .toggle-button-group__separator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .toggle-button-group__separator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .toggle-button-group__separator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .toggle-button-group__separator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .toggle-button-group--horizontal .toggle-button-group__separator {
    width: 1px;
    height: 50%;
    top: 25%;
    left: -1px;
  }

  .toggle-button-group--vertical .toggle-button-group__separator {
    width: 50%;
    height: 1px;
    top: -1px;
    left: 25%;
  }

  .toggle-button-group--detached {
    gap: var(--spacing);
  }

  .toggle-button-group--detached .toggle-button {
    border-radius: calc(var(--radius) * 3);
  }

  .toggle-button-group--detached .toggle-button-group__separator {
    display: none;
  }

  .toolbar {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    grid-auto-flow: column;
    width: fit-content;
    display: grid;
  }

  .toolbar .separator--vertical {
    align-self: center;
    height: 50%;
  }

  .toolbar .separator--horizontal {
    justify-content: center;
    justify-self: center;
    width: 50%;
  }

  .toolbar--vertical {
    grid-auto-flow: row;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .toolbar--vertical .button-group {
    justify-content: flex-start;
  }

  .toolbar--attached {
    border-radius: calc(var(--radius) * 3);
    background-color: var(--surface);
    padding: var(--spacing);
    --tw-shadow: var(--overlay-shadow);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .dropdown {
    gap: var(--spacing);
    flex-direction: column;
    display: flex;
  }

  .dropdown__trigger {
    --tw-outline-style: none;
    transition: transform .25s var(--ease-out-quart), background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out);
    transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
    outline-style: none;
    display: inline-block;
  }

  .dropdown__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .dropdown__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .dropdown__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .dropdown__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .dropdown__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .dropdown__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .dropdown__trigger {
    cursor: var(--cursor-interactive);
  }

  .dropdown__trigger:focus-visible:not(:focus), .dropdown__trigger[data-focus-visible="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: var(--ring-offset-width);
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--background);
    --tw-outline-style: none;
    outline-style: none;
  }

  .dropdown__trigger:disabled, .dropdown__trigger[aria-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  .dropdown__trigger[data-pending="true"] {
    pointer-events: none;
  }

  .dropdown__trigger:active, .dropdown__trigger[data-pressed="true"] {
    transform: scale(.97);
  }

  .dropdown__popover {
    max-width: 48svw;
    transform-origin: var(--trigger-anchor-point);
    scroll-padding-block: var(--spacing);
    scrollbar-width: var(--scrollbar-width);
    scrollbar-color: var(--scrollbar-color);
    scrollbar-gutter: var(--scrollbar-gutter);
    overscroll-behavior: contain;
    background-color: var(--overlay);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    will-change: transform;
    padding: 0;
    overflow-y: auto;
  }

  @media (min-width: 48rem) {
    .dropdown__popover {
      min-width: calc(var(--spacing) * 55);
    }
  }

  .dropdown__popover {
    border-radius: min(32px, var(--radius-3xl));
    box-shadow: var(--shadow-overlay);
  }

  .dropdown__popover:focus-visible:not(:focus), .dropdown__popover[data-focus-visible="true"] {
    --tw-outline-style: none;
    outline-style: none;
  }

  .dropdown__popover[data-entering="true"] {
    animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
    --tw-duration: .15s;
    --tw-ease: ease;
    --tw-enter-opacity: 0;
    --tw-enter-scale: .9;
    transition-duration: .15s;
    transition-timing-function: ease;
  }

  .dropdown__popover[data-entering="true"][data-placement="top"] {
    --tw-enter-translate-y: calc(1*var(--spacing));
  }

  .dropdown__popover[data-entering="true"][data-placement="bottom"] {
    --tw-enter-translate-y: calc(1*var(--spacing)*-1);
  }

  .dropdown__popover[data-entering="true"][data-placement="left"] {
    --tw-enter-translate-x: calc(1*var(--spacing));
  }

  .dropdown__popover[data-entering="true"][data-placement="right"] {
    --tw-enter-translate-x: calc(1*var(--spacing)*-1);
  }

  .dropdown__popover[data-exiting="true"] {
    animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
    --tw-duration: .1s;
    --tw-ease: ease;
    --tw-exit-scale: .95;
    --tw-exit-opacity: 0;
    transition-duration: .1s;
    transition-timing-function: ease;
  }

  .dropdown__popover[data-exiting="true"], .dropdown__popover[data-entering="true"] {
    transition-property: opacity, transform;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    will-change: opacity,transform;
  }

  .dropdown__popover [data-slot="popover-overlay-arrow"] {
    fill: var(--overlay);
  }

  .dropdown__popover[data-placement="bottom"] [data-slot="popover-overlay-arrow"] {
    rotate: 180deg;
  }

  .dropdown__popover[data-placement="left"] [data-slot="popover-overlay-arrow"] {
    rotate: -90deg;
  }

  .dropdown__popover[data-placement="right"] [data-slot="popover-overlay-arrow"] {
    rotate: 90deg;
  }

  .dropdown__popover [data-slot="dropdown-menu"] {
    padding: calc(var(--spacing) * 1.5);
    --tw-outline-style: none;
    outline-style: none;
  }

  .dropdown__popover [data-slot="menu-item"] {
    padding-inline: calc(var(--spacing) * 2.5);
  }

  .dropdown__menu {
    gap: calc(var(--spacing) * .5);
    width: 100%;
    padding: var(--spacing);
    flex-direction: column;
    display: flex;
    position: relative;
    overflow: clip;
  }

  .dropdown__menu [data-slot="separator"] {
    width: 94%;
    margin-left: 3%;
  }

  .list-box-item {
    min-height: calc(var(--spacing) * 9);
    justify-content: flex-start;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: calc(var(--radius) * 2);
    width: 100%;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    --tw-outline-style: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform .25s var(--ease-out-quart), box-shadow .15s var(--ease-out);
    outline-style: none;
    display: flex;
    position: relative;
  }

  .list-box-item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .list-box-item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .list-box-item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .list-box-item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .list-box-item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .list-box-item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .list-box-item {
    cursor: var(--cursor-interactive);
  }

  .list-box-item [data-slot="label"] {
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    width: fit-content;
  }

  .list-box-item [data-slot="description"] {
    pointer-events: none;
    text-wrap: wrap;
    -webkit-user-select: none;
    user-select: none;
  }

  .list-box-item:has(.list-box-item__indicator) {
    padding-inline-end: calc(var(--spacing) * 7);
  }

  .list-box-item:focus-visible:not(:focus), .list-box-item[data-focus-visible="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: var(--ring-offset-width);
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--background);
    --tw-outline-style: none;
    outline-style: none;
  }

  .list-box-item:active, .list-box-item[data-pressed="true"] {
    transform: scale(.98);
  }

  @media (hover: hover) {
    .list-box-item:hover, .list-box-item[data-hovered="true"] {
      background-color: var(--default);
    }
  }

  .list-box-item[data-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  .list-box-item__indicator {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    color: var(--default-foreground);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .25s;
    inset-inline-end: calc(var(--spacing) * 2);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    transition-duration: .25s;
    display: flex;
    position: absolute;
    top: 50%;
  }

  .list-box-item__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .list-box-item__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .list-box-item__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .list-box-item__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .list-box-item__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .list-box-item__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .list-box-item__indicator [data-slot="list-box-item-indicator--checkmark"] {
    width: calc(var(--spacing) * 2.5);
    height: calc(var(--spacing) * 2.5);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .3s;
    transition-duration: .3s;
  }

  .list-box-item__indicator [data-slot="list-box-item-indicator--checkmark"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .list-box-item__indicator [data-slot="list-box-item-indicator--checkmark"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .list-box-item__indicator [data-slot="list-box-item-indicator--checkmark"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .list-box-item__indicator [data-slot="list-box-item-indicator--checkmark"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .list-box-item__indicator [data-slot="list-box-item-indicator--checkmark"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .list-box-item__indicator [data-slot="list-box-item-indicator--checkmark"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .list-box-item__indicator .list-box-item[aria-selected="true"] [data-slot="list-box-item-indicator--checkmark"], .list-box-item__indicator .list-box-item[data-selected="true"] [data-slot="list-box-item-indicator--checkmark"] {
    transition: stroke-dashoffset .25s linear;
  }

  :is(.list-box-item__indicator .list-box-item[aria-selected="true"] [data-slot="list-box-item-indicator--checkmark"], .list-box-item__indicator .list-box-item[data-selected="true"] [data-slot="list-box-item-indicator--checkmark"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), :is(.list-box-item__indicator .list-box-item[aria-selected="true"] [data-slot="list-box-item-indicator--checkmark"], .list-box-item__indicator .list-box-item[data-selected="true"] [data-slot="list-box-item-indicator--checkmark"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, :is(.list-box-item__indicator .list-box-item[aria-selected="true"] [data-slot="list-box-item-indicator--checkmark"], .list-box-item__indicator .list-box-item[data-selected="true"] [data-slot="list-box-item-indicator--checkmark"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    :is(.list-box-item__indicator .list-box-item[aria-selected="true"] [data-slot="list-box-item-indicator--checkmark"], .list-box-item__indicator .list-box-item[data-selected="true"] [data-slot="list-box-item-indicator--checkmark"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), :is(.list-box-item__indicator .list-box-item[aria-selected="true"] [data-slot="list-box-item-indicator--checkmark"], .list-box-item__indicator .list-box-item[data-selected="true"] [data-slot="list-box-item-indicator--checkmark"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, :is(.list-box-item__indicator .list-box-item[aria-selected="true"] [data-slot="list-box-item-indicator--checkmark"], .list-box-item__indicator .list-box-item[data-selected="true"] [data-slot="list-box-item-indicator--checkmark"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .list-box-item--danger .list-box-item__indicator, .list-box-item--danger [data-slot="label"] {
    color: var(--danger);
  }

  .list-box-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    display: flex;
  }

  .list-box {
    width: 100%;
    padding: var(--spacing);
    position: relative;
    overflow: clip;
  }

  .list-box > * + * {
    margin-top: var(--spacing);
  }

  .list-box [data-slot="separator"][data-orientation="horizontal"] {
    width: 94%;
    margin-left: 3%;
  }

  .menu-item {
    min-height: calc(var(--spacing) * 9);
    justify-content: flex-start;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: calc(var(--radius) * 2);
    width: 100%;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    --tw-outline-style: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform .25s var(--ease-out-quart), box-shadow .15s var(--ease-out);
    will-change: transform;
    outline-style: none;
    display: flex;
    position: relative;
  }

  .menu-item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .menu-item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .menu-item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .menu-item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .menu-item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .menu-item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .menu-item {
    cursor: var(--cursor-interactive);
  }

  .menu-item [data-slot="label"] {
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    width: fit-content;
  }

  .menu-item [data-slot="description"] {
    pointer-events: none;
    text-wrap: wrap;
    -webkit-user-select: none;
    user-select: none;
  }

  .menu-item [data-slot="submenu-indicator"] svg {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
  }

  .menu-item:has(.menu-item__indicator) {
    padding-inline-start: calc(var(--spacing) * 7);
  }

  .menu-item[data-has-submenu="true"]:has(.menu-item__indicator) {
    padding-inline-start: calc(var(--spacing) * 2);
    padding-inline-end: calc(var(--spacing) * 7);
  }

  .menu-item:focus-visible:not(:focus), .menu-item[data-focus-visible="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: var(--ring-offset-width);
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--background);
    --tw-outline-style: none;
    outline-style: none;
  }

  .menu-item:active, .menu-item[data-pressed="true"] {
    transform: scale(.98);
  }

  @media (hover: hover) {
    .menu-item:hover, .menu-item[data-hovered="true"] {
      background-color: var(--default);
    }
  }

  :is(.menu-item[aria-checked="true"], .menu-item[aria-selected="true"], .menu-item[data-selected="true"]) [data-slot="menu-item-indicator--checkmark"] {
    transition: stroke-dashoffset .1s linear;
  }

  :is(.menu-item[aria-checked="true"], .menu-item[aria-selected="true"], .menu-item[data-selected="true"]) [data-slot="menu-item-indicator--checkmark"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), :is(.menu-item[aria-checked="true"], .menu-item[aria-selected="true"], .menu-item[data-selected="true"]) [data-slot="menu-item-indicator--checkmark"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, :is(.menu-item[aria-checked="true"], .menu-item[aria-selected="true"], .menu-item[data-selected="true"]) [data-slot="menu-item-indicator--checkmark"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    :is(.menu-item[aria-checked="true"], .menu-item[aria-selected="true"], .menu-item[data-selected="true"]) [data-slot="menu-item-indicator--checkmark"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), :is(.menu-item[aria-checked="true"], .menu-item[aria-selected="true"], .menu-item[data-selected="true"]) [data-slot="menu-item-indicator--checkmark"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, :is(.menu-item[aria-checked="true"], .menu-item[aria-selected="true"], .menu-item[data-selected="true"]) [data-slot="menu-item-indicator--checkmark"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  :is(.menu-item[aria-checked="true"], .menu-item[aria-selected="true"], .menu-item[data-selected="true"]) [data-slot="menu-item-indicator--dot"] {
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
    --tw-scale-z: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
    opacity: 1;
  }

  .menu-item[data-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  .menu-item__indicator {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    color: var(--muted);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .25s;
    inset-inline-start: calc(var(--spacing) * 2);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    transition-duration: .25s;
    display: flex;
    position: absolute;
    top: 50%;
  }

  .menu-item__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .menu-item__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .menu-item__indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .menu-item__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .menu-item__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .menu-item__indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .menu-item[data-has-submenu="true"] .menu-item__indicator {
    inset-inline-start: auto;
    inset-inline-end: calc(var(--spacing) * 2);
  }

  .menu-item__indicator [data-slot="menu-item-indicator--checkmark"] {
    width: calc(var(--spacing) * 2.5);
    height: calc(var(--spacing) * 2.5);
  }

  .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--checkmark"]) {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .3s;
    transition-duration: .3s;
  }

  .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--checkmark"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--checkmark"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--checkmark"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--checkmark"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--checkmark"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--checkmark"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .menu-item__indicator [data-slot="menu-item-indicator--dot"] {
    width: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 2);
  }

  .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--dot"]) {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .25s;
    transition-duration: .25s;
  }

  .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--dot"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--dot"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--dot"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--dot"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--dot"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .menu-item[data-selection-mode="multiple"] :is(.menu-item__indicator [data-slot="menu-item-indicator--dot"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .menu-item__indicator [data-slot="menu-item-indicator--dot"] {
    --tw-scale-x: 70%;
    --tw-scale-y: 70%;
    --tw-scale-z: 70%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
    opacity: 0;
  }

  .menu-item__indicator--submenu {
    color: var(--muted);
  }

  .menu-item__indicator--submenu svg {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }

  .menu-item--danger .menu-item__indicator, .menu-item--danger [data-slot="label"] {
    color: var(--danger);
  }

  .menu-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    display: flex;
  }

  .menu {
    gap: var(--spacing);
    width: 100%;
    padding: var(--spacing);
    flex-direction: column;
    display: flex;
    position: relative;
    overflow: clip;
  }

  .menu [data-slot="separator"] {
    width: 94%;
    margin-left: 3%;
  }

  .tag-group {
    gap: var(--spacing);
    flex-direction: column;
    display: flex;
    position: relative;
  }

  .tag-group__list {
    gap: calc(var(--spacing) * 1.5);
    flex-wrap: wrap;
    display: flex;
    position: relative;
  }

  .tag-group [slot="description"], .tag-group [data-slot="description"], .tag-group [slot="errorMessage"], .tag-group [data-slot="error-message"] {
    padding: var(--spacing);
  }

  .tag {
    --optical-offset: .031em;
    align-items: center;
    gap: var(--spacing);
    border-radius: calc(var(--radius) * 1.5);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: color .1s var(--ease-smooth), scale .1s var(--ease-smooth), opacity .1s var(--ease-smooth), background-color .1s var(--ease-smooth), box-shadow .1s var(--ease-out);
    transform-origin: center;
    transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
    display: inline-flex;
    position: relative;
  }

  .tag:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .tag:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .tag:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .tag:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .tag:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .tag:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .tag {
    cursor: var(--cursor-interactive);
  }

  .tag svg {
    pointer-events: none;
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
    color: currentColor;
    flex-shrink: 0;
    align-self: center;
  }

  .tag:is([data-disabled="true"], [aria-disabled="true"]) {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  .tag:is(:focus-visible, [data-focus-visible]) {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: var(--ring-offset-width);
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--background);
    --tw-outline-style: none;
    outline-style: none;
  }

  .tag:is([data-selected="true"], [aria-selected="true"]) {
    background-color: var(--accent-soft);
    color: var(--accent-soft-foreground);
  }

  @media (hover: hover) {
    .tag:is([data-selected="true"], [aria-selected="true"]):is(:hover, [data-hovered="true"]) {
      background-color: var(--accent-soft-hover);
    }
  }

  .tag--sm {
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * .5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .tag--md {
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .tag--lg {
    border-radius: calc(var(--radius) * 2);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .tag--default {
    background-color: var(--default);
    color: var(--default-foreground);
  }

  @media (hover: hover) {
    .tag--default:is(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) {
      background-color: var(--default-hover);
    }
  }

  .tag--surface {
    background-color: var(--surface);
    color: var(--surface-foreground);
  }

  @media (hover: hover) {
    .tag--surface:is(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) {
      background-color: var(--surface-hover);
    }
  }

  .tag__remove-button {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
    color: inherit;
  }

  .tag__remove-button svg {
    width: inherit;
    height: inherit;
    color: currentColor;
    flex-shrink: 0;
    align-self: center;
  }

  .color-area {
    width: 100%;
    max-width: calc(var(--spacing) * 56);
    border-radius: calc(var(--radius) * 2);
    -webkit-tap-highlight-color: transparent;
    aspect-ratio: 1;
    background: var(--color-area-background);
    flex-shrink: 0;
    position: relative;
    box-shadow: inset 0 0 0 1px #0000001a;
  }

  .color-area[data-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  .color-area--show-dots:after {
    content: "";
    pointer-events: none;
    border-radius: inherit;
    background-image: radial-gradient(circle, #fff3 1px, #0000 1px);
    background-size: 8px 8px;
    position: absolute;
    inset: 0;
  }

  .color-area__thumb {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    border-radius: calc(var(--radius) * 1.5);
    will-change: width,height;
    background-color: var(--color-area-thumb-color);
    transition: width .15s var(--ease-out), height .15s var(--ease-out);
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px #0000001a, inset 0 0 0 1px #0000001a;
  }

  .color-area__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .color-area__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .color-area__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .color-area__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .color-area__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .color-area__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .color-area__thumb[data-focus-visible="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: var(--ring-offset-width);
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--background);
    --tw-outline-style: none;
    outline-style: none;
  }

  .color-area__thumb[data-dragging="true"] {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }

  .color-area__thumb[data-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  .color-picker {
    display: inline-flex;
  }

  .color-picker__trigger {
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: calc(var(--radius) * .5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    -webkit-tap-highlight-color: transparent;
    cursor: var(--cursor-interactive);
    transition: background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out);
    display: inline-flex;
  }

  .color-picker__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .color-picker__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .color-picker__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .color-picker__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .color-picker__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .color-picker__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .color-picker__trigger [data-slot="label"] {
    cursor: var(--cursor-interactive);
  }

  .color-picker__trigger:focus-visible:not(:focus), .color-picker__trigger[data-focus-visible="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: var(--ring-offset-width);
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--background);
    --tw-outline-style: none;
    outline-style: none;
  }

  .color-picker__trigger:disabled, .color-picker__trigger[data-disabled="true"], .color-picker__trigger[aria-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  .color-picker__popover {
    min-width: calc(var(--spacing) * 62);
    transform-origin: var(--trigger-anchor-point);
    scrollbar-color: auto;
    scrollbar-gutter: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overscroll-behavior: contain;
    background-color: var(--overlay);
    padding-inline: calc(var(--spacing) * 2);
    padding-top: calc(var(--spacing) * 2);
    padding-bottom: calc(var(--spacing) * 3);
    box-shadow: var(--shadow-overlay);
    border-radius: min(32px, calc(var(--radius) * 2.5));
    gap: calc(var(--spacing) * 3);
    flex-direction: column;
    display: flex;
    overflow: hidden auto;
  }

  .color-picker__popover:focus-visible:not(:focus), .color-picker__popover[data-focus-visible="true"] {
    --tw-outline-style: none;
    outline-style: none;
  }

  .color-picker__popover[data-entering="true"] {
    animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
    --tw-duration: .15s;
    --tw-ease: ease;
    --tw-enter-opacity: 0;
    --tw-enter-scale: .95;
    transition-duration: .15s;
    transition-timing-function: ease;
  }

  .color-picker__popover[data-entering="true"][data-placement^="top"] {
    --tw-enter-translate-y: calc(1*var(--spacing));
  }

  .color-picker__popover[data-entering="true"][data-placement^="bottom"] {
    --tw-enter-translate-y: calc(1*var(--spacing)*-1);
  }

  .color-picker__popover[data-entering="true"][data-placement^="left"] {
    --tw-enter-translate-x: calc(1*var(--spacing));
  }

  .color-picker__popover[data-entering="true"][data-placement^="right"] {
    --tw-enter-translate-x: calc(1*var(--spacing)*-1);
  }

  .color-picker__popover[data-exiting="true"] {
    animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
    --tw-duration: .1s;
    --tw-ease: ease;
    --tw-exit-scale: .95;
    --tw-exit-opacity: 0;
    transition-duration: .1s;
    transition-timing-function: ease;
  }

  .color-picker__popover[data-exiting="true"], .color-picker__popover[data-entering="true"] {
    transition-property: opacity, transform;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    will-change: opacity,transform;
  }

  .color-slider {
    gap: var(--spacing);
    grid-template: "label output"
                   "track track"
                   / 1fr auto;
    width: 100%;
    display: grid;
  }

  .color-slider:not(:has([data-slot="label"])):not(:has(.color-slider__output)) {
    grid-template: "track"
    / 1fr;
    gap: 0;
  }

  .color-slider:has([data-slot="label"]):not(:has(.color-slider__output)) {
    grid-template-columns: 1fr;
    grid-template-areas: "label"
                         "track";
  }

  .color-slider:not(:has([data-slot="label"])):has(.color-slider__output) {
    grid-template-columns: 1fr;
    grid-template-areas: "output"
                         "track";
  }

  .color-slider:not(:has([data-slot="label"])):has(.color-slider__output) .color-slider__output {
    justify-self: end;
  }

  .color-slider [data-slot="label"] {
    width: fit-content;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    grid-area: label;
  }

  .color-slider .color-slider__output {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
    grid-area: output;
  }

  .color-slider .color-slider__track {
    border-radius: calc(var(--radius) * 2);
    grid-area: track;
    position: relative;
  }

  .color-slider .color-slider__track:before, .color-slider .color-slider__track:after {
    content: "";
    z-index: 0;
    pointer-events: none;
    position: absolute;
  }

  .color-slider .color-slider__thumb {
    cursor: grab;
    border-radius: calc(var(--radius) * 2);
    -webkit-tap-highlight-color: transparent;
    border-style: var(--tw-border-style);
    border-width: 3px;
    border-color: var(--color-white);
    --tw-shadow: var(--overlay-shadow);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    z-index: 1;
    transition: transform .25s var(--ease-out), box-shadow .15s var(--ease-out);
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
  }

  .color-slider .color-slider__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .color-slider .color-slider__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .color-slider .color-slider__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .color-slider .color-slider__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .color-slider .color-slider__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .color-slider .color-slider__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .color-slider .color-slider__thumb[data-dragging="true"] {
    cursor: grabbing;
  }

  .color-slider .color-slider__thumb[data-focus-visible="true"] {
    z-index: 10;
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: var(--ring-offset-width);
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--background);
    --tw-outline-style: none;
    outline-style: none;
  }

  .color-slider .color-slider__thumb[data-disabled="true"] {
    cursor: default;
    background-color: var(--default);
  }

  .color-slider:disabled, .color-slider[data-disabled="true"], .color-slider[aria-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  :is(.color-slider:disabled, .color-slider[data-disabled="true"], .color-slider[aria-disabled="true"]) [data-slot="label"] {
    opacity: 1;
  }

  .color-slider[data-orientation="horizontal"] {
    flex-direction: column;
  }

  .color-slider[data-orientation="horizontal"] .color-slider__track {
    height: calc(var(--spacing) * 5);
    border-radius: 0;
    justify-self: center;
    width: calc(100% - 1.25rem);
    box-shadow: inset 0 1px #0000001a, inset 0 -1px #0000001a;
  }

  .color-slider[data-orientation="horizontal"] .color-slider__track:before, .color-slider[data-orientation="horizontal"] .color-slider__track:after {
    width: .625rem;
    height: 100%;
    top: 0;
  }

  .color-slider[data-orientation="horizontal"] .color-slider__track:before {
    border-top-left-radius: calc(var(--radius) * 2);
    border-bottom-left-radius: calc(var(--radius) * 2);
    background: linear-gradient(var(--track-start-color, transparent)), repeating-conic-gradient(#efefef 0% 25%, #f7f7f7 0% 50%) 50% / 16px 16px;
    left: -.625rem;
    box-shadow: inset 1px 0 #0000001a, inset 0 1px #0000001a, inset 0 -1px #0000001a;
  }

  .color-slider[data-orientation="horizontal"] .color-slider__track:after {
    border-top-right-radius: calc(var(--radius) * 2);
    border-bottom-right-radius: calc(var(--radius) * 2);
    background-color: var(--track-end-color, transparent);
    right: -.625rem;
    box-shadow: inset -1px 0 #0000001a, inset 0 1px #0000001a, inset 0 -1px #0000001a;
  }

  .color-slider[data-orientation="horizontal"] .color-slider__thumb {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    top: 50%;
  }

  .color-slider[data-orientation="vertical"] {
    gap: calc(var(--spacing) * 2);
    flex-direction: row;
    grid-template: "output"
                   "track" 1fr
                   "label"
                   / 1fr;
    place-items: center;
    height: 100%;
  }

  .color-slider[data-orientation="vertical"]:not(:has([data-slot="label"])):not(:has(.color-slider__output)) {
    grid-template-rows: 1fr;
    grid-template-areas: "track";
    gap: 0;
  }

  .color-slider[data-orientation="vertical"]:has([data-slot="label"]):not(:has(.color-slider__output)) {
    grid-template-rows: 1fr auto;
    grid-template-areas: "track"
                         "label";
  }

  .color-slider[data-orientation="vertical"]:not(:has([data-slot="label"])):has(.color-slider__output) {
    grid-template-rows: auto 1fr;
    grid-template-areas: "output"
                         "track";
  }

  .color-slider[data-orientation="vertical"] .color-slider__output, .color-slider[data-orientation="vertical"] [data-slot="label"] {
    text-align: center;
  }

  .color-slider[data-orientation="vertical"] .color-slider__track {
    width: calc(var(--spacing) * 5);
    border-radius: 0;
    justify-self: center;
    height: calc(100% - 1.25rem);
    box-shadow: inset 1px 0 #0000001a, inset -1px 0 #0000001a;
  }

  .color-slider[data-orientation="vertical"] .color-slider__track:before, .color-slider[data-orientation="vertical"] .color-slider__track:after {
    width: 100%;
    height: .625rem;
    left: 0;
  }

  .color-slider[data-orientation="vertical"] .color-slider__track:before {
    background: linear-gradient(var(--track-start-color, transparent)), repeating-conic-gradient(#efefef 0% 25%, #f7f7f7 0% 50%) 50% / 16px 16px;
    border-bottom-right-radius: 999px;
    border-bottom-left-radius: 999px;
    bottom: -.625rem;
    box-shadow: inset 1px 0 #0000001a, inset -1px 0 #0000001a, inset 0 -1px #0000001a;
  }

  .color-slider[data-orientation="vertical"] .color-slider__track:after {
    background-color: var(--track-end-color, transparent);
    border-top-left-radius: 999px;
    border-top-right-radius: 999px;
    top: -.625rem;
    box-shadow: inset 1px 0 #0000001a, inset -1px 0 #0000001a, inset 0 1px #0000001a;
  }

  .color-slider[data-orientation="vertical"] .color-slider__thumb {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    left: 50%;
  }

  .color-swatch {
    box-sizing: border-box;
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
    background: linear-gradient(var(--color-swatch-current), var(--color-swatch-current)), repeating-conic-gradient(#efefef 0% 25%, #f7f7f7 0% 50%) 50% / 16px 16px;
    flex-shrink: 0;
    position: relative;
    box-shadow: inset 0 0 0 1px #0000001a;
  }

  .color-swatch--circle {
    border-radius: calc(var(--radius) * 2);
  }

  .color-swatch--square {
    border-radius: calc(var(--radius) * .75);
  }

  .color-swatch--xs {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .color-swatch--xs.color-swatch--circle {
    border-radius: calc(var(--radius) * 1);
  }

  .color-swatch--sm {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }

  .color-swatch--sm.color-swatch--circle {
    border-radius: calc(var(--radius) * 1.5);
  }

  .color-swatch--lg {
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
  }

  .color-swatch--lg.color-swatch--circle {
    border-radius: calc(var(--radius) * 3);
  }

  .color-swatch--xl {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
  }

  .color-swatch--xl.color-swatch--circle {
    border-radius: calc(var(--radius) * 3);
  }

  .color-swatch-picker {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    flex-wrap: wrap;
    display: flex;
  }

  .color-swatch-picker__item {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
    border-radius: calc(var(--radius) * 2);
    border-style: var(--tw-border-style);
    --tw-outline-style: none;
    -webkit-tap-highlight-color: transparent;
    cursor: var(--cursor-interactive);
    transition: border-color .1s var(--ease-out), box-shadow .1s var(--ease-out);
    transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
    border-width: 2px;
    border-color: #0000;
    outline-style: none;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
  }

  .color-swatch-picker__item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .color-swatch-picker__item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .color-swatch-picker__item:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .color-swatch-picker__item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .color-swatch-picker__item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .color-swatch-picker__item:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .color-swatch-picker__item:focus-visible, .color-swatch-picker__item[data-focus-visible="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: var(--ring-offset-width);
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--background);
    --tw-outline-style: none;
    outline-style: none;
  }

  .color-swatch-picker__item[data-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  .color-swatch-picker__item[data-selected="true"] {
    border-color: var(--color-swatch-current);
    box-shadow: var(--field-shadow);
  }

  .color-swatch-picker__item[data-selected="true"] .color-swatch-picker__swatch {
    transform: scale(.77);
  }

  .color-swatch-picker__swatch {
    border-radius: inherit;
    width: 100%;
    height: 100%;
    transition: transform .1s var(--ease-out);
    transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
    display: block;
  }

  .color-swatch-picker__swatch:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .color-swatch-picker__swatch:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .color-swatch-picker__swatch:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .color-swatch-picker__swatch:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .color-swatch-picker__swatch:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .color-swatch-picker__swatch:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  @media (hover: hover) {
    .color-swatch-picker__swatch:hover {
      transform: scale(1.1);
    }
  }

  .color-swatch-picker__indicator {
    pointer-events: none;
    z-index: 10;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    inset: 0;
  }

  .color-swatch-picker__indicator > * {
    width: 33.3333%;
    height: 33.3333%;
    color: var(--color-white);
    transition: transform .15s var(--ease-out);
    transform: scale(0) translateZ(0);
  }

  .color-swatch-picker__indicator > :is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .color-swatch-picker__indicator > :is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .color-swatch-picker__indicator > :is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .color-swatch-picker__indicator > :not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .color-swatch-picker__indicator > :not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .color-swatch-picker__indicator > :not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .color-swatch-picker__indicator[data-light-color="true"] .color-swatch-picker__indicator > * {
    color: var(--color-black);
  }

  .color-swatch-picker__item[data-selected="true"] .color-swatch-picker__indicator > * {
    transform: scale(1) translateZ(0);
  }

  .color-swatch-picker--stack {
    flex-direction: column;
  }

  .color-swatch-picker--xs .color-swatch-picker__item {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    border-radius: calc(var(--radius) * 1);
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .color-swatch-picker--sm .color-swatch-picker__item {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
    border-radius: calc(var(--radius) * 1.5);
    border-style: var(--tw-border-style);
    border-width: 2px;
  }

  .color-swatch-picker--lg .color-swatch-picker__item {
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
    border-radius: calc(var(--radius) * 3);
    border-style: var(--tw-border-style);
    border-width: 3px;
  }

  .color-swatch-picker--xl .color-swatch-picker__item {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
    border-radius: calc(var(--radius) * 3);
    border-style: var(--tw-border-style);
    border-width: 3px;
  }

  .color-swatch-picker--square .color-swatch-picker__item {
    border-radius: calc(var(--radius) * 1.5);
  }

  .color-swatch-picker--square .color-swatch-picker__item .color-swatch-picker__swatch, .color-swatch-picker--square .color-swatch-picker__item[data-selected="true"] .color-swatch-picker__swatch {
    border-radius: calc(var(--radius) * 1);
  }

  .color-swatch-picker--square.color-swatch-picker--xs .color-swatch-picker__item, .color-swatch-picker--square.color-swatch-picker--xs .color-swatch-picker__item .color-swatch-picker__swatch, .color-swatch-picker--square.color-swatch-picker--xs .color-swatch-picker__item[data-selected="true"] .color-swatch-picker__swatch {
    border-radius: calc(var(--radius) * .75);
  }

  .color-swatch-picker--square.color-swatch-picker--sm .color-swatch-picker__item, .color-swatch-picker--square.color-swatch-picker--sm .color-swatch-picker__item .color-swatch-picker__swatch {
    border-radius: calc(var(--radius) * 1);
  }

  .color-swatch-picker--square.color-swatch-picker--sm .color-swatch-picker__item[data-selected="true"] .color-swatch-picker__swatch {
    border-radius: calc(var(--radius) * .75);
  }

  .color-swatch-picker--square.color-swatch-picker--lg .color-swatch-picker__item {
    border-radius: calc(var(--radius) * 1.5);
  }

  .color-swatch-picker--square.color-swatch-picker--lg .color-swatch-picker__item .color-swatch-picker__swatch, .color-swatch-picker--square.color-swatch-picker--lg .color-swatch-picker__item[data-selected="true"] .color-swatch-picker__swatch {
    border-radius: calc(var(--radius) * 1);
  }

  .color-swatch-picker--square.color-swatch-picker--xl .color-swatch-picker__item {
    border-radius: calc(var(--radius) * 1.5);
  }

  .color-swatch-picker--square.color-swatch-picker--xl .color-swatch-picker__item .color-swatch-picker__swatch, .color-swatch-picker--square.color-swatch-picker--xl .color-swatch-picker__item[data-selected="true"] .color-swatch-picker__swatch {
    border-radius: calc(var(--radius) * 1);
  }

  .color-input-group {
    height: calc(var(--spacing) * 9);
    border-radius: var(--field-radius, calc(var(--radius) * 1.5));
    border-style: var(--tw-border-style);
    background-color: var(--field-background, var(--default));
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--field-foreground, var(--foreground));
    --tw-shadow: var(--field-shadow);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-outline-style: none;
    border-width: 1px;
    border-width: var(--border-width-field);
    border-color: var(--field-border);
    transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out);
    outline-style: none;
    align-items: center;
    display: inline-flex;
    overflow: hidden;
  }

  .color-input-group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .color-input-group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .color-input-group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .color-input-group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .color-input-group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .color-input-group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  @media (hover: hover) {
    .color-input-group:hover:not(:focus-within), .color-input-group[data-hovered="true"]:not([data-focus-within="true"]) {
      background-color: var(--field-hover);
      border-color: var(--field-border-hover);
    }
  }

  .color-input-group[data-focus-within="true"], .color-input-group:focus-within {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-outline-style: none;
    outline-style: none;
  }

  .color-input-group[data-invalid="true"] {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
    outline-color: var(--danger);
    --tw-outline-style: solid;
    --tw-ring-offset-width: 3px;
    outline-style: solid;
  }

  .color-input-group[data-invalid="true"]:focus, .color-input-group[data-invalid="true"]:focus-visible, .color-input-group[data-invalid="true"][data-focused="true"], .color-input-group[data-invalid="true"][data-focus-visible="true"], .color-input-group[data-invalid="true"]:focus-within, .color-input-group[data-invalid="true"][data-focus-within="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--danger);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .color-input-group[data-invalid="true"] {
    background-color: var(--field-focus);
    border-color: var(--color-field-border-invalid);
  }

  .color-input-group[data-disabled="true"], .color-input-group[aria-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  .color-input-group__input {
    cursor: text;
    border-style: var(--tw-border-style);
    height: 100%;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-outline-style: none;
    background-color: #0000;
    border-width: 0;
    border-radius: 0;
    outline-style: none;
    flex: 1;
    align-items: center;
    display: flex;
  }

  @media (min-width: 40rem) {
    .color-input-group__input {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }

  .color-input-group__input::placeholder {
    color: var(--field-placeholder, var(--muted));
  }

  .color-input-group:has([data-slot="color-input-group-prefix"]) .color-input-group__input {
    padding-left: calc(var(--spacing) * 2);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .color-input-group:has([data-slot="color-input-group-suffix"]) .color-input-group__input {
    padding-right: calc(var(--spacing) * 2);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .color-input-group__input:focus, .color-input-group__input:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }

  .color-input-group__prefix {
    color: var(--field-placeholder, var(--muted));
    margin-right: 0;
    margin-left: calc(var(--spacing) * 3);
    flex-shrink: 0;
    align-items: center;
    display: flex;
  }

  .color-input-group__suffix {
    color: var(--field-placeholder, var(--muted));
    margin-right: calc(var(--spacing) * 3);
    flex-shrink: 0;
    align-items: center;
    display: flex;
  }

  .color-input-group--secondary {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    background-color: var(--color-input-group-bg);
    --color-input-group-bg: var(--default);
    --color-input-group-bg-hover: var(--default-hover);
    --color-input-group-bg-focus: var(--default);
  }

  @media (hover: hover) {
    .color-input-group--secondary:hover:not(:focus-within), .color-input-group--secondary[data-hovered="true"]:not([data-focus-within="true"]) {
      background-color: var(--color-input-group-bg-hover);
    }
  }

  .color-input-group--secondary:focus-within, .color-input-group--secondary[data-focus-within="true"] {
    background-color: var(--color-input-group-bg-focus);
  }

  .color-input-group--secondary[data-invalid="true"] {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
    outline-color: var(--danger);
    --tw-outline-style: solid;
    --tw-ring-offset-width: 3px;
    outline-style: solid;
  }

  .color-input-group--secondary[data-invalid="true"]:focus, .color-input-group--secondary[data-invalid="true"]:focus-visible, .color-input-group--secondary[data-invalid="true"][data-focused="true"], .color-input-group--secondary[data-invalid="true"][data-focus-visible="true"], .color-input-group--secondary[data-invalid="true"]:focus-within, .color-input-group--secondary[data-invalid="true"][data-focus-within="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--danger);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .color-input-group--secondary[data-invalid="true"] {
    border-color: var(--color-field-border-invalid);
    background-color: var(--color-input-group-bg-focus);
  }

  .color-input-group--secondary [data-slot="color-input-group-input"] {
    background-color: #0000;
  }

  .color-input-group--full-width {
    width: 100%;
  }

  .color-field {
    gap: var(--spacing);
    flex-direction: column;
    display: flex;
  }

  :is(.color-field[data-invalid="true"], .color-field[aria-invalid="true"]) [data-slot="description"] {
    display: none;
  }

  .color-field [data-slot="label"] {
    width: fit-content;
  }

  .color-field--full-width {
    width: 100%;
  }

  .slider {
    gap: var(--spacing);
    grid-template-columns: 1fr auto;
    grid-template-areas: "label output"
                         "track track";
    width: 100%;
    display: grid;
  }

  .slider [data-slot="label"] {
    width: fit-content;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    grid-area: label;
  }

  .slider .slider__output {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
    grid-area: output;
  }

  .slider .slider__track {
    border-radius: calc(var(--radius) * 1.5);
    background-color: var(--default);
    grid-area: track;
    position: relative;
  }

  .slider .slider__fill {
    pointer-events: none;
    background-color: var(--accent);
    position: absolute;
  }

  .slider .slider__thumb {
    cursor: grab;
    border-radius: calc(var(--radius) * 1.5);
    background-color: var(--accent);
    -webkit-tap-highlight-color: transparent;
    transition: background-color .25s var(--ease-smooth), transform .25s var(--ease-out), box-shadow .15s var(--ease-out);
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
  }

  .slider .slider__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .slider .slider__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .slider .slider__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .slider .slider__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .slider .slider__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .slider .slider__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .slider .slider__thumb:after {
    z-index: 10;
    border-radius: calc(var(--radius) * 1);
    background-color: var(--accent-foreground);
    color: var(--color-black);
    --tw-shadow: var(--field-shadow);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    content: "";
    transform-origin: center;
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    position: relative;
  }

  .slider .slider__thumb:after:is() {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .slider .slider__thumb:after:not(:is()) {
      transition-property: none;
    }
  }

  .slider .slider__thumb[data-dragging="true"] {
    cursor: grabbing;
  }

  .slider .slider__thumb[data-dragging="true"]:after {
    scale: .9;
  }

  .slider .slider__thumb[data-dragging="true"]:after:is() {
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
    --tw-scale-z: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  @media (prefers-reduced-motion: reduce) {
    .slider .slider__thumb[data-dragging="true"]:after:not(:is()) {
      --tw-scale-x: 100%;
      --tw-scale-y: 100%;
      --tw-scale-z: 100%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }

  .slider .slider__thumb[data-focus-visible="true"] {
    z-index: 10;
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: var(--ring-offset-width);
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--background);
    --tw-outline-style: none;
    outline-style: none;
  }

  .slider .slider__thumb[data-disabled="true"] {
    cursor: default;
  }

  .slider:disabled, .slider[data-disabled="true"], .slider[aria-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  :is(.slider:disabled, .slider[data-disabled="true"], .slider[aria-disabled="true"]) [data-slot="label"] {
    opacity: 1;
  }

  .slider[data-orientation="horizontal"] {
    flex-direction: column;
  }

  .slider[data-orientation="horizontal"] .slider__track {
    height: calc(var(--spacing) * 5);
    border-inline-style: var(--tw-border-style);
    border-inline-width: .75rem;
    border-inline-color: #0000;
    width: 100%;
  }

  .slider[data-orientation="horizontal"] .slider__track[data-fill-start="true"] {
    border-inline-start-color: var(--accent);
  }

  .slider[data-orientation="horizontal"] .slider__track[data-fill-end="true"] {
    border-inline-end-color: var(--accent);
  }

  .slider[data-orientation="horizontal"] .slider__fill, .slider[data-orientation="horizontal"] .slider__thumb {
    height: 100%;
  }

  .slider[data-orientation="horizontal"] .slider__thumb {
    width: 1.75rem;
    top: 50%;
  }

  .slider[data-orientation="horizontal"] .slider__thumb:after {
    width: 1.5rem;
    height: 1rem;
  }

  .slider[data-orientation="vertical"] {
    gap: calc(var(--spacing) * 2);
    flex-direction: row;
    grid-template: "output"
                   "track" 1fr
                   "label"
                   / 1fr;
    height: 100%;
  }

  .slider[data-orientation="vertical"] .slider__output, .slider[data-orientation="vertical"] [data-slot="label"] {
    text-align: center;
  }

  .slider[data-orientation="vertical"] .slider__track {
    height: 100%;
    width: calc(var(--spacing) * 5);
    border-block-style: var(--tw-border-style);
    border-block-width: .75rem;
    border-block-color: #0000;
    justify-self: center;
  }

  .slider[data-orientation="vertical"] .slider__track[data-fill-start="true"] {
    border-bottom-color: var(--accent);
  }

  .slider[data-orientation="vertical"] .slider__track[data-fill-end="true"] {
    border-top-color: var(--accent);
  }

  .slider[data-orientation="vertical"] .slider__fill, .slider[data-orientation="vertical"] .slider__thumb {
    width: 100%;
  }

  .slider[data-orientation="vertical"] .slider__thumb {
    height: 1.75rem;
    left: 50%;
  }

  .slider[data-orientation="vertical"] .slider__thumb:after {
    width: 1rem;
    height: 1.5rem;
  }

  .switch {
    align-items: flex-start;
    gap: var(--spacing);
    -webkit-tap-highlight-color: transparent;
    cursor: var(--cursor-interactive);
    --switch-control-bg: var(--default);
    --switch-control-bg-hover: var(--switch-control-bg);
    flex-direction: column;
    display: flex;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .switch {
      --switch-control-bg-hover: color-mix(in oklab, var(--switch-control-bg), transparent 20%);
    }
  }

  .switch {
    --switch-control-bg-pressed: var(--switch-control-bg-hover);
    --switch-control-bg-checked: var(--accent);
    --switch-control-bg-checked-hover: var(--accent-hover);
  }

  .switch[data-disabled="true"], .switch[data-disabled="true"] [data-slot="description"], .switch[data-disabled="true"] [data-slot="field-error"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  .switch[data-disabled="true"] .switch__thumb {
    background-color: var(--default-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .switch[data-disabled="true"] .switch__thumb {
      background-color: color-mix(in oklab, var(--default-foreground) 20%, transparent);
    }
  }

  .switch > [data-slot="description"] {
    width: 100%;
    min-width: 0;
    padding-inline-start: 3.25rem;
  }

  .switch > [data-slot="field-error"] {
    width: 100%;
    min-width: 0;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--muted);
    padding-inline-start: 3.25rem;
  }

  .switch.switch--sm > [data-slot="description"], .switch.switch--sm > [data-slot="field-error"] {
    padding-inline-start: 2.75rem;
  }

  .switch.switch--lg > [data-slot="description"], .switch.switch--lg > [data-slot="field-error"] {
    padding-inline-start: 3.75rem;
  }

  :is(.switch:disabled[aria-checked="true"], .switch:disabled[data-selected="true"], .switch[data-disabled="true"][aria-checked="true"], .switch[data-disabled="true"][data-selected="true"], .switch[aria-disabled="true"][aria-checked="true"], .switch[aria-disabled="true"][data-selected="true"]) .switch__thumb {
    opacity: .4;
  }

  .switch__control {
    border-radius: calc(var(--radius) * 1.5);
    background-color: var(--switch-control-bg);
    width: 2.5rem;
    height: 1.25rem;
    transition: background-color .25s var(--ease-smooth), box-shadow .15s var(--ease-out);
    flex-shrink: 0;
    align-items: center;
    display: flex;
    position: relative;
    overflow: hidden;
  }

  .switch__control:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .switch__control:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .switch__control:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .switch__control:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .switch__control:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .switch__control:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .switch:focus-visible .switch__control, .switch:has([data-slot="switch-content"][data-focus-visible="true"]) .switch__control, .switch [data-slot="switch-content"][data-focus-visible="true"] .switch__control {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: var(--ring-offset-width);
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--background);
    --tw-outline-style: none;
    outline-style: none;
  }

  .switch:hover .switch__control, .switch:has([data-slot="switch-content"][data-hovered="true"]) .switch__control, .switch [data-slot="switch-content"][data-hovered="true"] .switch__control {
    background-color: var(--switch-control-bg-hover);
  }

  .switch:active .switch__control, .switch:has([data-slot="switch-content"][data-pressed="true"]) .switch__control, .switch [data-slot="switch-content"][data-pressed="true"] .switch__control {
    background-color: var(--switch-control-bg-pressed);
  }

  :is(.switch:active .switch__control, .switch:has([data-slot="switch-content"][data-pressed="true"]) .switch__control, .switch [data-slot="switch-content"][data-pressed="true"] .switch__control):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), :is(.switch:active .switch__control, .switch:has([data-slot="switch-content"][data-pressed="true"]) .switch__control, .switch [data-slot="switch-content"][data-pressed="true"] .switch__control):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, :is(.switch:active .switch__control, .switch:has([data-slot="switch-content"][data-pressed="true"]) .switch__control, .switch [data-slot="switch-content"][data-pressed="true"] .switch__control):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transform: none;
  }

  @media (prefers-reduced-motion: reduce) {
    :is(.switch:active .switch__control, .switch:has([data-slot="switch-content"][data-pressed="true"]) .switch__control, .switch [data-slot="switch-content"][data-pressed="true"] .switch__control):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), :is(.switch:active .switch__control, .switch:has([data-slot="switch-content"][data-pressed="true"]) .switch__control, .switch [data-slot="switch-content"][data-pressed="true"] .switch__control):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, :is(.switch:active .switch__control, .switch:has([data-slot="switch-content"][data-pressed="true"]) .switch__control, .switch [data-slot="switch-content"][data-pressed="true"] .switch__control):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transform: none;
    }
  }

  .switch[aria-checked="true"] .switch__control, .switch[data-selected="true"] .switch__control {
    background-color: var(--switch-control-bg-checked);
  }

  .switch[aria-checked="true"]:hover .switch__control, .switch[data-selected="true"]:hover .switch__control, .switch[aria-checked="true"][data-hovered="true"] .switch__control, .switch[data-selected="true"][data-hovered="true"] .switch__control, .switch:has([data-slot="switch-content"][data-hovered="true"])[data-selected="true"] .switch__control, .switch[aria-checked="true"]:active .switch__control, .switch[data-selected="true"]:active .switch__control, .switch[aria-checked="true"][data-pressed="true"] .switch__control, .switch[data-selected="true"][data-pressed="true"] .switch__control, .switch:has([data-slot="switch-content"][data-pressed="true"])[data-selected="true"] .switch__control {
    background-color: var(--switch-control-bg-checked-hover);
  }

  .switch__content {
    cursor: inherit;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
    --tw-outline-style: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    outline-style: none;
    display: inline-flex;
    position: relative;
  }

  .switch--sm .switch__control {
    border-radius: calc(var(--radius) * 1);
    width: 2rem;
    height: 1rem;
  }

  .switch--lg .switch__control {
    width: 3rem;
    height: 1.5rem;
  }

  .switch__thumb {
    transform-origin: center;
    border-radius: calc(var(--radius) * 1);
    background-color: var(--color-white);
    color: var(--color-black);
    --tw-shadow: var(--field-shadow);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    width: 1.375rem;
    height: 1rem;
    transition: margin .3s var(--ease-out-fluid), background-color .2s var(--ease-out);
    margin-inline-start: calc(var(--spacing) * .5);
    display: flex;
  }

  .switch__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .switch__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .switch__thumb:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .switch__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .switch__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .switch__thumb:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .switch[aria-checked="true"] .switch__thumb, .switch[data-selected="true"] .switch__thumb {
    background-color: var(--accent-foreground);
    color: var(--accent);
    margin-inline-start: calc(100% - 1.5rem);
    box-shadow: 0 0 5px #00000005, 0 2px 10px #0000000f, 0 0 1px #0000004d;
  }

  .switch--sm .switch__thumb {
    border-radius: calc(var(--radius) * .75);
    width: 1.03125rem;
    height: .75rem;
  }

  .switch[aria-checked="true"] :is(.switch--sm .switch__thumb), .switch[data-selected="true"] :is(.switch--sm .switch__thumb) {
    margin-inline-start: calc(100% - 1.15625rem);
  }

  .switch--lg .switch__thumb {
    border-radius: calc(var(--radius) * 1.5);
    width: 1.71875rem;
    height: 1.25rem;
  }

  .switch[aria-checked="true"] :is(.switch--lg .switch__thumb), .switch[data-selected="true"] :is(.switch--lg .switch__thumb) {
    margin-inline-start: calc(100% - 1.84375rem);
  }

  .switch__thumb > * {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
  }

  .switch__label {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
  }

  .switch [data-slot="label"] {
    -webkit-user-select: none;
    user-select: none;
  }

  .switch__content [data-slot="label"] {
    cursor: var(--cursor-interactive);
  }

  .switch [data-slot="description"] {
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
  }

  .switch-group {
    gap: calc(var(--spacing) * 6);
    flex-direction: column;
    display: flex;
  }

  .switch-group__items {
    gap: calc(var(--spacing) * 4);
    display: flex;
  }

  .switch-group--horizontal .switch-group__items {
    flex-direction: row;
  }

  .switch-group--vertical .switch-group__items {
    flex-direction: column;
  }

  .badge {
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing) * .5);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    min-height: calc(var(--spacing) * 7);
    min-width: calc(var(--spacing) * 7);
    border-radius: calc(var(--radius) * 3);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: 1.34;
    --badge-bg: var(--default);
    --badge-fg: var(--default-foreground);
    --badge-border: var(--background);
    background-color: var(--badge-bg);
    color: var(--badge-fg);
    border: 1px solid var(--badge-border);
    flex-shrink: 0;
    line-height: 1.34;
    display: inline-flex;
  }

  .badge__label {
    padding-inline: calc(var(--spacing) * .5);
  }

  .badge-anchor {
    flex-shrink: 0;
    display: inline-flex;
    position: relative;
  }

  .badge--lg {
    min-height: calc(var(--spacing) * 8);
    min-width: calc(var(--spacing) * 8);
    border-radius: calc(var(--radius) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: 1.43;
    line-height: 1.43;
  }

  .badge--sm {
    min-height: calc(var(--spacing) * 4);
    min-width: calc(var(--spacing) * 4);
    border-radius: calc(var(--radius) * 1.5);
    --tw-leading: 1.34;
    font-size: 10px;
    line-height: 1.34;
  }

  .badge--accent {
    --badge-fg: var(--accent-soft-foreground);
  }

  .badge--default {
    --badge-fg: var(--default-foreground);
  }

  .badge--success {
    --badge-fg: var(--success-soft-foreground);
  }

  .badge--warning {
    --badge-fg: var(--warning-soft-foreground);
  }

  .badge--danger {
    --badge-fg: var(--danger-soft-foreground);
  }

  .badge--top-right {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(25%, -25%);
  }

  .badge--top-left {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-25%, -25%);
  }

  .badge--bottom-right {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(25%, 25%);
  }

  .badge--bottom-left {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translate(-25%, 25%);
  }

  .badge--primary.badge--accent {
    --badge-bg: var(--accent);
    --badge-fg: var(--accent-foreground);
  }

  .badge--primary.badge--default {
    --badge-bg: var(--default);
    --badge-fg: var(--default-foreground);
  }

  .badge--primary.badge--success {
    --badge-bg: var(--success);
    --badge-fg: var(--success-foreground);
  }

  .badge--primary.badge--warning {
    --badge-bg: var(--warning);
    --badge-fg: var(--warning-foreground);
  }

  .badge--primary.badge--danger {
    --badge-bg: var(--danger);
    --badge-fg: var(--danger-foreground);
  }

  .badge--soft.badge--accent {
    --badge-bg: var(--accent-soft);
    --badge-fg: var(--accent-soft-foreground);
  }

  .badge--soft.badge--default {
    --badge-bg: var(--default-soft);
    --badge-fg: var(--default-soft-foreground);
  }

  .badge--soft.badge--success {
    --badge-bg: var(--success-soft);
    --badge-fg: var(--success-soft-foreground);
  }

  .badge--soft.badge--warning {
    --badge-bg: var(--warning-soft);
    --badge-fg: var(--warning-soft-foreground);
  }

  .badge--soft.badge--danger {
    --badge-bg: var(--danger-soft);
    --badge-fg: var(--danger-soft-foreground);
  }

  .chip {
    align-items: center;
    gap: calc(var(--spacing) * .5);
    border-radius: calc(var(--radius) * 2);
    width: fit-content;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * .5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --chip-bg: var(--default);
    --chip-fg: currentColor;
    background-color: var(--chip-bg);
    color: var(--chip-fg);
    flex-shrink: 0;
    display: inline-flex;
  }

  .chip__label {
    padding-inline: calc(var(--spacing) * .5);
  }

  .chip--accent {
    --chip-fg: var(--accent-soft-foreground);
  }

  .chip--danger {
    --chip-fg: var(--danger-soft-foreground);
  }

  .chip--default {
    --chip-fg: var(--default-foreground);
  }

  .chip--success {
    --chip-fg: var(--success-soft-foreground);
  }

  .chip--warning {
    --chip-fg: var(--warning-soft-foreground);
  }

  .chip--tertiary {
    --chip-bg: transparent;
  }

  .chip--sm {
    padding-inline: var(--spacing);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    padding-block: 0;
  }

  .chip--md {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .chip--lg {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: var(--spacing);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .chip--primary.chip--accent {
    --chip-bg: var(--accent);
    --chip-fg: var(--accent-foreground);
  }

  .chip--primary.chip--success {
    --chip-bg: var(--success);
    --chip-fg: var(--success-foreground);
  }

  .chip--primary.chip--warning {
    --chip-bg: var(--warning);
    --chip-fg: var(--warning-foreground);
  }

  .chip--primary.chip--danger {
    --chip-bg: var(--danger);
    --chip-fg: var(--danger-foreground);
  }

  .chip--accent.chip--soft {
    --chip-bg: var(--accent-soft);
    --chip-fg: var(--accent-soft-foreground);
  }

  .chip--success.chip--soft {
    --chip-bg: var(--success-soft);
    --chip-fg: var(--success-soft-foreground);
  }

  .chip--warning.chip--soft {
    --chip-bg: var(--warning-soft);
    --chip-fg: var(--warning-soft-foreground);
  }

  .chip--danger.chip--soft {
    --chip-bg: var(--danger-soft);
    --chip-fg: var(--danger-soft-foreground);
  }

  .chip--default.chip--soft {
    --chip-bg: var(--default-soft);
    --chip-fg: var(--default-soft-foreground);
  }

  .table-root {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    display: grid;
    position: relative;
    overflow: clip;
  }

  .table__scroll-container {
    scrollbar-width: var(--scrollbar-width);
    scrollbar-color: var(--scrollbar-color);
    scrollbar-gutter: var(--scrollbar-gutter);
    scrollbar-gutter: auto;
    overflow-x: auto;
  }

  .table-root--primary {
    background-color: var(--surface-secondary);
    padding-inline: var(--spacing);
    padding-bottom: var(--spacing);
    border-radius: min(32px, calc(var(--radius) * 2.5));
  }

  .table-root--secondary .table__header {
    border-bottom-style: var(--tw-border-style);
    background-color: #0000;
    border-bottom-width: 0;
  }

  .table-root--secondary .table__column {
    background-color: var(--surface-secondary);
  }

  .table-root--secondary :is(th.table__column:first-child, [role="row"] > [role="presentation"]:first-of-type > .table__column) {
    border-start-start-radius: min(32px, var(--radius-2xl));
    border-end-start-radius: min(32px, var(--radius-2xl));
  }

  .table-root--secondary :is(th.table__column:last-child, [role="row"] > [role="presentation"]:last-of-type > .table__column) {
    border-start-end-radius: min(32px, var(--radius-2xl));
    border-end-end-radius: min(32px, var(--radius-2xl));
  }

  .table-root--secondary .table__body {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .table-root--secondary .table__body tr:first-child td:first-child, .table-root--secondary .table__body tr:first-child td:last-child, .table-root--secondary .table__body tr:last-child td:first-child, .table-root--secondary .table__body tr:last-child td:last-child {
    border-radius: 0;
  }

  .table-root--secondary .table__body:not(tbody) {
    border-radius: 0;
    overflow: visible;
  }

  .table-root--secondary .table__row .table__cell {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--separator-tertiary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .table-root--secondary .table__row .table__cell {
      border-color: color-mix(in oklab, var(--separator-tertiary) 50%, transparent);
    }
  }

  .table-root--secondary .table__row .table__cell {
    background-color: #0000;
  }

  @media (hover: hover) {
    .table-root--secondary .table__row:hover .table__cell, .table-root--secondary .table__row[data-hovered="true"] .table__cell {
      background-color: var(--default);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .table-root--secondary .table__row:hover .table__cell, .table-root--secondary .table__row[data-hovered="true"] .table__cell {
        background-color: color-mix(in oklab, var(--default) 50%, transparent);
      }
    }
  }

  .table__content {
    border-collapse: separate;
    --tw-border-spacing-x: 0px;
    --tw-border-spacing-y: 0px;
    width: 100%;
    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .table-root--primary .table__content {
    overflow: clip;
  }

  .table__header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--separator);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .table__header {
      border-color: color-mix(in oklab, var(--separator) 50%, transparent);
    }
  }

  .table__header {
    background-color: var(--surface-secondary);
  }

  .table__column {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--muted);
    position: relative;
  }

  .table__column:after {
    content: "";
    pointer-events: none;
    height: calc(var(--spacing) * 4);
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    width: 1px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
    border-radius: calc(var(--radius) * .5);
    background-color: var(--separator);
    inset-inline-end: calc(var(--spacing) * 0);
    position: absolute;
    top: 50%;
  }

  .table__column:last-child:not(:only-child):after {
    content: none;
  }

  .table__column[data-allows-sorting="true"] {
    cursor: var(--cursor-interactive);
  }

  @media (hover: hover) {
    .table__column[data-allows-sorting="true"]:hover, .table__column[data-allows-sorting="true"][data-hovered="true"] {
      color: var(--foreground);
    }
  }

  .table__column:focus-visible, .table__column[data-focus-visible="true"] {
    border-radius: calc(var(--radius) * 1);
    --tw-outline-style: none;
    box-shadow: inset 0 0 0 2px var(--focus);
    outline-style: none;
  }

  [role="row"] > [role="presentation"]:last-of-type:not(:only-of-type) > .table__column:after {
    content: none;
  }

  .table__sortable-column-header {
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .table__sortable-column-indicator {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .1s;
    --tw-ease: var(--ease-out);
    transition-duration: .1s;
    transition-timing-function: var(--ease-out);
  }

  .table__sortable-column-indicator[data-direction="descending"] {
    rotate: 180deg;
  }

  .table__body tr:first-child td:first-child {
    border-start-start-radius: min(32px, var(--radius-2xl));
  }

  .table__body tr:first-child td:last-child {
    border-start-end-radius: min(32px, var(--radius-2xl));
  }

  .table__body tr:last-child td:first-child {
    border-end-start-radius: min(32px, var(--radius-2xl));
  }

  .table__body tr:last-child td:last-child {
    border-end-end-radius: min(32px, var(--radius-2xl));
  }

  .table__body:not(tbody) {
    border-radius: min(32px, var(--radius-2xl));
    height: 100%;
    position: relative;
    overflow: clip;
  }

  .table__row {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--separator);
    height: 100%;
    position: relative;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .table__row {
      border-color: color-mix(in oklab, var(--separator) 50%, transparent);
    }
  }

  .table__row:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0;
  }

  @media (hover: hover) {
    .table__row:hover .table__cell, .table__row[data-hovered="true"] .table__cell {
      background-color: var(--surface);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .table__row:hover .table__cell, .table__row[data-hovered="true"] .table__cell {
        background-color: color-mix(in oklab, var(--surface) 40%, transparent);
      }
    }
  }

  .table__row[data-selected="true"] .table__cell {
    background-color: var(--surface);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .table__row[data-selected="true"] .table__cell {
      background-color: color-mix(in oklab, var(--surface) 10%, transparent);
    }
  }

  .table__row[aria-disabled="true"], .table__row[data-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  .table__row:focus-visible, .table__row[data-focus-visible="true"] {
    --tw-outline-style: none;
    outline-style: none;
  }

  .table__row[data-dragging="true"] {
    opacity: .5;
  }

  .table__row[data-drop-target="true"] .table__cell {
    background-color: var(--accent-soft);
  }

  .table__cell {
    background-color: var(--surface);
    height: 100%;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    vertical-align: middle;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--foreground);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--separator-tertiary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .table__cell {
      border-color: color-mix(in oklab, var(--separator-tertiary) 50%, transparent);
    }
  }

  .table__cell:focus-visible, .table__cell[data-focus-visible="true"] {
    border-radius: calc(var(--radius) * 1);
    --tw-outline-style: none;
    box-shadow: inset 0 0 0 2px var(--focus);
    outline-style: none;
  }

  .table__row:is(:focus-visible, [data-focus-visible="true"]) :is(.table__cell, .table__column) {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .table__row:is(:focus-visible, [data-focus-visible="true"]) > :is(.table__cell, .table__column):only-child, .table__row:is(:focus-visible, [data-focus-visible="true"]) > :only-child :is(.table__cell, .table__column) {
    border-radius: calc(var(--radius) * 1);
    --tw-shadow: inset 0 0 0 2px var(--tw-shadow-color, var(--focus));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-outline-style: none;
    outline-style: none;
  }

  .table__row:is(:focus-visible, [data-focus-visible="true"]) > :is(.table__cell, .table__column):first-child:not(:only-child), .table__row:is(:focus-visible, [data-focus-visible="true"]) > :first-child:not(:only-child) :is(.table__cell, .table__column) {
    border-top-left-radius: calc(var(--radius) * 1);
    border-bottom-left-radius: calc(var(--radius) * 1);
    --tw-shadow: inset 2px 0 0 0 var(--tw-shadow-color, var(--focus)), inset 0 2px 0 0 var(--tw-shadow-color, var(--focus)), inset 0 -2px 0 0 var(--tw-shadow-color, var(--focus));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-outline-style: none;
    outline-style: none;
  }

  .table__row:is(:focus-visible, [data-focus-visible="true"]) > :is(.table__cell, .table__column):last-child:not(:only-child), .table__row:is(:focus-visible, [data-focus-visible="true"]) > :last-child:not(:only-child) :is(.table__cell, .table__column) {
    border-top-right-radius: calc(var(--radius) * 1);
    border-bottom-right-radius: calc(var(--radius) * 1);
    --tw-shadow: inset -2px 0 0 0 var(--tw-shadow-color, var(--focus)), inset 0 2px 0 0 var(--tw-shadow-color, var(--focus)), inset 0 -2px 0 0 var(--tw-shadow-color, var(--focus));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-outline-style: none;
    outline-style: none;
  }

  .table__row:is(:focus-visible, [data-focus-visible="true"]) > :is(.table__cell, .table__column):not(:first-child):not(:last-child):not(:only-child), .table__row:is(:focus-visible, [data-focus-visible="true"]) > :not(:first-child):not(:last-child):not(:only-child) :is(.table__cell, .table__column) {
    --tw-shadow: inset 0 2px 0 0 var(--tw-shadow-color, var(--focus)), inset 0 -2px 0 0 var(--tw-shadow-color, var(--focus));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-outline-style: none;
    outline-style: none;
  }

  .table__cell[data-tree-column] {
    padding-inline-start: calc(1rem * var(--table-row-level, 1));
  }

  .table__footer {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    align-items: center;
    display: flex;
  }

  .table__resizable-container {
    scrollbar-width: var(--scrollbar-width);
    scrollbar-color: var(--scrollbar-color);
    scrollbar-gutter: var(--scrollbar-gutter);
    scrollbar-gutter: auto;
    position: relative;
    overflow: auto;
  }

  .table__column-resizer {
    height: calc(var(--spacing) * 4);
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    border-radius: calc(var(--radius) * .5);
    background-color: var(--separator);
    box-sizing: content-box;
    --tw-translate-x: calc(1 / 2 * 100%);
    width: 1px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
    cursor: col-resize;
    touch-action: none;
    padding-inline: calc(var(--spacing) * 2);
    --tw-border-style: none;
    --tw-outline-style: none;
    inset-inline-end: calc(var(--spacing) * 0);
    background-clip: content-box;
    border-style: none;
    outline-style: none;
    position: absolute;
    top: 50%;
  }

  .table__column-resizer[data-hovered="true"], .table__column-resizer:hover, .table__column-resizer[data-resizing="true"] {
    height: 100%;
    width: calc(var(--spacing) * .5);
    background-color: var(--accent);
  }

  .table__column-resizer[data-focus-visible="true"], .table__column-resizer:focus-visible {
    height: 100%;
    width: calc(var(--spacing) * .5);
    background-color: var(--focus);
  }

  .table__column:has(.table__column-resizer):after {
    content: none;
  }

  .table__load-more td, .table__load-more [role="rowheader"] {
    padding-block: calc(var(--spacing) * 3);
    text-align: center;
  }

  :is(.table__load-more td, .table__load-more [role="rowheader"]) > * {
    margin-inline: auto;
  }

  .table__load-more-content {
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 2);
    display: flex;
  }

  .alert {
    justify-content: flex-start;
    align-items: flex-start;
    gap: calc(var(--spacing) * 4);
    background-color: var(--surface);
    width: 100%;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    --tw-shadow: var(--surface-shadow);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    border-radius: min(32px, var(--radius-3xl));
    flex-direction: row;
    display: flex;
  }

  .alert__content {
    flex-direction: column;
    flex-grow: 1;
    align-items: flex-start;
    height: 100%;
    display: flex;
  }

  .alert__indicator {
    padding: var(--spacing);
    -webkit-user-select: none;
    user-select: none;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .alert__indicator [data-slot="alert-default-icon"] {
    box-sizing: content-box;
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .alert__title {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .alert__description {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--muted);
  }

  .alert--default .alert__indicator, .alert--default .alert__title {
    color: var(--foreground);
  }

  .alert--accent .alert__indicator, .alert--accent .alert__title {
    color: var(--accent-soft-foreground);
  }

  .alert--success .alert__indicator, .alert--success .alert__title {
    color: var(--success-soft-foreground);
  }

  .alert--warning .alert__indicator, .alert--warning .alert__title {
    color: var(--warning-soft-foreground);
  }

  .alert--danger .alert__indicator, .alert--danger .alert__title {
    color: var(--danger-soft-foreground);
  }

  .empty-state {
    padding: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--muted);
  }

  .skeleton {
    pointer-events: none;
    border-radius: calc(var(--radius) * .5);
    background-color: var(--surface-tertiary);
    position: relative;
    overflow: hidden;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .skeleton {
      background-color: color-mix(in oklab, var(--surface-tertiary) 70%, transparent);
    }
  }

  .skeleton--shimmer:after {
    --tw-translate-x: -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
    --tw-gradient-position: to right;
    animation: 2s linear infinite skeleton;
    position: absolute;
    inset: 0;
  }

  @supports (background-image: linear-gradient(in lab, red, red)) {
    .skeleton--shimmer:after {
      --tw-gradient-position: to right in oklab;
    }
  }

  .skeleton--shimmer:after {
    background-image: linear-gradient(var(--tw-gradient-stops));
    --tw-gradient-from: transparent;
    --tw-gradient-via: var(--surface-tertiary);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    --tw-gradient-to: transparent;
    --tw-content: "";
    content: var(--tw-content);
  }

  .skeleton--shimmer:has(.skeleton):after {
    content: none;
  }

  .skeleton--shimmer:has(.skeleton):before {
    --tw-translate-x: -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
    --tw-content: "";
    content: var(--tw-content);
    z-index: 10;
    pointer-events: none;
    mix-blend-mode: overlay;
    background: linear-gradient(90deg, #0000 0%, #ffffff80 50%, #0000 100%);
    animation: 2s linear infinite skeleton;
    position: absolute;
    inset: 0;
  }

  .skeleton--shimmer:has(.skeleton) .skeleton:after {
    content: none;
  }

  .skeleton--pulse {
    animation: var(--animate-pulse);
  }

  .meter {
    gap: var(--spacing);
    --meter-fill: var(--accent);
    grid-template-columns: 1fr auto;
    grid-template-areas: "label output"
                         "track track";
    width: 100%;
    display: grid;
  }

  .meter [data-slot="label"] {
    width: fit-content;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    grid-area: label;
  }

  .meter .meter__output {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
    grid-area: output;
  }

  .meter .meter__track {
    border-radius: calc(var(--radius) * .5);
    background-color: var(--default);
    height: calc(var(--spacing) * 2);
    grid-area: track;
    position: relative;
    overflow: hidden;
  }

  .meter .meter__fill {
    border-radius: calc(var(--radius) * .5);
    background-color: var(--meter-fill);
    height: 100%;
    transition: width .3s var(--ease-out);
    position: absolute;
    top: 0;
    left: 0;
  }

  .meter .meter__fill:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .meter .meter__fill:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .meter .meter__fill:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .meter .meter__fill:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .meter .meter__fill:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .meter .meter__fill:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .meter:disabled, .meter[data-disabled="true"], .meter[aria-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  :is(.meter:disabled, .meter[data-disabled="true"], .meter[aria-disabled="true"]) [data-slot="label"] {
    opacity: 1;
  }

  .meter--sm .meter__track {
    height: var(--spacing);
    border-radius: calc(var(--radius) * .25);
  }

  .meter--sm .meter__fill {
    border-radius: calc(var(--radius) * .25);
  }

  .meter--lg .meter__track {
    height: calc(var(--spacing) * 3);
    border-radius: calc(var(--radius) * .75);
  }

  .meter--lg .meter__fill {
    border-radius: calc(var(--radius) * .75);
  }

  .meter--default {
    --meter-fill: var(--default-foreground);
  }

  .meter--accent {
    --meter-fill: var(--accent);
  }

  .meter--success {
    --meter-fill: var(--success);
  }

  .meter--warning {
    --meter-fill: var(--warning);
  }

  .meter--danger {
    --meter-fill: var(--danger);
  }

  .progress-bar {
    gap: var(--spacing);
    --progress-bar-fill: var(--accent);
    grid-template-columns: 1fr auto;
    grid-template-areas: "label output"
                         "track track";
    width: 100%;
    display: grid;
  }

  .progress-bar [data-slot="label"] {
    width: fit-content;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    grid-area: label;
  }

  .progress-bar .progress-bar__output {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
    grid-area: output;
  }

  .progress-bar .progress-bar__track {
    border-radius: calc(var(--radius) * .5);
    background-color: var(--default);
    height: calc(var(--spacing) * 2);
    grid-area: track;
    position: relative;
    overflow: hidden;
  }

  .progress-bar .progress-bar__fill {
    border-radius: calc(var(--radius) * .5);
    background-color: var(--progress-bar-fill);
    height: 100%;
    transition: width .3s var(--ease-out);
    position: absolute;
    top: 0;
    left: 0;
  }

  .progress-bar .progress-bar__fill:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .progress-bar .progress-bar__fill:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .progress-bar .progress-bar__fill:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .progress-bar .progress-bar__fill:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .progress-bar .progress-bar__fill:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .progress-bar .progress-bar__fill:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .progress-bar:not([aria-valuenow]) .progress-bar__fill {
    width: 40%;
    animation: 1.5s cubic-bezier(.65, 0, .35, 1) infinite progress-bar-indeterminate;
  }

  .progress-bar:not([aria-valuenow]) .progress-bar__fill:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .progress-bar:not([aria-valuenow]) .progress-bar__fill:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .progress-bar:not([aria-valuenow]) .progress-bar__fill:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    animation: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .progress-bar:not([aria-valuenow]) .progress-bar__fill:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .progress-bar:not([aria-valuenow]) .progress-bar__fill:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .progress-bar:not([aria-valuenow]) .progress-bar__fill:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      animation: none;
    }
  }

  .progress-bar:disabled, .progress-bar[data-disabled="true"], .progress-bar[aria-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  :is(.progress-bar:disabled, .progress-bar[data-disabled="true"], .progress-bar[aria-disabled="true"]) [data-slot="label"] {
    opacity: 1;
  }

  @keyframes progress-bar-indeterminate {
    0% {
      transform: translateX(-100%);
    }

    100% {
      transform: translateX(350%);
    }
  }

  .progress-bar--sm .progress-bar__track {
    height: var(--spacing);
    border-radius: calc(var(--radius) * .25);
  }

  .progress-bar--sm .progress-bar__fill {
    border-radius: calc(var(--radius) * .25);
  }

  .progress-bar--lg .progress-bar__track {
    height: calc(var(--spacing) * 3);
    border-radius: calc(var(--radius) * .75);
  }

  .progress-bar--lg .progress-bar__fill {
    border-radius: calc(var(--radius) * .75);
  }

  .progress-bar--default {
    --progress-bar-fill: var(--default-foreground);
  }

  .progress-bar--accent {
    --progress-bar-fill: var(--accent);
  }

  .progress-bar--success {
    --progress-bar-fill: var(--success);
  }

  .progress-bar--warning {
    --progress-bar-fill: var(--warning);
  }

  .progress-bar--danger {
    --progress-bar-fill: var(--danger);
  }

  .progress-circle {
    --progress-circle-stroke: var(--accent);
    --progress-circle-track-stroke: var(--default);
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  .progress-circle .progress-circle__track {
    width: calc(var(--spacing) * 7);
    height: calc(var(--spacing) * 7);
  }

  .progress-circle .progress-circle__track-circle {
    stroke: var(--progress-circle-track-stroke);
  }

  .progress-circle .progress-circle__fill-circle {
    stroke: var(--progress-circle-stroke);
    transition: stroke-dashoffset .3s var(--ease-out);
  }

  .progress-circle .progress-circle__fill-circle:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .progress-circle .progress-circle__fill-circle:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .progress-circle .progress-circle__fill-circle:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .progress-circle .progress-circle__fill-circle:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .progress-circle .progress-circle__fill-circle:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .progress-circle .progress-circle__fill-circle:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .progress-circle:not([aria-valuenow]) .progress-circle__track {
    animation: 1s linear infinite progress-circle-spin;
  }

  .progress-circle:not([aria-valuenow]) .progress-circle__track:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .progress-circle:not([aria-valuenow]) .progress-circle__track:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .progress-circle:not([aria-valuenow]) .progress-circle__track:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    animation: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .progress-circle:not([aria-valuenow]) .progress-circle__track:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .progress-circle:not([aria-valuenow]) .progress-circle__track:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .progress-circle:not([aria-valuenow]) .progress-circle__track:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      animation: none;
    }
  }

  .progress-circle:disabled, .progress-circle[data-disabled="true"], .progress-circle[aria-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  @keyframes progress-circle-spin {
    from {
      transform: rotate(0);
    }

    to {
      transform: rotate(360deg);
    }
  }

  .progress-circle--sm .progress-circle__track {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }

  .progress-circle--lg .progress-circle__track {
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
  }

  .progress-circle--default {
    --progress-circle-stroke: var(--default-foreground);
  }

  .progress-circle--accent {
    --progress-circle-stroke: var(--accent);
  }

  .progress-circle--success {
    --progress-circle-stroke: var(--success);
  }

  .progress-circle--warning {
    --progress-circle-stroke: var(--warning);
  }

  .progress-circle--danger {
    --progress-circle-stroke: var(--danger);
  }

  .spinner {
    pointer-events: none;
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
    flex-shrink: 0;
    animation: .75s linear infinite spin;
    display: inline-flex;
  }

  .spinner:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .spinner:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .spinner:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    animation: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .spinner:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .spinner:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .spinner:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      animation: none;
    }
  }

  .spinner--sm {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .spinner--lg {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
  }

  .spinner--xl {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
  }

  .spinner--current {
    color: inherit;
  }

  .spinner--accent {
    color: var(--accent);
  }

  .spinner--danger {
    color: var(--danger);
  }

  .spinner--success {
    color: var(--success);
  }

  .spinner--warning {
    color: var(--warning);
  }

  .toast-region {
    pointer-events: none;
    z-index: 50;
    --tw-outline-style: none;
    outline-style: none;
    width: calc(100vw - 2rem);
    position: fixed;
  }

  @media (min-width: 40rem) {
    .toast-region {
      width: auto;
      min-width: var(--toast-width);
    }
  }

  .toast-region {
    display: block;
  }

  .toast-region--bottom {
    bottom: calc(var(--spacing) * 4);
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    left: 50%;
  }

  .toast-region--bottom-start {
    bottom: calc(var(--spacing) * 4);
    left: calc(var(--spacing) * 4);
  }

  .toast-region--bottom-end {
    right: calc(var(--spacing) * 4);
    bottom: calc(var(--spacing) * 4);
  }

  .toast-region--top {
    top: calc(var(--spacing) * 4);
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    left: 50%;
  }

  .toast-region--top-start {
    top: calc(var(--spacing) * 4);
    left: calc(var(--spacing) * 4);
  }

  .toast-region--top-end {
    top: calc(var(--spacing) * 4);
    right: calc(var(--spacing) * 4);
  }

  .toast-region:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-offset: 2px;
    outline-width: 2px;
    outline-color: var(--focus);
  }

  .toast {
    pointer-events: auto;
    justify-content: flex-start;
    align-items: flex-start;
    gap: calc(var(--spacing) * 1.5);
    background-color: var(--surface);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    --tw-shadow: var(--overlay-shadow);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    border-radius: min(32px, var(--radius-3xl));
    flex-direction: row;
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
  }

  .toast--bottom, .toast--bottom-start, .toast--bottom-end {
    bottom: 0;
  }

  .toast--top, .toast--top-start, .toast--top-end {
    top: 0;
  }

  .toast:not([data-frontmost="true"]) {
    pointer-events: none;
    height: var(--front-height);
    overflow: hidden;
  }

  .toast:not([data-frontmost="true"]) .toast__close-button {
    pointer-events: none;
    opacity: 0;
    outline: none;
  }

  .toast[data-hidden="true"] {
    pointer-events: none;
    opacity: 0;
    display: flex;
  }

  .toast:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-offset: 2px;
    outline-width: 2px;
    outline-color: var(--focus);
  }

  .toast--bottom, .toast--bottom-start, .toast--bottom-end {
    view-transition-class: toast-bottom;
  }

  .toast--top, .toast--top-start, .toast--top-end {
    view-transition-class: toast-top;
  }

  .toast__content {
    flex-direction: column;
    flex-grow: 1;
    align-self: center;
    align-items: flex-start;
    height: 100%;
    display: flex;
  }

  .toast__indicator {
    padding: var(--spacing);
    color: var(--overlay-foreground);
    -webkit-user-select: none;
    user-select: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .toast__indicator [data-slot="toast-default-icon"] {
    box-sizing: content-box;
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .toast__indicator [data-slot="spinner"], .toast__indicator [data-slot="spinner-icon"] {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .toast__title {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--overlay-foreground);
  }

  .toast__description {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--muted);
  }

  .toast__close-button {
    pointer-events: none;
    top: calc(var(--spacing) * -1);
    right: calc(var(--spacing) * -1);
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
    border-color: var(--border);
    background-color: var(--default);
    opacity: 0;
    position: absolute;
  }

  @media (min-width: 40rem) {
    .toast__close-button {
      border-style: var(--tw-border-style);
      background-color: var(--overlay);
      border-width: 1px;
    }
  }

  .toast__close-button {
    transition: opacity .15s var(--ease-smooth);
  }

  .toast__close-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .toast__close-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .toast__close-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .toast__close-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .toast__close-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .toast__close-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .toast__close-button [data-slot="close-button-icon"] {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
  }

  @media (min-width: 40rem) {
    .toast__close-button [data-slot="close-button-icon"] {
      width: calc(var(--spacing) * 3);
      height: calc(var(--spacing) * 3);
    }
  }

  @media (hover: hover) {
    .toast__close-button:hover, .toast__close-button[data-hovered="true"] {
      background-color: var(--default);
    }
  }

  .toast[data-frontmost="true"]:hover .toast__close-button {
    pointer-events: auto;
    opacity: 1;
  }

  .toast__action {
    margin-top: calc(var(--spacing) * 2);
  }

  @media (min-width: 40rem) {
    .toast__action {
      margin-top: 0;
    }
  }

  .toast--accent .toast__title {
    color: var(--accent-soft-foreground);
  }

  .toast--success .toast__title, .toast--success .toast__indicator {
    color: var(--success-soft-foreground);
  }

  .toast--warning .toast__title, .toast--warning .toast__indicator {
    color: var(--warning-soft-foreground);
  }

  .toast--danger .toast__title, .toast--danger .toast__indicator {
    color: var(--danger-soft-foreground);
  }

  ::view-transition-old(*) {
    will-change: translate, opacity;
  }

  ::view-transition-new(*) {
    will-change: translate, opacity;
  }

  ::view-transition-new(.toast-bottom):only-child {
    animation: .35s toast-slide-bottom-in;
  }

  ::view-transition-old(.toast-bottom):only-child {
    animation: .35s forwards toast-slide-bottom-out;
  }

  ::view-transition-new(.toast-top):only-child {
    animation: .35s toast-slide-top-in;
  }

  ::view-transition-old(.toast-top):only-child {
    animation: .35s forwards toast-slide-top-out;
  }

  @keyframes toast-slide-bottom-in {
    from {
      opacity: 0;
      translate: 0 100%;
    }
  }

  @keyframes toast-slide-bottom-out {
    to {
      opacity: 0;
      translate: 0 100%;
    }
  }

  @keyframes toast-slide-top-in {
    from {
      opacity: 0;
      translate: 0 -100%;
    }
  }

  @keyframes toast-slide-top-out {
    to {
      opacity: 0;
      translate: 0 -100%;
    }
  }

  .checkbox-group {
    flex-direction: column;
    display: flex;
  }

  .checkbox-group [data-slot="checkbox"] {
    margin-top: calc(var(--spacing) * 4);
  }

  .checkbox {
    align-items: flex-start;
    gap: var(--spacing);
    --tw-outline-style: none;
    -webkit-tap-highlight-color: transparent;
    cursor: var(--cursor-interactive);
    outline-style: none;
    flex-direction: column;
    display: flex;
  }

  .checkbox > [data-slot="description"], .checkbox > [data-slot="field-error"] {
    cursor: default;
    width: 100%;
    min-width: 0;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    text-wrap: wrap;
    overflow-wrap: break-word;
    color: var(--muted);
    -webkit-user-select: none;
    user-select: none;
    padding-inline-start: calc(var(--spacing) * 7);
  }

  .checkbox [data-slot="label"] {
    -webkit-user-select: none;
    user-select: none;
  }

  .checkbox .checkbox__content [data-slot="label"] {
    cursor: var(--cursor-interactive);
  }

  .checkbox[data-disabled="true"], .checkbox[data-disabled="true"] [data-slot="description"], .checkbox[data-disabled="true"] [data-slot="field-error"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  :is(.checkbox[data-selected="true"], .checkbox[data-indeterminate="true"]) .checkbox__indicator {
    border-color: var(--accent-foreground);
  }

  .checkbox [data-slot="checkbox-default-indicator--checkmark"] {
    width: calc(var(--spacing) * 2.5);
    height: calc(var(--spacing) * 2.5);
    stroke-width: 2.5px;
    color: var(--accent-foreground);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .2s;
    transition-duration: .2s;
  }

  .checkbox [data-slot="checkbox-default-indicator--checkmark"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .checkbox [data-slot="checkbox-default-indicator--checkmark"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .checkbox [data-slot="checkbox-default-indicator--checkmark"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .checkbox [data-slot="checkbox-default-indicator--checkmark"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .checkbox [data-slot="checkbox-default-indicator--checkmark"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .checkbox [data-slot="checkbox-default-indicator--checkmark"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .checkbox[data-selected="true"] [data-slot="checkbox-default-indicator--checkmark"] {
    transition: stroke-dashoffset .15s linear 15ms;
  }

  .checkbox[data-invalid="true"][data-selected="true"] [data-slot="checkbox-default-indicator--checkmark"], .checkbox[data-invalid="true"][aria-checked="true"] [data-slot="checkbox-default-indicator--checkmark"], .checkbox[aria-invalid="true"][data-selected="true"] [data-slot="checkbox-default-indicator--checkmark"], .checkbox[aria-invalid="true"][aria-checked="true"] [data-slot="checkbox-default-indicator--checkmark"] {
    color: var(--danger-foreground);
  }

  .checkbox[data-indeterminate="true"] [data-slot="checkbox-default-indicator--indeterminate"] {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }

  .checkbox[data-indeterminate="true"][data-invalid="true"] [data-slot="checkbox-default-indicator--indeterminate"], .checkbox[data-indeterminate="true"][aria-invalid="true"] [data-slot="checkbox-default-indicator--indeterminate"] {
    color: var(--danger-foreground);
  }

  .checkbox__control {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    border-radius: calc(var(--radius) * .75);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-width: var(--border-width-field);
    border-color: var(--field-border, var(--border));
    background-color: var(--field-background, var(--default));
    --tw-shadow: var(--field-shadow);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-outline-style: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), transform .1s var(--ease-out);
    outline-style: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: relative;
    overflow: hidden;
  }

  .checkbox__control:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .checkbox__control:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .checkbox__control:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .checkbox__control:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .checkbox__control:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .checkbox__control:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .checkbox__control {
    cursor: var(--cursor-interactive);
  }

  .checkbox__control:before {
    pointer-events: none;
    z-index: 0;
    transform-origin: center;
    --tw-scale-x: 70%;
    --tw-scale-y: 70%;
    --tw-scale-z: 70%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
    border-radius: calc(var(--radius) * .75);
    background-color: var(--accent);
    opacity: 0;
    --tw-content: "";
    content: var(--tw-content);
    transition: scale .1s var(--ease-linear), opacity .2s var(--ease-linear), background-color .2s var(--ease-out);
    position: absolute;
    inset: 0;
  }

  .checkbox__control:before:is() {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .checkbox__control:before:not(:is()) {
      transition-property: none;
    }
  }

  .checkbox:focus-visible .checkbox__control, .checkbox:has([data-slot="checkbox-content"][data-focus-visible="true"]) .checkbox__control, .checkbox [data-slot="checkbox-content"][data-focus-visible="true"] .checkbox__control {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: var(--ring-offset-width);
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--background);
    --tw-outline-style: none;
    outline-style: none;
  }

  .checkbox:hover .checkbox__control, .checkbox:has([data-slot="checkbox-content"][data-hovered="true"]) .checkbox__control, .checkbox [data-slot="checkbox-content"][data-hovered="true"] .checkbox__control {
    border-color: var(--field-border-hover);
  }

  :is(.checkbox:hover .checkbox__control, .checkbox:has([data-slot="checkbox-content"][data-hovered="true"]) .checkbox__control, .checkbox [data-slot="checkbox-content"][data-hovered="true"] .checkbox__control):before {
    background-color: var(--accent-hover);
  }

  .checkbox[aria-checked="true"] .checkbox__control, .checkbox[data-selected="true"] .checkbox__control {
    color: var(--accent-foreground);
    border-color: #0000;
  }

  :is(.checkbox[aria-checked="true"] .checkbox__control, .checkbox[data-selected="true"] .checkbox__control):before {
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
    --tw-scale-z: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
    opacity: 1;
  }

  .checkbox[data-indeterminate="true"] .checkbox__control {
    background-color: var(--accent);
    color: var(--accent-foreground);
  }

  .checkbox:active[data-indeterminate="true"] .checkbox__control, .checkbox[data-pressed="true"][data-indeterminate="true"] .checkbox__control, .checkbox:has([data-slot="checkbox-content"][data-pressed="true"])[data-indeterminate="true"] .checkbox__control {
    background-color: var(--accent-hover);
  }

  .checkbox[data-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control, .checkbox[aria-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
    outline-color: var(--danger);
    --tw-outline-style: solid;
    --tw-ring-offset-width: 3px;
    outline-style: solid;
  }

  :is(.checkbox[data-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control, .checkbox[aria-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control):focus, :is(.checkbox[data-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control, .checkbox[aria-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control):focus-visible, :is(.checkbox[data-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control, .checkbox[aria-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control)[data-focused="true"], :is(.checkbox[data-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control, .checkbox[aria-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control)[data-focus-visible="true"], :is(.checkbox[data-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control, .checkbox[aria-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control):focus-within, :is(.checkbox[data-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control, .checkbox[aria-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control)[data-focus-within="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--danger);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .checkbox[data-invalid="true"][aria-checked="true"] .checkbox__control, .checkbox[data-invalid="true"][data-selected="true"] .checkbox__control, .checkbox[aria-invalid="true"][aria-checked="true"] .checkbox__control, .checkbox[aria-invalid="true"][data-selected="true"] .checkbox__control {
    background-color: var(--danger);
    color: var(--danger-foreground);
    border-color: #0000;
  }

  :is(.checkbox[data-invalid="true"][aria-checked="true"] .checkbox__control, .checkbox[data-invalid="true"][data-selected="true"] .checkbox__control, .checkbox[aria-invalid="true"][aria-checked="true"] .checkbox__control, .checkbox[aria-invalid="true"][data-selected="true"] .checkbox__control):before {
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
    --tw-scale-z: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
    background-color: var(--danger);
    opacity: 1;
  }

  .checkbox[data-indeterminate="true"][aria-invalid="true"] .checkbox__control, .checkbox[data-indeterminate="true"][data-invalid="true"] .checkbox__control {
    background-color: var(--danger);
    color: var(--danger-foreground);
  }

  .checkbox__indicator {
    z-index: 10;
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
  }

  .checkbox__indicator svg {
    width: 100%;
    height: 100%;
    transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .checkbox--disabled {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  .checkbox--secondary .checkbox__control {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    background-color: var(--checkbox-control-bg);
    --checkbox-control-bg: var(--default);
  }

  .checkbox:hover :is(.checkbox--secondary .checkbox__control), .checkbox:has([data-slot="checkbox-content"][data-hovered="true"]) :is(.checkbox--secondary .checkbox__control), .checkbox [data-slot="checkbox-content"][data-hovered="true"] :is(.checkbox--secondary .checkbox__control) {
    border-color: var(--field-border-hover);
  }

  .checkbox__content {
    cursor: inherit;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
    --tw-outline-style: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    outline-style: none;
    display: inline-flex;
    position: relative;
  }

  .checkbox--secondary:not([aria-checked="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) .checkbox__control {
    background-color: var(--checkbox-control-bg);
  }

  :is(.checkbox--secondary[aria-checked="true"] .checkbox__control, .checkbox--secondary[data-selected="true"] .checkbox__control):before, .checkbox--secondary[data-indeterminate="true"] .checkbox__control, .checkbox--secondary[data-indeterminate="true"] .checkbox__control:before {
    background-color: var(--accent);
  }

  .fieldset {
    gap: calc(var(--spacing) * 6);
    flex-direction: column;
    flex: 1 1 0;
    display: flex;
  }

  .fieldset__legend {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
  }

  .fieldset__field_group {
    width: 100%;
  }

  :where(.fieldset__field_group > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
  }

  .fieldset__actions {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-top: var(--spacing);
    display: flex;
  }

  .input-otp {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    display: flex;
    position: relative;
  }

  .input-otp[data-disabled="true"] {
    cursor: not-allowed;
    opacity: .5;
  }

  .input-otp__group {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    display: flex;
  }

  .input-otp__slot {
    height: calc(var(--spacing) * 10);
    width: calc(var(--spacing) * 9.5);
    border-style: var(--tw-border-style);
    background-color: var(--field-background, var(--default));
    color: var(--field-foreground, var(--foreground));
    --tw-shadow: var(--field-shadow);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    border-radius: var(--field-radius, calc(var(--radius) * 1.5));
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-outline-style: none;
    border-width: 1px;
    border-width: var(--border-width-field);
    border-color: var(--field-border);
    transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out);
    outline-style: none;
    flex: 1;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
  }

  .input-otp__slot:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .input-otp__slot:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .input-otp__slot:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .input-otp__slot:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .input-otp__slot:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .input-otp__slot:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  @media (hover: hover) {
    .input-otp__slot:hover, .input-otp__slot[data-hovered="true"] {
      background-color: var(--field-hover);
      border-color: var(--field-border-hover);
    }
  }

  .input-otp__slot[data-active="true"] {
    z-index: 10;
    background-color: var(--field-focus);
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-outline-style: none;
    outline-style: none;
  }

  .input-otp__slot[data-filled="true"] {
    background-color: var(--field-focus);
  }

  .input-otp__slot[data-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  .input-otp__slot[data-invalid="true"] {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
    outline-color: var(--danger);
    --tw-outline-style: solid;
    --tw-ring-offset-width: 3px;
    outline-style: solid;
  }

  .input-otp__slot[data-invalid="true"]:focus, .input-otp__slot[data-invalid="true"]:focus-visible, .input-otp__slot[data-invalid="true"][data-focused="true"], .input-otp__slot[data-invalid="true"][data-focus-visible="true"], .input-otp__slot[data-invalid="true"]:focus-within, .input-otp__slot[data-invalid="true"][data-focus-within="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--danger);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .input-otp__slot[data-invalid="true"] {
    background-color: var(--field-focus);
  }

  .input-otp__slot-value {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    --tw-tracking: -.27px;
    letter-spacing: -.27px;
    animation: slot-value-in .25s var(--ease-smooth) both;
    transform-origin: bottom;
  }

  .input-otp__slot-value:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .input-otp__slot-value:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .input-otp__slot-value:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    animation: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .input-otp__slot-value:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .input-otp__slot-value:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .input-otp__slot-value:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      animation: none;
    }
  }

  .input-otp__caret {
    height: calc(var(--spacing) * 4);
    border-radius: calc(var(--radius) * .5);
    background-color: var(--field-placeholder, var(--muted));
    width: 2px;
    animation: 1.2s ease-out infinite caret-blink;
    position: absolute;
  }

  .input-otp__separator {
    border-radius: calc(var(--radius) * .5);
    background-color: var(--separator);
    flex-shrink: 0;
    width: 6px;
    height: 2px;
  }

  .input-otp--secondary .input-otp__slot {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    background-color: var(--input-otp-slot-bg);
    --input-otp-slot-bg: var(--default);
    --input-otp-slot-bg-hover: var(--default-hover);
    --input-otp-slot-bg-focus: var(--default);
  }

  @media (hover: hover) {
    .input-otp--secondary .input-otp__slot:hover, .input-otp--secondary .input-otp__slot[data-hovered="true"] {
      background-color: var(--input-otp-slot-bg-hover);
    }
  }

  .input-otp--secondary .input-otp__slot[data-active="true"], .input-otp--secondary .input-otp__slot[data-filled="true"] {
    background-color: var(--input-otp-slot-bg-focus);
  }

  @keyframes slot-value-in {
    0% {
      opacity: 0;
      transform: translateY(8px) scale(.8);
    }

    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .input {
    border-radius: var(--field-radius, calc(var(--radius) * 1.5));
    border-style: var(--tw-border-style);
    background-color: var(--field-background, var(--default));
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    color: var(--field-foreground, var(--foreground));
    --tw-shadow: var(--field-shadow);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-outline-style: none;
    border-width: 1px;
    outline-style: none;
  }

  .input::placeholder {
    color: var(--field-placeholder, var(--muted));
  }

  @media (min-width: 40rem) {
    .input {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }

  .input {
    border-width: var(--border-width-field);
    border-color: var(--field-border);
    transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out);
  }

  .input:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .input:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .input:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .input:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .input:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .input:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  @media (hover: hover) {
    .input:hover:not(:focus):not(:focus-visible), .input[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) {
      background-color: var(--field-hover);
      border-color: var(--field-border-hover);
    }
  }

  .input:focus, .input[data-focused="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-outline-style: none;
    border-color: var(--field-border-focus);
    background-color: var(--field-focus);
    outline-style: none;
  }

  .input[data-invalid="true"] {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
    outline-color: var(--danger);
    --tw-outline-style: solid;
    --tw-ring-offset-width: 3px;
    outline-style: solid;
  }

  .input[data-invalid="true"]:focus, .input[data-invalid="true"]:focus-visible, .input[data-invalid="true"][data-focused="true"], .input[data-invalid="true"][data-focus-visible="true"], .input[data-invalid="true"]:focus-within, .input[data-invalid="true"][data-focus-within="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--danger);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .input[data-invalid="true"] {
    background-color: var(--field-focus);
  }

  .input:disabled, .input[data-disabled="true"], .input[aria-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  .input--secondary {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    background-color: var(--input-bg);
    --input-bg: var(--default);
    --input-bg-hover: var(--default-hover);
    --input-bg-focus: var(--default);
  }

  @media (hover: hover) {
    .input--secondary:hover:not(:focus):not(:focus-visible), .input--secondary[data-hovered="true"]:not([data-focus-visible="true"]):not([data-focused="true"]) {
      background-color: var(--input-bg-hover);
    }
  }

  .input--secondary:focus, .input--secondary[data-focused="true"] {
    background-color: var(--input-bg-focus);
  }

  .input--secondary[data-invalid="true"] {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
    outline-color: var(--danger);
    --tw-outline-style: solid;
    --tw-ring-offset-width: 3px;
    outline-style: solid;
  }

  .input--secondary[data-invalid="true"]:focus, .input--secondary[data-invalid="true"]:focus-visible, .input--secondary[data-invalid="true"][data-focused="true"], .input--secondary[data-invalid="true"][data-focus-visible="true"], .input--secondary[data-invalid="true"]:focus-within, .input--secondary[data-invalid="true"][data-focus-within="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--danger);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .input--secondary[data-invalid="true"] {
    background-color: var(--input-bg-focus);
  }

  .input--full-width {
    width: 100%;
  }

  .input-group {
    min-height: calc(var(--spacing) * 9);
    border-radius: var(--field-radius, calc(var(--radius) * 1.5));
    border-style: var(--tw-border-style);
    background-color: var(--field-background, var(--default));
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--field-foreground, var(--foreground));
    --tw-shadow: var(--field-shadow);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-outline-style: none;
    border-width: 1px;
    border-width: var(--border-width-field);
    border-color: var(--field-border);
    outline-style: none;
    align-items: center;
    display: inline-flex;
  }

  .input-group:has([data-slot="input-group-textarea"]) {
    align-items: flex-start;
    height: auto;
  }

  .input-group {
    transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out);
  }

  .input-group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .input-group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .input-group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .input-group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .input-group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .input-group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  @media (hover: hover) {
    .input-group:hover:not(:focus-within), .input-group[data-hovered="true"]:not([data-focus-within="true"]) {
      background-color: var(--field-hover);
      border-color: var(--field-border-hover);
    }
  }

  .input-group:has([data-slot="input-group-input"]:focus), .input-group:has([data-slot="input-group-textarea"]:focus) {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-outline-style: none;
    border-color: var(--field-border-focus);
    background-color: var(--field-focus);
    outline-style: none;
  }

  .input-group[data-invalid="true"] {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
    outline-color: var(--danger);
    --tw-outline-style: solid;
    --tw-ring-offset-width: 3px;
    outline-style: solid;
  }

  .input-group[data-invalid="true"]:focus, .input-group[data-invalid="true"]:focus-visible, .input-group[data-invalid="true"][data-focused="true"], .input-group[data-invalid="true"][data-focus-visible="true"], .input-group[data-invalid="true"]:focus-within, .input-group[data-invalid="true"][data-focus-within="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--danger);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .input-group[data-invalid="true"] {
    background-color: var(--field-focus);
    border-color: var(--color-field-border-invalid);
  }

  .input-group[data-disabled="true"], .input-group[aria-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  :-webkit-any(.input-group:has([data-slot="input-group-input"]:-webkit-autofill), .input-group:has([data-slot="input-group-input"]:autofill)) {
    background-color: var(--field-focus);
    border-color: var(--field-border-focus);
  }

  :is(.input-group:has([data-slot="input-group-input"]:autofill), .input-group:has([data-slot="input-group-input"]:autofill)) {
    background-color: var(--field-focus);
    border-color: var(--field-border-focus);
  }

  .input-group__input {
    border-style: var(--tw-border-style);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-outline-style: none;
    background-color: #0000;
    border-width: 0;
    border-radius: 0;
    outline-style: none;
    flex: 1;
  }

  .input-group__input::placeholder {
    color: var(--field-placeholder, var(--muted));
  }

  @media (min-width: 40rem) {
    .input-group__input {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }

  .input-group:has([data-slot="input-group-prefix"]) .input-group__input {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding-left: 0;
  }

  .input-group:has([data-slot="input-group-suffix"]) .input-group__input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding-right: 0;
  }

  .input-group__input:focus, .input-group__input:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }

  .input-group__input:-webkit-autofill {
    -webkit-text-fill-color: var(--field-foreground);
    caret-color: var(--field-foreground);
    transition: background-color 9999s ease-in-out;
    box-shadow: inset 0 0 0 1000px #0000;
  }

  .input-group__input:-webkit-autofill:hover {
    -webkit-text-fill-color: var(--field-foreground);
    caret-color: var(--field-foreground);
    transition: background-color 9999s ease-in-out;
    box-shadow: inset 0 0 0 1000px #0000;
  }

  .input-group__input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--field-foreground);
    caret-color: var(--field-foreground);
    transition: background-color 9999s ease-in-out;
    box-shadow: inset 0 0 0 1000px #0000;
  }

  .input-group__input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--field-foreground);
    caret-color: var(--field-foreground);
    transition: background-color 9999s ease-in-out;
    box-shadow: inset 0 0 0 1000px #0000;
  }

  .input-group__input:autofill {
    -webkit-text-fill-color: var(--field-foreground);
    caret-color: var(--field-foreground);
    transition: background-color 9999s ease-in-out;
    box-shadow: inset 0 0 0 1000px #0000;
  }

  .input-group__input[data-slot="input-group-textarea"] {
    resize: vertical;
    min-height: 38px;
  }

  .input-group__prefix {
    border-top-left-radius: var(--field-radius, calc(var(--radius) * 1.5));
    border-bottom-left-radius: var(--field-radius, calc(var(--radius) * 1.5));
    height: 100%;
    padding-inline: calc(var(--spacing) * 3);
    color: var(--field-placeholder, var(--muted));
    border-width: var(--border-width-field);
    border-color: var(--field-border);
    border-style: solid;
    border-right-color: var(--field-border);
    background-color: #0000;
    border-top: none;
    border-bottom: none;
    border-left: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .input-group:has([data-slot="input-group-textarea"]) .input-group__prefix {
    align-items: flex-start;
    padding-top: .5rem;
  }

  .input-group__prefix {
    transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth);
  }

  .input-group__prefix:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .input-group__prefix:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .input-group__prefix:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .input-group__prefix:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .input-group__prefix:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .input-group__prefix:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .input-group__suffix {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: var(--field-radius, calc(var(--radius) * 1.5));
    border-bottom-right-radius: var(--field-radius, calc(var(--radius) * 1.5));
    height: 100%;
    padding-inline: calc(var(--spacing) * 3);
    color: var(--field-placeholder, var(--muted));
    border-width: var(--border-width-field);
    border-color: var(--field-border);
    border-style: solid;
    border-left-color: var(--field-border);
    background-color: #0000;
    border-top: none;
    border-bottom: none;
    border-right: none;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .input-group:has([data-slot="input-group-textarea"]) .input-group__suffix {
    align-items: flex-start;
    padding-top: .5rem;
  }

  .input-group__suffix {
    transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth);
  }

  .input-group__suffix:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .input-group__suffix:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .input-group__suffix:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .input-group__suffix:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .input-group__suffix:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .input-group__suffix:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .input-group--secondary {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    background-color: var(--input-group-bg);
    --input-group-bg: var(--default);
    --input-group-bg-hover: var(--default-hover);
    --input-group-bg-focus: var(--default);
  }

  @media (hover: hover) {
    .input-group--secondary:hover:not(:focus-within), .input-group--secondary[data-hovered="true"]:not([data-focus-within="true"]) {
      background-color: var(--input-group-bg-hover);
    }
  }

  .input-group--secondary:has([data-slot="input-group-input"]:focus), .input-group--secondary:has([data-slot="input-group-textarea"]:focus) {
    background-color: var(--input-group-bg-focus);
  }

  .input-group--secondary[data-invalid="true"] {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
    outline-color: var(--danger);
    --tw-outline-style: solid;
    --tw-ring-offset-width: 3px;
    outline-style: solid;
  }

  .input-group--secondary[data-invalid="true"]:focus, .input-group--secondary[data-invalid="true"]:focus-visible, .input-group--secondary[data-invalid="true"][data-focused="true"], .input-group--secondary[data-invalid="true"][data-focus-visible="true"], .input-group--secondary[data-invalid="true"]:focus-within, .input-group--secondary[data-invalid="true"][data-focus-within="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--danger);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .input-group--secondary[data-invalid="true"] {
    border-color: var(--color-field-border-invalid);
    background-color: var(--input-group-bg-focus);
  }

  .input-group--secondary [data-slot="input-group-input"], .input-group--secondary [data-slot="input-group-textarea"] {
    background-color: #0000;
  }

  .input-group--full-width {
    width: 100%;
  }

  .number-field {
    gap: var(--spacing);
    flex-direction: column;
    display: flex;
  }

  :is(.number-field[data-invalid="true"], .number-field[aria-invalid="true"]) [data-slot="description"] {
    display: none;
  }

  .number-field [data-slot="label"] {
    width: fit-content;
  }

  .number-field__group {
    height: calc(var(--spacing) * 9);
    border-radius: var(--field-radius, calc(var(--radius) * 1.5));
    border-style: var(--tw-border-style);
    background-color: var(--field-background, var(--default));
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--field-foreground, var(--foreground));
    --tw-shadow: var(--field-shadow);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-outline-style: none;
    border-width: 1px;
    border-width: var(--border-width-field);
    border-color: var(--field-border);
    transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out);
    outline-style: none;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    display: grid;
    overflow: hidden;
  }

  .number-field__group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .number-field__group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .number-field__group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .number-field__group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .number-field__group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .number-field__group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  @media (hover: hover) {
    .number-field__group:hover:not(:focus-within), .number-field__group[data-hovered="true"]:not([data-focus-within="true"]) {
      background-color: var(--field-hover);
      border-color: var(--field-border-hover);
    }
  }

  .number-field__group[data-focus-within="true"], .number-field__group:focus-within {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-outline-style: none;
    border-color: var(--field-border-focus);
    background-color: var(--field-focus);
    outline-style: none;
  }

  .number-field__group[data-invalid="true"] {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
    outline-color: var(--danger);
    --tw-outline-style: solid;
    --tw-ring-offset-width: 3px;
    outline-style: solid;
  }

  .number-field__group[data-invalid="true"]:focus, .number-field__group[data-invalid="true"]:focus-visible, .number-field__group[data-invalid="true"][data-focused="true"], .number-field__group[data-invalid="true"][data-focus-visible="true"], .number-field__group[data-invalid="true"]:focus-within, .number-field__group[data-invalid="true"][data-focus-within="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--danger);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .number-field__group[data-invalid="true"] {
    background-color: var(--field-focus);
    border-color: var(--color-field-border-invalid);
  }

  .number-field__group[data-disabled="true"], .number-field__group[aria-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  :-webkit-any(.number-field__group:has([data-slot="number-field-input"]:-webkit-autofill), .number-field__group:has([data-slot="number-field-input"]:autofill)) {
    background-color: var(--field-focus);
    border-color: var(--field-border-focus);
  }

  :is(.number-field__group:has([data-slot="number-field-input"]:autofill), .number-field__group:has([data-slot="number-field-input"]:autofill)) {
    background-color: var(--field-focus);
    border-color: var(--field-border-focus);
  }

  .number-field__input {
    border-style: var(--tw-border-style);
    min-width: 0;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-outline-style: none;
    background-color: #0000;
    border-width: 0;
    border-radius: 0;
    outline-style: none;
  }

  @media (min-width: 40rem) {
    .number-field__input {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }

  .number-field__group:has([slot="decrement"]) .number-field__input {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .number-field__group:has([slot="increment"]) .number-field__input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .number-field__input:focus, .number-field__input:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }

  .number-field__input:-webkit-autofill {
    -webkit-text-fill-color: var(--field-foreground);
    caret-color: var(--field-foreground);
    transition: background-color 9999s ease-in-out;
    box-shadow: inset 0 0 0 1000px #0000;
  }

  .number-field__input:-webkit-autofill:hover {
    -webkit-text-fill-color: var(--field-foreground);
    caret-color: var(--field-foreground);
    transition: background-color 9999s ease-in-out;
    box-shadow: inset 0 0 0 1000px #0000;
  }

  .number-field__input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--field-foreground);
    caret-color: var(--field-foreground);
    transition: background-color 9999s ease-in-out;
    box-shadow: inset 0 0 0 1000px #0000;
  }

  .number-field__input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--field-foreground);
    caret-color: var(--field-foreground);
    transition: background-color 9999s ease-in-out;
    box-shadow: inset 0 0 0 1000px #0000;
  }

  .number-field__input:autofill {
    -webkit-text-fill-color: var(--field-foreground);
    caret-color: var(--field-foreground);
    transition: background-color 9999s ease-in-out;
    box-shadow: inset 0 0 0 1000px #0000;
  }

  .number-field__increment-button, .number-field__decrement-button {
    height: 100%;
    width: calc(var(--spacing) * 10);
    color: var(--field-foreground, var(--foreground));
    --tw-outline-style: none;
    border-width: var(--border-width-field);
    border-color: var(--field-border);
    transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth);
    background-color: #0000;
    border-style: solid;
    border-radius: 0;
    outline-style: none;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  :is(.number-field__increment-button, .number-field__decrement-button):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), :is(.number-field__increment-button, .number-field__decrement-button):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, :is(.number-field__increment-button, .number-field__decrement-button):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    :is(.number-field__increment-button, .number-field__decrement-button):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), :is(.number-field__increment-button, .number-field__decrement-button):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, :is(.number-field__increment-button, .number-field__decrement-button):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .number-field__increment-button, .number-field__decrement-button {
    cursor: var(--cursor-interactive);
  }

  :is(.number-field__increment-button, .number-field__decrement-button):active, :is(.number-field__increment-button, .number-field__decrement-button)[data-pressed="true"] {
    background-color: var(--field-foreground, var(--foreground));
  }

  @supports (color: color-mix(in lab, red, red)) {
    :is(.number-field__increment-button, .number-field__decrement-button):active, :is(.number-field__increment-button, .number-field__decrement-button)[data-pressed="true"] {
      background-color: color-mix(in oklab, var(--field-foreground, var(--foreground)) 10%, transparent);
    }
  }

  :is(.number-field__increment-button, .number-field__decrement-button):active, :is(.number-field__increment-button, .number-field__decrement-button)[data-pressed="true"] {
    transform: scale(.97);
  }

  :is(.number-field__increment-button, .number-field__decrement-button):disabled, :is(.number-field__increment-button, .number-field__decrement-button)[data-disabled="true"], :is(.number-field__increment-button, .number-field__decrement-button)[aria-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  :is(.number-field__increment-button, .number-field__decrement-button) [data-slot="number-field-increment-button-icon"], :is(.number-field__increment-button, .number-field__decrement-button) [data-slot="number-field-decrement-button-icon"] {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .number-field__increment-button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: var(--field-radius, calc(var(--radius) * 1.5));
    border-bottom-right-radius: var(--field-radius, calc(var(--radius) * 1.5));
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
    border-color: var(--field-placeholder, var(--muted));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .number-field__increment-button {
      border-color: color-mix(in oklab, var(--field-placeholder, var(--muted)) 15%, transparent);
    }
  }

  .number-field__decrement-button {
    border-top-left-radius: var(--field-radius, calc(var(--radius) * 1.5));
    border-bottom-left-radius: var(--field-radius, calc(var(--radius) * 1.5));
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
    border-color: var(--field-placeholder, var(--muted));
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .number-field__decrement-button {
      border-color: color-mix(in oklab, var(--field-placeholder, var(--muted)) 15%, transparent);
    }
  }

  .number-field--secondary .number-field__group {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    background-color: var(--number-field-group-bg);
    --number-field-group-bg: var(--default);
    --number-field-group-bg-hover: var(--default-hover);
    --number-field-group-bg-focus: var(--default);
  }

  @media (hover: hover) {
    .number-field--secondary .number-field__group:hover:not(:focus-within), .number-field--secondary .number-field__group[data-hovered="true"]:not([data-focus-within="true"]) {
      background-color: var(--number-field-group-bg-hover);
    }
  }

  .number-field--secondary .number-field__group:focus-within, .number-field--secondary .number-field__group[data-focus-within="true"] {
    background-color: var(--number-field-group-bg-focus);
  }

  .number-field--secondary .number-field__group[data-invalid="true"] {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
    outline-color: var(--danger);
    --tw-outline-style: solid;
    --tw-ring-offset-width: 3px;
    outline-style: solid;
  }

  .number-field--secondary .number-field__group[data-invalid="true"]:focus, .number-field--secondary .number-field__group[data-invalid="true"]:focus-visible, .number-field--secondary .number-field__group[data-invalid="true"][data-focused="true"], .number-field--secondary .number-field__group[data-invalid="true"][data-focus-visible="true"], .number-field--secondary .number-field__group[data-invalid="true"]:focus-within, .number-field--secondary .number-field__group[data-invalid="true"][data-focus-within="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--danger);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .number-field--secondary .number-field__group[data-invalid="true"] {
    border-color: var(--color-field-border-invalid);
    background-color: var(--number-field-group-bg-focus);
  }

  .number-field--secondary .number-field__group [data-slot="number-field-input"] {
    background-color: #0000;
  }

  .number-field--full-width, .number-field__group--full-width {
    width: 100%;
  }

  .radio-group {
    flex-direction: column;
    display: flex;
  }

  .radio-group[data-orientation="vertical"] [data-slot="radio"] {
    margin-top: calc(var(--spacing) * 4);
  }

  .radio-group[data-orientation="horizontal"] {
    gap: calc(var(--spacing) * 4);
    flex-flow: wrap;
  }

  .radio-group--secondary .radio__control {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    background-color: var(--radio-control-bg);
    --radio-control-bg: var(--default);
    --radio-control-bg-hover: var(--default-hover);
  }

  .radio:has([data-slot="radio-content"][data-hovered="true"]) :is(.radio-group--secondary .radio__control), .radio [data-slot="radio-content"][data-hovered="true"] :is(.radio-group--secondary .radio__control) {
    border-color: var(--field-border-hover);
  }

  .radio:not([data-selected]):not(:has(input:checked)) :is(.radio-group--secondary .radio__control) .radio__indicator:empty:before {
    background-color: var(--radio-control-bg);
  }

  .radio:has([data-slot="radio-content"][data-hovered="true"]):not([data-selected]):not(:has(input:checked)) :is(.radio-group--secondary .radio__control) .radio__indicator:empty:before {
    background-color: var(--radio-control-bg-hover);
  }

  .radio {
    align-items: flex-start;
    gap: var(--spacing);
    --tw-outline-style: none;
    -webkit-tap-highlight-color: transparent;
    cursor: var(--cursor-interactive);
    outline-style: none;
    flex-direction: column;
    display: flex;
  }

  .radio [data-slot="label"] {
    -webkit-user-select: none;
    user-select: none;
  }

  .radio .radio__content [data-slot="label"] {
    cursor: var(--cursor-interactive);
  }

  .radio > [data-slot="description"], .radio > [data-slot="field-error"] {
    cursor: default;
    width: 100%;
    min-width: 0;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    text-wrap: wrap;
    overflow-wrap: break-word;
    color: var(--muted);
    -webkit-user-select: none;
    user-select: none;
    padding-inline-start: calc(var(--spacing) * 7);
  }

  .radio:disabled, .radio[data-disabled="true"], .radio[aria-disabled="true"], :is(.radio:disabled, .radio[data-disabled="true"], .radio[aria-disabled="true"]) [data-slot="description"], :is(.radio:disabled, .radio[data-disabled="true"], .radio[aria-disabled="true"]) [data-slot="field-error"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  .radio__content {
    cursor: inherit;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
    --tw-outline-style: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    outline-style: none;
    display: inline-flex;
    position: relative;
  }

  .radio__control {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    border-radius: calc(var(--radius) * 1);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-width: var(--border-width-field);
    border-color: var(--field-border, var(--border));
    background-color: var(--field-background, var(--default));
    --tw-shadow: var(--field-shadow);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-outline-style: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), transform .1s var(--ease-out);
    outline-style: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: relative;
  }

  .radio__control:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .radio__control:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .radio__control:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .radio__control:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .radio__control:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .radio__control:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .radio__control {
    cursor: var(--cursor-interactive);
  }

  .radio:has([data-slot="radio-content"][data-focus-visible="true"]) .radio__control, .radio [data-slot="radio-content"][data-focus-visible="true"] .radio__control {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: var(--ring-offset-width);
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--background);
    --tw-outline-style: none;
    outline-style: none;
  }

  .radio:has([data-slot="radio-content"][data-hovered="true"]) .radio__control, .radio [data-slot="radio-content"][data-hovered="true"] .radio__control {
    border-color: var(--field-border-hover);
  }

  .radio:has([data-slot="radio-content"][data-hovered="true"]):not([data-selected]):not(:has(input:checked)) .radio__control .radio__indicator:empty:before {
    background-color: var(--field-hover);
  }

  .radio:has([data-slot="radio-content"][data-pressed="true"]) .radio__control, .radio [data-slot="radio-content"][data-pressed="true"] .radio__control {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .radio[data-selected] .radio__control, .radio:has([data-slot="radio-content"][aria-checked="true"]) .radio__control, .radio:has(input:checked) .radio__control {
    background-color: var(--accent);
    border-color: #0000;
  }

  .radio[data-selected]:has([data-slot="radio-content"][data-pressed="true"]) .radio__control, .radio:has([data-slot="radio-content"][data-pressed="true"][aria-checked="true"]) .radio__control, .radio:has(input:checked):has([data-slot="radio-content"][data-pressed="true"]) .radio__control {
    background-color: var(--accent-hover);
  }

  .radio[data-invalid="true"] .radio__control, .radio[aria-invalid="true"] .radio__control {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
    outline-color: var(--danger);
    --tw-outline-style: solid;
    --tw-ring-offset-width: 3px;
    outline-style: solid;
  }

  :is(.radio[data-invalid="true"] .radio__control, .radio[aria-invalid="true"] .radio__control):focus, :is(.radio[data-invalid="true"] .radio__control, .radio[aria-invalid="true"] .radio__control):focus-visible, :is(.radio[data-invalid="true"] .radio__control, .radio[aria-invalid="true"] .radio__control)[data-focused="true"], :is(.radio[data-invalid="true"] .radio__control, .radio[aria-invalid="true"] .radio__control)[data-focus-visible="true"], :is(.radio[data-invalid="true"] .radio__control, .radio[aria-invalid="true"] .radio__control):focus-within, :is(.radio[data-invalid="true"] .radio__control, .radio[aria-invalid="true"] .radio__control)[data-focus-within="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--danger);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .radio[data-invalid="true"][data-selected] .radio__control, .radio[aria-invalid="true"][data-selected] .radio__control, .radio[data-invalid="true"]:has(input:checked) .radio__control, .radio[aria-invalid="true"]:has(input:checked) .radio__control {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
    outline-color: var(--danger);
    --tw-outline-style: solid;
    --tw-ring-offset-width: 3px;
    outline-style: solid;
  }

  :is(.radio[data-invalid="true"][data-selected] .radio__control, .radio[aria-invalid="true"][data-selected] .radio__control, .radio[data-invalid="true"]:has(input:checked) .radio__control, .radio[aria-invalid="true"]:has(input:checked) .radio__control):focus, :is(.radio[data-invalid="true"][data-selected] .radio__control, .radio[aria-invalid="true"][data-selected] .radio__control, .radio[data-invalid="true"]:has(input:checked) .radio__control, .radio[aria-invalid="true"]:has(input:checked) .radio__control):focus-visible, :is(.radio[data-invalid="true"][data-selected] .radio__control, .radio[aria-invalid="true"][data-selected] .radio__control, .radio[data-invalid="true"]:has(input:checked) .radio__control, .radio[aria-invalid="true"]:has(input:checked) .radio__control)[data-focused="true"], :is(.radio[data-invalid="true"][data-selected] .radio__control, .radio[aria-invalid="true"][data-selected] .radio__control, .radio[data-invalid="true"]:has(input:checked) .radio__control, .radio[aria-invalid="true"]:has(input:checked) .radio__control)[data-focus-visible="true"], :is(.radio[data-invalid="true"][data-selected] .radio__control, .radio[aria-invalid="true"][data-selected] .radio__control, .radio[data-invalid="true"]:has(input:checked) .radio__control, .radio[aria-invalid="true"]:has(input:checked) .radio__control):focus-within, :is(.radio[data-invalid="true"][data-selected] .radio__control, .radio[aria-invalid="true"][data-selected] .radio__control, .radio[data-invalid="true"]:has(input:checked) .radio__control, .radio[aria-invalid="true"]:has(input:checked) .radio__control)[data-focus-within="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--danger);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .radio__indicator {
    pointer-events: none;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    inset: 0;
  }

  .radio__indicator:empty:before {
    content: "";
    border-radius: calc(var(--radius) * 1);
    background-color: var(--field-background, var(--default));
    width: 100%;
    height: 100%;
    transition: scale .2s var(--ease-out), background-color .2s var(--ease-out);
    scale: 1;
  }

  .radio__indicator:empty:before:is() {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .radio__indicator:empty:before:not(:is()) {
      transition-property: none;
    }
  }

  .radio[data-selected] .radio__indicator:empty:before, .radio:has([data-slot="radio-content"][aria-checked="true"]) .radio__indicator:empty:before, .radio:has(input:checked) .radio__indicator:empty:before {
    background-color: var(--accent-foreground);
    scale: .4286;
  }

  .radio[data-selected]:has([data-slot="radio-content"][data-pressed="true"]) .radio__indicator:empty:before, .radio:has([data-slot="radio-content"][data-pressed="true"][aria-checked="true"]) .radio__indicator:empty:before, .radio:has(input:checked):has([data-slot="radio-content"][data-pressed="true"]) .radio__indicator:empty:before {
    scale: .5714;
  }

  .radio--disabled {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  .textfield {
    gap: var(--spacing);
    flex-direction: column;
    display: flex;
  }

  :is(.textfield[data-invalid="true"], .textfield[aria-invalid="true"]) [data-slot="description"] {
    display: none;
  }

  .textfield--full-width, .textfield--full-width [data-slot="input"], .textfield--full-width [data-slot="textarea"] {
    width: 100%;
  }

  .search-field {
    gap: var(--spacing);
    flex-direction: column;
    display: flex;
  }

  :is(.search-field[data-invalid="true"], .search-field[aria-invalid="true"]) [data-slot="description"] {
    display: none;
  }

  .search-field [data-slot="label"] {
    width: fit-content;
  }

  .search-field[data-empty="true"] [data-slot="search-field-clear-button"] {
    pointer-events: none;
    opacity: 0;
  }

  .search-field__group {
    height: calc(var(--spacing) * 9);
    border-radius: var(--field-radius, calc(var(--radius) * 1.5));
    border-style: var(--tw-border-style);
    background-color: var(--field-background, var(--default));
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--field-foreground, var(--foreground));
    --tw-shadow: var(--field-shadow);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-outline-style: none;
    border-width: 1px;
    border-width: var(--border-width-field);
    border-color: var(--field-border);
    transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out);
    outline-style: none;
    align-items: center;
    display: inline-flex;
    position: relative;
    overflow: hidden;
  }

  .search-field__group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .search-field__group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .search-field__group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .search-field__group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .search-field__group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .search-field__group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  @media (hover: hover) {
    .search-field__group:hover:not(:focus-within), .search-field__group[data-hovered="true"]:not([data-focus-within="true"]) {
      background-color: var(--field-hover);
      border-color: var(--field-border-hover);
    }
  }

  .search-field__group[data-focus-within="true"], .search-field__group:focus-within {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-outline-style: none;
    outline-style: none;
  }

  .search-field__group[data-invalid="true"] {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
    outline-color: var(--danger);
    --tw-outline-style: solid;
    --tw-ring-offset-width: 3px;
    outline-style: solid;
  }

  .search-field__group[data-invalid="true"]:focus, .search-field__group[data-invalid="true"]:focus-visible, .search-field__group[data-invalid="true"][data-focused="true"], .search-field__group[data-invalid="true"][data-focus-visible="true"], .search-field__group[data-invalid="true"]:focus-within, .search-field__group[data-invalid="true"][data-focus-within="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--danger);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .search-field__group[data-invalid="true"] {
    background-color: var(--field-focus);
    border-color: var(--color-field-border-invalid);
  }

  .search-field__group[data-disabled="true"], .search-field__group[aria-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  :-webkit-any(.search-field__group:has([data-slot="search-field-input"]:-webkit-autofill), .search-field__group:has([data-slot="search-field-input"]:autofill)) {
    background-color: var(--field-focus);
    border-color: var(--field-border-focus);
  }

  :is(.search-field__group:has([data-slot="search-field-input"]:autofill), .search-field__group:has([data-slot="search-field-input"]:autofill)) {
    background-color: var(--field-focus);
    border-color: var(--field-border-focus);
  }

  .search-field__input {
    border-style: var(--tw-border-style);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-outline-style: none;
    background-color: #0000;
    border-width: 0;
    border-radius: 0;
    outline-style: none;
    flex: 1;
  }

  @media (min-width: 40rem) {
    .search-field__input {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }

  .search-field__input::-webkit-search-cancel-button {
    appearance: none;
  }

  .search-field__input::-webkit-search-decoration {
    appearance: none;
  }

  .search-field__group:has([data-slot="search-field-search-icon"]) .search-field__input {
    padding-left: calc(var(--spacing) * 2);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .search-field__group:has([slot="clear"]) .search-field__input {
    padding-right: calc(var(--spacing) * 2);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .search-field__input:focus, .search-field__input:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }

  .search-field__input:-webkit-autofill {
    -webkit-text-fill-color: var(--field-foreground);
    caret-color: var(--field-foreground);
    transition: background-color 9999s ease-in-out;
    box-shadow: inset 0 0 0 1000px #0000;
  }

  .search-field__input:-webkit-autofill:hover {
    -webkit-text-fill-color: var(--field-foreground);
    caret-color: var(--field-foreground);
    transition: background-color 9999s ease-in-out;
    box-shadow: inset 0 0 0 1000px #0000;
  }

  .search-field__input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--field-foreground);
    caret-color: var(--field-foreground);
    transition: background-color 9999s ease-in-out;
    box-shadow: inset 0 0 0 1000px #0000;
  }

  .search-field__input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--field-foreground);
    caret-color: var(--field-foreground);
    transition: background-color 9999s ease-in-out;
    box-shadow: inset 0 0 0 1000px #0000;
  }

  .search-field__input:autofill {
    -webkit-text-fill-color: var(--field-foreground);
    caret-color: var(--field-foreground);
    transition: background-color 9999s ease-in-out;
    box-shadow: inset 0 0 0 1000px #0000;
  }

  .search-field__search-icon {
    pointer-events: none;
    color: var(--field-placeholder, var(--muted));
    margin-right: 0;
    margin-left: calc(var(--spacing) * 3);
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    flex-shrink: 0;
  }

  .search-field__clear-button {
    margin-right: calc(var(--spacing) * 2);
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
    flex-shrink: 0;
  }

  .search-field__clear-button [data-slot="close-button-icon"] {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }

  .search-field--secondary .search-field__group {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    background-color: var(--search-field-group-bg);
    --search-field-group-bg: var(--default);
    --search-field-group-bg-hover: var(--default-hover);
    --search-field-group-bg-focus: var(--default);
  }

  @media (hover: hover) {
    .search-field--secondary .search-field__group:hover:not(:focus-within), .search-field--secondary .search-field__group[data-hovered="true"]:not([data-focus-within="true"]) {
      background-color: var(--search-field-group-bg-hover);
    }
  }

  .search-field--secondary .search-field__group:focus-within, .search-field--secondary .search-field__group[data-focus-within="true"] {
    background-color: var(--search-field-group-bg-focus);
  }

  .search-field--secondary .search-field__group[data-invalid="true"] {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
    outline-color: var(--danger);
    --tw-outline-style: solid;
    --tw-ring-offset-width: 3px;
    outline-style: solid;
  }

  .search-field--secondary .search-field__group[data-invalid="true"]:focus, .search-field--secondary .search-field__group[data-invalid="true"]:focus-visible, .search-field--secondary .search-field__group[data-invalid="true"][data-focused="true"], .search-field--secondary .search-field__group[data-invalid="true"][data-focus-visible="true"], .search-field--secondary .search-field__group[data-invalid="true"]:focus-within, .search-field--secondary .search-field__group[data-invalid="true"][data-focus-within="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--danger);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .search-field--secondary .search-field__group[data-invalid="true"] {
    border-color: var(--color-field-border-invalid);
    background-color: var(--search-field-group-bg-focus);
  }

  .search-field--secondary .search-field__group [data-slot="search-field-input"] {
    background-color: #0000;
  }

  .search-field--full-width, .search-field__group--full-width {
    width: 100%;
  }

  .textarea {
    border-radius: var(--field-radius, calc(var(--radius) * 1.5));
    border-style: var(--tw-border-style);
    background-color: var(--field-background, var(--default));
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    color: var(--field-foreground, var(--foreground));
    --tw-shadow: var(--field-shadow);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-outline-style: none;
    border-width: 1px;
    outline-style: none;
  }

  .textarea::placeholder {
    color: var(--field-placeholder, var(--muted));
  }

  @media (min-width: 40rem) {
    .textarea {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }

  .textarea {
    border-width: var(--border-width-field);
    border-color: var(--field-border);
    min-height: 38px;
    transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out);
  }

  .textarea:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .textarea:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .textarea:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .textarea:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .textarea:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .textarea:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  @media (hover: hover) {
    .textarea:hover:not(:focus):not(:focus-visible), .textarea[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) {
      background-color: var(--field-hover);
      border-color: var(--field-border-hover);
    }
  }

  .textarea:focus, .textarea[data-focused="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-outline-style: none;
    border-color: var(--field-border-focus);
    background-color: var(--field-focus);
    outline-style: none;
  }

  .textarea[data-invalid="true"] {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
    outline-color: var(--danger);
    --tw-outline-style: solid;
    --tw-ring-offset-width: 3px;
    outline-style: solid;
  }

  .textarea[data-invalid="true"]:focus, .textarea[data-invalid="true"]:focus-visible, .textarea[data-invalid="true"][data-focused="true"], .textarea[data-invalid="true"][data-focus-visible="true"], .textarea[data-invalid="true"]:focus-within, .textarea[data-invalid="true"][data-focus-within="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--danger);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .textarea[data-invalid="true"] {
    background-color: var(--field-focus);
  }

  .textarea:disabled, .textarea[data-disabled="true"], .textarea[aria-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  .textarea--secondary {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    background-color: var(--textarea-bg);
    --textarea-bg: var(--default);
    --textarea-bg-hover: var(--default-hover);
    --textarea-bg-focus: var(--default);
  }

  @media (hover: hover) {
    .textarea--secondary:hover:not(:focus):not(:focus-visible), .textarea--secondary[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) {
      background-color: var(--textarea-bg-hover);
    }
  }

  .textarea--secondary:focus, .textarea--secondary[data-focused="true"] {
    background-color: var(--textarea-bg-focus);
  }

  .textarea--secondary[data-invalid="true"] {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
    outline-color: var(--danger);
    --tw-outline-style: solid;
    --tw-ring-offset-width: 3px;
    outline-style: solid;
  }

  .textarea--secondary[data-invalid="true"]:focus, .textarea--secondary[data-invalid="true"]:focus-visible, .textarea--secondary[data-invalid="true"][data-focused="true"], .textarea--secondary[data-invalid="true"][data-focus-visible="true"], .textarea--secondary[data-invalid="true"]:focus-within, .textarea--secondary[data-invalid="true"][data-focus-within="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--danger);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .textarea--secondary[data-invalid="true"] {
    background-color: var(--textarea-bg-focus);
  }

  .textarea--full-width {
    width: 100%;
  }

  .calendar {
    width: calc(var(--spacing) * 63);
    max-width: calc(var(--spacing) * 63);
    container-type: inline-size;
  }

  .calendar--week-view .calendar__cell, .calendar--day-view .calendar__cell {
    aspect-ratio: 1;
    place-self: center;
    width: 100%;
    height: auto;
  }

  .calendar--day-view .calendar__grid {
    flex-direction: column;
    display: flex;
  }

  .calendar--day-view .calendar__grid-header {
    grid-template-columns: repeat(7, 1fr);
    width: 100%;
    display: grid;
  }

  .calendar--day-view .calendar__grid-header > tr {
    display: contents;
  }

  .calendar--day-view .calendar__grid-body {
    margin-top: var(--spacing);
    grid-template-columns: repeat(7, 1fr);
    width: 100%;
    display: grid;
  }

  .calendar--day-view .calendar__grid-body > tr {
    display: contents;
  }

  .calendar--day-view .calendar__grid-body > tr:first-child > td {
    margin-top: 0;
  }

  .calendar__header {
    padding-inline: calc(var(--spacing) * .5);
    padding-bottom: calc(var(--spacing) * 4);
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .calendar__header:has(.calendar-year-picker__trigger[data-open="true"]) .calendar__nav-button {
    pointer-events: none;
    opacity: 0;
  }

  .calendar__heading {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    flex: 1;
  }

  .calendar__nav-button {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
    border-radius: calc(var(--radius) * 2);
    color: var(--accent-soft-foreground);
    will-change: scale;
    transition: transform .25s var(--ease-out), background-color .1s var(--ease-out), box-shadow .1s var(--ease-out), opacity .15s var(--ease-out);
    transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .calendar__nav-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .calendar__nav-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .calendar__nav-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .calendar__nav-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .calendar__nav-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .calendar__nav-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .calendar__nav-button {
    cursor: var(--cursor-interactive);
  }

  @media (hover: hover) {
    .calendar__nav-button:hover, .calendar__nav-button[data-hovered="true"] {
      background-color: var(--default);
      color: var(--accent-soft-foreground);
    }
  }

  .calendar__nav-button:active, .calendar__nav-button[data-pressed="true"] {
    transform: scale(.95);
  }

  .calendar__nav-button:focus-visible, .calendar__nav-button[data-focus-visible="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: var(--ring-offset-width);
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--background);
    --tw-outline-style: none;
    outline-style: none;
  }

  .calendar__nav-button:disabled, .calendar__nav-button[data-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  .calendar__nav-button-icon {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .calendar__grid {
    grid-template-columns: repeat(7, 1fr);
    width: 100%;
    display: grid;
  }

  .calendar__grid[aria-readonly="true"] .calendar__cell {
    pointer-events: none;
  }

  .calendar__grid-header, .calendar__grid-header > tr, .calendar__grid-body, .calendar__grid-body > tr {
    display: contents;
  }

  .calendar__grid-body > tr:first-child > td {
    margin-top: var(--spacing);
  }

  .calendar__grid-row {
    display: contents;
  }

  .calendar__header-cell {
    padding-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--muted);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .calendar__cell {
    aspect-ratio: 1;
    border-radius: calc(var(--radius) * 3);
    text-align: center;
    width: 100%;
    height: 100%;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-outline-style: none;
    -webkit-tap-highlight-color: transparent;
    will-change: scale;
    transition: transform .25s var(--ease-out), box-shadow .1s var(--ease-out);
    transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
    outline-style: none;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
  }

  .calendar__cell:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .calendar__cell:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .calendar__cell:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .calendar__cell:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .calendar__cell:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .calendar__cell:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .calendar__cell {
    cursor: var(--cursor-interactive);
  }

  .calendar__cell:focus-visible:not(:focus), .calendar__cell[data-focus-visible="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: var(--ring-offset-width);
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--background);
    --tw-outline-style: none;
    outline-style: none;
  }

  .calendar__cell[data-today="true"] {
    background-color: var(--accent-soft);
    color: var(--accent-soft-foreground);
  }

  @media (hover: hover) {
    .calendar__cell[data-today="true"]:hover:not([data-selected="true"]), .calendar__cell[data-today="true"][data-hovered="true"]:not([data-selected="true"]) {
      background-color: var(--accent-soft-hover);
    }
  }

  .calendar__cell[data-selected="true"] {
    background-color: var(--accent);
    color: var(--accent-foreground);
  }

  .calendar__cell:active, .calendar__cell[data-pressed="true"] {
    background-color: var(--default);
    transform: scale(.95);
  }

  :is(.calendar__cell:active, .calendar__cell[data-pressed="true"])[data-selected="true"] {
    background-color: var(--accent-hover);
  }

  @media (hover: hover) {
    .calendar__cell:hover:not([data-selected="true"]), .calendar__cell[data-hovered="true"]:not([data-selected="true"]) {
      background-color: var(--default);
    }
  }

  .calendar__cell[data-outside-month="true"] {
    color: var(--muted);
    opacity: .5;
  }

  .calendar__cell[data-selected="true"][data-outside-month="true"] {
    background-color: var(--default);
  }

  .calendar__cell[data-unavailable="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  .calendar__cell:disabled:not([data-outside-month="true"]), .calendar__cell[data-disabled="true"]:not([data-outside-month="true"]) {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
    text-decoration: line-through;
  }

  .calendar__cell-indicator {
    bottom: var(--spacing);
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    width: 3px;
    height: 3px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
    border-radius: calc(var(--radius) * .25);
    background-color: var(--muted);
    position: absolute;
    left: 50%;
  }

  [data-selected="true"] > .calendar__cell-indicator {
    background-color: var(--accent-foreground);
  }

  .range-calendar {
    width: calc(var(--spacing) * 63);
    max-width: calc(var(--spacing) * 63);
    container-type: inline-size;
  }

  .range-calendar--week-view .range-calendar__cell, .range-calendar--day-view .range-calendar__cell {
    aspect-ratio: 1;
    place-self: center;
    width: 100%;
    height: auto;
  }

  .range-calendar--day-view .range-calendar__grid {
    flex-direction: column;
    display: flex;
  }

  .range-calendar--day-view .range-calendar__grid-header {
    grid-template-columns: repeat(7, 1fr);
    width: 100%;
    display: grid;
  }

  .range-calendar--day-view .range-calendar__grid-header > tr {
    display: contents;
  }

  .range-calendar--day-view .range-calendar__grid-body {
    margin-top: var(--spacing);
    grid-template-columns: repeat(7, 1fr);
    width: 100%;
    display: grid;
  }

  .range-calendar--day-view .range-calendar__grid-body > tr {
    display: contents;
  }

  .range-calendar--day-view .range-calendar__grid-body > tr:first-child > td {
    margin-top: 0;
  }

  .range-calendar__header {
    padding-inline: calc(var(--spacing) * .5);
    padding-bottom: calc(var(--spacing) * 4);
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .range-calendar__header:has(.calendar-year-picker__trigger[data-open="true"]) .range-calendar__nav-button {
    pointer-events: none;
    opacity: 0;
  }

  .range-calendar__heading {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    flex: 1;
  }

  .range-calendar__nav-button {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
    border-radius: calc(var(--radius) * 1.5);
    color: var(--accent-soft-foreground);
    will-change: scale;
    transition: transform .25s var(--ease-out), background-color .1s var(--ease-out), box-shadow .1s var(--ease-out), opacity .15s var(--ease-out);
    transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .range-calendar__nav-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .range-calendar__nav-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .range-calendar__nav-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .range-calendar__nav-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .range-calendar__nav-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .range-calendar__nav-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .range-calendar__nav-button {
    cursor: var(--cursor-interactive);
  }

  @media (hover: hover) {
    .range-calendar__nav-button:hover, .range-calendar__nav-button[data-hovered="true"] {
      background-color: var(--default);
      color: var(--accent-soft-foreground);
    }
  }

  .range-calendar__nav-button:active, .range-calendar__nav-button[data-pressed="true"] {
    transform: scale(.95);
  }

  .range-calendar__nav-button:focus-visible, .range-calendar__nav-button[data-focus-visible="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: var(--ring-offset-width);
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--background);
    --tw-outline-style: none;
    outline-style: none;
  }

  .range-calendar__nav-button:disabled, .range-calendar__nav-button[data-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  .range-calendar__nav-button-icon {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .range-calendar__grid {
    grid-template-columns: repeat(7, 1fr);
    width: 100%;
    display: grid;
  }

  .range-calendar__grid[aria-readonly="true"] .range-calendar__cell {
    pointer-events: none;
  }

  .range-calendar__grid-header, .range-calendar__grid-header > tr, .range-calendar__grid-body, .range-calendar__grid-body > tr {
    display: contents;
  }

  .range-calendar__grid-body > tr:first-child > td {
    margin-top: var(--spacing);
  }

  .range-calendar__grid-row {
    display: contents;
  }

  .range-calendar__header-cell {
    padding-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--muted);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .range-calendar__cell {
    z-index: 1;
    border-radius: calc(var(--radius) * 3);
    --tw-outline-style: none;
    cursor: var(--cursor-interactive);
    will-change: background-color, border-color;
    transition: box-shadow .1s var(--ease-out), border-color .1s var(--ease-out);
    transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
    outline-style: none;
    margin-block: 2px;
    margin-inline: 0;
    padding: 0;
    position: relative;
  }

  .range-calendar__cell:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .range-calendar__cell:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .range-calendar__cell:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .range-calendar__cell:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .range-calendar__cell:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .range-calendar__cell:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .range-calendar__cell .range-calendar__cell-button {
    aspect-ratio: 1;
    border-radius: calc(var(--radius) * 3);
    width: 100%;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
    -webkit-tap-highlight-color: transparent;
    will-change: scale;
    transition: scale .2s var(--ease-out);
    transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .range-calendar__cell .range-calendar__cell-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .range-calendar__cell .range-calendar__cell-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .range-calendar__cell .range-calendar__cell-button:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .range-calendar__cell .range-calendar__cell-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .range-calendar__cell .range-calendar__cell-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .range-calendar__cell .range-calendar__cell-button:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .range-calendar__cell:focus-visible:not(:focus), .range-calendar__cell[data-focus-visible="true"] {
    z-index: 2;
  }

  :is(.range-calendar__cell:focus-visible:not(:focus), .range-calendar__cell[data-focus-visible="true"]) .range-calendar__cell-button {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: var(--ring-offset-width);
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--background);
    --tw-outline-style: none;
    outline-style: none;
  }

  .range-calendar__cell[data-today="true"] .range-calendar__cell-button {
    background-color: var(--accent-soft);
    color: var(--accent-soft-foreground);
  }

  @media (hover: hover) {
    :is(.range-calendar__cell[data-today="true"]:hover:not([data-selected="true"]), .range-calendar__cell[data-today="true"][data-hovered="true"]:not([data-selected="true"])) .range-calendar__cell-button {
      background-color: var(--accent-soft-hover);
    }
  }

  .range-calendar__cell[data-selected="true"]:not([data-outside-month="true"]) {
    background-color: var(--accent-soft);
    border-radius: 0;
  }

  .range-calendar__cell[data-selected="true"]:is(td:first-child > *, [aria-disabled] + td > *) {
    border-start-start-radius: calc(var(--radius) * 1);
    border-end-start-radius: calc(var(--radius) * 1);
  }

  .range-calendar__cell[data-selected="true"]:is(td:first-child > *, [aria-disabled] + td > *)[data-selection-start="true"] {
    border-start-start-radius: calc(var(--radius) * 3);
    border-end-start-radius: calc(var(--radius) * 3);
  }

  .range-calendar__cell[data-selected="true"]:is(td:last-child > *, td:has( + [aria-disabled]) > *) {
    border-start-end-radius: calc(var(--radius) * 1);
    border-end-end-radius: calc(var(--radius) * 1);
  }

  .range-calendar__cell[data-selected="true"]:is(td:last-child > *, td:has( + [aria-disabled]) > *)[data-selection-end="true"] {
    border-start-end-radius: calc(var(--radius) * 3);
    border-end-end-radius: calc(var(--radius) * 3);
  }

  .range-calendar__cell[data-selection-start="true"]:not([data-outside-month="true"]), .range-calendar__cell[data-selection-end="true"]:not([data-outside-month="true"]) {
    z-index: 2;
  }

  :is(.range-calendar__cell[data-selection-start="true"]:not([data-outside-month="true"]), .range-calendar__cell[data-selection-end="true"]:not([data-outside-month="true"])) .range-calendar__cell-button {
    background-color: var(--accent);
    color: var(--accent-foreground);
  }

  .range-calendar__cell[data-selection-start="true"]:not([data-outside-month="true"]) {
    border-top-left-radius: calc(var(--radius) * 3);
    border-bottom-left-radius: calc(var(--radius) * 3);
  }

  .range-calendar__cell[data-selection-end="true"]:not([data-outside-month="true"]) {
    border-top-right-radius: calc(var(--radius) * 3);
    border-bottom-right-radius: calc(var(--radius) * 3);
  }

  :is(.range-calendar__cell:active, .range-calendar__cell[data-pressed="true"]) .range-calendar__cell-button {
    scale: .9;
  }

  :is(:is(.range-calendar__cell:active, .range-calendar__cell[data-pressed="true"])[data-selection-start="true"], :is(.range-calendar__cell:active, .range-calendar__cell[data-pressed="true"])[data-selection-end="true"]) .range-calendar__cell-button {
    background-color: var(--accent-hover);
  }

  @media (hover: hover) {
    :is(.range-calendar__cell:hover:not([data-selected="true"]), .range-calendar__cell[data-hovered="true"]:not([data-selected="true"])) .range-calendar__cell-button {
      background-color: var(--default);
    }
  }

  .range-calendar__cell[data-outside-month="true"] {
    color: var(--muted);
    opacity: .5;
  }

  .range-calendar__cell[data-selected="true"][data-outside-month="true"]:not([data-selection-start="true"], [data-selection-end="true"]) {
    background-color: var(--default);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .range-calendar__cell[data-selected="true"][data-outside-month="true"]:not([data-selection-start="true"], [data-selection-end="true"]) {
      background-color: color-mix(in oklab, var(--default) 20%, transparent);
    }
  }

  .range-calendar__cell[data-unavailable="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  .range-calendar__cell:disabled:not([data-outside-month="true"]), .range-calendar__cell[data-disabled="true"]:not([data-outside-month="true"]) {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
    text-decoration: line-through;
  }

  .range-calendar__grid-body td:has( > .range-calendar__cell[data-outside-month="true"]) + td > .range-calendar__cell[data-selected="true"] {
    border-start-start-radius: calc(var(--radius) * 1);
    border-end-start-radius: calc(var(--radius) * 1);
  }

  .range-calendar__grid-body td:has( > .range-calendar__cell[data-outside-month="true"]) + td > .range-calendar__cell[data-selected="true"][data-outside-month="true"], .range-calendar__grid-body td:has( > .range-calendar__cell[data-outside-month="true"]) + td > .range-calendar__cell[data-selected="true"][data-selection-start="true"] {
    border-start-start-radius: calc(var(--radius) * 3);
    border-end-start-radius: calc(var(--radius) * 3);
  }

  .range-calendar__grid-body td:has( > .range-calendar__cell[data-selected="true"]):has( + td > .range-calendar__cell[data-outside-month="true"]) > .range-calendar__cell[data-selected="true"] {
    border-start-end-radius: calc(var(--radius) * 1);
    border-end-end-radius: calc(var(--radius) * 1);
  }

  .range-calendar__grid-body td:has( > .range-calendar__cell[data-selected="true"]):has( + td > .range-calendar__cell[data-outside-month="true"]) > .range-calendar__cell[data-selected="true"][data-outside-month="true"], .range-calendar__grid-body td:has( > .range-calendar__cell[data-selected="true"]):has( + td > .range-calendar__cell[data-outside-month="true"]) > .range-calendar__cell[data-selected="true"][data-selection-end="true"] {
    border-start-end-radius: calc(var(--radius) * 3);
    border-end-end-radius: calc(var(--radius) * 3);
  }

  .range-calendar__cell-indicator {
    bottom: var(--spacing);
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    width: 3px;
    height: 3px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
    border-radius: calc(var(--radius) * .25);
    background-color: var(--muted);
    position: absolute;
    left: 50%;
  }

  [data-selected="true"] > .range-calendar__cell-indicator {
    background-color: var(--accent-foreground);
  }

  .calendar:has(.calendar-year-picker__year-grid), .range-calendar:has(.calendar-year-picker__year-grid) {
    position: relative;
  }

  .calendar:has(.calendar-year-picker__year-grid) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid) > [data-slot="range-calendar-grid"] {
    will-change: opacity;
    transition: opacity .15s var(--ease-out), visibility 0s linear;
  }

  :is(.calendar:has(.calendar-year-picker__year-grid) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid) > [data-slot="range-calendar-grid"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), :is(.calendar:has(.calendar-year-picker__year-grid) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid) > [data-slot="range-calendar-grid"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, :is(.calendar:has(.calendar-year-picker__year-grid) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid) > [data-slot="range-calendar-grid"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    :is(.calendar:has(.calendar-year-picker__year-grid) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid) > [data-slot="range-calendar-grid"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), :is(.calendar:has(.calendar-year-picker__year-grid) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid) > [data-slot="range-calendar-grid"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, :is(.calendar:has(.calendar-year-picker__year-grid) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid) > [data-slot="range-calendar-grid"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="range-calendar-grid"] {
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s var(--ease-out), visibility 0s linear .15s;
  }

  :is(.calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="range-calendar-grid"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), :is(.calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="range-calendar-grid"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, :is(.calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="range-calendar-grid"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    :is(.calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="range-calendar-grid"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), :is(.calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="range-calendar-grid"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, :is(.calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="range-calendar-grid"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .calendar-year-picker__trigger {
    justify-content: flex-start;
    align-items: center;
    gap: var(--spacing);
    border-radius: calc(var(--radius) * 1);
    --tw-outline-style: none;
    cursor: var(--cursor-interactive);
    touch-action: manipulation;
    outline-style: none;
    flex: 1;
    display: flex;
  }

  .calendar-year-picker__trigger:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: var(--ring-offset-width);
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--background);
    --tw-outline-style: none;
    outline-style: none;
  }

  .calendar-year-picker__trigger-heading {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    transition: color .15s var(--ease-out);
  }

  .calendar-year-picker__trigger-heading:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .calendar-year-picker__trigger-heading:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .calendar-year-picker__trigger-heading:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .calendar-year-picker__trigger-heading:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .calendar-year-picker__trigger-heading:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .calendar-year-picker__trigger-heading:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .calendar-year-picker__trigger-indicator {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--accent-soft-foreground);
    transition: transform .15s var(--ease-out);
  }

  .calendar-year-picker__trigger-indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .calendar-year-picker__trigger-indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .calendar-year-picker__trigger-indicator:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .calendar-year-picker__trigger-indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .calendar-year-picker__trigger-indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .calendar-year-picker__trigger-indicator:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .calendar-year-picker__trigger[data-open="true"] .calendar-year-picker__trigger-indicator {
    transform: rotate(90deg);
  }

  .calendar-year-picker__trigger[data-open="true"] .calendar-year-picker__trigger-heading {
    color: var(--accent-soft-foreground);
  }

  .calendar-year-picker__year-grid {
    pointer-events: none;
    scrollbar-width: var(--scrollbar-width);
    scrollbar-color: var(--scrollbar-color);
    scrollbar-gutter: var(--scrollbar-gutter);
    align-content: flex-start;
    gap: var(--spacing);
    padding: var(--spacing);
    opacity: 0;
    will-change: opacity;
    grid-template-columns: repeat(3, 1fr);
    display: grid;
    position: absolute;
    left: 0;
    right: 0;
    overflow-y: auto;
  }

  .calendar-year-picker__year-grid[data-open="true"] {
    pointer-events: auto;
    opacity: 1;
    transition: opacity .2s var(--ease-out) 50ms;
  }

  .calendar-year-picker__year-grid[data-open="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .calendar-year-picker__year-grid[data-open="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .calendar-year-picker__year-grid[data-open="true"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .calendar-year-picker__year-grid[data-open="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .calendar-year-picker__year-grid[data-open="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .calendar-year-picker__year-grid[data-open="true"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .calendar-year-picker__year-cell {
    height: calc(var(--spacing) * 8);
    border-radius: calc(var(--radius) * 3);
    padding-inline: calc(var(--spacing) * 2.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-outline-style: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: color .1s var(--ease-smooth), scale .1s var(--ease-smooth), opacity .1s var(--ease-smooth), background-color .1s var(--ease-smooth), box-shadow .1s var(--ease-out);
    transform-origin: center;
    transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
    outline-style: none;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: relative;
  }

  .calendar-year-picker__year-cell:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .calendar-year-picker__year-cell:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .calendar-year-picker__year-cell:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .calendar-year-picker__year-cell:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .calendar-year-picker__year-cell:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .calendar-year-picker__year-cell:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .calendar-year-picker__year-cell {
    cursor: var(--cursor-interactive);
  }

  @media (hover: hover) and (pointer: fine) {
    .calendar-year-picker__year-cell:is(:hover, [data-hovered="true"]):not([data-selected="true"]) {
      background-color: var(--default);
      color: var(--default-foreground);
    }
  }

  .calendar-year-picker__year-cell[data-selected="true"], .calendar-year-picker__year-cell[aria-selected="true"] {
    background-color: var(--accent);
    color: var(--accent-foreground);
  }

  @media (hover: hover) and (pointer: fine) {
    :is(.calendar-year-picker__year-cell[data-selected="true"], .calendar-year-picker__year-cell[aria-selected="true"]):is(:hover, [data-hovered="true"]) {
      background-color: var(--accent-hover);
    }
  }

  .calendar-year-picker__year-cell:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: var(--ring-offset-width);
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--background);
    --tw-outline-style: none;
    outline-style: none;
  }

  .date-field {
    gap: var(--spacing);
    flex-direction: column;
    display: flex;
  }

  :is(.date-field[data-invalid="true"], .date-field[aria-invalid="true"]) [data-slot="description"] {
    display: none;
  }

  .date-field [data-slot="label"] {
    width: fit-content;
  }

  .date-field--full-width {
    width: 100%;
  }

  .time-field {
    gap: var(--spacing);
    flex-direction: column;
    display: flex;
  }

  :is(.time-field[data-invalid="true"], .time-field[aria-invalid="true"]) [data-slot="description"] {
    display: none;
  }

  .time-field [data-slot="label"] {
    width: fit-content;
  }

  .time-field--full-width {
    width: 100%;
  }

  .date-input-group {
    height: calc(var(--spacing) * 9);
    border-radius: var(--field-radius, calc(var(--radius) * 1.5));
    border-style: var(--tw-border-style);
    background-color: var(--field-background, var(--default));
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--field-foreground, var(--foreground));
    --tw-shadow: var(--field-shadow);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-outline-style: none;
    border-width: 1px;
    border-width: var(--border-width-field);
    border-color: var(--field-border);
    transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out);
    outline-style: none;
    align-items: center;
    display: inline-flex;
    overflow: hidden;
  }

  .date-input-group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .date-input-group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .date-input-group:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .date-input-group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .date-input-group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .date-input-group:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  @media (hover: hover) {
    .date-input-group:hover:not(:focus-within), .date-input-group[data-hovered="true"]:not([data-focus-within="true"]) {
      background-color: var(--field-hover);
      border-color: var(--field-border-hover);
    }
  }

  .date-input-group[data-focus-within="true"]:not(:has([data-slot="date-picker-trigger"]:focus, [data-slot="date-picker-trigger"][data-focused="true"], [data-slot="date-range-picker-trigger"]:focus, [data-slot="date-range-picker-trigger"][data-focused="true"])), .date-input-group:focus-within:not(:has([data-slot="date-picker-trigger"]:focus, [data-slot="date-picker-trigger"][data-focused="true"], [data-slot="date-range-picker-trigger"]:focus, [data-slot="date-range-picker-trigger"][data-focused="true"])) {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-outline-style: none;
    outline-style: none;
  }

  .date-input-group[data-invalid="true"] {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
    outline-color: var(--danger);
    --tw-outline-style: solid;
    --tw-ring-offset-width: 3px;
    outline-style: solid;
  }

  .date-input-group[data-invalid="true"]:focus, .date-input-group[data-invalid="true"]:focus-visible, .date-input-group[data-invalid="true"][data-focused="true"], .date-input-group[data-invalid="true"][data-focus-visible="true"], .date-input-group[data-invalid="true"]:focus-within, .date-input-group[data-invalid="true"][data-focus-within="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--danger);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .date-input-group[data-invalid="true"] {
    background-color: var(--field-focus);
    border-color: var(--color-field-border-invalid);
  }

  .date-input-group[data-disabled="true"], .date-input-group[aria-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  .date-input-group__input {
    cursor: text;
    border-style: var(--tw-border-style);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-outline-style: none;
    background-color: #0000;
    border-width: 0;
    border-radius: 0;
    outline-style: none;
    flex: 1;
    align-items: center;
    gap: 1px;
    display: flex;
  }

  @media (min-width: 40rem) {
    .date-input-group__input {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }

  .date-input-group:has([data-slot="date-input-group-prefix"]) .date-input-group__input {
    padding-left: calc(var(--spacing) * 2);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .date-input-group:has([data-slot="date-input-group-suffix"]) .date-input-group__input {
    padding-right: calc(var(--spacing) * 2);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .date-input-group:has(.date-range-picker__range-separator) .date-input-group__input[slot="start"] {
    flex: none;
    padding-right: 0;
  }

  .date-input-group:has(.date-range-picker__range-separator) .date-input-group__input[slot="end"] {
    padding-left: 0;
  }

  .date-input-group__input:focus, .date-input-group__input:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }

  .date-input-group__input-container {
    scrollbar-color: auto;
    scrollbar-gutter: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    flex: 1;
    align-items: center;
    width: fit-content;
    display: flex;
    overflow: auto clip;
  }

  .date-input-group__segment {
    border-radius: calc(var(--radius) * .75);
    padding-inline: calc(var(--spacing) * .5);
    text-align: end;
    text-wrap: nowrap;
    --tw-outline-style: none;
    outline-style: none;
    display: inline-block;
  }

  .date-input-group__segment[data-type="literal"] {
    color: var(--muted);
    padding: 0;
  }

  .date-input-group__segment[data-placeholder="true"] {
    color: var(--field-placeholder, var(--muted));
  }

  .date-input-group__segment:focus, .date-input-group__segment[data-focused="true"] {
    background-color: var(--accent-soft);
    color: var(--accent-soft-foreground);
  }

  .date-input-group__segment[data-disabled="true"] {
    opacity: .5;
  }

  .date-input-group__segment[data-invalid="true"] {
    color: var(--danger);
  }

  .date-input-group__segment[data-invalid="true"]:focus, .date-input-group__segment[data-invalid="true"][data-focused="true"] {
    background-color: var(--danger-soft);
    color: var(--danger-soft-foreground);
  }

  .date-input-group__prefix {
    pointer-events: none;
    color: var(--field-placeholder, var(--muted));
    margin-right: 0;
    margin-left: calc(var(--spacing) * 3);
    flex-shrink: 0;
    align-items: center;
    display: flex;
  }

  .date-input-group__suffix {
    pointer-events: none;
    color: var(--field-placeholder, var(--muted));
    margin-right: calc(var(--spacing) * 3);
    flex-shrink: 0;
    align-items: center;
    display: flex;
  }

  .date-input-group--secondary {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    background-color: var(--date-input-group-bg);
    --date-input-group-bg: var(--default);
    --date-input-group-bg-hover: var(--default-hover);
    --date-input-group-bg-focus: var(--default);
  }

  @media (hover: hover) {
    .date-input-group--secondary:hover:not(:focus-within), .date-input-group--secondary[data-hovered="true"]:not([data-focus-within="true"]) {
      background-color: var(--date-input-group-bg-hover);
    }
  }

  .date-input-group--secondary:focus-within, .date-input-group--secondary[data-focus-within="true"] {
    background-color: var(--date-input-group-bg-focus);
  }

  .date-input-group--secondary[data-invalid="true"] {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
    outline-color: var(--danger);
    --tw-outline-style: solid;
    --tw-ring-offset-width: 3px;
    outline-style: solid;
  }

  .date-input-group--secondary[data-invalid="true"]:focus, .date-input-group--secondary[data-invalid="true"]:focus-visible, .date-input-group--secondary[data-invalid="true"][data-focused="true"], .date-input-group--secondary[data-invalid="true"][data-focus-visible="true"], .date-input-group--secondary[data-invalid="true"]:focus-within, .date-input-group--secondary[data-invalid="true"][data-focus-within="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--danger);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .date-input-group--secondary[data-invalid="true"] {
    border-color: var(--color-field-border-invalid);
    background-color: var(--date-input-group-bg-focus);
  }

  .date-input-group--secondary [data-slot="date-input-group-input"] {
    background-color: #0000;
  }

  .date-input-group--full-width {
    width: 100%;
  }

  .date-picker {
    gap: var(--spacing);
    flex-direction: column;
    display: inline-flex;
  }

  .date-picker .date-input-group__suffix, .date-picker .date-input-group__prefix {
    pointer-events: auto;
  }

  .date-picker__trigger {
    border-radius: var(--field-radius, calc(var(--radius) * 1.5));
    width: 100%;
    padding: var(--spacing);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    -webkit-tap-highlight-color: transparent;
    cursor: var(--cursor-interactive);
    transition: box-shadow .15s var(--ease-out);
    align-items: center;
    display: inline-flex;
  }

  .date-picker__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .date-picker__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .date-picker__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .date-picker__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .date-picker__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .date-picker__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .date-picker__trigger:focus-visible:not(:focus), .date-picker__trigger[data-focus-visible="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: var(--ring-offset-width);
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--background);
    --tw-outline-style: none;
    outline-style: none;
  }

  .date-picker__trigger:disabled, .date-picker__trigger[data-disabled="true"], .date-picker__trigger[aria-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  .date-picker__trigger-indicator {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    color: var(--field-placeholder, var(--muted));
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  .date-picker__popover {
    width: fit-content;
    transform-origin: var(--trigger-anchor-point);
    scrollbar-color: auto;
    scrollbar-gutter: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overscroll-behavior: contain;
    background-color: var(--overlay);
    padding: calc(var(--spacing) * 3);
    overflow-y: auto;
  }

  .date-picker__popover:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .date-picker__popover:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .date-picker__popover:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .date-picker__popover:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .date-picker__popover:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .date-picker__popover:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .date-picker__popover {
    box-shadow: var(--shadow-overlay);
    border-radius: min(32px, calc(var(--radius) * 2.5));
  }

  .date-picker__popover:focus-visible:not(:focus), .date-picker__popover[data-focus-visible="true"] {
    --tw-outline-style: none;
    outline-style: none;
  }

  .date-picker__popover[data-entering="true"] {
    animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
    --tw-duration: .15s;
    --tw-ease: ease;
    --tw-enter-opacity: 0;
    --tw-enter-scale: .95;
    transition-duration: .15s;
    transition-timing-function: ease;
  }

  .date-picker__popover[data-entering="true"][data-placement^="top"] {
    --tw-enter-translate-y: calc(1*var(--spacing));
  }

  .date-picker__popover[data-entering="true"][data-placement^="bottom"] {
    --tw-enter-translate-y: calc(1*var(--spacing)*-1);
  }

  .date-picker__popover[data-entering="true"][data-placement^="left"] {
    --tw-enter-translate-x: calc(1*var(--spacing));
  }

  .date-picker__popover[data-entering="true"][data-placement^="right"] {
    --tw-enter-translate-x: calc(1*var(--spacing)*-1);
  }

  .date-picker__popover[data-exiting="true"] {
    animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
    --tw-duration: .1s;
    --tw-ease: ease;
    --tw-exit-scale: .95;
    --tw-exit-opacity: 0;
    transition-duration: .1s;
    transition-timing-function: ease;
  }

  .date-picker__popover[data-exiting="true"], .date-picker__popover[data-entering="true"] {
    transition-property: opacity, transform;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    will-change: opacity,transform;
  }

  .date-range-picker {
    gap: var(--spacing);
    flex-direction: column;
    display: inline-flex;
  }

  .date-range-picker .date-input-group__suffix, .date-range-picker .date-input-group__prefix {
    pointer-events: auto;
  }

  .date-range-picker__trigger {
    border-radius: var(--field-radius, calc(var(--radius) * 1.5));
    width: 100%;
    padding: var(--spacing);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    -webkit-tap-highlight-color: transparent;
    cursor: var(--cursor-interactive);
    transition: box-shadow .15s var(--ease-out);
    align-items: center;
    display: inline-flex;
  }

  .date-range-picker__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .date-range-picker__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .date-range-picker__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .date-range-picker__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .date-range-picker__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .date-range-picker__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .date-range-picker__trigger:focus-visible:not(:focus), .date-range-picker__trigger[data-focus-visible="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: var(--ring-offset-width);
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--background);
    --tw-outline-style: none;
    outline-style: none;
  }

  .date-range-picker__trigger:disabled, .date-range-picker__trigger[data-disabled="true"], .date-range-picker__trigger[aria-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  .date-range-picker__trigger-indicator {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    color: var(--field-placeholder, var(--muted));
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  .date-range-picker__range-separator {
    padding-inline: var(--spacing);
    color: var(--field-placeholder, var(--muted));
    -webkit-user-select: none;
    user-select: none;
  }

  .date-range-picker__popover {
    width: fit-content;
    transform-origin: var(--trigger-anchor-point);
    scrollbar-color: auto;
    scrollbar-gutter: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overscroll-behavior: contain;
    background-color: var(--overlay);
    padding: calc(var(--spacing) * 3);
    overflow-y: auto;
  }

  .date-range-picker__popover:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .date-range-picker__popover:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .date-range-picker__popover:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .date-range-picker__popover:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .date-range-picker__popover:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .date-range-picker__popover:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .date-range-picker__popover {
    box-shadow: var(--shadow-overlay);
    border-radius: min(32px, calc(var(--radius) * 2.5));
  }

  .date-range-picker__popover:focus-visible:not(:focus), .date-range-picker__popover[data-focus-visible="true"] {
    --tw-outline-style: none;
    outline-style: none;
  }

  .date-range-picker__popover[data-entering="true"] {
    animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
    --tw-duration: .15s;
    --tw-ease: ease;
    --tw-enter-opacity: 0;
    --tw-enter-scale: .95;
    transition-duration: .15s;
    transition-timing-function: ease;
  }

  .date-range-picker__popover[data-entering="true"][data-placement^="top"] {
    --tw-enter-translate-y: calc(1*var(--spacing));
  }

  .date-range-picker__popover[data-entering="true"][data-placement^="bottom"] {
    --tw-enter-translate-y: calc(1*var(--spacing)*-1);
  }

  .date-range-picker__popover[data-entering="true"][data-placement^="left"] {
    --tw-enter-translate-x: calc(1*var(--spacing));
  }

  .date-range-picker__popover[data-entering="true"][data-placement^="right"] {
    --tw-enter-translate-x: calc(1*var(--spacing)*-1);
  }

  .date-range-picker__popover[data-exiting="true"] {
    animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
    --tw-duration: .1s;
    --tw-ease: ease;
    --tw-exit-scale: .95;
    --tw-exit-opacity: 0;
    transition-duration: .1s;
    transition-timing-function: ease;
  }

  .date-range-picker__popover[data-exiting="true"], .date-range-picker__popover[data-entering="true"] {
    transition-property: opacity, transform;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    will-change: opacity,transform;
  }

  .card {
    gap: calc(var(--spacing) * 3);
    padding: calc(var(--spacing) * 4);
    --tw-shadow: var(--surface-shadow);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    border-radius: min(32px, var(--radius-3xl));
    flex-direction: column;
    display: flex;
    position: relative;
    overflow: visible;
  }

  .card__header {
    flex-direction: column;
    display: flex;
  }

  .card__title {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
  }

  .card__description {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    color: var(--muted);
  }

  .card__content {
    gap: var(--spacing);
    flex-direction: column;
    flex: 1;
    display: flex;
  }

  .card__footer {
    flex-direction: row;
    align-items: center;
    display: flex;
  }

  .card--transparent {
    --tw-border-style: none;
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    background-color: #0000;
    border-style: none;
  }

  .card--default {
    background-color: var(--surface);
  }

  .card--secondary {
    background-color: var(--surface-secondary);
  }

  .card--tertiary {
    background-color: var(--surface-tertiary);
  }

  .header {
    width: 100%;
    padding-inline: calc(var(--spacing) * 2);
    padding-top: calc(var(--spacing) * 1.5);
    padding-bottom: var(--spacing);
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--muted);
  }

  .separator {
    border-radius: calc(var(--radius) * .5);
    border-top-style: var(--tw-border-style);
    border-top-width: 0;
    border-bottom-style: var(--tw-border-style);
    background-color: var(--separator);
    border-bottom-width: 0;
    flex-shrink: 0;
    width: 100%;
    height: 1px;
  }

  .separator--horizontal {
    width: 100%;
    height: 1px;
  }

  .separator--vertical {
    height: auto;
    min-height: calc(var(--spacing) * 2);
    align-self: stretch;
    width: 1px;
  }

  .separator--default {
    background-color: var(--separator);
  }

  .separator--secondary {
    background-color: var(--separator-secondary);
  }

  .separator--tertiary {
    background-color: var(--separator-tertiary);
  }

  .separator__container {
    align-items: center;
    gap: calc(var(--spacing) * 3);
    display: flex;
  }

  .separator__container--horizontal {
    flex-direction: row;
    width: 100%;
  }

  .separator__container--vertical {
    flex-direction: column;
    justify-content: center;
    height: 100%;
  }

  .separator__line {
    flex-grow: 1;
    flex-shrink: 0;
  }

  .separator__content {
    text-align: center;
    white-space: nowrap;
    color: var(--muted);
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  .separator__content--horizontal, .separator__content--vertical {
    text-align: center;
  }

  .surface {
    color: var(--foreground);
    position: relative;
  }

  .surface--transparent {
    background-color: #0000;
  }

  .surface--default {
    background-color: var(--surface);
    color: var(--surface-foreground);
  }

  .surface--secondary {
    background-color: var(--surface-secondary);
    color: var(--surface-secondary-foreground);
  }

  .surface--tertiary {
    background-color: var(--surface-tertiary);
    color: var(--surface-tertiary-foreground);
  }

  .avatar {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
    border-radius: calc(var(--radius) * 3);
    background-color: var(--default);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
    overflow: hidden;
  }

  .avatar__fallback {
    background-color: var(--default);
    width: 100%;
    height: 100%;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .avatar__image {
    aspect-ratio: 1;
    width: 100%;
    height: 100%;
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .25s;
    transition-duration: .25s;
    position: absolute;
    inset: 0;
  }

  .avatar__image:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .avatar__image:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .avatar__image:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .avatar__image:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .avatar__image:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .avatar__image:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .avatar--sm {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
    border-radius: calc(var(--radius) * 2);
  }

  .avatar--lg {
    width: calc(var(--spacing) * 12);
    height: calc(var(--spacing) * 12);
    border-radius: calc(var(--radius) * 3);
  }

  .avatar--lg .avatar__fallback {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }

  .avatar__fallback--accent {
    color: var(--accent-soft-foreground);
  }

  .avatar__fallback--default {
    color: var(--default-soft-foreground);
  }

  .avatar__fallback--success {
    color: var(--success-soft-foreground);
  }

  .avatar__fallback--warning {
    color: var(--warning-soft-foreground);
  }

  .avatar__fallback--danger {
    color: var(--danger-soft-foreground);
  }

  .avatar--soft {
    background-color: #0000;
  }

  .avatar--soft .avatar__fallback--accent {
    background-color: var(--accent-soft);
    color: var(--accent-soft-foreground);
  }

  .avatar--soft .avatar__fallback--success {
    background-color: var(--success-soft);
    color: var(--success-soft-foreground);
  }

  .avatar--soft .avatar__fallback--warning {
    background-color: var(--warning-soft);
    color: var(--warning-soft-foreground);
  }

  .avatar--soft .avatar__fallback--default {
    background-color: var(--default-soft);
    color: var(--default-soft-foreground);
  }

  .avatar--soft .avatar__fallback--danger {
    background-color: var(--danger-soft);
    color: var(--danger-soft-foreground);
  }

  .alert-dialog__trigger {
    cursor: var(--cursor-interactive);
    transition: transform .25s var(--ease-out-quart), background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out);
    display: inline-block;
  }

  .alert-dialog__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .alert-dialog__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .alert-dialog__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .alert-dialog__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .alert-dialog__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .alert-dialog__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .alert-dialog__trigger:focus-visible:not(:focus), .alert-dialog__trigger[data-focus-visible="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: var(--ring-offset-width);
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--background);
    --tw-outline-style: none;
    outline-style: none;
  }

  .alert-dialog__trigger:disabled, .alert-dialog__trigger[aria-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  .alert-dialog__trigger:active, .alert-dialog__trigger[data-pressed="true"] {
    transform: scale(.97);
  }

  .alert-dialog__backdrop {
    z-index: 50;
    height: var(--visual-viewport-height);
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex;
    position: fixed;
    inset: 0;
  }

  .alert-dialog__backdrop[data-entering="true"] {
    animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
    --tw-duration: .15s;
    --tw-ease: var(--ease-out);
    transition-duration: .15s;
    transition-timing-function: var(--ease-out);
    --tw-enter-opacity: 0;
  }

  .alert-dialog__backdrop[data-exiting="true"] {
    animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
    --tw-duration: .1s;
    --tw-ease: var(--ease-out);
    transition-duration: .1s;
    transition-timing-function: var(--ease-out);
    --tw-exit-opacity: 0;
  }

  .alert-dialog__backdrop[data-exiting="true"], .alert-dialog__backdrop[data-entering="true"] {
    will-change: opacity;
  }

  :is(.alert-dialog__backdrop[data-exiting="true"], .alert-dialog__backdrop[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), :is(.alert-dialog__backdrop[data-exiting="true"], .alert-dialog__backdrop[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, :is(.alert-dialog__backdrop[data-exiting="true"], .alert-dialog__backdrop[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    animation: none;
  }

  @media (prefers-reduced-motion: reduce) {
    :is(.alert-dialog__backdrop[data-exiting="true"], .alert-dialog__backdrop[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), :is(.alert-dialog__backdrop[data-exiting="true"], .alert-dialog__backdrop[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, :is(.alert-dialog__backdrop[data-exiting="true"], .alert-dialog__backdrop[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      animation: none;
    }
  }

  .alert-dialog__backdrop--transparent {
    background-color: #0000;
  }

  .alert-dialog__backdrop--opaque {
    background-color: var(--backdrop);
  }

  .alert-dialog__backdrop--blur {
    background-color: var(--backdrop);
    --tw-backdrop-blur: blur(var(--blur-md));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .alert-dialog__container {
    height: var(--visual-viewport-height);
    width: 100%;
    min-width: 0;
    padding: calc(var(--spacing) * 4);
    flex-direction: column;
    flex: 1;
    align-items: center;
    display: flex;
  }

  @media (min-width: 40rem) {
    .alert-dialog__container {
      width: fit-content;
      padding: calc(var(--spacing) * 10);
    }
  }

  .alert-dialog__container {
    pointer-events: none;
  }

  .alert-dialog__container[data-entering="true"] {
    animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
    --tw-duration: .25s;
    --tw-ease: cubic-bezier(.25, .46, .45, .94);
    --tw-enter-opacity: 0;
    --tw-enter-scale: calc(105*1%);
    transition-duration: .25s;
    transition-timing-function: cubic-bezier(.25, .46, .45, .94);
  }

  .alert-dialog__container[data-entering="true"][data-placement="auto"] {
    --tw-enter-translate-y: calc(1*var(--spacing));
  }

  @media (min-width: 40rem) {
    .alert-dialog__container[data-entering="true"][data-placement="auto"] {
      --tw-enter-translate-y: calc(0*100%);
    }
  }

  .alert-dialog__container[data-entering="true"][data-placement="top"] {
    --tw-enter-translate-y: calc(1*var(--spacing)*-1);
  }

  .alert-dialog__container[data-entering="true"][data-placement="center"] {
    --tw-enter-translate-y: calc(0*-100%);
  }

  .alert-dialog__container[data-entering="true"][data-placement="bottom"] {
    --tw-enter-translate-y: calc(1*var(--spacing));
  }

  .alert-dialog__container[data-exiting="true"] {
    animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
    --tw-duration: .1s;
    --tw-ease: cubic-bezier(.25, .46, .45, .94);
    --tw-exit-opacity: 0;
    --tw-exit-scale: .95;
    transition-duration: .1s;
    transition-timing-function: cubic-bezier(.25, .46, .45, .94);
  }

  .alert-dialog__container[data-exiting="true"], .alert-dialog__container[data-entering="true"] {
    will-change: opacity,transform;
  }

  :is(.alert-dialog__container[data-exiting="true"], .alert-dialog__container[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), :is(.alert-dialog__container[data-exiting="true"], .alert-dialog__container[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, :is(.alert-dialog__container[data-exiting="true"], .alert-dialog__container[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    animation: none;
  }

  @media (prefers-reduced-motion: reduce) {
    :is(.alert-dialog__container[data-exiting="true"], .alert-dialog__container[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), :is(.alert-dialog__container[data-exiting="true"], .alert-dialog__container[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, :is(.alert-dialog__container[data-exiting="true"], .alert-dialog__container[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      animation: none;
    }
  }

  .alert-dialog__dialog {
    background-color: var(--overlay);
    --tw-shadow: var(--overlay-shadow);
    width: 100%;
    min-height: 0;
    max-height: 100%;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-outline-style: none;
    border-radius: min(32px, var(--radius-3xl));
    padding: calc(var(--spacing) * 6);
    pointer-events: auto;
    outline-style: none;
    flex-direction: column;
    display: flex;
    position: relative;
    overflow: clip;
  }

  .alert-dialog__dialog[data-placement="auto"] {
    margin-top: auto;
  }

  @media (min-width: 40rem) {
    .alert-dialog__dialog[data-placement="auto"] {
      margin-block: auto;
    }
  }

  .alert-dialog__dialog[data-placement="center"] {
    margin-block: auto;
  }

  .alert-dialog__dialog[data-placement="bottom"] {
    margin-top: auto;
  }

  .alert-dialog__dialog[data-placement="top"] {
    margin-top: 0;
  }

  .alert-dialog__dialog--xs {
    max-width: var(--container-xs);
  }

  .alert-dialog__dialog--sm {
    max-width: var(--container-sm);
  }

  .alert-dialog__dialog--md {
    max-width: var(--container-md);
  }

  .alert-dialog__dialog--lg {
    max-width: var(--container-lg);
  }

  .alert-dialog__dialog--cover {
    width: 100%;
    height: 100%;
    min-height: 100%;
  }

  .alert-dialog__header {
    gap: calc(var(--spacing) * 3);
    flex-direction: column;
    margin-bottom: 0;
    display: flex;
  }

  .alert-dialog__header > .modal__icon {
    margin-bottom: 0;
  }

  .alert-dialog__heading {
    vertical-align: middle;
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
  }

  .alert-dialog__icon {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
    border-radius: calc(var(--radius) * 3);
    -webkit-user-select: none;
    user-select: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .alert-dialog__icon [data-slot="alert-dialog-default-icon"] {
    box-sizing: content-box;
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }

  .alert-dialog__icon--default {
    background-color: var(--default);
    color: var(--foreground);
  }

  .alert-dialog__icon--accent {
    background-color: var(--accent-soft);
    color: var(--accent-soft-foreground);
  }

  .alert-dialog__icon--success {
    background-color: var(--success-soft);
    color: var(--success-soft-foreground);
  }

  .alert-dialog__icon--warning {
    background-color: var(--warning-soft);
    color: var(--warning-soft-foreground);
  }

  .alert-dialog__icon--danger {
    background-color: var(--danger-soft);
    color: var(--danger-soft-foreground);
  }

  .alert-dialog__body {
    scrollbar-width: var(--scrollbar-width);
    scrollbar-color: var(--scrollbar-color);
    scrollbar-gutter: var(--scrollbar-gutter);
    min-height: 0;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: 1.43;
    color: var(--muted);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    margin: -3px;
    flex: 1;
    margin-block: 0;
    padding: 3px;
    line-height: 1.43;
    overflow-y: auto;
  }

  .alert-dialog__footer {
    justify-content: flex-end;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    flex-direction: row;
    margin-top: 0;
    display: flex;
  }

  .alert-dialog__close-trigger {
    top: calc(var(--spacing) * 4);
    right: calc(var(--spacing) * 4);
    position: absolute;
  }

  .alert-dialog__header + .alert-dialog__body {
    margin-top: calc(var(--spacing) * 2);
  }

  .alert-dialog__header + .alert-dialog__footer, .alert-dialog__body + .alert-dialog__footer {
    margin-top: calc(var(--spacing) * 5);
  }

  .drawer__trigger {
    cursor: var(--cursor-interactive);
    transition: transform .25s var(--ease-out-quart), background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out);
    display: inline-block;
  }

  .drawer__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .drawer__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .drawer__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .drawer__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .drawer__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .drawer__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .drawer__trigger:focus-visible:not(:focus), .drawer__trigger[data-focus-visible="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: var(--ring-offset-width);
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--background);
    --tw-outline-style: none;
    outline-style: none;
  }

  .drawer__trigger:disabled, .drawer__trigger[aria-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  .drawer__trigger:active, .drawer__trigger[data-pressed="true"] {
    transform: scale(.97);
  }

  .drawer__backdrop {
    z-index: 50;
    height: var(--visual-viewport-height);
    opacity: 1;
    width: 100%;
    transition: opacity .25s cubic-bezier(.32, .72, 0, 1);
    position: fixed;
    inset: 0;
  }

  .drawer__backdrop[data-entering="true"] {
    opacity: 0;
  }

  .drawer__backdrop[data-exiting="true"] {
    opacity: 0;
    transition-duration: .2s;
    transition-timing-function: cubic-bezier(.32, .72, 0, 1);
  }

  .drawer__backdrop[data-exiting="true"], .drawer__backdrop[data-entering="true"] {
    will-change: opacity;
  }

  @media (prefers-reduced-motion: reduce) {
    .drawer__backdrop {
      transition: none;
    }
  }

  .drawer__backdrop--transparent {
    background-color: #0000;
  }

  .drawer__backdrop--opaque {
    background-color: var(--backdrop);
  }

  .drawer__backdrop--blur {
    background-color: var(--backdrop);
    --tw-backdrop-blur: blur(var(--blur-md));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .drawer__content {
    pointer-events: none;
    z-index: 50;
    height: var(--visual-viewport-height);
    width: 100%;
    min-width: 0;
    display: flex;
    position: fixed;
    inset: 0;
  }

  .drawer__content--bottom {
    align-items: flex-end;
  }

  .drawer__content--top {
    align-items: flex-start;
  }

  .drawer__content--left {
    justify-content: flex-start;
  }

  .drawer__content--right {
    justify-content: flex-end;
  }

  .drawer__dialog {
    background-color: var(--overlay);
    --tw-shadow: var(--overlay-shadow);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-outline-style: none;
    padding: calc(var(--spacing) * 6);
    pointer-events: auto;
    --drawer-enter-duration: .25s;
    --drawer-exit-duration: .2s;
    --drawer-enter-ease: cubic-bezier(.32, .72, 0, 1);
    --drawer-exit-ease: cubic-bezier(.32, .72, 0, 1);
    will-change: translate;
    transition: translate var(--drawer-enter-duration) var(--drawer-enter-ease);
    outline-style: none;
    flex-direction: column;
    display: flex;
    position: relative;
  }

  @media (prefers-reduced-motion: reduce) {
    .drawer__dialog {
      transition: none;
    }
  }

  .drawer__dialog[data-placement="bottom"] {
    border-top-left-radius: min(32px, var(--radius-2xl));
    border-top-right-radius: min(32px, var(--radius-2xl));
    width: 100%;
    max-height: 85vh;
  }

  .drawer__dialog[data-placement="top"] {
    border-bottom-left-radius: min(32px, var(--radius-2xl));
    border-bottom-right-radius: min(32px, var(--radius-2xl));
    width: 100%;
    max-height: 85vh;
  }

  .drawer__dialog[data-placement="left"] {
    height: 100%;
    width: calc(var(--spacing) * 80);
    border-radius: 0;
    max-width: 85vw;
  }

  @media (min-width: 40rem) {
    .drawer__dialog[data-placement="left"] {
      width: calc(var(--spacing) * 96);
    }
  }

  .drawer__dialog[data-placement="right"] {
    height: 100%;
    width: calc(var(--spacing) * 80);
    border-radius: 0;
    max-width: 85vw;
  }

  @media (min-width: 40rem) {
    .drawer__dialog[data-placement="right"] {
      width: calc(var(--spacing) * 96);
    }
  }

  [data-exiting="true"] .drawer__dialog {
    transition-duration: var(--drawer-exit-duration);
    transition-timing-function: var(--drawer-exit-ease);
  }

  .drawer__content--left .drawer__dialog, .drawer__content--right .drawer__dialog, .drawer__content--top .drawer__dialog, .drawer__content--bottom .drawer__dialog {
    translate: 0;
  }

  .drawer__content--left[data-entering="true"] .drawer__dialog, .drawer__content--left[data-exiting="true"] .drawer__dialog {
    translate: -100%;
  }

  .drawer__content--right[data-entering="true"] .drawer__dialog, .drawer__content--right[data-exiting="true"] .drawer__dialog {
    translate: 100%;
  }

  .drawer__content--top[data-entering="true"] .drawer__dialog, .drawer__content--top[data-exiting="true"] .drawer__dialog {
    translate: 0 -100%;
  }

  .drawer__content--bottom[data-entering="true"] .drawer__dialog, .drawer__content--bottom[data-exiting="true"] .drawer__dialog {
    translate: 0 100%;
  }

  .drawer__dialog--top {
    padding-bottom: calc(var(--spacing) * 2);
  }

  .drawer__dialog--top .drawer__handle {
    padding-bottom: 0;
  }

  .drawer__header {
    gap: calc(var(--spacing) * 3);
    flex-direction: column;
    margin-bottom: 0;
    display: flex;
  }

  .drawer__heading {
    vertical-align: middle;
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
  }

  .drawer__body {
    scrollbar-width: var(--scrollbar-width);
    scrollbar-color: var(--scrollbar-color);
    scrollbar-gutter: var(--scrollbar-gutter);
    min-height: 0;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: 1.43;
    color: var(--muted);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    margin: -3px;
    flex: 1;
    margin-block: 0;
    padding: 3px;
    line-height: 1.43;
    overflow-y: auto;
  }

  .drawer__footer {
    justify-content: flex-end;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    flex-direction: row;
    margin-top: 0;
    display: flex;
  }

  .drawer__handle {
    padding-bottom: calc(var(--spacing) * 2);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .drawer__handle > [data-slot="drawer-handle-bar"] {
    height: var(--spacing);
    width: calc(var(--spacing) * 9);
    border-radius: calc(var(--radius) * .25);
    background-color: var(--separator);
  }

  .drawer__close-trigger {
    top: calc(var(--spacing) * 4);
    right: calc(var(--spacing) * 4);
    position: absolute;
  }

  .drawer__header + .drawer__body {
    margin-top: calc(var(--spacing) * 2);
  }

  .drawer__header + .drawer__footer, .drawer__body + .drawer__footer {
    margin-top: calc(var(--spacing) * 5);
  }

  .drawer__handle + .drawer__header, .drawer__handle + .drawer__body {
    margin-top: 0;
  }

  .modal__trigger {
    cursor: var(--cursor-interactive);
    transition: transform .25s var(--ease-out-quart), background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out);
    display: inline-block;
  }

  .modal__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .modal__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .modal__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .modal__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .modal__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .modal__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .modal__trigger:focus-visible:not(:focus), .modal__trigger[data-focus-visible="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: var(--ring-offset-width);
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--background);
    --tw-outline-style: none;
    outline-style: none;
  }

  .modal__trigger:disabled, .modal__trigger[aria-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  .modal__trigger:active, .modal__trigger[data-pressed="true"] {
    transform: scale(.97);
  }

  .modal__backdrop {
    z-index: 50;
    height: var(--visual-viewport-height);
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex;
    position: fixed;
    inset: 0;
  }

  .modal__backdrop[data-entering="true"] {
    animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
    --tw-duration: .15s;
    --tw-ease: var(--ease-out);
    transition-duration: .15s;
    transition-timing-function: var(--ease-out);
    --tw-enter-opacity: 0;
  }

  .modal__backdrop[data-exiting="true"] {
    animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
    --tw-duration: .1s;
    --tw-ease: var(--ease-out);
    transition-duration: .1s;
    transition-timing-function: var(--ease-out);
    --tw-exit-opacity: 0;
  }

  .modal__backdrop[data-exiting="true"], .modal__backdrop[data-entering="true"] {
    will-change: opacity;
  }

  :is(.modal__backdrop[data-exiting="true"], .modal__backdrop[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), :is(.modal__backdrop[data-exiting="true"], .modal__backdrop[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, :is(.modal__backdrop[data-exiting="true"], .modal__backdrop[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    animation: none;
  }

  @media (prefers-reduced-motion: reduce) {
    :is(.modal__backdrop[data-exiting="true"], .modal__backdrop[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), :is(.modal__backdrop[data-exiting="true"], .modal__backdrop[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, :is(.modal__backdrop[data-exiting="true"], .modal__backdrop[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      animation: none;
    }
  }

  .modal__backdrop--transparent {
    background-color: #0000;
  }

  .modal__backdrop--opaque {
    background-color: var(--backdrop);
  }

  .modal__backdrop--blur {
    background-color: var(--backdrop);
    --tw-backdrop-blur: blur(var(--blur-md));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .modal__container {
    height: var(--visual-viewport-height);
    width: 100%;
    min-width: 0;
    padding: calc(var(--spacing) * 4);
    flex-direction: column;
    flex: 1;
    align-items: center;
    display: flex;
  }

  @media (min-width: 40rem) {
    .modal__container {
      width: fit-content;
      padding: calc(var(--spacing) * 10);
    }
  }

  .modal__container {
    pointer-events: none;
  }

  .modal__container[data-entering="true"] {
    animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
    --tw-duration: .25s;
    --tw-ease: cubic-bezier(.25, .46, .45, .94);
    --tw-enter-opacity: 0;
    --tw-enter-scale: calc(105*1%);
    transition-duration: .25s;
    transition-timing-function: cubic-bezier(.25, .46, .45, .94);
  }

  .modal__container[data-entering="true"][data-placement="auto"] {
    --tw-enter-translate-y: calc(1*var(--spacing));
  }

  @media (min-width: 40rem) {
    .modal__container[data-entering="true"][data-placement="auto"] {
      --tw-enter-translate-y: calc(0*100%);
    }
  }

  .modal__container[data-entering="true"][data-placement="top"] {
    --tw-enter-translate-y: calc(1*var(--spacing)*-1);
  }

  .modal__container[data-entering="true"][data-placement="center"] {
    --tw-enter-translate-y: calc(0*-100%);
  }

  .modal__container[data-entering="true"][data-placement="bottom"] {
    --tw-enter-translate-y: calc(1*var(--spacing));
  }

  .modal__container[data-exiting="true"] {
    animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
    --tw-duration: .1s;
    --tw-ease: cubic-bezier(.25, .46, .45, .94);
    --tw-exit-opacity: 0;
    --tw-exit-scale: .95;
    transition-duration: .1s;
    transition-timing-function: cubic-bezier(.25, .46, .45, .94);
  }

  .modal__container[data-exiting="true"], .modal__container[data-entering="true"] {
    will-change: opacity,transform;
  }

  :is(.modal__container[data-exiting="true"], .modal__container[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), :is(.modal__container[data-exiting="true"], .modal__container[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, :is(.modal__container[data-exiting="true"], .modal__container[data-entering="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    animation: none;
  }

  @media (prefers-reduced-motion: reduce) {
    :is(.modal__container[data-exiting="true"], .modal__container[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), :is(.modal__container[data-exiting="true"], .modal__container[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, :is(.modal__container[data-exiting="true"], .modal__container[data-entering="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      animation: none;
    }
  }

  .modal__container--scroll-outside {
    scrollbar-width: var(--scrollbar-width);
    scrollbar-color: var(--scrollbar-color);
    scrollbar-gutter: var(--scrollbar-gutter);
    pointer-events: auto;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
  }

  .modal__container--full {
    padding: 0;
  }

  @media (min-width: 40rem) {
    .modal__container--full {
      padding: 0;
    }
  }

  .modal__container--full[data-entering="true"] {
    --tw-enter-translate-y: calc(0*100%);
    --tw-enter-scale: 1;
  }

  @media (min-width: 40rem) {
    .modal__container--full[data-entering="true"] {
      --tw-enter-translate-y: calc(0*100%);
    }
  }

  .modal__container--full[data-exiting="true"] {
    --tw-exit-scale: 1;
  }

  .modal__dialog {
    background-color: var(--overlay);
    --tw-shadow: var(--overlay-shadow);
    width: 100%;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-outline-style: none;
    border-radius: min(32px, var(--radius-3xl));
    padding: calc(var(--spacing) * 6);
    pointer-events: auto;
    outline-style: none;
    flex-direction: column;
    display: flex;
    position: relative;
  }

  .modal__dialog[data-placement="auto"] {
    margin-top: auto;
  }

  @media (min-width: 40rem) {
    .modal__dialog[data-placement="auto"] {
      margin-block: auto;
    }
  }

  .modal__dialog[data-placement="center"] {
    margin-block: auto;
  }

  .modal__dialog[data-placement="bottom"] {
    margin-top: auto;
  }

  .modal__dialog[data-placement="top"] {
    margin-top: 0;
  }

  .modal__dialog--scroll-inside {
    min-height: 0;
    max-height: 100%;
    overflow: clip;
  }

  .modal__dialog--scroll-outside {
    flex-shrink: 0;
    height: auto;
    min-height: 0;
  }

  .modal__dialog--xs {
    max-width: var(--container-xs);
  }

  .modal__dialog--sm {
    max-width: var(--container-sm);
  }

  .modal__dialog--md {
    max-width: var(--container-md);
  }

  .modal__dialog--lg {
    max-width: var(--container-lg);
  }

  .modal__dialog--cover {
    width: 100%;
    height: 100%;
    min-height: 100%;
  }

  .modal__dialog--full {
    --tw-shadow: 0 0 #0000;
    width: 100%;
    height: 100%;
    min-height: 100%;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    border-radius: 0;
  }

  .modal__header {
    gap: calc(var(--spacing) * 3);
    flex-direction: column;
    margin-bottom: 0;
    display: flex;
  }

  .modal__header > .modal__icon {
    margin-bottom: 0;
  }

  .modal__heading {
    vertical-align: middle;
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
  }

  .modal__icon {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
    border-radius: calc(var(--radius) * 3);
    -webkit-user-select: none;
    user-select: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .modal__body {
    min-height: 0;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: 1.43;
    color: var(--muted);
    margin: -3px;
    flex: 1;
    margin-block: 0;
    padding: 3px;
    line-height: 1.43;
    overflow: visible;
  }

  .modal__body--scroll-inside {
    scrollbar-width: var(--scrollbar-width);
    scrollbar-color: var(--scrollbar-color);
    scrollbar-gutter: var(--scrollbar-gutter);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
  }

  .modal__body--scroll-outside {
    overflow-y: visible;
  }

  .modal__footer {
    justify-content: flex-end;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    flex-direction: row;
    margin-top: 0;
    display: flex;
  }

  .modal__close-trigger {
    top: calc(var(--spacing) * 4);
    right: calc(var(--spacing) * 4);
    position: absolute;
  }

  .modal__header + .modal__body {
    margin-top: calc(var(--spacing) * 2);
  }

  .modal__header + .modal__footer, .modal__body + .modal__footer {
    margin-top: calc(var(--spacing) * 5);
  }

  .popover {
    transform-origin: var(--trigger-anchor-point);
    background-color: var(--overlay);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    border-radius: min(32px, var(--radius-3xl));
    box-shadow: var(--shadow-overlay);
    padding: 0;
  }

  .popover[data-entering="true"] {
    animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
    --tw-duration: .15s;
    --tw-ease: ease;
    --tw-enter-opacity: 0;
    --tw-enter-scale: .9;
    transition-duration: .15s;
    transition-timing-function: ease;
  }

  .popover[data-entering="true"][data-placement="top"] {
    --tw-enter-translate-y: calc(1*var(--spacing));
  }

  .popover[data-entering="true"][data-placement="bottom"] {
    --tw-enter-translate-y: calc(1*var(--spacing)*-1);
  }

  .popover[data-entering="true"][data-placement="left"] {
    --tw-enter-translate-x: calc(1*var(--spacing));
  }

  .popover[data-entering="true"][data-placement="right"] {
    --tw-enter-translate-x: calc(1*var(--spacing)*-1);
  }

  .popover[data-exiting="true"] {
    animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
    --tw-duration: .1s;
    --tw-ease: ease;
    --tw-exit-scale: .95;
    --tw-exit-opacity: 0;
    transition-duration: .1s;
    transition-timing-function: ease;
  }

  .popover[data-exiting="true"], .popover[data-entering="true"] {
    transition-property: opacity, transform;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    will-change: opacity,transform;
  }

  .popover [data-slot="popover-overlay-arrow"] {
    fill: var(--overlay);
  }

  .popover[data-placement="bottom"] [data-slot="popover-overlay-arrow"] {
    rotate: 180deg;
  }

  .popover[data-placement="left"] [data-slot="popover-overlay-arrow"] {
    rotate: -90deg;
  }

  .popover[data-placement="right"] [data-slot="popover-overlay-arrow"] {
    rotate: 90deg;
  }

  .popover__dialog {
    padding: calc(var(--spacing) * 4);
    --tw-outline-style: none;
    outline-style: none;
  }

  .popover__heading {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .popover__trigger {
    transition: color .15s var(--ease-smooth), background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out);
    display: inline-block;
  }

  .popover__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .popover__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .popover__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .popover__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .popover__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .popover__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .popover__trigger {
    cursor: var(--cursor-interactive);
  }

  .popover__trigger:focus-visible:not(:focus), .popover__trigger[data-focus-visible="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: var(--ring-offset-width);
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--background);
    --tw-outline-style: none;
    outline-style: none;
  }

  .popover__trigger:disabled, .popover__trigger[aria-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  .tooltip {
    max-width: var(--container-xs);
    transform-origin: var(--trigger-anchor-point);
    background-color: var(--overlay);
    padding: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    word-break: break-all;
    border-radius: min(32px, var(--radius-xl));
    box-shadow: var(--shadow-overlay);
  }

  .tooltip[data-entering="true"] {
    animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
    --tw-duration: .15s;
    --tw-ease: ease;
    --tw-enter-opacity: 0;
    --tw-enter-scale: .9;
    transition-duration: .15s;
    transition-timing-function: ease;
  }

  .tooltip[data-entering="true"][data-placement="top"] {
    --tw-enter-translate-y: calc(1*var(--spacing));
  }

  .tooltip[data-entering="true"][data-placement="bottom"] {
    --tw-enter-translate-y: calc(1*var(--spacing)*-1);
  }

  .tooltip[data-entering="true"][data-placement="left"] {
    --tw-enter-translate-x: calc(1*var(--spacing));
  }

  .tooltip[data-entering="true"][data-placement="right"] {
    --tw-enter-translate-x: calc(1*var(--spacing)*-1);
  }

  .tooltip[data-exiting="true"] {
    animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
    --tw-duration: .1s;
    --tw-ease: ease;
    --tw-exit-scale: .95;
    --tw-exit-opacity: 0;
    transition-duration: .1s;
    transition-timing-function: ease;
  }

  .tooltip[data-exiting="true"], .tooltip[data-entering="true"] {
    transition-property: opacity, transform;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    will-change: opacity,transform;
  }

  .tooltip [data-slot="overlay-arrow"] {
    stroke: var(--border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .tooltip [data-slot="overlay-arrow"] {
      stroke: color-mix(in oklab, var(--border) 40%, transparent);
    }
  }

  .tooltip [data-slot="overlay-arrow"] {
    fill: var(--overlay);
  }

  .tooltip[data-placement="bottom"] [data-slot="overlay-arrow"] {
    rotate: 180deg;
  }

  .tooltip[data-placement="left"] [data-slot="overlay-arrow"] {
    rotate: -90deg;
  }

  .tooltip[data-placement="right"] [data-slot="overlay-arrow"] {
    rotate: 90deg;
  }

  .tooltip__trigger {
    transition: color .15s var(--ease-smooth), background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out);
    display: inline-block;
  }

  .tooltip__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .tooltip__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .tooltip__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .tooltip__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .tooltip__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .tooltip__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .tooltip__trigger:focus-visible:not(:focus), .tooltip__trigger[data-focus-visible="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: var(--ring-offset-width);
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--background);
    --tw-outline-style: none;
    outline-style: none;
  }

  .combo-box {
    gap: var(--spacing);
    flex-direction: column;
    display: flex;
  }

  :is(.combo-box[data-invalid="true"], .combo-box[aria-invalid="true"]) [data-slot="description"] {
    display: none;
  }

  .combo-box [data-slot="label"] {
    width: fit-content;
  }

  .combo-box [data-slot="input"] {
    flex: 1;
    min-width: 0;
  }

  .combo-box [data-slot="input"]:has( + .combo-box__trigger) {
    padding-inline-end: calc(var(--spacing) * 7);
  }

  .combo-box [data-slot="input"]:focus, .combo-box [data-slot="input"][data-focus] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-outline-style: none;
    border-color: var(--field-border-focus);
    background-color: var(--field-focus);
    outline-style: none;
  }

  .combo-box [data-slot="input"]:disabled, .combo-box [data-slot="input"][data-disabled], .combo-box [data-slot="input"][aria-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  .combo-box__input-group {
    isolation: isolate;
    align-items: center;
    display: inline-flex;
    position: relative;
  }

  .combo-box__trigger {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    height: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
    cursor: pointer;
    color: var(--field-placeholder, var(--muted));
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .15s;
    -webkit-tap-highlight-color: transparent;
    --tw-border-style: none;
    --tw-outline-style: none;
    inset-inline-end: calc(var(--spacing) * 0);
    background-color: #0000;
    border-style: none;
    outline-style: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding-inline-end: calc(var(--spacing) * 2);
    transition-duration: .15s;
    display: flex;
    position: absolute;
    top: 50%;
  }

  @media (hover: hover) {
    .combo-box__trigger:hover, .combo-box__trigger[data-hovered="true"] {
      color: var(--field-foreground, var(--foreground));
    }
  }

  .combo-box__trigger:focus-visible:not(:focus), .combo-box__trigger[data-focus-visible="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--background);
    --tw-outline-style: none;
    border-radius: .25rem;
    outline-style: none;
  }

  .combo-box__trigger[data-pressed="true"] {
    opacity: .7;
  }

  .combo-box__trigger:disabled, .combo-box__trigger[data-disabled], .combo-box__trigger[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .5;
  }

  .combo-box__trigger [data-slot="combo-box-trigger-default-icon"] {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .15s;
    transition-duration: .15s;
  }

  .combo-box__trigger [data-slot="combo-box-trigger-default-icon"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .combo-box__trigger [data-slot="combo-box-trigger-default-icon"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .combo-box__trigger [data-slot="combo-box-trigger-default-icon"]:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .combo-box__trigger [data-slot="combo-box-trigger-default-icon"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .combo-box__trigger [data-slot="combo-box-trigger-default-icon"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .combo-box__trigger [data-slot="combo-box-trigger-default-icon"]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .combo-box__trigger[data-open="true"] [data-slot="combo-box-trigger-default-icon"] {
    rotate: 180deg;
  }

  .combo-box__popover {
    min-width: var(--trigger-width);
    transform-origin: var(--trigger-anchor-point);
    scroll-padding-block: var(--spacing);
    scrollbar-width: var(--scrollbar-width);
    scrollbar-color: var(--scrollbar-color);
    scrollbar-gutter: var(--scrollbar-gutter);
    overscroll-behavior: contain;
    background-color: var(--overlay);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    border-radius: min(32px, var(--radius-3xl));
    box-shadow: var(--shadow-overlay);
    padding: 0;
    overflow-y: auto;
  }

  .combo-box__popover:focus-visible:not(:focus), .combo-box__popover[data-focus-visible="true"] {
    --tw-outline-style: none;
    outline-style: none;
  }

  .combo-box__popover[data-entering="true"] {
    animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
    --tw-duration: .15s;
    --tw-ease: ease;
    --tw-enter-opacity: 0;
    --tw-enter-scale: .95;
    transition-duration: .15s;
    transition-timing-function: ease;
  }

  .combo-box__popover[data-entering="true"][data-placement="top"] {
    --tw-enter-translate-y: calc(1*var(--spacing));
  }

  .combo-box__popover[data-entering="true"][data-placement="bottom"] {
    --tw-enter-translate-y: calc(1*var(--spacing)*-1);
  }

  .combo-box__popover[data-entering="true"][data-placement="left"] {
    --tw-enter-translate-x: calc(1*var(--spacing));
  }

  .combo-box__popover[data-entering="true"][data-placement="right"] {
    --tw-enter-translate-x: calc(1*var(--spacing)*-1);
  }

  .combo-box__popover[data-exiting="true"] {
    animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
    --tw-duration: .1s;
    --tw-ease: ease;
    --tw-exit-scale: .95;
    --tw-exit-opacity: 0;
    transition-duration: .1s;
    transition-timing-function: ease;
  }

  .combo-box__popover[data-exiting="true"], .combo-box__popover[data-entering="true"] {
    transition-property: opacity, transform;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    will-change: opacity,transform;
  }

  .combo-box__popover [data-slot="popover-overlay-arrow"] {
    fill: var(--overlay);
  }

  .combo-box__popover[data-placement="bottom"] [data-slot="popover-overlay-arrow"] {
    rotate: 180deg;
  }

  .combo-box__popover[data-placement="left"] [data-slot="popover-overlay-arrow"] {
    rotate: -90deg;
  }

  .combo-box__popover[data-placement="right"] [data-slot="popover-overlay-arrow"] {
    rotate: 90deg;
  }

  .combo-box__popover [data-slot="list-box"] {
    padding: calc(var(--spacing) * 1.5);
    --tw-outline-style: none;
    outline-style: none;
  }

  .combo-box__popover [data-slot="list-box-item"] {
    padding-inline: calc(var(--spacing) * 2.5);
  }

  .combo-box__popover [data-slot="list-box-item"] [data-slot="list-box-item-indicator--checkmark"] {
    transition-property: none;
  }

  .combo-box--full-width, .combo-box__input-group--full-width {
    width: 100%;
  }

  .select {
    gap: var(--spacing);
    flex-direction: column;
    display: flex;
  }

  :is(.select[data-invalid="true"], .select[aria-invalid="true"]) [data-slot="description"] {
    display: none;
  }

  .select [data-slot="label"] {
    width: fit-content;
  }

  .select__trigger {
    isolation: isolate;
    min-height: calc(var(--spacing) * 9);
    border-radius: var(--field-radius, calc(var(--radius) * 1.5));
    border-style: var(--tw-border-style);
    background-color: var(--field-background, var(--default));
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--field-foreground, var(--foreground));
    --tw-shadow: var(--field-shadow);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-outline-style: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out);
    border-width: 1px;
    outline-style: none;
    display: inline-flex;
    position: relative;
  }

  .select__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .select__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .select__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .select__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .select__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .select__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .select__trigger {
    cursor: var(--cursor-interactive);
    border-width: var(--border-width-field);
    border-color: var(--field-border);
  }

  .select__trigger:has(.select__indicator) {
    padding-inline-end: calc(var(--spacing) * 7);
  }

  @media (hover: hover) {
    .select__trigger:hover, .select__trigger[data-hovered="true"] {
      background-color: var(--field-hover);
      border-color: var(--field-border-hover);
    }
  }

  .select__trigger:focus-visible:not(:focus), .select__trigger[data-focus-visible="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: var(--ring-offset-width);
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--background);
    --tw-outline-style: none;
    border-color: var(--field-border-focus);
    background-color: var(--field-focus);
    outline-style: none;
  }

  .select[data-invalid="true"] .select__trigger, .select[aria-invalid="true"] .select__trigger {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
    outline-color: var(--danger);
    --tw-outline-style: solid;
    --tw-ring-offset-width: 3px;
    outline-style: solid;
  }

  :is(.select[data-invalid="true"] .select__trigger, .select[aria-invalid="true"] .select__trigger):focus, :is(.select[data-invalid="true"] .select__trigger, .select[aria-invalid="true"] .select__trigger):focus-visible, :is(.select[data-invalid="true"] .select__trigger, .select[aria-invalid="true"] .select__trigger)[data-focused="true"], :is(.select[data-invalid="true"] .select__trigger, .select[aria-invalid="true"] .select__trigger)[data-focus-visible="true"], :is(.select[data-invalid="true"] .select__trigger, .select[aria-invalid="true"] .select__trigger):focus-within, :is(.select[data-invalid="true"] .select__trigger, .select[aria-invalid="true"] .select__trigger)[data-focus-within="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--danger);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .select[data-invalid="true"] .select__trigger, .select[aria-invalid="true"] .select__trigger {
    background-color: var(--field-focus);
  }

  .select__trigger:disabled, .select__trigger[data-disabled="true"], .select__trigger[aria-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  .select--secondary .select__trigger {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    background-color: var(--select-trigger-bg);
    --select-trigger-bg: var(--default);
    --select-trigger-bg-hover: var(--default-hover);
    --select-trigger-bg-focus: var(--default);
  }

  @media (hover: hover) {
    .select--secondary .select__trigger:hover, .select--secondary .select__trigger[data-hovered="true"] {
      background-color: var(--select-trigger-bg-hover);
    }
  }

  .select--secondary .select__trigger:focus-visible:not(:focus), .select--secondary .select__trigger[data-focus-visible="true"], .select[data-invalid="true"] :is(.select--secondary .select__trigger), .select[aria-invalid="true"] :is(.select--secondary .select__trigger) {
    background-color: var(--select-trigger-bg-focus);
  }

  .select__value {
    text-align: start;
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    overflow-wrap: break-word;
    color: currentColor;
    flex: 1;
  }

  @media (min-width: 40rem) {
    .select__value {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }

  .select__value[data-placeholder="true"] {
    color: var(--field-placeholder, var(--muted));
  }

  .select__value [data-slot="list-box-item-indicator"] {
    display: none;
  }

  .select__indicator {
    color: var(--field-placeholder, var(--muted));
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .15s;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin-block: auto;
    transition-duration: .15s;
    display: flex;
    position: absolute;
    inset-block: 0;
    inset-inline-end: calc(var(--spacing) * 2);
  }

  .select__indicator[data-open="true"] {
    rotate: 180deg;
  }

  .select__indicator[data-slot="select-default-indicator"] {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .select__popover {
    min-width: var(--trigger-width);
    transform-origin: var(--trigger-anchor-point);
    scroll-padding-block: var(--spacing);
    scrollbar-width: var(--scrollbar-width);
    scrollbar-color: var(--scrollbar-color);
    scrollbar-gutter: var(--scrollbar-gutter);
    overscroll-behavior: contain;
    background-color: var(--overlay);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    border-radius: min(32px, var(--radius-3xl));
    box-shadow: var(--shadow-overlay);
    padding: 0;
    overflow-y: auto;
  }

  .select__popover:focus-visible:not(:focus), .select__popover[data-focus-visible="true"] {
    --tw-outline-style: none;
    outline-style: none;
  }

  .select__popover[data-entering="true"] {
    animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
    --tw-duration: .15s;
    --tw-ease: ease;
    --tw-enter-opacity: 0;
    --tw-enter-scale: .95;
    transition-duration: .15s;
    transition-timing-function: ease;
  }

  .select__popover[data-entering="true"][data-placement="top"] {
    --tw-enter-translate-y: calc(1*var(--spacing));
  }

  .select__popover[data-entering="true"][data-placement="bottom"] {
    --tw-enter-translate-y: calc(1*var(--spacing)*-1);
  }

  .select__popover[data-entering="true"][data-placement="left"] {
    --tw-enter-translate-x: calc(1*var(--spacing));
  }

  .select__popover[data-entering="true"][data-placement="right"] {
    --tw-enter-translate-x: calc(1*var(--spacing)*-1);
  }

  .select__popover[data-exiting="true"] {
    animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
    --tw-duration: .1s;
    --tw-ease: ease;
    --tw-exit-scale: .95;
    --tw-exit-opacity: 0;
    transition-duration: .1s;
    transition-timing-function: ease;
  }

  .select__popover[data-exiting="true"], .select__popover[data-entering="true"] {
    transition-property: opacity, transform;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    will-change: opacity,transform;
  }

  .select__popover [data-slot="popover-overlay-arrow"] {
    fill: var(--overlay);
  }

  .select__popover[data-placement="bottom"] [data-slot="popover-overlay-arrow"] {
    rotate: 180deg;
  }

  .select__popover[data-placement="left"] [data-slot="popover-overlay-arrow"] {
    rotate: -90deg;
  }

  .select__popover[data-placement="right"] [data-slot="popover-overlay-arrow"] {
    rotate: 90deg;
  }

  .select__popover [data-slot="list-box"] {
    padding: calc(var(--spacing) * 1.5);
    --tw-outline-style: none;
    outline-style: none;
  }

  .select__popover [data-slot="list-box-item"] {
    padding-inline: calc(var(--spacing) * 2.5);
  }

  .select__popover [data-slot="list-box"]:not([aria-multiselectable="true"]) [data-slot="list-box-item-indicator"], .select__popover [data-slot="list-box"]:not([aria-multiselectable="true"]) [data-slot="list-box-item-indicator"] [data-slot="list-box-item-indicator--checkmark"] {
    transition-property: none;
  }

  .select--full-width, .select__trigger--full-width {
    width: 100%;
  }

  .autocomplete {
    gap: var(--spacing);
    flex-direction: column;
    display: flex;
  }

  .autocomplete__trigger {
    isolation: isolate;
    min-height: calc(var(--spacing) * 9);
    border-radius: var(--field-radius, calc(var(--radius) * 1.5));
    border-style: var(--tw-border-style);
    background-color: var(--field-background, var(--default));
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--field-foreground, var(--foreground));
    --tw-shadow: var(--field-shadow);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-outline-style: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out);
    border-width: 1px;
    outline-style: none;
    display: inline-flex;
    position: relative;
  }

  .autocomplete__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .autocomplete__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .autocomplete__trigger:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .autocomplete__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .autocomplete__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .autocomplete__trigger:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .autocomplete__trigger {
    cursor: var(--cursor-interactive);
    border-width: var(--border-width-field);
    border-color: var(--field-border);
  }

  .autocomplete__trigger:has(.autocomplete__indicator) {
    padding-inline-end: calc(var(--spacing) * 7);
  }

  @media (hover: hover) {
    .autocomplete__trigger:hover:not(:has(.autocomplete__clear-button:hover)), .autocomplete__trigger[data-hovered="true"]:not(:has(.autocomplete__clear-button:hover)) {
      background-color: var(--field-hover);
      border-color: var(--field-border-hover);
    }
  }

  .autocomplete__trigger:focus-visible:not(:focus), .autocomplete__trigger[data-focus-visible="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: var(--ring-offset-width);
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--background);
    --tw-outline-style: none;
    border-color: var(--field-border-focus);
    background-color: var(--field-focus);
    outline-style: none;
  }

  .autocomplete[data-invalid="true"] .autocomplete__trigger, .autocomplete[aria-invalid="true"] .autocomplete__trigger {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
    outline-color: var(--danger);
    --tw-outline-style: solid;
    --tw-ring-offset-width: 3px;
    outline-style: solid;
  }

  :is(.autocomplete[data-invalid="true"] .autocomplete__trigger, .autocomplete[aria-invalid="true"] .autocomplete__trigger):focus, :is(.autocomplete[data-invalid="true"] .autocomplete__trigger, .autocomplete[aria-invalid="true"] .autocomplete__trigger):focus-visible, :is(.autocomplete[data-invalid="true"] .autocomplete__trigger, .autocomplete[aria-invalid="true"] .autocomplete__trigger)[data-focused="true"], :is(.autocomplete[data-invalid="true"] .autocomplete__trigger, .autocomplete[aria-invalid="true"] .autocomplete__trigger)[data-focus-visible="true"], :is(.autocomplete[data-invalid="true"] .autocomplete__trigger, .autocomplete[aria-invalid="true"] .autocomplete__trigger):focus-within, :is(.autocomplete[data-invalid="true"] .autocomplete__trigger, .autocomplete[aria-invalid="true"] .autocomplete__trigger)[data-focus-within="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--danger);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .autocomplete[data-invalid="true"] .autocomplete__trigger, .autocomplete[aria-invalid="true"] .autocomplete__trigger {
    background-color: var(--field-focus);
  }

  .autocomplete__trigger:disabled, .autocomplete__trigger[data-disabled="true"], .autocomplete__trigger[aria-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: var(--cursor-disabled);
    pointer-events: none;
  }

  .autocomplete--secondary .autocomplete__trigger {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    background-color: var(--autocomplete-trigger-bg);
    --autocomplete-trigger-bg: var(--default);
    --autocomplete-trigger-bg-hover: var(--default-hover);
    --autocomplete-trigger-bg-focus: var(--default);
  }

  @media (hover: hover) {
    .autocomplete--secondary .autocomplete__trigger:hover:not(:has(.autocomplete__clear-button:hover)), .autocomplete--secondary .autocomplete__trigger[data-hovered="true"]:not(:has(.autocomplete__clear-button:hover)) {
      background-color: var(--autocomplete-trigger-bg-hover);
    }
  }

  .autocomplete--secondary .autocomplete__trigger:focus-visible:not(:focus), .autocomplete--secondary .autocomplete__trigger[data-focus-visible="true"], .autocomplete[data-invalid="true"] :is(.autocomplete--secondary .autocomplete__trigger), .autocomplete[aria-invalid="true"] :is(.autocomplete--secondary .autocomplete__trigger) {
    background-color: var(--autocomplete-trigger-bg-focus);
  }

  .autocomplete__value {
    text-align: start;
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    overflow-wrap: break-word;
    color: currentColor;
    flex: 1;
  }

  @media (min-width: 40rem) {
    .autocomplete__value {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }

  .autocomplete__value[data-placeholder="true"] {
    color: var(--field-placeholder, var(--muted));
  }

  .autocomplete__value [data-slot="list-box-item-indicator"] {
    display: none;
  }

  .autocomplete__indicator {
    color: var(--field-placeholder, var(--muted));
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .15s;
    cursor: var(--cursor-interactive);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin-block: auto;
    transition-duration: .15s;
    display: flex;
    position: absolute;
    inset-block: 0;
    inset-inline-end: calc(var(--spacing) * 2);
  }

  .autocomplete__indicator[data-open="true"] {
    rotate: 180deg;
  }

  .autocomplete__indicator[data-slot="autocomplete-default-indicator"] {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .autocomplete__popover {
    width: var(--trigger-width);
    max-width: var(--trigger-width);
    transform-origin: var(--trigger-anchor-point);
    scroll-padding-block: var(--spacing);
    overscroll-behavior: contain;
    background-color: var(--overlay);
    padding: 0;
    padding-top: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    border-radius: min(32px, var(--radius-3xl));
    box-shadow: var(--shadow-overlay);
    overflow: hidden;
  }

  .autocomplete__popover:focus-visible:not(:focus), .autocomplete__popover[data-focus-visible="true"] {
    --tw-outline-style: none;
    outline-style: none;
  }

  .autocomplete__popover[data-entering="true"] {
    animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
    --tw-duration: .25s;
    --tw-ease: cubic-bezier(.32, .72, 0, 1);
    --tw-enter-opacity: 0;
    --tw-enter-scale: .95;
    transition-duration: .25s;
    transition-timing-function: cubic-bezier(.32, .72, 0, 1);
  }

  .autocomplete__popover[data-entering="true"][data-placement="top"] {
    --tw-enter-translate-y: calc(1*var(--spacing));
  }

  .autocomplete__popover[data-entering="true"][data-placement="bottom"] {
    --tw-enter-translate-y: calc(1*var(--spacing)*-1);
  }

  .autocomplete__popover[data-entering="true"][data-placement="left"] {
    --tw-enter-translate-x: calc(1*var(--spacing));
  }

  .autocomplete__popover[data-entering="true"][data-placement="right"] {
    --tw-enter-translate-x: calc(1*var(--spacing)*-1);
  }

  .autocomplete__popover[data-exiting="true"] {
    animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
    --tw-duration: .1s;
    --tw-ease: cubic-bezier(.25, .46, .45, .94);
    --tw-exit-scale: .95;
    --tw-exit-opacity: 0;
    transition-duration: .1s;
    transition-timing-function: cubic-bezier(.25, .46, .45, .94);
  }

  .autocomplete__popover[data-exiting="true"], .autocomplete__popover[data-entering="true"] {
    transition-property: opacity, transform;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    will-change: opacity,transform;
  }

  .autocomplete__popover [data-slot="popover-overlay-arrow"] {
    fill: var(--overlay);
  }

  .autocomplete__popover[data-placement="bottom"] [data-slot="popover-overlay-arrow"] {
    rotate: 180deg;
  }

  .autocomplete__popover[data-placement="left"] [data-slot="popover-overlay-arrow"] {
    rotate: -90deg;
  }

  .autocomplete__popover[data-placement="right"] [data-slot="popover-overlay-arrow"] {
    rotate: 90deg;
  }

  .autocomplete__popover [data-slot="list-box"] {
    scrollbar-width: var(--scrollbar-width);
    scrollbar-color: var(--scrollbar-color);
    scrollbar-gutter: var(--scrollbar-gutter);
    max-height: 320px;
    padding: calc(var(--spacing) * 1.5);
    --tw-outline-style: none;
    outline-style: none;
    overflow-y: auto;
  }

  .autocomplete__popover [data-slot="list-box-item"] {
    padding-inline: calc(var(--spacing) * 2.5);
  }

  .autocomplete__popover [role="presentation"] > [data-slot="list-box-item"] {
    width: calc(100% - var(--spacing) * 3);
  }

  .autocomplete__popover [data-slot="list-box"]:not([aria-multiselectable="true"]) [data-slot="list-box-item-indicator"], .autocomplete__popover [data-slot="list-box"]:not([aria-multiselectable="true"]) [data-slot="list-box-item-indicator"] [data-slot="list-box-item-indicator--checkmark"] {
    transition-property: none;
  }

  .autocomplete__popover [data-slot="search-field"] {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: var(--spacing);
    --tw-outline-style: none;
    outline-style: none;
  }

  .autocomplete__popover [data-slot="empty-state"] {
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--overlay-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .autocomplete__popover [data-slot="empty-state"] {
      color: color-mix(in oklab, var(--overlay-foreground) 60%, transparent);
    }
  }

  .autocomplete__popover-dialog, .autocomplete__popover-dialog:focus, .autocomplete__popover-dialog:focus-visible, .autocomplete__popover-dialog[data-focus-visible="true"] {
    --tw-outline-style: none;
    outline-style: none;
  }

  .autocomplete--full-width, .autocomplete__trigger--full-width {
    width: 100%;
  }

  .autocomplete__clear-button {
    isolation: isolate;
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    transform-origin: center;
    border-radius: calc(var(--radius) * 1.5);
    padding: var(--spacing);
    color: var(--muted);
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
    cursor: var(--cursor-interactive);
    transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
    background-color: #0000;
    flex-shrink: 0;
    justify-content: center;
    align-self: center;
    align-items: center;
    margin-inline-end: 0;
    display: inline-flex;
    position: relative;
  }

  .autocomplete__clear-button:not([data-empty="true"]) {
    transition: opacity .15s var(--ease-smooth);
  }

  .autocomplete__clear-button:not([data-empty="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .autocomplete__clear-button:not([data-empty="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .autocomplete__clear-button:not([data-empty="true"]):is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .autocomplete__clear-button:not([data-empty="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .autocomplete__clear-button:not([data-empty="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .autocomplete__clear-button:not([data-empty="true"]):not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .autocomplete__clear-button[data-empty="true"] {
    pointer-events: none;
    opacity: 0;
  }

  .autocomplete__clear-button [data-slot="autocomplete-clear-button-icon"] {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
  }

  @media (hover: hover) {
    .autocomplete__clear-button:hover, .autocomplete__clear-button[data-hovered="true"] {
      background-color: var(--default-hover);
    }
  }

  .autocomplete__clear-button:active, .autocomplete__clear-button[data-pressed="true"] {
    transform: scale(.93);
  }

  .kbd {
    height: calc(var(--spacing) * 6);
    align-items: center;
    display: inline-flex;
  }

  :where(.kbd > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * .5) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-x-reverse)));
  }

  .kbd {
    border-radius: calc(var(--radius) * 1);
    background-color: var(--default);
    padding-inline: calc(var(--spacing) * 2);
    text-align: center;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    color: var(--muted);
  }

  :where(.kbd:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) > :not(:last-child)) {
    --tw-space-x-reverse: 1;
  }

  .kbd {
    word-spacing: -.25rem;
  }

  .kbd__abbr {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    display: flex;
  }

  .kbd__content {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .kbd--light {
    background-color: #0000;
  }

  .typography, .typography-prose {
    color: var(--foreground);
  }

  .typography-prose h1 {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .typography-prose h2 {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .typography-prose h3 {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .typography-prose h4 {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .typography-prose h5 {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .typography-prose h6 {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .typography-prose p {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
  }

  .typography-prose code {
    border-radius: calc(var(--radius) * .75);
    background-color: var(--default);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * .5);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--foreground);
  }

  .typography-prose a {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--link);
    text-underline-offset: 4px;
    text-decoration-line: underline;
  }

  .typography-prose blockquote {
    margin-top: calc(var(--spacing) * 4);
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
    border-color: var(--border);
    padding-left: calc(var(--spacing) * 4);
    color: var(--muted);
    font-style: italic;
  }

  .typography-prose ul {
    margin-block: calc(var(--spacing) * 4);
    list-style-type: disc;
  }

  :where(.typography-prose ul > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }

  .typography-prose ul {
    padding-left: calc(var(--spacing) * 6);
  }

  .typography-prose ol {
    margin-block: calc(var(--spacing) * 4);
    list-style-type: decimal;
  }

  :where(.typography-prose ol > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }

  .typography-prose ol {
    padding-left: calc(var(--spacing) * 6);
  }

  .typography-prose li {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
  }

  .typography-prose hr {
    margin-block: calc(var(--spacing) * 8);
    border-color: var(--separator);
  }

  .typography-prose pre {
    margin-block: calc(var(--spacing) * 4);
    border-radius: calc(var(--radius) * 1.5);
    background-color: var(--default);
    padding: calc(var(--spacing) * 4);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    overflow-x: auto;
  }

  .typography-prose strong {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--foreground);
  }

  .typography-prose em {
    font-style: italic;
  }

  .typography-prose img {
    margin-block: calc(var(--spacing) * 4);
    border-radius: calc(var(--radius) * 1.5);
  }

  .typography--h1 {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .typography--h2 {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .typography--h3 {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .typography--h4 {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .typography--h5 {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .typography--h6 {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .typography--body {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
  }

  .typography--body-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
  }

  .typography--body-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
  }

  .typography--code {
    border-radius: calc(var(--radius) * .75);
    background-color: var(--default);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * .5);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--foreground);
  }

  .typography--align-start {
    text-align: left;
  }

  .typography--align-start:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
    text-align: right;
  }

  .typography--align-center {
    text-align: center;
  }

  .typography--align-end {
    text-align: right;
  }

  .typography--align-end:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
    text-align: left;
  }

  .typography--align-justify {
    text-align: justify;
  }

  .typography--color-default {
    color: var(--foreground);
  }

  .typography--color-muted {
    color: var(--muted);
  }

  .typography--truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    overflow: hidden;
  }

  .typography--weight-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }

  .typography--weight-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .typography--weight-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .typography--weight-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .scroll-shadow {
    --scroll-shadow-size: 40px;
    --scroll-shadow-scrollbar-size: 10px;
    position: relative;
  }

  .scroll-shadow--vertical {
    scrollbar-width: var(--scrollbar-width);
    scrollbar-color: var(--scrollbar-color);
    scrollbar-gutter: var(--scrollbar-gutter);
    overflow-y: auto;
  }

  .scroll-shadow--horizontal {
    scrollbar-width: var(--scrollbar-width);
    scrollbar-color: var(--scrollbar-color);
    scrollbar-gutter: var(--scrollbar-gutter);
    overflow-x: auto;
  }

  .scroll-shadow--fade.scroll-shadow--vertical:where([data-top-scroll="true"], [data-bottom-scroll="true"], [data-top-bottom-scroll="true"]) {
    -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000);
    -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000);
    mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000);
    -webkit-mask-position: 0 0, 100% 0;
    mask-position: 0 0, 100% 0;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: calc(100% - var(--scroll-shadow-scrollbar-size)) 100%, var(--scroll-shadow-scrollbar-size) 100%;
    -webkit-mask-size: calc(100% - var(--scroll-shadow-scrollbar-size)) 100%, var(--scroll-shadow-scrollbar-size) 100%;
    mask-size: calc(100% - var(--scroll-shadow-scrollbar-size)) 100%, var(--scroll-shadow-scrollbar-size) 100%;
    -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000);
    -webkit-mask-position: 0 0, 100% 0;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: calc(100% - var(--scroll-shadow-scrollbar-size)) 100%, var(--scroll-shadow-scrollbar-size) 100%;
  }

  .scroll-shadow--fade.scroll-shadow--vertical[data-top-scroll="true"] {
    --scroll-linear-gradient: 0deg, #000 calc(100% - var(--scroll-shadow-size)), transparent;
  }

  .scroll-shadow--fade.scroll-shadow--vertical[data-bottom-scroll="true"] {
    --scroll-linear-gradient: 180deg, #000 calc(100% - var(--scroll-shadow-size)), transparent;
  }

  .scroll-shadow--fade.scroll-shadow--vertical[data-top-bottom-scroll="true"] {
    --scroll-linear-gradient: #000, #000, transparent 0, #000 var(--scroll-shadow-size),
      #000 calc(100% - var(--scroll-shadow-size)), transparent;
  }

  .scroll-shadow--fade.scroll-shadow--horizontal:where([data-left-scroll="true"], [data-right-scroll="true"], [data-left-right-scroll="true"]) {
    -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000);
    -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000);
    mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000);
    -webkit-mask-position: 0 0, 0 100%;
    mask-position: 0 0, 0 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% calc(100% - var(--scroll-shadow-scrollbar-size)), 100% var(--scroll-shadow-scrollbar-size);
    -webkit-mask-size: 100% calc(100% - var(--scroll-shadow-scrollbar-size)), 100% var(--scroll-shadow-scrollbar-size);
    mask-size: 100% calc(100% - var(--scroll-shadow-scrollbar-size)), 100% var(--scroll-shadow-scrollbar-size);
    -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000);
    -webkit-mask-position: 0 0, 0 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% calc(100% - var(--scroll-shadow-scrollbar-size)), 100% var(--scroll-shadow-scrollbar-size);
  }

  .scroll-shadow--fade.scroll-shadow--horizontal[data-left-scroll="true"] {
    --scroll-linear-gradient: 270deg, #000 calc(100% - var(--scroll-shadow-size)), transparent;
  }

  .scroll-shadow--fade.scroll-shadow--horizontal[data-right-scroll="true"] {
    --scroll-linear-gradient: 90deg, #000 calc(100% - var(--scroll-shadow-size)), transparent;
  }

  .scroll-shadow--fade.scroll-shadow--horizontal[data-left-right-scroll="true"] {
    --scroll-linear-gradient: to right, #000, #000, transparent 0, #000 var(--scroll-shadow-size),
      #000 calc(100% - var(--scroll-shadow-size)), transparent;
  }

  .scroll-shadow--hide-scrollbar {
    scrollbar-color: auto;
    scrollbar-gutter: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    --scroll-shadow-scrollbar-size: 0px;
  }
}

@layer utilities {
  .\@container\/app-shell-detail-panel {
    container: app-shell-detail-panel / inline-size;
  }

  .\@container\/diff-header {
    container: diff-header / inline-size;
  }

  .\@container\/referral-tracking {
    container: referral-tracking / inline-size;
  }

  .\@container\/request-card {
    container: request-card / inline-size;
  }

  .\@container, .\@container-\[inline-size\] {
    container-type: inline-size;
  }

  .\@container-size {
    container-type: size;
  }

  .\[container-type\:inline-size\] {
    container-type: inline-size;
  }

  .\[container-type\:size\] {
    container-type: size;
  }

  .pointer-events-auto {
    pointer-events: auto;
  }

  .pointer-events-none, .status-pending {
    pointer-events: none;
  }

  .\!visible {
    visibility: visible !important;
  }

  .collapse {
    visibility: collapse;
  }

  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

  .visible\! {
    visibility: visible !important;
  }

  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .not-sr-only {
    clip-path: none;
    white-space: normal;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    position: static;
    overflow: visible;
  }

  .\!absolute {
    position: absolute !important;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  .-inset-1 {
    inset: calc(var(--spacing) * -1);
  }

  .-inset-4 {
    inset: calc(var(--spacing) * -4);
  }

  .inset-0 {
    inset: 0;
  }

  .inset-2 {
    inset: calc(var(--spacing) * 2);
  }

  .inset-\[5px\] {
    inset: 5px;
  }

  .inset-\[18\%\] {
    inset: 18%;
  }

  .inset-x-0 {
    inset-inline: 0;
  }

  .inset-x-2 {
    inset-inline: calc(var(--spacing) * 2);
  }

  .inset-x-6 {
    inset-inline: calc(var(--spacing) * 6);
  }

  .inset-x-12 {
    inset-inline: calc(var(--spacing) * 12);
  }

  .inset-y-0 {
    inset-block: 0;
  }

  .start-0 {
    inset-inline-start: calc(var(--spacing) * 0);
  }

  .start-0\.5 {
    inset-inline-start: calc(var(--spacing) * .5);
  }

  .start-1 {
    inset-inline-start: calc(var(--spacing) * 1);
  }

  .start-1\/2 {
    inset-inline-start: 50%;
  }

  .start-2 {
    inset-inline-start: calc(var(--spacing) * 2);
  }

  .start-3 {
    inset-inline-start: calc(var(--spacing) * 3);
  }

  .-end-0 {
    inset-inline-end: calc(var(--spacing) * 0);
  }

  .-end-0\.5 {
    inset-inline-end: calc(var(--spacing) * -.5);
  }

  .end-0 {
    inset-inline-end: calc(var(--spacing) * 0);
  }

  .end-1 {
    inset-inline-end: calc(var(--spacing) * 1);
  }

  .end-1\.5 {
    inset-inline-end: calc(var(--spacing) * 1.5);
  }

  .end-1\/2 {
    inset-inline-end: 50%;
  }

  .end-2 {
    inset-inline-end: calc(var(--spacing) * 2);
  }

  .end-3 {
    inset-inline-end: calc(var(--spacing) * 3);
  }

  .end-4 {
    inset-inline-end: calc(var(--spacing) * 4);
  }

  .end-full {
    inset-inline-end: 100%;
  }

  .end-px {
    inset-inline-end: 1px;
  }

  .\!top-0 {
    top: 0 !important;
  }

  .\!top-\[22px\] {
    top: 22px !important;
  }

  .-top-2 {
    top: calc(var(--spacing) * -2);
  }

  .-top-5 {
    top: calc(var(--spacing) * -5);
  }

  .-top-8 {
    top: calc(var(--spacing) * -8);
  }

  .-top-8\.5 {
    top: calc(var(--spacing) * -8.5);
  }

  .top-\(--thread-floating-content-top-inset\) {
    top: var(--thread-floating-content-top-inset);
  }

  .top-0 {
    top: 0;
  }

  .top-0\.5 {
    top: calc(var(--spacing) * .5);
  }

  .top-1 {
    top: var(--spacing);
  }

  .top-1\.5 {
    top: calc(var(--spacing) * 1.5);
  }

  .top-1\/2 {
    top: 50%;
  }

  .top-2 {
    top: calc(var(--spacing) * 2);
  }

  .top-3 {
    top: calc(var(--spacing) * 3);
  }

  .top-4 {
    top: calc(var(--spacing) * 4);
  }

  .top-5 {
    top: calc(var(--spacing) * 5);
  }

  .top-10 {
    top: calc(var(--spacing) * 10);
  }

  .top-14 {
    top: calc(var(--spacing) * 14);
  }

  .top-20 {
    top: calc(var(--spacing) * 20);
  }

  .top-24 {
    top: calc(var(--spacing) * 24);
  }

  .top-32 {
    top: calc(var(--spacing) * 32);
  }

  .top-\[21px\] {
    top: 21px;
  }

  .top-\[22px\] {
    top: 22px;
  }

  .top-\[80px\] {
    top: 80px;
  }

  .top-\[calc\(-1\*var\(--padding-panel\)\)\] {
    top: calc(-1 * var(--padding-panel));
  }

  .top-\[calc\(var\(--header-height\,48px\)\+8px\)\] {
    top: calc(var(--header-height, 48px) + 8px);
  }

  .top-\[inherit\] {
    top: inherit;
  }

  .top-full {
    top: 100%;
  }

  .top-px {
    top: 1px;
  }

  .\!right-\[22px\] {
    right: 22px !important;
  }

  .-right-0 {
    right: 0;
  }

  .-right-0\.5 {
    right: calc(var(--spacing) * -.5);
  }

  .-right-1 {
    right: calc(var(--spacing) * -1);
  }

  .-right-1\.5 {
    right: calc(var(--spacing) * -1.5);
  }

  .-right-3 {
    right: calc(var(--spacing) * -3);
  }

  .-right-5 {
    right: calc(var(--spacing) * -5);
  }

  .right-0 {
    right: 0;
  }

  .right-0\.5 {
    right: calc(var(--spacing) * .5);
  }

  .right-1 {
    right: var(--spacing);
  }

  .right-1\.5 {
    right: calc(var(--spacing) * 1.5);
  }

  .right-2 {
    right: calc(var(--spacing) * 2);
  }

  .right-2\.5 {
    right: calc(var(--spacing) * 2.5);
  }

  .right-3 {
    right: calc(var(--spacing) * 3);
  }

  .right-4 {
    right: calc(var(--spacing) * 4);
  }

  .right-5 {
    right: calc(var(--spacing) * 5);
  }

  .right-12 {
    right: calc(var(--spacing) * 12);
  }

  .right-14 {
    right: calc(var(--spacing) * 14);
  }

  .right-full {
    right: 100%;
  }

  .-bottom-0 {
    bottom: 0;
  }

  .-bottom-0\.5 {
    bottom: calc(var(--spacing) * -.5);
  }

  .-bottom-1 {
    bottom: calc(var(--spacing) * -1);
  }

  .-bottom-2 {
    bottom: calc(var(--spacing) * -2);
  }

  .bottom-\(--thread-floating-content-bottom-inset\) {
    bottom: var(--thread-floating-content-bottom-inset);
  }

  .bottom-0 {
    bottom: 0;
  }

  .bottom-1 {
    bottom: var(--spacing);
  }

  .bottom-2 {
    bottom: calc(var(--spacing) * 2);
  }

  .bottom-3 {
    bottom: calc(var(--spacing) * 3);
  }

  .bottom-4 {
    bottom: calc(var(--spacing) * 4);
  }

  .bottom-5 {
    bottom: calc(var(--spacing) * 5);
  }

  .bottom-6 {
    bottom: calc(var(--spacing) * 6);
  }

  .bottom-8 {
    bottom: calc(var(--spacing) * 8);
  }

  .bottom-10 {
    bottom: calc(var(--spacing) * 10);
  }

  .bottom-12 {
    bottom: calc(var(--spacing) * 12);
  }

  .bottom-14 {
    bottom: calc(var(--spacing) * 14);
  }

  .bottom-16 {
    bottom: calc(var(--spacing) * 16);
  }

  .bottom-20 {
    bottom: calc(var(--spacing) * 20);
  }

  .bottom-22 {
    bottom: calc(var(--spacing) * 22);
  }

  .bottom-24 {
    bottom: calc(var(--spacing) * 24);
  }

  .bottom-40 {
    bottom: calc(var(--spacing) * 40);
  }

  .bottom-\[52px\] {
    bottom: 52px;
  }

  .bottom-\[82px\] {
    bottom: 82px;
  }

  .bottom-\[calc\(100\%\+6\*var\(--spacing\)\)\] {
    bottom: calc(100% + 6 * var(--spacing));
  }

  .bottom-full {
    bottom: 100%;
  }

  .\!left-0 {
    left: 0 !important;
  }

  .-left-3 {
    left: calc(var(--spacing) * -3);
  }

  .-left-5 {
    left: calc(var(--spacing) * -5);
  }

  .left-0 {
    left: 0;
  }

  .left-1 {
    left: var(--spacing);
  }

  .left-1\/2 {
    left: 50%;
  }

  .left-2 {
    left: calc(var(--spacing) * 2);
  }

  .left-3 {
    left: calc(var(--spacing) * 3);
  }

  .left-4 {
    left: calc(var(--spacing) * 4);
  }

  .left-12 {
    left: calc(var(--spacing) * 12);
  }

  .left-full {
    left: 100%;
  }

  .isolate {
    isolation: isolate;
  }

  .isolation-auto {
    isolation: auto;
  }

  .\!z-10 {
    z-index: 10 !important;
  }

  .\!z-20 {
    z-index: 20 !important;
  }

  .-z-10 {
    z-index: calc(10 * -1);
  }

  .z-0 {
    z-index: 0;
  }

  .z-1 {
    z-index: 1;
  }

  .z-2 {
    z-index: 2;
  }

  .z-3 {
    z-index: 3;
  }

  .z-5 {
    z-index: 5;
  }

  .z-10 {
    z-index: 10;
  }

  .z-20 {
    z-index: 20;
  }

  .z-30 {
    z-index: 30;
  }

  .z-40 {
    z-index: 40;
  }

  .z-50 {
    z-index: 50;
  }

  .z-100 {
    z-index: 100;
  }

  .z-600 {
    z-index: 600;
  }

  .z-900 {
    z-index: 900;
  }

  .z-999 {
    z-index: 999;
  }

  .z-1000 {
    z-index: 1000;
  }

  .z-1050 {
    z-index: 1050;
  }

  .z-10000 {
    z-index: 10000;
  }

  .z-\[-1\] {
    z-index: -1;
  }

  .z-\[1\] {
    z-index: 1;
  }

  .z-\[2\] {
    z-index: 2;
  }

  .z-\[5\] {
    z-index: 5;
  }

  .z-\[41\] {
    z-index: 41;
  }

  .z-\[55\] {
    z-index: 55;
  }

  .z-\[56\] {
    z-index: 56;
  }

  .z-\[60\] {
    z-index: 60;
  }

  .z-\[10000\] {
    z-index: 10000;
  }

  .z-\[calc\(var\(--wb-menu-z-index\,70\)\+1\)\] {
    z-index: calc(var(--wb-menu-z-index, 70) + 1);
  }

  .z-\[var\(--wb-menu-z-index\,70\)\] {
    z-index: var(--wb-menu-z-index, 70);
  }

  .order-0 {
    order: 0;
  }

  .order-1 {
    order: 1;
  }

  .order-2 {
    order: 2;
  }

  .order-3 {
    order: 3;
  }

  .order-6 {
    order: 6;
  }

  .order-none {
    order: 0;
  }

  .col-1 {
    grid-column: 1;
  }

  .col-2 {
    grid-column: 2;
  }

  .col-3 {
    grid-column: 3;
  }

  .col-4 {
    grid-column: 4;
  }

  .col-5 {
    grid-column: 5;
  }

  .col-6 {
    grid-column: 6;
  }

  .col-8 {
    grid-column: 8;
  }

  .col-9 {
    grid-column: 9;
  }

  .col-12 {
    grid-column: 12;
  }

  .col-24 {
    grid-column: 24;
  }

  .col-33 {
    grid-column: 33;
  }

  .col-300 {
    grid-column: 300;
  }

  .col-312 {
    grid-column: 312;
  }

  .col-\[1\/2\] {
    grid-column: 1 / 2;
  }

  .col-\[2\/3\] {
    grid-column: 2 / 3;
  }

  .col-\[3\/4\] {
    grid-column: 3 / 4;
  }

  .col-span-1 {
    grid-column: span 1 / span 1;
  }

  .col-span-2 {
    grid-column: span 2 / span 2;
  }

  .col-span-full {
    grid-column: 1 / -1;
  }

  .col-start-1 {
    grid-column-start: 1;
  }

  .col-start-3 {
    grid-column-start: 3;
  }

  .col-end-2 {
    grid-column-end: 2;
  }

  .row-3 {
    grid-row: 3;
  }

  .row-10 {
    grid-row: 10;
  }

  .row-15 {
    grid-row: 15;
  }

  .row-\[1\] {
    grid-row: 1;
  }

  .row-start-1 {
    grid-row-start: 1;
  }

  .row-start-2 {
    grid-row-start: 2;
  }

  .row-end-2 {
    grid-row-end: 2;
  }

  .float-end {
    float: inline-end;
  }

  .float-left {
    float: left;
  }

  .float-none {
    float: none;
  }

  .float-right {
    float: right;
  }

  .float-start {
    float: inline-start;
  }

  .clear-both {
    clear: both;
  }

  .clear-end {
    clear: inline-end;
  }

  .clear-left {
    clear: left;
  }

  .clear-none {
    clear: none;
  }

  .clear-right {
    clear: right;
  }

  .clear-start {
    clear: inline-start;
  }

  .\!container {
    width: 100% !important;
  }

  @media (min-width: 40rem) {
    .\!container {
      max-width: 40rem !important;
    }
  }

  @media (min-width: 48rem) {
    .\!container {
      max-width: 48rem !important;
    }
  }

  @media (min-width: 64rem) {
    .\!container {
      max-width: 64rem !important;
    }
  }

  @media (min-width: 80rem) {
    .\!container {
      max-width: 80rem !important;
    }
  }

  @media (min-width: 96rem) {
    .\!container {
      max-width: 96rem !important;
    }
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .container\! {
    width: 100% !important;
  }

  @media (min-width: 40rem) {
    .container\! {
      max-width: 40rem !important;
    }
  }

  @media (min-width: 48rem) {
    .container\! {
      max-width: 48rem !important;
    }
  }

  @media (min-width: 64rem) {
    .container\! {
      max-width: 64rem !important;
    }
  }

  @media (min-width: 80rem) {
    .container\! {
      max-width: 80rem !important;
    }
  }

  @media (min-width: 96rem) {
    .container\! {
      max-width: 96rem !important;
    }
  }

  .\!-m-\[5px\] {
    margin: -5px !important;
  }

  .\!m-0 {
    margin: 0 !important;
  }

  .-m-0\.5 {
    margin: calc(var(--spacing) * -.5);
  }

  .-m-1 {
    margin: calc(var(--spacing) * -1);
  }

  .m-0 {
    margin: 0;
  }

  .m-1 {
    margin: var(--spacing);
  }

  .m-2 {
    margin: calc(var(--spacing) * 2);
  }

  .m-116 {
    margin: calc(var(--spacing) * 116);
  }

  .m-200 {
    margin: calc(var(--spacing) * 200);
  }

  .m-auto {
    margin: auto;
  }

  .m-px {
    margin: 1px;
  }

  .-mx-1 {
    margin-inline: calc(var(--spacing) * -1);
  }

  .-mx-1\.5 {
    margin-inline: calc(var(--spacing) * -1.5);
  }

  .-mx-2 {
    margin-inline: calc(var(--spacing) * -2);
  }

  .-mx-2\.5 {
    margin-inline: calc(var(--spacing) * -2.5);
  }

  .-mx-4 {
    margin-inline: calc(var(--spacing) * -4);
  }

  .-mx-\[var\(--padding-row-x\)\] {
    margin-inline: calc(var(--padding-row-x) * -1);
  }

  .-mx-px {
    margin-inline: -1px;
  }

  .mx-0 {
    margin-inline: 0;
  }

  .mx-0\.5 {
    margin-inline: calc(var(--spacing) * .5);
  }

  .mx-1 {
    margin-inline: var(--spacing);
  }

  .mx-2 {
    margin-inline: calc(var(--spacing) * 2);
  }

  .mx-3 {
    margin-inline: calc(var(--spacing) * 3);
  }

  .mx-4 {
    margin-inline: calc(var(--spacing) * 4);
  }

  .mx-auto {
    margin-inline: auto;
  }

  .my-0 {
    margin-block: 0;
  }

  .my-0\! {
    margin-block: 0 !important;
  }

  .my-0\.5 {
    margin-block: calc(var(--spacing) * .5);
  }

  .my-1 {
    margin-block: var(--spacing);
  }

  .my-1\.5 {
    margin-block: calc(var(--spacing) * 1.5);
  }

  .my-2 {
    margin-block: calc(var(--spacing) * 2);
  }

  .my-3 {
    margin-block: calc(var(--spacing) * 3);
  }

  .my-4 {
    margin-block: calc(var(--spacing) * 4);
  }

  .my-5 {
    margin-block: calc(var(--spacing) * 5);
  }

  .my-6 {
    margin-block: calc(var(--spacing) * 6);
  }

  .my-8 {
    margin-block: calc(var(--spacing) * 8);
  }

  .my-10 {
    margin-block: calc(var(--spacing) * 10);
  }

  .my-32 {
    margin-block: calc(var(--spacing) * 32);
  }

  .my-\[60px\] {
    margin-block: 60px;
  }

  .my-\[calc\(var\(--oai-wb-spacing\)\*-1\)\] {
    margin-block: calc(var(--oai-wb-spacing) * -1);
  }

  .my-auto {
    margin-block: auto;
  }

  .-ms-0\.5 {
    margin-inline-start: calc(var(--spacing) * -.5);
  }

  .-ms-1 {
    margin-inline-start: calc(var(--spacing) * -1);
  }

  .-ms-1\.5 {
    margin-inline-start: calc(var(--spacing) * -1.5);
  }

  .-ms-2 {
    margin-inline-start: calc(var(--spacing) * -2);
  }

  .-ms-3 {
    margin-inline-start: calc(var(--spacing) * -3);
  }

  .-ms-6 {
    margin-inline-start: calc(var(--spacing) * -6);
  }

  .ms-0 {
    margin-inline-start: 0;
  }

  .ms-0\.5 {
    margin-inline-start: calc(var(--spacing) * .5);
  }

  .ms-1 {
    margin-inline-start: var(--spacing);
  }

  .ms-1\.5 {
    margin-inline-start: calc(var(--spacing) * 1.5);
  }

  .ms-2 {
    margin-inline-start: calc(var(--spacing) * 2);
  }

  .ms-3 {
    margin-inline-start: calc(var(--spacing) * 3);
  }

  .ms-8 {
    margin-inline-start: calc(var(--spacing) * 8);
  }

  .ms-\[3px\] {
    margin-inline-start: 3px;
  }

  .ms-auto {
    margin-inline-start: auto;
  }

  .ms-px {
    margin-inline-start: 1px;
  }

  .-me-0\.5 {
    margin-inline-end: calc(var(--spacing) * -.5);
  }

  .-me-1 {
    margin-inline-end: calc(var(--spacing) * -1);
  }

  .-me-1\.5 {
    margin-inline-end: calc(var(--spacing) * -1.5);
  }

  .-me-2 {
    margin-inline-end: calc(var(--spacing) * -2);
  }

  .me-0 {
    margin-inline-end: 0;
  }

  .me-0\.5 {
    margin-inline-end: calc(var(--spacing) * .5);
  }

  .me-1 {
    margin-inline-end: var(--spacing);
  }

  .me-1\.5 {
    margin-inline-end: calc(var(--spacing) * 1.5);
  }

  .me-2 {
    margin-inline-end: calc(var(--spacing) * 2);
  }

  .me-2\.5 {
    margin-inline-end: calc(var(--spacing) * 2.5);
  }

  .me-3 {
    margin-inline-end: calc(var(--spacing) * 3);
  }

  .me-\[1ch\] {
    margin-inline-end: 1ch;
  }

  .me-\[var\(--task-row-trailing-inset\)\] {
    margin-inline-end: var(--task-row-trailing-inset);
  }

  .me-auto {
    margin-inline-end: auto;
  }

  .-mt-1 {
    margin-top: calc(var(--spacing) * -1);
  }

  .-mt-5 {
    margin-top: calc(var(--spacing) * -5);
  }

  .mt-\(--app-shell-main-content-frame-top-offset\) {
    margin-top: var(--app-shell-main-content-frame-top-offset);
  }

  .mt-0 {
    margin-top: 0;
  }

  .mt-0\.5 {
    margin-top: calc(var(--spacing) * .5);
  }

  .mt-1 {
    margin-top: var(--spacing);
  }

  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }

  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }

  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }

  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }

  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }

  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }

  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }

  .mt-14 {
    margin-top: calc(var(--spacing) * 14);
  }

  .mt-15 {
    margin-top: calc(var(--spacing) * 15);
  }

  .mt-20 {
    margin-top: calc(var(--spacing) * 20);
  }

  .mt-30 {
    margin-top: calc(var(--spacing) * 30);
  }

  .mt-32 {
    margin-top: calc(var(--spacing) * 32);
  }

  .mt-\[3px\] {
    margin-top: 3px;
  }

  .mt-\[9px\] {
    margin-top: 9px;
  }

  .mt-\[16px\] {
    margin-top: 16px;
  }

  .mt-auto {
    margin-top: auto;
  }

  .-mr-0 {
    margin-right: 0;
  }

  .-mr-0\.5 {
    margin-right: calc(var(--spacing) * -.5);
  }

  .-mr-1 {
    margin-right: calc(var(--spacing) * -1);
  }

  .mr-0 {
    margin-right: 0;
  }

  .mr-0\.5 {
    margin-right: calc(var(--spacing) * .5);
  }

  .mr-1 {
    margin-right: var(--spacing);
  }

  .mr-1\.5 {
    margin-right: calc(var(--spacing) * 1.5);
  }

  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }

  .mr-2\.5 {
    margin-right: calc(var(--spacing) * 2.5);
  }

  .mr-3 {
    margin-right: calc(var(--spacing) * 3);
  }

  .mr-\[1ch\] {
    margin-right: 1ch;
  }

  .mr-\[3px\] {
    margin-right: 3px;
  }

  .mr-\[var\(--task-row-trailing-inset\)\] {
    margin-right: var(--task-row-trailing-inset);
  }

  .mr-auto {
    margin-right: auto;
  }

  .-mb-2 {
    margin-bottom: calc(var(--spacing) * -2);
  }

  .-mb-3 {
    margin-bottom: calc(var(--spacing) * -3);
  }

  .-mb-4 {
    margin-bottom: calc(var(--spacing) * -4);
  }

  .-mb-4\.5 {
    margin-bottom: calc(var(--spacing) * -4.5);
  }

  .-mb-px {
    margin-bottom: -1px;
  }

  .mb-0 {
    margin-bottom: 0;
  }

  .mb-0\.5 {
    margin-bottom: calc(var(--spacing) * .5);
  }

  .mb-1 {
    margin-bottom: var(--spacing);
  }

  .mb-1\.5 {
    margin-bottom: calc(var(--spacing) * 1.5);
  }

  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }

  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }

  .mb-9 {
    margin-bottom: calc(var(--spacing) * 9);
  }

  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }

  .mb-11 {
    margin-bottom: calc(var(--spacing) * 11);
  }

  .mb-15 {
    margin-bottom: calc(var(--spacing) * 15);
  }

  .mb-16 {
    margin-bottom: calc(var(--spacing) * 16);
  }

  .mb-25 {
    margin-bottom: calc(var(--spacing) * 25);
  }

  .mb-28 {
    margin-bottom: calc(var(--spacing) * 28);
  }

  .mb-30 {
    margin-bottom: calc(var(--spacing) * 30);
  }

  .mb-\[-44px\] {
    margin-bottom: -44px;
  }

  .mb-\[5px\] {
    margin-bottom: 5px;
  }

  .mb-\[calc\(var\(--oai-wb-spacing\)\*3\)\] {
    margin-bottom: calc(var(--oai-wb-spacing) * 3);
  }

  .mb-px {
    margin-bottom: 1px;
  }

  .-ml-0 {
    margin-left: 0;
  }

  .-ml-0\.5 {
    margin-left: calc(var(--spacing) * -.5);
  }

  .-ml-1 {
    margin-left: calc(var(--spacing) * -1);
  }

  .-ml-2 {
    margin-left: calc(var(--spacing) * -2);
  }

  .-ml-3 {
    margin-left: calc(var(--spacing) * -3);
  }

  .-ml-6 {
    margin-left: calc(var(--spacing) * -6);
  }

  .ml-0 {
    margin-left: 0;
  }

  .ml-0\.5 {
    margin-left: calc(var(--spacing) * .5);
  }

  .ml-1 {
    margin-left: var(--spacing);
  }

  .ml-1\.5 {
    margin-left: calc(var(--spacing) * 1.5);
  }

  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }

  .ml-3 {
    margin-left: calc(var(--spacing) * 3);
  }

  .ml-8 {
    margin-left: calc(var(--spacing) * 8);
  }

  .ml-\[3px\] {
    margin-left: 3px;
  }

  .ml-auto {
    margin-left: auto;
  }

  .ml-px {
    margin-left: 1px;
  }

  .box-border {
    box-sizing: border-box;
  }

  .box-content {
    box-sizing: content-box;
  }

  .line-clamp-1 {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .line-clamp-2 {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .line-clamp-3 {
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .line-clamp-4 {
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .line-clamp-12 {
    -webkit-line-clamp: 12;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .\!inline-flex {
    display: inline-flex !important;
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .contents\! {
    display: contents !important;
  }

  .flex {
    display: flex;
  }

  .flow-root {
    display: flow-root;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .hidden\! {
    display: none !important;
  }

  .inline {
    display: inline;
  }

  .inline\! {
    display: inline !important;
  }

  .inline-block {
    display: inline-block;
  }

  .inline-flex {
    display: inline-flex;
  }

  .inline-grid {
    display: inline-grid;
  }

  .inline-table {
    display: inline-table;
  }

  .list-item {
    display: list-item;
  }

  .table {
    display: table;
  }

  .table\! {
    display: table !important;
  }

  .table-caption {
    display: table-caption;
  }

  .table-cell {
    display: table-cell;
  }

  .table-column {
    display: table-column;
  }

  .table-column-group {
    display: table-column-group;
  }

  .table-footer-group {
    display: table-footer-group;
  }

  .table-header-group {
    display: table-header-group;
  }

  .table-row {
    display: table-row;
  }

  .table-row-group {
    display: table-row-group;
  }

  .field-sizing-content {
    field-sizing: content;
  }

  .field-sizing-fixed {
    field-sizing: fixed;
  }

  .\!aspect-square {
    aspect-ratio: 1 !important;
  }

  .aspect-\[4\/5\] {
    aspect-ratio: 4 / 5;
  }

  .aspect-square {
    aspect-ratio: 1;
  }

  .aspect-video {
    aspect-ratio: var(--aspect-video);
  }

  .\!size-9 {
    width: calc(var(--spacing) * 9) !important;
    height: calc(var(--spacing) * 9) !important;
  }

  .\!size-full {
    width: 100% !important;
    height: 100% !important;
  }

  .size-0 {
    width: 0;
    height: 0;
  }

  .size-1 {
    width: var(--spacing);
    height: var(--spacing);
  }

  .size-1\.5 {
    width: calc(var(--spacing) * 1.5);
    height: calc(var(--spacing) * 1.5);
  }

  .size-2 {
    width: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 2);
  }

  .size-3 {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }

  .size-3\.5 {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
  }

  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .size-5 {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }

  .size-6 {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }

  .size-7 {
    width: calc(var(--spacing) * 7);
    height: calc(var(--spacing) * 7);
  }

  .size-8 {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
  }

  .size-9 {
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
  }

  .size-10 {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
  }

  .size-12 {
    width: calc(var(--spacing) * 12);
    height: calc(var(--spacing) * 12);
  }

  .size-14 {
    width: calc(var(--spacing) * 14);
    height: calc(var(--spacing) * 14);
  }

  .size-15 {
    width: calc(var(--spacing) * 15);
    height: calc(var(--spacing) * 15);
  }

  .size-16 {
    width: calc(var(--spacing) * 16);
    height: calc(var(--spacing) * 16);
  }

  .size-20 {
    width: calc(var(--spacing) * 20);
    height: calc(var(--spacing) * 20);
  }

  .size-25 {
    width: calc(var(--spacing) * 25);
    height: calc(var(--spacing) * 25);
  }

  .size-28 {
    width: calc(var(--spacing) * 28);
    height: calc(var(--spacing) * 28);
  }

  .size-40 {
    width: calc(var(--spacing) * 40);
    height: calc(var(--spacing) * 40);
  }

  .size-50 {
    width: calc(var(--spacing) * 50);
    height: calc(var(--spacing) * 50);
  }

  .size-65 {
    width: calc(var(--spacing) * 65);
    height: calc(var(--spacing) * 65);
  }

  .size-75 {
    width: calc(var(--spacing) * 75);
    height: calc(var(--spacing) * 75);
  }

  .size-85 {
    width: calc(var(--spacing) * 85);
    height: calc(var(--spacing) * 85);
  }

  .size-100 {
    width: calc(var(--spacing) * 100);
    height: calc(var(--spacing) * 100);
  }

  .size-115 {
    width: calc(var(--spacing) * 115);
    height: calc(var(--spacing) * 115);
  }

  .size-125 {
    width: calc(var(--spacing) * 125);
    height: calc(var(--spacing) * 125);
  }

  .size-130 {
    width: calc(var(--spacing) * 130);
    height: calc(var(--spacing) * 130);
  }

  .size-150 {
    width: calc(var(--spacing) * 150);
    height: calc(var(--spacing) * 150);
  }

  .size-160 {
    width: calc(var(--spacing) * 160);
    height: calc(var(--spacing) * 160);
  }

  .size-175 {
    width: calc(var(--spacing) * 175);
    height: calc(var(--spacing) * 175);
  }

  .size-200 {
    width: calc(var(--spacing) * 200);
    height: calc(var(--spacing) * 200);
  }

  .size-225 {
    width: calc(var(--spacing) * 225);
    height: calc(var(--spacing) * 225);
  }

  .size-250 {
    width: calc(var(--spacing) * 250);
    height: calc(var(--spacing) * 250);
  }

  .size-275 {
    width: calc(var(--spacing) * 275);
    height: calc(var(--spacing) * 275);
  }

  .size-300 {
    width: calc(var(--spacing) * 300);
    height: calc(var(--spacing) * 300);
  }

  .size-325 {
    width: calc(var(--spacing) * 325);
    height: calc(var(--spacing) * 325);
  }

  .size-350 {
    width: calc(var(--spacing) * 350);
    height: calc(var(--spacing) * 350);
  }

  .size-400 {
    width: calc(var(--spacing) * 400);
    height: calc(var(--spacing) * 400);
  }

  .size-450 {
    width: calc(var(--spacing) * 450);
    height: calc(var(--spacing) * 450);
  }

  .size-500 {
    width: calc(var(--spacing) * 500);
    height: calc(var(--spacing) * 500);
  }

  .size-550 {
    width: calc(var(--spacing) * 550);
    height: calc(var(--spacing) * 550);
  }

  .size-600 {
    width: calc(var(--spacing) * 600);
    height: calc(var(--spacing) * 600);
  }

  .size-675 {
    width: calc(var(--spacing) * 675);
    height: calc(var(--spacing) * 675);
  }

  .size-700 {
    width: calc(var(--spacing) * 700);
    height: calc(var(--spacing) * 700);
  }

  .size-800 {
    width: calc(var(--spacing) * 800);
    height: calc(var(--spacing) * 800);
  }

  .size-900 {
    width: calc(var(--spacing) * 900);
    height: calc(var(--spacing) * 900);
  }

  .size-1000 {
    width: calc(var(--spacing) * 1000);
    height: calc(var(--spacing) * 1000);
  }

  .size-1200 {
    width: calc(var(--spacing) * 1200);
    height: calc(var(--spacing) * 1200);
  }

  .size-1250 {
    width: calc(var(--spacing) * 1250);
    height: calc(var(--spacing) * 1250);
  }

  .size-1600 {
    width: calc(var(--spacing) * 1600);
    height: calc(var(--spacing) * 1600);
  }

  .size-1700 {
    width: calc(var(--spacing) * 1700);
    height: calc(var(--spacing) * 1700);
  }

  .size-2000 {
    width: calc(var(--spacing) * 2000);
    height: calc(var(--spacing) * 2000);
  }

  .size-2400 {
    width: calc(var(--spacing) * 2400);
    height: calc(var(--spacing) * 2400);
  }

  .size-3000 {
    width: calc(var(--spacing) * 3000);
    height: calc(var(--spacing) * 3000);
  }

  .size-3400 {
    width: calc(var(--spacing) * 3400);
    height: calc(var(--spacing) * 3400);
  }

  .size-3600 {
    width: calc(var(--spacing) * 3600);
    height: calc(var(--spacing) * 3600);
  }

  .size-4600 {
    width: calc(var(--spacing) * 4600);
    height: calc(var(--spacing) * 4600);
  }

  .size-5000 {
    width: calc(var(--spacing) * 5000);
    height: calc(var(--spacing) * 5000);
  }

  .size-6000 {
    width: calc(var(--spacing) * 6000);
    height: calc(var(--spacing) * 6000);
  }

  .size-\[7px\] {
    width: 7px;
    height: 7px;
  }

  .size-\[18px\] {
    width: 18px;
    height: 18px;
  }

  .size-\[30rem\] {
    width: 30rem;
    height: 30rem;
  }

  .size-\[50px\] {
    width: 50px;
    height: 50px;
  }

  .size-\[54px\] {
    width: 54px;
    height: 54px;
  }

  .size-\[60px\] {
    width: 60px;
    height: 60px;
  }

  .size-\[70\%\] {
    width: 70%;
    height: 70%;
  }

  .size-\[79px\] {
    width: 79px;
    height: 79px;
  }

  .size-\[clamp\(24px\,calc\(100dvh\/var\(--codex-window-zoom\)-224px\)\,120px\)\] {
    width: clamp(24px, calc(100dvh / var(--codex-window-zoom) - 224px), 120px);
    height: clamp(24px, calc(100dvh / var(--codex-window-zoom) - 224px), 120px);
  }

  .size-auto {
    width: auto;
    height: auto;
  }

  .size-full {
    width: 100%;
    height: 100%;
  }

  .\!h-5 {
    height: calc(var(--spacing) * 5) !important;
  }

  .\!h-6 {
    height: calc(var(--spacing) * 6) !important;
  }

  .\!h-9 {
    height: calc(var(--spacing) * 9) !important;
  }

  .\!h-auto {
    height: auto !important;
  }

  .\!h-full {
    height: 100% !important;
  }

  .h-0 {
    height: 0;
  }

  .h-0\.5 {
    height: calc(var(--spacing) * .5);
  }

  .h-1 {
    height: var(--spacing);
  }

  .h-1\.5 {
    height: calc(var(--spacing) * 1.5);
  }

  .h-1\/2 {
    height: 50%;
  }

  .h-2 {
    height: calc(var(--spacing) * 2);
  }

  .h-2\.5 {
    height: calc(var(--spacing) * 2.5);
  }

  .h-3 {
    height: calc(var(--spacing) * 3);
  }

  .h-3\.5 {
    height: calc(var(--spacing) * 3.5);
  }

  .h-4 {
    height: calc(var(--spacing) * 4);
  }

  .h-5 {
    height: calc(var(--spacing) * 5);
  }

  .h-6 {
    height: calc(var(--spacing) * 6);
  }

  .h-7 {
    height: calc(var(--spacing) * 7);
  }

  .h-8 {
    height: calc(var(--spacing) * 8);
  }

  .h-9 {
    height: calc(var(--spacing) * 9);
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .h-11 {
    height: calc(var(--spacing) * 11);
  }

  .h-12 {
    height: calc(var(--spacing) * 12);
  }

  .h-14 {
    height: calc(var(--spacing) * 14);
  }

  .h-16 {
    height: calc(var(--spacing) * 16);
  }

  .h-20 {
    height: calc(var(--spacing) * 20);
  }

  .h-24 {
    height: calc(var(--spacing) * 24);
  }

  .h-26 {
    height: calc(var(--spacing) * 26);
  }

  .h-32 {
    height: calc(var(--spacing) * 32);
  }

  .h-40 {
    height: calc(var(--spacing) * 40);
  }

  .h-48 {
    height: calc(var(--spacing) * 48);
  }

  .h-52 {
    height: calc(var(--spacing) * 52);
  }

  .h-64 {
    height: calc(var(--spacing) * 64);
  }

  .h-70 {
    height: calc(var(--spacing) * 70);
  }

  .h-72 {
    height: calc(var(--spacing) * 72);
  }

  .h-80 {
    height: calc(var(--spacing) * 80);
  }

  .h-84 {
    height: calc(var(--spacing) * 84);
  }

  .h-100 {
    height: calc(var(--spacing) * 100);
  }

  .h-120 {
    height: calc(var(--spacing) * 120);
  }

  .h-250 {
    height: calc(var(--spacing) * 250);
  }

  .h-470 {
    height: calc(var(--spacing) * 470);
  }

  .h-\[0\.5px\] {
    height: .5px;
  }

  .h-\[1lh\] {
    height: 1lh;
  }

  .h-\[1px\] {
    height: 1px;
  }

  .h-\[28px\] {
    height: 28px;
  }

  .h-\[34px\] {
    height: 34px;
  }

  .h-\[44px\] {
    height: 44px;
  }

  .h-\[50px\] {
    height: 50px;
  }

  .h-\[52px\] {
    height: 52px;
  }

  .h-\[62px\] {
    height: 62px;
  }

  .h-\[70px\] {
    height: 70px;
  }

  .h-\[72px\] {
    height: 72px;
  }

  .h-\[77px\] {
    height: 77px;
  }

  .h-\[84px\] {
    height: 84px;
  }

  .h-\[90px\] {
    height: 90px;
  }

  .h-\[100dvh\] {
    height: 100dvh;
  }

  .h-\[100px\] {
    height: 100px;
  }

  .h-\[120px\] {
    height: 120px;
  }

  .h-\[140px\] {
    height: 140px;
  }

  .h-\[150px\] {
    height: 150px;
  }

  .h-\[200px\] {
    height: 200px;
  }

  .h-\[250px\] {
    height: 250px;
  }

  .h-\[350px\] {
    height: 350px;
  }

  .h-\[600px\] {
    height: 600px;
  }

  .h-\[720px\] {
    height: 720px;
  }

  .h-\[\\\"\] {
    height: \";
  }

  .h-\[calc\(100\%\+40px\)\] {
    height: calc(100% + 40px);
  }

  .h-\[calc\(var\(--oai-wb-spacing\)\*7\)\] {
    height: calc(var(--oai-wb-spacing) * 7);
  }

  .h-\[calc\(var\(--oai-wb-spacing\)\*9\)\] {
    height: calc(var(--oai-wb-spacing) * 9);
  }

  .h-\[calc\(var\(--spacing-token-button-composer\)\+6px\)\] {
    height: calc(var(--spacing-token-button-composer) + 6px);
  }

  .h-\[calc\\\"\] {
    height: calc\";
  }

  .h-\[clamp\(56px\,calc\(100dvh\/var\(--codex-window-zoom\)-192px\)\,214px\)\] {
    height: clamp(56px, calc(100dvh / var(--codex-window-zoom) - 192px), 214px);
  }

  .h-\[min\(72vh\,44rem\)\] {
    height: min(72vh, 44rem);
  }

  .h-\[min\(406px\,calc\(100dvh\/var\(--codex-window-zoom\)-2rem\)\)\] {
    height: min(406px, calc(100dvh / var(--codex-window-zoom) - 2rem));
  }

  .h-\[var\(--height-token-row\)\] {
    height: var(--height-token-row);
  }

  .h-auto {
    height: auto;
  }

  .h-fit {
    height: fit-content;
  }

  .h-full {
    height: 100%;
  }

  .h-lh {
    height: 1lh;
  }

  .h-max {
    height: max-content;
  }

  .h-px {
    height: 1px;
  }

  .h-screen {
    height: 100vh;
  }

  .\!max-h-\[84px\] {
    max-height: 84px !important;
  }

  .\!max-h-\[100cqh\] {
    max-height: 100cqh !important;
  }

  .\!max-h-\[180px\] {
    max-height: 180px !important;
  }

  .\!max-h-\[292px\] {
    max-height: 292px !important;
  }

  .\!max-h-full {
    max-height: 100% !important;
  }

  .max-h-20 {
    max-height: calc(var(--spacing) * 20);
  }

  .max-h-24 {
    max-height: calc(var(--spacing) * 24);
  }

  .max-h-25 {
    max-height: calc(var(--spacing) * 25);
  }

  .max-h-30 {
    max-height: calc(var(--spacing) * 30);
  }

  .max-h-32 {
    max-height: calc(var(--spacing) * 32);
  }

  .max-h-36 {
    max-height: calc(var(--spacing) * 36);
  }

  .max-h-40 {
    max-height: calc(var(--spacing) * 40);
  }

  .max-h-48 {
    max-height: calc(var(--spacing) * 48);
  }

  .max-h-56 {
    max-height: calc(var(--spacing) * 56);
  }

  .max-h-60 {
    max-height: calc(var(--spacing) * 60);
  }

  .max-h-64 {
    max-height: calc(var(--spacing) * 64);
  }

  .max-h-80 {
    max-height: calc(var(--spacing) * 80);
  }

  .max-h-96 {
    max-height: calc(var(--spacing) * 96);
  }

  .max-h-128 {
    max-height: calc(var(--spacing) * 128);
  }

  .max-h-\[10rem\] {
    max-height: 10rem;
  }

  .max-h-\[12\.5rem\] {
    max-height: 12.5rem;
  }

  .max-h-\[25dvh\] {
    max-height: 25dvh;
  }

  .max-h-\[28rem\] {
    max-height: 28rem;
  }

  .max-h-\[30dvh\] {
    max-height: 30dvh;
  }

  .max-h-\[32rem\] {
    max-height: 32rem;
  }

  .max-h-\[36vh\] {
    max-height: 36vh;
  }

  .max-h-\[40vh\] {
    max-height: 40vh;
  }

  .max-h-\[55vh\] {
    max-height: 55vh;
  }

  .max-h-\[60vh\] {
    max-height: 60vh;
  }

  .max-h-\[80vh\] {
    max-height: 80vh;
  }

  .max-h-\[84px\] {
    max-height: 84px;
  }

  .max-h-\[92vh\] {
    max-height: 92vh;
  }

  .max-h-\[100cqh\] {
    max-height: 100cqh;
  }

  .max-h-\[140px\] {
    max-height: 140px;
  }

  .max-h-\[200px\] {
    max-height: 200px;
  }

  .max-h-\[216px\] {
    max-height: 216px;
  }

  .max-h-\[220px\] {
    max-height: 220px;
  }

  .max-h-\[240px\] {
    max-height: 240px;
  }

  .max-h-\[250px\] {
    max-height: 250px;
  }

  .max-h-\[300px\] {
    max-height: 300px;
  }

  .max-h-\[320px\] {
    max-height: 320px;
  }

  .max-h-\[420px\] {
    max-height: 420px;
  }

  .max-h-\[480px\] {
    max-height: 480px;
  }

  .max-h-\[560px\] {
    max-height: 560px;
  }

  .max-h-\[calc\(\(1lh\+var\(--padding-row-y\)\*2\)\*5\)\] {
    max-height: calc((1lh + var(--padding-row-y) * 2) * 5);
  }

  .max-h-\[calc\(100dvh-2rem\)\] {
    max-height: calc(100dvh - 2rem);
  }

  .max-h-\[calc\(100dvh\/var\(--codex-window-zoom\)-2rem\)\] {
    max-height: calc(100dvh / var(--codex-window-zoom) - 2rem);
  }

  .max-h-\[calc\(100vh-2rem\)\] {
    max-height: calc(100vh - 2rem);
  }

  .max-h-\[calc\(100vh-4rem\)\] {
    max-height: calc(100vh - 4rem);
  }

  .max-h-\[inherit\] {
    max-height: inherit;
  }

  .max-h-\[min\(22\.5rem\,calc\(100dvh\/var\(--codex-window-zoom\)-20rem\)\)\] {
    max-height: min(22.5rem, calc(100dvh / var(--codex-window-zoom) - 20rem));
  }

  .max-h-\[min\(34rem\,calc\(100vh_-_2rem\)\)\] {
    max-height: min(34rem, 100vh - 2rem);
  }

  .max-h-\[min\(48vh\,32rem\)\] {
    max-height: min(48vh, 32rem);
  }

  .max-h-\[min\(70vh\,40rem\)\] {
    max-height: min(70vh, 40rem);
  }

  .max-h-\[min\(var\(--radix-popover-content-available-height\)\,calc\(100vh-16px\)\)\] {
    max-height: min(var(--radix-popover-content-available-height), calc(100vh - 16px));
  }

  .max-h-\[var\(--markdown-wide-block-max-height\)\] {
    max-height: var(--markdown-wide-block-max-height);
  }

  .max-h-full {
    max-height: 100%;
  }

  .max-h-lh {
    max-height: 1lh;
  }

  .max-h-none {
    max-height: none;
  }

  .max-h-none\! {
    max-height: none !important;
  }

  .max-h-screen {
    max-height: 100vh;
  }

  .\!min-h-0 {
    min-height: 0 !important;
  }

  .min-h-0 {
    min-height: 0;
  }

  .min-h-0\! {
    min-height: 0 !important;
  }

  .min-h-4 {
    min-height: calc(var(--spacing) * 4);
  }

  .min-h-5 {
    min-height: calc(var(--spacing) * 5);
  }

  .min-h-6 {
    min-height: calc(var(--spacing) * 6);
  }

  .min-h-7 {
    min-height: calc(var(--spacing) * 7);
  }

  .min-h-8 {
    min-height: calc(var(--spacing) * 8);
  }

  .min-h-9 {
    min-height: calc(var(--spacing) * 9);
  }

  .min-h-10 {
    min-height: calc(var(--spacing) * 10);
  }

  .min-h-11 {
    min-height: calc(var(--spacing) * 11);
  }

  .min-h-12 {
    min-height: calc(var(--spacing) * 12);
  }

  .min-h-14 {
    min-height: calc(var(--spacing) * 14);
  }

  .min-h-16 {
    min-height: calc(var(--spacing) * 16);
  }

  .min-h-24 {
    min-height: calc(var(--spacing) * 24);
  }

  .min-h-32 {
    min-height: calc(var(--spacing) * 32);
  }

  .min-h-36 {
    min-height: calc(var(--spacing) * 36);
  }

  .min-h-40 {
    min-height: calc(var(--spacing) * 40);
  }

  .min-h-44 {
    min-height: calc(var(--spacing) * 44);
  }

  .min-h-52 {
    min-height: calc(var(--spacing) * 52);
  }

  .min-h-56 {
    min-height: calc(var(--spacing) * 56);
  }

  .min-h-62 {
    min-height: calc(var(--spacing) * 62);
  }

  .min-h-64 {
    min-height: calc(var(--spacing) * 64);
  }

  .min-h-72 {
    min-height: calc(var(--spacing) * 72);
  }

  .min-h-90 {
    min-height: calc(var(--spacing) * 90);
  }

  .min-h-100 {
    min-height: calc(var(--spacing) * 100);
  }

  .min-h-120 {
    min-height: calc(var(--spacing) * 120);
  }

  .min-h-\[1\.25rem\] {
    min-height: 1.25rem;
  }

  .min-h-\[7\.375rem\] {
    min-height: 7.375rem;
  }

  .min-h-\[30px\] {
    min-height: 30px;
  }

  .min-h-\[48px\] {
    min-height: 48px;
  }

  .min-h-\[68px\] {
    min-height: 68px;
  }

  .min-h-\[72px\] {
    min-height: 72px;
  }

  .min-h-\[75px\] {
    min-height: 75px;
  }

  .min-h-\[120px\] {
    min-height: 120px;
  }

  .min-h-\[125px\] {
    min-height: 125px;
  }

  .min-h-\[200px\] {
    min-height: 200px;
  }

  .min-h-\[240px\] {
    min-height: 240px;
  }

  .min-h-\[265px\] {
    min-height: 265px;
  }

  .min-h-\[300px\] {
    min-height: 300px;
  }

  .min-h-\[306px\] {
    min-height: 306px;
  }

  .min-h-\[328px\] {
    min-height: 328px;
  }

  .min-h-\[370px\] {
    min-height: 370px;
  }

  .min-h-\[420px\] {
    min-height: 420px;
  }

  .min-h-\[520px\] {
    min-height: 520px;
  }

  .min-h-\[553px\] {
    min-height: 553px;
  }

  .min-h-\[\\\"\] {
    min-height: \";
  }

  .min-h-\[calc\(var\(--oai-wb-spacing\)\*8\)\] {
    min-height: calc(var(--oai-wb-spacing) * 8);
  }

  .min-h-\[var\(--height-token-empty-state-page\)\] {
    min-height: var(--height-token-empty-state-page);
  }

  .min-h-\[var\(--height-token-row\)\] {
    min-height: var(--height-token-row);
  }

  .min-h-\[var\(--height-token-settings-row\)\] {
    min-height: var(--height-token-settings-row);
  }

  .min-h-auto {
    min-height: auto;
  }

  .min-h-full {
    min-height: 100%;
  }

  .min-h-lh {
    min-height: 1lh;
  }

  .min-h-screen {
    min-height: 100vh;
  }

  .\!\[width\:clamp\(0px\,calc\(var\(--radix-tooltip-trigger-width\)_-_64px\)\,var\(--radix-tooltip-content-available-width\)\)\] {
    width: clamp(0px, calc(var(--radix-tooltip-trigger-width) - 64px), var(--radix-tooltip-content-available-width)) !important;
  }

  .\!w-5 {
    width: calc(var(--spacing) * 5) !important;
  }

  .\!w-10 {
    width: calc(var(--spacing) * 10) !important;
  }

  .\!w-\[136px\] {
    width: 136px !important;
  }

  .\!w-\[260px\] {
    width: 260px !important;
  }

  .\!w-\[379px\] {
    width: 379px !important;
  }

  .\!w-\[450px\] {
    width: 450px !important;
  }

  .\!w-\[480px\] {
    width: 480px !important;
  }

  .\!w-\[calc\(100\%\+0\.5rem\)\] {
    width: calc(100% + .5rem) !important;
  }

  .\!w-\[min\(800px\,calc\(100vw-2rem\)\)\] {
    width: min(800px, 100vw - 2rem) !important;
  }

  .\!w-auto {
    width: auto !important;
  }

  .\!w-fit {
    width: fit-content !important;
  }

  .w-0 {
    width: 0;
  }

  .w-0\.5 {
    width: calc(var(--spacing) * .5);
  }

  .w-1 {
    width: var(--spacing);
  }

  .w-1\.5 {
    width: calc(var(--spacing) * 1.5);
  }

  .w-1\/2 {
    width: 50%;
  }

  .w-1\/3 {
    width: 33.3333%;
  }

  .w-2 {
    width: calc(var(--spacing) * 2);
  }

  .w-2\.5 {
    width: calc(var(--spacing) * 2.5);
  }

  .w-3 {
    width: calc(var(--spacing) * 3);
  }

  .w-3\.5 {
    width: calc(var(--spacing) * 3.5);
  }

  .w-4 {
    width: calc(var(--spacing) * 4);
  }

  .w-4\/5 {
    width: 80%;
  }

  .w-5 {
    width: calc(var(--spacing) * 5);
  }

  .w-6 {
    width: calc(var(--spacing) * 6);
  }

  .w-7 {
    width: calc(var(--spacing) * 7);
  }

  .w-8 {
    width: calc(var(--spacing) * 8);
  }

  .w-9 {
    width: calc(var(--spacing) * 9);
  }

  .w-10 {
    width: calc(var(--spacing) * 10);
  }

  .w-11 {
    width: calc(var(--spacing) * 11);
  }

  .w-12 {
    width: calc(var(--spacing) * 12);
  }

  .w-14 {
    width: calc(var(--spacing) * 14);
  }

  .w-20 {
    width: calc(var(--spacing) * 20);
  }

  .w-24 {
    width: calc(var(--spacing) * 24);
  }

  .w-25 {
    width: calc(var(--spacing) * 25);
  }

  .w-28 {
    width: calc(var(--spacing) * 28);
  }

  .w-36 {
    width: calc(var(--spacing) * 36);
  }

  .w-38 {
    width: calc(var(--spacing) * 38);
  }

  .w-44 {
    width: calc(var(--spacing) * 44);
  }

  .w-48 {
    width: calc(var(--spacing) * 48);
  }

  .w-52 {
    width: calc(var(--spacing) * 52);
  }

  .w-56 {
    width: calc(var(--spacing) * 56);
  }

  .w-64 {
    width: calc(var(--spacing) * 64);
  }

  .w-72 {
    width: calc(var(--spacing) * 72);
  }

  .w-80 {
    width: calc(var(--spacing) * 80);
  }

  .w-96 {
    width: calc(var(--spacing) * 96);
  }

  .w-100 {
    width: calc(var(--spacing) * 100);
  }

  .w-1200 {
    width: calc(var(--spacing) * 1200);
  }

  .w-\[18px\] {
    width: 18px;
  }

  .w-\[27rem\] {
    width: 27rem;
  }

  .w-\[30px\] {
    width: 30px;
  }

  .w-\[30rem\] {
    width: 30rem;
  }

  .w-\[40\%\] {
    width: 40%;
  }

  .w-\[52px\] {
    width: 52px;
  }

  .w-\[68\%\] {
    width: 68%;
  }

  .w-\[72px\] {
    width: 72px;
  }

  .w-\[88px\] {
    width: 88px;
  }

  .w-\[100px\] {
    width: 100px;
  }

  .w-\[104px\] {
    width: 104px;
  }

  .w-\[112px\] {
    width: 112px;
  }

  .w-\[160px\] {
    width: 160px;
  }

  .w-\[168px\] {
    width: 168px;
  }

  .w-\[192px\] {
    width: 192px;
  }

  .w-\[220px\] {
    width: 220px;
  }

  .w-\[232px\] {
    width: 232px;
  }

  .w-\[233px\] {
    width: 233px;
  }

  .w-\[240px\] {
    width: 240px;
  }

  .w-\[280px\] {
    width: 280px;
  }

  .w-\[294px\] {
    width: 294px;
  }

  .w-\[300px\] {
    width: 300px;
  }

  .w-\[320px\] {
    width: 320px;
  }

  .w-\[340px\] {
    width: 340px;
  }

  .w-\[344px\] {
    width: 344px;
  }

  .w-\[360px\] {
    width: 360px;
  }

  .w-\[380px\] {
    width: 380px;
  }

  .w-\[400px\] {
    width: 400px;
  }

  .w-\[420px\] {
    width: 420px;
  }

  .w-\[520px\] {
    width: 520px;
  }

  .w-\[580px\] {
    width: 580px;
  }

  .w-\[600px\] {
    width: 600px;
  }

  .w-\[680px\] {
    width: 680px;
  }

  .w-\[800px\] {
    width: 800px;
  }

  .w-\[\\\"\] {
    width: \";
  }

  .w-\[calc\(100\%\+1\.5rem\)\] {
    width: calc(100% + 1.5rem);
  }

  .w-\[calc\(100\%\+10px\)\] {
    width: calc(100% + 10px);
  }

  .w-\[calc\(100\%\+40px\)\] {
    width: calc(100% + 40px);
  }

  .w-\[calc\(100\%-32px\)\] {
    width: calc(100% - 32px);
  }

  .w-\[calc\(100\%-60px\)\] {
    width: calc(100% - 60px);
  }

  .w-\[calc\(100\%-64px\)\] {
    width: calc(100% - 64px);
  }

  .w-\[calc\(100\%-92px\)\] {
    width: calc(100% - 92px);
  }

  .w-\[calc\(var\(--radix-popper-available-width\)_-_var\(--padding-panel\)\)\] {
    width: calc(var(--radix-popper-available-width) - var(--padding-panel));
  }

  .w-\[min\(78vw\,56rem\)\] {
    width: min(78vw, 56rem);
  }

  .w-\[min\(390px\,calc\(100vw-32px\)\)\] {
    width: min(390px, 100vw - 32px);
  }

  .w-\[min\(420px\,calc\(100vw-32px\)\)\] {
    width: min(420px, 100vw - 32px);
  }

  .w-\[var\(--radix-dropdown-menu-trigger-width\)\] {
    width: var(--radix-dropdown-menu-trigger-width);
  }

  .w-auto {
    width: auto;
  }

  .w-fit {
    width: fit-content;
  }

  .w-full {
    width: 100%;
  }

  .w-max {
    width: max-content;
  }

  .w-px {
    width: 1px;
  }

  .w-screen {
    width: 100vw;
  }

  .\!max-w-7 {
    max-width: calc(var(--spacing) * 7) !important;
  }

  .\!max-w-60 {
    max-width: calc(var(--spacing) * 60) !important;
  }

  .\!max-w-\[calc\(100vw\/var\(--codex-window-zoom\)-2rem\)\] {
    max-width: calc(100vw / var(--codex-window-zoom) - 2rem) !important;
  }

  .\!max-w-fit {
    max-width: fit-content !important;
  }

  .\!max-w-none {
    max-width: none !important;
  }

  .max-w-\(--composer-adjacent-max-width\) {
    max-width: var(--composer-adjacent-max-width);
  }

  .max-w-\(--thread-content-max-width\) {
    max-width: var(--thread-content-max-width);
  }

  .max-w-0 {
    max-width: 0;
  }

  .max-w-1 {
    max-width: var(--spacing);
  }

  .max-w-1\/2 {
    max-width: 50%;
  }

  .max-w-2xl {
    max-width: var(--container-2xl);
  }

  .max-w-3xl {
    max-width: var(--container-3xl);
  }

  .max-w-3xs {
    max-width: var(--container-3xs);
  }

  .max-w-4\/5 {
    max-width: 80%;
  }

  .max-w-7 {
    max-width: calc(var(--spacing) * 7);
  }

  .max-w-7xl {
    max-width: var(--container-7xl);
  }

  .max-w-8 {
    max-width: calc(var(--spacing) * 8);
  }

  .max-w-16 {
    max-width: calc(var(--spacing) * 16);
  }

  .max-w-20 {
    max-width: calc(var(--spacing) * 20);
  }

  .max-w-28 {
    max-width: calc(var(--spacing) * 28);
  }

  .max-w-30 {
    max-width: calc(var(--spacing) * 30);
  }

  .max-w-32 {
    max-width: calc(var(--spacing) * 32);
  }

  .max-w-36 {
    max-width: calc(var(--spacing) * 36);
  }

  .max-w-39 {
    max-width: calc(var(--spacing) * 39);
  }

  .max-w-40 {
    max-width: calc(var(--spacing) * 40);
  }

  .max-w-44 {
    max-width: calc(var(--spacing) * 44);
  }

  .max-w-48 {
    max-width: calc(var(--spacing) * 48);
  }

  .max-w-56 {
    max-width: calc(var(--spacing) * 56);
  }

  .max-w-60 {
    max-width: calc(var(--spacing) * 60);
  }

  .max-w-64 {
    max-width: calc(var(--spacing) * 64);
  }

  .max-w-72 {
    max-width: calc(var(--spacing) * 72);
  }

  .max-w-80 {
    max-width: calc(var(--spacing) * 80);
  }

  .max-w-187 {
    max-width: calc(var(--spacing) * 187);
  }

  .max-w-\[12\.5rem\] {
    max-width: 12.5rem;
  }

  .max-w-\[30\%\] {
    max-width: 30%;
  }

  .max-w-\[50\%\] {
    max-width: 50%;
  }

  .max-w-\[60\%\] {
    max-width: 60%;
  }

  .max-w-\[70\%\] {
    max-width: 70%;
  }

  .max-w-\[70vw\] {
    max-width: 70vw;
  }

  .max-w-\[77\%\] {
    max-width: 77%;
  }

  .max-w-\[80ch\] {
    max-width: 80ch;
  }

  .max-w-\[92vw\] {
    max-width: 92vw;
  }

  .max-w-\[100px\] {
    max-width: 100px;
  }

  .max-w-\[150px\] {
    max-width: 150px;
  }

  .max-w-\[180px\] {
    max-width: 180px;
  }

  .max-w-\[240px\] {
    max-width: 240px;
  }

  .max-w-\[300px\] {
    max-width: 300px;
  }

  .max-w-\[320px\] {
    max-width: 320px;
  }

  .max-w-\[400px\] {
    max-width: 400px;
  }

  .max-w-\[420px\] {
    max-width: 420px;
  }

  .max-w-\[432px\] {
    max-width: 432px;
  }

  .max-w-\[480px\] {
    max-width: 480px;
  }

  .max-w-\[770px\] {
    max-width: 770px;
  }

  .max-w-\[900px\] {
    max-width: 900px;
  }

  .max-w-\[1200px\] {
    max-width: 1200px;
  }

  .max-w-\[calc\(100\%_-_3rem\)\] {
    max-width: calc(100% - 3rem);
  }

  .max-w-\[calc\(100vw-1rem\)\] {
    max-width: calc(100vw - 1rem);
  }

  .max-w-\[calc\(100vw-2rem\)\] {
    max-width: calc(100vw - 2rem);
  }

  .max-w-\[min\(20rem\,calc\(100vw-16px\)\)\] {
    max-width: min(20rem, 100vw - 16px);
  }

  .max-w-\[min\(20rem\,var\(--radix-popover-content-available-width\)\)\] {
    max-width: min(20rem, var(--radix-popover-content-available-width));
  }

  .max-w-\[min\(48rem\,calc\(100vw-2rem\)\)\] {
    max-width: min(48rem, 100vw - 2rem);
  }

  .max-w-\[min\(100\%\,44rem\)\] {
    max-width: min(100%, 44rem);
  }

  .max-w-full {
    max-width: 100%;
  }

  .max-w-lg {
    max-width: var(--container-lg);
  }

  .max-w-md {
    max-width: var(--container-md);
  }

  .max-w-none {
    max-width: none;
  }

  .max-w-prose {
    max-width: 65ch;
  }

  .max-w-screen {
    max-width: 100vw;
  }

  .max-w-screen-2xl {
    max-width: var(--breakpoint-2xl);
  }

  .max-w-screen-lg {
    max-width: var(--breakpoint-lg);
  }

  .max-w-sm {
    max-width: var(--container-sm);
  }

  .max-w-xl {
    max-width: var(--container-xl);
  }

  .\!min-w-7 {
    min-width: calc(var(--spacing) * 7) !important;
  }

  .min-w-0 {
    min-width: 0;
  }

  .min-w-0\! {
    min-width: 0 !important;
  }

  .min-w-4 {
    min-width: calc(var(--spacing) * 4);
  }

  .min-w-5 {
    min-width: calc(var(--spacing) * 5);
  }

  .min-w-8 {
    min-width: calc(var(--spacing) * 8);
  }

  .min-w-10 {
    min-width: calc(var(--spacing) * 10);
  }

  .min-w-16 {
    min-width: calc(var(--spacing) * 16);
  }

  .min-w-20 {
    min-width: calc(var(--spacing) * 20);
  }

  .min-w-24 {
    min-width: calc(var(--spacing) * 24);
  }

  .min-w-32 {
    min-width: calc(var(--spacing) * 32);
  }

  .min-w-36 {
    min-width: calc(var(--spacing) * 36);
  }

  .min-w-40 {
    min-width: calc(var(--spacing) * 40);
  }

  .min-w-56 {
    min-width: calc(var(--spacing) * 56);
  }

  .min-w-182 {
    min-width: calc(var(--spacing) * 182);
  }

  .min-w-\[1\.35ch\] {
    min-width: 1.35ch;
  }

  .min-w-\[2px\] {
    min-width: 2px;
  }

  .min-w-\[6rem\] {
    min-width: 6rem;
  }

  .min-w-\[10rem\] {
    min-width: 10rem;
  }

  .min-w-\[24px\] {
    min-width: 24px;
  }

  .min-w-\[26px\] {
    min-width: 26px;
  }

  .min-w-\[52px\] {
    min-width: 52px;
  }

  .min-w-\[72px\] {
    min-width: 72px;
  }

  .min-w-\[86px\] {
    min-width: 86px;
  }

  .min-w-\[88px\] {
    min-width: 88px;
  }

  .min-w-\[100px\] {
    min-width: 100px;
  }

  .min-w-\[120px\] {
    min-width: 120px;
  }

  .min-w-\[160px\] {
    min-width: 160px;
  }

  .min-w-\[172px\] {
    min-width: 172px;
  }

  .min-w-\[175px\] {
    min-width: 175px;
  }

  .min-w-\[180px\] {
    min-width: 180px;
  }

  .min-w-\[200px\] {
    min-width: 200px;
  }

  .min-w-\[220px\] {
    min-width: 220px;
  }

  .min-w-\[260px\] {
    min-width: 260px;
  }

  .min-w-\[280px\] {
    min-width: 280px;
  }

  .min-w-\[300px\] {
    min-width: 300px;
  }

  .min-w-\[440px\] {
    min-width: 440px;
  }

  .min-w-\[720px\] {
    min-width: 720px;
  }

  .min-w-auto {
    min-width: auto;
  }

  .min-w-fit {
    min-width: fit-content;
  }

  .min-w-full {
    min-width: 100%;
  }

  .min-w-max {
    min-width: max-content;
  }

  .min-w-screen {
    min-width: 100vw;
  }

  .flex-1 {
    flex: 1;
  }

  .flex-\[0_0_auto\] {
    flex: none;
  }

  .flex-\[0_1_auto\] {
    flex: 0 auto;
  }

  .flex-\[1_1_0\%\] {
    flex: 1;
  }

  .flex-\[1_1_140px\] {
    flex: 140px;
  }

  .flex-\[1_1_auto\], .flex-auto {
    flex: auto;
  }

  .flex-initial {
    flex: 0 auto;
  }

  .flex-none {
    flex: none;
  }

  .flex-shrink {
    flex-shrink: 1;
  }

  .flex-shrink-0 {
    flex-shrink: 0;
  }

  .shrink {
    flex-shrink: 1;
  }

  .shrink-0 {
    flex-shrink: 0;
  }

  .flex-grow, .flex-grow-1, .grow {
    flex-grow: 1;
  }

  .grow-0 {
    flex-grow: 0;
  }

  .basis-64 {
    flex-basis: calc(var(--spacing) * 64);
  }

  .basis-\[min\(14rem\,80vw\)\] {
    flex-basis: min(14rem, 80vw);
  }

  .basis-\[min\(18rem\,85vw\)\] {
    flex-basis: min(18rem, 85vw);
  }

  .basis-auto {
    flex-basis: auto;
  }

  .basis-full {
    flex-basis: 100%;
  }

  .table-auto {
    table-layout: auto;
  }

  .table-fixed {
    table-layout: fixed;
  }

  .caption-bottom {
    caption-side: bottom;
  }

  .caption-top {
    caption-side: top;
  }

  .border-collapse {
    border-collapse: collapse;
  }

  .border-separate {
    border-collapse: separate;
  }

  .origin-\[var\(--radix-popover-content-transform-origin\)\] {
    transform-origin: var(--radix-popover-content-transform-origin);
  }

  .origin-bottom {
    transform-origin: bottom;
  }

  .origin-bottom-left {
    transform-origin: 0 100%;
  }

  .origin-center {
    transform-origin: center;
  }

  .origin-left {
    transform-origin: 0;
  }

  .origin-right {
    transform-origin: 100%;
  }

  .origin-top {
    transform-origin: top;
  }

  .origin-top-right {
    transform-origin: 100% 0;
  }

  .-translate-full {
    --tw-translate-x: -100%;
    --tw-translate-y: -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-full {
    --tw-translate-x: 100%;
    --tw-translate-y: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .\!translate-x-0 {
    --tw-translate-x: 0px !important;
    translate: var(--tw-translate-x) var(--tw-translate-y) !important;
  }

  .-translate-x-0 {
    --tw-translate-x: 0px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-x-0\.5 {
    --tw-translate-x: calc(var(--spacing) * -.5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-x-1 {
    --tw-translate-x: calc(var(--spacing) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-x-2 {
    --tw-translate-x: calc(var(--spacing) * -2);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-x-px {
    --tw-translate-x: -1px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-0 {
    --tw-translate-x: 0px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-0\.5 {
    --tw-translate-x: calc(var(--spacing) * .5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-1 {
    --tw-translate-x: var(--spacing);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-1\/2 {
    --tw-translate-x: calc(1 / 2 * 100%);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-1\/4 {
    --tw-translate-x: calc(1 / 4 * 100%);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-2 {
    --tw-translate-x: calc(var(--spacing) * 2);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-24 {
    --tw-translate-x: calc(var(--spacing) * 24);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-\[2px\] {
    --tw-translate-x: 2px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-\[var\(--aura-tab-sticky-action-x\)\] {
    --tw-translate-x: var(--aura-tab-sticky-action-x);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-px {
    --tw-translate-x: 1px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .\!translate-y-0 {
    --tw-translate-y: 0px !important;
    translate: var(--tw-translate-x) var(--tw-translate-y) !important;
  }

  .-translate-y-0 {
    --tw-translate-y: 0px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-0\.5 {
    --tw-translate-y: calc(var(--spacing) * -.5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-1 {
    --tw-translate-y: calc(var(--spacing) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-2 {
    --tw-translate-y: calc(var(--spacing) * -2);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-\[6px\] {
    --tw-translate-y: calc(6px * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-full {
    --tw-translate-y: -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-px {
    --tw-translate-y: -1px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-0 {
    --tw-translate-y: 0px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-0\.5 {
    --tw-translate-y: calc(var(--spacing) * .5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-1 {
    --tw-translate-y: var(--spacing);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-1\/4 {
    --tw-translate-y: calc(1 / 4 * 100%);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-2 {
    --tw-translate-y: calc(var(--spacing) * 2);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-\[-2px\] {
    --tw-translate-y: -2px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-\[var\(--aura-tab-sticky-action-y\)\] {
    --tw-translate-y: var(--aura-tab-sticky-action-y);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-3d {
    translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);
  }

  .translate-none {
    translate: none;
  }

  .scale-50 {
    --tw-scale-x: 50%;
    --tw-scale-y: 50%;
    --tw-scale-z: 50%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .scale-90 {
    --tw-scale-x: 90%;
    --tw-scale-y: 90%;
    --tw-scale-z: 90%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .scale-95 {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .scale-100 {
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
    --tw-scale-z: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .-scale-x-100 {
    --tw-scale-x: calc(100% * -1);
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .scale-3d {
    scale: var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z);
  }

  .scale-\[0\.8\] {
    scale: .8;
  }

  .scale-\[0\.82\] {
    scale: .82;
  }

  .scale-\[0\.625\] {
    scale: .625;
  }

  .scale-\[1\.08\] {
    scale: 1.08;
  }

  .scale-\[1\.15\] {
    scale: 1.15;
  }

  .scale-none {
    scale: none;
  }

  .-rotate-12 {
    rotate: -12deg;
  }

  .-rotate-90 {
    rotate: -90deg;
  }

  .rotate-0 {
    rotate: 0deg;
  }

  .rotate-90 {
    rotate: 90deg;
  }

  .rotate-180 {
    rotate: 180deg;
  }

  .rotate-none {
    rotate: none;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .transform\! {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ) !important;
  }

  .transform-cpu {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .transform-gpu {
    transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .transform-none {
    transform: none;
  }

  .transform-none\! {
    transform: none !important;
  }

  .\[zoom\:var\(--codex-window-zoom\)\] {
    zoom: var(--codex-window-zoom);
  }

  .\!animate-none {
    animation: none !important;
  }

  .animate-caret-blink {
    animation: 1.2s ease-out infinite caret-blink;
  }

  .animate-in {
    animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
  }

  .animate-out {
    animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
  }

  .animate-pulse {
    animation: var(--animate-pulse);
  }

  .animate-spin {
    animation: var(--animate-spin);
  }

  .cursor-auto {
    cursor: auto;
  }

  .cursor-col-resize {
    cursor: col-resize;
  }

  .cursor-copy {
    cursor: copy;
  }

  .cursor-default {
    cursor: default;
  }

  .cursor-ew-resize {
    cursor: ew-resize;
  }

  .cursor-grab {
    cursor: grab;
  }

  .cursor-grabbing {
    cursor: grabbing;
  }

  .cursor-nesw-resize {
    cursor: nesw-resize;
  }

  .cursor-none {
    cursor: none;
  }

  .cursor-not-allowed {
    cursor: not-allowed;
  }

  .cursor-ns-resize {
    cursor: ns-resize;
  }

  .cursor-nwse-resize {
    cursor: nwse-resize;
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .cursor-row-resize {
    cursor: row-resize;
  }

  .cursor-text {
    cursor: text;
  }

  .cursor-zoom-in {
    cursor: zoom-in;
  }

  .touch-pinch-zoom {
    --tw-pinch-zoom: pinch-zoom;
    touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, );
  }

  .touch-none {
    touch-action: none;
  }

  .resize {
    resize: both;
  }

  .resize-none {
    resize: none;
  }

  .resize-x {
    resize: horizontal;
  }

  .resize-y {
    resize: vertical;
  }

  .snap-none {
    scroll-snap-type: none;
  }

  .snap-x {
    scroll-snap-type: x var(--tw-scroll-snap-strictness);
  }

  .snap-mandatory {
    --tw-scroll-snap-strictness: mandatory;
  }

  .snap-proximity {
    --tw-scroll-snap-strictness: proximity;
  }

  .snap-align-none {
    scroll-snap-align: none;
  }

  .snap-center {
    scroll-snap-align: center;
  }

  .snap-end {
    scroll-snap-align: end;
  }

  .snap-start {
    scroll-snap-align: start;
  }

  .snap-always {
    scroll-snap-stop: always;
  }

  .snap-normal {
    scroll-snap-stop: normal;
  }

  .scroll-mt-4 {
    scroll-margin-top: calc(var(--spacing) * 4);
  }

  .scroll-mt-20 {
    scroll-margin-top: calc(var(--spacing) * 20);
  }

  .scroll-px-1 {
    scroll-padding-inline: var(--spacing);
  }

  .scroll-px-3 {
    scroll-padding-inline: calc(var(--spacing) * 3);
  }

  .scroll-ps-3 {
    scroll-padding-inline-start: calc(var(--spacing) * 3);
  }

  .scroll-pe-4 {
    scroll-padding-inline-end: calc(var(--spacing) * 4);
  }

  .scroll-pt-14 {
    scroll-padding-top: calc(var(--spacing) * 14);
  }

  .scroll-pr-4 {
    scroll-padding-right: calc(var(--spacing) * 4);
  }

  .\[scroll-padding-bottom\:var\(--thread-scroll-padding-bottom\,0px\)\] {
    scroll-padding-bottom: var(--thread-scroll-padding-bottom, 0px);
  }

  .scroll-pl-3 {
    scroll-padding-left: calc(var(--spacing) * 3);
  }

  .scrollbar-none {
    scrollbar-width: none;
    scrollbar-color: auto;
    scrollbar-gutter: auto;
    -ms-overflow-style: none;
  }

  .scrollbar {
    scrollbar-width: var(--scrollbar-width);
    scrollbar-color: var(--scrollbar-color);
    scrollbar-gutter: var(--scrollbar-gutter);
  }

  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    scrollbar-gutter: auto;
  }

  .\[scrollbar-width\:none\] {
    scrollbar-width: none;
  }

  .scrollbar-auto {
    scrollbar-width: auto;
  }

  .scrollbar-none {
    scrollbar-width: none;
  }

  .scrollbar-thin {
    scrollbar-width: thin;
  }

  .\[scrollbar-gutter\:stable_both-edges\] {
    scrollbar-gutter: stable both-edges;
  }

  .scrollbar-gutter-auto {
    scrollbar-gutter: auto;
  }

  .scrollbar-gutter-both {
    scrollbar-gutter: stable both-edges;
  }

  .scrollbar-gutter-stable {
    scrollbar-gutter: stable;
  }

  .list-inside {
    list-style-position: inside;
  }

  .list-outside {
    list-style-position: outside;
  }

  .list-decimal {
    list-style-type: decimal;
  }

  .list-disc {
    list-style-type: disc;
  }

  .list-none {
    list-style-type: none;
  }

  .appearance-auto {
    appearance: auto;
  }

  .appearance-none {
    appearance: none;
  }

  .columns-2 {
    columns: 2;
  }

  .columns-3 {
    columns: 3;
  }

  .columns-4 {
    columns: 4;
  }

  .columns-5 {
    columns: 5;
  }

  .auto-cols-\[min\(14rem\,80vw\)\] {
    grid-auto-columns: min(14rem, 80vw);
  }

  .auto-cols-\[min\(18rem\,85vw\)\] {
    grid-auto-columns: min(18rem, 85vw);
  }

  .grid-flow-col {
    grid-auto-flow: column;
  }

  .grid-flow-col-dense {
    grid-auto-flow: column dense;
  }

  .grid-flow-dense {
    grid-auto-flow: dense;
  }

  .grid-flow-row {
    grid-auto-flow: row;
  }

  .grid-flow-row-dense {
    grid-auto-flow: row dense;
  }

  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .grid-cols-\[1fr_auto_1fr\] {
    grid-template-columns: 1fr auto 1fr;
  }

  .grid-cols-\[2\.5rem_minmax\(0\,1fr\)_4\.25rem\] {
    grid-template-columns: 2.5rem minmax(0, 1fr) 4.25rem;
  }

  .grid-cols-\[2rem_minmax\(0\,1fr\)_2rem\] {
    grid-template-columns: 2rem minmax(0, 1fr) 2rem;
  }

  .grid-cols-\[72px_minmax\(0\,1fr\)_minmax\(0\,1\.3fr\)_auto\] {
    grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.3fr) auto;
  }

  .grid-cols-\[auto_1fr\] {
    grid-template-columns: auto 1fr;
  }

  .grid-cols-\[auto_auto\] {
    grid-template-columns: auto auto;
  }

  .grid-cols-\[auto_minmax\(0\,1fr\)\] {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .grid-cols-\[auto_minmax\(0\,1fr\)_auto\] {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .grid-cols-\[max-content_minmax\(0\,1fr\)\] {
    grid-template-columns: max-content minmax(0, 1fr);
  }

  .grid-cols-\[minmax\(0\,1fr\)_auto\] {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .grid-cols-\[minmax\(0\,1fr\)_auto_auto\] {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .grid-cols-\[minmax\(0\,1fr\)_auto_minmax\(0\,1fr\)\] {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .grid-cols-\[minmax\(0\,1fr\)_auto_minmax\(max-content\,1fr\)\] {
    grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr);
  }

  .grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1fr\)_auto\] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  }

  .grid-cols-\[minmax\(0\,1fr\)_minmax\(64px\,159px\)_64px\] {
    grid-template-columns: minmax(0, 1fr) minmax(64px, 159px) 64px;
  }

  .grid-cols-\[minmax\(0\,8rem\)_minmax\(0\,1fr\)\] {
    grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
  }

  .grid-cols-\[minmax\(0\,auto\)_auto_minmax\(0\,1fr\)\] {
    grid-template-columns: minmax(0, auto) auto minmax(0, 1fr);
  }

  .grid-cols-\[minmax\(108px\,auto\)_minmax\(0\,1fr\)\] {
    grid-template-columns: minmax(108px, auto) minmax(0, 1fr);
  }

  .grid-cols-\[repeat\(auto-fit\,minmax\(36px\,1fr\)\)\] {
    grid-template-columns: repeat(auto-fit, minmax(36px, 1fr));
  }

  .grid-rows-\[auto_1fr\] {
    grid-template-rows: auto 1fr;
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-col-reverse {
    flex-direction: column-reverse;
  }

  .flex-row {
    flex-direction: row;
  }

  .flex-row-reverse {
    flex-direction: row-reverse;
  }

  .flex-nowrap {
    flex-wrap: nowrap;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .flex-wrap-reverse {
    flex-wrap: wrap-reverse;
  }

  .place-content-around {
    place-content: space-around;
  }

  .place-content-baseline {
    place-content: baseline start;
  }

  .place-content-between {
    place-content: space-between;
  }

  .place-content-center {
    place-content: center;
  }

  .place-content-center-safe {
    place-content: safe center;
  }

  .place-content-end {
    place-content: end;
  }

  .place-content-end-safe {
    place-content: safe end;
  }

  .place-content-evenly {
    place-content: space-evenly;
  }

  .place-content-start {
    place-content: start;
  }

  .place-content-stretch {
    place-content: stretch;
  }

  .place-items-baseline {
    place-items: baseline;
  }

  .place-items-center {
    place-items: center;
  }

  .place-items-center-safe {
    place-items: safe center;
  }

  .place-items-end {
    place-items: end;
  }

  .place-items-end-safe {
    place-items: safe end;
  }

  .place-items-start {
    place-items: start;
  }

  .place-items-stretch {
    place-items: stretch stretch;
  }

  .content-around {
    align-content: space-around;
  }

  .content-baseline {
    align-content: baseline;
  }

  .content-between {
    align-content: space-between;
  }

  .content-center {
    align-content: center;
  }

  .content-center-safe {
    align-content: safe center;
  }

  .content-end {
    align-content: flex-end;
  }

  .content-end-safe {
    align-content: safe flex-end;
  }

  .content-evenly {
    align-content: space-evenly;
  }

  .content-normal {
    align-content: normal;
  }

  .content-start {
    align-content: flex-start;
  }

  .content-stretch {
    align-content: stretch;
  }

  .\!items-center {
    align-items: center !important;
  }

  .\[align-items\:normal\] {
    align-items: normal;
  }

  .items-baseline {
    align-items: baseline;
  }

  .items-baseline-last {
    align-items: last baseline;
  }

  .items-center {
    align-items: center;
  }

  .items-center-safe {
    align-items: safe center;
  }

  .items-end {
    align-items: flex-end;
  }

  .items-end-safe {
    align-items: safe flex-end;
  }

  .items-start {
    align-items: flex-start;
  }

  .items-stretch {
    align-items: stretch;
  }

  .justify-around {
    justify-content: space-around;
  }

  .justify-baseline {
    justify-content: baseline;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-center-safe {
    justify-content: safe center;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .justify-end-safe {
    justify-content: safe flex-end;
  }

  .justify-evenly {
    justify-content: space-evenly;
  }

  .justify-normal {
    justify-content: normal;
  }

  .justify-start {
    justify-content: flex-start;
  }

  .justify-stretch {
    justify-content: stretch;
  }

  .justify-items-center {
    justify-items: center;
  }

  .justify-items-center-safe {
    justify-items: safe center;
  }

  .justify-items-end {
    justify-items: end;
  }

  .justify-items-end-safe {
    justify-items: safe end;
  }

  .justify-items-normal {
    justify-items: normal;
  }

  .justify-items-start {
    justify-items: start;
  }

  .justify-items-stretch {
    justify-items: stretch;
  }

  .\!gap-0 {
    gap: 0 !important;
  }

  .\!gap-0\.5 {
    gap: calc(var(--spacing) * .5) !important;
  }

  .\!gap-2 {
    gap: calc(var(--spacing) * 2) !important;
  }

  .gap-0 {
    gap: 0;
  }

  .gap-0\! {
    gap: 0 !important;
  }

  .gap-0\.5 {
    gap: calc(var(--spacing) * .5);
  }

  .gap-1 {
    gap: var(--spacing);
  }

  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }

  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }

  .gap-7 {
    gap: calc(var(--spacing) * 7);
  }

  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }

  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }

  .gap-12 {
    gap: calc(var(--spacing) * 12);
  }

  .gap-\[5px\] {
    gap: 5px;
  }

  .gap-\[calc\(var\(--oai-wb-spacing\)\*2\)\] {
    gap: calc(var(--oai-wb-spacing) * 2);
  }

  .gap-\[var\(--conversation-grouped-item-gap\,4px\)\] {
    gap: var(--conversation-grouped-item-gap, 4px);
  }

  .gap-\[var\(--conversation-item-gap\,16px\)\] {
    gap: var(--conversation-item-gap, 16px);
  }

  .gap-\[var\(--conversation-patch-file-gap\,var\(--conversation-item-gap\,16px\)\)\] {
    gap: var(--conversation-patch-file-gap, var(--conversation-item-gap, 16px));
  }

  .gap-\[var\(--oai-wb-spacing\)\] {
    gap: var(--oai-wb-spacing);
  }

  .gap-\[var\(--padding-panel\)\] {
    gap: var(--padding-panel);
  }

  .gap-px {
    gap: 1px;
  }

  :where(.space-y-0 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block: 0;
  }

  :where(.space-y-1 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
    margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-2 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-3 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-4 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-6 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-8 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-reverse > :not(:last-child)) {
    --tw-space-y-reverse: 1;
  }

  .gap-x-1 {
    column-gap: var(--spacing);
  }

  .gap-x-1\.5 {
    column-gap: calc(var(--spacing) * 1.5);
  }

  .gap-x-2 {
    column-gap: calc(var(--spacing) * 2);
  }

  .gap-x-3 {
    column-gap: calc(var(--spacing) * 3);
  }

  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }

  .gap-x-6 {
    column-gap: calc(var(--spacing) * 6);
  }

  .gap-x-16 {
    column-gap: calc(var(--spacing) * 16);
  }

  .gap-x-\[5px\] {
    column-gap: 5px;
  }

  :where(.space-x-3 > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
  }

  :where(.space-x-8 > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * 8) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-x-reverse)));
  }

  :where(.space-x-reverse > :not(:last-child)) {
    --tw-space-x-reverse: 1;
  }

  .gap-y-0 {
    row-gap: 0;
  }

  .gap-y-0\.5 {
    row-gap: calc(var(--spacing) * .5);
  }

  .gap-y-1 {
    row-gap: var(--spacing);
  }

  .gap-y-1\.5 {
    row-gap: calc(var(--spacing) * 1.5);
  }

  .gap-y-10 {
    row-gap: calc(var(--spacing) * 10);
  }

  :where(.divide-x > :not(:last-child)) {
    --tw-divide-x-reverse: 0;
    border-inline-style: var(--tw-border-style);
    border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
    border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
  }

  :where(.divide-y > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }

  :where(.divide-y-reverse > :not(:last-child)) {
    --tw-divide-y-reverse: 1;
  }

  :where(.divide-solid > :not(:last-child)) {
    --tw-border-style: solid;
    border-style: solid;
  }

  .place-self-auto {
    place-self: auto;
  }

  .place-self-center {
    place-self: center;
  }

  .place-self-center-safe {
    place-self: safe center;
  }

  .place-self-end {
    place-self: end;
  }

  .place-self-end-safe {
    place-self: safe end;
  }

  .place-self-start {
    place-self: start;
  }

  .place-self-stretch {
    place-self: stretch stretch;
  }

  .\!self-center {
    align-self: center !important;
  }

  .self-auto {
    align-self: auto;
  }

  .self-baseline {
    align-self: baseline;
  }

  .self-baseline-last {
    align-self: last baseline;
  }

  .self-center {
    align-self: center;
  }

  .self-center-safe {
    align-self: safe center;
  }

  .self-end {
    align-self: flex-end;
  }

  .self-end-safe {
    align-self: safe flex-end;
  }

  .self-start {
    align-self: flex-start;
  }

  .self-stretch {
    align-self: stretch;
  }

  .justify-self-auto {
    justify-self: auto;
  }

  .justify-self-center {
    justify-self: center;
  }

  .justify-self-center-safe {
    justify-self: safe center;
  }

  .justify-self-end {
    justify-self: flex-end;
  }

  .justify-self-end-safe {
    justify-self: safe flex-end;
  }

  .justify-self-start {
    justify-self: flex-start;
  }

  .justify-self-stretch {
    justify-self: stretch;
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .\!overflow-hidden {
    overflow: hidden !important;
  }

  .overflow-auto {
    overflow: auto;
  }

  .overflow-clip {
    overflow: clip;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-hidden\! {
    overflow: hidden !important;
  }

  .overflow-scroll {
    overflow: scroll;
  }

  .overflow-visible {
    overflow: visible;
  }

  .overflow-x-auto {
    overflow-x: auto;
  }

  .overflow-x-hidden {
    overflow-x: hidden;
  }

  .overflow-x-visible {
    overflow-x: visible;
  }

  .overflow-y-auto {
    overflow-y: auto;
  }

  .overflow-y-clip {
    overflow-y: clip;
  }

  .overflow-y-hidden {
    overflow-y: hidden;
  }

  .overflow-y-visible\! {
    overflow-y: visible !important;
  }

  .overscroll-contain {
    overscroll-behavior: contain;
  }

  .overscroll-x-contain {
    overscroll-behavior-x: contain;
  }

  .scroll-auto {
    scroll-behavior: auto;
  }

  .scroll-smooth {
    scroll-behavior: smooth;
  }

  .\!rounded-2xl {
    border-radius: calc(var(--radius) * 2) !important;
  }

  .\!rounded-\[6px\] {
    border-radius: 6px !important;
  }

  .\!rounded-\[10px\] {
    border-radius: 10px !important;
  }

  .\!rounded-\[14px\] {
    border-radius: 14px !important;
  }

  .\!rounded-\[16px\] {
    border-radius: 16px !important;
  }

  .\!rounded-\[24px\] {
    border-radius: 24px !important;
  }

  .\!rounded-full {
    border-radius: 3.40282e38px !important;
  }

  .\!rounded-md {
    border-radius: calc(var(--radius) * .75) !important;
  }

  .\!rounded-none {
    border-radius: 0 !important;
  }

  .\!rounded-xl {
    border-radius: calc(var(--radius) * 1.5) !important;
  }

  .rounded {
    border-radius: .25rem;
  }

  .rounded-2xl {
    border-radius: calc(var(--radius) * 2);
  }

  .rounded-3xl {
    border-radius: calc(var(--radius) * 3);
  }

  .rounded-\[3px\] {
    border-radius: 3px;
  }

  .rounded-\[4px\] {
    border-radius: 4px;
  }

  .rounded-\[10px\] {
    border-radius: 10px;
  }

  .rounded-\[12px\] {
    border-radius: 12px;
  }

  .rounded-\[16px\] {
    border-radius: 16px;
  }

  .rounded-\[20px\] {
    border-radius: 20px;
  }

  .rounded-\[22\%\] {
    border-radius: 22%;
  }

  .rounded-\[22px\] {
    border-radius: 22px;
  }

  .rounded-\[24px\] {
    border-radius: 24px;
  }

  .rounded-\[28px\] {
    border-radius: 28px;
  }

  .rounded-\[43px\] {
    border-radius: 43px;
  }

  .rounded-\[calc\(var\(--oai-wb-spacing\)\*2\.5\)\] {
    border-radius: calc(var(--oai-wb-spacing) * 2.5);
  }

  .rounded-\[calc\(var\(--oai-wb-spacing\)\*4\)\] {
    border-radius: calc(var(--oai-wb-spacing) * 4);
  }

  .rounded-\[inherit\] {
    border-radius: inherit;
  }

  .rounded-\[var\(--oai-wb-radius\)\] {
    border-radius: var(--oai-wb-radius);
  }

  .rounded-\[var\(--radius-token-composer-single-line\)\] {
    border-radius: var(--radius-token-composer-single-line);
  }

  .rounded-\[var\(--radius-token-row\)\] {
    border-radius: var(--radius-token-row);
  }

  .rounded-field {
    border-radius: var(--field-radius, calc(var(--radius) * 1.5));
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-full\! {
    border-radius: 3.40282e38px !important;
  }

  .rounded-lg {
    border-radius: calc(var(--radius) * 1);
  }

  .rounded-md {
    border-radius: calc(var(--radius) * .75);
  }

  .rounded-none {
    border-radius: 0;
  }

  .rounded-none\! {
    border-radius: 0 !important;
  }

  .rounded-sm {
    border-radius: calc(var(--radius) * .5);
  }

  .rounded-xl {
    border-radius: calc(var(--radius) * 1.5);
  }

  .rounded-xs {
    border-radius: calc(var(--radius) * .25);
  }

  .\!rounded-s-md {
    border-start-start-radius: calc(var(--radius) * .75) !important;
    border-end-start-radius: calc(var(--radius) * .75) !important;
  }

  .rounded-s {
    border-start-start-radius: .25rem;
    border-end-start-radius: .25rem;
  }

  .rounded-s-none {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
  }

  .rounded-ss {
    border-start-start-radius: .25rem;
  }

  .\!rounded-e-md {
    border-start-end-radius: calc(var(--radius) * .75) !important;
    border-end-end-radius: calc(var(--radius) * .75) !important;
  }

  .rounded-e {
    border-start-end-radius: .25rem;
    border-end-end-radius: .25rem;
  }

  .rounded-e-none {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }

  .rounded-se {
    border-start-end-radius: .25rem;
  }

  .rounded-ee {
    border-end-end-radius: .25rem;
  }

  .rounded-es {
    border-end-start-radius: .25rem;
  }

  .rounded-t {
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
  }

  .rounded-t-2xl {
    border-top-left-radius: calc(var(--radius) * 2);
    border-top-right-radius: calc(var(--radius) * 2);
  }

  .rounded-t-lg {
    border-top-left-radius: calc(var(--radius) * 1);
    border-top-right-radius: calc(var(--radius) * 1);
  }

  .rounded-t-xl {
    border-top-left-radius: calc(var(--radius) * 1.5);
    border-top-right-radius: calc(var(--radius) * 1.5);
  }

  .\!rounded-l-md {
    border-top-left-radius: calc(var(--radius) * .75) !important;
    border-bottom-left-radius: calc(var(--radius) * .75) !important;
  }

  .rounded-l {
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
  }

  .rounded-l-\[10px\] {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }

  .rounded-l-none {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .rounded-l-sm {
    border-top-left-radius: calc(var(--radius) * .5);
    border-bottom-left-radius: calc(var(--radius) * .5);
  }

  .rounded-tl {
    border-top-left-radius: .25rem;
  }

  .\!rounded-r-md {
    border-top-right-radius: calc(var(--radius) * .75) !important;
    border-bottom-right-radius: calc(var(--radius) * .75) !important;
  }

  .rounded-r {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
  }

  .rounded-r-\[10px\] {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }

  .rounded-r-none {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .rounded-r-sm {
    border-top-right-radius: calc(var(--radius) * .5);
    border-bottom-right-radius: calc(var(--radius) * .5);
  }

  .rounded-tr {
    border-top-right-radius: .25rem;
  }

  .rounded-b {
    border-bottom-right-radius: .25rem;
    border-bottom-left-radius: .25rem;
  }

  .rounded-b-2xl {
    border-bottom-right-radius: calc(var(--radius) * 2);
    border-bottom-left-radius: calc(var(--radius) * 2);
  }

  .rounded-br {
    border-bottom-right-radius: .25rem;
  }

  .rounded-bl {
    border-bottom-left-radius: .25rem;
  }

  .\!border-0 {
    border-style: var(--tw-border-style) !important;
    border-width: 0 !important;
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border\! {
    border-style: var(--tw-border-style) !important;
    border-width: 1px !important;
  }

  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .border-0\! {
    border-style: var(--tw-border-style) !important;
    border-width: 0 !important;
  }

  .border-1 {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }

  .border-\[0\.5px\] {
    border-style: var(--tw-border-style);
    border-width: .5px;
  }

  .border-\[1px\] {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-x {
    border-inline-style: var(--tw-border-style);
    border-inline-width: 1px;
  }

  .border-y {
    border-block-style: var(--tw-border-style);
    border-block-width: 1px;
  }

  .border-s {
    border-inline-start-style: var(--tw-border-style);
    border-inline-start-width: 1px;
  }

  .border-s-0 {
    border-inline-start-style: var(--tw-border-style);
    border-inline-start-width: 0;
  }

  .border-e {
    border-inline-end-style: var(--tw-border-style);
    border-inline-end-width: 1px;
  }

  .border-e-0 {
    border-inline-end-style: var(--tw-border-style);
    border-inline-end-width: 0;
  }

  .border-bs {
    border-block-start-style: var(--tw-border-style);
    border-block-start-width: 1px;
  }

  .border-be {
    border-block-end-style: var(--tw-border-style);
    border-block-end-width: 1px;
  }

  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .border-t\! {
    border-top-style: var(--tw-border-style) !important;
    border-top-width: 1px !important;
  }

  .border-t-\[0\.5px\] {
    border-top-style: var(--tw-border-style);
    border-top-width: .5px;
  }

  .\[border-top-width\:0\.5px\]\! {
    border-top-width: .5px !important;
  }

  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }

  .border-r-0 {
    border-right-style: var(--tw-border-style);
    border-right-width: 0;
  }

  .\!border-b-0 {
    border-bottom-style: var(--tw-border-style) !important;
    border-bottom-width: 0 !important;
  }

  .border-b, .border-b-1 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }

  .border-l-0 {
    border-left-style: var(--tw-border-style);
    border-left-width: 0;
  }

  .\!border-none {
    --tw-border-style: none !important;
    border-style: none !important;
  }

  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }

  .border-dotted {
    --tw-border-style: dotted;
    border-style: dotted;
  }

  .border-double {
    --tw-border-style: double;
    border-style: double;
  }

  .border-hidden {
    --tw-border-style: hidden;
    border-style: hidden;
  }

  .border-none {
    --tw-border-style: none;
    border-style: none;
  }

  .border-solid {
    --tw-border-style: solid;
    border-style: solid;
  }

  .\!border-\[var\(--referral-rate-limit-border\)\] {
    border-color: var(--referral-rate-limit-border) !important;
  }

  .\!border-transparent {
    border-color: #0000 !important;
  }

  .\[border-color\:var\(--oai-wb-divider\)\] {
    border-color: var(--oai-wb-divider);
  }

  .\[border-color\:var\(--oai-wb-divider\)\]\! {
    border-color: var(--oai-wb-divider) !important;
  }

  .border-\[color-mix\(in_srgb\,var\(--pricing-plan-highlight\)_30\%\,transparent\)\] {
    border-color: var(--pricing-plan-highlight);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-\[color-mix\(in_srgb\,var\(--pricing-plan-highlight\)_30\%\,transparent\)\] {
      border-color: color-mix(in srgb,var(--pricing-plan-highlight) 30%,transparent);
    }
  }

  .border-\[color\:var\(--gray-0\)\] {
    border-color: var(--gray-0);
  }

  .border-black {
    border-color: var(--color-black);
  }

  .border-black\/10 {
    border-color: #0000001a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-black\/10 {
      border-color: color-mix(in oklab, var(--color-black) 10%, transparent);
    }
  }

  .border-blue-500 {
    border-color: var(--color-blue-500);
  }

  .border-border {
    border-color: var(--border);
  }

  .border-gray-200 {
    border-color: var(--color-gray-200);
  }

  .border-gray-300 {
    border-color: var(--color-gray-300);
  }

  .border-transparent {
    border-color: #0000;
  }

  .border-white {
    border-color: var(--color-white);
  }

  .\!bg-\[color-mix\(in_srgb\,var\(--color-token-main-surface-primary\)_86\%\,var\(--color-token-text-link-foreground\)_14\%\)\] {
    background-color: var(--color-token-main-surface-primary) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\!bg-\[color-mix\(in_srgb\,var\(--color-token-main-surface-primary\)_86\%\,var\(--color-token-text-link-foreground\)_14\%\)\] {
      background-color: color-mix(in srgb,var(--color-token-main-surface-primary) 86%,var(--color-token-text-link-foreground) 14%) !important;
    }
  }

  .\!bg-\[var\(--referral-rate-limit-tracking-background\)\] {
    background-color: var(--referral-rate-limit-tracking-background) !important;
  }

  .\!bg-black {
    background-color: var(--color-black) !important;
  }

  .\!bg-black\/45 {
    background-color: #00000073 !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\!bg-black\/45 {
      background-color: color-mix(in oklab, var(--color-black) 45%, transparent) !important;
    }
  }

  .\!bg-black\/90 {
    background-color: #000000e6 !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\!bg-black\/90 {
      background-color: color-mix(in oklab, var(--color-black) 90%, transparent) !important;
    }
  }

  .\!bg-current\/10 {
    background-color: currentColor !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\!bg-current\/10 {
      background-color: color-mix(in oklab, currentcolor 10%, transparent) !important;
    }
  }

  .\!bg-transparent {
    background-color: #0000 !important;
  }

  .\!bg-white {
    background-color: var(--color-white) !important;
  }

  .\[background-color\:var\(--oai-wb-accent\)\] {
    background-color: var(--oai-wb-accent);
  }

  .\[background-color\:var\(--oai-wb-border\)\] {
    background-color: var(--oai-wb-border);
  }

  .\[background-color\:var\(--oai-wb-surface-primary\)\] {
    background-color: var(--oai-wb-surface-primary);
  }

  .bg-\(--my_variable\) {
    background-color: var(--my_variable);
  }

  .bg-\(color\:--my-color\) {
    background-color: var(--my-color);
  }

  .bg-\[\#04b84c\] {
    background-color: #04b84c;
  }

  .bg-\[\#0053d6\] {
    background-color: #0053d6;
  }

  .bg-\[\#65cbf3\] {
    background-color: #65cbf3;
  }

  .bg-\[\#0088cc\] {
    background-color: #08c;
  }

  .bg-\[\#0285ff\] {
    background-color: #0285ff;
  }

  .bg-\[\#924ff7\] {
    background-color: #924ff7;
  }

  .bg-\[\#B91C1C\] {
    background-color: #b91c1c;
  }

  .bg-\[\#f7f8fb\] {
    background-color: #f7f8fb;
  }

  .bg-\[\#fa423e\] {
    background-color: #fa423e;
  }

  .bg-\[\#fb6a22\] {
    background-color: #fb6a22;
  }

  .bg-\[\#ff7d45\] {
    background-color: #ff7d45;
  }

  .bg-\[\#ff66ad\] {
    background-color: #ff66ad;
  }

  .bg-\[\#ffc300\] {
    background-color: #ffc300;
  }

  .bg-\[\#ffdb13\] {
    background-color: #ffdb13;
  }

  .bg-\[Canvas\] {
    background-color: canvas;
  }

  .bg-\[color-mix\(in_srgb\,var\(--color-token-main-surface-primary\)_82\%\,var\(--color-token-charts-blue\)_18\%\)\] {
    background-color: var(--color-token-main-surface-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color-mix\(in_srgb\,var\(--color-token-main-surface-primary\)_82\%\,var\(--color-token-charts-blue\)_18\%\)\] {
      background-color: color-mix(in srgb,var(--color-token-main-surface-primary) 82%,var(--color-token-charts-blue) 18%);
    }
  }

  .bg-\[color-mix\(in_srgb\,var\(--color-token-main-surface-primary\)_88\%\,transparent\)\] {
    background-color: var(--color-token-main-surface-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color-mix\(in_srgb\,var\(--color-token-main-surface-primary\)_88\%\,transparent\)\] {
      background-color: color-mix(in srgb,var(--color-token-main-surface-primary) 88%,transparent);
    }
  }

  .bg-\[color-mix\(in_srgb\,var\(--pricing-plan-highlight\)_6\%\,transparent\)\] {
    background-color: var(--pricing-plan-highlight);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color-mix\(in_srgb\,var\(--pricing-plan-highlight\)_6\%\,transparent\)\] {
      background-color: color-mix(in srgb,var(--pricing-plan-highlight) 6%,transparent);
    }
  }

  .bg-\[color\:var\(--gray-0\)\] {
    background-color: var(--gray-0);
  }

  .bg-\[color\:var\(--my-color\)\] {
    background-color: var(--my-color);
  }

  .bg-\[rgb\\\"\] {
    background-color: rgb\";
  }

  .bg-\[var\(--annotation-mode-button-annotation-background\)\] {
    background-color: var(--annotation-mode-button-annotation-background);
  }

  .bg-\[var\(--app-shell-tab-background\)\] {
    background-color: var(--app-shell-tab-background);
  }

  .bg-\[var\(--color-token-menubar-selection-background\)\] {
    background-color: var(--color-token-menubar-selection-background);
  }

  .bg-\[var\(--gray-300\)\] {
    background-color: var(--gray-300);
  }

  .bg-\[var\(--gray-600\)\] {
    background-color: var(--gray-600);
  }

  .bg-\[var\(--green-50\)\] {
    background-color: var(--green-50);
  }

  .bg-\[var\(--my_variable\)\] {
    background-color: var(--my_variable);
  }

  .bg-\[var\(--referral-rate-limit-check-background\)\] {
    background-color: var(--referral-rate-limit-check-background);
  }

  .bg-\[var\(--referral-rate-limit-input-background\)\] {
    background-color: var(--referral-rate-limit-input-background);
  }

  .bg-\[var\(--referral-rate-limit-muted-surface\)\] {
    background-color: var(--referral-rate-limit-muted-surface);
  }

  .bg-\[var\(--referral-rate-limit-success-background\)\] {
    background-color: var(--referral-rate-limit-success-background);
  }

  .bg-\[var\(--referral-rate-limit-surface\)\] {
    background-color: var(--referral-rate-limit-surface);
  }

  .bg-background {
    background-color: var(--background);
  }

  .bg-black {
    background-color: var(--color-black);
  }

  .bg-black\/5 {
    background-color: #0000000d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/5 {
      background-color: color-mix(in oklab, var(--color-black) 5%, transparent);
    }
  }

  .bg-black\/25 {
    background-color: #00000040;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/25 {
      background-color: color-mix(in oklab, var(--color-black) 25%, transparent);
    }
  }

  .bg-black\/45 {
    background-color: #00000073;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/45 {
      background-color: color-mix(in oklab, var(--color-black) 45%, transparent);
    }
  }

  .bg-blue-50 {
    background-color: var(--color-blue-50);
  }

  .bg-blue-500 {
    background-color: var(--color-blue-500);
  }

  .bg-blue-700 {
    background-color: var(--color-blue-700);
  }

  .bg-border {
    background-color: var(--border);
  }

  .bg-current, .bg-current\/10 {
    background-color: currentColor;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-current\/10 {
      background-color: color-mix(in oklab, currentcolor 10%, transparent);
    }
  }

  .bg-field {
    background-color: var(--field-background, var(--default));
  }

  .bg-gray-50 {
    background-color: var(--color-gray-50);
  }

  .bg-gray-100 {
    background-color: var(--color-gray-100);
  }

  .bg-gray-100\/50 {
    background-color: #f3f4f680;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-gray-100\/50 {
      background-color: color-mix(in oklab, var(--color-gray-100) 50%, transparent);
    }
  }

  .bg-gray-200 {
    background-color: var(--color-gray-200);
  }

  .bg-gray-300 {
    background-color: var(--color-gray-300);
  }

  .bg-gray-600 {
    background-color: var(--color-gray-600);
  }

  .bg-gray-900 {
    background-color: var(--color-gray-900);
  }

  .bg-green-200 {
    background-color: var(--color-green-200);
  }

  .bg-green-600 {
    background-color: var(--color-green-600);
  }

  .bg-indigo-700 {
    background-color: var(--color-indigo-700);
  }

  .bg-link {
    background-color: var(--link);
  }

  .bg-muted {
    background-color: var(--muted);
  }

  .bg-neutral-300 {
    background-color: var(--color-neutral-300);
  }

  .bg-orange-100 {
    background-color: var(--color-orange-100);
  }

  .bg-overlay {
    background-color: var(--overlay);
  }

  .bg-purple-50 {
    background-color: var(--color-purple-50);
  }

  .bg-purple-500 {
    background-color: var(--color-purple-500);
  }

  .bg-red-400 {
    background-color: var(--color-red-400);
  }

  .bg-red-500 {
    background-color: var(--color-red-500);
  }

  .bg-red-500\/50 {
    background-color: #fb2c3680;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-red-500\/50 {
      background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
    }
  }

  .bg-red-500\/\[50\%\] {
    background-color: #fb2c3680;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-red-500\/\[50\%\] {
      background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
    }
  }

  .bg-red-950 {
    background-color: var(--color-red-950);
  }

  .bg-slate-50 {
    background-color: var(--color-slate-50);
  }

  .bg-slate-100 {
    background-color: var(--color-slate-100);
  }

  .bg-slate-300 {
    background-color: var(--color-slate-300);
  }

  .bg-surface-secondary {
    background-color: var(--surface-secondary);
  }

  .bg-transparent {
    background-color: #0000;
  }

  .bg-transparent\! {
    background-color: #0000 !important;
  }

  .bg-warning {
    background-color: var(--warning);
  }

  .bg-white {
    background-color: var(--color-white);
  }

  .bg-white\/70 {
    background-color: #ffffffb3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/70 {
      background-color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }

  .bg-zinc-800 {
    background-color: var(--color-zinc-800);
  }

  .bg-linear-to-r {
    --tw-gradient-position: to right;
  }

  @supports (background-image: linear-gradient(in lab, red, red)) {
    .bg-linear-to-r {
      --tw-gradient-position: to right in oklab;
    }
  }

  .bg-linear-to-r {
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .-bg-conic, .bg-conic {
    --tw-gradient-position: in oklab;
    background-image: conic-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-b {
    --tw-gradient-position: to bottom in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-r {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-t {
    --tw-gradient-position: to top in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-radial {
    --tw-gradient-position: in oklab;
    background-image: radial-gradient(var(--tw-gradient-stops));
  }

  .bg-\[linear-gradient\(112deg\,transparent_30\%\,rgba\(255\,255\,255\,0\.38\)_49\%\,transparent_68\%\)\] {
    background-image: linear-gradient(112deg, #0000 30%, #ffffff61 49%, #0000 68%);
  }

  .bg-none {
    background-image: none;
  }

  .via-none {
    --tw-gradient-via-stops: initial;
  }

  .from-emerald-500 {
    --tw-gradient-from: var(--color-emerald-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-transparent {
    --tw-gradient-from: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-\[var\(--app-shell-tab-background\)\] {
    --tw-gradient-to: var(--app-shell-tab-background);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-indigo-800 {
    --tw-gradient-to: var(--color-indigo-800);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-purple-500 {
    --tw-gradient-to: var(--color-purple-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-sky-100 {
    --tw-gradient-to: var(--color-sky-100);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-transparent {
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-100\% {
    --tw-gradient-to-position: 100%;
  }

  .to-\[85\%\] {
    --tw-gradient-to-position: 85%;
  }

  .\[mask-image\:linear-gradient\(to_bottom\,black_calc\(100\%_-_4rem\)\,transparent\)\] {
    -webkit-mask-image: linear-gradient(#000 calc(100% - 4rem), #0000);
    mask-image: linear-gradient(#000 calc(100% - 4rem), #0000);
  }

  .\[mask-image\:linear-gradient\(to_right\,black_calc\(100\%_-_16px\)\,transparent\)\] {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 16px), #0000);
    mask-image: linear-gradient(to right, #000 calc(100% - 16px), #0000);
  }

  .mask-none {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .mask-circle {
    --tw-mask-radial-shape: circle;
  }

  .mask-ellipse {
    --tw-mask-radial-shape: ellipse;
  }

  .mask-radial-closest-corner {
    --tw-mask-radial-size: closest-corner;
  }

  .mask-radial-closest-side {
    --tw-mask-radial-size: closest-side;
  }

  .mask-radial-farthest-corner {
    --tw-mask-radial-size: farthest-corner;
  }

  .mask-radial-farthest-side {
    --tw-mask-radial-size: farthest-side;
  }

  .mask-radial-at-bottom {
    --tw-mask-radial-position: bottom;
  }

  .mask-radial-at-bottom-left {
    --tw-mask-radial-position: bottom left;
  }

  .mask-radial-at-bottom-right {
    --tw-mask-radial-position: bottom right;
  }

  .mask-radial-at-center {
    --tw-mask-radial-position: center;
  }

  .mask-radial-at-left {
    --tw-mask-radial-position: left;
  }

  .mask-radial-at-right {
    --tw-mask-radial-position: right;
  }

  .mask-radial-at-top {
    --tw-mask-radial-position: top;
  }

  .mask-radial-at-top-left {
    --tw-mask-radial-position: top left;
  }

  .mask-radial-at-top-right {
    --tw-mask-radial-position: top right;
  }

  .box-decoration-clone {
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .box-decoration-slice {
    -webkit-box-decoration-break: slice;
    box-decoration-break: slice;
  }

  .decoration-clone {
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .decoration-slice {
    -webkit-box-decoration-break: slice;
    box-decoration-break: slice;
  }

  .bg-auto {
    background-size: auto;
  }

  .bg-contain {
    background-size: contain;
  }

  .bg-cover {
    background-size: cover;
  }

  .bg-fixed {
    background-attachment: fixed;
  }

  .bg-local {
    background-attachment: local;
  }

  .bg-scroll {
    background-attachment: scroll;
  }

  .bg-clip-border {
    background-clip: border-box;
  }

  .bg-clip-content {
    background-clip: content-box;
  }

  .bg-clip-padding {
    background-clip: padding-box;
  }

  .bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text;
  }

  .bg-bottom {
    background-position: bottom;
  }

  .bg-bottom-left {
    background-position: 0 100%;
  }

  .bg-bottom-right {
    background-position: 100% 100%;
  }

  .bg-center {
    background-position: center;
  }

  .bg-left {
    background-position: 0;
  }

  .bg-left-bottom {
    background-position: 0 100%;
  }

  .bg-left-top {
    background-position: 0 0;
  }

  .bg-right {
    background-position: 100%;
  }

  .bg-right-bottom {
    background-position: 100% 100%;
  }

  .bg-right-top {
    background-position: 100% 0;
  }

  .bg-top {
    background-position: top;
  }

  .bg-top-left {
    background-position: 0 0;
  }

  .bg-top-right {
    background-position: 100% 0;
  }

  .bg-no-repeat {
    background-repeat: no-repeat;
  }

  .bg-repeat {
    background-repeat: repeat;
  }

  .bg-repeat-round {
    background-repeat: round;
  }

  .bg-repeat-space {
    background-repeat: space;
  }

  .bg-repeat-x {
    background-repeat: repeat-x;
  }

  .bg-repeat-y {
    background-repeat: repeat-y;
  }

  .bg-origin-border {
    background-origin: border-box;
  }

  .bg-origin-content {
    background-origin: content-box;
  }

  .bg-origin-padding {
    background-origin: padding-box;
  }

  .mask-add {
    -webkit-mask-composite: source-over;
    -webkit-mask-composite: source-over;
    mask-composite: add;
  }

  .mask-exclude {
    -webkit-mask-composite: xor;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }

  .mask-intersect {
    -webkit-mask-composite: source-in;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }

  .mask-subtract {
    -webkit-mask-composite: source-out;
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
  }

  .mask-alpha {
    -webkit-mask-source-type: alpha;
    -webkit-mask-source-type: alpha;
    mask-mode: alpha;
  }

  .mask-luminance {
    -webkit-mask-source-type: luminance;
    -webkit-mask-source-type: luminance;
    mask-mode: luminance;
  }

  .mask-match {
    -webkit-mask-source-type: auto;
    -webkit-mask-source-type: auto;
    mask-mode: match-source;
  }

  .mask-type-alpha {
    mask-type: alpha;
  }

  .mask-type-luminance {
    mask-type: luminance;
  }

  .mask-auto {
    -webkit-mask-size: auto;
    mask-size: auto;
  }

  .mask-contain {
    -webkit-mask-size: contain;
    mask-size: contain;
  }

  .mask-cover {
    -webkit-mask-size: cover;
    mask-size: cover;
  }

  .mask-clip-border {
    -webkit-mask-clip: border-box;
    mask-clip: border-box;
  }

  .mask-clip-content {
    -webkit-mask-clip: content-box;
    mask-clip: content-box;
  }

  .mask-clip-fill {
    -webkit-mask-clip: fill-box;
    mask-clip: fill-box;
  }

  .mask-clip-padding {
    -webkit-mask-clip: padding-box;
    mask-clip: padding-box;
  }

  .mask-clip-stroke {
    -webkit-mask-clip: stroke-box;
    mask-clip: stroke-box;
  }

  .mask-clip-view {
    -webkit-mask-clip: view-box;
    mask-clip: view-box;
  }

  .mask-no-clip {
    -webkit-mask-clip: no-clip;
    mask-clip: no-clip;
  }

  .mask-bottom {
    -webkit-mask-position: bottom;
    mask-position: bottom;
  }

  .mask-bottom-left {
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
  }

  .mask-bottom-right {
    -webkit-mask-position: 100% 100%;
    mask-position: 100% 100%;
  }

  .mask-center {
    -webkit-mask-position: center;
    mask-position: center;
  }

  .mask-left {
    -webkit-mask-position: 0;
    mask-position: 0;
  }

  .mask-right {
    -webkit-mask-position: 100%;
    mask-position: 100%;
  }

  .mask-top {
    -webkit-mask-position: top;
    mask-position: top;
  }

  .mask-top-left {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }

  .mask-top-right {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }

  .mask-no-repeat {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  .mask-repeat {
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
  }

  .mask-repeat-round {
    -webkit-mask-repeat: round;
    mask-repeat: round;
  }

  .mask-repeat-space {
    -webkit-mask-repeat: space;
    mask-repeat: space;
  }

  .mask-repeat-x {
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
  }

  .mask-repeat-y {
    -webkit-mask-repeat: repeat-y;
    mask-repeat: repeat-y;
  }

  .mask-origin-border {
    -webkit-mask-origin: border-box;
    mask-origin: border-box;
  }

  .mask-origin-content {
    -webkit-mask-origin: content-box;
    mask-origin: content-box;
  }

  .mask-origin-fill {
    -webkit-mask-origin: fill-box;
    mask-origin: fill-box;
  }

  .mask-origin-padding {
    -webkit-mask-origin: padding-box;
    mask-origin: padding-box;
  }

  .mask-origin-stroke {
    -webkit-mask-origin: stroke-box;
    mask-origin: stroke-box;
  }

  .mask-origin-view {
    -webkit-mask-origin: view-box;
    mask-origin: view-box;
  }

  .fill-none {
    fill: none;
  }

  .stroke-none {
    stroke: none;
  }

  .object-contain {
    object-fit: contain;
  }

  .object-cover {
    object-fit: cover;
  }

  .object-fill {
    object-fit: fill;
  }

  .object-none {
    object-fit: none;
  }

  .object-scale-down {
    object-fit: scale-down;
  }

  .object-left-bottom {
    object-position: left bottom;
  }

  .object-left-top {
    object-position: left top;
  }

  .object-right-bottom {
    object-position: right bottom;
  }

  .object-right-top {
    object-position: right top;
  }

  .object-top {
    object-position: top;
  }

  .\!p-0 {
    padding: 0 !important;
  }

  .\!p-1 {
    padding: var(--spacing) !important;
  }

  .\!p-2 {
    padding: calc(var(--spacing) * 2) !important;
  }

  .\!p-\[6px\] {
    padding: 6px !important;
  }

  .p-0 {
    padding: 0;
  }

  .p-0\! {
    padding: 0 !important;
  }

  .p-0\.5 {
    padding: calc(var(--spacing) * .5);
  }

  .p-1 {
    padding: var(--spacing);
  }

  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }

  .p-2 {
    padding: calc(var(--spacing) * 2);
  }

  .p-2\.5 {
    padding: calc(var(--spacing) * 2.5);
  }

  .p-3 {
    padding: calc(var(--spacing) * 3);
  }

  .p-4 {
    padding: calc(var(--spacing) * 4);
  }

  .p-5 {
    padding: calc(var(--spacing) * 5);
  }

  .p-6 {
    padding: calc(var(--spacing) * 6);
  }

  .p-7 {
    padding: calc(var(--spacing) * 7);
  }

  .p-8 {
    padding: calc(var(--spacing) * 8);
  }

  .p-\[calc\(var\(--oai-wb-spacing\)\*1\.5\)\] {
    padding: calc(var(--oai-wb-spacing) * 1.5);
  }

  .p-px {
    padding: 1px;
  }

  .\!px-0 {
    padding-inline: 0 !important;
  }

  .\!px-1 {
    padding-inline: var(--spacing) !important;
  }

  .\!px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5) !important;
  }

  .\!px-2 {
    padding-inline: calc(var(--spacing) * 2) !important;
  }

  .\!px-\[7px\] {
    padding-inline: 7px !important;
  }

  .\!px-\[var\(--padding-row-x\)\] {
    padding-inline: var(--padding-row-x) !important;
  }

  .px-0 {
    padding-inline: 0;
  }

  .px-0\.5 {
    padding-inline: calc(var(--spacing) * .5);
  }

  .px-1 {
    padding-inline: var(--spacing);
  }

  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }

  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }

  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }

  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }

  .px-3\.5 {
    padding-inline: calc(var(--spacing) * 3.5);
  }

  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }

  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }

  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }

  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }

  .px-10 {
    padding-inline: calc(var(--spacing) * 10);
  }

  .px-12 {
    padding-inline: calc(var(--spacing) * 12);
  }

  .px-16 {
    padding-inline: calc(var(--spacing) * 16);
  }

  .px-20 {
    padding-inline: calc(var(--spacing) * 20);
  }

  .px-40 {
    padding-inline: calc(var(--spacing) * 40);
  }

  .px-\[calc\(var\(--oai-wb-spacing\)\*2\.5\)\] {
    padding-inline: calc(var(--oai-wb-spacing) * 2.5);
  }

  .px-\[calc\(var\(--oai-wb-spacing\)\*3\)\] {
    padding-inline: calc(var(--oai-wb-spacing) * 3);
  }

  .px-\[calc\(var\(--oai-wb-spacing\)\*4\)\] {
    padding-inline: calc(var(--oai-wb-spacing) * 4);
  }

  .px-\[var\(--codex-diffs-header-padding-x\,1rem\)\] {
    padding-inline: var(--codex-diffs-header-padding-x, 1rem);
  }

  .px-\[var\(--detail-page-inline-inset\,0px\)\] {
    padding-inline: var(--detail-page-inline-inset, 0px);
  }

  .px-\[var\(--home-composer-inline-inset\)\] {
    padding-inline: var(--home-composer-inline-inset);
  }

  .px-\[var\(--padding-row-cell-x\,var\(--padding-row-x\)\)\] {
    padding-inline: var(--padding-row-cell-x, var(--padding-row-x));
  }

  .px-\[var\(--padding-row-x\)\] {
    padding-inline: var(--padding-row-x);
  }

  .px-\[var\(--thread-resource-card-row-padding-x\)\] {
    padding-inline: var(--thread-resource-card-row-padding-x);
  }

  .\!py-0 {
    padding-block: 0 !important;
  }

  .\!py-0\.5 {
    padding-block: calc(var(--spacing) * .5) !important;
  }

  .\!py-1 {
    padding-block: var(--spacing) !important;
  }

  .\!py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5) !important;
  }

  .\!py-2 {
    padding-block: calc(var(--spacing) * 2) !important;
  }

  .\!py-\[5px\] {
    padding-block: 5px !important;
  }

  .\!py-\[var\(--padding-row-y\)\] {
    padding-block: var(--padding-row-y) !important;
  }

  .py-0 {
    padding-block: 0;
  }

  .py-0\.5 {
    padding-block: calc(var(--spacing) * .5);
  }

  .py-1 {
    padding-block: var(--spacing);
  }

  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }

  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }

  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }

  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }

  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }

  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }

  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }

  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }

  .py-16 {
    padding-block: calc(var(--spacing) * 16);
  }

  .py-30 {
    padding-block: calc(var(--spacing) * 30);
  }

  .py-\[1px\] {
    padding-block: 1px;
  }

  .py-\[11px\] {
    padding-block: 11px;
  }

  .py-\[calc\(var\(--oai-wb-spacing\)\*1\.5\)\] {
    padding-block: calc(var(--oai-wb-spacing) * 1.5);
  }

  .py-\[calc\(var\(--oai-wb-spacing\)\*2\.5\)\] {
    padding-block: calc(var(--oai-wb-spacing) * 2.5);
  }

  .py-\[var\(--codex-diffs-header-padding-y\,0\.25rem\)\] {
    padding-block: var(--codex-diffs-header-padding-y, .25rem);
  }

  .py-\[var\(--oai-wb-spacing\)\] {
    padding-block: var(--oai-wb-spacing);
  }

  .py-\[var\(--padding-row-y\)\] {
    padding-block: var(--padding-row-y);
  }

  .py-\[var\(--turn-diff-row-padding-y\)\] {
    padding-block: var(--turn-diff-row-padding-y);
  }

  .py-px {
    padding-block: 1px;
  }

  .\!ps-2 {
    padding-inline-start: calc(var(--spacing) * 2) !important;
  }

  .\!ps-3 {
    padding-inline-start: calc(var(--spacing) * 3) !important;
  }

  .ps-\(--spacing-token-safe-header-left\) {
    padding-inline-start: var(--spacing-token-safe-header-left);
  }

  .ps-0 {
    padding-inline-start: 0;
  }

  .ps-0\.5 {
    padding-inline-start: calc(var(--spacing) * .5);
  }

  .ps-1 {
    padding-inline-start: var(--spacing);
  }

  .ps-1\.5 {
    padding-inline-start: calc(var(--spacing) * 1.5);
  }

  .ps-2 {
    padding-inline-start: calc(var(--spacing) * 2);
  }

  .ps-2\.5 {
    padding-inline-start: calc(var(--spacing) * 2.5);
  }

  .ps-3 {
    padding-inline-start: calc(var(--spacing) * 3);
  }

  .ps-3\.5 {
    padding-inline-start: calc(var(--spacing) * 3.5);
  }

  .ps-4 {
    padding-inline-start: calc(var(--spacing) * 4);
  }

  .ps-5 {
    padding-inline-start: calc(var(--spacing) * 5);
  }

  .ps-6 {
    padding-inline-start: calc(var(--spacing) * 6);
  }

  .ps-7 {
    padding-inline-start: calc(var(--spacing) * 7);
  }

  .ps-8 {
    padding-inline-start: calc(var(--spacing) * 8);
  }

  .ps-10 {
    padding-inline-start: calc(var(--spacing) * 10);
  }

  .ps-11 {
    padding-inline-start: calc(var(--spacing) * 11);
  }

  .ps-12 {
    padding-inline-start: calc(var(--spacing) * 12);
  }

  .ps-14 {
    padding-inline-start: calc(var(--spacing) * 14);
  }

  .ps-\[9px\] {
    padding-inline-start: 9px;
  }

  .ps-\[calc\(var\(--padding-row-x\)\+1\.25rem\)\] {
    padding-inline-start: calc(var(--padding-row-x) + 1.25rem);
  }

  .ps-\[max\(var\(--spacing-token-safe-header-left\)\,0\.5rem\)\] {
    padding-inline-start: max(var(--spacing-token-safe-header-left), .5rem);
  }

  .ps-\[var\(--padding-row-cell-x\,var\(--padding-row-x\)\)\] {
    padding-inline-start: var(--padding-row-cell-x, var(--padding-row-x));
  }

  .ps-\[var\(--thread-resource-card-row-padding-x\)\] {
    padding-inline-start: var(--thread-resource-card-row-padding-x);
  }

  .\!pe-1\.5 {
    padding-inline-end: calc(var(--spacing) * 1.5) !important;
  }

  .\!pe-\[5px\] {
    padding-inline-end: 5px !important;
  }

  .pe-\(--app-shell-tab-separator-gutter\) {
    padding-inline-end: var(--app-shell-tab-separator-gutter);
  }

  .pe-\(--spacing-token-safe-header-right\) {
    padding-inline-end: var(--spacing-token-safe-header-right);
  }

  .pe-0 {
    padding-inline-end: 0;
  }

  .pe-0\.5 {
    padding-inline-end: calc(var(--spacing) * .5);
  }

  .pe-1 {
    padding-inline-end: var(--spacing);
  }

  .pe-1\.5 {
    padding-inline-end: calc(var(--spacing) * 1.5);
  }

  .pe-2 {
    padding-inline-end: calc(var(--spacing) * 2);
  }

  .pe-2\.5 {
    padding-inline-end: calc(var(--spacing) * 2.5);
  }

  .pe-3 {
    padding-inline-end: calc(var(--spacing) * 3);
  }

  .pe-3\.5 {
    padding-inline-end: calc(var(--spacing) * 3.5);
  }

  .pe-4 {
    padding-inline-end: calc(var(--spacing) * 4);
  }

  .pe-5 {
    padding-inline-end: calc(var(--spacing) * 5);
  }

  .pe-6 {
    padding-inline-end: calc(var(--spacing) * 6);
  }

  .pe-8 {
    padding-inline-end: calc(var(--spacing) * 8);
  }

  .pe-9 {
    padding-inline-end: calc(var(--spacing) * 9);
  }

  .pe-10 {
    padding-inline-end: calc(var(--spacing) * 10);
  }

  .pe-16 {
    padding-inline-end: calc(var(--spacing) * 16);
  }

  .pe-24 {
    padding-inline-end: calc(var(--spacing) * 24);
  }

  .pe-28 {
    padding-inline-end: calc(var(--spacing) * 28);
  }

  .pe-32 {
    padding-inline-end: calc(var(--spacing) * 32);
  }

  .pe-44 {
    padding-inline-end: calc(var(--spacing) * 44);
  }

  .pe-\[6px\] {
    padding-inline-end: 6px;
  }

  .pe-\[52px\] {
    padding-inline-end: 52px;
  }

  .pe-\[var\(--padding-row-x\)\] {
    padding-inline-end: var(--padding-row-x);
  }

  .\!pt-0 {
    padding-top: 0 !important;
  }

  .\!pt-5 {
    padding-top: calc(var(--spacing) * 5) !important;
  }

  .pt-\(--thread-content-top-inset\) {
    padding-top: var(--thread-content-top-inset);
  }

  .pt-0 {
    padding-top: 0;
  }

  .pt-0\.5 {
    padding-top: calc(var(--spacing) * .5);
  }

  .pt-1 {
    padding-top: var(--spacing);
  }

  .pt-1\.5 {
    padding-top: calc(var(--spacing) * 1.5);
  }

  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }

  .pt-2\.5 {
    padding-top: calc(var(--spacing) * 2.5);
  }

  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }

  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }

  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }

  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }

  .pt-7 {
    padding-top: calc(var(--spacing) * 7);
  }

  .pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }

  .pt-9 {
    padding-top: calc(var(--spacing) * 9);
  }

  .pt-10 {
    padding-top: calc(var(--spacing) * 10);
  }

  .pt-12 {
    padding-top: calc(var(--spacing) * 12);
  }

  .pt-14 {
    padding-top: calc(var(--spacing) * 14);
  }

  .pt-20 {
    padding-top: calc(var(--spacing) * 20);
  }

  .pt-24 {
    padding-top: calc(var(--spacing) * 24);
  }

  .pt-45 {
    padding-top: calc(var(--spacing) * 45);
  }

  .pt-50 {
    padding-top: calc(var(--spacing) * 50);
  }

  .pt-\[10px\] {
    padding-top: 10px;
  }

  .pt-\[84px\] {
    padding-top: 84px;
  }

  .pt-\[100px\] {
    padding-top: 100px;
  }

  .pt-\[calc\(var\(--oai-wb-spacing\)\*2\)\] {
    padding-top: calc(var(--oai-wb-spacing) * 2);
  }

  .\!pr-1\.5 {
    padding-right: calc(var(--spacing) * 1.5) !important;
  }

  .\!pr-\[5px\] {
    padding-right: 5px !important;
  }

  .pr-0 {
    padding-right: 0;
  }

  .pr-0\.5 {
    padding-right: calc(var(--spacing) * .5);
  }

  .pr-1 {
    padding-right: var(--spacing);
  }

  .pr-1\.5 {
    padding-right: calc(var(--spacing) * 1.5);
  }

  .pr-2 {
    padding-right: calc(var(--spacing) * 2);
  }

  .pr-2\.5 {
    padding-right: calc(var(--spacing) * 2.5);
  }

  .pr-3 {
    padding-right: calc(var(--spacing) * 3);
  }

  .pr-4 {
    padding-right: calc(var(--spacing) * 4);
  }

  .pr-5 {
    padding-right: calc(var(--spacing) * 5);
  }

  .pr-6 {
    padding-right: calc(var(--spacing) * 6);
  }

  .pr-8 {
    padding-right: calc(var(--spacing) * 8);
  }

  .pr-9 {
    padding-right: calc(var(--spacing) * 9);
  }

  .pr-10 {
    padding-right: calc(var(--spacing) * 10);
  }

  .pr-16 {
    padding-right: calc(var(--spacing) * 16);
  }

  .pr-28 {
    padding-right: calc(var(--spacing) * 28);
  }

  .pr-32 {
    padding-right: calc(var(--spacing) * 32);
  }

  .pr-\[52px\] {
    padding-right: 52px;
  }

  .pr-\[var\(--padding-row-x\)\] {
    padding-right: var(--padding-row-x);
  }

  .\!pb-0 {
    padding-bottom: 0 !important;
  }

  .pb-0 {
    padding-bottom: 0;
  }

  .pb-0\.5 {
    padding-bottom: calc(var(--spacing) * .5);
  }

  .pb-1 {
    padding-bottom: var(--spacing);
  }

  .pb-1\.5 {
    padding-bottom: calc(var(--spacing) * 1.5);
  }

  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }

  .pb-2\.5 {
    padding-bottom: calc(var(--spacing) * 2.5);
  }

  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }

  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }

  .pb-5 {
    padding-bottom: calc(var(--spacing) * 5);
  }

  .pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }

  .pb-7 {
    padding-bottom: calc(var(--spacing) * 7);
  }

  .pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
  }

  .pb-10 {
    padding-bottom: calc(var(--spacing) * 10);
  }

  .pb-12 {
    padding-bottom: calc(var(--spacing) * 12);
  }

  .pb-15 {
    padding-bottom: calc(var(--spacing) * 15);
  }

  .pb-20 {
    padding-bottom: calc(var(--spacing) * 20);
  }

  .pb-24 {
    padding-bottom: calc(var(--spacing) * 24);
  }

  .pb-\[27px\] {
    padding-bottom: 27px;
  }

  .pb-\[52px\] {
    padding-bottom: 52px;
  }

  .pb-\[calc\(var\(--oai-wb-spacing\)\*2\)\] {
    padding-bottom: calc(var(--oai-wb-spacing) * 2);
  }

  .pb-\[calc\(var\(--right-panel-composer-overlay-reserve\,0px\)\+var\(--spacing\)\*6\)\] {
    padding-bottom: calc(var(--right-panel-composer-overlay-reserve, 0px) + var(--spacing) * 6);
  }

  .pb-\[var\(--right-panel-composer-overlay-reserve\,0px\)\] {
    padding-bottom: var(--right-panel-composer-overlay-reserve, 0px);
  }

  .pb-px {
    padding-bottom: 1px;
  }

  .\!pl-2 {
    padding-left: calc(var(--spacing) * 2) !important;
  }

  .\!pl-3 {
    padding-left: calc(var(--spacing) * 3) !important;
  }

  .pl-0 {
    padding-left: 0;
  }

  .pl-0\.5 {
    padding-left: calc(var(--spacing) * .5);
  }

  .pl-1 {
    padding-left: var(--spacing);
  }

  .pl-1\.5 {
    padding-left: calc(var(--spacing) * 1.5);
  }

  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }

  .pl-2\.5 {
    padding-left: calc(var(--spacing) * 2.5);
  }

  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }

  .pl-3\.5 {
    padding-left: calc(var(--spacing) * 3.5);
  }

  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }

  .pl-5 {
    padding-left: calc(var(--spacing) * 5);
  }

  .pl-6 {
    padding-left: calc(var(--spacing) * 6);
  }

  .pl-7 {
    padding-left: calc(var(--spacing) * 7);
  }

  .pl-8 {
    padding-left: calc(var(--spacing) * 8);
  }

  .pl-10 {
    padding-left: calc(var(--spacing) * 10);
  }

  .pl-11 {
    padding-left: calc(var(--spacing) * 11);
  }

  .pl-12 {
    padding-left: calc(var(--spacing) * 12);
  }

  .pl-14 {
    padding-left: calc(var(--spacing) * 14);
  }

  .pl-\[6px\] {
    padding-left: 6px;
  }

  .pl-\[calc\(var\(--padding-row-x\)\+1\.25rem\)\] {
    padding-left: calc(var(--padding-row-x) + 1.25rem);
  }

  .pl-\[var\(--padding-row-cell-x\,var\(--padding-row-x\)\)\] {
    padding-left: var(--padding-row-cell-x, var(--padding-row-x));
  }

  .pl-\[var\(--thread-resource-card-row-padding-x\)\] {
    padding-left: var(--thread-resource-card-row-padding-x);
  }

  .\[text-align\:left\] {
    text-align: left;
  }

  .text-center {
    text-align: center;
  }

  .text-end {
    text-align: end;
  }

  .text-justify {
    text-align: justify;
  }

  .text-left {
    text-align: left;
  }

  .text-right {
    text-align: right;
  }

  .text-start {
    text-align: start;
  }

  .align-\[-0\.08em\] {
    vertical-align: -.08em;
  }

  .align-\[-0\.125rem\] {
    vertical-align: -.125rem;
  }

  .align-baseline {
    vertical-align: baseline;
  }

  .align-bottom {
    vertical-align: bottom;
  }

  .align-middle {
    vertical-align: middle;
  }

  .align-sub {
    vertical-align: sub;
  }

  .align-super {
    vertical-align: super;
  }

  .align-text-bottom {
    vertical-align: text-bottom;
  }

  .align-text-top {
    vertical-align: text-top;
  }

  .align-top {
    vertical-align: top;
  }

  .\!font-sans {
    font-family: var(--font-sans) !important;
  }

  .\[font-family\:inherit\] {
    font-family: inherit;
  }

  .\[font-family\:var\(--oai-wb-font-sans\)\] {
    font-family: var(--oai-wb-font-sans);
  }

  .font-mono {
    font-family: var(--font-mono);
  }

  .font-sans {
    font-family: var(--font-sans);
  }

  .\!text-base {
    font-size: var(--text-base) !important;
    line-height: var(--tw-leading, var(--text-base--line-height)) !important;
  }

  .\!text-sm {
    font-size: var(--text-sm) !important;
    line-height: var(--tw-leading, var(--text-sm--line-height)) !important;
  }

  .\!text-xs {
    font-size: var(--text-xs) !important;
    line-height: var(--tw-leading, var(--text-xs--line-height)) !important;
  }

  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }

  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }

  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }

  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .\[font-size\:var\(--oai-wb-font-size\)\] {
    font-size: var(--oai-wb-font-size);
  }

  .text-\[0\.75rem\] {
    font-size: .75rem;
  }

  .text-\[1\.2em\] {
    font-size: 1.2em;
  }

  .text-\[2rem\] {
    font-size: 2rem;
  }

  .text-\[9px\] {
    font-size: 9px;
  }

  .text-\[10px\] {
    font-size: 10px;
  }

  .text-\[11px\] {
    font-size: 11px;
  }

  .text-\[13px\] {
    font-size: 13px;
  }

  .text-\[15px\] {
    font-size: 15px;
  }

  .text-\[18px\] {
    font-size: 18px;
  }

  .text-\[length\:inherit\]\! {
    font-size: inherit !important;
  }

  .text-\[length\:var\(--detail-row-font-size\,var\(--text-base\)\)\] {
    font-size: var(--detail-row-font-size, var(--text-base));
  }

  .\!leading-4 {
    --tw-leading: calc(var(--spacing) * 4) !important;
    line-height: calc(var(--spacing) * 4) !important;
  }

  .\!leading-5 {
    --tw-leading: calc(var(--spacing) * 5) !important;
    line-height: calc(var(--spacing) * 5) !important;
  }

  .\!leading-\[18px\] {
    --tw-leading: 18px !important;
    line-height: 18px !important;
  }

  .\!leading-none {
    --tw-leading: 1 !important;
    line-height: 1 !important;
  }

  .leading-0 {
    --tw-leading: 0px;
    line-height: 0;
  }

  .leading-3 {
    --tw-leading: calc(var(--spacing) * 3);
    line-height: calc(var(--spacing) * 3);
  }

  .leading-4 {
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
  }

  .leading-5 {
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
  }

  .leading-6 {
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
  }

  .leading-7 {
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
  }

  .leading-8 {
    --tw-leading: calc(var(--spacing) * 8);
    line-height: calc(var(--spacing) * 8);
  }

  .leading-9 {
    --tw-leading: calc(var(--spacing) * 9);
    line-height: calc(var(--spacing) * 9);
  }

  .leading-\[1\.4\] {
    --tw-leading: 1.4;
    line-height: 1.4;
  }

  .leading-\[13px\] {
    --tw-leading: 13px;
    line-height: 13px;
  }

  .leading-\[14px\] {
    --tw-leading: 14px;
    line-height: 14px;
  }

  .leading-\[17px\] {
    --tw-leading: 17px;
    line-height: 17px;
  }

  .leading-\[18px\] {
    --tw-leading: 18px;
    line-height: 18px;
  }

  .leading-\[21px\] {
    --tw-leading: 21px;
    line-height: 21px;
  }

  .leading-\[25px\] {
    --tw-leading: 25px;
    line-height: 25px;
  }

  .leading-\[calc\(var\(--codex-chat-font-size\)_\+_8px\)\] {
    --tw-leading: calc(var(--codex-chat-font-size) + 8px);
    line-height: calc(var(--codex-chat-font-size) + 8px);
  }

  .leading-\[calc\(var\(--oai-wb-spacing\)\*8\)\] {
    --tw-leading: calc(var(--oai-wb-spacing) * 8);
    line-height: calc(var(--oai-wb-spacing) * 8);
  }

  .leading-\[inherit\] {
    --tw-leading: inherit;
    line-height: inherit;
  }

  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }

  .leading-normal {
    --tw-leading: var(--leading-normal);
    line-height: var(--leading-normal);
  }

  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }

  .leading-snug {
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
  }

  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }

  .\[line-height\:inherit\] {
    line-height: inherit;
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .tracking-\[-0\.3px\] {
    --tw-tracking: -.3px;
    letter-spacing: -.3px;
  }

  .tracking-\[-0\.08px\] {
    --tw-tracking: -.08px;
    letter-spacing: -.08px;
  }

  .tracking-\[-0\.13px\] {
    --tw-tracking: -.13px;
    letter-spacing: -.13px;
  }

  .tracking-\[-0\.18px\] {
    --tw-tracking: -.18px;
    letter-spacing: -.18px;
  }

  .tracking-\[-0\.022em\] {
    --tw-tracking: -.022em;
    letter-spacing: -.022em;
  }

  .tracking-\[-0\.025em\] {
    --tw-tracking: -.025em;
    letter-spacing: -.025em;
  }

  .tracking-\[0\.06px\] {
    --tw-tracking: .06px;
    letter-spacing: .06px;
  }

  .tracking-normal {
    --tw-tracking: var(--tracking-normal);
    letter-spacing: var(--tracking-normal);
  }

  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }

  .tracking-widest {
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
  }

  .\[text-wrap\:pretty\] {
    text-wrap: pretty;
  }

  .text-balance {
    text-wrap: balance;
  }

  .text-nowrap {
    text-wrap: nowrap;
  }

  .text-pretty {
    text-wrap: pretty;
  }

  .text-wrap {
    text-wrap: wrap;
  }

  .break-normal {
    overflow-wrap: normal;
    word-break: normal;
  }

  .break-words {
    overflow-wrap: break-word;
  }

  .wrap-anywhere {
    overflow-wrap: anywhere;
  }

  .wrap-break-word {
    overflow-wrap: break-word;
  }

  .wrap-normal {
    overflow-wrap: normal;
  }

  .break-all {
    word-break: break-all;
  }

  .break-keep {
    word-break: keep-all;
  }

  .overflow-ellipsis {
    text-overflow: ellipsis;
  }

  .text-clip {
    text-overflow: clip;
  }

  .text-ellipsis {
    text-overflow: ellipsis;
  }

  .hyphens-auto {
    -webkit-hyphens: auto;
    hyphens: auto;
  }

  .hyphens-manual {
    -webkit-hyphens: manual;
    hyphens: manual;
  }

  .hyphens-none {
    -webkit-hyphens: none;
    hyphens: none;
  }

  .\!whitespace-normal {
    white-space: normal !important;
  }

  .whitespace-break-spaces {
    white-space: break-spaces;
  }

  .whitespace-normal {
    white-space: normal;
  }

  .whitespace-nowrap {
    white-space: nowrap;
  }

  .whitespace-pre {
    white-space: pre;
  }

  .whitespace-pre\! {
    white-space: pre !important;
  }

  .whitespace-pre-line {
    white-space: pre-line;
  }

  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }

  .whitespace-pre-wrap\! {
    white-space: pre-wrap !important;
  }

  .\!text-black {
    color: var(--color-black) !important;
  }

  .\!text-black\/60 {
    color: #0009 !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\!text-black\/60 {
      color: color-mix(in oklab, var(--color-black) 60%, transparent) !important;
    }
  }

  .\!text-current {
    color: currentColor !important;
  }

  .\!text-link {
    color: var(--link) !important;
  }

  .\!text-white {
    color: var(--color-white) !important;
  }

  .\[color\:inherit\] {
    color: inherit;
  }

  .\[color\:red\] {
    color: red;
  }

  .\[color\:red\]\/50 {
    color: oklab(62.7955% .224863 .125846 / .5);
  }

  .\[color\:red\]\/50\! {
    color: oklab(62.7955% .224863 .125846 / .5) !important;
  }

  .\[color\:var\(--oai-wb-accent\)\] {
    color: var(--oai-wb-accent);
  }

  .\[color\:var\(--oai-wb-on-accent\)\] {
    color: var(--oai-wb-on-accent);
  }

  .\[color\:var\(--oai-wb-text-primary\)\] {
    color: var(--oai-wb-text-primary);
  }

  .\[color\:var\(--oai-wb-text-secondary\)\] {
    color: var(--oai-wb-text-secondary);
  }

  .\[color\:var\(--oai-wb-text-tertiary\)\] {
    color: var(--oai-wb-text-tertiary);
  }

  .text-\[\#04b84c\] {
    color: #04b84c;
  }

  .text-\[\#0285ff\] {
    color: #0285ff;
  }

  .text-\[\#924ff7\] {
    color: #924ff7;
  }

  .text-\[\#fa423e\] {
    color: #fa423e;
  }

  .text-\[\#fb6a22\] {
    color: #fb6a22;
  }

  .text-\[\#ff66ad\] {
    color: #ff66ad;
  }

  .text-\[\#ffc300\] {
    color: #ffc300;
  }

  .text-\[CanvasText\] {
    color: canvastext;
  }

  .text-\[color\:var\(--inline-mention-color\)\] {
    color: var(--inline-mention-color);
  }

  .text-\[inherit\] {
    color: inherit;
  }

  .text-\[var\(--color-token-menubar-selection-foreground\)\] {
    color: var(--color-token-menubar-selection-foreground);
  }

  .text-\[var\(--green-700\)\] {
    color: var(--green-700);
  }

  .text-\[var\(--referral-rate-limit-secondary\)\] {
    color: var(--referral-rate-limit-secondary);
  }

  .text-\[var\(--referral-rate-limit-success-foreground\)\] {
    color: var(--referral-rate-limit-success-foreground);
  }

  .text-\[var\(--vscode-foreground\)\] {
    color: var(--vscode-foreground);
  }

  .text-black {
    color: var(--color-black);
  }

  .text-current {
    color: currentColor;
  }

  .text-gray-100 {
    color: var(--color-gray-100);
  }

  .text-gray-400 {
    color: var(--color-gray-400);
  }

  .text-inherit {
    color: inherit;
  }

  .text-inherit\! {
    color: inherit !important;
  }

  .text-muted {
    color: var(--muted);
  }

  .text-neutral-700 {
    color: var(--color-neutral-700);
  }

  .text-neutral-900 {
    color: var(--color-neutral-900);
  }

  .text-orange-800 {
    color: var(--color-orange-800);
  }

  .text-transparent {
    color: #0000;
  }

  .text-warning {
    color: var(--warning);
  }

  .text-white {
    color: var(--color-white);
  }

  .capitalize {
    text-transform: capitalize;
  }

  .lowercase {
    text-transform: lowercase;
  }

  .normal-case {
    text-transform: none;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .\[font-style\:inherit\] {
    font-style: inherit;
  }

  .italic {
    font-style: italic;
  }

  .italic\! {
    font-style: italic !important;
  }

  .not-italic {
    font-style: normal;
  }

  .\[font-stretch\:inherit\] {
    font-stretch: inherit;
  }

  .font-stretch-condensed {
    font-stretch: condensed;
  }

  .font-stretch-expanded {
    font-stretch: expanded;
  }

  .font-stretch-extra-condensed {
    font-stretch: extra-condensed;
  }

  .font-stretch-extra-expanded {
    font-stretch: extra-expanded;
  }

  .font-stretch-normal {
    font-stretch: normal;
  }

  .font-stretch-semi-condensed {
    font-stretch: semi-condensed;
  }

  .font-stretch-semi-expanded {
    font-stretch: semi-expanded;
  }

  .font-stretch-ultra-condensed {
    font-stretch: ultra-condensed;
  }

  .font-stretch-ultra-expanded {
    font-stretch: ultra-expanded;
  }

  .diagonal-fractions {
    --tw-numeric-fraction: diagonal-fractions;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
  }

  .lining-nums {
    --tw-numeric-figure: lining-nums;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
  }

  .oldstyle-nums {
    --tw-numeric-figure: oldstyle-nums;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
  }

  .ordinal {
    --tw-ordinal: ordinal;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
  }

  .proportional-nums {
    --tw-numeric-spacing: proportional-nums;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
  }

  .slashed-zero {
    --tw-slashed-zero: slashed-zero;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
  }

  .stacked-fractions {
    --tw-numeric-fraction: stacked-fractions;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
  }

  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
  }

  .normal-nums {
    font-variant-numeric: normal;
  }

  .\[text-decoration-line\:underline\] {
    text-decoration-line: underline;
  }

  .line-through {
    text-decoration-line: line-through;
  }

  .no-underline {
    text-decoration-line: none;
  }

  .no-underline\! {
    text-decoration-line: none !important;
  }

  .overline {
    text-decoration-line: overline;
  }

  .underline {
    text-decoration-line: underline;
  }

  .underline\! {
    text-decoration-line: underline !important;
  }

  .\[text-decoration-color\:var\(--oai-wb-danger\,var\(--text-status-error\)\)\] {
    -webkit-text-decoration-color: var(--oai-wb-danger, var(--text-status-error));
    -webkit-text-decoration-color: var(--oai-wb-danger, var(--text-status-error));
    text-decoration-color: var(--oai-wb-danger, var(--text-status-error));
  }

  .decoration-current {
    text-decoration-color: currentColor;
  }

  .\[text-decoration-style\:wavy\] {
    text-decoration-style: wavy;
  }

  .decoration-dashed {
    text-decoration-style: dashed;
  }

  .decoration-dotted {
    text-decoration-style: dotted;
  }

  .decoration-double {
    text-decoration-style: double;
  }

  .decoration-solid {
    text-decoration-style: solid;
  }

  .decoration-wavy {
    text-decoration-style: wavy;
  }

  .\[text-decoration-thickness\:1px\] {
    text-decoration-thickness: 1px;
  }

  .decoration-\[0\.5px\] {
    text-decoration-thickness: .5px;
  }

  .decoration-auto {
    text-decoration-thickness: auto;
  }

  .decoration-from-font {
    text-decoration-thickness: from-font;
  }

  .underline-offset-2 {
    text-underline-offset: 2px;
  }

  .underline-offset-4 {
    text-underline-offset: 4px;
  }

  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .subpixel-antialiased {
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
  }

  .placeholder-default::placeholder {
    color: var(--default);
  }

  .caret-transparent {
    caret-color: #0000;
  }

  .accent-auto {
    accent-color: auto;
  }

  .\[color-scheme\:light\] {
    color-scheme: light;
  }

  .scheme-dark {
    color-scheme: dark;
  }

  .scheme-light {
    color-scheme: light;
  }

  .scheme-light-dark {
    color-scheme: light dark;
  }

  .scheme-normal {
    color-scheme: normal;
  }

  .scheme-only-dark {
    color-scheme: dark only;
  }

  .scheme-only-light {
    color-scheme: light only;
  }

  .opacity-0 {
    opacity: 0;
  }

  .opacity-20 {
    opacity: .2;
  }

  .opacity-25 {
    opacity: .25;
  }

  .opacity-30 {
    opacity: .3;
  }

  .opacity-40 {
    opacity: .4;
  }

  .opacity-50 {
    opacity: .5;
  }

  .opacity-50\! {
    opacity: .5 !important;
  }

  .opacity-60 {
    opacity: .6;
  }

  .opacity-65 {
    opacity: .65;
  }

  .opacity-70 {
    opacity: .7;
  }

  .opacity-75 {
    opacity: .75;
  }

  .opacity-80 {
    opacity: .8;
  }

  .opacity-100 {
    opacity: 1;
  }

  .opacity-100\! {
    opacity: 1 !important;
  }

  .mix-blend-plus-darker {
    mix-blend-mode: plus-darker;
  }

  .mix-blend-plus-lighter {
    mix-blend-mode: plus-lighter;
  }

  .mix-blend-screen {
    mix-blend-mode: screen;
  }

  .\!shadow-\[0_8px_10px_-6px_rgba\(0\,0\,0\,0\.1\)\,0_20px_25px_-5px_rgba\(0\,0\,0\,0\.1\)\] {
    --tw-shadow: 0 8px 10px -6px var(--tw-shadow-color, #0000001a), 0 20px 25px -5px var(--tw-shadow-color, #0000001a) !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  .\!shadow-none {
    --tw-shadow: 0 0 #0000 !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  .\!shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a) !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[-8px_0_16px_-8px_rgb\(0_0_0\/0\.18\)\] {
    --tw-shadow: -8px 0 16px -8px var(--tw-shadow-color, #0000002e);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_0_1px_hsla\(0\,0\%\,0\%\,0\.1\)\,0_4px_11px_hsla\(0\,0\%\,0\%\,0\.1\)\] {
    --tw-shadow: 0 0 0 1px var(--tw-shadow-color, #0000001a), 0 4px 11px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_4px_16px_rgba\(0\,0\,0\,0\.05\)\] {
    --tw-shadow: 0 4px 16px var(--tw-shadow-color, #0000000d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_6px_14px_rgba\(0\,0\,0\,0\.03\)\,inset_0_-1px_4px_rgba\(0\,0\,0\,0\.03\)\] {
    --tw-shadow: 0 6px 14px var(--tw-shadow-color, #00000008), inset 0 -1px 4px var(--tw-shadow-color, #00000008);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_8px_12px_0_rgba\(0\,0\,0\,0\.16\)\,0_0_1px_0_rgba\(0\,0\,0\,0\.60\)\] {
    --tw-shadow: 0 8px 12px 0 var(--tw-shadow-color, #00000029), 0 0 1px 0 var(--tw-shadow-color, #0009);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0px_8px_16px_-4px_rgba\(0\,0\,0\,0\.12\)\] {
    --tw-shadow: 0px 8px 16px -4px var(--tw-shadow-color, #0000001f);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-md {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-none {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-xs {
    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-ring {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: var(--ring-offset-width);
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--background);
    --tw-outline-style: none;
    outline-style: none;
  }

  .\!ring-0 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  .ring {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-0 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-2 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-4 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-\[0\.5px\] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(.5px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .inset-ring {
    --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .\[box-shadow\:0_8px_24px_rgba\(0\,0\,0\,0\.08\)\] {
    box-shadow: 0 8px 24px #00000014;
  }

  .\[box-shadow\:inset_0_0_0_1px_var\(--oai-wb-border\)\] {
    box-shadow: inset 0 0 0 1px var(--oai-wb-border);
  }

  .\[box-shadow\:var\(--oai-wb-shadow\)\] {
    box-shadow: var(--oai-wb-shadow);
  }

  .\[box-shadow\:var\(--oai-wb-shadow-lg\)\] {
    box-shadow: var(--oai-wb-shadow-lg);
  }

  .shadow-initial {
    --tw-shadow-color: initial;
  }

  .ring-black {
    --tw-ring-color: var(--color-black);
  }

  .ring-black\/5 {
    --tw-ring-color: #0000000d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-black\/5 {
      --tw-ring-color: color-mix(in oklab, var(--color-black) 5%, transparent);
    }
  }

  .ring-orange-300 {
    --tw-ring-color: var(--color-orange-300);
  }

  .ring-transparent {
    --tw-ring-color: transparent;
  }

  .inset-shadow-initial {
    --tw-inset-shadow-color: initial;
  }

  .ring-offset-background {
    --tw-ring-offset-color: var(--background);
  }

  .outline-hidden {
    --tw-outline-style: none;
    outline-style: none;
  }

  @media (forced-colors: active) {
    .outline-hidden {
      outline-offset: 2px;
      outline: 2px solid #0000;
    }
  }

  .\[outline\:none\] {
    outline: none;
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .outline-0 {
    outline-style: var(--tw-outline-style);
    outline-width: 0;
  }

  .outline-4 {
    outline-style: var(--tw-outline-style);
    outline-width: 4px;
  }

  .outline-accent-foreground, .outline-accent-foreground\/20 {
    outline-color: var(--accent-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .outline-accent-foreground\/20 {
      outline-color: color-mix(in oklab, var(--accent-foreground) 20%, transparent);
    }
  }

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .blur\! {
    --tw-blur: blur(8px) !important;
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ) !important;
  }

  .blur-\[7px\] {
    --tw-blur: blur(7px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .blur-sm {
    --tw-blur: blur(var(--blur-sm));
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .drop-shadow {
    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, #0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, #0000000f));
    --tw-drop-shadow: drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .drop-shadow-none {
    --tw-drop-shadow:  ;
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .grayscale {
    --tw-grayscale: grayscale(100%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .invert {
    --tw-invert: invert(100%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .sepia {
    --tw-sepia: sepia(100%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .filter\! {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ) !important;
  }

  .\!backdrop-blur-none {
    --tw-backdrop-blur:     !important;
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ) !important;
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ) !important;
  }

  .backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-\[12px\] {
    --tw-backdrop-blur: blur(12px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-lg {
    --tw-backdrop-blur: blur(var(--blur-lg));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-md {
    --tw-backdrop-blur: blur(var(--blur-md));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-none {
    --tw-backdrop-blur:  ;
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-none\! {
    --tw-backdrop-blur:     !important;
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ) !important;
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ) !important;
  }

  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-xl {
    --tw-backdrop-blur: blur(var(--blur-xl));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-xs {
    --tw-backdrop-blur: blur(var(--blur-xs));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-grayscale {
    --tw-backdrop-grayscale: grayscale(100%);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-invert {
    --tw-backdrop-invert: invert(100%);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-sepia {
    --tw-backdrop-sepia: sepia(100%);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[background-color\,border-color\,box-shadow\] {
    transition-property: background-color, border-color, box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[background-color\,box-shadow\] {
    transition-property: background-color, box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[background-color\] {
    transition-property: background-color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[color\,opacity\,rotate\] {
    transition-property: color, opacity, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[height\,min-height\,max-height\] {
    transition-property: height, min-height, max-height;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[height\,width\,opacity\] {
    transition-property: height, width, opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[left\,width\,top\,bottom\] {
    transition-property: left, width, top, bottom;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[margin-inline-end\,opacity\,transform\,width\] {
    transition-property: margin-inline-end, opacity, transform, width;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[max-width\,opacity\,margin-inline-start\] {
    transition-property: max-width, opacity, margin-inline-start;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[max-width\,opacity\,transform\] {
    transition-property: max-width, opacity, transform;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[max-width\,padding-inline\,background-color\,background-size\,border-color\,color\] {
    transition-property: max-width, padding-inline, background-color, background-size, border-color, color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[opacity\,rotate\] {
    transition-property: opacity, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[opacity\,transform\] {
    transition-property: opacity, transform;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[transform\,width\] {
    transition-property: transform, width;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[width\,background-color\,border-color\,box-shadow\,opacity\] {
    transition-property: width, background-color, border-color, box-shadow, opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[width\,max-width\,opacity\,transform\] {
    transition-property: width, max-width, opacity, transform;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[width\] {
    transition-property: width;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-none {
    transition-property: none;
  }

  .transition-discrete {
    transition-behavior: allow-discrete;
  }

  .transition-normal {
    transition-behavior: normal;
  }

  .delay-0 {
    transition-delay: 0s;
  }

  .delay-150 {
    transition-delay: .15s;
  }

  .delay-300 {
    transition-delay: .3s;
  }

  .duration-0 {
    --tw-duration: 0s;
    transition-duration: 0s;
  }

  .duration-100 {
    --tw-duration: .1s;
    transition-duration: .1s;
  }

  .duration-150 {
    --tw-duration: .15s;
    transition-duration: .15s;
  }

  .duration-200 {
    --tw-duration: .2s;
    transition-duration: .2s;
  }

  .duration-300 {
    --tw-duration: .3s;
    transition-duration: .3s;
  }

  .duration-500 {
    --tw-duration: .5s;
    transition-duration: .5s;
  }

  .duration-\[140ms\] {
    --tw-duration: .14s;
    transition-duration: .14s;
  }

  .duration-\[180ms\] {
    --tw-duration: .18s;
    transition-duration: .18s;
  }

  .ease-\[cubic-bezier\(0\.2\,0\,0\,1\)\] {
    --tw-ease: cubic-bezier(.2,0,0,1);
    transition-timing-function: cubic-bezier(.2, 0, 0, 1);
  }

  .ease-\[cubic-bezier\(0\.23\,1\,0\.32\,1\)\] {
    --tw-ease: cubic-bezier(.23,1,.32,1);
    transition-timing-function: cubic-bezier(.23, 1, .32, 1);
  }

  .ease-\[ease\] {
    --tw-ease: ease;
    transition-timing-function: ease;
  }

  .ease-in {
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
  }

  .ease-in-circ {
    --tw-ease: cubic-bezier(.6, .04, .98, .335);
    transition-timing-function: cubic-bezier(.6, .04, .98, .335);
  }

  .ease-in-cubic {
    --tw-ease: cubic-bezier(.55, .055, .675, .19);
    transition-timing-function: cubic-bezier(.55, .055, .675, .19);
  }

  .ease-in-expo {
    --tw-ease: cubic-bezier(.95, .05, .795, .035);
    transition-timing-function: cubic-bezier(.95, .05, .795, .035);
  }

  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }

  .ease-in-out-circ {
    --tw-ease: cubic-bezier(.785, .135, .15, .86);
    transition-timing-function: cubic-bezier(.785, .135, .15, .86);
  }

  .ease-in-out-cubic {
    --tw-ease: cubic-bezier(.645, .045, .355, 1);
    transition-timing-function: cubic-bezier(.645, .045, .355, 1);
  }

  .ease-in-out-expo {
    --tw-ease: cubic-bezier(1, 0, 0, 1);
    transition-timing-function: cubic-bezier(1, 0, 0, 1);
  }

  .ease-in-out-quad {
    --tw-ease: cubic-bezier(.455, .03, .515, .955);
    transition-timing-function: cubic-bezier(.455, .03, .515, .955);
  }

  .ease-in-out-quart {
    --tw-ease: cubic-bezier(.77, 0, .175, 1);
    transition-timing-function: cubic-bezier(.77, 0, .175, 1);
  }

  .ease-in-out-quint {
    --tw-ease: cubic-bezier(.86, 0, .07, 1);
    transition-timing-function: cubic-bezier(.86, 0, .07, 1);
  }

  .ease-in-quad {
    --tw-ease: cubic-bezier(.55, .085, .68, .53);
    transition-timing-function: cubic-bezier(.55, .085, .68, .53);
  }

  .ease-in-quart {
    --tw-ease: cubic-bezier(.895, .03, .685, .22);
    transition-timing-function: cubic-bezier(.895, .03, .685, .22);
  }

  .ease-in-quint {
    --tw-ease: cubic-bezier(.755, .05, .855, .06);
    transition-timing-function: cubic-bezier(.755, .05, .855, .06);
  }

  .ease-linear {
    --tw-ease: linear;
    transition-timing-function: linear;
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }

  .ease-out-circ {
    --tw-ease: cubic-bezier(.075, .82, .165, 1);
    transition-timing-function: cubic-bezier(.075, .82, .165, 1);
  }

  .ease-out-cubic {
    --tw-ease: cubic-bezier(.215, .61, .355, 1);
    transition-timing-function: cubic-bezier(.215, .61, .355, 1);
  }

  .ease-out-expo {
    --tw-ease: cubic-bezier(.19, 1, .22, 1);
    transition-timing-function: cubic-bezier(.19, 1, .22, 1);
  }

  .ease-out-quad {
    --tw-ease: cubic-bezier(.25, .46, .45, .94);
    transition-timing-function: cubic-bezier(.25, .46, .45, .94);
  }

  .ease-out-quart {
    --tw-ease: cubic-bezier(.165, .84, .44, 1);
    transition-timing-function: cubic-bezier(.165, .84, .44, 1);
  }

  .ease-out-quint {
    --tw-ease: cubic-bezier(.23, 1, .32, 1);
    transition-timing-function: cubic-bezier(.23, 1, .32, 1);
  }

  .\[will-change\:background-color\,clip-path\] {
    will-change: background-color,clip-path;
  }

  .\[will-change\:max-width\,background-size\] {
    will-change: max-width,background-size;
  }

  .\[will-change\:opacity\,transform\] {
    will-change: opacity,transform;
  }

  .will-change-auto {
    will-change: auto;
  }

  .will-change-contents {
    will-change: contents;
  }

  .will-change-scroll {
    will-change: scroll-position;
  }

  .will-change-transform {
    will-change: transform;
  }

  .contain-inline-size {
    --tw-contain-size: inline-size;
    contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, );
  }

  .contain-layout {
    --tw-contain-layout: layout;
    contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, );
  }

  .contain-paint {
    --tw-contain-paint: paint;
    contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, );
  }

  .contain-size {
    --tw-contain-size: size;
    contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, );
  }

  .contain-style {
    --tw-contain-style: style;
    contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, );
  }

  .\[contain\:content\] {
    contain: content;
  }

  .\[contain\:inline-size\] {
    contain: inline-size;
  }

  .\[contain\:layout\] {
    contain: layout;
  }

  .\[contain\:layout_paint\] {
    contain: layout paint;
  }

  .contain-content {
    contain: content;
  }

  .contain-none {
    contain: none;
  }

  .contain-strict {
    contain: strict;
  }

  .content-none {
    --tw-content: none;
    content: none;
  }

  .forced-color-adjust-auto {
    forced-color-adjust: auto;
  }

  .forced-color-adjust-none {
    forced-color-adjust: none;
  }

  .delay-0 {
    --tw-animation-delay: 0s;
    animation-delay: 0s;
  }

  .delay-150 {
    --tw-animation-delay: .15s;
    animation-delay: .15s;
  }

  .delay-300 {
    --tw-animation-delay: .3s;
    animation-delay: .3s;
  }

  .\!outline-none {
    --tw-outline-style: none !important;
    outline-style: none !important;
  }

  .outline-dashed {
    --tw-outline-style: dashed;
    outline-style: dashed;
  }

  .outline-dotted {
    --tw-outline-style: dotted;
    outline-style: dotted;
  }

  .outline-double {
    --tw-outline-style: double;
    outline-style: double;
  }

  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }

  .outline-solid {
    --tw-outline-style: solid;
    outline-style: solid;
  }

  .repeat-1 {
    --tw-animation-iteration-count: 1;
    animation-iteration-count: 1;
  }

  .repeat-2 {
    --tw-animation-iteration-count: 2;
    animation-iteration-count: 2;
  }

  .select-all {
    -webkit-user-select: all;
    user-select: all;
  }

  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }

  .select-text {
    -webkit-user-select: text;
    user-select: text;
  }

  .\!\[--markdown-font-size\:var\(--text-sm\)\] {
    --markdown-font-size: var(--text-sm) !important;
  }

  .\!\[--markdown-line-height\:var\(--leading-4\)\] {
    --markdown-line-height: var(--leading-4) !important;
  }

  .\!\[--markdown-line-height\:var\(--leading-relaxed\)\] {
    --markdown-line-height: var(--leading-relaxed) !important;
  }

  .\[--codex-diffs-header-padding-x\:var\(--thread-resource-card-row-padding-x\)\] {
    --codex-diffs-header-padding-x: var(--thread-resource-card-row-padding-x);
  }

  .\[--codex-diffs-header-padding-y\:var\(--turn-diff-row-padding-y\)\] {
    --codex-diffs-header-padding-y: var(--turn-diff-row-padding-y);
  }

  .\[--codex-diffs-surface-override\:color-mix\(in_oklab\,var\(--color-token-dropdown-background\)_50\%\,transparent\)\] {
    --codex-diffs-surface-override: var(--color-token-dropdown-background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\[--codex-diffs-surface-override\:color-mix\(in_oklab\,var\(--color-token-dropdown-background\)_50\%\,transparent\)\] {
      --codex-diffs-surface-override: color-mix(in oklab,var(--color-token-dropdown-background) 50%,transparent);
    }
  }

  .\[--detail-row-font-size\:var\(--codex-chat-font-size\)\] {
    --detail-row-font-size: var(--codex-chat-font-size);
  }

  .\[--edge-fade-distance\:1\.5rem\] {
    --edge-fade-distance: 1.5rem;
  }

  .\[--edge-fade-distance\:1rem\] {
    --edge-fade-distance: 1rem;
  }

  .\[--edge-fade-distance\:2\.5rem\] {
    --edge-fade-distance: 2.5rem;
  }

  .\[--edge-fade-distance\:2rem\] {
    --edge-fade-distance: 2rem;
  }

  .\[--inline-mention-base-color\:color-mix\(in_srgb\,var\(--color-token-text-link-foreground\)_80\%\,var\(--color-token-foreground\)_20\%\)\] {
    --inline-mention-base-color: var(--color-token-text-link-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\[--inline-mention-base-color\:color-mix\(in_srgb\,var\(--color-token-text-link-foreground\)_80\%\,var\(--color-token-foreground\)_20\%\)\] {
      --inline-mention-base-color: color-mix(in srgb,var(--color-token-text-link-foreground) 80%,var(--color-token-foreground) 20%);
    }
  }

  .\[--inline-mention-color\:var\(--inline-mention-resolved-base-color\,var\(--inline-mention-base-color\)\)\] {
    --inline-mention-color: var(--inline-mention-resolved-base-color, var(--inline-mention-base-color));
  }

  .\[--markdown-wide-block-max-width\:100\%\] {
    --markdown-wide-block-max-width: 100%;
  }

  .\[--padding-panel\:calc\(var\(--padding-panel-base\)\/2\)\] {
    --padding-panel: calc(var(--padding-panel-base) / 2);
  }

  .\[--padding-toolbar\:calc\(var\(--spacing\)\*2\)\] {
    --padding-toolbar: calc(var(--spacing) * 2);
  }

  .\[--pr-status-dot-color\:var\(--color-token-charts-green\)\] {
    --pr-status-dot-color: var(--color-token-charts-green);
  }

  .\[--pr-status-dot-color\:var\(--color-token-charts-red\)\] {
    --pr-status-dot-color: var(--color-token-charts-red);
  }

  .\[--pr-status-dot-color\:var\(--color-token-charts-yellow\)\] {
    --pr-status-dot-color: var(--color-token-charts-yellow);
  }

  .\[--pricing-plan-highlight\:\#635ef4\] {
    --pricing-plan-highlight: #635ef4;
  }

  .\[--rolling-number-y-offset\:0px\] {
    --rolling-number-y-offset: 0px;
  }

  .\[--task-row-trailing-inset\:calc\(var\(--spacing\)\*1\.5\)\] {
    --task-row-trailing-inset: calc(var(--spacing) * 1.5);
  }

  .\[--thread-content-max-width\:100\%\] {
    --thread-content-max-width: 100%;
  }

  .\[--thread-content-top-inset\:calc\(var\(--spacing\)\*8\)\] {
    --thread-content-top-inset: calc(var(--spacing) * 8);
  }

  .\[--thread-resource-card-row-padding-x\:0\.75rem\] {
    --thread-resource-card-row-padding-x: .75rem;
  }

  .\[--turn-diff-row-padding-y\:0\.25rem\] {
    --turn-diff-row-padding-y: .25rem;
  }

  .\[--wb-accent\:var\(--color-token-text-link-foreground\,var\(--color-token-text-primary\)\)\] {
    --wb-accent: var(--color-token-text-link-foreground, var(--color-token-text-primary));
  }

  .\[--wb-border-hover\:var\(--color-token-border-default\)\] {
    --wb-border-hover: var(--color-token-border-default);
  }

  .\[--wb-border\:var\(--color-token-border\)\] {
    --wb-border: var(--color-token-border);
  }

  .\[--wb-divider\:var\(--color-token-border-light\)\] {
    --wb-divider: var(--color-token-border-light);
  }

  .\[--wb-focus\:var\(--color-token-focus-border\)\] {
    --wb-focus: var(--color-token-focus-border);
  }

  .\[--wb-font-mono\:var\(--font-mono\)\] {
    --wb-font-mono: var(--font-mono);
  }

  .\[--wb-font-sans\:var\(--font-sans\)\] {
    --wb-font-sans: var(--font-sans);
  }

  .\[--wb-font-size\:var\(--codex-chat-font-size\,0\.875rem\)\] {
    --wb-font-size: var(--codex-chat-font-size, .875rem);
  }

  .\[--wb-interactive-background\:var\(--color-token-list-hover-background\)\] {
    --wb-interactive-background: var(--color-token-list-hover-background);
  }

  .\[--wb-on-accent\:var\(--color-token-on-accent\,var\(--color-token-button-foreground\,\#fff\)\)\] {
    --wb-on-accent: var(--color-token-on-accent, var(--color-token-button-foreground, #fff));
  }

  .\[--wb-radius-sm\:var\(--radius-sm\)\] {
    --wb-radius-sm: var(--radius-sm);
  }

  .\[--wb-radius\:var\(--radius-lg\)\] {
    --wb-radius: var(--radius-lg);
  }

  .\[--wb-selection\:var\(--color-token-editor-selection-background\,\#93c5fd\)\] {
    --wb-selection: var(--color-token-editor-selection-background, #93c5fd);
  }

  .\[--wb-shadow-lg\:var\(--shadow-lg\)\] {
    --wb-shadow-lg: var(--shadow-lg);
  }

  .\[--wb-shadow\:var\(--shadow-md-stronger\)\] {
    --wb-shadow: var(--shadow-md-stronger);
  }

  .\[--wb-surface-primary\:color-mix\(in_srgb\,var\(--color-token-dropdown-background\)_86\%\,var\(--color-token-main-surface-primary\)\)\] {
    --wb-surface-primary: var(--color-token-dropdown-background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\[--wb-surface-primary\:color-mix\(in_srgb\,var\(--color-token-dropdown-background\)_86\%\,var\(--color-token-main-surface-primary\)\)\] {
      --wb-surface-primary: color-mix(in srgb,var(--color-token-dropdown-background) 86%,var(--color-token-main-surface-primary));
    }
  }

  .\[--wb-surface-primary\:transparent\] {
    --wb-surface-primary: transparent;
  }

  .\[--wb-surface-secondary\:var\(--color-token-list-hover-background\)\] {
    --wb-surface-secondary: var(--color-token-list-hover-background);
  }

  .\[--wb-text-primary\:var\(--color-token-text-primary\)\] {
    --wb-text-primary: var(--color-token-text-primary);
  }

  .\[--wb-text-secondary\:var\(--color-token-description-foreground\)\] {
    --wb-text-secondary: var(--color-token-description-foreground);
  }

  .\[--wb-text-tertiary\:var\(--color-token-text-tertiary\)\] {
    --wb-text-tertiary: var(--color-token-text-tertiary);
  }

  .\[-webkit-mask-image\:linear-gradient\(to_right\,black_calc\(100\%_-_16px\)\,transparent\)\] {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 16px), #0000);
  }

  .\[abi\:nn210108\] {
    abi: nn210108;
  }

  .\[animation-direction\:reverse\] {
    animation-direction: reverse;
  }

  .\[background\:transparent\] {
    background: none;
  }

  .\[background\:var\(--oai-wb-interactive-secondary-hover\)\] {
    background: var(--oai-wb-interactive-secondary-hover);
  }

  .\[background\:var\(--oai-wb-surface-primary\)\] {
    background: var(--oai-wb-surface-primary);
  }

  .\[background\:var\(--oai-wb-surface-secondary\)\] {
    background: var(--oai-wb-surface-secondary);
  }

  .\[border-bottom\:1px_solid_var\(--oai-wb-divider\)\] {
    border-bottom: 1px solid var(--oai-wb-divider);
  }

  .\[border-top\:1px_solid_var\(--oai-wb-divider\)\] {
    border-top: 1px solid var(--oai-wb-divider);
  }

  .\[border\:1px_solid_var\(--oai-wb-divider\)\] {
    border: 1px solid var(--oai-wb-divider);
  }

  .\[contain-intrinsic-size\:auto_36px\] {
    contain-intrinsic-size: auto 36px;
  }

  .\[contain-intrinsic-size\:auto_240px\] {
    contain-intrinsic-size: auto 240px;
  }

  .\[container-name\:thread-content\] {
    container-name: thread-content;
  }

  .\[content-visibility\:auto\] {
    content-visibility: auto;
  }

  .\[content-visibility\:visible\] {
    content-visibility: visible;
  }

  .\[direction\:ltr\] {
    direction: ltr;
  }

  .\[direction\:rtl\] {
    direction: rtl;
  }

  .\[font-variant\:inherit\] {
    font-variant: inherit;
  }

  .\[font\:inherit\] {
    font: inherit;
  }

  .\[hash\:10\] {
    hash: 10;
  }

  .\[overflow-anchor\:none\] {
    overflow-anchor: none;
  }

  .\[text-decoration-skip-ink\:none\] {
    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none;
  }

  .\[unicode-bidi\:plaintext\] {
    unicode-bidi: plaintext;
  }

  .\[vite\:html\] {
    vite: html;
  }

  .backface-hidden {
    backface-visibility: hidden;
  }

  .backface-visible {
    backface-visibility: visible;
  }

  .block-1 {
    block-size: var(--spacing);
  }

  .block-3 {
    block-size: calc(var(--spacing) * 3);
  }

  .block-4 {
    block-size: calc(var(--spacing) * 4);
  }

  .block-10 {
    block-size: calc(var(--spacing) * 10);
  }

  .block-11 {
    block-size: calc(var(--spacing) * 11);
  }

  .block-12 {
    block-size: calc(var(--spacing) * 12);
  }

  .block-13 {
    block-size: calc(var(--spacing) * 13);
  }

  .block-15 {
    block-size: calc(var(--spacing) * 15);
  }

  .block-25 {
    block-size: calc(var(--spacing) * 25);
  }

  .block-30 {
    block-size: calc(var(--spacing) * 30);
  }

  .block-39 {
    block-size: calc(var(--spacing) * 39);
  }

  .block-41 {
    block-size: calc(var(--spacing) * 41);
  }

  .block-60 {
    block-size: calc(var(--spacing) * 60);
  }

  .block-74 {
    block-size: calc(var(--spacing) * 74);
  }

  .block-85 {
    block-size: calc(var(--spacing) * 85);
  }

  .block-87 {
    block-size: calc(var(--spacing) * 87);
  }

  .block-95 {
    block-size: calc(var(--spacing) * 95);
  }

  .block-100 {
    block-size: calc(var(--spacing) * 100);
  }

  .block-101 {
    block-size: calc(var(--spacing) * 101);
  }

  .block-106 {
    block-size: calc(var(--spacing) * 106);
  }

  .block-111 {
    block-size: calc(var(--spacing) * 111);
  }

  .block-112 {
    block-size: calc(var(--spacing) * 112);
  }

  .block-auto {
    block-size: auto;
  }

  .block-lh {
    block-size: 1lh;
  }

  .block-screen {
    block-size: 100vh;
  }

  .blur-in {
    --tw-enter-blur: 20px;
  }

  .blur-in-\[\<value\>\] {
    --tw-enter-blur: <value>;
  }

  .blur-out {
    --tw-exit-blur: 20px;
  }

  .blur-out-\[\<value\>\] {
    --tw-exit-blur: <value>;
  }

  :where(.divide-x-reverse > :not(:last-child)) {
    --tw-divide-x-reverse: 1;
  }

  .duration-initial {
    --tw-duration: initial;
  }

  .fade-in {
    --tw-enter-opacity: 0;
  }

  .fade-out {
    --tw-exit-opacity: 0;
  }

  .inline-auto {
    inline-size: auto;
  }

  .inline-screen {
    inline-size: 100vw;
  }

  .max-block-lh {
    max-block-size: 1lh;
  }

  .max-block-none {
    max-block-size: none;
  }

  .max-block-screen {
    max-block-size: 100vh;
  }

  .max-inline-none {
    max-inline-size: none;
  }

  .max-inline-screen {
    max-inline-size: 100vw;
  }

  .min-block-auto {
    min-block-size: auto;
  }

  .min-block-lh {
    min-block-size: 1lh;
  }

  .min-block-screen {
    min-block-size: 100vh;
  }

  .min-inline-auto {
    min-inline-size: auto;
  }

  .min-inline-screen {
    min-inline-size: 100vw;
  }

  .no-highlight {
    -webkit-tap-highlight-color: transparent;
  }

  .paused {
    animation-play-state: paused;
  }

  .ring-inset {
    --tw-ring-inset: inset;
  }

  .running {
    animation-play-state: running;
  }

  .slide-in-from-bottom {
    --tw-enter-translate-y: 100%;
  }

  .slide-in-from-top-8 {
    --tw-enter-translate-y: calc(8*var(--spacing)*-1);
  }

  .slide-out-to-left {
    --tw-exit-translate-x: -100%;
  }

  .slide-out-to-top {
    --tw-exit-translate-y: -100%;
  }

  .slide-out-to-top-8 {
    --tw-exit-translate-y: calc(8*var(--spacing)*-1);
  }

  .text-shadow-initial {
    --tw-text-shadow-color: initial;
  }

  .transform-3d {
    transform-style: preserve-3d;
  }

  .transform-border {
    transform-box: border-box;
  }

  .transform-content {
    transform-box: content-box;
  }

  .transform-fill {
    transform-box: fill-box;
  }

  .transform-flat {
    transform-style: flat;
  }

  .transform-stroke {
    transform-box: stroke-box;
  }

  .transform-view {
    transform-box: view-box;
  }

  .zoom-in {
    --tw-enter-scale: 0;
  }

  .zoom-out {
    --tw-exit-scale: 0;
  }

  .group-open\:rotate-90:is(:where(.group):is([open], :popover-open, :open) *) {
    rotate: 90deg;
  }

  .group-focus-within\:pointer-events-auto:is(:where(.group):focus-within *) {
    pointer-events: auto;
  }

  .group-focus-within\:visible:is(:where(.group):focus-within *) {
    visibility: visible;
  }

  .group-focus-within\:hidden:is(:where(.group):focus-within *) {
    display: none;
  }

  .group-focus-within\:min-w-5:is(:where(.group):focus-within *) {
    min-width: calc(var(--spacing) * 5);
  }

  .group-focus-within\:min-w-12:is(:where(.group):focus-within *) {
    min-width: calc(var(--spacing) * 12);
  }

  .group-focus-within\:min-w-20:is(:where(.group):focus-within *) {
    min-width: calc(var(--spacing) * 20);
  }

  .group-focus-within\:min-w-\[36px\]:is(:where(.group):focus-within *) {
    min-width: 36px;
  }

  .group-focus-within\:border-accent-foreground\/20:is(:where(.group):focus-within *) {
    border-color: var(--accent-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .group-focus-within\:border-accent-foreground\/20:is(:where(.group):focus-within *) {
      border-color: color-mix(in oklab, var(--accent-foreground) 20%, transparent);
    }
  }

  .group-focus-within\:opacity-0:is(:where(.group):focus-within *) {
    opacity: 0;
  }

  .group-focus-within\:opacity-100:is(:where(.group):focus-within *), .group-focus-within\/address-bar\:opacity-100:is(:where(.group\/address-bar):focus-within *) {
    opacity: 1;
  }

  .group-focus-within\/address-bar\:delay-0:is(:where(.group\/address-bar):focus-within *) {
    --tw-animation-delay: 0s;
    transition-delay: 0s;
    animation-delay: 0s;
  }

  .group-focus-within\/comment\:opacity-100:is(:where(.group\/comment):focus-within *) {
    opacity: 1;
  }

  .group-focus-within\/generated-image-gallery-controls\:pointer-events-auto:is(:where(.group\/generated-image-gallery-controls):focus-within *) {
    pointer-events: auto;
  }

  .group-focus-within\/generated-image-gallery-controls\:opacity-0:is(:where(.group\/generated-image-gallery-controls):focus-within *) {
    opacity: 0;
  }

  .group-focus-within\/generated-image-gallery-controls\:opacity-100:is(:where(.group\/generated-image-gallery-controls):focus-within *) {
    opacity: 1;
  }

  .group-focus-within\/generated-image-preview\:pointer-events-auto:is(:where(.group\/generated-image-preview):focus-within *) {
    pointer-events: auto;
  }

  .group-focus-within\/generated-image-preview\:opacity-100:is(:where(.group\/generated-image-preview):focus-within *) {
    opacity: 1;
  }

  .group-focus-within\/pdf-preview\:pointer-events-auto:is(:where(.group\/pdf-preview):focus-within *) {
    pointer-events: auto;
  }

  .group-focus-within\/pdf-preview\:opacity-100:is(:where(.group\/pdf-preview):focus-within *) {
    opacity: 1;
  }

  .group-focus-within\/referral\:\!pointer-events-auto:is(:where(.group\/referral):focus-within *) {
    pointer-events: auto !important;
  }

  .group-focus-within\/referral\:\!opacity-0:is(:where(.group\/referral):focus-within *) {
    opacity: 0 !important;
  }

  .group-focus-within\/referral\:\!opacity-100:is(:where(.group\/referral):focus-within *) {
    opacity: 1 !important;
  }

  .group-focus-within\/response-annotation\:pointer-events-auto:is(:where(.group\/response-annotation):focus-within *) {
    pointer-events: auto;
  }

  .group-focus-within\/response-annotation\:opacity-100:is(:where(.group\/response-annotation):focus-within *) {
    opacity: 1;
  }

  .group-focus-within\/summary-panel-item\:pointer-events-auto:is(:where(.group\/summary-panel-item):focus-within *) {
    pointer-events: auto;
  }

  .group-focus-within\/summary-panel-item\:opacity-100:is(:where(.group\/summary-panel-item):focus-within *) {
    opacity: 1;
  }

  .group-focus-within\/tab\:pointer-events-auto:is(:where(.group\/tab):focus-within *) {
    pointer-events: auto;
  }

  .group-focus-within\/tab\:pe-3\.5:is(:where(.group\/tab):focus-within *) {
    padding-inline-end: calc(var(--spacing) * 3.5);
  }

  .group-focus-within\/tab\:opacity-100:is(:where(.group\/tab):focus-within *) {
    opacity: 1;
  }

  @media (hover: hover) {
    .group-hover\:pointer-events-auto:is(:where(.group):hover *) {
      pointer-events: auto;
    }

    .group-hover\:invisible:is(:where(.group):hover *) {
      visibility: hidden;
    }

    .group-hover\:visible:is(:where(.group):hover *) {
      visibility: visible;
    }

    .group-hover\:block:is(:where(.group):hover *) {
      display: block;
    }

    .group-hover\:hidden:is(:where(.group):hover *) {
      display: none;
    }

    .group-hover\:inline:is(:where(.group):hover *) {
      display: inline;
    }

    .group-hover\:min-w-5:is(:where(.group):hover *) {
      min-width: calc(var(--spacing) * 5);
    }

    .group-hover\:min-w-12:is(:where(.group):hover *) {
      min-width: calc(var(--spacing) * 12);
    }

    .group-hover\:min-w-20:is(:where(.group):hover *) {
      min-width: calc(var(--spacing) * 20);
    }

    .group-hover\:min-w-\[36px\]:is(:where(.group):hover *) {
      min-width: 36px;
    }

    .group-hover\:border-accent-foreground\/20:is(:where(.group):hover *) {
      border-color: var(--accent-foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\:border-accent-foreground\/20:is(:where(.group):hover *) {
        border-color: color-mix(in oklab, var(--accent-foreground) 20%, transparent);
      }
    }

    .group-hover\:opacity-0:is(:where(.group):hover *) {
      opacity: 0;
    }

    .group-hover\:opacity-100:is(:where(.group):hover *), .group-hover\/address-bar\:opacity-100:is(:where(.group\/address-bar):hover *) {
      opacity: 1;
    }

    .group-hover\/address-bar\:delay-75:is(:where(.group\/address-bar):hover *) {
      --tw-animation-delay: 75ms;
      transition-delay: 75ms;
      animation-delay: 75ms;
    }

    .group-hover\/appshot\:pointer-events-auto:is(:where(.group\/appshot):hover *) {
      pointer-events: auto;
    }

    .group-hover\/appshot\:opacity-100:is(:where(.group\/appshot):hover *), .group-hover\/automatic-approval-review\:opacity-100:is(:where(.group\/automatic-approval-review):hover *), .group-hover\/command\:opacity-100:is(:where(.group\/command):hover *), .group-hover\/comment\:opacity-100:is(:where(.group\/comment):hover *), .group-hover\/diff-header\:opacity-100:is(:where(.group\/diff-header):hover *), .group-hover\/email\:opacity-100:is(:where(.group\/email):hover *) {
      opacity: 1;
    }

    .group-hover\/file-diff\:pointer-events-auto:is(:where(.group\/file-diff):hover *) {
      pointer-events: auto;
    }

    .group-hover\/file-diff\:opacity-100:is(:where(.group\/file-diff):hover *) {
      opacity: 1;
    }

    .group-hover\/generated-image-gallery-controls\:pointer-events-auto:is(:where(.group\/generated-image-gallery-controls):hover *) {
      pointer-events: auto;
    }

    .group-hover\/generated-image-gallery-controls\:opacity-0:is(:where(.group\/generated-image-gallery-controls):hover *) {
      opacity: 0;
    }

    .group-hover\/generated-image-gallery-controls\:opacity-100:is(:where(.group\/generated-image-gallery-controls):hover *) {
      opacity: 1;
    }

    .group-hover\/generated-image-preview\:pointer-events-auto:is(:where(.group\/generated-image-preview):hover *) {
      pointer-events: auto;
    }

    .group-hover\/generated-image-preview\:opacity-100:is(:where(.group\/generated-image-preview):hover *) {
      opacity: 1;
    }

    .group-hover\/inline-mention\:underline:is(:where(.group\/inline-mention):hover *) {
      text-decoration-line: underline;
    }

    .group-hover\/inline-mention\:decoration-current:is(:where(.group\/inline-mention):hover *) {
      text-decoration-color: currentColor;
    }

    .group-hover\/inline-mention\:decoration-dashed:is(:where(.group\/inline-mention):hover *) {
      text-decoration-style: dashed;
    }

    .group-hover\/inline-mention\:decoration-\[0\.5px\]:is(:where(.group\/inline-mention):hover *) {
      text-decoration-thickness: .5px;
    }

    .group-hover\/inline-mention\:underline-offset-2:is(:where(.group\/inline-mention):hover *) {
      text-underline-offset: 2px;
    }

    .group-hover\/navigation-row\:opacity-100:is(:where(.group\/navigation-row):hover *), .group-hover\/output\:opacity-100:is(:where(.group\/output):hover *) {
      opacity: 1;
    }

    .group-hover\/pdf-preview\:pointer-events-auto:is(:where(.group\/pdf-preview):hover *) {
      pointer-events: auto;
    }

    .group-hover\/pdf-preview\:opacity-100:is(:where(.group\/pdf-preview):hover *) {
      opacity: 1;
    }

    .group-hover\/project-selector\:pointer-events-auto:is(:where(.group\/project-selector):hover *) {
      pointer-events: auto;
    }

    .group-hover\/project-selector\:opacity-100:is(:where(.group\/project-selector):hover *) {
      opacity: 1;
    }

    .group-hover\/referral\:\!pointer-events-auto:is(:where(.group\/referral):hover *) {
      pointer-events: auto !important;
    }

    .group-hover\/referral\:\!opacity-0:is(:where(.group\/referral):hover *) {
      opacity: 0 !important;
    }

    .group-hover\/referral\:\!opacity-100:is(:where(.group\/referral):hover *) {
      opacity: 1 !important;
    }

    .group-hover\/remove\:bg-\[color-mix\(in_srgb\,var\(--color-token-menu-background\)_88\%\,var\(--color-token-foreground\)\)\]:is(:where(.group\/remove):hover *) {
      background-color: var(--color-token-menu-background);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\/remove\:bg-\[color-mix\(in_srgb\,var\(--color-token-menu-background\)_88\%\,var\(--color-token-foreground\)\)\]:is(:where(.group\/remove):hover *) {
        background-color: color-mix(in srgb,var(--color-token-menu-background) 88%,var(--color-token-foreground));
      }
    }

    .group-hover\/response-annotation\:pointer-events-auto:is(:where(.group\/response-annotation):hover *) {
      pointer-events: auto;
    }

    .group-hover\/response-annotation\:opacity-100:is(:where(.group\/response-annotation):hover *), .group-hover\/section-toggle\:opacity-100:is(:where(.group\/section-toggle):hover *) {
      opacity: 1;
    }

    .group-hover\/summary-panel-item\:pointer-events-auto:is(:where(.group\/summary-panel-item):hover *) {
      pointer-events: auto;
    }

    .group-hover\/summary-panel-item\:opacity-100:is(:where(.group\/summary-panel-item):hover *) {
      opacity: 1;
    }

    .group-hover\/tab\:pointer-events-auto:is(:where(.group\/tab):hover *) {
      pointer-events: auto;
    }

    .group-hover\/tab\:visible:is(:where(.group\/tab):hover *) {
      visibility: visible;
    }

    .group-hover\/tab\:w-7:is(:where(.group\/tab):hover *) {
      width: calc(var(--spacing) * 7);
    }

    .group-hover\/tab\:bg-\[var\(--app-shell-tab-background\)\]:is(:where(.group\/tab):hover *) {
      background-color: var(--app-shell-tab-background);
    }

    .group-hover\/tab\:to-\[var\(--app-shell-tab-background\)\]:is(:where(.group\/tab):hover *) {
      --tw-gradient-to: var(--app-shell-tab-background);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }

    .group-hover\/tab\:to-40\%:is(:where(.group\/tab):hover *) {
      --tw-gradient-to-position: 40%;
    }

    .group-hover\/tab\:pe-3\.5:is(:where(.group\/tab):hover *) {
      padding-inline-end: calc(var(--spacing) * 3.5);
    }

    .group-hover\/tab\:opacity-0:is(:where(.group\/tab):hover *) {
      opacity: 0;
    }

    .group-hover\/tab\:opacity-100:is(:where(.group\/tab):hover *) {
      opacity: 1;
    }

    .group-hover\/template-card\:pointer-events-auto:is(:where(.group\/template-card):hover *) {
      pointer-events: auto;
    }

    .group-hover\/template-card\:opacity-100:is(:where(.group\/template-card):hover *) {
      opacity: 1;
    }

    .group-hover\/writing-block-surface\:\[box-shadow\:inset_0_0_0_1px_var\(--oai-wb-border-hover\)\]:is(:where(.group\/writing-block-surface):hover *) {
      box-shadow: inset 0 0 0 1px var(--oai-wb-border-hover);
    }
  }

  .group-focus\:opacity-100:is(:where(.group):focus *) {
    opacity: 1;
  }

  .group-focus-visible\:block:is(:where(.group):focus-visible *) {
    display: block;
  }

  .group-focus-visible\:hidden:is(:where(.group):focus-visible *) {
    display: none;
  }

  .group-focus-visible\:opacity-100:is(:where(.group):focus-visible *), .group-focus-visible\/activity-header\:opacity-100:is(:where(.group\/activity-header):focus-visible *), .group-focus-visible\/navigation-row\:opacity-100:is(:where(.group\/navigation-row):focus-visible *) {
    opacity: 1;
  }

  .group-focus-visible\/remove\:bg-\[color-mix\(in_srgb\,var\(--color-token-menu-background\)_88\%\,var\(--color-token-foreground\)\)\]:is(:where(.group\/remove):focus-visible *) {
    background-color: var(--color-token-menu-background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .group-focus-visible\/remove\:bg-\[color-mix\(in_srgb\,var\(--color-token-menu-background\)_88\%\,var\(--color-token-foreground\)\)\]:is(:where(.group\/remove):focus-visible *) {
      background-color: color-mix(in srgb,var(--color-token-menu-background) 88%,var(--color-token-foreground));
    }
  }

  .group-focus-visible\/section-toggle\:opacity-100:is(:where(.group\/section-toggle):focus-visible *) {
    opacity: 1;
  }

  .group-focus-visible\/status-pill\:invisible:is(:where(.group\/status-pill):focus-visible *) {
    visibility: hidden;
  }

  .group-focus-visible\/status-pill\:visible:is(:where(.group\/status-pill):focus-visible *) {
    visibility: visible;
  }

  .group-focus-visible\/summary-panel-item\:opacity-100:is(:where(.group\/summary-panel-item):focus-visible *), .group-active\:opacity-100:is(:where(.group):active *) {
    opacity: 1;
  }

  .group-has-\[\:focus-visible\]\:hidden:is(:where(.group):has(:focus-visible) *) {
    display: none;
  }

  .group-has-\[\:focus-visible\]\:min-w-5:is(:where(.group):has(:focus-visible) *) {
    min-width: calc(var(--spacing) * 5);
  }

  .group-has-\[\:focus-visible\]\:min-w-12:is(:where(.group):has(:focus-visible) *) {
    min-width: calc(var(--spacing) * 12);
  }

  .group-has-\[\:focus-visible\]\:min-w-20:is(:where(.group):has(:focus-visible) *) {
    min-width: calc(var(--spacing) * 20);
  }

  .group-has-\[\:focus-visible\]\:min-w-\[36px\]:is(:where(.group):has(:focus-visible) *) {
    min-width: 36px;
  }

  .group-has-\[\:focus-visible\]\/activity-header\:opacity-100:is(:where(.group\/activity-header):has(:focus-visible) *), .group-has-\[\:focus-visible\]\/diff-header\:opacity-100:is(:where(.group\/diff-header):has(:focus-visible) *) {
    opacity: 1;
  }

  .group-has-\[\[data-in-progress-fixed-content\]\]\/realtime-voice-thread\:bottom-12:is(:where(.group\/realtime-voice-thread):has([data-in-progress-fixed-content]) *) {
    bottom: calc(var(--spacing) * 12);
  }

  .group-has-\[input\[data-input-otp-placeholder-shown\]\]\:opacity-20:is(:where(.group):has(:is(input[data-input-otp-placeholder-shown])) *) {
    opacity: .2;
  }

  .group-aria-\[selected\=true\]\:visible:is(:where(.group)[aria-selected="true"] *) {
    visibility: visible;
  }

  .group-aria-\[selected\=true\]\:opacity-100:is(:where(.group)[aria-selected="true"] *) {
    opacity: 1;
  }

  .group-data-\[can-scroll-down\=true\]\:block:is(:where(.group)[data-can-scroll-down="true"] *) {
    display: block;
  }

  .group-data-\[can-scroll-down\=true\]\:pb-3:is(:where(.group)[data-can-scroll-down="true"] *) {
    padding-bottom: calc(var(--spacing) * 3);
  }

  .group-data-\[can-scroll-down\=true\]\:pb-6:is(:where(.group)[data-can-scroll-down="true"] *) {
    padding-bottom: calc(var(--spacing) * 6);
  }

  .group-data-\[can-scroll-down\=true\]\:pb-7:is(:where(.group)[data-can-scroll-down="true"] *) {
    padding-bottom: calc(var(--spacing) * 7);
  }

  .group-data-\[selected\=true\]\:visible:is(:where(.group)[data-selected="true"] *) {
    visibility: visible;
  }

  .group-\[\:not\(\:hover\)\:not\(\:focus-within\)\]\:pointer-events-none:is(:where(.group):not(:hover):not(:focus-within) *) {
    pointer-events: none;
  }

  .group-\[\:not\(\:hover\)\:not\(\:focus-within\)\]\:opacity-0:is(:where(.group):not(:hover):not(:focus-within) *) {
    opacity: 0;
  }

  .peer-focus-visible\:ring-1:is(:where(.peer):focus-visible ~ *) {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .marker\:hidden ::marker {
    display: none;
  }

  .marker\:hidden::marker {
    display: none;
  }

  .marker\:hidden ::-webkit-details-marker {
    display: none;
  }

  .marker\:hidden::-webkit-details-marker {
    display: none;
  }

  .placeholder\:\[color\:var\(--oai-wb-text-tertiary\)\]::placeholder {
    color: var(--oai-wb-text-tertiary);
  }

  .placeholder\:text-field-placeholder::placeholder {
    color: var(--field-placeholder, var(--muted));
  }

  .placeholder\:text-transparent::placeholder {
    color: #0000;
  }

  .before\:pointer-events-none:before {
    content: var(--tw-content);
    pointer-events: none;
  }

  .before\:absolute:before {
    content: var(--tw-content);
    position: absolute;
  }

  .before\:-inset-x-2:before {
    content: var(--tw-content);
    inset-inline: calc(var(--spacing) * -2);
  }

  .before\:inset-y-0:before {
    content: var(--tw-content);
    inset-block: 0;
  }

  .before\:inset-y-2:before {
    content: var(--tw-content);
    inset-block: calc(var(--spacing) * 2);
  }

  .before\:start-0:before {
    content: var(--tw-content);
    inset-inline-start: calc(var(--spacing) * 0);
  }

  .before\:\!top-3\.5:before {
    content: var(--tw-content);
    top: calc(var(--spacing) * 3.5) !important;
  }

  .before\:\!top-4:before {
    content: var(--tw-content);
    top: calc(var(--spacing) * 4) !important;
  }

  .before\:top-1\/2:before {
    content: var(--tw-content);
    top: 50%;
  }

  .before\:top-4:before {
    content: var(--tw-content);
    top: calc(var(--spacing) * 4);
  }

  .before\:\!right-\[-5px\]:before {
    content: var(--tw-content);
    right: -5px !important;
  }

  .before\:\!right-auto:before {
    content: var(--tw-content);
    right: auto !important;
  }

  .before\:right-0:before {
    content: var(--tw-content);
    right: 0;
  }

  .before\:\!left-\[-5px\]:before {
    content: var(--tw-content);
    left: -5px !important;
  }

  .before\:\!left-auto:before {
    content: var(--tw-content);
    left: auto !important;
  }

  .before\:-left-1\.5:before {
    content: var(--tw-content);
    left: calc(var(--spacing) * -1.5);
  }

  .before\:-left-4:before {
    content: var(--tw-content);
    left: calc(var(--spacing) * -4);
  }

  .before\:-left-8:before {
    content: var(--tw-content);
    left: calc(var(--spacing) * -8);
  }

  .before\:-z-10:before {
    content: var(--tw-content);
    z-index: calc(10 * -1);
  }

  .before\:h-3:before {
    content: var(--tw-content);
    height: calc(var(--spacing) * 3);
  }

  .before\:w-0\.5:before {
    content: var(--tw-content);
    width: calc(var(--spacing) * .5);
  }

  .before\:w-1:before {
    content: var(--tw-content);
    width: var(--spacing);
  }

  .before\:w-3:before {
    content: var(--tw-content);
    width: calc(var(--spacing) * 3);
  }

  .before\:w-4:before {
    content: var(--tw-content);
    width: calc(var(--spacing) * 4);
  }

  .before\:\!translate-y-0:before {
    content: var(--tw-content);
    --tw-translate-y: 0px !important;
    translate: var(--tw-translate-x) var(--tw-translate-y) !important;
  }

  .before\:-translate-y-1\/2:before {
    content: var(--tw-content);
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .before\:translate-y-0:before {
    content: var(--tw-content);
    --tw-translate-y: 0px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .before\:rotate-45:before {
    content: var(--tw-content);
    rotate: 45deg;
  }

  .before\:rounded-\[1px\]:before {
    content: var(--tw-content);
    border-radius: 1px;
  }

  .before\:rounded-sm:before {
    content: var(--tw-content);
    border-radius: calc(var(--radius) * .5);
  }

  .before\:bg-linear-to-r:before {
    content: var(--tw-content);
    --tw-gradient-position: to right;
  }

  @supports (background-image: linear-gradient(in lab, red, red)) {
    .before\:bg-linear-to-r:before {
      --tw-gradient-position: to right in oklab;
    }
  }

  .before\:bg-linear-to-r:before {
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .before\:from-transparent:before {
    content: var(--tw-content);
    --tw-gradient-from: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .before\:content-\[\'\'\]:before {
    --tw-content: "";
    content: var(--tw-content);
  }

  .before\:content-\[\'Reklama\'\]:before {
    --tw-content: "Reklama";
    content: var(--tw-content);
  }

  .before\:content-\[\'—\'\]:before {
    --tw-content: "—";
    content: var(--tw-content);
  }

  .after\:pointer-events-none:after {
    content: var(--tw-content);
    pointer-events: none;
  }

  .after\:absolute:after {
    content: var(--tw-content);
    position: absolute;
  }

  .after\:inset-0:after {
    content: var(--tw-content);
    inset: 0;
  }

  .after\:inset-x-3\.5:after {
    content: var(--tw-content);
    inset-inline: calc(var(--spacing) * 3.5);
  }

  .after\:inset-y-0:after {
    content: var(--tw-content);
    inset-block: 0;
  }

  .after\:start-0:after {
    content: var(--tw-content);
    inset-inline-start: calc(var(--spacing) * 0);
  }

  .after\:end-0:after {
    content: var(--tw-content);
    inset-inline-end: calc(var(--spacing) * 0);
  }

  .after\:top-0:after {
    content: var(--tw-content);
    top: 0;
  }

  .after\:top-full:after {
    content: var(--tw-content);
    top: 100%;
  }

  .after\:right-0:after {
    content: var(--tw-content);
    right: 0;
  }

  .after\:bottom-0:after {
    content: var(--tw-content);
    bottom: 0;
  }

  .after\:left-0:after {
    content: var(--tw-content);
    left: 0;
  }

  .after\:z-20:after {
    content: var(--tw-content);
    z-index: 20;
  }

  .after\:h-6:after {
    content: var(--tw-content);
    height: calc(var(--spacing) * 6);
  }

  .after\:h-8:after {
    content: var(--tw-content);
    height: calc(var(--spacing) * 8);
  }

  .after\:h-\[0\.5px\]:after {
    content: var(--tw-content);
    height: .5px;
  }

  .after\:w-10:after {
    content: var(--tw-content);
    width: calc(var(--spacing) * 10);
  }

  .after\:rounded-lg:after {
    content: var(--tw-content);
    border-radius: calc(var(--radius) * 1);
  }

  .after\:border:after {
    content: var(--tw-content);
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .after\:bg-linear-to-b:after {
    content: var(--tw-content);
    --tw-gradient-position: to bottom;
  }

  @supports (background-image: linear-gradient(in lab, red, red)) {
    .after\:bg-linear-to-b:after {
      --tw-gradient-position: to bottom in oklab;
    }
  }

  .after\:bg-linear-to-b:after {
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .after\:bg-linear-to-l:after {
    content: var(--tw-content);
    --tw-gradient-position: to left;
  }

  @supports (background-image: linear-gradient(in lab, red, red)) {
    .after\:bg-linear-to-l:after {
      --tw-gradient-position: to left in oklab;
    }
  }

  .after\:bg-linear-to-l:after {
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .after\:bg-linear-to-r:after {
    content: var(--tw-content);
    --tw-gradient-position: to right;
  }

  @supports (background-image: linear-gradient(in lab, red, red)) {
    .after\:bg-linear-to-r:after {
      --tw-gradient-position: to right in oklab;
    }
  }

  .after\:bg-linear-to-r:after {
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .after\:bg-gradient-to-b:after {
    content: var(--tw-content);
    --tw-gradient-position: to bottom in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .after\:from-transparent:after {
    content: var(--tw-content);
    --tw-gradient-from: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .after\:to-transparent:after {
    content: var(--tw-content);
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .after\:content-\[\'\'\]:after {
    --tw-content: "";
    content: var(--tw-content);
  }

  .first\:-ms-1\.5:first-child {
    margin-inline-start: calc(var(--spacing) * -1.5);
  }

  .first\:-ml-1\.5:first-child {
    margin-left: calc(var(--spacing) * -1.5);
  }

  .first\:rounded-t-2xl:first-child {
    border-top-left-radius: calc(var(--radius) * 2);
    border-top-right-radius: calc(var(--radius) * 2);
  }

  .first\:rounded-l-md:first-child {
    border-top-left-radius: calc(var(--radius) * .75);
    border-bottom-left-radius: calc(var(--radius) * .75);
  }

  .first\:border-l:first-child {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }

  .first\:border-none:first-child {
    --tw-border-style: none;
    border-style: none;
  }

  .first\:ps-0:first-child {
    padding-inline-start: 0;
  }

  .first\:pt-0:first-child {
    padding-top: 0;
  }

  .first\:pl-0:first-child {
    padding-left: 0;
  }

  .last\:hidden:last-child {
    display: none;
  }

  .last\:rounded-r-md:last-child {
    border-top-right-radius: calc(var(--radius) * .75);
    border-bottom-right-radius: calc(var(--radius) * .75);
  }

  .last\:border-b-0:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0;
  }

  .last\:border-none:last-child {
    --tw-border-style: none;
    border-style: none;
  }

  .last\:pb-0:last-child {
    padding-bottom: 0;
  }

  .last\:pb-0\.5:last-child {
    padding-bottom: calc(var(--spacing) * .5);
  }

  .last\:after\:hidden:last-child:after {
    content: var(--tw-content);
    display: none;
  }

  .empty\:hidden:empty {
    display: none;
  }

  .focus-within\:pointer-events-auto:focus-within {
    pointer-events: auto;
  }

  .focus-within\:bg-transparent:focus-within {
    background-color: #0000;
  }

  .focus-within\:opacity-100:focus-within {
    opacity: 1;
  }

  .focus-within\:ring-1:focus-within {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-within\:outline-none:focus-within {
    --tw-outline-style: none;
    outline-style: none;
  }

  .focus-within\:ring-inset:focus-within {
    --tw-ring-inset: inset;
  }

  @media (hover: hover) {
    .hover\:cursor-ns-resize:hover {
      cursor: ns-resize;
    }

    .hover\:rounded-sm:hover {
      border-radius: calc(var(--radius) * .5);
    }

    .hover\:\!bg-black\/80:hover {
      background-color: #000c !important;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:\!bg-black\/80:hover {
        background-color: color-mix(in oklab, var(--color-black) 80%, transparent) !important;
      }
    }

    .hover\:\!bg-transparent:hover {
      background-color: #0000 !important;
    }

    .hover\:\!bg-white\/80:hover {
      background-color: #fffc !important;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:\!bg-white\/80:hover {
        background-color: color-mix(in oklab, var(--color-white) 80%, transparent) !important;
      }
    }

    .hover\:bg-\[var\(--gray-550\)\]:hover {
      background-color: var(--gray-550);
    }

    .hover\:bg-black\/5:hover {
      background-color: #0000000d;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-black\/5:hover {
        background-color: color-mix(in oklab, var(--color-black) 5%, transparent);
      }
    }

    .hover\:bg-transparent:hover {
      background-color: #0000;
    }

    .hover\:\!text-black\/80:hover {
      color: #000c !important;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:\!text-black\/80:hover {
        color: color-mix(in oklab, var(--color-black) 80%, transparent) !important;
      }
    }

    .hover\:\[color\:var\(--oai-wb-text-primary\)\]:hover {
      color: var(--oai-wb-text-primary);
    }

    .hover\:no-underline:hover {
      text-decoration-line: none;
    }

    .hover\:underline:hover {
      text-decoration-line: underline;
    }

    .hover\:opacity-70:hover {
      opacity: .7;
    }

    .hover\:opacity-80:hover {
      opacity: .8;
    }

    .hover\:opacity-90:hover {
      opacity: .9;
    }

    .hover\:opacity-100:hover {
      opacity: 1;
    }

    .hover\:\[outline\:none\]:hover {
      outline: none;
    }

    .hover\:\[background\:var\(--oai-wb-surface-secondary\)\]:hover {
      background: var(--oai-wb-surface-secondary);
    }
  }

  .focus\:border-0:focus {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .focus\:border-none:focus {
    --tw-border-style: none;
    border-style: none;
  }

  .focus\:border-transparent:focus {
    border-color: #0000;
  }

  .focus\:bg-transparent:focus {
    background-color: #0000;
  }

  .focus\:ps-2:focus {
    padding-inline-start: calc(var(--spacing) * 2);
  }

  .focus\:pl-2:focus {
    padding-left: calc(var(--spacing) * 2);
  }

  .focus\:text-left:focus {
    text-align: left;
  }

  .focus\:text-gray-500:focus {
    color: var(--color-gray-500);
  }

  .focus\:ring-0:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:ring-1:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:outline-hidden:focus {
    --tw-outline-style: none;
    outline-style: none;
  }

  @media (forced-colors: active) {
    .focus\:outline-hidden:focus {
      outline-offset: 2px;
      outline: 2px solid #0000;
    }
  }

  .focus\:\!outline-none:focus {
    --tw-outline-style: none !important;
    outline-style: none !important;
  }

  .focus\:outline-none:focus {
    --tw-outline-style: none;
    outline-style: none;
  }

  .focus-visible\:pointer-events-auto:focus-visible {
    pointer-events: auto;
  }

  .focus-visible\:rounded-full:focus-visible {
    border-radius: 3.40282e38px;
  }

  .focus-visible\:rounded-sm:focus-visible {
    border-radius: calc(var(--radius) * .5);
  }

  .focus-visible\:border-transparent:focus-visible {
    border-color: #0000;
  }

  .focus-visible\:\[color\:var\(--oai-wb-text-primary\)\]:focus-visible {
    color: var(--oai-wb-text-primary);
  }

  .focus-visible\:opacity-100:focus-visible {
    opacity: 1;
  }

  .focus-visible\:ring-0:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-visible\:ring-1:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-visible\:ring-2:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-visible\:ring-focus:focus-visible {
    --tw-ring-color: var(--focus);
  }

  .focus-visible\:ring-offset-0:focus-visible {
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .focus-visible\:ring-offset-1:focus-visible {
    --tw-ring-offset-width: 1px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .focus-visible\:ring-offset-2:focus-visible {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .focus-visible\:ring-offset-background:focus-visible {
    --tw-ring-offset-color: var(--background);
  }

  .focus-visible\:outline-hidden:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }

  @media (forced-colors: active) {
    .focus-visible\:outline-hidden:focus-visible {
      outline-offset: 2px;
      outline: 2px solid #0000;
    }
  }

  .focus-visible\:\[outline\:2px_solid_var\(--oai-wb-focus\)\]:focus-visible {
    outline: 2px solid var(--oai-wb-focus);
  }

  .focus-visible\:\[outline\:none\]:focus-visible {
    outline: none;
  }

  .focus-visible\:outline:focus-visible, .focus-visible\:outline-1:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .focus-visible\:outline-2:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 2px;
  }

  .focus-visible\:\[outline-offset\:1px\]:focus-visible, .focus-visible\:outline-offset-1:focus-visible {
    outline-offset: 1px;
  }

  .focus-visible\:outline-offset-2:focus-visible {
    outline-offset: 2px;
  }

  .focus-visible\:outline-offset-\[-2px\]:focus-visible {
    outline-offset: -2px;
  }

  .focus-visible\:\[outline-color\:var\(--oai-wb-accent\)\]:focus-visible {
    outline-color: var(--oai-wb-accent);
  }

  .focus-visible\:outline-none:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }

  .focus-visible\:\[background\:var\(--oai-wb-surface-secondary\)\]:focus-visible {
    background: var(--oai-wb-surface-secondary);
  }

  .focus-visible\:ring-inset:focus-visible {
    --tw-ring-inset: inset;
  }

  .active\:scale-95:active {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .active\:scale-\[0\.97\]:active {
    scale: .97;
  }

  .active\:scale-\[0\.98\]:active {
    scale: .98;
  }

  .active\:scale-\[0\.995\]:active {
    scale: .995;
  }

  .active\:cursor-col-resize:active {
    cursor: col-resize;
  }

  .active\:cursor-grabbing:active {
    cursor: grabbing;
  }

  .active\:cursor-ns-resize:active {
    cursor: ns-resize;
  }

  .active\:cursor-row-resize:active {
    cursor: row-resize;
  }

  .active\:bg-transparent:active {
    background-color: #0000;
  }

  .active\:opacity-80:active {
    opacity: .8;
  }

  @media (hover: hover) {
    .enabled\:hover\:\!bg-\[color-mix\(in_srgb\,var\(--color-token-main-surface-primary\)_80\%\,var\(--color-token-text-link-foreground\)_20\%\)\]:enabled:hover {
      background-color: var(--color-token-main-surface-primary) !important;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .enabled\:hover\:\!bg-\[color-mix\(in_srgb\,var\(--color-token-main-surface-primary\)_80\%\,var\(--color-token-text-link-foreground\)_20\%\)\]:enabled:hover {
        background-color: color-mix(in srgb,var(--color-token-main-surface-primary) 80%,var(--color-token-text-link-foreground) 20%) !important;
      }
    }

    .enabled\:hover\:\!bg-\[color-mix\(in_srgb\,var\(--color-token-main-surface-primary\)_92\%\,var\(--color-token-foreground\)\)\]:enabled:hover {
      background-color: var(--color-token-main-surface-primary) !important;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .enabled\:hover\:\!bg-\[color-mix\(in_srgb\,var\(--color-token-main-surface-primary\)_92\%\,var\(--color-token-foreground\)\)\]:enabled:hover {
        background-color: color-mix(in srgb,var(--color-token-main-surface-primary) 92%,var(--color-token-foreground)) !important;
      }
    }

    .enabled\:hover\:\!bg-\[var\(--referral-rate-limit-tracking-hover-background\)\]:enabled:hover {
      background-color: var(--referral-rate-limit-tracking-hover-background) !important;
    }

    .enabled\:hover\:\!bg-black\/60:enabled:hover {
      background-color: #0009 !important;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .enabled\:hover\:\!bg-black\/60:enabled:hover {
        background-color: color-mix(in oklab, var(--color-black) 60%, transparent) !important;
      }
    }

    .enabled\:hover\:\[background-color\:var\(--oai-wb-surface-secondary\)\]:enabled:hover {
      background-color: var(--oai-wb-surface-secondary);
    }

    .enabled\:hover\:bg-\[var\(--annotation-mode-button-annotation-hover-background\)\]:enabled:hover {
      background-color: var(--annotation-mode-button-annotation-hover-background);
    }

    .enabled\:hover\:bg-transparent:enabled:hover {
      background-color: #0000;
    }

    .enabled\:hover\:opacity-90:enabled:hover {
      opacity: .9;
    }
  }

  .enabled\:active\:\!bg-\[color-mix\(in_srgb\,var\(--color-token-main-surface-primary\)_76\%\,var\(--color-token-text-link-foreground\)_24\%\)\]:enabled:active {
    background-color: var(--color-token-main-surface-primary) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .enabled\:active\:\!bg-\[color-mix\(in_srgb\,var\(--color-token-main-surface-primary\)_76\%\,var\(--color-token-text-link-foreground\)_24\%\)\]:enabled:active {
      background-color: color-mix(in srgb,var(--color-token-main-surface-primary) 76%,var(--color-token-text-link-foreground) 24%) !important;
    }
  }

  .enabled\:active\:\!bg-\[color-mix\(in_srgb\,var\(--color-token-main-surface-primary\)_88\%\,var\(--color-token-foreground\)_12\%\)\]:enabled:active {
    background-color: var(--color-token-main-surface-primary) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .enabled\:active\:\!bg-\[color-mix\(in_srgb\,var\(--color-token-main-surface-primary\)_88\%\,var\(--color-token-foreground\)_12\%\)\]:enabled:active {
      background-color: color-mix(in srgb,var(--color-token-main-surface-primary) 88%,var(--color-token-foreground) 12%) !important;
    }
  }

  .disabled\:pointer-events-none:disabled {
    pointer-events: none;
  }

  .disabled\:cursor-default:disabled {
    cursor: default;
  }

  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
  }

  .disabled\:\!bg-black\/45:disabled {
    background-color: #00000073 !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .disabled\:\!bg-black\/45:disabled {
      background-color: color-mix(in oklab, var(--color-black) 45%, transparent) !important;
    }
  }

  .disabled\:\!text-white\/45:disabled {
    color: #ffffff73 !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .disabled\:\!text-white\/45:disabled {
      color: color-mix(in oklab, var(--color-white) 45%, transparent) !important;
    }
  }

  .disabled\:opacity-40:disabled {
    opacity: .4;
  }

  .disabled\:opacity-50:disabled {
    opacity: .5;
  }

  .disabled\:opacity-60:disabled {
    opacity: .6;
  }

  .disabled\:opacity-70:disabled {
    opacity: .7;
  }

  .disabled\:opacity-100:disabled {
    opacity: 1;
  }

  .disabled\:opacity-\[var\(--disabled-opacity\)\]:disabled {
    opacity: var(--disabled-opacity);
  }

  @media (hover: hover) {
    .disabled\:hover\:bg-transparent:disabled:hover {
      background-color: #0000;
    }

    .disabled\:hover\:\[color\:var\(--oai-wb-text-secondary\)\]:disabled:hover {
      color: var(--oai-wb-text-secondary);
    }
  }

  .has-\[\.inline-markdown\]\:py-0\.5:has(.inline-markdown) {
    padding-block: calc(var(--spacing) * .5);
  }

  .has-\[\:disabled\]\:opacity-30:has(:disabled) {
    opacity: .3;
  }

  .has-\[\[data-state\=open\]\]\:pointer-events-auto:has([data-state="open"]) {
    pointer-events: auto;
  }

  .has-\[\[data-state\=open\]\]\:opacity-100:has([data-state="open"]) {
    opacity: 1;
  }

  .aria-disabled\:pointer-events-none[aria-disabled="true"] {
    pointer-events: none;
  }

  .aria-disabled\:cursor-not-allowed[aria-disabled="true"] {
    cursor: not-allowed;
  }

  .aria-disabled\:opacity-60[aria-disabled="true"] {
    opacity: .6;
  }

  .aria-disabled\:opacity-\[var\(--disabled-opacity\)\][aria-disabled="true"] {
    opacity: var(--disabled-opacity);
  }

  .aria-invalid\:ring-2[aria-invalid="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .data-\[disabled\]\:cursor-default[data-disabled] {
    cursor: default;
  }

  .data-\[disabled\]\:opacity-60[data-disabled] {
    opacity: .6;
  }

  @media (hover: hover) {
    .data-\[disabled\]\:hover\:bg-transparent[data-disabled]:hover {
      background-color: #0000;
    }
  }

  .data-\[side\=left\]\:before\:-right-1\.5[data-side="left"]:before {
    content: var(--tw-content);
    right: calc(var(--spacing) * -1.5);
  }

  .data-\[side\=right\]\:before\:-left-1\.5[data-side="right"]:before {
    content: var(--tw-content);
    left: calc(var(--spacing) * -1.5);
  }

  .data-\[state\=checked\]\:translate-x-\[14px\][data-state="checked"] {
    --tw-translate-x: 14px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[state\=hide\]\:animate-out[data-state="hide"] {
    animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
  }

  .data-\[state\=open\]\:\!bg-\[color-mix\(in_srgb\,var\(--color-token-main-surface-primary\)_80\%\,var\(--color-token-text-link-foreground\)_20\%\)\][data-state="open"] {
    background-color: var(--color-token-main-surface-primary) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .data-\[state\=open\]\:\!bg-\[color-mix\(in_srgb\,var\(--color-token-main-surface-primary\)_80\%\,var\(--color-token-text-link-foreground\)_20\%\)\][data-state="open"] {
      background-color: color-mix(in srgb,var(--color-token-main-surface-primary) 80%,var(--color-token-text-link-foreground) 20%) !important;
    }
  }

  .data-\[state\=open\]\:\!bg-\[color-mix\(in_srgb\,var\(--color-token-main-surface-primary\)_92\%\,var\(--color-token-foreground\)\)\][data-state="open"] {
    background-color: var(--color-token-main-surface-primary) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .data-\[state\=open\]\:\!bg-\[color-mix\(in_srgb\,var\(--color-token-main-surface-primary\)_92\%\,var\(--color-token-foreground\)\)\][data-state="open"] {
      background-color: color-mix(in srgb,var(--color-token-main-surface-primary) 92%,var(--color-token-foreground)) !important;
    }
  }

  .data-\[state\=open\]\:bg-transparent[data-state="open"] {
    background-color: #0000;
  }

  .data-\[state\=open\]\:\[background\:var\(--oai-wb-divider\)\][data-state="open"] {
    background: var(--oai-wb-divider);
  }

  .data-\[state\=show\]\:animate-in[data-state="show"] {
    animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
  }

  .data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
    --tw-translate-x: 0px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[state\=unchecked\]\:translate-x-\[2px\][data-state="unchecked"] {
    --tw-translate-x: 2px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .motion-safe\:animate-pulse:is([data-reduce-motion="false"], [data-reduce-motion="false"] *), .motion-safe\:animate-pulse:is([data-reduce-motion="false"], [data-reduce-motion="false"] *):before, .motion-safe\:animate-pulse:is([data-reduce-motion="false"], [data-reduce-motion="false"] *):after {
    animation: var(--animate-pulse);
  }

  @media (prefers-reduced-motion: no-preference) {
    .motion-safe\:animate-pulse:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *, [data-reduce-motion="false"], [data-reduce-motion="false"] *)), .motion-safe\:animate-pulse:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *, [data-reduce-motion="false"], [data-reduce-motion="false"] *)):before, .motion-safe\:animate-pulse:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *, [data-reduce-motion="false"], [data-reduce-motion="false"] *)):after {
      animation: var(--animate-pulse);
    }
  }

  .motion-safe\:animate-spin:is([data-reduce-motion="false"], [data-reduce-motion="false"] *), .motion-safe\:animate-spin:is([data-reduce-motion="false"], [data-reduce-motion="false"] *):before, .motion-safe\:animate-spin:is([data-reduce-motion="false"], [data-reduce-motion="false"] *):after {
    animation: var(--animate-spin);
  }

  @media (prefers-reduced-motion: no-preference) {
    .motion-safe\:animate-spin:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *, [data-reduce-motion="false"], [data-reduce-motion="false"] *)), .motion-safe\:animate-spin:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *, [data-reduce-motion="false"], [data-reduce-motion="false"] *)):before, .motion-safe\:animate-spin:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *, [data-reduce-motion="false"], [data-reduce-motion="false"] *)):after {
      animation: var(--animate-spin);
    }
  }

  .motion-safe\:transition-\[height\]:is([data-reduce-motion="false"], [data-reduce-motion="false"] *), .motion-safe\:transition-\[height\]:is([data-reduce-motion="false"], [data-reduce-motion="false"] *):before, .motion-safe\:transition-\[height\]:is([data-reduce-motion="false"], [data-reduce-motion="false"] *):after {
    transition-property: height;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  @media (prefers-reduced-motion: no-preference) {
    .motion-safe\:transition-\[height\]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *, [data-reduce-motion="false"], [data-reduce-motion="false"] *)), .motion-safe\:transition-\[height\]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *, [data-reduce-motion="false"], [data-reduce-motion="false"] *)):before, .motion-safe\:transition-\[height\]:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *, [data-reduce-motion="false"], [data-reduce-motion="false"] *)):after {
      transition-property: height;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
    }
  }

  .motion-safe\:ease-out:is([data-reduce-motion="false"], [data-reduce-motion="false"] *), .motion-safe\:ease-out:is([data-reduce-motion="false"], [data-reduce-motion="false"] *):before, .motion-safe\:ease-out:is([data-reduce-motion="false"], [data-reduce-motion="false"] *):after {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }

  @media (prefers-reduced-motion: no-preference) {
    .motion-safe\:ease-out:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *, [data-reduce-motion="false"], [data-reduce-motion="false"] *)), .motion-safe\:ease-out:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *, [data-reduce-motion="false"], [data-reduce-motion="false"] *)):before, .motion-safe\:ease-out:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *, [data-reduce-motion="false"], [data-reduce-motion="false"] *)):after {
      --tw-ease: var(--ease-out);
      transition-timing-function: var(--ease-out);
    }
  }

  .motion-reduce\:translate-y-0:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .motion-reduce\:translate-y-0:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .motion-reduce\:translate-y-0:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    --tw-translate-y: 0px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  @media (prefers-reduced-motion: reduce) {
    .motion-reduce\:translate-y-0:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .motion-reduce\:translate-y-0:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .motion-reduce\:translate-y-0:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      --tw-translate-y: 0px;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }

  .motion-reduce\:animate-none:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .motion-reduce\:animate-none:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .motion-reduce\:animate-none:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    animation: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .motion-reduce\:animate-none:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .motion-reduce\:animate-none:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .motion-reduce\:animate-none:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      animation: none;
    }
  }

  .motion-reduce\:transition-colors:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .motion-reduce\:transition-colors:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .motion-reduce\:transition-colors:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  @media (prefers-reduced-motion: reduce) {
    .motion-reduce\:transition-colors:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .motion-reduce\:transition-colors:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .motion-reduce\:transition-colors:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
    }
  }

  .motion-reduce\:transition-none:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .motion-reduce\:transition-none:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .motion-reduce\:transition-none:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-property: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .motion-reduce\:transition-none:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .motion-reduce\:transition-none:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .motion-reduce\:transition-none:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-property: none;
    }
  }

  .motion-reduce\:delay-0:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .motion-reduce\:delay-0:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .motion-reduce\:delay-0:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    transition-delay: 0s;
  }

  @media (prefers-reduced-motion: reduce) {
    .motion-reduce\:delay-0:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .motion-reduce\:delay-0:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .motion-reduce\:delay-0:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      transition-delay: 0s;
    }
  }

  .motion-reduce\:delay-0:is([data-reduce-motion="true"], [data-reduce-motion="true"] *), .motion-reduce\:delay-0:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):before, .motion-reduce\:delay-0:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):after {
    --tw-animation-delay: 0s;
    animation-delay: 0s;
  }

  @media (prefers-reduced-motion: reduce) {
    .motion-reduce\:delay-0:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)), .motion-reduce\:delay-0:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):before, .motion-reduce\:delay-0:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):after {
      --tw-animation-delay: 0s;
      animation-delay: 0s;
    }
  }

  .motion-reduce\:active\:scale-100:is([data-reduce-motion="true"], [data-reduce-motion="true"] *):active, :is():active {
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
    --tw-scale-z: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  @media (prefers-reduced-motion: reduce) {
    .motion-reduce\:active\:scale-100:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)):active, :is():active {
      --tw-scale-x: 100%;
      --tw-scale-y: 100%;
      --tw-scale-z: 100%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }

  @media not all and (min-width: 720px) {
    .max-\[720px\]\:hidden {
      display: none;
    }
  }

  @media not all and (min-width: 440px) {
    .max-\[440px\]\:hidden {
      display: none;
    }
  }

  @media not all and (min-width: 420px) {
    .max-\[420px\]\:ms-auto {
      margin-inline-start: auto;
    }

    .max-\[420px\]\:ml-auto {
      margin-left: auto;
    }

    .max-\[420px\]\:flex-wrap {
      flex-wrap: wrap;
    }
  }

  @media not all and (min-width: 400px) {
    .max-\[400px\]\:flex {
      display: flex;
    }

    .max-\[400px\]\:hidden {
      display: none;
    }

    .max-\[400px\]\:w-full {
      width: 100%;
    }

    .max-\[400px\]\:flex-1 {
      flex: 1;
    }

    .max-\[400px\]\:shrink {
      flex-shrink: 1;
    }

    .max-\[400px\]\:grid-cols-\[minmax\(0\,1fr\)_64px\] {
      grid-template-columns: minmax(0, 1fr) 64px;
    }

    .max-\[400px\]\:flex-col {
      flex-direction: column;
    }

    .max-\[400px\]\:flex-wrap {
      flex-wrap: wrap;
    }

    .max-\[400px\]\:items-start {
      align-items: flex-start;
    }

    .max-\[400px\]\:items-stretch {
      align-items: stretch;
    }

    .max-\[400px\]\:justify-center {
      justify-content: center;
    }

    .max-\[400px\]\:gap-2 {
      gap: calc(var(--spacing) * 2);
    }

    .max-\[400px\]\:self-stretch {
      align-self: stretch;
    }
  }

  @media not all and (min-width: 260px) {
    .max-\[260px\]\:hidden {
      display: none;
    }
  }

  @media not all and (min-width: 220px) {
    .max-\[220px\]\:hidden {
      display: none;
    }
  }

  @media not all and (min-width: 48rem) {
    .max-md\:order-3 {
      order: 3;
    }
  }

  @media not all and (min-width: 40rem) {
    .max-sm\:sr-only {
      clip-path: inset(50%);
      white-space: nowrap;
      border-width: 0;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      position: absolute;
      overflow: hidden;
    }

    .max-sm\:col-start-1 {
      grid-column-start: 1;
    }

    .max-sm\:block {
      display: block;
    }

    .max-sm\:hidden {
      display: none;
    }

    .max-sm\:inline {
      display: inline;
    }

    .max-sm\:max-h-40 {
      max-height: calc(var(--spacing) * 40);
    }

    .max-sm\:min-h-0 {
      min-height: 0;
    }

    .max-sm\:w-full {
      width: 100%;
    }

    .max-sm\:grid-cols-\[minmax\(0\,1fr\)_auto\] {
      grid-template-columns: minmax(0, 1fr) auto;
    }

    .max-sm\:flex-col {
      flex-direction: column;
    }

    .max-sm\:items-stretch {
      align-items: stretch;
    }

    .max-sm\:justify-stretch {
      justify-content: stretch;
    }

    .max-sm\:border-r-0 {
      border-right-style: var(--tw-border-style);
      border-right-width: 0;
    }

    .max-sm\:border-b {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 1px;
    }
  }

  @media (min-width: 40rem) {
    .sm\:ms-auto {
      margin-inline-start: auto;
    }

    .sm\:ml-auto {
      margin-left: auto;
    }

    .sm\:inline {
      display: inline;
    }

    .sm\:w-48 {
      width: calc(var(--spacing) * 48);
    }

    .sm\:w-\[433px\] {
      width: 433px;
    }

    .sm\:basis-1\/3 {
      flex-basis: 33.3333%;
    }

    .sm\:basis-\[calc\(\(100\%_\+_2rem\)\/5\)\] {
      flex-basis: calc(20% + .4rem);
    }

    .sm\:snap-none {
      scroll-snap-type: none;
    }

    .sm\:auto-cols-auto {
      grid-auto-columns: auto;
    }

    .sm\:grid-flow-row {
      grid-auto-flow: row;
    }

    .sm\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sm\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sm\:flex-row {
      flex-direction: row;
    }

    .sm\:items-center {
      align-items: center;
    }

    .sm\:justify-between {
      justify-content: space-between;
    }

    .sm\:justify-center {
      justify-content: center;
    }

    .sm\:self-center {
      align-self: center;
    }

    .sm\:overflow-visible {
      overflow: visible;
    }

    .sm\:px-8 {
      padding-inline: calc(var(--spacing) * 8);
    }

    .sm\:px-20 {
      padding-inline: calc(var(--spacing) * 20);
    }

    .sm\:ps-5 {
      padding-inline-start: calc(var(--spacing) * 5);
    }

    .sm\:pe-2 {
      padding-inline-end: calc(var(--spacing) * 2);
    }

    .sm\:pr-2 {
      padding-right: calc(var(--spacing) * 2);
    }

    .sm\:pl-5 {
      padding-left: calc(var(--spacing) * 5);
    }
  }

  @media (min-width: 48rem) {
    .md\:order-1 {
      order: 1;
    }

    .md\:col-span-3 {
      grid-column: span 3 / span 3;
    }

    .md\:mx-5 {
      margin-inline: calc(var(--spacing) * 5);
    }

    .md\:mt-10 {
      margin-top: calc(var(--spacing) * 10);
    }

    .md\:block {
      display: block;
    }

    .md\:hidden {
      display: none;
    }

    .md\:min-h-\[90px\] {
      min-height: 90px;
    }

    .md\:w-2\/5 {
      width: 40%;
    }

    .md\:w-\[240px\] {
      width: 240px;
    }

    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .md\:flex-nowrap {
      flex-wrap: nowrap;
    }

    .md\:overflow-hidden {
      overflow: hidden;
    }

    .md\:rounded {
      border-radius: .25rem;
    }

    .md\:pe-5 {
      padding-inline-end: calc(var(--spacing) * 5);
    }

    .md\:pe-10 {
      padding-inline-end: calc(var(--spacing) * 10);
    }

    .md\:pt-0 {
      padding-top: 0;
    }

    .md\:pr-5 {
      padding-right: calc(var(--spacing) * 5);
    }

    .md\:pr-10 {
      padding-right: calc(var(--spacing) * 10);
    }

    .md\:pb-5 {
      padding-bottom: calc(var(--spacing) * 5);
    }

    .md\:pl-8 {
      padding-left: calc(var(--spacing) * 8);
    }
  }

  @media (min-width: 64rem) {
    .lg\:col-span-4 {
      grid-column: span 4 / span 4;
    }

    .lg\:mx-auto {
      margin-inline: auto;
    }

    .lg\:flex {
      display: flex;
    }

    .lg\:hidden {
      display: none;
    }

    .lg\:min-h-\[250px\] {
      min-height: 250px;
    }

    .lg\:flex-nowrap {
      flex-wrap: nowrap;
    }

    .lg\:items-center {
      align-items: center;
    }
  }

  @media (min-width: 80rem) {
    .xl\:block {
      display: block;
    }

    .xl\:hidden {
      display: none;
    }
  }

  @container request-card not (min-width: 28rem) {
    .\@max-md\/request-card\:hidden {
      display: none;
    }

    .\@max-md\/request-card\:inline-flex {
      display: inline-flex;
    }

    .\@max-md\/request-card\:max-w-none {
      max-width: none;
    }

    .\@max-md\/request-card\:shrink {
      flex-shrink: 1;
    }

    .\@max-md\/request-card\:flex-col {
      flex-direction: column;
    }

    .\@max-md\/request-card\:items-center {
      align-items: center;
    }

    .\@max-md\/request-card\:items-end {
      align-items: flex-end;
    }
  }

  @container diff-header (min-width: 20rem) {
    .\@xs\/diff-header\:hidden {
      display: none;
    }

    .\@xs\/diff-header\:inline {
      display: inline;
    }
  }

  .ltr\:ms-auto:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
    margin-inline-start: auto;
  }

  .rtl\:me-auto:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
    margin-inline-end: auto;
  }

  .rtl\:-translate-x-1\/4:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
    --tw-translate-x: calc(calc(1 / 4 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .dark\:block:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *), .dark\:block:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):before, .dark\:block:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):after {
    display: block;
  }

  @media (prefers-color-scheme: dark) {
    .dark\:block:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:block, .dark\:block:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:block:before, .dark\:block:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:block:after {
      display: block;
    }
  }

  .dark\:hidden:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *), .dark\:hidden:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):before, .dark\:hidden:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):after {
    display: none;
  }

  @media (prefers-color-scheme: dark) {
    .dark\:hidden:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:hidden, .dark\:hidden:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:hidden:before, .dark\:hidden:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:hidden:after {
      display: none;
    }
  }

  .dark\:border-white\/10:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
    border-color: #ffffff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:border-white\/10:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }

  .dark\:border-white\/10:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):before, .dark\:border-white\/10:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):after {
    border-color: #ffffff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:border-white\/10:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):before, .dark\:border-white\/10:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):after {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }

  @media (prefers-color-scheme: dark) {
    .dark\:border-white\/10:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:border-white\/10 {
      border-color: #ffffff1a;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:border-white\/10:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:border-white\/10 {
        border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }

    .dark\:border-white\/10:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:border-white\/10:before, .dark\:border-white\/10:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:border-white\/10:after {
      border-color: #ffffff1a;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:border-white\/10:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:border-white\/10:before, .dark\:border-white\/10:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:border-white\/10:after {
        border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
  }

  .dark\:bg-\[\#40c977\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *), .dark\:bg-\[\#40c977\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):before, .dark\:bg-\[\#40c977\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):after {
    background-color: #40c977;
  }

  @media (prefers-color-scheme: dark) {
    .dark\:bg-\[\#40c977\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:bg-\[\#40c977\], .dark\:bg-\[\#40c977\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:bg-\[\#40c977\]:before, .dark\:bg-\[\#40c977\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:bg-\[\#40c977\]:after {
      background-color: #40c977;
    }
  }

  .dark\:bg-\[\#339cff\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *), .dark\:bg-\[\#339cff\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):before, .dark\:bg-\[\#339cff\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):after {
    background-color: #339cff;
  }

  @media (prefers-color-scheme: dark) {
    .dark\:bg-\[\#339cff\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:bg-\[\#339cff\], .dark\:bg-\[\#339cff\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:bg-\[\#339cff\]:before, .dark\:bg-\[\#339cff\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:bg-\[\#339cff\]:after {
      background-color: #339cff;
    }
  }

  .dark\:bg-\[\#353535\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *), .dark\:bg-\[\#353535\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):before, .dark\:bg-\[\#353535\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):after {
    background-color: #353535;
  }

  @media (prefers-color-scheme: dark) {
    .dark\:bg-\[\#353535\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:bg-\[\#353535\], .dark\:bg-\[\#353535\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:bg-\[\#353535\]:before, .dark\:bg-\[\#353535\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:bg-\[\#353535\]:after {
      background-color: #353535;
    }
  }

  .dark\:bg-\[\#ad7bf9\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *), .dark\:bg-\[\#ad7bf9\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):before, .dark\:bg-\[\#ad7bf9\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):after {
    background-color: #ad7bf9;
  }

  @media (prefers-color-scheme: dark) {
    .dark\:bg-\[\#ad7bf9\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:bg-\[\#ad7bf9\], .dark\:bg-\[\#ad7bf9\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:bg-\[\#ad7bf9\]:before, .dark\:bg-\[\#ad7bf9\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:bg-\[\#ad7bf9\]:after {
      background-color: #ad7bf9;
    }
  }

  .dark\:bg-\[\#ff8cc1\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *), .dark\:bg-\[\#ff8cc1\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):before, .dark\:bg-\[\#ff8cc1\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):after {
    background-color: #ff8cc1;
  }

  @media (prefers-color-scheme: dark) {
    .dark\:bg-\[\#ff8cc1\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:bg-\[\#ff8cc1\], .dark\:bg-\[\#ff8cc1\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:bg-\[\#ff8cc1\]:before, .dark\:bg-\[\#ff8cc1\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:bg-\[\#ff8cc1\]:after {
      background-color: #ff8cc1;
    }
  }

  .dark\:bg-\[\#ff6764\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *), .dark\:bg-\[\#ff6764\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):before, .dark\:bg-\[\#ff6764\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):after {
    background-color: #ff6764;
  }

  @media (prefers-color-scheme: dark) {
    .dark\:bg-\[\#ff6764\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:bg-\[\#ff6764\], .dark\:bg-\[\#ff6764\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:bg-\[\#ff6764\]:before, .dark\:bg-\[\#ff6764\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:bg-\[\#ff6764\]:after {
      background-color: #ff6764;
    }
  }

  .dark\:bg-\[\#ff8549\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *), .dark\:bg-\[\#ff8549\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):before, .dark\:bg-\[\#ff8549\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):after {
    background-color: #ff8549;
  }

  @media (prefers-color-scheme: dark) {
    .dark\:bg-\[\#ff8549\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:bg-\[\#ff8549\], .dark\:bg-\[\#ff8549\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:bg-\[\#ff8549\]:before, .dark\:bg-\[\#ff8549\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:bg-\[\#ff8549\]:after {
      background-color: #ff8549;
    }
  }

  .dark\:bg-\[\#ffd240\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *), .dark\:bg-\[\#ffd240\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):before, .dark\:bg-\[\#ffd240\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):after {
    background-color: #ffd240;
  }

  @media (prefers-color-scheme: dark) {
    .dark\:bg-\[\#ffd240\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:bg-\[\#ffd240\], .dark\:bg-\[\#ffd240\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:bg-\[\#ffd240\]:before, .dark\:bg-\[\#ffd240\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:bg-\[\#ffd240\]:after {
      background-color: #ffd240;
    }
  }

  .dark\:text-\[\#40c977\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *), .dark\:text-\[\#40c977\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):before, .dark\:text-\[\#40c977\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):after {
    color: #40c977;
  }

  @media (prefers-color-scheme: dark) {
    .dark\:text-\[\#40c977\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:text-\[\#40c977\], .dark\:text-\[\#40c977\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:text-\[\#40c977\]:before, .dark\:text-\[\#40c977\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:text-\[\#40c977\]:after {
      color: #40c977;
    }
  }

  .dark\:text-\[\#339cff\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *), .dark\:text-\[\#339cff\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):before, .dark\:text-\[\#339cff\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):after {
    color: #339cff;
  }

  @media (prefers-color-scheme: dark) {
    .dark\:text-\[\#339cff\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:text-\[\#339cff\], .dark\:text-\[\#339cff\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:text-\[\#339cff\]:before, .dark\:text-\[\#339cff\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:text-\[\#339cff\]:after {
      color: #339cff;
    }
  }

  .dark\:text-\[\#ad7bf9\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *), .dark\:text-\[\#ad7bf9\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):before, .dark\:text-\[\#ad7bf9\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):after {
    color: #ad7bf9;
  }

  @media (prefers-color-scheme: dark) {
    .dark\:text-\[\#ad7bf9\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:text-\[\#ad7bf9\], .dark\:text-\[\#ad7bf9\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:text-\[\#ad7bf9\]:before, .dark\:text-\[\#ad7bf9\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:text-\[\#ad7bf9\]:after {
      color: #ad7bf9;
    }
  }

  .dark\:text-\[\#ff8cc1\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *), .dark\:text-\[\#ff8cc1\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):before, .dark\:text-\[\#ff8cc1\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):after {
    color: #ff8cc1;
  }

  @media (prefers-color-scheme: dark) {
    .dark\:text-\[\#ff8cc1\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:text-\[\#ff8cc1\], .dark\:text-\[\#ff8cc1\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:text-\[\#ff8cc1\]:before, .dark\:text-\[\#ff8cc1\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:text-\[\#ff8cc1\]:after {
      color: #ff8cc1;
    }
  }

  .dark\:text-\[\#ff6764\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *), .dark\:text-\[\#ff6764\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):before, .dark\:text-\[\#ff6764\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):after {
    color: #ff6764;
  }

  @media (prefers-color-scheme: dark) {
    .dark\:text-\[\#ff6764\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:text-\[\#ff6764\], .dark\:text-\[\#ff6764\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:text-\[\#ff6764\]:before, .dark\:text-\[\#ff6764\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:text-\[\#ff6764\]:after {
      color: #ff6764;
    }
  }

  .dark\:text-\[\#ff8549\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *), .dark\:text-\[\#ff8549\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):before, .dark\:text-\[\#ff8549\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):after {
    color: #ff8549;
  }

  @media (prefers-color-scheme: dark) {
    .dark\:text-\[\#ff8549\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:text-\[\#ff8549\], .dark\:text-\[\#ff8549\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:text-\[\#ff8549\]:before, .dark\:text-\[\#ff8549\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:text-\[\#ff8549\]:after {
      color: #ff8549;
    }
  }

  .dark\:text-\[\#ffd240\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *), .dark\:text-\[\#ffd240\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):before, .dark\:text-\[\#ffd240\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):after {
    color: #ffd240;
  }

  @media (prefers-color-scheme: dark) {
    .dark\:text-\[\#ffd240\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:text-\[\#ffd240\], .dark\:text-\[\#ffd240\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:text-\[\#ffd240\]:before, .dark\:text-\[\#ffd240\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:text-\[\#ffd240\]:after {
      color: #ffd240;
    }
  }

  .dark\:text-white\/70:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
    color: #ffffffb3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:text-white\/70:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
      color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }

  .dark\:text-white\/70:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):before, .dark\:text-white\/70:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):after {
    color: #ffffffb3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:text-white\/70:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):before, .dark\:text-white\/70:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):after {
      color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }

  @media (prefers-color-scheme: dark) {
    .dark\:text-white\/70:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:text-white\/70 {
      color: #ffffffb3;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:text-white\/70:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:text-white\/70 {
        color: color-mix(in oklab, var(--color-white) 70%, transparent);
      }
    }

    .dark\:text-white\/70:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:text-white\/70:before, .dark\:text-white\/70:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:text-white\/70:after {
      color: #ffffffb3;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:text-white\/70:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:text-white\/70:before, .dark\:text-white\/70:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:text-white\/70:after {
        color: color-mix(in oklab, var(--color-white) 70%, transparent);
      }
    }
  }

  .dark\:shadow:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *), .dark\:shadow:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):before, .dark\:shadow:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):after {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  @media (prefers-color-scheme: dark) {
    .dark\:shadow:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:shadow, .dark\:shadow:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:shadow:before, .dark\:shadow:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:shadow:after {
      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }

  .dark\:shadow-\[0_8px_16px_0_rgba\(0\,0\,0\,0\.40\)\,inset_0_0_1px_0_rgba\(255\,255\,255\,0\.25\)\,0_0_1px_0_rgba\(0\,0\,0\,0\.60\)\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *), .dark\:shadow-\[0_8px_16px_0_rgba\(0\,0\,0\,0\.40\)\,inset_0_0_1px_0_rgba\(255\,255\,255\,0\.25\)\,0_0_1px_0_rgba\(0\,0\,0\,0\.60\)\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):before, .dark\:shadow-\[0_8px_16px_0_rgba\(0\,0\,0\,0\.40\)\,inset_0_0_1px_0_rgba\(255\,255\,255\,0\.25\)\,0_0_1px_0_rgba\(0\,0\,0\,0\.60\)\]:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):after {
    --tw-shadow: 0 8px 16px 0 var(--tw-shadow-color, #0006), inset 0 0 1px 0 var(--tw-shadow-color, #ffffff40), 0 0 1px 0 var(--tw-shadow-color, #0009);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  @media (prefers-color-scheme: dark) {
    .dark\:shadow-\[0_8px_16px_0_rgba\(0\,0\,0\,0\.40\)\,inset_0_0_1px_0_rgba\(255\,255\,255\,0\.25\)\,0_0_1px_0_rgba\(0\,0\,0\,0\.60\)\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:shadow-\[0_8px_16px_0_rgba\(0\,0\,0\,0\.40\)\,inset_0_0_1px_0_rgba\(255\,255\,255\,0\.25\)\,0_0_1px_0_rgba\(0\,0\,0\,0\.60\)\], .dark\:shadow-\[0_8px_16px_0_rgba\(0\,0\,0\,0\.40\)\,inset_0_0_1px_0_rgba\(255\,255\,255\,0\.25\)\,0_0_1px_0_rgba\(0\,0\,0\,0\.60\)\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:shadow-\[0_8px_16px_0_rgba\(0\,0\,0\,0\.40\)\,inset_0_0_1px_0_rgba\(255\,255\,255\,0\.25\)\,0_0_1px_0_rgba\(0\,0\,0\,0\.60\)\]:before, .dark\:shadow-\[0_8px_16px_0_rgba\(0\,0\,0\,0\.40\)\,inset_0_0_1px_0_rgba\(255\,255\,255\,0\.25\)\,0_0_1px_0_rgba\(0\,0\,0\,0\.60\)\]:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:shadow-\[0_8px_16px_0_rgba\(0\,0\,0\,0\.40\)\,inset_0_0_1px_0_rgba\(255\,255\,255\,0\.25\)\,0_0_1px_0_rgba\(0\,0\,0\,0\.60\)\]:after {
      --tw-shadow: 0 8px 16px 0 var(--tw-shadow-color, #0006), inset 0 0 1px 0 var(--tw-shadow-color, #ffffff40), 0 0 1px 0 var(--tw-shadow-color, #0009);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }

  .dark\:shadow-none:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *), .dark\:shadow-none:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):before, .dark\:shadow-none:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):after {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  @media (prefers-color-scheme: dark) {
    .dark\:shadow-none:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:shadow-none, .dark\:shadow-none:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:shadow-none:before, .dark\:shadow-none:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:shadow-none:after {
      --tw-shadow: 0 0 #0000;
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }

  @media (hover: hover) {
    .dark\:hover\:bg-black\/20:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):hover {
      background-color: #0003;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:hover\:bg-black\/20:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):hover {
        background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
      }
    }

    :is():hover {
      background-color: #0003;
    }

    @supports (color: color-mix(in lab, red, red)) {
      :is():hover {
        background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
      }
    }
  }

  @media (prefers-color-scheme: dark) {
    @media (hover: hover) {
      .dark\:hover\:bg-black\/20:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:hover\:bg-black\/20:hover {
        background-color: #0003;
      }

      @supports (color: color-mix(in lab, red, red)) {
        .dark\:hover\:bg-black\/20:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .dark\:hover\:bg-black\/20:hover {
          background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
        }
      }

      :is():hover {
        background-color: #0003;
      }

      @supports (color: color-mix(in lab, red, red)) {
        :is():hover {
          background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
        }
      }
    }
  }

  @media (hover: hover) {
    .hover\:dark\:\!bg-gray-100:hover:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *), .hover\:dark\:\!bg-gray-100:hover:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):before, .hover\:dark\:\!bg-gray-100:hover:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):after {
      background-color: var(--color-gray-100) !important;
    }

    @media (prefers-color-scheme: dark) {
      .hover\:dark\:\!bg-gray-100:hover:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .hover\:dark\:\!bg-gray-100:hover, .hover\:dark\:\!bg-gray-100:hover:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .hover\:dark\:\!bg-gray-100:hover:before, .hover\:dark\:\!bg-gray-100:hover:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .hover\:dark\:\!bg-gray-100:hover:after {
        background-color: var(--color-gray-100) !important;
      }
    }

    .hover\:dark\:bg-gray-100:hover:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *), .hover\:dark\:bg-gray-100:hover:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):before, .hover\:dark\:bg-gray-100:hover:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):after {
      background-color: var(--color-gray-100);
    }

    @media (prefers-color-scheme: dark) {
      .hover\:dark\:bg-gray-100:hover:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .hover\:dark\:bg-gray-100:hover, .hover\:dark\:bg-gray-100:hover:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .hover\:dark\:bg-gray-100:hover:before, .hover\:dark\:bg-gray-100:hover:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) .hover\:dark\:bg-gray-100:hover:after {
        background-color: var(--color-gray-100);
      }
    }
  }

  @media print {
    .print\:hidden {
      display: none;
    }
  }

  @media (forced-colors: active) {
    @media (hover: hover) {
      .forced-colors\:hover\:outline:hover {
        outline-style: var(--tw-outline-style);
        outline-width: 1px;
      }

      .forced-colors\:hover\:outline-offset-\[-2px\]:hover {
        outline-offset: -2px;
      }
    }
  }

  .\[\&_\*\]\:\!\[view-transition-name\:none\] * {
    view-transition-name: none !important;
  }

  .\[\&_\.ProseMirror\]\:\!h-5 .ProseMirror {
    height: calc(var(--spacing) * 5) !important;
  }

  .\[\&_\.ProseMirror\]\:h-6 .ProseMirror {
    height: calc(var(--spacing) * 6);
  }

  .\[\&_\.ProseMirror\]\:h-auto .ProseMirror {
    height: auto;
  }

  .\[\&_\.ProseMirror\]\:\!min-h-5 .ProseMirror {
    min-height: calc(var(--spacing) * 5) !important;
  }

  .\[\&_\.ProseMirror\]\:min-h-6 .ProseMirror {
    min-height: calc(var(--spacing) * 6);
  }

  .\[\&_\.ProseMirror\]\:min-h-\[2rem\] .ProseMirror {
    min-height: 2rem;
  }

  .\[\&_\.ProseMirror\]\:w-full .ProseMirror {
    width: 100%;
  }

  .\[\&_\.ProseMirror\]\:min-w-0 .ProseMirror {
    min-width: 0;
  }

  .\[\&_\.ProseMirror\]\:flex-1 .ProseMirror {
    flex: 1;
  }

  .\[\&_\.ProseMirror\]\:resize-none .ProseMirror {
    resize: none;
  }

  .\[\&_\.ProseMirror\]\:\!overflow-hidden .ProseMirror {
    overflow: hidden !important;
  }

  .\[\&_\.ProseMirror\]\:overflow-hidden .ProseMirror {
    overflow: hidden;
  }

  .\[\&_\.ProseMirror\]\:p-4 .ProseMirror {
    padding: calc(var(--spacing) * 4);
  }

  .\[\&_\.ProseMirror\]\:px-0 .ProseMirror {
    padding-inline: 0;
  }

  .\[\&_\.ProseMirror\]\:py-0 .ProseMirror {
    padding-block: 0;
  }

  .\[\&_\.ProseMirror\]\:text-center .ProseMirror {
    text-align: center;
  }

  .\[\&_\.ProseMirror\]\:\!font-sans .ProseMirror {
    font-family: var(--font-sans) !important;
  }

  .\[\&_\.ProseMirror\]\:font-sans .ProseMirror {
    font-family: var(--font-sans);
  }

  .\[\&_\.ProseMirror\]\:\!leading-6 .ProseMirror {
    --tw-leading: calc(var(--spacing) * 6) !important;
    line-height: calc(var(--spacing) * 6) !important;
  }

  .\[\&_\.ProseMirror\]\:leading-5 .ProseMirror {
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
  }

  .\[\&_\.ProseMirror\]\:leading-relaxed .ProseMirror {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }

  .\[\&_\.ProseMirror\]\:whitespace-nowrap .ProseMirror {
    white-space: nowrap;
  }

  .\[\&_\.ProseMirror\]\:caret-current .ProseMirror {
    caret-color: currentColor;
  }

  .\[\&_\.ProseMirror\]\:focus-visible\:outline-none .ProseMirror:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }

  .\[\&_\.ProseMirror_ol\]\:list-decimal .ProseMirror ol {
    list-style-type: decimal;
  }

  .\[\&_\.ProseMirror_ol\]\:ps-6 .ProseMirror ol {
    padding-inline-start: calc(var(--spacing) * 6);
  }

  .\[\&_\.ProseMirror_ol\]\:pl-6 .ProseMirror ol {
    padding-left: calc(var(--spacing) * 6);
  }

  .\[\&_\.ProseMirror_p\]\:m-0 .ProseMirror p {
    margin: 0;
  }

  .\[\&_\.ProseMirror_p\]\:overflow-hidden .ProseMirror p {
    overflow: hidden;
  }

  .\[\&_\.ProseMirror_p\]\:\!font-sans .ProseMirror p {
    font-family: var(--font-sans) !important;
  }

  .\[\&_\.ProseMirror_p\]\:\!leading-6 .ProseMirror p {
    --tw-leading: calc(var(--spacing) * 6) !important;
    line-height: calc(var(--spacing) * 6) !important;
  }

  .\[\&_\.ProseMirror_p\]\:text-ellipsis .ProseMirror p {
    text-overflow: ellipsis;
  }

  .\[\&_\.ProseMirror_p\]\:whitespace-nowrap .ProseMirror p {
    white-space: nowrap;
  }

  .\[\&_\.ProseMirror_p_\*\]\:\!font-sans .ProseMirror p *, .\[\&_\.ProseMirror_span\]\:\!font-sans .ProseMirror span {
    font-family: var(--font-sans) !important;
  }

  .\[\&_\.ProseMirror_ul\]\:ps-6 .ProseMirror ul {
    padding-inline-start: calc(var(--spacing) * 6);
  }

  .\[\&_\.ProseMirror_ul\]\:pl-6 .ProseMirror ul {
    padding-left: calc(var(--spacing) * 6);
  }

  .\[\&_\.contain-inline-size\]\:\[contain\:initial\] .contain-inline-size {
    contain: initial;
  }

  @media (hover: hover) {
    .peer-hover\/end-resource\:\[\&_\.end-resource-default-subtitle\]\:hidden:is(:where(.peer\/end-resource):hover ~ *) .end-resource-default-subtitle {
      display: none;
    }

    .peer-hover\/end-resource\:\[\&_\.end-resource-hover-subtitle\]\:inline-flex:is(:where(.peer\/end-resource):hover ~ *) .end-resource-hover-subtitle {
      display: inline-flex;
    }
  }

  .\[\&_\.loading-shimmer-pure-text\]\:align-top .loading-shimmer-pure-text {
    vertical-align: top;
  }

  .\[\&_\.min-w-0\]\:text-left .min-w-0 {
    text-align: left;
  }

  .focus-within\:\[\&_\.turn-diff-default-subtitle\]\:hidden:focus-within .turn-diff-default-subtitle {
    display: none;
  }

  @media (hover: hover) {
    .hover\:\[\&_\.turn-diff-default-subtitle\]\:hidden:hover .turn-diff-default-subtitle {
      display: none;
    }
  }

  .focus-within\:\[\&_\.turn-diff-hover-subtitle\]\:inline-flex:focus-within .turn-diff-hover-subtitle {
    display: inline-flex;
  }

  @media (hover: hover) {
    .hover\:\[\&_\.turn-diff-hover-subtitle\]\:inline-flex:hover .turn-diff-hover-subtitle {
      display: inline-flex;
    }
  }

  .\[\&_\[data-thread-find-target\=conversation\]\]\:scroll-mt-24 [data-thread-find-target="conversation"] {
    scroll-margin-top: calc(var(--spacing) * 24);
  }

  .\[\&_\[data-virtualized-turn-content\]\]\:\[content-visibility\:visible\] [data-virtualized-turn-content] {
    content-visibility: visible;
  }

  .\[\&_a\]\:pointer-events-auto a {
    pointer-events: auto;
  }

  .\[\&_blockquote\]\:mb-0 blockquote {
    margin-bottom: 0;
  }

  .\[\&_blockquote\]\:\!py-0 blockquote {
    padding-block: 0 !important;
  }

  .\[\&_blockquote\]\:\!ps-0 blockquote {
    padding-inline-start: 0 !important;
  }

  .\[\&_blockquote\]\:\!leading-4 blockquote {
    --tw-leading: calc(var(--spacing) * 4) !important;
    line-height: calc(var(--spacing) * 4) !important;
  }

  .\[\&_button\]\:pointer-events-auto button {
    pointer-events: auto;
  }

  .\[\&_button\]\:focus-visible\:ring-2 button:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .\[\&_button\]\:focus-visible\:ring-offset-0 button:focus-visible {
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .\[\&_details\]\:mt-3 details {
    margin-top: calc(var(--spacing) * 3);
  }

  .\[\&_details\]\:rounded-\[14px\] details {
    border-radius: 14px;
  }

  .\[\&_details\]\:border details {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .\[\&_details\]\:px-3\.5 details {
    padding-inline: calc(var(--spacing) * 3.5);
  }

  .\[\&_details\]\:py-3 details {
    padding-block: calc(var(--spacing) * 3);
  }

  .\[\&_img\]\:size-4 img {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .\[\&_img\]\:object-cover img {
    object-fit: cover;
  }

  .\[\&_img\]\:object-top img {
    object-position: top;
  }

  .\[\&_input\]\:pointer-events-auto input {
    pointer-events: auto;
  }

  .\[\&_li\+li\]\:\!mt-0 li + li, .\[\&_li\>ol\]\:\!mt-0 li > ol, .\[\&_li\>p\+p\]\:\!mt-0 li > p + p, .\[\&_li\>ul\]\:\!mt-0 li > ul {
    margin-top: 0 !important;
  }

  .\[\&_ol\]\:\!ps-6 ol {
    padding-inline-start: calc(var(--spacing) * 6) !important;
  }

  .\[\&_ol\]\:\!pl-6 ol {
    padding-left: calc(var(--spacing) * 6) !important;
  }

  .\[\&_p\]\:\!m-0 p {
    margin: 0 !important;
  }

  .\[\&_p\]\:leading-5 p {
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
  }

  .\[\&_p\]\:leading-6 p {
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
  }

  .\[\&_p\+p\]\:\!mt-5 p + p {
    margin-top: calc(var(--spacing) * 5) !important;
  }

  .\[\&_path\]\:\[stroke-width\:1\.2px\] path {
    stroke-width: 1.2px;
  }

  .\[\&_select\]\:pointer-events-auto select {
    pointer-events: auto;
  }

  .\[\&_summary\]\:font-medium summary {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .\[\&_svg\]\:block svg {
    display: block;
  }

  .\[\&_svg\]\:size-4 svg {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .\[\&_svg\]\:size-full svg {
    width: 100%;
    height: 100%;
  }

  .\[\&_svg\]\:text-current svg {
    color: currentColor;
  }

  .\[\&_textarea\]\:pointer-events-auto textarea {
    pointer-events: auto;
  }

  .\[\&_ul\]\:\!ps-6 ul {
    padding-inline-start: calc(var(--spacing) * 6) !important;
  }

  .\[\&_ul\]\:\!pl-6 ul {
    padding-left: calc(var(--spacing) * 6) !important;
  }

  .\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker {
    display: none;
  }

  .\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
    display: none;
  }

  .\[\&\:\:placeholder\]\:select-none::placeholder {
    -webkit-user-select: none;
    user-select: none;
  }

  .\[\&\:has\(\[data-mcp-app-expanded\=\'true\'\]\)\]\:\[content-visibility\:visible\]:has([data-mcp-app-expanded="true"]) {
    content-visibility: visible;
  }

  .\[\&\:has\(\[data-thread-scroll-footer\=\'true\'\]\:focus-within\)\]\:\[scroll-padding-bottom\:0px\]:has([data-thread-scroll-footer="true"]:focus-within) {
    scroll-padding-bottom: 0;
  }

  .\[\&\>\*\]\:size-full > * {
    width: 100%;
    height: 100%;
  }

  .disabled\:\[\&\>\*\]\:opacity-40:disabled > * {
    opacity: .4;
  }

  .\[\&\>\*\+\*\]\:mt-0 > * + *, .\[\&\>\*\:first-child\]\:mt-0 > :first-child {
    margin-top: 0;
  }

  .\[\&\>\*\:last-child\]\:mb-0 > :last-child {
    margin-bottom: 0;
  }

  .\[\&\>\*\:not\(\:last-child\)\]\:relative > :not(:last-child) {
    position: relative;
  }

  .\[\&\>\*\:not\(\:last-child\)\]\:after\:pointer-events-none > :not(:last-child):after {
    content: var(--tw-content);
    pointer-events: none;
  }

  .\[\&\>\*\:not\(\:last-child\)\]\:after\:absolute > :not(:last-child):after {
    content: var(--tw-content);
    position: absolute;
  }

  .\[\&\>\*\:not\(\:last-child\)\]\:after\:inset-x-4 > :not(:last-child):after {
    content: var(--tw-content);
    inset-inline: calc(var(--spacing) * 4);
  }

  .\[\&\>\*\:not\(\:last-child\)\]\:after\:bottom-0 > :not(:last-child):after {
    content: var(--tw-content);
    bottom: 0;
  }

  .\[\&\>\*\:not\(\:last-child\)\]\:after\:h-\[0\.5px\] > :not(:last-child):after {
    content: var(--tw-content);
    height: .5px;
  }

  .\[\&\>\*\:not\(\:last-child\)\]\:after\:content-\[\'\'\] > :not(:last-child):after {
    --tw-content: "";
    content: var(--tw-content);
  }

  .\[\&\>button\]\:\!mt-0 > button {
    margin-top: 0 !important;
  }

  .\[\&\>div\]\:gap-1\.5 > div {
    gap: calc(var(--spacing) * 1.5);
  }

  .\[\&\>div\]\:backdrop-blur-xs > div {
    --tw-backdrop-blur: blur(var(--blur-xs));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .\[\&\>h1\]\:mt-2 > h1 {
    margin-top: calc(var(--spacing) * 2);
  }

  .\[\&\>h1\+\*\]\:mt-1 > h1 + * {
    margin-top: var(--spacing);
  }

  .\[\&\>h2\]\:mt-2 > h2 {
    margin-top: calc(var(--spacing) * 2);
  }

  .\[\&\>h2\+\*\]\:mt-1 > h2 + * {
    margin-top: var(--spacing);
  }

  .\[\&\>h3\]\:mt-2 > h3 {
    margin-top: calc(var(--spacing) * 2);
  }

  .\[\&\>h3\+\*\]\:mt-1 > h3 + * {
    margin-top: var(--spacing);
  }

  .\[\&\>img\]\:size-4 > img {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .\[\&\>ol\:first-child\]\:mt-0 > ol:first-child {
    margin-top: 0;
  }

  .\[\&\>p\+p\]\:mt-1 > p + p {
    margin-top: var(--spacing);
  }

  .\[\&\>p\:last-child\]\:inline > p:last-child {
    display: inline;
  }

  .\[\&\>span\]\:block > span {
    display: block;
  }

  .\[\&\>span\]\:truncate > span {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .\[\&\>span\]\:whitespace-nowrap > span {
    white-space: nowrap;
  }

  .\[\&\>svg\]\:size-4 > svg {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .\[\&\>svg\]\:size-8 > svg {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
  }

  .\[\&\>svg\]\:size-full > svg {
    width: 100%;
    height: 100%;
  }

  .\[\&\>svg\]\:\!h-4 > svg {
    height: calc(var(--spacing) * 4) !important;
  }

  .\[\&\>svg\]\:h-auto > svg {
    height: auto;
  }

  .\[\&\>svg\]\:\!w-4 > svg {
    width: calc(var(--spacing) * 4) !important;
  }

  .\[\&\>svg\]\:text-left > svg {
    text-align: left;
  }

  .\[\&\>ul\:first-child\]\:mt-0 > ul:first-child {
    margin-top: 0;
  }

  .dark .\[\.dark_\&\]\:bg-\[color-mix\(in_srgb\,var\(--color-token-list-active-selection-background\)_88\%\,transparent\)\] {
    background-color: var(--color-token-list-active-selection-background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark .\[\.dark_\&\]\:bg-\[color-mix\(in_srgb\,var\(--color-token-list-active-selection-background\)_88\%\,transparent\)\] {
      background-color: color-mix(in srgb,var(--color-token-list-active-selection-background) 88%,transparent);
    }
  }

  .dark .\[\.dark_\&\]\:bg-\[var\(--color-token-list-active-selection-background\)\] {
    background-color: var(--color-token-list-active-selection-background);
  }

  .dark .\[\.dark_\&\]\:bg-\[var\(--green-800\)\] {
    background-color: var(--green-800);
  }

  .dark .\[\.dark_\&\]\:text-\[var\(--green-50\)\] {
    color: var(--green-50);
  }

  .electron-dark .\[\.electron-dark_\&\]\:bg-\[color-mix\(in_srgb\,var\(--color-token-list-active-selection-background\)_88\%\,transparent\)\] {
    background-color: var(--color-token-list-active-selection-background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .electron-dark .\[\.electron-dark_\&\]\:bg-\[color-mix\(in_srgb\,var\(--color-token-list-active-selection-background\)_88\%\,transparent\)\] {
      background-color: color-mix(in srgb,var(--color-token-list-active-selection-background) 88%,transparent);
    }
  }

  .electron-dark .\[\.electron-dark_\&\]\:bg-\[var\(--color-token-list-active-selection-background\)\] {
    background-color: var(--color-token-list-active-selection-background);
  }

  .electron-dark .\[\.electron-dark_\&\]\:bg-\[var\(--green-800\)\] {
    background-color: var(--green-800);
  }

  .electron-dark .\[\.electron-dark_\&\]\:text-\[var\(--green-50\)\] {
    color: var(--green-50);
  }

  @container (max-width: 260px) {
    .\[\@container_\(max-width\:260px\)\]\:hidden {
      display: none;
    }

    .\[\@container_\(max-width\:260px\)\]\:grid-cols-\[0_auto_auto\] {
      grid-template-columns: 0 auto auto;
    }

    .\[\@container_\(max-width\:260px\)\]\:gap-1 {
      gap: var(--spacing);
    }

    .\[\@container_\(max-width\:260px\)\]\:ps-2 {
      padding-inline-start: calc(var(--spacing) * 2);
    }

    .\[\@container_\(max-width\:260px\)\]\:pl-2 {
      padding-left: calc(var(--spacing) * 2);
    }
  }

  @container (max-width: 360px) {
    .\[\@container_\(max-width\:360px\)\]\:hidden {
      display: none;
    }
  }

  @container (max-width: 400px) {
    .\[\@container_\(max-width\:400px\)\]\:w-full {
      width: 100%;
    }

    .\[\@container_\(max-width\:400px\)\]\:shrink {
      flex-shrink: 1;
    }

    .\[\@container_\(max-width\:400px\)\]\:flex-wrap {
      flex-wrap: wrap;
    }

    .\[\@container_\(max-width\:400px\)\]\:items-start {
      align-items: flex-start;
    }

    .\[\@container_\(max-width\:400px\)\]\:justify-center {
      justify-content: center;
    }

    .\[\@container_\(max-width\:400px\)\]\:gap-2 {
      gap: calc(var(--spacing) * 2);
    }

    .\[\@container_\(max-width\:400px\)\]\:border-s-0 {
      border-inline-start-style: var(--tw-border-style);
      border-inline-start-width: 0;
    }

    .\[\@container_\(max-width\:400px\)\]\:border-t {
      border-top-style: var(--tw-border-style);
      border-top-width: 1px;
    }

    .\[\@container_\(max-width\:400px\)\]\:ps-0 {
      padding-inline-start: 0;
    }

    .\[\@container_\(max-width\:400px\)\]\:pt-2 {
      padding-top: calc(var(--spacing) * 2);
    }
  }

  @container (max-width: 450px) {
    .\[\@container_\(max-width\:450px\)\]\:hidden {
      display: none;
    }
  }

  @container (max-width: 480px) {
    .\[\@container_\(max-width\:480px\)\]\:sr-only {
      clip-path: inset(50%);
      white-space: nowrap;
      border-width: 0;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      position: absolute;
      overflow: hidden;
    }

    .\[\@container_\(max-width\:480px\)\]\:hidden {
      display: none;
    }
  }

  @container (max-width: 630px) {
    .\[\@container_\(max-width\:630px\)\]\:sr-only {
      clip-path: inset(50%);
      white-space: nowrap;
      border-width: 0;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      position: absolute;
      overflow: hidden;
    }
  }

  @container (min-width: 24rem) {
    .\[\@container_\(min-width\:24rem\)\]\:not-sr-only {
      clip-path: none;
      white-space: normal;
      width: auto;
      height: auto;
      margin: 0;
      padding: 0;
      position: static;
      overflow: visible;
    }

    .\[\@container_\(min-width\:24rem\)\]\:grid-cols-\[var\(--detail-property-label-width\,120px\)_minmax\(0\,1fr\)\] {
      grid-template-columns: var(--detail-property-label-width, 120px) minmax(0,1fr);
    }

    .\[\@container_\(min-width\:24rem\)\]\:items-center {
      align-items: center;
    }
  }

  @container (min-width: 400px) {
    .\[\@container_\(min-width\:400px\)\]\:col-span-2 {
      grid-column: span 2 / span 2;
    }

    .\[\@container_\(min-width\:400px\)\]\:col-span-3 {
      grid-column: span 3 / span 3;
    }

    .\[\@container_\(min-width\:400px\)\]\:block {
      display: block;
    }

    .\[\@container_\(min-width\:400px\)\]\:flex {
      display: flex;
    }

    .\[\@container_\(min-width\:400px\)\]\:hidden {
      display: none;
    }

    .\[\@container_\(min-width\:400px\)\]\:grid-cols-\[max-content_minmax\(72px\,1fr\)_minmax\(0\,max-content\)\] {
      grid-template-columns: max-content minmax(72px, 1fr) minmax(0, max-content);
    }
  }

  @container app-shell-detail-panel (max-width: 899px) {
    .\[\@container_app-shell-detail-panel_\(max-width\:899px\)\]\:w-full {
      width: 100%;
    }

    .\[\@container_app-shell-detail-panel_\(max-width\:899px\)\]\:grid-cols-\[auto_minmax\(0\,1fr\)_auto\] {
      grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .\[\@container_app-shell-detail-panel_\(max-width\:899px\)\]\:gap-1 {
      gap: var(--spacing);
    }

    .\[\@container_app-shell-detail-panel_\(max-width\:899px\)\]\:justify-self-stretch {
      justify-self: stretch;
    }
  }

  @container referral-tracking (max-width: 400px) {
    .\[\@container_referral-tracking_\(max-width\:400px\)\]\:block {
      display: block;
    }

    .\[\@container_referral-tracking_\(max-width\:400px\)\]\:hidden {
      display: none;
    }

    .\[\@container_referral-tracking_\(max-width\:400px\)\]\:justify-center {
      justify-content: center;
    }

    .\[\@container_referral-tracking_\(max-width\:400px\)\]\:px-0 {
      padding-inline: 0;
    }
  }

  @container review-header (max-width: 624px) {
    .\[\@container_review-header_\(max-width\:624px\)\]\:aspect-square {
      aspect-ratio: 1;
    }

    .\[\@container_review-header_\(max-width\:624px\)\]\:justify-center {
      justify-content: center;
    }

    .\[\@container_review-header_\(max-width\:624px\)\]\:\!px-0 {
      padding-inline: 0 !important;
    }
  }

  @container review-header (min-width: 625px) {
    .\[\@container_review-header_\(min-width\:625px\)\]\:inline {
      display: inline;
    }
  }

  @media (hover: hover) {
    .\[\@media\(hover\:hover\)\]\:group-\[\:hover\:not\(\:has\(\[data-agent-activity-file-link\]\:hover\)\)\]\/activity-header\:opacity-100:is(:where(.group\/activity-header):hover:not(:has([data-agent-activity-file-link]:hover)) *) {
      opacity: 1;
    }
  }

  @container referral-tracking (min-width: 401px) {
    @media (hover: hover) {
      .\[\@container_referral-tracking_\(min-width\:401px\)\]\:\[\@media\(hover\:hover\)\]\:pointer-events-none {
        pointer-events: none;
      }

      .\[\@container_referral-tracking_\(min-width\:401px\)\]\:\[\@media\(hover\:hover\)\]\:opacity-0 {
        opacity: 0;
      }

      .\[\@container_referral-tracking_\(min-width\:401px\)\]\:\[\@media\(hover\:hover\)\]\:opacity-100 {
        opacity: 1;
      }
    }
  }
}

@property --tw-animation-delay {
  syntax: "*";
  inherits: false;
  initial-value: 0s;
}

@property --tw-animation-direction {
  syntax: "*";
  inherits: false;
  initial-value: normal;
}

@property --tw-animation-duration {
  syntax: "*";
  inherits: false
}

@property --tw-animation-fill-mode {
  syntax: "*";
  inherits: false;
  initial-value: none;
}

@property --tw-animation-iteration-count {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-exit-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-exit-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

:root {
  --font-sans: "Inter Tight Variable", "Inter Tight", Inter, Arial, sans-serif;
  --canvas: #f8f7f6;
  --surface: #fdfcfa;
  --surface-muted: #f2efec;
  --surface-hover: #ecebe7;
  --surface-active: #e4e1de;
  --border: #dfdddb;
  --border-strong: #c9c5c5;
  --text: #252329;
  --text-secondary: #514d52;
  --text-muted: #69656a;
  --accent: #7c647c;
  --accent-hover: #695369;
  --accent-soft: #eee7ed;
  --link: #654f68;
  --focus: #806c82;
  --pearl-gradient: linear-gradient(112deg,
    #ebdac7 0%,
    #d8c6c1 34%,
    #c9ced1 67%,
    #dee6e4 100%);
  --shadow-soft: 0 12px 40px #2d242e14;
  --shadow-float: 0 18px 60px #2d242e21;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-pill: 999px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --motion-fast: .16s;
  --motion-base: .22s;
  --motion-shell: .26s;
  --page-max: 1200px;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--canvas);
  color-scheme: light;
  font-synthesis: none;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
}

:root[data-theme="dark"] {
  --canvas: #151319;
  --surface: #24212a;
  --surface-muted: #1c1921;
  --surface-hover: #2b2631;
  --surface-active: #352f3b;
  --border: #403a46;
  --border-strong: #56505d;
  --text: #f6f4ef;
  --text-secondary: #d8d1d5;
  --text-muted: #b8b1b8;
  --accent: #ebdac7;
  --accent-hover: #f1e4d6;
  --accent-soft: #332b34;
  --link: #f1dcc9;
  --focus: #ead8c5;
  --shadow-soft: 0 14px 44px #00000038;
  --shadow-float: 0 20px 68px #00000052;
  color-scheme: dark;
}

*, :before, :after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--canvas);
  scroll-padding-top: 112px;
}

body {
  background: var(--canvas);
  min-width: 320px;
  min-height: 100svh;
  color: var(--text);
  margin: 0;
}

input, textarea {
  font: inherit;
}

button, a {
  -webkit-tap-highlight-color: transparent;
}

button:not([data-slot="button"]) {
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

img, svg {
  display: block;
}

::selection {
  color: var(--text);
  background: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  ::selection {
    background: color-mix(in srgb, var(--accent) 24%, transparent);
  }
}

.landing-page {
  --scene-a: #d5c3dc;
  --scene-b: #b7c6d0;
  --scene-c: #e7d2c6;
  --scene-d: #c4d4ca;
  --scene-ink: #493d51;
  --scene-soft: #eee9f0;
  background: var(--canvas);
  min-height: 100svh;
  color: var(--text);
}

.landing-page[data-landing="trust"] {
  --scene-a: #ddc4c6;
  --scene-b: #c8b8cc;
  --scene-c: #ead8c9;
  --scene-d: #c9d5cf;
  --scene-ink: #553f49;
  --scene-soft: #f1e8e8;
}

.landing-page[data-landing="transition"] {
  --scene-a: #c4ced8;
  --scene-b: #b6c8c8;
  --scene-c: #ddd1c6;
  --scene-d: #d8c7d7;
  --scene-ink: #3f4c58;
  --scene-soft: #e8edef;
}

.landing-page[data-landing="calm"] {
  --scene-a: #becfc8;
  --scene-b: #b9c8d3;
  --scene-c: #d9d0c1;
  --scene-d: #cad8d1;
  --scene-ink: #3d514c;
  --scene-soft: #e5ece8;
}

.landing-page[data-landing="energy"] {
  --scene-a: #d8c9ae;
  --scene-b: #c3c9c2;
  --scene-c: #d7bfae;
  --scene-d: #c2cfce;
  --scene-ink: #51493c;
  --scene-soft: #eeeae1;
}

:root[data-theme="dark"] .landing-page {
  --scene-soft: var(--scene-ink);
}

@supports (color: color-mix(in lab, red, red)) {
  :root[data-theme="dark"] .landing-page {
    --scene-soft: color-mix(in srgb, var(--scene-ink) 38%, var(--surface));
  }
}

:root[data-theme="dark"] .landing-page {
  background: var(--canvas);
}

.page-shell {
  width: min(calc(100% - 48px), var(--page-max));
  min-width: 0;
  margin-inline: auto;
}

.page-section {
  padding-block: clamp(88px, 10vw, 152px);
  scroll-margin-top: 112px;
}

.skip-link {
  z-index: 1000;
  border-radius: var(--radius-md);
  color: var(--surface);
  background: var(--text);
  transition: transform var(--motion-fast) var(--ease-out);
  padding: 12px 16px;
  position: fixed;
  top: 8px;
  left: 8px;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

.header-sentinel {
  pointer-events: none;
  width: 1px;
  height: 1px;
  position: absolute;
  top: 44px;
  left: 0;
}

.landing-header {
  z-index: 100;
  top: max(16px, env(safe-area-inset-top));
  width: calc(100% - 32px);
  max-width: 1440px;
  transition: top var(--motion-shell) var(--ease-out), width var(--motion-shell) var(--ease-out), max-width var(--motion-shell) var(--ease-out);
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
}

.landing-header[data-compact="true"] {
  top: max(12px, env(safe-area-inset-top));
  max-width: 900px;
}

.landing-header__inner {
  border: 1px solid var(--border);
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  min-width: 0;
  height: 72px;
  padding: 10px 12px 10px 22px;
  display: grid;
}

@supports (color: color-mix(in lab, red, red)) {
  .landing-header__inner {
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  }
}

.landing-header__inner {
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  transition: height var(--motion-shell) var(--ease-out), padding var(--motion-shell) var(--ease-out), border-radius var(--motion-shell) var(--ease-out), box-shadow var(--motion-shell) var(--ease-out);
  border-radius: 24px;
}

.landing-header[data-compact="true"] .landing-header__inner {
  height: 60px;
  box-shadow: var(--shadow-float);
  border-radius: 20px;
  padding: 7px 8px 7px 18px;
}

.landing-brand {
  border-radius: var(--radius-md);
  outline: none;
  justify-self: start;
  align-items: center;
  min-width: 0;
  height: 44px;
  display: inline-flex;
}

.landing-brand img {
  width: 126px;
  height: auto;
}

.landing-brand:focus-visible, .landing-header__nav button:focus-visible, .landing-segment button:focus-visible, .orientation-option:focus-visible, .landing-footer__themes a:focus-visible, .faq-list summary:focus-visible {
  outline: 3px solid var(--focus);
}

@supports (color: color-mix(in lab, red, red)) {
  .landing-brand:focus-visible, .landing-header__nav button:focus-visible, .landing-segment button:focus-visible, .orientation-option:focus-visible, .landing-footer__themes a:focus-visible, .faq-list summary:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--focus) 72%, transparent);
  }
}

.landing-brand:focus-visible, .landing-header__nav button:focus-visible, .landing-segment button:focus-visible, .orientation-option:focus-visible, .landing-footer__themes a:focus-visible, .faq-list summary:focus-visible {
  outline-offset: 3px;
}

.landing-header__nav {
  justify-content: center;
  align-items: center;
  gap: 4px;
  min-width: 0;
  display: flex;
}

.landing-header__nav button {
  border-radius: var(--radius-md);
  min-height: 44px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--motion-fast) ease, background var(--motion-fast) ease;
  background: none;
  border: 0;
  padding: 0 14px;
}

.landing-header__nav button:hover {
  color: var(--text);
  background: var(--surface-hover);
}

.landing-header__actions {
  justify-self: end;
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.landing-segment {
  flex: none;
}

.landing-segment__expanded {
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  grid-template-columns: repeat(2, 1fr);
  width: 94px;
  height: 44px;
  padding: 3px;
  display: grid;
}

.landing-segment__expanded button, .landing-segment__compact {
  border-radius: var(--radius-pill);
  min-width: 0;
  min-height: 0;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--motion-fast) ease, background var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
  background: none;
  border: 0;
  place-items: center;
  padding: 0;
  display: grid;
}

.landing-segment__expanded button[data-active="true"] {
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 2px 10px #261f2814;
}

.landing-segment__expanded button svg, .landing-segment__compact svg {
  stroke-width: 1.8px;
  width: 17px;
  height: 17px;
}

.landing-segment--language .landing-segment__expanded button {
  letter-spacing: .06em;
  font-size: 12px;
  font-weight: 650;
}

.landing-segment__compact {
  border: 1px solid var(--border);
  width: 44px;
  height: 44px;
  color: var(--text);
  background: var(--surface-muted);
  letter-spacing: .04em;
  font-size: 12px;
  font-weight: 650;
  display: none;
}

.landing-header[data-compact="true"] .landing-segment__expanded {
  display: none;
}

.landing-header[data-compact="true"] .landing-segment__compact {
  display: grid;
}

.landing-header__cta, .landing-primary-button {
  border-radius: var(--radius-lg);
  color: #2d2930;
  background: var(--pearl-gradient);
  min-height: 48px;
  transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out), filter var(--motion-base) ease;
  border: 0;
  padding-inline: 20px;
  font-weight: 650;
  box-shadow: 0 9px 24px #5b4b5b21;
}

.landing-header__cta {
  border-radius: var(--radius-lg);
  white-space: nowrap;
  min-height: 44px;
  padding-inline: 18px;
}

.landing-header__cta:hover, .landing-primary-button:hover {
  filter: saturate(1.08) brightness(1.02);
  transform: translateY(-1px);
  box-shadow: 0 12px 30px #5b4b5b2e;
}

.landing-header__cta svg, .landing-primary-button svg, .landing-secondary-button svg {
  flex: none;
  width: 18px;
  height: 18px;
}

.landing-header__cta-short {
  display: none;
}

.landing-secondary-button {
  border-color: var(--border-strong);
  border-radius: var(--radius-lg);
  min-height: 48px;
  color: var(--text);
  transition: color var(--motion-base) ease, background var(--motion-base) ease, border-color var(--motion-base) ease, transform var(--motion-base) var(--ease-out);
  background: none;
  padding-inline: 20px;
  font-weight: 600;
}

.landing-secondary-button:hover {
  color: var(--text);
  border-color: var(--text-muted);
  background: var(--surface-hover);
  transform: translateY(-1px);
}

.landing-hero {
  text-align: center;
  place-items: center;
  min-height: 82svh;
  padding: clamp(160px, 18vh, 220px) 24px clamp(72px, 8vh, 112px);
  display: grid;
}

.landing-hero__copy {
  width: min(100%, 1120px);
  min-width: 0;
}

.landing-hero__eyebrow, .section-kicker {
  color: var(--text-muted);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 22px;
  font-size: 12px;
  font-weight: 680;
  line-height: 1.3;
}

.landing-hero h1 {
  max-width: 1100px;
  color: var(--text);
  letter-spacing: -.058em;
  text-wrap: balance;
  margin: 0 auto;
  font-size: clamp(52px, 6.3vw, 92px);
  font-weight: 590;
  line-height: .96;
}

.landing-hero h1 span {
  color: #0000;
  background: var(--pearl-gradient);
  -webkit-background-clip: text;
  background-clip: text;
}

:root[data-theme="light"] .landing-hero h1 span {
  filter: saturate(1.25) contrast(1.25) brightness(.77);
}

.landing-hero__lead {
  max-width: 720px;
  color: var(--text-secondary);
  text-wrap: pretty;
  margin: 28px auto 0;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.45;
}

.landing-hero__actions {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
  display: flex;
}

.landing-hero__privacy {
  color: var(--text-muted);
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  font-size: 13px;
  display: flex;
}

.landing-hero__privacy svg {
  stroke-width: 1.8px;
  width: 16px;
  height: 16px;
}

.media-marquee {
  width: 100%;
  padding-bottom: clamp(72px, 9vw, 132px);
}

.media-marquee__viewport {
  width: 100%;
  display: flex;
  overflow: hidden;
}

.media-marquee__track {
  will-change: transform;
  flex: none;
  align-items: center;
  gap: 20px;
  min-width: max-content;
  padding-right: 20px;
  animation: 64s linear infinite media-marquee;
  display: flex;
}

.media-marquee__viewport[data-running="false"] .media-marquee__track {
  animation-play-state: paused;
}

@keyframes media-marquee {
  to {
    transform: translateX(-100%);
  }
}

.shape-tile {
  border: 1px solid var(--border);
  flex: none;
  width: clamp(230px, 20vw, 312px);
  height: clamp(318px, 30vw, 452px);
  position: relative;
  overflow: hidden;
}

@supports (color: color-mix(in lab, red, red)) {
  .shape-tile {
    border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  }
}

.shape-tile {
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, var(--scene-a), var(--scene-b));
}

@supports (color: color-mix(in lab, red, red)) {
  .shape-tile {
    background: linear-gradient(145deg, color-mix(in srgb, var(--scene-a) 86%, white), var(--scene-b));
  }
}

.shape-tile {
  isolation: isolate;
}

.shape-tile:nth-child(2n) {
  transform: translateY(18px);
}

.shape-tile:nth-child(3n) {
  transform: translateY(-14px);
}

.shape-tile__light, .shape-tile__figure, .shape-tile__detail {
  pointer-events: none;
  display: block;
  position: absolute;
}

.shape-tile__light {
  z-index: -1;
  aspect-ratio: 1;
  background: #fff;
  border-radius: 50%;
  width: 82%;
  top: -14%;
  right: -18%;
}

@supports (color: color-mix(in lab, red, red)) {
  .shape-tile__light {
    background: color-mix(in srgb, white 72%, var(--scene-c));
  }
}

.shape-tile__light {
  opacity: .68;
  box-shadow: 0 0 70px #ffffff73;
}

@supports (color: color-mix(in lab, red, red)) {
  .shape-tile__figure {
    background: radial-gradient(circle at 50% 14%, var(--scene-ink) 0 10%, transparent 10.5%), linear-gradient(165deg, color-mix(in srgb, var(--scene-ink) 92%, black), color-mix(in srgb, var(--scene-a) 52%, var(--scene-ink)));
  }
}

.shape-tile__detail {
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid #ffffff52;
  width: 38%;
  height: 22%;
  bottom: 10%;
  right: 12%;
}

@supports (color: color-mix(in lab, red, red)) {
  .shape-tile__detail {
    background: color-mix(in srgb, var(--surface) 58%, transparent);
  }
}

.shape-tile--2 {
  background: linear-gradient(180deg, var(--scene-b), var(--scene-d));
  width: clamp(270px, 23vw, 354px);
}

@supports (color: color-mix(in lab, red, red)) {
  .shape-tile--2 {
    background: linear-gradient(180deg, color-mix(in srgb, var(--scene-b) 64%, #dbe8ed), color-mix(in srgb, var(--scene-d) 82%, #6f8587));
  }
}

.shape-tile--2 .shape-tile__figure {
  background: repeating-linear-gradient(172deg, transparent 0 28px, #ffffff29 29px 31px), var(--scene-ink);
  border-radius: 56% 0 0;
  width: 86%;
  height: 58%;
  left: auto;
  right: -8%;
}

@supports (color: color-mix(in lab, red, red)) {
  .shape-tile--2 .shape-tile__figure {
    background: repeating-linear-gradient(172deg, transparent 0 28px, #ffffff29 29px 31px), color-mix(in srgb, var(--scene-ink) 68%, var(--scene-d));
  }
}

.shape-tile--2 .shape-tile__figure {
  transform: rotate(0);
}

.shape-tile--2 .shape-tile__detail {
  width: 46%;
  height: 16%;
  top: 14%;
  bottom: auto;
  left: 11%;
}

.shape-tile--3 {
  background: radial-gradient(circle at 52% 44%, var(--scene-c) 0 17%, transparent 17.5%), conic-gradient(from 18deg at 52% 44%, var(--scene-a), var(--scene-c), var(--scene-d), var(--scene-a));
  width: clamp(214px, 18vw, 280px);
}

@supports (color: color-mix(in lab, red, red)) {
  .shape-tile--3 {
    background: radial-gradient(circle at 52% 44%, color-mix(in srgb, var(--scene-c) 60%, white) 0 17%, transparent 17.5%), conic-gradient(from 18deg at 52% 44%, var(--scene-a), var(--scene-c), var(--scene-d), var(--scene-a));
  }
}

.shape-tile--3 .shape-tile__figure {
  background: none;
  border: 1px solid #ffffff61;
  border-radius: 50% 50% 16px 16px;
  width: auto;
  height: 58%;
  inset: 17% 13% auto;
  transform: rotate(5deg);
}

.shape-tile--3 .shape-tile__detail {
  background: var(--scene-ink);
  width: 72%;
  height: 13%;
  bottom: 9%;
  left: 14%;
  right: auto;
}

@supports (color: color-mix(in lab, red, red)) {
  .shape-tile--3 .shape-tile__detail {
    background: color-mix(in srgb, var(--scene-ink) 78%, transparent);
  }
}

.shape-tile--4 {
  background: linear-gradient(90deg, transparent 49%, #ffffff52 49.5% 50.5%, transparent 51%), linear-gradient(180deg, var(--scene-c), var(--scene-a));
  width: clamp(290px, 24vw, 372px);
}

@supports (color: color-mix(in lab, red, red)) {
  .shape-tile--4 {
    background: linear-gradient(90deg, transparent 49%, #ffffff52 49.5% 50.5%, transparent 51%), linear-gradient(180deg, color-mix(in srgb, var(--scene-c) 78%, white), color-mix(in srgb, var(--scene-a) 60%, var(--scene-ink)));
  }
}

.shape-tile--4 .shape-tile__figure {
  border-radius: 50% 50% var(--radius-md) var(--radius-md);
  background: var(--scene-ink);
  width: 76%;
  height: 38%;
  bottom: 8%;
  left: 12%;
}

@supports (color: color-mix(in lab, red, red)) {
  .shape-tile--4 .shape-tile__figure {
    background: color-mix(in srgb, var(--scene-ink) 82%, transparent);
  }
}

.shape-tile--4 .shape-tile__figure {
  transform: none;
}

.shape-tile--4 .shape-tile__detail {
  background: #fff;
  border-radius: 50%;
  width: 30%;
  height: 28%;
  top: 12%;
  bottom: auto;
  right: 12%;
}

@supports (color: color-mix(in lab, red, red)) {
  .shape-tile--4 .shape-tile__detail {
    background: color-mix(in srgb, white 54%, var(--scene-d));
  }
}

.shape-tile--5 {
  background: linear-gradient(155deg, var(--scene-d), var(--scene-b));
  width: clamp(220px, 19vw, 292px);
}

@supports (color: color-mix(in lab, red, red)) {
  .shape-tile--5 {
    background: linear-gradient(155deg, color-mix(in srgb, var(--scene-d) 74%, white), color-mix(in srgb, var(--scene-b) 70%, var(--scene-ink)));
  }
}

.shape-tile--5 .shape-tile__figure {
  background: repeating-linear-gradient(90deg, transparent 0 40px, #ffffff21 41px 43px), var(--scene-ink);
  border-radius: 0 62% 0 0;
  width: 92%;
  height: 82%;
  bottom: -3%;
  left: -12%;
}

@supports (color: color-mix(in lab, red, red)) {
  .shape-tile--5 .shape-tile__figure {
    background: repeating-linear-gradient(90deg, transparent 0 40px, #ffffff21 41px 43px), color-mix(in srgb, var(--scene-ink) 48%, var(--scene-a));
  }
}

.shape-tile--5 .shape-tile__figure {
  transform: none;
}

.shape-tile--5 .shape-tile__detail {
  width: 32%;
  height: 9%;
  top: 14%;
  bottom: auto;
  right: 10%;
}

.shape-tile--6 {
  background: radial-gradient(circle at 16% 18%, #ffffff7a 0 3%, transparent 3.5%), radial-gradient(circle at 78% 26%, #ffffff57 0 4%, transparent 4.5%), linear-gradient(180deg, var(--scene-b), var(--scene-d));
  width: clamp(278px, 23vw, 360px);
}

@supports (color: color-mix(in lab, red, red)) {
  .shape-tile--6 {
    background: radial-gradient(circle at 16% 18%, #ffffff7a 0 3%, transparent 3.5%), radial-gradient(circle at 78% 26%, #ffffff57 0 4%, transparent 4.5%), linear-gradient(180deg, color-mix(in srgb, var(--scene-b) 74%, #d9e3ec), color-mix(in srgb, var(--scene-d) 76%, #647269));
  }
}

.shape-tile--6 .shape-tile__figure {
  width: 44%;
  height: 64%;
  bottom: -4%;
  left: 28%;
  transform: rotate(4deg);
}

.shape-tile--6 .shape-tile__detail {
  width: 48%;
  height: 18%;
  bottom: 7%;
  right: 8%;
}

.shape-tile--7 {
  background: repeating-linear-gradient(0deg, transparent 0 42px, #ffffff2e 43px 45px), linear-gradient(140deg, var(--scene-c), var(--scene-a));
  width: clamp(234px, 20vw, 310px);
}

@supports (color: color-mix(in lab, red, red)) {
  .shape-tile--7 {
    background: repeating-linear-gradient(0deg, transparent 0 42px, #ffffff2e 43px 45px), linear-gradient(140deg, color-mix(in srgb, var(--scene-c) 86%, white), color-mix(in srgb, var(--scene-a) 75%, var(--scene-ink)));
  }
}

.shape-tile--7 .shape-tile__figure {
  border-radius: 64% 0 0;
  width: 94%;
  height: 76%;
  bottom: -12%;
  left: auto;
  right: -10%;
  transform: none;
}

.shape-tile--7 .shape-tile__detail {
  width: 58%;
  height: 11%;
  inset: 14% auto auto 10%;
}

.shape-tile--8 {
  background: linear-gradient(120deg, transparent 0 42%, #ffffff47 42.5% 43.5%, transparent 44%), linear-gradient(160deg, var(--scene-d), var(--scene-c));
  width: clamp(304px, 25vw, 390px);
}

@supports (color: color-mix(in lab, red, red)) {
  .shape-tile--8 {
    background: linear-gradient(120deg, transparent 0 42%, #ffffff47 42.5% 43.5%, transparent 44%), linear-gradient(160deg, color-mix(in srgb, var(--scene-d) 82%, white), color-mix(in srgb, var(--scene-c) 68%, var(--scene-ink)));
  }
}

.shape-tile--8 .shape-tile__figure {
  width: 42%;
  height: 72%;
  bottom: -8%;
  left: 33%;
  transform: rotate(-2deg);
}

.shape-tile--8 .shape-tile__detail {
  border-radius: 50% 50% var(--radius-md) var(--radius-md);
  width: 25%;
  height: 35%;
  top: 10%;
  bottom: auto;
  right: 8%;
}

.intro-section {
  border-top: 1px solid var(--border);
}

.intro-layout {
  grid-template-columns: 96px minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: clamp(28px, 5vw, 80px);
  display: grid;
}

.intro-layout__index {
  color: var(--text-muted);
  letter-spacing: .12em;
  margin: 9px 0 0;
  font-size: 13px;
}

.intro-layout h2, .section-heading h2, .mechanism-layout h2, .care-mosaic__copy h2, .expert-copy h2, .lead-form-copy h2 {
  color: var(--text);
  margin: 0;
}

.intro-layout > p:last-child {
  max-width: 650px;
  color: var(--text-secondary);
  margin: 2px 0 0;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.55;
}

.section-heading {
  min-width: 0;
  max-width: 780px;
}

.section-heading[data-align="center"] {
  text-align: center;
  margin-inline: auto;
}

.section-heading > p:last-child {
  max-width: 650px;
  color: var(--text-secondary);
  margin: 24px 0 0;
  font-size: 18px;
  line-height: 1.55;
}

.section-heading[data-align="center"] > p:last-child {
  margin-inline: auto;
}

.recognition-section {
  background: var(--surface-muted);
}

.recognition-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(174px, auto);
  gap: 14px;
  margin-top: 54px;
  display: grid;
}

.recognition-card {
  border: 1px solid var(--border);
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  min-height: 174px;
  padding: 24px;
  display: flex;
  position: relative;
  overflow: hidden;
}

@supports (color: color-mix(in lab, red, red)) {
  .recognition-card {
    border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  }
}

.recognition-card {
  border-radius: var(--radius-xl);
  background: var(--surface);
}

.recognition-card > span {
  color: var(--text-muted);
  letter-spacing: .1em;
  font-size: 12px;
  font-weight: 650;
}

.recognition-card p {
  max-width: 34ch;
  color: var(--text);
  text-wrap: pretty;
  margin: 30px 0 0;
  font-size: 18px;
  line-height: 1.42;
}

.recognition-card > svg {
  width: 32px;
  height: 32px;
  color: var(--scene-ink);
  opacity: .65;
  position: absolute;
  bottom: 24px;
  right: 24px;
}

.recognition-card--1 {
  background: radial-gradient(circle at 90% 5%, var(--scene-c), transparent 45%), var(--scene-soft);
  grid-area: span 2 / span 6;
  padding: 30px;
}

@supports (color: color-mix(in lab, red, red)) {
  .recognition-card--1 {
    background: radial-gradient(circle at 90% 5%, color-mix(in srgb, var(--scene-c) 75%, white), transparent 45%), var(--scene-soft);
  }
}

.recognition-card--1 p {
  letter-spacing: -.025em;
  max-width: 28ch;
  padding-right: 30px;
  font-size: clamp(23px, 2.3vw, 32px);
  line-height: 1.22;
}

.recognition-card--2, .recognition-card--3 {
  grid-column: span 3;
}

.recognition-card--4, .recognition-card--5, .recognition-card--6 {
  grid-column: span 4;
}

.orientation-section {
  background: var(--canvas);
}

.orientation-layout {
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: clamp(48px, 8vw, 112px);
  display: grid;
}

.orientation-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  min-width: 0;
  box-shadow: var(--shadow-soft);
  margin: 0;
  padding: clamp(24px, 3vw, 36px);
}

.orientation-panel legend {
  width: 100%;
  color: var(--text);
  letter-spacing: -.025em;
  margin-bottom: 24px;
  padding: 0;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 590;
  line-height: 1.25;
}

.orientation-options {
  gap: 8px;
  display: grid;
}

.orientation-option {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 100%;
  min-height: 60px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--motion-fast) ease, background var(--motion-fast) ease, transform var(--motion-fast) var(--ease-out);
  background: none;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 8px 16px 8px 8px;
  display: grid;
}

@supports (color: color-mix(in lab, red, red)) {
  .orientation-option[data-selected="true"] {
    border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
  }
}

.orientation-option__indicator {
  border-radius: var(--radius-md);
  width: 44px;
  height: 44px;
  color: var(--text-muted);
  background: var(--surface-muted);
  letter-spacing: .08em;
  place-items: center;
  font-size: 11px;
  font-weight: 680;
  display: grid;
}

.orientation-option[data-selected="true"] .orientation-option__indicator {
  color: var(--surface);
  background: var(--text);
}

.orientation-option__indicator svg {
  width: 18px;
  height: 18px;
}

.orientation-result {
  border-top: 1px solid var(--border);
  min-height: 68px;
  margin-top: 20px;
  padding-top: 20px;
}

.orientation-result p {
  color: var(--text-secondary);
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
}

.orientation-result__empty {
  color: var(--text-muted) !important;
}

.orientation-result__choice {
  color: var(--text) !important;
  margin-bottom: 9px !important;
}

.orientation-result .landing-secondary-button {
  margin-top: 18px;
}

.mechanism-section {
  background: var(--scene-ink);
  color: #f8f4f0;
}

.mechanism-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  align-items: start;
  gap: clamp(48px, 9vw, 128px);
  display: grid;
}

.mechanism-layout .section-kicker {
  color: #ffffff8f;
}

.mechanism-layout h2 {
  color: #f8f4f0;
}

.mechanism-layout__copy {
  padding-top: 35px;
}

.mechanism-layout__copy p {
  color: #ffffffc2;
  margin: 0;
  font-size: 19px;
  line-height: 1.62;
}

.mechanism-layout__copy p + p {
  margin-top: 28px;
}

.care-mosaic-section {
  background: var(--canvas);
  padding: clamp(92px, 10vw, 152px) 24px;
}

.care-mosaic {
  grid-template-rows: repeat(6, minmax(88px, 118px));
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
  width: min(100%, 1440px);
  margin-inline: auto;
  display: grid;
}

.care-shape {
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

@supports (color: color-mix(in lab, red, red)) {
  .care-shape {
    border: 1px solid color-mix(in srgb, var(--border) 52%, transparent);
  }
}

.care-shape {
  border-radius: var(--radius-xl);
  background: radial-gradient(circle at 72% 22%, #ffffff80 0 11%, transparent 11.5%), linear-gradient(150deg, var(--scene-a), var(--scene-b));
}

.care-shape:before, .care-shape:after {
  content: "";
  display: block;
  position: absolute;
}

.care-shape:before {
  aspect-ratio: 1;
  background: var(--scene-ink);
  border-radius: 50% 50% 10% 10%;
  width: 76%;
  bottom: -16%;
  right: -12%;
}

@supports (color: color-mix(in lab, red, red)) {
  .care-shape:before {
    background: color-mix(in srgb, var(--scene-ink) 72%, transparent);
  }
}

.care-shape:after {
  border-radius: var(--radius-md);
  background: #ffffff26;
  border: 1px solid #ffffff59;
  width: 34%;
  height: 10%;
  top: 12%;
  left: 10%;
}

.care-shape--1 {
  grid-area: 1 / 1 / span 3 / span 2;
}

.care-shape--2 {
  background: linear-gradient(170deg, var(--scene-d), var(--scene-c));
  grid-area: 1 / 3 / span 2 / span 2;
}

.care-shape--3 {
  background: linear-gradient(140deg, var(--scene-b), var(--scene-ink));
  grid-area: 1 / 5 / span 3 / span 2;
}

.care-shape--4 {
  background: linear-gradient(145deg, var(--scene-c), var(--scene-a));
  grid-area: 1 / 7 / span 2 / span 2;
}

.care-mosaic__copy {
  z-index: 2;
  text-align: center;
  grid-area: 4 / 4 / span 3 / span 6;
  align-self: center;
  padding: 40px 48px;
}

.care-mosaic__copy > p:last-child {
  max-width: 650px;
  color: var(--text-secondary);
  margin: 22px auto 0;
  font-size: 18px;
  line-height: 1.52;
}

.care-shape--5 {
  background: linear-gradient(145deg, var(--scene-d), var(--scene-b));
  grid-area: 1 / 9 / span 3 / span 2;
}

.care-shape--6 {
  background: linear-gradient(160deg, var(--scene-a), var(--scene-c));
  grid-area: 1 / 11 / span 2 / span 2;
}

.care-shape--7 {
  background: linear-gradient(155deg, var(--scene-c), var(--scene-ink));
  grid-area: 4 / 1 / span 2 / span 2;
}

.care-shape--8 {
  background: linear-gradient(160deg, var(--scene-b), var(--scene-d));
  grid-area: 4 / 11 / span 3 / span 2;
}

.help-section {
  background: var(--surface-muted);
}

.help-list {
  border-top: 1px solid var(--border-strong);
  margin-top: 64px;
}

.help-item {
  border-bottom: 1px solid var(--border);
  grid-template-columns: 80px minmax(180px, .72fr) minmax(0, 1fr) 36px;
  align-items: center;
  gap: 28px;
  min-width: 0;
  padding: 30px 0;
  display: grid;
}

.help-item > span {
  color: var(--text-muted);
  letter-spacing: .1em;
  font-size: 12px;
}

.help-item h3 {
  color: var(--text);
  letter-spacing: -.025em;
  margin: 0;
  font-size: 24px;
  font-weight: 590;
}

.help-item p {
  max-width: 570px;
  color: var(--text-secondary);
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

.help-item > svg {
  width: 24px;
  height: 24px;
  color: var(--text-muted);
}

.process-section {
  background: var(--canvas);
}

.process-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.process-list li {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  min-width: 0;
  min-height: 280px;
  padding: 26px;
}

.process-list li > span {
  width: 44px;
  height: 44px;
  color: var(--surface);
  background: var(--text);
  border-radius: 50%;
  place-items: center;
  font-size: 13px;
  font-weight: 680;
  display: grid;
}

.process-list:not(.process-route) h3 {
  letter-spacing: -.03em;
  margin: 76px 0 0;
  font-size: 26px;
  font-weight: 590;
}

.process-list p {
  color: var(--text-secondary);
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.55;
}

.expert-section {
  background: var(--surface-muted);
}

.expert-layout {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: clamp(46px, 8vw, 112px);
  display: grid;
}

.expert-visual {
  border-radius: var(--radius-xl);
  background: radial-gradient(circle at 50% 20%, var(--scene-c), transparent 34%), linear-gradient(150deg, var(--scene-a), var(--scene-b));
  justify-content: center;
  align-items: flex-end;
  min-height: 620px;
  display: flex;
  position: relative;
  overflow: hidden;
}

@supports (color: color-mix(in lab, red, red)) {
  .expert-visual {
    background: radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--scene-c) 88%, white), transparent 34%), linear-gradient(150deg, var(--scene-a), var(--scene-b));
  }
}

.expert-visual__halo {
  aspect-ratio: 1;
  border: 1px solid #ffffff70;
  border-radius: 50%;
  width: 54%;
  position: absolute;
  top: 13%;
}

.expert-visual__figure {
  background: radial-gradient(circle at 50% 12%, var(--scene-ink) 0 11%, transparent 11.5%), linear-gradient(160deg, var(--scene-ink), var(--scene-a));
  border-radius: 48% 48% 18% 18% / 30% 30% 10% 10%;
  width: 52%;
  height: 76%;
  position: absolute;
  bottom: -6%;
}

@supports (color: color-mix(in lab, red, red)) {
  .expert-visual__figure {
    background: radial-gradient(circle at 50% 12%, var(--scene-ink) 0 11%, transparent 11.5%), linear-gradient(160deg, color-mix(in srgb, var(--scene-ink) 88%, black), color-mix(in srgb, var(--scene-a) 48%, var(--scene-ink)));
  }
}

.expert-visual__caption {
  z-index: 2;
  border-radius: var(--radius-md);
  color: #ffffffd1;
  background: var(--scene-ink);
  border: 1px solid #ffffff40;
  margin-bottom: 20px;
  padding: 10px 13px;
}

@supports (color: color-mix(in lab, red, red)) {
  .expert-visual__caption {
    background: color-mix(in srgb, var(--scene-ink) 82%, transparent);
  }
}

.expert-visual__caption {
  font-size: 12px;
}

.expert-copy__lead {
  max-width: 660px;
  color: var(--text-secondary);
  margin: 28px 0 0;
  font-size: 18px;
  line-height: 1.62;
}

.expert-copy ul {
  gap: 14px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.expert-copy li {
  color: var(--text-secondary);
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  font-size: 16px;
  line-height: 1.5;
  display: grid;
}

.expert-copy li svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
  margin-top: 2px;
}

.conditions-section {
  background: var(--canvas);
}

.conditions-layout {
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: clamp(48px, 9vw, 130px);
  display: grid;
}

.conditions-layout dl {
  border-top: 1px solid var(--border-strong);
  margin: 0;
}

.conditions-layout dl div {
  border-bottom: 1px solid var(--border);
  grid-template-columns: minmax(120px, .7fr) minmax(0, 1.3fr);
  gap: 24px;
  padding: 24px 0;
  display: grid;
}

.conditions-layout dt {
  color: var(--text-muted);
  font-size: 14px;
}

.conditions-layout dd {
  color: var(--text);
  margin: 0;
  font-size: 17px;
  font-weight: 560;
}

.safety-note-section {
  background: var(--canvas);
  padding-bottom: clamp(88px, 10vw, 152px);
}

.safety-note {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding: 24px;
  display: grid;
}

.safety-note svg {
  width: 32px;
  height: 32px;
  color: var(--accent);
  stroke-width: 1.5px;
}

.safety-note p {
  color: var(--text-secondary);
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
}

.faq-section {
  background: var(--surface-muted);
}

.faq-layout {
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  align-items: start;
  gap: clamp(48px, 8vw, 112px);
  display: grid;
}

.faq-list {
  border-top: 1px solid var(--border-strong);
  min-width: 0;
}

.faq-list details {
  border-bottom: 1px solid var(--border);
}

.faq-list summary {
  min-height: 76px;
  color: var(--text);
  cursor: pointer;
  grid-template-columns: minmax(0, 1fr) 32px;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  font-size: 18px;
  font-weight: 570;
  line-height: 1.35;
  list-style: none;
  display: grid;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary svg {
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  transition: transform var(--motion-base) var(--ease-out);
}

.faq-list details[open] summary svg {
  transform: rotate(180deg);
}

.faq-list details p {
  max-width: 650px;
  color: var(--text-secondary);
  margin: -4px 0 24px;
  padding-right: 46px;
  font-size: 16px;
  line-height: 1.58;
}

.lead-form-section {
  padding-bottom: max(clamp(88px, 10vw, 152px), env(safe-area-inset-bottom));
  background: radial-gradient(circle at 14% 20%, var(--scene-a), transparent 32%), var(--scene-soft);
}

@supports (color: color-mix(in lab, red, red)) {
  .lead-form-section {
    background: radial-gradient(circle at 14% 20%, color-mix(in srgb, var(--scene-a) 26%, transparent), transparent 32%), var(--scene-soft);
  }
}

.lead-form-layout {
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  align-items: start;
  gap: clamp(48px, 9vw, 130px);
  display: grid;
}

.lead-form-copy {
  position: sticky;
  top: 112px;
}

.lead-form-copy > p:not(.section-kicker) {
  max-width: 620px;
  color: var(--text-secondary);
  margin: 26px 0 0;
  font-size: 18px;
  line-height: 1.58;
}

.lead-form-trust {
  color: var(--text-muted);
  align-items: flex-start;
  gap: 10px;
  margin-top: 30px;
  font-size: 14px;
  line-height: 1.45;
  display: flex;
}

.lead-form-trust svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.lead-form, .lead-form-success {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  min-width: 0;
  box-shadow: var(--shadow-soft);
  padding: clamp(24px, 3.5vw, 40px);
}

.lead-form {
  gap: 22px;
  display: grid;
}

.lead-field label {
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 560;
}

.lead-field > div {
  border-color: var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
  width: 100%;
  min-height: 54px;
}

.lead-field input, .lead-field textarea {
  width: 100%;
  color: var(--text);
  background: none;
}

.lead-field input {
  min-height: 52px;
}

.lead-field textarea {
  resize: vertical;
  min-height: 118px;
  padding-block: 14px;
}

.lead-field input::placeholder, .lead-field textarea::placeholder {
  color: var(--text-muted);
  opacity: .82;
}

.lead-consent {
  color: var(--text-muted);
  cursor: pointer;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  font-size: 13px;
  line-height: 1.48;
  display: grid;
  position: relative;
}

.lead-consent input {
  opacity: 0;
  width: 1px;
  height: 1px;
  position: absolute;
}

.lead-consent__box {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: #0000;
  background: var(--surface);
  width: 22px;
  height: 22px;
  transition: color var(--motion-fast) ease, background var(--motion-fast) ease, border-color var(--motion-fast) ease;
  place-items: center;
  display: grid;
}

.lead-consent__box svg {
  stroke-width: 2.4px;
  width: 14px;
  height: 14px;
}

.lead-consent input:checked + .lead-consent__box {
  border-color: var(--text);
  color: var(--surface);
  background: var(--text);
}

.lead-consent input:focus-visible + .lead-consent__box {
  outline: 3px solid var(--focus);
}

@supports (color: color-mix(in lab, red, red)) {
  .lead-consent input:focus-visible + .lead-consent__box {
    outline: 3px solid color-mix(in srgb, var(--focus) 72%, transparent);
  }
}

.lead-consent input:focus-visible + .lead-consent__box {
  outline-offset: 3px;
}

.lead-form__submit {
  margin-top: 2px;
}

.lead-form-success {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 420px;
  display: flex;
}

.lead-form-success > svg {
  width: 42px;
  height: 42px;
  color: var(--accent);
  stroke-width: 1.6px;
}

.lead-form-success h3 {
  color: var(--text);
  letter-spacing: -.035em;
  margin: 28px 0 0;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 590;
  line-height: 1.15;
}

.lead-form-success p {
  max-width: 520px;
  color: var(--text-secondary);
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.55;
}

.lead-form-success .landing-secondary-button {
  margin-top: 28px;
}

.landing-footer {
  padding: 64px 0 max(28px, env(safe-area-inset-bottom));
  background: var(--surface);
}

.landing-footer__top {
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-bottom: 30px;
  display: flex;
}

.landing-footer__top img {
  width: 120px;
  height: auto;
}

.landing-footer__top p {
  color: var(--text-muted);
  margin: 0;
  font-size: 13px;
}

.landing-footer__themes {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 20px;
  display: grid;
}

.landing-footer__themes a {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  min-width: 0;
  min-height: 58px;
  color: var(--text-secondary);
  transition: color var(--motion-fast) ease, background var(--motion-fast) ease, border-color var(--motion-fast) ease;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.2;
  display: flex;
}

.landing-footer__themes a:hover, .landing-footer__themes a[data-active="true"] {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.landing-footer__themes a svg {
  flex: none;
  width: 16px;
  height: 16px;
}

.landing-footer__bottom {
  color: var(--text-muted);
  justify-content: space-between;
  gap: 24px;
  margin-top: 32px;
  font-size: 12px;
  display: flex;
}

@media (max-width: 1180px) {
  .landing-header__nav {
    display: none;
  }

  .landing-header__inner {
    grid-template-columns: 1fr auto;
  }

  .landing-header__actions {
    grid-column: 2;
  }

  .landing-footer__themes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .orientation-layout, .mechanism-layout, .expert-layout, .conditions-layout, .faq-layout, .lead-form-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .mechanism-layout__copy {
    max-width: 760px;
    padding-top: 0;
  }

  .expert-visual {
    min-height: 560px;
  }

  .lead-form-copy {
    position: static;
  }

  .recognition-card--1 {
    grid-column: span 7;
  }

  .recognition-card--2, .recognition-card--3 {
    grid-column: span 5;
  }

  .recognition-card--4, .recognition-card--5, .recognition-card--6 {
    grid-column: span 6;
  }

  .care-mosaic {
    grid-template-rows: repeat(6, minmax(78px, 102px));
  }

  .care-mosaic__copy {
    grid-column: 3 / span 8;
    padding-inline: 24px;
  }
}

@media (max-width: 760px) {
  html {
    scroll-padding-top: 88px;
  }

  .page-shell {
    width: min(calc(100% - 32px), var(--page-max));
  }

  .page-section {
    padding-block: 84px;
    scroll-margin-top: 88px;
  }

  .landing-header, .landing-header[data-compact="true"] {
    top: max(8px, env(safe-area-inset-top));
    width: calc(100% - 16px);
  }

  .landing-header__inner, .landing-header[data-compact="true"] .landing-header__inner {
    border-radius: 18px;
    height: 60px;
    padding: 7px 8px 7px 14px;
  }

  .landing-header[data-compact="true"] .landing-header__inner {
    border-radius: 16px;
    height: 56px;
  }

  .landing-brand img {
    width: 92px;
  }

  .landing-header__actions {
    gap: 6px;
  }

  .landing-segment__expanded {
    display: none;
  }

  .landing-segment__compact {
    display: grid;
  }

  .landing-header__cta {
    min-height: 44px;
    padding-inline: 14px;
  }

  .landing-header__cta-full {
    display: none;
  }

  .landing-header__cta-short {
    display: inline;
  }

  .landing-hero {
    min-height: 76svh;
    padding: 136px 16px 64px;
  }

  .landing-hero h1 {
    letter-spacing: -.05em;
    font-size: clamp(42px, 11vw, 62px);
    line-height: .98;
  }

  .landing-hero__lead {
    margin-top: 24px;
    font-size: 18px;
    line-height: 1.5;
  }

  .landing-hero__actions {
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 420px);
    margin-inline: auto;
    display: grid;
  }

  .landing-hero__actions > button {
    width: 100%;
  }

  .landing-hero__privacy {
    align-items: flex-start;
    max-width: 320px;
    margin-inline: auto;
    line-height: 1.4;
  }

  .media-marquee {
    padding-bottom: 84px;
  }

  .shape-tile {
    border-radius: var(--radius-lg);
    width: 224px;
    height: 318px;
  }

  .shape-tile--2, .shape-tile--4, .shape-tile--6, .shape-tile--8 {
    width: 260px;
  }

  .intro-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .intro-layout__index {
    margin: 0;
  }

  .recognition-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    margin-top: 40px;
  }

  .recognition-card, .recognition-card--1, .recognition-card--2, .recognition-card--3, .recognition-card--4, .recognition-card--5, .recognition-card--6 {
    grid-area: auto;
    min-height: 160px;
  }

  .recognition-card--1 {
    min-height: 230px;
  }

  .recognition-card--1 p {
    font-size: 24px;
  }

  .orientation-panel {
    padding: 20px;
  }

  .orientation-option:hover {
    transform: none;
  }

  .care-mosaic-section {
    padding: 84px 16px;
  }

  .care-mosaic {
    grid-template-rows: repeat(8, 78px);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  .care-shape {
    border-radius: var(--radius-lg);
  }

  .care-shape--1 {
    grid-area: 1 / 1 / span 3 / span 1;
  }

  .care-shape--2 {
    grid-area: 1 / 2 / span 2 / span 1;
  }

  .care-shape--3 {
    grid-area: 1 / 3 / span 3 / span 1;
  }

  .care-shape--4 {
    grid-area: 1 / 4 / span 2 / span 1;
  }

  .care-shape--5 {
    grid-area: 3 / 2 / span 2 / span 1;
  }

  .care-shape--6 {
    grid-area: 3 / 4 / span 3 / span 1;
  }

  .care-shape--7 {
    grid-area: 4 / 1 / span 2 / span 1;
  }

  .care-shape--8 {
    grid-area: 4 / 3 / span 2 / span 1;
  }

  .care-mosaic__copy {
    grid-area: 6 / 1 / span 3 / span 4;
    padding: 24px 4px 0;
  }

  .care-mosaic__copy > p:last-child {
    font-size: 16px;
  }

  .help-list {
    margin-top: 44px;
  }

  .help-item {
    grid-template-columns: 44px minmax(0, 1fr) 28px;
    gap: 14px;
    padding: 24px 0;
  }

  .help-item h3 {
    font-size: 21px;
  }

  .help-item p {
    grid-column: 2 / -1;
  }

  .help-item > svg {
    width: 20px;
    height: 20px;
  }

  .process-list {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 40px;
  }

  .process-list li {
    min-height: 230px;
  }

  .process-list:not(.process-route) h3 {
    margin-top: 52px;
  }

  .expert-visual {
    min-height: 470px;
  }

  .conditions-layout dl div {
    grid-template-columns: minmax(110px, .65fr) minmax(0, 1.35fr);
  }

  .safety-note-section {
    padding-bottom: 84px;
  }

  .faq-list summary {
    min-height: 70px;
    font-size: 17px;
  }

  .lead-form, .lead-form-success {
    padding: 22px;
  }

  .landing-footer__themes {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-footer__bottom {
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 430px) {
  .landing-header__inner, .landing-header[data-compact="true"] .landing-header__inner {
    padding-left: 10px;
  }

  .landing-brand img {
    width: 78px;
  }

  .landing-segment__compact {
    width: 44px;
    height: 44px;
  }

  .landing-header__cta {
    min-width: 76px;
    padding-inline: 10px;
  }

  .landing-header__cta svg {
    display: none;
  }

  .landing-hero {
    padding-top: 124px;
  }

  .landing-hero__eyebrow {
    margin-bottom: 18px;
  }

  .orientation-option {
    grid-template-columns: 40px minmax(0, 1fr);
    padding-left: 6px;
  }

  .orientation-option__indicator {
    width: 40px;
    height: 40px;
  }

  .conditions-layout dl div {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .safety-note {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 350px) {
  .landing-brand img {
    width: 68px;
  }

  .landing-header__actions {
    gap: 4px;
  }

  .landing-header__cta {
    min-width: 68px;
    padding-inline: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, :before, :after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }

  .media-marquee__viewport {
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    width: 100%;
    padding: 0 16px 18px;
    overflow-x: auto;
  }

  .media-marquee__track {
    animation: none;
  }

  .media-marquee__track:nth-child(2) {
    display: none;
  }

  .shape-tile {
    scroll-snap-align: start;
  }

  .shape-tile:nth-child(2n), .shape-tile:nth-child(3n) {
    transform: none;
  }
}

:root, :root[data-theme="light"] {
  --app-font-family-base: var(--font-sans);
  --app-brand-gradient: var(--pearl-gradient);
  --app-brand-gradient-foreground: #211e24;
  --accent-foreground: #fff;
  --accent-soft-hover: #e6dce5;
  --accent-soft-foreground: #624d62;
  --default: var(--surface-hover);
  --default-hover: var(--surface-active);
  --default-foreground: var(--text);
  --default-soft: #f1efec;
  --default-soft-hover: #e8e5e1;
  --default-soft-foreground: var(--text-secondary);
  --background: var(--canvas);
  --background-secondary: var(--surface-muted);
  --background-tertiary: var(--surface-hover);
  --background-inverse: var(--text);
  --foreground: var(--text);
  --muted: var(--text-muted);
  --surface-foreground: var(--text);
  --surface-secondary: var(--surface-muted);
  --surface-secondary-foreground: var(--text);
  --surface-tertiary: var(--surface-hover);
  --surface-tertiary-foreground: var(--text);
  --overlay: var(--surface);
  --overlay-foreground: var(--text);
  --backdrop: #25232970;
  --border-secondary: var(--border-strong);
  --border-tertiary: var(--border-strong);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, :root[data-theme="light"] {
    --border-tertiary: color-mix(in srgb, var(--border-strong) 78%, var(--text));
  }
}

:root, :root[data-theme="light"] {
  --separator: var(--border);
  --field-background: var(--surface-muted);
  --field-foreground: var(--text);
  --field-placeholder: var(--text-muted);
  --field-border: var(--border-strong);
  --field-hover: #f7f4f1;
  --field-focus: var(--surface);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, :root[data-theme="light"] {
    --field-focus: color-mix(in srgb, var(--surface) 94%, var(--focus) 6%);
  }
}

:root, :root[data-theme="light"] {
  --field-border-hover: var(--border-strong);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, :root[data-theme="light"] {
    --field-border-hover: color-mix(in srgb, var(--border-strong) 80%, var(--text));
  }
}

:root, :root[data-theme="light"] {
  --field-border-focus: var(--focus);
  --field-shadow: 0 0 #0000;
  --segment: var(--surface);
  --segment-foreground: var(--text);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-foreground-muted: var(--muted);
  --color-accent: var(--accent);
  --color-accent-hover: var(--accent-hover);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent-soft: var(--accent-soft);
  --color-accent-soft-hover: var(--accent-soft-hover);
  --color-accent-soft-foreground: var(--accent-soft-foreground);
  --color-default: var(--default);
  --color-default-hover: var(--default-hover);
  --color-default-foreground: var(--default-foreground);
  --color-default-soft: var(--default-soft);
  --color-default-soft-hover: var(--default-soft-hover);
  --color-default-soft-foreground: var(--default-soft-foreground);
  --color-surface: var(--surface);
  --color-surface-secondary: var(--surface-secondary);
  --color-surface-tertiary: var(--surface-tertiary);
  --color-overlay: var(--overlay);
  --color-backdrop: var(--backdrop);
  --color-border: var(--border);
  --color-border-secondary: var(--border-secondary);
  --color-border-tertiary: var(--border-tertiary);
  --color-separator: var(--separator);
  --color-focus: var(--focus);
  --color-link: var(--link);
  --color-field-background: var(--field-background);
  --color-field-foreground: var(--field-foreground);
  --color-field-placeholder: var(--field-placeholder);
  --color-field-border: var(--field-border);
  --ease-shell: cubic-bezier(.2, .8, .2, 1);
  --motion-header: .42s;
}

:root[data-theme="dark"] {
  --accent-foreground: #211e24;
  --accent-soft-hover: #3c323d;
  --accent-soft-foreground: var(--accent);
  --default: var(--surface-hover);
  --default-hover: var(--surface-active);
  --default-foreground: var(--text);
  --default-soft: #d8d1d514;
  --default-soft-hover: #d8d1d51f;
  --default-soft-foreground: var(--text-secondary);
  --background: var(--canvas);
  --background-secondary: var(--surface-muted);
  --background-tertiary: var(--surface);
  --background-inverse: var(--text);
  --foreground: var(--text);
  --muted: var(--text-muted);
  --surface-foreground: var(--text);
  --surface-secondary: var(--surface-hover);
  --surface-secondary-foreground: var(--text);
  --surface-tertiary: var(--surface-active);
  --surface-tertiary-foreground: var(--text);
  --overlay: var(--surface);
  --overlay-foreground: var(--text);
  --backdrop: #0c0a0fad;
  --border-secondary: var(--border-strong);
  --border-tertiary: var(--border-strong);
}

@supports (color: color-mix(in lab, red, red)) {
  :root[data-theme="dark"] {
    --border-tertiary: color-mix(in srgb, var(--border-strong) 78%, var(--text));
  }
}

:root[data-theme="dark"] {
  --separator: var(--border);
  --field-background: var(--surface);
  --field-foreground: var(--text);
  --field-placeholder: var(--text-muted);
  --field-border: var(--border-strong);
  --field-hover: var(--surface-hover);
  --field-focus: var(--surface);
}

@supports (color: color-mix(in lab, red, red)) {
  :root[data-theme="dark"] {
    --field-focus: color-mix(in srgb, var(--surface) 94%, var(--focus) 6%);
  }
}

:root[data-theme="dark"] {
  --field-border-hover: var(--border-strong);
}

@supports (color: color-mix(in lab, red, red)) {
  :root[data-theme="dark"] {
    --field-border-hover: color-mix(in srgb, var(--border-strong) 80%, var(--text));
  }
}

:root[data-theme="dark"] {
  --field-border-focus: var(--focus);
}

.landing-hero__eyebrow, .section-kicker {
  letter-spacing: -.005em;
  text-transform: none;
  margin-bottom: 18px;
  font-size: 15px;
  font-weight: 560;
  line-height: 1.35;
}

.landing-header {
  transition: top var(--motion-header) var(--ease-shell), width var(--motion-header) var(--ease-shell), max-width var(--motion-header) var(--ease-shell), transform var(--motion-header) var(--ease-shell);
}

.landing-segment {
  width: 94px;
  height: 44px;
  transition: width var(--motion-header) var(--ease-shell);
  position: relative;
}

.landing-header[data-compact="true"] .landing-segment {
  width: 44px;
}

.landing-segment__expanded, .landing-segment__compact {
  transition: opacity .26s var(--ease-shell), transform var(--motion-header) var(--ease-shell), border-color var(--motion-fast) ease, background-color var(--motion-fast) ease;
  position: absolute;
  inset: 0;
}

.landing-segment__expanded {
  opacity: 1;
  transform-origin: center;
  display: grid;
  transform: scale(1);
}

.landing-segment__compact, .landing-header[data-compact="true"] .landing-segment__expanded {
  opacity: 0;
  pointer-events: none;
  display: grid;
  transform: scale(.86);
}

.landing-header__cta, .landing-primary-button {
  background-image: var(--app-brand-gradient);
  color: var(--app-brand-gradient-foreground);
}

.landing-hero h1 {
  letter-spacing: -.052em;
  font-size: clamp(52px, 6.1vw, 88px);
  line-height: .98;
}

.intro-layout {
  grid-template-columns: 64px minmax(320px, .95fr) minmax(360px, 1.05fr);
}

.orientation-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  min-width: 0;
  box-shadow: var(--shadow-soft);
  gap: 0;
  margin: 0;
  padding: clamp(24px, 3vw, 36px);
  display: grid;
}

.orientation-question {
  width: 100%;
  min-width: 0;
  color: var(--text);
  letter-spacing: -.025em;
  text-wrap: balance;
  margin: 0 0 24px;
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 590;
  line-height: 1.25;
  display: block;
}

.orientation-option {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 100%;
  min-width: 0;
  min-height: 0;
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease, transform var(--motion-fast) var(--ease-out);
  background: none;
  padding: 0;
  display: block;
}

.orientation-option[data-selected="true"] {
  border-color: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .orientation-option[data-selected="true"] {
    border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
  }
}

.orientation-option[data-selected="true"] {
  background: var(--accent-soft);
}

.orientation-option__content {
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 60px;
  padding: 14px 16px;
  display: grid;
}

.orientation-option__control {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  width: 22px;
  height: 22px;
  transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease;
  border-radius: 50%;
  place-items: center;
  display: grid;
}

.orientation-option__indicator {
  color: #0000;
  width: 8px;
  height: 8px;
  transition: color var(--motion-fast) ease, transform var(--motion-fast) var(--ease-out);
  background: currentColor;
  border-radius: 50%;
  transform: scale(0);
}

.orientation-option[data-selected="true"] .orientation-option__control {
  border-color: var(--text);
  background: var(--text);
}

.orientation-option[data-selected="true"] .orientation-option__indicator {
  color: var(--surface);
  transform: scale(1);
}

.orientation-option__text {
  overflow-wrap: break-word;
  min-width: 0;
  font-size: 16px;
  line-height: 1.42;
}

.orientation-result {
  min-width: 0;
}

.shape-tile, .care-shape, .expert-visual {
  transform: translateZ(0);
}

.shape-tile__figure {
  border: 1px solid #ffffff2e;
  overflow: hidden;
  box-shadow: inset 0 1px #ffffff2e;
}

.shape-tile__figure:before {
  content: "";
  background: #ffffff3d;
  border-radius: 999px;
  height: 18%;
  position: absolute;
  inset: 10% 16% auto;
}

.shape-tile__detail, .care-shape:after {
  box-shadow: inset 0 1px #ffffff2e;
}

.faq-list, .faq-list__root {
  border-top: 1px solid var(--border-strong);
  min-width: 0;
}

.faq-list__item {
  border-bottom: 1px solid var(--border);
}

.faq-list__trigger {
  width: 100%;
  min-height: 76px;
  color: var(--text);
  text-align: left;
  grid-template-columns: minmax(0, 1fr) 32px;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  font-size: 18px;
  font-weight: 570;
  line-height: 1.35;
  display: grid;
}

.faq-list__question {
  min-width: 0;
}

.faq-list__icon {
  width: 32px;
  height: 32px;
  color: var(--text-muted);
  place-items: center;
  display: grid;
}

.faq-list__panel {
  overflow: hidden;
}

.faq-list__body {
  padding: 0;
}

.faq-list__answer p {
  max-width: 650px;
  color: var(--text-secondary);
  margin: -4px 0 24px;
  padding-right: 46px;
  font-size: 16px;
  line-height: 1.58;
}

.lead-field__label, .lead-field label {
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 560;
  line-height: 1.35;
}

.lead-field .input-group {
  border-color: var(--field-border);
  border-radius: var(--radius-lg);
  background: var(--field-background);
  width: 100%;
  min-height: 54px;
}

.lead-field .input-group:focus-within {
  border-color: var(--field-border-focus);
  background: var(--field-focus);
  box-shadow: 0 0 #0000;
}

.lead-field input, .lead-field textarea {
  color: var(--field-foreground);
}

.lead-consent {
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  line-height: 1.48;
  display: block;
  position: relative;
}

.lead-consent__content {
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  display: grid;
}

.lead-consent__control {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  width: 22px;
  height: 22px;
  transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease;
  place-items: center;
  display: grid;
}

.lead-consent__indicator {
  color: #0000;
  width: 14px;
  height: 14px;
  transition: color var(--motion-fast) ease;
}

.lead-consent[data-selected="true"] .lead-consent__control {
  border-color: var(--text);
  background: var(--text);
}

.lead-consent[data-selected="true"] .lead-consent__indicator {
  color: var(--surface);
}

@media (max-width: 760px) {
  .landing-segment {
    width: 44px;
  }

  .landing-segment__expanded, .landing-header[data-compact="true"] .landing-segment__expanded {
    display: none !important;
  }

  .landing-segment__compact, .landing-header[data-compact="true"] .landing-segment__compact {
    opacity: 1;
    pointer-events: auto;
    position: static;
    transform: none;
  }

  .landing-hero h1 {
    letter-spacing: -.045em;
    font-size: clamp(38px, 10.2vw, 58px);
    line-height: 1;
  }

  .intro-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .section-heading > p:last-child, .intro-layout > p:last-child, .lead-form-copy > p:not(.section-kicker), .expert-copy__lead {
    font-size: 16px;
    line-height: 1.55;
  }

  .recognition-card--1 p {
    padding-right: 0;
    font-size: 22px;
    line-height: 1.28;
  }

  .orientation-question {
    text-wrap: pretty;
    font-size: 22px;
    line-height: 1.28;
  }

  .orientation-option:hover {
    transform: none;
  }

  .orientation-option__content {
    min-height: 58px;
    padding: 12px 14px;
  }

  .faq-list__trigger {
    min-height: 70px;
    font-size: 17px;
  }

  .faq-list__answer p {
    padding-right: 0;
  }
}

@media (max-width: 430px) {
  .landing-hero__eyebrow, .section-kicker {
    font-size: 14px;
  }

  .orientation-option__content {
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 12px;
    padding-inline: 12px;
  }

  .orientation-option__control {
    width: 20px;
    height: 20px;
  }
}

:root {
  --motion-shell: .42s;
  --motion-slow: .56s;
  --ease-shell: cubic-bezier(.16, 1, .3, 1);
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
}

.landing-header {
  will-change: top, width, max-width, transform;
  transition: top var(--motion-shell) var(--ease-shell), width var(--motion-shell) var(--ease-shell), max-width var(--motion-shell) var(--ease-shell), transform var(--motion-shell) var(--ease-shell);
}

.landing-header__inner {
  transition: height var(--motion-shell) var(--ease-shell), padding var(--motion-shell) var(--ease-shell), border-radius var(--motion-shell) var(--ease-shell), box-shadow var(--motion-shell) var(--ease-shell), background-color var(--motion-shell) ease;
}

.landing-segment {
  block-size: 44px;
  inline-size: 94px;
  transition: inline-size var(--motion-shell) var(--ease-shell);
  position: relative;
}

.landing-segment__expanded, .landing-segment__compact, .landing-header[data-compact="true"] .landing-segment__expanded, .landing-header[data-compact="true"] .landing-segment__compact {
  display: grid !important;
}

.landing-segment__expanded, .landing-segment__compact {
  transform-origin: center;
  transition: opacity .28s ease, transform var(--motion-shell) var(--ease-shell), border-color var(--motion-base) ease, background-color var(--motion-base) ease, box-shadow var(--motion-base) ease;
  position: absolute;
  inset: 0;
}

.landing-segment__expanded {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.landing-segment__compact {
  opacity: 0;
  pointer-events: none;
  block-size: 44px;
  inline-size: 44px;
  transform: scale(.84);
}

.landing-header[data-compact="true"] .landing-segment {
  inline-size: 44px;
}

.landing-header[data-compact="true"] .landing-segment__expanded {
  opacity: 0;
  pointer-events: none;
  transform: scale(.86);
}

.landing-header[data-compact="true"] .landing-segment__compact {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.landing-hero__eyebrow, .section-kicker {
  color: var(--text-muted);
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
  font-size: 14px;
  font-weight: 560;
  line-height: 1.45;
}

.landing-hero h1 {
  text-wrap: balance;
}

.section-heading > p:last-child, .intro-layout > p:last-child, .mechanism-layout__copy p, .expert-copy__lead, .lead-form-copy > p:not(.section-kicker), .care-mosaic__copy > p:last-child {
  text-wrap: pretty;
}

.recognition-card p, .help-item p, .process-list p, .conditions-layout dd, .safety-note p, .landing-footer__themes a {
  overflow-wrap: break-word;
  text-wrap: pretty;
  min-width: 0;
}

.orientation-panel {
  gap: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  min-width: 0;
  box-shadow: var(--shadow-soft);
  margin: 0;
  padding: clamp(24px, 3vw, 36px);
  display: grid;
}

.orientation-question {
  max-width: 100%;
  color: var(--text);
  letter-spacing: -.025em;
  overflow-wrap: break-word;
  text-wrap: balance;
  margin: 0;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 590;
  line-height: 1.24;
  display: block;
}

.orientation-options {
  gap: var(--space-2);
  min-width: 0;
  display: grid;
}

.orientation-option {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
  width: 100%;
  min-width: 0;
  color: var(--text-secondary);
  transition: border-color var(--motion-base) ease, background-color var(--motion-base) ease, color var(--motion-base) ease, transform var(--motion-base) var(--ease-shell);
  padding: 0;
  display: block;
}

.orientation-option:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  transform: translateY(-1px);
}

.orientation-option[data-selected="true"], .orientation-option[aria-checked="true"] {
  border-color: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .orientation-option[data-selected="true"], .orientation-option[aria-checked="true"] {
    border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
  }
}

.orientation-option[data-selected="true"], .orientation-option[aria-checked="true"] {
  background: var(--accent-soft);
  color: var(--text);
}

.orientation-option__content {
  gap: var(--space-3);
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  min-height: 64px;
  padding: 12px 16px;
  display: grid;
}

.orientation-option__control {
  place-items: center;
  block-size: 22px;
  inline-size: 22px;
  margin: 0;
  display: grid;
}

.orientation-option__text {
  min-width: 0;
  color: inherit;
  overflow-wrap: break-word;
  text-wrap: pretty;
  font-size: 16px;
  font-weight: 520;
  line-height: 1.38;
}

.orientation-result {
  min-height: auto;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  margin-top: 0;
}

.orientation-result p {
  overflow-wrap: break-word;
  text-wrap: pretty;
  max-width: 100%;
}

.lead-form {
  gap: var(--space-5);
}

.lead-field {
  gap: var(--space-2);
  min-width: 0;
  display: grid;
}

.lead-field > div {
  min-height: auto;
}

.lead-field label, .lead-field__label {
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 560;
  line-height: 1.35;
}

.lead-field input, .lead-field textarea {
  font-size: max(16px, 1rem);
}

.lead-field textarea {
  resize: vertical;
  min-height: 118px;
}

.lead-consent {
  min-width: 0;
  color: var(--text-muted);
}

.lead-consent__content {
  gap: var(--space-3);
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  font-size: 13px;
  line-height: 1.48;
  display: grid;
}

.lead-consent__content span:last-child {
  overflow-wrap: break-word;
  min-width: 0;
}

.shape-tile, .care-shape, .expert-visual {
  box-shadow: inset 0 1px #ffffff2e;
}

.shape-tile__figure {
  background: radial-gradient(circle at 50% 13%, var(--scene-ink) 0 9%, transparent 9.5%), linear-gradient(160deg, var(--scene-ink), var(--scene-a));
  border-radius: 999px 999px 22px 22px;
  width: 56%;
  height: 70%;
  bottom: -8%;
  left: 50%;
}

@supports (color: color-mix(in lab, red, red)) {
  .shape-tile__figure {
    background: radial-gradient(circle at 50% 13%, color-mix(in srgb, var(--scene-ink) 96%, black) 0 9%, transparent 9.5%), linear-gradient(160deg, color-mix(in srgb, var(--scene-ink) 86%, black), color-mix(in srgb, var(--scene-a) 48%, var(--scene-ink)));
  }
}

.shape-tile__figure {
  opacity: .86;
  transform: translateX(-50%) rotate(-2deg);
}

.shape-tile__detail {
  border-radius: var(--radius-pill);
  background: var(--surface);
}

@supports (color: color-mix(in lab, red, red)) {
  .shape-tile__detail {
    background: color-mix(in srgb, var(--surface) 62%, transparent);
  }
}

.shape-tile--2 .shape-tile__figure, .shape-tile--5 .shape-tile__figure, .shape-tile--7 .shape-tile__figure {
  opacity: .72;
  left: auto;
  transform: none;
}

.shape-tile--3 .shape-tile__figure {
  background: radial-gradient(circle at 50% 50%, #ffffff5c 0 20%, transparent 20.5%), var(--scene-ink);
  border-radius: 999px;
  width: auto;
  height: 56%;
  inset: 18% 14% auto;
}

@supports (color: color-mix(in lab, red, red)) {
  .shape-tile--3 .shape-tile__figure {
    background: radial-gradient(circle at 50% 50%, #ffffff5c 0 20%, transparent 20.5%), color-mix(in srgb, var(--scene-ink) 46%, transparent);
  }
}

.shape-tile--3 .shape-tile__figure {
  transform: rotate(4deg);
}

.care-shape:before {
  opacity: .72;
  border-radius: 999px 999px 18px 18px;
  width: 68%;
}

.care-shape:after {
  border-radius: var(--radius-pill);
  width: 42%;
  height: 12%;
}

@media (max-width: 760px) {
  .landing-segment {
    inline-size: 44px;
  }

  .landing-segment__expanded {
    opacity: 0;
    pointer-events: none;
    transform: scale(.86);
  }

  .landing-segment__compact {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
  }

  .landing-hero__eyebrow, .section-kicker {
    font-size: 13px;
    line-height: 1.42;
  }

  .landing-hero h1 {
    letter-spacing: -.052em;
    max-width: 100%;
    margin-inline: auto;
    font-size: clamp(42px, 11.5vw, 56px);
    line-height: .98;
  }

  .landing-hero__lead, .landing-hero__privacy {
    max-width: 34ch;
    margin-inline: auto;
  }

  .orientation-panel {
    gap: var(--space-4);
    padding: var(--space-5);
  }

  .orientation-question {
    font-size: clamp(22px, 6vw, 28px);
    line-height: 1.18;
  }

  .orientation-option:hover {
    transform: none;
  }

  .orientation-option__content {
    grid-template-columns: 24px minmax(0, 1fr);
    min-height: 60px;
    padding: 12px 14px;
  }

  .shape-tile:nth-child(2n), .shape-tile:nth-child(3n) {
    transform: none;
  }

  .lead-consent__content {
    line-height: 1.5;
  }
}

@media (max-width: 430px) {
  .landing-hero h1 {
    letter-spacing: -.048em;
    max-width: 100%;
    font-size: clamp(38px, 10.8vw, 44px);
    line-height: 1;
  }

  .orientation-panel {
    padding: 18px;
  }

  .orientation-option__content {
    padding-inline: 12px;
  }

  .orientation-option__text {
    font-size: 15px;
    line-height: 1.38;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-header, .landing-header__inner, .landing-segment, .landing-segment__expanded, .landing-segment__compact {
    transition-duration: .01ms !important;
  }
}

.page-section.editorial-conditions {
  background-color: var(--canvas);
  padding-bottom: clamp(44px, 5vw, 72px);
}

.editorial-conditions__layout, .editorial-faq__layout {
  min-width: 0;
}

.editorial-conditions__layout {
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(20px, 2vw, 32px) clamp(40px, 7vw, 96px);
  display: grid;
}

.editorial-conditions__layout > .section-heading {
  align-self: start;
}

.editorial-conditions__details dl {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 20px);
  margin: 0;
  display: grid;
}

.editorial-conditions__details dl > div {
  background-color: var(--surface-muted);
  border-radius: var(--radius-lg);
  min-width: 0;
  padding: clamp(22px, 3vw, 32px);
}

.editorial-conditions__details dt {
  color: var(--text-muted);
  margin-bottom: .7rem;
  font-size: .875rem;
  line-height: 1.35;
}

.editorial-conditions__details dd {
  color: var(--text);
  margin: 0;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 600;
  line-height: 1.35;
}

.editorial-conditions__note {
  background-color: var(--scene-soft);
  border-radius: var(--radius-lg);
  grid-column: 2;
  padding: clamp(20px, 2.4vw, 28px);
}

.editorial-conditions__note p {
  max-width: 54rem;
  margin: 0;
}

.editorial-conditions__safety {
  grid-column: 1 / -1;
}

.editorial-faq__layout {
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
  align-items: start;
  gap: clamp(48px, 8vw, 112px);
  display: grid;
}

.editorial-faq__aside {
  gap: 24px;
  min-width: 0;
  display: grid;
}

.editorial-faq__aside > .section-heading {
  margin: 0;
}

.editorial-faq__aside > p {
  max-width: 31rem;
  margin: 0;
}

.editorial-faq__aside > button {
  justify-self: start;
}

.editorial-faq__accordion {
  min-width: 0;
}

@media (max-width: 960px) {
  .editorial-conditions__layout, .editorial-faq__layout {
    grid-template-columns: 1fr;
  }

  .editorial-conditions__note {
    grid-column: auto;
  }
}

@media (min-width: 961px) {
  .editorial-faq__aside {
    position: sticky;
    top: 120px;
  }
}

@media (max-width: 720px) {
  .editorial-conditions__details dl {
    grid-template-columns: 1fr;
  }
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-pan-x {
  syntax: "*";
  inherits: false
}

@property --tw-pan-y {
  syntax: "*";
  inherits: false
}

@property --tw-pinch-zoom {
  syntax: "*";
  inherits: false
}

@property --tw-scroll-snap-strictness {
  syntax: "*";
  inherits: false;
  initial-value: proximity;
}

@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-divide-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-gradient-position {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}

@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-tracking {
  syntax: "*";
  inherits: false
}

@property --tw-ordinal {
  syntax: "*";
  inherits: false
}

@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

@property --tw-contain-size {
  syntax: "*";
  inherits: false
}

@property --tw-contain-layout {
  syntax: "*";
  inherits: false
}

@property --tw-contain-paint {
  syntax: "*";
  inherits: false
}

@property --tw-contain-style {
  syntax: "*";
  inherits: false
}

@property --tw-text-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-text-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-content {
  syntax: "*";
  inherits: false;
  initial-value: "";
}

@property --tw-border-spacing-x {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-spacing-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ping {
  75%, 100% {
    opacity: 0;
    transform: scale(2);
  }
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

@keyframes enter {
  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0),var(--tw-enter-translate-y, 0),0)scale3d(var(--tw-enter-scale, 1),var(--tw-enter-scale, 1),var(--tw-enter-scale, 1))rotate(var(--tw-enter-rotate, 0));
    filter: blur(var(--tw-enter-blur, 0));
  }
}

@keyframes exit {
  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0),var(--tw-exit-translate-y, 0),0)scale3d(var(--tw-exit-scale, 1),var(--tw-exit-scale, 1),var(--tw-exit-scale, 1))rotate(var(--tw-exit-rotate, 0));
    filter: blur(var(--tw-exit-blur, 0));
  }
}

@keyframes caret-blink {
  0%, 70%, 100% {
    opacity: 1;
  }

  20%, 50% {
    opacity: 0;
  }
}

@keyframes skeleton {
  100% {
    transform: translateX(200%);
  }
}
/*
 * Theraphea landing polish.
 * The values below mirror the canonical HeroUI / project UI Kit scale:
 * Inter Tight, a 4px spacing grid, fixed type roles, 6/8/12/18 radii,
 * and the project motion curves.
 */

:root {
  --app-type-caption-size: 0.75rem;
  --app-type-meta-size: 0.8125rem;
  --app-type-body-sm-size: 0.875rem;
  --app-type-body-size: 1rem;
  --app-type-lead-size: 1.125rem;
  --app-type-heading-4-size: 1.25rem;
  --app-type-heading-3-size: 1.5rem;
  --app-type-heading-2-size: 1.875rem;
  --app-type-heading-1-size: 2.25rem;
  --app-type-display-size: 3rem;
  --app-type-caption-line-height: 1.333;
  --app-type-meta-line-height: 1.385;
  --app-type-body-sm-line-height: 1.5;
  --app-type-body-line-height: 1.55;
  --app-type-lead-line-height: 1.5;
  --app-type-heading-line-height: 1.111;
  --app-type-weight-normal: 400;
  --app-type-weight-medium: 500;
  --app-type-weight-semibold: 600;
  --app-type-weight-bold: 700;
  --app-space-1: 4px;
  --app-space-2: 8px;
  --app-space-3: 12px;
  --app-space-4: 16px;
  --app-space-5: 20px;
  --app-space-6: 24px;
  --app-space-7: 28px;
  --app-space-8: 32px;
  --app-space-10: 40px;
  --app-space-12: 48px;
  --app-space-16: 64px;
  --app-radius-xs: 6px;
  --app-radius-sm: 8px;
  --app-radius-md: 12px;
  --app-radius-lg: 18px;
  --app-radius-full: 999px;
  --app-icon-size-sm: 1rem;
  --app-icon-size-md: 1.25rem;
  --app-icon-size-lg: 1.5rem;
  --app-icon-stroke: 1.8;
  --app-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --app-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --app-duration-hover: 160ms;
  --app-duration-enter: 220ms;
  --app-duration-highlight: 260ms;
  --app-duration-panel: 280ms;
  --landing-section-y: calc(var(--app-space-16) + var(--app-space-8));
}

.landing-page {
  font-family: var(--app-font-family-base);
}

.landing-page,
.landing-page * {
  min-width: 0;
}

.landing-page svg {
  flex: 0 0 auto;
  stroke-width: var(--app-icon-stroke);
}

.page-shell {
  width: min(100% - 48px, 1200px);
}

.page-section {
  padding-block: var(--landing-section-y);
}

.section-kicker,
.landing-hero__eyebrow {
  margin: 0 0 var(--app-space-4);
  text-transform: none !important;
  letter-spacing: -0.01em !important;
}

.section-heading {
  max-width: 720px;
}

.section-heading > div[data-align="center"] {
  margin-inline: auto;
  text-align: center;
}

.section-heading > div[data-align="center"] > p:last-child {
  margin-inline: auto;
}

.section-heading > div > p:last-child,
.orientation-layout > div:first-child > p:last-child,
.mechanism-layout__copy p,
.care-mosaic__copy > p:last-child,
.expert-copy__lead,
.lead-form-copy > p {
  max-width: 62ch;
  margin: var(--app-space-5) 0 0;
  font-size: var(--app-type-body-size) !important;
  line-height: var(--app-type-body-line-height) !important;
}

/* Header: the full controls smoothly cross-fade into the compact circles. */

.landing-header {
  top: max(var(--app-space-4), env(safe-area-inset-top));
  max-width: 1440px;
  transition:
    top 520ms var(--app-ease-emphasized),
    max-width 520ms var(--app-ease-emphasized),
    width 520ms var(--app-ease-emphasized);
  will-change: max-width, top;
}

.landing-header[data-compact="true"] {
  top: max(var(--app-space-3), env(safe-area-inset-top));
  max-width: 900px;
}

.landing-header__inner {
  height: 72px;
  padding: var(--app-space-2) var(--app-space-3) var(--app-space-2) var(--app-space-6);
  border-radius: 24px;
  transition:
    height 520ms var(--app-ease-emphasized),
    padding 520ms var(--app-ease-emphasized),
    border-radius 520ms var(--app-ease-emphasized),
    box-shadow 520ms var(--app-ease-emphasized);
}

.landing-header[data-compact="true"] .landing-header__inner {
  height: 60px;
  padding: var(--app-space-2) var(--app-space-2) var(--app-space-2) var(--app-space-5);
  border-radius: var(--app-radius-lg);
}

.landing-header__nav {
  transition:
    opacity 300ms var(--app-ease-standard),
    transform 420ms var(--app-ease-emphasized);
}

.landing-header[data-compact="true"] .landing-header__nav {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
}

.landing-segment {
  display: grid;
  flex: none;
}

.landing-segment__expanded,
.landing-segment__compact {
  grid-area: 1 / 1;
  transition:
    opacity 260ms var(--app-ease-standard),
    transform 420ms var(--app-ease-emphasized),
    visibility 0s linear 260ms;
}

.landing-segment__expanded {
  display: grid !important;
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.landing-segment__compact {
  display: grid !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.82);
}

.landing-header[data-compact="true"] .landing-segment__expanded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.86);
}

.landing-header[data-compact="true"] .landing-segment__compact {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
  transition-delay: 80ms, 0ms, 0ms;
}

.landing-header__cta,
.landing-primary-button,
.landing-secondary-button {
  transition:
    transform var(--app-duration-hover) var(--app-ease-standard),
    box-shadow var(--app-duration-hover) var(--app-ease-standard),
    background-color var(--app-duration-hover) var(--app-ease-standard),
    border-color var(--app-duration-hover) var(--app-ease-standard);
}

/* HeroUI typography roles replace the former viewport-driven type scale. */

.landing-hero {
  min-height: min(860px, 100svh);
  padding: calc(var(--app-space-16) + var(--app-space-12)) var(--app-space-6) var(--app-space-16);
}

.landing-hero__copy {
  width: min(100%, 860px);
}

.landing-hero__copy h1 {
  max-width: 17ch;
  margin: 0;
  font-size: var(--app-type-display-size) !important;
  font-weight: var(--app-type-weight-semibold) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.05em !important;
  text-wrap: balance;
}

.landing-hero__lead {
  max-width: 58ch;
  margin-top: var(--app-space-6);
  font-size: var(--app-type-lead-size) !important;
  line-height: var(--app-type-lead-line-height) !important;
}

.landing-hero__actions {
  gap: var(--app-space-3);
  margin-top: var(--app-space-8);
}

.landing-hero__privacy {
  gap: var(--app-space-2);
  margin-top: var(--app-space-4);
  font-size: var(--app-type-body-sm-size) !important;
  line-height: var(--app-type-body-sm-line-height) !important;
}

.landing-hero__privacy svg {
  width: var(--app-icon-size-sm);
  height: var(--app-icon-size-sm);
}

/* Visual placeholders keep stable photo ratios without custom SVG drawings. */

.media-marquee {
  padding-block: var(--app-space-8) var(--app-space-16);
}

.media-marquee__viewport {
  padding-block: var(--app-space-5);
  margin-block: calc(var(--app-space-5) * -1);
}

.media-marquee__track {
  gap: var(--app-space-4);
  padding-right: var(--app-space-4);
}

.shape-tile {
  width: 260px;
  height: 396px;
  border-radius: var(--app-radius-lg);
}

.shape-tile:nth-child(3n + 2) {
  width: 312px;
}

.shape-tile:nth-child(4n) {
  width: 224px;
}

.expert-visual__portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.intro-layout {
  grid-template-columns: 48px minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: var(--app-space-8);
}

.intro-layout > p {
  max-width: 58ch;
  font-size: var(--app-type-body-size) !important;
  line-height: var(--app-type-body-line-height) !important;
}

.intro-layout__index {
  font-size: var(--app-type-body-sm-size);
  line-height: var(--app-type-body-sm-line-height);
}

/* Recognition bento: calmer type and a strict 4px rhythm. */

.recognition-grid {
  gap: var(--app-space-3);
  margin-top: var(--app-space-12);
}

.recognition-card {
  gap: var(--app-space-8);
  min-height: 208px;
  padding: var(--app-space-6);
  border-radius: var(--app-radius-lg);
}

.recognition-card__number {
  font-size: var(--app-type-body-sm-size);
  line-height: var(--app-type-body-sm-line-height);
}

.recognition-card p {
  max-width: 32ch;
  font-size: var(--app-type-body-size) !important;
  line-height: var(--app-type-body-line-height) !important;
}

/* First question: canonical HeroUI RadioGroup/Radio, no fieldset overflow. */

.orientation-layout {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: var(--app-space-16);
}

.orientation-layout > div:first-child {
  min-width: 0;
}

.orientation-panel {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: var(--app-space-6);
  border: 1px solid var(--border);
  border-radius: var(--app-radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.orientation-panel [data-slot="radio-group"] {
  width: 100%;
  min-width: 0;
}

.orientation-panel__question {
  display: block;
  max-width: 28ch;
  margin: 0 0 var(--app-space-6);
  color: var(--text);
  font-size: var(--app-type-heading-3-size);
  font-weight: var(--app-type-weight-semibold);
  line-height: var(--app-type-heading-line-height);
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.orientation-options {
  display: grid;
  gap: var(--app-space-2);
  width: 100%;
}

.orientation-option {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: var(--app-radius-md);
  background: transparent;
  transform: none;
}

.orientation-option__content {
  display: flex;
  gap: var(--app-space-3);
  align-items: center;
  width: 100%;
  min-height: 56px;
  padding: var(--app-space-3) var(--app-space-4);
  border: 1px solid var(--border);
  border-radius: var(--app-radius-md);
  background: var(--surface-muted);
  color: var(--text-secondary);
  font-size: var(--app-type-body-size);
  line-height: var(--app-type-body-line-height);
  text-align: left;
  transition:
    border-color var(--app-duration-hover) var(--app-ease-standard),
    background-color var(--app-duration-hover) var(--app-ease-standard),
    transform var(--app-duration-hover) var(--app-ease-standard);
}

.orientation-option__content:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.orientation-option[data-selected] .orientation-option__content {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--border));
  background: var(--accent-soft);
  color: var(--text);
}

.orientation-option__control {
  flex: 0 0 auto;
}

.orientation-result {
  min-height: 0;
  margin-top: var(--app-space-5);
  padding-top: var(--app-space-5);
}

.orientation-result p {
  max-width: 56ch;
  font-size: var(--app-type-body-sm-size) !important;
  line-height: var(--app-type-body-sm-line-height) !important;
}

.orientation-result__empty {
  display: flex;
  gap: var(--app-space-2);
  align-items: flex-start;
}

.orientation-result__empty svg {
  width: var(--app-icon-size-sm);
  height: var(--app-icon-size-sm);
  margin-top: 2px;
}

/* Content sections. */

.mechanism-layout,
.expert-layout,
.lead-form-layout,
.conditions-layout,
.faq-layout {
  gap: var(--app-space-16);
}

.mechanism-layout__copy {
  gap: var(--app-space-5);
}

.care-mosaic {
  min-height: 760px;
}

.care-mosaic__copy {
  width: min(100%, 720px);
  padding-inline: var(--app-space-6);
}

.care-shape {
  overflow: hidden;
  border-radius: var(--app-radius-lg);
}

.help-list {
  gap: 0;
  margin-top: var(--app-space-12);
}

.help-item {
  grid-template-columns: 48px minmax(180px, 0.72fr) minmax(0, 1.28fr) 24px;
  gap: var(--app-space-6);
  padding-block: var(--app-space-6);
  padding-inline: var(--app-space-4);
}

.help-item h3,
.process-list:not(.process-route) h3 {
  font-size: var(--app-type-heading-3-size) !important;
  font-weight: var(--app-type-weight-semibold) !important;
  line-height: var(--app-type-heading-line-height) !important;
  letter-spacing: -0.025em !important;
}

.help-item p,
.process-list:not(.process-route) p {
  font-size: var(--app-type-body-size) !important;
  line-height: var(--app-type-body-line-height) !important;
}

.help-item > svg {
  width: var(--app-icon-size-md);
  height: var(--app-icon-size-md);
}

.process-list {
  gap: var(--app-space-3);
  margin-top: var(--app-space-12);
}

.process-list li {
  padding: var(--app-space-6);
  border-radius: var(--app-radius-lg);
}

.expert-copy ul {
  gap: var(--app-space-3);
  margin-top: var(--app-space-8);
}

.expert-copy li {
  gap: var(--app-space-3);
  padding-block: var(--app-space-3);
  font-size: var(--app-type-body-size);
  line-height: var(--app-type-body-line-height);
}

.expert-copy li svg {
  width: var(--app-icon-size-md);
  height: var(--app-icon-size-md);
}

/* Reviews stay clearly labelled as layouts until verified copy exists. */

.testimonials-section {
  overflow: hidden;
  background: var(--surface-muted);
}

.testimonials-heading-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--app-space-8);
  align-items: end;
}

.testimonials-heading-row .section-heading {
  max-width: 760px;
}

.testimonials-motion-control {
  align-self: end;
  margin-bottom: var(--app-space-1);
}

.testimonials-motion-control svg {
  width: var(--app-icon-size-sm);
  height: var(--app-icon-size-sm);
}

.testimonial-marquee {
  width: 100%;
  margin-top: var(--app-space-12);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.testimonial-marquee__viewport {
  display: flex;
  width: 100%;
  padding-block: var(--app-space-2) var(--app-space-4);
  overflow: hidden;
  outline: none;
}

.testimonial-marquee__viewport:focus-visible {
  box-shadow: inset 0 0 0 2px var(--focus-ring);
}

.testimonial-marquee__track {
  display: flex;
  flex: none;
  align-items: stretch;
  gap: var(--app-space-4);
  min-width: max-content;
  padding-inline-end: var(--app-space-4);
  transform: translate3d(-100%, 0, 0);
  animation: testimonial-marquee-right 72s linear infinite;
  will-change: transform;
}

.testimonial-marquee__viewport[data-running='false'] .testimonial-marquee__track,
.testimonial-marquee__viewport:hover .testimonial-marquee__track,
.testimonial-marquee__viewport:focus-within .testimonial-marquee__track {
  animation-play-state: paused;
}

.testimonial-card {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--app-space-7);
  width: 420px;
  min-height: 350px;
  padding: var(--app-space-7);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--app-radius-lg);
  color: var(--text);
  background: var(--surface);
  box-shadow: none;
  transition:
    border-color var(--app-duration-highlight) var(--app-ease-standard),
    background-color var(--app-duration-highlight) var(--app-ease-standard),
    transform 420ms var(--app-ease-emphasized);
}

.testimonial-card[data-size='compact'] {
  width: 340px;
}

.testimonial-card[data-size='wide'] {
  width: 500px;
}

.testimonial-card[data-featured='true'] {
  border-color: transparent;
  color: #f8f4f0;
  background: var(--scene-ink);
}

.testimonial-card__topline,
.testimonial-card__footer {
  display: flex;
  align-items: center;
}

.testimonial-card__topline {
  justify-content: space-between;
  gap: var(--app-space-5);
}

.testimonial-card__stars {
  display: inline-flex;
  flex: none;
  gap: 3px;
  color: var(--accent);
}

.testimonial-card__stars svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke-width: 1.5;
}

.testimonial-card__label {
  margin: 0;
  text-align: end;
  text-transform: none;
  letter-spacing: 0;
}

.testimonial-card blockquote {
  display: flex;
  flex: 1;
  align-items: center;
  max-width: 28ch;
  margin: 0;
}

.testimonial-card h3 {
  margin: 0;
  overflow-wrap: break-word;
  font-size: var(--app-type-heading-3-size) !important;
  font-weight: var(--app-type-weight-medium) !important;
  line-height: 1.24 !important;
  letter-spacing: -0.025em !important;
}

.testimonial-card__footer {
  gap: var(--app-space-4);
  margin-top: auto;
  padding-top: var(--app-space-5);
  border-top: 1px solid var(--border);
}

.testimonial-card__avatar {
  display: inline-grid;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  color: var(--text-secondary);
  background: var(--surface-muted);
}

.testimonial-card__avatar svg {
  width: var(--app-icon-size-sm);
  height: var(--app-icon-size-sm);
}

.testimonial-card__byline {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.testimonial-card__meta,
.testimonial-card__context {
  margin: 0;
}

.testimonial-card[data-featured='true'] .testimonial-card__stars {
  color: #f1d1a7;
}

.testimonial-card[data-featured='true'] blockquote .typography,
.testimonial-card[data-featured='true'] .testimonial-card__meta {
  color: inherit !important;
}

.testimonial-card[data-featured='true'] .testimonial-card__label,
.testimonial-card[data-featured='true'] .testimonial-card__context {
  color: rgb(248 244 240 / 68%) !important;
}

.testimonial-card[data-featured='true'] .testimonial-card__footer {
  border-color: rgb(248 244 240 / 18%);
}

.testimonial-card[data-featured='true'] .testimonial-card__avatar {
  color: #f8f4f0;
  background: rgb(248 244 240 / 12%);
}

@keyframes testimonial-marquee-right {
  from {
    transform: translate3d(-100%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

/* Project MotionAccordion, using HeroUI's compound Accordion API. */

.faq-layout {
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
}

/* HeroUI form primitives: layout only; visual states remain library-owned. */

.lead-form-shell {
  min-width: 0;
}

.lead-form {
  gap: var(--app-space-5);
  padding: var(--app-space-8);
  border-radius: var(--app-radius-lg);
}

.lead-field {
  gap: var(--app-space-2);
}

.lead-field > [data-slot="label"],
.lead-field > label {
  font-size: var(--app-type-body-sm-size);
  font-weight: var(--app-type-weight-medium);
  line-height: var(--app-type-body-sm-line-height);
}

.lead-consent {
  display: block;
  color: var(--text-muted);
  font-size: var(--app-type-body-sm-size);
  line-height: var(--app-type-body-sm-line-height);
}

.lead-consent__content {
  display: flex;
  gap: var(--app-space-3);
  align-items: flex-start;
  width: 100%;
}

.lead-consent__content [data-slot="checkbox-control"] {
  flex: 0 0 auto;
  margin-top: 1px;
}

.lead-form-trust {
  gap: var(--app-space-3);
  margin-top: var(--app-space-6);
  padding: var(--app-space-4);
  border-radius: var(--app-radius-md);
}

.lead-form-trust svg {
  width: var(--app-icon-size-md);
  height: var(--app-icon-size-md);
}

.lead-form-success > div {
  display: grid;
  gap: var(--app-space-4);
}

.lead-form-success h3 {
  margin: 0;
  font-size: var(--app-type-heading-3-size) !important;
  line-height: var(--app-type-heading-line-height) !important;
}

@media (max-width: 1080px) {
  :root {
    --landing-section-y: calc(var(--app-space-16) + var(--app-space-4));
  }

  .landing-header {
    width: calc(100% - var(--app-space-6));
  }

  .landing-header__nav {
    display: none;
  }

  .landing-header__inner {
    grid-template-columns: 1fr auto;
  }

  .orientation-layout,
  .mechanism-layout,
  .expert-layout,
  .lead-form-layout,
  .conditions-layout,
  .faq-layout {
    grid-template-columns: 1fr;
    gap: var(--app-space-12);
  }

  .orientation-layout > div:first-child,
  .mechanism-layout > div:first-child,
  .expert-copy,
  .lead-form-copy,
  .conditions-layout .section-heading,
  .faq-layout .section-heading {
    max-width: 720px;
  }

  .testimonials-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .testimonial-card:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  :root {
    --landing-section-y: var(--app-space-16);
  }

  .page-shell {
    width: min(100% - var(--app-space-8), 1200px);
  }

  .page-section {
    scroll-margin-top: 80px;
  }

  .landing-header,
  .landing-header[data-compact="true"] {
    top: max(var(--app-space-2), env(safe-area-inset-top));
    width: calc(100% - var(--app-space-4));
    max-width: none;
  }

  .landing-header__inner,
  .landing-header[data-compact="true"] .landing-header__inner {
    height: 60px;
    padding: var(--app-space-2) var(--app-space-2) var(--app-space-2) var(--app-space-4);
    border-radius: var(--app-radius-lg);
  }

  .landing-header__actions {
    gap: var(--app-space-2);
  }

  .landing-segment__expanded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.86);
  }

  .landing-segment__compact,
  .landing-header[data-compact="true"] .landing-segment__compact {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
  }

  .landing-header__cta {
    min-width: 44px;
    width: 44px;
    padding-inline: 0;
  }

  .landing-header__cta-full,
  .landing-header__cta-short {
    display: none !important;
  }

  .landing-hero {
    min-height: 720px;
    padding: calc(var(--app-space-16) + var(--app-space-12)) var(--app-space-4) var(--app-space-12);
  }

  .landing-hero__copy h1 {
    max-width: 15ch;
    font-size: var(--app-type-heading-1-size) !important;
    line-height: 1.06 !important;
  }

  .landing-hero__lead {
    margin-top: var(--app-space-5);
    font-size: var(--app-type-body-size) !important;
    line-height: var(--app-type-body-line-height) !important;
  }

  .landing-hero__actions {
    align-items: stretch;
    margin-top: var(--app-space-6);
  }

  .landing-hero__actions > * {
    width: 100%;
  }

  .shape-tile {
    width: 216px;
    height: 332px;
  }

  .shape-tile:nth-child(3n + 2) {
    width: 248px;
  }

  .shape-tile:nth-child(4n) {
    width: 192px;
  }

  .intro-layout {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: var(--app-space-4);
  }

  .intro-layout > p {
    grid-column: 2;
  }

  .recognition-grid {
    grid-template-columns: 1fr;
    margin-top: var(--app-space-8);
  }

  .recognition-card {
    min-height: 0;
    padding: var(--app-space-5);
  }

  .orientation-layout {
    gap: var(--app-space-8);
  }

  .orientation-panel {
    padding: var(--app-space-4);
  }

  .orientation-panel__question {
    max-width: 24ch;
    margin-bottom: var(--app-space-5);
    font-size: var(--app-type-heading-4-size);
    line-height: 1.25;
  }

  .orientation-option__content {
    min-height: 56px;
    padding: var(--app-space-3);
  }

  .care-mosaic {
    min-height: 620px;
  }

  .care-mosaic__copy {
    padding-inline: var(--app-space-4);
  }

  .help-list,
  .process-list,
  .testimonials-grid {
    margin-top: var(--app-space-8);
  }

  .help-item {
    grid-template-columns: 36px minmax(0, 1fr) 20px;
    gap: var(--app-space-4);
  }

  .help-item h3 {
    grid-column: 2;
  }

  .help-item p {
    grid-column: 2 / -1;
  }

  .help-item > svg {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .process-list,
  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  .testimonial-card:first-child {
    grid-column: auto;
  }

  .testimonial-card {
    min-height: 280px;
    padding: var(--app-space-6);
  }

  .lead-form {
    padding: var(--app-space-5);
  }
}

@media (max-width: 420px) {
  .landing-brand img {
    width: 108px;
  }

  .landing-header__actions {
    gap: var(--app-space-1);
  }

  .landing-segment__compact,
  .landing-header__cta {
    width: 42px;
    height: 42px;
  }

  .landing-hero {
    padding-inline: var(--app-space-4);
  }

  .orientation-panel,
  .lead-form,
  .testimonial-card {
    padding: var(--app-space-4);
  }

  .orientation-option__content {
    font-size: var(--app-type-body-sm-size);
    line-height: var(--app-type-body-sm-line-height);
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-header,
  .landing-header__inner,
  .landing-header__nav,
  .landing-segment__expanded,
  .landing-segment__compact {
    transition-duration: 0.01ms !important;
  }
}

/* Process route V3: connected route with phase labels, no numeric badges. */
.process-list.process-route {
  position: relative;
  display: flex;
  gap: 0;
  align-items: stretch;
  margin-top: var(--app-space-12);
  padding: 0;
  overflow: hidden;
  list-style: none;
  border-block: 1px solid var(--border);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface) 58%, transparent),
      color-mix(in srgb, var(--surface-muted) 28%, transparent)
    );
}

.process-list.process-route::before {
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  height: 1px;
  content: '';
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--accent) 46%, var(--border)),
    transparent
  );
  opacity: 0.48;
  pointer-events: none;
}

.process-list.process-route > .process-route__step {
  position: relative;
  isolation: isolate;
  display: grid;
  flex: 1 1 0;
  grid-template-rows: auto 1fr;
  min-height: 292px;
  min-width: 0;
  padding: var(--app-space-6);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition:
    flex 560ms var(--app-ease-emphasized),
    background-color var(--app-duration-highlight) var(--app-ease-standard);
}

.process-list.process-route > .process-route__step::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: '';
  background:
    radial-gradient(
      circle at 22% 18%,
      color-mix(in srgb, var(--accent-soft) 80%, transparent),
      transparent 46%
    ),
    linear-gradient(135deg, color-mix(in srgb, var(--surface-hover) 78%, transparent), transparent 62%);
  opacity: 0;
  transform: translateY(var(--app-space-2));
  transition:
    opacity 520ms var(--app-ease-standard),
    transform 560ms var(--app-ease-emphasized);
}

.process-list.process-route > .process-route__step + .process-route__step {
  border-inline-start: 1px solid var(--border);
}

.process-list.process-route > .process-route__step > .process-route__marker {
  display: grid;
  grid-template-columns: auto minmax(var(--app-space-8), 1fr) var(--app-icon-size-md);
  gap: var(--app-space-3);
  align-items: center;
  width: 100%;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--text-muted);
  background: transparent;
  font-size: inherit;
  font-weight: inherit;
}

.process-route__phase {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 var(--app-space-4);
  border: 1px solid var(--border);
  border-radius: var(--app-radius-full);
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  font-size: var(--app-type-caption-size);
  font-weight: var(--app-type-weight-semibold);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: none;
  white-space: nowrap;
  transition:
    border-color var(--app-duration-highlight) var(--app-ease-standard),
    color var(--app-duration-highlight) var(--app-ease-standard),
    background-color var(--app-duration-highlight) var(--app-ease-standard),
    transform var(--app-duration-highlight) var(--app-ease-standard);
}

.process-route__line {
  position: relative;
  display: block;
  height: 1px;
  overflow: hidden;
  background: var(--border);
}

.process-route__line::after {
  position: absolute;
  inset: 0;
  display: block;
  content: '';
  background: var(--text-muted);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 620ms var(--app-ease-emphasized);
}

.process-route__marker svg {
  width: var(--app-icon-size-sm);
  height: var(--app-icon-size-sm);
  color: var(--text-muted);
  transition:
    color var(--app-duration-highlight) var(--app-ease-standard),
    transform var(--app-duration-highlight) var(--app-ease-standard);
}

.process-route__copy {
  display: grid;
  align-self: end;
  gap: var(--app-space-4);
  max-width: 28rem;
  margin-top: var(--app-space-16);
}

.process-route__copy h3,
.process-route__copy p {
  margin: 0;
}

@media (hover: hover) and (pointer: fine) {
  .process-list.process-route > .process-route__step:hover {
    flex-grow: 1.14;
    background: color-mix(in srgb, var(--surface-hover) 58%, transparent);
  }

  .process-list.process-route > .process-route__step:hover::before {
    opacity: 1;
    transform: translateY(0);
  }

  .process-list.process-route > .process-route__step:hover .process-route__phase {
    border-color: var(--text);
    color: var(--surface);
    background: var(--text);
    transform: translateY(-1px);
  }

  .process-list.process-route > .process-route__step:hover .process-route__line::after {
    transform: scaleX(1);
  }

  .process-list.process-route > .process-route__step:hover .process-route__marker svg {
    color: var(--text);
    transform: translateX(var(--app-space-1));
  }
}

@media (max-width: 760px) {
  .process-list.process-route {
    flex-direction: column;
    margin-top: var(--app-space-8);
  }

  .process-list.process-route > .process-route__step,
  .process-list.process-route > .process-route__step:hover {
    display: grid;
    flex: none;
    grid-template-columns: minmax(86px, auto) minmax(0, 1fr);
    grid-template-rows: auto;
    column-gap: var(--app-space-5);
    min-height: 0;
    padding: var(--app-space-5) 0;
    overflow: visible;
    background: transparent;
  }

  .process-list.process-route > .process-route__step::before {
    display: none;
  }

  .process-list.process-route > .process-route__step + .process-route__step {
    border-block-start: 1px solid var(--border);
    border-inline-start: 0;
  }

  .process-list.process-route > .process-route__step > .process-route__marker {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    gap: var(--app-space-3);
  }

  .process-route__phase {
    min-height: 30px;
    padding-inline: var(--app-space-3);
  }

  .process-route__line {
    width: 1px;
    min-height: var(--app-space-10);
    height: 100%;
  }

  .process-route__line::after {
    transform: scaleY(0);
    transform-origin: top center;
  }

  .process-route__marker svg {
    transform: rotate(90deg);
  }

  .process-route__copy {
    grid-column: 2;
    align-self: start;
    gap: var(--app-space-3);
    max-width: none;
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .process-list.process-route > .process-route__step,
  .process-list.process-route > .process-route__step::before,
  .process-route__phase,
  .process-route__line::after,
  .process-route__marker svg {
    transition-duration: 0.01ms;
  }
}


@media (hover: hover) and (pointer: fine) {
  .testimonial-card:hover {
    border-color: var(--border-strong);
    background: var(--surface-hover);
    transform: translateY(-4px);
  }

  .testimonial-card[data-featured='true']:hover {
    border-color: rgb(248 244 240 / 24%);
    background: var(--scene-ink);
  }
}

@media (max-width: 760px) {
  .testimonials-heading-row {
    grid-template-columns: 1fr;
    gap: var(--app-space-6);
  }

  .testimonials-motion-control {
    justify-self: start;
    margin-bottom: 0;
  }

  .testimonial-marquee {
    margin-top: var(--app-space-8);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }

  .testimonial-marquee__track {
    gap: var(--app-space-3);
    padding-inline-end: var(--app-space-3);
    animation-duration: 58s;
  }

  .testimonial-card,
  .testimonial-card[data-size='compact'],
  .testimonial-card[data-size='wide'] {
    width: min(82vw, 350px);
    min-height: 320px;
    gap: var(--app-space-6);
    padding: var(--app-space-6);
  }

  .testimonial-card h3 {
    font-size: var(--app-type-heading-4-size) !important;
  }

  .testimonial-card__topline {
    align-items: flex-start;
  }

  .testimonial-card__label {
    max-width: 12ch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .testimonials-motion-control {
    display: none;
  }

  .testimonial-marquee {
    padding-inline: var(--app-space-4);
    -webkit-mask-image: none;
    mask-image: none;
  }

  .testimonial-marquee__viewport {
    gap: var(--app-space-4);
    padding-bottom: var(--app-space-6);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }

  .testimonial-marquee__track {
    transform: none;
    animation: none;
    will-change: auto;
  }

  .testimonial-marquee__track[aria-hidden='true'] {
    display: none;
  }

  .testimonial-card {
    scroll-snap-align: start;
    transition: none;
  }
}

/* Lead form and local legal footer: flat surfaces, HeroUI-owned controls. */
.lead-form-section {
  background: var(--surface-muted);
  background-image: none;
}

.lead-form,
.lead-form-success {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  box-shadow: none;
}

.lead-form {
  --field-background: var(--canvas);
  --field-border: color-mix(in srgb, var(--border-strong) 82%, var(--text));
  --field-border-hover: color-mix(in srgb, var(--border-strong) 58%, var(--text));
  --field-hover: color-mix(in srgb, var(--surface-hover) 76%, var(--surface));
  --field-focus: color-mix(in srgb, var(--surface) 92%, var(--focus) 8%);
  --field-border-focus: var(--focus);
  --field-shadow: 0 0 #0000;
}

.lead-field {
  display: flex;
  flex-direction: column;
  gap: var(--app-space-2);
  min-width: 0;
}

.lead-field > [data-slot="label"],
.lead-field > label {
  color: var(--text-secondary);
}

.lead-field [data-slot="input"],
.lead-field [data-slot="textarea"],
.lead-field input,
.lead-field textarea {
  width: 100%;
  border: 1px solid var(--field-border);
  border-radius: var(--app-radius-md);
  color: var(--field-foreground);
  background: var(--field-background);
  box-shadow: none;
  transition: none;
}

.lead-field [data-slot="input"],
.lead-field input {
  min-height: 54px;
  padding-inline: var(--app-space-4);
}

.lead-field [data-slot="textarea"],
.lead-field textarea {
  min-height: 132px;
  padding: var(--app-space-4);
  line-height: var(--app-type-body-line-height);
  resize: vertical;
}

.lead-field [data-slot="input"]:hover:not(:disabled),
.lead-field [data-slot="textarea"]:hover:not(:disabled),
.lead-field input:hover:not(:disabled),
.lead-field textarea:hover:not(:disabled) {
  border-color: var(--field-border-hover);
  background: var(--field-hover);
}

.lead-field [data-slot="input"]::placeholder,
.lead-field [data-slot="textarea"]::placeholder,
.lead-field input::placeholder,
.lead-field textarea::placeholder {
  color: var(--field-placeholder);
  opacity: 1;
}

.lead-consent__content {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--app-space-3);
  align-items: start;
  width: 100%;
  padding: var(--app-space-4);
  border: 1px solid var(--border);
  border-radius: var(--app-radius-md);
  color: var(--text-secondary);
  background: var(--field-background);
  cursor: pointer;
  user-select: none;
}

.lead-consent__control {
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 1px solid var(--field-border);
  border-radius: var(--app-radius-sm);
  color: transparent;
  background: var(--surface);
  transition:
    color var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out),
    background-color var(--motion-fast) var(--ease-out);
}

.lead-consent__indicator {
  width: 14px;
  height: 14px;
}

.lead-consent[data-hovered="true"] .lead-consent__control,
.lead-consent__content[data-hovered="true"] .lead-consent__control {
  border-color: var(--field-border-hover);
}

.lead-consent[data-selected="true"] .lead-consent__control,
.lead-consent__content[data-selected="true"] .lead-consent__control,
.lead-consent__content[aria-checked="true"] .lead-consent__control {
  border-color: var(--text);
  color: var(--surface);
  background: var(--text);
}

.lead-consent[data-focus-visible="true"] .lead-consent__control,
.lead-consent__content[data-focus-visible="true"] .lead-consent__control {
  outline: 3px solid color-mix(in srgb, var(--focus) 32%, transparent);
  outline-offset: 3px;
}

.lead-form__legal-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--app-space-1) var(--app-space-2);
  color: var(--text-muted);
  font-size: var(--app-type-body-sm-size);
  line-height: var(--app-type-body-sm-line-height);
}

.lead-form__legal-links [data-slot="button"] {
  min-height: 32px;
  padding-inline: var(--app-space-2);
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.landing-footer {
  padding: var(--app-space-12) 0 max(var(--app-space-6), env(safe-area-inset-bottom));
  background: var(--surface);
}

.landing-footer__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 1.6fr) auto;
  gap: var(--app-space-10);
  align-items: start;
}

.landing-footer__brand {
  display: grid;
  gap: var(--app-space-4);
  max-width: 30ch;
}

.landing-footer__brand img {
  width: 120px;
  height: auto;
}

.landing-footer__brand p {
  margin: 0;
}

.landing-footer__legal {
  display: grid;
  gap: var(--app-space-3);
}

.landing-footer__legal h2,
.landing-footer__contact > span {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--app-type-body-sm-size) !important;
  font-weight: var(--app-type-weight-medium);
  line-height: var(--app-type-body-sm-line-height) !important;
}

.landing-footer__legal > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--app-space-1) var(--app-space-2);
}

.landing-footer__legal [data-slot="button"] {
  min-height: 36px;
  padding-inline: var(--app-space-2);
  justify-content: flex-start;
  color: var(--text-secondary);
}

.landing-footer__contact {
  display: grid;
  gap: var(--app-space-3);
  justify-items: start;
}

.landing-footer__contact a {
  color: var(--link);
  font-size: var(--app-type-body-sm-size);
  line-height: var(--app-type-body-sm-line-height);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.landing-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--app-space-6);
  margin-top: var(--app-space-10);
  padding-top: var(--app-space-5);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--app-type-caption-size);
  line-height: var(--app-type-caption-line-height);
}

.landing-legal-dialog {
  width: min(960px, calc(100vw - var(--app-space-8)));
  max-height: min(90svh, 920px);
  color: var(--text);
  background: var(--surface);
}

.landing-legal-dialog__header {
  padding: var(--app-space-8) var(--app-space-8) var(--app-space-6);
  border-bottom: 1px solid var(--border);
}

.landing-legal-dialog__header > div {
  display: grid;
  gap: var(--app-space-3);
  max-width: 70ch;
  padding-right: var(--app-space-8);
}

.landing-legal-dialog__header .section-kicker,
.landing-legal-dialog__header p {
  margin: 0;
}

.landing-legal-dialog__header [data-slot="heading"] {
  margin: 0;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: var(--app-type-weight-semibold);
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.landing-legal-dialog__close {
  width: 44px;
  height: 44px;
}

.landing-legal-dialog__body {
  display: grid;
  min-width: 0;
  gap: var(--app-space-6);
  padding: var(--app-space-6) var(--app-space-8);
}

.landing-legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--app-space-2);
  padding-bottom: var(--app-space-5);
  border-bottom: 1px solid var(--border);
}

.landing-legal-nav [data-slot="button"] {
  white-space: normal;
  text-align: left;
}

.landing-legal-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--app-space-6);
  align-items: start;
}

.landing-legal-meta > p {
  max-width: 56ch;
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--app-type-body-sm-size);
  line-height: var(--app-type-body-sm-line-height);
}

.landing-legal-meta dl {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--app-space-3) var(--app-space-5);
  margin: 0;
}

.landing-legal-meta dl > div {
  display: grid;
  gap: 2px;
}

.landing-legal-meta dt {
  color: var(--text-muted);
  font-size: var(--app-type-caption-size);
}

.landing-legal-meta dd {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--app-type-body-sm-size);
}

.landing-legal-document {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 0;
  max-width: 74ch;
}

.landing-legal-document blockquote {
  display: grid;
  gap: var(--app-space-3);
  margin: 0 0 var(--app-space-6);
  padding: var(--app-space-5);
  border-radius: var(--app-radius-md);
  color: var(--text-secondary);
  background: var(--surface-muted);
}

.landing-legal-document blockquote p {
  margin: 0;
}

.landing-legal-document > section {
  min-width: 0;
  padding: var(--app-space-6) 0;
  border-top: 1px solid var(--border);
}

.landing-legal-document h3 {
  margin: 0 0 var(--app-space-4);
  font-size: var(--app-type-heading-3-size);
  line-height: var(--app-type-heading-line-height);
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.landing-legal-document p,
.landing-legal-document li {
  color: var(--text-secondary);
  font-size: var(--app-type-body-size);
  line-height: var(--app-type-body-line-height);
}

.landing-legal-document p {
  margin: 0 0 var(--app-space-4);
}

.landing-legal-document ul,
.landing-legal-document ol {
  display: grid;
  gap: var(--app-space-2);
  margin: 0 0 var(--app-space-4);
  padding-left: var(--app-space-6);
}

.landing-legal-document__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--app-space-3);
}

.landing-legal-document__links a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 4px;
}



.landing-legal-dialog__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--app-space-4);
  padding: var(--app-space-4) var(--app-space-8);
  border-top: 1px solid var(--border);
}

.landing-legal-dialog__footer p {
  margin: 0;
}

@media (max-width: 860px) {
  .landing-footer__main {
    grid-template-columns: 1fr;
    gap: var(--app-space-8);
  }

  .landing-legal-meta {
    grid-template-columns: 1fr;
  }

  .landing-legal-meta dl {
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  .lead-form,
  .lead-form-success {
    border-radius: var(--app-radius-md);
  }

  .lead-form__legal-links {
    align-items: flex-start;
  }

  .landing-footer {
    padding-top: var(--app-space-10);
  }

  .landing-footer__bottom {
    flex-direction: column;
    gap: var(--app-space-2);
  }

  .landing-legal-dialog {
    width: calc(100vw - var(--app-space-4));
    max-height: calc(100svh - var(--app-space-4));
  }

  .landing-legal-dialog__header,
  .landing-legal-dialog__body,
  .landing-legal-dialog__footer {
    padding-inline: var(--app-space-4);
  }

  .landing-legal-dialog__header {
    padding-top: var(--app-space-6);
  }

  .landing-legal-dialog__header > div {
    padding-right: var(--app-space-10);
  }

  .landing-legal-nav {
    display: grid;
    grid-template-columns: 1fr;
  }

  .landing-legal-nav [data-slot="button"] {
    width: 100%;
    justify-content: flex-start;
  }

  .landing-legal-document h3 {
    font-size: clamp(1.25rem, 7vw, 1.65rem);
  }
}




/*
 * Final responsive guardrail for the isolated landing lab.
 * It intentionally sits after styles.css and polish.css so HeroUI components
 * keep their canonical styling while the page shell cannot grow past the
 * viewport on narrow devices.
 */

html,
body,
#root {
  inline-size: 100%;
  max-inline-size: 100%;
  overflow-x: clip;
}

.landing-page {
  inline-size: 100%;
  max-inline-size: 100%;
  overflow-x: clip;
}

.landing-page main,
.landing-page section,
.landing-hero,
.landing-hero__copy,
.landing-hero__copy > *,
.page-shell {
  max-inline-size: 100%;
}

.landing-hero__copy {
  margin-inline: auto;
}

.landing-hero__copy h1,
.landing-hero__eyebrow,
.landing-hero__lead {
  overflow-wrap: normal;
  word-break: normal;
}

@media (max-width: 760px) {
  .landing-header,
  .landing-header[data-compact="true"] {
    left: 50%;
    right: auto;
    inline-size: calc(100% - 16px);
    max-inline-size: calc(100% - 16px);
    transform: translateX(-50%);
  }

  .landing-header__inner,
  .landing-header[data-compact="true"] .landing-header__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 4px;
    inline-size: 100%;
    padding: 8px 8px 8px 12px;
  }

  .landing-brand {
    inline-size: min(96px, 100%);
    max-inline-size: 96px;
    overflow: hidden;
  }

  .landing-brand img {
    inline-size: 96px;
    max-inline-size: 100%;
    height: auto;
  }

  .landing-header__actions {
    display: grid;
    grid-template-columns: repeat(3, 40px);
    gap: 4px;
    inline-size: 128px;
    max-inline-size: 128px;
  }

  .landing-segment {
    inline-size: 40px;
    block-size: 40px;
  }

  .landing-segment__compact,
  .landing-header[data-compact="true"] .landing-segment__compact,
  .landing-header__cta {
    inline-size: 40px !important;
    min-inline-size: 40px !important;
    block-size: 40px !important;
    min-block-size: 40px !important;
    padding: 0 !important;
  }

  .landing-hero {
    inline-size: 100%;
    padding-inline: 16px;
  }

  .landing-hero__copy {
    inline-size: 100%;
    max-inline-size: 100%;
  }

  .landing-hero__copy h1 {
    inline-size: 100%;
    max-inline-size: 15ch;
    margin-inline: auto;
  }

  .landing-hero__eyebrow,
  .landing-hero__lead,
  .landing-hero__actions,
  .landing-hero__privacy {
    inline-size: 100%;
    max-inline-size: 100%;
    margin-inline: auto;
  }

  .landing-hero__actions > * {
    min-inline-size: 0 !important;
    max-inline-size: 100%;
  }
}

@media (max-width: 420px) {
  .landing-header__inner,
  .landing-header[data-compact="true"] .landing-header__inner {
    padding-left: 10px;
  }

  .landing-brand,
  .landing-brand img {
    inline-size: 92px;
    max-inline-size: 92px;
  }

  .landing-hero__copy h1 {
    max-inline-size: 100%;
    font-size: 36px !important;
    line-height: 1.06 !important;
    letter-spacing: -0.04em !important;
  }

  .landing-primary-button,
  .landing-secondary-button {
    inline-size: 100%;
    max-inline-size: 100%;
    padding-inline: 16px;
    white-space: normal;
  }
}

@media (max-width: 350px) {
  .landing-brand,
  .landing-brand img {
    inline-size: 76px;
    max-inline-size: 76px;
  }

  .landing-header__actions {
    grid-template-columns: repeat(3, 38px);
    inline-size: 122px;
    max-inline-size: 122px;
  }

  .landing-segment,
  .landing-segment__compact,
  .landing-header[data-compact="true"] .landing-segment__compact,
  .landing-header__cta {
    inline-size: 38px !important;
    min-inline-size: 38px !important;
    block-size: 38px !important;
    min-block-size: 38px !important;
  }
}
/*
 * motion/react owns the transform property on the header for its tiny y-shift.
 * Center the fixed shell with auto margins instead, so that inline transform
 * never cancels the horizontal translate used by the base prototype.
 */

.landing-header,
.landing-header[data-compact="true"] {
  left: 0 !important;
  right: 0 !important;
  margin-inline: auto;
  transform: none !important;
}

@media (max-width: 760px) {
  .landing-header,
  .landing-header[data-compact="true"] {
    left: 8px !important;
    right: 8px !important;
    inline-size: auto;
    max-inline-size: none;
    margin-inline: 0;
  }
}
@media (max-width: 760px) {
  .landing-header__cta svg {
    display: block !important;
    inline-size: 18px;
    block-size: 18px;
    margin: 0;
  }
}

.testimonial-card:first-child blockquote .typography {
  color: inherit !important;
}
/*
 * Canonical hero composition for the local landing lab.
 * The explicit root scope wins over legacy prototype icon rules without
 * changing any shared HeroUI component.
 */

.landing-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 860px);
  margin-inline: auto;
  text-align: center;
}

.landing-hero__copy > .typography,
.landing-hero__copy > h1 {
  width: 100%;
  text-align: center;
}

.landing-hero__copy h1,
.landing-hero__eyebrow,
.landing-hero__lead,
.landing-hero__privacy {
  margin-inline: auto;
}

.landing-hero__actions,
.landing-hero__privacy {
  justify-content: center;
}

html body #root .landing-page .landing-hero .landing-hero__actions svg,
html body #root .landing-page .landing-hero .landing-hero__privacy svg {
  display: none;
}
/*
 * Intro section cleanup:
 * - remove the orphaned "01";
 * - use a clean two-column desktop composition;
 * - keep both text blocks left-aligned;
 * - collapse to one column on mobile.
 */

.landing-page .intro-layout {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(48px, 8vw, 128px);
}

.landing-page .intro-layout__index {
  display: none;
}

.landing-page .intro-layout h2,
.landing-page .intro-layout > p:last-child {
  text-align: left;
}

.landing-page .intro-layout h2 {
  grid-column: 1;
  justify-self: start;
}

.landing-page .intro-layout > p:last-child {
  grid-column: 2;
  justify-self: start;
}

@media (max-width: 760px) {
  .landing-page .intro-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--app-space-6);
  }

  .landing-page .intro-layout h2,
  .landing-page .intro-layout > p:last-child {
    grid-column: 1;
  }
}
/*
 * Recognition feature card:
 * keep the large tile visually prominent through scale only, without a glow,
 * directional highlight, side accent, or uneven edge contrast.
 */

.landing-page .recognition-card--1 {
  border-color: color-mix(in srgb, var(--border) 72%, transparent);
  outline: none;
  background: color-mix(
    in srgb,
    var(--surface) 88%,
    var(--scene-soft) 12%
  );
  box-shadow: none;
  filter: none;
}

.landing-page .recognition-card--1::before,
.landing-page .recognition-card--1::after {
  content: none;
}
/* The featured tile is separated by its tinted surface, so it needs no edge. */

.landing-page .recognition-card--1 {
  border-color: transparent;
}
/*
 * First-step section:
 * restore the canonical HeroUI radio geometry and reserve a square visual
 * below the copy for the future editorial photograph.
 */

.landing-page .orientation-panel,
.landing-page .orientation-options,
.landing-page .orientation-option,
.landing-page .orientation-option__content {
  overflow: visible;
}

.landing-page .orientation-panel .orientation-option__control {
  position: relative;
  display: inline-flex;
  flex: 0 0 16px;
  align-items: center;
  justify-content: center;
  inline-size: 16px;
  block-size: 16px;
  margin: 0;
  border: var(--border-width-field) solid var(--field-border);
  border-radius: 999px;
  background: var(--default);
  box-shadow: none;
}

.landing-page
  .orientation-panel
  .orientation-option[data-selected]
  .orientation-option__control,
.landing-page
  .orientation-panel
  .orientation-option:has(input:checked)
  .orientation-option__control {
  border-color: transparent;
  background: var(--accent);
}

.landing-page .orientation-panel .radio__indicator {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing-page .orientation-layout > div:first-child::after {
  content: "";
  display: block;
  width: min(100%, 360px);
  aspect-ratio: 1;
  margin-top: var(--app-space-10);
  border: 1px solid var(--border);
  border-radius: var(--app-radius-lg);
  background:
    radial-gradient(
      circle at 66% 29%,
      color-mix(in srgb, var(--scene-c) 58%, var(--surface)) 0 10.5%,
      transparent 11%
    ),
    radial-gradient(
      ellipse at 50% 106%,
      color-mix(in srgb, var(--scene-ink) 28%, var(--surface)) 0 38%,
      transparent 38.5%
    ),
    color-mix(in srgb, var(--scene-soft) 72%, var(--surface));
}

@media (max-width: 760px) {
  .landing-page .orientation-layout > div:first-child::after {
    width: 100%;
    margin-top: var(--app-space-8);
  }
}
/*
 * Keep the control on HeroUI's primary radio treatment. The previous local
 * polish layer removed its field shadow, which made the 16px control disappear
 * against the option surface in the light theme.
 */
.landing-page .orientation-panel .orientation-option__control {
  box-shadow: var(--shadow-field);
}
/*
 * The project theme resolves HeroUI's field border width to 0px. On these
 * similarly coloured option surfaces that erases the unselected 16px radio.
 * Keep HeroUI's semantic field-border colour, with the smallest visible edge.
 */
.landing-page .orientation-panel .orientation-option__control {
  border-width: 1px;
  border-style: solid;
  border-color: var(--field-border);
}

.landing-page
  .orientation-panel
  .orientation-option[data-selected]
  .orientation-option__control,
.landing-page
  .orientation-panel
  .orientation-option:has(input:checked)
  .orientation-option__control {
  border-color: transparent;
}
/*
 * Final mobile navigation layer.
 * Reuses the project's DashboardMobileDrawer / HeroUI v3 bottom sheet.
 */

.landing-mobile-menu__trigger {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .landing-header__cta:hover,
  .landing-primary-button:hover,
  .landing-secondary-button:hover,
  .orientation-option:hover,
  .orientation-tabs__tab:hover {
    transform: none !important;
  }
}

.landing-mobile-nav {
  --app-drawer-panel-bg: var(--surface);
  --app-drawer-title: var(--text);
  --app-drawer-muted: var(--text-muted);
  --app-drawer-control-bg: color-mix(in srgb, var(--surface-hover) 78%, transparent);
  --app-drawer-control-hover: var(--surface-hover);

  z-index: 400;
  background: rgb(20 17 23 / 46%);
}

.landing-mobile-nav[data-exiting="true"] {
  pointer-events: none;
}

.landing-mobile-nav [data-slot="drawer-content"] {
  width: 100%;
}

.landing-mobile-nav [data-slot="drawer-dialog"][data-placement="bottom"] {
  max-height: min(85svh, var(--visual-viewport-height, 100svh));
  border: 0;
  border-radius: var(--app-radius-xl) var(--app-radius-xl) 0 0;
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 -18px 52px rgb(24 19 27 / 16%);
}

.landing-mobile-nav [data-slot="drawer-header"] {
  padding-inline: var(--app-space-5);
}

.landing-mobile-nav [data-slot="drawer-heading"] {
  color: var(--text);
  font-size: var(--app-type-heading-3-size);
  font-weight: 620;
  letter-spacing: -0.025em;
}

.landing-mobile-nav [data-slot="drawer-body"] {
  padding: var(--app-space-3) var(--app-space-4) var(--app-space-5);
}

.landing-mobile-nav [data-slot="drawer-footer"] {
  padding:
    var(--app-space-2)
    var(--app-space-4)
    calc(var(--app-space-4) + env(safe-area-inset-bottom));
}

.landing-mobile-nav .app-drawer-close-trigger {
  border: 0;
  box-shadow: none;
}

.landing-mobile-nav .app-drawer-close-trigger::before {
  position: absolute;
  inset: -10px;
  content: "";
}

.app-drawer-menu,
.app-drawer-menu__list {
  display: grid;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.app-drawer-menu {
  gap: var(--app-space-4);
}

.app-drawer-menu__list {
  gap: var(--app-space-2);
  list-style: none;
}

.app-drawer-menu__item {
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.app-drawer-menu__link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--app-space-3);
  width: 100%;
  min-height: 56px;
  padding: var(--app-space-3) var(--app-space-4);
  border: 0;
  border-radius: var(--app-radius-md);
  color: var(--text);
  background: var(--app-drawer-control-bg);
  text-align: left;
  transform: none !important;
}

.app-drawer-menu__item-copy {
  display: grid;
  flex: 1 1 auto;
  gap: var(--app-space-1);
  min-width: 0;
}

.app-drawer-menu__item-title {
  color: inherit;
  font-size: var(--app-type-body-size);
  font-weight: 620;
  line-height: 1.25;
}

.app-drawer-menu__arrow {
  display: inline-grid;
  place-items: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-left: auto;
  color: var(--app-drawer-muted);
  transition:
    color var(--app-motion-fast),
    transform var(--app-motion-fast);
}

.app-drawer-menu__arrow svg {
  width: 18px;
  height: 18px;
}

.app-drawer-menu__link:focus-visible,
.landing-mobile-nav__cta:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .app-drawer-menu__link:hover {
    color: var(--text);
    background: var(--app-drawer-control-hover);
    transform: none !important;
  }

  .app-drawer-menu__link:hover .app-drawer-menu__arrow {
    color: var(--text);
    transform: translateX(4px);
  }
}

.app-drawer-menu__link:active {
  transform: scale(0.985) !important;
}

.landing-mobile-nav__cta {
  min-height: 52px;
  border: 0;
  border-radius: var(--app-radius-md);
  transform: none !important;
}

.landing-mobile-nav__cta svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 760px) {
  .landing-header__actions {
    grid-template-columns: repeat(3, 44px);
    width: 140px;
    max-width: 140px;
  }

  .landing-segment {
    width: 44px;
    height: 44px;
  }

  .landing-segment__compact,
  .landing-header[data-compact="true"] .landing-segment__compact {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  .landing-header__cta {
    display: none !important;
  }

  .landing-mobile-menu__trigger {
    display: inline-grid;
    place-items: center;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 0;
    border-radius: var(--radius-pill);
    color: var(--text);
    background: color-mix(in srgb, var(--surface-hover) 72%, transparent);
    box-shadow: none;
    transform: none !important;
  }

  .landing-mobile-menu__trigger svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.8;
  }

  .landing-mobile-menu__trigger:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }
}

@media (max-width: 350px) {
  .landing-header__actions {
    grid-template-columns: repeat(3, 44px);
    width: 140px;
    max-width: 140px;
  }

  .landing-segment,
  .landing-segment__compact,
  .landing-header[data-compact="true"] .landing-segment__compact,
  .landing-mobile-menu__trigger {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-drawer-menu__arrow,
  .app-drawer-menu__link {
    transition-duration: 0.01ms !important;
  }
}
/*
 * Landing system final pass.
 * One visual contract for the prototype sections below the hero.
 */

:root {
  --landing-section-y: clamp(72px, 8vw, 118px);
  --landing-section-gap: clamp(28px, 4.4vw, 56px);
  --landing-card-radius: 18px;
  --landing-control-radius: 12px;
  --landing-surface-flat: color-mix(in srgb, var(--surface) 90%, var(--canvas));
  --landing-surface-soft: color-mix(in srgb, var(--surface-muted) 82%, var(--canvas));
  --landing-line-soft: color-mix(in srgb, var(--border) 74%, transparent);
}

.landing-page,
.landing-page :where(button, input, textarea, label, a, p, span, h1, h2, h3, h4) {
  font-family: var(--font-sans);
}

.landing-page :where(button, [data-slot="button"]) {
  transform: none;
  transition:
    background-color 180ms var(--app-ease-standard),
    color 180ms var(--app-ease-standard),
    opacity 180ms var(--app-ease-standard),
    box-shadow 180ms var(--app-ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .landing-page :where(button, [data-slot="button"]):hover {
    transform: none;
  }
}

.page-shell {
  width: min(100% - 48px, 1200px);
}

.page-section {
  padding-block: var(--landing-section-y);
}

.section-heading,
.mechanism-layout > div:first-child,
.lead-form-copy,
.faq-layout .section-heading {
  max-width: 720px;
}

.section-heading > div > p:last-child,
.orientation-layout > div:first-child > p:last-child,
.mechanism-layout__copy p,
.care-mosaic__copy > p:last-child,
.expert-copy__lead,
.lead-form-copy > p {
  max-width: 62ch;
  margin-top: 18px;
  font-size: 1.0625rem !important;
  line-height: 1.56 !important;
}

.section-kicker,
.landing-hero__eyebrow {
  margin-bottom: 14px;
  text-transform: none !important;
}

.expert-copy ul {
  gap: var(--app-space-2);
  margin-top: var(--app-space-6);
}

.expert-copy li {
  padding-block: var(--app-space-2);
}

.landing-header__inner,
.landing-header .landing-segment__expanded,
.landing-header .landing-segment__compact,
.landing-header .landing-segment__expanded button,
.landing-header__cta,
.landing-header__cta:hover,
.landing-secondary-button,
.landing-secondary-button:hover,
.orientation-panel,
.recognition-card,
.care-shape,
.expert-visual,
.lead-form,
.lead-form-success,
.testimonial-card,
.safety-note {
  border: 0;
  box-shadow: none;
}

.landing-primary-button,
.landing-secondary-button {
  min-height: 48px;
  border-radius: var(--landing-control-radius);
  font-size: 0.975rem;
  font-weight: 650;
}

.landing-secondary-button {
  background: var(--landing-surface-soft);
}

/* Process */

.process-list.process-route {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: var(--landing-section-gap);
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  list-style: none;
}

.process-list.process-route::before {
  display: none;
}

.process-list.process-route > .process-route__step {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 264px;
  padding: 28px;
  overflow: hidden;
  border: 0;
  border-radius: var(--landing-card-radius);
  background: var(--landing-surface-flat);
  box-shadow: none;
  transition:
    background-color 240ms var(--app-ease-standard),
    color 240ms var(--app-ease-standard);
}

.process-list.process-route > .process-route__step::before {
  display: none;
}

.process-list.process-route > .process-route__step + .process-route__step {
  border-inline-start: 0;
}

.process-list.process-route > .process-route__step > .process-route__marker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 20px;
  gap: 12px;
  align-items: center;
  color: var(--text-muted);
}

.process-route__phase {
  min-height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  background: var(--landing-surface-soft);
  font-size: 0.8125rem;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  transform: none;
}

.process-route__line {
  height: 1px;
  background: var(--landing-line-soft);
}

.process-route__marker svg {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  transform: none;
}

.process-route__copy {
  align-self: start;
  gap: 14px;
  max-width: 30rem;
  margin-top: 64px;
}

.process-route__copy h3 {
  margin: 0;
}

.process-route__copy p {
  margin: 0;
  font-size: 1rem !important;
  line-height: 1.55 !important;
}

@media (hover: hover) and (pointer: fine) {
  .process-list.process-route > .process-route__step:hover {
    background: var(--surface-hover);
  }

  .process-list.process-route > .process-route__step:hover .process-route__phase {
    color: var(--surface);
    background: var(--text);
    transform: none;
  }

  .process-list.process-route > .process-route__step:hover .process-route__marker svg {
    color: var(--text);
    transform: none;
  }
}

/* Testimonials */

.testimonials-section {
  overflow: hidden;
  background: var(--canvas);
}

.testimonials-heading-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
}

.testimonials-motion-control {
  min-height: 40px;
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  background: var(--landing-surface-soft);
  font-size: 0.875rem;
  font-weight: 650;
}

.testimonial-marquee {
  margin-top: var(--landing-section-gap);
}

.testimonial-marquee__viewport {
  padding-block: 4px 8px;
  outline: none;
}

.testimonial-marquee__viewport:focus-visible {
  box-shadow: none;
}

.testimonial-marquee__track {
  gap: 16px;
  animation-duration: 86s;
}

.testimonial-card,
.testimonial-card[data-size='compact'],
.testimonial-card[data-size='wide'] {
  width: min(420px, 82vw);
  min-height: 340px;
  gap: 24px;
  padding: 28px;
  border: 0;
  border-radius: var(--landing-card-radius);
  color: var(--text);
  background: var(--landing-surface-flat);
  transform: none;
}

.testimonial-card[data-featured='true'] {
  color: #f8f4f0;
  background: var(--scene-ink);
}

.testimonial-card__topline,
.testimonial-card__footer {
  gap: 16px;
}

.testimonial-card__label {
  color: var(--text-muted) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  text-align: right;
}

.testimonial-card blockquote {
  align-items: flex-start;
  max-width: none;
}

.testimonial-card h3 {
  font-size: clamp(1.25rem, 1.8vw, 1.55rem) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

.testimonial-card__footer,
.testimonial-card[data-featured='true'] .testimonial-card__footer {
  padding-top: 0;
  border-top: 0;
}

.testimonial-card__avatar {
  width: 42px;
  height: 42px;
  background: var(--landing-surface-soft);
}

@media (hover: hover) and (pointer: fine) {
  .testimonial-card:hover,
  .testimonial-card[data-featured='true']:hover {
    transform: none;
  }
}

/* FAQ */

.faq-layout {
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
  gap: var(--landing-section-gap);
  align-items: start;
}

.faq-list {
  border-top: 0;
}


/* Lead form */

.lead-form-section {
  background: var(--surface-muted);
  background-image: none;
}

.lead-form-layout {
  align-items: start;
  gap: var(--landing-section-gap);
}

.lead-form-copy > .section-kicker {
  margin-top: 0;
}

.lead-form,
.lead-form-success {
  border: 0;
  border-radius: 22px;
  background: var(--landing-surface-flat);
  box-shadow: none;
}

.lead-form {
  display: grid;
  gap: 18px;
  padding: clamp(24px, 4vw, 36px);
}


/* Footer and legal modal */


[data-slot="modal-backdrop"],
[data-slot="modal-container"],
.landing-page [data-slot="backdrop"],
.landing-page [data-slot="modal-backdrop"] {
  z-index: 2200;
}

.landing-legal-dialog {
  width: min(1000px, calc(100vw - 32px));
  max-width: min(1000px, calc(100vw - 32px));
  max-height: min(88svh, 900px);
  border: 0;
  border-radius: 22px;
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}

.landing-legal-dialog__header {
  padding: 32px 32px 20px;
  border-bottom: 0;
}

.landing-legal-dialog__header > div {
  gap: 10px;
  max-width: 68ch;
  padding-right: 0;
}

.landing-legal-dialog__header [data-slot="heading"] {
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  font-weight: 650;
  line-height: 1.08;
}

.landing-legal-dialog__close {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-pill);
  background: var(--landing-surface-soft);
}

.landing-legal-dialog__body {
  gap: 24px;
  padding: 0 32px 28px;
}

.landing-legal-nav {
  gap: 8px;
  padding-bottom: 0;
  border-bottom: 0;
}

.landing-legal-nav [data-slot="button"] {
  min-height: 36px;
  border-radius: var(--radius-pill);
  font-weight: 600;
}

.landing-legal-meta {
  display: block;
}

.landing-legal-meta > p {
  display: none;
}

.landing-legal-meta dl {
  display: grid;
  max-width: 360px;
  justify-content: start;
  gap: 10px;
  margin: 0;
}

.landing-legal-meta dl > div {
  display: grid;
  gap: 2px;
}

.landing-legal-meta dt {
  color: var(--text-muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.landing-legal-meta dd {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.landing-legal-document {
  max-width: none;
}

.landing-legal-document > section {
  padding: 24px 0;
  border-top: 1px solid var(--landing-line-soft);
}

.landing-legal-document h3 {
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 650;
  line-height: 1.18;
}

.landing-legal-dialog__footer {
  justify-content: flex-end;
  padding: 18px 32px 28px;
  border-top: 0;
}

.landing-legal-dialog__footer p {
  display: none;
}

@media (max-width: 900px) {
  .page-shell {
    width: min(100% - 32px, 1200px);
  }

  .process-list.process-route,
  .faq-layout,
  .lead-form-layout,
  .landing-footer__main {
    grid-template-columns: 1fr;
  }

  .process-list.process-route > .process-route__step {
    min-height: 0;
  }

  .process-route__copy {
    margin-top: 40px;
  }
}

@media (max-width: 620px) {
  :root {
    --landing-section-y: 64px;
  }

  .page-shell {
    width: min(100% - 28px, 1200px);
  }

  .process-list.process-route {
    gap: 12px;
  }

  .process-list.process-route > .process-route__step {
    padding: 22px;
  }

  .process-list.process-route > .process-route__step > .process-route__marker {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .process-route__marker svg {
    display: none;
  }

  .process-route__copy {
    margin-top: 34px;
  }

  .testimonials-heading-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .testimonials-motion-control {
    justify-self: start;
  }

  .testimonial-card,
  .testimonial-card[data-size='compact'],
  .testimonial-card[data-size='wide'] {
    width: min(84vw, 360px);
    min-height: 320px;
    padding: 22px;
  }


  .lead-form {
    padding: 22px;
  }


  .landing-legal-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100svh - 16px);
    border-radius: 18px;
  }

  .landing-legal-dialog__header,
  .landing-legal-dialog__body,
  .landing-legal-dialog__footer {
    padding-inline: 18px;
  }
}

/*
 * Copy system v14.
 * Editorial, borderless long-form section for the source-backed bullet bank.
 */

.insight-section {
  background: color-mix(in srgb, var(--surface-muted) 42%, var(--canvas));
}

.insight-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.74fr) minmax(0, 1.26fr);
  gap: clamp(44px, 7vw, 104px);
  align-items: start;
}

.insight-layout > .section-heading {
  position: sticky;
  top: 112px;
}

.insight-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 4.2vw, 56px) clamp(32px, 5vw, 72px);
  min-width: 0;
}

.insight-item {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.insight-item h3 {
  max-width: 24ch;
  margin: 0;
  color: var(--text);
  font-size: 1.25rem !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  text-wrap: balance;
}

.insight-item p {
  max-width: 46ch;
  margin: 0;
  color: var(--text-secondary);
  font-size: 1rem !important;
  line-height: 1.58 !important;
}

.insight-item:hover,
.insight-item:focus-within {
  transform: none;
  color: inherit;
  background: transparent;
}

@media (max-width: 920px) {
  .insight-layout {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .insight-layout > .section-heading {
    position: static;
    max-width: 680px;
  }
}

@media (max-width: 680px) {
  .insight-list {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .insight-item h3 {
    font-size: 1.125rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .insight-item {
    transition: none;
  }
}
/*
 * First-step composition: one portal owns choices, media and answer together.
 * The previous v13 implementation placed those three pieces in separate grid
 * items, so the answer could fall below the visible section at compact widths.
 *
 * Responsive behavior: desktop keeps a balanced two-column choice/preview layout;
 * below 60rem it stacks. Tab rows are content-sized at every width, so the
 * situation subtitle is never silently clipped.
 */

.orientation-tabs-composed .orientation-layout {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0;
}

.orientation-tabs-composed .orientation-layout > div:first-child {
  display: contents;
}

.orientation-tabs-composed .orientation-layout > div:first-child > .section-kicker,
.orientation-tabs-composed .orientation-layout > div:first-child > h2,
.orientation-tabs-composed .orientation-layout > div:first-child > p:not(.section-kicker) {
  grid-column: 1;
  inline-size: min(100%, 42rem);
}

.orientation-tabs-composed .orientation-layout > div:first-child > p:not(.section-kicker) {
  margin-block: var(--app-space-4) 0 !important;
}

.orientation-tabs-composed .orientation-layout > div:first-child::after {
  content: none !important;
  display: none !important;
}

.orientation-tabs-composed .orientation-panel {
  display: none !important;
}

.orientation-tabs-composition-host {
  grid-column: 1;
  inline-size: 100%;
  min-inline-size: 0;
  margin-block-start: clamp(1.75rem, 3vw, 3rem);
}

.orientation-tabs-v15 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(23rem, 0.96fr);
  gap: clamp(2rem, 6vw, 6.5rem);
  align-items: start;
  inline-size: min(100%, 72rem);
}

.orientation-tabs-v15__choices,
.orientation-tabs-v15__preview,
.orientation-tabs-v15__tabs,
.orientation-tabs-v15__list-container {
  min-inline-size: 0;
}

.orientation-tabs-v15__tabs,
.orientation-tabs-v15__list-container {
  inline-size: 100%;
}

.orientation-tabs-v15__tabs {
  display: block;
}

.orientation-tabs-v15__list-container,
.orientation-tabs-v15__list-container [data-slot="tab-list-container-scroller"] {
  overflow: visible;
}

.orientation-tabs-v15__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--app-space-2);
  grid-auto-rows: max-content;
  inline-size: 100%;
  block-size: auto;
  padding: 0;
  background: transparent;
}

.orientation-tabs-v15__tab {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  inline-size: 100%;
  min-block-size: 6.375rem;
  padding: var(--app-space-4) var(--app-space-5);
  overflow: visible;
  border: 0;
  border-radius: var(--app-radius-md);
  background: transparent;
  color: var(--text-secondary);
  opacity: 0.58;
  text-align: start;
  transition:
    background-color 260ms var(--app-ease-standard),
    color 260ms var(--app-ease-standard),
    opacity 260ms var(--app-ease-standard);
}

.orientation-tabs-v15__tab:hover {
  background: color-mix(in srgb, var(--surface-muted) 72%, transparent);
  color: var(--text);
  opacity: 0.82;
}

.orientation-tabs-v15__tab[aria-selected="true"],
.orientation-tabs-v15__tab[data-selected] {
  background: var(--surface-muted);
  color: var(--text);
  opacity: 1;
}

.orientation-tabs-v15__tab-copy {
  display: grid;
  gap: var(--app-space-1);
  inline-size: 100%;
  min-inline-size: 0;
  pointer-events: none;
}

.orientation-tabs-v15__tab-title {
  color: inherit;
  font-size: var(--app-type-heading-4-size);
  font-weight: var(--app-type-weight-semibold);
  line-height: 1.22;
  text-wrap: balance;
}

.orientation-tabs-v15__tab-description {
  max-inline-size: 44ch;
  color: var(--text-muted);
  font-size: var(--app-type-body-sm-size);
  font-weight: var(--app-type-weight-regular);
  line-height: var(--app-type-body-sm-line-height);
  text-wrap: pretty;
}

.orientation-tabs-v15__tab[aria-selected="true"] .orientation-tabs-v15__tab-description,
.orientation-tabs-v15__tab[data-selected] .orientation-tabs-v15__tab-description {
  color: var(--text-secondary);
}

.orientation-tabs-v15__a11y-panel {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.orientation-tabs-v15__preview {
  display: grid;
  gap: var(--app-space-3);
  inline-size: 100%;
  max-inline-size: 30rem;
  margin-inline: auto 0;
}

.orientation-tabs-v15__visual {
  margin: 0;
}

.orientation-tabs-v15__media {
  position: relative;
  isolation: isolate;
  inline-size: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 0;
  border-radius: var(--app-radius-lg);
  background: var(--surface-muted);
}

.orientation-tabs-v15__image {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  backface-visibility: hidden;
  will-change: opacity, transform;
}

.orientation-tabs-v15__preview-copy {
  display: grid;
  gap: var(--app-space-2);
  min-inline-size: 0;
}

.orientation-tabs-v15__index {
  color: var(--text-muted);
  font-size: var(--app-type-body-xs-size);
  font-variant-numeric: tabular-nums;
  line-height: var(--app-type-body-xs-line-height);
}

.orientation-tabs-v15__preview-title {
  max-inline-size: 26ch;
  margin: 0;
  color: var(--text);
  font-size: var(--app-type-heading-4-size) !important;
  line-height: 1.22 !important;
  letter-spacing: 0 !important;
  text-wrap: balance;
}

.orientation-tabs-v15__result-copy {
  max-inline-size: 56ch;
  margin: 0 !important;
  color: var(--text-secondary);
  font-size: var(--app-type-body-sm-size) !important;
  line-height: var(--app-type-body-sm-line-height) !important;
}

.orientation-tabs-v15__cta {
  justify-self: start;
  margin-block-start: var(--app-space-1);
}

@media (max-width: 60rem) {
  .orientation-tabs-v15 {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--app-space-7);
  }

  .orientation-tabs-v15__preview {
    max-inline-size: min(100%, 38rem);
    margin-inline: 0;
  }
}

@media (max-width: 47.5rem) {
  .orientation-tabs-composition-host {
    margin-block-start: var(--app-space-6);
  }

  .orientation-tabs-v15 {
    gap: var(--app-space-6);
  }

  .orientation-tabs-v15__tab {
    min-block-size: 5.5rem;
    padding: var(--app-space-3) var(--app-space-4);
  }

  .orientation-tabs-v15__tab-title {
    font-size: var(--app-type-body-size);
    line-height: 1.25;
  }

  .orientation-tabs-v15__tab-description {
    font-size: var(--app-type-body-xs-size);
    line-height: var(--app-type-body-xs-line-height);
  }

  .orientation-tabs-v15__preview {
    max-inline-size: none;
  }

  .orientation-tabs-v15__media {
    aspect-ratio: 4 / 3;
    border-radius: var(--app-radius-md);
  }

  .orientation-tabs-v15__cta {
    inline-size: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .orientation-tabs-v15__tab,
  .orientation-tabs-v15__image {
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
    will-change: auto;
  }
}
.landing-success-modal {
  width: min(28rem, calc(100vw - var(--app-space-8)));
  max-width: min(28rem, calc(100vw - var(--app-space-8)));
  border: 0;
  border-radius: var(--app-radius-lg);
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}

.landing-success-modal__header {
  min-height: 0;
  padding: var(--app-space-3) var(--app-space-3) 0;
}

.landing-success-modal__close {
  margin-left: auto;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  background: var(--landing-surface-soft);
}

.landing-success-modal__body {
  padding: 0 var(--app-space-8) var(--app-space-5);
}

.landing-success-modal__footer {
  padding: 0 var(--app-space-8) var(--app-space-8);
  border: 0;
}

.landing-success-content {
  display: grid;
  justify-items: center;
  gap: var(--app-space-3);
  width: 100%;
  margin: 0;
  text-align: center;
}

.landing-success-content [data-slot="heading"] {
  max-width: 16ch;
  margin: 0;
  color: var(--text);
  font-size: clamp(1.5rem, 2vw, 1.875rem);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.landing-success-content [data-slot="description"],
.landing-success-content > p {
  max-width: 34ch;
  margin: 0;
  text-wrap: balance;
}

.landing-success-seal {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  color: var(--scene-a);
}

.landing-success-seal svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.landing-success-seal__ring,
.landing-success-seal__check {
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.landing-success-seal__ring {
  stroke-width: 2;
}

.landing-success-seal__check {
  stroke-width: 2.8;
}

.landing-success-seal__particle {
  color: color-mix(in srgb, var(--scene-a) 72%, var(--text));
}

.landing-success-action {
  min-height: 48px;
  border: 0;
  border-radius: var(--landing-control-radius);
  transform: none !important;
}

.landing-success-sheet {
  --app-drawer-panel-bg: var(--surface);
  --app-drawer-title: var(--text);
  --app-drawer-muted: var(--text-muted);
  --app-drawer-control-bg: var(--landing-surface-soft);
  --app-drawer-control-hover: var(--surface-hover);

  z-index: 2300;
  background: color-mix(in srgb, #151319 48%, transparent);
}

.landing-success-sheet [data-slot="drawer-content"] {
  width: 100%;
  max-width: 100%;
}

.landing-success-sheet [data-slot="drawer-dialog"] {
  border: 0;
  border-radius: var(--app-radius-lg) var(--app-radius-lg) 0 0;
  background: var(--surface);
  box-shadow: var(--shadow-float);
}

.landing-success-sheet [data-slot="drawer-header"] {
  padding-inline: var(--app-space-5);
}

.landing-success-sheet [data-slot="drawer-body"] {
  padding: var(--app-space-3) var(--app-space-5) var(--app-space-5);
}

.landing-success-sheet [data-slot="drawer-footer"] {
  padding: var(--app-space-3) var(--app-space-5) calc(var(--app-space-5) + env(safe-area-inset-bottom));
  border: 0;
}

.landing-success-sheet .landing-success-seal {
  width: 76px;
  height: 76px;
}

@media (max-width: 760px) {
  .landing-success-content {
    gap: var(--app-space-2-5);
  }

  .landing-success-content [data-slot="description"],
  .landing-success-content > p {
    max-width: 30rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-success-seal,
  .landing-success-seal * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}
/* Legal lists stay semantically grouped, but align with the document text. */
.landing-legal-document ul,
.landing-legal-document ol {
  padding-inline-start: 0;
  list-style: none;
}

.landing-legal-document li::marker {
  content: "";
}
/* A legal section is a single reading column: headings, prose and list items share one left edge. */
.landing-legal-document > section {
  width: 100%;
  max-width: none;
  padding-inline: 0;
}

.landing-legal-document > section > h3,
.landing-legal-document > section > p,
.landing-legal-document > section > ul,
.landing-legal-document > section > ol {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

.landing-legal-document > section > ul > li,
.landing-legal-document > section > ol > li {
  width: 100%;
  margin-inline: 0;
  padding-inline: 0;
}
/* The document has one explicit reading column; no inherited grid track may offset prose. */
.landing-legal-document {
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
}

.landing-legal-document > section {
  grid-column: 1 / -1;
  justify-self: stretch;
}
/* Mobile process: one calm reading column. Phase, title and copy share one left edge. */
@media (max-width: 760px) {
  .process-list.process-route {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--app-space-3);
    margin-top: var(--app-space-7);
    overflow: visible;
    background: transparent;
  }

  .process-list.process-route > .process-route__step,
  .process-list.process-route > .process-route__step:hover {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: var(--app-space-4);
    min-height: 0;
    padding: var(--app-space-5);
    overflow: visible;
    border: 0;
    border-radius: var(--app-radius-md);
    background: var(--landing-surface-flat);
  }

  .process-list.process-route > .process-route__step + .process-route__step {
    border: 0;
  }

  .process-list.process-route > .process-route__step > .process-route__marker {
    display: flex;
    flex-direction: row;
    grid-column: 1;
    grid-row: 1;
    align-items: center;
    align-self: start;
    justify-content: flex-start;
    width: auto;
    min-height: 30px;
  }

  .process-route__line,
  .process-route__marker svg {
    display: none;
  }

  .process-route__phase {
    min-height: 30px;
    padding-inline: var(--app-space-3);
    background: var(--landing-surface-soft);
  }

  .process-route__copy {
    display: grid;
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    gap: var(--app-space-3);
    max-width: none;
    margin-top: 0;
  }
}
/* ============================================================================
   00 - Design tokens (@layer tokens).
   Dark/light theme variables (:root[data-theme]), typography scale,
   4px-base spacing scale (--app-space-*), radius, motion,
   surface palettes. Custom properties only - no rules.
   Extracted verbatim from globals.css (commit 085838f); cascade order kept.
   ============================================================================ */

@layer tokens {
  :root {
    --app-font-family-base: "Inter Tight Variable", "Inter Tight", "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --app-font-family-heading: var(--app-font-family-base);
    --app-font-family-display: var(--app-font-family-base);
    /* Canonical product typography. These fixed roles mirror HeroUI/Tailwind's
       12/14/16/18/20/24/30/36 scale, with one 13px metadata step for dense
       dashboards. Product UI never scales type from viewport width; editorial
       article prose may opt into its own bounded reading scale. */
    --app-type-caption-size: 0.75rem;
    --app-type-meta-size: 0.8125rem;
    --app-type-body-sm-size: 0.875rem;
    --app-type-body-size: 1rem;
    --app-type-lead-size: 1.125rem;
    --app-type-heading-4-size: 1.25rem;
    --app-type-heading-3-size: 1.5rem;
    --app-type-heading-2-size: 1.875rem;
    --app-type-heading-1-size: 2.25rem;
    --app-type-display-size: 3rem;
    --app-type-caption-line-height: 1.333;
    --app-type-meta-line-height: 1.385;
    --app-type-body-sm-line-height: 1.5;
    --app-type-body-line-height: 1.55;
    --app-type-lead-line-height: 1.5;
    --app-type-heading-line-height: 1.111;
    --app-type-weight-normal: 400;
    --app-type-weight-medium: 500;
    --app-type-weight-semibold: 600;
    --app-type-weight-bold: 700;
    --app-type-color-heading: var(--app-color-text);
    --app-type-color-body: var(--app-color-text-soft);
    --app-type-color-meta: var(--app-color-text-muted);
    /* Compatibility aliases: legacy BEM surfaces now consume the same scale
       as HeroUI without a risky markup rewrite. */
    --app-font-size-xs: var(--app-type-caption-size);
    --app-font-size-sm: var(--app-type-body-sm-size);
    --app-font-size-base: var(--app-type-body-size);
    --app-font-size-lg: var(--app-type-lead-size);
    --app-font-size-xl: var(--app-type-heading-4-size);
    --app-font-size-2xl: var(--app-type-heading-1-size);
    --app-line-height-tight: var(--app-type-heading-line-height);
    --app-line-height-base: var(--app-type-body-line-height);
    --app-space-1: 4px;
    --app-space-2: 8px;
    --app-space-3: 12px;
    --app-space-4: 16px;
  --app-space-5: 20px;
  --app-space-6: 24px;
  --app-space-7: 28px;
  --app-space-8: 32px;
    --app-space-10: 40px;
    --app-space-12: 48px;
    --app-space-16: 64px;
    /* Half-step tier (2px sub-grid) — allowed ONLY for dense controls
       (chips, pills, compact control paddings). New code uses these tokens,
       not new off-grid literals; any other off-grid value needs a documented
       optical reason. Policy: docs/CSS-ARCHITECTURE.md. */
    --app-space-1-5: 6px;
    --app-space-2-5: 10px;
    --app-space-3-5: 14px;
    --app-space-4-5: 18px;
    --app-space-5-5: 22px;
    --app-icon-size-sm: 1rem;
    --app-icon-size-md: 1.25rem;
    --app-icon-size-lg: 1.5rem;
    --app-icon-stroke: 1.8;
    --app-radius-xs: 6px;
    --app-radius-sm: 8px;
    --app-radius-md: 12px;
    --app-radius-lg: 18px;
    --app-radius-full: 999px; /* pill idiom — use instead of literal 999px */
    --app-image-filter: none; /* psychometric figure colors stay theme-neutral */

    --app-shadow-soft: 0 16px 50px rgb(0 0 0 / 24%);
    --app-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --app-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
    --app-ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
    --app-ease-spring-sm: cubic-bezier(0.34, 1.42, 0.64, 1);
    --app-duration-press: 100ms;
    --app-duration-hover: 160ms;
    --app-duration-exit: 160ms;
    --app-duration-enter: 220ms;
    --app-duration-highlight: 260ms;
    --app-duration-panel: 280ms;
    --app-duration-panel-fade: 180ms;
    --app-duration-sheet: 260ms;
    --app-motion-distance-sm: 4px;
    --app-motion-distance-md: 6px;
    --app-motion-press-scale: 0.975;
    --app-motion-icon-press-scale: 0.92;
    --app-interactive-press-scale: var(--app-motion-press-scale);
    --app-interactive-icon-press-scale: var(--app-motion-icon-press-scale);
    --app-interactive-disabled-opacity: 0.52;
    --app-motion-fast: var(--app-duration-hover) var(--app-ease-standard);
    --app-motion-base: 240ms var(--app-ease-standard);
    --app-motion-slow: var(--app-duration-panel) var(--app-ease-standard);
    --app-motion-panel: var(--app-duration-panel) var(--app-ease-emphasized);
    --app-motion-panel-fade: var(--app-duration-panel-fade) var(--app-ease-standard);
    --app-motion-sheet: var(--app-duration-sheet) var(--app-ease-sheet);
    --app-motion-sheet-soft: var(--app-duration-panel-fade) var(--app-ease-standard);
    --app-motion-icon: var(--app-duration-highlight) var(--app-ease-spring-sm);
    --app-motion-highlight: var(--app-duration-highlight) var(--app-ease-emphasized);
    --app-scroll-offset: 96px;
    --app-scroll-card-offset: 132px;
  }

  :root,
  :root[data-theme="dark"],
  [data-theme="dark"] {
    color-scheme: dark;
    --app-color-bg: #111111;
    --app-color-bg-elevated: #15181b;
    --app-color-bg-subtle: #1c2024;
    --app-color-bg-muted: #242a2f;
    /* Neutral raised surfaces — the Theraphea dashboard family (page #111111,
       raised card #161616, chip #1a1a1a). Shared chrome (toast, drawer,
       account) and --app-shell-* fallbacks resolve here; the blue-steel
       --app-color-bg-elevated/-subtle/-muted scale above stays for the legacy
       runner/result/journal surfaces only. */
    --app-surface-raised: #161616;
    --app-surface-chip: #1a1a1a;
    --app-surface-border: rgb(255 255 255 / 7%);
    --app-color-text: #f4eee3;
    --app-color-text-soft: rgb(255 255 255 / 68%);
    --app-color-text-muted: rgb(255 255 255 / 55%);
    --app-color-text-faint: rgb(255 255 255 / 46%);
    --app-type-color-heading: var(--app-color-text);
    --app-type-color-body: var(--app-color-text-soft);
    --app-type-color-meta: var(--app-color-text-muted);
    --app-runner-text-soft: var(--app-color-text-soft);
    --app-runner-text-muted: var(--app-color-text-muted);
    --app-color-border: rgb(244 239 230 / 14%);
    --app-color-border-strong: rgb(244 239 230 / 24%);
    --app-color-accent: #e8d6b3;
    --app-color-accent-strong: #f7ead0;
    --app-color-accent-muted: rgb(232 214 179 / 14%);
    --app-button-primary-bg: var(--app-color-accent);
    --app-button-primary-text: #11100d;
    --app-color-danger: #f08d7b;
    --app-color-success: #87c7a1;
    --app-color-focus: rgb(232 214 179 / 42%);
    --app-logo-color-start: #ffffff;
    --app-logo-color-end: #e8d6b3;
    --app-header-logo-color-start: #ffffff;
    --app-header-logo-color-end: #e8d6b3;
    --app-header-control-bg: rgb(255 255 255 / 5%);
    --app-header-control-bg-hover: rgb(255 255 255 / 9%);
    --app-header-control-border: transparent;
    --app-header-control-text: #f2f2f2;
    --app-header-control-text-muted: rgb(242 242 242 / 58%);
    --app-header-surface: #161616;
    --app-header-shadow: none;
    --app-header-blend-mode: normal;
    --app-header-blend-color: #f2f2f2;
    --app-footer-bg: #111111;
    --app-footer-border: rgb(244 239 230 / 9%);
    --app-glass-bg: rgb(15 16 19 / 66%);
    --app-glass-border: rgb(255 255 255 / 8%);
    --app-glass-shadow: 0 18px 48px rgb(0 0 0 / 30%), inset 0 1px 0 rgb(255 255 255 / 8%);
    --app-progress-track: rgb(255 255 255 / 4%);
    --app-option-bg: rgb(255 255 255 / 3%);
    --app-option-bg-hover: rgb(232 214 179 / 5%);
    --app-option-bg-selected: rgb(232 214 179 / 10%);
    --app-option-border: rgb(255 255 255 / 6%);
    --app-option-border-hover: rgb(232 214 179 / 22%);
    --app-option-border-selected: rgb(232 214 179 / 42%);
    --app-seo-surface-1: #171717;
    --app-seo-surface-2: #202020;
    --app-seo-surface-3: #292929;
    --app-seo-text: #f4f3ef;
    --app-seo-text-soft: rgb(244 243 239 / 72%);
    --app-seo-text-muted: rgb(244 243 239 / 56%);
    --app-seo-text-faint: rgb(244 243 239 / 42%);
    --app-seo-border: rgb(244 243 239 / 9%);
    --app-seo-border-strong: rgb(244 243 239 / 16%);
    --app-seo-accent: #e8d6b3;
    --app-seo-accent-soft: rgb(232 214 179 / 72%);
    --app-seo-card-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
    --app-seo-scale-low: #5de5f2;
    --app-seo-scale-norm: #7ade74;
    --app-seo-scale-sub: #4b8dff;
    --app-seo-scale-mild: #fff06a;
    --app-seo-scale-mid: #ffd45c;
    --app-seo-scale-high: #ff9466;
    --app-seo-scale-very: #ff5b54;
    --app-seo-scale-critical: #ff6a7c;
    /* Ink for score badges sitting on the scale tones. Dark theme tones are
       light fills, so the badge text is near-black; light theme flips. */
    --app-seo-scale-ink: #111111;
  }

  :root[data-theme="light"],
  [data-theme="light"] {
    color-scheme: light;
    --app-color-bg: #fbfbfa;
    --app-color-bg-elevated: #ffffff;
    --app-color-bg-subtle: #f3f3f1;
    --app-color-bg-muted: #e9e9e6;
    --app-surface-raised: #ffffff;
    --app-surface-chip: #f4f4f2;
    --app-surface-border: rgb(20 20 20 / 10%);
    --app-color-text: #141414;
    --app-color-text-soft: rgb(20 20 20 / 68%);
    --app-color-text-muted: #70706a;
    --app-color-text-faint: rgb(20 20 20 / 48%);
    --app-type-color-heading: var(--app-color-text);
    --app-type-color-body: var(--app-color-text-soft);
    --app-type-color-meta: var(--app-color-text-muted);
    --app-runner-text-soft: var(--app-color-text-soft);
    --app-runner-text-muted: var(--app-color-text-muted);
    --app-color-border: rgb(20 20 20 / 11%);
    --app-color-border-strong: rgb(20 20 20 / 20%);
    --app-color-accent: #171717;
    --app-color-accent-strong: #111111;
    --app-color-accent-muted: rgb(20 20 20 / 7%);
    --app-button-primary-bg: var(--app-color-accent);
    --app-button-primary-text: #ffffff;
    --app-color-danger: #a74738;
    --app-color-success: #38784f;
    --app-color-focus: rgb(20 20 20 / 24%);
    --app-logo-color-start: #171512;
    --app-logo-color-end: #34342f;
    --app-header-logo-color-start: #171512;
    --app-header-logo-color-end: #34342f;
    --app-header-control-bg: rgb(20 20 20 / 6%);
    --app-header-control-bg-hover: rgb(20 20 20 / 10%);
    --app-header-control-border: transparent;
    --app-header-control-text: #181818;
    --app-header-control-text-muted: rgb(20 20 20 / 55%);
    --app-header-surface: #ffffff;
    --app-header-shadow: none;
    --app-header-blend-mode: normal;
    --app-header-blend-color: #141414;
    --app-footer-bg: #fbfbfa;
    --app-footer-border: rgb(20 20 20 / 10%);
    --app-glass-bg: rgb(255 255 255 / 74%);
    --app-glass-border: rgb(20 20 20 / 9%);
    --app-glass-shadow: 0 18px 42px rgb(20 20 20 / 10%), inset 0 1px 0 rgb(255 255 255 / 70%);
    --app-progress-track: rgb(20 20 20 / 8%);
    --app-option-bg: rgb(255 255 255 / 48%);
    --app-option-bg-hover: rgb(20 20 20 / 5%);
    --app-option-bg-selected: rgb(20 20 20 / 8%);
    --app-option-border: rgb(20 20 20 / 9%);
    --app-option-border-hover: rgb(20 20 20 / 20%);
    --app-option-border-selected: rgb(20 20 20 / 34%);
    --app-seo-surface-1: #ffffff;
    --app-seo-surface-2: #f4f4f2;
    --app-seo-surface-3: #ececea;
    --app-seo-text: #141414;
    --app-seo-text-soft: rgb(20 20 20 / 72%);
    --app-seo-text-muted: rgb(20 20 20 / 56%);
    --app-seo-text-faint: rgb(20 20 20 / 42%);
    --app-seo-border: rgb(20 20 20 / 10%);
    --app-seo-border-strong: rgb(20 20 20 / 18%);
    --app-seo-accent: #171717;
    --app-seo-accent-soft: rgb(20 20 20 / 68%);
    --app-seo-card-shadow: inset 0 1px 0 rgb(255 255 255 / 72%), 0 14px 36px rgb(20 20 20 / 7%);
    --app-seo-scale-low: #077c90;
    --app-seo-scale-norm: #287a3f;
    --app-seo-scale-sub: #245aa8;
    --app-seo-scale-mild: #806c00;
    --app-seo-scale-mid: #916800;
    --app-seo-scale-high: #a6551d;
    --app-seo-scale-very: #992f2b;
    --app-seo-scale-critical: #a63a4c;
    /* Light theme scale tones are dark fills -> badge text must be light. */
    --app-seo-scale-ink: #ffffff;
  }
}
/* ============================================================================
   Theraphea brand theme — Moonlit Pearl.

   This is the semantic brand layer that sits on top of HeroUI's default
   variables and the aliases in tokens-bridge.css. The legacy --app-* tokens
   remain available for result and specialist surfaces; the test-runner UI is
   bridged to Moonlit Pearl below without changing test data or color mechanics.

   Contract:
   - --accent is always a solid, accessible interaction color.
   - --app-brand-gradient is reserved for primary actions and expressive brand
     moments; it is never stored inside a color slot.
   - form controls keep one quiet 1px boundary.
   - text-field focus stays inside that boundary; contrast modes add an outline.
   - status colors stay semantic and independent from the pearl brand colors.
   ============================================================================ */

@layer tokens {
  :root,
  [data-theme="light"],
  [data-theme="dark"] {
    /* Mother-of-pearl primitives extracted from the approved references. */
    --app-pearl-warm: #ebdac7;
    --app-pearl-blush: #d8c6c1;
    --app-pearl-silver: #c9ced1;
    --app-pearl-opal: #dee6e4;

    /* Gradient and solid brand roles intentionally stay separate. */
    --app-brand-gradient: linear-gradient(
      112deg,
      var(--app-pearl-warm) 0%,
      var(--app-pearl-blush) 34%,
      var(--app-pearl-silver) 67%,
      var(--app-pearl-opal) 100%
    );
    --app-brand-gradient-hover: linear-gradient(
      112deg,
      #f1e4d6 0%,
      #e2d1cc 34%,
      #d6dadd 67%,
      #e7efed 100%
    );
    --app-brand-gradient-pressed: linear-gradient(
      112deg,
      #deccb8 0%,
      #ccb8b3 34%,
      #bac1c5 67%,
      #cedad7 100%
    );
    --app-brand-gradient-foreground: #211e24;
    --app-brand-logo-gradient: linear-gradient(
      112deg,
      var(--app-ui-text) 0%,
      var(--app-ui-accent) 34%,
      color-mix(in srgb, var(--app-pearl-silver) 55%, var(--app-ui-text)) 67%,
      color-mix(in srgb, var(--app-pearl-opal) 55%, var(--app-ui-text)) 100%
    );

    /* HeroUI control geometry. A border is retained only where it communicates
       the boundary of an interactive field. */
    --field-border-width: 1px;
    --ring-offset-width: 2px;
    --color-field-border-invalid: var(--danger);
    --app-ui-control-bg: var(--app-ui-surface);
    --app-ui-control-bg-focus: color-mix(in srgb, var(--app-ui-surface) 94%, var(--app-ui-focus) 6%);
    --app-ui-control-selected-bg: color-mix(in srgb, var(--app-ui-text) 12%, var(--app-ui-surface-active));
    --app-ui-control-selected-foreground: var(--app-ui-text);
    --app-field-focus-border: var(--app-ui-focus);
    --app-field-focus-ring: 0 0 0 1px var(--app-ui-focus);
    --app-interactive-focus-ring: 0 0 0 2px var(--app-ui-focus);
  }

  :root,
  :root[data-theme="dark"],
  [data-theme="dark"] {
    color-scheme: dark;

    /* Product semantics: dark. */
    --app-ui-canvas: #151319;
    --app-ui-sidebar: #1c1921;
    --app-ui-surface: #24212a;
    --app-ui-surface-raised: #24212a;
    --app-ui-surface-hover: #2b2631;
    --app-ui-surface-active: #352f3b;
    --app-ui-divider: #403a46;
    --app-ui-border: #403a46;
    --app-ui-control-border: #756d79;
    --app-ui-control-border-hover: #8a818e;
    --app-ui-text: #f6f4ef;
    --app-ui-text-secondary: #d8d1d5;
    --app-ui-text-muted: #b8b1b8;
    --app-ui-accent: #ebdac7;
    --app-ui-accent-hover: #f1e4d6;
    --app-ui-accent-soft: #332b34;
    --app-ui-accent-soft-hover: #3c323d;
    --app-ui-accent-foreground: #211e24;
    --app-ui-focus: #ebdac7;
    --app-ui-link: #f1dcc9;

    /* Semantic status roles deliberately do not reuse brand pearl. */
    --app-ui-success: #8bc7a5;
    --app-ui-success-hover: #9bd3b3;
    --app-ui-success-soft: rgb(139 199 165 / 15%);
    --app-ui-warning: #e1bd79;
    --app-ui-warning-hover: #ebca8b;
    --app-ui-warning-soft: rgb(225 189 121 / 16%);
    --app-ui-danger: #ef9a8c;
    --app-ui-danger-hover: #f4aa9e;
    --app-ui-danger-soft: rgb(239 154 140 / 16%);
    --app-ui-info: #9fc3de;
    --app-ui-info-soft: rgb(159 195 222 / 16%);
    --app-ui-status-foreground: #211e24;

    --app-ui-surface-shadow: none;
    --app-ui-overlay-shadow: 0 24px 70px rgb(0 0 0 / 38%);
    --app-ui-backdrop: rgb(12 10 15 / 68%);

    /* HeroUI semantic slots. */
    --background: var(--app-ui-canvas);
    --background-secondary: var(--app-ui-sidebar);
    --background-tertiary: var(--app-ui-surface);
    --background-inverse: var(--app-ui-text);
    --foreground: var(--app-ui-text);
    --muted: var(--app-ui-text-muted);
    --surface: var(--app-ui-surface);
    --surface-foreground: var(--app-ui-text);
    --surface-secondary: var(--app-ui-surface-hover);
    --surface-secondary-foreground: var(--app-ui-text);
    --surface-tertiary: var(--app-ui-surface-active);
    --surface-tertiary-foreground: var(--app-ui-text);
    --surface-hover: var(--app-ui-surface-hover);
    --overlay: var(--app-ui-surface-raised);
    --overlay-foreground: var(--app-ui-text);
    --backdrop: var(--app-ui-backdrop);

    --default: var(--app-ui-surface-hover);
    --default-hover: var(--app-ui-surface-active);
    --default-foreground: var(--app-ui-text);
    --default-soft: rgb(216 209 213 / 8%);
    --default-soft-hover: rgb(216 209 213 / 12%);
    --default-soft-foreground: var(--app-ui-text-secondary);

    --accent: var(--app-ui-accent);
    --accent-hover: var(--app-ui-accent-hover);
    --accent-foreground: var(--app-ui-accent-foreground);
    --accent-soft: var(--app-ui-accent-soft);
    --accent-soft-hover: var(--app-ui-accent-soft-hover);
    --accent-soft-foreground: var(--app-ui-accent);

    --success: var(--app-ui-success);
    --success-hover: var(--app-ui-success-hover);
    --success-foreground: var(--app-ui-status-foreground);
    --success-soft: var(--app-ui-success-soft);
    --success-soft-hover: rgb(139 199 165 / 22%);
    --success-soft-foreground: var(--app-ui-success);
    --warning: var(--app-ui-warning);
    --warning-hover: var(--app-ui-warning-hover);
    --warning-foreground: var(--app-ui-status-foreground);
    --warning-soft: var(--app-ui-warning-soft);
    --warning-soft-hover: rgb(225 189 121 / 23%);
    --warning-soft-foreground: var(--app-ui-warning);
    --danger: var(--app-ui-danger);
    --danger-hover: var(--app-ui-danger-hover);
    --danger-foreground: var(--app-ui-status-foreground);
    --danger-soft: var(--app-ui-danger-soft);
    --danger-soft-hover: rgb(239 154 140 / 23%);
    --danger-soft-foreground: var(--app-ui-danger);

    --border: var(--app-ui-border);
    --border-secondary: var(--app-ui-control-border);
    --border-tertiary: var(--app-ui-control-border-hover);
    --separator: var(--app-ui-divider);
    --separator-secondary: var(--app-ui-border);
    --separator-tertiary: var(--app-ui-control-border);
    --focus: var(--app-ui-focus);
    --link: var(--app-ui-link);

    --field-background: var(--app-ui-control-bg);
    --field-foreground: var(--app-ui-text);
    --field-placeholder: var(--app-ui-text-muted);
    --field-border: var(--app-ui-control-border);
    --field-hover: var(--app-ui-surface-hover);
    --field-focus: var(--app-ui-control-bg-focus);
    --field-border-hover: var(--app-ui-control-border-hover);
    --field-border-focus: var(--app-field-focus-border);
    --field-shadow: 0 0 #0000;

    --segment: var(--app-ui-surface);
    --segment-foreground: var(--app-ui-text);
    --surface-shadow: var(--app-ui-surface-shadow);
    --overlay-shadow: var(--app-ui-overlay-shadow);

  }

  :root[data-theme="light"],
  [data-theme="light"] {
    color-scheme: light;

    /* Product semantics: light. */
    --app-ui-canvas: #f8f7f6;
    --app-ui-sidebar: #f2efec;
    --app-ui-surface: #fdfcfa;
    --app-ui-surface-raised: #fdfcfa;
    --app-ui-surface-hover: #ecebe7;
    --app-ui-surface-active: #e4e1de;
    --app-ui-divider: #dfdddb;
    --app-ui-border: #dfdddb;
    --app-ui-control-border: #938c90;
    --app-ui-control-border-hover: #797277;
    --app-ui-text: #252329;
    --app-ui-text-secondary: #514d52;
    --app-ui-text-muted: #69656a;
    --app-ui-accent: #7c647c;
    --app-ui-accent-hover: #695369;
    --app-ui-accent-soft: #eee7ed;
    --app-ui-accent-soft-hover: #e6dce5;
    --app-ui-accent-foreground: #ffffff;
    --app-ui-focus: #7c647c;
    --app-ui-link: #654f68;

    /* Semantic status roles deliberately do not reuse brand pearl. */
    --app-ui-success: #3b7153;
    --app-ui-success-hover: #32684c;
    --app-ui-success-soft: #e3eee7;
    --app-ui-warning: #865a1b;
    --app-ui-warning-hover: #744c17;
    --app-ui-warning-soft: #f4ead8;
    --app-ui-danger: #9d4338;
    --app-ui-danger-hover: #87372f;
    --app-ui-danger-soft: #f5e3df;
    --app-ui-info: #496e8c;
    --app-ui-info-soft: #e3edf4;
    --app-ui-status-foreground: #ffffff;

    --app-ui-surface-shadow: 0 12px 32px rgb(37 35 41 / 6%);
    --app-ui-overlay-shadow: 0 24px 60px rgb(37 35 41 / 16%);
    --app-ui-backdrop: rgb(37 35 41 / 44%);

    /* HeroUI semantic slots. */
    --background: var(--app-ui-canvas);
    --background-secondary: var(--app-ui-sidebar);
    --background-tertiary: var(--app-ui-surface-hover);
    --background-inverse: var(--app-ui-text);
    --foreground: var(--app-ui-text);
    --muted: var(--app-ui-text-muted);
    --surface: var(--app-ui-surface);
    --surface-foreground: var(--app-ui-text);
    --surface-secondary: var(--app-ui-sidebar);
    --surface-secondary-foreground: var(--app-ui-text);
    --surface-tertiary: var(--app-ui-surface-hover);
    --surface-tertiary-foreground: var(--app-ui-text);
    --surface-hover: var(--app-ui-surface-hover);
    --overlay: var(--app-ui-surface-raised);
    --overlay-foreground: var(--app-ui-text);
    --backdrop: var(--app-ui-backdrop);

    --default: var(--app-ui-surface-hover);
    --default-hover: var(--app-ui-surface-active);
    --default-foreground: var(--app-ui-text);
    --default-soft: #f1efec;
    --default-soft-hover: #e8e5e1;
    --default-soft-foreground: var(--app-ui-text-secondary);

    --accent: var(--app-ui-accent);
    --accent-hover: var(--app-ui-accent-hover);
    --accent-foreground: var(--app-ui-accent-foreground);
    --accent-soft: var(--app-ui-accent-soft);
    --accent-soft-hover: var(--app-ui-accent-soft-hover);
    --accent-soft-foreground: #624d62;

    --success: var(--app-ui-success);
    --success-hover: var(--app-ui-success-hover);
    --success-foreground: var(--app-ui-status-foreground);
    --success-soft: var(--app-ui-success-soft);
    --success-soft-hover: #d9e8df;
    --success-soft-foreground: var(--app-ui-success);
    --warning: var(--app-ui-warning);
    --warning-hover: var(--app-ui-warning-hover);
    --warning-foreground: var(--app-ui-status-foreground);
    --warning-soft: var(--app-ui-warning-soft);
    --warning-soft-hover: #ecdfc8;
    --warning-soft-foreground: var(--app-ui-warning);
    --danger: var(--app-ui-danger);
    --danger-hover: var(--app-ui-danger-hover);
    --danger-foreground: var(--app-ui-status-foreground);
    --danger-soft: var(--app-ui-danger-soft);
    --danger-soft-hover: #edd7d2;
    --danger-soft-foreground: var(--app-ui-danger);

    --border: var(--app-ui-border);
    --border-secondary: var(--app-ui-control-border);
    --border-tertiary: var(--app-ui-control-border-hover);
    --separator: var(--app-ui-divider);
    --separator-secondary: var(--app-ui-border);
    --separator-tertiary: var(--app-ui-control-border);
    --focus: var(--app-ui-focus);
    --link: var(--app-ui-link);

    --field-background: var(--app-ui-control-bg);
    --field-foreground: var(--app-ui-text);
    --field-placeholder: var(--app-ui-text-muted);
    --field-border: var(--app-ui-control-border);
    --field-hover: #f7f4f1;
    --field-focus: var(--app-ui-control-bg-focus);
    --field-border-hover: var(--app-ui-control-border-hover);
    --field-border-focus: var(--app-field-focus-border);
    --field-shadow: 0 0 #0000;

    --segment: var(--app-ui-surface);
    --segment-foreground: var(--app-ui-text);
    --surface-shadow: var(--app-ui-surface-shadow);
    --overlay-shadow: var(--app-ui-overlay-shadow);

  }
}

@layer blocks {
  /* The legacy runner predates the HeroUI semantic namespace. Bridge only its
     intro, resume and active-flow roots so results, crisis UI and data-driven
     Luscher swatches retain their independent visual semantics. */
  .app-test-intro,
  .app-test-resume,
  .app-test-runner:not(.app-test-runner_state_result) {
    --app-color-bg-elevated: var(--app-ui-surface);
    --app-color-bg-subtle: var(--app-ui-surface-hover);
    --app-color-bg-muted: var(--app-ui-surface-active);
    --app-color-text: var(--app-ui-text);
    --app-color-text-soft: var(--app-ui-text-secondary);
    --app-color-text-muted: var(--app-ui-text-muted);
    --app-color-border: color-mix(in srgb, var(--app-ui-divider) 76%, transparent);
    --app-color-border-strong: var(--app-ui-control-border);
    --app-color-accent: var(--app-ui-accent);
    --app-color-accent-strong: var(--app-ui-accent-hover);
    --app-color-accent-muted: var(--app-ui-accent-soft);
    --app-color-focus: var(--app-ui-focus);
    --app-button-primary-bg: var(--app-ui-accent);
    --app-button-primary-text: var(--app-ui-accent-foreground);
    --app-option-bg: color-mix(in srgb, var(--app-ui-surface) 92%, transparent);
    --app-option-bg-hover: var(--app-ui-surface-hover);
    --app-option-bg-selected: var(--app-ui-accent-soft);
    --app-option-border: color-mix(in srgb, var(--app-ui-divider) 76%, transparent);
    --app-option-border-hover: var(--app-ui-control-border);
    --app-option-border-selected: color-mix(in srgb, var(--app-ui-accent) 64%, var(--app-ui-control-border));
    --app-progress-track: var(--app-ui-divider);
    --app-runner-text-soft: var(--app-ui-text-secondary);
    --app-runner-text-muted: var(--app-ui-text-muted);
    --app-type-color-meta: var(--app-ui-text-muted);
    --app-surface-raised: var(--app-ui-surface);
    --app-shell-raised-bg: var(--app-ui-surface);
  }

  /* Primary runner actions are the expressive brand moment. The selector is
     deliberately scoped and excludes disabled controls to preserve state. */
  .app-test-intro .app-button_variant_primary:not(:disabled),
  .app-test-resume .app-button_variant_primary:not(:disabled),
  .app-test-runner:not(.app-test-runner_state_result) .app-button_variant_primary:not(:disabled) {
    border-color: transparent;
    background-color: var(--app-pearl-blush);
    background-image: var(--app-brand-gradient);
    background-repeat: no-repeat;
    color: var(--app-brand-gradient-foreground);
  }

  .app-test-intro .app-button_variant_secondary:not(:disabled),
  .app-test-resume .app-button_variant_secondary:not(:disabled),
  .app-test-runner:not(.app-test-runner_state_result) .app-button_variant_secondary:not(:disabled) {
    border-color: transparent;
    background: var(--app-ui-surface);
    color: var(--app-ui-text-secondary);
  }

  .app-test-intro .app-button_variant_outline:not(:disabled),
  .app-test-resume .app-button_variant_outline:not(:disabled) {
    border-color: var(--app-ui-control-border);
    background: transparent;
    color: var(--app-ui-text);
  }

  @media (hover: hover) and (pointer: fine) {
    .app-test-intro .app-button_variant_primary:not(:disabled):hover,
    .app-test-resume .app-button_variant_primary:not(:disabled):hover,
    .app-test-runner:not(.app-test-runner_state_result) .app-button_variant_primary:not(:disabled):hover {
      border-color: transparent;
      background-image: var(--app-brand-gradient-hover);
      color: var(--app-brand-gradient-foreground);
    }

    .app-test-intro .app-button_variant_secondary:not(:disabled):hover,
    .app-test-resume .app-button_variant_secondary:not(:disabled):hover,
    .app-test-runner:not(.app-test-runner_state_result) .app-button_variant_secondary:not(:disabled):hover {
      border-color: transparent;
      background: var(--app-ui-surface-hover);
      color: var(--app-ui-text);
    }

    .app-test-intro .app-button_variant_outline:not(:disabled):hover,
    .app-test-resume .app-button_variant_outline:not(:disabled):hover {
      border-color: var(--app-ui-control-border-hover);
      background: var(--app-ui-surface-hover);
      color: var(--app-ui-text);
    }
  }

  .app-test-intro .app-button_variant_primary:not(:disabled):active,
  .app-test-resume .app-button_variant_primary:not(:disabled):active,
  .app-test-runner:not(.app-test-runner_state_result) .app-button_variant_primary:not(:disabled):active {
    background-image: var(--app-brand-gradient-pressed);
  }

  .app-test-intro .app-button_variant_secondary:not(:disabled):active,
  .app-test-resume .app-button_variant_secondary:not(:disabled):active,
  .app-test-runner:not(.app-test-runner_state_result) .app-button_variant_secondary:not(:disabled):active {
    background: var(--app-ui-surface-active);
  }

  .app-test-intro .app-button_variant_outline:not(:disabled):active,
  .app-test-resume .app-button_variant_outline:not(:disabled):active {
    border-color: var(--app-ui-control-border-hover);
    background: var(--app-ui-surface-active);
  }

  /* Keyboard focus uses one shared ring with no detached double outline. */
  .app-test-intro .app-button:focus-visible,
  .app-test-resume .app-button:focus-visible,
  .app-test-runner:not(.app-test-runner_state_result) .app-button:focus-visible,
  .app-test-runner:not(.app-test-runner_state_result) .app-scale__button:focus-visible,
    .app-test-intro__expand:focus-visible {
    outline: 0;
    outline-offset: 0;
    box-shadow: var(--app-interactive-focus-ring);
  }

  .app-test-runner:not(.app-test-runner_state_result) .app-checkbox:has(.app-checkbox__input:focus-visible) {
    outline: 0;
    box-shadow: var(--app-interactive-focus-ring);
  }

  /* Hover has higher selector weight in the legacy runner. Restate selected
     controls explicitly so pointing at them cannot visually unselect them. */
  .app-test-runner:not(.app-test-runner_state_result) .app-scale__button_state_selected,
  .app-test-runner:not(.app-test-runner_state_result) .app-scale__button_state_selected:hover,
  .app-test-runner:not(.app-test-runner_state_result) .app-checkbox_state_checked,
  .app-test-runner:not(.app-test-runner_state_result) .app-checkbox_state_checked:hover {
    border-color: var(--app-option-border-selected);
    background: var(--app-option-bg-selected);
    color: var(--app-ui-text);
  }

  /* Some mobile browsers keep :hover after a tap. Restore the neutral state
     for coarse pointers so a tap never leaves an unselected control tinted. */
  @media (hover: none), (pointer: coarse) {
    .app-test-runner:not(.app-test-runner_state_result) .app-scale__button:not(.app-scale__button_state_selected):hover,
    .app-test-runner:not(.app-test-runner_state_result) .app-checkbox:not(.app-checkbox_state_checked):hover {
      border-color: var(--app-option-border);
      background: var(--app-option-bg);
      color: var(--app-ui-text-secondary);
    }

    .app-test-runner:not(.app-test-runner_state_result) .app-checkbox:not(.app-checkbox_state_checked):hover .app-checkbox__tick-bg {
      stroke: var(--app-color-border-strong);
    }
  }

  .app-test-runner:not(.app-test-runner_state_result) .app-test-runner__progress-value {
    background-color: var(--app-pearl-blush);
    background-image: var(--app-brand-gradient);
    box-shadow: none;
  }

  .app-test-runner:not(.app-test-runner_state_result) .app-short-reminder,
  .app-test-runner:not(.app-test-runner_state_result) .app-time-window {
    border-color: transparent;
    background: var(--app-ui-accent-soft);
    color: color-mix(in srgb, var(--app-ui-accent) 82%, var(--app-ui-text-secondary));
  }

  .app-test-runner:not(.app-test-runner_state_result) .app-time-window_state_changed {
    border-color: transparent;
    background: var(--app-ui-accent-soft-hover);
    color: color-mix(in srgb, var(--app-ui-accent) 90%, var(--app-ui-text));
  }

  /* The primary action is the only default HeroUI control that receives the
     pearl gradient. Chips, links, focus and selection states use --accent as
     a solid color, so the semantic system remains predictable. */
  .button--primary {
    background-color: var(--app-pearl-blush);
    background-image: var(--app-brand-gradient);
    background-repeat: no-repeat;
    color: var(--app-brand-gradient-foreground);
  }

  @media (hover: hover) {
    .button--primary:hover,
    .button--primary[data-hovered="true"] {
      background-image: var(--app-brand-gradient-hover);
    }
  }

  .button--primary:active,
  .button--primary[data-pressed="true"] {
    background-image: var(--app-brand-gradient-pressed);
  }

  .search-field {
    --app-search-field-min-height: 2.75rem;
    min-width: 0;
  }

  .search-field__group {
    min-height: var(--app-search-field-min-height);
  }

  @media (min-width: 640px) {
    .search-field {
      --app-search-field-min-height: 2.5rem;
    }
  }


  /* Theraphea fields keep one 1px boundary in their active state. HeroUI still
     owns interaction, validation and motion; only its default 2px field ring is
     cleared here so the focused border remains the single visible boundary. */
  .input:focus,
  .input[data-focused="true"],
  .textarea:focus,
  .textarea[data-focused="true"],
  .input-group:has([data-slot="input-group-input"]:focus),
  .input-group:has([data-slot="input-group-textarea"]:focus),
  .search-field__group:focus-within:not([data-invalid="true"], [aria-invalid="true"]),
  .search-field__group[data-focus-within="true"]:not([data-invalid="true"], [aria-invalid="true"]),
  .select__trigger:focus,
  .select__trigger[data-focus="true"] {
    --tw-ring-shadow: 0 0 #0000;
    border-color: var(--app-field-focus-border);
    background-color: var(--app-ui-control-bg-focus);
  }

  .input[data-focus-visible="true"],
  .textarea[data-focus-visible="true"],
  .search-field__group:has([data-slot="search-field-input"][data-focus-visible="true"]):not([data-invalid="true"], [aria-invalid="true"]),
  .input-group:has([data-slot="input-group-input"][data-focus-visible="true"]),
  .input-group:has([data-slot="input-group-textarea"][data-focus-visible="true"]) {
    --tw-ring-shadow: 0 0 #0000;
    border-color: var(--app-field-focus-border);
    background-color: var(--app-ui-control-bg-focus);
  }

  .color-input-group:focus-within,
  .color-input-group[data-focus-within="true"],
  .date-input-group:focus-within,
  .date-input-group[data-focus-within="true"],
  .number-field__group:focus-within,
  .number-field__group[data-focus-within="true"],
  .search-field__group:focus-within,
  .search-field__group[data-focus-within="true"],
  .combo-box [data-slot="input"]:focus,
  .combo-box [data-slot="input"][data-focus] {
    --tw-ring-shadow: 0 0 #0000;
  }

  /* Keep browser autofill inside the same semantic field surface in both
     themes; individual account/auth screens no longer own this state. */
  .input:autofill,
  .input:-webkit-autofill,
  .input:-webkit-autofill:hover,
  .textarea:autofill,
  .textarea:-webkit-autofill,
  .textarea:-webkit-autofill:hover {
    border-color: var(--app-ui-control-border);
    background-color: var(--app-ui-control-bg);
    color: var(--app-ui-text);
    -webkit-text-fill-color: var(--app-ui-text);
    caret-color: var(--app-ui-text);
    -webkit-box-shadow: 0 0 0 1000px var(--app-ui-control-bg) inset;
    box-shadow: 0 0 0 1000px var(--app-ui-control-bg) inset;
  }

  .input:autofill:focus,
  .input:autofill:focus-visible,
  .input:-webkit-autofill:focus,
  .input:-webkit-autofill:focus-visible,
  .textarea:autofill:focus,
  .textarea:autofill:focus-visible,
  .textarea:-webkit-autofill:focus,
  .textarea:-webkit-autofill:focus-visible {
    border-color: var(--app-field-focus-border);
    background-color: var(--app-ui-control-bg-focus);
    -webkit-text-fill-color: var(--app-ui-text);
    caret-color: var(--app-ui-text);
    -webkit-box-shadow: 0 0 0 1000px var(--app-ui-control-bg-focus) inset;
    box-shadow: 0 0 0 1000px var(--app-ui-control-bg-focus) inset;
  }


  .select__trigger[data-focus-visible="true"] {
    --tw-ring-shadow: 0 0 #0000;
    border-color: var(--app-field-focus-border);
    background-color: var(--app-ui-control-bg-focus);
  }

  .input[data-invalid="true"]:focus,
  .textarea[data-invalid="true"]:focus,
  .input-group[data-invalid="true"]:has([data-slot="input-group-input"]:focus),
  .input-group[data-invalid="true"]:has([data-slot="input-group-textarea"]:focus) {
    border-color: var(--app-ui-danger);
  }

  .input[data-invalid="true"][data-focus-visible="true"],
  .textarea[data-invalid="true"][data-focus-visible="true"],
  .input-group[data-invalid="true"]:has([data-slot="input-group-input"][data-focus-visible="true"]),
  .input-group[data-invalid="true"]:has([data-slot="input-group-textarea"][data-focus-visible="true"]) {
    border-color: var(--app-ui-danger);
  }

  .input-otp__slot[data-active="true"] {
    --tw-ring-shadow: 0 0 #0000;
    border-color: var(--app-field-focus-border);
    background-color: var(--app-ui-control-bg-focus);
  }


  .input-otp:has(.input-otp__input[data-focus-visible="true"]) .input-otp__slot[data-active="true"][data-invalid="true"] {
    border-color: var(--app-ui-danger);
  }

  .input-otp:has(.input-otp__input:focus-visible) .input-otp__slot[data-active="true"][data-invalid="true"] {
    border-color: var(--app-ui-danger);
  }

  @media (prefers-contrast: more) {
    .input:focus-visible,
    .textarea:focus-visible,
    .search-field__group:has([data-slot="search-field-input"]:focus-visible),
    .input-group:has([data-slot="input-group-input"]:focus-visible),
    .input-group:has([data-slot="input-group-textarea"]:focus-visible),
    .color-input-group:has([data-slot="color-input-group-input"]:focus-visible),
    .date-input-group:has([data-slot="date-input-group-segment"]:focus-visible),
    .number-field__group:has([data-slot="number-field-input"]:focus-visible),
    .combo-box [data-slot="input"]:focus-visible,
    .select__trigger:focus-visible,
    .input-otp:has(.input-otp__input:focus-visible) .input-otp__slot[data-active="true"] {
      outline: 2px solid var(--app-ui-focus);
      outline-offset: 0;
    }
  }

  @media (forced-colors: active) {
    .input:focus-visible,
    .textarea:focus-visible,
    .search-field__group:has([data-slot="search-field-input"]:focus-visible),
    .input-group:has([data-slot="input-group-input"]:focus-visible),
    .input-group:has([data-slot="input-group-textarea"]:focus-visible),
    .color-input-group:has([data-slot="color-input-group-input"]:focus-visible),
    .date-input-group:has([data-slot="date-input-group-segment"]:focus-visible),
    .number-field__group:has([data-slot="number-field-input"]:focus-visible),
    .combo-box [data-slot="input"]:focus-visible,
    .select__trigger:focus-visible,
    .input-otp:has(.input-otp__input:focus-visible) .input-otp__slot[data-active="true"] {
      outline: 2px solid Highlight;
      outline-offset: 0;
      box-shadow: none;
    }

    .button--primary {
      background-image: none;
      border: 1px solid ButtonText;
    }

    .app-test-intro .app-button_variant_primary:not(:disabled),
    .app-test-resume .app-button_variant_primary:not(:disabled),
    .app-test-runner:not(.app-test-runner_state_result) .app-button_variant_primary:not(:disabled) {
      border: 1px solid ButtonText;
      background-image: none;
      color: ButtonText;
    }

    .app-test-intro .app-button_variant_outline:not(:disabled),
    .app-test-resume .app-button_variant_outline:not(:disabled) {
      border: 1px solid ButtonText;
      background: Canvas;
      color: ButtonText;
    }

    .app-test-intro .app-button:focus-visible,
    .app-test-resume .app-button:focus-visible,
    .app-test-runner:not(.app-test-runner_state_result) .app-button:focus-visible,
    .app-test-runner:not(.app-test-runner_state_result) .app-scale__button:focus-visible,
    .app-test-runner:not(.app-test-runner_state_result) .app-checkbox:has(.app-checkbox__input:focus-visible),
    .app-test-intro__expand:focus-visible {
      outline: 2px solid Highlight;
      outline-offset: 0;
      box-shadow: none;
    }
  }
}
/* ============================================================================
   HeroUI v3 theme integration.

   GOAL: expose HeroUI semantic slots through Tailwind's --color-* namespace.
   This bridge contains aliases only; the Theraphea brand values live in the
   adjacent theraphea-theme.css layer.

   WHAT THIS FILE DOES:
   1. The HeroUI default theme (variables.css with --accent, --success,
      --warning, --danger, --background, --foreground, --surface*, --border
      and all -hover/-soft/-foreground variants for both light and dark) is
      loaded directly from globals.css BEFORE this file.
   2. This file does NOT set visual values for --accent / status / surfaces.
   3. Exposes the Tailwind v4 --color-* namespace aliases pointing at the
      HeroUI slots, so HeroUI's utility classes (bg-accent, text-foreground,
      border-border) resolve to HeroUI's own palette.

   4. theraphea-theme.css is loaded after this file and supplies Moonlit Pearl
      semantic values. Keeping that layer separate makes future re-skinning
      possible without changing the utility bridge.

   Loaded after HeroUI's default theme and before the Theraphea brand layer.
   ============================================================================ */

@layer tokens {
  /* Tailwind v4 color namespace aliases.
     Tailwind v4 generates utilities like `bg-accent`, `text-foreground`,
     `border-border` that resolve to `var(--color-<name>)`. HeroUI v3
     components apply these utilities, so the HeroUI slot values (defined
     by the default theme loaded above) must be exposed under the --color-*
     prefix. We do NOT redefine the values — aliases automatically follow the
     Moonlit Pearl values supplied by theraphea-theme.css. */
  :root,
  :root[data-theme="dark"],
  :root[data-theme="light"],
  [data-theme="dark"],
  [data-theme="light"] {
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-foreground-muted: var(--muted);
    --color-accent: var(--accent);
    --color-accent-hover: var(--accent-hover);
    --color-accent-foreground: var(--accent-foreground);
    --color-accent-soft: var(--accent-soft);
    --color-accent-soft-hover: var(--accent-soft-hover);
    --color-accent-soft-foreground: var(--accent-soft-foreground);
    --color-default: var(--default);
    --color-default-hover: var(--default-hover);
    --color-default-foreground: var(--default-foreground);
    --color-default-soft: var(--default-soft);
    --color-default-soft-hover: var(--default-soft-hover);
    --color-default-soft-foreground: var(--default-soft-foreground);
    --color-success: var(--success);
    --color-success-hover: var(--success-hover);
    --color-success-foreground: var(--success-foreground);
    --color-success-soft: var(--success-soft);
    --color-success-soft-hover: var(--success-soft-hover);
    --color-success-soft-foreground: var(--success-soft-foreground);
    --color-danger: var(--danger);
    --color-danger-hover: var(--danger-hover);
    --color-danger-foreground: var(--danger-foreground);
    --color-danger-soft: var(--danger-soft);
    --color-danger-soft-hover: var(--danger-soft-hover);
    --color-danger-soft-foreground: var(--danger-soft-foreground);
    --color-warning: var(--warning);
    --color-warning-hover: var(--warning-hover);
    --color-warning-foreground: var(--warning-foreground);
    --color-warning-soft: var(--warning-soft);
    --color-warning-soft-hover: var(--warning-soft-hover);
    --color-warning-soft-foreground: var(--warning-soft-foreground);
    --color-surface: var(--surface);
    --color-surface-secondary: var(--surface-secondary);
    --color-surface-tertiary: var(--surface-tertiary);
    --color-overlay: var(--overlay);
    --color-backdrop: var(--backdrop);
    --color-border: var(--border);
    --color-separator: var(--separator);
    --color-focus: var(--focus);
    --color-link: var(--link);

    /* Border tokens used by HeroUI utility classes (border-border etc.) */
    --color-border-secondary: var(--border-secondary);
    --color-border-tertiary: var(--border-tertiary);

    /* Background tonal tokens */
    --color-background-secondary: var(--background-secondary);
    --color-background-tertiary: var(--background-tertiary);
    --color-background-inverse: var(--background-inverse);

    /* Surface foreground + segment (used by segmented controls) */
    --color-surface-foreground: var(--surface-foreground);
    --color-segment: var(--segment);
    --color-segment-foreground: var(--segment-foreground);

    /* Field tokens (form input backgrounds) */
    --color-field-background: var(--field-background);
    --color-field-foreground: var(--field-foreground);
    --color-field-placeholder: var(--field-placeholder);
    --color-field-border: var(--field-border);

    /* Muted text token */
    --color-muted: var(--muted);

    /* Font family bridge.
       HeroUI Typography inherits its font from the CSS cascade (body
       font-family). Exposing --font-sans here makes the inheritance explicit
       and lets any HeroUI component that references --font-sans resolve to
       the project's Inter Tight stack. */
    --font-sans: var(--app-font-family-base);
  }
}
/* ============================================================================
   02 - Site chrome (@layer blocks).
   Global frame (.app-app*), toast system (.app-toast*), site header
   (.app-header*), locale switcher, theme switch, burger control, site footer (.app-footer*).
   First `blocks` pass - later files override at equal specificity.
   Extracted verbatim from globals.css (commit 085838f); cascade order kept.
   ============================================================================ */

@layer blocks {
  .app-app {
    min-height: 100vh;
    background: var(--app-ui-canvas);
  }

  .app-app__main {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: var(--app-space-12) 0 var(--app-space-16);
  }

  .app-toast-viewport {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 260;
    width: min(24rem, calc(100vw - 2rem));
    display: grid;
    gap: 0.625rem;
    pointer-events: none;
  }

  /* The toast viewport floats outside .app-shell, so it consumes the shared
     Moonlit Pearl UI semantics directly. */
  .app-toast {
    --app-toast-tone: var(--app-ui-text-secondary);
    --app-toast-hover-bg: var(--app-ui-surface-active);
    --app-toast-shadow: var(--app-ui-overlay-shadow);
    position: relative;
    pointer-events: auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.7rem;
    padding: 0.875rem 3.75rem 0.875rem 0.875rem;
    border-radius: var(--app-radius-md);
    background: var(--app-ui-surface);
    color: var(--app-ui-text);
    box-shadow: var(--app-toast-shadow);
    animation: app-toast-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .app-toast_tone_success {
    --app-toast-tone: var(--app-ui-success);
  }

  .app-toast_tone_error {
    --app-toast-tone: var(--app-ui-danger);
  }

  .app-toast_tone_warning {
    --app-toast-tone: var(--app-ui-warning);
  }

  .app-toast_tone_info {
    --app-toast-tone: var(--app-ui-info);
  }

  .app-toast__icon,
  .app-toast__close {
    display: inline-grid;
    place-items: center;
    border: 0;
    line-height: 1;
  }

  .app-toast__icon {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--app-radius-full);
    background: color-mix(in srgb, var(--app-toast-tone) 16%, transparent);
    color: var(--app-toast-tone);
  }

  .app-toast__icon svg {
    width: 0.875rem;
    height: 0.875rem;
  }

  .app-toast__body {
    min-width: 0;
    display: grid;
    gap: 0.25rem;
  }

  .app-toast__title {
    color: var(--app-ui-text);
    font-size: var(--app-font-size-sm);
    font-weight: var(--app-type-weight-bold);
    line-height: 1.3;
  }

  .app-toast__description {
    margin: 0;
    color: var(--app-ui-text-secondary);
    font-size: var(--app-font-size-xs);
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  /* Corner close control: the same 0.5rem inset from the toast's top and
     right edges, glyph centered in its own round hit area — no offset
     margins. The toast's right padding reserves this zone for every line. */
  .app-toast__close {
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--app-radius-full);
    background: transparent;
    color: var(--app-ui-text-muted);
    cursor: pointer;
    transition:
      background-color 160ms ease,
      color 160ms ease;
  }

  .app-toast__close:hover {
    background: var(--app-toast-hover-bg);
    color: var(--app-ui-text);
  }

  .app-toast__close:focus-visible {
    outline: none;
    box-shadow: var(--app-interactive-focus-ring);
  }

  .app-toast__close svg {
    width: 0.875rem;
    height: 0.875rem;
  }

  @media (max-width: 620px) {
    .app-toast-viewport {
      right: max(0.75rem, env(safe-area-inset-right));
      bottom: max(0.75rem, env(safe-area-inset-bottom));
      width: min(24rem, calc(100vw - 1.5rem));
    }

    body:has(.app-account) .app-toast-viewport {
      top: calc(72px + 0.75rem + env(safe-area-inset-top));
      bottom: auto;
    }

    .app-toast {
      padding-right: 3.75rem;
    }

    .app-toast__close {
      top: 0.375rem;
      right: 0.375rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .app-toast {
      animation: none;
    }
  }

  @keyframes app-toast-in {
    from {
      opacity: 0;
      transform: translate3d(0, 0.55rem, 0) scale(0.98);
    }

    to {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
    }
  }

  .app-header {
    --app-header-control-bg: var(--app-ui-surface-hover);
    --app-header-control-bg-hover: var(--app-ui-surface-active);
    --app-header-control-border: transparent;
    --app-header-control-text: var(--app-ui-text);
    --app-header-control-text-muted: var(--app-ui-text-muted);
    --app-header-surface: var(--app-ui-sidebar);
    --app-header-shadow: none;
    --app-header-blend-mode: normal;
    --app-header-blend-color: var(--app-ui-text);
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    min-height: calc(var(--app-header-row-height, 74px) + var(--app-shell-edge-y, var(--app-space-3)));
    padding: var(--app-shell-edge-y, var(--app-space-3)) var(--app-shell-edge-x, var(--app-space-5-5)) 0;
    border-bottom: 0;
    background: var(--app-shell-bg, var(--app-ui-canvas));
    color: var(--app-header-blend-color);
    mix-blend-mode: var(--app-header-blend-mode);
  }

  .app-header__inner {
    width: 100%;
    min-height: 64px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
    align-items: center;
    gap: clamp(16px, 2vw, 32px);
    padding-inline: var(--app-space-6);
    border-radius: var(--app-radius-lg);
    background: var(--app-header-surface);
    box-shadow: var(--app-header-shadow, none);
    color: var(--app-header-blend-color);
  }

  .app-header_editor .app-header__inner {
    grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);
    gap: clamp(12px, 1.4vw, 24px);
    min-height: 64px;
  }

  .app-header-editor__side {
    display: flex;
    align-items: center;
    gap: var(--app-space-2);
    min-width: 0;
  }

  .app-header-editor__side_left {
    justify-self: start;
  }

  .app-header-editor__side_right {
    --app-header-switch-width: 5.875rem;
    --app-header-switch-height: 2.75rem;
    --app-header-switch-padding: 0.25rem;
    --app-header-switch-cell: calc((var(--app-header-switch-width) - var(--app-header-switch-padding) * 2) / 2);
    justify-self: end;
  }

  .app-header-editor__center {
    width: 100%;
    min-width: 0;
    justify-self: center;
    text-align: center;
  }

  .app-header-editor__title {
    width: 100%;
    margin: 0;
    max-width: min(42vw, 560px);
    overflow: hidden;
    color: var(--app-header-blend-color);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-header-editor__placeholder-control {
    width: var(--app-panel-toggle-size, 34px);
    height: var(--app-panel-toggle-size, 34px);
  }

  .app-header-editor__save-status[data-empty="true"] {
    display: none;
  }

  .app-header-editor__theme {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
  }

  /* The public-page action is direct on wide screens and moves into the
     overflow menu when the direct label is hidden. Never show both. */
  .app-header-editor__more {
    display: none;
  }

  .app-header-editor__save {
    display: inline-flex;
    margin-left: var(--app-space-1);
  }

  .app-header__brand {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    min-height: 44px;
    min-width: 0;
    color: var(--app-header-blend-color);
  }

  .app-header__brand:focus-visible {
    border-radius: var(--app-radius-xs);
    outline: 0;
    box-shadow: var(--app-interactive-focus-ring);
  }

  .app-header__logo {
    width: clamp(112px, 14vw, 146px);
    display: block;
    flex: 0 0 auto;
    aspect-ratio: 41 / 13;
    background: var(--app-brand-logo-gradient);
    mask: url("https://theraphea-ads.vercel.app/brand/theraphea-logo.svg") center / contain no-repeat;
    -webkit-mask: url("https://theraphea-ads.vercel.app/brand/theraphea-logo.svg") center / contain no-repeat;
  }

  .app-header__nav {
    justify-self: center;
    margin-left: 0;
    color: var(--app-header-blend-color);
  }

  .app-navigation-menu__highlight-container {
    position: relative;
    display: inline-block;
  }

  .app-navigation-menu__highlight {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
    will-change: transform, width, height;
  }

  .app-navigation-menu__list {
    position: relative;
    z-index: 1;
  }

  .app-header__nav-list {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: var(--app-space-2);
  }

  .app-header__link {
    position: relative;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 9px 11px;
    border-radius: var(--app-radius-xs);
    color: color-mix(in srgb, var(--app-header-blend-color) 86%, transparent);
    font-size: var(--app-font-size-sm);
    font-weight: var(--app-type-weight-normal);
    line-height: var(--app-type-body-sm-line-height);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
      background var(--app-motion-fast),
      color var(--app-motion-fast);
  }

  .app-header__link-label {
    position: relative;
    z-index: 1;
  }

  .app-header__link:hover,
  .app-header__link:focus-visible {
    background: var(--app-header-control-bg-hover);
    color: var(--app-header-blend-color);
  }

  .app-header__link[data-active="true"] {
    background: var(--app-header-control-bg);
    color: var(--app-header-blend-color);
  }

  .app-header__link:focus-visible {
    outline: 0;
    box-shadow: var(--app-interactive-focus-ring);
  }

  .app-header__actions {
    --app-header-switch-width: 5.875rem;
    --app-header-switch-height: 2.75rem;
    --app-header-switch-padding: 0.25rem;
    --app-header-switch-cell: calc((var(--app-header-switch-width) - var(--app-header-switch-padding) * 2) / 2);
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 0.5rem;
  }

  .app-header-account {
    width: 12rem;
    min-width: 12rem;
    max-width: 12rem;
    height: 2.75rem;
    display: grid;
    grid-template-columns: 2.125rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3125rem 0.625rem 0.3125rem 0.3125rem;
    border: 0;
    border-radius: var(--app-radius-full);
    background: var(--app-header-control-bg);
    color: var(--app-header-control-text);
    cursor: pointer;
    font: inherit;
    line-height: 1;
    text-align: left;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .app-header-account_state_loading {
    pointer-events: none;
  }

  .app-header-account__avatar {
    width: 2.125rem;
    height: 2.125rem;
    min-width: 2.125rem;
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    border-radius: var(--app-radius-full) !important;
    background: var(--app-header-control-bg-hover) !important;
    color: var(--app-header-control-text);
  }

  .app-header-account__avatar :where(img, [data-slot="avatar-fallback"]) {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
  }

  .app-header-account__avatar :where([data-slot="avatar-fallback"]) {
    background: transparent !important;
  }

  .app-header-account__avatar-fallback {
    width: 100%;
    height: 100%;
    display: inline-grid;
    place-items: center;
    color: var(--app-header-control-text);
    font-size: var(--app-type-caption-size);
    font-weight: var(--app-type-weight-bold);
    line-height: 1;
  }

  .app-header-account_state_guest .app-header-account__avatar-fallback {
    background: transparent;
  }

  .app-header-account__copy {
    min-width: 0;
    display: grid;
    gap: 0.125rem;
  }

  .app-header-account__title,
  .app-header-account__subtitle {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-header-account__title {
    color: var(--app-header-control-text);
    font-size: var(--app-type-caption-size);
    font-weight: var(--app-type-weight-bold);
    line-height: 1.15;
  }

  .app-header-account__subtitle {
    color: var(--app-header-control-text-muted);
    font-size: 0.6875rem;
    font-weight: var(--app-type-weight-medium);
    line-height: 1.15;
  }

  .app-header-account__chevron {
    flex: 0 0 auto;
    color: var(--app-header-control-text-muted);
    transition: transform var(--app-motion-fast);
  }

  .app-header-account[aria-expanded="true"] .app-header-account__chevron {
    transform: rotate(180deg);
  }

  .app-header-account__skeleton-avatar {
    border-radius: var(--app-radius-full);
  }

  .app-header-account__skeleton-avatar,
  .app-header-account__skeleton-line {
    background: color-mix(in srgb, var(--app-header-control-text) 10%, transparent);
  }

  .app-header-account__skeleton-line {
    display: block;
    height: 0.4375rem;
    border-radius: var(--app-radius-full);
  }

  .app-header-account__skeleton-line_title {
    width: 4.75rem;
  }

  .app-header-account__skeleton-line_subtitle {
    width: 6.25rem;
  }

  .app-header-account-popover {
    min-width: 15rem;
    padding: 0.375rem;
    border-radius: var(--app-radius-md);
    background: var(--app-ui-surface);
    color: var(--app-ui-text);
    box-shadow: var(--app-ui-overlay-shadow);
  }

  .app-header-account-menu {
    min-width: 14.25rem;
  }

  .app-header-account-menu__link,
  .app-header-account-menu__action {
    width: 100%;
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: inherit;
    text-decoration: none;
  }

  .app-header-account-menu__link svg,
  .app-header-account-menu__action svg {
    flex: 0 0 auto;
    color: var(--app-ui-text-muted);
  }

  .app-header-account-menu__sign-out {
    color: var(--app-ui-danger);
  }

  .app-header-account-menu__sign-out svg {
    color: currentColor;
  }

  .app-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .app-locale-switcher {
    position: relative;
    display: inline-block;
    width: var(--app-header-switch-width);
    height: var(--app-header-switch-height);
  }

  .app-locale-switcher__toggle,
  .app-theme-switch {
    background: var(--app-header-control-bg);
  }

  .app-locale-switcher__toggle {
    position: relative;
    display: inline-grid;
    grid-template-columns: var(--app-header-switch-cell) var(--app-header-switch-cell);
    align-items: center;
    width: 100%;
    height: 100%;
    padding: var(--app-header-switch-padding);
    border: 0;
    border-radius: var(--app-radius-full);
    color: var(--app-header-control-text-muted);
    cursor: pointer;
    font: inherit;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
      background var(--app-motion-fast),
      color var(--app-motion-fast),
      transform var(--app-duration-press) var(--app-ease-standard);
  }

  .app-locale-switcher__toggle:hover,
  .app-locale-switcher__toggle:focus-visible,
  .app-theme-switch:hover,
  .app-theme-switch:focus-visible {
    background: var(--app-header-control-bg-hover);
    color: var(--app-header-control-text);
  }

  .app-locale-switcher__toggle:focus-visible {
    outline: 0;
    box-shadow: var(--app-interactive-focus-ring);
  }

  .app-locale-switcher__toggle:active {
    transform: scale(var(--app-interactive-press-scale));
  }

  .app-locale-switcher__label {
    position: relative;
    z-index: 2;
    display: inline-grid;
    place-items: center;
    width: var(--app-header-switch-cell);
    height: calc(var(--app-header-switch-height) - var(--app-header-switch-padding) * 2);
    min-width: 0;
    min-height: 0;
    font-size: var(--app-type-caption-size);
    font-weight: 650;
    line-height: 1;
    letter-spacing: 0.01em;
    pointer-events: none;
    transition:
      color var(--app-motion-fast),
      opacity var(--app-motion-fast);
  }

  .app-locale-switcher__thumb,
  .app-theme-switch__thumb {
    border-radius: var(--app-radius-full);
    background: var(--app-ui-control-selected-bg);
    box-shadow: none;
  }

  .app-locale-switcher__thumb {
    position: absolute;
    z-index: 1;
    top: var(--app-header-switch-padding);
    left: var(--app-header-switch-padding);
    width: var(--app-header-switch-cell);
    height: calc(var(--app-header-switch-height) - var(--app-header-switch-padding) * 2);
    --app-locale-thumb-transform: translateX(0);
    transform: var(--app-locale-thumb-transform);
    transition: transform var(--app-motion-base);
  }

  .app-locale-switcher[data-locale="en"] .app-locale-switcher__thumb,
  .app-locale-switcher[data-motion="en"] .app-locale-switcher__thumb {
    --app-locale-thumb-transform: translateX(var(--app-header-switch-cell));
    transform: var(--app-locale-thumb-transform);
  }
  .app-locale-switcher[data-motion="ru"] .app-locale-switcher__thumb {
    --app-locale-thumb-transform: translateX(0);
    transform: var(--app-locale-thumb-transform);
  }


  .app-locale-switcher:not([data-motion])[data-locale="ru"] .app-locale-switcher__label[data-locale="ru"],
  .app-locale-switcher:not([data-motion])[data-locale="en"] .app-locale-switcher__label[data-locale="en"],
  .app-locale-switcher[data-motion="ru"] .app-locale-switcher__label[data-locale="ru"],
  .app-locale-switcher[data-motion="en"] .app-locale-switcher__label[data-locale="en"] {
    color: var(--app-ui-control-selected-foreground);
  }

  .app-locale-switcher__trigger,
  .app-locale-switcher__menu {
    display: none;
  }

  .app-locale-switcher__trigger {
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--app-radius-full);
    background: var(--app-header-control-bg);
    color: var(--app-header-control-text);
    cursor: pointer;
    font: inherit;
    font-size: var(--app-type-caption-size);
    font-weight: 650;
    line-height: 1;
    letter-spacing: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
      background var(--app-motion-fast),
      color var(--app-motion-fast),
      transform var(--app-duration-press) var(--app-ease-standard);
  }

  .app-locale-switcher__trigger:hover,
  .app-locale-switcher__trigger:focus-visible,
  .app-locale-switcher__trigger[aria-expanded="true"] {
    background: var(--app-header-control-bg-hover);
    color: var(--app-header-control-text);
  }

  .app-locale-switcher__trigger:active {
    transform: scale(var(--app-interactive-press-scale));
  }

  .app-locale-switcher__trigger-label {
    display: none;
  }

  .app-locale-switcher__trigger-label:first-child {
    display: inline;
  }

  .app-locale-switcher[data-locale] .app-locale-switcher__trigger-label {
    display: none;
  }

  .app-locale-switcher[data-locale="ru"] .app-locale-switcher__trigger-label[data-locale="ru"],
  .app-locale-switcher[data-locale="en"] .app-locale-switcher__trigger-label[data-locale="en"] {
    display: inline;
  }

  .app-locale-switcher__trigger:focus-visible,
  .app-locale-switcher__option:focus-visible {
    outline: 0;
    box-shadow: var(--app-interactive-focus-ring);
  }

  .app-locale-switcher__menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 90;
    min-width: min(8.25rem, calc(100vw - 2rem));
    padding: 0.25rem;
    border: 0;
    border-radius: 1rem;
    background: var(--app-ui-surface);
    box-shadow: var(--app-ui-overlay-shadow);
    transform-origin: top right;
  }

  .app-locale-switcher__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 2.25rem;
    padding: 0 0.65rem;
    border: 0;
    border-radius: var(--app-radius-md);
    background: transparent;
    color: var(--app-header-control-text-muted);
    cursor: pointer;
    font: inherit;
    font-size: var(--app-type-caption-size);
    font-weight: 620;
    line-height: 1;
    text-align: left;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
      background var(--app-motion-fast),
      color var(--app-motion-fast),
      transform var(--app-duration-press) var(--app-ease-standard);
  }

  .app-locale-switcher__option:hover,
  .app-locale-switcher__option:focus-visible {
    background: var(--app-header-control-bg-hover);
    color: var(--app-header-control-text);
  }

  .app-locale-switcher__option:active {
    transform: scale(var(--app-interactive-press-scale));
  }

  .app-locale-switcher[data-locale="ru"] .app-locale-switcher__option[data-locale="ru"],
  .app-locale-switcher[data-locale="en"] .app-locale-switcher__option[data-locale="en"] {
    background: var(--app-ui-control-selected-bg);
    color: var(--app-ui-control-selected-foreground);
  }

  .app-locale-switcher__option-name {
    color: color-mix(in srgb, currentColor 72%, transparent);
    font-size: var(--app-type-caption-size);
    font-weight: 560;
  }

  .app-theme-switch {
    position: relative;
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    width: var(--app-header-switch-width);
    height: var(--app-header-switch-height);
    padding: var(--app-header-switch-padding);
    border: 0;
    border-radius: var(--app-radius-full);
    color: var(--app-header-control-text-muted);
    cursor: pointer;
    line-height: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
      background var(--app-motion-fast),
      color var(--app-motion-fast),
      transform var(--app-duration-press) var(--app-ease-standard);
  }

  .app-theme-switch:focus-visible {
    outline: 0;
    box-shadow: var(--app-interactive-focus-ring);
  }

  .app-theme-switch:active:not(:disabled) {
    transform: scale(var(--app-interactive-press-scale));
  }

  .app-theme-switch:disabled {
    cursor: default;
    opacity: 1;
  }

  .app-theme-switch__icon {
    position: relative;
    z-index: 2;
    display: inline-grid;
    place-items: center;
    justify-self: center;
    align-self: center;
    width: var(--app-header-switch-cell);
    height: calc(var(--app-header-switch-height) - var(--app-header-switch-padding) * 2);
    color: currentColor;
    line-height: 0;
    pointer-events: none;
    transition: color var(--app-motion-fast);
  }

  .app-theme-switch__icon svg {
    display: block;
    width: var(--app-icon-size-sm);
    height: var(--app-icon-size-sm);
    overflow: visible;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform-box: fill-box;
    transform-origin: center;
    vector-effect: non-scaling-stroke;
  }

  .app-theme-switch__icon :where(path, circle) {
    stroke-linecap: round;
    stroke-linejoin: round;
    transform-box: fill-box;
    transform-origin: center;
    vector-effect: non-scaling-stroke;
  }

  .app-theme-switch__sun-ray {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
  }

  .app-theme-switch__moon-crescent {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
  }

  .app-theme-switch__sun-ray_0 { --app-sun-ray-index: 0; }
  .app-theme-switch__sun-ray_1 { --app-sun-ray-index: 1; }
  .app-theme-switch__sun-ray_2 { --app-sun-ray-index: 2; }
  .app-theme-switch__sun-ray_3 { --app-sun-ray-index: 3; }
  .app-theme-switch__sun-ray_4 { --app-sun-ray-index: 4; }
  .app-theme-switch__sun-ray_5 { --app-sun-ray-index: 5; }
  .app-theme-switch__sun-ray_6 { --app-sun-ray-index: 6; }
  .app-theme-switch__sun-ray_7 { --app-sun-ray-index: 7; }

  .app-theme-switch__thumb {
    position: absolute;
    z-index: 1;
    top: var(--app-header-switch-padding);
    left: var(--app-header-switch-padding);
    width: var(--app-header-switch-cell);
    height: calc(var(--app-header-switch-height) - var(--app-header-switch-padding) * 2);
    --app-theme-thumb-transform: translateX(0);
    transform: var(--app-theme-thumb-transform);
    transition: transform var(--app-motion-base), background var(--app-motion-fast);
  }

  .app-theme-switch[data-active-theme="light"] .app-theme-switch__thumb,
  .app-theme-switch[data-motion="light"] .app-theme-switch__thumb,
  :root[data-theme="light"] .app-theme-switch:not([data-hydrated="true"]) .app-theme-switch__thumb {
    --app-theme-thumb-transform: translateX(var(--app-header-switch-cell));
    transform: var(--app-theme-thumb-transform);
  }

  .app-theme-switch[data-motion="dark"] .app-theme-switch__thumb {
    --app-theme-thumb-transform: translateX(0);
    transform: var(--app-theme-thumb-transform);
  }

  .app-theme-switch:not([data-motion])[data-active-theme="dark"] .app-theme-switch__icon_theme_dark,
  .app-theme-switch:not([data-motion])[data-active-theme="light"] .app-theme-switch__icon_theme_light,
  .app-theme-switch[data-motion="dark"] .app-theme-switch__icon_theme_dark,
  .app-theme-switch[data-motion="light"] .app-theme-switch__icon_theme_light,
  :root[data-theme="dark"] .app-theme-switch:not([data-hydrated="true"]) .app-theme-switch__icon_theme_dark,
  :root[data-theme="light"] .app-theme-switch:not([data-hydrated="true"]) .app-theme-switch__icon_theme_light {
    color: var(--app-ui-control-selected-foreground);
  }

  @media (prefers-reduced-motion: no-preference) {
    .app-theme-switch[data-motion="light"] .app-theme-switch__thumb {
      animation: app-theme-thumb-to-light var(--app-motion-base) both;
    }

    .app-theme-switch[data-motion="dark"] .app-theme-switch__thumb {
      animation: app-theme-thumb-to-dark var(--app-motion-base) both;
    }

    .app-theme-switch[data-motion="light"] .app-theme-switch__icon_theme_light svg {
      animation: app-theme-sun-orbit 680ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    .app-theme-switch[data-motion="light"] .app-theme-switch__sun-core {
      animation: app-theme-sun-core 560ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    .app-theme-switch[data-motion="light"] .app-theme-switch__sun-ray {
      animation: app-theme-sun-ray-grow 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
      animation-delay: calc(var(--app-sun-ray-index) * 22ms);
    }

    .app-theme-switch[data-motion="dark"] .app-theme-switch__icon_theme_dark svg {
      animation: app-theme-moon-settle 620ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    .app-theme-switch[data-motion="dark"] .app-theme-switch__moon-crescent {
      animation: app-theme-moon-reveal 560ms cubic-bezier(0.16, 1, 0.3, 1);
    }
  }

  @keyframes app-theme-thumb-to-light {
    from { transform: translateX(0); }
    to { transform: translateX(var(--app-header-switch-cell)); }
  }

  @keyframes app-theme-thumb-to-dark {
    from { transform: translateX(var(--app-header-switch-cell)); }
    to { transform: translateX(0); }
  }

  @keyframes app-theme-sun-orbit {
    0% {
      opacity: 0.82;
      transform: rotate(-10deg) scale(0.98);
    }

    64% {
      opacity: 1;
      transform: rotate(7deg) scale(1.025);
    }

    100% {
      opacity: 1;
      transform: rotate(0deg) scale(1);
    }
  }

  @keyframes app-theme-sun-core {
    0% { opacity: 0.64; transform: scale(0.88); }
    58% { opacity: 1; transform: scale(1.08); }
    100% { transform: scale(1); }
  }

  @keyframes app-theme-sun-ray-grow {
    0% {
      opacity: 0.12;
      stroke-dashoffset: 1;
      transform: scale(0.68);
    }

    62% {
      opacity: 1;
      stroke-dashoffset: 0;
      transform: scale(1.08);
    }

    100% {
      opacity: 1;
      stroke-dashoffset: 0;
      transform: scale(1);
    }
  }

  @keyframes app-theme-moon-settle {
    0% {
      opacity: 0.78;
      transform: translateY(0.045rem) rotate(5deg) scale(0.96);
    }

    64% {
      opacity: 1;
      transform: translateY(-0.018rem) rotate(-2deg) scale(1.035);
    }

    100% {
      opacity: 1;
      transform: translateY(0) rotate(0deg) scale(1);
    }
  }

  @keyframes app-theme-moon-reveal {
    0% { opacity: 0.62; stroke-dashoffset: 0.58; transform: translateX(0.025rem); }
    100% { opacity: 1; stroke-dashoffset: 0; transform: translateX(0); }
  }

  .app-burger {
    width: 2.75rem;
    height: 2.75rem;
    display: none;
    place-items: center;
    position: relative;
    border: 0;
    border-radius: 50%;
    background: var(--app-header-control-bg);
    color: var(--app-header-control-text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: border-color var(--app-motion-fast), background var(--app-motion-fast), transform var(--app-motion-fast);
  }

  .app-burger:hover {
    background: var(--app-header-control-bg-hover);
  }

  .app-burger:focus-visible {
    outline: 0;
    box-shadow: var(--app-interactive-focus-ring);
  }

  .app-burger:active {
    transform: scale(var(--app-interactive-icon-press-scale));
  }

  .app-burger__line {
    position: absolute;
    width: 17px;
    height: 1.5px;
    border-radius: var(--app-radius-full);
    background: currentColor;
    transition: transform var(--app-motion-icon), opacity var(--app-motion-panel-fade);
  }

  .app-burger__line_position_top {
    transform: translateY(-6px);
  }

  .app-burger__line_position_middle {
    transform: translateY(0);
  }

  .app-burger__line_position_bottom {
    transform: translateY(6px);
  }

  .app-burger_state_open .app-burger__line_position_top {
    transform: rotate(45deg);
  }

  .app-burger_state_open .app-burger__line_position_middle {
    opacity: 0;
    transform: scaleX(0.35);
  }

  .app-burger_state_open .app-burger__line_position_bottom {
    transform: rotate(-45deg);
  }

  @media (max-width: 1040px) {
    .app-header-account {
      width: 2.75rem;
      min-width: 2.75rem;
      max-width: 2.75rem;
      grid-template-columns: 1fr;
      gap: 0;
      padding: 0.3125rem;
    }

    .app-header-account_state_guest .app-header-account__avatar {
      background: transparent;
    }

    .app-header-account__copy,
    .app-header-account__chevron {
      display: none;
    }
  }

  @media (max-width: 1180px) {
    .app-header_editor .app-header__inner {
      grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
      padding-inline: var(--app-space-3);
      gap: var(--app-space-2);
    }

    .app-header-editor__side_left {
      gap: var(--app-space-1);
    }

    .app-header-editor__title {
      max-width: 100%;
    }

    .app-header-editor__links {
      display: none;
    }

    .app-header-editor__more {
      display: inline-flex;
    }
  }

  @media (max-width: 959px) {
    .app-burger {
      display: inline-grid;
    }
  }

  @media (max-width: 620px) {
    .app-header_editor .app-header__inner {
      min-height: 58px;
    }

    .app-header-editor__side_left .app-studio__chip {
      display: none;
    }

    .app-header-editor__history {
      display: none;
    }


  }

  .app-footer {
    --app-color-text: var(--app-ui-text);
    --app-color-text-soft: var(--app-ui-text-secondary);
    --app-color-text-muted: var(--app-ui-text-muted);
    --app-color-accent: var(--app-ui-accent);
    --app-color-focus: var(--app-ui-focus);
    margin-top: clamp(32px, 5vw, 64px);
    background: transparent;
  }

  .app-footer__inner {
    width: min(1440px, calc(100% - 80px));
    margin: 0 auto;
    padding: 0 0 var(--app-space-4);
  }

  .app-footer__surface {
    background: var(--app-ui-sidebar);
    border: 0;
    border-radius: clamp(18px, 2vw, 24px);
    padding: clamp(24px, 3vw, 36px);
    box-shadow: none;
  }

  .app-footer__top {
    display: grid;
    grid-template-columns: minmax(210px, 0.85fr) minmax(0, 2.15fr);
    gap: clamp(36px, 5vw, 68px);
    align-items: start;
    padding-bottom: clamp(20px, 2.5vw, 28px);
  }

  .app-footer__brand-group {
    display: grid;
    gap: var(--app-space-4);
    align-content: start;
    min-width: 0;
  }

  .app-footer__brand {
    width: clamp(132px, 12vw, 168px);
    display: block;
  }

  .app-footer__logo {
    width: 100%;
    display: block;
    aspect-ratio: 41 / 13;
    background: var(--app-brand-logo-gradient);
    mask: url("https://theraphea-ads.vercel.app/brand/theraphea-logo.svg") center / contain no-repeat;
    -webkit-mask: url("https://theraphea-ads.vercel.app/brand/theraphea-logo.svg") center / contain no-repeat;
  }

  .app-footer__description {
    max-width: 30ch;
    margin: 0;
    color: var(--app-color-text-soft);
    font-size: var(--app-type-body-sm-size);
    line-height: var(--app-type-body-sm-line-height);
  }

  .app-footer__columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 52px);
    align-items: start;
  }

  .app-footer__column {
    display: grid;
    gap: var(--app-space-2-5);
    align-content: start;
    min-width: 0;
  }

  .app-footer__title {
    margin: 0;
    color: var(--app-color-text);
    font-size: var(--app-type-body-sm-size);
    font-weight: var(--app-type-weight-semibold);
    line-height: var(--app-type-body-sm-line-height);
  }

  .app-footer__column-description {
    max-width: 22ch;
    margin: 0;
    color: var(--app-color-text-soft);
    font-size: var(--app-type-body-sm-size);
    line-height: var(--app-type-body-sm-line-height);
  }

  .app-footer__list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .app-footer__column_navigation .app-footer__list {
    grid-template-columns: 1fr;
  }

  .app-footer__item {
    min-width: 0;
  }

  .app-footer__link {
    width: fit-content;
    max-width: 100%;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: var(--app-space-1) 0;
    color: var(--app-color-text-soft);
    font-size: var(--app-type-body-sm-size);
    font-weight: var(--app-type-weight-normal);
    line-height: var(--app-type-body-sm-line-height);
    overflow-wrap: anywhere;
    transition:
      color var(--app-motion-fast),
      opacity var(--app-motion-fast);
  }

  .app-footer__link:hover {
    color: var(--app-color-text);
    opacity: 1;
  }

  .app-footer__brand:focus-visible,
  .app-footer__link:focus-visible {
    border-radius: var(--app-radius-xs);
    outline: 0;
    box-shadow: var(--app-interactive-focus-ring);
  }

  .app-footer__bottom {
    margin-top: clamp(20px, 3vw, 32px);
  }

  .app-footer__copyright {
    margin: 0;
    color: var(--app-color-text-muted);
    font-size: var(--app-type-caption-size);
    line-height: var(--app-type-caption-line-height);
  }

  @media (prefers-reduced-motion: reduce) {
    .app-header__link,
    .app-locale-switcher__toggle,
    .app-locale-switcher__trigger,
    .app-locale-switcher__option,
    .app-theme-switch,
    .app-burger,
    .app-header-account,
    .app-header-account__chevron,
    .app-locale-switcher__thumb,
    .app-theme-switch__thumb,
    .app-footer__link {
      transition: none;
    }
  }

}
/* ============================================================================
   03 - Shared page primitives (@layer blocks).
   Generic page scaffold (.app-page*), section
   headers (.app-section*), base button (.app-button*).
   Extracted verbatim from globals.css (commit 085838f); cascade order kept.
   ============================================================================ */

@layer blocks {
  /* Project typography roles over HeroUI v3. Native headings/body elements may
     keep their BEM selectors, while every HeroUI Typography call resolves to
     this same fixed product scale and three-tone hierarchy. */
  .typography--h1 {
    color: var(--app-type-color-heading);
    font-size: var(--app-type-heading-1-size);
    line-height: var(--app-type-heading-line-height);
  }

  .typography--h2 {
    color: var(--app-type-color-heading);
    font-size: var(--app-type-heading-2-size);
    line-height: 1.2;
  }

  .typography--h3 {
    color: var(--app-type-color-heading);
    font-size: var(--app-type-heading-3-size);
    line-height: 1.25;
  }

  .typography--h4 {
    color: var(--app-type-color-heading);
    font-size: var(--app-type-heading-4-size);
    line-height: 1.3;
  }

  .typography--h5 {
    color: var(--app-type-color-heading);
    font-size: var(--app-type-lead-size);
    line-height: 1.35;
  }

  .typography--h6 {
    color: var(--app-type-color-heading);
    font-size: var(--app-type-body-size);
    line-height: 1.4;
  }

  .typography--body {
    font-size: var(--app-type-body-size);
    line-height: var(--app-type-body-line-height);
  }

  .typography--body-sm {
    font-size: var(--app-type-body-sm-size);
    line-height: var(--app-type-body-sm-line-height);
  }

  .typography--body-xs {
    font-size: var(--app-type-caption-size);
    line-height: var(--app-type-caption-line-height);
  }

  .typography--color-default {
    color: var(--app-type-color-heading);
  }

  .typography--body.typography--color-default,
  .typography--body-sm.typography--color-default {
    color: var(--app-type-color-body);
  }

  .typography--body-xs.typography--color-default,
  .typography--color-muted {
    color: var(--app-type-color-meta);
  }

  .typography-prose {
    color: var(--app-type-color-body);
  }

  .typography-prose :where(h1, h2, h3, h4, h5, h6, strong) {
    color: var(--app-type-color-heading);
  }

  .app-page {
    display: grid;
    gap: var(--app-space-10);
    min-width: 0;
  }

  .app-page > * {
    min-width: 0;
  }

  .app-page_kind_test {
    gap: var(--app-space-8);
  }

  .app-page_kind_result {
    gap: var(--app-space-8);
  }

  .app-section {
    display: grid;
    gap: var(--app-space-5);
  }

  .app-section__header {
    display: grid;
    gap: var(--app-space-2);
    max-width: 720px;
  }

  .app-section__title {
    margin: 0;
    color: var(--app-color-text);
    font-size: var(--app-font-size-xl);
    font-weight: 650;
  }

  .app-section__lead {
    margin: 0;
    color: var(--app-color-text-muted);
  }

  .app-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 11px 16px;
    border: 1px solid var(--app-color-border);
    border-radius: var(--app-radius-sm);
    cursor: pointer;
    font-size: var(--app-font-size-sm);
    font-weight: var(--app-type-weight-semibold);
    transition:
      border-color var(--app-motion-fast),
      background var(--app-motion-fast),
      color var(--app-motion-fast);
  }

  .app-button:hover {
    border-color: var(--app-color-border-strong);
  }

  .app-button:focus-visible {
    outline: 0;
    box-shadow: var(--app-interactive-focus-ring);
  }

  .app-button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
    transform: none;
  }

  .app-button_variant_primary {
    border-color: var(--app-button-primary-bg);
    background: var(--app-button-primary-bg);
    color: var(--app-button-primary-text);
  }

  .app-button_variant_secondary {
    background: var(--app-color-bg-elevated);
    color: var(--app-color-text);
  }

  .app-button_variant_outline {
    border-color: var(--app-color-border-strong);
    background: transparent;
    color: var(--app-color-text);
  }

  .app-button_variant_ghost {
    background: transparent;
    color: var(--app-color-text-soft);
  }

  .app-motion-highlight {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
  }

  .app-motion-accordion {
    width: 100%;
    min-width: 0;
  }

  .app-motion-accordion__list {
    display: flex;
    flex-direction: column;
    gap: var(--app-motion-accordion-gap, 10px);
    min-width: 0;
    padding: var(--app-motion-accordion-list-padding, var(--app-space-3));
    border-radius: var(--app-motion-accordion-list-radius, var(--app-radius-lg));
  }

  .app-motion-accordion__item {
    min-width: 0;
    overflow: hidden;
    border: var(--app-motion-accordion-item-border, 0);
    border-radius: var(--app-motion-accordion-item-radius, var(--app-radius-md));
    background: var(--app-motion-accordion-item-bg, var(--app-color-bg-elevated));
    color: var(--app-motion-accordion-text, var(--app-color-text));
    box-shadow: var(--app-motion-accordion-shadow, none);
  }

  .app-motion-accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--app-motion-accordion-trigger-gap, var(--app-space-4));
    width: 100%;
    min-height: var(--app-motion-accordion-trigger-min-height, 64px);
    padding: var(--app-motion-accordion-trigger-padding, 20px 28px);
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .app-motion-accordion__trigger:hover,
  .app-motion-accordion__trigger:active {
    background: transparent;
  }

  .app-motion-accordion__trigger:focus-visible {
    outline: 0;
    box-shadow: var(--app-motion-accordion-focus-ring, inset 0 0 0 2px var(--app-ui-focus));
  }

  .app-motion-accordion__item-head {
    display: flex;
    align-items: stretch;
    gap: var(--app-motion-accordion-meta-gap, var(--app-space-2));
  }

  .app-motion-accordion .app-motion-accordion__heading {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: inherit;
    font: inherit;
  }

  .app-motion-accordion__question {
    min-width: 0;
    color: inherit;
    font-size: var(--app-motion-accordion-question-size, clamp(1.2rem, 1.6vw, 1.3rem));
    font-weight: var(--app-motion-accordion-question-weight, 560);
    line-height: var(--app-motion-accordion-question-line-height, 1.22);
    overflow-wrap: anywhere;
  }

  .app-motion-accordion__meta {
    flex: 0 0 auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
  }

  .app-motion-accordion__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--app-motion-accordion-icon-size, 48px);
    width: var(--app-motion-accordion-icon-size, 48px);
    height: var(--app-motion-accordion-icon-size, 48px);
    color: var(--app-motion-accordion-icon-color, currentColor);
  }

  .app-motion-accordion__icon svg {
    display: block;
    flex: 0 0 auto;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }

  .app-motion-accordion__panel {
    min-width: 0;
  }

  .app-motion-accordion__body {
    min-width: 0;
    padding: var(--app-motion-accordion-body-padding, 0 28px 28px);
  }

  .app-motion-accordion__answer {
    min-width: 0;
    color: var(--app-motion-accordion-answer-color, var(--app-color-text-soft));
    font-size: var(--app-motion-accordion-answer-size, var(--app-font-size-base));
    font-weight: var(--app-motion-accordion-answer-weight, 420);
    line-height: var(--app-motion-accordion-answer-line-height, 1.68);
  }

  .app-motion-accordion__answer > :first-child {
    margin-top: 0;
  }

  .app-motion-accordion__answer > :last-child {
    margin-bottom: 0;
  }

  /* Editorial FAQ skin shared by SEO content and the Article Studio canvas.
     Keep the visual contract here so both surfaces cannot drift independently. */
  .app-motion-accordion_variant-editorial {
    --app-motion-accordion-list-padding: 0;
    --app-motion-accordion-list-radius: var(--app-radius-lg);
    --app-motion-accordion-item-radius: var(--app-radius-md);
    --app-motion-accordion-item-bg: var(--app-seo-surface-1);
    --app-motion-accordion-item-border: 1px solid var(--app-seo-border);
    --app-motion-accordion-text: color-mix(in srgb, var(--app-seo-text) 94%, transparent);
    --app-motion-accordion-trigger-min-height: 3.5rem;
    --app-motion-accordion-trigger-padding: 1rem 1.125rem;
    --app-motion-accordion-question-size: var(--app-type-lead-size);
    --app-motion-accordion-question-weight: var(--app-type-weight-bold);
    --app-motion-accordion-question-line-height: 1.24;
    --app-motion-accordion-icon-size: 44px;
    --app-motion-accordion-answer-color: var(--app-seo-text);
    --app-motion-accordion-answer-size: var(--app-type-body-sm-size);
    --app-motion-accordion-answer-line-height: var(--app-type-body-sm-line-height);
    --app-motion-accordion-body-padding: 0 1.125rem 1rem;
  }

  .app-motion-accordion_variant-editorial .app-motion-accordion__answer {
    display: grid;
    gap: 0.75rem;
  }

  .app-motion-accordion_variant-editorial .app-motion-accordion__answer p {
    margin: 0;
  }

  /* Shared table contract. HeroUI owns interactive data tables; native tables
     (articles and SEO content) use this frame so their hierarchy, density and
     responsive overflow cannot drift into a separate visual language. */

  /* Keep visible breathing room between InputGroup separators and typed text. */
  .app-input-group--spaced:has([data-slot="input-group-prefix"]) .input-group__input {
    padding-inline-start: var(--app-space-3);
  }

  .app-input-group--spaced:has([data-slot="input-group-suffix"]) .input-group__input {
    padding-inline-end: var(--app-space-3);
  }

  .app-data-table-frame {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    border: 1px solid var(--app-data-table-border, var(--app-shell-border, var(--app-ui-divider)));
    border-radius: var(--app-radius-lg);
    background: var(--app-data-table-frame-bg, var(--app-shell-chip-bg, var(--app-ui-surface-hover)));
    scrollbar-width: thin;
    scrollbar-color: var(--app-data-table-border, var(--app-shell-border, var(--app-ui-divider))) transparent;
  }

  .app-data-table-frame .app-data-table {
    width: 100%;
    min-width: max-content;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--app-data-table-text, var(--app-shell-text-soft, var(--app-ui-text-secondary)));
    font-size: var(--app-type-body-sm-size);
    line-height: var(--app-type-body-sm-line-height);
  }

  .app-data-table-frame .app-data-table :is(th, td) {
    padding: var(--app-space-3) var(--app-space-4);
    text-align: left;
    vertical-align: middle;
  }

  .app-data-table-frame .app-data-table thead th {
    padding-block: var(--app-space-2-5);
    border-bottom: 0;
    background: transparent;
    color: var(--app-data-table-muted, var(--app-shell-text-muted, var(--app-ui-text-muted)));
    font-size: var(--app-type-caption-size);
    font-weight: var(--app-type-weight-medium);
  }

  .app-data-table-frame .app-data-table tbody :is(th, td) {
    border-bottom: 1px solid color-mix(in srgb, var(--app-data-table-border, var(--app-shell-border, var(--app-ui-divider))) 58%, transparent);
    background: var(--app-data-table-body-bg, var(--app-shell-raised-bg, var(--app-ui-surface)));
    color: var(--app-data-table-text, var(--app-shell-text-soft, var(--app-ui-text-secondary)));
  }

  .app-data-table-frame .app-data-table tbody tr:last-child :is(th, td) {
    border-bottom: 0;
  }

  .app-data-table-frame .app-data-table :is(th, td).app-data-table__numeric {
    overflow-wrap: normal;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }


  .app-data-table__id {
    color: var(--app-data-table-muted, var(--app-shell-text-muted, var(--app-ui-text-muted)));
    white-space: nowrap;
  }

  .app-data-table__empty,
  .app-data-table__meta {
    margin: 0;
    color: var(--app-data-table-muted, var(--app-shell-text-muted, var(--app-ui-text-muted)));
  }

  .app-data-table__meta {
    font-size: var(--app-type-caption-size);
  }

  .app-data-table__empty {
    display: block;
    padding: var(--app-space-6) var(--app-space-4);
    font-size: var(--app-type-body-sm-size);
    text-align: center;
    white-space: normal;
  }

  /* Canonical HeroUI tables wrap phrases at spaces, not inside words.
     Narrow layouts use Table.ScrollContainer for horizontal overflow. */
  :where(.table__column, .table__cell) {
    overflow-wrap: normal;
    word-break: normal;
  }

}
/* ============================================================================
   11 - Legacy site-wide responsive pass #2 (@layer blocks).
   Footer breakpoint stack, runner main-column mobile compaction,
   and scale/actions/button mobile sizing. Cross-zone like 05 -
   kept as an ordered pass.
   Extracted verbatim from globals.css (commit 085838f); cascade order kept.
   ============================================================================ */

@layer blocks {
  @media (max-width: 1180px) {
    .app-footer__columns {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (max-width: 900px) {
    .app-app__main {
      width: min(100% - 40px, 720px);
    }

    .app-footer__inner {
      width: min(100% - 40px, 720px);
      padding-top: 0;
    }

    .app-footer__top {
      grid-template-columns: 1fr;
      gap: 24px;
      padding-bottom: 32px;
    }

    .app-footer__columns {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-footer__column_navigation {
      grid-column: 1 / -1;
    }

    .app-footer__column_navigation .app-footer__list {
      grid-template-columns: 1fr;
    }

    .app-test-runner {
      grid-template-columns: 1fr;
    }

  }

  @media (max-width: 660px) {
    .app-footer {
      margin-top: var(--app-space-6);
    }

    .app-app__main {
      width: auto;
      margin-inline: var(--app-space-2-5);
      padding-top: var(--app-space-5);
    }

    .app-footer__inner {
      width: auto;
      margin-inline: var(--app-space-2-5);
      padding: 0 0 12px;
    }

    .app-footer__surface {
      border-radius: 20px;
      padding: var(--app-space-5);
    }

    .app-footer__top {
      gap: var(--app-space-5);
      padding-bottom: var(--app-space-7);
    }

    .app-footer__brand {
      width: 148px;
    }

    .app-footer__brand-group {
      gap: var(--app-space-3);
    }

    .app-footer__columns {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--app-space-6) var(--app-space-5);
    }

    .app-footer__column_navigation {
      grid-column: 1 / -1;
    }

    .app-footer__column {
      gap: var(--app-space-2-5);
    }

    .app-footer__list {
      gap: 2px;
    }

    .app-footer__link {
      min-height: 44px;
      padding-block: var(--app-space-2);
      font-size: var(--app-type-meta-size);
      line-height: 1.25;
    }

    .app-footer__bottom {
      margin-top: var(--app-space-5);
      padding-top: 0;
    }

    .app-test-runner__main {
      padding: 0;
    }

    .app-test-runner__question-title {
      min-height: clamp(64px, 9vw, 92px);
      font-size: var(--app-type-heading-3-size);
    }

    .app-scale__button {
      min-height: 50px;
      padding: var(--app-space-3) var(--app-space-12) var(--app-space-3) var(--app-space-4);
    }

    .app-scale_width_wide {
      grid-template-columns: 1fr;
    }

    .app-scale_variant_circles {
      display: flex;
    }

    .app-scale_variant_circles .app-scale__button_shape_circle {
      flex-basis: 44px;
      width: 44px;
      height: 44px;
      padding: 0;
    }

    .app-actions {
      flex-direction: column-reverse;
      align-items: stretch;
    }

    .app-test-runner .app-actions {
      flex-direction: row;
      align-items: center;
    }

    .app-button {
      width: 100%;
    }

    .app-test-runner .app-button {
      width: auto;
    }

  }
}
/* ============================================================================
   14 - Right tools rail + mobile tools + drawer (@layer blocks).
   Right rail (.app-right-rail*), catalog filter panel (shared by rail
   and drawer), mobile tools bar (.app-mobile-tools*), universal
   bottom sheet (.app-drawer*) + drawer-hosted sidebar/filter skins,
   drawer breakpoints and reduced-motion.
   Extracted verbatim from globals.css (commit 085838f); cascade order kept.
   ============================================================================ */

/* ============================================================================
   App shell — right tools rail + mobile tools layer.

   Adds a contextual right sidebar (catalog filters) that collapses to the right,
   symmetric to the left aside (same width-token; layout motion is opt-in through
   data-layout-motion="panel"). On mobile the left aside AND the right rail fold into one compact
   two-button tools layer (Разделы / Подбор) that opens accessible drawers — the
   old horizontal nav strip is hidden in favour of it. Runner/test pages render
   neither the rail nor the tools bar, so the central column stays put.
   ============================================================================ */
@layer blocks {
  /* Shells with a right rail reserve the right column; surfaces that pass no
     rail (account, runner/test pages) keep it at 0. `app-shell--has-rail` is set
     by DashboardShell whenever the rightRail slot is filled, so the reservation
     follows the slot — no per-surface allowlist to extend. */
  .app-shell.app-shell--has-rail {
    --app-shell-right-width: clamp(244px, 18vw, 280px);
  }

  .app-shell--rail-collapsed.app-shell--has-rail {
    --app-shell-right-width: var(--app-shell-rail-collapsed-width);
  }

  /* ---- Right rail surface ---- */
  .app-right-rail {
    --app-panel-head-copy-width: minmax(0, 1fr);
    --app-panel-head-gap: 8px;
    --app-panel-head-justify: stretch;
    --app-rail-head-padding-x: 8px;
    --app-panel-copy-opacity: 1;
    --app-panel-copy-pointer-events: auto;
    --app-panel-copy-visibility: visible;
    --app-panel-copy-visibility-delay: 0s;
    --app-panel-copy-x: 0px;
    --app-panel-toggle-icon-transform: none;
    --app-panel-justify-items: stretch;
    --app-rail-body-padding: 2px;
    --app-rail-body-opacity: 1;
    --app-rail-body-pointer-events: auto;
    --app-rail-body-visibility: visible;
    --app-rail-body-visibility-delay: 0s;
    --app-rail-body-x: 0px;
    --app-rail-peek-opacity: 0;
    --app-rail-peek-pointer-events: none;
    --app-rail-peek-visibility: hidden;
    --app-rail-peek-visibility-delay: var(--app-shell-panel-hide-delay, var(--app-duration-panel-fade));
    --app-rail-peek-y: calc(0px - var(--app-motion-distance-sm));
    grid-area: right;
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-self: stretch;
    gap: var(--app-space-4-5);
    min-width: 0;
    min-height: 0;
    justify-items: var(--app-panel-justify-items);
    padding: var(--app-space-3);
    border-radius: var(--app-radius-lg);
    background: var(--app-shell-sidebar-bg);
    box-shadow: none;
    contain: layout paint style;
    overflow: clip;
    transition: background var(--app-motion-base);
  }

  .app-right-rail__head {
    display: grid;
    position: relative;
    grid-template-columns: var(--app-panel-head-copy-width) var(--app-panel-toggle-size);
    align-items: center;
    justify-content: var(--app-panel-head-justify);
    gap: var(--app-panel-head-gap);
    min-height: 0;
    min-width: 0;
    padding: var(--app-space-2) var(--app-rail-head-padding-x) var(--app-space-1);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
    transition:
      grid-template-columns var(--app-shell-panel-motion),
      gap var(--app-shell-panel-motion),
      padding var(--app-shell-panel-motion);
  }

  .app-right-rail__copy {
    display: grid;
    gap: 3px;
    min-width: 0;
    overflow: hidden;
    opacity: var(--app-panel-copy-opacity);
    pointer-events: var(--app-panel-copy-pointer-events);
    transform: translateX(var(--app-panel-copy-x));
    visibility: var(--app-panel-copy-visibility);
    transition:
      opacity var(--app-shell-panel-fade-motion),
      transform var(--app-shell-panel-motion),
      visibility 0s linear var(--app-panel-copy-visibility-delay);
  }

  .app-right-rail__copy[data-motion-managed="true"] {
    transform: none;
    transition: visibility 0s linear var(--app-panel-copy-visibility-delay);
  }

  .app-right-rail__copy > .app-panel-reveal__body {
    display: grid;
    gap: 3px;
    min-width: 0;
  }

  .app-right-rail__kicker {
    color: var(--app-shell-text-muted);
    letter-spacing: 0;
    text-transform: none;
  }

  .app-right-rail__title {
    color: var(--app-shell-text);
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-right-rail__toggle {
    display: inline-flex;
    align-self: start;
    align-items: center;
    justify-content: center;
    width: var(--app-panel-toggle-size);
    height: var(--app-panel-toggle-size);
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: var(--app-shell-chip-bg);
    color: var(--app-shell-text-soft);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
      background var(--app-motion-fast),
      color var(--app-motion-fast),
      transform var(--app-duration-press) var(--app-ease-standard);
  }

  .app-right-rail__toggle svg {
    width: var(--app-icon-size-sm);
    height: var(--app-icon-size-sm);
    overflow: visible;
    stroke-width: var(--app-icon-stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: var(--app-panel-toggle-icon-transform);
    transform-box: fill-box;
    transform-origin: center;
    transition: transform var(--app-shell-panel-icon-motion);
    vector-effect: non-scaling-stroke;
  }

  .app-right-rail__toggle:hover,
  .app-right-rail__toggle:focus-visible {
    background: var(--app-shell-hover-bg);
    color: var(--app-shell-text);
  }

  .app-right-rail__toggle:focus-visible {
    outline: 0;
    box-shadow: var(--app-interactive-focus-ring);
  }

  .app-right-rail__toggle:active {
    transform: scale(var(--app-interactive-icon-press-scale));
  }

  .app-right-rail__body {
    min-height: 0;
    margin-top: 0;
    padding: var(--app-rail-body-padding);
    opacity: var(--app-rail-body-opacity);
    pointer-events: var(--app-rail-body-pointer-events);
    transform: translateX(var(--app-rail-body-x));
    visibility: var(--app-rail-body-visibility);
    overflow-x: hidden;
    overflow-y: auto;
    /* scrollbar-gutter: auto (default) — reserve scrollbar space ONLY when
       content actually overflows. `stable` reserved it unconditionally,
       which combined with the motion height animation made short content
       (a single text field) show a permanent stray scrollbar. */
    scrollbar-gutter: auto;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition:
      opacity var(--app-shell-panel-fade-motion),
      padding var(--app-shell-panel-motion),
      transform var(--app-shell-panel-motion),
      visibility 0s linear var(--app-rail-body-visibility-delay);
  }

  .app-right-rail__body[data-motion-managed="true"] {
    transition: visibility 0s linear var(--app-rail-body-visibility-delay);
  }

  .app-right-rail__body .app-panel-reveal__scroll-content {
    min-height: 0;
  }

  .app-right-rail__body::-webkit-scrollbar {
    width: var(--app-scrollbar-size);
    height: var(--app-scrollbar-size);
  }

  .app-right-rail__body::-webkit-scrollbar-track {
    background: transparent;
  }

  .app-right-rail__body::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: var(--app-radius-full);
    background: transparent;
    background-clip: padding-box;
  }

  .app-right-rail__body:hover,
  .app-right-rail__body:focus-within {
    scrollbar-color: var(--app-scrollbar-thumb) transparent;
  }

  .app-right-rail__body:hover::-webkit-scrollbar-thumb,
  .app-right-rail__body:focus-within::-webkit-scrollbar-thumb {
    background: var(--app-scrollbar-thumb);
    background-clip: padding-box;
  }

  .app-right-rail__body::-webkit-scrollbar-thumb:hover {
    background: var(--app-scrollbar-thumb-hover);
    background-clip: padding-box;
  }

  .app-right-rail__peek {
    position: absolute;
    top: calc(
      var(--app-space-3)
      + var(--app-space-2)
      + var(--app-panel-toggle-size)
      + var(--app-space-2)
    );
    left: 50%;
    display: inline-flex;
    opacity: var(--app-rail-peek-opacity);
    pointer-events: var(--app-rail-peek-pointer-events);
    transform: translate(-50%, var(--app-rail-peek-y));
    visibility: var(--app-rail-peek-visibility);
    transition:
      opacity var(--app-shell-panel-fade-motion),
      transform var(--app-shell-panel-motion),
      visibility 0s linear var(--app-rail-peek-visibility-delay);
  }

  .app-right-rail__peek-control {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--app-radius-md);
    background: var(--app-shell-chip-bg);
    color: var(--app-shell-text-soft);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
      background var(--app-motion-fast),
      color var(--app-motion-fast);
  }

  .app-right-rail[data-collapsed="true"] {
    --app-panel-head-copy-width: 0;
    --app-panel-head-gap: 0;
    --app-panel-head-justify: center;
    --app-rail-head-padding-x: 6px;
    --app-panel-copy-opacity: 0;
    --app-panel-copy-pointer-events: none;
    --app-panel-copy-visibility: hidden;
    --app-panel-copy-visibility-delay: var(--app-shell-panel-hide-delay, var(--app-duration-panel-fade));
    --app-panel-copy-x: calc(0px - var(--app-motion-distance-md));
    --app-panel-toggle-icon-transform: rotate(180deg);
    --app-panel-justify-items: center;
    --app-rail-body-padding: 0px;
    --app-rail-body-opacity: 0;
    --app-rail-body-pointer-events: none;
    --app-rail-body-visibility: hidden;
    --app-rail-body-visibility-delay: var(--app-shell-panel-hide-delay, var(--app-duration-panel-fade));
    --app-rail-body-x: calc(0px - var(--app-motion-distance-md));
    --app-rail-peek-opacity: 1;
    --app-rail-peek-pointer-events: auto;
    --app-rail-peek-visibility: visible;
    --app-rail-peek-visibility-delay: 0s;
    --app-rail-peek-y: 0px;
  }

  .app-right-rail__peek-control:hover,
  .app-right-rail__peek-control:focus-visible {
    background: var(--app-shell-hover-bg);
    color: var(--app-shell-text);
  }

  .app-right-rail__peek-control:focus-visible {
    outline: 0;
    box-shadow: var(--app-interactive-focus-ring);
  }

  .app-right-rail__peek-icon {
    display: inline-grid;
    transform-origin: center;
    transition: transform var(--app-duration-press) var(--app-ease-standard);
  }

  .app-right-rail__peek-control:active .app-right-rail__peek-icon {
    transform: scale(var(--app-interactive-icon-press-scale));
  }

  .app-right-rail__peek-icon svg {
    width: 18px;
    height: 18px;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform-box: fill-box;
    transform-origin: center;
    vector-effect: non-scaling-stroke;
  }

  .app-right-rail__peek-icon svg :where(path, circle, line, polyline),
  .app-mobile-tools__icon svg :where(path, circle, line, polyline),
  .app-drawer .app-sidebar__icon svg :where(path, circle, line, polyline),
  .app-drawer-menu__arrow svg :where(path, circle, line, polyline) {
    stroke-linecap: round;
    stroke-linejoin: round;
    transform-box: fill-box;
    transform-origin: center;
    vector-effect: non-scaling-stroke;
  }

  .app-right-rail__peek-badge {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 var(--app-space-1);
    border-radius: var(--app-radius-full);
    background: var(--app-shell-chip-bg);
    box-shadow: none;
    color: var(--app-shell-chip-text-strong);
    font-size: var(--app-type-caption-size);
    font-weight: 620;
    line-height: 16px;
    text-align: center;
  }

  /* ---- Filter panel (shared by rail + mobile drawer) ---- */
  .app-catalog-filters {
    display: grid;
    gap: var(--app-space-4-5);
    align-content: start;
  }

  .app-catalog-filters__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--app-space-2);
    min-height: 24px;
  }

  .app-catalog-filters__count {
    color: var(--app-shell-text-muted-readable);
    font-size: var(--app-type-meta-size);
    font-weight: 560;
    line-height: 1.3;
  }

  .app-catalog-filters__reset {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    --app-catalog-reset-danger: var(--app-ui-danger);
    min-height: 32px;
    padding: 0 var(--app-space-2);
    border: 0;
    border-radius: var(--app-radius-sm);
    background: color-mix(in srgb, var(--app-catalog-reset-danger) 14%, transparent);
    background-clip: padding-box;
    box-shadow: none;
    color: var(--app-catalog-reset-danger);
    font-size: var(--app-type-meta-size);
    font-weight: var(--app-type-weight-semibold);
    cursor: pointer;
    outline: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    visibility: hidden;
    transition:
      background var(--app-motion-fast),
      color var(--app-motion-fast),
      transform var(--app-duration-press) var(--app-ease-standard);
  }

  .app-catalog-filters__reset[data-visible="true"] {
    visibility: visible;
  }

  .app-catalog-filters__reset:focus-visible {
    outline: 0;
    background: color-mix(in srgb, var(--app-catalog-reset-danger) 24%, transparent);
    background-clip: padding-box;
    color: var(--app-catalog-reset-danger);
    box-shadow: var(--app-interactive-focus-ring);
  }

  .app-catalog-filters__reset:active {
    transform: scale(var(--app-interactive-press-scale));
  }

  @media (hover: hover) and (pointer: fine) {
    .app-catalog-filters__reset:hover {
      background: color-mix(in srgb, var(--app-catalog-reset-danger) 24%, transparent);
      background-clip: padding-box;
      color: var(--app-catalog-reset-danger);
    }
  }

  .app-catalog-filters__group {
    display: grid;
    gap: var(--app-space-2);
  }

  .app-catalog-filters__label {
    margin: 0;
    color: var(--app-shell-text-muted-readable);
    font-size: var(--app-type-caption-size);
    font-weight: var(--app-type-weight-semibold);
    line-height: 1.2;
    letter-spacing: 0;
  }

  .app-catalog-filters__alpha {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--app-space-1-5);
    width: 100%;
  }

  .app-catalog-filters__alpha-btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-grid;
    place-items: center;
    min-width: 34px;
    min-height: 34px;
    padding: 0 var(--app-space-1-5);
    border: 0;
    border-radius: var(--app-radius-sm);
    background: var(--app-shell-chip-bg);
    background-clip: padding-box;
    box-shadow: none;
    color: var(--app-shell-chip-text-strong);
    font-size: var(--app-type-meta-size);
    font-weight: var(--app-type-weight-semibold);
    line-height: 1;
    cursor: pointer;
    outline: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
      background var(--app-motion-fast),
      color var(--app-motion-fast),
      transform var(--app-duration-press) var(--app-ease-standard);
  }

  .app-catalog-filters__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--app-space-1-5);
    width: 100%;
  }

  .app-catalog-filters__chip {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 var(--app-space-3);
    border: 0;
    border-radius: var(--app-radius-full);
    background: var(--app-shell-chip-bg);
    background-clip: padding-box;
    box-shadow: none;
    color: var(--app-shell-chip-text-strong);
    font-size: var(--app-type-meta-size);
    font-weight: 560;
    line-height: 1.2;
    cursor: pointer;
    outline: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
      background var(--app-motion-fast),
      color var(--app-motion-fast),
      transform var(--app-duration-press) var(--app-ease-standard);
  }

  .app-catalog-filters__alpha-btn:focus-visible,
  .app-catalog-filters__chip:focus-visible {
    outline: 0;
    background: var(--app-shell-hover-bg);
    background-clip: padding-box;
    color: var(--app-shell-text);
    box-shadow: var(--app-interactive-focus-ring);
  }

  .app-catalog-filters__alpha-btn:active,
  .app-catalog-filters__chip:active {
    transform: scale(var(--app-interactive-press-scale));
  }

  @media (hover: hover) and (pointer: fine) {
    .app-catalog-filters__alpha-btn:hover,
    .app-catalog-filters__chip:hover {
      background: var(--app-shell-hover-bg);
      background-clip: padding-box;
      color: var(--app-shell-text);
    }
  }

  /* Selected controls use the solid interaction accent; the brand gradient is
     reserved for primary actions. */
  .app-catalog-filters__alpha-btn[data-selected="true"],
  .app-catalog-filters__chip[data-selected="true"] {
    background: var(--app-ui-accent);
    background-clip: padding-box;
    color: var(--app-ui-accent-foreground);
  }

  @media (hover: none), (pointer: coarse), (any-hover: none), (any-pointer: coarse) {
    .app-drawer .app-catalog-filters__reset,
    .app-drawer .app-catalog-filters__alpha-btn,
    .app-drawer .app-catalog-filters__chip {
      transition: none;
    }

    .app-drawer .app-catalog-filters__reset:hover,
    .app-drawer .app-catalog-filters__reset:active,
    .app-drawer .app-catalog-filters__reset:focus,
    .app-drawer .app-catalog-filters__reset:focus-visible {
      outline: 0;
      background: color-mix(in srgb, var(--app-catalog-reset-danger) 14%, transparent);
      background-clip: padding-box;
      box-shadow: none;
      color: var(--app-catalog-reset-danger);
    }

    .app-drawer .app-catalog-filters__alpha-btn:hover:not([data-selected="true"]),
    .app-drawer .app-catalog-filters__alpha-btn:active:not([data-selected="true"]),
    .app-drawer .app-catalog-filters__alpha-btn:focus:not([data-selected="true"]),
    .app-drawer .app-catalog-filters__alpha-btn:focus-visible:not([data-selected="true"]),
    .app-drawer .app-catalog-filters__chip:hover:not([data-selected="true"]),
    .app-drawer .app-catalog-filters__chip:active:not([data-selected="true"]),
    .app-drawer .app-catalog-filters__chip:focus:not([data-selected="true"]),
    .app-drawer .app-catalog-filters__chip:focus-visible:not([data-selected="true"]) {
      outline: 0;
      background: var(--app-shell-chip-bg);
      background-clip: padding-box;
      box-shadow: none;
      color: var(--app-shell-chip-text-strong);
    }

    .app-drawer .app-catalog-filters__alpha-btn[data-selected="true"]:hover,
    .app-drawer .app-catalog-filters__alpha-btn[data-selected="true"]:active,
    .app-drawer .app-catalog-filters__alpha-btn[data-selected="true"]:focus,
    .app-drawer .app-catalog-filters__alpha-btn[data-selected="true"]:focus-visible,
    .app-drawer .app-catalog-filters__chip[data-selected="true"]:hover,
    .app-drawer .app-catalog-filters__chip[data-selected="true"]:active,
    .app-drawer .app-catalog-filters__chip[data-selected="true"]:focus,
    .app-drawer .app-catalog-filters__chip[data-selected="true"]:focus-visible {
      outline: 0;
      background: var(--app-ui-accent);
      background-clip: padding-box;
      box-shadow: none;
      color: var(--app-ui-accent-foreground);
    }
  }

  .app-drawer .app-catalog-filters__reset:focus-visible {
    box-shadow: var(--app-interactive-focus-ring);
  }

  .app-drawer .app-catalog-filters__alpha-btn:focus-visible:not([data-selected="true"]),
  .app-drawer .app-catalog-filters__chip:focus-visible:not([data-selected="true"]) {
    background: var(--app-shell-hover-bg);
    background-clip: padding-box;
    box-shadow: var(--app-interactive-focus-ring);
    color: var(--app-shell-text);
  }

  .app-drawer .app-catalog-filters__alpha-btn[data-selected="true"]:focus-visible,
  .app-drawer .app-catalog-filters__chip[data-selected="true"]:focus-visible {
    box-shadow: var(--app-interactive-focus-ring);
  }

  /* ---- Mobile tools bar (hidden on desktop / non-catalog) ---- */
  .app-mobile-tools {
    display: none;
    grid-area: tools;
    gap: var(--app-space-2);
    min-width: 0;
  }

  .app-mobile-tools__button {
    position: relative;
    display: inline-flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: var(--app-space-2);
    min-width: 0;
    min-height: 48px;
    padding: 0 var(--app-space-3);
    border: 0;
    border-radius: 14px;
    background: var(--app-shell-sidebar-bg);
    box-shadow: none;
    color: var(--app-shell-text);
    font-size: var(--app-type-body-sm-size);
    font-weight: 580;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
      background var(--app-motion-fast),
      color var(--app-motion-fast),
      transform var(--app-duration-press) var(--app-ease-standard);
  }

  .app-mobile-tools__button:focus-visible {
    background: var(--app-shell-hover-bg);
  }

  @media (hover: hover) and (pointer: fine) {
    .app-mobile-tools__button:hover {
      background: var(--app-shell-hover-bg);
    }
  }

  .app-mobile-tools__button:focus-visible {
    outline: 0;
    box-shadow: var(--app-interactive-focus-ring);
  }

  .app-mobile-tools__button:active {
    transform: scale(var(--app-interactive-press-scale));
  }

  .app-mobile-tools__icon {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    color: var(--app-shell-text-soft);
  }

  .app-mobile-tools__icon svg {
    width: var(--app-icon-size-md);
    height: var(--app-icon-size-md);
    stroke-width: var(--app-icon-stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
    transform-box: fill-box;
    transform-origin: center;
    vector-effect: non-scaling-stroke;
  }

  .app-mobile-tools__badge {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--app-radius-full);
    background: var(--app-shell-chip-bg);
    box-shadow: none;
    color: var(--app-shell-chip-text-strong);
    font-size: var(--app-type-caption-size);
    font-weight: 620;
    line-height: 1;
  }

  /* ---- Universal mobile drawer (bottom sheet) ----
     Surface-agnostic: rendered by DashboardMobileDrawer for catalog sections,
     catalog filters, blog panels, account/auth OTP, editor tools, and future
     admin content. The `.app-drawer` scope maps a neutral `--app-drawer-*` token
     layer off whichever surface tokens are in scope (tests → account → base
     colour tokens), while HeroUI owns focus, dismissal and drag behaviour. */
  .app-drawer {
    --app-drawer-panel-bg: var(--app-account-surface-raised, var(--app-ui-surface));
    --app-drawer-border: var(--app-shell-border, var(--app-account-border, var(--app-ui-divider)));
    --app-drawer-title: var(--app-shell-text, var(--app-ui-text));
    --app-drawer-muted: var(--app-shell-text-soft, var(--app-ui-text-secondary));
    --app-drawer-control-bg: var(--app-shell-chip-bg, var(--app-account-surface-subtle, var(--app-ui-surface-hover)));
    --app-drawer-control-hover: var(--app-shell-hover-bg, var(--app-ui-surface-active));
  }

  /* HeroUI maintains this variable from the live visual viewport. Keep the
     native sheet body as the only scroll root when a virtual keyboard shrinks it. */
  .app-drawer [data-slot="drawer-dialog"][data-placement="bottom"] {
    max-height: min(85vh, var(--visual-viewport-height));
  }

  /* React Aria keeps the backdrop mounted for HeroUI's 200ms exit motion.
     Stop that transparent frame from swallowing an immediate tap on the
     external mobile tool that reopens the controlled drawer. */
  .app-drawer[data-exiting="true"] {
    pointer-events: none;
  }

  /* Keep HeroUI's native 24px close visual while making its touch hit area
     a reliable 44px without changing the component's geometry. */
  .app-drawer-close-trigger::before {
    position: absolute;
    inset: -10px;
    content: "";
  }

  .app-drawer .app-sidebar__nav {
    flex-direction: column;
    /* Override the mobile-strip `align-items: center` that otherwise centres and
       shrinks the groups to ~content width — rows must span the full sheet. */
    align-items: stretch;
    width: 100%;
    gap: var(--app-space-4-5);
    overflow: visible;
  }

  .app-drawer .app-sidebar__group {
    display: grid;
    width: 100%;
    gap: var(--app-space-2);
  }

  .app-drawer .app-sidebar__group-label {
    display: block;
    max-height: none;
    margin: 0;
    padding: 0 2px;
    color: var(--app-shell-text-muted-readable);
    font-size: var(--app-type-caption-size);
    font-weight: var(--app-type-weight-semibold);
    line-height: 1.2;
    text-align: left;
  }

  .app-drawer .app-sidebar__item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--app-space-3);
    width: 100%;
    min-height: 52px;
    padding: var(--app-space-2) var(--app-space-3-5);
    border-radius: 14px;
    background: var(--app-shell-chip-bg);
    color: var(--app-shell-text);
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .app-drawer .app-sidebar__item:hover,
  .app-drawer .app-sidebar__item:focus-visible {
    background: var(--app-shell-hover-bg);
  }

  .app-drawer .app-sidebar__item[data-active="true"] {
    background: var(--app-ui-accent-soft);
    box-shadow: none;
  }

  .app-drawer .app-sidebar__nav[data-motion-highlight="true"] .app-sidebar__item[data-active="true"] {
    background: var(--app-shell-chip-bg);
  }

  .app-drawer .app-sidebar__motion-highlight {
    border-radius: 14px;
  }

  .app-drawer .app-sidebar__icon {
    width: 24px;
    height: 24px;
    border-radius: 0;
    background: transparent;
    color: var(--app-shell-text-soft);
  }

  .app-drawer .app-sidebar__icon svg {
    width: var(--app-icon-size-md);
    height: var(--app-icon-size-md);
    stroke-width: var(--app-icon-stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
    transform-box: fill-box;
    transform-origin: center;
    vector-effect: non-scaling-stroke;
  }

  .app-drawer .app-sidebar__label {
    flex: 1 1 auto;
    display: inline;
    max-width: none;
    font-size: var(--app-type-body-size);
    font-weight: 540;
  }

  .app-drawer .app-sidebar__badge {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    min-width: 28px;
    min-height: 24px;
    margin-left: auto;
    padding: 0 var(--app-space-2);
    border-radius: var(--app-radius-full);
    background: var(--app-shell-active-bg);
    color: var(--app-shell-text-soft);
    font-size: var(--app-type-caption-size);
    font-weight: var(--app-type-weight-semibold);
    line-height: 1;
  }

  .app-drawer .app-catalog-filters__alpha-btn,
  .app-drawer .app-catalog-filters__chip {
    min-height: 44px;
  }

  .app-drawer .app-catalog-filters__alpha-btn {
    min-width: 44px;
  }

  /* Header menu is outside .app-shell, so use drawer-local tones here. */
  .app-drawer_variant_header-menu {
    --app-drawer-control-bg: var(--app-ui-surface-hover);
    --app-drawer-control-hover: var(--app-ui-surface-active);
  }

  .app-drawer-menu {
    display: grid;
    gap: var(--app-space-4);
    width: 100%;
    min-width: 0;
  }

  .app-drawer-menu__list {
    display: grid;
    gap: var(--app-space-2);
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .app-drawer-menu__item {
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .app-drawer-menu__link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--app-space-3);
    width: 100%;
    min-height: 52px;
    padding: var(--app-space-3) var(--app-space-4);
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
      background var(--app-motion-fast),
      color var(--app-motion-fast),
      transform var(--app-duration-press) var(--app-ease-standard);
    border-radius: var(--app-radius-md);
    background: var(--app-drawer-control-bg);
  }

  .app-drawer-menu__link:focus-visible,
  .app-drawer-menu__action:focus-visible {
    background: var(--app-drawer-control-hover);
    color: var(--app-drawer-title);
  }

  @media (hover: hover) and (pointer: fine) {
    .app-drawer-menu__link:hover,
    .app-drawer-menu__action:hover {
      background: var(--app-drawer-control-hover);
      color: var(--app-drawer-title);
    }
  }

  .app-drawer-menu__link:focus-visible,
  .app-drawer-menu__action:focus-visible {
    outline: 0;
    box-shadow: var(--app-interactive-focus-ring);
  }

  .app-drawer-menu__link:active,
  .app-drawer-menu__action:active {
    transform: scale(var(--app-interactive-press-scale));
  }

  .app-drawer-menu__item-copy {
    display: grid;
    flex: 1 1 auto;
    gap: var(--app-space-1);
    min-width: 0;
  }

  .app-drawer-menu__item-title {
    color: inherit;
    font-size: var(--app-type-body-size);
    font-weight: 620;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .app-drawer-menu__arrow {
    display: inline-grid;
    place-items: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    color: var(--app-drawer-muted);
    margin-left: auto;
    transition: transform var(--app-motion-fast), color var(--app-motion-fast);
  }

  .app-drawer-menu__arrow svg {
    width: 18px;
    height: 18px;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform-box: fill-box;
    transform-origin: center;
    vector-effect: non-scaling-stroke;
  }

  .app-drawer-menu__link:focus-visible .app-drawer-menu__arrow {
    transform: translateX(4px);
  }

  @media (hover: hover) and (pointer: fine) {
    .app-drawer-menu__link:hover .app-drawer-menu__arrow {
      transform: translateX(4px);
    }
  }

  .app-drawer-menu__footer {
    display: grid;
    gap: var(--app-space-2);
    padding-top: var(--app-space-2);
  }

  .app-drawer-menu__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 var(--app-space-4);
    border-radius: var(--app-radius-md);
    background: var(--app-drawer-control-bg);
    color: var(--app-drawer-title);
    font-size: var(--app-type-body-sm-size);
    font-weight: 620;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
      background var(--app-motion-fast),
      color var(--app-motion-fast),
      transform var(--app-duration-press) var(--app-ease-standard);
  }

  .app-drawer-menu__footer-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--app-space-2);
    min-width: 0;
  }

  /* While a sheet is open: lift the whole dashboard above the sticky site header
     (z-index 30) so the sheet + backdrop are unambiguously the active layer — the
     header reads as dimmed context behind the backdrop, not a control above it —
     and stop the catalog scrolling behind the sheet. */
  .app-shell[data-drawer-open="true"] {
    position: relative;
    z-index: 50;
  }

  .app-shell[data-drawer-open="true"] .app-shell__main {
    overflow: hidden;
  }

  @media (min-width: 960px) {

    .app-shell[data-drawer-open="true"] {
      z-index: auto;
    }

    .app-shell[data-drawer-open="true"] .app-shell__main {
      overflow-x: hidden;
      overflow-y: auto;
    }
  }

  @media (max-width: 1180px) {
    .app-shell.app-shell--has-rail {
      --app-shell-right-width: clamp(208px, 22vw, 240px);
    }

    .app-shell.app-shell--has-rail.app-shell--rail-collapsed {
      --app-shell-right-width: var(--app-shell-rail-collapsed-width);
    }
  }

  /* Mobile: aside + rail collapse into the tools layer; no horizontal strip. */
  @media (max-width: 959px) {
    .app-shell {
      grid-template-areas:
        "tools"
        "main";
    }

    .app-sidebar,
    .app-right-rail {
      display: none;
    }

    .app-mobile-tools {
      display: flex;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .app-shell,
    .app-sidebar,
    .app-sidebar__head,
    .app-sidebar__copy,
    .app-sidebar__toggle,
    .app-sidebar__toggle svg,
    .app-sidebar__nav,
    .app-sidebar__group-label,
    .app-sidebar__group-label::before,
    .app-sidebar__item,
    .app-sidebar__icon,
    .app-sidebar__icon svg,
    .app-sidebar__label,
    .app-sidebar__badge,
    .app-right-rail,
    .app-right-rail__head,
    .app-right-rail__copy,
    .app-right-rail__toggle,
    .app-right-rail__toggle svg,
    .app-right-rail__body,
    .app-right-rail__peek,
    .app-right-rail__peek-icon,
    .app-mobile-tools__button,
    .app-catalog-filters__reset,
    .app-catalog-filters__alpha-btn,
    .app-catalog-filters__chip,
    .app-drawer-menu__link,
    .app-drawer-menu__action {
      transition: none;
    }

  }

}
/* ============================================================================
   24 - Cookie consent and privacy settings
   Layout only. HeroUI owns component visuals, interaction states and motion.
   ============================================================================ */

@layer blocks {
  .app-cookie-consent {
    position: fixed;
    z-index: 900;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    left: auto;
    width: min(24rem, calc(100vw - 2rem));
  }

  .app-cookie-consent[data-settings-open="true"] {
    z-index: 40;
  }

  .app-cookie-consent__surface {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--app-space-4);
    max-height: calc(100dvh - 24px - env(safe-area-inset-bottom));
    overflow: auto;
    overscroll-behavior: contain;
  }

  .app-cookie-consent__copy {
    display: grid;
    gap: var(--app-space-2);
    min-width: 0;
  }

  .app-cookie-consent__policy {
    display: inline-flex;
    width: fit-content;
    min-height: 2rem;
    align-items: center;
  }

  .app-cookie-settings__policy {
    display: inline-flex;
    width: fit-content;
    min-height: 44px;
    align-items: center;
  }

  .app-cookie-consent__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--app-space-2);
    min-width: 0;
  }

  .app-cookie-consent__actions > :last-child {
    grid-column: 1 / -1;
  }

  .app-cookie-settings__dialog {
    max-height: min(860px, calc(100dvh - 24px));
  }

  .app-cookie-settings__close {
    min-width: 44px;
    min-height: 44px;
  }

  .app-cookie-settings__header {
    display: grid;
    gap: var(--app-space-2);
    min-width: 0;
  }

  .app-cookie-settings__body {
    min-height: 0;
  }

  .app-cookie-settings__categories {
    display: grid;
    gap: var(--app-space-2);
    min-width: 0;
  }

  .app-cookie-category__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--app-space-2);
    align-items: center;
    min-width: 0;
  }

  .app-cookie-category__header > :first-child {
    min-width: 0;
  }

  .app-cookie-category__status {
    white-space: nowrap;
  }

  .app-cookie-category__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--app-space-4);
    align-items: center;
    min-width: 0;
  }

  .app-cookie-category__switch {
    min-width: 44px;
  }

  .app-cookie-category__switch-content {
    display: flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: flex-end;
  }

  .app-cookie-settings__gpc {
    margin: 0;
  }

  .app-cookie-settings__footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--app-space-3);
    align-items: center;
    justify-content: space-between;
  }

  .app-cookie-settings__footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--app-space-2);
    margin-left: auto;
  }

  .app-footer__link_button {
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    text-align: start;
    cursor: pointer;
  }

  @media (max-width: 720px) {
    .app-cookie-consent {
      right: max(0.75rem, env(safe-area-inset-right));
      bottom: max(0.75rem, env(safe-area-inset-bottom));
      width: min(24rem, calc(100vw - 1.5rem));
    }

    .app-cookie-consent__surface {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--app-space-4);
    }

    .app-cookie-consent__actions {
      grid-template-columns: minmax(0, 1fr);
    }

    .app-cookie-consent__actions > :last-child {
      grid-column: auto;
    }

    .app-cookie-category__header {
      grid-template-columns: minmax(0, 1fr);
      align-items: start;
    }

    .app-cookie-category__content {
      gap: var(--app-space-3);
    }

    .app-cookie-settings__footer {
      align-items: stretch;
    }

    .app-cookie-settings__footer-actions {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      width: 100%;
      margin-left: 0;
    }

    .app-cookie-settings__footer-actions > * {
      width: 100%;
    }
  }
}
/* One landing-specific layout decision: keep the optional analytics switch
   below its explanation. All visual tokens still come from the project card
   and Switch components. */
.app-cookie-category:last-child .app-cookie-category__content {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.app-cookie-category:last-child .app-cookie-category__switch,
.app-cookie-category:last-child .app-cookie-category__switch-content {
  justify-self: start;
  justify-content: flex-start;
}

@media (max-width: 720px) {
  /* Keep the canonical cookie card and controls; only let its shell use both
      mobile safe-area insets instead of leaving unused space on the left. */
  .landing-page .app-cookie-consent {
    right: max(0.75rem, env(safe-area-inset-right));
    left: max(0.75rem, env(safe-area-inset-left));
    width: auto;
  }
}

@media (max-width: 620px) {
  /* The canonical close control is independently positioned. Reserve its
     touch target inside the heading so text never runs beneath the button. */
  .app-cookie-settings__dialog [data-slot="modal-heading"] {
    padding-inline-end: calc(44px + var(--app-space-2));
  }
}
html, body, #root { inline-size: 100%; min-inline-size: 0; overflow-x: clip; }
.landing-page { min-inline-size: 0; overflow: clip; }

/* Explicit landing motion: geometry only. Surface, typography and control colors
   remain wholly owned by the canonical project AppHeader CSS and its tokens. */
.landing-page [data-landing-header] {
  position: fixed;
  z-index: 20;
  top: max(16px, env(safe-area-inset-top));
  left: 50%;
  width: calc(100% - 32px);
  max-width: 1440px;
  min-height: 0;
  padding: 0;
  background: transparent;
  transform: translateX(-50%);
  transition:
    top var(--app-motion-base),
    width var(--app-motion-base),
    max-width var(--app-motion-base);
}

.landing-page [data-landing-header][data-compact="true"] {
  top: max(12px, env(safe-area-inset-top));
  max-width: 900px;
}

.landing-page [data-landing-header] .app-header__inner {
  transition:
    min-height var(--app-motion-base),
    padding-inline var(--app-motion-base),
    border-radius var(--app-motion-base);
}

.landing-page [data-landing-header][data-compact="true"] .app-header__inner {
  min-height: 56px;
  padding-inline: var(--app-space-4);
}

/* Layout-only bridge: the canonical project BurgerMenu takes over at 959px. */
@media (max-width: 959px) {
  /* Matches the canonical mobile AppHeader grid from 06-app-shell-catalog.css.
     When the centre nav is hidden, the action group must remain in column 3. */
  .landing-page [data-landing-header] .app-header__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    width: 100%;
    min-height: 56px;
    padding-inline: var(--app-space-3);
    border-radius: var(--app-radius-lg);
  }

  .landing-page .app-header__nav,
  [data-landing-header-cta] {
    display: none;
  }

  .landing-page [data-landing-header] .app-header__brand {
    grid-column: 1;
  }

  .landing-page [data-landing-header] .app-header__actions {
    grid-column: 3;
    justify-self: end;
  }
}

@media (max-width: 760px) {
  .landing-page [data-landing-header] {
    top: max(10px, env(safe-area-inset-top));
    width: calc(100% - 24px);
  }

  .landing-page [data-landing-header][data-compact="true"] {
    top: max(8px, env(safe-area-inset-top));
    max-width: none;
  }

  .landing-page [data-landing-header][data-compact="true"] .app-header__inner {
    min-height: 60px;
  }
}

@media (max-width: 660px) {
  .landing-page .app-footer__top {
    gap: var(--app-space-4);
    padding-bottom: var(--app-space-4);
  }

  .landing-page .app-footer__column {
    gap: var(--app-space-2);
  }

  .landing-page .app-footer__column:first-child .app-footer__link {
    min-height: 32px;
    padding-block: var(--app-space-1);
  }

  .landing-page .app-footer__bottom {
    margin-top: var(--app-space-4);
  }
}

/* Mirror next-themes' transition suppression during the root token swap. */
html[data-theme-transition="off"] *,
html[data-theme-transition="off"] *::before,
html[data-theme-transition="off"] *::after {
  transition-duration: 0s !important;
  transition-delay: 0s !important;
}
/*
 * Help-map hover V5:
 * the active row receives the directional curtain; the fixed 16:9 photo frame
 * follows the pointer and changes through a quiet dissolve.
 */

.help-hover-preview.help-hover-preview--v5 {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 80;
  width: clamp(248px, 22vw, 340px);
  aspect-ratio: 16 / 9;
  contain: paint;
  isolation: isolate;
  margin: 0;
  overflow: hidden;
  overflow: clip;
  border: 0;
  border-radius: var(--app-radius-md);
  outline: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
  pointer-events: none;
  transform-origin: top left;
}

.help-hover-preview--v5 .help-hover-preview__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  outline: 0;
  object-fit: cover;
  box-shadow: none;
  user-select: none;
  -webkit-user-drag: none;
}

.help-hover-preview--v5 .help-hover-preview__image--base {
  z-index: 1;
}

.help-hover-preview--v5 .help-hover-preview__image--curtain {
  z-index: 2;
  will-change: opacity, transform;
}

@media (hover: hover) and (pointer: fine) and (min-width: 960px) {
  .landing-page .help-section .help-item {
    position: relative;
    isolation: isolate;
    background: var(--surface-muted);
  }

  .landing-page .help-section .help-item::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: var(--app-radius-md);
    background: color-mix(in srgb, var(--text) 90%, var(--scene-a) 10%);
    content: "";
    pointer-events: none;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 520ms cubic-bezier(0.65, 0, 0.35, 1);
    will-change: transform;
  }

  .landing-page .help-section .help-item > * {
    position: relative;
    z-index: 1;
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  /*
   * This is an actual inversion, not a second colour transition: the white
   * source blends with the pixels beneath it, so the text changes precisely
   * where the curtain reaches it.
   */
  .landing-page .help-section .help-item > :is(span, h3, p, svg) {
    color: #fff;
    mix-blend-mode: difference;
  }

  .landing-page .help-section .help-item > h3 {
    opacity: 0.88;
  }

  .landing-page .help-section .help-item > :is(span, p, svg) {
    opacity: 0.72;
  }

  .landing-page .help-section .help-item:where(:hover, :focus-within, :focus-visible)::before {
    transform: scaleX(1);
    transform-origin: left center;
    transition-duration: 620ms;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }

  .landing-page .help-section .help-item:where(:hover, :focus-within, :focus-visible)
    > svg {
    transform: translate3d(5px, 5px, 0);
  }

  .landing-page .help-section .help-item:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--text) 32%, transparent);
    outline-offset: 4px;
  }
}

@media (hover: none), (pointer: coarse), (max-width: 959px) {
  .help-hover-preview.help-hover-preview--v5 {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .help-hover-preview.help-hover-preview--v5 {
    display: none;
  }

  .landing-page .help-section .help-item::before,
  .landing-page .help-section .help-item > * {
    transition-duration: 0.01ms !important;
  }

  .landing-page .help-section .help-item:where(:hover, :focus-within, :focus-visible)
    > svg {
    transform: none;
  }
}
/*
 * Keep the curtain's origin stable. Changing it at the same moment as scaleX
 * makes the filled row appear to snap instead of reveal progressively.
 */
@media (hover: hover) and (pointer: fine) and (min-width: 960px) {
  .landing-page .help-section .help-item::before {
    transform-origin: left center;
    transition: transform 860ms cubic-bezier(0.22, 0.72, 0.24, 1);
  }

  .landing-page .help-section .help-item:where(:hover, :focus-within, :focus-visible)::before {
    transform: scaleX(1);
    transform-origin: left center;
    transition-duration: 860ms;
    transition-timing-function: cubic-bezier(0.22, 0.72, 0.24, 1);
  }

  .landing-page .help-section .help-item > svg {
    align-self: center;
    justify-self: center;
    transform: translate3d(0, 0, 0);
    transform-origin: center;
  }

  .landing-page .help-section .help-item:where(:hover, :focus-within, :focus-visible) > svg {
    transform: rotate(-45deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-page .help-section .help-item::before,
  .landing-page .help-section .help-item > svg {
    transition-duration: 0.01ms !important;
  }

  .landing-page .help-section .help-item:where(:hover, :focus-within, :focus-visible) > svg {
    transform: none;
  }
}