/* TRADER BABIES base stylesheet.
 *
 * Provenance: cloned from dev-tokens/uMinis/site_template.html (the <style> block,
 * lines 4-286 plus the launched-mode block at 306-350). Everything down to the
 * "TRADER BABIES ADDITIONS" marker is copied VERBATIM from that file, with only
 * these renames, so the two sites look identical:
 *
 *   .machine        -> .panel            (same rule, generic name: it is just
 *                                         "surface + 2px line + 8px hard shadow")
 *   .machine.graduated -> .panel.ok
 *   .machine-head   -> .panel-head
 *
 * Do NOT redesign. SPEC.md section 3.2 says the visual system is cloned, not
 * reinterpreted. Single theme, dark only, every colour painted explicitly.
 *
 * Motion rules inherited from uMinis/skill.md: ease-out for enter/exit,
 * 120-250ms, `linear` only for the marquee tickers, hover behind
 * @media (hover:hover) and (pointer:fine), and one prefers-reduced-motion
 * off-switch at the bottom that must list every animated selector.
 */

/* ---------- tokens (verbatim) ---------- */
:root{
  --bg:#131118;
  --surface:#1C1923;
  --surface2:#221E2B;
  --ink:#ECE8F1;
  --soft:#9A93A8;
  --line:#3A3444;
  --faint:rgba(236,232,241,.08);
  --orange:#FF9D2E;
  --orange-dim:#B86F1E;
  --green:#52D273;
  --red:#E5484D;
  --font-display:Impact,Haettenschweiler,'Arial Narrow Bold','Franklin Gothic Medium',sans-serif;
  --font-body:Verdana,Geneva,'Segoe UI',sans-serif;
  --font-mono:Consolas,'Cascadia Mono',ui-monospace,Menlo,monospace;
  --ease-out:cubic-bezier(.215,.61,.355,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15.5px;
  line-height:1.65;
  overflow-x:hidden;
}
::selection{background:var(--orange);color:#131118}
a{color:var(--ink)}
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* ---------- marquee strips ---------- */
.strip{overflow:hidden;border-top:2px solid var(--line);border-bottom:2px solid var(--line)}
.strip-orange{background:var(--orange);color:#131118}
.strip-green{background:var(--green);color:#131118}
.strip-track{display:flex;width:max-content;will-change:transform;animation:ticker 30s linear infinite}
.strip span{
  display:inline-block;padding:.45rem 0;
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.14em;
  white-space:nowrap;font-weight:bold;
}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- nav ---------- */
header.bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem 1.4rem;background:var(--bg);
  border-bottom:2px solid var(--line);
  position:sticky;top:0;z-index:50;
  /* CLASS COLLISION FIX. The trait-table rule `.bar{height:8px;
   * background:var(--orange-dim);position:relative}` further down also matches
   * <header class="bar">. This rule already overrides background and position,
   * but it never set a height, so the 8px leaked through and the header
   * collapsed to 8px with its logo, nav and connect button painting outside it
   * and over the marquee. Measured in Chrome: header height 21px against 222px
   * of content at 375px wide. Every page shares this header, so the fix
   * belongs here and not in a page. Do not delete it without also renaming the
   * trait-table `.bar`. */
  height:auto;
}
.logo{font-family:var(--font-display);font-size:1.5rem;letter-spacing:.02em;text-decoration:none;color:var(--ink)}
.logo em{font-style:normal;color:var(--orange)}
nav.links{display:flex;gap:1.2rem;flex-wrap:wrap}
nav.links a{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--soft);
  border-bottom:2px solid transparent;padding-bottom:2px;
  transition:border-color 150ms ease,color 150ms ease;
}
@media (hover:hover) and (pointer:fine){
  nav.links a:hover{border-color:var(--orange);color:var(--orange)}
}
/* ADDITION: multi-page site needs a current-page marker; uMinis was one page. */
nav.links a[aria-current="page"]{color:var(--ink);border-color:var(--line)}

.sheet{position:relative;max-width:1040px;margin:0 auto;padding:0 1.4rem}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:2px solid var(--line)}
.paperwall{
  position:absolute;inset:-20px;z-index:0;pointer-events:none;user-select:none;
  font-family:var(--font-mono);font-size:12px;line-height:2.1;
  color:rgba(82,210,115,.09);
  text-align:justify;overflow:hidden;
  transform:rotate(-1deg);
}
.hero .sheet{position:relative;z-index:1;padding-top:3.6rem;padding-bottom:3.2rem}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:2.6rem;align-items:center}
@media(max-width:880px){.hero-grid{grid-template-columns:1fr}}
.chip{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;
  background:var(--surface);border:2px solid var(--line);display:inline-block;
  padding:.3rem .7rem;color:var(--green);
}
h1.mega{
  font-family:var(--font-display);
  font-size:clamp(4.4rem,13vw,9rem);
  line-height:.94;margin:.22em 0 .12em;letter-spacing:.01em;
  text-shadow:5px 5px 0 var(--orange-dim);
  transition:text-shadow 150ms ease;
  text-wrap:balance;
}
h1.mega .u{color:var(--orange)}
@media (hover:hover) and (pointer:fine){
  h1.mega:hover{text-shadow:7px 7px 0 var(--orange-dim)}
}
.hero-sub{font-size:1.28rem;margin:0 0 1.2rem;max-width:34ch;color:var(--ink);text-wrap:balance}
.hero-copy{
  background:var(--surface);border:2px solid var(--line);
  box-shadow:6px 6px 0 rgba(0,0,0,.4);
  padding:1.1rem 1.3rem;max-width:58ch;font-size:.93rem;color:var(--soft);
}
.hero-copy p{margin:0 0 .8em}
.hero-copy p:last-child{margin-bottom:0}
.hero-copy b{color:var(--ink);font-weight:bold}
.hero-copy a{color:var(--orange)}

