@charset "UTF-8";
/* IMPORTS
----------------------- */
@import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital@0;1&family=Figtree:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Roboto:ital,wght@0,300;0,500;1,300;1,500&display=swap");
/* SIZING AND SPACING
----------------------- */
/* TYPOGRAPHY
----------------------- */
/* CSS VARS
----------------------- */
:root {
  --base-primary: #000;
  --base-secondary: #f4f4f4;
  --base-tertiary: #fff;
  --base-quaternary: #ddd;
  --accent-primary: #e30000;
  --accent-secondary: #3001c9;
  --accent-secondary-light: #8c66ff;
  --accent-tertiary: #00e682;
  --accent-quaternary: #00f0ff;
  --str-none: 0;
  --str-low: 16%;
  --str-mid: 32%;
  --str-hi: 48%;
  --str-full: 100%;
  --drop-shadow-low: 0.4rem 0.4rem 0 color-mix(in srgb, var(--base-primary) var(--str-low), transparent);
  --drop-shadow-hi: 1.6rem 1.6rem 0 var(--base-quaternary);
  --drop-shadow-blur-low: 0 0 0.8rem color-mix(in srgb, var(--base-primary) var(--str-low), transparent);
  --drop-shadow-blur-hi: 0 4.8rem 13.2rem color-mix(in srgb, var(--base-primary) var(--str-hi), transparent);
  --drop-shadow-blur-hero: 0.4rem 4.8rem 3.2rem color-mix(in srgb, var(--base-primary) var(--str-hi), transparent);
  --gradient-color: color-mix(in srgb, var(--base-primary) var(--str-low), transparent);
  --gradient-color-box: color-mix(in srgb, var(--base-quaternary) var(--str-mid), transparent);
}

/* ANIMATIONS
----------------------- */
@keyframes typing-caret {
  0%, 100% {
    border-color: currentColor;
  }
  50% {
    border-color: transparent;
  }
}
@keyframes captionIn {
  from {
    opacity: 0;
    transform: translateY(0.4rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* STYLES
----------------------- */
.accent-primary {
  color: var(--accent-primary);
}

.shadow-hero {
  filter: drop-shadow(var(--drop-shadow-blur-hero));
  transform: translateZ(0);
}

.shadow-blur-low {
  filter: drop-shadow(var(--drop-shadow-blur-low));
}

/* LAYOUT
----------------------- */
html {
  font-size: 62.5%;
}
@media (min-width: 1800px) {
  html {
    font-size: clamp(62.5%, 0.8vw, 87.5%);
  }
}
html {
  /* @media (min-width: 1600px) {
    html {
      font-size: 68.75%;
    }
  }

  @media (min-width: 1920px) {
    html {
      font-size: 75%;
    }
  }

  @media (min-width: 2560px) {
    html {
      font-size: 81.25%;
    }
  }

  @media (min-width: 3840px) {
    html {
      font-size: 87.5%;
    }
  } */
}

body {
  background-color: var(--base-secondary);
  color: var(--base-primary);
  font-family: "Roboto", sans-serif;
  font-weight: 300;
}

.col,
.col-2,
.col-3,
.col-4,
.col-5 {
  align-items: start;
  display: grid;
  gap: 2.4rem 4.8rem;
  grid-template-columns: 1fr;
  position: relative;
}
@media (max-width: 768px) {
  .col,
  .col-2,
  .col-3,
  .col-4,
  .col-5 {
    gap: clamp(2.4rem, 4vw, 10rem);
    grid-template-columns: 1fr !important;
  }
}

.col-2 {
  grid-template-columns: repeat(2, 1fr);
}

.col-3 {
  grid-template-columns: repeat(3, 1fr);
}

.col-4 {
  grid-template-columns: repeat(4, 1fr);
}

.col-5 {
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 768px) {
  .col-collapse-mobile {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1040px) {
  .col-collapse-tablet {
    grid-template-columns: 1fr;
  }
}

.colspan-2 {
  display: grid;
  grid-column: span 2;
}

.colspan-3 {
  display: grid;
  grid-column: span 3;
}

.colspan-all {
  display: grid;
  grid-column: 1/-1;
}

header::after {
  background: linear-gradient(to top, var(--gradient-color), transparent);
  background-blend-mode: multiply;
  pointer-events: none;
  bottom: 0;
  content: "";
  height: 4.8rem;
  left: 0;
  position: absolute;
  width: 100%;
}
header {
  display: grid;
  gap: 0 4.8rem;
  padding-inline: clamp(2.4rem, 5vw, 5.6rem);
}
header > * {
  min-width: 0;
}
header {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  min-height: 100svh;
}
@media (min-width: 1041px) {
  header {
    max-height: 100vh;
    max-height: 100svh;
  }
}
header::before {
  content: "";
  background-image: radial-gradient(var(--base-secondary) 0.1rem, transparent 0), radial-gradient(var(--base-secondary) 0.1rem, transparent 0);
  background-position: 0 0, 0.4rem 0.4rem;
  background-size: 0.8rem 0.8rem;
  height: 100%;
  inset: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}
header {
  background-color: var(--base-tertiary);
  isolation: isolate;
  overflow: hidden;
  position: relative;
}
header > div {
  display: grid;
}
header#home, header#home > * {
  display: grid;
  gap: 0 4.8rem;
  padding-inline: clamp(2.4rem, 5vw, 5.6rem);
}
header#home > *, header#home > * > * {
  min-width: 0;
}
header#home, header#home > * {
  grid-template-columns: 1fr;
  justify-items: center;
}
header#home {
  opacity: 0;
  transition: opacity 600ms ease;
}
header#home.ready {
  opacity: 1;
}
header#home::before {
  content: none;
}
header#home > div,
header#home canvas {
  opacity: 1;
  transition: transform 400ms ease, opacity 400ms ease, filter 400ms ease;
}
header#home.submitted > div, header#home.submitted canvas {
  filter: blur(0.2rem);
  opacity: 0;
  transform: scale(1.2);
}
header#home h1 {
  margin-bottom: clamp(4.8rem, 8vw, 6.4rem);
}
header#home #home-hero {
  display: block;
  height: 100%;
  padding: 0;
  position: absolute;
  width: 100%;
  z-index: -1;
}
header nav a:last-child {
  justify-self: end;
}
header .gradient-hero {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.25) 100%);
  height: 100%;
  pointer-events: none;
  position: absolute;
  width: 100%;
}
header .gradient-hero.blueprint::before {
  content: "";
  background-image: radial-gradient(circle 0.1rem at 100% 50%, var(--base-tertiary) 99%, transparent 100%), radial-gradient(circle 0.1rem at 0% 50%, var(--base-tertiary) 99%, transparent 100%), radial-gradient(circle 0.1rem at 50% 100%, var(--base-tertiary) 99%, transparent 100%), radial-gradient(circle 0.1rem at 50% 0%, var(--base-tertiary) 99%, transparent 100%);
  background-size: calc(100vh / 9) 0.8rem, calc(100vh / 9) 0.8rem, 0.8rem calc(100vh / 9), 0.8rem calc(100vh / 9);
  background-position: 5.6rem;
  background-repeat: repeat;
  background-color: var(--accent-secondary);
  mix-blend-mode: multiply;
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}
header.nfon {
  background-color: var(--accent-secondary);
}
header.nfon nav,
header.nfon nav a,
header.nfon nav a:visited {
  color: var(--base-tertiary);
}
header.nfon > div {
  color: var(--base-tertiary);
}
header.nfon figure {
  width: 100%;
}
@media (max-width: 1040px) {
  header.nfon figure {
    max-width: 50vw;
  }
}
@media (max-width: 768px) {
  header.nfon > div:last-child {
    justify-items: center;
    text-align: center;
  }
  header.nfon figure {
    max-width: 60vw;
  }
}

