/* LIL TRADERS base stylesheet -- FRUTIGER AERO edition.
 *
 * Provenance: the Trader Babies sheet (itself cloned from uMinis) REDESIGNED
 * 2026-08-27 at the owner's direction for the LIL TRADERS rebrand: Frutiger
 * Aero / Web-2.0 gloss. Glassy white panels on a fixed sky gradient, glossy
 * pill buttons with a specular top highlight, rounded corners everywhere,
 * aqua blue primary + aero grass green, Segoe/Trebuchet type. SPEC 3.2 is
 * amended to this look; the old "dark degen terminal, do not redesign" rule
 * is superseded for this project only.
 *
 * STRUCTURAL CONTRACT, unchanged from the ancestor: every selector of the old
 * sheet exists here with the same layout semantics (grids, breakpoints, tap
 * targets, [hidden], reduced-motion). Pages were not touched for the reskin,
 * only this file. TOKEN NAMES ARE KEPT even where the value changed role:
 * --orange is THE PRIMARY ACCENT SLOT (now aero blue) and --orange-dim its
 * pressed/shadow partner, because page-scope styles reference the names.
 * Rename nothing.
 *
 * Motion rules inherited: ease-out for enter/exit, 120-250ms, `linear` only
 * for the marquee tickers, hover behind @media (hover:hover) and
 * (pointer:fine), one prefers-reduced-motion off-switch at the bottom that
 * must list every animated selector (marquee half-speed exception kept).
 */

/* ---------- tokens ---------- */
:root{
  --bg:#BFE2F8;                              /* sky; body paints the gradient */
  --surface:rgba(255,255,255,.68);           /* glass panel */
  --surface2:rgba(255,255,255,.88);          /* brighter glass: fields, tiles */
  --ink:#0E3A5C;                             /* deep sea-blue text */
  --soft:#48738f;                            /* soft steel-blue text */
  --line:#9DCDEA;                            /* soft aqua border */
  --faint:rgba(14,58,92,.10);
  --orange:#0F8DE8;                          /* PRIMARY SLOT: aero blue */
  --orange-dim:#0A66AC;
  --green:#3FAF1E;                           /* aero grass green */
  --red:#DE4763;
  --gloss:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.45) 46%,rgba(255,255,255,.10) 54%,rgba(255,255,255,.35));
  --shadow-soft:0 10px 26px rgba(15,90,150,.18);
  --shadow-tight:0 4px 12px rgba(15,90,150,.16);
  --inset-hi:inset 0 1px 0 rgba(255,255,255,.95);
  --font-display:'Segoe UI','Trebuchet MS',Frutiger,Verdana,sans-serif;
  --font-body:'Segoe UI',Verdana,Geneva,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;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15.5px;
  line-height:1.65;
  overflow-x:hidden;
  /* The aero sky: fixed gradient plus a few soft bubbles. Decorative only,
   * cheap (pure gradients), and fixed so panels glide over it on scroll. */
  background:
    radial-gradient(circle at 14% 22%, rgba(255,255,255,.50) 0 12px, rgba(255,255,255,0) 13px),
    radial-gradient(circle at 82% 12%, rgba(255,255,255,.42) 0 20px, rgba(255,255,255,0) 21px),
    radial-gradient(circle at 68% 78%, rgba(255,255,255,.35) 0 16px, rgba(255,255,255,0) 17px),
    radial-gradient(circle at 30% 88%, rgba(255,255,255,.30) 0 10px, rgba(255,255,255,0) 11px),
    radial-gradient(circle at 93% 55%, rgba(255,255,255,.30) 0 14px, rgba(255,255,255,0) 15px),
    linear-gradient(180deg,#7CC7F2 0%,#BFE2F8 30%,#E9F7FF 62%,#D9F2DF 100%);
  background-attachment:fixed;
  background-color:var(--bg);
}
::selection{background:var(--orange);color:#fff}
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:1px solid rgba(255,255,255,.85);border-bottom:1px solid rgba(11,84,138,.35)}
.strip-orange{background:linear-gradient(180deg,#5BC6F8 0%,#1E97E9 48%,#0F86D8 52%,#3FB0F2 100%);color:#fff}
.strip-green{background:linear-gradient(180deg,#9BE96A 0%,#55C02B 48%,#3FAF1E 52%,#6FD344 100%);color:#fff}
.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;
  text-shadow:0 1px 1px rgba(9,64,105,.35);
}
@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:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.72));
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 10px rgba(15,90,150,.10);
  position:sticky;top:0;z-index:50;
  /* CLASS COLLISION FIX kept from the ancestor: the trait-table `.bar`
   * (8px meter) also matches <header class="bar">; height:auto stops the 8px
   * leaking through. Do not delete without renaming the trait-table .bar. */
  height:auto;
}
.logo{font-family:var(--font-display);font-weight:800;font-size:1.4rem;letter-spacing:-.01em;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-body);font-weight:600;font-size:.8rem;letter-spacing:.04em;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)}
}
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:1px 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(15,90,150,.08);
  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(--surface2);border:1px solid var(--line);border-radius:999px;
  box-shadow:var(--inset-hi),var(--shadow-tight);
  display:inline-block;padding:.3rem .8rem;color:var(--green);
}
h1.mega{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(3.2rem,9.5vw,6.6rem);
  line-height:.98;margin:.22em 0 .12em;letter-spacing:-.02em;
  color:var(--orange-dim);
  text-shadow:0 1px 0 #fff,0 6px 16px rgba(15,90,150,.30);
  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:0 1px 0 #fff,0 9px 22px rgba(15,90,150,.38)}
}
.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:1px solid rgba(255,255,255,.9);border-radius:16px;
  box-shadow:var(--inset-hi),var(--shadow-soft);
  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:linear-gradient(180deg,#fff,rgba(255,255,255,.82));
  border:1px solid rgba(255,255,255,.95);border-radius:18px;
  box-shadow:var(--inset-hi),0 14px 34px rgba(15,90,150,.28);
  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;border-radius:10px}
