@font-face {
  font-display: swap;
  font-family: "CircularXX";
  src: url("circular-xx/black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-display: swap;
  font-family: "CircularXX";
  src: url("circular-xx/black-italic.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
}

@font-face {
  font-display: swap;
  font-family: "CircularXX";
  src: url("circular-xx/bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-display: swap;
  font-family: "CircularXX";
  src: url("circular-xx/bold-italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-display: swap;
  font-family: "CircularXX";
  src: url("circular-xx/extra-black.woff2") format("woff2");
  font-weight: 950;
  font-style: normal;
}

@font-face {
  font-display: swap;
  font-family: "CircularXX";
  src: url("circular-xx/extra-black-italic.woff2") format("woff2");
  font-weight: 950;
  font-style: italic;
}

@font-face {
  font-display: swap;
  font-family: "CircularXX";
  src: url("circular-xx/italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-display: swap;
  font-family: "CircularXX";
  src: url("circular-xx/regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

:root {
  --ds-font-sans: "CircularXX", system-ui, -apple-system, sans-serif;
  --ds-font-mono: "Fira Code", "Source Code Pro", "Courier New", monospace;

  --ds-font-size-4xs: 0.6rem;
  --ds-font-size-3xs: 0.8rem;
  --ds-font-size-2xs: 0.9rem;
  --ds-font-size-xs: 1rem;
  --ds-font-size-sm: 1.1rem;
  --ds-font-size-md: 1.3rem;
  --ds-font-size-lg: 1.5rem;
  --ds-font-size-xl: 1.8rem;
  --ds-font-size-2xl: 2rem;
  --ds-font-size-3xl: 3rem;
  --ds-font-size-max: 4rem;

  --ds-font-weight-black: 900;
  --ds-font-weight-bold: 700;
  --ds-font-weight-extra-black: 950;
  --ds-font-weight-regular: 400;

  --ds-line-height-xs: 1.08;
  --ds-line-height-sm: 1.16;
  --ds-line-height-md: 1.24;
  --ds-line-height-lg: 1.32;
}

html {
  -webkit-text-size-adjust: 100%;
  font-family: var(--ds-font-sans);
  font-optical-sizing: auto;
  font-size: 100%;
  font-synthesis: none;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
}

body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: inherit;
  font-size: var(--ds-font-size-xs);
  font-weight: var(--ds-font-weight-regular);
  line-height: var(--ds-line-height-lg);
  margin: 0;
  scrollbar-gutter: stable;
}

* {
  font-family: var(--ds-font-sans);
}

code, pre, kbd, samp, var {
  font-family: var(--ds-font-mono);
}

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

.ds-display-lg {
  font-weight: var(--ds-font-weight-extra-black);
  font-size: var(--ds-font-size-max);
  line-height: var(--ds-line-height-xs);
}

@media (max-width: 767px) {
  .ds-display-lg {
    font-size: var(--ds-font-size-2xl);
    line-height: var(--ds-line-height-sm);
  }
}

.ds-display-md {
  font-weight: var(--ds-font-weight-black);
  font-size: var(--ds-font-size-max);
  line-height: var(--ds-line-height-xs);
}

@media (max-width: 767px) {
  .ds-display-md {
    font-weight: var(--ds-font-weight-bold);
    font-size: var(--ds-font-size-2xl);
    line-height: var(--ds-line-height-sm);
  }
}

.ds-big-text-lg {
  font-weight: var(--ds-font-weight-extra-black);
  font-size: var(--ds-font-size-3xl);
  line-height: var(--ds-line-height-xs);
}

@media (max-width: 767px) {
  .ds-big-text-lg {
    font-size: var(--ds-font-size-2xl);
    line-height: var(--ds-line-height-sm);
  }
}

.ds-big-text-md {
  font-weight: var(--ds-font-weight-black);
  font-size: var(--ds-font-size-3xl);
  line-height: var(--ds-line-height-xs);
}

@media (max-width: 767px) {
  .ds-big-text-md {
    font-weight: var(--ds-font-weight-bold);
    font-size: var(--ds-font-size-2xl);
    line-height: var(--ds-line-height-sm);
  }
}

.ds-big-text-sm {
  font-weight: var(--ds-font-weight-extra-black);
  font-size: var(--ds-font-size-2xl);
  line-height: var(--ds-line-height-sm);
}

@media (min-width: 1400px) {
  .ds-big-text-sm {
    font-size: var(--ds-font-size-3xl);
    line-height: var(--ds-line-height-xs);
  }
}

.ds-big-text-xs {
  font-weight: var(--ds-font-weight-bold);
  font-size: var(--ds-font-size-2xl);
  line-height: var(--ds-line-height-sm);
}

@media (min-width: 1400px) {
  .ds-big-text-xs {
    font-weight: var(--ds-font-weight-black);
    font-size: var(--ds-font-size-3xl);
    line-height: var(--ds-line-height-xs);
  }
}

.ds-title-lg {
  font-weight: var(--ds-font-weight-extra-black);
  font-size: var(--ds-font-size-2xl);
  line-height: var(--ds-line-height-xs);
}

@media (max-width: 767px) {
  .ds-title-lg {
    font-size: var(--ds-font-size-xl);
    line-height: var(--ds-line-height-sm);
  }
}

.ds-title-md {
  font-weight: var(--ds-font-weight-black);
  font-size: var(--ds-font-size-2xl);
  line-height: var(--ds-line-height-xs);
}

@media (max-width: 767px) {
  .ds-title-md {
    font-size: var(--ds-font-size-xl);
    line-height: var(--ds-line-height-sm);
  }
}

.ds-title-sm {
  font-weight: var(--ds-font-weight-bold);
  font-size: var(--ds-font-size-2xl);
  line-height: var(--ds-line-height-xs);
}

@media (max-width: 767px) {
  .ds-title-sm {
    font-size: var(--ds-font-size-xl);
    line-height: var(--ds-line-height-sm);
  }
}

.ds-title-xs {
  font-weight: var(--ds-font-weight-extra-black);
  font-size: var(--ds-font-size-xl);
  line-height: var(--ds-line-height-sm);
}

@media (min-width: 1400px) {
  .ds-title-xs {
    font-size: var(--ds-font-size-2xl);
    line-height: var(--ds-line-height-xs);
  }
}

.ds-title-2xs {
  font-weight: var(--ds-font-weight-bold);
  font-size: var(--ds-font-size-xl);
  line-height: var(--ds-line-height-sm);
}

@media (min-width: 1400px) {
  .ds-title-2xs {
    font-weight: var(--ds-font-weight-black);
    font-size: var(--ds-font-size-2xl);
    line-height: var(--ds-line-height-xs);
  }
}

.ds-title-3xs {
  font-weight: var(--ds-font-weight-extra-black);
  font-size: var(--ds-font-size-lg);
  line-height: var(--ds-line-height-md);
}

.ds-title-4xs {
  font-weight: var(--ds-font-weight-bold);
  font-size: var(--ds-font-size-lg);
  line-height: var(--ds-line-height-md);
}

.ds-title-5xs {
  font-weight: var(--ds-font-weight-extra-black);
  font-size: var(--ds-font-size-md);
  line-height: var(--ds-line-height-md);
}

.ds-title-6xs {
  font-weight: var(--ds-font-weight-bold);
  font-size: var(--ds-font-size-md);
  line-height: var(--ds-line-height-md);
}

.ds-large-lg {
  font-weight: var(--ds-font-weight-bold);
  font-size: var(--ds-font-size-sm);
  line-height: var(--ds-line-height-lg);
}

.ds-large-md {
  font-weight: var(--ds-font-weight-regular);
  font-size: var(--ds-font-size-sm);
  line-height: var(--ds-line-height-lg);
}

.ds-body-lg {
  font-weight: var(--ds-font-weight-extra-black);
  font-size: var(--ds-font-size-xs);
  line-height: var(--ds-line-height-lg);
}

.ds-body-md {
  font-weight: var(--ds-font-weight-bold);
  font-size: var(--ds-font-size-xs);
  line-height: var(--ds-line-height-lg);
}

.ds-body-sm {
  font-weight: var(--ds-font-weight-regular);
  font-size: var(--ds-font-size-xs);
  line-height: var(--ds-line-height-lg);
}

.ds-body-xs {
  font-weight: var(--ds-font-weight-bold);
  font-size: var(--ds-font-size-2xs);
  line-height: var(--ds-line-height-lg);
}

.ds-body-2xs {
  font-weight: var(--ds-font-weight-extra-black);
  font-size: var(--ds-font-size-2xs);
  line-height: var(--ds-line-height-lg);
}

.ds-small-lg {
  font-weight: var(--ds-font-weight-bold);
  font-size: var(--ds-font-size-3xs);
  line-height: var(--ds-line-height-lg);
}

.ds-small-md {
  font-weight: var(--ds-font-weight-regular);
  font-size: var(--ds-font-size-3xs);
  line-height: var(--ds-line-height-lg);
}

.ds-caption-lg {
  font-weight: var(--ds-font-weight-bold);
  font-size: var(--ds-font-size-4xs);
  line-height: var(--ds-line-height-lg);
}

.ds-caption-md {
  font-weight: var(--ds-font-weight-regular);
  font-size: var(--ds-font-size-4xs);
  line-height: var(--ds-line-height-lg);
}