nav {
  display: grid;
  gap: 0 4.8rem;
  padding-inline: clamp(2.4rem, 5vw, 5.6rem);
}
nav > * {
  min-width: 0;
}
nav {
  align-self: start;
  grid-template-columns: repeat(2, 1fr);
  justify-items: start;
  padding: 3.2rem 0;
}
nav .m-dot {
  padding: 0 0.8rem;
}
nav#pagination {
  display: grid;
  gap: 0 4.8rem;
  padding-inline: clamp(2.4rem, 5vw, 5.6rem);
}
nav#pagination > * {
  min-width: 0;
}
nav#pagination {
  background-image: radial-gradient(circle, black 0.05rem, transparent 0.05rem);
  background-size: 0.4rem 0.4rem;
  background-repeat: repeat-x;
  background-position: bottom;
}
nav#pagination a:first-child {
  justify-self: start;
}
nav#pagination a:last-child {
  grid-column: 2;
  justify-self: end;
}
nav#pagination.end a {
  grid-column: 1;
  justify-self: start;
}

footer {
  display: grid;
  gap: 0 4.8rem;
  padding-inline: clamp(2.4rem, 5vw, 5.6rem);
}
footer > * {
  min-width: 0;
}
footer {
  background-color: var(--base-tertiary);
  grid-template-columns: auto;
  grid-template-rows: auto 1fr;
  padding-inline: 0 !important;
}
footer nav,
footer > div {
  display: grid;
  gap: 0 4.8rem;
  padding-inline: clamp(2.4rem, 5vw, 5.6rem);
}
footer nav > *,
footer > div > * {
  min-width: 0;
}
footer nav,
footer > div {
  grid-template-columns: repeat(2, 1fr);
  justify-items: stretch;
}
footer > div:first-child::after {
  background: linear-gradient(to top, var(--gradient-color), transparent);
  background-blend-mode: multiply;
  pointer-events: none;
  bottom: 0;
  content: "";
  height: 4.8rem;
  left: 0;
  position: absolute;
  width: 100%;
}
footer > div:first-child {
  grid-template-columns: 1fr;
  position: relative;
}
footer > div:first-child > div {
  background-image: radial-gradient(circle, black 0.05rem, transparent 0.05rem);
  background-size: 0.4rem 0.4rem;
  background-repeat: repeat-x;
  background-position: top;
  text-align: center;
  padding-block: 3.2rem;
}
footer > div:last-child {
  background-image: radial-gradient(circle, black 0.05rem, transparent 0.05rem);
  background-size: 0.4rem 0.4rem;
  background-repeat: repeat-y;
  background-position: center;
  padding-block: 4.8rem 10rem;
}
@media (max-width: 768px) {
  footer > div:last-child {
    background-image: none;
    grid-template-columns: 1fr;
    row-gap: 10rem;
  }
}
footer #sitemap {
  -moz-column-gap: 6.4rem;
       column-gap: 6.4rem;
  display: flex;
  flex-wrap: wrap;
  padding-left: clamp(2.4rem, 5vw, 4.8rem);
  row-gap: 2.4rem;
}
@media (max-width: 768px) {
  footer #sitemap {
    flex-direction: column;
    gap: 2.4rem;
    padding: unset !important;
  }
}
footer #sitemap li {
  flex: 0 0 auto;
  margin-bottom: 0.8rem;
}

section {
  display: grid;
  gap: 0 4.8rem;
  padding-inline: clamp(2.4rem, 5vw, 5.6rem);
}
section > * {
  min-width: 0;
}
section {
  padding-block: clamp(4.8rem, 8vw, 10rem);
  -moz-column-gap: clamp(2.4rem, 5vw, 4.8rem);
       column-gap: clamp(2.4rem, 5vw, 4.8rem);
  min-height: 100vh;
  min-height: 100svh;
}
section > div {
  -moz-column-gap: clamp(2.4rem, 5vw, 4.8rem);
       column-gap: clamp(2.4rem, 5vw, 4.8rem);
}
section.colspan-all {
  height: 100vh;
  height: 100svh;
}
section.bleed-horizontal {
  padding-inline: 0;
}
section.bleed-horizontal > div {
  padding-inline: clamp(2.4rem, 5vw, 5.6rem);
}
@media (min-width: 1800px) {
  section.bleed-horizontal > div {
    padding-inline: 14vw;
  }
}
section.bleed-vertical {
  padding-block: 0;
}
section.bleed-vertical > div {
  padding-block: clamp(4.8rem, 4vw, 10rem);
}

.dotted {
  padding-block: 4.8rem;
  position: relative;
}
.dotted::before, .dotted::after {
  height: 0.8rem;
  position: absolute;
  width: 100%;
}
.dotted.top::before {
  content: "";
  background-image: radial-gradient(circle, black 0.05rem, transparent 0.05rem);
  background-size: 0.4rem 0.4rem;
  background-repeat: repeat-x;
  background-position: top;
  top: 0;
}
.dotted.bottom::after {
  content: "";
  background-image: radial-gradient(circle, black 0.05rem, transparent 0.05rem);
  background-size: 0.4rem 0.4rem;
  background-repeat: repeat-x;
  background-position: bottom;
  bottom: 0;
}

