/* Hoppr terminal, BRAND v3: near-black surfaces, cream text, mint/coral trading colours, aurora light.
   Builds on /_astro/site.CxmLOzQe.css (.head, .sheet, layout vars) but re-points the landing variables
   on html.t-html, so the terminal keeps its palette and type whatever the landing stylesheet says. */

@font-face {
  font-family: "Archivo";
  src: url(/fonts/archivo-latin.woff2) format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url(/fonts/instrument-sans-latin.woff2) format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url(/fonts/jetbrains-mono-latin.woff2) format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

html.t-html {
  --night: #050506;
  --night-2: #0e0f12;
  --night-3: #15161a;
  --on-night: #f5f3ed;
  --on-night-2: #f5f3edb8;
  /* lavender, the first stop of the mark's aurora: focus rings, selection, the Pro tier */
  --brand: #b8b3e6;
  --lavender: #b8b3e6;
  --violet: #050506;
  --sans: "Instrument Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: "Archivo", "Instrument Sans", ui-sans-serif, sans-serif;
  /* the mark's fill, bottom-left to top-right */
  --aurora: linear-gradient(45deg, #b8b3e6 0%, #5b6fd6 22%, #b6c24a 48%, #d9a24a 62%, #9a6fb0 80%, #3fa79a 100%);
}
.t-html {
  background: var(--night);
  color-scheme: dark;
  scroll-padding-top: 160px;
}
.t-body {
  --t-buy: #3cf0a8;
  --t-sell: #ff9382;
  --t-neutral: #a9a59b;
  --t-up: #3cf0a8;
  --t-dn: #ff9382;
  --t-amber: #f0c36a;
  /* text on mint / coral tints */
  --t-buy-ink: #6ff5c0;
  --t-sell-ink: #ffaa9c;
  --t-buy-ink-2: #aef9d8;
  --t-sell-ink-2: #ffc8be;
  --t-line: #1e2025;
  --t-line-2: #2a2b30;
  --t-dim: #a9a59b;
  --t-faint: #8a867d; /* text: 5.3:1 on surface */
  --t-faint-line: #6f6c64; /* lines and marks only */
  --t-fill: rgb(245 243 237 / 0.05);
  --t-fill-2: rgb(245 243 237 / 0.09);
  --t-deep: #09090b;
  --t-head-gap: calc(var(--head-h) + 20px);
  background: var(--night);
  color: var(--on-night);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.t-body ::selection {
  background: color-mix(in srgb, var(--brand) 45%, transparent);
  color: var(--on-night);
}
.t-body :focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 8px;
}
/* the dialog container takes focus only to anchor the focus trap; no ring around the whole panel */
.t-body .t-dpanel:focus-visible {
  outline: none;
}
.t-html.t-locked {
  overflow: hidden;
}
.t-body .mono,
.t-body code {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.t-body sub {
  vertical-align: -0.28em;
  margin: 0 0.04em;
  font-size: 0.72em;
  line-height: 0;
}
.t-na {
  color: var(--t-faint);
}
.t-body .skip {
  background: var(--on-night);
  color: var(--night);
}

/* ── header ─────────────────────────────────────────────── */
.t-head.head.on-violet {
  background: color-mix(in srgb, var(--night-2) 74%, transparent);
  color: var(--on-night);
  box-shadow: inset 0 0 0 1px var(--t-line);
  transition:
    background-color 0.45s var(--ease),
    box-shadow 0.45s var(--ease),
    transform 0.5s var(--ease);
}
.t-head.head.is-scrolled {
  background: color-mix(in srgb, var(--night-2) 88%, transparent);
  box-shadow:
    inset 0 0 0 1px var(--t-line-2),
    0 18px 40px -18px rgb(0 0 0 / 0.75);
}
.t-head.sheet-open {
  z-index: 70;
}
.t-head .brand img {
  flex: none;
  object-fit: contain;
}
.t-head .brand {
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 100%;
  letter-spacing: -0.03em;
}
.t-head .nav a {
  font-weight: 500;
}
.t-head .nav a[aria-current="page"] {
  opacity: 1;
}
.t-head .menu-btn path {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform 0.4s var(--ease),
    opacity 0.25s var(--ease);
}
.t-head .menu-btn[aria-expanded="true"] path:nth-child(1) {
  transform-origin: center;
  transform: translateY(6px) rotate(45deg);
}
.t-head .menu-btn[aria-expanded="true"] path:nth-child(2) {
  opacity: 0;
}
.t-head .menu-btn[aria-expanded="true"] path:nth-child(3) {
  transform-origin: center;
  transform: translateY(-6px) rotate(-45deg);
}
.t-head .menu-btn:hover {
  background: var(--t-fill);
}

.t-wallet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  margin-left: 6px;
  padding: 0 18px 0 15px;
  border: 0;
  border-radius: 999px;
  background: var(--on-night);
  color: var(--night);
  font-size: 15px;
  font-weight: 600;
  font-stretch: 100%;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition:
    background-color 0.25s var(--ease),
    transform 0.45s var(--ease);
}
.t-wallet:hover {
  background: #fff;
}
.t-wallet:active {
  transform: scale(0.97);
  transition-duration: 80ms;
}
.t-wallet.is-in {
  padding: 0 15px 0 6px;
  background: var(--t-fill-2);
  color: var(--on-night);
}
.t-wallet.is-in:hover {
  background: color-mix(in srgb, var(--on-night) 16%, transparent);
}
.t-wallet .t-wlab.mono {
  font-size: 13px;
  font-weight: 500;
}
.t-head .t-wallet:focus-visible {
  outline-color: var(--on-night);
}
@media (width<=420px) {
  .t-wallet.is-in .t-wlab {
    display: none;
  }
  .t-wallet.is-in {
    padding: 0 6px;
  }
}

.t-tier {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--on-night) 14%, transparent);
  color: var(--on-night);
  font-size: 12.5px;
  font-weight: 650;
  font-stretch: 100%;
  letter-spacing: 0;
}
.t-tier--holder {
  background: color-mix(in srgb, var(--brand) 26%, transparent);
}
.t-tier--pro {
  background: var(--brand);
  color: var(--night);
}

.t-sheet.sheet {
  background: var(--night);
  color: var(--on-night);
  padding-top: calc(var(--head-h) + 44px);
}
.t-sheet a[aria-current="page"]::after {
  content: ".";
  color: var(--brand);
}
.t-sheet.sheet a {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 100%;
  letter-spacing: -0.045em;
}
.t-sheet-note {
  margin-top: 26px;
  color: var(--t-faint);
  font-size: 15px;
}

/* ── layout ─────────────────────────────────────────────── */
.t-main {
  flex: 1;
  /* the footer starts below the fold, so it is not shoved off screen when the board renders */
  min-height: 100svh;
  padding-top: calc(var(--head-h) + 14px + 30px);
}
.t-wrap {
  width: 100%;
  max-width: calc(1560px + 2 * var(--gut));
  margin: 0 auto;
  padding-inline: var(--gut);
}

.t-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 18px;
  margin-bottom: 22px;
}
.t-bar-r {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  transition: opacity 0.3s var(--ease);
}
.t-bar-r.is-off {
  display: none;
}

.t-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: var(--night-2);
  box-shadow: inset 0 0 0 1px var(--t-line);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.t-tabs::-webkit-scrollbar {
  display: none;
}
.t-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  color: var(--t-dim);
  font-size: 15px;
  font-weight: 560;
  font-stretch: 100%;
  white-space: nowrap;
  transition:
    background-color 0.3s var(--ease),
    color 0.3s var(--ease);
}
.t-tabs a:hover {
  color: var(--on-night);
  background: var(--t-fill);
}
.t-tabs a[aria-current="page"] {
  background: var(--on-night);
  color: var(--night);
}
.t-count {
  font-size: 11.5px;
  font-weight: 500;
  opacity: 0.55;
}
.t-count:empty {
  display: none;
}

.t-paper {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--t-amber);
  background: color-mix(in srgb, var(--t-amber) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-amber) 34%, transparent);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
}
.t-paper--xs {
  height: 19px;
  padding: 0 6px;
  font-size: 9px;
}
.t-tabs a[aria-current="page"] .t-paper {
  color: #8a5a00;
  background: color-mix(in srgb, var(--t-amber) 30%, transparent);
  box-shadow: none;
}
.t-paper--xl {
  height: 34px;
  padding: 0 14px;
  font-size: 13px;
  letter-spacing: 0.2em;
  background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--t-amber) 20%, transparent) 0 6px, color-mix(in srgb, var(--t-amber) 7%, transparent) 6px 12px);
  margin-bottom: 18px;
}
.t-paper--sm {
  height: 22px;
  font-size: 10px;
}

.t-seg {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: var(--night-2);
  box-shadow: inset 0 0 0 1px var(--t-line);
}
.t-seg button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--t-dim);
  font-size: 14px;
  font-weight: 560;
  transition:
    background-color 0.3s var(--ease),
    color 0.3s var(--ease);
}
.t-seg button:hover {
  color: var(--on-night);
}
.t-seg button[aria-pressed="true"] {
  background: var(--t-fill-2);
  color: var(--on-night);
}
.t-early {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--t-line-2);
  color: var(--t-faint);
}

.t-fresh {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px 0 13px;
  border-radius: 999px;
  background: var(--night-2);
  box-shadow: inset 0 0 0 1px var(--t-line);
  font-size: 13.5px;
  font-weight: 560;
}
.t-fresh-age {
  color: var(--t-faint);
  font-size: 12.5px;
  font-weight: 450;
  font-variant-numeric: tabular-nums;
  min-width: 7.2ch;
  white-space: nowrap;
}
.t-fresh-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--t-faint);
}
.t-fresh[data-state="live"] .t-fresh-dot {
  background: var(--t-buy);
}
.t-fresh[data-state="live"] .t-fresh-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--t-buy);
  animation: t-ping 2.4s var(--ease) infinite;
}
.t-fresh[data-state="delayed"] .t-fresh-dot {
  background: var(--t-amber);
}
.t-fresh[data-state="stale"] .t-fresh-dot,
.t-fresh[data-state="error"] .t-fresh-dot {
  background: var(--t-sell);
}
.t-fresh[data-state="loading"] .t-fresh-dot {
  animation: t-blink 1.2s ease-in-out infinite;
}
@keyframes t-ping {
  0% {
    transform: scale(0.6);
    opacity: 0.9;
  }
  70%,
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}
@keyframes t-blink {
  50% {
    opacity: 0.3;
  }
}

/* ── panel heads ────────────────────────────────────────── */
.t-panel {
  animation: t-in 0.5s var(--ease) both;
}
@keyframes t-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
.t-head2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 52ch);
  align-items: end;
  gap: 12px 48px;
  margin-bottom: 22px;
}
.t-h2 {
  font-family: var(--display);
  font-size: clamp(30px, 2.9vw, 44px);
  font-weight: 800;
  font-stretch: 100%;
  letter-spacing: -0.045em;
  line-height: 0.98;
  text-wrap: balance;
}
.t-sub {
  color: var(--t-dim);
  font-size: 15.5px;
  line-height: 1.5;
  text-wrap: pretty;
}
@media (width<=899px) {
  .t-head2 {
    grid-template-columns: 1fr;
  }
}

/* ── banners ────────────────────────────────────────────── */
.t-delay {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 14px;
  margin-bottom: 22px;
  padding: 9px 9px 9px 12px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--t-amber) 7%, var(--night-2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-amber) 22%, transparent);
}
.t-delay[hidden] {
  display: none;
}
.t-delay-ic {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  color: var(--t-amber);
  background: color-mix(in srgb, var(--t-amber) 13%, transparent);
}
.t-delay p {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
}
.t-delay b {
  font-weight: 620;
  font-size: 14.5px;
}
.t-delay p span {
  color: var(--t-dim);
  font-size: 13.5px;
}
@media (width<=599px) {
  .t-delay {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .t-delay-cta {
    grid-column: 1 / -1;
  }
  .t-delay-cta .t-btn {
    width: 100%;
  }
}
.t-early-note {
  margin-bottom: 28px;
  padding: 14px 18px;
  border-radius: 18px;
  background: var(--night-2);
  box-shadow: inset 0 0 0 1px var(--t-line);
  color: var(--t-dim);
  font-size: 14.5px;
}
.t-early-note b {
  color: var(--on-night);
  font-weight: 620;
}

/* ── buttons ────────────────────────────────────────────── */
.t-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  font-stretch: 100%;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition:
    background-color 0.25s var(--ease),
    color 0.25s var(--ease),
    transform 0.4s var(--ease),
    box-shadow 0.25s var(--ease);
}
.t-btn:active:not(:disabled) {
  transform: scale(0.97);
  transition-duration: 80ms;
}
.t-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.t-btn--primary {
  background: var(--on-night);
  color: var(--night);
}
.t-btn--primary:hover:not(:disabled) {
  background: #fff;
}
.t-btn--light {
  background: var(--t-fill-2);
  color: var(--on-night);
}
.t-btn--light:hover:not(:disabled) {
  background: color-mix(in srgb, var(--on-night) 17%, transparent);
}
.t-btn--ghost {
  background: transparent;
  color: var(--on-night);
  box-shadow: inset 0 0 0 1px var(--t-line-2);
}
.t-btn--ghost:hover:not(:disabled) {
  background: var(--t-fill);
}
.t-btn--sm {
  height: 36px;
  padding: 0 14px;
  font-size: 14px;
}
.t-btn svg {
  flex: none;
}
.t-mini {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 11px;
  border: 0;
  border-radius: 999px;
  background: var(--t-fill);
  color: var(--on-night);
  font-size: 12.5px;
  font-weight: 560;
  white-space: nowrap;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.t-mini:hover {
  background: var(--t-fill-2);
}
.t-mini--danger:hover,
.t-mini.is-armed {
  background: color-mix(in srgb, var(--t-sell) 22%, transparent);
  color: var(--t-sell-ink-2);
}
.t-linkbtn {
  border: 0;
  padding: 0;
  background: none;
  color: var(--on-night);
  text-decoration: underline;
  text-underline-offset: 3px;
  font: inherit;
}

/* ── summary ────────────────────────────────────────────── */
.t-sum {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--t-line);
  margin-bottom: 16px;
}
.t-fig {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 15px 22px 15px 0;
  min-width: 0;
}
.t-fig + .t-fig {
  padding-left: 22px;
  border-left: 1px solid var(--t-line);
}
.t-lab {
  color: var(--t-faint);
  font-size: 13px;
  font-weight: 500;
}
.t-fig b {
  font-size: clamp(24px, 2.1vw, 32px);
  font-weight: 450;
  letter-spacing: -0.045em;
  line-height: 1.05;
  white-space: nowrap;
}
.t-fig small {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--t-dim);
  font-size: 13px;
  min-height: 20px;
}
.t-sum.is-loading .t-fig b {
  color: var(--t-faint);
  animation: t-blink 1.4s ease-in-out infinite;
}
.pos {
  color: var(--t-buy);
}
.neg {
  color: var(--t-sell);
}
.t-fig b.neg,
.t-netv.neg {
  color: color-mix(in srgb, var(--t-sell) 80%, var(--on-night));
}
@media (width<=899px) {
  .t-sum {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .t-fig:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
  .t-fig:nth-child(n + 3) {
    border-top: 1px solid var(--t-line);
  }
}

/* ── intro: headline + strip in one row on wide screens ─── */
.t-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-bottom: 18px;
}
.t-intro .t-head2 {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  margin: 0;
}
.t-intro .t-sub {
  max-width: 56ch;
  font-size: 14.5px;
}
.t-intro .t-sum {
  margin: 0;
}
.t-intro .t-fig small {
  flex-wrap: wrap;
  gap: 2px 6px;
  font-size: 12.5px;
  line-height: 1.35;
}
@media (width>=1180px) {
  .t-intro {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: end;
    gap: 40px;
  }
  .t-intro .t-sum {
    border-block: 0;
  }
  .t-intro .t-fig,
  .t-intro .t-fig + .t-fig {
    padding: 2px 12px 0 20px;
    border-left: 1px solid var(--t-line);
  }
}