.figure{display:flex;flex-direction:column;align-items:center;gap:.8rem}
.figframe{
  position:relative;background:var(--surface);
  border:2px solid var(--ink);
  box-shadow:-8px 8px 0 var(--orange),8px -8px 0 var(--green);
  padding:10px;cursor:pointer;
  transition:transform 150ms var(--ease-out);
  will-change:transform;max-width:400px;width:100%;
}
.figframe:active{transform:scale(.97)}
.figframe img{display:block;width:100%;height:auto;image-rendering:pixelated}
/* ADDITION: the mint peek swaps its image and pops it (keyframes pop below) */
.figframe img.pop{animation:pop 350ms var(--ease-out)}
.figcap{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.04em;color:var(--soft);text-align:center;max-width:46ch;background:var(--surface);padding:.35rem .7rem;border:1px solid var(--line)}
.figcap b{color:var(--orange)}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line);border:2px solid var(--line);margin:2.8rem 0 0}
@media(max-width:700px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--surface);padding:1rem 1.1rem}
.stat .num{font-family:var(--font-display);font-size:2.4rem;line-height:1;color:var(--orange);font-variant-numeric:tabular-nums}
.stat .num i{font-style:normal;color:var(--green);font-size:1.4rem}
.stat .lbl{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin-top:.45rem}

/* ---------- sections ---------- */
section.block{position:relative;padding:3.4rem 0 1rem}
.eyebrow{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--green);margin:0 0 .5rem}
.eyebrow::before{content:"/// "}
h2.head{font-family:var(--font-display);font-size:clamp(2rem,5vw,3.1rem);margin:0 0 .6rem;letter-spacing:.01em;text-wrap:balance}
.lede{max-width:64ch;margin:0 0 1.9rem;color:var(--soft)}
.lede b{color:var(--ink)}

/* ---------- panel (was .machine) ---------- */
.panel{
  background:var(--surface);border:2px solid var(--line);
  box-shadow:8px 8px 0 rgba(0,0,0,.4);
  padding:1.4rem;transition:border-color 250ms var(--ease-out);
}
.panel.ok{border-color:var(--green)}
.panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.panel-head .t{font-family:var(--font-display);font-size:1.25rem;letter-spacing:.02em}
.panel-head .s{font-family:var(--font-mono);font-size:.66rem;color:var(--soft)}

/* readout tiles inside a panel (verbatim from .readouts/.ro) */
.readouts{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line);border:2px solid var(--line);margin-top:.9rem}
@media(max-width:700px){.readouts{grid-template-columns:repeat(2,1fr)}}
.ro{background:var(--surface2);padding:.6rem .8rem}
.ro .v{font-family:var(--font-mono);font-size:1.15rem;color:var(--ink);font-variant-numeric:tabular-nums}
.ro .v i{font-style:normal;color:var(--orange)}
.ro .l{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin-top:.15rem}

input[type=range]{flex:1;min-width:180px;accent-color:var(--orange);height:2rem}
.slider-row{display:flex;align-items:center;gap:1rem;margin:1.1rem 0 .4rem;flex-wrap:wrap}
.slider-row label{font-family:var(--font-mono);font-size:.78rem;color:var(--ink);white-space:nowrap;letter-spacing:.06em}

/* thumb strip (verbatim) */
.thumbs{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-top:1rem;min-height:52px}
.thumbs img{width:48px;height:48px;border:1px solid var(--line);image-rendering:pixelated;display:block}
.thumbs .more{font-family:var(--font-mono);font-size:.7rem;color:var(--soft)}
.thumbs .hint{font-family:var(--font-mono);font-size:.72rem;color:var(--soft)}

