@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Rokkitt:wght@400;500;600;700&display=swap");
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html,
  body {
    height: 100%;
  }

  body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    margin: 0;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer base {
  :root {
    font-family: var(--font-family-sans, system-ui, sans-serif);
    line-height: 1.5;
    color: var(--color-text-default, #000);
    background: var(--color-fill-surface, #fff);

    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 1rem;
  }
}
@layer base {
  /**
  * Typography
  */

  :where(h1, h2, h3, h4, h5, h6, .heading) {
    color: var(--color-text-strong);
    font-family: var(--typography-heading-font-family);
    font-weight: var(--typography-heading-font-weight);
    line-height: var(--typography-heading-line-height);
    text-rendering: optimizeLegibility;
  }

  :where(p, span, .body) {
    color: var(--color-text-default);
    font-family: var(--typography-body-font-family);
    line-height: var(--typography-body-line-height);
    font-weight: var(--typography-body-font-weight);
  }

  /* Heading scale */
  :where(h1, .heading-xxxl) {
    font-size: var(--typography-heading-font-size-xxxl);
    line-height: var(--typography-heading-line-height-xxxl);
    margin-bottom: calc(
      var(--typography-heading-line-height-xxxl) *
        var(--typography-heading-font-size-xxxl)
    );
  }

  :where(h2, .heading-xxl) {
    font-size: var(--typography-heading-font-size-xxl);
    line-height: var(--typography-heading-line-height-xxl);
    margin-bottom: calc(
      var(--typography-heading-line-height-xxl) *
        var(--typography-heading-font-size-xxl)
    );
  }

  :where(h3, .heading-xl) {
    font-size: var(--typography-heading-font-size-xl);
    line-height: var(--typography-heading-line-height-xl);
    margin-bottom: calc(
      var(--typography-heading-line-height-xl) *
        var(--typography-heading-font-size-xl)
    );
  }

  :where(h4, .heading-lg) {
    font-size: var(--typography-heading-font-size-lg);
    line-height: var(--typography-heading-line-height-lg);
    margin-bottom: calc(
      var(--typography-heading-line-height-lg) *
        var(--typography-heading-font-size-lg)
    );
  }

  :where(h5, .heading-md) {
    font-size: var(--typography-heading-font-size-md);
    line-height: var(--typography-heading-line-height-md);
    margin-bottom: calc(
      var(--typography-heading-line-height-md) *
        var(--typography-heading-font-size-md)
    );
  }

  :where(h6, .heading-sm) {
    font-size: var(--typography-heading-font-size-sm);
    line-height: var(--typography-heading-line-height-sm);
    margin-bottom: calc(
      var(--typography-heading-line-height-sm) *
        var(--typography-heading-font-size-sm)
    );
  }

  /* Text scale */
  :where(sup, sub, .text-xs) {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs);
    margin-bottom: calc(var(--line-height-xs) * var(--font-size-xs));
  }

  :where(.text-sm) {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
  }

  :where(.text-md) {
    font-size: var(--font-size-md);
    line-height: var(--line-height-md);
  }

  :where(.text-lg) {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-lg);
  }

  :where(.text-xl) {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-xl);
  }

  :where(.text-xxl) {
    font-size: var(--font-size-xxl);
    line-height: var(--line-height-xxl);
  }

  :where(.text-xxxl) {
    font-size: var(--font-size-xxxl);
    line-height: var(--line-height-xxxl);
  }

  /* font weights */
  b,
  strong,
  .bold {
    font-weight: 700;
  }
}
/* Auto-generated design tokens from Figma */
/* Generated on 2026-06-25T07:14:34.051Z */

:root {
  --color-neutral-100: rgb(230 230 230);
  --color-neutral-200: rgb(204 204 204);
  --color-neutral-300: rgb(179 179 179);
  --color-neutral-400: rgb(128 128 128);
  --color-neutral-500: rgb(128 128 128);
  --color-neutral-600: rgb(102 102 102);
  --color-neutral-700: rgb(77 77 77);
  --color-neutral-800: rgb(51 51 51);
  --color-neutral-900: rgb(26 26 26);
  --color-neutral-1000: rgb(0 0 0);
  --color-neutral-alpha-100: rgba(0 0 0 / 0.1);
  --color-neutral-alpha-200: rgba(0 0 0 / 0.2);
  --color-neutral-alpha-300: rgba(0 0 0 / 0.3);
  --color-neutral-alpha-400: rgba(0 0 0 / 0.4);
  --color-neutral-alpha-500: rgba(0 0 0 / 0.5);
  --color-neutral-alpha-600: rgba(0 0 0 / 0.6);
  --color-neutral-alpha-700: rgba(0 0 0 / 0.7);
  --color-neutral-alpha-800: rgba(0 0 0 / 0.8);
  --color-neutral-alpha-900: rgba(0 0 0 / 0.9);
  --color-neutral-alpha-000: rgba(0 0 0 / 0);
  --color-neutral-000: rgb(255 255 255);
  --color-neutral-alpha-inverse-100: rgba(255 255 255 / 0.1);
  --color-neutral-alpha-inverse-200: rgba(255 255 255 / 0.2);
  --color-neutral-alpha-inverse-300: rgba(255 255 255 / 0.3);
  --color-neutral-alpha-inverse-400: rgba(255 255 255 / 0.4);
  --color-neutral-alpha-inverse-500: rgba(255 255 255 / 0.5);
  --color-neutral-alpha-inverse-600: rgba(255 255 255 / 0.6);
  --color-neutral-alpha-inverse-700: rgba(255 255 255 / 0.7);
  --color-neutral-alpha-inverse-800: rgba(255 255 255 / 0.8);
  --color-neutral-alpha-inverse-900: rgba(255 255 255 / 0.9);
  --color-neutral-alpha-inverse-000: rgba(255 255 255 / 0);
  --color-brand-b-purple-200: rgb(222 192 255);
  --color-brand-b-purple-300: rgb(196 143 255);
  --color-brand-b-purple-600: rgb(151 71 255);
  --color-brand-b-purple-700: rgb(122 20 255);
  --color-brand-b-purple-800: rgb(85 26 139);
  --color-brand-b-purple-900: rgb(58 18 95);
  --color-brand-b-blue-100: rgb(206 219 253);
  --color-brand-b-blue-200: rgb(158 183 250);
  --color-brand-b-blue-300: rgb(109 147 248);
  --color-brand-b-blue-400: rgb(61 111 245);
  --color-brand-b-blue-500: rgb(12 75 243);
  --color-brand-b-blue-600: rgb(10 60 194);
  --color-brand-b-blue-700: rgb(7 45 146);
  --color-brand-b-blue-800: rgb(5 30 97);
  --color-brand-b-blue-900: rgb(2 15 49);
  --color-brand-b-red-100: rgb(255 255 255);
  --color-brand-b-red-200: rgb(255 204 204);
  --color-brand-b-red-300: rgb(255 153 153);
  --color-brand-b-red-400: rgb(255 102 102);
  --color-brand-b-red-500: rgb(255 51 51);
  --color-brand-b-red-600: rgb(255 0 0);
  --color-brand-b-red-700: rgb(153 0 0);
  --color-brand-b-red-800: rgb(102 0 0);
  --color-brand-b-red-900: rgb(51 0 0);
  --color-brand-b-green-100: rgb(246 254 250);
  --color-brand-b-green-200: rgb(200 249 223);
  --color-brand-b-green-300: rgb(154 244 196);
  --color-brand-b-green-400: rgb(108 239 170);
  --color-brand-b-green-500: rgb(62 234 143);
  --color-brand-b-green-600: rgb(19 174 92);
  --color-brand-b-green-700: rgb(14 129 68);
  --color-brand-b-green-800: rgb(8 69 36);
  --color-brand-b-green-900: rgb(4 37 19);
  --color-transparent: rgba(0 0 0 / 0);
  --color-brand-a-green-100: rgb(243 246 233);
  --color-brand-a-green-200: rgb(223 231 197);
  --color-brand-a-green-300: rgb(207 219 169);
  --color-brand-a-green-400: rgb(191 207 140);
  --color-brand-a-green-500: rgb(175 195 111);
  --color-brand-a-green-600: rgb(159 183 82);
  --color-brand-a-green-700: rgb(137 158 66);
  --color-brand-a-green-800: rgb(112 129 54);
  --color-brand-a-green-900: rgb(81 93 39);
  --color-brand-a-red-100: rgb(254 251 251);
  --color-brand-a-red-200: rgb(250 224 230);
  --color-brand-a-red-300: rgb(244 179 195);
  --color-brand-a-red-400: rgb(238 135 160);
  --color-brand-a-red-500: rgb(231 90 124);
  --color-brand-a-red-600: rgb(225 46 89);
  --color-brand-a-red-700: rgb(191 28 67);
  --color-brand-a-red-800: rgb(147 21 52);
  --color-brand-a-red-900: rgb(102 15 36);
  --color-brand-a-sand-100: rgb(240 240 229);
  --color-brand-a-sand-200: rgb(221 222 197);
  --color-brand-a-sand-300: rgb(192 193 172);
  --color-brand-a-sand-400: rgb(164 165 147);
  --color-brand-a-sand-500: rgb(136 137 122);
  --color-brand-a-sand-600: rgb(108 109 97);
  --color-brand-a-sand-700: rgb(80 81 72);
  --color-brand-a-sand-800: rgb(52 52 47);
  --color-brand-a-sand-900: rgb(24 24 22);
  --color-brand-c-blue-100: rgb(216 226 253);
  --color-brand-c-blue-200: rgb(182 200 252);
  --color-brand-c-blue-300: rgb(148 176 250);
  --color-brand-c-blue-400: rgb(109 147 248);
  --color-brand-c-blue-500: rgb(53 103 246);
  --color-brand-c-blue-600: rgb(12 75 243);
  --color-brand-c-blue-700: rgb(10 60 194);
  --color-brand-c-blue-800: rgb(7 45 146);
  --color-brand-c-blue-900: rgb(27 17 92);
  --color-brand-c-coolblue-100: rgb(226 244 253);
  --color-brand-c-coolblue-200: rgb(198 234 251);
  --color-brand-c-coolblue-300: rgb(169 223 248);
  --color-brand-c-coolblue-400: rgb(112 203 244);
  --color-brand-c-coolblue-500: rgb(56 185 245);
  --color-brand-c-coolblue-600: rgb(12 170 243);
  --color-brand-c-coolblue-700: rgb(10 136 194);
  --color-brand-c-coolblue-800: rgb(7 102 146);
  --color-brand-c-coolblue-900: rgb(5 68 97);
  --color-brand-c-green-100: rgb(239 251 245);
  --color-brand-c-green-200: rgb(223 246 235);
  --color-brand-c-green-300: rgb(197 228 205);
  --color-brand-c-green-400: rgb(169 224 191);
  --color-brand-c-green-500: rgb(135 210 166);
  --color-brand-c-green-600: rgb(97 196 141);
  --color-brand-c-green-700: rgb(48 182 117);
  --color-brand-c-green-800: rgb(43 161 104);
  --color-brand-c-green-900: rgb(36 111 73);
  --color-brand-c-green-1000: rgb(5 66 61);
  --color-brand-c-red-100: rgb(254 236 236);
  --color-brand-c-red-200: rgb(253 226 227);
  --color-brand-c-red-300: rgb(250 183 185);
  --color-brand-c-red-400: rgb(248 150 153);
  --color-brand-c-red-500: rgb(246 111 116);
  --color-brand-c-red-600: rgb(242 58 65);
  --color-brand-c-red-700: rgb(240 15 23);
  --color-brand-c-red-800: rgb(192 12 18);
  --color-brand-c-red-900: rgb(144 9 14);
  --color-brand-c-red-1000: rgb(96 6 9);
  --color-brand-c-orange-100: rgb(255 247 235);
  --color-brand-c-orange-200: rgb(255 239 214);
  --color-brand-c-orange-300: rgb(255 224 178);
  --color-brand-c-orange-400: rgb(255 210 143);
  --color-brand-c-orange-500: rgb(255 194 102);
  --color-brand-c-orange-600: rgb(255 171 46);
  --color-brand-c-orange-700: rgb(255 153 0);
  --color-brand-c-orange-800: rgb(204 122 0);
  --color-brand-c-orange-900: rgb(153 92 0);
  --color-brand-c-orange-1000: rgb(102 61 0);
  --color-brand-c-purple-100: rgb(245 236 254);
  --color-brand-c-purple-200: rgb(236 216 253);
  --color-brand-c-purple-300: rgb(219 182 252);
  --color-brand-c-purple-400: rgb(202 148 250);
  --color-brand-c-purple-500: rgb(183 109 248);
  --color-brand-c-purple-600: rgb(156 53 246);
  --color-brand-c-purple-700: rgb(135 12 243);
  --color-brand-c-purple-800: rgb(108 10 194);
  --color-brand-c-purple-900: rgb(81 7 146);
  --color-brand-c-purple-1000: rgb(57 17 92);
  --font-size-md: 1rem;
  --font-size-xs: .75rem;
  --font-size-sm: .875rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-xxl: 2rem;
  --font-size-xxxl: 2.5rem;
  --font-weight-100: 100;
  --font-weight-200: 200;
  --font-weight-300: 300;
  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-700: 700;
  --font-weight-800: 800;
  --font-weight-900: 900;
  --font-family-sans: Inter;
  --font-family-serif: Rokkitt;
  --font-family-mono: SF Mono;
  --line-height-xs: 1rem;
  --line-height-sm: 1.25rem;
  --line-height-md: 1.5rem;
  --line-height-lg: 1.75rem;
  --line-height-xl: 2rem;
  --line-height-xxl: 2.75rem;
  --line-height-xxxl: 3.5rem;
  --size-spacing-100: .25rem;
  --size-spacing-200: .5rem;
  --size-spacing-300: .75rem;
  --size-spacing-400: 1rem;
  --size-spacing-500: 1.25rem;
  --size-spacing-600: 1.5rem;
  --size-spacing-700: 2rem;
  --size-spacing-800: 2.5rem;
  --size-spacing-900: 3rem;
  --size-spacing-1000: 4rem;
  --size-spacing-000: 0;
  --size-radius-100: .125rem;
  --size-radius-200: .25rem;
  --size-radius-300: .375rem;
  --size-radius-400: .5rem;
  --size-radius-500: .75rem;
  --size-radius-600: 1rem;
  --size-radius-700: 1.25rem;
  --size-radius-800: 1.5rem;
  --size-radius-900: 2rem;
  --size-radius-000: 0;
  --size-radius-full: 625rem;
  --shadow-focus: .5rem;
  --breakpoint-100: 580px;
  --breakpoint-200: 760px;
  --breakpoint-300: 960px;
  --breakpoint-400: 1200px;
  --breakpoint-500: 1440px;
  --breakpoint-600: 1920px;
  --container-100: 192px;
  --container-200: 384px;
  --container-300: 576px;
  --container-400: 768px;
  --container-500: 960px;
  --container-600: 1152px;
  --size-border-100: .0625rem;
  --size-border-200: .125rem;
  --size-border-300: .1875rem;
  --size-border-000: 0;
  --layout-columns: 12;
  --layout-gutter: 1rem;
  --layout-max-width: 1236px;
  --layout-column-max-width: 412px;
  --layout-float-breakpoint: 1220px;
  --layout-base-grid: .25rem;
  --zindex-fixed: 1030;
  --zindex-sticky: 1020;
  --zindex-dropdown: 1000;
  --zindex-dropdown-base: 900;
  --zindex-modal: 1050;
  --zindex-base: 0;
  --zindex-tooltip: 1070;
  --zindex-raised: 1;
  --zindex-popover: 1060;
  --zindex-modal-overlay: 1040;
  --zindex-hidden: -1;
}
/* Auto-generated design tokens from Figma */
/* Generated on 2026-06-25T07:14:34.065Z */

