/* NeuroStack — shared styles for every page.
   Tokens and the type scale come from docs/BRAND.md. Nothing here is fetched
   from the network: the brand faces are served from public/fonts/ by this
   same server (see fonts/fonts.css), so the page looks the same on a machine
   that has never installed them. The system stack stays in the font-family
   lists as the fallback while the woff2 files load.

   Three faces (BRAND.md §3): mono is the contract talking — figures,
   addresses; Silkscreen is the pixel label — eyebrows, nav, chips; Sora is the
   body text, and the mind's own voice (`.voice`, Sora 500 behind a gold rule).
   Pixelify Sans sets the headings (see the pixel layer near the end).

   Two rules this file enforces, both easy to break by accident:
   - `[hidden]` is re-asserted here with `!important`, once, for every element.
     The browser's own `[hidden]{display:none}` comes from the UA stylesheet
     and loses to ANY author rule naming `display` — so without this line a
     perfectly ordinary `.thing{display:flex}` silently breaks every
     `el.hidden = true` in the page scripts, and only in the hidden state.
   - Body copy is never gold, never mono, never pixel. Gold marks one thing per view. */

:root{
  /* ---- colour ------------------------------------------------------- */
  --void:#000000; --surface:#0B0E11; --raised:#14171C;
  --line:#1F242B; --line-gold:#3B2F08;
  --gold:#F0B90B; --gold-hi:#FCD535; --gold-deep:#B8860B;
  --buy:#0ECB81; --burn:#F6465D;
  --ink:#EAECEF; --muted:#848E9C; --dim:#5E6673;

  /* ---- type --------------------------------------------------------- */
  --sans:'Sora', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --voice:'Sora', ui-sans-serif, system-ui, sans-serif;
  --pixel:'Silkscreen', 'JetBrains Mono', ui-monospace, monospace;

  --t-display:clamp(38px, 5.4vw, 78px);
  --t-h1:clamp(28px, 3.4vw, 44px);
  --t-h2:clamp(21px, 2.2vw, 28px);
  --t-h3:16px;
  --t-body:15px;
  --t-small:13.5px;
  --t-caption:12px;
  --t-figure:clamp(20px, 2.2vw, 26px);
  --t-hero-figure:clamp(40px, 5.6vw, 72px);

  /* ---- space (one scale, used everywhere) ---------------------------- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:26px; --s7:36px; --s8:52px;
  --section-y:clamp(26px, 3.4vw, 44px);
  --gutter:clamp(16px, 3vw, 32px);

  /* small radii on panels; pills only on buttons and chips (BRAND.md §3) */
  --r-sm:4px; --r-md:6px; --r-lg:8px; --r-xl:10px; --r-pill:999px;

  /* ---- the board's row height (SPEC §4.2.4) --------------------------
     The grid sets the rows, the content never does. Change these two and
     every panel changes together, which is the point of a rectangle. */
  /* the page ground: scattered gold pixels and two faint traces (BRAND.md §3) */
  --pixels:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' shape-rendering='crispEdges'%3E%3Cg fill='%23F0B90B'%3E%3Crect x='24' y='40' width='6' height='6' opacity='.10'/%3E%3Crect x='210' y='18' width='4' height='4' opacity='.08'/%3E%3Crect x='300' y='120' width='6' height='6' opacity='.07'/%3E%3Crect x='96' y='210' width='4' height='4' opacity='.09'/%3E%3Crect x='180' y='300' width='6' height='6' opacity='.06'/%3E%3Crect x='330' y='280' width='4' height='4' opacity='.08'/%3E%3Crect x='60' y='330' width='4' height='4' opacity='.05'/%3E%3C/g%3E%3Cpath d='M0 150 H90 V170 H150' stroke='%23F0B90B' stroke-opacity='.05' fill='none'/%3E%3Cpath d='M360 60 H260 V90 H230' stroke='%23F0B90B' stroke-opacity='.05' fill='none'/%3E%3C/svg%3E");

  --board-row:360px; --board-row-sm:320px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--void) var(--pixels) repeat; color:var(--ink);
  font-family:var(--sans); font-size:var(--t-body); line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--gold); text-decoration:none}
