:root {
  --accordion-background: var(--color-surface-default);
  --accordion-summary-color: var(--color-text-default);
  --accordion-content-color: var(--color-text-default);
  --accordion-accent-color: var(--color-brand-primary);
  --accordion-icon-size: var(--layout-control-icon-size);
  --accordion-content-indent: calc(
    var(--layout-control-padding-inline) + var(--accordion-icon-size) + var(--layout-space-inline)
  );
}

details {
  background: var(--accordion-background);
  overflow: clip;
}

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

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

details > summary::after {
  content: "expand_more";
  flex: none;
  order: -1;
  color: var(--accordion-accent-color);
  font-family: var(--icon-font-family);
  font-size: var(--accordion-icon-size);
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  direction: ltr;
  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;
  transition: rotate 200ms ease;
}

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

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

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

details > :not(summary) {
  padding-block: var(--layout-control-padding-block);
  padding-inline: var(--layout-control-padding-inline);
  padding-inline-start: var(--accordion-content-indent);
  color: var(--accordion-content-color);
}

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

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

details > :not(summary) > :last-child {
  margin-bottom: 0;
}
:root {
  --banner-background: var(--color-brand-strong);
  --banner-text-color: var(--color-surface-default);
  --banner-rule-color: var(--color-surface-default);
  --banner-rule-width: calc(var(--layout-control-border-width) / 4);
  --banner-mark-size: clamp(5rem, 4rem + 6vw, 7rem);
  --banner-caption-size: var(--font-size-small);
  --banner-title-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  --banner-title-weight: 300;
}

:is(header[role="banner"], header.banner) {
  display: grid;
  grid-template-columns: var(--banner-mark-size) minmax(0, 1fr);
  grid-template-areas:
    "mark breadcrumb"
    "mark title"
    "mark subtitle";
  column-gap: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
  row-gap: 0.75rem;
  align-items: center;
  padding-block: var(--layout-landmark-padding-block);
  padding-inline: 0;
  border-bottom: var(--banner-rule-width) solid var(--banner-rule-color);
  background: var(--banner-background);
  box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 10%);
  color: var(--banner-text-color);
}

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

:is(header[role="banner"], header.banner):not(:has(> p)) {
  grid-template-areas:
    "mark breadcrumb"
    "mark title";
}

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

body > header[role="banner"] {
  inline-size: calc(100% + (var(--layout-space-inline) * 2));
  margin-inline: calc(var(--layout-space-inline) * -1);
}

:is(header[role="banner"], header.banner) > * {
  min-inline-size: 0;
}

:is(header[role="banner"], header.banner) :is(a, a:link, a:visited) {
  color: inherit;
}

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

:is(header[role="banner"], header.banner) > a:first-child > :is(img, svg) {
  max-inline-size: 100%;
  max-block-size: 100%;
}

:is(header[role="banner"], header.banner) > p {
  grid-area: subtitle;
  margin: 0;
  color: var(--banner-text-color);
  font-size: var(--banner-caption-size);
  font-weight: var(--font-weight-body-bold);
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

:is(header[role="banner"], header.banner) > :is(h1, h2, h3, h4, h5, h6) {
  grid-area: title;
  margin: 0;
  color: inherit;
  font-size: var(--banner-title-size);
  font-weight: var(--banner-title-weight);
  line-height: 1.1;
  text-wrap: balance;
}

:is(header[role="banner"], header.banner) > nav[aria-label="breadcrumb"] {
  grid-area: breadcrumb;
  overflow-x: auto;
  overflow-y: hidden;
  --nav-link-color: var(--color-text-muted-inverse);
  --nav-link-hover-color: var(--color-text-muted-inverse);
  --nav-breadcrumb-current-color: var(--color-text-muted-inverse);
  --nav-breadcrumb-separator-color: var(--color-text-muted-inverse);
}

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

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

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

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

  :is(header[role="banner"], header.banner) {
    row-gap: 0.5rem;
  }
}
button {
  --button-border-width: var(--layout-control-border-width);
  --button-border-space: calc(var(--button-border-width) * 2);
  --button-height: max(
    var(--layout-control-min-height),
    calc(var(--line-height-default) + (var(--layout-action-padding-block) * 2) + var(--button-border-space))
  );
  --button-icon-size: var(--layout-control-icon-size);
  --button-border-color: transparent;
  --button-background: var(--color-brand-primary);
  --button-color: var(--color-surface-default);
  --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(--button-hover-border-color);
  --button-active-background: var(--color-brand-strong);
  --button-active-color: var(--button-color);
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: var(--layout-control-gap);
  padding: var(--layout-action-padding-block) var(--layout-action-padding-inline);
  min-height: var(--button-height);
  border: var(--button-border-width) solid var(--button-border-color);
  border-radius: var(--layout-control-radius);
  background-color: var(--button-background);
  color: var(--button-color);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-default);
  font-weight: 500;
  line-height: var(--line-height-default);
  text-align: center;
  white-space: nowrap;
}

button.secondary {
  --button-border-color: var(--color-brand-primary);
  --button-background: transparent;
  --button-color: var(--color-brand-primary);
  --button-active-border-color: var(--color-brand-strong);
  --button-active-background: var(--color-brand-strong);
  --button-active-color: var(--color-surface-default);
}

button.tertiary {
  --button-background: transparent;
  --button-color: var(--color-brand-primary);
  --button-active-background: color-mix(in srgb, var(--color-brand-primary) 18%, var(--color-surface-default));
  --button-active-color: var(--color-brand-strong);
}