/* ── top opportunities ──────────────────────────────────── */
/* three equal trade tickets: coin + net on top, the route (buy pad low, sell pad high) in the middle, size/gap/costs below */
.t-top {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.t-opp {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  min-width: 0;
  padding: 16px 18px 14px;
  border-radius: 20px;
  background: var(--night-2);
  box-shadow: inset 0 0 0 1px var(--t-line);
  transition:
    transform 0.45s var(--ease),
    box-shadow 0.3s var(--ease),
    background-color 0.3s var(--ease);
  animation: t-in 0.6s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.t-top.is-steady .t-opp {
  animation: none;
}
.t-opp:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px var(--t-line-2),
    0 22px 40px -28px rgb(0 0 0 / 0.9);
}
.t-opp--lead {
  background:
    radial-gradient(90% 80% at 100% 0%, rgb(153 69 255 / 0.13), transparent 62%),
    radial-gradient(70% 70% at 62% 0%, rgb(240 185 11 / 0.06), transparent 60%),
    radial-gradient(90% 90% at 0% 100%, rgb(53 84 255 / 0.12), transparent 62%),
    var(--night-2);
  box-shadow: none;
}
/* hairline of the mark's aurora around the lead ticket */
.t-opp--lead::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--aurora);
  opacity: 0.6;
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity 0.3s var(--ease);
}
.t-opp--lead:hover {
  box-shadow: 0 22px 40px -28px rgb(0 0 0 / 0.9);
}
.t-opp--lead:hover::before {
  opacity: 0.9;
}
/* the whole ticket is one button for pointer and keyboard */
.t-opp-hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 0;
  border-radius: inherit;
  background: none;
  cursor: pointer;
}
.t-opp-hit:focus-visible {
  outline-offset: 3px;
  border-radius: 22px;
}
.t-opp [data-tip] {
  position: relative;
  z-index: 2;
}
.t-opp-h {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.t-rank {
  align-self: flex-start;
  margin-top: 2px;
  color: var(--t-faint);
  font-size: 11px;
  letter-spacing: 0;
}
.t-opp-coin {
  display: grid;
  min-width: 0;
  line-height: 1.25;
}
.t-opp-coin b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 620;
  letter-spacing: -0.015em;
}
.t-opp-coin .mono {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--t-dim);
  font-size: 11px;
}
.t-opp-net {
  display: grid;
  justify-items: end;
  margin-left: auto;
  padding-left: 8px;
  text-align: right;
  line-height: 1.1;
}
.t-opp-net b {
  font-size: 26px;
  font-weight: 450;
  letter-spacing: -0.05em;
  white-space: nowrap;
  border-radius: 6px;
}
.t-opp--lead .t-opp-net b {
  font-size: 30px;
}
.t-opp-net small {
  margin-top: 3px;
  color: var(--t-faint);
  font-size: 11.5px;
  white-space: nowrap;
}
.t-opp.is-under .t-opp-net b {
  color: var(--t-dim);
}
.t-opp-route {
  display: grid;
  grid-template-columns: auto minmax(24px, 150px) auto;
  justify-content: space-between;
  align-items: end;
  gap: 10px;
  padding: 12px 12px 11px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--night) 42%, transparent);
  box-shadow: inset 0 0 0 1px var(--t-line);
}
.t-leg {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.t-leg.sell {
  text-align: right;
  justify-items: end;
}
.t-leg-lab {
  color: var(--t-faint);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.t-leg-ch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 580;
  white-space: nowrap;
}
.t-leg b {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.t-leg.buy b {
  color: var(--t-buy-ink);
}
.t-leg.sell b {
  color: var(--t-sell-ink);
}
.t-art {
  width: 100%;
  max-width: 150px;
  height: auto;
  overflow: visible;
  align-self: center;
  justify-self: center;
}
.t-art .pad.buy {
  fill: var(--t-buy);
}
.t-art .pad.sell {
  fill: var(--t-sell);
}
.t-art .arc,
.t-art .tip {
  fill: none;
  stroke: color-mix(in srgb, var(--on-night) 55%, transparent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.t-art .arc {
  stroke-dasharray: 3 5;
  animation: t-dash 1.4s linear infinite;
}
.t-opp:not(.t-opp--lead) .t-art .arc {
  animation-duration: 2.2s;
}
@keyframes t-dash {
  to {
    stroke-dashoffset: -16;
  }
}
.t-opp-foot {
  display: flex;
  gap: 18px;
  color: var(--on-night);
  font-size: 12.5px;
  white-space: nowrap;
}
.t-opp-foot span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.t-opp-foot i {
  color: var(--t-faint);
  font-family: var(--sans);
  font-style: normal;
  font-size: 11.5px;
  letter-spacing: 0;
}
.t-opp-foot span:last-child {
  margin-left: auto;
  color: var(--t-dim);
}
.t-opp--sk {
  min-height: 186px;
  align-content: start;
  cursor: default;
}
.t-opp--sk .t-sk:nth-child(1) {
  width: 46%;
}
.t-opp--sk .t-sk:nth-child(2) {
  height: 58px;
  border-radius: 12px;
}
.t-opp--sk .t-sk:nth-child(3) {
  width: 70%;
}
.t-opp--empty {
  grid-column: 1 / -1;
  display: block;
  padding: 20px 22px;
}
.t-opp--empty b {
  font-weight: 620;
}
.t-opp--empty p,
.t-top-note {
  color: var(--t-dim);
  font-size: 14px;
}
.t-top-note {
  grid-column: 1 / -1;
  margin-top: -2px;
}
@media (width<=1240px) {
  .t-opp-net b,
  .t-opp--lead .t-opp-net b {
    font-size: 23px;
  }
  .t-opp {
    padding-inline: 16px;
  }
  .t-opp-route {
    padding-inline: 10px;
  }
}
@media (width<=899px) and (width>=700px) {
  .t-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .t-opp--lead {
    grid-column: 1 / -1;
  }
}
@media (width<=699px) {
  .t-top {
    display: flex;
    gap: 10px;
    margin-inline: calc(-1 * var(--gut));
    padding: 2px var(--gut) 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gut);
    scrollbar-width: none;
  }
  .t-top::-webkit-scrollbar {
    display: none;
  }
  .t-opp {
    flex: 0 0 86%;
    scroll-snap-align: start;
  }
  .t-opp--empty {
    flex-basis: 100%;
  }
  .t-opp:hover {
    transform: none;
  }
  .t-opp-net b,
  .t-opp--lead .t-opp-net b {
    font-size: 24px;
  }
  .t-top-note {
    display: none;
  }
}

/* ── avatars, flags, routes ─────────────────────────────── */
.t-av {
  position: relative;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: var(--s, 30px);
  height: var(--s, 30px);
  border-radius: 50%;
  overflow: hidden;
  background: oklch(0.4 0.07 var(--h, 150));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
}
.t-av i {
  font-style: normal;
  font-size: calc(var(--s, 30px) * 0.44);
  font-weight: 650;
  color: oklch(0.93 0.04 var(--h, 150));
}
.t-av img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.t-flag {
  display: inline-flex;
  align-items: center;
  height: 17px;
  padding: 0 5px;
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--t-dim);
  box-shadow: inset 0 0 0 1px var(--t-line-2);
}
.t-flag--fx {
  color: #b8b3e6;
  box-shadow: inset 0 0 0 1px rgb(184 179 230 / 0.4);
}
.t-flag--thin {
  color: var(--t-amber);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-amber) 35%, transparent);
}
.t-route {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--t-faint);
}
.ci {
  flex: none;
  display: inline-block;
}

/* ── filters ────────────────────────────────────────────── */
.t-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  padding: 7px;
  border-radius: 22px;
  background: var(--night-2);
  box-shadow: inset 0 0 0 1px var(--t-line);
}
.t-search,
.t-sel,
.t-num {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--t-deep);
  box-shadow: inset 0 0 0 1px var(--t-line);
  font-size: 14px;
  color: var(--t-dim);
  transition: box-shadow 0.2s var(--ease);
}
.t-search:focus-within,
.t-sel:focus-within,
.t-num:focus-within {
  box-shadow: inset 0 0 0 1px var(--t-line-2), 0 0 0 2px color-mix(in srgb, var(--brand) 55%, transparent);
}
.t-search {
  flex: 1 1 240px;
  min-width: 0;
}
.t-search input,
.t-num input,
.t-sel select {
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  color: var(--on-night);
  font: inherit;
  font-size: 14.5px;
}
.t-search input {
  flex: 1;
}
.t-search input::placeholder,
.t-num input::placeholder {
  color: var(--t-faint);
}
.t-search input::-webkit-search-cancel-button {
  filter: invert(1) opacity(0.5);
}
.t-sel span,
.t-num > span:first-child {
  white-space: nowrap;
}
.t-sel select {
  appearance: none;
  padding-right: 18px;
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5 5 6.5 8 3.5' fill='none' stroke='%23ffffff' stroke-opacity='.6' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center;
  font-family: var(--mono);
  font-size: 13px;
}
.t-sel select option {
  background: var(--night-2);
  color: var(--on-night);
}
.t-num-in {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--t-faint);
}
.t-num-in i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 13px;
}
.t-num input {
  width: 6ch;
  font-family: var(--mono);
  font-size: 13px;
  -moz-appearance: textfield;
}
.t-num input::-webkit-inner-spin-button,
.t-num input::-webkit-outer-spin-button,
.t-field input::-webkit-inner-spin-button,
.t-field input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.t-tog {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 12px 0 10px;
  border-radius: 999px;
  color: var(--t-dim);
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.t-tog:hover {
  color: var(--on-night);
}
.t-tog input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.t-tog-ui {
  position: relative;
  flex: none;
  width: 32px;
  height: 19px;
  border-radius: 999px;
  background: var(--t-fill-2);
  box-shadow: inset 0 0 0 1px var(--t-line-2);
  transition: background-color 0.25s var(--ease);
}
.t-tog-ui::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--on-night);
  transition: transform 0.3s var(--ease);
}
.t-tog input:checked + .t-tog-ui {
  background: var(--on-night);
  box-shadow: none;
}
.t-tog input:checked + .t-tog-ui::after {
  background: var(--night);
}
.t-tog input:checked + .t-tog-ui::after {
  transform: translateX(13px);
}
.t-tog input:checked ~ span:last-child {
  color: var(--on-night);
}
.t-tog input:focus-visible + .t-tog-ui {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.t-reset {
  height: 42px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--t-dim);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.t-reset:hover {
  color: var(--on-night);
}
.t-msort {
  display: none;
}
.t-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-inline: 6px;
}
.t-presets[hidden] {
  display: none;
}
.t-presets-lab {
  color: var(--t-faint);
  font-size: 13px;
  margin-right: 4px;
}
.t-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--t-dim);
  box-shadow: inset 0 0 0 1px var(--t-line-2);
  font-size: 13.5px;
  font-weight: 540;
  white-space: nowrap;
  transition:
    background-color 0.25s var(--ease),
    color 0.25s var(--ease);
}
.t-chip:hover {
  color: var(--on-night);
  background: var(--t-fill);
}
.t-chip[aria-pressed="true"] {
  background: var(--on-night);
  color: var(--night);
  box-shadow: none;
}
.t-chip--x span {
  margin-left: 2px;
  font-size: 16px;
  line-height: 1;
}
@media (width<=699px) {
  .t-filters {
    padding: 8px;
    border-radius: 20px;
  }
  .t-search {
    flex-basis: 100%;
  }
  .t-sel,
  .t-num {
    flex: 1 1 auto;
  }
  .t-msort {
    display: inline-flex;
  }
  .t-presets {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--gut));
    padding-inline: var(--gut);
  }
}