/* ---------- numbered steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;counter-reset:step;margin-top:2.1rem}
@media(max-width:800px){.steps{grid-template-columns:1fr}}
.step{background:var(--surface);border:2px solid var(--line);padding:1.15rem 1.2rem;position:relative}
.step::before{
  counter-increment:step;content:counter(step);
  position:absolute;top:-14px;left:12px;
  font-family:var(--font-mono);font-size:.85rem;font-weight:bold;
  background:var(--orange);color:#131118;border:2px solid var(--line);
  width:26px;height:26px;display:grid;place-items:center;
}
.step h3{font-family:var(--font-display);font-size:1.15rem;margin:.3rem 0 .45rem;letter-spacing:.02em}
.step p{margin:0;font-size:.88rem;color:var(--soft)}

/* ---------- spec sheet (key/value table) ---------- */
.spec{background:var(--surface);border:2px solid var(--line);overflow-x:auto;margin-top:2.1rem}
.spec table{border-collapse:collapse;width:100%;min-width:560px}
.spec caption{caption-side:top;text-align:left;font-family:var(--font-mono);font-size:.68rem;color:var(--soft);padding:.9rem 1.1rem .4rem}
.spec td{padding:.55rem 1.1rem;font-size:.88rem;border-bottom:1px solid var(--faint);color:var(--soft)}
.spec tr:last-child td{border-bottom:none}
.spec td.k{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);white-space:nowrap;width:1%;padding-right:2rem}

/* ---------- art grid ---------- */
.lab{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.1rem}
.mini-card{background:var(--surface);border:2px solid var(--line);padding:9px 9px 11px;display:flex;flex-direction:column;gap:.55rem}
.mini-card .inner{transition:transform 150ms var(--ease-out);will-change:transform}
@media (hover:hover) and (pointer:fine){
  .mini-card:hover{box-shadow:-4px 4px 0 var(--orange),4px -4px 0 var(--green)}
  .mini-card:hover .inner{transform:translateY(-3px)}
}
.mini-card img{width:100%;height:auto;display:block;image-rendering:pixelated}
.mini-cap{font-family:var(--font-mono);font-size:.64rem;line-height:1.6;color:var(--soft);margin:0}
.mini-cap b{color:var(--ink);display:block;font-size:.72rem}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:bold;
  background:var(--orange);color:#131118;border:2px solid var(--line);
  padding:.7rem 1.3rem;cursor:pointer;
  box-shadow:4px 4px 0 rgba(0,0,0,.5);
  transition:transform 120ms var(--ease-out),box-shadow 120ms var(--ease-out);
  will-change:transform;
}
.btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{box-shadow:2px 2px 0 rgba(0,0,0,.5)}
}
/* green secondary, from the launched-mode block (.btn.buy) */
.btn.buy{
  font-size:.82rem;background:var(--green);color:#131118;text-decoration:none;
}
.toolbar{display:flex;align-items:center;gap:1rem;margin:1.4rem 0 0;flex-wrap:wrap}
.toolbar .note{font-family:var(--font-mono);font-size:.68rem;color:var(--soft)}

/* ---------- trait table ---------- */
.ttable{background:var(--surface);border:2px solid var(--line);overflow-x:auto}
.ttable table{border-collapse:collapse;width:100%;min-width:640px}
.ttable caption{caption-side:top;text-align:left;font-family:var(--font-mono);font-size:.68rem;color:var(--soft);padding:.9rem 1.1rem .4rem}
.ttable th,.ttable td{padding:.5rem 1.1rem;text-align:left;font-size:.88rem}
.ttable thead th{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);border-bottom:2px solid var(--line)}
.ttable tbody tr{border-bottom:1px solid var(--faint)}
.ttable tbody tr:last-child{border-bottom:none}
.ttable td.fam{color:var(--ink);font-weight:bold;white-space:nowrap}
.ttable td.cnt{font-family:var(--font-mono);font-variant-numeric:tabular-nums;width:4ch;text-align:right;color:var(--orange)}
.ttable td.barcell{width:30%}
.ttable td.ex{font-family:var(--font-mono);font-size:.66rem;color:var(--soft)}
.bar{height:8px;background:var(--orange-dim);position:relative}
.bar::after{content:"";position:absolute;right:0;top:0;bottom:0;width:3px;background:var(--orange)}
.ttable tfoot td{font-family:var(--font-mono);font-size:.68rem;color:var(--soft);border-top:2px solid var(--line)}