button.error {
  --button-background: var(--color-error);
  --button-color: var(--color-surface-default);
  --button-active-background: var(--color-error-strong);
}

button[aria-active="true"] {
  --button-border-color: transparent;
  --button-background: var(--color-brand-primary);
  --button-color: var(--color-surface-default);
  --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(--button-hover-border-color);
  --button-active-background: var(--color-brand-strong);
  --button-active-color: var(--button-color);
}

button:hover {
  outline: none;
}

button:focus-visible {
  outline: none;
  border-color: var(--button-hover-border-color);
  background-color: var(--button-hover-background);
  color: var(--button-hover-color);
  box-shadow: 0 0 0 var(--layout-focus-ring-size) var(--color-focus-ring-primary);
}

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-border-color);
  background-color: var(--color-surface-disabled);
  color: var(--color-text-disabled);
  box-shadow: none;
  cursor: not-allowed;
}

button:has(> .icon),
button.icon {
  padding-block: max(0px, calc((var(--button-height) - var(--button-icon-size) - var(--button-border-space)) / 2));
}

button.icon {
  inline-size: var(--button-height);
  padding-inline: max(0px, calc((var(--button-height) - var(--button-icon-size) - var(--button-border-space)) / 2));
  font-family: var(--icon-font-family);
  font-style: normal;
  font-weight: normal;
  font-size: var(--button-icon-size);
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  direction: ltr;
  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;
  --icon-opsz: 32;
}

button > .icon {
  padding-right: calc(var(--layout-action-padding-inline) / 4);
  font-size: var(--button-icon-size);
  --icon-opsz: 32;
}
article {
  box-sizing: border-box;
  display: grid;
  gap: var(--layout-space-stack);
  padding-block: var(--layout-space-stack);
  padding-inline: var(--layout-space-inline);
  border-radius: var(--layout-control-radius);
  background: var(--color-surface-default);
  color: var(--color-text-default);
  box-shadow: 0 10px 20px 0 rgb(0 0 0 / 5%);
}

article > header {
  display: grid;
  gap: var(--layout-control-gap);
}

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

article > footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--layout-space-inline);
}

article > :first-child {
  margin-top: 0;
}

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

fieldset:has(> label > input[type="checkbox"]) > legend {
  margin: 0 0 var(--layout-control-gap);
  padding: 0;
  color: var(--color-brand-primary);
  font: inherit;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-default);
  font-weight: 500;
  line-height: var(--line-height-default);
}

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

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

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

fieldset:has(> label > input[type="checkbox"]) > label > input[type="checkbox"]:focus-visible {
  outline: var(--layout-control-border-width) solid var(--color-brand-primary);
  outline-offset: var(--layout-focus-ring-size);
}
code,
pre {
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Consolas, "Liberation Mono", monospace;
}

code {
  font-size: 0.9375em;
}

pre {
  overflow-x: auto;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--layout-control-radius);
  background: var(--color-neutral-canvas);
  color: var(--color-text-default);
}

pre code {
  display: block;
  line-height: 1.5;
  white-space: pre;
}

.hljs {
  background: transparent;
  color: inherit;
}

pre code.hljs {
  padding: 0;
}
:root,
[data-color-theme="light"] {
  --color-brand-primary: #0047ba;
  --color-brand-strong: #002e5d;
  --color-surface-default: #ffffff;
  --color-surface-disabled: #e6e6e6;
  --color-text-default: #141414;
  --color-text-disabled: #666666;
  --color-text-muted: #666666;
  --color-text-muted-inverse: rgb(255 255 255 / 72%);
  --color-border-subtle: #c5c5c5;
  --color-focus-ring-primary: rgb(0 71 186 / 14%);
  --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-neutral: #8f8f8f;
  --color-neutral-strongest: color-mix(in srgb, var(--color-neutral) 16%, black);
  --color-neutral-strong: color-mix(in srgb, var(--color-neutral) 74%, black);
  --color-neutral-subtle: color-mix(in srgb, var(--color-neutral) 58%, white);
  --color-neutral-surface: color-mix(in srgb, var(--color-neutral) 20%, white);
  --color-neutral-canvas: color-mix(in srgb, var(--color-neutral) 8%, white);
}

.bg-brand-primary {
  background-color: var(--color-brand-primary);
}

.bg-brand-strong {
  background-color: var(--color-brand-strong);
}

.bg-surface-default {
  background-color: var(--color-surface-default);
}

.bg-surface-disabled {
  background-color: var(--color-surface-disabled);
}

.bg-text-default {
  background-color: var(--color-text-default);
}

.bg-text-disabled {
  background-color: var(--color-text-disabled);
}

.bg-text-muted {
  background-color: var(--color-text-muted);
}

.bg-text-muted-inverse {
  background-color: var(--color-text-muted-inverse);
}

.bg-border-subtle {
  background-color: var(--color-border-subtle);
}

.bg-focus-ring-primary {
  background-color: var(--color-focus-ring-primary);
}

.bg-info {
  background-color: var(--color-info);
}

.bg-info-strong {
  background-color: var(--color-info-strong);
}

.bg-info-subtle {
  background-color: var(--color-info-subtle);
}

.bg-success {
  background-color: var(--color-success);
}

.bg-success-strong {
  background-color: var(--color-success-strong);
}

.bg-success-subtle {
  background-color: var(--color-success-subtle);
}

.bg-warning {
  background-color: var(--color-warning);
}

.bg-warning-strong {
  background-color: var(--color-warning-strong);
}

.bg-warning-subtle {
  background-color: var(--color-warning-subtle);
}

.bg-error {
  background-color: var(--color-error);
}

