/* Ordo: the logo sets the look. A Roman mosaic: travertine ground, black tesserae, and one ultramarine tile, its eye.
   So the page is stone and ink, and ultramarine is kept for the one thing you press (Buy, Sell, Confirm, Sign in) and
   the eye. Green and red mean gains and losses only; Bitcoin keeps its own orange, as every trader knows it.
   Type: Inter for every word and number in the app, figures of even width so prices don't jitter, as trading screens
   are set. Cinzel's Roman capitals only where Ordo signs its name: the wordmark, and the sign-in and exit pages' heads.
   The tesserae are the texture, as paper is Murmur's: the mosaic behind the sign-in and the exit page, and small laid
   tiles where a point is made (a rune's stone, an account's face, a bullet), never behind a number. Nero (dark) by
   default; travertine (light) when picked or when the device is light. The structure is Murmur's: a rail, the trade
   screen's three columns edge to edge, one raised sheet for what you act on. */
:root {
  --paper: #131211;
  --sheet: #1C1A18;
  --sheet-2: #282522;
  --field: rgba(237, 228, 210, .055);
  --ink: #EDE4D2;
  --ink-2: #FFF8EA;
  --soft: #B0A590;
  --faint: #7D7566;
  --line: rgba(237, 228, 210, .09);
  --line-2: rgba(237, 228, 210, .19);
  --wash: rgba(237, 228, 210, .055);
  --lapis: #4462F2;
  --lapis-2: #5A76FF;
  --on-lapis: #FFFFFF;
  --up: #6CC28E;
  --bad: #EE8573;
  --warn: #E2B062;
  --btc: #F7931A;
  --scrim: rgba(5, 4, 3, .66);
  --lift: 0 24px 56px -24px rgba(0, 0, 0, .85);
  --tile-a: #C9B597; --tile-b: #8E3B2C; --tile-c: #4C6B57; --tile-d: #B8873A; --tile-e: #3A4FB8; --tile-f: #6E6658;
  --ui: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --roman: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --paper: #ECE2CF; --sheet: #F7F1E5; --sheet-2: #E1D5BF; --field: rgba(26, 24, 22, .05);
  --ink: #1A1816; --ink-2: #33302B; --soft: #685E4F; --faint: #978B78;
  --line: #D6C9B1; --line-2: #BEB096; --wash: rgba(26, 24, 22, .05);
  --lapis: #1F3BD0; --lapis-2: #2B49E8; --on-lapis: #F7F1E5;
  --up: #2C6A45; --bad: #A33427; --warn: #8A5A12; --btc: #E8830C; --scrim: rgba(26, 24, 22, .34); --lift: 0 24px 56px -24px rgba(60, 46, 26, .42);
  --tile-a: #1A1816; --tile-b: #9A3F2D; --tile-c: #3F6450; --tile-d: #A8772C; --tile-e: #1F3BD0; --tile-f: #7A6F5E;
  color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: color-mix(in srgb, var(--ink) 22%, transparent) padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--ink) 42%, transparent); }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; }
body { margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink); font: 400 16px/1.5 var(--ui); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum', 'cv11'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
b, strong { font-weight: 600; }
h1, h2, h3, .big { font-weight: 650; letter-spacing: -.025em; }
::selection { background: var(--lapis); color: var(--on-lapis); }
:focus-visible { outline: 2px solid var(--lapis); outline-offset: 3px; border-radius: 8px; }
.soft { color: var(--soft); }
.up { color: var(--up); }
.down, .bad { color: var(--bad); }
.warn { color: var(--warn); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#root { position: relative; z-index: 1; }
kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--faint); font: 600 12px/1 var(--ui); }

/* ---------- the mark, the wordmark and the inscriptions ---------- */
/* The profile drawn in the text colour from its silhouette; its eye one ultramarine tile, a touch turned, as laid.
   Below 40px the tile is kept at 3px so it still shows. */
