/* ============================================================================================
   THE REGISTRY — SIGNAL DESK. Rebuilt from zero against concepts/intel_token.html +
   concepts/intel_home.html (art-director pick C, wf/pick.json). Dark room, hairline cards,
   stencil wayfinding, signals used as light not paint. Two faces: system sans (display) +
   ui-monospace (data). 4px spacing grid. No light theme — the desk is always dark.
   ============================================================================================ */

:root {
  /* page ramp: BLACK WITH DEPTH (owner, Oct 1: "give it back to black ... more robust, more depth"). A near-black room
     lit softly from above; cards rise off it, charts and inputs sink into it (DEPTH block at the end of this file).
     The brand blue is an accent only, never a surface. */
  --bg0: #050608;          /* room */
  --bg1: #0B0D11;          /* desk */
  --bg2: #0F1217;          /* panel */
  --bg3: #151920;          /* raised / inset */
  --line: #1B1F27;
  --line2: #272D37;
  --hair: rgba(255,255,255,.075);     /* chrome hairlines: header, strips, band edges */
  --glass: rgba(5,6,8,.74);           /* sticky chrome: the room's black, frosted */
  /* ink ramp (cool greys; every text ink >= 4.5:1 on every surface, tests/test_lines_ui.py) */
  --ink: #ECEFF4;
  --ink2: #AEB5C1;
  --ink3: #949BA8;         /* >= 4.6:1 on every surface incl. the band 2/3 raised panels — readable small text */
  --ink4: #4E5560;         /* decoration only, never body copy */
  /* the three page bands: the stage (the room itself, under a soft spotlight), then two steps up out of the dark */
  --b1-bg: #050608; --b2-bg: #08090C; --b3-bg: #0B0D10;
  --ocean: #5BB8F2; --ocean-dim: #1D4E73;
  --slate: #A9B8CC; --slate-dim: #3A4A62;
  /* page grain: an SVG fractal-noise tile (blue-white, ~4% alpha) laid over the navy for depth */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .62 0 0 0 0 .72 0 0 0 0 1 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  /* signals = light */
  --mint: #38F2A4;  --mint-dim: #1A6B4D;  --mint-glow: rgba(56,242,164,.14);
  --red:  #FF4D5E;  --red-dim: #4A1F26;   --red-glow: rgba(255,77,94,.12);
  --amber:#FFB44D;  --amber-dim:#6B4A1F;  --amber-glow: rgba(255,180,77,.12);
  --cyan: #5FD3E8;  --cyan-dim: #1B4F5C;
  /* brand accent = BLUE (links, active states, markers, glows); green / red / orange are semantic only:
     green = up / profit / chance up >= 55%, red = down / loss / risk, orange = sideways / coin flip / warning */
  --blue: #4F8CFF;  --blue-dim: #2A4A80;  --blue-glow: rgba(79,140,255,.16);
  --indigo: #9C9CFF; --indigo-dim: #34346B; --gold: #FFD75E; --gold-dim: #6B571F; --pink: #F48FC6; --pink-dim: #5E2B48;
  --steel: #8FA6BF; --steel-dim: #34414F; --silver: #C4CDD4; --silver-dim: #4A535A;
  /* legacy aliases: web/viz.py + web/markup.py devices speak these names */
  --paper: var(--bg0); --paper-2: var(--bg1); --panel: var(--bg2);
  --ink-2: var(--ink2); --ink-3: var(--ink3);
  --rule: var(--line); --rule-2: var(--line2);
  --good: var(--mint); --bad: var(--red); --warn: var(--amber);
  --good-bg: rgba(56,242,164,.08); --bad-bg: rgba(255,77,94,.08);
  --unknown: #697B84; --accent: var(--blue); --accent-bg: rgba(79,140,255,.08);
  --btc: #697B84; --highlight: rgba(79,140,255,.07);
  /* chains / venues */
  --ch-solana:#14F195; --ch-ethereum:#627EEA; --ch-bnb:#F0B90B; --ch-base:#3B82F6;
  --ch-arbitrum:#28A0F0; --ch-hyperliquid:#4FFFB0; --ch-bitcoin:#F7931A; --ch-other:#697B84;
  --vx-binance:#F0B90B; --vx-bybit:#F7A600; --vx-okx:#8E9BAA; --vx-coinbase:#3B82F6;
  --vx-kraken:#8A5CF6; --vx-upbit:#2E6BE6; --vx-gate:#2354E6; --vx-kucoin:#24AE8F;
  --vx-htx:#008CD6; --vx-bitget:#00CED1; --vx-mexc:#1972E2; --vx-hyperliquid:#4FFFB0;
  /* faces */
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: ui-sans-serif, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: var(--mono); --font-sans: var(--sans); --font-display: var(--sans);
  /* 4px grid */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px;
  --gutter: 16px; --max: 1200px;
  color-scheme: dark;
}
@media (min-width: 720px) { :root { --gutter: 24px; } }

/* ---------------------------------------------------------------- base ---- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: clip; }
/* the room: near-black under a soft cool light from above, a faint side light, film grain and a fixed vignette */
body { margin: 0; background-color: var(--bg0); color: var(--ink); font-family: var(--sans);
  font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums lining-nums;
  background-image:
    radial-gradient(150% 120% at 50% 20%, transparent 55%, rgba(0,0,0,.45) 100%),
    var(--noise),
    radial-gradient(1300px 620px at 50% -260px, rgba(130,160,255,.10), transparent 70%),
    radial-gradient(900px 700px at 105% 8%, rgba(79,140,255,.035), transparent 70%);
  background-attachment: fixed, scroll, scroll, scroll; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--blue); text-decoration-color: var(--blue-dim); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--sans); margin: 0; letter-spacing: -.02em; font-weight: 800; }
h1 { font-size: 44px; line-height: 1.02; }
h1 .sym { color: var(--ink3); font-weight: 500; letter-spacing: 0; }
h2 { font-size: 22px; line-height: 1.2; margin: var(--s2) 0 var(--s1); }
h3 { font-size: 16px; line-height: 1.3; margin: var(--s4) 0 var(--s2); }
p { margin: 0 0 var(--s3); }
.mono, code, time, .kind { font-family: var(--mono); font-size: 12.5px; }
.dim { color: var(--ink3); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.t-good { color: var(--mint); } .t-bad { color: var(--red); } .t-warn { color: var(--amber); }
.t-neutral { color: var(--ink2); } .t-flat { color: var(--amber); } .t-unknown { color: var(--ink3); } .t-accent { color: var(--blue); }
s { text-decoration-color: var(--red); }
button { font: inherit; }
::selection { background: rgba(79,140,255,.25); }

/* ---------------------------------------------------------------- topbar ---- */
/* the header: black frosted glass over whatever scrolls beneath, a hairline and a soft shadow cast onto the page */
.mast { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: var(--s5);
  height: 58px; padding: 0 var(--gutter); border-bottom: 1px solid rgba(255,255,255,.08); background: var(--glass);
  box-shadow: 0 1px 0 rgba(0,0,0,.6), 0 14px 30px -20px rgba(0,0,0,.95);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); }
.wordmark { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; text-decoration: none; color: var(--ink); }
.wordmark:hover { color: var(--ink); }
.wordmark .reg { font-weight: 800; letter-spacing: .06em; font-size: 15px; }
.wordmark .reg i { font-style: normal; color: var(--blue); }
.wordmark .reg i.sym { display: inline-block; margin-left: .06em; font-size: 1.32em; font-weight: 900; line-height: 0; transform: translateY(.03em); }   /* a one-symbol lit part (PATTERN+): a mark, not punctuation */
.wordmark .desk { font-family: var(--mono); font-size: 9px; letter-spacing: .3em; color: var(--ink3); border: 1px solid rgba(255,255,255,.12); padding: 3px 7px; border-radius: 4px; }
.topnav { display: flex; gap: var(--s5); white-space: nowrap; }
.topnav a { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink2);
  position: relative; padding: 4px 0; text-decoration: none; }
.topnav a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--blue); transition: width .25s ease; }
.topnav a:hover { color: var(--ink); }
.topnav a:hover::after { width: 100%; }
.topnav a.on { color: var(--blue); }
.topnav a.on::after { width: 100%; }
.rec { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--ink2); white-space: nowrap; }
.rec i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); animation: blink 1.6s steps(2,start) infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* topbar search */
.search { position: relative; margin-left: auto; max-width: 300px; width: 100%; }
.search input { width: 100%; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--ink);
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.09); border-radius: 8px; padding: 8px 12px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.03); }
.search input::placeholder { color: var(--ink3); }
.search input:focus { border-color: var(--blue-dim); outline: none; box-shadow: 0 0 0 1px var(--blue-dim), 0 0 24px rgba(79,140,255,.08); }
.search-results { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0; background: var(--bg2);
  border: 1px solid var(--line2); border-radius: 3px; overflow: hidden; box-shadow: 0 16px 44px rgba(0,0,0,.6); }
.search-results a { display: flex; gap: 10px; align-items: baseline; padding: 9px 12px; font-size: 13px; text-decoration: none;
  border-bottom: 1px solid var(--line); color: var(--ink); }
.search-results a:last-child { border-bottom: 0; }
.search-results a:hover, .search-results a.sel { background: rgba(79,140,255,.05); }
.search-results .k { font-family: var(--mono); font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink3);
  border: 1px solid var(--line2); border-radius: 2px; padding: 2px 5px; flex: none; }
.search-results .x { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--ink3); white-space: nowrap; }

/* search page: results as hairline-card rows (glyph box · name · KIND tag · meta) */
.slist { margin-top: var(--s4); display: grid; gap: 8px; }
.srow { display: flex; align-items: center; gap: 12px; padding: 10px 14px; text-decoration: none; color: var(--ink);
  background: var(--bg2); border: 1px solid var(--line); border-radius: 2px; min-width: 0; }
.srow:hover { border-color: var(--blue-dim); background: var(--bg3); }
.sgl { flex: none; width: 40px; height: 40px; display: grid; place-items: center; font-size: 10px; font-weight: 700;
  letter-spacing: .06em; color: var(--blue); border: 1px solid var(--line2); border-radius: 2px; background: var(--bg1);
  overflow: hidden; }
.srow .sn { font-weight: 600; font-size: 14px; letter-spacing: -.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srow .sk { flex: none; font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink3);
  border: 1px solid var(--line2); border-radius: 2px; padding: 2px 6px; }
.srow .sx { margin-left: auto; flex: none; font-size: 10px; color: var(--ink3); max-width: 38%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick.quick-left { justify-content: flex-start; }
.nwr { white-space: nowrap; }

/* ---------------------------------------------------------------- crumb strip ---- */
.subbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 36px;
  padding: 0 var(--gutter); border-bottom: 1px solid var(--hair); background: rgba(255,255,255,.012); }
.crumbs { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumbs a { color: var(--ink3); text-decoration: none; }
.crumbs a:hover { color: var(--blue); }
.crumbs .sep { color: var(--ink4); margin: 0 2px; }
.crumbs .here { color: var(--blue); }
.mast-updated { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink3); white-space: nowrap; }
.mast-updated time { font-size: 10px; color: var(--ink2); }
.sdot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink3); display: inline-block; flex: none; }
.sdot.live { background: var(--blue); animation: blink 1.8s steps(2,start) infinite; }

/* ---------------------------------------------------------------- ticker tape ---- */
.ticker { border-bottom: 1px solid var(--hair); background: rgba(255,255,255,.012); overflow: hidden; }
.ticker-in { display: flex; width: max-content; animation: tape 50s linear infinite; }
.ticker:hover .ticker-in { animation-play-state: paused; }
@keyframes tape { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker a { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--ink2); padding: 8px 18px;
  border-right: 1px solid var(--line); white-space: nowrap; text-decoration: none; }
.ticker a b { font-weight: 600; color: var(--ink); }

/* changes tape (LIVE FILE) */
.tape { border: 1px solid var(--line2); border-radius: 3px; background: var(--bg1); overflow: hidden; margin: var(--s4) 0 var(--s6); }
.tape-t { display: flex; width: max-content; animation: tape 90s linear infinite; }
.tape:hover .tape-t { animation-play-state: paused; }
.tape-g { display: flex; align-items: center; }
.tape-l { font-family: var(--mono); font-size: 9px; letter-spacing: .26em; color: var(--blue); padding: 8px 14px; border-right: 1px solid var(--line); white-space: nowrap; }
.tape-i { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--ink2); padding: 8px 16px; border-right: 1px solid var(--line); white-space: nowrap; }
.tape-i a { color: var(--ink); text-decoration: none; }
.tape-i a:hover { color: var(--blue); }
.tape-i .v { color: var(--ink2); }

/* ---------------------------------------------------------------- page frame ---- */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
main.wrap { padding-top: var(--s5); padding-bottom: var(--s7); }
.layout { display: grid; grid-template-columns: 200px minmax(0,1fr); gap: var(--s6); align-items: start; }
.content { min-width: 0; }
@media (max-width: 960px) { .layout { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- stencil labels ---- */
.eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink3);
  font-weight: 600; margin: 0 0 var(--s2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* round 12: the "///" prefix is retired site-wide (the lanes dropped it page by page; one rule keeps it consistent) */
.eyebrow::before { content: none; color: var(--blue); letter-spacing: .1em; }
.eyebrow .para { color: var(--ink4); letter-spacing: .14em; }
.eyebrow .ic { width: 11px; height: 11px; color: var(--ink3); vertical-align: -1px; }
.secstat { margin-left: auto; }

/* dossier stamps */
.stp { font-family: var(--mono); font-size: 8px; letter-spacing: .22em; font-weight: 700; padding: 2px 7px;
  border: 1px solid var(--line2); border-radius: 2px; color: var(--ink3); background: var(--bg1); }
.stp-g { color: var(--blue); border-color: var(--blue-dim); background: rgba(79,140,255,.05); }
.stp-b { color: var(--red); border-color: var(--red-dim); background: rgba(255,77,94,.05); }
.stp-n { color: var(--ink3); border-style: dashed; }

/* zone separator + full-file divider */
.zsep { display: flex; align-items: center; gap: var(--s4); margin: var(--s7) 0; font-family: var(--mono); font-size: 9px;
  letter-spacing: .3em; color: var(--ink4); text-transform: uppercase; white-space: nowrap; }
.zsep::before, .zsep::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line2), transparent); min-width: 20px; }
.ffdiv { margin: var(--s7) calc(-1 * var(--gutter)) var(--s6); padding: var(--s5) var(--gutter); border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); background: var(--bg1); display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap; }
.ff-t { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--ink); }
.ff-t::before { content: none; color: var(--blue); }
.ff-s { font-size: 10px; letter-spacing: .12em; color: var(--ink3); text-transform: uppercase; }

/* ---------------------------------------------------------------- blocks (the file) ---- */
.blk { margin: 0 0 var(--s7); padding-top: var(--s4); border-top: 1px dashed var(--line2); }
.blk > .eyebrow { margin-bottom: var(--s3); }
.blk > .eyebrow > span:nth-child(2) { color: var(--ink2); letter-spacing: .24em; }
.blk h2 { font-size: 19px; color: var(--ink); }
.asof { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--ink3); margin: 2px 0 var(--s3); }
.asof .ic { width: 11px; height: 11px; vertical-align: -2px; }
.callout { font-size: 15px; line-height: 1.65; color: var(--ink); border-left: 2px solid var(--blue-dim);
  padding: var(--s2) var(--s4); background: rgba(79,140,255,.03); margin: var(--s3) 0 var(--s4); max-width: 76ch; }
.prose, .desc { color: var(--ink2); max-width: 76ch; }
.src { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--ink3); margin: var(--s2) 0 0; }
.empty { font-family: var(--mono); font-size: 12px; color: var(--ink3); border: 1px dashed var(--line2); border-radius: 3px; padding: var(--s3) var(--s4); }
.device { margin: var(--s3) 0 var(--s4); }

/* deep zone: everything after the FULL FILE divider reads quiet sans */
.blk .il, .blk .prose { font-family: var(--sans); }
.il { list-style: none; margin: 0 0 var(--s3); padding: 0; max-width: 76ch; }
.ir { color: var(--ink2); font-size: 14px; line-height: 1.75; margin: 0 0 var(--s2); }
.ir b, .ir strong { color: var(--ink); font-weight: 600; }

/* fact markup (web/markup.py) */
.fx { }
.fq { font-family: var(--mono); font-size: .92em; color: var(--ink); }
.fn { font-family: var(--mono); font-size: .92em; color: var(--ink); white-space: nowrap; }
.fm { font-family: var(--mono); font-size: .92em; color: var(--ink); }
.fd { font-family: var(--mono); font-size: .92em; color: var(--ink2); }
.fa { font-family: var(--mono); font-size: .9em; color: var(--ink2); word-break: break-all; }
.fv { white-space: nowrap; }
.fs { color: var(--ink); font-weight: 600; }
.sw { font-family: var(--mono); font-size: .9em; padding: 0 4px; border-radius: 2px; border: 1px solid var(--line2); }
.sw.g, .sw.good { color: var(--mint); border-color: var(--mint-dim); }
.sw.b, .sw.bad { color: var(--red); border-color: var(--red-dim); }
.sw.n { color: var(--ink2); }
.mm, .mf { display: inline-block; width: 44px; height: 4px; border-radius: 2px; background: var(--bg3); position: relative; margin-left: 6px; vertical-align: 2px; overflow: hidden; }
.mm::after, .mf::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: var(--blue); opacity: .85; }
.nw { white-space: nowrap; }

/* ---------------------------------------------------------------- chips / badges / tags ---- */
.chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink2); border: 1px solid var(--line2); border-radius: 2px; padding: 3px 8px; background: var(--bg1); white-space: nowrap; }
.chip .ic { width: 10px; height: 10px; }
.chip-good { color: var(--mint); border-color: var(--mint-dim); background: rgba(56,242,164,.05); }
.chip-bad { color: var(--red); border-color: var(--red-dim); background: rgba(255,77,94,.05); }
.chip-gold { color: var(--k-cat); border-color: var(--k-cat-dim); background: rgba(95,211,232,.05); }
.chip-accent { color: var(--blue); border-color: var(--blue-dim); background: rgba(79,140,255,.06); }
.chip-unknown { color: var(--ink3); border-style: dashed; }
.chip-na { color: var(--ink4); border-style: dashed; }
.chip-new { color: var(--blue); border-color: var(--blue-dim); font-size: 8px; letter-spacing: .22em; }
.chip-delta { letter-spacing: .02em; text-transform: none; font-size: 11px; }
.rankb { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--ink2); border: 1px solid var(--line2); border-radius: 2px; padding: 3px 7px; background: var(--bg1); }
.cdot, .vdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: var(--ch-other); vertical-align: 0; flex: none; }
.cdot-solana{background:var(--ch-solana);} .cdot-ethereum{background:var(--ch-ethereum);}
.cdot-bnb,.cdot-binance-smart-chain,.cdot-bsc{background:var(--ch-bnb);} .cdot-base{background:var(--ch-base);}
.cdot-arbitrum{background:var(--ch-arbitrum);} .cdot-hyperliquid{background:var(--ch-hyperliquid);} .cdot-bitcoin{background:var(--ch-bitcoin);}
.vdot-binance{background:var(--vx-binance);} .vdot-bybit{background:var(--vx-bybit);}
.vdot-okx{background:var(--vx-okx);} .vdot-coinbase{background:var(--vx-coinbase);}
.vdot-kraken{background:var(--vx-kraken);} .vdot-upbit{background:var(--vx-upbit);}
.vdot-gate,.vdot-gate-io{background:var(--vx-gate);} .vdot-kucoin{background:var(--vx-kucoin);}
.vdot-htx,.vdot-huobi{background:var(--vx-htx);} .vdot-bitget{background:var(--vx-bitget);}
.vdot-mexc{background:var(--vx-mexc);} .vdot-hyperliquid{background:var(--vx-hyperliquid);}
.ic { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; vertical-align: -1px; display: inline-block; }
.ic-dim { color: var(--ink3); } .ic-good { color: var(--mint); } .ic-bad { color: var(--red); } .ic-acc { color: var(--blue); }
.kind { display: inline-flex; align-items: center; gap: 5px; font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 2px; border: 1px solid var(--line2); color: var(--ink2); white-space: nowrap; }
.kind .ic { width: 10px; height: 10px; }
tr.ev-listing .kind, tr.ev-futures_listing .kind { color: var(--k-list); border-color: var(--k-list-dim); }
tr.ev-unlock .kind, tr.ev-airdrop .kind { color: var(--k-cat); border-color: var(--k-cat-dim); }
tr.ev-hack .kind, tr.ev-delisting .kind, tr.ev-futures_delisting .kind { color: var(--red); border-color: var(--red-dim); }
tr.ev-ath .kind { color: #7FB7FF; border-color: #1F3B5C; }

/* ---------------------------------------------------------------- record hero ---- */
.hero { position: relative; margin: 0 0 var(--s5); }
.rhead { padding: var(--s4) 0 0; }
.hero .wm { position: absolute; right: 0; top: -12px; font-family: var(--mono); font-weight: 700; font-size: 120px;
  letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px var(--line2); pointer-events: none; user-select: none; z-index: -1; }
.disamb { font-size: 12.5px; color: var(--ink3); border: 1px dashed var(--line2); border-radius: 3px; padding: var(--s2) var(--s3); }
.rh-id { display: flex; gap: var(--s4); align-items: center; margin-bottom: var(--s4); }
.av { border-radius: 3px; flex: none; }
.av-hero { box-shadow: 0 0 24px var(--blue-glow); border: 1px solid var(--blue-dim); }
.rh-name .eyebrow { margin-bottom: 4px; }
.hero-chips { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
.dek { color: var(--ink2); font-size: 15px; line-height: 1.7; max-width: 72ch; margin: var(--s4) 0; }
.dek b { color: var(--ink); }
.hero-meta { margin: var(--s3) 0; display: grid; gap: 4px; }
.hero-meta p { margin: 0; font-size: 11.5px; color: var(--ink3); }
.tags { letter-spacing: .06em; text-transform: uppercase; font-size: 10px; }
.addr a { color: var(--ink2); }
.copy { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3);
  background: var(--bg1); border: 1px solid var(--line2); border-radius: 2px; padding: 2px 7px; cursor: pointer; }
.copy:hover { color: var(--blue); border-color: var(--blue-dim); }
.copy.ok { color: var(--blue); border-color: var(--blue-dim); }

/* token identity: glyph, price row, scope + side stats */
.lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink3); font-weight: 600; }
.glyph { width: 54px; height: 54px; flex: none; border-radius: 4px; background: var(--bg2);
  border: 1px solid var(--line2); display: grid; place-items: center; color: var(--blue); font-family: var(--mono);
  font-weight: 700; font-size: 14px; letter-spacing: .04em; }
.pricerow { display: flex; align-items: baseline; gap: var(--s5); margin: var(--s4) 0; flex-wrap: wrap; }
.px { font-size: 56px; font-weight: 700; letter-spacing: -.03em; line-height: 1; text-shadow: 0 0 30px rgba(220,232,236,.14); }
.deltas { display: flex; gap: var(--s4); flex-wrap: wrap; }
.delta { font-size: 13px; }
.delta em { font-style: normal; display: block; font-size: 9px; letter-spacing: .2em; color: var(--ink3); margin-bottom: 3px; }
.hero-grid { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: var(--s5); align-items: start; margin: 0 0 var(--s4); }
.hg-chart { min-width: 0; }
.scope-thin svg { display: block; width: 100%; height: 140px; }
.sm-warn { color: var(--ink3) !important; }
.sstats { border: 1px solid var(--line2); border-radius: 4px; background: var(--bg2); overflow: hidden; }
.sstats .row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); padding: 10px 16px; border-bottom: 1px solid var(--line); }
.sstats .num { font-size: 13.5px; color: var(--ink); }
.sstats .supply { padding: 12px 16px 16px; background: var(--bg1); }
.sstats .srow { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); }
.sstats .srow .num { font-size: 11.5px; }
.bar { height: 5px; border-radius: 3px; background: var(--bg3); overflow: hidden; margin-top: 8px; position: relative; }
.bar i { position: absolute; inset: 0 auto 0 0; background: var(--k-cat); box-shadow: 0 0 8px var(--k-cat-glow); border-radius: 3px; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s4); }
  .px { font-size: 40px; }
  .glyph { width: 42px; height: 42px; font-size: 11px; }
}

/* stat strip: terminal 6-stat cards */
.stripwrap { display: flex; gap: var(--s3); align-items: stretch; margin: var(--s4) 0; flex-wrap: wrap; }
.statstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: var(--s3); flex: 1; min-width: 0; }
.st { border: 1px solid var(--line2); border-radius: 3px; background: var(--bg2); padding: 10px 12px; min-width: 0; }
.st-l { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink3); margin: 0 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-v { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0; white-space: nowrap; }
.st-s { font-size: 10px; color: var(--ink3); margin: 4px 0 0; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-chart { display: flex; flex-direction: column; justify-content: space-between; min-width: 150px; }
.st-chart svg { width: 100%; }

/* ---------------------------------------------------------------- verdict zone ---- */
.vrow { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s4); margin: var(--s4) 0 var(--s5); }
.vrow.one { grid-template-columns: minmax(0,1fr); }
.vcard { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--s3);
  border: 1px solid var(--line2); border-radius: 4px; background: var(--bg2); padding: var(--s4) var(--s4) var(--s3);
  text-decoration: none; color: var(--ink); }
.vcard::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--ink3); }
.vcard:hover { border-color: var(--line2); color: var(--ink); background: var(--bg3); }
.vc-good::before { background: var(--mint); box-shadow: 0 0 18px var(--mint); }
.vc-warn::before { background: var(--amber); box-shadow: 0 0 18px var(--amber); }
.vc-bad::before { background: var(--red); box-shadow: 0 0 18px var(--red); }
.vc-gold::before { background: var(--gold); }
.vc-unknown::before { background: var(--ink4); }
.vc-t { font-family: var(--mono); font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink3); margin: 0; font-weight: 700; }
.vc-t::before { content: none; color: var(--ink4); }
.vc-s { font-family: var(--sans); font-size: 27px; font-weight: 800; letter-spacing: -.01em; line-height: 1.05; margin: 0; }
.vc-good .vc-s { color: var(--mint); text-shadow: 0 0 16px var(--mint-glow); }
.vc-warn .vc-s { color: var(--amber); text-shadow: 0 0 16px var(--amber-glow); }
.vc-bad .vc-s { color: var(--red); text-shadow: 0 0 16px var(--red-glow); }
.vc-unknown .vc-s { color: var(--ink2); }
.vc-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.vc-l li { font-family: var(--mono); font-size: 11px; letter-spacing: .03em; color: var(--ink2); padding-left: 14px; position: relative; }
.vc-l li::before { content: "·"; position: absolute; left: 2px; color: var(--ink4); }
.vc-l li.good { color: var(--mint); } .vc-l li.bad { color: var(--red); } .vc-l li.warn { color: var(--amber); }
.vc-dial { display: flex; align-items: center; gap: var(--s4); }
.vc-dial svg { flex: none; }
.vc-dial .vc-s { min-width: 0; }
.vc-sx { display: block; font-size: 11px; font-weight: 400; letter-spacing: .1em; color: var(--ink3); text-transform: uppercase; margin-top: 4px; }
.vd-n { font-family: var(--mono); font-size: 14px; font-weight: 700; fill: var(--ink); }
.vd-s { font-family: var(--mono); font-size: 6.5px; letter-spacing: .22em; fill: var(--ink3); }
.radar { position: relative; width: 76px; height: 76px; flex: none; }
.radar svg { position: absolute; inset: 0; }
.radar-beam { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(95,211,232,.4), rgba(95,211,232,.05) 70deg, transparent 90deg);
  animation: spin 4.5s linear infinite;
  -webkit-mask: radial-gradient(circle, black 0 35px, transparent 36px); mask: radial-gradient(circle, black 0 35px, transparent 36px); }
@keyframes spin { to { transform: rotate(360deg); } }
.radar .tmin { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: 14px;
  color: var(--k-cat); text-shadow: 0 0 14px rgba(95,211,232,.5); letter-spacing: .02em; }
.rchip { display: inline-flex; flex-direction: column; gap: 1px; border: 1px solid var(--line2); border-radius: 2px;
  background: var(--bg1); padding: 4px 9px; font-size: 12px; font-weight: 600; color: var(--ink); }
.rchip em { font-style: normal; font-size: 7.5px; letter-spacing: .2em; color: var(--ink4); }
.vc-receipts { gap: 8px; flex-wrap: wrap; }
.vc-dots { margin: 0; display: flex; align-items: center; gap: 10px; }
.vc-dc { font-size: 9.5px; letter-spacing: .1em; color: var(--ink3); text-transform: uppercase; }
.vc-f { margin: auto 0 0; padding-top: var(--s3); border-top: 1px dashed var(--line2); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }

/* exit-risk check rows: each checked power as a REVOKED / ACTIVE tag line (mockup .check) */
.vc-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.vc-checks li { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .03em; color: var(--ink2); }
.ck-l { min-width: 0; }
.ckst { flex: none; width: 64px; text-align: center; font-size: 8px; letter-spacing: .18em; padding: 3px 0; border-radius: 2px; font-weight: 700; }
.ckst.off { color: var(--mint); background: rgba(56,242,164,.08); border: 1px solid var(--mint-dim); }
.ckst.on { color: var(--amber); background: rgba(255,180,77,.08); border: 1px solid var(--amber-dim); }
/* plain-English fine print under the power tags — fills the card so the trio balances */
.vc-sum { margin: 0; font-family: var(--sans); font-size: 13px; line-height: 1.55; color: var(--ink2); }

/* catalyst mini-scoreboard (glossy steal): what the last identical events actually did */
.countrow { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.countbox { border: 1px solid var(--line2); border-radius: 2px; background: var(--bg1); padding: 8px 6px; text-align: center; min-width: 0; }
.countbox b { display: block; font-family: var(--mono); font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.countbox span { display: block; font-family: var(--mono); font-size: 7.5px; letter-spacing: .12em; color: var(--ink3); text-transform: uppercase; margin-top: 3px; }

/* key-fact chips: plain, always readable (the old redaction overlay is gone for good) */
.introw { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s3); margin: 0 0 var(--s4); }
.int-l { grid-column: 1 / -1; font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink3); font-weight: 700; margin-bottom: -4px; }
.int-l::before { content: none; color: var(--blue); }
.intc { position: relative; display: block; font-size: 12.5px; line-height: 1.5; color: var(--ink2); border: 1px solid var(--line2);
  border-radius: 3px; background: var(--bg2); padding: 10px 12px; text-decoration: none; transition: border-color .2s; }
.intc:hover { border-color: var(--blue-dim); color: var(--ink); }
.intc.bad { box-shadow: inset 2px 0 0 var(--red); }
.intc.good { box-shadow: inset 2px 0 0 var(--mint); }

/* /// KEY FACTS grid: two rows of labeled chips (mockup .chips parity) — stencil label top-left,
   corner tag top-right, mono value line; every chip shows its fact in plain sight */
.igrid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s3); margin: 0 0 var(--s5); }
.igrid .int-l { grid-column: 1 / -1; margin-bottom: -4px; }
.igc { position: relative; display: block; border: 1px solid var(--line2); border-radius: 3px; background: var(--bg2);
  padding: 12px 14px; text-decoration: none; color: var(--ink); transition: border-color .2s; min-width: 0; }
.igc:hover { border-color: var(--blue-dim); color: var(--ink); }
.igc-k { display: flex; justify-content: space-between; gap: 8px; font-size: 9px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink3); margin-bottom: 7px; }
.igc-k span:last-child { color: var(--ink4); letter-spacing: .16em; flex: none; }
.igc-v { display: flex; align-items: baseline; gap: 8px; font-size: 15px; font-weight: 600; min-height: 22px; flex-wrap: wrap; }
.igc-v small { font-size: 10px; color: var(--ink2); font-weight: 400; letter-spacing: .02em; }
.igc-v.igc-sm { font-size: 13px; }

/* /// EVENT RECORD: the top-level ledger (mockup .rtable parity) */
.evrec { margin: 0 0 var(--s5); }
.rtable { border: 1px solid var(--line2); border-radius: 4px; overflow: hidden; background: var(--bg2); }
.rtable table { width: 100%; border-collapse: collapse; }
.rtable th { padding: 10px 16px; }
.rtable th.r, .rtable td.r { text-align: right; }
.rtable td { padding: 11px 16px; font-size: 13px; vertical-align: middle; }
.rtable td.d { font-size: 11px; color: var(--ink2); white-space: nowrap; }
.rtable td.r { font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }
.rtable .ttl { color: var(--ink); }
.rtable .ttl a { color: var(--ink); }
.rtable .ttl small { display: block; color: var(--ink3); font-size: 11px; margin-top: 1px; }
.rtable .cq-svg { width: 44px; height: 8px; }

/* receipts card: 3 dated headline outcomes with receipt chip pairs (mockup .receipt parity) */
.rlist { display: grid; }
.receipt { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.receipt:last-of-type { border-bottom: 0; }
.receipt .ev { font-size: 12px; color: var(--ink); flex: 1; min-width: 0; font-family: var(--sans); }
.receipt .ev em { display: block; font-style: normal; font-size: 8.5px; letter-spacing: .16em; color: var(--ink3); margin-bottom: 2px; text-transform: uppercase; }
.receipt .r { font-size: 12px; white-space: nowrap; text-align: right; flex: none; }
.receipt .r em { display: block; font-style: normal; font-size: 8px; letter-spacing: .16em; color: var(--ink3); margin-bottom: 2px; }

/* diverging win/loss scorebar (glossy steal) */
.scorebar { display: flex; height: 7px; border-radius: 2px; overflow: hidden; background: var(--bg3); gap: 2px; margin: 2px 0 0; }
.scorebar i { display: block; height: 100%; min-width: 0; }
.scorebar .sb-w { background: var(--mint); opacity: .85; }
.scorebar .sb-l { background: var(--red); opacity: .85; }

/* diverging day-30 bars (viz.diverging_bars) */
.divbar { display: block; }
.db-v { font-family: var(--mono); font-size: 11px; letter-spacing: .01em; }
.db-good { fill: var(--mint); } .db-bad { fill: var(--red); } .db-unknown { fill: var(--ink3); }

/* allocation legend row (viz.allocation_bar) */
.alloc-leg { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 0; font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink2); }
.alloc-leg .al-i { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.alloc-leg .al-i i { width: 10px; height: 10px; border-radius: 2px; border: 1px solid var(--line2); flex: none; }
.alloc-leg .al-i b { color: var(--ink); font-weight: 600; }

/* how-to card */
.howto { border: 1px dashed var(--line2); border-radius: 3px; background: var(--bg1); padding: var(--s3) var(--s4); margin: 0 0 var(--s4); }
.howto-t { font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: var(--blue); margin: 0 0 var(--s2); font-weight: 700; }
.howto-t::before { content: none; color: var(--ink4); }
.howto ul { margin: 0 0 var(--s2); padding-left: 18px; color: var(--ink2); font-size: 12.5px; }
.howto li { margin-bottom: 4px; }
.howto-x { font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink3);
  background: none; border: 1px solid var(--line2); border-radius: 2px; padding: 4px 10px; cursor: pointer; }
.howto-x:hover { color: var(--blue); border-color: var(--blue-dim); }

/* tooltips */
.tip { border-bottom: 1px dashed var(--ink4); cursor: help; position: relative; }
.tip::after { content: attr(data-tip); position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(100% + 7px);
  width: max-content; max-width: 240px; background: var(--bg3); color: var(--ink); border: 1px solid var(--line2); border-radius: 3px;
  padding: 7px 10px; font-family: var(--sans); font-size: 11.5px; line-height: 1.45; letter-spacing: 0; text-transform: none;
  opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 70; box-shadow: 0 10px 30px rgba(0,0,0,.5); white-space: normal; }
.tip:hover::after, .tip:focus::after { opacity: 1; }
.tip-dots { border-bottom: 0; }

/* timeline (paper trail) */
.tl-t { margin-top: var(--s4); }
.tl { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(148px, 1fr); gap: var(--s3); overflow-x: auto; padding-bottom: var(--s2);
  scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
.tlc { border: 1px solid var(--line2); border-radius: 3px; background: var(--bg2); padding: 10px 12px; text-decoration: none;
  display: flex; flex-direction: column; gap: 4px; min-width: 0; transition: border-color .2s; color: var(--ink); }
.tlc:hover { border-color: var(--blue-dim); color: var(--ink); }
.tlc-k { font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink2); margin: 0; display: flex; gap: 5px; align-items: center; }
.tlc-k .ic { width: 10px; height: 10px; }
.ev-listing .tlc-k, .ev-futures_listing .tlc-k { color: var(--k-list); }
.ev-unlock .tlc-k, .ev-airdrop .tlc-k { color: var(--k-cat); }
.ev-hack .tlc-k, .ev-delisting .tlc-k, .ev-futures_delisting .tlc-k { color: var(--red); }
.tlc-d { font-size: 9px; color: var(--ink3); margin: 0; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tlc-n { font-size: 12px; color: var(--ink); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tlc-nums { display: flex; gap: var(--s4); margin-top: 2px; }
.tlc-big { font-family: var(--mono); font-size: 15px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.tlc-s { font-size: 8px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink3); margin: 0; }

/* change ribbon */
.ribbon { display: flex; gap: var(--s3); align-items: baseline; overflow-x: auto; white-space: nowrap; margin: var(--s3) 0;
  border: 1px solid var(--line); border-radius: 3px; background: var(--bg1); padding: 8px 12px; scrollbar-width: none; }
.rib-l { font-size: 8.5px; letter-spacing: .26em; color: var(--blue); text-transform: uppercase; font-weight: 700; flex: none; }
.rib-i { font-size: 10.5px; color: var(--ink2); flex: none; }
.rib-i .v { color: var(--ink); }
.rib-m { color: var(--ink3); text-decoration: none; }
.rib-m:hover { color: var(--blue); }

/* ---------------------------------------------------------------- tables ---- */
.tscroll { overflow-x: auto; margin: var(--s3) 0 var(--s4); border: 1px solid var(--line2); border-radius: 4px; background: var(--bg2);
  scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
caption { caption-side: top; text-align: left; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--ink3);
  padding: 10px 14px 8px; border-bottom: 1px solid var(--line); background: var(--bg1); }
th { font-family: var(--mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink3); font-weight: 600;
  text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--line2); background: var(--bg1); white-space: nowrap; }
th.n, td.n { text-align: right; }
td { padding: 9px 14px; border-bottom: 1px dashed var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .15s; }
tbody tr:hover { background: rgba(79,140,255,.03); }
td.n { font-variant-numeric: tabular-nums; }
tr.yr td { font-family: var(--mono); font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink4);
  background: var(--bg1); border-bottom: 1px solid var(--line2); padding: 6px 14px; }
tr.future td { color: var(--ink3); }
tr.future .sched { font-size: 11px; letter-spacing: .04em; }
tr.sub td { background: rgba(79,140,255,.02); }
tr.ev-sub td { border-bottom: 1px solid var(--line); padding-top: 0; }
.ev-line { font-size: 12px; color: var(--ink3); line-height: 1.6; max-width: 90ch; }
.ev-line b, .ev-line .fs { color: var(--ink2); }
table .mono, td time { font-size: 11.5px; color: var(--ink2); }
/* a toned number inside a table keeps its tone: the rule above (0,1,1) used to outrank .t-good / .t-bad / .t-flat (0,1,0),
   so green, red and orange numbers in tables rendered grey site-wide */
table .t-good { color: var(--mint); } table .t-bad { color: var(--red); } table .t-flat, table .t-warn { color: var(--amber); } table .t-accent { color: var(--blue); }
table a { text-decoration: none; }
table a:hover { color: var(--blue); }
.ledger td:first-child, .dense td:first-child { white-space: nowrap; }
.ledger.evled td:nth-child(2) { min-width: 160px; }
.evled { font-size: 12px; }
.evled th, .evled td { padding: 8px 4px; }
.evled .cq { gap: 3px; }
.evled .cq-n { font-size: 11px; }
.evled .cq-svg { width: 22px; height: 8px; }
/* very long names clamp with an ellipsis instead of widening the ledger (title attr holds the full name) */
.evled td.nwc > a, .launches td.nwc > a { display: inline-block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.launches td.nwc > a { max-width: 120px; }
.evled td:first-child time { font-size: 11px; }
/* venue-median / listing-effect / schedule tables fit their container: narrower strips,
   tighter numerics, wrapping links — no desktop table needs its .tscroll */
table.stats .pstl { width: 140px; height: 12px; }
table.stats th, table.stats td { padding: 8px 8px; }
table.stats { font-size: 12.5px; }
table.stats .cq-svg { width: 36px; }
table.sched, table.unl-sched, table.launches { font-size: 12px; }
table.sched th, table.sched td, table.unl-sched th, table.unl-sched td { padding: 7px 5px; }
table.sched .cq-svg, table.unl-sched .cq-svg { width: 30px; }
table a { overflow-wrap: normal; }                       /* names never break mid-word */
/* token / venue name cells: one line, ellipsis past 170px (full name in the title attr) */
td.nwc { white-space: nowrap; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
td.nwc a { white-space: nowrap; }
td .chip { white-space: normal; }
#development table, table.prov { font-size: 12px; }
#development th, #development td, table.prov th, table.prov td { padding: 7px 6px; }
.evled .kind { padding: 2px 4px; letter-spacing: .12em; }
table.launches th, table.launches td { padding: 7px 4px; }
table.launches { font-size: 11.5px; }
table.launches th { white-space: normal; }               /* two-line headers beat a 400px sideways scroll */
table.launches .cq-svg { width: 24px; }
table.launches td:first-child { white-space: normal; }   /* birth time wraps under its date */
table.stats td:first-child { white-space: nowrap; }
table.dense td, table.dense th { padding: 6px 14px; font-size: 12px; }
.career-cell { display: block; font-size: 12px; }

/* powers table */
table.powers tr.pw-held td { background: rgba(255,77,94,.03); }
table.powers tr.pw-revoked td { }
.pw-cell { white-space: nowrap; }
.pw { vertical-align: -4px; }

/* ---------------------------------------------------------------- devices ---- */
.cq { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.cq-n { font-family: var(--mono); font-size: 11.5px; letter-spacing: .01em; }
.cq-good .cq-n { color: var(--mint); } .cq-bad .cq-n { color: var(--red); }
.cq-flat .cq-n { color: var(--amber); } .cq-null .cq-n, .cq-pending .cq-n { color: var(--ink3); }
.cq-svg { opacity: .95; }
.pstrip, .pstl, .sbar, .spk { vertical-align: middle; }
.spk-l, .g-l, .ll-l { font-family: var(--mono); font-size: 9px; fill: var(--ink3); letter-spacing: .04em; }
.ll-l3 { fill: var(--ink4); }
svg.lifeline { display: block; background: rgba(0,0,0,.32); border: 1px solid rgba(255,255,255,.06); border-radius: 6px;
  box-shadow: inset 0 2px 10px rgba(0,0,0,.65); }
svg.lifeline polyline[stroke="var(--ink)"] { stroke: var(--blue); }
svg.lifeline { padding: 4px 0; }
svg.gauge, svg.lolli, svg.alloc, svg.ybars, svg.gantt { display: block; margin: var(--s2) 0; }
svg.ybars, svg.gantt, .device > svg { max-width: 100%; height: auto; }
svg.gauge rect[fill="var(--ink)"] { fill: var(--k-cat); filter: drop-shadow(0 0 6px rgba(95,211,232,.35)); }
svg.gauge text, svg.lolli text { font-family: var(--mono); }
.lstrip { display: block; }
.sparks { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s3); margin: var(--s3) 0 var(--s4); }
.spark { border: 1px solid var(--line2); border-radius: 3px; background: var(--bg2); padding: 10px 12px; }
.spark p { margin: 0 0 4px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.spark svg { width: 100%; }
.tspk polyline { filter: drop-shadow(0 0 3px rgba(220,232,236,.22)); }

/* candle hero + ring gauge */
svg.candles { display: block; width: 100%; height: auto; }
.cd-l { font-family: var(--mono); font-size: 10px; fill: var(--ink4); letter-spacing: .14em; }
.cd-warn { fill: var(--amber); letter-spacing: .06em; }
.cd-acc { fill: var(--blue); letter-spacing: .06em; }
.cd-ev { fill: var(--k-cat); letter-spacing: .06em; }
.cd-ath { fill: var(--steel); letter-spacing: .1em; }
.cd-bad { fill: var(--red); fill-opacity: .8; letter-spacing: .1em; }
.gaugebox { display: flex; gap: var(--s4); align-items: center; border: 1px solid var(--line2); border-radius: 4px;
  background: var(--bg2); padding: var(--s4); margin: var(--s3) 0; }
.gaugebox svg.gauge { flex: none; margin: 0; }
.g-big { font-family: var(--mono); font-size: 15px; font-weight: 700; fill: var(--ink); }
.gauge-meta { display: grid; gap: 4px; min-width: 0; }
.g-n { font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.g-s { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--ink3); text-transform: uppercase; }
.g-next { font-family: var(--mono); font-size: 11px; color: var(--k-cat); letter-spacing: .04em; }

/* frame for the price chart: a recessed well */
.scope { position: relative; border: 1px solid rgba(255,255,255,.06); border-radius: 6px; overflow: hidden; background: rgba(0,0,0,.32);
  box-shadow: inset 0 2px 10px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.035); }
.scope svg { display: block; width: 100%; height: auto; border: 0; background: none; border-radius: 0; }
.scope .sweep { position: absolute; top: 0; bottom: 0; left: 64%; width: 90px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(79,140,255,.05) 70%, rgba(79,140,255,.14));
  border-right: 1px solid rgba(79,140,255,.35); animation: sweep 7s linear -5.1s infinite; }
@keyframes sweep { from { left: -90px; } to { left: 100%; } }
.scope-meta { display: flex; justify-content: space-between; gap: var(--s3); margin-top: 8px; flex-wrap: wrap; }
.scope-meta span { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink4); }

/* ---------------------------------------------------------------- kv / faq / related ---- */
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 var(--s5); margin: var(--s3) 0 var(--s4);
  border: 1px solid var(--line2); border-radius: 4px; background: var(--bg2); padding: var(--s2) var(--s4); }
.kv-r { display: flex; justify-content: space-between; gap: var(--s3); align-items: baseline; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.kv-r dt { font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink3); flex: none; }
.kv-r dd { margin: 0; font-family: var(--mono); font-size: 12px; color: var(--ink); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.faq { margin: var(--s3) 0; display: grid; gap: var(--s3); }
.faq-i { border: 1px solid var(--line2); border-radius: 3px; background: var(--bg2); padding: var(--s3) var(--s4); }
.faq-i dt { font-weight: 600; font-size: 14px; color: var(--ink); display: flex; gap: 8px; margin-bottom: var(--s2); }
.faq-ch { color: var(--blue); flex: none; margin-top: 4px; }
.faq-i dd { margin: 0; color: var(--ink2); font-size: 13.5px; line-height: 1.7; }
.related { list-style: none; margin: var(--s3) 0; padding: 0; columns: 2; column-gap: var(--s6); max-width: 100ch; }
.related li { margin-bottom: var(--s2); break-inside: avoid; font-size: 13px; }
.related li a { text-decoration-color: var(--line2); }
.related li .dim { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; }
@media (max-width: 720px) { .related { columns: 1; } }
.deep { list-style: none; margin: var(--s3) 0; padding: 0; columns: 2; column-gap: var(--s6); }
.deep li { margin-bottom: var(--s2); break-inside: avoid; font-size: 13px; }
@media (max-width: 720px) { .deep { columns: 1; } }
.aff { font-size: 11px; letter-spacing: .02em; color: var(--ink3); border: 1px dashed var(--gold-dim); border-radius: 3px;
  background: rgba(255,215,94,.03); padding: 8px 12px; }
.aff a { color: var(--gold); text-decoration: none; }
.aff a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- toc ---- */
.toc { position: sticky; top: 74px; border: 1px solid var(--line2); border-radius: 4px; background: var(--bg2); padding: var(--s3) var(--s4);
  max-height: calc(100vh - 100px); overflow-y: auto; scrollbar-width: thin; }
.toc .eyebrow { margin-bottom: var(--s2); }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0; }
.toc a { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); padding: 5px 0;
  text-decoration: none; border-bottom: 1px dashed var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toc li:last-child a { border-bottom: 0; }
.toc a:hover { color: var(--blue); }
.toc .para { color: var(--ink4); margin-right: 4px; }
@media (max-width: 960px) { .toc { position: static; max-height: none; columns: 2; column-gap: var(--s5); }
  .toc .eyebrow { column-span: all; } }

/* ---------------------------------------------------------------- folds ---- */
.fold { position: relative; }
.fold-t { position: absolute; opacity: 0; pointer-events: none; }
.fold-l { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink3); border: 1px solid var(--line2); border-radius: 2px; background: var(--bg1); padding: 6px 12px; cursor: pointer; margin: var(--s2) 0; }
.fold-l:hover { color: var(--blue); border-color: var(--blue-dim); }
.fold .fl-less { display: none; }
.fold .fold-t:checked ~ .fold-l .fl-less, .fold .fold-t:checked ~ div .fl-less { display: inline; }
.fold .fold-t:checked ~ .fold-l .fl-more, .fold .fold-t:checked ~ div .fl-more { display: none; }
html.js .fold:not(.foldx):not(.subfold):not(.fold-k12):not(.fold-k18) .fold-b tbody tr:nth-child(n+11) { display: none; }
html.js .fold.fold-k5 .fold-b tbody tr:nth-child(n+6) { display: none; }
html.js .fold.fold-k12 .fold-b tbody tr:nth-child(n+13) { display: none; }
html.js .fold.fold-k18 .fold-b tbody tr:nth-child(n+19) { display: none; }
html.js .fold:not(.foldx) .fold-t:checked ~ .fold-b tbody tr { display: table-row; }
html.js .foldx .fold-b { display: none; }
html.js .foldx .fold-t:checked ~ .fold-b { display: block; }
html.js .subfold tr.ev-sub { display: none; }
html.js .subfold .fold-t:checked ~ .tscroll tr.ev-sub { display: table-row; }
@media print { .fold-l { display: none; } html.js .fold .fold-b tbody tr, html.js .foldx .fold-b { display: revert; } }

/* ---------------------------------------------------------------- home ---- */
.feedhero { text-align: center; padding: var(--s5) 0 var(--s4); position: relative; }
.feedhero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(79,140,255,.025) 0 1px, transparent 1px 4px);
  mask: radial-gradient(640px 300px at 50% 36%, black, transparent 72%);
  -webkit-mask: radial-gradient(640px 300px at 50% 36%, black, transparent 72%); }
.feedhero .kicker { font-family: var(--mono); font-size: 10px; letter-spacing: .42em; color: var(--blue); margin-bottom: var(--s3); text-transform: uppercase; }
.feedhero h1 { font-size: clamp(32px, 5.4vw, 60px); line-height: .98; letter-spacing: -.025em; text-wrap: balance; }
.feedhero h1 .ghost { color: transparent; -webkit-text-stroke: 1px var(--ink3); }
.feedhero h1 .lit { color: var(--blue); }
.feedhero .dek { margin: var(--s3) auto 0; max-width: 58ch; font-size: 13.5px; line-height: 1.6; }
.hero .search { margin: var(--s4) auto 0; }
.search-hero { margin: var(--s4) auto 0; max-width: 620px; }
.search-hero input { padding: 13px 18px; font-size: 13px; box-shadow: 0 0 44px rgba(79,140,255,.07); }
.herostats { display: flex; justify-content: center; gap: var(--s6); margin-top: var(--s5); flex-wrap: wrap; }
.hstat { text-align: center; }
.hstat .n { font-family: var(--mono); font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.hstat .k { font-family: var(--mono); font-size: 9px; letter-spacing: .24em; color: var(--ink3); text-transform: uppercase; margin-top: 4px; }
.feedhero .statstrip { margin-top: var(--s5); text-align: left; }

/* quick suggestion chips under the hero search */
.quick { display: flex; justify-content: center; gap: 10px; margin-top: var(--s4); flex-wrap: wrap; position: relative; }
.quick a { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--ink2); border: 1px solid var(--line2);
  border-radius: 2px; padding: 6px 12px; background: var(--bg1); text-decoration: none; transition: border-color .2s, color .2s; }
.quick a:hover { border-color: var(--blue-dim); color: var(--blue); }
.wn { color: var(--amber); }

/* live desk modules */
.shead { display: flex; align-items: center; gap: var(--s4); margin: 0 0 var(--s4); }
.shead h2 { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--ink); white-space: nowrap; margin: 0; }
.shead h2 i { font-style: normal; color: var(--blue); margin-right: 8px; }
.shead .rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line2), transparent); }
.shead .note { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--ink4); white-space: nowrap; text-transform: uppercase; }
.feedgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin: 0 0 var(--s6); }
@media (max-width: 860px) { .feedgrid { grid-template-columns: 1fr; } }
.fmod { border: 1px solid var(--line2); border-radius: 4px; background: var(--bg2); overflow: hidden; display: flex; flex-direction: column; }
.fmod-t { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--bg1);
  font-size: 10px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--blue); margin: 0; }
.fmod-t::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 7px var(--blue);
  animation: blink 1.8s steps(2,start) infinite; flex: none; }
.fmod-grave .fmod-t { color: var(--red); }
.fmod-grave .fmod-t::before { background: var(--red); box-shadow: 0 0 7px var(--red); }
#radar .fmod-t { color: var(--k-cat); }
#radar .fmod-t::before { background: var(--k-cat); box-shadow: 0 0 7px var(--k-cat); }
.fmod-s { font-weight: 400; letter-spacing: .1em; color: var(--ink4); font-size: 9px; margin-left: auto; text-align: right; }
.fmod > .tl, .fmod > .frow, .fmod > .gravebig, .fmod > .empty { margin-left: 16px; margin-right: 16px; }
.fmod > .empty { margin-top: 12px; }
.fmod-b { padding: 4px 16px 12px; flex: 1; min-width: 0; }
.fd-d { width: 52px; flex: none; font-size: 10px; color: var(--ink3); letter-spacing: .04em; }
.fd-d small { display: block; font-size: 8px; letter-spacing: .2em; color: var(--ink4); }
.fd-tk { width: 58px; flex: none; font-size: 12px; font-weight: 700; color: var(--ink); }
.fr-v em { display: block; font-style: normal; font-size: 8px; letter-spacing: .18em; color: var(--ink4); text-transform: uppercase; }
.radarrow { display: flex; gap: var(--s4); align-items: center; padding: 10px 0 4px; }
.radar-lg { width: 132px; height: 132px; margin: 0 6px; }
.radar-lg .radar-beam { -webkit-mask: radial-gradient(circle, black 0 62px, transparent 63px); mask: radial-gradient(circle, black 0 62px, transparent 63px); }
.ulist { flex: 1; min-width: 0; }
.gy { display: flex; gap: var(--s4); padding: 12px 0 4px; }
.gy-count { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.wanted { flex: none; width: 218px; }
.cause { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--ink2); }
.cause .cb { flex: 1; height: 5px; background: var(--bg3); border-radius: 2px; overflow: hidden; }
.cause .cb i { display: block; height: 100%; background: var(--red); opacity: .8; }
.cause b { width: 84px; flex: none; font-weight: 400; letter-spacing: .06em; }
.cause span:last-child { width: 30px; text-align: right; flex: none; color: var(--ink); }
.fmod-wide { grid-column: 1 / -1; }
.fmod-wide .fmod-b { columns: 2; column-gap: var(--s6); }
.fmod-wide .frow { break-inside: avoid; }
@media (max-width: 860px) { .fmod-wide .fmod-b { columns: 1; } .gy { flex-direction: column; } .wanted { width: 100%; }
  .radarrow { flex-direction: column; align-items: stretch; } .radar-lg { margin: 4px auto 0; } }
@media (max-width: 720px) {
  .frow { flex-wrap: wrap; row-gap: 2px; }
  .frow .fr-n { order: 4; flex-basis: 100%; white-space: normal; font-size: 12px; }
  .frow .fd-tk { flex: 1; }
}
/* the single nearest tranche in every unlock schedule: sky (events) left rule, wash,
   countdown tag (chip-gold) and the circ-% cell lit */
tr.unl-next td { background: rgba(95,211,232,.05); }
tr.unl-next td:first-child { box-shadow: inset 2px 0 0 var(--k-cat); }
tr.unl-next td.circ { color: var(--k-cat); font-weight: 700; text-shadow: 0 0 12px rgba(95,211,232,.35); }
tr.unl-next .chip-gold { background: rgba(95,211,232,.1); }
tr.unl-next td:first-child { white-space: normal; }
tr.unl-next td:first-child .chip-gold { display: inline-block; margin-top: 3px; }
.fmod-m { padding: 11px 16px; border-top: 1px dashed var(--line2); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); margin: auto 0 0; }
.fmod-m a { color: var(--ink3); text-decoration: none; }
.fmod-m a:hover { color: var(--blue); }
.fmod .tl { grid-auto-columns: minmax(136px, 1fr); padding-top: var(--s3); }
.frow { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line); text-decoration: none; color: var(--ink); }
.fmod .frow:last-of-type { border-bottom: 0; margin-bottom: var(--s2); }
.frow:hover { color: var(--ink); }
.frow:hover .fr-n { color: var(--blue); }
.fr-n { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s; }
.fr-s { display: block; font-size: 9.5px; letter-spacing: .06em; color: var(--ink3); margin-top: 1px; }
.fr-v { font-size: 12.5px; text-align: right; flex: none; }
.gravebig { display: flex; align-items: baseline; gap: var(--s3); padding: var(--s3) 0 var(--s2); flex-wrap: wrap; }
.gb-n { font-family: var(--mono); font-size: 44px; font-weight: 700; color: var(--red); line-height: 1; text-shadow: 0 0 26px rgba(255,77,94,.4); }
.gb-l { font-size: 10px; letter-spacing: .14em; color: var(--ink3); text-transform: uppercase; max-width: 30ch; line-height: 1.6; }

/* wanted poster */
.wanted { border: 1px solid var(--red-dim); border-radius: 3px; padding: 14px; display: flex; flex-direction: column; gap: 8px;
  position: relative; overflow: hidden; text-decoration: none; color: var(--ink);
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px), linear-gradient(160deg, #160D10, #0C0A0D); }
.wanted::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(140px 90px at 50% 30%, rgba(255,77,94,.1), transparent 70%); }
.wanted .wt { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .5em; color: var(--red); text-align: center;
  border-bottom: 1px dashed var(--red-dim); padding-bottom: 8px; }
.wanted .waddr { font-family: var(--mono); font-size: 10.5px; color: var(--ink); text-align: center; letter-spacing: .04em; word-break: break-all; }
.wanted .wrole { font-family: var(--mono); font-size: 8.5px; letter-spacing: .26em; color: var(--ink3); text-align: center; text-transform: uppercase; }
.wanted .wstats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 2px; }
.wanted .ws { text-align: center; border: 1px solid #2A161B; border-radius: 2px; padding: 6px 2px; background: rgba(0,0,0,.25); }
.wanted .ws b { display: block; font-family: var(--mono); font-size: 14px; font-weight: 700; }
.wanted .ws span { font-family: var(--mono); font-size: 7.5px; letter-spacing: .14em; color: var(--ink3); }
.wanted .wnote { font-family: var(--mono); font-size: 9px; color: var(--ink3); text-align: center; letter-spacing: .08em; line-height: 1.6; }

/* boards */
.boards { margin: 0 0 var(--s6); }
.boardgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
@media (max-width: 860px) { .boardgrid { grid-template-columns: 1fr; } }
/* a lone board spans the grid and runs its list in two columns — home-leaderboard rhythm,
   no full-width card with a single narrow list */
@media (min-width: 721px) {
  .boardgrid > .board:only-child { grid-column: 1 / -1; }
  .boardgrid > .board:only-child .board-l { columns: 2; column-gap: var(--s6); }
  .boardgrid .b-row { break-inside: avoid; }
}
/* two short boards stack in one grid cell instead of stretching to the tall sibling */
.boardcol { display: grid; gap: var(--s4); align-content: start; min-width: 0; }
.board { border: 1px solid var(--line2); border-radius: 4px; background: var(--bg2); overflow: hidden; display: flex; flex-direction: column; }
.board-t { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--bg1);
  font-size: 10px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--ink); margin: 0; }
.board-s { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink4); margin: 10px 16px 0; }
.board-l { list-style: none; margin: var(--s2) 0 var(--s2); padding: 0 16px; flex: 1; }
.b-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.board-l .b-row:last-child { border-bottom: 0; }
.b-r { font-size: 10px; color: var(--ink4); width: 26px; flex: none; }
.b-n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-n a { text-decoration: none; }
.b-s { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; color: var(--ink3); margin-top: 1px; }
.b-v { font-size: 12.5px; text-align: right; flex: none; }
.b-bar { flex: none; display: inline-flex; align-items: center; }
.b-bar .sbar { display: block; border-radius: 2px; }
.board-m { padding: 10px 16px; border-top: 1px dashed var(--line2); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; margin: 0; }
.board-m a { color: var(--ink3); text-decoration: none; }
.board-m a:hover { color: var(--blue); }

/* hub lists */
.hublist { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s4) var(--s5); }
.hublist ul { list-style: none; margin: 0; padding: 0; }
.hublist li { font-size: 12.5px; margin-bottom: 6px; }
.hublist li a { color: var(--ink2); text-decoration: none; }
.hublist li a:hover { color: var(--blue); }
.hublist .eyebrow { margin-bottom: var(--s2); }
.letters { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--s3) 0 var(--s4); }
.letters a { font-family: var(--mono); font-size: 12px; color: var(--ink2); border: 1px solid var(--line2); border-radius: 2px;
  padding: 6px 10px; background: var(--bg1); text-decoration: none; }
.letters a:hover { border-color: var(--blue-dim); color: var(--blue); }
.letters a.on { color: var(--blue); border-color: var(--blue-dim); background: rgba(79,140,255,.05); }
.letters a .c { font-size: 9px; color: var(--ink4); margin-left: 5px; }
.letters-off { font-family: var(--mono); font-size: 12px; color: var(--ink4); border: 1px dashed var(--line); border-radius: 2px; padding: 6px 10px; }

/* big numbers */
.bigrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3); margin: var(--s3) 0 var(--s4); }
.bn { border: 1px solid var(--line2); border-radius: 3px; background: var(--bg2); padding: 12px 14px; }
.bn-l { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink3); margin: 0 0 6px; }
.bn-v { font-family: var(--mono); font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin: 0; line-height: 1.1; }
.bn-v.long { font-size: 19px; }
.bn-u { font-size: 11px; color: var(--ink3); margin-left: 4px; }
.bn-c, .bn-cap { font-size: 10px; color: var(--ink3); margin: 5px 0 0; letter-spacing: .04em; }

/* ---------------------------------------------------------------- footer ---- */
.foot { border-top: 1px solid var(--hair); margin-top: var(--s8); padding: var(--s6) var(--gutter) var(--s8); background: #030405; }
.foot-voice { max-width: var(--max); margin: 0 auto var(--s5); display: flex; gap: var(--s5); align-items: baseline; flex-wrap: wrap; }
.foot-voice .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink4); line-height: 1.9; font-weight: 600; }
.foot-voice .right { margin-left: auto; text-align: right; }
.foot-cols { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); gap: var(--s6); }
@media (max-width: 860px) { .foot-cols { grid-template-columns: 1fr; } .foot-voice .right { margin-left: 0; text-align: left; } }
.foot p { font-size: 12px; color: var(--ink3); line-height: 1.7; }
.foot a { color: var(--ink2); text-decoration: none; }
.foot a:hover { color: var(--blue); }
.legal p { font-size: 11.5px; }

/* bottom nav (mobile) */
.bnav { display: none; }
@media (max-width: 720px) {
  .bnav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; border-top: 1px solid rgba(255,255,255,.08);
    background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .bnav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0 10px;
    font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink3); text-decoration: none; }
  .bnav a.on { color: var(--blue); }
  .bnav .ic { width: 15px; height: 15px; }
  /* the fixed tab bar (~52px) never covers the footer's last legal lines */
  .foot { padding-bottom: calc(var(--s8) + 64px); }
}

/* ---------------------------------------------------------------- misc pages ---- */
.hero-prose { margin: var(--s3) 0; }
.cov .cell-live { white-space: nowrap; }
.cov .cell-live .ic { margin-right: 4px; }
.cov .cell-dead { color: var(--ink3); }
.cov .cell-none, .cov .cell-unk { color: var(--ink4); font-size: 11px; }
.exh { font-family: var(--mono); font-size: 9px; letter-spacing: .18em; color: var(--ink4); }
.changelog-page .tscroll { margin-top: var(--s2); }
.gantt text { font-family: var(--mono); }

/* question -> YES/NO power cards */
.powerq { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s3); margin: var(--s3) 0 var(--s2); }
.power { border: 1px solid var(--line2); border-radius: 3px; background: var(--bg2); padding: var(--s4); display: flex; flex-direction: column; gap: 10px; }
.power .q { font-size: 13px; color: var(--ink2); line-height: 1.45; margin: 0; }
.power .a { font-size: 22px; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.power .why { font-size: 10px; color: var(--ink3); line-height: 1.6; letter-spacing: .04em; margin: auto 0 0; text-transform: uppercase; }
.power.safe .a { color: var(--mint); text-shadow: 0 0 16px var(--mint-glow); }
.power.live .a { color: var(--amber); text-shadow: 0 0 16px var(--amber-glow); }

/* record-zone modules between the event record and the full file (pick note 33 order) */
.recmod { margin: 0 0 var(--s5); }
.recmod .powerq { margin: var(--s3) 0 var(--s2); }
.recmod .device { margin: var(--s3) 0; }
.recmod .tscroll { margin: var(--s3) 0; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s3); margin: 0 0 var(--s5); }
.tri { border: 1px solid var(--line2); border-radius: 3px; background: var(--bg2); padding: 14px 16px; text-decoration: none;
  color: var(--ink); display: flex; flex-direction: column; gap: 6px; min-width: 0; transition: border-color .2s; }
.tri:hover { border-color: var(--blue-dim); }
.tri-k { font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink3); margin: 0; font-weight: 700; }
.tri-k::before { content: none; color: var(--ink4); }
.tri-v { font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.tri-v small { font-size: 10px; color: var(--ink3); letter-spacing: .08em; font-weight: 400; }
.tri-s { font-size: 10px; letter-spacing: .06em; color: var(--ink3); margin: auto 0 0; line-height: 1.6; }
@media (max-width: 720px) { .trio { grid-template-columns: 1fr; } }

/* creator record: the wanted poster as the hero card for high-ruin wallets */
.wantedhero { display: flex; gap: var(--s5); align-items: flex-start; flex-wrap: wrap; margin: 0 0 var(--s3); }
.wantedhero .wh-id { flex: 1 1 320px; min-width: 0; }
.wantedhero .wanted { width: 236px; flex: none; }
@media (max-width: 720px) { .wantedhero .wanted { width: 100%; } }

.h-addr { font-size: clamp(16px, 3.4vw, 30px); letter-spacing: .01em; word-break: break-all; font-weight: 700; }
.tone-good { border-left-color: var(--mint); }
.tone-bad { border-left-color: var(--red); background: rgba(255,77,94,.03); }
.tone-warn { border-left-color: var(--amber); background: rgba(255,180,77,.03); }
.tlc-u .tlc-big { color: var(--k-cat); }
.hedge-b { display: inline-block; font-family: var(--mono); color: var(--blue); border: 1px solid var(--blue-dim); border-radius: 2px;
  padding: 1px 7px; text-decoration: none; }
.hedge-b:hover { color: var(--blue); background: rgba(79,140,255,.08); }
th.gap, td.gap { border-left: 1px solid var(--line2); }

/* ---------------------------------------------------------------- odds surfaces ----
   The counting voice made visible: base-rate bars (.cib), 'last N' chips (.oddsc), the token
   playbook card (.pbk) and the pattern-page odds header (.odds-head). Counts, never promises. */
.cib { vertical-align: middle; }
.oddsc { gap: 7px; text-transform: none; letter-spacing: .04em; font-size: 10.5px; text-decoration: none; }
.oddsc:hover { border-color: var(--blue-dim); color: var(--blue); }
.oddsc .cib { flex: none; }
.oddsc-drift { color: var(--amber); border-color: var(--amber-dim); background: rgba(255,180,77,.05); }
.oddsc-drift:hover { color: var(--amber); border-color: var(--amber); }

/* token standfirst: one line under the record name that says what this file holds */
.standfirst { margin: 4px 0 0; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }

/* home value prop: one stencil line + the WHAT THIS DESK DOES tile trio */
.vpline { font-size: 10px; letter-spacing: .3em; color: var(--ink3); margin: var(--s3) 0 0; }
.vp { max-width: 860px; margin: var(--s5) auto 0; text-align: left; }
.vp-t { font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink3); font-weight: 700; margin: 0 0 var(--s2); text-align: center; }
.vp-t::before { content: ""; }
.vp-tiles { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s3); }
.vp-tile { border: 1px solid var(--line2); border-radius: 3px; background: var(--bg2); padding: 12px 14px; text-decoration: none;
  color: var(--ink); display: flex; flex-direction: column; gap: 3px; min-width: 0; transition: border-color .2s; }
.vp-tile:hover { border-color: var(--blue-dim); }
.vp-tile b { font-family: var(--mono); font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--blue); text-shadow: 0 0 14px var(--blue-glow); }
.vp-tile span { font-family: var(--mono); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink2); font-weight: 700; }
.vp-tile em { font-style: normal; font-size: 10.5px; color: var(--ink3); line-height: 1.5; letter-spacing: .02em; }
@media (max-width: 720px) { .vp-tiles { grid-template-columns: 1fr; } }

/* the playbook: the catalyst card trades its radar for the matched pattern's counted base rate */
.pbk { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pbk-when { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--k-cat); }
.pbk-l { margin: 2px 0 0; font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink3); font-weight: 700; }
.pbk-big { display: flex; align-items: baseline; gap: 12px; }
.pbk-n { font-family: var(--sans); font-size: 38px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.pbk-big .t-good { text-shadow: 0 0 18px var(--mint-glow); }
.pbk-big .t-bad { text-shadow: 0 0 18px var(--red-glow); }
.pbk-s { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); line-height: 1.7; }
.pbk-ci { margin: -2px 0 0; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.pbk-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.pbk-drift { margin: 0; font-size: 9.5px; letter-spacing: .06em; color: var(--amber); border: 1px dashed var(--amber-dim);
  border-radius: 2px; background: rgba(255,180,77,.05); padding: 5px 8px; line-height: 1.5; }
.pbk-more { margin: 0; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.pbk-more b { color: var(--ink2); font-weight: 600; }
.vcard:hover .pbk-more { color: var(--blue); }

/* pattern page: odds header (two big base rates + the medians/honesty column) */
.odds-head { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s4); margin: var(--s4) 0; align-items: stretch; }
.oh-big, .oh-meds { border: 1px solid var(--line2); border-radius: 4px; background: var(--bg2); padding: var(--s4); min-width: 0; }
.oh-l { font-family: var(--mono); font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink3); font-weight: 700; margin: 0 0 var(--s2); }
.oh-n { font-size: 46px; font-weight: 800; letter-spacing: -.02em; line-height: 1; margin: 0; }
.oh-n.t-good { text-shadow: 0 0 22px var(--mint-glow); }
.oh-n.t-bad { text-shadow: 0 0 22px var(--red-glow); }
.oh-s { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); margin: 6px 0 var(--s2); }
.oh-big .cib { width: 100%; height: auto; display: block; }
.oh-ci { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); margin: 6px 0 0; }
.oh-meds { display: flex; flex-direction: column; gap: 10px; }
.oh-honest { margin: auto 0 0; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); line-height: 1.6; }
.oh-honest.t-warn { color: var(--amber); }
.tlc-odds { margin: 2px 0 0; font-size: 9.5px; letter-spacing: .06em; }
td.unl-tok { max-width: 210px; }
td.unl-tok .oddsc { margin-top: 3px; font-size: 9.5px; padding: 2px 6px; }
table.pat-idx td.nwc { max-width: 320px; }
@media (max-width: 900px) { .odds-head { grid-template-columns: 1fr; } .oh-n { font-size: 38px; } }

/* 404 */
.nf { text-align: center; padding: var(--s8) 0; }
.nf h1 { font-size: 64px; }
.nf .stamp404 { display: inline-block; font-family: var(--mono); font-size: 13px; letter-spacing: .4em; color: var(--red);
  border: 2px solid var(--red-dim); border-radius: 3px; padding: 10px 20px; transform: rotate(-3deg); margin: var(--s4) 0; text-transform: uppercase; }

/* ---------------------------------------------------------------- reveal / motion ---- */
@media (prefers-reduced-motion: reduce) {
  .ticker-in, .tape-t, .rec i, .sdot.live, .fmod-t::before, .scope .sweep, .radar-beam { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------- mobile ---- */
@media (max-width: 900px) {
  .topnav, .mast .search { display: none; }
  .mast { gap: var(--s4); }
  .rec { margin-left: auto; }
  .rec .long { display: none; }
  h1 { font-size: 30px; }
  .rhead .wm { font-size: 64px; top: 0; }
  .mast-updated { display: none; }
  .subbar { min-height: 32px; }
  .vrow { grid-template-columns: 1fr; }
  .introw { grid-template-columns: 1fr; }
  .statstrip { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stripwrap { flex-direction: column; }
  .herostats { gap: var(--s5); }
  .hstat .n { font-size: 19px; }
  th, td { padding: 8px 10px; }
  .ffdiv { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
}
/* ------------------------------------------------- 390 table rule: shed columns, never scroll ----
   Binding mobile spec: below 720px ledger tables drop their D+90 / KIND / VENUE / checked columns
   (.shm cells, marked in the templates), micro-bar SVGs give way to the signed number, event
   descriptions wrap, and no mono line stays nowrap wide enough to push the page past the viewport. */
@media (max-width: 720px) {
  th.shm, td.shm { display: none; }
  table { font-size: 12px; }
  th, td { padding: 8px 7px; }
  td .cq-svg, td .mm, td .mf { display: none; }         /* the signed number is always printed beside the bar */
  .cq { white-space: normal; }
  .cq-n { font-size: 11px; white-space: nowrap; overflow-wrap: normal; }
  td, th { overflow-wrap: anywhere; }
  td.nwc, td.nwc a { white-space: normal; overflow-wrap: normal; } /* names wrap at spaces, never mid-word */
  .ledger .kind, .rtable td .kind { padding: 2px 5px; letter-spacing: .12em; }
  .ledger.evled td:nth-child(2) { min-width: 0; }
  .rtable th, .rtable td { padding: 9px 8px; }
  .rtable td.ttl { font-size: 12px; }
  .rtable .ttl small { font-size: 10px; }
  table.stats .pstl { width: 90px; }
  .ev-line { font-size: 11.5px; }
  caption { white-space: normal; }
  /* mono lines wrap instead of clipping mid-word under overflow-x: clip */
  .shead { flex-wrap: wrap; row-gap: 4px; }
  .shead .note { white-space: normal; letter-spacing: .06em; }
  .st-s, .st-l { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .st-v { white-space: normal; overflow-wrap: anywhere; }
  .ribbon { flex-wrap: wrap; white-space: normal; overflow-x: visible; row-gap: 4px; }
  .rib-i, .rib-l, .rib-m { white-space: normal; overflow-wrap: anywhere; flex: 0 1 auto; max-width: 100%; min-width: 0; }
  .zsep { white-space: normal; letter-spacing: .18em; text-align: center; min-width: 0; }
  .zsep::before, .zsep::after { min-width: 12px; }
  .fr-s, .b-s, .tlc-d, .tlc-n { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .gb-l { max-width: none; }
  .src, .asof, .fmod-m, .board-s, .fmod-s, .scope-meta span, .g-next, .g-s { overflow-wrap: anywhere; }
  .crumbs { overflow-wrap: anywhere; }
  .kv-r dd, .waddr, .wnote { overflow-wrap: anywhere; }
  .igrid { grid-template-columns: 1fr 1fr; }
  .igc-v { font-size: 13px; }
  .b-bar { display: none; }                              /* board rows: value only at phone width */
  .receipt .ev { font-size: 11.5px; }
  .alloc-leg { gap: 4px 12px; }
  .evled th, .evled td { padding: 8px 6px; }
  .tscroll { border-radius: 3px; }
}
@media print {
  .mast, .bnav, .subbar .mast-updated, .ticker { display: none; }
  body { background: #fff; color: #000; }
}

/* ================================================================ THE DESK: calendar + odds board + urgency
   Countdown chips tick client-side (site.js); reduced-motion keeps the server-rendered T−xD. */
.subrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: var(--s4) 0 0; }
.subbtn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--blue-dim);
  border-radius: 3px; color: var(--blue); text-decoration: none; font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; background: rgba(79,140,255,.04); }
.subbtn:hover { border-color: var(--blue); background: rgba(79,140,255,.09); }
.subbtn .ic { width: 12px; height: 12px; }
.subnote { font-size: 9.5px; }
.heronote { margin-top: var(--s3); font-size: 10px; letter-spacing: .06em; }

.calfilters { margin-top: var(--s4); border-top: 1px dashed var(--line2); padding-top: var(--s3); }
.cf-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 6px; }
.cf-l { font-size: 8.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink3); min-width: 64px; }
.cf { text-decoration: none; text-transform: none; letter-spacing: .03em; font-size: 10.5px; gap: 5px; }
.cf b { color: var(--ink3); font-weight: 400; }
.cf:hover { border-color: var(--blue-dim); color: var(--blue); }
.cf.on { color: var(--blue); border-color: var(--blue); background: rgba(79,140,255,.08); }
.cf.on b { color: var(--blue); }
.cf-x { color: var(--ink2); text-decoration: none; font-size: 10px; letter-spacing: .08em; }
.cf-note { margin: 4px 0 0; font-size: 10px; }

.calnav { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); margin: 0 0 var(--s3); }
.calnav a { text-decoration: none; color: var(--ink2); }
.calnav a:hover { color: var(--blue); }
.calnav-m { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--line2); border: 1px solid var(--line2); border-radius: 3px; overflow: hidden; }
.cal-h { background: var(--bg2); padding: 6px 8px; font-size: 8.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink3); }
.cd { background: var(--bg); min-height: 86px; padding: 6px 7px; }
.cd.off { background: var(--bg2); opacity: .45; }
.cd.past { opacity: .45; }
.cd.tdy { box-shadow: inset 0 0 0 1px var(--blue-dim); background: rgba(79,140,255,.03); }
.cd-d { margin: 0 0 4px; font-size: 9.5px; color: var(--ink3); display: flex; gap: 6px; align-items: baseline; }
.cd-now { color: var(--blue); font-size: 7.5px; letter-spacing: .22em; }
.cd-full { display: none; }
.cd-more { margin: 2px 0 0; font-size: 8.5px; color: var(--ink3); }
.cale { display: flex; align-items: center; gap: 5px; border: 1px solid var(--line2); border-radius: 2px;
  padding: 3px 5px; margin: 0 0 3px; text-decoration: none; color: var(--ink2); font-size: 9.5px; min-width: 0; }
.cale:hover { border-color: var(--blue-dim); color: var(--ink); }
.cale b { font-size: 9.5px; letter-spacing: .04em; color: var(--ink); }
.cale .cale-t { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex: 1 1 auto; color: var(--ink3); }
.cale.ev-unlock b { color: var(--k-cat); }
.cale.ev-listing b, .cale.ev-futures_listing b { color: var(--k-list); }
.cale.ev-delisting b, .cale.ev-hack b { color: var(--red); }
.od { width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block; }
.od-good { background: var(--good); box-shadow: 0 0 6px rgba(56,242,164,.5); }
.od-bad { background: var(--bad); box-shadow: 0 0 6px rgba(255,77,94,.5); }
.od-flat, .od-unknown { background: var(--ink3); }
.od-drift { background: var(--amber); box-shadow: 0 0 6px rgba(255,180,77,.6); }
.callegend { margin-top: var(--s3); font-size: 9.5px; color: var(--ink3); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.calmonths { margin-top: var(--s3); font-size: 10px; color: var(--ink3); }
.calmonths .here { color: var(--blue); }
.slate td, .slate th { padding-left: 5px; padding-right: 5px; }
.slate td time, .slate .kind { white-space: nowrap; }
.slate .kind { letter-spacing: .04em; }
.slate .nwc { max-width: 170px; }
.icsb { border: 1px solid var(--line2); border-radius: 2px; padding: 2px 5px; text-decoration: none; color: var(--ink3); font-size: 9px; letter-spacing: .08em; }
.icsb:hover { color: var(--blue); border-color: var(--blue-dim); }
.trd-feed { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; }
.trd-feed .subnote { font-size: 9.5px; letter-spacing: .05em; }
.obalso { display: block; font-size: 10px; margin-top: 2px; }

.obgroup { margin: 0 0 var(--s5); }
.ob-h { display: flex; align-items: baseline; gap: 10px; border-bottom: 1px solid var(--line2); padding-bottom: 5px; margin: 0 0 var(--s2); }
.ob-hl { font-size: 11px; letter-spacing: .24em; color: var(--blue); }
#ob-today .ob-hl { color: var(--blue); }
#ob-horizon .ob-hl { color: var(--ink3); }
.ob-hn { font-size: 9.5px; color: var(--ink3); letter-spacing: .08em; }
.oboard .obr { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.oboard .obrate { white-space: nowrap; }
.oboard .obdate { font-size: 9px; }
.oboard td, .oboard th { padding-left: 5px; padding-right: 5px; }
.oboard .kind { white-space: nowrap; font-size: 10px; letter-spacing: .04em; }
.oboard .nwc { max-width: 150px; }
.oboard .cdn { font-size: 9px; padding: 2px 6px; }
.cdn, td .cdn { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* home hero urgency line */
.urgline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: var(--s3) 0 0; font-size: 11px; color: var(--ink2); }
.feedhero .urgline { justify-content: center; }
.urgline b { color: var(--k-cat); }
.urgline .t-bad { color: var(--red); }

/* calendar grid folds to a day list on phones: off/empty days vanish, cells become rows */
@media (max-width: 700px) {
  .cal { display: block; border: 0; background: none; }
  .cal-h { display: none; }
  .cd { min-height: 0; border: 1px solid var(--line2); border-radius: 3px; margin: 0 0 6px; }
  .cd.off, .cd:not(.has):not(.tdy) { display: none; }
  .cd-d { font-size: 10.5px; color: var(--ink2); }
  .cd .cd-full { display: inline; }
  .cd .cd-dom { display: none; }
}

/* ================================================================ PART B — THE TRADER PAGE
   WHAT PATTERN ARE WE TRADING (.trdm) directly under the token chart, the two-card verdict row,
   and MY DESK (.mydesk): the localStorage watchlist strip. Counting voice throughout. */
.trdm { margin: var(--s4) 0 var(--s4); border: 1px solid var(--line2); border-left: 2px solid var(--k-cat);
  border-radius: 3px; background: linear-gradient(180deg, rgba(95,211,232,.04), rgba(95,211,232,0) 55%), var(--bg2); }
.trd-k { padding: 10px 14px 0; }
.trd { padding: 8px 14px 12px; }
.trd-when { margin: 0 0 6px; font-size: 10.5px; color: var(--ink2); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.trd-ev { color: var(--ink); font-weight: 600; }
.trd-name { margin: 0 0 7px; font-family: var(--sans); font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.trd-name a { color: var(--ink); text-decoration: none; }
.trd-name a:hover { color: var(--blue); }
.trd-setup { margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.trd-setup em { font-style: normal; font-size: 8.5px; letter-spacing: .24em; color: var(--ink3); }
.trd-setup .chip { text-transform: none; letter-spacing: .03em; font-size: 10.5px; }
.trd-grid { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: flex-start; margin: 0 0 8px; }
.trd-big { display: flex; align-items: baseline; gap: 12px; margin: 0 0 6px; }
.trd-n { font-family: var(--sans); font-size: 42px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.trd-big .t-good { text-shadow: 0 0 18px var(--mint-glow); }
.trd-big .t-bad { text-shadow: 0 0 18px var(--red-glow); }
.trd-s { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); line-height: 1.7; }
.trd-ci { margin: 4px 0 0; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.trd-nums { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 6px; }
.trd-oos { margin: 0 0 6px; font-size: 9.5px; letter-spacing: .06em; color: var(--ink3); }
.trd-more { margin: 0; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.trd-more a { color: var(--ink2); text-decoration: none; }
.trd-more a:hover { color: var(--blue); }
.trd-others { border-top: 1px dashed var(--line2); padding: 8px 14px 10px; }
.trd-ol { margin: 0 0 6px; font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink3); font-weight: 700; }
.trd-ol .dim { text-transform: none; letter-spacing: .04em; font-weight: 400; }
.trd-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px dotted var(--line2); font-size: 11px; }
.trd-row:last-child { border-bottom: 0; }
.trd-rt { flex: 1 1 220px; min-width: 0; }
.trd-rt a { color: var(--ink2); text-decoration: none; }
.trd-rt a:hover { color: var(--blue); }
.vrow.two { grid-template-columns: repeat(2, minmax(0,1fr)); }

/* star buttons + MY DESK watchlist strip — all injected by site.js; no-JS pages never show them */
.starb { appearance: none; -webkit-appearance: none; border: 1px solid var(--line2); background: var(--bg2); color: var(--ink3);
  border-radius: 2px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; padding: 3px 8px; cursor: pointer; line-height: 1.4; }
.starb:hover { border-color: var(--gold-dim); color: var(--gold); }
.starb.on { color: var(--gold); border-color: var(--gold-dim); background: rgba(255,215,94,.07); }
td .starb, .frow .starb { padding: 1px 3px; font-size: 9.5px; margin-right: 4px; }
tr.wl-on > td:first-child { box-shadow: inset 2px 0 0 var(--gold); }
.mydesk { margin: var(--s4) 0; border: 1px solid var(--gold-dim); border-radius: 3px; background: rgba(255,215,94,.03); padding: 10px 14px; }
.md-t { margin: 0 0 8px; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); font-weight: 700;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.md-s { font-size: 9px; letter-spacing: .06em; text-transform: none; color: var(--ink3); font-weight: 400; }
.md-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.md-c { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; border: 1px solid var(--line2); border-radius: 3px;
  background: var(--bg2); padding: 6px 9px; font-family: var(--mono); font-size: 10.5px; color: var(--ink2); max-width: 100%; }
.md-c a { color: var(--ink); text-decoration: none; font-weight: 700; letter-spacing: .04em; }
.md-c a:hover { color: var(--blue); }
.md-c .md-ev { color: var(--ink3); }
.md-c .md-o { color: var(--ink2); }
.md-c .md-cool { color: var(--amber); }
.md-c .md-x { border: 0; background: none; color: var(--ink3); font-family: var(--mono); font-size: 11px; cursor: pointer; padding: 0 2px; }
.md-c .md-x:hover { color: var(--ink); }
.md-empty { margin: 0; font-size: 10px; color: var(--ink3); }
@media (max-width: 700px) {
  .trd-n { font-size: 34px; }
  .vrow.two { grid-template-columns: 1fr; }
}

/* ================================================================ PART C — TWO-TIER SPLIT + KIND-COLOR IDENTITY
   Eight kind colors, one dominant per module (christmas-tree guardrail); semantic green/red stay
   reserved for measured outcomes. Every motion rule sits behind prefers-reduced-motion. */
:root {
  --k-cat: #5FD3E8;  --k-cat-dim: #1B4F5C;  --k-cat-glow: rgba(95,211,232,.14);   /* events / catalyst / unlocks: sky */
  --k-list: #9C9CFF; --k-list-dim: #34346B; --k-list-glow: rgba(156,156,255,.14); /* listings: indigo */
  --k-rec: #4F8CFF;  --k-rec-dim: #1F3E73;  --k-rec-glow: rgba(79,140,255,.16);   /* record: brand blue */
  --k-ruin: #FF4D5E; --k-ruin-dim: #4A1F26; --k-ruin-glow: rgba(255,77,94,.14);   /* graveyard / ruin */
  --k-board: #FFD75E;--k-board-dim: #6B571F;--k-board-glow: rgba(255,215,94,.14); /* boards / money */
  --k-ppl: #F48FC6;  --k-ppl-dim: #5E2B48;  --k-ppl-glow: rgba(244,143,198,.14);  /* people: pink */
  --k-pwr: #8FA6BF;  --k-pwr-dim: #34414F;  --k-pwr-glow: rgba(143,166,191,.14);  /* powers / security: steel */
  --k-dev: #C4CDD4;  --k-dev-dim: #4A535A;  --k-dev-glow: rgba(196,205,212,.12);  /* dev / meta: silver */
}
.k-cat  { --kc: var(--k-cat);  --kc-dim: var(--k-cat-dim);  --kc-glow: var(--k-cat-glow); }
.k-list { --kc: var(--k-list); --kc-dim: var(--k-list-dim); --kc-glow: var(--k-list-glow); }
.k-rec  { --kc: var(--k-rec);  --kc-dim: var(--k-rec-dim);  --kc-glow: var(--k-rec-glow); }
.k-ruin { --kc: var(--k-ruin); --kc-dim: var(--k-ruin-dim); --kc-glow: var(--k-ruin-glow); }
.k-board{ --kc: var(--k-board);--kc-dim: var(--k-board-dim);--kc-glow: var(--k-board-glow); }
.k-ppl  { --kc: var(--k-ppl);  --kc-dim: var(--k-ppl-dim);  --kc-glow: var(--k-ppl-glow); }
.k-pwr  { --kc: var(--k-pwr);  --kc-dim: var(--k-pwr-dim);  --kc-glow: var(--k-pwr-glow); }
.k-dev  { --kc: var(--k-dev);  --kc-dim: var(--k-dev-dim);  --kc-glow: var(--k-dev-glow); }

/* kind accents on the full-file register blocks and the record-zone modules */
.blk { border-top: 1px dashed var(--kc-dim, var(--line2)); }
.blk > .eyebrow::before, .recmod > .eyebrow::before, .evrec > .eyebrow::before, .ovsec > .eyebrow::before { color: var(--kc, var(--blue)); }
.blk > .eyebrow .ic, .recmod > .eyebrow .ic, .evrec > .eyebrow .ic { color: var(--kc, var(--ink3)); }

/* TIER 1 — the brief: overview cards, one per full-file section */
.ovsec { margin: 0 0 var(--s5); }
.ovgrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s3); }
.ovc { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 7px; min-width: 0;
  border: 1px solid var(--line2); border-left: 2px solid var(--kc, var(--line2)); border-radius: 3px;
  background: var(--bg2); padding: 12px 14px; text-decoration: none; color: var(--ink);
  transition: border-color .2s, box-shadow .2s; }
.ovc:hover { border-color: var(--kc-dim, var(--line2)); border-left-color: var(--kc); color: var(--ink);
  box-shadow: 0 0 24px var(--kc-glow, transparent); }
.ovc-wide { grid-column: span 2; }
.ovc-k { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--kc, var(--ink3)); margin: 0; font-weight: 700; }
.ovc-k::before { content: none; color: var(--ink4); }
.ovc-v { font-size: 21px; font-weight: 700; letter-spacing: -.01em; margin: 0; color: var(--ink); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ovc-v small { font-size: 9.5px; color: var(--ink3); letter-spacing: .08em; font-weight: 400; text-transform: uppercase; }
.ovc-s { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--ink2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.ovc-go { margin: auto 0 0; font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }
.ovc:hover .ovc-go { color: var(--kc, var(--blue)); }
.ovgo { margin: var(--s2) 0 0; }
.ovgo a { color: var(--ink3); text-decoration: none; }
.ovgo a:hover { color: var(--kc, var(--blue)); }
.ov-lead { margin: -4px 0 var(--s3); max-width: 76ch; color: var(--ink2); font-size: 13px; line-height: 1.6;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
@media (max-width: 900px) { .ovgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .ovgrid { grid-template-columns: 1fr; } .ovc-wide { grid-column: auto; } }

/* TOC maps both tiers */
.toc-tier { font-size: 8px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink4); margin: var(--s2) 0 2px; font-weight: 700; }
.toc-tier + ol { margin-bottom: var(--s2); }
.toc ol + .toc-tier { border-top: 1px solid var(--line2); padding-top: var(--s2); color: var(--blue); }

/* listings wear cyan (mint stays the semantic 'measured up') */
tr.ev-listing .kind, tr.ev-futures_listing .kind { color: var(--k-list); border-color: var(--k-list-dim); }
.ev-listing .tlc-k, .ev-futures_listing .tlc-k { color: var(--k-list); }
.cale.ev-listing b, .cale.ev-futures_listing b { color: var(--k-list); }
#fresh .fmod-t { color: var(--k-list); }
#fresh .fmod-t::before { background: var(--k-list); box-shadow: 0 0 7px var(--k-list); }
#corpses .fmod-t { color: var(--k-ruin); }
#corpses .fmod-t::before { background: var(--k-ruin); box-shadow: 0 0 7px var(--k-ruin); }

/* calendar day entries: kind dot + kind edge */
.cale { border-left: 2px solid var(--line2); }
.cale.ev-unlock { border-left-color: var(--k-cat-dim); }
.cale.ev-listing, .cale.ev-futures_listing { border-left-color: var(--k-list-dim); }
.cale.ev-hack, .cale.ev-delisting, .cale.ev-futures_delisting { border-left-color: var(--k-ruin-dim); }

/* odds board group headers: each horizon gets its own light */
#ob-today .ob-hl { color: var(--k-rec); }
#ob-week .ob-hl { color: var(--k-cat); }
#ob-month .ob-hl { color: var(--k-board); }
#ob-horizon .ob-hl { color: var(--k-pwr); }
#ob-today .ob-h { border-bottom-color: var(--k-rec-dim); }
#ob-week .ob-h { border-bottom-color: var(--k-cat-dim); }
#ob-month .ob-h { border-bottom-color: var(--k-board-dim); }
#ob-horizon .ob-h { border-bottom-color: var(--k-pwr-dim); }

/* boards wear gold */
.board { border-top: 2px solid var(--k-board-dim); }
.board-t { color: var(--k-board); }

/* ---------------------------------------------------------------- micro-rewards (all motion-gated) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ovc::after, .vcard::after, .tlc::after, .igc::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 50%; pointer-events: none;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.045), transparent);
    transform: skewX(-14deg); transition: left .55s ease; }
  .ovc:hover::after, .vcard:hover::after, .tlc:hover::after, .igc:hover::after { left: 130%; }
  .tlc, .igc { position: relative; overflow: hidden; }
  .cdn { transition: transform .15s ease, box-shadow .15s ease; }
  .cdn:hover { transform: translateY(-2px); box-shadow: 0 3px 12px var(--k-cat-glow); }
}
@media (prefers-reduced-motion: no-preference) {
  .starb.on { animation: starpop .32s ease; }
  @keyframes starpop { 0% { transform: scale(1); } 45% { transform: scale(1.4) rotate(-10deg); } 100% { transform: scale(1); } }
  /* board rank-1 shimmer */
  .board-l .b-row:first-child { background: linear-gradient(100deg, transparent 30%, rgba(255,215,94,.07) 50%, transparent 70%);
    background-size: 250% 100%; animation: shimmer 3.4s linear infinite; }
  @keyframes shimmer { from { background-position: 125% 0; } to { background-position: -125% 0; } }
  /* section reveal stagger (site.js tags .rv, IntersectionObserver flips .in) */
  html.js.motion .rv { opacity: 0; transform: translateY(10px); transition: opacity .5s ease var(--rvd, 0s), transform .5s ease var(--rvd, 0s); }
  html.js.motion .rv.in { opacity: 1; transform: none; }
  /* hottest cards: slow animated gradient border ring */
  .trdm, .fmod-grave, .wanted, tr.unl-next .chip-gold { position: relative; }
  .trdm::after, .fmod-grave::after, .wanted::before, tr.unl-next .chip-gold::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    background: linear-gradient(120deg, var(--hb, var(--blue)), transparent 30%, var(--hb, var(--blue)) 52%, transparent 74%, var(--hb, var(--blue)));
    background-size: 280% 280%; animation: hotbd 9s linear infinite; opacity: .8; }
  .fmod-grave { --hb: var(--red); }
  .wanted { --hb: var(--red); }
  @keyframes hotbd { from { background-position: 0% 50%; } to { background-position: 280% 50%; } }
}
.b-row:first-child .b-r { color: var(--k-board); font-weight: 700; }
@media print { html.js.motion .rv { opacity: 1 !important; transform: none !important; } }

/* iteration 2: feed rhythm in the brief (a wide card every few rows, holes backfilled) +
   the playbook verdict card joins the animated-ring set */
.ovgrid { grid-auto-flow: dense; }
.ovgrid .ovc:nth-child(7n) { grid-column: span 2; }
@media (max-width: 600px) { .ovgrid .ovc:nth-child(7n) { grid-column: auto; } }
@media (prefers-reduced-motion: no-preference) {
  .vcard > .pbk { position: relative; }
  .vcard > .pbk::after {
    content: ""; position: absolute; inset: -8px; border-radius: 4px; padding: 1px; pointer-events: none;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude;
    background: linear-gradient(120deg, var(--blue), transparent 30%, var(--blue) 52%, transparent 74%, var(--blue));
    background-size: 280% 280%; animation: hotbd 9s linear infinite; opacity: .7; }
}

/* fixer: :target landing flash (ported from the legacy sheet) — a click from the brief deck
   confirms its landing deep in the full file; kind-colored where the section carries one */
@media (prefers-reduced-motion: no-preference) {
  section:target, tr:target, .il li:target, .faq-i:target, tr.ev-sub:target td { animation: tgt-flash 1.6s ease-out 1; }
  :target .bn-v, :target h2 { animation: none; }
  @keyframes tgt-flash {
    0% { background-color: color-mix(in srgb, var(--kc, var(--blue)) 16%, transparent); }
    100% { background-color: transparent; } }
}

/* fixer: zero-row overview cards collapse to a one-line strip instead of an empty husk */
.ovc-min { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
.ovc-min .ovc-go { margin: 0; white-space: nowrap; }

/* ================================================================ THE SLATE + SCORE ENGINE =====
   Slate boards ride the gold board family (k-board); the composite ring speaks its own scale:
   mint = high, amber = middle, red = low. Semantic green/red elsewhere stay measured outcomes. */
.htabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 4px; }
.htabs a { display: inline-flex; align-items: baseline; gap: 5px; padding: 7px 14px; border: 1px solid var(--line2);
  border-radius: 3px; color: var(--ink2); text-decoration: none; font-size: 11.5px; letter-spacing: .1em; background: var(--bg1); }
.htabs a small { font-size: 9.5px; color: var(--ink3); letter-spacing: .06em; }
.htabs a:hover { color: var(--ink); border-color: var(--k-board-dim); }
.htabs a.on { color: var(--k-board); border-color: var(--k-board-dim); background: rgba(255,215,94,.06);
  box-shadow: inset 0 -2px 0 var(--k-board); }
.htabs a.on small { color: var(--k-board); opacity: .75; }
.htabs .htabs-b { margin-left: auto; font-size: 10.5px; color: var(--ink3); }
.htabs .htabs-b a { display: inline; padding: 0 2px; border: 0; background: none; box-shadow: none; color: var(--ink2); }
.htabs .htabs-b a:hover { color: var(--k-board); }
.htabs span.off { padding: 7px 14px; border: 1px dashed var(--line); border-radius: 3px; color: var(--ink4); font-size: 11.5px; letter-spacing: .1em; }

.slboard { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 4px; background: var(--bg1); overflow: hidden; }
.slrow { display: grid; grid-template-columns: 52px 30px minmax(0,1fr) auto 56px; gap: 10px; align-items: center;
  padding: 10px 12px; border-bottom: 1px solid var(--line); }
.slrow:last-child { border-bottom: 0; }
.slrow:hover { background: var(--bg2); }
.slrow.sl-worst:hover { background: rgba(255,77,94,.04); }
.sl-r { font-size: 12px; color: var(--k-board); display: flex; flex-direction: column; line-height: 1.2; }
.sl-worst .sl-r { color: var(--k-ruin); }
.sl-mv { font-style: normal; font-size: 9.5px; letter-spacing: .04em; }
.sl-mv.up { color: var(--mint); } .sl-mv.dn { color: var(--red); }
.sl-tok { min-width: 0; }
.sl-tok > a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 13.5px; }
.sl-tok > a:hover { color: var(--k-board); }
.sl-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; align-items: center; }
.slc { font-family: var(--mono); font-size: 10px; letter-spacing: .03em; color: var(--ink2); text-decoration: none;
  border: 1px solid var(--line2); border-radius: 2px; padding: 2.5px 7px; background: var(--bg0); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.slc:hover { border-color: var(--ink3); color: var(--ink); }
.slc-good { color: var(--mint); border-color: var(--mint-dim); background: rgba(56,242,164,.04); }
.slc-bad { color: var(--red); border-color: var(--red-dim); background: rgba(255,77,94,.04); }
.sl-comps { display: flex; gap: 10px; align-items: center; }
.sl-c { display: flex; flex-direction: column; gap: 2px; }
.sl-c em { font-style: normal; font-size: 8.5px; letter-spacing: .14em; color: var(--ink4); }
.sl-total { display: flex; justify-content: flex-end; }

/* score ring + bars (shared by slate rows and the token SCORE block) */
.sring .sr-n { font-family: var(--mono); font-size: 15px; font-weight: 700; fill: var(--ink); }
.sring .sr-s { font-family: var(--mono); font-size: 7.5px; letter-spacing: .1em; fill: var(--ink3); }
.sr-good .sr-n { fill: var(--mint); } .sr-warn .sr-n { fill: var(--amber); } .sr-bad .sr-n { fill: var(--red); }
.scorebig .sring .sr-n { font-size: 20px; }

/* token-page SCORE block (verdict zone) */
.scoremod .sc-grid { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 18px; align-items: center; }
.scoremod .sc-comps { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.scoremod .sc-row { display: grid; grid-template-columns: 74px minmax(60px, 220px) 34px; gap: 10px; align-items: center; }
.scoremod .sc-row em { font-style: normal; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; color: var(--ink3); }
.scoremod .sc-row b { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ink2); text-align: right; }
.scoremod .sc-rank { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; text-align: right; }
.scoremod .sc-rank .mono { font-size: 10.5px; color: var(--ink3); }
.scoremod .sc-spark { margin-top: 2px; }
@media (max-width: 760px) {
  .slrow { grid-template-columns: 40px minmax(0,1fr) 48px; }
  .slrow .av, .slrow .tkl { display: none; }
  /* what matters first on mobile: rank, ring + why-chips lead; component bars drop to a second row */
  .sl-comps { grid-column: 2 / -1; grid-row: 2; flex-wrap: wrap; gap: 8px 12px; }
  .scoremod .sc-grid { grid-template-columns: auto minmax(0,1fr); }
  .scoremod .sc-rank { grid-column: 1 / -1; align-items: flex-start; text-align: left; }
}
@media (max-width: 480px) {
  .scoremod .sc-row { grid-template-columns: 72px minmax(0,1fr) 26px; }
  .scoremod .sc-row .scb { width: 100%; height: 6px; }
}

/* horizon toggle (odds board, pattern pages, playbook): links, server-rendered */
.htog { display: inline-flex; gap: 4px; align-items: center; }
.htog a, .htog span { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; padding: 3px 8px;
  border: 1px solid var(--line2); border-radius: 2px; color: var(--ink2); text-decoration: none; }
.htog a:hover { color: var(--ink); border-color: var(--ink3); }
.htog .on { color: var(--k-board); border-color: var(--k-board-dim); background: rgba(255,215,94,.06); }
.htog .off { color: var(--ink4); border-style: dashed; }

/* live-feel: since counters, flash pop-in, freshness line */
.sincebar { display: flex; flex-wrap: wrap; gap: 14px; align-items: baseline; margin: 8px 0 0; }
.sincebar .since { font-family: var(--mono); font-size: 11px; color: var(--ink2); }
.sincebar .since b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.sincebar .since .sdot { margin-right: 5px; }
.daycount { font-family: var(--mono); font-size: 11px; color: var(--ink2); }
.daycount b { color: var(--blue); }
.daycount b.t-bad { color: var(--red); }
.freshline { color: var(--ink3); }
.frow.flashin, .tape-i.flashin { animation: flashin 1.6s ease-out; }
@keyframes flashin { 0% { background: rgba(255,215,94,.18); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .frow.flashin, .tape-i.flashin { animation: none; } }
html.motion .fmod-b .frow { opacity: 0; transform: translateY(5px); transition: opacity .4s ease, transform .4s ease; transition-delay: var(--rvd, 0ms); }
html.motion .fmod.in .frow, html.motion .fmod-b .frow.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.motion .fmod-b .frow { opacity: 1; transform: none; } }

/* streak chips + graduation progress */
.streakc { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; }
.gradbar { margin: 10px 0 2px; max-width: 420px; }
.gradbar .gb-track { height: 8px; border-radius: 4px; background: var(--rule-2); overflow: hidden; }
.gradbar .gb-track i { display: block; height: 100%; background: var(--k-board); border-radius: 4px; }
.gradbar .gb-l { font-family: var(--mono); font-size: 10px; color: var(--ink3); margin-top: 4px; letter-spacing: .05em; }

/* MY DESK score chip */
.md-sc { font-family: var(--mono); font-size: 10px; color: var(--ink2); border-left: 1px solid var(--line2); padding-left: 8px; }
.md-sc b { color: var(--k-board); font-weight: 600; }
.md-sc .up { color: var(--mint); } .md-sc .dn { color: var(--red); }

/* ================================================================ HOVER LAYER (read 2 pass) ====
   One shared tooltip for every SVG device + the candle crosshair. Pure paint: facts live in the
   markup (<title>, tables); without JS nothing is lost. Reduced motion: no transitions anyway. */
.tipbox { position: fixed; z-index: 220; max-width: min(320px, calc(100vw - 16px)); overflow-wrap: break-word; pointer-events: none;
  background: var(--bg2); border: 1px solid var(--line2); border-radius: 3px; padding: 7px 10px;
  font-size: 10.5px; line-height: 1.55; color: var(--ink2); letter-spacing: .02em;
  box-shadow: 0 10px 30px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.3); }
.tipbox b { display: block; color: var(--ink); font-weight: 600; letter-spacing: .06em; margin-bottom: 1px; }
.tipbox i { display: block; font-style: normal; }
.tipbox .dim { color: var(--ink4); }
.tipbox .tp-good { color: var(--mint); } .tipbox .tp-bad { color: var(--red); } .tipbox .tp-ev { color: var(--k-cat); }
.xhair { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ink3); opacity: .55;
  pointer-events: none; z-index: 6; }
svg[data-hover] { touch-action: pan-y; cursor: crosshair; }
.spk-hdot { fill: var(--blue); stroke: var(--bg0); stroke-width: 1; }

/* ================================================================ THE FAN ====================
   Outcome fan: quartile bands + median path of the last N measured cases. Tones are the measured
   green/red only; every label says "past cases, not a projection". */
.fan { display: block; }
.fan-big { border: 1px solid var(--line2); border-radius: 4px; background: var(--bg1); }
.fan-mini { height: 60px; width: auto; max-width: 100%; }
.fan-t { font-family: var(--mono); font-size: 11px; fill: var(--ink2); letter-spacing: .18em; text-transform: uppercase; }
.fan-l { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; }
.fan-good { fill: var(--mint); } .fan-bad { fill: var(--red); }
.fan-cap { display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-top: 7px; }
.fan-cap span { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink4); }
.fanpanel { margin: var(--s3) 0; }
.pbk-fan { margin: 8px 0 2px; }
.pbk-fan .fan-mini, .sl-fan .fan-mini { width: 100%; }
.sl-fan { flex-basis: 100%; margin-top: 4px; }

/* ================================================================ TOKEN LOGOS =================
   Real logos hotlinked by paprika id, layered over the monogram: a 404 or blocked host paints
   nothing (empty alt) and the house monogram shows through. */
.tkl { position: relative; display: inline-flex; flex: 0 0 auto; vertical-align: middle; }
.tkl .av { display: block; }
.tkl .tklimg { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: contain; }
.tkl-hero { box-shadow: 0 0 0 1px var(--line2), 0 0 24px rgba(79,140,255,.07); border-radius: 6px; }
.ticker .tkl, .ticker .av { width: 14px; height: 14px; margin: 0 5px 0 0; }
.mdlogo { width: 14px; height: 14px; border-radius: 50%; vertical-align: -2px; margin-right: 4px; }

/* ================================================================ LIVING CALENDAR ============
   Today glows, event dots pulse in their kind color, day cells lift on hover (tooltip via the
   shared tipbox), empty days recede so busy days pop, the 30-day slate carries a NOW line and
   row lift, the weekday header sticks. Reduced motion: no pulse, everything else intact. */
.cal-h { position: sticky; top: 0; z-index: 4; }
.cd { transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.cd:not(.has):not(.tdy):not(.off) { opacity: .4; background: var(--bg1); }
.cd.off { opacity: .22; }
.cd.has { background: var(--bg1); }
.cd.has:hover, .cd.has:focus-visible { transform: translateY(-2px); background: var(--bg2);
  box-shadow: 0 6px 20px rgba(0,0,0,.45), inset 0 0 0 1px var(--line2); z-index: 3; position: relative; cursor: pointer; }
.cd.tdy { box-shadow: inset 0 0 0 1px var(--blue), 0 0 18px rgba(79,140,255,.14); background: rgba(79,140,255,.06); opacity: 1; }
.cd.tdy .cd-dom { color: var(--blue); font-weight: 700; }
.cd-now { color: var(--bg0); background: var(--blue); padding: 1px 4px; border-radius: 2px; font-weight: 700; letter-spacing: .18em; }
.evdot { width: 5px; height: 5px; border-radius: 50%; flex: 0 0 auto; background: var(--ink3); }
.cale.ev-unlock .evdot { background: var(--k-cat); }
.cale.ev-listing .evdot, .cale.ev-futures_listing .evdot { background: var(--k-list); }
.cale.ev-delisting .evdot, .cale.ev-hack .evdot { background: var(--red); }
.cale.ev-raise .evdot { background: var(--cyan); }
.motion .evdot { animation: evpulse 2.2s ease-in-out infinite; }
.motion .cale.ev-listing .evdot, .motion .cale.ev-futures_listing .evdot { animation-delay: .4s; }
.motion .cale.ev-delisting .evdot, .motion .cale.ev-hack .evdot { animation-delay: .8s; }
@keyframes evpulse { 0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(1.4); } }
@media (prefers-reduced-motion: reduce) { .evdot { animation: none !important; } }
/* 30-day slate: NOW line + row lift + odds chip brighten */
.slate-now td { padding: 3px 10px; border-top: 1px solid var(--blue-dim); border-bottom: 1px solid var(--blue-dim);
  background: rgba(79,140,255,.05); color: var(--blue); font-size: 9px; letter-spacing: .24em; text-transform: uppercase; }
.slate .slrow30 { transition: background .12s ease, box-shadow .12s ease; }
.slate .slrow30:hover { background: var(--bg2); box-shadow: inset 2px 0 0 var(--blue-dim); }
.slate .slrow30 .oddsc { transition: border-color .12s ease, color .12s ease, background .12s ease; }
.slate .slrow30:hover .oddsc { border-color: var(--blue-dim); color: var(--ink); background: var(--bg3); }
/* month strip chips with counts */
.calmonths { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mchip { text-decoration: none; }
.mchip b { color: var(--blue); margin-left: 3px; }
.mchip.here { border-color: var(--blue-dim); color: var(--blue); }
.mchip.here b { color: var(--blue); }

/* ================================================================ SLATE TOP-3 STRIP (home) ==== */
.sl3 { margin: var(--s4) 0 var(--s3); border: 1px solid var(--line2); border-radius: 4px; background: var(--bg1); padding: 10px 12px; }
.sl3-t { margin: 0 0 8px; font-size: 10px; letter-spacing: .2em; color: var(--k-board, var(--ink2)); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.sl3-t .dim { letter-spacing: .08em; text-transform: none; color: var(--ink4); }
.sl3-m { margin-left: auto; color: var(--blue); letter-spacing: .08em; }
.sl3-row { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 8px; }
.sl3-c { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line2); border-radius: 3px; background: var(--bg2);
  padding: 7px 9px; text-decoration: none; transition: border-color .12s ease, transform .12s ease; min-width: 0; }
.sl3-c:hover { border-color: var(--blue-dim); transform: translateY(-1px); }
.sl3-c.sl3-w:hover { border-color: var(--red-dim); }
.sl3-n { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.sl3-n b { font-family: var(--mono); font-size: 12px; color: var(--ink); letter-spacing: .04em; }
.sl3-n small { font-family: var(--mono); font-size: 8.5px; color: var(--ink3); letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl3-c .sring { flex: 0 0 auto; }
.deskmeta { margin: var(--s5) 0; }
@media (max-width: 1000px) { .sl3-row { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 620px) { .sl3-row { grid-template-columns: repeat(2, minmax(0,1fr)); } .sl3-c .sring { display: none; } }

/* ============================================================================================
   PREDICTION FIRST (Oct 1 rebuild). Every page leads with what the site does: the chance a coin
   is higher, the typical move, the likely range — drawn as a cone to the right of TODAY. Record
   pages split into three bands: 1 the prediction · 2 why we think this · 3 full details.
   ============================================================================================ */
:root { --ribh: 0px; --mast-h: 58px; }

/* ---- DEMO DATA ribbon: thin, always visible, never mistaken for real data ---- */
body.is-demo { --ribh: 22px; }
.demo-rib { position: sticky; top: 0; z-index: 41; height: 22px; line-height: 22px; text-align: center; font-size: 10px;
  letter-spacing: .16em; font-weight: 700; color: #1A1206; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 8px;
  background: #E9A445; }
body.is-demo .mast { top: var(--ribh); }

/* ---- token identity line: logo · name · price · 24h, one compact row on the room itself, flush under the crumb bar
   and running into the sticky band nav ---- */
.tid { position: relative; isolation: isolate; margin: calc(-1 * var(--s5)) 0 0; padding: 20px 0 14px; }
.tid-row { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.tid h1 { font-size: 30px; line-height: 1.1; margin: 0; }
.tid h1 .sym { font-size: 20px; }
.tid-px { font-size: 24px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.tid-ch { font-size: 14px; font-weight: 700; display: inline-flex; align-items: baseline; gap: 5px; }
.tid-ch em { font-style: normal; font-size: 10px; letter-spacing: .14em; color: var(--ink3); font-weight: 400; }
.tid-meta { font-size: 11px; color: var(--ink3); letter-spacing: .06em; }
.tid .starhost { margin-left: auto; }
@media (max-width: 640px) { .tid h1 { font-size: 24px; } .tid-px { font-size: 20px; } .tid-meta { width: 100%; } }

/* ---- the three bands: three depths of black, full-bleed (box-shadow trick, no layout change), each opened by a white
   hairline and shadowed by the band above. Each band carries its own surface ramp (--bg1..3, lines), so every card inside
   sits in its shade.
   1 THE PREDICTION = the stage: the room itself under a soft spotlight, the prediction on a raised console
   2 WHY WE THINK THIS = a step up out of the dark
   3 FULL DETAILS = a step up again ---- */
.band { position: relative; isolation: isolate; --bandc: var(--blue); --bandbg: var(--b1-bg);
  --bandln: linear-gradient(90deg, rgba(255,255,255,0), var(--hair) 10%, var(--hair) 90%, rgba(255,255,255,0));
  --bandtint: rgba(79,140,255,.10); --bandlayer: none;
  padding: 24px 0 36px; margin: 0; background: var(--bandbg); box-shadow: 0 0 0 100vmax var(--bandbg); clip-path: inset(0 -100vmax); }
.band { border-top: 1px solid transparent; border-image: var(--bandln) 1 / 1px 0 0 0 / 0 100vmax; }
.band::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  background: var(--bandlayer); pointer-events: none; }
.band-1 { --bandc: var(--blue); --bandbg: transparent;
  --bandlayer: radial-gradient(1100px 520px at 50% 60px, rgba(140,170,255,.075), transparent 70%); }
.band-2 { --bandc: var(--ocean); --bandbg: var(--b2-bg); --bandtint: rgba(91,184,242,.10);
  --bg1: #0E1015; --bg2: #12151B; --bg3: #171B22; --line: #1D2129; --line2: #292F39; }
.band-3 { --bandc: var(--slate); --bandbg: var(--b3-bg); --bandtint: rgba(169,184,204,.10);
  --bg0: #0B0D10; --bg1: #111318; --bg2: #15181E; --bg3: #1A1E25; --line: #20242C; --line2: #2C323C;
  padding-top: 28px; }
.band-2, .band-3 { --bandlayer: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0) 26px),
  radial-gradient(1000px 300px at 50% 0, rgba(255,255,255,.022), transparent 70%); }
.band + .band { margin-top: 0; }
.band-head { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin: 0 0 18px; }
/* the section number badge: a bevelled tile outlined in the band's own colour */
.band-n { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px;
  font-family: var(--mono); font-size: 19px; font-weight: 800; line-height: 1; color: var(--bandc); letter-spacing: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.01)); border: 1px solid var(--bandc);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 8px 18px -8px rgba(0,0,0,.95); }
.band-t { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--bandc); margin: 0; }
.band-s { font-size: 11px; color: var(--ink3); letter-spacing: .04em; }
.band-head .hz { margin-left: auto; }
@media (max-width: 640px) { .band-n { width: 34px; height: 34px; font-size: 16px; border-radius: 9px; } .band-head .hz { margin-left: 0; } }

/* sticky mini-nav naming the three bands: the same frosted black as the header, one hairline below */
.bandnav { position: sticky; top: calc(var(--mast-h) + var(--ribh)); z-index: 30; display: flex; gap: 6px; margin: 0;
  padding: 8px 0; background: var(--glass); box-shadow: 0 0 0 100vmax var(--glass); clip-path: inset(0 -100vmax);
  border-bottom: 1px solid transparent; border-image: linear-gradient(var(--hair), var(--hair)) 0 0 1 0 / 0 0 1px 0 / 0 100vmax;
  backdrop-filter: blur(14px) saturate(115%); -webkit-backdrop-filter: blur(14px) saturate(115%);
  overflow-x: auto; scrollbar-width: none; }
.bandnav::-webkit-scrollbar { display: none; }
.bandnav a { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: 999px; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); text-decoration: none; white-space: nowrap; border: 1px solid transparent; }
.bandnav a b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--line2); font-size: 10.5px; color: var(--ink2); }
.bandnav a:hover { color: var(--ink); }
.bandnav .bnv-s { display: none; }
.bandnav a.on, .bandnav a:focus-visible { color: var(--ink); border-color: rgba(79,140,255,.35); background: rgba(79,140,255,.10); }
.bandnav a[data-band="prediction"] b, .bandnav a[data-band="outlook"] b { border-color: rgba(79,140,255,.5); color: var(--blue); }
.bandnav a[data-band="why"] b { border-color: var(--ocean-dim); color: var(--ocean); }
.bandnav a[data-band="details"] b { border-color: var(--slate-dim); color: var(--slate); }
.bandnav a[data-band="prediction"].on b, .bandnav a[data-band="outlook"].on b { border-color: var(--blue); color: var(--blue); box-shadow: 0 0 10px rgba(79,140,255,.5); }
.bandnav a[data-band="why"].on b { border-color: var(--ocean); color: var(--ocean); box-shadow: 0 0 10px rgba(91,184,242,.4); }
.bandnav a[data-band="details"].on b { border-color: var(--slate); color: var(--ink); }
html { scroll-padding-top: calc(var(--mast-h) + var(--ribh) + 52px); }

/* horizon toggle: 1 day · 7 days · 30 days */
.hz { display: inline-flex; gap: 2px; border: 1px solid rgba(255,255,255,.07); border-radius: 999px; padding: 3px; background: rgba(0,0,0,.45);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.7); }
.hz a, .hz span { padding: 6px 14px; border-radius: 999px; font-size: 11.5px; letter-spacing: .06em; text-decoration: none; color: var(--ink2); white-space: nowrap; }
.hz a:hover { color: var(--ink); background: var(--bg3); }
.hz a.on { background: var(--ink); color: var(--bg0); font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.7), inset 0 -1px 0 rgba(0,0,0,.18); }
.hz span.off { color: var(--ink4); }

/* ---- band 1: the headline + the future chart ---- */
.pz-grid { display: grid; grid-template-columns: minmax(270px, 330px) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 980px) { .pz-grid { grid-template-columns: 1fr; gap: 14px; } }
.phead { min-width: 0; }
.ph-when { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink2); margin: 2px 0 8px; font-weight: 700; }
.ph-big { margin: 0; line-height: 1; letter-spacing: 0; }
.ph-n { display: block; font-family: var(--sans); font-size: clamp(68px, 9vw, 104px); font-weight: 800; letter-spacing: -.045em; line-height: .86;
  font-variant-numeric: proportional-nums; }
.ph-n.t-good { color: var(--mint); text-shadow: 0 0 24px rgba(56,242,164,.16); }
.ph-n.t-bad { color: var(--red); text-shadow: 0 0 24px rgba(255,77,94,.14); }
.ph-n.t-flat { color: var(--amber); text-shadow: 0 0 24px rgba(255,180,77,.12); }
.pz-none .ph-n { font-size: clamp(36px, 5vw, 52px); letter-spacing: -.02em; }
.ph-w { display: block; font-size: 24px; font-weight: 700; letter-spacing: -.015em; color: var(--ink); margin-top: 8px; line-height: 1.2; }
.ph-badge { margin: 12px 0 0; }
.ph-stats { margin: 16px 0 12px; display: grid; gap: 0; }
.ph-stats div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line2); }
.ph-stats div:last-child { border-bottom: 1px solid var(--line2); }
.ph-stats dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); white-space: nowrap; }
.ph-stats dd { margin: 0; font-family: var(--mono); font-size: 19px; font-weight: 700; text-align: right; color: var(--ink); font-variant-numeric: proportional-nums; }
.ph-stats dd small { display: block; font-size: 11.5px; font-weight: 400; color: var(--ink2); margin-top: 2px; }
.ph-basis { font-size: 13px; line-height: 1.55; color: var(--ink2); margin: 0 0 8px; }
.ph-basis b { color: var(--ink); font-weight: 600; }
.ph-basis a { color: var(--cyan); text-decoration-color: var(--cyan-dim); }
.pdisc { font-size: 10.5px; color: var(--ink3); letter-spacing: .04em; margin: 6px 0 0; }

.sbadge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .14em;
  padding: 5px 10px; border-radius: 3px; border: 1px solid var(--line2); white-space: nowrap; line-height: 1.2; }
.sb-up { color: var(--mint); border-color: var(--mint-dim); background: rgba(56,242,164,.08); }
.sb-down { color: var(--red); border-color: var(--red-dim); background: rgba(255,77,94,.08); }
.sb-flat { color: var(--amber); border-color: var(--amber-dim); background: rgba(255,180,77,.07); }
.sb-strong.sb-up { background: var(--mint); color: #03130c; border-color: var(--mint); box-shadow: 0 0 22px rgba(56,242,164,.25); }
.sb-strong.sb-down { background: var(--red); color: #1c0508; border-color: var(--red); box-shadow: 0 0 22px rgba(255,77,94,.22); }

/* band 1's chart column; the text of the old future chart (viz.future_chart) */
.pz-chart { min-width: 0; }
.fc text { font-family: var(--mono); }
.fc-y { fill: var(--ink2); } .fc-y0 { fill: var(--ink); font-weight: 700; } .fc-yp { fill: var(--ink3); }
.fc-x { fill: var(--ink2); } .fc-xt { fill: var(--ink); font-weight: 700; } .fc-xd { fill: var(--ink3); }
.fc-today { fill: var(--ink); font-weight: 800; letter-spacing: .14em; }
.fc-reg { fill: var(--ink3); letter-spacing: .16em; }
.fc-sl { fill: var(--ink3); letter-spacing: .14em; font-weight: 700; }
.fc-sv { fill: var(--ink); font-weight: 700; }
.fc-sp { fill: var(--ink2); font-weight: 400; }
.fc-pinl { fill: var(--k-cat); font-weight: 700; }
.fc .fc-pin { cursor: help; }
.fc-hdot { fill: var(--ink); stroke: var(--bg1); stroke-width: 2; pointer-events: none; }
.fc-leg { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 10.5px; color: var(--ink3); margin: 8px 0 0; }
.fc-leg span { display: inline-flex; align-items: center; gap: 6px; }
.lg { display: inline-block; width: 16px; height: 10px; border-radius: 2px; }

/* how things can play out: bad / likely / good as price levels */
.scen { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin: 12px 0 0; }
.sc { border: 1px solid var(--line2); border-radius: 4px; padding: 9px 12px; background: var(--bg1); display: flex; flex-direction: column; gap: 1px; min-width: 0;
  background-image: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 60%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 22px -14px rgba(0,0,0,.95); }
.sc-k { font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink3); font-weight: 700; }
.sc b { font-size: 18px; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: proportional-nums; }
.sc-p { font-size: 12px; font-weight: 700; }
.sc small { font-size: 10.5px; color: var(--ink3); }
.sc-bad { border-top: 2px solid var(--red); } .sc-mid { border-top: 2px solid var(--ink2); } .sc-good { border-top: 2px solid var(--mint); }
@media (max-width: 420px) { .sc { padding: 8px; } .sc b { font-size: 15px; } .sc small { display: none; } }

.b1-setups { margin-top: 22px; }
.mini-h { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink2); font-weight: 700; margin: 0 0 10px; }
.quiet { font-size: 12px; color: var(--ink3); margin: 0; }
.quiet a { color: var(--ink2); }
.pz-past { margin-top: 14px; }
.pz-past svg { width: 100%; height: 140px; display: block; }

/* setups firing: colourful cards */
.setc-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.setc { display: block; text-decoration: none; color: var(--ink); border: 1px solid var(--line2); border-top: 3px solid var(--cyan); border-radius: 6px;
  padding: 14px 16px; background: linear-gradient(160deg, rgba(95,211,232,.10), rgba(95,211,232,.015) 60%), var(--bg2); }
.setc:hover { border-color: var(--line2); color: var(--ink); filter: brightness(1.08); }
.setc-held { border-top-color: var(--blue); background: linear-gradient(160deg, rgba(79,140,255,.13), rgba(79,140,255,.015) 60%), var(--bg2); }
.setc-faded { border-top-color: var(--amber); background: linear-gradient(160deg, rgba(255,180,77,.11), rgba(255,180,77,.015) 60%), var(--bg2); }
.setc-k { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); margin: 0 0 6px; display: flex; align-items: center; gap: 6px; }
.setc-k b { color: var(--ink); letter-spacing: .06em; }
.setc-n { font-size: 17px; font-weight: 800; margin: 0 0 6px; letter-spacing: -.01em; }
.setc-u { font-size: 13px; color: var(--ink2); line-height: 1.5; margin: 0 0 10px; }
.setc-st { font-size: 11px; color: var(--ink2); margin: 0 0 4px; }
.setc-w { font-size: 20px; font-weight: 800; color: var(--ink); margin-right: 4px; }
.setc-oos { font-size: 10.5px; color: var(--ink3); margin: 0; }
.setc-held .setc-oos { color: var(--blue); } .setc-faded .setc-oos { color: var(--amber); }

/* ---- band 2: why we think this ---- */
.b2-sec { margin: 0 0 26px; }
.b2-sec:last-child { margin-bottom: 0; }
.b2-h { font-size: 18px; font-weight: 800; margin: 0 0 12px; letter-spacing: -.01em; }
.drv { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
@media (max-width: 760px) { .drv { grid-template-columns: 1fr; } }
.drc { border: 1px solid var(--line2); border-left: 3px solid var(--ink3); border-radius: 4px; background: var(--bg2); padding: 14px 16px; min-width: 0; }
.drc-good { border-left-color: var(--mint); } .drc-bad { border-left-color: var(--red); }
.drc-t { display: flex; align-items: center; gap: 9px; margin: 0 0 6px; font-size: 16px; line-height: 1.3; }
.drc-t .ic { width: 16px; height: 16px; color: var(--cyan); flex: none; }
.drc-s { color: var(--ink2); font-size: 13.5px; line-height: 1.55; margin: 0 0 10px; }
.drc-bar { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; }
.drc-bar svg { max-width: 100%; }
.drc-l { font-size: 11px; color: var(--ink3); }
.evo { display: grid; gap: 8px; }
.evo-r { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line2); border-left: 3px solid var(--amber);
  border-radius: 4px; background: var(--bg2); text-decoration: none; color: var(--ink); min-width: 0; }
.evo-r:hover { background: var(--bg3); color: var(--ink); }
.evo-good { border-left-color: var(--mint); } .evo-bad { border-left-color: var(--red); }
.evo-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.evo-w { font-weight: 700; font-size: 14.5px; line-height: 1.35; }
.evo-o { color: var(--ink2); font-size: 13.5px; line-height: 1.45; }
.evo-m { color: var(--ink3); font-size: 11px; }
.evo-go { font-size: 10.5px; color: var(--ink3); white-space: nowrap; }
.evo-r .cdn { flex: none; }
@media (max-width: 640px) { .evo-go { display: none; } .evo-r { align-items: center; flex-wrap: wrap; gap: 8px 10px; } .evo-b { order: 3; flex-basis: 100%; } }
.trk-sum { font-size: 14px; color: var(--ink2); margin: 0 0 12px; line-height: 1.55; }
.trk-sum b { color: var(--ink); }
.trk { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 10px; }
@media (max-width: 900px) { .trk { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 480px) { .trk { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.trk-c { margin: 0; border: 1px solid var(--line2); border-radius: 4px; background: var(--bg2); padding: 8px 8px 6px; min-width: 0; }
.trk-c svg { display: block; width: 100%; height: auto; }
.trk-c figcaption { font-size: 10.5px; color: var(--ink2); line-height: 1.45; margin-top: 4px; }
.trk-c figcaption b { color: var(--ink); }
.trk-v { display: block; font-weight: 700; letter-spacing: .04em; }
.trk-ok { color: var(--mint); } .trk-no { color: var(--red); } .trk-cf { color: var(--amber); }
.trk-note { font-size: 10.5px; color: var(--ink3); margin: 10px 0 0; line-height: 1.6; }
.trk-note b { color: var(--ink2); }
.rs-row { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 860px) { .rs-row { grid-template-columns: 1fr; } }
.rs-risk .vrow { margin: 0; height: 100%; }
.rs-risk .vcard { height: 100%; }
.scc { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line2); border-top: 2px solid var(--k-board); border-radius: 4px;
  background: var(--bg2); padding: 16px 18px; text-decoration: none; color: var(--ink); }
.scc:hover { background: var(--bg3); color: var(--ink); }
.scc-k { font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink3); margin: 0; font-weight: 700; }
.scc-r .sring { display: block; }
.scc-v { margin: 0; font-size: 14px; color: var(--ink2); } .scc-v b { font-size: 22px; color: var(--ink); margin-right: 4px; }
.scc-s { margin: 0; font-size: 12.5px; color: var(--ink2); line-height: 1.5; } .scc-s .mono { color: var(--k-board); font-size: 10.5px; }
.kf { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 28px; border-top: 1px solid var(--line2); }
@media (max-width: 760px) { .kf { grid-template-columns: 1fr; } }
.kf-i { display: grid; grid-template-columns: 18px minmax(0, 150px) auto minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 11px 2px;
  border-bottom: 1px solid var(--line2); text-decoration: none; color: var(--ink); min-width: 0; }
.kf-i:hover { background: rgba(95,211,232,.04); color: var(--ink); }
.kf-i .ic { width: 14px; height: 14px; color: var(--cyan); align-self: center; }
.kf-k { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kf-v { font-size: 15px; font-weight: 700; white-space: nowrap; }
.kf-s { font-size: 12px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kf-s::after { content: " ↓"; color: var(--ink4); }

/* ---- band 3: the full record, quieter ---- */
.band-3 .b3-hero .px { font-size: 40px; text-shadow: none; }
.band-3 .hero-chips { margin: 0 0 6px; }
.band-3 .pricerow { margin: 10px 0 14px; }
.band-3 .ffdiv { display: none; }

/* ---- list rows: logo · name · chance · typical · mini cone · strength ---- */
.prow { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); min-width: 0; }
.prow:last-child { border-bottom: 0; }
.prow:hover { background: rgba(255,255,255,.025); color: var(--ink); }
.pr-i { flex: 0 0 18px; font-size: 11px; color: var(--ink3); text-align: right; }
.prow .tkl, .prow .av { flex: none; }
.pr-n { flex: 1 1 110px; min-width: 0; line-height: 1.25; }
.pr-n b { display: block; font-size: 14px; letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-n small { display: block; color: var(--ink3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-c { flex: 0 0 96px; display: flex; flex-direction: column; gap: 5px; }
.pr-cn { font-size: 13px; font-weight: 700; white-space: nowrap; }
.pr-t { flex: 0 0 64px; text-align: right; font-size: 12.5px; font-weight: 600; }
.pr-t em { display: block; font-style: normal; font-size: 9px; letter-spacing: .14em; color: var(--ink3); text-transform: uppercase; font-weight: 400; }
.pr-s { flex: 0 0 104px; display: flex; }
.pr-s svg { width: 104px; height: 34px; }
.pr-b { flex: 0 0 auto; }
.pr-b .sbadge { font-size: 10px; padding: 4px 7px; letter-spacing: .1em; }
@media (max-width: 1100px) and (min-width: 981px) { .mv-cols .pr-s { display: none; } }
@media (max-width: 600px) { .pr-s { display: none; } .pr-t { flex-basis: 54px; } .pr-c { flex-basis: 84px; } .prow { gap: 10px; padding: 10px 12px; } .pr-n b { font-size: 13px; } }
/* narrow phones: the ticker needs the room more than the logo does, and the strength badge stays */
@media (max-width: 420px) { .prow .tkl, .prow .av, .prow .pr-i, .prow .bwin { display: none; } .pr-b .sbadge { padding: 4px 6px; letter-spacing: .06em; } }

/* ---- home ---- */
.homehero { padding-bottom: 6px; }
.homehero h1 { font-size: clamp(34px, 5.6vw, 64px); }
.homehero .dek { font-size: 15px; max-width: 64ch; color: var(--ink2); }
.homehero .dek b { color: var(--ink); }
.hh-stats { margin: 14px 0 0; font-size: 11.5px; color: var(--ink3); letter-spacing: .04em; }
.hh-stats b { color: var(--ink); }
.hh-stats a { color: var(--cyan); }
.hm { margin: 26px 0 0; }
.hm-head { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin: 0 0 12px; }
.hm-head h2 { font-size: 22px; margin: 0; letter-spacing: -.015em; }
.hm-head .hz { margin-left: auto; }
.hm-more { margin-left: auto; font-size: 11px; color: var(--ink2); letter-spacing: .06em; }
.mv-cols { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
@media (max-width: 980px) { .mv-cols { grid-template-columns: 1fr; } }
.mv-col { border: 1px solid var(--line2); border-radius: 6px; background: var(--bg2); overflow: hidden; min-width: 0; }
.mv-up { border-top: 3px solid var(--mint); } .mv-down { border-top: 3px solid var(--red); }
.mv-t { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding: 12px 14px; margin: 0;
  border-bottom: 1px solid var(--line); font-weight: 800; font-size: 15px; }
.mv-t .mono { font-size: 10.5px; font-weight: 400; letter-spacing: .04em; }
.mv-col .empty { margin: 14px; border: 0; padding: 0; line-height: 1.6; }
.hm-foot { font-size: 10.5px; color: var(--ink3); margin: 10px 0 0; line-height: 1.6; }
.hm-foot a, .hm-more { color: var(--cyan); }
.hm-two { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 18px; margin-top: 8px; align-items: start; }
@media (max-width: 980px) { .hm-two { grid-template-columns: 1fr; } }
.hm-side { display: grid; gap: 12px; margin-top: 26px; }
@media (max-width: 980px) { .hm-side { margin-top: 0; } }
.acct, .gyt { display: block; border: 1px solid var(--line2); border-radius: 6px; background: var(--bg2); padding: 16px 18px; text-decoration: none; color: var(--ink); }
.acct { border-top: 3px solid var(--cyan); }
.acct:hover, .gyt:hover { background: var(--bg3); color: var(--ink); }
.acct-k, .gyt-k { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink3); margin: 0 0 8px; font-weight: 700; }
.acct-v, .gyt-v { margin: 0 0 6px; font-size: 13px; color: var(--ink2); line-height: 1.4; }
.acct-v b, .gyt-v b { font-size: 26px; color: var(--ink); letter-spacing: -.02em; margin-right: 4px; font-variant-numeric: proportional-nums; }
.acct-n, .gyt-s { margin: 6px 0 0; font-size: 10.5px; color: var(--ink3); line-height: 1.6; }
.acct-static:hover { background: var(--bg2); }
.gyt { border-top: 3px solid var(--red); }
.gyt-v b { color: var(--red); }
.quietzone { opacity: .97; }

/* ---- /predictions ---- */
.phero h1 { font-size: clamp(28px, 4vw, 42px); }
.pfilt { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 8px; align-items: flex-start; }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fchips .fl { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink3); margin-right: 4px; min-width: 40px; }
.fchips a { font-size: 11px; padding: 5px 10px; border: 1px solid var(--line2); border-radius: 999px; text-decoration: none; color: var(--ink2); background: var(--bg1); }
.fchips a small { color: var(--ink3); margin-left: 2px; }
.fchips a.on { color: var(--bg0); background: var(--cyan); border-color: var(--cyan); font-weight: 700; }
.fchips a.on small { color: var(--bg0); }
.fchips .fclear { border-style: dashed; }
.pboard { margin-top: 18px; }
.cflip { margin-top: 14px; border: 1px solid var(--line2); border-radius: 6px; background: var(--bg2); }
.cflip .mv-t { border-bottom: 1px solid var(--line); }
.cf-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px; }
.cfc { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; padding: 4px 9px 4px 5px; border: 1px solid var(--line2); border-radius: 999px; text-decoration: none; color: var(--ink2); }
.cfc b { color: var(--ink); }
.pp-two { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin: 20px 0 8px; }
@media (max-width: 760px) { .pp-two { grid-template-columns: 1fr; } }
.ptable td .sbadge { font-size: 9.5px; padding: 3px 6px; }
[data-hide] { display: none !important; }

/* ---- /accuracy ---- */
.acchero h1 { font-size: clamp(30px, 4.4vw, 48px); }
.acchero .dek { font-size: 15.5px; max-width: 70ch; color: var(--ink2); }
.acchero .dek b { color: var(--ink); }
.demo-note { display: inline-block; font-size: 11px; color: #1b1205; background: var(--amber); border-radius: 3px; padding: 6px 10px; letter-spacing: .02em; }
.acc-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
@media (max-width: 960px) { .acc-cards { grid-template-columns: 1fr; } }
.accc { border: 1px solid var(--line2); border-top: 3px solid var(--cyan); border-radius: 6px; background: var(--bg2); padding: 16px 18px; min-width: 0; }
.accc-h { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink3); margin: 0 0 6px; font-weight: 700; }
.accc-big { margin: 0; font-size: 15px; color: var(--ink2); } .accc-big b { font-size: 44px; color: var(--ink); letter-spacing: -.03em; font-variant-numeric: proportional-nums; margin-right: 4px; }
.accc-s { font-size: 12px; color: var(--ink3); margin: 2px 0 12px; }
.accc-cov p { font-size: 11.5px; color: var(--ink2); margin: 8px 0 3px; } .accc-cov p b { color: var(--ink); }
.accc-cov svg { display: block; }
.accc-e { font-size: 12.5px; color: var(--ink2); margin: 12px 0 0; line-height: 1.5; padding: 8px 10px; border-radius: 4px; background: var(--bg1); border-left: 3px solid var(--ink3); }
.accc-good { border-left-color: var(--mint); } .accc-bad { border-left-color: var(--red); } .accc-flat { border-left-color: var(--amber); }
.accc-e b { color: var(--ink); }
.accc-n { font-size: 10.5px; color: var(--ink3); margin: 8px 0 0; }
.acc-lede { color: var(--ink2); font-size: 14px; max-width: 80ch; margin: 0 0 14px; line-height: 1.6; }
.rel-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
@media (max-width: 960px) { .rel-grid { grid-template-columns: 1fr; } }
.relf { margin: 0; border: 1px solid var(--line2); border-radius: 6px; background: var(--bg2); padding: 10px 12px 6px; min-width: 0; }
.relf figcaption { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); margin: 0 0 6px; }
.rel text { font-family: var(--mono); }
.rel-n { fill: var(--ink); opacity: .75; } .rel-base { fill: var(--blue); }
.acc-two { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
@media (max-width: 760px) { .acc-two { grid-template-columns: 1fr; } }
.caveats li { margin: 0 0 8px; line-height: 1.6; }

/* ---- /setups ---- */
.sethero h1 { font-size: clamp(28px, 4vw, 44px); }
.setlist { display: grid; gap: 16px; }
.setx { border: 1px solid var(--line2); border-top: 3px solid var(--cyan); border-radius: 6px; padding: 18px 20px; background: var(--bg2); }
.setx-held { border-top-color: var(--blue); background: linear-gradient(170deg, rgba(79,140,255,.07), transparent 45%), var(--bg2); }
.setx-faded { border-top-color: var(--amber); background: linear-gradient(170deg, rgba(255,180,77,.06), transparent 45%), var(--bg2); }
.setx-h { display: flex; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; }
.setx-h h2 { margin: 0; font-size: 22px; }
.setx-oos { font-size: 11px; letter-spacing: .04em; color: var(--ink2); padding: 4px 9px; border: 1px solid var(--line2); border-radius: 999px; }
.setx-held .setx-oos { color: var(--blue); border-color: var(--blue-dim); } .setx-faded .setx-oos { color: var(--amber); border-color: var(--amber-dim); }
.setx-d { color: var(--ink2); font-size: 14px; margin: 10px 0 4px; max-width: 80ch; }
.setx-u { color: var(--ink); font-size: 15px; margin: 0 0 14px; max-width: 80ch; font-weight: 600; }
.setx-st { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 8px; margin: 0 0 14px; }
@media (max-width: 860px) { .setx-st { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.setx-st div { border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; background: var(--bg1); display: flex; flex-direction: column; min-width: 0; }
.setx-st span { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }
.setx-st b { font-size: 20px; letter-spacing: -.02em; font-variant-numeric: proportional-nums; }
.setx-st small { font-size: 10.5px; color: var(--ink3); }
.setx-tk { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); margin: 0 0 8px; }
.setx-hits { display: flex; flex-wrap: wrap; gap: 8px; }
.seth { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid var(--line2); border-radius: 999px; text-decoration: none; color: var(--ink); background: var(--bg1); font-size: 13px; }
.seth:hover { border-color: var(--cyan-dim); color: var(--ink); }
.seth .mono { font-size: 11px; }

/* the shared tooltip: the future chart's readout */
.tipbox .tp-big { font-size: 13px; color: var(--ink); }
.tipbox .tp-flat { color: var(--amber); }
[data-h][hidden], .pz[hidden] { display: none !important; }

/* headline split: desktop = chance + details left, chart right; phones = chance, chart, details */
.pz-grid { grid-template-areas: "top chart" "more chart"; grid-template-rows: auto 1fr; }
.ph-top { grid-area: top; min-width: 0; }
.ph-more { grid-area: more; min-width: 0; }
.pz-chart { grid-area: chart; }
@media (max-width: 980px) {
  .pz-grid { grid-template-areas: "top" "chart" "more"; grid-template-rows: auto; }
}
/* the chart's own end labels carry bad / likely / good on wide screens; the tiles are the phone + table twin */
@media (min-width: 981px) { .pz .scen { display: none; } }

/* where to trade: one compact card per venue */
.b1-trade { margin-top: 20px; }
.wtt { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 10px; }
.wtv { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--line2); border-radius: 6px; background: var(--bg2);
  text-decoration: none; color: var(--ink); min-width: 0; }
a.wtv:hover { border-color: var(--blue-dim); background: var(--bg3); color: var(--ink); }
.wtv-n { display: flex; align-items: center; gap: 0; font-size: 15px; min-width: 0; }
.wtv-n .vdot { width: 9px; height: 9px; margin-right: 8px; }
.wtv-n b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wtv-n small { margin-left: auto; font-size: 9px; letter-spacing: .1em; color: var(--ink3); text-transform: uppercase; white-space: nowrap; padding-left: 6px; }
.wtv-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.wtc { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; border: 1px solid var(--line2); color: var(--ink2); }
.wtc-spot { color: var(--blue); border-color: var(--blue-dim); }
.wtc-perp { color: var(--indigo); border-color: var(--indigo-dim); }
.wtc-dex { color: var(--cyan); border-color: var(--cyan-dim); }
.wtc-lev { color: var(--bg0); background: var(--blue); border-color: var(--blue); font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.wtv-share { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--ink2); }
.wtv-share svg { width: 100%; }
.wtv-since { font-size: 10.5px; color: var(--ink3); }
.wtv-go { font-size: 10.5px; color: var(--blue); margin-top: auto; }
.wtt-note { font-size: 10.5px; color: var(--ink3); margin: 8px 0 0; }
#trade-planner:empty { display: none; }

/* phones: one compact identity block, a ribbon that fits */
@media (max-width: 640px) {
  .demo-rib { font-size: 9px; letter-spacing: .03em; }
  .tid { padding: 14px 0 10px; }
  .tid-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo name px" "logo meta star"; gap: 2px 10px; align-items: center; }
  .tid-row > .tkl, .tid-row > .glyph, .tid-row > .av { grid-area: logo; }
  .tid h1 { grid-area: name; font-size: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tid h1 .sym { font-size: 15px; }
  .tid-px { grid-area: px; font-size: 18px; text-align: right; }
  .tid-ch { grid-area: star; justify-self: end; font-size: 12.5px; }
  .tid-meta { grid-area: meta; width: auto; font-size: 10.5px; }
  .tid .starhost { display: none; }
  .band { padding: 16px 0 26px; }
  .band-head { margin-bottom: 12px; gap: 8px 10px; }
  .band-1 .band-s { display: none; }
  .bandnav { padding: 6px 0; }
  .bandnav a { font-size: 10px; padding: 4px 9px 4px 5px; }
  .bandnav .bnv-l { display: none; }
  .bandnav .bnv-s { display: inline; }
  .ph-n { font-size: 66px; }
  .ph-w { font-size: 20px; margin-top: 4px; }
  .ph-badge { margin-top: 8px; }
}

/* phones: venues become one swipeable strip instead of a tall stack */
@media (max-width: 640px) {
  .wtt { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 6px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .wtv { flex: 0 0 168px; scroll-snap-align: start; padding: 10px 12px; gap: 5px; }
  .wtv-n { font-size: 14px; }
  .wtv-n small { display: none; }
  .b1-trade .mini-h .dim { display: none; }
}
.fc-n .fc-sl { letter-spacing: .02em; }
.pr-b { flex: 0 0 86px; display: flex; justify-content: flex-end; }
.homehero { padding-top: 10px; }
.homehero .kicker { margin-bottom: 8px; }
.homehero h1 { font-size: clamp(30px, 3.9vw, 48px); }
.homehero .dek { margin-top: 10px; }
.homehero .search-hero { margin-top: 14px; }
@media (max-width: 600px) { .pr-b { flex-basis: auto; } }
.mv-cols { align-items: start; }
.drv-lead { font-size: 13.5px; color: var(--ink2); margin: -4px 0 12px; max-width: 90ch; line-height: 1.55; }
.drv-lead b { color: var(--ink); }

/* record pages (exchange, person, launch, creator): the same three bands */
.tid-rec .tid-row h1, .tid-rec h1 { font-size: 30px; }
.tid-rec .eyebrow { margin-bottom: 6px; }
.rb1 { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 900px) { .rb1 { grid-template-columns: 1fr; gap: 16px; } }
.rb1-big .ph-n { font-size: clamp(54px, 7vw, 88px); }
.rb1-big .ph-w { font-size: 20px; }
.rb1-viz { min-width: 0; }
.rb1-viz .device { margin-top: 4px; }
.rb1-list { margin: 0 0 6px; }
.rb1-gh { margin-top: 16px; }
.lcal { display: grid; gap: 8px; }
.lcal-r { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(80px, 220px) 44px auto; align-items: center; gap: 10px; font-size: 13px; color: var(--ink2); }
.lcal-r svg { width: 100%; }
.lcal-k b { color: var(--ink); font-weight: 600; }
.lcal-v { font-weight: 700; text-align: right; }
.lcal-n { font-size: 10.5px; color: var(--ink3); white-space: nowrap; }
@media (max-width: 600px) { .lcal-r { grid-template-columns: 1fr 44px; } .lcal-r svg, .lcal-n { display: none; } }
.band-2 .wantedhero { margin-top: 0; }

/* ---- the trade planner (web/static/planner.js + calc.js) under the cone in band 1 ---- */
.pln { margin: 26px 0 4px; padding: 20px 22px 16px; border: 1px solid var(--line2); border-radius: 8px;
  background: linear-gradient(180deg, rgba(79,140,255,.045), rgba(79,140,255,0) 180px), var(--bg2); }
.pln-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.pln-t { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.015em; color: var(--ink); }
.pln-hz { margin: 0 0 0 auto; font-size: 10.5px; letter-spacing: .06em; color: var(--amber); border: 1px solid var(--amber-dim); border-radius: 999px; padding: 4px 10px; }
.pln-sub { margin: 6px 0 0; font-size: 13.5px; color: var(--ink2); max-width: 82ch; }
.pln-best { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 18px; padding: 10px 14px; border-left: 2px solid var(--blue);
  background: rgba(79,140,255,.06); border-radius: 0 6px 6px 0; font-size: 14px; line-height: 1.5; color: var(--ink); }
.pln-best .ic { flex: none; width: 16px; height: 16px; color: var(--blue); margin-top: 3px; }
.pln-ui { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 20px 32px; align-items: start; }
.pln-ui[hidden], .pln-heat[hidden] { display: none; }
.pln-in { margin: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pln-side { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pln-sd { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--line2); border-radius: 6px; background: var(--bg1); cursor: pointer; }
.pln-sd input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pln-sd b { font-size: 19px; font-weight: 800; color: var(--ink2); letter-spacing: -.01em; }
.pln-sd small { font-size: 11px; color: var(--ink3); }
.pln-sd:hover { border-color: var(--ink3); }
.pln-sd:focus-within { outline: 2px solid var(--ink3); outline-offset: 2px; }
.pln-long.on { border-color: var(--mint); background: rgba(56,242,164,.13); box-shadow: inset 0 0 0 1px var(--mint); }
.pln-long.on b { color: var(--mint); }
.pln-short.on { border-color: var(--red); background: rgba(255,77,94,.13); box-shadow: inset 0 0 0 1px var(--red); }
.pln-short.on b { color: var(--red); }
.pln-sd.on small { color: var(--ink2); }
.pln-fk { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0; }
.pln-fk label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }
.pln-fk output { font-family: var(--mono); font-size: 19px; font-weight: 700; color: var(--ink); }
/* the planner's sliders, drawn by hand so the leverage track can carry the risk zone (planner.js trk() sets --trk: the
   fill left of the thumb, red from the first leverage where more than 1 in 10 of these past trades were liquidated) */
.pln input[type=range] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 22px; margin: 6px 0 4px; background: transparent; cursor: pointer; }
.pln input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: var(--trk, rgba(255,255,255,.16)); }
.pln input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; box-sizing: border-box; width: 16px; height: 16px; margin-top: -5px; border-radius: 50%;
  background: #E9EEF7; border: 3px solid var(--blue); box-shadow: 0 0 0 3px rgba(6,7,10,.85); }
.pln input[type=range]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--trk, rgba(255,255,255,.16)); }
.pln input[type=range]::-moz-range-thumb { box-sizing: border-box; width: 16px; height: 16px; border-radius: 50%; background: #E9EEF7; border: 3px solid var(--blue); }
.pln input[type=range]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
.pln-zl { margin: 2px 0 0; font-size: 10.5px; color: var(--red); }
.pln-zl[hidden] { display: none; }
/* the money line under the tiles: the stake, the position it opens, the move on it, the fees, what is left */
.pln-cash { margin: 10px 0 0; padding: 9px 12px; border-radius: 9px; background: rgba(0,0,0,.3); box-shadow: inset 0 1px 3px rgba(0,0,0,.55);
  font-size: 13px; line-height: 1.5; color: var(--ink2); }
.pln-cash:empty { display: none; }
.pln-cash b { font-weight: 700; } .pln-cash b.t-good { color: var(--mint); } .pln-cash b.t-bad { color: var(--red); } .pln-cash b.t-flat { color: var(--amber); }
.pln-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 0; }
.pln-chips button { font: 600 11px var(--mono); color: var(--ink2); background: var(--bg1); border: 1px solid var(--line2); border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.pln-chips button:hover { color: var(--ink); border-color: var(--ink3); }
.pln-chips button.on { background: var(--ink); color: var(--bg0); border-color: var(--ink); }
.pln-note { font-size: 10.5px; color: var(--ink3); margin: 6px 0 0; }
.pln-opt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pln-opt label { display: flex; flex-direction: column; gap: 4px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); min-width: 0; }
.pln-u { display: flex; align-items: center; gap: 3px; border: 1px solid var(--line2); border-radius: 5px; background: var(--bg1); padding: 0 8px; font-size: 13px; letter-spacing: 0; color: var(--ink3); }
.pln-u:focus-within { border-color: var(--blue-dim); }
.pln-u input { width: 100%; min-width: 0; background: transparent; border: 0; color: var(--ink); font: 600 15px var(--mono); padding: 7px 0; outline: none; -moz-appearance: textfield; }
.pln-u input::-webkit-outer-spin-button, .pln-u input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pln-u input::placeholder { color: var(--ink4); }
.pln-optn { font-size: 10.5px; color: var(--ink3); margin: -6px 0 0; line-height: 1.5; }
.pln-out { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pln-warn { margin: 0; padding: 9px 12px; border: 1px solid var(--red); border-radius: 6px; background: rgba(255,77,94,.13); color: #FFC2C8; font-size: 13px; line-height: 1.5; }
.pln-warn[hidden], .pln-tpsl[hidden] { display: none; }
.pln-warn b { color: #fff; }
.pln-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pln-kpi { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px; border: 1px solid var(--line2); border-radius: 6px; background: var(--bg1); min-width: 0; }
.pln-kk { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); line-height: 1.4; min-height: 2.8em; }
.pln-kpi b { font-family: var(--sans); font-size: clamp(30px, 3.3vw, 42px); font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: proportional-nums; color: var(--ink); white-space: nowrap; }
.pln-kpi b.t-good { color: var(--mint); } .pln-kpi b.t-bad { color: var(--red); } .pln-kpi b.t-flat { color: var(--amber); }
.pln-kpi small { font-size: 11.5px; color: var(--ink2); line-height: 1.45; }
.pln-liq { border-color: var(--red-dim); background: linear-gradient(160deg, rgba(255,77,94,.08), rgba(255,77,94,0) 70%), var(--bg1); }
.pln-range { margin: 0; font-size: 14px; color: var(--ink); }
.pln-tpsl { margin: 0; font-size: 13.5px; color: var(--ink); padding: 8px 12px; border: 1px solid var(--line2); border-radius: 6px; background: var(--bg1); }
.pln-avg, .pln-n { margin: 0; font-size: 11px; color: var(--ink3); line-height: 1.55; }
.pln-heat { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line2); }
.pln-hh { margin: 0 0 10px; font-size: 16px; color: var(--ink); }
.pln-hh .mono { font-size: 11px; color: var(--ink3); letter-spacing: .04em; }
.pln-hscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.phm { border-collapse: separate; border-spacing: 2px; width: 100%; min-width: 600px; table-layout: fixed; }
.phm thead th:first-child { width: 84px; line-height: 1.35; font-size: 9px; letter-spacing: .04em; text-transform: none; }
.pln-swipe { display: none; font-size: 10.5px; color: var(--ink3); }
.phm th { font: 400 10.5px var(--mono); color: var(--ink3); padding: 3px 6px; text-align: center; white-space: nowrap; }
.phm thead th:first-child, .phm tbody th { text-align: right; }
.phm td { padding: 0; }
.phc { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 100%; height: 44px; border: 0; border-radius: 4px;
  font: 700 13px var(--mono); color: var(--ink); cursor: pointer; background-color: var(--bg3); white-space: nowrap; }
.phc small { font-size: 9.5px; font-weight: 400; color: var(--ink); opacity: .85; }
.phc:hover, .phc:focus-visible { outline: 2px solid var(--ink3); outline-offset: -2px; filter: brightness(1.18); }
.phc.phc-on { outline: 2px solid var(--ink); outline-offset: -2px; }
.phc-best { box-shadow: inset 0 0 0 1px var(--blue), 0 0 14px rgba(79,140,255,.25); }
/* diverging bins (average result): equal OKLab lightness per step on both arms (.33/.41/.49); the break-even midpoint is a muted
   orange (sideways, the site's coin-flip color); ink text >= 4.8:1 on every bin */
.phc-z, .phl .phc-z { background-color: #3A3122; }
.phc-g1 { background-color: #153D32; } .phc-g2 { background-color: #1A5642; } .phc-g3 { background-color: #1F7052; }
.phc-r1 { background-color: #53242C; } .phc-r2 { background-color: #792D37; } .phc-r3 { background-color: #9F3742; }
.phc-x { background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255,77,94,.45) 6px 7.5px); }
.pln-hleg { display: flex; flex-wrap: wrap; gap: 5px 16px; font-size: 10.5px; color: var(--ink3); margin: 10px 0 0; }
.pln-hleg i { display: inline-block; width: 13px; height: 10px; border-radius: 2px; vertical-align: -1px; }
.phl i { margin-right: 1px; }
.phl-x { background-color: #3A3122; margin-right: 4px; }
.pln-hread { margin: 8px 0 0; font-size: 11.5px; color: var(--ink2); min-height: 1.6em; }
.pln-nojs { font-size: 12px; color: var(--ink3); margin: 0 0 6px; }
html.js .pln-nojs { display: none; }
@media (max-width: 980px) { .pln-ui { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .pln { padding: 14px 12px 12px; margin-top: 18px; }
  .pln-t { font-size: 19px; }
  .pln-hz { margin-left: 0; }
  .pln-best { font-size: 13px; padding: 9px 11px; }
  .pln-kpis { grid-template-columns: 1fr; gap: 8px; }
  .pln-kpi { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 10px 12px; }
  .pln-kpi b { font-size: 32px; grid-row: span 2; }
  .pln-kk { min-height: 0; }
  .pln-kpi small { grid-column: 1; }
  .phm { min-width: 560px; }
  .pln-swipe { display: inline; }
  .phc { height: 40px; font-size: 12.5px; }
}
/* off-scale note ('peaked at ...') sits over the past line: a knock-out halo in the room colour keeps it legible */
svg.fc .fc-note { paint-order: stroke; stroke: var(--bg0); stroke-width: 4px; stroke-linejoin: round; }
/* /predictions: the best past trade window chip */
.bwin { display: inline-block; font-size: 10px; letter-spacing: .02em; color: var(--ink2); border: 1px solid var(--line2); border-radius: 3px; padding: 1px 6px; white-space: nowrap; text-decoration: none; }
a.bwin:hover { color: var(--blue); border-color: var(--blue-dim); }
.pr-b { flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; }

/* ============================================================================================
   PAGE LIGHT (owner, Oct 1): the brand blue #4F8CFF stays the accent; the room stays calm. One faint brand-blue
   light sits behind each page hero (z-index -1, sized so the gradient reaches full transparency inside its box).
   ============================================================================================ */
.hero::after { content: ""; position: absolute; z-index: -1; left: 50%; top: -200px; width: 100vw; height: calc(100% + 460px);
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(860px 320px at 30% 300px, rgba(79,140,255,.03), transparent 70%); }
.feedhero::after { background: radial-gradient(1000px 360px at 50% 340px, rgba(79,140,255,.035), transparent 70%); }

/* ============================================================================================
   PATTERN IDENTITY COLOURS (web/lines.py COLOR): one per pattern model - its chip's swatch and ring (band 1's pattern
   view) and its dot in the vote beside the headline. Never the up / down / sideways green, red or orange; each reads on
   the black room.
   ============================================================================================ */
:root { --pl-lookalike: #4F8CFF; --pl-event: #5FD3E8; --pl-lastyear: #F48FC6; --pl-btcshadow: #FFD75E;
  --pl-trend90: #C4CDD4; --pl-rubberband: #A6A6FF; --pl-volspike: #D98BFF; --fc-haze: #9FB1CC; }

/* the pattern vote beside the headline chance */
.pv { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 14px 0 0; font-size: 14.5px; line-height: 1.35; }
.pv-dots { display: inline-flex; align-items: center; gap: 8px; }
.pv-v { display: inline-flex; align-items: center; gap: 2px; }
.pv-d { width: 11px; height: 11px; border-radius: 50%; background: var(--c); }
.pv-a { font-size: 9px; line-height: 1; }
.pv-a.t-good { color: var(--mint); } .pv-a.t-bad { color: var(--red); } .pv-a.t-flat { color: var(--amber); }
.pv-t { font-weight: 700; }
.pv-t.t-good { color: var(--mint); } .pv-t.t-bad { color: var(--red); } .pv-t.t-flat { color: var(--ink); }
.pv-x { font-size: 11px; color: var(--ink3); }
.pv-none .pv-t { font-weight: 500; font-size: 13px; color: var(--ink2); max-width: 36ch; }

@media (max-width: 640px) { .pv { font-size: 13.5px; margin-top: 10px; } }

/* ============================================================================================
   DEPTH (owner, Oct 1: "more robust, more depth"). Three planes: the room (black, lit from above), raised surfaces
   (cards and the prediction console: a lit top edge, a faint sheen, a long soft shadow) and recessed wells (charts,
   inputs, toggles: darker than their surroundings, with an inner shadow). Border colours stay with their owners, so
   accent edges (the green / red board tops, the factor stripes) keep their meaning.
   ============================================================================================ */
.pln, .wtv, .trk-c, .drc, .kv, .power, .vcard, .sstats, .trdm, .rtable, .gaugebox, .faq-i, .scc, .howto, .fmod, .board,
.vp-tile, .setc, .evo-r, .gyt, .mv-col, .acct, .cflip, .setx, .accc, .relf, .toc, .bn, .tscroll, .ovc, .spark, .pln-kpi, .tape {
  background-image: linear-gradient(180deg, rgba(255,255,255,.034), rgba(255,255,255,.008) 38%, rgba(255,255,255,0) 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 1px rgba(0,0,0,.6), 0 20px 44px -24px rgba(0,0,0,.9); }
/* the stage: each horizon's prediction sits on a raised console; its chart is a recessed screen inside it */
.pz { position: relative; border-radius: 16px; padding: 22px 22px 20px; background: linear-gradient(180deg, #111419 0%, #0B0D11 100%);
  border: 1px solid rgba(255,255,255,.07); border-top-color: rgba(255,255,255,.12); border-bottom-color: rgba(255,255,255,.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 4px rgba(0,0,0,.6), 0 40px 90px -40px #000; }
.pln input[type="number"], .pln-sd { background-color: rgba(0,0,0,.30); box-shadow: inset 0 1px 3px rgba(0,0,0,.6); }
.glyph { box-shadow: 0 6px 16px -6px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06); }
/* phones: the console reaches into the page gutter so the chart keeps its width (label text stays >= 10.5px) */
@media (max-width: 640px) { .pz { margin-left: -8px; margin-right: -8px; padding: 14px 8px 12px; border-radius: 12px; } }

/* ============================================================================================
   ROOM DEPTH + MOTION (owner, Oct 1: "a bit more depth so it doesn't read empty"; "feels dead … pump fun has stuff
   moving nonstop"). A field of faint "+" marks (the PATTERN+ mark, owner Oct 3: "replace those dots in the background with +") that fades out down the page, soft lights drifting slowly behind everything, live dots
   that ping, pop-ins and count-ups (web/static/motion.js), link cards that lift under the pointer, and the live strip
   under the masthead. Nothing starts hidden; prefers-reduced-motion keeps all of it still.
   ============================================================================================ */
body::before { content: ""; position: absolute; z-index: -2; top: 0; left: 0; right: 0; height: 1200px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M16 13h1v7h-1zM13 16h7v1h-7z' fill='%23fff' fill-opacity='.07'/%3E%3C/svg%3E") 50% 0 / 32px 32px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0, #000 30%, transparent 75%);
  mask-image: radial-gradient(120% 90% at 50% 0, #000 30%, transparent 75%); }
body::after { content: ""; position: fixed; z-index: -3; inset: -25vmax; pointer-events: none;
  background: radial-gradient(38vmax 26vmax at 24% 22%, rgba(79,140,255,.075), transparent 70%),
    radial-gradient(34vmax 24vmax at 78% 34%, rgba(95,211,232,.05), transparent 70%),
    radial-gradient(30vmax 22vmax at 50% 88%, rgba(79,140,255,.035), transparent 70%);
  animation: room-drift 46s ease-in-out infinite alternate; will-change: transform; }
@keyframes room-drift {
  0% { transform: translate3d(-4%, -2%, 0) rotate(0deg); }
  50% { transform: translate3d(3%, 2%, 0) rotate(4deg); }
  100% { transform: translate3d(-1%, 4%, 0) rotate(-3deg); } }
/* live dots ping outward instead of blinking */
.sdot.live, .rec i { animation: dot-ping 2.4s cubic-bezier(.2,.6,.3,1) infinite; }
@keyframes dot-ping { 0% { box-shadow: 0 0 0 0 rgba(79,140,255,.6); } 75%, 100% { box-shadow: 0 0 0 7px rgba(79,140,255,0); } }
/* data-pop (motion.js): a short rise into place the first time an element is seen, never from fully hidden */
@keyframes pp-pop { from { opacity: .35; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
.pp-pop { animation: pp-pop .45s cubic-bezier(.2,.75,.25,1) both; }
/* link cards lift under the pointer */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  a.setc, a.evo-r, a.gyt, a.vp-tile, a.vcard, a.acct, a.wtv, a.ovc, a.scc { transition: transform .18s ease, box-shadow .18s ease; }
  a.setc:hover, a.evo-r:hover, a.gyt:hover, a.vp-tile:hover, a.vcard:hover, a.acct:hover, a.wtv:hover, a.ovc:hover, a.scc:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 2px 4px rgba(0,0,0,.6), 0 28px 50px -22px #000; }
}
/* the live strip: real facts from the build rotate under the masthead, last one is the countdown to fresh data */
.pulse { min-width: 0; }
.pulse-win { position: relative; display: block; height: 16px; width: min(42vw, 430px); overflow: hidden; }
.pulse-i { position: absolute; top: 0; left: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 16px; transform: translateY(110%); opacity: 0; transition: transform .5s cubic-bezier(.2,.75,.25,1), opacity .5s; }
.pulse-i.on { transform: none; opacity: 1; }
.pulse-i.out { transform: translateY(-110%); opacity: 0; }
.pulse-i a { color: var(--ink2); text-decoration: none; }
.pulse-i a:hover { color: var(--ink); }
.pulse-i a.t-good { color: var(--mint); }
.pulse-i a.t-bad { color: var(--red); }
.pulse-cd { color: var(--ink); font-weight: 600; letter-spacing: .08em; }
@media (prefers-reduced-motion: reduce) {
  body::after, .sdot.live, .rec i, .pp-pop { animation: none; }
  .pulse-i { transition: none; }
}

/* ============================================================================================
   TOKEN LANE · ROUND 7: band 4 (the full write-up) and the numbers <-> text cross-links.
   ============================================================================================ */

/* BAND 4 · THE FULL WRITE-UP (owner: "didn't u forget to add that 4th split"): the fourth step up out of the dark - the
   reading room. 1 the room under its spotlight · 2 #08090C · 3 #0B0D10 · 4 #0E1014. Its marker is paper white (never a
   semantic colour); every topic is a raised card in one readable column beside its own index. Band 3 keeps the numbers
   ('read it →' jumps here), band 4 the words ('see the numbers →' jumps back); the landing block lights up briefly. */
:root { --paper: #DCE3EC; --paper-dim: #4A5466; --b4-bg: #0E1014; }
.band-4 { --bandc: var(--paper); --bandbg: var(--b4-bg); --bandtint: rgba(220,227,236,.08);
  --bg0: #0E1014; --bg1: #14171C; --bg2: #181B21; --bg3: #1D2128; --line: #23272F; --line2: #303640;
  --bandlayer: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0) 26px), radial-gradient(1000px 300px at 50% 0, rgba(255,255,255,.026), transparent 70%);
  padding-top: 28px; }
.bandnav a[data-band="writeup"] b { border-color: var(--paper-dim); color: var(--paper); }
.bandnav a[data-band="writeup"].on b { border-color: var(--paper); color: var(--ink); }
@media (max-width: 640px) { .bandnav.bn4 { gap: 2px; } .bandnav.bn4 a { gap: 6px; padding: 4px 7px 4px 4px; letter-spacing: .06em; } }
.wb { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s6); align-items: start; }
.wix { position: sticky; top: calc(var(--mast-h) + var(--ribh) + 58px); display: flex; flex-direction: column; max-height: calc(100vh - 170px);
  overflow-y: auto; padding: 8px 14px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); scrollbar-width: thin;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 20px 44px -24px rgba(0,0,0,.9); }
.wix a { display: block; padding: 6px 0; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); text-decoration: none;
  border-bottom: 1px solid var(--line); }
.wix a:last-child { border-bottom: 0; }
.wix a:hover, .wix a:focus-visible { color: var(--paper); }
.wb-body { min-width: 0; max-width: 800px; }
.wsec { margin: 0 0 18px; padding: 18px 22px 14px; border-radius: 12px; background-color: var(--bg1); border: 1px solid var(--line);
  border-top-color: rgba(255,255,255,.09); scroll-margin-top: calc(var(--mast-h) + var(--ribh) + 62px);
  background-image: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 60%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 1px rgba(0,0,0,.6), 0 20px 44px -24px rgba(0,0,0,.9); }
.wsec-h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-family: var(--sans); font-size: 17px; font-weight: 700;
  letter-spacing: 0; text-transform: none; color: var(--ink); }
.wsec-h .ic { width: 14px; height: 14px; flex: none; color: var(--kc, var(--ink3)); }
.wsec .callout { margin-top: 0; border-left-color: var(--kc-dim, var(--paper-dim)); background: rgba(255,255,255,.025); }
.wsec .dek { margin: 0 0 12px; color: var(--ink); }
.wsec .il, .wsec .prose, .wsec .desc { font-family: var(--sans); }
.wsec-go { margin: 6px 0 0; }
.band-4 .blk { scroll-margin-top: calc(var(--mast-h) + var(--ribh) + 62px); }
.xl { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line2);
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: none; color: var(--ink2); text-decoration: none; white-space: nowrap; }
.xl:hover, .xl:focus-visible { color: var(--ink); border-color: var(--ink3); }
.asof-x { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; }
.asof-x .xl-read { margin-left: auto; }
.wsec:target, .band-3 .blk:target, .band-4 .blk:target { animation: xl-hit 1.9s ease-out 1; }
@keyframes xl-hit { 0% { box-shadow: 0 0 0 2px rgba(220,227,236,.6); background-color: rgba(220,227,236,.08); }
  100% { box-shadow: 0 0 0 1px rgba(220,227,236,0); } }
@media (prefers-reduced-motion: reduce) {
  .wsec:target, .band-3 .blk:target, .band-4 .blk:target { animation: none; outline: 1px solid var(--paper-dim); outline-offset: 4px; } }
@media (max-width: 980px) {
  .wb { grid-template-columns: 1fr; gap: 12px; }
  .wix { position: static; flex-direction: row; gap: 6px; max-height: none; overflow-x: auto; overflow-y: hidden; padding: 6px; scrollbar-width: none; }
  .wix::-webkit-scrollbar { display: none; }
  .wix a { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 999px; } }
@media (max-width: 640px) { .wsec { padding: 14px 12px 10px; border-radius: 10px; } .wsec-h { font-size: 16px; } }

/* SEO headings that stay quiet: the H1's 'price prediction' suffix and each horizon panel's real h2 ('JUP price
   prediction for the next 30 days'), set as the panel's small label - the giant chance stays the hero */
.tid h1 .h1-pp { font-size: 14px; font-weight: 500; letter-spacing: .01em; color: var(--ink3); white-space: nowrap; }
.ph-h { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; font-weight: 700; color: var(--ink3); margin: 2px 0 10px; line-height: 1.4; }
.ph-h b { color: var(--ink); font-weight: 700; }
@media (max-width: 640px) { .tid h1 .h1-pp { font-size: 12px; } }

/* TIMEFRAME PILLS on the band-3 charts (owner, Oct 2: "I don't see option to pick different timeframes bro"): a recessed
   segmented control like the horizon toggle; a dimmed pill = not enough history (it says why when tapped). Hidden
   until web/static/chart.js runs; one scroll row if it ever outgrows a phone; every pill a 36 px tap target. */
.tfp { display: flex; width: max-content; max-width: 100%; gap: 2px; padding: 3px; margin: 0 0 8px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.07); background: rgba(0,0,0,.45); box-shadow: inset 0 1px 3px rgba(0,0,0,.7);
  overflow-x: auto; scrollbar-width: none; }
.tfp::-webkit-scrollbar { display: none; }
.tfp[hidden] { display: none; }
.hg-chart > .tfp { margin-left: auto; }
.tfp button { flex: none; min-width: 44px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent;
  color: var(--ink2); font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; cursor: pointer; }
.tfp button:hover { color: var(--ink); background: var(--bg3); }
.tfp button.on { background: var(--ink); color: var(--bg0); font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.7), inset 0 -1px 0 rgba(0,0,0,.18); }
.tfp button[aria-disabled="true"] { color: var(--ink4); background: transparent; cursor: not-allowed; }
.tfp button:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.tfp.tf-busy button.on { opacity: .65; }
@media (max-width: 640px) { .hg-chart > .tfp { margin-left: 0; } .tfp button { min-width: 0; padding: 0 11px; } }
/* the tables' windows (§ 03 day 1 / 7 / 30, § 20 24 h / 30 d / 1 y): every variant is in the HTML, one shows */
[data-tfv][hidden] { display: none !important; }
/* phones: the peers tables scroll inside their frame instead of crushing their numbers (240 px percentile strips) */
@media (max-width: 640px) { #peers .tscroll > table { min-width: 640px; } #peers .tscroll > table td { white-space: nowrap; } }

/* ============================================================================================
   PLANNER LANE · ROUND 7: THE REPLAY CHART (web/static/planner.js + calc.js replay; macros.html planner). Owner: "put a
   graph next to this calculator, so as you play with values something in the graph changes". Every past case is a
   thin line of the trade's P&L (canvas) under an SVG layer of levels and labels; the well is recessed like the
   pattern view's (.pv-well). Green / red / orange only for profit / loss / stop loss, the brand blue only for
   focus. Phones and tablets put the chart right under Long / Short, above the sliders, so it stays in view while
   dragging; desktop keeps it in the right column under the tiles.
   ============================================================================================ */
.pln-rp { margin: 2px 0 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pln-rp[hidden] { display: none; }
.pln-rph { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 13.5px; color: var(--ink); line-height: 1.4; }
.pln-rph b { font-weight: 700; letter-spacing: -.005em; }
.pln-rph .mono { font-size: 10.5px; color: var(--ink3); letter-spacing: .02em; }
.pln-rpk { margin-left: auto; }
.pln-rpw { position: relative; height: 300px; border-radius: 12px; background: #06070A; overflow: hidden; touch-action: pan-y;
  box-shadow: inset 0 3px 14px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.045); cursor: crosshair; outline: none;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.pln-rpw:focus-visible { box-shadow: inset 0 3px 14px rgba(0,0,0,.8), inset 0 0 0 1px var(--blue-dim), 0 0 0 2px var(--blue); }
.pln-rpc, .pln-rps { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pln-rps { pointer-events: none; overflow: visible; }
.pln-rps text { font-family: var(--mono); paint-order: stroke; stroke: #06070A; stroke-width: 3px; stroke-linejoin: round; }
.pln-rps .rp-yt, .pln-rps .rp-xt { font-size: 10px; fill: var(--ink3); stroke-width: 0; }
.pln-rps .rp-l { stroke-width: 1.4; }
.pln-rps .rp-fz { fill: var(--amber); fill-opacity: .1; stroke: none; }   /* the histogram's sideways zone: +-L x band around -fees */
.pln-rps .rp-en { stroke: var(--ink); stroke-opacity: .5; stroke-width: 1; }
.pln-rps .rp-lq { stroke: var(--red); stroke-dasharray: 6 4; }
.pln-rps .rp-tp.t-good { stroke: var(--mint); }
.pln-rps .rp-sl { stroke: var(--amber); }
.pln-rps .rp-lt { font-size: 10.5px; font-weight: 700; }
.pln-rps .rp-ten { fill: var(--ink2); font-weight: 400; }
.pln-rps .rp-tlq { fill: var(--red); } .pln-rps .rp-ttp.t-good { fill: var(--mint); } .pln-rps .rp-tsl { fill: var(--amber); }
.pln-rps .rp-typ { font-size: 11.5px; font-weight: 800; fill: var(--ink); stroke-width: 4px; }
.pln-rps .rp-typ.t-good { fill: var(--mint); } .pln-rps .rp-typ.t-bad { fill: var(--red); } .pln-rps .rp-typ.t-flat { fill: var(--amber); }
.pln-rps .rp-hcap { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; fill: var(--ink3); stroke-width: 0; }
.pln-rps .rp-hlq, .pln-rps .rp-hov, .pln-rps .rp-hun { font-size: 10px; font-weight: 700; fill: var(--red); }
.pln-rps .rp-hov.t-good { fill: var(--mint); }
.pln-rps .rp-msg { font-family: var(--sans); font-size: 13px; fill: var(--ink2); stroke-width: 0; }
.pln-rps .rp-hl { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.pln-rps .rp-hl.t-good { stroke: var(--mint); } .pln-rps .rp-hl.t-bad { stroke: var(--red); }
.pln-rps .rp-hm { fill: none; stroke-width: 2; }
.pln-rps .rp-hm.rp-k1 { stroke: var(--red); }
.pln-rps .rp-hm.rp-k2 { fill: var(--red); stroke: #06070A; stroke-width: 1.5; }
.pln-rps .rp-hm.rp-k2.t-good { fill: var(--mint); }
.pln-rps .rp-hm.rp-k3 { fill: var(--amber); stroke: #06070A; stroke-width: 1.5; }
.pln-rps .rp-hm.rp-k0 { fill: var(--ink); stroke: #06070A; stroke-width: 1.5; }
.pln-tip { position: absolute; z-index: 2; left: 0; top: 0; margin: 0; max-width: 250px; display: flex; flex-direction: column; gap: 2px;
  padding: 7px 10px 8px; border: 1px solid var(--line2); border-radius: 7px; background: rgba(11,13,17,.95); font-size: 10.5px;
  color: var(--ink2); line-height: 1.45; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 30px -12px #000; }
.pln-tip[hidden] { display: none; }
.pln-tip .tp-k { color: var(--ink3); }
.pln-tip .tp-r { color: var(--ink2); }
.pln-tip .tp-r b { font-family: var(--sans); font-size: 16px; font-weight: 800; letter-spacing: -.01em; margin-right: 2px; }
.pln-tip .t-good { color: var(--mint); } .pln-tip .t-bad { color: var(--red); } .pln-tip .t-flat { color: var(--amber); }
.pln-tip .tp-h { color: var(--ink); }
.pln-tip .tp-p { color: var(--ink2); } .pln-tip .tp-p b { font-weight: 700; }   /* what the price did: the line's colour */
.pln-rpl { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0; font-size: 10.5px; color: var(--ink3); }
.pln-rpl > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pln-rpl > span[hidden] { display: none; }
.pln-rpl b { font-weight: 700; color: var(--ink); }
.pln-rpl .rpl-bw { color: var(--ink3); }
.pln-rpl i { display: inline-block; font-style: normal; }
.rpl-good i, .rpl-bad i, .rpl-m i { width: 14px; height: 2px; border-radius: 1px; }
.rpl-good i { background: var(--mint); } .rpl-bad i { background: var(--red); } .rpl-m i { height: 3px; background: var(--ink); }
.rpl-flat i { background: var(--amber); }
.rpl-x i { color: var(--red); font-size: 11px; line-height: 1; }
.pln-rpl .rpl-dot i { width: 7px; height: 7px; border-radius: 50%; }
.rpl-b i { width: 14px; height: 9px; border-radius: 2px; background: rgba(236,239,244,.14); }
/* desktop: controls left with the fine print under them, results + chart right, so the two columns end together */
.pln-fine { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
@media (min-width: 981px) {
  .pln-ui { grid-template-areas: "in out" "fine out"; grid-template-rows: auto 1fr; }
  .pln-in { grid-area: in; } .pln-out { grid-area: out; } .pln-fine { grid-area: fine; }
}
/* one column (tablets, phones): the controls and the outputs share one flow, re-ordered so the chart sits under Long /
   Short and right above the sliders it answers to */
@media (max-width: 980px) {
  .pln-ui { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
  .pln-in, .pln-out, .pln-fine { display: contents; }
  .pln-side { order: 1; } .pln-rp { order: 2; } .pln-f-hold { order: 3; } .pln-f-lev { order: 4; } .pln-opt { order: 5; }
  .pln-optn { order: 6; margin: -8px 0 0; } .pln-warn { order: 7; } .pln-kpis { order: 8; } .pln-cash { order: 8; } .pln-range { order: 9; }
  .pln-tpsl { order: 10; } .pln-avg { order: 11; } .pln-n { order: 13; }
}
@media (max-width: 640px) {
  .pln-rp { margin: 0 -6px; gap: 7px; }
  .pln-rph, .pln-rpl { padding: 0 6px; }
  .pln-rpw { height: 248px; border-radius: 10px; }
  .pln-rpk { margin-left: 0; }
  .pln-rpl { gap: 3px 12px; font-size: 10.5px; }
  .pln-tip { max-width: 240px; }
}

/* ============================================================================================
   PLAY (play lane): the pattern playground (/play · web/static/play.js), "Beat the pattern" (/play/game ·
   web/static/game.js) and the home teaser card (.ptz). Controls sit on raised panels, charts in recessed wells; green /
   red / orange only mean profit / loss / coin flip or warning; the brand blue marks what is picked. Motion: a quick bump
   on a changed number, the case paths replay day by day on a pattern / chip / side change; all still under
   prefers-reduced-motion. Nothing is hidden before JS runs.
   ============================================================================================ */
.play { --pl-raise: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012) 40%, rgba(255,255,255,0) 75%); }
.play-hero { padding: 4px 0 0; margin-bottom: 14px; }
.play-hero .kicker { font-family: var(--mono); font-size: 10px; letter-spacing: .42em; color: var(--blue); text-transform: uppercase; margin: 0 0 8px; }
.play-hero h1 { font-size: clamp(34px, 4vw, 46px); letter-spacing: -.03em; line-height: 1; }
.play-hero .dek { margin: 8px 0 12px; max-width: 92ch; }
.play-presets { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 4px; }
.play-presets::-webkit-scrollbar { display: none; }
.play-pre { flex: none; }
.play-presets > span { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink3); margin-right: 2px; }
.play-pre { display: inline-flex; align-items: center; gap: 9px; min-height: 36px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line2);
  background: var(--pl-raise), var(--bg2); color: var(--ink2); font-size: 12.5px; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 18px -10px #000; transition: transform .12s ease, border-color .15s ease, color .15s ease; }
.play-pre:hover { color: var(--ink); border-color: var(--blue-dim); transform: translateY(-1px); }
.play-pre b { font: 700 12.5px var(--mono); }
.play-pre b.t-good { color: var(--mint); } .play-pre b.t-flat { color: var(--amber); }
.play-nojs { font-size: 11.5px; color: var(--ink3); margin: 0 0 10px; }
html.js .play-nojs { display: none; }
.play-empty { padding: 18px; border: 1px dashed var(--line2); border-radius: 12px; color: var(--ink2); }

.play-grid { display: grid; grid-template-columns: minmax(300px, 372px) minmax(0, 1fr); grid-template-areas: "ctl sum" "ctl det";
  grid-template-rows: auto 1fr; gap: 18px 26px; align-items: start; }
/* step 1: the pattern strip above the playground (a level select) */
.play-pick { margin: 0 0 18px; padding: 12px 16px 10px; border-radius: 16px; background: var(--pl-raise), var(--bg2); border: 1px solid rgba(255,255,255,.065);
  border-top-color: rgba(255,255,255,.11); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 1px rgba(0,0,0,.6), 0 24px 48px -28px rgba(0,0,0,.95); }
.play-pickrow { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.play-pgrp { min-width: 0; }
.play-pgrp-market { flex: 1 1 520px; }
.play-pick .play-fams { display: flex; flex-wrap: wrap; gap: 6px; }
.play-pick .play-fam { flex-direction: row; align-items: baseline; gap: 7px; min-height: 38px; padding: 8px 12px; }
.play-pick .play-fam b { font-size: 13.5px; white-space: nowrap; }
.play-pick .play-gl { margin: 2px 0 5px; }
.play-pick .play-k { margin-bottom: 6px; }
.play-pick .play-about { margin-top: 8px; font-size: 12px; }
.play-sum { grid-area: sum; min-width: 0; }
.play-ctl { grid-area: ctl; min-width: 0; }
.play-det { grid-area: det; min-width: 0; }

/* the result: a raised console with recessed number wells */
.play-sum { position: relative; border-radius: 16px; padding: 18px 20px 18px; background: linear-gradient(180deg, #111419 0%, #0B0D11 100%);
  border: 1px solid rgba(255,255,255,.07); border-top-color: rgba(255,255,255,.12); border-bottom-color: rgba(255,255,255,.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 4px rgba(0,0,0,.6), 0 40px 90px -40px #000; }
.play-set { margin: 0 0 6px; font-size: 14.5px; font-weight: 600; color: var(--ink2); line-height: 1.4; }
.play-res { margin: 0; font-size: clamp(22px, 2.6vw, 31px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--ink); }
.play-res b { font-size: 1.22em; letter-spacing: -.03em; }
.play-res.t-good b { color: var(--mint); } .play-res.t-bad b { color: var(--red); } .play-res.t-flat b { color: var(--amber); }
.play-warn { margin: 12px 0 0; padding: 8px 12px; border: 1px solid var(--amber-dim); border-radius: 8px; background: rgba(255,180,77,.08);
  color: #FFD9A6; font-size: 13px; line-height: 1.45; }
.play-warn[hidden] { display: none; }
.play-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.play-kpi { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 12px 12px 11px; border-radius: 10px; background: rgba(0,0,0,.34);
  border: 1px solid rgba(255,255,255,.045); box-shadow: inset 0 2px 6px rgba(0,0,0,.65); }
.play-kk { font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink3); line-height: 1.3; }
.play-kpi b { display: inline-block; align-self: flex-start; transform-origin: left center; font-size: clamp(24px, 2.3vw, 33px); font-weight: 800;
  letter-spacing: -.03em; line-height: 1; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.play-kpi b.t-good { color: var(--mint); } .play-kpi b.t-bad { color: var(--red); } .play-kpi b.t-flat { color: var(--amber); }
.play-kpi small { font-size: 11px; color: var(--ink3); line-height: 1.35; }
.play-kliq { border-color: rgba(255,77,94,.16); background: linear-gradient(160deg, rgba(255,77,94,.07), rgba(255,77,94,0) 70%), rgba(0,0,0,.34); }
.play-bump { animation: play-bump .34s cubic-bezier(.2,.9,.3,1.3); }
@keyframes play-bump { 0% { transform: scale(1.09); } 100% { transform: none; } }

/* the controls: one raised panel, three steps */
.play-ctl { padding: 16px 16px 14px; border-radius: 16px; background: var(--pl-raise), var(--bg2); border: 1px solid rgba(255,255,255,.065);
  border-top-color: rgba(255,255,255,.11); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 1px rgba(0,0,0,.6), 0 28px 54px -26px rgba(0,0,0,.95); }
.play-step + .play-step { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair); }
.play-k { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.play-k i { font-style: normal; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--blue-dim);
  color: var(--blue); font-weight: 700; letter-spacing: 0; font-size: 11px; }
.play-kx { margin-left: auto; font-family: var(--sans); font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--ink3); }
.play-gl { margin: 4px 0 6px; font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink3); }
.play-fams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.play-fam { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 52px; padding: 9px 12px; border-radius: 10px; text-align: left;
  border: 1px solid rgba(255,255,255,.07); background: rgba(0,0,0,.3); color: var(--ink2); cursor: pointer; box-shadow: inset 0 1px 3px rgba(0,0,0,.6);
  transition: border-color .15s ease, background-color .15s ease, transform .1s ease; }
.play-fam b { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.play-fam span { font-size: 10.5px; color: var(--ink3); }
.play-fam:hover { border-color: var(--line2); background: rgba(255,255,255,.03); }
.play-fam:active, .play-chip:active, .play-sd:active, .play-q button:active, .play-btn:active { transform: scale(.97); }
.play-fam.on { border-color: var(--blue); background: rgba(79,140,255,.10); box-shadow: inset 0 0 0 1px var(--blue); }
.play-fam.on span { color: var(--ink2); }
.play-about { margin: 10px 0 0; font-size: 12.5px; color: var(--ink2); line-height: 1.5; }
.play-about .mono { font-size: 11px; color: var(--ink3); }
.play-dim + .play-dim { margin-top: 11px; }
.play-dl { display: block; margin-bottom: 6px; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }
.play-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.play-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line2);
  background: rgba(0,0,0,.3); color: var(--ink2); font: 600 12.5px var(--sans); cursor: pointer; box-shadow: inset 0 1px 2px rgba(0,0,0,.5);
  transition: border-color .15s ease, background-color .15s ease, color .15s ease, opacity .15s ease, transform .1s ease; }
.play-chip em { font: 500 10.5px var(--mono); font-style: normal; color: var(--ink3); }
.play-chip:hover { color: var(--ink); border-color: var(--ink4); }
.play-chip.on { color: #fff; border-color: var(--blue); background: rgba(79,140,255,.17); box-shadow: inset 0 0 0 1px rgba(79,140,255,.5); }
.play-chip.on em { color: var(--ink2); }
.play-chip.play-zero { opacity: .42; }
.play-none { font-size: 11.5px; color: var(--ink3); margin: 0; }
/* the coin search (owner, Oct 3: "you gonna dropdown thousands of coins? make it search" ... "lil more refined"): a
   ticker or a name; each match with the site's monogram, its name, a bar of its cases under the other chips and the
   count; the typed part lit; the picked coin's badge inside the box */
.play-cbox { position: relative; max-width: 380px; }
.play-cin { display: block; width: 100%; min-height: 42px; padding: 9px 12px 9px 38px; border: 1px solid var(--line2); border-radius: 11px;
  background: rgba(0,0,0,.3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.6' fill='none' stroke='%23949BA8' stroke-width='1.6'/%3E%3Cpath d='M10.4 10.4 14 14' stroke='%23949BA8' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 13px center / 14px 14px;
  color: var(--ink); font-size: 14px; letter-spacing: .03em; box-shadow: inset 0 1px 2px rgba(0,0,0,.5); transition: border-color .15s ease, box-shadow .15s ease; }
.play-cbox.has-pick .play-cin { background-image: none; font-weight: 700; }
.play-cin::placeholder { color: var(--ink3); font-weight: 400; }
.play-cin:hover { border-color: var(--ink4); }
.play-cin:focus { border-color: var(--blue-dim); outline: none; box-shadow: 0 0 0 1px var(--blue-dim), 0 0 26px rgba(79,140,255,.10); }
.play-cpick { position: absolute; z-index: 1; left: 9px; top: 50%; display: flex; transform: translateY(-50%); pointer-events: none; }
.play-cpick:empty { display: none; }
.play-cn { margin-left: 4px; letter-spacing: .04em; text-transform: none; color: var(--ink2); }
.play-clg { position: relative; display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; overflow: hidden; border-radius: 7px;
  background: var(--b, #10161E); color: var(--i, #8FA6BF); font: 800 9px/1 var(--mono); letter-spacing: .02em; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.play-clg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; visibility: hidden; }
.play-clg img.in { visibility: visible; }
.play-call { background: rgba(79,140,255,.12); color: var(--blue); font-size: 13px; }
.play-clist { position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; right: 0; max-height: 392px; overflow-y: auto; padding: 6px;
  border: 1px solid rgba(255,255,255,.08); border-top-color: rgba(255,255,255,.14); border-radius: 14px; background: linear-gradient(180deg, #14171D 0%, #0D0F13 100%);
  box-shadow: 0 26px 60px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.45); animation: play-clin .14s ease-out; }
.play-clist[hidden] { display: none; }
@keyframes play-clin { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.play-ch { margin: 4px 8px 6px; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }
.play-copt { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; min-height: 46px; padding: 8px 10px; border: 0; border-radius: 10px;
  background: transparent; color: var(--ink); font: 500 13px var(--sans); text-align: left; cursor: pointer; transition: background-color .12s ease; }
.play-copt:hover { background: rgba(255,255,255,.04); }
.play-copt.sel { background: rgba(79,140,255,.12); box-shadow: inset 0 0 0 1px rgba(79,140,255,.32); }
.play-copt.on { box-shadow: inset 2px 0 0 var(--blue); }
.play-copt.on.sel { box-shadow: inset 2px 0 0 var(--blue), inset 0 0 0 1px rgba(79,140,255,.32); }
.play-cid { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.25; }
.play-cid b { font: 700 13px var(--mono); letter-spacing: .03em; }
.play-copt.on .play-cid b { color: var(--blue); }
.play-cid span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--ink3); }
.play-copt mark { background: none; color: var(--blue); }
.play-cbar { flex: none; width: 56px; height: 4px; margin-left: auto; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.07); }
.play-cbar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(79,140,255,.35), var(--blue)); }
.play-copt em { flex: none; min-width: 66px; text-align: right; font: 500 11px var(--mono); font-style: normal; color: var(--ink2); }
.play-copt.play-zero { opacity: .45; }
.play-cnone { margin: 0; padding: 12px 10px; font-size: 12.5px; color: var(--ink3); }
.play-cft { margin: 6px 8px 2px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.06); font-size: 10px; letter-spacing: .04em; color: var(--ink3); }
.play-cft kbd { display: inline-block; min-width: 18px; margin-right: 3px; padding: 1px 5px; border: 1px solid var(--line2); border-radius: 5px;
  background: rgba(255,255,255,.03); font: 600 9.5px/1.4 var(--mono); text-align: center; color: var(--ink2); }
@media (hover: none) { .play-cft { display: none; } }
@media (prefers-reduced-motion: reduce) { .play-clist { animation: none; } .play-copt, .play-cin { transition: none; } }
@media (max-width: 640px) { .play-cbox { max-width: none; } .play-cin { font-size: 16px; } .play-cbar { display: none; } .play-copt em { margin-left: auto; }
  .play-clist { max-height: min(392px, 46vh); } }
.play-side { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.play-sd { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 52px; padding: 9px 13px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line2); background: rgba(0,0,0,.3); box-shadow: inset 0 1px 3px rgba(0,0,0,.6); transition: border-color .15s, background-color .15s, transform .1s; }
.play-sd b { font-size: 17px; font-weight: 800; color: var(--ink2); }
.play-sd small { font-size: 10.5px; color: var(--ink3); }
.play-sd.sd-good.on { border-color: var(--mint); background: rgba(56,242,164,.12); box-shadow: inset 0 0 0 1px var(--mint); }
.play-sd.sd-good.on b { color: var(--mint); }
.play-sd.sd-bad.on { border-color: var(--red); background: rgba(255,77,94,.12); box-shadow: inset 0 0 0 1px var(--red); }
.play-sd.sd-bad.on b { color: var(--red); }
.play-sl { margin-top: 12px; }
.play-fk { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0; }
.play-fk label { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }
.play-fk output { font: 700 19px var(--mono); color: var(--ink); }
.play input[type=range] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 30px; margin: 2px 0; background: transparent; cursor: pointer; --fill: 0%; }
.play input[type=range]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
.play input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--blue) var(--fill), rgba(255,255,255,.09) var(--fill));
  box-shadow: inset 0 1px 2px rgba(0,0,0,.7); }
.play input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: #E9EEF7;
  border: 3px solid var(--blue); box-shadow: 0 2px 8px rgba(0,0,0,.75); }
.play input[type=range]::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(255,255,255,.09); }
.play input[type=range]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--blue); }
.play input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #E9EEF7; border: 3px solid var(--blue); }
.play-q { display: flex; flex-wrap: wrap; gap: 5px; }
.play-q button { min-height: 32px; min-width: 40px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(0,0,0,.3);
  color: var(--ink2); font: 600 11px var(--mono); cursor: pointer; transition: transform .1s ease; }
.play-q button:hover { color: var(--ink); border-color: var(--ink4); }
.play-q button.on { background: var(--ink); color: var(--bg0); border-color: var(--ink); }
.play-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.play-note { margin: 8px 0 0; font-size: 10.5px; color: var(--ink3); line-height: 1.5; }
.play-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair); }
.play-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 7px 14px; border-radius: 9px; border: 1px solid var(--line2);
  background: var(--pl-raise), var(--bg3); color: var(--ink); font: 600 12.5px var(--sans); text-decoration: none; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 14px -8px #000; transition: border-color .15s ease, transform .1s ease; }
.play-btn:hover { border-color: var(--blue-dim); color: var(--ink); }
.play-copy { border-color: var(--blue-dim); }
.play-best { border-color: var(--blue); background: rgba(79,140,255,.12); }
.play-bestx { margin: 10px 0 0; padding: 8px 11px; border-left: 2px solid var(--blue); border-radius: 0 8px 8px 0; background: rgba(79,140,255,.06);
  font-size: 12px; line-height: 1.5; color: var(--ink2); }
.play-bestx[hidden] { display: none; }
.play-copy.on { border-color: var(--blue); color: var(--blue); }
.play-reset { margin-left: auto; color: var(--ink3); }
.play-bar { display: none; }

/* the replay: recessed wells */
.play-det > * + * { margin-top: 16px; }
.play-well { margin: 0; padding: 12px 12px 10px; border-radius: 14px; background: #06070A; box-shadow: inset 0 3px 14px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.045); }
.play-cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 8px; }
.play-cap > .mono { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink2); }
.play-capx { font-size: 11.5px; color: var(--ink3); }
.play-capx b { font-family: var(--mono); }
.play-capx b.t-good { color: var(--mint); } .play-capx b.t-bad { color: var(--red); }
.play-cv { position: relative; }
.play-cv canvas { display: block; width: 100%; height: 320px; touch-action: pan-y; }
.play-tip { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; padding: 5px 9px; border-radius: 6px; background: rgba(11,13,17,.96);
  border: 1px solid var(--line2); font-size: 11px; color: var(--ink); white-space: nowrap; box-shadow: 0 10px 24px rgba(0,0,0,.65); }
.play-tip[hidden] { display: none; }
.play-tip .t-good { color: var(--mint); } .play-tip .t-bad { color: var(--red); }
.play-leg { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 8px 0 0; font-size: 10.5px; color: var(--ink3); }
.play-leg .lg { display: inline-block; width: 16px; height: 3px; border-radius: 2px; margin-right: -6px; vertical-align: middle; }
.lg-good { background: var(--mint); opacity: .5; } .lg-bad { background: var(--red); opacity: .5; } .lg-good-tp { background: var(--mint); }
.lg-sl { background: var(--amber); } .lg-liq { background: var(--red); }
svg.play-svg { display: block; width: 100%; height: 170px; overflow: visible; }
.play-svg .eq-zero { stroke: var(--ink4); stroke-dasharray: 3 3; }
.play-svg .eq-good { fill: var(--mint); fill-opacity: .13; } .play-svg .eq-bad { fill: var(--red); fill-opacity: .15; }
.play-svg .eq-l { fill: none; stroke: var(--ink2); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.play-svg .eq-end { fill: var(--ink); } .play-svg .eq-end.t-good { fill: var(--mint); } .play-svg .eq-end.t-bad { fill: var(--red); }
.play-svg .eq-v { font: 700 12.5px var(--mono); fill: var(--ink); } .play-svg .eq-v.t-good { fill: var(--mint); } .play-svg .eq-v.t-bad { fill: var(--red); }
.play-svg .eq-x { font: 400 10px var(--mono); fill: var(--ink3); }
.play-cases { padding: 14px 14px 10px; border-radius: 14px; background: var(--pl-raise), var(--bg2); border: 1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 20px 44px -24px rgba(0,0,0,.9); }
.play-tbl td { padding: 7px 10px; border-bottom: 1px dashed var(--line); }
.play-tbl th { padding: 6px 10px; }
.play-tbl td.t-good { color: var(--mint); } .play-tbl td.t-bad { color: var(--red); }
.play-tbl tbody tr:hover td { background: rgba(79,140,255,.06); }
.play-tbl a { font-weight: 700; }
.play-tbl td.mono { white-space: nowrap; }
.play-tbl td.play-ex { color: var(--ink3); }
.play-tbl td.play-ex-liq { color: var(--red); } .play-tbl td.play-ex-good { color: var(--mint); } .play-tbl td.play-ex-sl { color: var(--amber); }
.play-more { display: block; width: 100%; min-height: 36px; margin-top: 8px; border: 1px dashed var(--line2); border-radius: 8px; background: transparent; color: var(--ink2);
  font-size: 11px; letter-spacing: .06em; cursor: pointer; }
.play-more:hover { color: var(--ink); border-color: var(--ink4); }
.play-more[hidden] { display: none; }
.play-disc { margin: 4px 0 0; font-size: 10.5px; color: var(--ink3); line-height: 1.55; }
.play-loading .play-cv canvas { opacity: .55; transition: opacity .2s ease; }

/* every pattern, server side */
.play-all { margin: 34px 0 0; }
.play-all h2 { font-size: 22px; }
.play-allx { font-size: 13px; color: var(--ink2); margin: 4px 0 12px; max-width: 80ch; }
.play-allx.mono { font-size: 11px; color: var(--ink3); margin-top: 10px; }
.play-alltbl { border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.06); background: var(--pl-raise), var(--bg1); }
.play-alltbl td.t-good { color: var(--mint); } .play-alltbl td.t-bad { color: var(--red); } .play-alltbl td.t-flat { color: var(--amber); }
.play-pl { font-size: 10.5px; margin-left: 6px; color: var(--ink3); }
/* the game's call to action */
.play-gamecta { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k go" "b go" "t go"; align-items: center; gap: 3px 18px;
  margin: 26px 0 8px; padding: 18px 20px; border-radius: 16px; text-decoration: none; color: var(--ink); background: linear-gradient(180deg, #111419, #0B0D11);
  border: 1px solid rgba(255,255,255,.07); border-top-color: rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 30px 60px -34px #000;
  transition: border-color .15s ease, transform .15s ease; }
.play-gamecta:hover { color: var(--ink); border-color: var(--blue-dim); transform: translateY(-1px); }
.play-gamecta .mono { grid-area: k; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--blue); }
.play-gamecta b { grid-area: b; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.play-gamecta > span:not(.mono) { grid-area: t; font-size: 13.5px; color: var(--ink2); }
.play-gamecta em { grid-area: go; font-style: normal; font-size: 13px; color: var(--blue); }

@media (max-width: 1100px) { .play-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 980px) {
  .play-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "sum" "ctl" "det"; }
  .play-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 6px; position: fixed; left: 0; right: 0; top: calc(var(--ribh) + var(--mast-h)); z-index: 35;
    padding: 8px 12px; font-size: 11.5px; color: var(--ink2); background: rgba(5,6,8,.92); border-bottom: 1px solid var(--hair);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transform: translateY(-130%); opacity: 0; pointer-events: none;
    transition: transform .2s ease, opacity .2s ease; }
  .play-bar b { color: var(--ink); }
  .play-bar.t-good b:first-child { color: var(--mint); } .play-bar.t-bad b:first-child { color: var(--red); } .play-bar.t-flat b:first-child { color: var(--amber); }
  .play-sumout .play-bar { transform: none; opacity: 1; }
}
@media (max-width: 640px) {
  .play-hero h1 { font-size: 34px; }
  .play-hero .dek { font-size: 14px; }
  .play-sum { padding: 14px 14px 14px; margin: 0 -8px; border-radius: 14px; }
  .play-res { font-size: 22px; }
  .play-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .play-kpi { padding: 10px 11px; }
  .play-kpi b { font-size: 27px; }
  .play-kpi:last-child { grid-column: span 2; }
  .play-ctl { padding: 14px 12px 12px; margin: 0 -8px; }
  .play-well { margin: 0 -8px; padding: 10px 8px 8px; border-radius: 12px; }
  .play-cv canvas { height: 250px; }
  .play-cases { margin: 0 -8px; padding: 12px 8px 8px; }
  .play-tbl td, .play-tbl th { padding: 7px 6px; }
  .play-gamecta { grid-template-areas: "k go" "b go" "t t"; }
  .play-dek2 { display: none; }
  .play-presets { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .play-presets::-webkit-scrollbar { display: none; }
  .play-pre { flex: none; }
  .play-tbl { font-size: 12.5px; }
  .play-tbl .mono { font-size: 11px; }
  .play-pick { margin: 0 -8px 14px; padding: 12px 0 10px; border-radius: 14px; }
  .play-pick > .play-k, .play-pick .play-gl, .play-pick .play-about { padding: 0 12px; }
  .play-pick .play-kx { display: none; }
  .play-pickrow { flex-direction: column; flex-wrap: nowrap; gap: 4px; }
  .play-pgrp-market { flex: none; }
  .play-pick .play-fams { flex-wrap: nowrap; overflow-x: auto; padding: 2px 12px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .play-pick .play-fams::-webkit-scrollbar { display: none; }
  .play-pick .play-fam { flex: none; }
  .play-reset { margin-left: 0; }
}
/* ---- PLAY: the home teaser card ("Play a pattern", home.html) ---- */
.ptz { position: relative; margin: 22px 0 6px; padding: 14px 18px 12px; border-radius: 16px; background: linear-gradient(180deg, #111419 0%, #0B0D11 100%);
  border: 1px solid rgba(255,255,255,.07); border-top-color: rgba(255,255,255,.12); border-bottom-color: rgba(255,255,255,.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 4px rgba(0,0,0,.6), 0 34px 70px -38px #000; }
.ptz::before { content: ""; position: absolute; left: 18px; right: 18px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--blue), transparent); opacity: .55; }
.ptz-h { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; }
.ptz-k { margin: 0; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--blue); }
.ptz-dots { display: inline-flex; gap: 5px; margin-left: auto; }
.ptz-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink4); transition: background-color .3s ease, transform .3s ease; }
.ptz-dots i.on { background: var(--blue); transform: scale(1.25); }
.ptz-rot { display: flex; flex-direction: column; gap: 4px; }
.ptz-i { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "set cta" "res cta"; align-items: center; gap: 2px 16px;
  padding: 8px 10px; margin: 0 -10px; border-radius: 10px; color: var(--ink); text-decoration: none; transition: background-color .15s ease; }
.ptz-i:hover { color: var(--ink); background: rgba(79,140,255,.06); }
.ptz-set { grid-area: set; font-size: 14px; font-weight: 600; color: var(--ink2); }
.ptz-res { grid-area: res; font-size: clamp(19px, 2.2vw, 25px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.ptz-res b { font-size: 1.18em; } .ptz-res b.t-good { color: var(--mint); } .ptz-res b.t-flat { color: var(--amber); }
.ptz-cta { grid-area: cta; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--blue-dim); background: rgba(79,140,255,.10); font-size: 11.5px;
  letter-spacing: .06em; color: var(--ink); white-space: nowrap; }
.ptz-i:hover .ptz-cta { border-color: var(--blue); }
html.js .ptz-rot.rot .ptz-i:not(.on) { display: none; }
html.js .ptz-rot.rot .ptz-i.on { animation: ptz-in .45s ease-out; }
@keyframes ptz-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ptz-foot { margin: 6px 0 0; font-size: 10.5px; color: var(--ink3); }
.ptz-foot a { color: var(--ink2); }
@media (max-width: 640px) {
  .ptz { padding: 12px 12px 10px; margin: 16px -8px 4px; }
  .ptz-i { grid-template-columns: minmax(0, 1fr); grid-template-areas: "set" "res" "cta"; gap: 3px; }
  .ptz-cta { justify-self: start; margin-top: 6px; padding: 7px 12px; }
  .ptz-set { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { html.js .ptz-rot.rot .ptz-i.on { animation: none; } .ptz-dots i { transition: none; } }

/* ---- PLAY: "Beat the pattern" (/play/game) ---- */
.game { max-width: 860px; margin: 0 auto; }
.game-hero { padding: 6px 0 0; margin-bottom: 12px; }
.game-hero .kicker { font-family: var(--mono); font-size: 10px; letter-spacing: .38em; color: var(--blue); text-transform: uppercase; margin: 0 0 8px; }
.game-hero h1 { font-size: clamp(36px, 6vw, 60px); letter-spacing: -.03em; line-height: 1; }
.game-hero .dek { margin: 10px 0 0; }
.game-score { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 12px; }
.gs-i { display: inline-flex; align-items: baseline; gap: 7px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line2);
  background: var(--bg2); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.gs-i b { display: inline-block; font-size: 16px; letter-spacing: 0; color: var(--ink); }
.gs-rd { margin-left: auto; }
.game-hot .gs-streak { border-color: var(--blue); }
.game-hot .gs-streak b { color: var(--blue); }
.gs-pop { animation: play-bump .38s cubic-bezier(.2,.9,.3,1.4); }
.game-card { position: relative; border-radius: 18px; padding: 16px 16px 18px; background: linear-gradient(180deg, #111419 0%, #0B0D11 100%);
  border: 1px solid rgba(255,255,255,.07); border-top-color: rgba(255,255,255,.12); border-bottom-color: rgba(255,255,255,.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 4px rgba(0,0,0,.6), 0 40px 90px -40px #000; }
.game-card[hidden] { display: none; }
.game-top { display: flex; justify-content: space-between; gap: 10px; margin: 0 2px 10px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.game-top span:first-child { color: var(--ink); font-weight: 700; }
.game-well { border-radius: 12px; background: #06070A; box-shadow: inset 0 3px 14px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.045); padding: 4px 4px 0; min-height: 200px; }
svg.game-svg { display: block; width: 100%; height: 290px; }
.game-svg .g-grid { stroke: rgba(255,255,255,.055); } .game-svg .g-zero { stroke: rgba(236,239,244,.25); stroke-dasharray: 3 3; }
.game-svg .g-yl { font: 400 10.5px var(--mono); fill: var(--ink3); }
.game-svg .g-xl { font: 400 10.5px var(--mono); fill: var(--ink3); }
.game-svg .g-area { fill: url(#g-fill); }
.game-svg .g-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.game-svg .g-hl { stroke: rgba(79,140,255,.22); stroke-width: 2; }
.game-svg .g-hide { stroke: rgba(79,140,255,.35); stroke-dasharray: 4 4; }
.game-svg .g-qm { font: 800 64px var(--sans); fill: var(--blue); fill-opacity: .9; text-anchor: middle; }
.game-svg .g-ql { font: 600 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; fill: var(--ink2); text-anchor: middle; }
.game-svg .g-now { stroke: rgba(236,239,244,.4); stroke-dasharray: 2 3; }
.game-svg .g-dot { fill: var(--ink); stroke: #06070A; stroke-width: 2; }
.game-svg .g-fut { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.game-svg .g-fut.g-good { stroke: var(--mint); } .game-svg .g-fut.g-bad { stroke: var(--red); }
.game-svg .g-head.g-good { fill: var(--mint); } .game-svg .g-head.g-bad { fill: var(--red); }
.game-svg .g-head { stroke: #06070A; stroke-width: 2; }
.game-svg .g-end { font: 800 15px var(--mono); } .game-svg .g-end.g-good { fill: var(--mint); } .game-svg .g-end.g-bad { fill: var(--red); }
.game-svg .g-rng { stroke: var(--blue); stroke-width: 6; stroke-linecap: round; stroke-opacity: .35; }
.game-svg .g-med { stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 5 4; }
.game-svg .g-mdot { fill: var(--blue); }
.game-nojs { margin: 12px 0 0; font-size: 12px; color: var(--ink3); text-align: center; }
html.js .game-nojs { display: none; }
.game-ask { text-align: center; padding: 14px 0 2px; }
.game-ask[hidden], .game-rev[hidden], .game-done[hidden] { display: none; }
.game-q { margin: 0 0 12px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.game-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 560px; margin: 0 auto; }
.game-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 68px; padding: 10px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--line2); background: rgba(0,0,0,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 24px -14px #000;
  transition: transform .1s ease, border-color .15s ease, background-color .15s ease; }
.game-btn b { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.game-btn small { font: 400 10px var(--mono); color: var(--ink3); letter-spacing: .08em; }
.game-btn-good { border-color: rgba(56,242,164,.45); } .game-btn-good b { color: var(--mint); }
.game-btn-good:hover { background: rgba(56,242,164,.10); border-color: var(--mint); }
.game-btn-bad { border-color: rgba(255,77,94,.45); } .game-btn-bad b { color: var(--red); }
.game-btn-bad:hover { background: rgba(255,77,94,.10); border-color: var(--red); }
.game-btn:active, .game-next:active { transform: scale(.97); }
.game-rev { padding: 14px 2px 0; }
.game-in { animation: game-in .32s ease-out; }
@keyframes game-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.game-verdict { margin: 0 0 12px; font-size: clamp(22px, 3.4vw, 30px); font-weight: 800; letter-spacing: -.02em; text-align: center; }
.game-verdict b { font-variant-numeric: tabular-nums; }
.game-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.game-who { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px; border-radius: 12px; background: rgba(0,0,0,.34);
  border: 1px solid rgba(255,255,255,.05); box-shadow: inset 0 2px 6px rgba(0,0,0,.6); }
.game-who .mono { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }
.game-who b { font-size: 20px; font-weight: 800; }
.game-who small { font-size: 12px; color: var(--ink2); line-height: 1.4; }
.game-who-good { border-color: rgba(56,242,164,.3); } .game-who-good b { color: var(--mint); }
.game-who-bad { border-color: rgba(255,77,94,.3); } .game-who-bad b { color: var(--red); }
.game-who-flat b { color: var(--amber); }
.game-coin { margin: 12px 0 0; font-size: 13px; color: var(--ink2); line-height: 1.55; text-align: center; }
.game-next { display: block; width: 100%; max-width: 560px; min-height: 52px; margin: 14px auto 0; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--blue); background: rgba(79,140,255,.14); color: var(--ink); font: 800 16px var(--sans); transition: transform .1s ease, background-color .15s ease; }
.game-next:hover { background: rgba(79,140,255,.22); }
.game-done { margin-top: 4px; padding: 24px 18px; border-radius: 18px; text-align: center; background: linear-gradient(180deg, #111419 0%, #0B0D11 100%);
  border: 1px solid rgba(255,255,255,.07); border-top-color: rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 40px 90px -40px #000; }
.game-final { margin: 0; font-size: clamp(26px, 4vw, 38px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--ink); }
.game-final span { font-size: .6em; }
.game-final small { display: block; margin: 10px auto 0; max-width: 52ch; font-size: 13px; font-weight: 500; letter-spacing: 0; line-height: 1.5; color: var(--ink2); }
.game-final.t-good span { color: var(--mint); } .game-final.t-bad span { color: var(--red); } .game-final.t-flat span { color: var(--amber); }
.game-line { margin: 12px auto 16px; max-width: 46ch; padding: 9px 12px; border-radius: 10px; border: 1px dashed var(--line2); font-size: 13px; color: var(--ink); }
.game-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.game-again { border-color: var(--blue-dim); }
.game-how { margin: 28px 0 0; }
.game-how h2 { font-size: 20px; }
.game-how ul { margin: 8px 0 12px; padding-left: 18px; color: var(--ink2); font-size: 14px; line-height: 1.6; }
.game-how li + li { margin-top: 4px; }
@media (max-width: 640px) {
  .game-score { gap: 6px; margin: 12px 0 10px; }
  .gs-i { padding: 6px 10px; font-size: 9.5px; }
  .gs-i b { font-size: 14px; }
  .gs-best { display: none; }
  .game-card { padding: 12px 10px 14px; margin: 0 -8px; border-radius: 14px; }
  .game-top { flex-wrap: wrap; gap: 2px 10px; font-size: 10px; letter-spacing: .06em; }
  .game-top span:last-child { margin-left: auto; }
  svg.game-svg { height: 236px; }
  .game-q { font-size: 16px; }
  .game-btn { min-height: 64px; }
  .game-btn small { display: none; }
  .game-hero h1 { font-size: 38px; }
  .game-hero .dek { font-size: 14px; line-height: 1.55; }
  .game-vs { gap: 8px; }
  .game-who { padding: 9px 10px; }
  .game-who b { font-size: 17px; }
  .game-who small { font-size: 11px; }
  .game-verdict { font-size: 22px; margin-bottom: 10px; }
  .game-coin { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .gs-pop, .game-in { animation: none; } .game-btn, .game-next { transition: none; } }
@media (prefers-reduced-motion: reduce) {
  .play-bump { animation: none; }
  .play-pre, .play-fam, .play-chip, .play-sd, .play-btn, .play-gamecta, .play-bar { transition: none; }
}

/* ============================================================================================
   PAGES LANE (round 7) · NAV: Predictions · Setups · Calendar · Lab · Play · Accuracy · Tokens on desktop; on phones and
   tablets (<= 900px, where the top nav folds away) the bottom bar carries Today · Predictions · Calendar · Play · More,
   More opening a no-JS sheet (a <details>) with every other section.
   ============================================================================================ */
@media (max-width: 1180px) and (min-width: 901px) {
  .topnav { gap: 16px; } .topnav a { letter-spacing: .1em; }
  .mast .search { min-width: 150px; } .rec .long { display: none; }
}
@media (max-width: 1100px) and (min-width: 901px) { .wordmark .desk { display: none; } }
@media (max-width: 900px) {
  .bnav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; border-top: 1px solid rgba(255,255,255,.08);
    background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding-bottom: env(safe-area-inset-bottom); }
  .bnav > a, .bn-more > summary { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 50px; padding: 8px 0 9px; font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); text-decoration: none; }
  .bnav > a.on, .bn-more > summary.on { color: var(--blue); }
  .bnav .ic { width: 16px; height: 16px; }
  .foot { padding-bottom: calc(var(--s8) + 64px); }
}
.bn-more { flex: 1; display: flex; position: relative; }
.bn-more > summary { list-style: none; cursor: pointer; width: 100%; user-select: none; }
.bn-more > summary::-webkit-details-marker { display: none; }
.bn-more[open] > summary { color: var(--ink); }
.bn-sheet { position: absolute; right: 8px; bottom: calc(100% + 10px); min-width: 216px; padding: 6px; display: grid; gap: 2px;
  border-radius: 14px; background: rgba(11,13,17,.97); border: 1px solid rgba(255,255,255,.1); border-top-color: rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 -24px 60px -24px #000; }
.bnav .bn-sheet a { flex: none; display: flex; flex-direction: row; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); text-decoration: none; }
.bnav .bn-sheet a:hover { background: rgba(255,255,255,.04); color: var(--ink); }
.bnav .bn-sheet a.on { color: var(--blue); background: rgba(79,140,255,.08); }

/* ============================================================================================
   PAGES LANE (round 7) · CATALYST CALENDAR (/calendar list view + /calendar/<ym> month grid; web/static/calendar.js).
   Built for scanning: one raised row per catalyst — date chip + live clock, token, event badge, the 'last N like it'
   strip in a recessed well (one dot per past case, oldest -> newest), avg move and chance chips, pattern / token links.
   Phones: every row folds into a four-line card. The pulsing ring marks catalysts under 24 hours away.
   ============================================================================================ */
.cchero h1 { font-size: clamp(32px, 4.6vw, 54px); }
.cc-ym { color: var(--ink3); font-weight: 600; letter-spacing: -.01em; }
.cc-dek { margin: 8px 0 0; max-width: 72ch; color: var(--ink2); font-size: 15px; }
.cc-tiles { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 10px; margin: 18px 0 0; }
.cct-i { min-width: 0; padding: 12px 14px; border: 1px solid var(--line2); border-radius: 12px; background-color: var(--bg2);
  background-image: linear-gradient(180deg, rgba(255,255,255,.034), rgba(255,255,255,.008) 38%, rgba(255,255,255,0) 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 1px rgba(0,0,0,.6), 0 20px 44px -24px rgba(0,0,0,.9); }
.cct-l { margin: 0 0 6px; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cct-v { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cct-v .mono { font-size: 11px; font-weight: 500; letter-spacing: .06em; color: var(--k-cat); }
.cct-c { margin: 6px 0 0; font-size: 11px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cct-next .ccclk { margin-right: 8px; font-size: 15px; color: var(--ink); font-weight: 700; }
@media (max-width: 960px) { .cc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cct-next { grid-column: 1 / -1; } }
/* toolbar: view switch, read + sort toggles (recessed wells, the lit pill raised), calendar feeds */
.cc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 18px 0 0; }
.cc-seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.07); box-shadow: inset 0 1px 3px rgba(0,0,0,.6); max-width: 100%; }
.cc-seg a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 13px; border-radius: 999px; font-size: 11.5px; letter-spacing: .04em;
  color: var(--ink2); text-decoration: none; white-space: nowrap; transition: background .2s, color .2s; }
.cc-seg a:hover { color: var(--ink); background: var(--bg3); }
.cc-seg a.on { background: var(--ink); color: var(--bg0); font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.7), inset 0 -1px 0 rgba(0,0,0,.18); }
.cc-seg-l { padding: 0 6px 0 10px; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink3); }
.cc-feed { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 0 auto; font-size: 10.5px; }
.cc-feed span { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink3); margin-right: 2px; }
.cc-feed a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 11px; border: 1px solid var(--blue-dim); border-radius: 999px;
  color: var(--blue); text-decoration: none; background: rgba(79,140,255,.04); }
.cc-feed a:hover { border-color: var(--blue); background: rgba(79,140,255,.1); color: var(--blue); }
.cc-feed .ic { width: 11px; height: 11px; }
/* filter pills: every one a link that toggles itself */
.cc-filt { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 0; }
.cc-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.ccp { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 999px;
  background: var(--bg1); color: var(--ink2); font-family: var(--mono); font-size: 11.5px; text-decoration: none; white-space: nowrap; cursor: pointer; }
.ccp b { font-weight: 500; color: var(--ink3); }
a.ccp:hover, summary.ccp:hover { border-color: var(--blue-dim); color: var(--ink); }
.ccp.on { color: var(--blue); border-color: var(--blue); background: rgba(79,140,255,.1); }
.ccp.on b { color: var(--blue); }
.ccp.off { opacity: .42; cursor: default; }
.ccx-clear { border-style: dashed; }
.cc-more > summary { list-style: none; width: max-content; }
.cc-more > summary::-webkit-details-marker { display: none; }
.cc-more > summary::after { content: "+"; margin-left: 2px; color: var(--ink3); }
.cc-more[open] > summary::after { content: "−"; }
.cc-more-in { display: grid; gap: 8px; margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.35);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.04); }
.cc-fl { min-width: 48px; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink3); }
.cc-fnote { margin: 0; font-size: 10.5px; color: var(--ink3); }
/* the board: groups of raised panels, rows hairline-separated */
.ccboard { display: grid; gap: 24px; margin: 26px 0 0; }
.ccg { min-width: 0; }
.ccg-h { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 10px; font-size: 20px; letter-spacing: -.015em; }
.ccg-h72 .ccg-t::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 9px 2px 1px; border-radius: 50%; background: var(--blue);
  box-shadow: 0 0 0 3px rgba(79,140,255,.18); vertical-align: middle; }
.ccg-n { padding: 2px 9px; border-radius: 999px; background: var(--bg3); font-family: var(--mono); font-size: 12.5px; color: var(--ink); font-weight: 700; }
.ccg-s { font-size: 10px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.ccg-box { overflow: hidden; border: 1px solid var(--line2); border-radius: 14px; background-color: var(--bg2);
  background-image: linear-gradient(180deg, rgba(255,255,255,.034), rgba(255,255,255,.008) 38%, rgba(255,255,255,0) 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 1px rgba(0,0,0,.6), 0 20px 44px -24px rgba(0,0,0,.9); }
.ccb { width: 100%; border-collapse: collapse; font-size: 13px; }
.ccb thead th { padding: 10px 12px 8px; background: transparent; border-bottom: 1px solid var(--line); font-size: 8.5px; letter-spacing: .2em; }
.ccb td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ccb tbody tr:last-child td { border-bottom: 0; }
.ccb tbody tr:hover { background: rgba(255,255,255,.022); }
.ccw { white-space: nowrap; width: 1%; }
.ccw > * { vertical-align: middle; }
/* the ticket: weekday + date over the live clock, raised; the ring pulses on catalysts under 24 hours away */
.ccd { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px;
  min-width: 112px; padding: 7px 10px 8px; border-radius: 10px; line-height: 1; background: linear-gradient(180deg, #181C24, #0E1116);
  border: 1px solid rgba(255,255,255,.09); border-top-color: rgba(255,255,255,.15); box-shadow: 0 8px 16px -10px rgba(0,0,0,.95); }
.ccd small { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; color: var(--ink3); }
.ccb .ccclk, .ccclk { font-family: var(--mono); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .01em; color: var(--ink); white-space: nowrap; }
.ccr.hot .ccd { border-color: rgba(79,140,255,.85); }
.ccr.hot .ccd::after { content: ""; position: absolute; inset: -4px; border-radius: 13px; border: 2px solid rgba(79,140,255,.8); pointer-events: none;
  animation: ccring 1.8s cubic-bezier(.2,.6,.3,1) infinite; }
.ccr.hot .ccclk { color: var(--blue); }
@keyframes ccring { 0% { transform: scale(.94); opacity: .95; } 70%, 100% { transform: scale(1.2); opacity: 0; } }
.cct { white-space: nowrap; }
.cct > .tkl, .cct > .av { margin-right: 10px; vertical-align: middle; }
.cct-n { display: inline-flex; flex-direction: column; vertical-align: middle; line-height: 1.25; min-width: 0; }
.cct-n a { color: var(--ink); }
.cct-n b { font-size: 14.5px; letter-spacing: .02em; }
.cct-n small { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--ink3); }
.ccbdg { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid var(--line2); border-radius: 7px;
  background: rgba(0,0,0,.28); font-size: 11px; color: var(--ink2); white-space: nowrap; }
.ccb .ccbdg { font-size: 11px; color: var(--ink2); }
.ccbdg b { font-size: 10px; letter-spacing: .14em; color: var(--kc, var(--ink)); }
.cb-unlock { --kc: var(--k-cat); border-color: var(--k-cat-dim); }
.cb-listing, .cb-futures_listing { --kc: var(--k-list); border-color: var(--k-list-dim); }
.cb-delisting, .cb-hack { --kc: var(--red); border-color: var(--red-dim); }
.cb-raise { --kc: var(--k-board); border-color: var(--k-board-dim); }
.ccx small, .ccb .ccx small { display: block; margin-top: 5px; font-size: 10.5px; color: var(--ink3); }
.ccb .ccx .ccalso { color: var(--ink2); }
/* the strip: one dot per past case in a recessed well, oldest -> newest, the newest ringed */
.ccs { display: inline-flex; flex-direction: column; gap: 6px; max-width: 100%; vertical-align: middle; }
.ccs-dots { display: flex; flex-wrap: wrap; gap: 2px; width: fit-content; max-width: 100%; padding: 6px 8px; border-radius: 8px; background: #06070A;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.05); }
.ccs-dots i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ink4); }
.ccs-dots i.good { background: var(--mint); box-shadow: 0 0 5px rgba(56,242,164,.35); }
.ccs-dots i.bad { background: var(--red); box-shadow: 0 0 5px rgba(255,77,94,.3); }
.ccs-dots i.flat { background: var(--ink3); }
.ccs-dots i:last-child { outline: 1.5px solid rgba(236,239,244,.6); outline-offset: 1px; }
.ccs-dots i.pop { animation: ccdot .42s cubic-bezier(.2,.8,.3,1.35) both; animation-delay: calc(var(--i, 0) * 12ms); }
@keyframes ccdot { from { transform: scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }
.ccb .ccs-cap { font-size: 11px; letter-spacing: .01em; color: var(--ink3); }
.ccb .ccs-cap b { font-weight: 600; color: var(--ink2); }
.ccb .ccs-cap b.t-good { color: var(--mint); }
.ccb .ccs-cap b.t-bad { color: var(--red); }
.ccb .ccs-cap em { font-style: normal; color: var(--amber); }
.ccb .ccs-none { display: inline-block; padding: 6px 9px; border: 1px dashed var(--line2); border-radius: 8px; font-size: 10.5px; color: var(--ink3); }
/* avg + chance chips */
.ccchip { display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 9px; border: 1px solid var(--line2); border-radius: 8px; background: rgba(0,0,0,.28);
  font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--ink); white-space: nowrap; transition: color .3s, border-color .3s, background-color .3s; }
.ccchip em { font-style: normal; font-weight: 400; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }
.ccchip.t-good { color: var(--mint); border-color: var(--mint-dim); background-color: rgba(56,242,164,.06); }
.ccchip.t-bad { color: var(--red); border-color: var(--red-dim); background-color: rgba(255,77,94,.06); }
.ccchip.t-flat { color: var(--amber); border-color: var(--amber-dim); background-color: rgba(255,180,77,.06); }
.ccchip.t-neutral, .ccchip.t-unknown { color: var(--ink3); }
.ccodds { font-size: 13.5px; }
.ccb .ccflip { display: block; margin-top: 5px; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.ccc { width: 1%; white-space: nowrap; }
.ccc .ccchip { display: flex; justify-content: center; width: max-content; min-width: 98px; }
.ccc .ccchip + .ccchip { margin-top: 5px; }
.cco { width: 1%; white-space: nowrap; text-align: right; }
.ccb .cco a { display: flex; align-items: center; justify-content: flex-end; min-height: 30px; padding: 0 8px; border-radius: 7px; font-size: 11px; color: var(--ink2); }
.ccb .cco a:hover { color: var(--blue); background: rgba(79,140,255,.07); }
.cc-quiet { margin: 0; padding: 14px 16px; border: 1px dashed var(--line2); border-radius: 14px; font-size: 12px; color: var(--ink2); }
.cc-quiet a { color: var(--ink); font-weight: 700; }
.cc-empty, .lab-empty { margin: 0; padding: 14px 16px; border: 1px dashed var(--line2); border-radius: 14px; font-size: 11.5px; color: var(--ink3); }
.cc-foot { max-width: 112ch; margin: 30px 0 6px; font-size: 10.5px; line-height: 1.7; color: var(--ink3); }
.cc-also { margin: 0; font-size: 11px; line-height: 2; color: var(--ink3); }
.cc-also a { color: var(--ink2); }
.cc-tip { position: absolute; z-index: 60; max-width: 240px; padding: 7px 10px; border: 1px solid var(--line2); border-radius: 9px; background: rgba(11,13,17,.97);
  box-shadow: 0 14px 34px -12px #000; font-size: 11px; line-height: 1.5; color: var(--ink2); pointer-events: none; }
/* month view: the grid keeps the desk styles on the new toolbar (cells on dark surfaces, the room lit only where a day
   holds catalysts); under it every catalyst of the month as one scannable line; phones read the lines, not the grid */
.ccmonth { margin: 26px 0 0; }
.ccmonth .calmonths { display: flex; flex-wrap: wrap; gap: 6px; }
.ccmonth .cal { background: var(--line); border-color: var(--line2); border-radius: 12px; }
.ccmonth .cd { background: #08090C; }
.ccmonth .cd.off { background: #050608; }
.ccmonth .cd.has { background: var(--bg2); }
.ccmonth .cd.tdy { background: rgba(79,140,255,.07); }
.ccagenda { margin: 26px 0 0; }
.cc-msum { margin: 0 0 12px; max-width: 120ch; font-size: 11.5px; line-height: 1.7; color: var(--ink2); }
.cca-list { margin: 0; padding: 0; list-style: none; overflow: hidden; border: 1px solid var(--line2); border-radius: 14px; background-color: var(--bg2);
  background-image: linear-gradient(180deg, rgba(255,255,255,.034), rgba(255,255,255,.008) 38%, rgba(255,255,255,0) 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 1px rgba(0,0,0,.6), 0 20px 44px -24px rgba(0,0,0,.9); }
.ccai { display: grid; grid-template-columns: 112px 150px 200px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.ccai:last-child { border-bottom: 0; }
.ccai-d { font-size: 10.5px; letter-spacing: .08em; color: var(--ink2); }
.ccai-t { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ccai-t a { color: var(--ink); text-decoration: none; }
.ccai-t b { font-size: 14px; }
.ccai-t small { font-size: 11.5px; color: var(--ink3); }
.ccai .ccbdg { justify-self: start; }
.ccai-s { font-size: 11px; color: var(--ink3); }
.ccai-s a { color: var(--ink2); }
@media (max-width: 760px) {
  .ccai { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "d c" "t c" "b b" "s s"; gap: 6px 10px; padding: 12px; }
  .ccai-d { grid-area: d; } .ccai-t { grid-area: t; } .ccai .ccbdg { grid-area: b; } .ccai-s { grid-area: s; }
  .ccai-c { grid-area: c; align-self: start; }
}
@media (max-width: 700px) { .ccmonth .cal, .ccmonth .callegend { display: none; } }
@media (max-width: 760px) {
  .ccmonth .calnav-m { display: none; }
  .ccmonth .calmonths { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 2px; scrollbar-width: none; }
  .ccmonth .calmonths::-webkit-scrollbar { display: none; }
  .ccmonth .calmonths .ccp { flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ccr.hot .ccd::after { animation: none; transform: none; opacity: .85; }
  .ccs-dots i.pop { animation: none; }
  .ccchip, .cc-seg a { transition: none; }
}
/* phones + tablets: the toolbar packs into three lines (view + sort / read / feeds), the kind pills swipe sideways inside
   their own row, and each catalyst folds into a card: ticket + token + lean chips / badge / the strip / the links */
@media (max-width: 760px) {
  .cc-bar { gap: 8px; }
  .cc-seg-view { order: 1; } .cc-seg-sort { order: 2; } .cc-seg-read { order: 3; } .cc-feed { order: 4; margin-left: 0; }
  .cc-seg a { padding: 0 11px; }
  .cc-feed > span { display: none; }
  .cc-kinds { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 2px; scrollbar-width: none; }
  .cc-kinds::-webkit-scrollbar { display: none; }
  .cc-kinds .ccp { flex: none; }
}
@media (max-width: 980px) {
  .ccb thead { display: none; }
  .ccb, .ccb tbody { display: block; }
  .ccb tr.ccr { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "w t c" "x x c" "l l l" "o o o";
    gap: 10px; align-items: center; padding: 12px 12px 6px; border-bottom: 1px solid var(--line); }
  .ccb tbody tr.ccr:last-child { border-bottom: 0; }
  .ccb tr.ccr > td { display: block; width: auto; padding: 0; border: 0; }
  .ccb tr.ccr > td.ccw { grid-area: w; display: flex; align-items: center; }
  .ccb tr.ccr > td.cct { grid-area: t; display: flex; align-items: center; min-width: 0; overflow: hidden; }
  .ccb tr.ccr > td.ccc { grid-area: c; justify-self: end; align-self: start; }
  .ccb .ccc .ccchip { margin-left: auto; min-width: 84px; padding: 5px 7px; font-size: 12px; }
  .ccb .ccc .ccodds { font-size: 12.5px; }
  .ccb tr.ccr > td.ccx { grid-area: x; min-width: 0; }
  .ccb tr.ccr > td.ccl { grid-area: l; min-width: 0; }
  .ccb tr.ccr > td.cco { grid-area: o; display: flex; justify-content: flex-end; gap: 2px; margin: -6px -6px 0 0; }
  .ccb tr.ccr > td.cco a { min-height: 36px; }
  .ccd { min-width: 0; padding: 6px 9px 7px; }
  .ccb .ccw .starb { position: absolute; left: 12px; bottom: 8px; min-width: 36px; min-height: 30px; margin: 0; padding: 0 8px; font-size: 12px; }
  .cct > .tkl, .cct > .av { margin-right: 8px; }
  .cct-n small { max-width: 120px; }
  .ccs { display: flex; }
  .ccs-dots { padding: 6px 7px; }
  .ccs-dots i { width: 6px; height: 6px; }
  .ccb .ccs-cap { white-space: normal; }
}
@media (max-width: 380px) { .cct > .tkl, .cct > .av { display: none; } }

/* ============================================================================================
   PAGES LANE (round 7) · THE LAB (/lab): what we tried, what worked, what failed. A scoreboard of every pattern model
   per horizon (status badge, calls, hit rate vs the lazy call on a recessed track, skill, luck test, month-by-month
   bars), setups' and event patterns' out-of-sample checks as pass / fail, the strategy graveyard (tombstones) and the
   method log (a timeline). Status colours: PROVEN brand blue (a marker, never a surface), ON TRIAL orange (not yet),
   FAILED SO FAR red, RETIRED grey.
   ============================================================================================ */
.labhero h1 { font-size: clamp(38px, 5.4vw, 64px); }
.lab-dek { max-width: 64ch; margin: 8px 0 14px; font-size: 15.5px; color: var(--ink2); }
.lab-hz { margin: 4px 0 14px; }
.lab-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.lt { min-width: 0; padding: 12px 14px; border: 1px solid var(--line2); border-top: 3px solid var(--line2); border-radius: 12px; background-color: var(--bg2);
  background-image: linear-gradient(180deg, rgba(255,255,255,.034), rgba(255,255,255,.008) 38%, rgba(255,255,255,0) 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 1px rgba(0,0,0,.6), 0 20px 44px -24px rgba(0,0,0,.9); }
.lt-proven { border-top-color: var(--blue); } .lt-trial { border-top-color: var(--amber); }
.lt-failed { border-top-color: var(--red); } .lt-retired { border-top-color: var(--ink4); }
.lt-l { margin: 0 0 6px; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-v { margin: 0; font-family: var(--mono); font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
@media (max-width: 760px) { .lab-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lab-tiles .lt:last-child { grid-column: 1 / -1; } }
.lab-sec { margin: 38px 0 0; }
.lab-sh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 12px; }
.lab-sh h2 { margin: 0; font-size: 24px; }
.lab-sh p { margin: 0; font-size: 11px; }
.lab-h3 { display: flex; align-items: baseline; gap: 12px; margin: 22px 0 10px; font-size: 16px; }
.lab-h3 a { font-size: 10.5px; font-weight: 400; color: var(--ink3); text-decoration: none; }
.lab-h3 a:hover { color: var(--blue); }
.demo-note + .lab-hz { margin-top: 14px; }
/* status badges (scoreboard, checks, graveyard, log) */
.lbadge { display: inline-flex; align-items: center; justify-content: center; padding: 4px 8px; border: 1px solid var(--line2); border-radius: 6px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .14em; white-space: nowrap; color: var(--ink2); }
.lbadge-proven, .lbadge-v-kept { color: var(--blue); border-color: var(--blue-dim); background: rgba(79,140,255,.1); }
.lbadge-trial, .lbadge-v-replaced { color: var(--amber); border-color: var(--amber-dim); background: rgba(255,180,77,.07); }
.lbadge-failed, .lbadge-v-failed { color: var(--red); border-color: var(--red-dim); background: rgba(255,77,94,.08); }
.lbadge-retired, .lbadge-v-retired { color: var(--ink3); border-style: dashed; }
.lbadge-v-changed { color: var(--k-pwr); border-color: var(--k-pwr-dim); background: rgba(143,166,191,.07); }
.ltag { display: inline-flex; align-items: center; padding: 2px 8px; border: 1px solid var(--line2); border-radius: 999px; font-size: 9.5px; letter-spacing: .05em; color: var(--ink3); white-space: nowrap; }
.ltag-ev { border-style: dashed; }
/* the scoreboard */
.lb { overflow: hidden; border: 1px solid var(--line2); border-radius: 14px; background-color: var(--bg2);
  background-image: linear-gradient(180deg, rgba(255,255,255,.034), rgba(255,255,255,.008) 38%, rgba(255,255,255,0) 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 1px rgba(0,0,0,.6), 0 20px 44px -24px rgba(0,0,0,.9); }
.lb[hidden] { display: none; }
.lb-head, .lbr { display: grid; grid-template-columns: minmax(0, 2.4fr) 122px 70px minmax(150px, 1.5fr) 66px 70px 150px; gap: 14px; align-items: center; padding: 13px 16px; }
.lb-head { padding-top: 11px; padding-bottom: 9px; border-bottom: 1px solid var(--line); font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink3); }
.lbr { border-bottom: 1px solid var(--line); transition: background .15s; }
.lbr:last-child { border-bottom: 0; }
.lbr:hover { background: rgba(255,255,255,.02); }
.lbr em { display: none; }
.lb-p { display: flex; align-items: stretch; gap: 12px; min-width: 0; }
.lb-sw { flex: none; width: 4px; border-radius: 3px; background: var(--c, var(--ink3)); }
.lb-n { margin: 0; font-size: 14.5px; font-weight: 700; }
.lb-i { margin: 3px 0 0; font-size: 12px; line-height: 1.45; color: var(--ink3); }
.lb-c b, .lb-k b, .lb-t b, .lb-h b { font-size: 14px; font-weight: 700; }
.lb-h small { display: block; margin-top: 2px; font-size: 10.5px; color: var(--ink3); white-space: nowrap; }
.lb-h small .t-good, .lb-h small .t-bad { font-weight: 700; }
.lb-hb { position: relative; display: block; height: 8px; margin-top: 7px; border-radius: 99px; background: #06070A;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.05); }
.lb-hbe { position: absolute; top: 1px; bottom: 1px; border-radius: 99px; }
.lb-hbe.good { background: var(--mint); }
.lb-hbe.bad { background: var(--red); }
.lb-hbe.neutral { background: var(--ink3); }
.lb-hbl { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); }
.lb-m small, .lb-t small { display: block; margin-top: 3px; font-size: 10px; color: var(--ink3); }
.lb-mb { display: block; overflow: visible; }
.lb-mb0 { stroke: var(--line2); stroke-width: 1; }
.lb-mbr.good { fill: var(--mint); }
.lb-mbr.bad { fill: var(--red); }
.lb-mbn { fill: var(--ink4); }
.lb-mnone { display: inline-block; padding: 6px 8px; border: 1px dashed var(--line2); border-radius: 8px; font-size: 10px; line-height: 1.4; color: var(--ink3); }
.lb-failed .lb-n, .lb-retired .lb-n { color: var(--ink2); }
.lb-retired { opacity: .72; }
.lab-key { display: grid; gap: 7px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 11px; color: var(--ink3); }
.lab-key li { display: flex; align-items: baseline; gap: 10px; }
.lab-key .lbadge { min-width: 112px; }
.lab-key li.lab-key-n { display: block; margin-top: 4px; line-height: 1.6; }
@media (max-width: 900px) {
  .lb-head { display: none; }
  .lbr { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "p p p s" "c h h k" "t m m m"; gap: 12px 10px; padding: 14px; }
  .lbr em { display: block; margin: 0 0 2px; font-style: normal; font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }
  .lb-p { grid-area: p; } .lb-s { grid-area: s; justify-self: end; align-self: start; } .lb-c { grid-area: c; } .lb-h { grid-area: h; }
  .lb-k { grid-area: k; } .lb-t { grid-area: t; } .lb-m { grid-area: m; }
  .lb-h small { white-space: normal; }
}
/* out-of-sample checks */
.lab-setups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.lsx { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 14px; border: 1px solid var(--line2); border-top: 3px solid var(--line2); border-radius: 12px;
  background-color: var(--bg2); text-decoration: none; color: var(--ink);
  background-image: linear-gradient(180deg, rgba(255,255,255,.034), rgba(255,255,255,.008) 38%, rgba(255,255,255,0) 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 1px rgba(0,0,0,.6), 0 20px 44px -24px rgba(0,0,0,.9); }
.lsx:hover { color: var(--ink); background-color: var(--bg3); }
.lsx-pass { border-top-color: var(--blue); } .lsx-fail { border-top-color: var(--red); } .lsx-mixed { border-top-color: var(--amber); }
.lsx-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; font-size: 10px; }
.lsx-n { margin: 0; font-size: 15px; font-weight: 700; }
.lsx-ab { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--ink); }
.lsx-ab i { font-style: normal; color: var(--ink3); }
.lsx-s, .lsx-l { margin: 0; font-size: 10.5px; color: var(--ink3); }
@media (max-width: 960px) { .lab-setups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .lab-setups { grid-template-columns: 1fr; } }
.lab-pbar { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 10px; font-size: 11px; color: var(--ink3); }
.lab-pbar b { margin-right: 5px; font-size: 18px; color: inherit; }
.lab-pbar span:first-child b { color: var(--ink); }
.lab-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 760px) { .lab-two { grid-template-columns: 1fr; } }
.lpc { overflow: hidden; padding: 4px 0 0; border: 1px solid var(--line2); border-radius: 12px; background: var(--bg2); }
.lpc-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 14px 10px; font-size: 10px; color: var(--ink3); }
.lpr { display: grid; grid-template-columns: minmax(0, 1fr) auto 30px; align-items: center; gap: 10px; min-height: 38px; padding: 6px 14px;
  border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink2); text-decoration: none; }
.lpr:hover { background: rgba(255,255,255,.025); color: var(--ink); }
.lpr-n { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lpr-ab { font-size: 11.5px; color: var(--ink); white-space: nowrap; }
.lpr-c { text-align: right; font-size: 10.5px; }
.lab-note { margin: 8px 0 0; font-size: 10px; color: var(--ink3); }
/* the strategy graveyard: tombstones */
.rip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.rip { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 24px 18px 14px; border: 1px solid rgba(255,255,255,.08); border-top-color: rgba(255,255,255,.15);
  border-radius: 120px 120px 14px 14px / 64px 64px 14px 14px; background: linear-gradient(180deg, #15181E, #0B0D11 72%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 26px 44px -26px #000; }
.rip-top { display: flex; flex-direction: column; align-items: center; gap: 7px; margin: 0; font-size: 11px; letter-spacing: .32em; color: var(--ink3); }
.rip-t { margin: 0 0 2px; text-align: center; font-size: 16px; line-height: 1.3; }
.rip-model .rip-t::after { content: ""; display: block; width: 28px; height: 3px; margin: 8px auto 0; border-radius: 2px; background: var(--c, var(--ink3)); opacity: .8; }
.rip-r { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink2); }
.rip-r em { display: block; margin-bottom: 1px; font-style: normal; font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink3); }
.rip-f { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; margin: auto 0 0; padding-top: 9px; border-top: 1px dashed var(--line2); font-size: 10px; color: var(--ink3); }
/* the method log: a timeline, newest on top */
.mlog { position: relative; display: grid; gap: 12px; margin: 0; padding: 0 0 0 24px; list-style: none; }
.mlog::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; border-radius: 1px; background: linear-gradient(var(--line2), rgba(39,45,55,0)); }
.mlog-e { position: relative; padding: 13px 16px; border: 1px solid var(--line2); border-radius: 12px; background-color: var(--bg2);
  background-image: linear-gradient(180deg, rgba(255,255,255,.034), rgba(255,255,255,.008) 38%, rgba(255,255,255,0) 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 1px rgba(0,0,0,.6), 0 20px 44px -24px rgba(0,0,0,.9); }
.mlog-e::before { content: ""; position: absolute; left: -22px; top: 17px; width: 8px; height: 8px; border-radius: 50%; background: var(--bg0); border: 2px solid var(--vc, var(--ink3)); }
.mlog-kept { --vc: var(--blue); } .mlog-changed { --vc: var(--k-pwr); } .mlog-replaced { --vc: var(--amber); }
.mlog-retired { --vc: var(--ink3); } .mlog-failed { --vc: var(--red); }
.mlog-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 7px; font-size: 10.5px; color: var(--ink3); }
.mlog-t { margin: 0 0 8px; font-size: 15.5px; }
.mlog-d { display: grid; gap: 6px; margin: 0; }
.mlog-d div { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 10px; }
.mlog-d dt { padding-top: 3px; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }
.mlog-d dd { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink2); }
@media (max-width: 520px) { .mlog-d div { grid-template-columns: 1fr; gap: 1px; } }
/* /accuracy -> the Lab */
.acc-lab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 16px 0 0; padding: 12px 16px; border: 1px solid var(--line2); border-left: 3px solid var(--blue);
  border-radius: 10px; background: var(--bg2); text-decoration: none; color: var(--ink2); font-size: 13px; }
.acc-lab b { color: var(--ink); }
.acc-lab .mono { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--blue); }
.acc-lab:hover { color: var(--ink); border-color: var(--blue-dim); border-left-color: var(--blue); }

/* pattern pages: one tap into the playground with this pattern's own cases loaded */
.pat-play { margin: 12px 0 0; }
.pat-play a { display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 9px 16px; border-radius: 999px;
  border: 1px solid rgba(79,140,255,.45); background: rgba(79,140,255,.08); color: var(--ink); font-weight: 700; font-size: 14px;
  text-decoration: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.pat-play a span { font-weight: 400; font-size: 12px; color: var(--ink2); }
.pat-play a:hover { border-color: var(--blue); background: rgba(79,140,255,.14); }

/* ============================================================================================
   MOTION · ROUND 8 (owner, Oct 2: "not enough things moving … don't add stuff, just animate what's there … dopamine
   like pump fun"). No new elements: motion.js tags what the pages already render and these rules move it. Board rows
   cascade in with their chance bars filling and their mini charts drawing themselves; the top row of each board
   breathes in its own colour and gives a small nudge now and then; strong badges catch a passing light; the "setup
   firing" label pulses; the lit half of the home headline shimmers; Lab month bars grow in turn; rows sweep under the
   pointer and tabs press in. All of it sits behind prefers-reduced-motion: no-preference, and nothing starts hidden
   before JS runs (fills use "backwards", so every bar and line is whole again the moment its animation ends).
   ============================================================================================ */
.mo-top-good { --mo-glow: 56,242,164; }
.mo-top-bad { --mo-glow: 255,77,94; }
@media (prefers-reduced-motion: no-preference) {
  /* chance bars fill from the left as their row lands */
  .pp-pop svg.cbar rect:nth-of-type(2) { transform-box: fill-box; transform-origin: 0 50%;
    animation: mo-bar .9s cubic-bezier(.2,.75,.25,1) backwards; animation-delay: calc(var(--d, 0ms) + .12s); }
  @keyframes mo-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  /* mini charts draw themselves: the price so far, then the range fades in and the typical path runs out to the end */
  .pp-pop svg.mo-draw polyline { animation: mo-draw .8s ease-out backwards; animation-delay: calc(var(--d, 0ms) + .12s); }
  .pp-pop svg.mo-draw polyline:last-of-type { animation-duration: 1s; animation-delay: calc(var(--d, 0ms) + .55s); }
  .pp-pop svg.mo-draw polygon { animation: mo-fade .9s ease-out backwards; animation-delay: calc(var(--d, 0ms) + .45s); }
  .pp-pop svg.mo-draw line { animation: mo-soft 2.6s ease-in-out infinite; animation-delay: calc(var(--d, 0ms) + 1.4s); }
  @keyframes mo-draw { from { stroke-dasharray: 100 100; stroke-dashoffset: 100; } to { stroke-dasharray: 100 100; stroke-dashoffset: 0; } }
  @keyframes mo-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes mo-soft { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
  /* the top row of each board: a breathing edge in its own colour and a small nudge every few seconds */
  .mo-top-good, .mo-top-bad { animation: mo-glow 3.4s ease-in-out infinite, mo-nudge 7s ease-in-out 2.2s infinite; }
  .pp-pop.mo-top-good, .pp-pop.mo-top-bad { animation: pp-pop .45s cubic-bezier(.2,.75,.25,1) both, mo-glow 3.4s ease-in-out infinite,
    mo-nudge 7s ease-in-out infinite; }
  @keyframes mo-glow {
    0%, 100% { box-shadow: inset 3px 0 0 rgba(var(--mo-glow), .3), inset 0 0 18px rgba(var(--mo-glow), 0); background-color: rgba(var(--mo-glow), .012); }
    50% { box-shadow: inset 3px 0 0 rgba(var(--mo-glow), .95), inset 0 0 26px rgba(var(--mo-glow), .1); background-color: rgba(var(--mo-glow), .05); } }
  @keyframes mo-nudge { 0%, 10%, 100% { translate: 0 0; } 2% { translate: -2px 0; } 4% { translate: 2px 0; } 6% { translate: -1.5px 0; } 8% { translate: 1px 0; } }
  /* strong badges catch a passing light, one row after another */
  .sbadge.sb-strong { position: relative; overflow: hidden; }
  .sbadge.sb-strong::after { content: ""; position: absolute; top: -2px; bottom: -2px; left: 0; width: 42%; pointer-events: none;
    background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.6), rgba(255,255,255,0));
    transform: translateX(-170%) skewX(-18deg); animation: mo-shine 5s ease-in-out infinite; animation-delay: calc(var(--d, 0ms) + 1s); }
  @keyframes mo-shine { 0%, 64% { transform: translateX(-170%) skewX(-18deg); } 84%, 100% { transform: translateX(330%) skewX(-18deg); } }
  /* "setup firing" means now: the label pulses */
  .setc-k { animation: mo-soft-k 2.2s ease-in-out infinite; }
  @keyframes mo-soft-k { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
  /* Lab month bars grow out of the zero line in turn */
  .pp-pop svg.lb-mb rect { transform-box: fill-box; transform-origin: 50% 100%; animation: mo-grow .5s cubic-bezier(.2,.75,.25,1) backwards;
    animation-delay: calc(var(--i, 0) * 30ms + .15s); }
  .pp-pop svg.lb-mb rect.bad { transform-origin: 50% 0; }
  @keyframes mo-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  /* tabs press in */
  .hz a:active, .htabs a:active { transform: scale(.95); }
  /* the lit half of the home headline shimmers */
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .homehero h1 .lit { background: linear-gradient(100deg, var(--blue) 0 38%, #D8E6FF 50%, var(--blue) 62% 100%) 0 0 / 260% 100% no-repeat;
      -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
      animation: mo-text-shine 7s ease-in-out 1.2s infinite; }
    @keyframes mo-text-shine { 0% { background-position: 100% 0; } 32%, 100% { background-position: 0 0; } }
  }
}
/* rows sweep under the pointer */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .prow { position: relative; overflow: hidden; }
  .prow::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; pointer-events: none;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.05), rgba(255,255,255,0)); transform: translateX(-110%); }
  .prow:hover::after { transform: translateX(240%); transition: transform .7s cubic-bezier(.2,.75,.25,1); }
}

/* ============================================================================================
   PLANNER LANE · HOME HERO: BEST PLAYS ON PATTERNS FIRING NOW (home.html section.hb · web/static/home.js ·
   web/queries.py home_hero_ctx). Owner, Oct 2: "calculate optimal risk reward for biggest gain ... patterns not to look
   like indicator". The chips grab attention with a big typical result on margin per coin; under them the selected
   coin's pattern strip, a recessed well where every past case is replayed as that trade (thin real paths: green ended
   in profit, red at a loss, ✕ on the liquidation line; the results histogram at the right edge with the typical tick)
   and a raised BEST PLAY card beside it (under it on phones). Green / red only for profit / loss and long / short,
   identity colours only on logos, the brand blue for the selection, the pattern window, focus and the CTA. Positions
   are % of the plot (the server and home.js share them); strokes are non-scaling.
   ============================================================================================ */
.hb { position: relative; margin: 28px 0 40px; }
.hb-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 4px; }
.hb-t { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.hb-hz { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(0,0,0,.35);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.05); }
.hb-hz a { display: inline-flex; align-items: center; justify-content: center; min-width: 54px; min-height: 36px; padding: 0 14px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--ink3); text-decoration: none; }
.hb-hz a:hover { color: var(--ink); }
.hb-hz a.on { background: var(--ink); color: var(--bg0); }
.hb-hz a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.hb-sub { margin: 0 0 14px; font-size: 13px; color: var(--ink3); }
/* an (i): the full rule / the chart's full caption on hover or tap (site.js data-tt card); plain words for readers */
.hb-i { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; min-height: 22px; margin: -4px 0; padding: 0 2px; border: 0;
  border-radius: 50%; background: none; font: 14px/1 var(--sans); color: var(--ink3); vertical-align: baseline; cursor: help; -webkit-tap-highlight-color: transparent; }
.hb-i:hover { color: var(--ink); }
.hb-i:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.hb-lg { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border-radius: 5px; overflow: hidden; background: var(--b, #10161E); color: var(--i, #8FA6BF); font: 700 7.5px var(--mono); letter-spacing: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.hb-lg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
/* the chips: one per coin, its best play's typical result big */
.hb-chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.hb-chip { position: relative; display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 10px 12px 11px; border: 1px solid rgba(255,255,255,.07);
  border-top-color: rgba(255,255,255,.12); border-radius: 12px; background: linear-gradient(180deg, #121519 0%, #0C0E12 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 24px -16px #000; color: var(--ink); text-decoration: none;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.hb-chip:hover { transform: translateY(-1px); border-color: var(--line2); color: var(--ink); }
.hb-chip.on { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), 0 12px 30px -14px rgba(79,140,255,.45); }
.hb-chip:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.hb-cc { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; }
.hb-cc b { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-cc i { margin-left: auto; font-style: normal; font-size: 11px; }
.hb-chip.hb-good .hb-cc i { color: var(--mint); }
.hb-chip.hb-bad .hb-cc i { color: var(--red); }
.hb-chip strong { font: 800 27px/1.05 var(--sans); letter-spacing: -.03em; white-space: nowrap; }
.hb-chip strong.t-good { color: var(--mint); }
.hb-chip strong.t-flat { color: var(--amber); }
.hb-chip strong.t-bad { color: var(--red); }
.hb-cm { font-size: 10.5px; letter-spacing: .04em; color: var(--ink3); }
/* the strip's two groups (owner, Oct 3: "how about picking also top shorts setups?"): a small label on each group's
   first chip; a side with no play keeps a dashed tile that says so (its tooltip: why, counted) */
.hb-chips[data-hb-chips] { padding-top: 8px; row-gap: 18px; }
.hb-chip[data-grp]::before { content: attr(data-grp); position: absolute; top: -8px; left: 9px; padding: 0 6px; border: 1px solid var(--line2);
  border-radius: 6px; background: #0B0D11; font: 700 9px/14px var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.hb-chip.hb-good[data-grp]::before { color: var(--mint); }
.hb-chip.hb-bad[data-grp]::before { color: var(--red); }
.hb-ghost { border-style: dashed; border-color: var(--line2); background: rgba(255,255,255,.015); box-shadow: none; cursor: help; }
.hb-ghost:hover { transform: none; border-color: var(--line2); }
.hb-ghost .hb-cc b { font-weight: 700; color: var(--ink2); }
.hb-gx { font-size: 13px; line-height: 1.3; color: var(--ink3); }
/* fewer than 6 clean plays: the chips sit centred at their usual width, one small line under them says why */
.hb-chips.hb-few { display: flex; flex-wrap: wrap; justify-content: center; }
.hb-chips.hb-few .hb-chip { flex: 0 1 calc((100% - 40px) / 6); }
.hb-fewn { flex: 0 0 100%; margin: 2px 0 0; text-align: center; font-size: 10.5px; letter-spacing: .02em; color: var(--ink3); }
.hb-none { grid-column: 1 / -1; margin: 0; padding: 14px; border: 1px dashed var(--line2); border-radius: 12px; font-size: 13px; color: var(--ink3); }
.hb-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 16px; align-items: stretch; }
.hb-grid[hidden] { display: none; }
.hb-main { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
/* the pattern strip: a headline in trader words, the setup's conditions as pills, the proven models leaning the same way */
.hb-strip { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid rgba(255,255,255,.06); border-radius: 12px;
  background: linear-gradient(180deg, #101317 0%, #0B0D10 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.hb-why { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.hb-r1, .hb-r2 { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 12px; min-width: 0; }
.hb-r1 { align-items: baseline; }
.hb-pat { margin: 0; font-size: 21px; font-weight: 800; line-height: 1.2; letter-spacing: -.015em; color: var(--ink); }
.hb-pat[hidden] { display: none; }
.hb-k { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }
.hb-coin { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; letter-spacing: .02em; text-transform: none; color: var(--ink); }
.hb-coin .hb-lg { width: 16px; height: 16px; font-size: 6.5px; border-radius: 4px; }
.hb-setup { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.hb-setup span { padding: 6px 11px; border: 1px solid var(--line2); border-radius: 8px; background: rgba(255,255,255,.035); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.hb-setup .hb-more { align-self: center; padding: 0 2px; border: 0; background: none; box-shadow: none; font: 11px var(--mono); color: var(--ink3); cursor: help; }
.hb-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.hb-tag { padding: 2px 8px; border: 1px solid; border-radius: 999px; font-size: 11px; font-weight: 700; }
.hb-tag.hb-good { color: var(--mint); border-color: rgba(56,242,164,.35); background: rgba(56,242,164,.08); }
.hb-tag.hb-bad { color: var(--red); border-color: rgba(255,77,94,.35); background: rgba(255,77,94,.08); }
.hb-n { font-size: 11px; color: var(--ink3); }
.hb-n b { color: var(--ink); }
/* the pattern overlay: a price chart (no leverage) - left of now only the coin's own last 30 days (bold, annotated);
   right of now what the matched setups did next as real price paths (hourly / 4-hour / daily closes), coloured by how
   this trade ended (won green, lost red, sideways orange, a cross where it first crossed the liquidation price); the
   coin's own future an empty "?" */
.hb-well { position: relative; flex: 1 1 auto; min-height: 340px; border-radius: 14px; background: #06070A; overflow: hidden; touch-action: pan-y;
  box-shadow: inset 0 3px 14px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.045); -webkit-tap-highlight-color: transparent; }
.hb-plot { position: absolute; left: 48px; top: 16px; bottom: 30px; right: 46px; cursor: crosshair; }
.hb-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.hb-svg path, .hb-svg line { fill: none; vector-effect: non-scaling-stroke; }
.hb-fut { fill: rgba(79,140,255,.045); }
.hb-0 { stroke: rgba(236,239,244,.22); stroke-width: 1; }
.hb-now { stroke: var(--ink); stroke-opacity: .45; stroke-width: 1; stroke-dasharray: 3 4; }
.hb-post path { stroke-width: 1.2; stroke-opacity: .62; stroke-linejoin: round; transition: stroke-opacity .15s ease; }
.hb-post path.hb-flat { stroke-width: 1.7; stroke-opacity: .92; }   /* the few sideways cases: findable among the rest */
.hb-svg .hb-good { stroke: var(--mint); }
.hb-svg .hb-bad { stroke: var(--red); }
.hb-svg .hb-flat { stroke: var(--amber); }
.hb-own { stroke: #FFFFFF; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.hb-guide { stroke: var(--ink2); stroke-opacity: .6; stroke-width: 1; stroke-dasharray: 2 3; }
.hb-brk { stroke: var(--ink); stroke-width: 1.4; }
.hb-lq { stroke: var(--red); stroke-opacity: .8; stroke-width: 1.2; stroke-dasharray: 5 4; }
.hb-hl { stroke-width: 2.6; stroke-linejoin: round; }
.hb-well.is-pick .hb-post path:not(.is-on) { stroke-opacity: .14; }
.hb-q { position: absolute; left: 77.8%; top: 50%; transform: translate(-50%, -50%); font: 800 120px/1 var(--sans); color: rgba(79,140,255,.11); pointer-events: none; }
.hb-nxt { position: absolute; left: 54%; top: 4px; margin-left: 8px; font-size: 10px; letter-spacing: .08em; color: var(--blue); opacity: .8; pointer-events: none; }
.hb-ov { position: absolute; inset: 0; pointer-events: none; }
.hb-yt { position: absolute; left: -46px; width: 40px; transform: translateY(-50%); text-align: right; font-size: 10px; color: var(--ink3); }
.hb-ytr { position: absolute; left: 100%; margin-left: 6px; transform: translateY(-50%); font-size: 10px; color: var(--ink3); }
.hb-lql { position: absolute; right: 2.6%; transform: translateY(-125%); padding: 0 3px; border-radius: 3px; background: rgba(6,7,10,.7);
  font-size: 9.5px; letter-spacing: .04em; color: var(--red); }
.hb-bl { position: absolute; transform: translate(-100%, -50%); padding: 1px 5px; border-radius: 4px; background: rgba(6,7,10,.82);
  font-size: 11px; font-weight: 700; white-space: nowrap; color: var(--ink); }
.hb-ath { position: absolute; left: 6px; top: 4px; font-size: 10px; color: var(--ink2); white-space: nowrap; }
.hb-flag { position: absolute; top: 20px; transform: translateX(-100%); padding: 1px 6px; border: 1px solid rgba(79,140,255,.45); border-radius: 4px;
  background: rgba(10,14,22,.9); font-size: 10px; white-space: nowrap; color: var(--ink); }
.hb-x { position: absolute; transform: translate(-50%, -50%); font-size: 11px; font-style: normal; line-height: 1; color: var(--red); text-shadow: 0 0 3px #06070A; }
.hb-dot { position: absolute; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; }
.hb-dot.hb-good { background: var(--mint); }
.hb-dot.hb-bad { background: var(--red); }
.hb-dot.hb-flat { background: var(--amber); }
.hb-pdot { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 3px rgba(6,7,10,.9); }
.hb-pdot[hidden] { display: none; }
.hb-xl { position: absolute; left: 48px; right: 46px; bottom: 8px; height: 14px; margin: 0; font-size: 10px; color: var(--ink3); pointer-events: none; }
.hb-xl span { position: absolute; top: 0; white-space: nowrap; }
.hb-xl span:first-child { left: 0; }
.hb-xl .hb-xn { left: 54%; transform: translateX(-50%); color: var(--ink2); }
.hb-xl span:last-child { left: 97.6%; transform: translateX(-100%); }
.hb-card { position: absolute; z-index: 3; max-width: min(360px, 94%); margin: 0; padding: 7px 10px; border: 1px solid var(--line2); border-radius: 8px;
  background: rgba(11,13,17,.96); box-shadow: 0 14px 30px -12px #000; font-size: 12px; line-height: 1.4; color: var(--ink2); pointer-events: none; }
.hb-card[hidden] { display: none; }
.hb-card b { color: var(--ink); }
.hb-card i { font-style: normal; color: var(--ink3); }
.hb-card .t-good { color: var(--mint); }
.hb-card .t-bad { color: var(--red); }
.hb-card .t-flat { color: var(--amber); }
.hb-card .hb-fb { display: block; margin-top: 3px; font-size: 11px; color: var(--ink3); }
.hb-cap { margin: 0; font-size: 10.5px; line-height: 1.5; color: var(--ink3); }
.hb-well.hb-wait .hb-svg { opacity: .35; transition: opacity .15s ease; }
/* the BEST PLAY card */
.hb-play { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px; border: 1px solid rgba(255,255,255,.07); border-top-color: rgba(255,255,255,.12);
  border-radius: 14px; background: linear-gradient(180deg, #111419 0%, #0B0D11 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 4px rgba(0,0,0,.6), 0 30px 64px -36px #000; }
.hb-side { margin: 0; font: 800 15px var(--mono); letter-spacing: .06em; }
.hb-side.t-good { color: var(--mint); }
.hb-side.t-bad { color: var(--red); }
.hb-big { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.hb-big b { font: 800 58px/1 var(--sans); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.hb-big b.t-good { color: var(--mint); }
.hb-big b.t-bad { color: var(--red); }
.hb-big b.t-flat { color: var(--amber); }
.hb-big span { font-size: 12px; color: var(--ink3); }
.hb-big span b { font: 700 12.5px/1.3 var(--sans); letter-spacing: 0; }            /* the dollars on a $1,000 stake */
.hb-stats { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--ink2); }
.hb-stats b { color: var(--ink); }
.hb-stats b.t-bad { color: var(--red); }
.hb-stats b.t-good { color: var(--mint); }
.hb-stats b.t-flat { color: var(--amber); }
.hb-math { margin: 0; padding: 9px 11px; border-radius: 9px; background: rgba(0,0,0,.3); box-shadow: inset 0 1px 3px rgba(0,0,0,.55); font-size: 12.5px; line-height: 1.45; color: var(--ink2); }
.hb-math b { font-weight: 700; }
.hb-math b.t-good { color: var(--mint); }
.hb-math b.t-bad { color: var(--red); }
.hb-math b.t-flat { color: var(--amber); }
/* a bigger typical result than the best play's that fails the bar, said in a sentence (home.js whyLong) */
.hb-bar { margin: 0; padding: 8px 11px; border: 1px solid rgba(255,77,94,.45); border-radius: 9px; background: rgba(255,77,94,.07);
  font-size: 12.5px; line-height: 1.45; color: var(--ink); }
.hb-bar[hidden] { display: none; }
/* the side toggle (owner: "also add short to that homepage calc"), styled like the token planner's .pln-sd buttons */
.hb-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hb-sd { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; border: 1px solid var(--line2); border-radius: 6px;
  background: rgba(0,0,0,.30); box-shadow: inset 0 1px 3px rgba(0,0,0,.6); cursor: pointer; }
.hb-sd input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hb-sd b { font-size: 16px; font-weight: 800; color: var(--ink2); letter-spacing: -.01em; }
.hb-sd small { font-size: 10.5px; color: var(--ink3); }
.hb-sd:hover { border-color: var(--ink3); }
.hb-sd:focus-within { outline: 2px solid var(--ink3); outline-offset: 2px; }
.hb-sd:has(input:disabled) { cursor: default; }
.hb-sd-good.on { border-color: var(--mint); background: rgba(56,242,164,.13); box-shadow: inset 0 0 0 1px var(--mint); }
.hb-sd-good.on b { color: var(--mint); }
.hb-sd-bad.on { border-color: var(--red); background: rgba(255,77,94,.13); box-shadow: inset 0 0 0 1px var(--red); }
.hb-sd-bad.on b { color: var(--red); }
.hb-sd.on small { color: var(--ink2); }
.hb-lev p { display: flex; align-items: baseline; justify-content: space-between; margin: 0; }
.hb-lev label { font: 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.hb-lev output { font: 700 18px var(--mono); color: var(--ink); }
.hb-range { position: relative; padding-bottom: 15px; }
/* the leverage slider, drawn by hand so its track can carry the risk zone (home.js track() sets --trk: the fill left of
   the thumb, red from the first leverage where more than 1 in 10 of these past trades were liquidated) */
.hb-range input { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 26px; margin: 2px 0 0; background: transparent; cursor: pointer; }
.hb-range input::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: var(--trk, rgba(255,255,255,.16)); }
.hb-range input::-webkit-slider-thumb { -webkit-appearance: none; box-sizing: border-box; width: 16px; height: 16px; margin-top: -5px; border-radius: 50%;
  background: #E9EEF7; border: 3px solid var(--blue); box-shadow: 0 0 0 3px rgba(6,7,10,.85); }
.hb-range input::-moz-range-track { height: 6px; border-radius: 999px; background: var(--trk, rgba(255,255,255,.16)); }
.hb-range input::-moz-range-thumb { box-sizing: border-box; width: 16px; height: 16px; border-radius: 50%; background: #E9EEF7; border: 3px solid var(--blue); }
.hb-range input:disabled::-webkit-slider-thumb { border-color: var(--ink4); }
.hb-range input:disabled::-moz-range-thumb { border-color: var(--ink4); }
.hb-range input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
.hb-zl { position: absolute; right: 0; bottom: 0; font-size: 9.5px; font-style: normal; color: var(--red); white-space: nowrap; }
.hb-zl[hidden] { display: none; }
.hb-range input:disabled { cursor: default; }
.hb-best { position: absolute; bottom: 0; left: calc(8px + var(--p, 0) * (100% - 16px)); transform: translateX(-50%); font-size: 9.5px; color: var(--blue); }
.hb-best::before { content: ""; position: absolute; top: -5px; left: 50%; width: 1px; height: 4px; background: var(--blue); }
.hb-cta { display: flex; align-items: center; justify-content: center; min-height: 42px; margin-top: auto; border: 1px solid var(--blue-dim); border-radius: 9px;
  background: rgba(79,140,255,.1); color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; }
.hb-cta:hover, .hb-cta:focus-visible { border-color: var(--blue); background: rgba(79,140,255,.18); outline: none; }
.hb-fine { margin: 0; font-size: 10px; color: var(--ink3); }
@media (max-width: 1100px) { .hb-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hb-chips.hb-few .hb-chip { flex-basis: calc((100% - 16px) / 3); } }
@media (max-width: 900px) { .hb-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .hb { margin: 22px 0 30px; }
  .hb-t { font-size: 20px; }
  .hb-hz a { min-width: 48px; padding: 0 10px; }
  .hb-sub { font-size: 12px; }
  .hb-chips { gap: 6px; }
  .hb-chip { padding: 8px 8px 9px; gap: 4px; }
  .hb-cc { gap: 4px; font-size: 12px; }
  .hb-cc .hb-lg { width: 15px; height: 15px; font-size: 6px; }
  .hb-chip strong { font-size: 21px; }
  .hb-cm { font-size: 9.5px; }
  .hb-strip { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 12px; }
  .hb-pat { font-size: 18px; }
  .hb-setup { font-size: 13.5px; }
  .hb-setup span { padding: 5px 9px; }
  .hb-chips.hb-few .hb-chip { flex-basis: calc((100% - 12px) / 3); }
  .hb-well { min-height: 270px; margin: 0 -6px; border-radius: 12px; }
  .hb-plot, .hb-xl { left: 38px; right: 36px; }
  .hb-ytr { margin-left: 4px; font-size: 9px; }
  .hb-q { font-size: 84px; }
  .hb-bl { font-size: 10px; }
  .hb-ath, .hb-flag, .hb-nxt { font-size: 9px; }
  .hb-yt { left: -36px; width: 32px; font-size: 9.5px; }
  .hb-big b { font-size: 48px; }
}
/* "how to read this", once: a numbered bubble under (or over) a ringed point; the layer never blocks the page */
.hb-hint { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.hb-hdot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; box-sizing: border-box; border: 2px solid #fff; border-radius: 50%;
  background: var(--blue); box-shadow: 0 0 0 3px rgba(6,7,10,.85); animation: hb-ping 1.6s ease-out infinite; }
.hb-hb { position: absolute; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; max-width: min(380px, calc(100% - 8px)); padding: 8px 8px 8px 12px;
  border: 1px solid var(--blue); border-radius: 10px; background: #0E1420; box-shadow: 0 14px 34px -12px #000, 0 0 0 1px rgba(79,140,255,.25);
  font-size: 13px; line-height: 1.35; color: var(--ink); pointer-events: auto; cursor: pointer; }
.hb-hb::before { content: ""; position: absolute; top: -6px; left: var(--ax, 24px); width: 10px; height: 10px; margin-left: -5px; border: solid var(--blue);
  border-width: 1px 0 0 1px; background: #0E1420; transform: rotate(45deg); }
.hb-hb.hb-up::before { top: auto; bottom: -6px; border-width: 0 1px 1px 0; }
.hb-hn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--blue); color: #fff; font: 800 12px var(--mono); }
.hb-ht { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.hb-hx { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.hb-hgo { min-height: 30px; padding: 0 12px; border: 1px solid var(--blue); border-radius: 7px; background: rgba(79,140,255,.16); color: var(--ink);
  font: 700 12px var(--sans); cursor: pointer; }
.hb-hclose { min-width: 30px; min-height: 30px; border: 0; border-radius: 7px; background: none; color: var(--ink3); font-size: 17px; line-height: 1; cursor: pointer; }
.hb-hgo:hover, .hb-hgo:focus-visible { background: rgba(79,140,255,.3); outline: none; }
.hb-hclose:hover, .hb-hclose:focus-visible { color: var(--ink); outline: none; }
.hb-hint.hb-hin .hb-hb { animation: hb-hin .22s ease-out both; }
@keyframes hb-hin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes hb-ping { 0% { box-shadow: 0 0 0 3px rgba(6,7,10,.85), 0 0 0 3px rgba(79,140,255,.45); }
  100% { box-shadow: 0 0 0 3px rgba(6,7,10,.85), 0 0 0 14px rgba(79,140,255,0); } }
@media (prefers-reduced-motion: reduce) {
  .hb-chip, .hb-post path, .hb-well.hb-wait .hb-svg { transition: none; }
  .hb-chip:hover { transform: none; }
  .hb-hdot, .hb-hint.hb-hin .hb-hb { animation: none; }
}

/* ============================================================================================
   HOME GAME (owner, Oct 2: "that play game thing is almost invisibly hidden … put it on the homepage"). The same game as
   /play/game, one round at a time, under Biggest predicted moves: the chart on the left, the call and the reveal on the
   right, stacked on phones. While a round waits for a call, the two buttons glow in turn and the hidden week's "?"
   breathes; prefers-reduced-motion keeps them still.
   ============================================================================================ */
.game.game-mini { max-width: none; margin: 0; }
.game-mini .game-card { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(290px, 1fr); gap: 20px; align-items: center; padding: 16px; }
.game-mini .gm-chart { min-width: 0; }
.game-mini .gm-side { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.game-mini .game-score { margin: 0 0 4px; gap: 6px; }
.game-mini .gs-i { padding: 5px 10px; font-size: 10px; }
.game-mini .gs-i b { font-size: 14px; }
.game-mini .gs-rd { margin-left: 0; }
.game-mini .game-ask { padding: 8px 0 0; }
.game-mini .game-q { font-size: 18px; line-height: 1.3; }
.game-mini .game-btns { max-width: none; }
.game-mini .game-btn { min-height: 66px; }
.game-mini .game-rev { padding: 6px 0 0; }
.game-mini .game-verdict { font-size: clamp(20px, 2.3vw, 26px); }
.game-mini .game-who { padding: 9px 11px; }
.game-mini .game-who b { font-size: 17px; }
.game-mini .game-who small { font-size: 11.5px; }
.game-mini .game-coin { font-size: 12.5px; }
.game-mini .game-next { max-width: none; min-height: 48px; }
.game-mini .game-done { margin: 0; }
.gm-note { margin: 12px 0 0; font-size: 10.5px; letter-spacing: .03em; line-height: 1.55; color: var(--ink3); text-align: center; }
.game-mini .game-btn-good { --gm-glow: 56,242,164; }
.game-mini .game-btn-bad { --gm-glow: 255,77,94; }
@media (prefers-reduced-motion: no-preference) {
  .game-mini:not(.game-revealed) .game-btn { animation: gm-glow 2.8s ease-in-out infinite; }
  .game-mini:not(.game-revealed) .game-btn-bad { animation-delay: 1.4s; }
  @keyframes gm-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--gm-glow), 0); } 50% { box-shadow: 0 0 26px -2px rgba(var(--gm-glow), .38); } }
  .game-mini .g-qm { animation: gm-qm 1.9s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 60%; }
  @keyframes gm-qm { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
}
@media (max-width: 900px) { .game-mini .game-card { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
@media (max-width: 600px) { .game-mini .game-card { padding: 12px; } .game-mini .gs-i { padding: 4px 8px; } }

/* ============================================================================================
   ADMIN + ANALYTICS (ADMIN lane; owner, Oct 2: "add admin ... measure web traffic statistics and as many data
   collecting as we can get"). /admin (web/templates/admin.html + web/static/admin.js): the key form, raised KPI tiles,
   the daily chart in a recessed well - visitors in the brand blue, page views in orchid #C25FC8 (one axis: both are
   counts; the pair passes the colour-vision checks on this surface), a 10% wash under visitors, a crosshair readout and
   a table twin - then one raised card per question and the X panel. /privacy: plain-words cards and the reader's off
   switch (beacon.js). Green and red only where they mean good and bad (a saved message; a failed or over-long post),
   orange for the neutral "not set yet" notes. Motion: tiles and cards rise in once, the lines draw in;
   prefers-reduced-motion keeps all of it still.
   ============================================================================================ */
.adm { --adm-s1: var(--blue); --adm-s2: #C25FC8; --adm-surface: #0B0D11;
  --adm-raise: linear-gradient(180deg, rgba(255,255,255,.034), rgba(255,255,255,.008) 38%, rgba(255,255,255,0) 70%);
  --adm-lift: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 1px rgba(0,0,0,.6), 0 20px 44px -24px rgba(0,0,0,.9); }
.adm-hero { margin-bottom: 18px; }
.adm-l { margin: 0 0 6px; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink3); font-weight: 500; }
.adm-lock { max-width: 460px; margin: 0 0 var(--s7); padding: 18px; border: 1px solid var(--line2); border-radius: 14px;
  background-color: var(--bg2); background-image: var(--adm-raise); box-shadow: var(--adm-lift); }
.adm-keyrow { display: flex; gap: 8px; }
.adm-keyrow input, .adm-xform textarea { flex: 1; min-width: 0; font-family: var(--mono); font-size: 14px; color: var(--ink); background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.09); border-radius: 9px; padding: 10px 12px; box-shadow: inset 0 1px 3px rgba(0,0,0,.6); }
.adm-keyrow input:focus, .adm-xform textarea:focus { outline: none; border-color: var(--blue-dim); box-shadow: 0 0 0 1px var(--blue-dim), inset 0 1px 3px rgba(0,0,0,.6); }
.adm-go { min-height: 42px; padding: 0 18px; border: 1px solid var(--blue-dim); border-radius: 9px; background: rgba(79,140,255,.1); color: var(--ink);
  font-weight: 700; cursor: pointer; }
.adm-go:hover:not(:disabled) { border-color: var(--blue); background: rgba(79,140,255,.18); }
.adm-go:disabled { opacity: .45; cursor: default; }
.adm-msg { margin: 10px 0 0; font-size: 13px; color: var(--ink3); }
.adm-msg:empty { display: none; }
.adm-msg.is-bad { color: var(--red); }
.adm-msg.is-good { color: var(--mint); }
.adm-msg a { color: var(--blue); }
.adm-lock.is-busy, .adm-dash.is-busy .adm-kpis, .adm-dash.is-busy .adm-card { opacity: .55; transition: opacity .2s ease; }
/* toolbar: the range pills in a recessed well (the lit one raised), the actions, the as-of line */
.adm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 12px; }
.adm-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6); max-width: 100%; }
.adm-seg button { min-height: 34px; padding: 0 13px; border: 0; border-radius: 999px; background: transparent; color: var(--ink2);
  font-family: var(--mono); font-size: 11.5px; white-space: nowrap; cursor: pointer; }
.adm-seg button:hover { color: var(--ink); background: var(--bg3); }
.adm-seg button.on { background: var(--ink); color: var(--bg0); font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.7); }
.adm-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.adm-btn { min-height: 34px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 999px; background: var(--bg1); color: var(--ink2);
  font-family: var(--mono); font-size: 11.5px; cursor: pointer; }
.adm-btn:hover:not(:disabled) { border-color: var(--blue-dim); color: var(--ink); }
.adm-btn:disabled { opacity: .5; cursor: progress; }
.adm-quiet { border-style: dashed; }
.adm-asof { flex-basis: 100%; margin: 0; font-size: 10.5px; color: var(--ink3); }
.adm-miss { margin: 0 0 12px; padding: 9px 12px; border-left: 2px solid var(--amber); border-radius: 0 8px 8px 0; background: rgba(255,180,77,.06);
  color: var(--ink2); font-size: 13px; }
/* KPI tiles: label, value (proportional figures at this size), one line of context */
.adm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.adm-kpi { min-width: 0; padding: 12px 14px; border: 1px solid var(--line2); border-radius: 12px; background-color: var(--bg2);
  background-image: var(--adm-raise); box-shadow: var(--adm-lift); }
.adm-kl { margin: 0 0 6px; font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink3); }
.adm-kv { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.12; color: var(--ink);
  font-variant-numeric: proportional-nums lining-nums; overflow-wrap: anywhere; }
.adm-ks { margin: 5px 0 0; font-size: 11.5px; line-height: 1.35; color: var(--ink3); }
/* cards and the chart well */
.adm-card { min-width: 0; padding: 16px 16px 14px; border: 1px solid var(--line2); border-radius: 14px; background-color: var(--bg2);
  background-image: var(--adm-raise); box-shadow: var(--adm-lift); }
.adm-card h2 { margin: 0 0 4px; font-size: 17px; letter-spacing: -.01em; }
.adm-card h3.adm-l { margin: 14px 0 6px; }
.adm-sub { margin: 0 0 8px; font-size: 10.5px; color: var(--ink3); }
.adm-chart { margin: 0 0 14px; }
.adm-ch { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin: 0 0 10px; }
.adm-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 11px; color: var(--ink2); }
.adm-key { display: inline-block; width: 14px; height: 0; border-top: 2px solid var(--adm-s1); border-radius: 2px; vertical-align: middle; }
.adm-key.adm-k2 { border-top-color: var(--adm-s2); }
.adm-legend .adm-k2 { margin-left: 10px; }
.adm-well { position: relative; overflow: hidden; padding: 6px 0 0; border-radius: 12px; background: rgba(0,0,0,.35);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.04); }
.adm-well:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.adm-svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.adm-gl { stroke: rgba(255,255,255,.06); stroke-width: 1; }
.adm-g0 { stroke: rgba(255,255,255,.16); }
.adm-yt, .adm-xt { fill: var(--ink3); font-family: var(--mono); font-size: 10px; }
.adm-end { fill: var(--ink2); font-family: var(--mono); font-size: 11px; }
.adm-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.adm-line.adm-s1 { stroke: var(--adm-s1); }
.adm-line.adm-s2 { stroke: var(--adm-s2); }
.adm-area { fill: var(--adm-s1); fill-opacity: .1; stroke: none; }
.adm-dot { stroke: var(--adm-surface); stroke-width: 2; }
.adm-dot.adm-s1 { fill: var(--adm-s1); }
.adm-dot.adm-s2 { fill: var(--adm-s2); }
.adm-xh { stroke: rgba(255,255,255,.35); stroke-width: 1; }
.adm-tip { position: absolute; z-index: 2; display: grid; gap: 3px; min-width: 150px; padding: 8px 10px; border: 1px solid var(--line2); border-radius: 9px;
  background: rgba(11,13,17,.96); box-shadow: 0 12px 30px rgba(0,0,0,.6); font-size: 11.5px; color: var(--ink2); pointer-events: none; }
.adm-tip[hidden] { display: none; }
.adm-tip b { color: var(--ink); font-weight: 700; }
.adm-tip-d { letter-spacing: .06em; }
.adm-tip-r { display: flex; align-items: center; gap: 6px; }
.adm-dim { color: var(--ink3); }
.adm-tv { margin: 10px 0 0; }
.adm-tv summary { cursor: pointer; font-size: 11px; color: var(--ink3); }
.adm-tv summary:hover { color: var(--ink); }
.adm-tscroll { max-height: 320px; overflow: auto; margin-top: 8px; }
/* the question cards: label · share bar · count */
.adm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; margin: 0 0 14px; }
.adm-wide { grid-column: 1 / -1; }
.adm-t { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12.5px; }
.adm-t th, .adm-t td { padding: 5px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.adm-t tbody tr:last-child th, .adm-t tbody tr:last-child td { border-bottom: 0; }
.adm-t th, .adm-t thead th { background: transparent; }
.adm-t th[scope="row"] { width: 52%; padding-right: 10px; overflow: hidden; color: var(--ink); font-family: var(--mono); font-size: 12px; font-weight: 400;
  letter-spacing: 0; text-align: left; text-overflow: ellipsis; text-transform: none; white-space: nowrap; }
.adm-t td.adm-b { width: 28%; padding-right: 10px; }
.adm-b i { display: block; height: 6px; border-radius: 0 3px 3px 0; background: var(--adm-s1); opacity: .6; }
.adm-t td.n { width: 20%; color: var(--ink2); font-family: var(--mono); text-align: right; white-space: nowrap; }
.adm-t thead th { padding-bottom: 7px; color: var(--ink3); font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .18em; text-align: left;
  text-transform: uppercase; }
.adm-t thead th.n { text-align: right; }
.adm-daily { table-layout: auto; }
.adm-daily th[scope="row"], .adm-daily td.n { width: auto; }
.adm-none { margin: 4px 0; color: var(--ink3); font-size: 12.5px; }
.adm-facts { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; margin: 4px 0 0; font-size: 13px; }
.adm-facts dt { color: var(--ink3); }
.adm-facts dd { margin: 0; color: var(--ink); text-align: right; }
/* the X panel */
.adm-x { max-width: 760px; margin: 0 0 var(--s7); }
.adm-xstate { margin: 0 0 12px; color: var(--ink2); font-size: 13px; }
.adm-xstate.is-off { padding: 9px 12px; border-left: 2px solid var(--amber); border-radius: 0 8px 8px 0; background: rgba(255,180,77,.06); }
.adm-xform textarea { display: block; width: 100%; min-height: 96px; resize: vertical; font-family: var(--sans); font-size: 15px; line-height: 1.45; }
.adm-xrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 0; }
.adm-count { color: var(--ink3); font-size: 12px; }
.adm-count.is-over { color: var(--red); }
.adm-toggle { display: flex; align-items: center; gap: 9px; margin: 14px 0 4px; color: var(--ink2); font-size: 13.5px; cursor: pointer; }
.adm-toggle input { width: 18px; height: 18px; accent-color: var(--blue); }
.adm-toggle b { color: var(--ink); }
.adm-xlog { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.adm-xi { padding: 9px 11px; border-radius: 10px; background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.adm-xi.is-failed { box-shadow: inset 2px 0 0 var(--red), inset 0 0 0 1px rgba(255,255,255,.04); }
.adm-xm { margin: 0 0 4px; color: var(--ink3); font-size: 10.5px; }
.adm-xm a { color: var(--blue); }
.adm-xpt { margin: 0; color: var(--ink); font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.adm-xe { margin: 4px 0 0; color: var(--red); font-size: 11px; }
@media (max-width: 900px) { .adm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .adm-acts { margin-left: 0; }
  .adm-kpi { padding: 11px 12px; }
  .adm-kv { font-size: 22px; }
  .adm-card { padding: 14px 12px 12px; }
  .adm-seg button { padding: 0 10px; }
}
/* /privacy: plain-words cards, the most important one first */
.pv-hero h1 { font-size: clamp(30px, 4.4vw, 46px); }
.pv { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 12px; align-items: start; margin: 0 0 var(--s7); }
.pv-card { min-width: 0; padding: 16px 18px; border: 1px solid var(--line2); border-radius: 14px; background-color: var(--bg2);
  background-image: linear-gradient(180deg, rgba(255,255,255,.034), rgba(255,255,255,.008) 38%, rgba(255,255,255,0) 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 1px rgba(0,0,0,.6), 0 20px 44px -24px rgba(0,0,0,.9); }
.pv-card h2 { margin: 0 0 8px; font-size: 18px; }
.pv-card p { max-width: 70ch; color: var(--ink2); }
.pv-card p:last-child { margin-bottom: 0; }
.pv-never { border-top: 3px solid var(--blue); }
.pv-list { display: grid; gap: 7px; margin: 0; padding: 0 0 0 18px; color: var(--ink2); }
.pv-list b { color: var(--ink); font-weight: 600; }
.pv-btn { min-height: 42px; margin-top: 4px; padding: 0 16px; border: 1px solid var(--blue-dim); border-radius: 9px; background: rgba(79,140,255,.08);
  color: var(--ink); font-weight: 600; cursor: pointer; }
.pv-btn:hover { border-color: var(--blue); background: rgba(79,140,255,.15); }
.pv-btn[aria-pressed="true"] { border-style: dashed; color: var(--ink2); }
.pv-foot { grid-column: 1 / -1; margin: 4px 0 0; color: var(--ink3); font-size: 11px; }
@media (prefers-reduced-motion: no-preference) {
  .adm-kpi, .adm-card, .pv-card { animation: pp-pop .45s cubic-bezier(.2,.75,.25,1) backwards; }
  .adm-kpi:nth-child(2), .pv-card:nth-child(2) { animation-delay: 40ms; }
  .adm-kpi:nth-child(3), .pv-card:nth-child(3) { animation-delay: 80ms; }
  .adm-kpi:nth-child(4), .pv-card:nth-child(4) { animation-delay: 120ms; }
  .adm-kpi:nth-child(n+5), .pv-card:nth-child(n+5) { animation-delay: 160ms; }
  .adm-anim .adm-line { stroke-dasharray: 1 1; animation: adm-draw .9s cubic-bezier(.2,.75,.25,1) backwards; }
  .adm-anim .adm-line.adm-s1 { animation-delay: .12s; }
  .adm-anim .adm-area { animation: adm-fade .9s ease-out .35s backwards; }
  @keyframes adm-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes adm-fade { from { opacity: 0; } to { opacity: 1; } }
}
/* the local preview banner (`py -m web.app` only, web/localstats.py): a neutral note, orange like every "heads up" */
.adm-local { margin: -4px 0 16px; padding: 10px 14px; border: 1px solid rgba(255,180,77,.35); border-radius: 10px;
  background: rgba(255,180,77,.07); color: var(--ink); font-size: 13.5px; }
.adm-local b { color: var(--amber); font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.adm-local code { padding: 1px 6px; border-radius: 5px; background: rgba(0,0,0,.4); color: var(--ink); }
/* Beat the pattern: the pattern's record over the whole pool sits next to the set score, so one set reads as one set */
.gs-rec { border-style: dashed; }
.gs-rec b { color: var(--blue); }

/* ============================================================================================
   VIZ · HOVER + SIDEWAYS (VIZ lane, Oct 2). The owner: "make every single graph have hover" and "add orange for
   sideways movement". A price move inside the band of its window, 0.5% x sqrt(days) (1 day +-0.5%, 7 +-1.3%, 30 +-2.7%,
   90 +-4.7%: web/fmt.py flat_band = site.js PP.band; a leveraged trade by its price move over the hold), is sideways
   and wears orange, var(--amber), with the class name "flat"; green and red keep up and down. The shared hover
   layer (site.js) lights the hovered mark, puts a dot and a crosshair on a line, and the big charts take keyboard focus.
   ============================================================================================ */
/* sideways = orange, wherever a move or a result is coloured */
.db-flat, .fan-flat { fill: var(--amber); }
.lb-mbr.flat { fill: var(--amber); }
.game-svg .g-fut.g-flat { stroke: var(--amber); }
.game-svg .g-head.g-flat, .game-svg .g-end.g-flat { fill: var(--amber); }
.play-svg .eq-end.t-flat, .play-svg .eq-v.t-flat { fill: var(--amber); }
.play-tip .t-flat, .play-tbl td.t-flat, .play-capx b.t-flat, .pln-tip .t-flat { color: var(--amber); }
.play-leg .lg-flat { background: var(--amber); opacity: .5; }
.pln-rps .rp-hl.t-flat { stroke: var(--amber); } .pln-rps .rp-hm.rp-k2.t-flat { fill: var(--amber); }
.tipbox .tp-warn { color: var(--amber); } .tipbox .tp-unknown { color: var(--ink3); }
.chip-flat { color: var(--amber); border-color: var(--amber-dim); background: rgba(255,180,77,.05); }
.vc-flat::before { background: var(--amber); box-shadow: 0 0 18px var(--amber); }
.vc-flat .vc-s { color: var(--amber); text-shadow: 0 0 16px var(--amber-glow); }
.vc-l li.flat { color: var(--amber); }
.intc.flat { box-shadow: inset 2px 0 0 var(--amber); }
/* hover: the lit mark, the dot on a line and its crosshair (drawn inside the chart, never catching the pointer) */
.mk-on { filter: brightness(1.3) drop-shadow(0 0 1.5px rgba(236,239,244,.95)) drop-shadow(0 0 4px rgba(236,239,244,.35)); }
.pln-rpl .rpl-flat:not(.rpl-dot) i { width: 14px; height: 2px; border-radius: 1px; }
.ser-hdot { fill: var(--ink); stroke: var(--bg1); stroke-width: 2px; vector-effect: non-scaling-stroke; pointer-events: none; }
.ser-x { stroke: var(--ink3); stroke-opacity: .7; stroke-width: 1px; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; pointer-events: none; }
svg[data-hover="series"] { cursor: crosshair; }
svg[data-hover][tabindex]:focus { outline: none; }
svg[data-hover][tabindex]:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
/* a single-value mark shows its card on hover / tap: no native tooltip delay, no text cursor over a bar */
[data-tt] { cursor: default; }

/* ============================================================================================
   GAME JUICE · Beat the pattern (Oct 2). From 3 right calls in a row the Streak pill wears a flame and the count rolls
   up; at 5 and 10 the pill pulses and a one-line toast drops in. A right call bursts off the button that made it, in
   the colour of the week (green up, red down, orange sideways); beating the model bursts round the final score. The
   end of a set shows the 1200x630 share card game.js draws (Share image: the Web Share API with the file, else a
   download) and the result squares in the share line. prefers-reduced-motion: no particles (game.js makes none), no
   flame motion, no pulse; the badge and the toast still show, standing still.
   ============================================================================================ */
.gs-fire { display: none; margin-right: -2px; font-size: 13px; line-height: 1; }
.game-hot .gs-fire { display: inline-block; }
.game-hot .gs-streak { box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 18px -5px rgba(79,140,255,.65); }
.gj-toast { position: absolute; z-index: 4; top: 10px; left: 50%; transform: translateX(-50%); margin: 0; padding: 8px 15px;
  border-radius: 999px; border: 1px solid var(--blue); background: rgba(11,13,17,.95); color: var(--ink); font-size: 13px; font-weight: 800;
  white-space: nowrap; pointer-events: none; box-shadow: 0 12px 30px -12px #000, 0 0 24px -6px rgba(79,140,255,.6); }
.gj-toast[hidden] { display: none; }
.gj-fx { position: fixed; inset: 0; z-index: 90; overflow: hidden; pointer-events: none; }
.gj-p { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 2px; }
.gj-p:nth-child(odd) { border-radius: 50%; }
.gj-p.gj-good { background: var(--mint); box-shadow: 0 0 10px var(--mint); }
.gj-p.gj-bad { background: var(--red); box-shadow: 0 0 10px var(--red); }
.gj-p.gj-flat { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.gj-p.gj-blue { background: var(--blue); box-shadow: 0 0 10px var(--blue); }
.game-line { white-space: pre-line; line-height: 1.7; }
.game-share { border-color: var(--blue); background: rgba(79,140,255,.14); color: var(--ink); }
.game-share:hover { border-color: var(--blue); background: rgba(79,140,255,.24); }
.gj-card { display: block; width: 100%; max-width: 380px; height: auto; margin: 18px auto 0; border-radius: 12px;
  border: 1px solid var(--line2); box-shadow: 0 20px 44px -22px #000; }
.gj-card[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .game-hot .gs-fire { animation: gj-flame 1.1s ease-in-out infinite alternate; transform-origin: 50% 85%; }
  @keyframes gj-flame { 0% { transform: rotate(-6deg) scale(1); } 50% { transform: rotate(3deg) scale(1.12, .94); } 100% { transform: rotate(-2deg) scale(.95, 1.1); } }
  .game-hot .gs-streak b.gs-pop { animation: gj-up .5s cubic-bezier(.2,.9,.3,1.3); }
  @keyframes gj-up { 0% { transform: translateY(80%) scale(.6); opacity: 0; } 55% { transform: translateY(-12%) scale(1.3); opacity: 1; } 100% { transform: none; } }
  .gs-streak.gj-pulse { animation: gj-pulse .9s ease-out; }
  @keyframes gj-pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(79,140,255,.8); } 30% { transform: scale(1.22); } 100% { transform: scale(1); box-shadow: 0 0 0 22px rgba(79,140,255,0); } }
  .gj-toast.gj-pulse { animation: gj-drop .42s cubic-bezier(.2,.9,.3,1.25); }
  @keyframes gj-drop { from { opacity: 0; transform: translate(-50%, -14px) scale(.9); } to { opacity: 1; transform: translate(-50%, 0); } }
}
@media (max-width: 640px) { .gj-toast { top: 6px; padding: 7px 12px; font-size: 12px; } }
/* ============================================================================================
   VIZ · BOARD DOTS + SEARCH ODDS + SMALLEST TEXT (VIZ lane, Oct 2, owner-approved UX). Board rows: the coin's own line
   then its matched past setups as dots (web/viz.py case_strip: green up, red down, orange sideways), no fan from "now".
   The search dropdown carries each coin's clearest lean and its best play. Phones: no label under 11.5px; small
   uppercase mono labels keep their letter-spacing at 0.12em or less; long chart captions fold into one line + an ⓘ.
   ============================================================================================ */
/* board rows: the line draws in (motion.js wires svg.mcase), then its case dots fade in */
svg.mcase .mc-hit { cursor: default; }
@media (prefers-reduced-motion: no-preference) {
  .pp-pop svg.mcase.mo-draw .mc-d, .pp-pop svg.mcase.mo-draw .mc-now { animation: mo-fade .6s ease-out backwards; animation-delay: calc(var(--d, 0ms) + .95s); }
}
/* search: a coin with a prediction shows its clearest lean and its best play on a second line */
.search-results a.has-o, .srow.has-o { flex-wrap: wrap; row-gap: 3px; }
.search-results .so, .srow .so { flex: 0 0 100%; font-size: 11.5px; letter-spacing: 0; color: var(--ink3); line-height: 1.45; }
.search-results .so b, .srow .so b { font-weight: 600; }
.so .so-b { white-space: nowrap; }
.srow.has-o .so { padding-left: 52px; }
/* VIZ-GENERATED SMALL TEXT START */
/* phones: no label under 11.5px; small uppercase mono labels: letter-spacing no wider than .12em under 11px.
   Generated from this file's own rules (VIZ lane: tools/css_small_text.py): every rule that sets a smaller size (or
   a wider spacing on a small label) gets a twin with the same selector, so the same specificity, inside @scope: at
   equal specificity the scoped twin wins, a more specific rule still wins over it. The scope ends at SVG chart
   text (it scales with its viewBox), the home hero, the token page's band 1 and folds and the admin page. */
@media (max-width: 600px) {
@scope (:root) to (svg, .hb, .k-token .band-1, .k-token .fold, .k-admin) {
    .wordmark .desk,
    .topnav a,
    .rec,
    .search input,
    .search-results .k,
    .search-results .x,
    .sgl,
    .srow .sk,
    .srow .sx,
    .crumbs,
    .mast-updated,
    .mast-updated time,
    .ticker a,
    .tape-l,
    .tape-i,
    .eyebrow,
    .stp,
    .zsep,
    .ff-s,
    .asof,
    .src,
    .chip,
    .chip-new,
    .chip-delta,
    .rankb,
    .kind,
    .tags,
    .copy,
    .lbl,
    .delta em,
    .glyph,
    .st-l,
    .st-s,
    .vc-t,
    .vc-l li,
    .vc-sx,
    .vd-s,
    .rchip em,
    .vc-dc,
    .vc-f,
    .vc-checks li,
    .ckst,
    .countbox span,
    .int-l,
    .igc-k,
    .igc-v small,
    .rtable td.d,
    .rtable .ttl small,
    .receipt .ev em,
    .receipt .r em,
    .db-v,
    .alloc-leg,
    .howto-t,
    .howto-x,
    .tlc-k,
    .tlc-d,
    .tlc-s,
    .rib-l,
    .rib-i,
    caption,
    th,
    tr.yr td,
    tr.future .sched,
    .evled .cq-n,
    .evled td:first-child time,
    .spk-l,
    .g-l,
    .ll-l,
    .spark p,
    .cd-l,
    .g-s,
    .g-next,
    .scope-meta span,
    .kv-r dt,
    .related li .dim,
    .aff,
    .toc a,
    .fold-l,
    .feedhero .kicker,
    .hstat .k,
    .quick a,
    .shead .note,
    .fmod-t,
    .fmod-s,
    .fd-d,
    .fd-d small,
    .fr-v em,
    .cause,
    .fmod-m,
    .fr-s,
    .gb-l,
    .wanted .wt,
    .wanted .waddr,
    .wanted .wrole,
    .wanted .ws span,
    .wanted .wnote,
    .board-t,
    .board-s,
    .b-r,
    .b-s,
    .board-m,
    .letters a .c,
    .bn-l,
    .bn-u,
    .bn-c,
    .bn-cap,
    .foot-voice .lbl,
    .bnav a,
    .cov .cell-none,
    .cov .cell-unk,
    .exh,
    .power .why,
    .tri-k,
    .tri-v small,
    .tri-s,
    .oddsc,
    .standfirst,
    .vpline,
    .vp-t,
    .vp-tile span,
    .vp-tile em,
    .pbk-when,
    .pbk-l,
    .pbk-s,
    .pbk-ci,
    .pbk-drift,
    .pbk-more,
    .oh-l,
    .oh-s,
    .oh-ci,
    .oh-honest,
    .tlc-odds,
    td.unl-tok .oddsc,
    .cq-n,
    .subbtn,
    .subnote,
    .heronote,
    .cf-l,
    .cf,
    .cf-x,
    .cf-note,
    .cal-h,
    .cd-d,
    .cd-now,
    .cd-more,
    .cale,
    .cale b,
    .callegend,
    .calmonths,
    .icsb,
    .trd-feed .subnote,
    .obalso,
    .ob-hl,
    .ob-hn,
    .oboard .obdate,
    .oboard .kind,
    .oboard .cdn,
    .urgline,
    .trd-when,
    .trd-setup em,
    .trd-setup .chip,
    .trd-s,
    .trd-ci,
    .trd-oos,
    .trd-more,
    .trd-ol,
    .trd-row,
    .starb,
    td .starb,
    .frow .starb,
    .md-t,
    .md-s,
    .md-c,
    .md-c .md-x,
    .md-empty,
    .ovc-k,
    .ovc-v small,
    .ovc-go,
    .toc-tier,
    .htabs a small,
    .htabs .htabs-b,
    .sl-mv,
    .slc,
    .sl-c em,
    .sring .sr-s,
    .scoremod .sc-row em,
    .scoremod .sc-row b,
    .scoremod .sc-rank .mono,
    .htog a,
    .htog span,
    .sincebar .since,
    .daycount,
    .streakc,
    .gradbar .gb-l,
    .md-sc,
    .tipbox,
    .fan-t,
    .fan-cap span,
    .slate-now td,
    .sl3-t,
    .sl3-n small,
    .demo-rib,
    .tid-ch em,
    .tid-meta,
    .band-s,
    .bandnav a,
    .bandnav a b,
    .ph-stats dt,
    .pdisc,
    .sbadge,
    .fc-leg,
    .sc-k,
    .sc small,
    .mini-h,
    .setc-k,
    .setc-st,
    .setc-oos,
    .drc-l,
    .evo-m,
    .evo-go,
    .trk-c figcaption,
    .trk-note,
    .scc-k,
    .scc-s .mono,
    .kf-k,
    .pr-i,
    .pr-t em,
    .pr-b .sbadge,
    .hm-more,
    .mv-t .mono,
    .hm-foot,
    .acct-k,
    .gyt-k,
    .acct-n,
    .gyt-s,
    .fchips .fl,
    .fchips a,
    .ptable td .sbadge,
    .demo-note,
    .accc-h,
    .accc-n,
    .relf figcaption,
    .setx-oos,
    .setx-st span,
    .setx-st small,
    .setx-tk,
    .seth .mono,
    .wtv-n small,
    .wtc,
    .wtv-share,
    .wtv-since,
    .wtv-go,
    .wtt-note,
    .lcal-n,
    .pln-hz,
    .pln-sd small,
    .pln-fk label,
    .pln-zl,
    .pln-chips button,
    .pln-note,
    .pln-opt label,
    .pln-optn,
    .pln-kk,
    .pln-avg,
    .pln-n,
    .pln-hh .mono,
    .phm thead th:first-child,
    .pln-swipe,
    .phm th,
    .phc small,
    .pln-hleg,
    .bwin,
    .pv-a,
    .pv-x,
    .wix a,
    .xl,
    .ph-h,
    .pln-rph .mono,
    .pln-rps .rp-yt,
    .pln-rps .rp-xt,
    .pln-rps .rp-lt,
    .pln-rps .rp-hcap,
    .pln-rps .rp-hlq,
    .pln-rps .rp-hov,
    .pln-rps .rp-hun,
    .pln-tip,
    .pln-rpl,
    .rpl-x i,
    .play-hero .kicker,
    .play-presets > span,
    .play-kk,
    .play-kpi small,
    .play-k,
    .play-k i,
    .play-kx,
    .play-gl,
    .play-fam span,
    .play-about .mono,
    .play-dl,
    .play-chip em,
    .play-clg,
    .play-ch,
    .play-copt em,
    .play-cft,
    .play-cft kbd,
    .play-sd small,
    .play-fk label,
    .play-q button,
    .play-note,
    .play-cap > .mono,
    .play-tip,
    .play-leg,
    .play-more,
    .play-disc,
    .play-allx.mono,
    .play-pl,
    .play-gamecta .mono,
    .play-tbl .mono,
    .ptz-k,
    .ptz-foot,
    .game-hero .kicker,
    .gs-i,
    .game-top,
    .game-btn small,
    .game-who .mono,
    .game-who small,
    .bnav > a,
    .bn-more > summary,
    .bnav .bn-sheet a,
    .cct-l,
    .cct-v .mono,
    .cct-c,
    .cc-seg-l,
    .cc-feed,
    .cc-feed span,
    .cc-fl,
    .cc-fnote,
    .ccg-s,
    .ccb thead th,
    .ccd small,
    .ccbdg,
    .ccb .ccbdg,
    .ccbdg b,
    .ccx small,
    .ccb .ccx small,
    .ccb .ccs-cap,
    .ccb .ccs-none,
    .ccchip em,
    .ccb .ccflip,
    .ccb .cco a,
    .cc-foot,
    .cc-also,
    .cc-tip,
    .ccai-d,
    .ccai-s,
    .lt-l,
    .lab-sh p,
    .lab-h3 a,
    .lbadge,
    .ltag,
    .lb-head,
    .lb-h small,
    .lb-m small,
    .lb-t small,
    .lb-mnone,
    .lab-key,
    .lbr em,
    .lsx-top,
    .lsx-s,
    .lsx-l,
    .lab-pbar,
    .lpc-h,
    .lpr-c,
    .lab-note,
    .rip-top,
    .rip-r em,
    .rip-f,
    .mlog-top,
    .mlog-d dt,
    .acc-lab .mono,
    .game-mini .gs-i,
    .gm-note,
    .pv-foot,
    .pvc em,
    .pv-rec,
    .pv-nxt,
    .pv-yt,
    .pv-ytr,
    .pv-bl,
    .pv-ath,
    .pv-flag,
    .pv-xl,
    .pv-n,
    .pvb-k,
    .pvb-b,
    .phfz .phf-all,
    .tptr-k,
    .pcv-out,
    .pcv-t .mono,
    .pcv-mini .pv-n,
    .ohm dt,
    .scc-parts .mono,
    .rshort dt,
    .trd .rchip em,
    .hubtilt .hm-head p,
    .hubplays .hm-head p,
    .hubrec .hm-head p,
    .hbp-r em,
    .hbp-w small,
    .hrc-k,
    .pt-wrap .ptable td::before,
    .ptable .bwin,
    .accc-blk,
    .tok-hubs > span,
    .tok-call .sbadge,
    .tok-lh,
    .srch-quick a,
    .pvp > .pv-foot,
    .pc-c span,
    .refc-k,
    .xtab .xt-s { font-size: 11.5px; }
    .fq,
    .fn,
    .fm,
    .fd { font-size: max(11.5px, .92em); }
    .fa,
    .sw { font-size: max(11.5px, .9em); }
    .game-final span { font-size: max(11.5px, .6em); }
    small { font-size: max(11.5px, .83em); }      /* the browser's own 'smaller' */
  }
}
@scope (:root) to (svg, .hb, .k-token .band-1, .k-token .fold, .k-admin) {
  .eyebrow .para,
  .blk > .eyebrow > span:nth-child(2),
  .igc-k span:last-child,
  .scoremod .sc-rank .mono,
  .cd-now,
  .scc-s .mono,
  .ptable td .sbadge,
  .tok-call .sbadge,
  .wordmark .desk,
  .search-results .k,
  .srow .sk,
  .crumbs,
  .tape-l,
  .eyebrow,
  .stp,
  .zsep,
  .chip-new,
  .kind,
  .copy,
  .lbl,
  .delta em,
  .st-l,
  .vc-t,
  .vd-s,
  .rchip em,
  .vc-f,
  .ckst,
  .int-l,
  .igc-k,
  .receipt .ev em,
  .receipt .r em,
  .howto-t,
  .howto-x,
  .tlc-k,
  .tlc-s,
  .rib-l,
  th,
  tr.yr td,
  .cd-l,
  .g-s,
  .scope-meta span,
  .kv-r dt,
  .fold-l,
  .feedhero .kicker,
  .hstat .k,
  .fmod-t,
  .fd-d small,
  .fr-v em,
  .gb-l,
  .wanted .wrole,
  .wanted .ws span,
  .board-t,
  .board-m,
  .bn-l,
  .foot-voice .lbl,
  .exh,
  .tri-k,
  .vpline,
  .vp-t,
  .vp-tile span,
  .pbk-l,
  .oh-l,
  .cf-l,
  .cal-h,
  .trd-setup em,
  .trd-ol,
  .md-t,
  .ovc-k,
  .ovc-go,
  .toc-tier,
  .sl-c em,
  .scoremod .sc-row em,
  .fan-cap span,
  .slate-now td,
  .sl3-t,
  .demo-rib,
  .tid-ch em,
  .ph-stats dt,
  .sc-k,
  .setc-k,
  .scc-k,
  .pr-t em,
  .acct-k,
  .gyt-k,
  .fchips .fl,
  .accc-h,
  .relf figcaption,
  .setx-st span,
  .setx-tk,
  .wtc,
  .pln-fk label,
  .pln-kk,
  .pln-rps .rp-hcap,
  .play-hero .kicker,
  .play-presets > span,
  .play-kk,
  .play-k,
  .play-gl,
  .play-dl,
  .play-ch,
  .play-fk label,
  .play-cap > .mono,
  .play-gamecta .mono,
  .ptz-k,
  .game-hero .kicker,
  .game-who .mono,
  .cct-l,
  .cc-seg-l,
  .cc-feed span,
  .cc-fl,
  .ccg-s,
  .ccb thead th,
  .ccd small,
  .ccbdg b,
  .ccchip em,
  .ccb .ccflip,
  .lt-l,
  .lbadge,
  .lb-head,
  .rip-r em,
  .mlog-d dt,
  .acc-lab .mono { letter-spacing: .12em; }
}
@media (max-width: 720px) {
@scope (:root) to (svg, .hb, .k-token .band-1, .k-token .fold, .k-admin) {
  .zsep,
  .bnav a { letter-spacing: .12em; }
}
}
@media (max-width: 900px) {
@scope (:root) to (svg, .hb, .k-token .band-1, .k-token .fold, .k-admin) {
  .bnav > a,
  .bn-more > summary,
  .lbr em { letter-spacing: .12em; }
}
}
/* VIZ-GENERATED SMALL TEXT END */
/* a long caption under a chart: one line + an ⓘ (site.js) - hover / tap the ⓘ for the rest, click / Enter opens it */
.cap-fold { position: relative; display: block !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 26px; }
.cap-fold > * { display: inline !important; }
.cap-fold.cap-open { white-space: normal; overflow: visible; }
.cap-fold > .cap-i { display: inline-grid !important; }
.cap-i { position: absolute; right: 0; top: 0; width: 20px; height: 20px; place-items: center; padding: 0; border: 1px solid var(--line2);
  border-radius: 50%; background: var(--bg2); color: var(--ink2); font: 600 12px/1 var(--sans); cursor: pointer; }
.cap-i:hover, .cap-i:focus-visible, .cap-open > .cap-i { color: var(--ink); border-color: var(--blue); outline: none; }

/* ============================================================================================
   TOKEN LANE · ROUND 10 · band 1's PATTERN VIEW (web/pview.py + web/static/lines.js; the home hero's pattern for one
   coin, no leverage: green up / red down / orange sideways, every line right of now one real past case), the
   BEST-PLAY BAR and the PHONE FOLDS. Identity colours (--c, the --pl-* set) only on the chips' swatches and rings.
   ============================================================================================ */
.pv { margin: 0; min-width: 0; }
.pv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.pvc { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 5px 11px; border: 1px solid var(--line2); border-radius: 999px;
  background: var(--bg2); color: var(--ink2); font: 600 12px/1.2 var(--sans); cursor: default; }
.pvc b { font-weight: 600; color: var(--ink); white-space: nowrap; }
.pvc em { font-style: normal; font-size: 10.5px; letter-spacing: .04em; color: var(--ink3); white-space: nowrap; }
.pvc-sw { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.pvc.pvc-trial .pvc-sw { background: transparent; border: 1.5px dashed var(--c); }
.pv-live .pvc { cursor: pointer; }
.pv-live .pvc:hover, .pvc:focus-visible { border-color: var(--c); outline: none; }
.pvc.on { border-color: var(--c); background: #12161D; box-shadow: inset 0 0 0 1px var(--c); }
.pvc[aria-disabled="true"] { cursor: default; border-style: dashed; }
.pvc[aria-disabled="true"] b { color: var(--ink2); }
.pv-rec { margin: 0 0 8px; font-size: 10.5px; line-height: 1.45; color: var(--ink3); }
.pv-well { position: relative; height: 320px; border-radius: 12px; background: #06070A; overflow: hidden; touch-action: pan-y;
  box-shadow: inset 0 3px 14px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.045); }
.pv-plot { position: absolute; left: 48px; top: 16px; bottom: 30px; right: 46px; cursor: crosshair; }
.pv-plot:focus { outline: none; }
.pv-plot:focus-visible { outline: 1px solid var(--blue); outline-offset: 4px; border-radius: 4px; }   /* keyboard: the arrows step through the cases */
.pv-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.pv-svg path, .pv-svg line { fill: none; vector-effect: non-scaling-stroke; }
.pv-fut { fill: rgba(255,255,255,.022); }
.pv-0 { stroke: rgba(236,239,244,.22); stroke-width: 1; }
.pv-now { stroke: var(--ink); stroke-opacity: .45; stroke-width: 1; stroke-dasharray: 3 4; }
.pv-post path { stroke-width: 1.2; stroke-opacity: .62; stroke-linejoin: round; transition: stroke-opacity .15s ease; }
.pv-post path.pv-flat { stroke-width: 1.7; stroke-opacity: .92; }      /* the few sideways cases: findable among the rest */
.pv-svg .pv-good { stroke: var(--mint); }
.pv-svg .pv-bad { stroke: var(--red); }
.pv-svg .pv-flat { stroke: var(--amber); }
.pv-own { stroke: #FFFFFF; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.pv-guide { stroke: var(--ink2); stroke-opacity: .6; stroke-width: 1; stroke-dasharray: 2 3; }
.pv-brk { stroke: var(--ink); stroke-width: 1.4; }
.pv-hl { stroke-width: 2.6; stroke-linejoin: round; }
.pv.is-pick .pv-post path:not(.is-on) { stroke-opacity: .14; }
.pv-q { position: absolute; left: 77.8%; top: 50%; transform: translate(-50%, -50%); font: 800 110px/1 var(--sans); color: rgba(255,255,255,.045); pointer-events: none; }
.pv-nxt { position: absolute; left: 54%; top: 4px; margin-left: 8px; font-size: 10px; letter-spacing: .08em; color: var(--ink3); pointer-events: none; }
.pv-ov { position: absolute; inset: 0; pointer-events: none; }
.pv-yt { position: absolute; left: -46px; width: 40px; transform: translateY(-50%); text-align: right; font-size: 10px; color: var(--ink3); }
.pv-ytr { position: absolute; left: 100%; margin-left: 6px; transform: translateY(-50%); font-size: 10px; color: var(--ink3); white-space: nowrap; }
.pv-bl { position: absolute; transform: translate(-100%, -50%); padding: 1px 5px; border-radius: 4px; background: rgba(6,7,10,.82); font-size: 10.5px;
  color: var(--ink); white-space: nowrap; }
.pv-ath { position: absolute; left: 6px; top: 4px; font-size: 10px; color: var(--ink2); white-space: nowrap; }
.pv-flag { position: absolute; top: 20px; transform: translateX(-100%); padding: 1px 6px; border: 1px solid rgba(236,239,244,.22); border-radius: 4px;
  background: rgba(6,7,10,.82); font-size: 10px; color: var(--ink2); white-space: nowrap; }
.pv-dot { position: absolute; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; }
.pv-dot.pv-good { background: var(--mint); }
.pv-dot.pv-bad { background: var(--red); }
.pv-dot.pv-flat { background: var(--amber); }
.pv-pdot { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 3px rgba(6,7,10,.9); }
.pv-pdot[hidden] { display: none; }
.pv-xl { position: absolute; left: 48px; right: 46px; bottom: 8px; height: 14px; margin: 0; font-size: 10px; color: var(--ink3); pointer-events: none; }
.pv-xl span { position: absolute; top: 0; white-space: nowrap; }
.pv-xl span:first-child { left: 0; }
.pv-xl .pv-xn { left: 54%; transform: translateX(-50%); color: var(--ink2); }
.pv-xl span:last-child { left: 97.6%; transform: translateX(-100%); }
.pv-n { margin: 8px 0 0; font-size: 11px; color: var(--ink2); }
.pv-n .dim { color: var(--ink3); }
.pv-cap { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink3); }
.pv.pv-wait .pv-svg { opacity: .35; transition: opacity .15s ease; }
.pv-tip .tp-good { color: var(--mint); } .pv-tip .tp-bad { color: var(--red); } .pv-tip .tp-flat { color: var(--amber); }
.pv-none { margin: 0; padding: 18px; border: 1px dashed var(--line2); border-radius: 12px; font-size: 12px; color: var(--ink2); }
@media (max-width: 640px) {
  .pv-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -8px 6px 0; padding: 0 8px 2px 0; }
  .pv-chips::-webkit-scrollbar { display: none; }
  .pvc { flex: none; }
  .pv-well { height: 250px; }
  .pv-plot, .pv-xl { left: 38px; right: 36px; }
  .pv-yt { left: -36px; width: 32px; font-size: 9.5px; }
  .pv-ytr { margin-left: 4px; font-size: 9px; }
  .pv-ath, .pv-flag { font-size: 9px; }
  .pv-nxt { display: none; }                                  /* the x axis says +7d; the high's label takes the top */
  .pv-q { font-size: 76px; }
}
@media (prefers-reduced-motion: reduce) { .pv-post path, .pv.pv-wait .pv-svg { transition: none; } }

/* the best-play bar: fixed at the bottom, above the phone tab bar (lines.js measures it into --pvb-b) */
.pvb { position: fixed; z-index: 39; left: 50%; bottom: var(--pvb-b, 16px); transform: translateX(-50%); width: min(960px, calc(100vw - 24px));
  border: 1px solid var(--line2); border-radius: 14px; background: rgba(11,13,17,.95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 14px 40px -12px #000; }
.pvb[hidden], .pvb-v[hidden] { display: none; }
.pvb-v { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 6px 8px 6px 14px; }
.pvb-c { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.pvb-c b { font: 700 14px/1 var(--sans); color: var(--ink); }
.pvb-px { font-size: 12px; color: var(--ink2); }
.pvb-p { flex: none; font-size: 13px; font-weight: 700; }
.pvb-b { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pvb-b .dim { color: var(--ink3); }
.pvb-k { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.pvb-go { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--blue); border-radius: 10px;
  color: var(--ink); font: 600 13px/1 var(--sans); text-decoration: none; white-space: nowrap; }
.pvb-go:hover, .pvb-go:focus-visible { background: rgba(255,255,255,.07); outline: none; }   /* the blue stays a line, never a fill */
@keyframes pvb-in { from { opacity: 0; transform: translate(-50%, 24px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: no-preference) { .pvb.pvb-in { animation: pvb-in .32s cubic-bezier(.2, .8, .2, 1) both; } }
.pvb-on .foot { padding-bottom: calc(var(--s8) + 72px); }
@media (max-width: 900px) {
  .pvb { bottom: var(--pvb-b, calc(58px + env(safe-area-inset-bottom, 0px))); }
  .pvb-on .foot { padding-bottom: calc(var(--s8) + 140px); }
}
@media (max-width: 600px) {
  .pvb { width: calc(100vw - 12px); border-radius: 12px; }
  .pvb-v { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "c p go" "b b go"; gap: 3px 10px; min-height: 0;
    padding: 6px 6px 6px 10px; }
  .pvb-c { grid-area: c; } .pvb-p { grid-area: p; font-size: 12px; } .pvb-go { grid-area: go; padding: 0 12px; font-size: 12px; }
  .pvb-b { grid-area: b; font-size: 11px; }
  .pvb-px { display: none; }
  .pvb-c b { font-size: 13px; }
}

/* phone folds (<= 600 px; lines.js marks the blocks): a folded block keeps its titles and a one-line summary */
.phf-b, .phf-all { display: none; }
@media (max-width: 600px) {
  .phfz .phf:not(.phf-open) > :not(.phf-keep) { display: none !important; }
  .phfz .phf:not(.phf-open) { padding-bottom: 12px; margin-bottom: 10px; }
  .phfz .phf > h2, .phfz .phf > h3 { cursor: pointer; }
  .phfz .phf-b { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; margin: 8px 0 0; padding: 6px 10px 6px 12px;
    border: 1px solid var(--line2); border-radius: 10px; background: var(--bg2); color: var(--ink2); font: 12px/1.35 var(--sans); text-align: left; cursor: pointer; }
  .phfz .phf-b:focus-visible { outline: none; border-color: var(--blue); }
  .phf-s { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .phf-x { display: none; flex: 1 1 auto; color: var(--ink3); }
  .phf-c { flex: none; font-style: normal; color: var(--ink3); }
  .phf-c::before { content: "▾"; }
  .phf-open > .phf-b { margin-bottom: 10px; }
  .phf-open > .phf-b .phf-s { display: none; }
  .phf-open > .phf-b .phf-x { display: block; }
  .phf-open > .phf-b .phf-c::before { content: "▴"; }
  .phfz .phf-all { display: inline-flex; align-items: center; margin-left: auto; min-height: 36px; padding: 0 14px; border: 1px solid var(--line2);
    border-radius: 999px; background: transparent; color: var(--ink2); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
  .phfz .phf-all[aria-pressed="true"] { color: var(--ink); border-color: var(--ink3); }
}

/* ===== POLISH-C · ROUND 12 ===== */
/* The record and hub pages (people, funds, auditors, exchanges, launches, creator and wallet records, categories, chains):
   one header and four bands everywhere, the registry-era numbering gone ("§ 03", "/// full details"), ONE trade pointer
   per page into the prediction or pattern page it touches, the call headline in the token page's type, and tables that
   fold into cards on phones. Brand blue = accent only; green / red / orange = up / down / about flat. */

/* sections without the "§ nn" number: the eyebrow is the section's icon, label and stamp only */
.eyebrow.eb-plain::before { content: none; }
.eyebrow.eb-plain > span:first-child { display: inline-flex; align-items: center; gap: 6px; }

/* the record header: monogram · name · what it is · two or three facts */
.tid-rec .tid-row { align-items: center; }
.tid-rec .tid-meta { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0; line-height: 1.5; }
.tid-rec .tid-k { color: var(--ink2); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.tid-rec .tid-f::before { content: "·"; margin: 0 8px; color: var(--ink4); }
.tid-rec h1.h-addr { font-size: 26px; font-weight: 700; letter-spacing: 0; word-break: normal; overflow-wrap: anywhere; }
.tid-rec h1 .sym { font-size: 17px; font-family: var(--mono); letter-spacing: 0; }

/* THE TRADE POINTER: one per page - what this record means for a short-term trade, and the way into it */
.tptr { position: relative; isolation: isolate; margin: 22px 0 0; padding: 15px 18px 16px; border: 1px solid var(--line2); border-left: 2px solid var(--blue);
  border-radius: 0 12px 12px 0; overflow: hidden;
  background: linear-gradient(90deg, rgba(79,140,255,.09), rgba(79,140,255,.015) 55%, rgba(79,140,255,0)), var(--bg2);
  box-shadow: 0 14px 34px -22px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.035); }
.tptr-k { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.tptr-k .ic { width: 14px; height: 14px; flex: none; }
.tptr-s { margin: 0; max-width: 96ch; font-size: 15px; line-height: 1.6; color: var(--ink); }
.tptr-go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 12px 0 0; }
.tptr-b { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--blue); border-radius: 10px;
  color: var(--ink); font: 600 13px/1.2 var(--sans); text-decoration: none; transition: background-color .15s ease, box-shadow .15s ease; }
.tptr-b:hover, .tptr-b:focus-visible { color: var(--ink); background: rgba(79,140,255,.13); box-shadow: 0 0 18px rgba(79,140,255,.22); outline: none; }
.tptr-l { display: inline-flex; align-items: center; min-height: 32px; font-size: 13px; color: var(--ink2); text-decoration-color: var(--line2); }
.tptr-l:hover, .tptr-l:focus-visible { color: var(--blue); text-decoration-color: var(--blue-dim); }
@media (prefers-reduced-motion: no-preference) {
  /* a light runs along the pointer once it lands, then rests every few seconds */
  .tptr::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: 38%; pointer-events: none;
    background: linear-gradient(100deg, rgba(79,140,255,0), rgba(79,140,255,.11), rgba(79,140,255,0));
    transform: translateX(-120%) skewX(-16deg); animation: tptr-run 6.5s ease-in-out 1.2s infinite; }
  @keyframes tptr-run { 0%, 58% { transform: translateX(-120%) skewX(-16deg); } 88%, 100% { transform: translateX(320%) skewX(-16deg); } }
}

/* the pointer's headline number (a coin's chance, a venue's or a cohort's share) where band 1 has none of its own */
.tptr.tptr-big { display: grid; grid-template-columns: minmax(150px, auto) minmax(0, 1fr); gap: 6px 26px; align-items: center; padding: 18px 20px 18px; }
.tptr-hd { display: grid; gap: 6px; margin: 0; padding-right: 24px; border-right: 1px solid var(--line2); }
.tptr-n { font: 800 clamp(48px, 5.4vw, 66px)/.86 var(--sans); letter-spacing: -.045em; font-variant-numeric: proportional-nums; }
.tptr-n.t-good { color: var(--mint); text-shadow: 0 0 24px rgba(56,242,164,.16); }
.tptr-n.t-bad { color: var(--red); text-shadow: 0 0 24px rgba(255,77,94,.14); }
.tptr-n.t-flat { color: var(--amber); text-shadow: 0 0 24px rgba(255,180,77,.12); }
.tptr-w { max-width: 20ch; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--ink2); }
.tptr-body { min-width: 0; }
@media (max-width: 640px) {
  .tptr { padding: 14px 14px 15px; }
  .tptr.tptr-big { grid-template-columns: 1fr; padding: 16px 14px; }
  .tptr-hd { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 0 0 12px; border-right: 0; border-bottom: 1px solid var(--line2); }
  .tptr-n { font-size: 46px; }
  .tptr-w { max-width: none; }
  .tptr-s { font-size: 14px; }
  .tptr-b { width: 100%; justify-content: center; }
}
/* band-1 stat rows speak the site's colours (green up, red down, orange about flat) */
.rb1 .ph-stats dd.t-good { color: var(--mint); }
.rb1 .ph-stats dd.t-bad { color: var(--red); }
.rb1 .ph-stats dd.t-flat { color: var(--amber); }
.rb1-big .ph-n.ph-rng { font-size: clamp(46px, 5.6vw, 72px); white-space: nowrap; }
.rb1-viz .mv-col + .hm-foot { margin-top: 8px; }
.rb1-side { display: grid; gap: 14px; min-width: 0; }

/* PHONES: a table marked .crd folds into one card per row - its title cell on top, every other cell a labelled pair */
@media (max-width: 600px) {
  .tscroll:has(> table.crd) { overflow: visible; }
  table.crd, table.crd > tbody { display: block; width: 100%; }
  table.crd > thead { display: none; }
  table.crd > caption { display: block; }
  table.crd > tbody > tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; padding: 12px 14px; border-bottom: 1px solid var(--line2); }
  html.js .fold:not(.foldx) .fold-t:checked ~ .fold-b table.crd > tbody > tr { display: grid; }
  table.crd > tbody > tr:last-child { border-bottom: 0; }
  table.crd > tbody > tr > td { display: block; min-width: 0; padding: 0; border: 0; text-align: left; white-space: normal; }
  table.crd > tbody > tr > td.n { text-align: left; }
  table.crd > tbody > tr > td[data-l]::before { content: attr(data-l); display: block; margin-bottom: 2px; font: 600 11.5px/1.3 var(--mono);
    letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }
  table.crd > tbody > tr > td.c-main { grid-column: 1 / -1; font-size: 15px; font-weight: 600; }
  table.crd > tbody > tr > td.c-main a { color: var(--ink); }
  table.crd > tbody > tr > td.c-rk { grid-column: 1 / -1; order: -1; margin-bottom: -6px; }
  table.crd > tbody > tr > td.c-wide { grid-column: 1 / -1; }
  table.crd > tbody > tr > td.c-x { display: none; }
  table.crd > tbody > tr.ev-sub, table.crd > tbody > tr.yr { display: block; }
  table.crd > tbody > tr.ev-sub > td:empty { display: none; }
  table.crd .cq-svg { width: 40px; }
  table.crd svg.spk { max-width: 100%; }
}

/* record pages: card and key-fact titles without the "///" prefix (the eyebrows above them already dropped it) */
body:is(.k-person, .k-investor, .k-auditor, .k-exchange, .k-launch, .k-creator, .k-wallet) :is(.vc-t, .int-l)::before { content: none; }
/* band 3 opens with the record's key numbers ("… in short"): two even rows of three in the data column */
.band-3 .blk > .bigrow { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 4px; }
@media (max-width: 600px) { .band-3 .blk > .bigrow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }

/* the auditor's peers table folds into cards on a phone (the token page's #peers rule widened it to 640 px) */
@media (max-width: 600px) { .k-auditor #peers .tscroll > table.crd { min-width: 0; } .k-auditor #peers .tscroll > table.crd td { white-space: normal; } }

/* index heroes speak without the "///" prefix too; the dead-token counter's sentence wraps instead of ending mid-word */
.hero-ix > .eyebrow::before { content: none; }
.gb-row .b-n { white-space: normal; overflow: visible; }
.gb-row .b-s { font-size: 11.5px; line-height: 1.5; letter-spacing: .02em; }

/* write-ups that quote a whole address (a mint, a wallet) wrap it instead of widening a phone page */
body:is(.k-person, .k-investor, .k-auditor, .k-exchange, .k-launch, .k-creator, .k-wallet, .k-category, .k-chain) .wsec { overflow-wrap: anywhere; }

/* event cards on a phone (record and hub pages): token, next day and 30 days; the sentence under each card carries the
   week before and the gap to BTC, the 90-day move stays on wider screens */
@media (max-width: 600px) {
  body:is(.k-person, .k-exchange, .k-exchange_listings, .k-category, .k-chain) table.crd.evled > tbody > tr > td.shm { display: none; }
}

td.c-main .crd-only.dim { font-size: 12px; font-weight: 400; color: var(--ink3); }

/* band 1 with nothing measured yet: a plain statement, not a headline number in a colour */
.rb1-big .ph-n.ph-na { font-size: clamp(30px, 3.6vw, 44px); color: var(--ink2); text-shadow: none; letter-spacing: -.02em; }

/* ===== /POLISH-C · ROUND 12 ===== */

/* ===== POLISH-A · ROUND 12 ===== */
/* token band 1: the pattern vote under the strength badge. Its class (.pv) is shared with the pattern view's figure,
   whose round-10 rule zeroed the vote's top margin; the on-trial count gets its own quiet line (no dangling dot). */
.ph-top p.pv { margin: 12px 0 0; }
.ph-top .pv-x { flex-basis: 100%; }
@media (max-width: 640px) { .ph-top p.pv { margin-top: 10px; } }

/* band 2 · our record on the coin (viz.track_path): each call on a recessed screen like the pattern view - the coin's
   real price after the call, the range we gave as a bar past the end, the end dot right / wrong / sideways. With motion
   allowed the cards land in turn (motion.js data-pop), the path draws itself, the bar grows, then the dot lands. */
.trk-c svg.tkp { border-radius: 6px; background: #06070A; box-shadow: inset 0 2px 8px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.045); }
@media (prefers-reduced-motion: no-preference) {
  .pp-pop svg.tkp .tkp-p { animation: tkp-draw .9s ease-out backwards; animation-delay: calc(var(--d, 0ms) + .2s); }
  .pp-pop svg.tkp .tkp-r, .pp-pop svg.tkp .tkp-q { transform-box: fill-box; transform-origin: 50% 50%;
    animation: tkp-bar .5s cubic-bezier(.2,.75,.25,1) backwards; animation-delay: calc(var(--d, 0ms) + .1s); }
  .pp-pop svg.tkp circle:last-of-type { transform-box: fill-box; transform-origin: 50% 50%;
    animation: tkp-dot .35s cubic-bezier(.2,.75,.25,1.4) backwards; animation-delay: calc(var(--d, 0ms) + 1.05s); }
  @keyframes tkp-draw { from { stroke-dasharray: 100 100; stroke-dashoffset: 100; } to { stroke-dasharray: 100 100; stroke-dashoffset: 0; } }
  @keyframes tkp-bar { from { transform: scaleY(0); } to { transform: none; } }
  @keyframes tkp-dot { from { transform: scale(0); } to { transform: none; } }
}

/* the pattern page's hero chart and the token page's next-catalyst block (macros.html case_chart, web/pview.py
   pattern_chart): a pattern's past cases as they moved, on the pattern view's recessed screen and in its colours; the
   plot runs to the right edge (no right-hand scale), the end dots sit on it, a case under the pointer comes forward */
.pcv { margin: 0; min-width: 0; }
.pcv .pv-plot, .pcv .pv-xl { right: 16px; }
.pcv .pv-xl span:last-child { left: 100%; }
.pcv-xl .pcv-xt { transform: translateX(-50%); }
.pcv.is-pick .pv-post path:not(.is-on) { stroke-opacity: .14; }
.pcv .pv-post path { stroke-opacity: .5; }
.pcv .pv-post path.pv-flat { stroke-width: 1.3; stroke-opacity: .62; }
.pcv-out { position: absolute; right: 8px; font-size: 10px; color: var(--ink3); white-space: nowrap; }
.pcv-up { top: 2px; } .pcv-dn { bottom: 2px; }
.pcv-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 18px; margin: var(--s5, 22px) 0 10px; }
.pcv-t { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.pcv-t .mono { display: block; margin-top: 3px; font-size: 11px; font-weight: 400; letter-spacing: .02em; color: var(--ink3); }
.pcv-mini { margin: 4px 0 0; }
.pcv-mini .pv-well { height: 150px; border-radius: 10px; }
.pcv-mini .pv-plot { left: 40px; top: 10px; bottom: 24px; }
.pcv-mini .pv-xl { left: 40px; bottom: 5px; }
.pcv-mini .pv-yt { left: -38px; width: 33px; }
.pcv-mini .pv-n { margin-top: 6px; font-size: 10.5px; }
.pbk-cases { min-width: 0; }
/* the horizon switch (7 / 30 / 90 days): whole pills that never break inside, its note on its own line when tight */
.htog { flex-wrap: wrap; row-gap: 6px; }
.htog a, .htog span { white-space: nowrap; }
.htog .htog-x { border: 0; padding: 0; background: none; color: var(--ink3); letter-spacing: .04em; }
@media (max-width: 640px) {
  .pcv-head { margin-top: 18px; }
  .pcv-t { font-size: 15.5px; }
  .pcv .pv-well { height: 240px; }
  .pcv .pv-plot, .pcv .pv-xl { left: 38px; right: 12px; }
  .pcv .pv-yt { left: -36px; width: 32px; }
  .pcv-mini .pv-well { height: 150px; }
}

/* the pattern page's third headline card: medians, best and worst as one readable list (was six 7.5px boxes) */
.ohm { margin: 0; display: grid; }
.ohm > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.ohm > div:last-child { border-bottom: 0; }
.ohm dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.ohm dd { margin: 0; font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.ohm dd .dim { color: var(--ink3); font-weight: 400; }

/* /patterns: every pattern's name whole (it wraps instead of ending in an ellipsis that made siblings look alike), the
   90% range under its bar, the recent-cases chip never broken - the table fits its column at 1280 */
table.pat-idx td.pat-n { min-width: 210px; line-height: 1.35; }
table.pat-idx td.pat-n a { white-space: normal; }
table.pat-idx td.pat-ci { white-space: nowrap; }
table.pat-idx td.pat-ci .mono { display: block; margin-top: 3px; }
table.pat-idx .chip { white-space: nowrap; }
.ohm dd.t-good { color: var(--mint); } .ohm dd.t-bad { color: var(--red); } .ohm dd.t-flat { color: var(--amber); }
/* the headline cards' numbers sit centred in their card (the third card, a list, sets the row's height) */
.odds-head .oh-big { display: flex; flex-direction: column; justify-content: center; }
/* a toned number in a table cell keeps its tone: the generic "table .mono" grey (0,1,1) outranked .t-good (0,1,0) */
table.pat-idx td.mono.t-good, .k-token table td.mono.t-good { color: var(--mint); }
table.pat-idx td.mono.t-bad, .k-token table td.mono.t-bad { color: var(--red); }
table.pat-idx td.mono.t-flat, .k-token table td.mono.t-flat { color: var(--amber); }

/* band 2: the score card shows its five parts (it stood half empty beside the rug-risk card) */
.scc-top { display: flex; align-items: center; gap: 14px; }
.scc-parts { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 7px; }
.scc-parts li { display: grid; grid-template-columns: 96px minmax(0, 1fr) 28px; align-items: center; gap: 10px; }
.scc-parts .mono { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.scc-parts svg { display: block; width: 100%; height: 5px; }
.scc-parts b { font-size: 12.5px; color: var(--ink); text-align: right; }
.scc .scc-s { margin-top: auto; }
/* band 2 · key stats on a phone: the line under each value wraps instead of ending in an ellipsis */
@media (max-width: 600px) {
  .kf-i { grid-template-columns: 18px minmax(0, 1fr) auto; row-gap: 3px; }
  .kf-k { white-space: normal; }
  .kf-s { grid-column: 2 / -1; white-space: normal; overflow: visible; }
}
/* band 3: the unlock schedule's ".ics feed" chip never breaks in two */
.icsb { white-space: nowrap; }
/* band 3 · at a glance: the last card never spans two columns, so the dense grid closes its last row (a 21st wide
   "Sources" card left two holes) */
.k-token .ovgrid > .ovc:last-child { grid-column: auto; }

/* band 3 · § 01 the record in short: the record's own counts in one strip */
.rshort { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: var(--s3) 0 0; }
.rshort > div { padding: 10px 12px; border: 1px solid var(--line2); border-radius: 6px; background: var(--bg1); min-width: 0; }
.rshort dt { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.rshort dd { margin: 4px 0 0; font-size: 17px; font-weight: 700; color: var(--ink); }
.rshort dd .dim { font-size: 12px; font-weight: 400; color: var(--ink3); }
.rshort dd.t-good { color: var(--mint); } .rshort dd.t-bad { color: var(--red); } .rshort dd.t-flat { color: var(--amber); }
@media (max-width: 760px) { .rshort { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* band 3 · the next catalyst block: its case chart takes a fair column, the three numbers stay readable */
.trd-grid .trd-rate { flex: 1 1 380px; max-width: 620px; min-width: 0; }
.trd .rchip em { font-size: 9.5px; letter-spacing: .1em; color: var(--ink3); }
/* the contents list on the token and pattern pages: whole titles (two lines when they must), never "THE RECORD IN SHO…" */
.k-token .toc a, .k-pattern .toc a, .k-patterns .toc a { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.45; }

/* /play: the "Beat the pattern" card's "play →" sat on top of its "Mini-game" kicker (its .mono class pulled it into
   the kicker's grid area); it goes back to the right-hand column */
.play-gamecta em.mono { grid-area: go; font-size: 13px; letter-spacing: .04em; text-transform: none; color: var(--blue); }
/* /play "Try" presets: every one visible on a wide screen (the row ended in a cut-off pill); a phone keeps the swipe row,
   now with a soft edge that says there is more */
@media (min-width: 901px) { .play-presets { flex-wrap: wrap; overflow: visible; row-gap: 8px; } }
@media (max-width: 900px) { .play-presets { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); } }
/* ... and on a phone the four columns left (pattern, cases, up next day, median 30d) fit the screen: the headers wrap,
   the name takes what remains (it overflowed the scroller by ~60px) */
@media (max-width: 600px) {
  table.pat-idx td.pat-n { min-width: 0; }
  table.pat-idx th { white-space: normal; vertical-align: bottom; overflow-wrap: normal; word-break: normal; }
  table.pat-idx th, table.pat-idx td { padding-left: 6px; padding-right: 6px; }
}

/* token band 1: the headline's horizon words ("for the next 30 days") never break across two lines */
.ph-h b { white-space: nowrap; }
/* band 2 · the track record card's bar: the sideways share in orange between the ups and the downs */
.scorebar .sb-f { background: var(--amber); opacity: .85; }
/* /patterns: the names that hold exactly the row above's cases, as one quiet line attached to it */
table.pat-idx tr:has(+ tr.pat-same) td { border-bottom-color: transparent; }
table.pat-idx tr.pat-same td { padding-top: 0; font-size: 12px; line-height: 1.6; color: var(--ink3); white-space: normal; }
table.pat-idx tr.pat-same a { color: var(--ink2); text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 3px; }
table.pat-idx tr.pat-same a:hover { color: var(--ink); text-decoration-color: var(--ink3); }
table.pat-idx tr.pat-same:hover { background: none; }
/* one voice with the other pages (coordinator, Oct 3): no "///" before an eyebrow or a card title on the token, pattern,
   patterns and play pages - the mono capitals carry the hierarchy (the "§ nn" numbers went with macros PLAIN, whose
   eb-plain eyebrow also spaces the icon from its label) */
:is(.k-token, .k-pattern, .k-patterns, .k-play, .k-play_game) :is(.eyebrow, .vc-t, .ovc-k, .howto-t, .int-l, .tri-k, .ff-t)::before { content: none; }
/* ===== /POLISH-A · ROUND 12 ===== */

/* ===== POLISH-B · ROUND 12 ===== */
/* The hub and tool pages (predictions + its three horizon hubs, calendar, unlocks, listings, delistings, setups, lab,
   accuracy, tokens, search, methodology, privacy, 404): a quiet divider instead of the "/// full details" banner, the
   prediction hubs' own sections (what tilts the odds, best long / short setups, the horizon's track record with the lazy
   guesses next to it), and phone card rows for the tables that cannot scroll comfortably on a 390px screen. */

/* the quiet divider (macros.pdiv): a hairline, a plain title, one dim line */
.pdiv { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin: 44px 0 26px; padding: 14px 0 0;
  border-top: 1px solid var(--line2); position: relative; }
.pdiv::before { content: ""; position: absolute; left: 0; top: -1px; width: 64px; height: 1px; background: var(--blue); }
.pdiv-t { font: 700 18px/1.2 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.pdiv-s { font-size: 12.5px; color: var(--ink3); }

/* board column titles are headings now ("Likely to drop this week"): keep the strip's own look */
h2.mv-t, h3.mv-t { font-family: var(--sans); font-size: 14px; line-height: 1.3; font-weight: 700; letter-spacing: 0; color: var(--ink); }
h2.mv-t > span:first-child, h3.mv-t > span:first-child { font-size: 15px; }

/* the hub section heads */
.hubtilt .hm-head p, .hubplays .hm-head p, .hubrec .hm-head p { margin: 0; font-size: 11px; color: var(--ink3); }
.hubtilt, .hubplays, .hubrec { margin-top: 34px; }

/* what tilts the odds: one card per situation, its bar (here vs normal), the coins in it today */
.tilts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tilt { min-width: 0; padding: 14px 16px 12px; border: 1px solid var(--line2); border-left: 3px solid var(--line2); border-radius: 8px; background-color: var(--bg2);
  background-image: linear-gradient(180deg, rgba(255,255,255,.034), rgba(255,255,255,.008) 38%, rgba(255,255,255,0) 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 1px rgba(0,0,0,.6), 0 20px 44px -24px rgba(0,0,0,.9); }
.tilt-good { border-left-color: var(--mint); } .tilt-bad { border-left-color: var(--red); } .tilt-flat { border-left-color: var(--amber); }
.tilt-l { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 6px; font-size: 14px; color: var(--ink); }
.tilt-d { flex: none; font-size: 12px; font-weight: 700; }
.tilt svg.dbar { display: block; width: 100%; max-width: 320px; height: 26px; }
.tilt-s { margin: 6px 0 8px; font-size: 13px; line-height: 1.5; color: var(--ink2); }
.tilt-c { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; font-size: 11.5px; }
.tilt-c > span { color: var(--ink3); margin-right: 2px; }
.tilt-c a { padding: 2px 7px; border: 1px solid var(--line2); border-radius: 999px; text-decoration: none; font-weight: 700; background: var(--bg1); }
.tilt-c a:hover { border-color: var(--ink3); }
.tilt-c i { font-style: normal; color: var(--ink3); }

/* best long / best short setups at the hub's hold */
.hbp { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); min-width: 0; }
.hbp:last-of-type { border-bottom: 0; }
.hbp:hover { background: rgba(255,255,255,.025); color: var(--ink); }
.hbp .tkl, .hbp .av { flex: none; }
.hbp-n { flex: 1 1 90px; min-width: 0; line-height: 1.25; }
.hbp-n b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbp-n small { display: block; color: var(--ink3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbp-s { flex: 0 0 auto; font-size: 12px; color: var(--ink2); white-space: nowrap; }
.hbp-r { flex: 0 0 74px; text-align: right; }
.hbp-r em { display: block; font-style: normal; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); }
.hbp-r b { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.hbp-w { flex: 0 0 64px; text-align: right; font-size: 12px; color: var(--ink2); line-height: 1.3; }
.hbp-w small { display: block; font-size: 11px; color: var(--ink3); }
.hbp-note { margin: 0; padding: 10px 14px 12px; border-top: 1px dashed var(--line); font-size: 11.5px; line-height: 1.55; color: var(--ink3); }
.hbp-col .empty { margin: 14px; }

/* the hub's track record: the scorecard (bars next to the lazy guesses) and month by month */
.hubrec-g { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 14px; }
.hrc { min-width: 0; padding: 16px 18px; border: 1px solid var(--line2); border-radius: 8px; background-color: var(--bg2);
  background-image: linear-gradient(180deg, rgba(255,255,255,.034), rgba(255,255,255,.008) 38%, rgba(255,255,255,0) 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 1px rgba(0,0,0,.6), 0 20px 44px -24px rgba(0,0,0,.9); }
.hrc-k { margin: 0 0 8px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); font-weight: 700; }
.hrc-v { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 12px; }
.hrc-v b { font: 800 40px/1 var(--sans); letter-spacing: -.03em; }
.hrc-v span { font-size: 13px; color: var(--ink2); line-height: 1.4; }
.hrc-x { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; font-weight: 600; }
.hrc-n { margin: 10px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--ink3); }
.hrc-n a { color: var(--cyan); }
.hrc-m svg.hrm { display: block; width: 100%; height: auto; margin: 4px 0 0; }
.acct-wide { margin-top: 14px; }
/* our calls next to the lazy guesses (bars on a 0-100% track; the tick is a coin flip) */
.bsl { display: grid; gap: 7px; margin: 0; }
.bsl-r { display: grid; grid-template-columns: minmax(0, 150px) minmax(60px, 1fr) 54px; align-items: center; gap: 10px; cursor: default; }
.bsl-l { font-size: 12.5px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bsl-our .bsl-l { color: var(--ink); font-weight: 700; }
.bsl-b { position: relative; height: 10px; border-radius: 5px; background: rgba(0,0,0,.35); box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.bsl-f { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 5px; background: var(--ink4); transform-origin: 0 50%; }
.bsl-f.f-good { background: var(--mint); } .bsl-f.f-bad { background: var(--red); } .bsl-f.f-flat { background: var(--amber); }
.bsl-50 { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--ink3); opacity: .7; }
.bsl-v { font: 700 13px/1 var(--mono); text-align: right; color: var(--ink2); }
@media (prefers-reduced-motion: no-preference) {
  .pp-pop .bsl-f, .bsl.pp-pop .bsl-f { animation: bsl-grow .7s cubic-bezier(.2,.75,.25,1) backwards; animation-delay: calc(var(--d, 0ms) + .15s); }
  @keyframes bsl-grow { from { transform: scaleX(0); } to { transform: none; } }
  .pp-pop svg.hrm .hrm-d { transform-box: fill-box; transform-origin: 50% 50%; animation: hrm-dot .4s cubic-bezier(.2,.75,.25,1.4) backwards;
    animation-delay: calc(var(--i, 0) * 60ms + .2s); }
  .pp-pop svg.hrm .hrm-e { transform-box: fill-box; transform-origin: 50% 100%; animation: hrm-line .4s ease-out backwards; animation-delay: calc(var(--i, 0) * 60ms + .1s); }
  @keyframes hrm-dot { from { transform: scale(0); } to { transform: none; } }
  @keyframes hrm-line { from { opacity: 0; } to { opacity: 1; } }
}
/* the month chart's marks */
svg.hrm .hrm-g { stroke: var(--line2); stroke-width: 1; }
svg.hrm .hrm-50 { stroke: var(--ink3); stroke-dasharray: 3 4; }
svg.hrm .hrm-yl, svg.hrm .hrm-xl, svg.hrm .hrm-cf { font: 11px var(--mono); fill: var(--ink3); }
svg.hrm .hrm-cf { fill: var(--ink2); }
svg.hrm .hrm-e { stroke-width: 2.4; stroke-linecap: round; }
svg.hrm .hrm-lz { stroke: var(--ink2); stroke-width: 2; stroke-linecap: round; opacity: .75; }
svg.hrm .hrm-hit { cursor: default; }

/* the predictions table: the hub's own horizon column is lit; the name cell holds symbol + name on one line */
.ptable .pt-s { color: var(--ink); }
.ptable .pt-nm { color: var(--ink3); font-size: 12px; }
.ptable td.pt-on { background: rgba(79,140,255,.045); }
.feeds a { margin: 0 2px; }
.sm-foot { margin-top: 14px; }

@media (max-width: 980px) {
  .hubrec-g { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .tilts { grid-template-columns: 1fr; }
}
/* phones: the predictions table folds into one card per coin (thead hidden, each cell labelled) */
@media (max-width: 640px) {
  .pt-wrap { overflow: visible; border: 0; background: none; box-shadow: none; background-image: none; }
  .pt-wrap .ptable, .pt-wrap .ptable tbody { display: block; }
  .pt-wrap .ptable thead { display: none; }
  .pt-wrap .ptable tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; margin: 0 0 10px; padding: 12px 12px 10px;
    border: 1px solid var(--line2); border-radius: 10px; background: var(--bg2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 30px -20px rgba(0,0,0,.9); }
  .pt-wrap .ptable tr[data-hide] { display: none; }
  .pt-wrap .ptable td { display: block; padding: 0; border: 0; text-align: left; min-width: 0; }
  .pt-wrap .ptable td.shm { display: block; }
  .pt-wrap .ptable td::before { content: attr(data-l); display: block; margin: 0 0 2px; font: 600 10.5px/1.3 var(--mono); letter-spacing: .06em;
    text-transform: uppercase; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pt-wrap .ptable td.nwc { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 14px; }
  .pt-wrap .ptable td.nwc::before { display: none; }
  .pt-wrap .ptable td.pt-on { background: none; }
  .pt-wrap .ptable td.pt-on > span { padding: 1px 6px; border-radius: 4px; background: rgba(79,140,255,.10); }
  .pt-wrap .ptable td .mono, .pt-wrap .ptable td.mono { font-size: 13px; }
  .pdiv { margin: 34px 0 20px; }
  .pdiv-t { font-size: 17px; }
  .hrc-v b { font-size: 34px; }
  .bsl-r { grid-template-columns: minmax(0, 128px) minmax(40px, 1fr) 50px; gap: 8px; }
  .bsl-l { white-space: normal; line-height: 1.2; }
  .hbp { gap: 10px; padding: 10px 12px; }
  .hbp-s { font-size: 11.5px; }
  .hbp-w { flex-basis: 56px; }
}
@media (max-width: 400px) { .hbp .tkl, .hbp .av { display: none; } }

/* hero eyebrows on these pages read as one line ("/// Predictions · next 7 days"), never a lone "///" over the words */
:is(.k-predictions, .k-calendar, .k-unlocks, .k-listings, .k-delistings, .k-setups, .k-lab, .k-accuracy, .k-tokens_index,
  .k-tokens_letter, .k-search, .k-methodology, .k-privacy, .k-404, .k-month) .hero > .eyebrow { display: block; line-height: 1.7; }
:is(.k-predictions, .k-calendar, .k-unlocks, .k-listings, .k-delistings, .k-setups, .k-lab, .k-accuracy, .k-tokens_index,
  .k-tokens_letter, .k-search, .k-methodology, .k-privacy, .k-404, .k-month) .hero > .eyebrow::before { margin-right: 8px; }
/* related links: the little kind tag never breaks across two lines */
.related li .dim { white-space: nowrap; }
/* the predictions table fits the content column at 1280 (no sideways scroll): tighter cells, the name truncates */
.ptable th, .ptable td { padding-left: 9px; padding-right: 9px; }
.ptable th { white-space: normal; line-height: 1.35; }
.ptable td.nwc { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptable .bwin { font-size: 10.5px; }
/* the 0-100 score tables keep a readable width instead of spreading four numbers across the column */
.sm-wrap { max-width: 720px; }
.sm-wrap td.n { white-space: nowrap; }
/* phones: numbers never stack digit over digit; a table that still runs wide scrolls inside its own frame */
@media (max-width: 640px) {
  :is(.k-predictions, .k-calendar, .k-unlocks, .k-listings, .k-delistings, .k-setups, .k-lab, .k-accuracy, .k-tokens_index,
    .k-tokens_letter, .k-methodology, .k-month) .tscroll td.n { white-space: nowrap; }
  .pt-wrap .ptable td.pt-call { grid-column: span 2; }
  .pt-wrap .ptable td.nwc { max-width: none; }
  svg.hrm .hrm-yl, svg.hrm .hrm-xl { font-size: 19px; }
  svg.hrm g.hrm-m:nth-of-type(even) .hrm-xl { display: none; }
  svg.hrm .hrm-d { r: 7.5px; }
  svg.hrm .hrm-e { stroke-width: 4; }
  svg.hrm .hrm-lz { stroke-width: 3.4; }
}
/* /accuracy: each horizon card puts the hit rate next to the lazy guesses on the same calls */
.accc-bl { margin: 4px 0 14px; padding: 12px 12px 10px; border-radius: 8px; background: rgba(0,0,0,.22); box-shadow: inset 0 1px 3px rgba(0,0,0,.55); }
.accc-blk { margin: 0 0 9px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); font-weight: 700; }
.accc-bl .bsl-r { grid-template-columns: minmax(0, 132px) minmax(40px, 1fr) 46px; gap: 8px; }
.accc-bl .bsl-l { font-size: 12px; }
.accc-vd { margin: 10px 0 0; font-size: 13px; font-weight: 700; line-height: 1.45; }
/* the reliability and coin-by-coin tables fit a phone: headers wrap, cells stay on one line */
@media (max-width: 640px) {
  .k-accuracy .tscroll th { white-space: normal; letter-spacing: .06em; line-height: 1.35; overflow-wrap: normal; word-break: normal; hyphens: auto; }
  .k-accuracy .tscroll td, .k-accuracy .tscroll th { padding-left: 8px; padding-right: 8px; }
  .k-accuracy .tscroll td.nwc { white-space: normal; }
}
/* calendar: the disclaimer stands on its own line (the legend under it may fold behind its (i)); the watchlist star is a
   real button, not a speck; phone tiles let their labels wrap instead of cutting them */
.cc-disc { margin: 26px 0 4px; }
.cc-disc + .cc-foot { margin-top: 2px; }
.ccb .ccw .starb { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; margin: 0 8px 0 0;
  border-radius: 7px; font-size: 13px; line-height: 1; vertical-align: middle; }
@media (max-width: 980px) {
  .ccb .ccw .starb { width: auto; min-width: 40px; height: 32px; border-radius: 8px; font-size: 15px; }
}
@media (max-width: 600px) {
  .cct-l, .cct-c { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
}
/* unlocks: the bar chart's labels name the coin and the month; on phones the bars carry the story and a tap reads each
   one (its value labels and ticks would collide at 390px) */
.crd-only { display: none; }
.unl-tap { display: none; }
@media (max-width: 640px) {
  .k-unlocks svg.divbar .g-l, .k-unlocks svg.divbar .db-v { display: none; }
  .unl-tap { display: inline; }
}
@media (max-width: 600px) { .crd-only { display: inline; } }
@media (max-width: 600px) {
  table.crd > tbody > tr.unl-next > td { background: none; box-shadow: none; }
  table.crd > tbody > tr.unl-next { background: rgba(95,211,232,.05); box-shadow: inset 2px 0 0 var(--k-cat); }
}
/* a long sentence broken at its semicolons (markup.intel: ir-cont) stays visibly one sentence: its later parts hang
   off a thin rule under its first part instead of reading as new, lower-case lines */
:is(.k-predictions, .k-calendar, .k-unlocks, .k-listings, .k-delistings, .k-setups, .k-lab, .k-accuracy, .k-tokens_index,
  .k-tokens_letter, .k-methodology, .k-month) .ir.ir-cont { position: relative; margin-top: calc(-1 * var(--s2) + 2px); padding-left: 18px; }
:is(.k-predictions, .k-calendar, .k-unlocks, .k-listings, .k-delistings, .k-setups, .k-lab, .k-accuracy, .k-tokens_index,
  .k-tokens_letter, .k-methodology, .k-month) .ir.ir-cont::before { content: ""; position: absolute; left: 6px; top: 2px; bottom: 6px; width: 1px;
  background: var(--line2); }
/* tokens A-Z: a directory, not a register - the coin, its size, its month, its high, today's 7-day call */
.tok-hubs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; margin: 10px 0 0; font-size: 13px; }
.tok-hubs > span { min-width: 74px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); }
.tok-hubs a { padding: 3px 10px; border: 1px solid var(--line2); border-radius: 999px; background: var(--bg1); color: var(--ink2); text-decoration: none; }
.tok-hubs a:hover { border-color: var(--blue-dim); color: var(--ink); }
table.toks td { vertical-align: middle; }
.tok-n { white-space: nowrap; }
.tok-n .tkl, .tok-n .av { margin-right: 8px; vertical-align: middle; }
.tok-n a { text-decoration: none; color: var(--ink); }
.tok-n a b { font-size: 14px; }
.tok-n a span { color: var(--ink3); font-size: 12.5px; }
.tok-n .chip { margin-left: 10px; vertical-align: middle; }
.tok-call a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; white-space: nowrap; }
.tok-call .sbadge { font-size: 9.5px; padding: 3px 6px; }
.tok-call .mono { font-size: 12px; font-weight: 700; }
.tok-more { margin-top: 12px; font-size: 13px; }
.tok-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.tok-l { min-width: 0; padding: 14px 16px; border: 1px solid var(--line2); border-radius: 8px; background: var(--bg2); }
.tok-lh { margin: 0 0 8px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); font-weight: 700; }
.tok-li { margin: 0; padding: 0 0 0 18px; font-size: 13px; line-height: 1.5; }
.tok-li li { margin: 0 0 6px; }
.tok-li li span { display: block; font-size: 11.5px; }
@media (max-width: 760px) { .tok-two { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  table.toks > tbody > tr > td.tok-n { white-space: normal; }
  table.toks > tbody > tr > td.tok-call { grid-column: 1 / -1; }
}
/* setups: the four rule tables share one column grid, so their values line up down the page */
.rules-w table.rules { table-layout: fixed; }
.rules-w table.rules th:first-child, .rules-w table.rules td:first-child { width: 62%; }
.rules-w table.rules td { white-space: normal; overflow-wrap: normal; }   /* a long condition wraps inside its column */
/* delistings: the venue rides with the announcement */
.dl-x { margin-left: 6px; font-size: 11.5px; color: var(--ink2); text-decoration: none; white-space: nowrap; }
.dl-led td { vertical-align: top; }
.dl-led th:nth-child(4) { white-space: normal; }          /* "Days listed" over two lines: the column is as wide as its numbers */
.evled.dl-led td.nwc > a { max-width: 118px; }             /* the eleven columns fit the content width without a sideways scroll */
/* the Lab: the graveyard packs its cards into columns (no tall empty tombs); phone labels stay on one line */
.k-lab .rip-grid { display: block; columns: 4 250px; column-gap: 14px; }
.k-lab .rip-grid > .rip { break-inside: avoid; margin: 0 0 14px; }
@media (max-width: 900px) { .k-lab .lbr em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .05em; } }
/* the Lab's flipped / held pattern lists: a long pattern name wraps on a phone instead of losing its tail */
@media (max-width: 600px) { .k-lab .lpr-n { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; } }
/* search: the box lines up with the page's left edge; the browse chips lead with the trading pages */
.hero .search.srch-form { max-width: 640px; margin: 18px 0 0; }
.srch-quick a { font-size: 11px; }
/* 404: one centred column - the line under the title, the search box and the way back in */
.nf .dek { margin-left: auto; margin-right: auto; text-align: center; }
.nf-search { max-width: 640px; margin: 22px auto 0; }
.nf-quick { justify-content: center; margin: 8px auto var(--s7); max-width: 860px; }
/* privacy: its own container class (".pv" is also the token page's pattern vote), cards packed into two columns */
.pvp { columns: 2 420px; column-gap: 12px; margin: 0 0 var(--s7); }
.pvp > .pv-card { break-inside: avoid; margin: 0 0 12px; }
.pvp > .pv-foot { column-span: all; margin: 4px 0 0; color: var(--ink3); font-size: 11px; }
/* card rows: a cell that spans the table (an empty state, a day header) spans the card and wraps */
@media (max-width: 600px) {
  table.crd > tbody > tr > td[colspan] { grid-column: 1 / -1; white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 640px) {
  .sm-wrap th { white-space: normal; letter-spacing: .06em; line-height: 1.35; overflow-wrap: normal; word-break: normal; }
  .sm-wrap td, .sm-wrap th { padding-left: 7px; padding-right: 7px; }
}
/* card rows: a day or year header row is a plain band across the card list, not a box inside a card */
@media (max-width: 600px) {
  table.crd > tbody > tr.yr { padding: 0; background: var(--bg1); }
  table.crd > tbody > tr.yr > td { background: none; border: 0; padding: 7px 14px; }
  table.crd > tbody > tr.sub > td { background: none; }   /* the faint row tint would tile every labelled pair */
  /* unlocks: the next-14-days strip keeps readable cards and scrolls sideways instead of squeezing two into the width */
  .tl-unl { grid-auto-columns: minmax(232px, 1fr); }
}
/* contents box: a long label wraps instead of ending in "…" (the two-column box on tablets and phones) */
.k-predictions .toc a, .k-month .toc a, .k-unlocks .toc a, .k-listings .toc a, .k-delistings .toc a, .k-setups .toc a,
.k-lab .toc a, .k-accuracy .toc a, .k-tokens_index .toc a, .k-tokens_letter .toc a, .k-methodology .toc a {
  white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.45; }
.k-predictions .toc li, .k-month .toc li, .k-unlocks .toc li, .k-listings .toc li, .k-delistings .toc li, .k-setups .toc li,
.k-lab .toc li, .k-accuracy .toc li, .k-tokens_index .toc li, .k-tokens_letter .toc li, .k-methodology .toc li { break-inside: avoid; }
/* /methodology's stats cards on phones: the 'venue · kind' title wraps whole */
@media (max-width: 600px) { .k-methodology table.crd > tbody > tr > td.c-main { white-space: normal; overflow: visible; text-overflow: clip; } }
/* a card's title runs the card's full width (the table cell cap, td.nwc 170px, is for desktop columns) */
@media (max-width: 600px) {
  :is(.k-month, .k-unlocks, .k-listings, .k-delistings, .k-tokens_index, .k-tokens_letter, .k-methodology)
    table.crd > tbody > tr > td.c-main.nwc { max-width: none; }
}
/* tones inside tables: the generic "table .mono" grey outranks .t-good / .t-bad / .t-flat, so a toned mono number in a
   table (the tokens list's 7-day call and sideways 30-day move, for one) lost its colour; restored on these pages */
:is(.k-predictions, .k-calendar, .k-month, .k-unlocks, .k-listings, .k-delistings, .k-setups, .k-lab, .k-accuracy,
    .k-tokens_index, .k-tokens_letter, .k-search, .k-methodology) table .mono.t-good { color: var(--mint); }
:is(.k-predictions, .k-calendar, .k-month, .k-unlocks, .k-listings, .k-delistings, .k-setups, .k-lab, .k-accuracy,
    .k-tokens_index, .k-tokens_letter, .k-search, .k-methodology) table .mono.t-bad { color: var(--red); }
:is(.k-predictions, .k-calendar, .k-month, .k-unlocks, .k-listings, .k-delistings, .k-setups, .k-lab, .k-accuracy,
    .k-tokens_index, .k-tokens_letter, .k-search, .k-methodology) table .mono.t-flat { color: var(--amber); }
/* ===== /POLISH-B · ROUND 12 ===== */

/* ===== HOME · ROUND 12 ===== */
/* The home page under the "Beat the pattern" game (web/templates/home.html, web/queries.py home_feed(),
   web/static/home_feed.js). Owner: "i like the amount of info there but it feels like old data dump way … bring it up to
   new-day standard of refinement, animations and stuff". One module header (title, one-line subtitle, a link on the
   right), one card system (the hero's raised panels), feed rows with micro-visuals from real counts, tabs with a sliding
   indicator, swipeable rails on phones. Every text here is >= 11.5px so the phone floor needs no twins. Motion only
   with prefers-reduced-motion: no-preference and only after home_feed.js marks a module (.hf-pre -> .hf-on): nothing
   starts hidden in the HTML, a pre-reveal module sits at .35 opacity at worst. */
.hf, section.ptz[data-hf] { position: relative; margin: 48px 0 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
section.ptz[data-hf]::before { content: none; }
.hf-h { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 20px; margin: 0 0 16px; }
.hf-hl { min-width: 0; flex: 1 1 420px; }
.hf-t { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--ink); }
.hf-s { margin: 5px 0 0; max-width: 70ch; font-size: 14px; line-height: 1.45; color: var(--ink3); }
.hf-a { display: inline-flex; align-items: center; flex: none; gap: 2px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.025); font-size: 13px; font-weight: 600; color: var(--ink2); text-decoration: none; white-space: nowrap;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease; }
.hf-a span { display: inline-block; transition: transform .2s ease; }
.hf-a:hover { color: var(--ink); border-color: var(--blue-dim); background: rgba(79,140,255,.08); }
.hf-a:hover span { transform: translateX(3px); }
.hf a:focus-visible, section.ptz[data-hf] a:focus-visible, .hf button:focus-visible, .hf summary:focus-visible, .hf svg:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.hf-empty { margin: 0; padding: 16px; border: 1px dashed var(--line2); border-radius: 12px; font-size: 13.5px; color: var(--ink3); }
.hf-empty a { color: var(--ink2); }

/* the card: the hero's raised panel - a lit top edge, a faint sheen, a long soft shadow */
.hf-card { position: relative; min-width: 0; border-radius: 14px; background: linear-gradient(180deg, #111419 0%, #0B0D11 100%);
  border: 1px solid rgba(255,255,255,.07); border-top-color: rgba(255,255,255,.12); border-bottom-color: rgba(255,255,255,.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 4px rgba(0,0,0,.55), 0 26px 56px -34px #000; }
/* a card whose title link covers it (the other controls sit above the cover) */
.hf-x { color: inherit; text-decoration: none; }
.hf-cat .hf-x::after, .hf-stp .hf-x::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.hf-cat .hf-x:focus-visible, .hf-stp .hf-x:focus-visible { outline: none; }
.hf-cat:has(.hf-x:focus-visible), .hf-stp:has(.hf-x:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.hf-sp, .hf-go, .hf-flip, .hf-coin, .hf-split, .hf-cat-top .cdn { position: relative; z-index: 2; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hf-cat, .hf-stp, a.hf-ply, a.hf-hz { transition: transform .22s cubic-bezier(.2,.75,.25,1), border-color .2s ease, box-shadow .22s ease; }
  .hf-cat:hover, .hf-stp:hover, a.hf-ply:hover, a.hf-hz:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.13);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 2px 4px rgba(0,0,0,.6), 0 30px 60px -30px #000, 0 0 0 1px rgba(79,140,255,.10); }
}
.hf-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 10px 0 0; font-size: 12px; color: var(--ink3); }
.hf-key span { display: inline-flex; align-items: center; gap: 6px; }
.hf-key i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; background: var(--ink4); }
.hf-key-n b { color: var(--ink); }
.hf-key-a { margin-left: auto; color: var(--ink2); text-decoration: none; }
.hf-key .hf-key-sw { display: none; }
.hf-key-a:hover { color: var(--blue); text-decoration: underline; }
.hf-key .k-good { background: var(--mint); } .hf-key .k-bad, .hf-key .k-lp { background: var(--red); }
.hf-key .k-flat { background: var(--amber); } .hf-key .k-none { background: var(--ink3); }
.hf-key .k-du { background: rgba(255,77,94,.72); } .hf-key .k-bl { background: rgba(255,77,94,.45); }
.hf-key .k-good-grad { background: var(--ink); box-shadow: inset 0 0 0 1.5px var(--mint); }
/* a live dot: rings out like the masthead's */
.hf-live { position: relative; display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--blue);
  box-shadow: 0 0 0 0 rgba(79,140,255,.6); animation: dot-ping 2.4s cubic-bezier(.2,.6,.3,1) infinite; }

/* rails: a row of cards that fits on a desktop and swipes (scroll-snap) where it does not */
.hf-rail { position: relative; }
.hf-rail-in { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 3px 14px; margin: -4px -3px -14px; }
.hf-rail-in::-webkit-scrollbar { display: none; }
.hf-rail-in > * { scroll-snap-align: start; }
.hf-rail-in.hf-cols-1 { grid-auto-columns: minmax(250px, 420px); }
.hf-rail-in.hf-cols-2 { grid-auto-columns: calc((100% - 14px) / 2); }
.hf-rail-in.hf-cols-3 { grid-auto-columns: calc((100% - 28px) / 3); }
.hf-rail-in.hf-cols-4, .hf-rail-in.hf-cats { grid-auto-columns: calc((100% - 42px) / 4); }
.hf-rnav { position: absolute; z-index: 3; top: calc(50% - 26px); display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.12); background: rgba(11,13,17,.92); color: var(--ink); font: 700 16px/1 var(--sans);
  cursor: pointer; box-shadow: 0 8px 24px -8px #000; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.hf-rnav.l { left: -14px; } .hf-rnav.r { right: -14px; }
.hf-rail.can-l .hf-rnav.l, .hf-rail.can-r .hf-rnav.r { opacity: 1; pointer-events: auto; }
.hf-rnav:hover { border-color: var(--blue); }
.hf-rail.can-r::after, .hf-rail.can-l::before { content: ""; position: absolute; z-index: 2; top: 0; bottom: 10px; width: 42px; pointer-events: none; }
.hf-rail.can-r::after { right: -3px; background: linear-gradient(90deg, transparent, var(--bg0)); }
.hf-rail.can-l::before { left: -3px; background: linear-gradient(270deg, transparent, var(--bg0)); }

/* micro-visuals: a split of past cases (green higher / red lower), a share bar, a diverging bar, a % of supply bar */
.hf-split { display: block; height: 8px; border-radius: 999px; background: rgba(255,77,94,.62); overflow: hidden; transform-origin: 0 50%; }
.hf-split .good { display: block; width: var(--p); height: 100%; background: var(--mint); box-shadow: 2px 0 0 var(--bg1); }
.hf-bar { position: relative; display: block; height: 7px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.hf-bar i { display: block; width: var(--p); height: 100%; border-radius: inherit; background: var(--ink2); transform-origin: 0 50%; }
.hf-bar.t-bad i { background: linear-gradient(90deg, rgba(255,77,94,.55), var(--red)); }
.hf-dv { position: relative; display: block; height: 8px; border-radius: 999px; background: rgba(255,255,255,.05); }
.hf-dv::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--line2); }
.hf-dv i { position: absolute; top: 0; bottom: 0; left: 50%; width: var(--w); border-radius: 0 999px 999px 0; background: var(--ink2); transform-origin: 0 50%; }
.hf-dv-good i { background: var(--mint); }
.hf-dv-bad i { left: auto; right: 50%; border-radius: 999px 0 0 999px; background: var(--red); transform-origin: 100% 50%; }
.hf-dv-flat i { background: var(--amber); min-width: 2px; }

/* ---------------------------------------------------------------- 1 · coming up */
.hf-urg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin: -4px 0 14px; font-size: 13.5px; color: var(--ink2); }
.hf-urg > span:not(.hf-live) { display: inline-flex; align-items: center; gap: 6px; }
.hf-urg > span:not(.hf-live) + span::before { content: "·"; margin: 0 12px; color: var(--ink4); }
.hf-urg > .hf-live { margin-right: 10px; }
.hf-urg b { color: var(--ink); }
.hf-urg a { color: var(--ink); }
.hf-run-c { padding: 12px 14px 12px; margin: 0 0 16px; overflow: hidden; }
.hf-run-sc { overflow-x: auto; scrollbar-width: none; margin: 0 -4px; padding: 0 4px; }
.hf-run-sc::-webkit-scrollbar { display: none; }
svg.hf-run { display: block; width: 100%; min-width: 860px; height: auto; overflow: visible; }
.hf-run-z { fill: rgba(79,140,255,.07); stroke: rgba(79,140,255,.28); stroke-width: 1; stroke-dasharray: 3 3; }
.hf-run-zt { fill: var(--blue); font: 700 11.5px var(--mono); letter-spacing: .04em; }
.hf-run-ax { fill: none; stroke: var(--line2); stroke-width: 1.5; }
.hf-run-tl { fill: var(--ink3); font: 12px var(--mono); text-anchor: middle; }
.hf-run-tl.t0 { text-anchor: start; fill: var(--ink2); }
.hf-ev { --c: var(--ink3); cursor: pointer; }
.hf-ev-good { --c: var(--mint); } .hf-ev-bad { --c: var(--red); } .hf-ev-flat { --c: var(--amber); }
.hf-ev-st { stroke: var(--c); stroke-opacity: .5; stroke-width: 1.2; stroke-dasharray: 2 2; fill: none; }
.hf-ev-d { fill: var(--c); stroke: #0D1015; stroke-width: 2.5; }
.hf-ev-p { fill: #11151C; stroke: var(--c); stroke-opacity: .7; stroke-width: 1.2; transition: fill .15s ease, stroke-opacity .15s ease; }
.hf-ev-t { fill: var(--c); font: 700 12px var(--mono); text-anchor: middle; letter-spacing: .02em; }
.hf-ev:hover .hf-ev-p, .hf-ev.mk-on .hf-ev-p, .hf-ev:focus .hf-ev-p { fill: #18202B; stroke-opacity: 1; }
.hf-ev.mk-on { filter: none; }
/* the catalyst cards */
.hf-cat { --c: var(--ink3); display: flex; flex-direction: column; padding: 13px 15px 13px; }
.hf-cat::before { content: ""; position: absolute; left: 16px; right: 16px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--c), transparent); opacity: .8; }
.hf-tone-good { --c: var(--mint); } .hf-tone-bad { --c: var(--red); } .hf-tone-flat { --c: var(--amber); }
.hf-cat-top { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; min-height: 22px; }
.hf-cat-dt { margin-left: auto; font-size: 12px; color: var(--ink3); white-space: nowrap; }
.hf-flip { padding: 1px 8px; border-radius: 999px; border: 1px solid var(--amber-dim); background: rgba(255,180,77,.06); font-size: 11.5px; color: var(--amber); cursor: help; }
.hf-cat-h { margin: 0 0 8px; font-size: 18px; line-height: 1.2; }
.hf-cat-h a { display: flex; align-items: center; gap: 9px; min-width: 0; }
.hf-cat-h span:not(.hf-lg) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; color: var(--ink3); letter-spacing: 0; }
.hf-cat-w { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.hf-cat-m { margin: 3px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--ink3); }
.hf-sp { display: grid; gap: 7px; margin: 12px 0 10px; padding: 9px 10px; border-radius: 10px; background: rgba(0,0,0,.28); box-shadow: inset 0 1px 3px rgba(0,0,0,.5); }
.hf-sp-r { display: grid; grid-template-columns: 52px minmax(0, 1fr) 50px 48px; align-items: center; gap: 7px; font-size: 12px; cursor: help; }
.hf-sp-k { color: var(--ink3); white-space: nowrap; }
.hf-sp-v, .hf-sp-t { text-align: right; font-family: var(--mono); font-weight: 600; white-space: nowrap; }
.hf-cat-o { flex: 1 1 auto; margin: 0 0 10px; font-size: 12.5px; line-height: 1.45; color: var(--ink2); }
.hf-go { align-self: flex-start; font-size: 13px; font-weight: 600; color: var(--blue); text-decoration: none; }
.hf-go:hover { text-decoration: underline; }
/* the light logo: monogram underneath, the coin's image on top (removed on error) */
.hf-lg { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--z, 20px); height: var(--z, 20px);
  border-radius: 6px; overflow: hidden; background: var(--b, #10161E); color: var(--i, #8FA6BF); font: 700 calc(var(--z, 20px) * .38) var(--mono);
  letter-spacing: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.hf-lg::before { content: attr(data-t); }      /* decorative initials (aria-hidden): drawn, not a text node */
.hf-lg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* ---------------------------------------------------------------- 2 · setups firing today */
.hf-stp { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.hf-stp-n { margin: 0; font-size: 17px; line-height: 1.25; }
.hf-stp-c { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--ink3); }
.hf-coin { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 4px; border-radius: 999px; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08); font: 700 12px var(--mono); color: var(--ink); text-decoration: none; transition: border-color .15s ease; }
.hf-coin:hover { border-color: var(--blue-dim); color: var(--ink); }
.hf-coin .hf-lg { border-radius: 50%; }
.hf-stp-w { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 0; }
.hf-stp-w b { font: 800 34px/1 var(--sans); letter-spacing: -.035em; }
.hf-stp-w span { font-size: 13px; color: var(--ink2); }
.hf-stp .hf-split { cursor: help; }
.hf-kv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 2px 0 0; }
.hf-kv div { min-width: 0; }
.hf-kv dt { font-size: 11.5px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hf-kv dd { margin: 1px 0 0; font: 700 14px var(--mono); color: var(--ink); white-space: nowrap; }
.hf-oos { margin: auto 0 0; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.06); font-size: 12.5px; color: var(--ink3); }
.hf-oos-good span { color: var(--mint); } .hf-oos-flat span { color: var(--amber); }

/* ---------------------------------------------------------------- 3 · play a pattern */
a.hf-ply { display: flex; flex-direction: column; gap: 8px; padding: 16px; color: var(--ink); text-decoration: none; }
a.hf-ply::before { content: ""; position: absolute; left: 16px; right: 16px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--blue), transparent); opacity: .55; }
.hf-ply-f { font-size: 12px; font-weight: 600; color: var(--blue); letter-spacing: .02em; }
.hf-ply-s { min-height: 2.7em; font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.hf-ply-r { display: flex; align-items: center; gap: 12px; margin: 2px 0; }
.hf-ply-v { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hf-ply-v b { font: 800 32px/1 var(--sans); letter-spacing: -.035em; }
svg.hf-ring { flex: none; width: 54px; height: 54px; transform: rotate(-90deg); overflow: visible; }
.hf-ring circle { fill: none; stroke-width: 6; }
.hf-ring .bg { stroke: rgba(255,255,255,.07); }
.hf-ring .v { stroke: var(--ink2); stroke-linecap: round; }
.hf-ring .v.t-good { stroke: var(--mint); } .hf-ring .v.t-flat { stroke: var(--amber); }
.hf-ply-n { font-size: 12.5px; line-height: 1.35; color: var(--ink2); }
.hf-ply-k { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12.5px; line-height: 1.45; color: var(--ink3); }
.hf-ply-k b { font-family: var(--mono); color: var(--ink2); }
.hf-ply-k b.t-good { color: var(--mint); } .hf-ply-k b.t-flat { color: var(--amber); } .hf-ply-k b.t-bad { color: var(--red); }
a.hf-ply .hf-go { margin-top: auto; padding-top: 4px; }
a.hf-ply:hover .hf-go { text-decoration: underline; }
.hf-foot { margin: 12px 0 0; font-size: 12.5px; color: var(--ink3); }
.hf-foot a { color: var(--ink2); }

/* ---------------------------------------------------------------- 4 · how often we're right */
.hf-pf { display: grid; grid-template-columns: minmax(250px, 340px) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.hf-hzs { display: grid; gap: 10px; }
a.hf-hz { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k v" "s v" "b b" "e e" "x x"; align-items: center; gap: 2px 12px;
  padding: 12px 14px; color: var(--ink); text-decoration: none; }
a.hf-hz.on { border-color: rgba(79,140,255,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(79,140,255,.18), 0 26px 56px -34px #000; }
.hf-hz-k { grid-area: k; font-size: 12.5px; font-weight: 600; color: var(--ink2); }
.hf-hz-v { grid-area: v; font: 800 30px/1 var(--sans); letter-spacing: -.03em; }
.hf-hz-s { grid-area: s; font-size: 12.5px; color: var(--ink3); }
.hf-hz-b { grid-area: b; position: relative; display: block; height: 6px; margin: 8px 0 6px; border-radius: 999px; background: rgba(255,255,255,.07); cursor: help; }
.hf-hz-b .v { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); border-radius: inherit; background: var(--ink2); transform-origin: 0 50%; }
.hf-hz-b .v.t-good { background: var(--mint); } .hf-hz-b .v.t-flat { background: var(--amber); } .hf-hz-b .v.t-bad { background: var(--red); }
.hf-hz-b .m { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; border-radius: 1px; background: var(--ink); opacity: .55; }
.hf-hz-e { grid-area: e; font-size: 12px; font-weight: 600; }
.hf-hz-x { grid-area: x; font-size: 12px; color: var(--ink3); }
.hf-rec { display: flex; flex-direction: column; padding: 14px 16px 12px; }
.hf-rec-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; margin: 0 0 10px; font-size: 13px; color: var(--ink3); }
.hf-rec-h > b { font-size: 15px; color: var(--ink); }
.hf-rec-h span b { font-weight: 700; }
.hf-rec-w { flex: 1 1 auto; display: flex; align-items: center; min-height: 0; }
svg.hf-recs { display: block; width: 100%; height: auto; max-height: 230px; overflow: visible; }
#hf-dot-good circle { fill: var(--mint); } #hf-dot-bad circle { fill: var(--red); fill-opacity: .9; }
.hf-recs .r { fill: url(#hf-dot-good); } .hf-recs .w { fill: url(#hf-dot-bad); }
.hf-rec-0 { stroke: var(--line2); stroke-width: 1; fill: none; }
.hf-recs g { cursor: help; }
.hf-recs g.mk-on { filter: brightness(1.35) drop-shadow(0 0 3px rgba(236,239,244,.35)); }
.hf-lv { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 14px 0 0; font-size: 13px; color: var(--ink3); }
.hf-lv > .hf-live { margin-right: 10px; }
.hf-lv > span:not(.hf-live) + span::before { content: "·"; margin: 0 10px; color: var(--ink4); }
.hf-lv b { color: var(--ink); }
.hf-stats { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0; margin: 18px 0 0; padding: 0; list-style: none;
  border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); }
.hf-stats li { min-width: 0; }
.hf-stats li + li { border-left: 1px solid rgba(255,255,255,.05); }
.hf-stats a { display: flex; flex-direction: column; gap: 3px; height: 100%; padding: 14px 12px; color: var(--ink3); text-decoration: none; transition: background-color .15s ease; }
.hf-stats a:hover { background: rgba(255,255,255,.025); color: var(--ink2); }
.hf-stats b { font: 800 22px/1.1 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.hf-stats span { font-size: 12px; line-height: 1.35; }

/* ---------------------------------------------------------------- 5 · market record: tabs over feed rows */
.hf-since { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.06); font-size: 12.5px; color: var(--ink3); }
.hf-since b { color: var(--ink); }
.hf-tl { position: relative; display: flex; gap: 2px; width: max-content; max-width: 100%; padding: 4px; border-radius: 999px; background: rgba(0,0,0,.42);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.05); overflow-x: auto; scrollbar-width: none; }
.hf-tl::-webkit-scrollbar { display: none; }
.hf-tab { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  color: var(--ink3); text-decoration: none; white-space: nowrap; transition: color .25s ease; -webkit-tap-highlight-color: transparent; }
.hf-tab:hover { color: var(--ink); }
.hf-tab i { padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,.07); font: 600 11.5px var(--mono); font-style: normal; color: var(--ink3); transition: background-color .25s ease, color .25s ease; }
.hf-tab.on { color: var(--bg0); background: var(--ink); }
.hf-tab.on i { background: rgba(5,6,8,.12); color: var(--bg0); }
.hf-tl.hf-tl-js .hf-tab.on { background: transparent; }
.hf-ind { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: var(--ink); opacity: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.7), inset 0 -1px 0 rgba(0,0,0,.18); }
.hf-tl-js .hf-ind { opacity: 1; }
.hf-tl-anim .hf-ind { transition: transform .38s cubic-bezier(.2,.8,.25,1), width .38s cubic-bezier(.2,.8,.25,1); }
.hf-panes { margin-top: 12px; padding: 4px 18px 14px; }
.hf-pane + .hf-pane { margin-top: 18px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.06); }
.hf-tabs-js .hf-pane + .hf-pane { margin-top: 0; padding-top: 0; border-top: 0; }
.hf-pane[hidden] { display: none; }
.hf-pt { margin: 12px 0 2px; font-size: 16px; }
.hf-tabs-js .hf-pt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hf-ps { margin: 10px 0 6px; font-size: 13px; color: var(--ink3); }
.hf-ps b { font-weight: 600; }
.hf-ps a { color: var(--ink2); }
.hf-pane.hf-fade { animation: hf-pane .34s cubic-bezier(.2,.75,.25,1) both; }
@keyframes hf-pane { from { opacity: .2; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.hf-rows { display: flex; flex-direction: column; }
.hf-r { position: relative; display: grid; align-items: center; gap: 4px 16px; padding: 9px 6px; border-bottom: 1px solid rgba(255,255,255,.05); }
.hf-rows > .hf-r:last-child, .hf-chg > .hf-r:last-child { border-bottom: 0; }
.hf-r::before { content: ""; position: absolute; left: -10px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--blue); opacity: 0; transition: opacity .15s ease; }
.hf-r:hover { background: linear-gradient(90deg, rgba(79,140,255,.045), rgba(255,255,255,.012) 60%, transparent); }
.hf-r:hover::before { opacity: .8; }
.hf-er { grid-template-columns: 54px 132px minmax(0, 1fr) auto 22px; }
.hf-lr { grid-template-columns: 54px 132px minmax(0, 1fr) auto; }
.hf-ur { grid-template-columns: 92px minmax(0, 1fr) 150px 130px 200px; }
.hf-mr { grid-template-columns: 54px minmax(0, 1fr) 200px 70px; }
.hf-d { font: 600 12.5px var(--mono); color: var(--ink2); white-space: nowrap; }
.hf-d small { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 400; color: var(--ink3); }
.hf-d .cdn { display: table; margin-top: 3px; }
.hf-kd { display: inline-flex; align-items: center; gap: 6px; justify-self: start; max-width: 100%; padding: 3px 10px 3px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03); font-size: 12px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hf-kd .ic { color: var(--ink3); flex: none; }
.hf-m { min-width: 0; }
.hf-m > a { font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; }
.hf-m > a:hover { color: var(--blue); text-decoration: underline; text-decoration-color: rgba(79,140,255,.4); }
.hf-m small { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--ink3); }
.hf-m small a { color: var(--ink2); }
.hf-new { display: inline-block; margin-left: 8px; padding: 0 7px; border-radius: 999px; background: rgba(79,140,255,.12); color: var(--blue); font: 700 11.5px/18px var(--sans); vertical-align: 1px; }
.hf-perp { background: rgba(255,255,255,.07); color: var(--ink2); }
.hf-fx { display: grid; grid-auto-flow: column; grid-auto-columns: 80px; gap: 10px; justify-content: end; }
.hf-fx > span { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
.hf-fx1 { grid-auto-columns: 130px; }
.hf-fx em { font-size: 11.5px; font-style: normal; color: var(--ink3); white-space: nowrap; }
.hf-fx small { font-size: 11.5px; color: var(--ink3); }
.hf .cq-n { font-size: 14px; font-weight: 600; }
.hf .cq-svg { display: none; }
.hf .cq-pending .cq-n, .hf .cq-null .cq-n { font-size: 12.5px; font-weight: 400; }
.hf-i { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none;
  font: 14px/1 var(--sans); color: var(--ink3); cursor: help; -webkit-tap-highlight-color: transparent; }
.hf-i:hover { color: var(--ink); background: rgba(255,255,255,.06); }
.hf-pc { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "b v" "b e"; align-items: center; gap: 0 10px; cursor: help; }
.hf-pc i { grid-area: b; display: block; height: 7px; border-radius: 999px; transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(255,180,77,.45), var(--amber)) 0 0 / max(3px, var(--p)) 100% no-repeat, rgba(255,255,255,.07); }
.hf-pc b { grid-area: v; font: 700 14px var(--mono); color: var(--ink); text-align: right; }
.hf-pc em { grid-area: e; font-size: 11.5px; font-style: normal; color: var(--ink3); text-align: right; }
.hf-odds { justify-self: end; padding: 3px 10px; border-radius: 999px; border: 1px solid currentColor; font-size: 12px; white-space: nowrap; cursor: help; opacity: .9; }
.hf-odds.t-flat { color: var(--amber); }
.hf-ur.hf-nx { background: linear-gradient(90deg, rgba(79,140,255,.07), transparent 70%); border-radius: 8px; }
.hf-mr .hf-dv { cursor: help; }
.hf-mv { text-align: right; font: 700 15px var(--mono); }
.hf-pat { margin-top: 12px; line-height: 1.5; }
.hf-chg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; margin: 0; padding: 0; list-style: none; }
.hf-chg .hf-r { grid-template-columns: 54px minmax(0, auto) minmax(0, 1fr) auto; gap: 2px 12px; padding: 9px 6px; }
.hf-chg .hf-r:nth-last-child(2) { border-bottom: 0; }
.hf-chg a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: none; }
.hf-chg a:hover { color: var(--blue); }
.hf-cw { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--ink3); }
.hf-rk { font: 700 12px var(--mono); cursor: help; }
.hf-pf-l { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 12px 0 0; font-size: 13px; }
.hf-pf-l a { color: var(--ink2); text-decoration: none; }
.hf-pf-l a:hover { color: var(--blue); text-decoration: underline; }
/* folds (home_feed.js): rows past the first N wait behind "Show all" */
.hf [data-hf-fold] > .hf-cut { display: none; }
.hf-more { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03); font: 600 13px var(--sans); color: var(--ink2); cursor: pointer; transition: color .15s ease, border-color .15s ease; }
.hf-more:hover { color: var(--ink); border-color: var(--blue-dim); }
.hf-more i { font-style: normal; transition: transform .25s ease; }
.hf-more[aria-expanded="true"] i { transform: rotate(180deg); }
.hf-r.hf-pop { animation: hf-row .4s cubic-bezier(.2,.75,.25,1) both; }
@keyframes hf-row { from { opacity: .25; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- 6 · memecoin graveyard */
.hf-gv { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.hf-gv-a, .hf-gv-b { padding: 18px 18px 16px; }
.hf-gv-a { overflow: hidden; }
.hf-gv-a::after { content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,77,94,.10), transparent); }
.hf-gv-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0; }
.hf-gv-big > b { font: 800 64px/.95 var(--sans); letter-spacing: -.045em; color: var(--red); text-shadow: 0 0 40px rgba(255,77,94,.28); }
.hf-gv-big span { font-size: 16px; color: var(--ink2); }
.hf-gv-big span b { color: var(--ink); }
.hf-gv-k { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; }
.hf-gv-k div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; min-width: 0; padding: 0 0 0 10px; border-left: 2px solid rgba(255,77,94,.35); }
.hf-gv-k dd { margin: 0; font: 800 20px/1.1 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.hf-gv-k dd small { font: 600 12.5px var(--sans); letter-spacing: 0; color: var(--ink3); }
.hf-gv-k dt { font-size: 12px; line-height: 1.3; color: var(--ink3); }
.hf-cz { margin: 18px 0 0; }
.hf-cz-k { margin: 0 0 7px; font-size: 12.5px; font-weight: 600; color: var(--ink2); }
.hf-cz-b { display: flex; gap: 3px; height: 14px; transform-origin: 0 50%; }
.hf-cz-s { flex: 0 0 auto; width: calc(var(--p) - 2px); border-radius: 4px; background: var(--red); cursor: help; transition: filter .15s ease; }
.hf-cz-s.du { background: rgba(255,77,94,.72); } .hf-cz-s.bl { background: rgba(255,77,94,.45); }
.hf-cz-s:hover { filter: brightness(1.25); }
.hf-cz-l { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0; font-size: 12.5px; color: var(--ink3); }
.hf-cz-l span { display: inline-flex; align-items: center; gap: 6px; }
.hf-cz-l b { color: var(--ink); font-family: var(--mono); }
.hf-cz-l i { width: 9px; height: 9px; border-radius: 3px; background: var(--red); }
.hf-cz-l i.du { background: rgba(255,77,94,.72); } .hf-cz-l i.bl { background: rgba(255,77,94,.45); }
.hf-sq { margin: 20px 0 0; }
svg.hf-sqs { display: block; width: 100%; height: auto; overflow: visible; }
.hf-sqs rect { rx: 2px; fill: var(--ink4); cursor: help; }
.hf-sqs .good { fill: var(--mint); } .hf-sqs .d { fill: var(--red); } .hf-sqs .d.du { fill-opacity: .72; } .hf-sqs .d.bl { fill-opacity: .45; }
.hf-sqs .g { fill: var(--ink); } .hf-sqs .good-edge { stroke: var(--mint); stroke-width: 1.5; } .hf-sqs .u { fill: url(#hatch); stroke: var(--unknown); stroke-width: .5; }
.hf-ct { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin: 0 0 8px; font-size: 16px; }
.hf-ct-s { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 400; color: var(--ink3); letter-spacing: 0; }
.hf-ct-s b { color: var(--ink2); font-weight: 600; }
.hf-ct2 { margin-top: 20px; }
.hf-dts { display: flex; flex-direction: column; }
.hf .frow { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto auto; align-items: center; gap: 2px 14px; padding: 10px 4px; border-bottom: 1px solid rgba(255,255,255,.05);
  color: var(--ink); text-decoration: none; }
.hf .frow:last-child { border-bottom: 0; }
.hf .frow:hover { background: rgba(255,77,94,.04); }
.hf .frow:hover .fr-n { color: var(--ink); }
.hf .fd-tk { width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 13px var(--mono); color: var(--ink); }
.hf .fr-n { font-size: 13.5px; color: var(--ink2); }
.hf .fr-s { display: block; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; letter-spacing: 0; color: var(--ink3); }
.hf .fr-v { display: flex; flex-direction: column; align-items: flex-end; font: 700 13.5px var(--mono); }
.hf .fr-v em { font: 400 11.5px var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink3); }
.hf-gv2 { margin-top: 14px; }
.hf-gv2 .hf-rail-in, .hf-rank .hf-rail-in { align-items: start; }
.hf-list { padding: 16px 18px 14px; }
.hf-ol { margin: 0; padding: 0; list-style: none; }
.hf-li { display: grid; grid-template-columns: 18px 22px minmax(0, 1fr) minmax(60px, 120px) 64px; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px solid rgba(255,255,255,.045); }
.hf-li:last-child { border-bottom: 0; }
.hf-n { font: 600 12px var(--mono); color: var(--ink3); text-align: right; }
.hf-li:first-child .hf-n { color: var(--ink); }
.hf-li-m { min-width: 0; }
.hf-li-m a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: none; }
.hf-li-m a:hover { color: var(--blue); }
.hf-li-m small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ink3); }
.hf-li .hf-bar, .hf-li .hf-dv { cursor: help; }
.hf-li-v { text-align: right; font: 700 13.5px var(--mono); color: var(--ink); }

/* ---------------------------------------------------------------- 8 · explore: a compact directory behind three tabs */
.hf-dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; margin: 4px 0 0; padding: 0; list-style: none; }
.hf-dl .hf-r { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 4px; }
.hf-dl .hf-r::before { top: 7px; bottom: 7px; }
.hf-dl a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: none; }
.hf-dl a:hover { color: var(--blue); }
.hf-dl small { flex: none; font-size: 12px; color: var(--ink3); white-space: nowrap; }
.hf-dir { columns: 3 260px; column-gap: 28px; margin: 6px 0 0; }
.hf-dg { break-inside: avoid; margin: 0 0 12px; }
.hf-dg summary { display: flex; align-items: center; gap: 8px; padding: 8px 0 5px; list-style: none; cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.hf-dg summary::-webkit-details-marker { display: none; }
.hf-dg summary::after { content: "+"; margin-left: auto; font: 400 17px/1 var(--sans); color: var(--ink3); transition: transform .2s ease; }
.hf-dg[open] summary::after { transform: rotate(45deg); }
@media (min-width: 641px) { .hf-dg summary { pointer-events: none; } .hf-dg summary::after { content: none; } }
.hf-il { display: flex; flex-wrap: wrap; gap: 3px 16px; margin: 0; font-size: 13px; line-height: 1.6; }
.hf-il a { color: var(--ink2); text-decoration: none; white-space: nowrap; }
.hf-il a:hover { color: var(--blue); text-decoration: underline; }
.hf-il small { font-size: 11.5px; color: var(--ink3); }
.hf-az { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 0; }
.hf-az a { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 9px; border-radius: 8px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.025);
  font: 700 12.5px var(--mono); color: var(--ink2); text-decoration: none; }
.hf-az a:hover { border-color: var(--blue-dim); color: var(--ink); }
.hf-az small { font-size: 11.5px; font-weight: 400; color: var(--ink3); }
.hf-az .hf-az-all { font-family: var(--sans); font-weight: 600; }

/* ---------------------------------------------------------------- motion: modules land as they scroll into view */
@media (prefers-reduced-motion: no-preference) {
  .hf-pre .hf-h, .hf-pre .hf-urg, .hf-pre .hf-card, .hf-pre .hf-stats li, .hf-pre .hf-lv, .hf-pre .hf-foot { opacity: .35; transform: translateY(16px); }
  .hf-on .hf-h, .hf-on .hf-urg, .hf-on .hf-card, .hf-on .hf-stats li, .hf-on .hf-lv, .hf-on .hf-foot {
    transition: opacity .6s ease, transform .7s cubic-bezier(.2,.75,.25,1), border-color .2s ease, box-shadow .22s ease; transition-delay: var(--hd, 0ms); }
  .hf-on .hf-card:hover { transition-delay: 0ms; }
  .hf-pre .hf-split, .hf-pre .hf-bar i, .hf-pre .hf-dv i, .hf-pre .hf-cz-b, .hf-pre .hf-hz-b .v, .hf-pre .hf-pc i { transform: scaleX(0); }
  .hf-on .hf-split, .hf-on .hf-bar i, .hf-on .hf-dv i, .hf-on .hf-cz-b, .hf-on .hf-hz-b .v, .hf-on .hf-pc i {
    transition: transform 1s cubic-bezier(.2,.75,.25,1); transition-delay: calc(var(--hd, 0ms) + 250ms); }
  .hf-pre .hf-ring .v { stroke-dasharray: 0 100; }
  .hf-on .hf-ring .v { transition: stroke-dasharray 1.2s cubic-bezier(.2,.75,.25,1); transition-delay: calc(var(--hd, 0ms) + 200ms); }
  .hf-pre .hf-ev { opacity: .2; transform: translateY(-10px); }
  .hf-on .hf-ev { transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.3,1.3); transition-delay: calc(var(--i, 0) * 70ms + 200ms); }
  .hf-pre svg.hf-recs, .hf-pre .hf-sq { clip-path: inset(0 100% 0 0); }
  .hf-on svg.hf-recs, .hf-on .hf-sq { clip-path: inset(0 0 0 0); transition: clip-path 1.5s cubic-bezier(.45,.05,.25,1); transition-delay: 300ms; }
  .hf-run-z { animation: hf-zone 3.2s ease-in-out infinite; }
  @keyframes hf-zone { 0%, 100% { fill-opacity: 1; } 50% { fill-opacity: .45; } }
}
@media (prefers-reduced-motion: reduce) {
  .hf-live, .hf-run-z, .hf-pane.hf-fade, .hf-r.hf-pop { animation: none; }
  .hf-tl-anim .hf-ind, .hf-a, .hf-a span, .hf-more i, .hf-tab { transition: none; }
}

/* ---------------------------------------------------------------- phones */
@media (max-width: 900px) {
  .hf-rail-in.hf-cols-3, .hf-rail-in.hf-cols-4, .hf-rail-in.hf-cats { grid-auto-columns: calc((100% - 14px) / 2); }
  .hf-pf { grid-template-columns: minmax(0, 1fr); }
  .hf-hzs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hf-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hf-stats li:nth-child(5) { border-left: 0; }
  .hf-stats li:nth-child(n+5) { border-top: 1px solid rgba(255,255,255,.05); }
  .hf-gv { grid-template-columns: minmax(0, 1fr); }
  .hf-ur { grid-template-columns: 92px minmax(0, 1fr) 130px 120px; }
  .hf-ur .hf-odds { grid-column: 2 / -1; justify-self: start; }
}
@media (max-width: 640px) {
  .hf, section.ptz[data-hf] { margin-top: 44px; }
  .hf-h { margin-bottom: 12px; align-items: flex-start; }
  .hf-hl { flex-basis: 100%; }
  .hf-t { font-size: 21px; }
  .hf-s { font-size: 13.5px; }
  .hf-a { padding: 6px 12px; font-size: 12.5px; }
  /* rails bleed to the screen edges and swipe */
  .hf-rail-in, .hf-rail-in.hf-cols-2, .hf-rail-in.hf-cols-3, .hf-rail-in.hf-cols-4, .hf-rail-in.hf-cats { grid-auto-columns: 84%; gap: 12px;
    margin: -4px calc(-1 * var(--gutter)) -14px; padding: 4px var(--gutter) 14px; scroll-padding: 0 var(--gutter); }
  .hf-rail-in.hf-cols-1 { grid-auto-columns: 100%; }
  .hf-rnav { display: none; }
  .hf-rail.can-r::after, .hf-rail.can-l::before { display: none; }
  .hf-urg { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 3px 10px; font-size: 13px; }
  .hf-urg > .hf-live { margin: 6px 0 0; grid-row: 1; }
  .hf-urg > span:not(.hf-live) { grid-column: 2; }
  .hf-urg > span:not(.hf-live) + span::before { content: none; }
  .hf-run-sc { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .hf-key-a { margin-left: 0; }
  .hf-key .hf-key-sw { display: inline-flex; color: var(--ink2); }
  .hf-run-c { padding: 10px 10px 10px; margin-left: -4px; margin-right: -4px; }
  .hf-cat, .hf-stp, a.hf-ply { padding: 14px; }
  .hf-hzs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  a.hf-hz { grid-template-columns: minmax(0, 1fr); grid-template-areas: "k" "v" "s" "b" "e" "x"; padding: 10px 10px 11px; }
  .hf-hz-v { font-size: 24px; margin: 4px 0 2px; }
  .hf-hz-s, .hf-hz-e, .hf-hz-x { font-size: 11.5px; }
  .hf-rec { padding: 12px 12px 10px; }
  .hf-stats { display: flex; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter));
    padding: 0 var(--gutter); }
  .hf-stats::-webkit-scrollbar { display: none; }
  .hf-stats li { flex: 0 0 40%; scroll-snap-align: start; border-top: 0 !important; }
  .hf-stats li:nth-child(5) { border-left: 1px solid rgba(255,255,255,.05); }
  .hf-stats a { padding: 12px 12px; }
  .hf-since { border-radius: 12px; }
  .hf-tl { width: auto; margin: 0 calc(-1 * var(--gutter)); border-radius: 0; padding: 4px var(--gutter); background: none; box-shadow: none; }
  .hf-tl .hf-ind { top: 4px; bottom: 4px; }
  .hf-tab { padding: 8px 13px; background: rgba(255,255,255,.04); }
  .hf-tl.hf-tl-js .hf-tab { background: rgba(255,255,255,.04); }
  .hf-tl.hf-tl-js .hf-tab.on { background: transparent; }
  .hf-panes { margin: 10px -4px 0; padding: 2px 12px 12px; }
  .hf-r { gap: 6px 12px; padding: 12px 2px; }
  .hf-r::before { left: -8px; }
  .hf-er { grid-template-columns: minmax(0, auto) minmax(0, 1fr) 22px; grid-template-areas: "d k i" "m m m" "x x x"; }
  .hf-er .hf-d { grid-area: d; } .hf-er .hf-kd { grid-area: k; } .hf-er .hf-i { grid-area: i; } .hf-er .hf-m { grid-area: m; } .hf-er .hf-fx { grid-area: x; }
  .hf-lr { grid-template-columns: minmax(0, auto) minmax(0, 1fr); grid-template-areas: "d k" "m m" "x x"; }
  .hf-lr .hf-d { grid-area: d; } .hf-lr .hf-kd { grid-area: k; } .hf-lr .hf-m { grid-area: m; } .hf-lr .hf-fx { grid-area: x; }
  .hf-d small { display: inline; margin-left: 6px; }
  .hf-d .cdn { display: inline-flex; margin: 0 0 0 8px; }
  .hf-fx { grid-auto-columns: minmax(0, 1fr); justify-content: stretch; gap: 8px; }
  .hf-fx > span { align-items: flex-start; }
  .hf-fx2 { grid-auto-columns: minmax(0, 96px); justify-content: start; gap: 20px; }
  .hf-ur { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "d d" "m p" "x o"; gap: 4px 12px; }
  .hf-ur .hf-d { grid-area: d; } .hf-ur .hf-m { grid-area: m; } .hf-ur .hf-pc { grid-area: p; align-self: start; } .hf-ur .hf-fx { grid-area: x; } .hf-ur .hf-odds { grid-area: o; grid-column: auto; justify-self: end; align-self: center; }
  .hf-ur .hf-pc { grid-template-columns: auto; grid-template-areas: "v" "e"; }
  .hf-ur .hf-pc i { display: none; }
  .hf-ur .hf-fx { grid-auto-columns: auto; justify-content: start; }
  .hf-ur .hf-fx > span { flex-direction: row; align-items: baseline; gap: 8px; }
  .hf-mr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "d v" "m m" "b b"; }
  .hf-mr .hf-d { grid-area: d; } .hf-mr .hf-m { grid-area: m; } .hf-mr .hf-dv { grid-area: b; } .hf-mr .hf-mv { grid-area: v; }
  .hf-chg { grid-template-columns: minmax(0, 1fr); }
  .hf-chg .hf-r { grid-template-columns: 50px minmax(0, 1fr) auto; grid-template-areas: "d a k" "d w k"; gap: 0 10px; }
  .hf-chg .hf-d { grid-area: d; } .hf-chg a { grid-area: a; } .hf-chg .hf-cw { grid-area: w; } .hf-chg .hf-rk { grid-area: k; }
  .hf-chg .hf-r:nth-last-child(2) { border-bottom: 1px solid rgba(255,255,255,.05); }
  .hf-gv-a, .hf-gv-b { padding: 16px 14px 14px; }
  .hf-gv-big > b { font-size: 54px; }
  .hf-gv-k { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
  .hf-lv { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 2px 10px; }
  .hf-lv > .hf-live { margin: 6px 0 0; grid-row: 1; }
  .hf-lv > span:not(.hf-live) { grid-column: 2; }
  .hf-lv > span:not(.hf-live) + span::before { content: none; }
  .hf .frow { grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px 12px; }
  .hf .frow .fd-tk { grid-column: 1; grid-row: 1; } .hf .frow .fr-n { grid-column: 1 / -1; grid-row: 2; }
  .hf-list { padding: 14px 14px 12px; }
  .hf-li { grid-template-columns: 16px 22px minmax(0, 1fr) 44px 56px; gap: 8px; }
  .hf-li-m small { white-space: normal; }
  .hf-dl { grid-template-columns: minmax(0, 1fr); }
  .hf-dir { columns: 1; }
  .hf-dg { margin: 0; border-bottom: 1px solid rgba(255,255,255,.05); }
  .hf-dg summary { padding: 11px 0; }
  .hf-dg[open] { padding-bottom: 10px; }
}
/* ===== /HOME · ROUND 12 ===== */

/* ===== POLISH-C · ROUND 12 (cont.) ===== */
/* index and hub pages: a plain section head (no register numbering) and the pointer right under the hero */
.hero-ix { margin-bottom: 4px; }
.hero-ix .letters { margin: 14px 0 0; }
.hero-ix + .tptr { margin: 8px 0 26px; }
.ixs { margin: 30px 0 0; }
.ixs-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0 0 10px; }
.ixs-h h2 { margin: 0; font-size: 22px; }
.ixs-h p { margin: 0; font-size: 11.5px; line-height: 1.5; }
.hub-num { margin: 0 0 16px; }

/* people A–Z: one card per person; their top project's 30-day call is its own way in */
.pcg { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; margin: 6px 0 14px; }
.pc { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "a c" "f f"; gap: 8px 14px; align-items: center;
  padding: 14px 14px 12px 16px; border: 1px solid var(--line2); border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0) 60%), var(--bg2);
  transition: border-color .15s ease, box-shadow .15s ease; }
.pc:hover { border-color: rgba(79,140,255,.42); box-shadow: 0 12px 28px -20px rgba(79,140,255,.7); }
.pc-a { grid-area: a; display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--ink); text-decoration: none; }
.pc-a .av { flex: none; }
.pc-n { display: grid; min-width: 0; }
.pc-n b { font-size: 15.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-n small { font-size: 12.5px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-a:hover b, .pc-a:focus-visible b { color: var(--blue); }
.pc-f { grid-area: f; display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 0; padding: 8px 0 0 52px; border-top: 1px dashed var(--line); font-size: 11.5px; color: var(--ink3); }
.pc-c { grid-area: c; display: grid; justify-items: end; gap: 2px; min-width: 112px; padding: 8px 11px; border: 1px solid var(--line2); border-radius: 10px;
  background: var(--bg1); color: var(--ink); text-decoration: none; transition: border-color .15s ease, background-color .15s ease; }
.pc-c b { font: 800 19px/1.05 var(--sans); letter-spacing: -.01em; white-space: nowrap; }
.pc-c span { font-family: var(--mono); font-size: 11px; color: var(--ink3); white-space: nowrap; }
.pc-c:hover, .pc-c:focus-visible { border-color: var(--blue); background: rgba(79,140,255,.08); outline: none; }
.pc-c.pc-none b { font-size: 13px; color: var(--ink3); }
@media (max-width: 600px) {
  .pcg { grid-template-columns: 1fr; }
  .pc { padding: 12px; gap: 6px 10px; }
  .pc-f { padding-left: 0; }
  .pc-c { min-width: 96px; padding: 7px 9px; }
  .pc-c b { font-size: 17px; }
}

/* wallet pages: the creators a funder paid for as compact rows; the records naming an address as cards */
.cwl { display: grid; gap: 6px; }
.cwr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line2);
  border-radius: 10px; background: var(--bg2); color: var(--ink); text-decoration: none; transition: border-color .15s ease; }
.cwr:hover, .cwr:focus-visible { border-color: rgba(79,140,255,.45); outline: none; }
.cwr-a { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cwr-n { font-size: 11.5px; color: var(--ink3); }
.cwr-v { font-size: 12.5px; font-weight: 700; }
.refl { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.refc { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--line2); border-radius: 10px; background: var(--bg2); color: var(--ink); text-decoration: none; }
.refc-k { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.refc-n { font-size: 15px; font-weight: 700; }
.refc:hover, .refc:focus-visible { border-color: var(--blue); outline: none; }
@media (max-width: 600px) { .cwr { grid-template-columns: auto minmax(0, 1fr) auto; } .cwr-n { display: none; } }

/* launches by day: one chip per day with its dead share */
.dayl { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin: 10px 0 12px; padding: 0; }
.dayl a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line2);
  border-radius: 10px; background: var(--bg2); color: var(--ink); text-decoration: none; transition: border-color .15s ease; }
.dayl a b { font-size: 14px; font-weight: 700; }
.dayl a .mono { font-size: 11.5px; color: var(--ink2); }
.dayl a .t-bad { color: var(--red); }
.dayl a svg { grid-column: 1 / -1; width: 100%; height: 6px; }
.dayl a:hover, .dayl a:focus-visible, .dayl a.here { border-color: var(--blue); outline: none; }

/* exchanges table: kind and country as a quiet second line under the name */
.xtab .xt-s { display: block; margin-top: 2px; font-size: 11px; color: var(--ink3); max-width: 30ch; white-space: normal; letter-spacing: .02em; }

/* launch page: the graduation label runs the bar's full width; the feature rows line up on one grid */
.gradbar { max-width: 520px; }
.gradbar .gb-l { max-width: none; }
@media (min-width: 601px) { .lcal-r { grid-template-columns: minmax(0, 1fr) minmax(80px, 200px) 44px 96px; } .lcal-n { text-align: right; } }

/* monograms inside table cells sit on the text line */
td > svg.av { vertical-align: middle; margin-right: 6px; }
.prow .av { vertical-align: middle; }
/* ===== /POLISH-C · ROUND 12 (cont.) ===== */

/* ===== POLISH-C · ROUND 12 (cont.) ===== */
/* counts per year / week (rounds, launches): ocean-tinted bars that grow in when they land; short launch strips read as squares */
body:is(.k-investor, .k-investors, .k-creator) svg.ybars rect { fill: rgba(91,184,242,.62); transition: fill .15s ease; }
body:is(.k-investor, .k-investors, .k-creator) svg.ybars rect:hover { fill: var(--ocean); }
@media (prefers-reduced-motion: no-preference) {
  .pp-pop svg.ybars rect { transform-box: fill-box; transform-origin: 50% 100%; animation: mo-grow .55s cubic-bezier(.2,.75,.25,1) backwards; }
  .pp-pop svg.ybars rect:nth-of-type(2) { animation-delay: .06s; } .pp-pop svg.ybars rect:nth-of-type(3) { animation-delay: .12s; }
  .pp-pop svg.ybars rect:nth-of-type(4) { animation-delay: .18s; } .pp-pop svg.ybars rect:nth-of-type(n+5) { animation-delay: .24s; }
}
.rb1-viz svg.lstrip { min-width: min(100%, 420px); }
/* ===== /POLISH-C · ROUND 12 (cont.) ===== */

/* ============================================================================================
   PAGE GUIDES (owner, Oct 3) - "i saw u give it a lil tutorial i love it but do that for more stuff". web/static/guide.js
   walks a page's own elements one step at a time in the home hero hint's look: a soft blue ring on the element, the
   hero's pinging dot on its edge and a numbered bubble beside it (blue line, "next →"); the "how to read this page" pill
   at the end of the crumb strip starts it again. The layer sits under every bar (z 29: the band nav is 30, the header
   and the tab bar 40), so it slides beneath them like the page. Reduced motion: no ping, no entrance.
   ============================================================================================ */
.pg { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 29; pointer-events: none; }
.pg-ring { position: absolute; box-sizing: border-box; border: 1.5px solid rgba(79,140,255,.7); border-radius: 14px;
  box-shadow: 0 0 0 4px rgba(79,140,255,.1), 0 0 30px -4px rgba(79,140,255,.35); }
.pg-dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; box-sizing: border-box; border: 2px solid #fff; border-radius: 50%;
  background: var(--blue); box-shadow: 0 0 0 3px rgba(6,7,10,.85); animation: hb-ping 1.6s ease-out infinite; }
.pg-bub { position: absolute; box-sizing: border-box; width: 360px; max-width: calc(100vw - 32px); padding: 12px 14px;
  border: 1px solid var(--blue); border-radius: 12px; background: #0E1420; color: var(--ink); font-size: 13.5px; line-height: 1.5;
  box-shadow: 0 18px 44px -14px #000, 0 0 0 1px rgba(79,140,255,.25); pointer-events: auto; outline: none; }
.pg-bub::before { content: ""; position: absolute; top: -6px; left: var(--ax, 24px); width: 10px; height: 10px; margin-left: -5px; border: solid var(--blue);
  border-width: 1px 0 0 1px; background: #0E1420; transform: rotate(45deg); }
.pg.pg-up .pg-bub::before { top: auto; bottom: -6px; border-width: 0 1px 1px 0; }
.pg.pg-over .pg-bub::before, .pg.pg-over .pg-dot, .pg.pg-gone .pg-ring, .pg.pg-gone .pg-dot { display: none; }
.pg-h { display: flex; align-items: center; gap: 10px; margin: 0 28px 6px 0; }
.pg-n { flex: none; min-width: 40px; height: 22px; padding: 0 8px; border-radius: 11px; background: var(--blue); color: #fff;
  font: 800 12px/22px var(--mono); text-align: center; white-space: nowrap; }
.pg-t { min-width: 0; font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.pg-b { margin: 0; color: var(--ink2); }
.pg-b span { font-weight: 700; }
.pg-x { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.pg-back, .pg-go { min-height: 32px; border-radius: 8px; font: 700 12.5px var(--sans); cursor: pointer; }
.pg-back { padding: 0 11px; border: 1px solid var(--line2); background: none; color: var(--ink2); }
.pg-back[hidden] { display: none; }
.pg-go { margin-left: auto; padding: 0 14px; border: 1px solid var(--blue); background: rgba(79,140,255,.16); color: var(--ink); }
.pg-back:hover, .pg-back:focus-visible { border-color: var(--blue-dim); color: var(--ink); outline: none; }
.pg-go:hover, .pg-go:focus-visible { background: rgba(79,140,255,.3); outline: none; }
.pg-close { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: none;
  color: var(--ink3); font-size: 18px; line-height: 1; cursor: pointer; }
.pg-close:hover, .pg-close:focus-visible { background: rgba(255,255,255,.05); color: var(--ink); outline: none; }
.pg.pg-wait .pg-ring, .pg.pg-wait .pg-dot, .pg.pg-wait .pg-bub { opacity: 0; }
.pg.pg-in .pg-bub { animation: hb-hin .22s ease-out both; }
.pg.pg-in .pg-ring { animation: pg-ring .35s ease-out both; }
@keyframes pg-ring { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: none; } }
/* the pill: the last thing in the crumb strip, on every guided page */
.subbar.pg-has { gap: 10px; }
.subbar.pg-has > .crumbs { margin-right: auto; }
.pg-btn { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px 0 4px; border: 1px solid rgba(79,140,255,.3);
  border-radius: 999px; background: rgba(79,140,255,.06); color: var(--ink2); font: 600 12px/1 var(--sans); white-space: nowrap; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.pg-btn i { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--blue); color: #fff; font: 800 11.5px/1 var(--mono); }
.pg-btn:hover, .pg-btn:focus-visible { border-color: var(--blue); background: rgba(79,140,255,.14); color: var(--ink); }
@media (max-width: 600px) { .pg-btn { width: 26px; padding: 0; justify-content: center; } .pg-btn span { display: none; } }   /* the crumbs keep the row */
@media (prefers-reduced-motion: reduce) { .pg-dot, .pg.pg-in .pg-bub, .pg.pg-in .pg-ring { animation: none; } .pg-btn { transition: none; } }
@media print { .pg, .pg-btn { display: none; } }