:root {
  --bg: #1b2229;
  --bg2: #1f272f;
  --bg3: #161c22;
  --s1: #222b33;
  --s2: #28323b;
  --s3: #2f3a44;
  --ink: #d9dee2;
  --mute: #9ba6ae;
  --dim: #6e7a83;
  --rule: rgba(217, 222, 226, .11);
  --rule2: rgba(217, 222, 226, .2);
  --cu: #b07a4f;
  --cu2: #c99169;
  --cu-soft: rgba(176, 122, 79, .16);
  --good: #8fa89a;
  --warn: #c2a061;
  --bad: #b9786c;
  --sans:
    "Sora",
    system-ui,
    sans-serif;
  --mono:
    "IBM Plex Mono",
    ui-monospace,
    monospace;
  --r: 10px;
  --wrap: 1200px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img,
svg,
canvas {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}
button,
input,
select {
  font: inherit;
  color: inherit;
}
abbr[title] {
  text-decoration: underline dotted var(--cu);
  text-underline-offset: 3px;
  cursor: help;
}
code,
.mono {
  font-family: var(--mono);
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  background: var(--ink);
  color: var(--bg);
  padding: 8px 12px;
  border-radius: 6px;
}
.skip:focus {
  top: 12px;
}
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 32px;
}
main,
.foot {
  position: relative;
  z-index: 1;
}
.tones {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.tone {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.t1 {
  background: var(--bg);
  opacity: 1;
}
.t2 {
  background: var(--bg2);
}
.t3 {
  background: var(--bg3);
}
:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--cu);
  outline-offset: 3px;
  transition: outline-offset .25s var(--ease);
}
a:focus-visible,
button:focus-visible {
  outline-offset: 4px;
}
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(27, 34, 41, .78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.nav-in {
  max-width: 1320px;
  margin: 0 auto;
  height: 64px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 500;
  letter-spacing: -.01em;
  font-size: 17px;
}
.brand-mark {
  width: 26px;
  height: 26px;
  color: var(--ink);
}
.bm-fill {
  fill: var(--cu);
}
.links {
  position: relative;
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.links a {
  position: relative;
  z-index: 1;
  padding: 8px 12px;
  font-size: 13.5px;
  color: var(--mute);
  text-decoration: none;
  border-radius: 7px;
  transition: color .3s var(--ease);
}
.links a:hover,
.links a.is-on {
  color: var(--ink);
}
.nav-ind {
  position: absolute;
  left: 0;
  top: 4px;
  height: calc(100% - 8px);
  width: 10px;
  border-radius: 7px;
  background: var(--s2);
  opacity: 0;
  transform-origin: left;
  pointer-events: none;
  transition: transform .45s var(--ease), opacity .3s;
}
.nav-r {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-x {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule2);
  border-radius: 8px;
  color: var(--mute);
}
.nav-x svg {
  width: 15px;
  height: 15px;
}
.burger {
  display: none;
  width: 38px;
  height: 38px;
  border: 1px solid var(--rule2);
  background: transparent;
  border-radius: 8px;
  position: relative;
  cursor: pointer;
}
.burger i {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 1.5px;
  background: var(--ink);
  transition: transform .35s var(--ease);
}
.burger i:first-child {
  top: 14px;
}
.burger i:last-child {
  top: 22px;
}
.burger[aria-expanded=true] i:first-child {
  transform: translateY(4px) rotate(45deg);
}
.burger[aria-expanded=true] i:last-child {
  transform: translateY(-4px) rotate(-45deg);
}
.wallet-slot {
  flex: none;
}
.x027 {
  position: relative;
}
.x027-btn {
  height: 38px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid var(--cu);
  background: var(--cu-soft);
  color: var(--ink);
  font: 500 13px var(--sans);
  cursor: pointer;
  white-space: nowrap;
  transition: transform .2s var(--ease), background .3s;
}
.x027-btn:hover {
  background: rgba(176, 122, 79, .26);
}
.x027-btn:active {
  transform: scale(.97);
}
.x027-btn.is-on {
  font-family: var(--mono);
  font-size: 12.5px;
  border-color: var(--rule2);
  background: var(--s1);
}
.x027-btn.is-on::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
  margin-right: 8px;
  vertical-align: 1px;
}
.x027-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 300;
  width: 270px;
  max-width: calc(100vw - 24px);
  background: var(--s1);
  border: 1px solid var(--rule2);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
  display: grid;
  gap: 2px;
}
.x027-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  font-size: 13.5px;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}
.x027-item:hover {
  background: var(--s2);
}
.x027-item img {
  width: 20px;
  height: 20px;
  border-radius: 5px;
}
.x027-addr {
  font: 12px/1.45 var(--mono);
  color: var(--ink);
  word-break: break-all;
  padding: 8px 10px 2px;
}
.x027-bal {
  font: 12px var(--mono);
  color: var(--cu2);
  padding: 2px 10px 8px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 4px;
}
.x027-note {
  font-size: 12px;
  color: var(--mute);
  padding: 8px 10px;
  line-height: 1.45;
}
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border-radius: 9px;
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background .3s var(--ease),
    border-color .3s,
    transform .25s var(--ease);
  will-change: transform;
}
.btn:active {
  transform: scale(.965) !important;
}
.btn-main {
  background: var(--cu);
  color: #1a1410;
}
.btn-main:hover {
  background: var(--cu2);
}
.btn-ghost {
  background: transparent;
  border-color: var(--rule2);
  color: var(--ink);
}
.btn-ghost:hover {
  border-color: var(--mute);
  background: rgba(217, 222, 226, .04);
}
.btn.sm {
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
}
.btn[disabled] {
  opacity: .55;
  cursor: progress;
}
.linkish {
  background: none;
  border: 0;
  padding: 0;
  color: var(--mute);
  cursor: pointer;
  font-size: 14px;
}
.linkish:hover {
  color: var(--ink);
}
.hero {
  position: relative;
  min-height: calc(100vh - 64px);
  padding: 56px 0 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.isobars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .9;
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
.station {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 26px;
  font: 12px var(--mono);
  letter-spacing: .04em;
  color: var(--mute);
  text-transform: uppercase;
}
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cu);
  box-shadow: 0 0 0 0 rgba(176, 122, 79, .5);
  animation: ping 2.6s var(--ease) infinite;
}
@keyframes ping {
  0% {
    box-shadow: 0 0 0 0 rgba(176, 122, 79, .45);
  }
  70%, 100% {
    box-shadow: 0 0 0 9px rgba(176, 122, 79, 0);
  }
}
.hero h1 {
  margin: 0;
  font-weight: 300;
  font-size: clamp(40px, 4.5vw, 66px);
  line-height: 1.04;
  letter-spacing: -.035em;
  max-width: 15.5ch;
}
.split .ln {
  display: block;
  overflow: hidden;
  padding-bottom: .08em;
  margin-bottom: -.08em;
}
.split .ln > span {
  display: inline-block;
  will-change: transform;
}
.lede {
  margin: 26px 0 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 33em;
  font-weight: 300;
}
.fine {
  margin: 10px 0 0;
  font-size: 13.5px;
  color: var(--mute);
}
.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.ca-chip {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 6px 6px 6px 12px;
  border: 1px solid var(--rule2);
  border-radius: 9px;
  background: var(--s1);
}
.ca-k {
  font: 500 11px var(--mono);
  color: var(--cu2);
}
.ca-v {
  font-size: 12.5px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.copy {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule2);
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
}
.copy svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.copy .c1,
.copy .c2 {
  transition: opacity .25s, transform .35s var(--ease);
  transform-origin: center;
}
.copy .ck {
  stroke: var(--good);
  stroke-dasharray: 16;
  stroke-dashoffset: 16;
  transition: stroke-dashoffset .45s var(--ease) .1s;
}
.copy.done .c1,
.copy.done .c2 {
  opacity: 0;
  transform: scale(.6);
}
.copy.done .ck {
  stroke-dashoffset: 0;
}
.hero-visual {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.vane {
  width: min(100%, 560px);
  aspect-ratio: 1 / 1;
  touch-action: pan-y;
}
.vane-read {
  width: min(100%, 460px);
  margin-top: -6px;
  text-align: center;
}
.vr-k {
  margin: 0;
  font: 11.5px var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dim);
}
.vr-v {
  margin: 6px 0 2px;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -.01em;
}
.vr-s {
  margin: 0;
  font-size: 12.5px;
  color: var(--mute);
}
.hero-foot {
  position: relative;
  margin-top: 34px;
}
.obs {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
}
.obs > div {
  padding: 16px 18px 0 0;
  min-width: 0;
}
.obs > div + div {
  padding-left: 18px;
  border-left: 1px solid var(--rule);
}
.obs dt {
  font: 11px var(--mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--dim);
}
.obs dd {
  margin: 4px 0 0;
  font: 400 22px var(--sans);
  letter-spacing: -.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flash {
  animation: flash 1.1s var(--ease);
}
@keyframes flash {
  0% {
    opacity: .35;
  }
  100% {
    opacity: 1;
  }
}
.tick-up {
  color: var(--good);
}
.tick-dn {
  color: var(--bad);
}
.skel {
  position: relative;
  display: inline-block;
  color: transparent !important;
  background: var(--s2);
  border-radius: 5px;
  overflow: hidden;
  min-width: 8ch;
}
.skel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(217, 222, 226, .1),
      transparent);
  transform: translateX(-100%);
  animation: shim 1.4s ease-in-out infinite;
}
@keyframes shim {
  to {
    transform: translateX(100%);
  }
}
.skel-row {
  height: 54px;
  border-radius: 8px;
  background: var(--s1);
  position: relative;
  overflow: hidden;
  margin-bottom: 8px;
}
.skel-row::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(217, 222, 226, .06),
      transparent);
  transform: translateX(-100%);
  animation: shim 1.4s ease-in-out infinite;
}
section {
  position: relative;
}
.steps {
  padding: 70px 0 80px;
  border-top: 1px solid var(--rule);
}
.sec-k {
  margin: 0 0 14px;
  font: 500 12px var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--cu2);
}
.steps-row {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
}
.step {
  position: relative;
  padding: 30px 28px 30px;
  min-width: 0;
  background: rgba(34, 43, 51, .45);
}
.step + .step {
  border-left: 1px solid var(--rule);
}
.step-ic {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: var(--cu2);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.step-n {
  position: absolute;
  top: 28px;
  right: 26px;
  font: 12px var(--mono);
  color: var(--dim);
}
.step h3 {
  margin: 22px 0 8px;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.3;
}
.step p {
  margin: 0;
  color: var(--mute);
  font-size: 14.5px;
}
.steps-note {
  margin: 18px 0 0;
  font-size: 13.5px;
  color: var(--mute);
  display: flex;
  align-items: center;
  gap: 10px;
}
.steps-note::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--cu);
}
.sec-h {
  max-width: 760px;
  margin-bottom: 34px;
}
.sec-h h2,
.fc-copy h2 {
  margin: 0;
  font-weight: 300;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.1;
  letter-spacing: -.03em;
}
.what {
  margin: 18px 0 0;
  color: var(--mute);
  font-size: 15.5px;
  max-width: 46em;
}
.what b {
  color: var(--ink);
  font-weight: 500;
}
.crossings,
.tool,
.gloss,
.faq {
  padding: 110px 0;
  border-top: 1px solid var(--rule);
}
.table-wrap {
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(34, 43, 51, .5);
}
.xtable {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
.xtable th {
  text-align: left;
  padding: 14px 18px;
  font: 500 11px var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dim);
  border-bottom: 1px solid var(--rule);
}
.xtable td {
  padding: 15px 18px;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
.xtable tr:last-child td {
  border-bottom: 0;
}
.xtable .num {
  text-align: right;
  font-family: var(--mono);
  font-size: 13.5px;
  white-space: nowrap;
}
.xtable tr.best td {
  background: rgba(176, 122, 79, .07);
}
.xtable tr.best td:first-child {
  box-shadow: inset 2px 0 0 var(--cu);
}
.chain {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}
.glyph {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--rule2);
  display: grid;
  place-items: center;
  font: 500 9px var(--mono);
  color: var(--mute);
}
.bar-col {
  width: 22%;
}
.cbar {
  height: 6px;
  border-radius: 3px;
  background: var(--s3);
  overflow: hidden;
}
.cbar i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--mute);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.1s var(--ease);
}
tr.best .cbar i {
  background: var(--cu);
}
.tool-name {
  color: var(--mute);
  font-size: 13.5px;
}
.badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 5px;
  font: 500 10.5px var(--mono);
  letter-spacing: .04em;
  color: var(--cu2);
  border: 1px solid rgba(176, 122, 79, .45);
  vertical-align: 1px;
}
.row-actions {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.stamp {
  font: 12px var(--mono);
  color: var(--dim);
}
.err {
  color: var(--bad);
}
.err-box {
  padding: 18px;
  border: 1px dashed rgba(185, 120, 108, .5);
  border-radius: 10px;
  color: var(--ink);
  background: rgba(185, 120, 108, .06);
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.forecast {
  border-top: 1px solid var(--rule);
}
.fc-pin {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 90px 0;
}
.fc-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: center;
}
.fc-steps {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.fc-step {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  padding: 16px 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  opacity: .42;
  transition:
    opacity .5s var(--ease),
    background .5s,
    border-color .5s;
}
.fc-step.is-on {
  opacity: 1;
  background: rgba(34, 43, 51, .7);
  border-color: var(--rule);
}
.fc-n {
  font: 12px var(--mono);
  color: var(--cu2);
  padding-top: 4px;
}
.fc-step h3 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.01em;
}
.fc-step p {
  margin: 0;
  font-size: 14px;
  color: var(--mute);
}
.fc-stage {
  min-width: 0;
}
#fc-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.fc-grid-lines path {
  stroke: var(--rule);
  stroke-width: 1;
  fill: none;
}
.fc-isos path {
  fill: none;
  stroke: rgba(217, 222, 226, .1);
  stroke-width: 1;
}
.rt {
  fill: none;
  stroke: var(--mute);
  stroke-width: 1.4;
  stroke-linecap: round;
}
.rt.best {
  stroke: var(--cu);
  stroke-width: 2.2;
}
.hub circle {
  fill: var(--bg3);
  stroke: var(--mute);
  stroke-width: 1.2;
}
.hub text {
  fill: var(--mute);
  font: 11px var(--mono);
  text-anchor: middle;
}
.hub .val {
  text-anchor: start;
  fill: var(--ink);
  font-size: 11.5px;
}
.hub .val.best {
  fill: var(--cu2);
}
.hub.h2 circle {
  stroke: var(--cu);
  fill: var(--cu);
}
.end circle {
  fill: var(--s1);
  stroke: var(--ink);
  stroke-width: 1.2;
}
.end text {
  fill: var(--ink);
  font: 500 11px var(--mono);
  text-anchor: middle;
  letter-spacing: .08em;
}
.vring {
  fill: none;
  stroke: rgba(176, 122, 79, .5);
  stroke-width: 1;
  stroke-dasharray: 2 5;
}
.vneedle path {
  fill: var(--cu);
}
.vneedle .vtail {
  fill: var(--ink);
  opacity: .75;
}
.vhub {
  fill: var(--ink);
}
.fc-ticket text {
  fill: var(--ink);
  font: 500 14px var(--sans);
}
.fc-ticket .tk-l {
  text-anchor: end;
}
.fc-ticket .tk-r {
  text-anchor: start;
  fill: var(--cu2);
}
.fc-ticket .tk-s {
  fill: var(--mute);
  font: 11px var(--mono);
}
.fc-cap {
  margin: 10px 0 0;
  font: 11.5px var(--mono);
  color: var(--dim);
  text-align: center;
}
.panel {
  background: rgba(34, 43, 51, .62);
  border: 1px solid var(--rule);
  border-radius: 14px;
}
.cmp-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 18px;
  padding: 24px;
  align-items: center;
}
.leg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}
.leg-k {
  grid-column: 1 / -1;
  margin: 0;
  font: 500 11px var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--dim);
}
.leg .field:last-of-type:nth-child(4) {
  grid-column: 1 / -1;
}
.leg-note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 13px;
  color: var(--mute);
  min-height: 20px;
}
.field {
  position: relative;
  display: grid;
  gap: 6px;
  min-width: 0;
}
.field > span {
  font-size: 12.5px;
  color: var(--mute);
}
.field input,
.field select {
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  background: var(--bg3);
  border: 1px solid var(--rule2);
  border-radius: 9px;
  color: var(--ink);
  font-size: 15px;
  transition: border-color .3s var(--ease), background .3s;
  -webkit-appearance: none;
  appearance: none;
}
.field select {
  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      var(--mute) 50%),
    linear-gradient(
      135deg,
      var(--mute) 50%,
      transparent 50%);
  background-position: calc(100% - 18px) 20px, calc(100% - 13px) 20px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
