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

@layer variables.font-sizes {
  :root {
    --vw-min: 320;
    --vw-max: 1240;
    --base-min: 1;
    --base-max: 1.35;
    --ratio-min: 1.2;
    --ratio-max: 1.25;
    --_vw-min-rem: calc(var(--vw-min) / 16);
    --_vw-max-rem: calc(var(--vw-max) / 16);
    --vw-range: calc(var(--_vw-max-rem) - var(--_vw-min-rem));
    --_xs-min: calc(var(--base-min) * pow(var(--ratio-min), -2));
    --_xs-max: calc(var(--base-max) * pow(var(--ratio-max), -2));
    --_xs-slope: calc((var(--_xs-max) - var(--_xs-min)) / var(--vw-range));
    --_xs-intercept: calc(var(--_xs-min) - var(--_xs-slope) * var(--_vw-min-rem));
    --font-size-xs-clamp: clamp(var(--_xs-min) *
      1rem,
      var(--_xs-intercept) *
      1rem +
      var(--_xs-slope) *
      100 *
      1vw,
      var(--_xs-max) *
      1rem);
    --font-size-xs: round(down, var(--font-size-xs-clamp), 1px);
    --_s-min: calc(var(--base-min) * pow(var(--ratio-min), -1));
    --_s-max: calc(var(--base-max) * pow(var(--ratio-max), -1));
    --_s-slope: calc((var(--_s-max) - var(--_s-min)) / var(--vw-range));
    --_s-intercept: calc(var(--_s-min) - var(--_s-slope) * var(--_vw-min-rem));
    --font-size-s-clamp: clamp(var(--_s-min) *
      1rem,
      var(--_s-intercept) *
      1rem +
      var(--_s-slope) *
      100 *
      1vw,
      var(--_s-max) *
      1rem);
    --font-size-s: round(down, var(--font-size-s-clamp), 1px);
    --_base-min: calc(var(--base-min) * pow(var(--ratio-min), 0));
    --_base-max: calc(var(--base-max) * pow(var(--ratio-max), 0));
    --_base-slope: calc((var(--_base-max) - var(--_base-min)) / var(--vw-range));
    --_base-intercept: calc(var(--_base-min) - var(--_base-slope) * var(--_vw-min-rem));
    --font-size-m-clamp: clamp(var(--_base-min) *
      1rem,
      var(--_base-intercept) *
      1rem +
      var(--_base-slope) *
      100 *
      1vw,
      var(--_base-max) *
      1rem);
    --font-size-m: round(down, var(--font-size-m-clamp), 1px);
    --font-size-base: var(--font-size-m);
    --_l-min: calc(var(--base-min) * pow(var(--ratio-min), 1));
    --_l-max: calc(var(--base-max) * pow(var(--ratio-max), 1));
    --_l-slope: calc((var(--_l-max) - var(--_l-min)) / var(--vw-range));
    --_l-intercept: calc(var(--_l-min) - var(--_l-slope) * var(--_vw-min-rem));
    --font-size-l-clamp: clamp(var(--_l-min) *
      1rem,
      var(--_l-intercept) *
      1rem +
      var(--_l-slope) *
      100 *
      1vw,
      var(--_l-max) *
      1rem);
    --font-size-l: round(down, var(--font-size-l-clamp), 1px);
    --_xl-min: calc(var(--base-min) * pow(var(--ratio-min), 2));
    --_xl-max: calc(var(--base-max) * pow(var(--ratio-max), 2));
    --_xl-slope: calc((var(--_xl-max) - var(--_xl-min)) / var(--vw-range));
    --_xl-intercept: calc(var(--_xl-min) - var(--_xl-slope) * var(--_vw-min-rem));
    --font-size-xl-clamp: clamp(var(--_xl-min) *
      1rem,
      var(--_xl-intercept) *
      1rem +
      var(--_xl-slope) *
      100 *
      1vw,
      var(--_xl-max) *
      1rem);
    --font-size-xl: round(down, var(--font-size-xl-clamp), 1px);
    --_2xl-min: calc(var(--base-min) * pow(var(--ratio-min), 3));
    --_2xl-max: calc(var(--base-max) * pow(var(--ratio-max), 3));
    --_2xl-slope: calc((var(--_2xl-max) - var(--_2xl-min)) / var(--vw-range));
    --_2xl-intercept: calc(var(--_2xl-min) - var(--_2xl-slope) * var(--_vw-min-rem));
    --font-size-2xl-clamp: clamp(var(--_2xl-min) *
      1rem,
      var(--_2xl-intercept) *
      1rem +
      var(--_2xl-slope) *
      100 *
      1vw,
      var(--_2xl-max) *
      1rem);
    --font-size-2xl: round(down, var(--font-size-2xl-clamp), 1px);
    --_3xl-min: calc(var(--base-min) * pow(var(--ratio-min), 4));
    --_3xl-max: calc(var(--base-max) * pow(var(--ratio-max), 4));
    --_3xl-slope: calc((var(--_3xl-max) - var(--_3xl-min)) / var(--vw-range));
    --_3xl-intercept: calc(var(--_3xl-min) - var(--_3xl-slope) * var(--_vw-min-rem));
    --font-size-3xl-clamp: clamp(var(--_3xl-min) *
      1rem,
      var(--_3xl-intercept) *
      1rem +
      var(--_3xl-slope) *
      100 *
      1vw,
      var(--_3xl-max) *
      1rem);
    --font-size-3xl: round(down, var(--font-size-3xl-clamp), 1px);
    --_4xl-min: calc(var(--base-min) * pow(var(--ratio-min), 5));
    --_4xl-max: calc(var(--base-max) * pow(var(--ratio-max), 5));
    --_4xl-slope: calc((var(--_4xl-max) - var(--_4xl-min)) / var(--vw-range));
    --_4xl-intercept: calc(var(--_4xl-min) - var(--_4xl-slope) * var(--_vw-min-rem));
    --font-size-4xl-clamp: clamp(var(--_4xl-min) *
      1rem,
      var(--_4xl-intercept) *
      1rem +
      var(--_4xl-slope) *
      100 *
      1vw,
      var(--_4xl-max) *
      1rem);
    --font-size-4xl: round(down, var(--font-size-4xl-clamp), 1px);
  }
}