/* ── table ──────────────────────────────────────────────── */
.t-tablebox {
  margin-top: 16px;
  border-radius: var(--r-card);
  background: var(--night-2);
  box-shadow: inset 0 0 0 1px var(--t-line);
  overflow: clip;
}
.t-tablemeta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--t-line);
  color: var(--t-dim);
  font-size: 13px;
}
.t-tablemeta b {
  color: var(--on-night);
  font-weight: 500;
}
.t-warn {
  color: var(--t-amber);
}
.t-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--t-faint);
}
.t-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 8px;
  border-radius: 3px;
}
.lg-buy {
  background: color-mix(in srgb, var(--t-buy) 55%, transparent);
}
.lg-sell {
  background: color-mix(in srgb, var(--t-sell) 55%, transparent);
}
.t-legend i.lg-depth {
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: var(--t-faint);
}
.t-tablewrap {
  overflow-x: auto;
}
/* keep .sr (position:absolute) cell labels inside their scroller, else they widen the page */
.t-tablewrap,
.t-mx-wrap,
.t-log-wrap {
  position: relative;
}
@media (width>=1240px) {
  .t-tablewrap {
    overflow: visible;
  }
  .t-table thead th {
    position: sticky;
    top: calc(var(--head-h) + 14px + 4px);
    z-index: 3;
  }
}
.t-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.t-table th {
  height: 46px;
  padding: 0 10px;
  background: var(--night-2);
  border-bottom: 1px solid var(--t-line);
  color: var(--t-faint);
  font-size: 12.5px;
  font-weight: 520;
  text-align: right;
  white-space: nowrap;
}
.t-table th:first-child,
.t-table td:first-child {
  padding-left: 20px;
  text-align: left;
}
.t-table th:last-child,
.t-table td:last-child {
  padding-right: 20px;
}
.t-table th button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  white-space: nowrap;
}
.t-table th > span,
.t-table th button > span {
  vertical-align: middle;
}
.t-table th .ci {
  margin-right: -1px;
}
.t-table th button:hover,
.t-table th.is-sorted {
  color: var(--on-night);
}
.t-sorti {
  opacity: 0;
  transition: opacity 0.2s;
}
.t-sorti path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.35;
}
.t-table th button:hover .t-sorti,
.t-table th.is-sorted .t-sorti {
  opacity: 1;
}
.t-table th[aria-sort="ascending"] .t-sorti .u,
.t-table th[aria-sort="descending"] .t-sorti .d {
  opacity: 1;
}
.t-table td {
  height: 52px;
  padding: 0 10px;
  border-bottom: 1px solid var(--t-line);
  text-align: right;
  white-space: nowrap;
  vertical-align: middle;
  transition: background-color 0.2s var(--ease);
}
.t-table tbody tr:last-child td {
  border-bottom: 0;
}
.t-table tbody tr {
  cursor: pointer;
}
.t-table tbody tr:hover td {
  background: color-mix(in srgb, var(--on-night) 3%, transparent);
}
.t-coin {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 230px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
}
.t-coin-t {
  display: grid;
  min-width: 0;
  line-height: 1.25;
}
.t-coin-t b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.t-coin-t small {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--t-dim);
  font-size: 11.5px;
}
.t-coin:hover b {
  text-decoration: underline;
  text-decoration-color: var(--t-faint);
  text-underline-offset: 3px;
}
.t-pc {
  display: inline-grid;
  justify-items: end;
  gap: 4px;
  min-width: 92px;
  padding: 5px 8px 6px;
  border-radius: 9px;
}
.t-pv {
  font-size: 13px;
  font-stretch: 87.5%;
}
.t-pc.cheap {
  background: color-mix(in srgb, var(--t-buy) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-buy) 20%, transparent);
}
.t-pc.dear {
  background: color-mix(in srgb, var(--t-sell) 11%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-sell) 20%, transparent);
}
.t-pc.cheap .t-pv {
  color: var(--t-buy-ink);
}
.t-pc.dear .t-pv {
  color: var(--t-sell-ink);
}
.t-depth {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: var(--t-fill);
  overflow: hidden;
}
.t-depth i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: color-mix(in srgb, var(--on-night) 34%, transparent);
  margin-left: auto;
  transition: width 0.6s var(--ease);
}
.t-pc.cheap .t-depth i {
  background: var(--t-buy);
}
.t-pc.dear .t-depth i {
  background: var(--t-sell);
}
.t-cl {
  display: none;
}
.t-gapv {
  display: inline-block;
  font-size: 13.5px;
  font-weight: 500;
  opacity: calc(0.62 + var(--g, 0) * 0.38);
}
.t-netv {
  font-size: 13.5px;
  font-weight: 500;
}
.t-netv.zero {
  color: var(--t-dim);
}
.c-net .t-netv.neg {
  color: var(--t-faint);
}
.c-route .t-route {
  justify-content: flex-end;
}
.c-size,
.c-liq,
.c-age {
  color: var(--t-dim);
}
.t-table tr.is-pos .c-size {
  color: var(--on-night);
}

.fl-up {
  animation: t-flash-up 1.1s var(--ease);
}
.fl-dn {
  animation: t-flash-dn 1.1s var(--ease);
}
@keyframes t-flash-up {
  from {
    background-color: rgb(60 240 168 / 0.3);
  }
}
@keyframes t-flash-dn {
  from {
    background-color: rgb(255 147 130 / 0.3);
  }
}

.t-sk {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--t-fill) 25%, var(--t-fill-2) 50%, var(--t-fill) 75%) 0 0 / 300% 100%;
  animation: t-shimmer 1.6s linear infinite;
}
.t-sk.tall {
  height: 200px;
  border-radius: 18px;
}
@keyframes t-shimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}
.t-skel td .t-sk {
  width: 70%;
  margin-left: auto;
}
.t-skel td:first-child .t-sk {
  width: 140px;
  margin-left: 0;
}
.t-state[hidden] {
  display: none;
}
.t-state {
  padding: 28px 20px;
}
.t-statebox {
  display: grid;
  justify-items: start;
  gap: 6px;
  max-width: 560px;
}
.t-statebox b {
  font-size: 16px;
  font-weight: 620;
}
.t-statebox p {
  color: var(--t-dim);
  font-size: 14.5px;
}
.t-statebox-a {
  margin-top: 10px;
}
.t-statebox--err b::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--t-sell);
  vertical-align: 2px;
}
.t-foot-note {
  max-width: 92ch;
  margin-top: 16px;
  color: var(--t-faint);
  font-size: 13px;
}

/* stacked cards under 700 px */
@media (width<=699px) {
  .t-tablebox {
    border-radius: 22px;
  }
  .t-tablemeta {
    padding: 12px 16px;
  }
  .t-legend {
    display: none;
  }
  .t-table thead {
    display: none;
  }
  .t-table,
  .t-table tbody {
    display: block;
  }
  /* 30-column card grid: coin | net, then five stats (6 cols each), then prices 3 + 2 per row */
  .t-table tbody tr {
    display: grid;
    grid-template-columns: repeat(30, minmax(0, 1fr));
    gap: 12px 0;
    padding: 16px 13px;
    border-bottom: 1px solid var(--t-line);
  }
  .t-table tbody tr:last-child {
    border-bottom: 0;
  }
  .t-table td,
  .t-table td:first-child,
  .t-table td:last-child {
    display: block;
    height: auto;
    padding: 0 3px;
    border: 0;
    text-align: left;
    min-width: 0;
  }
  .t-table tbody tr:hover td {
    background: none;
  }
  .t-table td.c-coin {
    grid-column: 1 / 19;
    grid-row: 1;
  }
  .t-table td.c-net {
    grid-column: 19 / 31;
    grid-row: 1;
    text-align: right;
    align-self: center;
  }
  .t-table td.c-net .t-netv {
    font-size: 17px;
  }
  .t-table td.c-gap,
  .t-table td.c-route,
  .t-table td.c-size,
  .t-table td.c-liq,
  .t-table td.c-age {
    grid-row: 2;
    grid-column: span 6;
  }
  .t-table td.c-ch {
    grid-column: span 10;
  }
  .t-table td.c-ch:nth-child(n + 5) {
    grid-column: span 15;
  }
  .t-table td[data-l]::before {
    content: attr(data-l);
    display: block;
    margin-bottom: 3px;
    color: var(--t-faint);
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0;
  }
  .t-table td.c-net::before {
    text-align: right;
  }
  .c-route .t-route {
    justify-content: flex-start;
  }
  .t-pc {
    display: grid;
    justify-items: start;
    gap: 4px;
    width: 100%;
    min-width: 0;
    padding: 7px 7px 7px;
    border-radius: 10px;
    background: var(--t-fill);
  }
  .t-pc .t-pv {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .t-cl {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--t-faint);
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.04em;
  }
  .t-depth i {
    margin-left: 0;
  }
  .t-coin {
    max-width: 100%;
  }
  .t-skel {
    display: block !important;
    padding: 14px 16px;
  }
  .t-skel td {
    display: none !important;
  }
  .t-skel td:first-child {
    display: block !important;
  }
}

