/* =====================================================================
   HINDSIGHT design system  (single light theme: "ledger of conviction")
   One stylesheet for every page. Do not add page-local colour values;
   use the tokens below.

   LAYOUT SHELL
     <body>
       (mountChrome injects: .masthead  + .tape  ... and at the end .site-footer + .toasts)
       <main class="page">            max 1180px, 20px gutter (16px on phones)
       <main class="page page-narrow"> 860px column
     Page title block:  <h1 class="page-title">, <p class="page-sub">
     Section heading:   <div class="section-head"><h2>Title</h2><span class="aside">note</span></div>
     Grids:             .grid-2 / .grid-3 (collapse to 1 col on phones), .split (main + 340px aside), .stack (vertical gap)

   TOKENS (:root)
     --paper page, --card cards/inputs, --ink text+rules, --muted secondary text, --rule hairlines,
     --accent ultramarine fill, --accent-ink ultramarine as TEXT, --up, --down, --burn (+ -soft tints)
     --f-display (Fraunces), --f-ui (Instrument Sans), --f-mono (IBM Plex Mono: numbers, addresses)
     --hard  hard offset shadow for index cards

   COMPONENTS
     .card              paper-white panel, 1px ink border.   .card.hard = offset shadow.  .card-pad = padding
     .card-title        small heading row inside a card (title left, .aside right)
     .table-wrap > table.ledger   hairline ledger. Put data-label="Col" on every <td>: under 720px each row
                        becomes a card and the label prints before the value. td.num = right aligned mono.
                        <td class="cell-main"> is the full-width first cell on mobile.
     .badge             small outlined tag. Variants: .badge-up .badge-down .badge-burn .badge-accent .badge-solid
     .stamp             rubber stamp (double border, tilted). .stamp-up "Right so far", .stamp-down "Underwater",
                        .stamp-hit "Target hit". Use hsStamp(thesis) in shared.js to get the markup.
     .btn               button. .btn-primary (ink), .btn-accent (ultramarine), .btn-ghost, .btn-down (sell),
                        .btn-sm, .btn-block, [disabled]
     .input / .textarea / .select   form controls (.input-lg for amounts). Wrap in .field with <label class="field-label">,
                        helper text .hint, error text .err
     .range             styled <input type=range>
     .chip              pill toggle/link. .chip.on = selected. .chips = wrapping row. .chip-sm
     .seg               segmented selector (buttons, .on = selected; child spans .t title / .d description)
     .tabs              underlined tab row (buttons, .on = active)
     .pager             page-number buttons
     .modal-backdrop > .sheet     bottom sheet (use openSheet() in shared.js). .sheet-head, .sheet-body, .sheet-foot
     .thesis            index-card thesis (hsThesisCardHtml() in shared.js). Parts: .thesis-head .thesis-text
                        .thesis-chips .thesis-foot .thesis-perf .thesis-by.  .thesis-grid lays cards out.
     .stats > .stat     stat tiles: <div class="stat"><div class="l">Label</div><div class="v">Value</div></div>
     .art               token logo tile (.art-lg .art-sm); content from artHtml(token)
     .pair              quote-asset badge (e.g. ETH) next to a symbol
     .empty             empty-state block (.empty h3 + p + action)
     .toast             via showMsg(text, kind)
     .up / .down / .muted / .mono / .num / .nowrap   text helpers.  .only-mobile / .only-desktop visibility helpers
   ===================================================================== */

:root {
  --paper: #F4EFE6;
  --card: #FBF8F2;
  --ink: #14110F;
  --muted: #6B645A;
  --rule: #D9D0BF;
  --accent: #5B6CFF;
  --accent-ink: #3F4FE0;
  --accent-soft: #E6E8FF;
  --up: #14804A;
  --up-soft: #DDEFE3;
  --down: #B3261E;
  --down-soft: #F6DDD9;
  --burn: #E8590C;
  --burn-soft: #FBE3D3;
  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-ui: "Instrument Sans", "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --hard: 6px 6px 0 var(--ink);
  --hard-sm: 3px 3px 0 var(--ink);
  --gutter: 20px;
  --maxw: 1180px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--f-ui); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  /* faint ruled-notebook lines, like the brand banner */
  background-image: repeating-linear-gradient(0deg, transparent 0 31px, rgba(217, 208, 191, .38) 31px 32px);
}
img, svg { max-width: 100%; }
a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: 600; line-height: 1.1; letter-spacing: -.01em; }
p { margin: 0; }
code, .mono { font-family: var(--f-mono); }
.mono, .num, .stat .v, .ledger td.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent); color: #fff; }
.up { color: var(--up) !important; }
.down { color: var(--down) !important; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.only-mobile { display: none !important; }

/* ---------------------------------------------------------------- page shell */
.page { max-width: var(--maxw); margin: 0 auto; padding: 28px var(--gutter) 72px; }
.page-narrow { max-width: 860px; }
.page-title { font-size: clamp(34px, 5vw, 54px); font-weight: 700; letter-spacing: -.02em; margin-bottom: 10px; }
.page-sub { color: var(--muted); max-width: 62ch; font-size: 17px; margin-bottom: 28px; }
.crumb { display: inline-block; margin-bottom: 14px; font-size: 14px; color: var(--muted); text-decoration: none; }
.crumb:hover { color: var(--ink); }
.section { margin-top: 64px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-bottom: 1px solid var(--ink); padding-bottom: 8px; margin-bottom: 20px; }
.section-head h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; }
.section-head .aside { color: var(--muted); font-size: 14px; }
.stack > * + * { margin-top: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }

/* ---------------------------------------------------------------- masthead */
.masthead { background: var(--paper); border-bottom: 4px double var(--ink); position: relative; z-index: 40; }
.mast-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; max-width: var(--maxw); margin: 0 auto;
  padding: 7px var(--gutter); font-size: 12.5px; color: var(--muted); border-bottom: 1px solid var(--rule); }
.mast-top a { color: var(--muted); text-decoration: none; }
.mast-top a:hover { color: var(--ink); }
.mast-main { display: flex; align-items: center; gap: 28px; max-width: var(--maxw); margin: 0 auto; padding: 14px var(--gutter); }
.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; flex: none; }
.brand img { width: 38px; height: 38px; display: block; }
.brand-name { font-family: var(--f-display); font-weight: 800; font-size: 31px; letter-spacing: -.03em; line-height: 1; }
.mast-nav { display: flex; gap: 4px; margin-left: auto; }
.mast-nav a { padding: 8px 12px; text-decoration: none; color: var(--ink); font-weight: 500; font-size: 15.5px; border-bottom: 2px solid transparent; }
.mast-nav a:hover { border-bottom-color: var(--rule); color: var(--ink); }
.mast-nav a.on { border-bottom-color: var(--ink); font-weight: 700; }
.mast-actions { display: flex; gap: 10px; align-items: center; }
.menu-btn { display: none; background: transparent; border: 1px solid var(--ink); padding: 8px 12px; font-weight: 600; font-size: 14px; border-radius: 2px; }

