:root {
  /* COLOR */

  color-scheme: light dark;

  --UI-Black: #000000;
  --UI-Gray: #8e8e93;
  --UI-Gray-2: light-dark(#a3a3b2, #636366);
  --UI-Gray-3: light-dark(#c7c7cc, #48484a);
  --UI-Gray-4: light-dark(#d1d1d6, #3a3a3c);
  --UI-Gray-5: light-dark(#e5e5ea, #2c2c2e);
  --UI-Gray-6: light-dark(#f2f2f7, #1c1c1e);
  --UI-White: #ffffff;

  --UI-Backgrounds-Primary: light-dark(#ffffff, #000000);
  --UI-Backgrounds-Tertiary: light-dark(#ffffff, #2c2c2e);
  --UI-Backgrounds-Secondary: light-dark(#f1f4f4, #1c1c1e);

  --Text-Primary: light-dark(var(--UI-Black), var(--UI-White));
  --Text-Secondary: light-dark(rgba(60, 60, 67, 0.6), rgba(235, 235, 245, 0.6));

  --Brand-Indexing-Green: #98f120;
  --Brand-Payments-Gradient: linear-gradient(
    180deg,
    #66dbda -5%,
    #e8f1e5 45%,
    #00ee49 70%,
    #e9ff21 97%
  );

  /* END COLOR */

  /* TYPOGRAPHY */

  --font-family-Everett: "TWK Everett";
  --font-family-Lausanne: "TWK Lausanne";

  --font-everett-weight-Book: "Book";
  --font-everett-weight-Medium: "Medium";
  --font-everett-weight-Bold: "Bold";

  --font-size-tiny: 14px;
  --font-size-xs: 16px;
  --font-size-sm: 18px;
  --font-size-md: 20px;
  --font-size-lg: 24px;
  --font-size-xl: 32px;
  --font-size-2xl: 40px;
  --font-size-3xl: 56px;
  --font-size-4xl: 72px;
  --font-size-Jumbo: 88px;
  --font-size-Body: 24px;

  --font-line-height-tiny: 18px;
  --font-line-height-xs: 20px;
  --font-line-height-sm: 20px;
  --font-line-height-md: 24px;
  --font-line-height-lg: 32px;
  --font-line-height-xl: 40px;
  --font-line-height-2xl: 56px;
  --font-line-height-3xl: 72px;
  --font-line-height-4xl: 82px;
  --font-line-height-Jumbo: 92px;
  --font-line-height-Body: 32px;

  --font-lausanne-weight-300: 300;
  --font-lausanne-weight-400: 400;
  --font-lausanne-weight-500: 500;
  --font-lausanne-weight-600: 600;

  /* END TYPOGRAPHY */
}

/* MOBILE VARIABLE OVERRIDES */

@media screen and (max-width: 768px) {
  :root {
    --font-size-tiny: 12px;
    --font-size-xs: 14px;
    --font-size-sm: 16px;
    --font-size-md: 18px;
    --font-size-lg: 20px;
    --font-size-xl: 24px;
    --font-size-2xl: 32px;
    --font-size-3xl: 40px;
    --font-size-4xl: 48px;
    --font-size-Jumbo: 56px;
    --font-size-Body: 18px;

    --font-line-height-tiny: 16px;
    --font-line-height-xs: 18px;
    --font-line-height-sm: 18px;
    --font-line-height-md: 20px;
    --font-line-height-lg: 24px;
    --font-line-height-xl: 32px;
    --font-line-height-2xl: 40px;
    --font-line-height-3xl: 50px;
    --font-line-height-4xl: 58px;
    --font-line-height-Jumbo: 60px;
    --font-line-height-Body: 28px;
  }
}

/* END MOBILE VARIABLE OVERRIDES */

/* FONTS */

/* TWK Everett */
@font-face {
  font-family: "TWK Everett";
  src: url("/assets/fonts/TWK_Everett/TWKEverett-Regular.woff2");
  src:
    url("/assets/fonts/TWK_Everett/TWKEverett-Regular.ttf") format("truetype"),
    url("/assets/fonts/TWK_Everett/TWKEverett-Regular.woff") format("woff"),
    url("/assets/fonts/TWK_Everett/TWKEverett-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "TWK Everett";
  src: url("/assets/fonts/TWK_Everett/TWKEverett-Italic.woff2");
  src:
    url("/assets/fonts/TWK_Everett/TWKEverett-Italic.ttf") format("truetype"),
    url("/assets/fonts/TWK_Everett/TWKEverett-Italic.woff") format("woff"),
    url("/assets/fonts/TWK_Everett/TWKEverett-Italic.woff2") format("woff2");
  font-style: italic;
}
@font-face {
  font-family: "TWK Everett Book";
  src: url("/assets/fonts/TWK_Everett/TWKEverett-Book.woff2");
  src:
    url("/assets/fonts/TWK_Everett/TWKEverett-Book.ttf") format("truetype"),
    url("/assets/fonts/TWK_Everett/TWKEverett-Book.woff") format("woff"),
    url("/assets/fonts/TWK_Everett/TWKEverett-Book.woff2") format("woff2");
}
@font-face {
  font-family: "TWK Everett Book";
  src: url("/assets/fonts/TWK_Everett/TWKEverett-BookItalic.woff2");
  src:
    url("/assets/fonts/TWK_Everett/TWKEverett-BookItalic.ttf")
      format("truetype"),
    url("/assets/fonts/TWK_Everett/TWKEverett-BookItalic.woff") format("woff"),
    url("/assets/fonts/TWK_Everett/TWKEverett-BookItalic.woff2") format("woff2");
  font-style: italic;
}
@font-face {
  font-family: "TWK Everett";
  src: url("/assets/fonts/TWK_Everett/TWKEverett-Bold.woff2");
  src:
    url("/assets/fonts/TWK_Everett/TWKEverett-Bold.ttf") format("truetype"),
    url("/assets/fonts/TWK_Everett/TWKEverett-Bold.woff") format("woff"),
    url("/assets/fonts/TWK_Everett/TWKEverett-Bold.woff2") format("woff2");
  font-weight: bold;
}
@font-face {
  font-family: "TWK Everett";
  src: url("/assets/fonts/TWK_Everett/TWKEverett-BoldItalic.woff2");
  src:
    url("/assets/fonts/TWK_Everett/TWKEverett-BoldItalic.ttf")
      format("truetype"),
    url("/assets/fonts/TWK_Everett/TWKEverett-BoldItalic.woff") format("woff"),
    url("/assets/fonts/TWK_Everett/TWKEverett-BoldItalic.woff2") format("woff2");
  font-weight: bold;
  font-style: italic;
}

/* TWK Lausanne */
@font-face {
  font-family: "TWK Lausanne";
  src: url("/assets/fonts/TWK_Lausanne/TWKLausanne-300.woff2");
  src:
    url("/assets/fonts/TWK_Lausanne/TWKLausanne-300.ttf") format("truetype"),
    url("/assets/fonts/TWK_Lausanne/TWKLausanne-300.woff") format("woff"),
    url("/assets/fonts/TWK_Lausanne/TWKLausanne-300.woff2") format("woff2");
  font-weight: 300;
}
@font-face {
  font-family: "TWK Lausanne";
  src: url("/assets/fonts/TWK_Lausanne/TWKLausanne-300Italic.woff2");
  src:
    url("/assets/fonts/TWK_Lausanne/TWKLausanne-300Italic.ttf")
      format("truetype"),
    url("/assets/fonts/TWK_Lausanne/TWKLausanne-300Italic.woff") format("woff"),
    url("/assets/fonts/TWK_Lausanne/TWKLausanne-300Italic.woff2")
      format("woff2");
  font-style: italic;
  font-weight: 300;
}
@font-face {
  font-family: "TWK Lausanne";
  src: url("/assets/fonts/TWK_Lausanne/TWKLausanne-400.woff2");
  src:
    url("/assets/fonts/TWK_Lausanne/TWKLausanne-400.ttf") format("truetype"),
    url("/assets/fonts/TWK_Lausanne/TWKLausanne-400.woff") format("woff"),
    url("/assets/fonts/TWK_Lausanne/TWKLausanne-400.woff2") format("woff2");
}
@font-face {
  font-family: "TWK Lausanne";
  src: url("/assets/fonts/TWK_Lausanne/TWKLausanne-400Italic.woff2");
  src:
    url("/assets/fonts/TWK_Lausanne/TWKLausanne-400Italic.ttf")
      format("truetype"),
    url("/assets/fonts/TWK_Lausanne/TWKLausanne-400Italic.woff") format("woff"),
    url("/assets/fonts/TWK_Lausanne/TWKLausanne-400Italic.woff2")
      format("woff2");
  font-style: italic;
}
@font-face {
  font-family: "TWK Lausanne";
  src: url("/assets/fonts/TWK_Lausanne/TWKLausanne-500.woff2");
  src:
    url("/assets/fonts/TWK_Lausanne/TWKLausanne-500.ttf") format("truetype"),
    url("/assets/fonts/TWK_Lausanne/TWKLausanne-500.woff") format("woff"),
    url("/assets/fonts/TWK_Lausanne/TWKLausanne-500.woff2") format("woff2");
  font-weight: 500;
}
@font-face {
  font-family: "TWK Lausanne";
  src: url("/assets/fonts/TWK_Lausanne/TWKLausanne-500Italic.woff2");
  src:
    url("/assets/fonts/TWK_Lausanne/TWKLausanne-500Italic.ttf")
      format("truetype"),
    url("/assets/fonts/TWK_Lausanne/TWKLausanne-500Italic.woff") format("woff"),
    url("/assets/fonts/TWK_Lausanne/TWKLausanne-500Italic.woff2")
      format("woff2");
  font-style: italic;
  font-weight: 500;
}
@font-face {
  font-family: "TWK Lausanne";
  src: url("/assets/fonts/TWK_Lausanne/TWKLausanne-700.woff2");
  src:
    url("/assets/fonts/TWK_Lausanne/TWKLausanne-700.ttf") format("truetype"),
    url("/assets/fonts/TWK_Lausanne/TWKLausanne-700.woff") format("woff"),
    url("/assets/fonts/TWK_Lausanne/TWKLausanne-700.woff2") format("woff2");
  font-weight: bold;
}
@font-face {
  font-family: "TWK Lausanne";
  src: url("/assets/fonts/TWK_Lausanne/TWKLausanne-700Italic.woff2");
  src:
    url("/assets/fonts/TWK_Lausanne/TWKLausanne-700Italic.ttf")
      format("truetype"),
    url("/assets/fonts/TWK_Lausanne/TWKLausanne-700Italic.woff") format("woff"),
    url("/assets/fonts/TWK_Lausanne/TWKLausanne-700Italic.woff2")
      format("woff2");
  font-weight: bold;
  font-style: italic;
}

/* Fire Code */
@font-face {
  font-family: "Fira Code";
  src: url("/assets/fonts/Fira_Code/FiraCode-VariableFont_wght.ttf");
}

/* END FONTS */

/* CLASSES */

.text-primary {
  color: var(--Text-Primary, #000);
}
.text-secondary {
  color: var(--Text-Secondary, rgba(60, 60, 67, 0.6));
}
.text-brand {
  color: var(--Brand-Indexing-Green);
}

.everett-xl {
  font-family: var(--font-family-Everett, "TWK Everett");
  font-size: var(--font-size-xl, 32px);
  font-style: normal;
  font-weight: 450;
  line-height: var(--font-line-height-xl, 40px); /* 125% */
  letter-spacing: -0.64px;
}
.everett-4xl {
  font-family: var(--font-family-Everett, "TWK Everett");
  font-size: var(--font-size-4xl, 72px);
  font-style: normal;
  font-weight: 450;
  line-height: var(--font-line-height-4xl, 82px); /* 113.889% */
  letter-spacing: -1.44px;
}

.lausanne-body {
  font-family: var(--font-family-Lausanne, "TWK Lausanne");
  font-size: var(--font-size-Body, 24px);
  font-style: normal;
  font-weight: var(--font-lausanne-weight-400, 400);
  line-height: var(--font-line-height-Body, 32px); /* 133.333% */
  letter-spacing: -0.24px;
}
.lausanne-xs {
  font-family: var(--font-family-Lausanne, "TWK Lausanne");
  font-size: var(--font-size-tiny, 14px);
  font-style: normal;
  font-weight: var(--font-lausanne-weight-300, 300);
  line-height: var(--font-line-height-xs, 20px); /* 125% */
  letter-spacing: -0.16px;
}
.lausanne-sm {
  font-family: var(--font-family-Lausanne, "TWK Lausanne");
  font-size: var(--font-size-sm, 18px);
  font-style: normal;
  font-weight: var(--font-lausanne-weight-400, 400);
  line-height: var(--font-line-height-sm, 20px); /* 111.111% */
  letter-spacing: -0.18px;
}
.lausanne-md {
  font-family: var(--font-family-Lausanne, "TWK Lausanne");
  font-size: var(--font-size-md, 20px);
  font-style: normal;
  font-weight: var(--font-lausanne-weight-400, 400);
  line-height: var(--font-line-height-lg, 32px); /* 160% */
  letter-spacing: -0.2px;
}
.lausanne-lg {
  font-family: var(--font-family-Lausanne, "TWK Lausanne");
  font-size: 20px;
  font-style: normal;
  font-weight: 300;
  line-height: 24px;
  letter-spacing: -0.2px;
}
.lausanne-xl {
  font-family: var(--font-family-Lausanne, "TWK Lausanne");
  font-size: var(--font-size-xl, 32px);
  font-style: normal;
  font-weight: var(--font-lausanne-weight-400, 400);
  line-height: var(--font-line-height-xl, 40px); /* 125% */
  letter-spacing: -0.32px;
}
.lausanne-2xl {
  font-family: var(--font-family-Lausanne, "TWK Lausanne");
  font-size: var(--font-size-2xl, 40px);
  font-style: normal;
  font-weight: var(--font-lausanne-weight-400, 400);
  line-height: var(--font-line-height-2xl, 56px); /* 140% */
  letter-spacing: -0.4px;
}

/* END CLASSES */

/* RICH TEXT */
body {
  font-family: "TWK Lausanne";
  font-size: 20px;
  line-height: 34px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--Text-Primary);
}
h1 {
  font-family: "TWK Everett Book";
  font-size: 58px;
  line-height: 62px;
  letter-spacing: -0.05em;
  color: var(--Text-Primary, #000);
  font-weight: normal;
}
h2 {
  font-family: "TWK Lausanne";
  font-size: 28px;
  line-height: 34px;
  letter-spacing: -0.01em;
  color: var(--Text-Primary, #000);
  font-weight: 500;
}
h4 {
  font-family: "TWK Lausanne";
  font-size: 24px;
  line-height: 28px;
  letter-spacing: -0.02em;
  color: var(--Text-Primary, #000);
  font-weight: normal;
}

@media screen and (max-width: 768px) {
  body {
    font-size: 18px;
    line-height: 32px;
  }
  h1 {
    font-size: 40px;
    line-height: 44px;
  }
  h4 {
    font-size: 22px;
    line-height: 26px;
  }
}

a.inline-link {
  padding: 8px 16px;
  border-radius: 16px;
  border-top-left-radius: 4px;
  text-decoration: none;
  font-family: "TWK Everett";
  font-size: 18px;
  line-height: 16px;
  letter-spacing: -0.03em;
  margin: 0 2px;
  display: inline-block;
  transition: transform 0.3s linear;
}
a.inline-link.bg-primary {
  background-color: light-dark(#000, #fff);
  color: light-dark(var(--UI-White), var(--UI-Black));
}
a.inline-link.bg-gradient {
  background: var(--Brand-Payments-Gradient);
  color: var(--UI-Black);
}
a.inline-link:hover {
  transform: translateY(-4px);
}
@media screen and (max-width: 768px) {
  a.inline-link {
    font-size: 16px;
  }
}

ul,
ol {
  display: flex;
  flex-direction: column;
  line-height: 28px;
  gap: 16px;
}
/* END RICH TEXT */

html,
body {
  background-color: var(--UI-Backgrounds-Primary);
}

body {
  display: flex;
  padding: 24px 0;
  padding-right: 12px;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
body.nav-open {
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  body {
    padding-right: 0;
  }
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  padding: 0;
}

hr {
  background: var(--UI-Gray-3, #c7c7cc);
  border: none;
  height: 1px;
  width: 100%;
}

pre {
  white-space: pre-wrap;
}
code {
  color: var(--Text-Secondary, rgba(60, 60, 67, 0.6));
  font-family: "Fira Code", mono;
  font-style: normal;
  font-weight: 450;
  line-height: var(--font-line-height-md, 24px); /* 120% */
  letter-spacing: -0.2px;
}
pre code {
  font-size: 0.8em;
}

a,
a:visited {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

#content {
  display: flex;
  width: 701px;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 140px 0;
}
@media screen and (max-width: 768px) {
  #content {
    margin: 0 24px;
    width: calc(100% - 58px);
  }
}

#content > * {
  align-self: stretch;
  word-break: break-word;
}
#content img {
  max-width: 100%;
}

#top-nav {
  display: flex;
  padding: 16px 24px;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 12px;
  background: light-dark(rgba(255, 255, 255, 0.7), rgba(0, 0, 0, 0.7));
  backdrop-filter: blur(20px);
}
#top-nav :first-child {
  color: var(--Text-Primary, #000);
  font-family: "TWK Everett";
  font-size: 16px;
  font-style: normal;
  font-weight: 450;
  line-height: 24px; /* 150% */
  letter-spacing: -1px;
  text-transform: uppercase;
  text-decoration: none;
}
@media screen and (max-width: 768px) {
  #top-nav {
    right: 0;
  }
}

#nav-close {
  cursor: pointer;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
body.nav-open #nav-close {
  display: block;
}

#side-nav {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  background: var(--UI-Black);
  color: var(--UI-White);
  width: 350px;
  display: flex;
  padding: 24px 0 48px 0;
  margin-right: calc(-350px + 12px);
  transition: margin-right 0.1s ease-in;
  overflow-y: scroll;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex-shrink: 0;
}
#side-nav .text-primary {
  color: #fff;
}
#side-nav .text-secondary {
  color: rgba(235, 235, 245, 0.6);
}
#side-nav .menu-nav {
  display: none;
  padding: 0 32px;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  height: 48px;
}
#side-nav .menu-nav > div {
  cursor: pointer;
  display: flex;
  padding: 8px;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  border: 1px solid var(--UI-Gray-4, #3a3a3c);
  display: none;
}

#side-nav .menu-content {
  display: flex;
  padding: 0 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 64px;
}
#side-nav .links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
}
#side-nav .links a {
  color: rgba(235, 235, 245, 0.6);
  text-decoration: none;
}
#side-nav .links a:hover,
#side-nav .links a:active {
  color: var(--UI-White);
}
#side-nav .feed {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
#side-nav .feed-items {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  align-self: stretch;
}
#side-nav .feed-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
  text-decoration: none;
}
#side-nav .feed-image {
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  height: 214px;
  width: 100%;
  display: none;
}

