/* UTOPIA. Warm white marble, still water, small gold details.
   Display face: Cormorant Garamond, for the hero and a few editorial headings only.
   Interface face: IBM Plex Sans, for navigation, controls, tables, balances and statistics; tabular lining figures.
   Every colour is a token. The secondary grey (#686F69) is a line colour here, never a text colour. */
:root {
  --bg: #FAF9F5;
  --surface: #FFFFFF;
  --stone: #EEEAE2;
  --seam: #D9D3C8;
  --edge: #686F69;
  --ink: #292E2C;
  --accent: #466E73;
  --accent-deep: #3A5D61;
  --gold: #967B43;
  --buy: #2F765A;
  --buy-deep: #285F4A;
  --sell: #A64F4F;
  --sell-deep: #8E4242;
  --warn-ink: #7A5F2C;
  --water: rgb(70 110 115 / .13);
  --display: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --r-ctl: 4px;
  --r-panel: 6px;
  --side: 32px;
  --section: 104px;
  --header: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ------------------------------------------------------------------ base */
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + 16px); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--sans); font-variant-numeric: tabular-nums lining-nums; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--stone); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
.wrap { max-width: calc(1280px + 2 * var(--side)); margin: 0 auto; padding: 0 var(--side); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 60; padding: 10px 14px; background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r-ctl); font-size: 15px; font-weight: 500; }
.skip:focus { top: 10px; }
.mono { font-family: var(--mono); font-size: .92em; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.link { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.link:hover { color: var(--accent-deep); text-decoration-thickness: 2px; }

/* ------------------------------------------------------------------ type */
.display-1 { font: 500 clamp(48px, 6.1vw, 92px)/.96 var(--display); letter-spacing: -.018em; }
.display-2 { font: 500 clamp(36px, 4vw, 56px)/1.02 var(--display); letter-spacing: -.012em; }
.h2 { font: 600 30px/36px var(--sans); letter-spacing: -.012em; }
.h3 { font: 600 17px/24px var(--sans); }
.lede { font-size: 18px; line-height: 29px; max-width: 34em; }
.small, .hint { font-size: 14px; line-height: 21px; }
.label { font: 600 14px/20px var(--sans); }
.up { color: var(--buy); }
.down { color: var(--sell); }
.warn { color: var(--warn-ink); }

/* ------------------------------------------------------------------ chain marks: one neutral disc, one optical size */
.clogo { display: inline-block; flex: none; width: 24px; height: 24px; vertical-align: middle; border: 1px solid var(--seam); border-radius: 50%; background: var(--surface); object-fit: contain; }
.clogo.opening { opacity: .35; }

/* ------------------------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border: 1px solid var(--edge); border-radius: var(--r-ctl); background: var(--surface); color: var(--ink); font: 500 15px/20px var(--sans); cursor: pointer; white-space: nowrap; transition: background-color .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease); }
.btn:hover { background: var(--stone); border-color: var(--ink); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.btn.primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn.buy { background: var(--buy); border-color: var(--buy); color: var(--surface); }
.btn.buy:hover { background: var(--buy-deep); border-color: var(--buy-deep); }
.btn.sell { background: var(--sell); border-color: var(--sell); color: var(--surface); }
.btn.sell:hover { background: var(--sell-deep); border-color: var(--sell-deep); }
.btn.lg { height: 50px; padding: 0 24px; font-size: 16px; }
.btn.sm { height: 34px; padding: 0 12px; font-size: 14px; }
.btn.block { width: 100%; }
.btn.quiet { height: auto; padding: 0; border: 0; background: none; color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.btn.quiet:hover { color: var(--accent-deep); background: none; }
.btn:disabled { background: var(--stone); border-color: var(--seam); color: var(--ink); opacity: .55; cursor: not-allowed; }
.btn[aria-busy="true"] { opacity: 1; cursor: progress; }
.btn[aria-busy="true"]::before { content: ''; width: 12px; height: 12px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ header */
.bar { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--seam); transition: background-color .35s var(--ease), border-color .35s var(--ease); }
/* the landing header lies on the hero's sky until the page scrolls (src/home.js); phones stack the hero, so never there */
@media (min-width: 901px) { .bar.over { background: transparent; border-bottom-color: transparent; } }
.bar-in { display: flex; align-items: center; gap: 40px; height: var(--header); }
.brand { display: inline-flex; align-items: center; gap: .36em; font: 600 25px/1 var(--display); letter-spacing: .05em; white-space: nowrap; }
.brand-mark { width: 1.4em; height: 1.4em; flex: none; }
.nav { display: flex; gap: 28px; margin-left: auto; font: 500 15px/20px var(--sans); }
.nav a { padding: 6px 0; border-bottom: 1px solid transparent; transition: border-color .16s var(--ease); }
.nav a:hover { border-bottom-color: var(--ink); }
.nav a[aria-current] { border-bottom-color: var(--gold); }
.actions { display: flex; gap: 10px; align-items: center; }
.bar .btn { height: 40px; font-size: 14px; padding: 0 16px; }
.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; height: 40px; display: inline-flex; align-items: center; padding: 0 14px; border: 1px solid var(--edge); border-radius: var(--r-ctl); background: var(--surface); font-size: 14px; font-weight: 500; }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { background: var(--stone); }
.menu-panel { position: absolute; right: 0; top: 48px; width: 248px; display: flex; flex-direction: column; padding: 8px; background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r-panel); }
.menu-panel a { padding: 12px; border-radius: var(--r-ctl); font-size: 16px; }
.menu-panel a:hover { background: var(--stone); }
.menu-panel a.btn { margin-top: 6px; padding: 0 12px; }

/* ------------------------------------------------------------------ landing: hero */
/* The courtyard fills the first screen edge to edge and runs up under the header, which lies on the sky until the page
   scrolls (src/home.js). Wide screens get hero-full*.webp, with an ivory wash baked into its left side where the copy
   sits (CSS gradients are banned); the image is anchored left so the wash stays under the copy at any width. Phones
   stack the copy over the plain courtyard (the 900px block below). */
.hero { --stage: clamp(640px, 100svh, 1000px); position: relative; display: flex; flex-direction: column; min-height: var(--stage); margin-top: calc(-1 * var(--header)); overflow: hidden; background: var(--bg); }
.hero-art { position: absolute; inset: 0; z-index: 0; transform-origin: 72% 62%; }
.hero-art picture { display: block; width: 100%; height: 100%; }
.hero-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0% 62%; }
.hero .display-1 { font-size: clamp(56px, 6.4vw, 104px); }
/* the moving water (src/water.js): the same picture redrawn over the image, shown from its first frame */
.hero-art .water { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s var(--ease); }
.hero-art .water.on { opacity: 1; }
.hero-in { position: relative; z-index: 1; display: flex; align-items: center; width: 100%; min-height: var(--stage); padding-top: calc(var(--header) + 32px); padding-bottom: 56px; }
.hero-copy { min-width: 0; max-width: 640px; }
.hero-lede { margin-top: 26px; font-size: 19px; line-height: 30px; max-width: 27em; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 36px; }
.hero.still .hero-art { animation-play-state: paused; }
@media (prefers-reduced-motion: no-preference) {
  .hero-art { animation: breathe 56s ease-in-out infinite alternate; }
}
@keyframes breathe { from { scale: 1; } to { scale: 1.035; } }

/* five doors: the chain identities, equal prominence */
.doors { list-style: none; max-width: 560px; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--seam); }
.doors li { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 16px 10px 0 0; }
.doors .clogo { width: 36px; height: 36px; margin-bottom: 6px; }
.doors b { font: 600 14px/18px var(--sans); }
.doors small { font-size: 13px; line-height: 18px; }

/* ------------------------------------------------------------------ landing: photographs
   Architectural photography set straight into the page: square corners, no frame, no shadow, no overlay.
   One large landscape (the five channels into one pool, 2:1), one portrait column (the olive tree, 4:5),
   one small square detail (the pool edge, 1:1) and the closing terrace band (2.4:1), the only photo that carries text. */
.photo { margin: 0; }
.photo img { display: block; width: 100%; height: auto; border-radius: 0; background: var(--stone); }
.photo-pool { margin-top: 48px; }
.photo-pool img { aspect-ratio: 1671 / 941; object-fit: cover; }

/* ------------------------------------------------------------------ landing: sections */
.sec { padding: var(--section) 0; border-top: 1px solid var(--seam); }
.hero + .sec { border-top: 0; }
.sec.stone { background: var(--stone); border-top-color: var(--stone); }
.sec-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: end; }
.sec-head .lede { justify-self: end; }