img {
  max-width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
img.border {
  border: 0.1rem solid var(--base-quaternary);
}

/* LAYOUT HELPERS
----------------------- */
.background-hilite {
  background-color: var(--base-tertiary);
}

.border-light {
  border: 0.1rem solid var(--base-tertiary);
}

.border-medium {
  border: 0.1rem solid var(--base-quaternary);
}

.border-dark {
  border: 0.1rem solid var(--base-primary);
}

.flex {
  display: flex !important;
  flex-wrap: wrap;
}

.inline {
  display: inline-block !important;
}

.row-reverse {
  flex-direction: row-reverse;
}

.align-center {
  align-items: center;
}

.align-stretch {
  align-items: stretch;
}

.align-end {
  align-items: end;
}

.justify-content-start {
  justify-content: start !important;
}

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

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

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

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

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

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.mt-2xs {
  margin-top: 0.4rem !important;
}

.mt-xs {
  margin-top: 0.8rem !important;
}

.mt-sm {
  margin-top: 1.6rem !important;
}

.mt-xl {
  margin-top: 2.4rem !important;
}

.mt-2xl {
  margin-top: 3.2rem !important;
}

.mt-3xl {
  margin-top: 4.8rem !important;
}

.mt-4xl {
  margin-top: 5.6rem !important;
}

.mt-5xl {
  margin-top: 6.4rem !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-2xs {
  margin-bottom: 0.4rem !important;
}

.mb-xs {
  margin-bottom: 0.8rem !important;
}

.mb-sm {
  margin-bottom: 1.6rem !important;
}

.mb-lg {
  margin-bottom: 2rem !important;
}

.mb-xl {
  margin-bottom: 2.4rem !important;
}

.mb-2xl {
  margin-bottom: 3.2rem !important;
}

.mb-3xl {
  margin-bottom: 4.8rem !important;
}

.mb-5xl {
  margin-bottom: 6.4rem !important;
}

.mlr-3xl {
  margin-left: 4.8rem;
  margin-right: 4.8rem;
}

.mlr-6xl {
  margin-left: 10rem;
  margin-right: 10rem;
}

.pt-0 {
  padding-top: 0 !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pb-2xs {
  padding-bottom: 0.4rem !important;
}

.gap-2xl {
  gap: 3.2rem !important;
}

.gap-3xl {
  gap: 2.4rem 4.8rem !important;
}

.gap-5xl {
  gap: 3.2rem 6.4rem !important;
}

.rotate-down span {
  display: inline-block;
  transform: rotate(90deg) scaleY(-1);
}

/* TYPOGRAPHY
----------------------- */
.font-xs {
  font-size: 1.2rem;
  line-height: 1.8rem;
}

.font-sm {
  font-size: 1.6rem;
  line-height: 2rem;
}

.font-md {
  font-size: 1.8rem;
  line-height: 2.6rem;
}

.font-lg {
  font-size: 2.4rem;
  line-height: 3.2rem;
}

.font-sm strong,
.font-md strong,
.font-lg strong {
  font-weight: 500;
}

.font-headline-sm,
.font-headline-md,
.font-headline-lg,
.font-headline-xl {
  font-family: "Figtree", sans-serif;
}

.font-headline-md,
.font-headline-lg,
.font-headline-xl {
  letter-spacing: -0.02em;
}

.font-headline-lg,
.font-headline-xl {
  font-weight: 600;
}

.font-headline-sm {
  font-size: clamp(2.4rem, 6vw, 2.8rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: clamp(3.2rem, 6vw, 3.6rem);
}

.font-headline-md {
  font-size: clamp(2.8rem, 6vw, 4.8rem);
  font-weight: 400;
  line-height: clamp(3.6rem, 6vw, 5.6rem);
}

.font-headline-lg {
  font-size: clamp(4.8rem, 6vw, 8rem);
  line-height: clamp(5.6rem, 6vw, 8rem);
}

.font-headline-xl {
  font-size: clamp(4.8rem, 14vw, 12rem);
  line-height: clamp(5.6rem, 14vw, 12rem);
}

button,
.pill li > div,
.font-label,
.font-nav {
  font-family: "DM Mono", monospace;
}

button,
.pill li > div,
.font-label {
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 2rem;
}

.font-nav {
  font-size: 1.8rem;
  line-height: 2.6rem;
}

input.xl {
  font-family: "Roboto", sans-serif;
  font-size: clamp(2.8rem, 10vw, 8rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: clamp(5.6rem, 10vw, 8rem);
}

h1.font-xs, h1.font-sm,
p.font-xs,
p.font-sm,
h2.font-xs,
h2.font-sm,
h3.font-xs,
h3.font-sm,
h4.font-xs,
h4.font-sm,
h5.font-xs,
h5.font-sm {
  margin-bottom: 1.6rem;
}
h1.font-md, h1.font-lg, h1.font-headline-md,
p.font-md,
p.font-lg,
p.font-headline-md,
h2.font-md,
h2.font-lg,
h2.font-headline-md,
h3.font-md,
h3.font-lg,
h3.font-headline-md,
h4.font-md,
h4.font-lg,
h4.font-headline-md,
h5.font-md,
h5.font-lg,
h5.font-headline-md {
  margin-bottom: 2.4rem;
}
h1.font-headline-sm,
p.font-headline-sm,
h2.font-headline-sm,
h3.font-headline-sm,
h4.font-headline-sm,
h5.font-headline-sm {
  margin-bottom: 3.2rem;
}
h1.font-headline-lg, h1.font-headline-xl,
p.font-headline-lg,
p.font-headline-xl,
h2.font-headline-lg,
h2.font-headline-xl,
h3.font-headline-lg,
h3.font-headline-xl,
h4.font-headline-lg,
h4.font-headline-xl,
h5.font-headline-lg,
h5.font-headline-xl {
  margin-bottom: 4.8rem;
}

/* INTERACTION
----------------------- */
a,
a:visited {
  color: var(--accent-primary);
  padding: 0 0.2rem;
  text-underline-offset: 0.4rem;
  text-decoration-thickness: 0.2rem;
}

a:hover,
a:focus-visible {
  background-color: var(--base-primary);
  border-radius: 0.2rem;
  color: var(--base-tertiary);
  outline: 0.2rem solid var(--base-primary);
  outline-offset: 0;
  text-decoration: none;
}

a:active {
  background-color: var(--accent-primary);
  outline-color: var(--accent-primary);
}

nav a,
nav a:visited,
footer ul a,
footer ul a:visited {
  color: var(--base-primary);
  text-decoration: none;
}
nav a:hover,
nav a:focus-visible,
nav a:active,
footer ul a:hover,
footer ul a:focus-visible,
footer ul a:active {
  color: var(--base-tertiary);
}

button {
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  height: 4.8rem;
  outline: none;
  padding: 0;
  min-width: 4.8rem;
}

.btn {
  background-color: var(--base-tertiary);
  border-radius: 0.8rem;
  border: none;
  outline: 0.1rem solid var(--base-primary);
  isolation: isolate;
  position: relative;
}
.btn::after {
  border-radius: inherit;
  box-shadow: var(--drop-shadow-low);
  content: "";
  inset: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
  position: absolute;
}
.btn {
  padding: 0.8rem 2.4rem;
  position: relative;
}
.btn.icon {
  padding: 1.6rem;
  width: 4.8rem;
}
.btn:hover, .btn:focus {
  outline-offset: -0.1rem;
  outline-width: 0.2rem;
}
.btn:active {
  background-color: var(--base-primary);
  color: var(--base-tertiary);
  outline-color: var(--base-tertiary);
}
.btn.toggled {
  outline-color: var(--accent-primary);
}
.btn.toggled:hover, .btn.toggled:focus {
  outline-color: var(--base-primary);
}
.btn.toggled:active {
  background-color: var(--accent-primary);
  outline-color: var(--base-tertiary);
}

.hotspot {
  padding: 0.8rem;
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.hotspot div {
  background-color: var(--base-tertiary);
  border-radius: 0.8rem;
  border: none;
  outline: 0.1rem solid var(--base-primary);
  align-items: center;
  display: flex;
  filter: drop-shadow(0.4rem 0.4rem 0 color-mix(in srgb, var(--base-primary) var(--str-low), transparent));
  height: 3.2rem;
  justify-content: center;
  width: 3.2rem;
}
.hotspot div svg {
  height: 1.2rem;
  width: 1.2rem;
}
.hotspot:hover div, .hotspot.is-active div {
  background-color: var(--base-primary);
  outline: 0.2rem solid var(--base-tertiary);
  color: var(--base-tertiary);
}

#tooltip {
  isolation: isolate;
  position: relative;
}
#tooltip::after {
  border-radius: inherit;
  box-shadow: var(--drop-shadow-low);
  content: "";
  inset: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
  position: absolute;
}
#tooltip {
  background-color: var(--base-tertiary);
  border: 0.1rem solid var(--accent-primary);
  border-radius: 0.8rem;
  color: var(--base-primary);
  display: none;
  left: 0;
  max-width: clamp(10rem, 90vw, 32rem);
  padding: 2.4rem;
  position: absolute;
  top: 0;
  width: -moz-max-content;
  width: max-content;
  z-index: 2;
}
@media (max-width: 768px) {
  #tooltip {
    max-width: 60vw;
  }
}

.input-group {
  align-items: stretch;
  background-color: var(--base-tertiary);
  border: 0.4rem solid var(--base-secondary);
  border-radius: 14.4rem;
  display: flex;
  height: clamp(6.4rem, 16vw, 14.4rem);
  justify-content: space-between;
  margin-bottom: 6.4rem;
  outline: 0.8rem solid var(--base-tertiary);
  transition: border 400ms ease-in-out;
  width: min(100%, 71.2rem);
}
.input-group:focus-within {
  border-color: var(--base-primary);
}
.input-group input {
  background-color: transparent;
  border: 0;
  border-radius: 10rem 0 0 10rem;
  flex: 1;
  min-width: 0;
  outline: none;
  padding: 0 clamp(2.4rem, 8vw, 5.6rem);
}
.input-group button {
  background-color: var(--base-secondary);
  border-radius: 0 14.4rem 14.4rem 0;
  font-weight: 400;
  height: 100%;
  width: clamp(6.4rem, 16vw, 14.4rem);
}
.input-group button:hover, .input-group button:focus-visible {
  background-color: var(--base-quaternary);
}
.input-group button:focus-visible {
  border: 0.2rem solid var(--base-primary);
}
.input-group button.loading {
  background-color: var(--base-tertiary);
}
/* MEDIA
----------------------- */
.icon svg {
  fill: currentColor;
  height: 1.6rem;
  width: 1.6rem;
}

.device {
  position: relative;
  width: 100%;
}
.device .device-container {
  container-type: inline-size;
  position: relative;
  width: 100%;
}
.device img {
  pointer-events: none;
  position: relative;
  z-index: 1;
}
.device .asset {
  border-radius: 9cqi;
  height: auto;
  left: 4.9%;
  overflow: hidden;
  position: absolute;
  top: 1.85%;
  width: 90.6%;
}
.device .asset.crop {
  border-radius: 9cqi 9cqi 0 0;
  top: 7.18%;
}

/* LISTS + DIAGRAMS
----------------------- */
ul {
  list-style: none;
  padding: 0;
}
ul.dashed {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
ul.dashed li {
  padding-left: 2.4rem;
  position: relative;
}
ul.dashed li::before {
  content: "—";
  left: 0;
  position: absolute;
}

.pill {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  justify-content: center;
}
.pill.vertical {
  flex-direction: column;
}
.pill.roomy {
  gap: 2.4rem;
}
.pill.token li span {
  background-image: radial-gradient(circle, black 0.05rem, transparent 0.05rem);
  background-size: 0.4rem 0.4rem;
  background-repeat: repeat-y;
  background-position: center;
  display: block;
  height: 3.2rem;
  width: 100%;
}
.pill.token li p {
  margin-top: 0 !important;
}
.pill.adapt li {
  flex: 1 1 0;
}
.pill li {
  flex: 0 1 auto;
  min-width: 0;
}
@media (max-width: 768px) {
  .pill li {
    flex: 0 1 auto !important;
  }
}
.pill li > div {
  background-color: var(--base-tertiary);
  border-radius: 0.8rem;
  border: none;
  outline: 0.1rem solid var(--base-primary);
  isolation: isolate;
  position: relative;
}
.pill li > div::after {
  border-radius: inherit;
  box-shadow: var(--drop-shadow-low);
  content: "";
  inset: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
  position: absolute;
}
.pill li > div {
  border-radius: 1.6rem;
  display: inline-block;
  padding: 0.4rem 1.6rem;
}
.pill li > div.box {
  padding: 1.8rem;
}
.pill li > div.box p:not(:first-child) {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  margin-bottom: 0;
}
.pill li > p {
  margin-top: 1rem;
}
.pill li.subtle > div {
  outline-color: var(--base-quaternary);
}
.pill li.strong > div {
  background-color: var(--base-primary);
  color: var(--base-tertiary);
}

.diagram {
  position: relative;
}
.diagram.auto {
  padding-block: 5.6rem;
}
.diagram .font-headline-sm {
  margin-bottom: 2.4rem;
}
.diagram.reverse > ul > li > ul {
  flex-direction: column-reverse;
}
.diagram > ul {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.8rem, 1vw, 4.8rem);
  text-align: center;
}
@media (max-width: 1040px) {
  .diagram > ul {
    flex-direction: column;
    gap: 3.2rem;
  }
}
.diagram > ul .next-step {
  flex-grow: 0;
}
.diagram > ul .next-step.down {
  margin: -1.6rem 0;
}
.diagram > ul .next-step.down span {
  display: inline-block;
  transform: rotate(90deg) scaleY(-1);
}
@media (max-width: 1040px) {
  .diagram > ul .next-step span {
    transform: rotate(90deg) scaleY(-1);
  }
}
.diagram > ul.auto > li {
  flex: 1 1 auto !important;
}
.diagram > ul > li {
  flex: 1;
  display: flex;
  justify-content: center;
}
.diagram > ul > li > ul {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
  justify-content: center;
}
.diagram > ul > li > ul > li:not(:first-child) {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
}
.diagram > ul > li > ul ul {
  align-items: center;
  flex-direction: column;
}
.diagram .legend {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  position: absolute;
  right: 0;
}
@media (max-width: 768px) {
  .diagram .legend {
    order: -1;
    position: relative;
  }
}
.diagram .legend > div {
  align-items: center;
  display: flex;
  gap: 0.8rem;
}
.diagram .legend > div .legend-type {
  border: 0.1rem solid var(--base-primary);
  border-radius: 0.4rem;
  height: 1.6rem;
  width: 1.6rem;
}
.diagram .legend > div .legend-type.light {
  background-color: var(--base-tertiary);
}
.diagram .legend > div .legend-type.dark {
  background-color: var(--base-primary);
  color: var(--base-tertiary);
}
.diagram .caption {
  color: var(--accent-primary);
  font-family: "Roboto", sans-serif;
  font-size: 1.6rem;
}

.tokens {
  display: grid;
  gap: clamp(2.4rem, 5vw, 3.2rem);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.tokens li > ul {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.tokens li > ul li {
  align-items: center;
  display: flex;
  flex: none;
  gap: 0.8rem;
  padding: 0 !important;
}
.tokens li > ul li div {
  text-align: left !important;
}

.swatch {
  border-radius: 0.4rem;
  flex: none !important;
  height: 2.4rem;
  width: 2.4rem;
}

/* ACCESSIBILITY
----------------------- */
.sr-only {
  clip: rect(0 0 0 0);
  border: 0 !important;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap;
  width: 1px;
}

/* PAGES
----------------------- */
#intro > div {
  justify-self: center;
  text-align: center;
  width: min(100%, 90rem);
}

#portfolio::after {
  background: linear-gradient(to top, var(--gradient-color), transparent);
  background-blend-mode: multiply;
  pointer-events: none;
  bottom: 0;
  content: "";
  height: 4.8rem;
  left: 0;
  position: absolute;
  width: 100%;
}
#portfolio {
  padding-inline: clamp(2.4rem, 5vw, 10rem);
  position: relative;
}
#portfolio .btn {
  pointer-events: none;
}
#portfolio ul {
  align-items: center;
  display: grid;
  gap: 0;
}
#portfolio ul li {
  background-image: radial-gradient(circle, black 0.05rem, transparent 0.05rem);
  background-size: 0.4rem 0.4rem;
  background-repeat: repeat-x;
  background-position: bottom;
  align-items: center;
  cursor: pointer;
  display: grid;
  grid-template-areas: "media text";
  grid-template-columns: auto 1fr;
  gap: clamp(2rem, 8vw, 10rem);
  opacity: var(--str-mid);
  padding-block: clamp(2.4rem, 4vw, 10rem);
  position: relative;
  transition: opacity 0.3s ease;
}
#portfolio ul li:nth-child(even) {
  grid-template-columns: 1fr auto;
  grid-template-areas: "text media";
}
#portfolio ul li:first-child {
  padding-block-start: 0;
}
#portfolio ul li:last-child {
  background: none;
  padding-block-end: 0;
}
#portfolio ul li:hover {
  opacity: var(--str-hi);
}
#portfolio ul li:hover .btn {
  outline-offset: -0.1rem;
  outline-width: 0.2rem;
}
#portfolio ul li:active .btn {
  background-color: var(--base-primary);
  color: var(--base-tertiary);
  outline-color: var(--base-tertiary);
}
#portfolio ul li:focus-visible {
  border-radius: 0.2rem;
  outline: 0.2rem solid var(--base-primary);
  outline-offset: 1.6rem;
}
#portfolio ul li .thumbnail {
  aspect-ratio: 1/1;
  background-color: var(--base-quaternary);
  border: 0.8rem solid var(--base-tertiary);
  border-radius: 50%;
  display: block;
  grid-area: media;
  transform: translateY(2.4rem);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: clamp(24rem, 32vw, 40rem);
}
@media (max-width: 768px) {
  #portfolio ul li .thumbnail {
    margin: 0 auto;
  }
}
#portfolio ul li .thumbnail img {
  border-radius: 100%;
  display: block;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}
