:root {
  --black-a1: #0000000d;
  --black-a2: #0000001a;
  --black-a3: #00000026;
  --black-a4: #0003;
  --black-a5: #0000004d;
  --black-a6: #0006;
  --black-a7: #00000080;
  --black-a8: #0009;
  --black-a9: #000000b3;
  --black-a10: #000c;
  --black-a11: #000000e6;
  --black-a12: #000000f2;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --black-a1: color(display-p3 0 0 0 / .05);
      --black-a2: color(display-p3 0 0 0 / .1);
      --black-a3: color(display-p3 0 0 0 / .15);
      --black-a4: color(display-p3 0 0 0 / .2);
      --black-a5: color(display-p3 0 0 0 / .3);
      --black-a6: color(display-p3 0 0 0 / .4);
      --black-a7: color(display-p3 0 0 0 / .5);
      --black-a8: color(display-p3 0 0 0 / .6);
      --black-a9: color(display-p3 0 0 0 / .7);
      --black-a10: color(display-p3 0 0 0 / .8);
      --black-a11: color(display-p3 0 0 0 / .9);
      --black-a12: color(display-p3 0 0 0 / .95);
    }
  }
}

:root {
  --white-a1: #ffffff0d;
  --white-a2: #ffffff1a;
  --white-a3: #ffffff26;
  --white-a4: #fff3;
  --white-a5: #ffffff4d;
  --white-a6: #fff6;
  --white-a7: #ffffff80;
  --white-a8: #fff9;
  --white-a9: #ffffffb3;
  --white-a10: #fffc;
  --white-a11: #ffffffe6;
  --white-a12: #fffffff2;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --white-a1: color(display-p3 1 1 1 / .05);
      --white-a2: color(display-p3 1 1 1 / .1);
      --white-a3: color(display-p3 1 1 1 / .15);
      --white-a4: color(display-p3 1 1 1 / .2);
      --white-a5: color(display-p3 1 1 1 / .3);
      --white-a6: color(display-p3 1 1 1 / .4);
      --white-a7: color(display-p3 1 1 1 / .5);
      --white-a8: color(display-p3 1 1 1 / .6);
      --white-a9: color(display-p3 1 1 1 / .7);
      --white-a10: color(display-p3 1 1 1 / .8);
      --white-a11: color(display-p3 1 1 1 / .9);
      --white-a12: color(display-p3 1 1 1 / .95);
    }
  }
}

:where(:root) {
  --color-background: white;
  --color-overlay: var(--black-a6);
  --color-surface: #ffffffd9;
}

:is(.dark, .dark-theme) {
  --color-background: var(--neutral-1);
  --color-overlay: var(--black-a8);
  --color-surface: #00000040;
}

:where(:root) {
  --color-transparent: #0000;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --color-transparent: color(display-p3 0 0 0 / 0);
    }
  }
}

:where(.light, .light-theme) {
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
}

:where(.dark, .dark-theme) {
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
}

:root, [data-accent]:where(:not([data-accent=""], [data-accent="gray"])) {
  --focus-1: var(--accent-1);
  --focus-2: var(--accent-2);
  --focus-3: var(--accent-3);
  --focus-4: var(--accent-4);
  --focus-5: var(--accent-5);
  --focus-6: var(--accent-6);
  --focus-7: var(--accent-7);
  --focus-8: var(--accent-8);
  --focus-9: var(--accent-9);
  --focus-10: var(--accent-10);
  --focus-11: var(--accent-11);
  --focus-12: var(--accent-12);
  --focus-a1: var(--accent-a1);
  --focus-a2: var(--accent-a2);
  --focus-a3: var(--accent-a3);
  --focus-a4: var(--accent-a4);
  --focus-a5: var(--accent-a5);
  --focus-a6: var(--accent-a6);
  --focus-a7: var(--accent-a7);
  --focus-a8: var(--accent-a8);
  --focus-a9: var(--accent-a9);
  --focus-a10: var(--accent-a10);
  --focus-a11: var(--accent-a11);
  --focus-a12: var(--accent-a12);
}

::selection {
  background-color: var(--focus-a5);
}

:root {
  color: var(--neutral-12);
}

:where([data-surface="page"]) {
  background-color: var(--color-background);
}

:where(:root) {
  --scaling: 1;
}