a:hover{color:var(--gold-hi); text-decoration:underline}
:focus-visible{outline:2px solid var(--gold-hi); outline-offset:2px; border-radius:var(--r-sm)}

.wrap{max-width:1320px; margin:0 auto; padding-inline:var(--gutter)}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums}
.eyebrow{
  font-family:var(--pixel); font-size:11px; font-weight:400;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.eyebrow.gold{color:var(--gold)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
[hidden]{display:none !important}

/* the brain's voice */
.voice{font-family:var(--voice); font-style:normal; font-weight:500; letter-spacing:-.005em}

/* two-tone headline: first line ink, last line gold (BRAND.md §3) */
.headline-2tone > :last-child{color:var(--gold)}
.pixel-label{font-family:var(--pixel); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold)}

/* ---------------------------------------------------------------- topbar */
.topbar{
  border-bottom:1px solid var(--line);
  background:rgba(0,0,0,.85); backdrop-filter:blur(10px);
  position:sticky; top:0; z-index:30;
}
.topbar-in{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s5); padding-block:10px}
.brand{display:flex; align-items:center; gap:10px; flex-shrink:0; color:var(--ink)}
.brand:hover{text-decoration:none}
.brand img{width:28px; height:28px}
.brand .word{font-size:20px; font-weight:700; letter-spacing:-.04em; line-height:1}
.brand .word span{color:var(--gold)}
.nav{display:flex; align-items:center; gap:var(--s5); margin-left:var(--s4)}
.topbar-right{display:flex; align-items:center; gap:var(--s3) var(--s4); flex-wrap:wrap; margin-left:auto}

.navlink{
  font-family:var(--pixel); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
}
.navlink:hover{color:var(--gold); text-decoration:none}
.navlink[aria-current="page"]{color:var(--gold)}

.chip{
  font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:4px 10px; white-space:nowrap;
}
.status{display:flex; align-items:center; gap:var(--s2); font-size:var(--t-small); white-space:nowrap}
.dot{width:8px; height:8px; border-radius:50%; background:var(--muted); flex-shrink:0}
.dot.thinking{background:var(--buy); box-shadow:0 0 0 4px rgba(14,203,129,.16); animation:pulse 1.8s ease-in-out infinite}
.dot.idle{background:var(--muted)}
.dot.paused{background:var(--gold)}
.dot.stopped{background:var(--burn)}
.dot.off{background:transparent; box-shadow:inset 0 0 0 1.5px var(--muted)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.ago{font-family:var(--mono); font-size:11px; color:var(--muted); white-space:nowrap}

/* --------------------------------------------------------------- notices */
.notice{
  display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  border:1px solid var(--line-gold); background:rgba(240,185,11,.05);
  color:var(--gold); border-radius:var(--r-md); padding:8px 12px; margin-top:var(--s4);
}
.reconnect{
  position:fixed; left:50%; transform:translateX(-50%); bottom:18px; z-index:40;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  background:var(--raised); color:var(--gold); border:1px solid var(--line-gold);
  border-radius:999px; padding:8px 16px;
}

/* --------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  font-family:var(--sans); font-size:14px; font-weight:600; letter-spacing:-.01em;
  border-radius:var(--r-pill); padding:11px 20px; border:1px solid var(--line);
  color:var(--ink); white-space:nowrap; background:none; cursor:pointer;
}
.btn:hover{text-decoration:none; border-color:var(--muted); color:var(--ink)}
.btn.primary{background:var(--gold); border-color:var(--gold); color:var(--void)}
.btn.primary:hover{background:var(--gold-hi); border-color:var(--gold-hi); color:var(--void)}
.btn.sm{font-size:12.5px; padding:7px 13px}
.btn[disabled], .btn[aria-disabled="true"]{opacity:.42; cursor:not-allowed}
.btn.primary[disabled]:hover{background:var(--gold); border-color:var(--gold)}

/* ---------------------------------------------------------------- panels */
.panel{border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); overflow:hidden; min-width:0}
.panel.accent{border-color:var(--line-gold)}
.panel-h{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding:10px 14px; border-bottom:1px solid var(--line); min-height:40px;
}
.panel-h .lbl{display:flex; align-items:baseline; gap:var(--s2); min-width:0}
.panel-h .n{font-family:var(--mono); font-size:10px; color:var(--gold); letter-spacing:.14em}
.panel-b{padding:var(--s3) 14px}
.panel-b > :first-child{margin-top:0}
.panel-b > :last-child{margin-bottom:0}
.foot{color:var(--muted); font-size:var(--t-caption); line-height:1.65}
.foot strong{color:var(--ink)}
.foot p{margin:0 0 8px}
.foot p:last-child{margin-bottom:0}