/* the two models, side by side at one scale */
.models { display: grid; grid-template-columns: 1fr 1fr; margin-top: 56px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--seam); }
.model { padding: 24px 32px 28px 0; }
.model + .model { padding: 24px 0 28px 32px; border-left: 1px solid var(--seam); }
.model figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.model figcaption b { font: 600 17px/24px var(--sans); }
.model figcaption span { font-size: 14px; line-height: 20px; }
.mgrid { --label: 168px; --own: 150px; position: relative; display: grid; row-gap: 6px; margin-top: 24px; }
.mrow { display: grid; grid-template-columns: var(--label) minmax(24px, 1fr); align-items: center; height: 44px; }
.mgrid.shared { --pr: 84px; padding-right: var(--pr); }
.node { display: flex; align-items: center; gap: 10px; min-width: 0; font: 500 15px/20px var(--sans); white-space: nowrap; }
.node .clogo { width: 28px; height: 28px; }
.own { grid-column: 2; justify-self: end; display: flex; align-items: center; gap: 10px; width: var(--own); padding-left: 10px; font-size: 13px; line-height: 18px; white-space: nowrap; }
.own i { position: relative; display: block; flex: none; width: 22px; height: 22px; border: 1px solid var(--gold); border-radius: 50%; background: var(--surface); }
/* live figures (src/compare.js): each separate pool's own market cap, and the one pool's under its circle */
.own .m-p, .one .m-p { font: 500 13px/18px var(--mono); }
.one .m-p { position: absolute; top: 100%; left: 0; right: 0; margin-top: 10px; font-size: 15px; font-weight: 600; }
/* where a trade lands: a gold ring opens out of that pool */
.own i::after, .one b::before { content: ''; position: absolute; inset: -1px; border: 2px solid var(--gold); border-radius: 50%; opacity: 0; pointer-events: none; }
.own i.hit::after { animation: hit-ring 1.1s var(--ease) both; }
.one b.hit::before { animation: hit-ring-big 1.3s var(--ease) both; }
@keyframes hit-ring { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(2.2); } }
@keyframes hit-ring-big { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.6); } }
/* the rivers: each chain's stream drawn in still water, with slow gold flow along it */
.river { position: absolute; top: 0; left: var(--label); width: calc(100% - var(--label) - var(--own)); height: 100%; overflow: visible; }
.mgrid.shared .river { width: calc(100% - var(--label) - var(--pr)); }
.river path { fill: none; vector-effect: non-scaling-stroke; }
.river .bed path { stroke: var(--accent); stroke-width: 1.5px; stroke-linecap: round; }
.river .flow path { stroke: var(--gold); stroke-width: 1.5px; stroke-linecap: round; stroke-dasharray: 3 15; }
/* a trade: one bright run of gold down its river (pathLength 1000 on these paths) */
.river .pulse path { stroke: var(--gold); stroke-width: 3px; stroke-linecap: round; stroke-dasharray: 90 1200; stroke-dashoffset: 90; opacity: 0; }
.river .pulse path.go { animation: river-run .7s cubic-bezier(.45, 0, .25, 1) both; }
@keyframes river-run { 0% { stroke-dashoffset: 90; opacity: 1; } 85% { opacity: 1; } 100% { stroke-dashoffset: -1000; opacity: 0; } }
.one { position: absolute; top: 50%; right: calc(var(--pr) - 84px); width: 168px; transform: translateY(-50%); text-align: center; }
.one b { position: relative; display: flex; align-items: center; justify-content: center; width: 92px; height: 92px; margin: 0 auto; border: 1px solid var(--gold); border-radius: 50%; background: var(--surface); font: 600 15px/20px var(--sans); }
.one b::after { content: ''; position: absolute; inset: -1px; border: 1px solid var(--gold); border-radius: 50%; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .river .flow path { animation: flow 12s linear infinite; }
  .one b::after { animation: ripple 7s ease-out infinite; }
  .models.still .river .flow path, .models.still .one b::after { animation-play-state: paused; }
}
@keyframes flow { to { stroke-dashoffset: -18px; } }
@keyframes ripple { 0% { transform: scale(1); opacity: .9; } 70% { transform: scale(1.45); opacity: 0; } 100% { transform: scale(1.45); opacity: 0; } }
.model-note { margin-top: 18px; font-size: 15px; line-height: 23px; font-weight: 500; }
/* three live stats under each model: the gap between chains, how far the last trade moved, the dollars behind it */
.mstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 40px 0 0; border-top: 1px solid var(--seam); }
.mstats > div { padding: 16px 16px 0; }
.mstats > div:first-child { padding-left: 0; }
.mstats > div + div { border-left: 1px solid var(--seam); }
.mstats dt { font-size: 13px; line-height: 18px; font-weight: 500; }
.mstats dd { margin: 6px 0 0; font: 600 26px/32px var(--sans); letter-spacing: -.01em; }
.m-gap.bad { color: var(--sell); }
.m-gap.good { color: var(--buy); }

.facts { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.facts li { padding-top: 18px; border-top: 1px solid var(--ink); }
.facts .h3 { font: 500 27px/32px var(--display); letter-spacing: -.005em; }
.facts p { margin-top: 8px; font-size: 15px; line-height: 24px; max-width: 30em; }

/* shared states */
.seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--edge); border-radius: var(--r-ctl); background: var(--surface); }
.seg button { height: 34px; padding: 0 12px; border: 0; border-radius: 3px; background: none; font: 500 14px/20px var(--sans); cursor: pointer; transition: background-color .16s var(--ease), color .16s var(--ease); }
.seg button:hover { background: var(--stone); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.marks { display: inline-flex; gap: 6px; align-items: center; }
.marks .clogo { width: 24px; height: 24px; }
.state { padding: 56px 0; text-align: center; border-bottom: 1px solid var(--seam); }
.state b { display: block; font: 600 18px/26px var(--sans); }
.state p { margin-top: 6px; font-size: 15px; line-height: 23px; }
.state .btn { margin-top: 18px; }
.state .marks { margin-top: 18px; gap: 8px; }
.state .marks .clogo { width: 30px; height: 30px; }
.loading-bar { display: block; width: 120px; height: 2px; margin: 16px auto 0; background: var(--stone); overflow: hidden; position: relative; }
.loading-bar::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; background: var(--accent); animation: load 1.2s var(--ease) infinite; }
@keyframes load { from { left: -40%; } to { left: 100%; } }

/* one price: an example coin in the app's own surfaces (src/example.js). A trade lands on one chain, then a gold
   thread lights each cell's top edge in turn, outward from that cell, as its price rolls to the same new figure. Cells
   share hairlines through a 1px gap over the seam colour, so the grid can rewrap without doubled borders. */
.expanel { margin: 56px 0 0; background: var(--surface); border: 1px solid var(--seam); border-radius: var(--r-panel); overflow: hidden; }
.ex-head { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 28px; border-bottom: 1px solid var(--seam); }
.ex-id { display: flex; align-items: center; gap: 14px; min-width: 0; font: 600 20px/26px var(--sans); }
.ex-avatar { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border: 1px solid var(--gold); border-radius: 50%; background: var(--stone); font: 600 24px/1 var(--display); }
.ex-tag { padding: 2px 8px; border: 1px solid var(--edge); border-radius: var(--r-ctl); font: 500 13px/18px var(--sans); }
.ex-figs { display: flex; gap: 48px; text-align: right; }
.ex-figs small { display: block; font-size: 13px; line-height: 18px; font-weight: 500; }
.ex-figs b { display: block; font: 600 26px/34px var(--sans); letter-spacing: -.01em; }
.ex-cells { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--seam); }
.ex-cell { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 20px 20px 18px; background: var(--surface); }
.ex-ch { display: flex; align-items: center; gap: 10px; min-width: 0; font: 600 14px/20px var(--sans); white-space: nowrap; }
.ex-ch .clogo { width: 28px; height: 28px; }
.ex-p { font: 500 16px/22px var(--mono); }
.ex-t { height: 20px; font-size: 14px; line-height: 20px; font-weight: 600; opacity: 0; }
.ex-t.buy { color: var(--buy); }
.ex-t.sell { color: var(--sell); }
.ex-cell.hit .ex-t { animation: ex-trade 2s var(--ease) both; }
.ex-cell::after { content: ''; position: absolute; left: 20px; top: 20px; width: 28px; height: 28px; border: 1px solid var(--gold); border-radius: 50%; opacity: 0; pointer-events: none; }
.ex-cell.hit::after { animation: ex-ring 1.2s var(--ease) both; }
.ex-cell::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--gold); opacity: 0; transform: scaleX(0); transform-origin: var(--o, center); pointer-events: none; }
.ex-cell.sync::before { animation: ex-sync 1.2s var(--rest) var(--d, 0ms) both; }
.ex-note { padding: 14px 28px; border-top: 1px solid var(--seam); font-size: 14px; line-height: 20px; }
/* the one pool under the six cells: while they sit in one row, each chain's channel runs down to its rim (drawn in
   real pixels by src/example.js) with slow gold flow like the rivers below; a wrapped grid shows the pool alone */
.ex-flow { position: relative; display: flex; justify-content: center; padding: 28px 28px 34px; border-top: 1px solid var(--seam); }
.ex-flow.chan { padding-top: 96px; }
.ex-chan { position: absolute; inset: 0; display: none; width: 100%; height: 100%; overflow: visible; }
.ex-flow.chan .ex-chan { display: block; }
.ex-chan path { fill: none; stroke-linecap: round; }
.ex-chan .bed path { stroke: var(--accent); stroke-width: 1.5px; opacity: .55; }
.ex-chan .stream path { stroke: var(--gold); stroke-width: 1.5px; stroke-dasharray: 3 15; }
.ex-chan .pulse path { stroke: var(--gold); stroke-width: 3px; }
.ex-pool { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: min(100%, 520px); min-height: 136px; padding: 18px 44px; border: 1px solid var(--gold); border-radius: 50%; outline: 1px solid var(--seam); outline-offset: 6px; background: var(--water); text-align: center; }
.ex-pool::after { content: ''; position: absolute; inset: -1px; border: 1px solid var(--gold); border-radius: 50%; opacity: 0; pointer-events: none; }
.ex-pool.hit::after { animation: pool-ring 1.4s var(--ease) both; }
.ex-pool-name { font: 500 26px/30px var(--display); }
.ex-pool-figs { display: flex; gap: 40px; }
.ex-pool-figs > span { display: flex; flex-direction: column; align-items: center; }
.ex-pool-figs small { font-size: 12px; line-height: 16px; font-weight: 500; }
.ex-pool-figs b { font: 600 17px/22px var(--sans); }
@keyframes pool-ring { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.16, 1.4); } }
@media (prefers-reduced-motion: no-preference) {
  .ex-chan .stream path { animation: flow 12s linear infinite; }
}
@keyframes ex-trade { 0% { opacity: 0; transform: translateY(6px); } 12%, 72% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes ex-ring { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }
@keyframes ex-sync { 0% { opacity: 1; transform: scaleX(0); } 40% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
/* rolling figures: each digit is a column of 0 to 9 that slides to its value; the figure tints for a moment */
.roll { white-space: pre; transition: color .5s var(--ease); }
.roll-face { display: inline-flex; }
.roll-face > span { display: inline-block; height: 1.3em; line-height: 1.3em; vertical-align: top; }
.roll .dg { overflow: hidden; }
.roll .col { display: flex; flex-direction: column; line-height: 1.3em; transition: transform .65s var(--rest); }
.roll.up { color: var(--buy); }
.roll.down { color: var(--sell); }

/* creators */
.creators-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); grid-template-areas: "copy terms"; gap: 48px 88px; align-items: center; }
.creators-copy { grid-area: copy; }
.creators-copy .lede { margin-top: 22px; }
/* the earnings calculator (src/calc.js): a log slider for daily volume, the fee, and the creator's 70% a day, a month
   and a year. The slider's gold fill is a plain bar under a transparent track, since gradients are banned. */