:root {
  --font-size-base: 1rem;
  --line-height-base: 1.4;
  --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;
  --border-alpha-faint: .15;
  --border-alpha-default: .35;
  --border-alpha-prominent: .52;
  --border-hover: 0;
  --border-hover-augment: .3;
  --surface-blend: 0%;
  --surface-blend-augment: 20%;
  --border-faint: oklch(from var(--border-base) l c h / var(--border-alpha-faint));
  --border-default: oklch(from var(--border-base) l c h / var(--border-alpha-default));
  --border-prominent: oklch(from var(--border-base) l c h / var(--border-alpha-prominent));
  --interaction-radius: .65rem;
  --interaction-transition-duration-quick: .1s;
  --interaction-transition-duration-enter: .23s;
  --interaction-transition-duration-exit: .15s;
  --interaction-transition-duration-enter-large: .4s;
  --interaction-transition-duration-exit-large: .3s;
  --interaction-transition-easing-default: cubic-bezier(.25, .1, .25, 1);
  --interaction-transition-easing-entrance: cubic-bezier(.19, 1, .22, 1);
  --interaction-transition-easing-large: cubic-bezier(.32, .72, 0, 1);
  --scroll-padding-top: var(--size-control-height-medium);
  --size-control-height-small: calc(2 * var(--font-size-m));
  --size-control-height-medium: calc(2.5 * var(--font-size-m));
  --size-control-height-large: calc(3 * var(--font-size-m));
  --size-selection-control-small: 1.25em;
  --size-selection-control-medium: 1.5em;
  --size-selection-control-large: 1.75em;
  --button-border-radius: var(--interaction-radius);
  --button-font-weight: var(--font-weight-medium);
  --button-focus-ring-color: var(--border-control-focused);
  --input-border-radius: var(--interaction-radius);
  --input-focus-ring-color: var(--border-control-focused);
  --link-text-underline-offset: 3px;
  --link-text-decoration-thickness: 2px;
  --chevron-white: url("data:image/svg+xml,<svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"black\" stroke-width=\"1.5\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m19.5 8.25-7.5 7.5-7.5-7.5\"/></svg>");
  --chevron-black: url("data:image/svg+xml,<svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"white\" stroke-width=\"1.5\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m19.5 8.25-7.5 7.5-7.5-7.5\"/></svg>");
  --palette-coral-0: oklch(98.5% .007 23);
  --palette-coral-50: oklch(97.6% .008 23);
  --palette-coral-100: oklch(96.1% .019 23);
  --palette-coral-150: oklch(94% .03 23);
  --palette-coral-200: oklch(91.1% .045 23);
  --palette-coral-250: oklch(87.3% .064 23);
  --palette-coral-300: oklch(82.6% .078 23);
  --palette-coral-350: oklch(77% .111 23);
  --palette-coral-400: oklch(70.6% .136 23);
  --palette-coral-450: oklch(63.6% .167 23);
  --palette-coral-500: oklch(56.3% .17 23);
  --palette-coral-550: oklch(49.1% .174 23);
  --palette-coral-600: oklch(42.4% .154 23);
  --palette-coral-650: oklch(36.3% .145 23);
  --palette-coral-700: oklch(31% .124 23);
  --palette-coral-750: oklch(26.5% .106 23);
  --palette-coral-800: oklch(22.7% .091 23);
  --palette-coral-850: oklch(19.6% .078 23);
  --palette-coral-900: oklch(17.1% .068 23);
  --palette-coral-950: oklch(15.2% .06 23);
  --palette-blue-0: oklch(98.5% .005 251);
  --palette-blue-50: oklch(97.6% .01 251);
  --palette-blue-100: oklch(96.1% .017 251);
  --palette-blue-150: oklch(94% .028 251);
  --palette-blue-200: oklch(91.1% .043 251);
  --palette-blue-250: oklch(87.3% .061 251);
  --palette-blue-300: oklch(82.6% .086 251);
  --palette-blue-350: oklch(77% .123 251);
  --palette-blue-400: oklch(70.6% .16 251);
  --palette-blue-450: oklch(63.6% .186 251);
  --palette-blue-500: oklch(56.3% .165 251);
  --palette-blue-550: oklch(49.1% .143 251);
  --palette-blue-600: oklch(42.4% .123 251);
  --palette-blue-650: oklch(36.3% .106 251);
  --palette-blue-700: oklch(31% .09 251);
  --palette-blue-750: oklch(26.5% .077 251);
  --palette-blue-800: oklch(22.7% .066 251);
  --palette-blue-850: oklch(19.6% .057 251);
  --palette-blue-900: oklch(17.1% .05 251);
  --palette-blue-950: oklch(15.2% .044 251);
  --palette-yellow-0: oklch(98.5% .009 91);
  --palette-yellow-50: oklch(97.6% .021 91);
  --palette-yellow-100: oklch(96.1% .041 91);
  --palette-yellow-150: oklch(94% .058 91);
  --palette-yellow-200: oklch(91.1% .088 91);
  --palette-yellow-250: oklch(87.3% .113 91);
  --palette-yellow-300: oklch(82.6% .14 91);
  --palette-yellow-350: oklch(77% .156 91);
  --palette-yellow-400: oklch(70.6% .143 91);
  --palette-yellow-450: oklch(63.6% .129 91);
  --palette-yellow-500: oklch(56.3% .114 91);
  --palette-yellow-550: oklch(49.1% .099 91);
  --palette-yellow-600: oklch(42.4% .086 91);
  --palette-yellow-650: oklch(36.3% .074 91);
  --palette-yellow-700: oklch(31% .063 91);
  --palette-yellow-750: oklch(26.5% .054 91);
  --palette-yellow-800: oklch(22.7% .046 91);
  --palette-yellow-850: oklch(19.6% .04 91);
  --palette-yellow-900: oklch(17.1% .035 91);
  --palette-yellow-950: oklch(15.2% .031 91);
  --palette-green-0: oklch(98.5% .004 149);
  --palette-green-50: oklch(97.6% .01 149);
  --palette-green-100: oklch(96.1% .023 149);
  --palette-green-150: oklch(94% .038 149);
  --palette-green-200: oklch(91.1% .052 149);
  --palette-green-250: oklch(87.3% .073 149);
  --palette-green-300: oklch(82.6% .085 149);
  --palette-green-350: oklch(77% .103 149);
  --palette-green-400: oklch(70.6% .114 149);
  --palette-green-450: oklch(63.6% .125 149);
  --palette-green-500: oklch(56.3% .136 149);
  --palette-green-550: oklch(49.1% .145 149);
  --palette-green-600: oklch(42.4% .127 149);
  --palette-green-650: oklch(36.3% .097 149);
  --palette-green-700: oklch(31% .077 149);
  --palette-green-750: oklch(26.5% .053 149);
  --palette-green-800: oklch(22.7% .039 149);
  --palette-green-850: oklch(19.6% .028 149);
  --palette-green-900: oklch(17.1% .017 149);
  --palette-green-950: oklch(15.2% .017 149);
  --palette-orange-0: oklch(98.5% .007 34);
  --palette-orange-50: oklch(97.6% .012 34);
  --palette-orange-100: oklch(96.1% .02 34);
  --palette-orange-150: oklch(94% .031 34);
  --palette-orange-200: oklch(91.1% .047 34);
  --palette-orange-250: oklch(87.3% .069 34);
  --palette-orange-300: oklch(82.6% .098 34);
  --palette-orange-350: oklch(77% .138 34);
  --palette-orange-400: oklch(70.6% .188 34);
  --palette-orange-450: oklch(63.6% .229 34);
  --palette-orange-500: oklch(56.3% .202 34);
  --palette-orange-550: oklch(49.1% .177 34);
  --palette-orange-600: oklch(42.4% .152 34);
  --palette-orange-650: oklch(36.3% .131 34);
  --palette-orange-700: oklch(31% .112 34);
  --palette-orange-750: oklch(26.5% .095 34);
  --palette-orange-800: oklch(22.7% .082 34);
  --palette-orange-850: oklch(19.6% .071 34);
  --palette-orange-900: oklch(17.1% .062 34);
  --palette-orange-950: oklch(15.2% .055 34);
  --palette-purple-0: oklch(98.5% .007 295);
  --palette-purple-50: oklch(97.6% .012 295);
  --palette-purple-100: oklch(96.1% .019 295);
  --palette-purple-150: oklch(94% .03 295);
  --palette-purple-200: oklch(91.1% .044 295);
  --palette-purple-250: oklch(87.3% .065 295);
  --palette-purple-300: oklch(82.6% .089 295);
  --palette-purple-350: oklch(77% .122 295);
  --palette-purple-400: oklch(70.6% .16 295);
  --palette-purple-450: oklch(63.6% .203 295);
  --palette-purple-500: oklch(56.3% .251 295);
  --palette-purple-550: oklch(49.1% .249 295);
  --palette-purple-600: oklch(42.4% .215 295);
  --palette-purple-650: oklch(36.3% .184 295);
  --palette-purple-700: oklch(31% .157 295);
  --palette-purple-750: oklch(26.5% .135 295);
  --palette-purple-800: oklch(22.7% .115 295);
  --palette-purple-850: oklch(19.6% .1 295);
  --palette-purple-900: oklch(17.1% .087 295);
  --palette-purple-950: oklch(15.2% .077 295);
  --palette-teal-0: oklch(98.5% .004 182);
  --palette-teal-50: oklch(97.6% .008 182);
  --palette-teal-100: oklch(96.1% .017 182);
  --palette-teal-150: oklch(94% .022 182);
  --palette-teal-200: oklch(91.1% .043 182);
  --palette-teal-250: oklch(87.3% .063 182);
  --palette-teal-300: oklch(82.6% .072 182);
  --palette-teal-350: oklch(77% .089 182);
  --palette-teal-400: oklch(70.6% .087 182);
  --palette-teal-450: oklch(63.6% .099 182);
  --palette-teal-500: oklch(56.3% .099 182);
  --palette-teal-550: oklch(49.1% .082 182);
  --palette-teal-600: oklch(42.4% .068 182);
  --palette-teal-650: oklch(36.3% .054 182);
  --palette-teal-700: oklch(31% .049 182);
  --palette-teal-750: oklch(26.5% .041 182);
  --palette-teal-800: oklch(22.7% .035 182);
  --palette-teal-850: oklch(19.6% .029 182);
  --palette-teal-900: oklch(17.1% .025 182);
  --palette-teal-950: oklch(15.2% .021 182);
  --palette-periwinkle-0: oklch(98.5% .007 270);
  --palette-periwinkle-50: oklch(97.6% .008 270);
  --palette-periwinkle-100: oklch(96.1% .013 270);
  --palette-periwinkle-150: oklch(94% .02 270);
  --palette-periwinkle-200: oklch(91.1% .033 270);
  --palette-periwinkle-250: oklch(87.3% .05 270);
  --palette-periwinkle-300: oklch(82.6% .073 270);
  --palette-periwinkle-350: oklch(77% .09 270);
  --palette-periwinkle-400: oklch(70.6% .112 270);
  --palette-periwinkle-450: oklch(63.6% .139 270);
  --palette-periwinkle-500: oklch(56.3% .181 270);
  --palette-periwinkle-550: oklch(49.1% .232 270);
  --palette-periwinkle-600: oklch(42.4% .246 270);
  --palette-periwinkle-650: oklch(36.3% .208 270);
  --palette-periwinkle-700: oklch(31% .169 270);
  --palette-periwinkle-750: oklch(26.5% .118 270);
  --palette-periwinkle-800: oklch(22.7% .092 270);
  --palette-periwinkle-850: oklch(19.6% .072 270);
  --palette-periwinkle-900: oklch(17.1% .058 270);
  --palette-periwinkle-950: oklch(15.2% .05 270);
  --palette-grey-0: oklch(98.5% 0 0);
  --palette-grey-50: oklch(97.6% 0 0);
  --palette-grey-100: oklch(96.1% 0 0);
  --palette-grey-150: oklch(94% 0 0);
  --palette-grey-200: oklch(91.1% 0 0);
  --palette-grey-250: oklch(87.3% 0 0);
  --palette-grey-300: oklch(82.6% 0 0);
  --palette-grey-350: oklch(77% 0 0);
  --palette-grey-400: oklch(70.6% 0 0);
  --palette-grey-450: oklch(63.6% 0 0);
  --palette-grey-500: oklch(56.3% 0 0);
  --palette-grey-550: oklch(49.1% 0 0);
  --palette-grey-600: oklch(42.4% 0 0);
  --palette-grey-650: oklch(36.3% 0 0);
  --palette-grey-700: oklch(31% 0 0);
  --palette-grey-750: oklch(26.5% 0 0);
  --palette-grey-800: oklch(22.7% 0 0);
  --palette-grey-850: oklch(19.6% 0 0);
  --palette-grey-900: oklch(17.1% 0 0);
  --palette-grey-950: oklch(15.2% 0 0);
}

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

  :where(html) {
    color: var(--foreground-default);
    background-color: var(--surface-base);
    color-scheme: light dark;
    scrollbar-color: var(--foreground-muted) transparent;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    scroll-padding-top: var(--scroll-padding-top);
    interpolate-size: allow-keywords;
    font-weight: var(--font-weight-default);
  }

  :root[data-color-scheme="dark"] {
    color-scheme: dark;
  }

  :root[data-color-scheme="light"] {
    color-scheme: light;
  }

  :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 {
      opacity: .5;
      block-size: 0;
      transition: block-size var(--interaction-transition-duration-exit)
        var(--interaction-transition-easing-entrance),
        opacity var(--interaction-transition-duration-exit)
        var(--interaction-transition-easing-entrance),
        content-visibility var(--interaction-transition-duration-exit)
        var(--interaction-transition-easing-entrance) allow-discrete;
      overflow: clip;
    }

    details[open]::details-content {
      opacity: 1;
      block-size: auto;
      transition-duration: var(--interaction-transition-duration-enter);
    }
  }

  :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-delay: 0s !important;
      animation-iteration-count: 1 !important;
      animation-delay: 0s !important;
    }

    [stagger-reveal] {
      --_reveal-distance: 0 !important;
    }

    :where(.popover) {
      --_popover-enter-transform: none !important;
      --_popover-exit-transform: none !important;
      --_popover-enter-opacity: 0 !important;
      --_popover-exit-opacity: 0 !important;
    }

    .spinner {
      animation-iteration-count: infinite !important;
    }
  }
}

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

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

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

