/* BANKED · D2 Brutal Ledger. Every value comes from tokens.css or the four paper tokens below. */
:root {
  --paper: #f3f2ec;
  --paper-2: #e7e6de;
  --paper-ink: #0b0c0a;
  --paper-mute: #52564c;
  --paper-line: #c6c5bb;
  --paper-up: #0a7a33;
  --paper-down: #b8261b;
  --wrap: 1360px;
  --gutter: var(--sp-4);
  --rule: 1px solid var(--color-line);
  --bar-h: 64px;
  --wdth-tight: 62;
  --wdth-mid: 80;
}
@media (min-width: 768px) { :root { --gutter: var(--sp-6); } }
@media (min-width: 1200px) { :root { --gutter: var(--sp-7); } }

[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--bar-h); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--color-ground);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-0);
  line-height: 1.5;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, dl, dd, ol, ul, figure, fieldset { margin: 0; padding: 0; }
ol, ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
button, input { font: inherit; color: inherit; }
a { color: inherit; }
::selection { background: var(--color-accent); color: var(--color-accent-ink); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.k { display: block; font-family: var(--font-mono); font-size: var(--fs-m1); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-ink-mute); }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; }

.skip { position: absolute; left: var(--sp-4); top: -100px; z-index: 100; padding: var(--sp-3) var(--sp-4); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 700; text-decoration: none; }
.skip:focus { top: var(--sp-4); }

/* ---------- buttons ---------- */
.btn {
  --b: var(--color-ink);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px; padding: 0 var(--sp-5);
  border: 1px solid var(--b); border-radius: var(--radius-md);
  background: transparent; color: var(--color-ink);
  font-family: var(--font-display); font-size: var(--fs-0); font-weight: 800; font-variation-settings: "wdth" var(--wdth-mid);
  text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none; white-space: nowrap;
  cursor: pointer; isolation: isolate; overflow: hidden;
  transition: transform var(--dur-press) var(--ease-snap), color var(--dur-ui) var(--ease-snap), border-color var(--dur-ui) var(--ease-snap);
  -webkit-tap-highlight-color: transparent;
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-ink); transform: scaleY(0); transform-origin: bottom; transition: transform var(--dur-ui) var(--ease-snap); }
.btn:hover::before { transform: scaleY(1); }
.btn:hover { color: var(--color-ground); }
.btn:active { transform: scale(0.97); }
.btn .ico { transition: transform var(--dur-ui) var(--ease-snap); }
.btn:hover .ico { transform: translateX(4px); }
.btn--solid { --b: var(--color-accent); background: var(--color-accent); color: var(--color-accent-ink); }
.btn--solid::before { background: var(--color-ink); }
.btn--solid:hover { color: var(--color-ground); border-color: var(--color-ink); }
.btn--xl { min-height: 64px; padding: 0 var(--sp-6); font-size: var(--fs-1); }
.btn[disabled], .btn[aria-disabled="true"] { pointer-events: none; --b: var(--color-line); background: transparent; color: var(--color-ink-mute); }
.btn[data-state="connected"] { --b: var(--color-accent); }
.btn__addr { font-family: var(--font-mono); font-weight: 500; text-transform: none; letter-spacing: 0; }
.btn__dot { width: 8px; height: 8px; background: var(--color-accent); flex: none; }
.iconbtn { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: transparent; cursor: pointer; transition: border-color var(--dur-ui) var(--ease-snap); }
.iconbtn:hover { border-color: var(--color-ink); }
.link { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 48px; font-family: var(--font-display); font-weight: 800; font-variation-settings: "wdth" var(--wdth-mid); text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none; background: linear-gradient(var(--color-ink), var(--color-ink)) 0 calc(100% - 10px) / 100% 1px no-repeat; }
.link .ico { transition: transform var(--dur-ui) var(--ease-snap); }
.link:hover .ico { transform: translate(3px, -3px); }