.calc { grid-area: terms; padding: 26px 32px 24px; background: var(--surface); border: 1px solid var(--seam); border-radius: var(--r-panel); }
.calc-h { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; padding-bottom: 18px; border-bottom: 1px solid var(--gold); }
.calc-h b { font: 500 30px/34px var(--display); }
.calc-h span { font-size: 14px; line-height: 20px; font-weight: 600; }
.calc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 8px 16px; padding: 20px 0; border-bottom: 1px solid var(--seam); }
.calc-row label, .calc-row > span { font-size: 15px; line-height: 22px; font-weight: 500; }
.calc-vol { font: 600 24px/30px var(--sans); letter-spacing: -.01em; }
.calc-fees { align-items: center; }
.calc-track { position: relative; grid-column: 1 / -1; height: 28px; margin-top: 4px; }
.calc-track::before, .calc-track::after { content: ''; position: absolute; left: 0; top: 13px; height: 2px; border-radius: 1px; }
.calc-track::before { right: 0; background: var(--seam); }
.calc-track::after { width: calc(12px + (100% - 24px) * var(--fill, .5)); background: var(--gold); }
.calc input[type="range"] { position: relative; z-index: 1; display: block; width: 100%; height: 28px; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.calc input[type="range"]::-webkit-slider-runnable-track { height: 28px; background: none; }
.calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: 2px; border: 1px solid var(--gold); border-radius: 50%; background: var(--surface); transition: transform .16s var(--ease); }
.calc input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
.calc input[type="range"]::-moz-range-track { height: 28px; background: none; }
.calc input[type="range"]::-moz-range-thumb { box-sizing: border-box; width: 24px; height: 24px; border: 1px solid var(--gold); border-radius: 50%; background: var(--surface); }
/* a day and a month side by side, then the year on its own line, largest: up to $12,775,000 at $1M a day and 5% */
.calc-out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; padding: 22px 0 4px; }
.calc-out small { display: block; font-size: 13px; line-height: 18px; font-weight: 500; }
.calc-out b { display: block; margin-top: 4px; font: 600 30px/1.2 var(--sans); letter-spacing: -.02em; white-space: nowrap; }
.calc-out div:last-child { grid-column: 1 / -1; padding-top: 16px; border-top: 1px solid var(--seam); }
.calc-out div:last-child b { font-size: clamp(40px, 4.2vw, 56px); letter-spacing: -.03em; }
.calc-note { margin-top: 14px; font-size: 13px; line-height: 19px; }

/* technical details: how a trade travels, three stops on one line with a gold pulse running from the first to the
   last (paused off screen by src/home.js); the docs links close the section */
.trip { --gap: 40px; position: relative; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin: 56px 0 0; padding: 0; }
.trip::before, .trip::after { content: ''; position: absolute; top: 24px; left: 24px; pointer-events: none; }
.trip::before { width: calc((100% - 2 * var(--gap)) / 3 * 2 + 2 * var(--gap)); height: 1px; background: var(--ink); }
.trip::after { top: 23px; width: 72px; height: 3px; border-radius: 2px; background: var(--gold); opacity: 0; }
.trip-n { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--gold); border-radius: 50%; background: var(--bg); font: 500 18px/1 var(--sans); }
.trip h3 { margin-top: 24px; font: 500 30px/34px var(--display); letter-spacing: -.005em; }
.trip p { margin-top: 10px; font-size: 16px; line-height: 25px; max-width: 24em; }
@media (prefers-reduced-motion: no-preference) {
  .trip::after { animation: trip-run 4.8s var(--ease) infinite; }
  .trip.still::after { animation-play-state: paused; }
}
@keyframes trip-run {
  0% { left: 24px; opacity: 0; }
  8% { opacity: 1; }
  70% { left: calc(24px + (100% - 2 * var(--gap)) / 3 * 2 + 2 * var(--gap) - 72px); opacity: 1; }
  80%, 100% { left: calc(24px + (100% - 2 * var(--gap)) / 3 * 2 + 2 * var(--gap) - 72px); opacity: 0; }
}
.doc-links { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--seam); font-size: 16px; }

/* closing: the terrace photograph as a wide band; the headline and buttons sit in the open sky on the left, dark ink on pale sky, no overlay */
.closing { position: relative; aspect-ratio: 2.4 / 1; overflow: hidden; background: var(--stone); border-top: 1px solid var(--seam); }
.closing-art { position: absolute; inset: 0; display: block; }
.closing-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; border-radius: 0; }
.closing-in { position: relative; z-index: 1; padding-top: clamp(40px, 6.4vw, 92px); padding-bottom: 56px; }
.closing .display-2 { max-width: 10.5em; }
.closing .cta { margin-top: 32px; }

/* footer */
.foot { border-top: 1px solid var(--seam); padding: 40px 0 48px; }
.closing + .foot { border-top-color: var(--seam); }
.foot-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 48px; align-items: start; }
.foot-brand p { margin-top: 10px; font-size: 15px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 15px; padding-top: 4px; }
.foot nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ------------------------------------------------------------------ app pages */
.page-head { padding: 56px 0 36px; }
.page-title { font: 500 clamp(44px, 4.6vw, 64px)/1 var(--display); letter-spacing: -.012em; }
.page-head .lede { margin-top: 16px; max-width: 40em; }
.panel { background: var(--surface); border: 1px solid var(--seam); border-radius: var(--r-panel); }
.panel-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding: 12px 24px; border-bottom: 1px solid var(--seam); }
.panel-h h2, .panel-h h3 { font: 600 16px/22px var(--sans); }
.panel .body { padding: 24px; }
.status { min-height: 20px; margin-top: 12px; font-size: 14px; line-height: 21px; font-weight: 500; }
.status:empty { margin-top: 0; min-height: 0; }
.status.pending { display: flex; align-items: center; gap: 8px; }
.status.pending::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.status.err { color: var(--sell); }
.status.ok { color: var(--buy); }
.status.cancel { color: var(--ink); }
.status a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* fields */
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.field > label, .flabel { font-size: 14px; line-height: 20px; font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--edge); border-radius: var(--r-ctl); background: var(--surface); outline: none; font-size: 16px; transition: border-color .16s var(--ease), box-shadow .16s var(--ease); }
.field input:hover, .field select:hover { border-color: var(--ink); }
.field input:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.field input::placeholder { color: var(--ink); opacity: .45; }
.field .hint { margin: 0; }
.amount { position: relative; }
.amount input { height: 52px; padding-right: 80px; font-size: 20px; font-weight: 500; }
.amount .unit { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); padding: 3px 8px; border-radius: 3px; background: var(--stone); font-size: 14px; font-weight: 600; }
.quick { display: flex; gap: 6px; }
.quick button { flex: 1; height: 32px; border: 1px solid var(--seam); border-radius: var(--r-ctl); background: var(--surface); cursor: pointer; font-size: 14px; font-weight: 500; transition: border-color .16s var(--ease), background-color .16s var(--ease); }
.quick button:hover { border-color: var(--ink); }
.quick button.on { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.kv { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--stone); font-size: 14px; line-height: 20px; }
.kv:last-child { border-bottom: 0; }
.kv > span:first-child { flex: none; max-width: 58%; }
.kv b { font-weight: 600; text-align: right; }