.bg-error-strong {
  background-color: var(--color-error-strong);
}

.bg-error-subtle {
  background-color: var(--color-error-subtle);
}

.bg-neutral {
  background-color: var(--color-neutral);
}

.bg-neutral-strongest {
  background-color: var(--color-neutral-strongest);
}

.bg-neutral-strong {
  background-color: var(--color-neutral-strong);
}

.bg-neutral-subtle {
  background-color: var(--color-neutral-subtle);
}

.bg-neutral-surface {
  background-color: var(--color-neutral-surface);
}

.bg-neutral-canvas {
  background-color: var(--color-neutral-canvas);
}

.text-brand-primary {
  color: var(--color-brand-primary);
}

.text-brand-strong {
  color: var(--color-brand-strong);
}

.text-surface-default {
  color: var(--color-surface-default);
}

.text-surface-disabled {
  color: var(--color-surface-disabled);
}

.text-default {
  color: var(--color-text-default);
}

.text-disabled {
  color: var(--color-text-disabled);
}

.text-muted {
  color: var(--color-text-muted);
}

.text-muted-inverse {
  color: var(--color-text-muted-inverse);
}

.text-border-subtle {
  color: var(--color-border-subtle);
}

.text-focus-ring-primary {
  color: var(--color-focus-ring-primary);
}

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

.text-info-strong {
  color: var(--color-info-strong);
}

.text-info-subtle {
  color: var(--color-info-subtle);
}

.text-success {
  color: var(--color-success);
}

.text-success-strong {
  color: var(--color-success-strong);
}

.text-success-subtle {
  color: var(--color-success-subtle);
}

.text-warning {
  color: var(--color-warning);
}

.text-warning-strong {
  color: var(--color-warning-strong);
}

.text-warning-subtle {
  color: var(--color-warning-subtle);
}

.text-error {
  color: var(--color-error);
}

.text-error-strong {
  color: var(--color-error-strong);
}

.text-error-subtle {
  color: var(--color-error-subtle);
}

.text-neutral {
  color: var(--color-neutral);
}

.text-neutral-strongest {
  color: var(--color-neutral-strongest);
}

.text-neutral-strong {
  color: var(--color-neutral-strong);
}

.text-neutral-subtle {
  color: var(--color-neutral-subtle);
}

.text-neutral-surface {
  color: var(--color-neutral-surface);
}

.text-neutral-canvas {
  color: var(--color-neutral-canvas);
}
:root {
  --dialog-max-inline-size: 32rem;
  --dialog-backdrop-color: rgb(18 24 38 / 48%);
  --dialog-shadow: 0 24px 80px rgb(0 0 0 / 20%);
  --dialog-translate-offset: 25vh;
  --dialog-transition-duration: 400ms;
}

dialog {
  box-sizing: border-box;
  inline-size: min(var(--dialog-max-inline-size), calc(100vw - (var(--layout-space-inline) * 2)));
  max-inline-size: 100%;
  margin: auto;
  padding: 0;
  border: var(--layout-control-border-width) solid var(--color-border-subtle);
  border-radius: calc(var(--layout-control-radius) * 4);
  background: var(--color-surface-default);
  color: var(--color-text-default);
  box-shadow: var(--dialog-shadow);
  opacity: 0;
  translate: 0 var(--dialog-translate-offset);
  transition-property: translate, opacity, display;
  transition-duration: var(--dialog-transition-duration);
  transition-behavior: allow-discrete;
}

dialog[open] {
  opacity: 1;
  translate: 0 0;

  @starting-style {
    opacity: 0;
    translate: 0 calc(var(--dialog-translate-offset) * -1);
  }
}

dialog::backdrop {
  background: var(--dialog-backdrop-color);
  backdrop-filter: blur(4px);
}

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

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

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

dialog > form[method="dialog"] > header > p {
  grid-column: 1;
  margin: 0;
  color: var(--color-text-default);
}

dialog > form[method="dialog"] > header > button:last-child {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
}

dialog > form[method="dialog"] > footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--layout-space-inline);
}

@media (prefers-reduced-motion) {
  dialog {
    transition: none;
  }
}
label:has(> input[type="file"]) {
  --file-border-color: var(--color-border-subtle);
  --file-message-color: var(--color-text-muted);
  display: flex;
  flex-direction: column;
  gap: var(--layout-control-gap);
  color: var(--color-brand-primary);
  font: inherit;
  font-size: var(--font-size-default);
  line-height: var(--line-height-default);
}

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

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

label > input[type="file"] {
  --file-selector-radius: max(0px, calc(var(--layout-control-radius) - var(--layout-control-border-width)));
  box-sizing: border-box;
  inline-size: 100%;
  display: flex;
  min-height: var(--layout-control-min-height);
  padding: var(--layout-control-padding-block) var(--layout-control-padding-inline);
  border: var(--layout-control-border-width) solid var(--file-border-color);
  border-radius: var(--layout-control-radius);
  background-color: var(--color-surface-default);
  color: var(--color-text-default);
  font: inherit;
  font-size: var(--font-size-default);
  line-height: var(--line-height-default);
  cursor: pointer;
}

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

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

label > input[type="file"]::file-selector-button {
  box-sizing: border-box;
  margin: calc(-1 * var(--layout-control-padding-block)) var(--layout-space-inline)
    calc(-1 * var(--layout-control-padding-block)) calc(-1 * var(--layout-control-padding-inline));
  padding: var(--layout-action-padding-block) var(--layout-action-padding-inline);
  border: var(--layout-control-border-width) solid var(--color-brand-primary);
  border-radius: 0;
  border-start-start-radius: var(--file-selector-radius);
  border-end-start-radius: var(--file-selector-radius);
  background-color: transparent;
  color: var(--color-brand-primary);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-default);
  font-weight: 500;
  line-height: var(--line-height-default);
  white-space: nowrap;
  cursor: pointer;
}

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

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

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

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

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

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

