/* 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); }
.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 image (site/img/hero-courtyard-blend*.webp) has its left, top and bottom edges feathered into the page
   ivory in the pixels. It is anchored right and never taller than ~89% of the stage, so its faded edges always meet
   the page and the colonnade stays to the right of the type. Text and controls sit on the page, not on the image. */
.hero { --stage: clamp(580px, calc(100svh - var(--header)), 860px); position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
.hero-art { position: absolute; z-index: 0; top: 50%; right: 0; width: min(84vw, calc(var(--stage) * 1.58)); aspect-ratio: 1672 / 941; transform: translateY(-50%); }
.hero-art img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 100% 55%; }
.hero-in { position: relative; z-index: 1; display: flex; align-items: center; width: 100%; min-height: var(--stage); padding-top: 40px; padding-bottom: 48px; }
.hero-copy { min-width: 0; }
.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 img { animation-play-state: paused; }
@media (prefers-reduced-motion: no-preference) {
  .hero-art img { animation: breathe 56s ease-in-out infinite alternate; }
}
@keyframes breathe { from { transform: scale(1); } to { transform: 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 { display: block; width: 22px; height: 22px; border: 1px solid var(--gold); border-radius: 50%; background: var(--surface); }
/* 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; }
.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; }

.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 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%; } }

/* creators */
.creators-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); grid-template-areas: "copy terms"; gap: 48px 88px; align-items: end; }
.creators-copy { grid-area: copy; }
.creators-copy .lede { margin-top: 22px; }
.share { display: flex; align-items: flex-end; gap: 20px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--gold); }
.share .big { font: 600 136px/.82 var(--sans); letter-spacing: -.045em; font-variant-numeric: lining-nums; }
.share .of { padding-bottom: 4px; font: 500 17px/25px var(--sans); }
.example { margin-top: 28px; font-size: 16px; line-height: 25px; }
.terms { grid-area: terms; border-top: 1px solid var(--ink); }
.terms > div { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 24px; padding: 15px 0; border-bottom: 1px solid var(--seam); }
.terms dt { font-weight: 600; font-size: 15px; line-height: 23px; }
.terms dd { font-size: 15px; line-height: 23px; }

/* technical details */
.tech-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 72px; align-items: start; }
.tech-grid .lede { margin-top: 16px; font-size: 16px; line-height: 25px; }
.doc-links { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; font-size: 15px; }
.spec { border-top: 1px solid var(--ink); }
.spec > div { display: grid; grid-template-columns: 136px minmax(0, 1fr) auto; gap: 24px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--seam); }
.spec dt { font-weight: 600; font-size: 15px; line-height: 23px; }
.spec dd { font-size: 15px; line-height: 23px; }
.spec dd + dd { font-size: 14px; white-space: nowrap; }

/* 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; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1180px) {
  :root { --side: 24px; }
  .nav { gap: 22px; }
  .bar-in { gap: 28px; }
  .mgrid { --own: 140px; }
  .hero-art { width: min(76vw, calc(var(--stage) * 1.58)); }
  .hero-lede, .doors { max-width: 430px; }
  .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, .tech-grid { gap: 48px; }
  .spec > div { grid-template-columns: 120px minmax(0, 1fr); }
  .spec dd + dd { grid-column: 2; }
}
@media (max-width: 900px) {
  :root { --section: 72px; }
  .hero { --stage: auto; }
  .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; top: auto; right: auto; width: 100%; aspect-ratio: 4 / 3; max-height: 560px; transform: none; }
  .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, .tech-grid, .launch-grid, .bridge-grid, .doc-grid { grid-template-columns: minmax(0, 1fr); }
  .creators-grid { grid-template-areas: "copy" "terms"; gap: 48px; }
  .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; }
  .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; }
  .share .big { font-size: 104px; }
  .terms > div, .spec > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .spec dd + dd { grid-column: auto; }
  .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 img { 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; }