/* ------------------------------------------------- the board (SPEC §4.2.4)
   Sixteen panels in a five-by-four rectangle: four span two columns, twelve
   span one, so every row sums to five and the bottom edge closes by
   construction. Row heights come from the grid, never from the content — each
   cell's body scrolls inside its own cell — because the rule the user set is
   that a panel holding a hundred rows and a panel holding none are the same
   shape.

   The area map is written out rather than left to auto-placement: adding a
   panel has to be a visible edit to this shape, never a silent reflow. Every
   rule here that sets `display` relies on the one `[hidden]` rule at the top of
   this file, so a panel the page hides stays hidden.

   Both maps do their own spanning; `board-cell--wide` in the markup marks the
   four doubles so a test can hold the markup and the maps to each other. No
   modifier here is a prefix of a block name, so a class string built by
   concatenation cannot accidentally match two rules. */
.board{
  display:grid; gap:var(--s3); margin-top:var(--s3);
  grid-template-columns:minmax(0,1fr);                /* phone: one column, 01 → 16 */
  grid-auto-rows:var(--board-row-sm);
}
/* A size container: one panel is 240 px wide on a laptop and 600 px on a
   tablet, so its insides answer to the cell's width, not the screen's. */
.board-cell{display:flex; flex-direction:column; min-width:0; min-height:0; container-type:inline-size}
.board-cell > .panel-h{flex:0 0 auto}
/* The scrolling region of a cell. `contain` keeps a flick inside the panel
   instead of handing the rest of it to the page half-way through. */
.cell-body{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin}
.cell-body > .panel-b{padding-bottom:var(--s4)}

/* Two columns (tablet). An explicit map here too: auto-placement left a hole
   beside every single panel that was followed by a wide one — four holes, which
   is the ragged board again at a smaller size. Twelve singles and four doubles
   are exactly ten rows of two, so this map closes; numbers stay in reading
   order except where a single steps up beside its neighbour. */
@media (min-width:601px){
  .board{
    grid-template-columns:repeat(2, minmax(0,1fr));
    grid-template-rows:repeat(10, var(--board-row));
    grid-template-areas:
      "p01 p03"
      "p02 p02"
      "p04 p05"
      "p06 p08"
      "p07 p07"
      "p09 p09"
      "p10 p11"
      "p12 p14"
      "p13 p13"
      "p15 p16";
  }
  .board-cell--p01{grid-area:p01}
  .board-cell--p02{grid-area:p02}
  .board-cell--p03{grid-area:p03}
  .board-cell--p04{grid-area:p04}
  .board-cell--p05{grid-area:p05}
  .board-cell--p06{grid-area:p06}
  .board-cell--p07{grid-area:p07}
  .board-cell--p08{grid-area:p08}
  .board-cell--p09{grid-area:p09}
  .board-cell--p10{grid-area:p10}
  .board-cell--p11{grid-area:p11}
  .board-cell--p12{grid-area:p12}
  .board-cell--p13{grid-area:p13}
  .board-cell--p14{grid-area:p14}
  .board-cell--p15{grid-area:p15}
  .board-cell--p16{grid-area:p16}
}

/* Five columns need the width for them: below this the two-column map reads
   better than five 170 px panels holding addresses. SPEC's rule is that it is
   not five columns below 900 px, and this honours it with room to spare. */
@media (min-width:1081px){
  .board{
    grid-template-columns:repeat(5, minmax(0,1fr));
    grid-template-rows:repeat(4, var(--board-row));
    grid-template-areas:
      "p01 p02 p02 p03 p04"
      "p05 p06 p07 p07 p08"
      "p09 p09 p10 p11 p12"
      "p13 p13 p14 p15 p16";
  }
}