:root {
  --color-text-default: var(--color-neutral-800);
  --typography-heading-font-family: var(--brand-font-lead);
  --typography-heading-font-size-md: var(--font-size-md);
  --typography-heading-font-size-xs: var(--font-size-xs);
  --typography-heading-font-size-sm: var(--font-size-sm);
  --typography-heading-font-size-lg: var(--font-size-lg);
  --typography-heading-font-size-xl: var(--font-size-xl);
  --typography-heading-font-size-xxl: var(--font-size-xxl);
  --typography-heading-font-size-xxxl: var(--font-size-xxxl);
  --typography-heading-font-weight: var(--font-weight-700);
  --typography-heading-line-height-md: var(--line-height-md);
  --typography-heading-line-height-xs: var(--line-height-xs);
  --typography-heading-line-height-sm: var(--line-height-sm);
  --typography-heading-line-height-lg: var(--line-height-lg);
  --typography-heading-line-height-xl: var(--line-height-xl);
  --typography-heading-line-height-xxl: var(--line-height-xxl);
  --typography-heading-line-height-xxxl: var(--line-height-xxxl);
  --typography-code: var(--font-family-mono);
  --typography-label-font-family: var(--brand-font-lead);
  --typography-label-font-weight: var(--font-weight-600);
  --typography-label-font-size: var(--font-size-md);
  --typography-label-line-height: var(--line-height-md);
  --typography-label-gap: var(--size-spacing-200);
  --typography-body-font-family: var(--brand-font-base);
  --typography-body-font-weight: var(--font-weight-400);
  --typography-body-font-size: var(--font-size-md);
  --typography-body-line-height: var(--line-height-md);
  --size-spacing-tight: var(--size-spacing-100);
  --size-spacing-component: var(--size-spacing-200);
  --size-spacing-comfortable: var(--size-spacing-300);
  --size-spacing-spacious: var(--size-spacing-400);
  --corner-button-radius: var(--brand-corner-button);
  --corner-card-radius: var(--brand-corner-card);
  --corner-modal-radius: var(--brand-corner-modal);
  --corner-form-radius: var(--brand-corner-card);
  --corner-checkbox-radius: var(--brand-corner-input);
  --corner-input-radius: var(--brand-corner-input);
  --corner-pill-radius: var(--size-radius-full);
  --corner-content-radius: var(--size-radius-300);
  --corner-container-radius: var(--size-radius-400);
  --size-border-none: var(--size-border-000);
  --size-border-default: var(--size-border-100);
  --size-border-emphasis: var(--size-border-200);
}
/* Auto-generated design tokens from Figma */
/* Generated on 2026-06-25T07:14:34.062Z */