@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: 1px 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;
    transition-property: outline-color, border-color, background-color, color, transform;
    transition-duration: var(--interaction-transition-duration-quick);
    transition-timing-function: var(--interaction-transition-easing-default);
    outline: 2px solid #0000;
    justify-content: center;
    align-items: center;
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
  }
}

@layer buttons.public {
  :where(.button) {
    --_button-base: var(--button-base);
    --_button-on-base: var(--button-on-base);
    --_button-base-hover: color-mix(in oklch, var(--_button-on-base) 8%, var(--_button-base));
    --_button-base-active: color-mix(in oklch, var(--_button-on-base) 14%, var(--_button-base));
    --_button-tint: color-mix(in oklch, var(--_button-base) 10%, var(--button-tint-blend));
    --_button-tint-hover: color-mix(in oklch, var(--_button-base) 20%, var(--button-tint-blend));
    --_button-tint-active: color-mix(in oklch, var(--_button-base) 26%, var(--button-tint-blend));
    --_button-on-tint: color-mix(in oklch, var(--_button-base) 40%, var(--button-on-tint-ink));
    --_button-on-surface: var(--_button-base);
  }

  :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="tinted"]) {
    --_button-background: var(--_button-tint);
    --_button-foreground: var(--_button-on-tint);
    --_button-border: transparent;
  }

  :where(.button[data-variant="outlined"]) {
    --_button-background: transparent;
    --_button-foreground: var(--_button-on-surface);
    --_button-border: oklch(from var(--_button-base) l c h / .25);
  }

  :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 {
  @media (hover: hover) and (pointer: fine) {
    :where(.button:not([data-variant]), .button[data-variant="filled"]):hover {
      --_button-background: var(--_button-base-hover);
      --_button-border: var(--_button-base-hover);
    }

    :where(.button[data-variant="tinted"]):hover {
      --_button-background: var(--_button-tint-hover);
    }

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

  :where(.button):active {
    transform: scale(.97);
  }

  @media (prefers-reduced-motion: reduce) {
    :where(.button):active {
      transform: none;
    }
  }

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

  :where(.button[data-variant="tinted"]):active {
    --_button-background: var(--_button-tint-active);
  }

  :where(.button[data-variant="outlined"]):active, :where(.button[data-variant="plain"]):active {
    --_button-background: var(--_button-tint-active);
    --_button-foreground: var(--_button-on-tint);
  }

  :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-regular);
    background: var(--_input-background);
    color: var(--_input-foreground);
    border-color: var(--_input-border);
    border-radius: var(--_input-border-radius);
    min-height: round(var(--_input-height), 1px);
    font-size: max(16px, 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;
    background-color: currentColor;
    width: 80%;
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;

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

  :where(.radio):after {
    transition: transform var(--interaction-transition-duration-enter)
      var(--interaction-transition-easing-entrance),
      color var(--interaction-transition-duration-quick)
      var(--interaction-transition-easing-default);
    transform: scale(0);
    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(.radio):checked:after {
    transform: scale(1);
  }

  :where(.checkbox):after {
    clip-path: rect(0px 100% 100% 100%);
    filter: blur(5px);
    transform-origin: 100%;
    transition: all .15s ease-out;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -1 24 24\" fill=\"none\" stroke=\"black\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" %3E%3Cpath d=\"M20 6L9 17l-5-5\"/%3E%3C/svg%3E");
  }

  :where(.checkbox):checked:after {
    clip-path: rect(0px 100% 100% 0);
    filter: blur();
    transform: translateY(0);
  }

  :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));
    display: block;
    position: relative;
  }
}