/* ---------- orange inverted band ---------- */
.token{background:var(--orange);color:#131118;margin-top:3.6rem;border-top:2px solid var(--line);border-bottom:2px solid var(--line)}
.token .sheet{padding-top:3.6rem;padding-bottom:3.6rem}
.token .eyebrow{color:#131118}
.token h2.head{color:#131118;text-shadow:none}
.token-rows{font-family:var(--font-mono);font-size:.92rem;line-height:2.15;margin:1.4rem 0;max-width:62ch;font-weight:bold}
.token-rows .k{color:rgba(19,17,24,.55);display:inline-block;min-width:10ch;font-weight:normal}
.token-rows .pending{background:#131118;color:var(--orange);padding:.05rem .45rem}

/* ---------- warning box ---------- */
.warnbox{
  background:#131118;color:var(--ink);border:2px solid var(--red);
  box-shadow:6px 6px 0 rgba(0,0,0,.35);
  padding:1.1rem 1.3rem;max-width:62ch;font-size:.9rem;
}
.warnbox b{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;color:var(--red);display:block;margin-bottom:.4rem}
.warnbox p{margin:0;color:var(--soft)}

/* ---------- faq ---------- */
.faq{max-width:64ch}
.faq dt{font-weight:bold;font-size:1.05rem;margin:1.6rem 0 .3rem;color:var(--ink)}
.faq dt::before{content:"> ";color:var(--green);font-family:var(--font-mono)}
.faq dd{margin:0;color:var(--soft);font-size:.92rem}

/* ---------- footer ---------- */
footer{border-top:2px solid var(--line);margin-top:3.6rem;background:var(--surface)}
footer .sheet{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;padding-top:1.5rem;padding-bottom:1.5rem}
footer .cite{font-family:var(--font-mono);font-size:.66rem;color:var(--soft);max-width:48ch}
.badges{display:flex;gap:.6rem;flex-wrap:wrap}
.badge{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.06em;
  border:2px solid var(--line);padding:.25rem .55rem;background:var(--bg);color:var(--soft);
  text-decoration:none;display:inline-block;
}
@media (hover:hover) and (pointer:fine){.badge:hover{color:var(--orange);border-color:var(--orange)}}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(10px);transition:opacity 250ms var(--ease-out),transform 250ms var(--ease-out)}
.reveal.in{opacity:1;transform:none}

/* ---------- live bar + copy chip (from the launched-mode block) ---------- */
.cta-row{display:flex;gap:.8rem;align-items:center;margin-top:1.2rem;flex-wrap:wrap}
.ca-copy{
  font-family:var(--font-mono);font-size:.72rem;color:var(--ink);cursor:pointer;
  background:var(--surface2);border:2px solid var(--line);padding:.6rem .8rem;display:flex;gap:.6rem;align-items:center;
}
.ca-copy .cc{color:var(--orange);text-transform:uppercase;letter-spacing:.1em}
.ca-copy.copied .cc{color:var(--green)}
@media (hover:hover) and (pointer:fine){.ca-copy:hover{border-color:var(--orange)}}

.livebar{display:flex;gap:2px;flex-wrap:wrap;margin-top:2px;background:var(--line);border:2px solid var(--line);border-top:none}
.livebar .lb{background:var(--surface);padding:.7rem 1.1rem;flex:1;min-width:120px}
.livebar .lv{font-family:var(--font-mono);font-size:1.35rem;color:var(--orange);font-variant-numeric:tabular-nums;display:block}
.livebar .ll{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin-top:.2rem;display:block}
.livebar .dot{display:flex;align-items:center;gap:.5rem;flex:0 0 auto}
.pulse{width:9px;height:9px;background:var(--green);border-radius:50%;box-shadow:0 0 0 0 rgba(82,210,115,.6);animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(82,210,115,.55)}70%{box-shadow:0 0 0 8px rgba(82,210,115,0)}100%{box-shadow:0 0 0 0 rgba(82,210,115,0)}}

h2.head .count{font-family:var(--font-mono);font-size:1.3rem;color:var(--green);letter-spacing:0}
.mintgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.9rem}
.mtile{background:var(--surface);border:2px solid var(--line);padding:8px;display:flex;flex-direction:column;gap:.5rem}
.mtile .art{position:relative;aspect-ratio:1/1;border:1px solid var(--line);overflow:hidden;background:#16131C}
.mtile .art img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated;display:block}
.mtile .meta{font-family:var(--font-mono);font-size:.64rem;color:var(--soft);line-height:1.5}
.mtile .meta b{color:var(--ink);display:block;font-size:.72rem}
.mtile .meta a{color:var(--orange);text-decoration:none}
@media (hover:hover) and (pointer:fine){.mtile .meta a:hover{text-decoration:underline}}
.mtile.fresh{animation:pop 350ms var(--ease-out)}
@keyframes pop{from{transform:scale(.96);opacity:.4}to{transform:none;opacity:1}}

/* ================= TRADER BABIES ADDITIONS =================
 * Everything below is new. Each one exists because SPEC.md asks for a state
 * uMinis never had (preview mode, wallet connect, per-token power, claimable
 * ETH). They are built out of the same primitives: 2px --line border, hard
 * offset shadow, mono uppercase label with letter-spacing .12em.
 */

/* Preview banner. SPEC 3.3: empty contract address must render an honest
 * banner and disable the buttons, never fake a number. Orange, not red: this
 * is a state, not an error. */
.notice{
  display:flex;gap:.7rem;align-items:baseline;flex-wrap:wrap;
  background:var(--surface);border:2px solid var(--orange);
  box-shadow:6px 6px 0 rgba(0,0,0,.35);
  padding:.8rem 1.1rem;margin:1.4rem 0;font-size:.9rem;color:var(--soft);max-width:64ch;
}
.notice b{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--orange)}

/* Disabled button: keeps the shape, drops the shadow, no hover, no press. */
.btn[disabled],.btn[aria-disabled="true"]{
  background:var(--surface2);color:var(--soft);border-color:var(--line);
  box-shadow:none;cursor:not-allowed;
}
.btn[disabled]:active,.btn[aria-disabled="true"]:active{transform:none}

/* Value that could not be read. Never a number, always this. */
.unavail{color:var(--soft);font-family:var(--font-mono);font-size:.9em}

