/* WORM page. 2026-10-27 restyle (founder: "make that design be on the general website as well"): the page wears the
   look of the X banner and logo A (brand/final/banner.svg, avatar.svg, made by brand/make-brand.mjs). Near-black green
   with the banner's faint 20 px square grid; pixel letters (the same 5x7 font as the banner and the share card, drawn
   by app.js as inline SVG, the real text kept in the DOM); separate green tiles with a 3x3 dark pattern as bullets,
   dividers and row markers; square corners everywhere; the head tile's bright green for the primary button. Scanlines
   only on the big pixel words, as in the banner. No third-party fonts. Our own design, nothing copied from a site. */
:root {
  --bg: #040705; --bg2: #07100a; --bg3: #0a170e; --bg4: #0d1f13;
  --ink: #e0f5e6; --ink2: #a9c9b2; --ink3: #74937d; --ink4: #34463a;
  --line: rgba(150, 255, 185, .10); --line2: rgba(150, 255, 185, .2);
  --edge: #1d4a2b; --edge2: #2b6b3e;
  --acc: #3dff7f; --acc-dim: rgba(61, 255, 127, .10);
  --t1: #17592b; --t2: #1f7a39; --t3: #145024; --t4: #1b6a33;
  --f-display: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --f-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;   /* page 18: no third-party fonts */
  --t-12: 12px; --t-14: 14px; --t-16: 16px; --t-20: 20px; --t-28: 28px; --t-44: 44px; --t-72: 72px;
  --s-4: 4px; --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-24: 24px; --s-32: 32px; --s-48: 48px; --s-72: 72px;
  /* a thin row of tiny wallet tiles: the divider */
  --tilerow: linear-gradient(90deg, var(--t1) 0 5px, transparent 5px 8px, var(--t2) 8px 13px, transparent 13px 16px, var(--t3) 16px 21px, transparent 21px 24px, var(--t4) 24px 29px, transparent 29px 32px);
  /* the banner's grid: 1 px lines every 20 px */
  --grid: linear-gradient(rgba(150, 255, 185, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 255, 185, .045) 1px, transparent 1px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background-color: var(--bg); background-image: var(--grid); background-size: 20px 20px; color: var(--ink); font: 400 var(--t-16)/1.55 var(--f-display); font-variant-numeric: tabular-nums; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(1200px 520px at 50% -12%, rgba(61, 255, 127, .08), transparent 70%); }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--acc); }
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding-left: var(--s-24); padding-right: var(--s-24); position: relative; }
.mono { font-family: var(--f-mono); }
.small { font-size: var(--t-12); letter-spacing: .02em; }
.dim { color: var(--ink3); }
.acc { color: var(--acc); }
.num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

/* pixel words: app.js draws the text as an SVG in .pxbox; the element itself stays for screen readers (.pxsrc) */
.pxsrc, .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pxbox { display: block; min-width: 0; }
.pxbox svg { display: block; max-width: 100%; height: auto; }
/* a mini wallet tile (app.js miniTile): the same tile the canvas draws for that wallet */
.mt { display: inline-block; vertical-align: middle; flex: none; }

.demo { position: sticky; top: 0; z-index: 60; background: var(--ink); color: var(--bg); font: 500 var(--t-12)/1 var(--f-mono); padding: var(--s-8) var(--s-16); text-align: center; letter-spacing: .04em; }
.demo b { background: var(--bg); color: var(--ink); padding: 2px 6px; margin-right: 6px; }