/* Vault plate: the signature shape. Square corners and four gold corner
   ticks, used only on the panels that carry the live proof — the stream, the
   token's art, the headline figure, the launch preview. Everything else stays
   a plain panel, so the ticks keep meaning "this is the live thing". */
.plate{position:relative; border-radius:0}
.plate::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  --c:var(--gold); --l:11px; --w:2px;
  background:
    linear-gradient(var(--c),var(--c)) top left / var(--l) var(--w),
    linear-gradient(var(--c),var(--c)) top left / var(--w) var(--l),
    linear-gradient(var(--c),var(--c)) top right / var(--l) var(--w),
    linear-gradient(var(--c),var(--c)) top right / var(--w) var(--l),
    linear-gradient(var(--c),var(--c)) bottom left / var(--l) var(--w),
    linear-gradient(var(--c),var(--c)) bottom left / var(--w) var(--l),
    linear-gradient(var(--c),var(--c)) bottom right / var(--l) var(--w),
    linear-gradient(var(--c),var(--c)) bottom right / var(--w) var(--l);
  background-repeat:no-repeat;
}

/* Hairline grid: cells joined by 1px lines instead of separated by gaps, so a
   row of figures reads as one instrument rather than a row of cards. */
.hgrid{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.hgrid > *{background:var(--surface); min-width:0}

/* ----------------------------------------------------------------- stats */
.stats{grid-template-columns:repeat(auto-fit, minmax(150px, 1fr))}
.stat{padding:12px 14px; min-width:0}
.stat .v{
  font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:700;
  font-size:var(--t-figure); letter-spacing:-.01em; line-height:1.15;
  margin-top:6px; word-break:break-all;
}
.stat .u{font-size:var(--t-caption); color:var(--muted); margin-top:2px}
.stat .v.gold{color:var(--gold)}
.stat .v.buy{color:var(--buy)}
.stat .v.burn{color:var(--burn)}

.bar{height:4px; border-radius:999px; background:var(--raised); margin-top:9px; overflow:hidden}
.bar i{display:block; height:100%; width:0; background:var(--gold); border-radius:999px; transition:width .4s ease}
.bar.away i{background:var(--burn)}
.bar.toward i{background:var(--buy)}
.bar.tall{height:6px}

/* -------------------------------------------------------------- sections */
.section{padding-block:var(--section-y); border-top:1px solid var(--line)}
.section.flush{border-top:0}
.sh{display:flex; align-items:flex-end; gap:var(--s2) var(--s4); flex-wrap:wrap; margin-bottom:var(--s4)}
.sh-t{display:flex; flex-direction:column; gap:6px; min-width:0}
.sh-n{font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--gold)}
.sh h2{margin:0; font-size:var(--t-h2); font-weight:700; letter-spacing:-.035em; line-height:1.1}
.sh .more{margin-left:auto; font-family:var(--mono); font-size:11px; letter-spacing:.08em; white-space:nowrap}
/* on a phone the note drops under the title and wraps, instead of pushing the page sideways */
@media (max-width:620px){ .sh .more{margin-left:0; white-space:normal; overflow-wrap:anywhere} }
.lede{margin:-6px 0 var(--s4); color:var(--muted); max-width:70ch; font-size:14px}

/* ---------------------------------------------------------------- badges */
.badge{
  font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.13em;
  border:1px solid currentColor; border-radius:3px; padding:2px 6px; white-space:nowrap;
}
.badge.thought{color:var(--muted)}
.badge.action{color:var(--gold)}
.badge.result{color:var(--buy)}
.badge.rejected{color:var(--gold-hi)}
.badge.clamped{color:var(--gold-hi); border-style:dashed}
.badge.error{color:var(--burn)}
.badge.revenue{color:var(--buy)}
.badge.lesson{color:var(--muted)}
.badge.mission{color:var(--gold)}
.badge.system{color:var(--dim)}
.badge.program, .badge.pay{color:var(--gold)}
.badge.trade{color:var(--ink)}
.badge.solid{background:rgba(14,203,129,.12)}

