@font-face {
  font-family: BSV;
  src: url("/static/font/varde-bs-variable.ttf") format("truetype-variations");
  font-weight: 300 800;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  font-family: BSV, system-ui, sans-serif;
}

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

  * {
    margin: 0;
    padding: 0;
  }

  html {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
    block-size: 100%;
    line-height: 1.5;
  }

  body {
    min-block-size: 100%;
  }

  img, iframe, audio, video, canvas {
    block-size: auto;
    max-inline-size: 100%;
    display: block;
  }

  svg {
    max-inline-size: 100%;
  }

  svg:not([fill]) {
    fill: currentColor;
  }

  input, button, textarea, select {
    appearance: none;
    font: inherit;
    color: inherit;
    text-align: inherit;
    line-height: inherit;
    background: none;
    border: none;
    border-radius: 0;
  }

  textarea {
    resize: vertical;
  }

  fieldset, iframe {
    border: none;
  }

  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }

  p {
    text-wrap: pretty;
    font-variant-numeric: proportional-nums;
  }

  h1, h2, h3, h4, h5, h6 {
    font-variant-numeric: lining-nums;
    text-wrap: balance;
  }

  p, blockquote, q, figcaption, li {
    hanging-punctuation: first allow-end last;
  }

  ol, ul {
    list-style: none;
  }

  math, time, table {
    font-variant-numeric: tabular-nums lining-nums slashed-zero;
  }

  code {
    font-variant-numeric: slashed-zero;
  }

  table {
    border-collapse: collapse;
  }

  abbr {
    font-variant-caps: all-small-caps;
    text-decoration: none;

    &[title] {
      cursor: help;
      text-decoration: underline dotted;
    }
  }

  sup, sub {
    line-height: 0;
  }

  summary {
    cursor: pointer;
  }

  [popover] {
    color: inherit;
    background-color: #0000;
    border: none;
  }
}

:root {
  --font-size-base: 1rem;
  --line-height-base: 1.4;
  --font-size-xs: clamp(.6944rem, .6404rem + .206vw, .8rem);
  --font-size-s: clamp(.8333rem, .748rem + .3252vw, 1rem);
  --font-size-m: clamp(1rem, .872rem + .4878vw, 1.25rem);
  --font-size-l: clamp(1.2rem, 1.0143rem + .7073vw, 1.5625rem);
  --font-size-xl: clamp(1.44rem, 1.1772rem + 1.0012vw, 1.9531rem);
  --font-size-2xl: clamp(1.728rem, 1.3626rem + 1.392vw, 2.4414rem);
  --font-size-3xl: clamp(2.0736rem, 1.5726rem + 1.9086vw, 3.0518rem);
  --font-size-4xl: clamp(2.4883rem, 1.809rem + 2.5881vw, 3.8147rem);
  --font-weight-default: 400;
  --font-weight-regular: var(--font-weight-default);
  --font-weight-medium: 525;
  --font-weight-bold: 650;
  --leading: 1.4;
  --leading-short: 1.3;
  --leading-slim: 1.2;
  --leading-fine: 1.1;
  --leading-flat: 1;
  --leading-mini: .9;
  --leading-micro: .8;
  --kerning: normal;
  --kerning-tight: -.04ch;
  --kerning-loose: .1ch;
  --heading-kerning: -.015em;
  --base-root: 1rem;
  --spacing-5xl: calc(8 * var(--base-root));
  --spacing-6xl: calc(12 * var(--base-root));
  --spacing-4xs: clamp(.125rem, .0855rem + .1316vw, .1875rem);
  --spacing-3xs: clamp(.25rem, .2105rem + .1316vw, .3125rem);
  --spacing-2xs: clamp(.5rem, .4211rem + .2632vw, .625rem);
  --spacing-xs: clamp(.75rem, .6316rem + .3947vw, .9375rem);
  --spacing-s: clamp(1rem, .8421rem + .5263vw, 1.25rem);
  --spacing-m: clamp(1.5rem, 1.2632rem + .7895vw, 1.875rem);
  --spacing-l: clamp(2rem, 1.6842rem + 1.0526vw, 2.5rem);
  --spacing-xl: clamp(3rem, 2.5263rem + 1.5789vw, 3.75rem);
  --spacing-2xl: clamp(4rem, 3.3684rem + 2.1053vw, 5rem);
  --spacing-3xl: clamp(6rem, 5.0526rem + 3.1579vw, 7.5rem);
  --spacing-4xs-3xs: clamp(.125rem, .0066rem + .3947vw, .3125rem);
  --spacing-3xs-2xs: clamp(.25rem, .0132rem + .7895vw, .625rem);
  --spacing-2xs-xs: clamp(.5rem, .2237rem + .9211vw, .9375rem);
  --spacing-xs-s: clamp(.75rem, .4342rem + 1.0526vw, 1.25rem);
  --spacing-s-m: clamp(1rem, .4474rem + 1.8421vw, 1.875rem);
  --spacing-m-l: clamp(1.5rem, .8684rem + 2.1053vw, 2.5rem);
  --spacing-l-xl: clamp(2rem, .8947rem + 3.6842vw, 3.75rem);
  --spacing-xl-2xl: clamp(3rem, 1.7368rem + 4.2105vw, 5rem);
  --spacing-2xl-3xl: clamp(4rem, 1.7895rem + 7.3684vw, 7.5rem);
  --spacing-s-2xl: clamp(1rem, -1.5263rem + 8.4211vw, 5rem);
  --spacing-m-3xl: clamp(1.5rem, -2.2895rem + 12.6316vw, 7.5rem);
  --border-radius-xs: 2px;
  --border-radius-s: 4px;
  --border-radius-m: 8px;
  --border-radius-l: 12px;
  --border-radius-xl: 16px;
  --border-radius-2xl: 24px;
  --interaction-radius: .65rem;
  --interaction-transition-duration-quick: .15s;
  --interaction-transition-easing-default: cubic-bezier(.25, .1, .25, 1);
  --scroll-padding-top: var(--size-control-height-medium);
  --size-control-height-small: calc(2.25 * var(--font-size-s));
  --size-control-height-medium: calc(2.5 * var(--font-size-m));
  --size-control-height-large: calc(2.5 * var(--font-size-l));
  --button-border-radius: var(--interaction-radius);
  --button-font-weight: var(--font-weight-bold);
  --button-focus-ring-color: var(--border-control-focused);
  --input-border-radius: var(--interaction-radius);
  --input-focus-ring-color: var(--border-control-focused);
  --palette-coral-0: oklch(98.5% .007 23);
  --palette-coral-50: oklch(96.9% .015 23);
  --palette-coral-100: oklch(94.1% .03 23);
  --palette-coral-150: oklch(90.5% .048 23);
  --palette-coral-200: oklch(86.4% .072 23);
  --palette-coral-250: oklch(81.9% .101 23);
  --palette-coral-300: oklch(77.2% .133 23);
  --palette-coral-350: oklch(72.2% .171 23);
  --palette-coral-400: oklch(67.1% .215 23);
  --palette-coral-450: oklch(61.9% .247 23);
  --palette-coral-500: oklch(56.6% .225 23);
  --palette-coral-550: oklch(51.4% .205 23);
  --palette-coral-600: oklch(46.3% .185 23);
  --palette-coral-650: oklch(41.3% .165 23);
  --palette-coral-700: oklch(36.6% .146 23);
  --palette-coral-750: oklch(32.1% .129 23);
  --palette-coral-800: oklch(28% .112 23);
  --palette-coral-850: oklch(24.4% .098 23);
  --palette-coral-900: oklch(21.6% .086 23);
  --palette-coral-950: oklch(20% .08 23);
  --palette-blue-0: oklch(98.5% .007 251);
  --palette-blue-50: oklch(96.9% .015 251);
  --palette-blue-100: oklch(94.1% .029 251);
  --palette-blue-150: oklch(90.5% .048 251);
  --palette-blue-200: oklch(86.4% .069 251);
  --palette-blue-250: oklch(81.9% .094 251);
  --palette-blue-300: oklch(77.2% .12 251);
  --palette-blue-350: oklch(72.2% .149 251);
  --palette-blue-400: oklch(67.1% .18 251);
  --palette-blue-450: oklch(61.9% .18 251);
  --palette-blue-500: oklch(56.6% .165 251);
  --palette-blue-550: oklch(51.4% .149 251);
  --palette-blue-600: oklch(46.3% .135 251);
  --palette-blue-650: oklch(41.3% .12 251);
  --palette-blue-700: oklch(36.6% .106 251);
  --palette-blue-750: oklch(32.1% .093 251);
  --palette-blue-800: oklch(28% .081 251);
  --palette-blue-850: oklch(24.4% .071 251);
  --palette-blue-900: oklch(21.6% .063 251);
  --palette-blue-950: oklch(20% .058 251);
  --palette-yellow-0: oklch(98.5% .02 91);
  --palette-yellow-50: oklch(96.9% .041 91);
  --palette-yellow-100: oklch(94.1% .078 91);
  --palette-yellow-150: oklch(90.5% .126 91);
  --palette-yellow-200: oklch(86.4% .176 91);
  --palette-yellow-250: oklch(81.9% .166 91);
  --palette-yellow-300: oklch(77.2% .157 91);
  --palette-yellow-350: oklch(72.2% .147 91);
  --palette-yellow-400: oklch(67.1% .136 91);
  --palette-yellow-450: oklch(61.9% .126 91);
  --palette-yellow-500: oklch(56.6% .115 91);
  --palette-yellow-550: oklch(51.4% .104 91);
  --palette-yellow-600: oklch(46.3% .094 91);
  --palette-yellow-650: oklch(41.3% .084 91);
  --palette-yellow-700: oklch(36.6% .075 91);
  --palette-yellow-750: oklch(32.1% .066 91);
  --palette-yellow-800: oklch(28% .057 91);
  --palette-yellow-850: oklch(24.4% .05 91);
  --palette-yellow-900: oklch(21.6% .044 91);
  --palette-yellow-950: oklch(20% .041 91);
  --palette-green-0: oklch(98.5% .024 149);
  --palette-green-50: oklch(96.9% .051 149);
  --palette-green-100: oklch(94.1% .1 149);
  --palette-green-150: oklch(90.5% .172 149);
  --palette-green-200: oklch(86.4% .243 149);
  --palette-green-250: oklch(81.9% .23 149);
  --palette-green-300: oklch(77.2% .217 149);
  --palette-green-350: oklch(72.2% .203 149);
  --palette-green-400: oklch(67.1% .188 149);
  --palette-green-450: oklch(61.9% .174 149);
  --palette-green-500: oklch(56.6% .159 149);
  --palette-green-550: oklch(51.4% .144 149);
  --palette-green-600: oklch(46.3% .13 149);
  --palette-green-650: oklch(41.3% .116 149);
  --palette-green-700: oklch(36.6% .102 149);
  --palette-green-750: oklch(32.1% .091 149);
  --palette-green-800: oklch(28% .079 149);
  --palette-green-850: oklch(24.4% .069 149);
  --palette-green-900: oklch(21.6% .061 149);
  --palette-green-950: oklch(20% .056 149);
  --palette-orange-0: oklch(98.5% .007 34);
  --palette-orange-50: oklch(96.9% .015 34);
  --palette-orange-100: oklch(94.1% .03 34);
  --palette-orange-150: oklch(90.5% .05 34);
  --palette-orange-200: oklch(86.4% .074 34);
  --palette-orange-250: oklch(81.9% .103 34);
  --palette-orange-300: oklch(77.2% .136 34);
  --palette-orange-350: oklch(72.2% .175 34);
  --palette-orange-400: oklch(67.1% .219 34);
  --palette-orange-450: oklch(61.9% .223 34);
  --palette-orange-500: oklch(56.6% .204 34);
  --palette-orange-550: oklch(51.4% .185 34);
  --palette-orange-600: oklch(46.3% .167 34);
  --palette-orange-650: oklch(41.3% .149 34);
  --palette-orange-700: oklch(36.6% .132 34);
  --palette-orange-750: oklch(32.1% .115 34);
  --palette-orange-800: oklch(28% .101 34);
  --palette-orange-850: oklch(24.4% .088 34);
  --palette-orange-900: oklch(21.6% .078 34);
  --palette-orange-950: oklch(20% .072 34);
  --palette-purple-0: oklch(98.5% .007 295);
  --palette-purple-50: oklch(96.9% .015 295);
  --palette-purple-100: oklch(94.1% .029 295);
  --palette-purple-150: oklch(90.5% .047 295);
  --palette-purple-200: oklch(86.4% .069 295);
  --palette-purple-250: oklch(81.9% .093 295);
  --palette-purple-300: oklch(77.2% .12 295);
  --palette-purple-350: oklch(72.2% .149 295);
  --palette-purple-400: oklch(67.1% .181 295);
  --palette-purple-450: oklch(61.9% .214 295);
  --palette-purple-500: oklch(56.6% .249 295);
  --palette-purple-550: oklch(51.4% .26 295);
  --palette-purple-600: oklch(46.3% .234 295);
  --palette-purple-650: oklch(41.3% .209 295);
  --palette-purple-700: oklch(36.6% .185 295);
  --palette-purple-750: oklch(32.1% .162 295);
  --palette-purple-800: oklch(28% .142 295);
  --palette-purple-850: oklch(24.4% .124 295);
  --palette-purple-900: oklch(21.6% .11 295);
  --palette-purple-950: oklch(20% .101 295);
  --palette-teal-0: oklch(98.5% .021 182);
  --palette-teal-50: oklch(96.9% .043 182);
  --palette-teal-100: oklch(94.1% .085 182);
  --palette-teal-150: oklch(90.5% .146 182);
  --palette-teal-200: oklch(86.4% .154 182);
  --palette-teal-250: oklch(81.9% .146 182);
  --palette-teal-300: oklch(77.2% .137 182);
  --palette-teal-350: oklch(72.2% .128 182);
  --palette-teal-400: oklch(67.1% .119 182);
  --palette-teal-450: oklch(61.9% .11 182);
  --palette-teal-500: oklch(56.6% .1 182);
  --palette-teal-550: oklch(51.4% .091 182);
  --palette-teal-600: oklch(46.3% .082 182);
  --palette-teal-650: oklch(41.3% .073 182);
  --palette-teal-700: oklch(36.6% .065 182);
  --palette-teal-750: oklch(32.1% .058 182);
  --palette-teal-800: oklch(28% .05 182);
  --palette-teal-850: oklch(24.4% .044 182);
  --palette-teal-900: oklch(21.6% .039 182);
  --palette-teal-950: oklch(20% .036 182);
  --palette-periwinkle-0: oklch(98.5% .007 270);
  --palette-periwinkle-50: oklch(96.9% .015 270);
  --palette-periwinkle-100: oklch(94.1% .028 270);
  --palette-periwinkle-150: oklch(90.5% .046 270);
  --palette-periwinkle-200: oklch(86.4% .066 270);
  --palette-periwinkle-250: oklch(81.9% .09 270);
  --palette-periwinkle-300: oklch(77.2% .116 270);
  --palette-periwinkle-350: oklch(72.2% .144 270);
  --palette-periwinkle-400: oklch(67.1% .173 270);
  --palette-periwinkle-450: oklch(61.9% .205 270);
  --palette-periwinkle-500: oklch(56.6% .238 270);
  --palette-periwinkle-550: oklch(51.4% .272 270);
  --palette-periwinkle-600: oklch(46.3% .303 270);
  --palette-periwinkle-650: oklch(41.3% .271 270);
  --palette-periwinkle-700: oklch(36.6% .24 270);
  --palette-periwinkle-750: oklch(32.1% .21 270);
  --palette-periwinkle-800: oklch(28% .184 270);
  --palette-periwinkle-850: oklch(24.4% .16 270);
  --palette-periwinkle-900: oklch(21.6% .142 270);
  --palette-periwinkle-950: oklch(20% .131 270);
  --palette-grey-0: oklch(98.5% 0 0);
  --palette-grey-50: oklch(96.9% 0 0);
  --palette-grey-100: oklch(94.1% 0 0);
  --palette-grey-150: oklch(90.5% 0 0);
  --palette-grey-200: oklch(86.4% 0 0);
  --palette-grey-250: oklch(81.9% 0 0);
  --palette-grey-300: oklch(77.2% 0 0);
  --palette-grey-350: oklch(72.2% 0 0);
  --palette-grey-400: oklch(67.1% 0 0);
  --palette-grey-450: oklch(61.9% 0 0);
  --palette-grey-500: oklch(56.6% 0 0);
  --palette-grey-550: oklch(51.4% 0 0);
  --palette-grey-600: oklch(46.3% 0 0);
  --palette-grey-650: oklch(41.3% 0 0);
  --palette-grey-700: oklch(36.6% 0 0);
  --palette-grey-750: oklch(32.1% 0 0);
  --palette-grey-800: oklch(28% 0 0);
  --palette-grey-850: oklch(24.4% 0 0);
  --palette-grey-900: oklch(21.6% 0 0);
  --palette-grey-950: oklch(20% 0 0);
}