.logo { position: relative; display: inline-block; flex: none; width: var(--s, 28px); aspect-ratio: .9396; color: var(--ink); }
.logo::before { content: ''; position: absolute; inset: 0; background: currentColor; -webkit-mask: url(/brand/mark.png) center / contain no-repeat; mask: url(/brand/mark.png) center / contain no-repeat; }
.logo.lg::before { -webkit-mask-image: url(/brand/mark-lg.png); mask-image: url(/brand/mark-lg.png); }
.logo::after { content: ''; position: absolute; left: 84.1%; top: 36%; width: max(3.4%, 3px); aspect-ratio: 1; border-radius: 1px; background: var(--lapis); transform: rotate(-7deg); }
.wordmark { font-family: var(--roman); font-weight: 650; font-size: 22px; letter-spacing: .16em; line-height: 1; text-decoration: none; }
.lockup { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; }
.lockup .wordmark { margin-top: 2px; }
/* Over the sign-in's card, its name cut in capitals, as over a doorway. */
.eyebrow { display: block; margin: 0 0 6px; color: var(--soft); font-family: var(--roman); font-weight: 600; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; }
/* The ultramarine tile, wherever a point is made: a bullet, the live dot. */
.tessera { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 1.5px; background: var(--lapis); transform: rotate(-7deg); }
.tessera.live { animation: set 2.4s var(--ease) infinite; }
@keyframes set { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* The mosaic behind the sign-in and the exit page (mosaic.mjs). */
#mosaic { position: fixed; inset: 0; z-index: 0; width: 100vw; height: 100vh; pointer-events: none; }
#mosaic[hidden] { display: none; }

/* A rune: its symbol on a tile in one of the mosaic's stones, chosen by its id. Bitcoin's in its own orange. */
.rune { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--tile, var(--sheet-2)); color: #F7F1E5; font-weight: 700; font-size: 17px; line-height: 1; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 -2px 0 rgba(0, 0, 0, .18); }
.rune.lg { width: 48px; height: 48px; border-radius: 14px; font-size: 25px; }
.rune.sm { width: 22px; height: 22px; border-radius: 7px; font-size: 12px; }
.rune[data-t="0"] { --tile: var(--tile-a); color: var(--paper); }
.rune[data-t="1"] { --tile: var(--tile-b); }
.rune[data-t="2"] { --tile: var(--tile-c); }
.rune[data-t="3"] { --tile: var(--tile-d); }
.rune[data-t="4"] { --tile: var(--tile-e); }
.rune[data-t="5"] { --tile: var(--tile-f); }
.rune.btc { --tile: var(--btc); color: #FFF; font-weight: 750; font-size: 17px; }
.rune.btc.sm { font-size: 13px; }
/* Two tiles for a pool: the rune's, Bitcoin's tucked under its corner. */
.pair { position: relative; display: inline-block; flex: none; width: 42px; height: 34px; }
.pair .rune:first-child { position: absolute; left: 0; top: 0; }
.pair .rune.btc { position: absolute; left: 20px; top: 13px; box-shadow: 0 0 0 2px var(--sheet); }
.m-title .pair .rune.btc { left: 14px; top: 9px; }
.m-title .pair { width: 38px; height: 32px; }
/* An account's face: nine tesserae from its key, mirrored. */
.avatar { display: inline-grid; flex: none; grid-template-columns: repeat(3, 1fr); width: var(--s, 28px); height: var(--s, 28px); padding: calc(var(--s, 28px) * .09); gap: calc(var(--s, 28px) * .05); border-radius: 28%; background: var(--sheet-2); overflow: hidden; }
.avatar i { border-radius: 18%; background: var(--sheet-2); }
.avatar i[data-t="0"] { background: var(--tile-a); }
.avatar i[data-t="1"] { background: var(--tile-b); }
.avatar i[data-t="2"] { background: var(--tile-c); }
.avatar i[data-t="3"] { background: var(--tile-d); }
.avatar i[data-t="4"] { background: var(--tile-e); }
.avatar i[data-t="5"] { background: var(--tile-f); }
.rank { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--field); color: var(--soft); font-weight: 650; font-size: 13.5px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border: 0; border-radius: 999px; background: var(--field); color: var(--soft); font-weight: 600; font-size: 12.5px; white-space: nowrap; }
button.chip:hover { color: var(--ink); background: var(--wash); box-shadow: inset 0 0 0 1px var(--line-2); }
/* A change: green or red; in the trade screen's head, on a pill of its own colour. */
.chg { font-weight: 600; font-size: 13px; white-space: nowrap; }
.chg.flat { color: var(--faint); }
.chg.lg { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border-radius: 999px; font-size: 14px; background: color-mix(in srgb, currentColor 13%, transparent); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 12px; border: 1px solid transparent; font-weight: 600; font-size: 15.5px; white-space: nowrap; text-decoration: none; transition: background-color .2s, color .2s, border-color .2s; }
.btn svg { flex: none; }
.btn.ink { background: var(--ink); color: var(--paper); }
.btn.ink:hover { background: var(--ink-2); }
.btn.lapis { background: var(--lapis); color: var(--on-lapis); }
.btn.lapis:hover { background: var(--lapis-2); }
.btn.line { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn.line:hover { border-color: var(--ink); }
.btn.sm { height: 36px; padding: 0 15px; font-size: 14.5px; }
.btn[disabled] { opacity: .5; cursor: default; }
.link-btn { padding: 0; border: 0; background: none; color: var(--ink); font-weight: 600; font-size: 14.5px; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.link-btn:hover { text-decoration-color: currentColor; }
.icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); transition: background-color .2s; }
.icon-btn:hover { background: var(--wash); }
/* What you press: the eye's ultramarine, full width. */
.cta { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-width: 0; height: 56px; margin-top: 14px; padding: 0 24px; border: 0; border-radius: 12px; background: var(--lapis); color: var(--on-lapis); font-weight: 600; font-size: 17.5px; letter-spacing: -.005em; transition: background-color .2s, transform .12s var(--ease); }
/* A rune's name is up to 26 letters and its dots: cut to the space it has, never wider than the page. */
.cta, .tx-pick h1, .row b, .cta > .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cta > .label { min-width: 0; }
.cta:hover:not([disabled]) { background: var(--lapis-2); }
.cta:active:not([disabled]) { transform: scale(.985); }
.cta.sell { background: var(--bad); color: var(--paper); }
.cta.sell:hover:not([disabled]) { background: color-mix(in srgb, var(--bad) 88%, var(--ink)); }
.cta[disabled] { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--soft); cursor: default; }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; display: inline-block; flex: none; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.seg { display: inline-flex; padding: 3px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-2); }
.seg button { height: 32px; padding: 0 16px; border: 0; border-radius: 9px; background: none; color: var(--soft); font-weight: 600; font-size: 14.5px; white-space: nowrap; transition: background-color .2s, color .2s; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.seg.wide { display: flex; }
.seg.wide button { flex: 1; height: 38px; font-size: 15.5px; }
.seg.xs { padding: 2px; }
.seg.xs button { height: 24px; padding: 0 9px; font-size: 12.5px; }
.seg.xs button[aria-pressed="true"], .seg.xs button[aria-selected="true"] { background: var(--sheet-2); color: var(--ink); }
/* Buy and Sell, as every trader reads them: the side picked in its own colour. */
.seg.bs button[aria-pressed="true"].buy { background: color-mix(in srgb, var(--up) 17%, transparent); color: var(--up); }
.seg.bs button[aria-pressed="true"].sell { background: color-mix(in srgb, var(--bad) 17%, transparent); color: var(--bad); }

/* ---------- the shell: one bar over each page, a tab bar on phones ---------- */
.test-bar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: center; gap: 8px; height: 30px; padding: 0 16px; background: var(--tile-d); color: #1A1816; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-theme="light"] .test-bar { color: #F7F1E5; }
.shell { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100vh; }
/* Solid, the frame round the floor: what's under it never shows through. */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 16px 0 20px; border-bottom: 1px solid var(--line); background: var(--paper); }
.test-bar ~ .shell .top, .test-bar ~ .top { top: 30px; }
.top > .lockup { flex: none; margin-right: 14px; }
.top-nav { display: flex; gap: 2px; }
.top-nav a { display: inline-flex; align-items: center; height: 36px; padding: 0 13px; border-radius: 10px; color: var(--soft); font-weight: 600; font-size: 14.5px; text-decoration: none; white-space: nowrap; transition: color .2s, background-color .2s; }
.top-nav a:hover { color: var(--ink); background: var(--wash); }
.top-nav a.on { color: var(--ink); background: var(--field); box-shadow: inset 0 0 0 1px var(--line); }
.me-btn { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-2); border-radius: 12px; transition: border-color .2s; }
.me-btn:hover, .me-btn.on { border-color: var(--ink); }
/* Under the bar: the runes down the left on a desktop, the page beside them. */
.frame { flex: 1; display: grid; grid-template-columns: 296px minmax(0, 1fr); align-items: start; }
.frame > .page { min-width: 0; }
.runes { position: sticky; top: 72px; display: flex; flex-direction: column; max-height: calc(100vh - 84px); margin: 12px 0 12px 12px; overflow: hidden; }
.test-bar ~ .shell .runes { top: 102px; max-height: calc(100vh - 114px); }
.tl-head { display: flex; align-items: center; gap: 4px; padding: 10px 8px 6px 10px; }
.tl-head .seg { flex: 1; }
.tl-head .seg button { flex: 1; }
.tl-cols { display: flex; justify-content: space-between; padding: 6px 18px 6px; color: var(--faint); font-size: 12px; font-weight: 500; }
.tl-rows { min-height: 0; overflow-y: auto; padding: 0 6px 8px; scrollbar-width: thin; }
.tl { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; transition: background-color .15s; }
.tl:hover { background: var(--wash); }
.tl.on { --rest: var(--field); background: var(--field); box-shadow: inset 0 0 0 1px var(--line-2); }
.tl .nm, .tl .r { display: grid; gap: 1px; min-width: 0; }
.tl .r { justify-items: end; }
.tl b { font-size: 13.5px; font-weight: 600; letter-spacing: -.005em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl small { color: var(--faint); font-size: 12px; font-weight: 500; white-space: nowrap; }
.tl .chg { font-size: 12px; }
/* A rune that just traded: its row lit in the side's colour, fading back. */
.tl.hit { animation: tl-hit 1.6s ease-out; }
.tl.hit.buy { --hit: color-mix(in srgb, var(--up) 24%, transparent); }
.tl.hit.sell { --hit: color-mix(in srgb, var(--bad) 24%, transparent); }
@keyframes tl-hit { from { background: var(--hit); } to { background: var(--rest, transparent); } }
/* Before sign-in: the lockup and the theme over the page, on the mosaic. */
.top.bare { position: relative; z-index: 2; border-bottom: 0; background: none; }
.top.bare + .gate { min-height: calc(100vh - 96px); }
/* The search: looks like a field, opens the finder. */
.find-btn { display: flex; align-items: center; gap: 10px; width: clamp(190px, 19vw, 300px); margin-left: auto; height: 40px; padding: 0 8px 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); color: var(--faint); font-size: 14.5px; text-align: left; transition: border-color .2s, color .2s; }
.find-btn span { flex: 1; }
.find-btn:hover { border-color: var(--line-2); color: var(--soft); }
.top-right { display: flex; align-items: center; gap: 10px; margin-left: 6px; }
.ticker { display: flex; align-items: center; gap: 16px; margin-right: 6px; color: var(--soft); font-size: 13px; font-weight: 500; white-space: nowrap; }
.ticker > span { display: inline-flex; align-items: center; gap: 7px; }
.ticker b { color: var(--btc); font-weight: 750; }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 13px; border-radius: 12px; border: 1px solid var(--line-2); background: transparent; color: var(--ink); font-weight: 600; font-size: 14.5px; white-space: nowrap; text-decoration: none; transition: border-color .2s; }
.pill svg { color: var(--soft); }
.pill:hover { border-color: var(--ink); }
.page { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 30px 32px 72px; }
.page.full { max-width: none; padding: 0; }
.tabbar { display: none; }
/* A page's head: its title in the app's own face, and what it's for. */
.ph { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin: 0 0 22px; }
.ph h1 { margin: 0; font-size: 30px; line-height: 1.15; }
.ph p { margin: 6px 0 0; max-width: 60ch; color: var(--soft); font-size: 15px; }
.ph-acts { display: flex; gap: 8px; }

/* ---------- Trade: slabs laid on the floor, beside the runes. The chart and its trades; the ticket and what you hold on
   the right. ---------- */