.tool{font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--muted); white-space:nowrap}
.tool.buy{color:var(--buy)}
.tool.burn{color:var(--burn)}
.tool.pay{color:var(--gold)}
.tool.trade{color:var(--ink)}
.tool.bad{color:var(--burn)}
.tx{font-family:var(--mono); font-size:11px; white-space:nowrap}
.empty{padding:var(--s6) 14px; color:var(--muted); text-align:center; font-size:14px}

/* ----------------------------------------------------------------- marks */
.tmark{border-radius:22%; display:block; flex-shrink:0; background:var(--raised)}
.tmark.gen{border:0}
img.tmark{object-fit:cover}

.banner{
  position:relative; overflow:hidden;
  background-size:cover; background-position:center;
}
.banner.gen::after, .tart.gen::after{
  /* a faint node field so a generated banner reads as art, not an empty box */
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 78% 52%, rgba(240,185,11,.11) 0 1px, transparent 1.2px) 0 0/18px 18px,
    radial-gradient(circle at 20% 30%, rgba(240,185,11,.08), transparent 58%);
}

/* ------------------------------------------------------------ link chips */
.links{display:flex; flex-wrap:wrap; gap:6px}
.lk{
  display:inline-flex; align-items:center; gap:7px; min-width:0;
  border:1px solid var(--line); border-radius:var(--r-sm); padding:6px 10px;
  font-family:var(--mono); font-size:11px; color:var(--ink); white-space:nowrap;
}
a.lk:hover{border-color:var(--gold); color:var(--gold); text-decoration:none}
.lk .ico{color:var(--muted); flex-shrink:0; width:12px; text-align:center}
.lk.unset{color:var(--dim); border-style:dashed}
.lk.unset .ico{color:var(--dim)}
.copy{
  font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.12em;
  background:var(--raised); color:var(--ink); border:1px solid var(--line);
  border-radius:999px; padding:3px 9px; cursor:pointer; flex-shrink:0;
}
.copy:hover{border-color:var(--muted)}
.copy.done{color:var(--buy); border-color:var(--buy)}

/* --------------------------------------------------------- address rows */
.addr{display:flex; flex-direction:column; gap:var(--s2)}
.addr-row{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3)}
.addr-row .k{font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); flex-shrink:0}
.addr-row .val{font-family:var(--mono); font-size:12px; text-align:right; overflow-wrap:anywhere; min-width:0}
.addr-row .val.none{color:var(--dim)}

/* key/value rows, used in the narrow panels of every page */
.pairs{display:flex; flex-direction:column; gap:9px}
.pair{display:flex; justify-content:space-between; gap:var(--s3); align-items:baseline}
.pair .k{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); flex-shrink:0}
.pair .v{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:13px; text-align:right; min-width:0; overflow-wrap:anywhere}
.pair .v.up{color:var(--buy)}
.pair .v.down{color:var(--burn)}
.pair .v.gold{color:var(--gold)}
.pair .v.na{color:var(--dim); font-size:11px}

/* --------------------------------------------------------------- footer */
.pagefoot{border-top:1px solid var(--line); margin-top:var(--section-y); padding-block:var(--s6) var(--s7)}
.pagefoot-grid{display:grid; gap:var(--s5) var(--s6); grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr)}
.pagefoot .mark{font-size:16px; font-weight:700; letter-spacing:-.03em; display:flex; align-items:center; gap:8px}
.pagefoot .mark .word span{color:var(--gold)}
.pagefoot p{margin:var(--s2) 0 0; color:var(--muted); font-size:var(--t-caption); line-height:1.6; max-width:46ch}
.pagefoot .eyebrow{display:block; margin-bottom:var(--s2)}
@media (max-width:860px){ .pagefoot-grid{grid-template-columns:1fr} }

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .dot.thinking{animation:none}
  .bar i{transition:none}
  .fade-in{animation:none !important}
}
@media (max-width:720px){
  .nav{order:3; width:100%; margin-left:0; gap:var(--s4)}
}
@media (max-width:560px){
  .topbar-right{gap:var(--s2) var(--s3)}
  .topbar-right .ago{display:none}
}

