/* BOTs — terminal UI. Black screen, one monospace size, thin box panels with titles cut into the top border.
   green = running / profit / buy / focused panel · blue = labels, links, keys · red = loss / error · grey = secondary. */
:root {
  --bg: #000;
  --fg: #dadada;
  --text: #ffffff;
  --muted: #9e9e9e;
  --faint: #6c6c6c;
  --box: #a8a8a8;
  --line: #3a3a3a;
  --line-2: #585858;
  --sel: #262626;
  --green: #5fd75f;
  --blue: #5f87ff;
  --red: #ff5f5f;
  --magenta: #d75fd7;
  --orange: #ff8700;
  /* names used by older rules and page JS */
  --amber: var(--blue);
  --amber-2: #87afff;
  --amber-soft: transparent;
  --eye: var(--green);
  --pos: var(--green);
  --neg: var(--red);
  --burn: var(--orange);
  --panel: #000;
  --panel-2: #000;
  --panel-3: var(--sel);
  --bg-2: #000;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display: var(--mono);
  --fs: 15px;
  --lh: 24px;
  --max: 1360px;
  --gut: 16px;
  --cut: 0px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: #000; }
html, body { margin: 0; }
body {
  background: #000; color: var(--fg);
  font: 400 var(--fs)/var(--lh) var(--mono);
  min-height: 100vh; overflow-x: hidden; padding-bottom: 34px;
  -webkit-font-smoothing: antialiased;
}
*, *::before, *::after { border-radius: 0 !important; box-shadow: none !important; text-shadow: none !important; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { font: 700 var(--fs)/var(--lh) var(--mono); margin: 0; color: var(--text); letter-spacing: 0; }
h1 em, h2 em { font-style: normal; color: var(--green); }
p { margin: 0 0 var(--lh); }
small, .small { font-size: var(--fs); }
code, kbd { font: inherit; color: var(--blue); background: none; padding: 0; }
::selection { background: var(--blue); color: #000; }
[hidden] { display: none !important; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.pos { color: var(--green); }
.neg { color: var(--red); }
.amber, .link { color: var(--blue); }
.link:hover, a.amber:hover { text-decoration: underline; }
.burn { color: var(--orange); }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.r { text-align: right; }
.lbl { font: inherit; color: var(--fg); text-transform: none; letter-spacing: 0; }
.flame { display: none; }

/* ——— panels: thin box, title cut into the top border ——— */
.plate, .tbl-wrap, .phead, .co, .bay, .flow, .idle-note {
  position: relative; background: #000; border: 1px solid var(--box);
  margin-top: 10px; clip-path: none;
}
.plate::before, .plate::after { content: none !important; }
.screws::after { content: none; }
/* single titles */
.plate > .lbl:first-child, .phead .kicker, .bay .kicker, .why-band .plate > h3:first-child, .wallet-card > h3, .card > .no {
  position: absolute; top: calc(var(--lh) / -2); left: 1ch; margin: 0; padding: 0 1px;
  background: #000; color: var(--fg); font-weight: 400; line-height: var(--lh); white-space: nowrap; max-width: calc(100% - 2ch); overflow: hidden; text-overflow: ellipsis;
}
/* title rows (title left, link right) */
.plate > .sec-head:first-child, .plate > .panel-h:first-child {
  position: absolute; top: calc(var(--lh) / -2); left: 1ch; right: 1ch; margin: 0 !important; padding: 0; border: 0 !important; height: auto;
  display: flex; justify-content: space-between; align-items: center; gap: 2ch; flex-wrap: nowrap; background: none; pointer-events: none;
}
.plate > .sec-head:first-child > *, .plate > .panel-h:first-child > * { background: #000; padding: 0 1px; pointer-events: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.plate > .sec-head:first-child h2, .plate > .panel-h:first-child h2 { font-weight: 400; color: var(--fg); flex: none; }
/* focused panel of the page */
.phead, .bay, .bot-hero, .coin-hero { border-color: var(--green); }
.phead .kicker, .bay .kicker, .bot-hero .kicker, .coin-hero .kicker { color: var(--green); font-weight: 700; }

/* section heads outside panels: a top rule with the title cut in */
.sec-head {
  position: relative; display: flex; justify-content: space-between; align-items: center; gap: 2ch;
  border-top: 1px solid var(--box); margin: 0 0 calc(var(--lh) / 2); padding: 0 1ch; height: 1px; flex-wrap: nowrap;
}
.sec-head > * { background: #000; padding: 0 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sec-head h2 { font-weight: 400; color: var(--fg); flex: none; }
.sec-head h2 .n, .panel-h h2 .n { color: var(--faint); border: 0; padding: 0; font: inherit; }
.sec-head h2 .n::before, .panel-h h2 .n::before { content: '('; } .sec-head h2 .n::after, .panel-h h2 .n::after { content: ')'; }
.sec-head .more, .panel-h .more { color: var(--blue); font: inherit; text-transform: none; letter-spacing: 0; }
.sec-head .more:hover, .panel-h .more:hover { text-decoration: underline; }
/* head followed by a boxed panel: share the panel's top border */
.sec-head:has(+ .tbl-wrap), .sec-head:has(+ .plate) { border-top-color: transparent; z-index: 1; margin-bottom: 0; }
.sec-head + .tbl-wrap, .sec-head + .plate { margin-top: -1px; }
.sec { margin-top: calc(var(--lh) * 1.5); }

/* ——— header: one line of tabs ——— */
.top { position: sticky; top: 0; z-index: 50; background: #000; border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; gap: 2ch; height: 34px; }
.brand { display: flex; align-items: center; gap: 1ch; flex: none; }
.brand-face { width: 18px; height: 18px; }
.brand b { font-weight: 700; color: var(--green); }
.nav { display: flex; align-items: center; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; }
.nav-group { display: flex; align-items: center; }
.nav-group + .nav-group::before { content: '│'; color: var(--line-2); padding: 0 1.5ch; }
.nav a { color: var(--fg); padding: 0; }
.nav a + a::before { content: ' - '; color: var(--faint); white-space: pre; }
.nav a kbd { color: var(--blue); margin-right: .5ch; }
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] { color: var(--green); font-weight: 700; }
.top-act { display: flex; align-items: center; gap: 1ch; flex: none; }
.menu-btn { display: none !important; }

/* bottom hint bar */
.hint { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; justify-content: space-between; gap: 2ch; padding: 6px var(--gut); background: #000; border-top: 1px solid var(--line); white-space: nowrap; }
.hint-keys { color: var(--blue); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hint-keys b { font-weight: 400; color: var(--blue); }
.hint-st { flex: none; }
.mode { color: var(--magenta); background: none; border: 0; padding: 0; height: auto; font: inherit; }
.mode i { display: none; }
.mode.live { color: var(--green); }
.hint-coin { color: var(--green); }

/* ——— buttons: [ Label ] ——— */
.btn, .pg {
  display: inline-flex; align-items: center; justify-content: center; height: auto; padding: 0; gap: 0;
  background: none !important; border: 0; clip-path: none; cursor: pointer; white-space: nowrap;
  font: inherit; letter-spacing: 0; text-transform: none; color: var(--blue); min-width: 0;
}
.btn::before, .pg::before { content: '[ '; white-space: pre; color: var(--faint); }
.btn::after, .pg::after { content: ' ]'; white-space: pre; color: var(--faint); }
.btn:hover, .pg:hover:not(:disabled) { color: var(--text); }
.btn.primary { color: var(--green); font-weight: 700; }
.btn .arr { font: inherit; }
.pg.on { color: #000; background: var(--green) !important; font-weight: 700; }
.pg.on::before, .pg.on::after { color: #000; }
.pg:disabled { color: var(--faint); cursor: default; }
.pgs { display: flex; justify-content: center; align-items: center; gap: 1ch; flex-wrap: wrap; margin: 10px 0 4px; }
.pgs:empty { display: none; }
.pg-gap { color: var(--faint); }
.seg { display: inline-flex; gap: 1ch; flex-wrap: wrap; background: none; border: 0; padding: 0; }
.seg button { background: none; border: 0; padding: 0; height: auto; cursor: pointer; font: inherit; letter-spacing: 0; text-transform: none; color: var(--fg); }
.seg button + button::before { content: '- '; color: var(--faint); }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { color: var(--green); font-weight: 700; background: none; }

/* inputs */
input, select, textarea { background: #000; border: 1px solid var(--line-2); color: var(--text); padding: 2px 1ch; height: 26px; caret-color: var(--green); outline: none; }
input::placeholder { color: var(--faint); }
input:focus, select:focus { border-color: var(--green); }
select { -webkit-appearance: none; appearance: none; padding-right: 3ch; cursor: pointer;
  background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%235f87ff'/%3E%3C/svg%3E") no-repeat right 1ch center; }

/* ——— page head ——— */
.page { padding-top: 14px; padding-bottom: 20px; }
.phead { display: flex; align-items: flex-start; justify-content: space-between; gap: 2ch; padding: 14px 2ch 10px; margin-bottom: 14px; flex-wrap: wrap; }
.phead > div:first-child { min-width: 0; flex: 1 1 400px; }
.phead h1 { font-size: var(--fs); }
.phead p { color: var(--muted); max-width: 110ch; margin: 0; }
.kicker { font: inherit; text-transform: none; letter-spacing: 0; color: var(--green); margin: 0; display: block; }
.kicker::before { content: none; }
.paper-note { display: block; margin: 0 0 14px; padding: 0 1ch; color: var(--muted); background: none; border: 0; }
.paper-note b { color: var(--magenta); font: inherit; letter-spacing: 0; text-transform: lowercase; margin-right: 1ch; }
.paper-note b::after { content: ':'; }

/* status words */
.pill { display: inline; height: auto; padding: 0; border: 0 !important; background: none !important; font: inherit; letter-spacing: 0; text-transform: none; color: var(--faint); }
.pill.draft, .pill.paper { color: var(--faint); }
.pill.posted, .pill.buy { color: var(--green); }
.pill.sell { color: var(--fg); }
.pill.failed { color: var(--red); }
.pill.burnp { color: var(--orange); }
a.pill:hover { text-decoration: underline; }
.status { display: inline; height: auto; padding: 0; border: 0; font: inherit; letter-spacing: 0; text-transform: none; color: var(--faint); font-weight: 400; }
.status i { display: none; }
.status.in_trade { color: var(--green); }
.status.new { color: var(--blue); }

/* ——— tables: terminal listings ——— */
.tbl-wrap { overflow-x: auto; padding: 8px 1ch 6px; }
.tbl { width: 100%; border-collapse: collapse; font: inherit; }
.tbl th { text-align: left; font: inherit; font-weight: 400; color: var(--text); letter-spacing: 0; text-transform: none; padding: 0 1ch 2px; border: 0; background: none; white-space: nowrap; }
.tbl td { padding: 1px 1ch; border: 0; vertical-align: middle; }
.tbl tbody tr:hover td { background: var(--sel); }
.tbl .r { text-align: right; }
.tbl .why { color: var(--muted); max-width: 52ch; }
.tbl tr:target td { background: var(--sel); color: var(--text); }
.tbl td.empty, .tbl td.skeleton { text-align: left; padding: 6px 1ch; }
.botcell { display: inline-flex; align-items: center; gap: 1ch; white-space: nowrap; font: inherit; vertical-align: middle; }
.botcell:hover { color: var(--text); text-decoration: underline; }
.coinlink { color: var(--blue); font-weight: 400; }
.coinlink:hover { text-decoration: underline; }
.txlink { color: var(--blue); }
.txlink:hover { text-decoration: underline; }
.copy { cursor: pointer; background: none; border: 0; padding: 0; color: var(--text); height: auto; }
.copy:hover { color: var(--green); }

/* facts / numbers boxes */
.sumrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 1ch; margin-bottom: 14px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 1ch; margin: 0 0 14px; }
.facts-8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fact { padding: 12px 1ch 6px; min-width: 0; }
.fact .v, .fact .v.num { font: 700 var(--fs)/var(--lh) var(--mono); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fact .v.burn { color: var(--orange); } .fact .v.amber { color: var(--blue); }
.fact .s { color: var(--muted); }
.fact .s a img, .fact .s a span.face { width: 20px; height: 20px; }

/* bars and the $200 split */
.bar { position: relative; height: var(--lh); background: var(--sel); border: 0; overflow: hidden; }
.bar > i { position: absolute; inset: 0 auto 0 0; display: block; background: var(--green); animation: none; }
.bar .ticks { display: none; }
.split { display: grid; grid-template-columns: 50fr 30fr 10fr 10fr; gap: 0 2ch; margin-top: 6px; }
.split > div { padding: 0; background: none; border: 0; min-width: 0; }
.split b { display: block; font-weight: 700; }
.split span { display: block; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.split .c-bank b { color: var(--green); } .split .c-burn b { color: var(--orange); } .split .c-res b { color: var(--blue); } .split .c-team b { color: var(--muted); }
.split > div::before { content: ''; display: block; height: 4px; margin-bottom: 4px; background: currentColor; }
.split .c-bank::before { color: var(--green); } .split .c-burn::before { color: var(--orange); } .split .c-res::before { color: var(--blue); } .split .c-team::before { color: var(--faint); }

/* ——— bots grid ——— */
.crew { display: grid; grid-template-columns: repeat(auto-fill, minmax(16ch, 1fr)); gap: 4px 1ch; }
.tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 6px 0 4px; background: none; border: 0; min-width: 0; }
.tile:hover { background: var(--sel); }
.tile .led { display: none; }
.tile img.face, .tile span.face { width: 48px; height: 48px; margin-bottom: 4px; }
.tile .no { font-weight: 700; color: var(--text); }
.tile .st { color: var(--faint); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile.in_trade .st { color: var(--green); }
.tile.new .st { color: var(--blue); }
.tile .bank { color: var(--muted); }
.tile.next { outline: 1px dashed var(--line-2); outline-offset: -1px; }
.tile.next .face { opacity: .5; filter: grayscale(1); }
.tile.next .no { color: var(--blue); }
.crew.big { grid-template-columns: repeat(auto-fill, minmax(22ch, 1fr)) !important; gap: 0 1ch !important; }
.crew.big .tile { padding: 8px 1ch 6px; border: 1px solid var(--line); margin-top: 0; }
.crew.big .tile:hover { border-color: var(--box); }
.crew.big .tile img.face, .crew.big .tile span.face { width: 64px; height: 64px; }
.crew.big .row2 { display: flex; justify-content: space-between; gap: 1ch; width: 100%; color: var(--muted); border-top: 1px solid var(--line); padding-top: 2px; margin-top: 4px; }
.crew-legend { display: flex; gap: 2ch; flex-wrap: wrap; color: var(--muted); }
.crew-legend i { display: none; }
.crew-legend .g { color: var(--green); } .crew-legend .a { color: var(--blue); }
.toolbar { display: flex; gap: 2ch; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 10px; }

/* ——— callouts in panels ——— */
.radio { display: flex; flex-direction: column; }
.radio .freq, .wave { display: none; }
.channel { list-style: none; margin: 0; padding: 12px 1ch 4px; overflow: visible; max-height: none; }
.tx { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 0 1ch; padding: 0 0 var(--lh); }
.tx + .tx { border: 0; }
.tx img.face, .tx span.face { width: 24px; height: 24px; }
.tx .who { display: flex; align-items: baseline; gap: 1ch; flex-wrap: wrap; margin: 0; color: var(--muted); }
.tx .who b { font-weight: 700; color: var(--text); }
.tx .who time { color: var(--faint); margin-left: auto; }
.bubble { padding: 0; background: none; border: 0; color: var(--fg); }
.bubble::before { content: none; }
.tx.fresh .bubble { animation: none; }
.tx .cfoot { display: flex; gap: 1ch; margin: 0; }
.thread { list-style: none; margin: 0; padding: 12px 1ch 4px; max-height: none; overflow: visible; }
.thread li { padding: 0 0 var(--lh); border: 0; margin: 0; }
.thread li::before { content: none; }
.thread .meta { display: flex; gap: 1ch; flex-wrap: wrap; color: var(--faint); margin: 0; }
.thread .meta a { color: var(--blue); }
.idle-note { padding: 12px 2ch 8px; color: var(--muted); text-align: left; }
.idle-note b { color: var(--text); }

/* ladders (open positions) */
.ladders { display: grid; grid-template-columns: repeat(auto-fill, minmax(40ch, 1fr)); gap: 0 1ch; }
.ladder { padding: 12px 1ch 8px; }
.ladder-h { display: flex; justify-content: space-between; gap: 1ch; align-items: baseline; }
.ladder-h .coinlink { font: 700 var(--fs)/var(--lh) var(--mono) !important; }
.ladder-h .clock { color: var(--muted); }
.ladder-sub { color: var(--muted); margin: 0 0 6px; }
.steps { display: flex; align-items: flex-end; gap: 1ch; height: 110px; border-bottom: 1px solid var(--box); }
.step { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; }
.step img.face, .step span.face { width: 28px; height: 28px; margin-bottom: 2px; }
.step .blk { width: 100%; background: none; border: 1px solid var(--line-2); border-bottom: 0; display: flex; justify-content: center; color: var(--faint); padding-top: 0; font: inherit; }
.steps-foot { display: flex; justify-content: space-between; gap: 1ch; margin-top: 2px; }
.steps-foot span { flex: 1; text-align: center; min-width: 0; }
.ladder .pnl { display: flex; justify-content: space-between; margin-top: 2px; color: var(--muted); }
.timer { height: 4px; background: var(--sel); margin-top: 6px; }
.timer i { display: block; height: 100%; background: var(--green); }

/* ——— bot page ——— */
.bot-hero { display: grid; grid-template-columns: minmax(300px, 600px) minmax(0, 1fr); gap: 0; margin-top: 10px; }
.portrait { position: relative; padding: 16px 1ch; display: flex; flex-direction: column; align-items: center; justify-content: center; border-right: 1px solid var(--line); background: none; }
.portrait img.face, .portrait span.face { width: 180px; height: 180px; }
.portrait .plaque { margin-top: 8px; font: inherit; letter-spacing: 0; color: var(--muted); border: 0; padding: 0; background: none; }
.bot-info { padding: 14px 2ch 12px; min-width: 0; position: static; }
.bot-info .kicker { position: absolute; top: calc(var(--lh) / -2); left: 1ch; background: #000; padding: 0 1px; }
.bot-info h1 { font-size: var(--fs); display: flex; align-items: baseline; gap: 2ch; flex-wrap: wrap; }
.idline { display: flex; flex-wrap: wrap; gap: 0 3ch; margin: 0 0 var(--lh); color: var(--muted); }
.idline a { color: var(--blue); border: 0; }
.idline a:hover { text-decoration: underline; }
.said { margin: 0 0 var(--lh); padding: 0; border: 0; background: none; max-width: 110ch; }
.said .lbl { display: block; color: var(--muted); }
.said q { color: var(--text); quotes: '"' '"'; }
.kv { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 2ch; background: none; border: 0; }
.kv > div { background: none; padding: 0; min-width: 0; }
.kv .lbl { color: var(--blue); }
.kv .v { font: 700 var(--fs)/var(--lh) var(--mono); color: var(--text); margin: 0; white-space: nowrap; }
.kv .s { color: var(--faint); }
.birth { margin-top: var(--lh); display: block; color: var(--muted); padding: 0; border: 0; }
.birth b { color: var(--text); }
.bot-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 0 1ch; margin-top: 14px; align-items: start; }
.bot-cols > * { min-width: 0; }
.chart-box { padding: 14px 1ch 6px; }
.botnav { display: flex; justify-content: space-between; gap: 2ch; margin-top: 14px; flex-wrap: wrap; }

/* research / method */
.legend { display: flex; flex-wrap: wrap; gap: 0 2ch; color: var(--muted); margin-top: 4px; }
.legend i { display: inline-block; width: 2ch; height: 2px; margin-right: 1ch; vertical-align: middle; }
.roi-bar { position: relative; height: 10px; background: var(--sel); min-width: 120px; }
.roi-bar::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--line-2); }
.roi-bar i { position: absolute; top: 0; bottom: 0; }
.roi-td { min-width: 170px; }
.field-row { cursor: pointer; }
.field-row.win td { color: var(--green); }
.field-row.ctrl td:first-child { color: var(--blue); }
.field-detail td { background: none; padding: 6px 2ch 14px; }
.field-detail .cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3ch; }
.field-detail h4 { font: inherit; color: var(--blue); text-transform: none; letter-spacing: 0; margin: 0; }
.field-detail ul { margin: 0 0 var(--lh); padding-left: 2ch; }
.field-detail p { color: var(--fg); }
.chev { display: inline-block; width: 2ch; color: var(--faint); }
.field-row[aria-expanded="true"] .chev { color: var(--green); }
.notes { margin: 6px 0 0; padding-left: 2ch; color: var(--muted); }

.prose { max-width: 110ch; }
.prose h2 { margin: calc(var(--lh) * 1.5) 0 var(--lh); color: var(--green); }
.prose h2::before { content: '## '; color: var(--faint); }
.prose h3 { margin: var(--lh) 0 0; color: var(--text); }
.prose h3::before { content: '### '; color: var(--faint); }
.prose p, .prose li { color: var(--fg); }
.prose ul, .prose ol { padding-left: 3ch; margin: 0 0 var(--lh); }
.prose ul { list-style: none; }
.prose ul > li::before { content: '- '; color: var(--faint); margin-left: -2ch; }
.prose li { margin: 0; }
.prose strong { color: var(--text); }
.rules { list-style: none; padding: 0; margin: 0; counter-reset: r; }
.rules li { counter-increment: r; display: grid; grid-template-columns: 4ch minmax(0, 1fr); gap: 0 1ch; padding: 0 0 6px; border: 0; }
.rules li::before { content: counter(r) "."; font: inherit; color: var(--blue); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(32ch, 1fr)); gap: 0 1ch; }
.card { padding: 12px 2ch 8px; }
.card .no { color: var(--orange); font: inherit; letter-spacing: 0; }
.card h3 { margin: 0; }
.card p { color: var(--muted); margin: 0; }
.method-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1ch; }
.method-grid .plate { padding: 12px 2ch 8px; }
.method-grid h3 { color: var(--blue); text-transform: none; letter-spacing: 0; margin: 0 0 4px; }
.method-grid ul { margin: 0; padding-left: 2ch; }
.method-grid li { color: var(--fg); margin: 0; }
.params { display: flex; flex-wrap: wrap; gap: 0 2ch; }
.params span { padding: 0; background: none; border: 0; color: var(--muted); }
.params b { color: var(--green); font-weight: 400; }
.diagram { padding: 12px 1ch 6px; }
.diagram svg { width: 100%; height: auto; }
.callout-box { padding: 8px 2ch; border: 1px solid var(--blue); background: none; margin: var(--lh) 0; }
.callout-box.warn { border-color: var(--red); }

/* how */
.flow { display: grid; grid-template-columns: 22ch 1fr; gap: 0 3ch; align-items: center; padding: 14px 2ch 12px; }
.flow .src { text-align: left; padding: 0; border: 0; background: none; }
.flow .src .lbl { color: var(--muted); }
.flow .src b { display: block; font: 700 var(--fs)/var(--lh) var(--mono); color: var(--green); }
.flow .outs { display: grid; gap: 0; }
.flow .out { display: grid; grid-template-columns: 8ch minmax(0, 1fr) auto; gap: 0 2ch; align-items: baseline; padding: 0; background: none; border: 0; }
.flow .out b { font: 700 var(--fs)/var(--lh) var(--mono); }
.flow .out span { color: var(--fg); }
.flow .out a { font: inherit; letter-spacing: 0; text-transform: none; color: var(--blue); white-space: nowrap; }
.flow .out a:hover { text-decoration: underline; }
.howsteps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3ch; border: 0; }
.howstep { display: grid; grid-template-columns: 4ch minmax(0, 1fr); gap: 0 1ch; padding: 0 0 var(--lh); border: 0 !important; }
.howstep .hs-no { font: inherit; color: var(--blue); }
.howstep h3 { margin: 0; }
.howstep p { color: var(--fg); margin: 0; }

/* wallets */
.addr { word-break: break-all; }
.wallet-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 1ch; }
.wallet-card { padding: 12px 2ch 8px; display: flex; flex-direction: column; gap: 0; min-width: 0; }
.wallet-card h3 { display: flex; align-items: center; gap: 1ch; font-weight: 400; }
.wallet-card h3 i { width: 1ch; height: 1ch; background: var(--c, var(--blue)); display: inline-block; }
.wallet-card .v { font-weight: 700; color: var(--text); }
.wallet-card p { color: var(--muted); margin: 0; }
.wallet-card .actions { display: flex; gap: 2ch; margin-top: auto; padding-top: 4px; flex-wrap: wrap; }
.pager { display: flex; justify-content: center; gap: 2ch; margin-top: 10px; }

/* coin */
.coin-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2ch; align-items: center; padding: 14px 2ch 10px; }
.coin-hero h1 { color: var(--blue); font-size: var(--fs); }
.coin-hero .kicker { position: absolute; top: calc(var(--lh) / -2); left: 1ch; background: #000; padding: 0 1px; }
.coin-hero .actions { display: flex; gap: 2ch; flex-wrap: wrap; }

/* callouts page */
.co-bar { display: flex; flex-wrap: wrap; gap: 6px 1ch; align-items: center; padding: 8px 1ch; margin: 0 0 10px; position: sticky; top: 35px; z-index: 5; background: #000; }
.co-bar input { flex: 1 1 32ch; min-width: 0; }
.co-bar select { min-width: 0; max-width: 100%; }
.co-sum { margin-left: auto; color: var(--muted); }
.co-sum b { color: var(--text); font-weight: 400; }
.co-feed { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1ch; }
.co { display: grid; grid-template-columns: 32px 1fr; gap: 0 1ch; padding: 8px 1ch 6px; border-color: var(--line-2); }
.co:hover { border-color: var(--box); }
.co.fresh { border-color: var(--green); animation: none; }
.co-face, .co-face > img, .co-face > span { display: block; width: 32px; height: 32px; }
.co-main { min-width: 0; display: flex; flex-direction: column; gap: 0; }
.co-main header { display: flex; align-items: baseline; gap: 1ch; flex-wrap: wrap; font: inherit; color: var(--muted); }
.co-main header time { margin-left: auto; font: inherit; color: var(--faint); }
.co-bot { color: var(--text); font-weight: 700; }
.co-main p { margin: 0; font: inherit; color: var(--fg); overflow-wrap: anywhere; }
.co-main footer { display: flex; align-items: center; gap: 1ch; flex-wrap: wrap; }
.co-end { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 12px 0 4px; }
.co-feed .empty, .co-feed .skeleton { grid-column: 1 / -1; padding: 20px; color: var(--muted); }

/* footer, misc */
.foot { border-top: 1px solid var(--line); margin-top: 24px; padding: 12px 0 14px; color: var(--muted); }
.foot b { color: var(--text); }
.foot-in { display: flex; justify-content: space-between; gap: 2ch; flex-wrap: wrap; }
.foot nav { display: flex; gap: 0 2ch; flex-wrap: wrap; }
.foot nav a { color: var(--blue); }
.foot nav a:hover { text-decoration: underline; }
.empty { padding: 10px 1ch; color: var(--muted); }
.err { padding: 8px 1ch; border: 1px solid var(--red); color: var(--red); background: none; }
.skeleton { color: var(--faint); padding: 20px 0; }
.skeleton::after { content: '▌'; color: var(--green); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.lost { text-align: center; padding: 40px 0; }
.lost img.face, .lost span.face { width: 160px; height: 160px; margin: 0 auto 14px; }
.lost h1 { color: var(--red); }

/* robot faces (images); ascii portraits style themselves */
.face { display: block; flex: none; overflow: hidden; }
.face > svg, .brand-face > svg { width: 100%; height: 100%; }
img.face { object-fit: cover; background: #000; }
.botcell img.face, .botcell span.face { width: 20px; height: 20px; }
.brand-face { display: block; }

/* no child may widen the page */
.sumrow > *, .facts > *, .wallet-cards > *, .bot-hero > *, .cards > *, .method-grid > * { min-width: 0; }

/* ——— responsive ——— */
@media (max-width: 1180px) {
  .kv { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 2ch; }
  .wallet-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-group + .nav-group::before { padding: 0 1ch; }
}
@media (max-width: 1020px) {
  .menu-btn { display: inline-flex !important; }
  .nav { display: none; position: absolute; top: 34px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: #000; border-bottom: 1px solid var(--box); padding: 6px var(--gut) 10px; overflow: visible; white-space: normal; }
  .nav.open { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2ch; }
  .nav-group { flex-direction: column; align-items: stretch; }
  .nav-group + .nav-group::before { content: none; }
  .nav-group::before { content: attr(data-label); color: var(--faint); padding: 4px 0; }
  .nav a { padding: 4px 0; }
  .nav a + a::before { content: none; }
  .top-act { margin-left: auto; }
  .bot-cols { grid-template-columns: minmax(0, 1fr); }
  .method-grid { grid-template-columns: 1fr; }
  .field-detail .cols { grid-template-columns: 1fr; }
  .sumrow, .facts-8 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co-feed { grid-template-columns: 1fr; }
  .hint-keys { display: none; }
  .hint { justify-content: flex-end; }
}
@media (max-width: 760px) { .howsteps { grid-template-columns: 1fr; } }
@media (max-width: 680px) {
  :root { --gut: 8px; --fs: 13px; --lh: 19px; }
  .nav.open { grid-template-columns: 1fr 1fr; }
  .top-act .buy { display: none; }
  .bot-hero { grid-template-columns: minmax(0, 1fr); }
  .portrait { border-right: 0; border-bottom: 1px solid var(--line); }
  .portrait img.face, .portrait span.face { width: 100%; height: auto; }
  .kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow { grid-template-columns: 1fr; }
  .flow .out { grid-template-columns: 6ch minmax(0, 1fr); }
  .flow .out a { grid-column: 2; }
  .wallet-cards { grid-template-columns: 1fr; }
  .hide-sm { display: none; }
  .ladders { grid-template-columns: minmax(0, 1fr); }
  .coin-hero { grid-template-columns: 1fr; }
  .tbl .why { display: none; }
  .tbl td, .tbl th { padding-left: .5ch; padding-right: .5ch; }
  .roi-td { min-width: 0; width: 45%; } .roi-td .roi-bar { min-width: 40px; }
  .phead { padding: 12px 1ch 8px; }
  .phead h1 br { display: none; }
  .crew.big { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .co-sum { margin-left: 0; width: 100%; }
  .split { grid-template-columns: 1fr 1fr; gap: 6px 2ch; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* listings never wrap a row */
.tbl td.r, .tbl td.num, .tbl th { white-space: nowrap; }
.tbl td.why { max-width: 46ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* page SVGs drawn with the old palette: map to terminal colors */
svg text { font-family: var(--mono) !important; }
svg [fill="#43f0cf"] { fill: var(--green); } svg [stroke="#43f0cf"] { stroke: var(--green); }
svg [fill="#ff5d6c"] { fill: var(--red); } svg [stroke="#ff5d6c"] { stroke: var(--red); }
svg [fill="#6ea8ff"] { fill: var(--blue); } svg [stroke="#6ea8ff"] { stroke: var(--blue); }
svg [fill="#181d26"] { fill: #000; } svg [stroke="#0b0d11"] { stroke: #000; }
svg [stroke="#323b4b"] { stroke: #3a3a3a; }
svg [fill="#5b6476"] { fill: #808080; } svg [fill="#8b94a6"] { fill: #9e9e9e; } svg [stroke="#8b94a6"] { stroke: #808080; }
.roi-bar i[style*="#43f0cf"] { background: var(--green) !important; }
.roi-bar i[style*="#ff5d6c"] { background: var(--red) !important; }
svg path[fill^="rgba"] { fill: none; }
.method-grid .plate > h3:first-child { position: absolute; top: calc(var(--lh) / -2); left: 1ch; margin: 0; padding: 0 1px; background: #000; color: var(--fg); font-weight: 400; }
.method-grid ul, .field-detail ul { list-style: none; }
.method-grid li::before, .field-detail li::before { content: '- '; color: var(--faint); margin-left: -2ch; }
.card .no { color: var(--fg); }

/* reading comfort: shorter lines, bigger headings, air between blocks of text */
.phead h1, .bot-info h1, .coin-hero h1 { font-size: 24px; line-height: 32px; margin-bottom: 8px; }
.phead p { max-width: 78ch; color: var(--fg); }
.prose { max-width: 76ch; }
.prose h2 { font-size: 18px; line-height: 28px; margin: 40px 0 12px; }
.prose h3 { font-size: 15px; margin: 24px 0 8px; }
.prose p { margin: 0 0 16px; }
.prose li { margin: 0 0 10px; }
.prose ol { padding-left: 4ch; }
.prose ol > li::marker { color: var(--faint); }
.co-main p, .bubble, .said q { line-height: 1.6; }
@media (max-width: 600px) { :root { --fs: 14px; --lh: 22px; } .phead h1, .bot-info h1, .coin-hero h1 { font-size: 20px; line-height: 28px; } .prose h2 { font-size: 16px; } }
.prose p, .prose ul, .prose ol, .prose h2, .prose h3 { max-width: 76ch; }