.panel { min-width: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--sheet); }
.tx { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: 12px; padding: 12px 12px 28px; }
.tx-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tx-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 20px; padding: 18px 22px 0; }
.tx-id { display: flex; align-items: center; gap: 14px; min-width: 0; max-width: 100%; }
.tx-name { min-width: 0; }
.tx-pick { display: flex; align-items: center; gap: 4px; max-width: calc(100% + 6px); margin: 0 0 0 -6px; padding: 2px 6px; border: 0; border-radius: 10px; background: none; color: var(--ink); text-align: left; }
.tx-pick:hover { background: var(--wash); }
.tx-pick svg { flex: none; color: var(--faint); }
.tx-pick h1 { margin: 0; font-size: 21px; line-height: 1.2; letter-spacing: -.02em; }
.tx-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tx-price { display: grid; justify-items: end; gap: 5px; }
.tx-price b { font-size: 28px; font-weight: 650; line-height: 1.05; letter-spacing: -.03em; }
.tx-price > span { display: flex; align-items: center; gap: 7px; }
.tx-price small { color: var(--faint); font-size: 12.5px; font-weight: 600; }
.tx-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 4px 0 0; border-top: 1px solid var(--line); }
.tx-stats > div { min-width: 0; padding: 11px 16px 12px; border-left: 1px solid var(--line); }
.tx-stats > div:first-child { padding-left: 0; border-left: 0; }
.tx-stats dt { color: var(--faint); font-size: 12px; font-weight: 500; white-space: nowrap; }
.tx-stats dd { margin: 2px 0 0; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch { padding: 10px 14px 12px 22px; border-top: 1px solid var(--line); }
.ch-bar { display: flex; align-items: center; gap: 14px; min-height: 30px; }
.ch-legend { position: absolute; z-index: 3; top: 8px; left: 2px; display: flex; gap: 12px; padding: 2px 6px 2px 0; background: color-mix(in srgb, var(--sheet) 80%, transparent); color: var(--faint); font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none; }
.ch-legend b { margin-left: 4px; font-weight: 600; }
.ch-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.ch-box { position: relative; }
.ch-plot { position: relative; height: clamp(300px, 46vh, 520px); margin: 6px 0 0; }
.ch-empty { position: absolute; inset: 0 70px 30px 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--soft); font-size: 14px; pointer-events: none; }
.ch-empty[hidden] { display: none; }
.tx-lower { padding: 12px 14px 14px; }
.tabs { display: flex; gap: 2px; margin: 0 0 6px; }
.tabs button { height: 32px; padding: 0 14px; border: 0; border-radius: 9px; background: none; color: var(--soft); font-weight: 600; font-size: 14.5px; transition: background-color .2s, color .2s; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { background: var(--field); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
/* The trades: newest first, each with a bar of its size from the right, as a book shows depth. */
.tr-head, .tr-row { display: grid; grid-template-columns: 48px 46px minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1fr) 84px; gap: 12px; align-items: center; padding: 0 10px; }
.tr-head { height: 30px; color: var(--faint); font-size: 12px; font-weight: 500; }
.tr-head span:nth-child(n + 3), .tr-row > span:nth-child(n + 3) { text-align: right; }
.tr-row { height: 36px; border-radius: 8px; font-size: 13.5px; background: linear-gradient(270deg, var(--tint) var(--w, 0%), transparent var(--w, 0%)); }
.tr-row.buy { --tint: color-mix(in srgb, var(--up) 8%, transparent); }
.tr-row.sell { --tint: color-mix(in srgb, var(--bad) 8%, transparent); }
.tr-row:hover { box-shadow: inset 0 0 0 1px var(--line); }
.tr-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-row .t { color: var(--faint); font-size: 12.5px; }
.tr-row.pending .t::after { content: ''; display: inline-block; width: 5px; height: 5px; margin-left: 5px; border-radius: 50%; background: var(--warn); vertical-align: 2px; }
.tr-row .side { font-weight: 600; }
.tr-row.buy .side, .tr-row.buy .usd { color: var(--up); }
.tr-row.sell .side, .tr-row.sell .usd { color: var(--bad); }
.tr-row .usd { font-weight: 600; }
.tr-row .amt, .tr-row .px { color: var(--soft); }
.tr-row .who { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; color: var(--faint); font-size: 12.5px; }
.tr-row .who b { color: var(--lapis-2); font-weight: 650; }
:root[data-theme="light"] .tr-row .who b { color: var(--lapis); }
.tr-empty { display: flex; align-items: center; gap: 10px; padding: 22px 10px; color: var(--soft); font-size: 14.5px; }

/* The side: the ticket on the paper, then the cards of what you hold and the pool. */
.tx-side { min-width: 0; }
.tx-side-in { position: sticky; top: 72px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.test-bar ~ .shell .tx-side-in { top: 102px; }
.tk { position: relative; padding: 16px 18px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--sheet); }
.tk-bar, .tk-grab, .tk-scrim { display: none; }
/* The ticket's rows keep their heights whatever is typed: a quote fills the amount's box, never a row of its own. */
.tk-head { display: flex; gap: 8px; }
.tk-head .seg { flex: 1; min-width: 0; }
.tk-set { display: inline-flex; align-items: center; gap: 5px; padding: 0 13px; border: 1px solid var(--line-2); border-radius: 12px; background: none; color: var(--soft); font-weight: 600; font-size: 13px; transition: color .2s, border-color .2s; }
.tk-set:hover, .tk-set[aria-expanded="true"] { color: var(--ink); border-color: var(--ink); }
.tk-pop { position: absolute; z-index: 6; top: 64px; right: 20px; width: min(290px, calc(100% - 40px)); padding: 14px 14px 12px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--sheet-2); box-shadow: var(--lift); }
.tk-pop[hidden] { display: none; }
.tk-pop b { font-size: 14.5px; }
.tk-pop p { margin: 4px 0 12px; color: var(--soft); font-size: 13px; line-height: 1.45; }
.tk-amt { display: flex; align-items: center; gap: 1px; min-height: 80px; margin: 14px 0 0; padding: 12px 18px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--field); cursor: text; transition: border-color .2s, background-color .2s; }
.tk-amt:focus-within { border-color: var(--ink); background: transparent; }
.tk-amt .tk-cur { color: var(--soft); font-weight: 650; font-size: 34px; letter-spacing: -.025em; }
.tk-amt .tk-cur:empty { display: none; }
.tk-amt input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-weight: 650; font-size: 34px; line-height: 1.15; letter-spacing: -.025em; }
.tk-amt input::placeholder { color: var(--faint); }
.tk-q { display: grid; justify-items: end; gap: 2px; flex: none; max-width: 50%; margin-left: 10px; text-align: right; white-space: nowrap; }
.tk-q b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; color: var(--ink); font-weight: 600; font-size: 15px; }
.tk-q small { color: var(--faint); font-weight: 600; font-size: 12.5px; }
.tk-q small.warn { color: var(--warn); }
.tk-q small.down { color: var(--bad); }
.tk-unit { color: var(--soft); font-weight: 600; font-size: 15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tk-bal { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 26px; margin: 10px 4px 0; font-size: 13.5px; }
.tk-have { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.tk-have b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.tk-btc { color: var(--btc); font-weight: 750; }
.tk-max { flex: none; padding: 2px 4px; border: 0; background: none; color: var(--lapis); font-weight: 700; font-size: 13.5px; }
.tk-max:hover { text-decoration: underline; }
.tk-fee { flex: none; color: var(--soft); font-weight: 600; white-space: nowrap; cursor: help; }
.tk-quick { display: flex; gap: 6px; margin: 10px 0 2px; }
.tk-quick button { flex: 1; height: 32px; border: 0; border-radius: 8px; background: var(--field); color: var(--ink); font-weight: 600; font-size: 13.5px; transition: background-color .2s, color .2s; }
.tk-quick button:hover { background: var(--ink); color: var(--paper); }
.tk-lines { margin: 14px 2px 0; }
.tk-lines:empty { display: none; }
.tk-line { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 14px; }
.tk-line span:first-child { color: var(--soft); }
.tk-line b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-why { margin: 10px 2px 0; color: var(--bad); font-size: 14px; }
.tk-why:empty, .tk-done:empty { display: none; }
.tk-done { display: flex; align-items: center; gap: 8px; margin: 12px 2px 0; font-size: 14.5px; }
.tk-done b { color: var(--up); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cards { display: grid; gap: 12px; }
.card { padding: 16px 18px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--sheet); }
.card h2 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; font-size: 15px; letter-spacing: -.01em; }
.card h2 .link-btn { font-size: 13.5px; }
.card .big { display: block; font-size: 26px; line-height: 1.15; }
.card p { margin: 4px 0 0; color: var(--soft); font-size: 14px; }
.pos { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.pos-pnl { font-weight: 650; font-size: 15px; }
.pos-pnl small { margin-left: 6px; font-weight: 600; font-size: 13px; }
.kv { display: grid; gap: 7px; margin: 12px 0 0; }
.kv > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.kv dt { color: var(--soft); }
.kv dd { margin: 0; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A share as a row of tesserae, each a little turned as a hand sets it. */
.bar, .alloc { display: grid; grid-template-columns: repeat(var(--n, 24), minmax(0, 1fr)); gap: 3px; margin: 4px 0 10px; }
.bar i, .alloc i { display: block; aspect-ratio: 1; border-radius: 2px; background: var(--sheet-2); }
.bar i:nth-child(3n+1), .alloc i:nth-child(3n+1) { transform: rotate(-4deg); }
.bar i:nth-child(4n+2), .alloc i:nth-child(4n+2) { transform: rotate(3deg) translateY(.5px); }
.bar i:nth-child(5n), .alloc i:nth-child(5n) { transform: rotate(-2deg) translateY(-.5px); }
.bar [data-t="btc"] { background: var(--btc); }
.bar [data-t="0"] { background: var(--tile-a); } .bar [data-t="1"] { background: var(--tile-b); } .bar [data-t="2"] { background: var(--tile-c); }
.bar [data-t="3"] { background: var(--tile-d); } .bar [data-t="4"] { background: var(--tile-e); } .bar [data-t="5"] { background: var(--tile-f); }
.bar-key { display: flex; justify-content: space-between; color: var(--soft); font-size: 13px; }
.bar-key b { color: var(--ink); font-weight: 600; }

/* ---------- pages in a column: Portfolio, Pools, Leaders, Account ---------- */
.strip { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 44px; margin: 0 0 20px; }
.strip .big { display: block; font-size: 52px; line-height: 1.02; }
.strip small { display: block; margin-bottom: 6px; color: var(--soft); font-size: 14px; font-weight: 500; }
.strip .acts { display: flex; gap: 8px; margin-left: auto; }
.pf-day { display: block; margin-top: 8px; font-weight: 600; font-size: 15px; }
/* What the account holds, in proportion, each part in its own stone. */

.alloc i[data-t="btc"], .alloc-key i[data-t="btc"] { background: var(--btc); }
.alloc i[data-t="lp"], .alloc-key i[data-t="lp"] { background: var(--lapis); }
.alloc [data-t="0"] { background: var(--tile-a); } .alloc [data-t="1"] { background: var(--tile-b); } .alloc [data-t="2"] { background: var(--tile-c); }
.alloc [data-t="3"] { background: var(--tile-d); } .alloc [data-t="4"] { background: var(--tile-e); } .alloc [data-t="5"] { background: var(--tile-f); }
.alloc-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 22px; color: var(--soft); font-size: 13px; }
.alloc-key span { display: inline-flex; align-items: center; gap: 7px; }
.alloc-key b { color: var(--faint); font-weight: 600; }
.alloc-key i { width: 8px; height: 8px; border-radius: 1.5px; transform: rotate(-7deg); }
.alloc-key [data-t="0"] { background: var(--tile-a); } .alloc-key [data-t="1"] { background: var(--tile-b); } .alloc-key [data-t="2"] { background: var(--tile-c); }
.alloc-key [data-t="3"] { background: var(--tile-d); } .alloc-key [data-t="4"] { background: var(--tile-e); } .alloc-key [data-t="5"] { background: var(--tile-f); }
.sheet { padding: 18px 20px; border-radius: 16px; background: var(--sheet); border: 1px solid var(--line); }
.sheet + .sheet { margin-top: 16px; }
.sheet h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 17px; letter-spacing: -.015em; }
.sheet h2 svg { color: var(--soft); }
.sheet h2 small { margin-left: auto; color: var(--faint); font-weight: 500; font-size: 13px; letter-spacing: 0; }
.rows { display: grid; }
.cols { display: grid; gap: 14px; padding: 4px 6px 8px; color: var(--faint); font-size: 12px; font-weight: 500; }
.cols span:nth-child(n + 2) { text-align: right; }
.row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 11px 6px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
a.row { transition: background-color .15s; }
a.row:hover { background: var(--wash); border-radius: 10px; }
.row:first-child { border-top: 0; }
.row b { display: block; }
.row small { color: var(--soft); font-size: 12.5px; }
.row .nm { display: grid; min-width: 0; }
.row .nm .chg { font-size: 12.5px; }
.row .r { text-align: right; font-weight: 500; white-space: nowrap; }
.row .r small { display: block; font-weight: 500; }
.row .r.up small, .row .r.down small { color: inherit; opacity: .85; }
.row.me { background: var(--field); border-radius: 10px; }
/* Holdings: asset, price, amount, value, profit. */
.cols.hold, .row.hold { grid-template-columns: 32px minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .9fr); }
.cols.hold span:first-child { grid-column: span 2; text-align: left; }
.row.hold .px, .row.hold .amt { color: var(--soft); }
.row.lp { grid-template-columns: 42px minmax(0, 1fr) auto auto; }
.row.act { grid-template-columns: 32px minmax(0, 1fr) auto 100px; }
.row.act .amt { color: var(--soft); }
.empty { display: flex; align-items: center; gap: 10px; padding: 22px 6px; margin: 0; color: var(--soft); }
.fine { margin: 14px 4px 0; color: var(--faint); font-size: 13px; line-height: 1.55; max-width: 80ch; }
/* Pools: the totals, then the table an AMM's traders know. */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.stats > div { padding: 15px 18px; border-radius: 14px; background: var(--sheet); border: 1px solid var(--line); }
.stats small { display: block; color: var(--soft); font-size: 13px; font-weight: 500; }
.stats b { display: block; margin-top: 4px; font-size: 24px; font-weight: 650; letter-spacing: -.025em; }
.cols.pools, .rows.pools .row { grid-template-columns: 42px minmax(0, 1.6fr) 56px repeat(5, minmax(0, .75fr)) 92px; }
.cols.pools span:first-child { grid-column: span 2; text-align: left; }
.rows.pools .row .r b { font-weight: 600; }
.rows.pools .apr { font-weight: 650; }
.rows.pools .go { text-align: right; }
.rows.pools .go .btn { min-width: 80px; }
/* Leaders: a podium of three, then the list. */
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 14px; margin: 0 0 16px; }
.pod { position: relative; display: grid; justify-items: center; gap: 4px; padding: 26px 16px 20px; border-radius: 16px; background: var(--sheet); border: 1px solid var(--line); text-align: center; }
.pod.p1 { order: 2; padding-top: 34px; padding-bottom: 28px; }
.pod.p2 { order: 1; }
.pod.p3 { order: 3; }
.pod.me { box-shadow: inset 0 0 0 2px var(--lapis); }
.pod .avatar { margin: 4px 0 8px; }
.pod-name { max-width: 100%; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-v { font-size: 24px; font-weight: 650; letter-spacing: -.025em; }
.pod small { color: var(--faint); font-size: 12.5px; }
.medal { position: absolute; top: 14px; left: 14px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #F7F1E5; font-weight: 700; font-size: 13.5px; transform: rotate(-7deg); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2); }
.p1 .medal { background: var(--tile-d); }
.p2 .medal { background: var(--tile-f); }
.p3 .medal { background: var(--tile-b); }
.you-rank { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; padding: 12px 18px; border-radius: 12px; background: var(--field); font-size: 14.5px; }
.you-rank b { font-size: 16px; }
.you-rank span:last-child { margin-left: auto; font-weight: 650; }
.cols.lb, .row.lb { grid-template-columns: 44px minmax(0, 1fr) 90px 150px; }
.cols.lb span:nth-child(2) { text-align: left; }
.row.lb .who { display: flex; align-items: center; gap: 10px; }
/* Account: who you are, then a sheet for each thing about the account. */
.me-card { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 18px; margin: 0 0 16px; padding: 20px 22px; border-radius: 16px; background: var(--sheet); border: 1px solid var(--line); }
.me-id { flex: 1; min-width: 0; }
.me-id h1 { margin: 0; font-size: 24px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.addr { padding: 12px 14px; border-radius: 12px; background: var(--field); font-size: 14px; word-break: break-all; }
.addr-box { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; }
/* A deposit's QR, dark on stone whatever the theme, as a scanner wants it. */
.qr { display: grid; place-items: center; margin: 16px 0 4px; }
.qr-code { width: 176px; padding: 6px; border-radius: 14px; background: #F7F1E5; color: #1A1816; box-shadow: inset 0 0 0 1px var(--line); }
.qr-code svg { display: block; width: 100%; height: auto; }
.addr-box .addr { flex: 1; min-width: 0; }
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 14px 0 0; }
.field label { color: var(--soft); font-size: 13.5px; font-weight: 600; }
.field input { height: 48px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--field); outline: none; font-size: 16px; transition: border-color .2s; }
.field input:focus { border-color: var(--ink); }
.field .tk-amt { margin-top: 0; }
.field .tk-amt input { height: auto; padding: 0; border: 0; border-radius: 0; background: none; font-size: 34px; }
.field input::placeholder { color: var(--faint); }
.field select.pick { height: 48px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--field); font-size: 16px; }
.field select.pick option { background: var(--sheet); color: var(--ink); }
/* A dollar amount: the sign before it, a shortcut after. */
.money { display: flex; align-items: center; gap: 4px; height: 52px; padding: 0 10px 0 16px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--field); transition: border-color .2s; }
.money:focus-within { border-color: var(--ink); }
.money > span { color: var(--soft); font-weight: 650; font-size: 19px; }
.field .money input { flex: 1; min-width: 0; height: auto; padding: 0; border: 0; background: none; font-weight: 650; font-size: 19px; letter-spacing: -.02em; }
.note { margin: 10px 0 0; color: var(--soft); font-size: 14px; }
.note.bad { color: var(--bad); }
.note.fine { color: var(--faint); font-size: 13px; }
.note:empty { display: none; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid2 > .sheet + .sheet { margin-top: 0; }
.grid2 > .wide { grid-column: 1 / -1; }

/* ---------- sign-in: the mark large on the mosaic, the card beside it ---------- */
.gate { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 440px); align-items: center; gap: 48px 72px; width: min(1080px, 100%); min-height: calc(100vh - 64px); margin: 0 auto; padding: 40px 32px; }
.gate-hero { display: grid; justify-items: start; }
.gate-hero .logo { --s: 168px; margin: 0 0 26px -8px; }
.gate-hero h1 { margin: 0; font-family: var(--roman); font-weight: 600; font-size: 50px; line-height: 1.08; letter-spacing: .01em; }
.gate-hero > p { max-width: 34ch; margin: 16px 0 0; color: var(--soft); font-size: 18px; line-height: 1.5; }
.facts { display: grid; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.facts li { display: flex; align-items: baseline; gap: 12px; font-size: 15.5px; }
.facts .tessera { transform: translateY(-1px) rotate(-7deg); }
.gate .sheet { width: 100%; padding: 30px 28px 26px; border-radius: 20px; box-shadow: var(--lift); }
.gate .sheet h2 { margin: 0 0 6px; font-size: 24px; }
.gate .sheet > p { margin: 0; color: var(--soft); }
.gate .alt { display: block; margin: 16px auto 0; }
.gate .sheet .note[role="alert"] { color: var(--bad); }
.gate.alone { grid-template-columns: minmax(0, 440px); justify-content: center; }
/* Sign-in: Google first, Apple under it, then the wallets. */
.cta.ink { background: var(--ink); color: var(--paper); }
.cta.ink:hover:not([disabled]) { background: var(--ink-2); }
.or { display: flex; align-items: center; gap: 12px; margin: 22px 0 2px; color: var(--soft); font-size: 13.5px; font-weight: 600; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.wallets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.wallets .btn { flex-direction: column; gap: 0; width: 100%; height: 54px; border-radius: 12px; }
.wallets .btn small { color: var(--soft); font-weight: 500; font-size: 12px; }
.note.trust { margin-top: 18px; font-size: 13px; }

/* ---------- the exit page ---------- */
.exit { width: min(640px, 100%); margin: 0 auto; padding: 36px 16px calc(64px + env(safe-area-inset-bottom)); }
.exit > .lockup { margin-bottom: 8px; }
.exit h1 { margin: 22px 0 8px; font-family: var(--roman); font-weight: 600; font-size: 36px; line-height: 1.1; letter-spacing: .01em; }
.exit > p { margin: 0 0 18px; }
.exit .sheet { margin-top: 16px; }
.exit > details.more { margin-top: 22px; }
.exit .cta { margin-top: 14px; }
.exit .link-btn { margin-top: 10px; }
.exit code { font-size: 13.5px; word-break: break-all; }
.exit .row { grid-template-columns: 34px minmax(0, 1fr) auto; }
details.more { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
details.more summary { cursor: pointer; color: var(--ink); font-size: 14.5px; font-weight: 600; word-break: break-word; }
details.more summary::marker { color: var(--soft); }
details.more .btn { margin-top: 12px; }

/* ---------- dialog, finder and toast ---------- */
dialog#dialog { width: min(460px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 22px 24px 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--sheet); color: var(--ink); box-shadow: var(--lift); }
dialog#dialog::backdrop { background: var(--scrim); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
dialog#dialog[open] { animation: rise .22s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(8px) scale(.99); } }
.m-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -4px -8px 6px 0; }
.m-head h2 { margin: 0; font-size: 21px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-title { display: flex; align-items: center; gap: 11px; min-width: 0; }
.m-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--field); color: var(--soft); }
.m-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 10px 0 16px; }
.m-stats > div { padding: 9px 10px; border-radius: 10px; background: var(--field); }
.m-stats small { display: block; color: var(--faint); font-size: 11.5px; font-weight: 500; }
.m-stats b { display: block; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-copy { display: flex; gap: 8px; margin-top: 10px; }
dialog#dialog.find-d { width: min(600px, calc(100vw - 24px)); margin: 10vh auto auto; padding: 0; border-radius: 18px; }
.find-bar { display: flex; align-items: center; gap: 12px; padding: 16px 16px 16px 20px; border-bottom: 1px solid var(--line); color: var(--soft); }
.find-q { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 17px; }
.find-q::placeholder { color: var(--faint); }
.kbd-btn { height: 26px; padding: 0 9px; border: 1px solid var(--line-2); border-radius: 8px; background: none; color: var(--faint); font-weight: 600; font-size: 12px; }
.find-cols { display: flex; justify-content: space-between; padding: 12px 22px 4px; color: var(--faint); font-size: 12px; font-weight: 500; }
.find-list { max-height: min(60vh, 520px); overflow-y: auto; padding: 2px 10px 12px; }
.find-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.find-row.on, .find-row:hover { background: var(--field); }
.find-row .nm, .find-row .r { display: grid; min-width: 0; }
.find-row .nm b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.find-row small { display: flex; gap: 10px; color: var(--faint); font-size: 12.5px; }
.find-row .r { justify-items: end; }
#toast { position: fixed; z-index: 100; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px; max-width: min(440px, calc(100vw - 32px)); padding: 12px 20px 12px 16px; border-radius: 12px; background: var(--ink); color: var(--paper); font-weight: 600; font-size: 15px; opacity: 0; pointer-events: none; transform: translate(-50%, 10px); transition: opacity .25s, transform .25s var(--ease); }
#toast span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- launch (SPEC 12) ---------- */
/* Read at a glance, and alive. A launch's name is cut as an inscription: Cinzel's capitals, its spacers the interpunct
   Roman stonecutters set between words, in the eye's ultramarine. Its five rounds are five stones laid as a stair, each
   higher than the last, as each costs more: waiting (dashed), open (ringed in ultramarine, breathing, taking a tile for
   everyone who buys in, in their colour) and laid. What happens moves once: a card jumps when someone buys in, a new
   line slides onto the tape, and a buy-in or a birth bursts into tiles. Nothing moves under reduced motion. */
.inscr { margin: 0; font-family: var(--roman); font-weight: 650; font-size: clamp(26px, 3vw, 36px); line-height: 1.08; letter-spacing: .06em; overflow-wrap: anywhere; }
.inscr .dot { display: inline-block; margin: 0 .14em; color: var(--lapis); transform: translateY(-.04em); }
.inscr.sm { font-size: 16.5px; letter-spacing: .05em; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inscr.ghost { color: var(--faint); }
.rune.xl { width: 64px; height: 64px; border-radius: 18px; font-size: 34px; }
.rune.xs { width: 20px; height: 20px; border-radius: 6px; font-size: 11px; }
.stage { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--field); color: var(--soft); font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.stage.live { background: color-mix(in srgb, var(--lapis) 16%, transparent); color: var(--ink); }
.stage.live .tessera { width: 7px; height: 7px; }
.stage.up { background: color-mix(in srgb, var(--up) 15%, transparent); color: var(--up); }
.chip.dev { background: color-mix(in srgb, var(--tile-d) 22%, transparent); color: var(--ink); }
.chip.dev.xs { height: 18px; padding: 0 6px; font-size: 11px; }
.chip.launched { color: var(--ink); background: color-mix(in srgb, var(--lapis) 14%, transparent); text-decoration: none; }
.back { display: inline-block; margin: 0 0 14px; color: var(--soft); font-weight: 600; font-size: 14px; text-decoration: none; }
.back:hover { color: var(--ink); }

/* The stair. Small, in a card: five bars rising. Big, on a launch: five laid stones rising, the open one filling. */
.stones { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: 5px; margin: 0; padding: 0; list-style: none; }
.stone { position: relative; min-width: 0; height: calc(8px + var(--i) * 4px); border-radius: 3px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); }
.stone:nth-child(1) { --i: 0; } .stone:nth-child(2) { --i: 1; } .stone:nth-child(3) { --i: 2; } .stone:nth-child(4) { --i: 3; } .stone:nth-child(5) { --i: 4; }
.stone .nu { display: none; }
.stone.set { background: var(--ink); box-shadow: none; }
.stone.set.none { background: var(--line-2); }
.stone.open { background: var(--lapis); box-shadow: none; }
.stones.big { gap: 10px; }
.stones.big .stone { display: flex; flex-direction: column; height: calc(96px + var(--i) * 15px); padding: 10px 10px 9px; border-radius: 14px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.stones.big .stone.wait { box-shadow: none; background: repeating-linear-gradient(-45deg, transparent 0 7px, var(--wash) 7px 8px); outline: 1.5px dashed var(--line-2); outline-offset: -1.5px; }
.stones.big .stone.set { background: var(--sheet-2); box-shadow: inset 0 0 0 1px var(--line), inset 0 -3px 0 rgba(0, 0, 0, .16); }
.stones.big .stone.set.none { background: var(--field); }
.stones.big .stone.open { background: color-mix(in srgb, var(--lapis) 10%, var(--sheet)); box-shadow: inset 0 0 0 2px var(--lapis), 0 0 0 4px color-mix(in srgb, var(--lapis) 16%, transparent); animation: breathe 2.6s var(--ease) infinite; }
@keyframes breathe { 50% { box-shadow: inset 0 0 0 2px var(--lapis), 0 0 0 8px color-mix(in srgb, var(--lapis) 8%, transparent); } }
.stones.big .nu { display: block; font-family: var(--roman); font-weight: 650; font-size: 15px; letter-spacing: .06em; line-height: 1; color: var(--faint); }
.stones.big .open .nu { color: var(--lapis-2); }
.stones.big .set .nu { color: var(--soft); }
.tess { flex: 1; display: flex; flex-wrap: wrap; align-content: flex-end; gap: 3px; margin: 8px 0 5px; overflow: hidden; }
.tess i { width: 13px; height: 13px; border-radius: 2.5px; background: var(--tile-a); transform: rotate(-5deg); animation: drop .5s var(--ease) both; }
.tess.some i { width: 17px; height: 17px; border-radius: 3px; }
.tess.few { gap: 5px; }
.tess.few i { width: 24px; height: 24px; border-radius: 4px; }
.tess i:nth-child(3n) { transform: rotate(4deg); }
.tess i:nth-child(3n + 1) { transform: rotate(-1deg); }
@keyframes drop { from { opacity: 0; translate: 0 -14px; } }
.tess i[data-t="1"] { background: var(--tile-b); }
.tess i[data-t="2"] { background: var(--tile-c); }
.tess i[data-t="3"] { background: var(--tile-d); }
.tess i[data-t="4"] { background: var(--tile-e); }
.tess i[data-t="5"] { background: var(--tile-f); }
.tess i.me { box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 3px var(--ink); }
.st-foot { min-height: 1.3em; font-weight: 650; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set .st-foot { color: var(--soft); font-weight: 600; }
.set.none .st-foot { color: var(--faint); font-weight: 500; }
.open .st-foot { color: var(--ink); }
/* Live: the five set together, once, as it happens. */
.ln-stones.born .stone { animation: lay .7s var(--ease) both; }
.ln-stones.born .stone:nth-child(2) { animation-delay: .07s; }
.ln-stones.born .stone:nth-child(3) { animation-delay: .14s; }
.ln-stones.born .stone:nth-child(4) { animation-delay: .21s; }
.ln-stones.born .stone:nth-child(5) { animation-delay: .28s; }
@keyframes lay { 0% { transform: translateY(-10px); box-shadow: inset 0 0 0 2px var(--lapis); } 60% { transform: translateY(1px); } 100% { transform: none; } }

/* A burst of tiles, from where something happened. */
.burst { position: fixed; z-index: 200; width: 0; height: 0; pointer-events: none; }
.burst i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 2px; background: var(--lapis); animation: fly 1.05s cubic-bezier(.15, .75, .35, 1) forwards; }
.burst i[data-t="1"] { background: var(--tile-b); }
.burst i[data-t="2"] { background: var(--tile-c); }
.burst i[data-t="3"] { background: var(--tile-d); }
.burst i[data-t="4"] { background: var(--tile-a); }
.burst i[data-t="5"] { background: var(--up); }
@keyframes fly { 55% { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--r)); } 100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 90px)) rotate(calc(var(--r) * 1.6)); } }
/* Someone bought in: the card jumps, once. */
.bump { animation: jolt .65s var(--ease); }
@keyframes jolt { 0% { transform: none; } 15% { transform: translate(-3px, -2px) rotate(-.6deg); } 35% { transform: translate(3px, 0) rotate(.5deg); } 55% { transform: translate(-2px, 1px); } 100% { transform: none; } }
.lcard.bump, .lfeat.bump { box-shadow: 0 0 0 2px var(--lapis), 0 0 28px -6px var(--lapis); transition: box-shadow 1.2s .5s; }