/* Status line / toast. Fixed bottom-left so it never covers the nav. */
.toast{
  position:fixed;left:1.4rem;bottom:1.4rem;z-index:80;max-width:min(90vw,46ch);
  background:var(--surface);border:2px solid var(--line);color:var(--ink);
  box-shadow:6px 6px 0 rgba(0,0,0,.45);
  padding:.7rem 1rem;font-family:var(--font-mono);font-size:.72rem;line-height:1.55;
  opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out);
}
.toast.in{opacity:1;transform:none}
.toast.ok{border-color:var(--green)}
.toast.err{border-color:var(--red)}

/* Rarity tier pill. Colours are the only place tier is encoded, so keep the
 * text label as well: colour alone is not an accessible signal. */
.tier{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  border:2px solid var(--line);background:var(--bg);color:var(--soft);
  padding:.15rem .45rem;display:inline-block;
}
.tier.common{color:var(--soft)}
.tier.rare{color:var(--ink);border-color:var(--ink)}
.tier.epic{color:var(--green);border-color:var(--green)}
.tier.legendary{color:var(--orange);border-color:var(--orange)}

/* Two-column key/value rows for wallet + pool figures. */
.kv{font-family:var(--font-mono);font-size:.82rem;line-height:2;margin:0}
.kv div{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--faint);padding:.15rem 0}
.kv div:last-child{border-bottom:none}
.kv .k{color:var(--soft);letter-spacing:.08em;text-transform:uppercase;font-size:.66rem}
.kv .v{color:var(--ink);font-variant-numeric:tabular-nums}
.kv .v.hot{color:var(--orange)}

/* Number input, matched to .btn so a quantity field sits beside one cleanly. */
.field{
  font-family:var(--font-mono);font-size:.9rem;
  background:var(--surface2);color:var(--ink);border:2px solid var(--line);
  padding:.66rem .8rem;min-width:6ch;
}
.field:disabled{color:var(--soft);cursor:not-allowed}

/* Selectable baby tile on /stake. Selection is a border swap, not a glow. */
.pick{cursor:pointer;transition:border-color 150ms ease}
.pick[aria-pressed="true"]{border-color:var(--orange)}

/* ---------- [hidden] must actually hide ----------
 * .notice, .toast, .status, .flow and several others set `display`, and a bare
 * `display:flex` beats the user-agent `[hidden]{display:none}`. Every preview
 * banner and every conditional block on this site ships in the HTML as
 * `hidden` and is unhidden by js/app.js, so this one line is load-bearing.
 * It is the only !important in the file. */
[hidden]{display:none !important}

/* Screen-reader-only text, for icon-ish controls and skip links. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- header: mobile wrap ----------
 * uMinis was one page with three links. This site has six plus an external X
 * link, which overflows a phone. Let the bar wrap into two rows and centre the
 * nav on the second row, and drop the sticky behaviour below the fold so a
 * two-row header does not eat a third of a small screen. */
@media(max-width:760px){
  header.bar{flex-wrap:wrap;justify-content:center;padding:.6rem 1rem;position:static}
  header.bar .logo{flex:0 0 100%;text-align:center}
  nav.links{justify-content:center;gap:.9rem;width:100%}
  nav.links a{padding:.5rem 0;min-height:24px}
}
/* The connect button lives in the header on every page. */
.bar-tools{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
@media(max-width:760px){.bar-tools{width:100%;justify-content:center;margin-top:.5rem}}

/* Network chip beside the connect button. Grey by default, green once the
 * wallet reports the right chain. Never claims a connection it does not have. */
.netchip{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  border:2px solid var(--line);background:var(--surface);color:var(--soft);
  padding:.3rem .55rem;display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;
}
.netchip .d{width:7px;height:7px;background:var(--soft);border-radius:50%;flex:0 0 auto}
.netchip.ok{color:var(--green);border-color:var(--green)}
.netchip.ok .d{background:var(--green)}
.netchip.bad{color:var(--red);border-color:var(--red)}
.netchip.bad .d{background:var(--red)}
@media(max-width:520px){.netchip{display:none}}

/* ---------- buttons: ghost, sizes, rows ----------
 * Primary is the orange .btn above. Ghost is the same geometry with no fill,
 * for the secondary action in a pair (Unstake next to Claim, Cancel next to
 * Mint). Hover is still "the shadow shrinks", never a colour swap. */
.btn.ghost{
  background:transparent;color:var(--ink);border-color:var(--line);
  box-shadow:4px 4px 0 rgba(0,0,0,.35);
}
@media (hover:hover) and (pointer:fine){
  .btn.ghost:hover{border-color:var(--orange);color:var(--orange);box-shadow:2px 2px 0 rgba(0,0,0,.35)}
}
.btn.ghost[disabled],.btn.ghost[aria-disabled="true"]{
  background:transparent;color:var(--soft);border-color:var(--line);box-shadow:none;
}
.btn.sm{font-size:.68rem;padding:.45rem .8rem}
.btn.wide{width:100%;display:block;text-align:center}
/* 44px minimum tap target, per the motion/accessibility rules in skill.md. */
.btn{min-height:44px}
.btn.sm{min-height:34px}
.btn-row{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin-top:1.1rem}
/* A .btn that is an <a> needs the anchor defaults knocked out. */
a.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}

