@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-08-24T14:22:39.245Z */

: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-spacing-050: .125rem;
  --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: 1.75rem;
  --size-radius-1000: 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;
  --size-target-default: 2.5rem;
  --size-target-compact: 2rem;
  --size-target-large: 3rem;
  --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-08-24T14:22:39.292Z */

:root {
  --fluid-font-size-lg: clamp(1.125rem, 1.081rem + 0.1878vw, 1.25rem);
  --fluid-font-size-xl: clamp(1.25rem, 1.162rem + 0.3756vw, 1.5rem);
  --fluid-font-size-xxl: clamp(1.5rem, 1.3239rem + 0.7512vw, 2rem);
  --fluid-font-size-xxxl: clamp(1.75rem, 1.4859rem + 1.1268vw, 2.5rem);
  --fluid-line-height-lg: clamp(1.5rem, 1.412rem + 0.3756vw, 1.75rem);
  --fluid-line-height-xl: clamp(1.75rem, 1.662rem + 0.3756vw, 2rem);
  --fluid-line-height-xxl: clamp(2rem, 1.7359rem + 1.1268vw, 2.75rem);
  --fluid-line-height-xxxl: clamp(2.25rem, 1.8099rem + 1.8779vw, 3.5rem);
}
/* Auto-generated design tokens from Figma */
/* Generated on 2026-08-24T14:22:39.231Z */

:root {
  --color-text-default: var(--brand-color-text-default);
  --color-text-inverse: var(--color-neutral-000);
  --color-text-disabled: var(--brand-color-text-disabled);
  --color-text-brand: var(--brand-color-primary);
  --color-text-subtle: var(--brand-color-subtle);
  --color-text-strong: var(--brand-color-text-strong);
  --color-text-danger: var(--brand-color-functional-danger);
  --color-text-success: var(--brand-color-functional-success);
  --color-text-on-brand: var(--brand-color-text-on-brand);
  --color-text-on-danger: var(--brand-color-text-on-danger);
  --color-text-on-success: var(--brand-color-text-on-success);
  --color-text-on-subtle: var(--brand-color-primary);
  --color-text-on-active: var(--brand-color-text-on-active);
  --color-text-on-disabled: var(--brand-color-text-on-disabled);
  --color-fill-surface: var(--brand-color-fill-surface);
  --color-fill-disabled: var(--brand-color-fill-disabled);
  --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(--brand-color-border-default);
  --color-border-subtle: var(--brand-color-subtle);
  --color-border-strong: var(--brand-color-border-strong);
  --color-border-brand: var(--brand-color-primary);
  --color-border-disabled: var(--brand-color-border-disabled);
  --color-border-danger: var(--brand-color-functional-danger);
  --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-08-24T14:22:39.234Z */

:root[data-mode="dark"] {
  --color-text-default: var(--brand-color-text-default-dark);
  --color-text-inverse: var(--color-neutral-1000);
  --color-text-disabled: var(--brand-color-text-disabled-dark);
  --color-text-brand: var(--brand-color-primary-dark);
  --color-text-subtle: var(--brand-color-subtle-dark);
  --color-text-strong: var(--brand-color-text-strong-dark);
  --color-text-danger: var(--brand-color-functional-danger);
  --color-text-success: var(--brand-color-functional-success);
  --color-text-on-brand: var(--brand-color-text-on-brand-dark);
  --color-text-on-danger: var(--brand-color-text-on-danger-dark);
  --color-text-on-success: var(--brand-color-text-on-success-dark);
  --color-text-on-subtle: var(--brand-color-primary-dark);
  --color-text-on-active: var(--brand-color-text-on-active-dark);
  --color-text-on-disabled: var(--brand-color-text-on-disabled-dark);
  --color-fill-surface: var(--brand-color-fill-surface-dark);
  --color-fill-disabled: var(--brand-color-fill-disabled-dark);
  --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(--brand-color-border-default-dark);
  --color-border-subtle: var(--brand-color-subtle-dark);
  --color-border-strong: var(--brand-color-border-strong-dark);
  --color-border-brand: var(--brand-color-primary);
  --color-border-disabled: var(--brand-color-border-disabled-dark);
  --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-08-24T14:22:39.292Z */

:root[data-mode="max"] {
  --fluid-font-size-lg: clamp(1.125rem, 1.081rem + 0.1878vw, 1.25rem);
  --fluid-font-size-xl: clamp(1.25rem, 1.162rem + 0.3756vw, 1.5rem);
  --fluid-font-size-xxl: clamp(1.5rem, 1.3239rem + 0.7512vw, 2rem);
  --fluid-font-size-xxxl: clamp(1.75rem, 1.4859rem + 1.1268vw, 2.5rem);
  --fluid-line-height-lg: clamp(1.5rem, 1.412rem + 0.3756vw, 1.75rem);
  --fluid-line-height-xl: clamp(1.75rem, 1.662rem + 0.3756vw, 2rem);
  --fluid-line-height-xxl: clamp(2rem, 1.7359rem + 1.1268vw, 2.75rem);
  --fluid-line-height-xxxl: clamp(2.25rem, 1.8099rem + 1.8779vw, 3.5rem);
}
/* Auto-generated design tokens from Figma */
/* Generated on 2026-08-24T14:22:39.291Z */

:root[data-mode="min"] {
  --fluid-font-size-lg: clamp(1.125rem, 1.081rem + 0.1878vw, 1.25rem);
  --fluid-font-size-xl: clamp(1.25rem, 1.162rem + 0.3756vw, 1.5rem);
  --fluid-font-size-xxl: clamp(1.5rem, 1.3239rem + 0.7512vw, 2rem);
  --fluid-font-size-xxxl: clamp(1.75rem, 1.4859rem + 1.1268vw, 2.5rem);
  --fluid-line-height-lg: clamp(1.5rem, 1.412rem + 0.3756vw, 1.75rem);
  --fluid-line-height-xl: clamp(1.75rem, 1.662rem + 0.3756vw, 2rem);
  --fluid-line-height-xxl: clamp(2rem, 1.7359rem + 1.1268vw, 2.75rem);
  --fluid-line-height-xxxl: clamp(2.25rem, 1.8099rem + 1.8779vw, 3.5rem);
}
/* Auto-generated design tokens from Figma */
/* Generated on 2026-08-24T14:22:39.287Z */

: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-color-text-default: var(--color-neutral-800);
  --brand-color-text-default-dark: var(--color-neutral-200);
  --brand-color-text-strong: var(--color-neutral-1000);
  --brand-color-text-strong-dark: var(--color-neutral-000);
  --brand-color-text-disabled: var(--color-neutral-600);
  --brand-color-text-disabled-dark: var(--color-neutral-400);
  --brand-color-text-on-disabled: var(--color-neutral-800);
  --brand-color-text-on-disabled-dark: var(--color-neutral-200);
  --brand-color-text-on-brand: var(--color-neutral-000);
  --brand-color-text-on-brand-dark: var(--color-neutral-000);
  --brand-color-text-on-danger: var(--color-neutral-000);
  --brand-color-text-on-danger-dark: var(--color-neutral-000);
  --brand-color-text-on-success: var(--color-neutral-000);
  --brand-color-text-on-success-dark: var(--color-neutral-000);
  --brand-color-text-on-active: var(--color-neutral-000);
  --brand-color-text-on-active-dark: var(--color-neutral-000);
  --brand-color-fill-surface: var(--color-neutral-000);
  --brand-color-fill-surface-dark: var(--color-neutral-1000);
  --brand-color-fill-disabled: var(--color-neutral-300);
  --brand-color-fill-disabled-dark: var(--color-neutral-700);
  --brand-color-border-default: var(--color-neutral-800);
  --brand-color-border-default-dark: var(--color-neutral-200);
  --brand-color-border-strong: var(--color-neutral-1000);
  --brand-color-border-strong-dark: var(--color-neutral-000);
  --brand-color-border-disabled: var(--color-neutral-500);
  --brand-color-border-disabled-dark: var(--color-neutral-400);
  --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);
  --brand-corner-container: var(--size-radius-200);
  --brand-corner-tooltip: var(--size-radius-100);
  --brand-size-spacing-tight: var(--size-spacing-100);
  --brand-size-spacing-component: var(--size-spacing-200);
  --brand-size-spacing-comfortable: var(--size-spacing-300);
  --brand-size-spacing-spacious: var(--size-spacing-400);
  --brand-size-border-none: var(--size-border-000);
  --brand-size-border-default: var(--size-border-100);
  --brand-size-border-thick: var(--size-border-200);
}
/* Auto-generated design tokens from Figma */
/* Generated on 2026-08-24T14:22:39.289Z */

: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-color-text-default: var(--color-neutral-800);
  --brand-color-text-default-dark: var(--color-neutral-200);
  --brand-color-text-strong: var(--color-neutral-1000);
  --brand-color-text-strong-dark: var(--color-neutral-000);
  --brand-color-text-disabled: var(--color-neutral-600);
  --brand-color-text-disabled-dark: var(--color-neutral-400);
  --brand-color-text-on-disabled: var(--color-neutral-800);
  --brand-color-text-on-disabled-dark: var(--color-neutral-200);
  --brand-color-text-on-brand: var(--color-neutral-000);
  --brand-color-text-on-brand-dark: var(--color-neutral-000);
  --brand-color-text-on-danger: var(--color-neutral-000);
  --brand-color-text-on-danger-dark: var(--color-neutral-000);
  --brand-color-text-on-success: var(--color-neutral-000);
  --brand-color-text-on-success-dark: var(--color-neutral-000);
  --brand-color-text-on-active: var(--color-neutral-000);
  --brand-color-text-on-active-dark: var(--color-neutral-000);
  --brand-color-fill-surface: var(--color-neutral-000);
  --brand-color-fill-surface-dark: var(--color-neutral-1000);
  --brand-color-fill-disabled: var(--color-neutral-300);
  --brand-color-fill-disabled-dark: var(--color-neutral-700);
  --brand-color-border-default: var(--color-neutral-800);
  --brand-color-border-default-dark: var(--color-neutral-200);
  --brand-color-border-strong: var(--color-neutral-1000);
  --brand-color-border-strong-dark: var(--color-neutral-000);
  --brand-color-border-disabled: var(--color-neutral-500);
  --brand-color-border-disabled-dark: var(--color-neutral-400);
  --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);
  --brand-corner-container: var(--size-radius-100);
  --brand-corner-tooltip: var(--size-radius-100);
  --brand-size-spacing-tight: var(--size-spacing-100);
  --brand-size-spacing-component: var(--size-spacing-200);
  --brand-size-spacing-comfortable: var(--size-spacing-300);
  --brand-size-spacing-spacious: var(--size-spacing-400);
  --brand-size-border-none: var(--size-border-000);
  --brand-size-border-default: var(--size-border-100);
  --brand-size-border-thick: var(--size-border-200);
}
/* Auto-generated design tokens from Figma */
/* Generated on 2026-08-24T14:22:39.290Z */

: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-color-text-default: var(--color-neutral-800);
  --brand-color-text-default-dark: var(--color-neutral-200);
  --brand-color-text-strong: var(--color-neutral-1000);
  --brand-color-text-strong-dark: var(--color-neutral-000);
  --brand-color-text-disabled: var(--color-neutral-600);
  --brand-color-text-disabled-dark: var(--color-neutral-400);
  --brand-color-text-on-disabled: var(--color-neutral-800);
  --brand-color-text-on-disabled-dark: var(--color-neutral-200);
  --brand-color-text-on-brand: var(--color-neutral-000);
  --brand-color-text-on-brand-dark: var(--color-neutral-000);
  --brand-color-text-on-danger: var(--color-neutral-000);
  --brand-color-text-on-danger-dark: var(--color-neutral-000);
  --brand-color-text-on-success: var(--color-neutral-000);
  --brand-color-text-on-success-dark: var(--color-neutral-000);
  --brand-color-text-on-active: var(--color-neutral-000);
  --brand-color-text-on-active-dark: var(--color-neutral-000);
  --brand-color-fill-surface: var(--color-neutral-000);
  --brand-color-fill-surface-dark: var(--color-neutral-1000);
  --brand-color-fill-disabled: var(--color-neutral-300);
  --brand-color-fill-disabled-dark: var(--color-neutral-700);
  --brand-color-border-default: var(--color-neutral-800);
  --brand-color-border-default-dark: var(--color-neutral-200);
  --brand-color-border-strong: var(--color-neutral-1000);
  --brand-color-border-strong-dark: var(--color-neutral-000);
  --brand-color-border-disabled: var(--color-neutral-500);
  --brand-color-border-disabled-dark: var(--color-neutral-400);
  --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);
  --brand-corner-container: var(--size-radius-300);
  --brand-corner-tooltip: var(--size-radius-200);
  --brand-size-spacing-tight: var(--size-spacing-100);
  --brand-size-spacing-component: var(--size-spacing-200);
  --brand-size-spacing-comfortable: var(--size-spacing-300);
  --brand-size-spacing-spacious: var(--size-spacing-400);
  --brand-size-border-none: var(--size-border-000);
  --brand-size-border-default: var(--size-border-100);
  --brand-size-border-thick: var(--size-border-200);
}
/* Auto-generated design tokens from Figma */
/* Generated on 2026-08-24T14:22:39.279Z */

