@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-control-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-control-border-width: var(--layout-control-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-control-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 {
  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-hover-scale-inline {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@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-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-action-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);
}

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-border-color: var(--color-primary);
  --button-background: var(--color-primary);
  --button-color: var(--color-text-inverse);
  --button-hover-border-color: var(--button-border-color);
  --button-hover-background: var(--button-background);
  --button-hover-color: var(--button-color);
  --button-hover-scale-inline: 1.04;
  --button-active-border-color: var(--color-primary-strong);
  --button-active-background: var(--color-primary-strong);
  --button-active-color: var(--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);
  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;
  transition: background-color .16s, border-color .16s, color .16s, transform .16s, box-shadow .16s;
  display: inline-flex;
}

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

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

button.tertiary {
  --button-border-color: transparent;
  --button-background: transparent;
  --button-color: var(--color-primary);
  --button-hover-border-color: var(--color-primary-subtle);
  --button-hover-background: transparent;
  --button-hover-color: var(--button-color);
  --button-active-border-color: var(--color-primary-subtle);
  --button-active-background: var(--color-primary-subtle);
  --button-active-color: var(--button-color);
}

button.error {
  --button-border-color: color-mix(in srgb, var(--color-error) 75%, black);
  --button-background: var(--button-border-color);
  --button-color: var(--color-text-inverse);
  --button-hover-border-color: var(--button-border-color);
  --button-hover-background: var(--button-background);
  --button-hover-color: var(--button-color);
  --button-active-border-color: color-mix(in srgb, var(--color-error) 60%, black);
  --button-active-background: var(--button-active-border-color);
}

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

button:hover {
  border-color: var(--button-hover-border-color);
  background-color: var(--button-hover-background);
  color: var(--button-hover-color);
  outline: none;
}

button:not(:disabled, [aria-disabled="true"]):hover {
  transform: scaleX(var(--button-hover-scale-inline));
}

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;
}

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

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

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

button.icon {
  aspect-ratio: 1;
  inline-size: auto;
  padding-inline: var(--button-action-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;
}

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) {
  button {
    transition: none;
  }
}

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

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

@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-shadow {
  syntax: "*";
  inherits: true
}

@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-border-width {
  syntax: "<length>";
  inherits: true;
  initial-value: 0;
}

@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-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-border-width: var(--layout-control-border-width);
  --card-control-gap: var(--layout-control-gap);
  --card-control-min-height: var(--layout-control-min-height);
  --card-space-inline: var(--layout-space-inline);
  --card-space-stack: var(--layout-space-stack);
}

:where(article, figure) {
  --card-border-width: 0px;
  --card-border-color: transparent;
  --card-border-radius: var(--layout-control-radius);
  --card-shadow: var(--layout-shadow);
  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);
  box-shadow: var(--card-shadow);
  margin: 0;
  display: grid;
}

[data-color-theme="dark"] :where(article, figure) {
  --card-border-width: var(--card-control-border-width);
  --card-border-color: var(--color-border-subtle);
  --card-shadow: 0 1.6px 3.6px 0 color-mix(in srgb, var(--card-color-accent) 72%, transparent),
    0 .3px .9px 0 color-mix(in srgb, var(--card-color-accent) 64%, transparent);
}

: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);
  grid-template-columns: var(--alert-icon-size) minmax(0, 1fr);
  align-items: start;
  column-gap: var(--card-space-inline);
  background: var(--alert-surface-background);
  color: var(--alert-surface-color);
}

[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-control-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;
}

@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);
  color: var(--checkbox-color-text-accent);
  font: inherit;
  font-family: var(--checkbox-font-family-sans);
  font-size: var(--checkbox-font-size);
  line-height: var(--checkbox-line-height);
  padding: 0;
}

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

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

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

fieldset:has( > label > input[type="checkbox"]) > label > input[type="checkbox"]: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 {
  syntax: "<color>";
  inherits: true;
  initial-value: #0000;
}

@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-hover-scale-inline {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@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: var(--color-text);
  --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;
  color: var(--chip-color-text);
  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: var(--color-accent-subtle);
  --chip-color: var(--color-text-accent);
  --chip-icon-size: calc(var(--chip-font-size) * 1.25);
  --chip-border-radius: 999rem;
  --chip-hover-scale-inline: 1.04;
  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);
  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, transform .16s, box-shadow .16s;
  display: inline-flex;
}

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:has( > input:is([type="checkbox"], [type="radio"]):not(:checked, :disabled)):hover {
  --chip-background: var(--color-primary-subtle);
}

label.chip:has( > input:is([type="checkbox"], [type="radio"]):not(:disabled)):hover {
  transform: scaleX(var(--chip-hover-scale-inline));
}

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: var(--color-text-inverse);
}

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: 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-shadow {
  syntax: "*";
  inherits: true
}

@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-shadow: 0 24px 80px #0003;
  --dialog-transition-duration: .2s;
}

dialog {
  --dialog-border-width: var(--layout-control-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);
  box-shadow: var(--dialog-shadow);
  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-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-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='%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");
  --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-image: var(--dropdown-icon-source);
  pointer-events: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform .16s;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(0) rotate3d(0, 0, 1, 0);
}

details.dropdown[open] > summary:after {
  transform: translateY(-50%) 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 > a {
  padding: var(--dropdown-control-padding-block) var(--dropdown-control-padding-inline);
  color: var(--dropdown-color-text);
  text-decoration: none;
  display: block;
}

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

@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);
}

[data-color-theme="dark"] {
  --footer-site-background: var(--color-accent-strong);
}

: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: max(calc(100% + (var(--footer-space-inline) * 2)),
    calc(var(--footer-page-min-inline-size) + (var(--footer-space-inline) * 2)));
  margin-inline: calc(var(--footer-space-inline) * -1);
}