/* ---------------------------------------------------------------- tape */
.tape { background: var(--ink); color: var(--paper); overflow: hidden; white-space: nowrap; font-family: var(--f-mono); font-size: 12.5px; height: 34px; display: flex; align-items: center; }
.tape-track { display: inline-flex; gap: 0; animation: tape 60s linear infinite; will-change: transform; }
.tape:hover .tape-track { animation-play-state: paused; }
.tape .tp { display: inline-flex; align-items: center; gap: 7px; padding: 0 22px; color: var(--paper); text-decoration: none; border-right: 1px solid #3a342e; }
.tape .tp i { width: 7px; height: 7px; background: #5fd08e; display: inline-block; }
.tape .tp.sell i { background: #ff8a80; }
.tape .tp b { font-weight: 500; color: #5fd08e; }
.tape .tp.sell b { color: #ff9b92; }
.tape .tp u { text-decoration: none; font-weight: 600; }
.tape-empty { padding: 0 var(--gutter); color: #bdb4a6; }
.live-dot { display: inline-block; width: 8px; height: 8px; background: var(--down); border-radius: 50%; margin-right: 8px; animation: blink 1.6s infinite; }
@keyframes tape { to { transform: translateX(-50%); } }
@keyframes blink { 50% { opacity: .25; } }

/* ---------------------------------------------------------------- footer */
.site-footer { border-top: 4px double var(--ink); margin-top: 40px; background: var(--paper); }
.site-footer .inner { max-width: var(--maxw); margin: 0 auto; padding: 28px var(--gutter) 40px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; font-size: 14px; color: var(--muted); }
.site-footer .fb { font-family: var(--f-display); font-weight: 800; font-size: 22px; color: var(--ink); letter-spacing: -.02em; }
.site-footer .links { display: flex; gap: 18px; flex-wrap: wrap; justify-content: flex-end; align-content: flex-start; }
.site-footer .links a { color: var(--ink); }
.site-footer .nfa { grid-column: 1 / -1; border-top: 1px solid var(--rule); padding-top: 14px; font-style: italic; color: var(--ink); }

/* ---------------------------------------------------------------- card */
.card { background: var(--card); border: 1px solid var(--ink); border-radius: 2px; }
.card.hard { box-shadow: var(--hard); }
.card-pad { padding: 20px; }
.card-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; font-family: var(--f-display); font-weight: 700; font-size: 20px; }
.card-title .aside { font-family: var(--f-ui); font-weight: 400; font-size: 13px; color: var(--muted); }

/* ---------------------------------------------------------------- buttons */
.btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border: 1px solid var(--ink); border-radius: 2px;
  background: var(--card); color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: none; line-height: 1.1; min-height: 44px;
  box-shadow: var(--hard-sm); transition: transform .08s, box-shadow .08s; }
.btn:hover { color: var(--ink); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn-primary { background: var(--ink); color: var(--paper); box-shadow: 3px 3px 0 var(--accent); }
.btn-primary:hover { color: var(--paper); box-shadow: 4px 4px 0 var(--accent); }
.btn-accent { background: var(--accent); color: #fff; border-color: var(--ink); }
.btn-accent:hover { color: #fff; }
.btn-down { background: var(--down); color: #fff; }
.btn-down:hover { color: #fff; }
.btn-ghost { background: transparent; box-shadow: none; }
.btn-ghost:hover { box-shadow: none; transform: none; background: var(--card); }
.btn-sm { padding: 8px 14px; font-size: 14px; min-height: 36px; box-shadow: 2px 2px 0 var(--ink); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.connect { white-space: nowrap; }

/* ---------------------------------------------------------------- forms */
.field { margin-bottom: 18px; }
.field-label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.field-label small { font-weight: 400; color: var(--muted); margin-left: 6px; }
.input, .textarea, .select { width: 100%; padding: 11px 12px; background: var(--card); border: 1px solid var(--ink); border-radius: 2px; font-size: 16px; min-height: 44px; }
.input::placeholder, .textarea::placeholder { color: #9a9285; }
.input:focus, .textarea:focus, .select:focus { outline: 3px solid var(--accent); outline-offset: 0; }
.textarea { resize: vertical; line-height: 1.5; font-family: var(--f-display); font-size: 17px; }
.input-lg { font-family: var(--f-mono); font-size: 24px; padding: 12px; }
input[type=file].input { padding: 9px 10px; font-size: 14px; }
.hint { color: var(--muted); font-size: 13.5px; margin-top: 6px; }
.err { color: var(--down); font-size: 14px; font-weight: 500; min-height: 0; margin-top: 8px; }
.err:empty { display: none; }
.warn { background: var(--burn-soft); border: 1px solid var(--burn); border-left-width: 5px; padding: 10px 12px; font-size: 14px; border-radius: 2px; color: #5a2506; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.counter { text-align: right; font-family: var(--f-mono); font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.counter.bad { color: var(--down); }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; margin: 6px 0; }
.range::-webkit-slider-runnable-track { height: 2px; background: var(--ink); }
.range::-moz-range-track { height: 2px; background: var(--ink); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; background: var(--accent); border: 2px solid var(--ink); border-radius: 2px; margin-top: -10px; box-shadow: 2px 2px 0 var(--ink); }
.range::-moz-range-thumb { width: 18px; height: 18px; background: var(--accent); border: 2px solid var(--ink); border-radius: 2px; box-shadow: 2px 2px 0 var(--ink); }
.dial { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.dial .dn { font-weight: 600; }
.dial .dv { font-family: var(--f-mono); font-size: 26px; font-weight: 500; }
.dial-input { width: 7.5ch; text-align: right; font-family: var(--f-mono); font-size: 22px; padding: 6px 8px; border: 1px solid var(--ink); background: var(--card); border-radius: 2px; min-height: 0; }

/* ---------------------------------------------------------------- chips / seg / tabs / pager */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--ink); border-radius: 999px; background: transparent;
  font-size: 14px; font-weight: 500; text-decoration: none; color: var(--ink); line-height: 1.1; min-height: 34px; }
.chip:hover { background: var(--card); color: var(--ink); }
.chip.on { background: var(--ink); color: var(--paper); }
.chip.sm, .chip-sm { padding: 4px 10px; font-size: 12.5px; min-height: 26px; }
.seg { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.seg button { text-align: left; padding: 11px 13px; background: var(--card); border: 1px solid var(--ink); border-radius: 2px; display: flex; flex-direction: column; gap: 2px; }
.seg button.on { background: var(--ink); color: var(--paper); box-shadow: 3px 3px 0 var(--accent); }
.seg button[disabled] { opacity: .45; cursor: not-allowed; }
.seg .t { font-weight: 700; font-size: 16px; }
.seg .d { font-size: 12.5px; opacity: .75; }
.tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--ink); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 0 9px; font-weight: 600; font-size: 15.5px; color: var(--muted); white-space: nowrap; margin-bottom: -1px; }
.tabs button:hover { color: var(--ink); }
.tabs button.on { color: var(--ink); border-bottom-color: var(--accent); }
.pager { display: flex; gap: 6px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.pager:empty { display: none; }
.pager button { min-width: 36px; height: 36px; border: 1px solid var(--ink); background: var(--card); border-radius: 2px; font-family: var(--f-mono); }
.pager button.on { background: var(--ink); color: var(--paper); }
.pager button[disabled] { opacity: .4; }

/* ---------------------------------------------------------------- badges & stamps */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border: 1px solid var(--ink); border-radius: 2px; font-size: 12.5px; font-weight: 600; line-height: 1.5; background: var(--card); white-space: nowrap; }
.badge-up { color: var(--up); border-color: var(--up); background: var(--up-soft); }
.badge-down { color: var(--down); border-color: var(--down); background: var(--down-soft); }
.badge-burn { color: #9a3a05; border-color: var(--burn); background: var(--burn-soft); }
.badge-accent { color: var(--accent-ink); border-color: var(--accent-ink); background: var(--accent-soft); }
.badge-solid { background: var(--ink); color: var(--paper); }
.pair { display: inline-block; padding: 1px 7px; border: 1px solid var(--accent-ink); color: var(--accent-ink); background: var(--accent-soft); font-family: var(--f-mono); font-size: 11.5px; font-weight: 600; border-radius: 2px; vertical-align: 1px; }
.official { display: inline-block; margin-left: 6px; padding: 0 6px; background: var(--ink); color: var(--paper); font-size: 11px; font-weight: 700; border-radius: 2px; vertical-align: 2px; }
.stamp { display: inline-block; padding: 3px 9px 2px; border: 3px double currentColor; border-radius: 4px; font-weight: 800; font-size: 12px; letter-spacing: .09em;
  text-transform: uppercase; transform: rotate(-3deg); line-height: 1.2; white-space: nowrap; opacity: .92; mix-blend-mode: multiply; }
.stamp-up { color: var(--up); }
.stamp-down { color: var(--down); }
.stamp-hit { color: var(--accent-ink); transform: rotate(2deg); }
.stamp-lg { font-size: 15px; padding: 5px 12px 4px; }

/* ---------------------------------------------------------------- token art */
.art { width: 40px; height: 40px; flex: none; background: var(--ink); color: var(--paper); display: grid; place-items: center; overflow: hidden;
  font-family: var(--f-display); font-weight: 700; font-size: 14px; border-radius: 2px; border: 1px solid var(--ink); }
.art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-sm { width: 26px; height: 26px; font-size: 10px; }
.art-lg { width: 72px; height: 72px; font-size: 22px; }

/* ---------------------------------------------------------------- stat tiles */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); border: 1px solid var(--ink); background: var(--card); }
.stat { padding: 14px 16px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin: 0 -1px -1px 0; }
.stat .l { color: var(--muted); font-size: 13px; }
.stat .v { font-family: var(--f-mono); font-size: 21px; font-weight: 500; margin-top: 2px; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- ledger table */
.table-wrap { background: var(--card); border: 1px solid var(--ink); border-radius: 2px; }
table.ledger { width: 100%; border-collapse: collapse; }
.ledger th { text-align: left; font-weight: 600; font-size: 13px; color: var(--muted); padding: 11px 14px; border-bottom: 1px solid var(--ink); white-space: nowrap; background: var(--card); }
.ledger th.num, .ledger td.num { text-align: right; font-family: var(--f-mono); }
.ledger td { padding: 13px 14px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.ledger tbody tr:last-child td { border-bottom: 0; }
.ledger tbody tr:hover { background: #F6F1E7; }
.ledger tr.flash-buy { animation: flashb 1.4s; }
.ledger tr.flash-sell { animation: flashs 1.4s; }
@keyframes flashb { from { background: var(--up-soft); } }
@keyframes flashs { from { background: var(--down-soft); } }
.tkcell { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--ink); text-decoration: none; }
.tkcell .nm { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tkcell .sy { font-family: var(--f-mono); font-size: 12.5px; color: var(--muted); }
.ledger .sortable { cursor: pointer; }
.ledger .sortable:hover { color: var(--ink); }

/* ---------------------------------------------------------------- empty / toast / modal */
.empty { padding: 36px 20px; text-align: center; color: var(--muted); }
.empty h3 { color: var(--ink); font-size: 22px; margin-bottom: 6px; }
.empty .btn { margin-top: 14px; }
.toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 90; max-width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; background: var(--ink); color: var(--paper); padding: 10px 14px; font-size: 14px; text-decoration: none; border-radius: 2px; box-shadow: 4px 4px 0 var(--accent); animation: toastin .25s ease-out; }
.toast:hover { color: var(--paper); }
.toast.out { opacity: 0; transform: translateY(8px); transition: .4s; }
.toast.buy b { color: #5fd08e; } .toast.sell b { color: #ff9b92; }
.toast.ok { box-shadow: 4px 4px 0 var(--up); } .toast.bad { box-shadow: 4px 4px 0 var(--down); }
.toast .art { width: 26px; height: 26px; font-size: 10px; border-color: #5b544a; }
@keyframes toastin { from { opacity: 0; transform: translateY(10px); } }

.modal-backdrop { position: fixed; inset: 0; background: rgba(20, 17, 15, .55); z-index: 100; display: flex; align-items: flex-end; justify-content: center; animation: fadein .18s; }
.sheet { background: var(--paper); width: min(600px, 100%); max-height: 92vh; overflow-y: auto; border: 1px solid var(--ink); border-bottom: 0; border-radius: 6px 6px 0 0;
  box-shadow: 0 -6px 0 var(--accent); animation: sheetin .26s ease-out; }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 20px 22px 8px; position: sticky; top: 0; background: var(--paper); }
.sheet-head h2 { font-size: 26px; font-weight: 700; }
.sheet-head .x { background: none; border: 1px solid var(--ink); width: 36px; height: 36px; border-radius: 2px; font-size: 18px; line-height: 1; }
.sheet-body { padding: 8px 22px 12px; }
.sheet-foot { padding: 8px 22px 24px; display: flex; gap: 10px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
@keyframes sheetin { from { transform: translateY(40px); opacity: .4; } }
@keyframes fadein { from { opacity: 0; } }
.elig { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.elig:last-child { border-bottom: 0; }
.elig .a { font-family: var(--f-mono); font-weight: 500; }
.elig .b { color: var(--muted); font-size: 13px; }

/* ---------------------------------------------------------------- thesis (index card) */
.thesis-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 30px; }
.thesis { background: var(--card); border: 2px solid var(--ink); box-shadow: var(--hard); padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 12px; position: relative; min-width: 0;
  background-image: repeating-linear-gradient(0deg, transparent 0 27px, rgba(91, 108, 255, .10) 27px 28px); background-position: 0 44px; }
.thesis.pending { opacity: .65; }
.thesis-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.thesis-token { display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; min-width: 0; }
.thesis-token b { font-family: var(--f-mono); font-weight: 600; font-size: 15px; }
.thesis-token .pair { font-size: 11px; }
.thesis-time { font-size: 13px; color: var(--muted); white-space: nowrap; }
.thesis-text { font-family: var(--f-display); font-size: 19px; line-height: 28px; font-weight: 400; overflow-wrap: anywhere; font-variation-settings: "opsz" 24; }
.thesis-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.thesis-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; border-top: 1px dashed var(--ink); padding-top: 11px; flex-wrap: wrap; }
.thesis-perf b { font-family: var(--f-mono); font-size: 24px; font-weight: 600; line-height: 1; }
.thesis-perf span { font-size: 14px; margin-left: 6px; color: var(--ink); }
.thesis-perf small { display: block; font-family: var(--f-mono); font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.thesis-by { font-size: 13px; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.thesis-by a { color: var(--muted); font-family: var(--f-mono); }
.thesis-by a:hover { color: var(--ink); }
.thesis .del { background: none; border: 0; color: var(--muted); text-decoration: underline; font-size: 13px; padding: 0; }

/* ---------------------------------------------------------------- misc blocks */
.splitbar { display: flex; height: 14px; border: 1px solid var(--ink); background: var(--card); }
.splitbar i { display: block; height: 100%; }
.splitbar i + i { border-left: 1px solid var(--ink); }
.c-plat { background: var(--ink); } .c-creator { background: var(--accent); } .c-burn { background: var(--burn); }
.legend { display: grid; gap: 7px; margin-top: 12px; font-size: 14px; }
.legend span { display: flex; align-items: center; gap: 8px; }
.legend em { width: 11px; height: 11px; display: inline-block; flex: none; border: 1px solid var(--ink); }
.legend b { margin-left: auto; font-family: var(--f-mono); font-weight: 500; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dotted var(--rule); font-size: 14.5px; }
.kv:last-child { border-bottom: 0; }
.kv b { font-family: var(--f-mono); font-weight: 500; text-align: right; }
.kv.total { border-top: 1px solid var(--ink); border-bottom: 0; margin-top: 4px; font-weight: 700; }

/* ================================================================ HOME */
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 34px 0 10px; }
.hero h1 { font-size: clamp(48px, 8.6vw, 112px); font-weight: 800; letter-spacing: -.045em; line-height: .9; font-variation-settings: "opsz" 144; }
.hero h1 span { display: block; }
.hero .lede { font-size: 20px; line-height: 1.5; max-width: 34em; margin: 26px 0 28px; font-family: var(--f-display); font-weight: 400; }
.hero .cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-card { position: relative; }
.hero-card .thesis { transform: rotate(1.2deg); }
.hero-card .cap { margin-top: 22px; font-size: 13px; color: var(--muted); text-align: center; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); margin-top: 46px; }
.steps > div { padding: 18px 22px 20px; border-right: 1px solid var(--rule); display: grid; grid-template-columns: auto 1fr; gap: 0 14px; align-items: baseline; }
.steps > div:last-child { border-right: 0; }
.steps .n { font-family: var(--f-display); font-weight: 800; font-size: 44px; line-height: 1; color: var(--accent-ink); grid-row: span 2; }
.steps h3 { font-size: 21px; }
.steps p { color: var(--muted); font-size: 14.5px; margin-top: 3px; }
.feed-tabs { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.more { text-align: center; margin-top: 30px; }
.tools { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
.search { flex: 1 1 260px; position: relative; }
.search .input { padding-left: 38px; }
.search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--muted); }
.fee-mini { display: flex; height: 8px; width: 90px; border: 1px solid var(--ink); }
.fee-mini i { display: block; }

/* ================================================================ TOKEN */
.tk-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; border-bottom: 1px solid var(--ink); padding-bottom: 18px; }
.tk-id { display: flex; gap: 16px; align-items: center; min-width: 0; }
.tk-name { font-family: var(--f-display); font-weight: 800; font-size: clamp(30px, 4.5vw, 48px); letter-spacing: -.03em; line-height: 1; overflow-wrap: anywhere; }
.tk-sub { margin-top: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: 14.5px; }
.tk-price { text-align: right; }
.tk-price .big { font-family: var(--f-mono); font-size: clamp(30px, 4vw, 42px); font-weight: 500; line-height: 1; }
.tk-price .chg { margin-top: 6px; font-family: var(--f-mono); font-size: 15px; }
.tk-price .chg small { color: var(--muted); font-family: var(--f-ui); margin-left: 8px; font-size: 13px; }
.tk-about { margin: 16px 0 6px; display: grid; gap: 12px; }
.tk-ca { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tk-ca .l { font-weight: 700; font-size: 13px; }
.tk-ca code { background: var(--card); border: 1px solid var(--rule); padding: 3px 8px; font-size: 13px; }
.tk-links { display: flex; gap: 8px; flex-wrap: wrap; }
.tk-desc { max-width: 70ch; font-family: var(--f-display); font-size: 17px; }
.tk-meta { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.chart-tools { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 18px 0 8px; flex-wrap: wrap; }
.chart-tools .note { font-size: 13px; color: var(--muted); }
.chart-box { position: relative; height: 280px; border: 1px solid var(--ink); background: var(--card); touch-action: pan-y; }
.chart-box svg { width: 100%; height: 100%; display: block; }
.chart-x { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ink); opacity: 0; pointer-events: none; }
.chart-dot { position: absolute; width: 11px; height: 11px; margin: -6px 0 0 -6px; background: var(--accent); border: 2px solid var(--ink); border-radius: 50%; opacity: 0; pointer-events: none; }
.chart-x.show, .chart-dot.show { opacity: 1; }
.chart-tip { position: absolute; top: 8px; background: var(--ink); color: var(--paper); padding: 6px 10px; font-size: 12.5px; opacity: 0; pointer-events: none; font-family: var(--f-mono); white-space: nowrap; }
.chart-tip.show { opacity: 1; }
.chart-tip b { display: block; font-weight: 600; }
.chart-foot { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.dock { position: sticky; top: 16px; background: var(--card); border: 2px solid var(--ink); box-shadow: var(--hard); padding: 18px; }
.dock-close { display: none; }
.swap-title { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.swap-title .n { font-family: var(--f-display); font-weight: 700; font-size: 18px; }
.swap-title .s { color: var(--muted); font-size: 13px; font-family: var(--f-mono); }
.bs { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ink); margin-bottom: 14px; }
.bs button { background: transparent; border: 0; padding: 10px; font-weight: 700; }
.bs button + button { border-left: 1px solid var(--ink); }
.bs button.on { background: var(--up); color: #fff; }
.bs button.on.sell { background: var(--down); }
.swap-block { border: 1px solid var(--ink); padding: 10px 12px; background: var(--paper); }
.swap-block .lbl { font-size: 13px; color: var(--muted); }
.swap-block .row { display: flex; align-items: center; gap: 8px; }
.swap-block .foot { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); font-family: var(--f-mono); margin-top: 2px; }
.swap-input { flex: 1; min-width: 0; border: 0; background: transparent; font-family: var(--f-mono); font-size: 26px; padding: 4px 0; outline: none; }
.swap-input:focus-visible { outline: none; }
.swap-block:focus-within { outline: 3px solid var(--accent); }
.swap-out { flex: 1; font-family: var(--f-mono); font-size: 26px; padding: 4px 0; overflow: hidden; text-overflow: ellipsis; }
.swap-out.empty-v { color: #aaa293; }
.token-pill { font-family: var(--f-mono); font-weight: 600; font-size: 13px; border: 1px solid var(--ink); padding: 3px 9px; background: var(--card); white-space: nowrap; }
.eth-toggle { display: none; align-items: center; gap: 8px; font-size: 14px; margin: 10px 0 0; }
.flip { display: flex; justify-content: center; margin: -1px 0; }
.flip button { background: var(--card); border: 1px solid var(--ink); width: 34px; height: 26px; line-height: 1; border-radius: 2px; }
.quick { display: flex; gap: 6px; margin: 10px 0 0; flex-wrap: wrap; }
.quick button, .pcts button { flex: 1; padding: 6px 4px; border: 1px solid var(--rule); background: transparent; font-family: var(--f-mono); font-size: 13px; border-radius: 2px; }
.quick button:hover, .pcts button:hover { border-color: var(--ink); background: var(--paper); }
.pcts { display: flex; gap: 6px; margin-top: 6px; }
.swap-meta { margin: 14px 0 12px; font-size: 13.5px; }
.swap-meta .row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; align-items: center; }
.swap-meta .mono { font-size: 12.5px; text-align: right; }
.trade-btn { width: 100%; background: var(--up); color: #fff; border: 1px solid var(--ink); padding: 14px; font-weight: 700; font-size: 17px; border-radius: 2px; box-shadow: 3px 3px 0 var(--ink); }
.trade-btn.sell { background: var(--down); }
.trade-btn[disabled] { opacity: .6; cursor: wait; }
.mbar { display: none; }
.trade-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.trade-row:last-child { border-bottom: 0; }
.trade-row.new { animation: flashb 1.6s; }
.trade-ic { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid currentColor; font-weight: 700; border-radius: 2px; }
.trade-ic.buy { color: var(--up); background: var(--up-soft); } .trade-ic.sell { color: var(--down); background: var(--down-soft); }
.trade-row .a { font-weight: 600; } .trade-row .b { font-size: 13px; color: var(--muted); font-family: var(--f-mono); }
.trade-row .side { text-align: right; font-family: var(--f-mono); font-size: 14px; }
.holder { padding: 8px 0; }
.holder .top { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 4px; }
.holder .track { height: 8px; border: 1px solid var(--ink); background: var(--paper); }
.holder .fill { height: 100%; background: var(--accent); }
.reward-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.reward-cell { border: 1px solid var(--ink); padding: 14px; background: var(--paper); }
.reward-cell .l { color: var(--muted); font-size: 13px; }
.reward-cell .v { font-family: var(--f-mono); font-size: 19px; margin: 3px 0 8px; overflow-wrap: anywhere; }

/* ================================================================ LAUNCH */
.lf { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
.fs { padding: 22px; }
.fs + .fs { margin-top: 22px; }
.fs h2 { font-size: 24px; font-weight: 700; margin-bottom: 4px; }
.fs > p { color: var(--muted); font-size: 15px; margin-bottom: 18px; max-width: 60ch; }
.fs .input + .input, .fs .input + .textarea, .fs .textarea + .row2, .fs .row2 + .input, .fs .row2 + .row2 { margin-top: 12px; }
.fs .row2 { margin-top: 12px; }
.paste { display: flex; gap: 10px; margin-top: 14px; }
.paste .input { font-family: var(--f-mono); font-size: 14px; }
.qm { overflow-wrap: anywhere; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--ink); background: var(--paper); display: grid; gap: 4px; font-size: 14px; }
.qm b { font-family: var(--f-mono); }
.sheetcard { position: sticky; top: 16px; padding: 20px; }
.sh-top { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.sh-top .n { font-family: var(--f-display); font-weight: 700; font-size: 22px; line-height: 1.1; overflow-wrap: anywhere; }
.sh-top .m { color: var(--muted); font-size: 13.5px; }
.lock { display: flex; gap: 8px; margin-top: 16px; padding: 10px 12px; border: 1px dashed var(--ink); font-size: 13.5px; }
.fb-row { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.fb-row .input { font-family: var(--f-mono); }
.fb-unit { font-family: var(--f-mono); font-weight: 600; }
.cost { margin: 14px 0; }
.dial2 { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1020px) {
  .hero { grid-template-columns: 1fr; gap: 40px; }
  .hero-card { max-width: 560px; }
  .split, .lf { grid-template-columns: 1fr; }
  .sheetcard { position: static; }
  .site-footer .inner { grid-template-columns: 1fr; }
  .site-footer .links { justify-content: flex-start; }
  /* token page: trade panel becomes a bottom sheet opened by the sticky bar */
  .dock { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 70; max-height: 90vh; overflow-y: auto; border-width: 2px 0 0; box-shadow: 0 -6px 0 var(--accent); transform: translateY(110%); visibility: hidden; transition: transform .25s, visibility .25s; }
  .dock.open { transform: none; visibility: visible; }
  .dock-close { display: block; position: absolute; right: 12px; top: 12px; background: none; border: 1px solid var(--ink); width: 34px; height: 34px; border-radius: 2px; }
  .dock-veil { position: fixed; inset: 0; background: rgba(20, 17, 15, .5); z-index: 65; display: none; }
  .dock-veil.open { display: block; }
  .mbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--paper); border-top: 2px solid var(--ink); padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); gap: 10px; align-items: center; }
  .mbar .mp { flex: 1; min-width: 0; font-family: var(--f-mono); font-size: 14px; line-height: 1.2; }
  .mbar .mp small { display: block; color: var(--muted); font-family: var(--f-ui); font-size: 12px; }
  .mbar button { padding: 12px 22px; border: 1px solid var(--ink); font-weight: 700; color: #fff; border-radius: 2px; }
  .mbar .b { background: var(--up); } .mbar .s { background: var(--down); }
  body.has-mbar { padding-bottom: 72px; }
  .mbar-body-pad { height: 72px; }
}
@media (max-width: 860px) {
  .mast-nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; background: var(--paper); border-bottom: 4px double var(--ink); padding: 6px var(--gutter) 14px; display: none; margin: 0; }
  .mast-nav.open { display: flex; }
  .mast-nav a { padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: 18px; }
  .mast-nav a.on { border-bottom-color: var(--ink); }
  .mast-actions { margin-left: auto; }
  .menu-btn { display: inline-block; }
  .mast-top .tagline { display: none; }
  .grid-3 { grid-template-columns: 1fr; }
  .thesis-grid, .grid-2 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .steps > div { border-right: 0; border-bottom: 1px solid var(--rule); }
  .steps > div:last-child { border-bottom: 0; }
}
@media (max-width: 720px) {
  .table-wrap { border: 0; background: transparent; }
  table.ledger, .ledger tbody, .ledger tr, .ledger td { display: block; width: 100%; }
  .ledger thead { display: none; }
  .ledger tr { background: var(--card); border: 1px solid var(--ink); margin-bottom: 12px; padding: 12px 14px; box-shadow: var(--hard-sm); }
  .ledger td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 5px 0; border: 0; text-align: right; }
  .ledger td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: 13px; text-align: left; flex: none; }
  .ledger td.cell-main { padding: 0 0 8px; margin-bottom: 4px; border-bottom: 1px dashed var(--rule); text-align: left; }
  .ledger td.cell-main::before { display: none; }
  .ledger td.hide-m { display: none; }
  .ledger tbody tr:hover { background: var(--card); }
}
@media (max-width: 560px) {
  :root { --gutter: 16px; }
  body { font-size: 15.5px; }
  .page { padding-top: 20px; padding-bottom: 56px; }
  .brand-name { font-size: 26px; } .brand img { width: 32px; height: 32px; }
  .mast-main { gap: 12px; padding-top: 11px; padding-bottom: 11px; }
  .mast-actions .connect { padding: 8px 11px; font-size: 13px; min-height: 36px; }
  .mast-top { font-size: 11.5px; }
  .hero { padding-top: 18px; }
  .hero .lede { font-size: 18px; }
  .hero .cta .btn { flex: 1 1 100%; }
  .hero-card .thesis { transform: none; }
  .thesis { box-shadow: 4px 4px 0 var(--ink); padding: 16px; }
  .thesis-text { font-size: 18px; line-height: 27px; }
  .section { margin-top: 48px; }
  .tk-head { grid-template-columns: 1fr; gap: 14px; }
  .tk-price { text-align: left; }
  .tk-id .art-lg { width: 56px; height: 56px; }
  .chart-box { height: 220px; }
  .row2 { grid-template-columns: 1fr; }
  .reward-strip { grid-template-columns: 1fr; }
  .paste { flex-direction: column; }
  .stat .v { font-size: 18px; }
  .sheet-head, .sheet-body, .sheet-foot { padding-left: 16px; padding-right: 16px; }
  .sheet-foot .btn { flex: 1; }
  .fs { padding: 16px; }
  .toasts { left: 16px; right: 16px; bottom: 80px; max-width: none; }
}
@media (max-width: 380px) {
  .brand-name { font-size: 23px; }
  .mast-actions .connect { padding: 8px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .tape { overflow-x: auto; }
}
@media (max-width: 860px) { .only-mobile { display: revert !important; } .only-desktop { display: none !important; } }


/* ================================================================ PORTFOLIO */
.who { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -8px 0 26px; }
.who code { background: var(--card); border: 1px solid var(--ink); padding: 6px 10px; font-size: 14px; overflow-wrap: anywhere; }
.who a.ext { font-size: 14px; }
.lookup { display: flex; gap: 8px; margin-left: auto; flex: 0 1 420px; min-width: 0; }
.lookup .input { font-family: var(--f-mono); font-size: 14px; min-height: 40px; padding: 8px 10px; }
.lookup .btn { min-height: 40px; padding: 8px 14px; }
.pf-hero { padding: 44px 24px; }
.pf-hero .lookup { margin: 22px auto 0; max-width: 460px; flex: none; }
.stat .v.sm { font-size: 16px; line-height: 1.3; font-family: var(--f-ui); font-weight: 600; }
.stat .v a { color: var(--ink); }
.stat .sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.share { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.share .track { width: 70px; height: 8px; border: 1px solid var(--ink); background: var(--paper); }
.share .fill { height: 100%; background: var(--accent); }
.launch-card { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.launch-card .lc-head { display: flex; gap: 12px; align-items: center; min-width: 0; }
.launch-card .lc-head a.tkcell { flex: 1; }
.launch-card .lc-meta { font-family: var(--f-mono); font-size: 13px; color: var(--muted); text-align: right; white-space: nowrap; }
.launch-card .reward-strip { margin-top: 0; }
.launch-card .reward-cell .v { font-size: 17px; }
.launch-card .reward-cell small { display: block; color: var(--muted); font-size: 12px; margin-top: -4px; margin-bottom: 6px; }
.launch-card .lc-foot { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.launch-card .note { font-size: 13px; color: var(--muted); }
.mini-split { display: flex; height: 8px; border: 1px solid var(--ink); width: 100%; max-width: 160px; }
.mini-split i { display: block; height: 100%; }
.mini-split i + i { border-left: 1px solid var(--ink); }

/* ================================================================ STATS */
.stats-8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.barlist { display: grid; gap: 0; border: 1px solid var(--ink); background: var(--card); }
.bar-row { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; overflow: hidden; }
.bar-row:last-child { border-bottom: 0; }
.bar-row:hover { background: #F6F1E7; color: var(--ink); }
.bar-row .bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent-soft); z-index: 0; transition: width .6s ease-out; }
.bar-row.burn .bar { background: var(--burn-soft); }
.bar-row > *:not(.bar) { position: relative; z-index: 1; }
.bar-row .rk { font-family: var(--f-display); font-weight: 800; font-size: 20px; color: var(--muted); }
.bar-row .nm { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 700; }
.bar-row .nm span.t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row .vl { font-family: var(--f-mono); font-size: 15px; text-align: right; white-space: nowrap; }
.bar-row .vl small { display: block; color: var(--muted); font-size: 12px; }
.hist { display: block; width: 100%; height: 170px; border-bottom: 1px solid var(--ink); }
.hist-labels { display: grid; grid-template-columns: repeat(9, 1fr); font-family: var(--f-mono); font-size: 11px; color: var(--muted); text-align: center; margin-top: 6px; }
.hist-counts { display: grid; grid-template-columns: repeat(9, 1fr); font-family: var(--f-mono); font-size: 12px; text-align: center; margin-bottom: 4px; }
.sample-note { font-size: 13px; color: var(--muted); margin-top: 12px; max-width: 80ch; }
.pairs-list { display: grid; gap: 10px; }
.pairs-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 14px; }
.pairs-row .track { height: 10px; border: 1px solid var(--ink); background: var(--paper); }
.pairs-row .fill { height: 100%; background: var(--accent); }

/* ================================================================ DOCS */
.docs-wrap { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 56px; align-items: start; }
.toc { position: sticky; top: 18px; font-size: 14.5px; max-height: calc(100vh - 36px); overflow-y: auto; }
.toc-toggle { display: none; }
.toc .toc-label { font-family: var(--f-display); font-weight: 700; font-size: 15px; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
.toc a { display: block; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 3px solid transparent; color: var(--muted); text-decoration: none; line-height: 1.3; }
.toc a:hover { color: var(--ink); }
.toc a.on { color: var(--ink); font-weight: 700; border-left-color: var(--accent); }
.prose { min-width: 0; max-width: 760px; font-size: 17px; line-height: 1.65; }
.prose > section { margin-bottom: 64px; scroll-margin-top: 16px; }
.prose h2 { font-size: clamp(28px, 3.4vw, 38px); font-weight: 700; letter-spacing: -.02em; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--ink); }
.prose h2 .sn { font-family: var(--f-mono); font-weight: 500; font-size: .5em; color: var(--accent-ink); vertical-align: .55em; margin-right: 10px; letter-spacing: 0; }
.prose h3 { font-size: 21px; font-weight: 700; margin: 30px 0 8px; }
.prose p + p, .prose p + ul, .prose p + ol, .prose ul + p, .prose ol + p { margin-top: 14px; }
.prose ul, .prose ol { padding-left: 22px; margin: 0; }
.prose li { margin: 6px 0; padding-left: 4px; }
.prose li::marker { color: var(--accent-ink); }
.prose code { font-size: .86em; background: var(--card); border: 1px solid var(--rule); padding: 1px 6px; overflow-wrap: anywhere; }
.prose .lede { font-family: var(--f-display); font-size: 21px; line-height: 1.5; }
.prose strong { font-weight: 700; }
.callout { margin: 20px 0; padding: 14px 18px; border: 1px solid var(--ink); border-left-width: 6px; background: var(--card); font-size: 16px; line-height: 1.55; }
.callout.note { border-left-color: var(--accent); }
.callout.risk { border-left-color: var(--burn); background: var(--burn-soft); color: #4a2005; }
.callout b:first-child { font-family: var(--f-display); }
.figure { margin: 24px 0; border: 1px solid var(--ink); background: var(--card); padding: 12px; }
.figure svg { display: block; width: 100%; height: auto; }
.figure figcaption { font-size: 13.5px; color: var(--muted); margin-top: 8px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1px solid var(--ink); background: var(--card); margin: 22px 0; }
.facts > div { padding: 12px 16px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin: 0 -1px -1px 0; }
.facts .l { font-size: 13px; color: var(--muted); line-height: 1.3; }
.facts .v { font-family: var(--f-mono); font-size: 18px; margin-top: 2px; }
.ex { margin: 22px 0; border: 2px solid var(--ink); background: var(--card); box-shadow: var(--hard-sm); padding: 16px 18px; font-size: 15.5px; }
.ex h4 { font-family: var(--f-display); font-size: 18px; margin-bottom: 8px; }
.ex .kv b { white-space: nowrap; }
.dtable { width: 100%; border-collapse: collapse; font-size: 15px; margin: 18px 0; border: 1px solid var(--ink); background: var(--card); }
.dtable th { text-align: left; font-size: 13px; color: var(--muted); padding: 9px 12px; border-bottom: 1px solid var(--ink); }
.dtable td { padding: 9px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; line-height: 1.45; }
.dtable tr:last-child td { border-bottom: 0; }
.dtable code { white-space: nowrap; }
.dtable td:first-child { white-space: nowrap; }
.checks { list-style: none; padding: 0 !important; display: grid; gap: 10px; }
.checks li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; margin: 0; padding: 0; }
.checks li::before { content: "\2713"; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--ink); background: var(--accent-soft); color: var(--accent-ink); font-weight: 800; font-size: 14px; margin-top: 2px; }
.checks li.no::before { content: "\00d7"; background: var(--down-soft); color: var(--down); border-color: var(--down); font-size: 18px; }
.addr-list { display: grid; gap: 0; border: 1px solid var(--ink); background: var(--card); margin: 18px 0; }
.addr-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--rule); }
.addr-row:last-child { border-bottom: 0; }
.addr-row .nm { font-weight: 700; font-size: 15px; }
.addr-row .nm small { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; }
.addr-row code { background: none; border: 0; padding: 0; font-size: 13px; word-break: break-all; }
.addr-row .acts { display: flex; gap: 8px; align-items: center; }
.addr-row .acts a { font-size: 13px; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq details:first-of-type { border-top: 1px solid var(--ink); }
.faq summary { cursor: pointer; padding: 15px 34px 15px 0; font-weight: 600; font-size: 17px; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 11px; font-family: var(--f-mono); font-size: 24px; font-weight: 400; color: var(--accent-ink); }
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 0 18px; color: #2b2723; font-size: 16.5px; }
.faq details > div p + p { margin-top: 10px; }

@media (max-width: 1020px) {
  .lookup { margin-left: 0; flex: 1 1 100%; }
}
@media (max-width: 900px) {
  .docs-wrap { grid-template-columns: 1fr; gap: 0; }
  .toc { position: sticky; top: 0; z-index: 30; max-height: none; overflow: visible; background: var(--paper); margin: 0 calc(var(--gutter) * -1) 20px; padding: 0 var(--gutter); border-bottom: 1px solid var(--ink); }
  .toc-toggle { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0; background: none; border: 0; font-weight: 600; font-size: 15px; text-align: left; }
  .toc-toggle .cur { color: var(--accent-ink); }
  .toc-toggle::after { content: "\25be"; font-size: 16px; transition: transform .2s; }
  .toc.open .toc-toggle::after { transform: rotate(180deg); }
  .toc .toc-label { display: none; }
  .toc ol { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border: 0; border-bottom: 2px solid var(--ink); padding: 4px var(--gutter) 12px; box-shadow: 0 10px 0 rgba(20, 17, 15, .12); max-height: 70vh; overflow-y: auto; }
  .toc.open ol { display: block; }
  .toc a { padding: 11px 0; border-left: 0; border-bottom: 1px solid var(--rule); margin: 0; font-size: 16px; }
  .toc a.on { border-left: 0; color: var(--accent-ink); }
  .prose > section { scroll-margin-top: 56px; }
}
@media (max-width: 720px) {
  .stats-8 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .addr-row { grid-template-columns: 1fr; gap: 6px; }
  .dtable.stack-m, .dtable.stack-m tbody, .dtable.stack-m tr, .dtable.stack-m td { display: block; width: 100%; }
  .dtable.stack-m thead { display: none; }
  .dtable.stack-m tr { padding: 10px 12px; border-bottom: 1px solid var(--rule); }
  .dtable.stack-m td { border: 0; padding: 2px 0; white-space: normal; }
  .dtable.stack-m td:first-child { font-weight: 700; white-space: normal; }
  .launch-card .reward-strip { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .prose { font-size: 16.5px; }
  .prose .lede { font-size: 19px; }
  .launch-card .reward-strip { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; padding: 10px; }
  .hist-labels { font-size: 9.5px; }
  .pf-hero { padding: 32px 16px; }
}


/* ================================================================ LAUNCH: THE PROSPECTUS (cast.html, .cp- prefix)
   One question at a time. Ledger column | wizard stage | live listing. */
.cp-page { max-width: 1320px; padding-top: 40px; }
.cp-wrap { display: grid; grid-template-columns: 208px minmax(0, 1fr) 372px; gap: 0 52px; align-items: start; }

/* ledger */
.cp-ledger { list-style: none; margin: 0; padding: 0; position: sticky; top: 16px; border-top: 1px solid var(--ink); }
.cp-ledger li { border-bottom: 1px solid var(--rule); }
.cp-lstep { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 10px; width: 100%; text-align: left; background: none; border: 0; border-radius: 0; padding: 16px 4px 16px 12px; position: relative; color: var(--muted); }
.cp-lstep .n { font-family: var(--f-display); font-weight: 800; font-size: 42px; line-height: .9; letter-spacing: -.04em; color: var(--rule); }
.cp-lstep .tx { min-width: 0; display: block; padding-top: 3px; }
.cp-lstep .t { display: block; font-weight: 600; font-size: 16px; line-height: 1.2; }
.cp-lstep .s { display: block; font-size: 13px; line-height: 1.35; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-lstep:disabled { cursor: default; }
.cp-lstep.is-done { color: var(--ink); }
.cp-lstep.is-done .n { color: var(--ink); }
.cp-lstep.is-done .t::after { content: " \2713"; color: var(--up); font-weight: 700; }
.cp-lstep.is-done:not(:disabled):hover .t { text-decoration: underline; text-underline-offset: 3px; }
.cp-lstep.is-active { color: var(--ink); }
.cp-lstep.is-active .n { color: var(--accent-ink); }
.cp-lstep.is-active::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; background: var(--accent); }
.cp-lstep.is-todo .t { color: var(--muted); }

/* stage + prompts */
.cp-stage { min-width: 0; min-height: 560px; }
.cp-panel, .cp-done { animation: cp-in .26s ease-out; }
.cp-panel[hidden], .cp-done[hidden] { display: none; }
@keyframes cp-in { from { opacity: 0; transform: translateY(8px); } }
.cp-q { font-size: clamp(36px, 5.6vw, 66px); font-weight: 800; letter-spacing: -.035em; line-height: .98; font-variation-settings: "opsz" 144; margin-bottom: 16px; max-width: 14em; }
.cp-q:focus { outline: none; }
.cp-lede { color: var(--muted); font-size: 17px; max-width: 54ch; margin-bottom: 36px; }
.cp-label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.cp-field { margin-top: 30px; }
.cp-namerow { display: grid; grid-template-columns: minmax(0, 1fr) 13ch; gap: 30px; }
.cp-in { width: 100%; min-height: 60px; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; background: transparent; padding: 6px 0 8px; font-family: var(--f-display); font-weight: 700; font-size: clamp(28px, 4vw, 42px); letter-spacing: -.02em; line-height: 1.15; }
.cp-in::placeholder { color: #9a9285; font-weight: 400; }
.cp-in:focus { outline: none; border-bottom-color: var(--accent); box-shadow: 0 3px 0 var(--accent); }
.cp-in:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; box-shadow: none; }
.cp-in-sym { font-family: var(--f-mono); font-weight: 500; letter-spacing: 0; text-transform: uppercase; font-size: clamp(24px, 3.4vw, 34px); }
.cp-logo-row { display: flex; gap: 18px; align-items: center; margin-top: 30px; }
.cp-logo { flex: none; width: 84px; height: 84px; display: grid; place-items: center; border: 2px dashed var(--ink); background: var(--card); cursor: pointer; border-radius: 2px; }
.cp-logo.has { border-style: solid; }
.cp-logo .art { width: 100%; height: 100%; border: 0; background: transparent; color: var(--ink); font-size: 34px; font-weight: 400; }
.cp-logo.has .art { background: var(--ink); }
.cp-logo:hover { background: var(--paper); }
#logoFile:focus-visible ~ .cp-logo, input#logoFile:focus-visible + .cp-logo { outline: 3px solid var(--accent); outline-offset: 3px; }
.cp-link { background: none; border: 0; padding: 4px 0 0; color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; font-size: 13.5px; }
.cp-link[hidden] { display: none; }
.cp-notein { width: 100%; display: block; resize: vertical; min-height: 136px; margin-top: 8px; padding: 8px 16px; border: 1px solid var(--ink); border-radius: 2px; color: var(--ink);
  font-family: var(--f-display); font-style: italic; font-size: 21px; line-height: 32px; font-variation-settings: "opsz" 24;
  background: var(--card) repeating-linear-gradient(0deg, transparent 0 31px, rgba(91, 108, 255, .16) 31px 32px) 0 8px local; }
.cp-notein::placeholder { color: #8b8374; }
.cp-notein:focus { outline: 3px solid var(--accent); outline-offset: 0; }
.cp-more { margin-top: 24px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.cp-more summary { cursor: pointer; padding: 14px 30px 14px 0; font-weight: 600; list-style: none; position: relative; }
.cp-more summary::-webkit-details-marker { display: none; }
.cp-more summary::after { content: "+"; position: absolute; right: 4px; top: 8px; font-family: var(--f-mono); font-size: 24px; font-weight: 400; color: var(--accent-ink); }
.cp-more[open] summary::after { content: "\2212"; }
.cp-more summary small { font-weight: 400; margin-left: 6px; }
.cp-more-body { padding: 4px 0 18px; }
.cp-rule { border-top: 1px solid var(--rule); margin: 26px 0 18px; }
.cp-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--ink); }
.cp-navr { display: flex; align-items: center; gap: 16px; }
.cp-key { font-size: 13px; color: var(--muted); }
.cp-next { min-height: 52px; padding: 14px 28px; font-size: 16px; }
.cp-panel .seg { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); }
.cp-panel .cp-fb .seg { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.cp-panel .seg button { min-height: 58px; }
.cp-panel .paste { margin-top: 16px; }

/* fee */
.cp-fee { display: flex; align-items: baseline; gap: 8px; font-family: var(--f-display); font-weight: 800; font-size: clamp(64px, 10vw, 104px); line-height: 1; letter-spacing: -.05em; margin-bottom: 8px; }
.cp-feein { width: 4.4ch; min-width: 0; font: inherit; letter-spacing: inherit; color: inherit; border: 0; border-bottom: 3px solid var(--ink); border-radius: 0; background: transparent; padding: 0 0 2px; }
.cp-feein:focus { outline: none; border-bottom-color: var(--accent); box-shadow: 0 3px 0 var(--accent); }
.cp-feein:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; box-shadow: none; }

/* review: first buy + receipt */
.cp-fb { margin-bottom: 30px; }
.cp-fb .seg { margin-top: 8px; }
.cp-receipt { position: relative; background: var(--card); border: 1px solid var(--ink); padding: 26px 28px 22px; box-shadow: 5px 5px 0 var(--rule); margin-top: 6px; }
.cp-receipt::after { content: ""; position: absolute; top: -1px; right: -1px; width: 34px; height: 34px;
  background: linear-gradient(225deg, var(--paper) 0 calc(50% - .5px), var(--ink) calc(50% - .5px) calc(50% + .5px), var(--rule) calc(50% + .5px)); }
.cp-rc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-right: 30px; margin-bottom: 14px; }
.cp-rc-title { font-family: var(--f-display); font-weight: 800; font-size: 28px; letter-spacing: -.02em; }
.cp-rc-head .mono { font-size: 12.5px; }
.cp-rc-tok { display: flex; gap: 12px; align-items: center; padding: 12px 0 14px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); margin-bottom: 6px; }
.cp-rc-tok b { display: block; font-family: var(--f-display); font-size: 20px; overflow-wrap: anywhere; }
.cp-rc-tok small { color: var(--muted); font-size: 13.5px; }
.cp-line { display: flex; align-items: baseline; gap: 8px; padding: 9px 0; font-size: 15px; }
.cp-line i { flex: 1; border-bottom: 1px dotted var(--muted); min-width: 12px; transform: translateY(-3px); }
.cp-line b { font-family: var(--f-mono); font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.cp-line.total { border-top: 3px double var(--ink); margin-top: 8px; padding-top: 14px; font-weight: 700; font-size: 17px; }
.cp-line.total b { font-weight: 600; font-size: 18px; }
.cp-signline { color: var(--muted); font-size: 13.5px; padding-bottom: 0; }
.cp-rc-split { padding: 10px 0 8px; }
.cp-rc-lbl { font-size: 14px; margin-bottom: 8px; }
.cp-rc-note { font-size: 13.5px; color: var(--muted); padding: 6px 0 2px; }
.cp-go { width: 100%; min-height: 68px; margin-top: 26px; font-size: 20px; font-family: var(--f-display); font-weight: 700; letter-spacing: -.01em; box-shadow: 5px 5px 0 var(--accent); }
.cp-go:hover { box-shadow: 7px 7px 0 var(--accent); }
.cp-fine { text-align: center; }

/* success */
.cp-addr { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var(--ink); background: var(--card); margin-bottom: 8px; }
.cp-addr[hidden] { display: none; }
.cp-addr code { font-size: 14px; overflow-wrap: anywhere; min-width: 0; }
.cp-addr-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.cp-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin: 18px 0; padding: 14px 16px; border: 1px solid var(--burn); border-left-width: 6px; background: var(--burn-soft); color: #5a2506; font-size: 15px; }
.cp-notice.ok { border-color: var(--up); background: var(--up-soft); color: var(--ink); }
.cp-notice small { font-size: 13px; }
.cp-notice .muted { color: #5a2506; opacity: .85; }
.cp-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

/* live listing */
.cp-listing { position: sticky; top: 16px; background: var(--card); border: 1px solid var(--ink); }
.cp-lbar { display: none; }
.cp-lh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; background: var(--ink); color: var(--paper); padding: 9px 14px; font-size: 13px; }
.cp-lh b { font-family: var(--f-display); font-size: 16px; font-weight: 600; }
.cp-lh span { opacity: .8; }
.cp-cap { padding: 16px 14px 6px; font-size: 13px; color: var(--muted); }
.cp-mhead, .cp-mrow { display: grid; grid-template-columns: 40px minmax(0, 1fr) 54px 74px; gap: 10px; align-items: center; padding: 0 14px; }
.cp-mhead { font-size: 12px; color: var(--muted); padding-bottom: 4px; }
.cp-mhead .r, .cp-mrow .r { text-align: right; }
.cp-mrow { padding-top: 12px; padding-bottom: 14px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); background: var(--paper); }
.cp-mn { min-width: 0; display: block; }
.cp-mn b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-mn small { font-family: var(--f-mono); font-size: 12.5px; color: var(--muted); }
.cp-th { padding: 4px 14px 16px; }
.cp-th-id { display: flex; gap: 14px; align-items: center; padding: 14px 0; }
.cp-th-name { font-family: var(--f-display); font-weight: 800; font-size: 28px; letter-spacing: -.03em; line-height: 1; overflow-wrap: anywhere; }
.cp-th-sub { margin-top: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: 14px; }
.cp-th-stats { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-bottom: 14px; }
.cp-th-stats > div { padding: 10px 0; }
.cp-th-stats > div + div { padding-left: 14px; border-left: 1px solid var(--rule); }
.cp-th-stats small { display: block; color: var(--muted); font-size: 12.5px; }
.cp-th-stats b { font-size: 20px; font-weight: 500; }
.cp-mini-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.cp-mini-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cp-mini-legend em { width: 10px; height: 10px; border: 1px solid var(--ink); display: inline-block; }
.cp-note { margin: 4px 14px 18px; padding: 12px 16px 12px; background: var(--paper) repeating-linear-gradient(0deg, transparent 0 27px, rgba(91, 108, 255, .14) 27px 28px) 0 40px; border: 2px solid var(--ink); box-shadow: var(--hard-sm); transform: rotate(-.8deg); }
.cp-note[hidden] { display: none; }
.cp-note figcaption { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.cp-note blockquote { margin: 0; font-family: var(--f-display); font-style: italic; font-size: 18px; line-height: 28px; overflow-wrap: anywhere; font-variation-settings: "opsz" 24; }
.cp-sign-off { margin-top: 8px; text-align: right; font-family: var(--f-display); font-style: italic; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }

/* narrower than 3 columns: ledger becomes a strip, listing stays beside the stage */
@media (max-width: 1180px) {
  .cp-wrap { grid-template-columns: minmax(0, 1fr) 340px; gap: 0 36px; }
  .cp-ledger { grid-column: 1 / -1; position: static; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--ink); margin-bottom: 40px; }
  .cp-ledger li { border-bottom: 0; border-right: 1px solid var(--rule); }
  .cp-ledger li:last-child { border-right: 0; }
  .cp-lstep { padding: 12px 10px; }
  .cp-lstep .n { font-size: 34px; }
  .cp-lstep.is-active::before { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 3px; }
  .cp-listing { grid-column: 2; grid-row: 2; }
  .cp-stage { grid-column: 1; grid-row: 2; }
}
/* phone and small tablet: one column, listing becomes a collapsible bar */
@media (max-width: 860px) {
  .cp-body { padding-bottom: 64px; }
  .cp-page { padding-top: 22px; }
  .cp-wrap { display: block; }
  .cp-ledger { margin-bottom: 26px; }
  .cp-lstep { grid-template-columns: minmax(0, 1fr); row-gap: 4px; padding: 10px 8px; }
  .cp-lstep .n { font-size: 26px; }
  .cp-lstep .t { font-size: 13px; }
  .cp-lstep .s { display: none; }
  .cp-stage { min-height: 0; }
  .cp-key { display: none; }
  .cp-listing { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 55; border-width: 2px 0 0; box-shadow: 0 -4px 0 var(--accent); }
  .cp-lbar { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom)); background: var(--paper); border: 0; border-radius: 0; text-align: left; }
  .cp-lbar .art { width: 36px; height: 36px; font-size: 13px; }
  .cp-lbar-t { flex: 1; min-width: 0; display: block; line-height: 1.25; }
  .cp-lbar-t b { display: block; font-family: var(--f-display); font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cp-lbar-t small { display: block; font-family: var(--f-mono); font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cp-lbar-c { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
  .cp-lbar-c i { width: 8px; height: 8px; border-right: 2px solid var(--ink); border-top: 2px solid var(--ink); transform: rotate(-45deg) translate(-1px, 1px); transition: transform .2s; }
  .cp-listing.open .cp-lbar-c i { transform: rotate(135deg) translate(-1px, 1px); }
  .cp-lbody { display: none; max-height: 66vh; overflow-y: auto; border-bottom: 1px solid var(--ink); }
  .cp-listing.open .cp-lbody { display: block; }
}
@media (max-width: 560px) {
  .cp-q { font-size: 38px; }
  .cp-lede { font-size: 16px; margin-bottom: 28px; }
  .cp-namerow { grid-template-columns: 1fr; gap: 22px; }
  .cp-in-sym { max-width: 14ch; }
  .cp-nav { margin-top: 30px; }
  .cp-next { padding: 14px 20px; }
  .cp-actions .btn { flex: 1 1 100%; white-space: normal; text-align: center; }
  .cp-receipt { padding: 20px 16px 18px; }
  .cp-line { font-size: 14.5px; }
  .cp-panel .seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-panel .cp-fb .seg { grid-template-columns: 1fr; }
  .cp-notein { font-size: 19px; }
  .cp-addr-acts .btn { flex: 1; }
}
@media (max-width: 380px) {
  .cp-body .mast-main { gap: 8px; }
  .cp-body .brand-name { font-size: 21px; }
  .cp-body .brand { gap: 8px; }
  .cp-body .mast-actions { gap: 6px; }
  .cp-body .mast-actions .connect { padding: 8px 7px; font-size: 12.5px; }
  .cp-body .menu-btn { padding: 8px 9px; }
}