@layer {
  ::selection {
    color: var(--foreground-control-selection);
    background-color: var(--background-control-selection);
  }

  :where(html) {
    color: var(--foreground-default);
    scrollbar-color: var(--foreground-muted) transparent;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    scroll-padding-top: var(--scroll-padding-top);
    interpolate-size: allow-keywords;
  }

  :where(:focus-visible) {
    outline-color: var(--input-focus-ring-color);
    outline-offset: 4px;
    border-radius: var(--border-radius-s);
    outline-width: 2px;
    outline-style: solid;
  }

  :where(body) {
    min-block-size: 100svh;
  }

  @supports selector(::details-content) {
    details::details-content {
      block-size: 0;
      transition: block-size .25s,
        content-visibility .25s allow-discrete;
      transition-timing-function: ease-out;
      overflow: clip;
    }

    details[open]::details-content {
      block-size: auto;
    }

    details summary ~ * {
      opacity: .5;
      transition: opacity .25s ease-out;
    }

    details[open] summary ~ * {
      opacity: 1;
    }
  }

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

  :where(h1, h2, h3, h4, h5, h6) {
    font-weight: var(--font-weight-medium);
  }

  :where(:any-link) {
    color: currentColor;
    text-decoration-color: #0000;
  }

  :where(hr) {
    border: none;
    border-block-start: 1px solid var(--border-default);
  }

  :where(mark) {
    background: var(--palette-inherit-200);
    color: var(--palette-inherit-600);
    font-weight: var(--font-weight-medium);
    border-radius: 3px;
    padding: 2px;
    font-size: .9em;
  }

  [hidden] {
    display: none !important;
  }

  @media (prefers-reduced-motion: reduce) {
    :is(*) {
      interpolate-size: unset !important;
      scroll-behavior: auto !important;
      transition-duration: 0s !important;
      transition-delay: 0s !important;
      animation-duration: 0s !important;
      animation-iteration-count: 1 !important;
      animation-delay: 0s !important;
    }
  }
}

@layer buttons.base {
  :where(.button) {
    appearance: none;
    font: inherit;
    gap: var(--_button-gap);
    font-size: var(--_button-font-size);
    font-weight: var(--button-font-weight);
    background: var(--_button-background);
    color: var(--_button-foreground);
    border: 2px solid var(--_button-border);
    border-radius: var(--_button-border-radius);
    min-height: var(--_button-height);
    padding-block: 0;
    padding-inline: var(--_button-padding-inline);
    text-align: center;
    outline-offset: .125rem;
    cursor: pointer;
    outline: 2px solid #0000;
    justify-content: center;
    align-items: center;
    line-height: 1;
    text-decoration: none;
    transition: outline .1s ease-out, filter .1s ease-out, transform .1s ease-out, background-color .2s ease-out, border .2s ease-out;
    display: inline-flex;
  }
}

@layer buttons.public {
  :where(.button:not([data-color]), .button[data-color="primary"]) {
    --_button-base: var(--button-primary-base);
    --_button-on-base: var(--button-primary-on-base);
    --_button-subtle: var(--button-primary-subtle);
    --_button-on-subtle: var(--button-primary-on-subtle);
    --_button-on-surface: var(--button-primary-on-surface);
  }

  :where(.button[data-color="secondary"]) {
    --_button-base: var(--button-secondary-base);
    --_button-on-base: var(--button-secondary-on-base);
    --_button-subtle: var(--button-secondary-subtle);
    --_button-on-subtle: var(--button-secondary-on-subtle);
    --_button-on-surface: var(--button-secondary-on-surface);
  }

  :where(.button[data-color="danger"]) {
    --_button-base: var(--button-danger-base);
    --_button-on-base: var(--button-danger-on-base);
    --_button-subtle: var(--button-danger-subtle);
    --_button-on-subtle: var(--button-danger-on-subtle);
    --_button-on-surface: var(--button-danger-on-surface);
  }

  :where(.button[data-color="inherit"]) {
    --_button-base: var(--button-inherit-base);
    --_button-on-base: var(--button-inherit-on-base);
    --_button-subtle: var(--button-inherit-subtle);
    --_button-on-subtle: var(--button-inherit-on-subtle);
    --_button-on-surface: var(--button-inherit-on-surface);
  }

  :where(.button:not([data-variant]), .button[data-variant="filled"]) {
    --_button-background: var(--_button-base);
    --_button-foreground: var(--_button-on-base);
    --_button-border: var(--_button-base);
  }

  :where(.button[data-variant="outlined"]) {
    --_button-background: transparent;
    --_button-foreground: var(--_button-on-surface);
    --_button-border: var(--_button-base);
  }

  :where(.button[data-variant="plain"]) {
    --_button-background: transparent;
    --_button-foreground: var(--_button-on-surface);
    --_button-border: transparent;
  }

  :where(.button:not([data-size]), .button[data-size="medium"]) {
    --_button-height: var(--size-control-height-medium);
    --_button-padding-inline: var(--spacing-s);
    --_button-font-size: var(--font-size-m);
    --_button-gap: var(--spacing-2xs);
    --_button-border-radius: var(--border-radius-m);
  }

  :where(.button[data-size="small"]) {
    --_button-height: var(--size-control-height-small);
    --_button-padding-inline: var(--spacing-xs);
    --_button-font-size: var(--font-size-s);
    --_button-gap: var(--spacing-3xs);
    --_button-border-radius: var(--border-radius-m);
  }

  :where(.button[data-size="large"]) {
    --_button-height: var(--size-control-height-large);
    --_button-padding-inline: var(--spacing-m);
    --_button-font-size: var(--font-size-l);
    --_button-gap: var(--spacing-xs);
    --_button-border-radius: var(--border-radius-l);
  }
}

@layer buttons.state {
  :where(.button):hover {
    filter: brightness(1.05);
  }

  :where(.button[data-variant="outlined"]):hover, :where(.button[data-variant="plain"]):hover {
    --_button-background: var(--_button-subtle);
    filter: none;
    --_button-foreground: var(--_button-on-subtle);
    --_button-border: var(--_button-subtle);
  }

  :where(.button):active {
    filter: brightness(.9);
    transform: translateY(1px);
  }

  :where(.button):focus-visible {
    outline-color: var(--button-focus-ring-color);
  }
}

@layer forms.base {
  :where(.input, .select, .textarea, .checkbox, .radio) {
    appearance: none;
    font: inherit;
    font-weight: var(--font-weight-medium);
    background: var(--_input-background);
    color: var(--_input-foreground);
    border-color: var(--_input-border);
    border-radius: var(--_input-border-radius);
    min-height: var(--_input-height);
    font-size: var(--_input-font-size);
    outline-offset: 0px;
    transition: outline-color var(--interaction-transition-duration-quick)
      var(--interaction-transition-easing-default),
      border-color var(--interaction-transition-duration-quick)
      var(--interaction-transition-easing-default),
      background-color var(--interaction-transition-duration-quick)
      var(--interaction-transition-easing-default);
    border-style: solid;
    border-width: 1px;
    outline: 1px solid #0000;

    &::placeholder {
      color: var(--input-placeholder);
    }

    &:disabled {
      cursor: not-allowed;
    }
  }

  :where(.input, .select, .textarea) {
    padding-inline: var(--_input-padding-inline);
    padding-block: var(--_input-padding-block);
  }

  :where(.radio, .checkbox) {
    width: var(--_input-height);
    aspect-ratio: 1;
    cursor: pointer;
    place-items: center;
    display: grid;
  }

  :where(.radio) {
    border-radius: 50%;
  }

  :where(.radio, .checkbox):after {
    content: "";
    aspect-ratio: 1;
    color: #0000;
    pointer-events: none;
    width: 90%;
    transition: color var(--interaction-transition-duration-quick)
      var(--interaction-transition-easing-default);
    background-color: currentColor;
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;

    @supports (width: round(90%, 2px)) {
      width: round(90%, 2px);
    }
  }

  :where(.radio):after {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"%3E%3Ccircle cx=\"12\" cy=\"12\" r=\"8\" /%3E%3C/svg%3E");
  }

  :where(.checkbox):after {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"%3E%3Cpath d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" /%3E%3C/svg%3E");
  }

  :where(.select) {
    background-image: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"rgb(94, 117, 131)\" viewBox=\"0 0 24 24\"><path d=\"M12.7 15.7a1 1 0 0 1-1.4 0l-6-6a1 1 0 0 1 1.4-1.4l5.3 5.29 5.3-5.3a1 1 0 1 1 1.4 1.42z\"/></svg>");
    background-position: calc(100% - var(--_input-padding-inline, 1em));
    background-repeat: no-repeat;
    background-size: 1.5em;
    padding-inline-end: calc(var(--_input-padding-inline, 1em) + 1.5em + var(--spacing-2xs));
  }
}

@layer forms.public {
  :where(.input, .select, .textarea, .checkbox, .radio) {
    --input-background: var(--background-control-default);
    --input-foreground: var(--foreground-default);
    --input-border: var(--border-control-default);
    --input-placeholder: var(--foreground-control-placeholder);
    --input-checked-foreground: var(--foreground-control-selected);
    --_input-background: var(--input-background);
    --_input-foreground: var(--input-foreground);
    --_input-border: var(--input-border);
    --_input-border-radius: var(--border-radius-m);
  }

  :where(.input, .select, .textarea) {
    --_input-height: var(--size-control-height-medium);
    --_input-font-size: var(--font-size-m);
    --_input-padding-inline: var(--spacing-xs);
    --_input-padding-block: var(--spacing-3xs);
    --_input-border-radius: var(--border-radius-l);
  }

  :where(.input, .select, .textarea):where([data-size="small"]) {
    --_input-height: var(--size-control-height-small);
    --_input-font-size: var(--font-size-s);
    --_input-padding-inline: var(--spacing-xs);
    --_input-padding-block: var(--spacing-3xs);
    --_input-border-radius: var(--border-radius-m);
  }

  :where(.input, .select, .textarea):where([data-size="large"]) {
    --_input-height: var(--size-control-height-large);
    --_input-font-size: var(--font-size-l);
    --_input-padding-inline: var(--spacing-xs);
    --_input-padding-block: var(--spacing-3xs);
    --_input-border-radius: var(--border-radius-xl);
  }

  :where(.radio, .checkbox) {
    --_input-height: 1.5em;
  }

  :where(.textarea) {
    --_input-padding-block: var(--spacing-xs);
  }
}

@layer forms.state {
  :where(.input, .select, .textarea, .checkbox, .radio):hover:not(:focus-visible, [disabled]) {
    border-color: var(--border-control-hover);
    outline-color: var(--border-control-hover);
    background-color: var(--background-control-hover);
  }

  :where(.input, .select, .textarea, .checkbox, .radio):focus-visible {
    border-color: var(--border-control-focused);
    outline-color: var(--input-focus-ring-color);
    background-color: var(--background-control-hover);
  }

  :where(.checkbox, .radio):checked:after {
    color: var(--input-checked-foreground);
  }

  :where(.input, .textarea, .select):where([aria-invalid="true"]):not(:focus-visible) {
    --_input-border: var(--border-control-error);
    --_input-foreground: var(--foreground-control-error);
  }
}