#portfolio ul li .description {
  align-items: start;
  display: grid;
  justify-items: start;
}
@media (max-width: 768px) {
  #portfolio ul li .description {
    justify-items: center;
  }
}
#portfolio ul li p:first-child {
  color: var(--accent-primary);
}
#portfolio ul li.focused {
  opacity: var(--str-full);
}
#portfolio ul li.focused .thumbnail {
  isolation: isolate;
  position: relative;
}
#portfolio ul li.focused .thumbnail::after {
  border-radius: inherit;
  box-shadow: var(--drop-shadow-low);
  content: "";
  inset: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
  position: absolute;
}
#portfolio ul li.focused .thumbnail {
  transform: translateY(0);
}
#portfolio ul li.focused .thumbnail::after {
  margin: -0.8rem;
}
@media (max-width: 768px) {
  #portfolio ul li,
  #portfolio ul li:nth-child(even) {
    gap: 2rem;
    grid-template-areas: "media" "text";
    grid-template-columns: 1fr;
    text-align: center;
  }
  #portfolio ul li .btn,
  #portfolio ul li:nth-child(even) .btn {
    justify-self: center;
  }
}

#summary {
  display: grid;
  gap: 0 4.8rem;
  padding-inline: clamp(2.4rem, 5vw, 5.6rem);
}
#summary > * {
  min-width: 0;
}
#summary {
  background-image: radial-gradient(circle, black 0.05rem, transparent 0.05rem);
  background-size: 0.4rem 0.4rem;
  background-repeat: repeat-y;
  background-position: center;
  grid-template-columns: repeat(2, 1fr);
  gap: 10rem;
  justify-items: stretch;
  min-height: auto;
}
@media (max-width: 768px) {
  #summary {
    background-image: none;
    gap: clamp(2.4rem, 8vw, 10rem);
    grid-template-columns: 1fr;
  }
  #summary > div {
    padding-block: 0.8rem;
  }
}
#summary h2 {
  color: var(--accent-primary);
  margin-bottom: 0.8rem;
}