/* coin page: 8 + 4 */
.coin-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: 32px; grid-template-areas: "head panel" "figs panel" "roster panel" "chart panel" "info panel"; align-content: start; padding: 36px 0 96px; }
.coin-head { grid-area: head; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-bottom: 24px; }
.ident { display: flex; gap: 16px; align-items: center; min-width: 0; }
.avatar { width: 60px; height: 60px; flex: none; border-radius: 50%; object-fit: cover; background: var(--stone); border: 1px solid var(--seam); }
.ident h1 { font: 600 30px/36px var(--sans); letter-spacing: -.012em; overflow-wrap: anywhere; }
.ident-sub { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: 14px; line-height: 20px; }
.ident-sub #sym { font-weight: 600; }
.pricebox { text-align: right; flex: none; }
.price-label { font-size: 13px; line-height: 18px; font-weight: 500; }
.price { margin-top: 2px; font: 600 36px/42px var(--sans); letter-spacing: -.015em; }
.change { min-height: 20px; margin-top: 2px; font-size: 14px; line-height: 20px; font-weight: 600; }
.figs { grid-area: figs; display: flex; flex-wrap: wrap; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--seam); }
.figs .fig { flex: 1 1 0; min-width: 120px; padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; }
.figs .fig + .fig { border-left: 1px solid var(--seam); }
.figs .fig:first-child { padding-left: 0; }
.figs small { font-size: 13px; line-height: 18px; }
.figs b { font-size: 17px; line-height: 24px; font-weight: 600; }
.roster-panel { grid-area: roster; padding: 28px 0 24px; }
.roster-panel .label { margin-bottom: 12px; }
.cells { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.cell { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; padding: 12px 12px 14px; text-align: left; background: var(--surface); border: 1px solid var(--seam); border-radius: var(--r-panel); font-size: 13px; line-height: 18px; transition: border-color .16s var(--ease), box-shadow .16s var(--ease); }
button.cell { cursor: pointer; }
button.cell:hover { border-color: var(--ink); }
.cell.sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cell.sel::before { content: ''; position: absolute; left: 12px; right: 12px; top: -1px; height: 3px; background: var(--accent); }
.cell-h { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 100%; margin-bottom: 6px; font-size: 14px; line-height: 18px; font-weight: 600; }
.cell-h .clogo { width: 28px; height: 28px; }
.cell .sync { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; font-weight: 500; }
.cell .sync::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--buy); }
.cell .sync.warn::before { background: var(--gold); }
.cell .sync.wait::before { background: var(--edge); }
.cell .k { margin-top: 4px; }
.cell b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 14px; line-height: 20px; font-weight: 600; }
.cell .note { margin-top: 6px; }
.chart-panel { grid-area: chart; }
.ranges { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--edge); border-radius: var(--r-ctl); }
.ranges button { height: 28px; padding: 0 10px; border: 0; border-radius: 3px; background: none; cursor: pointer; font-size: 13px; font-weight: 500; }
.ranges button:hover { background: var(--stone); }
.ranges button.on { background: var(--ink); color: var(--surface); }
.chart-box { position: relative; }
.slip { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--edge); border-radius: var(--r-ctl); }
.slip button { height: 26px; padding: 0 9px; border: 0; border-radius: 3px; background: none; cursor: pointer; font-size: 13px; font-weight: 500; }
.slip button:hover { background: var(--stone); }
.slip button.on { background: var(--ink); color: var(--surface); }
.chart-ctl { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.kline { width: 100%; height: 420px; }
.chart-empty { position: absolute; left: 0; right: 0; top: 42%; margin: 0; text-align: center; font-size: 14px; font-weight: 500; pointer-events: none; }
.tip { position: absolute; top: 12px; z-index: 2; padding: 8px 10px; background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r-ctl); font-size: 13px; line-height: 18px; white-space: nowrap; pointer-events: none; }
.tip b { display: block; font-size: 14px; font-weight: 600; }
.tip-line { position: absolute; top: 20px; bottom: 36px; z-index: 1; width: 1px; background: var(--edge); pointer-events: none; }
.chart-foot { padding: 10px 24px 14px; border-top: 1px solid var(--stone); font-size: 13px; line-height: 20px; }
.info { grid-area: info; margin-top: 24px; }
.itabs { display: flex; border-bottom: 1px solid var(--seam); }
.itabs button { height: 46px; padding: 0 18px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; cursor: pointer; font-size: 15px; font-weight: 500; transition: border-color .16s var(--ease); }
.itabs button:first-child { padding-left: 0; }
.itabs button:hover { border-bottom-color: var(--seam); }
.itabs button.on { border-bottom-color: var(--ink); font-weight: 600; }
.info-body { padding-top: 4px; }
.trades { font-size: 14px; line-height: 20px; }
.trow { display: grid; grid-template-columns: 56px minmax(0, 1.4fr) 1fr 1fr 64px 52px; gap: 12px; align-items: center; height: 50px; border-bottom: 1px solid var(--seam); }
.trow > :nth-child(n+3) { text-align: right; }
.trow.h { height: 42px; font-size: 13px; font-weight: 500; border-bottom-color: var(--ink); }
.trow .up, .trow .down { font-weight: 600; }
.tchain { display: inline-flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.tchain .clogo { width: 24px; height: 24px; }
.empty-line { padding: 28px 0; font-size: 15px; }
.crow { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; border-bottom: 1px solid var(--seam); font-size: 15px; }
.addr { display: inline-flex; align-items: center; gap: 12px; }
.copy { height: 30px; padding: 0 10px; border: 1px solid var(--edge); border-radius: var(--r-ctl); background: var(--surface); cursor: pointer; font-size: 13px; font-weight: 500; }
.copy:hover { background: var(--stone); }
.coin-err { grid-column: 1 / -1; }
.coin-grid.is-error .figs, .coin-grid.is-error .roster-panel, .coin-grid.is-error .chart-panel, .coin-grid.is-error .info, .coin-grid.is-error .tradecol, .coin-grid.is-error .pricebox { display: none; }
.coin-grid.is-error { grid-template-areas: "head head" "err err"; }
.coin-grid.is-error .coin-err { grid-area: err; border-top: 1px solid var(--ink); }

/* trading panel */
.tradecol { grid-area: panel; align-self: start; position: sticky; top: calc(var(--header) + 24px); }
.tradepanel { padding: 20px; }
.ttabs { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--edge); border-radius: var(--r-ctl); background: var(--bg); }
.ttabs button { flex: 1; height: 40px; border: 0; border-radius: 3px; background: none; cursor: pointer; font-size: 15px; font-weight: 600; transition: background-color .16s var(--ease), color .16s var(--ease); }
.ttabs button:hover { background: var(--stone); }
.ttabs button[data-tab="buy"].on { background: var(--buy); color: var(--surface); }
.ttabs button[data-tab="sell"].on { background: var(--sell); color: var(--surface); }
.tradepanel .body { padding: 18px 0 0; }
.route { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--stone); }
.route .flabel { display: block; margin-bottom: 8px; }
.route-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.route-pick { display: flex; gap: 4px; }
.route-pick button { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border: 1px solid transparent; border-radius: 50%; background: none; cursor: pointer; transition: border-color .16s var(--ease); }
.route-pick button .clogo { width: 30px; height: 30px; }
.route-pick button:hover { border-color: var(--edge); }
.route-pick button.on { border: 2px solid var(--accent); }
.route-name { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.tradepanel .kv { font-size: 14px; }
.trade-act { margin-top: 16px; height: 48px; font-size: 16px; }
.support { margin-top: 10px; font-size: 13px; line-height: 20px; }
.slow { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--seam); }
.slow .btn { margin-top: 10px; }
.move-open { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--seam); font-size: 14px; }
.quote-note { margin-top: 2px; font-size: 13px; line-height: 19px; }

/* transfer dialog */
dialog.modal { width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--edge); border-radius: var(--r-panel); background: var(--surface); color: var(--ink); }
dialog.modal::backdrop { background: rgb(41 46 44 / .35); }
.modal-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 22px 24px 16px; border-bottom: 1px solid var(--seam); }
.modal-h h2 { font: 600 20px/26px var(--sans); }
.modal-h p { margin-top: 4px; font-size: 14px; line-height: 20px; }
.modal-x { height: 36px; padding: 0 12px; flex: none; border: 1px solid var(--edge); border-radius: var(--r-ctl); background: var(--surface); cursor: pointer; font-size: 14px; }
.modal-x:hover { background: var(--stone); }
.modal .body { padding: 20px 24px 24px; }
.from { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border: 1px solid var(--seam); border-radius: var(--r-ctl); background: var(--bg); font-size: 15px; font-weight: 600; }
.track { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; font-size: 13px; line-height: 18px; }
.track span { position: relative; padding-top: 16px; }
.track span::before { content: ''; position: absolute; top: 4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--surface); border: 1px solid var(--edge); }
.track span::after { content: ''; position: absolute; top: 7px; left: 12px; right: 6px; height: 1px; background: var(--seam); }
.track span:last-child::after { display: none; }
.track span.on::before { background: var(--gold); border-color: var(--gold); }
.track span.on::after { background: var(--gold); }
.track a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* launch page: form + review */
.stepper { display: flex; list-style: none; margin: 32px 0 0; padding: 0; max-width: 520px; counter-reset: s; }
.stepper li { flex: 1; display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 2px solid var(--seam); font-size: 14px; line-height: 20px; font-weight: 500; transition: border-color .2s var(--ease); }
.stepper li b { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--edge); border-radius: 50%; background: var(--surface); font-size: 12px; font-weight: 600; }
.stepper li.on { border-top-color: var(--accent); font-weight: 600; }
.stepper li.on b { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.stepper li.done { border-top-color: var(--accent); }
.stepper li.done b { border-color: var(--accent); }
.launch-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: start; padding-bottom: 104px; }
.form .panel + .panel { margin-top: 20px; }
.panel-h .n { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 10px; border: 1px solid var(--edge); border-radius: 50%; font-size: 12px; font-weight: 600; vertical-align: 1px; }
.form-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.legs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.leg { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 12px; border: 1px solid var(--seam); border-radius: var(--r-panel); background: var(--bg); font-size: 13px; line-height: 18px; }
.leg b { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap; }
.leg .clogo { width: 28px; height: 28px; }
.leg.off { opacity: .6; }
.legs-note { margin-top: 14px; font-size: 14px; line-height: 21px; }
.payfrom { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 1px solid var(--seam); border-radius: var(--r-ctl); background: var(--bg); font-size: 15px; font-weight: 600; }
.summary { position: sticky; top: calc(var(--header) + 24px); }
.summary .panel-h { display: block; padding: 18px 24px; }
.sum-sym { font: 600 28px/34px var(--sans); letter-spacing: -.01em; overflow-wrap: anywhere; }
.sum-name { margin-top: 2px; font-size: 15px; line-height: 22px; }
.sum-group { padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--seam); }
.sum-group:last-of-type { border-bottom: 0; }
.sum-dest { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; font-size: 14px; line-height: 20px; border-bottom: 1px solid var(--stone); }
.sum-dest .marks .clogo { width: 24px; height: 24px; }
.sum-total { font-size: 16px; }
.sum-total b { font-weight: 700; }
.summary .actions-col { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.prog-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--seam); }
.prog-note { margin-top: 6px; font-size: 14px; line-height: 21px; }
.steps { display: flex; flex-direction: column; margin-top: 8px; }
.step { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--stone); font-size: 14px; line-height: 20px; font-weight: 600; }
.step:last-child { border-bottom: 0; }
.step .st { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.step .st::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--edge); }
.step .st.run::before { background: var(--gold); animation: pulse 1.4s ease-in-out infinite; }
.step .st.ok::before { background: var(--buy); }
.step .st.err::before { background: var(--sell); }
.step .st.err { color: var(--sell); }
.done-box { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--seam); }
.done-box b { display: block; font: 600 18px/26px var(--sans); }
.done-box p { margin: 4px 0 0; font-size: 15px; }