@layer forms.base-select {
  @supports (appearance: base-select) {
    :where(.select) {
      appearance: base-select;
      min-width: 10rem;
      background-image: none;
      align-items: center;
      padding-inline-end: var(--_input-padding-inline);
    }

    :where(.select)::picker-icon {
      color: var(--_input-foreground);
      opacity: .6;
    }

    :where(.select)::picker(select) {
      appearance: base-select;
      background: var(--surface-raised, var(--input-background));
      color: var(--_input-foreground);
      border: 1px solid var(--_input-border);
      border-radius: var(--input-border-radius);
      padding: var(--spacing-2xs);
      margin-block: var(--spacing-3xs);
      box-shadow: 0 4px 16px #0000001f, 0 1px 4px #00000014;
    }

    :where(.select) option {
      padding-block: var(--spacing-4xs);
      padding-inline: var(--spacing-3xs) var(--spacing-xs);
      border-radius: calc(var(--input-border-radius) - 2px);
      color: var(--foreground-default);
      outline-offset: 0;
    }

    :where(.select) option:hover {
      background-color: var(--background-control-hover);
    }

    :where(.select) option:checked {
      font-weight: var(--font-weight-medium);
    }

    :where(.select) option::checkmark {
      color: var(--input-checked-foreground);
    }

    :where(.select) option:disabled {
      opacity: .5;
      cursor: not-allowed;
    }

    :where(.select) optgroup {
      font-weight: var(--font-weight-medium);
      font-size: var(--font-size-xs);
      color: var(--foreground-muted, var(--input-placeholder));
      padding-block: var(--spacing-3xs);
    }

    :where(.select) hr {
      border: none;
      border-block-start: 1px solid var(--border-faint, var(--_input-border));
      margin-block: var(--spacing-3xs);
    }
  }
}

:where(.form-label) {
  font-size: var(--font-size-s);
  line-height: var(--leading-flat);
  color: var(--foreground-muted);
  font-weight: var(--font-weight-medium);
}

@layer table.base {
  :where(.table, .typeset table) {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    font-size: var(--font-size-s);
    text-align: start;
    font-variant-numeric: tabular-nums;
  }

  :where(.table, .typeset table) :where(th) {
    font-weight: var(--font-weight-bold);
    text-align: inherit;
    color: var(--foreground-emphasis);
    padding-block: var(--_table-padding-block);
    padding-inline: var(--_table-padding-inline);
    border-block-end: 1px solid var(--border-default);
  }

  :where(.table, .typeset table) :where(td) {
    padding-block: var(--_table-padding-block);
    padding-inline: var(--_table-padding-inline);
    border-block-end: 1px solid var(--border-faint);
    color: var(--foreground-default);
  }

  :where(.table, .typeset table) :where(thead th) {
    vertical-align: bottom;
  }

  :where(.table, .typeset table) :where(tbody th) {
    font-weight: var(--font-weight-medium);
  }

  :where(.table, .typeset table) :where(tfoot td, tfoot th) {
    border-block-end: none;
    border-block-start: 1px solid var(--border-default);
    font-weight: var(--font-weight-medium);
    color: var(--foreground-emphasis);
  }

  :where(.table, .typeset table) :where(caption) {
    padding-block: var(--_table-padding-block);
    color: var(--foreground-muted);
    caption-side: bottom;
    text-align: start;
    font-size: var(--font-size-xs);
  }

  :where(.table, .typeset table) :where(tbody:last-child tr:last-child td, tbody:last-child tr:last-child th) {
    border-block-end: none;
  }
}

@layer table.public {
  :where(.table:not([data-density]), .table[data-density="default"], .typeset table) {
    --_table-padding-block: var(--spacing-s);
    --_table-padding-inline: var(--spacing-m);
  }

  :where(.table[data-density="compact"]) {
    --_table-padding-block: var(--spacing-2xs);
    --_table-padding-inline: var(--spacing-s);
  }

  :where(.table[data-density="relaxed"]) {
    --_table-padding-block: var(--spacing-m);
    --_table-padding-inline: var(--spacing-l);
  }
}

@layer table.state;

@layer spinner {
  .spinner {
    --_spinner-size: var(--spinner-size, 1.25lh);
    --_spinner-color: var(--spinner-color, currentColor);
    --_spinner-speed: var(--spinner-speed, 1s);
    --_spinner-border-width: var(--spinner-border-width, calc(var(--_spinner-size) / 8));
    height: var(--_spinner-size);
    width: var(--_spinner-size);
    aspect-ratio: 1;
    background: var(--_spinner-color);
    padding: var(--_spinner-border-width);
    mask: conic-gradient(#0000 10%, var(--_spinner-color)),
      linear-gradient(var(--_spinner-color)) content-box;
    -webkit-mask-composite: source-out;
    animation-name: spinner;
    animation-duration: var(--_spinner-speed);
    border-radius: 50%;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    display: inline-block;
    mask-composite: subtract;
  }

  @keyframes spinner {
    100% {
      transform: rotate(1turn);
    }
  }
}

:where(.icon) {
  color: inherit;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-image: var(--icon-src);
  width: var(--_icon-size, 1.5em);
  height: var(--_icon-size, 1.5em);
  background-color: currentColor;
  display: block;
  mask-size: 100%;

  @supports (width: 1lh) {
    width: var(--_icon-size, 1.25lh);
    height: var(--_icon-size, 1.25lh);
  }
}

[data-icon="cage"] {
  --icon-src: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='black' viewBox='0 0 24 24'><path  fill-rule='evenodd' d='M2 8c0-.85.52-1.5 1.09-1.95a8 8 0 0 1 2.23-1.12C7.08 4.34 9.44 4 12 4s4.92.34 6.68.93c.87.3 1.65.66 2.23 1.12C21.48 6.5 22 7.15 22 8v8c0 .85-.52 1.5-1.09 1.95-.58.46-1.36.83-2.23 1.12-1.76.59-4.12.93-6.68.93s-4.92-.34-6.68-.93a8 8 0 0 1-2.23-1.12C2.52 17.5 2 16.85 2 16zm2 0v-.02l.04-.06q.05-.1.29-.3.5-.4 1.62-.8C7.45 6.33 9.6 6 12 6s4.55.33 6.05.83q1.13.39 1.62.79.24.2.3.3l.03.06v.04l-.04.06q-.05.1-.29.3-.5.4-1.62.8c-1.5.5-3.64.82-6.05.82s-4.55-.33-6.05-.83a6 6 0 0 1-1.62-.79 1 1 0 0 1-.3-.3L4 8.02zm16 2.53q-.6.3-1.32.54-1.18.39-2.68.63v5.97q1.16-.2 2.05-.5 1.13-.39 1.62-.79.24-.2.3-.3l.03-.06v-5.49m-6 7.4v-6a28 28 0 0 1-4 0v6a26 26 0 0 0 4 0m-8.68-6.86q1.18.39 2.68.63v5.97q-1.16-.2-2.05-.5a6 6 0 0 1-1.62-.79 1 1 0 0 1-.3-.3L4 16.02v-5.49q.6.3 1.32.54' clip-rule='evenodd'/></svg>");
}

[data-icon="plus"] {
  --icon-src: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'><line x1='12' y1='5' x2='12' y2='19'/><line x1='5' y1='12' x2='19' y2='12'/></svg>");
}

[data-icon="pencil"] {
  --icon-src: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'><path d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/><path d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/></svg>");
}

:where(.link), :where(.typeset :any-link) {
  color: var(--foreground-link-default);
  font-weight: var(--font-weight-regular);
  text-decoration-skip-ink: auto;
  cursor: pointer;
  text-underline-offset: 2px;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;

  &:hover {
    color: var(--foreground-link-hover);
    text-decoration-color: var(--foreground-link-hover);
  }
}

@layer typeset {
  :where(.typeset) {
    --flow-space: .75em;
    max-width: 58ch;
    line-height: 1.4;
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-m);
  }

  :where(.typeset) > * + * {
    margin-block-start: var(--flow-space);
  }

  :where(.typeset) :where(h1, h2) {
    line-height: 1.2;
  }

  :where(.typeset) :where(h3, h4) {
    line-height: 1.33;
  }

  :where(.typeset) h1 {
    font-size: var(--font-size-3xl);
  }

  :where(.typeset) h2 {
    font-size: var(--font-size-2xl);
  }

  :where(.typeset) h3 {
    font-size: var(--font-size-xl);
  }

  :where(.typeset) h4 {
    font-size: var(--font-size-m);
  }

  :where(.typeset) > :is(p, ul, ol, blockquote, table) + :is(h2, h3, h4, h5, h6) {
    --flow-space: 2em;
  }

  :where(.typeset) > h1 + :is(h2, h3, h4) {
    --flow-space: 1rem;
  }

  :where(.typeset) > :is(h2, h3, h4, h5, h6) + :is(p, ul, ol, blockquote, table) {
    --flow-space: .5rem;
  }

  :where(.typeset) dl {
    gap: var(--spacing-s) var(--spacing-m);
    grid-template-columns: max-content 1fr;
    align-items: baseline;
    display: grid;
  }

  :where(.typeset) dt {
    white-space: nowrap;
    color: var(--foreground-marker);
    grid-column: 1;
  }

  :where(.typeset) dd {
    grid-column: 2;
    margin: 0;
  }

  :where(.typeset) :where(ul, ol) {
    padding-inline-start: 1.5em;
  }

  :where(.typeset) :where(li) + :where(li) {
    margin-block-start: .3em;
  }

  :where(.typeset) ul {
    list-style-type: square;
  }

  :where(.typeset) ol {
    list-style-type: decimal;
  }

  :where(.typeset) li::marker {
    color: var(--foreground-marker);
  }

  :where(.typeset) :where(li, blockquote) {
    text-wrap: pretty;
  }

  :where(.typeset) :where(code:not(pre code)) {
    background-color: var(--background-control-default);
    padding: .25em .35em;
    font-family: monospace;
    font-size: .75em;
  }
}