label > input[type="file"]::-webkit-file-upload-button {
  box-sizing: border-box;
  margin: calc(-1 * var(--layout-control-padding-block)) var(--layout-space-inline)
    calc(-1 * var(--layout-control-padding-block)) calc(-1 * var(--layout-control-padding-inline));
  padding: var(--layout-action-padding-block) var(--layout-action-padding-inline);
  border: var(--layout-control-border-width) solid var(--color-brand-primary);
  border-radius: 0;
  border-start-start-radius: var(--file-selector-radius);
  border-end-start-radius: var(--file-selector-radius);
  background-color: transparent;
  color: var(--color-brand-primary);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-default);
  font-weight: 500;
  line-height: var(--line-height-default);
  white-space: nowrap;
  cursor: pointer;
}
:root {
  --footer-background: var(--color-brand-strong);
  --footer-text-color: var(--color-surface-default);
  --footer-link-color: var(--color-surface-default);
  --footer-link-hover-color: var(--color-text-muted-inverse);
  --footer-border-color: color-mix(in srgb, var(--color-surface-default) 20%, transparent);
  --footer-mark-size: var(--banner-mark-size);
  --footer-legal-size: var(--font-size-small);
}

:is(footer[role="contentinfo"], footer.footer) {
  box-sizing: border-box;
  display: grid;
  gap: var(--layout-space-stack);
  grid-template-columns: var(--footer-mark-size) minmax(0, 1fr) var(--footer-mark-size);
  column-gap: var(--layout-space-inline);
  align-items: center;
  padding-inline: var(--layout-space-inline);
  border-top: var(--layout-control-border-width) solid var(--footer-border-color);
  background: var(--footer-background);
  color: var(--footer-text-color);
}

body > footer[role="contentinfo"] {
  inline-size: calc(100% + (var(--layout-space-inline) * 2));
  margin-inline: calc(var(--layout-space-inline) * -1);
}

:is(footer[role="contentinfo"], footer.footer) > * {
  min-inline-size: 0;
  margin: 0;
}

:is(footer[role="contentinfo"], footer.footer) > a:first-child {
  grid-column: 1;
  display: grid;
  place-items: center;
  inline-size: var(--footer-mark-size);
  min-block-size: var(--footer-mark-size);
  padding: 1.5rem;
  box-sizing: border-box;
}

:is(footer[role="contentinfo"], footer.footer) > a:first-child > :is(img, svg) {
  max-inline-size: 100%;
  max-block-size: 100%;
}

:is(footer[role="contentinfo"], footer.footer) > [data-role="content"] {
  grid-column: 2;
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  text-align: center;
}

:is(footer[role="contentinfo"], footer.footer) > [data-role="content"] > * {
  margin: 0;
}

:is(footer[role="contentinfo"], footer.footer) > [data-role="content"] > p:first-child {
  color: inherit;
  font-size: var(--font-size-default);
  font-weight: var(--font-weight-body-regular);
  line-height: 1.3;
  text-transform: none;
}

:is(footer[role="contentinfo"], footer.footer) > [data-role="content"] > p + p {
  color: var(--color-text-muted-inverse);
  font-size: var(--footer-legal-size);
}

:is(footer[role="contentinfo"], footer.footer) > [data-role="content"] > nav > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