#featured-journey {
  grid-template-areas: "text media";
}
@media (max-width: 1040px) {
  #featured-journey {
    grid-template-areas: "media" "text";
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  #featured-journey #list {
    margin: 0;
  }
  #featured-journey .media {
    margin-inline: calc(-1 * clamp(2.4rem, 5vw, 5.6rem));
  }
}
#featured-journey .media::before {
  content: "";
  background-image: radial-gradient(var(--base-secondary) 0.1rem, transparent 0), radial-gradient(var(--base-secondary) 0.1rem, transparent 0);
  background-position: 0 0, 0.4rem 0.4rem;
  background-size: 0.8rem 0.8rem;
  height: 100%;
  inset: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}
#featured-journey .media {
  align-items: center;
  align-self: stretch;
  background-color: var(--accent-primary);
  display: flex;
  grid-area: media;
  isolation: isolate;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
#featured-journey.voice {
  grid-template-areas: "title ." "body media";
}
@media (max-width: 1040px) {
  #featured-journey.voice {
    grid-template-areas: "media" "title" "body";
  }
}
#featured-journey.voice .media {
  align-self: center;
  aspect-ratio: 1/1;
  border-radius: 50%;
  flex-direction: column;
  justify-content: center;
  justify-self: center;
  max-width: 51.2rem;
  padding: 4.8rem 5.6rem;
  width: 100%;
}
@media (max-width: 1040px) {
  #featured-journey.voice .media {
    max-width: 40rem;
  }
}
#featured-journey.voice .media .info {
  align-items: center;
  display: flex;
  flex-direction: column;
}
#featured-journey.voice .media .info .audio-wave > div {
  background-color: var(--base-tertiary);
}
#featured-journey.voice .media .audio-captions {
  width: 85% !important;
}

