/* Native appearance with a Brand A geometry reset and a system Sans Serif font. */
@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;
    }
  }
}
/* Generated geometry-only dependency closure from existing Brand A tokens. */
@layer tokens {
  :root {
    --font-weight-700: 700;
    --uif-appearance-typography-heading-font-weight: var(--font-weight-700);
    --uif-semantic-typography-heading-font-weight: var(--uif-appearance-typography-heading-font-weight);
    --typography-heading-font-weight: var(--uif-semantic-typography-heading-font-weight);
    --font-size-xxxl: 2.5rem;
    --uif-appearance-projection-font-size-xxxl: var(--font-size-xxxl);
    --uif-semantic-scale-font-size-xxxl: var(--uif-appearance-projection-font-size-xxxl);
    --typography-heading-font-size-xxxl: var(--uif-semantic-scale-font-size-xxxl);
    --line-height-xxxl: 3.5rem;
    --uif-appearance-projection-line-height-xxxl: var(--line-height-xxxl);
    --uif-semantic-scale-line-height-xxxl: var(--uif-appearance-projection-line-height-xxxl);
    --typography-heading-line-height-xxxl: var(--uif-semantic-scale-line-height-xxxl);
    --font-size-xxl: 2rem;
    --uif-appearance-projection-font-size-xxl: var(--font-size-xxl);
    --uif-semantic-scale-font-size-xxl: var(--uif-appearance-projection-font-size-xxl);
    --typography-heading-font-size-xxl: var(--uif-semantic-scale-font-size-xxl);
    --line-height-xxl: 2.75rem;
    --uif-appearance-projection-line-height-xxl: var(--line-height-xxl);
    --uif-semantic-scale-line-height-xxl: var(--uif-appearance-projection-line-height-xxl);
    --typography-heading-line-height-xxl: var(--uif-semantic-scale-line-height-xxl);
    --font-size-xl: 1.5rem;
    --uif-appearance-projection-font-size-xl: var(--font-size-xl);
    --uif-semantic-scale-font-size-xl: var(--uif-appearance-projection-font-size-xl);
    --typography-heading-font-size-xl: var(--uif-semantic-scale-font-size-xl);
    --line-height-xl: 2rem;
    --uif-appearance-projection-line-height-xl: var(--line-height-xl);
    --uif-semantic-scale-line-height-xl: var(--uif-appearance-projection-line-height-xl);
    --typography-heading-line-height-xl: var(--uif-semantic-scale-line-height-xl);
    --font-size-lg: 1.25rem;
    --uif-appearance-projection-font-size-lg: var(--font-size-lg);
    --uif-semantic-scale-font-size-lg: var(--uif-appearance-projection-font-size-lg);
    --typography-heading-font-size-lg: var(--uif-semantic-scale-font-size-lg);
    --line-height-lg: 1.75rem;
    --uif-appearance-projection-line-height-lg: var(--line-height-lg);
    --uif-semantic-scale-line-height-lg: var(--uif-appearance-projection-line-height-lg);
    --typography-heading-line-height-lg: var(--uif-semantic-scale-line-height-lg);
    --font-size-md: 1rem;
    --uif-appearance-projection-font-size-md: var(--font-size-md);
    --uif-semantic-scale-font-size-md: var(--uif-appearance-projection-font-size-md);
    --typography-heading-font-size-md: var(--uif-semantic-scale-font-size-md);
    --line-height-md: 1.5rem;
    --uif-appearance-projection-line-height-md: var(--line-height-md);
    --uif-semantic-scale-line-height-md: var(--uif-appearance-projection-line-height-md);
    --typography-heading-line-height-md: var(--uif-semantic-scale-line-height-md);
    --font-size-sm: .875rem;
    --uif-appearance-projection-font-size-sm: var(--font-size-sm);
    --uif-semantic-scale-font-size-sm: var(--uif-appearance-projection-font-size-sm);
    --typography-heading-font-size-sm: var(--uif-semantic-scale-font-size-sm);
    --line-height-sm: 1.25rem;
    --uif-appearance-projection-line-height-sm: var(--line-height-sm);
    --uif-semantic-scale-line-height-sm: var(--uif-appearance-projection-line-height-sm);
    --typography-heading-line-height-sm: var(--uif-semantic-scale-line-height-sm);
    --font-weight-400: 400;
    --uif-appearance-projection-font-weight-400: var(--font-weight-400);
    --uif-semantic-scale-font-weight-400: var(--uif-appearance-projection-font-weight-400);
    --typography-body-font-weight: var(--uif-semantic-scale-font-weight-400);
    --typography-body-line-height: var(--uif-semantic-scale-line-height-md);
    --size-target-default: 2.5rem;
    --uif-appearance-projection-size-target-default: var(--size-target-default);
    --uif-semantic-scale-size-target-default: var(--uif-appearance-projection-size-target-default);
    --uif-button-height-min: var(--uif-semantic-scale-size-target-default);
    --size-spacing-400: 1rem;
    --brand-size-spacing-spacious: var(--size-spacing-400);
    --uif-semantic-size-spacing-spacious: var(--brand-size-spacing-spacious);
    --uif-button-padding-inline: var(--uif-semantic-size-spacing-spacious);
    --size-spacing-200: .5rem;
    --brand-size-spacing-component: var(--size-spacing-200);
    --uif-semantic-size-spacing-component: var(--brand-size-spacing-component);
    --uif-button-padding-block: var(--uif-semantic-size-spacing-component);
    --size-border-100: .0625rem;
    --brand-size-border-default: var(--size-border-100);
    --uif-semantic-size-border-default: var(--brand-size-border-default);
    --uif-button-border-size-default: var(--uif-semantic-size-border-default);
    --font-weight-600: 600;
    --brand-typography-ui-font-weight: var(--font-weight-600);
    --uif-appearance-projection-size-spacing-200: var(--size-spacing-200);
    --uif-semantic-scale-size-spacing-200: var(--uif-appearance-projection-size-spacing-200);
    --typography-label-gap: var(--uif-semantic-scale-size-spacing-200);
    --uif-input-gap: var(--uif-semantic-size-spacing-component);
    --uif-input-height: var(--uif-semantic-scale-size-target-default);
    --uif-input-padding-inline: var(--uif-semantic-size-spacing-component);
    --uif-input-padding-block: var(--uif-semantic-size-spacing-component);
    --uif-input-border-size-default: var(--uif-semantic-size-border-default);
    --uif-semantic-typography-label-font-size: var(--uif-appearance-projection-font-size-md);
    --uif-input-font-size: var(--uif-semantic-typography-label-font-size);
    --uif-semantic-typography-body-line-height: var(--uif-appearance-projection-line-height-md);
    --uif-input-line-height: var(--uif-semantic-typography-body-line-height);
    --uif-semantic-typography-ui-font-weight: var(--brand-typography-ui-font-weight);
    --uif-input-font-weight: var(--uif-semantic-typography-ui-font-weight);
    --uif-select-height: var(--uif-semantic-scale-size-target-default);
    --uif-select-font-size: var(--uif-semantic-typography-label-font-size);
    --uif-select-line-height: var(--uif-semantic-typography-body-line-height);
    --uif-semantic-typography-body-font-weight: var(--uif-appearance-projection-font-weight-400);
    --uif-select-font-weight: var(--uif-semantic-typography-body-font-weight);
    --uif-select-padding-inline: var(--uif-semantic-size-spacing-component);
    --uif-select-padding-block: var(--uif-semantic-size-spacing-component);
    --uif-select-border-size-default: var(--uif-semantic-size-border-default);
    --uif-textarea-line-height: var(--uif-semantic-typography-body-line-height);
    --size-spacing-300: .75rem;
    --brand-size-spacing-comfortable: var(--size-spacing-300);
    --uif-semantic-size-spacing-comfortable: var(--brand-size-spacing-comfortable);
    --uif-textarea-padding-block: var(--uif-semantic-size-spacing-comfortable);
    --uif-textarea-padding-inline: var(--uif-semantic-size-spacing-comfortable);
    --uif-textarea-border-size-default: var(--uif-semantic-size-border-default);
    --uif-semantic-typography-body-font-size: var(--uif-appearance-projection-font-size-md);
    --uif-textarea-font-size: var(--uif-semantic-typography-body-font-size);
    --typography-label-font-size: var(--uif-semantic-scale-font-size-md);
    --typography-label-line-height: var(--uif-semantic-scale-line-height-md);
    --uif-appearance-projection-font-weight-600: var(--font-weight-600);
    --uif-semantic-scale-font-weight-600: var(--uif-appearance-projection-font-weight-600);
    --typography-label-font-weight: var(--uif-semantic-scale-font-weight-600);
    --size-spacing-600: 1.5rem;
    --size-spacing-1000: 4rem;
    --uif-tabs-padding-inline: var(--uif-semantic-size-spacing-spacious);
    --uif-tabs-padding-block: var(--uif-semantic-size-spacing-comfortable);
    --font-weight-500: 500;
    --uif-calendar-container-gap: var(--uif-semantic-size-spacing-component);
    --uif-calendar-container-padding: var(--uif-semantic-size-spacing-component);
    --uif-calendar-header-gap: var(--uif-semantic-size-spacing-component);
    --uif-calendar-weekday-height: 1.75rem;
    --font-size-xs: .75rem;
    --uif-appearance-projection-font-size-xs: var(--font-size-xs);
    --uif-semantic-scale-font-size-xs: var(--uif-appearance-projection-font-size-xs);
    --uif-calendar-weekday-font-size: var(--uif-semantic-scale-font-size-xs);
    --size-spacing-050: .125rem;
    --uif-appearance-projection-size-spacing-050: var(--size-spacing-050);
    --uif-semantic-scale-size-spacing-050: var(--uif-appearance-projection-size-spacing-050);
    --uif-calendar-cell-gap: var(--uif-semantic-scale-size-spacing-050);
    --uif-calendar-cell-min-size: var(--uif-semantic-scale-size-target-default);
    --uif-calendar-cell-range-border-size: var(--uif-semantic-size-border-default);
    --typography-body-font-size: var(--uif-semantic-scale-font-size-md);
    --uif-tooltip-padding-inline: var(--uif-semantic-size-spacing-comfortable);
    --uif-tooltip-padding-block: var(--uif-semantic-size-spacing-component);
    --size-spacing-100: .25rem;
    --brand-size-spacing-tight: var(--size-spacing-100);
    --uif-semantic-size-spacing-tight: var(--brand-size-spacing-tight);
    --uif-badge-gap: var(--uif-semantic-size-spacing-tight);
    --uif-badge-font-size-md: .875rem;
    --uif-badge-line-height-md: 1.25rem;
    --uif-badge-padding-inline-md: var(--uif-semantic-size-spacing-comfortable);
    --uif-badge-padding-block-md: var(--uif-semantic-size-spacing-tight);
    --uif-badge-height-min: var(--uif-semantic-scale-size-target-default);
    --uif-badge-width-min: var(--uif-semantic-scale-size-target-default);
    --uif-form-gap: var(--uif-semantic-size-spacing-spacious);
    --uif-form-padding-inline: var(--uif-semantic-size-spacing-spacious);
    --uif-form-padding-block: var(--uif-semantic-size-spacing-spacious);
    --uif-form-group-gap: var(--uif-semantic-size-spacing-spacious);
    --uif-form-field-gap: var(--uif-semantic-size-spacing-component);
    --container-400: 768px;
    --size-spacing-500: 1.25rem;
    --uif-accordion-padding-inline: var(--uif-semantic-size-spacing-spacious);
    --uif-accordion-padding-block: var(--uif-semantic-size-spacing-comfortable);
  }
}
@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 {
  :where(uif-accordion, uif-accordion-item, uif-tab-list, uif-tab-panel,
    uif-form, uif-form-group, uif-form-field, uif-form-helper, uif-form-actions,
    uif-dialog, uif-meter, uif-progress-bar, uif-inline-alert,
    uif-illustrated-message) {
    display: block;
  }

  :where(uif-tab-panel[hidden], .uif-tab-panel[hidden], .uif-inline-alert.is-hidden) {
    display: none !important;
  }

  :where(.uif-label-content, .uif-input-field, .uif-input-field-control, .date-segments) {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
  }

  :where(.uif-input-field-control:empty) { display: none; }
  :where(.uif-input-field):has(.uif-input:disabled, .uif-input:placeholder-shown)
    .uif-input-field-control { visibility: hidden; }

  :where(.uif-tab-list, .uif-button-group) {
    display: flex;
    flex-wrap: wrap;
  }
  :where(.uif-tab-list[aria-orientation="vertical"], .uif-button-group[data-orientation="vertical"]) {
    flex-direction: column;
  }
  :where(.uif-tab[aria-selected="true"]) { text-decoration: underline; }
  :where(.uif-accordion-item.is-disabled) > summary {
    pointer-events: none;
    color: GrayText;
  }

  /* Existing Tooltip interaction is CSS-driven. Native system colors keep
     the overlaid content readable; this is not a custom Brand surface. */
  :where(.uif-tooltip-trigger) { position: relative; display: inline-block; }
  :where(.uif-tooltip) {
    display: none;
    position: absolute;
    z-index: 1;
    inline-size: max-content;
    max-inline-size: min(25em, 90vw);
    color: CanvasText;
    background: Canvas;
    border: 1px solid ButtonBorder;
  }
  :where(.uif-tooltip-trigger:hover, .uif-tooltip-trigger:focus-within) > .uif-tooltip,
  :where(.uif-tooltip.is-visible) { display: block; }
  :where(.uif-tooltip[data-placement="top"]) { inset-block-end: 100%; inset-inline-start: 0; }
  :where(.uif-tooltip[data-placement="bottom"]) { inset-block-start: 100%; inset-inline-start: 0; }
  :where(.uif-tooltip[data-placement="left"]) { inset-inline-end: 100%; inset-block-start: 0; }
  :where(.uif-tooltip[data-placement="right"]) { inset-inline-start: 100%; inset-block-start: 0; }

  :where(.uif-input-field.date) { position: relative; }
  :where(.date-segment.day, .date-segment.month) { inline-size: calc(2ch + 0.5em + 2px); }
  :where(.date-segment.year) { inline-size: calc(4ch + 0.5em + 2px); }
  :where(.uif-input-field.date) .uif-calendar {
    display: none;
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    z-index: 1;
    color: CanvasText;
    background: Canvas;
    border: 1px solid ButtonBorder;
  }
  :where(.uif-input-field.date.is-open) .uif-calendar { display: block; }
  :where(.uif-calendar-header, .uif-calendar-selectors, .uif-calendar-nav) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  :where(.uif-calendar-cell[aria-selected="true"], .uif-calendar-cell.is-in-range,
    .uif-table tr[aria-selected="true"]) {
    color: HighlightText;
    background: Highlight;
  }
  :where(.uif-calendar-cell.is-today) { text-decoration: underline; }
  :where(.uif-calendar-nav-button[aria-disabled="true"]) { pointer-events: none; }

  :where(.uif-meter-track, .uif-progress-bar-track) { display: none; }
  :where(.uif-meter-header, .uif-progress-bar-header) {
    display: flex;
    gap: 0.25em;
  }
  :where(.uif-status-light-indicator)::before { content: "●"; }

  :where(.uif-table th[aria-sort="none"])::before { content: "↕ "; }
  :where(.uif-table th[aria-sort="ascending"])::before { content: "↑ "; }
  :where(.uif-table th[aria-sort="descending"])::before { content: "↓ "; }
  :where(.uif-table th[data-resizable]) { position: relative; }
  :where(.uif-table th[data-resizable])::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: 0.5em;
    border-inline-end: 1px solid ButtonBorder;
    cursor: col-resize;
  }
}
/* Base reset shares Brand A dimensions, while native appearance stays in charge. */
@layer base {
  :root { font-family: system-ui, sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5; }
  :where(h1,h2,h3,h4,h5,h6,.heading) { font-weight: var(--typography-heading-font-weight); }
  :where(h1,.heading-xxxl) { font-size: var(--typography-heading-font-size-xxxl); line-height: var(--typography-heading-line-height-xxxl); }
  :where(h2,.heading-xxl) { font-size: var(--typography-heading-font-size-xxl); line-height: var(--typography-heading-line-height-xxl); }
  :where(h3,.heading-xl) { font-size: var(--typography-heading-font-size-xl); line-height: var(--typography-heading-line-height-xl); }
  :where(h4,.heading-lg) { font-size: var(--typography-heading-font-size-lg); line-height: var(--typography-heading-line-height-lg); }
  :where(h5,.heading-md) { font-size: var(--typography-heading-font-size-md); line-height: var(--typography-heading-line-height-md); }
  :where(h6,.heading-sm) { font-size: var(--typography-heading-font-size-sm); line-height: var(--typography-heading-line-height-sm); }
  :where(p,span,.body) { font-weight: var(--typography-body-font-weight); line-height: var(--typography-body-line-height); }
}
@layer components {
  :where(.uif-button) { min-block-size: var(--uif-button-height-min); max-inline-size: 100%; white-space: normal; padding-inline: var(--uif-button-padding-inline); padding-block: var(--uif-button-padding-block); border-width: var(--uif-button-border-size-default); font-weight: var(--brand-typography-ui-font-weight); }
  :where(.uif-button .uif-label-content,.uif-button .uif-label-content-text,.uif-field-label .uif-label-content-text) { font-weight: var(--brand-typography-ui-font-weight); line-height: inherit; }
  :where(.uif-label-content) { gap: var(--typography-label-gap); }
  :where(.uif-input-field) { gap: var(--uif-input-gap); inline-size: 100%; }
  /* The native input owns the visible field box, rather than a second styled frame. */
  :where(.uif-input) { min-inline-size: 0; inline-size: 100%; block-size: var(--uif-input-height); padding-inline: var(--uif-input-padding-inline); padding-block: var(--uif-input-padding-block); border-width: var(--uif-input-border-size-default); font-size: var(--uif-input-font-size); line-height: var(--uif-input-line-height); font-weight: var(--uif-input-font-weight); }
  :where(.uif-input-field:not(.date)) { font-size: var(--uif-input-font-size); line-height: var(--uif-input-line-height); font-weight: var(--uif-input-font-weight); }
  :where(.uif-input-field-control) { gap: var(--uif-input-gap); }
  :where(.uif-input-field-control button) { padding: 0; font-size: inherit; line-height: 1; }
  :where(.uif-select) { inline-size: 100%; block-size: var(--uif-select-height); font-size: var(--uif-select-font-size); line-height: var(--uif-select-line-height); font-weight: var(--uif-select-font-weight); padding-inline: var(--uif-select-padding-inline); padding-block: var(--uif-select-padding-block); border-width: var(--uif-select-border-size-default); }
  :where(.uif-textarea) { 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); border-width: var(--uif-textarea-border-size-default); font-size: var(--uif-textarea-font-size); line-height: var(--uif-textarea-line-height); }
  :where(.uif-checkbox-field,.uif-radio-field,.uif-switch-field) { display: inline-flex; align-items: center; gap: var(--typography-label-gap); font-size: var(--typography-label-font-size); line-height: var(--typography-label-line-height); font-weight: var(--typography-label-font-weight); }
  :where(.uif-checkbox,.uif-radio) { inline-size: var(--size-spacing-600); block-size: var(--size-spacing-600); }
  :where(.uif-switch) { inline-size: var(--size-spacing-1000); block-size: var(--size-spacing-600); }
  :where(.uif-input-field.date) { flex-wrap: wrap; }
  :where(.uif-field-label) { gap: 0.25em; font-weight: var(--brand-typography-ui-font-weight); line-height: inherit; }
  :where(.uif-tab) { padding-inline: var(--uif-tabs-padding-inline); padding-block: var(--uif-tabs-padding-block); font-size: var(--font-size-md); font-weight: var(--font-weight-500); line-height: var(--line-height-md); }
  :where(.uif-tab[aria-selected="true"]) { font-weight: var(--font-weight-600); }
  :where(.uif-tab-panel) { padding-block: var(--size-spacing-400); }
  :where(.uif-calendar) { display: flex; flex-direction: column; gap: var(--uif-calendar-container-gap); inline-size: fit-content; max-inline-size: 100%; overflow: auto; }
  :where(.uif-calendar.has-container) { padding: var(--uif-calendar-container-padding); }
  :where(.uif-calendar-header,.uif-calendar-selectors,.uif-calendar-nav) { gap: var(--uif-calendar-header-gap); }
  :where(.uif-calendar-header .uif-select) { inline-size: auto; block-size: auto; min-block-size: auto; padding-block: 0; }
  :where(.uif-calendar-header select[name="month"]) { min-inline-size: 12ch; }
  :where(.uif-calendar-header select[name="year"]) { min-inline-size: 7ch; }
  :where(.uif-calendar-table) { border-spacing: 0; inline-size: 100%; }
  :where(.uif-calendar-table th) { block-size: var(--uif-calendar-weekday-height); font-size: var(--uif-calendar-weekday-font-size); font-weight: normal; }
  :where(.uif-calendar-table td) { padding: var(--uif-calendar-cell-gap); }
  :where(.uif-calendar-cell) { min-inline-size: var(--uif-calendar-cell-min-size); min-block-size: var(--uif-calendar-cell-min-size); font-size: var(--typography-label-font-size); font-weight: var(--typography-label-font-weight); line-height: var(--typography-label-line-height); padding: 0; border-width: var(--uif-calendar-cell-range-border-size); }
  :where(.uif-table) { inline-size: 100%; font-size: var(--typography-body-font-size); font-weight: var(--typography-body-font-weight); line-height: var(--typography-body-line-height); }
  :where(.uif-table th,.uif-table td) { padding-block: var(--brand-size-spacing-component); padding-inline: var(--brand-size-spacing-comfortable); }
  :where(.uif-table th) { font-size: var(--typography-label-font-size); font-weight: var(--typography-label-font-weight); line-height: var(--typography-label-line-height); }
  :where(.uif-tooltip) { max-inline-size: 15rem; padding-inline: var(--uif-tooltip-padding-inline); padding-block: var(--uif-tooltip-padding-block); font-size: var(--font-size-sm); line-height: var(--line-height-sm); }
  :where(.uif-badge) { display: inline-flex; align-items: center; gap: var(--uif-badge-gap); 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); }
  :where(.uif-badge-text) { font-weight: var(--brand-typography-ui-font-weight); }
  :where(.uif-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); }
  :where(.uif-form-group) { display: flex; flex-direction: column; gap: var(--uif-form-group-gap); padding: 0; min-inline-size: 0; }
  :where(.uif-form-field) { display: flex; flex-direction: column; gap: var(--uif-form-field-gap); }
  :where(dialog.uif-dialog) { inline-size: min(100% - (var(--size-spacing-400) * 2), var(--container-400)); max-block-size: calc(100dvh - (var(--size-spacing-400) * 2)); padding: var(--size-spacing-500); }
  :where(.uif-dialog-header,.uif-dialog-actions) { display: flex; justify-content: space-between; gap: var(--size-spacing-300); }
  :where(.uif-dialog-title) { font-size: var(--font-size-xl); line-height: var(--line-height-xl); }

  :where(.uif-accordion-item > summary,.uif-accordion-item-content) { padding-inline: var(--uif-accordion-padding-inline); padding-block: var(--uif-accordion-padding-block); font-size: var(--font-size-md); line-height: var(--line-height-md); }
  :where(.uif-accordion-item > summary) { font-weight: var(--font-weight-600); }
  :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); }
}