:where([data-scaling="xs"]) {
  --scaling: .9;
}

:where([data-scaling="sm"]) {
  --scaling: .95;
}

:where([data-scaling="md"]) {
  --scaling: 1;
}

:where([data-scaling="lg"]) {
  --scaling: 1.05;
}

:where([data-scaling="xl"]) {
  --scaling: 1.1;
}

:where(:root) {
  --space-1: calc(4px * var(--scaling));
  --space-2: calc(8px * var(--scaling));
  --space-3: calc(12px * var(--scaling));
  --space-4: calc(16px * var(--scaling));
  --space-5: calc(24px * var(--scaling));
  --space-6: calc(32px * var(--scaling));
  --space-7: calc(40px * var(--scaling));
  --space-8: calc(48px * var(--scaling));
  --space-9: calc(64px * var(--scaling));
}

:where(:root), [data-radius] {
  --radius-1: calc(3px * var(--scaling) * var(--radius-factor));
  --radius-2: calc(4px * var(--scaling) * var(--radius-factor));
  --radius-3: calc(6px * var(--scaling) * var(--radius-factor));
  --radius-4: calc(8px * var(--scaling) * var(--radius-factor));
  --radius-5: calc(12px * var(--scaling) * var(--radius-factor));
  --radius-6: calc(16px * var(--scaling) * var(--radius-factor));
}

:where(:root), [data-radius="medium"] {
  --radius-factor: 1;
  --radius-pill: 0px;
  --radius-thumb: 9999px;
}

[data-radius="none"] {
  --radius-factor: 0;
  --radius-pill: 0px;
  --radius-thumb: .5px;
}

[data-radius="small"] {
  --radius-factor: .75;
  --radius-pill: 0px;
  --radius-thumb: .5px;
}

[data-radius="large"] {
  --radius-factor: 1.5;
  --radius-pill: 0px;
  --radius-thumb: 9999px;
}

[data-radius="pill"] {
  --radius-factor: 1.5;
  --radius-pill: 9999px;
  --radius-thumb: 9999px;
}

