/**
 * Component rules for @basenative/platform.
 * Colour, type, radius, spacing, blur, and shadow come from @layer tokens
 * (tokens.css and materials.css). This file references those custom
 * properties. A raw colour or length here fails scripts/platform-token-lint.js.
 * corner-shape: squircle is a CSS curve, not a copied asset.
 */
@layer tokens, components, states;

@layer components {
  [data-bn-wallpaper='true'] {
    background-color: var(--bn-glass-opaque);
    background-image: radial-gradient(
      var(--bn-len-42rem) var(--bn-len-24rem) at 8% 0%,
      color-mix(in srgb, var(--bn-brand) 16%, transparent),
      transparent 72%
    );
    background-attachment: scroll;
  }

  [data-bn='bn-button'],
  [data-bn='bn-popup-button'],
  [data-bn='bn-pulldown-button'],
  [data-bn='bn-action'],
  [data-bn='bn-menu-item'],
  [data-bn='bn-toolbar-item'],
  [data-bn='bn-key'],
  [data-bn='bn-date-chip'],
  [data-bn='bn-date-day'],
  [data-bn='bn-page-dot'],
  [data-bn='bn-share-action'],
  [data-bn='bn-share-close'],
  [data-bn='bn-color-swatch'],
  [data-bn='bn-stepper-dec'],
  [data-bn='bn-stepper-inc'],
  [data-bn='bn-popover-button'],
  [data-bn='bn-tooltip-button'],
  [data-bn='bn-menubar-item'] {
    font: inherit;
    color: inherit;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
  }

  [data-bn='bn-symbol'] {
    display: inline-block;
    line-height: 1;
    font-style: normal;
  }

  /* Buttons — iOS content area, page 507:24673 */
  [data-bn='bn-button'] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bn-len-4);
    min-height: var(--bn-len-50);
    padding: var(--bn-len-14) var(--bn-len-20);
    border-radius: var(--bn-plat-radius-1000);
    font-size: var(--bn-plat-font-body-size);
    line-height: var(--bn-plat-font-body-leading);
    letter-spacing: var(--bn-plat-font-body-tracking);
    font-weight: var(--bn-plat-font-body-weight);
    color: var(--bn-brand-ink);
    background: var(--bn-brand);
    text-decoration: none;
    white-space: nowrap;
  }

  @supports (corner-shape: squircle) {
    [data-bn='bn-button'],
    [data-bn='bn-segmented'],
    [data-bn='bn-alert'],
    [data-bn='bn-action-sheet'] {
      corner-shape: squircle;
    }
  }

  [data-bn='bn-button'][data-size='medium'] {
    min-height: var(--bn-len-34);
    padding: var(--bn-len-7) var(--bn-len-14);
  }

  [data-bn='bn-button'][data-size='small'] {
    min-height: var(--bn-len-28);
    padding: var(--bn-len-4) var(--bn-len-10);
    gap: var(--bn-len-3);
  }

  [data-bn='bn-button'][data-variant='prominent'] {
    background: var(--bn-brand);
    color: var(--bn-brand-ink);
    box-shadow: var(--bn-elev-1);
  }

  [data-bn='bn-button'][data-variant='bordered'] {
    background: var(--bn-button-secondary-fill);
    color: var(--bn-button-secondary-label);
  }

  [data-bn='bn-button'][data-variant='borderless'] {
    background: transparent;
    color: var(--bn-brand-text);
  }

  [data-bn='bn-button'][data-variant='borderless'][data-size='large'] {
    border-radius: var(--bn-plat-radius-12);
  }

  [data-bn='bn-button'][data-variant='borderless'][data-size='medium'],
  [data-bn='bn-button'][data-variant='borderless'][data-size='small'] {
    border-radius: var(--bn-plat-radius-40);
  }

  [data-bn='bn-button'][data-label='icon'] {
    width: var(--bn-len-50);
    padding: 0;
    border-radius: var(--bn-plat-radius-500);
  }

  [data-bn='bn-button'][data-label='icon'][data-size='medium'] {
    width: var(--bn-len-34);
  }

  [data-bn='bn-button'][data-label='icon'][data-size='small'] {
    width: var(--bn-len-28);
  }

  [data-bn='bn-button'][data-label='both'] {
    gap: var(--bn-len-4);
  }

  [data-bn='bn-button'][data-destructive='true'][data-variant='prominent'] {
    background: var(--bn-plat-color-accents-red);
    color: var(--bn-brand-ink);
    box-shadow: var(--bn-elev-1);
  }

  [data-bn='bn-button'][data-destructive='true'][data-variant='bordered'] {
    background: var(--bn-plat-color-miscellaneous-buttons-bg-destructive);
    color: var(--bn-danger-label);
  }

  [data-bn='bn-button'][data-destructive='true'][data-variant='borderless'],
  [data-bn='bn-button'][data-destructive='true'][data-variant='glass'],
  [data-bn='bn-button'][data-destructive='true'][data-variant='glass-prominent'] {
    color: var(--bn-danger-label);
  }

  [data-bn='bn-button'][data-variant='glass'],
  [data-bn='bn-button'][data-variant='glass-prominent'] {
    border-radius: var(--bn-plat-radius-1000);
    color: var(--bn-plat-color-labels-primary);
    background: var(--bn-glass-sm);
    backdrop-filter: saturate(var(--bn-glass-saturate)) blur(var(--bn-glass-blur));
    box-shadow: var(--bn-elev-1);
  }

  [data-bn='bn-button'][data-variant='glass-prominent'] {
    background: var(--bn-brand);
    color: var(--bn-brand-ink);
    font-weight: var(--bn-plat-weight-medium);
  }

  [data-bn='bn-button'][data-variant='glass'][data-size='small'],
  [data-bn='bn-button'][data-variant='glass-prominent'][data-size='small'] {
    min-height: var(--bn-len-28);
    padding: var(--bn-len-5) var(--bn-len-10);
  }

  [data-bn='bn-button'][data-variant='glass'][data-size='medium'],
  [data-bn='bn-button'][data-variant='glass-prominent'][data-size='medium'] {
    min-height: var(--bn-len-34);
    padding: var(--bn-len-8) var(--bn-len-12);
  }

  [data-bn='bn-button'][data-variant='glass'][data-size='large'],
  [data-bn='bn-button'][data-variant='glass-prominent'][data-size='large'] {
    min-height: var(--bn-len-50);
    padding: var(--bn-len-16) var(--bn-len-20);
  }

  [data-bn-platform='macos'] [data-bn='bn-button'],
  [data-bn-platform='macos'][data-bn='bn-button'] {
    min-height: var(--bn-plat-control-global-height);
    padding: 0 var(--bn-plat-control-button-padding-horizontal);
    border-radius: var(--bn-plat-control-button-radius);
    font-size: var(--bn-plat-control-global-font-size);
    line-height: 1.2;
    letter-spacing: 0;
    font-weight: var(--bn-plat-weight-regular);
    width: auto;
  }

  [data-bn-platform='macos'] [data-bn='bn-button'][data-variant='bordered'],
  [data-bn-platform='macos'][data-bn='bn-button'][data-variant='bordered'] {
    background: var(--bn-plat-color-fills-opaque-primary);
    color: var(--bn-plat-color-labels-primary);
  }

  [data-theme='dark'] [data-bn='bn-button'][data-variant='bordered'],
  [data-theme='dark'] [data-bn-platform='macos'] [data-bn='bn-button'][data-variant='bordered'] {
    background: var(--bn-button-secondary-fill);
    color: var(--bn-button-secondary-label);
  }

  [data-bn-platform='macos'] [data-bn='bn-button'][data-label='icon'],
  [data-bn-platform='macos'][data-bn='bn-button'][data-label='icon'] {
    width: var(--bn-plat-control-global-height);
    padding: 0;
  }

  [data-bn='bn-popup-button'],
  [data-bn='bn-pulldown-button'] {
    display: inline-flex;
    align-items: center;
    gap: var(--bn-len-3);
    min-height: var(--bn-len-44);
    padding: var(--bn-len-13) 0;
    color: var(--bn-plat-color-accents-blue);
    font-size: var(--bn-type-18);
    line-height: var(--bn-type-18);
    font-weight: var(--bn-plat-weight-semibold);
  }

  [data-bn-platform='macos'] [data-bn='bn-popup-button'],
  [data-bn-platform='macos'] [data-bn='bn-pulldown-button'] {
    min-height: var(--bn-plat-control-global-height);
    padding: 0 var(--bn-plat-control-popup-inset-left);
    border-radius: var(--bn-plat-control-global-radius);
    background: var(--bn-plat-color-fills-opaque-primary);
    color: var(--bn-plat-color-labels-primary);
    font-size: var(--bn-plat-control-global-font-size);
    font-weight: var(--bn-plat-weight-regular);
  }

  /* Segmented — track Fills/Tertiary, radius 100; selected pill shadow 0 2px 20px #0000000f */
  [data-bn='bn-segmented'] {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    margin: 0;
    border: 0;
    padding: 0;
    min-height: var(--bn-len-50);
    min-inline-size: 0;
    max-inline-size: 100%;
    border-radius: var(--bn-plat-radius-100);
    background: var(--bn-plat-color-fills-tertiary);
  }

  [data-bn='bn-segmented'][data-size='small'] {
    min-height: var(--bn-len-32);
  }

  [data-bn='bn-segment'] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 0;
    padding: var(--bn-len-3) var(--bn-len-6);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-radius: var(--bn-plat-radius-1000);
    color: var(--bn-plat-color-labels-primary);
    font-size: var(--bn-type-13_33);
    line-height: var(--bn-type-18);
    letter-spacing: var(--bn-type-neg-0_08);
    font-weight: var(--bn-plat-weight-semibold);
  }

  [data-bn='bn-segment'] input {
    appearance: none;
    position: absolute;
    opacity: 0;
    width: var(--bn-len-1);
    height: var(--bn-len-1);
  }

  [data-bn='bn-segment']:has(input:checked),
  [data-bn='bn-segment'][data-selected='true'] {
    background: var(--bn-plat-color-miscellaneous-segmented-control-selected-fill);
    box-shadow: 0 var(--bn-len-2) var(--bn-len-20) var(--bn-plat-swatch-0000000f);
  }

  [data-bn-platform='macos'] [data-bn='bn-segmented'] {
    min-height: var(--bn-plat-control-global-height);
    border-radius: var(--bn-plat-control-global-radius);
    padding: 0;
    background: var(--bn-plat-color-fills-opaque-primary);
    overflow: hidden;
  }

  [data-bn-platform='macos'] [data-bn='bn-segment'] {
    font-size: var(--bn-plat-control-global-font-size);
    letter-spacing: 0;
    border-radius: 0;
    padding: 0 var(--bn-plat-control-segmented-control-margins);
  }

  [data-bn-platform='macos'] [data-bn='bn-segment']:has(input:checked),
  [data-bn-platform='macos'] [data-bn='bn-segment'][data-selected='true'] {
    background: var(--bn-plat-color-accents-blue);
    color: var(--bn-plat-color-grays-white);
    box-shadow: none;
  }

  [data-bn-platform='macos'] [data-bn='bn-alert'],
  [data-bn-platform='macos'] [data-bn='bn-dialog'] {
    width: auto;
    min-width: min(100%, var(--bn-len-280));
    border-radius: var(--bn-plat-radius-10);
    background: var(--bn-plat-color-window-background, var(--bn-plat-color-bg));
    backdrop-filter: none;
    box-shadow: 0 var(--bn-len-18) var(--bn-len-50) var(--bn-plat-swatch-rgba-0-0-0-0-22);
  }

  [data-bn-platform='macos'] [data-bn='bn-action-list'] {
    flex-direction: row;
    justify-content: flex-end;
  }

  [data-bn-platform='macos'] [data-bn='bn-action'] {
    min-height: var(--bn-plat-control-global-height);
    padding: 0 var(--bn-len-14);
    border-radius: var(--bn-plat-control-button-radius);
    background: var(--bn-plat-color-fills-opaque-primary);
    color: var(--bn-plat-color-labels-primary);
  }

  [data-bn='bn-switch'],
  [data-bn='bn-checkbox'],
  [data-bn='bn-radio'] {
    display: inline-flex;
    align-items: center;
    gap: var(--bn-len-8);
    color: var(--bn-plat-color-labels-primary);
  }

  [data-bn='bn-switch'] input,
  [data-bn='bn-switch-input'] {
    appearance: none;
    position: relative;
    width: var(--bn-len-51);
    height: var(--bn-len-31);
    margin: 0;
    border-radius: var(--bn-plat-radius-31);
    background: var(--bn-plat-color-fills-tertiary);
    flex: none;
  }

  [data-bn='bn-switch'] input::after,
  [data-bn='bn-switch-input']::after {
    content: '';
    position: absolute;
    top: var(--bn-len-2);
    left: var(--bn-len-2);
    width: var(--bn-len-27);
    height: var(--bn-len-27);
    border-radius: var(--bn-radius-circle);
    background: var(--bn-plat-color-grays-white);
    box-shadow: 0 var(--bn-len-2) var(--bn-len-4) var(--bn-plat-swatch-rgba-0-0-0-0-15);
  }

  [data-bn='bn-switch'] input:checked,
  [data-bn='bn-switch-input']:checked {
    background: var(--bn-plat-color-accents-green);
  }

  [data-bn='bn-switch'] input:checked::after,
  [data-bn='bn-switch-input']:checked::after {
    left: var(--bn-len-22);
  }

  [data-bn-platform='macos'] [data-bn='bn-switch'] input,
  [data-bn-platform='macos'] [data-bn='bn-switch-input'] {
    width: var(--bn-plat-control-toggle-switch-track-width);
    height: var(--bn-plat-control-toggle-switch-track-height);
    border-radius: var(--bn-plat-control-toggle-switch-track-height);
  }

  [data-bn-platform='macos'] [data-bn='bn-switch'] input::after,
  [data-bn-platform='macos'] [data-bn='bn-switch-input']::after {
    width: var(--bn-plat-control-toggle-switch-knob-width);
    height: var(--bn-plat-control-toggle-switch-knob-height);
  }

  [data-bn='bn-checkbox'] input,
  [data-bn='bn-radio'] input {
    appearance: none;
    width: var(--bn-len-22);
    height: var(--bn-len-22);
    margin: 0;
    border: var(--bn-len-1) solid var(--bn-plat-color-separators-opaque);
    background: var(--bn-plat-color-bg);
  }

  [data-bn='bn-checkbox'] input {
    border-radius: var(--bn-plat-radius-6);
  }

  [data-bn='bn-radio'] input {
    border-radius: var(--bn-radius-circle);
  }

  [data-bn='bn-checkbox'] input:checked,
  [data-bn='bn-radio'] input:checked {
    background: var(--bn-plat-color-accents-blue);
    border-color: var(--bn-plat-color-accents-blue);
    box-shadow: inset 0 0 0 var(--bn-len-4) var(--bn-plat-color-grays-white);
  }

  [data-bn-platform='macos'] [data-bn='bn-checkbox'] input {
    width: var(--bn-plat-control-checkboxes-width);
    height: var(--bn-plat-control-checkboxes-width);
    border-radius: var(--bn-plat-control-checkboxes-radius);
  }

  [data-bn-platform='macos'] [data-bn='bn-radio'] input {
    width: var(--bn-plat-control-radio-button-width);
    height: var(--bn-plat-control-radio-button-width);
  }

  [data-bn='bn-slider'],
  [data-bn='bn-dial'],
  [data-bn='bn-field'],
  [data-bn='bn-combobox'],
  [data-bn='bn-color-well'] {
    display: inline-flex;
    flex-direction: column;
    gap: var(--bn-len-4);
    color: var(--bn-plat-color-labels-primary);
    font-size: var(--bn-plat-font-body-size);
  }

  [data-bn='bn-slider'] input,
  [data-bn='bn-dial'] input {
    accent-color: var(--bn-plat-color-accents-blue);
  }

  [data-bn='bn-dial'] input {
    width: var(--bn-len-64);
    height: var(--bn-len-64);
  }

  [data-bn='bn-field-control'],
  [data-bn='bn-search'] input,
  [data-bn='bn-combobox'] input {
    font: inherit;
    color: var(--bn-plat-color-labels-primary);
    background: var(--bn-plat-color-fills-tertiary);
    border: 0;
    border-radius: var(--bn-plat-radius-10);
    min-height: var(--bn-len-34);
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
    box-sizing: border-box;
    padding: var(--bn-len-7) var(--bn-len-12);
  }

  [data-bn-platform='macos'] [data-bn='bn-field-control'],
  [data-bn-platform='macos'] [data-bn='bn-search'] input,
  [data-bn-platform='macos'] [data-bn='bn-combobox'] input {
    min-height: var(--bn-plat-control-global-height);
    padding: 0 var(--bn-plat-control-fields-inset-right) 0 var(--bn-plat-control-fields-inset-left);
    border-radius: var(--bn-plat-control-global-radius);
    font-size: var(--bn-plat-control-global-font-size);
    background: var(--bn-plat-color-fills-opaque-primary);
  }

  [data-bn='bn-search'] {
    display: inline-flex;
    flex-direction: column;
    gap: var(--bn-len-4);
  }

  [data-bn='bn-stepper'] {
    display: inline-flex;
    align-items: stretch;
    min-height: var(--bn-len-32);
    margin: 0;
    border: 0;
    padding: 0;
    border-radius: var(--bn-plat-radius-1000);
    background: var(--bn-plat-color-fills-tertiary);
    overflow: hidden;
  }

  [data-bn='bn-stepper'] legend {
    position: absolute;
    inline-size: var(--bn-len-1);
    block-size: var(--bn-len-1);
    overflow: hidden;
    clip-path: inset(50%);
  }

  [data-bn='bn-stepper'] input {
    width: 4ch;
    border: 0;
    background: transparent;
    text-align: center;
    font: inherit;
    color: var(--bn-plat-color-labels-primary);
  }

  [data-bn='bn-stepper-dec'],
  [data-bn='bn-stepper-inc'] {
    min-width: var(--bn-len-32);
    color: var(--bn-stepper-label, var(--bn-plat-color-accents-blue));
    font-size: var(--bn-plat-font-body-size);
  }

  [data-bn-platform='macos'] [data-bn='bn-stepper'] {
    min-height: var(--bn-plat-control-global-height);
    border-radius: var(--bn-plat-control-stepper-radius);
  }

  [data-bn-platform='macos'] [data-bn='bn-stepper-dec'],
  [data-bn-platform='macos'] [data-bn='bn-stepper-inc'] {
    min-width: var(--bn-plat-control-stepper-width);
    font-size: var(--bn-plat-control-stepper-font-size);
  }

  [data-bn='bn-progress'],
  [data-bn='bn-spinner'] {
    appearance: none;
    display: block;
    width: var(--bn-len-160);
    height: var(--bn-len-4);
    border: 0;
    border-radius: var(--bn-plat-radius-4);
    background: var(--bn-plat-color-fills-tertiary);
    color: var(--bn-plat-color-accents-blue);
  }

  [data-bn='bn-progress']::-webkit-progress-bar,
  [data-bn='bn-spinner']::-webkit-progress-bar {
    background: var(--bn-plat-color-fills-tertiary);
  }

  [data-bn='bn-progress']::-webkit-progress-value {
    background: var(--bn-plat-color-accents-blue);
  }

  [data-bn='bn-spinner'] {
    width: var(--bn-len-20);
    height: var(--bn-len-20);
    border-radius: var(--bn-radius-circle);
    border: var(--bn-len-2) solid var(--bn-plat-color-fills-tertiary);
    border-top-color: var(--bn-plat-color-accents-blue);
    background: transparent;
  }

  [data-bn='bn-color-well'] input {
    width: var(--bn-plat-control-color-well-width, var(--bn-len-32));
    height: var(--bn-plat-control-color-well-height, var(--bn-len-16));
    padding: 0;
    border: var(--bn-len-1) solid var(--bn-plat-color-separators-opaque);
    background: transparent;
  }

  [data-bn='bn-color-picker'],
  [data-bn='bn-date-picker'],
  [data-bn='bn-alert'],
  [data-bn='bn-action-sheet'],
  [data-bn='bn-dialog'],
  [data-bn='bn-sheet'],
  [data-bn='bn-share-sheet'] {
    border: 0;
    color: var(--bn-plat-color-labels-primary);
    background: var(--bn-plat-swatch-rgba-255-255-255-0-7);
    backdrop-filter: blur(var(--bn-plat-glass-frost-medium));
  }

  [data-bn='bn-color-picker'][data-present='inline'],
  [data-bn='bn-date-picker'][data-present='inline'],
  [data-bn='bn-alert'][data-present='inline'],
  [data-bn='bn-action-sheet'][data-present='inline'],
  [data-bn='bn-dialog'][data-present='inline'],
  [data-bn='bn-sheet'][data-present='inline'],
  [data-bn='bn-share-sheet'][data-present='inline'],
  [data-bn='bn-menu'][data-present='inline'],
  [data-bn='bn-popover'][data-present='inline'],
  [data-bn='bn-context-menu'][data-present='inline'] {
    position: static;
    display: block;
    margin: 0;
    inset: auto;
  }

  [data-bn='bn-color-grid'] {
    display: grid;
    grid-template-columns: repeat(6, var(--bn-len-28));
    gap: var(--bn-len-8);
  }

  [data-bn='bn-color-swatch'] {
    width: var(--bn-len-28);
    height: var(--bn-len-28);
    border-radius: var(--bn-radius-circle);
    background: attr(data-color type(<color>), var(--bn-plat-color-accents-blue));
  }

  [data-bn='bn-date-chips'] {
    display: inline-flex;
    gap: var(--bn-len-6);
  }

  [data-bn='bn-date-chip'] {
    min-height: var(--bn-len-34);
    padding: 0 var(--bn-len-12);
    border-radius: var(--bn-plat-radius-100);
    background: var(--bn-plat-color-fills-tertiary);
    color: var(--bn-plat-color-labels-primary);
  }

  [data-bn='bn-date-picker'] {
    border-radius: var(--bn-plat-radius-13);
    padding: var(--bn-len-12);
    max-inline-size: 100%;
    box-sizing: border-box;
  }

  [data-bn='bn-date-grid'] {
    border-collapse: collapse;
    inline-size: 100%;
    table-layout: fixed;
  }

  [data-bn='bn-date-day'] {
    width: min(100%, var(--bn-len-38));
    max-inline-size: 100%;
    box-sizing: border-box;
    height: var(--bn-len-38);
    border-radius: var(--bn-radius-circle);
    color: var(--bn-plat-color-labels-primary);
  }

  [data-bn='bn-date-day'][data-selected='true'] {
    background: var(--bn-plat-color-accents-blue);
    color: var(--bn-plat-color-grays-white);
  }

  [data-bn='bn-list'] {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--bn-plat-color-bg);
    color: var(--bn-plat-color-labels-primary);
  }

  [data-bn='bn-list'][data-grouped='true'] {
    background: var(--bn-list-surface, var(--bn-glass-opaque));
    border-radius: var(--bn-radius-card);
    overflow: hidden;
    backdrop-filter: saturate(var(--bn-glass-saturate)) blur(var(--bn-glass-blur));
    box-shadow: var(--bn-elev-2);
  }

  [data-bn='bn-list-row'] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    min-height: var(--bn-len-52);
    padding: 0 var(--bn-len-16);
    gap: var(--bn-len-12);
    border: 0;
    background: transparent;
  }

  /* Separator lives in the contents frame: 16px in from both edges, not full-bleed. */
  [data-bn='bn-list-row']:not(:last-child)::after {
    content: '';
    position: absolute;
    inset-inline: var(--bn-len-16);
    inset-block-end: 0;
    block-size: var(--bn-len-1);
    background: var(
      --bn-plat-color-separators-vibrant,
      var(--bn-plat-color-separator, var(--bn-plat-swatch-rgb-230-230-230))
    );
  }

  [data-bn='bn-list-row']:has([data-bn='bn-symbol-tile']):not(:last-child)::after {
    inset-inline-start: calc(var(--bn-len-16) + var(--bn-len-29) + var(--bn-len-12));
  }

  [data-bn='bn-list-row']:has([data-bn='bn-list-image']):not(:last-child)::after {
    inset-inline-start: var(--bn-len-80);
  }

  [data-bn='bn-list-row']:has([data-bn='bn-list-detail']) {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: var(--bn-len-2);
    min-height: var(--bn-len-68);
    padding-block: var(--bn-len-12);
  }

  [data-bn='bn-list-row']:has([data-bn='bn-symbol-tile']),
  [data-bn='bn-list-row']:has([data-bn='bn-list-image']) {
    display: grid;
    grid-template-columns: var(--bn-len-29) minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: var(--bn-len-12);
    row-gap: var(--bn-len-2);
  }

  [data-bn='bn-list-row']:has([data-bn='bn-list-image']) {
    grid-template-columns: var(--bn-len-52) minmax(0, 1fr) auto auto;
  }

  [data-bn='bn-list-row'] [data-bn='bn-symbol-tile'],
  [data-bn='bn-list-row'] [data-bn='bn-list-image'] {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  [data-bn='bn-list-row'] [data-bn='bn-list-title'] {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--bn-content-size, var(--bn-type-15));
    line-height: var(--bn-content-leading, var(--bn-type-20));
    color: var(--bn-plat-color-labels-primary);
  }

  [data-bn='bn-list-row'] [data-bn='bn-list-detail'] {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
  }

  [data-bn='bn-list-value'],
  [data-bn='bn-list-chevron'],
  [data-bn='bn-list-grabber'] {
    grid-row: 1 / span 2;
    margin: 0;
    white-space: nowrap;
    color: var(--bn-plat-color-labels-secondary);
  }

  [data-bn='bn-list-value'] {
    grid-column: 3;
  }

  [data-bn='bn-list-chevron'],
  [data-bn='bn-list-grabber'] {
    grid-column: 4;
    color: var(--bn-plat-color-accents-blue);
    font-style: normal;
  }

  [data-bn='bn-list-detail'] {
    color: var(--bn-content-secondary, var(--bn-plat-color-labels-primary));
    font-size: var(--bn-content-size, var(--bn-type-15));
    line-height: var(--bn-content-leading, var(--bn-type-20));
    letter-spacing: var(--bn-type-neg-0_23);
    font-weight: 400;
  }

  [data-bn='bn-list-row'][data-swipe='true'] {
    box-shadow: inset var(--bn-len-neg-72) 0 0 var(--bn-plat-color-accents-blue);
    border-radius: 0 var(--bn-plat-radius-100) var(--bn-plat-radius-100) 0;
  }

  [data-bn='bn-table'] {
    border-collapse: collapse;
    width: 100%;
    color: var(--bn-plat-color-labels-primary);
    font-size: var(--bn-plat-font-body-size);
  }

  [data-bn='bn-table'] th,
  [data-bn='bn-table'] td {
    text-align: start;
    padding: var(--bn-len-6) var(--bn-len-8);
    border-bottom: var(--bn-len-1) solid
      var(--bn-plat-color-separator, var(--bn-plat-color-separators-opaque));
  }

  [data-bn='bn-table'] tr[data-selected='true'] {
    background: var(
      --bn-plat-color-miscellaneous-tables-bg-selected-active,
      var(--bn-plat-color-accents-blue)
    );
    color: var(--bn-plat-color-grays-white);
  }

  [data-bn='bn-menu'],
  [data-bn='bn-popover'],
  [data-bn='bn-context-menu'],
  [data-bn='bn-toolbar'],
  [data-bn='bn-action-list'],
  [data-bn='bn-share-row'],
  [data-bn='bn-input-accessory'],
  [data-bn='bn-date-chips'] {
    display: flex;
    flex-direction: column;
    min-width: var(--bn-len-200);
    padding: var(--bn-plat-menus-control-group-padding-top, var(--bn-len-6)) 0;
    margin: 0;
    border: 0;
    list-style: none;
    border-radius: var(--bn-plat-popover-corner-radius, var(--bn-plat-radius-10));
    background: var(--bn-glass-md);
    color: var(--bn-plat-color-labels-primary);
    backdrop-filter: saturate(var(--bn-glass-saturate)) blur(var(--bn-glass-blur));
    box-shadow: var(--bn-elev-2);
  }

  /* The list item is required by menu and ul. It must not generate a box. */
  [data-bn='bn-menu'] > li,
  [data-bn='bn-context-menu'] > li,
  [data-bn='bn-toolbar'] > li,
  [data-bn='bn-action-list'] > li,
  [data-bn='bn-share-row'] > li,
  [data-bn='bn-input-accessory'] > li,
  [data-bn='bn-date-chips'] > li,
  [data-bn='bn-color-grid'] > li,
  [data-bn='bn-sidebar'] li,
  [data-bn='bn-tab-more'] li,
  [data-bn='bn-nav-trailing'] > li,
  [data-bn='bn-card-grid'] > li,
  [data-bn='bn-index-bar'] li,
  [data-bn='bn-footer'] li,
  [data-bn='bn-dock'] li {
    display: contents;
  }

  [data-bn='bn-context-menu'] {
    border-radius: var(--bn-plat-other-cut-corners-tl, var(--bn-plat-radius-30));
    background: var(--bn-plat-color-overlays-default);
    padding: var(--bn-len-8);
  }

  [data-bn='bn-menu-item'] {
    min-height: calc(
      var(--bn-plat-menus-menu-items-padding-top-bottom, var(--bn-len-10)) * 2 +
        var(--bn-plat-menus-menu-items-title-line-height, var(--bn-len-18))
    );
    padding: var(--bn-plat-menus-menu-items-padding-top-bottom, var(--bn-len-10))
      var(--bn-plat-menus-menu-items-padding-sides, var(--bn-len-16));
    text-align: start;
    color: var(--bn-plat-color-labels-primary);
    font-size: var(--bn-plat-menus-menu-items-title-font-size, var(--bn-type-17));
  }

  [data-bn-platform='macos'] [data-bn='bn-menu-item'] {
    min-height: var(--bn-plat-control-menu-height);
    font-size: var(--bn-plat-control-menu-font-size);
  }

  [data-bn='bn-alert'],
  [data-bn='bn-action-sheet'] {
    width: var(--bn-len-300);
    max-width: 100%;
    padding: var(--bn-len-14);
    border-radius: var(--bn-plat-radius-34);
    box-shadow: var(--bn-elev-3);
  }

  [data-bn='bn-alert-title'],
  [data-bn='bn-action-title'] {
    margin: 0;
    font-size: var(--bn-plat-font-body-size);
    line-height: var(--bn-plat-font-body-leading);
    letter-spacing: var(--bn-plat-font-body-tracking);
    font-weight: var(--bn-plat-weight-semibold);
  }

  [data-bn='bn-alert-message'],
  [data-bn='bn-action-message'] {
    margin: var(--bn-len-4) 0 var(--bn-len-12);
    font-size: var(--bn-plat-font-body-size);
    line-height: var(--bn-plat-font-body-leading);
    letter-spacing: var(--bn-plat-font-body-tracking);
  }

  [data-bn='bn-action-list'] {
    display: flex;
    flex-direction: column;
    gap: var(--bn-len-8);
  }

  [data-bn='bn-action'] {
    min-height: var(--bn-len-48);
    padding: var(--bn-len-13) var(--bn-len-16);
    border-radius: var(--bn-plat-radius-100);
    background: var(--bn-plat-swatch-rgba-255-255-255-0-6);
    color: var(--bn-plat-color-accents-blue);
    font-weight: var(--bn-plat-weight-semibold);
  }

  [data-bn='bn-action'][data-role='destructive'] {
    color: var(--bn-plat-color-accents-red);
  }

  [data-bn='bn-action'][data-role='default'] {
    color: var(--bn-plat-color-accents-blue);
  }

  [data-bn='bn-share-sheet'] {
    width: min(100%, var(--bn-plat-activity-view-width, var(--bn-len-402)));
    max-inline-size: 100%;
    box-sizing: border-box;
    border-radius: var(--bn-plat-activity-view-corner-radius-top, var(--bn-plat-radius-38))
      var(--bn-plat-activity-view-corner-radius-top, var(--bn-plat-radius-38))
      var(--bn-plat-activity-view-corner-radius-bottom, 0px)
      var(--bn-plat-activity-view-corner-radius-bottom, 0px);
    padding: var(--bn-plat-activity-view-row-margin-top, var(--bn-len-16))
      var(--bn-plat-activity-view-row-margin-sides, var(--bn-len-15));
  }

  [data-bn='bn-share-row'] {
    display: flex;
    min-inline-size: 0;
    max-inline-size: 100%;
    gap: var(--bn-plat-activity-view-icon-spacing, var(--bn-len-16));
  }

  [data-bn='bn-share-action'] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--bn-len-6);
    color: var(--bn-plat-color-labels-primary);
    font-size: var(--bn-plat-font-caption-1-size);
  }

  [data-bn='bn-share-glyph'] {
    display: grid;
    place-items: center;
    width: var(--bn-len-66);
    height: var(--bn-len-66);
    border-radius: var(--bn-plat-radius-1000);
    background: var(--bn-plat-color-fills-vibrant-tertiary, var(--bn-plat-color-fills-tertiary));
  }

  [data-bn='bn-share-close'] {
    width: var(--bn-plat-activity-view-close-button-wxh, var(--bn-len-44));
    height: var(--bn-plat-activity-view-close-button-wxh, var(--bn-len-44));
    border-radius: var(--bn-plat-radius-1000);
    background: var(--bn-plat-color-fills-tertiary);
  }

  [data-bn='bn-dialog'],
  [data-bn='bn-sheet'] {
    padding: var(--bn-len-16);
    background: var(--bn-glass-lg);
    backdrop-filter: saturate(var(--bn-glass-saturate)) blur(var(--bn-glass-blur));
    box-shadow: var(--bn-elev-3);
  }

  [data-bn='bn-sheet'] {
    border-radius: var(--bn-plat-sheet-top-radius, var(--bn-plat-radius-38))
      var(--bn-plat-sheet-top-radius, var(--bn-plat-radius-38))
      var(--bn-plat-sheet-bottom-radius, var(--bn-plat-radius-58))
      var(--bn-plat-sheet-bottom-radius, var(--bn-plat-radius-58));
  }

  [data-bn='bn-grabber'] {
    display: block;
    width: var(--bn-plat-grabber-width, var(--bn-len-60));
    height: var(--bn-plat-grabber-height, var(--bn-len-4));
    margin: 0 auto var(--bn-len-12);
    border: 0;
    border-radius: var(--bn-plat-radius-4);
    background: var(--bn-plat-color-fills-tertiary);
  }

  [data-bn='bn-popover'] {
    border-radius: var(--bn-plat-popover-corner-radius, var(--bn-plat-radius-38));
    padding: var(--bn-len-12) var(--bn-len-16);
    max-width: var(--bn-len-280);
  }

  [data-bn='bn-tooltip'] {
    padding: var(--bn-len-4) var(--bn-len-8);
    border-radius: var(--bn-plat-radius-6);
    background: var(--bn-plat-color-bg);
    color: var(--bn-plat-color-labels-primary);
    border: var(--bn-len-1) solid
      var(--bn-plat-color-miscellaneous-tooltips-inner-stroke, transparent);
    font-size: var(--bn-plat-font-caption-1-size);
  }

  [data-bn='bn-notification'] {
    display: flex;
    flex-direction: column;
    gap: var(--bn-len-2);
    width: min(100%, var(--bn-len-300));
    max-inline-size: 100%;
    box-sizing: border-box;
    padding: var(--bn-len-14);
    border-radius: var(--bn-plat-radius-16);
    background: var(--bn-plat-color-bg-secondary, var(--bn-plat-color-bg));
    color: var(--bn-plat-color-labels-primary);
  }

  [data-bn='bn-page-control'] {
    display: inline-flex;
    align-items: center;
    gap: var(--bn-len-8);
    min-height: var(--bn-len-44);
    padding: var(--bn-len-8) var(--bn-len-12);
    border-radius: var(--bn-plat-radius-1000);
    background: var(--bn-plat-material-ultrathin, var(--bn-plat-color-fills-tertiary));
    backdrop-filter: blur(var(--bn-plat-glass-frost-regular));
  }

  [data-bn='bn-page-dot'] {
    width: var(--bn-len-8);
    height: var(--bn-len-8);
    border-radius: var(--bn-radius-circle);
    background: var(--bn-plat-color-labels-tertiary);
  }

  [data-bn='bn-page-dot'][aria-checked='true'] {
    background: var(--bn-plat-color-labels-primary);
  }

  [data-bn='bn-menubar'],
  [data-bn='bn-input-accessory'] {
    display: flex;
    align-items: center;
    gap: var(--bn-len-8);
    min-height: var(--bn-len-49);
    padding: 0 var(--bn-len-16);
    background: var(--bn-plat-color-bg);
    color: var(--bn-plat-color-labels-primary);
  }

  [data-bn='bn-toolbar'],
  [data-bn='bn-input-accessory'],
  [data-bn='bn-date-chips'] {
    flex-direction: row;
    align-items: center;
    min-width: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  [data-bn='bn-tab-bar'] {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    gap: 0;
    min-height: var(--bn-len-62);
    margin: 0;
    padding: var(--bn-len-6) var(--bn-len-8) var(--bn-len-8);
    border: 0;
    border-radius: var(--bn-radius-capsule);
    background-color: var(--bn-tab-fill);
    background-image: var(--bn-glass-sheen);
    color: var(--bn-plat-color-labels-primary);
    backdrop-filter: saturate(var(--bn-tab-saturate)) blur(var(--bn-tab-blur));
    box-shadow: var(--bn-elev-2);
  }

  [data-bn='bn-tab'] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--bn-len-1);
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: var(--bn-len-2) var(--bn-len-2) 0;
    border: 0;
    background: transparent;
    color: var(--bn-plat-color-labels-secondary);
    font-family: inherit;
    font-size: var(--bn-type-10);
    line-height: var(--bn-type-12);
    font-weight: 500;
    letter-spacing: var(--bn-type-0_06);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-inline-size: 100%;
    cursor: pointer;
    appearance: none;
  }

  [data-bn='bn-tab'] [data-bn='bn-symbol'] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--bn-len-24);
    width: var(--bn-len-24);
    height: var(--bn-len-24);
  }

  [data-bn='bn-tab'] [data-bn='bn-tab-label'] {
    display: block;
    max-inline-size: 100%;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
  }

  [data-bn='bn-tab-more']:popover-open {
    position: fixed;
    inset: auto var(--bn-len-12)
      calc(var(--bn-len-62) + var(--bn-len-8) + env(safe-area-inset-bottom, 0px)) auto;
    margin: 0;
    position-area: block-start span-inline-end;
    z-index: var(--bn-z-overlay);
    display: flex;
    flex-direction: column;
    inline-size: max-content;
    min-inline-size: var(--bn-len-220);
    max-inline-size: calc(100% - var(--bn-len-24));
    padding: var(--bn-len-6);
    border: 0;
    border-radius: var(--bn-plat-radius-14);
    list-style: none;
    background: var(--bn-glass-thick);
    color: var(--bn-plat-color-labels-primary);
    backdrop-filter: saturate(var(--bn-glass-saturate)) blur(var(--bn-glass-blur));
    box-shadow: var(--bn-elev-3);
  }

  [data-bn='bn-tab-more'] [data-bn='bn-menu-item'] {
    display: flex;
    align-items: center;
    min-height: var(--bn-len-44);
    padding: 0 var(--bn-len-12);
    border-radius: var(--bn-plat-radius-8);
    text-decoration: none;
    color: var(--bn-plat-color-labels-primary);
    font-size: var(--bn-plat-font-body-size);
    line-height: var(--bn-plat-font-body-leading);
  }

  [data-bn='bn-tab'][aria-current='page'] {
    color: var(--bn-brand-text);
    font-weight: var(--bn-plat-weight-semibold);
  }

  [data-bn='bn-sidebar'] {
    display: flex;
    flex-direction: column;
    min-width: var(--bn-len-220);
    padding: var(--bn-len-8) var(--bn-len-8) var(--bn-len-16);
    background: var(--bn-glass-thin);
    color: var(--bn-plat-color-labels-primary);
    backdrop-filter: saturate(var(--bn-glass-saturate)) blur(var(--bn-glass-blur));
    box-shadow: var(--bn-elev-1);
  }

  [data-bn='bn-sidebar'] nav,
  [data-bn='bn-sidebar'] section,
  [data-bn='bn-sidebar'] ul {
    display: flex;
    flex-direction: column;
    gap: var(--bn-len-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  [data-bn='bn-sidebar'] h2 {
    margin: var(--bn-len-14) var(--bn-len-8) var(--bn-len-4);
    font-size: var(--bn-type-11);
    line-height: var(--bn-type-14);
    font-weight: var(--bn-plat-weight-semibold, 600);
    color: var(--bn-plat-color-labels-primary);
  }

  [data-bn='bn-sidebar-item'] {
    display: flex;
    align-items: center;
    gap: var(--bn-len-8);
    min-height: var(--bn-len-28);
    min-width: 0;
    padding: var(--bn-len-4) var(--bn-len-8);
    border-radius: var(--bn-plat-radius-6);
    color: var(--bn-plat-color-labels-primary);
    text-decoration: none;
    font-size: var(--bn-type-13);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  [data-bn='bn-sidebar-item'][aria-current='page'] {
    background: var(--bn-plat-color-accents-blue);
    color: var(--bn-plat-color-grays-white, var(--bn-plat-swatch-fff));
    box-shadow: var(--bn-elev-1);
  }

  [data-bn-platform='macos'] [data-bn='bn-menubar'] {
    min-height: var(--bn-len-24);
    padding: 0 var(--bn-len-12);
    gap: var(--bn-len-16);
    font-size: var(--bn-type-13);
    background: var(--bn-plat-material-thick, var(--bn-plat-swatch-rgba-246-246-246-0-72));
    backdrop-filter: blur(var(--bn-plat-glass-frost-medium, var(--bn-blur-16)));
    border-bottom: var(--bn-len-1) solid
      var(--bn-plat-color-separators-non-opaque, var(--bn-plat-swatch-rgba-0-0-0-0-12));
  }

  [data-bn='bn-menubar-app'],
  [data-bn='bn-menubar-item'] {
    color: inherit;
    text-decoration: none;
  }

  [data-bn='bn-menubar-app'] {
    font-weight: var(--bn-plat-weight-semibold, 600);
  }

  [data-bn='bn-menubar'] [data-bn='bn-menubar-item']:last-child {
    margin-inline-start: auto;
  }

  [data-bn='bn-button'][data-style='push'] {
    background: var(--bn-plat-color-fills-opaque-primary, var(--bn-plat-swatch-rgba-0-0-0-0-1));
    color: var(--bn-plat-color-labels-primary);
    box-shadow:
      0 var(--bn-len-0_5) 0 var(--bn-plat-swatch-rgba-255-255-255-0-6) inset,
      0 var(--bn-len-1) var(--bn-len-1) var(--bn-plat-swatch-rgba-0-0-0-0-12);
  }

  [data-bn='bn-button'][data-style='bevel'],
  [data-bn='bn-button'][data-style='gradient'] {
    background: linear-gradient(var(--bn-plat-swatch-fff), var(--bn-plat-swatch-e4e4e6));
    color: var(--bn-plat-color-labels-primary);
    box-shadow:
      0 var(--bn-len-0_5) 0 var(--bn-plat-swatch-fff) inset,
      0 var(--bn-len-1) 0 var(--bn-plat-swatch-rgba-0-0-0-0-18);
  }

  [data-bn='bn-button'][data-style='recessed'] {
    background: var(--bn-plat-swatch-rgba-0-0-0-0-08);
    color: var(--bn-plat-color-labels-primary);
    box-shadow: 0 var(--bn-len-1) var(--bn-len-1) var(--bn-plat-swatch-rgba-0-0-0-0-18) inset;
  }

  [data-bn='bn-button'][data-style='textured'] {
    background: repeating-linear-gradient(
      var(--bn-plat-swatch-f4f4f5),
      var(--bn-plat-swatch-f4f4f5) var(--bn-len-1),
      var(--bn-plat-swatch-e7e7e8) var(--bn-len-2)
    );
    color: var(--bn-plat-color-labels-primary);
  }

  [data-bn='bn-button'][data-style='rounded'] {
    border-radius: var(--bn-plat-radius-1000);
  }

  [data-bn='bn-button'][data-style='square'] {
    border-radius: var(--bn-plat-radius-2);
  }

  [data-bn='bn-button'][data-style='help'] {
    min-width: var(--bn-plat-control-global-height, var(--bn-len-24));
    padding-inline: 0;
    border-radius: var(--bn-plat-radius-1000);
  }

  [data-bn='bn-material'] {
    display: grid;
    place-items: end start;
    inline-size: 100%;
    width: 100%;
    min-block-size: var(--bn-len-96);
    margin: 0;
    padding: var(--bn-len-10);
    border-radius: var(--bn-plat-radius-12);
    background: var(--bn-glass-md);
    color: var(--bn-plat-color-labels-primary);
    backdrop-filter: saturate(var(--bn-glass-saturate)) blur(var(--bn-glass-blur));
    box-shadow: var(--bn-elev-1);
  }

  [data-bn='bn-material'][data-material='ultrathin'] {
    background: var(--bn-glass-ultrathin);
  }
  [data-bn='bn-material'][data-material='thin'] {
    background: var(--bn-glass-thin);
  }
  [data-bn='bn-material'][data-material='sm'] {
    background: var(--bn-glass-sm);
  }
  [data-bn='bn-material'][data-material='medium'],
  [data-bn='bn-material'][data-material='md'] {
    background: var(--bn-glass-md);
  }
  [data-bn='bn-material'][data-material='lg'] {
    background: var(--bn-glass-lg);
  }
  [data-bn='bn-material'][data-material='thick'] {
    background: var(--bn-glass-thick);
  }
  [data-bn='bn-material'][data-material='ultrathick'] {
    background: var(--bn-glass-ultrathick);
  }
  [data-bn='bn-material'][data-material='opaque'] {
    background: var(--bn-glass-opaque);
    backdrop-filter: none;
  }

  [data-bn='bn-list-title'],
  [data-bn='bn-list-detail'],
  [data-bn='bn-sheet-body'] {
    margin: 0;
  }

  [data-bn='bn-list-title'] {
    font-size: var(--bn-type-17);
    line-height: var(--bn-type-22);
    letter-spacing: var(--bn-type-neg-0_43);
    font-weight: 400;
  }

  [data-bn='bn-window'] {
    display: block;
    border-radius: var(--bn-plat-radius-10);
    overflow: hidden;
    background: var(--bn-plat-color-window-background, var(--bn-plat-color-bg));
    color: var(--bn-plat-color-labels-primary);
    border: var(--bn-len-1) solid
      var(--bn-plat-color-separator, var(--bn-plat-color-separators-opaque));
  }

  [data-bn='bn-window-titlebar'] {
    padding: var(--bn-len-8) var(--bn-len-12);
    background: var(--bn-plat-material-thick, var(--bn-plat-color-fills-tertiary));
  }

  [data-bn='bn-window-titlebar'] h2,
  [data-bn='bn-dialog-title'],
  [data-bn='bn-sheet-title'],
  [data-bn='bn-widget-title'],
  [data-bn='bn-empty-title'],
  [data-bn='bn-color-picker-title'] {
    margin: 0;
    font-size: inherit;
  }

  [data-bn='bn-window-body'],
  [data-bn='bn-sheet-body'] {
    padding: var(--bn-len-12);
  }

  [data-bn='bn-disclosure'] {
    color: var(--bn-plat-color-labels-primary);
  }

  [data-bn='bn-disclosure'] summary {
    cursor: pointer;
    min-height: var(--bn-plat-control-global-height, var(--bn-len-28));
    border-radius: var(--bn-plat-control-disclosure-radius, var(--bn-plat-radius-6));
  }

  [data-bn='bn-form'],
  [data-bn='bn-group'] {
    display: flex;
    flex-direction: column;
    gap: var(--bn-len-12);
    border: 0;
    margin: 0;
    padding: 0;
    color: var(--bn-plat-color-labels-primary);
  }

  [data-bn='bn-group'] {
    border: var(--bn-len-1) solid
      var(--bn-plat-color-separator, var(--bn-plat-color-separators-opaque));
    border-radius: var(--bn-plat-control-global-radius, var(--bn-plat-radius-8));
    padding: var(--bn-len-12);
  }

  [data-bn='bn-image-well'] {
    display: flex;
    flex-direction: column;
    gap: var(--bn-len-8);
    min-inline-size: 0;
    max-inline-size: 100%;
    color: var(--bn-plat-color-labels-primary);
  }

  [data-bn='bn-image-well'] input {
    max-inline-size: 100%;
    min-inline-size: 0;
  }

  [data-bn='bn-image-well-preview'] {
    width: var(--bn-len-64);
    height: var(--bn-len-64);
    object-fit: cover;
    border-radius: var(--bn-plat-radius-8);
  }

  [data-bn='bn-scroll'] {
    max-height: var(--bn-len-120);
    overflow: auto;
    color: var(--bn-plat-color-labels-primary);
    scrollbar-color: var(
        --bn-plat-color-miscellaneous-scrollbar,
        var(--bn-plat-color-fills-primary)
      )
      transparent;
  }

  input[data-bn='bn-scrollbar'] {
    appearance: none;
    inline-size: var(--bn-len-12);
    block-size: var(--bn-len-120);
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--bn-plat-radius-1000);
    background: transparent;
    writing-mode: vertical-lr;
    direction: rtl;
    accent-color: var(--bn-brand);
  }

  input[data-bn='bn-scrollbar'][aria-orientation='horizontal'] {
    inline-size: var(--bn-len-120);
    block-size: var(--bn-len-12);
    writing-mode: horizontal-tb;
    direction: ltr;
  }

  [data-bn='bn-refraction'] {
    display: grid;
    gap: var(--bn-len-4);
    min-block-size: var(--bn-len-96);
    margin: 0;
    padding: var(--bn-len-16);
    overflow: hidden;
    border: var(--bn-len-1) solid var(--bn-glass-rim);
    border-radius: var(--bn-radius-card);
    background-color: var(--bn-list-surface);
    background-image: var(--bn-glass-sheen), var(--bn-stage-glow);
    box-shadow: var(--bn-elev-2);
    backdrop-filter: saturate(var(--bn-glass-saturate)) blur(var(--bn-glass-blur));
    color: var(--bn-plat-color-labels-primary);
  }

  [data-bn='bn-refraction'] figcaption,
  [data-bn='bn-refraction'] p {
    margin: 0;
  }

  [data-bn='bn-key'] {
    min-width: var(--bn-len-50);
    min-height: var(--bn-len-43);
    padding: 0 var(--bn-len-8);
    border-radius: var(--bn-plat-radius-8_5);
    background: var(--bn-plat-color-grays-white);
    color: var(--bn-plat-color-labels-primary);
    box-shadow: 0 var(--bn-len-1) 0 var(--bn-plat-color-separators-opaque);
  }

  [data-bn='bn-empty-state'] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--bn-len-4);
    padding: 0 var(--bn-len-36) var(--bn-len-36);
    color: var(--bn-plat-color-labels-primary);
  }

  [data-bn='bn-empty-state'][data-kind='symbol'] [data-bn='bn-empty-symbol'],
  [data-bn='bn-empty-state'][data-kind='circle'] [data-bn='bn-empty-symbol'] {
    width: var(--bn-len-64);
    height: var(--bn-len-64);
    border-radius: var(--bn-radius-circle);
    background: var(--bn-plat-color-fills-tertiary);
  }

  [data-bn='bn-empty-title'] {
    font-size: var(--bn-type-22);
    font-weight: var(--bn-plat-weight-semibold);
  }

  [data-bn='bn-empty-description'] {
    margin: 0;
    font-size: var(--bn-type-22);
    font-weight: var(--bn-plat-weight-medium);
    color: var(--bn-plat-color-labels-secondary);
  }

  [data-bn='bn-app-icon'] {
    display: inline-grid;
    place-items: center;
    width: var(--bn-plat-app-icon-w-d, var(--bn-len-64));
    height: var(--bn-plat-app-icon-w-d, var(--bn-len-64));
    border-radius: calc(
      var(--bn-plat-app-icon-w-d, var(--bn-plat-radius-64)) * var(--bn-radius-icon-factor)
    );
    background: var(--bn-brand);
    color: var(--bn-brand-ink);
    font-weight: var(--bn-plat-weight-semibold);
  }

  [data-bn='bn-widget'] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: var(--bn-len-160);
    min-block-size: var(--bn-len-112);
    padding: var(--bn-len-16);
    border-radius: var(--bn-plat-radius-22);
    background: var(--bn-glass-md);
    color: var(--bn-plat-color-labels-primary);
    backdrop-filter: saturate(var(--bn-glass-saturate)) blur(var(--bn-glass-blur));
    box-shadow: var(--bn-elev-3);
  }

  [data-bn='bn-switch-label'],
  [data-bn='bn-slider-label'],
  [data-bn='bn-dial-label'],
  [data-bn='bn-field-label'],
  [data-bn='bn-combobox-label'],
  [data-bn='bn-color-well-label'],
  [data-bn='bn-list-title'],
  [data-bn='bn-notification-title'] {
    color: var(--bn-plat-color-labels-primary);
  }

  /* Restated after the shared menu rule, which sets action lists to a column. */
  [data-bn-platform='macos'] [data-bn='bn-action-list'] {
    flex-direction: row;
    justify-content: flex-end;
    min-width: 0;
    padding: 0;
    background: transparent;
  }

  [data-bn='bn-sidebar-item'] svg {
    width: var(--bn-len-16);
    height: var(--bn-len-16);
    flex: none;
  }

  [data-bn='bn-tab'] svg {
    width: var(--bn-len-24);
    height: var(--bn-len-24);
  }

  [data-bn='bn-catalog-header'] h1,
  [data-bn='bn-catalog-header'] p {
    color: var(--bn-plat-color-labels-primary);
    max-inline-size: 100%;
  }

  [data-bn='bn-catalog-header'] h1 {
    font-size: var(--bn-title-large, var(--bn-plat-font-large-title-size));
    line-height: var(--bn-title-large-leading, var(--bn-plat-font-large-title-leading));
  }

  [data-bn='bn-catalog-demo']:has([data-bn='bn-material']) {
    display: grid;
    gap: var(--bn-len-8);
    inline-size: 100%;
    padding: var(--bn-len-12);
    border-radius: var(--bn-radius-card);
    background-color: var(--bn-brand-ink);
    background-image:
      radial-gradient(
        var(--bn-len-24rem) var(--bn-len-18rem) at 12% 0%,
        var(--bn-brand),
        transparent 70%
      ),
      radial-gradient(
        var(--bn-len-24rem) var(--bn-len-18rem) at 88% 100%,
        var(--bn-brand-secondary),
        transparent 68%
      ),
      linear-gradient(160deg, var(--bn-brand) 0%, var(--bn-brand-ink) 78%);
  }

  [data-bn='bn-catalog-row']:has([data-bn='bn-material']) {
    inline-size: 100%;
    padding: 0;
    border-radius: var(--bn-radius-card);
    background: transparent;
  }

  [data-bn='bn-list'][data-grouped='true'],
  [data-bn='bn-hero'],
  [data-bn='bn-material'],
  body[data-active='home'] pre {
    border: var(--bn-len-1) solid var(--bn-glass-rim);
    background-image: var(--bn-glass-sheen);
  }

  [data-bn='bn-material'] {
    box-shadow: var(--bn-elev-2);
  }
}