:is(footer[role="contentinfo"], footer.footer) > [data-role="content"] > nav li {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

:is(footer[role="contentinfo"], footer.footer) > [data-role="content"] > nav li + li::before {
  content: "|";
  margin-inline: 0.5rem;
  color: var(--color-text-muted-inverse);
}

:is(footer[role="contentinfo"], footer.footer) :is(a, a:link, a:visited) {
  color: var(--footer-link-color);
}

:is(footer[role="contentinfo"], footer.footer) a:hover {
  color: var(--footer-link-hover-color);
}

@media (max-width: 47.999rem) {
  :is(footer[role="contentinfo"], footer.footer) {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  :is(footer[role="contentinfo"], footer.footer) > a:first-child {
    grid-column: auto;
    grid-row: 1;
    min-block-size: auto;
    padding: 0.75rem 1rem;
  }

  :is(footer[role="contentinfo"], footer.footer) > [data-role="content"] {
    grid-column: auto;
    grid-row: 2;
    inline-size: 100%;
  }
}
:root {
  --icon-font-family: "Material Symbols Rounded", sans-serif;
  --icon-size: 2rem;
  --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);
  line-height: 1;
  display: inline-block;
  white-space: nowrap;
  vertical-align: middle;
  letter-spacing: normal;
  text-transform: none;
  direction: ltr;
  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;
}

.icon.fill {
  --icon-fill: 1;
}
label:has(> input:is(
  [type="date"],
  [type="email"],
  [type="password"],
  [type="search"],
  [type="tel"],
  [type="text"],
  [type="url"],
  [type="number"],
  :not([type])
)) {
  --input-border-color: var(--color-border-subtle);
  --input-message-color: var(--color-text-muted);
  display: flex;
  flex-direction: column;
  gap: var(--layout-control-gap);
  color: var(--color-brand-primary);
  font: inherit;
  font-size: var(--font-size-default);
  line-height: var(--line-height-default);
}

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

label:has(> input:is(
  [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(--color-error-strong);
}

label > input:is(
  [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="date"],
  [type="email"],
  [type="password"],
  [type="search"],
  [type="tel"],
  [type="text"],
  [type="url"],
  [type="number"],
  :not([type])
) {
  box-sizing: border-box;
  padding: var(--layout-control-padding-block) var(--layout-control-padding-inline);
  border: var(--layout-control-border-width) solid var(--input-border-color, var(--color-border-subtle));
  border-radius: var(--layout-control-radius);
  background-color: var(--color-surface-default);
  color: var(--color-text-default);
  font: inherit;
  font-size: var(--font-size-default);
  line-height: var(--line-height-default);
}

label > input:is(
  [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="date"],
  [type="email"],
  [type="password"],
  [type="search"],
  [type="tel"],
  [type="text"],
  [type="url"],
  [type="number"],
  :not([type])
)::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

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

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

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

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

label:has(> input:is(
  [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="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="date"],
  [type="email"],
  [type="password"],
  [type="search"],
  [type="tel"],
  [type="text"],
  [type="url"],
  [type="number"],
  :not([type])
):focus {
  outline: none;
  border-color: var(--color-brand-primary);
  box-shadow: 0 0 0 var(--layout-focus-ring-size) var(--color-focus-ring-primary);
}
:root,
[data-layout-theme="comfortable"] {
  --layout-safe-area-top: env(safe-area-inset-top, 0px);
  --layout-space-stack: 1rem;
  --layout-space-inline: 1rem;
  --layout-section-margin-block-end: clamp(2rem, 1.5rem + 2.5vw, 4rem);
  --layout-landmark-padding-block: clamp(1rem, 0.5rem + 2.5vw, 3rem);
  --layout-sticky-offset: var(--layout-safe-area-top);
  --layout-anchor-scroll-offset: calc(
    var(--layout-safe-area-top) +
    ((var(--line-height-default) + (var(--layout-control-padding-block) * 2) + var(--layout-control-border-width)) * 2)
  );
  --layout-control-gap: 0.25rem;
  --layout-control-icon-size: calc(var(--font-size-default) * 2);
  --layout-control-border-width: 0.125rem;
  --layout-focus-ring-size: 0.25rem;
  /* Padding tokens are authored as target occupied space minus the reserved border width. */
  --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(1rem - var(--layout-control-border-width));
  --layout-action-padding-inline: calc(2rem - var(--layout-control-border-width));
  --layout-control-min-height: 3rem;
  --layout-control-radius: 0.25rem;
}

[data-layout-theme="compact"] {
  --layout-safe-area-top: env(safe-area-inset-top, 0px);
  --layout-space-stack: 0.5rem;
  --layout-space-inline: 0.75rem;
  --layout-section-margin-block-end: clamp(1rem, 0.75rem + 1.25vw, 2rem);
  --layout-landmark-padding-block: clamp(0.5rem, 0.25rem + 1.25vw, 1.5rem);
  --layout-sticky-offset: var(--layout-safe-area-top);
  --layout-anchor-scroll-offset: calc(
    var(--layout-safe-area-top) +
    ((var(--line-height-default) + (var(--layout-control-padding-block) * 2) + var(--layout-control-border-width)) * 2)
  );
  --layout-control-gap: 0.25rem;
  --layout-control-icon-size: calc(var(--font-size-default) * 2);
  --layout-control-border-width: 0.125rem;
  --layout-focus-ring-size: 0.25rem;
  --layout-control-padding-block: calc(0.5rem - var(--layout-control-border-width));
  --layout-control-padding-inline: calc(0.75rem - var(--layout-control-border-width));
  --layout-action-padding-block: calc(0.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: 0.25rem;
}

body {
  margin: 0;
  padding-inline: var(--layout-space-inline);
}

html {
  scroll-behavior: smooth;
}

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

body:has(> nav[aria-label="primary"].sticky) {
  --layout-sticky-offset: calc(
    var(--layout-safe-area-top) +
    var(--line-height-default) +
    (var(--layout-control-padding-block) * 2) +
    var(--layout-control-border-width)
  );
}

body > main {
  max-inline-size: 60rem;
  margin-inline: auto;
}

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

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

body > :is(header, main, footer) {
  padding-block: var(--layout-landmark-padding-block);
}

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

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

.cluster > * {
  margin: 0;
}

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

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

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

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

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

.sticky {
  position: sticky;
  top: var(--layout-sticky-offset);
}

.no-gap {
  gap: 0;
}

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

fieldset[role="group"] {
  margin: 0;
  padding: 0;
  border: 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])
  )
) {
  position: relative;
  min-inline-size: 0;
  border-radius: 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])
  )
):not(:first-child) {
  margin-inline-start: calc(-1 * var(--layout-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(--layout-control-radius);
  border-end-start-radius: var(--layout-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(--layout-control-radius);
  border-end-end-radius: var(--layout-control-radius);
}

form[role="search"] > input[type="search"] {
  flex: 1 1 12rem;
}

.grid {
  --grid-column-gap: var(--layout-space-inline);
  --grid-row-gap: var(--layout-space-stack);
  --grid-min-column-size: 16rem;
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--grid-column-gap);
  row-gap: var(--grid-row-gap);
}

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

@media (min-width: 48rem) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min-column-size)), 1fr));
  }
}