.top { display: flex; align-items: center; justify-content: space-between; height: 76px; background: var(--tilerow) left bottom / 32px 4px repeat-x; background-origin: content-box; background-clip: content-box; }
.brand { display: flex; align-items: center; gap: var(--s-12); text-decoration: none; color: var(--ink); }
.logo { width: 36px; height: 36px; flex: none; }
.word { display: block; width: 92px; height: 28px; flex: none; }
.tick { font: 600 var(--t-12)/1 var(--f-mono); color: var(--acc); background: var(--bg3); box-shadow: inset 0 0 0 1px var(--edge2); padding: 5px 7px; letter-spacing: .04em; }
.topright { display: flex; align-items: center; gap: var(--s-16); }
.pill { font: 600 var(--t-12)/1 var(--f-mono); padding: 7px 10px; background: var(--bg3); box-shadow: inset 0 0 0 1px var(--edge2); color: var(--ink2); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.pill.live { color: var(--acc); box-shadow: inset 0 0 0 1px var(--acc); }
.pill.live::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--acc); margin-right: 8px; vertical-align: 0; animation: blink 1.6s steps(2) infinite; }

/* section heads: a tile bullet and a small pixel title, over a row of tiny tiles */
.label { display: flex; align-items: center; gap: var(--s-12); margin: var(--s-72) 0 var(--s-24); padding-top: 22px; background: var(--tilerow) left top / 32px 5px repeat-x; font: 600 var(--t-12)/1 var(--f-mono); letter-spacing: .14em; color: var(--ink2); }
.label .tb { display: inline-flex; flex: none; }
h1.label, h2.label { max-width: none; text-transform: none; }   /* L6: real headings that keep the label look */
.label .pxbox { flex: 1 1 0; }
.sublabel { font-size: var(--t-12); color: var(--ink3); margin: var(--s-32) 0 var(--s-12); letter-spacing: .06em; }

.hero { padding-top: var(--s-48); }
.eyebrow { color: var(--acc); font-size: var(--t-12); letter-spacing: .16em; text-transform: uppercase; margin: 0 0 var(--s-24); display: flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 10px; height: 10px; background: var(--acc); flex: none; box-shadow: 14px 0 0 -1px var(--t2), 27px 0 0 -2px var(--t1); margin-right: 26px; }
h1 { font: 700 var(--t-72)/1.02 var(--f-mono); letter-spacing: -.02em; margin: 0; max-width: 16ch; text-transform: uppercase; }
h1 .num { color: var(--acc); }
.hero > .pxbox { margin: 0 0 var(--s-16); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-8); margin: var(--s-48) 0 0; }
.stats div { padding: var(--s-16); background: var(--bg3); box-shadow: inset 0 0 0 1px var(--edge), inset -3px -3px 0 0 rgba(0, 0, 0, .35); }
.stats dt { font: 600 var(--t-12)/1 var(--f-mono); color: var(--ink3); letter-spacing: .1em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.stats dt::before { content: ""; width: 8px; height: 8px; background: var(--t2); box-shadow: inset 2px 2px 0 0 rgba(4, 7, 5, .45); flex: none; }
.stats dd { margin: var(--s-12) 0 0; font-size: var(--t-28); line-height: 1; }
.stats .pxbox { margin-top: var(--s-12); }

.stage { margin-top: var(--s-32); }
canvas#worm { display: block; width: 100%; height: 360px; background: var(--bg2); box-shadow: inset 0 0 0 1px var(--edge); }
.stagenote { margin: var(--s-8) 0 0; }
.tip { position: absolute; pointer-events: none; background: var(--bg); box-shadow: inset 0 0 0 1px var(--acc); color: var(--ink); padding: 6px 8px; font-size: var(--t-12); white-space: nowrap; z-index: 5; }

.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rows li { display: grid; grid-template-columns: 14px 64px 56px 1fr auto; gap: var(--s-12); align-items: center; padding: var(--s-12) 0; border-bottom: 1px solid var(--line); font: 400 var(--t-14)/1.4 var(--f-mono); }
.rows .id { color: var(--acc); }
.rows .g { color: var(--ink3); }
.rows .w { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink2); }
.rows .w b { color: var(--ink); font-weight: 600; }
.rows .t { color: var(--ink3); font-size: var(--t-12); }
.empty { padding: var(--s-24) 0; color: var(--ink3); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font: 400 var(--t-14)/1.5 var(--f-mono); }