/* ---------- chip variants ----------
 * .chip (green) already exists and is the phase pill above the h1. These are
 * the other three phases, so the pill colour and the pill text always agree. */
.chip.warn{color:var(--orange)}
.chip.off{color:var(--soft)}
.chip.bad{color:var(--red)}
.chip .d{display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:.45rem;vertical-align:baseline}

/* ---------- form controls ----------
 * Dark theme, square, 2px --line borders, same family as .btn so a field and a
 * button sit level beside each other. */
.field-row{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin:1rem 0 .3rem}
.field-row label,.lab{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--soft);white-space:nowrap;
}
.field{min-height:44px}
.field:focus{border-color:var(--orange);outline:none}
/* Kill the browser spinners: they render near-white on this background and the
 * .stepper below is the intended control. */
.field[type=number]{-moz-appearance:textfield;appearance:textfield}
.field[type=number]::-webkit-outer-spin-button,
.field[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.field.wide{width:100%}
.field::placeholder{color:var(--soft);opacity:1}

/* Quantity stepper: minus, value, plus. The value is a real <input> so a
 * keyboard user can type, the buttons are for thumbs. */
.stepper{display:inline-flex;align-items:stretch;border:2px solid var(--line);background:var(--surface2)}
.stepper button{
  font-family:var(--font-mono);font-size:1rem;font-weight:bold;line-height:1;
  background:var(--surface2);color:var(--ink);border:none;cursor:pointer;
  width:44px;min-height:44px;
  transition:background 120ms ease,color 120ms ease;
}
@media (hover:hover) and (pointer:fine){.stepper button:hover{background:var(--orange);color:#131118}}
.stepper button:disabled{color:var(--line);cursor:not-allowed;background:var(--surface2)}
.stepper input{
  font-family:var(--font-mono);font-size:.95rem;text-align:center;
  background:transparent;color:var(--ink);border:none;border-left:2px solid var(--line);border-right:2px solid var(--line);
  width:5ch;min-height:44px;-moz-appearance:textfield;appearance:textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper input:focus{outline:none;background:var(--surface)}

/* Range. accent-color alone leaves a light default track on this background,
 * so the track and thumb are painted explicitly for both engines. Square thumb
 * on purpose: nothing else on this site is round except the status dots. */
input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
input[type=range]:disabled{cursor:not-allowed}
input[type=range]::-webkit-slider-runnable-track{height:10px;background:var(--surface2);border:2px solid var(--line)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:20px;height:20px;margin-top:-7px;
  background:var(--orange);border:2px solid var(--line);cursor:pointer;
}
input[type=range]::-moz-range-track{height:10px;background:var(--surface2);border:2px solid var(--line)}
input[type=range]::-moz-range-thumb{
  width:18px;height:18px;border-radius:0;
  background:var(--orange);border:2px solid var(--line);cursor:pointer;
}
input[type=range]:disabled::-webkit-slider-thumb{background:var(--soft)}
input[type=range]:disabled::-moz-range-thumb{background:var(--soft)}

/* ---------- progress bar (mint supply) ---------- */
.prog{height:16px;background:var(--surface2);border:2px solid var(--line);overflow:hidden;margin:.9rem 0 .4rem}
.prog span{display:block;height:100%;width:0;background:var(--orange);transition:width 250ms var(--ease-out)}
.prog-cap{display:flex;justify-content:space-between;gap:1rem;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}

/* ---------- inline status line ----------
 * The toast is transient. This is the one that has to persist, because it
 * carries the tx hash link while a transaction is in flight. Every page that
 * sends a transaction has exactly one of these under its button. */
.status{
  font-family:var(--font-mono);font-size:.72rem;line-height:1.7;color:var(--soft);
  border-left:2px solid var(--line);padding:.35rem 0 .35rem .8rem;margin-top:1rem;
  overflow-wrap:anywhere;
}
.status.ok{color:var(--ink);border-left-color:var(--green)}
.status.err{color:var(--ink);border-left-color:var(--red)}
.status.busy{border-left-color:var(--orange)}
.status a{color:var(--orange)}

/* Small mono footnote, standalone version of .toolbar .note. */
.note{font-family:var(--font-mono);font-size:.68rem;line-height:1.7;color:var(--soft)}

/* ---------- unavailable ----------
 * SPEC 3.3: an address IS set but the read failed. Show this, never a number,
 * never a zero. Page scripts write the literal word through TB.unavailable().
 * .unavail is kept as an alias so nothing that already used it breaks. */
.unavailable,.unavail{
  color:var(--soft);font-family:var(--font-mono);font-size:.86em;
  font-variant-numeric:normal;letter-spacing:.04em;
}

/* ---------- skeleton / loading ----------
 * Used between first paint and the first successful read, so a figure slot is
 * never empty and never shows a placeholder digit. Width comes from the
 * element it replaces, so set a width inline or use .sk-2/.sk-4/.sk-8 (ch). */
.sk{
  display:inline-block;vertical-align:middle;height:1em;min-width:3ch;
  background:linear-gradient(90deg,var(--surface2) 0%,var(--line) 50%,var(--surface2) 100%);
  background-size:200% 100%;
  animation:sk 1.2s ease-in-out infinite;
}
.sk-2{min-width:2ch}.sk-4{min-width:4ch}.sk-8{min-width:8ch}
.sk-line{display:block;height:.85em;margin:.35em 0}
@keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}}
/* A whole panel waiting on its first read. */
.loading{opacity:.55;pointer-events:none;transition:opacity 200ms var(--ease-out)}

/* ---------- layout helpers ----------
 * Two and three column blocks that collapse on the same breakpoints as the
 * rest of the site, so a page author does not write a media query. */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:start}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;align-items:start}