@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-4xs);
    --_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-m);
    --_input-padding-inline: var(--spacing-xs);
    --_input-padding-block: var(--spacing-4xs);
    --_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-4xs);
    --_input-border-radius: var(--border-radius-l);
  }

  :where(.radio, .checkbox):not([data-size]), :where(.radio, .checkbox):where([data-size="medium"]) {
    --_input-height: var(--size-selection-control-medium);
  }

  :where(.radio, .checkbox):where([data-size="small"]) {
    --_input-height: var(--size-selection-control-small);
  }

  :where(.radio, .checkbox):where([data-size="large"]) {
    --_input-height: var(--size-selection-control-large);
  }

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

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

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

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

  @media (prefers-reduced-motion: reduce) {
    :where(.radio):after, :where(.radio):checked:after {
      transform: none;
    }

    :where(.checkbox):after, :where(.checkbox):checked:after {
      clip-path: none;
    }
  }

  :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-content: center;
      padding-inline-end: var(--_input-padding-inline);
    }

    :where(.select)::picker-icon {
      color: var(--_input-foreground);
      opacity: .6;
      right: var(--_input-padding-inline);
      position: absolute;
      inset-block-start: 50%;
      translate: 0 -50%;
    }

    :where(.select)::picker(select) {
      appearance: base-select;
      font-size: var(--_input-font-size);
      background: 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);
      --viewport-margin: var(--spacing-s);
      --picker-min-size: 12em;
      --picker-max-size: 30em;
      min-block-size: var(--picker-min-size);
      max-block-size: min(100% - var(--viewport-margin), var(--picker-max-size));
      position-try-fallbacks: flip-block,
        flip-inline,
        flip-block flip-inline;
      box-shadow: 0 4px 16px #0000001f, 0 1px 4px #00000014;

      @supports (min-block-size: calc-size(fit-content, min(size, 1px))) {
        min-block-size: calc-size(fit-content, min(size, var(--picker-min-size)));
        max-block-size: calc-size(stretch, min(size, var(--picker-max-size)));
        margin-block-end: var(--viewport-margin);
      }

      @supports not (min-block-size: calc-size(fit-content, min(size, 1px))) {
        &:not(:has(:where(option:nth-of-type(4))), :has(:where(optgroup:nth-of-type(2)))) {
          min-block-size: 0;
          max-block-size: fit-content;
        }
      }
    }

    :where(.select) option {
      padding-block: var(--spacing-4xs);
      padding-inline: var(--spacing-xs) var(--spacing-xs);
      border-radius: calc(var(--input-border-radius) - 2px);
      color: var(--_input-foreground);
      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);
      order: 2;
      margin-left: auto;
    }

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

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

    :where(.select) optgroup legend {
      font-weight: var(--font-weight-medium);
      padding-inline: var(--spacing-3xs) var(--spacing-xs);
      margin-bottom: var(--spacing-3xs);
      font-size: .75em;
      position: sticky;
      top: 0;
      container-type: scroll-state;
    }

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

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

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

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

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

