@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/Inter-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/Inter-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: block;
}

@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/Inter-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: block;
}

@font-face {
  font-family: "Geist";
  src: url("./assets/fonts/geist-v5-latin-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

@font-face {
  font-family: "Geist";
  src: url("./assets/fonts/geist-v5-latin-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: block;
}

@font-face {
  font-family: "Arcade Interlaced";
  src: url("./assets/fonts/Arcade-Interlaced-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

@font-face {
  font-family: "Proto Mono";
  src: url("./assets/fonts/ProtoMono-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

@font-face {
  font-family: "Proto Mono";
  src: url("./assets/fonts/ProtoMono-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: block;
}

@font-face {
  font-family: "Proto Mono";
  src: url("./assets/fonts/ProtoMono-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: block;
}

@font-face {
  font-family: "Helvetica Neue LT Pro";
  src: url("./assets/fonts/HelveticaNeue Light.ttf") format("truetype");
  font-style: normal;
  font-weight: 300;
  font-display: block;
}

@font-face {
  font-family: "Helvetica Neue LT Pro";
  src: url("./assets/fonts/HelveticaNeue Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: block;
}

@font-face {
  font-family: "Helvetica Neue LT Pro";
  src: url("./assets/fonts/HelveticaNeue Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: block;
}

@font-face {
  font-family: "ABC Diatype";
  src: url("./assets/fonts/abc-diatype-regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

@font-face {
  font-family: "Helvetica Monospaced W1G";
  src:
    url("https://blimp.b-cdn.net/wp-content/themes/theblimp/dist/fonts/HelveticaMonospacedW1G-Rg_1fb8ea46.woff2") format("woff2"),
    url("https://blimp.b-cdn.net/wp-content/themes/theblimp/dist/fonts/HelveticaMonospacedW1G-Rg_ec5a449c.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color: #ffffff;
  background: #000000;
  font-family: "Inter", Arial, sans-serif;
  font-synthesis: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  --presentation-cursor: url("./assets/images/pixel-cursor.png") 0 0, auto;
}

* {
  box-sizing: border-box;
}

@property --summary-timer-empty {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000000;
}

body {
  min-width: 320px;
  cursor: var(--presentation-cursor);
}

.stage {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  background: #000000;
  cursor: var(--presentation-cursor);
}

.slide {
  grid-area: 1 / 1;
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  overflow: hidden;
  background: #000000;
  container-type: size;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 520ms ease,
    visibility 520ms ease;
  visibility: hidden;
}

.slide.is-active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.name {
  position: absolute;
  left: 49.9739583333%;
  top: 44.6296296296%;
  transform: translateX(-50%);
  margin: 0;
  color: #ffffff;
  font-family: "Inter", Arial, sans-serif;
  font-size: 2.5cqw;
  font-weight: 400;
  font-style: normal;
  line-height: normal;
  letter-spacing: 2.175cqw;
  text-align: center;
  white-space: nowrap;
}

.shortcut-row {
  position: absolute;
  left: 33.3072916667%;
  width: 31.1458333333%;
  height: 2.8703703704%;
  color: #999999;
  font-size: 1.0416666667cqw;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.1666666667cqw;
}

.shortcut-row-one {
  top: 57.4074074074%;
}

.shortcut-row-two {
  top: 61.7592592593%;
}

.browser-label,
.shortcut-command {
  position: absolute;
  margin: 0;
  white-space: nowrap;
}

.browser-label {
  left: 0;
  top: 0.1041666667cqw;
  font-family: "Inter", Arial, sans-serif;
}

.shortcut-command {
  right: 0;
  top: 0;
  font-family: "Geist", "Inter", Arial, sans-serif;
  text-align: right;
  animation: shortcut-breathe 4.8s ease-in-out infinite;
}

.shortcut-command-delayed {
  animation-delay: 0.45s;
}

.cover-controls {
  position: absolute;
  left: 50%;
  bottom: 8.3333333333%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: min(68.75cqw, 90%);
  margin: 0;
  gap: 1.0416666667cqw 3.125cqw;
  color: #969696;
  font-family: "Geist", "Inter", Arial, sans-serif;
  font-size: 0.8333333333cqw;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.0833333333cqw;
  text-transform: uppercase;
  transform: translateX(-50%);
  animation: cover-controls-breathe 5.6s ease-in-out infinite;
}

.cover-control {
  display: inline-flex;
  align-items: center;
  gap: 0.5208333333cqw;
  margin: 0;
  white-space: nowrap;
}

.cover-control:nth-child(2) {
  gap: 0.46875cqw;
}

.cover-control__or {
  color: rgb(255 255 255 / 0.36);
  font-size: 0.625cqw;
}

.cover-key {
  display: inline-grid;
  place-items: center;
  min-width: 1.5625cqw;
  height: 1.3541666667cqw;
  box-sizing: border-box;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 0.2604166667cqw;
  background: rgb(255 255 255 / 0.035);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.08),
    0 0 0.4166666667cqw rgb(255 255 255 / 0.04);
  color: rgb(255 255 255 / 0.74);
  font-family: "Geist", "Inter", Arial, sans-serif;
  font-size: 0.78125cqw;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}

.cover-key--space {
  min-width: 3.6979166667cqw;
  padding: 0 0.5208333333cqw;
  font-size: 0.625cqw;
  letter-spacing: 0.1041666667cqw;
  text-transform: uppercase;
}

.cover-mouse {
  position: relative;
  display: inline-block;
  width: 1.0416666667cqw;
  height: 1.4583333333cqw;
  box-sizing: border-box;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 0.5208333333cqw;
  background: rgb(255 255 255 / 0.025);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.08),
    0 0 0.4166666667cqw rgb(255 255 255 / 0.04);
}

.cover-mouse::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 0.625cqw;
  background: rgb(255 255 255 / 0.18);
  transform: translateX(-50%);
}

.cover-mouse::after {
  content: "";
  position: absolute;
  left: 0.2083333333cqw;
  top: 0.2083333333cqw;
  width: 0.2083333333cqw;
  height: 0.4166666667cqw;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.68);
  box-shadow: 0 0 0.4166666667cqw rgb(255 255 255 / 0.16);
}

@keyframes shortcut-breathe {
  0%,
  100% {
    color: #8f8f8f;
    opacity: 0.76;
    text-shadow: 0 0 0 rgb(255 255 255 / 0);
  }

  50% {
    color: #eeeeee;
    opacity: 1;
    text-shadow:
      0 0 8px rgb(255 255 255 / 0.24),
      0 0 20px rgb(255 255 255 / 0.18),
      0 0 34px rgb(255 255 255 / 0.1);
  }
}

@keyframes cover-controls-breathe {
  0%,
  100% {
    opacity: 0.64;
    text-shadow: 0 0 0 rgb(255 255 255 / 0);
  }

  50% {
    opacity: 0.94;
    text-shadow:
      0 0 7px rgb(255 255 255 / 0.12),
      0 0 18px rgb(255 255 255 / 0.08);
  }
}

.slide--about {
  color: #eeeeee;
}

.about-light {
  position: absolute;
  left: 12.5%;
  top: 12.037037037%;
  width: 39.0625%;
  height: 69.4444444444%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 45% 45%, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0.04) 32%, rgb(255 255 255 / 0) 68%),
    radial-gradient(circle at 62% 58%, rgb(234 15 50 / 0.14), rgb(234 15 50 / 0) 56%);
  filter: blur(48px);
  opacity: 0.62;
  transform: translate3d(-1.5%, 1%, 0) scale(0.98);
  animation: ambient-drift 12s ease-in-out infinite;
}

.about-profile {
  position: absolute;
  left: 16.40625%;
  top: 17.5925925926%;
  width: 25%;
  opacity: 0;
  transform: translate3d(0, 18px, 0);
}

.slide--about.is-active .about-profile {
  animation: about-rise 760ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
}

.portrait-card,
.profile-note {
  position: relative;
  margin: 0;
  border: 1px solid rgb(255 255 255 / 0.13);
  background: rgb(255 255 255 / 0.055);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.025) inset,
    0 24px 80px rgb(0 0 0 / 0.48);
}

.portrait-card::before,
.profile-note::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: -5px;
  background:
    linear-gradient(#8f8f8f, #8f8f8f) left top / 16px 1px no-repeat,
    linear-gradient(#8f8f8f, #8f8f8f) left top / 1px 16px no-repeat,
    linear-gradient(#8f8f8f, #8f8f8f) right top / 16px 1px no-repeat,
    linear-gradient(#8f8f8f, #8f8f8f) right top / 1px 16px no-repeat,
    linear-gradient(#8f8f8f, #8f8f8f) left bottom / 16px 1px no-repeat,
    linear-gradient(#8f8f8f, #8f8f8f) left bottom / 1px 16px no-repeat,
    linear-gradient(#8f8f8f, #8f8f8f) right bottom / 16px 1px no-repeat,
    linear-gradient(#8f8f8f, #8f8f8f) right bottom / 1px 16px no-repeat;
  opacity: 0.52;
}

.portrait-card {
  padding: 0.9375cqw;
}

.portrait-card__meta,
.profile-note__label,
.profile-note__text,
.about-copy__eyebrow {
  font-family: "Geist", "Inter", Arial, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}

.portrait-card__meta {
  color: #9a9a9a;
  font-size: 0.7291666667cqw;
  line-height: 1;
  margin-bottom: 0.8333333333cqw;
}

.portrait-card__image-wrap {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: #d8d8d4;
}

.portrait-card__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  user-select: none;
}

.profile-note {
  margin-top: 1.3541666667cqw;
  min-height: 6.0185185185cqh;
  padding: 1.0416666667cqw 1.1458333333cqw;
}

.profile-note__label,
.profile-note__text {
  margin: 0;
  line-height: 1.25;
}

.profile-note__label {
  color: #eeeeee;
  font-size: 0.7291666667cqw;
}

.profile-note__text {
  color: #8d8d8d;
  font-size: 0.625cqw;
  margin-top: 0.625cqw;
}

.about-copy {
  position: absolute;
  left: 47.9166666667%;
  top: 19.3518518519%;
  width: 36.4583333333%;
  opacity: 0;
  transform: translate3d(0, 18px, 0);
}

.slide--about.is-active .about-copy {
  animation: about-rise 760ms cubic-bezier(0.16, 1, 0.3, 1) 220ms both;
}

.about-copy__eyebrow {
  color: #8e8e8e;
  font-size: 0.7291666667cqw;
  line-height: 1;
  margin: 0 0 1.25cqw;
}

.about-copy__title {
  max-width: 31.25cqw;
  margin: 0;
  color: #f2f2f2;
  font-family: "Inter", Arial, sans-serif;
  font-size: 2.1875cqw;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.12;
}

.about-copy__body {
  margin-top: 2.3958333333cqw;
  color: #b8b8b8;
  font-family: "Inter", Arial, sans-serif;
  font-size: 1.09375cqw;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.55;
}

.about-copy__body p {
  margin: 0;
}

.about-copy__body p + p {
  margin-top: 2.5260416667cqw;
}

.slide-state {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 620ms ease,
    transform 620ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 620ms ease;
  visibility: hidden;
}

.slide-state.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  visibility: visible;
}

.slide-state.is-exiting-left {
  transform: translate3d(-2.4%, 0, 0) scale(0.985);
}

.slide-state.is-exiting-right {
  transform: translate3d(2.4%, 0, 0) scale(0.985);
}

.slide--mapping {
  color: #f4f4f4;
}

.mapping-light {
  position: absolute;
  left: 6.25%;
  top: 10.1851851852%;
  width: 84.375%;
  height: 72.2222222222%;
  background:
    radial-gradient(circle at 31% 44%, rgb(255 255 255 / 0.11), rgb(255 255 255 / 0.035) 30%, rgb(255 255 255 / 0) 58%),
    radial-gradient(circle at 66% 47%, rgb(18 97 255 / 0.14), rgb(18 97 255 / 0.035) 32%, rgb(18 97 255 / 0) 62%);
  filter: blur(56px);
  opacity: 0.72;
  animation: mapping-light-drift 14s ease-in-out infinite;
}

.whitepaper-panel {
  position: absolute;
  left: 13.75%;
  top: 10.1851851852%;
  width: 28.3333333333%;
  opacity: 0;
  transform: translate3d(0, 22px, 0);
}

.slide--mapping.is-active .mapping-state.is-active .whitepaper-panel {
  animation: about-rise 780ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
}

.whitepaper-panel__rail {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.7291666667cqw;
  color: #8d8d8d;
  font-family: "Geist", "Inter", Arial, sans-serif;
  font-size: 0.625cqw;
  font-weight: 400;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.whitepaper-sheet {
  position: relative;
  aspect-ratio: 8.5 / 11;
  width: 100%;
  overflow: hidden;
  background: #ffffff;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.2),
    0 30px 90px rgb(0 0 0 / 0.58),
    0 0 44px rgb(255 255 255 / 0.1);
}

.whitepaper-sheet::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: -6px;
  z-index: 1;
  background:
    linear-gradient(#9b9b9b, #9b9b9b) left top / 20px 1px no-repeat,
    linear-gradient(#9b9b9b, #9b9b9b) left top / 1px 20px no-repeat,
    linear-gradient(#9b9b9b, #9b9b9b) right top / 20px 1px no-repeat,
    linear-gradient(#9b9b9b, #9b9b9b) right top / 1px 20px no-repeat,
    linear-gradient(#9b9b9b, #9b9b9b) left bottom / 20px 1px no-repeat,
    linear-gradient(#9b9b9b, #9b9b9b) left bottom / 1px 20px no-repeat,
    linear-gradient(#9b9b9b, #9b9b9b) right bottom / 20px 1px no-repeat,
    linear-gradient(#9b9b9b, #9b9b9b) right bottom / 1px 20px no-repeat;
  opacity: 0.48;
}

.whitepaper-sheet__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  user-select: none;
}

.mapping-copy {
  position: absolute;
  left: 50.5208333333%;
  top: 19.2592592593%;
  width: 35.4166666667%;
  opacity: 0;
  transform: translate3d(0, 22px, 0);
}

.slide--mapping.is-active .mapping-state.is-active .mapping-copy {
  animation: about-rise 780ms cubic-bezier(0.16, 1, 0.3, 1) 210ms both;
}

.mapping-copy__eyebrow,
.mapping-copy__body {
  font-family: "Geist", "Inter", Arial, sans-serif;
}

.mapping-copy__eyebrow {
  margin: 0 0 1.3541666667cqw;
  color: #8e8e8e;
  font-size: 0.7291666667cqw;
  font-weight: 400;
  letter-spacing: 0.11em;
  line-height: 1;
  text-transform: uppercase;
}

.mapping-copy__title {
  max-width: 29.1666666667cqw;
  margin: 0;
  color: #f4f4f4;
  font-family: "Inter", Arial, sans-serif;
  font-size: 2.2916666667cqw;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.08;
}

.mapping-copy__body {
  margin-top: 2.5cqw;
  color: #bbbbbb;
  font-size: 1.0416666667cqw;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.52;
}

.mapping-copy__body p {
  margin: 0;
}

.mapping-copy__body p + p {
  margin-top: 1.3541666667cqw;
}

.mapping-state--pools {
  display: grid;
  place-items: center;
}

.mapping-state--chart {
  display: grid;
  place-items: center;
  background: #000000;
}

.slide--mapping:has(.mapping-state--chart.is-active) .mapping-light,
.slide--mapping:has(.mapping-state--breaker.is-active) .mapping-light {
  opacity: 0;
  visibility: hidden;
}

.chart-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625cqw;
  width: min(36cqw, calc(36cqh * 1.715));
  margin: 0;
}

.chart-slide__chart {
  width: 100%;
  --f-mono: "Helvetica Monospaced W1G", "Courier New", Courier, monospace;
}

.chart-slide__caption {
  max-width: 52cqw;
  margin: 0;
  color: rgb(255 255 255 / 0.56);
  font-family: "Geist", "Inter", Arial, sans-serif;
  font-size: 1.0416666667cqw;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.45;
  text-align: center;
}

.mapping-state--breaker,
.mapping-state--density-breaker,
.mapping-state--text-breaker {
  display: grid;
  place-items: center;
  background: #000000;
}

.breaker-text,
.breaker-line {
  max-width: 60cqw;
  margin: 0;
  color: rgb(255 255 255 / 0.74);
  font-family: "Geist", "Inter", Arial, sans-serif;
  font-size: 2.1875cqw;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.18;
  text-align: center;
  text-shadow:
    0 0 4px rgb(255 255 255 / 0.16),
    0 0 18px rgb(255 255 255 / 0.06);
  animation: breaker-text-breathe 4.8s ease-in-out infinite;
}

.mapping-state--discover {
  display: grid;
  place-items: center;
}

.mapping-state--image {
  display: grid;
  place-items: center;
  background: #000000;
  overflow: hidden;
}

.kinetic-image-stage {
  display: grid;
  place-items: center;
  width: min(86vw, 82rem);
  max-width: 86%;
  max-height: 82%;
  margin: 0;
  opacity: 0;
  transform: translate3d(0, 0.8rem, 0) scale(0.985);
}

.mapping-state--image.is-active .kinetic-image-stage {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  animation: kinetic-image-stage-in 760ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
}

.kinetic-image-stage img {
  display: block;
  width: 100%;
  max-height: 82vh;
  border-radius: 0.4166666667cqw;
  object-fit: contain;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.08),
    0 1.25rem 4rem rgb(0 0 0 / 0.45);
}

.kinetic-image-stage--pool-detail {
  width: min(74vw, 76rem);
}

.kinetic-image-stage--leaderboard {
  width: min(86vw, 86rem);
}

.kinetic-image-stage--modal {
  width: min(62vw, 58rem);
}

.mapping-state--testimonials {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 48%, rgb(255 255 255 / 0.035), transparent 32%),
    #000000;
  overflow: hidden;
}

.testimonial-collage {
  position: relative;
  width: min(92vw, 92rem);
  height: min(78vh, 46rem);
}

.testimonial-shot {
  position: absolute;
  display: block;
  height: auto;
  border-radius: 0.55rem;
  opacity: 0;
  transform: translate3d(0, 1.4rem, 0) scale(0.96) rotate(var(--testimonial-rotate));
  transform-origin: center;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.08),
    0 1.25rem 3.5rem rgb(0 0 0 / 0.56);
}

.mapping-state--testimonials.is-active .testimonial-shot {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1) rotate(var(--testimonial-rotate));
  animation: testimonial-shot-in 820ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--testimonial-delay);
}

.testimonial-shot--01 {
  --testimonial-delay: 120ms;
  --testimonial-rotate: -2deg;
  left: 4%;
  top: 5%;
  z-index: 2;
  width: 40%;
}

.testimonial-shot--02 {
  --testimonial-delay: 220ms;
  --testimonial-rotate: 1.2deg;
  right: 4%;
  top: 3%;
  z-index: 2;
  width: 42%;
}

.testimonial-shot--03 {
  --testimonial-delay: 320ms;
  --testimonial-rotate: -1.4deg;
  left: 35%;
  top: 29%;
  z-index: 3;
  width: 28%;
}

.testimonial-shot--04 {
  --testimonial-delay: 420ms;
  --testimonial-rotate: 1.8deg;
  left: 5%;
  top: 42%;
  z-index: 4;
  width: 48%;
}

.testimonial-shot--05 {
  --testimonial-delay: 520ms;
  --testimonial-rotate: -2.2deg;
  right: 8%;
  top: 34%;
  z-index: 3;
  width: 24%;
}

.testimonial-shot--06 {
  --testimonial-delay: 620ms;
  --testimonial-rotate: 2deg;
  right: 23%;
  top: 54%;
  z-index: 5;
  width: 22%;
}

.testimonial-shot--07 {
  --testimonial-delay: 720ms;
  --testimonial-rotate: -0.8deg;
  right: 3%;
  bottom: 2%;
  z-index: 5;
  width: 25%;
}

.testimonial-shot--08 {
  --testimonial-delay: 820ms;
  --testimonial-rotate: 1.4deg;
  left: 4%;
  bottom: 2%;
  z-index: 3;
  width: 37%;
}

.testimonial-shot--09 {
  --testimonial-delay: 920ms;
  --testimonial-rotate: -1.8deg;
  left: 39%;
  bottom: 6%;
  z-index: 6;
  width: 33%;
}

.kinetic-artifact--discover {
  --discover-black: #0f0e0c;
  --discover-grey-900: #1a1a1a;
  --discover-grey-800: #343a40;
  --discover-grey-700: #495057;
  --discover-grey-600: #6c757d;
  --discover-grey-500: #adb5bd;
  --discover-purple: #bf73dd;
  --discover-green: #1fae69;
  --discover-green-bright: #33d084;
  --discover-red: #dd4c4f;
  --discover-red-soft: #ff8588;
  --discover-dandelion: #feda75;
  --discover-gradient: linear-gradient(105.009deg, #feda75 1.966%, #fa7e1e 35.546%, #d62976 69.127%, #962fbf 102.71%, #4f5bd5 136.29%);
  background: var(--discover-black);
  container-type: inline-size;
}

.kinetic-artifact--discover {
  aspect-ratio: 1440 / 1024;
  width: min(72cqw, calc(86cqh * 1.40625));
  grid-template-rows: 6.25% 90.625% 3.125%;
}

.slide--mapping.is-active .mapping-state--discover.is-active .kinetic-artifact--discover {
  animation: kinetic-artifact-in 760ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
}

.discover-body {
  position: relative;
  overflow: hidden;
  background: var(--discover-black);
  font-family: "Helvetica Neue LT Pro", Arial, sans-serif;
}

.discover-spotlight {
  position: relative;
  height: 21.1111111111cqw;
  padding: 1.1111111111cqw;
  border-bottom: 1px solid var(--discover-grey-900);
}

.discover-widget-toggle {
  position: absolute;
  right: 1.1111111111cqw;
  top: 1.1111111111cqw;
  display: flex;
  align-items: center;
  gap: 1.1111111111cqw;
  color: var(--discover-grey-500);
  font-size: 1.1111111111cqw;
  line-height: 1.6666666667cqw;
}

.discover-widget-toggle span {
  width: 1px;
  height: 1.6666666667cqw;
  background: var(--discover-grey-900);
}

.discover-widget-toggle i {
  width: 0.8333333333cqw;
  height: 0.5555555556cqw;
  border-radius: 999px;
  background: var(--discover-purple);
  box-shadow:
    0 0 0.2777777778cqw rgb(191 115 221 / 0.25),
    0 0 0.5555555556cqw rgb(191 115 221 / 0.5);
}

.discover-widget-grid {
  position: absolute;
  left: 1.1111111111cqw;
  right: 1.1111111111cqw;
  top: 3.8888888889cqw;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1111111111cqw;
}

.discover-widget {
  height: 16.1111111111cqw;
  border: 1px solid var(--discover-grey-800);
  border-radius: 0.4166666667cqw;
  background: var(--discover-grey-900);
  padding: 1.1111111111cqw;
}

.discover-widget header,
.discover-spot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.discover-widget header {
  margin-bottom: 1.1111111111cqw;
}

.discover-widget header > span,
.discover-spot-row > span {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.discover-widget header > span {
  gap: 0.5555555556cqw;
}

.discover-widget header img {
  width: 2.2222222222cqw;
  height: 2.2222222222cqw;
}

.discover-widget header b {
  border-bottom: 1px dashed var(--discover-grey-700);
  color: #ffffff;
  font-family: "Arcade Interlaced", "Proto Mono", monospace;
  font-size: 0.9722222222cqw;
  font-weight: 400;
  line-height: 1.1111111111cqw;
  text-transform: uppercase;
  text-shadow:
    0 0 0.2777777778cqw rgb(255 255 255 / 0.25),
    0 0 0.5555555556cqw rgb(255 255 255 / 0.5);
}

.discover-widget header p {
  display: grid;
  grid-template-columns: 4.4444444444cqw 5.6944444444cqw;
  gap: 1.1111111111cqw;
  margin: 0;
  color: var(--discover-grey-500);
  font-size: 1.1111111111cqw;
  font-style: normal;
  font-weight: 300;
  line-height: 1.6666666667cqw;
  text-align: right;
}

.discover-widget header em,
.discover-spot-row i {
  font-style: normal;
}

.discover-widget__rows {
  display: flex;
  flex-direction: column;
  gap: 0.5555555556cqw;
}

.discover-spot-row {
  height: 1.6666666667cqw;
  color: #ffffff;
  font-size: 0.9722222222cqw;
  font-weight: 500;
  line-height: 1.3888888889cqw;
}

.discover-spot-row > span {
  gap: 0.5555555556cqw;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow:
    0 0 0.2777777778cqw rgb(255 255 255 / 0.25),
    0 0 0.5555555556cqw rgb(255 255 255 / 0.5);
}

.discover-spot-row img,
.discover-token-dot {
  width: 1.6666666667cqw;
  height: 1.6666666667cqw;
  border-radius: 999px;
  object-fit: cover;
}

.discover-token-dot {
  display: inline-block;
  background: radial-gradient(circle at 38% 34%, #ffffff, #e02525 38%, #8b0f12);
}

.discover-token-dot.is-meta {
  background: radial-gradient(circle at 42% 38%, #ffffff, #101010 42%, #000000);
}

.discover-spot-row b {
  width: 5.5555555556cqw;
  font-weight: 500;
  text-align: right;
}

.discover-spot-row i {
  position: relative;
  width: 5.6944444444cqw;
  padding-left: 1.1111111111cqw;
  text-align: right;
}

.discover-spot-row i::before,
.change::before {
  position: absolute;
  left: 0.4166666667cqw;
  top: 50%;
  width: 0;
  height: 0;
  border-right: 0.2777777778cqw solid transparent;
  border-left: 0.2777777778cqw solid transparent;
  content: "";
  transform: translateY(-50%);
}

.discover-spot-row .is-up,
.is-up-text {
  color: var(--discover-green);
  text-shadow:
    0 0 0.2777777778cqw rgb(31 174 105 / 0.25),
    0 0 0.5555555556cqw rgb(31 174 105 / 0.5);
}

.discover-spot-row .is-up::before,
.change[class*="is-green"]::before {
  border-bottom: 0.3472222222cqw solid currentColor;
}

.discover-spot-row .is-down {
  color: var(--discover-red);
  text-shadow:
    0 0 0.2777777778cqw rgb(254 31 87 / 0.25),
    0 0 0.5555555556cqw rgb(254 31 87 / 0.5);
}

.discover-spot-row .is-down::before,
.change[class*="is-red"]::before {
  border-top: 0.3472222222cqw solid currentColor;
}

.discover-table {
  position: relative;
  height: 42.2222222222cqw;
  color: #ffffff;
  font-family: "Helvetica Neue LT Pro", Arial, sans-serif;
}

.discover-tabs {
  display: flex;
  align-items: center;
  height: 3.3333333333cqw;
  padding: 0 1.1111111111cqw;
  gap: 1.6666666667cqw;
  color: var(--discover-grey-600);
  font-size: 0.9722222222cqw;
  font-weight: 500;
  line-height: 1.3888888889cqw;
}

.discover-tabs span {
  display: inline-flex;
  align-items: center;
  height: 3.3333333333cqw;
}

.discover-tabs .is-active {
  border-bottom: 2px solid var(--discover-purple);
  color: var(--discover-purple);
  font-weight: 700;
  text-shadow:
    0 0 0.2777777778cqw rgb(191 115 221 / 0.25),
    0 0 0.5555555556cqw rgb(191 115 221 / 0.5);
}

.discover-tabs .is-gradient {
  background: var(--discover-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.discover-tabs b,
.discover-tabs em {
  display: inline-flex;
  align-items: center;
  gap: 0.2777777778cqw;
  margin-left: auto;
  color: var(--discover-grey-600);
  font-style: normal;
  font-weight: 700;
}

.discover-tabs em {
  margin-left: 0;
  height: 1.6666666667cqw;
  padding: 0 0.5555555556cqw;
  border: 1px solid var(--discover-grey-800);
  border-radius: 0.4166666667cqw;
  background: var(--discover-grey-900);
  color: var(--discover-purple);
  text-transform: uppercase;
}

.discover-tabs em i {
  color: var(--discover-grey-600);
  font-style: normal;
}

.discover-tabs img {
  width: 0.8333333333cqw;
  height: 0.8333333333cqw;
}

.discover-table-head,
.discover-token-row {
  display: grid;
  grid-template-columns: 20cqw 7.0833333333cqw repeat(3, 7.5cqw) repeat(2, 8.6111111111cqw) 6.6666666667cqw 6.6666666667cqw 6.6666666667cqw 7.2222222222cqw;
  align-items: center;
  column-gap: 0;
}

.discover-table-head {
  height: 2.2222222222cqw;
  border-top: 1px solid var(--discover-grey-900);
  border-bottom: 1px solid var(--discover-grey-800);
  background: var(--discover-grey-900);
  color: var(--discover-grey-600);
  font-size: 0.8333333333cqw;
  font-weight: 300;
  line-height: 1.1111111111cqw;
}

.discover-table-head span {
  text-align: right;
}

.discover-table-head span:first-child {
  padding-left: 1.1111111111cqw;
  text-align: left;
}

.discover-table-rows {
  display: flex;
  flex-direction: column;
}

.discover-token-row {
  position: relative;
  height: 3.3333333333cqw;
  border-bottom: 1px solid rgb(26 26 26 / 0.72);
  color: #ffffff;
  font-size: 0.9722222222cqw;
  font-weight: 500;
  line-height: 1.3888888889cqw;
  transition:
    background 280ms ease,
    box-shadow 280ms ease;
}

.discover-token-row.is-featured {
  animation: discover-row-select 9.2s ease both;
}

.discover-token-row:hover,
.discover-token-row.is-demo-active {
  background: #1a1a1a;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.04),
    inset 0 -1px 0 rgb(0 0 0 / 0.45);
}

.discover-token-row > span {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.discover-token-main {
  display: flex;
  align-items: center;
  gap: 0.5555555556cqw;
  min-width: 0;
  padding-left: 1.1111111111cqw;
}

.discover-token-main > b {
  color: #feda75;
  font-size: 1.1111111111cqw;
  line-height: 1;
}

.discover-token-main > img,
.discover-token-orb {
  width: 2.2222222222cqw;
  height: 2.2222222222cqw;
  border-radius: 999px;
  object-fit: cover;
}

.discover-token-orb {
  display: inline-block;
  flex: 0 0 auto;
}

.discover-token-orb.is-sega {
  position: relative;
  overflow: hidden;
  background: linear-gradient(146.336deg, #feda75 0%, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5 100%);
}

.discover-token-orb.is-sega::before {
  content: "";
  position: absolute;
  left: 1.3888888889cqw;
  top: 1.3888888889cqw;
  width: 0.8333333333cqw;
  height: 0.8333333333cqw;
  box-sizing: border-box;
  border: 0.0347222222cqw solid #ffffff;
  border-radius: 999px;
  background: #fb903e;
}

.discover-token-orb.is-sega::after {
  content: "";
  position: absolute;
  left: 1.7361111111cqw;
  top: 1.5277777778cqw;
  width: 0.1388888889cqw;
  height: 0.5555555556cqw;
  background: #ffffff;
  mask: url("./assets/figma/discover/icon-warning.svg") center / contain no-repeat;
  -webkit-mask: url("./assets/figma/discover/icon-warning.svg") center / contain no-repeat;
}

.discover-token-main strong {
  display: block;
  color: #ffffff;
  font-size: 0.9722222222cqw;
  font-weight: 700;
  line-height: 1.3888888889cqw;
  white-space: nowrap;
  text-shadow:
    0 0 0.2777777778cqw rgb(255 255 255 / 0.25),
    0 0 0.5555555556cqw rgb(255 255 255 / 0.5);
}

.discover-token-main strong em {
  color: var(--discover-grey-600);
  font-style: normal;
  font-weight: 500;
  text-shadow: none;
}

.discover-token-main p {
  display: flex;
  align-items: center;
  gap: 1.1111111111cqw;
  margin: 0;
  color: var(--discover-grey-600);
  font-size: 0.8333333333cqw;
  line-height: 1.1111111111cqw;
}

.discover-token-main p span {
  display: flex;
  gap: 0.4166666667cqw;
}

.discover-token-main p img {
  width: 0.8333333333cqw;
  height: 0.8333333333cqw;
  border-radius: 0;
  object-fit: contain;
}

.change {
  position: relative;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: 6.1111111111cqw;
  height: 2.2222222222cqw;
  padding-right: 0.8333333333cqw;
  border-radius: 0.2777777778cqw;
  font-variant-numeric: tabular-nums;
}

.change.is-red-1000 {
  background: #340102;
  color: #ff8588;
  text-shadow:
    0 0 0.2777777778cqw rgb(254 31 87 / 0.25),
    0 0 0.5555555556cqw rgb(254 31 87 / 0.5);
}

.change.is-red-800 {
  background: #771a1c;
  color: #ffefef;
}

.change.is-green-1000 {
  background: #012413;
  color: #76ffbd;
  text-shadow:
    0 0 0.2777777778cqw rgb(31 174 105 / 0.25),
    0 0 0.5555555556cqw rgb(31 174 105 / 0.5);
}

.change.is-green-800 {
  background: #063d23;
  color: #76ffbd;
}

.quick-actions {
  display: inline-flex;
  justify-content: center;
  gap: 0;
}

.quick-actions button {
  display: grid;
  place-items: center;
  width: 2.2222222222cqw;
  height: 1.6666666667cqw;
  border: 1px solid var(--discover-purple);
  background: transparent;
  box-shadow:
    0 0 0.2777777778cqw rgb(191 115 221 / 0.25),
    0 0 0.5555555556cqw rgb(191 115 221 / 0.5);
  padding: 0;
}

.quick-actions button:first-child {
  border-radius: 0.4166666667cqw 0 0 0.4166666667cqw;
}

.quick-actions button:last-child {
  border-color: var(--discover-red);
  border-radius: 0 0.4166666667cqw 0.4166666667cqw 0;
  box-shadow:
    0 0 0.2777777778cqw rgb(254 31 87 / 0.25),
    0 0 0.5555555556cqw rgb(254 31 87 / 0.5);
}

.quick-actions button:only-child {
  border-color: var(--discover-purple);
  border-radius: 0.4166666667cqw;
}

.quick-actions__icon {
  position: relative;
  display: block;
  width: 0.8333333333cqw;
  height: 0.8333333333cqw;
}

.quick-actions__icon img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.7361111111cqw;
  max-width: none;
  height: 1.9444444444cqw;
  transform: translate(-50%, -50%);
}

.discover-scrim {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 19;
  width: 100%;
  height: 68.9643605556cqw;
  background: rgb(0 0 0 / 0.4);
  opacity: 0;
  pointer-events: none;
  -webkit-backdrop-filter: blur(1.11045625cqw);
  backdrop-filter: blur(1.11045625cqw);
}

.mapping-state--discover.is-active .discover-scrim {
  animation: discover-scrim-open 9.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.discover-search-panel {
  position: absolute;
  left: 29.8611111111cqw;
  top: 24.4444444444cqw;
  z-index: 20;
  width: 40.2083333333cqw;
  height: 22.2222222222cqw;
  border: 1px solid transparent;
  border-radius: 0.4166666667cqw;
  background:
    linear-gradient(var(--discover-black), var(--discover-black)) padding-box,
    linear-gradient(165.536653285deg, rgb(191 115 221 / 1) 20.998%, rgb(191 115 221 / 0.1) 79.002%) border-box;
  box-shadow:
    0 0 0.2777777778cqw rgb(191 115 221 / 0.25),
    0 0 0.5555555556cqw rgb(191 115 221 / 0.5);
  opacity: 0;
  overflow: hidden;
  transform: translateY(0.8333333333cqw) scale(0.985);
}

.mapping-state--discover.is-active .discover-search-panel {
  animation: discover-panel-open 9.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.discover-search-box {
  display: flex;
  align-items: center;
  gap: 0.5555555556cqw;
  height: 2.7777777778cqw;
  margin: 1.1111111111cqw;
  padding: 0.5555555556cqw;
  border: 1px solid var(--discover-dandelion);
  border-radius: 0.4166666667cqw;
  background: var(--discover-grey-900);
  box-shadow:
    0 0 0.1388888889cqw rgb(255 120 210 / 0.2),
    0 0 0.2777777778cqw rgb(255 120 210 / 0.4),
    0 0 0.5555555556cqw rgb(255 120 210 / 0.8),
    0 0 0.7638888889cqw rgb(255 120 210 / 0.5);
}

.discover-search-box > img {
  width: 1.1111111111cqw;
  height: 1.1111111111cqw;
}

.discover-search-box kbd {
  display: inline-flex;
  align-items: center;
  gap: 0.2777777778cqw;
  margin-left: auto;
  height: 1.6666666667cqw;
  padding: 0 0.5555555556cqw;
  border: 1px solid var(--discover-grey-800);
  border-radius: 0.2777777778cqw;
  background: var(--discover-grey-900);
}

.discover-search-box kbd img {
  width: 0.5555555556cqw;
  height: 0.5555555556cqw;
}

.discover-typed {
  position: relative;
  flex: 0 1 auto;
  max-width: 0;
  color: #ffffff;
  font-size: 0.9722222222cqw;
  font-weight: 500;
  line-height: 1.3888888889cqw;
  overflow: hidden;
  white-space: nowrap;
}

.discover-typed::after {
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-left: 0.1388888889cqw;
  background: #ffffff;
  content: "";
  vertical-align: -0.12em;
  animation: kinetic-type-caret 1s steps(1) infinite;
}

.mapping-state--discover.is-active .discover-typed {
  animation: discover-type 9.2s steps(6, end) both;
}

.recent-block {
  padding: 0 1.1111111111cqw 1.1111111111cqw;
  border-bottom: 1px solid var(--discover-grey-800);
}

.recent-block p {
  margin: 0 0 0.5555555556cqw;
  color: var(--discover-grey-600);
  font-size: 0.8333333333cqw;
  line-height: 1.1111111111cqw;
}

.recent-block div {
  display: flex;
  gap: 0.5555555556cqw;
}

.recent-block span {
  display: inline-flex;
  align-items: center;
  gap: 0.2777777778cqw;
  height: 2.2222222222cqw;
  padding: 0.5555555556cqw;
  border: 1px solid var(--discover-grey-800);
  border-radius: 0.4166666667cqw;
  background: var(--discover-grey-900);
  color: #ffffff;
  font-size: 0.8333333333cqw;
  line-height: 1.1111111111cqw;
}

.recent-block span > img,
.recent-block i,
.search-results article div > img,
.search-token-gradient {
  width: 1.1111111111cqw;
  height: 1.1111111111cqw;
  border-radius: 999px;
  object-fit: cover;
}

.recent-block span > img:last-child {
  width: 0.5555555556cqw;
  height: 0.5555555556cqw;
  border-radius: 0;
}

.recent-block em,
.search-results em,
.search-results small {
  color: var(--discover-grey-600);
  font-style: normal;
}

.search-token-gradient {
  position: relative;
  display: inline-grid;
  place-items: center;
  background: var(--discover-gradient);
}

.search-token-gradient img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50%;
  height: 50%;
}

.search-results header,
.search-results article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.2083333333cqw 5.2083333333cqw 6.1111111111cqw;
  align-items: center;
  column-gap: 0.2777777778cqw;
}

.search-results header {
  height: 2.2222222222cqw;
  padding-left: 1.1111111111cqw;
  background: var(--discover-grey-900);
  color: var(--discover-grey-600);
  font-size: 0.8333333333cqw;
  line-height: 1.1111111111cqw;
}

.search-results header span:nth-child(2) {
  grid-column: 2 / span 2;
  text-align: right;
  padding-right: 1.1111111111cqw;
}

.search-results header span:nth-child(3) {
  grid-column: 4;
  text-align: right;
  padding-right: 1.1111111111cqw;
}

.search-results article {
  box-sizing: border-box;
  height: 2.7777777778cqw;
  min-height: 0;
  padding-left: 1.1111111111cqw;
  border-bottom: 1px solid rgb(26 26 26 / 0.72);
  color: #ffffff;
  font-size: 0.9722222222cqw;
  font-weight: 500;
  line-height: 1.3888888889cqw;
}

.search-results article.is-selected {
  height: 3.8888888889cqw;
  min-height: 0;
  background: #1a1a1a;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.04),
    inset 0 -1px 0 rgb(0 0 0 / 0.45);
}

.search-results article div {
  display: flex;
  align-items: center;
  gap: 0.5555555556cqw;
  min-width: 0;
}

.search-results article div > img,
.search-token-gradient {
  width: 2.2222222222cqw;
  height: 2.2222222222cqw;
}

.search-results span {
  display: grid;
  min-width: 0;
  line-height: 1.1111111111cqw;
}

.search-results span b,
.search-results span em,
.search-results span small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-results b,
.search-results strong {
  font-variant-numeric: tabular-nums;
}

.search-results article > b,
.search-results strong {
  text-align: right;
  padding-right: 1.1111111111cqw;
}

.search-results strong {
  color: var(--discover-green);
  text-shadow:
    0 0 0.2777777778cqw rgb(31 174 105 / 0.25),
    0 0 0.5555555556cqw rgb(31 174 105 / 0.5);
}

.search-results strong.is-negative {
  color: var(--discover-red);
  text-shadow:
    0 0 0.2777777778cqw rgb(254 31 87 / 0.25),
    0 0 0.5555555556cqw rgb(254 31 87 / 0.5);
}

.discover-cursor {
  position: absolute;
  z-index: 24;
  width: 1.1111111111cqw;
  height: 1.1111111111cqw;
  background: url("./assets/images/pixel-cursor.png") 0 0 / contain no-repeat;
  opacity: 0;
  pointer-events: none;
}

.mapping-state--discover.is-active .discover-cursor {
  animation: discover-cursor-path 9.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Figma-derived Kinetic rebuild: 1440 x 1200 scaled with cqw units. */
.kinetic-artifact {
  position: relative;
  aspect-ratio: 6 / 5;
  width: min(72cqw, calc(86cqh * 1.2));
  overflow: hidden;
  grid-template-rows: 5.3333333333% 25.3333333333% 66.6666666667% 2.6666666667%;
  background: #0f0e0c;
  color: #f8f9fa;
  cursor: var(--presentation-cursor);
  display: grid;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.08),
    0 34px 100px rgb(0 0 0 / 0.62),
    0 0 80px rgb(191 115 221 / 0.1);
  container-type: inline-size;
  opacity: 0;
  transform: translate3d(0, 24px, 0) scale(0.985);
}

.slide--mapping.is-active .mapping-state--pools.is-active .kinetic-artifact {
  animation: kinetic-artifact-in 760ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
}

.kinetic-artifact img {
  display: block;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.kinetic-artifact.kinetic-artifact--discover {
  aspect-ratio: 1440 / 1024;
  width: min(72cqw, calc(86cqh * 1.40625));
  grid-template-rows: 6.25% 90.625% 3.125%;
}

.kinetic-topbar {
  position: relative;
  display: block;
  height: 4.4444444444cqw;
  padding: 0;
  border-bottom: 1px solid #1a1a1a;
  background: #0f0e0c;
}

.kinetic-logo {
  position: absolute;
  left: 1.1111111111cqw;
  top: 1.3888888889cqw;
  width: 10.0925694444cqw;
  height: 1.6666666667cqw;
}

.kinetic-nav {
  position: absolute;
  left: 13.4259027778cqw;
  top: 1.1111111111cqw;
  display: flex;
  align-items: center;
  gap: 1.1111111111cqw;
  height: 2.2222222222cqw;
  color: #adb5bd;
  font-family: "Arcade Interlaced", "Proto Mono", monospace;
  font-size: 0.9722222222cqw;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.1111111111cqw;
  text-transform: uppercase;
}

.kinetic-nav span {
  opacity: 0.82;
  text-shadow: 0 0 8px rgb(255 255 255 / 0.16);
}

.kinetic-search {
  position: absolute;
  left: 55.9027777778cqw;
  top: 0.8333333333cqw;
  display: flex;
  align-items: center;
  gap: 0.6944444444cqw;
  width: 26.0416666667cqw;
  height: 2.7777777778cqw;
  padding: 0 0.8333333333cqw;
  border: 1px solid #343a40;
  border-radius: 0.4166666667cqw;
  background: #0f0e0c;
  color: #6c757d;
  font-family: "Helvetica Neue LT Pro", "Inter", Arial, sans-serif;
  font-size: 0.8333333333cqw;
  font-weight: 500;
  line-height: 1.1111111111cqw;
}

.kinetic-search__icon {
  width: 1.1111111111cqw;
  height: 1.1111111111cqw;
  border: 0;
  border-radius: 0;
}

.kinetic-search kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2083333333cqw;
  width: 2.2916666667cqw;
  height: 1.3888888889cqw;
  margin-left: auto;
  padding: 0;
  border: 1px solid #343a40;
  border-radius: 0.2777777778cqw;
  background: transparent;
}

.kinetic-search kbd img:first-child {
  width: 0.5555555556cqw;
  height: 0.5555555556cqw;
}

.kinetic-search kbd img:nth-child(2) {
  width: 0.2784444444cqw;
  height: 0.2777777778cqw;
}

.kinetic-search kbd img:nth-child(3) {
  width: 0.48008125cqw;
  height: 0.5555555556cqw;
}

.kinetic-notification {
  position: absolute;
  left: 83.6111111111cqw;
  top: 1.1111111111cqw;
  width: 2.2222222222cqw;
  height: 2.2222222222cqw;
}

.kinetic-notification img {
  position: absolute;
  left: 0;
  top: 0;
  width: 2cqw;
  height: 2.2222222222cqw;
}

.kinetic-notification span {
  position: absolute;
  right: -0.625cqw;
  bottom: -0.625cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6666666667cqw;
  height: 1.6666666667cqw;
  border-radius: 999px;
  background: #bf73dd;
  color: #fff;
  font-family: "Helvetica Neue LT Pro", "Inter", Arial, sans-serif;
  font-size: 0.625cqw;
  font-weight: 700;
  line-height: 1;
}

.kinetic-wallet {
  position: absolute;
  left: 87.5cqw;
  top: 0;
  display: grid;
  grid-template-columns: 2.2222222222cqw 1fr;
  grid-template-rows: 1.1111111111cqw 1.1111111111cqw;
  align-content: center;
  column-gap: 0.5555555556cqw;
  width: 12.5cqw;
  height: 4.4444444444cqw;
  color: #adb5bd;
  font-family: "Proto Mono", "Helvetica Neue LT Pro", monospace;
}

.kinetic-avatar {
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2222222222cqw;
  height: 2.2222222222cqw;
  border-radius: 0.4166666667cqw;
  background: linear-gradient(135deg, #ffbe42 0%, #ff556e 52%, #8c55ff 100%);
  overflow: hidden;
}

.kinetic-avatar img {
  width: 1.370375cqw;
  height: 0.5993173611cqw;
}

.kinetic-wallet__copy {
  align-self: start;
  color: #f8f9fa;
  font-size: 0.8333333333cqw;
  font-weight: 600;
  line-height: 1.1111111111cqw;
  white-space: nowrap;
}

.kinetic-wallet__rank,
.kinetic-wallet__balance {
  color: #6c757d;
  font-family: "Helvetica Neue LT Pro", "Inter", Arial, sans-serif;
  font-size: 0.6944444444cqw;
  font-weight: 500;
  line-height: 0.9722222222cqw;
  white-space: nowrap;
}

.kinetic-wallet__rank b {
  color: #bf73dd;
  font-weight: 700;
  text-shadow: 0 0 8px rgb(191 115 221 / 0.46);
}

.kinetic-wallet__balance {
  position: absolute;
  right: 0.9027777778cqw;
  bottom: 1.1111111111cqw;
  display: flex;
  align-items: center;
  gap: 0.2777777778cqw;
}

.kinetic-wallet__balance img {
  width: 0.8333333333cqw;
  height: 0.8333333333cqw;
}

.kinetic-dashboard {
  display: grid;
  grid-template-columns: 46.1111111111cqw 50.5555555556cqw;
  gap: 1.1111111111cqw;
  height: 21.1111111111cqw;
  padding: 1.1111111111cqw;
  border-bottom: 1px solid #1a1a1a;
  background: #0f0e0c;
}

.kinetic-panel {
  min-width: 0;
  height: 18.8888888889cqw;
  border: 1px solid #343a40;
  border-radius: 0.4166666667cqw;
  background: #1a1a1a;
  overflow: hidden;
}

.kinetic-panel--liquidity,
.kinetic-panel--volume {
  padding: 1.1111111111cqw;
}

.kinetic-panel__title {
  color: #f8f9fa;
  font-family: "Arcade Interlaced", "Proto Mono", monospace;
  font-size: 0.9722222222cqw;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.1111111111cqw;
  text-transform: uppercase;
  text-shadow:
    0 0 4px rgb(255 255 255 / 0.25),
    0 0 8px rgb(255 255 255 / 0.5);
  animation: kinetic-heading-breathe 4.2s ease-in-out infinite;
}

.kinetic-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 1.9444444444cqw;
  margin: 3.4027777778cqw 0 0;
}

.kinetic-stats div:nth-child(2),
.kinetic-stats div:nth-child(4) {
  justify-self: end;
  min-width: 6.1111111111cqw;
}

.kinetic-stats div:nth-child(5) {
  grid-column: 1;
}

.kinetic-stats dt {
  margin: 0 0 0.2777777778cqw;
  color: #adb5bd;
  font-family: "Helvetica Neue LT Pro", "Inter", Arial, sans-serif;
  font-size: 0.8333333333cqw;
  font-weight: 300;
  line-height: 1.1111111111cqw;
}

.kinetic-stats dd {
  margin: 0;
  color: #f8f9fa;
  font-family: "Helvetica Neue LT Pro", "Inter", Arial, sans-serif;
  font-size: 1.1111111111cqw;
  font-weight: 500;
  line-height: 1.1111111111cqw;
}

.kinetic-stats dd span {
  margin-left: 0.4166666667cqw;
  font-size: 0.8333333333cqw;
  line-height: 1.1111111111cqw;
}

.kinetic-stats dd span:only-child {
  margin-left: 0;
}

.kinetic-stats span,
.kinetic-volume-head p span:last-child,
.kinetic-green {
  color: #33d084;
  text-shadow:
    0 0 4px rgb(31 174 105 / 0.25),
    0 0 8px rgb(31 174 105 / 0.5);
}

.kinetic-volume-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.1111111111cqw;
}

.kinetic-volume-head p {
  display: flex;
  align-items: center;
  gap: 0.5555555556cqw;
  margin: 0.625cqw 0 0;
  color: #f8f9fa;
  font-family: "Helvetica Neue LT Pro", "Inter", Arial, sans-serif;
  font-size: 0.9722222222cqw;
  font-weight: 700;
  line-height: 1.1111111111cqw;
}

.kinetic-volume-head p span:last-child {
  font-size: 0.7638888889cqw;
}

.kinetic-range-tabs {
  display: flex;
  align-items: center;
  gap: 0.5555555556cqw;
  height: 1.6666666667cqw;
  padding: 0 0.5555555556cqw;
  border-radius: 0.4166666667cqw;
  background: #242424;
  color: #6c757d;
  font-family: "Helvetica Neue LT Pro", "Inter", Arial, sans-serif;
  font-size: 0.8333333333cqw;
  font-weight: 700;
  line-height: 1.1111111111cqw;
}

.kinetic-range-tabs span:first-child {
  color: #bf73dd;
  text-shadow: 0 0 8px rgb(191 115 221 / 0.5);
}

.kinetic-histogram {
  display: flex;
  align-items: flex-end;
  gap: 1.6666666667cqw;
  height: 10cqw;
  margin-top: 1.875cqw;
  padding: 0 0 0.8333333333cqw;
}

.kinetic-histogram span {
  position: relative;
  display: block;
  width: 1.1111111111cqw;
  height: var(--bar-height);
  background: #bf73dd;
  box-shadow:
    0 0 10px rgb(191 115 221 / 0.2),
    0 0 18px rgb(191 115 221 / 0.08);
  transform: scaleY(0.08);
  transform-origin: bottom;
  transition:
    height 780ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 320ms ease,
    box-shadow 320ms ease;
  animation:
    kinetic-bar-rise 760ms cubic-bezier(0.16, 1, 0.3, 1) calc(180ms + var(--bar-delay)) forwards,
    kinetic-bar-glow 4.8s ease-in-out calc(1s + var(--bar-delay)) infinite;
}

.kinetic-histogram span::after {
  position: absolute;
  left: 50%;
  top: calc(100% + 0.4861111111cqw);
  color: #6c757d;
  content: attr(data-day);
  font-family: "Helvetica Neue LT Pro", "Inter", Arial, sans-serif;
  font-size: 0.7638888889cqw;
  font-weight: 500;
  line-height: 0.8333333333cqw;
  transform: translateX(-50%);
}

.kinetic-histogram__bar--live {
  box-shadow:
    0 0 12px rgb(191 115 221 / 0.46),
    0 0 28px rgb(191 115 221 / 0.22);
  filter: brightness(1.14);
}

.kinetic-table-shell {
  display: grid;
  grid-template-rows: 3.3333333333cqw 52.2222222222cqw;
  height: 55.5555555556cqw;
  min-height: 0;
  background: #0f0e0c;
}

.kinetic-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.3333333333cqw;
  padding: 0 1.1111111111cqw;
  border-bottom: 1px solid #1a1a1a;
  background: #0f0e0c;
  font-family: "Helvetica Neue LT Pro", "Inter", Arial, sans-serif;
}

.kinetic-tabs {
  display: flex;
  align-items: center;
  gap: 1.6666666667cqw;
  height: 100%;
  color: #6c757d;
  font-size: 0.9722222222cqw;
  font-weight: 500;
  line-height: 1.3888888889cqw;
}

.kinetic-tabs span {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}

.kinetic-tabs .is-active {
  color: #bf73dd;
  font-weight: 700;
  text-shadow:
    0 0 4px rgb(191 115 221 / 0.25),
    0 0 8px rgb(191 115 221 / 0.5);
}

.kinetic-tabs .is-active::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.1388888889cqw;
  background: #bf73dd;
  content: "";
}

.kinetic-table-actions {
  display: flex;
  align-items: center;
  gap: 1.1111111111cqw;
  height: 100%;
  color: #adb5bd;
  font-family: "Helvetica Neue LT Pro", "Inter", Arial, sans-serif;
  font-size: 1.1111111111cqw;
  font-weight: 700;
}

.kinetic-view-toggle,
.kinetic-filter,
.kinetic-create {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.6666666667cqw;
}

.kinetic-view-toggle {
  gap: 0.5555555556cqw;
  overflow: visible;
}

.kinetic-view-toggle img:first-child {
  width: 2.2222222222cqw;
  height: 1.9444444444cqw;
  margin-left: -0.5555555556cqw;
  margin-right: -0.5555555556cqw;
}

.kinetic-view-toggle img:nth-child(2) {
  width: 1.1111111111cqw;
  height: 1.1111111111cqw;
}

.kinetic-action-divider {
  display: inline-block;
  width: 1px;
  height: 1.6666666667cqw;
  background: #343a40;
}

.kinetic-footer-divider {
  display: inline-block;
  width: 1px;
  height: 1.1111111111cqw;
  background: #343a40;
}

.kinetic-filter {
  gap: 0.2777777778cqw;
}

.kinetic-filter img {
  width: 1.1111111111cqw;
  height: 1.1111111111cqw;
}

.kinetic-create {
  height: 1.6666666667cqw;
  padding: 0 0.5555555556cqw;
  border: 1px solid #bf73dd;
  border-radius: 0.4166666667cqw;
  background: #bf73dd;
  color: #fff;
  font-size: 0.9722222222cqw;
  line-height: 0.9722222222cqw;
  text-transform: uppercase;
  box-shadow:
    0 0 4px rgb(191 115 221 / 0.5),
    0 0 2px rgb(191 115 221 / 0.25);
  text-shadow:
    0 0 4px rgb(255 255 255 / 0.25),
    0 0 8px rgb(255 255 255 / 0.5);
}

.kinetic-table {
  min-height: 0;
  overflow: hidden;
}

.kinetic-table-header,
.kinetic-pool-row {
  position: relative;
  display: block;
  width: 100%;
}

.kinetic-table-header {
  height: 2.2222222222cqw;
  border-top: 1px solid #343a40;
  border-bottom: 1px solid #343a40;
  background: #1a1a1a;
  color: #6c757d;
  font-family: "Helvetica Neue LT Pro", "Inter", Arial, sans-serif;
  font-size: 0.8333333333cqw;
  font-weight: 300;
  line-height: 1.1111111111cqw;
}

.kinetic-table-header > span,
.kinetic-pool-row > span:not(.kinetic-row-actions) {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 6.9444444444cqw;
  height: 100%;
  text-align: right;
}

.kinetic-table-header > span:first-child {
  left: 1.1111111111cqw;
  justify-content: flex-start;
  width: 20.5555555556cqw;
  text-align: left;
}

.kinetic-table-header > span:nth-child(2),
.kinetic-pool-row > span:nth-child(2) {
  left: 23.6111111111cqw;
}

.kinetic-table-header > span:nth-child(3),
.kinetic-pool-row > span:nth-child(3) {
  left: 40.9722222222cqw;
}

.kinetic-table-header > span:nth-child(4),
.kinetic-pool-row > span:nth-child(4) {
  left: 58.3333333333cqw;
}

.kinetic-table-header > span:nth-child(5),
.kinetic-pool-row > span:nth-child(5) {
  left: 75.6944444444cqw;
}

.kinetic-table-header > span:nth-child(6) {
  right: 1.1111111111cqw;
  width: 6.6666666667cqw;
}

.kinetic-table-header img {
  width: 0.8333333333cqw;
  height: 0.8333333333cqw;
  margin-right: 0.2777777778cqw;
  transform: rotate(-90deg);
}

.kinetic-pool-row {
  height: 3.3333333333cqw;
  border-bottom: 1px solid rgb(255 255 255 / 0.035);
  background: transparent;
  color: #f8f9fa;
  font-family: "Proto Mono", "Helvetica Neue LT Pro", monospace;
  font-size: 0.9722222222cqw;
  font-weight: 500;
  line-height: 1.1111111111cqw;
  transition:
    background 520ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.kinetic-pool-row.is-demo-active {
  background: #1a1a1a;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.04),
    inset 0 -1px 0 rgb(0 0 0 / 0.45);
}

.kinetic-pool-cell {
  position: absolute;
  left: 1.1111111111cqw;
  top: 0;
  display: flex;
  align-items: center;
  gap: 0.5555555556cqw;
  width: 20.5555555556cqw;
  height: 100%;
  min-width: 0;
}

.kinetic-fav {
  width: 1.1111111111cqw;
  height: 1.1111111111cqw;
  flex: 0 0 auto;
}

.kinetic-token-stack {
  position: relative;
  display: block;
  width: 3.7036805556cqw;
  height: 2.2222222222cqw;
  flex: 0 0 auto;
}

.kinetic-token-stack img {
  position: absolute;
  top: 0;
  width: 2.2222222222cqw;
  height: 2.2222222222cqw;
  border-radius: 999px;
  object-fit: cover;
}

.kinetic-token-stack img:first-child {
  left: 0;
}

.kinetic-token-stack img:last-child {
  left: 1.4583333333cqw;
}

.kinetic-pool-cell strong {
  display: block;
  max-width: 11.25cqw;
  overflow: hidden;
  color: #f8f9fa;
  font-family: "Proto Mono", monospace;
  font-size: 0.9722222222cqw;
  font-weight: 600;
  line-height: 1.1111111111cqw;
  text-overflow: ellipsis;
  text-shadow:
    0 0 4px rgb(255 255 255 / 0.25),
    0 0 8px rgb(255 255 255 / 0.5);
  white-space: nowrap;
}

.kinetic-pool-cell small {
  display: flex;
  align-items: center;
  gap: 0.5555555556cqw;
  margin-top: 0.1388888889cqw;
  color: #6c757d;
  font-family: "Proto Mono", monospace;
  font-size: 0.8333333333cqw;
  font-weight: 500;
  line-height: 0.9722222222cqw;
  white-space: nowrap;
}

.kinetic-pool-cell em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.1111111111cqw;
  padding: 0 0.3472222222cqw;
  border: 1px solid #343a40;
  border-radius: 0.2777777778cqw;
  color: #adb5bd;
  font-style: normal;
  line-height: 0.8333333333cqw;
}

.kinetic-pool-cell small img {
  width: 0.8333333333cqw;
  height: 0.8333333333cqw;
  border-radius: 999px;
}

.js-market-number {
  display: flex;
  min-width: 6.9444444444cqw;
  justify-content: flex-end;
  font-variant-numeric: tabular-nums;
  transition:
    color 260ms ease,
    text-shadow 260ms ease,
    transform 260ms ease;
}

.kinetic-volume-head .kinetic-volume-total {
  min-width: 0;
  justify-content: flex-start;
}

.js-market-number.is-ticking {
  color: #f8f9fa;
  text-shadow:
    0 0 6px rgb(255 255 255 / 0.24),
    0 0 14px rgb(51 208 132 / 0.18);
  transform: translateY(-0.0694444444cqw);
}

.kinetic-row-actions {
  position: absolute;
  top: 0;
  right: 1.1111111111cqw;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5555555556cqw;
  width: 6.6666666667cqw;
  height: 100%;
}

.kinetic-row-actions i {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6666666667cqw;
  height: 1.6666666667cqw;
  border: 1px solid #bf73dd;
  border-radius: 0.4166666667cqw;
  overflow: hidden;
  box-shadow:
    0 0 6px rgb(191 115 221 / 0.28),
    0 0 3px rgb(191 115 221 / 0.18);
}

.kinetic-row-actions i:nth-child(2) {
  border-color: #4f5bd5;
  box-shadow:
    0 0 6px rgb(79 91 213 / 0.28),
    0 0 3px rgb(79 91 213 / 0.18);
}

.kinetic-row-actions i.is-muted {
  border-color: #343a40;
  box-shadow: none;
}

.kinetic-row-actions i.is-danger {
  border-color: #dd4c4f;
  box-shadow:
    0 0 6px rgb(254 31 87 / 0.28),
    0 0 3px rgb(254 31 87 / 0.18);
}

.kinetic-row-actions img {
  width: 0.8333333333cqw;
  height: 0.8333333333cqw;
  object-fit: contain;
}

.kinetic-row-actions i:first-child::before {
  width: 0.8333333333cqw;
  height: 0.8333333333cqw;
  background: #bf73dd;
  content: "";
  -webkit-mask: url("./assets/figma/kinetic/icon-swap-xs-default.svg") center / contain no-repeat;
  mask: url("./assets/figma/kinetic/icon-swap-xs-default.svg") center / contain no-repeat;
}

.kinetic-row-actions i:first-child img {
  display: none;
}

.kinetic-row-actions i:nth-child(2) img {
  width: 0.5277777778cqw;
  height: 0.8333333333cqw;
}

.kinetic-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2.2222222222cqw;
  padding: 0 1.1111111111cqw;
  border-top: 1px solid #1a1a1a;
  background: #0f0f0f;
  color: #adb5bd;
  font-family: "Helvetica Neue LT Pro", "Inter", Arial, sans-serif;
  font-size: 0.8333333333cqw;
  font-weight: 700;
  line-height: 1.1111111111cqw;
}

.kinetic-footer__left,
.kinetic-footer__right {
  display: flex;
  align-items: center;
  gap: 1.1111111111cqw;
  height: 100%;
}

.kinetic-footer__left > img,
.kinetic-footer__right > img {
  width: 1.1111111111cqw;
  height: 1.1111111111cqw;
}

.kinetic-footer__right > .kinetic-more-dots {
  width: 0.8333333333cqw;
  height: 0.2777777778cqw;
}

.kinetic-footer__left span,
.kinetic-footer__right span {
  display: inline-flex;
  align-items: center;
  gap: 0.2777777778cqw;
  white-space: nowrap;
}

.kinetic-footer b {
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
  transition:
    color 260ms ease,
    text-shadow 260ms ease,
    transform 260ms ease;
}

.kinetic-footer b.is-ticking {
  color: #f8f9fa;
  text-shadow:
    0 0 6px rgb(255 255 255 / 0.24),
    0 0 12px rgb(191 115 221 / 0.2);
  transform: translateY(-0.0347222222cqw);
}

.kinetic-footer__left span img {
  width: 1.1111111111cqw;
  height: 1.1111111111cqw;
}

.kinetic-live-dot {
  position: relative;
  width: 0.4166666667cqw;
  height: 0.4166666667cqw;
  border-radius: 999px;
  background: #33d084;
  box-shadow:
    0 0 6px rgb(51 208 132 / 0.72),
    0 0 16px rgb(51 208 132 / 0.24);
  animation: kinetic-live-pulse 2.2s ease-in-out infinite;
}

.kinetic-live-dot::after {
  position: absolute;
  inset: -0.4166666667cqw;
  border: 1px solid rgb(51 208 132 / 0.32);
  border-radius: inherit;
  content: "";
  animation: kinetic-live-ring 2.2s ease-in-out infinite;
}

.mapping-state--swap {
  display: grid;
  place-items: center;
}

.kinetic-artifact--swap {
  --swap-purple: #bf73dd;
  --swap-black: #0f0e0c;
  --swap-grey-900: #1a1a1a;
  --swap-grey-800: #343a40;
  --swap-grey-700: #495057;
  --swap-grey-600: #6c757d;
  --swap-grey-500: #adb5bd;
  --swap-green: #1fae69;
  --swap-green-bright: #33d084;
  --swap-red: #dd4c4f;
  --swap-red-soft: #ff8588;
  --swap-gradient: linear-gradient(105deg, #feda75 1.966%, #fa7e1e 35.546%, #d62976 69.127%, #962fbf 102.71%, #4f5bd5 136.29%);
  aspect-ratio: 1440 / 1326;
  width: min(72cqw, calc(86cqh * 1.0859728507));
  grid-template-rows: 4.826546003% 92.7601809955% 2.4132730015%;
}

.slide--mapping.is-active .mapping-state--swap.is-active .kinetic-artifact--swap {
  animation: kinetic-artifact-in 760ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
}

.kinetic-nav .is-active {
  color: var(--swap-purple, #bf73dd);
  opacity: 1;
  text-shadow:
    0 0 4px rgb(191 115 221 / 0.24),
    0 0 8px rgb(191 115 221 / 0.42);
}

.kinetic-swap-body {
  position: relative;
  overflow: hidden;
  background: var(--swap-black);
}

.kinetic-swap-stack {
  position: absolute;
  top: 1.1111111111cqw;
  left: 34.4444444444cqw;
  display: flex;
  flex-direction: column;
  gap: 0.5555555556cqw;
  width: 31.1111111111cqw;
}

.swap-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2777777778cqw;
  width: 31.1111111111cqw;
  height: 2.2222222222cqw;
  border: 1px solid transparent;
  border-radius: 0.4166666667cqw;
  background:
    linear-gradient(rgb(191 115 221 / 0.22), rgb(191 115 221 / 0.22)) padding-box,
    linear-gradient(96deg, rgb(191 115 221 / 0.34), rgb(255 255 255 / 0.1) 50%, rgb(191 115 221 / 0.7)) border-box;
  color: #ffffff;
  font-family: "Proto Mono", monospace;
  font-size: 0.6944444444cqw;
  font-weight: 500;
  line-height: 0.6944444444cqw;
  text-transform: uppercase;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.03),
    0 0 4px rgb(255 255 255 / 0.16),
    0 0 8px rgb(191 115 221 / 0.18);
}

.swap-timer b,
.swap-timer em {
  font-style: normal;
  font-weight: 600;
  text-shadow: 0 0 8px currentColor;
}

.swap-timer b {
  color: #fa7e1e;
  font-variant-numeric: tabular-nums;
}

.swap-timer em {
  color: var(--swap-green);
}

.swap-timer__coin {
  width: 0.6944444444cqw;
  height: 0.6944444444cqw;
  flex: 0 0 auto;
}

.swap-timer__close {
  position: absolute;
  right: 1.0416666667cqw;
  width: 0.8333333333cqw;
  height: 0.8333333333cqw;
  opacity: 0.72;
}

.swap-window {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--swap-black), var(--swap-black)) padding-box,
    var(--swap-gradient) border-box;
}

.swap-window {
  width: 31.1111111111cqw;
  height: 45.2777777778cqw;
  padding: 0.5555555556cqw;
  border-radius: 0.8333333333cqw;
}

.swap-window__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.1111111111cqw;
  border: 1px solid transparent;
  border-radius: 0.5555555556cqw;
  background:
    linear-gradient(var(--swap-black), var(--swap-black)) padding-box,
    var(--swap-gradient) border-box;
  overflow: hidden;
}

.swap-top-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 2.2222222222cqw;
  flex: 0 0 auto;
}

.swap-top-controls button,
.swap-token-select,
.swap-flip,
.swap-size-pills button {
  border: 1px solid var(--swap-grey-800);
  background: var(--swap-grey-900);
  color: inherit;
  cursor: var(--presentation-cursor);
  font: inherit;
}

.swap-top-controls button {
  display: grid;
  place-items: center;
  width: 2.2222222222cqw;
  height: 2.2222222222cqw;
  border-radius: 0.4166666667cqw;
  padding: 0;
}

.swap-top-controls button img {
  width: 1.1111111111cqw;
  height: 1.1111111111cqw;
}

.swap-top-controls button:first-child img {
  width: 0.9722222222cqw;
  height: 0.8333333333cqw;
}

.swap-top-controls button:last-child img {
  width: 0.8333333333cqw;
  height: 0.8333333333cqw;
}

.swap-input-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.1111111111cqw;
  width: 100%;
  height: 14.7222222222cqw;
  margin-top: 1.1111111111cqw;
  padding: 1.1111111111cqw;
  border: 1px solid var(--swap-grey-800);
  border-radius: 0.5555555556cqw;
  background: var(--swap-grey-900);
  flex: 0 0 auto;
}

.swap-token-row {
  display: flex;
  flex-direction: column;
  gap: 0.5555555556cqw;
  width: 100%;
  height: 5.1388888889cqw;
}

.swap-token-row header,
.swap-token-line,
.swap-summary header,
.swap-summary dl div,
.swap-market-cards article header,
.swap-quote-row,
.swap-quotes__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.swap-token-row header {
  height: 1.1111111111cqw;
  color: #ffffff;
  font-family: "Proto Mono", monospace;
  font-size: 0.8333333333cqw;
  font-weight: 500;
  line-height: 1.1111111111cqw;
  text-transform: uppercase;
}

.swap-size-pills {
  display: flex;
  gap: 0.5555555556cqw;
}

.swap-size-pills button {
  height: 1.1111111111cqw;
  min-width: 2.5cqw;
  padding: 0 0.5555555556cqw;
  border-radius: 0.2777777778cqw;
  color: var(--swap-purple);
  font-size: 0.6944444444cqw;
  font-weight: 500;
  line-height: 0.4861111111cqw;
  text-shadow:
    0 0 4px rgb(191 115 221 / 0.22),
    0 0 8px rgb(191 115 221 / 0.38);
}

.swap-token-line {
  height: 3.4722222222cqw;
}

.swap-token-picker {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  height: 3.4722222222cqw;
}

.swap-token-select {
  display: inline-flex;
  align-items: center;
  gap: 0.2777777778cqw;
  width: 6.6666666667cqw;
  height: 2.2222222222cqw;
  padding: 0 0.2777777778cqw 0 0.5555555556cqw;
  border-radius: 0.4166666667cqw;
  color: #ffffff;
  font-family: "Proto Mono", monospace;
  font-size: 0.9722222222cqw;
  font-weight: 500;
  line-height: 1.3888888889cqw;
  text-shadow:
    0 0 4px rgb(255 255 255 / 0.25),
    0 0 8px rgb(255 255 255 / 0.5);
}

.swap-token-select img:first-child {
  width: 1.6666666667cqw;
  height: 1.6666666667cqw;
}

.swap-token-select img:last-child {
  width: 0.4166666667cqw;
  height: 0.8333333333cqw;
  margin-left: auto;
  transform: rotate(90deg);
  transform-origin: center;
}

.swap-token-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  min-width: 13.8888888889cqw;
  height: 3.4722222222cqw;
}

.swap-amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2777777778cqw;
}

.swap-amount strong {
  color: #ffffff;
  font-family: "Proto Mono", monospace;
  font-size: 1.6666666667cqw;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.6666666667cqw;
  text-align: right;
  text-shadow:
    0 0 4px rgb(255 255 255 / 0.25),
    0 0 8px rgb(255 255 255 / 0.5);
  transition:
    color 220ms ease,
    text-shadow 220ms ease,
    transform 220ms ease;
}

.swap-amount strong.is-ticking,
.swap-market-cards strong.is-ticking {
  color: #ffffff;
  text-shadow:
    0 0 7px rgb(255 255 255 / 0.34),
    0 0 14px rgb(191 115 221 / 0.26);
  transform: translateY(-0.0347222222cqw);
}

.swap-amount small {
  color: var(--swap-grey-500);
  font-family: "Proto Mono", monospace;
  font-size: 0.8333333333cqw;
  font-weight: 500;
  line-height: 1.1111111111cqw;
  white-space: nowrap;
}

.swap-amount small em {
  color: var(--swap-green-bright);
  font-style: normal;
  text-shadow:
    0 0 4px rgb(31 174 105 / 0.25),
    0 0 8px rgb(31 174 105 / 0.5);
}

.swap-token-row p {
  margin: 0;
  color: var(--swap-grey-500);
  font-family: "Proto Mono", monospace;
  font-size: 0.6944444444cqw;
  font-weight: 500;
  line-height: 0.6944444444cqw;
  text-transform: uppercase;
}

.swap-token-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgb(52 58 64 / 0), #343a40 26%, #343a40 76%, rgb(52 58 64 / 0));
}

.swap-flip {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 2.2222222222cqw;
  height: 2.2222222222cqw;
  border-radius: 0.4166666667cqw;
  transform: translate(-50%, -50%);
}

.swap-flip img {
  --fill-0: var(--swap-grey-600);
  width: 1.1111111111cqw;
  height: 1.1111111111cqw;
  display: block;
}

.swap-params {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 2.2222222222cqw;
  margin-top: 1.1111111111cqw;
  padding: 0.5555555556cqw;
  border: 1px solid var(--swap-grey-800);
  border-radius: 0.2777777778cqw;
  background: var(--swap-black);
  color: var(--swap-grey-600);
  font-family: "Proto Mono", monospace;
  font-size: 0.8333333333cqw;
  font-weight: 500;
  line-height: 1.1111111111cqw;
  flex: 0 0 auto;
}

.swap-priority-group {
  display: inline-flex;
  align-items: center;
  gap: 0.5555555556cqw;
  white-space: nowrap;
}

.swap-priority-group--mode {
  gap: 0.5555555556cqw;
}

.swap-priority-divider {
  width: 1px;
  height: 1.1111111111cqw;
  background: var(--swap-grey-800);
}

.swap-params b {
  color: var(--swap-purple);
  font: inherit;
  font-weight: 600;
  text-shadow:
    0 0 4px rgb(191 115 221 / 0.22),
    0 0 8px rgb(191 115 221 / 0.38);
}

.swap-params img {
  flex: 0 0 auto;
  width: 1.1111111111cqw;
  height: 1.1111111111cqw;
  --fill-0: var(--swap-grey-600);
  --stroke-0: var(--swap-grey-600);
  object-fit: contain;
}

.swap-cta {
  width: 100%;
  height: 3.3333333333cqw;
  margin-top: 1.3888888889cqw;
  border: 0;
  border-radius: 0.4166666667cqw;
  background: var(--swap-purple);
  color: #ffffff;
  cursor: var(--presentation-cursor);
  font-family: "Proto Mono", monospace;
  font-size: 1.1111111111cqw;
  font-weight: 600;
  line-height: 1.1111111111cqw;
  text-shadow:
    0 0 4px rgb(255 255 255 / 0.25),
    0 0 8px rgb(255 255 255 / 0.5);
  box-shadow:
    0 0 4px rgb(191 115 221 / 0.25),
    0 0 8px rgb(191 115 221 / 0.42);
  animation: swap-cta-breathe 3.2s ease-in-out infinite;
  flex: 0 0 auto;
}

.swap-summary {
  width: 100%;
  height: 14.4444444444cqw;
  margin-top: 1.3888888889cqw;
  border: 1px solid var(--swap-grey-800);
  border-radius: 0.4166666667cqw;
  background: var(--swap-black);
  color: var(--swap-grey-500);
  font-family: "Proto Mono", monospace;
  font-size: 0.8333333333cqw;
  font-weight: 500;
  line-height: 1.1111111111cqw;
  overflow: hidden;
  flex: 0 0 auto;
}

.swap-summary header {
  height: 2.2222222222cqw;
  padding: 0 0.5555555556cqw;
  border-bottom: 1px solid var(--swap-grey-800);
}

.swap-summary header span,
.swap-summary header button {
  display: inline-flex;
  align-items: center;
}

.swap-summary header span {
  gap: 0.4166666667cqw;
}

.swap-summary-timer {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 1.1111111111cqw;
  height: 1.1111111111cqw;
  border-radius: 999px;
  background:
    conic-gradient(from 0deg, transparent 0deg var(--summary-timer-empty, 0deg), var(--swap-purple) var(--summary-timer-empty, 0deg) 360deg);
  box-shadow:
    0 0 4px rgb(191 115 221 / 0.26),
    0 0 8px rgb(191 115 221 / 0.18);
  animation: swap-summary-unfill 6.5s linear infinite;
}

.swap-summary-timer::before {
  position: absolute;
  inset: 0.1388888889cqw;
  border-radius: inherit;
  background: var(--swap-black);
  content: "";
}

.swap-summary-timer span {
  position: relative;
  width: 0.2777777778cqw;
  height: 0.2777777778cqw;
  border-radius: inherit;
  background: var(--swap-purple);
}

.swap-summary header button {
  border: 0;
  background: transparent;
  color: var(--swap-grey-500);
  cursor: var(--presentation-cursor);
  font: inherit;
  font-size: 0.6944444444cqw;
  line-height: 0.6944444444cqw;
  text-transform: uppercase;
}

.swap-summary dl {
  display: flex;
  flex-direction: column;
  gap: 0.4166666667cqw;
  margin: 0;
  padding: 0.5555555556cqw;
}

.swap-summary dt,
.swap-summary dd {
  margin: 0;
}

.swap-summary dd {
  color: #ffffff;
  text-align: right;
}

.swap-summary dd b,
.swap-route-trigger,
.swap-summary dd i {
  color: var(--swap-purple);
  font: inherit;
  font-style: normal;
  text-shadow:
    0 0 4px rgb(191 115 221 / 0.22),
    0 0 8px rgb(191 115 221 / 0.38);
}

.swap-summary dd em {
  color: var(--swap-green-bright);
  font-style: normal;
  text-shadow:
    0 0 4px rgb(31 174 105 / 0.25),
    0 0 8px rgb(31 174 105 / 0.5);
}

.swap-summary dd span {
  color: var(--swap-grey-600);
}

.swap-route-trigger {
  position: relative;
  border: 0;
  background: transparent;
  cursor: var(--presentation-cursor);
  padding: 0;
}

.swap-route-trigger::after {
  position: absolute;
  right: 0;
  bottom: -0.1388888889cqw;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, #43b3d8, var(--swap-purple));
  content: "";
  opacity: 0;
  transform: scaleX(0.42);
  transform-origin: left center;
  transition:
    opacity 180ms ease,
    transform 240ms ease;
}

.kinetic-artifact--swap.is-swap-route-hover .swap-route-trigger,
.kinetic-artifact--swap.is-swap-modal-open .swap-route-trigger {
  color: #ffffff;
  text-shadow:
    0 0 4px rgb(255 255 255 / 0.24),
    0 0 8px rgb(191 115 221 / 0.42);
}

.kinetic-artifact--swap.is-swap-route-hover .swap-route-trigger::after,
.kinetic-artifact--swap.is-swap-modal-open .swap-route-trigger::after {
  opacity: 1;
  transform: scaleX(1);
}

.swap-market-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5555555556cqw;
  width: 31.1111111111cqw;
  height: 8.6111111111cqw;
}

.swap-market-cards article {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--swap-grey-800);
  border-radius: 0.5555555556cqw;
  background: var(--swap-grey-900);
  padding: 0.5555555556cqw;
}

.swap-market-cards article header {
  position: relative;
  z-index: 2;
  height: 2.7777777778cqw;
  gap: 0.3472222222cqw;
}

.swap-market-cards article header img {
  width: 2.2222222222cqw;
  height: 2.2222222222cqw;
}

.swap-market-cards article header span,
.swap-market-cards article header strong {
  color: #ffffff;
  font-family: "Proto Mono", monospace;
  font-size: 1.1111111111cqw;
  font-weight: 500;
  line-height: 1.6666666667cqw;
  text-shadow:
    0 0 5px rgb(255 255 255 / 0.25),
    0 0 10px rgb(255 255 255 / 0.5);
}

.swap-market-cards article header strong {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.swap-market-cards article p {
  position: absolute;
  top: 3.0555555556cqw;
  right: 0.5555555556cqw;
  z-index: 2;
  display: flex;
  gap: 0.3472222222cqw;
  margin: 0;
  font-family: "Proto Mono", monospace;
  font-size: 0.6944444444cqw;
  font-weight: 500;
  line-height: 0.6944444444cqw;
}

.swap-market-cards article p span {
  color: var(--swap-grey-600);
}

.swap-market-cards article p b {
  color: var(--swap-green);
  font: inherit;
  text-shadow:
    0 0 5px rgb(31 174 105 / 0.25),
    0 0 10px rgb(31 174 105 / 0.5);
}

.swap-mini-chart {
  position: absolute;
  right: 0.5555555556cqw;
  bottom: 0.5555555556cqw;
  left: 0.5555555556cqw;
  height: 3.5875cqw;
  display: block;
  width: auto;
  overflow: hidden;
}

.swap-mini-chart path {
  vector-effect: non-scaling-stroke;
}

.swap-live-chart__area-base {
  opacity: 0.22;
}

.swap-mini-chart--sol .swap-live-chart__area-base,
.swap-mini-chart--sol .swap-live-chart__area {
  fill: url("#swap-sol-area");
}

.swap-mini-chart--usdc .swap-live-chart__area-base,
.swap-mini-chart--usdc .swap-live-chart__area {
  fill: url("#swap-usdc-area");
}

.swap-mini-chart--sol .swap-live-chart__line {
  stroke: url("#swap-sol-line");
}

.swap-mini-chart--usdc .swap-live-chart__line {
  stroke: url("#swap-usdc-line");
}

.swap-live-chart__motion {
  clip-path: inset(0 100% 0 0);
  animation:
    swap-chart-draw 1.8s cubic-bezier(0.16, 1, 0.3, 1) 220ms forwards,
    swap-chart-live-nudge 6.8s ease-in-out 2.1s infinite;
}

.swap-live-chart__area {
  opacity: 0.82;
}

.swap-live-chart__line {
  fill: none;
  stroke-width: 1.29167;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  filter: drop-shadow(0 0 2px rgb(255 255 255 / 0.22));
  animation:
    swap-chart-line-draw 1.8s cubic-bezier(0.16, 1, 0.3, 1) 220ms forwards,
    swap-chart-line-drift 6.8s ease-in-out 2.1s infinite;
}

.swap-mini-chart--usdc .swap-live-chart__motion,
.swap-mini-chart--usdc .swap-live-chart__line {
  animation-delay: 420ms, 2.25s;
}

.swap-quotes {
  display: flex;
  flex-direction: column;
  width: 31.1111111111cqw;
  height: 13.3333333333cqw;
  border: 1px solid var(--swap-purple);
  border-radius: 0.8333333333cqw;
  background: var(--swap-black);
  overflow: hidden;
  color: #ffffff;
  font-family: "Proto Mono", monospace;
}

.swap-quotes > header {
  order: 0;
  display: flex;
  align-items: center;
  height: 2.7777777778cqw;
  padding: 0 1.1111111111cqw;
  border-bottom: 1px solid var(--swap-grey-800);
  color: var(--swap-purple);
  font-size: 0.8333333333cqw;
  font-weight: 500;
  line-height: 1.1111111111cqw;
  text-shadow:
    0 0 4px rgb(191 115 221 / 0.22),
    0 0 8px rgb(191 115 221 / 0.38);
}

.swap-quotes__head {
  order: 1;
  height: 2.2222222222cqw;
  padding: 0 1.1111111111cqw;
  border-bottom: 1px solid var(--swap-grey-800);
  background: var(--swap-grey-900);
  color: var(--swap-grey-600);
  font-size: 0.6944444444cqw;
  font-weight: 500;
  line-height: 0.6944444444cqw;
}

.swap-quotes__head span:nth-child(1),
.swap-quote-row > span:nth-child(1) {
  width: 6.9444444444cqw;
}

.swap-quotes__head span:nth-child(2),
.swap-quote-row > span:nth-child(2) {
  width: 8.8888888889cqw;
  text-align: right;
}

.swap-quotes__head span:nth-child(3),
.swap-quote-row > span:nth-child(3) {
  width: 4.4444444444cqw;
  text-align: right;
}

.swap-quotes__head span:nth-child(4),
.swap-quote-row > :nth-child(4) {
  width: 3.8888888889cqw;
  text-align: center;
}

.swap-quote-row {
  position: relative;
  order: var(--quote-order, 4);
  height: 2.7777777778cqw;
  padding: 0 1.1111111111cqw;
  color: var(--swap-grey-600);
  font-size: 0.8333333333cqw;
  font-weight: 500;
  line-height: 1.1111111111cqw;
  transition:
    background 260ms ease,
    color 260ms ease,
    opacity 260ms ease,
    transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.swap-quote-row--best {
  --quote-order: 2;
}

.swap-quote-row--jupiter {
  --quote-order: 3;
}

.swap-quote-row--titan {
  --quote-order: 4;
}

.swap-quote-row > span:nth-child(2),
.swap-quote-row > span:nth-child(3),
.swap-quote-row > em {
  font-variant-numeric: tabular-nums;
  transition:
    color 260ms ease,
    opacity 260ms ease;
}

.swap-quote-row > span.is-ticking,
.swap-quote-row > em.is-ticking {
  color: #ffffff;
  opacity: 0.9;
}

.swap-quote-row.is-rank-changing {
  color: var(--swap-grey-500);
  background: linear-gradient(90deg, rgb(191 115 221 / 0.1), transparent 78%);
}

.swap-quote-row > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 0.2777777778cqw;
  color: #ffffff;
  font-weight: 600;
  text-shadow:
    0 0 4px rgb(255 255 255 / 0.25),
    0 0 8px rgb(255 255 255 / 0.5);
}

.swap-quote-row img {
  width: 1.1111111111cqw;
  height: 1.1111111111cqw;
  border-radius: 999px;
}

.swap-quote-row--best {
  color: #ffffff;
  background: linear-gradient(175deg, rgb(191 115 221 / 0.92) 21%, rgb(191 115 221 / 0.1) 79%);
}

.kinetic-artifact--swap.is-swap-processing .swap-cta {
  border: 1px solid rgb(255 255 255 / 0.12);
  background: linear-gradient(112deg, rgb(254 218 117 / 0.6), rgb(250 126 30 / 0.6) 25%, rgb(214 41 118 / 0.6) 50%, rgb(150 47 191 / 0.6) 75%, rgb(79 91 213 / 0.6));
  box-shadow:
    0 0 4px rgb(255 255 255 / 0.15),
    0 0 12px rgb(191 115 221 / 0.26);
  animation: swap-processing-breathe 2.1s ease-in-out infinite;
}

.kinetic-artifact--swap.is-swap-clicking .swap-cta {
  transform: translateY(0.0347222222cqw) scale(0.992);
}

.swap-quote-row--best > span:nth-child(3) {
  color: var(--swap-green);
  text-shadow:
    0 0 4px rgb(31 174 105 / 0.25),
    0 0 8px rgb(31 174 105 / 0.5);
}

.swap-quote-row b,
.swap-quote-row em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.6666666667cqw;
  border-radius: 0.2777777778cqw;
  font-style: normal;
  line-height: 1.1111111111cqw;
}

.swap-quote-row b {
  background: var(--swap-gradient);
  color: #ffffff;
  font-weight: 600;
  box-shadow:
    inset 0 1px 3px rgb(255 255 255 / 0.74),
    0 0 8px rgb(255 120 210 / 0.8);
  text-shadow:
    0 0 4px rgb(255 255 255 / 0.25),
    0 0 8px rgb(255 255 255 / 0.5);
  animation: swap-best-breathe 2.8s ease-in-out infinite;
}

.swap-quote-row em {
  border: 1px solid rgb(224 37 37 / 0.7);
  background: linear-gradient(180deg, rgb(224 37 37 / 0.7), rgb(224 37 37 / 0.1));
  color: var(--swap-red-soft);
  box-shadow:
    0 0 8px rgb(254 31 87 / 0.5),
    0 0 4px rgb(254 31 87 / 0.25);
}

.swap-route-modal {
  position: absolute;
  top: 29.9305555556cqw;
  left: 34.4444444444cqw;
  z-index: 16;
  width: 31.1111111111cqw;
  height: 23.3333333333cqw;
  border: 1px solid transparent;
  border-radius: 0.8333333333cqw;
  background:
    linear-gradient(var(--swap-black), var(--swap-black)) padding-box,
    linear-gradient(137deg, rgb(191 115 221 / 0.9), rgb(191 115 221 / 0.1)) border-box;
  box-shadow:
    0 0 4px rgb(191 115 221 / 0.25),
    0 0 8px rgb(191 115 221 / 0.45);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 0.8333333333cqw, 0) scale(0.985);
  transition:
    opacity 280ms ease,
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.kinetic-artifact--swap.is-swap-modal-open .swap-route-modal {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
}

.swap-route-modal__inner {
  display: flex;
  flex-direction: column;
  gap: 1.6666666667cqw;
  width: 100%;
  height: 100%;
  padding: 1.6666666667cqw;
  color: #ffffff;
  font-family: "Proto Mono", monospace;
}

.swap-route-modal header,
.swap-route-exchange,
.swap-route-legend {
  display: flex;
  align-items: center;
}

.swap-route-modal header {
  justify-content: space-between;
  height: 1.6666666667cqw;
}

.swap-route-modal h3 {
  margin: 0;
  background: var(--swap-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: "Arcade Interlaced", "Proto Mono", monospace;
  font-size: 1.3888888889cqw;
  font-weight: 400;
  line-height: 1.7361111111cqw;
}

.swap-route-modal__close {
  display: grid;
  place-items: center;
  width: 1.1111111111cqw;
  height: 1.1111111111cqw;
  border: 0;
  background: transparent;
  cursor: var(--presentation-cursor);
  padding: 0;
}

.swap-route-modal__close img {
  width: 1.1111111111cqw;
  height: 1.1111111111cqw;
  opacity: 0.72;
}

.swap-route-exchange {
  justify-content: center;
  gap: 0.4166666667cqw;
  height: 1.6666666667cqw;
  flex: 0 0 auto;
}

.swap-route-exchange strong {
  color: #ffffff;
  font-size: 0.9722222222cqw;
  font-weight: 500;
  line-height: 1.3888888889cqw;
  text-shadow:
    0 0 4px rgb(255 255 255 / 0.25),
    0 0 8px rgb(255 255 255 / 0.5);
}

.swap-route-token {
  width: 1.6666666667cqw;
  height: 1.6666666667cqw;
  border-radius: 999px;
  flex: 0 0 auto;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.2),
    0 0 8px rgb(255 255 255 / 0.16);
}

.swap-route-token--mplx {
  background: radial-gradient(circle at 34% 28%, #ffffff, #feda75 26%, #d62976 58%, #962fbf);
}

.swap-route-token--ray {
  background: radial-gradient(circle at 35% 30%, #ffffff, #43b3d8 30%, #9b1df9 72%);
}

.swap-route-arrow {
  display: grid;
  place-items: center;
  width: 1.1111111111cqw;
  height: 1.1111111111cqw;
  margin: 0 0.2083333333cqw;
}

.swap-route-arrow img {
  --fill-0: var(--swap-grey-600);
  width: 0.8333333333cqw;
  height: 0.8333333333cqw;
}

.swap-route-map {
  position: relative;
  width: 100%;
  height: 11.4583333333cqw;
  flex: 0 0 auto;
}

.swap-route-map svg {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.route-line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.42;
  filter: drop-shadow(0 0 2px rgb(255 255 255 / 0.12));
}

.route-line--orca {
  stroke: url("#route-orca");
}

.route-line--meteora {
  stroke: url("#route-meteora");
}

.route-line--raydium {
  stroke: url("#route-raydium");
  stroke-width: 5;
  opacity: 0.94;
  stroke-dasharray: 18 14;
  animation: swap-route-flow 2.4s linear infinite;
  filter:
    drop-shadow(0 0 4px rgb(67 179 216 / 0.35))
    drop-shadow(0 0 8px rgb(155 29 249 / 0.32));
}

.route-line--phoenix {
  stroke: url("#route-phoenix");
}

.route-line--lifinity {
  stroke: url("#route-lifinity");
}

.route-coins circle {
  fill: url("#route-node-gradient");
  stroke: rgb(255 255 255 / 0.18);
  stroke-width: 1.25;
  filter: drop-shadow(0 0 6px rgb(191 115 221 / 0.42));
}

.swap-route-tooltip {
  position: absolute;
  top: 0.2777777778cqw;
  left: 5.4861111111cqw;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.2777777778cqw 0.5555555556cqw;
  width: 15.1388888889cqw;
  min-height: 4.4444444444cqw;
  padding: 0.5555555556cqw;
  border: 1px solid var(--swap-grey-700);
  border-radius: 0.2777777778cqw;
  background: var(--swap-grey-800);
  color: #ffffff;
  font-size: 0.8333333333cqw;
  line-height: 1.1111111111cqw;
  box-shadow: 0 0 10px rgb(0 0 0 / 0.34);
}

.swap-route-tooltip strong,
.swap-route-tooltip span {
  text-shadow:
    0 0 4px rgb(255 255 255 / 0.25),
    0 0 8px rgb(255 255 255 / 0.5);
}

.swap-route-tooltip small {
  color: var(--swap-grey-500);
  font-size: 0.6944444444cqw;
  line-height: 0.6944444444cqw;
}

.swap-route-legend {
  justify-content: space-between;
  gap: 1.3888888889cqw;
  margin: 0;
  padding: 0;
  list-style: none;
  height: 1.1111111111cqw;
  font-size: 0.8333333333cqw;
  line-height: 1.1111111111cqw;
}

.swap-route-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.5555555556cqw;
  color: #ffffff;
  text-shadow:
    0 0 4px rgb(255 255 255 / 0.25),
    0 0 8px rgb(255 255 255 / 0.5);
}

.swap-route-legend span {
  width: 0.4166666667cqw;
  height: 0.4166666667cqw;
  border-radius: 999px;
}

.swap-route-legend .is-orca { background: linear-gradient(#ffd15c, #000000); }
.swap-route-legend .is-meteora { background: linear-gradient(135deg, #ff8915, #ff5055); }
.swap-route-legend .is-raydium { background: linear-gradient(90deg, #43b3d8, #9b1df9); }
.swap-route-legend .is-phoenix { background: linear-gradient(#ff773d, #000000); }
.swap-route-legend .is-lifinity { background: linear-gradient(#404cd8, #7f60e2); }

.swap-demo-cursor {
  position: absolute;
  z-index: 24;
  left: 0;
  top: 0;
  width: 1.6666666667cqw;
  height: 1.6666666667cqw;
  background: url("./assets/images/pixel-cursor.png") 0 0 / contain no-repeat;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(var(--swap-cursor-x, 70cqw), var(--swap-cursor-y, 28cqw), 0);
  transition:
    opacity 180ms ease,
    transform 760ms cubic-bezier(0.16, 1, 0.3, 1);
}

.kinetic-artifact--swap.is-swap-cursor-visible .swap-demo-cursor {
  opacity: 1;
}

.kinetic-artifact--swap.is-swap-clicking .swap-demo-cursor {
  transform: translate3d(var(--swap-cursor-x, 70cqw), var(--swap-cursor-y, 28cqw), 0) scale(0.92);
}

.swap-toast {
  position: absolute;
  right: 1.1111111111cqw;
  bottom: 1.6666666667cqw;
  z-index: 18;
  width: 26.9444444444cqw;
  min-height: 6.3194444444cqw;
  border: 1px solid transparent;
  border-radius: 0.5555555556cqw;
  color: #ffffff;
  font-family: "Helvetica Neue LT Pro", Arial, sans-serif;
  box-shadow: 0.2777777778cqw 0.2777777778cqw 0.4166666667cqw 0.1388888889cqw rgb(16 24 40 / 0.08);
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translate3d(110%, 0, 0);
}

.swap-toast--processing {
  height: 6.4583333333cqw;
  background:
    linear-gradient(165.536653285deg, rgb(191 115 221 / 1) 20.998%, rgb(191 115 221 / 0.1) 79.002%) padding-box,
    linear-gradient(165.536653285deg, rgb(191 115 221 / 1) 20.998%, rgb(191 115 221 / 0.1) 79.002%) border-box;
}

.swap-toast--confirmed {
  height: 6.3194444444cqw;
  background:
    linear-gradient(180deg, rgb(22 155 91 / 0.7) 1.668%, rgb(22 155 91 / 0.1) 100%) padding-box,
    linear-gradient(180deg, rgb(22 155 91 / 0.7) 1.668%, rgb(22 155 91 / 0.1) 100%) border-box;
}

.kinetic-artifact--swap.is-swap-toast-processing .swap-toast--processing,
.kinetic-artifact--swap.is-swap-toast-confirmed .swap-toast--confirmed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 260ms ease,
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.swap-toast__progress-wrap {
  position: absolute;
  top: -0.0694444444cqw;
  left: 0;
  width: 8.4722222222cqw;
  height: 0.3472222222cqw;
  overflow: hidden;
}

.swap-toast--confirmed .swap-toast__progress-wrap {
  left: 0.0694444444cqw;
  width: 8.4027777778cqw;
}

.swap-toast__progress {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 8.4722222222cqw;
  height: 0.4166666667cqw;
  background: currentColor;
  transform-origin: left center;
}

.swap-toast--processing .swap-toast__progress {
  color: #ffffff;
  filter:
    drop-shadow(0 0 0.2777777778cqw rgb(255 255 255 / 0.25))
    drop-shadow(0 0 0.5555555556cqw rgb(255 255 255 / 0.5));
}

.swap-toast--confirmed .swap-toast__progress {
  color: #33d084;
  filter:
    drop-shadow(0 0 0.2777777778cqw rgb(31 174 105 / 0.25))
    drop-shadow(0 0 0.5555555556cqw rgb(31 174 105 / 0.5));
}

.kinetic-artifact--swap.is-swap-toast-processing .swap-toast--processing .swap-toast__progress,
.kinetic-artifact--swap.is-swap-toast-confirmed .swap-toast--confirmed .swap-toast__progress {
  animation: swap-toast-line 3.6s linear both;
}

.swap-toast__content {
  position: relative;
  display: grid;
  grid-template-columns: 2.2222222222cqw minmax(0, 1fr) 0.8333333333cqw;
  align-items: start;
  gap: 1.1111111111cqw;
  padding: 1.1111111111cqw;
  width: 100%;
  height: 100%;
}

.swap-toast__status {
  position: relative;
  width: 1.6666666667cqw;
  height: 2.2222222222cqw;
  flex: 0 0 auto;
  overflow: visible;
  border-radius: 0;
  margin: 0;
}

.swap-toast__status img {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  max-width: none;
  transform: translate(-50%, -50%);
}

.swap-toast--processing .swap-toast__status img {
  width: 6.1111111111cqw;
  height: 6.6666666667cqw;
  mix-blend-mode: hard-light;
}

.swap-toast--confirmed .swap-toast__status img {
  width: 4.5529444444cqw;
  height: 3.9973888889cqw;
}

.swap-toast strong {
  display: block;
  margin: 0 0 0.4166666667cqw;
  color: #ffffff;
  font-size: 1.1111111111cqw;
  font-weight: 700;
  line-height: 1.6666666667cqw;
  text-shadow:
    0 0 0.2777777778cqw rgb(255 255 255 / 0.25),
    0 0 0.5555555556cqw rgb(255 255 255 / 0.5);
}

.swap-toast p,
.swap-toast a {
  margin: 0;
  color: #ffffff;
  font-size: 0.8333333333cqw;
  font-weight: 300;
  line-height: 1.1111111111cqw;
  text-shadow:
    0 0 0.2777777778cqw rgb(255 255 255 / 0.25),
    0 0 0.5555555556cqw rgb(255 255 255 / 0.5);
}

.swap-toast--confirmed p {
  color: #33d084;
  text-shadow:
    0 0 0.2777777778cqw rgb(31 174 105 / 0.25),
    0 0 0.5555555556cqw rgb(31 174 105 / 0.5);
}

.swap-toast a {
  display: inline-block;
  margin-top: 0.5555555556cqw;
  color: #ffffff;
  font-size: 0.8333333333cqw;
  font-weight: 700;
  line-height: 0.8333333333cqw;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.0694444444cqw;
}

.swap-toast--confirmed a {
  margin-left: 2.9166666667cqw;
}

.swap-toast__close {
  width: 0.8333333333cqw;
  height: 0.8333333333cqw;
  opacity: 0.86;
}

.kinetic-artifact.is-create-hover .kinetic-create {
  box-shadow:
    0 0 8px rgb(191 115 221 / 0.5),
    0 0 4px rgb(191 115 221 / 0.25),
    0 0 18px rgb(191 115 221 / 0.22);
  transform: translateY(-0.0694444444cqw);
}

.kinetic-artifact.is-create-click .kinetic-create {
  transform: translateY(-0.0694444444cqw) scale(0.985);
}

.kinetic-create-flow {
  --cursor-x: 90cqw;
  --cursor-y: 34cqw;
  --kinetic-prompt-border-width: 0.5px;
  position: absolute;
  inset: 0;
  z-index: 12;
  overflow: hidden;
  pointer-events: none;
}

.kinetic-flow-backdrop {
  position: absolute;
  inset: 0 0 2.2222222222cqw;
  background: rgb(0 0 0 / 0.46);
  opacity: 0;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  transition: opacity 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.kinetic-create-flow.is-modal-visible .kinetic-flow-backdrop {
  opacity: 1;
}

.kinetic-demo-cursor {
  position: absolute;
  left: var(--cursor-x);
  top: var(--cursor-y);
  z-index: 8;
  width: 0.8333333333cqw;
  height: 1.1111111111cqw;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition:
    left 940ms cubic-bezier(0.16, 1, 0.3, 1),
    top 940ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 220ms ease,
    transform 160ms ease;
}

.kinetic-create-flow.is-cursor-visible .kinetic-demo-cursor {
  opacity: 1;
}

.kinetic-create-flow.is-clicking .kinetic-demo-cursor {
  transform: translate3d(0.0694444444cqw, 0.0694444444cqw, 0) scale(0.94);
}

.kinetic-create-modal {
  position: absolute;
  left: 50%;
  z-index: 4;
  display: flex;
  flex-direction: column;
  width: 31.1111111111cqw;
  border: var(--kinetic-prompt-border-width) solid #bf73dd;
  border-radius: 0.8333333333cqw;
  background: #0f0e0c;
  box-shadow:
    0 0 6px rgb(191 115 221 / 0.42),
    0 0 3px rgb(191 115 221 / 0.2);
  color: #f8f9fa;
  font-family: "Helvetica Neue LT Pro", "Inter", Arial, sans-serif;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, calc(-50% + 0.8333333333cqw), 0) scale(0.985);
  transition:
    opacity 420ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.kinetic-create-modal--step1 {
  top: 50%;
  height: 21.3888888889cqw;
  padding: 1.6666666667cqw;
}

.kinetic-create-modal--step2 {
  top: 10.9027777778cqw;
  height: 57.7777777778cqw;
  padding: 1.6666666667cqw;
  overflow: visible;
  transform: translate3d(-50%, 0.8333333333cqw, 0) scale(0.985);
}

.kinetic-create-modal--success {
  top: 50%;
  height: 35.2777777778cqw;
  padding: 0;
  overflow: hidden;
  box-shadow:
    0 0 8px rgb(191 115 221 / 0.5),
    0 0 4px rgb(191 115 221 / 0.25);
}

.kinetic-create-flow.is-step1 .kinetic-create-modal--step1,
.kinetic-create-flow.is-step2-open .kinetic-create-modal--step2,
.kinetic-create-flow.is-step2-filled .kinetic-create-modal--step2,
.kinetic-create-flow.is-fee-open .kinetic-create-modal--step2,
.kinetic-create-flow.is-create-ready .kinetic-create-modal--step2,
.kinetic-create-flow.is-success .kinetic-create-modal--success {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) scale(1);
}

.kinetic-create-flow.is-step2-open .kinetic-create-modal--step2,
.kinetic-create-flow.is-step2-filled .kinetic-create-modal--step2,
.kinetic-create-flow.is-fee-open .kinetic-create-modal--step2,
.kinetic-create-flow.is-create-ready .kinetic-create-modal--step2 {
  transform: translate3d(-50%, 0, 0) scale(1);
}

.kinetic-create-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 1.6666666667cqw;
}

.kinetic-create-modal__head h3 {
  margin: 0;
  background: linear-gradient(105deg, #feda75 2%, #fa7e1e 35%, #d62976 69%, #962fbf 103%, #4f5bd5 136%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: "Arcade Interlaced", "Proto Mono", monospace;
  font-size: 1.1111111111cqw;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.25cqw;
  text-transform: uppercase;
}

.kinetic-create-modal__head img {
  width: 1.1111111111cqw;
  height: 1.1111111111cqw;
}

.kinetic-create-modal__intro {
  margin: 0.5555555556cqw 0 1.6666666667cqw;
  color: #ced4da;
  font-size: 0.8333333333cqw;
  font-weight: 500;
  line-height: 1.1111111111cqw;
}

.kinetic-create-modal--step2 .kinetic-create-modal__intro {
  line-height: 0.6944444444cqw;
}

.kinetic-create-section {
  display: flex;
  flex-direction: column;
  gap: 1.1111111111cqw;
}

.kinetic-create-section__head {
  display: flex;
  align-items: center;
  height: 2.7777777778cqw;
  border-bottom: 1px solid #343a40;
  color: #adb5bd;
  font-size: 1.1111111111cqw;
  font-weight: 500;
  line-height: 1.6666666667cqw;
}

.kinetic-create-modal--step1 .kinetic-create-section__head {
  height: 1.6666666667cqw;
  font-size: 0.8333333333cqw;
  line-height: 1.1111111111cqw;
}

.kinetic-pool-choice {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8333333333cqw;
  width: 100%;
  min-height: 3.3333333333cqw;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f8f9fa;
  font: inherit;
  text-align: left;
  cursor: var(--presentation-cursor);
}

.kinetic-create-modal--step1 .kinetic-pool-choice {
  min-height: 1.9444444444cqw;
}

.kinetic-pool-choice b {
  display: flex;
  align-items: center;
  gap: 0.2777777778cqw;
  color: #fff;
  font-size: 0.9722222222cqw;
  font-weight: 500;
  line-height: 1.3888888889cqw;
}

.kinetic-create-modal--step1 .kinetic-pool-choice b {
  gap: 0.2777777778cqw;
  font-size: 0.8333333333cqw;
  line-height: 0.8333333333cqw;
}

.kinetic-pool-choice em {
  color: #adb5bd;
  font-style: normal;
  font-weight: 500;
}

.kinetic-pool-choice small {
  display: block;
  margin-top: 0.2777777778cqw;
  color: #adb5bd;
  font-size: 0.8333333333cqw;
  font-weight: 500;
  line-height: 1.1111111111cqw;
}

.kinetic-create-modal--step1 .kinetic-pool-choice small {
  margin-top: 0.4861111111cqw;
  font-size: 0.6944444444cqw;
  line-height: 0.6944444444cqw;
}

.kinetic-suggested-tag {
  position: absolute;
  left: 9.2cqw;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.0416666667cqw;
  width: 5cqw;
  padding: 0 0.5555555556cqw;
  border: 1px solid #343a40;
  border-radius: 0.2777777778cqw;
  background: #1a1a1a;
  color: #bf73dd;
  font-size: 0.6944444444cqw;
  font-weight: 500;
  line-height: 1;
  text-shadow:
    0 0 4px rgb(191 115 221 / 0.25),
    0 0 8px rgb(191 115 221 / 0.5);
}

.kinetic-radio {
  position: relative;
  display: block;
  width: 1.1111111111cqw;
  height: 1.1111111111cqw;
  border: 1px solid #343a40;
  border-radius: 999px;
  background: #1a1a1a;
  transition:
    background 240ms ease,
    border-color 240ms ease,
    box-shadow 240ms ease;
}

.kinetic-radio::after {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.4166666667cqw;
  height: 0.4166666667cqw;
  border-radius: inherit;
  background: #bf73dd;
  box-shadow:
    0 0 8px rgb(191 115 221 / 0.44),
    0 0 4px rgb(191 115 221 / 0.22);
  content: "";
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
  transition:
    opacity 240ms ease,
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.kinetic-create-flow.is-supa-selected .kinetic-pool-choice--supa .kinetic-radio {
  border-color: #bf73dd;
  background: #fafafa;
  box-shadow:
    0 0 4px rgb(191 115 221 / 0.5),
    0 0 2px rgb(191 115 221 / 0.25);
}

.kinetic-create-flow.is-supa-selected .kinetic-pool-choice--supa .kinetic-radio::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.kinetic-create-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 27.7777777778cqw;
  height: 3.3333333333cqw;
  margin-top: 1.6666666667cqw;
  border: 0;
  border-radius: 0.4166666667cqw;
  background: #bf73dd;
  color: #fff;
  font-family: "Helvetica Neue LT Pro", "Inter", Arial, sans-serif;
  font-size: 1.1111111111cqw;
  font-weight: 700;
  line-height: 1.1111111111cqw;
  text-transform: uppercase;
  text-shadow:
    0 0 4px rgb(255 255 255 / 0.25),
    0 0 8px rgb(255 255 255 / 0.5);
  box-shadow:
    0 0 4px rgb(191 115 221 / 0.5),
    0 0 2px rgb(191 115 221 / 0.25);
}

.kinetic-create-modal--step1 .kinetic-create-primary,
.kinetic-create-modal--step2 .kinetic-create-primary {
  margin-top: auto;
}

.kinetic-token-box {
  display: flex;
  flex-direction: column;
  gap: 1.1111111111cqw;
  height: 14.4444444444cqw;
  padding: 0.8333333333cqw;
  border: 1px solid #343a40;
  border-radius: 0.4166666667cqw;
  background: #1a1a1a;
}

.kinetic-token-field {
  display: flex;
  flex-direction: column;
  gap: 0.5555555556cqw;
  min-height: 5cqw;
}

.kinetic-token-field + .kinetic-token-field {
  padding-top: 1.1111111111cqw;
  border-top: 1px solid #343a40;
}

.kinetic-token-field__top,
.kinetic-token-field__main,
.kinetic-token-field__bottom,
.kinetic-field-row,
.kinetic-create-summary div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kinetic-token-field__top,
.kinetic-token-field__bottom,
.kinetic-field-label,
.kinetic-field-row label,
.kinetic-current-price small,
.kinetic-create-summary span {
  color: #adb5bd;
  font-size: 0.8333333333cqw;
  font-weight: 300;
  line-height: 1.1111111111cqw;
}

.kinetic-percent-set {
  display: flex;
  gap: 0.5555555556cqw;
}

.kinetic-percent-set b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6666666667cqw;
  height: 0.9722222222cqw;
  padding: 0 0.2777777778cqw;
  border: 1px solid #343a40;
  border-radius: 0.2777777778cqw;
  color: #bf73dd;
  font-size: 0.6944444444cqw;
  font-weight: 500;
  line-height: 1;
  text-shadow:
    0 0 4px rgb(191 115 221 / 0.25),
    0 0 8px rgb(191 115 221 / 0.5);
}

.kinetic-token-field__main strong {
  display: inline-flex;
  align-items: center;
  color: #f8f9fa;
  font-size: 1.6666666667cqw;
  font-weight: 500;
  line-height: 1.6666666667cqw;
}

.kinetic-create-flow.is-base-typing [data-base-amount]::after {
  display: inline-block;
  width: 1px;
  height: 1.25cqw;
  margin-left: 0.2083333333cqw;
  background: #f8f9fa;
  box-shadow: 0 0 8px rgb(255 255 255 / 0.42);
  content: "";
  animation: kinetic-type-caret 780ms steps(1, end) infinite;
}

.kinetic-token-select {
  display: inline-flex;
  align-items: center;
  gap: 0.2777777778cqw;
  color: #f8f9fa;
  font-size: 1.1111111111cqw;
  font-weight: 500;
  line-height: 1.6666666667cqw;
}

.kinetic-token-select > img:first-child {
  width: 0;
  height: 1.1111111111cqw;
  margin-right: 0;
  opacity: 0;
  transform: scale(0.6);
  transition:
    width 220ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 220ms ease,
    transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.kinetic-create-flow.is-base-filled .kinetic-token-field:first-child .kinetic-token-select > img:first-child,
.kinetic-create-flow.is-quote-filled .kinetic-token-field:nth-child(2) .kinetic-token-select > img:first-child {
  width: 1.1111111111cqw;
  opacity: 1;
  transform: scale(1);
}

.kinetic-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 0.8333333333cqw;
  height: 0.8333333333cqw;
}

.kinetic-chevron img {
  width: 0.4166666667cqw;
  height: 0.8333333333cqw;
  object-fit: fill;
  transform: rotate(90deg);
  transform-origin: center;
}

.kinetic-token-dropdown {
  position: absolute;
  left: 1.6666666667cqw;
  z-index: 7;
  display: flex;
  flex-direction: column;
  width: 27.7777777778cqw;
  border: 1px solid #bf73dd;
  border-radius: 0.4166666667cqw;
  background: #0f0e0c;
  box-shadow: 0.2777777778cqw 0.2777777778cqw 0.4166666667cqw -0.1388888889cqw rgb(52 58 64 / 0.24);
  color: #f8f9fa;
  font-family: "Helvetica Neue LT Pro", "Inter", Arial, sans-serif;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(-0.2777777778cqw) scale(0.985);
  transition:
    opacity 260ms ease,
    transform 340ms cubic-bezier(0.16, 1, 0.3, 1);
  visibility: hidden;
}

.kinetic-token-dropdown--base {
  top: 8.8888888889cqw;
}

.kinetic-token-dropdown--quote {
  top: 16.1111111111cqw;
}

.kinetic-create-flow.is-base-dropdown-open .kinetic-token-dropdown--base,
.kinetic-create-flow.is-quote-dropdown-open .kinetic-token-dropdown--quote {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
}

.kinetic-token-search {
  display: flex;
  align-items: center;
  height: 1.6666666667cqw;
  margin: 0.5555555556cqw;
  padding: 0 0.5555555556cqw;
  border: 1px solid #343a40;
  border-radius: 0.4166666667cqw;
}

.kinetic-token-search img {
  width: 1.1111111111cqw;
  height: 1.1111111111cqw;
  margin-right: 0.5555555556cqw;
}

.kinetic-token-search span {
  display: flex;
  align-items: center;
  width: 100%;
  color: #6c757d;
  font-size: 0.8333333333cqw;
  font-weight: 300;
  line-height: 1.1111111111cqw;
}

.kinetic-token-option {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 2.7777777778cqw;
  padding: 0.5555555556cqw;
  border: 0;
  background: transparent;
  color: #f8f9fa;
  font: inherit;
  text-align: left;
}

.kinetic-token-option--sol,
.kinetic-token-option--usdc {
  background: #1a1a1a;
}

.kinetic-token-option__asset {
  position: relative;
  flex: 0 0 auto;
  width: 1.6666666667cqw;
  height: 1.6666666667cqw;
  margin-right: 0.5555555556cqw;
  overflow: visible;
}

.kinetic-token-option__asset > img {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
}

.kinetic-token-option__asset i {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0.5555555556cqw;
  height: 0.5555555556cqw;
  border: 1px solid #0f0e0c;
  border-radius: 999px;
  background: #1fae69;
}

.kinetic-token-option__copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.2777777778cqw;
  min-width: 0;
}

.kinetic-token-option__copy b {
  color: #fff;
  font-size: 0.8333333333cqw;
  font-weight: 500;
  line-height: 1.1111111111cqw;
  text-shadow:
    0 0 4px rgb(255 255 255 / 0.25),
    0 0 8px rgb(255 255 255 / 0.5);
}

.kinetic-token-option__copy em {
  margin-left: 0.4166666667cqw;
  color: #6c757d;
  font-style: normal;
  text-shadow: none;
}

.kinetic-token-option__copy small,
.kinetic-token-option strong {
  color: #adb5bd;
  font-size: 0.8333333333cqw;
  font-weight: 500;
  line-height: 1.1111111111cqw;
}

.kinetic-token-option strong {
  flex: 0 0 auto;
  margin-left: 0.5555555556cqw;
}

.kinetic-form-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5555555556cqw;
  margin-top: 1.1111111111cqw;
}

.kinetic-field-label {
  display: flex;
  align-items: center;
  gap: 0.2777777778cqw;
  margin-top: 0.2777777778cqw;
}

.kinetic-field-label i {
  width: 0.5555555556cqw;
  height: 0.5555555556cqw;
  border-radius: 999px;
  background: #343a40;
}

.kinetic-select-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 27.7777777778cqw;
  height: 2.7777777778cqw;
  padding: 0 0.6944444444cqw;
  border: 1px solid #343a40;
  border-radius: 0.4166666667cqw;
  background: #1a1a1a;
  color: #f8f9fa;
  font-family: "Helvetica Neue LT Pro", "Inter", Arial, sans-serif;
  font-size: 1.1111111111cqw;
  font-weight: 500;
  line-height: 1.6666666667cqw;
}

.kinetic-create-flow.is-fee-open [data-fee-select] {
  border-color: #bf73dd;
}

.kinetic-fee-dropdown {
  position: absolute;
  left: 0;
  top: 4.9305555556cqw;
  z-index: 6;
  display: block;
  width: 27.7777777778cqw;
  border: 1px solid #bf73dd;
  border-radius: 0.4166666667cqw;
  background: #0f0e0c;
  box-shadow: 0.2777777778cqw 0.2777777778cqw 0.4166666667cqw -0.1388888889cqw rgb(52 58 64 / 0.24);
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(-0.2777777778cqw) scale(0.985);
  transition:
    opacity 260ms ease,
    transform 340ms cubic-bezier(0.16, 1, 0.3, 1);
  visibility: hidden;
}

.kinetic-create-flow.is-fee-open .kinetic-fee-dropdown {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
}

.kinetic-fee-dropdown div {
  display: grid;
  grid-template-columns: 3.75cqw 1fr 6.875cqw;
  column-gap: 0.8333333333cqw;
  align-items: center;
  min-height: 2.2222222222cqw;
  padding: 0 2.0833333333cqw 0 0.5555555556cqw;
  color: #fff;
  font-size: 0.9722222222cqw;
  font-weight: 500;
  line-height: 1.3888888889cqw;
}

.kinetic-fee-dropdown div:nth-child(2) {
  background: #1a1a1a;
}

.kinetic-fee-dropdown b {
  color: #adb5bd;
  font: inherit;
  text-align: right;
}

.kinetic-fee-dropdown em {
  display: inline-flex;
  grid-column: 3;
  align-items: center;
  justify-content: center;
  justify-self: end;
  min-width: 3.4722222222cqw;
  height: 0.9722222222cqw;
  padding: 0 0.5555555556cqw;
  border: 1px solid #343a40;
  border-radius: 0.2777777778cqw;
  color: #6c757d;
  font-size: 0.6944444444cqw;
  font-style: normal;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.kinetic-fee-dropdown .is-new {
  min-width: 6.875cqw;
}

.kinetic-fee-dropdown .is-new {
  color: #bf73dd;
  text-shadow:
    0 0 4px rgb(191 115 221 / 0.25),
    0 0 8px rgb(191 115 221 / 0.5);
}

.kinetic-field-row span {
  display: flex;
  align-items: center;
  gap: 0.5555555556cqw;
}

.kinetic-field-row b {
  color: #6c757d;
  font-size: 0.8333333333cqw;
  font-weight: 500;
  line-height: 1.1111111111cqw;
}

.kinetic-field-row b:first-child {
  color: #bf73dd;
  text-shadow:
    0 0 4px rgb(191 115 221 / 0.25),
    0 0 8px rgb(191 115 221 / 0.5);
}

.kinetic-price-input {
  color: #6c757d;
}

.kinetic-price-input small {
  color: #6c757d;
  font-family: "Proto Mono", monospace;
  font-size: 0.8333333333cqw;
  line-height: 1.4166666667;
}

.kinetic-current-price img {
  width: 0.8333333333cqw;
  height: 0.8333333333cqw;
}

.kinetic-range-control {
  display: flex;
  width: 27.7777777778cqw;
  height: 2.7777777778cqw;
  border: 1px solid #343a40;
  border-radius: 0.4166666667cqw;
  background: #1a1a1a;
  overflow: hidden;
}

.kinetic-range-control button {
  flex: 1;
  border: 0;
  background: transparent;
  color: #6c757d;
  font-family: "Helvetica Neue LT Pro", "Inter", Arial, sans-serif;
  font-size: 0.9722222222cqw;
  font-weight: 500;
}

.kinetic-range-control .is-active {
  border-radius: 0.3472222222cqw;
  background: #bf73dd;
  color: #fff;
  text-shadow:
    0 0 4px rgb(255 255 255 / 0.25),
    0 0 8px rgb(255 255 255 / 0.5);
  box-shadow:
    0 0 4px rgb(191 115 221 / 0.5),
    0 0 2px rgb(191 115 221 / 0.25);
}

.kinetic-create-summary {
  display: flex;
  flex-direction: column;
  gap: 0.5555555556cqw;
  margin-top: 1.1111111111cqw;
  padding-top: 1.1111111111cqw;
  border-top: 1px solid #343a40;
}

.kinetic-create-summary b {
  color: #f8f9fa;
  font-size: 0.9722222222cqw;
  font-weight: 500;
  line-height: 1.3888888889cqw;
}

.kinetic-create-primary--step2 {
  margin-top: 1.1111111111cqw;
  border: 1px solid #343a40;
  background: #1a1a1a;
  color: #495057;
  box-shadow: none;
  text-shadow: none;
}

.kinetic-create-flow.is-step2-filled .kinetic-create-primary--step2,
.kinetic-create-flow.is-fee-open .kinetic-create-primary--step2,
.kinetic-create-flow.is-create-ready .kinetic-create-primary--step2 {
  border-color: transparent;
  background: #bf73dd;
  color: #fff;
  box-shadow:
    0 0 4px rgb(191 115 221 / 0.5),
    0 0 2px rgb(191 115 221 / 0.25);
  text-shadow:
    0 0 4px rgb(255 255 255 / 0.25),
    0 0 8px rgb(255 255 255 / 0.5);
}

.kinetic-success-content {
  display: flex;
  flex: 0 0 17.8472222222cqw;
  flex-direction: column;
  gap: 1.6666666667cqw;
  width: 100%;
  padding: 1.6666666667cqw;
  overflow: hidden;
}

.kinetic-success-heading {
  display: flex;
  flex-direction: column;
  gap: 0.5555555556cqw;
  width: 100%;
}

.kinetic-success-head {
  flex: 0 0 auto;
}

.kinetic-success-intro {
  margin: 0;
  color: #ced4da;
  font-size: 0.8333333333cqw;
  font-weight: 300;
  line-height: 1.1111111111cqw;
}

.kinetic-success-copy {
  margin: 0;
  color: #6c757d;
  font-family: "ABC Diatype", "Helvetica Neue LT Pro", "Inter", Arial, sans-serif;
  font-size: 0.9722222222cqw;
  font-weight: 400;
  line-height: 1.1111111111cqw;
}

.kinetic-referral-code {
  display: flex;
  flex-direction: column;
  gap: 1.1111111111cqw;
  width: 100%;
  margin: 0;
}

.kinetic-referral-code p {
  margin: 0;
  color: #ffffff;
  font-family: "ABC Diatype", "Helvetica Neue LT Pro", "Inter", Arial, sans-serif;
  font-size: 0.9722222222cqw;
  font-weight: 400;
  line-height: 1.1111111111cqw;
  text-align: center;
  text-shadow:
    0 0 4px rgb(255 255 255 / 0.25),
    0 0 8px rgb(255 255 255 / 0.5);
}

.kinetic-referral-code__box {
  display: flex;
  align-items: center;
  gap: 0.2777777778cqw;
  width: 100%;
  height: 2.7777777778cqw;
  padding: 0.5555555556cqw;
  border: 1px solid #343a40;
  border-radius: 0.4166666667cqw;
  background: #1a1a1a;
  font-family: "Helvetica Neue LT Pro", "Inter", Arial, sans-serif;
  font-size: 0.9722222222cqw;
  font-weight: 500;
  line-height: 1.3888888889cqw;
  white-space: nowrap;
}

.kinetic-referral-code__box span {
  color: #6c757d;
}

.kinetic-referral-code__box b {
  color: #bf73dd;
  font: inherit;
}

.kinetic-success-image {
  position: relative;
  flex: 0 0 17.4305555556cqw;
  width: 100%;
  overflow: hidden;
}

.kinetic-success-image img {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 31.1111111111cqw;
  height: 17.5cqw;
  max-width: none;
  object-fit: cover;
  transform: translateX(-50%);
}

.fc {
  position: relative;
  width: 100%;
  aspect-ratio: 1372 / 800;
}

.fc__shell-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.fc__chart-wrap {
  position: absolute;
  inset: 0;
  padding: clamp(14px, 1.9vw, 21px);
}

.fc__plot {
  position: relative;
  width: 100%;
  height: 100%;
}

.fc__svg {
  display: block;
  width: 100%;
  height: 100%;
}

.fc__grid-line {
  stroke: rgb(0 0 0 / 0.12);
  stroke-dasharray: 2 4;
}

.fc__baseline {
  stroke: rgb(115 115 112 / 0.62);
  stroke-width: 1.5;
}

.fc__axis-label {
  font-family: var(--f-mono);
  font-size: 14px;
  font-weight: 700;
  fill: rgb(58 58 55 / 0.7);
}

.fc__line {
  stroke: #067d4b;
  stroke-width: 2;
  filter: drop-shadow(0 0 2px rgb(6 125 75 / 0.5));
}

.fc__crosshair {
  stroke: rgb(133 132 127 / 0.86);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  pointer-events: none;
}

.fc__cursor-cross {
  fill: #8b8a85;
  pointer-events: none;
}

.fc__tracker-wrap {
  position: absolute;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.fc__tracker-ring,
.fc__tracker-dot {
  position: absolute;
  inset: 50% auto auto 50%;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.fc__tracker-ring {
  width: 5px;
  height: 5px;
  background: rgb(6 125 75 / 0.18);
}

.fc__tracker-dot {
  width: 2.5px;
  height: 2.5px;
  background: #067d4b;
  pointer-events: none;
}

.fc__hit-area {
  fill: transparent;
}

@media (hover: hover) {
  .fc__hit-area {
    cursor: none;
  }
}

.stage.is-paused *,
.stage.is-paused *::before,
.stage.is-paused *::after {
  animation-play-state: paused !important;
}

.stage.is-paused .mapping-state--image.is-active .kinetic-image-stage,
.stage.is-paused .mapping-state--testimonials.is-active .testimonial-shot {
  opacity: 1;
  animation: none !important;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

.stage.is-paused .mapping-state--testimonials.is-active .testimonial-shot {
  transform: translate3d(0, 0, 0) scale(1) rotate(var(--testimonial-rotate));
}

@keyframes kinetic-type-caret {
  0%,
  45% {
    opacity: 1;
  }

  46%,
  100% {
    opacity: 0;
  }
}

@keyframes ambient-drift {
  0%,
  100% {
    opacity: 0.46;
    transform: translate3d(-2.5%, 1%, 0) scale(0.96);
  }

  50% {
    opacity: 0.72;
    transform: translate3d(3%, -1.8%, 0) scale(1.04);
  }
}

@keyframes mapping-light-drift {
  0%,
  100% {
    opacity: 0.58;
    transform: translate3d(-1.5%, 1%, 0) scale(0.98);
  }

  50% {
    opacity: 0.82;
    transform: translate3d(2%, -1.2%, 0) scale(1.03);
  }
}

@keyframes kinetic-artifact-in {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes kinetic-heading-breathe {
  0%,
  100% {
    opacity: 0.48;
    text-shadow:
      0 0 4px rgb(255 255 255 / 0.26),
      0 0 8px rgb(255 255 255 / 0.36);
  }

  50% {
    opacity: 0.88;
    text-shadow:
      0 0 5px rgb(255 255 255 / 0.34),
      0 0 12px rgb(255 255 255 / 0.62),
      0 0 24px rgb(255 255 255 / 0.12);
  }
}

@keyframes kinetic-bar-rise {
  to {
    transform: scaleY(1);
  }
}

@keyframes kinetic-bar-glow {
  0%,
  100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.12);
  }
}

@keyframes kinetic-live-pulse {
  0%,
  100% {
    opacity: 0.74;
    transform: scale(0.86);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes kinetic-live-ring {
  0% {
    opacity: 0;
    transform: scale(0.55);
  }

  45% {
    opacity: 0.62;
  }

  100% {
    opacity: 0;
    transform: scale(1.85);
  }
}

@keyframes breaker-text-breathe {
  0%,
  100% {
    opacity: 0.68;
    text-shadow:
      0 0 4px rgb(255 255 255 / 0.16),
      0 0 18px rgb(255 255 255 / 0.06);
  }

  50% {
    opacity: 0.92;
    text-shadow:
      0 0 6px rgb(255 255 255 / 0.24),
      0 0 26px rgb(255 255 255 / 0.1);
  }
}

@keyframes swap-cta-breathe {
  0%,
  100% {
    box-shadow:
      0 0 4px rgb(191 115 221 / 0.25),
      0 0 8px rgb(191 115 221 / 0.42);
    transform: translateY(0);
  }

  50% {
    box-shadow:
      0 0 7px rgb(191 115 221 / 0.3),
      0 0 14px rgb(191 115 221 / 0.52),
      0 0 24px rgb(191 115 221 / 0.14);
    transform: translateY(-0.0347222222cqw);
  }
}

@keyframes swap-processing-breathe {
  0%,
  100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.12);
  }
}

@keyframes swap-best-breathe {
  0%,
  100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.14);
  }
}

@keyframes swap-route-flow {
  to {
    stroke-dashoffset: -64;
  }
}

@keyframes swap-chart-draw {
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes swap-chart-line-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes swap-chart-live-nudge {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  48% {
    transform: translate3d(0.0694444444cqw, -0.0416666667cqw, 0);
  }
}

@keyframes swap-chart-line-drift {
  0%,
  100% {
    filter: drop-shadow(0 0 2px rgb(255 255 255 / 0.2));
  }

  50% {
    filter: drop-shadow(0 0 3px rgb(255 255 255 / 0.3));
  }
}

@keyframes swap-toast-line {
  0% {
    transform: scaleX(1);
  }

  100% {
    transform: scaleX(0);
  }
}

@keyframes discover-panel-open {
  0%,
  28% {
    opacity: 0;
    transform: translateY(0.8333333333cqw) scale(0.985);
  }

  36%,
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes discover-scrim-open {
  0%,
  28% {
    opacity: 0;
  }

  36%,
  100% {
    opacity: 1;
  }
}

@keyframes discover-type {
  0%,
  45% {
    max-width: 0;
  }

  70%,
  100% {
    max-width: 5.8333333333cqw;
  }
}

@keyframes discover-cursor-path {
  0% {
    opacity: 0;
    transform: translate3d(65cqw, 5cqw, 0);
  }

  8% {
    opacity: 1;
  }

  26% {
    opacity: 1;
    transform: translate3d(67.5cqw, 2.35cqw, 0);
  }

  34% {
    opacity: 1;
    transform: translate3d(67.5cqw, 2.35cqw, 0) scale(0.92);
  }

  50% {
    opacity: 1;
    transform: translate3d(33.5cqw, 27.2cqw, 0);
  }

  76% {
    opacity: 1;
    transform: translate3d(38.8cqw, 39.2cqw, 0);
  }

  84% {
    opacity: 1;
    transform: translate3d(38.8cqw, 39.2cqw, 0) scale(0.92);
  }

  100% {
    opacity: 1;
    transform: translate3d(38.8cqw, 39.2cqw, 0);
  }
}

@keyframes discover-row-select {
  0%,
  72% {
    background: transparent;
    box-shadow: none;
  }

  82%,
  100% {
    background: #1a1a1a;
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.04),
      inset 0 -1px 0 rgb(0 0 0 / 0.45);
  }
}

@keyframes kinetic-image-stage-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 0.8rem, 0) scale(0.985);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes testimonial-shot-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 1.4rem, 0) scale(0.96) rotate(var(--testimonial-rotate));
    filter: blur(0.35rem);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(var(--testimonial-rotate));
    filter: blur(0);
  }
}

@keyframes swap-summary-unfill {
  0% {
    --summary-timer-empty: 0deg;
  }

  100% {
    --summary-timer-empty: 360deg;
  }
}

@keyframes about-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .slide {
    transition: none;
  }

  .about-profile,
  .about-copy,
  .kinetic-artifact {
    opacity: 1;
    transform: none;
  }

  .slide--about.is-active .about-profile,
  .slide--about.is-active .about-copy,
  .about-light,
  .mapping-light,
  .slide--mapping.is-active .mapping-state.is-active .whitepaper-panel,
  .slide--mapping.is-active .mapping-state.is-active .mapping-copy,
  .slide--mapping.is-active .mapping-state--pools.is-active .kinetic-artifact,
  .kinetic-panel__title,
  .kinetic-histogram span,
  .kinetic-live-dot,
  .kinetic-live-dot::after,
  .breaker-text,
  .swap-cta,
  .swap-live-chart__motion,
  .swap-live-chart__line,
  .swap-summary-timer,
  .route-line--raydium,
  .swap-toast__progress,
  .swap-toast__status,
  .swap-quote-row b {
    animation: none;
  }

  .shortcut-command,
  .cover-controls {
    animation: none;
  }
}