.fade-in{animation:fade .45s ease}
@keyframes fade{from{opacity:0; transform:translateY(-5px)}to{opacity:1; transform:none}}

/* ------------------------------------------------------------ token card
   Shared by the landing page's token list and the launch page's preview, so
   what you preview is what gets listed. Built by MV.tokenCard(). */
.tcard{
  display:flex; flex-direction:column; min-width:0; color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); overflow:hidden;
}
a.tcard:hover{border-color:var(--line-gold); text-decoration:none; color:var(--ink)}
a.tcard:hover .tart img{transform:scale(1.03)}
.tart{
  position:relative; aspect-ratio:1/1; overflow:hidden; background-color:var(--raised);
  display:grid; place-items:center; border-bottom:1px solid var(--line);
}
.tart img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease}
.tart > .tmark{position:relative; z-index:1; box-shadow:0 0 0 1px var(--line-gold), 0 18px 40px rgba(0,0,0,.45)}
.tart-tags{position:absolute; top:8px; left:8px; right:8px; display:flex; justify-content:space-between; z-index:2; pointer-events:none}
.tag{
  font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.12em;
  background:rgba(0,0,0,.82); color:var(--muted); border:1px solid var(--line);
  border-radius:3px; padding:3px 6px; backdrop-filter:blur(4px);
}
.tag.on{color:var(--buy); border-color:rgba(14,203,129,.45)}
.tcard-body{padding:12px 14px 12px; display:flex; flex-direction:column; gap:10px}
.tcard-h{display:flex; align-items:center; gap:10px; min-width:0}
.tcard-nm{display:flex; align-items:baseline; gap:8px; min-width:0; flex-wrap:wrap}
.tcard-nm .nm{font-size:16px; font-weight:600; letter-spacing:-.02em; overflow-wrap:anywhere}
.tcard-nm .tk{font-family:var(--mono); font-size:11.5px; color:var(--gold)}
.tcard-grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px}
.tcard-grid .k{font-family:var(--mono); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.tcard-grid .v{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:13px; font-weight:700; margin-top:3px; overflow-wrap:anywhere}
.tcard-grid .v.gold{color:var(--gold)}
.tcard-grid .v.burn{color:var(--burn)}
.tcard-foot{display:flex; align-items:center; justify-content:space-between; gap:8px;
  border-top:1px solid var(--line); padding-top:9px; font-family:var(--mono); font-size:10.5px; color:var(--muted)}
.tcard-foot .who{display:flex; flex-direction:column; gap:1px; min-width:0}
.tcard-foot .mdl{color:var(--ink); overflow-wrap:anywhere}
.tcard-foot .prv{font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim)}
.tcard-foot .age{white-space:nowrap}

/* the wide card: one token gets the whole row instead of a quarter of it */
.tcard.wide{flex-direction:row}
.tcard.wide .tart{width:clamp(200px, 25%, 290px); flex-shrink:0; aspect-ratio:auto; min-height:230px;
  border-bottom:0; border-right:1px solid var(--line)}