:where(:root) {
  --font-size-1: calc(12px * var(--scaling));
  --font-size-2: calc(14px * var(--scaling));
  --font-size-3: calc(16px * var(--scaling));
  --font-size-4: calc(18px * var(--scaling));
  --font-size-5: calc(20px * var(--scaling));
  --font-size-6: calc(24px * var(--scaling));
  --font-size-7: calc(28px * var(--scaling));
  --font-size-8: calc(35px * var(--scaling));
  --font-size-9: calc(60px * var(--scaling));
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --line-height-1: calc(16px * var(--scaling));
  --line-height-2: calc(20px * var(--scaling));
  --line-height-3: calc(24px * var(--scaling));
  --line-height-4: calc(26px * var(--scaling));
  --line-height-5: calc(28px * var(--scaling));
  --line-height-6: calc(30px * var(--scaling));
  --line-height-7: calc(36px * var(--scaling));
  --line-height-8: calc(40px * var(--scaling));
  --line-height-9: calc(60px * var(--scaling));
  --letter-spacing-1: .0025em;
  --letter-spacing-2: 0em;
  --letter-spacing-3: 0em;
  --letter-spacing-4: -.0025em;
  --letter-spacing-5: -.005em;
  --letter-spacing-6: -.00625em;
  --letter-spacing-7: -.0075em;
  --letter-spacing-8: -.01em;
  --letter-spacing-9: -.025em;
  --default-font-family: -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", system-ui,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --default-font-size: var(--font-size-3);
  --default-font-style: normal;
  --default-font-weight: var(--font-weight-regular);
  --default-line-height: 1.5;
  --default-letter-spacing: 0em;
  --default-leading-trim-start: .42em;
  --default-leading-trim-end: .36em;
  --heading-font-family: var(--default-font-family);
  --heading-font-size-adjust: 1;
  --heading-font-style: normal;
  --heading-leading-trim-start: var(--default-leading-trim-start);
  --heading-leading-trim-end: var(--default-leading-trim-end);
  --heading-letter-spacing: 0em;
  --heading-line-height-1: calc(16px * var(--scaling));
  --heading-line-height-2: calc(18px * var(--scaling));
  --heading-line-height-3: calc(22px * var(--scaling));
  --heading-line-height-4: calc(24px * var(--scaling));
  --heading-line-height-5: calc(26px * var(--scaling));
  --heading-line-height-6: calc(30px * var(--scaling));
  --heading-line-height-7: calc(36px * var(--scaling));
  --heading-line-height-8: calc(40px * var(--scaling));
  --heading-line-height-9: calc(60px * var(--scaling));
  --code-font-family: "Menlo", "Bitstream Vera Sans Mono", monospace, "Apple Color Emoji",
    "Segoe UI Emoji";
  --code-font-size-adjust: .95;
  --code-font-style: normal;
  --code-font-weight: inherit;
  --code-letter-spacing: -.007em;
  --code-padding-top: .1em;
  --code-padding-bottom: .1em;
  --code-padding-left: .25em;
  --code-padding-right: .25em;
  --strong-font-family: var(--default-font-family);
  --strong-font-size-adjust: 1;
  --strong-font-style: inherit;
  --strong-font-weight: var(--font-weight-bold);
  --strong-letter-spacing: 0em;
  --em-font-family: "Times New Roman", "Times", serif;
  --em-font-size-adjust: 1.18;
  --em-font-style: italic;
  --em-font-weight: inherit;
  --em-letter-spacing: -.025em;
  --quote-font-family: "Times New Roman", "Times", serif;
  --quote-font-size-adjust: 1.18;
  --quote-font-style: italic;
  --quote-font-weight: inherit;
  --quote-letter-spacing: -.025em;
  --tab-active-letter-spacing: -.01em;
  --tab-active-word-spacing: 0em;
  --tab-inactive-letter-spacing: 0em;
  --tab-inactive-word-spacing: 0em;
  overflow-wrap: break-word;
  font-family: var(--default-font-family);
  font-size: var(--default-font-size);
  font-weight: var(--default-font-weight);
  font-style: var(--default-font-style);
  line-height: var(--default-line-height);
  letter-spacing: var(--default-letter-spacing);
  -moz-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  --shadow-1: inset 0 0 0 1px var(--neutral-a5),
    inset 0 1.5px 2px 0 var(--neutral-a2),
    inset 0 1.5px 2px 0 var(--black-a2);
  --shadow-2: 0 0 0 1px var(--neutral-a3),
    0 0 0 .5px var(--black-a1),
    0 1px 1px 0 var(--neutral-a2),
    0 2px 1px -1px var(--black-a1),
    0 1px 3px 0 var(--black-a1);
  --shadow-3: 0 0 0 1px var(--neutral-a3),
    0 2px 3px -2px var(--neutral-a3),
    0 3px 12px -4px var(--black-a2),
    0 4px 16px -8px var(--black-a2);
  --shadow-4: 0 0 0 1px var(--neutral-a3),
    0 8px 40px var(--black-a1),
    0 12px 32px -16px var(--neutral-a3);
  --shadow-5: 0 0 0 1px var(--neutral-a3),
    0 12px 60px var(--black-a3),
    0 12px 32px -16px var(--neutral-a5);
  --shadow-6: 0 0 0 1px var(--neutral-a3),
    0 12px 60px var(--black-a3),
    0 16px 64px var(--neutral-a2),
    0 16px 36px -20px var(--neutral-a7);
}

@supports (color: color-mix(in oklab, white, black)) {
  :where(:root) {
    --shadow-1: inset 0 0 0 1px var(--neutral-a5),
      inset 0 1.5px 2px 0 var(--neutral-a2),
      inset 0 1.5px 2px 0 var(--black-a2);
    --shadow-2: 0 0 0 1px color-mix(in oklab, var(--neutral-a3), var(--neutral-3) 25%),
      0 0 0 .5px var(--black-a1),
      0 1px 1px 0 var(--neutral-a2),
      0 2px 1px -1px var(--black-a1),
      0 1px 3px 0 var(--black-a1);
    --shadow-3: 0 0 0 1px color-mix(in oklab, var(--neutral-a3), var(--neutral-3) 25%),
      0 2px 3px -2px var(--neutral-a3),
      0 3px 12px -4px var(--black-a2),
      0 4px 16px -8px var(--black-a2);
    --shadow-4: 0 0 0 1px color-mix(in oklab, var(--neutral-a3), var(--neutral-3) 25%),
      0 8px 40px var(--black-a1),
      0 12px 32px -16px var(--neutral-a3);
    --shadow-5: 0 0 0 1px color-mix(in oklab, var(--neutral-a3), var(--neutral-3) 25%),
      0 12px 60px var(--black-a3),
      0 12px 32px -16px var(--neutral-a5);
    --shadow-6: 0 0 0 1px color-mix(in oklab, var(--neutral-a3), var(--neutral-3) 25%),
      0 12px 60px var(--black-a3),
      0 16px 64px var(--neutral-a2),
      0 16px 36px -20px var(--neutral-a7);
  }
}