/* transfer page */
.bridge-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: start; padding-bottom: 104px; }
.state-line { padding: 8px 0; font-size: 15px; line-height: 23px; }

/* docs */
.doc-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 56px; align-items: start; padding-bottom: 104px; }
.toc { position: sticky; top: calc(var(--header) + 32px); display: flex; flex-direction: column; font-size: 15px; line-height: 20px; border-left: 1px solid var(--seam); }
.toc a { padding: 7px 0 7px 16px; margin-left: -1px; border-left: 2px solid transparent; }
.toc a:hover { border-left-color: var(--ink); }
.doc { max-width: 760px; }
.doc h2 { margin: 56px 0 12px; padding-top: 20px; border-top: 1px solid var(--ink); font: 600 24px/30px var(--sans); letter-spacing: -.01em; }
.doc h2:first-child { margin-top: 0; }
.doc p { margin: 10px 0; font-size: 17px; line-height: 28px; max-width: 680px; }
.doc .kvs { margin-top: 16px; border-top: 1px solid var(--seam); }
.doc .kv { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; padding: 12px 0; border-bottom-color: var(--seam); font-size: 15px; line-height: 23px; }
.doc .kv > span:first-child { font-weight: 600; max-width: none; }
.doc .kv b { font-weight: 400; text-align: left; }
.chain-block { padding: 16px 0; border-bottom: 1px solid var(--seam); }
.chain-block h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font: 600 16px/22px var(--sans); }
.chain-block h3 .clogo { width: 28px; height: 28px; }
.chain-block .kv { padding: 6px 0; border: 0; }

/* ------------------------------------------------------------------ motion
   One language, water settling (src/motion.js): a headline's lines rise out of their own masks and come to rest, the
   text around them follows a beat later, nothing bounces and nothing plays twice. The head script sets html.motion
   when the reader allows motion; until src/motion.js adds .motion-on, the hero waits (2.5s at most). */
:root { --rest: cubic-bezier(.16, 1, .3, 1); }
.motion:not(.motion-on) .hero-copy, .motion:not(.motion-on) .hero-art picture { opacity: 0; animation: hold-off 0s 2.5s forwards; }
@keyframes hold-off { to { opacity: 1; } }
/* each mask reaches past its line box, so ascenders, descenders and overhangs are never clipped */
.ln { display: block; overflow: hidden; padding: .1em .06em .16em; margin: -.1em -.06em -.16em; }
.ln > span { display: block; }
.motion-on .rv:not(.in) .ln > span { transform: translateY(130%); }
.motion-on .rv.in .ln > span { animation: rise 1.15s var(--rest) calc(var(--d, 0ms) + var(--i, 0) * 95ms) both; }
.motion-on .rv-up:not(.in) { opacity: 0; transform: translateY(14px); }
.motion-on .rv-up.in { animation: rise-up .95s var(--rest) var(--d, 0ms) both; }
.motion-on .rv-art { animation: surface 1.7s var(--ease) both; }
@keyframes rise { from { transform: translateY(130%); } to { transform: none; } }
@keyframes rise-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes surface { from { opacity: 0; } to { opacity: 1; } }

/* pages flow into each other (cross-document view transitions; other browsers load the page as before): the header
   and the wordmark hold their place, the old page lifts away and the new one settles in. The opt-in,
   @view-transition, is inlined into every <head> by scripts/site.mjs; with reduced motion the swap is instant. */
.bar, .abar { view-transition-name: bar; }
.bar .brand, .abar .brand { view-transition-name: brand; }
::view-transition-group(bar), ::view-transition-group(brand) { animation-duration: .45s; animation-timing-function: var(--rest); }
::view-transition-old(root) { animation: page-out .22s var(--ease) both; }
::view-transition-new(root) { animation: page-in .6s var(--rest) .06s both; }
@keyframes page-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes page-in { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1180px) {
  :root { --side: 24px; }
  .nav { gap: 22px; }
  .bar-in { gap: 28px; }
  .mgrid { --own: 140px; }
  .hero-lede, .doors { max-width: 430px; }
  .ex-cells { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .model { padding-right: 24px; }
  .model + .model { padding-left: 24px; }
  .cells { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .legs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .nav { display: none; }
  .actions { margin-left: auto; }
  .menu { display: block; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .creators-grid { gap: 48px; }
}
@media (max-width: 900px) {
  :root { --section: 72px; }
  .hero { --stage: auto; margin-top: 0; }
  .hero-in { order: 1; min-height: 0; padding-top: 40px; padding-bottom: 0; }
  .hero-lede, .doors { max-width: 600px; }
  .hero-art { position: relative; order: 2; inset: auto; width: 100%; aspect-ratio: 4 / 3; max-height: 560px; margin-top: 36px; }
  .hero-art img { object-position: 100% 50%; }
  .sec-head { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sec-head .lede { justify-self: start; }
  .models { grid-template-columns: minmax(0, 1fr); }
  .model, .model + .model { padding: 24px 0 28px; border-left: 0; }
  .model + .model { border-top: 1px solid var(--seam); }
  .creators-grid, .launch-grid, .bridge-grid, .doc-grid { grid-template-columns: minmax(0, 1fr); }
  .creators-grid { grid-template-areas: "copy" "terms"; gap: 48px; }
  .trip { grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 40px; }
  .trip::before, .trip::after { display: none; }
  .mstats { margin-top: 28px; }
  .photo-pool { margin-top: 40px; }
  .coin-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "figs" "roster" "panel" "chart" "info"; padding-top: 28px; }
  .coin-grid.is-error { grid-template-areas: "head" "err"; }
  .tradecol { position: static; margin-bottom: 24px; }
  .summary, .toc { position: static; }
  .toc { flex-direction: row; flex-wrap: wrap; gap: 4px 18px; border-left: 0; }
  .toc a { padding: 4px 0; border: 0; }
}
@media (max-width: 720px) {
  .chart-panel .panel-h { flex-direction: column; align-items: flex-start; gap: 10px; }
  .chart-ctl { justify-content: flex-start; }
  :root { --side: 20px; --header: 58px; --section: 64px; }
  body { font-size: 16px; }
  .brand { font-size: 22px; }
  .bar .btn { height: 38px; padding: 0 12px; font-size: 14px; }
  .menu summary { height: 38px; }
  .actions .btn:not(.primary) { display: none; }
  .lede { font-size: 17px; line-height: 27px; }
  .hero-lede { margin-top: 20px; font-size: 17px; line-height: 27px; }
  .hero .cta { margin-top: 28px; }
  .hero .cta .btn { flex: 1 1 0; }
  .doors { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 6px; margin-top: 32px; }
  .doors li { align-items: center; padding: 14px 2px 0; text-align: center; }
  .doors .clogo { width: 32px; height: 32px; margin-bottom: 4px; }
  .doors b { font-size: 13px; line-height: 17px; }
  .mgrid { --label: 124px; --own: 104px; }
  .mrow { height: 40px; }
  .expanel { margin-top: 40px; }
  .ex-head { flex-direction: column; align-items: flex-start; gap: 16px; padding: 18px; }
  .ex-figs { gap: 32px; text-align: left; }
  .ex-figs b { font-size: 22px; line-height: 30px; }
  .ex-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex-cell { padding: 16px 14px 14px; gap: 10px; }
  .ex-cell::after { left: 14px; top: 16px; }
  .ex-p { font-size: 14px; }
  .ex-note { padding: 12px 18px; }
  .calc { padding: 20px 18px 18px; }
  .calc-out b { font-size: 24px; }
  .calc-out div:last-child b { font-size: 36px; }
  .calc-fees { grid-template-columns: minmax(0, 1fr); }
  .ex-flow { padding: 22px 18px 26px; }
  .ex-pool { min-height: 120px; padding: 16px 28px; }
  .ex-pool-figs { gap: 24px; }
  .mstats dd { font-size: 20px; line-height: 26px; }
  .trip h3 { font-size: 26px; line-height: 30px; }
  .mgrid.shared { --pr: 64px; }
  .node { gap: 8px; font-size: 14px; }
  .node .clogo { width: 24px; height: 24px; }
  .node .full { display: none; }
  .own { font-size: 12px; padding-left: 8px; gap: 8px; }
  .own i { width: 18px; height: 18px; }
  .one { width: 128px; right: calc(var(--pr) - 64px); }
  .one b { width: 76px; height: 76px; font-size: 14px; }
  .model figcaption { flex-direction: column; gap: 2px; }
  .facts { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 48px; }
  .h2 { font-size: 26px; line-height: 32px; }
  .seg { width: 100%; }
  .seg button { flex: 1; }
  .photo-pool img { aspect-ratio: 3 / 2; }
  .closing { aspect-ratio: 4 / 5; }
  .closing .display-2 { font-size: 31px; }
  .closing-in { padding-top: 44px; padding-bottom: 40px; }
  .closing .cta { margin-top: 24px; }
  .closing .cta .btn { flex: 1 1 0; }
  .foot-in { grid-template-columns: minmax(0, 1fr); }
  .page-head { padding: 36px 0 28px; }
  .coin-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .pricebox { text-align: left; }
  .price { font-size: 30px; line-height: 36px; }
  .ident h1 { font-size: 26px; line-height: 32px; }
  .avatar { width: 52px; height: 52px; }
  .figs .fig { flex: 1 1 40%; padding-left: 0; }
  .figs .fig + .fig { border-left: 0; }
  .cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-two { grid-template-columns: minmax(0, 1fr); }
  .trow { grid-template-columns: 40px minmax(0, 1fr) 1fr 1fr 44px; gap: 8px; font-size: 13px; }
  .trow > :nth-child(5) { display: none; }
  .tchain .cname { display: none; }
  .kline { height: 320px; }
  .panel .body, .tradepanel { padding: 18px; }
  .panel-h { padding: 12px 18px; }
  .chart-foot { padding: 10px 18px 12px; }
  .doc .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-art { animation: none !important; }
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; }
}

/* ================================================================== the app: app, coin, launch, bridge
   One compact shell (wordmark, nav, coin search, wallet) over GMGN-dense data surfaces: short rows, chips,
   numbers in Plex Mono, details on demand. The same ivory and the same tokens as the landing. */
body.app { display: flex; flex-direction: column; min-height: 100vh; font-size: 15px; line-height: 1.5; }
body.app > main { flex: 1 0 auto; width: 100%; }
.app-w { max-width: 1600px; margin: 0 auto; padding: 0 20px; }

/* shell */
.abar { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--seam); }
.abar-in { display: flex; align-items: center; gap: 20px; height: 56px; }
.abar .brand { font-size: 22px; }
.anav { display: flex; gap: 2px; font: 500 14px/20px var(--sans); }
.anav a { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--r-ctl); white-space: nowrap; transition: background-color .16s var(--ease), color .16s var(--ease); }
.anav a:hover { background: var(--stone); }
.anav a[aria-current] { background: var(--ink); color: var(--surface); }
.qbox { position: relative; flex: 1 1 auto; max-width: 460px; margin-left: auto; }
.qbox > svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.qbox input { width: 100%; height: 36px; padding: 0 36px 0 34px; border: 1px solid var(--edge); border-radius: var(--r-ctl); background: var(--surface); font-size: 14px; outline: none; transition: border-color .16s var(--ease), box-shadow .16s var(--ease); }
.qbox input:hover { border-color: var(--ink); }
.qbox input:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.qbox input::placeholder { color: var(--ink); opacity: .5; }
.qbox input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
.qkey { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--seam); border-radius: 3px; background: var(--bg); font: 500 12px/1 var(--mono); pointer-events: none; }
.qbox input:focus ~ .qkey, .qbox input:not(:placeholder-shown) ~ .qkey { display: none; }
.qlist { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 50; max-height: 360px; overflow-y: auto; padding: 4px; background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r-panel); }
.qitem { display: grid; grid-template-columns: 24px auto minmax(0, 1fr) auto; align-items: center; gap: 10px; height: 40px; padding: 0 8px; border-radius: var(--r-ctl); font-size: 14px; }
.qitem:hover, .qitem[aria-selected="true"] { background: var(--stone); }
.qitem .qname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qitem .mono { font-size: 13px; }
.qnote { padding: 10px; font-size: 14px; }
.abar #wallet { height: 36px; padding: 0 14px; font-size: 14px; }
.afoot { margin-top: 8px; border-top: 1px solid var(--seam); }
.afoot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; min-height: 56px; padding-top: 10px; padding-bottom: 10px; }
.afoot .brand { font-size: 18px; }
.afoot nav { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; }
.afoot nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* coin pictures and small controls */
.tlogo, .qlogo { width: 28px; height: 28px; flex: none; border-radius: 50%; object-fit: cover; background: var(--stone); border: 1px solid var(--seam); }
.qlogo { width: 24px; height: 24px; }
.tlogo.blank, .qlogo.blank { display: grid; place-items: center; font: 600 13px/1 var(--sans); }
.seg.sm { padding: 2px; }
.seg.sm button { height: 28px; padding: 0 10px; font-size: 13px; }
.btn.sm { height: 32px; font-size: 13px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border: 1px solid var(--seam); border-radius: var(--r-ctl); background: var(--surface); font-size: 13px; white-space: nowrap; }
.chip b { font: 500 13px/1 var(--mono); }
.marks.sm { gap: 4px; }
.marks.sm .clogo { width: 18px; height: 18px; }
.clogo.idle { opacity: .45; }