:root {
  --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);
  --uif-button-border-size-hover: var(--brand-size-border-default);
  --uif-button-border-size-default: var(--brand-size-border-default);
  --uif-button-border-radius: var(--brand-corner-button);
  --uif-button-border-color-disabled: var(--color-border-disabled);
  --uif-button-border-size-active: var(--brand-size-border-thick);
  --uif-button-solid-border-color-default: var(--color-border-brand);
  --uif-button-solid-border-color-hover: var(--color-border-brand);
  --uif-button-solid-border-color-active: var(--color-border-brand);
  --uif-button-solid-border-color-focus: var(--color-border-brand);
  --uif-button-solid-text-color-default: var(--color-text-on-brand);
  --uif-button-solid-container-background-default: var(--color-fill-brand);
  --uif-button-solid-container-background-hover: var(--color-fill-brand);
  --uif-button-solid-container-background-active: var(--color-fill-brand);
  --uif-button-solid-container-background-focus: var(--color-fill-brand);
  --uif-button-solid-text-color-hover: var(--color-text-on-brand);
  --uif-button-solid-text-color-active: var(--color-text-on-brand);
  --uif-button-outline-border-color-default: var(--color-border-brand);
  --uif-button-outline-border-color-hover: var(--color-border-brand);
  --uif-button-outline-border-color-active: var(--color-border-brand);
  --uif-button-outline-border-color-focus: var(--color-border-brand);
  --uif-button-outline-text-color-default: var(--color-text-brand);
  --uif-button-outline-container-background-default: var(--color-fill-surface);
  --uif-button-outline-container-background-active: var(--color-fill-surface);
  --uif-button-outline-container-background-hover: var(--color-fill-surface);
  --uif-button-outline-container-background-focus: var(--color-fill-surface);
  --uif-button-outline-text-color-hover: var(--color-text-brand);
  --uif-button-outline-text-color-active: var(--color-text-brand);
  --uif-button-ghost-container-background-default: var(--color-fill-surface);
  --uif-button-ghost-container-background-hover: var(--color-fill-surface);
  --uif-button-ghost-container-background-focus: var(--color-fill-surface);
  --uif-button-ghost-container-background-active: var(--color-fill-surface);
  --uif-button-ghost-border-color-default: var(--color-transparent);
  --uif-button-ghost-border-color-hover: var(--color-transparent);
  --uif-button-ghost-border-color-focus: var(--color-transparent);
  --uif-button-ghost-border-color-active: var(--color-transparent);
  --uif-button-ghost-text-color-default: var(--color-text-brand);
  --uif-button-ghost-text-color-hover: var(--color-text-brand);
  --uif-button-ghost-text-color-active: var(--color-text-brand);
  --uif-button-font-family: var(--brand-font-lead);
  --uif-button-line-height: var(--typography-label-line-height);
  --uif-button-font-weight: var(--typography-label-font-weight);
  --uif-button-font-size: var(--typography-label-font-size);
  --uif-button-padding-inline: var(--brand-size-spacing-spacious);
  --uif-button-gap: var(--brand-size-spacing-component);
  --uif-button-padding-block: var(--brand-size-spacing-component);
  --uif-button-container-background-disabled: var(--color-fill-disabled);
  --uif-button-text-color-disabled: var(--color-text-disabled);
  --uif-button-overlay-hover: var(--color-overlay-hover);
  --uif-button-overlay-active: var(--color-overlay-active);
  --uif-button-padding-inline-icon-only: var(--brand-size-spacing-component);
  --uif-button-height-min: var(--size-target-default);
  --uif-button-group-gap: var(--brand-size-spacing-component);
  --uif-button-group-border-radius: var(--uif-button-border-radius);
  --uif-button-width-min: var(--size-target-default);
  --uif-modal-backdrop-color: var(--color-overlay-backdrop);
  --uif-modal-surface-color: var(--color-fill-surface);
  --uif-modal-surface-border-radius: var(--brand-corner-modal);
  --uif-input-text-color-default: var(--color-text-default);
  --uif-input-text-color-hover: var(--color-text-brand);
  --uif-input-text-color-active: var(--color-text-default);
  --uif-input-text-color-disabled: var(--color-text-disabled);
  --uif-input-text-color-placeholder: var(--color-text-subtle);
  --uif-input-border-color-default: var(--color-border-default);
  --uif-input-border-color-hover: var(--color-border-brand);
  --uif-input-border-color-active: var(--color-border-brand);
  --uif-input-border-color-focus: var(--color-border-brand);
  --uif-input-border-size-default: var(--brand-size-border-default);
  --uif-input-border-size-hover: var(--brand-size-border-default);
  --uif-input-border-size-active: var(--brand-size-border-thick);
  --uif-input-border-radius: var(--brand-corner-input);
  --uif-input-border-color-disabled: var(--color-border-disabled);
  --uif-input-border-color-invalid: var(--color-border-danger);
  --uif-input-border-color-valid: var(--color-border-strong);
  --uif-input-font-family: var(--brand-font-base);
  --uif-input-font-weight: var(--typography-body-font-weight);
  --uif-input-font-size: var(--typography-label-font-size);
  --uif-input-line-height: var(--typography-body-line-height);
  --uif-input-container-background-default: var(--color-fill-surface);
  --uif-input-container-background-hover: var(--color-fill-surface);
  --uif-input-container-background-focus: var(--color-fill-surface);
  --uif-input-container-background-active: var(--color-fill-surface);
  --uif-input-container-background-disabled: var(--color-fill-disabled);
  --uif-input-padding-inline: var(--brand-size-spacing-component);
  --uif-input-padding-inline-icon-only: var(--brand-size-spacing-component);
  --uif-input-padding-block: var(--brand-size-spacing-component);
  --uif-input-gap: var(--brand-size-spacing-component);
  --uif-input-overlay-hover: var(--color-transparent);
  --uif-input-overlay-active: var(--color-transparent);
  --uif-input-height: var(--size-target-default);
  --uif-input-height-min: var(--size-target-default);
  --uif-combobox-text-color-default: var(--color-text-default);
  --uif-combobox-text-color-hover: var(--color-text-brand);
  --uif-combobox-text-color-active: var(--color-text-default);
  --uif-combobox-text-color-disabled: var(--color-text-disabled);
  --uif-combobox-text-color-placeholder: var(--color-text-subtle);
  --uif-combobox-border-color-default: var(--color-border-default);
  --uif-combobox-border-color-hover: var(--color-border-brand);
  --uif-combobox-border-color-active: var(--color-border-brand);
  --uif-combobox-border-color-focus: var(--color-border-brand);
  --uif-combobox-border-color-disabled: var(--color-border-disabled);
  --uif-combobox-border-color-invalid: var(--color-border-danger);
  --uif-combobox-border-size-default: var(--brand-size-border-default);
  --uif-combobox-border-size-hover: var(--brand-size-border-default);
  --uif-combobox-border-size-active: var(--brand-size-border-thick);
  --uif-combobox-border-radius: var(--brand-corner-input);
  --uif-combobox-container-background-default: var(--color-fill-surface);
  --uif-combobox-container-background-hover: var(--color-fill-surface);
  --uif-combobox-container-background-focus: var(--color-fill-surface);
  --uif-combobox-container-background-active: var(--color-fill-surface);
  --uif-combobox-container-background-disabled: var(--color-fill-disabled);
  --uif-combobox-panel-background-default: var(--color-fill-surface);
  --uif-combobox-panel-border-color-default: var(--color-border-subtle);
  --uif-combobox-panel-border-size-default: var(--brand-size-border-default);
  --uif-combobox-panel-border-radius: var(--brand-corner-container);
  --uif-combobox-option-text-color-default: var(--color-text-default);
  --uif-combobox-option-text-color-hover: var(--color-text-brand);
  --uif-combobox-option-text-color-active: var(--color-text-default);
  --uif-combobox-option-text-color-disabled: var(--color-text-disabled);
  --uif-combobox-option-background-default: var(--color-transparent);
  --uif-combobox-option-background-hover: var(--color-fill-surface);
  --uif-combobox-option-background-active: var(--color-fill-surface);
  --uif-combobox-icon-color-default: var(--color-text-subtle);
  --uif-combobox-icon-color-disabled: var(--color-text-disabled);
  --uif-combobox-font-family: var(--brand-font-base);
  --uif-combobox-font-weight: var(--typography-body-font-weight);
  --uif-combobox-font-size: var(--typography-label-font-size);
  --uif-combobox-line-height: var(--typography-body-line-height);
  --uif-combobox-padding-inline: var(--brand-size-spacing-component);
  --uif-combobox-padding-block: var(--brand-size-spacing-component);
  --uif-combobox-gap: var(--brand-size-spacing-component);
  --uif-combobox-height: var(--size-target-default);
  --uif-form-group-gap: var(--brand-size-spacing-spacious);
  --uif-form-group-title-color: var(--color-text-default);
  --uif-form-padding-inline: var(--brand-size-spacing-spacious);
  --uif-form-padding-block: var(--brand-size-spacing-spacious);
  --uif-form-border-radius: var(--uif-input-border-radius);
  --uif-form-border-size: var(--brand-size-border-default);
  --uif-form-gap: var(--brand-size-spacing-spacious);
  --uif-form-field-gap: var(--brand-size-spacing-component);
  --uif-form-field-helper-text-color-default: var(--color-text-subtle);
  --uif-form-field-helper-text-color-invalid: var(--color-text-danger);
  --uif-form-container-background: var(--color-fill-surface);
  --uif-form-container-border-color: var(--color-border-subtle);
  --uif-checkbox-text-color-default: var(--color-text-default);
  --uif-checkbox-text-color-hover: var(--color-text-brand);
  --uif-checkbox-text-color-active: var(--color-text-on-brand);
  --uif-checkbox-text-color-disabled: var(--color-text-disabled);
  --uif-checkbox-border-color-default: var(--color-border-subtle);
  --uif-checkbox-border-color-hover: var(--color-border-brand);
  --uif-checkbox-border-color-active: var(--color-border-brand);
  --uif-checkbox-border-color-focus: var(--color-border-brand);
  --uif-checkbox-border-color-invalid: var(--color-border-danger);
  --uif-checkbox-border-color-valid: var(--color-border-strong);
  --uif-checkbox-border-color-disabled: var(--color-border-disabled);
  --uif-checkbox-border-size-hover: var(--brand-size-border-thick);
  --uif-checkbox-border-size-disabled: var(--brand-size-border-none);
  --uif-checkbox-border-size-default: var(--brand-size-border-default);
  --uif-checkbox-container-background-default: var(--color-fill-surface);
  --uif-checkbox-container-background-hover: var(--color-fill-surface);
  --uif-checkbox-container-background-focus: var(--color-fill-surface);
  --uif-checkbox-container-background-active: var(--color-fill-brand);
  --uif-checkbox-container-background-disabled: var(--color-fill-disabled);
  --uif-radio-text-color-default: var(--color-text-default);
  --uif-radio-text-color-disabled: var(--color-text-disabled);
  --uif-radio-border-color-default: var(--color-border-subtle);
  --uif-radio-border-color-hover: var(--color-border-brand);
  --uif-radio-border-color-active: var(--color-border-brand);
  --uif-radio-border-color-disabled: var(--color-border-disabled);
  --uif-radio-border-size-default: var(--brand-size-border-default);
  --uif-radio-border-size-hover: var(--brand-size-border-thick);
  --uif-radio-border-size-disabled: var(--brand-size-border-none);
  --uif-radio-border-color-focus: var(--color-border-brand);
  --uif-radio-container-background-default: var(--color-fill-surface);
  --uif-radio-container-background-disabled: var(--color-fill-disabled);
  --uif-radio-container-background-hover: var(--color-fill-surface);
  --uif-badge-default-text-color: var(--color-text-default);
  --uif-badge-default-border-color: var(--color-transparent);
  --uif-badge-default-container-background: var(--color-fill-subtle);
  --uif-badge-brand-text-color: var(--color-text-on-brand);
  --uif-badge-brand-border-color: var(--color-transparent);
  --uif-badge-brand-container-background: var(--color-fill-brand);
  --uif-badge-success-text-color: var(--color-text-on-success);
  --uif-badge-success-border-color: var(--color-transparent);
  --uif-badge-success-container-background: var(--color-fill-success);
  --uif-badge-font-family: var(--brand-font-lead);
  --uif-badge-font-weight: var(--typography-label-font-weight);
  --uif-badge-border-size-default: var(--brand-size-border-default);
  --uif-badge-border-radius: var(--size-radius-full);
  --uif-badge-padding-inline-md: var(--brand-size-spacing-comfortable);
  --uif-badge-padding-inline-icon-only: var(--brand-size-spacing-component);
  --uif-badge-padding-block-md: var(--brand-size-spacing-tight);
  --uif-badge-gap: var(--brand-size-spacing-tight);
  --uif-badge-height-min: var(--size-target-default);
  --uif-badge-width-min: var(--size-target-default);
  --uif-badge-danger-container-background: var(--color-fill-danger);
  --uif-badge-danger-text-color: var(--color-text-on-danger);
  --uif-badge-danger-border-color: var(--color-transparent);
  --uif-badge-font-size-sm: .75rem;
  --uif-badge-font-size-md: .875rem;
  --uif-badge-line-height-sm: 1rem;
  --uif-badge-line-height-md: 1.25rem;
  --uif-badge-padding-inline-sm: .5rem;
  --uif-badge-padding-block-sm: .125rem;
  --uif-status-light-neutral-text-color: var(--color-text-default);
  --uif-status-light-neutral-indicator-background: var(--color-fill-surface);
  --uif-status-light-positive-text-color: var(--color-text-success);
  --uif-status-light-positive-indicator-background: var(--color-fill-success);
  --uif-status-light-negative-text-color: var(--color-text-danger);
  --uif-status-light-negative-indicator-background: var(--color-fill-danger);
  --uif-status-light-notice-text-color: var(--color-text-brand);
  --uif-status-light-notice-indicator-background: var(--color-fill-brand);
  --uif-status-light-info-text-color: var(--color-text-subtle);
  --uif-status-light-info-indicator-background: var(--color-fill-subtle);
  --uif-status-light-font-family: var(--brand-font-lead);
  --uif-status-light-font-weight: var(--typography-label-font-weight);
  --uif-status-light-font-size-md: .875rem;
  --uif-status-light-font-size-sm: .75rem;
  --uif-status-light-line-height-md: 1.25rem;
  --uif-status-light-line-height-sm: 1rem;
  --uif-status-light-gap-md: var(--brand-size-spacing-tight);
  --uif-status-light-gap-sm: var(--brand-size-spacing-tight);
  --uif-status-light-indicator-size-md: .625rem;
  --uif-status-light-indicator-size-sm: .5rem;
  --uif-switch-track-background-default: var(--color-fill-surface);
  --uif-switch-track-background-hover: var(--color-fill-surface);
  --uif-switch-track-background-active: var(--color-fill-brand);
  --uif-switch-track-background-disabled: var(--color-fill-disabled);
  --uif-switch-track-border-color-default: var(--color-border-default);
  --uif-switch-track-border-color-hover: var(--color-border-brand);
  --uif-switch-track-border-color-active: var(--color-border-brand);
  --uif-switch-track-border-color-disabled: var(--color-border-disabled);
  --uif-switch-thumb-background-default: var(--color-border-default);
  --uif-switch-thumb-background-hover: var(--color-border-brand);
  --uif-switch-thumb-background-active: var(--color-fill-surface);
  --uif-switch-thumb-background-disabled: var(--color-fill-surface);
  --uif-switch-text-color-default: var(--color-text-default);
  --uif-switch-text-color-disabled: var(--color-text-disabled);
  --uif-range-slider-text-color-default: var(--color-text-default);
  --uif-range-slider-text-color-disabled: var(--color-text-disabled);
  --uif-range-slider-track-background-default: var(--color-fill-subtle);
  --uif-range-slider-track-background-active: var(--color-fill-brand);
  --uif-range-slider-track-background-disabled: var(--color-fill-disabled);
  --uif-range-slider-track-size: var(--size-spacing-200);
  --uif-range-slider-track-border-radius: var(--size-radius-full);
  --uif-range-slider-thumb-background-default: var(--color-fill-surface);
  --uif-range-slider-thumb-background-disabled: var(--color-fill-disabled);
  --uif-range-slider-thumb-border-color-default: var(--color-border-default);
  --uif-range-slider-thumb-border-color-focus: var(--color-border-brand);
  --uif-range-slider-thumb-border-color-disabled: var(--color-border-disabled);
  --uif-range-slider-thumb-border-size: var(--brand-size-border-default);
  --uif-range-slider-thumb-size: var(--brand-size-spacing-component);
  --uif-range-slider-gap: var(--brand-size-spacing-comfortable);
  --uif-range-slider-value-gap: var(--brand-size-spacing-tight);
  --uif-select-text-color-default: var(--color-text-default);
  --uif-select-text-color-hover: var(--color-text-brand);
  --uif-select-text-color-active: var(--color-text-default);
  --uif-select-text-color-disabled: var(--color-text-disabled);
  --uif-select-text-color-placeholder: var(--color-text-subtle);
  --uif-select-border-color-default: var(--color-border-default);
  --uif-select-border-color-hover: var(--color-border-brand);
  --uif-select-border-color-active: var(--color-border-brand);
  --uif-select-border-color-focus: var(--color-border-brand);
  --uif-select-border-color-disabled: var(--color-border-disabled);
  --uif-select-border-color-invalid: var(--color-border-danger);
  --uif-select-border-size-default: var(--brand-size-border-default);
  --uif-select-border-size-hover: var(--brand-size-border-default);
  --uif-select-border-size-active: var(--brand-size-border-thick);
  --uif-select-border-radius: var(--brand-corner-input);
  --uif-select-container-background-default: var(--color-fill-surface);
  --uif-select-container-background-hover: var(--color-fill-surface);
  --uif-select-container-background-focus: var(--color-fill-surface);
  --uif-select-container-background-active: var(--color-fill-surface);
  --uif-select-container-background-disabled: var(--color-fill-disabled);
  --uif-select-font-family: var(--brand-font-base);
  --uif-select-font-weight: var(--typography-body-font-weight);
  --uif-select-font-size: var(--typography-label-font-size);
  --uif-select-line-height: var(--typography-body-line-height);
  --uif-select-padding-inline: var(--brand-size-spacing-component);
  --uif-select-padding-block: var(--brand-size-spacing-component);
  --uif-select-overlay-hover: var(--color-transparent);
  --uif-select-overlay-active: var(--color-transparent);
  --uif-select-icon-color-default: var(--color-text-subtle);
  --uif-select-icon-color-disabled: var(--color-text-disabled);
  --uif-select-height: var(--size-target-default);
  --uif-link-text-color-default: var(--color-text-brand);
  --uif-link-text-color-hover: var(--color-text-strong);
  --uif-link-text-color-active: var(--color-text-strong);
  --uif-link-text-color-visited: var(--color-text-subtle);
  --uif-link-text-color-disabled: var(--color-text-disabled);
  --uif-link-text-decoration-default: underline;
  --uif-link-text-decoration-hover: underline;
  --uif-link-font-family: var(--brand-font-base);
  --uif-link-font-weight: var(--typography-body-font-weight);
  --uif-link-gap: var(--brand-size-spacing-tight);
  --uif-link-font-size: inherit;
  --uif-link-line-height: inherit;
  --uif-breadcrumbs-text-color-default: var(--color-text-default);
  --uif-breadcrumbs-text-color-hover: var(--color-text-brand);
  --uif-breadcrumbs-text-color-active: var(--color-text-strong);
  --uif-breadcrumbs-text-color-current: var(--color-text-strong);
  --uif-breadcrumbs-text-color-disabled: var(--color-text-disabled);
  --uif-breadcrumbs-separator-color: var(--color-border-subtle);
  --uif-breadcrumbs-separator-gap: var(--brand-size-spacing-tight);
  --uif-breadcrumbs-font-family: var(--brand-font-base);
  --uif-breadcrumbs-font-weight: var(--typography-body-font-weight);
  --uif-breadcrumbs-font-size: inherit;
  --uif-breadcrumbs-line-height: inherit;
  --uif-breadcrumbs-label-max-inline-size: 18ch;
  --uif-breadcrumbs-gap: var(--brand-size-spacing-tight);
  --uif-textarea-text-color-default: var(--color-text-default);
  --uif-textarea-text-color-disabled: var(--color-text-disabled);
  --uif-textarea-text-color-placeholder: var(--color-text-disabled);
  --uif-textarea-border-color-default: var(--color-border-default);
  --uif-textarea-border-color-hover: var(--color-border-strong);
  --uif-textarea-border-color-focus: var(--color-border-brand);
  --uif-textarea-border-color-disabled: var(--color-border-disabled);
  --uif-textarea-border-size-default: var(--brand-size-border-default);
  --uif-textarea-border-radius: var(--brand-corner-input);
  --uif-textarea-container-background-default: var(--color-fill-surface);
  --uif-textarea-container-background-disabled: var(--color-fill-disabled);
  --uif-textarea-font-family: var(--brand-font-base);
  --uif-textarea-font-size: var(--typography-body-font-size);
  --uif-textarea-line-height: var(--typography-body-line-height);
  --uif-textarea-padding-inline: var(--brand-size-spacing-comfortable);
  --uif-textarea-padding-block: var(--brand-size-spacing-comfortable);
  --uif-accordion-border-color-default: var(--color-border-default);
  --uif-accordion-border-size-default: var(--brand-size-border-default);
  --uif-accordion-border-radius: var(--brand-corner-container);
  --uif-accordion-text-color-default: var(--color-text-default);
  --uif-accordion-text-color-disabled: var(--color-text-disabled);
  --uif-accordion-padding-inline: var(--brand-size-spacing-spacious);
  --uif-accordion-padding-block: var(--brand-size-spacing-comfortable);
  --uif-accordion-gap: var(--brand-size-spacing-component);
  --uif-tabs-border-color-default: var(--color-border-default);
  --uif-tabs-border-color-active: var(--color-border-brand);
  --uif-tabs-border-color-hover: var(--color-border-subtle);
  --uif-tabs-text-color-default: var(--color-text-default);
  --uif-tabs-text-color-active: var(--color-text-brand);
  --uif-tabs-text-color-hover: var(--color-text-brand);
  --uif-tabs-text-color-disabled: var(--color-text-disabled);
  --uif-tabs-padding-inline: var(--brand-size-spacing-spacious);
  --uif-tabs-padding-block: var(--brand-size-spacing-comfortable);
  --uif-tree-view-border-color-default: var(--color-border-default);
  --uif-tree-view-border-size-default: var(--brand-size-border-default);
  --uif-tree-view-border-radius: var(--brand-corner-container);
  --uif-tree-view-background-color-default: var(--color-fill-surface);
  --uif-tree-view-text-color-default: var(--color-text-default);
  --uif-tree-view-text-color-selected: var(--color-text-brand);
  --uif-tree-view-text-color-disabled: var(--color-text-disabled);
  --uif-tree-view-row-background-hover: var(--color-fill-subtle);
  --uif-tree-view-row-background-selected: var(--color-fill-brand);
  --uif-tree-view-focus-ring-color: var(--color-border-brand);
  --uif-tree-view-padding-inline: var(--brand-size-spacing-comfortable);
  --uif-tree-view-padding-block: var(--brand-size-spacing-comfortable);
  --uif-tree-view-indent: var(--brand-size-spacing-spacious);
  --uif-tree-view-gap: var(--brand-size-spacing-component);
  --uif-tooltip-text-color-default: var(--color-text-inverse);
  --uif-tooltip-container-background-default: var(--color-neutral-900);
  --uif-tooltip-border-radius: var(--brand-corner-tooltip);
  --uif-tooltip-padding-inline: var(--brand-size-spacing-comfortable);
  --uif-tooltip-padding-block: var(--brand-size-spacing-component);
  --uif-notification-container-background-default: var(--color-fill-surface);
  --uif-notification-container-border-color-default: var(--color-border-default);
  --uif-notification-text-color-default: var(--color-text-default);
  --uif-notification-accent-color-info: var(--color-fill-brand);
  --uif-notification-accent-color-success: var(--color-fill-success);
  --uif-notification-accent-color-warning: var(--color-fill-active);
  --uif-notification-accent-color-error: var(--color-fill-danger);
  --uif-notification-action-text-color-default: var(--color-text-brand);
  --uif-notification-action-text-color-hover: var(--color-text-strong);
  --uif-notification-dismiss-icon-color-default: var(--color-text-subtle);
  --uif-notification-dismiss-icon-color-hover: var(--color-text-default);
  --uif-avatar-container-background-default: var(--color-fill-subtle);
  --uif-avatar-text-color-default: var(--color-text-default);
  --uif-avatar-border-radius: var(--size-radius-full);
  --uif-illustrated-message-gap: var(--brand-size-spacing-component);
  --uif-illustrated-message-content-gap: var(--size-spacing-200);
  --uif-illustrated-message-heading-text-color: var(--color-text-default);
  --uif-illustrated-message-description-text-color: var(--color-text-subtle);
  --uif-illustrated-message-illustration-color: var(--color-text-subtle);
  --uif-illustrated-message-illustration-size: var(--font-size-xl);
  --uif-calendar-container-padding: var(--brand-size-spacing-component);
  --uif-calendar-container-border-radius: var(--size-radius-900);
  --uif-calendar-container-border-color: var(--color-border-subtle);
  --uif-calendar-container-border-size: var(--brand-size-border-default);
  --uif-calendar-container-background: var(--color-fill-surface);
  --uif-calendar-container-gap: var(--brand-size-spacing-component);
  --uif-calendar-cell-gap: var(--size-spacing-050);
  --uif-calendar-cell-min-size: var(--size-target-default);
  --uif-calendar-cell-border-radius: var(--size-radius-full);
  --uif-calendar-cell-text-color-default: var(--color-text-default);
  --uif-calendar-cell-text-color-active: var(--color-text-on-active);
  --uif-calendar-cell-text-color-disabled: var(--color-text-disabled);
  --uif-calendar-cell-background-active: var(--color-fill-active);
  --uif-calendar-cell-background-hover: var(--color-overlay-hover);
  --uif-calendar-cell-range-border-color: var(--color-border-brand);
  --uif-calendar-cell-range-border-size: var(--brand-size-border-default);
  --uif-calendar-cell-range-border-radius: var(--size-radius-full);
  --uif-calendar-weekday-text-color: var(--color-text-subtle);
  --uif-calendar-weekday-font-size: var(--font-size-xs);
  --uif-calendar-weekday-height: 1.75rem;
  --uif-calendar-header-gap: var(--brand-size-spacing-component);
  --uif-table-header-background: var(--color-fill-surface);
  --uif-table-header-text-color: var(--color-text-default);
  --uif-table-header-border-color: var(--color-border-subtle);
  --uif-table-row-background: var(--color-fill-surface);
  --uif-table-row-background-hover: var(--color-fill-hover);
  --uif-table-row-background-selected: var(--color-overlay-selected);
  --uif-table-row-border-color: var(--color-border-subtle);
  --uif-table-row-text-color: var(--color-text-default);
  --uif-table-padding-block-default: var(--brand-size-spacing-component);
  --uif-table-padding-block-compact: var(--brand-size-spacing-tight);
  --uif-table-padding-block-spacious: var(--brand-size-spacing-comfortable);
  --uif-table-padding-inline-default: var(--brand-size-spacing-comfortable);
  --uif-table-padding-inline-compact: var(--brand-size-spacing-component);
  --uif-table-font-family: var(--brand-font-base);
  --uif-table-font-size: var(--typography-body-font-size);
  --uif-table-border-radius: var(--brand-corner-container);
  --uif-inline-alert-default-container-background: var(--color-fill-surface);
  --uif-inline-alert-default-border-color: var(--color-border-default);
  --uif-inline-alert-default-text-color: var(--color-text-default);
  --uif-inline-alert-info-container-background: var(--color-fill-subtle);
  --uif-inline-alert-info-border-color: var(--color-border-brand);
  --uif-inline-alert-info-text-color: var(--color-text-brand);
  --uif-inline-alert-positive-container-background: var(--color-fill-success);
  --uif-inline-alert-positive-border-color: var(--color-border-default);
  --uif-inline-alert-positive-text-color: var(--color-text-on-success);
  --uif-inline-alert-negative-container-background: var(--color-fill-danger);
  --uif-inline-alert-negative-border-color: var(--color-border-danger);
  --uif-inline-alert-negative-text-color: var(--color-text-on-danger);
  --uif-inline-alert-notice-container-background: var(--color-fill-active);
  --uif-inline-alert-notice-border-color: var(--color-border-strong);
  --uif-inline-alert-notice-text-color: var(--color-text-on-active);
  --uif-inline-alert-border-size: var(--brand-size-border-default);
  --uif-inline-alert-border-radius: var(--brand-corner-container);
  --uif-inline-alert-padding-inline: var(--brand-size-spacing-comfortable);
  --uif-inline-alert-padding-block: var(--brand-size-spacing-comfortable);
  --uif-inline-alert-gap: var(--brand-size-spacing-component);
  --uif-card-container-background: var(--color-fill-surface);
  --uif-card-border-color-default: var(--color-border-default);
  --uif-card-border-color-selected: var(--color-border-brand);
  --uif-card-border-size-default: var(--brand-size-border-default);
  --uif-card-border-radius: var(--brand-corner-card);
  --uif-card-text-color-default: var(--color-text-default);
  --uif-card-text-color-subtle: var(--color-text-subtle);
  --uif-card-padding-block: var(--brand-size-spacing-comfortable);
  --uif-card-padding-inline: var(--brand-size-spacing-spacious);
  --uif-card-gap: var(--brand-size-spacing-component);
  --uif-card-interactive-background-hover: var(--color-fill-hover);
  --uif-card-interactive-background-active: var(--color-fill-active);
  --uif-skeleton-background: var(--color-fill-subtle);
  --uif-skeleton-background-highlight: var(--color-fill-hover);
  --uif-skeleton-border-radius: .25rem;
  --uif-skeleton-text-height: 1rem;
  --uif-skeleton-heading-height: 1.5rem;
  --uif-skeleton-circle-size: 2.5rem;
  --uif-skeleton-rect-height: 6rem;
  --uif-skeleton-animation-duration: 100rem;
  --uif-skeleton-group-gap: .5rem;
  --uif-action-bar-container-background: var(--color-neutral-900);
  --uif-action-bar-text-color: var(--color-text-inverse);
  --uif-action-bar-border-color: var(--color-border-default);
  --uif-action-bar-padding-inline: var(--brand-size-spacing-comfortable);
  --uif-action-bar-padding-block: var(--brand-size-spacing-component);
  --uif-dropzone-text-color-default: var(--color-text-default);
  --uif-dropzone-text-color-subtle: var(--color-text-subtle);
  --uif-dropzone-text-color-disabled: var(--color-text-disabled);
  --uif-dropzone-text-color-dragover: var(--color-text-brand);
  --uif-dropzone-border-color-default: var(--color-border-default);
  --uif-dropzone-border-color-dragover: var(--color-border-brand);
  --uif-dropzone-border-color-filled: var(--color-border-strong);
  --uif-dropzone-border-color-disabled: var(--color-border-disabled);
  --uif-dropzone-border-size-default: var(--brand-size-border-default);
  --uif-dropzone-border-radius: var(--brand-corner-input);
  --uif-dropzone-container-background-default: var(--color-fill-surface);
  --uif-dropzone-container-background-dragover: var(--color-fill-subtle);
  --uif-dropzone-container-background-filled: var(--color-fill-subtle);
  --uif-dropzone-container-background-disabled: var(--color-fill-disabled);
  --uif-dropzone-padding-inline: var(--brand-size-spacing-spacious);
  --uif-dropzone-padding-block: var(--brand-size-spacing-spacious);
  --uif-dropzone-gap: var(--brand-size-spacing-component);
  --uif-progress-circle-track-color: var(--color-border-subtle);
  --uif-progress-circle-indicator-color: var(--color-fill-brand);
  --uif-progress-circle-stroke-width: var(--brand-size-border-thick);
  --uif-progress-circle-size-sm: var(--size-spacing-600);
  --uif-progress-circle-size-md: var(--size-spacing-700);
  --uif-progress-circle-size-lg: var(--size-spacing-800);
  --uif-menu-border-color-default: var(--color-border-default);
  --uif-menu-border-size-default: var(--brand-size-border-default);
  --uif-menu-border-radius: var(--brand-corner-container);
  --uif-menu-container-background-default: var(--color-fill-surface);
  --uif-menu-text-color-default: var(--color-text-default);
  --uif-menu-text-color-disabled: var(--color-text-disabled);
  --uif-menu-item-padding-inline: var(--brand-size-spacing-comfortable);
  --uif-menu-item-padding-block: var(--brand-size-spacing-component);
  --uif-menu-item-gap: var(--brand-size-spacing-component);
  --uif-menu-item-background-hover: var(--color-overlay-hover);
  --uif-menu-item-background-active: var(--color-fill-active);
  --uif-menu-item-border-radius: var(--brand-corner-container);
  --uif-menu-padding-block: var(--brand-size-spacing-component);
  --uif-popover-text-color-default: var(--color-text-default);
  --uif-popover-container-background-default: var(--color-fill-surface);
  --uif-popover-container-border-color-default: var(--color-border-default);
  --uif-popover-border-radius: var(--brand-corner-container);
  --uif-popover-padding-inline: var(--brand-size-spacing-comfortable);
  --uif-popover-padding-block: var(--brand-size-spacing-component);
  --uif-segmented-control-track-background: var(--color-fill-subtle);
  --uif-segmented-control-track-border-color: var(--color-border-default);
  --uif-segmented-control-text-color-default: var(--color-text-default);
  --uif-segmented-control-text-color-active: var(--color-text-brand);
  --uif-segmented-control-text-color-hover: var(--color-text-brand);
  --uif-segmented-control-text-color-disabled: var(--color-text-disabled);
  --uif-segmented-control-indicator-background: var(--color-fill-surface);
  --uif-segmented-control-indicator-border-color: var(--color-border-default);
  --uif-segmented-control-padding-inline: var(--brand-size-spacing-spacious);
  --uif-segmented-control-padding-block: var(--brand-size-spacing-component);
  --uif-color-picker-gap: var(--brand-size-spacing-component);
  --uif-color-picker-panel-background: var(--color-fill-surface);
  --uif-color-picker-panel-border-color: var(--color-border-default);
  --uif-color-picker-panel-border-size: var(--brand-size-border-default);
  --uif-color-picker-panel-border-radius: var(--brand-corner-input);
  --uif-color-picker-control-height: var(--size-target-default);
  --uif-color-picker-slider-height: var(--brand-size-border-thick);
  --uif-color-picker-slider-thumb-size: var(--size-target-default);
  --uif-color-picker-swatch-size: var(--size-target-default);
  --uif-color-picker-swatch-border-radius: var(--brand-corner-input);
  --uif-color-picker-swatch-border-color: var(--color-border-subtle);
  --uif-color-picker-text-color-default: var(--color-text-default);
  --uif-color-picker-text-color-subtle: var(--color-text-subtle);
  --uif-color-picker-focus-ring-color: var(--color-border-brand);
  --uif-color-picker-focus-ring-size: var(--brand-size-border-default);
  --uif-color-picker-accent-color: var(--color-fill-brand);
  --uif-search-field-text-color-default: var(--color-text-default);
  --uif-search-field-text-color-hover: var(--color-text-brand);
  --uif-search-field-text-color-active: var(--color-text-default);
  --uif-search-field-text-color-disabled: var(--color-text-disabled);
  --uif-search-field-text-color-placeholder: var(--color-text-subtle);
  --uif-search-field-border-color-default: var(--color-border-default);
  --uif-search-field-border-color-hover: var(--color-border-brand);
  --uif-search-field-border-color-active: var(--color-border-brand);
  --uif-search-field-border-color-focus: var(--color-border-brand);
  --uif-search-field-border-color-disabled: var(--color-border-disabled);
  --uif-search-field-border-size-default: var(--brand-size-border-default);
  --uif-search-field-border-size-hover: var(--brand-size-border-default);
  --uif-search-field-border-size-active: var(--brand-size-border-thick);
  --uif-search-field-border-radius: var(--brand-corner-input);
  --uif-search-field-font-family: var(--brand-font-base);
  --uif-search-field-font-weight: var(--typography-body-font-weight);
  --uif-search-field-font-size: var(--typography-label-font-size);
  --uif-search-field-line-height: var(--typography-body-line-height);
  --uif-search-field-container-background-default: var(--color-fill-surface);
  --uif-search-field-container-background-focus: var(--color-fill-surface);
  --uif-search-field-container-background-disabled: var(--color-fill-disabled);
  --uif-search-field-padding-inline: var(--brand-size-spacing-component);
  --uif-search-field-padding-block: var(--brand-size-spacing-component);
  --uif-search-field-gap: var(--brand-size-spacing-component);
  --uif-search-field-overlay-hover: var(--color-transparent);
  --uif-search-field-overlay-active: var(--color-transparent);
  --uif-search-field-height: var(--size-target-default);
  --uif-search-field-quiet-container-background-default: var(--color-transparent);
  --uif-search-field-quiet-container-background-focus: var(--color-fill-surface);
  --uif-search-field-quiet-border-color-default: var(--color-transparent);
  --uif-search-field-quiet-border-color-focus: var(--color-border-brand);
  --uif-meter-label-color-default: var(--color-text-subtle);
  --uif-meter-value-color-default: var(--color-text-default);
  --uif-meter-track-background-default: var(--color-fill-subtle);
  --uif-meter-track-height-md: .5rem;
  --uif-meter-track-height-sm: .375rem;
  --uif-meter-fill-background-default: var(--color-fill-brand);
  --uif-meter-fill-background-positive: var(--color-fill-success);
  --uif-meter-fill-background-notice: var(--color-fill-active);
  --uif-meter-fill-background-negative: var(--color-fill-danger);
  --uif-meter-font-family: var(--brand-font-lead);
  --uif-meter-font-weight: var(--typography-label-font-weight);
  --uif-meter-font-size-sm: .75rem;
  --uif-meter-font-size-md: .875rem;
  --uif-meter-line-height-sm: 1rem;
  --uif-meter-line-height-md: 1.25rem;
  --uif-meter-gap: var(--brand-size-spacing-tight);
  --uif-meter-border-radius: var(--size-radius-full);
  --uif-progress-bar-track-background: var(--color-fill-subtle);
  --uif-progress-bar-fill-default: var(--color-fill-brand);
  --uif-progress-bar-fill-positive: var(--color-fill-success);
  --uif-progress-bar-fill-negative: var(--color-fill-danger);
  --uif-progress-bar-label-color: var(--color-text-default);
  --uif-progress-bar-border-radius: var(--size-radius-full);
  --uif-progress-bar-height-sm: .25rem;
  --uif-progress-bar-height-md: .5rem;
  --uif-progress-bar-height-lg: .75rem;
  --uif-progress-bar-gap: var(--size-spacing-200);
  --uif-tag-default-text-color: var(--color-text-default);
  --uif-tag-default-border-color: var(--color-transparent);
  --uif-tag-default-container-background: var(--color-fill-subtle);
  --uif-tag-selected-text-color: var(--color-text-on-active);
  --uif-tag-selected-border-color: var(--color-transparent);
  --uif-tag-selected-container-background: var(--color-fill-active);
  --uif-tag-font-size-sm: .75rem;
  --uif-tag-font-size-md: .875rem;
  --uif-tag-line-height-sm: 1rem;
  --uif-tag-line-height-md: 1.25rem;
  --uif-tag-padding-inline-sm: .5rem;
  --uif-tag-padding-inline-md: .75rem;
  --uif-tag-padding-block-sm: .125rem;
  --uif-tag-padding-block-md: .25rem;
  --uif-tag-border-size-default: .0625rem;
  --uif-tag-font-family: var(--brand-font-lead);
  --uif-tag-font-weight: var(--typography-label-font-weight);
  --uif-tag-border-radius: var(--size-radius-full);
  --uif-tag-gap: var(--brand-size-spacing-tight);
  --uif-tag-group-gap: var(--brand-size-spacing-component);
  --uif-tag-remove-size-md: 1rem;
  --uif-tag-remove-size-sm: .875rem;
}
@layer context {
  :root {
    color-scheme: light dark;
  }
}