@property --_range-knob-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@layer range.base {
  :where(.range) {
    appearance: none;
    font: inherit;
    block-size: var(--range-thumb-size);
    vertical-align: middle;
    cursor: pointer;
    transition-property: --_range-fill, --_range-rail, --_range-knob-border, --_range-ring, --_range-knob-scale;
    transition-duration: var(--interaction-transition-duration-quick);
    transition-timing-function: var(--interaction-transition-easing-default);
    background: none;
    border: none;
    outline: none;
  }

  :where(.range)::-webkit-slider-runnable-track {
    block-size: var(--range-track-height);
    margin-top: var(--_range-track-offset);
    border-radius: var(--_range-track-radius);
    background: linear-gradient(to right,
      var(--_range-fill) 0,
      var(--_range-fill) var(--range-progress),
      var(--_range-rail) var(--range-progress),
      var(--_range-rail) 100%);
  }

  :where(.range):dir(rtl)::-webkit-slider-runnable-track {
    background: linear-gradient(to left,
      var(--_range-fill) 0,
      var(--_range-fill) var(--range-progress),
      var(--_range-rail) var(--range-progress),
      var(--_range-rail) 100%);
  }

  :where(.range)::-webkit-slider-thumb {
    appearance: none;
    box-sizing: border-box;
    block-size: var(--range-thumb-size);
    inline-size: var(--range-thumb-size);
    margin-top: var(--_range-thumb-offset);
    background: var(--_range-knob);
    border: 1px solid var(--_range-knob-border);
    transform: scale(var(--_range-knob-scale));
    box-shadow: 0 1px 2px oklch(from var(--shadow) l c h / .18),
      0 0 0 var(--_range-ring-size) var(--_range-ring);
    border-radius: 50%;
  }

  :where(.range)::-moz-range-track {
    block-size: var(--range-track-height);
    border-radius: var(--_range-track-radius);
    background: linear-gradient(to right,
      var(--_range-fill) 0,
      var(--_range-fill) var(--range-progress),
      var(--_range-rail) var(--range-progress),
      var(--_range-rail) 100%);
  }

  :where(.range):dir(rtl)::-moz-range-track {
    background: linear-gradient(to left,
      var(--_range-fill) 0,
      var(--_range-fill) var(--range-progress),
      var(--_range-rail) var(--range-progress),
      var(--_range-rail) 100%);
  }

  :where(.range)::-moz-range-thumb {
    box-sizing: border-box;
    block-size: var(--range-thumb-size);
    inline-size: var(--range-thumb-size);
    background: var(--_range-knob);
    border: 1px solid var(--_range-knob-border);
    transform: scale(var(--_range-knob-scale));
    box-shadow: 0 1px 2px oklch(from var(--shadow) l c h / .18),
      0 0 0 var(--_range-ring-size) var(--_range-ring);
    border-radius: 50%;
  }
}

@layer range.public {
  :where(.range) {
    --range-base: var(--button-base);
    --range-on-base: var(--button-on-base);
    --range-rail-blend: var(--surface-tint-blend);
    --range-focus-ring-color: var(--input-focus-ring-color);
    --range-track-height: 2px;
    --range-progress: 0%;
    --_range-base: var(--range-base);
    --_range-on-base: var(--range-on-base);
    --_range-fill: color-mix(in oklch, var(--_range-base) 75%, var(--foreground-emphasis) 25%);
    --_range-fill-hover: color-mix(in oklch, var(--_range-on-base) 8%, var(--_range-fill));
    --_range-fill-active: color-mix(in oklch, var(--_range-on-base) 14%, var(--_range-fill));
    --_range-rail-rest: color-mix(in oklch, var(--_range-base) 30%, var(--range-rail-blend));
    --_range-rail-hover: color-mix(in oklch, var(--_range-base) 40%, var(--range-rail-blend));
    --_range-fill-disabled: color-mix(in oklch, var(--_range-fill) 45%, var(--_range-rail-rest));
    --_range-knob-ring: oklch(from var(--_range-base) l c h / var(--border-alpha-default));
    --_range-knob-ring-faint: oklch(from var(--_range-base) l c h / var(--border-alpha-faint));
    --_range-ring-rest: transparent;
    --_range-ring-hover: oklch(from var(--_range-base) l c h / .18);
    --_range-ring-focus: var(--range-focus-ring-color);
    --_range-rail: var(--_range-rail-rest);
    --_range-knob: var(--_range-on-base);
    --_range-knob-border: var(--_range-knob-ring);
    --_range-ring: var(--_range-ring-rest);
    --_range-knob-scale: 1;
    --_range-track-radius: calc(var(--range-track-height) / 2);
    --_range-ring-size: calc(var(--range-thumb-size) * .2);
    --_range-track-offset: calc((var(--range-thumb-size) - var(--range-track-height)) / 2);
    --_range-thumb-offset: calc((var(--range-track-height) - var(--range-thumb-size)) / 2);
  }

  :where(.range:not([data-size]), .range[data-size="medium"]) {
    --range-thumb-size: 16px;
  }

  :where(.range[data-size="small"]) {
    --range-thumb-size: 14px;
  }

  :where(.range[data-size="large"]) {
    --range-thumb-size: 20px;
  }
}

@layer range.state {
  @media (hover: hover) and (pointer: fine) {
    :where(.range):hover:not(:disabled) {
      --_range-fill: var(--_range-fill-hover);
      --_range-rail: var(--_range-rail-hover);
      --_range-ring: var(--_range-ring-hover);
      --_range-knob-scale: 1.1;
    }
  }

  :where(.range):focus-visible:not(:disabled) {
    --_range-ring: var(--_range-ring-focus);
    --_range-knob-scale: 1.1;
  }

  :where(.range):active:not(:disabled) {
    --_range-fill: var(--_range-fill-active);
    --_range-rail: var(--_range-rail-hover);
    --_range-knob-scale: .95;
  }

  :where(.range):disabled {
    --_range-fill: var(--_range-fill-disabled);
    --_range-knob-border: var(--_range-knob-ring-faint);
    --_range-ring: transparent;
    --_range-knob-scale: 1;
    cursor: not-allowed;
  }

  @media (prefers-reduced-motion: reduce) {
    :where(.range)::-webkit-slider-thumb, :where(.range)::-moz-range-thumb {
      transform: none;
    }
  }
}

@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-xs);
    --_table-padding-inline: var(--spacing-s);
  }

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

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

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

@layer link {
  :where(.link) {
    color: var(--foreground-link-default);
    font-weight: var(--font-weight-medium);
    text-decoration-skip-ink: auto;
    cursor: pointer;
    text-underline-offset: var(--link-text-underline-offset);
    text-decoration-color: var(--foreground-link-decoration-idle, currentColor);
    text-decoration-thickness: var(--link-text-decoration-thickness);

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        color: var(--foreground-link-hover);
        text-decoration-color: var(--foreground-link-decoration-hover);
      }
    }
  }
}

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

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

    :is(h1, h2) {
      line-height: 1.2;
    }

    :is(h3, h4) {
      line-height: 1.33;
    }

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

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

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

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

    :any-link {
      color: var(--foreground-link-default);
      font-weight: var(--font-weight-medium);
      text-decoration-skip-ink: auto;
      cursor: pointer;
      text-underline-offset: var(--link-text-underline-offset);
      text-decoration-color: var(--foreground-link-decoration-idle, currentColor);
      text-decoration-thickness: var(--link-text-decoration-thickness);

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          color: var(--foreground-link-hover);
          text-decoration-color: var(--foreground-link-decoration-hover);
        }
      }
    }

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

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

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

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

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

    dd {
      grid-column: 2;
      margin: 0;
    }

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

    li + li {
      margin-block-start: .3em;
    }

    ul {
      list-style-type: square;
    }

    ol {
      list-style-type: decimal;
    }

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

    :is(li, blockquote) {
      text-wrap: pretty;
    }

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