:root {
  --button-border-size-hover: var(--size-border-default);
  --button-border-size-default: var(--size-border-default);
  --button-border-radius: var(--corner-button-radius);
  --button-border-color-disabled: var(--color-border-disabled);
  --button-border-size-active: var(--size-border-emphasis);
  --button-solid-border-color-default: var(--color-border-brand);
  --button-solid-border-color-hover: var(--color-border-brand);
  --button-solid-border-color-active: var(--color-border-brand);
  --button-solid-border-color-focus: var(--color-border-brand);
  --button-solid-text-color-default: var(--color-text-on-brand);
  --button-solid-container-background-default: var(--color-fill-brand);
  --button-solid-container-background-hover: var(--color-fill-brand);
  --button-solid-container-background-active: var(--color-fill-brand);
  --button-solid-container-background-focus: var(--color-fill-brand);
  --button-solid-text-color-hover: var(--color-text-on-brand);
  --button-solid-text-color-active: var(--color-text-on-brand);
  --button-outline-border-color-default: var(--color-border-brand);
  --button-outline-border-color-hover: var(--color-border-brand);
  --button-outline-border-color-active: var(--color-border-brand);
  --button-outline-border-color-focus: var(--color-border-brand);
  --button-outline-text-color-default: var(--color-text-brand);
  --button-outline-container-background-default: var(--color-fill-surface);
  --button-outline-container-background-active: var(--color-fill-surface);
  --button-outline-container-background-hover: var(--color-fill-surface);
  --button-outline-container-background-focus: var(--color-fill-surface);
  --button-outline-text-color-hover: var(--color-text-brand);
  --button-outline-text-color-active: var(--color-text-brand);
  --button-ghost-container-background-default: var(--color-fill-surface);
  --button-ghost-container-background-hover: var(--color-fill-surface);
  --button-ghost-container-background-focus: var(--color-fill-surface);
  --button-ghost-container-background-active: var(--color-fill-surface);
  --button-ghost-border-color-default: var(--color-transparent);
  --button-ghost-border-color-hover: var(--color-transparent);
  --button-ghost-border-color-focus: var(--color-transparent);
  --button-ghost-border-color-active: var(--color-transparent);
  --button-ghost-text-color-default: var(--color-text-brand);
  --button-ghost-text-color-hover: var(--color-text-brand);
  --button-ghost-text-color-active: var(--color-text-brand);
  --button-font-family: var(--brand-font-lead);
  --button-line-height: var(--typography-label-line-height);
  --button-font-weight: var(--typography-label-font-weight);
  --button-font-size: var(--typography-label-font-size);
  --button-padding-inline: var(--size-spacing-spacious);
  --button-gap: var(--size-spacing-component);
  --button-padding-block: var(--size-spacing-component);
  --button-container-background-disabled: var(--color-fill-disabled);
  --button-text-color-disabled: var(--color-text-disabled);
  --button-overlay-hover: var(--color-overlay-hover);
  --button-overlay-active: var(--color-overlay-active);
  --button-padding-inline-icon-only: var(--size-spacing-component);
  --button-height-min: 2.5rem;
  --button-group-gap: var(--size-spacing-component);
  --button-width-min: 2.5rem;
  --link-text-color-default: var(--color-text-brand);
  --link-text-color-hover: var(--color-text-strong);
  --link-text-color-active: var(--color-text-strong);
  --link-text-color-visited: var(--color-text-subtle);
  --link-text-color-disabled: var(--color-text-disabled);
  --link-text-decoration-default: underline;
  --link-text-decoration-hover: underline;
  --link-font-family: var(--brand-font-base);
  --link-font-weight: var(--typography-body-font-weight);
  --link-font-size: inherit;
  --link-line-height: inherit;
  --link-gap: var(--size-spacing-tight);
  --input-text-color-default: var(--color-text-default);
  --input-text-color-hover: var(--color-text-brand);
  --input-text-color-active: var(--color-text-default);
  --input-text-color-disabled: var(--color-text-disabled);
  --input-text-color-placeholder: var(--color-text-subtle);
  --input-border-color-default: var(--color-border-default);
  --input-border-color-hover: var(--color-border-brand);
  --input-border-color-active: var(--color-border-brand);
  --input-border-color-focus: var(--color-border-brand);
  --input-border-size-default: var(--size-border-default);
  --input-border-size-hover: var(--size-border-default);
  --input-border-size-active: var(--size-border-emphasis);
  --input-border-radius: var(--corner-input-radius);
  --input-border-color-disabled: var(--color-border-disabled);
  --input-border-color-invalid: var(--color-border-danger);
  --input-border-color-valid: var(--color-border-strong);
  --input-font-family: var(--brand-font-base);
  --input-font-weight: var(--typography-body-font-weight);
  --input-font-size: var(--typography-label-font-size);
  --input-line-height: var(--typography-body-line-height);
  --input-container-background-default: var(--color-fill-surface);
  --input-container-background-hover: var(--color-fill-surface);
  --input-container-background-focus: var(--color-fill-surface);
  --input-container-background-active: var(--color-fill-surface);
  --input-container-background-disabled: var(--color-fill-disabled);
  --input-padding-inline: var(--size-spacing-component);
  --input-padding-inline-icon-only: var(--size-spacing-component);
  --input-padding-block: var(--size-spacing-component);
  --input-gap: var(--size-spacing-component);
  --input-overlay-hover: var(--color-transparent);
  --input-overlay-active: var(--color-transparent);
  --input-height: 2.5rem;
  --input-height-min: 2.5rem;
  --select-text-color-default: var(--color-text-default);
  --select-text-color-hover: var(--color-text-brand);
  --select-text-color-active: var(--color-text-default);
  --select-text-color-disabled: var(--color-text-disabled);
  --select-text-color-placeholder: var(--color-text-subtle);
  --select-border-color-default: var(--color-border-default);
  --select-border-color-hover: var(--color-border-brand);
  --select-border-color-active: var(--color-border-brand);
  --select-border-color-focus: var(--color-border-brand);
  --select-border-color-disabled: var(--color-border-disabled);
  --select-border-color-invalid: var(--color-border-danger);
  --select-border-size-default: var(--size-border-default);
  --select-border-size-hover: var(--size-border-default);
  --select-border-size-active: var(--size-border-emphasis);
  --select-border-radius: var(--corner-input-radius);
  --select-container-background-default: var(--color-fill-surface);
  --select-container-background-hover: var(--color-fill-surface);
  --select-container-background-focus: var(--color-fill-surface);
  --select-container-background-active: var(--color-fill-surface);
  --select-container-background-disabled: var(--color-fill-disabled);
  --select-font-family: var(--brand-font-base);
  --select-font-weight: var(--typography-body-font-weight);
  --select-font-size: var(--typography-label-font-size);
  --select-line-height: var(--typography-body-line-height);
  --select-padding-inline: var(--size-spacing-component);
  --select-padding-block: var(--size-spacing-component);
  --select-overlay-hover: var(--color-transparent);
  --select-overlay-active: var(--color-transparent);
  --select-icon-color-default: var(--color-text-subtle);
  --select-icon-color-disabled: var(--color-text-disabled);
  --select-height: [object Object];
  --textarea-text-color-default: var(--color-text-default);
  --textarea-text-color-disabled: var(--color-text-disabled);
  --textarea-text-color-placeholder: var(--color-text-disabled);
  --textarea-border-color-default: var(--color-border-default);
  --textarea-border-color-hover: var(--color-border-strong);
  --textarea-border-color-focus: var(--color-border-brand);
  --textarea-border-color-disabled: var(--color-border-disabled);
  --textarea-border-size-default: var(--size-border-default);
  --textarea-border-radius: var(--corner-content-radius);
  --textarea-container-background-default: var(--color-fill-surface);
  --textarea-container-background-disabled: var(--color-fill-disabled);
  --textarea-font-family: var(--brand-font-base);
  --textarea-font-size: var(--typography-body-font-size);
  --textarea-line-height: var(--typography-body-line-height);
  --textarea-padding-inline: var(--size-spacing-comfortable);
  --textarea-padding-block: var(--size-spacing-comfortable);
  --checkbox-text-color-default: var(--color-text-default);
  --checkbox-text-color-hover: var(--color-text-brand);
  --checkbox-text-color-active: var(--color-text-on-brand);
  --checkbox-text-color-disabled: var(--color-text-disabled);
  --checkbox-border-color-default: var(--color-border-subtle);
  --checkbox-border-color-hover: var(--color-border-brand);
  --checkbox-border-color-active: var(--color-border-brand);
  --checkbox-border-color-focus: var(--color-border-brand);
  --checkbox-border-color-invalid: var(--color-border-danger);
  --checkbox-border-color-valid: var(--color-border-strong);
  --checkbox-border-color-disabled: var(--color-border-disabled);
  --checkbox-border-size-hover: var(--size-border-emphasis);
  --checkbox-border-size-disabled: var(--size-border-none);
  --checkbox-border-size-default: var(--size-border-default);
  --checkbox-container-background-default: var(--color-fill-surface);
  --checkbox-container-background-hover: var(--color-fill-surface);
  --checkbox-container-background-focus: var(--color-fill-surface);
  --checkbox-container-background-active: var(--color-fill-brand);
  --checkbox-container-background-disabled: var(--color-fill-disabled);
  --radio-text-color-default: var(--color-text-default);
  --radio-text-color-disabled: var(--color-text-disabled);
  --radio-text-color-active: var(--color-text-default);
  --radio-text-color-hover: var(--color-text-strong);
  --radio-border-color-default: var(--color-border-subtle);
  --radio-border-color-hover: var(--color-border-brand);
  --radio-border-color-active: var(--color-border-brand);
  --radio-border-color-disabled: var(--color-border-disabled);
  --radio-border-size-default: var(--size-border-default);
  --radio-border-size-hover: var(--size-border-emphasis);
  --radio-border-size-disabled: var(--size-border-none);
  --radio-border-color-focus: var(--color-border-brand);
  --radio-container-background-default: var(--color-fill-surface);
  --radio-container-background-disabled: var(--color-fill-disabled);
  --radio-container-background-hover: var(--color-fill-surface);
  --switch-track-background-default: var(--color-fill-surface);
  --switch-track-background-hover: var(--color-fill-surface);
  --switch-track-background-active: var(--color-fill-brand);
  --switch-track-background-disabled: var(--color-fill-disabled);
  --switch-track-border-color-default: var(--color-border-default);
  --switch-track-border-color-hover: var(--color-border-brand);
  --switch-track-border-color-active: var(--color-border-brand);
  --switch-track-border-color-disabled: var(--color-border-disabled);
  --switch-thumb-background-default: var(--color-border-default);
  --switch-thumb-background-hover: var(--color-border-brand);
  --switch-thumb-background-active: var(--color-fill-surface);
  --switch-thumb-background-disabled: var(--color-fill-surface);
  --switch-text-color-default: var(--color-text-default);
  --switch-text-color-disabled: var(--color-text-disabled);
  --badge-default-text-color: var(--color-text-default);
  --badge-default-border-color: var(--color-transparent);
  --badge-default-container-background: var(--color-fill-subtle);
  --badge-brand-text-color: var(--color-text-on-brand);
  --badge-brand-border-color: var(--color-transparent);
  --badge-brand-container-background: var(--color-fill-brand);
  --badge-success-text-color: var(--color-text-on-success);
  --badge-success-border-color: var(--color-transparent);
  --badge-success-container-background: var(--color-fill-success);
  --badge-font-family: var(--brand-font-lead);
  --badge-font-weight: var(--typography-label-font-weight);
  --badge-border-size-default: var(--size-border-default);
  --badge-border-radius: var(--corner-pill-radius);
  --badge-padding-inline-md: var(--size-spacing-comfortable);
  --badge-padding-inline-icon-only: var(--size-spacing-component);
  --badge-padding-block-md: var(--size-spacing-tight);
  --badge-gap: var(--size-spacing-tight);
  --badge-height-min: 2.5rem;
  --badge-width-min: 2.5rem;
  --badge-danger-container-background: var(--color-fill-danger);
  --badge-danger-text-color: var(--color-text-on-danger);
  --badge-danger-border-color: var(--color-transparent);
  --badge-font-size-sm: .75rem;
  --badge-font-size-md: .875rem;
  --badge-line-height-sm: 1rem;
  --badge-line-height-md: 1.25rem;
  --badge-padding-inline-sm: .5rem;
  --badge-padding-block-sm: .125rem;
  --tooltip-text-color-default: var(--color-text-inverse);
  --tooltip-container-background-default: var(--color-neutral-900);
  --tooltip-border-radius: var(--corner-content-radius);
  --tooltip-padding-inline: var(--size-spacing-comfortable);
  --tooltip-padding-block: var(--size-spacing-component);
  --modal-backdrop-color: var(--color-overlay-backdrop);
  --modal-surface-color: var(--color-fill-surface);
  --modal-surface-border-radius: var(--corner-modal-radius);
  --accordion-border-color-default: var(--color-border-default);
  --accordion-border-size-default: var(--size-border-default);
  --accordion-border-radius: var(--corner-container-radius);
  --accordion-text-color-default: var(--color-text-default);
  --accordion-text-color-disabled: var(--color-text-disabled);
  --accordion-padding-inline: var(--size-spacing-spacious);
  --accordion-padding-block: var(--size-spacing-comfortable);
  --accordion-gap: var(--size-spacing-component);
  --tabs-border-color-default: var(--color-border-default);
  --tabs-border-color-active: var(--color-border-brand);
  --tabs-border-color-hover: var(--color-border-subtle);
  --tabs-text-color-default: var(--color-text-default);
  --tabs-text-color-active: var(--color-text-brand);
  --tabs-text-color-hover: var(--color-text-brand);
  --tabs-text-color-disabled: var(--color-text-disabled);
  --tabs-padding-inline: var(--size-spacing-spacious);
  --tabs-padding-block: var(--size-spacing-comfortable);
  --form-group-gap: var(--size-spacing-spacious);
  --form-group-title-color: var(--color-text-default);
  --form-padding-inline: var(--size-spacing-spacious);
  --form-padding-block: var(--size-spacing-spacious);
  --form-border-radius: var(--corner-form-radius);
  --form-border-size: var(--size-border-default);
  --form-gap: var(--size-spacing-spacious);
  --form-field-gap: var(--size-spacing-component);
  --form-field-helper-text-color-default: var(--color-text-subtle);
  --form-field-helper-text-color-invalid: var(--color-text-danger);
  --form-container-background: var(--color-fill-surface);
  --form-container-border-color: var(--color-border-subtle);
  --avatar-container-background-default: var(--color-fill-subtle);
  --avatar-text-color-default: var(--color-text-default);
  --avatar-border-radius: var(--corner-pill-radius);
}
/* Auto-generated design tokens from Figma */
/* Generated on 2026-06-25T07:14:34.040Z */