/* ── drawer ─────────────────────────────────────────────── */
.t-drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
}
.t-drawer[hidden] {
  display: none;
}
.t-scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--night) 72%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.t-dpanel {
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  width: min(860px, calc(100vw - 20px));
  border-radius: 28px;
  background: var(--night-2);
  box-shadow:
    inset 0 0 0 1px var(--t-line-2),
    0 40px 90px -30px rgb(0 0 0 / 0.8);
  overflow: hidden;
  outline: 0;
  transform: translateX(calc(100% + 24px));
  transition: transform 0.5s var(--ease);
}
.t-drawer.open .t-scrim {
  opacity: 1;
}
.t-drawer.open .t-dpanel {
  transform: none;
}
.t-dtop {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 14px 14px;
  border-bottom: 1px solid var(--t-line);
}
.t-back {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--t-fill);
  color: var(--on-night);
  transition: background-color 0.2s var(--ease);
}
.t-back:hover {
  background: var(--t-fill-2);
}
.t-dtitle {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
.t-dtitle > div {
  display: grid;
  min-width: 0;
  line-height: 1.2;
}
.t-dtitle h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: -0.03em;
}
.t-dtitle .mono {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--t-dim);
  font-size: 12px;
}
.t-dact {
  display: flex;
  gap: 8px;
  flex: none;
}
.t-dbody {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 28px 36px;
}
.t-dhero {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 18px 36px;
  padding-bottom: 20px;
}
.t-dfig {
  display: grid;
  align-content: start;
  gap: 6px;
}
.t-dfig b {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 450;
  letter-spacing: -0.05em;
  line-height: 1.05;
}
.t-dfig small {
  color: var(--t-dim);
  font-size: 12.5px;
}
.t-droute {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  font-size: 16px;
  font-weight: 600;
}
.t-droute .t-arr {
  flex: none;
  color: var(--t-faint);
}
@media (width<=599px) {
  .t-droute {
    flex-wrap: wrap;
    gap: 2px 5px;
    height: auto;
    min-height: 42px;
    font-size: 15px;
  }
}
.t-dcosts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--t-line);
}
.t-dcosts span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--t-fill);
  color: var(--t-dim);
  font-size: 12.5px;
}
.t-dcosts span.t-dcap {
  color: var(--t-amber);
  background: color-mix(in srgb, var(--t-amber) 10%, transparent);
}
.t-dcosts b {
  color: var(--on-night);
  font-weight: 500;
  font-size: 12.5px;
}
.t-dsec {
  padding-top: 28px;
}
.t-dsec h3,
.t-card-h h3 {
  font-size: 16px;
  font-weight: 600;
  font-stretch: 100%;
  letter-spacing: -0.015em;
}
.t-dsec h3 {
  margin-bottom: 12px;
}
.t-dnote {
  margin: -6px 0 14px;
  color: var(--t-dim);
  font-size: 13.5px;
}
.t-ccs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 8px;
}
.t-cc {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 15px 16px 14px;
  border-radius: 18px;
  background: var(--t-deep);
  box-shadow: inset 0 0 0 1px var(--t-line);
}
.t-cc.cheap {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-buy) 50%, transparent);
  background: color-mix(in srgb, var(--t-buy) 7%, var(--t-deep));
}
.t-cc.dear {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-sell) 50%, transparent);
  background: color-mix(in srgb, var(--t-sell) 6%, var(--t-deep));
}
.t-cc-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
}
.t-cc-h b {
  font-weight: 600;
}
.t-badge {
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}
.t-badge.cheap {
  background: color-mix(in srgb, var(--t-buy) 22%, transparent);
  color: var(--t-buy-ink-2);
}
.t-badge.dear {
  background: color-mix(in srgb, var(--t-sell) 22%, transparent);
  color: var(--t-sell-ink-2);
}
.t-cc-p {
  font-size: 20px;
  font-weight: 450;
  letter-spacing: -0.04em;
}
.t-cc-q {
  color: var(--t-dim);
  font-size: 12px;
}
.t-cc-vs {
  color: var(--t-faint);
}
.t-cc dl {
  display: grid;
  gap: 5px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--t-line);
}
.t-cc dl div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
}
.t-cc dt {
  color: var(--t-faint);
}
.t-cc dd small {
  color: var(--t-faint);
  font-family: var(--sans);
  font-size: 11px;
}
.t-cc-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-self: start;
  margin-top: 10px;
  color: var(--on-night);
  font-size: 13px;
  font-weight: 560;
  text-decoration: underline;
  text-decoration-color: var(--t-faint);
  text-underline-offset: 3px;
}
.t-cc.none p {
  font-size: 13px;
}
.t-mx-wrap {
  overflow-x: auto;
}
.t-mx {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
  margin: -4px;
  font-size: 12.5px;
}
.t-mx th {
  padding: 4px 6px;
  color: var(--t-dim);
  font-size: 11.5px;
  font-weight: 520;
  white-space: nowrap;
}
.t-mx thead th {
  text-align: center;
}
.t-mx th .ci {
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}
.t-mx th span {
  vertical-align: middle;
}
.t-mx tbody th {
  text-align: left;
}
.t-mx-corner {
  color: var(--t-faint);
  font-size: 10.5px;
}
.t-mx td {
  height: 52px;
  padding: 0 8px;
  border-radius: 10px;
  background: var(--t-fill);
  text-align: center;
  white-space: nowrap;
  line-height: 1.25;
}
.t-mx td span {
  display: block;
  font-size: 12.5px;
}
.t-mx td small {
  display: block;
  color: var(--t-faint);
  font-size: 10.5px;
}
.t-mx td.pos {
  background: rgb(60 240 168 / calc(var(--a, 0.15) * 0.8));
}
.t-mx td.pos span {
  color: #d6fcec;
}
.t-mx td.neg span {
  color: var(--t-faint);
}
.t-mx td.best {
  box-shadow: inset 0 0 0 1.5px var(--t-buy);
}
.t-mx td.nopay span {
  color: var(--t-faint);
  font-size: 11px;
}
.t-mx td.nopay {
  background: color-mix(in srgb, var(--on-night) 3%, transparent);
}
.t-mx td.self,
.t-mx td.none {
  color: var(--t-faint);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--t-line);
}
.t-chartbox {
  min-height: 150px;
  border-radius: 18px;
  background: var(--t-deep);
  box-shadow: inset 0 0 0 1px var(--t-line);
  padding: 10px 6px 4px 0;
}
.t-chartbox--sm {
  min-height: 120px;
}
.t-chart {
  display: block;
  overflow: visible;
}
.t-chart .grid {
  stroke: var(--t-line);
  stroke-width: 1;
}
.t-chart .grid.zero {
  stroke: color-mix(in srgb, var(--on-night) 28%, transparent);
  stroke-dasharray: 3 4;
}
.t-chart .tick {
  fill: var(--t-faint);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: -0.02em;
}
.t-chart .line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.t-chart.good {
  color: var(--t-buy);
}
.t-chart.bad {
  color: var(--t-sell);
}
.t-chart.neutral {
  color: color-mix(in srgb, var(--on-night) 80%, transparent);
}
.t-chart.split,
.t-chart .pos {
  color: var(--t-buy);
}
.t-chart .neg {
  color: var(--t-sell);
}
.t-chart .mdot.neg {
  fill: var(--t-sell);
}
.t-chart .hole {
  fill: color-mix(in srgb, var(--on-night) 3%, transparent);
  stroke: var(--t-line);
  stroke-dasharray: 2 4;
}
.t-chart .hole-t {
  fill: var(--t-faint);
  font-family: var(--mono);
  font-size: 10.5px;
}
.t-chart .mline {
  stroke: color-mix(in srgb, var(--on-night) 26%, transparent);
  stroke-dasharray: 2 4;
}
.t-chart .mdot {
  fill: currentColor;
  stroke: var(--night-2);
  stroke-width: 3;
}
.t-chart .mlabel {
  fill: var(--on-night);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: -0.02em;
  paint-order: stroke;
  stroke: var(--t-deep);
  stroke-width: 4px;
}
.t-chart-empty {
  display: grid;
  place-items: center;
  min-height: 130px;
  color: var(--t-faint);
  font-size: 13.5px;
  text-align: center;
  padding: 0 20px;
}
.t-hstats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: -4px 0 12px;
  color: var(--t-dim);
  font-size: 13px;
}
.t-hstats b {
  color: var(--on-night);
  font-weight: 500;
}
.t-dfoot {
  margin-top: 26px;
  color: var(--t-faint);
  font-size: 12.5px;
}
.t-dsk {
  display: grid;
  gap: 10px;
  padding-top: 8px;
}
@media (width<=699px) {
  .t-dpanel {
    top: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    border-radius: 0;
    transform: translateY(100%);
  }
  .t-dbody {
    padding: 18px 16px 40px;
  }
  .t-dhero {
    grid-template-columns: 1fr 1fr;
  }
  .t-dhero .t-dfig:last-child {
    grid-column: 1 / -1;
  }
  .t-dact .t-btn--ghost {
    display: none;
  }
  /* one pool per row, details in two columns: nothing wraps */
  .t-ccs {
    grid-template-columns: 1fr;
  }
  /* phone pool card: name left, price right, details in two columns */
  .t-cc {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 2px;
    padding: 13px 14px 12px;
    border-radius: 16px;
  }
  .t-cc-h {
    grid-row: 1 / 3;
    align-self: start;
    flex-wrap: wrap;
    margin: 0;
  }
  .t-cc-h .t-badge {
    margin-left: 0;
  }
  .t-cc-p {
    grid-column: 2;
    grid-row: 1;
    font-size: 17px;
    text-align: right;
  }
  .t-cc-q {
    grid-column: 2;
    grid-row: 2;
    text-align: right;
    font-size: 11px;
  }
  .t-cc dl,
  .t-cc-link,
  .t-cc.none p {
    grid-column: 1 / -1;
  }
  /* the link sits in the empty sixth cell of the details grid */
  .t-cc {
    position: relative;
  }
  .t-cc-link {
    position: absolute;
    right: 14px;
    bottom: 11px;
    margin: 0;
    font-size: 12.5px;
  }
  .t-cc dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 18px;
    margin-top: 10px;
    padding-top: 10px;
  }
  .t-cc dl div {
    font-size: 12px;
    min-width: 0;
  }
  .t-cc dd {
    text-align: right;
    white-space: nowrap;
  }
  /* route matrix fits the screen: fixed columns, icon-only column heads */
  .t-mx {
    table-layout: fixed;
    border-spacing: 3px;
    margin: -3px;
  }
  .t-mx thead th:first-child {
    width: 56px;
  }
  .t-mx thead th {
    padding: 4px 0;
  }
  .t-mx thead th:not(:first-child) span {
    display: none;
  }
  .t-mx thead th .ci {
    margin-right: 0;
  }
  .t-mx-corner {
    display: block;
    font-size: 9.5px;
    line-height: 1.3;
    white-space: normal;
    text-align: left;
  }
  .t-mx tbody th {
    padding: 4px 2px;
    font-size: 11px;
  }
  .t-mx tbody th .ci {
    margin-right: 4px;
  }
  .t-mx td {
    height: 46px;
    padding: 0 2px;
  }
  .t-mx td span {
    font-size: 11px;
    letter-spacing: -0.04em;
  }
  .t-mx td small {
    font-size: 9.5px;
  }
}
@media (width<=380px) {
  .t-cc dd small {
    display: block;
  }
}