.round { border-top: 1px solid var(--line); padding: var(--s-16) 0; }
.round:last-child { border-bottom: 1px solid var(--line); }
.rhead { display: flex; flex-wrap: wrap; gap: var(--s-8) var(--s-24); align-items: baseline; font: 400 var(--t-14)/1.4 var(--f-mono); }
.rhead .rn { color: var(--acc); }
.tag { font: 600 11px/1 var(--f-mono); padding: 4px 6px; box-shadow: inset 0 0 0 1px var(--edge2); background: var(--bg3); color: var(--ink2); letter-spacing: .06em; text-transform: uppercase; }
.bar { display: flex; gap: 3px; height: 8px; margin: var(--s-12) 0; }
.bar i { display: block; height: 100%; }
.bar .h { background: var(--acc); } .bar .b { background: var(--t2); } .bar .tm { background: var(--ink4); }
.sends { list-style: none; margin: 0; padding: 0; font: 400 var(--t-12)/1.9 var(--f-mono); color: var(--ink2); columns: 2; column-gap: var(--s-32); }
.sends li { break-inside: avoid; display: flex; justify-content: space-between; align-items: center; gap: var(--s-8); }
.sends .who { display: inline-flex; align-items: center; gap: var(--s-8); min-width: 0; }

/* rooms and steps: separate tiles with a small gap, square corners */
.grid { display: grid; gap: var(--s-8); list-style: none; padding: 0; margin: 0; }
.grid > * { padding: var(--s-24); background: rgba(10, 23, 14, .88); box-shadow: inset 0 0 0 1px var(--edge), inset -3px -3px 0 0 rgba(0, 0, 0, .35); }
.rooms { grid-template-columns: repeat(5, 1fr); }
.room h3 { font: 600 var(--t-16)/1.25 var(--f-mono); margin: var(--s-12) 0 var(--s-8); }
.room .cond { font: 600 var(--t-12)/1.3 var(--f-mono); color: var(--ink3); letter-spacing: .06em; text-transform: uppercase; display: flex; align-items: center; gap: var(--s-8); }
.room.open { box-shadow: inset 0 0 0 1px var(--edge2), inset -3px -3px 0 0 rgba(0, 0, 0, .35); }
.room.open .cond { color: var(--acc); }
.room p { margin: 0; font-size: var(--t-14); color: var(--ink2); }
.room .lockbar { height: 4px; background: var(--bg4); margin-top: var(--s-16); }
.room .lockbar i { display: block; height: 100%; background: var(--edge2); }
.room.locked h3 { color: var(--ink3); }

.steps { grid-template-columns: repeat(3, 1fr); }
.steps li { min-height: 190px; }
.stepn { display: block; font: 700 var(--t-44)/1 var(--f-mono); color: var(--acc); }
.steps h3 { font: 600 var(--t-16)/1.25 var(--f-mono); margin: var(--s-16) 0 var(--s-8); text-transform: uppercase; letter-spacing: .06em; }
.steps p { margin: 0; color: var(--ink2); font-size: var(--t-14); }