@layer stagger.config {
  [stagger-items] {
    --stagger-duration: .46s;
    --stagger-time-scale: 1;
    --stagger-lead-in: 20ms;
    --stagger-budget: .56s;
    --stagger-step-min: 14ms;
    --stagger-step-max: 46ms;
    --stagger-angle: 90deg;
    --stagger-distance: 20px;
    --stagger-blur: 3px;
    --stagger-strength: 1;
    --stagger-ease-move: cubic-bezier(.16, .84, .24, 1);
    --stagger-ease-fade: cubic-bezier(.2, 1.6, .35, 1);
  }
}

@layer stagger.engine {
  @property --_index {
    syntax: "<integer>";
    inherits: false;
    initial-value: 1;
  }

  @property --_count {
    syntax: "<integer>";
    inherits: false;
    initial-value: 1;
  }

  @keyframes stagger-move {
    from {
      translate: calc(var(--_travel) * var(--_axis-x)) calc(var(--_travel) * var(--_axis-y));
    }
  }

  @keyframes stagger-fade {
    from {
      opacity: 0;
      filter: blur(calc(var(--stagger-blur) * var(--stagger-strength)));
    }
  }

  [stagger-items] > * {
    --_index: sibling-index();
    --_count: sibling-count();
    --_center: round(nearest, var(--_count) / 2, 1);
    --_offset: calc(var(--_index) - 1);
    --_rank: abs(var(--_offset));
    --_shoulder: 7;
    --_tail-step: 6ms;
    --_step: clamp(var(--stagger-step-min),
      var(--stagger-budget) /
      var(--_count),
      var(--stagger-step-max));
    --_delay: calc(var(--stagger-lead-in) +
      min(var(--_rank) *
        var(--_step),
        var(--_shoulder) *
        var(--_step) +
        var(--_rank) *
        var(--_tail-step)));
    --_travel-min: 7px;
    --_travel-decay: .6px;
    --_axis-boost: calc(1 + abs(cos(var(--stagger-angle))) * .6);
    --_travel: calc(max(var(--_travel-min), var(--stagger-distance) - var(--_rank) * var(--_travel-decay)) *
      var(--stagger-strength) *
      var(--_axis-boost));
    --_polarity: 1;
    --_axis-x: calc(cos(var(--stagger-angle)) * var(--_polarity));
    --_axis-y: calc(sin(var(--stagger-angle)) * var(--_polarity));
    --_duration: calc(var(--stagger-duration) * var(--stagger-time-scale));
    --_start: calc(var(--_delay) * var(--stagger-time-scale));
    animation: stagger-move var(--_duration) var(--stagger-ease-move) var(--_start) backwards,
      stagger-fade var(--_duration) var(--stagger-ease-fade) var(--_start) backwards;
  }

  @media (prefers-reduced-motion: reduce) {
    [stagger-items] > * {
      animation: none;
    }
  }
}

@layer stagger.variants {
  [stagger-items~="reverse"] > * {
    --_offset: calc(var(--_index) - var(--_count));
  }

  [stagger-items~="inside-out"] > * {
    --_offset: calc(var(--_index) - var(--_center));
  }

  [stagger-items~="outside-in"] > * {
    --_offset: calc(var(--_index) - var(--_center));
    --_rank: calc(var(--_center) - abs(var(--_offset)));
  }

  [stagger-items~="from-below"] {
    --stagger-angle: 90deg;
  }

  [stagger-items~="from-above"] {
    --stagger-angle: 270deg;
  }

  [stagger-items~="from-left"] {
    --stagger-angle: 180deg;
  }

  [stagger-items~="from-right"] {
    --stagger-angle: 0deg;
  }

  [stagger-items~="corner"] {
    --stagger-angle: 135deg;
  }

  [stagger-items~="soft"] {
    --stagger-strength: .6;
  }

  [stagger-items~="hard"] {
    --stagger-strength: 1.5;
  }

  [stagger-items~="split"] > * {
    --_polarity: sign(var(--_offset));
  }

  [stagger-items~="converge"] > * {
    --_polarity: calc(sign(var(--_offset)) * -1);
  }
}

@layer color-mode-element {
  :where(color-mode) {
    display: contents;
  }
}

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

color-mode[palette="grey"], :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-base: light-dark(var(--palette-inherit-50), var(--palette-inherit-850));
  --surface-tinted: light-dark(var(--palette-inherit-100), var(--palette-inherit-800));
  --surface-dyed: light-dark(var(--palette-inherit-150), var(--palette-inherit-700));
  --surface-tint-blend: light-dark(var(--palette-inherit-300), var(--palette-inherit-600));
  --foreground-default: light-dark(var(--palette-inherit-600), var(--palette-inherit-250));
  --foreground-emphasis: light-dark(var(--palette-inherit-700), var(--palette-inherit-100));
  --foreground-muted: light-dark(var(--palette-inherit-550), var(--palette-inherit-350));
  --foreground-marker: light-dark(var(--palette-inherit-600), var(--palette-inherit-200));
  --foreground-link-default: light-dark(var(--palette-inherit-600), var(--palette-inherit-350));
  --foreground-link-hover: light-dark(var(--palette-inherit-700), var(--palette-inherit-300));
  --foreground-link-decoration-idle: light-dark(var(--palette-inherit-450), var(--palette-inherit-450));
  --foreground-link-decoration-hover: light-dark(var(--palette-inherit-400), var(--palette-inherit-400));
  --foreground-control-default: light-dark(var(--palette-inherit-800), var(--palette-inherit-800));
  --foreground-control-hover: light-dark(var(--palette-inherit-800), var(--palette-inherit-800));
  --foreground-control-placeholder: light-dark(var(--palette-inherit-400), var(--palette-inherit-500));
  --foreground-control-active: light-dark(var(--palette-inherit-900), var(--palette-inherit-900));
  --foreground-control-selected: light-dark(var(--palette-inherit-600), var(--palette-inherit-400));
  --foreground-control-selection: light-dark(var(--palette-periwinkle-700), var(--palette-periwinkle-150));
  --foreground-control-error: light-dark(var(--palette-coral-650), var(--palette-coral-150));
  --background-control-default: light-dark(var(--palette-inherit-50), var(--palette-inherit-750));
  --background-control-hover: light-dark(var(--palette-inherit-100), var(--palette-inherit-700));
  --background-control-active: light-dark(var(--palette-periwinkle-100), var(--palette-periwinkle-700));
  --background-control-selection: light-dark(var(--palette-periwinkle-250), var(--palette-periwinkle-500));
  --background-control-error: light-dark(var(--palette-coral-100), var(--palette-coral-100));
  --border-base: light-dark(var(--palette-inherit-550), var(--palette-inherit-400));
  --border-control-default: light-dark(var(--palette-inherit-250), var(--palette-inherit-650));
  --border-control-focused: light-dark(var(--palette-periwinkle-400), var(--palette-periwinkle-400));
  --border-control-hover: light-dark(var(--palette-inherit-300), var(--palette-inherit-600));
  --border-control-active: light-dark(var(--palette-periwinkle-700), var(--palette-periwinkle-600));
  --border-control-selected: light-dark(var(--palette-periwinkle-600), var(--palette-periwinkle-600));
  --border-control-error: light-dark(var(--palette-coral-400), var(--palette-coral-450));
  --shadow: light-dark(var(--palette-inherit-700), var(--palette-inherit-950));
  --backdrop: light-dark(var(--palette-inherit-500), var(--palette-inherit-900));
  --button-on-tint-ink: light-dark(var(--palette-inherit-800), var(--palette-inherit-50));
  --button-tint-blend: light-dark(var(--palette-inherit-150), var(--palette-inherit-850));
  --button-base: light-dark(var(--palette-inherit-600), var(--palette-inherit-350));
  --button-on-base: light-dark(var(--palette-inherit-50), var(--palette-inherit-850));
}