/* ── bot ────────────────────────────────────────────────── */
.t-bothead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px 40px;
  margin-bottom: 30px;
}
.t-bothead .t-sub {
  max-width: 72ch;
  margin-top: 14px;
}
.t-bs {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: end;
  gap: 2px 9px;
  padding: 14px 18px;
  border-radius: 18px;
  background: var(--night-2);
  box-shadow: inset 0 0 0 1px var(--t-line);
}
.t-bs b {
  font-size: 15px;
  font-weight: 620;
}
.t-bs small {
  grid-column: 2;
  color: var(--t-faint);
  font-size: 12.5px;
}
.t-bs-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--t-faint);
}
.t-bs[data-status="running"] .t-bs-dot {
  background: var(--t-buy);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--t-buy) 22%, transparent);
}
.t-bs[data-status="paused"] .t-bs-dot {
  background: var(--t-amber);
}
.t-bs[data-status="stopped"] .t-bs-dot,
.t-bs[data-status="error"] .t-bs-dot {
  background: var(--t-sell);
}
.t-botstatus .t-warn {
  margin-top: 8px;
  font-size: 13px;
  text-align: right;
}
.t-card {
  padding: 22px 24px;
  border-radius: var(--r-card);
  background: var(--night-2);
  box-shadow: inset 0 0 0 1px var(--t-line);
  min-width: 0;
}
.t-card-h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 16px;
}
.t-card-sub {
  color: var(--t-faint);
  font-size: 13px;
}
.t-card-h .t-btn,
.t-card-h .t-card-sub:last-child {
  margin-left: auto;
}
.t-botgrid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}
.t-botgrid--b {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}
.t-eq .t-chartbox {
  background: none;
  box-shadow: none;
  padding: 0;
}
.t-big {
  display: grid;
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 450;
  letter-spacing: -0.05em;
  line-height: 1.05;
}
.t-big small {
  margin-top: 4px;
  color: var(--t-faint);
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0;
}
.t-cbar {
  display: flex;
  gap: 2px;
  height: 12px;
  margin: 20px 0 18px;
  border-radius: 999px;
  overflow: hidden;
}
.t-cbar i,
.t-clist i {
  display: block;
  min-width: 3px;
}
.cb-kept {
  background: var(--t-buy);
}
.cb-fees {
  background: color-mix(in srgb, var(--on-night) 62%, transparent);
}
.cb-gas {
  background: color-mix(in srgb, var(--on-night) 38%, transparent);
}
.cb-bridge {
  background: color-mix(in srgb, var(--on-night) 20%, transparent);
}
.cb-rebal {
  background: color-mix(in srgb, var(--t-amber) 55%, transparent);
}
.cb-none {
  background: var(--t-fill);
}
.t-clist {
  display: grid;
  gap: 8px;
}
.t-clist li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--t-dim);
}
.t-clist i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.t-clist b {
  color: var(--on-night);
  font-weight: 500;
  font-size: 13.5px;
}
.t-inv {
  display: grid;
  gap: 2px;
}
.t-inv li {
  display: grid;
  grid-template-columns: 130px minmax(60px, 1fr) 84px 72px;
  align-items: center;
  gap: 4px 14px;
  min-height: 44px;
  border-bottom: 1px solid var(--t-line);
  font-size: 14px;
}
.t-inv li:last-child {
  border-bottom: 0;
}
.t-inv-ch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.t-inv-ch b {
  font-weight: 560;
}
.t-inv-bar {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: var(--t-fill);
}
.t-inv-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: color-mix(in srgb, var(--on-night) 50%, transparent);
}
.t-inv-bar em {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 1.5px;
  background: var(--t-amber);
  opacity: 0.8;
}
.t-inv-bar em.seed {
  background: color-mix(in srgb, var(--on-night) 45%, transparent);
  opacity: 1;
}
.t-inv li.is-low .t-inv-bar i {
  background: var(--t-amber);
}
.t-inv-key {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.t-inv-key i {
  display: inline-block;
  width: 1.5px;
  height: 12px;
  margin-left: 8px;
}
.t-inv-key i:first-child {
  margin-left: 0;
}
.k-seed {
  background: color-mix(in srgb, var(--on-night) 45%, transparent);
}
.k-line {
  background: var(--t-amber);
}
.t-reb {
  margin-bottom: 12px;
}
.t-reb .t-reb-note {
  margin: -4px 0 12px;
  max-width: 80ch;
}
.t-reblist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  column-gap: 28px;
}
.t-reblist li {
  display: grid;
  grid-template-columns: 48px auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  border-bottom: 1px solid var(--t-line);
  font-size: 13px;
}
.t-reb-t {
  color: var(--t-faint);
  font-size: 12px;
}
.t-reb-r {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--t-faint);
}
.t-reb-w {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--t-dim);
}
.t-reblist b {
  font-size: 12.5px;
  font-weight: 500;
}
.t-inv-usd {
  text-align: right;
  font-size: 13px;
}
.t-inv-tok {
  color: var(--t-faint);
  font-size: 12.5px;
  text-align: right;
}
.t-inv-low {
  grid-column: 2 / -1;
  margin-top: -6px;
  padding-bottom: 6px;
  color: var(--t-amber);
  font-size: 11.5px;
}
.t-cfg {
  display: grid;
  gap: 0;
}
.t-cfg div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 42px;
  border-bottom: 1px solid var(--t-line);
  font-size: 14px;
}
.t-cfg div:last-child {
  border-bottom: 0;
}
.t-cfg dt {
  color: var(--t-dim);
}
.t-cfg dd {
  display: inline-flex;
  gap: 4px;
  text-align: right;
}
.t-card .t-dnote {
  margin: 14px 0 0;
}
.t-log {
  padding: 22px 0 6px;
}
.t-log .t-card-h {
  padding-inline: 24px;
}
.t-log .t-statebox {
  padding: 4px 24px 18px;
}
.t-log-wrap {
  overflow-x: auto;
}
.t-ltable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.t-ltable th {
  height: 38px;
  padding: 0 12px;
  border-bottom: 1px solid var(--t-line);
  color: var(--t-faint);
  font-size: 12.5px;
  font-weight: 520;
  text-align: left;
  white-space: nowrap;
}
.t-ltable td {
  height: 50px;
  padding: 0 12px;
  border-bottom: 1px solid var(--t-line);
  white-space: nowrap;
}
.t-ltable th:first-child,
.t-ltable td:first-child {
  padding-left: 24px;
}
.t-ltable th:last-child,
.t-ltable td:last-child {
  padding-right: 24px;
}
.t-ltable tbody tr:last-child td {
  border-bottom: 0;
}
.t-ltable tr.is-skip td {
  color: var(--t-dim);
}
.t-ltable .t-legs-c {
  text-align: right;
}
.t-st {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
}
.t-st.ok {
  background: color-mix(in srgb, var(--t-buy) 18%, transparent);
  color: var(--t-buy-ink-2);
}
.t-st--skip {
  background: var(--t-fill);
  color: var(--t-dim);
}
.t-reason {
  margin-left: 8px;
  color: var(--t-faint);
  font-size: 12px;
  white-space: normal;
}
.t-legs-row td {
  height: auto;
  padding: 0 24px 14px;
  background: color-mix(in srgb, var(--on-night) 2%, transparent);
}
.t-legs {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.t-legs th,
.t-legs td {
  height: 34px;
  padding: 0 10px 0 0;
  text-align: left;
  border-bottom: 1px solid var(--t-line);
}
.t-legs td .ci {
  display: inline-block;
  vertical-align: -3px;
}
.t-side {
  text-transform: uppercase;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
}
.t-side.buy {
  color: var(--t-buy);
}
.t-side.sell {
  color: var(--t-sell);
}
@media (width<=1023px) {
  .t-botgrid,
  .t-botgrid--b {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (width<=699px) {
  .t-bothead {
    grid-template-columns: 1fr;
  }
  .t-bs {
    justify-content: start;
  }
  .t-card {
    padding: 18px;
  }
  .t-inv li {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
  .t-inv-bar {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-bottom: 10px;
  }
  .t-log {
    padding: 18px 0 4px;
  }
  .t-log .t-card-h {
    padding-inline: 18px;
  }
  .t-ltable thead {
    display: none;
  }
  .t-ltable,
  .t-ltable tbody {
    display: block;
  }
  .t-ltable tbody tr:not(.t-legs-row) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 8px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--t-line);
  }
  .t-ltable td,
  .t-ltable td:first-child,
  .t-ltable td:last-child {
    display: block;
    height: auto;
    padding: 0;
    border: 0;
    white-space: normal;
  }
  .t-ltable td[data-l]::before {
    content: attr(data-l);
    display: block;
    margin-bottom: 2px;
    color: var(--t-faint);
    font-family: var(--sans);
    font-size: 11px;
  }
  .t-ltable .t-legs-c {
    grid-column: 1 / -1;
    text-align: left;
  }
  .t-ltable .t-legs-c:empty {
    display: none;
  }
  .t-legs-row {
    display: block;
    padding: 0 18px 12px;
  }
  .t-legs-row td {
    display: block;
    padding: 0;
    overflow-x: auto;
  }
  .t-keys tbody tr:not(.t-legs-row) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* trade log: two dense lines per trade (coin, route, net / time, size, gap, legs) */
  .t-log .t-ltable tbody tr:not(.t-legs-row) {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(78px, auto);
    align-items: center;
    gap: 6px 10px;
    padding: 13px 18px;
  }
  .t-log .t-ltable td::before {
    display: none !important;
  }
  .t-log .t-ltable td[data-l="Coin"] {
    grid-row: 1;
    grid-column: 1 / 3;
    font-size: 15px;
  }
  .t-log .t-ltable td[data-l="Route"] {
    grid-row: 1;
    grid-column: 3;
  }
  .t-log .t-ltable td[data-l="Net"] {
    grid-row: 1;
    grid-column: 4;
    text-align: right;
    font-size: 15px;
  }
  .t-log .t-ltable td[data-l="Time"] {
    grid-row: 2;
    grid-column: 1;
    color: var(--t-faint);
    font-size: 12px;
  }
  .t-log .t-ltable td[data-l="Size"],
  .t-log .t-ltable td[data-l="Gap"] {
    grid-row: 2;
    font-size: 12.5px;
  }
  .t-log .t-ltable td[data-l="Gap"]::after {
    content: " gap";
    color: var(--t-faint);
    font-family: var(--sans);
    font-size: 11.5px;
  }
  .t-log .t-ltable td[data-l="Status"] {
    display: none;
  }
  .t-log .t-ltable tr.is-skip td[data-l="Status"] {
    display: block;
    grid-row: 3;
    grid-column: 1 / -1;
  }
  .t-log .t-ltable .t-legs-c {
    grid-row: 2;
    grid-column: 4;
    text-align: right;
  }
}

/* ── gates ──────────────────────────────────────────────── */
.t-gate {
  display: grid;
  grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 24px 32px;
  align-items: start;
  margin-bottom: 14px;
  padding: 32px;
  border-radius: var(--r-card);
  background:
    radial-gradient(70% 110% at 0% 0%, rgb(53 84 255 / 0.12), transparent 60%),
    radial-gradient(50% 90% at 34% 0%, rgb(200 255 0 / 0.04), transparent 60%),
    radial-gradient(60% 110% at 100% 0%, rgb(153 69 255 / 0.1), transparent 62%),
    var(--night-2);
  box-shadow: inset 0 0 0 1px var(--t-line);
}
.t-gate-ic {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--t-fill);
  color: var(--on-night);
}
.t-gate h3 {
  font-family: var(--display);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 800;
  font-stretch: 100%;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.t-gate p {
  max-width: 54ch;
  margin-top: 10px;
  color: var(--t-dim);
  font-size: 15px;
}
.t-gate-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.t-gate-list {
  display: grid;
  gap: 10px;
  padding: 18px 20px;
  border-radius: 18px;
  background: var(--t-deep);
  box-shadow: inset 0 0 0 1px var(--t-line);
}
.t-gate-list li {
  position: relative;
  padding-left: 24px;
  color: var(--t-dim);
  font-size: 14px;
}
.t-gate-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 10px;
  height: 6px;
  border-left: 1.8px solid var(--t-buy);
  border-bottom: 1.8px solid var(--t-buy);
  transform: rotate(-45deg);
}
@media (width<=1023px) {
  .t-gate {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .t-gate-list {
    grid-column: 2;
  }
}
@media (width<=599px) {
  .t-gate {
    grid-template-columns: minmax(0, 1fr);
    padding: 22px 20px;
  }
  .t-gate-list {
    grid-column: auto;
  }
}

/* ── alerts ─────────────────────────────────────────────── */
.t-alerts-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 12px;
  align-items: start;
}
@media (width<=1023px) {
  .t-alerts-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.t-tg .t-btn {
  margin-top: 4px;
}
.t-tg-st {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 560;
}
.t-tg-st.ok .t-bs-dot {
  background: var(--t-buy);
}
.t-tg .t-dnote {
  margin: 0 0 14px;
}
.t-tg-link {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--t-line);
}
.t-tg-link .t-dnote {
  margin-top: 10px;
}
.t-note-warn {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--t-amber) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-amber) 26%, transparent);
  color: #f7d9a0;
  font-size: 13.5px;
}
.t-rule {
  margin-bottom: 10px;
  padding: 16px;
  border-radius: 18px;
  background: var(--t-deep);
  box-shadow: inset 0 0 0 1px var(--t-line);
  transition: opacity 0.3s var(--ease);
}
.t-rule.is-off .t-rule-f {
  opacity: 0.55;
}
.t-rule-h {
  display: flex;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 14px;
}
.t-rule-h .t-tog {
  height: 32px;
  padding: 0;
}
.t-rule-s {
  flex: 1;
  min-width: 0;
  color: var(--t-dim);
  font-size: 13.5px;
}
.t-rule-f {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 180px)) minmax(0, 1fr);
  gap: 12px;
  transition: opacity 0.3s var(--ease);
}
.t-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--t-faint);
  font-size: 12.5px;
}
.t-field small {
  color: var(--t-faint);
  font-size: 11px;
  margin-left: 4px;
}
.t-field--wide {
  grid-column: 1 / -1;
}
.t-field > input,
.t-field .t-num-in {
  height: 42px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: var(--night-2);
  box-shadow: inset 0 0 0 1px var(--t-line-2);
  color: var(--on-night);
  font: inherit;
  font-size: 14px;
}
.t-field .t-num-in input {
  flex: 1;
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  color: var(--on-night);
  font-family: var(--mono);
  font-size: 14px;
  -moz-appearance: textfield;
}
.t-field .t-num-in:focus-within,
.t-field > input:focus {
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--t-line-2), 0 0 0 2px color-mix(in srgb, var(--brand) 55%, transparent);
}
.t-coins {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 6px 8px;
  border-radius: 12px;
  background: var(--night-2);
  box-shadow: inset 0 0 0 1px var(--t-line-2);
}
.t-coins:focus-within {
  box-shadow: inset 0 0 0 1px var(--t-line-2), 0 0 0 2px color-mix(in srgb, var(--brand) 55%, transparent);
}
.t-coins input {
  flex: 1 1 100px;
  min-width: 80px;
  height: 28px;
  border: 0;
  outline: 0;
  background: none;
  color: var(--on-night);
  font: inherit;
  font-size: 14px;
}
.t-cchip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 4px 0 10px;
  border-radius: 999px;
  background: var(--t-fill-2);
  color: var(--on-night);
  font-family: var(--mono);
  font-size: 12px;
}
.t-cchip button {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--t-dim);
  font-size: 15px;
  line-height: 1;
}
.t-cchip button:hover {
  background: var(--t-fill-2);
  color: var(--on-night);
}
.t-chainpick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.t-rules-empty {
  padding: 22px 0 8px;
}
.t-rules-empty b {
  font-weight: 620;
}
.t-rules-empty p {
  margin-top: 4px;
  color: var(--t-dim);
  font-size: 14px;
}
.t-rules-f {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px 16px;
  margin-top: 16px;
}
.t-dirty {
  color: var(--t-faint);
  font-size: 13px;
  margin-right: auto;
}
.t-form-err {
  flex-basis: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--t-sell) 12%, transparent);
  color: var(--t-sell-ink-2);
  font-size: 13.5px;
}
.t-form-err[hidden] {
  display: none;
}
@media (width<=599px) {
  .t-rule-h {
    flex-wrap: wrap;
  }
  .t-rule-s {
    order: 3;
    flex-basis: 100%;
  }
  .t-rule-h .t-mini {
    margin-left: auto;
  }
  .t-rule-f {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── API ────────────────────────────────────────────────── */
.t-keyscard {
  margin-bottom: 12px;
}
.t-keyform {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  margin-bottom: 16px;
}
.t-keyform .t-field {
  flex: 1 1 240px;
  max-width: 360px;
}
.t-newkey {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
  padding: 18px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--t-buy) 9%, var(--t-deep));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-buy) 40%, transparent);
}
.t-newkey p {
  margin-top: 2px;
  color: var(--t-dim);
  font-size: 13.5px;
}
.t-newkey code {
  display: block;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--night);
  font-size: 13px;
  overflow-wrap: anywhere;
  user-select: all;
}
.t-newkey-a {
  display: flex;
  gap: 8px;
}
.t-keys-a {
  text-align: right;
}
.t-docs {
  padding: 22px 24px;
  border-radius: var(--r-card);
  background: var(--night-2);
  box-shadow: inset 0 0 0 1px var(--t-line);
}
.t-code {
  margin-bottom: 10px;
  border-radius: 16px;
  background: var(--t-deep);
  box-shadow: inset 0 0 0 1px var(--t-line);
  overflow: hidden;
}
.t-code-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 8px 8px 16px;
  border-bottom: 1px solid var(--t-line);
  color: var(--t-dim);
  font-size: 12.5px;
}
.t-code pre {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  font-size: 12.5px;
  line-height: 1.7;
}
.t-code code {
  font-size: 12.5px;
}
.t-cfg--docs {
  margin-top: 8px;
}
.t-cfg--docs div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: baseline;
  padding: 10px 0;
}
.t-cfg--docs dd {
  display: block;
  max-width: 72ch;
  color: var(--on-night);
  text-align: left;
}
.t-docs-grid {
  display: grid;
  gap: 12px;
}
.t-docs-l {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
}
.t-docs-r {
  min-width: 0;
}
.t-docs-grid .t-code {
  margin: 0;
}
@media (width>=1100px) {
  .t-docs-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 16px;
  }
  .t-docs-r .t-code--json pre {
    max-height: 470px;
  }
}
.t-code--json pre {
  max-height: 340px;
  overflow: auto;
  color: color-mix(in srgb, var(--on-night) 86%, transparent);
}
.t-body p code,
.t-body dd code,
.t-ftable code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--t-fill);
  font-size: 0.86em;
}
.t-fields {
  margin-top: 14px;
  border-top: 1px solid var(--t-line);
}
.t-fields summary {
  padding: 14px 0 4px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14.5px;
}
.t-ftable {
  width: 100%;
  margin-top: 8px;
  border-collapse: collapse;
  font-size: 13.5px;
}
.t-ftable th,
.t-ftable td {
  padding: 10px 0;
  border-bottom: 1px solid var(--t-line);
  text-align: left;
  vertical-align: top;
}
.t-ftable th {
  width: 30%;
  padding-right: 16px;
  font-weight: 500;
  white-space: nowrap;
}
.t-ftable td {
  color: var(--t-dim);
}
@media (width<=599px) {
  .t-cfg--docs div {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .t-cfg--docs dd {
    text-align: left;
  }
  .t-ftable th {
    width: auto;
    white-space: normal;
  }
  .t-docs {
    padding: 18px;
  }
}

/* ── wallet popover ─────────────────────────────────────── */
.t-pop {
  position: fixed;
  z-index: 90;
  width: 360px;
  max-width: calc(100vw - 24px);
  padding: 16px;
  border-radius: 22px;
  background: var(--night-2);
  color: var(--on-night);
  box-shadow:
    inset 0 0 0 1px var(--t-line-2),
    0 30px 70px -20px rgb(0 0 0 / 0.75);
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  transition:
    opacity 0.25s var(--ease),
    transform 0.35s var(--ease);
  font-size: 14px;
}
.t-pop.in {
  opacity: 1;
  transform: none;
}
.t-pop--sheet {
  top: auto !important;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  max-width: none;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  border-radius: 24px 24px 0 0;
  transform: translateY(20px);
  transform-origin: bottom center;
}
.t-pop-h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.t-pop-h b {
  font-size: 16px;
  font-weight: 640;
}
.t-x {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-left: auto;
  border: 0;
  border-radius: 50%;
  background: var(--t-fill);
  color: var(--on-night);
}
.t-x:hover {
  background: var(--t-fill-2);
}
.t-pop-note {
  margin: 4px 0 12px;
  color: var(--t-dim);
  font-size: 13px;
}
.t-pop-sec {
  margin-top: 10px;
}
.t-pop-sec h4 {
  margin-bottom: 6px;
  color: var(--t-faint);
  font-size: 11.5px;
  font-weight: 560;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.t-wopt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  padding: 8px 10px;
  border: 0;
  border-radius: 14px;
  background: none;
  color: var(--on-night);
  text-align: left;
  transition: background-color 0.2s var(--ease);
}
.t-wopt:hover:not(:disabled) {
  background: var(--t-fill);
}
.t-wopt:disabled {
  opacity: 0.5;
}
.t-wopt img,
.t-wmono {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
}
.t-wmono {
  display: grid;
  place-items: center;
  background: var(--t-fill-2);
  font-weight: 650;
}
.t-wopt span {
  display: grid;
  line-height: 1.25;
}
.t-wopt b {
  font-size: 14.5px;
  font-weight: 600;
}
.t-wopt small {
  color: var(--t-faint);
  font-size: 12px;
}
.t-pop-empty {
  margin: 8px 0;
  color: var(--t-dim);
}
.t-pop-get {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.t-pop-get a {
  display: inline-flex;
  gap: 4px;
  height: 32px;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--t-fill);
  font-size: 13px;
}
.t-pop-status {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--t-fill);
  color: var(--t-dim);
  font-size: 13px;
}
.t-pop-status.is-err {
  background: color-mix(in srgb, var(--t-sell) 14%, transparent);
  color: var(--t-sell-ink-2);
}
.t-pop-status[hidden] {
  display: none;
}
.t-pop-kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  margin: 12px 0;
  padding: 12px 0;
  border-block: 1px solid var(--t-line);
  font-size: 13.5px;
}
.t-pop-kv dt {
  color: var(--t-faint);
}
.t-pop-kv dd {
  text-align: right;
}
.t-pop-wallets li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
}
.t-pop-wallets .mono {
  flex: 1;
  font-size: 13px;
}
.t-fam {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--t-fill);
  color: var(--t-dim);
  font-family: var(--mono);
  font-size: 10px;
}
.t-pop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.t-pop-actions .t-btn {
  flex: 1;
  height: 40px;
  font-size: 14px;
}
.t-pop.is-busy {
  cursor: progress;
}