.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;
  display: inline-block;
  inline-size: 100%;
  margin-block-end: var(--masonry-row-gap);
  vertical-align: top;
}
:root {
  --nav-border-color: var(--color-border-subtle);
  --nav-link-color: var(--color-text-default);
  --nav-link-hover-color: var(--color-brand-primary);
  --nav-link-current-color: var(--color-brand-primary);
  --nav-tab-current-background: color-mix(in srgb, var(--color-brand-primary) 12%, var(--color-surface-default));
  --nav-breadcrumb-separator-color: var(--color-text-muted);
  --nav-breadcrumb-current-color: var(--color-text-default);
}

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

  & > :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 {
    outline: none;
    box-shadow: 0 0 0 var(--layout-focus-ring-size) var(--color-focus-ring-primary);
  }
}

nav[aria-label="primary"] {
  overflow-x: auto;
  overflow-y: hidden;

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

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

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

nav[aria-label="primary"].sticky {
  top: 0;
  z-index: 10;
  box-sizing: border-box;
  inline-size: calc(100% + (var(--layout-space-inline) * 2));
  margin-inline: calc(var(--layout-space-inline) * -1);
  padding-top: var(--layout-safe-area-top);
  background: var(--color-surface-default);
}

nav[aria-label="breadcrumb"] {
  & > ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
  }

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

  & > ol > li + li::before {
    content: "|";
    margin-inline: calc(var(--layout-control-gap) * 2);
    color: var(--nav-breadcrumb-separator-color);
  }

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

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

  & > ol > li > :is(a[aria-current], span[aria-current]) {
    color: var(--nav-breadcrumb-current-color);
    font-weight: 500;
  }
}
nav[aria-label="pagination"] {
  --pagination-icon-color: var(--color-text-default);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--layout-control-gap);
  min-height: var(--layout-control-min-height);
  padding: var(--layout-control-padding-block) var(--layout-control-padding-inline);
  background: var(--color-surface-default);
  color: var(--color-text-default);

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

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

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

fieldset:has(> label > input[type="radio"]) > legend {
  margin: 0 0 var(--layout-control-gap);
  padding: 0;
  color: var(--color-brand-primary);
  font: inherit;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-default);
  font-weight: 500;
  line-height: var(--line-height-default);
}

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

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

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

fieldset:has(> label > input[type="radio"]) > label > input[type="radio"]:focus-visible {
  outline: var(--layout-control-border-width) solid var(--color-brand-primary);
  outline-offset: var(--layout-focus-ring-size);
}
:root {
  --range-track-size: 0.5rem;
  --range-thumb-size: 1.25rem;
}

label:has(> input[type="range"]) {
  display: flex;
  flex-direction: column;
  gap: var(--layout-control-gap);
  color: var(--color-brand-primary);
  font: inherit;
  font-size: var(--font-size-default);
  line-height: var(--line-height-default);
}

label > input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  inline-size: 100%;
  min-block-size: var(--layout-control-min-height);
  margin: 0;
  border: 0;
  border-radius: var(--layout-control-radius);
  background: transparent;
  cursor: pointer;
}

label > input[type="range"]:focus {
  outline: none;
}

label > input[type="range"]:focus-visible {
  box-shadow: 0 0 0 var(--layout-focus-ring-size) var(--color-focus-ring-primary);
}

label > input[type="range"]::-webkit-slider-runnable-track {
  height: var(--range-track-size);
  border-radius: 999px;
  background: var(--color-border-subtle);
}

label > input[type="range"]::-moz-range-track {
  height: var(--range-track-size);
  border: 0;
  border-radius: 999px;
  background: var(--color-border-subtle);
}

label > input[type="range"]::-moz-range-progress {
  height: var(--range-track-size);
  border-radius: 999px;
  background: var(--color-brand-primary);
}

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(--layout-control-border-width) solid var(--color-surface-default);
  border-radius: 50%;
  background: var(--color-brand-primary);
}

label > input[type="range"]::-moz-range-thumb {
  inline-size: var(--range-thumb-size);
  block-size: var(--range-thumb-size);
  border: var(--layout-control-border-width) solid var(--color-surface-default);
  border-radius: 50%;
  background: var(--color-brand-primary);
}

label > [data-role="range-limits"] {
  display: flex;
  justify-content: space-between;
  gap: var(--layout-space-inline);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  line-height: 1.3;
}

label:has(> input[type="range"]:disabled) {
  color: var(--color-text-disabled);
}

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(--color-surface-disabled);
}

label > input[type="range"]:disabled::-webkit-slider-thumb,
label > input[type="range"]:disabled::-moz-range-thumb {
  background: var(--color-text-disabled);
}
:root {
  --select-icon-color: var(--color-brand-primary);
  --select-icon-offset: var(--layout-space-inline);
  --select-icon-size: var(--layout-control-icon-size);
  --select-icon-space: calc(
    var(--layout-space-inline) + var(--layout-control-icon-size) + (var(--layout-control-gap) * 2)
  );
}

label:has(> select) {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--layout-control-gap);
  color: var(--color-brand-primary);
  font: inherit;
  font-size: var(--font-size-default);
  line-height: var(--line-height-default);
}

label:has(> select)::after {
  content: "arrow_drop_down";
  position: absolute;
  right: var(--select-icon-offset);
  bottom: calc(var(--layout-control-padding-block) + (var(--line-height-default) / 2));
  transform: translateY(50%);
  color: var(--select-icon-color);
  font-family: var(--icon-font-family);
  font-size: var(--select-icon-size);
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  pointer-events: 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;
}

label > select {
  box-sizing: border-box;
  padding: var(--layout-control-padding-block) var(--select-icon-space)
    var(--layout-control-padding-block) var(--layout-control-padding-inline);
  border: var(--layout-control-border-width) solid var(--color-border-subtle);
  border-radius: var(--layout-control-radius);
  background-color: var(--color-surface-default);
  appearance: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--font-size-default);
  line-height: var(--line-height-default);
}