/* The hub: the line and the button, the tape, the hottest, then the rest. */
.lh-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin: 0 0 18px; }
.lh-hero h1 { margin: 0; font-size: 32px; line-height: 1.12; }
.lh-hero p { margin: 6px 0 0; color: var(--soft); font-size: 16px; }
.tape { display: flex; gap: 8px; margin: 0 0 16px; overflow: hidden; mask-image: linear-gradient(90deg, #000 85%, transparent); }
.tp { display: inline-flex; flex: none; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 7px; border-radius: 999px; background: var(--sheet); border: 1px solid var(--line); color: var(--soft); font-size: 13.5px; text-decoration: none; white-space: nowrap; }
.tp b { color: var(--ink); font-weight: 650; }
.tp b.up { color: var(--up); }
.tp .t { color: var(--faint); font-size: 12px; }
.tp.fresh { animation: slide .6s var(--ease); }
.tp.fresh.in { border-color: color-mix(in srgb, var(--up) 45%, transparent); }
.tp.fresh.born { border-color: color-mix(in srgb, var(--lapis) 55%, transparent); }
@keyframes slide { from { opacity: 0; transform: translateX(-24px) scale(.96); background: color-mix(in srgb, var(--lapis) 22%, var(--sheet)); } }
.lfeat { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 18px 28px; align-items: center; margin: 10px 0 0; padding: 20px 22px; border-radius: 18px; color: var(--ink); text-decoration: none;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--lapis) 16%, var(--sheet)), var(--sheet) 60%); border: 1px solid color-mix(in srgb, var(--lapis) 30%, var(--line)); }
.lf-id { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center; min-width: 0; }
.lf-id .inscr { font-size: clamp(22px, 2.4vw, 30px); }
.lf-hot { display: block; margin-bottom: 4px; color: var(--soft); font-weight: 600; font-size: 13.5px; }
.lf-id .lc-by { margin-top: 8px; }
.lf-mid { display: grid; grid-template-columns: auto auto; gap: 10px 22px; align-items: end; }
.lf-mid .stones { grid-column: 1 / -1; }
.tabs .count { display: inline-grid; place-items: center; min-width: 20px; height: 18px; margin-left: 7px; padding: 0 5px; border-radius: 999px; background: var(--lapis); color: var(--on-lapis); font-size: 11.5px; }
.lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 10px; }
.lcard { display: grid; gap: 14px; min-width: 0; padding: 16px 18px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--sheet); color: var(--ink); text-decoration: none; transition: border-color .2s, transform .2s var(--ease); }
a.lcard:hover { border-color: var(--line-2); transform: translateY(-2px); }
.lc-top { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.lc-id { display: grid; gap: 5px; min-width: 0; }
.lc-by { display: flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; color: var(--soft); font-size: 12.5px; white-space: nowrap; }
.lc-by .avatar { --s: 18px; }
.lc-mid { display: grid; grid-template-columns: minmax(0, 1fr) 118px; gap: 16px; align-items: end; }
.lc-mc { display: grid; min-width: 0; }
.lc-mc b { font-weight: 700; font-size: 26px; line-height: 1.05; letter-spacing: -.03em; }
.lc-mc span { color: var(--faint); font-size: 12px; }
.lc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--soft); font-size: 13.5px; }
.lc-foot b { color: var(--ink); }
.lc-about { margin: -4px 0 0; color: var(--soft); font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sheet.flush { padding: 6px 12px; }
.rows .lrow:first-child { border-top: 0; }
.lrow { grid-template-columns: 32px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .7fr) 150px; }
.lrow .r:last-child { display: flex; justify-content: flex-end; }
.l-empty { display: grid; justify-items: center; gap: 14px; padding: 56px 16px; border: 1px dashed var(--line-2); border-radius: 16px; text-align: center; }
.l-empty p { margin: 0; color: var(--soft); font-size: 16px; }
.lh-more { margin-top: 26px; }
.lh-more h2 { margin: 0 0 10px; font-size: 18px; }