.keys { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--s-32); align-items: start; }
.keys .big { font: 700 var(--t-44)/1.05 var(--f-mono); margin: 0; text-transform: uppercase; }
.plain { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.plain li { padding: var(--s-12) 0 var(--s-12) 22px; border-bottom: 1px solid var(--line); color: var(--ink2); font-size: var(--t-14); position: relative; }
.plain li::before { content: ""; position: absolute; left: 0; top: 19px; width: 9px; height: 9px; background: var(--acc); box-shadow: inset 3px 3px 0 0 rgba(4, 7, 5, .35); }

.btn { font: 700 var(--t-14)/1 var(--f-mono); background: var(--acc); color: #03140a; border: 0; padding: 12px 18px; min-height: 44px; border-radius: 0; cursor: pointer; letter-spacing: .02em; box-shadow: inset -3px -3px 0 0 rgba(4, 7, 5, .22), inset 3px 3px 0 0 rgba(255, 255, 255, .18); }
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: var(--bg4); color: var(--ink); box-shadow: inset 0 0 0 1px var(--edge2), inset -3px -3px 0 0 rgba(0, 0, 0, .35); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--acc), inset -3px -3px 0 0 rgba(0, 0, 0, .35); filter: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:focus-visible, input:focus-visible, a:focus-visible, canvas:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.infect { padding-top: var(--s-8); }
.infect .label { margin-top: var(--s-32); padding-top: 0; background: none; }
.infectbox { box-shadow: inset 0 0 0 2px var(--acc); padding: var(--s-24); background: linear-gradient(var(--acc-dim), rgba(4, 7, 5, .9) 60%); }
.infectbox p { margin: 0 0 var(--s-8); }
.host { font: 600 var(--t-28)/1.15 var(--f-mono); overflow-wrap: anywhere; }
#hostWallet { word-break: break-all; }
.host .mono { font-size: var(--t-14); color: var(--ink2); display: block; margin-top: 4px; }
.actions { display: flex; gap: var(--s-12); flex-wrap: wrap; margin: var(--s-16) 0; }
.status { min-height: 1.4em; color: var(--ink2); }
.status.ok { color: var(--acc); } .status.bad { color: #ff8f8f; }
.msg { font: 400 var(--t-12)/1.5 var(--f-mono); background: var(--bg); box-shadow: inset 0 0 0 1px var(--edge); padding: var(--s-12); white-space: pre-wrap; word-break: break-all; color: var(--ink2); margin: var(--s-12) 0; }

.lookup { display: flex; gap: var(--s-8); flex-wrap: wrap; }
.lookup input { min-height: 44px; flex: 1 1 300px; min-width: 0; background: var(--bg2); border: 1px solid var(--edge2); color: var(--ink); padding: 12px; border-radius: 0; font-size: var(--t-14); }
.lookup input::placeholder { color: var(--ink3); }
.mine { margin-top: var(--s-24); border-top: 1px solid var(--line); }
.mine .kv { display: grid; grid-template-columns: 160px 1fr; gap: var(--s-12); padding: var(--s-12) 0; border-bottom: 1px solid var(--line); font: 400 var(--t-14)/1.4 var(--f-mono); }
.mine .kv span:first-child { color: var(--ink3); }
.mine .wt { display: flex; align-items: center; gap: var(--s-8); }
.linkrow { display: flex; gap: var(--s-8); align-items: center; flex-wrap: wrap; }
.linkrow code { font: 400 var(--t-14)/1.4 var(--f-mono); color: var(--acc); word-break: break-all; }

.foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-12); padding-top: var(--s-24); padding-bottom: var(--s-48); margin-top: var(--s-72); background: var(--tilerow) left top / 32px 5px repeat-x; background-origin: content-box; background-clip: content-box; }
#ca { word-break: break-all; }

@keyframes blink { 50% { opacity: .2; } }