.showcase figure {
  max-width: 19vw;
}
@media (max-width: 1040px) {
  .showcase figure {
    max-width: unset;
  }
}
.showcase > div {
  -moz-column-gap: clamp(2.4rem, 5vw, 4.8rem);
       column-gap: clamp(2.4rem, 5vw, 4.8rem);
  height: 100%;
}
.showcase .split {
  background-image: radial-gradient(circle, black 0.05rem, transparent 0.05rem);
  background-size: 0.4rem 0.4rem;
  background-repeat: repeat-y;
  background-position: center;
}
.showcase .split > div {
  -moz-column-gap: clamp(2rem, 5vw, 3.2rem);
       column-gap: clamp(2rem, 5vw, 3.2rem);
  grid-template-areas: "text media";
  justify-items: center;
}
.showcase .split > div:nth-child(even) {
  grid-template-areas: "media text";
}
.showcase .split > div > div {
  grid-area: text;
}
.showcase .split > div > figure {
  grid-area: media;
}
@media (max-width: 768px) {
  .showcase .split > div {
    grid-template-areas: "text" "media" !important;
  }
}
@media (max-width: 1040px) {
  .showcase .split {
    background-repeat: repeat-x;
    gap: clamp(10rem, 8vw, 10rem);
    grid-template-areas: "media" "text";
    grid-template-columns: 1fr;
  }
  .showcase .split > div > div {
    align-self: self-start;
  }
}
.showcase .horizontal::before {
  content: "";
  background-image: radial-gradient(var(--base-secondary) 0.1rem, transparent 0), radial-gradient(var(--base-secondary) 0.1rem, transparent 0);
  background-position: 0 0, 0.4rem 0.4rem;
  background-size: 0.8rem 0.8rem;
  height: 100%;
  inset: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}
.showcase .horizontal {
  isolation: isolate;
}
.showcase .horizontal::before {
  z-index: 0;
}
.showcase .horizontal::after {
  background-color: var(--base-secondary);
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: -1;
}
.showcase .horizontal {
  grid-template-columns: minmax(40vw, auto) 1fr;
  padding-block: 5.6rem;
}
@media (max-width: 1040px) {
  .showcase .horizontal {
    gap: clamp(4.8rem, 6vw, 10rem);
    grid-template-columns: 1fr;
  }
}
.showcase .horizontal::before, .showcase .horizontal::after {
  align-self: center;
  height: 100%;
  width: 100%;
  align-items: center;
}
@media (max-width: 1040px) {
  .showcase .horizontal::before, .showcase .horizontal::after {
    align-self: self-start;
  }
}
.showcase .horizontal > div {
  display: grid;
  z-index: 1;
}
.showcase .horizontal > div:first-child {
  align-items: center;
  gap: 4.8rem;
  justify-items: center;
}
.showcase .horizontal > div:last-child {
  align-items: center;
}
@media (max-width: 1040px) {
  .showcase .horizontal > div:last-child {
    align-items: start;
  }
}
@media (min-width: 1041px) {
  .showcase .split-horizontal {
    padding-inline: 0;
  }
}
.showcase .split-horizontal > .col-2 {
  align-items: center;
  height: 100%;
  padding-block: 5.6rem;
}
.showcase .split-horizontal > div::before {
  content: "";
  background-image: radial-gradient(var(--base-secondary) 0.1rem, transparent 0), radial-gradient(var(--base-secondary) 0.1rem, transparent 0);
  background-position: 0 0, 0.4rem 0.4rem;
  background-size: 0.8rem 0.8rem;
  height: 100%;
  inset: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}
.showcase .split-horizontal > div {
  isolation: isolate;
}
.showcase .split-horizontal > div::before {
  z-index: 0;
}
.showcase .split-horizontal > div::after {
  background-color: var(--base-secondary);
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: -1;
}
@media (max-width: 1040px) {
  .showcase .split-horizontal > div {
    gap: clamp(4.8rem, 6vw, 10rem);
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 0 !important;
  }
}
.showcase .split-horizontal > div:first-child {
  padding-left: clamp(2.4rem, 5vw, 5.6rem);
}
@media (min-width: 1800px) {
  .showcase .split-horizontal > div:first-child {
    padding-left: 14vw;
  }
}
.showcase .split-horizontal > div:first-child::before, .showcase .split-horizontal > div:first-child::after {
  width: 30%;
}
.showcase .split-horizontal > div:last-child {
  padding-right: clamp(2.4rem, 5vw, 5.6rem);
}
@media (min-width: 1800px) {
  .showcase .split-horizontal > div:last-child {
    padding-right: 14vw;
  }
}
.showcase .split-horizontal > div:last-child::before, .showcase .split-horizontal > div:last-child::after {
  right: 0;
  width: 80%;
}
.showcase .split-horizontal > div::before, .showcase .split-horizontal > div::after {
  align-self: center;
  inset: auto;
  height: 100%;
}
@media (max-width: 1040px) {
  .showcase .split-horizontal > div::before, .showcase .split-horizontal > div::after {
    content: none !important;
  }
}
.showcase.figure-lg {
  align-items: center;
}
.showcase.figure-lg figure {
  max-width: none;
}
.showcase.figure-lg .horizontal {
  grid-template-columns: minmax(50vw, auto) 1fr;
}
@media (max-width: 1040px) {
  .showcase.figure-lg .horizontal {
    gap: clamp(4.8rem, 4vw, 10rem);
    grid-template-columns: 1fr;
  }
}

#voice-hero {
  -moz-column-gap: clamp(2.4rem, 5vw, 4.8rem);
       column-gap: clamp(2.4rem, 5vw, 4.8rem);
}
#voice-hero > div {
  margin-top: 3.2rem;
}
#voice-hero .device {
  left: 3.2rem;
  position: absolute;
  transform: rotate(22deg);
  top: 0;
}
@media (max-width: 768px) {
  #voice-hero {
    row-gap: 4.8rem;
    text-align: center;
  }
  #voice-hero > div > div {
    margin-bottom: 0 !important;
  }
}
@media (max-width: 1040px) {
  #voice-hero .device {
    left: 0;
    position: relative;
    top: 2.4rem;
    transform: rotate(0deg);
  }
}
#voice-hero figure {
  align-items: center;
  display: grid;
  justify-items: center;
}
#voice-hero figure > div {
  width: 40rem;
}
@media (max-width: 1040px) {
  #voice-hero figure > div {
    align-self: center;
    width: 30rem;
  }
}
@media (max-width: 768px) {
  #voice-hero figure > div {
    align-items: start !important;
    height: 24rem;
    width: 60vw;
  }
}

#clock,
#call-time {
  font-weight: 500;
  opacity: var(--str-mid);
  position: absolute;
  z-index: 2;
}

#clock {
  color: var(--base-tertiary);
  font-size: 5cqi;
  left: 15.2%;
  top: 4%;
}

#call-time {
  color: #77E9FF;
  font-size: 9cqi;
  left: 39%;
  top: 9.2%;
}