/* ---------- top bar ---------- */
.bar { position: sticky; top: 0; z-index: 40; background: var(--color-ground); border-bottom: var(--rule); padding-top: env(safe-area-inset-top); }
.bar__in { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); height: var(--bar-h); }
.brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; min-height: 48px; min-width: 48px; }
.brand__mark { width: 32px; height: 32px; }
.brand__word { font-family: var(--font-display); font-weight: 900; font-variation-settings: "wdth" var(--wdth-tight); font-size: var(--fs-1); letter-spacing: -0.01em; }
.bar__nav { display: none; gap: var(--sp-6); margin-left: auto; margin-right: var(--sp-5); }
.bar__nav a { position: relative; display: inline-flex; align-items: center; min-height: 48px; font-family: var(--font-mono); font-size: var(--fs-m1); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; color: var(--color-ink-soft); transition: color var(--dur-ui) var(--ease-snap); }
.bar__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 12px; height: 1px; background: var(--color-ink); transform: scaleX(0); transform-origin: right; transition: transform var(--dur-ui) var(--ease-snap); }
.bar__nav a:hover { color: var(--color-ink); }
.bar__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
@media (min-width: 900px) { .bar__nav { display: flex; } }
@media (max-width: 420px) { .brand__word { display: none; } }

/* ---------- hero ---------- */
.hero { display: grid; gap: var(--sp-7); padding-top: var(--sp-7); padding-bottom: var(--sp-8); }
@media (min-width: 1024px) { .hero { grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); align-items: end; gap: var(--sp-8); padding-top: var(--sp-8); padding-bottom: var(--sp-9); min-height: calc(100svh - var(--bar-h)); } }
.hero__copy { display: grid; gap: var(--sp-6); align-content: end; }
.hero__title { font-family: var(--font-display); font-weight: 900; font-variation-settings: "wdth" var(--wdth-tight); font-size: var(--fs-7); line-height: 0.86; letter-spacing: -0.02em; }
.hero__title .line { display: block; }
.hero__title .line--accent { color: var(--color-accent); }
.hero__title .ch { display: inline-block; will-change: transform; }
.hero__title .mask { display: inline-block; overflow: clip; overflow-clip-margin: 8px; vertical-align: top; padding-bottom: 0.04em; }
.hero__lede { max-width: 34ch; font-size: var(--fs-1); line-height: 1.35; color: var(--color-ink-soft); }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); }
.hero__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--rule); }
.stat { padding: var(--sp-4) var(--sp-4) 0 0; display: grid; gap: var(--sp-2); align-content: start; }
.stat + .stat { padding-left: var(--sp-4); border-left: var(--rule); }
.stat dd { font-family: var(--font-display); font-weight: 800; font-variation-settings: "wdth" var(--wdth-mid); font-size: var(--fs-1); line-height: 1.1; font-variant-numeric: tabular-nums; min-height: 1.1em; }
.stat dt { font-family: var(--font-mono); font-size: var(--fs-m1); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-mute); }
@media (max-width: 520px) {
  .hero__stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3) { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: var(--rule); margin-top: var(--sp-4); }
}

