@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap";

@layer byu {
  @property --accordion-accent-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --accordion-content-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --accordion-icon-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --accordion-summary-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --accordion-color-focus-ring {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --accordion-font-family-sans {
    syntax: "*";
    inherits: true
  }

  @property --accordion-font-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --accordion-icon-font-family {
    syntax: "*";
    inherits: true
  }

  @property --accordion-control-gap {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --accordion-control-min-height {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --accordion-control-padding-block {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --accordion-control-padding-inline {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --accordion-focus-ring-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --accordion-space-inline {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --accordion-line-height {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  :root {
    --accordion-color-focus-ring: var(--color-focus-ring);
    --accordion-font-family-sans: var(--font-family-sans);
    --accordion-font-size: var(--font-size);
    --accordion-icon-font-family: var(--icon-font-family);
    --accordion-control-gap: var(--layout-control-gap);
    --accordion-control-min-height: var(--layout-control-min-height);
    --accordion-control-padding-block: var(--layout-control-padding-block);
    --accordion-control-padding-inline: var(--layout-control-padding-inline);
    --accordion-focus-ring-size: var(--layout-focus-ring-size);
    --accordion-space-inline: var(--layout-space-inline);
    --accordion-line-height: var(--font-line-height-body);
    --accordion-summary-color: var(--color-text);
    --accordion-content-color: var(--color-text);
    --accordion-accent-color: var(--color-text-accent);
    --accordion-icon-size: var(--layout-control-icon-size);
  }

  details {
    overflow: clip;
  }

  details > summary {
    justify-content: flex-start;
    align-items: center;
    gap: var(--accordion-space-inline);
    min-height: var(--accordion-control-min-height);
    padding: var(--accordion-control-padding-block) var(--accordion-control-padding-inline);
    color: var(--accordion-summary-color);
    cursor: pointer;
    font-family: var(--accordion-font-family-sans);
    font-size: var(--accordion-font-size);
    font-weight: 500;
    line-height: var(--accordion-line-height);
    list-style: none;
    display: flex;
  }

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

  details > summary:after {
    content: "expand_more";
    color: var(--accordion-accent-color);
    font-family: var(--accordion-icon-font-family);
    font-size: var(--accordion-icon-size);
    letter-spacing: normal;
    text-transform: none;
    font-feature-settings: "liga";
    font-variation-settings: "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 32;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizelegibility;
    direction: ltr;
    flex: none;
    order: -1;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    transition: rotate .2s;
  }

  details[open] > summary:after {
    rotate: 180deg;
  }

  details > summary:focus-visible {
    box-shadow: inset 0 0 0 var(--accordion-focus-ring-size) var(--accordion-color-focus-ring);
    outline: none;
  }

  details > summary:hover {
    color: var(--accordion-accent-color);
  }

  details > :not(summary) {
    padding-block: var(--accordion-control-padding-block);
    padding-inline: var(--accordion-control-padding-inline);
    color: var(--accordion-content-color);
    padding-inline-start: calc(var(--accordion-control-padding-inline) + var(--accordion-icon-size) + var(--accordion-space-inline));
  }

  details > :not(summary):last-child {
    padding-bottom: calc(var(--accordion-control-padding-block) + var(--accordion-control-gap));
  }

  details > :not(summary) > :first-child {
    margin-top: 0;
  }

  details > :not(summary) > :last-child {
    margin-bottom: 0;
  }

  @property --badge-background {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --badge-border-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --badge-border-radius {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --badge-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --badge-icon-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --badge-font-family-sans {
    syntax: "*";
    inherits: true
  }

  @property --badge-font-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --badge-font-size-caption {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --badge-border-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --badge-control-gap {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --badge-control-padding-inline {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --badge-line-height {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  :root {
    --badge-font-family-sans: var(--font-family-sans);
    --badge-font-size: var(--font-size);
    --badge-font-size-caption: var(--font-size-caption);
    --badge-border-width: var(--layout-surface-border-width);
    --badge-control-gap: var(--layout-control-gap);
    --badge-control-padding-inline: var(--layout-control-padding-inline);
    --badge-line-height: var(--font-line-height-body);
  }

  span.badge {
    --badge-border-color: var(--color-primary);
    --badge-background: var(--color-primary);
    --badge-color: var(--color-text-inverse);
    --badge-icon-size: calc(var(--badge-font-size) * 1.25);
    --badge-border-radius: 999rem;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    gap: var(--badge-control-gap);
    width: fit-content;
    max-width: 100%;
    min-height: calc(var(--badge-line-height) + (var(--badge-control-gap) * 2));
    padding: var(--badge-control-gap) calc(var(--badge-control-padding-inline) / 2);
    border: var(--badge-border-width) solid var(--badge-border-color);
    border-radius: var(--badge-border-radius);
    background: var(--badge-background);
    color: var(--badge-color);
    font-family: var(--badge-font-family-sans);
    font-size: var(--badge-font-size-caption);
    font-weight: 500;
    line-height: var(--badge-line-height);
    white-space: nowrap;
    display: inline-flex;
  }

  span.badge[data-variant="brand"] {
    --badge-border-color: var(--color-primary);
    --badge-background: var(--color-primary);
    --badge-color: var(--color-text-inverse);
  }

  span.badge[data-variant="info"] {
    --badge-border-color: var(--color-info-strong);
    --badge-background: var(--color-info-subtle);
    --badge-color: var(--color-info-strong);
  }

  span.badge[data-variant="success"] {
    --badge-border-color: var(--color-success-strong);
    --badge-background: var(--color-success-subtle);
    --badge-color: var(--color-success-strong);
  }

  span.badge[data-variant="warning"] {
    --badge-border-color: var(--color-warning-strong);
    --badge-background: var(--color-warning-subtle);
    --badge-color: var(--color-warning-strong);
  }

  span.badge[data-variant="error"] {
    --badge-border-color: var(--color-error-strong);
    --badge-background: var(--color-error-subtle);
    --badge-color: var(--color-error-strong);
  }

  span.badge[data-variant="unavailable"] {
    --badge-border-color: var(--color-unavailable-strong);
    --badge-background: var(--color-unavailable-subtle);
    --badge-color: var(--color-unavailable-strong);
  }

  span.badge > .icon {
    font-size: var(--badge-icon-size);
    --icon-size: var(--badge-icon-size);
    --icon-opsz: 20;
  }

  @property --breadcrumb-current-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --breadcrumb-link-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --breadcrumb-link-hover-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --breadcrumb-separator-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --breadcrumb-color-focus-ring {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --breadcrumb-font-family-sans {
    syntax: "*";
    inherits: true
  }

  @property --breadcrumb-font-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --breadcrumb-icon-fill {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --breadcrumb-icon-font-family {
    syntax: "*";
    inherits: true
  }

  @property --breadcrumb-icon-grad {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --breadcrumb-icon-opsz {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --breadcrumb-icon-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --breadcrumb-icon-wght {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --breadcrumb-control-gap {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --breadcrumb-control-min-height {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --breadcrumb-control-padding-block {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --breadcrumb-focus-ring-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --breadcrumb-line-height {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  :root {
    --breadcrumb-color-focus-ring: var(--color-focus-ring);
    --breadcrumb-font-family-sans: var(--font-family-sans);
    --breadcrumb-font-size: var(--font-size);
    --breadcrumb-icon-fill: var(--icon-fill);
    --breadcrumb-icon-font-family: var(--icon-font-family);
    --breadcrumb-icon-grad: var(--icon-grad);
    --breadcrumb-icon-opsz: var(--icon-opsz);
    --breadcrumb-icon-size: var(--icon-size);
    --breadcrumb-icon-wght: var(--icon-wght);
    --breadcrumb-control-gap: var(--layout-control-gap);
    --breadcrumb-control-min-height: var(--layout-control-min-height);
    --breadcrumb-control-padding-block: var(--layout-control-padding-block);
    --breadcrumb-focus-ring-size: var(--layout-focus-ring-size);
    --breadcrumb-line-height: var(--font-line-height-body);
    --breadcrumb-link-color: var(--color-text-accent);
    --breadcrumb-link-hover-color: var(--color-text-accent-strong);
    --breadcrumb-separator-color: var(--color-border-subtle);
    --breadcrumb-current-color: var(--color-text);
  }

  nav[aria-label="breadcrumb"] {
    color: var(--breadcrumb-link-color);
    font-family: var(--breadcrumb-font-family-sans);
    font-size: var(--breadcrumb-font-size);
    line-height: var(--breadcrumb-line-height);

    & > :is(ul, ol) {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    & > :is(ul, ol) > li {
      margin: 0;
    }

    & :is(a, span[aria-current]) {
      box-sizing: border-box;
      color: inherit;
      font: inherit;
      line-height: inherit;
    }

    & a:focus-visible {
      box-shadow: 0 0 0 var(--breadcrumb-focus-ring-size) var(--breadcrumb-color-focus-ring);
      outline: none;
    }

    & > ol {
      flex-wrap: wrap;
      align-items: center;
      gap: 0;
      display: flex;
    }

    & > ol > li {
      color: var(--breadcrumb-separator-color);
      align-items: center;
      display: inline-flex;
    }

    & > ol > li + li:before {
      content: "chevron_forward";
      margin-inline: calc(var(--breadcrumb-control-gap) * 2);
      color: var(--breadcrumb-separator-color);
      font-family: var(--breadcrumb-icon-font-family);
      font-size: var(--breadcrumb-icon-size);
      letter-spacing: normal;
      text-transform: none;
      font-feature-settings: "liga";
      font-variation-settings: "FILL" var(--breadcrumb-icon-fill),
      "wght" var(--breadcrumb-icon-wght),
      "GRAD" var(--breadcrumb-icon-grad),
      "opsz" var(--breadcrumb-icon-opsz);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizelegibility;
      direction: ltr;
      font-style: normal;
      font-weight: normal;
      line-height: 1;
    }

    & > ol > li > :is(a, span[aria-current]) {
      min-height: var(--breadcrumb-control-min-height);
      padding-block: calc(var(--breadcrumb-control-padding-block) / 2);
      color: var(--breadcrumb-link-color);
      align-items: center;
      text-decoration: none;
      display: inline-flex;
    }

    & > ol > li > a:hover {
      color: var(--breadcrumb-link-hover-color);
    }

    & > ol > li > :is(a[aria-current], span[aria-current]) {
      color: var(--breadcrumb-current-color);
      font-weight: 500;
    }

    & > ol > li:last-child > :is(a, span) {
      color: var(--breadcrumb-current-color);
    }
  }

  @property --button-active-background {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --button-active-border-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --button-active-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --button-background {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --button-border-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --button-border-radius {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --button-border-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --button-color-text {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --button-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --button-color-subtle {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --button-color-strong {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --button-color-text-inverse {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --button-disabled-background {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --button-disabled-border-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --button-disabled-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --button-height {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --button-hover-background {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --button-hover-border-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --button-hover-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --button-icon-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --button-color-focus-ring {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --button-font-family-sans {
    syntax: "*";
    inherits: true
  }

  @property --button-font-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --button-icon-fill {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --button-icon-font-family {
    syntax: "*";
    inherits: true
  }

  @property --button-icon-grad {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --button-icon-opsz {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --button-icon-wght {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --button-icon-padding-block {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --button-action-padding-block {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --button-action-padding-inline {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --button-control-gap {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --button-control-radius {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --button-focus-ring-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  :root {
    --button-color-focus-ring: var(--color-focus-ring);
    --button-font-family-sans: var(--font-family-sans);
    --button-font-size: var(--font-size);
    --button-icon-fill: var(--icon-fill);
    --button-icon-font-family: var(--icon-font-family);
    --button-icon-grad: var(--icon-grad);
    --button-icon-opsz: var(--icon-opsz);
    --button-icon-wght: var(--icon-wght);
    --button-action-padding-block: var(--layout-control-padding-block);
    --button-action-padding-inline: var(--layout-action-padding-inline);
    --button-control-gap: var(--layout-control-gap);
    --button-control-radius: var(--layout-control-radius);
    --button-focus-ring-size: var(--layout-focus-ring-size);
  }

  :is(button, a.button) {
    --button-border-radius: var(--button-control-radius);
    --grouped-control-radius: var(--button-border-radius, var(--button-control-radius));
    --button-border-width: var(--layout-control-border-width);
    --button-height: max(var(--layout-control-min-height),
    calc((var(--button-font-size) * var(--font-line-height-body)) +
        (var(--button-action-padding-block) * 2) + (var(--button-border-width) * 2)));
    --button-icon-size: var(--layout-control-icon-size);
    --button-icon-padding-block: max(0px,
    calc((var(--button-height) - var(--button-icon-size) - (var(--button-border-width) * 2)) / 2));
    --button-color: var(--color-primary);
    --button-color-subtle: var(--color-primary-subtle);
    --button-color-strong: var(--color-primary-strong);
    --button-color-text-inverse: var(--color-text-inverse);
    --button-border-color: var(--button-color);
    --button-background: var(--button-color);
    --button-color-text: var(--button-color-text-inverse);
    --button-hover-border-color: var(--button-color-subtle);
    --button-hover-background: var(--button-color-subtle);
    --button-hover-color: var(--button-color);
    --button-active-border-color: var(--button-color-strong);
    --button-active-background: var(--button-color-strong);
    --button-active-color: var(--button-color-text-inverse);
    --button-disabled-border-color: var(--color-accent-disabled);
    --button-disabled-background: var(--color-accent-disabled);
    --button-disabled-color: var(--color-text-subtle);
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    gap: var(--button-control-gap);
    padding: var(--button-action-padding-block) var(--button-action-padding-inline);
    min-height: var(--button-height);
    border: var(--button-border-width) solid var(--button-border-color);
    border-radius: var(--button-border-radius, var(--button-control-radius));
    background-color: var(--button-background);
    color: var(--button-color-text);
    font-family: var(--button-font-family-sans);
    font-size: var(--button-font-size);
    leading-trim: both;
    text-edge: cap;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    font-weight: 500;
    line-height: normal;
    text-decoration: none;
    transition: background-color .16s, border-color .16s, color .16s, box-shadow .16s;
    display: inline-flex;
  }

  form[role="search"] > button, form[role="search"] > fieldset[role="group"] > button {
    --button-border-radius: 999px;
  }

  [data-color-theme="dark"] :is(button, a.button):is(.outline, .secondary, .flat, .tertiary) {
    --button-color: var(--color-text-accent);
  }

  :is(button, a.button).error:not([data-variant]) {
    --button-color: var(--color-error);
    --button-color-text: white;
    --button-color-subtle: var(--color-error-subtle);
    --button-color-strong: var(--color-error-strong);
  }

  [data-variant="error"]:is(button, a.button), [data-variant="info"]:is(button, a.button), [data-variant="success"]:is(button, a.button), [data-variant="warning"]:is(button, a.button) {
    --button-color-text: black;
  }

  [data-variant="error"]:is(button, a.button) {
    --button-color: var(--color-error);
    --button-color-text: white;
    --button-color-subtle: var(--color-error-subtle);
    --button-color-strong: var(--color-error-strong);
  }

  [data-variant="info"]:is(button, a.button) {
    --button-color: var(--color-info);
    --button-color-subtle: var(--color-info-subtle);
    --button-color-strong: var(--color-info-strong);
  }

  [data-variant="success"]:is(button, a.button) {
    --button-color: var(--color-success);
    --button-color-subtle: var(--color-success-subtle);
    --button-color-strong: var(--color-success-strong);
  }

  [data-variant="warning"]:is(button, a.button) {
    --button-color: var(--color-warning);
    --button-color-subtle: var(--color-warning-subtle);
    --button-color-strong: var(--color-warning-strong);
  }

  :is(button, a.button):is(.outline, .secondary) {
    --button-border-color: var(--button-color);
    --button-background: transparent;
    --button-color-text: var(--button-border-color);
    --button-active-border-color: var(--button-color-strong);
    --button-active-background: var(--button-color-strong);
    --button-active-color: var(--button-color-text-inverse);
    --button-disabled-border-color: var(--color-border);
    --button-disabled-background: transparent;
  }

  :is(button, a.button):is(.flat, .tertiary) {
    --button-border-color: transparent;
    --button-background: transparent;
    --button-color-text: var(--button-color);
    --button-hover-border-color: var(--button-color-subtle);
    --button-hover-background: transparent;
    --button-hover-color: var(--button-color-text);
    --button-active-border-color: var(--button-color-subtle);
    --button-active-background: var(--button-color-subtle);
    --button-active-color: var(--button-color-text);
  }

  [data-color-theme="dark"] :is(button, a.button).error:not([data-variant]), [data-color-theme="dark"] :is(button, a.button)[data-variant="error"] {
    --button-color: color-mix(in srgb, var(--color-error) 75%, black);
    --button-color-strong: color-mix(in srgb, var(--color-error) 60%, black);
  }

  [data-color-theme="dark"] :is(button, a.button)[data-variant="info"] {
    --button-color: color-mix(in srgb, var(--color-info) 66%, black);
  }

  [data-color-theme="dark"] :is(button, a.button)[data-variant="success"] {
    --button-color: color-mix(in srgb, var(--color-success) 64%, black);
  }

  [data-color-theme="dark"] :is(button, a.button)[data-variant="warning"] {
    --button-color: color-mix(in srgb, var(--color-warning) 55%, black);
  }

  [data-color-theme="dark"] :is(button, a.button):not(.outline, .secondary, .flat, .tertiary):is(.error:not([data-variant]), [data-variant="error"], [data-variant="info"], [data-variant="success"], [data-variant="warning"]) {
    --button-color-text: var(--button-color-text-inverse);
  }

  [data-color-theme="dark"] :is(button, a.button):not(.outline, .secondary, .flat, .tertiary, .error, [data-variant]) {
    --button-hover-border-color: var(--color-primary-subtle);
    --button-hover-background: var(--color-primary-subtle);
    --button-hover-color: var(--color-text-accent);
  }

  button[aria-active="true"] {
    --button-border-color: var(--color-primary);
    --button-background: var(--color-primary);
    --button-color-text: var(--color-text-inverse);
    --button-hover-border-color: var(--button-border-color);
    --button-hover-background: var(--button-background);
    --button-hover-color: var(--button-color-text);
    --button-active-border-color: var(--color-primary-strong);
    --button-active-background: var(--color-primary-strong);
    --button-active-color: var(--color-text-inverse);
  }

  :is(button, a.button):hover {
    border-color: var(--button-hover-border-color);
    background-color: var(--button-hover-background);
    color: var(--button-hover-color);
    outline: none;
  }

  :is(button, a.button):focus-visible {
    border-color: var(--button-hover-border-color);
    background-color: var(--button-hover-background);
    color: var(--button-hover-color);
    box-shadow: 0 0 0 var(--button-focus-ring-size) var(--button-color-focus-ring);
    outline: none;
  }

  :is(button, a.button):is(:active, [aria-pressed="true"]) {
    border-color: var(--button-active-border-color);
    background-color: var(--button-active-background);
    color: var(--button-active-color);
  }

  :is(button, a.button):is(:disabled, [aria-disabled="true"]) {
    --button-hover-border-color: var(--button-disabled-border-color);
    --button-hover-background: var(--button-disabled-background);
    --button-hover-color: var(--button-disabled-color);
    --button-active-border-color: var(--button-disabled-border-color);
    --button-active-background: var(--button-disabled-background);
    --button-active-color: var(--button-disabled-color);
    border-color: var(--button-disabled-border-color);
    background-color: var(--button-disabled-background);
    color: var(--button-disabled-color);
    box-shadow: none;
    cursor: not-allowed;
  }

  :is(button, a.button):has( > .icon), :is(button, a.button).icon {
    padding-block: var(--button-icon-padding-block);
  }

  :is(button, a.button).icon {
    inline-size: var(--button-height);
    padding-inline: var(--button-icon-padding-block);
    font-family: var(--button-icon-font-family);
    font-style: normal;
    font-weight: normal;
    font-size: var(--button-icon-size);
    letter-spacing: normal;
    text-transform: none;
    font-feature-settings: "liga";
    font-variation-settings: "FILL" var(--button-icon-fill),
    "wght" var(--button-icon-wght),
    "GRAD" var(--button-icon-grad),
    "opsz" var(--button-icon-opsz);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizelegibility;
    --icon-opsz: 32;
    direction: ltr;
    line-height: 1;
  }

  :is(button, a.button) > .icon {
    padding-right: calc(var(--button-action-padding-inline) / 4);
    font-size: var(--button-icon-size);
    --icon-opsz: 32;
  }

  @media (prefers-reduced-motion: reduce) {
    :is(button, a.button) {
      transition: none;
    }
  }

  button[aria-busy="true"]:disabled {
    cursor: wait;
  }

  button[aria-busy="true"]:before {
    --loading-size: calc(var(--button-icon-size) * .75);
  }

  button[aria-busy="true"]:not(:empty):before {
    margin-inline-end: calc(var(--button-action-padding-inline) / 4);
  }

  button[aria-busy="true"]:empty {
    aspect-ratio: 1;
    inline-size: auto;
    padding-inline: var(--button-action-padding-block);
  }

  @property --alert-background-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --alert-border-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --alert-icon {
    syntax: "<string>";
    inherits: true;
    initial-value: "";
  }

  @property --alert-icon-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --alert-surface-background {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --alert-surface-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --alert-symbol-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --alert-symbol-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --card-border-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --card-border-radius {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --card-border-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --card-color-accent {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --card-color-accent-subtle {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --card-color-text {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --card-icon-font-family {
    syntax: "*";
    inherits: true
  }

  @property --card-control-gap {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --card-control-min-height {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --card-alert-close-focus-ring-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --card-space-inline {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --card-space-stack {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  :root {
    --card-color-accent: var(--color-accent);
    --card-color-accent-subtle: var(--color-accent-subtle);
    --card-color-text: var(--color-text);
    --card-icon-font-family: var(--icon-font-family);
    --card-control-gap: var(--layout-control-gap);
    --card-control-min-height: var(--layout-control-min-height);
    --card-alert-close-focus-ring-size: var(--layout-focus-ring-size);
    --card-space-inline: var(--layout-space-inline);
    --card-space-stack: var(--layout-space-stack);
  }

  :where(article, figure) {
    --card-border-width: var(--layout-surface-border-width);
    --card-border-color: var(--color-border-subtle);
    --card-border-radius: var(--layout-control-radius);
    box-sizing: border-box;
    gap: var(--card-space-stack);
    padding-block: var(--card-space-stack);
    padding-inline: var(--card-space-inline);
    border: var(--card-border-width) solid var(--card-border-color);
    border-radius: var(--card-border-radius);
    background: var(--card-color-accent-subtle);
    color: var(--card-color-text);
    margin: 0;
    display: grid;
  }

  :where(article, figure) > * {
    min-inline-size: 0;
  }

  figure {
    overflow: visible;
  }

  figure > img {
    inline-size: calc(100% + (var(--card-space-inline) * 2));
    max-inline-size: none;
    margin-inline: calc(var(--card-space-inline) * -1);
    object-fit: cover;
    display: block;
  }

  figure > img:first-child {
    border-start-start-radius: max(0px, calc(var(--card-border-radius) - var(--card-border-width)));
    border-start-end-radius: max(0px, calc(var(--card-border-radius) - var(--card-border-width)));
    margin-block-start: calc(var(--card-space-stack) * -1);
  }

  figure > img:last-child {
    border-end-end-radius: max(0px, calc(var(--card-border-radius) - var(--card-border-width)));
    border-end-start-radius: max(0px, calc(var(--card-border-radius) - var(--card-border-width)));
    margin-block-end: calc(var(--card-space-stack) * -1);
  }

  [data-color-theme="dark"] :where(article, figure) {
    --card-border-width: var(--layout-surface-border-width);
    --card-border-color: var(--color-border-subtle);
  }

  :where(article, figure) > header {
    gap: var(--card-control-gap);
    display: grid;
  }

  :where(article, figure) > header > :where(h1, h2, h3, h4, h5, h6, p) {
    margin: 0;
  }

  :where(article, figure) > footer {
    justify-content: flex-end;
    gap: var(--card-space-inline);
    flex-wrap: wrap;
    display: flex;
  }

  :where(article, figure) > footer > button:first-child {
    border-end-start-radius: max(0px, calc(var(--card-border-radius) - var(--card-border-width)));
  }

  :where(article, figure) > footer > button:last-child {
    border-end-end-radius: max(0px, calc(var(--card-border-radius) - var(--card-border-width)));
  }

  :where(article, figure) > :first-child {
    margin-top: 0;
  }

  :where(article, figure) > :last-child {
    margin-bottom: 0;
  }

  article[aria-busy="true"] {
    --loading-color: var(--card-color-text);
    min-block-size: var(--card-control-min-height);
    position: relative;
  }

  article[aria-busy="true"] > * {
    opacity: .48;
    filter: blur(4px);
    pointer-events: none;
  }

  article[aria-busy="true"]:before {
    z-index: 1;
    margin: auto;
    position: absolute;
    inset: 0;
  }

  article[data-variant] {
    --alert-icon-size: var(--layout-control-icon-size);
    --alert-symbol-size: var(--icon-size);
    --alert-icon: "info_i";
    --alert-background-color: var(--color-info);
    --alert-surface-color: var(--card-color-text);
    --alert-surface-background: var(--card-color-accent-subtle);
    --alert-symbol-color: var(--color-text-inverse);
    background: var(--alert-surface-background);
    color: var(--alert-surface-color);
    padding-inline-start: calc((var(--card-space-inline) * 2) + var(--alert-icon-size));
    position: relative;
    container-type: inline-size;
  }

  article[data-variant]:has( > button.icon) {
    padding-inline-end: calc(var(--card-space-inline) + var(--card-control-min-height));
  }

  article[data-variant] > button.icon {
    --button-border-color: transparent;
    --button-background: transparent;
    --button-color-text: var(--alert-surface-color);
    --button-hover-border-color: var(--button-border-color);
    --button-hover-background: var(--button-background);
    --button-hover-color: var(--button-color-text);
    box-sizing: border-box;
    inline-size: var(--card-control-min-height);
    block-size: var(--card-control-min-height);
    cursor: pointer;
    place-items: center;
    display: grid;
    position: absolute;
    inset-block-start: var(--card-space-stack);
    inset-inline-end: var(--card-space-inline);
  }

  article[data-variant] > button.icon:focus-visible {
    outline: var(--card-alert-close-focus-ring-size) solid currentcolor;
    outline-offset: var(--card-alert-close-focus-ring-size);
  }

  article[data-variant] > footer {
    justify-content: flex-start;
  }

  @container (width <= 28rem) {
    article[data-variant] > footer {
      flex-direction: column;
      align-items: stretch;
    }
  }

  [data-color-theme="dark"] article[data-variant] {
    --alert-border-color: var(--color-border-subtle-inverse);
    --alert-surface-color: var(--color-text-inverse);
    --alert-surface-background: var(--color-primary-strong);
    border: var(--card-border-width) solid var(--alert-border-color);
  }

  article[data-variant] > :where(h1, h2, h3, h4, h5, h6, p) {
    color: inherit;
  }

  article[data-variant="warning"] {
    --alert-background-color: var(--color-warning);
    --alert-icon: "priority_high";
    --alert-symbol-color: var(--card-color-text);
  }

  article[data-variant="info"] {
    --alert-icon: "info_i";
    --alert-background-color: var(--color-info);
  }

  article[data-variant="success"] {
    --alert-icon: "check";
    --alert-background-color: var(--color-success-strong);
  }

  article[data-variant="error"] {
    --alert-background-color: var(--color-error-strong);
    --alert-icon: "close";
  }

  article[data-variant="unavailable"] {
    --alert-background-color: var(--color-unavailable);
    --alert-icon: "remove";
  }

  article[data-variant]:before {
    content: var(--alert-icon);
    box-sizing: border-box;
    inline-size: var(--alert-icon-size);
    block-size: var(--alert-icon-size);
    background: var(--alert-background-color);
    color: var(--alert-symbol-color);
    font-family: var(--card-icon-font-family);
    font-size: var(--alert-symbol-size);
    letter-spacing: normal;
    text-transform: none;
    font-feature-settings: "liga";
    font-variation-settings: "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 32;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizelegibility;
    direction: ltr;
    border-radius: 50%;
    place-items: center;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    display: grid;
    position: absolute;
    inset-block-start: var(--card-space-stack);
    inset-inline-start: var(--card-space-inline);
  }

  @property --checkbox-color-primary {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --checkbox-color-primary-subtle {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --checkbox-color-text {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --checkbox-color-text-accent {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --checkbox-color-text-subtle {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --checkbox-font-family-sans {
    syntax: "*";
    inherits: true
  }

  @property --checkbox-font-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --checkbox-control-border-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --checkbox-control-gap {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --checkbox-focus-ring-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --checkbox-space-inline {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --checkbox-line-height {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  :root {
    --checkbox-color-primary: var(--color-primary);
    --checkbox-color-primary-subtle: var(--color-primary-subtle);
    --checkbox-color-text: var(--color-text);
    --checkbox-color-text-accent: var(--color-text-accent);
    --checkbox-color-text-subtle: var(--color-text-subtle);
    --checkbox-font-family-sans: var(--font-family-sans);
    --checkbox-font-size: var(--font-size);
    --checkbox-control-border-width: var(--layout-control-border-width);
    --checkbox-control-gap: var(--layout-control-gap);
    --checkbox-focus-ring-size: var(--layout-focus-ring-size);
    --checkbox-space-inline: var(--layout-space-inline);
    --checkbox-line-height: var(--font-line-height-body);
  }

  fieldset:has( > label > input[type="checkbox"]) {
    gap: var(--checkbox-control-gap);
    min-inline-size: 0;
    color: var(--checkbox-color-text);
    font: inherit;
    font-family: var(--checkbox-font-family-sans);
    font-size: var(--checkbox-font-size);
    line-height: var(--checkbox-line-height);
    border: 0;
    margin: 0;
    padding: 0;
    display: grid;
  }

  fieldset:has( > label > input[type="checkbox"]) > legend {
    margin: 0 0 var(--checkbox-control-gap);
    padding: 0;
  }

  label:not(.chip):has( > input[type="checkbox"]:not([role="switch"])) {
    align-items: start;
    gap: var(--checkbox-space-inline);
    color: inherit;
    cursor: pointer;
    font: inherit;
    line-height: inherit;
    display: flex;
  }

  label:not(.chip):has( > input[type="checkbox"]:not([role="switch"]):disabled) {
    color: var(--checkbox-color-text-subtle);
    cursor: not-allowed;
  }

  label:not(.chip) > input[type="checkbox"]:not([role="switch"]) {
    inline-size: var(--checkbox-font-size);
    block-size: var(--checkbox-font-size);
    margin: calc(((var(--checkbox-font-size) * var(--checkbox-line-height)) - var(--checkbox-font-size)) / 2) 0 0;
    accent-color: var(--checkbox-color-primary);
    cursor: inherit;
    flex: none;
  }

  label:not(.chip) > input[type="checkbox"]:not([role="switch"]):focus-visible {
    outline: var(--checkbox-control-border-width) solid var(--checkbox-color-primary-subtle);
    outline-offset: var(--checkbox-focus-ring-size);
  }

  @property --chip-background {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --chip-border-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --chip-border-radius {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --chip-color-text {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --chip-color-text-accent {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --chip-icon-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --chip-color-focus-ring {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --chip-font-family-sans {
    syntax: "*";
    inherits: true
  }

  @property --chip-font-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --chip-font-size-caption {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --chip-control-border-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --chip-control-gap {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --chip-control-padding-inline {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --chip-focus-ring-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --chip-line-height {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  :root {
    --chip-color-focus-ring: var(--color-focus-ring);
    --chip-color-text-accent: var(--color-text-accent);
    --chip-font-family-sans: var(--font-family-sans);
    --chip-font-size: var(--font-size);
    --chip-font-size-caption: var(--font-size-caption);
    --chip-control-border-width: var(--layout-control-border-width);
    --chip-control-gap: var(--layout-control-gap);
    --chip-control-padding-inline: var(--layout-control-padding-inline);
    --chip-focus-ring-size: var(--layout-focus-ring-size);
    --chip-line-height: var(--font-line-height-body);
  }

  fieldset:has(label.chip > input:is([type="checkbox"], [type="radio"])) {
    gap: var(--chip-control-gap);
    min-inline-size: 0;
    font: inherit;
    font-family: var(--chip-font-family-sans);
    font-size: var(--chip-font-size);
    line-height: var(--chip-line-height);
    border: 0;
    margin: 0;
    padding: 0;
    display: grid;
  }

  fieldset:has(label.chip > input:is([type="checkbox"], [type="radio"])) > legend {
    color: var(--chip-color-text-accent);
    font: inherit;
    font-family: var(--chip-font-family-sans);
    font-size: var(--chip-font-size);
    line-height: var(--chip-line-height);
    margin: 0;
    padding: 0;
  }

  label.chip:has( > input:is([type="checkbox"], [type="radio"])) {
    --chip-border-color: var(--color-primary);
    --chip-background: white;
    --chip-color-text: var(--color-primary-strong);
    --chip-icon-size: calc(var(--chip-font-size) * 1.25);
    --chip-border-radius: 999rem;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    gap: var(--chip-control-gap);
    width: fit-content;
    max-width: 100%;
    min-height: calc(var(--chip-line-height) + (var(--chip-control-gap) * 2));
    padding: var(--chip-control-gap) calc(var(--chip-control-padding-inline) / 2);
    border: var(--chip-control-border-width) solid var(--chip-border-color);
    border-radius: var(--chip-border-radius);
    background: var(--chip-background);
    color: var(--chip-color-text);
    font-family: var(--chip-font-family-sans);
    font-size: var(--chip-font-size-caption);
    font-weight: 500;
    line-height: var(--chip-line-height);
    white-space: nowrap;
    transition: background-color .16s, border-color .16s, color .16s, box-shadow .16s;
    display: inline-flex;
  }

  label.chip:has( > input:is([type="checkbox"], [type="radio"]))[data-variant="error"] {
    --chip-border-color: var(--color-error);
    --chip-background: white;
    --chip-color-text: var(--color-error-strong);
  }

  label.chip:has( > input:is([type="checkbox"], [type="radio"]))[data-variant="info"] {
    --chip-border-color: var(--color-info);
    --chip-background: white;
    --chip-color-text: var(--color-info-strong);
  }

  label.chip:has( > input:is([type="checkbox"], [type="radio"]))[data-variant="success"] {
    --chip-border-color: var(--color-success);
    --chip-background: white;
    --chip-color-text: var(--color-success-strong);
  }

  label.chip:has( > input:is([type="checkbox"], [type="radio"]))[data-variant="warning"] {
    --chip-border-color: var(--color-warning);
    --chip-background: white;
    --chip-color-text: var(--color-warning-strong);
  }

  label.chip:has( > input:is([type="checkbox"], [type="radio"])) > .icon {
    font-size: var(--chip-icon-size);
    --icon-size: var(--chip-icon-size);
    --icon-opsz: 20;
  }

  label.chip:has( > input:is([type="checkbox"], [type="radio"])) {
    cursor: pointer;
  }

  label.chip > input:is([type="checkbox"], [type="radio"]) {
    white-space: nowrap;
    clip-path: inset(50%);
    border: 0;
    block-size: 1px;
    inline-size: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  label.chip:has( > input:is([type="checkbox"], [type="radio"]):checked) {
    --chip-border-color: var(--color-primary);
    --chip-background: var(--color-primary);
    --chip-color-text: var(--color-text-inverse);
  }

  label.chip:has( > input:is([type="checkbox"], [type="radio"]):checked)[data-variant="error"] {
    --chip-border-color: var(--color-error);
    --chip-background: var(--color-error);
    --chip-color-text: white;
  }

  label.chip:has( > input:is([type="checkbox"], [type="radio"]):checked)[data-variant="info"] {
    --chip-border-color: var(--color-info);
    --chip-background: var(--color-info);
    --chip-color-text: black;
  }

  label.chip:has( > input:is([type="checkbox"], [type="radio"]):checked)[data-variant="success"] {
    --chip-border-color: var(--color-success);
    --chip-background: var(--color-success);
    --chip-color-text: black;
  }

  label.chip:has( > input:is([type="checkbox"], [type="radio"]):checked)[data-variant="warning"] {
    --chip-border-color: var(--color-warning);
    --chip-background: var(--color-warning);
    --chip-color-text: black;
  }

  label.chip:has( > input:is([type="checkbox"], [type="radio"]):not(:disabled)):is(:active, :has( > input:is([type="checkbox"], [type="radio"]):active)) {
    --chip-border-color: var(--color-primary-strong);
    --chip-background: var(--color-primary-strong);
    --chip-color-text: var(--color-text-inverse);
  }

  label.chip:has( > input:is([type="checkbox"], [type="radio"]):not(:disabled))[data-variant="error"]:is(:active, :has( > input:is([type="checkbox"], [type="radio"]):active)) {
    --chip-border-color: var(--color-error-strong);
    --chip-background: var(--color-error-strong);
    --chip-color-text: var(--color-text-inverse);
  }

  label.chip:has( > input:is([type="checkbox"], [type="radio"]):not(:disabled))[data-variant="info"]:is(:active, :has( > input:is([type="checkbox"], [type="radio"]):active)) {
    --chip-border-color: var(--color-info-strong);
    --chip-background: var(--color-info-strong);
    --chip-color-text: var(--color-text-inverse);
  }

  label.chip:has( > input:is([type="checkbox"], [type="radio"]):not(:disabled))[data-variant="success"]:is(:active, :has( > input:is([type="checkbox"], [type="radio"]):active)) {
    --chip-border-color: var(--color-success-strong);
    --chip-background: var(--color-success-strong);
    --chip-color-text: var(--color-text-inverse);
  }

  label.chip:has( > input:is([type="checkbox"], [type="radio"]):not(:disabled))[data-variant="warning"]:is(:active, :has( > input:is([type="checkbox"], [type="radio"]):active)) {
    --chip-border-color: var(--color-warning-strong);
    --chip-background: var(--color-warning-strong);
    --chip-color-text: var(--color-text-inverse);
  }

  [data-color-theme="dark"] label.chip:has( > input:is([type="checkbox"], [type="radio"]))[data-variant="error"] {
    --chip-border-color: color-mix(in srgb, var(--color-error) 75%, black);
    --chip-color-text: color-mix(in srgb, var(--color-error) 75%, black);
  }

  [data-color-theme="dark"] label.chip:has( > input:is([type="checkbox"], [type="radio"]))[data-variant="info"] {
    --chip-border-color: color-mix(in srgb, var(--color-info) 66%, black);
    --chip-color-text: color-mix(in srgb, var(--color-info) 66%, black);
  }

  [data-color-theme="dark"] label.chip:has( > input:is([type="checkbox"], [type="radio"]))[data-variant="success"] {
    --chip-border-color: color-mix(in srgb, var(--color-success) 64%, black);
    --chip-color-text: color-mix(in srgb, var(--color-success) 64%, black);
  }

  [data-color-theme="dark"] label.chip:has( > input:is([type="checkbox"], [type="radio"]))[data-variant="warning"] {
    --chip-border-color: color-mix(in srgb, var(--color-warning) 55%, black);
    --chip-color-text: color-mix(in srgb, var(--color-warning) 55%, black);
  }

  [data-color-theme="dark"] label.chip:has( > input:is([type="checkbox"], [type="radio"]):checked)[data-variant="error"] {
    --chip-background: color-mix(in srgb, var(--color-error) 75%, black);
    --chip-color-text: var(--color-text-inverse);
  }

  [data-color-theme="dark"] label.chip:has( > input:is([type="checkbox"], [type="radio"]):checked)[data-variant="info"] {
    --chip-background: color-mix(in srgb, var(--color-info) 66%, black);
    --chip-color-text: var(--color-text-inverse);
  }

  [data-color-theme="dark"] label.chip:has( > input:is([type="checkbox"], [type="radio"]):checked)[data-variant="success"] {
    --chip-background: color-mix(in srgb, var(--color-success) 64%, black);
    --chip-color-text: var(--color-text-inverse);
  }

  [data-color-theme="dark"] label.chip:has( > input:is([type="checkbox"], [type="radio"]):checked)[data-variant="warning"] {
    --chip-background: color-mix(in srgb, var(--color-warning) 55%, black);
    --chip-color-text: var(--color-text-inverse);
  }

  [data-color-theme="dark"] label.chip:has( > input:is([type="checkbox"], [type="radio"]):not(:disabled)):is(:active, :has( > input:is([type="checkbox"], [type="radio"]):active)) {
    --chip-border-color: var(--color-primary-strong);
    --chip-background: var(--color-primary-strong);
    --chip-color-text: var(--color-text-inverse);
  }

  [data-color-theme="dark"] label.chip:has( > input:is([type="checkbox"], [type="radio"]):not(:disabled))[data-variant="error"]:is(:active, :has( > input:is([type="checkbox"], [type="radio"]):active)) {
    --chip-border-color: color-mix(in srgb, var(--color-error) 60%, black);
    --chip-background: color-mix(in srgb, var(--color-error) 60%, black);
  }

  [data-color-theme="dark"] label.chip:has( > input:is([type="checkbox"], [type="radio"]):not(:disabled))[data-variant="info"]:is(:active, :has( > input:is([type="checkbox"], [type="radio"]):active)) {
    --chip-border-color: var(--color-info-strong);
    --chip-background: var(--color-info-strong);
  }

  [data-color-theme="dark"] label.chip:has( > input:is([type="checkbox"], [type="radio"]):not(:disabled))[data-variant="success"]:is(:active, :has( > input:is([type="checkbox"], [type="radio"]):active)) {
    --chip-border-color: var(--color-success-strong);
    --chip-background: var(--color-success-strong);
  }

  [data-color-theme="dark"] label.chip:has( > input:is([type="checkbox"], [type="radio"]):not(:disabled))[data-variant="warning"]:is(:active, :has( > input:is([type="checkbox"], [type="radio"]):active)) {
    --chip-border-color: var(--color-warning-strong);
    --chip-background: var(--color-warning-strong);
  }

  label.chip:has( > input:is([type="checkbox"], [type="radio"]):focus-visible) {
    box-shadow: 0 0 0 var(--chip-focus-ring-size) var(--chip-color-focus-ring);
  }

  label.chip:has( > input:is([type="checkbox"], [type="radio"]):disabled) {
    --chip-border-color: var(--color-accent-disabled);
    --chip-background: var(--color-accent-disabled);
    --chip-color-text: var(--color-text-subtle);
    cursor: not-allowed;
  }

  @media (prefers-reduced-motion: reduce) {
    label.chip:has( > input:is([type="checkbox"], [type="radio"])) {
      transition: none;
    }
  }

  @property --color-primary {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --color-primary-strong {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --color-primary-subtle {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --color-accent {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --color-accent-subtle {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --color-accent-strong {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --color-accent-disabled {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --color-text-accent {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --color-text-accent-strong {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --color-text-accent-subtle {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --color-text {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --color-text-inverse {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --color-text-strong {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --color-text-strong-inverse {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --color-text-subtle {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --color-text-subtle-inverse {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --color-text-accent-inverse {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --color-text-accent-strong-inverse {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --color-text-accent-subtle-inverse {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --color-border {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --color-border-inverse {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --color-border-subtle {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --color-border-strong {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --color-border-strong-inverse {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --color-border-subtle-inverse {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --color-focus-ring {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --color-info {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --color-info-strong {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --color-info-subtle {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --color-success {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --color-success-strong {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --color-success-subtle {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --color-warning {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --color-warning-strong {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --color-warning-subtle {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --color-error {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --color-error-strong {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --color-error-subtle {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --color-unavailable {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --color-unavailable-strong {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --color-unavailable-subtle {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  :root, [data-color-theme="light"] {
    color-scheme: light;
    --color-primary: #0047ba;
    --color-primary-strong: color-mix(in srgb, var(--color-primary) 50%, black);
    --color-primary-subtle: color-mix(in srgb, var(--color-primary) 12%, var(--color-accent));
    --color-accent: #f6f6f8;
    --color-accent-subtle: rgb(from var(--color-accent) calc(r * 2.0217) calc(g * 2.0909) calc(b * 2.0217));
    --color-accent-strong: color-mix(in srgb, var(--color-accent) 82%, black);
    --color-accent-disabled: color-mix(in srgb, var(--color-accent) 90%, var(--color-text));
    --color-text-accent: #012e5d;
    --color-text-accent-strong: color-mix(in srgb, var(--color-text-accent) 70%, black);
    --color-text-accent-subtle: color-mix(in srgb, var(--color-text-accent) 58%, white);
    --color-text: #141414;
    --color-text-inverse: #f2f2f2;
    --color-text-strong: color-mix(in srgb, var(--color-text) 90%, black);
    --color-text-strong-inverse: color-mix(in srgb, var(--color-text-inverse) 90%, black);
    --color-text-subtle: color-mix(in srgb, var(--color-text) 65%, white);
    --color-text-subtle-inverse: color-mix(in srgb, var(--color-text-inverse) 65%, white);
    --color-text-accent-inverse: #f2f2f2;
    --color-text-accent-strong-inverse: color-mix(in srgb, var(--color-text-accent-inverse) 90%, black);
    --color-text-accent-subtle-inverse: color-mix(in srgb, var(--color-text-accent-inverse) 65%, white);
    --color-border: #8f8f8f;
    --color-border-inverse: #fff;
    --color-border-subtle: color-mix(in srgb, var(--color-border) 52%, white);
    --color-border-strong: color-mix(in srgb, var(--color-border) 74%, black);
    --color-border-strong-inverse: color-mix(in srgb, var(--color-border-inverse) 80%, black);
    --color-border-subtle-inverse: color-mix(in srgb, var(--color-border-inverse) 48%, transparent);
    --color-focus-ring: var(--color-primary-subtle);
    --color-info: #1fb3d1;
    --color-info-strong: color-mix(in srgb, var(--color-info) 52%, black);
    --color-info-subtle: color-mix(in srgb, var(--color-info) 30%, white);
    --color-success: #10a170;
    --color-success-strong: color-mix(in srgb, var(--color-success) 40%, black);
    --color-success-subtle: color-mix(in srgb, var(--color-success) 12%, white);
    --color-warning: #ffb700;
    --color-warning-strong: color-mix(in srgb, var(--color-warning) 55%, black);
    --color-warning-subtle: color-mix(in srgb, var(--color-warning) 18%, white);
    --color-error: #e61744;
    --color-error-strong: color-mix(in srgb, var(--color-error) 70%, black);
    --color-error-subtle: color-mix(in srgb, var(--color-error) 10%, white);
    --color-unavailable: #c5c5c5;
    --color-unavailable-strong: color-mix(in srgb, var(--color-unavailable) 52%, black);
    --color-unavailable-subtle: color-mix(in srgb, var(--color-unavailable) 25%, white);
  }

  [data-color-theme="dark"] {
    color-scheme: dark;
    --color-primary: #0047ba;
    --color-primary-strong: rgb(from var(--color-primary) r calc(g * .6479) calc(b * .5));
    --color-primary-subtle: color-mix(in srgb, var(--color-primary) 36%, var(--color-accent));
    --color-accent: #00162e;
    --color-accent-subtle: rgb(from var(--color-accent) r calc(g * 2.0909) calc(b * 2.0217));
    --color-accent-strong: rgb(from var(--color-accent) calc(r + 102) calc(g + 80) calc(b + 56));
    --color-accent-disabled: color-mix(in srgb, var(--color-accent) 70%, var(--color-text));
    --color-text-accent: #b2cfea;
    --color-text-accent-strong: rgb(from var(--color-text-accent) calc(r + 77) calc(g + 48) calc(b + 21));
    --color-text-accent-subtle: color-mix(in srgb, var(--color-text-accent) 72%, var(--color-accent));
    --color-text: #f2f2f2;
    --color-text-inverse: #fff;
    --color-text-strong: rgb(from var(--color-text) calc(r + 13) calc(g + 13) calc(b + 13));
    --color-text-strong-inverse: rgb(from var(--color-text-inverse) r g b);
    --color-text-subtle: color-mix(in srgb, var(--color-text) 70%, var(--color-accent));
    --color-text-subtle-inverse: color-mix(in srgb, var(--color-text-inverse) 72%, var(--color-primary-strong));
    --color-text-accent-inverse: #fff;
    --color-text-accent-strong-inverse: rgb(from var(--color-text-accent-inverse) r g b);
    --color-text-accent-subtle-inverse: color-mix(in srgb, var(--color-text-accent-inverse) 72%, var(--color-primary-strong));
    --color-border: #666;
    --color-border-inverse: #fff;
    --color-border-subtle: color-mix(in srgb, var(--color-border) 48%, var(--color-accent));
    --color-border-strong: rgb(from var(--color-border) calc(r + 95) calc(g + 95) calc(b + 95));
    --color-border-strong-inverse: rgb(from var(--color-border-inverse) r g b);
    --color-border-subtle-inverse: color-mix(in srgb, var(--color-border-inverse) 48%, transparent);
    --color-focus-ring: color-mix(in srgb, var(--color-text-accent) 36%, transparent);
    --color-info: #1fb3d1;
    --color-info-strong: rgb(from var(--color-info) calc(r + 72) calc(g + 37) calc(b + 26));
    --color-info-subtle: color-mix(in srgb, var(--color-info) 28%, var(--color-accent));
    --color-success: #18cf90;
    --color-success-strong: rgb(from var(--color-success) calc(r + 86) calc(g + 27) calc(b + 44));
    --color-success-subtle: color-mix(in srgb, var(--color-success) 24%, var(--color-accent));
    --color-warning: #ffb700;
    --color-warning-strong: rgb(from var(--color-warning) r calc(g + 27) calc(b + 102));
    --color-warning-subtle: color-mix(in srgb, var(--color-warning) 24%, var(--color-accent));
    --color-error: #f1728e;
    --color-error-strong: rgb(from var(--color-error) calc(r + 14) calc(g + 42) calc(b + 33));
    --color-error-subtle: color-mix(in srgb, var(--color-error) 26%, var(--color-accent));
    --color-unavailable: #c5c5c5;
    --color-unavailable-strong: rgb(from var(--color-unavailable) calc(r + 31) calc(g + 35) calc(b + 40));
    --color-unavailable-subtle: color-mix(in srgb, var(--color-unavailable) 24%, var(--color-accent));
  }

  @property --dialog-backdrop-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --dialog-border-radius {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --dialog-border-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --dialog-max-inline-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --dialog-transition-duration {
    syntax: "<time>";
    inherits: true;
    initial-value: 0s;
  }

  @property --dialog-color-accent-subtle {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --dialog-color-border-subtle {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --dialog-color-text {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --dialog-font-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --dialog-control-gap {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --dialog-space-inline {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --dialog-space-stack {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  :root {
    --dialog-color-accent-subtle: var(--color-accent-subtle);
    --dialog-color-border-subtle: var(--color-border-subtle);
    --dialog-color-text: var(--color-text);
    --dialog-font-size: var(--font-size);
    --dialog-control-gap: var(--layout-control-gap);
    --dialog-space-inline: var(--layout-space-inline);
    --dialog-space-stack: var(--layout-space-stack);
    --dialog-max-inline-size: 32rem;
    --dialog-backdrop-color: color-mix(in srgb, var(--color-accent-strong) 48%, transparent);
    --dialog-transition-duration: .2s;
  }

  dialog {
    --dialog-border-width: var(--layout-surface-border-width);
    --dialog-border-radius: var(--layout-control-radius);
    box-sizing: border-box;
    inline-size: min(var(--dialog-max-inline-size), calc(100vw - (var(--dialog-space-inline) * 2)));
    max-inline-size: 100%;
    max-block-size: calc(100dvh - (var(--dialog-space-stack) * 2));
    border: var(--dialog-border-width) solid var(--dialog-color-border-subtle);
    border-radius: var(--dialog-border-radius);
    background: var(--dialog-color-accent-subtle);
    color: var(--dialog-color-text);
    opacity: 0;
    transition-property: opacity, display, overlay;
    transition-duration: var(--dialog-transition-duration);
    transition-behavior: allow-discrete;
    margin: 0;
    padding: 0;
    position: fixed;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
  }

  dialog:is([open], :popover-open) {
    opacity: 1;

    @starting-style {
      opacity: 0;
    }
  }

  dialog::backdrop {
    background: var(--dialog-backdrop-color);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition-property: opacity, display, overlay;
    transition-duration: var(--dialog-transition-duration);
    transition-behavior: allow-discrete;
  }

  dialog:is([open], :popover-open)::backdrop {
    opacity: 1;

    @starting-style {
      opacity: 0;
    }
  }

  dialog > form {
    box-sizing: border-box;
    gap: var(--dialog-space-stack);
    padding: calc(var(--dialog-space-stack) + var(--dialog-control-gap));
    border: 0;
    margin: 0;
    display: grid;
  }

  dialog > form > header {
    column-gap: var(--dialog-space-inline);
    row-gap: var(--dialog-control-gap);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    display: grid;
  }

  dialog > form > header > :is(h1, h2, h3, h4, h5, h6) {
    font: inherit;
    font-size: calc(var(--dialog-font-size) * 1.5);
    grid-column: 1;
    margin: 0;
    font-weight: 600;
    line-height: 1.2;
  }

  dialog > form > header > p {
    color: var(--dialog-color-text);
    grid-column: 1;
    margin: 0;
  }

  dialog > form > header > button:last-child {
    grid-area: 1 / 2 / span 2;
    justify-self: end;
  }

  dialog > form > footer {
    justify-content: flex-end;
    gap: var(--dialog-space-inline);
    flex-wrap: wrap;
    display: flex;
  }

  @media (prefers-reduced-motion) {
    dialog, dialog::backdrop {
      transition: none;
    }
  }

  @property --dropdown-icon-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --dropdown-icon-offset {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --dropdown-icon-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --dropdown-icon-source {
    syntax: "<image> | none";
    inherits: true;
    initial-value: none;
  }

  @property --dropdown-panel-offset {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --dropdown-color-accent-subtle {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --dropdown-color-border-subtle {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --dropdown-color-focus-ring {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --dropdown-color-primary {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --dropdown-color-primary-subtle {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --dropdown-color-text {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --dropdown-font-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --dropdown-control-border-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --dropdown-control-gap {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --dropdown-control-min-height {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --dropdown-control-padding-block {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --dropdown-control-padding-inline {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --dropdown-control-radius {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --dropdown-focus-ring-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --dropdown-line-height {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  :root {
    --dropdown-color-accent-subtle: var(--color-accent-subtle);
    --dropdown-color-border-subtle: var(--color-border-subtle);
    --dropdown-color-focus-ring: var(--color-focus-ring);
    --dropdown-color-primary: var(--color-primary);
    --dropdown-color-primary-subtle: var(--color-primary-subtle);
    --dropdown-color-text: var(--color-text);
    --dropdown-font-size: var(--font-size);
    --dropdown-control-border-width: var(--layout-control-border-width);
    --dropdown-control-gap: var(--layout-control-gap);
    --dropdown-control-min-height: var(--layout-control-min-height);
    --dropdown-control-padding-block: var(--layout-control-padding-block);
    --dropdown-control-padding-inline: var(--layout-control-padding-inline);
    --dropdown-control-radius: var(--layout-control-radius);
    --dropdown-focus-ring-size: var(--layout-focus-ring-size);
    --dropdown-line-height: var(--font-line-height-body);
    --dropdown-icon-color: var(--color-text-accent);
    --dropdown-icon-offset: var(--layout-space-inline);
    --dropdown-icon-size: var(--layout-control-icon-size);
    --dropdown-icon-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --dropdown-panel-offset: var(--layout-control-gap);
  }

  details.dropdown {
    position: relative;
    overflow: visible;
  }

  details.dropdown > summary {
    box-sizing: border-box;
    min-height: var(--dropdown-control-min-height);
    padding: var(--dropdown-control-padding-block)
    calc(var(--dropdown-icon-offset) + var(--dropdown-icon-size) + (var(--dropdown-control-gap) * 2))
    var(--dropdown-control-padding-block) var(--dropdown-control-padding-inline);
    border: var(--dropdown-control-border-width) solid var(--dropdown-color-border-subtle);
    border-radius: var(--dropdown-control-radius);
    color: var(--dropdown-color-text);
    cursor: pointer;
    font: inherit;
    font-size: var(--dropdown-font-size);
    font-weight: inherit;
    line-height: var(--dropdown-line-height);
    align-items: center;
    list-style: none;
    display: flex;
    position: relative;
  }

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

  details.dropdown > summary:after {
    content: "";
    right: var(--dropdown-icon-offset);
    width: var(--dropdown-icon-size);
    height: var(--dropdown-icon-size);
    background-color: var(--dropdown-icon-color);
    -webkit-mask-image: var(--dropdown-icon-source);
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-image: var(--dropdown-icon-source);
    pointer-events: none;
    transition: rotate .16s;
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    rotate: 0deg;
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
  }

  details.dropdown[open] > summary:after {
    rotate: 180deg;
  }

  details.dropdown > summary:hover, details.dropdown[open] > summary {
    color: var(--dropdown-color-text);
  }

  details.dropdown > summary:focus-visible {
    border-color: var(--dropdown-color-primary);
    box-shadow: 0 0 0 var(--dropdown-focus-ring-size) var(--dropdown-color-focus-ring);
    outline: none;
  }

  details.dropdown > ul {
    z-index: 20;
    margin: var(--dropdown-panel-offset) 0 0;
    border: var(--dropdown-control-border-width) solid var(--dropdown-color-border-subtle);
    border-radius: var(--dropdown-control-radius);
    background-color: var(--dropdown-color-accent-subtle);
    padding: 0;
    list-style: none;
    position: absolute;
    inset-inline: 0;
    overflow: hidden;
  }

  details.dropdown > ul:last-child {
    padding-bottom: 0;
  }

  details.dropdown > ul > li {
    padding: 0;
  }

  details.dropdown > ul > li > :is(a, label) {
    padding: var(--dropdown-control-padding-block) var(--dropdown-control-padding-inline);
    color: var(--dropdown-color-text);
  }

  details.dropdown > ul > li > a {
    text-decoration: none;
    display: block;
  }

  details.dropdown > ul > li > a:hover, details.dropdown > ul > li > a:focus-visible, .dropdown > ul label:hover, .dropdown > ul label:has(input:focus-visible) {
    background-color: var(--dropdown-color-primary-subtle);
    outline: none;
  }

  .dropdown > ul label {
    align-items: start;
    gap: var(--dropdown-control-gap);
    cursor: pointer;
    display: flex;
  }

  .dropdown > ul label:has(input:disabled) {
    cursor: not-allowed;
    opacity: .5;
  }

  .dropdown > ul label:has(input:disabled):hover {
    background-color: #0000;
  }

  .dropdown > ul label > input {
    inline-size: var(--dropdown-font-size);
    block-size: var(--dropdown-font-size);
    margin: calc(((var(--dropdown-font-size) * var(--dropdown-line-height)) - var(--dropdown-font-size)) / 2) 0 0;
    accent-color: var(--dropdown-color-primary);
    cursor: inherit;
    flex: none;
  }

  .dropdown > ul label > input:focus-visible {
    outline: var(--dropdown-control-border-width) solid var(--dropdown-color-primary-subtle);
    outline-offset: var(--dropdown-focus-ring-size);
  }

  @property --file-border-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --file-message-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --file-color-border-subtle {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --file-color-error-strong {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --file-color-focus-ring {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --file-color-primary {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --file-color-text {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --file-color-text-accent {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --file-color-text-subtle {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --file-font-family-sans {
    syntax: "*";
    inherits: true
  }

  @property --file-font-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --file-font-size-caption {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --file-action-padding-inline {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --file-control-border-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --file-control-gap {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --file-control-min-height {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --file-control-padding-block {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --file-control-padding-inline {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --file-control-radius {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --file-focus-ring-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --file-space-inline {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --file-line-height {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  :root {
    --file-color-border-subtle: var(--color-border-subtle);
    --file-color-error-strong: var(--color-error-strong);
    --file-color-focus-ring: var(--color-focus-ring);
    --file-color-primary: var(--color-primary);
    --file-color-text: var(--color-text);
    --file-color-text-accent: var(--color-text-accent);
    --file-color-text-subtle: var(--color-text-subtle);
    --file-font-family-sans: var(--font-family-sans);
    --file-font-size: var(--font-size);
    --file-font-size-caption: var(--font-size-caption);
    --file-action-padding-inline: var(--layout-action-padding-inline);
    --file-control-border-width: var(--layout-control-border-width);
    --file-control-gap: var(--layout-control-gap);
    --file-control-min-height: var(--layout-control-min-height);
    --file-control-padding-block: var(--layout-control-padding-block);
    --file-control-padding-inline: var(--layout-control-padding-inline);
    --file-control-radius: var(--layout-control-radius);
    --file-focus-ring-size: var(--layout-focus-ring-size);
    --file-space-inline: var(--layout-space-inline);
    --file-line-height: var(--font-line-height-body);
  }

  label:has( > input[type="file"]) {
    --file-border-color: var(--file-color-border-subtle);
    --file-message-color: var(--file-color-text-subtle);
    gap: var(--file-control-gap);
    color: var(--file-color-text-accent);
    font: inherit;
    font-size: var(--file-font-size);
    line-height: var(--file-line-height);
    flex-direction: column;
    display: flex;
  }

  label:has( > input[type="file"]) > [data-role="label"]:after {
    content: "";
  }

  label:has( > input[type="file"][required]) > [data-role="label"]:after {
    content: " *";
    color: var(--file-color-error-strong);
  }

  label > input[type="file"] {
    box-sizing: border-box;
    inline-size: 100%;
    min-height: var(--file-control-min-height);
    padding: var(--file-control-padding-block) var(--file-control-padding-inline);
    border: var(--file-control-border-width) solid var(--file-border-color);
    border-radius: var(--file-control-radius);
    color: var(--file-color-text);
    font: inherit;
    font-size: var(--file-font-size);
    line-height: var(--file-line-height);
    cursor: pointer;
    background-color: #0000;
    transition: border-color .16s, color .16s, box-shadow .16s;
    display: flex;
  }

  label > input[type="file"]::file-selector-button {
    box-sizing: border-box;
    margin: calc(-1 * var(--file-control-padding-block)) var(--file-space-inline)
    calc(-1 * var(--file-control-padding-block)) calc(-1 * var(--file-control-padding-inline));
    padding: calc(var(--file-control-padding-block) - var(--file-control-border-width)) var(--file-action-padding-inline);
    border: var(--file-control-border-width) solid var(--file-color-primary);
    border-radius: 0;
    color: var(--file-color-text-accent);
    font-family: var(--file-font-family-sans);
    font-size: var(--file-font-size);
    font-weight: 500;
    line-height: var(--file-line-height);
    white-space: nowrap;
    cursor: pointer;
    background-color: #0000;
    border-start-start-radius: max(0px, calc(var(--file-control-radius) - var(--file-control-border-width)));
    border-end-start-radius: max(0px, calc(var(--file-control-radius) - var(--file-control-border-width)));
    transition: border-color .16s, color .16s;
  }

  label:has( > input[type="file"]:user-invalid) {
    --file-border-color: var(--file-color-error-strong);
    --file-message-color: var(--file-color-error-strong);
  }

  label > input[type="file"]:user-invalid::file-selector-button {
    border-color: var(--file-color-error-strong);
    color: var(--file-color-error-strong);
  }

  label:has( > input[type="file"]:user-invalid) > [data-role="message"][data-invalid] {
    display: block;
  }

  label > input[type="file"]:disabled {
    box-shadow: none;
    color: var(--file-color-text-subtle);
    cursor: not-allowed;
  }

  label > input[type="file"]:disabled::file-selector-button {
    border-color: var(--file-color-border-subtle);
    color: var(--file-color-text-subtle);
    cursor: not-allowed;
  }

  label > input[type="file"]:focus {
    border-color: var(--file-color-primary);
    box-shadow: 0 0 0 var(--file-focus-ring-size) var(--file-color-focus-ring);
    outline: none;
  }

  label > input[type="file"]::-webkit-file-upload-button {
    box-sizing: border-box;
    margin: calc(-1 * var(--file-control-padding-block)) var(--file-space-inline)
    calc(-1 * var(--file-control-padding-block)) calc(-1 * var(--file-control-padding-inline));
    padding: calc(var(--file-control-padding-block) - var(--file-control-border-width)) var(--file-action-padding-inline);
    border: var(--file-control-border-width) solid var(--file-color-primary);
    border-radius: 0;
    color: var(--file-color-text-accent);
    font-family: var(--file-font-family-sans);
    font-size: var(--file-font-size);
    font-weight: 500;
    line-height: var(--file-line-height);
    white-space: nowrap;
    cursor: pointer;
    background-color: #0000;
    border-start-start-radius: max(0px, calc(var(--file-control-radius) - var(--file-control-border-width)));
    border-end-start-radius: max(0px, calc(var(--file-control-radius) - var(--file-control-border-width)));
    transition: border-color .16s, color .16s;
  }

  @media (prefers-reduced-motion: reduce) {
    label > input[type="file"], label > input[type="file"]::file-selector-button, label > input[type="file"]::-webkit-file-upload-button {
      transition: none;
    }

    label > input[type="file"], label > input[type="file"]::file-selector-button, label > input[type="file"]::file-selector-button {
      transition: none;
    }
  }

  @property --footer-background {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --footer-border-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --footer-brand-link-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --footer-legal-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --footer-link-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --footer-link-hover-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --footer-site-background {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --footer-site-link-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --footer-site-text-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --footer-text-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --footer-color-border-subtle {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --footer-color-primary-strong {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --footer-color-text {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --footer-color-text-accent {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --footer-color-text-accent-inverse {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --footer-font-weight-body-bold {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --footer-font-weight-body-regular {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --footer-control-border-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --footer-landmark-padding-block {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --footer-page-min-inline-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --footer-space-inline {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  :root {
    --footer-color-border-subtle: var(--color-border-subtle);
    --footer-color-primary-strong: var(--color-primary-strong);
    --footer-color-text: var(--color-text);
    --footer-color-text-accent: var(--color-text-accent);
    --footer-color-text-accent-inverse: var(--color-text-accent-inverse);
    --footer-font-weight-body-bold: var(--font-weight-body-bold);
    --footer-font-weight-body-regular: var(--font-weight-body-regular);
    --footer-control-border-width: var(--layout-control-border-width);
    --footer-landmark-padding-block: var(--layout-landmark-padding-block);
    --footer-page-min-inline-size: var(--layout-page-min-inline-size);
    --footer-space-inline: var(--layout-space-inline);
    --footer-background: var(--footer-color-primary-strong);
    --footer-site-background: var(--color-accent-subtle);
    --footer-site-text-color: var(--footer-color-text);
    --footer-site-link-color: var(--footer-color-text-accent);
    --footer-text-color: var(--color-text-inverse);
    --footer-link-color: var(--color-text-inverse);
    --footer-link-hover-color: var(--footer-color-text-accent-inverse);
    --footer-border-color: var(--color-border-inverse);
    --footer-legal-size: var(--font-size-caption);
    --footer-brand-link-size: calc(var(--font-size) * 1.25);
  }

  :is(body > footer:last-of-type, footer.footer):not(:has( > section + section)), :is(body > footer:last-of-type, footer.footer):has( > section + section) > section:last-child {
    box-sizing: border-box;
    padding-block: calc(var(--footer-landmark-padding-block) / 2);
    padding-inline: var(--footer-space-inline);
    border-top: var(--footer-control-border-width) solid var(--footer-border-color);
    background: var(--footer-background);
    color: var(--footer-text-color);
    place-items: center;
    gap: .25rem;
    display: grid;
  }

  body > footer:last-of-type {
    inline-size: 100%;
    min-inline-size: var(--footer-page-min-inline-size);
  }

  :is(body > footer:last-of-type, footer.footer) > * {
    min-inline-size: 0;
    margin: 0;
  }

  :is(body > footer:last-of-type, footer.footer):not(:has( > section + section)) > a:first-child, :is(body > footer:last-of-type, footer.footer):has( > section + section) > section:last-child > a:first-child {
    text-align: center;
    box-sizing: border-box;
    color: inherit;
    font-size: var(--footer-brand-link-size);
    font-weight: var(--footer-font-weight-body-bold);
    letter-spacing: .24em;
    text-transform: uppercase;
    justify-content: center;
    line-height: 1.2;
    text-decoration: none;
    display: inline-flex;
  }

  :is(body > footer:last-of-type, footer.footer):not(:has( > section + section)) > :not(a:first-child), :is(body > footer:last-of-type, footer.footer):has( > section + section) > section:last-child > :not(a:first-child) {
    text-align: center;
    inline-size: 100%;
  }

  :is(body > footer:last-of-type, footer.footer):not(:has( > section + section)) > p, :is(body > footer:last-of-type, footer.footer):has( > section + section) > section:last-child > p {
    color: inherit;
    font-size: var(--footer-legal-size);
    font-weight: var(--footer-font-weight-body-regular);
    text-transform: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    line-height: 1.3;
    display: flex;
  }

  :is(body > footer:last-of-type, footer.footer):not(:has( > section + section)) > p > span, :is(body > footer:last-of-type, footer.footer):has( > section + section) > section:last-child > p > span {
    white-space: nowrap;
  }

  :is(body > footer:last-of-type, footer.footer):not(:has( > section + section)) > p > span:first-child:after, :is(body > footer:last-of-type, footer.footer):has( > section + section) > section:last-child > p > span:first-child:after {
    content: " |";
    margin-inline-end: .25rem;
  }

  :is(body > footer:last-of-type, footer.footer):not(:has( > section + section)) > nav, :is(body > footer:last-of-type, footer.footer):has( > section + section) > section:last-child > nav {
    font-size: var(--footer-legal-size);
  }

  :is(body > footer:last-of-type, footer.footer):not(:has( > section + section)) > nav > ul, :is(body > footer:last-of-type, footer.footer):has( > section + section) > section:last-child > nav > ul {
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem 0;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  :is(body > footer:last-of-type, footer.footer):not(:has( > section + section)) > nav li, :is(body > footer:last-of-type, footer.footer):has( > section + section) > section:last-child > nav li {
    align-items: center;
    margin: 0;
    display: inline-flex;
  }

  :is(body > footer:last-of-type, footer.footer):not(:has( > section + section)) > nav li + li:before, :is(body > footer:last-of-type, footer.footer):has( > section + section) > section:last-child > nav li + li:before {
    content: "|";
    color: var(--footer-color-text-accent-inverse);
    margin-inline: .5rem;
  }

  :is(body > footer:last-of-type, footer.footer):not(:has( > section + section)) :is(a, a:link, a:visited), :is(body > footer:last-of-type, footer.footer):has( > section + section) > section:last-child :is(a, a:link, a:visited) {
    color: var(--footer-link-color);
    text-decoration: none;
  }

  :is(body > footer:last-of-type, footer.footer):not(:has( > section + section)) a:hover, :is(body > footer:last-of-type, footer.footer):has( > section + section) > section:last-child a:hover {
    color: var(--footer-link-hover-color);
  }

  :is(body > footer:last-of-type, footer.footer):has( > section + section) {
    color: inherit;
    background: none;
    border: 0;
    padding-block: 0;
    padding-inline: 0;
    container-type: inline-size;
  }

  :is(body > footer:last-of-type, footer.footer):has( > section + section) > section {
    box-sizing: border-box;
    min-inline-size: 0;
  }

  :is(body > footer:last-of-type, footer.footer):has( > section + section) > section:first-child {
    padding-block: var(--footer-landmark-padding-block);
    padding-inline: max(var(--footer-space-inline), calc((100vw - 60rem) / 2));
    border-top: var(--footer-control-border-width) solid var(--footer-color-border-subtle);
    background: var(--footer-site-background);
    color: var(--footer-site-text-color);
  }

  @supports (inline-size: 100cqi) {
    :is(body > footer:last-of-type, footer.footer):has( > section + section) > section:first-child {
      padding-inline: max(var(--footer-space-inline), calc((100cqi - 60rem) / 2));
    }
  }

  :is(body > footer:last-of-type, footer.footer):has( > section + section) > section:first-child > section {
    align-content: start;
    gap: .5rem;
    display: grid;
  }

  :is(body > footer:last-of-type, footer.footer):has( > section + section) > section:first-child :is(h2, h3, h4, h5, h6, p, address, ul, ol) {
    margin: 0;
  }

  :is(body > footer:last-of-type, footer.footer):has( > section + section) > section:first-child address {
    gap: .25rem;
    font-style: normal;
    display: grid;
  }

  :is(body > footer:last-of-type, footer.footer):has( > section + section) > section:first-child :is(ul, ol) {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  :is(body > footer:last-of-type, footer.footer):has( > section + section) > section:first-child nav > ul:not(.cluster) {
    gap: .5rem;
    display: grid;
  }

  :is(body > footer:last-of-type, footer.footer):has( > section + section) > section:first-child nav li {
    margin: 0;
  }

  :is(body > footer:last-of-type, footer.footer):has( > section + section) > section:first-child :is(a, a:link, a:visited) {
    color: var(--footer-site-link-color);
  }

  :is(body > footer:last-of-type, footer.footer):has( > section + section) > section:first-child a:hover {
    color: var(--footer-color-primary-strong);
  }

  @property --header-background {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --header-caption-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --header-mark-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --header-menu-popover-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --header-rule-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --header-rule-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --header-text-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --header-title-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --header-title-weight {
    syntax: "<number>";
    inherits: true;
    initial-value: 400;
  }

  @property --header-color-accent {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --header-color-border-subtle {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --header-color-focus-ring {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --header-color-text {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --header-color-text-accent-inverse {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --header-font-family-sans {
    syntax: "*";
    inherits: true
  }

  @property --header-font-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --header-font-weight-body-bold {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --header-font-weight-heading-2 {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --header-control-border-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --header-control-gap {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --header-control-min-height {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --header-control-padding-block {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --header-control-padding-inline {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --header-control-radius {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --header-focus-ring-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --header-landmark-padding-block {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --header-safe-area-top {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --header-space-inline {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --header-line-height {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  :root {
    --header-color-accent: var(--color-accent);
    --header-color-border-subtle: var(--color-border-subtle);
    --header-color-focus-ring: var(--color-focus-ring);
    --header-color-text: var(--color-text);
    --header-color-text-accent-inverse: var(--color-text-accent-inverse);
    --header-font-family-sans: var(--font-family-sans);
    --header-font-size: var(--font-size);
    --header-font-weight-body-bold: var(--font-weight-body-bold);
    --header-font-weight-heading-2: var(--font-weight-heading-2);
    --header-control-border-width: var(--layout-control-border-width);
    --header-control-gap: var(--layout-control-gap);
    --header-control-min-height: var(--layout-control-min-height);
    --header-control-padding-block: var(--layout-control-padding-block);
    --header-control-padding-inline: var(--layout-control-padding-inline);
    --header-control-radius: var(--layout-control-radius);
    --header-focus-ring-size: var(--layout-focus-ring-size);
    --header-landmark-padding-block: var(--layout-space-stack);
    --header-safe-area-top: var(--layout-safe-area-top);
    --header-space-inline: var(--layout-space-inline);
    --header-line-height: var(--font-line-height-body);
    --header-background: var(--color-primary-strong);
    --header-text-color: var(--color-text-inverse);
    --header-rule-color: var(--color-border-inverse);
    --header-rule-width: calc(var(--header-control-border-width) / 4);
    --header-mark-size: clamp(5rem, 4rem + 6vw, 7rem);
    --header-caption-size: calc(var(--font-size-caption) * 1.57143);
    --header-title-size: var(--font-size-title);
    --header-title-weight: 300;
    --header-menu-popover-width: min(20rem, calc(100vw - (var(--header-space-inline) * 2)));
  }

  :is(body > header:first-of-type, header.header) {
    grid-template-columns: var(--header-mark-size) minmax(0, 1fr);
    padding-block: calc(var(--header-landmark-padding-block) / 2);
    border-bottom: var(--header-rule-width) solid var(--header-rule-color);
    background: var(--header-background);
    color: var(--header-text-color);
    grid-template-areas: "mark breadcrumb"
                         "mark title"
                         "mark subtitle";
    align-items: center;
    gap: .75rem clamp(.75rem, .5rem + 1vw, 1.5rem);
    margin: 0;
    padding-inline: 0;
    display: grid;
  }

  :is(body > header:first-of-type, header.header):not(:has( > nav[aria-label="breadcrumb"])) {
    grid-template-areas: "mark title"
                         "mark subtitle";
  }

  :is(body > header:first-of-type, header.header):not(:has( > p)) {
    grid-template-areas: "mark breadcrumb"
                         "mark title";
  }

  :is(body > header:first-of-type, header.header):not(:has( > nav[aria-label="breadcrumb"])):not(:has( > p)) {
    grid-template-areas: "mark title";
  }

  :is(body > header:first-of-type, header.header):has( > button[popovertarget]) {
    grid-template-columns: var(--header-mark-size) minmax(0, 1fr) auto;
    grid-template-areas: "mark breadcrumb menu"
                         "mark title menu"
                         "mark subtitle menu";
  }

  :is(body > header:first-of-type, header.header):has( > button[popovertarget]):not(:has( > nav[aria-label="breadcrumb"])) {
    grid-template-areas: "mark title menu"
                         "mark subtitle menu";
  }

  :is(body > header:first-of-type, header.header):has( > button[popovertarget]):not(:has( > p)) {
    grid-template-areas: "mark breadcrumb menu"
                         "mark title menu";
  }

  :is(body > header:first-of-type, header.header):has( > button[popovertarget]):not(:has( > nav[aria-label="breadcrumb"])):not(:has( > p)) {
    grid-template-areas: "mark title menu";
  }

  :is(body > header:first-of-type, header.header):has( > [data-header-actions]) {
    grid-template-columns: var(--header-mark-size) minmax(0, 1fr) auto;
    grid-template-areas: "mark breadcrumb actions"
                         "mark title actions"
                         "mark subtitle actions";
  }

  :is(body > header:first-of-type, header.header):has( > [data-header-actions]):not(:has( > nav[aria-label="breadcrumb"])) {
    grid-template-areas: "mark title actions"
                         "mark subtitle actions";
  }

  :is(body > header:first-of-type, header.header):has( > [data-header-actions]):not(:has( > p)) {
    grid-template-areas: "mark breadcrumb actions"
                         "mark title actions";
  }

  :is(body > header:first-of-type, header.header):has( > [data-header-actions]):not(:has( > nav[aria-label="breadcrumb"])):not(:has( > p)) {
    grid-template-areas: "mark title actions";
  }

  :is(body > header:first-of-type, header.header):has( > [data-header-actions]):has( > button[popovertarget]) {
    grid-template-columns: var(--header-mark-size) minmax(0, 1fr) auto auto;
    grid-template-areas: "mark breadcrumb actions menu"
                         "mark title actions menu"
                         "mark subtitle actions menu";
  }

  :is(body > header:first-of-type, header.header):has( > [data-header-actions]):has( > button[popovertarget]):not(:has( > nav[aria-label="breadcrumb"])) {
    grid-template-areas: "mark title actions menu"
                         "mark subtitle actions menu";
  }

  :is(body > header:first-of-type, header.header):has( > [data-header-actions]):has( > button[popovertarget]):not(:has( > p)) {
    grid-template-areas: "mark breadcrumb actions menu"
                         "mark title actions menu";
  }

  :is(body > header:first-of-type, header.header):has( > [data-header-actions]):has( > button[popovertarget]):not(:has( > nav[aria-label="breadcrumb"])):not(:has( > p)) {
    grid-template-areas: "mark title actions menu";
  }

  :is(body > header:first-of-type, header.header) > * {
    min-inline-size: 0;
  }

  :is(body > header:first-of-type, header.header) :is(a, a:link, a:visited) {
    color: inherit;
  }

  :is(body > header:first-of-type, header.header) > a:first-child {
    inline-size: var(--header-mark-size);
    box-sizing: border-box;
    box-shadow: inset calc(var(--header-rule-width) * -1) 0 0 var(--header-rule-color);
    color: inherit;
    font-size: clamp(1.5rem, 1.1rem + 1.25vw, 2rem);
    font-weight: var(--header-font-weight-heading-2);
    letter-spacing: .08em;
    text-transform: uppercase;
    grid-area: mark;
    align-self: stretch;
    place-items: center;
    padding: 1.5rem;
    line-height: 1;
    text-decoration: none;
    display: grid;
  }

  :is(body > header:first-of-type, header.header) > a:first-child > :is(img, svg) {
    max-block-size: 100%;
    max-inline-size: 100%;
  }

  :is(body > header:first-of-type, header.header) > p {
    color: var(--header-text-color);
    font-size: var(--header-caption-size);
    font-weight: var(--header-font-weight-body-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
    grid-area: subtitle;
    margin: 0;
    line-height: 1.2;
  }

  :is(body > header:first-of-type, header.header) > :is(h1, h2, h3, h4, h5, h6) {
    color: inherit;
    font-size: var(--header-title-size);
    font-weight: var(--header-title-weight);
    text-align: start;
    text-transform: none;
    text-wrap: balance;
    grid-area: title;
    margin: 0;
    line-height: 1.1;
  }

  :is(body > header:first-of-type, header.header) > nav[aria-label="breadcrumb"] {
    --breadcrumb-link-color: var(--header-color-text-accent-inverse);
    --breadcrumb-link-hover-color: var(--color-text-inverse);
    --breadcrumb-current-color: var(--color-text-inverse);
    --breadcrumb-separator-color: var(--header-color-text-accent-inverse);
    grid-area: breadcrumb;
    overflow: auto hidden;
  }

  :is(body > header:first-of-type, header.header) > nav[aria-label="breadcrumb"] > ol {
    flex-wrap: nowrap;
    inline-size: max-content;
    min-inline-size: 100%;
  }

  :is(body > header:first-of-type, header.header) > nav[aria-label="breadcrumb"] > ol > li + li:before {
    margin-inline: var(--header-control-gap);
  }

  :is(body > header:first-of-type, header.header) > nav[aria-label="breadcrumb"] > ol > li > :is(a, span[aria-current]) {
    min-height: 0;
    padding-block: 0;
  }

  :is(body > header:first-of-type, header.header) > [data-header-actions] {
    justify-content: flex-end;
    align-items: center;
    gap: var(--header-control-gap);
    flex-wrap: wrap;
    grid-area: actions;
    place-self: center end;
    margin-inline-end: var(--header-space-inline);
    display: flex;
  }

  :is(body > header:first-of-type, header.header) > [data-header-actions] > a {
    box-sizing: border-box;
    align-items: center;
    gap: var(--header-control-gap);
    min-height: var(--header-control-min-height);
    padding-block: var(--header-control-gap);
    color: var(--header-color-text-accent-inverse);
    font-family: var(--header-font-family-sans);
    font-size: var(--header-font-size);
    white-space: nowrap;
    font-weight: 500;
    line-height: normal;
    text-decoration: none;
    transition: color .16s, box-shadow .16s;
    display: inline-flex;
  }

  :is(body > header:first-of-type, header.header) > [data-header-actions] > a:hover {
    color: var(--header-text-color);
    text-decoration: underline;
  }

  :is(body > header:first-of-type, header.header) > [data-header-actions] > a:focus-visible {
    color: var(--header-text-color);
    box-shadow: 0 0 0 var(--header-focus-ring-size) var(--header-color-focus-ring);
    outline: none;
  }

  :is(body > header:first-of-type, header.header) > [data-header-actions] > a:active {
    color: var(--header-text-color);
  }

  :is(body > header:first-of-type, header.header) > [data-header-actions] > .icon {
    --icon-size: var(--layout-control-icon-size);
    color: var(--header-color-text-accent-inverse);
    flex: none;
  }

  :is(body > header:first-of-type, header.header) > [data-header-actions] > button {
    --button-border-color: color-mix(in srgb, var(--header-text-color) 56%, transparent);
    --button-background: transparent;
    --button-color-text: var(--header-text-color);
    --button-hover-border-color: var(--header-text-color);
    --button-hover-background: color-mix(in srgb, var(--header-text-color) 10%, transparent);
    --button-hover-color: var(--header-text-color);
    --button-active-border-color: var(--header-text-color);
    --button-active-background: var(--header-text-color);
    --button-active-color: var(--header-background);
  }

  :is(body > header:first-of-type, header.header) > button[popovertarget] {
    --button-border-color: color-mix(in srgb, var(--header-text-color) 40%, transparent);
    --button-background: transparent;
    --button-color-text: var(--header-text-color);
    --button-active-border-color: var(--header-rule-color);
    --button-active-background: color-mix(in srgb, var(--header-text-color) 14%, transparent);
    --button-active-color: var(--header-text-color);
    grid-area: menu;
    place-self: center end;
    margin-inline-end: var(--header-space-inline);
  }

  :is(body > header:first-of-type, header.header) > nav[popover] {
    inset-block-start: calc(var(--header-safe-area-top) + var(--header-mark-size) + .5rem);
    inset-inline: auto var(--header-space-inline);
    inline-size: var(--header-menu-popover-width);
    max-block-size: calc(100dvh - var(--header-safe-area-top) - var(--header-mark-size) - 1rem);
    border: var(--header-control-border-width) solid var(--header-color-border-subtle);
    border-radius: var(--header-control-radius);
    background: var(--header-color-accent);
    color: var(--header-color-text);
    font-family: var(--header-font-family-sans);
    font-size: var(--header-font-size);
    line-height: var(--header-line-height);
    margin: 0;
    padding: .5rem;
    position: fixed;
    overflow: hidden auto;
  }

  :is(body > header:first-of-type, header.header) > nav[popover]::backdrop {
    background: none;
  }

  :is(body > header:first-of-type, header.header) > nav[popover] > ul {
    border: 0;
    gap: .25rem;
    inline-size: 100%;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
  }

  :is(body > header:first-of-type, header.header) > nav[popover] > ul > li {
    margin: 0;
  }

  :is(body > header:first-of-type, header.header) > nav[popover] > ul > li > :is(a, span[aria-current]) {
    box-sizing: border-box;
    inline-size: 100%;
    min-height: var(--header-control-min-height);
    padding: var(--header-control-padding-block) var(--header-control-padding-inline);
    border-radius: calc(var(--header-control-radius) / 1.5);
    color: inherit;
    font: inherit;
    line-height: inherit;
    white-space: normal;
    border: 0;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    text-decoration: none;
    display: inline-flex;
  }

  :is(body > header:first-of-type, header.header) > nav[popover] a:focus-visible {
    box-shadow: 0 0 0 var(--header-focus-ring-size) var(--header-color-focus-ring);
    outline: none;
  }

  @media (width <= 47.999rem) {
    body > nav:not([popover]) {
      display: none;
    }
  }

  @media (width >= 48rem) {
    :root {
      --header-mark-size: clamp(7.75rem, 5rem + 4vw, 10rem);
    }

    :is(body > header:first-of-type, header.header) {
      row-gap: .5rem;
    }

    :is(body > header:first-of-type, header.header):has( > button[popovertarget]) {
      grid-template-columns: var(--header-mark-size) minmax(0, 1fr);
      grid-template-areas: "mark breadcrumb"
                           "mark title"
                           "mark subtitle";
    }

    :is(body > header:first-of-type, header.header):has( > button[popovertarget]):not(:has( > nav[aria-label="breadcrumb"])) {
      grid-template-areas: "mark title"
                           "mark subtitle";
    }

    :is(body > header:first-of-type, header.header):has( > button[popovertarget]):not(:has( > p)) {
      grid-template-areas: "mark breadcrumb"
                           "mark title";
    }

    :is(body > header:first-of-type, header.header):has( > button[popovertarget]):not(:has( > nav[aria-label="breadcrumb"])):not(:has( > p)) {
      grid-template-areas: "mark title";
    }

    :is(body > header:first-of-type, header.header):has( > [data-header-actions]) {
      grid-template-columns: var(--header-mark-size) minmax(0, 1fr) auto;
      grid-template-areas: "mark breadcrumb actions"
                           "mark title actions"
                           "mark subtitle actions";
    }

    :is(body > header:first-of-type, header.header):has( > [data-header-actions]):not(:has( > nav[aria-label="breadcrumb"])) {
      grid-template-areas: "mark title actions"
                           "mark subtitle actions";
    }

    :is(body > header:first-of-type, header.header):has( > [data-header-actions]):not(:has( > p)) {
      grid-template-areas: "mark breadcrumb actions"
                           "mark title actions";
    }

    :is(body > header:first-of-type, header.header):has( > [data-header-actions]):not(:has( > nav[aria-label="breadcrumb"])):not(:has( > p)) {
      grid-template-areas: "mark title actions";
    }

    :is(body > header:first-of-type, header.header) > button[popovertarget], :is(body > header:first-of-type, header.header) > nav[popover]:popover-open {
      display: none;
    }
  }

  @property --icon-fill {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --icon-font-family {
    syntax: "*";
    inherits: true
  }

  @property --icon-grad {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --icon-opsz {
    syntax: "<number>";
    inherits: true;
    initial-value: 24;
  }

  @property --icon-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --icon-wght {
    syntax: "<number>";
    inherits: true;
    initial-value: 400;
  }

  :root {
    --icon-font-family: "Material Symbols Rounded", sans-serif;
    --icon-size: calc(var(--font-size) * 1.5);
    --icon-fill: 0;
    --icon-wght: 400;
    --icon-grad: 0;
    --icon-opsz: 32;
  }

  :not(button, a.button).icon {
    color: inherit;
    font-family: var(--icon-font-family);
    font-style: normal;
    font-weight: normal;
    font-size: var(--icon-size);
    white-space: nowrap;
    vertical-align: middle;
    letter-spacing: normal;
    text-transform: none;
    font-feature-settings: "liga";
    font-variation-settings: "FILL" var(--icon-fill),
    "wght" var(--icon-wght),
    "GRAD" var(--icon-grad),
    "opsz" var(--icon-opsz);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizelegibility;
    direction: ltr;
    line-height: 1;
    display: inline-block;
  }

  .icon.fill {
    --icon-fill: 1;
  }

  @property --input-background {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --input-border-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --input-border-radius {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --input-message-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --input-color-accent-disabled {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --input-color-border-subtle {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --input-color-error-strong {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --input-color-focus-ring {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --input-color-primary {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --input-color-text {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --input-color-text-accent {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --input-color-text-subtle {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --input-font-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --input-font-size-caption {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --input-control-border-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --input-control-gap {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --input-control-min-height {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --input-control-padding-block {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --input-control-padding-inline {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --input-control-radius {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --input-focus-ring-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --input-line-height {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  :root {
    --input-color-accent-disabled: var(--color-accent-disabled);
    --input-color-border-subtle: var(--color-border-subtle);
    --input-color-error-strong: var(--color-error-strong);
    --input-color-focus-ring: var(--color-focus-ring);
    --input-color-primary: var(--color-primary);
    --input-color-text: var(--color-text);
    --input-color-text-accent: var(--color-text-accent);
    --input-color-text-subtle: var(--color-text-subtle);
    --input-font-size: var(--font-size);
    --input-font-size-caption: var(--font-size-caption);
    --input-control-border-width: var(--layout-control-border-width);
    --input-control-gap: var(--layout-control-gap);
    --input-control-min-height: var(--layout-control-min-height);
    --input-control-padding-block: var(--layout-control-padding-block);
    --input-control-padding-inline: var(--layout-control-padding-inline);
    --input-control-radius: var(--layout-control-radius);
    --input-focus-ring-size: var(--layout-focus-ring-size);
    --input-line-height: var(--font-line-height-body);
  }

  label:has( > input:is([type="color"], [type="date"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="url"], [type="number"], :not([type]))) {
    --input-border-radius: var(--input-control-radius);
    --input-border-color: var(--input-color-border-subtle);
    --input-background: transparent;
    --input-message-color: var(--input-color-text-subtle);
    gap: var(--input-control-gap);
    color: var(--input-color-text-accent);
    font: inherit;
    font-size: var(--input-font-size);
    line-height: var(--input-line-height);
    flex-direction: column;
    display: flex;
  }

  label > [data-role="label"]:after {
    content: "";
  }

  :is(form[role="search"], fieldset[role="group"], div[role="group"]) > input {
    --input-border-radius: var(--input-control-radius);
    --input-border-color: var(--input-color-border-subtle);
  }

  label:has( > input:is([type="color"], [type="date"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="url"], [type="number"], :not([type]))[required]) > [data-role="label"]:after {
    content: " *";
    color: var(--input-color-error-strong);
  }

  label > input:is([type="color"], [type="date"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="url"], [type="number"], :not([type])), :is(form[role="search"], fieldset[role="group"], div[role="group"]) > input:is([type="color"], [type="date"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="url"], [type="number"], :not([type])) {
    --grouped-control-radius: var(--input-border-radius, var(--input-control-radius));
    box-sizing: border-box;
    min-height: var(--input-control-min-height);
    padding: var(--input-control-padding-block) var(--input-control-padding-inline);
    border: var(--input-control-border-width) solid var(--input-border-color, var(--input-color-border-subtle));
    border-radius: var(--input-border-radius, var(--input-control-radius));
    background-color: var(--input-background, transparent);
    color: var(--input-color-text);
    font: inherit;
    font-size: var(--input-font-size);
    line-height: var(--input-line-height);
  }

  label > input[type="search"], :is(form[role="search"], fieldset[role="group"], div[role="group"]) > input[type="search"] {
    --input-border-radius: 999px;
  }

  label > input:is([type="color"], [type="date"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="url"], [type="number"], :not([type]))::placeholder, :is(form[role="search"], fieldset[role="group"], div[role="group"]) > input:is([type="color"], [type="date"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="url"], [type="number"], :not([type]))::placeholder {
    color: var(--input-color-text-subtle);
    opacity: 1;
  }

  label > [data-role="message"] {
    color: var(--input-message-color);
    font-size: var(--input-font-size-caption);
    line-height: 1.3;
    display: none;
  }

  label > [data-role="message"][data-invalid]:before {
    content: attr(data-invalid);
  }

  label:has( > input:is([type="color"], [type="date"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="url"], [type="number"], :not([type])):user-invalid) {
    --input-border-color: var(--input-color-error-strong);
    --input-message-color: var(--input-color-error-strong);
  }

  :is(form[role="search"], fieldset[role="group"], div[role="group"]) > input:is([type="color"], [type="date"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="url"], [type="number"], :not([type])):user-invalid {
    --input-border-color: var(--input-color-error-strong);
  }

  label:has( > input:is([type="color"], [type="date"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="url"], [type="number"], :not([type])):user-invalid) > [data-role="message"][data-invalid] {
    display: block;
  }

  label > input:is([type="color"], [type="date"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="url"], [type="number"], :not([type])):focus, :is(form[role="search"], fieldset[role="group"], div[role="group"]) > input:is([type="color"], [type="date"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="url"], [type="number"], :not([type])):focus {
    border-color: var(--input-color-primary);
    box-shadow: 0 0 0 var(--input-focus-ring-size) var(--input-color-focus-ring);
    outline: none;
  }

  label > input[type="color"], :is(form[role="search"], fieldset[role="group"], div[role="group"]) > input[type="color"] {
    inline-size: 100%;
    min-block-size: var(--input-control-min-height);
    cursor: pointer;
    background-color: #0000;
    padding: 0;
  }

  input:disabled, input[type]:disabled {
    cursor: not-allowed;
  }

  label:has( > input:is([type="color"], [type="date"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="url"], [type="number"], :not([type])):disabled) {
    --input-border-color: var(--input-color-border-subtle);
    --input-background: var(--input-color-accent-disabled);
    color: var(--input-color-text-subtle);
  }

  label > input:is([type="color"], [type="date"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="url"], [type="number"], :not([type])):disabled, :is(form[role="search"], fieldset[role="group"], div[role="group"]) > input:is([type="color"], [type="date"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="url"], [type="number"], :not([type])):disabled {
    border-color: var(--input-border-color, var(--input-color-border-subtle));
    background-color: var(--input-background, var(--input-color-accent-disabled));
    box-shadow: none;
    color: var(--input-color-text-subtle);
  }

  label > input[type="color"]::-webkit-color-swatch-wrapper, :is(form[role="search"], fieldset[role="group"], div[role="group"]) > input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
  }

  label > input[type="color"]::-webkit-color-swatch, :is(form[role="search"], fieldset[role="group"], div[role="group"]) > input[type="color"]::-webkit-color-swatch {
    border-radius: calc(var(--input-border-radius, var(--input-control-radius)) / 2);
    border: 0;
  }

  label > input[type="color"]::-moz-color-swatch, :is(form[role="search"], fieldset[role="group"], div[role="group"]) > input[type="color"]::-moz-color-swatch {
    border-radius: calc(var(--input-border-radius, var(--input-control-radius)) / 2);
    border: 0;
  }

  label > input[type="color"]:disabled::-webkit-color-swatch, :is(form[role="search"], fieldset[role="group"], div[role="group"]) > input[type="color"]:disabled::-webkit-color-swatch {
    opacity: .48;
  }

  label > input[type="color"]:disabled::-moz-color-swatch, :is(form[role="search"], fieldset[role="group"], div[role="group"]) > input[type="color"]:disabled::-moz-color-swatch {
    opacity: .48;
  }

  @property --form-control-border-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --form-control-radius {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --form-icon-button-inline-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --form-label-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --form-label-font-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --form-label-line-height {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --grouped-control-radius {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  :root {
    --form-control-border-width: var(--layout-control-border-width);
    --form-control-radius: var(--layout-control-radius);
    --form-icon-button-inline-size: var(--layout-control-min-height);
    --form-label-color: var(--color-text-accent);
    --form-label-font-size: var(--font-size);
    --form-label-line-height: var(--font-line-height-body);
  }

  :where(label > [data-role="label"], fieldset > legend) {
    color: var(--form-label-color);
    font: inherit;
    font-size: var(--form-label-font-size);
    line-height: var(--form-label-line-height);
  }

  fieldset {
    border-radius: calc(var(--form-control-radius) / 2);
  }

  :is(form[role="search"], fieldset[role="group"], div[role="group"]) {
    contain: inline-size;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    inline-size: 100%;
    min-inline-size: 0;
    display: inline-flex;
  }

  fieldset[role="group"] {
    border: 0;
    margin: 0;
    padding: 0;
  }

  form[role="search"]:has( > fieldset[role="group"]) {
    contain: none;
    display: block;
  }

  :is(form[role="search"], fieldset[role="group"], div[role="group"]) > :is(button, a.button, input:is([type="date"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="url"], [type="number"], :not([type]))) {
    border-radius: 0;
    flex: auto;
    position: relative;
  }

  :is(form[role="search"], fieldset[role="group"], div[role="group"]) > input {
    inline-size: 100%;
    min-inline-size: 0;
  }

  :is(form[role="search"], fieldset[role="group"], div[role="group"]) > :is(button, a.button) {
    inline-size: auto;
    min-inline-size: 0;
  }

  :is(form[role="search"], fieldset[role="group"], div[role="group"]) > :is(button, a.button).icon {
    inline-size: var(--form-icon-button-inline-size);
    flex: none;
    min-inline-size: auto;
  }

  :is(form[role="search"], fieldset[role="group"], div[role="group"]) > :is(button, a.button, input:is([type="date"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="url"], [type="number"], :not([type]))):not(:first-child, input[type="search"]:first-of-type) {
    margin-inline-start: calc(-1 * var(--form-control-border-width));
  }

  :is(form[role="search"], fieldset[role="group"], div[role="group"]) > :is(button, a.button, input:is([type="date"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="url"], [type="number"], :not([type]))):is(:hover, :focus, :focus-visible, :active) {
    z-index: 1;
  }

  :is(form[role="search"], fieldset[role="group"], div[role="group"]) > :is(button, a.button, input:is([type="date"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="url"], [type="number"], :not([type]))):is(:first-child, input[type="search"]:first-of-type) {
    border-start-start-radius: var(--grouped-control-radius, var(--form-control-radius));
    border-end-start-radius: var(--grouped-control-radius, var(--form-control-radius));
  }

  :is(form[role="search"], fieldset[role="group"], div[role="group"]) > :is(button, a.button, input:is([type="date"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="url"], [type="number"], :not([type]))):last-child {
    border-start-end-radius: var(--grouped-control-radius, var(--form-control-radius));
    border-end-end-radius: var(--grouped-control-radius, var(--form-control-radius));
  }

  form[role="search"] > input[type="search"]:hover:not(:focus, :active) {
    z-index: auto;
  }

  @property --layout-safe-area-top {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --layout-space-stack {
    syntax: "<length-percentage>";
    inherits: true;
    initial-value: 0;
  }

  @property --layout-space-inline {
    syntax: "<length-percentage>";
    inherits: true;
    initial-value: 0;
  }

  @property --layout-page-min-inline-size {
    syntax: "<length-percentage>";
    inherits: true;
    initial-value: 0;
  }

  @property --layout-max-inline-size {
    syntax: "<length-percentage>";
    inherits: true;
    initial-value: 0;
  }

  @property --layout-section-margin-block-end {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --layout-landmark-padding-block {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --layout-sticky-offset {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --layout-anchor-scroll-offset {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --layout-control-gap {
    syntax: "<length-percentage>";
    inherits: true;
    initial-value: 0;
  }

  @property --layout-control-icon-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --layout-control-border-width {
    syntax: "<length-percentage>";
    inherits: true;
    initial-value: 0;
  }

  @property --layout-surface-border-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --layout-focus-ring-size {
    syntax: "<length-percentage>";
    inherits: true;
    initial-value: 0;
  }

  @property --layout-control-padding-block {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --layout-control-padding-inline {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --layout-action-padding-inline {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --layout-control-min-height {
    syntax: "<length-percentage>";
    inherits: true;
    initial-value: 0;
  }

  @property --layout-control-radius {
    syntax: "<length-percentage>";
    inherits: true;
    initial-value: 0;
  }

  @property --layout-control-line-height-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --sidebar-target-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --sidebar-gap {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --grid-min-column-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --grid-column-gap {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --grid-row-gap {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --switcher-target-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --masonry-min-column-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --masonry-column-gap {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --masonry-row-gap {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  :root {
    --layout-max-inline-size: 60rem;
    --layout-surface-border-width: .125rem;
  }

  :root, [data-layout-theme="comfortable"] {
    --layout-safe-area-top: env(safe-area-inset-top, 0px);
    --layout-space-stack: 1rem;
    --layout-space-inline: 1rem;
    --layout-page-min-inline-size: 20rem;
    --layout-section-margin-block-end: clamp(2rem, 1.5rem + 2.5vw, 4rem);
    --layout-landmark-padding-block: clamp(1rem, .5rem + 2.5vw, 3rem);
    --layout-sticky-offset: var(--layout-safe-area-top);
    --layout-control-line-height-size: calc(var(--font-size) * var(--font-line-height-body));
    --layout-anchor-scroll-offset: calc(var(--layout-safe-area-top) +
    (var(--layout-control-min-height) * 2));
    --layout-control-gap: .25rem;
    --layout-control-icon-size: calc(var(--icon-size) + .25rem);
    --layout-control-border-width: .125rem;
    --layout-focus-ring-size: .25rem;
    --layout-control-padding-block: calc(.75rem - var(--layout-control-border-width));
    --layout-control-padding-inline: calc(1.5rem - var(--layout-control-border-width));
    --layout-action-padding-inline: calc(2.125rem - var(--layout-control-border-width));
    --layout-control-min-height: 3rem;
    --layout-control-radius: .5rem;
  }

  [data-layout-theme="compact"] {
    --layout-safe-area-top: env(safe-area-inset-top, 0px);
    --layout-space-stack: .5rem;
    --layout-space-inline: .75rem;
    --layout-page-min-inline-size: 20rem;
    --layout-section-margin-block-end: clamp(1rem, .75rem + 1.25vw, 2rem);
    --layout-landmark-padding-block: clamp(.5rem, .25rem + 1.25vw, 1.5rem);
    --layout-sticky-offset: var(--layout-safe-area-top);
    --layout-control-line-height-size: calc(var(--font-size) * var(--font-line-height-body));
    --layout-anchor-scroll-offset: calc(var(--layout-safe-area-top) +
    (var(--layout-control-min-height) * 2));
    --layout-control-gap: .25rem;
    --layout-control-icon-size: calc(var(--icon-size) + .25rem);
    --layout-control-border-width: .125rem;
    --layout-focus-ring-size: .25rem;
    --layout-control-padding-block: calc(.5rem - var(--layout-control-border-width));
    --layout-control-padding-inline: calc(.75rem - var(--layout-control-border-width));
    --layout-action-padding-inline: calc(1rem - var(--layout-control-border-width));
    --layout-control-min-height: 2.5rem;
    --layout-control-radius: .5rem;
  }

  body {
    min-inline-size: var(--layout-page-min-inline-size);
    background: var(--color-accent);
    flex-direction: column;
    min-block-size: 100dvh;
    margin: 0;
    display: flex;
  }

  html {
    scroll-behavior: smooth;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }

  body:has( > nav:not([popover])) {
    --layout-sticky-offset: calc(var(--layout-safe-area-top) +
    var(--layout-control-min-height));
    --nav-sticky-offset: var(--layout-sticky-offset);
  }

  body > main {
    inline-size: 100%;
    max-inline-size: var(--layout-max-inline-size);
    flex: 1;
    margin-inline: auto;
  }

  main > header {
    text-align: center;
  }

  section {
    margin-block-end: var(--layout-section-margin-block-end);
  }

  section[id] {
    scroll-margin-top: var(--layout-anchor-scroll-offset);
  }

  body > main {
    padding-block: var(--layout-landmark-padding-block);
  }

  body > footer {
    padding-block: calc(var(--layout-landmark-padding-block) / 2);
  }

  hr {
    border: 0;
    border-top: var(--layout-control-border-width) solid var(--color-border-subtle);
    block-size: 0;
    inline-size: 100%;
    color: inherit;
    margin: 0;
  }

  .flow > * + * {
    margin-block-start: var(--flow-space, var(--layout-space-stack));
  }

  .flow.no-gap {
    --flow-space: 0px;
  }

  .cluster {
    align-items: end;
    gap: var(--layout-space-inline);
    flex-wrap: wrap;
    align-content: flex-start;
    height: auto;
    display: flex;
  }

  .cluster > * {
    margin: 0;
  }

  .cluster:is(ul) {
    list-style: none;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .justify-between {
    justify-content: space-between;
  }

  .stack {
    gap: var(--layout-space-stack);
    flex-direction: column;
    display: flex;
  }

  .stack:is(ul) {
    list-style: none;
  }

  .sidebar {
    --sidebar-target-width: 20rem;
    --sidebar-gap: calc(var(--layout-space-inline) * 2);
    align-items: flex-start;
    gap: var(--sidebar-gap);
    flex-wrap: wrap;
    display: flex;
  }

  .sidebar > :first-child {
    flex-basis: var(--sidebar-target-width);
  }

  .sidebar > :last-child {
    min-inline-size: min(100%, var(--sidebar-target-width));
    flex: 999 1 0;
  }

  @media (width <= 47.999rem) {
    .sidebar {
      flex-direction: column;
    }

    .sidebar > * {
      flex: none;
      inline-size: 100%;
    }

    .sidebar > :first-child {
      flex-basis: auto;
    }
  }

  .center {
    box-sizing: content-box;
    max-inline-size: var(--center-max-inline-size, var(--layout-max-inline-size));
    padding-inline: var(--center-padding-inline, var(--layout-space-inline));
    margin-inline: auto;
  }

  .sidebar.center {
    box-sizing: border-box;
    inline-size: 100%;
  }

  .switcher {
    --switcher-target-width: 20rem;
    gap: var(--layout-space-inline);
    flex-wrap: wrap;
    display: flex;
  }

  .switcher > * {
    flex: 1 1 var(--switcher-target-width);
    min-inline-size: 0;
  }

  .cover {
    min-block-size: var(--cover-min-block-size, 100dvh);
    flex-direction: column;
    display: flex;
  }

  .cover > :nth-child(2) {
    margin-block: auto;
  }

  .reel {
    gap: var(--layout-space-inline);
    padding-block: var(--layout-space-stack);
    padding-inline: var(--layout-space-inline);
    scrollbar-gutter: stable;
    display: flex;
    overflow: auto hidden;
  }

  .reel > * {
    flex: none;
  }

  .overflow-auto {
    overflow: auto;
  }

  .frame {
    aspect-ratio: var(--frame-aspect-ratio, 16 / 9);
    overflow: hidden;
  }

  .frame > :is(img, video, iframe) {
    object-fit: cover;
    block-size: 100%;
    inline-size: 100%;
    display: block;
  }

  .fluid {
    inline-size: 100%;
    max-inline-size: none;
    margin: 0;
  }

  .flush {
    inline-size: 100%;
    max-inline-size: none;
    margin: 0;
    padding: 0;
  }

  .no-gap {
    gap: 0;
  }

  :is(ul, ol).list-unstyled {
    padding-inline-start: 0;
    list-style: none;
  }

  .masonry {
    --masonry-min-column-size: 16rem;
    --masonry-column-gap: var(--layout-space-inline);
    --masonry-row-gap: var(--layout-space-stack);
    column-width: var(--masonry-min-column-size);
    column-gap: var(--masonry-column-gap);
  }

  .masonry > * {
    break-inside: avoid;
    inline-size: 100%;
    vertical-align: top;
    margin-block-end: var(--masonry-row-gap);
    display: inline-block;
  }

  .grid {
    --grid-column-gap: var(--layout-space-inline);
    --grid-row-gap: var(--layout-space-stack);
    --grid-min-column-size: 16rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min-column-size)), 1fr));
    column-gap: var(--grid-column-gap);
    row-gap: var(--grid-row-gap);
    display: grid;
  }

  .grid > * {
    min-width: 0;
  }

  @property --loading-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --loading-arc {
    syntax: "<angle>";
    inherits: false;
    initial-value: 30deg;
  }

  @property --loading-tail {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
  }

  @property --loading-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --loading-stroke {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  :root {
    --loading-size: .75rem;
    --loading-stroke: calc(var(--layout-control-border-width) * 1.5);
  }

  :where([aria-busy="true"]:not(input, select, textarea, html)):before {
    --loading-color: currentColor;
    content: "";
    inline-size: var(--loading-size, .75rem);
    block-size: var(--loading-size, .75rem);
    vertical-align: -.125em;
    background: conic-gradient(from var(--loading-tail),
    var(--loading-color, currentColor) 0deg var(--loading-arc),
    transparent var(--loading-arc) 1turn);
    -webkit-mask: radial-gradient(farthest-side,
    transparent calc(100% - var(--loading-stroke)),
    #000 0);
    mask: radial-gradient(farthest-side,
    transparent calc(100% - var(--loading-stroke)),
    #000 0);
    border-radius: 50%;
    flex: none;
    animation: 1s linear infinite loading-spin, 1.8s ease-in-out infinite loading-shape;
    display: inline-block;
  }

  :where([aria-busy="true"]:not(input, select, textarea, html):not(:empty)):before {
    margin-inline-end: calc(var(--loading-size) / 2);
  }

  @keyframes loading-spin {
    to {
      transform: rotate(1turn);
    }
  }

  @keyframes loading-shape {
    0% {
      --loading-arc: 300deg;
      --loading-tail: 0deg;
    }

    40% {
      --loading-arc: 30deg;
      --loading-tail: 270deg;
    }

    80% {
      --loading-arc: 300deg;
      --loading-tail: 270deg;
    }

    100% {
      --loading-arc: 300deg;
      --loading-tail: 360deg;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :where([aria-busy="true"]:not(input, select, textarea, html)):before {
      --loading-arc: 270deg;
      animation: none;
    }
  }

  @property --nav-border-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --nav-current-background {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --nav-link-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --nav-link-current-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --nav-link-hover-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --nav-color-accent-subtle {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --nav-color-focus-ring {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --nav-font-family-sans {
    syntax: "*";
    inherits: true
  }

  @property --nav-font-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --nav-control-border-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --nav-control-gap {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --nav-control-min-height {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --nav-control-padding-block {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --nav-control-padding-inline {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --nav-focus-ring-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --nav-page-min-inline-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --nav-safe-area-top {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --nav-space-inline {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --nav-space-stack {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --nav-sticky-offset {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --nav-line-height {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --nav-icon-font-family {
    syntax: "*";
    inherits: true
  }

  @property --nav-icon-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --nav-indent {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --nav-dropdown-background {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --nav-dropdown-border-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --nav-dropdown-min-inline-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --nav-dropdown-panel-offset {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --nav-dropdown-radius {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  :root {
    --nav-color-accent-subtle: var(--color-accent-subtle);
    --nav-color-focus-ring: var(--color-focus-ring);
    --nav-font-family-sans: var(--font-family-sans);
    --nav-font-size: var(--font-size);
    --nav-control-border-width: var(--layout-control-border-width);
    --nav-control-gap: var(--layout-control-gap);
    --nav-control-min-height: var(--layout-control-min-height);
    --nav-control-padding-block: var(--layout-control-padding-block);
    --nav-control-padding-inline: var(--layout-control-padding-inline);
    --nav-focus-ring-size: var(--layout-focus-ring-size);
    --nav-page-min-inline-size: var(--layout-page-min-inline-size);
    --nav-safe-area-top: var(--layout-safe-area-top);
    --nav-space-inline: var(--layout-space-inline);
    --nav-space-stack: var(--layout-space-stack);
    --nav-sticky-offset: var(--layout-sticky-offset);
    --nav-line-height: var(--font-line-height-body);
    --nav-icon-font-family: var(--icon-font-family);
    --nav-icon-size: var(--layout-control-icon-size);
    --nav-border-color: var(--color-border-subtle);
    --nav-link-color: var(--color-text);
    --nav-link-hover-color: var(--color-text-accent);
    --nav-link-current-color: var(--color-text-accent);
    --nav-current-background: var(--color-primary-subtle);
    --nav-indent: calc(var(--nav-control-padding-inline) + var(--nav-icon-size) + var(--nav-control-gap));
    --nav-dropdown-background: var(--color-accent-subtle);
    --nav-dropdown-border-color: var(--color-border-subtle);
    --nav-dropdown-min-inline-size: 12rem;
    --nav-dropdown-panel-offset: var(--layout-control-gap);
    --nav-dropdown-radius: var(--layout-control-radius);
  }

  nav:has( > :is(ul, ol)):not(:where([aria-label="breadcrumb"], .pagination, [aria-label="Legal links"], .side-nav, header > nav, footer nav)) {
    z-index: 10;
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: var(--nav-page-min-inline-size);
    padding-top: var(--nav-safe-area-top);
    background: var(--nav-color-accent-subtle);
    color: var(--nav-link-color);
    font-family: var(--nav-font-family-sans);
    font-size: var(--nav-font-size);
    line-height: var(--nav-line-height);
    position: sticky;
    top: 0;
    overflow: auto hidden;

    & > :is(ul, ol) {
      gap: var(--nav-control-gap);
      border-bottom: var(--nav-control-border-width) solid var(--nav-border-color);
      flex-wrap: nowrap;
      align-items: flex-end;
      inline-size: max-content;
      min-inline-size: 100%;
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
    }

    & > :is(ul, ol) > li {
      margin: 0;
    }

    & > :is(ul, ol) > li > :is(a, span[aria-current]) {
      box-sizing: border-box;
      min-height: var(--nav-control-min-height);
      padding: var(--nav-control-padding-block) var(--nav-control-padding-inline);
      margin-bottom: calc(var(--nav-control-border-width) * -1);
      border-bottom: var(--nav-control-border-width) solid transparent;
      color: var(--nav-link-color);
      font: inherit;
      font-weight: 500;
      line-height: inherit;
      white-space: nowrap;
      justify-content: center;
      align-items: center;
      text-decoration: none;
      display: inline-flex;
    }

    & > :is(ul, ol) > li > a:hover {
      color: var(--nav-link-hover-color);
    }

    & > :is(ul, ol) > li > :is(a[aria-current], span[aria-current]) {
      border-bottom-color: var(--nav-link-current-color);
      background: var(--nav-current-background);
      color: var(--nav-link-current-color);
    }

    & :is(a, summary):focus-visible {
      box-shadow: 0 0 0 var(--nav-focus-ring-size) var(--nav-color-focus-ring);
      outline: none;
    }
  }

  nav:has( > :is(ul, ol) > li > details):not(.side-nav) > :is(ul, ol) > li {
    align-items: stretch;
    display: inline-flex;
    position: relative;
  }

  nav:has( > :is(ul, ol) > li > details):not(.side-nav) > :is(ul, ol) > li > details {
    margin-bottom: calc(var(--nav-control-border-width) * -1);
    block-size: max(var(--nav-control-min-height),
    calc((var(--nav-font-size) * var(--nav-line-height)) +
      (var(--nav-control-padding-block) * 2) +
      var(--nav-control-border-width)));
    position: relative;
    overflow: visible;
  }

  nav:has( > :is(ul, ol) > li > details):not(.side-nav) > :is(ul, ol) > li > details > summary {
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    gap: var(--nav-control-gap);
    min-height: var(--nav-control-min-height);
    block-size: max(var(--nav-control-min-height),
    calc((var(--nav-font-size) * var(--nav-line-height)) +
      (var(--nav-control-padding-block) * 2) +
      var(--nav-control-border-width)));
    padding: var(--nav-control-padding-block) var(--nav-control-padding-inline);
    border-bottom: var(--nav-control-border-width) solid transparent;
    color: var(--nav-link-color);
    cursor: pointer;
    font: inherit;
    font-weight: 500;
    line-height: inherit;
    text-align: center;
    white-space: nowrap;
    list-style: none;
    display: inline-flex;
  }

  nav:has( > :is(ul, ol) > li > details):not(.side-nav) > :is(ul, ol) > li > details > summary::-webkit-details-marker {
    display: none;
  }

  nav:has( > :is(ul, ol) > li > details):not(.side-nav) > :is(ul, ol) > li > details > summary:after {
    content: "";
    inline-size: var(--nav-icon-size);
    block-size: var(--nav-icon-size);
    transform-origin: center;
    background-color: currentColor;
    flex: none;
    order: 0;
    align-self: center;
    margin-inline-start: var(--nav-control-gap);
    transition: rotate .2s;
    rotate: 0deg;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  nav:has( > :is(ul, ol) > li > details):not(.side-nav) > :is(ul, ol) > li > details[open] > summary:after {
    rotate: 180deg;
  }

  nav:has( > :is(ul, ol) > li > details):not(.side-nav) > :is(ul, ol) > li > details > summary:hover, nav:has( > :is(ul, ol) > li > details):not(.side-nav) > :is(ul, ol) > li > details > summary[aria-current] {
    color: var(--nav-link-hover-color);
  }

  nav:has( > :is(ul, ol) > li > details):not(.side-nav) > :is(ul, ol) > li > details > summary[aria-current] {
    border-bottom-color: var(--nav-link-current-color);
    background: var(--nav-current-background);
    color: var(--nav-link-current-color);
  }

  nav:has( > :is(ul, ol) > li > details):not(.side-nav) > :is(ul, ol) > li > details > ul {
    z-index: 1;
    min-inline-size: var(--nav-dropdown-min-inline-size);
    max-inline-size: calc(100vw - (var(--nav-space-inline) * 2));
    max-block-size: calc(100dvh - var(--nav-dropdown-panel-offset));
    border: var(--nav-control-border-width) solid var(--nav-dropdown-border-color);
    border-radius: var(--nav-dropdown-radius);
    background: var(--nav-dropdown-background);
    color: var(--nav-link-color);
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    inset-block-start: calc(100% + var(--nav-dropdown-panel-offset));
    inset-inline-start: 0;
    overflow: auto;
  }

  nav:has( > :is(ul, ol) > li > details):not(.side-nav) > :is(ul, ol) > li > details > ul > li {
    margin: 0;
    padding: 0;
  }

  nav:has( > :is(ul, ol) > li > details):not(.side-nav) > :is(ul, ol) > li > details > ul > li > a {
    min-height: var(--nav-control-min-height);
    box-sizing: border-box;
    padding: var(--nav-control-padding-block) var(--nav-control-padding-inline);
    color: var(--nav-link-color);
    white-space: nowrap;
    text-decoration: none;
    display: block;
  }

  nav:has( > :is(ul, ol) > li > details):not(.side-nav) > :is(ul, ol) > li > details > ul > li > a:hover, nav:has( > :is(ul, ol) > li > details):not(.side-nav) > :is(ul, ol) > li > details > ul > li > a:focus-visible {
    background: var(--nav-current-background);
    color: var(--nav-link-hover-color);
    outline: none;
  }

  nav:has( > :is(ul, ol) > li > details):not(.side-nav) > :is(ul, ol) > li > details > ul > li > a[aria-current] {
    background: var(--nav-current-background);
    color: var(--nav-link-current-color);
  }

  @media (prefers-reduced-motion: reduce) {
    nav:has( > :is(ul, ol) > li > details):not(.side-nav) > :is(ul, ol) > li > details > summary:after {
      transition: none;
    }
  }

  @media (width >= 48rem) {
    nav:has( > :is(ul, ol) > li > details):not(.side-nav) {
      overflow: visible;
    }
  }

  @media (width <= 47.999rem) {
    nav:has( > :is(ul, ol) > li > details):not(.side-nav):not([popover]) {
      overflow: visible;
    }

    nav:has( > :is(ul, ol) > li > details):not(.side-nav):not([popover]) > :is(ul, ol) {
      inline-size: 100%;
      overflow: auto;
    }

    nav:has( > :is(ul, ol) > li > details):not(.side-nav):not([popover]) > :is(ul, ol) > li, nav:has( > :is(ul, ol) > li > details):not(.side-nav):not([popover]) > :is(ul, ol) > li > details {
      position: static;
    }
  }

  body > nav {
    z-index: 30;
  }

  nav.side-nav {
    color: var(--nav-link-color);
    font-family: var(--nav-font-family-sans);
    font-size: var(--nav-font-size);
    line-height: var(--nav-line-height);
    align-self: start;
  }

  nav.side-nav > :is(h2, h3, h4) {
    margin-block-start: 0;
  }

  nav.side-nav :is(ul, li) {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  nav.side-nav > :is(ul, ol) {
    gap: var(--nav-control-gap);
    display: grid;
  }

  nav.side-nav ul ul {
    padding-inline-start: var(--nav-indent);
  }

  nav.side-nav details {
    overflow: visible;
  }

  nav.side-nav :is(summary, a) {
    box-sizing: border-box;
    align-items: center;
    gap: var(--nav-control-gap);
    min-height: var(--nav-control-min-height);
    padding: var(--nav-control-padding-block) var(--nav-control-padding-inline);
    color: var(--nav-link-color);
    font: inherit;
    font-weight: 400;
    line-height: inherit;
    display: flex;
  }

  nav.side-nav summary {
    cursor: pointer;
    list-style: none;
  }

  nav.side-nav summary::-webkit-details-marker {
    display: none;
  }

  nav.side-nav summary:after {
    content: "chevron_right";
    color: var(--nav-link-current-color);
    font-family: var(--nav-icon-font-family);
    font-size: var(--nav-icon-size);
    letter-spacing: normal;
    text-transform: none;
    font-feature-settings: "liga";
    white-space: nowrap;
    direction: ltr;
    flex: none;
    order: -1;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    transition: rotate .2s;
  }

  nav.side-nav details[open] > summary:after {
    rotate: 90deg;
  }

  nav.side-nav details > :not(summary) {
    padding-block: 0;
    padding-inline-start: var(--nav-indent);
    padding-inline-end: 0;
  }

  nav.side-nav details > :not(summary):last-child {
    padding-bottom: 0;
  }

  nav.side-nav a {
    text-decoration: none;
  }

  nav.side-nav a:hover {
    background-color: var(--nav-current-background);
    color: var(--nav-link-color);
  }

  nav.side-nav a[aria-current] {
    background: var(--nav-current-background);
    color: var(--nav-link-current-color);
    font-weight: 600;
  }

  nav.side-nav :is(summary, a):focus-visible {
    box-shadow: inset 0 0 0 var(--nav-focus-ring-size) var(--nav-color-focus-ring);
    outline: none;
  }

  @media (width >= 48rem) {
    nav.side-nav {
      top: calc(var(--nav-sticky-offset) + var(--nav-space-stack));
      max-block-size: calc(100dvh - var(--nav-sticky-offset) - (var(--nav-space-stack) * 2));
      position: sticky;
      overflow: auto;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    nav.side-nav summary:after {
      transition: none;
    }
  }

  @property --pagination-icon-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --pagination-color-text {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --pagination-control-min-height {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --pagination-control-padding-block {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --pagination-control-padding-inline {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --pagination-space-inline {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  :root {
    --pagination-color-text: var(--color-text);
    --pagination-control-min-height: var(--layout-control-min-height);
    --pagination-control-padding-block: var(--layout-control-padding-block);
    --pagination-control-padding-inline: var(--layout-control-padding-inline);
    --pagination-space-inline: var(--layout-space-inline);
  }

  nav.pagination {
    --pagination-icon-color: var(--pagination-color-text);
    place-content: flex-start flex-end;
    align-items: center;
    gap: var(--pagination-space-inline);
    min-height: var(--pagination-control-min-height);
    padding: var(--pagination-control-padding-block) var(--pagination-control-padding-inline);
    color: var(--pagination-color-text);
    flex-wrap: wrap;
    display: flex;

    & p {
      color: var(--pagination-color-text);
      white-space: nowrap;
    }

    & a {
      min-height: var(--pagination-control-min-height);
      padding: 0 calc(var(--pagination-control-padding-inline) / 2);
      color: inherit;
      cursor: pointer;
      white-space: nowrap;
      justify-content: center;
      align-items: center;
      text-decoration: none;
      display: inline-flex;
    }

    & .icon {
      color: var(--pagination-icon-color);
    }
  }

  @property --progress-border-radius {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --progress-height {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --progress-track-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --progress-value-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  progress {
    --progress-value-color: var(--color-primary);
    --progress-track-color: var(--color-primary-subtle);
    --progress-border-radius: var(--layout-control-radius);
    --progress-height: .6rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    vertical-align: baseline;
    border-radius: var(--progress-border-radius);
    block-size: .5rem;
    inline-size: 100%;
    clip-path: inset(0 round var(--progress-border-radius));
    height: var(--progress-height);
    background: var(--progress-track-color);
    color: var(--progress-value-color);
    accent-color: var(--progress-value-color);
    border: 0;
    display: inline-block;
    overflow: hidden;
  }

  [data-color-theme="dark"] progress {
    --progress-track-color: var(--color-accent);
  }

  progress::-webkit-progress-bar {
    border-radius: inherit;
    background: var(--progress-track-color);
  }

  progress::-webkit-progress-value {
    border-radius: inherit;
    background: var(--progress-value-color);
  }

  progress::-moz-progress-bar {
    border-radius: inherit;
    background: var(--progress-value-color);
  }

  progress:not([value]) {
    background: linear-gradient(var(--progress-value-color),
      var(--progress-value-color))
    0 0 / 50% 100% no-repeat,
    var(--progress-track-color);
    animation: 1s linear infinite progress-indeterminate;
  }

  progress:not([value])::-webkit-progress-bar {
    background: none;
  }

  progress:not([value])::-webkit-progress-value {
    background: none;
  }

  progress:not([value])::-moz-progress-bar {
    background: none;
  }

  @keyframes progress-indeterminate {
    from {
      background-position: -100% 0;
    }

    to {
      background-position: 200% 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    progress:not([value]) {
      background-position: center;
      animation: none;
    }
  }

  @property --radio-color-primary {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --radio-color-primary-subtle {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --radio-color-text {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --radio-color-text-accent {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --radio-color-text-subtle {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --radio-font-family-sans {
    syntax: "*";
    inherits: true
  }

  @property --radio-font-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --radio-control-border-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --radio-control-gap {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --radio-focus-ring-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --radio-space-inline {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --radio-line-height {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  :root {
    --radio-color-primary: var(--color-primary);
    --radio-color-primary-subtle: var(--color-primary-subtle);
    --radio-color-text: var(--color-text);
    --radio-color-text-accent: var(--color-text-accent);
    --radio-color-text-subtle: var(--color-text-subtle);
    --radio-font-family-sans: var(--font-family-sans);
    --radio-font-size: var(--font-size);
    --radio-control-border-width: var(--layout-control-border-width);
    --radio-control-gap: var(--layout-control-gap);
    --radio-focus-ring-size: var(--layout-focus-ring-size);
    --radio-space-inline: var(--layout-space-inline);
    --radio-line-height: var(--font-line-height-body);
  }

  fieldset:has( > label > input[type="radio"]) {
    gap: var(--radio-control-gap);
    min-inline-size: 0;
    color: var(--radio-color-text);
    font: inherit;
    font-family: var(--radio-font-family-sans);
    font-size: var(--radio-font-size);
    line-height: var(--radio-line-height);
    border: 0;
    margin: 0;
    padding: 0;
    display: grid;
  }

  fieldset:has( > label > input[type="radio"]) > legend {
    margin: 0 0 var(--radio-control-gap);
    padding: 0;
  }

  fieldset:has( > label > input[type="radio"]) > label {
    align-items: start;
    gap: var(--radio-space-inline);
    color: inherit;
    cursor: pointer;
    font: inherit;
    line-height: inherit;
    display: flex;
  }

  fieldset:has( > label > input[type="radio"]) > label:has( > input[type="radio"]:disabled) {
    color: var(--radio-color-text-subtle);
    cursor: not-allowed;
  }

  fieldset:has( > label > input[type="radio"]) > label > input[type="radio"] {
    inline-size: var(--radio-font-size);
    block-size: var(--radio-font-size);
    margin: calc(((var(--radio-font-size) * var(--radio-line-height)) - var(--radio-font-size)) / 2) 0 0;
    accent-color: var(--radio-color-primary);
    cursor: inherit;
    flex: none;
  }

  fieldset:has( > label > input[type="radio"]) > label > input[type="radio"]:focus-visible {
    outline: var(--radio-control-border-width) solid var(--radio-color-primary-subtle);
    outline-offset: var(--radio-focus-ring-size);
  }

  @property --range-thumb-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --range-track-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --range-color-accent-disabled {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --range-color-border-inverse {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --range-color-border-subtle {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --range-color-focus-ring {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --range-color-primary {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --range-color-text-accent {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --range-color-text-subtle {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --range-font-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --range-font-size-caption {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --range-control-border-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --range-control-gap {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --range-control-min-height {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --range-control-radius {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --range-focus-ring-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --range-space-inline {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --range-line-height {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  :root {
    --range-color-accent-disabled: var(--color-accent-disabled);
    --range-color-border-inverse: var(--color-border-inverse);
    --range-color-border-subtle: var(--color-border-subtle);
    --range-color-focus-ring: var(--color-focus-ring);
    --range-color-primary: var(--color-primary);
    --range-color-text-accent: var(--color-text-accent);
    --range-color-text-subtle: var(--color-text-subtle);
    --range-font-size: var(--font-size);
    --range-font-size-caption: var(--font-size-caption);
    --range-control-border-width: var(--layout-control-border-width);
    --range-control-gap: var(--layout-control-gap);
    --range-control-min-height: var(--layout-control-min-height);
    --range-control-radius: var(--layout-control-radius);
    --range-focus-ring-size: var(--layout-focus-ring-size);
    --range-space-inline: var(--layout-space-inline);
    --range-line-height: var(--font-line-height-body);
    --range-track-size: .5rem;
    --range-thumb-size: 1.25rem;
  }

  label:has( > input[type="range"]) {
    gap: var(--range-control-gap);
    color: var(--range-color-text-accent);
    font: inherit;
    font-size: var(--range-font-size);
    line-height: var(--range-line-height);
    flex-direction: column;
    display: flex;
  }

  label > input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    inline-size: 100%;
    min-block-size: var(--range-control-min-height);
    border-radius: var(--range-control-radius);
    cursor: pointer;
    background: none;
    border: 0;
    margin: 0;
  }

  label > input[type="range"]:focus {
    outline: none;
  }

  label > input[type="range"]:focus-visible {
    box-shadow: 0 0 0 var(--range-focus-ring-size) var(--range-color-focus-ring);
  }

  label > input[type="range"]::-webkit-slider-runnable-track {
    height: var(--range-track-size);
    background: var(--range-color-border-subtle);
    border-radius: 999px;
  }

  label > input[type="range"]::-moz-range-track {
    height: var(--range-track-size);
    background: var(--range-color-border-subtle);
    border: 0;
    border-radius: 999px;
  }

  label > input[type="range"]::-moz-range-progress {
    height: var(--range-track-size);
    background: var(--range-color-primary);
    border-radius: 999px;
  }

  label > input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    inline-size: var(--range-thumb-size);
    block-size: var(--range-thumb-size);
    margin-top: calc((var(--range-track-size) - var(--range-thumb-size)) / 2);
    border: var(--range-control-border-width) solid var(--range-color-border-inverse);
    background: var(--range-color-primary);
    border-radius: 50%;
  }

  label > input[type="range"]::-moz-range-thumb {
    inline-size: var(--range-thumb-size);
    block-size: var(--range-thumb-size);
    border: var(--range-control-border-width) solid var(--range-color-border-inverse);
    background: var(--range-color-primary);
    border-radius: 50%;
  }

  label > [data-role="range-limits"] {
    justify-content: space-between;
    gap: var(--range-space-inline);
    color: var(--range-color-text-subtle);
    font-size: var(--range-font-size-caption);
    line-height: 1.3;
    display: flex;
  }

  label:has( > input[type="range"]:disabled) {
    color: var(--range-color-text-subtle);
  }

  label > input[type="range"]:disabled {
    cursor: not-allowed;
  }

  label > input[type="range"]:disabled::-webkit-slider-runnable-track, label > input[type="range"]:disabled::-moz-range-track, label > input[type="range"]:disabled::-moz-range-progress {
    background: var(--range-color-accent-disabled);
  }

  label > input[type="range"]:disabled::-webkit-slider-thumb, label > input[type="range"]:disabled::-moz-range-thumb {
    background: var(--range-color-text-subtle);
  }

  @property --select-background {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --select-icon-offset {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --select-icon-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --select-icon-source {
    syntax: "<image> | none";
    inherits: true;
    initial-value: none;
  }

  @property --select-color-border-subtle {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --select-color-accent-disabled {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --select-color-focus-ring {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --select-color-primary {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --select-color-text {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --select-color-text-accent {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --select-color-text-subtle {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --select-font-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --select-control-border-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --select-control-gap {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --select-control-min-height {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --select-control-padding-block {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --select-control-padding-inline {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --select-control-radius {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --select-focus-ring-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --select-line-height {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  :root {
    --select-background: transparent;
    --select-color-accent-disabled: var(--color-accent-disabled);
    --select-color-border-subtle: var(--color-border-subtle);
    --select-color-focus-ring: var(--color-focus-ring);
    --select-color-primary: var(--color-primary);
    --select-color-text: var(--color-text);
    --select-color-text-accent: var(--color-text-accent);
    --select-color-text-subtle: var(--color-text-subtle);
    --select-font-size: var(--font-size);
    --select-control-border-width: var(--layout-control-border-width);
    --select-control-gap: var(--layout-control-gap);
    --select-control-min-height: var(--layout-control-min-height);
    --select-control-padding-block: var(--layout-control-padding-block);
    --select-control-padding-inline: var(--layout-control-padding-inline);
    --select-control-radius: var(--layout-control-radius);
    --select-focus-ring-size: var(--layout-focus-ring-size);
    --select-line-height: var(--font-line-height-body);
    --select-icon-offset: var(--layout-space-inline);
    --select-icon-size: var(--layout-control-icon-size);
    --select-icon-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230047ba' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  }

  label:has( > select) {
    gap: var(--select-control-gap);
    color: var(--select-color-text-accent);
    font: inherit;
    font-size: var(--select-font-size);
    line-height: var(--select-line-height);
    flex-direction: column;
    display: flex;
  }

  label > select {
    box-sizing: border-box;
    min-height: var(--select-control-min-height);
    padding: var(--select-control-padding-block) var(--select-control-padding-inline);
    border: var(--select-control-border-width) solid var(--select-color-border-subtle);
    border-radius: var(--select-control-radius);
    background-color: var(--select-background);
    font: inherit;
    font-size: var(--select-font-size);
    line-height: var(--select-line-height);
  }

  label > select:not([multiple], [size]) {
    appearance: none;
    background-image: var(--select-icon-source);
    background-position: right var(--select-icon-offset) center;
    background-repeat: no-repeat;
    background-size: var(--select-icon-size) var(--select-icon-size);
    color: var(--select-color-text-subtle);
    padding-inline-end: calc(var(--select-icon-offset) + var(--select-icon-size) + (var(--select-control-gap) * 2));
  }

  label > select:is([multiple], [size]) {
    color: var(--select-color-text);
  }

  label > select:focus {
    border-color: var(--select-color-primary);
    box-shadow: 0 0 0 var(--select-focus-ring-size) var(--select-color-focus-ring);
    outline: none;
  }

  label > select:not([multiple], [size]):valid {
    color: var(--select-color-text);
  }

  label > select:disabled {
    --select-background: var(--select-color-accent-disabled);
    cursor: not-allowed;
    box-shadow: none;
    color: var(--select-color-text-subtle);
  }

  @property --stepper-active-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --stepper-complete-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --stepper-complete-font-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --stepper-complete-icon-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --stepper-gap {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --stepper-idle-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --stepper-indicator-font-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --stepper-indicator-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --stepper-label-font-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --stepper-line-offset {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --stepper-line-thickness {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --stepper-ring-gap {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --stepper-ring-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --stepper-stack-gap {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --stepper-track-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --stepper-color-accent {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --stepper-color-text {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --stepper-color-text-inverse {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --stepper-icon-font-family {
    syntax: "*";
    inherits: true
  }

  @property --stepper-space-inline {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --stepper-space-stack {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  :root {
    --stepper-color-accent: var(--color-accent);
    --stepper-color-text: var(--color-text);
    --stepper-color-text-inverse: var(--color-text-inverse);
    --stepper-icon-font-family: var(--icon-font-family);
    --stepper-space-inline: var(--layout-space-inline);
    --stepper-space-stack: var(--layout-space-stack);
    --stepper-gap: clamp(calc(var(--stepper-space-inline) * 2), 5vw, calc(var(--stepper-space-inline) * 5));
    --stepper-indicator-size: var(--layout-control-min-height);
    --stepper-line-thickness: .1875rem;
    --stepper-line-offset: var(--stepper-space-inline);
    --stepper-label-font-size: calc(var(--font-size) * 1.25);
    --stepper-indicator-font-size: calc(var(--font-size) * 1.25);
    --stepper-complete-font-size: calc(var(--font-size) * 1.75);
    --stepper-ring-gap: var(--layout-focus-ring-size);
    --stepper-ring-size: calc(var(--layout-focus-ring-size) / 2);
    --stepper-track-color: var(--color-border-subtle);
    --stepper-idle-color: var(--color-accent-strong);
    --stepper-active-color: var(--color-primary);
    --stepper-complete-color: var(--color-success);
    --stepper-complete-icon-color: var(--stepper-color-text-inverse);
  }

  .stepper {
    container-type: inline-size;
  }

  .stepper > ol {
    gap: var(--stepper-gap);
    counter-reset: step;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .stepper > ol p {
    font-size: var(--stepper-label-font-size);
    color: var(--stepper-color-text);
    margin: 0;
    line-height: 1.3;
  }

  .stepper > ol li {
    counter-increment: step;
    text-align: center;
    flex-direction: column;
    flex: 1 1 0;
    align-items: center;
    min-width: 0;
    display: flex;
    position: relative;
  }

  .stepper > ol li:before {
    content: counter(step);
    width: var(--stepper-indicator-size);
    height: var(--stepper-indicator-size);
    margin-bottom: var(--stepper-space-stack);
    background-color: var(--stepper-idle-color);
    color: var(--stepper-color-text-inverse);
    font-size: var(--stepper-indicator-font-size);
    z-index: 1;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    line-height: 1;
    display: inline-flex;
  }

  .stepper > ol li:not(:last-child):after {
    content: "";
    top: calc(var(--stepper-indicator-size) / 2 - var(--stepper-line-thickness) / 2);
    left: calc(50% + (var(--stepper-indicator-size) / 2) + var(--stepper-line-offset));
    width: calc(100% + var(--stepper-gap) - var(--stepper-indicator-size) - (2 * var(--stepper-line-offset)));
    height: var(--stepper-line-thickness);
    border-radius: var(--stepper-line-thickness);
    background-color: var(--stepper-track-color);
    z-index: 0;
    position: absolute;
  }

  .stepper > ol li[data-step-state="complete"]:before {
    content: "check";
    background-color: var(--stepper-complete-color);
    color: var(--stepper-complete-icon-color);
    font-family: var(--stepper-icon-font-family);
    font-size: var(--stepper-complete-font-size);
    letter-spacing: normal;
    text-transform: none;
    font-feature-settings: "liga";
    font-variation-settings: "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 32;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizelegibility;
    direction: ltr;
    font-style: normal;
    font-weight: normal;
  }

  .stepper > ol li[data-step-state="complete"]:not(:last-child):after {
    background-color: var(--stepper-complete-color);
  }

  .stepper > ol li[aria-current="step"] p {
    font-weight: 600;
  }

  .stepper > ol li[aria-current="step"]:before {
    background-color: var(--stepper-active-color);
    color: var(--stepper-color-text-inverse);
    box-shadow: 0 0 0 var(--stepper-ring-gap) var(--stepper-color-accent),
    0 0 0 calc(var(--stepper-ring-gap) + var(--stepper-ring-size)) var(--stepper-active-color);
  }

  .stepper > ol li[aria-current="step"]:not(:last-child):after {
    left: calc(50% + (var(--stepper-indicator-size) / 2) + var(--stepper-line-offset) + .25rem);
    width: calc(100% + var(--stepper-gap) - var(--stepper-indicator-size) - (2 * var(--stepper-line-offset)) - .5rem);
  }

  @container (width <= 45rem) {
    .stepper > ol {
      --stepper-stack-gap: calc(var(--stepper-space-stack) * 4);
      gap: var(--stepper-stack-gap);
      flex-direction: column;
    }

    .stepper > ol li {
      grid-template-columns: var(--stepper-indicator-size) minmax(0, 1fr);
      column-gap: var(--stepper-space-inline);
      text-align: left;
      align-items: start;
      display: grid;
    }

    .stepper > ol li:before {
      grid-area: 1 / 1;
      justify-self: start;
      margin-bottom: 0;
    }

    .stepper > ol li p {
      grid-area: 1 / 2;
      align-self: center;
    }

    .stepper > ol li:not(:last-child) {
      padding-bottom: .25rem;
    }

    .stepper > ol li:not(:last-child):after {
      top: calc(var(--stepper-indicator-size) + .5rem);
      left: calc(var(--stepper-indicator-size) / 2 - var(--stepper-line-thickness) / 2);
      width: var(--stepper-line-thickness);
      height: calc(100% + var(--stepper-stack-gap) - var(--stepper-indicator-size) - 1rem);
    }

    .stepper > ol li[aria-current="step"]:not(:last-child):after {
      left: calc(var(--stepper-indicator-size) / 2 - var(--stepper-line-thickness) / 2);
      width: var(--stepper-line-thickness);
      height: calc(100% + var(--stepper-stack-gap) - var(--stepper-indicator-size) - 1rem);
    }
  }

  @property --switch-thumb-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --switch-track-background {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --switch-track-height {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --switch-track-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --switch-color-accent {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --switch-color-border {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --switch-color-border-strong {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --switch-color-border-subtle {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --switch-color-focus-ring {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --switch-color-primary {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --switch-color-text {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --switch-color-text-inverse {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --switch-color-text-subtle {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --switch-font-family-sans {
    syntax: "*";
    inherits: true
  }

  @property --switch-font-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --switch-font-size-caption {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --switch-font-weight-body-regular {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --switch-icon-fill {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --switch-icon-font-family {
    syntax: "*";
    inherits: true
  }

  @property --switch-icon-grad {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --switch-icon-opsz {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --switch-icon-wght {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --switch-control-border-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --switch-focus-ring-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --switch-space-inline {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --switch-line-height {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  :root {
    --switch-color-accent: var(--color-accent);
    --switch-color-border: var(--color-border);
    --switch-color-border-strong: var(--color-border-strong);
    --switch-color-border-subtle: var(--color-border-subtle);
    --switch-color-focus-ring: var(--color-focus-ring);
    --switch-color-primary: var(--color-primary);
    --switch-color-text: var(--color-text);
    --switch-color-text-inverse: var(--color-text-inverse);
    --switch-color-text-subtle: var(--color-text-subtle);
    --switch-font-family-sans: var(--font-family-sans);
    --switch-font-size: var(--font-size);
    --switch-font-size-caption: var(--font-size-caption);
    --switch-font-weight-body-regular: var(--font-weight-body-regular);
    --switch-icon-fill: var(--icon-fill);
    --switch-icon-font-family: var(--icon-font-family);
    --switch-icon-grad: var(--icon-grad);
    --switch-icon-opsz: var(--icon-opsz);
    --switch-icon-wght: var(--icon-wght);
    --switch-control-border-width: var(--layout-control-border-width);
    --switch-focus-ring-size: var(--layout-focus-ring-size);
    --switch-space-inline: var(--layout-space-inline);
    --switch-line-height: var(--font-line-height-body);
    --switch-track-width: calc(var(--layout-control-min-height) + .75rem);
    --switch-track-height: calc((var(--layout-control-min-height) / 2) + .125rem);
    --switch-thumb-size: calc(var(--switch-track-height) - (var(--switch-control-border-width) * 4));
  }

  label:has( > input[type="checkbox"][role="switch"]) {
    align-items: start;
    gap: var(--switch-space-inline);
    color: var(--switch-color-text);
    cursor: pointer;
    font: inherit;
    font-family: var(--switch-font-family-sans);
    font-size: var(--switch-font-size);
    line-height: var(--switch-line-height);
    display: inline-flex;
  }

  label:has( > input[type="checkbox"][role="switch"]:disabled) {
    color: var(--switch-color-text-subtle);
    cursor: not-allowed;
  }

  :is(label, fieldset:has( > label > input[type="checkbox"][role="switch"]) > label) > input[type="checkbox"][role="switch"] {
    --switch-track-background: var(--switch-color-accent);
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    inline-size: var(--switch-track-width);
    block-size: var(--switch-track-height);
    margin: calc((var(--switch-line-height) - var(--switch-track-height)) / 2) 0 0;
    border: var(--switch-control-border-width) solid var(--switch-color-border);
    box-shadow: inset 0 0 0 var(--switch-track-height) var(--switch-track-background);
    cursor: inherit;
    border-radius: 999rem;
    flex: none;
    position: relative;
  }

  :is(label, fieldset:has( > label > input[type="checkbox"][role="switch"]) > label) > input[type="checkbox"][role="switch"]:after {
    content: "Off";
    z-index: 0;
    inline-size: calc(var(--switch-track-width) - var(--switch-thumb-size) - (var(--switch-control-border-width) * 3));
    color: var(--switch-color-border-strong);
    font-family: var(--switch-font-family-sans);
    font-size: var(--switch-font-size-caption);
    font-weight: var(--switch-font-weight-body-regular);
    justify-content: center;
    align-items: center;
    line-height: 1;
    display: flex;
    position: absolute;
    inset-block: 0;
    inset-inline-end: var(--switch-control-border-width);
  }

  :is(label, fieldset:has( > label > input[type="checkbox"][role="switch"]) > label) > input[type="checkbox"][role="switch"]:before {
    content: "";
    z-index: 1;
    inline-size: var(--switch-thumb-size);
    block-size: var(--switch-thumb-size);
    background: var(--switch-color-border);
    border-radius: 50%;
    transition: inset-inline-start .16s, background-color .16s;
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: var(--switch-control-border-width);
    transform: translateY(-50%);
  }

  :is(label, fieldset:has( > label > input[type="checkbox"][role="switch"]) > label) > input[type="checkbox"][role="switch"]:checked {
    --switch-track-background: var(--switch-color-primary);
    border-color: var(--switch-color-primary);
  }

  :is(label, fieldset:has( > label > input[type="checkbox"][role="switch"]) > label) > input[type="checkbox"][role="switch"]:checked:after {
    content: "On";
    inset-inline: var(--switch-control-border-width) auto;
    color: var(--switch-color-text-inverse);
  }

  :is(label, fieldset:has( > label > input[type="checkbox"][role="switch"]) > label) > input[type="checkbox"][role="switch"][data-switch-icons]:after {
    content: attr(data-switch-off-icon);
    font-family: var(--switch-icon-font-family);
    font-size: var(--switch-font-size);
    letter-spacing: normal;
    text-transform: none;
    font-feature-settings: "liga";
    font-variation-settings: "FILL" var(--switch-icon-fill),
    "wght" var(--switch-icon-wght),
    "GRAD" var(--switch-icon-grad),
    "opsz" var(--switch-icon-opsz);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizelegibility;
    direction: ltr;
    font-weight: normal;
  }

  :is(label, fieldset:has( > label > input[type="checkbox"][role="switch"]) > label) > input[type="checkbox"][role="switch"][data-switch-icons]:checked:after {
    content: attr(data-switch-on-icon);
  }

  :is(label, fieldset:has( > label > input[type="checkbox"][role="switch"]) > label) > input[type="checkbox"][role="switch"]:checked:before {
    background: var(--switch-color-accent);
    inset-inline-start: calc(100% - var(--switch-thumb-size) - var(--switch-control-border-width));
  }

  :is(label, fieldset:has( > label > input[type="checkbox"][role="switch"]) > label) > input[type="checkbox"][role="switch"]:focus {
    outline: none;
  }

  :is(label, fieldset:has( > label > input[type="checkbox"][role="switch"]) > label) > input[type="checkbox"][role="switch"]:focus-visible {
    box-shadow: inset 0 0 0 var(--switch-track-height) var(--switch-track-background),
    0 0 0 var(--switch-focus-ring-size) var(--switch-color-focus-ring);
    outline: none;
  }

  :is(label, fieldset:has( > label > input[type="checkbox"][role="switch"]) > label) > input[type="checkbox"][role="switch"]:disabled {
    --switch-track-background: var(--color-accent-disabled);
    border-color: var(--switch-color-border-subtle);
  }

  :is(label, fieldset:has( > label > input[type="checkbox"][role="switch"]) > label) > input[type="checkbox"][role="switch"]:disabled:after {
    color: var(--switch-color-text-subtle);
  }

  :is(label, fieldset:has( > label > input[type="checkbox"][role="switch"]) > label) > input[type="checkbox"][role="switch"]:disabled:before {
    background: var(--switch-color-text-subtle);
  }

  @media (prefers-reduced-motion: reduce) {
    :is(label, fieldset:has( > label > input[type="checkbox"][role="switch"]) > label) > input[type="checkbox"][role="switch"]:before {
      transition: none;
    }
  }

  @property --table-actions-cell-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --table-background {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --table-body-text-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --table-border-style {
    syntax: "<custom-ident>";
    inherits: true;
    initial-value: solid;
  }

  @property --table-border-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --table-cell-padding-block {
    syntax: "*";
    inherits: true
  }

  @property --table-cell-padding-inline {
    syntax: "*";
    inherits: true
  }

  @property --table-cell-padding-inline-start {
    syntax: "*";
    inherits: true
  }

  @property --table-checkbox-cell-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --table-column-expand-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --table-divider-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --table-header-background {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --table-header-column-gap {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --table-header-icon-fill {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --table-header-icon-font-family {
    syntax: "*";
    inherits: true
  }

  @property --table-header-icon-grad {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --table-header-icon-opsz {
    syntax: "<number>";
    inherits: true;
    initial-value: 24;
  }

  @property --table-header-icon-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --table-header-icon-wght {
    syntax: "<number>";
    inherits: true;
    initial-value: 400;
  }

  @property --table-header-text-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --table-font-weight-body-bold {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --table-row-min-height {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  :root, [data-layout-theme="comfortable"] {
    --table-cell-padding-block: calc(1.5rem - var(--layout-control-border-width));
    --table-cell-padding-inline: calc(1.5rem - var(--layout-control-border-width));
    --table-row-min-height: calc(5rem - var(--layout-control-border-width));
  }

  [data-layout-theme="compact"] {
    --table-cell-padding-block: calc(.75rem - var(--layout-control-border-width));
    --table-cell-padding-inline: calc(.75rem - var(--layout-control-border-width));
    --table-row-min-height: calc(3.125rem - var(--layout-control-border-width));
  }

  :root {
    --table-background: var(--color-accent-subtle);
    --table-divider-color: var(--color-border-subtle);
    --table-header-background: var(--color-accent-subtle);
    --table-header-text-color: var(--color-text-subtle);
    --table-body-text-color: var(--color-text);
    --table-border-width: var(--layout-control-border-width);
    --table-border-style: solid;
    --table-checkbox-cell-width: 3.5rem;
    --table-actions-cell-width: 4.5rem;
    --table-column-expand-width: 16ch;
    --table-header-column-gap: var(--layout-control-gap);
    --table-header-icon-font-family: var(--icon-font-family);
    --table-header-icon-size: var(--icon-size);
    --table-header-icon-fill: var(--icon-fill);
    --table-header-icon-wght: var(--icon-wght);
    --table-header-icon-grad: var(--icon-grad);
    --table-header-icon-opsz: var(--icon-opsz);
    --table-cell-padding-inline-start: var(--table-cell-padding-inline);
    --table-font-weight-body-bold: var(--font-weight-body-bold);
  }

  table {
    border-collapse: collapse;
    table-layout: auto;
    background: var(--table-background);
    width: 100%;

    & thead tr, & tbody tr {
      min-height: var(--table-row-min-height);
      border-bottom: var(--table-border-width) var(--table-border-style)
      var(--table-divider-color);
    }

    & th, & td {
      padding: var(--table-cell-padding-block) var(--table-cell-padding-inline);
      text-align: left;
      vertical-align: middle;
      background: var(--table-background);
    }

    & th.table-cell--checkbox, & td.table-cell--checkbox {
      width: var(--table-checkbox-cell-width);
      padding-left: var(--table-cell-padding-inline-start);
      padding-right: calc(var(--table-cell-padding-inline) / 2);
    }

    & th.table-cell--actions, & td.table-cell--actions {
      width: var(--table-actions-cell-width);
      padding-right: var(--table-cell-padding-inline-start);
    }

    & th.table-cell--expand, & td.table-cell--expand {
      width: var(--table-column-expand-width);
    }

    & th {
      background: var(--table-header-background);
      color: var(--table-header-text-color);

      & > * {
        align-items: center;
        gap: var(--table-header-column-gap);
        display: inline-flex;
      }

      & > a {
        color: inherit;
        cursor: pointer;
        text-decoration: none;
      }

      &[aria-sort] > a:after {
        margin-left: var(--table-header-column-gap);
        font-family: var(--table-header-icon-font-family);
        font-size: var(--table-header-icon-size);
        white-space: nowrap;
        vertical-align: middle;
        letter-spacing: normal;
        text-transform: none;
        font-feature-settings: "liga";
        font-variation-settings: "FILL" var(--table-header-icon-fill),
        "wght" var(--table-header-icon-wght),
        "GRAD" var(--table-header-icon-grad),
        "opsz" var(--table-header-icon-opsz);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizelegibility;
        direction: ltr;
        font-style: normal;
        font-weight: normal;
        line-height: 1;
      }

      &[aria-sort="ascending"] > a:after {
        content: "arrow_drop_up";
      }

      &[aria-sort="descending"] > a:after {
        content: "arrow_drop_down";
      }

      &:is([aria-sort="none"], [aria-sort="other"]) > a:after {
        content: "unfold_more";
      }
    }

    & td {
      color: var(--table-body-text-color);
    }
  }

  .table-switcher {
    overflow: auto;
    container-type: inline-size;
  }

  .table-switcher > table {
    min-inline-size: max-content;
  }

  @container (width <= 40rem) {
    .table-switcher > table {
      table-layout: auto;
      min-inline-size: 100%;

      & > thead {
        clip-path: inset(50%);
        white-space: nowrap;
        block-size: 1px;
        inline-size: 1px;
        position: absolute;
        overflow: hidden;
      }

      & > tbody, & > tbody > tr {
        inline-size: 100%;
        display: block;
      }

      & > tbody > tr {
        padding-block: var(--table-cell-padding-block);
      }

      & > tbody > tr > td {
        gap: var(--table-header-column-gap);
        min-height: auto;
        padding-block: calc(var(--table-cell-padding-block) / 2);
        grid-template-columns: minmax(8rem, 40%) minmax(0, 1fr);
        display: grid;
      }

      & > tbody > tr > td:before {
        content: attr(data-label);
        color: var(--table-header-text-color);
        font-weight: var(--table-font-weight-body-bold);
      }
    }
  }

  @property --textarea-border-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --textarea-border-radius {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --textarea-message-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --textarea-color-error-strong {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --textarea-color-focus-ring {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --textarea-color-primary {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --textarea-color-text {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --textarea-color-text-accent {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --textarea-color-text-subtle {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --textarea-font-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --textarea-font-size-caption {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --textarea-control-border-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --textarea-control-gap {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --textarea-control-padding-block {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --textarea-control-padding-inline {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --textarea-focus-ring-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --textarea-space-inline {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --textarea-line-height {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  :root {
    --textarea-color-error-strong: var(--color-error-strong);
    --textarea-color-focus-ring: var(--color-focus-ring);
    --textarea-color-primary: var(--color-primary);
    --textarea-color-text: var(--color-text);
    --textarea-color-text-accent: var(--color-text-accent);
    --textarea-color-text-subtle: var(--color-text-subtle);
    --textarea-font-size: var(--font-size);
    --textarea-font-size-caption: var(--font-size-caption);
    --textarea-control-border-width: var(--layout-control-border-width);
    --textarea-control-gap: var(--layout-control-gap);
    --textarea-control-padding-block: var(--layout-control-padding-block);
    --textarea-control-padding-inline: var(--layout-control-padding-inline);
    --textarea-focus-ring-size: var(--layout-focus-ring-size);
    --textarea-space-inline: var(--layout-space-inline);
    --textarea-line-height: var(--font-line-height-body);
  }

  label:has( > textarea) {
    --textarea-border-color: var(--color-border-subtle);
    --textarea-border-radius: calc(var(--layout-control-radius) / 2);
    --textarea-message-color: var(--textarea-color-text-subtle);
    gap: var(--textarea-control-gap);
    color: var(--textarea-color-text-accent);
    font: inherit;
    font-size: var(--textarea-font-size);
    line-height: var(--textarea-line-height);
    flex-direction: column;
    display: flex;
  }

  label:has( > textarea) > [data-role="label"]:after {
    content: "";
  }

  label:has( > textarea[required]) > [data-role="label"]:after {
    content: " *";
    color: var(--textarea-color-error-strong);
  }

  label > textarea {
    box-sizing: border-box;
    inline-size: 100%;
    padding: var(--textarea-control-padding-block) var(--textarea-control-padding-inline);
    border: var(--textarea-control-border-width) solid var(--textarea-border-color);
    border-radius: var(--textarea-border-radius);
    color: var(--textarea-color-text);
    font: inherit;
    font-size: var(--textarea-font-size);
    line-height: var(--textarea-line-height);
    resize: vertical;
    background-color: #0000;
  }

  label > textarea::placeholder {
    color: var(--textarea-color-text-subtle);
    opacity: 1;
  }

  label > [data-role="feedback"] {
    justify-content: space-between;
    align-items: baseline;
    gap: var(--textarea-space-inline);
    font-size: var(--textarea-font-size-caption);
    line-height: 1.3;
    display: flex;
  }

  label > [data-role="feedback"] > [data-role="message"] {
    color: var(--textarea-message-color);
    display: none;
  }

  label > [data-role="feedback"] > [data-role="message"][data-invalid]:before {
    content: attr(data-invalid);
  }

  label > [data-role="feedback"] > [data-role="limit"] {
    color: var(--textarea-color-text-subtle);
    white-space: nowrap;
    margin-inline-start: auto;
  }

  label:has( > textarea:user-invalid) {
    --textarea-border-color: var(--textarea-color-error-strong);
    --textarea-message-color: var(--textarea-color-error-strong);
  }

  label:has( > textarea:user-invalid) > [data-role="feedback"] > [data-role="message"][data-invalid] {
    display: block;
  }

  label > textarea:focus {
    border-color: var(--textarea-color-primary);
    box-shadow: 0 0 0 var(--textarea-focus-ring-size) var(--textarea-color-focus-ring);
    outline: none;
  }

  @property --tooltip-background {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --tooltip-border-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --tooltip-border-radius {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --tooltip-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --tooltip-margin {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --tooltip-max-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --tooltip-padding {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --tooltip-font-family-sans {
    syntax: "*";
    inherits: true
  }

  @property --tooltip-font-size-caption {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --tooltip-border-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --tooltip-line-height {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  :root {
    --tooltip-font-family-sans: var(--font-family-sans);
    --tooltip-font-size-caption: var(--font-size-caption);
    --tooltip-border-width: var(--layout-surface-border-width);
    --tooltip-line-height: var(--font-line-height-body);
  }

  [data-tooltip][aria-description] {
    --tooltip-border-radius: var(--layout-control-radius);
    --tooltip-border-color: var(--color-border-subtle);
    --tooltip-background: var(--color-accent-subtle);
    --tooltip-color: var(--color-text);
    --tooltip-margin: calc(var(--layout-space-stack) / 2);
    --tooltip-padding: calc(var(--layout-space-inline) * .75);
    --tooltip-max-size: min(20rem, calc(100vw - (var(--layout-space-inline) * 2)));
    position: relative;
  }

  [data-color-theme="dark"] [data-tooltip][aria-description] {
    --tooltip-border-color: var(--color-border-subtle-inverse);
    --tooltip-background: var(--color-primary-strong);
    --tooltip-color: var(--color-text-inverse);
  }

  [data-tooltip][aria-description]:before {
    font-family: var(--tooltip-font-family-sans);
    font-size: var(--tooltip-font-size-caption);
    font-style: normal;
    font-weight: 400;
    line-height: var(--tooltip-line-height);
    letter-spacing: normal;
    text-align: left;
    text-transform: none;
    content: attr(data-tooltip);
    bottom: calc(100% + var(--tooltip-margin));
    z-index: 15;
    padding: var(--tooltip-padding);
    border: var(--tooltip-border-width) solid var(--tooltip-border-color);
    border-radius: var(--tooltip-border-radius);
    background: var(--tooltip-background);
    color: var(--tooltip-color);
    inline-size: max-content;
    max-inline-size: var(--tooltip-max-size);
    overflow-wrap: anywhere;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  [data-tooltip][aria-description][data-placement="bottom"]:before {
    top: calc(100% + var(--tooltip-margin));
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  [data-tooltip][aria-description][data-placement="left"]:before {
    top: 50%;
    right: calc(100% + var(--tooltip-margin));
    bottom: auto;
    left: auto;
    transform: translateY(-50%);
  }

  [data-tooltip][aria-description][data-placement="right"]:before {
    top: 50%;
    bottom: auto;
    right: auto;
    left: calc(100% + var(--tooltip-margin));
    transform: translateY(-50%);
  }

  [data-tooltip][aria-description]:is(:hover, :focus):before {
    opacity: 1;
    visibility: visible;
  }

  @property --font-family-sans {
    syntax: "*";
    inherits: true
  }

  @property --font-size {
    syntax: "<length-percentage>";
    inherits: true;
    initial-value: 0;
  }

  @property --font-line-height-body {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --font-line-height-heading {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --heading-margin-block-end {
    syntax: "<length-percentage>";
    inherits: true;
    initial-value: 0;
  }

  @property --font-size-caption {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --font-size-title {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --font-size-heading-1 {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --font-size-heading-2 {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --font-size-heading-3 {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --font-size-heading-4 {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --font-size-heading-5 {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --font-size-heading-6 {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --font-weight-base {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --font-weight-body-regular {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --font-weight-body-italic {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --font-weight-body-bold {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --font-weight-heading-1 {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --font-weight-heading-2 {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --font-weight-heading-3 {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --font-weight-heading-4 {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --font-weight-heading-5 {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --font-weight-heading-6 {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --line-clamp-lines {
    syntax: "<integer>";
    inherits: false;
    initial-value: 2;
  }

  @property --hgroup-color-supporting {
    syntax: "<color>";
    inherits: true;
    initial-value: #0000;
  }

  @property --hgroup-space {
    syntax: "<length-percentage>";
    inherits: true;
    initial-value: 0;
  }

  :root {
    --font-family-sans: "IBM Plex Sans", Helvetica, Arial, sans-serif;
    --font-size: 1rem;
    --font-line-height-body: 1.5;
    --font-line-height-heading: 1.3;
    --heading-margin-block-end: var(--layout-space-stack);
    --font-size-caption: calc(var(--font-size) * .875);
    --font-size-title: clamp(calc(var(--font-size) * 1.375),
    calc(var(--font-size) * 1.1 + 1vw),
    calc(var(--font-size) * 1.875));
    --font-size-heading-1: calc(var(--font-size) * 2.25);
    --font-size-heading-2: calc(var(--font-size) * 2);
    --font-size-heading-3: calc(var(--font-size) * 1.3125);
    --font-size-heading-4: calc(var(--font-size) * 1.125);
    --font-size-heading-5: var(--font-size);
    --font-size-heading-6: var(--font-size);
    --font-weight-base: 425;
    --font-weight-body-regular: var(--font-weight-base);
    --font-weight-body-italic: var(--font-weight-base);
    --font-weight-body-bold: calc(var(--font-weight-base) + 175);
    --font-weight-heading-1: calc(var(--font-weight-base) + 250);
    --font-weight-heading-2: calc(var(--font-weight-base) + 225);
    --font-weight-heading-3: calc(var(--font-weight-base) + 215);
    --font-weight-heading-4: var(--font-weight-body-bold);
    --font-weight-heading-5: calc(var(--font-weight-base) + 75);
    --font-weight-heading-6: calc(var(--font-weight-base) + 50);
  }

  body {
    font-family: var(--font-family-sans);
    color: var(--color-text);
    font-weight: var(--font-weight-body-regular);
    line-height: var(--font-line-height-body);
  }

  :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-family-sans);
    margin-block-start: 0;
    margin-block-end: var(--heading-margin-block-end);
  }

  h1 {
    color: var(--color-text);
    font-size: var(--font-size-heading-1);
    font-weight: var(--font-weight-heading-1);
    line-height: var(--font-line-height-heading);
    text-transform: uppercase;
  }

  h2 {
    color: var(--color-text-accent);
    font-size: var(--font-size-heading-2);
    font-weight: var(--font-weight-heading-2);
    line-height: var(--font-line-height-heading);
  }

  h3 {
    color: var(--color-text-accent);
    font-size: var(--font-size-heading-3);
    font-weight: var(--font-weight-heading-3);
    line-height: var(--font-line-height-heading);
  }

  h4 {
    color: var(--color-text-accent);
    font-size: var(--font-size-heading-4);
    font-weight: var(--font-weight-heading-4);
    line-height: var(--font-line-height-heading);
    text-transform: uppercase;
  }

  h5 {
    color: var(--color-text-accent);
    font-size: var(--font-size-heading-5);
    font-weight: var(--font-weight-heading-5);
    line-height: var(--font-line-height-heading);
  }

  h6 {
    color: var(--color-text-accent);
    font-size: var(--font-size-heading-6);
    font-style: italic;
    font-weight: var(--font-weight-heading-6);
    line-height: var(--font-line-height-heading);
  }

  hgroup {
    --hgroup-color-supporting: var(--color-text-subtle);
    --hgroup-space: 0px;
    margin: 0;
  }

  hgroup > * {
    margin-block: 0;
  }

  hgroup > * + * {
    margin-block-start: var(--hgroup-space);
  }

  hgroup > :last-child:not(:first-child) {
    color: var(--hgroup-color-supporting);
  }

  a {
    color: var(--color-text-accent);
    text-underline-offset: .1875em;
    text-decoration: underline;
  }

  a:hover {
    color: var(--color-text-accent-strong);
  }

  em, i {
    font-style: italic;
    font-weight: var(--font-weight-body-italic);
  }

  p {
    color: var(--color-text);
    font-weight: var(--font-weight-body-regular);
  }

  small {
    font-size: var(--font-size-caption);
  }

  main > header > p {
    font-size: calc(var(--font-size-caption) * 1.57143);
  }

  blockquote {
    color: var(--color-text);
    font-size: 1.625rem;
    font-weight: var(--font-weight-body-regular);
    quotes: "\"" "\"";
    text-align: center;
    text-wrap: balance;
    line-height: 1.23;
  }

  blockquote:before {
    content: open-quote;
  }

  blockquote:after {
    content: close-quote;
  }

  caption, figcaption {
    color: var(--color-text);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-body-bold);
    letter-spacing: .0625rem;
    text-transform: uppercase;
    line-height: 1.15;
  }

  b, strong {
    font-weight: var(--font-weight-body-bold);
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .line-clamp {
    -webkit-line-clamp: var(--line-clamp-lines);
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }
}