.audio-wave {
  align-items: center;
  display: flex;
  gap: 0.6rem;
  height: 10rem;
}
.audio-wave div {
  background-color: var(--base-primary);
  border-radius: 0.4rem;
  width: 0.4rem;
}
.audio-wave div:nth-child(1) {
  height: 0.6rem;
}
.audio-wave div:nth-child(2) {
  height: 1rem;
}
.audio-wave div:nth-child(3) {
  height: 2.1rem;
}
.audio-wave div:nth-child(4) {
  height: 3.2rem;
}
.audio-wave div:nth-child(5) {
  height: 1.6rem;
}
.audio-wave div:nth-child(6) {
  height: 4.2rem;
}
.audio-wave div:nth-child(7) {
  height: 6.2rem;
}
.audio-wave div:nth-child(8) {
  height: 4.6rem;
}
.audio-wave div:nth-child(9) {
  height: 2.4rem;
}
.audio-wave div:nth-child(10) {
  height: 1.9rem;
}
.audio-wave div:nth-child(11) {
  height: 1rem;
}
.audio-wave div:nth-child(12) {
  height: 2.7rem;
}
.audio-wave div:nth-child(13) {
  height: 1.6rem;
}
.audio-wave div:nth-child(14) {
  height: 0.6rem;
}

.audio {
  -moz-column-gap: 0;
       column-gap: 0;
  grid-template-rows: auto 1fr;
  row-gap: 2.4rem;
}
.audio > div {
  min-height: 0;
}
.audio:nth-child(2 of .audio) > .col:first-of-type > div:last-child {
  padding-right: 2.4rem;
}
.audio:nth-child(2 of .audio) > .col:last-of-type > div:last-child {
  padding-left: 2.4rem;
}
@media (max-width: 768px) {
  .audio:nth-child(2 of .audio) > .col:first-of-type > div:last-child,
  .audio:nth-child(2 of .audio) > .col:last-of-type > div:last-child {
    padding: 0;
  }
}
.audio .audio-showcase {
  display: grid;
  -moz-column-gap: 0;
       column-gap: 0;
  overflow: hidden;
  row-gap: 1.6rem;
}
.audio .audio-showcase .divider {
  background-image: radial-gradient(circle, black 0.05rem, transparent 0.05rem);
  background-size: 0.4rem 0.4rem;
  background-repeat: repeat-y;
  background-position: -0.2rem center;
}
@media (max-width: 768px) {
  .audio .audio-showcase {
    flex-direction: column;
    row-gap: 1.6rem;
  }
  .audio .audio-showcase .divider {
    background-image: none;
  }
}
.audio .audio-showcase > div::before {
  content: "";
  background-image: radial-gradient(var(--base-secondary) 0.1rem, transparent 0), radial-gradient(var(--base-secondary) 0.1rem, transparent 0);
  background-position: 0 0, 0.4rem 0.4rem;
  background-size: 0.8rem 0.8rem;
  height: 100%;
  inset: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}
.audio .audio-showcase > div {
  align-items: center;
  background-color: var(--base-secondary);
  aspect-ratio: 1/1;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  justify-content: end;
  isolation: isolate;
  max-height: 70vh;
  overflow: hidden;
  position: relative;
  padding-block: clamp(2.4rem, 5vw, 6.4rem);
  padding-inline: clamp(2.4rem, 5vw, 10rem);
  text-align: center;
  width: 100%;
  z-index: 1;
}
.audio .audio-showcase .info {
  align-items: center;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}
.audio .audio-showcase .info > div {
  align-items: center;
  display: flex;
  flex-direction: column;
}
.audio .audio-showcase .info > div .audio-wave {
  margin-bottom: clamp(0.8rem, 2vw, 3.2rem);
}

.audio-scope {
  gap: 1.6rem;
}
.audio-scope .title {
  opacity: 1;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.3s ease;
}
.audio-scope .info {
  gap: 1.6rem;
}
.audio-scope.is-playing .audio-captions {
  position: relative;
}
.audio-scope.is-playing .title {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

.audio-captions {
  align-items: start !important;
  aspect-ratio: 1/1;
  display: flex;
  flex-direction: column;
  gap: 0.8rem !important;
  justify-content: end;
  overflow: hidden;
  position: absolute;
  text-align: left;
  width: 100%;
}
.audio-captions .caption {
  border: 0.1rem solid var(--base-secondary);
  border-radius: 0.8rem;
  display: none;
  max-width: 80%;
  padding: 1.6rem;
  opacity: 0;
  transform: translateY(0.4rem);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.audio-captions .caption.is-visible {
  opacity: 1;
  transform: translateY(0);
  display: block;
  animation: captionIn 0.25s ease forwards;
}
.audio-captions .caption.is-visible.is-near-top {
  opacity: 0 !important;
  transition: opacity 0.3s ease;
}
.audio-captions .caption.customer {
  align-self: end;
  background-color: var(--accent-primary);
  color: var(--base-tertiary);
}
.audio-captions .caption.chatbot {
  background-color: var(--base-tertiary);
}

.scroll-wrapper {
  margin-inline: calc(-1 * clamp(2.4rem, 5vw, 5.6rem));
  -webkit-mask-image: linear-gradient(to right, transparent 0, black clamp(2.4rem, 5vw, 5.6rem), black calc(100% - clamp(2.4rem, 5vw, 5.6rem)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, black clamp(2.4rem, 5vw, 5.6rem), black calc(100% - clamp(2.4rem, 5vw, 5.6rem)), transparent 100%);
  padding-inline: clamp(2.4rem, 5vw, 5.6rem);
  overflow-x: auto;
}
.scroll-wrapper > ul {
  display: grid;
  gap: clamp(2.4rem, 5vw, 3.2rem);
  grid-template-columns: repeat(7, 1fr);
  min-width: -moz-max-content;
  min-width: max-content;
}
.scroll-wrapper > ul li > ul {
  display: flex;
  flex-direction: column;
}
.scroll-wrapper > ul li > ul li {
  align-items: center;
  display: flex;
  justify-content: stretch;
  padding: 0.8rem 1.6rem 0.8rem 2.4rem;
  position: relative;
}
.scroll-wrapper > ul li > ul li.used > div:first-child::before {
  color: inherit;
  content: "■";
  left: 1rem;
  line-height: 1.5rem;
  padding-bottom: 0.2rem;
  position: absolute;
}
.scroll-wrapper > ul li > ul li div {
  flex: 1 1 auto;
}
.scroll-wrapper > ul li > ul li div:last-child {
  text-align: right;
}

.ramp ul li ul li {
  text-transform: uppercase;
}
.ramp .legend {
  margin-top: 2.4rem;
}
.ramp .legend div {
  align-items: center;
  display: flex;
}
.ramp .legend div:first-of-type {
  margin-bottom: 0.8rem;
}
.ramp .legend div span:first-child {
  margin-right: 0.8rem;
}

.equals {
  display: flex;
  flex-wrap: wrap;
  gap: 3.2rem;
  justify-content: center;
}
@media (max-width: 1040px) {
  .equals {
    flex-direction: column;
  }
}
.equals .font-headline-md {
  margin-top: -1.6rem;
}

.token-collection {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.token-showcase {
  display: grid;
  -moz-column-gap: 0;
       column-gap: 0;
  overflow: hidden;
  row-gap: 1.6rem;
}
@media (max-width: 768px) {
  .token-showcase {
    flex-direction: column;
    row-gap: 1.6rem;
  }
}
.token-showcase > div {
  display: grid;
  width: 100%;
}
.token-showcase > div .video {
  display: flex;
  justify-content: center;
  padding-bottom: 0.4rem;
  width: 100%;
}
.token-showcase > div .video video {
  width: clamp(50rem, 45vw, 50rem);
}
.token-showcase > div.light .video {
  background-image: radial-gradient(circle, black 0.05rem, transparent 0.05rem);
  background-size: 0.4rem 0.4rem;
  background-repeat: repeat-x;
  background-position: bottom;
}
.token-showcase > div.light .no-color {
  background: linear-gradient(to top right, transparent calc(50% - 1px), var(--base-primary), transparent calc(50% + 1px));
}
.token-showcase > div.dark .video {
  background-image: radial-gradient(circle, white 0.05rem, transparent 0.05rem);
  background-size: 0.4rem 0.4rem;
  background-repeat: repeat-x;
  background-position: bottom;
}
.token-showcase > div.dark .no-color {
  background: linear-gradient(to top right, transparent calc(50% - 1px), var(--base-tertiary), transparent calc(50% + 1px));
}
.token-showcase .token-list {
  gap: 2.4rem;
  grid-template-columns: auto 1fr;
  padding: 2.4rem 3.2rem;
}
@media (max-width: 1040px) {
  .token-showcase .token-list {
    grid-template-columns: 1fr;
  }
}

.component-showcase {
  align-items: flex-start;
  display: flex;
  padding: 5.6rem 4.8rem;
}
@media (max-width: 768px) {
  .component-showcase {
    flex-direction: column;
  }
}
.component-showcase video {
  flex: 0 1 32%;
  min-width: 0;
}

#row {
  display: grid;
  -moz-column-gap: clamp(2.4rem, 5vw, 6.4rem);
       column-gap: clamp(2.4rem, 5vw, 6.4rem);
  grid-template-columns: repeat(3, 1fr);
  position: relative;
  padding-block-start: 2.4rem;
  row-gap: clamp(2.4rem, 6vw, 4.8rem);
}
@media (max-width: 1040px) {
  #row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  #row {
    grid-template-columns: 1fr;
  }
}
#row .line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 0.8rem;
  pointer-events: none;
  background-image: radial-gradient(circle, black 0.05rem, transparent 0.05rem);
  background-size: 0.4rem 0.4rem;
  background-repeat: repeat-x;
  background-position: top;
}

#fruti {
  background-image: url(/assets/images/other-hero-background.jpg);
  background-size: cover;
  background-position: center;
}
#fruti figure {
  width: clamp(36rem, 50vw, 56rem);
}
#fruti figure .fruit {
  width: 95%;
}
@media (max-width: 1040px) {
  #fruti {
    min-height: 100vh;
    min-height: 100svh;
  }
}
@media (max-width: 768px) {
  #fruti {
    min-height: 70vh;
    min-height: 70svh;
  }
}