color-mode[inverted]:not([inverted="false" i]) {
  --surface-base: light-dark(var(--palette-inherit-750), var(--palette-inherit-200));
  --surface-tinted: light-dark(var(--palette-inherit-700), var(--palette-inherit-250));
  --surface-dyed: light-dark(var(--palette-inherit-600), var(--palette-inherit-300));
  --surface-tint-blend: light-dark(var(--palette-inherit-450), var(--palette-inherit-400));
  --foreground-default: light-dark(var(--palette-inherit-100), var(--palette-inherit-750));
  --foreground-emphasis: light-dark(var(--palette-inherit-50), var(--palette-inherit-900));
  --foreground-muted: light-dark(var(--palette-inherit-200), var(--palette-inherit-750));
  --foreground-marker: light-dark(var(--palette-inherit-200), var(--palette-inherit-600));
  --foreground-link-default: light-dark(var(--palette-inherit-100), var(--palette-inherit-800));
  --foreground-link-hover: light-dark(var(--palette-inherit-50), var(--palette-inherit-900));
  --foreground-link-decoration-idle: light-dark(var(--palette-inherit-400), var(--palette-inherit-550));
  --foreground-link-decoration-hover: light-dark(var(--palette-inherit-250), var(--palette-inherit-650));
  --foreground-control-default: light-dark(var(--palette-inherit-800), var(--palette-inherit-800));
  --foreground-control-hover: light-dark(var(--palette-inherit-800), var(--palette-inherit-800));
  --foreground-control-placeholder: light-dark(var(--palette-inherit-500), var(--palette-inherit-450));
  --foreground-control-active: light-dark(var(--palette-inherit-900), var(--palette-inherit-900));
  --foreground-control-selected: light-dark(var(--palette-inherit-400), var(--palette-inherit-600));
  --foreground-control-selection: light-dark(var(--palette-periwinkle-700), var(--palette-periwinkle-600));
  --foreground-control-error: light-dark(var(--palette-coral-150), var(--palette-coral-650));
  --background-control-default: light-dark(var(--palette-inherit-750), var(--palette-inherit-150));
  --background-control-hover: light-dark(var(--palette-inherit-700), var(--palette-inherit-200));
  --background-control-active: light-dark(var(--palette-periwinkle-700), var(--palette-periwinkle-150));
  --background-control-selection: light-dark(var(--palette-periwinkle-250), var(--palette-periwinkle-500));
  --background-control-error: light-dark(var(--palette-coral-100), var(--palette-coral-100));
  --border-base: light-dark(var(--palette-inherit-400), var(--palette-inherit-650));
  --border-control-default: light-dark(var(--palette-inherit-500), var(--palette-inherit-400));
  --border-control-focused: light-dark(var(--palette-periwinkle-400), var(--palette-periwinkle-400));
  --border-control-hover: light-dark(var(--palette-inherit-400), var(--palette-inherit-450));
  --border-control-active: light-dark(var(--palette-periwinkle-600), var(--palette-periwinkle-700));
  --border-control-selected: light-dark(var(--palette-periwinkle-600), var(--palette-periwinkle-600));
  --border-control-error: light-dark(var(--palette-coral-450), var(--palette-coral-400));
  --shadow: light-dark(var(--palette-inherit-700), var(--palette-inherit-950));
  --backdrop: light-dark(var(--palette-inherit-500), var(--palette-inherit-900));
  --button-on-tint-ink: light-dark(var(--palette-inherit-100), var(--palette-inherit-750));
  --button-tint-blend: light-dark(var(--palette-inherit-700), var(--palette-inherit-300));
  --button-base: light-dark(var(--palette-inherit-100), var(--palette-inherit-700));
  --button-on-base: light-dark(var(--palette-inherit-750), var(--palette-inherit-50));
}

@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);
    filter: blur(15px);
  }
}