/* The tap: the form, and beside it the card as the hub will list it, drawn as it's typed. */
.ln-new-grid { display: grid; grid-template-columns: minmax(0, 540px) minmax(0, 1fr); gap: 28px; align-items: start; }
.ln-form { padding: 22px 24px 24px; }
.ln-form h1 { margin: 0 0 4px; font-size: 28px; }
.field .lbl { color: var(--soft); font-size: 13.5px; font-weight: 600; }
.field small { color: var(--faint); font-weight: 500; }
.field input.l-name { height: 56px; font-family: var(--roman); font-weight: 650; font-size: 21px; letter-spacing: .06em; }
.field input.l-name::placeholder { color: var(--faint); opacity: .7; }
.field input:focus { border-color: var(--ink); }
.help { margin: 0 2px; color: var(--faint); font-size: 13px; }
.help.bad { color: var(--bad); }
.help.up { color: var(--up); }
.syms { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; }
.syms button, .sym-own-box { display: grid; place-items: center; aspect-ratio: 1; min-width: 0; padding: 0; border: 0; border-radius: 10px; background: var(--field); font-size: 19px; line-height: 1; transition: background-color .15s, box-shadow .15s, transform .15s var(--ease); }
.syms button:hover { background: var(--wash); box-shadow: inset 0 0 0 1px var(--line-2); transform: scale(1.08); }
.syms button[aria-checked="true"], .sym-own-box.on { background: color-mix(in srgb, var(--lapis) 18%, transparent); box-shadow: inset 0 0 0 2px var(--lapis); }
.sym-own-box { box-shadow: inset 0 0 0 1px var(--line-2); cursor: text; }
.field .sym-own-box input.sym-own { width: 100%; height: 100%; padding: 0; border: 0; background: none; text-align: center; font-size: 19px; }
.ln-perks { display: grid; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.ln-perks li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: baseline; color: var(--soft); font-size: 14.5px; }
.ln-perks b { color: var(--ink); font-weight: 600; }
.ln-preview { position: sticky; top: 90px; display: grid; gap: 10px; }
.pv-label { color: var(--soft); font-weight: 600; font-size: 13.5px; }