#blob {
  display: block;
  height: auto;
  position: absolute;
  width: 90%;
  z-index: -1;
}

#branding {
  align-items: end;
  display: grid;
  grid-template-columns: auto 1fr;
}
#branding figure {
  display: grid;
  gap: 0;
  grid-template: repeat(3, 1fr)/repeat(3, 1fr);
  position: relative;
  aspect-ratio: 1/1;
  width: clamp(20rem, 50vw, 60rem);
}
#branding figure::after {
  background: linear-gradient(to right, var(--gradient-color-box), transparent) left, linear-gradient(to left, var(--gradient-color-box), transparent) right, linear-gradient(to bottom, var(--gradient-color-box), transparent) top, linear-gradient(to top, var(--gradient-color-box), transparent) bottom;
  background-repeat: no-repeat;
  background-size: 10rem 100%, 10rem 100%, 100% 10rem, 100% 10rem; /* bottom */
  background-position: left, right, top, bottom;
  content: "";
  inset: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
  position: absolute;
}
#branding div {
  min-width: 0;
}

#florida::before {
  content: "";
  background-image: radial-gradient(var(--base-secondary) 0.1rem, transparent 0), radial-gradient(var(--base-secondary) 0.1rem, transparent 0);
  background-position: 0 0, 0.4rem 0.4rem;
  background-size: 0.8rem 0.8rem;
  height: 100%;
  inset: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}
#florida {
  row-gap: 3.2rem;
}
@media (max-width: 1040px) {
  #florida figure {
    grid-template-columns: 1fr;
  }
}

#makro {
  align-items: end;
}
#makro figure {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  grid-column: span 3;
}
#makro div {
  grid-column: span 2;
}

#sonae::before {
  content: "";
  background-image: radial-gradient(var(--base-secondary) 0.1rem, transparent 0), radial-gradient(var(--base-secondary) 0.1rem, transparent 0);
  background-position: 0 0, 0.4rem 0.4rem;
  background-size: 0.8rem 0.8rem;
  height: 100%;
  inset: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}
#sonae {
  position: relative;
}
#sonae .asset {
  border-radius: 0;
  left: 11.5%;
  top: 6%;
  width: 77%;
}

#sibs {
  align-items: center;
  background-color: #f37021;
  justify-items: center;
}
#sibs figure {
  grid-column: span 3;
}
#sibs div {
  align-self: end;
}

#multicert > div,
#multicert > figure {
  width: min(100%, 95rem);
}
#multicert figure {
  position: relative;
}
#multicert figure button {
  bottom: 2.4rem;
  position: absolute;
  right: 2.4rem;
}

@media (max-width: 1040px) {
  #branding,
  #florida,
  #makro,
  #sonae,
  #sibs {
    align-items: center;
    gap: clamp(4.8rem, 6vw, 10rem);
    grid-template-columns: 1fr;
    justify-items: center;
  }
  #branding figure,
  #florida figure,
  #makro figure,
  #sonae figure,
  #sibs figure {
    grid-column: unset;
    max-width: 70%;
  }
  #branding div,
  #florida div,
  #makro div,
  #sonae div,
  #sibs div {
    grid-column: unset;
  }
}
@media (max-width: 768px) {
  #branding,
  #florida,
  #makro,
  #sonae,
  #sibs {
    grid-auto-rows: max-content;
  }
  #branding figure,
  #florida figure,
  #makro figure,
  #sonae figure,
  #sibs figure {
    grid-column: unset;
    min-width: 100%;
  }
  #branding div,
  #florida div,
  #makro div,
  #sonae div,
  #sibs div {
    align-self: start;
    grid-column: unset;
  }
}

/* Input field grows out of screen + motion blur

transition: 4s;
transform: scale(20); 

gradient with different color starts growing
at the same time, simulate zoom/perspective

cursor flashes
LLM output streams
min-height 100vh check
*//*# sourceMappingURL=styles.css.map */