:root[data-mode="dark"] {
  --color-text-default: var(--color-neutral-800);
  --color-text-inverse: var(--color-neutral-1000);
  --color-text-disabled: var(--color-neutral-600);
  --color-text-brand: var(--brand-color-primary-dark);
  --color-text-subtle: var(--brand-color-subtle-dark);
  --color-text-strong: var(--color-neutral-1000);
  --color-text-danger: var(--brand-color-functional-danger);
  --color-text-success: var(--brand-color-functional-success);
  --color-text-on-brand: var(--color-neutral-000);
  --color-text-on-danger: var(--color-neutral-000);
  --color-text-on-success: var(--color-neutral-000);
  --color-text-on-subtle: var(--brand-color-primary-dark);
  --color-text-on-active: var(--color-neutral-000);
  --color-text-on-disabled: var(--color-neutral-800);
  --color-fill-surface: var(--color-neutral-1000);
  --color-fill-disabled: var(--color-neutral-300);
  --color-fill-hover: var(--color-neutral-alpha-inverse-100);
  --color-fill-brand: var(--brand-color-primary);
  --color-fill-subtle: var(--brand-color-subtle);
  --color-fill-active: var(--brand-color-accent);
  --color-fill-danger: var(--brand-color-functional-danger);
  --color-fill-success: var(--brand-color-functional-success);
  --color-border-default: var(--color-neutral-800);
  --color-border-subtle: var(--brand-color-subtle-dark);
  --color-border-strong: var(--color-neutral-1000);
  --color-border-brand: var(--brand-color-primary);
  --color-border-disabled: var(--color-neutral-500);
  --color-border-danger: var(--brand-color-functional-danger);
  --color-overlay-backdrop: var(--color-neutral-alpha-inverse-400);
  --color-overlay-hover: var(--color-neutral-alpha-inverse-100);
  --color-overlay-active: var(--color-neutral-alpha-inverse-200);
  --color-overlay-selected: var(--color-neutral-alpha-inverse-300);
  --color-focus: var(--brand-color-primary-dark);
}
/* Auto-generated design tokens from Figma */
/* Generated on 2026-06-25T07:14:34.035Z */

:root {
  --color-text-default: var(--color-neutral-800);
  --color-text-inverse: var(--color-neutral-000);
  --color-text-disabled: var(--color-neutral-600);
  --color-text-brand: var(--brand-color-primary);
  --color-text-subtle: var(--brand-color-subtle);
  --color-text-strong: var(--color-neutral-1000);
  --color-text-danger: var(--brand-color-functional-danger);
  --color-text-success: var(--brand-color-functional-success);
  --color-text-on-brand: var(--color-neutral-000);
  --color-text-on-danger: var(--color-neutral-000);
  --color-text-on-success: var(--color-neutral-000);
  --color-text-on-subtle: var(--brand-color-primary);
  --color-text-on-active: var(--color-neutral-000);
  --color-text-on-disabled: var(--color-neutral-800);
  --color-fill-surface: var(--color-neutral-000);
  --color-fill-disabled: var(--color-neutral-300);
  --color-fill-hover: var(--color-neutral-alpha-500);
  --color-fill-brand: var(--brand-color-primary);
  --color-fill-subtle: var(--brand-color-subtle-light);
  --color-fill-active: var(--brand-color-accent);
  --color-fill-danger: var(--brand-color-functional-danger);
  --color-fill-success: var(--brand-color-functional-success);
  --color-border-default: var(--color-neutral-800);
  --color-border-subtle: var(--brand-color-subtle);
  --color-border-strong: var(--color-neutral-1000);
  --color-border-brand: var(--brand-color-primary);
  --color-border-disabled: var(--color-neutral-500);
  --color-border-danger: rgb(255 0 0);
  --color-overlay-backdrop: var(--color-neutral-alpha-400);
  --color-overlay-hover: var(--color-neutral-alpha-200);
  --color-overlay-active: var(--color-neutral-alpha-400);
  --color-overlay-selected: var(--color-neutral-alpha-600);
  --color-focus: var(--brand-color-primary);
}
/* Auto-generated design tokens from Figma */
/* Generated on 2026-06-25T07:14:34.068Z */

:root[data-brand="a"] {
  --brand-color-functional-success: var(--color-neutral-800);
  --brand-color-functional-danger: var(--color-neutral-900);
  --brand-color-functional-base: var(--color-neutral-900);
  --brand-color-functional-base-dark: var(--color-neutral-1000);
  --brand-color-primary: var(--color-neutral-1000);
  --brand-color-accent: var(--color-neutral-600);
  --brand-color-primary-dark: var(--color-neutral-1000);
  --brand-color-accent-dark: var(--color-neutral-800);
  --brand-color-subtle: var(--color-neutral-500);
  --brand-color-subtle-dark: var(--color-neutral-800);
  --brand-color-subtle-light: var(--color-neutral-200);
  --brand-font-base: var(--font-family-sans);
  --brand-font-lead: var(--font-family-serif);
  --brand-corner-button: var(--size-radius-700);
  --brand-corner-card: var(--size-radius-200);
  --brand-corner-modal: var(--size-radius-400);
  --brand-corner-input: var(--size-radius-200);
}
/* Auto-generated design tokens from Figma */
/* Generated on 2026-06-25T07:14:34.067Z */

:root[data-brand="b"] {
  --brand-color-functional-success: var(--color-brand-b-green-600);
  --brand-color-functional-danger: var(--color-brand-b-red-600);
  --brand-color-functional-base: var(--color-brand-b-purple-700);
  --brand-color-functional-base-dark: var(--color-brand-b-purple-900);
  --brand-color-primary: var(--color-brand-b-purple-600);
  --brand-color-accent: var(--color-brand-b-green-400);
  --brand-color-primary-dark: var(--color-brand-b-purple-800);
  --brand-color-accent-dark: var(--color-brand-b-green-800);
  --brand-color-subtle: var(--color-neutral-500);
  --brand-color-subtle-dark: var(--color-neutral-800);
  --brand-color-subtle-light: var(--color-neutral-200);
  --brand-font-base: var(--font-family-sans);
  --brand-font-lead: var(--font-family-serif);
  --brand-corner-button: var(--size-radius-000);
  --brand-corner-card: var(--size-radius-100);
  --brand-corner-modal: var(--size-radius-200);
  --brand-corner-input: var(--size-radius-000);
}
/* Auto-generated design tokens from Figma */
/* Generated on 2026-06-25T07:14:34.066Z */

:root[data-brand="c"] {
  --brand-color-functional-success: var(--color-brand-c-green-800);
  --brand-color-functional-danger: var(--color-brand-c-red-800);
  --brand-color-functional-base: var(--color-brand-c-blue-600);
  --brand-color-functional-base-dark: var(--color-brand-b-blue-900);
  --brand-color-primary: var(--color-brand-c-blue-600);
  --brand-color-accent: var(--color-brand-c-coolblue-400);
  --brand-color-primary-dark: var(--color-brand-c-blue-900);
  --brand-color-accent-dark: var(--color-brand-c-coolblue-900);
  --brand-color-subtle: var(--color-neutral-500);
  --brand-color-subtle-dark: var(--color-neutral-800);
  --brand-color-subtle-light: var(--color-neutral-200);
  --brand-font-base: var(--font-family-sans);
  --brand-font-lead: var(--font-family-serif);
  --brand-corner-button: var(--size-radius-full);
  --brand-corner-card: var(--size-radius-300);
  --brand-corner-modal: var(--size-radius-400);
  --brand-corner-input: var(--size-radius-200);
}
@layer themes {
  :root {
    color-scheme: light dark;
  }
}

@layer components {
  .label-content {
    display: inline-flex;
    align-items: center;
    gap: var(--typography-label-gap, 0.5em);
    line-height: inherit;
  }

  .label-content > .icon[data-slot] {
    display: inline-flex;
    align-items: center;
    line-height: inherit;
    flex: 0 0 auto;
  }

  .label-content__text {
    line-height: inherit;
  }

  .label-content.is-icon-only {
    gap: 0;
  }

  .field-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--field-label-gap, 0.25em);
    line-height: var(--field-label-line-height, inherit);
    cursor: pointer;
  }

  .field-label__required {
    color: var(--field-label-required-color, currentColor);
    font-weight: 700;
  }

  .field-label__required-text {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}