.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(--surface2);padding:.35rem .8rem;border:1px solid var(--line);border-radius:999px}
.figcap b{color:var(--orange)}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:2.8rem 0 0}
@media(max-width:700px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{
  background:var(--surface);border:1px solid rgba(255,255,255,.9);border-radius:14px;
  box-shadow:var(--inset-hi),var(--shadow-tight);
  padding:1rem 1.1rem;
}
.stat .num{font-family:var(--font-display);font-weight:800;font-size:2.1rem;line-height:1.05;color:var(--orange);font-variant-numeric:tabular-nums}
.stat .num i{font-style:normal;color:var(--green);font-size:1.3rem}
.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-weight:800;font-size:clamp(1.8rem,4.4vw,2.7rem);margin:0 0 .6rem;letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.lede{max-width:64ch;margin:0 0 1.9rem;color:var(--soft)}
.lede b{color:var(--ink)}

/* ---------- panel ---------- */
.panel{
  background:var(--surface);border:1px solid rgba(255,255,255,.9);border-radius:16px;
  box-shadow:var(--inset-hi),var(--shadow-soft);
  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-weight:800;font-size:1.2rem;letter-spacing:-.01em}
.panel-head .s{font-family:var(--font-mono);font-size:.66rem;color:var(--soft)}

/* readout tiles inside a panel */
.readouts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:.9rem}
@media(max-width:700px){.readouts{grid-template-columns:repeat(2,1fr)}}
.ro{background:var(--surface2);border:1px solid var(--line);border-radius:10px;box-shadow:var(--inset-hi);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 */
.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);border-radius:8px;image-rendering:pixelated;display:block;background:#EAF6FE}
.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:1px solid rgba(255,255,255,.9);border-radius:14px;box-shadow:var(--inset-hi),var(--shadow-tight);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:linear-gradient(180deg,#4FBEF5,#0F86D8);color:#fff;
  border:1px solid rgba(255,255,255,.9);border-radius:50%;
  box-shadow:var(--inset-hi),var(--shadow-tight);
  width:28px;height:28px;display:grid;place-items:center;
}
.step h3{font-family:var(--font-display);font-weight:800;font-size:1.1rem;margin:.3rem 0 .45rem;letter-spacing:-.01em}
.step p{margin:0;font-size:.88rem;color:var(--soft)}