/* A launch: the board (its name, the market cap, the stair), who's in under it, and the ticket beside. */
.ln-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.ln-main { display: grid; gap: 16px; min-width: 0; }
.ln-side { position: sticky; top: 84px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ln-head { padding: 22px 22px 6px; }
.ln-id { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; align-items: center; }
.ln-name { min-width: 0; }
.ln-name .tx-meta { margin-top: 10px; }
.ln-name .chip .avatar { --s: 16px; }
.ln-about { margin: 12px 0 0; max-width: 70ch; color: var(--soft); font-size: 15px; }
.ln-big { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; margin: 18px 22px 0; }
.ln-big dt { color: var(--faint); font-size: 12.5px; }
.ln-big dd { margin: 0; font-weight: 650; font-size: 19px; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ln-big .mc dd { font-weight: 750; font-size: 38px; line-height: 1.05; letter-spacing: -.035em; }
.ln-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 18px 22px 0; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--lapis) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lapis) 35%, transparent); }
.ln-banner[hidden] { display: none; }
.ln-banner > div { display: grid; gap: 2px; min-width: 0; }
.ln-banner b { font-size: 17px; }
.ln-banner span { color: var(--soft); font-size: 14px; }
.ln-banner.trading { background: color-mix(in srgb, var(--up) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--up) 35%, transparent); }
.ln-banner.lost { background: var(--field); box-shadow: inset 0 0 0 1px var(--line-2); }
/* Beside the ticket, the ticket's own button says it; on a phone, where the ticket comes after, the banner's does. */
.ln-banner .btn { display: none; }
a.cta { text-decoration: none; }
.ln-stones { padding: 22px 22px 20px; }
.ln-when { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; margin: 14px 2px 0; color: var(--ink); font-weight: 600; font-size: 15px; }
.ln-rule { flex-basis: 100%; color: var(--soft); font-weight: 400; font-size: 13.5px; }
.ln-feed { padding: 14px 16px 10px; }
.ln-feed h2 { display: flex; align-items: baseline; justify-content: space-between; margin: 0 2px 8px; font-size: 15px; }
.ln-feed h2 span { font-weight: 500; font-size: 13px; }
.lf-rows { display: grid; max-height: 460px; overflow-y: auto; }
.lf-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 34px 88px 40px; gap: 12px; align-items: center; padding: 7px 6px; border-radius: 8px; font-size: 14px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--lapis) 10%, transparent) var(--w), transparent var(--w)); }
.lf-row + .lf-row { margin-top: 2px; }
.lf-row .who { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--soft); white-space: nowrap; }
.lf-row .who b { color: var(--ink); }
.lf-row .blk { font-family: var(--roman); font-weight: 650; font-size: 13px; color: var(--soft); text-align: center; }
.lf-row .usd { font-weight: 600; text-align: right; }
.lf-row .t { color: var(--faint); font-size: 12.5px; text-align: right; }
.lf-row.me { box-shadow: inset 2px 0 0 var(--ink); }
.lf-row.dropped { opacity: .45; }
.lf-row.new { animation: commit .9s var(--ease); }
@keyframes commit { 0% { transform: translateY(-6px); opacity: 0; background-color: color-mix(in srgb, var(--lapis) 30%, transparent); } 40% { opacity: 1; } }
.ln-tk { padding: 18px 18px 18px; }
.ln-tk-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ln-tk-head h2 { margin: 0; font-size: 20px; }
.ln-fine { margin: 10px 2px 0; color: var(--soft); font-size: 13.5px; }
.tk-closed { display: grid; gap: 6px; text-align: center; padding: 8px 4px 6px; }
.tk-closed b { font-size: 18px; }
.tk-closed p { margin: 0 0 6px; color: var(--soft); font-size: 14px; }
.tk-closed .btn { justify-self: center; }
.ln-mine { margin-top: 14px; }
.ln-mine[hidden] { display: none; }
.ln-mine h2 span { font-weight: 600; font-size: 13px; }
.ln-mine .big { font-size: 28px; }
.ln-for { margin: 2px 0 0; color: var(--soft); font-size: 14px; }
.dh-line { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--field); font-weight: 600; font-size: 13.5px; }