@layer components {
  /*
   * Unprefixed Label-family classes are deprecated v1.x compatibility selectors.
   * UIF-owned emitters use canonical `.uif-*` names; remove aliases no earlier than v2.0.
   */
  :is(.uif-label-content, .label-content) {
    display: inline-flex;
    align-items: center;
    gap: var(--typography-label-gap, 0.5em);
    line-height: inherit;
  }

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

  :is(.uif-label-content-text, .label-content-text) {
    line-height: inherit;
  }

  :is(.uif-label-content, .label-content).is-icon-only {
    gap: 0;
  }

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

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

  :is(.uif-field-label-required-text, .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` is a deprecated v1.x compatibility selector.
   * UIF-owned emitters use `.uif-button`; remove the alias no earlier than v2.0.
   */

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

  :is(.uif-button, .button) :is(.uif-label-content, .label-content) {
    line-height: inherit;
    color: inherit;
    -webkit-text-fill-color: currentColor;
  }

  :is(.uif-button, .button) :is(.uif-label-content-text, .label-content-text),
  :is(.uif-button, .button) :is(.uif-icon, .icon) {
    color: inherit;
    -webkit-text-fill-color: currentColor;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

  /*
   * `.button-group` is a deprecated v1.x compatibility selector.
   * UIF-owned emitters use `.uif-button-group`; remove the alias no earlier than v2.0.
   */

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

  :is(.uif-button-group, .button-group)[data-orientation="vertical"] {
    flex-direction: column;
  }

  :is(.uif-button-group, .button-group)[data-justify="stretch"] {
    inline-size: 100%;
  }

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

  :is(.uif-button-group, .button-group)[data-attached="true"] {
    gap: 0;
  }

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

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

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

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

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

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

  :is(.uif-button-group, .button-group)[data-attached="true"][data-orientation="vertical"]
    > :is(.uif-button, .button):last-child {
    border-end-start-radius: var(
      --uif-button-group-border-radius,
      var(--uif-button-border-radius)
    );
    border-end-end-radius: var(
      --uif-button-group-border-radius,
      var(--uif-button-border-radius)
    );
  }
}
@layer components {
  /* --- Input primitive (the <input> element itself) --- */
  /* Unprefixed Input classes are deprecated v1.x compatibility selectors. */

  :is(.uif-input, .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;
  }

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

  :is(.uif-input, .input):focus-visible {
    outline: 2px solid transparent;
    box-shadow: none;
  }

  :is(.uif-input, .input):disabled {
    cursor: not-allowed;
  }

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

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

  :is(.uif-input, .input)[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
  }

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

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

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

  :is(.uif-input-field-control, .input-field-control) {
    display: flex;
    align-items: center;
    gap: var(--uif-input-gap);
    flex-shrink: 0;
    color: var(--uif-input-text-color-default);
  }

  :is(.uif-input-field-control, .input-field-control):empty {
    display: none;
  }

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

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

  :is(.uif-input-field-control, .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;
  }

  :is(.uif-input-field-control, .input-field-control) button:hover {
    color: var(--uif-input-text-color-hover);
  }

  :is(.uif-input-field-control, .input-field-control) :is(.uif-icon, .icon) {
    font-size: 1.5rem;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

  :is(.uif-input-field, .input-field).is-invalid:focus-within,
  :is(.uif-input-field, .input-field):has(:is(.uif-input, .input)[aria-invalid="true"]):focus-within,
  :is(.uif-input-field, .input-field).is-invalid.is-focus-visible,
  :is(.uif-input-field, .input-field):has(:is(.uif-input, .input)[aria-invalid="true"]).is-focus-visible {
    border-color: var(--uif-input-border-color-invalid);
    box-shadow: 0 0 var(--shadow-focus, 0) 0 var(--uif-input-border-color-invalid);
  }
}
@layer components {
  :is(.uif-combobox, .combobox) {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--uif-combobox-gap);
    inline-size: 100%;
    font-family: var(--uif-combobox-font-family);
    font-weight: var(--uif-combobox-font-weight);
    font-size: var(--uif-combobox-font-size);
    line-height: var(--uif-combobox-line-height, var(--typography-body-line-height));
  }

  :is(.uif-combobox-field, .combobox-field) {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--uif-combobox-gap);
    inline-size: 100%;
    block-size: var(--uif-combobox-height, var(--size-spacing-800));
    color: var(--uif-combobox-text-color-default);
    background: var(--uif-combobox-container-background-default);
    border-style: solid;
    border-width: var(--uif-combobox-border-size-default);
    border-color: var(--uif-combobox-border-color-default);
    border-radius: var(--uif-combobox-border-radius);
    padding-inline: var(--uif-combobox-padding-inline);
    padding-block: var(--uif-combobox-padding-block);
  }

  :is(.uif-combobox-input, .combobox-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;
  }

  :is(.uif-combobox-input, .combobox-input)::placeholder {
    color: var(--uif-combobox-text-color-placeholder);
  }

  :is(.uif-combobox-input, .combobox-input):focus-visible {
    outline: 2px solid transparent;
    box-shadow: none;
  }

  :is(.uif-combobox-input, .combobox-input):disabled {
    cursor: not-allowed;
  }

  :is(.uif-combobox-control, .combobox-control) {
    display: flex;
    align-items: center;
    gap: var(--uif-combobox-gap);
    flex-shrink: 0;
    color: var(--uif-combobox-icon-color-default);
  }

  :is(.uif-combobox-control, .combobox-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;
  }

  :is(.uif-combobox-control, .combobox-control) button:disabled {
    cursor: not-allowed;
  }

  :is(.uif-combobox-control, .combobox-control) :is(.uif-icon, .icon) {
    font-size: var(--uif-combobox-font-size);
  }

  :is(.uif-combobox, .combobox)[data-open="true"]
    :is(.uif-combobox-control, .combobox-control)
    button[aria-label="Toggle suggestions"]
    :is(.uif-icon, .icon) {
    transform: rotate(180deg);
  }

  :is(.uif-combobox, .combobox)[data-loading="true"]
    :is(.uif-combobox-control, .combobox-control)
    [data-loading-indicator]
    :is(.uif-icon, .icon) {
    animation: uif-combobox-spin 1s linear infinite;
  }

  :is(.uif-combobox-listbox, .combobox-listbox) {
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(100% + var(--uif-combobox-gap));
    z-index: var(--zindex-dropdown, 1000);
    display: grid;
    gap: var(--size-spacing-050);
    max-block-size: calc(var(--uif-combobox-height) * 6);
    overflow: auto;
    padding: var(--size-spacing-050);
    margin: 0;
    list-style: none;
    background: var(--uif-combobox-panel-background-default);
    border: var(--uif-combobox-panel-border-size-default) solid var(--uif-combobox-panel-border-color-default);
    border-radius: var(--uif-combobox-panel-border-radius);
  }

  :is(.uif-combobox-listbox, .combobox-listbox)[hidden] {
    display: none;
  }

  :is(.uif-combobox-option, .combobox-option),
  :is(.uif-combobox-status, .combobox-status),
  :is(.uif-combobox-empty, .combobox-empty) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--size-spacing-050);
    inline-size: 100%;
    padding-inline: var(--uif-combobox-padding-inline);
    padding-block: var(--uif-combobox-padding-block);
    border: none;
    border-radius: calc(var(--uif-combobox-panel-border-radius) - var(--uif-combobox-panel-border-size-default));
    background: var(--uif-combobox-option-background-default);
    color: var(--uif-combobox-option-text-color-default);
    font: inherit;
    text-align: left;
  }

  :is(.uif-combobox-option, .combobox-option) {
    cursor: pointer;
  }

  :is(.uif-combobox-option, .combobox-option):hover,
  :is(.uif-combobox-option, .combobox-option).is-hover {
    background: var(--uif-combobox-option-background-hover);
    color: var(--uif-combobox-option-text-color-hover);
  }

  :is(.uif-combobox-option, .combobox-option)[aria-selected="true"],
  :is(.uif-combobox-option, .combobox-option).is-active {
    background: var(--uif-combobox-option-background-active);
    color: var(--uif-combobox-option-text-color-active);
    box-shadow: inset 0 0 0 var(--uif-combobox-border-size-active) var(--uif-combobox-border-color-focus);
  }

  :is(.uif-combobox-option, .combobox-option):disabled,
  :is(.uif-combobox-option, .combobox-option).is-disabled {
    cursor: not-allowed;
    color: var(--uif-combobox-option-text-color-disabled);
  }

  :is(.uif-combobox-option-label, .combobox-option-label) {
    display: block;
    font: inherit;
  }

  :is(.uif-combobox-option-meta, .combobox-option-meta) {
    display: block;
    color: var(--uif-combobox-text-color-placeholder);
    font-size: calc(var(--uif-combobox-font-size) * 0.875);
    line-height: inherit;
  }

  :is(.uif-combobox, .combobox):hover :is(.uif-combobox-field, .combobox-field),
  :is(.uif-combobox, .combobox).is-hover :is(.uif-combobox-field, .combobox-field) {
    background: var(--uif-combobox-container-background-hover);
    border-width: var(--uif-combobox-border-size-hover);
    border-color: var(--uif-combobox-border-color-hover);
    color: var(--uif-combobox-text-color-hover);
    padding-inline: calc(
      var(--uif-combobox-padding-inline) + var(--uif-combobox-border-size-default) -
        var(--uif-combobox-border-size-hover)
    );
    padding-block: calc(
      var(--uif-combobox-padding-block) + var(--uif-combobox-border-size-default) -
        var(--uif-combobox-border-size-hover)
    );
  }

  :is(.uif-combobox, .combobox):focus-within :is(.uif-combobox-field, .combobox-field),
  :is(.uif-combobox, .combobox).is-focus-visible :is(.uif-combobox-field, .combobox-field) {
    background: var(--uif-combobox-container-background-focus);
    border-color: var(--uif-combobox-border-color-focus);
    outline: 2px solid transparent;
    box-shadow: 0 0 var(--shadow-focus, 0) 0 var(--color-focus, transparent);
  }

  :is(.uif-combobox, .combobox).is-active :is(.uif-combobox-field, .combobox-field),
  :is(.uif-combobox, .combobox)[data-open="true"] :is(.uif-combobox-field, .combobox-field) {
    background: var(--uif-combobox-container-background-active);
    border-width: var(--uif-combobox-border-size-active);
    border-color: var(--uif-combobox-border-color-active);
    color: var(--uif-combobox-text-color-active);
    padding-inline: calc(
      var(--uif-combobox-padding-inline) + var(--uif-combobox-border-size-default) -
        var(--uif-combobox-border-size-active)
    );
    padding-block: calc(
      var(--uif-combobox-padding-block) + var(--uif-combobox-border-size-default) -
        var(--uif-combobox-border-size-active)
    );
  }

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

  :is(.uif-combobox, .combobox).is-disabled :is(.uif-combobox-control, .combobox-control) {
    color: var(--uif-combobox-icon-color-disabled);
  }

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

  :is(.uif-combobox-value, .combobox-value) {
    display: none;
  }

  @keyframes uif-combobox-spin {
    to {
      transform: rotate(360deg);
    }
  }
}
@layer components {
  /* Unprefixed Search Field classes are deprecated v1.x compatibility selectors. */

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

  :is(.uif-search-field, .search-field):is(.is-quiet, [data-variant="quiet"]) {
    background: var(--uif-search-field-quiet-container-background-default);
    border-color: var(--uif-search-field-quiet-border-color-default);
  }

  :is(.uif-search-field-input, .search-field-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;
  }

  :is(.uif-search-field-input, .search-field-input)::placeholder {
    color: var(--uif-search-field-text-color-placeholder);
  }

  :is(.uif-search-field-input, .search-field-input):focus-visible {
    outline: 2px solid transparent;
    box-shadow: none;
  }

  :is(.uif-search-field-input, .search-field-input):disabled {
    cursor: not-allowed;
  }

  :is(.uif-search-field-control, .search-field-control) {
    display: flex;
    align-items: center;
    gap: var(--uif-search-field-gap);
    flex-shrink: 0;
    color: var(--uif-search-field-text-color-default);
  }

  :is(.uif-search-field-control, .search-field-control)[data-slot="end"]:empty {
    display: none;
  }

  :is(.uif-search-field, .search-field):has(:is(.uif-search-field-input, .search-field-input):placeholder-shown)
    :is(.uif-search-field-control, .search-field-control)[data-slot="end"] {
    visibility: hidden;
  }

  :is(.uif-search-field, .search-field):has(:is(.uif-search-field-input, .search-field-input):disabled)
    :is(.uif-search-field-control, .search-field-control)[data-slot="end"],
  :is(.uif-search-field, .search-field).is-disabled
    :is(.uif-search-field-control, .search-field-control)[data-slot="end"] {
    visibility: hidden;
  }

  :is(.uif-search-field-control, .search-field-control)[data-slot="end"] 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;
  }

  :is(.uif-search-field-control, .search-field-control)[data-slot="end"] button:hover {
    color: var(--uif-search-field-text-color-hover);
  }

  :is(.uif-search-field-control, .search-field-control) :is(.uif-icon, .icon) {
    font-size: 1.5rem;
  }

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

  :is(.uif-search-field, .search-field):is(.is-quiet, [data-variant="quiet"]):hover,
  :is(.uif-search-field, .search-field):is(.is-quiet, [data-variant="quiet"]).is-hover {
    background: var(--uif-search-field-quiet-container-background-focus);
    border-color: var(--uif-search-field-quiet-border-color-focus);
  }

  :is(.uif-search-field, .search-field):focus-within,
  :is(.uif-search-field, .search-field).is-focus-visible {
    background: var(--uif-search-field-container-background-focus);
    border-color: var(--uif-search-field-border-color-focus);
    outline: 2px solid transparent;
    box-shadow: 0 0 var(--shadow-focus, 2px) 0
      var(--color-focus, var(--uif-search-field-border-color-focus));
  }

  :is(.uif-search-field, .search-field):is(.is-quiet, [data-variant="quiet"]):focus-within,
  :is(.uif-search-field, .search-field):is(.is-quiet, [data-variant="quiet"]).is-focus-visible {
    background: var(--uif-search-field-quiet-container-background-focus);
    border-color: var(--uif-search-field-quiet-border-color-focus);
  }

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

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

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

  :is(.uif-search-field, .search-field):has(:is(.uif-search-field-input, .search-field-input):read-only)
    :is(.uif-search-field-control, .search-field-control)[data-slot="end"] button,
  :is(.uif-search-field, .search-field).is-readonly
    :is(.uif-search-field-control, .search-field-control)[data-slot="end"] button {
    pointer-events: none;
    opacity: 0.4;
  }
}
@layer components {
  /*
   * `.icon` is a deprecated v1.x compatibility selector.
   * UIF-owned emitters use `.uif-icon`; remove the alias no earlier than v2.0.
   */
  :is(.uif-icon, .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(--uif-icon-src);
    mask-image: var(--uif-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 {
  :is(.uif-checkbox-field, .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(--uif-checkbox-text-color-default);
    cursor: pointer;
  }

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

  :is(.uif-checkbox, .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(--uif-checkbox-border-size-default);
    border-color: var(--uif-checkbox-border-color-default);
    border-radius: var(--brand-corner-input);
    background: var(--uif-checkbox-container-background-default);
    color: var(--uif-checkbox-text-color-active);
    cursor: pointer;
  }

  :is(.uif-checkbox, .checkbox)::after {
    content: "";
    display: block;
  }

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

  :is(.uif-checkbox, .checkbox):checked::after,
  :is(.uif-checkbox, .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;
  }

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

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

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

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

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

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

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

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

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

  :is(.uif-checkbox, .checkbox):disabled,
  :is(.uif-checkbox, .checkbox).is-disabled {
    border-width: var(--uif-checkbox-border-size-disabled);
    border-color: var(--uif-checkbox-border-color-disabled);
    background: var(--uif-checkbox-container-background-disabled);
    color: var(--uif-checkbox-text-color-disabled);
    cursor: not-allowed;
  }
}
@layer components {
  :is(.uif-radio-field, .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(--uif-radio-text-color-default);
    cursor: pointer;
  }

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

  :is(.uif-radio, .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(--uif-radio-border-size-default);
    border-color: var(--uif-radio-border-color-default);
    border-radius: var(--size-radius-full);
    background: var(--uif-radio-container-background-default);
    cursor: pointer;
  }

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

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

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

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

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

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

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

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

  :is(.uif-radio, .radio):disabled,
  :is(.uif-radio, .radio).is-disabled {
    border-width: var(--uif-radio-border-size-disabled);
    border-color: var(--uif-radio-border-color-disabled);
    background: var(--uif-radio-container-background-disabled);
    color: var(--uif-radio-text-color-disabled);
    cursor: not-allowed;
  }
}
@layer components {
  :is(.uif-progress-circle, .progress-circle) {
    --_progress-circle-size: var(--uif-progress-circle-size-md);
    display: inline-flex;
    inline-size: var(--_progress-circle-size);
    block-size: var(--_progress-circle-size);
    flex-shrink: 0;
  }

  :is(.uif-progress-circle, .progress-circle).sm {
    --_progress-circle-size: var(--uif-progress-circle-size-sm);
  }

  :is(.uif-progress-circle, .progress-circle).lg {
    --_progress-circle-size: var(--uif-progress-circle-size-lg);
  }

  :is(.uif-progress-circle, .progress-circle) > :is(.uif-progress-circle-svg, .progress-circle-svg) {
    inline-size: 100%;
    block-size: 100%;
    transform: rotate(-90deg);
    transform-origin: center;
  }

  :is(.uif-progress-circle-track, .progress-circle-track) {
    fill: none;
    stroke: var(--uif-progress-circle-track-color);
    stroke-width: var(--uif-progress-circle-stroke-width);
    vector-effect: non-scaling-stroke;
  }

  :is(.uif-progress-circle-indicator, .progress-circle-indicator) {
    fill: none;
    stroke: var(--uif-progress-circle-indicator-color);
    stroke-width: var(--uif-progress-circle-stroke-width);
    stroke-linecap: round;
    stroke-dasharray: var(--_progress-circle-value, 0) 100;
    vector-effect: non-scaling-stroke;
    transition: stroke-dasharray 0.2s ease;
  }

  :is(.uif-progress-circle, .progress-circle).is-indeterminate > :is(.uif-progress-circle-svg, .progress-circle-svg) {
    animation: uif-progress-circle-rotate 1.1s linear infinite;
  }

  :is(.uif-progress-circle, .progress-circle).is-indeterminate :is(.uif-progress-circle-indicator, .progress-circle-indicator) {
    stroke-dasharray: 24 76;
    animation: uif-progress-circle-dash 1.1s ease-in-out infinite;
  }

  @keyframes uif-progress-circle-rotate {
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes uif-progress-circle-dash {
    0% {
      stroke-dasharray: 10 90;
      stroke-dashoffset: 0;
    }

    50% {
      stroke-dasharray: 32 68;
      stroke-dashoffset: -18;
    }

    100% {
      stroke-dasharray: 10 90;
      stroke-dashoffset: -60;
    }
  }
}
@layer components {
  :is(.uif-switch-field, .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(--uif-switch-text-color-default);
    cursor: pointer;
  }

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

  :is(.uif-switch, .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(--uif-switch-track-border-color-default);
    border-radius: var(--size-radius-full);
    background: var(--uif-switch-track-background-default);
    cursor: pointer;
    transition:
      background-color 160ms ease,
      border-color 160ms ease,
      opacity 160ms ease;
  }

  :is(.uif-switch, .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(--uif-switch-thumb-background-default);
    transform: translate(0, -50%);
    transition:
      transform 160ms ease,
      background-color 160ms ease;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  :is(.uif-switch, .switch):checked:disabled,
  :is(.uif-switch, .switch).is-checked.is-disabled {
    border-color: var(--uif-switch-track-border-color-disabled);
    background: var(--uif-switch-track-background-active);
  }
}
@layer components {
  :is(.uif-range-slider-field, .range-slider-field) {
    display: grid;
    gap: var(--uif-range-slider-gap);
    inline-size: 100%;
    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(--uif-range-slider-text-color-default);
  }

  :is(.uif-range-slider-field, .range-slider-field):has(
    :is(.uif-range-slider-input, .range-slider-input):disabled
  ),
  :is(.uif-range-slider-field, .range-slider-field).is-disabled {
    color: var(--uif-range-slider-text-color-disabled);
  }

  :is(.uif-range-slider-header, .range-slider-header) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uif-range-slider-gap);
  }

  :is(.uif-range-slider-label, .range-slider-label),
  :is(.uif-range-slider-value, .range-slider-value) {
    margin: 0;
  }

  :is(.uif-range-slider-value, .range-slider-value) {
    display: inline-flex;
    align-items: center;
    gap: var(--uif-range-slider-value-gap);
    color: inherit;
  }

  :is(.uif-range-slider, .range-slider) {
    --_range-slider-start: 25;
    --_range-slider-end: 75;
    position: relative;
    inline-size: 100%;
    block-size: var(--uif-range-slider-thumb-size);
  }

  :is(.uif-range-slider, .range-slider)::before,
  :is(.uif-range-slider, .range-slider)::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 50%;
    block-size: var(--uif-range-slider-track-size);
    border-radius: var(--uif-range-slider-track-border-radius);
    transform: translateY(-50%);
  }

  :is(.uif-range-slider, .range-slider)::before {
    background: var(--uif-range-slider-track-background-default);
  }

  :is(.uif-range-slider, .range-slider)::after {
    inset-inline-start: calc(var(--_range-slider-start) * 1%);
    inline-size: calc((var(--_range-slider-end) - var(--_range-slider-start)) * 1%);
    background: var(--uif-range-slider-track-background-active);
  }

  :is(.uif-range-slider, .range-slider):has(
    :is(.uif-range-slider-input, .range-slider-input):disabled
  )::before,
  :is(.uif-range-slider, .range-slider).is-disabled::before {
    background: var(--uif-range-slider-track-background-disabled);
  }

  :is(.uif-range-slider, .range-slider):has(
    :is(.uif-range-slider-input, .range-slider-input):disabled
  )::after,
  :is(.uif-range-slider, .range-slider).is-disabled::after {
    background: var(--uif-range-slider-track-background-disabled);
  }

  :is(.uif-range-slider-input, .range-slider-input) {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    appearance: none;
    background: transparent;
    pointer-events: none;
  }

  :is(.uif-range-slider-input, .range-slider-input):focus {
    outline: none;
  }

  :is(.uif-range-slider-input, .range-slider-input)::-webkit-slider-runnable-track {
    block-size: var(--uif-range-slider-track-size);
    background: transparent;
  }

  :is(.uif-range-slider-input, .range-slider-input)::-moz-range-track {
    block-size: var(--uif-range-slider-track-size);
    background: transparent;
  }

  :is(.uif-range-slider-input, .range-slider-input)::-webkit-slider-thumb {
    appearance: none;
    pointer-events: auto;
    inline-size: var(--uif-range-slider-thumb-size);
    block-size: var(--uif-range-slider-thumb-size);
    margin-block-start: calc(
      (var(--uif-range-slider-track-size) - var(--uif-range-slider-thumb-size)) / 2
    );
    box-sizing: border-box;
    border: var(--uif-range-slider-thumb-border-size) solid
      var(--uif-range-slider-thumb-border-color-default);
    border-radius: var(--size-radius-full);
    background: var(--uif-range-slider-thumb-background-default);
    cursor: pointer;
  }

  :is(.uif-range-slider-input, .range-slider-input)::-moz-range-thumb {
    pointer-events: auto;
    inline-size: var(--uif-range-slider-thumb-size);
    block-size: var(--uif-range-slider-thumb-size);
    box-sizing: border-box;
    border: var(--uif-range-slider-thumb-border-size) solid
      var(--uif-range-slider-thumb-border-color-default);
    border-radius: var(--size-radius-full);
    background: var(--uif-range-slider-thumb-background-default);
    cursor: pointer;
  }

  :is(.uif-range-slider-input, .range-slider-input):focus-visible::-webkit-slider-thumb,
  :is(.uif-range-slider-input, .range-slider-input).is-focus-visible::-webkit-slider-thumb,
  :is(.uif-range-slider-input, .range-slider-input):focus-visible::-moz-range-thumb,
  :is(.uif-range-slider-input, .range-slider-input).is-focus-visible::-moz-range-thumb {
    border-color: var(--uif-range-slider-thumb-border-color-focus);
    box-shadow: 0 0 var(--shadow-focus, 0) 0 var(--color-focus, transparent);
  }

  :is(.uif-range-slider-input, .range-slider-input):disabled::-webkit-slider-thumb,
  :is(.uif-range-slider-input, .range-slider-input).is-disabled::-webkit-slider-thumb,
  :is(.uif-range-slider-input, .range-slider-input):disabled::-moz-range-thumb,
  :is(.uif-range-slider-input, .range-slider-input).is-disabled::-moz-range-thumb {
    border-color: var(--uif-range-slider-thumb-border-color-disabled);
    background: var(--uif-range-slider-thumb-background-disabled);
    cursor: not-allowed;
  }
}
@layer components {
  :is(.uif-badge, .badge) {
    display: inline-flex;
    align-items: center;
    gap: var(--uif-badge-gap, 0.25rem);
    border: var(--uif-badge-border-size-default) solid var(--uif-badge-default-border-color);
    border-radius: var(--uif-badge-border-radius, 625rem);
    font-family: var(--uif-badge-font-family, inherit);
    font-weight: var(--uif-badge-font-weight, 700);
    white-space: nowrap;
    background: var(--uif-badge-default-container-background);
    color: var(--uif-badge-default-text-color);
    font-size: var(--uif-badge-font-size-md);
    line-height: var(--uif-badge-line-height-md);
    padding-inline: var(--uif-badge-padding-inline-md);
    padding-block: var(--uif-badge-padding-block-md);
    min-block-size: var(--uif-badge-height-min);
    min-inline-size: var(--uif-badge-width-min);
  }

  /* ── Sizes ── */

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

  /* ── Variants ── */

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

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

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

  /* ── Icon-only ── */

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

  /* ── Icon slot ── */

  :is(.uif-badge, .badge) > :is(.uif-icon, .icon) {
    flex: 0 0 auto;
  }

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

  :is(.uif-badge, .badge) > * {
    color: inherit;
  }
}
@layer components {
  .uif-status-light {
    display: inline-flex;
    align-items: center;
    gap: var(--uif-status-light-gap-md);
    font-family: var(--uif-status-light-font-family, inherit);
    font-weight: var(--uif-status-light-font-weight, inherit);
    font-size: var(--uif-status-light-font-size-md);
    line-height: var(--uif-status-light-line-height-md);
    color: var(--uif-status-light-neutral-text-color);
  }

  .uif-status-light-indicator {
    inline-size: var(--uif-status-light-indicator-size-md);
    block-size: var(--uif-status-light-indicator-size-md);
    border-radius: 50%;
    background: var(--uif-status-light-neutral-indicator-background);
    flex: 0 0 auto;
  }

  .uif-status-light.positive {
    color: var(--uif-status-light-positive-text-color);
  }

  .uif-status-light.positive .uif-status-light-indicator {
    background: var(--uif-status-light-positive-indicator-background);
  }

  .uif-status-light.negative {
    color: var(--uif-status-light-negative-text-color);
  }

  .uif-status-light.negative .uif-status-light-indicator {
    background: var(--uif-status-light-negative-indicator-background);
  }

  .uif-status-light.notice {
    color: var(--uif-status-light-notice-text-color);
  }

  .uif-status-light.notice .uif-status-light-indicator {
    background: var(--uif-status-light-notice-indicator-background);
  }

  .uif-status-light.info {
    color: var(--uif-status-light-info-text-color);
  }

  .uif-status-light.info .uif-status-light-indicator {
    background: var(--uif-status-light-info-indicator-background);
  }

  .uif-status-light.sm {
    gap: var(--uif-status-light-gap-sm);
    font-size: var(--uif-status-light-font-size-sm);
    line-height: var(--uif-status-light-line-height-sm);
  }

  .uif-status-light.sm .uif-status-light-indicator {
    inline-size: var(--uif-status-light-indicator-size-sm);
    block-size: var(--uif-status-light-indicator-size-sm);
  }
}
@layer components {
  :is(.uif-meter, .meter) {
    display: grid;
    gap: var(--uif-meter-gap);
    font-family: var(--uif-meter-font-family);
    font-weight: var(--uif-meter-font-weight);
    font-size: var(--uif-meter-font-size-md);
    line-height: var(--uif-meter-line-height-md);
  }

  :is(.uif-meter, .meter) .uif-meter-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--uif-meter-gap);
  }

  :is(.uif-meter, .meter) .uif-meter-label {
    color: var(--uif-meter-label-color-default);
  }

  :is(.uif-meter, .meter) .uif-meter-value {
    color: var(--uif-meter-value-color-default);
  }

  /* Native <meter> provides semantics for assistive technology;
     visually hidden so the token-styled proxy is displayed instead. */
  :is(.uif-meter, .meter) .uif-meter-native,
  :is(.uif-meter, .meter) > meter {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    inline-size: 1px;
    block-size: 1px;
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: -1px;
  }

  :is(.uif-meter, .meter) .uif-meter-track {
    position: relative;
    overflow: hidden;
    background: var(--uif-meter-track-background-default);
    border-radius: var(--uif-meter-border-radius);
    block-size: var(--uif-meter-track-height-md);
  }

  :is(.uif-meter, .meter) .uif-meter-fill {
    display: block;
    block-size: 100%;
    inline-size: 0%;
    background: var(--uif-meter-fill-background-default);
    border-radius: inherit;
  }

  :is(.uif-meter, .meter).sm {
    font-size: var(--uif-meter-font-size-sm);
    line-height: var(--uif-meter-line-height-sm);
  }

  :is(.uif-meter, .meter).sm .uif-meter-track {
    block-size: var(--uif-meter-track-height-sm);
  }

  :is(.uif-meter, .meter).positive .uif-meter-fill {
    background: var(--uif-meter-fill-background-positive);
  }

  :is(.uif-meter, .meter).notice .uif-meter-fill {
    background: var(--uif-meter-fill-background-notice);
  }

  :is(.uif-meter, .meter).negative .uif-meter-fill {
    background: var(--uif-meter-fill-background-negative);
  }
}
@layer components {
  :is(.uif-divider, .divider) {
    border: none;
    margin: 0;
    padding: 0;
    background: var(--uif-divider-color, var(--color-border-default));
    block-size: var(--size-border-100);
    inline-size: 100%;
    align-self: stretch;
  }

  /* ── Vertical orientation ── */

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

  /* ── Subtle variant ── */

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

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

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

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

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

  :is(.uif-textarea, .textarea)[readonly] {
    background: var(--uif-textarea-container-background-default);
    border-color: var(--uif-textarea-border-color-default);
    cursor: default;
    resize: none;
  }
}
@layer components {
  :is(.uif-avatar, .avatar) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--uif-avatar-border-radius);
    overflow: hidden;
    background: var(--uif-avatar-container-background-default);
    color: var(--uif-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 ── */

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

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

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

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

  /* ── Image ── */

  :is(.uif-avatar, .avatar) > img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  /* ── Initials ── */

  :is(.uif-avatar-initials, .avatar-initials) {
    user-select: none;
    text-transform: uppercase;
  }
}
@layer components {
  :is(.uif-illustrated-message, .illustrated-message) {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--uif-illustrated-message-gap);
  }

  :is(.uif-illustrated-message-illustration, .illustrated-message-illustration) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--uif-illustrated-message-illustration-color);
    font-size: var(--uif-illustrated-message-illustration-size);
    line-height: var(--line-height-xl);
  }

  :is(.uif-illustrated-message-illustration, .illustrated-message-illustration) > :is(.uif-icon, .icon) {
    font-size: inherit;
  }

  :is(.uif-illustrated-message-content, .illustrated-message-content) {
    display: flex;
    flex-direction: column;
    gap: var(--uif-illustrated-message-content-gap);
  }

  :is(.uif-illustrated-message-heading, .illustrated-message-heading) {
    margin: 0;
    color: var(--uif-illustrated-message-heading-text-color);
    font-family: var(--typography-heading-font-family);
    font-size: var(--typography-heading-font-size-lg);
    font-weight: var(--typography-heading-font-weight);
    line-height: var(--typography-heading-line-height-lg);
  }

  :is(.uif-illustrated-message-description, .illustrated-message-description) {
    margin: 0;
    color: var(--uif-illustrated-message-description-text-color);
    font-size: var(--font-size-md);
    line-height: var(--line-height-md);
  }

  :is(.uif-illustrated-message-actions, .illustrated-message-actions) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--uif-illustrated-message-content-gap);
  }
}
@layer components {
  /* Unprefixed Accordion classes are deprecated v1.x compatibility selectors. */
  :is(.uif-accordion, .accordion) {
    display: flex;
    flex-direction: column;
    border: var(--uif-accordion-border-size-default) solid var(--uif-accordion-border-color-default);
    border-radius: var(--uif-accordion-border-radius);
    overflow: hidden;
  }

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

  :is(.uif-accordion-item, .accordion-item):first-child {
    border-block-start: none;
  }

  :is(.uif-accordion-item, .accordion-item) > summary {
    display: flex;
    align-items: center;
    gap: var(--uif-accordion-gap);
    padding-inline: var(--uif-accordion-padding-inline);
    padding-block: var(--uif-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(--uif-accordion-text-color-default);
    cursor: pointer;
    list-style: none;
    user-select: none;
  }

  :is(.uif-accordion-item, .accordion-item) > summary::-webkit-details-marker {
    display: none;
  }

  :is(.uif-accordion-item, .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;
  }

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

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

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

  :is(.uif-accordion-item-content, .accordion-item-content) {
    padding-inline: var(--uif-accordion-padding-inline);
    padding-block: var(--uif-accordion-padding-block);
    font-family: var(--font-family-sans);
    font-size: var(--font-size-md);
    line-height: var(--line-height-md);
    color: var(--uif-accordion-text-color-default);
  }

  /* ── Disabled ── */

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

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

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

  :is(.uif-tab, .tab) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: var(--uif-tabs-padding-inline);
    padding-block: var(--uif-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(--uif-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;
  }

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

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

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

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

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

  :is(.uif-tab-panels, .tab-panels) {
    display: flex;
    overflow-x: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
  }

  :is(.uif-tab-panels, .tab-panels) > :is(.uif-tab-panel, .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) */
  :is(.uif-tab-panel, .tab-panel) {
    padding-block: var(--size-spacing-400);
  }

  :is(.uif-tab-panel, .tab-panel)[hidden] {
    display: none;
  }
}
@layer components {
  :is(.uif-tree-view, .tree-view) {
    display: flex;
    flex-direction: column;
    gap: var(--uif-tree-view-gap);
    margin: 0;
    padding: var(--uif-tree-view-padding-block) var(--uif-tree-view-padding-inline);
    list-style: none;
    border: var(--uif-tree-view-border-size-default) solid var(--uif-tree-view-border-color-default);
    border-radius: var(--uif-tree-view-border-radius);
    background: var(--uif-tree-view-background-color-default);
  }

  :is(.uif-tree-node, .tree-node) {
    list-style: none;
    margin: 0;
  }

  :is(.uif-tree-node-row, .tree-node-row) {
    display: flex;
    align-items: center;
    gap: var(--uif-tree-view-gap);
    inline-size: 100%;
    padding: var(--uif-tree-view-padding-block) var(--uif-tree-view-padding-inline);
    border-radius: var(--uif-tree-view-border-radius);
    color: var(--uif-tree-view-text-color-default);
    cursor: pointer;
    user-select: none;
  }

  :is(.uif-tree-node-row, .tree-node-row):hover,
  :is(.uif-tree-node-row, .tree-node-row).is-hover {
    background: var(--uif-tree-view-row-background-hover);
  }

  :is(.uif-tree-node, .tree-node).is-selected > :is(.uif-tree-node-row, .tree-node-row),
  :is(.uif-tree-node, .tree-node)[aria-selected="true"] > :is(.uif-tree-node-row, .tree-node-row) {
    background: var(--uif-tree-view-row-background-selected);
    color: var(--uif-tree-view-text-color-selected);
  }

  :is(.uif-tree-node, .tree-node).is-disabled > :is(.uif-tree-node-row, .tree-node-row) {
    color: var(--uif-tree-view-text-color-disabled);
    cursor: not-allowed;
    pointer-events: none;
  }

  :is(.uif-tree-node-row, .tree-node-row):focus-visible {
    outline: var(--uif-tree-view-border-size-default) solid var(--uif-tree-view-focus-ring-color);
    outline-offset: var(--uif-tree-view-border-size-default);
  }

  :is(.uif-tree-toggle, .tree-toggle) {
    inline-size: 1rem;
    block-size: 1rem;
    border: none;
    background: transparent;
    color: currentColor;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
  }

  :is(.uif-tree-toggle, .tree-toggle)::before {
    content: "";
    display: inline-block;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-inline-end: var(--uif-tree-view-border-size-default) solid currentColor;
    border-block-end: var(--uif-tree-view-border-size-default) solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
  }

  :is(.uif-tree-node, .tree-node).is-expanded > :is(.uif-tree-node-row, .tree-node-row) :is(.uif-tree-toggle, .tree-toggle)::before,
  :is(.uif-tree-node, .tree-node)[aria-expanded="true"] > :is(.uif-tree-node-row, .tree-node-row) :is(.uif-tree-toggle, .tree-toggle)::before {
    transform: rotate(45deg);
  }

  :is(.uif-tree-label, .tree-label) {
    font: inherit;
  }

  :is(.uif-tree-children, .tree-children) {
    margin: 0;
    margin-inline-start: var(--uif-tree-view-indent);
    padding: 0;
    list-style: none;
  }

  :is(.uif-tree-node, .tree-node)[aria-expanded="false"] > :is(.uif-tree-children, .tree-children) {
    display: none;
  }

  :is(.uif-tree-node-row, .tree-node-row).is-drop-target {
    outline: var(--uif-tree-view-border-size-default) dashed var(--uif-tree-view-border-color-default);
  }
}
@layer components {
  :is(.uif-tooltip, .tooltip) {
    position: absolute;
    z-index: var(--zindex-tooltip);
    max-inline-size: 15rem;
    padding-inline: var(--uif-tooltip-padding-inline);
    padding-block: var(--uif-tooltip-padding-block);
    font-family: var(--font-family-sans);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    color: var(--uif-tooltip-text-color-default);
    background: var(--uif-tooltip-container-background-default);
    border-radius: var(--uif-tooltip-border-radius);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
  }

  :is(.uif-tooltip, .tooltip).is-visible {
    opacity: 1;
  }

  /* ── Placement ── */

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

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

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

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

  /* ── Trigger wrapper ── */

  :is(.uif-tooltip-trigger, .tooltip-trigger) {
    position: relative;
    display: inline-flex;
  }

  :is(.uif-tooltip-trigger, .tooltip-trigger):hover > :is(.uif-tooltip, .tooltip),
  :is(.uif-tooltip-trigger, .tooltip-trigger):focus-within > :is(.uif-tooltip, .tooltip) {
    opacity: 1;
  }
}
@layer components {
  /* ── Container ── */

  :is(.uif-popover-container, .popover-container) {
    position: relative;
    display: inline-flex;
  }

  /* ── Popover panel ── */

  :is(.uif-popover, .popover) {
    position: absolute;
    z-index: var(--zindex-popover, 1060);
    min-inline-size: 12rem;
    max-inline-size: 20rem;
    padding-inline: var(--uif-popover-padding-inline);
    padding-block: var(--uif-popover-padding-block);
    font-family: var(--font-family-sans);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    color: var(--uif-popover-text-color-default);
    background: var(--uif-popover-container-background-default);
    border: 1px solid var(--uif-popover-container-border-color-default);
    border-radius: var(--uif-popover-border-radius);
    box-shadow: var(--uif-popover-box-shadow, 0 4px 12px rgb(0 0 0 / 0.12));
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
  }

  :is(.uif-popover, .popover).is-open {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  /* ── Placement ── */

  :is(.uif-popover, .popover)[data-placement="bottom"] {
    inset-block-start: calc(100% + var(--size-spacing-200, 0.5rem));
    inset-inline-start: 50%;
    transform: translateX(-50%) translateY(-4px);
  }

  :is(.uif-popover, .popover)[data-placement="bottom"].is-open {
    transform: translateX(-50%);
  }

  :is(.uif-popover, .popover)[data-placement="top"] {
    inset-block-end: calc(100% + var(--size-spacing-200, 0.5rem));
    inset-inline-start: 50%;
    transform: translateX(-50%) translateY(4px);
  }

  :is(.uif-popover, .popover)[data-placement="top"].is-open {
    transform: translateX(-50%);
  }

  :is(.uif-popover, .popover)[data-placement="left"] {
    inset-inline-end: calc(100% + var(--size-spacing-200, 0.5rem));
    inset-block-start: 50%;
    transform: translateY(-50%) translateX(4px);
  }

  :is(.uif-popover, .popover)[data-placement="left"].is-open {
    transform: translateY(-50%);
  }

  :is(.uif-popover, .popover)[data-placement="right"] {
    inset-inline-start: calc(100% + var(--size-spacing-200, 0.5rem));
    inset-block-start: 50%;
    transform: translateY(-50%) translateX(-4px);
  }

  :is(.uif-popover, .popover)[data-placement="right"].is-open {
    transform: translateY(-50%);
  }

  /* ── Arrow ── */

  :is(.uif-popover-arrow, .popover-arrow) {
    position: absolute;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    background: var(--uif-popover-container-background-default);
    border: 1px solid var(--uif-popover-container-border-color-default);
    transform: rotate(45deg);
    pointer-events: none;
  }

  :is(.uif-popover, .popover)[data-placement="bottom"] > :is(.uif-popover-arrow, .popover-arrow) {
    inset-block-start: -0.3rem;
    inset-inline-start: 50%;
    translate: -50% 0;
    border-block-end-color: transparent;
    border-inline-end-color: transparent;
  }

  :is(.uif-popover, .popover)[data-placement="top"] > :is(.uif-popover-arrow, .popover-arrow) {
    inset-block-end: -0.3rem;
    inset-inline-start: 50%;
    translate: -50% 0;
    border-block-start-color: transparent;
    border-inline-start-color: transparent;
  }

  :is(.uif-popover, .popover)[data-placement="left"] > :is(.uif-popover-arrow, .popover-arrow) {
    inset-inline-end: -0.3rem;
    inset-block-start: 50%;
    translate: 0 -50%;
    border-block-start-color: transparent;
    border-inline-end-color: transparent;
  }

  :is(.uif-popover, .popover)[data-placement="right"] > :is(.uif-popover-arrow, .popover-arrow) {
    inset-inline-start: -0.3rem;
    inset-block-start: 50%;
    translate: 0 -50%;
    border-block-end-color: transparent;
    border-inline-start-color: transparent;
  }
}
@layer components {
  /*
   * Native <dialog> provides focus trapping, backdrop, inert management, and Esc handling.
   * `.modal-*` selectors are deprecated v1.x compatibility aliases.
   * Implements: principle.foundation.native-html-first
   */

  /* Native dialog element — reset browser defaults */
  dialog:is(.uif-modal, .modal) {
    position: relative;
    display: grid;
    gap: var(--size-spacing-400);
    inline-size: min(100%, var(--container-400));
    max-block-size: calc(100dvh - (var(--size-spacing-400) * 2));
    overflow: auto;
    padding: var(--size-spacing-500);
    margin: auto;
    color: var(--color-text-default);
    background: var(--uif-modal-surface-color);
    border: var(--brand-size-border-default) solid var(--color-border-default);
    border-radius: var(--uif-modal-surface-border-radius);
  }
  dialog:is(.uif-modal, .modal):not([open]) {
    display: none;
  }
  dialog:is(.uif-modal, .modal)::backdrop {
    background: var(--uif-modal-backdrop-color);
  }
  dialog:is(.uif-modal, .modal).sm {
    inline-size: min(100%, var(--container-300));
  }
  dialog:is(.uif-modal, .modal).lg {
    inline-size: min(100%, var(--container-500));
  }
  dialog:is(.uif-modal, .modal).alert {
    border-color: var(--color-border-danger);
  }
  dialog:is(.uif-modal, .modal).confirmation {
    border-color: var(--color-border-brand);
  }

  /* Legacy div-based modal (v1.x compatibility — non-native fallback) */
  :is(.uif-modal-root, .modal-root) {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--size-spacing-400);
    z-index: var(--zindex-modal-overlay);
  }
  :is(.uif-modal-root, .modal-root).is-open {
    display: flex;
  }
  :is(.uif-modal-root, .modal-root).is-preview {
    position: relative;
    inset: auto;
    min-block-size: var(--container-300);
    z-index: var(--zindex-base);
  }
  :is(.uif-modal-overlay, .modal-overlay) {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    margin: 0;
    background: var(--uif-modal-backdrop-color);
    z-index: var(--zindex-modal-overlay);
  }
  :is(.uif-modal-root, .modal-root) :is(.uif-modal, .modal) {
    position: relative;
    display: grid;
    gap: var(--size-spacing-400);
    inline-size: min(100%, var(--container-400));
    max-block-size: calc(100dvh - (var(--size-spacing-400) * 2));
    overflow: auto;
    padding: var(--size-spacing-500);
    color: var(--color-text-default);
    background: var(--uif-modal-surface-color);
    border: var(--brand-size-border-default) solid var(--color-border-default);
    border-radius: var(--uif-modal-surface-border-radius);
    z-index: var(--zindex-modal);
  }
  :is(.uif-modal-root, .modal-root) :is(.uif-modal, .modal).sm {
    inline-size: min(100%, var(--container-300));
  }
  :is(.uif-modal-root, .modal-root) :is(.uif-modal, .modal).lg {
    inline-size: min(100%, var(--container-500));
  }
  :is(.uif-modal-root, .modal-root) :is(.uif-modal, .modal).alert {
    border-color: var(--color-border-danger);
  }
  :is(.uif-modal-root, .modal-root) :is(.uif-modal, .modal).confirmation {
    border-color: var(--color-border-brand);
  }

  /* Shared inner styles (both native and legacy) */
  :is(.uif-modal-header, .modal-header) {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--size-spacing-300);
  }
  :is(.uif-modal-title, .modal-title) {
    margin: 0;
    font-size: var(--font-size-xl);
    line-height: var(--line-height-xl);
  }
  :is(.uif-modal-description, .modal-description) {
    margin: 0;
    color: var(--color-text-subtle);
  }
  :is(.uif-modal-body, .modal-body) {
    display: grid;
    gap: var(--size-spacing-300);
  }
  :is(.uif-modal-actions, .modal-actions) {
    display: flex;
    justify-content: end;
    gap: var(--size-spacing-200);
    flex-wrap: wrap;
  }
  :is(.uif-modal-close, .modal-close) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--size-target-default);
    block-size: var(--size-target-default);
    border: 0;
    border-radius: var(--uif-modal-surface-border-radius);
    background: transparent;
    color: var(--color-text-default);
    cursor: pointer;
  }
  :is(.uif-modal-close, .modal-close):focus-visible {
    outline: 2px solid var(--color-focus, currentColor);
    outline-offset: 2px;
    box-shadow: 0 0 var(--shadow-focus, 0) 0 var(--color-focus, transparent);
  }
}
@layer components {
  :is(.uif-select, .select) {
    position: relative;
    display: inline-grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    inline-size: 100%;
    block-size: var(--uif-select-height, 2.5rem);
    appearance: none;
    font-family: var(--uif-select-font-family);
    font-weight: var(--uif-select-font-weight);
    font-size: var(--uif-select-font-size);
    line-height: var(--uif-select-line-height);
    color: var(--uif-select-text-color-default);
    background: var(--uif-select-container-background-default);
    border-style: solid;
    border-width: var(--uif-select-border-size-default);
    border-color: var(--uif-select-border-color-default);
    border-radius: var(--uif-select-border-radius);
    padding-inline-start: var(--uif-select-padding-inline);
    padding-inline-end: calc(var(--uif-select-padding-inline) + 1.5em);
    padding-block: var(--uif-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(--uif-select-padding-inline) center;
    background-size: 1em;
    cursor: pointer;
  }

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

    :is(.uif-select, .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;
    }

    :is(.uif-select, .select):open::picker-icon {
      rotate: 180deg;
    }

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

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

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

    :is(.uif-select, .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;
    }

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

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

  :is(.uif-select, .select):hover,
  :is(.uif-select, .select).is-hover {
    background-color: var(--uif-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(--uif-select-border-size-hover);
    border-color: var(--uif-select-border-color-hover);
    color: var(--uif-select-text-color-hover);
    padding-inline-start: calc(
      var(--uif-select-padding-inline) + var(--uif-select-border-size-default) -
        var(--uif-select-border-size-hover)
    );
    padding-inline-end: calc(
      var(--uif-select-padding-inline) + 1.5em + var(--uif-select-border-size-default) -
        var(--uif-select-border-size-hover)
    );
    padding-block: calc(
      var(--uif-select-padding-block) + var(--uif-select-border-size-default) -
        var(--uif-select-border-size-hover)
    );
  }

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

  :is(.uif-select, .select):active,
  :is(.uif-select, .select).is-active {
    background-color: var(--uif-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(--uif-select-border-size-active);
    border-color: var(--uif-select-border-color-active);
    color: var(--uif-select-text-color-active);
    padding-inline-start: calc(
      var(--uif-select-padding-inline) + var(--uif-select-border-size-default) -
        var(--uif-select-border-size-active)
    );
    padding-inline-end: calc(
      var(--uif-select-padding-inline) + 1.5em + var(--uif-select-border-size-default) -
        var(--uif-select-border-size-active)
    );
    padding-block: calc(
      var(--uif-select-padding-block) + var(--uif-select-border-size-default) -
        var(--uif-select-border-size-active)
    );
  }

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

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

  :is(.uif-select, .select):disabled,
  :is(.uif-select, .select)[disabled],
  :is(.uif-select, .select).is-disabled {
    cursor: not-allowed;
    color: var(--uif-select-text-color-disabled);
    background-color: var(--uif-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(--uif-select-border-color-disabled);
  }

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

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

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

  :is(.uif-select, .select).is-invalid:focus-visible,
  :is(.uif-select, .select)[aria-invalid="true"]:focus-visible,
  :is(.uif-select, .select).is-invalid.is-focus-visible,
  :is(.uif-select, .select)[aria-invalid="true"].is-focus-visible {
    border-color: var(--uif-select-border-color-invalid);
    box-shadow: 0 0 var(--shadow-focus, 0) 0 var(--uif-select-border-color-invalid);
  }
}
@layer components {
  /*
   * `.link` is a deprecated v1.x compatibility selector. UIF-owned emitters
   * use `.uif-link`; remove the alias no earlier than v2.0.
   */
  :is(.uif-link, .link) {
    display: inline-flex;
    align-items: center;
    gap: var(--uif-link-gap, 0.25rem);
    font-family: var(--uif-link-font-family, inherit);
    font-weight: var(--uif-link-font-weight, inherit);
    font-size: var(--uif-link-font-size, inherit);
    line-height: var(--uif-link-line-height, inherit);
    color: var(--uif-link-text-color-default);
    text-decoration: var(--uif-link-text-decoration-default, underline);
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    transition: color 0.15s ease;
  }

  /* ── States ── */

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

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

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

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

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

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

  /* ── Icon slot ── */

  :is(.uif-link, .link) > :is(.uif-icon, .icon) {
    flex: 0 0 auto;
  }
}
@layer components {
  :is(.uif-breadcrumbs, .breadcrumbs) {
    min-inline-size: 0;
  }

  :is(.uif-breadcrumbs-list, .breadcrumbs-list) {
    display: flex;
    align-items: center;
    gap: var(--uif-breadcrumbs-gap);
    min-inline-size: 0;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  :is(.uif-breadcrumb-item, .breadcrumb-item) {
    display: inline-flex;
    align-items: center;
    min-inline-size: 0;
  }

  :is(.uif-breadcrumb-item, .breadcrumb-item) + :is(.uif-breadcrumb-item, .breadcrumb-item)::before {
    content: attr(data-separator);
    margin-inline: var(--uif-breadcrumbs-separator-gap);
    color: var(--uif-breadcrumbs-separator-color);
    flex: 0 0 auto;
  }

  :is(.uif-breadcrumb-link, .breadcrumb-link),
  :is(.uif-breadcrumb-current, .breadcrumb-current),
  :is(.uif-breadcrumb-overflow, .breadcrumb-overflow) {
    font-family: var(--uif-breadcrumbs-font-family);
    font-weight: var(--uif-breadcrumbs-font-weight);
    font-size: var(--uif-breadcrumbs-font-size);
    line-height: var(--uif-breadcrumbs-line-height);
    max-inline-size: var(--uif-breadcrumbs-label-max-inline-size);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  :is(.uif-breadcrumb-link, .breadcrumb-link) {
    color: var(--uif-breadcrumbs-text-color-default);
    text-decoration: none;
  }

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

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

  :is(.uif-breadcrumb-link, .breadcrumb-link):focus-visible,
  :is(.uif-breadcrumb-link, .breadcrumb-link).is-focus-visible {
    outline: 2px solid transparent;
    box-shadow: 0 0 var(--shadow-focus, 0) 0 var(--color-focus, transparent);
    border-radius: var(--size-radius-100);
  }

  :is(.uif-breadcrumb-link, .breadcrumb-link)[aria-disabled="true"],
  :is(.uif-breadcrumb-link, .breadcrumb-link).is-disabled {
    color: var(--uif-breadcrumbs-text-color-disabled);
    pointer-events: none;
  }

  :is(.uif-breadcrumb-current, .breadcrumb-current) {
    color: var(--uif-breadcrumbs-text-color-current);
    font-weight: var(--font-weight-600);
  }

  :is(.uif-breadcrumb-item, .breadcrumb-item).is-overflow {
    display: none;
  }

  :is(.uif-breadcrumbs-list, .breadcrumbs-list).is-collapsed :is(.uif-breadcrumb-item, .breadcrumb-item).is-overflow {
    display: inline-flex;
  }

  @media (max-width: 48rem) {
    :is(.uif-breadcrumbs-list, .breadcrumbs-list).is-responsive :is(.uif-breadcrumb-item, .breadcrumb-item).is-middle {
      display: none;
    }

    :is(.uif-breadcrumbs-list, .breadcrumbs-list).is-responsive :is(.uif-breadcrumb-item, .breadcrumb-item).is-overflow {
      display: inline-flex;
    }
  }
}
@layer components {
  /* ----------------------------------------------------------------
   * Form — layout container for form fields
   * ---------------------------------------------------------------- */

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

  :is(.uif-form, .form).borderless {
    border: none;
    padding: 0;
    background: transparent;
  }

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

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

  :is(.uif-form-group-title, .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(--uif-form-group-title-color);
    margin: 0;
  }

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

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

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

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

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

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

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

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

  :is(.uif-form-field-link, .form-field-link) {
    font-size: var(--font-size-sm);
    color: var(--color-text-brand);
    text-decoration: none;
  }

  :is(.uif-form-field-link, .form-field-link):hover {
    text-decoration: underline;
  }

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

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

  :is(.uif-form-actions, .form-actions)[data-align="start"] {
    justify-content: flex-start;
  }

  :is(.uif-form-actions, .form-actions)[data-align="stretch"] {
    flex-direction: column;
  }

  :is(.uif-form-actions, .form-actions)[data-align="stretch"] > * {
    inline-size: 100%;
  }
}
@layer components {
  /* ─── Calendar ─────────────────────────────────────────────────── */

  /*
   * Unprefixed Calendar classes are deprecated v1.x compatibility selectors.
   * UIF-owned emitters use canonical `.uif-calendar*` names; remove aliases no
   * earlier than v2.0.
   */

  :is(.uif-calendar, .calendar) {
    display: flex;
    flex-direction: column;
    gap: var(--uif-calendar-container-gap);
    inline-size: fit-content;
  }

  /* Container variant: bordered card */
  :is(.uif-calendar, .calendar).has-container {
    padding: var(--uif-calendar-container-padding);
    background: var(--uif-calendar-container-background);
    border: var(--uif-calendar-container-border-size) solid var(--uif-calendar-container-border-color);
    border-radius: var(--uif-calendar-container-border-radius);
  }

  /* ─── Header ─────────────────────────────────────────────────── */

  :is(.uif-calendar-header, .calendar-header) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uif-calendar-header-gap);
    min-inline-size: 0;
  }

  :is(.uif-calendar-selectors, .calendar-selectors) {
    display: flex;
    align-items: center;
    gap: var(--uif-calendar-header-gap);
    flex: 0 1 auto;
    min-inline-size: 0;
  }

  :is(.uif-calendar-nav, .calendar-nav) {
    display: flex;
    gap: var(--uif-calendar-header-gap);
  }

  /* Header selects: reuse Select pattern with calendar-specific overrides (no border, transparent) */
  :is(.uif-calendar-header, .calendar-header) :is(.uif-select, .select):is(.uif-calendar-header-select, .calendar-header-select) {
    flex: 0 0 auto;
    inline-size: auto;
    border-color: transparent;
    background: transparent;
    min-block-size: auto;
    padding-block: 0;
  }

  :is(.uif-calendar-header, .calendar-header) :is(.uif-select, .select):is(.uif-calendar-header-select, .calendar-header-select)[name="month"] {
    min-inline-size: 12ch;
  }

  :is(.uif-calendar-header, .calendar-header) :is(.uif-select, .select):is(.uif-calendar-header-select, .calendar-header-select)[name="year"] {
    min-inline-size: 7ch;
  }

  :is(.uif-calendar-header, .calendar-header) :is(.uif-select, .select):is(.uif-calendar-header-select, .calendar-header-select):hover {
    background: var(--uif-calendar-cell-background-hover);
  }

  /* ─── Weekday Header ─────────────────────────────────────────── */

  :is(.uif-calendar-table, .calendar-table) {
    border-collapse: separate;
    border-spacing: 0;
    inline-size: 100%;
  }

  :is(.uif-calendar-table, .calendar-table) th {
    block-size: var(--uif-calendar-weekday-height);
    font-size: var(--uif-calendar-weekday-font-size);
    font-weight: normal;
    color: var(--uif-calendar-weekday-text-color);
    text-align: center;
    vertical-align: middle;
  }

  /* ─── Day Cells ──────────────────────────────────────────────── */

  :is(.uif-calendar-table, .calendar-table) td {
    padding: var(--uif-calendar-cell-gap);
    text-align: center;
  }

  :is(.uif-calendar-cell, .calendar-cell) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--uif-calendar-cell-min-size);
    min-block-size: var(--uif-calendar-cell-min-size);
    border-radius: var(--uif-calendar-cell-border-radius);
    border: var(--uif-calendar-cell-range-border-size) solid transparent;
    background: transparent;
    color: var(--uif-calendar-cell-text-color-default);
    font-family: var(--typography-label-font-family);
    font-size: var(--typography-label-font-size);
    font-weight: var(--typography-label-font-weight);
    line-height: var(--typography-label-line-height);
    cursor: pointer;
    padding: 0;
  }

  /* Hover */
  :is(.uif-calendar-cell, .calendar-cell):hover,
  :is(.uif-calendar-cell, .calendar-cell).is-hover {
    background: var(--uif-calendar-cell-background-hover);
  }

  /* Focus */
  :is(.uif-calendar-cell, .calendar-cell):focus-visible,
  :is(.uif-calendar-cell, .calendar-cell).is-focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--shadow-focus, 0) var(--color-focus, transparent);
  }

  /* Selected (single day) */
  :is(.uif-calendar-cell, .calendar-cell)[aria-selected="true"],
  :is(.uif-calendar-cell, .calendar-cell).is-selected {
    background: var(--uif-calendar-cell-background-active);
    color: var(--uif-calendar-cell-text-color-active);
  }

  /* Today marker */
  :is(.uif-calendar-cell, .calendar-cell).is-today {
    border-color: var(--uif-calendar-cell-range-border-color);
  }

  /* Disabled / outside month */
  :is(.uif-calendar-cell, .calendar-cell):disabled,
  :is(.uif-calendar-cell, .calendar-cell).is-disabled,
  :is(.uif-calendar-cell, .calendar-cell).is-outside-month {
    color: var(--uif-calendar-cell-text-color-disabled);
    cursor: default;
  }

  :is(.uif-calendar-cell, .calendar-cell):disabled:hover,
  :is(.uif-calendar-cell, .calendar-cell).is-disabled:hover {
    background: transparent;
  }

  /* ─── Range Selection ────────────────────────────────────────── */

  /* Range start */
  :is(.uif-calendar-cell, .calendar-cell).is-range-start {
    background: var(--uif-calendar-cell-background-active);
    color: var(--uif-calendar-cell-text-color-active);
    border-color: var(--uif-calendar-cell-range-border-color);
    border-start-start-radius: var(--uif-calendar-cell-range-border-radius);
    border-end-start-radius: var(--uif-calendar-cell-range-border-radius);
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }

  /* Range middle */
  :is(.uif-calendar-cell, .calendar-cell).is-range-middle {
    background: transparent;
    color: var(--uif-calendar-cell-text-color-default);
    border-color: var(--uif-calendar-cell-range-border-color);
    border-radius: 0;
    border-inline-start: none;
    border-inline-end: none;
  }

  /* Range end */
  :is(.uif-calendar-cell, .calendar-cell).is-range-end {
    background: var(--uif-calendar-cell-background-active);
    color: var(--uif-calendar-cell-text-color-active);
    border-color: var(--uif-calendar-cell-range-border-color);
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-start-end-radius: var(--uif-calendar-cell-range-border-radius);
    border-end-end-radius: var(--uif-calendar-cell-range-border-radius);
  }

  /* ─── Range View (two-column) ────────────────────────────────── */

  :is(.uif-calendar, .calendar).range-view {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--uif-calendar-container-gap);
  }

  :is(.uif-calendar, .calendar).range-view :is(.uif-calendar-header, .calendar-header) {
    grid-column: 1 / -1;
  }

  :is(.uif-calendar-month-panel, .calendar-month-panel) {
    display: flex;
    flex-direction: column;
    gap: var(--uif-calendar-container-gap);
  }

  :is(.uif-calendar-month-label, .calendar-month-label) {
    font-family: var(--typography-label-font-family);
    font-size: var(--typography-label-font-size);
    font-weight: var(--typography-label-font-weight);
    line-height: var(--typography-label-line-height);
    color: var(--uif-calendar-cell-text-color-default);
    text-align: center;
  }
}
@layer components {
  /* ─── Date Input ───────────────────────────────────────────────── */
  /* Variant of Input field with segmented DD/MM/YYYY fields         */
  /* Composes: Input field + Calendar                                */

  :is(.uif-input-field, .input-field).date {
    position: relative;
  }

  /* Segmented input container (replaces single <input>) */
  .date-segments {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
  }

  /* Individual segment (DD, MM, YYYY) */
  .date-segment {
    border: none;
    background: transparent;
    text-align: center;
    font: inherit;
    color: inherit;
    padding: 0;
    outline: none;
  }

  .date-segment.day,
  .date-segment.month {
    inline-size: 2ch;
  }

  .date-segment.year {
    inline-size: 4ch;
  }

  .date-segment::placeholder {
    color: var(--color-text-subtle);
  }

  .date-segment:focus {
    background: var(--color-fill-subtle);
    border-radius: var(--brand-corner-input);
  }

  /* Separator between segments */
  .date-separator {
    color: var(--color-text-subtle);
    padding-inline: var(--size-spacing-100);
    user-select: none;
  }

  /* Calendar dropdown positioning */
  :is(.uif-input-field, .input-field).date :is(.uif-calendar, .calendar) {
    display: none;
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    z-index: var(--zindex-dropdown, 1000);
    margin-block-start: var(--size-spacing-100);
    padding: var(--size-spacing-200);
    background: var(--color-fill-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--size-radius-400);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  /* Open state */
  :is(.uif-input-field, .input-field).date.is-open :is(.uif-calendar, .calendar) {
    display: grid;
  }
}
@layer components {
  :is(.uif-table-wrapper, .table-wrapper) {
    inline-size: 100%;
    overflow-x: auto;
  }

  :is(.uif-table, .table) {
    inline-size: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    background: var(--color-fill-surface);
    color: var(--color-text-default);
    font-family: var(--typography-body-font-family);
    font-size: var(--typography-body-font-size);
    font-weight: var(--typography-body-font-weight);
    line-height: var(--typography-body-line-height);
  }

  :is(.uif-table, .table) :is(th, td) {
    padding-block: var(--brand-size-spacing-component);
    padding-inline: var(--brand-size-spacing-comfortable);
    text-align: left;
    vertical-align: middle;
    border-block-end: var(--brand-size-border-default) solid var(--color-border-subtle);
  }

  :is(.uif-table, .table):is(.uif-table--compact, .table--compact) :is(th, td) {
    padding-block: var(--brand-size-spacing-tight);
    padding-inline: var(--brand-size-spacing-component);
  }

  :is(.uif-table, .table):is(.uif-table--comfortable, .table--comfortable) :is(th, td) {
    padding-block: var(--brand-size-spacing-component);
    padding-inline: var(--brand-size-spacing-comfortable);
  }

  :is(.uif-table, .table):is(.uif-table--spacious, .table--spacious) :is(th, td) {
    padding-block: var(--brand-size-spacing-comfortable);
    padding-inline: var(--brand-size-spacing-spacious);
  }

  :is(.uif-table, .table) :is(th.uif-table-th, th.table-th, thead th) {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    background: var(--color-fill-surface);
    color: var(--color-text-default);
    font-family: var(--typography-label-font-family);
    font-size: var(--typography-label-font-size);
    font-weight: var(--typography-label-font-weight);
    line-height: var(--typography-label-line-height);
  }

  :is(.uif-table, .table) :is(td.uif-table-td, td.table-td, tbody td) {
    color: inherit;
  }

  :is(.uif-table, .table) :is(th.uif-table-th, th.table-th, thead th)[aria-sort] {
    padding-inline-end: calc(var(--brand-size-spacing-comfortable) + var(--brand-size-spacing-spacious));
  }

  :is(.uif-table, .table):is(.uif-table--comfortable, .table--comfortable) :is(th.uif-table-th, th.table-th, thead th)[aria-sort],
  :is(.uif-table, .table):is(.uif-table--comfortable, .table--comfortable) :is(th.uif-table-th, th.table-th, thead th)[data-resizable] {
    padding-inline-end: calc(var(--brand-size-spacing-comfortable) + var(--brand-size-spacing-spacious));
  }

  :is(.uif-table, .table):is(.uif-table--compact, .table--compact) :is(th.uif-table-th, th.table-th, thead th)[aria-sort],
  :is(.uif-table, .table):is(.uif-table--compact, .table--compact) :is(th.uif-table-th, th.table-th, thead th)[data-resizable] {
    padding-inline-end: calc(var(--brand-size-spacing-component) + var(--brand-size-spacing-spacious));
  }

  :is(.uif-table, .table):is(.uif-table--spacious, .table--spacious) :is(th.uif-table-th, th.table-th, thead th)[aria-sort],
  :is(.uif-table, .table):is(.uif-table--spacious, .table--spacious) :is(th.uif-table-th, th.table-th, thead th)[data-resizable] {
    padding-inline-end: calc(var(--brand-size-spacing-spacious) + var(--brand-size-spacing-spacious));
  }

  :is(.uif-table, .table):is(.uif-table--sortable, .table--sortable) :is(th.uif-table-th, th.table-th, thead th)[aria-sort] {
    cursor: pointer;
    user-select: none;
  }

  :is(.uif-table, .table) :is(th.uif-table-th, th.table-th, thead th)[aria-sort]::before {
    position: absolute;
    inset-inline-end: var(--brand-size-spacing-component);
    inset-block-start: 50%;
    transform: translateY(-50%);
    color: currentColor;
    font-size: var(--typography-label-font-size);
    line-height: 1;
  }

  :is(.uif-table, .table) :is(th.uif-table-th, th.table-th, thead th)[aria-sort="none"]::before {
    content: "↕";
    opacity: 0.56;
  }

  :is(.uif-table, .table) :is(th.uif-table-th, th.table-th, thead th)[aria-sort="ascending"]::before {
    content: "↑";
  }

  :is(.uif-table, .table) :is(th.uif-table-th, th.table-th, thead th)[aria-sort="descending"]::before {
    content: "↓";
  }

  :is(.uif-table, .table) :is(th.uif-table-th, th.table-th, thead th)[data-resizable] {
    min-inline-size: calc(var(--brand-size-spacing-spacious) * 6);
    max-inline-size: 100%;
    padding-inline-end: calc(var(--brand-size-spacing-comfortable) + var(--brand-size-spacing-spacious));
  }

  :is(.uif-table, .table) :is(th.uif-table-th, th.table-th, thead th)[data-resizable]::after {
    content: "";
    position: absolute;
    inset-block: var(--brand-size-spacing-tight);
    inset-inline-end: 0;
    inline-size: calc(var(--brand-size-spacing-component) * 2);
    cursor: col-resize;
    background: linear-gradient(
      to right,
      transparent calc(50% - (var(--brand-size-border-default) / 2)),
      var(--color-border-subtle) calc(50% - (var(--brand-size-border-default) / 2)),
      var(--color-border-subtle) calc(50% + (var(--brand-size-border-default) / 2)),
      transparent calc(50% + (var(--brand-size-border-default) / 2))
    );
  }

  :is(.uif-table, .table)[data-selection] tbody :is(tr.uif-table-tr, tr.table-tr, tr) {
    cursor: pointer;
  }

  :is(.uif-table, .table) tbody :is(tr.uif-table-tr, tr.table-tr, tr):hover > * {
    background: var(--color-fill-subtle);
  }

  :is(.uif-table, .table) tbody :is(tr.uif-table-tr, tr.table-tr, tr)[aria-selected="true"] > * {
    background: var(--color-fill-subtle);
    color: var(--color-text-brand);
  }

  :is(.uif-table, .table) :is(th.uif-table-th, th.table-th, thead th):focus-visible,
  :is(.uif-table, .table)[data-selection] tbody :is(tr.uif-table-tr, tr.table-tr, tr):focus-visible {
    outline: 2px solid transparent;
    box-shadow: inset 0 0 0 var(--brand-size-border-default) var(--color-focus, transparent);
  }

  :is(.uif-table-empty, .table-empty) {
    color: var(--color-text-subtle);
    text-align: center;
  }

  :is(.uif-table-empty, .table-empty) > * {
    text-align: center;
  }

  :is(.uif-table, .table):is(.uif-table--loading, .table--loading) tbody {
    opacity: 0.56;
    pointer-events: none;
  }
}
@layer components {
  .uif-inline-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--uif-inline-alert-gap);
    padding-inline: var(--uif-inline-alert-padding-inline);
    padding-block: var(--uif-inline-alert-padding-block);
    border: var(--uif-inline-alert-border-size) solid var(--uif-inline-alert-default-border-color);
    border-radius: var(--uif-inline-alert-border-radius);
    background: var(--uif-inline-alert-default-container-background);
    color: var(--uif-inline-alert-default-text-color);
    font-family: inherit;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-md);
  }

  /* ── Variants ── */

  .uif-inline-alert.info {
    background: var(--uif-inline-alert-info-container-background);
    border-color: var(--uif-inline-alert-info-border-color);
    color: var(--uif-inline-alert-info-text-color);
  }

  .uif-inline-alert.positive {
    background: var(--uif-inline-alert-positive-container-background);
    border-color: var(--uif-inline-alert-positive-border-color);
    color: var(--uif-inline-alert-positive-text-color);
  }

  .uif-inline-alert.negative {
    background: var(--uif-inline-alert-negative-container-background);
    border-color: var(--uif-inline-alert-negative-border-color);
    color: var(--uif-inline-alert-negative-text-color);
  }

  .uif-inline-alert.notice {
    background: var(--uif-inline-alert-notice-container-background);
    border-color: var(--uif-inline-alert-notice-border-color);
    color: var(--uif-inline-alert-notice-text-color);
  }

  /* ── Icon slot ── */

  .uif-inline-alert-icon {
    flex: 0 0 auto;
    margin-block-start: 0.125rem;
  }

  .uif-inline-alert-icon > :is(.uif-icon, .icon) {
    color: inherit;
  }

  /* ── Content ── */

  .uif-inline-alert-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .uif-inline-alert-title {
    font-weight: 700;
    color: inherit;
  }

  .uif-inline-alert-description {
    margin: 0;
    color: inherit;
  }

  /* ── Optional action ── */

  .uif-inline-alert-action {
    display: inline-flex;
    margin-block-start: 0.25rem;
  }

  /* ── Dismiss button ── */

  .uif-inline-alert-dismiss {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-block-start: 0.125rem;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    line-height: 1;
  }

  .uif-inline-alert-dismiss:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: var(--uif-inline-alert-border-radius);
  }

  /* ── Hidden state (after dismiss) ── */

  .uif-inline-alert.is-hidden {
    display: none;
  }
}
@layer components {
  /* ── Base ── */

  .uif-card {
    display: flex;
    flex-direction: column;
    background: var(--uif-card-container-background);
    border: var(--uif-card-border-size-default) solid var(--uif-card-border-color-default);
    border-radius: var(--uif-card-border-radius);
    overflow: hidden;
    color: var(--uif-card-text-color-default);
    font-family: var(--font-family-sans);
  }

  /* ── Slots ── */

  .uif-card-media {
    display: block;
    inline-size: 100%;
    overflow: hidden;
    flex-shrink: 0;
  }

  .uif-card-media > img,
  .uif-card-media > video {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .uif-card-header {
    display: flex;
    flex-direction: column;
    gap: var(--uif-card-gap);
    padding-block: var(--uif-card-padding-block);
    padding-inline: var(--uif-card-padding-inline);
    font-weight: var(--font-weight-600);
  }

  .uif-card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--uif-card-gap);
    padding-block: var(--uif-card-padding-block);
    padding-inline: var(--uif-card-padding-inline);
    font-size: var(--font-size-md);
    line-height: var(--line-height-md);
    color: var(--uif-card-text-color-subtle);
  }

  .uif-card-footer {
    display: flex;
    align-items: center;
    gap: var(--uif-card-gap);
    padding-block: var(--uif-card-padding-block);
    padding-inline: var(--uif-card-padding-inline);
    border-block-start: var(--uif-card-border-size-default) solid var(--uif-card-border-color-default);
  }

  /* Collapse adjacent padding between header and body */
  .uif-card-header + .uif-card-body {
    padding-block-start: 0;
  }

  /* ── Horizontal layout ── */

  .uif-card.horizontal {
    flex-direction: row;
  }

  .uif-card.horizontal > .uif-card-media {
    inline-size: auto;
    block-size: 100%;
    flex: 0 0 auto;
    max-inline-size: 40%;
  }

  .uif-card.horizontal > .uif-card-footer {
    flex-direction: column;
    border-block-start: none;
    border-inline-start: var(--uif-card-border-size-default) solid var(--uif-card-border-color-default);
    align-items: flex-start;
  }

  /* ── Interactive (clickable) variant ── */

  .uif-card.interactive {
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
    user-select: none;
  }

  .uif-card.interactive:hover,
  .uif-card.interactive.is-hover {
    background: var(--uif-card-interactive-background-hover);
  }

  .uif-card.interactive:active,
  .uif-card.interactive.is-active {
    background: var(--uif-card-interactive-background-active);
  }

  .uif-card.interactive:focus-visible,
  .uif-card.interactive.is-focus-visible {
    outline: 2px solid transparent;
    box-shadow: 0 0 var(--shadow-focus, 0) 0 var(--color-focus, transparent);
  }

  /* ── Selection state ── */

  .uif-card.is-selected {
    border-color: var(--uif-card-border-color-selected);
    border-width: calc(var(--uif-card-border-size-default) * 2);
  }
}
@layer components {
  .uif-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--uif-dropzone-gap);
    inline-size: 100%;
    text-align: center;
    color: var(--uif-dropzone-text-color-default);
    background: var(--uif-dropzone-container-background-default);
    border: var(--uif-dropzone-border-size-default) dashed var(--uif-dropzone-border-color-default);
    border-radius: var(--uif-dropzone-border-radius);
    padding-inline: var(--uif-dropzone-padding-inline);
    padding-block: var(--uif-dropzone-padding-block);
  }

  .uif-dropzone:hover,
  .uif-dropzone:focus-within,
  .uif-dropzone.is-dragover {
    color: var(--uif-dropzone-text-color-dragover);
    border-color: var(--uif-dropzone-border-color-dragover);
    background: var(--uif-dropzone-container-background-dragover);
  }

  .uif-dropzone.is-filled {
    color: var(--uif-dropzone-text-color-default);
    border-color: var(--uif-dropzone-border-color-filled);
    background: var(--uif-dropzone-container-background-filled);
  }

  .uif-dropzone.is-disabled {
    color: var(--uif-dropzone-text-color-disabled);
    border-color: var(--uif-dropzone-border-color-disabled);
    background: var(--uif-dropzone-container-background-disabled);
    cursor: not-allowed;
  }

  .uif-dropzone-input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .uif-dropzone-label {
    font-family: var(--typography-label-font-family);
    font-size: var(--typography-label-font-size);
    line-height: var(--typography-label-line-height);
    font-weight: var(--typography-label-font-weight);
  }

  .uif-dropzone-hint,
  .uif-dropzone-files {
    color: var(--uif-dropzone-text-color-subtle);
    font-family: var(--typography-body-font-family);
    font-size: var(--typography-body-font-size);
    line-height: var(--typography-body-line-height);
  }

  .uif-dropzone.is-disabled .uif-dropzone-hint,
  .uif-dropzone.is-disabled .uif-dropzone-files {
    color: var(--uif-dropzone-text-color-disabled);
  }

  .uif-dropzone-button {
    pointer-events: auto;
  }
}
@layer components {
  :is(.uif-segmented-control, .segmented-control) {
    display: inline-flex;
    align-items: center;
    background: var(--uif-segmented-control-track-background);
    border: var(--size-border-100) solid var(--uif-segmented-control-track-border-color);
    border-radius: var(--size-radius-full);
    padding: var(--size-spacing-100);
    gap: 0;
  }

  :is(.uif-segmented-control-item, .segmented-control-item) {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--size-spacing-200);
    padding-inline: var(--uif-segmented-control-padding-inline);
    padding-block: var(--uif-segmented-control-padding-block);
    font-family: var(--font-family-sans);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-500);
    line-height: var(--line-height-sm);
    color: var(--uif-segmented-control-text-color-default);
    background: transparent;
    border: none;
    border-radius: var(--size-radius-full);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition:
      color 0.15s ease,
      background-color 0.15s ease,
      box-shadow 0.15s ease;
    z-index: 1;
  }

  :is(.uif-segmented-control-item, .segmented-control-item):hover,
  :is(.uif-segmented-control-item, .segmented-control-item).is-hover {
    color: var(--uif-segmented-control-text-color-hover);
  }

  :is(.uif-segmented-control-item, .segmented-control-item)[aria-pressed="true"],
  :is(.uif-segmented-control-item, .segmented-control-item).is-selected,
  :is(.uif-segmented-control-item, .segmented-control-item).is-active {
    color: var(--uif-segmented-control-text-color-active);
    font-weight: var(--font-weight-600);
    background: var(--uif-segmented-control-indicator-background);
    box-shadow: 0 1px 3px 0 color-mix(in srgb, currentColor 12%, transparent),
      0 0 0 var(--size-border-100) var(--uif-segmented-control-indicator-border-color);
  }

  :is(.uif-segmented-control-item, .segmented-control-item):focus-visible,
  :is(.uif-segmented-control-item, .segmented-control-item).is-focus-visible {
    outline: 2px solid transparent;
    box-shadow: 0 0 var(--shadow-focus, 0) 0 var(--color-focus, transparent);
  }

  :is(.uif-segmented-control-item, .segmented-control-item):disabled,
  :is(.uif-segmented-control-item, .segmented-control-item)[aria-disabled="true"],
  :is(.uif-segmented-control-item, .segmented-control-item).is-disabled {
    color: var(--uif-segmented-control-text-color-disabled);
    cursor: not-allowed;
    pointer-events: none;
  }

  /* Size: sm */
  :is(.uif-segmented-control, .segmented-control).sm
    :is(.uif-segmented-control-item, .segmented-control-item) {
    padding-inline: var(--size-spacing-300);
    padding-block: var(--size-spacing-100);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs);
  }

  /* Size: lg */
  :is(.uif-segmented-control, .segmented-control).lg
    :is(.uif-segmented-control-item, .segmented-control-item) {
    padding-inline: var(--size-spacing-600);
    padding-block: var(--size-spacing-300);
    font-size: var(--font-size-md);
    line-height: var(--line-height-md);
  }
}
@layer components {
  .uif-color-picker {
    display: grid;
    gap: var(--uif-color-picker-gap);
    color: var(--uif-color-picker-text-color-default);
    font-family: var(--uif-input-font-family);
  }

  .uif-color-picker.is-disabled {
    pointer-events: none;
  }

  .uif-color-picker-panel {
    display: grid;
    gap: var(--uif-color-picker-gap);
    padding: var(--uif-color-picker-gap);
    border-radius: var(--uif-color-picker-panel-border-radius);
    border: var(--uif-color-picker-panel-border-size) solid var(--uif-color-picker-panel-border-color);
    background: var(--uif-color-picker-panel-background);
  }

  .uif-color-picker-area {
    position: relative;
    block-size: calc(var(--uif-color-picker-control-height) * 4);
    border-radius: var(--uif-color-picker-swatch-border-radius);
    border: var(--uif-color-picker-panel-border-size) solid var(--uif-color-picker-panel-border-color);
    background:
      linear-gradient(to top, hsl(0deg 0% 0% / 100%), hsl(0deg 0% 0% / 0%)),
      linear-gradient(to right, hsl(0deg 0% 100% / 100%), var(--uif-color-picker-accent-color));
  }

  .uif-color-picker-area-thumb {
    position: absolute;
    inset-block-start: 35%;
    inset-inline-start: 65%;
    inline-size: var(--uif-color-picker-slider-thumb-size);
    block-size: var(--uif-color-picker-slider-thumb-size);
    border-radius: 999px;
    border: var(--uif-color-picker-panel-border-size) solid var(--uif-color-picker-focus-ring-color);
    background: transparent;
    box-shadow: 0 0 0 var(--uif-color-picker-focus-ring-size) var(--uif-color-picker-panel-background);
    transform: translate(-50%, -50%);
  }

  .uif-color-picker-sliders {
    display: grid;
    gap: var(--uif-color-picker-gap);
  }

  .uif-color-picker-slider {
    appearance: none;
    inline-size: 100%;
    block-size: var(--uif-color-picker-slider-height);
    border-radius: 999px;
    border: var(--uif-color-picker-panel-border-size) solid var(--uif-color-picker-panel-border-color);
    margin: 0;
    padding: 0;
  }

  .uif-color-picker-slider.hue {
    background: linear-gradient(
      to right,
      hsl(0deg 100% 50%),
      hsl(60deg 100% 50%),
      hsl(120deg 100% 50%),
      hsl(180deg 100% 50%),
      hsl(240deg 100% 50%),
      hsl(300deg 100% 50%),
      hsl(360deg 100% 50%)
    );
  }

  .uif-color-picker-slider.alpha {
    background:
      linear-gradient(to right, hsl(0deg 0% 100% / 0%), var(--uif-color-picker-accent-color)),
      repeating-conic-gradient(hsl(0deg 0% 80%) 0% 25%, transparent 0% 50%) 0 / 8px 8px;
  }

  .uif-color-picker-slider::-webkit-slider-thumb {
    appearance: none;
    inline-size: var(--uif-color-picker-slider-thumb-size);
    block-size: var(--uif-color-picker-slider-thumb-size);
    border-radius: 999px;
    border: var(--uif-color-picker-panel-border-size) solid var(--uif-color-picker-focus-ring-color);
    background: var(--uif-color-picker-panel-background);
  }

  .uif-color-picker-slider::-moz-range-thumb {
    inline-size: var(--uif-color-picker-slider-thumb-size);
    block-size: var(--uif-color-picker-slider-thumb-size);
    border-radius: 999px;
    border: var(--uif-color-picker-panel-border-size) solid var(--uif-color-picker-focus-ring-color);
    background: var(--uif-color-picker-panel-background);
  }

  .uif-color-picker-wheel {
    inline-size: calc(var(--uif-color-picker-control-height) * 2.5);
    block-size: calc(var(--uif-color-picker-control-height) * 2.5);
    border-radius: 999px;
    border: var(--uif-color-picker-panel-border-size) solid var(--uif-color-picker-panel-border-color);
    background:
      radial-gradient(circle, var(--uif-color-picker-panel-background) 36%, transparent 37%),
      conic-gradient(
        hsl(0deg 100% 50%),
        hsl(60deg 100% 50%),
        hsl(120deg 100% 50%),
        hsl(180deg 100% 50%),
        hsl(240deg 100% 50%),
        hsl(300deg 100% 50%),
        hsl(360deg 100% 50%)
      );
    justify-self: center;
  }

  .uif-color-picker-swatch {
    inline-size: var(--uif-color-picker-swatch-size);
    block-size: var(--uif-color-picker-swatch-size);
    border-radius: var(--uif-color-picker-swatch-border-radius);
    border: var(--uif-color-picker-panel-border-size) solid var(--uif-color-picker-swatch-border-color);
    background: var(--uif-color-picker-accent-color);
    justify-self: center;
  }

  .uif-color-picker-inputs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--uif-color-picker-gap);
  }

  .uif-color-picker-input-group {
    display: grid;
    gap: calc(var(--uif-color-picker-gap) / 2);
    font-size: var(--uif-input-font-size);
    color: var(--uif-color-picker-text-color-subtle);
  }

  .uif-color-picker-input {
    inline-size: 100%;
    block-size: var(--uif-color-picker-control-height);
    border-radius: var(--uif-color-picker-swatch-border-radius);
    border: var(--uif-color-picker-panel-border-size) solid var(--uif-color-picker-panel-border-color);
    background: var(--uif-color-picker-panel-background);
    color: var(--uif-color-picker-text-color-default);
    padding-inline: calc(var(--uif-color-picker-gap) / 2);
    font: inherit;
  }

  .uif-color-picker-input:focus-visible {
    outline: var(--uif-color-picker-focus-ring-size) solid var(--uif-color-picker-focus-ring-color);
    outline-offset: 1px;
  }

  .uif-color-picker-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: calc(var(--uif-color-picker-gap) / 2);
  }

  .uif-color-picker-grid-item {
    inline-size: 100%;
    block-size: var(--uif-color-picker-control-height);
    border: var(--uif-color-picker-panel-border-size) solid var(--uif-color-picker-swatch-border-color);
    border-radius: calc(var(--uif-color-picker-swatch-border-radius) / 2);
    background: var(--uif-color-picker-accent-color);
    cursor: pointer;
  }
}
@layer components {
  :is(.uif-notification-stack, .notification-stack) {
    display: grid;
    gap: var(--size-spacing-300);
  }

  :is(.uif-notification, .notification) {
    --_notification-accent-color: var(--uif-notification-accent-color-info);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: var(--size-spacing-300);
    inline-size: min(100%, 32rem);
    padding: var(--size-spacing-300) var(--size-spacing-400);
    border: var(--size-border-100) solid var(--uif-notification-container-border-color-default);
    border-inline-start-width: var(--size-border-200);
    border-inline-start-color: var(--_notification-accent-color);
    border-radius: var(--size-radius-200);
    background: var(--uif-notification-container-background-default);
    color: var(--uif-notification-text-color-default);
  }

  :is(.uif-notification, .notification).is-success {
    --_notification-accent-color: var(--uif-notification-accent-color-success);
  }

  :is(.uif-notification, .notification).is-warning {
    --_notification-accent-color: var(--uif-notification-accent-color-warning);
  }

  :is(.uif-notification, .notification).is-error {
    --_notification-accent-color: var(--uif-notification-accent-color-error);
  }

  :is(.uif-notification-icon, .notification-icon) {
    inline-size: var(--size-spacing-300);
    block-size: var(--size-spacing-300);
    border-radius: var(--size-radius-full);
    margin-block-start: var(--size-spacing-100);
    background: var(--_notification-accent-color);
  }

  :is(.uif-notification-content, .notification-content) {
    display: grid;
    gap: var(--size-spacing-200);
    min-inline-size: 0;
  }

  :is(.uif-notification-message, .notification-message) {
    margin: 0;
  }

  :is(.uif-notification-action, .notification-action) {
    border: none;
    background: transparent;
    padding: 0;
    font: inherit;
    cursor: pointer;
    color: var(--uif-notification-action-text-color-default);
    text-decoration: underline;
    text-underline-offset: 0.12em;
  }

  :is(.uif-notification-action, .notification-action):hover,
  :is(.uif-notification-action, .notification-action):focus-visible {
    color: var(--uif-notification-action-text-color-hover);
  }

  :is(.uif-notification-dismiss, .notification-dismiss) {
    border: none;
    background: transparent;
    color: var(--uif-notification-dismiss-icon-color-default);
    font: inherit;
    cursor: pointer;
    line-height: 1;
    padding: var(--size-spacing-100);
  }

  :is(.uif-notification-dismiss, .notification-dismiss):hover,
  :is(.uif-notification-dismiss, .notification-dismiss):focus-visible {
    color: var(--uif-notification-dismiss-icon-color-hover);
  }
}