/* app home: stats strip, coin board, live trades */
.mstats { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 14px; }
.views { display: none; }
.market { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; align-items: start; padding: 14px 0 32px; }
.board, .feed { min-width: 0; background: var(--surface); border: 1px solid var(--seam); border-radius: var(--r-panel); }
.btools { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; padding: 0 12px; border-bottom: 1px solid var(--seam); }
.bcols { --cols: 22px minmax(150px, 2.4fr) 44px minmax(84px, 1fr) minmax(60px, .8fr) minmax(70px, 1fr) minmax(70px, 1fr) minmax(70px, 1fr) minmax(52px, .7fr) 130px; display: grid; grid-template-columns: var(--cols); column-gap: 12px; align-items: center; padding: 0 12px; }
.bhead { height: 34px; border-bottom: 1px solid var(--seam); font-size: 12px; line-height: 16px; font-weight: 500; }
.bhead > span { text-align: right; white-space: nowrap; }
.bhead > .c-rank, .bhead > .c-coin, .bhead > .c-chains { text-align: left; }
.bhead button { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0; border: 0; border-bottom: 1px solid transparent; background: none; font: inherit; cursor: pointer; }
.bhead button:hover { border-bottom-color: var(--ink); }
.bhead button::after { content: ''; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--seam); }
.bhead [aria-sort="descending"] button::after { border-top-color: var(--ink); }
.bhead [aria-sort="ascending"] button::after { border-top: 0; border-bottom: 5px solid var(--ink); }
.bhead [aria-sort] button { font-weight: 600; }
.brow { min-height: 50px; border-bottom: 1px solid var(--stone); font-size: 13px; transition: background-color .12s var(--ease); }
.brow:hover { background: var(--bg); }
.brows .brow:last-child { border-bottom: 0; }
.brow > .num { text-align: right; font: 400 13px/18px var(--mono); white-space: nowrap; }
.brow > .c-rank { text-align: left; font-size: 12px; }
.brow > .c-mcap { font-weight: 500; }
.c-coin { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ct { display: flex; flex-direction: column; min-width: 0; }
.ct b { font: 600 14px/18px var(--sans); }
.ct span { overflow: hidden; font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
.c-tx b { display: block; font-weight: 400; }
.c-tx small { display: block; font-size: 11px; line-height: 14px; }
.c-chains { display: flex; min-width: 0; }
.c-sub { display: none; }
.bstate { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 16px; text-align: center; font-size: 14px; }
.bstate b { font: 600 15px/22px var(--sans); }
.skels { display: block; padding: 0; }
.skel { display: block; height: 50px; border-bottom: 1px solid var(--stone); }
.skel::before { content: ''; display: block; width: 36%; height: 14px; margin: 18px 12px; border-radius: 3px; background: var(--stone); }
.skel:nth-child(odd)::before { width: 52%; }
.feed { position: sticky; top: 70px; display: flex; flex-direction: column; max-height: calc(100vh - 84px); overflow: hidden; }
.feed-h { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 12px; border-bottom: 1px solid var(--seam); }
.feed-h h2 { font: 600 14px/20px var(--sans); white-space: nowrap; }
.feed-h .seg { margin-left: auto; }
.lstate { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; }
.live { width: 7px; height: 7px; border-radius: 50%; background: var(--buy); }
.live.off { background: var(--sell); }
.fcols { --fside: 30px; --fage: 32px; display: grid; grid-template-columns: 18px var(--fside) minmax(0, 1fr) 62px 50px var(--fage); column-gap: 8px; align-items: center; padding: 0 12px; }
.fhead { height: 28px; border-bottom: 1px solid var(--seam); font-size: 11px; line-height: 14px; font-weight: 500; }
.fhead > :nth-child(n+4), .frow > :nth-child(n+4) { text-align: right; }
.flist { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
.frow { height: 32px; border-bottom: 1px solid var(--stone); font-size: 13px; }
.frow .clogo { width: 18px; height: 18px; }
.frow .num { font: 400 12.5px/1 var(--mono); white-space: nowrap; }
.fside { font-size: 12px; font-weight: 600; }
.fsym { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.fsym:hover, .ftime:hover { text-decoration: underline; text-underline-offset: 3px; }
.frow.fresh { animation: fresh 1.8s var(--ease); }
@keyframes fresh { from { background: var(--water); } to { background: var(--surface); } }
.fstate { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 32px 12px; text-align: center; font-size: 14px; }
.fstate .loading-bar { margin: 8px auto 0; }
@media (prefers-reduced-motion: no-preference) {
  .live:not(.off), .skel::before { animation: pulse 1.6s ease-in-out infinite; }
}

/* coin page inside the app */
.app .coin-grid { grid-template-columns: minmax(0, 1fr) 360px; column-gap: 14px; padding: 16px 0 24px; }
.app .coin-head { align-items: center; padding-bottom: 12px; }
.app .ident { gap: 12px; }
.app .avatar { width: 44px; height: 44px; }
.app .ident h1 { font-size: 22px; line-height: 28px; }
.app .ident-sub { margin-top: 0; gap: 2px 12px; font-size: 13px; line-height: 18px; }
.app .price-label { font-size: 12px; line-height: 16px; }
.app .price { margin-top: 0; font: 500 28px/34px var(--mono); letter-spacing: -.02em; }
.app .change { margin-top: 0; font-size: 13px; line-height: 18px; }
.app .figs { background: var(--surface); border: 1px solid var(--seam); border-radius: var(--r-panel); }
.app .figs .fig { padding: 8px 14px; }
.app .figs .fig:first-child { padding-left: 14px; }
.app .figs small { font-size: 12px; line-height: 16px; }
.app .figs b { font: 500 15px/22px var(--mono); }
.app .roster-panel { padding: 14px 0 12px; }
.app .roster-panel .label { margin-bottom: 8px; font-size: 13px; line-height: 18px; }
.app .cells { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.app .cell { padding: 8px 10px 9px; font-size: 12px; line-height: 16px; }
.app .cell-h { flex-direction: row; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 13px; }
.app .cell-h .clogo { width: 20px; height: 20px; }
.app .cell .sync { margin-bottom: 4px; }
.app .cell .k { margin-top: 2px; }
.app .cell b { font: 500 13px/18px var(--mono); }
.app .cell .note { margin-top: 3px; }
.app .cell.sel::before { left: 10px; right: 10px; height: 2px; }
.app .chart-panel .panel-h { min-height: 46px; padding: 6px 12px; }
.app .chart-panel .panel-h h2 { font-size: 14px; }
.app .ranges { padding: 2px; }
.app .ranges button { height: 26px; padding: 0 8px; font-size: 12px; }
.app .kline { height: 440px; }
.app .chart-foot { padding: 8px 12px; font-size: 12px; line-height: 18px; }
.app .info { margin-top: 14px; background: var(--surface); border: 1px solid var(--seam); border-radius: var(--r-panel); }
.app .itabs { padding: 0 12px; }
.app .itabs button { height: 40px; padding: 0 12px; font-size: 14px; }
.app .itabs button:first-child { padding-left: 0; }
.app .info-body { padding: 0 12px 4px; }
.app .trow { grid-template-columns: 44px minmax(0, 1.4fr) 1fr 1fr 52px 44px; gap: 10px; height: 34px; font-size: 13px; border-bottom-color: var(--stone); }
.app .trow > .num { font-family: var(--mono); font-size: 12.5px; }
.app .trow.h { height: 30px; font-size: 12px; border-bottom-color: var(--seam); }
.app .trades > :last-child, .app .crow:last-child { border-bottom: 0; }
.app .tchain .clogo { width: 18px; height: 18px; }
.app .crow { min-height: 44px; font-size: 14px; border-bottom-color: var(--stone); }
.app .info .kv { padding: 8px 0; font-size: 13px; }
.app .empty-line { padding: 20px 0; font-size: 14px; }
.app .tradecol { top: 70px; }
.app .tradepanel { padding: 14px; }
.app .ttabs { padding: 3px; }
.app .ttabs button { height: 36px; font-size: 14px; }
.app .panel.tradepanel .body { padding: 14px 0 0; }
.app .route { margin-bottom: 14px; padding-bottom: 12px; }
.app .route .flabel { margin-bottom: 6px; }
.app .route-pick button { width: 32px; height: 32px; }
.app .route-pick button .clogo { width: 26px; height: 26px; }
.app .route-name { font-size: 14px; }
.app .amount input { height: 46px; font: 500 18px/1 var(--mono); }
.app .quick button { height: 30px; font-size: 13px; }
.app .tradepanel .kv { padding: 7px 0; font-size: 13px; }
.app .tradepanel .kv b { font-family: var(--mono); font-weight: 500; }
.app .slip button { height: 24px; padding: 0 8px; font-size: 12px; }
.app .trade-act { margin-top: 12px; height: 44px; font-size: 15px; }
.app .quote-note, .app .support { font-size: 12px; line-height: 18px; }
.app .slow { margin-top: 14px; padding-top: 12px; }
.app .slow .hint { font-size: 13px; line-height: 19px; }
.app .move-open { margin-top: 14px; padding-top: 12px; font-size: 13px; }

/* launch and transfer inside the app */
.app .page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; padding: 22px 0 16px; }
.app .page-title { font-size: 38px; }
.app .page-head .lede { margin-top: 6px; font-size: 15px; line-height: 22px; }
.app .stepper { width: 100%; max-width: 380px; margin: 0; }
.app .stepper li { padding-top: 8px; font-size: 13px; }
.app .launch-grid, .app .bridge-grid { gap: 14px; padding-bottom: 32px; }
.app .form .panel + .panel { margin-top: 12px; }
.app .panel-h { min-height: 48px; padding: 8px 18px; }
.app .panel-h h2, .app .panel-h h3 { font-size: 15px; }
.app .panel .body { padding: 18px; }
.app .field { gap: 6px; margin-bottom: 16px; }
.app .field > label, .app .flabel { font-size: 13px; }
.app .field input, .app .field select, .app .field textarea { height: 40px; font-size: 15px; }
.app .summary { top: 70px; }
.app .summary .panel-h { padding: 14px 18px; }
.app .sum-sym { font-size: 24px; line-height: 30px; }
.app .kv { padding: 8px 0; font-size: 13px; }
.app .legs-note, .app .hint { font-size: 13px; line-height: 19px; }

/* launch: the supply split */
.split-why { margin-bottom: 12px; font-size: 14px; line-height: 21px; }
.splits { border-top: 1px solid var(--seam); }
.srow { display: grid; grid-template-columns: minmax(150px, 200px) minmax(0, 1fr) 84px 52px; align-items: center; gap: 16px; min-height: 48px; padding: 4px 0; border-bottom: 1px solid var(--stone); }
.sname { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; }
.sname .clogo { width: 22px; height: 22px; }
.hometag { padding: 0 6px; border: 1px solid var(--gold); border-radius: 3px; font: 500 12px/18px var(--sans); }
.sbar { --p: 0; position: relative; display: flex; align-items: center; min-width: 0; height: 28px; }
.sbar::before { content: ''; position: absolute; left: 0; right: 0; top: 12px; height: 4px; border-radius: 2px; background: var(--stone); border: 1px solid var(--seam); }
.sfill { position: absolute; left: 0; top: 12px; width: calc(var(--p) * (100% - 16px) + 8px); height: 4px; border-radius: 2px; background: var(--accent); pointer-events: none; }
.sl { position: relative; z-index: 1; width: 100%; height: 28px; margin: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.sl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sl::-webkit-slider-runnable-track { height: 4px; background: none; }
.sl::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -6px; border: 2px solid var(--accent); border-radius: 50%; background: var(--surface); -webkit-appearance: none; }
.sl::-moz-range-track { height: 4px; background: none; }
.sl::-moz-range-thumb { width: 12px; height: 12px; border: 2px solid var(--accent); border-radius: 50%; background: var(--surface); }
.sl:hover::-webkit-slider-thumb { background: var(--stone); }
.sl:disabled { cursor: not-allowed; }
.sl:disabled::-webkit-slider-thumb { border-color: var(--edge); }
.spct { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: 14px; }
.spct input { width: 58px; height: 32px; padding: 0 8px; border: 1px solid var(--edge); border-radius: var(--r-ctl); background: var(--surface); text-align: right; font: 500 14px/1 var(--mono); outline: none; -moz-appearance: textfield; appearance: textfield; }
.spct input::-webkit-inner-spin-button, .spct input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.spct input:hover { border-color: var(--ink); }
.spct input:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.spct input:disabled { background: var(--bg); border-color: var(--seam); }
.scoins { text-align: right; font: 400 13px/18px var(--mono); white-space: nowrap; }
.srow.off .sname-l, .srow.off .snote { opacity: .55; }
.snote { font-size: 13px; }
.stotal { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 10px; font-size: 14px; }
.stotal b { font: 500 14px/20px var(--mono); }
.split-hint { margin-top: 4px; }
.spick { width: 16px; height: 16px; flex: none; margin: 0; accent-color: var(--accent); cursor: pointer; }
.spick:disabled { cursor: not-allowed; }
.spick-gap { width: 16px; flex: none; }
.sname-l { display: inline-flex; align-items: center; gap: 8px; min-width: 0; cursor: pointer; }
.srow.dead .sname-l { cursor: default; }

/* launch: coin image, description, links */
.logo-pick { display: flex; align-items: center; gap: 16px; }
.logo-drop { position: relative; display: grid; place-items: center; width: 88px; height: 88px; flex: none; padding: 10px; border: 1px dashed var(--edge); border-radius: 50%; background: var(--stone); color: var(--ink); font: 500 13px/17px var(--sans); text-align: center; cursor: pointer; overflow: hidden; transition: border-color .16s var(--ease), box-shadow .16s var(--ease); }
.logo-drop:hover { border-color: var(--ink); }
.logo-drop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.logo-drop.drag { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.logo-drop:has(img:not([hidden])) { border-style: solid; border-color: var(--seam); }
.logo-drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.logo-side { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.btn.sm { height: 32px; padding: 0 12px; font-size: 14px; }
.sublabel { font-size: 13px; line-height: 18px; font-weight: 500; }
.field > .sublabel { font-weight: 500; }
.logo-pick + .sublabel { margin-top: 6px; }
.field textarea { height: auto; min-height: 88px; padding: 10px 12px; line-height: 22px; resize: vertical; }
.field textarea:hover { border-color: var(--ink); }
.field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.field textarea::placeholder { color: var(--ink); opacity: .45; }
.form-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; margin-top: 8px; }
.form-three .field { margin-bottom: 0; gap: 6px; }
.summary .sum-h { display: flex; justify-content: flex-start; align-items: center; gap: 14px; }
.sum-logo { width: 48px; height: 48px; flex: none; border-radius: 50%; object-fit: cover; border: 1px solid var(--seam); background: var(--stone); }

/* coin page: description and links */
.ident:has(.coin-desc:not([hidden])) { align-items: flex-start; }
.coin-desc { max-width: 64ch; margin-top: 8px; font-size: 14px; line-height: 21px; overflow-wrap: anywhere; white-space: pre-line; }
.coin-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: 14px; line-height: 20px; }
.coin-links a { color: var(--accent); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.coin-links a:hover { color: var(--accent-deep); }
@media (max-width: 720px) {
  .form-three { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
.sum-split .kv { align-items: center; }
.sum-split .kv b { font-family: var(--mono); font-weight: 500; }

/* app responsive */
@media (max-width: 1320px) {
  .market { grid-template-columns: minmax(0, 1fr) 320px; }
  .bcols { --cols: 22px minmax(150px, 2.4fr) 44px minmax(84px, 1fr) minmax(60px, .8fr) minmax(70px, 1fr) minmax(70px, 1fr) minmax(52px, .7fr) 130px; }
  .bcols > .c-liq { display: none; }
}
@media (max-width: 1200px) {
  .views { display: flex; gap: 2px; margin-top: 14px; border-bottom: 1px solid var(--seam); }
  .views button { height: 38px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; cursor: pointer; font-size: 14px; font-weight: 500; }
  .views button[aria-selected="true"] { border-bottom-color: var(--ink); font-weight: 600; }
  .market { grid-template-columns: minmax(0, 1fr); }
  .market[data-view="coins"] .feed, .market[data-view="trades"] .board { display: none; }
  .feed { position: static; max-height: none; }
  .bcols { --cols: 22px minmax(150px, 2.4fr) 44px minmax(84px, 1fr) minmax(60px, .8fr) minmax(70px, 1fr) minmax(70px, 1fr) minmax(70px, 1fr) minmax(52px, .7fr) 130px; }
  .bcols > .c-liq { display: block; }
}
@media (max-width: 960px) {
  .bcols { --cols: minmax(150px, 2.4fr) minmax(84px, 1fr) minmax(60px, .8fr) minmax(70px, 1fr) minmax(70px, 1fr) 130px; }
  .bcols > .c-rank, .bcols > .c-liq, .bcols > .c-age, .bcols > .c-tx { display: none; }
}
@media (max-width: 900px) {
  .app .coin-grid { grid-template-columns: minmax(0, 1fr); }
  .app .tradecol { margin-bottom: 14px; }
}
@media (max-width: 720px) {
  .app-w { padding: 0 16px; }
  .abar { position: static; }
  .abar-in { flex-wrap: wrap; gap: 10px 12px; height: auto; padding-top: 10px; padding-bottom: 10px; }
  .anav { margin-left: auto; }
  .anav a { padding: 0 10px; }
  .qbox { flex: 1 1 160px; max-width: none; margin-left: 0; }
  .qbox input { font-size: 16px; }
  .qkey { display: none; }
  .mstats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .bhead { display: none; }
  .bcols { --cols: minmax(0, 1fr) auto; }
  .brow { grid-template-areas: "coin mcap" "sub chg"; row-gap: 2px; min-height: 0; padding-top: 8px; padding-bottom: 8px; }
  .brow > .c-rank, .brow > .c-age, .brow > .c-price, .brow > .c-liq, .brow > .c-vol, .brow > .c-tx, .brow > .c-chains { display: none; }
  .brow > .c-coin { grid-area: coin; }
  .brow > .c-mcap { grid-area: mcap; font-size: 14px; font-weight: 600; }
  .brow > .c-chg { grid-area: chg; }
  .c-sub { grid-area: sub; display: flex; align-items: center; gap: 10px; min-width: 0; padding-left: 38px; font-size: 12px; line-height: 18px; white-space: nowrap; overflow: hidden; }
  .c-sub b { font-weight: 500; }
  .btools { padding: 8px 12px; }
  .btools-launch { display: none; }
  #tabs button { flex: 1 1 auto; padding: 0 8px; white-space: nowrap; }
  .panel-h .seg { width: auto; flex: none; }
  .panel-h .seg button { flex: none; }
  .feed-h { flex-wrap: wrap; padding: 8px 12px; }
  .feed-h .seg { width: auto; }
  .feed-h .seg button { flex: none; }
  .app .coin-head { align-items: flex-start; }
  .app .price { font-size: 24px; line-height: 30px; }
  .app .kline { height: 320px; }
  .app .trow { grid-template-columns: 40px minmax(0, 1fr) 1fr 1fr 40px; gap: 8px; }
  .app .page-title { font-size: 32px; }
  .app .field input, .app .field select, .app .field textarea, .spct input { font-size: 16px; }
  .srow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name pct" "bar coins"; gap: 2px 12px; padding: 8px 0; }
  .srow > .sname { grid-area: name; }
  .srow > .sbar, .srow > .snote { grid-area: bar; }
  .srow > .spct { grid-area: pct; }
  .srow > .scoins { grid-area: coins; }
}

/* coin page: holders. The protocol's own rows (pool, reserve, pot) carry a gold tag, not a whale's weight. */
.app .hrow { display: grid; grid-template-columns: 28px minmax(0, 1fr) 68px 92px; gap: 10px; align-items: center; min-height: 34px; padding: 4px 0; border-bottom: 1px solid var(--stone); font-size: 13px; line-height: 18px; }
.app .hrow > :nth-child(n+3) { text-align: right; }
.app .hrow > .num { font-family: var(--mono); font-size: 12.5px; }
.app .hrow.h { min-height: 30px; border-bottom-color: var(--seam); font-size: 12px; font-weight: 500; }
.hwho { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.hwho .mono { font-size: 12.5px; }
.htag { padding: 0 6px; border: 1px solid var(--gold); border-radius: 3px; font: 500 12px/18px var(--sans); white-space: nowrap; }
.hnote { padding: 10px 0 8px; font-size: 12px; line-height: 18px; }
.holders .empty-line .loading-bar { margin: 10px 0 0; }

/* ================================================================== languages
   The switcher: a globe, the language in its own name (a short form on a narrow app bar) and the native select laid
   invisibly on top, so the list is the platform's own picker. A page in another language stays hidden until
   i18n.js has swapped its text (src/i18n-boot.js adds .i18n-wait), and shows after 1.5s whatever happens. */
.i18n-wait body { visibility: hidden; animation: i18n-show 0s 1.5s forwards; }
@keyframes i18n-show { to { visibility: visible; } }
.lang { position: relative; display: inline-flex; flex: none; align-items: center; gap: 7px; height: 40px; padding: 0 28px 0 11px; border: 1px solid var(--edge); border-radius: var(--r-ctl); background: var(--surface); font: 500 14px/20px var(--sans); white-space: nowrap; cursor: pointer; transition: background-color .16s var(--ease), border-color .16s var(--ease); }
.lang::after { content: ''; position: absolute; right: 11px; top: 50%; margin-top: -2px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--ink); pointer-events: none; }
.lang:hover { background: var(--stone); border-color: var(--ink); }
.lang:has(select:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.lang select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; font-size: 16px; cursor: pointer; }
.lang-ico { flex: none; }
.lang-code { display: none; }
.menu-panel .menu-lang { display: flex; height: 44px; margin-top: 6px; padding-left: 12px; font-size: 15px; }
.abar .lang { height: 36px; }
/* longer words: the live tape's side and age columns, a chain name with its Home tag, a panel title with its presets */
:root:lang(ru) .fcols { --fside: 54px; }
:root:lang(de) .fcols { --fside: 46px; --fage: 40px; }
:root:lang(fr) .fcols { --fside: 38px; --fage: 40px; }
:root:lang(zh) .fcols { --fage: 42px; }
:root:lang(ru) .app .trow { grid-template-columns: 62px minmax(0, 1.4fr) 1fr 1fr 52px 62px; }
:root:lang(de) .app .trow { grid-template-columns: 52px minmax(0, 1.4fr) 1fr 1fr 52px 54px; }
@media (max-width: 720px) {
  :root:lang(ru) .app .trow { grid-template-columns: 62px minmax(0, 1fr) 1fr 1fr 62px; }
  :root:lang(de) .app .trow { grid-template-columns: 52px minmax(0, 1fr) 1fr 1fr 54px; }
}
.sname { flex-wrap: wrap; row-gap: 2px; }
.app .panel-h { flex-wrap: wrap; }
@media (max-width: 1024px) {
  .actions .lang { display: none; }
}
@media (max-width: 720px) {
  .bar-in { gap: 12px; }
}
@media (max-width: 720px) {
  .abar .lang { order: 1; height: 32px; gap: 5px; padding: 0 22px 0 8px; font-size: 13px; }
  .abar .lang::after { right: 8px; }
  .abar .lang-name { display: none; }
  .abar .lang-code { display: inline; }
  .abar .qbox, .abar #wallet { order: 2; }
}

/* Chinese, Japanese and Korean: no webfont; Plex sets the Latin letters and the figures, the platform's CJK face the
   rest. Headings use the platform's serif to sit with Cormorant. CJK glyphs fill the em box, so the display sizes get
   air between lines and no negative tracking. */
:root:lang(zh) {
  --sans: 'IBM Plex Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', system-ui, sans-serif;
  --display: 'Cormorant Garamond', 'Songti SC', 'Noto Serif SC', 'Noto Serif CJK SC', 'SimSun', serif;
  --mono: 'IBM Plex Mono', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', ui-monospace, monospace;
}
:root:lang(ja) {
  --sans: 'IBM Plex Sans', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'YuGothic', 'Meiryo', 'Noto Sans JP', 'Noto Sans CJK JP', system-ui, sans-serif;
  --display: 'Cormorant Garamond', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', 'Noto Serif JP', 'Noto Serif CJK JP', serif;
  --mono: 'IBM Plex Mono', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', ui-monospace, monospace;
}
:root:lang(ko) {
  --sans: 'IBM Plex Sans', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', 'Noto Sans CJK KR', system-ui, sans-serif;
  --display: 'Cormorant Garamond', 'AppleMyungjo', 'Nanum Myeongjo', 'Noto Serif KR', 'Noto Serif CJK KR', 'Batang', serif;
  --mono: 'IBM Plex Mono', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', ui-monospace, monospace;
}
:root:lang(ko) body { word-break: keep-all; overflow-wrap: anywhere; }
:root:is(:lang(zh), :lang(ja), :lang(ko)) :is(.display-1, .display-2, .page-title, .h2) { letter-spacing: 0; line-height: 1.2; }