/* ---------- ticket (hero media: live product UI) ---------- */
.ticket {
  --edge: var(--color-line);
  position: relative; display: flex; flex-direction: column; gap: 0; align-self: end;
  background: var(--color-surface); border: 1px solid var(--edge); border-radius: var(--radius-md);
  min-height: 560px; overflow: hidden; contain: layout paint;
}
@media (min-width: 1024px) { .ticket { min-height: 720px; } }
.ticket[data-out="up"] { --edge: var(--color-up); }
.ticket[data-out="down"] { --edge: var(--color-down); }
.ticket__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--color-line); font-size: var(--fs-m1); }
.ticket__clock { margin-left: auto; color: var(--color-ink-mute); }
.tag { font-family: var(--font-mono); font-size: var(--fs-m1); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; padding: var(--sp-1) var(--sp-2); border: 1px solid var(--color-ink-mute); color: var(--color-ink-soft); line-height: 1.2; }
.ticket__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--color-line); }
.ticket__row > div { padding: var(--sp-4) var(--sp-5); display: grid; gap: var(--sp-1); min-width: 0; }
.ticket__row > div + div { border-left: 1px solid var(--color-line); }
.ticket__row .v { font-variant-numeric: tabular-nums; font-family: var(--font-display); font-weight: 800; font-variation-settings: "wdth" var(--wdth-mid); font-size: var(--fs-1); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket__row .v.mono { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-0); }
.ticket__pnl { padding: var(--sp-6) var(--sp-5) var(--sp-4); display: grid; gap: var(--sp-2); }
.ticket__num { font-family: var(--font-display); font-weight: 900; font-variation-settings: "wdth" var(--wdth-tight); font-size: var(--fs-5); line-height: 0.95; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; transition: color 0ms; }
.ticket__num[data-sign="up"] { color: var(--color-up); }
.ticket__num[data-sign="down"] { color: var(--color-down); }
.ticket__roi { color: var(--color-ink-soft); font-size: var(--fs-0); }
.ticket__chart { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.ticket > :not(.ticket__chart) { position: relative; z-index: 1; }
.ticket > .stamp { position: absolute; z-index: 3; }
.ticket__chart, .ticket__chart g { fill: none; color: var(--color-ink); }
.ticket__grid { stroke: var(--color-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ticket__spacer { flex: 1; min-height: 200px; }
.ticket__trace { fill: none; stroke: var(--color-ink); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: bevel; }
.ticket[data-out="up"] .ticket__trace { stroke: var(--color-up); }
.ticket[data-out="down"] .ticket__trace { stroke: var(--color-down); }
.ticket__entry { stroke: var(--color-ink-mute); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.ticket__liq { stroke: var(--color-down); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ticket__meter { height: 4px; background: var(--color-line); margin: 0; position: relative; overflow: hidden; }
.ticket__meter span { position: absolute; inset: 0; background: var(--color-ink); transform-origin: left; transform: scaleX(0); }
.ticket[data-out="down"] .ticket__meter span { background: var(--color-down); }
.ticket__cap { padding: var(--sp-3) var(--sp-5); font-size: var(--fs-m1); color: var(--color-ink-mute); align-self: end; }
.stamp {
  position: absolute; left: 50%; top: 46%; z-index: 3; pointer-events: none;
  padding: var(--sp-2) var(--sp-5); border: 4px solid currentColor; color: var(--color-up);
  font-family: var(--font-display); font-weight: 900; font-variation-settings: "wdth" var(--wdth-tight); font-size: var(--fs-5); line-height: 1; letter-spacing: 0.02em; text-transform: uppercase;
  background: var(--color-surface); opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(1.6);
}
.stamp[data-tone="down"] { color: var(--color-down); }

/* ---------- section heads ---------- */
.sec-head { display: grid; gap: var(--sp-5); padding-bottom: var(--sp-7); border-bottom: var(--rule); }
@media (min-width: 1024px) { .sec-head { grid-template-columns: 7fr 5fr; align-items: end; } }
.sec-title { font-family: var(--font-display); font-weight: 900; font-variation-settings: "wdth" var(--wdth-tight); font-size: var(--fs-5); line-height: 0.92; letter-spacing: -0.01em; text-transform: uppercase; }
.sec-note { max-width: 44ch; color: var(--color-ink-soft); }

/* ---------- how / ledger ---------- */
.how { padding-top: var(--sp-9); padding-bottom: var(--sp-9); border-top: var(--rule); }
.ledger__row { display: grid; grid-template-columns: 56px 1fr; gap: var(--sp-2) var(--sp-4); padding: var(--sp-6) 0; border-bottom: var(--rule); align-items: baseline; }
.ledger__n { grid-row: span 2; font-family: var(--font-mono); font-size: var(--fs-0); color: var(--color-ink-mute); }
.ledger__h { font-family: var(--font-display); font-weight: 900; font-variation-settings: "wdth" var(--wdth-tight); font-size: var(--fs-5); line-height: 0.9; text-transform: uppercase; }
.ledger__h--up { color: var(--color-up); }
.ledger__h--down { color: var(--color-down); }
.ledger__p { max-width: 52ch; color: var(--color-ink-soft); }
.ledger__k { display: none; }
@media (min-width: 900px) {
  .ledger__row { grid-template-columns: 96px minmax(0, 4fr) minmax(0, 5fr) minmax(0, 2fr); gap: var(--sp-6); padding: var(--sp-7) 0; align-items: center; }
  .ledger__n { grid-row: auto; }
  .ledger__k { display: block; justify-self: end; font-size: var(--fs-m1); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-ink-mute); }
}
.ledger__row { position: relative; }
.ledger__row::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--color-ink); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-scene) var(--ease-out); }
.ledger__row:hover::after { transform: scaleX(1); }

/* ---------- receipt maker ---------- */
.maker { background: var(--color-surface); border-top: var(--rule); border-bottom: var(--rule); }
.maker__grid { display: grid; gap: var(--sp-8); padding-top: var(--sp-9); padding-bottom: var(--sp-9); }
@media (min-width: 1024px) { .maker__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--sp-9); align-items: start; } }
.maker__panel { display: grid; gap: var(--sp-6); align-content: start; }
.maker__panel .sec-note { margin-top: calc(var(--sp-4) * -1); }
.field { display: grid; gap: var(--sp-3); }
.field legend { margin-bottom: var(--sp-3); }
.field__top { display: flex; justify-content: space-between; align-items: baseline; }
.field__out { font-size: var(--fs-1); font-weight: 500; }
.field--row { grid-template-columns: auto 1fr; align-items: center; gap: var(--sp-5); }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--color-line); border-radius: var(--radius-md); }
.seg label { position: relative; display: block; cursor: pointer; }
.seg label + label { border-left: 1px solid var(--color-line); }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg span { display: grid; place-items: center; min-height: 48px; font-family: var(--font-display); font-weight: 800; font-variation-settings: "wdth" var(--wdth-mid); text-transform: uppercase; letter-spacing: 0.02em; color: var(--color-ink-soft); transition: background-color var(--dur-ui) var(--ease-snap), color var(--dur-ui) var(--ease-snap); }
.seg input:checked + span { background: var(--color-ink); color: var(--color-ground); }
.seg input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: -4px; }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 48px; background: transparent; margin: 0; cursor: pointer; --p: 100%; }
.range::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(var(--color-ink), var(--color-ink)) 0 0 / var(--p) 100% no-repeat, var(--color-line); }
.range::-moz-range-track { height: 4px; background: var(--color-line); }
.range::-moz-range-progress { height: 4px; background: var(--color-ink); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 32px; margin-top: -14px; background: var(--color-accent); border: 2px solid var(--color-ink); border-radius: var(--radius-sm); transition: transform var(--dur-press) var(--ease-snap); }
.range::-moz-range-thumb { width: 24px; height: 32px; background: var(--color-accent); border: 2px solid var(--color-ink); border-radius: 0; }
.range:active::-webkit-slider-thumb { transform: scaleY(1.15); }
.ticks { display: flex; justify-content: space-between; font-size: var(--fs-m1); color: var(--color-ink-mute); margin-top: calc(var(--sp-2) * -1); }
.ticks--abs { position: relative; display: block; height: 1.5em; margin-inline: 12px; }
.ticks--abs span { position: absolute; left: calc(var(--x) * 100%); transform: translateX(calc(var(--x) * -100%)); }
.money { display: flex; align-items: center; gap: var(--sp-2); border-bottom: 1px solid var(--color-ink); max-width: 240px; }
.money span { font-size: var(--fs-1); color: var(--color-ink-mute); }
.money input { width: 100%; min-height: 48px; border: 0; background: transparent; font-size: var(--fs-1); font-weight: 500; outline: none; -moz-appearance: textfield; }
.money input::-webkit-outer-spin-button, .money input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.money:focus-within { border-bottom-color: var(--color-accent); }