body.nav-open #side-nav {
  margin-right: 0;
}
@media screen and (max-width: 768px) {
  #side-nav {
    width: 100vw;
    margin-right: -100vw;
  }
  body.nav-open #side-nav {
    margin-right: 0;
  }
  #side-nav .menu-nav {
    display: flex;
    height: auto;
  }
  #side-nav .menu-nav > div {
    display: block;
    padding-bottom: 0px;
  }
}

.layout-image {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  height: 394px;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
}
@media screen and (max-width: 768px) {
  .layout-image {
    background-size: cover;
  }
}

.dex-bit {
  background-image: url("/assets/dex-bit-light.svg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 64px;
  height: 55px;
  display: block;
}
@media (prefers-color-scheme: dark) {
  .dex-bit {
    background-image: url("/assets/dex-bit-dark.svg");
  }
}

#directory-list {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 64px;
}
#directory-list > a {
  text-decoration: none;
  display: flex;
  align-items: flex-start;
  gap: 125px;
  align-self: stretch;
}
#directory-list > a :first-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 34px;
}
#directory-list > a :last-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  flex: 1 0 0;
}
@media screen and (max-width: 768px) {
  #directory-list {
    gap: 24px;
  }
  #directory-list > h1 {
    padding-bottom: 24px;
  }
  #directory-list > a {
    flex-direction: column;
    gap: 12px;
  }
  #directory-list > a :first-child {
    flex-direction: row;
  }
}