/* Diamond Hands, on a launch pool's trade screen: what's owed, claimed in a tap. */
.dh-act { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.dh-act .btn { flex: none; }
.bar-mini { flex: 1; height: 6px; border-radius: 6px; background: var(--field); overflow: hidden; }
.bar-mini i { display: block; height: 100%; border-radius: 6px; background: var(--lapis); }

/* How it works: big pictures, a line under each, the questions folded. */
.hw { max-width: 980px; }
.hw-hero { padding: 18px 0 8px; }
.hw-hero h1 { margin: 0; font-size: clamp(34px, 4.4vw, 52px); line-height: 1.04; letter-spacing: -.035em; }
.hw-hero p { margin: 12px 0 18px; max-width: 46ch; color: var(--soft); font-size: 18px; }
.hw-sec { margin-top: 44px; }
.hw-sec > h2 { margin: 0 0 16px; font-size: 26px; }
.hw-lead { margin: -6px 0 14px; color: var(--soft); font-size: 16px; }
.hw-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.hw-steps.four { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 12px; }
.hw-step { display: grid; align-content: start; gap: 4px; padding: 16px 16px 18px; border-radius: 16px; background: var(--sheet); border: 1px solid var(--line); }
.hw-step b { font-size: 16.5px; }
.hw-step > span { color: var(--soft); font-size: 14.5px; line-height: 1.45; }
.hw-pic { display: grid; place-items: center; height: 92px; margin-bottom: 8px; border-radius: 12px; background: var(--field); color: var(--ink); }
.hw-btc { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--btc); color: #FFF; font-weight: 750; font-size: 28px; }
.hw-tap { display: grid; place-items: center; width: 120px; height: 44px; border-radius: 12px; background: var(--lapis); color: var(--on-lapis); font-weight: 650; font-size: 17px; box-shadow: 0 10px 24px -10px var(--lapis); }
.hw-emoji { font-size: 44px; line-height: 1; }
.hw-num, .hw-eq { font-family: var(--roman); font-weight: 700; font-size: 48px; line-height: 1; color: var(--lapis-2); }
.hw-stair { padding: 20px 22px; border-radius: 16px; background: var(--sheet); border: 1px solid var(--line); }
.hw-split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hw-split > div { display: grid; justify-items: center; gap: 2px; padding: 18px 10px; border-radius: 14px; text-align: center; }
.hw-split > div[data-t="1"] { background: color-mix(in srgb, var(--tile-d) 22%, var(--sheet)); }
.hw-split > div[data-t="2"] { background: color-mix(in srgb, var(--lapis) 18%, var(--sheet)); }
.hw-split > div[data-t="3"] { background: var(--sheet-2); }
.hw-split span { font-size: 28px; line-height: 1.2; }
.hw-split b { font-family: var(--roman); font-size: 28px; line-height: 1.1; }
.hw-split small { color: var(--soft); font-weight: 600; font-size: 13.5px; }
.hw-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.hw-cards b { font-size: 17px; }
.hw-cards p { margin: 6px 0 0; color: var(--soft); font-size: 15px; }
.hw-qs { display: grid; gap: 8px; }
.hw-q { border-radius: 14px; background: var(--sheet); border: 1px solid var(--line); }
.hw-q summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; font-weight: 600; font-size: 16px; cursor: pointer; list-style: none; }
.hw-q summary::-webkit-details-marker { display: none; }
.hw-q summary svg { flex: none; color: var(--soft); transition: transform .2s var(--ease); }
.hw-q[open] summary svg { transform: rotate(180deg); }
.hw-q p { margin: 0; padding: 0 18px 16px; max-width: 70ch; color: var(--soft); font-size: 15px; }
.hw-q a { color: var(--ink); }