/* ---------- spec sheet (key/value table) ---------- */
.spec{background:var(--surface);border:1px solid rgba(255,255,255,.9);border-radius:14px;box-shadow:var(--inset-hi),var(--shadow-tight);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:1px solid rgba(255,255,255,.9);border-radius:14px;box-shadow:var(--inset-hi),var(--shadow-tight);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:var(--inset-hi),0 16px 32px rgba(15,90,150,.30)}
  .mini-card:hover .inner{transform:translateY(-3px)}
}
.mini-card img{width:100%;height:auto;display:block;image-rendering:pixelated;border-radius:8px}
.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: the aero gloss pill ---------- */
.btn{
  font-family:var(--font-body);font-weight:700;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;
  background:linear-gradient(180deg,#54C2F7 0%,#189BEA 48%,#0F86D8 52%,#2FA6EE 100%);
  color:#fff;border:1px solid rgba(255,255,255,.85);border-radius:999px;
  text-shadow:0 1px 1px rgba(9,64,105,.4);
  padding:.7rem 1.5rem;cursor:pointer;
  box-shadow:var(--inset-hi),0 6px 16px rgba(15,90,150,.35);
  transition:transform 120ms var(--ease-out),box-shadow 120ms var(--ease-out),filter 120ms ease;
  will-change:transform;
}
.btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{filter:brightness(1.08);box-shadow:var(--inset-hi),0 8px 20px rgba(15,90,150,.42)}
}
/* green secondary (the aero grass button) */
.btn.buy{
  font-size:.84rem;text-decoration:none;
  background:linear-gradient(180deg,#9BE96A 0%,#55C02B 48%,#3FAF1E 52%,#6FD344 100%);
  color:#fff;
}
.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:1px solid rgba(255,255,255,.9);border-radius:14px;box-shadow:var(--inset-hi),var(--shadow-tight);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:1px 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:linear-gradient(180deg,#4FBEF5,#0F86D8);border-radius:999px;position:relative}
.bar::after{content:"";position:absolute;right:0;top:0;bottom:0;width:3px;background:#fff;border-radius:999px;opacity:.85}
.ttable tfoot td{font-family:var(--font-mono);font-size:.68rem;color:var(--soft);border-top:1px solid var(--line)}

/* ---------- aqua inverted band (was the orange band) ---------- */
.token{
  background:linear-gradient(180deg,#57C5F8 0%,#1E97E9 45%,#0F86D8 55%,#2FA6EE 100%);
  color:#fff;margin-top:3.6rem;
  border-top:1px solid rgba(255,255,255,.85);border-bottom:1px solid rgba(11,84,138,.35);
}
.token .sheet{padding-top:3.6rem;padding-bottom:3.6rem}
.token .eyebrow{color:rgba(255,255,255,.9)}
.token h2.head{color:#fff;text-shadow:0 1px 2px rgba(9,64,105,.4)}
.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(255,255,255,.65);display:inline-block;min-width:10ch;font-weight:normal}
.token-rows .pending{background:rgba(255,255,255,.92);color:var(--orange-dim);padding:.05rem .45rem;border-radius:6px}

/* ---------- warning box ---------- */
.warnbox{
  background:rgba(255,241,245,.9);color:var(--ink);border:1px solid var(--red);border-radius:14px;
  box-shadow:var(--inset-hi),var(--shadow-tight);
  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:1px solid var(--line);margin-top:3.6rem;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.65))}
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:1px solid var(--line);border-radius:999px;padding:.25rem .65rem;
  background:var(--surface2);color:var(--soft);box-shadow:var(--inset-hi);
  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 ---------- */
.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:1px solid var(--line);border-radius:999px;
  box-shadow:var(--inset-hi);padding:.6rem .9rem;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:8px;flex-wrap:wrap;margin-top:10px}
.livebar .lb{background:var(--surface);border:1px solid rgba(255,255,255,.9);border-radius:12px;box-shadow:var(--inset-hi),var(--shadow-tight);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(63,175,30,.6);animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(63,175,30,.55)}70%{box-shadow:0 0 0 8px rgba(63,175,30,0)}100%{box-shadow:0 0 0 0 rgba(63,175,30,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:1px solid rgba(255,255,255,.9);border-radius:12px;box-shadow:var(--inset-hi),var(--shadow-tight);padding:8px;display:flex;flex-direction:column;gap:.5rem}
.mtile .art{position:relative;aspect-ratio:1/1;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#EAF6FE}
.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}}

/* ================= LIL TRADERS ADDITIONS =================
 * Same set of components as the ancestor sheet, aero-skinned: glass card,
 * 1px white border, rounded corners, soft shadow, mono uppercase labels.
 */

/* Preview banner. SPEC 3.3: empty contract address must render an honest
 * banner and disable the buttons, never fake a number. */
.notice{
  display:flex;gap:.7rem;align-items:baseline;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--orange);border-radius:12px;
  box-shadow:var(--inset-hi),var(--shadow-tight);
  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: gray glass, no gloss, no press. */
.btn[disabled],.btn[aria-disabled="true"]{
  background:linear-gradient(180deg,#E8F2F9,#D3E4EF);color:var(--soft);
  border-color:rgba(255,255,255,.8);text-shadow:none;
  box-shadow:var(--inset-hi);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:rgba(255,255,255,.95);border:1px solid var(--line);border-radius:12px;
  color:var(--ink);
  box-shadow:var(--inset-hi),0 12px 30px rgba(15,90,150,.30);
  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. Colour is never the only signal; the label stays. */
.tier{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;background:var(--surface2);color:var(--soft);
  box-shadow:var(--inset-hi);padding:.15rem .55rem;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:1px solid var(--line);border-radius:10px;
  box-shadow:var(--inset-hi);
  padding:.66rem .8rem;min-width:6ch;
}
.field:disabled{color:var(--soft);cursor:not-allowed}

/* Selectable lil trader 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. The only !important in the file. */
[hidden]{display:none !important}

/* Screen-reader-only text. */
.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 ---------- */
@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}
}
.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. */
.netchip{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;background:var(--surface2);color:var(--soft);
  box-shadow:var(--inset-hi);
  padding:.3rem .65rem;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 ---------- */
.btn.ghost{
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.7));
  color:var(--orange-dim);border-color:var(--line);text-shadow:none;
  box-shadow:var(--inset-hi),var(--shadow-tight);
}
@media (hover:hover) and (pointer:fine){
  .btn.ghost:hover{border-color:var(--orange);color:var(--orange);filter:none;box-shadow:var(--inset-hi),0 6px 16px rgba(15,90,150,.24)}
}
.btn.ghost[disabled],.btn.ghost[aria-disabled="true"]{
  background:linear-gradient(180deg,#EFF6FB,#E2EEF6);color:var(--soft);border-color:var(--line);box-shadow:var(--inset-hi);
}
.btn.sm{font-size:.7rem;padding:.45rem .95rem}
.btn.wide{width:100%;display:block;text-align:center}
.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{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}

/* ---------- chip variants ---------- */
.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 ---------- */
.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}
.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. */
.stepper{display:inline-flex;align-items:stretch;border:1px solid var(--line);border-radius:999px;background:var(--surface2);box-shadow:var(--inset-hi);overflow:hidden}
.stepper button{
  font-family:var(--font-mono);font-size:1rem;font-weight:bold;line-height:1;
  background:transparent;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:#fff}}
.stepper button:disabled{color:var(--line);cursor:not-allowed;background:transparent}
.stepper input{
  font-family:var(--font-mono);font-size:.95rem;text-align:center;
  background:transparent;color:var(--ink);border:none;border-left:1px solid var(--line);border-right:1px 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:rgba(255,255,255,.7)}

/* Range: round aero thumb, glass track, both engines painted explicitly. */
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:1px solid var(--line);border-radius:999px}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:20px;height:20px;margin-top:-6px;border-radius:50%;
  background:linear-gradient(180deg,#4FBEF5,#0F86D8);border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--inset-hi),var(--shadow-tight);cursor:pointer;
}
input[type=range]::-moz-range-track{height:10px;background:var(--surface2);border:1px solid var(--line);border-radius:999px}
input[type=range]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;
  background:linear-gradient(180deg,#4FBEF5,#0F86D8);border:1px solid rgba(255,255,255,.9);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:1px solid var(--line);border-radius:999px;box-shadow:var(--inset-hi);overflow:hidden;margin:.9rem 0 .4rem}
.prog span{display:block;height:100%;width:0;background:linear-gradient(180deg,#54C2F7,#0F86D8);border-radius:999px;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 ---------- */
.status{
  font-family:var(--font-mono);font-size:.72rem;line-height:1.7;color:var(--soft);
  border-left:3px solid var(--line);border-radius:2px;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. */
.note{font-family:var(--font-mono);font-size:.68rem;line-height:1.7;color:var(--soft)}

/* ---------- unavailable ---------- */
.unavailable,.unavail{
  color:var(--soft);font-family:var(--font-mono);font-size:.86em;
  font-variant-numeric:normal;letter-spacing:.04em;
}

/* ---------- skeleton / loading ---------- */
.sk{
  display:inline-block;vertical-align:middle;height:1em;min-width:3ch;border-radius:6px;
  background:linear-gradient(90deg,#DDEFFA 0%,#BFE0F3 50%,#DDEFFA 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}}
.loading{opacity:.55;pointer-events:none;transition:opacity 200ms var(--ease-out)}

/* ---------- layout helpers ---------- */
.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. */
.pagehead{border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.35))}
.pagehead .sheet{padding-top:2.4rem;padding-bottom:2rem}
.pagehead h1{font-family:var(--font-display);font-weight:800;font-size:clamp(2.1rem,6vw,3.4rem);line-height:1.05;margin:.15em 0 .35em;letter-spacing:-.02em;color:var(--orange-dim);text-shadow:0 1px 0 #fff,0 4px 12px rgba(15,90,150,.25);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);border-radius:6px;
  padding:.08em .4em;color:var(--ink);overflow-wrap:anywhere;
}
pre{background:var(--surface2);border:1px solid var(--line);border-radius:12px;box-shadow:var(--inset-hi);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 ---------- */
.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-weight:800;font-size:1.25rem;color:var(--ink);margin:2rem 0 .5rem;letter-spacing:-.01em}
.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 ---------- */
.calc{
  background:var(--surface2);border:1px solid var(--line);border-radius:12px;box-shadow:var(--inset-hi);
  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:1px solid var(--line);margin-top:.4rem;padding-top:.4rem}
.calc .sum .v{color:var(--orange)}

/* ---------- three-sink flow diagram (index + how-it-works) ---------- */
.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:1px solid rgba(255,255,255,.9);border-radius:14px;box-shadow:var(--inset-hi),var(--shadow-tight);padding:1.1rem 1.2rem;position:relative}
.flow .node .t{font-family:var(--font-display);font-weight:800;font-size:1.05rem;letter-spacing:-.01em;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(--soft);
  }
}

/* ---------- rarity tier table ---------- */
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:1.6rem}
@media(max-width:700px){.tiers{grid-template-columns:repeat(2,1fr)}}
.tiers .t{background:var(--surface);border:1px solid rgba(255,255,255,.9);border-radius:12px;box-shadow:var(--inset-hi),var(--shadow-tight);padding:.9rem 1rem}
.tiers .t .n{font-family:var(--font-display);font-weight:800;font-size:1.7rem;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) ---------- */
.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);border-radius:14px;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}