@layer components {
  /* Button token usage examples (ui-foundations) */

  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    min-height: var(--button-height-min);
    background: var(--button-solid-container-background-default);
    border-color: var(--button-solid-border-color-default);
    border-width: var(--button-border-size-default);
    border-style: solid;
    color: var(--button-solid-text-color-default);
    border-radius: var(--button-border-radius);
    padding-inline: var(--button-padding-inline);
    padding-block: var(--button-padding-block);
    cursor: pointer;
    -webkit-text-fill-color: currentColor;
  }

  .button .label-content {
    line-height: inherit;
    color: inherit;
    -webkit-text-fill-color: currentColor;
  }

  .button .label-content__text,
  .button .icon {
    color: inherit;
    -webkit-text-fill-color: currentColor;
  }

  .button.button--icon-only {
    padding-inline: var(--button-padding-block);
  }

  .button:hover,
  .button.is-hover {
    background: linear-gradient(
        0deg,
        var(--button-overlay-hover),
        var(--button-overlay-hover)
      ),
      var(--button-solid-container-background-default);
    border-color: var(--button-solid-border-color-hover);
    color: var(--button-solid-text-color-hover);
  }

  .button:active,
  .button.is-active {
    background: linear-gradient(
        0deg,
        var(--button-overlay-active),
        var(--button-overlay-active)
      ),
      var(--button-solid-container-background-default);
    border-color: var(--button-solid-border-color-active);
    color: var(--button-solid-text-color-active);
  }

  .button:focus-visible,
  .button.is-focus-visible {
    background: var(--button-solid-container-background-focus);
    border-color: var(--button-solid-border-color-focus);
    color: var(--button-solid-text-color-default);
    outline: none;
    box-shadow: 0 0 var(--shadow-focus, 0) 0 var(--color-focus, transparent);
  }

  .button.outline {
    background: var(--button-outline-container-background-default);
    border-color: var(--button-outline-border-color-default);
    border-width: var(--button-border-size-default);
    border-style: solid;
    color: var(--button-outline-text-color-default);
  }

  .button.outline:hover,
  .button.outline.is-hover {
    background: linear-gradient(
        0deg,
        var(--button-overlay-hover),
        var(--button-overlay-hover)
      ),
      var(--button-outline-container-background-default);
    border-color: var(--button-outline-border-color-hover);
    color: var(--button-outline-text-color-default);
  }

  .button.outline:active,
  .button.outline.is-active {
    background: linear-gradient(
        0deg,
        var(--button-overlay-active),
        var(--button-overlay-active)
      ),
      var(--button-outline-container-background-default);
    border-color: var(--button-outline-border-color-active);
    color: var(--button-outline-text-color-active);
  }

  .button.outline:focus-visible,
  .button.outline.is-focus-visible {
    background: var(--button-outline-container-background-focus);
    border-color: var(--button-outline-border-color-focus);
    color: var(--button-outline-text-color-default);
    outline: none;
    box-shadow: 0 0 var(--shadow-focus, 0) 0 var(--color-focus, transparent);
  }

  .button.ghost {
    background: var(--button-ghost-container-background-default);
    border-color: var(--button-ghost-border-color-default);
    border-width: var(--button-border-size-default);
    border-style: solid;
    color: var(--button-ghost-text-color-default);
  }

  .button.ghost:hover,
  .button.ghost.is-hover {
    background: linear-gradient(
        0deg,
        var(--button-overlay-hover),
        var(--button-overlay-hover)
      ),
      var(--button-ghost-container-background-default);
    border-color: var(--button-ghost-border-color-hover);
    color: var(--button-ghost-text-color-default);
  }

  .button.ghost:active,
  .button.ghost.is-active {
    background: linear-gradient(
        0deg,
        var(--button-overlay-active),
        var(--button-overlay-active)
      ),
      var(--button-ghost-container-background-default);
    border-color: var(--button-ghost-border-color-active);
    color: var(--button-ghost-text-color-active);
  }

  .button.ghost:focus-visible,
  .button.ghost.is-focus-visible {
    background: var(--button-ghost-container-background-focus);
    border-color: var(--button-ghost-border-color-focus);
    color: var(--button-ghost-text-color-default);
    outline: none;
    box-shadow: 0 0 var(--shadow-focus, 0) 0 var(--color-focus, transparent);
  }

  .button:disabled,
  .button[disabled],
  .button.is-disabled {
    cursor: not-allowed;
    opacity: 0.6;
    background: var(--button-container-background-disabled);
    border-color: var(--button-border-color-disabled);
    color: var(--button-text-color-disabled);
    pointer-events: none;
  }

  .button-group {
    display: inline-flex;
    align-items: stretch;
    gap: var(--button-group-gap, var(--size-spacing-100, 0.25rem));
  }

  .button-group[data-orientation="vertical"] {
    flex-direction: column;
  }

  .button-group[data-justify="stretch"] {
    inline-size: 100%;
  }

  .button-group[data-justify="stretch"] > .button {
    flex: 1 1 auto;
    justify-content: center;
  }

  .button-group[data-attached="true"] {
    gap: 0;
  }

  .button-group[data-attached="true"] > .button {
    border-radius: var(--size-radius-000);
  }

  .button-group[data-attached="true"]:not([data-orientation="vertical"])
    > .button
    + .button {
    border-inline-start-width: 0;
  }

  .button-group[data-attached="true"][data-orientation="vertical"]
    > .button
    + .button {
    border-block-start-width: 0;
  }

  .button-group[data-attached="true"]:not([data-orientation="vertical"])
    > .button:first-child {
    border-start-start-radius: var(
      --button-group-border-radius,
      var(--button-border-radius)
    );
    border-end-start-radius: var(
      --button-group-border-radius,
      var(--button-border-radius)
    );
  }

  .button-group[data-attached="true"]:not([data-orientation="vertical"])
    > .button:last-child {
    border-start-end-radius: var(
      --button-group-border-radius,
      var(--button-border-radius)
    );
    border-end-end-radius: var(
      --button-group-border-radius,
      var(--button-border-radius)
    );
  }

  .button-group[data-attached="true"][data-orientation="vertical"]
    > .button:first-child {
    border-start-start-radius: var(
      --button-group-border-radius,
      var(--button-border-radius)
    );
    border-start-end-radius: var(
      --button-group-border-radius,
      var(--button-border-radius)
    );
  }

  .button-group[data-attached="true"][data-orientation="vertical"]
    > .button:last-child {
    border-end-start-radius: var(
      --button-group-border-radius,
      var(--button-border-radius)
    );
    border-end-end-radius: var(
      --button-group-border-radius,
      var(--button-border-radius)
    );
  }
}
@layer components {
  /* --- .input: internal primitive (the <input> element itself) --- */

  .input {
    display: block;
    inline-size: 100%;
    block-size: auto;
    appearance: none;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    flex: 1;
    min-inline-size: 0;
    font: inherit;
    color: inherit;
    line-height: inherit;
  }

  .input::placeholder {
    color: var(--input-text-color-placeholder);
  }

  .input:focus-visible {
    outline: none;
    box-shadow: none;
  }

  .input:disabled {
    cursor: not-allowed;
  }

  /* Hide native number spinners (we use custom controls) */

  .input[type="number"]::-webkit-inner-spin-button,
  .input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
  }

  /* --- .input-field: the composed pattern (container + input + control) --- */

  .input-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--input-gap);
    inline-size: 100%;
    block-size: var(--input-height, var(--size-spacing-800));
    font-family: var(--input-font-family);
    font-weight: var(--input-font-weight);
    font-size: var(--input-font-size);
    line-height: var(--input-line-height, var(--button-line-height, 1.5));
    color: var(--input-text-color-default);
    background: var(--input-container-background-default);
    border-style: solid;
    border-width: var(--input-border-size-default);
    border-color: var(--input-border-color-default);
    border-radius: var(--input-border-radius);
    padding-inline: var(--input-padding-inline);
    padding-block: var(--input-padding-block);
  }

  /* --- Control slot --- */

  .input-field__control {
    display: flex;
    align-items: center;
    gap: var(--input-gap);
    flex-shrink: 0;
    color: var(--input-text-color-default);
  }

  .input-field__control:empty {
    display: none;
  }

  /* Hide controls when input is empty (showing placeholder) */
  .input-field:has(.input:placeholder-shown) .input-field__control {
    visibility: hidden;
  }

  /* Hide controls when disabled */
  .input-field:has(.input:disabled) .input-field__control,
  .input-field.is-disabled .input-field__control {
    visibility: hidden;
  }

  .input-field__control button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    color: inherit;
    font-size: inherit;
    line-height: 1;
  }

  .input-field__control button:hover {
    color: var(--input-text-color-hover);
  }

  .input-field__control .icon {
    font-size: 1.5rem;
  }

  /* --- State: hover --- */

  .input-field:hover,
  .input-field.is-hover {
    background:
      linear-gradient(0deg, var(--input-overlay-hover), var(--input-overlay-hover)),
      var(--input-container-background-default);
    border-width: var(--input-border-size-hover);
    padding-inline: calc(
      var(--input-padding-inline) + var(--input-border-size-default) -
        var(--input-border-size-hover)
    );
    padding-block: calc(
      var(--input-padding-block) + var(--input-border-size-default) -
        var(--input-border-size-hover)
    );
    border-color: var(--input-border-color-hover);
    color: var(--input-text-color-hover);
  }

  /* --- State: focus-within --- */

  .input-field:focus-within,
  .input-field.is-focus-visible {
    background: var(--input-container-background-focus);
    border-color: var(--input-border-color-focus);
    outline: none;
    box-shadow: 0 0 var(--shadow-focus, 0) 0 var(--color-focus, transparent);
  }

  /* --- State: active --- */

  .input-field:has(.input:active),
  .input-field.is-active {
    background:
      linear-gradient(0deg, var(--input-overlay-active), var(--input-overlay-active)),
      var(--input-container-background-default);
    border-width: var(--input-border-size-active);
    padding-inline: calc(
      var(--input-padding-inline) + var(--input-border-size-default) -
        var(--input-border-size-active)
    );
    padding-block: calc(
      var(--input-padding-block) + var(--input-border-size-default) -
        var(--input-border-size-active)
    );
    border-color: var(--input-border-color-active);
    color: var(--input-text-color-active);
  }

  /* --- State: disabled --- */

  .input-field:has(.input:disabled),
  .input-field.is-disabled {
    cursor: not-allowed;
    color: var(--input-text-color-disabled);
    background: var(--input-container-background-disabled);
    border-color: var(--input-border-color-disabled);
  }

  /* --- State: readonly --- */

  .input-field:has(.input:read-only),
  .input-field.is-readonly {
    border-style: dashed;
  }

  .input-field:has(.input:read-only) .input-field__control button,
  .input-field.is-readonly .input-field__control button {
    pointer-events: none;
    opacity: 0.4;
  }

  /* --- State: invalid --- */

  .input-field.is-invalid,
  .input-field:has(.input[aria-invalid="true"]) {
    border-color: var(--input-border-color-invalid);
  }

  .input-field.is-invalid:focus-within,
  .input-field:has(.input[aria-invalid="true"]):focus-within,
  .input-field.is-invalid.is-focus-visible,
  .input-field:has(.input[aria-invalid="true"]).is-focus-visible {
    border-color: var(--input-border-color-invalid);
    box-shadow: 0 0 var(--shadow-focus, 0) 0 var(--input-border-color-invalid);
  }
}
@layer components {
  .icon {
    display: inline-block;
    inline-size: 1em;
    block-size: 1em;
    inline-size: 1lh;
    block-size: 1lh;
    line-height: inherit;
    background-color: currentColor;
    -webkit-mask-image: var(--icon-src);
    mask-image: var(--icon-src);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    vertical-align: middle;
  }
}
@layer components {
  .checkbox-field {
    display: inline-flex;
    align-items: center;
    gap: var(--typography-label-gap);
    font-family: var(--typography-label-font-family);
    font-weight: var(--typography-label-font-weight);
    font-size: var(--typography-label-font-size);
    line-height: var(--typography-label-line-height);
    color: var(--checkbox-text-color-default);
    cursor: pointer;
  }

  .checkbox-field.is-disabled {
    color: var(--checkbox-text-color-disabled);
    cursor: not-allowed;
  }

  .checkbox {
    inline-size: var(--size-spacing-600);
    block-size: var(--size-spacing-600);
    margin: 0;
    appearance: none;
    display: inline-grid;
    place-content: center;
    border-style: solid;
    border-width: var(--checkbox-border-size-default);
    border-color: var(--checkbox-border-color-default);
    border-radius: var(--corner-checkbox-radius);
    background: var(--checkbox-container-background-default);
    color: var(--checkbox-text-color-active);
    cursor: pointer;
  }

  .checkbox::after {
    content: "";
    display: block;
  }

  .checkbox:checked,
  .checkbox.is-checked {
    border-color: var(--checkbox-border-color-active);
    background: var(--checkbox-container-background-active);
  }

  .checkbox:checked::after,
  .checkbox.is-checked::after {
    content: "";
    inline-size: 0.75em;
    block-size: 0.75em;
    background-color: currentColor;
    -webkit-mask-image: url("/assets/icons/checkmark.svg");
    mask-image: url("/assets/icons/checkmark.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
  }

  .checkbox:indeterminate,
  .checkbox.is-indeterminate {
    border-color: var(--checkbox-border-color-active);
    background: var(--checkbox-container-background-active);
  }

  .checkbox:indeterminate::after,
  .checkbox.is-indeterminate::after {
    inline-size: 0.75rem;
    block-size: var(--size-border-200);
    border-radius: var(--size-radius-full);
    background: currentColor;
  }

  .checkbox:hover,
  .checkbox.is-hover {
    background:
      linear-gradient(0deg, var(--color-overlay-hover), var(--color-overlay-hover)),
      var(--checkbox-container-background-hover);
    color: var(--checkbox-text-color-hover);
    border-color: var(--checkbox-border-color-hover);
    border-width: var(--checkbox-border-size-hover);
  }

  .checkbox:checked:hover,
  .checkbox.is-checked.is-hover {
    background:
      linear-gradient(0deg, var(--color-overlay-hover), var(--color-overlay-hover)),
      var(--checkbox-container-background-active);
    color: var(--checkbox-text-color-hover);
    border-color: var(--checkbox-border-color-hover);
    border-width: var(--checkbox-border-size-hover);
  }

  .checkbox:indeterminate:hover,
  .checkbox.is-indeterminate.is-hover {
    background:
      linear-gradient(0deg, var(--color-overlay-hover), var(--color-overlay-hover)),
      var(--checkbox-container-background-active);
    color: var(--checkbox-text-color-hover);
    border-color: var(--checkbox-border-color-hover);
    border-width: var(--checkbox-border-size-hover);
  }

  .checkbox:active,
  .checkbox.is-active {
    background:
      linear-gradient(0deg, var(--color-overlay-active), var(--color-overlay-active)),
      var(--checkbox-container-background-default);
    border-color: var(--checkbox-border-color-active);
    border-width: var(--size-border-200);
  }

  .checkbox:checked:active,
  .checkbox.is-checked.is-active {
    background:
      linear-gradient(0deg, var(--color-overlay-active), var(--color-overlay-active)),
      var(--checkbox-container-background-active);
    border-color: var(--checkbox-border-color-active);
  }

  .checkbox:indeterminate:active,
  .checkbox.is-indeterminate.is-active {
    background:
      linear-gradient(0deg, var(--color-overlay-active), var(--color-overlay-active)),
      var(--checkbox-container-background-active);
    border-color: var(--checkbox-border-color-active);
  }

  .checkbox:focus-visible,
  .checkbox.is-focus-visible {
    border-color: var(--checkbox-border-color-focus);
    outline: none;
    box-shadow: 0 0 var(--shadow-focus, 0) 0 var(--color-focus, transparent);
  }

  .checkbox:disabled,
  .checkbox.is-disabled {
    border-width: var(--checkbox-border-size-disabled);
    border-color: var(--checkbox-border-color-disabled);
    background: var(--checkbox-container-background-disabled);
    color: var(--checkbox-text-color-disabled);
    cursor: not-allowed;
  }
}
@layer components {
  .radio-field {
    display: inline-flex;
    align-items: center;
    gap: var(--typography-label-gap);
    font-family: var(--typography-label-font-family);
    font-weight: var(--typography-label-font-weight);
    font-size: var(--typography-label-font-size);
    line-height: var(--typography-label-line-height);
    color: var(--radio-text-color-default);
    cursor: pointer;
  }

  .radio-field.is-disabled {
    color: var(--radio-text-color-disabled);
    cursor: not-allowed;
  }

  .radio {
    inline-size: var(--size-spacing-600);
    block-size: var(--size-spacing-600);
    margin: 0;
    appearance: none;
    display: inline-grid;
    place-content: center;
    border-style: solid;
    border-width: var(--radio-border-size-default);
    border-color: var(--radio-border-color-default);
    border-radius: var(--size-radius-full);
    background: var(--radio-container-background-default);
    cursor: pointer;
  }

  .radio::after {
    content: "";
    display: block;
    inline-size: 0;
    block-size: 0;
    border-radius: var(--size-radius-full);
    background: currentColor;
    transition: all 120ms ease;
  }

  .radio:checked,
  .radio.is-checked {
    border-color: var(--radio-border-color-active);
    background: var(--radio-container-background-default);
    color: var(--radio-text-color-active);
  }

  .radio:checked::after,
  .radio.is-checked::after {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    background: var(--radio-border-color-active);
  }

  .radio:hover,
  .radio.is-hover {
    background:
      linear-gradient(0deg, var(--color-overlay-hover), var(--color-overlay-hover)),
      var(--radio-container-background-hover);
    color: var(--radio-text-color-hover);
    border-color: var(--radio-border-color-hover);
    border-width: var(--radio-border-size-hover);
  }

  .radio:checked:hover,
  .radio.is-checked.is-hover {
    background:
      linear-gradient(0deg, var(--color-overlay-hover), var(--color-overlay-hover)),
      var(--radio-container-background-default);
    border-color: var(--radio-border-color-hover);
    border-width: var(--radio-border-size-hover);
  }

  .radio:active,
  .radio.is-active {
    background:
      linear-gradient(0deg, var(--color-overlay-active), var(--color-overlay-active)),
      var(--radio-container-background-default);
    border-color: var(--radio-border-color-active);
    border-width: var(--size-border-200);
  }

  .radio:checked:active,
  .radio.is-checked.is-active {
    background:
      linear-gradient(0deg, var(--color-overlay-active), var(--color-overlay-active)),
      var(--radio-container-background-default);
    border-color: var(--radio-border-color-active);
  }

  .radio:focus-visible,
  .radio.is-focus-visible {
    border-color: var(--radio-border-color-focus);
    outline: none;
    box-shadow: 0 0 var(--shadow-focus, 0) 0 var(--color-focus, transparent);
  }

  .radio:disabled,
  .radio.is-disabled {
    border-width: var(--radio-border-size-disabled);
    border-color: var(--radio-border-color-disabled);
    background: var(--radio-container-background-disabled);
    color: var(--radio-text-color-disabled);
    cursor: not-allowed;
  }
}
@layer components {
  .switch-field {
    display: inline-flex;
    align-items: center;
    gap: var(--typography-label-gap);
    font-family: var(--typography-label-font-family);
    font-weight: var(--typography-label-font-weight);
    font-size: var(--typography-label-font-size);
    line-height: var(--typography-label-line-height);
    color: var(--switch-text-color-default);
    cursor: pointer;
  }

  .switch-field.is-disabled {
    color: var(--switch-text-color-disabled);
    cursor: not-allowed;
  }

  .switch {
    --_switch-inline-size: var(--size-spacing-1000);
    --_switch-block-size: var(--size-spacing-600);
    --_switch-padding: var(--size-spacing-100);
    --_switch-thumb-size: calc(
      var(--_switch-block-size) - (var(--_switch-padding) * 2)
    );
    inline-size: var(--_switch-inline-size);
    block-size: var(--_switch-block-size);
    box-sizing: border-box;
    margin: 0;
    appearance: none;
    position: relative;
    flex: 0 0 auto;
    border-style: solid;
    border-width: var(--size-border-100);
    border-color: var(--switch-track-border-color-default);
    border-radius: var(--size-radius-full);
    background: var(--switch-track-background-default);
    cursor: pointer;
    transition:
      background-color 160ms ease,
      border-color 160ms ease,
      opacity 160ms ease;
  }

  .switch::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: var(--_switch-padding);
    inline-size: var(--_switch-thumb-size);
    block-size: var(--_switch-thumb-size);
    box-sizing: border-box;
    border-radius: var(--size-radius-full);
    background: var(--switch-thumb-background-default);
    transform: translate(0, -50%);
    transition:
      transform 160ms ease,
      background-color 160ms ease;
  }

  .switch:checked,
  .switch.is-checked {
    border-color: var(--switch-track-border-color-active);
    background: var(--switch-track-background-active);
  }

  .switch:checked::after,
  .switch.is-checked::after {
    background: var(--switch-thumb-background-active);
    transform: translate(
      calc(var(--_switch-inline-size) - var(--_switch-block-size)),
      -50%
    );
  }

  .switch:hover,
  .switch.is-hover {
    background:
      linear-gradient(0deg, var(--color-overlay-hover), var(--color-overlay-hover)),
      var(--switch-track-background-hover);
    border-color: var(--switch-track-border-color-hover);
  }

  .switch:hover::after,
  .switch.is-hover::after {
    background: var(--switch-thumb-background-hover);
  }

  .switch:checked:hover,
  .switch.is-checked.is-hover {
    background:
      linear-gradient(0deg, var(--color-overlay-hover), var(--color-overlay-hover)),
      var(--switch-track-background-active);
  }

  .switch:checked:hover::after,
  .switch.is-checked.is-hover::after {
    background: var(--switch-thumb-background-active);
  }

  .switch:active,
  .switch.is-active {
    background:
      linear-gradient(0deg, var(--color-overlay-active), var(--color-overlay-active)),
      var(--switch-track-background-hover);
    border-color: var(--switch-track-border-color-hover);
  }

  .switch:active::after,
  .switch.is-active::after {
    background: var(--switch-thumb-background-hover);
  }

  .switch:checked:active,
  .switch.is-checked.is-active {
    background:
      linear-gradient(0deg, var(--color-overlay-active), var(--color-overlay-active)),
      var(--switch-track-background-active);
  }

  .switch:checked:active::after,
  .switch.is-checked.is-active::after {
    background: var(--switch-thumb-background-active);
  }

  .switch:focus-visible,
  .switch.is-focus-visible {
    border-color: var(--switch-track-border-color-active);
    outline: none;
    box-shadow: 0 0 var(--shadow-focus, 0) 0 var(--color-focus, transparent);
  }

  .switch:disabled,
  .switch.is-disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }

  .switch:disabled:not(:checked),
  .switch.is-disabled:not(.is-checked) {
    border-color: var(--switch-track-border-color-disabled);
    background: var(--switch-track-background-disabled);
  }

  .switch:disabled::after,
  .switch.is-disabled::after {
    background: var(--switch-thumb-background-disabled);
  }

  .switch:checked:disabled,
  .switch.is-checked.is-disabled {
    border-color: var(--switch-track-border-color-disabled);
    background: var(--switch-track-background-active);
  }
}
@layer components {
  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--badge-gap, 0.25rem);
    border: var(--badge-border-size-default) solid var(--badge-default-border-color);
    border-radius: var(--badge-border-radius, 625rem);
    font-family: var(--badge-font-family, inherit);
    font-weight: var(--badge-font-weight, 700);
    white-space: nowrap;
    background: var(--badge-default-container-background);
    color: var(--badge-default-text-color);
    font-size: var(--badge-font-size-md);
    line-height: var(--badge-line-height-md);
    padding-inline: var(--badge-padding-inline-md);
    padding-block: var(--badge-padding-block-md);
    min-block-size: var(--badge-height-min);
    min-inline-size: var(--badge-width-min);
  }

  /* ── Sizes ── */

  .badge.sm {
    font-size: var(--badge-font-size-sm);
    line-height: var(--badge-line-height-sm);
    padding-inline: var(--badge-padding-inline-sm);
    padding-block: var(--badge-padding-block-sm);
  }

  /* ── Variants ── */

  .badge.brand {
    background: var(--badge-brand-container-background);
    color: var(--badge-brand-text-color);
    border-color: var(--badge-brand-border-color);
  }

  .badge.success {
    background: var(--badge-success-container-background);
    color: var(--badge-success-text-color);
    border-color: var(--badge-success-border-color);
  }

  .badge.danger {
    background: var(--badge-danger-container-background);
    color: var(--badge-danger-text-color);
    border-color: var(--badge-danger-border-color);
  }

  /* ── Icon-only ── */

  .badge.icon-only {
    padding-inline: var(--badge-padding-inline-icon-only);
    justify-content: center;
  }

  /* ── Icon slot ── */

  .badge > .icon {
    flex: 0 0 auto;
  }

  /* ── Ensure children inherit color over base :where(span) rule ── */

  .badge > * {
    color: inherit;
  }
}
@layer components {
  .divider {
    border: none;
    margin: 0;
    padding: 0;
    background: var(--divider-color, var(--color-border-default));
    block-size: var(--size-border-100);
    inline-size: 100%;
    align-self: stretch;
  }

  /* ── Vertical orientation ── */

  .divider[aria-orientation="vertical"] {
    block-size: auto;
    inline-size: var(--size-border-100);
    align-self: stretch;
  }

  /* ── Subtle variant ── */

  .divider.subtle {
    --divider-color: var(--color-border-subtle);
  }
}
@layer components {
  .textarea {
    display: block;
    inline-size: 100%;
    min-block-size: calc(var(--textarea-line-height) * 3 + var(--textarea-padding-block) * 2);
    padding-inline: var(--textarea-padding-inline);
    padding-block: var(--textarea-padding-block);
    font-family: var(--textarea-font-family);
    font-size: var(--textarea-font-size);
    line-height: var(--textarea-line-height);
    color: var(--textarea-text-color-default);
    background: var(--textarea-container-background-default);
    border: var(--textarea-border-size-default) solid var(--textarea-border-color-default);
    border-radius: var(--textarea-border-radius);
    resize: vertical;
    transition: border-color 0.15s ease;
  }

  .textarea::placeholder {
    color: var(--textarea-text-color-placeholder);
  }

  .textarea:hover,
  .textarea.is-hover {
    border-color: var(--textarea-border-color-hover);
  }

  .textarea:focus-visible,
  .textarea.is-focus-visible {
    border-color: var(--textarea-border-color-focus);
    outline: none;
    box-shadow: 0 0 var(--shadow-focus, 0) 0 var(--color-focus, transparent);
  }

  .textarea:disabled,
  .textarea.is-disabled {
    color: var(--textarea-text-color-disabled);
    background: var(--textarea-container-background-disabled);
    border-color: var(--textarea-border-color-disabled);
    cursor: not-allowed;
    resize: none;
  }

  .textarea[readonly] {
    background: var(--textarea-container-background-default);
    border-color: var(--textarea-border-color-default);
    cursor: default;
    resize: none;
  }
}
@layer components {
  .avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--avatar-border-radius);
    overflow: hidden;
    background: var(--avatar-container-background-default);
    color: var(--avatar-text-color-default);
    font-family: var(--font-family-sans);
    font-weight: var(--font-weight-600);
    inline-size: 2.5rem;
    block-size: 2.5rem;
    font-size: var(--font-size-sm);
  }

  /* ── Sizes ── */

  .avatar.xs {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    font-size: var(--font-size-xs);
  }

  .avatar.sm {
    inline-size: 2rem;
    block-size: 2rem;
    font-size: var(--font-size-xs);
  }

  .avatar.lg {
    inline-size: 3rem;
    block-size: 3rem;
    font-size: var(--font-size-md);
  }

  .avatar.xl {
    inline-size: 4rem;
    block-size: 4rem;
    font-size: var(--font-size-lg);
  }

  /* ── Image ── */

  .avatar > img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  /* ── Initials ── */

  .avatar__initials {
    user-select: none;
    text-transform: uppercase;
  }
}
@layer components {
  .accordion {
    display: flex;
    flex-direction: column;
    border: var(--accordion-border-size-default) solid var(--accordion-border-color-default);
    border-radius: var(--accordion-border-radius);
    overflow: hidden;
  }

  .accordion-item {
    border-block-start: var(--accordion-border-size-default) solid var(--accordion-border-color-default);
  }

  .accordion-item:first-child {
    border-block-start: none;
  }

  .accordion-item > summary {
    display: flex;
    align-items: center;
    gap: var(--accordion-gap);
    padding-inline: var(--accordion-padding-inline);
    padding-block: var(--accordion-padding-block);
    font-family: var(--font-family-sans);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-600);
    line-height: var(--line-height-md);
    color: var(--accordion-text-color-default);
    cursor: pointer;
    list-style: none;
    user-select: none;
  }

  .accordion-item > summary::-webkit-details-marker {
    display: none;
  }

  .accordion-item > summary::before {
    content: "";
    display: inline-block;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-inline-end: var(--size-border-200) solid currentColor;
    border-block-end: var(--size-border-200) solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
  }

  .accordion-item[open] > summary::before {
    transform: rotate(45deg);
  }

  .accordion-item > summary:hover,
  .accordion-item > summary.is-hover {
    background: var(--color-fill-hover);
  }

  .accordion-item > summary:focus-visible,
  .accordion-item > summary.is-focus-visible {
    outline: none;
    box-shadow: 0 0 var(--shadow-focus, 0) 0 var(--color-focus, transparent);
  }

  .accordion-item__content {
    padding-inline: var(--accordion-padding-inline);
    padding-block: var(--accordion-padding-block);
    font-family: var(--font-family-sans);
    font-size: var(--font-size-md);
    line-height: var(--line-height-md);
    color: var(--accordion-text-color-default);
  }

  /* ── Disabled ── */

  .accordion-item.is-disabled > summary {
    color: var(--accordion-text-color-disabled);
    cursor: not-allowed;
    pointer-events: none;
  }
}
@layer components {
  .tabs {
    display: flex;
    flex-direction: column;
  }

  .tab-list {
    display: flex;
    gap: 0;
    border-block-end: var(--size-border-100) solid var(--tabs-border-color-default);
  }

  .tab-list[aria-orientation="vertical"] {
    flex-direction: column;
    border-block-end: none;
    border-inline-end: var(--size-border-100) solid var(--tabs-border-color-default);
  }

  .tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: var(--tabs-padding-inline);
    padding-block: var(--tabs-padding-block);
    font-family: var(--font-family-sans);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-500);
    line-height: var(--line-height-md);
    color: var(--tabs-text-color-default);
    background: transparent;
    border: none;
    border-block-end: var(--size-border-200) solid transparent;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
  }

  .tab:hover,
  .tab.is-hover {
    color: var(--tabs-text-color-hover);
    border-block-end-color: var(--tabs-border-color-hover);
  }

  .tab[aria-selected="true"],
  .tab.is-selected,
  .tab.is-active {
    color: var(--tabs-text-color-active);
    font-weight: var(--font-weight-600);
    border-block-end-color: var(--tabs-border-color-active);
  }

  .tab:focus-visible,
  .tab.is-focus-visible {
    outline: none;
    box-shadow: 0 0 var(--shadow-focus, 0) 0 var(--color-focus, transparent);
  }

  .tab:disabled,
  .tab[aria-disabled="true"],
  .tab.is-disabled {
    color: var(--tabs-text-color-disabled);
    cursor: not-allowed;
    border-block-end-color: transparent;
    pointer-events: none;
  }

  /* --- Panel container: CSS-only scroll-snap switching --- */

  .tab-panels {
    display: flex;
    overflow-x: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
  }

  .tab-panels > .tab-panel {
    flex: 0 0 100%;
    min-inline-size: 100%;
    scroll-snap-align: start;
    padding-block: var(--size-spacing-400);
  }

  /* Legacy: standalone panel with hidden attribute (JS-driven) */
  .tab-panel {
    padding-block: var(--size-spacing-400);
  }

  .tab-panel[hidden] {
    display: none;
  }
}
@layer components {
  .tooltip {
    position: absolute;
    z-index: var(--zindex-tooltip);
    max-inline-size: 15rem;
    padding-inline: var(--tooltip-padding-inline);
    padding-block: var(--tooltip-padding-block);
    font-family: var(--font-family-sans);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    color: var(--tooltip-text-color-default);
    background: var(--tooltip-container-background-default);
    border-radius: var(--tooltip-border-radius);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
  }

  .tooltip.is-visible {
    opacity: 1;
  }

  /* ── Placement ── */

  .tooltip[data-placement="top"] {
    inset-block-end: 100%;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    margin-block-end: var(--size-spacing-200);
  }

  .tooltip[data-placement="bottom"] {
    inset-block-start: 100%;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    margin-block-start: var(--size-spacing-200);
  }

  .tooltip[data-placement="left"] {
    inset-inline-end: 100%;
    inset-block-start: 50%;
    transform: translateY(-50%);
    margin-inline-end: var(--size-spacing-200);
  }

  .tooltip[data-placement="right"] {
    inset-inline-start: 100%;
    inset-block-start: 50%;
    transform: translateY(-50%);
    margin-inline-start: var(--size-spacing-200);
  }

  /* ── Trigger wrapper ── */

  .tooltip-trigger {
    position: relative;
    display: inline-flex;
  }

  .tooltip-trigger:hover > .tooltip,
  .tooltip-trigger:focus-within > .tooltip {
    opacity: 1;
  }
}
@layer components {
  .select {
    position: relative;
    display: inline-grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    inline-size: 100%;
    block-size: var(--select-height, 2.5rem);
    appearance: none;
    font-family: var(--select-font-family);
    font-weight: var(--select-font-weight);
    font-size: var(--select-font-size);
    line-height: var(--select-line-height);
    color: var(--select-text-color-default);
    background: var(--select-container-background-default);
    border-style: solid;
    border-width: var(--select-border-size-default);
    border-color: var(--select-border-color-default);
    border-radius: var(--select-border-radius);
    padding-inline-start: var(--select-padding-inline);
    padding-inline-end: calc(var(--select-padding-inline) + 1.5em);
    padding-block: var(--select-padding-block);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--select-padding-inline) center;
    background-size: 1em;
    cursor: pointer;
  }

  /* --- Progressive enhancement: base-select --- */
  @supports (appearance: base-select) {
    .select {
      appearance: base-select;
      background-image: none;
      padding-inline-end: var(--select-padding-inline);
    }

    .select::picker-icon {
      content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
      display: block;
      inline-size: 1em;
      block-size: 1em;
      transition: rotate 0.2s ease;
    }

    .select:open::picker-icon {
      rotate: 180deg;
    }

    .select::picker(select) {
      appearance: base-select;
      border: var(--select-border-size-default) solid var(--select-border-color-default);
      border-radius: var(--select-border-radius);
      background: var(--select-container-background-default);
      padding: var(--size-spacing-100);
      transition: opacity 0.2s ease, translate 0.2s ease;
      opacity: 0;
      translate: 0 -0.5rem;
    }

    .select::picker(select):popover-open {
      opacity: 1;
      translate: 0;
    }

    @starting-style {
      .select::picker(select):popover-open {
        opacity: 0;
        translate: 0 -0.5rem;
      }
    }

    .select option {
      padding: 0.5rem 0.75rem;
      border-radius: var(--size-radius-200);
      cursor: pointer;
      transition: background-color 0.15s ease, color 0.15s ease;
    }

    .select option:hover {
      background-color: color-mix(in srgb, currentColor 8%, transparent);
    }

    .select option:checked {
      background-color: color-mix(in srgb, currentColor 12%, transparent);
      font-weight: 500;
    }
  }

  .select:hover,
  .select.is-hover {
    background-color: var(--select-container-background-hover);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    border-width: var(--select-border-size-hover);
    border-color: var(--select-border-color-hover);
    color: var(--select-text-color-hover);
    padding-inline-start: calc(
      var(--select-padding-inline) + var(--select-border-size-default) -
        var(--select-border-size-hover)
    );
    padding-inline-end: calc(
      var(--select-padding-inline) + 1.5em + var(--select-border-size-default) -
        var(--select-border-size-hover)
    );
    padding-block: calc(
      var(--select-padding-block) + var(--select-border-size-default) -
        var(--select-border-size-hover)
    );
  }

  @supports (appearance: base-select) {
    .select:hover,
    .select.is-hover {
      background-image: none;
      padding-inline-end: calc(
        var(--select-padding-inline) + var(--select-border-size-default) -
          var(--select-border-size-hover)
      );
    }
  }

  .select:active,
  .select.is-active {
    background-color: var(--select-container-background-active);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    border-width: var(--select-border-size-active);
    border-color: var(--select-border-color-active);
    color: var(--select-text-color-active);
    padding-inline-start: calc(
      var(--select-padding-inline) + var(--select-border-size-default) -
        var(--select-border-size-active)
    );
    padding-inline-end: calc(
      var(--select-padding-inline) + 1.5em + var(--select-border-size-default) -
        var(--select-border-size-active)
    );
    padding-block: calc(
      var(--select-padding-block) + var(--select-border-size-default) -
        var(--select-border-size-active)
    );
  }

  @supports (appearance: base-select) {
    .select:active,
    .select.is-active {
      background-image: none;
      padding-inline-end: calc(
        var(--select-padding-inline) + var(--select-border-size-default) -
          var(--select-border-size-active)
      );
    }
  }

  .select:focus-visible,
  .select.is-focus-visible {
    background: var(--select-container-background-focus);
    border-color: var(--select-border-color-focus);
    outline: none;
    box-shadow: 0 0 var(--shadow-focus, 0) 0 var(--color-focus, transparent);
  }

  .select:disabled,
  .select[disabled],
  .select.is-disabled {
    cursor: not-allowed;
    color: var(--select-text-color-disabled);
    background-color: var(--select-container-background-disabled);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    border-color: var(--select-border-color-disabled);
  }

  @supports (appearance: base-select) {
    .select:disabled,
    .select[disabled],
    .select.is-disabled {
      background-image: none;
    }
  }

  .select.is-placeholder {
    color: var(--select-text-color-placeholder);
  }

  .select.is-invalid,
  .select[aria-invalid="true"] {
    border-color: var(--select-border-color-invalid);
  }

  .select.is-invalid:focus-visible,
  .select[aria-invalid="true"]:focus-visible,
  .select.is-invalid.is-focus-visible,
  .select[aria-invalid="true"].is-focus-visible {
    border-color: var(--select-border-color-invalid);
    box-shadow: 0 0 var(--shadow-focus, 0) 0 var(--select-border-color-invalid);
  }
}
@layer components {
  .link {
    display: inline-flex;
    align-items: center;
    gap: var(--link-gap, 0.25rem);
    font-family: var(--link-font-family, inherit);
    font-weight: var(--link-font-weight, inherit);
    font-size: var(--link-font-size, inherit);
    line-height: var(--link-line-height, inherit);
    color: var(--link-text-color-default);
    text-decoration: var(--link-text-decoration-default, underline);
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    transition: color 0.15s ease;
  }

  /* ── States ── */

  .link:hover,
  .link.is-hover {
    color: var(--link-text-color-hover);
    text-decoration: var(--link-text-decoration-hover, underline);
  }

  .link:active,
  .link.is-active {
    color: var(--link-text-color-active);
  }

  .link:visited,
  .link.is-visited {
    color: var(--link-text-color-visited);
  }

  .link:focus-visible,
  .link.is-focus-visible {
    color: var(--link-text-color-hover);
    outline: none;
    box-shadow: 0 0 var(--shadow-focus, 0) 0 var(--color-focus, transparent);
    border-radius: var(--size-radius-100);
  }

  .link[aria-disabled="true"],
  .link.is-disabled {
    color: var(--link-text-color-disabled);
    cursor: not-allowed;
    text-decoration: line-through;
  }

  .link[aria-disabled="true"]:hover,
  .link.is-disabled:hover {
    color: var(--link-text-color-disabled);
  }

  /* ── Icon slot ── */

  .link > .icon {
    flex: 0 0 auto;
  }
}
@layer components {
  /* ----------------------------------------------------------------
   * Form — layout container for form fields
   * ---------------------------------------------------------------- */

  .form {
    display: flex;
    flex-direction: column;
    gap: var(--form-gap);
    padding-inline: var(--form-padding-inline);
    padding-block: var(--form-padding-block);
    background: var(--form-container-background);
    border: var(--form-border-size) solid var(--form-container-border-color);
    border-radius: var(--form-border-radius);
  }

  .form.borderless {
    border: none;
    padding: 0;
    background: transparent;
  }

  /* ----------------------------------------------------------------
   * Form Group — groups related fields with an optional title
   * ---------------------------------------------------------------- */

  .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--form-group-gap);
    margin: 0;
    padding: 0;
    border: 0;
    min-inline-size: 0;
  }

  .form-group__title {
    font-family: var(--typography-heading-font-family);
    font-weight: var(--typography-heading-font-weight);
    font-size: var(--typography-heading-font-size-sm);
    line-height: var(--typography-heading-line-height-sm);
    color: var(--form-group-title-color);
    margin: 0;
  }

  /* ----------------------------------------------------------------
   * Form Field — single field with label, input, and helper/error
   * ---------------------------------------------------------------- */

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

  .form-field[data-label-position="side"] {
    flex-direction: row;
    align-items: flex-start;
  }

  .form-field[data-label-position="side"] > .field-label {
    flex-shrink: 0;
    inline-size: 8rem;
    padding-block-start: var(--size-spacing-200);
  }

  .form-field[data-label-position="side"] > .form-field__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--form-field-gap);
  }

  /* ----------------------------------------------------------------
   * Helper and error text
   * ---------------------------------------------------------------- */

  .form-field__helper {
    font-family: var(--typography-body-font-family);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    color: var(--form-field-helper-text-color-default);
    margin: 0;
  }

  .form-field.is-invalid .form-field__helper {
    color: var(--form-field-helper-text-color-invalid);
  }

  .form-field__link {
    font-size: var(--font-size-sm);
    color: var(--color-text-brand);
    text-decoration: none;
  }

  .form-field__link:hover {
    text-decoration: underline;
  }

  /* ----------------------------------------------------------------
   * Form Actions — button area at the bottom
   * ---------------------------------------------------------------- */

  .form-actions {
    display: flex;
    gap: var(--size-spacing-200);
    justify-content: flex-end;
    padding-block-start: var(--size-spacing-200);
  }

  .form-actions[data-align="start"] {
    justify-content: flex-start;
  }

  .form-actions[data-align="stretch"] {
    flex-direction: column;
  }

  .form-actions[data-align="stretch"] > * {
    inline-size: 100%;
  }
}