.maker__out { display: grid; gap: var(--sp-5); justify-items: center; }
@media (min-width: 1024px) { .maker__out { position: sticky; top: calc(var(--bar-h) + var(--sp-6)); } }
.receipt {
  --tone: var(--paper-up);
  position: relative; width: 100%; max-width: 420px; padding: var(--sp-6) var(--sp-6) var(--sp-7);
  background: var(--paper); color: var(--paper-ink);
  -webkit-mask: radial-gradient(circle 8px at 12px 100%, transparent 98%, #000) -12px 0 / 24px 100% repeat-x;
  mask: radial-gradient(circle 8px at 12px 100%, transparent 98%, #000) -12px 0 / 24px 100% repeat-x;
  transform-origin: 50% 0;
}
.receipt[data-out="down"] { --tone: var(--paper-down); }
.receipt__head { display: flex; gap: var(--sp-4); align-items: center; padding-bottom: var(--sp-5); border-bottom: 1px dashed var(--paper-line); }
.receipt__brand { font-family: var(--font-display); font-weight: 900; font-variation-settings: "wdth" var(--wdth-tight); font-size: var(--fs-2); line-height: 1; }
.receipt__meta { font-size: var(--fs-m1); color: var(--paper-mute); margin-top: var(--sp-1); }
.receipt__lines { display: grid; gap: var(--sp-2); padding: var(--sp-5) 0; border-bottom: 1px dashed var(--paper-line); font-size: var(--fs-m1); }
.receipt__lines div { display: flex; justify-content: space-between; gap: var(--sp-4); }
.receipt__lines dt { color: var(--paper-mute); text-transform: uppercase; letter-spacing: 0.06em; }
.receipt__total { padding-top: var(--sp-5); display: grid; gap: var(--sp-1); }
.receipt__total .k { color: var(--paper-mute); }
.receipt__num { font-family: var(--font-display); font-weight: 900; font-variation-settings: "wdth" var(--wdth-tight); font-size: var(--fs-5); line-height: 1; color: var(--tone); font-variant-numeric: tabular-nums; }
.receipt__roi { color: var(--paper-ink); font-size: var(--fs-0); }
.receipt__stamp {
  position: absolute; right: var(--sp-5); bottom: 104px; padding: var(--sp-1) var(--sp-3);
  border: 3px solid var(--tone); color: var(--tone);
  font-family: var(--font-display); font-weight: 900; font-variation-settings: "wdth" var(--wdth-tight); font-size: var(--fs-2); line-height: 1; text-transform: uppercase; letter-spacing: 0.02em;
  transform: rotate(-10deg);
}
.receipt__foot { display: flex; justify-content: space-between; margin-top: var(--sp-6); font-size: var(--fs-m1); color: var(--paper-mute); }
.maker__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }

/* ---------- pool / flow ---------- */
.pool { padding-top: var(--sp-9); padding-bottom: var(--sp-9); }
.flow { display: grid; gap: 0; padding-top: var(--sp-7); }
@media (min-width: 1024px) { .flow { grid-template-columns: minmax(0, 3fr) 64px minmax(0, 3fr) 64px minmax(0, 4fr); align-items: stretch; } }
.flow__node { display: grid; gap: var(--sp-2); align-content: start; padding: var(--sp-5); border: 1px solid var(--color-line); border-radius: var(--radius-md); min-height: 140px; }
.flow__node--pool { border-color: var(--color-accent); }
.flow__node--pool .flow__t { color: var(--color-accent); }
.flow__t { font-family: var(--font-display); font-weight: 900; font-variation-settings: "wdth" var(--wdth-tight); font-size: var(--fs-3); line-height: 0.95; text-transform: uppercase; }
.flow__s { font-size: var(--fs-m1); color: var(--color-ink-mute); }
.flow__split { display: grid; gap: var(--sp-3); }
.flow__pipe { position: relative; height: 48px; display: grid; place-items: center; }
.flow__pipe span { width: 2px; height: 100%; background: var(--color-line); position: relative; overflow: hidden; }
.flow__pipe span::after { content: ""; position: absolute; left: 0; right: 0; height: 40%; background: var(--color-accent); transform: translateY(-100%); }
.flow.is-on .flow__pipe span::after { animation: drip-v 1.4s var(--ease-io) infinite; }
@media (min-width: 1024px) {
  .flow__pipe { height: auto; }
  .flow__pipe span { width: 100%; height: 2px; }
  .flow__pipe span::after { top: 0; bottom: 0; left: 0; height: auto; width: 40%; transform: translateX(-100%); }
  .flow.is-on .flow__pipe span::after { animation-name: drip-h; }
}
@keyframes drip-v { to { transform: translateY(250%); } }
@keyframes drip-h { to { transform: translateX(250%); } }
.rules { display: grid; gap: 0; margin-top: var(--sp-7); border-top: var(--rule); font-size: var(--fs-0); color: var(--color-ink-soft); }
.rules li { padding: var(--sp-4) 0; border-bottom: var(--rule); }
@media (min-width: 900px) { .rules { grid-template-columns: repeat(3, 1fr); } .rules li + li { padding-left: var(--sp-5); border-left: var(--rule); } .rules li { padding-right: var(--sp-5); } }

/* ---------- books ---------- */
.books { background: var(--color-accent); color: var(--color-accent-ink); }
.books__grid { display: grid; gap: var(--sp-7); padding-top: var(--sp-9); padding-bottom: var(--sp-9); }
@media (min-width: 1024px) { .books__grid { grid-template-columns: 7fr 5fr; align-items: end; } }
.books__title { font-family: var(--font-display); font-weight: 900; font-variation-settings: "wdth" var(--wdth-tight); font-size: var(--fs-7); line-height: 0.86; letter-spacing: -0.02em; text-transform: uppercase; }
.books__side { display: grid; gap: var(--sp-5); }
.books__p { font-size: var(--fs-1); line-height: 1.35; }
.books .btn--solid { --b: var(--color-accent-ink); background: var(--color-accent-ink); color: var(--color-accent); }
.books .btn--solid::before { background: var(--color-ground); }
.books .btn--solid:hover { color: var(--color-ink); }
.books__state { min-height: 120px; display: grid; align-content: start; }
.books__done { display: none; gap: var(--sp-1); }
.books__state[data-state="done"] .btn { display: none; }
.books__state[data-state="done"] .books__done { display: grid; }
.books__done .k { color: var(--color-accent-ink); }
.books__addr { font-size: var(--fs-2); font-weight: 500; }
.books__pos { font-size: var(--fs-0); }
.books__fine { font-size: var(--fs-0); max-width: 52ch; }

/* ---------- token ---------- */
.token { padding-top: var(--sp-9); padding-bottom: var(--sp-9); }
.token__grid { display: grid; gap: var(--sp-6); }
@media (min-width: 1024px) { .token__grid { grid-template-columns: 6fr 6fr; align-items: center; } }
.token__sym { font-family: var(--font-display); font-weight: 900; font-variation-settings: "wdth" var(--wdth-tight); font-size: var(--fs-7); line-height: 0.86; letter-spacing: -0.02em; }
.token__side { display: grid; gap: var(--sp-5); }
.ca { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-1) var(--sp-4); align-items: center; width: 100%; padding: var(--sp-4) var(--sp-5); min-height: 64px; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: transparent; text-align: left; cursor: pointer; transition: border-color var(--dur-ui) var(--ease-snap); }
.ca .k { grid-column: 1; }
.ca__v { grid-column: 1; font-size: var(--fs-m1); color: var(--color-ink-soft); overflow-wrap: anywhere; }
.ca .ico { grid-column: 2; grid-row: 1 / span 2; }
.ca:not([disabled]):hover { border-color: var(--color-accent); }
.ca[disabled] { cursor: default; }
.ca[disabled] .ico { opacity: 0.3; }
.token__links { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.swap { min-height: 560px; border: 1px solid var(--color-line); border-radius: var(--radius-md); overflow: hidden; }

/* ---------- faq ---------- */
.faq { padding-top: var(--sp-9); padding-bottom: var(--sp-9); border-top: var(--rule); display: grid; gap: var(--sp-7); }
@media (min-width: 1024px) { .faq { grid-template-columns: 5fr 7fr; } }
.faq__list { border-top: var(--rule); }
.faq details { border-bottom: var(--rule); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); min-height: 64px; padding: var(--sp-3) 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 800; font-variation-settings: "wdth" var(--wdth-mid); font-size: var(--fs-1); text-transform: uppercase; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { transition: transform var(--dur-ui) var(--ease-snap); }
.faq details[open] summary .ico { transform: rotate(45deg); }
.faq details p { padding: 0 0 var(--sp-5); max-width: 60ch; color: var(--color-ink-soft); }

/* ---------- footer ---------- */
.foot { border-top: var(--rule); overflow: hidden; padding-bottom: env(safe-area-inset-bottom); }
.foot__in { display: grid; gap: var(--sp-3); padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
@media (min-width: 900px) { .foot__in { grid-template-columns: 1fr auto; } }
.foot__fine { font-size: var(--fs-0); color: var(--color-ink-mute); max-width: 72ch; }
.foot__word { aspect-ratio: 2987 / 686; width: calc(100% + 2px); margin: 0 -1px -2%; background: var(--color-surface); -webkit-mask: url(/wordmark.svg) center / 100% 100% no-repeat; mask: url(/wordmark.svg) center / 100% 100% no-repeat; }

/* ---------- wallet sheet ---------- */
.sheet { position: fixed; inset: 0; z-index: 80; display: grid; align-items: end; }
@media (min-width: 640px) { .sheet { place-items: center; } }
.sheet__scrim { position: absolute; inset: 0; background: var(--color-ground); opacity: 0.8; }
.sheet__panel { position: relative; width: 100%; max-width: 480px; max-height: 88svh; display: grid; grid-template-rows: auto auto 1fr auto; background: var(--color-ground); border: 1px solid var(--color-line); border-bottom: 0; padding: var(--sp-3) var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom)); }
@media (min-width: 640px) { .sheet__panel { border-bottom: 1px solid var(--color-line); padding: var(--sp-5); } .sheet__grab { display: none; } }
.sheet__grab { width: 40px; height: 4px; background: var(--color-line); justify-self: center; margin-bottom: var(--sp-3); }
.sheet__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--sp-4); border-bottom: var(--rule); }
.sheet__title { font-family: var(--font-display); font-weight: 900; font-variation-settings: "wdth" var(--wdth-tight); font-size: var(--fs-2); text-transform: uppercase; }
.sheet__body { overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-3) 0; display: grid; gap: var(--sp-1); align-content: start; min-height: 240px; }
.sheet__loading, .sheet__fine { font-size: var(--fs-m1); color: var(--color-ink-mute); }
.sheet__fine { padding-top: var(--sp-3); border-top: var(--rule); }
.sheet__group { font-family: var(--font-mono); font-size: var(--fs-m1); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-ink-mute); padding: var(--sp-3) 0 var(--sp-1); }
.wl { display: flex; align-items: center; gap: var(--sp-4); width: 100%; min-height: 56px; padding: var(--sp-2) var(--sp-3); border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; text-align: left; text-decoration: none; cursor: pointer; font-family: var(--font-display); font-weight: 800; font-variation-settings: "wdth" var(--wdth-mid); font-size: var(--fs-1); transition: border-color var(--dur-ui) var(--ease-snap), background-color var(--dur-ui) var(--ease-snap); }
.wl:hover, .wl:focus-visible { border-color: var(--color-line); background: var(--color-surface); }
.wl img, .wl__mono { width: 32px; height: 32px; flex: none; border-radius: var(--radius-md); }
.wl__mono { display: grid; place-items: center; background: var(--color-surface); border: 1px solid var(--color-line); font-family: var(--font-mono); font-size: var(--fs-m1); font-weight: 500; }
.wl__tag { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-m1); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-mute); }
.wl__tag--on { color: var(--color-accent); }
.wl[aria-busy="true"] { opacity: 0.6; pointer-events: none; }
.sheet__step { display: grid; gap: var(--sp-4); padding: var(--sp-4) 0; }
.sheet__step p { color: var(--color-ink-soft); }
.sheet__msg { font-family: var(--font-mono); font-size: var(--fs-m1); color: var(--color-ink-soft); background: var(--color-surface); border: 1px solid var(--color-line); padding: var(--sp-3) var(--sp-4); white-space: pre-wrap; word-break: break-word; }
.sheet__err { color: var(--color-down); font-family: var(--font-mono); font-size: var(--fs-m1); }
body.sheet-open { overflow: hidden; }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: calc(var(--sp-6) + env(safe-area-inset-bottom)); z-index: 90; transform: translateX(-50%); padding: var(--sp-3) var(--sp-5); background: var(--color-ink); color: var(--color-ground); font-family: var(--font-mono); font-size: var(--fs-m1); font-weight: 500; border-radius: var(--radius-md); }

/* ---------- reveal motion ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger)); }
.reveal.is-in { opacity: 1; transform: none; }
html:not(.js) .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

@media (max-width: 520px) {
  .ticket__row > div { padding: var(--sp-3) var(--sp-4); }
  .ticket__row .v { font-size: var(--fs-0); }
  .ticket__head, .ticket__pnl, .ticket__cap { padding-inline: var(--sp-4); }
  .ticks--abs span:nth-child(3) { display: none; }
}