/* ── toasts ─────────────────────────────────────────────── */
.t-toasts {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 100;
  display: grid;
  justify-items: center;
  gap: 8px;
  transform: translateX(-50%);
  pointer-events: none;
  width: max-content;
  max-width: calc(100vw - 32px);
}
.t-toast {
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--on-night);
  color: var(--night);
  font-size: 14px;
  font-weight: 560;
  box-shadow: 0 16px 40px -14px rgb(0 0 0 / 0.7);
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.3s var(--ease),
    transform 0.4s var(--ease);
}
.t-toast.in {
  opacity: 1;
  transform: none;
}
.t-toast--err {
  background: #ffc8be;
  color: #3a0f08;
}

/* ── footer ─────────────────────────────────────────────── */
.t-footer {
  margin-top: 110px;
  border-top: 1px solid var(--t-line);
}
.t-footer-in {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 18px 40px;
  padding-block: 40px 52px;
}
.t-wordmark {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 300;
  font-stretch: 100%;
  letter-spacing: 0.28em;
  margin-right: -0.28em;
}
.t-wordmark span {
  color: var(--brand);
}
/* The owner's H in front of the footer wordmark (same mask + texture as the header lockup). */
.t-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  justify-self: start;
}
.t-wordmark .hmark {
  width: calc(26px * 543 / 533);
  height: 26px;
  top: -1px;
  animation: none;
}
.t-footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 18px;
  color: var(--t-dim);
  font-size: 14.5px;
}
.t-footer-nav a:hover {
  color: var(--on-night);
}
.t-disclaimer {
  grid-column: 1 / -1;
  max-width: 72ch;
  color: var(--t-faint);
  font-size: 13.5px;
}
@media (width<=599px) {
  .t-footer-in {
    grid-template-columns: 1fr;
  }
  .t-footer-nav {
    justify-content: flex-start;
  }
  .t-footer {
    margin-top: 72px;
  }
}

/* Footer closes like the brand banner (and the landing's final CTA): soft blurred blobs of the
   chain colours on near-black with fine grain, rising out of the empty gap above the footer.
   The blobs sit low and in the corners, so the wordmark, links and disclaimer stay on dark. */
.t-footer {
  --t-foot-rise: 110px; /* = margin-top, so the light fades in over empty space only */
  position: relative;
  isolation: isolate;
  border-top: 0;
  overflow-x: clip;
}
.t-footer-in {
  padding-block: 64px 72px;
}
.t-footer::before {
  content: "";
  position: absolute;
  inset: calc(var(--t-foot-rise) * -1) 0 0;
  z-index: -1;
  pointer-events: none;
  background:
    var(--grain),
    radial-gradient(30% 46% at 34% 44%, rgb(5 5 6 / 0.55) 0%, rgb(5 5 6 / 0) 100%),
    radial-gradient(26% 66% at 2% 104%, rgb(195 198 242 / 0.5) 0%, rgb(169 180 255 / 0.17) 44%, rgb(169 180 255 / 0) 82%),
    radial-gradient(32% 72% at 20% 56%, rgb(53 84 255 / 0.48) 0%, rgb(53 84 255 / 0.15) 48%, rgb(53 84 255 / 0) 84%),
    radial-gradient(26% 56% at 50% 112%, rgb(200 255 0 / 0.26) 0%, rgb(200 255 0 / 0.08) 50%, rgb(200 255 0 / 0) 80%),
    radial-gradient(26% 66% at 69% 42%, rgb(240 185 11 / 0.36) 0%, rgb(240 185 11 / 0.11) 48%, rgb(240 185 11 / 0) 82%),
    radial-gradient(17% 70% at 102% 32%, rgb(20 241 149 / 0.34) 0%, rgb(20 241 149 / 0.1) 50%, rgb(20 241 149 / 0) 84%),
    radial-gradient(28% 78% at 93% 104%, rgb(153 69 255 / 0.56) 0%, rgb(153 69 255 / 0.17) 46%, rgb(153 69 255 / 0) 82%);
  -webkit-mask-image: linear-gradient(to bottom, #0000 0, #000 52%, #000 100%);
  mask-image: linear-gradient(to bottom, #0000 0, #000 52%, #000 100%);
}
.t-footer-nav {
  color: var(--on-night-2);
}
.t-disclaimer {
  color: var(--t-dim);
}
@media (width<=599px) {
  .t-footer {
    --t-foot-rise: 72px;
  }
  .t-footer-in {
    padding-block: 48px 60px;
  }
  .t-footer::before {
    background:
      var(--grain),
      radial-gradient(70% 30% at 30% 40%, rgb(5 5 6 / 0.55) 0%, rgb(5 5 6 / 0) 100%),
      radial-gradient(64% 38% at -4% 102%, rgb(195 198 242 / 0.48) 0%, rgb(169 180 255 / 0.16) 44%, rgb(169 180 255 / 0) 82%),
      radial-gradient(68% 32% at 6% 32%, rgb(53 84 255 / 0.44) 0%, rgb(53 84 255 / 0.14) 48%, rgb(53 84 255 / 0) 84%),
      radial-gradient(60% 30% at 88% 28%, rgb(240 185 11 / 0.32) 0%, rgb(240 185 11 / 0.1) 48%, rgb(240 185 11 / 0) 82%),
      radial-gradient(44% 32% at 104% 58%, rgb(20 241 149 / 0.3) 0%, rgb(20 241 149 / 0) 80%),
      radial-gradient(60% 28% at 50% 110%, rgb(200 255 0 / 0.24) 0%, rgb(200 255 0 / 0) 80%),
      radial-gradient(64% 38% at 102% 104%, rgb(153 69 255 / 0.54) 0%, rgb(153 69 255 / 0.16) 46%, rgb(153 69 255 / 0) 82%);
  }
}

@media (width<=599px) {
  .t-main {
    padding-top: calc(var(--head-h) + 14px + 20px);
  }
  .t-bar {
    margin-bottom: 26px;
  }
  .t-tabs {
    width: 100%;
  }
  .t-tabs a {
    flex: 1;
    justify-content: center;
    padding: 0 10px;
  }
  .t-bar-r {
    width: 100%;
    justify-content: space-between;
  }
  .t-fig b {
    font-size: 24px;
  }
  .t-fig {
    padding: 16px 12px 16px 0;
  }
  .t-fig + .t-fig {
    padding-left: 14px;
  }
  .t-fig:nth-child(3) {
    padding-left: 0;
  }
  /* platform switch and freshness share one row */
  .t-bar-r {
    flex-wrap: nowrap;
    gap: 6px;
  }
  .t-seg button {
    height: 30px;
    padding: 0 9px;
    gap: 5px;
    font-size: 13.5px;
  }
  .t-early {
    padding: 1px 4px;
    font-size: 8px;
    letter-spacing: 0.04em;
  }
  .t-fresh {
    flex: none;
    height: 36px;
    padding: 0 10px;
    gap: 6px;
    font-size: 12.5px;
    white-space: nowrap;
  }
  .t-fresh-age {
    min-width: 0;
    font-size: 11.5px;
  }
  .t-ago {
    display: none;
  }
  /* one compact line on phones: title + a small sign-in, the explainer lives in the badge tooltip */
  .t-delay {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 8px 8px 8px 14px;
    border-radius: 16px;
  }
  .t-delay-ic,
  .t-delay p span {
    display: none;
  }
  .t-delay b {
    font-size: 13.5px;
    line-height: 1.3;
  }
  .t-delay-cta {
    grid-column: auto;
  }
  .t-delay-cta .t-btn {
    width: auto;
    height: 34px;
    padding: 0 14px;
    font-size: 13.5px;
  }
  /* toggles two to a row */
  .t-tog {
    height: 38px;
    gap: 7px;
    padding: 0 8px 0 6px;
    font-size: 13.5px;
  }
  .t-tog-ui {
    width: 28px;
    height: 17px;
  }
  .t-tog-ui::after {
    width: 11px;
    height: 11px;
  }
  .t-tog input:checked + .t-tog-ui::after {
    transform: translateX(11px);
  }
}
@media (width<=380px) {
  .t-tabs a {
    font-size: 14px;
    padding: 0 8px;
  }
  .t-tabs .t-paper--xs,
  .t-seg .t-early {
    display: none;
  }
  .t-seg button {
    padding: 0 10px;
    font-size: 13px;
  }
}

/* ── refresh ring on the freshness badge ────────────────── */
.t-fresh-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-left: -4px;
  color: var(--t-faint);
}
.t-fresh-ring svg {
  position: absolute;
  inset: -1px;
  width: 22px;
  height: 22px;
  transform: rotate(-90deg);
}
.t-fresh-ring circle {
  fill: none;
  stroke-width: 1.6;
}
.t-fresh-ring .trk {
  stroke: var(--t-line-2);
}
.t-fresh-ring .prg {
  stroke: currentColor;
  stroke-linecap: round;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 0;
}
@keyframes t-ring {
  to {
    stroke-dashoffset: 100;
  }
}
.t-fresh-ring.is-busy .prg,
.t-fresh[data-state="loading"] .prg,
.t-fresh[data-state="error"] .prg {
  animation: none !important;
  stroke-dashoffset: 0;
  stroke-dasharray: 24 76;
}
.t-fresh-ring.is-busy svg,
.t-fresh[data-state="loading"] .t-fresh-ring svg {
  animation: t-spin 0.9s linear infinite;
}
.t-fresh[data-state="error"] .prg {
  stroke-dasharray: 0 100;
}
@keyframes t-spin {
  from {
    transform: rotate(-90deg);
  }
  to {
    transform: rotate(270deg);
  }
}
.t-fresh-ring .t-fresh-dot {
  width: 6px;
  height: 6px;
}
.t-fresh-ring .t-fresh-dot::after {
  display: none;
}
.t-fresh[data-state="live"] .t-fresh-ring {
  color: var(--t-buy);
}
.t-fresh[data-state="delayed"] .t-fresh-ring {
  color: var(--t-amber);
}
.t-fresh[data-state="stale"] .t-fresh-ring,
.t-fresh[data-state="error"] .t-fresh-ring {
  color: var(--t-sell);
}

/* ── tooltip ────────────────────────────────────────────── */
.t-tip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  max-width: min(320px, calc(100vw - 20px));
  padding: 8px 11px 9px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--night-3) 96%, #fff 4%);
  box-shadow:
    inset 0 0 0 1px var(--t-line-2),
    0 14px 34px -12px rgb(0 0 0 / 0.85);
  color: var(--on-night);
  font-size: 12.5px;
  font-weight: 450;
  line-height: 1.45;
  text-wrap: pretty;
  pointer-events: none;
  opacity: 0;
  transform: translate(var(--x, 0), var(--y, 0));
  translate: 0 3px;
  transition:
    opacity 0.16s var(--ease),
    translate 0.2s var(--ease);
}
.t-tip[data-side="b"] {
  translate: 0 -3px;
}
.t-tip.in {
  opacity: 1;
  translate: 0 0;
}
.t-tip::after {
  content: "";
  position: absolute;
  left: var(--ax, 50%);
  bottom: -4px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  background: inherit;
  box-shadow: inset -1px -1px 0 var(--t-line-2);
  transform: rotate(45deg);
}
.t-tip[data-side="b"]::after {
  top: -4px;
  bottom: auto;
  box-shadow: inset 1px 1px 0 var(--t-line-2);
}