@layer popover.state {
  :where(.popover) {
    --_popover-duration-enter: var(--popover-duration-enter, var(--interaction-transition-duration-enter));
    --_popover-duration-exit: var(--popover-duration-exit, var(--interaction-transition-duration-exit));
    --_popover-easing: var(--popover-easing, var(--interaction-transition-easing-entrance));
    transition: opacity var(--_popover-duration-exit) var(--_popover-easing),
      transform var(--_popover-duration-exit) var(--_popover-easing),
      overlay var(--_popover-duration-exit) var(--_popover-easing) allow-discrete,
      display var(--_popover-duration-exit) var(--_popover-easing) allow-discrete;
    opacity: var(--_popover-exit-opacity, 0);
    transform: var(--_popover-exit-transform, none);
  }

  :where(.popover):popover-open {
    opacity: 1;
    transition-duration: var(--_popover-duration-enter);
    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) scale(.97);
  }

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

  :where(.popover[data-type="tooltip"]) {
    --_popover-duration-enter: var(--popover-duration-enter, var(--interaction-transition-duration-enter));
  }

  :where(.popover[data-type="tooltip"]:not([data-position])), :where(.popover[data-type="tooltip"][data-position="top"]) {
    --_popover-enter-transform: translateY(2.25rem) scale(.95);
  }

  :where(.popover[data-type="tooltip"][data-position="bottom"]) {
    --_popover-enter-transform: translateY(-2.25rem) scale(.95);
  }

  :where(.popover[data-type="tooltip"][data-position="left"]) {
    --_popover-enter-transform: translateX(2.25rem) scale(.95);
  }

  :where(.popover[data-type="tooltip"][data-position="right"]) {
    --_popover-enter-transform: translateX(-2.25rem) scale(.95);
  }

  :where(.popover[data-type="drawer"]) {
    --_popover-duration-enter: var(--popover-duration-enter, var(--interaction-transition-duration-enter-large));
    --_popover-duration-exit: var(--popover-duration-exit, var(--interaction-transition-duration-exit-large));
    --_popover-easing: var(--popover-easing, var(--interaction-transition-easing-large));
    --_popover-enter-opacity: 1;
    --_popover-exit-opacity: 1;
  }

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

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

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

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

  :where(.popover[data-backdrop])::backdrop {
    transition: opacity var(--_popover-duration-exit) var(--_popover-easing),
      overlay var(--_popover-duration-exit) var(--_popover-easing) allow-discrete,
      display var(--_popover-duration-exit) var(--_popover-easing) allow-discrete;
    opacity: 0;
  }

  :where(.popover[data-backdrop]):popover-open::backdrop {
    opacity: 1;
    transition-duration: var(--_popover-duration-enter);

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

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

  .m-0 {
    margin: 0;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .p-0 {
    padding: 0;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@layer spacing.axes {
  .my-auto {
    margin-block: auto;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@layer spacing.sides {
  .ml-auto {
    margin-inline-start: auto;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .mb--4xs {
    margin-block-end: calc(var(--spacing-4xs) * -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);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@layer spacing.gap {
  .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-4xs {
    gap: var(--spacing-4xs);
  }

  .gap-none {
    gap: 0;
  }

  .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-4xs {
    row-gap: var(--spacing-4xs);
  }

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

  .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-4xs {
    column-gap: var(--spacing-4xs);
  }

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

@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), :where(.fs-2xl) {
    line-height: var(--leading-slim);
  }

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

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

@property --surface-blend {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

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

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

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

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

@layer colors.wash {
  .bg-wash\:hover {
    transition: background-color var(--interaction-transition-duration-quick)
      var(--interaction-transition-easing-default);

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        background-color: color-mix(in oklch,
          transparent calc(100% - var(--surface-blend-augment)),
          var(--surface-tint-blend));
      }
    }
  }
}

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

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

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

@layer colors.border {
  @property --border-hover {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
  }

  :where(.b-t, .b-r, .b-b, .b-l, .b-all), .b-default {
    border-color: oklch(from var(--border-base) l c h /
      calc(var(--border-alpha-default) + var(--border-hover)));
  }

  .b-faint {
    border-color: oklch(from var(--border-base) l c h /
      calc(var(--border-alpha-faint) + var(--border-hover)));
  }

  .b-prominent {
    border-color: oklch(from var(--border-base) l c h /
      calc(var(--border-alpha-prominent) + var(--border-hover)));
  }

  .b\:hover {
    transition: border-color var(--interaction-transition-duration-quick)
      var(--interaction-transition-easing-default);

    &:hover {
      --border-hover: var(--border-hover-augment);
    }
  }
}

.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-t-none, .b-r-none {
    border-right: 0;
  }

  .b-l-none {
    border-left: 0;
  }

  .b-b-none {
    border-right: 0;
  }

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

  .b-hairline {
    border-width: .5px;
  }

  .b-thick {
    border-width: 2px;
  }
}

@layer border-radius {
  .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%;
  }

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

  .brtl-none {
    border-top-left-radius: 0;
  }

  .brtr-none {
    border-top-right-radius: 0;
  }

  .brbl-none {
    border-bottom-left-radius: 0;
  }

  .brbr-none {
    border-bottom-right-radius: 0;
  }
}

.of-hidden {
  overflow: hidden;
}

.of-clip {
  overflow: clip;
}

.of-scroll {
  overflow: scroll;
}

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

.d-block {
  display: block;
}

.d-contents {
  display: contents;
}

.d-inline {
  display: inline;
}

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

.d-grid {
  display: grid;
}

.grid-subgrid {
  grid-template-columns: subgrid;
  display: grid;
}

.grid-all-columns {
  grid-column: 1 / -1;
}

.position-sticky {
  position: sticky;
}

.position-absolute {
  position: absolute;
}

.position-fixed {
  position: fixed;
}

.top-0 {
  top: 0;
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  left: 0;
}

.right-0 {
  right: 0;
}

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

@property --_alpha-falloff {
  syntax: "<number>";
  inherits: false;
  initial-value: .9;
}

.shadow-low, .shadow-medium, .shadow-high {
  --_shadow-base: var(--shadow, var(--palette-grey-800));
}

.shadow-low {
  --_alpha-falloff: .72;
  --_shadow-color: light-dark(oklch(from var(--_shadow-base) l c h / .54), oklch(from var(--_shadow-base) l c h / 0));
  box-shadow: 0px .5px .5px
    oklch(from var(--_shadow-color) l c h / calc(alpha * pow(var(--_alpha-falloff), 0))),
    0px .8px .7px -1.9px
    oklch(from var(--_shadow-color) l c h / calc(alpha * pow(var(--_alpha-falloff), 1))),
    0px 2.2px 2px -3.9px
    oklch(from var(--_shadow-color) l c h / calc(alpha * pow(var(--_alpha-falloff), 2)));
}

.shadow-medium {
  --_alpha-falloff: .7;
  --_shadow-color: light-dark(oklch(from var(--_shadow-base) l c h / .24), oklch(from var(--_shadow-base) l c h / 0));
  --_shadow-elevation-medium: 0px .5px .5px oklch(from var(--_shadow-color) l c h /
      calc(alpha * pow(var(--_alpha-falloff), 0))),
    0px 1.3px 1.2px -1.3px oklch(from var(--_shadow-color) l c h /
      calc(alpha * pow(var(--_alpha-falloff), 1))),
    0px 4px 3.7px -2.6px oklch(from var(--_shadow-color) l c h /
      calc(alpha * pow(var(--_alpha-falloff), 2))),
    0px 10.8px 9.9px -3.9px oklch(from var(--_shadow-color) l c h /
      calc(alpha * pow(var(--_alpha-falloff), 3)));
  box-shadow: var(--_shadow-elevation-medium);
}

.shadow-high {
  --_alpha-falloff: .9;
  --_shadow-color: light-dark(oklch(from var(--_shadow-base) l c h / .1), oklch(from var(--_shadow-base) l c h / 0));
  --_shadow-elevation-high: 0px .5px .5px oklch(from var(--_shadow-color) l c h /
      calc(alpha * pow(var(--_alpha-falloff), 0))),
    0px 1.8px 1.6px -.6px oklch(from var(--_shadow-color) l c h /
      calc(alpha * pow(var(--_alpha-falloff), 1))),
    0px 3.6px 3.3px -1.1px oklch(from var(--_shadow-color) l c h /
      calc(alpha * pow(var(--_alpha-falloff), 2))),
    0px 6.9px 6.3px -1.7px oklch(from var(--_shadow-color) l c h /
      calc(alpha * pow(var(--_alpha-falloff), 3))),
    0px 12.7px 11.6px -2.2px oklch(from var(--_shadow-color) l c h /
      calc(alpha * pow(var(--_alpha-falloff), 4))),
    -.1px 21.9px 20px -2.8px oklch(from var(--_shadow-color) l c h /
      calc(alpha * pow(var(--_alpha-falloff), 5))),
    -.1px 35.4px 32.4px -3.3px oklch(from var(--_shadow-color) l c h /
      calc(alpha * pow(var(--_alpha-falloff), 6))),
    -.2px 54.2px 49.6px -3.9px oklch(from var(--_shadow-color) l c h /
      calc(alpha * pow(var(--_alpha-falloff), 7)));
  box-shadow: var(--_shadow-elevation-high);
}

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

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

  .grow {
    flex-grow: 1;
  }

  .shrink {
    flex-shrink: 1;
  }

  .flex-1 {
    flex: 1;
  }

  .nowrap {
    flex-wrap: nowrap;
  }

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

@layer align {
  .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;
  }

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

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

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

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