.cols-side{display:grid;grid-template-columns:1.15fr .85fr;gap:1.8rem;align-items:start}
@media(max-width:880px){.cols2,.cols-side{grid-template-columns:1fr}}
@media(max-width:800px){.cols3{grid-template-columns:1fr}}
.stats.three{grid-template-columns:repeat(3,1fr)}
.stats.two{grid-template-columns:repeat(2,1fr)}
@media(max-width:700px){.stats.three{grid-template-columns:repeat(2,1fr)}}
.readouts.three{grid-template-columns:repeat(3,1fr)}
.readouts.two{grid-template-columns:repeat(2,1fr)}
@media(max-width:700px){.readouts.three{grid-template-columns:repeat(2,1fr)}}

/* Compact page header for the five pages that are not the home page: same
 * eyebrow + Impact title, no full hero, no paperwall. */
.pagehead{border-bottom:2px solid var(--line);background:var(--surface)}
.pagehead .sheet{padding-top:2.4rem;padding-bottom:2rem}
.pagehead h1{font-family:var(--font-display);font-size:clamp(2.4rem,7vw,4rem);line-height:1;margin:.15em 0 .35em;text-shadow:4px 4px 0 var(--orange-dim);text-wrap:balance}
.pagehead h1 .u{color:var(--orange)}
.pagehead .lede{margin-bottom:0}

/* ---------- addresses and code ---------- */
code,.addr{
  font-family:var(--font-mono);font-size:.85em;
  background:var(--surface2);border:1px solid var(--line);
  padding:.08em .4em;color:var(--ink);overflow-wrap:anywhere;
}
pre{background:var(--surface2);border:2px solid var(--line);padding:1rem 1.1rem;overflow-x:auto;font-family:var(--font-mono);font-size:.8rem;line-height:1.75;color:var(--ink)}
pre code{background:none;border:none;padding:0;font-size:1em}
.addr-row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin:.6rem 0}
.addr-row .lbl{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.addr-row a{color:var(--orange)}

/* ---------- body lists and prose ----------
 * how-it-works.html and faq.html are mostly prose. Keep the measure short and
 * the bullets mono-marked so they match the rest of the page. */
.prose{max-width:66ch;color:var(--soft)}
.prose p{margin:0 0 1em}
.prose b,.prose strong{color:var(--ink);font-weight:bold}
.prose a{color:var(--orange)}
.prose h3{font-family:var(--font-display);font-size:1.3rem;color:var(--ink);margin:2rem 0 .5rem;letter-spacing:.02em}
.list{max-width:66ch;margin:0 0 1.4rem;padding:0;list-style:none;color:var(--soft)}
.list li{position:relative;padding-left:1.4rem;margin:.5rem 0}
.list li::before{content:"-";position:absolute;left:0;color:var(--green);font-family:var(--font-mono)}
.list li b{color:var(--ink)}
.list.ok li::before{content:"+";color:var(--green)}
.list.no li::before{content:"x";color:var(--red)}

/* ---------- worked-example block ----------
 * how-it-works.html shows arithmetic. Mono, tabular, one line per step, with
 * the result line marked. Numbers go in the HTML only when they are real. */
.calc{
  background:var(--surface2);border:2px solid var(--line);
  font-family:var(--font-mono);font-size:.82rem;line-height:2;
  padding:1rem 1.2rem;margin:1.2rem 0;max-width:62ch;overflow-x:auto;
}
.calc div{display:flex;justify-content:space-between;gap:1.5rem;white-space:nowrap}
.calc .k{color:var(--soft)}
.calc .v{color:var(--ink);font-variant-numeric:tabular-nums}
.calc .sum{border-top:2px solid var(--line);margin-top:.4rem;padding-top:.4rem}
.calc .sum .v{color:var(--orange)}

/* ---------- three-sink flow diagram (index + how-it-works) ----------
 * Three boxes, one row, arrows between them on wide screens only: on a phone
 * they stack and the arrows would point sideways at nothing. */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2.1rem;align-items:stretch}