/* ── keyboard hints ─────────────────────────────────────── */
.t-kbd {
  display: inline-grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 5px;
  background: var(--t-fill);
  box-shadow:
    inset 0 0 0 1px var(--t-line-2),
    inset 0 -1.5px 0 var(--t-line-2);
  color: var(--t-dim);
  font-family: var(--mono);
  font-size: 10px;
  font-style: normal;
  line-height: 1;
}
.t-kbd--in {
  flex: none;
  margin-right: -4px;
}
.t-search:focus-within .t-kbd--in,
.t-search:has(input:not(:placeholder-shown)) .t-kbd--in {
  display: none;
}
.t-keys-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-left: 16px;
  border-left: 1px solid var(--t-line);
  color: var(--t-faint);
  white-space: nowrap;
}
.t-keys-hint .t-kbd + .t-kbd {
  margin-left: -1px;
}
.t-keys-hint .t-kbd:not(:first-child):not(.t-kbd + .t-kbd) {
  margin-left: 8px;
}
.t-tablemeta {
  align-items: center;
}
.t-tablemeta .t-legend {
  margin-left: auto;
}
.t-meta-sort {
  color: var(--t-faint);
}
@media (width<=1180px), (hover: none) {
  .t-keys-hint {
    display: none;
  }
}
@media (hover: none) {
  .t-kbd--in {
    display: none;
  }
}

/* ── table: below costs, thin liquidity, row focus, header help ── */
.t-below {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 7px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--t-line);
  color: var(--t-faint);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.t-table tr.is-under .c-coin .t-coin-t b {
  color: color-mix(in srgb, var(--on-night) 78%, transparent);
}
.t-table tr.is-under .t-pv,
.t-table tr.is-under .t-gapv,
.t-table tr.is-under .c-liq,
.t-table tr.is-under .c-age {
  opacity: 0.62;
}
.t-table tr.is-under .t-pc.cheap,
.t-table tr.is-under .t-pc.dear {
  background: color-mix(in srgb, var(--on-night) 3%, transparent);
  box-shadow: none;
}
.t-table tr.is-under .t-pc.cheap .t-pv {
  color: color-mix(in srgb, var(--t-buy-ink) 70%, var(--on-night));
}
.t-table tr.is-under .t-pc.dear .t-pv {
  color: color-mix(in srgb, var(--t-sell-ink) 70%, var(--on-night));
}
.t-table tr.is-under .t-depth i {
  opacity: 0.5;
}
.t-table tr.is-under .t-route {
  opacity: 0.45;
}
.t-thinv {
  color: color-mix(in srgb, var(--t-amber) 82%, var(--on-night));
}
.t-table tbody tr:focus {
  outline: none;
}
.t-table tbody tr:focus-visible td {
  background: color-mix(in srgb, var(--brand) 8%, transparent);
}
.t-table tbody tr:focus-visible td:first-child {
  box-shadow: inset 3px 0 0 var(--brand);
}
.t-table th .t-th {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.t-info {
  flex: none;
  margin-left: -1px;
  opacity: 0.7;
}
.t-table th button:hover .t-info {
  opacity: 1;
}
.t-sublink {
  padding: 0;
  border: 0;
  background: none;
  color: var(--on-night);
  font: inherit;
  text-decoration: underline;
  text-decoration-color: var(--t-line-2);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s var(--ease);
}
.t-sublink:hover {
  text-decoration-color: currentColor;
}

.t-hidden-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 13px 20px 14px;
  border-top: 1px solid var(--t-line);
  color: var(--t-faint);
  font-size: 13px;
}
.t-hidden-note[hidden] {
  display: none;
}
.t-hidden-note .t-linkbtn {
  color: var(--on-night);
  font-size: 13px;
}

/* ── drawer: previous / next coin ───────────────────────── */
.t-dnav {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--t-line);
}
.t-dstep {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--t-dim);
  transition:
    background-color 0.2s var(--ease),
    color 0.2s var(--ease);
}
.t-dstep:hover {
  background: var(--t-fill-2);
  color: var(--on-night);
}
@media (width<=599px) {
  .t-dnav {
    display: none;
  }
}

/* ── drawer: pools table (desktop) ──────────────────────── */
.t-pt-wrap {
  position: relative;
  overflow-x: auto;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px var(--t-line);
  background: var(--t-deep);
}
.t-pt {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.t-pt thead th {
  height: 38px;
  padding: 0 12px;
  border-bottom: 1px solid var(--t-line);
  color: var(--t-faint);
  font-size: 11.5px;
  font-weight: 520;
  text-align: right;
  white-space: nowrap;
}
.t-pt thead th:first-child {
  text-align: left;
}
.t-pt tbody th,
.t-pt td {
  height: 58px;
  padding: 0 12px;
  border-bottom: 1px solid var(--t-line);
  text-align: right;
  white-space: nowrap;
  vertical-align: middle;
}
.t-pt tbody tr:last-child > * {
  border-bottom: 0;
}
.t-pt tbody th {
  text-align: left;
  font-weight: 400;
}
.t-pt th:first-child,
.t-pt td:first-child {
  padding-left: 16px;
}
.t-pt th:last-child,
.t-pt td:last-child {
  padding-right: 12px;
}
.t-pt-ch {
  display: flex;
  align-items: center;
  gap: 8px;
}
.t-pt-ch b {
  font-size: 13.5px;
  font-weight: 600;
}
.t-pt-ch .t-badge {
  margin-left: 2px;
}
.t-pt small {
  display: block;
  margin-top: 2px;
  color: var(--t-faint);
  font-size: 11px;
}
.t-pt tbody th small {
  padding-left: 26px;
  font-family: var(--sans);
}
.t-pt td small {
  font-family: var(--sans);
}
.t-pt-p {
  font-size: 14px;
  font-weight: 500;
}
.t-pt tr.cheap > * {
  background: color-mix(in srgb, var(--t-buy) 7%, transparent);
}
.t-pt tr.dear > * {
  background: color-mix(in srgb, var(--t-sell) 6%, transparent);
}
.t-pt tr.cheap th:first-child {
  box-shadow: inset 3px 0 0 var(--t-buy);
}
.t-pt tr.dear th:first-child {
  box-shadow: inset 3px 0 0 var(--t-sell);
}
.t-pt tr.cheap .t-pt-p {
  color: var(--t-buy-ink-2);
}
.t-pt tr.dear .t-pt-p {
  color: var(--t-sell-ink-2);
}
.t-pt-link {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--t-dim);
  transition:
    background-color 0.2s var(--ease),
    color 0.2s var(--ease);
}
.t-pt-link:hover {
  background: var(--t-fill-2);
  color: var(--on-night);
}
.t-ccs {
  display: none;
}
@media (width<=699px) {
  .t-pt-wrap {
    display: none;
  }
  .t-ccs {
    display: grid;
  }
}

/* ── alerts: side column, message preview, live matches ─── */
.t-alerts-side {
  display: grid;
  gap: 12px;
  align-content: start;
}
.t-preview .t-dnote {
  margin: 0 0 14px;
}
.t-msg {
  position: relative;
  max-width: 420px;
  padding: 11px 14px 12px;
  border-radius: 16px 16px 16px 5px;
  background: color-mix(in srgb, var(--on-night) 7%, var(--night-2));
  box-shadow: inset 0 0 0 1px var(--t-line);
  font-size: 13.5px;
  line-height: 1.5;
}
.t-msg-from {
  margin-bottom: 4px;
  color: #b8b3e6;
  font-size: 12.5px;
  font-weight: 620;
}
.t-msg p + p {
  margin-top: 2px;
}
.t-msg b {
  font-weight: 650;
}
.t-msg i {
  color: var(--t-dim);
  font-size: 12.5px;
}
.t-hits {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--t-line-2);
  color: var(--t-faint);
  font-size: 12px;
  font-weight: 520;
  white-space: nowrap;
}
.t-hits::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}
.t-hits.on {
  color: var(--t-buy-ink-2);
  background: color-mix(in srgb, var(--t-buy) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-buy) 30%, transparent);
}
.t-hits.on::before {
  opacity: 1;
}

/* ── aurora (BRAND v3) ──────────────────────────────────── */
/* soft light in the chain colours behind the header, tabs, headline and figures; cards stay opaque */
.t-main {
  position: relative;
  isolation: isolate;
}
.t-main::before,
.t-main::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 760px;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 22%, rgb(0 0 0 / 0.55) 52%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 22%, rgb(0 0 0 / 0.55) 52%, transparent 100%);
}
.t-main::before {
  background:
    radial-gradient(36% 50% at 3% 8%, rgb(169 180 255 / 0.24), transparent 72%),
    radial-gradient(34% 46% at 23% 16%, rgb(53 84 255 / 0.22), transparent 72%),
    radial-gradient(26% 40% at 46% 6%, rgb(200 255 0 / 0.08), transparent 72%),
    radial-gradient(30% 46% at 64% 12%, rgb(240 185 11 / 0.13), transparent 72%),
    radial-gradient(34% 50% at 84% 8%, rgb(153 69 255 / 0.22), transparent 72%),
    radial-gradient(28% 46% at 100% 26%, rgb(20 241 149 / 0.12), transparent 72%);
}
.t-main::after {
  opacity: 0.07;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (width<=699px) {
  .t-main::before,
  .t-main::after {
    height: 620px;
  }
  .t-main::before {
    background:
      radial-gradient(70% 40% at 0% 4%, rgb(169 180 255 / 0.24), transparent 72%),
      radial-gradient(60% 34% at 40% 12%, rgb(53 84 255 / 0.2), transparent 72%),
      radial-gradient(60% 36% at 78% 6%, rgb(240 185 11 / 0.12), transparent 72%),
      radial-gradient(60% 40% at 100% 18%, rgb(153 69 255 / 0.2), transparent 72%);
  }
}

/* ── motion preferences ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .t-body *,
  .t-body *::before,
  .t-body *::after,
  .t-pop,
  .t-toast {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  .t-dpanel {
    transition: none;
  }
}

/* ── BRAND v3 fixes (single fixer pass) ─────────────────────────────── */
/* Faint marks keep the darker tone; faint text uses --t-faint (above). */
.t-legend i.lg-depth {
  background: var(--t-faint-line);
}
/* Tables between phone cards and 1240px: drop Min liq and Age so Net stays in view; a fade marks any overflow. */
@media (width>=700px) and (width<1240px) {
  .t-table th.c-liq,
  .t-table td.c-liq,
  .t-table th.c-age,
  .t-table td.c-age {
    display: none;
  }
  .t-table th:nth-last-child(1 of :not(.c-liq, .c-age)),
  .t-table td.c-net {
    padding-right: 20px;
  }
  .t-table th.c-ch,
  .t-table td.c-ch {
    padding-inline: 5px;
  }
  .t-table .t-pc {
    min-width: 82px;
  }
}
/* A soft right-edge fade only while the table can still scroll sideways. */
@media (width>=700px) and (width<940px) {
  .t-tablewrap {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), #0006 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 36px), #0006 100%);
  }
}
/* Chain tags on the phone cards: legible size. */
.t-cl {
  font-size: 10.5px;
}

/* Below-cost rows stay quieter, but their dim mono figures keep 4.5:1. */
.t-table tr.is-under .c-liq,
.t-table tr.is-under .c-age {
  opacity: 0.8;
}

/* ══ MOTION (terminal) ══════════════════════════════════════════════════════════════════════
   One vocabulary with the landing: ease-out to arrive, ease-in to leave, soft springs for things
   you drag the eye along (tab indicator, drawer). Nothing loops while the page is idle; every rule
   here is switched off by the prefers-reduced-motion block above (animation: none, ~0 transitions). */
html.t-html {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --spring: linear(0, 0.096, 0.3, 0.523, 0.717, 0.863, 0.959, 1.015, 1.04, 1.046, 1.041, 1.031, 1.021, 1.012, 1.006, 1.002, 1);
  --spring-soft: linear(0, 0.078, 0.245, 0.434, 0.608, 0.749, 0.855, 0.929, 0.975, 1.002, 1.015, 1.02, 1.019, 1.016, 1.013, 1.009, 1.006, 1.004, 1.002, 1.001, 1);
  /* about 1 % overshoot: the drawer settles instead of bouncing */
  --spring-drawer: linear(0, 0.062, 0.201, 0.363, 0.521, 0.658, 0.769, 0.853, 0.914, 0.956, 0.983, 0.999, 1.008, 1.011, 1.012, 1.011, 1.009, 1.007, 1.005, 1.003, 1.002, 1.001, 1);
  --t-press: 90ms;
  --t-fast: 160ms;
  --t-base: 280ms;
  --t-move: 420ms;
  --t-reveal: 760ms;
}
@supports not (transition-timing-function: linear(0, 1)) {
  html.t-html {
    --spring: var(--ease-out);
    --spring-soft: var(--ease-out);
    --spring-drawer: var(--ease-out);
  }
}
@media (prefers-reduced-motion: reduce) {
  html.t-html {
    --t-press: 1ms;
    --t-fast: 1ms;
    --t-base: 1ms;
    --t-move: 1ms;
    --t-reveal: 1ms;
  }
}

/* ── panels: a short rise when a tab opens ─────────────────── */
.t-panel {
  animation: t-panel-in 0.42s var(--ease-out) both;
}
@keyframes t-panel-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* ── tabs + platform switch: one indicator slides under the active item ── */
.t-tabs.has-ind,
.t-seg.has-ind {
  position: relative;
  isolation: isolate;
}
.t-ind {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transition:
    transform var(--t-move) var(--spring-soft),
    width var(--t-move) var(--spring-soft),
    height var(--t-move) var(--spring-soft),
    opacity var(--t-fast) var(--ease-out);
}
.t-ind.on {
  opacity: 1;
}
.t-tabs .t-ind {
  background: var(--on-night);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.55),
    0 8px 18px -10px rgb(0 0 0 / 0.9);
}
.t-seg .t-ind {
  background: var(--t-fill-2);
  box-shadow: inset 0 0 0 1px rgb(245 243 237 / 0.04);
}
.t-tabs.has-ind a[aria-current="page"],
.t-tabs.has-ind a[aria-current="page"]:hover,
.t-seg.has-ind button[aria-pressed="true"] {
  background: transparent;
}
.t-tabs a,
.t-seg button {
  transition:
    background-color var(--t-base) var(--ease-out),
    color var(--t-base) var(--ease-out);
}
.t-tabs a:active,
.t-seg button:active {
  transform: scale(0.97);
  transition-duration: var(--t-press);
}