:is(.dark, .dark-theme) {
  --shadow-1: inset 0 -1px 1px 0 var(--neutral-a3),
    inset 0 0 0 1px var(--neutral-a3),
    inset 0 3px 4px 0 var(--black-a5),
    inset 0 0 0 1px var(--neutral-a4);
  --shadow-2: 0 0 0 1px var(--neutral-a6),
    0 0 0 .5px var(--black-a3),
    0 1px 1px 0 var(--black-a6),
    0 2px 1px -1px var(--black-a6),
    0 1px 3px 0 var(--black-a5);
  --shadow-3: 0 0 0 1px var(--neutral-a6),
    0 2px 3px -2px var(--black-a3),
    0 3px 8px -2px var(--black-a6),
    0 4px 12px -4px var(--black-a7);
  --shadow-4: 0 0 0 1px var(--neutral-a6),
    0 8px 40px var(--black-a3),
    0 12px 32px -16px var(--black-a5);
  --shadow-5: 0 0 0 1px var(--neutral-a6),
    0 12px 60px var(--black-a5),
    0 12px 32px -16px var(--black-a7);
  --shadow-6: 0 0 0 1px var(--neutral-a6),
    0 12px 60px var(--black-a4),
    0 16px 64px var(--black-a6),
    0 16px 36px -20px var(--black-a11);
}

@supports (color: color-mix(in oklab, white, black)) {
  :is(.dark, .dark-theme) {
    --shadow-1: inset 0 -1px 1px 0 var(--neutral-a3),
      inset 0 0 0 1px var(--neutral-a3),
      inset 0 3px 4px 0 var(--black-a5),
      inset 0 0 0 1px var(--neutral-a4);
    --shadow-2: 0 0 0 1px color-mix(in oklab, var(--neutral-a6), var(--neutral-6) 25%),
      0 0 0 .5px var(--black-a3),
      0 1px 1px 0 var(--black-a6),
      0 2px 1px -1px var(--black-a6),
      0 1px 3px 0 var(--black-a5);
    --shadow-3: 0 0 0 1px color-mix(in oklab, var(--neutral-a6), var(--neutral-6) 25%),
      0 2px 3px -2px var(--black-a3),
      0 3px 8px -2px var(--black-a6),
      0 4px 12px -4px var(--black-a7);
    --shadow-4: 0 0 0 1px color-mix(in oklab, var(--neutral-a6), var(--neutral-6) 25%),
      0 8px 40px var(--black-a3),
      0 12px 32px -16px var(--black-a5);
    --shadow-5: 0 0 0 1px color-mix(in oklab, var(--neutral-a6), var(--neutral-6) 25%),
      0 12px 60px var(--black-a5),
      0 12px 32px -16px var(--black-a7);
    --shadow-6: 0 0 0 1px color-mix(in oklab, var(--neutral-a6), var(--neutral-6) 25%),
      0 12px 60px var(--black-a4),
      0 16px 64px var(--black-a6),
      0 16px 36px -20px var(--black-a11);
  }
}

:where(:root) {
  --color-material-solid: white;
  --color-material-translucent: #ffffffb3;
}

:is(.dark, .dark-theme) {
  --color-material-solid: var(--neutral-2);
  --color-material-translucent: var(--black-a7);
}

:where([data-material-background="solid"]) {
  --color-material: var(--color-material-solid);
  --backdrop-filter-material: none;
}

:where([data-material-background="translucent"]) {
  --color-material: var(--color-material-translucent);
  --backdrop-filter-material: blur(64px);
}

:where(:root) {
  --cursor-button: default;
  --cursor-checkbox: default;
  --cursor-disabled: not-allowed;
  --cursor-link: pointer;
  --cursor-menu-item: default;
  --cursor-radio: default;
  --cursor-slider-thumb: default;
  --cursor-slider-thumb-active: default;
  --cursor-switch: default;
}