.tcard.wide .tcard-body{flex:1; padding:16px 18px 14px; gap:12px}
.tcard.wide .tcard-h .tmark{width:38px !important; height:38px !important}
.tcard.wide .tcard-nm .nm{font-size:clamp(19px, 2vw, 24px); letter-spacing:-.03em}
.tcard.wide .tcard-nm .tk{font-size:12.5px}
.tcard.wide .tcard-grid{grid-template-columns:repeat(6, minmax(0,1fr)); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden}
.tcard.wide .tcard-grid > div{background:var(--surface); padding:8px 10px}
.tcard.wide .tcard-grid .v{font-size:15px}
.tcard.wide .tcard-foot{margin-top:auto}
.tcard-desc{margin:0; color:var(--muted); font-size:13.5px; line-height:1.55; max-width:88ch;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.tcard-say{margin:0; font-size:17px; line-height:1.42; color:var(--ink); border-left:2px solid var(--gold);
  padding-left:12px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
@media (max-width:900px){
  .tcard.wide .tcard-grid{grid-template-columns:repeat(3, minmax(0,1fr))}
}
@media (max-width:620px){
  .tcard.wide{flex-direction:column}
  .tcard.wide .tart{width:auto; min-height:0; aspect-ratio:2/1; border-right:0; border-bottom:1px solid var(--line)}
  .tcard.wide .tcard-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}

/* SPEC amendment Y: mainnet without a completed audit says so on every page. */
.unaudited{position:sticky; top:0; z-index:100; padding:8px 16px; background:#3A1015; color:#FFD7DC;
  border-bottom:1px solid #F6465D; font-family:var(--mono); font-size:12px; line-height:1.45; text-align:center}

/* ============================================================ pixel layer
   NeuroStack is drawn in pixels (owner's direction, 5 Oct 2026; BRAND.md §3):
   - every corner is square, and the framed things — panels, cards, buttons,
     chips, inputs — lose one 2px pixel at each corner (`--notch`), the way a
     sprite's box is drawn;
   - borders and bevels are whole 2px pixels (`--px`), one size everywhere;
   - headings are set in Pixelify Sans; body copy stays Sora so it reads,
     figures stay mono so they line up;
   - the page ground is faint pixel cursors and computers (pixel-bg.svg) and
     the mouse pointer is a pixel arrow and hand, all built by
     brand/build-web.mjs from Streamline Pixel (CC BY 4.0).
   It sits after every component rule so it wins without touching them. */
:root{
  --display:'Pixelify Sans', 'Sora', ui-sans-serif, system-ui, sans-serif;
  --px:2px;
  --notch:polygon(0 var(--px), var(--px) var(--px), var(--px) 0,
    calc(100% - var(--px)) 0, calc(100% - var(--px)) var(--px), 100% var(--px),
    100% calc(100% - var(--px)), calc(100% - var(--px)) calc(100% - var(--px)), calc(100% - var(--px)) 100%,
    var(--px) 100%, var(--px) calc(100% - var(--px)), 0 calc(100% - var(--px)));
}
*, *::before, *::after{border-radius:0 !important}
html{
  cursor:url("/cursor-arrow.svg") 0 0, auto;
  scrollbar-color:var(--gold-deep) var(--surface);
}
a, button, summary, select, label[for], [role="button"], [role="tab"], .btn, .copy{
  cursor:url("/cursor-hand.svg") 5 0, pointer;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea{cursor:text}
.btn[disabled], .btn[aria-disabled="true"], button[disabled]{cursor:not-allowed}
body{background:var(--void) url("/pixel-bg.svg") repeat}
::selection{background:var(--gold); color:var(--void)}
:focus-visible{outline:var(--px) solid var(--gold-hi); outline-offset:var(--px)}

/* headings in the pixel face; pixel faces are drawn at zero tracking */
h1, h2, h3{font-family:var(--display) !important; letter-spacing:0 !important; font-weight:700}
.tcard-nm .nm{font-family:var(--display); letter-spacing:0}

/* the framed things */
.panel, .hgrid, .tcard, .btn, .chip, .notice, .reconnect, .lk, .copy, .tag, .badge,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea{clip-path:var(--notch)}
.panel, .tcard, .notice, .reconnect{border-width:var(--px)}
.hgrid{gap:var(--px); border-width:var(--px)}
.tcard.wide .tcard-grid{gap:var(--px)}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea{border-width:var(--px) !important}
/* an outline outside a clipped box is cut off, so focus draws inside it */
.btn:focus-visible, .chip:focus-visible, .lk:focus-visible, .copy:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{outline-offset:calc(var(--px) * -2)}

/* buttons: a pixel bevel, lit top-left, shadowed bottom-right; pressed flips it */
.btn{
  font-family:var(--display); font-size:15px; font-weight:600; letter-spacing:0;
  border-width:var(--px); background:var(--surface);
  box-shadow:inset calc(var(--px) * -1) calc(var(--px) * -1) 0 rgba(0,0,0,.45), inset var(--px) var(--px) 0 rgba(255,255,255,.07);
}
.btn.primary{box-shadow:inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--gold-deep), inset var(--px) var(--px) 0 var(--gold-hi)}
.btn.primary:hover{box-shadow:inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--gold), inset var(--px) var(--px) 0 #FFF1A8}
.btn:active:not([disabled]){transform:translateY(var(--px)); box-shadow:inset var(--px) var(--px) 0 rgba(0,0,0,.45)}
.btn.lang{font-family:var(--sans)}

/* square status dots, segmented bars */
.dot.thinking{box-shadow:0 0 0 var(--px) var(--void), 0 0 0 calc(var(--px) * 2) rgba(14,203,129,.45)}
.bar{height:6px}
.bar.tall{height:8px}
.bar i{-webkit-mask:repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px);
               mask:repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px)}

/* section rules drawn as a dashed pixel line; section numbers get a pixel bullet */
.topbar{border-bottom:var(--px) solid var(--line); background:rgba(0,0,0,.9)}
.section{border-top:0;
  background:repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 10px) top left / 100% var(--px) no-repeat}