: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-landmark-padding-block);
  --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;
  box-shadow: 0 .25rem 1rem #0000001a;
}

: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";
}

body > header:first-of-type {
  inline-size: calc(100% + (var(--header-space-inline) * 2));
  min-inline-size: calc(100% + (var(--header-space-inline) * 2));
  position: relative;
  inset-inline-start: calc(var(--header-space-inline) * -1);
}

: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: 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: 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;
  box-shadow: 0 1rem 2rem #0000002e;
}

: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).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-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;
  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 --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);
}

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

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

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

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

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

:is(form[role="search"], fieldset[role="group"], div[role="group"]) > :is(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, input:is([type="date"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="url"], [type="number"], :not([type]))):first-child {
  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, 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"] {
  flex: 12rem;
}

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

@property --layout-shadow {
  syntax: "*";
  inherits: true
}

@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-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-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-block {
  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-shadow: 0 1.6px 3.6px 0 #0000003d,
      0 .3px .9px 0 #0003;
}

[data-color-theme="dark"] {
  --layout-shadow: none;
}

: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-line-height-size) + (var(--layout-control-padding-block) * 2) + var(--layout-control-border-width)) * 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(1rem - var(--layout-control-border-width));
  --layout-control-padding-inline: calc(1.5rem - var(--layout-control-border-width));
  --layout-action-padding-block: calc(.75rem - 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-line-height-size) + (var(--layout-control-padding-block) * 2) + var(--layout-control-border-width)) * 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(.625rem - var(--layout-control-border-width));
  --layout-control-padding-inline: calc(.75rem - var(--layout-control-border-width));
  --layout-action-padding-block: calc(.5rem - 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);
  min-block-size: 100dvh;
  padding-inline: var(--layout-space-inline);
  background: var(--color-accent);
  flex-direction: column;
  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-line-height-size) +
    (var(--layout-control-padding-block) * 2) +
    var(--layout-control-border-width));
  --nav-sticky-offset: var(--layout-sticky-offset);
}

body > main {
  flex: 1;
  max-inline-size: 60rem;
  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));
}

.cluster {
  align-items: center;
  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%;
  }
}

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

.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);
  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;
}

.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-size {
  syntax: "<length>";
  inherits: true;
  initial-value: 0;
}

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

:is(button, article)[aria-busy="true"]:before {
  --loading-color: currentColor;
  --loading-stroke: calc(var(--layout-control-border-width) * 1.5);
  content: "";
  inline-size: var(--loading-size, 1rem);
  block-size: var(--loading-size, 1rem);
  background: conic-gradient(from 0deg,
    var(--loading-color, currentColor) 0deg 30deg,
    transparent 30deg 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: block;
}

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

@keyframes loading-shape {
  0% {
    background: conic-gradient(from 0deg,
      var(--loading-color, currentColor) 0deg 30deg,
      transparent 30deg 1turn);
  }

  50% {
    background: conic-gradient(from 0deg,
      var(--loading-color, currentColor) 0deg 300deg,
      transparent 300deg 1turn);
  }

  100% {
    background: conic-gradient(from 360deg,
      var(--loading-color, currentColor) 0deg 30deg,
      transparent 30deg 1turn);
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(button, article)[aria-busy="true"]:before {
    background: conic-gradient(from 0deg,
      var(--loading-color, currentColor) 0deg 270deg,
      transparent 270deg 1turn);
    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;
}

: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-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:not(:where([aria-label="breadcrumb"], .pagination, [aria-label="Legal links"], .toc, [popover], footer nav)) {
  z-index: 10;
  box-sizing: border-box;
  inline-size: max(calc(100% + (var(--nav-space-inline) * 2)),
    calc(var(--nav-page-min-inline-size) + (var(--nav-space-inline) * 2)));
  margin-inline: calc(var(--nav-space-inline) * -1);
  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);
  }

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

body > nav:not([popover]) {
  z-index: 30;
}

nav.toc {
  align-self: start;
}

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

nav.toc > ul {
  gap: var(--nav-control-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

nav.toc a {
  padding-block: calc(var(--nav-control-padding-block) / 2);
  color: var(--nav-link-color);
  text-decoration: none;
  display: block;
}

nav.toc a:hover {
  color: var(--nav-link-hover-color);
  text-decoration: underline;
}

@media (width >= 48rem) {
  nav.toc {
    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;
  }
}

@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);
  color: var(--radio-color-text-accent);
  font: inherit;
  font-family: var(--radio-font-family-sans);
  font-size: var(--radio-font-size);
  line-height: var(--radio-line-height);
  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-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-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-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-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);
  font: inherit;
  font-size: var(--select-font-size);
  line-height: var(--select-line-height);
  background-color: #0000;
}

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, label > select option {
  color: var(--select-color-text);
}

@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-text-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #0000;
}

@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-cell-padding-inline-start: var(--table-cell-padding-inline);
}

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;
    }
  }

  & 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(--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-shadow {
  syntax: "*";
  inherits: true
}

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

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

@property --tooltip-control-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-control-border-width: var(--layout-control-border-width);
  --tooltip-line-height: var(--font-line-height-body);
}

[data-tooltip][aria-description] {
  --tooltip-shadow: var(--layout-shadow);
  --tooltip-border-radius: var(--layout-control-radius);
  --tooltip-border-color: transparent;
  --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-control-border-width) solid var(--tooltip-border-color);
  border-radius: var(--tooltip-border-radius);
  background: var(--tooltip-background);
  color: var(--tooltip-color);
  box-shadow: var(--tooltip-shadow);
  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 --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;
}

: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;
  --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);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-sans);
}

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);
}

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;
  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);
}