/* ── odometer: changed digits roll through a soft window ──── */
.t-od {
  position: relative;
  display: inline-block;
  padding-block: 0.36em;
  margin-block: -0.36em;
  -webkit-text-fill-color: transparent;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 0.36em, #000 calc(100% - 0.36em), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 0.36em, #000 calc(100% - 0.36em), transparent 100%);
}
.t-od::before,
.t-od::after {
  position: absolute;
  top: 0.36em;
  left: 0;
  right: 0;
  text-align: center;
  -webkit-text-fill-color: currentColor;
  animation-duration: 380ms;
  animation-timing-function: var(--ease-out);
  animation-delay: var(--d, 0ms);
  animation-fill-mode: both;
}
.t-od::before {
  content: attr(data-o);
}
.t-od::after {
  content: attr(data-n);
}
.t-od-up .t-od::before {
  animation-name: t-od-out-up;
}
.t-od-up .t-od::after {
  animation-name: t-od-in-up;
}
.t-od-dn .t-od::before {
  animation-name: t-od-out-dn;
}
.t-od-dn .t-od::after {
  animation-name: t-od-in-dn;
}
@keyframes t-od-in-up {
  from {
    transform: translateY(0.72em);
    opacity: 0;
  }
}
@keyframes t-od-out-up {
  to {
    transform: translateY(-0.72em);
    opacity: 0;
  }
}
@keyframes t-od-in-dn {
  from {
    transform: translateY(-0.72em);
    opacity: 0;
  }
}
@keyframes t-od-out-dn {
  to {
    transform: translateY(0.72em);
    opacity: 0;
  }
}

/* ── a changed figure: quick tint in, long ease out ───────── */
.fl-up {
  animation: t-flash-up 0.82s linear;
}
.fl-dn {
  animation: t-flash-dn 0.82s linear;
}
@keyframes t-flash-up {
  15% {
    background-color: rgb(60 240 168 / 0.24);
    color: var(--t-buy-ink-2);
    animation-timing-function: var(--ease-out);
  }
}
@keyframes t-flash-dn {
  15% {
    background-color: rgb(255 147 130 / 0.22);
    color: var(--t-sell-ink-2);
    animation-timing-function: var(--ease-out);
  }
}

/* ── depth bars scale, never re-layout ────────────────────── */
.t-depth i {
  width: 100%;
  margin-left: 0;
  transform: scaleX(var(--d, 1));
  transform-origin: right center;
  transition: none;
}

/* ── skeletons: one light sweeps across, row by row ───────── */
.t-sk {
  position: relative;
  overflow: hidden;
  background: var(--t-fill);
  animation: none;
}
.t-sk::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgb(245 243 237 / 0.075) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: t-sweep 1.9s var(--ease-io) infinite;
  animation-delay: calc(var(--i, 0) * 70ms + var(--j, 0) * 40ms);
}
@keyframes t-sweep {
  0% {
    transform: translateX(-100%);
  }
  62%,
  100% {
    transform: translateX(100%);
  }
}
.t-sum.is-loading .t-fig b {
  position: relative;
  overflow: hidden;
  width: 3.2ch;
  border-radius: 8px;
  background: var(--t-fill);
  color: transparent;
  animation: none;
}
.t-sum.is-loading .t-fig b::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgb(245 243 237 / 0.075) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: t-sweep 1.9s var(--ease-io) infinite;
}
.t-sum.is-loading .t-fig:nth-child(2) b::after {
  animation-delay: 90ms;
}
.t-sum.is-loading .t-fig:nth-child(3) b::after {
  animation-delay: 180ms;
}
.t-sum.is-loading .t-fig:nth-child(4) b::after {
  animation-delay: 270ms;
}

/* ── freshness: the dot ripples once when a new board lands, then rests ── */
.t-fresh-dot {
  color: var(--t-faint);
}
.t-fresh[data-state="live"] .t-fresh-dot {
  color: var(--t-buy);
}
.t-fresh[data-state="delayed"] .t-fresh-dot {
  color: var(--t-amber);
}
.t-fresh[data-state="stale"] .t-fresh-dot,
.t-fresh[data-state="error"] .t-fresh-dot {
  color: var(--t-sell);
}
.t-fresh .t-fresh-dot::after,
.t-fresh[data-state="live"] .t-fresh-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: 0;
  pointer-events: none;
  animation: none;
}
.t-fresh.is-pulse .t-fresh-dot::after,
.t-fresh.is-pulse[data-state="live"] .t-fresh-dot::after {
  animation: t-ping 1.25s var(--ease-out) both;
}
.t-fresh.is-pulse .t-fresh-dot {
  animation: t-dot-pop 0.6s var(--spring);
}
@keyframes t-dot-pop {
  0% {
    transform: scale(0.55);
  }
}
.t-fresh-age {
  transition: color var(--t-base) var(--ease-out);
}
.t-fresh.is-pulse .t-fresh-age {
  color: var(--on-night-2);
  transition-duration: 0s;
}

/* ── tickets: cursor light, aurora hairline, the hop ───────── */
.t-opp[data-id] {
  isolation: isolate;
  transition:
    transform var(--t-move) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out),
    background-color var(--t-base) var(--ease-out);
}
.t-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.t-glow::before {
  content: "";
  position: absolute;
  left: -220px;
  top: -220px;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(169 180 255 / 0.15), rgb(169 180 255 / 0.05) 55%, rgb(169 180 255 / 0) 100%);
  transform: translate3d(var(--gx, -999px), var(--gy, -999px), 0);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
}
.t-opp--lead .t-glow::before {
  background: radial-gradient(closest-side, rgb(200 206 255 / 0.17), rgb(153 69 255 / 0.06) 55%, rgb(153 69 255 / 0) 100%);
}
.t-opp.is-glow .t-glow::before {
  opacity: 1;
  will-change: transform;
}
.t-opp[data-id]:not(.t-opp--lead)::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--aurora);
  opacity: 0;
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity var(--t-base) var(--ease-out);
}
.t-opp[data-id]:not(.t-opp--lead):hover::before {
  opacity: 0.4;
}
.t-opp[data-id]:active {
  transform: translateY(-1px) scale(0.995);
  transition-duration: var(--t-press);
}
/* the dashes stand still; the coin hops on first paint and on hover */
.t-art .arc {
  animation: none;
}
.t-art .hop {
  fill: var(--on-night);
  filter: drop-shadow(0 0 3px rgb(245 243 237 / 0.7));
}
.t-art .land {
  fill: #fff;
}
.t-top:not(.is-steady) .t-art .pad {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: t-pad 0.62s var(--spring) both;
  animation-delay: calc(var(--i, 0) * 120ms + 260ms);
}
.t-top:not(.is-steady) .t-art .pad.sell {
  animation-delay: calc(var(--i, 0) * 120ms + 340ms);
}
.t-top:not(.is-steady) .t-art .arc,
.t-top:not(.is-steady) .t-art .tip {
  animation: t-fade 0.6s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 120ms + 420ms);
}
@keyframes t-pad {
  from {
    transform: scaleY(0);
    opacity: 0;
  }
}
@keyframes t-fade {
  from {
    opacity: 0;
  }
}
.t-opp {
  animation-name: t-card-in;
  animation-duration: 0.64s;
  animation-timing-function: var(--ease-out);
}
@keyframes t-card-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* ── table rows: hover answers at once, fades out softly ──── */
.t-table tbody tr:hover td {
  transition-duration: 60ms;
}

/* ── drawer: springs in, leaves quickly ───────────────────── */
.t-scrim {
  transition: opacity 0.24s var(--ease-out);
}
.t-drawer.open .t-scrim {
  transition-duration: 0.42s;
}
.t-dpanel {
  transition: transform 0.26s var(--ease-in);
}
.t-drawer.open .t-dpanel {
  transition: transform 0.66s var(--spring-drawer);
}
.t-drawer.is-intro.open .t-dbody,
.t-drawer.is-intro.open .t-dtitle {
  animation: t-din 0.56s var(--ease-out) 0.1s both;
}
.t-drawer.is-intro.open .t-dact {
  animation: t-din 0.56s var(--ease-out) 0.16s both;
}
@keyframes t-din {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
@media (width<=699px) {
  /* the soft overshoot must not show the page under the sheet */
  .t-dpanel {
    box-shadow: 0 140px 0 0 var(--night-2);
  }
}
.t-back {
  transition:
    background-color var(--t-fast) var(--ease-out),
    transform var(--t-base) var(--ease-out);
}
.t-back:hover svg {
  transform: translateX(-2px);
}
.t-back svg {
  transition: transform var(--t-base) var(--ease-out);
}
.t-back:active {
  transform: scale(0.94);
  transition-duration: var(--t-press);
}

/* ── best route in the drawer: chip and name never part ───── */
.t-dleg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* ── popovers settle on a soft spring ─────────────────────── */
.t-pop.in {
  transition:
    opacity 0.2s var(--ease-out),
    transform 0.46s var(--spring-soft);
}

/* rows that glide to a new place get a solid face; the rising ones ride on top */
.t-table tbody tr.is-moving {
  position: relative;
  z-index: 1;
}
.t-table tbody tr.is-moving.is-rising {
  z-index: 2;
}
@media (width>=700px) {
  .t-table tbody tr.is-moving td {
    background-color: var(--night-2);
  }
  .t-table tbody tr.is-moving.is-rising td {
    box-shadow: 0 -1px 0 var(--t-line);
  }
}
@media (width<=699px) {
  .t-table tbody tr.is-moving {
    background: var(--night-2);
  }
}
/* a tail that rolls as one block keeps its right edge (numbers are right-aligned or end the line) */
.t-od--block::before,
.t-od--block::after {
  left: auto;
  right: 0;
  text-align: right;
  white-space: nowrap;
}
.t-opp.is-moving {
  z-index: 1;
}
.t-opp.is-moving.is-rising {
  z-index: 2;
}

/* ── bot tab: the split and the inventory bars fill once when the tab opens ── */
[data-bot].is-intro .t-cbar i,
[data-bot].is-intro .t-inv-bar i {
  transform-origin: left center;
  animation: t-grow-x 0.9s var(--ease-out) both;
}
[data-bot].is-intro .t-cbar i:nth-child(2) {
  animation-delay: 70ms;
}
[data-bot].is-intro .t-cbar i:nth-child(3) {
  animation-delay: 140ms;
}
[data-bot].is-intro .t-cbar i:nth-child(n + 4) {
  animation-delay: 210ms;
}
[data-bot].is-intro .t-inv li:nth-child(2) .t-inv-bar i {
  animation-delay: 50ms;
}
[data-bot].is-intro .t-inv li:nth-child(3) .t-inv-bar i {
  animation-delay: 100ms;
}
[data-bot].is-intro .t-inv li:nth-child(4) .t-inv-bar i {
  animation-delay: 150ms;
}
[data-bot].is-intro .t-inv li:nth-child(5) .t-inv-bar i {
  animation-delay: 200ms;
}
@keyframes t-grow-x {
  from {
    transform: scaleX(0);
  }
}

/* ── controls answer the finger: knobs spring, pills give a little under a press ── */
.t-tog-ui::after {
  transition:
    transform var(--t-move) var(--spring-soft),
    width var(--t-base) var(--ease-out),
    background-color var(--t-base) var(--ease-out);
}
.t-tog:active .t-tog-ui::after {
  width: 16px;
}
.t-tog:active input:checked + .t-tog-ui::after {
  transform: translateX(10px);
}
.t-chip,
.t-mini,
.t-dstep,
.t-reset,
.t-sublink {
  transition:
    background-color var(--t-base) var(--ease-out),
    color var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out),
    transform var(--t-base) var(--ease-out);
}
.t-chip:active,
.t-mini:active,
.t-dstep:active,
.t-reset:active {
  transform: scale(0.96);
  transition-duration: var(--t-press);
}
/* the badge's ring ripples once outward when a new board lands (transform + opacity only) */
.t-fresh-ring::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: 0;
  pointer-events: none;
}
.t-fresh.is-pulse .t-fresh-ring::after {
  animation: t-ripple 1.1s var(--ease-out) both;
}
@keyframes t-ripple {
  0% {
    transform: scale(0.8);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* ── header CTA: the same aurora ring as the landing's buttons, turning while hovered ── */
@property --t-ba {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes t-ba-turn {
  to {
    --t-ba: 360deg;
  }
}
.t-wallet {
  position: relative;
}
.t-wallet::before,
.t-wallet::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from var(--t-ba), #a9b4ff, #3554ff, #c8ff00, #f0b90b, #9945ff, #14f195, #a9b4ff);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease-out);
}
.t-wallet::before {
  inset: -2px;
  padding: 1.5px;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.t-wallet::after {
  inset: -6px;
  filter: blur(10px);
}
@media (hover: hover) and (pointer: fine) {
  .t-wallet:not(.is-in):hover::before {
    opacity: 1;
  }
  .t-wallet:not(.is-in):hover::after {
    opacity: 0.22;
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .t-wallet:not(.is-in):hover::before,
  .t-wallet:not(.is-in):hover::after {
    animation: t-ba-turn 2.4s linear infinite;
  }
}