:where(html) {
  --link: var(--indigo-7);
  --link-visited: var(--purple-7);
  --text-1: var(--gray-12);
  --text-2: var(--gray-7);
  --surface-1: var(--gray-0);
  --surface-2: var(--gray-2);
  --surface-3: var(--gray-3);
  --surface-4: var(--gray-4);
  --scrollthumb-color: var(--gray-7);
  -webkit-text-size-adjust: none;
  accent-color: var(--brand, var(--link));
  background-color: var(--surface-1);
  block-size: 100%;
  caret-color: var(--brand, var(--link));
  color: var(--text-1);
  color-scheme: light;
  font-family: var(--font-system-ui);
  line-height: var(--font-lineheight-3);
  scrollbar-color: var(--scrollthumb-color) transparent;
}
@media (dynamic-range: high) or (color-gamut: p3) {
  @supports (color: color(display-p3 0 0 0)) {
    :where(html) {
      --link: color(display-p3 .1 0.4 1);
      --link-visited: color(display-p3 .6 0.2 1);
    }
  }
}
:where(html) :where(dialog) {
  background-color: var(--surface-1);
}
:where(html) :where(button, .btn) {
  --_highlight: var(--_highlight-light);
  --_bg: var(--_bg-light);
  --_ink-shadow: var(--_ink-shadow-light);
}
:where(html) :where(button, .btn) :where([type="reset"]) {
  --_text: var(--red-6);
  --_border: var(--red-3);
}
:where(html)
  :where(
    button,
    .btn,
    input:is([type="button"], [type="submit"], [type="reset"])
  )[disabled] {
  --_text: var(--gray-6);
}
:where(html)
  :where(
    textarea,
    select,
    input:not([type="button"], [type="submit"], [type="reset"])
  ) {
  background-color: var(--surface-2);
}
@media (prefers-color-scheme: dark) {
  :where(html) {
    --link: var(--indigo-3);
    --link-visited: var(--purple-3);
    --text-1: var(--gray-1);
    --text-2: var(--gray-4);
    --surface-1: var(--gray-9);
    --surface-2: var(--gray-8);
    --surface-3: var(--gray-7);
    --surface-4: var(--gray-6);
    --scrollthumb-color: var(--gray-6);
    --shadow-strength: 10%;
    --shadow-color: 220 40% 2%;
    color-scheme: dark;
  }
}
:where(a[href]) {
  color: var(--brand, var(--link));
}
:where(a[href]):where(:visited) {
  color: var(--link-visited);
}
:focus-visible {
  outline-color: var(--brand, var(--link));
}
*, :after, :before {
  box-sizing: border-box;
}
:where(:not(dialog)) {
  margin: 0;
}
:where(:not(fieldset, progress, meter)) {
  background-origin: border-box;
  background-repeat: no-repeat;
  border-style: solid;
  border-width: 0;
}
@media (prefers-reduced-motion: no-preference) {
  :where(html) {
    scroll-behavior: smooth;
  }
}
@media (prefers-reduced-motion: no-preference) {
  :where(:focus-visible) {
    transition: outline-offset 145ms var(--ease-2);
  }
  :where(:not(:active):focus-visible) {
    transition-duration: 0.25s;
  }
}
:where(:not(:active):focus-visible) {
  outline-offset: 5px;
}
:where(body) {
  min-block-size: 100%;
}
:where(h1, h2, h3, h4, h5, h6) {
  text-wrap: balance;
  font-weight: var(--font-weight-9);
  line-height: var(--font-lineheight-1);
}
:where(h1) {
  font-size: var(--font-size-8);
  max-inline-size: var(--size-header-1);
}
:where(h2) {
  font-size: var(--font-size-6);
  max-inline-size: var(--size-header-2);
}
:where(h3) {
  font-size: var(--font-size-5);
}
:where(h4) {
  font-size: var(--font-size-4);
}
:where(h5) {
  font-size: var(--font-size-3);
}
:where(h3, h4, h5, h6, dt) {
  max-inline-size: var(--size-header-3);
}
:where(p, ul, ol, dl, h6) {
  font-size: var(--font-size-2);
}
:where(a, u, ins, abbr) {
  text-underline-offset: 1px;
}
@supports (-moz-appearance: none) {
  :where(a, u, ins, abbr) {
    text-underline-offset: 2px;
  }
}
:where(
  a[href],
  area,
  button,
  input:not(
    [type="text"],
    [type="email"],
    [type="number"],
    [type="password"],
    [type=""],
    [type="tel"],
    [type="url"]
  ),
  label[for],
  select,
  summary,
  [tabindex]:not([tabindex*="-"], pre)
) {
  cursor: pointer;
}
:where(
  a[href],
  area,
  button,
  input,
  label[for],
  select,
  summary,
  textarea,
  [tabindex]:not([tabindex*="-"])
) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
:where(a):where([href]) {
  text-decoration-color: var(--indigo-2);
}
:where(a):where([href]):where(:visited) {
  text-decoration-color: var(--purple-2);
}
:where(a):where(:not(:hover)) {
  text-decoration: inherit;
}
:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block;
}
:where(img, svg, video) {
  block-size: auto;
  max-inline-size: 100%;
}
:where(input, button, textarea, select),
:where(input[type="file"])::-webkit-file-upload-button {
  color: inherit;
  font: inherit;
  font-size: inherit;
  letter-spacing: inherit;
}
::placeholder {
  color: var(--gray-7);
  opacity: 0.75;
}
:where(input:not([type="range"]), textarea) {
  padding-block: var(--size-1);
  padding-inline: var(--size-2);
}
:where(select) {
  padding-block: 0.75ch;
  padding-inline: var(--size-relative-4) 0;
}
:where(
  textarea,
  select,
  input:not([type="button"], [type="submit"], [type="reset"])
) {
  background-color: var(--surface-2);
  border-radius: var(--radius-2);
}
:where(textarea) {
  resize: block;
}
:where(input[type="checkbox"], input[type="radio"]) {
  block-size: var(--size-3);
  inline-size: var(--size-3);
}
:where(svg:not([width])) {
  inline-size: var(--size-10);
}
:where(code, kbd, samp, pre) {
  font-family:
    var(--font-monospace-code), monospace;
}
:where(:not(pre) > code, kbd) {
  white-space: nowrap;
}
:where(pre) {
  direction: ltr;
  max-inline-size: max-content;
  min-inline-size: 0;
  white-space: pre;
  writing-mode: lr;
}
:where(:not(pre) > code) {
  background: var(--surface-2);
  border-radius: var(--radius-2);
  padding: var(--size-1) var(--size-2);
  writing-mode: lr;
}
:where(kbd, var) {
  border-color: var(--surface-4);
  border-radius: var(--radius-2);
  border-width: var(--border-size-1);
  padding: var(--size-1) var(--size-2);
}
:where(mark) {
  border-radius: var(--radius-2);
  padding-inline: var(--size-1);
}
:where(ol, ul) {
  padding-inline-start: var(--size-8);
}
:where(li) {
  padding-inline-start: var(--size-2);
}
:where(li, dd, figcaption) {
  max-inline-size: var(--size-content-2);
}
:where(p) {
  text-wrap: pretty;
  max-inline-size: var(--size-content-3);
}
:where(dt, summary) {
  font-weight: var(--font-weight-7);
}
:where(dt:not(:first-of-type)) {
  margin-block-start: var(--size-5);
}
:where(small) {
  font-size: max(0.5em, var(--font-size-0));
  max-inline-size: var(--size-content-1);
}
:where(hr) {
  background-color: var(--surface-3);
  height: var(--border-size-2);
  margin-block: var(--size-fluid-5);
}
:where(figure) {
  display: grid;
  gap: var(--size-2);
  place-items: center;
}
:where(figure) > :where(figcaption) {
  text-wrap: balance;
  font-size: var(--font-size-1);
}
:where(blockquote, :not(blockquote) > cite) {
  border-inline-start-width: var(--border-size-3);
}
:where(blockquote) {
  display: grid;
  gap: var(--size-3);
  max-inline-size: var(--size-content-2);
  padding-block: var(--size-3);
  padding-inline: var(--size-4);
}
:where(:not(blockquote) > cite) {
  padding-inline-start: var(--size-2);
}
:where(summary) {
  background: var(--surface-3);
  border-radius: var(--radius-2);
  margin: calc(var(--size-2) * -1) calc(var(--size-3) * -1);
  padding: var(--size-2) var(--size-3);
}
:where(details) {
  background: var(--surface-2);
  border-radius: var(--radius-2);
  padding-block: var(--size-2);
  padding-inline: var(--size-3);
}
:where(details[open] > summary) {
  border-end-end-radius: 0;
  border-end-start-radius: 0;
  margin-bottom: var(--size-2);
}
:where(fieldset) {
  border: var(--border-size-1) solid var(--surface-4);
  border-radius: var(--radius-2);
}
:where(del) {
  background: var(--red-9);
  color: var(--red-2);
}
:where(ins) {
  background: var(--green-9);
  color: var(--green-1);
}
:where(abbr) {
  text-decoration-color: var(--blue-5);
}
:where(dialog) {
  background-color: var(--surface-1);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-6);
  color: inherit;
}
:where(menu) {
  display: flex;
  gap: var(--size-3);
  padding-inline-start: 0;
}
:where(sup) {
  font-size: 0.5em;
}
:where(table) {
  --nice-inner-radius: calc(var(--radius-3) - 2px);
  background: var(--surface-2);
  border: 1px solid var(--surface-2);
  border-radius: var(--radius-3);
  width: fit-content;
}
:where(table[\:not-has\(tfoot\)] tr:last-child td:first-child) {
  border-end-start-radius: var(--nice-inner-radius);
}
:where(table:not(:has(tfoot)) tr:last-child td:first-child) {
  border-end-start-radius: var(--nice-inner-radius);
}
:where(table[\:not-has\(tfoot\)] tr:last-child td:last-child) {
  border-end-end-radius: var(--nice-inner-radius);
}
:where(table:not(:has(tfoot)) tr:last-child td:last-child) {
  border-end-end-radius: var(--nice-inner-radius);
}
:where(table thead tr:first-child th:first-child) {
  border-start-start-radius: var(--nice-inner-radius);
}
:where(table thead tr:first-child th:last-child) {
  border-start-end-radius: var(--nice-inner-radius);
}
:where(tfoot tr:last-child :is(th, td):first-of-type) {
  border-end-start-radius: var(--nice-inner-radius);
}
:where(tfoot tr:last-child :is(th, td):last-of-type) {
  border-end-end-radius: var(--nice-inner-radius);
}
:where(th) {
  background-color: var(--surface-2);
  color: var(--text-1);
}
:where(table :is(a, button, [contenteditable]):is(:focus-visible)) {
  outline-offset: -2px;
}
:where(td) {
  text-wrap: pretty;
  background: var(--surface-1);
  max-inline-size: var(--size-content-2);
}
:where(td, th) {
  padding: var(--size-2);
  text-align: left;
}
:where(:is(td, th):not([align])) {
  text-align: center;
}
:where(thead) {
  border-collapse: collapse;
}
:where(table tr:hover td), :where(tbody tr:nth-child(2n):hover td) {
  background-color: var(--gray-10);
}
@media (prefers-color-scheme: light) {
  :where(table tr:hover td), :where(tbody tr:nth-child(2n):hover td) {
    background-color: #fff;
  }
}
:where(table > caption) {
  margin: var(--size-3);
}
:where(tfoot button) {
  padding-block: var(--size-1);
  padding-inline: var(--size-3);
}
@media (prefers-color-scheme: dark) {
  :where(
    textarea,
    select,
    input:not([type="button"], [type="submit"], [type="reset"])
  ) {
    background-color: #171a1c;
  }
  :where(dialog) {
    background-color: var(--surface-2);
  }
  ::placeholder {
    color: var(--gray-6);
  }
}