@media (max-width: 900px) {
  .rooms { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .keys { grid-template-columns: 1fr; }
  h1 { font-size: 56px; }
  .stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .wrap { padding-left: var(--s-16); padding-right: var(--s-16); }
  h1 { font-size: 40px; }
  .stats dd { font-size: var(--t-20); }
  .stats div { padding: var(--s-12); }
  canvas#worm { height: 280px; }
  .rooms, .steps { grid-template-columns: 1fr; }
  .steps li { min-height: 0; padding: var(--s-16); }
  .grid > * { padding: var(--s-16); }
  .stepn { font-size: var(--t-28); }
  .steps h3 { margin-top: var(--s-8); }
  .rows li { grid-template-columns: 14px 48px minmax(0, 1fr) auto; gap: 2px var(--s-8); }
  .rows .mt { grid-column: 1; grid-row: 1; }
  .rows .id { grid-column: 2; grid-row: 1; }
  .rows .w { grid-column: 3; grid-row: 1; }
  .rows .t { grid-column: 4; grid-row: 1; }
  .rows .g { grid-column: 3; grid-row: 2; font-size: var(--t-12); }
  .sends { columns: 1; }
  .mine .kv { grid-template-columns: 1fr; gap: 2px; }
  .keys .big { font-size: var(--t-28); }
  .label { margin-top: var(--s-48); }
  .tick { display: none; }
  .top { height: 64px; }
  .logo { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; transition: none !important; }
}

/* review 2026-10-26: the paper / payout-state banner, the wallet picker, a dormant row */
.paper { box-shadow: inset 0 0 0 1px var(--line2), inset 4px 0 0 0 #ffd27a; background: var(--bg2); color: var(--ink2); font: 400 var(--t-14)/1.5 var(--f-mono); padding: var(--s-12) var(--s-16) var(--s-12) var(--s-24); margin-top: var(--s-16); }
.paper b { color: #ffd27a; font-weight: 600; }
.pill.warn { color: #ffd27a; box-shadow: inset 0 0 0 1px #ffd27a; }
.pill.off { color: #ff8f8f; box-shadow: inset 0 0 0 1px #ff8f8f; }
.picker { display: flex; gap: var(--s-8); flex-wrap: wrap; margin: var(--s-8) 0; }
.joined { margin: var(--s-12) 0 0; letter-spacing: .04em; }
.fresh { color: var(--ink3); font: 400 var(--t-14)/1.4 var(--f-mono); margin: var(--s-8) 0 0; }
.rows .gone { color: var(--ink3); }
.lede { max-width: 640px; color: var(--ink2); font-size: var(--t-16); margin: var(--s-16) 0 0; }
.ctas { display: flex; gap: var(--s-12); flex-wrap: wrap; margin: var(--s-24) 0 0; }
.ctas .btn { text-decoration: none; display: inline-flex; align-items: center; }
.share img { width: 100%; max-width: 480px; height: auto; box-shadow: 0 0 0 1px var(--edge2); display: block; margin-bottom: var(--s-8); }
.share .row { display: flex; gap: var(--s-8); flex-wrap: wrap; }
.share .btn { text-decoration: none; display: inline-flex; align-items: center; }
.mine .kv { grid-template-columns: 160px minmax(0, 1fr); }
.mine .kv > * { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) { .mine .kv { grid-template-columns: 1fr; gap: var(--s-4); } }

/* 2026-10-28: every segment (/segments, /s/<wallet>): the list, the search, and a family tree, in the banner look */
body.v-segs main > section:not(#segs) { display: none !important; }
.segs .label { margin-top: var(--s-32); }
.segform { display: flex; gap: var(--s-8); flex-wrap: wrap; align-items: center; margin: var(--s-24) 0 var(--s-16); }
.segform input[type=search] { min-height: 44px; flex: 1 1 280px; min-width: 0; background: var(--bg2); border: 1px solid var(--edge2); color: var(--ink); padding: 12px; border-radius: 0; font-size: var(--t-14); }
.segform input::placeholder { color: var(--ink3); }
.segform select { min-height: 44px; background: var(--bg4); color: var(--ink); border: 1px solid var(--edge2); border-radius: 0; padding: 0 10px; font: 600 var(--t-14)/1 var(--f-mono); margin-left: 6px; }
.segform label { display: inline-flex; align-items: center; gap: 6px; color: var(--ink2); min-height: 44px; }
.segform .chk input { width: 18px; height: 18px; accent-color: var(--acc); }
.segform select:focus-visible, .segform input:focus-visible, .seglist a:focus-visible, .tree button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.seghead, .seglist a { display: grid; grid-template-columns: 72px minmax(0, 1.6fr) 64px minmax(0, 1fr) 72px 92px 84px; gap: var(--s-12); align-items: center; }
.seghead { color: var(--ink3); padding: 0 0 var(--s-8); letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.seglist { list-style: none; margin: 0; padding: 0; }
.seglist li { border-bottom: 1px solid var(--line); }
.seglist a { padding: var(--s-12) 0; color: var(--ink); text-decoration: none; font: 400 var(--t-14)/1.4 var(--f-mono); min-height: 44px; }
.seglist a:hover { background: var(--bg2); }
.seglist .id { color: var(--acc); }
.seglist .wl, .seglist .hs { display: flex; align-items: center; gap: var(--s-8); min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.seglist .g, .seglist .t, .seglist .k { color: var(--ink3); }
.st { font: 600 11px/1 var(--f-mono); padding: 4px 6px; letter-spacing: .06em; text-transform: uppercase; box-shadow: inset 0 0 0 1px var(--edge2); color: var(--ink2); justify-self: start; }
.st.live { color: var(--acc); box-shadow: inset 0 0 0 1px var(--acc); }
.st.dormant { color: var(--ink3); }
.st.new { color: #cfeedd; box-shadow: inset 0 0 0 1px var(--line2); }
.seglist li.dorm a { color: var(--ink3); }
.pager { display: flex; gap: var(--s-8); flex-wrap: wrap; margin-top: var(--s-16); }
.tree { margin: var(--s-16) 0 var(--s-32); padding: var(--s-24); background: rgba(10, 23, 14, .88); box-shadow: inset 0 0 0 1px var(--edge2), inset -3px -3px 0 0 rgba(0, 0, 0, .35); }
.tree h2 { font: 700 var(--t-20)/1.2 var(--f-mono); margin: 0 0 var(--s-12); display: flex; align-items: center; gap: var(--s-12); }
.tree h2:focus { outline: none; }
.tree h3 { font: 600 var(--t-12)/1 var(--f-mono); color: var(--ink3); letter-spacing: .12em; text-transform: uppercase; margin: var(--s-24) 0 var(--s-8); }
.crumbs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.crumbs li { display: inline-flex; align-items: center; gap: 4px; }
.crumbs li + li::before { content: ""; width: 8px; height: 2px; background: var(--edge2); }
.node { display: inline-flex; align-items: center; gap: 6px; background: var(--bg3); color: var(--ink); border: 0; box-shadow: inset 0 0 0 1px var(--edge); padding: 6px 8px; min-height: 36px; font: 400 var(--t-12)/1.2 var(--f-mono); cursor: pointer; border-radius: 0; text-align: left; }
.node:hover { box-shadow: inset 0 0 0 1px var(--acc); }
.node.here { box-shadow: inset 0 0 0 2px var(--acc); }
.node.dorm { color: var(--ink3); }
.tree .kv { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--s-12); padding: var(--s-8) 0; border-bottom: 1px solid var(--line); font: 400 var(--t-14)/1.4 var(--f-mono); }
.tree .kv > * { min-width: 0; overflow-wrap: anywhere; }
.tree .kv span:first-child { color: var(--ink3); }
.kids { list-style: none; margin: 0; padding: 0 0 0 var(--s-16); border-left: 2px solid var(--edge); }
.kids > li { margin: 6px 0; }
.kids .row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.kids .more { background: none; border: 0; color: var(--ink2); font: 600 var(--t-12)/1 var(--f-mono); cursor: pointer; min-height: 36px; padding: 0 6px; text-decoration: underline; text-underline-offset: 3px; }
.kids .kids { margin-top: 4px; }
@media (max-width: 760px) {
  .seghead { display: none; }
  .seglist a { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "id wl st" "g hs t"; gap: 4px var(--s-8); }
  .seglist .id { grid-area: id; } .seglist .wl { grid-area: wl; } .seglist .st { grid-area: st; justify-self: end; }
  .seglist .g { grid-area: g; font-size: var(--t-12); } .seglist .hs { grid-area: hs; font-size: var(--t-12); } .seglist .t { grid-area: t; font-size: var(--t-12); justify-self: end; }
  .seglist .k { display: none; }
  .tree { padding: var(--s-16); }
  .tree .kv { grid-template-columns: 1fr; gap: 2px; }
}
.seglist .kp { display: none; }
@media (max-width: 760px) { .seglist .kp { display: block; } }
.seglist .g { white-space: nowrap; }
.seglist .g .gw { display: none; }
.tree .kv .node { justify-self: start; }
.crumbs .gap { background: none; border: 0; color: var(--ink2); font: 600 var(--t-12)/1 var(--f-mono); cursor: pointer; min-height: 36px; padding: 0 6px; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .seglist .g .gw { display: inline; } }
@media (max-width: 760px) {
  .seglist a { grid-template-columns: 104px minmax(0, 1fr) auto; }
  .seglist .g { white-space: normal; }
}

/* 2026-10-28 growth features: find me a host, the payout meter, leaderboards, the bag calculator, milestones, receipts */
body.v-rc main > section:not(#receipts) { display: none !important; }
.findnote { display: block; margin: var(--s-8) 0 0; min-height: 1.2em; }
.findrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-12); margin: var(--s-16) 0 0; }
.findrow .findnote { margin: 0; }
.meter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-8); margin: var(--s-8) 0 0; }
.meter > div { padding: var(--s-12) var(--s-16); background: var(--bg2); box-shadow: inset 0 0 0 1px var(--edge), inset 3px 0 0 0 var(--t2); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.meter .mk { font: 600 var(--t-12)/1 var(--f-mono); color: var(--ink3); letter-spacing: .1em; text-transform: uppercase; }
.meter b { font: 700 var(--t-20)/1.1 var(--f-mono); color: var(--acc); overflow-wrap: anywhere; }
.meter .ms { font: 400 var(--t-12)/1.35 var(--f-mono); color: var(--ink3); overflow-wrap: anywhere; }
.rmeter { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--s-16) 0 var(--s-8); }
.boards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); }
.boards > div { padding: var(--s-16); background: rgba(10, 23, 14, .88); box-shadow: inset 0 0 0 1px var(--edge), inset -3px -3px 0 0 rgba(0, 0, 0, .35); min-width: 0; }
.bh { font: 600 var(--t-14)/1.2 var(--f-mono); margin: 0 0 var(--s-12); text-transform: uppercase; letter-spacing: .06em; }
.bh .dim { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: var(--t-12); }
.board { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.board li { border-bottom: 1px solid var(--line); }
.board li.empty { padding: var(--s-12) 0; border-top: 0; }
.board a { display: grid; grid-template-columns: 22px 14px 64px minmax(0, 1fr) auto; gap: var(--s-8); align-items: center; padding: 8px 0; min-height: 40px; text-decoration: none; color: var(--ink); font: 400 var(--t-14)/1.3 var(--f-mono); }
.board a:hover { background: var(--bg3); }
.board .pl { color: var(--ink3); text-align: right; }
.board .id { color: var(--acc); }
.board .w { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink2); }
.board .v { color: var(--ink); white-space: nowrap; }
.calcgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); }
.calcbox { padding: var(--s-16) var(--s-16) var(--s-24); background: rgba(10, 23, 14, .88); box-shadow: inset 0 0 0 1px var(--edge), inset -3px -3px 0 0 rgba(0, 0, 0, .35); display: flex; flex-direction: column; gap: var(--s-8); min-width: 0; }
.calcbox h3 { font: 600 var(--t-14)/1.2 var(--f-mono); margin: 0 0 var(--s-4); text-transform: uppercase; letter-spacing: .06em; }
.calcbox label { color: var(--ink2); }
.calcbox input, .calcbox select { min-height: 44px; min-width: 0; background: var(--bg2); border: 1px solid var(--edge2); color: var(--ink); padding: 10px 12px; border-radius: 0; font-size: var(--t-14); }
.calcbox input::placeholder { color: var(--ink3); }
.calcbox .btn { align-self: flex-start; }
.calcbox input:focus-visible, .calcbox select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.volrow { display: flex; gap: var(--s-8); flex-wrap: wrap; }
.volrow input { flex: 1 1 140px; }
.volrow select { flex: 0 1 auto; font-family: var(--f-mono); }
.calcout { font: 400 var(--t-14)/1.5 var(--f-mono); color: var(--ink2); }
.calcout p { margin: var(--s-8) 0 0; }
.calcout .big { color: var(--ink); }
.calcout .dim { color: var(--ink3); font-size: var(--t-12); }
.calcout .actions { margin: var(--s-12) 0 0; align-items: center; }
.calcnote { border-left: 2px solid var(--edge2); padding-left: var(--s-12); margin-top: var(--s-8); }
.mslist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.mslist > li { padding: var(--s-16) 0; border-bottom: 1px solid var(--line); }
.mslist > li.empty { padding: var(--s-24) 0; }
.mslist .mh { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8) var(--s-12); font: 400 var(--t-14)/1.3 var(--f-mono); }
.mslist .mh .mk { color: var(--ink3); }
.mslist .mh b { color: var(--acc); font-size: var(--t-16); }
.mslist p { margin: var(--s-8) 0; }
.mslist .row { display: flex; gap: var(--s-8); flex-wrap: wrap; }
.mslist .row .btn { text-decoration: none; display: inline-flex; align-items: center; }
.mslist img { display: block; width: 100%; max-width: 480px; height: auto; margin-top: var(--s-12); box-shadow: 0 0 0 1px var(--edge2); }
.mslist li.here { box-shadow: inset 3px 0 0 0 var(--acc); padding-left: var(--s-12); }
.receipts .label { margin-top: var(--s-32); }
.rstats { margin-top: var(--s-8); }
.rstats dd.ms { font: 400 var(--t-12)/1.35 var(--f-mono); color: var(--ink3); margin-top: var(--s-8); }
.rstats dd.num { font-size: var(--t-20); }
.rtable { margin-top: var(--s-24); }
.rtable table { width: 100%; border-collapse: collapse; font: 400 var(--t-14)/1.4 var(--f-mono); }
.rtable th { text-align: left; color: var(--ink3); font: 600 var(--t-12)/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; padding: 0 var(--s-8) var(--s-8) 0; border-bottom: 1px solid var(--line); }
.rtable td { padding: var(--s-12) var(--s-8) var(--s-12) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.rtable td.empty { color: var(--ink3); }
.rtable tr.paperrow td { color: var(--ink2); }
.rtable .tag { margin-left: 6px; }
.rtable .more { background: none; border: 0; color: var(--ink2); font: 600 var(--t-12)/1 var(--f-mono); cursor: pointer; min-height: 36px; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.rtable .more:disabled { text-decoration: none; cursor: default; color: var(--ink3); }
.rtable .sendsrow td { background: var(--bg2); padding: var(--s-12); }
.rtable:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (max-width: 900px) {
  .meter { grid-template-columns: 1fr 1fr; }
  .rmeter { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 760px) {
  .boards, .calcgrid { grid-template-columns: 1fr; }
  .rmeter { grid-template-columns: 1fr; }
  .rtable thead { display: none; }
  .rtable table, .rtable tbody, .rtable tr, .rtable td { display: block; width: 100%; }
  .rtable tr { border-bottom: 1px solid var(--line2); padding: var(--s-8) 0; }
  .rtable td { border: 0; padding: 3px 0; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--s-8); overflow-wrap: anywhere; }
  .rtable td::before { content: attr(data-l); color: var(--ink3); font-size: var(--t-12); text-transform: uppercase; letter-spacing: .06em; }
  .rtable td > * { justify-self: start; align-self: center; }
  .rtable .more { min-height: 32px; text-align: left; }
  .rtable td.empty, .rtable .sendsrow td { display: block; }
  .rtable td.empty::before, .rtable .sendsrow td::before { content: none; }
}
@media (max-width: 560px) {
  .meter b { font-size: var(--t-16); }
  .meter > div { padding: var(--s-8) var(--s-12); }
  .board a { grid-template-columns: 18px 14px 56px minmax(0, 1fr) auto; gap: 6px; font-size: var(--t-12); }
}