.section.flush{background:none}
.pagefoot{border-top:0;
  background:repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 10px) top left / 100% var(--px) no-repeat}
.sh-n{font-family:var(--pixel); font-size:11px; letter-spacing:.08em}
.sh-n::before{content:""; display:inline-block; width:6px; height:6px; background:var(--gold);
  margin-right:8px; vertical-align:1px; box-shadow:2px 2px 0 var(--gold-deep)}
.eyebrow.gold::before{content:""; display:inline-block; width:6px; height:6px; background:var(--gold); margin-right:8px; vertical-align:1px}
.tcard-say, .voice{border-left-width:var(--px)}

/* generated banners: a pixel grid, not a dot field */
.banner.gen::after, .tart.gen::after{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' shape-rendering='crispEdges'%3E%3Crect x='8' y='8' width='2' height='2' fill='%23F0B90B' fill-opacity='.14'/%3E%3C/svg%3E"),
    linear-gradient(135deg, rgba(240,185,11,.06), transparent 60%);
}
/* radios and checkboxes drawn as pixel squares */
input[type="radio"], input[type="checkbox"]{
  -webkit-appearance:none; appearance:none; margin:0; flex-shrink:0;
  width:14px; height:14px; border:var(--px) solid var(--muted); background:var(--void);
  display:inline-grid; place-content:center; cursor:url("/cursor-hand.svg") 5 0, pointer;
}
input[type="radio"]::before, input[type="checkbox"]::before{content:""; width:6px; height:6px; background:transparent}
input[type="radio"]:checked, input[type="checkbox"]:checked{border-color:var(--gold)}
input[type="radio"]:checked::before, input[type="checkbox"]:checked::before{background:var(--gold)}
input[type="radio"]:disabled, input[type="checkbox"]:disabled{opacity:.4; cursor:not-allowed}
@media (prefers-reduced-motion:reduce){ .btn:active:not([disabled]){transform:none} }

/* ------------------------------------------------------- 简体中文 (i18n.js) */
.btn.lang{min-width:44px; font-family:var(--sans); letter-spacing:0}
html[lang="zh-CN"]{
  --display:'Pixelify Sans', 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
  --sans:'Sora', 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans SC', 'Source Han Sans SC', 'Microsoft YaHei', ui-sans-serif, system-ui, sans-serif;
  --voice:'Sora', 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans SC', 'Source Han Sans SC', 'Microsoft YaHei', sans-serif;
  --pixel:'Silkscreen', 'PingFang SC', 'Noto Sans SC', monospace;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, 'PingFang SC', 'Noto Sans SC', monospace;
}
html[lang="zh-CN"] body{line-height:1.7; word-break:normal; overflow-wrap:anywhere; line-break:strict}
/* Chinese has no capitals and no italics: wide tracking and slanted glyphs only blur it. */
html[lang="zh-CN"] :where(h1, h2, h3, .btn, .eyebrow, .kicker, .lbl, .chip, .tag, .badge, .navlink, label, th){letter-spacing:0 !important}
html[lang="zh-CN"] :where(.eyebrow, .kicker, .panel-h .n, .lbl, th, .chip, .tag, .badge){text-transform:none}
html[lang="zh-CN"] .voice, html[lang="zh-CN"] em, html[lang="zh-CN"] i{font-style:normal}
html[lang="zh-CN"] :where(h1, h2){line-height:1.25}