@layer unset {
  .unset:where(body, blockquote, dl, dd, figure, p) {
    margin: 0;
  }

  .unset:where(address, b, cite, code, dfn, em, i, kbd, q, samp, small, strong, var) {
    font: unset;
  }

  .unset:where(h1, h2, h3, h4, h5, h6) {
    font: unset;
    margin: 0;
  }

  .unset:where(a) {
    all: unset;
    -webkit-tap-highlight-color: transparent;
  }

  .unset:where(button, select, [type="button"], [type="image"], [type="reset"], [type="submit"], [type="checkbox"], [type="color"], [type="radio"], [type="range"]) {
    all: unset;
    text-indent: initial;
    -webkit-tap-highlight-color: transparent;
    font-style: normal;
    font-weight: normal;
    display: inline-block;
  }

  .unset:where(label) {
    -webkit-tap-highlight-color: transparent;
  }

  .unset:where(dialog, [popover]) {
    box-sizing: border-box;
    background: none;
    border: 0;
    outline: none;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    position: fixed;
    inset: auto;
    overflow: visible;
  }

  .unset:where(select) {
    text-align: start;
    font-style: normal;
    font-weight: normal;
  }

  .unset:where(textarea, input:not([type="button"], [type="image"], [type="reset"], [type="submit"], [type="checkbox"], [type="color"], [type="radio"], [type="range"])) {
    all: unset;
    text-align: start;
    width: -webkit-fill-available;
    width: -moz-available;
    width: stretch;
    text-indent: initial;
    -webkit-tap-highlight-color: transparent;
    cursor: text;
    white-space: pre-wrap;
    font-style: normal;
    font-weight: normal;
    display: block;
  }

  .unset:where(:focus) {
    outline: none;
  }

  .unset::placeholder {
    color: unset;
    opacity: unset;
    -webkit-user-select: none;
    user-select: none;
  }

  .unset:where(table) {
    all: unset;
    text-indent: initial;
    display: table;
  }

  .unset:where(caption) {
    text-align: inherit;
  }

  .unset:where(td) {
    padding: 0;
  }

  .unset:where(th) {
    font-weight: unset;
    text-align: inherit;
    padding: 0;
  }

  .unset:where(abbr, acronym) {
    text-decoration: none;
  }

  .unset:where(canvas, object, picture, summary) {
    display: block;
  }

  .unset:where(del, s) {
    -webkit-text-decoration: unset;
    text-decoration: unset;
  }

  .unset:where(fieldset, hr) {
    all: unset;
    display: block;
  }

  .unset:where(legend) {
    cursor: default;
    border: none;
    padding: 0;
  }

  .unset:where(li) {
    text-align: unset;
    display: block;
  }

  .unset:where(ol, ul) {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .unset:where(iframe) {
    width: -webkit-fill-available;
    width: -moz-available;
    border: none;
    width: stretch;
    display: block;
  }

  .unset:where(ins, u) {
    text-decoration: none;
  }

  .unset:where(img) {
    max-width: 100%;
    display: block;
  }

  .unset:where(svg) {
    flex-shrink: 0;
    max-width: 100%;
    display: block;
  }

  .unset:where(mark) {
    all: unset;
  }

  .unset:where(pre) {
    font: unset;
    margin: unset;
  }

  .unset:where(q):before, .unset:where(q):after {
    content: "";
  }

  .unset:where(sub, sup) {
    font: unset;
    vertical-align: unset;
  }

  .unset:where(details) ::marker {
    content: none;
  }

  .unset:where(summary)::marker {
    content: none;
  }

  .unset:where(video) {
    width: -webkit-fill-available;
    width: -moz-available;
    width: stretch;
    display: block;
  }

  .unset:where(:any-link) {
    cursor: var(--cursor-link);
  }

  .unset:where(button) {
    cursor: var(--cursor-button);
  }

  .unset:where(:disabled, [data-disabled]) {
    cursor: var(--cursor-disabled);
  }

  .unset:where(input[type="checkbox"]) {
    cursor: var(--cursor-checkbox);
  }

  .unset:where(input[type="radio"]) {
    cursor: var(--cursor-radio);
  }

  .unset, .unset:before, .unset:after {
    box-sizing: border-box;
  }
}