@layer reset {
  *, :before, :after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    text-size-adjust: none;
  }

  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
  }

  img, picture, video, canvas, svg {
    max-width: 100%;
    display: block;
  }

  input, button, textarea, select {
    font: inherit;
  }
}

@layer lib;

@layer main {
  :root {
    --clr-white: #fff;
    --clr-black: #000;
    --clr-transparent: rgba(255, 255, 255, 0);
    --clr-neutral-10: #1b1a18;
    --clr-neutral-20: #363330;
    --clr-neutral-30: #504d49;
    --clr-neutral-40: #6b6761;
    --clr-neutral-50: #868179;
    --clr-neutral-60: #9e9a94;
    --clr-neutral-70: #b6b3af;
    --clr-neutral-80: #cfccc9;
    --clr-neutral-90: #e7e6e4;
    --clr-neutral-95: #f3f2f2;
    --clr-accent1-40: #e07b00;
    --clr-accent1-50: #ef8606;
    --clr-accent1-60: #f39016;
    --clr-accent1-70: #f6ae55;
    --clr-accent1-80: #f9c586;
    --clr-accent1-90: #fbdcb6;
    --clr-accent1-95: #fce8cf;
    --clr-danger-40: #b82e2e;
    --clr-danger-50: #c33;
    --clr-danger-60: #d65c5c;
    --clr-danger-90: #f5d6d6;
    --clr-warning-40: var(--clr-accent1-40);
    --clr-warning-50: var(--clr-accent1-50);
    --clr-warning-90: var(--clr-accent1-90);
    --clr-success-40: #395;
    --clr-success-50: #39ac60;
    --clr-success-90: #d9f2e1;
  }

  html, [class*="color-context-"] {
    --color-text: var(--color-fg-normal);
    --color-outline: var(--color-fg-vibrant);
    --color-border-default: var(--color-fg-xsubdued);
    --color-btn-primary-border: var(--color-fg-vibrant);
    --color-btn-primary-border-hover: var(--color-fg-vibrant-hover);
    --color-btn-primary-bg: var(--color-fg-vibrant);
    --color-btn-primary-bg-hover: var(--color-fg-vibrant-hover);
    --color-btn-primary-text: var(--color-bg);
    --color-btn-primary-text-hover: var(--color-bg);
    --color-btn-secondary-border: var(--color-fg-vibrant);
    --color-btn-secondary-border-hover: var(--color-fg-vibrant-hover);
    --color-btn-secondary-bg: transparent;
    --color-btn-secondary-bg-hover: transparent;
    --color-btn-secondary-text: var(--color-fg-vibrant);
    --color-btn-secondary-text-hover: var(--color-fg-vibrant-hover);
    --color-btn-tertiary-border: transparent;
    --color-btn-tertiary-border-hover: transparent;
    --color-btn-tertiary-bg: transparent;
    --color-btn-tertiary-bg-hover: transparent;
    --color-btn-tertiary-text: var(--color-fg-vibrant);
    --color-btn-tertiary-text-hover: var(--color-fg-vibrant-hover);
    --color-field-description: var(--color-fg-subdued);
    --color-input-background: var(--clr-white);
    --color-input-border: var(--color-fg-subdued);
    --color-input-border-focus: var(--color-fg-vibrant);
    --color-input-outline: var(--clr-transparent);
    --color-input-text: var(--color-fg-normal);
    --color-input-placeholder-text: var(--color-fg-subdued);
    --color-input-border-disabled: var(--color-fg-xsubdued);
    --color-input-text-disabled: var(--color-fg-subdued);
    --color-input-text-disabled-placeholder: var(--color-fg-xsubdued);
    --color-select-arrow-border: var(--color-fg-normal);
    --color-input-error-background: var(--clr-danger-90);
    --color-input-error-text: var(--clr-danger-50);
    --color-input-error-border: var(--clr-danger-50);
    --color-input-error-outline: var(--color-outline);
    --color-input-error-placeholder: var(--clr-danger-60);
    --color-label-error-text: var(--clr-danger-50);
    --color-field-error-description: var(--clr-danger-50);
    --color-checkradio-label-disabled: var(--color-fg-subdued);
    --color-checkradio-background: var(--clr-white);
    --color-checkradio-background-disabled: var(--color-checkradio-background);
    --color-checkradio-background-checked: var(--color-checkradio-background);
    --color-checkradio-border: var(--color-input-border);
    --color-checkradio-border-checked: var(--color-input-border);
    --color-checkradio-border-disabled: var(--color-input-border-disabled);
    --color-checkradio-outline: var(--color-input-outline);
    --color-checkradio-border-focus: var(--color-input-border-focus);
    --color-checkradio-mark: var(--color-input-text);
    --color-checkradio-mark-disabled: var(--color-checkradio-border-disabled);
    --color-tooltip-background: var(--clr-neutral-80);
    --color-tooltip-text: var(--color-fg-normal);
  }

  html, .color-context-neutral-light {
    --color-bg-opaque: var(--clr-white);
    --color-bg: var(--color-bg-opaque);
    --color-bg-shaded: var(--clr-neutral-95);
    --color-fg-normal: var(--clr-neutral-30);
    --color-fg-subdued: var(--clr-neutral-60);
    --color-fg-xsubdued: var(--clr-neutral-80);
    --color-fg-xxsubdued: var(--clr-neutral-90);
    --color-fg-vibrant: var(--clr-accent1-50);
    --color-fg-normal-hover: var(--clr-neutral-20);
    --color-fg-subdued-hover: var(--clr-neutral-50);
    --color-fg-xsubdued-hover: var(--clr-neutral-70);
    --color-fg-xxsubdued-hover: var(--clr-neutral-80);
    --color-fg-vibrant-hover: var(--clr-accent1-40);
    --color-bg-danger: var(--clr-danger-90);
    --color-fg-danger: var(--clr-danger-50);
    --color-fg-danger-hover: var(--clr-danger-40);
    --color-bg-warning: var(--clr-warning-90);
    --color-fg-warning: var(--clr-warning-50);
    --color-fg-warning-hover: var(--clr-warning-40);
    --color-bg-success: var(--clr-success-90);
    --color-fg-success: var(--clr-success-50);
    --color-fg-success-hover: var(--clr-success-40);
  }

  .color-context-neutral-shaded {
    --color-bg-opaque: var(--clr-neutral-95);
    --color-bg: var(--color-bg-opaque);
    --color-bg-shaded: var(--clr-neutral-90);
  }

  .color-context-neutral-shaded-2 {
    --color-bg-opaque: var(--clr-neutral-95);
    --color-bg: var(--color-bg-opaque);
    --color-bg-shaded: var(--clr-neutral-90);
    --color-fg-normal: var(--clr-neutral-20);
    --color-fg-subdued: var(--clr-neutral-60);
    --color-fg-xsubdued: var(--clr-neutral-80);
    --color-fg-xxsubdued: var(--clr-neutral-90);
    --color-fg-vibrant: var(--clr-accent1-50);
    --color-fg-normal-hover: var(--clr-neutral-10);
    --color-fg-subdued-hover: var(--clr-neutral-50);
    --color-fg-xsubdued-hover: var(--clr-neutral-70);
    --color-fg-xxsubdued-hover: var(--clr-neutral-80);
    --color-fg-vibrant-hover: var(--clr-accent1-40);
    --color-btn-primary-border: var(--color-fg-normal);
    --color-btn-primary-border-hover: var(--color-fg-normal-hover);
    --color-btn-primary-bg: var(--color-fg-normal);
    --color-btn-primary-bg-hover: var(--color-fg-normal-hover);
    --color-btn-primary-text: var(--clr-white);
    --color-btn-primary-text-hover: var(--clr-white);
    --color-btn-secondary-border: var(--color-fg-normal);
    --color-btn-secondary-border-hover: var(--color-fg-normal-hover);
    --color-btn-secondary-bg: transparent;
    --color-btn-secondary-bg-hover: transparent;
    --color-btn-secondary-text: var(--color-fg-normal);
    --color-btn-secondary-text-hover: var(--color-fg-normal-hover);
    --color-btn-tertiary-border: transparent;
    --color-btn-tertiary-border-hover: transparent;
    --color-btn-tertiary-bg: transparent;
    --color-btn-tertiary-text: var(--color-fg-normal);
    --color-btn-tertiary-text-hover: var(--color-fg-normal-hover);
  }

  .color-context-neutral-dark {
    --color-bg-opaque: var(--clr-neutral-10);
    --color-bg: var(--color-bg-opaque);
    --color-bg-shaded: var(--clr-black);
    --color-fg-normal: var(--clr-white);
    --color-fg-subdued: var(--clr-neutral-80);
    --color-fg-xsubdued: var(--clr-neutral-70);
    --color-fg-vibrant: var(--clr-accent1-50);
    --color-fg-normal-hover: var(--clr-neutral-95);
    --color-fg-subdued-hover: var(--clr-neutral-90);
    --color-fg-xsubdued-hover: var(--clr-accent1-80);
    --color-fg-vibrant-hover: var(--clr-accent1-60);
    --color-outline: var(--color-fg-normal);
    --color-btn-primary-border: var(--color-fg-normal);
    --color-btn-primary-border-hover: var(--color-fg-normal-hover);
    --color-btn-primary-bg: var(--color-fg-normal);
    --color-btn-primary-bg-hover: var(--color-fg-normal-hover);
    --color-btn-primary-text: var(--color-bg);
    --color-btn-primary-text-hover: var(--color-bg);
    --color-btn-secondary-border: var(--color-fg-normal);
    --color-btn-secondary-border-hover: var(--color-fg-normal-hover);
    --color-btn-secondary-bg: transparent;
    --color-btn-secondary-bg-hover: transparent;
    --color-btn-secondary-text: var(--color-fg-normal);
    --color-btn-secondary-text-hover: var(--color-fg-normal-hover);
    --color-btn-tertiary-border: transparent;
    --color-btn-tertiary-border-hover: transparent;
    --color-btn-tertiary-bg: transparent;
    --color-btn-tertiary-bg-hover: transparent;
    --color-btn-tertiary-text: var(--color-fg-normal);
    --color-btn-tertiary-text-hover: var(--color-fg-normal-hover);
    --color-input-background: var(--clr-white);
    --color-input-border: var(--color-input-background);
    --color-input-border-focus: var(--color-input-background);
    --color-input-outline: var(--color-fg-subdued);
    --color-input-text: var(--color-bg);
    --color-input-placeholder-text: color-mix(in srgb, var(--color-input-text) 70%, var(--color-input-background));
    --color-input-error-border: var(--color-input-error-background);
    --color-select-arrow-border: var(--color-bg);
    --color-tooltip-background: var(--clr-white);
    --color-tooltip-text: var(--clr-neutral-20);
  }

  .color-context-accent1-shaded {
    --color-bg-opaque: var(--clr-accent1-95);
    --color-bg: var(--color-bg-opaque);
    --color-bg-shaded: var(--clr-accent1-90);
    --color-fg-normal: var(--clr-accent1-50);
    --color-fg-subdued: var(--clr-accent1-70);
    --color-fg-xsubdued: var(--clr-accent1-80);
    --color-fg-xxsubdued: var(--clr-accent1-90);
    --color-fg-vibrant: var(--clr-neutral-20);
    --color-fg-normal-hover: var(--clr-accent1-40);
    --color-fg-subdued-hover: var(--clr-accent1-60);
    --color-fg-xsubdued-hover: var(--clr-accent1-70);
    --color-fg-xxsubdued-hover: var(--clr-accent1-80);
    --color-fg-vibrant-hover: var(--clr-neutral-10);
    --color-input-border: var(--color-fg-subdued);
    --color-tooltip-background: var(--clr-white);
    --color-tooltip-text: var(--clr-neutral-20);
  }

  .color-context-accent1-dark {
    --color-bg-opaque: var(--clr-accent1-50);
    --color-bg: var(--color-bg-opaque);
    --color-bg-shaded: var(--clr-accent1-40);
    --color-fg-normal: var(--clr-white);
    --color-fg-subdued: var(--clr-accent1-90);
    --color-fg-xsubdued: var(--clr-accent1-70);
    --color-fg-vibrant: var(--clr-neutral-20);
    --color-fg-normal-hover: var(--clr-accent1-95);
    --color-fg-subdued-hover: var(--clr-accent1-80);
    --color-fg-xsubdued-hover: var(--clr-accent1-80);
    --color-fg-vibrant-hover: var(--clr-neutral-10);
    --color-outline: var(--color-fg-normal);
    --color-input-background: var(--clr-white);
    --color-input-border: var(--color-input-background);
    --color-input-border-focus: var(--color-input-background);
    --color-input-outline: var(--color-fg-subdued);
    --color-input-text: var(--color-fg-vibrant);
    --color-input-placeholder-text: color-mix(in srgb, var(--color-input-text) 70%, var(--color-input-background));
    --color-input-error-border: var(--color-input-error-background);
    --color-select-arrow-border: var(--color-fg-vibrant);
    --color-tooltip-background: var(--clr-white);
    --color-tooltip-text: var(--clr-neutral-20);
  }

  html, [class*="color-context-"] {
    background-color: var(--color-bg);
    color: var(--color-text);
  }

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

  [class*="color-context-"].bg-opacity-90 {
    background-color: color-mix(in srgb, var(--color-bg) 90%, transparent);
  }

  [class*="color-context-"].bg-opacity-80 {
    background-color: color-mix(in srgb, var(--color-bg) 80%, transparent);
  }

  [class*="color-context-"].bg-opacity-70 {
    background-color: color-mix(in srgb, var(--color-bg) 70%, transparent);
  }

  [class*="color-context-"].bg-opacity-60 {
    background-color: color-mix(in srgb, var(--color-bg) 60%, transparent);
  }

  [class*="color-context-"].bg-opacity-50 {
    background-color: color-mix(in srgb, var(--color-bg) 50%, transparent);
  }

  [class*="color-context-"].bg-opacity-40 {
    background-color: color-mix(in srgb, var(--color-bg) 40%, transparent);
  }

  [class*="color-context-"].bg-opacity-30 {
    background-color: color-mix(in srgb, var(--color-bg) 30%, transparent);
  }

  [class*="color-context-"].bg-opacity-20 {
    background-color: color-mix(in srgb, var(--color-bg) 20%, transparent);
  }

  [class*="color-context-"].bg-opacity-10 {
    background-color: color-mix(in srgb, var(--color-bg) 10%, transparent);
  }

  [class*="color-context-"].bg-opacity-5 {
    background-color: color-mix(in srgb, var(--color-bg) 5%, transparent);
  }

  [class*="color-context-"].bg-opacity-0 {
    background-color: rgba(0, 0, 0, 0);
  }

  :root {
    --golden-ratio: 1.618;
    --sp-base-unit: .2rem;
    --sp-multiple: var(--golden-ratio);
    --sp-0: 0rem;
    --sp-1: var(--sp-base-unit);
    --sp-2: calc(var(--sp-1) * var(--sp-multiple));
    --sp-3: calc(var(--sp-2) * var(--sp-multiple));
    --sp-4: calc(var(--sp-3) * var(--sp-multiple));
    --sp-5: calc(var(--sp-4) * var(--sp-multiple));
    --sp-6: calc(var(--sp-5) * var(--sp-multiple));
    --sp-7: calc(var(--sp-6) * var(--sp-multiple));
    --sp-8: calc(var(--sp-7) * var(--sp-multiple));
    --sp-9: calc(var(--sp-8) * var(--sp-multiple));
    --sp-10: calc(var(--sp-9) * var(--sp-multiple));
    --shift-increment: .05rem;
    --fs-base-unit: 1rem;
    --fs-multiple: var(--golden-ratio);
    --fs-decrement: calc(var(--fs-base-unit) * var(--fs-multiple) * .07);
    --fs-increment: calc(var(--fs-base-unit) * var(--fs-multiple) * .2);
    --fs-1: calc(var(--fs-2)  - var(--fs-decrement));
    --fs-2: calc(var(--fs-3)  - var(--fs-decrement));
    --fs-3: calc(var(--fs-4)  - var(--fs-decrement));
    --fs-4: var(--fs-base-unit);
    --fs-5: calc(var(--fs-4)  + var(--fs-increment));
    --fs-6: calc(var(--fs-5)  + var(--fs-increment));
    --fs-7: calc(var(--fs-6)  + var(--fs-increment));
    --fs-8: calc(var(--fs-7)  + var(--fs-increment));
    --fs-9: calc(var(--fs-8)  + var(--fs-increment));
    --fs-10: calc(var(--fs-9)  + var(--fs-increment));
    --fs-11: calc(var(--fs-10)  + var(--fs-increment));
    --fs-12: calc(var(--fs-11)  + var(--fs-increment));
    --fs-13: calc(var(--fs-12)  + var(--fs-increment));
    --fs-14: calc(var(--fs-13)  + var(--fs-increment));
    --fs-default: var(--fs-4);
    --border-radius-multiple: 1.45;
    --br-1: .2rem;
    --br-2: calc(var(--br-1) * var(--border-radius-multiple));
    --br-3: calc(var(--br-2) * var(--border-radius-multiple));
    --br-4: calc(var(--br-3) * var(--border-radius-multiple));
    --br-5: calc(var(--br-4) * var(--border-radius-multiple));
    --br-6: calc(var(--br-5) * var(--border-radius-multiple));
    --br-7: calc(var(--br-6) * var(--border-radius-multiple));
    --br-8: calc(var(--br-7) * var(--border-radius-multiple));
    --br-9: calc(var(--br-8) * var(--border-radius-multiple));
    --br-10: calc(var(--br-9) * var(--border-radius-multiple));
    --br-full: 9999px;
    --br-default: var(--br-4);
    --ln-1: .5px;
    --ln-2: 1px;
    --ln-3: 2px;
    --ln-4: 3px;
    --ln-5: 8px;
    --scroll-margin-top: 25px;
    --border-style-default: solid;
    --border-width-default: var(--ln-2);
    --outline-style: dashed;
    --outline-width: var(--ln-3);
    --outline-offset: var(--sp-1);
    --container-inline-padding: var(--sp-5);
    --container-gap: var(--sp-5);
    --default-dot-size: var(--sp-3);
    --icon-size-1: 1rem;
    --icon-stroke-width-1: 2.4;
    --icon-size-2: 1.7rem;
    --icon-stroke-width-2: 1.5;
    --icon-size-3: 2.4rem;
    --icon-stroke-width-3: 1.1;
    --icon-size-4: 3rem;
    --icon-stroke-width-4: .9;
    --icon-circle-size-1: 2.1rem;
    --icon-circle-size-2: 3.1rem;
    --icon-circle-size-3: 4.2rem;
    --icon-circle-size-4: 5rem;
    --font-family-sans-serif: sans-serif;
    --trim-text-bs-sans-serif: .18;
    --trim-text-be-sans-serif: .22;
    --font-family-libre-baskerville: "Libre Baskerville", serif;
    --trim-text-bs-libre-baskerville: .13;
    --trim-text-be-libre-baskerville: .21;
    --font-family-pacifico: "Pacifico", cursive;
    --trim-text-bs-pacifico: .1;
    --trim-text-be-pacifico: .13;
    --font-family-body: var(--font-family-sans-serif);
    --trim-text-bs-body: var(--trim-text-bs-sans-serif);
    --trim-text-be-body: var(--trim-text-be-sans-serif);
    --body-line-height: 1.5;
    --body-font-size: var(--fs-default);
    --body-font-weight: 400;
    --strong-font-weight: 700;
    --small-text-line-height: 1.5;
    --small-text-font-size: var(--fs-2);
    --font-family-headings: var(--font-family-libre-baskerville);
    --trim-text-bs-headings: var(--trim-text-bs-libre-baskerville);
    --trim-text-be-headings: var(--trim-text-be-libre-baskerville);
    --heading-line-height: 1.25;
    --heading-font-weight: 700;
    --h1-font-size: var(--fs-8);
    --h2-font-size: var(--fs-7);
    --h3-font-size: var(--fs-6);
    --h4-font-size: var(--fs-5);
    --h5-font-size: var(--h4-font-size);
    --h6-font-size: var(--h4-font-size);
    --font-family-small-heading: var(--font-family-sans-serif);
    --trim-text-bs-small-heading: var(--trim-text-bs-sans-serif);
    --trim-text-be-small-heading: var(--trim-text-be-sans-serif);
    --small-heading-font-size: var(--fs-3);
    --small-heading-font-weight: 400;
    --small-heading-line-height: 1.2;
    --small-heading-text-transform: uppercase;
    --ul-margin-block-start: 1.1rem;
    --ol-counter-character-width: .55rem;
    --font-family-blockquote: var(--font-family-libre-baskerville);
    --trim-text-bs-blockquote: var(--trim-text-bs-libre-baskerville);
    --trim-text-be-blockquote: var(--trim-text-be-libre-baskerville);
    --blockquote-margin-block: var(--sp-6);
    --blockquote-indentation: var(--sp-5);
    --blockquote-font-size: var(--fs-6);
    --blockquote-color: var(--color-fg-subdued);
    --blockquote-line-height: 1.5;
    --blockquote-font-style: italic;
    --blockquote-p-gutter: var(--sp-4);
    --blockquote-attribution-font-size: var(--fs-4);
    --blockquote-attribution-margin-bs: var(--sp-4);
    --font-family-btn: var(--font-family-sans-serif);
    --btn-font-style: normal;
    --btn-text-transform: uppercase;
    --btn-line-height: 1;
    --btn-text-small-multiple: .7;
    --btn-small-min-height: 2rem;
    --btn-small-font-size: var(--fs-3);
    --btn-small-font-weight: 700;
    --btn-small-text-small-font-weight: 400;
    --btn-small-border-width: var(--ln-3);
    --btn-small-border-radius: var(--br-2);
    --btn-small-padding-inline: var(--sp-4);
    --btn-small-padding-block: 0;
    --btn-small-column-gap: var(--sp-2);
    --btn-small-row-gap: var(--sp-1);
    --btn-small-icon-size: var(--icon-size-1);
    --btn-small-icon-stroke-width: var(--icon-stroke-width-1);
    --btn-medium-min-height: 2.9rem;
    --btn-medium-font-size: var(--fs-4);
    --btn-medium-font-weight: 700;
    --btn-medium-text-small-font-weight: 400;
    --btn-medium-border-width: var(--ln-3);
    --btn-medium-border-radius: var(--br-2);
    --btn-medium-padding-inline: var(--sp-4);
    --btn-medium-padding-block: .15rem 0;
    --btn-medium-column-gap: var(--sp-3);
    --btn-medium-row-gap: var(--sp-1);
    --btn-medium-icon-size: var(--icon-size-2);
    --btn-medium-icon-stroke-width: var(--icon-stroke-width-2);
    --btn-large-min-height: 4.2rem;
    --btn-large-font-size: var(--fs-5);
    --btn-large-font-weight: 700;
    --btn-large-text-small-font-weight: 400;
    --btn-large-border-radius: var(--br-2);
    --btn-large-border-width: var(--ln-4);
    --btn-large-padding-inline: var(--sp-5);
    --btn-large-padding-block: .2rem 0;
    --btn-large-column-gap: var(--sp-4);
    --btn-large-row-gap: calc(var(--sp-1) * .5);
    --btn-large-icon-size: var(--icon-size-2);
    --btn-large-icon-stroke-width: var(--icon-stroke-width-2);
    --field-label-line-height: 1.3;
    --field-label-font-size: var(--body-font-size);
    --field-description-font-size: var(--small-text-font-size);
    --field-description-line-height: var(--small-text-line-height);
    --field-description-margin-block-start: var(--sp-2);
    --input-text-font-family: var(--font-family-sans-serif);
    --input-text-font-weight: 400;
    --input-text-font-style: normal;
    --input-text-placeholder-font-style: italic;
    --input-text-line-height: 1.2;
    --input-text-border-width: var(--ln-3);
    --input-text-border-radius: var(--br-2);
    --input-text-label-gap: var(--sp-2);
    --input-text-medium-min-height: var(--btn-medium-min-height);
    --input-text-medium-font-size: var(--fs-4);
    --input-text-medium-padding-inline: var(--sp-3);
    --input-text-medium-padding-block: .2rem;
    --input-text-medium-border-radius: var(--br-2);
    --input-text-small-min-height: var(--btn-small-min-height);
    --input-text-small-font-size: var(--fs-4);
    --input-text-small-padding-inline: var(--sp-3);
    --input-text-small-padding-block: .2rem;
    --input-text-small-border-radius: var(--br-2);
    --checkradio-border-width: var(--ln-3);
    --checkradio-size: 1.5rem;
    --modal-backdrop-color: var(--clr-black);
    --modal-close-outside-icon-color: var(--clr-white);
    --modal-backdrop-opacity: .4;
    --modal-border-radius: var(--br-2);
    --modal-close-button-padding: var(--sp-4);
    --modal-small-max-inline-size: 25rem;
    --modal-medium-max-inline-size: 50rem;
    --modal-large-max-inline-size: 65rem;
    --modal-fade-transition-duration: .15s;
    --modal-fade-scale-amount: .97;
    --modal-slide-transition-duration: .15s;
    --content-slide-transition-duration: .15s;
    --toggle-rotate-90-duration: .1s;
    --toggle-rotate-180-duration: .15s;
    --toggle-transition-height-duration: .2s;
    --table-line-height: 1.2;
    --table-vertical-align: top;
    --table-row-border-width: var(--border-width-default);
    --table-row-border-color: var(--color-border-default);
    --table-thead-row-border-color: var(--color-fg-normal);
    --table-cell-pad-i: var(--sp-0);
    --table-cell-pad-b: var(--sp-3);
    --table-thead-cell-pad-b: var(--table-cell-pad-b);
    --tooltip-arrow-size: .7rem;
    --tooltip-bubble-gap: var(--sp-1);
    --tooltip-border-radius: var(--br-2);
    --tooltip-font-size: var(--fs-2);
    --tooltip-padding: var(--sp-2);
    --tooltip-max-width: 10rem;
    --tooltip-transition-duration: .1s;
  }

  @media (min-width: 500px) {
    :root {
      --container-inline-padding: var(--sp-5);
    }
  }

  @media (min-width: 800px) {
    :root {
      --container-inline-padding: var(--sp-6);
    }
  }

  @media (min-width: 1100px) {
    :root {
      --container-inline-padding: var(--sp-8);
    }
  }

  @media (min-width: 1600px) {
    :root {
      --container-inline-padding: var(--sp-8);
    }
  }

  .css-version-debug:after {
    content: "v0.1.3";
  }

  html {
    font-size: clamp(1rem, .9137rem + .368vw, 1.71875rem);
  }

  body {
    --scrollbar-compensation: 0;
  }

  [id] {
    scroll-margin-top: var(--scroll-margin-top);
  }

  [tabindex="-1"]:focus-visible {
    outline: none;
  }

  .container {
    inline-size: 100%;
    padding-inline: var(--container-inline-padding);
  }

  .container-grid {
    gap: var(--container-gap);
    inline-size: 100%;
    padding-inline: var(--container-inline-padding);
    grid-template-columns: repeat(6, 1fr);
    display: grid;
  }

  @media (min-width: 800px) {
    .container-grid {
      grid-template-columns: repeat(12, 1fr);
    }
  }

  .container-grid .container {
    grid-column: 1 / -1;
    padding-inline: 0;
  }

  @media (min-width: 2000px) {
    .container-grid .container {
      grid-column: 2 / -2;
    }
  }

  @media (min-width: 3000px) {
    .container-grid .container {
      grid-column: 3 / -3;
    }
  }

  .container-grid .container-small {
    grid-column: 1 / -1;
    padding-inline: 0;
  }

  @media (min-width: 1100px) {
    .container-grid .container-small {
      grid-column: 2 / -2;
    }
  }

  @media (min-width: 2000px) {
    .container-grid .container-small {
      grid-column: 3 / -3;
    }
  }

  @media (min-width: 3000px) {
    .container-grid .container-small {
      grid-column: 4 / -4;
    }
  }

  .container-grid .container-grid-inner {
    gap: var(--container-gap);
    grid-template-columns: repeat(6, 1fr);
    display: grid;
  }

  @media (min-width: 800px) {
    .container-grid .container-grid-inner {
      grid-template-columns: repeat(12, 1fr);
    }
  }

  @media (min-width: 2000px) {
    .container-grid .container-grid-inner {
      grid-template-columns: repeat(10, 1fr);
    }
  }

  @media (min-width: 3000px) {
    .container-grid .container-grid-inner {
      grid-template-columns: repeat(8, 1fr);
    }
  }

  .grid {
    display: grid;
  }

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

  .subgrid-pass-through {
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    display: grid;
  }

  .flex {
    flex-wrap: wrap;
    display: flex;
  }

  :root {
    --border-width: var(--border-width-default);
  }

  :where(.border, [class*="border-"]) {
    border-width: 0;
    border-style: var(--border-style-default);
    border-color: var(--color-border-default);
  }

  :where(.border-all) {
    border-width: var(--border-width);
  }

  :where(.border-b) {
    border-block-start-width: var(--border-width);
    border-block-end-width: var(--border-width);
  }

  :where(.border-bs) {
    border-block-start-width: var(--border-width);
  }

  :where(.border-be) {
    border-block-end-width: var(--border-width);
  }

  :where(.border-i) {
    border-inline-start-width: var(--border-width);
    border-inline-end-width: var(--border-width);
  }

  :where(.border-is) {
    border-inline-start-width: var(--border-width);
  }

  :where(.border-ie) {
    border-inline-end-width: var(--border-width);
  }

  .border-color-normal, .border-color-normal .border:not([class*="border-color-"]) {
    border-color: var(--color-fg-normal);
  }

  .border-color-subdued, .border-color-subdued .border:not([class*="border-color-"]) {
    border-color: var(--color-fg-subdued);
  }

  .border-color-xsubdued, .border-color-xsubdued .border:not([class*="border-color-"]) {
    border-color: var(--color-fg-xsubdued);
  }

  .border-color-vibrant, .border-color-vibrant .border:not([class*="border-color-"]) {
    border-color: var(--color-fg-vibrant);
  }

  :is(.color-normal, .color-subdued, .color-xsubdued, .color-vibrant) a {
    color: inherit;
  }

  :is(.color-normal, .color-subdued, .color-xsubdued, .color-vibrant) button {
    color: inherit;
  }

  .color-normal {
    color: var(--color-fg-normal);
  }

  .color-subdued {
    color: var(--color-fg-subdued);
  }

  .color-xsubdued {
    color: var(--color-fg-xsubdued);
  }

  .color-vibrant {
    color: var(--color-fg-vibrant);
  }

  a.color-normal:hover, button.color-normal:hover {
    color: var(--color-fg-normal-hover);
  }

  a.color-subdued:hover, button.color-subdued:hover {
    color: var(--color-fg-subdued-hover);
  }

  a.color-xsubdued:hover, button.color-xsubdued:hover {
    color: var(--color-fg-xsubdued-hover);
  }

  a.color-vibrant:hover, button.color-vibrant:hover {
    color: var(--color-fg-vibrant-hover);
  }

  .color-hover-normal:hover:hover {
    color: var(--color-fg-normal);
  }

  .color-hover-subdued:hover:hover {
    color: var(--color-fg-subdued);
  }

  .color-hover-xsubdued:hover:hover {
    color: var(--color-fg-xsubdued);
  }

  .color-hover-vibrant:hover:hover {
    color: var(--color-fg-vibrant);
  }

  .trim-text:is(.h1, .h2, .h3, .h4, .h5, .h6, .p, .small.block, .blockquote, .small-heading, .ul, .ol) {
    margin-block-start: calc(-1 * ( var(--trim-text-fs) * var(--trim-text-lh) * var(--trim-text-bs)));
    margin-block-end: calc(-1 * ( var(--trim-text-fs) * var(--trim-text-lh) * var(--trim-text-be)));
  }

  .trim-text-elements :is(.h1, .h2, .h3, .h4, .h5, .h6, .p, .small.block, .blockquote, .small-heading, .ul, .ol) {
    margin-block-start: calc(-1 * ( var(--trim-text-fs) * var(--trim-text-lh) * var(--trim-text-bs)));
    margin-block-end: calc(-1 * ( var(--trim-text-fs) * var(--trim-text-lh) * var(--trim-text-be)));
  }

  html {
    line-height: var(--body-line-height);
    font-family: var(--font-family-body);
    --trim-text-bs: var(--trim-text-bs-body);
    --trim-text-be: var(--trim-text-be-body);
    font-weight: var(--body-font-weight);
  }

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

  h1, h2, h3, h4, h5, h6 {
    font-weight: var(--body-font-weight);
    font-size: var(--body-font-size);
    line-height: var(--body-line-height);
  }

  .h1, .h2, .h3, .h4, .h5, .h6 {
    --trim-text-bs: var(--trim-text-bs-headings);
    --trim-text-be: var(--trim-text-be-headings);
    --trim-text-lh: var(--heading-line-height);
  }

  :is(.h1, .h2, .h3, .h4, .h5, .h6) {
    font-family: var(--font-family-headings);
    font-weight: var(--heading-font-weight);
    line-height: var(--heading-line-height);
  }

  .rich-text :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-family-headings);
    font-weight: var(--heading-font-weight);
    line-height: var(--heading-line-height);
  }

  .h1, .rich-text h1 {
    font-size: var(--h1-font-size);
    --trim-text-fs: var(--h1-font-size);
  }

  .h2, .rich-text h2 {
    font-size: var(--h2-font-size);
    --trim-text-fs: var(--h2-font-size);
  }

  .h3, .rich-text h3 {
    font-size: var(--h3-font-size);
    --trim-text-fs: var(--h3-font-size);
  }

  .h4, .h5, .h6, .rich-text h4, .rich-text h5, .rich-text h6 {
    font-size: var(--h4-font-size);
    --trim-text-fs: var(--h4-font-size);
  }

  .rich-text :is(h1, h2, h3, h4, h5, h6) {
    margin-block-start: var(--sp-5);
    margin-block-end: var(--sp-3);
  }

  .small-heading {
    --trim-text-bs: var(--trim-text-bs-small-heading);
    --trim-text-be: var(--trim-text-be-small-heading);
    --trim-text-lh: var(--small-heading-line-height);
    --trim-text-fs: var(--small-heading-font-size);
    font-family: var(--font-family-small-heading);
    font-size: var(--small-heading-font-size);
    font-weight: var(--small-heading-font-weight);
    line-height: var(--small-heading-line-height);
    text-transform: var(--small-heading-text-transform);
  }

  .p, .rich-text p {
    line-height: var(--body-line-height);
    --trim-text-lh: var(--body-line-height);
    --trim-text-fs: var(--body-font-size);
  }

  .rich-text {
    --p-margin-be: var(--sp-4);
    --p-line-height: var(--body-line-height);
  }

  .rich-text p {
    line-height: var(--p-line-height);
    margin-block-end: var(--p-margin-be);
  }

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

  .small, .rich-text small {
    font-size: var(--small-text-font-size);
  }

  div.small, .small.block {
    line-height: var(--small-text-line-height);
    --trim-text-lh: var(--small-text-line-height);
    --trim-text-fs: var(--small-text-font-size);
  }

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

  .strong, .rich-text strong, .rich-text b {
    font-weight: var(--strong-font-weight);
  }

  em, i, cite {
    font-style: normal;
  }

  .em, .rich-text em, .rich-text i, .rich-text cite {
    font-style: italic;
  }

  :is(.blockquote, .rich-text blockquote) p {
    font-size: var(--blockquote-font-size);
    line-height: var(--blockquote-line-height);
    color: var(--blockquote-color);
    font-style: var(--blockquote-font-style);
    font-family: var(--font-family-blockquote);
    margin: 0;
  }

  :is(.blockquote, .rich-text blockquote) p + p {
    margin-block-start: var(--blockquote-p-gutter);
  }

  :is(.blockquote, .rich-text blockquote).add-quote-marks p:first-child {
    text-indent: -.35em;
  }

  :is(.blockquote, .rich-text blockquote).add-quote-marks p:first-child:before {
    content: "“";
  }

  :is(.blockquote, .rich-text blockquote).add-quote-marks p:last-child:after {
    content: "”";
  }

  :is(.blockquote, .rich-text blockquote).add-quote-marks p:has( + footer):after {
    content: "”";
  }

  .blockquote {
    --trim-text-bs: var(--trim-text-bs-blockquote);
    --trim-text-be: var(--trim-text-be-blockquote);
    --trim-text-lh: var(--blockquote-line-height);
    --trim-text-fs: var(--blockquote-font-size);
  }

  .rich-text blockquote {
    margin-inline: var(--blockquote-indentation);
    margin-block-start: var(--blockquote-margin-block);
  }

  .rich-text blockquote:not(:has( + .blockquote-attribution)) {
    margin-block-end: var(--blockquote-margin-block);
  }

  .blockquote-attribution {
    --this-dash-size: 1.2em;
    text-indent: calc(-1 * var(--this-dash-size));
    font-size: var(--blockquote-attribution-font-size);
    margin-block-start: var(--blockquote-attribution-margin-bs);
    margin-inline-start: var(--this-dash-size);
  }

  .blockquote-attribution:before {
    content: "— ";
  }

  .rich-text .blockquote-attribution {
    margin-block-end: var(--blockquote-margin-block);
    margin-inline-start: calc(var(--blockquote-indentation)  + var(--this-dash-size));
    margin-inline-end: var(--blockquote-indentation);
  }

  a:where(:link, :visited):focus-visible {
    outline-style: var(--outline-style);
    outline-width: var(--outline-width);
    outline-offset: var(--outline-offset);
    outline-color: var(--color-outline);
  }

  a:where(:link, :visited).no-outline-offset {
    outline-offset: calc(var(--outline-width) * -1);
  }

  input:is([type="button"], [type="submit"], [type="reset"]):focus-visible {
    outline-style: var(--outline-style);
    outline-width: var(--outline-width);
    outline-offset: var(--outline-offset);
    outline-color: var(--color-outline);
  }

  input:is([type="button"], [type="submit"], [type="reset"]).no-outline-offset {
    outline-offset: calc(var(--outline-width) * -1);
  }

  button:focus-visible {
    outline-style: var(--outline-style);
    outline-width: var(--outline-width);
    outline-offset: var(--outline-offset);
    outline-color: var(--color-outline);
  }

  button.no-outline-offset {
    outline-offset: calc(var(--outline-width) * -1);
  }

  a:where(:link, :visited) {
    color: var(--color-fg-normal);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
  }

  button {
    cursor: pointer;
    color: var(--color-fg-normal);
    text-align: left;
    text-transform: inherit;
    background: none;
    border: 0;
    padding: 0;
    display: inline-block;
  }

  input:where([type="button"], [type="submit"], [type="reset"]) {
    cursor: pointer;
    color: var(--color-fg-normal);
    text-align: left;
    text-transform: inherit;
    background: none;
    border: 0;
    padding: 0;
    display: inline-block;
  }

  .rich-text a, a.text-link, button.text-link, a span.text-link-text, button span.text-link-text {
    text-underline-offset: 2px;
    text-decoration: underline;
  }

  input:is([type="button"], [type="submit"], [type="reset"]).text-link {
    text-underline-offset: 2px;
    text-decoration: underline;
  }

  a.text-link, button.text-link {
    color: var(--color-fg-normal);
  }

  input:is([type="button"], [type="submit"], [type="reset"]).text-link {
    color: var(--color-fg-normal);
  }

  input:is([type="button"], [type="submit"], [type="reset"]).text-link:hover {
    color: var(--color-fg-normal-hover);
  }

  input:is([type="button"], [type="submit"], [type="reset"]).text-link:hover svg {
    stroke: var(--color-fg-normal-hover);
  }

  a:has(span.text-link-text) {
    color: var(--color-fg-normal);
  }

  a:has(span.text-link-text):hover {
    color: var(--color-fg-normal-hover);
  }

  a:has(span.text-link-text):hover svg {
    stroke: var(--color-fg-normal-hover);
  }

  button:has(span.text-link-text) {
    color: var(--color-fg-normal);
  }

  button:has(span.text-link-text):hover {
    color: var(--color-fg-normal-hover);
  }

  button:has(span.text-link-text):hover svg {
    stroke: var(--color-fg-normal-hover);
  }

  .rich-text a:is(:link, :visited) {
    color: var(--color-fg-normal);
  }

  .rich-text a:is(:link, :visited):hover {
    color: var(--color-fg-normal-hover);
  }

  .rich-text a:is(:link, :visited):hover svg {
    stroke: var(--color-fg-normal-hover);
  }

  :is(a.text-link, button.text-link):hover {
    color: var(--color-fg-normal-hover);
  }

  :is(a.text-link, button.text-link):hover svg {
    stroke: var(--color-fg-normal-hover);
  }

  .rich-text.no-underline-links a, .text-link.no-underline {
    text-decoration: none;
  }

  input:is([type="button"], [type="submit"], [type="reset"]).text-link.color-normal {
    color: var(--color-fg-normal);
  }

  input:is([type="button"], [type="submit"], [type="reset"]).text-link.color-normal:hover {
    color: var(--color-fg-normal-hover);
  }

  input:is([type="button"], [type="submit"], [type="reset"]).text-link.color-normal:hover svg {
    stroke: var(--color-fg-normal-hover);
  }

  input:is([type="button"], [type="submit"], [type="reset"]).text-link.color-subdued {
    color: var(--color-fg-subdued);
  }

  input:is([type="button"], [type="submit"], [type="reset"]).text-link.color-subdued:hover {
    color: var(--color-fg-subdued-hover);
  }

  input:is([type="button"], [type="submit"], [type="reset"]).text-link.color-subdued:hover svg {
    stroke: var(--color-fg-subdued-hover);
  }

  input:is([type="button"], [type="submit"], [type="reset"]).text-link.color-xsubdued {
    color: var(--color-fg-xsubdued);
  }

  input:is([type="button"], [type="submit"], [type="reset"]).text-link.color-xsubdued:hover {
    color: var(--color-fg-xsubdued-hover);
  }

  input:is([type="button"], [type="submit"], [type="reset"]).text-link.color-xsubdued:hover svg {
    stroke: var(--color-fg-xsubdued-hover);
  }

  input:is([type="button"], [type="submit"], [type="reset"]).text-link.color-vibrant {
    color: var(--color-fg-vibrant);
  }

  input:is([type="button"], [type="submit"], [type="reset"]).text-link.color-vibrant:hover {
    color: var(--color-fg-vibrant-hover);
  }

  input:is([type="button"], [type="submit"], [type="reset"]).text-link.color-vibrant:hover svg {
    stroke: var(--color-fg-vibrant-hover);
  }

  input:is([type="button"], [type="submit"], [type="reset"]).text-link.disabled {
    pointer-events: none;
    color: var(--color-fg-xsubdued);
  }

  a:has(span.text-link-text).color-normal {
    color: var(--color-fg-normal);
  }

  a:has(span.text-link-text).color-normal:hover {
    color: var(--color-fg-normal-hover);
  }

  a:has(span.text-link-text).color-normal:hover svg {
    stroke: var(--color-fg-normal-hover);
  }

  a:has(span.text-link-text).color-subdued {
    color: var(--color-fg-subdued);
  }

  a:has(span.text-link-text).color-subdued:hover {
    color: var(--color-fg-subdued-hover);
  }

  a:has(span.text-link-text).color-subdued:hover svg {
    stroke: var(--color-fg-subdued-hover);
  }

  a:has(span.text-link-text).color-xsubdued {
    color: var(--color-fg-xsubdued);
  }

  a:has(span.text-link-text).color-xsubdued:hover {
    color: var(--color-fg-xsubdued-hover);
  }

  a:has(span.text-link-text).color-xsubdued:hover svg {
    stroke: var(--color-fg-xsubdued-hover);
  }

  a:has(span.text-link-text).color-vibrant {
    color: var(--color-fg-vibrant);
  }

  a:has(span.text-link-text).color-vibrant:hover {
    color: var(--color-fg-vibrant-hover);
  }

  a:has(span.text-link-text).color-vibrant:hover svg {
    stroke: var(--color-fg-vibrant-hover);
  }

  a:has(span.text-link-text).disabled {
    pointer-events: none;
    color: var(--color-fg-xsubdued);
  }

  button:has(span.text-link-text).color-normal {
    color: var(--color-fg-normal);
  }

  button:has(span.text-link-text).color-normal:hover {
    color: var(--color-fg-normal-hover);
  }

  button:has(span.text-link-text).color-normal:hover svg {
    stroke: var(--color-fg-normal-hover);
  }

  button:has(span.text-link-text).color-subdued {
    color: var(--color-fg-subdued);
  }

  button:has(span.text-link-text).color-subdued:hover {
    color: var(--color-fg-subdued-hover);
  }

  button:has(span.text-link-text).color-subdued:hover svg {
    stroke: var(--color-fg-subdued-hover);
  }

  button:has(span.text-link-text).color-xsubdued {
    color: var(--color-fg-xsubdued);
  }

  button:has(span.text-link-text).color-xsubdued:hover {
    color: var(--color-fg-xsubdued-hover);
  }

  button:has(span.text-link-text).color-xsubdued:hover svg {
    stroke: var(--color-fg-xsubdued-hover);
  }

  button:has(span.text-link-text).color-vibrant {
    color: var(--color-fg-vibrant);
  }

  button:has(span.text-link-text).color-vibrant:hover {
    color: var(--color-fg-vibrant-hover);
  }

  button:has(span.text-link-text).color-vibrant:hover svg {
    stroke: var(--color-fg-vibrant-hover);
  }

  button:has(span.text-link-text).disabled {
    pointer-events: none;
    color: var(--color-fg-xsubdued);
  }

  .rich-text a:is(:link, :visited).color-normal {
    color: var(--color-fg-normal);
  }

  .rich-text a:is(:link, :visited).color-normal:hover {
    color: var(--color-fg-normal-hover);
  }

  .rich-text a:is(:link, :visited).color-normal:hover svg {
    stroke: var(--color-fg-normal-hover);
  }

  .rich-text a:is(:link, :visited).color-subdued {
    color: var(--color-fg-subdued);
  }

  .rich-text a:is(:link, :visited).color-subdued:hover {
    color: var(--color-fg-subdued-hover);
  }

  .rich-text a:is(:link, :visited).color-subdued:hover svg {
    stroke: var(--color-fg-subdued-hover);
  }

  .rich-text a:is(:link, :visited).color-xsubdued {
    color: var(--color-fg-xsubdued);
  }

  .rich-text a:is(:link, :visited).color-xsubdued:hover {
    color: var(--color-fg-xsubdued-hover);
  }

  .rich-text a:is(:link, :visited).color-xsubdued:hover svg {
    stroke: var(--color-fg-xsubdued-hover);
  }

  .rich-text a:is(:link, :visited).color-vibrant {
    color: var(--color-fg-vibrant);
  }

  .rich-text a:is(:link, :visited).color-vibrant:hover {
    color: var(--color-fg-vibrant-hover);
  }

  .rich-text a:is(:link, :visited).color-vibrant:hover svg {
    stroke: var(--color-fg-vibrant-hover);
  }

  .rich-text a:is(:link, :visited).disabled {
    pointer-events: none;
    color: var(--color-fg-xsubdued);
  }

  :is(a.text-link, button.text-link).color-normal {
    color: var(--color-fg-normal);
  }

  :is(a.text-link, button.text-link).color-normal:hover {
    color: var(--color-fg-normal-hover);
  }

  :is(a.text-link, button.text-link).color-normal:hover svg {
    stroke: var(--color-fg-normal-hover);
  }

  :is(a.text-link, button.text-link).color-subdued {
    color: var(--color-fg-subdued);
  }

  :is(a.text-link, button.text-link).color-subdued:hover {
    color: var(--color-fg-subdued-hover);
  }

  :is(a.text-link, button.text-link).color-subdued:hover svg {
    stroke: var(--color-fg-subdued-hover);
  }

  :is(a.text-link, button.text-link).color-xsubdued {
    color: var(--color-fg-xsubdued);
  }

  :is(a.text-link, button.text-link).color-xsubdued:hover {
    color: var(--color-fg-xsubdued-hover);
  }

  :is(a.text-link, button.text-link).color-xsubdued:hover svg {
    stroke: var(--color-fg-xsubdued-hover);
  }

  :is(a.text-link, button.text-link).color-vibrant {
    color: var(--color-fg-vibrant);
  }

  :is(a.text-link, button.text-link).color-vibrant:hover {
    color: var(--color-fg-vibrant-hover);
  }

  :is(a.text-link, button.text-link).color-vibrant:hover svg {
    stroke: var(--color-fg-vibrant-hover);
  }

  :is(a.text-link, button.text-link).disabled {
    pointer-events: none;
    color: var(--color-fg-xsubdued);
  }

  .btn {
    text-align: center;
    line-height: var(--btn-line-height);
    padding-inline: var(--btn-medium-padding-inline);
    padding-block: var(--btn-medium-padding-block);
    font-family: var(--font-family-btn);
    font-style: var(--btn-font-style);
    text-transform: var(--btn-text-transform);
    border-style: solid;
    border-width: var(--btn-medium-border-width);
    border-radius: var(--btn-medium-border-radius);
    min-height: var(--btn-medium-min-height);
    font-weight: var(--btn-medium-font-weight);
    font-size: var(--btn-medium-font-size);
    justify-content: center;
    align-items: center;
    column-gap: var(--btn-medium-column-gap);
    border-color: var(--color-btn-primary-border);
    background-color: var(--color-btn-primary-bg);
    color: var(--color-btn-primary-text);
    display: inline-flex;
  }

  .grid > * > .btn {
    inline-size: 100%;
  }

  .btn small {
    font-size: calc(var(--btn-medium-font-size) * var(--btn-text-small-multiple));
    font-weight: var(--btn-medium-text-small-font-weight);
  }

  .btn .btn-text {
    row-gap: var(--btn-medium-row-gap);
    display: grid;
  }

  .btn svg {
    stroke: var(--color-btn-primary-text);
    stroke-width: var(--btn-medium-icon-stroke-width);
    inline-size: var(--btn-medium-icon-size);
    block-size: var(--btn-medium-icon-size);
  }

  .btn:hover {
    border-color: var(--color-btn-primary-border-hover);
    background-color: var(--color-btn-primary-bg-hover);
    color: var(--color-btn-primary-text-hover);
  }

  .btn:hover svg {
    stroke: var(--color-btn-primary-text-hover);
  }

  .btn-secondary {
    border-color: var(--color-btn-secondary-border);
    background-color: var(--color-btn-secondary-bg);
    color: var(--color-btn-secondary-text);
  }

  .btn-secondary svg {
    stroke: var(--color-btn-secondary-text);
  }

  .btn-secondary:hover {
    border-color: var(--color-btn-secondary-border-hover);
    background-color: var(--color-btn-secondary-bg-hover);
    color: var(--color-btn-secondary-text-hover);
  }

  .btn-secondary:hover svg {
    stroke: var(--color-btn-secondary-text-hover);
  }

  .btn-tertiary {
    border-color: var(--color-btn-tertiary-border);
    background-color: var(--color-btn-tertiary-bg);
    color: var(--color-btn-tertiary-text);
  }

  .btn-tertiary svg {
    stroke: var(--color-btn-tertiary-text);
  }

  .btn-tertiary:hover {
    border-color: var(--color-btn-tertiary-border-hover);
    background-color: var(--color-btn-tertiary-bg-hover);
    color: var(--color-btn-tertiary-text-hover);
  }

  .btn-tertiary:hover svg {
    stroke: var(--color-btn-tertiary-text-hover);
  }

  .btn-small {
    font-size: var(--btn-small-font-size);
    border-radius: var(--btn-small-border-radius);
    border-width: var(--btn-small-border-width);
    min-height: var(--btn-small-min-height);
    font-weight: var(--btn-small-font-weight);
    padding-inline: var(--btn-small-padding-inline);
    padding-block: var(--btn-small-padding-block);
    column-gap: var(--btn-small-column-gap);
  }

  .btn-small small {
    font-size: calc(var(--btn-small-font-size) * var(--btn-text-small-multiple));
    font-weight: var(--btn-small-text-small-font-weight);
  }

  .btn-small svg {
    width: var(--btn-small-icon-size);
    height: var(--btn-small-icon-size);
    stroke-width: var(--btn-small-icon-stroke-width);
  }

  .btn-small .btn-text {
    row-gap: var(--btn-small-row-gap);
  }

  .btn-large {
    font-size: var(--btn-large-font-size);
    border-radius: var(--btn-large-border-radius);
    border-width: var(--btn-large-border-width);
    min-height: var(--btn-large-min-height);
    font-weight: var(--btn-large-font-weight);
    padding-inline: var(--btn-large-padding-inline);
    padding-block: var(--btn-large-padding-block);
    column-gap: var(--btn-large-column-gap);
  }

  .btn-large small {
    font-size: calc(var(--btn-large-font-size) * var(--btn-text-small-multiple));
    font-weight: var(--btn-large-text-small-font-weight);
  }

  .btn-large svg {
    width: var(--btn-large-icon-size);
    height: var(--btn-large-icon-size);
    stroke-width: var(--btn-large-icon-stroke-width);
  }

  .btn-large .btn-text {
    row-gap: var(--btn-large-row-gap);
  }

  .btn-danger {
    border-color: var(--color-fg-danger);
    background-color: var(--color-fg-danger);
    color: var(--color-bg);
  }

  .btn-danger:hover {
    border-color: var(--color-fg-danger-hover);
    background-color: var(--color-fg-danger-hover);
    color: var(--color-bg);
  }

  .btn-danger.btn-secondary {
    border-color: var(--color-fg-danger);
    background-color: var(--color-bg);
    color: var(--color-fg-danger);
  }

  .btn-danger.btn-secondary:hover {
    border-color: var(--color-fg-danger);
    background-color: color-mix(in srgb, var(--color-fg-danger) 10%, var(--color-bg));
    color: var(--color-fg-danger);
  }

  .btn-danger.btn-tertiary {
    border-color: var(--color-bg);
    background-color: var(--color-bg);
    color: var(--color-fg-danger);
  }

  .btn-danger.btn-tertiary:hover {
    border-color: color-mix(in srgb, var(--color-fg-danger) 10%, var(--color-bg));
    background-color: color-mix(in srgb, var(--color-fg-danger) 10%, var(--color-bg));
    color: var(--color-fg-danger);
  }

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

  .btn-warning:hover {
    border-color: var(--color-fg-warning-hover);
    background-color: var(--color-fg-warning-hover);
    color: var(--color-bg);
  }

  .btn-warning.btn-secondary {
    border-color: var(--color-fg-warning);
    background-color: var(--color-bg);
    color: var(--color-fg-warning);
  }

  .btn-warning.btn-secondary:hover {
    border-color: var(--color-fg-warning);
    background-color: color-mix(in srgb, var(--color-fg-warning) 10%, var(--color-bg));
    color: var(--color-fg-warning);
  }

  .btn-warning.btn-tertiary {
    border-color: var(--color-bg);
    background-color: var(--color-bg);
    color: var(--color-fg-warning);
  }

  .btn-warning.btn-tertiary:hover {
    border-color: color-mix(in srgb, var(--color-fg-warning) 10%, var(--color-bg));
    background-color: color-mix(in srgb, var(--color-fg-warning) 10%, var(--color-bg));
    color: var(--color-fg-warning);
  }

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

  .btn-success:hover {
    border-color: var(--color-fg-success-hover);
    background-color: var(--color-fg-success-hover);
    color: var(--color-bg);
  }

  .btn-success.btn-secondary {
    border-color: var(--color-fg-success);
    background-color: var(--color-bg);
    color: var(--color-fg-success);
  }

  .btn-success.btn-secondary:hover {
    border-color: var(--color-fg-success);
    background-color: color-mix(in srgb, var(--color-fg-success) 10%, var(--color-bg));
    color: var(--color-fg-success);
  }

  .btn-success.btn-tertiary {
    border-color: var(--color-bg);
    background-color: var(--color-bg);
    color: var(--color-fg-success);
  }

  .btn-success.btn-tertiary:hover {
    border-color: color-mix(in srgb, var(--color-fg-success) 10%, var(--color-bg));
    background-color: color-mix(in srgb, var(--color-fg-success) 10%, var(--color-bg));
    color: var(--color-fg-success);
  }

  hr {
    --this-border-width: var(--border-width-default);
    border-width: 0;
    border-style: var(--border-style-default);
    border-block-start-width: var(--this-border-width);
    border-color: var(--color-border-default);
    margin: 0;
  }

  .rich-text hr {
    margin-block-start: var(--sp-5);
    margin-block-end: var(--sp-5);
  }

  code, pre {
    vertical-align: baseline;
    background: var(--color-bg-shaded);
    padding-inline: var(--sp-1);
    border-radius: var(--br-1);
    border-width: var(--ln-2);
    border-style: var(--border-style-default);
    border-color: var(--color-fg-xsubdued);
    font-size: .9em;
    line-height: 1.2;
    display: inline-block;
  }

  pre {
    display: block;
    overflow-x: auto;
  }

  ul, ol {
    padding: 0;
    list-style: none;
  }

  .ul, .ol {
    --trim-text-bs: var(--trim-text-bs-body);
    --trim-text-be: var(--trim-text-be-body);
    --trim-text-lh: var(--body-line-height);
    --trim-text-fs: var(--body-font-size);
  }

  .ul, .ol {
    --list-item-gap: var(--sp-4);
  }

  .rich-text :is(ul, ol) {
    --list-item-gap: var(--sp-4);
  }

  .rich-text :is(ul, ol) > li + li {
    margin-block-start: var(--list-item-gap);
  }

  :is(.ul, .ol) > li + li {
    margin-block-start: var(--list-item-gap);
  }

  .rich-text :is(ul, ol) {
    margin-block-end: var(--sp-5);
  }

  .ul, .rich-text ul {
    margin-inline-start: var(--ul-margin-block-start);
  }

  :is(.ul, .rich-text ul) > li {
    list-style: disc;
  }

  .ol, .rich-text ol {
    list-style: decimal;
  }

  :is(.ol, .rich-text ol) > li {
    --this-counter-digits: 1;
    margin-inline-start: calc(.6rem + var(--ol-counter-character-width) * var(--this-counter-digits));
  }

  :is(.ol, .rich-text ol):has(:nth-child(10)) > li {
    --this-counter-digits: 2;
  }

  :is(.ol, .rich-text ol):has(:nth-child(100)) > li {
    --this-counter-digits: 3;
  }

  .dot {
    --this-color: var(--color-fg-xsubdued);
    --this-size: var(--default-dot-size);
    width: var(--this-size);
    height: var(--this-size);
    background-color: var(--this-color);
    border-radius: 9999px;
    display: inline-block;
  }

  .dot.active {
    --this-active-color: var(--color-fg-normal);
    background-color: var(--this-active-color);
  }

  svg {
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
  }

  :is(.grid, .flex, .btn) > * > svg {
    display: block;
  }

  .icon {
    stroke-width: 1px;
    fill: rgba(0, 0, 0, 0);
    stroke: var(--color-fg-normal);
    width: var(--icon-size-3);
    height: var(--icon-size-3);
    stroke-width: var(--icon-stroke-width-3);
    display: inline-block;
    position: relative;
    overflow: visible;
  }

  .icon.color-normal {
    stroke: var(--color-fg-normal);
  }

  a:not([class*="icon-circle-"]).color-normal .icon {
    stroke: var(--color-fg-normal);
  }

  button:not([class*="icon-circle-"]).color-normal .icon {
    stroke: var(--color-fg-normal);
  }

  .icon.color-subdued {
    stroke: var(--color-fg-subdued);
  }

  a:not([class*="icon-circle-"]).color-subdued .icon {
    stroke: var(--color-fg-subdued);
  }

  button:not([class*="icon-circle-"]).color-subdued .icon {
    stroke: var(--color-fg-subdued);
  }

  .icon.color-xsubdued {
    stroke: var(--color-fg-xsubdued);
  }

  a:not([class*="icon-circle-"]).color-xsubdued .icon {
    stroke: var(--color-fg-xsubdued);
  }

  button:not([class*="icon-circle-"]).color-xsubdued .icon {
    stroke: var(--color-fg-xsubdued);
  }

  .icon.color-vibrant {
    stroke: var(--color-fg-vibrant);
  }

  a:not([class*="icon-circle-"]).color-vibrant .icon {
    stroke: var(--color-fg-vibrant);
  }

  button:not([class*="icon-circle-"]).color-vibrant .icon {
    stroke: var(--color-fg-vibrant);
  }

  a:hover > .icon.color-normal, button:hover > .icon.color-normal {
    stroke: var(--color-fg-normal-hover);
  }

  a:hover > .icon.color-subdued, button:hover > .icon.color-subdued {
    stroke: var(--color-fg-subdued-hover);
  }

  a:hover > .icon.color-xsubdued, button:hover > .icon.color-xsubdued {
    stroke: var(--color-fg-xsubdued-hover);
  }

  a:hover > .icon.color-vibrant, button:hover > .icon.color-vibrant {
    stroke: var(--color-fg-vibrant-hover);
  }

  [class*="icon-circle-"] {
    width: var(--icon-circle-size-3);
    height: var(--icon-circle-size-3);
    background-color: var(--color-fg-normal);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  [class*="icon-circle-"] .icon {
    stroke: var(--color-bg);
  }

  [class*="icon-circle-"].color-normal {
    background-color: var(--color-fg-normal);
  }

  [class*="icon-circle-"].color-subdued {
    background-color: var(--color-fg-subdued);
  }

  [class*="icon-circle-"].color-xsubdued {
    background-color: var(--color-fg-xsubdued);
  }

  [class*="icon-circle-"].color-vibrant {
    background-color: var(--color-fg-vibrant);
  }

  a[class*="icon-circle-"], button[class*="icon-circle-"] {
    cursor: pointer;
    border: 0;
  }

  :is(a[class*="icon-circle-"], button[class*="icon-circle-"]):hover {
    background-color: var(--color-fg-normal-hover);
  }

  :is(a[class*="icon-circle-"], button[class*="icon-circle-"]):hover.color-normal {
    background-color: var(--color-fg-normal-hover);
  }

  :is(a[class*="icon-circle-"], button[class*="icon-circle-"]):hover.color-subdued {
    background-color: var(--color-fg-subdued-hover);
  }

  :is(a[class*="icon-circle-"], button[class*="icon-circle-"]):hover.color-xsubdued {
    background-color: var(--color-fg-xsubdued-hover);
  }

  :is(a[class*="icon-circle-"], button[class*="icon-circle-"]):hover.color-vibrant {
    background-color: var(--color-fg-vibrant-hover);
  }

  .icon-circle-1 {
    width: var(--icon-circle-size-1);
    height: var(--icon-circle-size-1);
  }

  .icon-circle-2 {
    width: var(--icon-circle-size-2);
    height: var(--icon-circle-size-2);
  }

  .icon-circle-3 {
    width: var(--icon-circle-size-3);
    height: var(--icon-circle-size-3);
  }

  .icon-circle-4 {
    width: var(--icon-circle-size-4);
    height: var(--icon-circle-size-4);
  }

  img {
    max-width: 100%;
    height: auto;
  }

  .img-wrap {
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .img-wrap:not(:has(figcaption)) {
    overflow: hidden;
  }

  .img-wrap picture {
    object-fit: inherit;
    object-position: inherit;
    width: 100%;
    height: 100%;
  }

  .img-wrap img {
    object-fit: inherit;
    object-position: inherit;
    width: 100%;
    height: 100%;
  }

  .video-wrap {
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .video-wrap video {
    object-fit: inherit;
    object-position: inherit;
    width: 100%;
    height: 100%;
  }

  .video-wrap img {
    object-fit: inherit;
    object-position: inherit;
    width: 100%;
    height: 100%;
  }

  :has( > :where(.overlay)) {
    z-index: 0;
    position: relative;
  }

  .overlay {
    z-index: 1;
    pointer-events: none;
    justify-content: center;
    align-items: center;
    block-size: 100%;
    inline-size: 100%;
    display: flex;
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    overflow: hidden;
  }

  .overlay * {
    pointer-events: auto;
  }

  .iframe-wrap {
    aspect-ratio: 16 / 9;
    position: relative;
  }

  .iframe-wrap > iframe {
    width: 100%;
    height: 100%;
    display: block;
  }

  label {
    font-size: var(--field-label-font-size);
    line-height: var(--field-label-line-height);
    display: inline-block;
  }

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

  label:not(.sr-only) + :is(input:is([type="text"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="url"])) {
    margin-block-start: var(--input-text-label-gap);
  }

  label:not(.sr-only) + :is(textarea) {
    margin-block-start: var(--input-text-label-gap);
  }

  select, textarea {
    width: 100%;
    font-family: var(--input-text-font-family);
    font-style: var(--input-text-font-style);
    line-height: var(--input-text-line-height);
    border-width: var(--input-text-border-width);
    border-style: solid;
    border-color: var(--color-input-border);
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    min-height: var(--input-text-medium-min-height);
    font-size: var(--input-text-medium-font-size);
    padding-inline: var(--input-text-medium-padding-inline);
    padding-block: var(--input-text-medium-padding-block);
    border-radius: var(--input-text-medium-border-radius);
    display: block;
  }

  input:is([type="text"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="url"]) {
    width: 100%;
    font-family: var(--input-text-font-family);
    font-style: var(--input-text-font-style);
    line-height: var(--input-text-line-height);
    border-width: var(--input-text-border-width);
    border-style: solid;
    border-color: var(--color-input-border);
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    min-height: var(--input-text-medium-min-height);
    font-size: var(--input-text-medium-font-size);
    padding-inline: var(--input-text-medium-padding-inline);
    padding-block: var(--input-text-medium-padding-block);
    border-radius: var(--input-text-medium-border-radius);
    display: block;
  }

  input:is([type="text"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="url"]):focus-visible {
    outline-style: var(--outline-style);
    outline-width: var(--outline-width);
    outline-offset: var(--outline-offset);
    outline-color: var(--color-input-outline);
    border-color: var(--color-input-border-focus);
  }

  input:is([type="text"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="url"])::placeholder {
    color: var(--color-input-placeholder-text);
    font-style: var(--input-text-placeholder-font-style);
  }

  input:is([type="text"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="url"]):disabled {
    color: var(--color-input-text-disabled);
    border-color: var(--color-input-border-disabled);
    cursor: not-allowed;
  }

  input:is([type="text"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="url"]):disabled::placeholder {
    color: var(--color-input-text-disabled-placeholder);
  }

  input:is([type="text"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="url"]).field-error {
    background-color: var(--color-input-error-background);
    color: var(--color-input-error-text);
    border-color: var(--color-input-error-border);
  }

  input:is([type="text"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="url"]).field-error:focus-visible {
    outline-color: var(--color-input-error-outline);
  }

  input:is([type="text"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="url"]).field-error::placeholder {
    color: var(--color-input-error-placeholder);
  }

  input:is([type="text"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="url"]).size-small {
    min-height: var(--input-text-small-min-height);
    font-size: var(--input-text-small-font-size);
    padding-inline: var(--input-text-small-padding-inline);
    padding-block: var(--input-text-small-padding-block);
    border-radius: var(--input-text-small-border-radius);
  }

  :is(select, textarea):focus-visible {
    outline-style: var(--outline-style);
    outline-width: var(--outline-width);
    outline-offset: var(--outline-offset);
    outline-color: var(--color-input-outline);
    border-color: var(--color-input-border-focus);
  }

  :is(select, textarea)::placeholder {
    color: var(--color-input-placeholder-text);
    font-style: var(--input-text-placeholder-font-style);
  }

  :is(select, textarea):disabled {
    color: var(--color-input-text-disabled);
    border-color: var(--color-input-border-disabled);
    cursor: not-allowed;
  }

  :is(select, textarea):disabled::placeholder {
    color: var(--color-input-text-disabled-placeholder);
  }

  :is(select, textarea).field-error {
    background-color: var(--color-input-error-background);
    color: var(--color-input-error-text);
    border-color: var(--color-input-error-border);
  }

  :is(select, textarea).field-error:focus-visible {
    outline-color: var(--color-input-error-outline);
  }

  :is(select, textarea).field-error::placeholder {
    color: var(--color-input-error-placeholder);
  }

  :is(select, textarea).size-small {
    min-height: var(--input-text-small-min-height);
    font-size: var(--input-text-small-font-size);
    padding-inline: var(--input-text-small-padding-inline);
    padding-block: var(--input-text-small-padding-block);
    border-radius: var(--input-text-small-border-radius);
  }

  textarea {
    padding-block: calc((var(--input-text-medium-min-height)  - ( var(--input-text-medium-font-size) * var(--input-text-line-height)  + ( var(--input-text-border-width) * 2 ))) / 2);
  }

  select {
    appearance: none;
    cursor: pointer;
    padding-inline-end: 2rem;
  }

  .select {
    display: block;
    position: relative;
  }

  label:not(.sr-only) + .select {
    margin-block-start: var(--input-text-label-gap);
  }

  .select:after {
    --this-size: .6rem;
    content: "";
    block-size: var(--this-size);
    inline-size: var(--this-size);
    border-block-end: 2px solid var(--color-select-arrow-border);
    border-inline-start: 2px solid var(--color-select-arrow-border);
    transform: rotate(-45deg) translateY(calc(-50% - var(--this-size) / 2));
    right: .5rem;
    top: calc(var(--input-text-medium-min-height) / 2);
    display: block;
    position: absolute;
  }

  .select:has(select.size-small):after {
    top: calc(var(--input-text-small-min-height) / 2);
  }

  .select:has(select:disabled):after {
    border-color: var(--color-fg-xsubdued);
  }

  :is(.field-description, .field-error-description) {
    font-size: var(--field-description-font-size);
    line-height: var(--field-description-line-height);
    margin-block-start: var(--field-description-margin-block-start);
  }

  :is(.field-description, .field-error-description) + :is(.field-description, .field-error-description) {
    margin-block-start: 0;
  }

  .field-description {
    color: var(--color-field-description);
  }

  .field-error-description {
    color: var(--color-field-error-description);
  }

  fieldset {
    border: 0;
    margin: 0;
    padding: 0;
  }

  fieldset:has(input[type="radio"], input[type="checkbox"]) legend {
    margin-block-end: var(--input-text-label-gap);
  }

  input[type="radio"] {
    appearance: none;
    background: var(--color-checkradio-background);
    border-style: solid;
    border-width: var(--checkradio-border-width);
    border-color: var(--color-checkradio-border);
    height: var(--checkradio-size);
    width: var(--checkradio-size);
    vertical-align: middle;
    cursor: pointer;
    border-radius: 100%;
    display: inline-block;
    position: relative;
  }

  input[type="radio"]:checked {
    border-color: var(--color-checkradio-border-checked);
    background-color: var(--color-checkradio-background-checked);
  }

  input[type="radio"] + label {
    cursor: pointer;
  }

  input[type="radio"]:disabled {
    cursor: not-allowed;
    border-color: var(--color-checkradio-border-disabled);
    background-color: var(--color-checkradio-background-disabled);
  }

  input[type="radio"]:disabled + label {
    cursor: not-allowed;
    color: var(--color-checkradio-label-disabled);
  }

  input[type="radio"]:before {
    content: "";
    margin: auto;
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  input[type="radio"]:focus-visible {
    outline-style: var(--outline-style);
    outline-width: var(--outline-width);
    outline-offset: var(--outline-offset);
    outline-color: var(--color-checkradio-outline);
    border-color: var(--color-checkradio-border-focus);
  }

  input[type="checkbox"] {
    appearance: none;
    background: var(--color-checkradio-background);
    border-style: solid;
    border-width: var(--checkradio-border-width);
    border-color: var(--color-checkradio-border);
    height: var(--checkradio-size);
    width: var(--checkradio-size);
    vertical-align: middle;
    cursor: pointer;
    border-radius: 100%;
    display: inline-block;
    position: relative;
  }

  input[type="checkbox"]:checked {
    border-color: var(--color-checkradio-border-checked);
    background-color: var(--color-checkradio-background-checked);
  }

  input[type="checkbox"] + label {
    cursor: pointer;
  }

  input[type="checkbox"]:disabled {
    cursor: not-allowed;
    border-color: var(--color-checkradio-border-disabled);
    background-color: var(--color-checkradio-background-disabled);
  }

  input[type="checkbox"]:disabled + label {
    cursor: not-allowed;
    color: var(--color-checkradio-label-disabled);
  }

  input[type="checkbox"]:before {
    content: "";
    margin: auto;
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  input[type="checkbox"]:focus-visible {
    outline-style: var(--outline-style);
    outline-width: var(--outline-width);
    outline-offset: var(--outline-offset);
    outline-color: var(--color-checkradio-outline);
    border-color: var(--color-checkradio-border-focus);
  }

  input[type="checkbox"] {
    border-radius: 10%;
  }

  input[type="radio"]:before {
    width: 0;
    height: 0;
  }

  input[type="radio"]:checked:before {
    border: calc(var(--checkradio-size) * .21) solid transparent;
    background-color: var(--color-checkradio-mark);
    border-radius: 100%;
  }

  input[type="radio"]:disabled:checked:before {
    background-color: var(--color-checkradio-mark-disabled);
  }

  input[type="checkbox"]:checked:before {
    border-right: 3px solid var(--color-checkradio-mark);
    border-bottom: 3px solid var(--color-checkradio-mark);
    width: 40%;
    height: 60%;
    transform: rotate(45deg)translateY(-10%)translateX(-10%);
  }

  input[type="checkbox"]:disabled:checked:before {
    border-right: 3px solid var(--color-checkradio-mark-disabled);
    border-bottom: 3px solid var(--color-checkradio-mark-disabled);
  }

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

  label:has(input[type="checkbox"]:disabled, input[type="radio"]:disabled) {
    cursor: pointer;
  }

  [class*="checkradio-items-"] {
    row-gap: var(--sp-4);
    margin-block-start: calc(( var(--input-text-medium-min-height)  - var(--checkradio-size)) / 2);
  }

  [class*="checkradio-items-"].size-small {
    margin-block-start: calc(( var(--input-text-small-min-height)  - var(--checkradio-size)) / 2);
  }

  .checkradio-items-block {
    display: grid;
  }

  .checkradio-items-inline {
    align-items: flex-start;
    column-gap: var(--sp-5);
    flex-wrap: wrap;
    display: flex;
  }

  .checkradio-item {
    align-items: flex-start;
    display: flex;
  }

  .checkradio-item label {
    margin-block-start: calc((var(--checkradio-size)  - ( var(--field-label-font-size) * var(--field-label-line-height))) / 2);
    padding-inline-start: var(--sp-2);
  }

  .tooltip-wrap {
    display: inline-block;
    position: relative;
  }

  .tooltip-wrap button {
    display: block;
  }

  .tooltip-wrap svg {
    display: block;
  }

  .tooltip-wrap a {
    display: block;
  }

  .tooltip-wrap [role="tooltip"] {
    --this-shadow-color: rgba(0, 0, 0, .1);
    color: var(--color-tooltip-text);
    background-color: var(--color-tooltip-background);
    border-radius: var(--tooltip-border-radius);
    box-shadow: 0 2px 2px var(--this-shadow-color);
    z-index: 1;
    padding: var(--tooltip-padding);
    font-size: var(--tooltip-font-size);
    width: max-content;
    height: max-content;
    max-width: var(--tooltip-max-width);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--tooltip-transition-duration) linear, visibility var(--tooltip-transition-duration) linear;
    line-height: 1.2;
    display: block;
    position: absolute;
  }

  .tooltip-wrap [role="tooltip"]:after {
    content: "";
    z-index: -1;
    background-color: var(--color-tooltip-background);
    block-size: var(--tooltip-arrow-size);
    inline-size: var(--tooltip-arrow-size);
    display: block;
    position: absolute;
  }

  .tooltip-wrap [role="tooltip"] {
    text-align: center;
    margin-block-end: calc(var(--tooltip-arrow-size)  + var(--tooltip-bubble-gap));
    inset-block-end: 100%;
    inset-inline-start: 50%;
    transform: translateX(-50%);
  }

  .tooltip-wrap [role="tooltip"]:after {
    box-shadow: 2px 2px 2px var(--this-shadow-color);
    inset-block-start: calc(100% - var(--tooltip-arrow-size) * .5);
    inset-inline-start: 50%;
    transform: translateX(-50%)rotate(45deg);
  }

  .tooltip-wrap.align-bs [role="tooltip"] {
    text-align: center;
    margin-block-end: calc(var(--tooltip-arrow-size)  + var(--tooltip-bubble-gap));
    inset-block-end: 100%;
    inset-inline-start: 50%;
    transform: translateX(-50%);
  }

  .tooltip-wrap.align-bs [role="tooltip"]:after {
    box-shadow: 2px 2px 2px var(--this-shadow-color);
    inset-block-start: calc(100% - var(--tooltip-arrow-size) * .5);
    inset-inline-start: 50%;
    transform: translateX(-50%)rotate(45deg);
  }

  .tooltip-wrap.align-be [role="tooltip"] {
    text-align: center;
    margin-block-start: calc(var(--tooltip-arrow-size)  + var(--tooltip-bubble-gap));
    margin-block-end: initial;
    inset-block-start: 100%;
    inset-block-end: initial;
    inset-inline-start: 50%;
    transform: translateX(-50%);
  }

  .tooltip-wrap.align-be [role="tooltip"]:after {
    box-shadow: unset;
    inset-block-start: initial;
    inset-block-end: calc(100% - var(--tooltip-arrow-size) * .5);
    inset-inline-start: 50%;
    transform: translateX(-50%)rotate(45deg);
  }

  .tooltip-wrap.align-is [role="tooltip"] {
    text-align: start;
    margin-inline-end: calc(var(--tooltip-arrow-size)  + var(--tooltip-bubble-gap));
    inset-block-start: 50%;
    inset-block-end: initial;
    inset-inline-start: initial;
    inset-inline-end: 100%;
    transform: translateY(-50%);
  }

  .tooltip-wrap.align-is [role="tooltip"]:after {
    inset-block-start: 50%;
    inset-inline-start: initial;
    box-shadow: unset;
    inset-inline-start: calc(100% - var(--tooltip-arrow-size) * .5);
    transform: translateY(-50%)rotate(45deg);
  }

  .tooltip-wrap.align-ie [role="tooltip"] {
    text-align: start;
    margin-inline-start: calc(var(--tooltip-arrow-size)  + var(--tooltip-bubble-gap));
    inset-block-start: 50%;
    inset-block-end: initial;
    inset-inline-start: 100%;
    transform: translateY(-50%);
  }

  .tooltip-wrap.align-ie [role="tooltip"]:after {
    box-shadow: unset;
    inset-block-start: 50%;
    inset-inline-start: initial;
    inset-inline-end: calc(100% - var(--tooltip-arrow-size) * .5);
    transform: translateY(-50%)rotate(45deg);
  }

  .tooltip-wrap:has(a, button).open [role="tooltip"] {
    opacity: 1;
    visibility: visible;
  }

  .tooltip-wrap:has(a, button):hover [role="tooltip"] {
    opacity: 1;
    visibility: visible;
  }

  .tooltip-wrap:has(button:focus-visible) [role="tooltip"] {
    opacity: 1;
    visibility: visible;
  }

  .tooltip-wrap:has(a:focus-visible) [role="tooltip"] {
    opacity: 1;
    visibility: visible;
  }

  dialog {
    color: var(--color-text);
  }

  .modal {
    padding: var(--sp-4);
    background: none;
    border: 0;
    block-size: 100%;
    max-block-size: 100%;
    inline-size: 100%;
    max-inline-size: 100%;
    margin: 0;
  }

  .modal::backdrop {
    background-color: var(--modal-backdrop-color);
    opacity: var(--modal-backdrop-opacity);
  }

  .modal-center-content {
    justify-content: center;
    align-items: center;
    block-size: 100%;
    inline-size: 100%;
    display: flex;
  }

  .modal-center-content .modal-content {
    inline-size: 100%;
  }

  .modal-content {
    block-size: auto;
    padding: var(--sp-5);
    background-color: var(--color-bg);
    border-radius: var(--modal-border-radius);
    max-inline-size: var(--modal-small-max-inline-size);
    margin-block: 0;
    margin-inline: auto;
    position: relative;
  }

  .modal-small .modal-content {
    max-inline-size: var(--modal-small-max-inline-size);
  }

  .modal-medium .modal-content {
    max-inline-size: var(--modal-medium-max-inline-size);
  }

  .modal-large .modal-content {
    max-inline-size: var(--modal-large-max-inline-size);
  }

  .modal-full-inline-size .modal-content {
    max-inline-size: 100%;
  }

  .modal-full-block-size .modal-content {
    min-block-size: 100%;
  }

  .modal-full-size .modal-content {
    min-block-size: 100%;
    max-inline-size: 100%;
  }

  .modal-screen-size, [class*="modal-screen-block-size"] {
    padding: 0;
  }

  :is(.modal-screen-size, [class*="modal-screen-block-size"]) .modal-content {
    border-radius: 0;
    min-block-size: 100%;
    margin-block: 0;
  }

  :is(.modal-screen-size, [class*="modal-screen-block-size"]) .modal-close {
    position: fixed;
  }

  .modal-screen-block-size-inline-end .modal-content {
    margin-inline-end: 0;
  }

  .modal-screen-block-size-inline-start .modal-content {
    margin-inline-start: 0;
  }

  .modal-screen-size .modal-content {
    min-block-size: 100%;
    max-inline-size: 100%;
    margin-inline: 0;
  }

  .modal-close {
    padding: var(--modal-close-button-padding);
    border-radius: var(--modal-border-radius);
    background: var(--color-bg);
    display: block;
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
  }

  .modal-close svg {
    display: block;
  }

  .modal-close:focus-visible {
    outline-offset: calc((( var(--sp-3)) * -1 ));
  }

  .modal-close-outside {
    z-index: 1;
    margin: var(--sp-3);
    position: fixed;
    inset-block-start: 0;
    inset-inline-end: 0;
  }

  .modal-close-outside button {
    outline-color: var(--modal-close-outside-icon-color);
    display: block;
  }

  .modal-close-outside .icon {
    stroke: var(--modal-close-outside-icon-color);
  }

  .modal-fade[open] {
    opacity: 1;
    transform: scale(1);
  }

  .modal-fade {
    opacity: 0;
    transform: scale(var(--modal-fade-scale-amount));
    transition: opacity var(--modal-fade-transition-duration) ease-out, transform calc(var(--modal-fade-transition-duration) * .8) ease-out, overlay var(--modal-fade-transition-duration) ease-out allow-discrete, display var(--modal-fade-transition-duration) ease-out allow-discrete;
  }

  @starting-style {
    .modal-fade[open] {
      opacity: 0;
      transform: scale(var(--modal-fade-scale-amount));
    }
  }

  .modal-fade::backdrop {
    opacity: 0;
    transition: display var(--modal-fade-transition-duration) ease-out allow-discrete, overlay var(--modal-fade-transition-duration) ease-out allow-discrete, opacity var(--modal-fade-transition-duration) ease-out;
  }

  .modal-fade[open]::backdrop {
    opacity: var(--modal-backdrop-opacity);
  }

  @starting-style {
    .modal-fade[open]::backdrop {
      opacity: 0;
    }
  }

  [class*="modal-slide-from-"]::backdrop {
    opacity: 0;
    transition: display var(--modal-slide-transition-duration) ease-out allow-discrete, overlay var(--modal-slide-transition-duration) ease-out allow-discrete, opacity var(--modal-slide-transition-duration) ease-out;
  }

  [class*="modal-slide-from-"][open]::backdrop {
    opacity: var(--modal-backdrop-opacity);
  }

  @starting-style {
    [class*="modal-slide-from-"][open]::backdrop {
      opacity: 0;
    }
  }

  [class*="modal-slide-from-"] {
    transition: transform var(--modal-slide-transition-duration) ease-out, overlay var(--modal-slide-transition-duration) ease-out allow-discrete, display var(--modal-slide-transition-duration) ease-out allow-discrete;
  }

  [class*="modal-slide-from-inline"][open] {
    transform: translateX(0%);
  }

  [class*="modal-slide-from-block"][open] {
    transform: translateY(0%);
  }

  .modal-slide-from-inline-end {
    transform: translateX(100%);
  }

  @starting-style {
    .modal-slide-from-inline-end[open] {
      transform: translateX(100%);
    }
  }

  .modal-slide-from-inline-start {
    transform: translateX(-100%);
  }

  @starting-style {
    .modal-slide-from-inline-start[open] {
      transform: translateX(-100%);
    }
  }

  .modal-slide-from-block-end {
    transform: translateY(100%);
  }

  @starting-style {
    .modal-slide-from-block-end[open] {
      transform: translateY(100%);
    }
  }

  .modal-slide-from-block-start {
    transform: translateY(-100%);
  }

  @starting-style {
    .modal-slide-from-block-start[open] {
      transform: translateY(-100%);
    }
  }

  summary {
    cursor: pointer;
    outline: 0;
  }

  summary .icon {
    display: block;
  }

  summary:has(.icon) {
    list-style: none;
  }

  summary:has(.icon)::-webkit-details-marker {
    display: none;
  }

  summary:focus-visible {
    outline-style: var(--outline-style);
    outline-width: var(--outline-width);
    outline-offset: var(--outline-offset);
    outline-color: var(--color-outline);
  }

  .details-1 {
    --this-icon-gap: var(--sp-3);
    --this-icon-size: var(--icon-size-1);
  }

  .details-1 .icon {
    position: relative;
  }

  .details-1 summary {
    gap: var(--this-icon-gap);
    align-items: flex-start;
    display: flex;
  }

  .details-1:has(summary .icon-size-2) {
    --this-icon-gap: var(--sp-4);
    --this-icon-size: var(--icon-size-2);
  }

  .details-1 .details-content {
    margin-inline-start: calc(var(--this-icon-gap)  + var(--this-icon-size));
  }

  .toggle-rotate-90 {
    transition: transform var(--toggle-rotate-90-duration) ease-out;
    transform: rotate(0);
  }

  details[open] .toggle-rotate-90 {
    transform: rotate(90deg);
  }

  .collapse:has(.collapse-toggle[aria-expanded="true"]) .toggle-rotate-90 {
    transform: rotate(90deg);
  }

  .toggle-rotate-180 {
    transition: transform var(--toggle-rotate-180-duration) ease-out;
    transform: rotate(0);
  }

  details[open] .toggle-rotate-180 {
    transform: rotate(180deg);
  }

  .collapse:has(.collapse-toggle[aria-expanded="true"]) .toggle-rotate-180 {
    transform: rotate(180deg);
  }

  .toggle-swap-icons .icon {
    display: block;
  }

  .toggle-swap-icons .icon + .icon {
    display: none;
  }

  details[open] .toggle-swap-icons .icon {
    display: none;
  }

  details[open] .toggle-swap-icons .icon + .icon {
    display: block;
  }

  .collapse:has(.collapse-toggle[aria-expanded="true"]) .toggle-swap-icons .icon {
    display: none;
  }

  .collapse:has(.collapse-toggle[aria-expanded="true"]) .toggle-swap-icons .icon + .icon {
    display: block;
  }

  .collapse:has(.collapse-toggle[aria-expanded="false"]) .collapse-content:not(.toggle-transition-height) {
    display: none;
  }

  .toggle-transition-height {
    transition: grid-template-rows var(--toggle-transition-height-duration);
    grid-template-rows: 0fr;
    display: grid;
  }

  .toggle-transition-height > .tth-inner {
    min-height: 0;
    transition: visibility var(--toggle-transition-height-duration);
    visibility: hidden;
    overflow: hidden;
  }

  .collapse:has(.collapse-toggle[aria-expanded="true"]) .toggle-transition-height {
    grid-template-rows: 1fr;
  }

  .collapse:has(.collapse-toggle[aria-expanded="true"]) .toggle-transition-height > .tth-inner {
    visibility: visible;
  }

  .popover1-anchor {
    position: relative;
  }

  .popover1 {
    z-index: 1;
    position: absolute;
  }

  .popover1, .popover1[data-popover1-state="closed"] {
    visibility: hidden;
  }

  .popover1[data-popover1-state="open"] {
    visibility: visible;
  }

  .popover1[data-dependent-content-slides][data-popover1-state="closed"] {
    transition: visibility 0s ease-out var(--content-slide-transition-duration);
  }

  .popover1[data-popover1-state="closed"] .popover1 [class*="content-slide-from-"] {
    transition: none;
  }

  .content-slide-wrap {
    overflow: hidden;
  }

  [class*="content-slide-from-"] {
    transition: transform var(--content-slide-transition-duration) ease-out;
  }

  [class*="content-slide-from-inline"] {
    transform: translateX(0%);
  }

  [class*="content-slide-from-block"] {
    transform: translateY(0%);
  }

  .content-slide-from-inline-end:not(.cs-visible) {
    transform: translateX(100%);
  }

  .content-slide-from-inline-start:not(.cs-visible) {
    transform: translateX(-100%);
  }

  .content-slide-from-block-end:not(.cs-visible) {
    transform: translateY(100%);
  }

  .content-slide-from-block-start:not(.cs-visible) {
    transform: translateY(-100%);
  }

  .table-1 {
    border-collapse: collapse;
    border-spacing: 0;
    caption-side: bottom;
    text-align: left;
    width: 100%;
    line-height: var(--table-line-height);
    --cell-vertical-align: var(--table-vertical-align);
    --cell-pad-b: var(--table-cell-pad-b);
    --cell-pad-bs: var(--cell-pad-b);
    --cell-pad-be: var(--cell-pad-b);
    --cell-pad-i: var(--table-cell-pad-i);
    --cell-pad-is: var(--cell-pad-h);
    --cell-pad-ie: var(--cell-pad-h);
    --row-border-width: var(--table-row-border-width);
    --row-border-color: var(--table-row-border-color);
  }

  .table-1 thead {
    --cell-pad-b: var(--table-thead-cell-pad-b);
    --cell-pad-bs: var(--cell-pad-b);
    --cell-pad-be: var(--cell-pad-b);
    --row-border-color: var(--table-thead-row-border-color);
  }

  .table-1 th {
    text-align: inherit;
  }

  .table-1 td {
    padding-block-start: var(--cell-pad-bs);
    padding-block-end: var(--cell-pad-be);
    padding-inline-start: var(--cell-pad-is);
    padding-inline-end: var(--cell-pad-ie);
  }

  .table-1 th {
    padding-block-start: var(--cell-pad-bs);
    padding-block-end: var(--cell-pad-be);
    padding-inline-start: var(--cell-pad-is);
    padding-inline-end: var(--cell-pad-ie);
  }

  .last-column-align-end tr > th:last-child {
    text-align: end;
  }

  .last-column-align-end tr > td:last-child {
    text-align: end;
  }

  .lines-b thead tr {
    border-block-end-style: solid;
    border-block-end-width: var(--row-border-width);
    border-block-end-color: var(--row-border-color);
  }

  .lines-b tbody tr {
    border-block-end-style: solid;
    border-block-end-width: var(--row-border-width);
    border-block-end-color: var(--row-border-color);
  }

  tr.border-be {
    border-block-end-width: var(--row-border-width);
    border-block-end-color: var(--row-border-color);
  }

  tr.border-bs {
    border-block-start-width: var(--row-border-width);
    border-block-start-color: var(--row-border-color);
  }

  .table-wrap {
    overflow-x: auto;
  }

  .demo-box {
    border: 1px dotted #bbb;
  }

  .demo-box-2 {
    background-color: var(--clr-neutral-20);
  }

  .breakpoint-indicator {
    z-index: 1000;
    padding: var(--sp-0) var(--sp-2);
    font-size: var(--fs-2);
    opacity: .5;
    text-align: center;
    border-start-end-radius: var(--br-1);
    inline-size: 1.8rem;
    position: fixed;
    inset-block-end: 0;
    inset-inline-start: 0;
  }
}

@layer patterns {
  html:has(.header-1--submenu-simple:not(.header-1--fixed)) {
    overflow-x: hidden;
  }

  body:has(.header-1--submenu-simple:not(.header-1--fixed)) {
    overflow-x: hidden;
  }

  .header-1 {
    width: 100%;
  }

  .header-1__bar {
    z-index: 1;
    width: 100%;
    position: relative;
  }

  .header-1__bar:after {
    content: "";
    border-block-end: var(--ln-1) solid var(--color-fg-xxsubdued);
    z-index: 2;
    width: 100%;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
  }

  .header-1__bar > .container {
    height: var(--header-1-height);
  }

  .header-1__bar > .container > .grid {
    height: 100%;
  }

  .header-1__spacer {
    height: var(--header-1-height);
    display: none;
  }

  .header-1__nav-links {
    height: 100%;
  }

  .header-1__nav-links > ul {
    height: 100%;
    display: flex;
  }

  .header-1__nav-links > ul > li {
    height: 100%;
    padding-inline: calc(var(--header-1-nav-links-column-gap) * .5);
    align-items: center;
    display: flex;
  }

  .header-1__nav-links > ul > li:last-child {
    padding-inline-end: 0;
  }

  .header-1__nav-links > ul > li:hover > .header-1__nav-submenu {
    visibility: visible;
    opacity: 1;
    transition: visibility .15s ease-out .1s, opacity .15s ease-out .1s;
  }

  .header-1__nav-links > ul > li:focus-within > .header-1__nav-submenu {
    visibility: visible;
    opacity: 1;
    transition: visibility .15s ease-out .1s, opacity .15s ease-out .1s;
  }

  .header-1__nav-links > ul > li.submenu-open > .header-1__nav-submenu {
    visibility: visible;
    opacity: 1;
    transition: visibility .15s ease-out .1s, opacity .15s ease-out .1s;
  }

  .header-1__nav-links > ul > li:has(a.last-clicked-anchor-link) > .header-1__nav-submenu {
    visibility: hidden;
    opacity: 0;
    transition: visibility, opacity;
  }

  .header-1__nav-submenu {
    visibility: hidden;
    opacity: 0;
    z-index: 1;
    transition: visibility .15s ease-out .2s, opacity .15s ease-out .2s;
    position: absolute;
    top: 100%;
    left: 0;
  }

  .submenu-open .header-1__nav-submenu {
    z-index: 2;
  }

  .header-1--submenu-complex .header-1__nav-submenu {
    border-block-end: var(--ln-1) solid var(--color-fg-xxsubdued);
    width: 100vw;
  }

  .header-1--submenu-simple .header-1__nav-links > ul {
    position: relative;
  }

  .header-1--submenu-simple .header-1__nav-submenu {
    width: max-content;
    padding-inline: calc(var(--header-1-nav-links-column-gap) * .5);
  }

  .header-1--submenu-simple .header-1__nav-submenu .container-grid {
    padding: 0;
    display: block;
  }

  .header-1--submenu-simple .header-1__nav-submenu > div {
    z-index: 1;
    position: relative;
  }

  .header-1--submenu-simple .header-1__nav-submenu:after {
    content: "";
    border-block-end: var(--ln-1) solid var(--color-fg-xxsubdued);
    z-index: 0;
    background-color: var(--color-bg);
    width: 200vw;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: -100vw;
  }

  .header-1--fixed .header-1__bar {
    position: fixed;
    top: 0;
  }

  .header-1--fixed .header-1__spacer {
    display: block;
  }

  .header-1--transparent.header-1--static, .header-1--transparent.header-1--static-scroll-fixed {
    margin-block-end: calc(var(--header-1-height) * -1);
  }

  .header-1__scroll-observer {
    width: 100%;
    height: 1px;
    position: absolute;
  }

  .header-1--transparent.header-1--fixed .header-1__scroll-observer {
    top: 0;
  }

  .header-1--transparent.header-1--static-scroll-fixed .header-1__bar {
    transition: background-color .15s ease-out .2s;
  }

  .header-1--transparent.header-1--static-scroll-fixed .header-1__bar:after {
    transition: border-block-end-color .15s ease-out .2s;
  }

  .header-1--transparent.header-1--static-scroll-fixed .header-1__scroll-observer {
    top: var(--header-1-height);
  }

  .header-1--transparent.header-1--static-scroll-fixed:has(.header-1__scroll-observer.intersecting-0) .header-1__bar {
    background-color: var(--color-bg);
    transition: background-color;
    animation: .3s ease-out forwards header1SlideDown;
    position: fixed;
  }

  .header-1--transparent.header-1--static-scroll-fixed:has(.header-1__scroll-observer.intersecting-0) .header-1__bar:after {
    border-block-end-color: var(--color-fg-xxsubdued);
    transition: border-block-end-color;
  }

  @keyframes header1SlideDown {
    from {
      top: calc(var(--header-1-height) * -1.5);
    }

    to {
      top: 0;
    }
  }

  .header-1--transparent .header-1__bar {
    background-color: rgba(0, 0, 0, 0);
    transition: background-color .15s ease-out .2s;
  }

  .header-1--transparent .header-1__bar:after {
    border-block-end-color: rgba(0, 0, 0, 0);
    transition: border-block-end-color .15s ease-out .2s;
  }

  .header-1--transparent .header-1__spacer {
    display: none;
  }

  .header-1--transparent.header-1--has-submenu:has(.header-1__nav-links > ul > li.has-nav-submenu:hover) .header-1__bar {
    background-color: var(--color-bg);
    transition: background-color .15s ease-out .1s;
  }

  .header-1--transparent.header-1--has-submenu:has(.header-1__nav-links > ul > li.has-nav-submenu:hover) .header-1__bar:after {
    border-block-end-color: var(--color-fg-xxsubdued);
    transition: border-block-end-color .15s ease-out .1s;
  }

  .header-1--transparent.header-1--has-submenu:has(.header-1__nav-links > ul > li.has-nav-submenu:focus-within) .header-1__bar {
    background-color: var(--color-bg);
    transition: background-color .15s ease-out .1s;
  }

  .header-1--transparent.header-1--has-submenu:has(.header-1__nav-links > ul > li.has-nav-submenu:focus-within) .header-1__bar:after {
    border-block-end-color: var(--color-fg-xxsubdued);
    transition: border-block-end-color .15s ease-out .1s;
  }

  .header-1--transparent.header-1--has-submenu:has(.header-1__nav-links > ul > li.has-nav-submenu.submenu-open) .header-1__bar {
    background-color: var(--color-bg);
    transition: background-color .15s ease-out .1s;
  }

  .header-1--transparent.header-1--has-submenu:has(.header-1__nav-links > ul > li.has-nav-submenu.submenu-open) .header-1__bar:after {
    border-block-end-color: var(--color-fg-xxsubdued);
    transition: border-block-end-color .15s ease-out .1s;
  }

  .header-1--transparent.header-1--fixed:has(.header-1__scroll-observer.intersecting-0) .header-1__bar {
    background-color: var(--color-bg);
    transition: background-color ease-out;
  }

  .header-1--transparent.header-1--fixed:has(.header-1__scroll-observer.intersecting-0) .header-1__bar:after {
    border-block-end-color: var(--color-fg-xxsubdued);
    transition: border-block-end-color ease-out;
  }
}

@layer utilities {
  [hidden] {
    display: none;
  }

  .block {
    display: block;
  }

  .inline, .inline-block {
    display: inline;
  }

  .inline-flex {
    display: inline-flex;
  }

  .inline-block {
    display: inline-block;
  }

  .size-b-100 {
    block-size: 100%;
  }

  .size-i-100 {
    inline-size: 100%;
  }

  .size-100 {
    block-size: 100%;
    inline-size: 100%;
  }

  .grid-stack {
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    display: grid;
  }

  .grid-stack > * {
    grid-area: 1 / 1 / 2 / 2;
  }

  .remove-outer-children-margin > :first-child {
    margin-block-start: 0;
  }

  .remove-outer-children-margin > :first-child > :first-child {
    margin-block-start: 0;
  }

  .remove-outer-children-margin > :first-child > :first-child > :first-child {
    margin-block-start: 0;
  }

  .remove-outer-children-margin > :last-child {
    margin-block-end: 0;
  }

  .remove-outer-children-margin > :last-child > :last-child {
    margin-block-end: 0;
  }

  .remove-outer-children-margin > :last-child > :last-child > :last-child {
    margin-block-end: 0;
  }

  .mar-auto {
    margin: auto;
  }

  .mar-0 {
    margin: 0;
  }

  .mar-1 {
    margin: var(--sp-1);
  }

  .mar-2 {
    margin: var(--sp-2);
  }

  .mar-3 {
    margin: var(--sp-3);
  }

  .mar-4 {
    margin: var(--sp-4);
  }

  .mar-5 {
    margin: var(--sp-5);
  }

  .mar-6 {
    margin: var(--sp-6);
  }

  .mar-7 {
    margin: var(--sp-7);
  }

  .mar-8 {
    margin: var(--sp-8);
  }

  .mar-9 {
    margin: var(--sp-9);
  }

  .mar-10 {
    margin: var(--sp-10);
  }

  .mar-bs-auto {
    margin-block-start: auto;
  }

  .mar-bs-0 {
    margin-block-start: 0;
  }

  .mar-bs-1 {
    margin-block-start: var(--sp-1);
  }

  .mar-bs-2 {
    margin-block-start: var(--sp-2);
  }

  .mar-bs-3 {
    margin-block-start: var(--sp-3);
  }

  .mar-bs-4 {
    margin-block-start: var(--sp-4);
  }

  .mar-bs-5 {
    margin-block-start: var(--sp-5);
  }

  .mar-bs-6 {
    margin-block-start: var(--sp-6);
  }

  .mar-bs-7 {
    margin-block-start: var(--sp-7);
  }

  .mar-bs-8 {
    margin-block-start: var(--sp-8);
  }

  .mar-bs-9 {
    margin-block-start: var(--sp-9);
  }

  .mar-bs-10 {
    margin-block-start: var(--sp-10);
  }

  .mar-be-auto {
    margin-block-end: auto;
  }

  .mar-be-0 {
    margin-block-end: 0;
  }

  .mar-be-1 {
    margin-block-end: var(--sp-1);
  }

  .mar-be-2 {
    margin-block-end: var(--sp-2);
  }

  .mar-be-3 {
    margin-block-end: var(--sp-3);
  }

  .mar-be-4 {
    margin-block-end: var(--sp-4);
  }

  .mar-be-5 {
    margin-block-end: var(--sp-5);
  }

  .mar-be-6 {
    margin-block-end: var(--sp-6);
  }

  .mar-be-7 {
    margin-block-end: var(--sp-7);
  }

  .mar-be-8 {
    margin-block-end: var(--sp-8);
  }

  .mar-be-9 {
    margin-block-end: var(--sp-9);
  }

  .mar-be-10 {
    margin-block-end: var(--sp-10);
  }

  .mar-is-auto {
    margin-inline-start: auto;
  }

  .mar-is-0 {
    margin-inline-start: 0;
  }

  .mar-is-1 {
    margin-inline-start: var(--sp-1);
  }

  .mar-is-2 {
    margin-inline-start: var(--sp-2);
  }

  .mar-is-3 {
    margin-inline-start: var(--sp-3);
  }

  .mar-is-4 {
    margin-inline-start: var(--sp-4);
  }

  .mar-is-5 {
    margin-inline-start: var(--sp-5);
  }

  .mar-is-6 {
    margin-inline-start: var(--sp-6);
  }

  .mar-is-7 {
    margin-inline-start: var(--sp-7);
  }

  .mar-is-8 {
    margin-inline-start: var(--sp-8);
  }

  .mar-is-9 {
    margin-inline-start: var(--sp-9);
  }

  .mar-is-10 {
    margin-inline-start: var(--sp-10);
  }

  .mar-ie-auto {
    margin-inline-end: auto;
  }

  .mar-ie-0 {
    margin-inline-end: 0;
  }

  .mar-ie-1 {
    margin-inline-end: var(--sp-1);
  }

  .mar-ie-2 {
    margin-inline-end: var(--sp-2);
  }

  .mar-ie-3 {
    margin-inline-end: var(--sp-3);
  }

  .mar-ie-4 {
    margin-inline-end: var(--sp-4);
  }

  .mar-ie-5 {
    margin-inline-end: var(--sp-5);
  }

  .mar-ie-6 {
    margin-inline-end: var(--sp-6);
  }

  .mar-ie-7 {
    margin-inline-end: var(--sp-7);
  }

  .mar-ie-8 {
    margin-inline-end: var(--sp-8);
  }

  .mar-ie-9 {
    margin-inline-end: var(--sp-9);
  }

  .mar-ie-10 {
    margin-inline-end: var(--sp-10);
  }

  .mar-b-auto {
    margin-block: auto;
  }

  .mar-b-0 {
    margin-block: 0;
  }

  .mar-b-1 {
    margin-block: var(--sp-1);
  }

  .mar-b-2 {
    margin-block: var(--sp-2);
  }

  .mar-b-3 {
    margin-block: var(--sp-3);
  }

  .mar-b-4 {
    margin-block: var(--sp-4);
  }

  .mar-b-5 {
    margin-block: var(--sp-5);
  }

  .mar-b-6 {
    margin-block: var(--sp-6);
  }

  .mar-b-7 {
    margin-block: var(--sp-7);
  }

  .mar-b-8 {
    margin-block: var(--sp-8);
  }

  .mar-b-9 {
    margin-block: var(--sp-9);
  }

  .mar-b-10 {
    margin-block: var(--sp-10);
  }

  .mar-i-auto {
    margin-inline: auto;
  }

  .mar-i-0 {
    margin-inline: 0;
  }

  .mar-i-1 {
    margin-inline: var(--sp-1);
  }

  .mar-i-2 {
    margin-inline: var(--sp-2);
  }

  .mar-i-3 {
    margin-inline: var(--sp-3);
  }

  .mar-i-4 {
    margin-inline: var(--sp-4);
  }

  .mar-i-5 {
    margin-inline: var(--sp-5);
  }

  .mar-i-6 {
    margin-inline: var(--sp-6);
  }

  .mar-i-7 {
    margin-inline: var(--sp-7);
  }

  .mar-i-8 {
    margin-inline: var(--sp-8);
  }

  .mar-i-9 {
    margin-inline: var(--sp-9);
  }

  .mar-i-10 {
    margin-inline: var(--sp-10);
  }

  .pad-0 {
    padding: 0;
  }

  .pad-1 {
    padding: var(--sp-1);
  }

  .pad-2 {
    padding: var(--sp-2);
  }

  .pad-3 {
    padding: var(--sp-3);
  }

  .pad-4 {
    padding: var(--sp-4);
  }

  .pad-5 {
    padding: var(--sp-5);
  }

  .pad-6 {
    padding: var(--sp-6);
  }

  .pad-7 {
    padding: var(--sp-7);
  }

  .pad-8 {
    padding: var(--sp-8);
  }

  .pad-9 {
    padding: var(--sp-9);
  }

  .pad-10 {
    padding: var(--sp-10);
  }

  .pad-bs-0 {
    padding-block-start: 0;
  }

  .pad-bs-1 {
    padding-block-start: var(--sp-1);
  }

  .pad-bs-2 {
    padding-block-start: var(--sp-2);
  }

  .pad-bs-3 {
    padding-block-start: var(--sp-3);
  }

  .pad-bs-4 {
    padding-block-start: var(--sp-4);
  }

  .pad-bs-5 {
    padding-block-start: var(--sp-5);
  }

  .pad-bs-6 {
    padding-block-start: var(--sp-6);
  }

  .pad-bs-7 {
    padding-block-start: var(--sp-7);
  }

  .pad-bs-8 {
    padding-block-start: var(--sp-8);
  }

  .pad-bs-9 {
    padding-block-start: var(--sp-9);
  }

  .pad-bs-10 {
    padding-block-start: var(--sp-10);
  }

  .pad-be-0 {
    padding-block-end: 0;
  }

  .pad-be-1 {
    padding-block-end: var(--sp-1);
  }

  .pad-be-2 {
    padding-block-end: var(--sp-2);
  }

  .pad-be-3 {
    padding-block-end: var(--sp-3);
  }

  .pad-be-4 {
    padding-block-end: var(--sp-4);
  }

  .pad-be-5 {
    padding-block-end: var(--sp-5);
  }

  .pad-be-6 {
    padding-block-end: var(--sp-6);
  }

  .pad-be-7 {
    padding-block-end: var(--sp-7);
  }

  .pad-be-8 {
    padding-block-end: var(--sp-8);
  }

  .pad-be-9 {
    padding-block-end: var(--sp-9);
  }

  .pad-be-10 {
    padding-block-end: var(--sp-10);
  }

  .pad-is-0 {
    padding-inline-start: 0;
  }

  .pad-is-1 {
    padding-inline-start: var(--sp-1);
  }

  .pad-is-2 {
    padding-inline-start: var(--sp-2);
  }

  .pad-is-3 {
    padding-inline-start: var(--sp-3);
  }

  .pad-is-4 {
    padding-inline-start: var(--sp-4);
  }

  .pad-is-5 {
    padding-inline-start: var(--sp-5);
  }

  .pad-is-6 {
    padding-inline-start: var(--sp-6);
  }

  .pad-is-7 {
    padding-inline-start: var(--sp-7);
  }

  .pad-is-8 {
    padding-inline-start: var(--sp-8);
  }

  .pad-is-9 {
    padding-inline-start: var(--sp-9);
  }

  .pad-is-10 {
    padding-inline-start: var(--sp-10);
  }

  .pad-ie-0 {
    padding-inline-end: 0;
  }

  .pad-ie-1 {
    padding-inline-end: var(--sp-1);
  }

  .pad-ie-2 {
    padding-inline-end: var(--sp-2);
  }

  .pad-ie-3 {
    padding-inline-end: var(--sp-3);
  }

  .pad-ie-4 {
    padding-inline-end: var(--sp-4);
  }

  .pad-ie-5 {
    padding-inline-end: var(--sp-5);
  }

  .pad-ie-6 {
    padding-inline-end: var(--sp-6);
  }

  .pad-ie-7 {
    padding-inline-end: var(--sp-7);
  }

  .pad-ie-8 {
    padding-inline-end: var(--sp-8);
  }

  .pad-ie-9 {
    padding-inline-end: var(--sp-9);
  }

  .pad-ie-10 {
    padding-inline-end: var(--sp-10);
  }

  .pad-b-0 {
    padding-block: 0;
  }

  .pad-b-1 {
    padding-block: var(--sp-1);
  }

  .pad-b-2 {
    padding-block: var(--sp-2);
  }

  .pad-b-3 {
    padding-block: var(--sp-3);
  }

  .pad-b-4 {
    padding-block: var(--sp-4);
  }

  .pad-b-5 {
    padding-block: var(--sp-5);
  }

  .pad-b-6 {
    padding-block: var(--sp-6);
  }

  .pad-b-7 {
    padding-block: var(--sp-7);
  }

  .pad-b-8 {
    padding-block: var(--sp-8);
  }

  .pad-b-9 {
    padding-block: var(--sp-9);
  }

  .pad-b-10 {
    padding-block: var(--sp-10);
  }

  .pad-i-1 {
    padding-inline: var(--sp-1);
  }

  .pad-i-2 {
    padding-inline: var(--sp-2);
  }

  .pad-i-3 {
    padding-inline: var(--sp-3);
  }

  .pad-i-4 {
    padding-inline: var(--sp-4);
  }

  .pad-i-5 {
    padding-inline: var(--sp-5);
  }

  .pad-i-6 {
    padding-inline: var(--sp-6);
  }

  .pad-i-7 {
    padding-inline: var(--sp-7);
  }

  .pad-i-8 {
    padding-inline: var(--sp-8);
  }

  .pad-i-9 {
    padding-inline: var(--sp-9);
  }

  .pad-i-10 {
    padding-inline: var(--sp-10);
  }

  .gap-0 {
    gap: 0;
  }

  .gap-1 {
    gap: var(--sp-1);
  }

  .gap-2 {
    gap: var(--sp-2);
  }

  .gap-3 {
    gap: var(--sp-3);
  }

  .gap-4 {
    gap: var(--sp-4);
  }

  .gap-5 {
    gap: var(--sp-5);
  }

  .gap-6 {
    gap: var(--sp-6);
  }

  .gap-7 {
    gap: var(--sp-7);
  }

  .gap-8 {
    gap: var(--sp-8);
  }

  .gap-9 {
    gap: var(--sp-9);
  }

  .gap-10 {
    gap: var(--sp-10);
  }

  [class*="shift-"] {
    position: relative;
  }

  .shift-bs-1 {
    inset-block-start: calc(-1 * var(--shift-increment));
  }

  .shift-bs-2 {
    inset-block-start: calc(-2 * var(--shift-increment));
  }

  .shift-bs-3 {
    inset-block-start: calc(-3 * var(--shift-increment));
  }

  .shift-bs-4 {
    inset-block-start: calc(-4 * var(--shift-increment));
  }

  .shift-bs-5 {
    inset-block-start: calc(-5 * var(--shift-increment));
  }

  .shift-be-1 {
    inset-block-end: calc(-1 * var(--shift-increment));
  }

  .shift-be-2 {
    inset-block-end: calc(-2 * var(--shift-increment));
  }

  .shift-be-3 {
    inset-block-end: calc(-3 * var(--shift-increment));
  }

  .shift-be-4 {
    inset-block-end: calc(-4 * var(--shift-increment));
  }

  .shift-be-5 {
    inset-block-end: calc(-5 * var(--shift-increment));
  }

  .shift-is-1 {
    inset-inline-start: calc(-1 * var(--shift-increment));
  }

  .shift-is-2 {
    inset-inline-start: calc(-2 * var(--shift-increment));
  }

  .shift-is-3 {
    inset-inline-start: calc(-3 * var(--shift-increment));
  }

  .shift-is-4 {
    inset-inline-start: calc(-4 * var(--shift-increment));
  }

  .shift-is-5 {
    inset-inline-start: calc(-5 * var(--shift-increment));
  }

  .shift-ie-1 {
    inset-inline-end: calc(-1 * var(--shift-increment));
  }

  .shift-ie-2 {
    inset-inline-end: calc(-2 * var(--shift-increment));
  }

  .shift-ie-3 {
    inset-inline-end: calc(-3 * var(--shift-increment));
  }

  .shift-ie-4 {
    inset-inline-end: calc(-4 * var(--shift-increment));
  }

  .shift-ie-5 {
    inset-inline-end: calc(-5 * var(--shift-increment));
  }

  .icon-size-1, .icon-circle-1 > .icon {
    width: var(--icon-size-1);
    min-width: var(--icon-size-1);
    height: var(--icon-size-1);
    stroke-width: var(--icon-stroke-width-1);
  }

  .icon-size-2, .icon-circle-2 > .icon {
    width: var(--icon-size-2);
    min-width: var(--icon-size-2);
    height: var(--icon-size-2);
    stroke-width: var(--icon-stroke-width-2);
  }

  .icon-size-3, .icon-circle-3 > .icon {
    width: var(--icon-size-3);
    min-width: var(--icon-size-3);
    height: var(--icon-size-3);
    stroke-width: var(--icon-stroke-width-3);
  }

  .icon-size-4, .icon-circle-4 > .icon {
    width: var(--icon-size-4);
    min-width: var(--icon-size-4);
    height: var(--icon-size-4);
    stroke-width: var(--icon-stroke-width-4);
  }

  .sr-only {
    clip: rect(1px, 1px, 1px, 1px) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    position: absolute !important;
    overflow: hidden !important;
  }

  .attach-outside-is.align-bs {
    inset-block-start: 0;
    inset-inline-end: 100%;
  }

  .attach-outside-ie.align-bs {
    inset-block-start: 0;
    inset-inline-start: 100%;
  }

  .attach-outside-is.align-be {
    inset-block-end: 0;
    inset-inline-end: 100%;
  }

  .attach-outside-ie.align-be {
    inset-block-end: 0;
    inset-inline-start: 100%;
  }

  .attach-outside-is.align-bc {
    inset-block-start: 50%;
    inset-inline-end: 100%;
    transform: translateY(-50%);
  }

  .attach-outside-ie.align-bc {
    inset-block-start: 50%;
    inset-inline-start: 100%;
    transform: translateY(-50%);
  }

  .attach-outside-be.align-is {
    inset-block-start: 100%;
    inset-inline-start: 0;
  }

  .attach-outside-bs.align-is {
    inset-block-end: 100%;
    inset-inline-start: 0;
  }

  .attach-outside-be.align-ie {
    inset-block-start: 100%;
    inset-inline-end: 0;
  }

  .attach-outside-bs.align-ie {
    inset-block-end: 100%;
    inset-inline-end: 0;
  }

  .attach-outside-be.align-ic {
    inset-block-start: 100%;
    inset-inline-start: 50%;
    transform: translateX(-50%);
  }

  .attach-outside-bs.align-ic {
    inset-block-end: 100%;
    inset-inline-start: 50%;
    transform: translateX(-50%);
  }

  .attach-inside-is.align-bs {
    inset-block-start: 0;
    inset-inline-start: 0;
  }

  .attach-inside-ie.align-bs {
    inset-block-start: 0;
    inset-inline-end: 0;
  }

  .attach-inside-is.align-be {
    inset-block-end: 0;
    inset-inline-start: 0;
  }

  .attach-inside-ie.align-be {
    inset-block-end: 0;
    inset-inline-end: 0;
  }

  .attach-inside-is.align-bc {
    inset-block-start: 50%;
    inset-inline-start: 0;
    transform: translateY(-50%);
  }

  .attach-inside-ie.align-bc {
    inset-block-start: 50%;
    inset-inline-end: 0;
    transform: translateY(-50%);
  }

  .attach-inside-be.align-is {
    inset-block-end: 0;
    inset-inline-start: 0;
  }

  .attach-inside-bs.align-is {
    inset-block-start: 0;
    inset-inline-start: 0;
  }

  .attach-inside-be.align-ie {
    inset-block-end: 0;
    inset-inline-end: 0;
  }

  .attach-inside-bs.align-ie {
    inset-block-start: 0;
    inset-inline-end: 0;
  }

  .attach-inside-be.align-ic {
    inset-block-end: 0;
    inset-inline-start: 50%;
    transform: translateX(-50%);
  }

  .attach-inside-bs.align-ic {
    inset-block-start: 0;
    inset-inline-start: 50%;
    transform: translateX(-50%);
  }

  [style*="--display-xs:"] {
    display: var(--display-xs);
  }

  [style*="--aspect-ratio-xs:"] {
    aspect-ratio: var(--aspect-ratio-xs);
  }

  [style*="--object-position-xs:"] {
    object-position: var(--object-position-xs);
  }

  [style*="--font-size-xs:"] {
    font-size: var(--font-size-xs);
  }

  [style*="--text-align-xs:"] {
    text-align: var(--text-align-xs);
  }

  [style*="--inset-block-start-xs:"] {
    inset-block-start: var(--inset-block-start-xs);
  }

  [style*="--inset-block-end-xs:"] {
    inset-block-end: var(--inset-block-end-xs);
  }

  [style*="--inset-inline-start-xs:"] {
    inset-inline-start: var(--inset-inline-start-xs);
  }

  [style*="--inset-inline-end-xs:"] {
    inset-inline-end: var(--inset-inline-end-xs);
  }

  [style*="--margin-xs:"] {
    margin: var(--margin-xs);
  }

  [style*="--margin-block-xs:"] {
    margin-block: var(--margin-block-xs);
  }

  [style*="--margin-block-start-xs:"] {
    margin-block-start: var(--margin-block-start-xs);
  }

  [style*="--margin-block-end-xs:"] {
    margin-block-end: var(--margin-block-end-xs);
  }

  [style*="--margin-inline-xs:"] {
    margin-inline: var(--margin-inline-xs);
  }

  [style*="--margin-inline-start-xs:"] {
    margin-inline-start: var(--margin-inline-start-xs);
  }

  [style*="--margin-inline-end-xs:"] {
    margin-inline-end: var(--margin-inline-end-xs);
  }

  [style*="--padding-xs:"] {
    padding: var(--padding-xs);
  }

  [style*="--padding-block-xs:"] {
    padding-block: var(--padding-block-xs);
  }

  [style*="--padding-block-start-xs:"] {
    padding-block-start: var(--padding-block-start-xs);
  }

  [style*="--padding-block-end-xs:"] {
    padding-block-end: var(--padding-block-end-xs);
  }

  [style*="--padding-inline-xs:"] {
    padding-inline: var(--padding-inline-xs);
  }

  [style*="--padding-inline-start-xs:"] {
    padding-inline-start: var(--padding-inline-start-xs);
  }

  [style*="--padding-inline-end-xs:"] {
    padding-inline-end: var(--padding-inline-end-xs);
  }

  [style*="--block-size-xs:"] {
    block-size: var(--block-size-xs);
  }

  [style*="--min-block-size-xs:"] {
    min-block-size: var(--min-block-size-xs);
  }

  [style*="--inline-size-xs:"] {
    inline-size: var(--inline-size-xs);
  }

  [style*="--min-inline-size-xs:"] {
    min-inline-size: var(--min-inline-size-xs);
  }

  [style*="--max-inline-size-xs:"] {
    max-inline-size: var(--max-inline-size-xs);
  }

  [style*="--border-width-xs:"] {
    border-width: var(--border-width-xs);
  }

  [style*="--border-block-width-xs:"] {
    border-block-width: var(--border-block-width-xs);
  }

  [style*="--border-inline-width-xs:"] {
    border-inline-width: var(--border-inline-width-xs);
  }

  [style*="--border-block-start-width-xs:"] {
    border-block-start-width: var(--border-block-start-width-xs);
  }

  [style*="--border-block-end-width-xs:"] {
    border-block-end-width: var(--border-block-end-width-xs);
  }

  [style*="--border-inline-start-width-xs:"] {
    border-inline-start-width: var(--border-inline-start-width-xs);
  }

  [style*="--border-inline-end-width-xs:"] {
    border-inline-end-width: var(--border-inline-end-width-xs);
  }

  [style*="--align-items-xs:"] {
    align-items: var(--align-items-xs);
  }

  [style*="--justify-content-xs:"] {
    justify-content: var(--justify-content-xs);
  }

  [style*="--order-xs:"] {
    order: var(--order-xs);
  }

  [style*="--flex-basis-xs:"] {
    flex-basis: var(--flex-basis-xs);
  }

  [style*="--flex-wrap-xs:"] {
    flex-wrap: var(--flex-wrap-xs);
  }

  [style*="--flex-direction-xs:"] {
    flex-direction: var(--flex-direction-xs);
  }

  [style*="--grid-template-columns-xs:"] {
    grid-template-columns: var(--grid-template-columns-xs);
  }

  [style*="--grid-template-rows-xs:"] {
    grid-template-rows: var(--grid-template-rows-xs);
  }

  [style*="--gap-xs:"] {
    gap: var(--gap-xs);
  }

  [style*="--row-gap-xs:"] {
    row-gap: var(--row-gap-xs);
  }

  [style*="--column-gap-xs:"] {
    column-gap: var(--column-gap-xs);
  }

  [style*="--grid-column-xs:"] {
    grid-column: var(--grid-column-xs);
  }

  [style*="--grid-column-start-xs:"] {
    grid-column-start: var(--grid-column-start-xs);
  }

  [style*="--grid-row-xs:"] {
    grid-row: var(--grid-row-xs);
  }

  @media (min-width: 500px) {
    [style*="--display-sm:"] {
      display: var(--display-sm);
    }

    [style*="--aspect-ratio-sm:"] {
      aspect-ratio: var(--aspect-ratio-sm);
    }

    [style*="--object-position-sm:"] {
      object-position: var(--object-position-sm);
    }

    [style*="--font-size-sm:"] {
      font-size: var(--font-size-sm);
    }

    [style*="--text-align-sm:"] {
      text-align: var(--text-align-sm);
    }

    [style*="--inset-block-start-sm:"] {
      inset-block-start: var(--inset-block-start-sm);
    }

    [style*="--inset-block-end-sm:"] {
      inset-block-end: var(--inset-block-end-sm);
    }

    [style*="--inset-inline-start-sm:"] {
      inset-inline-start: var(--inset-inline-start-sm);
    }

    [style*="--inset-inline-end-sm:"] {
      inset-inline-end: var(--inset-inline-end-sm);
    }

    [style*="--margin-sm:"] {
      margin: var(--margin-sm);
    }

    [style*="--margin-block-sm:"] {
      margin-block: var(--margin-block-sm);
    }

    [style*="--margin-block-start-sm:"] {
      margin-block-start: var(--margin-block-start-sm);
    }

    [style*="--margin-block-end-sm:"] {
      margin-block-end: var(--margin-block-end-sm);
    }

    [style*="--margin-inline-sm:"] {
      margin-inline: var(--margin-inline-sm);
    }

    [style*="--margin-inline-start-sm:"] {
      margin-inline-start: var(--margin-inline-start-sm);
    }

    [style*="--margin-inline-end-sm:"] {
      margin-inline-end: var(--margin-inline-end-sm);
    }

    [style*="--padding-sm:"] {
      padding: var(--padding-sm);
    }

    [style*="--padding-block-sm:"] {
      padding-block: var(--padding-block-sm);
    }

    [style*="--padding-block-start-sm:"] {
      padding-block-start: var(--padding-block-start-sm);
    }

    [style*="--padding-block-end-sm:"] {
      padding-block-end: var(--padding-block-end-sm);
    }

    [style*="--padding-inline-sm:"] {
      padding-inline: var(--padding-inline-sm);
    }

    [style*="--padding-inline-start-sm:"] {
      padding-inline-start: var(--padding-inline-start-sm);
    }

    [style*="--padding-inline-end-sm:"] {
      padding-inline-end: var(--padding-inline-end-sm);
    }

    [style*="--block-size-sm:"] {
      block-size: var(--block-size-sm);
    }

    [style*="--min-block-size-sm:"] {
      min-block-size: var(--min-block-size-sm);
    }

    [style*="--inline-size-sm:"] {
      inline-size: var(--inline-size-sm);
    }

    [style*="--min-inline-size-sm:"] {
      min-inline-size: var(--min-inline-size-sm);
    }

    [style*="--max-inline-size-sm:"] {
      max-inline-size: var(--max-inline-size-sm);
    }

    [style*="--border-width-sm:"] {
      border-width: var(--border-width-sm);
    }

    [style*="--border-block-width-sm:"] {
      border-block-width: var(--border-block-width-sm);
    }

    [style*="--border-inline-width-sm:"] {
      border-inline-width: var(--border-inline-width-sm);
    }

    [style*="--border-block-start-width-sm:"] {
      border-block-start-width: var(--border-block-start-width-sm);
    }

    [style*="--border-block-end-width-sm:"] {
      border-block-end-width: var(--border-block-end-width-sm);
    }

    [style*="--border-inline-start-width-sm:"] {
      border-inline-start-width: var(--border-inline-start-width-sm);
    }

    [style*="--border-inline-end-width-sm:"] {
      border-inline-end-width: var(--border-inline-end-width-sm);
    }

    [style*="--align-items-sm:"] {
      align-items: var(--align-items-sm);
    }

    [style*="--justify-content-sm:"] {
      justify-content: var(--justify-content-sm);
    }

    [style*="--order-sm:"] {
      order: var(--order-sm);
    }

    [style*="--flex-basis-sm:"] {
      flex-basis: var(--flex-basis-sm);
    }

    [style*="--flex-wrap-sm:"] {
      flex-wrap: var(--flex-wrap-sm);
    }

    [style*="--flex-direction-sm:"] {
      flex-direction: var(--flex-direction-sm);
    }

    [style*="--grid-template-columns-sm:"] {
      grid-template-columns: var(--grid-template-columns-sm);
    }

    [style*="--grid-template-rows-sm:"] {
      grid-template-rows: var(--grid-template-rows-sm);
    }

    [style*="--gap-sm:"] {
      gap: var(--gap-sm);
    }

    [style*="--row-gap-sm:"] {
      row-gap: var(--row-gap-sm);
    }

    [style*="--column-gap-sm:"] {
      column-gap: var(--column-gap-sm);
    }

    [style*="--grid-column-sm:"] {
      grid-column: var(--grid-column-sm);
    }

    [style*="--grid-column-start-sm:"] {
      grid-column-start: var(--grid-column-start-sm);
    }

    [style*="--grid-row-sm:"] {
      grid-row: var(--grid-row-sm);
    }
  }

  @media (min-width: 800px) {
    [style*="--display-md:"] {
      display: var(--display-md);
    }

    [style*="--aspect-ratio-md:"] {
      aspect-ratio: var(--aspect-ratio-md);
    }

    [style*="--object-position-md:"] {
      object-position: var(--object-position-md);
    }

    [style*="--font-size-md:"] {
      font-size: var(--font-size-md);
    }

    [style*="--text-align-md:"] {
      text-align: var(--text-align-md);
    }

    [style*="--inset-block-start-md:"] {
      inset-block-start: var(--inset-block-start-md);
    }

    [style*="--inset-block-end-md:"] {
      inset-block-end: var(--inset-block-end-md);
    }

    [style*="--inset-inline-start-md:"] {
      inset-inline-start: var(--inset-inline-start-md);
    }

    [style*="--inset-inline-end-md:"] {
      inset-inline-end: var(--inset-inline-end-md);
    }

    [style*="--margin-md:"] {
      margin: var(--margin-md);
    }

    [style*="--margin-block-md:"] {
      margin-block: var(--margin-block-md);
    }

    [style*="--margin-block-start-md:"] {
      margin-block-start: var(--margin-block-start-md);
    }

    [style*="--margin-block-end-md:"] {
      margin-block-end: var(--margin-block-end-md);
    }

    [style*="--margin-inline-md:"] {
      margin-inline: var(--margin-inline-md);
    }

    [style*="--margin-inline-start-md:"] {
      margin-inline-start: var(--margin-inline-start-md);
    }

    [style*="--margin-inline-end-md:"] {
      margin-inline-end: var(--margin-inline-end-md);
    }

    [style*="--padding-md:"] {
      padding: var(--padding-md);
    }

    [style*="--padding-block-md:"] {
      padding-block: var(--padding-block-md);
    }

    [style*="--padding-block-start-md:"] {
      padding-block-start: var(--padding-block-start-md);
    }

    [style*="--padding-block-end-md:"] {
      padding-block-end: var(--padding-block-end-md);
    }

    [style*="--padding-inline-md:"] {
      padding-inline: var(--padding-inline-md);
    }

    [style*="--padding-inline-start-md:"] {
      padding-inline-start: var(--padding-inline-start-md);
    }

    [style*="--padding-inline-end-md:"] {
      padding-inline-end: var(--padding-inline-end-md);
    }

    [style*="--block-size-md:"] {
      block-size: var(--block-size-md);
    }

    [style*="--min-block-size-md:"] {
      min-block-size: var(--min-block-size-md);
    }

    [style*="--inline-size-md:"] {
      inline-size: var(--inline-size-md);
    }

    [style*="--min-inline-size-md:"] {
      min-inline-size: var(--min-inline-size-md);
    }

    [style*="--max-inline-size-md:"] {
      max-inline-size: var(--max-inline-size-md);
    }

    [style*="--border-width-md:"] {
      border-width: var(--border-width-md);
    }

    [style*="--border-block-width-md:"] {
      border-block-width: var(--border-block-width-md);
    }

    [style*="--border-inline-width-md:"] {
      border-inline-width: var(--border-inline-width-md);
    }

    [style*="--border-block-start-width-md:"] {
      border-block-start-width: var(--border-block-start-width-md);
    }

    [style*="--border-block-end-width-md:"] {
      border-block-end-width: var(--border-block-end-width-md);
    }

    [style*="--border-inline-start-width-md:"] {
      border-inline-start-width: var(--border-inline-start-width-md);
    }

    [style*="--border-inline-end-width-md:"] {
      border-inline-end-width: var(--border-inline-end-width-md);
    }

    [style*="--align-items-md:"] {
      align-items: var(--align-items-md);
    }

    [style*="--justify-content-md:"] {
      justify-content: var(--justify-content-md);
    }

    [style*="--order-md:"] {
      order: var(--order-md);
    }

    [style*="--flex-basis-md:"] {
      flex-basis: var(--flex-basis-md);
    }

    [style*="--flex-wrap-md:"] {
      flex-wrap: var(--flex-wrap-md);
    }

    [style*="--flex-direction-md:"] {
      flex-direction: var(--flex-direction-md);
    }

    [style*="--grid-template-columns-md:"] {
      grid-template-columns: var(--grid-template-columns-md);
    }

    [style*="--grid-template-rows-md:"] {
      grid-template-rows: var(--grid-template-rows-md);
    }

    [style*="--gap-md:"] {
      gap: var(--gap-md);
    }

    [style*="--row-gap-md:"] {
      row-gap: var(--row-gap-md);
    }

    [style*="--column-gap-md:"] {
      column-gap: var(--column-gap-md);
    }

    [style*="--grid-column-md:"] {
      grid-column: var(--grid-column-md);
    }

    [style*="--grid-column-start-md:"] {
      grid-column-start: var(--grid-column-start-md);
    }

    [style*="--grid-row-md:"] {
      grid-row: var(--grid-row-md);
    }
  }

  @media (min-width: 1100px) {
    [style*="--display-lg:"] {
      display: var(--display-lg);
    }

    [style*="--aspect-ratio-lg:"] {
      aspect-ratio: var(--aspect-ratio-lg);
    }

    [style*="--object-position-lg:"] {
      object-position: var(--object-position-lg);
    }

    [style*="--font-size-lg:"] {
      font-size: var(--font-size-lg);
    }

    [style*="--text-align-lg:"] {
      text-align: var(--text-align-lg);
    }

    [style*="--inset-block-start-lg:"] {
      inset-block-start: var(--inset-block-start-lg);
    }

    [style*="--inset-block-end-lg:"] {
      inset-block-end: var(--inset-block-end-lg);
    }

    [style*="--inset-inline-start-lg:"] {
      inset-inline-start: var(--inset-inline-start-lg);
    }

    [style*="--inset-inline-end-lg:"] {
      inset-inline-end: var(--inset-inline-end-lg);
    }

    [style*="--margin-lg:"] {
      margin: var(--margin-lg);
    }

    [style*="--margin-block-lg:"] {
      margin-block: var(--margin-block-lg);
    }

    [style*="--margin-block-start-lg:"] {
      margin-block-start: var(--margin-block-start-lg);
    }

    [style*="--margin-block-end-lg:"] {
      margin-block-end: var(--margin-block-end-lg);
    }

    [style*="--margin-inline-lg:"] {
      margin-inline: var(--margin-inline-lg);
    }

    [style*="--margin-inline-start-lg:"] {
      margin-inline-start: var(--margin-inline-start-lg);
    }

    [style*="--margin-inline-end-lg:"] {
      margin-inline-end: var(--margin-inline-end-lg);
    }

    [style*="--padding-lg:"] {
      padding: var(--padding-lg);
    }

    [style*="--padding-block-lg:"] {
      padding-block: var(--padding-block-lg);
    }

    [style*="--padding-block-start-lg:"] {
      padding-block-start: var(--padding-block-start-lg);
    }

    [style*="--padding-block-end-lg:"] {
      padding-block-end: var(--padding-block-end-lg);
    }

    [style*="--padding-inline-lg:"] {
      padding-inline: var(--padding-inline-lg);
    }

    [style*="--padding-inline-start-lg:"] {
      padding-inline-start: var(--padding-inline-start-lg);
    }

    [style*="--padding-inline-end-lg:"] {
      padding-inline-end: var(--padding-inline-end-lg);
    }

    [style*="--block-size-lg:"] {
      block-size: var(--block-size-lg);
    }

    [style*="--min-block-size-lg:"] {
      min-block-size: var(--min-block-size-lg);
    }

    [style*="--inline-size-lg:"] {
      inline-size: var(--inline-size-lg);
    }

    [style*="--min-inline-size-lg:"] {
      min-inline-size: var(--min-inline-size-lg);
    }

    [style*="--max-inline-size-lg:"] {
      max-inline-size: var(--max-inline-size-lg);
    }

    [style*="--border-width-lg:"] {
      border-width: var(--border-width-lg);
    }

    [style*="--border-block-width-lg:"] {
      border-block-width: var(--border-block-width-lg);
    }

    [style*="--border-inline-width-lg:"] {
      border-inline-width: var(--border-inline-width-lg);
    }

    [style*="--border-block-start-width-lg:"] {
      border-block-start-width: var(--border-block-start-width-lg);
    }

    [style*="--border-block-end-width-lg:"] {
      border-block-end-width: var(--border-block-end-width-lg);
    }

    [style*="--border-inline-start-width-lg:"] {
      border-inline-start-width: var(--border-inline-start-width-lg);
    }

    [style*="--border-inline-end-width-lg:"] {
      border-inline-end-width: var(--border-inline-end-width-lg);
    }

    [style*="--align-items-lg:"] {
      align-items: var(--align-items-lg);
    }

    [style*="--justify-content-lg:"] {
      justify-content: var(--justify-content-lg);
    }

    [style*="--order-lg:"] {
      order: var(--order-lg);
    }

    [style*="--flex-basis-lg:"] {
      flex-basis: var(--flex-basis-lg);
    }

    [style*="--flex-wrap-lg:"] {
      flex-wrap: var(--flex-wrap-lg);
    }

    [style*="--flex-direction-lg:"] {
      flex-direction: var(--flex-direction-lg);
    }

    [style*="--grid-template-columns-lg:"] {
      grid-template-columns: var(--grid-template-columns-lg);
    }

    [style*="--grid-template-rows-lg:"] {
      grid-template-rows: var(--grid-template-rows-lg);
    }

    [style*="--gap-lg:"] {
      gap: var(--gap-lg);
    }

    [style*="--row-gap-lg:"] {
      row-gap: var(--row-gap-lg);
    }

    [style*="--column-gap-lg:"] {
      column-gap: var(--column-gap-lg);
    }

    [style*="--grid-column-lg:"] {
      grid-column: var(--grid-column-lg);
    }

    [style*="--grid-column-start-lg:"] {
      grid-column-start: var(--grid-column-start-lg);
    }

    [style*="--grid-row-lg:"] {
      grid-row: var(--grid-row-lg);
    }
  }

  @media (min-width: 1600px) {
    [style*="--display-xl:"] {
      display: var(--display-xl);
    }

    [style*="--aspect-ratio-xl:"] {
      aspect-ratio: var(--aspect-ratio-xl);
    }

    [style*="--object-position-xl:"] {
      object-position: var(--object-position-xl);
    }

    [style*="--font-size-xl:"] {
      font-size: var(--font-size-xl);
    }

    [style*="--text-align-xl:"] {
      text-align: var(--text-align-xl);
    }

    [style*="--inset-block-start-xl:"] {
      inset-block-start: var(--inset-block-start-xl);
    }

    [style*="--inset-block-end-xl:"] {
      inset-block-end: var(--inset-block-end-xl);
    }

    [style*="--inset-inline-start-xl:"] {
      inset-inline-start: var(--inset-inline-start-xl);
    }

    [style*="--inset-inline-end-xl:"] {
      inset-inline-end: var(--inset-inline-end-xl);
    }

    [style*="--margin-xl:"] {
      margin: var(--margin-xl);
    }

    [style*="--margin-block-xl:"] {
      margin-block: var(--margin-block-xl);
    }

    [style*="--margin-block-start-xl:"] {
      margin-block-start: var(--margin-block-start-xl);
    }

    [style*="--margin-block-end-xl:"] {
      margin-block-end: var(--margin-block-end-xl);
    }

    [style*="--margin-inline-xl:"] {
      margin-inline: var(--margin-inline-xl);
    }

    [style*="--margin-inline-start-xl:"] {
      margin-inline-start: var(--margin-inline-start-xl);
    }

    [style*="--margin-inline-end-xl:"] {
      margin-inline-end: var(--margin-inline-end-xl);
    }

    [style*="--padding-xl:"] {
      padding: var(--padding-xl);
    }

    [style*="--padding-block-xl:"] {
      padding-block: var(--padding-block-xl);
    }

    [style*="--padding-block-start-xl:"] {
      padding-block-start: var(--padding-block-start-xl);
    }

    [style*="--padding-block-end-xl:"] {
      padding-block-end: var(--padding-block-end-xl);
    }

    [style*="--padding-inline-xl:"] {
      padding-inline: var(--padding-inline-xl);
    }

    [style*="--padding-inline-start-xl:"] {
      padding-inline-start: var(--padding-inline-start-xl);
    }

    [style*="--padding-inline-end-xl:"] {
      padding-inline-end: var(--padding-inline-end-xl);
    }

    [style*="--block-size-xl:"] {
      block-size: var(--block-size-xl);
    }

    [style*="--min-block-size-xl:"] {
      min-block-size: var(--min-block-size-xl);
    }

    [style*="--inline-size-xl:"] {
      inline-size: var(--inline-size-xl);
    }

    [style*="--min-inline-size-xl:"] {
      min-inline-size: var(--min-inline-size-xl);
    }

    [style*="--max-inline-size-xl:"] {
      max-inline-size: var(--max-inline-size-xl);
    }

    [style*="--border-width-xl:"] {
      border-width: var(--border-width-xl);
    }

    [style*="--border-block-width-xl:"] {
      border-block-width: var(--border-block-width-xl);
    }

    [style*="--border-inline-width-xl:"] {
      border-inline-width: var(--border-inline-width-xl);
    }

    [style*="--border-block-start-width-xl:"] {
      border-block-start-width: var(--border-block-start-width-xl);
    }

    [style*="--border-block-end-width-xl:"] {
      border-block-end-width: var(--border-block-end-width-xl);
    }

    [style*="--border-inline-start-width-xl:"] {
      border-inline-start-width: var(--border-inline-start-width-xl);
    }

    [style*="--border-inline-end-width-xl:"] {
      border-inline-end-width: var(--border-inline-end-width-xl);
    }

    [style*="--align-items-xl:"] {
      align-items: var(--align-items-xl);
    }

    [style*="--justify-content-xl:"] {
      justify-content: var(--justify-content-xl);
    }

    [style*="--order-xl:"] {
      order: var(--order-xl);
    }

    [style*="--flex-basis-xl:"] {
      flex-basis: var(--flex-basis-xl);
    }

    [style*="--flex-wrap-xl:"] {
      flex-wrap: var(--flex-wrap-xl);
    }

    [style*="--flex-direction-xl:"] {
      flex-direction: var(--flex-direction-xl);
    }

    [style*="--grid-template-columns-xl:"] {
      grid-template-columns: var(--grid-template-columns-xl);
    }

    [style*="--grid-template-rows-xl:"] {
      grid-template-rows: var(--grid-template-rows-xl);
    }

    [style*="--gap-xl:"] {
      gap: var(--gap-xl);
    }

    [style*="--row-gap-xl:"] {
      row-gap: var(--row-gap-xl);
    }

    [style*="--column-gap-xl:"] {
      column-gap: var(--column-gap-xl);
    }

    [style*="--grid-column-xl:"] {
      grid-column: var(--grid-column-xl);
    }

    [style*="--grid-column-start-xl:"] {
      grid-column-start: var(--grid-column-start-xl);
    }

    [style*="--grid-row-xl:"] {
      grid-row: var(--grid-row-xl);
    }
  }
}