/* ---------- smaller screens ---------- */
@media (max-width: 1360px) {
  .frame { grid-template-columns: 264px minmax(0, 1fr); }
  .tx { grid-template-columns: minmax(0, 1fr) 344px; }
  .tx-stats > div:nth-child(4) { display: none; }
  .tx-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ticker > span:first-child { display: none; }
  .tr-head, .tr-row { grid-template-columns: 44px 40px minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1fr) 64px; }
}
@media (max-width: 1180px) {
  .tx { grid-template-columns: minmax(0, 1fr) 330px; }
  .frame { grid-template-columns: minmax(0, 1fr); }
  .runes { display: none; }
  .ticker { display: none; }
  .gate { gap: 40px; }
  .gate-hero .logo { --s: 132px; }
  .gate-hero h1 { font-size: 42px; }
  .cols.pools, .rows.pools .row { grid-template-columns: 42px minmax(0, 1.6fr) 52px minmax(0, .8fr) minmax(0, .8fr) minmax(0, .7fr) 88px; }
  .cols.pools span:nth-child(5), .cols.pools span:nth-child(7), .rows.pools .row > :nth-child(6), .rows.pools .row > :nth-child(8) { display: none; }
}
/* A laptop's narrow window: search as its icon, the mark without its name. */
@media (max-width: 1040px) {
  .find-btn { width: 40px; padding: 0; justify-content: center; }
  .find-btn span, .find-btn kbd { display: none; }
  .top > .lockup .wordmark { display: none; }
}
@media (max-width: 860px) {
  .top { height: 58px; gap: 8px; padding: 0 12px 0 16px; }
  .top > .lockup { gap: 9px; margin-right: 0; }
  .top > .lockup .wordmark { display: inline; font-size: 19px; }
  .top-nav, .me-btn { display: none; }
  .find-btn { width: 38px; height: 38px; border: 0; background: none; color: var(--ink); }
  .top-right { margin-left: 0; }
  .top .pill { height: 36px; padding: 0 13px 0 11px; font-size: 14px; }
  .top .btn { display: none; }
  .page { padding: 20px 16px calc(100px + env(safe-area-inset-bottom)); }
  .ph h1 { font-size: 26px; }
  .tx { display: block; min-height: 0; padding: 8px 8px calc(var(--sheet-h, 300px) + 62px + 12px + env(safe-area-inset-bottom)); }
  .tx > .panel, .tx-main > .panel { margin-bottom: 8px; }
  .tx-main { display: block; }
  .tx-head { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 16px 0; }
  .tx-id .rune.lg { width: 42px; height: 42px; font-size: 22px; }
  .tx-pick h1 { font-size: 19px; }
  .tx-price { display: flex; align-items: center; gap: 10px; }
  .tx-price b { font-size: 28px; }
  .tx-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tx-stats > div:nth-child(n + 4) { display: none; }
  .tx-stats > div { padding: 10px 10px 11px; }
  .ch { padding: 8px 6px 0 14px; }
  .ch-legend { display: none; }
  .ch-plot { height: 270px; }
  .tx-lower { padding: 10px 6px 12px; }
  .tr-head, .tr-row { grid-template-columns: 40px 40px minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .tr-head > :nth-child(n + 5), .tr-row .px, .tr-row .who { display: none; }
  .tx-side { position: fixed; z-index: 30; left: 0; right: 0; bottom: calc(62px + env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--line); background: var(--sheet); border-radius: 18px 18px 0 0; box-shadow: var(--lift); }
  .tx-side-in { position: static; display: block; }
  .tx-side .cards { display: none; }
  .tk-pop { top: 84px; right: 16px; }
  .tk { padding: 12px 16px 14px; border: 0; border-radius: 0; background: none; }
  /* Closed, the ticket is its two buttons; open, a sheet over a dimmed page. */
  .tx-side:not(.open) .tk > :not(.tk-bar), .tx-side.open .tk-bar { display: none; }
  .tk-bar { display: flex; gap: 10px; }
  .tk-bar button { flex: 1; height: 50px; border: 0; border-radius: 12px; background: var(--up); color: var(--paper); font-weight: 700; font-size: 17px; }
  .tk-bar .sell { background: var(--bad); }
  .tk-bar button:active { transform: scale(.98); }
  .tx-side.open { z-index: 32; animation: tk-rise .28s var(--ease); }
  .tk-grab { position: relative; display: flex; justify-content: center; height: 18px; margin: -4px 0 6px; }
  .tk-grab i { width: 40px; height: 4px; border-radius: 4px; background: var(--line-2); }
  .tk-grab .icon-btn { position: absolute; top: -6px; right: -6px; }
  .tk-scrim { display: block; position: fixed; inset: 0; z-index: 31; background: rgb(0 0 0 / .5); opacity: 0; pointer-events: none; transition: opacity .25s; }
  .tx:has(.tx-side.open) .tk-scrim { opacity: 1; pointer-events: auto; }
  @keyframes tk-rise { from { transform: translateY(24px); opacity: .4; } }
  .seg.bs button { height: 34px; }
  /* The sheet grows up from the tab bar, so what's said under the button has its room already: the button never moves. */
  .tk { padding-bottom: 4px; }
  .tk-note { display: flow-root; min-height: 40px; }
  .tk-why, .tk-done { margin: 6px 2px 0; font-size: 13px; line-height: 1.3; }
  .tk-amt { min-height: 62px; margin-top: 10px; padding: 8px 14px; border-radius: 12px; }
  .tk-amt input, .tk-amt .tk-cur { font-size: 26px; }
  .tk-quick button { height: 30px; }
  .tk-lines { margin: 8px 2px 0; }
  .tk-line { padding: 1px 0; font-size: 13px; }
  .cta { height: 52px; margin-top: 10px; font-size: 17px; }
  .tabbar { position: fixed; z-index: 31; left: 0; right: 0; bottom: 0; display: flex; padding: 0 6px env(safe-area-inset-bottom); border-top: 1px solid var(--line); background: var(--paper); }
  .tabbar a { flex: 1; display: grid; justify-items: center; align-content: center; gap: 3px; height: 62px; color: var(--soft); font-weight: 600; font-size: 11.5px; text-decoration: none; }
  .tabbar a.on { color: var(--ink); }
  .tabbar a.on svg { color: var(--lapis); }
  .strip { gap: 14px 28px; }
  .strip .big { font-size: 42px; }
  .strip .acts { margin-left: 0; width: 100%; }
  .strip .acts .btn { flex: 1; }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  .sheet { padding: 14px 14px; border-radius: 14px; }
  .cols { display: none; }
  /* A holding as a wallet shows it: the name and the day's move, the value over the profit. */
  .row.hold { grid-template-columns: 32px minmax(0, 1fr) auto; row-gap: 1px; }
  .row.hold > :first-child, .row.hold .nm { grid-row: span 2; }
  .row.hold .px, .row.hold .amt { display: none; }
  .row.hold > :nth-child(5) { grid-column: 3; grid-row: 1; align-self: end; }
  .row.hold > :nth-child(6) { grid-column: 3; grid-row: 2; align-self: start; display: flex; justify-content: flex-end; gap: 5px; font-size: 12.5px; }
  .row.hold > :nth-child(6) small { display: none; }
  .row.hold > .r.soft:nth-child(6) { visibility: hidden; }
  .row.act { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .row.act .amt { display: none; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stats > div { padding: 12px 14px; border-radius: 12px; }
  .stats b { font-size: 20px; }
  /* A pool: the pair and its name, the liquidity over the APR; a tap opens it. */
  .rows.pools .row { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 1px 12px; cursor: pointer; }
  .rows.pools .row > .pair, .rows.pools .row > .nm { grid-row: span 2; }
  .rows.pools .row > .fee, .rows.pools .row > .wide, .rows.pools .go { display: none; }
  .rows.pools .row > :nth-child(4) { grid-column: 3; grid-row: 1; align-self: end; }
  .rows.pools .row > .apr { grid-column: 3; grid-row: 2; align-self: start; font-size: 12.5px; }
  .rows.pools .row > .apr::after { content: ' APR'; color: var(--faint); font-weight: 500; }
  .addr-box { flex-wrap: wrap; }
  .addr-box .addr { flex-basis: 100%; }
  .addr-box .btn { flex: 1; }
  .pod-name { font-size: 13px; }
  .podium { gap: 8px; }
  .pod { padding: 40px 8px 14px; border-radius: 14px; }
  .pod.p1 { padding-top: 46px; }
  .pod .avatar { --s: 40px !important; }
  .pod-v { font-size: 17px; }
  .pod small { display: none; }
  .medal { top: 10px; left: 10px; width: 24px; height: 24px; font-size: 12px; }
  .row.lb { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .row.lb > :nth-child(3) { display: none; }
  .me-card { padding: 16px; }
  .me-id h1 { font-size: 20px; }
  .me-card #sign-out { width: 100%; }
  .m-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  dialog#dialog.find-d { margin-top: 8px; }
  /* On a phone the sign-in comes straight after the headline, the facts under it. */
  .gate { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 0; min-height: 0; padding: 32px 16px calc(100px + env(safe-area-inset-bottom)); }
  .gate-hero { display: contents; }
  .gate-hero .logo { display: none; }
  .gate-hero h1 { font-size: 32px; }
  .gate-hero > p { margin-top: 10px; font-size: 16px; }
  .gate .sheet { order: 1; margin-top: 22px; padding: 24px 20px 22px; }
  .facts { order: 2; margin-top: 24px; }
  /* A launch on a phone: the board, then the ticket, then who's in; the stair shorter, the feed's columns fewer. */
  .ln-grid { display: flex; flex-direction: column; gap: 8px; }
  .ln-main { display: contents; }
  .ln-board { order: 1; }
  .ln-side { order: 2; position: static; }
  .ln-who { order: 3; }
  .ln-head { padding: 16px 16px 4px; }
  /* A long name wraps to two lines on a phone: the tile stays by its first. */
  .ln-id { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: start; }
  .ln-id .rune.xl { width: 48px; height: 48px; border-radius: 14px; font-size: 25px; }
  .inscr { font-size: 24px; }
  .ln-big { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 14px 16px 0; }
  .ln-big .mc { grid-column: 1 / -1; }
  .ln-big .mc dd { font-size: 34px; }
  .ln-big dd { font-size: 16px; }
  .ln-banner { margin: 12px 16px 0; flex-wrap: wrap; }
  .ln-banner .btn { display: inline-flex; width: 100%; }
  .ln-stones { padding: 16px 16px 14px; }
  .stones.big { gap: 6px; }
  .stones.big .stone { height: calc(72px + var(--i) * 11px); padding: 8px 6px 7px; border-radius: 11px; }
  .tess { gap: 2px; margin: 6px 0 3px; }
  .tess i { width: 8px; height: 8px; }
  .tess.some i { width: 11px; height: 11px; }
  .tess.few i { width: 15px; height: 15px; }
  .st-foot { font-size: 11px; }
  .ln-tk { padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--sheet); }
  .lf-row { grid-template-columns: 22px minmax(0, 1fr) 30px 76px; gap: 10px; }
  .lf-row .t { display: none; }
  .lh-hero h1 { font-size: 26px; }
  .lh-hero p { font-size: 15px; }
  .lh-hero .ph-acts { width: 100%; }
  .lh-hero .ph-acts .btn { flex: 1; }
  .tape { overflow-x: auto; scrollbar-width: none; margin: 0 -16px 14px; padding: 0 16px; mask-image: none; }
  .tape::-webkit-scrollbar { display: none; }
  .lfeat { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 14px; }
  .lf-id { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
  .lf-id .rune.xl { width: 48px; height: 48px; border-radius: 14px; font-size: 25px; }
  .lfeat > .btn { width: 100%; }
  .lgrid { grid-template-columns: minmax(0, 1fr); }
  .lcard { padding: 14px 14px 14px; }
  .lc-top { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .lc-mid { grid-template-columns: minmax(0, 1fr) 104px; }
  .lrow { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .lrow > :nth-child(4), .lrow > :nth-child(5) { display: none; }
  .ln-new-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ln-form { padding: 18px 16px 20px; }
  .ln-form h1 { font-size: 24px; }
  .ln-preview { position: static; }
  .syms { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .hw-hero h1 { font-size: 34px; }
  .hw-hero p { font-size: 16px; }
  .hw-sec { margin-top: 34px; }
  .hw-sec > h2 { font-size: 22px; }
  .hw-steps, .hw-steps.four, .hw-cards { grid-template-columns: minmax(0, 1fr); }
  .hw-step { grid-template-columns: 76px minmax(0, 1fr); column-gap: 14px; align-items: center; }
  .hw-step .hw-pic { grid-row: span 2; height: 76px; margin: 0; }
  .hw-step .hw-pic svg { width: 34px; height: 34px; }
  .hw-btc { width: 42px; height: 42px; font-size: 22px; }
  .hw-tap { width: 60px; height: 34px; font-size: 14px; }
  .hw-emoji { font-size: 34px; }
  .hw-num, .hw-eq { font-size: 36px; }
  .hw-stair { padding: 14px; }
  .hw-split span, .hw-split b { font-size: 22px; }
  .field .tk-amt input { font-size: 26px; }
  #toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
  body:has(.tx) #toast { bottom: calc(150px + env(safe-area-inset-bottom)); }
  body:has(.tx-side.open) #toast { top: 72px; bottom: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}