@layer states {
  /* A closed popover stays out of the page until its invoker opens it. */
  [popover]:not(:popover-open) {
    display: none;
  }

  [data-bn='bn-button']:focus-visible,
  [data-bn='bn-button'][data-force='focus'],
  [data-bn='bn-menu-item']:focus-visible,
  [data-bn='bn-popup-button']:focus-visible,
  [data-bn='bn-field-control']:focus-visible,
  [data-bn='bn-switch'] input:focus-visible,
  [data-bn='bn-switch-input']:focus-visible,
  [data-bn='bn-checkbox'] input:focus-visible,
  [data-bn='bn-radio'] input:focus-visible {
    outline: var(--bn-len-2) solid var(--bn-brand);
    outline-offset: var(--bn-len-2);
  }

  [data-force='hover'],
  [data-bn='bn-button'][data-force='hover'],
  [data-bn='bn-button']:hover:not(:disabled),
  [data-bn='bn-menu-item'][data-force='hover'],
  [data-bn='bn-menu-item']:hover,
  [data-bn='bn-sidebar-item']:hover {
    filter: brightness(0.96);
  }

  [data-force='active'],
  [data-bn='bn-button'][data-force='active'],
  [data-bn='bn-button']:active {
    filter: brightness(0.92);
  }

  [data-force='focus'] {
    outline: var(--bn-len-2) solid var(--bn-brand);
    outline-offset: var(--bn-len-2);
  }

  [data-force='disabled'],
  [data-bn='bn-checkbox']:has(input:disabled),
  [data-bn='bn-radio']:has(input:disabled),
  [data-bn='bn-slider']:has(input:disabled),
  [data-bn='bn-dial']:has(input:disabled),
  [data-bn='bn-field']:has(:disabled),
  [data-bn='bn-search']:has(:disabled),
  [data-bn='bn-color-well']:has(:disabled),
  [data-bn='bn-stepper']:disabled,
  [data-bn='bn-page-control']:has(:disabled) {
    opacity: 0.5;
  }

  [data-bn='bn-button']:disabled,
  [data-bn='bn-button'][data-force='disabled'] {
    cursor: default;
  }

  [data-bn='bn-button'][data-variant='prominent']:disabled,
  [data-bn='bn-button'][data-variant='bordered']:disabled,
  [data-bn='bn-button'][data-variant='prominent'][data-force='disabled'],
  [data-bn='bn-button'][data-variant='bordered'][data-force='disabled'] {
    background: var(--bn-plat-color-fills-tertiary);
    color: var(--bn-plat-color-labels-tertiary);
  }

  [data-bn='bn-button'][data-variant='borderless']:disabled,
  [data-bn='bn-button'][data-variant='glass']:disabled,
  [data-bn='bn-button'][data-variant='glass-prominent']:disabled,
  [data-bn='bn-button'][data-variant='borderless'][data-force='disabled'],
  [data-bn='bn-button'][data-variant='glass'][data-force='disabled'],
  [data-bn='bn-button'][data-variant='glass-prominent'][data-force='disabled'] {
    opacity: 0.5;
  }

  [data-bn='bn-segmented']:disabled,
  [data-bn='bn-switch'] input:disabled,
  [data-bn='bn-switch-input']:disabled,
  [data-bn='bn-field-control']:disabled {
    opacity: 0.5;
  }

  /* Beats a later opaque list fill on the site shell. */
  html[data-theme='dark'] [data-bn='bn-list'][data-grouped='true'] {
    background: var(--bn-list-surface, var(--bn-glass-opaque));
    backdrop-filter: saturate(var(--bn-glass-saturate)) blur(var(--bn-glass-blur));
  }

  body[data-active='home'] article > [data-bn='bn-hero'] {
    gap: var(--bn-len-8);
    margin: 0 0 var(--bn-section-space);
    padding: var(--bn-len-28);
    border-radius: var(--bn-radius-card);
    background: var(--bn-list-surface, var(--bn-glass-opaque));
    backdrop-filter: saturate(var(--bn-glass-saturate)) blur(var(--bn-glass-blur));
    box-shadow: var(--bn-elev-2);
  }

  [data-bn='bn-hero'] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--bn-len-8);
    max-inline-size: 100%;
    margin: 0 0 var(--bn-section-space);
    padding: var(--bn-len-28);
    border-radius: var(--bn-radius-card);
    background: var(--bn-list-surface, var(--bn-glass-opaque));
    backdrop-filter: saturate(var(--bn-glass-saturate)) blur(var(--bn-glass-blur));
    box-shadow: var(--bn-elev-2);
  }

  [data-bn='bn-hero'] h1,
  [data-bn='bn-large-title'],
  [data-bn='bn-nav-title'],
  [data-bn='bn-metric-label'],
  [data-bn='bn-metric-value'],
  [data-bn='bn-badge'],
  [data-bn='bn-dock-item'] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  [data-bn='bn-hero'] h1 {
    margin: 0;
    max-inline-size: 100%;
    font-size: var(--bn-plat-font-large-title-size, var(--bn-type-2rem));
    line-height: var(--bn-plat-font-large-title-leading, 1.2);
    font-weight: var(--bn-plat-font-large-title-emphasized-weight, 700);
  }

  [data-bn-platform='macos'] [data-bn='bn-hero'] h1 {
    font-size: var(--bn-title-large);
    line-height: var(--bn-title-large-leading);
  }

  [data-bn='bn-hero-eyebrow'],
  [data-bn='bn-hero-lede'],
  [data-bn='bn-nav-subtitle'] {
    margin: 0;
    min-inline-size: 0;
    max-inline-size: min(100%, var(--bn-len-36rem));
    overflow-wrap: anywhere;
  }

  [data-bn='bn-hero-lede'] code {
    padding-inline: 0;
  }

  [data-bn='bn-hero-eyebrow'] {
    color: var(--bn-plat-color-labels-secondary);
    font-size: var(--bn-type-13);
    font-weight: 600;
  }

  [data-bn='bn-hero'] nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--bn-len-12);
    margin-block-start: var(--bn-len-8);
  }

  [data-bn='bn-symbol-tile'] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--bn-len-29);
    inline-size: var(--bn-len-29);
    block-size: var(--bn-len-29);
    min-inline-size: var(--bn-len-29);
    min-block-size: var(--bn-len-29);
    border-radius: var(--bn-plat-radius-8);
    background: var(--bn-brand);
    color: var(--bn-brand-ink);
    font-style: normal;
    font-size: var(--bn-type-20);
    font-weight: 700;
    line-height: 1;
  }

  [data-bn='bn-symbol-tile'][data-semantic='true'][data-tint='green'] {
    background: var(--bn-plat-color-accents-green);
  }
  [data-bn='bn-symbol-tile'][data-semantic='true'][data-tint='orange'] {
    background: var(--bn-plat-color-accents-orange);
  }
  [data-bn='bn-symbol-tile'][data-semantic='true'][data-tint='red'] {
    background: var(--bn-plat-color-accents-red);
  }

  [data-bn='bn-badge'] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--bn-len-18);
    padding: 0 var(--bn-len-6);
    border-radius: var(--bn-plat-radius-1000);
    background: var(--bn-plat-color-accents-red);
    color: var(--bn-plat-color-grays-white);
    font-size: var(--bn-type-12);
    font-weight: 600;
    line-height: var(--bn-type-16);
  }

  [data-bn='bn-badge'][data-tint='blue'] {
    background: var(--bn-plat-color-accents-blue);
  }
  [data-bn='bn-badge'][data-tint='green'] {
    background: var(--bn-plat-color-accents-green);
  }

  [data-bn='bn-list-image'] {
    inline-size: var(--bn-len-52);
    block-size: var(--bn-len-52);
    border-radius: var(--bn-plat-radius-8);
    object-fit: cover;
  }

  [data-bn='bn-list-header'] {
    margin: 0 var(--bn-len-16) var(--bn-len-8);
    color: var(--bn-plat-color-labels-secondary);
    font-size: var(--bn-type-13);
    line-height: var(--bn-type-18);
    font-weight: 600;
  }

  [data-bn='bn-list-footer'] {
    margin: var(--bn-len-8) var(--bn-len-16) 0;
    color: var(--bn-plat-color-labels-secondary);
    font-size: var(--bn-type-13);
    line-height: var(--bn-type-18);
  }

  [data-bn='bn-nav-bar'] {
    display: flex;
    flex-direction: column;
    gap: var(--bn-len-4);
    padding: var(--bn-len-8) var(--bn-len-16) var(--bn-len-12);
    background: var(--bn-glass-thick);
    backdrop-filter: saturate(var(--bn-glass-saturate)) blur(var(--bn-glass-blur));
    box-shadow: var(--bn-elev-1);
  }

  [data-bn='bn-nav-bar'] > nav {
    display: flex;
    align-items: center;
    gap: var(--bn-len-8);
    min-block-size: var(--bn-len-44);
  }

  [data-bn='bn-nav-title'],
  [data-bn='bn-large-title'] {
    margin: 0;
  }

  [data-bn='bn-large-title'] {
    font-size: var(--bn-plat-font-large-title-size, var(--bn-type-2rem));
    line-height: var(--bn-plat-font-large-title-leading, 1.2);
    font-weight: 700;
  }

  [data-bn='bn-nav-trailing'] {
    display: flex;
    gap: var(--bn-len-8);
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
  }

  [data-bn='bn-metric'],
  [data-bn='bn-inspector'],
  [data-bn='bn-footer'] {
    background: var(--bn-glass-md);
    backdrop-filter: saturate(var(--bn-glass-saturate)) blur(var(--bn-glass-blur));
    box-shadow: var(--bn-elev-3);
  }

  [data-bn='bn-metric'] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-block-size: var(--bn-len-112);
    padding: var(--bn-len-16);
    border-radius: var(--bn-plat-radius-16);
  }

  [data-bn='bn-metric-value'] {
    margin: 0;
    font-size: var(--bn-plat-font-title-2-size, var(--bn-type-22));
    line-height: var(--bn-plat-font-title-2-leading, var(--bn-type-28));
    font-weight: 700;
  }

  [data-bn='bn-metric-label'],
  [data-bn='bn-metric-detail'] {
    margin: 0;
  }

  [data-bn='bn-metric-detail'] {
    color: var(--bn-plat-color-labels-secondary);
    font-size: var(--bn-type-13);
  }

  [data-bn='bn-card-grid'] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--bn-len-148), 1fr));
    gap: var(--bn-section-space);
    margin: 0;
    padding: 0;
    list-style: none;
    align-items: stretch;
  }

  [data-bn='bn-card-grid'] [data-bn='bn-metric'],
  [data-bn='bn-card-grid'] [data-bn='bn-widget'] {
    width: auto;
    block-size: 100%;
    min-block-size: var(--bn-len-112);
  }

  [data-bn='bn-inspector'] {
    display: flex;
    flex-direction: column;
    gap: var(--bn-len-12);
    min-inline-size: 0;
    max-inline-size: min(100%, var(--bn-len-260));
    padding: var(--bn-len-16);
    border-radius: var(--bn-plat-radius-12);
    box-sizing: border-box;
  }

  [data-bn='bn-catalog-stage'][data-theme] {
    background: var(--bn-color-surface);
    color: var(--bn-color-text);
  }

  [data-bn='bn-catalog-stage'],
  [data-bn='bn-catalog-row'],
  [data-bn='bn-catalog-demo'],
  [data-bn='bn-catalog-header'] {
    box-sizing: border-box;
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  [data-bn='bn-catalog-usage'] {
    max-inline-size: 100%;
    overflow-x: auto;
  }

  [data-bn='bn-inspector'] h2,
  [data-bn='bn-inspector'] h3 {
    margin: 0;
  }

  [data-bn='bn-footer'] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--bn-len-160), 1fr));
    gap: var(--bn-len-16) var(--bn-len-32);
    align-items: start;
    inline-size: 100%;
    max-inline-size: 100%;
    margin: var(--bn-len-28) 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  [data-bn='bn-footer'] nav {
    display: flex;
    flex-direction: column;
    gap: var(--bn-len-4);
    min-inline-size: 0;
  }

  [data-bn='bn-footer'] p {
    margin: 0 0 var(--bn-len-4);
    font-size: var(--bn-content-size, var(--bn-type-15));
    line-height: var(--bn-type-16);
    font-weight: 600;
    color: var(--bn-plat-color-labels-primary);
  }

  [data-bn='bn-footer'] ul {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  [data-bn='bn-footer'] li {
    display: block;
    min-inline-size: 0;
  }

  [data-bn='bn-footer'] a {
    display: flex;
    align-items: center;
    min-block-size: var(--bn-len-32);
    color: var(--bn-plat-color-accents-blue);
    font-size: var(--bn-content-size, var(--bn-type-15));
    line-height: var(--bn-content-leading, var(--bn-type-20));
    text-decoration: none;
  }

  [data-bn='bn-index-bar'] ol {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--bn-len-1);
    margin: 0;
    padding: var(--bn-len-4);
    list-style: none;
  }

  [data-bn='bn-index-bar'] a {
    color: var(--bn-plat-color-accents-blue);
    font-size: var(--bn-type-11);
    font-weight: 600;
    line-height: var(--bn-type-13);
    text-decoration: none;
    white-space: nowrap;
  }

  [data-bn='bn-dock'] {
    display: flex;
    justify-content: center;
  }

  [data-bn='bn-dock'] ul {
    display: flex;
    align-items: stretch;
    gap: var(--bn-len-8);
    margin: 0;
    padding: var(--bn-len-8);
    list-style: none;
    border-radius: var(--bn-plat-radius-22);
    background: var(--bn-glass-sm);
    backdrop-filter: saturate(var(--bn-glass-saturate)) blur(var(--bn-glass-blur));
    box-shadow: var(--bn-elev-1);
  }

  [data-bn='bn-dock-item'] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--bn-len-64);
    min-block-size: var(--bn-len-48);
    padding: 0 var(--bn-len-12);
    border-radius: var(--bn-plat-radius-12);
    color: var(--bn-plat-color-labels-primary);
    text-decoration: none;
  }

  [data-bn='bn-dock-item'][aria-current='page'] {
    background: var(--bn-brand);
    color: var(--bn-brand-ink);
  }

  @media (min-width: 1100px) {
    [data-bn='bn-hero'],
    body[data-active='home'] article > [data-bn='bn-hero'] {
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }

    [data-bn='bn-hero'] > p,
    body[data-active='home'] article > [data-bn='bn-hero'] > p {
      inline-size: 100%;
    }

    [data-bn='bn-hero'] nav,
    body[data-active='home'] article > [data-bn='bn-hero'] nav {
      align-self: flex-start;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-start;
      gap: var(--bn-len-8);
      margin-block-start: var(--bn-len-8);
    }

    [data-bn='bn-hero'] [data-bn='bn-button'],
    body[data-active='home'] article > [data-bn='bn-hero'] [data-bn='bn-button'] {
      inline-size: auto;
      width: auto;
      flex: 0 0 auto;
      align-self: center;
      max-inline-size: max-content;
    }
  }

  [data-bn-platform='macos'] [data-bn='bn-hero'] [data-bn='bn-button'] {
    min-height: var(--bn-len-28);
    min-block-size: var(--bn-len-28);
    padding: 0 var(--bn-len-16);
    border-radius: var(--bn-radius-capsule);
    font-size: var(--bn-content-size, var(--bn-type-15));
    line-height: var(--bn-type-20);
  }

  @media (max-width: 767px) {
    [data-bn='bn-hero'],
    body[data-active='home'] article > [data-bn='bn-hero'] {
      padding-inline: var(--bn-len-12);
    }

    [data-bn='bn-hero'] h1,
    body[data-active='home'] article > [data-bn='bn-hero'] h1 {
      white-space: normal;
      text-overflow: clip;
    }

    [data-bn='bn-hero'] nav,
    body[data-active='home'] article > [data-bn='bn-hero'] nav {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--bn-len-8);
      inline-size: 100%;
    }

    [data-bn='bn-hero'] [data-bn='bn-button'],
    body[data-active='home'] article > [data-bn='bn-hero'] [data-bn='bn-button'] {
      inline-size: auto;
      flex: 0 1 auto;
      min-height: var(--bn-len-44);
      min-block-size: var(--bn-len-44);
      padding: var(--bn-len-8);
      font-size: var(--bn-content-size, var(--bn-type-15));
      line-height: var(--bn-type-20);
      max-inline-size: 100%;
    }

    body[data-active='home'] article > [data-bn='bn-hero'] nav {
      flex-wrap: nowrap;
    }

    body[data-active='home'] article > [data-bn='bn-hero'] [data-bn='bn-button'] {
      padding-inline: var(--bn-len-2);
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    [data-bn='bn-hero'],
    [data-bn='bn-sidebar'],
    [data-bn='bn-tab-bar'],
    [data-bn='bn-list'][data-grouped='true'],
    [data-bn='bn-metric'],
    [data-bn='bn-widget'],
    [data-bn='bn-nav-bar'],
    [data-bn='bn-inspector'],
    [data-bn='bn-footer'],
    [data-bn='bn-dock'] ul,
    [data-bn='bn-button'][data-variant='glass'] {
      backdrop-filter: none;
      background: var(--bn-glass-opaque);
    }
  }
}