@media(max-width:800px){.flow{grid-template-columns:1fr}}
.flow .node{background:var(--surface);border:2px solid var(--line);padding:1.1rem 1.2rem;position:relative}
.flow .node .t{font-family:var(--font-display);font-size:1.1rem;letter-spacing:.02em;color:var(--ink)}
.flow .node .d{font-size:.86rem;color:var(--soft);margin-top:.4rem}
.flow .node .m{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin-top:.6rem}
.flow .node.burn{border-color:var(--orange)}
.flow .node.burn .t{color:var(--orange)}
.flow .node.earn{border-color:var(--green)}
.flow .node.earn .t{color:var(--green)}
@media(min-width:801px){
  .flow .node + .node::before{
    content:">";position:absolute;left:-.95rem;top:50%;transform:translateY(-50%);
    font-family:var(--font-mono);font-size:1rem;color:var(--line);
  }
}

/* ---------- rarity tier table ----------
 * Tier, share of supply, base power. Uses the same 2px-gap-over---line grid as
 * .stats so it needs no <table>. */
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line);border:2px solid var(--line);margin-top:1.6rem}
@media(max-width:700px){.tiers{grid-template-columns:repeat(2,1fr)}}
.tiers .t{background:var(--surface);padding:.9rem 1rem}
.tiers .t .n{font-family:var(--font-display);font-size:1.8rem;line-height:1;color:var(--orange);font-variant-numeric:tabular-nums}
.tiers .t .w{font-family:var(--font-mono);font-size:.7rem;color:var(--green);margin-top:.3rem}
.tiers .t .l{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin-top:.45rem}

/* ---------- owned-token grid (stake page) ----------
 * .mintgrid + .mtile already cover the tile shape. .pick above adds the
 * selected border. This adds the per-tile power line and the empty state. */
.mtile .pw{font-family:var(--font-mono);font-size:.66rem;color:var(--orange);font-variant-numeric:tabular-nums}
.mtile .pw i{font-style:normal;color:var(--soft)}
.empty{
  border:2px dashed var(--line);background:var(--surface);
  padding:1.6rem 1.2rem;text-align:center;
  font-family:var(--font-mono);font-size:.74rem;line-height:1.8;color:var(--soft);
}
.empty b{display:block;color:var(--ink);font-size:.9rem;margin-bottom:.3rem}

/* ---------- baby film strip ----------
   A ticker-speed marquee of REAL baby images, built by js/app.js into any
   <div class="babystrip" data-babystrip="N" aria-hidden="true"></div>.
   Decorative: empty without JavaScript, honest with it (every frame is a
   real id anyone can mint). Same -50% loop trick as the text strips, so the
   track holds the sequence twice. Falls under the marquee motion exception. */
.babystrip{overflow:hidden;border-top:2px solid var(--line);border-bottom:2px solid var(--line);background:var(--surface)}
.babystrip-track{display:flex;width:max-content;will-change:transform;animation:ticker 45s linear infinite}
.babystrip-track img{width:84px;height:84px;display:block;image-rendering:pixelated;border-right:2px solid var(--line);background:#16131C}
@media (hover:hover) and (pointer:fine){
  .babystrip:hover .babystrip-track{animation-play-state:paused}
}

/* ---------- reduced motion off-switch ----------
 * Every animated selector above must be listed here. If you add an animation,
 * add it to this block in the same commit.
 *
 * ONE DELIBERATE EXCEPTION (owner's call, 2026-08-26): the marquee strips
 * keep moving. Windows Server switches off OS animations by default and
 * Chromium reports that as prefers-reduced-motion: reduce for every user on
 * the machine, which froze the brand tickers for people who never asked for
 * still pages. The strips are the site's signature element, so under reduce
 * they SLOW to half speed instead of stopping. Everything else still stops. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .strip-track{animation-duration:60s}
  .babystrip-track{animation-duration:90s}
  .figframe{transition:none}
  .figframe img.pop{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  .figframe,.btn,.mini-card .inner,nav.links a,h1.mega,.panel,.pick,.ca-copy{transition:none}
  .pulse{animation:none}
  .mtile.fresh{animation:none}
  .toast{transition:none}
  /* additions */
  .sk{animation:none;background:var(--surface2)}
  .prog span{transition:none}
  .stepper button,.loading{transition:none}
}

/* ============================ WALLET MENU ============================
   Self-created by js/app.js when a CONNECTED wallet button is clicked: the
   full address (click to copy), the explorer link, and Disconnect. Fixed
   position, placed off the button's rect by the script. Same component
   language as every other panel: 2px line border, hard offset shadow, mono
   labels. */
.walletmenu{
  position:fixed;z-index:60;min-width:240px;max-width:min(320px,calc(100vw - 16px));
  background:var(--surface);border:2px solid var(--line);
  box-shadow:8px 8px 0 rgba(0,0,0,.4);
  padding:.4rem;display:flex;flex-direction:column;gap:2px;
}
.walletmenu .wm-addr{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.02em;
  color:var(--soft);background:var(--surface2);
  padding:.55rem .6rem;word-break:break-all;cursor:pointer;
}
.walletmenu .wm-addr:hover{color:var(--ink)}
.walletmenu .wm-item{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);background:none;border:0;text-align:left;display:block;
  padding:.55rem .6rem;cursor:pointer;text-decoration:none;
}
.walletmenu .wm-item:hover{background:var(--faint)}
.walletmenu .wm-off{color:var(--red)}