label > select:focus {
  outline: none;
  border-color: var(--color-brand-primary);
  box-shadow: 0 0 0 var(--layout-focus-ring-size) var(--color-focus-ring-primary);
}

label > select:valid {
  color: var(--color-text-default);
}

label > select option {
  color: var(--color-text-default);
}
:root {
  --stepper-gap: clamp(calc(var(--layout-space-inline) * 2), 5vw, calc(var(--layout-space-inline) * 5));
  --stepper-indicator-size: var(--layout-control-min-height);
  --stepper-line-thickness: 0.1875rem;
  --stepper-line-offset: var(--layout-space-inline);
  --stepper-label-font-size: calc(var(--font-size-default) * 1.25);
  --stepper-indicator-font-size: calc(var(--font-size-default) * 1.25);
  --stepper-complete-font-size: calc(var(--font-size-default) * 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-neutral-subtle);
  --stepper-idle-color: var(--color-neutral);
  --stepper-active-color: var(--color-brand-primary);
  --stepper-complete-color: var(--color-success);
  --stepper-complete-icon-color: var(--color-surface-default);
}

.stepper {
  container-type: inline-size;
}

ol[aria-label="progress"] {
  display: flex;
  gap: var(--stepper-gap);
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0;
}

ol[aria-label="progress"] p {
  margin: 0;
  font-size: var(--stepper-label-font-size);
  line-height: 1.3;
  color: var(--color-text-default);
}

ol[aria-label="progress"] li {
  counter-increment: step;
  position: relative;
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

ol[aria-label="progress"] li::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--stepper-indicator-size);
  height: var(--stepper-indicator-size);
  margin-bottom: var(--layout-space-stack);
  border-radius: 50%;
  background-color: var(--stepper-idle-color);
  color: var(--color-surface-default);
  font-size: var(--stepper-indicator-font-size);
  font-weight: 500;
  line-height: 1;
  z-index: 1;
}

ol[aria-label="progress"] li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--stepper-indicator-size) / 2 - var(--stepper-line-thickness) / 2);
  left: calc(var(--stepper-indicator-size) + 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;
}

ol[aria-label="progress"] li[data-step-state="complete"]::before {
  content: "check";
  background-color: var(--stepper-complete-color);
  color: var(--stepper-complete-icon-color);
  font-family: var(--icon-font-family);
  font-size: var(--stepper-complete-font-size);
  font-style: normal;
  font-weight: normal;
  letter-spacing: normal;
  text-transform: none;
  direction: ltr;
  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;
}

ol[aria-label="progress"] li[data-step-state="complete"]:not(:last-child)::after {
  background-color: var(--stepper-complete-color);
}

ol[aria-label="progress"] li[aria-current="step"] p {
  font-weight: 600;
}

ol[aria-label="progress"] li[aria-current="step"]::before {
  background-color: var(--stepper-active-color);
  color: var(--color-surface-default);
  box-shadow:
    0 0 0 var(--stepper-ring-gap) var(--color-surface-default),
    0 0 0 calc(var(--stepper-ring-gap) + var(--stepper-ring-size)) var(--stepper-active-color);
}

ol[aria-label="progress"] li[aria-current="step"]:not(:last-child)::after {
  left: calc(var(--stepper-indicator-size) + var(--stepper-line-offset) + 0.25rem);
  width: calc(100% + var(--stepper-gap) - var(--stepper-indicator-size) - (2 * var(--stepper-line-offset)) - 0.5rem);
}

@container (max-width: 45rem) {
  ol[aria-label="progress"] {
    --stepper-stack-gap: calc(var(--layout-space-stack) * 4);
    --stepper-stack-line-inset: 0.5rem;
    flex-direction: column;
    gap: var(--stepper-stack-gap);
  }

  ol[aria-label="progress"] li {
    display: grid;
    grid-template-columns: var(--stepper-indicator-size) minmax(0, 1fr);
    column-gap: var(--layout-space-inline);
    align-items: start;
  }

  ol[aria-label="progress"] li::before {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
  }

  ol[aria-label="progress"] li p {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  ol[aria-label="progress"] li:not(:last-child) {
    padding-bottom: 0.25rem;
  }

  ol[aria-label="progress"] li:not(:last-child)::after {
    top: calc(var(--stepper-indicator-size) + var(--stepper-stack-line-inset));
    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) - (2 * var(--stepper-stack-line-inset)));
  }

  ol[aria-label="progress"] 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) - (2 * var(--stepper-stack-line-inset)));
  }
}
:root,
[data-layout-theme="comfortable"] {
  --layout-table-cell-padding-block: calc(1.5rem - var(--layout-control-border-width));
  --layout-table-cell-padding-inline: calc(1.5rem - var(--layout-control-border-width));
  --layout-table-row-min-height: calc(5rem - var(--layout-control-border-width));
}

[data-layout-theme="compact"] {
  --layout-table-cell-padding-block: calc(0.75rem - var(--layout-control-border-width));
  --layout-table-cell-padding-inline: calc(0.75rem - var(--layout-control-border-width));
  --layout-table-row-min-height: calc(3.125rem - var(--layout-control-border-width));
}