/* ---------- lil trader film strip ----------
   Ticker-speed marquee of REAL lil trader images, built by js/app.js into any
   <div class="lilstrip" data-lilstrip="N" aria-hidden="true"></div>.
   (The class name is an internal identifier inherited from the ancestor;
   renaming it means renaming it in app.js and every page in one commit.)
   Same -50% loop trick as the text strips. Marquee motion exception applies. */
.lilstrip{overflow:hidden;border-top:1px solid rgba(255,255,255,.85);border-bottom:1px solid var(--line);background:rgba(255,255,255,.55)}
.lilstrip-track{display:flex;width:max-content;will-change:transform;animation:ticker 45s linear infinite}
.lilstrip-track img{width:84px;height:84px;display:block;image-rendering:pixelated;border-right:1px solid var(--line);background:#EAF6FE}
@media (hover:hover) and (pointer:fine){
  .lilstrip:hover .lilstrip-track{animation-play-state:paused}
}

/* ---------- reduced motion off-switch ----------
 * Every animated selector above must be listed here. The marquee strips keep
 * moving at half speed (the recorded owner exception: Windows Server reports
 * reduce for everyone); everything else stops. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .strip-track{animation-duration:60s}
  .lilstrip-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}
  .sk{animation:none;background:#DDEFFA}
  .prog span{transition:none}
  .stepper button,.loading{transition:none}
}

/* ============================ WALLET MENU ============================ */
.walletmenu{
  position:fixed;z-index:60;min-width:240px;max-width:min(320px,calc(100vw - 16px));
  background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--inset-hi),0 14px 34px rgba(15,90,150,.30);
  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);border-radius:8px;
  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;border-radius:8px;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)}