.field input {
  font-family: var(--mono);
  font-size: 14px;
}
.field::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--cu);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .45s var(--ease);
  pointer-events: none;
}
.field:focus-within::after {
  transform: scaleX(1);
}
.field input:focus,
.field select:focus {
  border-color: rgba(176, 122, 79, .7);
  background: #141a1f;
  outline: none;
}
.flip {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--rule2);
  background: var(--s1);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .5s var(--ease);
}
.flip svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.flip.spin {
  transform: rotate(180deg);
}
.form-foot {
  grid-column: 1 / -1;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 6px;
}
.hint {
  font-size: 13px;
  color: var(--dim);
}
.results {
  margin-top: 26px;
}
.seg {
  position: relative;
  display: inline-flex;
  padding: 4px;
  border-radius: 10px;
  background: var(--bg3);
  border: 1px solid var(--rule);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.seg::-webkit-scrollbar {
  display: none;
}
.seg button {
  position: relative;
  z-index: 1;
  flex: none;
  height: 34px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: var(--mute);
  font-size: 13.5px;
  border-radius: 7px;
  cursor: pointer;
  transition: color .3s;
}
.seg button[aria-selected=true] {
  color: var(--ink);
}
.seg-ind {
  position: absolute;
  z-index: 0;
  top: 4px;
  left: 0;
  height: 34px;
  width: 10px;
  border-radius: 7px;
  background: var(--s3);
  transition: transform .5s var(--ease), width .5s var(--ease);
}
.verdict {
  margin: 18px 0;
  padding: 16px 18px;
  border-left: 2px solid var(--cu);
  background: rgba(176, 122, 79, .06);
  border-radius: 0 10px 10px 0;
}
.verdict p {
  margin: 0;
  font-size: 15px;
}
.verdict .sub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--mute);
}
.routes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.route {
  display: grid;
  grid-template-columns: 34px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .7fr) minmax(0, .7fr);
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: rgba(34, 43, 51, .5);
}
.route.best {
  border-color: rgba(176, 122, 79, .6);
  background: rgba(176, 122, 79, .07);
}
.route .rk {
  font: 500 13px var(--mono);
  color: var(--dim);
}
.route.best .rk {
  color: var(--cu2);
}
.route .rn {
  min-width: 0;
}
.route .rn b {
  display: block;
  font-weight: 500;
  font-size: 15px;
  overflow-wrap: anywhere;
}
.route .rn span {
  display: block;
  font-size: 12.5px;
  color: var(--mute);
  overflow-wrap: anywhere;
}
.route .rn .badge {
  display: inline-block;
  font-size: 10.5px;
  color: var(--cu2);
}
.route .rv {
  font: 14px var(--mono);
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
}
.route .rv small {
  display: block;
  font-size: 11.5px;
  color: var(--dim);
}
.route .rpath {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font: 11.5px var(--mono);
  color: var(--mute);
}
.route .rpath i {
  width: 14px;
  height: 1px;
  background: var(--rule2);
}
.route .rpath span {
  padding: 3px 7px;
  border-radius: 5px;
  border: 1px solid var(--rule);
}
.sol-form {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, .8fr);
  gap: 14px;
  padding: 24px;
}
.sol-out {
  margin-top: 10px;
}
.routemap {
  padding: 18px;
  overflow: hidden;
}
#sol-svg {
  width: 100%;
  height: auto;
}
.rm-node rect {
  fill: var(--bg3);
  stroke: var(--rule2);
}
.rm-node.end rect {
  stroke: var(--ink);
}
.rm-node text {
  fill: var(--ink);
  font: 500 13px var(--sans);
  text-anchor: middle;
}
.rm-node .sub {
  fill: var(--mute);
  font: 11px var(--mono);
}
.rm-edge {
  fill: none;
  stroke: var(--cu);
  stroke-width: 1.8;
  stroke-linecap: round;
}
.rm-edge.alt {
  stroke: var(--mute);
  stroke-dasharray: 3 5;
  stroke-width: 1.2;
}
.rm-lbl {
  fill: var(--mute);
  font: 11px var(--mono);
  text-anchor: middle;
}
.rm-pct {
  fill: var(--cu2);
  font: 500 11px var(--mono);
  text-anchor: middle;
}
.kv {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 14px 0 0;
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
}
.kv > div {
  padding: 14px 16px;
  min-width: 0;
}
.kv > div + div {
  border-left: 1px solid var(--rule);
}
.kv dt {
  font: 11px var(--mono);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--dim);
}
.kv dd {
  margin: 4px 0 0;
  font: 15px var(--mono);
  overflow-wrap: anywhere;
}
.imp-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 44px;
  align-items: start;
}
.imp-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .7fr);
  gap: 14px;
  padding: 22px;
  margin-top: 28px;
}
.imp-chart {
  padding: 24px;
  min-width: 0;
}
.gauge-row {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.gauge {
  width: 200px;
  height: auto;
  flex: none;
}
.g-track {
  fill: none;
  stroke: var(--s3);
  stroke-width: 10;
  stroke-linecap: round;
}
.g-fill {
  fill: none;
  stroke: var(--cu);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 1.2s var(--ease);
}
.g-ticks line {
  stroke: var(--dim);
  stroke-width: 1;
}
.g-needle {
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  transform-origin: 110px 115px;
  transform: rotate(-90deg);
  transition: transform 1.4s var(--ease);
}
.g-hub {
  fill: var(--ink);
}
.big {
  margin: 4px 0 0;
  font: 300 40px var(--sans);
  letter-spacing: -.03em;
}
.lchart {
  width: 100%;
  height: auto;
  margin-top: 16px;
  overflow: visible;
}
.lc-grid line {
  stroke: var(--rule);
}
.lc-ax text {
  fill: var(--dim);
  font: 11px var(--mono);
}
.lc-line {
  fill: none;
  stroke: var(--cu);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.lc-area {
  fill: rgba(176, 122, 79, .1);
}
.lc-pt circle {
  fill: var(--bg);
  stroke: var(--cu);
  stroke-width: 2;
}
.lc-pt text {
  fill: var(--ink);
  font: 11px var(--mono);
  text-anchor: middle;
}
.agree-ctl {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.agree {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 36px;
  padding: 26px;
  align-items: center;
}
.rose-wrap {
  min-width: 0;
}
.rose {
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto;
}
.rose .rr {
  fill: none;
  stroke: var(--rule);
}
.rose .spoke {
  stroke: var(--rule);
}
.rose .petal {
  fill: rgba(176, 122, 79, .2);
  stroke: var(--cu);
  stroke-width: 1.2;
  transform-origin: 150px 150px;
  animation: petal 1.1s var(--ease) both;
}
.rose .petal:nth-of-type(2) {
  animation-delay: .12s;
}
.rose .petal:nth-of-type(3) {
  animation-delay: .24s;
}
@keyframes petal {
  from {
    transform: scale(.15);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
.rose text {
  fill: var(--mute);
  font: 10.5px var(--mono);
  text-anchor: middle;
}
.rose .ctr {
  fill: var(--ink);
  font: 300 20px var(--sans);
}
.srcs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.src {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 16px;
  align-items: center;
  padding: 13px 16px;
  border: 1px solid var(--rule);
  border-radius: 10px;
}
.src b {
  font-weight: 500;
}
.src small {
  display: block;
  color: var(--dim);
  font-size: 12px;
}
.src .p {
  font: 15px var(--mono);
}
.src .d {
  font: 12.5px var(--mono);
  color: var(--mute);
  min-width: 6ch;
  text-align: right;
}
.wal-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 22px;
}
.holds {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.hold {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: rgba(34, 43, 51, .5);
  min-width: 0;
}
.hold img,
.hold .ph {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--s3);
}
.hold b {
  display: block;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hold small {
  display: block;
  font: 12px var(--mono);
  color: var(--mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hold .usd {
  font: 14px var(--mono);
  text-align: right;
}
.hold .go {
  grid-column: 2 / -1;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.chip {
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--rule2);
  background: transparent;
  color: var(--mute);
  font-size: 12px;
  cursor: pointer;
  transition:
    color .25s,
    border-color .25s,
    transform .2s var(--ease);
}
.chip:hover {
  color: var(--ink);
  border-color: var(--cu);
}
.chip:active {
  transform: scale(.95);
}
.gl-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--rule);
}
.gl {
  padding: 24px 22px 26px 0;
  border-bottom: 1px solid var(--rule);
  min-width: 0;
}
.gl:not(:nth-child(4n+1)) {
  padding-left: 22px;
  border-left: 1px solid var(--rule);
}
.gl dt {
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 6px;
}
.gl dd {
  margin: 0;
  color: var(--mute);
  font-size: 14px;
}
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  gap: 50px;
}
.faq-list {
  border-top: 1px solid var(--rule);
}
.qa {
  border-bottom: 1px solid var(--rule);
}
.qa summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 40px 22px 0;
  position: relative;
  font-size: 17px;
  font-weight: 400;
}
.qa summary::-webkit-details-marker {
  display: none;
}
.qa summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid var(--mute);
  border-bottom: 1.5px solid var(--mute);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .4s var(--ease);
}
.qa[open] summary::after {
  transform: translateY(-30%) rotate(225deg);
}
.qa p {
  margin: 0 0 22px;
  color: var(--mute);
  max-width: 44em;
}
.foot {
  border-top: 1px solid var(--rule);
  padding: 60px 0 30px;
  background: rgba(22, 28, 34, .7);
}
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 50px;
}
.honest {
  margin: 18px 0 0;
  color: var(--mute);
  font-size: 13.5px;
  max-width: 52em;
}
.honest b {
  color: var(--ink);
  font-weight: 500;
}
.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-content: start;
  justify-content: flex-end;
}
.foot-links a {
  color: var(--mute);
  text-decoration: none;
  font-size: 14px;
}
.foot-links a:hover {
  color: var(--ink);
}
.coin-links {
  display: inline-flex;
  gap: 18px;
}
.foot-base {
  margin-top: 34px;
  font: 12px var(--mono);
  color: var(--dim);
}
.flows,
.roadmap,
.tokenomics {
  padding: 110px 0;
  border-top: 1px solid var(--rule);
}
.flow {
  margin: 0 0 18px;
  padding: 22px 24px 18px;
}
.flow-cap {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 10px;
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.flow-n {
  font: 500 11px var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--cu2);
}
.flow-box {
  width: 100%;
}
.flow-svg {
  width: 100%;
  height: auto;
  overflow: visible;
  margin: 0 auto;
}
.fpulse {
  opacity: 0;
}
.fn rect {
  fill: var(--bg3);
  stroke: var(--rule2);
  stroke-width: 1;
}
.fn.you rect {
  stroke: var(--ink);
}
.fn.live rect {
  stroke: rgba(143, 168, 154, .7);
}
.fn.model rect {
  stroke: var(--warn);
  stroke-dasharray: 4 4;
}
.fn.hub rect {
  stroke: var(--cu);
  fill: rgba(176, 122, 79, .08);
}
.fn.never rect {
  stroke: var(--bad);
  stroke-dasharray: 2 4;
  fill: rgba(185, 120, 108, .05);
}
.fn .t1 {
  fill: var(--ink);
  font: 500 14px var(--sans);
  text-anchor: middle;
}
.fn .t2 {
  fill: var(--mute);
  font: 11.5px var(--mono);
  text-anchor: middle;
}
.fe {
  fill: none;
  stroke: var(--mute);
  stroke-width: 1.3;
}
.fe.live {
  stroke: var(--good);
}
.fe.hot {
  stroke: var(--cu);
  stroke-width: 1.8;
}
.fe.never {
  stroke: var(--bad);
  stroke-dasharray: 3 5;
}
.fe-lbl {
  fill: var(--dim);
  font: 10.5px var(--mono);
  text-anchor: middle;
}
.fpulse {
  fill: var(--cu2);
}
.flow-key {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 12.5px;
  color: var(--mute);
}
.flow-key i {
  display: inline-block;
  width: 18px;
  height: 0;
  border-top: 2px solid;
  margin-right: 8px;
  vertical-align: 3px;
}
.k-live {
  color: var(--good);
}
.k-model {
  color: var(--warn);
  border-top-style: dashed !important;
}
.k-never {
  color: var(--bad);
  border-top-style: dotted !important;
}
.rmap {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
}
.rmap::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 7px;
  height: 1px;
  background: var(--rule2);
  transform-origin: left;
  transform: scaleX(var(--rm-p, 1));
}
.phase {
  position: relative;
  padding: 34px 18px 0 0;
  min-width: 0;
}
.ph-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--mute);
}
.is-done .ph-dot {
  background: var(--cu);
  border-color: var(--cu);
}
.is-build .ph-dot {
  border-color: var(--cu);
  background:
    radial-gradient(
      circle,
      var(--cu) 0 35%,
      var(--bg) 40%);
}
.ph-k {
  margin: 0 0 6px;
  font: 11px var(--mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--dim);
}
.ph-k .st {
  color: var(--mute);
}
.is-done .st {
  color: var(--good);
}
.is-build .st {
  color: var(--cu2);
}
.phase h3 {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.01em;
}
.phase ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}
.phase ul li {
  font-size: 13.5px;
  color: var(--mute);
  padding-left: 12px;
  position: relative;
}
.phase ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .7em;
  width: 5px;
  height: 1px;
  background: var(--dim);
}
.tk-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 5px;
  border: 1px solid var(--warn);
  color: var(--warn);
  font-size: 10.5px;
}
.tk-badge.live {
  border-color: var(--good);
  color: var(--good);
}
.tk-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.tk-chart {
  padding: 28px;
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}
.donut {
  width: 100%;
  max-width: 240px;
  height: auto;
  transform: rotate(-90deg);
}
.donut text {
  transform: rotate(90deg);
  transform-origin: 120px 120px;
}
.dn-track {
  fill: none;
  stroke: var(--s3);
  stroke-width: 22;
}
.dn-seg {
  fill: none;
  stroke-width: 22;
  stroke-dasharray: 0 553;
  transition: stroke-dasharray 1.6s var(--ease);
}
.dn-a {
  stroke: var(--cu);
}
.dn-b {
  stroke: #7f8e98;
}
.dn-c {
  fill: var(--ink);
  font: 500 15px var(--mono);
  text-anchor: middle;
}
.dn-s {
  fill: var(--mute);
  font: 11px var(--mono);
  text-anchor: middle;
}
.tk-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.tk-legend li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  font-size: 14px;
  color: var(--mute);
}
.tk-legend i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.tk-legend b {
  font: 500 14px var(--mono);
  color: var(--ink);
}
.lg-a {
  background: var(--cu);
}
.lg-b {
  background: #7f8e98;
}
.lg-c {
  background: var(--s3);
}
.tk-dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
}
.tk-dl > div {
  padding: 18px;
  border-bottom: 1px solid var(--rule);
  min-width: 0;
}
.tk-dl > div:nth-child(2n) {
  border-left: 1px solid var(--rule);
}
.tk-dl > div:nth-last-child(-n+2) {
  border-bottom: 0;
}
.tk-dl dt {
  font: 11px var(--mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--dim);
}
.tk-dl dd {
  margin: 6px 0 0;
  font-size: 15px;
}
.tk-live {
  margin-top: 14px;
  padding: 18px;
}
.tk-kv {
  margin-top: 10px;
}
.tk-note {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--mute);
}
.js:not(.rm):not(.motion-fail) [data-intro],
.js:not(.rm):not(.motion-fail) .reveal {
  opacity: 0;
}
.js:not(.motion-on):not(.rm):not(.motion-fail) .split {
  visibility: hidden;
}
.rm *,
.rm *::before,
.rm *::after {
  animation-duration: .001s !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001s !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
@media (max-width: 1100px) {
  .links a {
    padding: 8px 8px;
    font-size: 13px;
  }
  .route {
    grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr);
  }
  .route .rv.t,
  .route .rv.s {
    display: none;
  }
}
@media (max-width: 1180px) {
  .burger {
    display: block;
  }
  .links {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 10px 16px 18px;
    background: rgba(22, 28, 34, .97);
    border-bottom: 1px solid var(--rule);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform .4s var(--ease), opacity .3s;
  }
  .links.open {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
  .links a {
    padding: 14px 6px;
    font-size: 16px;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
  }
  .nav-ind {
    display: none;
  }
  .nav-r {
    margin-left: auto;
  }
}
@media (max-width: 960px) {
  .hero-grid,
  .fc-grid,
  .imp-grid,
  .faq-grid,
  .foot-grid,
  .tk-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .rmap {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 30px;
  }
  .hero-visual {
    margin-top: 10px;
  }
  .vane {
    width: min(100%, 420px);
  }
  .gl-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gl:not(:nth-child(4n+1)) {
    padding-left: 0;
    border-left: 0;
  }
  .gl:nth-child(2n) {
    padding-left: 20px;
    border-left: 1px solid var(--rule);
  }
  .foot-links {
    justify-content: flex-start;
  }
  .fc-pin {
    min-height: 0;
    display: block;
  }
  .fc-stage {
    position: sticky;
    top: 72px;
    z-index: 2;
    background: var(--bg3);
    padding: 10px 0;
    border-bottom: 1px solid var(--rule);
  }
  .fc-grid {
    gap: 20px;
  }
  .fc-copy {
    order: 2;
  }
  .fc-step {
    opacity: 1;
    background: rgba(34, 43, 51, .5);
    border-color: var(--rule);
    min-height: 46vh;
    align-content: start;
  }
}
@media (max-width: 720px) {
  .wrap {
    padding: 0 16px;
  }
  .nav-in {
    padding: 0 12px 0 16px;
    gap: 10px;
  }
  .brand span {
    font-size: 16px;
  }
  .x027-btn {
    padding: 0 12px;
    font-size: 12.5px;
  }
  .hero {
    padding: 26px 0 30px;
    min-height: 0;
  }
  .hero h1 {
    font-size: 38px;
    max-width: none;
  }
  .station {
    font-size: 10.5px;
    letter-spacing: .02em;
    margin-bottom: 18px;
  }
  .vane {
    width: min(100%, 340px);
  }
  .lede {
    font-size: 16.5px;
  }
  .obs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .obs > div:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
  .obs dd {
    font-size: 18px;
  }
  .steps-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .step + .step {
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
  .crossings,
  .tool,
  .gloss,
  .faq {
    padding: 76px 0;
  }
  .xtable th:nth-child(2),
  .xtable td:nth-child(2),
  .xtable th:nth-child(5),
  .xtable td:nth-child(5),
  .xtable .bar-col,
  .xtable td:nth-child(6) {
    display: none;
  }
  .xtable td small {
    display: block;
  }
  .xtable {
    table-layout: fixed;
  }
  .xtable .num {
    white-space: normal;
  }
  .chain {
    flex-wrap: wrap;
    gap: 6px 8px;
  }
  .chain .badge {
    margin-left: 0;
  }
  .xtable th,
  .xtable td {
    padding: 13px 12px;
  }
  .cmp-form {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px;
  }
  .flip {
    justify-self: center;
    transform: rotate(90deg);
  }
  .flip.spin {
    transform: rotate(270deg);
  }
  .sol-form,
  .imp-form {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px;
  }
  .kv {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kv > div:nth-child(3) {
    border-left: 0;
  }
  .kv > div:nth-child(n+3) {
    border-top: 1px solid var(--rule);
  }
  .route {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 6px 12px;
  }
  .route .rv {
    text-align: left;
    grid-column: 2;
  }
  .route .rpath {
    grid-column: 1 / -1;
  }
  .agree {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px;
  }
  .rose {
    max-width: 240px;
  }
  .src {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .src .d {
    grid-column: 1 / -1;
    text-align: left;
  }
  .gl-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .gl:nth-child(2n) {
    padding-left: 0;
    border-left: 0;
  }
  .holds {
    grid-template-columns: minmax(0, 1fr);
  }
  .btn {
    height: 44px;
    padding: 0 18px;
  }
  .form-foot .btn {
    flex: 1 1 auto;
  }
  .hint {
    width: 100%;
  }
  .flows,
  .roadmap,
  .tokenomics {
    padding: 76px 0;
  }
  .flow {
    padding: 16px;
  }
  .rmap {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 28px;
  }
  .rmap::before {
    left: 7px;
    right: auto;
    top: 0;
    bottom: 0;
    width: 1px;
    height: auto;
    transform-origin: top;
    transform: scaleY(var(--rm-p, 1));
  }
  .phase {
    padding: 0 0 28px;
  }
  .ph-dot {
    left: -28px;
    top: 2px;
  }
  .tk-grid,
  .tk-chart {
    grid-template-columns: minmax(0, 1fr);
  }
  .donut {
    max-width: 210px;
    margin: 0 auto;
  }
  .tk-dl {
    grid-template-columns: minmax(0, 1fr);
  }
  .tk-dl > div:nth-child(2n) {
    border-left: 0;
  }
  .tk-dl > div:nth-last-child(2) {
    border-bottom: 1px solid var(--rule);
  }
}
@media (max-width: 720px) {
  #agr-seg {
    display: flex;
    width: 100%;
    -webkit-mask-image:
      linear-gradient(
        90deg,
        #000 86%,
        transparent);
    mask-image:
      linear-gradient(
        90deg,
        #000 86%,
        transparent);
  }
  #agr-seg button {
    padding: 0 10px;
    font-size: 12.5px;
  }
}
.fe-lbl.fe-lbl-v {
  text-anchor: start;
}