:root {
  --table-background: var(--color-surface-default);
  --table-divider-color: var(--color-border-subtle);
  --table-header-text-color: var(--color-text-muted);
  --table-body-text-color: var(--color-text-default);
  --table-icon-size: var(--layout-control-icon-size);

  --table-border-width: var(--layout-control-border-width);
  --table-border-style: solid;
  --table-border-color: var(--table-divider-color);

  --table-row-min-height: var(--layout-table-row-min-height);
  --table-cell-padding-y: var(--layout-table-cell-padding-block);
  --table-cell-padding-x: var(--layout-table-cell-padding-inline);
  --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(--layout-table-cell-padding-inline);
  --table-cell-padding-inline-compact: calc(var(--layout-table-cell-padding-inline) / 2);
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: var(--table-background);

  & thead tr,
  & tbody tr {
    min-height: var(--table-row-min-height);
    border-bottom: var(--table-border-width) var(--table-border-style)
      var(--table-border-color);
  }

  & th,
  & td {
    padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
    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: var(--table-cell-padding-inline-compact);
  }

  & 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 {
    position: sticky;
    top: var(--layout-sticky-offset);
    z-index: 1;
    color: var(--table-header-text-color);

    & > * {
      display: inline-flex;
      align-items: center;
      gap: var(--table-header-column-gap);
    }

    & > a {
      color: inherit;
      text-decoration: none;
      cursor: pointer;
    }
  }

  & td {
    color: var(--table-body-text-color);
  }
}
label:has(> textarea) {
  --textarea-border-color: var(--color-border-subtle);
  --textarea-message-color: var(--color-text-muted);
  display: flex;
  flex-direction: column;
  gap: var(--layout-control-gap);
  color: var(--color-brand-primary);
  font: inherit;
  font-size: var(--font-size-default);
  line-height: var(--line-height-default);
}

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

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

label > textarea {
  box-sizing: border-box;
  inline-size: 100%;
  padding: var(--layout-control-padding-block) var(--layout-control-padding-inline);
  border: var(--layout-control-border-width) solid var(--textarea-border-color);
  border-radius: var(--layout-control-radius);
  background-color: var(--color-surface-default);
  color: var(--color-text-default);
  font: inherit;
  font-size: var(--font-size-default);
  line-height: var(--line-height-default);
  resize: vertical;
}

label > textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

label > [data-role="footer"] {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--layout-space-inline);
  font-size: var(--font-size-small);
  line-height: 1.3;
}

label > [data-role="footer"] > [data-role="message"] {
  display: none;
  color: var(--textarea-message-color);
}

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

label > [data-role="footer"] > [data-role="limit"] {
  margin-inline-start: auto;
  color: var(--color-text-muted);
  white-space: nowrap;
}

label:has(> textarea:user-invalid) {
  --textarea-border-color: var(--color-error-strong);
  --textarea-message-color: var(--color-error-strong);
}

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

label > textarea:focus {
  outline: none;
  border-color: var(--color-brand-primary);
  box-shadow: 0 0 0 var(--layout-focus-ring-size) var(--color-focus-ring-primary);
}
:root {
  --font-family-sans: "IBM Plex Sans", Helvetica, Arial, sans-serif;
  --font-size-default: 1rem;
  --line-height-default: 1.5rem;
  --font-size-small: calc(var(--font-size-default) * 0.875);
  --font-weight-body-regular: 425;
  --font-weight-body-italic: 425;
  --font-weight-body-bold: 600;
  --font-weight-heading-1: 675;
  --font-weight-heading-2: 650;
  --font-weight-heading-3: 640;
  --font-weight-heading-4: 600;
  --font-weight-heading-5: 500;
  --font-weight-heading-6: 475;
}

body {
  font-family: var(--font-family-sans);
  color: var(--color-text-default);
  font-weight: var(--font-weight-body-regular);
  line-height: var(--line-height-default);
}

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

h1 {
  color: var(--color-text-default);
  font-size: 3rem;
  font-weight: var(--font-weight-heading-1);
  line-height: 1.1;
}

h2 {
  color: var(--color-brand-strong);
  font-size: 2rem;
  font-weight: var(--font-weight-heading-2);
  line-height: 1.3;
}

h3 {
  color: var(--color-brand-strong);
  font-size: 1.3125rem;
  font-weight: var(--font-weight-heading-3);
  line-height: 1.3;
}

h4 {
  color: var(--color-brand-strong);
  font-size: 1.125rem;
  font-weight: var(--font-weight-heading-4);
  line-height: 1.3;
  text-transform: uppercase;
}

h5 {
  color: var(--color-brand-strong);
  font-size: 1rem;
  font-weight: var(--font-weight-heading-5);
  line-height: 1.3;
}

h6 {
  color: var(--color-brand-strong);
  font-size: 1rem;
  font-style: italic;
  font-weight: var(--font-weight-heading-6);
  line-height: 1.3;
}

a {
  color: var(--color-brand-primary);
}

em,
i {
  font-style: italic;
  font-weight: var(--font-weight-body-italic);
}

p {
  color: var(--color-text-default);
  font-weight: var(--font-weight-body-regular);
}

small {
  font-size: var(--font-size-small);
}

blockquote {
  color: var(--color-text-default);
  font-size: 1.625rem;
  font-weight: var(--font-weight-body-regular);
  line-height: 1.23;
  quotes: '"' '"';
  text-align: center;
}

blockquote::before {
  content: open-quote;
}

blockquote::after {
  content: close-quote;
}

caption,
figcaption {
  color: var(--color-text-default);
  font-weight: var(--font-weight-body-bold);
  letter-spacing: 0.0625rem;
  line-height: 1.15;
  text-transform: uppercase;
}

b,
strong {
  font-weight: var(--font-weight-body-bold);
}