@keyframes stagger-reveal-enter {
  0% {
    opacity: 0;
    transform: translateY(2px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

:where([stagger-reveal]) {
  --_max-stagger-items: 10;
  --_reveal-max-delay: var(--reveal-max-delay, .25s);
  --_reveal-initial-delay: var(--reveal-initial-delay, 85ms);
  --_reveal-duration: var(--reveal-duration, .2s);
  --_reveal-timing-function: ease-out;
  --_reveal-animation: var(--reveal-animation, stagger-reveal-enter);

  & > :where(*) {
    animation: var(--_reveal-animation, stagger-reveal-enter) var(--_reveal-duration)
      var(--_reveal-timing-function) both;
    animation-delay: var(--_reveal-max-delay);
  }

  & > :nth-child(-n+10) {
    animation-delay: calc(var(--_reveal-initial-delay) +
      (var(--_reveal-max-delay) - var(--_reveal-initial-delay)) *
      var(--_child-index) /
      (var(--_max-stagger-items) * var(--_max-stagger-items) / var(--_max-stagger-items)));
  }

  & > :first-child {
    --_child-index: 1;
  }

  & > :nth-child(2) {
    --_child-index: 2;
  }

  & > :nth-child(3) {
    --_child-index: 3;
  }

  & > :nth-child(4) {
    --_child-index: 4;
  }

  & > :nth-child(5) {
    --_child-index: 5;
  }

  & > :nth-child(6) {
    --_child-index: 6;
  }

  & > :nth-child(7) {
    --_child-index: 7;
  }

  & > :nth-child(8) {
    --_child-index: 8;
  }

  & > :nth-child(9) {
    --_child-index: 9;
  }

  & > :nth-child(10) {
    --_child-index: 10;
  }
}

color-mode, color-mode[inverted] {
  color: var(--foreground-default);
}

color-mode[palette="grey"], color-mode:not([palette]):not([inverted]), :root {
  --palette-inherit-0: var(--palette-grey-0);
  --palette-inherit-50: var(--palette-grey-50);
  --palette-inherit-100: var(--palette-grey-100);
  --palette-inherit-150: var(--palette-grey-150);
  --palette-inherit-200: var(--palette-grey-200);
  --palette-inherit-250: var(--palette-grey-250);
  --palette-inherit-300: var(--palette-grey-300);
  --palette-inherit-350: var(--palette-grey-350);
  --palette-inherit-400: var(--palette-grey-400);
  --palette-inherit-450: var(--palette-grey-450);
  --palette-inherit-500: var(--palette-grey-500);
  --palette-inherit-550: var(--palette-grey-550);
  --palette-inherit-600: var(--palette-grey-600);
  --palette-inherit-650: var(--palette-grey-650);
  --palette-inherit-700: var(--palette-grey-700);
  --palette-inherit-750: var(--palette-grey-750);
  --palette-inherit-800: var(--palette-grey-800);
  --palette-inherit-850: var(--palette-grey-850);
  --palette-inherit-900: var(--palette-grey-900);
  --palette-inherit-950: var(--palette-grey-950);
}

color-mode[palette="coral"] {
  --palette-inherit-0: var(--palette-coral-0);
  --palette-inherit-50: var(--palette-coral-50);
  --palette-inherit-100: var(--palette-coral-100);
  --palette-inherit-150: var(--palette-coral-150);
  --palette-inherit-200: var(--palette-coral-200);
  --palette-inherit-250: var(--palette-coral-250);
  --palette-inherit-300: var(--palette-coral-300);
  --palette-inherit-350: var(--palette-coral-350);
  --palette-inherit-400: var(--palette-coral-400);
  --palette-inherit-450: var(--palette-coral-450);
  --palette-inherit-500: var(--palette-coral-500);
  --palette-inherit-550: var(--palette-coral-550);
  --palette-inherit-600: var(--palette-coral-600);
  --palette-inherit-650: var(--palette-coral-650);
  --palette-inherit-700: var(--palette-coral-700);
  --palette-inherit-750: var(--palette-coral-750);
  --palette-inherit-800: var(--palette-coral-800);
  --palette-inherit-850: var(--palette-coral-850);
  --palette-inherit-900: var(--palette-coral-900);
  --palette-inherit-950: var(--palette-coral-950);
}

color-mode[palette="blue"] {
  --palette-inherit-0: var(--palette-blue-0);
  --palette-inherit-50: var(--palette-blue-50);
  --palette-inherit-100: var(--palette-blue-100);
  --palette-inherit-150: var(--palette-blue-150);
  --palette-inherit-200: var(--palette-blue-200);
  --palette-inherit-250: var(--palette-blue-250);
  --palette-inherit-300: var(--palette-blue-300);
  --palette-inherit-350: var(--palette-blue-350);
  --palette-inherit-400: var(--palette-blue-400);
  --palette-inherit-450: var(--palette-blue-450);
  --palette-inherit-500: var(--palette-blue-500);
  --palette-inherit-550: var(--palette-blue-550);
  --palette-inherit-600: var(--palette-blue-600);
  --palette-inherit-650: var(--palette-blue-650);
  --palette-inherit-700: var(--palette-blue-700);
  --palette-inherit-750: var(--palette-blue-750);
  --palette-inherit-800: var(--palette-blue-800);
  --palette-inherit-850: var(--palette-blue-850);
  --palette-inherit-900: var(--palette-blue-900);
  --palette-inherit-950: var(--palette-blue-950);
}

color-mode[palette="yellow"] {
  --palette-inherit-0: var(--palette-yellow-0);
  --palette-inherit-50: var(--palette-yellow-50);
  --palette-inherit-100: var(--palette-yellow-100);
  --palette-inherit-150: var(--palette-yellow-150);
  --palette-inherit-200: var(--palette-yellow-200);
  --palette-inherit-250: var(--palette-yellow-250);
  --palette-inherit-300: var(--palette-yellow-300);
  --palette-inherit-350: var(--palette-yellow-350);
  --palette-inherit-400: var(--palette-yellow-400);
  --palette-inherit-450: var(--palette-yellow-450);
  --palette-inherit-500: var(--palette-yellow-500);
  --palette-inherit-550: var(--palette-yellow-550);
  --palette-inherit-600: var(--palette-yellow-600);
  --palette-inherit-650: var(--palette-yellow-650);
  --palette-inherit-700: var(--palette-yellow-700);
  --palette-inherit-750: var(--palette-yellow-750);
  --palette-inherit-800: var(--palette-yellow-800);
  --palette-inherit-850: var(--palette-yellow-850);
  --palette-inherit-900: var(--palette-yellow-900);
  --palette-inherit-950: var(--palette-yellow-950);
}

color-mode[palette="green"] {
  --palette-inherit-0: var(--palette-green-0);
  --palette-inherit-50: var(--palette-green-50);
  --palette-inherit-100: var(--palette-green-100);
  --palette-inherit-150: var(--palette-green-150);
  --palette-inherit-200: var(--palette-green-200);
  --palette-inherit-250: var(--palette-green-250);
  --palette-inherit-300: var(--palette-green-300);
  --palette-inherit-350: var(--palette-green-350);
  --palette-inherit-400: var(--palette-green-400);
  --palette-inherit-450: var(--palette-green-450);
  --palette-inherit-500: var(--palette-green-500);
  --palette-inherit-550: var(--palette-green-550);
  --palette-inherit-600: var(--palette-green-600);
  --palette-inherit-650: var(--palette-green-650);
  --palette-inherit-700: var(--palette-green-700);
  --palette-inherit-750: var(--palette-green-750);
  --palette-inherit-800: var(--palette-green-800);
  --palette-inherit-850: var(--palette-green-850);
  --palette-inherit-900: var(--palette-green-900);
  --palette-inherit-950: var(--palette-green-950);
}

color-mode[palette="orange"] {
  --palette-inherit-0: var(--palette-orange-0);
  --palette-inherit-50: var(--palette-orange-50);
  --palette-inherit-100: var(--palette-orange-100);
  --palette-inherit-150: var(--palette-orange-150);
  --palette-inherit-200: var(--palette-orange-200);
  --palette-inherit-250: var(--palette-orange-250);
  --palette-inherit-300: var(--palette-orange-300);
  --palette-inherit-350: var(--palette-orange-350);
  --palette-inherit-400: var(--palette-orange-400);
  --palette-inherit-450: var(--palette-orange-450);
  --palette-inherit-500: var(--palette-orange-500);
  --palette-inherit-550: var(--palette-orange-550);
  --palette-inherit-600: var(--palette-orange-600);
  --palette-inherit-650: var(--palette-orange-650);
  --palette-inherit-700: var(--palette-orange-700);
  --palette-inherit-750: var(--palette-orange-750);
  --palette-inherit-800: var(--palette-orange-800);
  --palette-inherit-850: var(--palette-orange-850);
  --palette-inherit-900: var(--palette-orange-900);
  --palette-inherit-950: var(--palette-orange-950);
}

color-mode[palette="purple"] {
  --palette-inherit-0: var(--palette-purple-0);
  --palette-inherit-50: var(--palette-purple-50);
  --palette-inherit-100: var(--palette-purple-100);
  --palette-inherit-150: var(--palette-purple-150);
  --palette-inherit-200: var(--palette-purple-200);
  --palette-inherit-250: var(--palette-purple-250);
  --palette-inherit-300: var(--palette-purple-300);
  --palette-inherit-350: var(--palette-purple-350);
  --palette-inherit-400: var(--palette-purple-400);
  --palette-inherit-450: var(--palette-purple-450);
  --palette-inherit-500: var(--palette-purple-500);
  --palette-inherit-550: var(--palette-purple-550);
  --palette-inherit-600: var(--palette-purple-600);
  --palette-inherit-650: var(--palette-purple-650);
  --palette-inherit-700: var(--palette-purple-700);
  --palette-inherit-750: var(--palette-purple-750);
  --palette-inherit-800: var(--palette-purple-800);
  --palette-inherit-850: var(--palette-purple-850);
  --palette-inherit-900: var(--palette-purple-900);
  --palette-inherit-950: var(--palette-purple-950);
}

color-mode[palette="teal"] {
  --palette-inherit-0: var(--palette-teal-0);
  --palette-inherit-50: var(--palette-teal-50);
  --palette-inherit-100: var(--palette-teal-100);
  --palette-inherit-150: var(--palette-teal-150);
  --palette-inherit-200: var(--palette-teal-200);
  --palette-inherit-250: var(--palette-teal-250);
  --palette-inherit-300: var(--palette-teal-300);
  --palette-inherit-350: var(--palette-teal-350);
  --palette-inherit-400: var(--palette-teal-400);
  --palette-inherit-450: var(--palette-teal-450);
  --palette-inherit-500: var(--palette-teal-500);
  --palette-inherit-550: var(--palette-teal-550);
  --palette-inherit-600: var(--palette-teal-600);
  --palette-inherit-650: var(--palette-teal-650);
  --palette-inherit-700: var(--palette-teal-700);
  --palette-inherit-750: var(--palette-teal-750);
  --palette-inherit-800: var(--palette-teal-800);
  --palette-inherit-850: var(--palette-teal-850);
  --palette-inherit-900: var(--palette-teal-900);
  --palette-inherit-950: var(--palette-teal-950);
}

color-mode[palette="periwinkle"] {
  --palette-inherit-0: var(--palette-periwinkle-0);
  --palette-inherit-50: var(--palette-periwinkle-50);
  --palette-inherit-100: var(--palette-periwinkle-100);
  --palette-inherit-150: var(--palette-periwinkle-150);
  --palette-inherit-200: var(--palette-periwinkle-200);
  --palette-inherit-250: var(--palette-periwinkle-250);
  --palette-inherit-300: var(--palette-periwinkle-300);
  --palette-inherit-350: var(--palette-periwinkle-350);
  --palette-inherit-400: var(--palette-periwinkle-400);
  --palette-inherit-450: var(--palette-periwinkle-450);
  --palette-inherit-500: var(--palette-periwinkle-500);
  --palette-inherit-550: var(--palette-periwinkle-550);
  --palette-inherit-600: var(--palette-periwinkle-600);
  --palette-inherit-650: var(--palette-periwinkle-650);
  --palette-inherit-700: var(--palette-periwinkle-700);
  --palette-inherit-750: var(--palette-periwinkle-750);
  --palette-inherit-800: var(--palette-periwinkle-800);
  --palette-inherit-850: var(--palette-periwinkle-850);
  --palette-inherit-900: var(--palette-periwinkle-900);
  --palette-inherit-950: var(--palette-periwinkle-950);
}

:root, color-mode {
  --surface-raised: var(--palette-inherit-0);
  --surface-default: var(--palette-inherit-50);
  --surface-sunken: var(--palette-inherit-100);
  --foreground-default: var(--palette-inherit-650);
  --foreground-emphasis: var(--palette-inherit-750);
  --foreground-muted: var(--palette-inherit-550);
  --foreground-marker: var(--palette-inherit-600);
  --foreground-link-default: var(--palette-periwinkle-600);
  --foreground-link-hover: var(--palette-periwinkle-700);
  --foreground-link-decoration: var(--palette-periwinkle-450);
  --foreground-control-default: var(--palette-inherit-800);
  --foreground-control-hover: var(--palette-inherit-800);
  --foreground-control-placeholder: var(--palette-inherit-400);
  --foreground-control-active: var(--palette-inherit-900);
  --foreground-control-selected: var(--palette-inherit-600);
  --foreground-control-selection: var(--palette-periwinkle-700);
  --foreground-control-error: var(--palette-coral-650);
  --background-control-default: var(--palette-inherit-50);
  --background-control-hover: var(--palette-inherit-50);
  --background-control-active: var(--palette-periwinkle-100);
  --background-control-selection: var(--palette-periwinkle-250);
  --background-control-error: var(--palette-coral-100);
  --border-default: var(--palette-inherit-250);
  --border-faint: var(--palette-inherit-150);
  --border-prominent: var(--palette-inherit-350);
  --border-control-default: var(--palette-inherit-300);
  --border-control-focused: var(--palette-periwinkle-400);
  --border-control-hover: var(--palette-inherit-400);
  --border-control-active: var(--palette-periwinkle-700);
  --border-control-selected: var(--palette-periwinkle-600);
  --border-control-error: var(--palette-coral-400);
  --shadow: var(--palette-inherit-400);
  --backdrop: var(--palette-inherit-300);
  --button-primary-base: var(--palette-periwinkle-600);
  --button-primary-on-base: var(--palette-periwinkle-50);
  --button-primary-subtle: var(--palette-periwinkle-100);
  --button-primary-on-subtle: var(--palette-periwinkle-800);
  --button-primary-on-surface: var(--palette-periwinkle-600);
  --button-secondary-base: var(--palette-grey-600);
  --button-secondary-on-base: var(--palette-grey-50);
  --button-secondary-subtle: var(--palette-grey-100);
  --button-secondary-on-subtle: var(--palette-grey-800);
  --button-secondary-on-surface: var(--palette-grey-600);
  --button-danger-base: var(--palette-coral-600);
  --button-danger-on-base: var(--palette-coral-50);
  --button-danger-subtle: var(--palette-coral-100);
  --button-danger-on-subtle: var(--palette-coral-800);
  --button-danger-on-surface: var(--palette-coral-600);
  --button-inherit-base: var(--palette-inherit-600);
  --button-inherit-on-base: var(--palette-inherit-50);
  --button-inherit-subtle: var(--palette-inherit-100);
  --button-inherit-on-subtle: var(--palette-inherit-800);
  --button-inherit-on-surface: var(--palette-inherit-600);
}

color-mode[inverted] {
  --surface-raised: var(--palette-inherit-950);
  --surface-default: var(--palette-inherit-900);
  --surface-sunken: var(--palette-inherit-800);
  --foreground-default: var(--palette-inherit-150);
  --foreground-emphasis: var(--palette-inherit-100);
  --foreground-muted: var(--palette-inherit-250);
  --foreground-marker: var(--palette-inherit-200);
  --foreground-link-default: var(--palette-periwinkle-600);
  --foreground-link-hover: var(--palette-periwinkle-700);
  --foreground-link-decoration: var(--palette-periwinkle-450);
  --foreground-control-default: var(--palette-inherit-800);
  --foreground-control-hover: var(--palette-inherit-800);
  --foreground-control-placeholder: var(--palette-inherit-500);
  --foreground-control-active: var(--palette-inherit-900);
  --foreground-control-selected: var(--palette-inherit-400);
  --foreground-control-selection: var(--palette-periwinkle-700);
  --foreground-control-error: var(--palette-coral-150);
  --background-control-default: var(--palette-inherit-750);
  --background-control-hover: var(--palette-inherit-700);
  --background-control-active: var(--palette-periwinkle-700);
  --background-control-selection: var(--palette-periwinkle-250);
  --background-control-error: var(--palette-coral-100);
  --border-default: var(--palette-inherit-700);
  --border-faint: var(--palette-inherit-750);
  --border-prominent: var(--palette-inherit-550);
  --border-control-default: var(--palette-inherit-500);
  --border-control-focused: var(--palette-periwinkle-400);
  --border-control-hover: var(--palette-inherit-500);
  --border-control-active: var(--palette-periwinkle-600);
  --border-control-selected: var(--palette-periwinkle-600);
  --border-control-error: var(--palette-coral-450);
  --shadow: var(--palette-inherit-400);
  --backdrop: var(--palette-inherit-300);
  --button-primary-base: var(--palette-periwinkle-300);
  --button-primary-on-base: var(--palette-periwinkle-950);
  --button-primary-subtle: var(--palette-periwinkle-600);
  --button-primary-on-subtle: var(--palette-periwinkle-100);
  --button-primary-on-surface: var(--palette-periwinkle-200);
  --button-secondary-base: var(--palette-grey-300);
  --button-secondary-on-base: var(--palette-grey-950);
  --button-secondary-subtle: var(--palette-grey-600);
  --button-secondary-on-subtle: var(--palette-grey-100);
  --button-secondary-on-surface: var(--palette-grey-200);
  --button-danger-base: var(--palette-coral-300);
  --button-danger-on-base: var(--palette-coral-950);
  --button-danger-subtle: var(--palette-coral-600);
  --button-danger-on-subtle: var(--palette-coral-100);
  --button-danger-on-surface: var(--palette-coral-200);
  --button-inherit-base: var(--palette-inherit-300);
  --button-inherit-on-base: var(--palette-inherit-950);
  --button-inherit-subtle: var(--palette-inherit-600);
  --button-inherit-on-subtle: var(--palette-inherit-100);
  --button-inherit-on-surface: var(--palette-inherit-200);
}

@media (prefers-color-scheme: dark) {
  :root, color-mode:not([inverted]) {
    --surface-raised: var(--palette-inherit-800);
    --surface-default: var(--palette-inherit-850);
    --surface-sunken: var(--palette-inherit-900);
    --foreground-default: var(--palette-inherit-150);
    --foreground-emphasis: var(--palette-inherit-100);
    --foreground-muted: var(--palette-inherit-250);
    --foreground-marker: var(--palette-inherit-200);
    --foreground-link-default: var(--palette-periwinkle-350);
    --foreground-link-hover: var(--palette-periwinkle-300);
    --foreground-link-decoration: var(--palette-periwinkle-450);
    --foreground-control-default: var(--palette-inherit-800);
    --foreground-control-hover: var(--palette-inherit-800);
    --foreground-control-placeholder: var(--palette-inherit-500);
    --foreground-control-active: var(--palette-inherit-900);
    --foreground-control-selected: var(--palette-inherit-400);
    --foreground-control-selection: var(--palette-periwinkle-150);
    --foreground-control-error: var(--palette-coral-150);
    --background-control-default: var(--palette-inherit-750);
    --background-control-hover: var(--palette-inherit-700);
    --background-control-active: var(--palette-periwinkle-700);
    --background-control-selection: var(--palette-periwinkle-500);
    --background-control-error: var(--palette-coral-100);
    --border-default: var(--palette-inherit-700);
    --border-faint: var(--palette-inherit-750);
    --border-prominent: var(--palette-inherit-550);
    --border-control-default: var(--palette-inherit-550);
    --border-control-focused: var(--palette-periwinkle-400);
    --border-control-hover: var(--palette-inherit-550);
    --border-control-active: var(--palette-periwinkle-600);
    --border-control-selected: var(--palette-periwinkle-600);
    --border-control-error: var(--palette-coral-450);
    --shadow: var(--palette-inherit-300);
    --backdrop: var(--palette-inherit-900);
    --button-primary-base: var(--palette-periwinkle-250);
    --button-primary-on-base: var(--palette-periwinkle-850);
    --button-primary-subtle: var(--palette-periwinkle-700);
    --button-primary-on-subtle: var(--palette-periwinkle-50);
    --button-primary-on-surface: var(--palette-periwinkle-200);
    --button-secondary-base: var(--palette-grey-250);
    --button-secondary-on-base: var(--palette-grey-850);
    --button-secondary-subtle: var(--palette-grey-700);
    --button-secondary-on-subtle: var(--palette-grey-50);
    --button-secondary-on-surface: var(--palette-grey-200);
    --button-danger-base: var(--palette-coral-250);
    --button-danger-on-base: var(--palette-coral-850);
    --button-danger-subtle: var(--palette-coral-700);
    --button-danger-on-subtle: var(--palette-coral-50);
    --button-danger-on-surface: var(--palette-coral-200);
    --button-inherit-base: var(--palette-inherit-250);
    --button-inherit-on-base: var(--palette-inherit-850);
    --button-inherit-subtle: var(--palette-inherit-700);
    --button-inherit-on-subtle: var(--palette-inherit-50);
    --button-inherit-on-surface: var(--palette-inherit-200);
  }

  color-mode[inverted] {
    --surface-raised: var(--palette-inherit-0);
    --surface-default: var(--palette-inherit-50);
    --surface-sunken: var(--palette-inherit-150);
    --foreground-default: var(--palette-inherit-650);
    --foreground-emphasis: var(--palette-inherit-750);
    --foreground-muted: var(--palette-inherit-550);
    --foreground-marker: var(--palette-inherit-600);
    --foreground-link-default: var(--palette-periwinkle-350);
    --foreground-link-hover: var(--palette-periwinkle-300);
    --foreground-link-decoration: var(--palette-periwinkle-450);
    --foreground-control-default: var(--palette-inherit-800);
    --foreground-control-hover: var(--palette-inherit-800);
    --foreground-control-placeholder: var(--palette-inherit-400);
    --foreground-control-active: var(--palette-inherit-900);
    --foreground-control-selected: var(--palette-inherit-600);
    --foreground-control-selection: var(--palette-periwinkle-150);
    --foreground-control-error: var(--palette-coral-650);
    --background-control-default: var(--palette-inherit-150);
    --background-control-hover: var(--palette-inherit-200);
    --background-control-active: var(--palette-periwinkle-150);
    --background-control-selection: var(--palette-periwinkle-500);
    --background-control-error: var(--palette-coral-100);
    --border-default: var(--palette-inherit-250);
    --border-faint: var(--palette-inherit-200);
    --border-prominent: var(--palette-inherit-400);
    --border-control-default: var(--palette-inherit-400);
    --border-control-focused: var(--palette-periwinkle-400);
    --border-control-hover: var(--palette-inherit-450);
    --border-control-active: var(--palette-periwinkle-700);
    --border-control-selected: var(--palette-periwinkle-600);
    --border-control-error: var(--palette-coral-400);
    --shadow: var(--palette-inherit-300);
    --backdrop: var(--palette-inherit-900);
    --button-primary-base: var(--palette-periwinkle-600);
    --button-primary-on-base: var(--palette-periwinkle-50);
    --button-primary-subtle: var(--palette-periwinkle-350);
    --button-primary-on-subtle: var(--palette-periwinkle-750);
    --button-primary-on-surface: var(--palette-periwinkle-600);
    --button-secondary-base: var(--palette-grey-600);
    --button-secondary-on-base: var(--palette-grey-50);
    --button-secondary-subtle: var(--palette-grey-350);
    --button-secondary-on-subtle: var(--palette-grey-750);
    --button-secondary-on-surface: var(--palette-grey-600);
    --button-danger-base: var(--palette-coral-600);
    --button-danger-on-base: var(--palette-coral-50);
    --button-danger-subtle: var(--palette-coral-350);
    --button-danger-on-subtle: var(--palette-coral-750);
    --button-danger-on-surface: var(--palette-coral-600);
    --button-inherit-base: var(--palette-inherit-600);
    --button-inherit-on-base: var(--palette-inherit-50);
    --button-inherit-subtle: var(--palette-inherit-350);
    --button-inherit-on-subtle: var(--palette-inherit-750);
    --button-inherit-on-surface: var(--palette-inherit-600);
  }
}

@layer popover.base {
  :where(.popover) {
    border: none;
    margin: auto;
    padding: 0;
    overflow: visible;
  }

  :where(.popover[data-type="drawer"]) {
    margin: 0;
  }

  :where(.popover[data-type="drawer"]:not([data-position])), :where(.popover[data-type="drawer"][data-position="right"]) {
    height: 100%;
    left: auto;
  }

  :where(.popover[data-type="drawer"][data-position="left"]) {
    height: 100%;
    right: auto;
  }

  :where(.popover[data-type="drawer"][data-position="top"]) {
    width: 100%;
    bottom: auto;
  }

  :where(.popover[data-type="drawer"][data-position="bottom"]) {
    width: 100%;
    top: auto;
  }

  :where(.popover[data-type="tooltip"]:not([data-position])), :where(.popover[data-type="tooltip"][data-position="top"]) {
    position-area: top;
  }

  :where(.popover[data-type="tooltip"][data-position="bottom"]) {
    position-area: bottom;
  }

  :where(.popover[data-type="tooltip"][data-position="left"]) {
    position-area: left;
  }

  :where(.popover[data-type="tooltip"][data-position="right"]) {
    position-area: right;
  }

  :where(.popover[data-backdrop])::backdrop {
    background: oklch(from var(--backdrop) l c h / .2);
  }
}

@layer popover.state {
  :where(.popover) {
    transition: opacity .2s ease-out,
      transform .2s ease-out,
      overlay .2s ease-out allow-discrete,
      display .2s ease-out allow-discrete;
    opacity: var(--_popover-exit-opacity, 0);
    transform: var(--_popover-exit-transform, none);
  }

  :where(.popover):popover-open {
    opacity: 1;
    transform: none;

    @starting-style {
      opacity: var(--_popover-enter-opacity, 0);
      transform: var(--_popover-enter-transform, none);
    }
  }

  :where(.popover:not([data-type])) {
    --_popover-enter-transform: translateY(-.5rem);
    --_popover-exit-transform: translateY(0rem);
  }

  :where(.popover[data-type="dialog"]) {
    --_popover-enter-transform: translateY(-1rem);
    --_popover-exit-transform: translateY(0rem);
  }

  :where(.popover[data-type="drawer"]:not([data-position])), :where(.popover[data-type="drawer"][data-position="right"]) {
    --_popover-enter-transform: translateX(100%);
    --_popover-exit-transform: translateX(100%);
    --_popover-enter-opacity: 1;
    --_popover-exit-opacity: 1;
  }

  :where(.popover[data-type="drawer"][data-position="left"]) {
    --_popover-enter-transform: translateX(-100%);
    --_popover-exit-transform: translateX(-100%);
    --_popover-enter-opacity: 1;
    --_popover-exit-opacity: 1;
  }

  :where(.popover[data-type="drawer"][data-position="top"]) {
    --_popover-enter-transform: translateY(-100%);
    --_popover-exit-transform: translateY(-100%);
    --_popover-enter-opacity: 1;
    --_popover-exit-opacity: 1;
  }

  :where(.popover[data-type="drawer"][data-position="bottom"]) {
    --_popover-enter-transform: translateY(100%);
    --_popover-exit-transform: translateY(100%);
    --_popover-enter-opacity: 1;
    --_popover-exit-opacity: 1;
  }

  :where(.popover[data-backdrop])::backdrop {
    transition: opacity .2s ease-out,
      overlay .2s ease-out allow-discrete,
      display .2s ease-out allow-discrete;
    opacity: 0;
  }

  :where(.popover[data-backdrop]):popover-open::backdrop {
    opacity: 1;

    @starting-style {
      opacity: 0;
    }
  }
}

@layer spacing.margin {
  .m-auto {
    margin: auto;
  }

  .my-auto {
    margin-block: auto;
  }

  .mx-auto {
    margin-inline: auto;
  }

  .ml-auto {
    margin-inline-start: auto;
  }

  .mr-auto {
    margin-inline-end: auto;
  }

  .mt-auto {
    margin-block-start: auto;
  }

  .mb-auto {
    margin-block-end: auto;
  }

  .m-0 {
    margin: 0;
  }

  .ml-0 {
    margin-inline-start: 0;
  }

  .mr-0 {
    margin-inline-end: 0;
  }

  .mt-0 {
    margin-block-start: 0;
  }

  .mb-0 {
    margin-block-end: 0;
  }

  .mx-0 {
    margin-inline: 0;
  }

  .my-0 {
    margin-block: 0;
  }

  .m-3xs {
    margin: var(--spacing-3xs);
  }

  .ml-3xs {
    margin-inline-start: var(--spacing-3xs);
  }

  .mr-3xs {
    margin-inline-end: var(--spacing-3xs);
  }

  .mt-3xs {
    margin-block-start: var(--spacing-3xs);
  }

  .mb-3xs {
    margin-block-end: var(--spacing-3xs);
  }

  .mx-3xs {
    margin-inline: var(--spacing-3xs);
  }

  .my-3xs {
    margin-block: var(--spacing-3xs);
  }

  .m-2xs {
    margin: var(--spacing-2xs);
  }

  .ml-2xs {
    margin-inline-start: var(--spacing-2xs);
  }

  .mr-2xs {
    margin-inline-end: var(--spacing-2xs);
  }

  .mt-2xs {
    margin-block-start: var(--spacing-2xs);
  }

  .mb-2xs {
    margin-block-end: var(--spacing-2xs);
  }

  .mx-2xs {
    margin-inline: var(--spacing-2xs);
  }

  .my-2xs {
    margin-block: var(--spacing-2xs);
  }

  .m-xs {
    margin: var(--spacing-xs);
  }

  .ml-xs {
    margin-inline-start: var(--spacing-xs);
  }

  .mr-xs {
    margin-inline-end: var(--spacing-xs);
  }

  .mt-xs {
    margin-block-start: var(--spacing-xs);
  }

  .mb-xs {
    margin-block-end: var(--spacing-xs);
  }

  .mx-xs {
    margin-inline: var(--spacing-xs);
  }

  .my-xs {
    margin-block: var(--spacing-xs);
  }

  .m-s {
    margin: var(--spacing-s);
  }

  .ml-s {
    margin-inline-start: var(--spacing-s);
  }

  .mr-s {
    margin-inline-end: var(--spacing-s);
  }

  .mt-s {
    margin-block-start: var(--spacing-s);
  }

  .mb-s {
    margin-block-end: var(--spacing-s);
  }

  .mx-s {
    margin-inline: var(--spacing-s);
  }

  .my-s {
    margin-block: var(--spacing-s);
  }

  .m-m {
    margin: var(--spacing-m);
  }

  .ml-m {
    margin-inline-start: var(--spacing-m);
  }

  .mr-m {
    margin-inline-end: var(--spacing-m);
  }

  .mt-m {
    margin-block-start: var(--spacing-m);
  }

  .mb-m {
    margin-block-end: var(--spacing-m);
  }

  .mx-m {
    margin-inline: var(--spacing-m);
  }

  .my-m {
    margin-block: var(--spacing-m);
  }

  .m-l {
    margin: var(--spacing-l);
  }

  .ml-l {
    margin-inline-start: var(--spacing-l);
  }

  .mr-l {
    margin-inline-end: var(--spacing-l);
  }

  .mt-l {
    margin-block-start: var(--spacing-l);
  }

  .mb-l {
    margin-block-end: var(--spacing-l);
  }

  .mx-l {
    margin-inline: var(--spacing-l);
  }

  .my-l {
    margin-block: var(--spacing-l);
  }

  .m-xl {
    margin: var(--spacing-xl);
  }

  .ml-xl {
    margin-inline-start: var(--spacing-xl);
  }

  .mr-xl {
    margin-inline-end: var(--spacing-xl);
  }

  .mt-xl {
    margin-block-start: var(--spacing-xl);
  }

  .mb-xl {
    margin-block-end: var(--spacing-xl);
  }

  .mx-xl {
    margin-inline: var(--spacing-xl);
  }

  .my-xl {
    margin-block: var(--spacing-xl);
  }

  .m-2xl {
    margin: var(--spacing-2xl);
  }

  .ml-2xl {
    margin-inline-start: var(--spacing-2xl);
  }

  .mr-2xl {
    margin-inline-end: var(--spacing-2xl);
  }

  .mt-2xl {
    margin-block-start: var(--spacing-2xl);
  }

  .mb-2xl {
    margin-block-end: var(--spacing-2xl);
  }

  .mx-2xl {
    margin-inline: var(--spacing-2xl);
  }

  .my-2xl {
    margin-block: var(--spacing-2xl);
  }

  .m-3xl {
    margin: var(--spacing-3xl);
  }

  .ml-3xl {
    margin-inline-start: var(--spacing-3xl);
  }

  .mr-3xl {
    margin-inline-end: var(--spacing-3xl);
  }

  .mt-3xl {
    margin-block-start: var(--spacing-3xl);
  }

  .mb-3xl {
    margin-block-end: var(--spacing-3xl);
  }

  .mx-3xl {
    margin-inline: var(--spacing-3xl);
  }

  .my-3xl {
    margin-block: var(--spacing-3xl);
  }

  .m-4xl {
    margin: var(--spacing-4xl);
  }

  .ml-4xl {
    margin-inline-start: var(--spacing-4xl);
  }

  .mr-4xl {
    margin-inline-end: var(--spacing-4xl);
  }

  .mt-4xl {
    margin-block-start: var(--spacing-4xl);
  }

  .mb-4xl {
    margin-block-end: var(--spacing-4xl);
  }

  .mx-4xl {
    margin-inline: var(--spacing-4xl);
  }

  .my-4xl {
    margin-block: var(--spacing-4xl);
  }

  .m-4xs-3xs {
    margin: var(--spacing-4xs-3xs);
  }

  .ml-4xs-3xs {
    margin-inline-start: var(--spacing-4xs-3xs);
  }

  .mr-4xs-3xs {
    margin-inline-end: var(--spacing-4xs-3xs);
  }

  .mt-4xs-3xs {
    margin-block-start: var(--spacing-4xs-3xs);
  }

  .mb-4xs-3xs {
    margin-block-end: var(--spacing-4xs-3xs);
  }

  .mx-4xs-3xs {
    margin-inline: var(--spacing-4xs-3xs);
  }

  .my-4xs-3xs {
    margin-block: var(--spacing-4xs-3xs);
  }

  .m-3xs-2xs {
    margin: var(--spacing-3xs-2xs);
  }

  .ml-3xs-2xs {
    margin-inline-start: var(--spacing-3xs-2xs);
  }

  .mr-3xs-2xs {
    margin-inline-end: var(--spacing-3xs-2xs);
  }

  .mt-3xs-2xs {
    margin-block-start: var(--spacing-3xs-2xs);
  }

  .mb-3xs-2xs {
    margin-block-end: var(--spacing-3xs-2xs);
  }

  .mx-3xs-2xs {
    margin-inline: var(--spacing-3xs-2xs);
  }

  .my-3xs-2xs {
    margin-block: var(--spacing-3xs-2xs);
  }

  .m-2xs-xs {
    margin: var(--spacing-2xs-xs);
  }

  .ml-2xs-xs {
    margin-inline-start: var(--spacing-2xs-xs);
  }

  .mr-2xs-xs {
    margin-inline-end: var(--spacing-2xs-xs);
  }

  .mt-2xs-xs {
    margin-block-start: var(--spacing-2xs-xs);
  }

  .mb-2xs-xs {
    margin-block-end: var(--spacing-2xs-xs);
  }

  .mx-2xs-xs {
    margin-inline: var(--spacing-2xs-xs);
  }

  .my-2xs-xs {
    margin-block: var(--spacing-2xs-xs);
  }

  .m-xs-s {
    margin: var(--spacing-xs-s);
  }

  .ml-xs-s {
    margin-inline-start: var(--spacing-xs-s);
  }

  .mr-xs-s {
    margin-inline-end: var(--spacing-xs-s);
  }

  .mt-xs-s {
    margin-block-start: var(--spacing-xs-s);
  }

  .mb-xs-s {
    margin-block-end: var(--spacing-xs-s);
  }

  .mx-xs-s {
    margin-inline: var(--spacing-xs-s);
  }

  .my-xs-s {
    margin-block: var(--spacing-xs-s);
  }

  .m-s-m {
    margin: var(--spacing-s-m);
  }

  .ml-s-m {
    margin-inline-start: var(--spacing-s-m);
  }

  .mr-s-m {
    margin-inline-end: var(--spacing-s-m);
  }

  .mt-s-m {
    margin-block-start: var(--spacing-s-m);
  }

  .mb-s-m {
    margin-block-end: var(--spacing-s-m);
  }

  .mx-s-m {
    margin-inline: var(--spacing-s-m);
  }

  .my-s-m {
    margin-block: var(--spacing-s-m);
  }

  .m-m-l {
    margin: var(--spacing-m-l);
  }

  .ml-m-l {
    margin-inline-start: var(--spacing-m-l);
  }

  .mr-m-l {
    margin-inline-end: var(--spacing-m-l);
  }

  .mt-m-l {
    margin-block-start: var(--spacing-m-l);
  }

  .mb-m-l {
    margin-block-end: var(--spacing-m-l);
  }

  .mx-m-l {
    margin-inline: var(--spacing-m-l);
  }

  .my-m-l {
    margin-block: var(--spacing-m-l);
  }

  .m-l-xl {
    margin: var(--spacing-l-xl);
  }

  .ml-l-xl {
    margin-inline-start: var(--spacing-l-xl);
  }

  .mr-l-xl {
    margin-inline-end: var(--spacing-l-xl);
  }

  .mt-l-xl {
    margin-block-start: var(--spacing-l-xl);
  }

  .mb-l-xl {
    margin-block-end: var(--spacing-l-xl);
  }

  .mx-l-xl {
    margin-inline: var(--spacing-l-xl);
  }

  .my-l-xl {
    margin-block: var(--spacing-l-xl);
  }

  .m-xl-2xl {
    margin: var(--spacing-xl-2xl);
  }

  .ml-xl-2xl {
    margin-inline-start: var(--spacing-xl-2xl);
  }

  .mr-xl-2xl {
    margin-inline-end: var(--spacing-xl-2xl);
  }

  .mt-xl-2xl {
    margin-block-start: var(--spacing-xl-2xl);
  }

  .mb-xl-2xl {
    margin-block-end: var(--spacing-xl-2xl);
  }

  .mx-xl-2xl {
    margin-inline: var(--spacing-xl-2xl);
  }

  .my-xl-2xl {
    margin-block: var(--spacing-xl-2xl);
  }

  .m-2xl-3xl {
    margin: var(--spacing-2xl-3xl);
  }

  .ml-2xl-3xl {
    margin-inline-start: var(--spacing-2xl-3xl);
  }

  .mr-2xl-3xl {
    margin-inline-end: var(--spacing-2xl-3xl);
  }

  .mt-2xl-3xl {
    margin-block-start: var(--spacing-2xl-3xl);
  }

  .mb-2xl-3xl {
    margin-block-end: var(--spacing-2xl-3xl);
  }

  .mx-2xl-3xl {
    margin-inline: var(--spacing-2xl-3xl);
  }

  .my-2xl-3xl {
    margin-block: var(--spacing-2xl-3xl);
  }

  .m--3xs {
    margin: calc(var(--spacing-3xs) * -1);
  }

  .ml--3xs {
    margin-inline-start: calc(var(--spacing-3xs) * -1);
  }

  .mr--3xs {
    margin-inline-end: calc(var(--spacing-3xs) * -1);
  }

  .mt--3xs {
    margin-block-start: calc(var(--spacing-3xs) * -1);
  }

  .mb--3xs {
    margin-block-end: calc(var(--spacing-3xs) * -1);
  }

  .mx--3xs {
    margin-inline: calc(var(--spacing-3xs) * -1);
  }

  .my--3xs {
    margin-block: calc(var(--spacing-3xs) * -1);
  }

  .m--2xs {
    margin: calc(var(--spacing-2xs) * -1);
  }

  .ml--2xs {
    margin-inline-start: calc(var(--spacing-2xs) * -1);
  }

  .mr--2xs {
    margin-inline-end: calc(var(--spacing-2xs) * -1);
  }

  .mt--2xs {
    margin-block-start: calc(var(--spacing-2xs) * -1);
  }

  .mb--2xs {
    margin-block-end: calc(var(--spacing-2xs) * -1);
  }

  .mx--2xs {
    margin-inline: calc(var(--spacing-2xs) * -1);
  }

  .my--2xs {
    margin-block: calc(var(--spacing-2xs) * -1);
  }

  .m--xs {
    margin: calc(var(--spacing-xs) * -1);
  }

  .ml--xs {
    margin-inline-start: calc(var(--spacing-xs) * -1);
  }

  .mr--xs {
    margin-inline-end: calc(var(--spacing-xs) * -1);
  }

  .mt--xs {
    margin-block-start: calc(var(--spacing-xs) * -1);
  }

  .mb--xs {
    margin-block-end: calc(var(--spacing-xs) * -1);
  }

  .mx--xs {
    margin-inline: calc(var(--spacing-xs) * -1);
  }

  .my--xs {
    margin-block: calc(var(--spacing-xs) * -1);
  }

  .m--s {
    margin: calc(var(--spacing-s) * -1);
  }

  .ml--s {
    margin-inline-start: calc(var(--spacing-s) * -1);
  }

  .mr--s {
    margin-inline-end: calc(var(--spacing-s) * -1);
  }

  .mt--s {
    margin-block-start: calc(var(--spacing-s) * -1);
  }

  .mb--s {
    margin-block-end: calc(var(--spacing-s) * -1);
  }

  .mx--s {
    margin-inline: calc(var(--spacing-s) * -1);
  }

  .my--s {
    margin-block: calc(var(--spacing-s) * -1);
  }

  .m--m {
    margin: calc(var(--spacing-m) * -1);
  }

  .ml--m {
    margin-inline-start: calc(var(--spacing-m) * -1);
  }

  .mr--m {
    margin-inline-end: calc(var(--spacing-m) * -1);
  }

  .mt--m {
    margin-block-start: calc(var(--spacing-m) * -1);
  }

  .mb--m {
    margin-block-end: calc(var(--spacing-m) * -1);
  }

  .mx--m {
    margin-inline: calc(var(--spacing-m) * -1);
  }

  .my--m {
    margin-block: calc(var(--spacing-m) * -1);
  }

  .m--l {
    margin: calc(var(--spacing-l) * -1);
  }

  .ml--l {
    margin-inline-start: calc(var(--spacing-l) * -1);
  }

  .mr--l {
    margin-inline-end: calc(var(--spacing-l) * -1);
  }

  .mt--l {
    margin-block-start: calc(var(--spacing-l) * -1);
  }

  .mb--l {
    margin-block-end: calc(var(--spacing-l) * -1);
  }

  .mx--l {
    margin-inline: calc(var(--spacing-l) * -1);
  }

  .my--l {
    margin-block: calc(var(--spacing-l) * -1);
  }

  .m--xl {
    margin: calc(var(--spacing-xl) * -1);
  }

  .ml--xl {
    margin-inline-start: calc(var(--spacing-xl) * -1);
  }

  .mr--xl {
    margin-inline-end: calc(var(--spacing-xl) * -1);
  }

  .mt--xl {
    margin-block-start: calc(var(--spacing-xl) * -1);
  }

  .mb--xl {
    margin-block-end: calc(var(--spacing-xl) * -1);
  }

  .mx--xl {
    margin-inline: calc(var(--spacing-xl) * -1);
  }

  .my--xl {
    margin-block: calc(var(--spacing-xl) * -1);
  }

  .m--2xl {
    margin: calc(var(--spacing-2xl) * -1);
  }

  .ml--2xl {
    margin-inline-start: calc(var(--spacing-2xl) * -1);
  }

  .mr--2xl {
    margin-inline-end: calc(var(--spacing-2xl) * -1);
  }

  .mt--2xl {
    margin-block-start: calc(var(--spacing-2xl) * -1);
  }

  .mb--2xl {
    margin-block-end: calc(var(--spacing-2xl) * -1);
  }

  .mx--2xl {
    margin-inline: calc(var(--spacing-2xl) * -1);
  }

  .my--2xl {
    margin-block: calc(var(--spacing-2xl) * -1);
  }

  .m--3xl {
    margin: calc(var(--spacing-3xl) * -1);
  }

  .ml--3xl {
    margin-inline-start: calc(var(--spacing-3xl) * -1);
  }

  .mr--3xl {
    margin-inline-end: calc(var(--spacing-3xl) * -1);
  }

  .mt--3xl {
    margin-block-start: calc(var(--spacing-3xl) * -1);
  }

  .mb--3xl {
    margin-block-end: calc(var(--spacing-3xl) * -1);
  }

  .mx--3xl {
    margin-inline: calc(var(--spacing-3xl) * -1);
  }

  .my--3xl {
    margin-block: calc(var(--spacing-3xl) * -1);
  }

  .m--4xl {
    margin: calc(var(--spacing-4xl) * -1);
  }

  .ml--4xl {
    margin-inline-start: calc(var(--spacing-4xl) * -1);
  }

  .mr--4xl {
    margin-inline-end: calc(var(--spacing-4xl) * -1);
  }

  .mt--4xl {
    margin-block-start: calc(var(--spacing-4xl) * -1);
  }

  .mb--4xl {
    margin-block-end: calc(var(--spacing-4xl) * -1);
  }

  .mx--4xl {
    margin-inline: calc(var(--spacing-4xl) * -1);
  }

  .my--4xl {
    margin-block: calc(var(--spacing-4xl) * -1);
  }

  .m--4xs-3xs {
    margin: calc(var(--spacing-4xs-3xs) * -1);
  }

  .ml--4xs-3xs {
    margin-inline-start: calc(var(--spacing-4xs-3xs) * -1);
  }

  .mr--4xs-3xs {
    margin-inline-end: calc(var(--spacing-4xs-3xs) * -1);
  }

  .mt--4xs-3xs {
    margin-block-start: calc(var(--spacing-4xs-3xs) * -1);
  }

  .mb--4xs-3xs {
    margin-block-end: calc(var(--spacing-4xs-3xs) * -1);
  }

  .mx--4xs-3xs {
    margin-inline: calc(var(--spacing-4xs-3xs) * -1);
  }

  .my--4xs-3xs {
    margin-block: calc(var(--spacing-4xs-3xs) * -1);
  }

  .m--3xs-2xs {
    margin: calc(var(--spacing-3xs-2xs) * -1);
  }

  .ml--3xs-2xs {
    margin-inline-start: calc(var(--spacing-3xs-2xs) * -1);
  }

  .mr--3xs-2xs {
    margin-inline-end: calc(var(--spacing-3xs-2xs) * -1);
  }

  .mt--3xs-2xs {
    margin-block-start: calc(var(--spacing-3xs-2xs) * -1);
  }

  .mb--3xs-2xs {
    margin-block-end: calc(var(--spacing-3xs-2xs) * -1);
  }

  .mx--3xs-2xs {
    margin-inline: calc(var(--spacing-3xs-2xs) * -1);
  }

  .my--3xs-2xs {
    margin-block: calc(var(--spacing-3xs-2xs) * -1);
  }

  .m--2xs-xs {
    margin: calc(var(--spacing-2xs-xs) * -1);
  }

  .ml--2xs-xs {
    margin-inline-start: calc(var(--spacing-2xs-xs) * -1);
  }

  .mr--2xs-xs {
    margin-inline-end: calc(var(--spacing-2xs-xs) * -1);
  }

  .mt--2xs-xs {
    margin-block-start: calc(var(--spacing-2xs-xs) * -1);
  }

  .mb--2xs-xs {
    margin-block-end: calc(var(--spacing-2xs-xs) * -1);
  }

  .mx--2xs-xs {
    margin-inline: calc(var(--spacing-2xs-xs) * -1);
  }

  .my--2xs-xs {
    margin-block: calc(var(--spacing-2xs-xs) * -1);
  }

  .m--xs-s {
    margin: calc(var(--spacing-xs-s) * -1);
  }

  .ml--xs-s {
    margin-inline-start: calc(var(--spacing-xs-s) * -1);
  }

  .mr--xs-s {
    margin-inline-end: calc(var(--spacing-xs-s) * -1);
  }

  .mt--xs-s {
    margin-block-start: calc(var(--spacing-xs-s) * -1);
  }

  .mb--xs-s {
    margin-block-end: calc(var(--spacing-xs-s) * -1);
  }

  .mx--xs-s {
    margin-inline: calc(var(--spacing-xs-s) * -1);
  }

  .my--xs-s {
    margin-block: calc(var(--spacing-xs-s) * -1);
  }

  .m--s-m {
    margin: calc(var(--spacing-s-m) * -1);
  }

  .ml--s-m {
    margin-inline-start: calc(var(--spacing-s-m) * -1);
  }

  .mr--s-m {
    margin-inline-end: calc(var(--spacing-s-m) * -1);
  }

  .mt--s-m {
    margin-block-start: calc(var(--spacing-s-m) * -1);
  }

  .mb--s-m {
    margin-block-end: calc(var(--spacing-s-m) * -1);
  }

  .mx--s-m {
    margin-inline: calc(var(--spacing-s-m) * -1);
  }

  .my--s-m {
    margin-block: calc(var(--spacing-s-m) * -1);
  }

  .m--m-l {
    margin: calc(var(--spacing-m-l) * -1);
  }

  .ml--m-l {
    margin-inline-start: calc(var(--spacing-m-l) * -1);
  }

  .mr--m-l {
    margin-inline-end: calc(var(--spacing-m-l) * -1);
  }

  .mt--m-l {
    margin-block-start: calc(var(--spacing-m-l) * -1);
  }

  .mb--m-l {
    margin-block-end: calc(var(--spacing-m-l) * -1);
  }

  .mx--m-l {
    margin-inline: calc(var(--spacing-m-l) * -1);
  }

  .my--m-l {
    margin-block: calc(var(--spacing-m-l) * -1);
  }

  .m--l-xl {
    margin: calc(var(--spacing-l-xl) * -1);
  }

  .ml--l-xl {
    margin-inline-start: calc(var(--spacing-l-xl) * -1);
  }

  .mr--l-xl {
    margin-inline-end: calc(var(--spacing-l-xl) * -1);
  }

  .mt--l-xl {
    margin-block-start: calc(var(--spacing-l-xl) * -1);
  }

  .mb--l-xl {
    margin-block-end: calc(var(--spacing-l-xl) * -1);
  }

  .mx--l-xl {
    margin-inline: calc(var(--spacing-l-xl) * -1);
  }

  .my--l-xl {
    margin-block: calc(var(--spacing-l-xl) * -1);
  }

  .m--xl-2xl {
    margin: calc(var(--spacing-xl-2xl) * -1);
  }

  .ml--xl-2xl {
    margin-inline-start: calc(var(--spacing-xl-2xl) * -1);
  }

  .mr--xl-2xl {
    margin-inline-end: calc(var(--spacing-xl-2xl) * -1);
  }

  .mt--xl-2xl {
    margin-block-start: calc(var(--spacing-xl-2xl) * -1);
  }

  .mb--xl-2xl {
    margin-block-end: calc(var(--spacing-xl-2xl) * -1);
  }

  .mx--xl-2xl {
    margin-inline: calc(var(--spacing-xl-2xl) * -1);
  }

  .my--xl-2xl {
    margin-block: calc(var(--spacing-xl-2xl) * -1);
  }

  .m--2xl-3xl {
    margin: calc(var(--spacing-2xl-3xl) * -1);
  }

  .ml--2xl-3xl {
    margin-inline-start: calc(var(--spacing-2xl-3xl) * -1);
  }

  .mr--2xl-3xl {
    margin-inline-end: calc(var(--spacing-2xl-3xl) * -1);
  }

  .mt--2xl-3xl {
    margin-block-start: calc(var(--spacing-2xl-3xl) * -1);
  }

  .mb--2xl-3xl {
    margin-block-end: calc(var(--spacing-2xl-3xl) * -1);
  }

  .mx--2xl-3xl {
    margin-inline: calc(var(--spacing-2xl-3xl) * -1);
  }

  .my--2xl-3xl {
    margin-block: calc(var(--spacing-2xl-3xl) * -1);
  }
}

@layer spacing.padding {
  .p-0 {
    padding: 0;
  }

  .pl-0 {
    padding-inline-start: 0;
  }

  .pr-0 {
    padding-inline-end: 0;
  }

  .pt-0 {
    padding-block-start: 0;
  }

  .pb-0 {
    padding-block-end: 0;
  }

  .px-0 {
    padding-inline: 0;
  }

  .py-0 {
    padding-block: 0;
  }

  .p-3xs {
    padding: var(--spacing-3xs);
  }

  .pl-3xs {
    padding-inline-start: var(--spacing-3xs);
  }

  .pr-3xs {
    padding-inline-end: var(--spacing-3xs);
  }

  .pt-3xs {
    padding-block-start: var(--spacing-3xs);
  }

  .pb-3xs {
    padding-block-end: var(--spacing-3xs);
  }

  .px-3xs {
    padding-inline: var(--spacing-3xs);
  }

  .py-3xs {
    padding-block: var(--spacing-3xs);
  }

  .p-2xs {
    padding: var(--spacing-2xs);
  }

  .pl-2xs {
    padding-inline-start: var(--spacing-2xs);
  }

  .pr-2xs {
    padding-inline-end: var(--spacing-2xs);
  }

  .pt-2xs {
    padding-block-start: var(--spacing-2xs);
  }

  .pb-2xs {
    padding-block-end: var(--spacing-2xs);
  }

  .px-2xs {
    padding-inline: var(--spacing-2xs);
  }

  .py-2xs {
    padding-block: var(--spacing-2xs);
  }

  .p-xs {
    padding: var(--spacing-xs);
  }

  .pl-xs {
    padding-inline-start: var(--spacing-xs);
  }

  .pr-xs {
    padding-inline-end: var(--spacing-xs);
  }

  .pt-xs {
    padding-block-start: var(--spacing-xs);
  }

  .pb-xs {
    padding-block-end: var(--spacing-xs);
  }

  .px-xs {
    padding-inline: var(--spacing-xs);
  }

  .py-xs {
    padding-block: var(--spacing-xs);
  }

  .p-s {
    padding: var(--spacing-s);
  }

  .pl-s {
    padding-inline-start: var(--spacing-s);
  }

  .pr-s {
    padding-inline-end: var(--spacing-s);
  }

  .pt-s {
    padding-block-start: var(--spacing-s);
  }

  .pb-s {
    padding-block-end: var(--spacing-s);
  }

  .px-s {
    padding-inline: var(--spacing-s);
  }

  .py-s {
    padding-block: var(--spacing-s);
  }

  .p-m {
    padding: var(--spacing-m);
  }

  .pl-m {
    padding-inline-start: var(--spacing-m);
  }

  .pr-m {
    padding-inline-end: var(--spacing-m);
  }

  .pt-m {
    padding-block-start: var(--spacing-m);
  }

  .pb-m {
    padding-block-end: var(--spacing-m);
  }

  .px-m {
    padding-inline: var(--spacing-m);
  }

  .py-m {
    padding-block: var(--spacing-m);
  }

  .p-l {
    padding: var(--spacing-l);
  }

  .pl-l {
    padding-inline-start: var(--spacing-l);
  }

  .pr-l {
    padding-inline-end: var(--spacing-l);
  }

  .pt-l {
    padding-block-start: var(--spacing-l);
  }

  .pb-l {
    padding-block-end: var(--spacing-l);
  }

  .px-l {
    padding-inline: var(--spacing-l);
  }

  .py-l {
    padding-block: var(--spacing-l);
  }

  .p-xl {
    padding: var(--spacing-xl);
  }

  .pl-xl {
    padding-inline-start: var(--spacing-xl);
  }

  .pr-xl {
    padding-inline-end: var(--spacing-xl);
  }

  .pt-xl {
    padding-block-start: var(--spacing-xl);
  }

  .pb-xl {
    padding-block-end: var(--spacing-xl);
  }

  .px-xl {
    padding-inline: var(--spacing-xl);
  }

  .py-xl {
    padding-block: var(--spacing-xl);
  }

  .p-2xl {
    padding: var(--spacing-2xl);
  }

  .pl-2xl {
    padding-inline-start: var(--spacing-2xl);
  }

  .pr-2xl {
    padding-inline-end: var(--spacing-2xl);
  }

  .pt-2xl {
    padding-block-start: var(--spacing-2xl);
  }

  .pb-2xl {
    padding-block-end: var(--spacing-2xl);
  }

  .px-2xl {
    padding-inline: var(--spacing-2xl);
  }

  .py-2xl {
    padding-block: var(--spacing-2xl);
  }

  .p-3xl {
    padding: var(--spacing-3xl);
  }

  .pl-3xl {
    padding-inline-start: var(--spacing-3xl);
  }

  .pr-3xl {
    padding-inline-end: var(--spacing-3xl);
  }

  .pt-3xl {
    padding-block-start: var(--spacing-3xl);
  }

  .pb-3xl {
    padding-block-end: var(--spacing-3xl);
  }

  .px-3xl {
    padding-inline: var(--spacing-3xl);
  }

  .py-3xl {
    padding-block: var(--spacing-3xl);
  }

  .p-4xl {
    padding: var(--spacing-4xl);
  }

  .pl-4xl {
    padding-inline-start: var(--spacing-4xl);
  }

  .pr-4xl {
    padding-inline-end: var(--spacing-4xl);
  }

  .pt-4xl {
    padding-block-start: var(--spacing-4xl);
  }

  .pb-4xl {
    padding-block-end: var(--spacing-4xl);
  }

  .px-4xl {
    padding-inline: var(--spacing-4xl);
  }

  .py-4xl {
    padding-block: var(--spacing-4xl);
  }

  .p-4xs-3xs {
    padding: var(--spacing-4xs-3xs);
  }

  .pl-4xs-3xs {
    padding-inline-start: var(--spacing-4xs-3xs);
  }

  .pr-4xs-3xs {
    padding-inline-end: var(--spacing-4xs-3xs);
  }

  .pt-4xs-3xs {
    padding-block-start: var(--spacing-4xs-3xs);
  }

  .pb-4xs-3xs {
    padding-block-end: var(--spacing-4xs-3xs);
  }

  .px-4xs-3xs {
    padding-inline: var(--spacing-4xs-3xs);
  }

  .py-4xs-3xs {
    padding-block: var(--spacing-4xs-3xs);
  }

  .p-3xs-2xs {
    padding: var(--spacing-3xs-2xs);
  }

  .pl-3xs-2xs {
    padding-inline-start: var(--spacing-3xs-2xs);
  }

  .pr-3xs-2xs {
    padding-inline-end: var(--spacing-3xs-2xs);
  }

  .pt-3xs-2xs {
    padding-block-start: var(--spacing-3xs-2xs);
  }

  .pb-3xs-2xs {
    padding-block-end: var(--spacing-3xs-2xs);
  }

  .px-3xs-2xs {
    padding-inline: var(--spacing-3xs-2xs);
  }

  .py-3xs-2xs {
    padding-block: var(--spacing-3xs-2xs);
  }

  .p-2xs-xs {
    padding: var(--spacing-2xs-xs);
  }

  .pl-2xs-xs {
    padding-inline-start: var(--spacing-2xs-xs);
  }

  .pr-2xs-xs {
    padding-inline-end: var(--spacing-2xs-xs);
  }

  .pt-2xs-xs {
    padding-block-start: var(--spacing-2xs-xs);
  }

  .pb-2xs-xs {
    padding-block-end: var(--spacing-2xs-xs);
  }

  .px-2xs-xs {
    padding-inline: var(--spacing-2xs-xs);
  }

  .py-2xs-xs {
    padding-block: var(--spacing-2xs-xs);
  }

  .p-xs-s {
    padding: var(--spacing-xs-s);
  }

  .pl-xs-s {
    padding-inline-start: var(--spacing-xs-s);
  }

  .pr-xs-s {
    padding-inline-end: var(--spacing-xs-s);
  }

  .pt-xs-s {
    padding-block-start: var(--spacing-xs-s);
  }

  .pb-xs-s {
    padding-block-end: var(--spacing-xs-s);
  }

  .px-xs-s {
    padding-inline: var(--spacing-xs-s);
  }

  .py-xs-s {
    padding-block: var(--spacing-xs-s);
  }

  .p-s-m {
    padding: var(--spacing-s-m);
  }

  .pl-s-m {
    padding-inline-start: var(--spacing-s-m);
  }

  .pr-s-m {
    padding-inline-end: var(--spacing-s-m);
  }

  .pt-s-m {
    padding-block-start: var(--spacing-s-m);
  }

  .pb-s-m {
    padding-block-end: var(--spacing-s-m);
  }

  .px-s-m {
    padding-inline: var(--spacing-s-m);
  }

  .py-s-m {
    padding-block: var(--spacing-s-m);
  }

  .p-m-l {
    padding: var(--spacing-m-l);
  }

  .pl-m-l {
    padding-inline-start: var(--spacing-m-l);
  }

  .pr-m-l {
    padding-inline-end: var(--spacing-m-l);
  }

  .pt-m-l {
    padding-block-start: var(--spacing-m-l);
  }

  .pb-m-l {
    padding-block-end: var(--spacing-m-l);
  }

  .px-m-l {
    padding-inline: var(--spacing-m-l);
  }

  .py-m-l {
    padding-block: var(--spacing-m-l);
  }

  .p-l-xl {
    padding: var(--spacing-l-xl);
  }

  .pl-l-xl {
    padding-inline-start: var(--spacing-l-xl);
  }

  .pr-l-xl {
    padding-inline-end: var(--spacing-l-xl);
  }

  .pt-l-xl {
    padding-block-start: var(--spacing-l-xl);
  }

  .pb-l-xl {
    padding-block-end: var(--spacing-l-xl);
  }

  .px-l-xl {
    padding-inline: var(--spacing-l-xl);
  }

  .py-l-xl {
    padding-block: var(--spacing-l-xl);
  }

  .p-xl-2xl {
    padding: var(--spacing-xl-2xl);
  }

  .pl-xl-2xl {
    padding-inline-start: var(--spacing-xl-2xl);
  }

  .pr-xl-2xl {
    padding-inline-end: var(--spacing-xl-2xl);
  }

  .pt-xl-2xl {
    padding-block-start: var(--spacing-xl-2xl);
  }

  .pb-xl-2xl {
    padding-block-end: var(--spacing-xl-2xl);
  }

  .px-xl-2xl {
    padding-inline: var(--spacing-xl-2xl);
  }

  .py-xl-2xl {
    padding-block: var(--spacing-xl-2xl);
  }

  .p-2xl-3xl {
    padding: var(--spacing-2xl-3xl);
  }

  .pl-2xl-3xl {
    padding-inline-start: var(--spacing-2xl-3xl);
  }

  .pr-2xl-3xl {
    padding-inline-end: var(--spacing-2xl-3xl);
  }

  .pt-2xl-3xl {
    padding-block-start: var(--spacing-2xl-3xl);
  }

  .pb-2xl-3xl {
    padding-block-end: var(--spacing-2xl-3xl);
  }

  .px-2xl-3xl {
    padding-inline: var(--spacing-2xl-3xl);
  }

  .py-2xl-3xl {
    padding-block: var(--spacing-2xl-3xl);
  }
}

@layer spacing.gap {
  .gap-4xl {
    gap: var(--spacing-4xl);
  }

  .gap-3xl {
    gap: var(--spacing-3xl);
  }

  .gap-2xl {
    gap: var(--spacing-2xl);
  }

  .gap-xl {
    gap: var(--spacing-xl);
  }

  .gap-l {
    gap: var(--spacing-l);
  }

  .gap-m {
    gap: var(--spacing-m);
  }

  .gap-s {
    gap: var(--spacing-s);
  }

  .gap-xs {
    gap: var(--spacing-xs);
  }

  .gap-2xs {
    gap: var(--spacing-2xs);
  }

  .gap-3xs {
    gap: var(--spacing-3xs);
  }

  .gap-none {
    gap: 0;
  }

  .gap-row-4xl {
    row-gap: var(--spacing-4xl);
  }

  .gap-row-3xl {
    row-gap: var(--spacing-3xl);
  }

  .gap-row-2xl {
    row-gap: var(--spacing-2xl);
  }

  .gap-row-xl {
    row-gap: var(--spacing-xl);
  }

  .gap-row-l {
    row-gap: var(--spacing-l);
  }

  .gap-row-m {
    row-gap: var(--spacing-m);
  }

  .gap-row-s {
    row-gap: var(--spacing-s);
  }

  .gap-row-xs {
    row-gap: var(--spacing-xs);
  }

  .gap-row-2xs {
    row-gap: var(--spacing-2xs);
  }

  .gap-row-3xs {
    row-gap: var(--spacing-3xs);
  }

  .gap-row-none {
    row-gap: 0;
  }

  .gap-column-4xl {
    column-gap: var(--spacing-4xl);
  }

  .gap-column-3xl {
    column-gap: var(--spacing-3xl);
  }

  .gap-column-2xl {
    column-gap: var(--spacing-2xl);
  }

  .gap-column-xl {
    column-gap: var(--spacing-xl);
  }

  .gap-column-l {
    column-gap: var(--spacing-l);
  }

  .gap-column-m {
    column-gap: var(--spacing-m);
  }

  .gap-column-s {
    column-gap: var(--spacing-s);
  }

  .gap-column-xs {
    column-gap: var(--spacing-xs);
  }

  .gap-column-2xs {
    column-gap: var(--spacing-2xs);
  }

  .gap-column-3xs {
    column-gap: var(--spacing-3xs);
  }

  .gap-column-0 {
    column-gap: 0;
  }
}

@layer text {
  .t-regular {
    font-weight: var(--font-weight-regular);
  }

  .t-medium {
    font-weight: var(--font-weight-medium);
  }

  .t-bold {
    font-weight: var(--font-weight-bold);
  }

  .t-center {
    text-align: center;
  }

  .t-left {
    text-align: left;
  }

  .t-right {
    text-align: right;
  }

  .t-uppercase {
    text-transform: uppercase;
  }

  .lh-tight {
    line-height: 1.1;
  }

  .lh-normal {
    line-height: 1.5;
  }

  .lh-relaxed {
    line-height: 1.7;
  }

  .t-tabular {
    font-variant-numeric: tabular-nums;
  }
}

@layer font-size {
  .fs-xs {
    font-size: var(--font-size-xs);
  }

  .fs-s {
    font-size: var(--font-size-s);
  }

  .fs-m {
    font-size: var(--font-size-m);
  }

  .fs-l {
    font-size: var(--font-size-l);
  }

  .fs-xl {
    font-size: var(--font-size-xl);
  }

  .fs-2xl {
    font-size: var(--font-size-2xl);
  }

  .fs-3xl {
    font-size: var(--font-size-3xl);
  }

  .fs-4xl {
    font-size: var(--font-size-4xl);
  }

  :where(.fs-xl) {
    line-height: var(--leading-short);
  }

  :where(.fs-2xl) {
    line-height: var(--leading-slim);
  }

  :where(.fs-3xl), :where(.fs-4xl) {
    line-height: var(--leading-fine);
  }
}

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

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

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

  .bg-currentcolor {
    background-color: currentColor;
  }
}

@layer colors.foreground {
  .fg-default {
    color: var(--foreground-default);
  }

  .fg-muted {
    color: var(--foreground-muted);
  }

  .fg-emphasis {
    color: var(--foreground-emphasis);
  }
}

@layer colors.border {
  .b-default {
    border-color: var(--border-default);
  }

  .b-faint {
    border-color: var(--border-faint);
  }

  .b-prominent {
    border-color: var(--border-prominent);
  }
}

.list {
  list-style-position: inside;
}

.list:where(ul) {
  list-style-type: square;
}

.list :where(ul, li)::marker {
  color: var(--foreground-brand-subtle);
}

@layer border {
  .b-t {
    border-top-style: solid;
    border-top-width: 1px;
  }

  .b-r {
    border-right-style: solid;
    border-right-width: 1px;
  }

  .b-b {
    border-bottom-style: solid;
    border-bottom-width: 1px;
  }

  .b-l {
    border-left-style: solid;
    border-left-width: 1px;
  }

  .b-all {
    border-style: solid;
    border-width: 1px;
  }

  .b-last-none:last-child, .b-first-none:first-child {
    border: 0;
  }
}

@layer border-radius {
  .br-none {
    border-radius: 0;
  }

  .br-inherit {
    border-radius: inherit;
  }

  .br-xs {
    border-radius: calc(var(--border-radius-xs, 2px) * var(--border-radius-modifier, 1));
  }

  .br-s {
    border-radius: calc(var(--border-radius-s, 4px) * var(--border-radius-modifier, 1));
  }

  .br-m {
    border-radius: calc(var(--border-radius-m, 8px) * var(--border-radius-modifier, 1));
  }

  .br-l {
    border-radius: calc(var(--border-radius-l, 12px) * var(--border-radius-modifier, 1));
  }

  .br-xl {
    border-radius: calc(var(--border-radius-xl, 16px) * var(--border-radius-modifier, 1));
  }

  .br-2xl {
    border-radius: calc(var(--border-radius-2xl, 24px) * var(--border-radius-modifier, 1));
  }

  .br-pill {
    border-radius: 9999px;
  }

  .br-circle {
    border-radius: 50%;
  }
}

.of-hidden {
  overflow: hidden;
}

.of-clip {
  overflow: clip;
}

.of-scroll {
  overflow: scroll;
}

.aspect-ratio-1-1 {
  aspect-ratio: 1;
}

.block {
  display: block;
}

.grid {
  display: grid;
}

:root {
  --width-base: 4rem;
  --width-factor: 1.414;
  --width-round: .25rem;
  --width-0: var(--width-base);
  --width-1: round(calc(var(--width-base) * pow(var(--width-factor), 1)), var(--width-round));
  --width-2: round(calc(var(--width-base) * pow(var(--width-factor), 2)), var(--width-round));
  --width-3: round(calc(var(--width-base) * pow(var(--width-factor), 3)), var(--width-round));
  --width-4: round(calc(var(--width-base) * pow(var(--width-factor), 4)), var(--width-round));
  --width-5: round(calc(var(--width-base) * pow(var(--width-factor), 5)), var(--width-round));
  --width-6: round(calc(var(--width-base) * pow(var(--width-factor), 6)), var(--width-round));
  --width-7: round(calc(var(--width-base) * pow(var(--width-factor), 7)), var(--width-round));
  --width-8: round(calc(var(--width-base) * pow(var(--width-factor), 8)), var(--width-round));
  --width-9: round(calc(var(--width-base) * pow(var(--width-factor), 9)), var(--width-round));
  --width-10: round(calc(var(--width-base) * pow(var(--width-factor), 10)), var(--width-round));
}

.mw-0 {
  max-width: var(--width-0);
}

.mw-1 {
  max-width: var(--width-1);
}

.mw-2 {
  max-width: var(--width-2);
}

.mw-3 {
  max-width: var(--width-3);
}

.mw-4 {
  max-width: var(--width-4);
}

.mw-5 {
  max-width: var(--width-5);
}

.mw-6 {
  max-width: var(--width-6);
}

.mw-7 {
  max-width: var(--width-7);
}

.mw-8 {
  max-width: var(--width-8);
}

.mw-9 {
  max-width: var(--width-9);
}

.mw-10 {
  max-width: var(--width-10);
}

.w-full {
  width: 100%;
}

.w-auto {
  width: auto;
}

.w-fit {
  width: fit-content;
}

.w-min {
  width: min-content;
}

.minw-0 {
  min-width: 0;
}

.pile {
  place-items: center;
  display: grid;
}

.pile > :where(*) {
  grid-area: 1 / 1;
}

.shadow-low {
  --_shadow-color: var(--shadow, var(--palette-grey-800));
  --_shadow-elevation-low: 0px .5px .5px oklch(from var(--_shadow-color) l c h / .54),
    0px .8px .7px -1.9px oklch(from var(--_shadow-color) l c h / .41),
    0px 2.2px 2px -3.9px oklch(from var(--_shadow-color) l c h / .28);
  box-shadow: var(--_shadow-elevation-low);
}

.shadow-medium {
  --_shadow-color: var(--shadow, var(--palette-grey-800));
  --_shadow-elevation-medium: 0px .5px .5px oklch(from var(--_shadow-color) l c h / .57),
    0px 1.3px 1.2px -1.3px oklch(from var(--_shadow-color) l c h / .47),
    0px 4px 3.7px -2.6px oklch(from var(--_shadow-color) l c h / .36),
    0px 10.8px 9.9px -3.9px oklch(from var(--_shadow-color) l c h / .26);
  box-shadow: var(--_shadow-elevation-medium);
}

.shadow-high {
  --_shadow-color: var(--shadow, var(--palette-grey-800));
  --_shadow-elevation-high: 0px .5px .5px oklch(from var(--_shadow-color) l c h / .53),
    0px 1.8px 1.6px -.6px oklch(from var(--_shadow-color) l c h / .48),
    0px 3.6px 3.3px -1.1px oklch(from var(--_shadow-color) l c h / .43),
    0px 6.9px 6.3px -1.7px oklch(from var(--_shadow-color) l c h / .39),
    0px 12.7px 11.6px -2.2px oklch(from var(--_shadow-color) l c h / .34),
    -.1px 21.9px 20px -2.8px oklch(from var(--_shadow-color) l c h / .29),
    -.1px 35.4px 32.4px -3.3px oklch(from var(--_shadow-color) l c h / .24),
    -.2px 54.2px 49.6px -3.9px oklch(from var(--_shadow-color) l c h / .2);
  box-shadow: var(--_shadow-elevation-high);
}

@media (prefers-color-scheme: dark) {
  .shadow-low, .shadow-medium, .shadow-high {
    box-shadow: none;
  }
}

@layer stack {
  .stack, .stack-horizontal {
    flex-flow: column wrap;
    justify-content: flex-start;
    display: flex;
  }

  .stack-horizontal {
    flex-direction: row;
    align-items: center;
  }

  .items-start {
    align-items: start;
  }

  .items-end {
    align-items: end;
  }

  .items-center {
    align-items: center;
  }

  .items-stretch {
    align-items: stretch;
  }

  .self-start {
    align-self: start;
  }

  .self-end {
    align-self: end;
  }

  .self-center {
    align-self: center;
  }

  .self-stretch {
    align-self: stretch;
  }

  .justify-start {
    justify-content: start;
  }

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

  .justify-center {
    justify-content: center;
  }

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

  .grow {
    flex-grow: 1;
  }

  .shrink {
    flex-shrink: 1;
  }

  .flex-1 {
    flex: 1;
  }

  .nowrap {
    flex-wrap: nowrap;
  }

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