/* =====================================================================================================================
   BNB Smart Intelligence · BINANCE-STYLE TYPE + PALETTE (shell owner). Every page codes against the variables below.
   TYPE TABLE — all faces SIL OFL 1.1, self-hosted woff2 subsets in /fonts (licence: /fonts/LICENSE-OFL.txt), built by
   pad/tools/subset-fonts.py from every string in js/*.js, js/i18n/*.js, *.html, css/*.css and the API copy. Binance's own
   BinancePlex is derived from IBM Plex; its files are never shipped here.
   ┌──────────────────────────┬───────────────┬──────────────────────────────┬────────────────────────┬──────────────────────────────┐
   │ role                     │ variable      │ Latin                        │ 中文                   │ weight · size                │
   ├──────────────────────────┼───────────────┼──────────────────────────────┼────────────────────────┼──────────────────────────────┤
   │ hero headline            │ --font-sans   │ IBM Plex Sans                │ Noto Sans SC           │ 700 · 64–112px, ls -.02em    │
   │ section / card headings  │ --font-sans   │ IBM Plex Sans                │ Noto Sans SC           │ 700 · 20–44px (600 ≤ 18px)   │
   │ body, AI text, bubbles   │ --font-sans   │ IBM Plex Sans                │ Noto Sans SC           │ 400–500 · 14–16px, lh 1.6–1.7│
   │ UI: nav, buttons, labels │ --font-sans   │ IBM Plex Sans                │ Noto Sans SC           │ 500–600 · 12–16px            │
   │ numbers: price, %, $     │ --font-num    │ IBM Plex Sans (tabular figs) │ → Noto Sans SC         │ 500–700 · any size           │
   │ contract address / hash  │ --font-mono   │ IBM Plex Mono Medium         │ → Noto Sans SC         │ 500 · 12–14px                │
   │ comic SFX accents only   │ --font-sfx    │ BSI Oblique (得意黑 subset)   │ BSI Oblique            │ 400 · ≥ 26px, never body     │
   │ language switch          │ system-ui     │ system font (no CJK download on English pages for "中")              │
   └──────────────────────────┴───────────────┴──────────────────────────────┴────────────────────────┴──────────────────────────────┘
   CSS family names (fonts/fonts.css, generated): IBM Plex Sans ships as 'BSI Sans' and Plex Mono as 'BSI Mono' — subsets
   are modified fonts and "Plex" is a Reserved Font Name (same rule that renamed 得意黑 to 'BSI Oblique'). 'Noto SC' = Noto
   Sans SC core (every site + API string) + on-demand slices for AI text (fonts/noto-slices.css, async). Plex digits are
   tabular by default, so every number lines up in every weight with no font-feature setting (a font: shorthand cannot
   undo it). In Chinese pages --font-sans starts with 'BSI Sans ZH' (the same Plex files minus “ ” ‘ ’ … —, so Chinese text
   gets the full-width CJK forms). Noto SC is declared 400–700 (800/900 clamp to 700; html sets font-synthesis: none).
   'Inter' is a legacy alias of the BSI Sans files (canvas strings / old stacks still naming Inter draw Plex).
   Headings: clean bold sans, white (--bn-text) or Binance yellow (--bn-yellow). NO ink outlines, echo shadows or skew.
   Crisp text: never rotate / skew / scale / filter an element holding text under 32px; minimum 12px 中文, 11px Latin.
   Legacy tokens (--f-display, --f-letter, --f-bang, --f-ui, --y, --m, --c, --paper, --ex*) are re-pointed in comic.css.
   ===================================================================================================================== */
:root {
  --font-sans: 'BSI Sans', 'Noto SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --font-num: 'BSI Sans', 'Noto SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --font-mono: 'BSI Mono', ui-monospace, 'SFMono-Regular', Consolas, 'Noto SC', 'Microsoft YaHei', monospace;
  --font-sfx: 'BSI Oblique', 'BSI Sans', 'Noto SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  /* Binance dark palette */
  --bn-bg: #0B0E11;        /* page */
  --bn-panel: #181A20;     /* panels */
  --bn-panel-2: #1E2329;   /* raised panels, inputs, cards on panels */
  --bn-line: #2B3139;      /* hairlines, borders, dividers */
  --bn-yellow: #F0B90B;    /* primary: brand, headings accent, primary buttons */
  --bn-yellow-hi: #FCD535; /* hover / pressed primary */
  --bn-text: #EAECEF;      /* primary text */
  --bn-muted: #848E9C;     /* secondary text, labels */
  --bn-up: #0ECB81;        /* up / safe */
  --bn-down: #F6465D;      /* down / danger */
  /* extras (same family of tones) */
  --bn-text-2: #B7BDC6;    /* paragraphs on dark panels */
  --bn-dim: #5E6673;       /* disabled, faint captions */
  --bn-line-2: #252930;    /* hairlines inside panels */
  --bn-amber: #F78D1E;     /* caution (verdict "wait") */
  --bn-on-yellow: #202630; /* text on yellow */
  --bn-r: 12px;            /* panel radius */
  --bn-r-s: 8px;           /* control radius */
}
html[data-lang="zh"] { --font-sans: 'BSI Sans ZH', 'Noto SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif; }


/* BIS · shell + home + AI 查币 page + 金狗赏金 / 猎手榜 fallbacks (token page: ai.css; breeder pages: breeder.css).
   Binance dark: #0B0E11 page, #181A20 / #1E2329 panels, #2B3139 hairlines, #F0B90B primary. Panel frames are the thin
   cut-corner outlines drawn by comic.js; the comic voice lives in the characters, the speech bubbles and a few SFX. */
#view { position: relative; z-index: 1; min-height: 60vh; }
.lockline { margin: 0; padding: 20px 22px; color: var(--bn-muted); font: 500 14px/1.6 var(--font-sans); }
.ic { display: inline-flex; width: 18px; height: 18px; flex: none; }
.ic svg { width: 100%; height: 100%; }
.tag { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 3px 8px; font: 500 12px/1.2 var(--font-sans); color: var(--bn-text-2); background: rgba(132, 142, 156, .12); border: 1px solid rgba(132, 142, 156, .26); border-radius: 4px; white-space: nowrap; }
.tag.y { color: var(--bn-yellow); background: var(--y-tint); border-color: rgba(240, 185, 11, .32); }
.tag.g { color: var(--bn-up); background: rgba(14, 203, 129, .1); border-color: rgba(14, 203, 129, .3); }
a.tag:hover { border-color: var(--bn-yellow); }
.chip { appearance: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; font: 500 13px/1 var(--font-sans); color: var(--bn-text); background: var(--bn-panel-2); border: 1px solid var(--bn-line); border-radius: 99px; transition: border-color .15s, color .15s; }
.chip:hover { color: var(--bn-yellow); border-color: rgba(240, 185, 11, .6); }
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--bn-up); margin-right: 6px; vertical-align: 1px; box-shadow: 0 0 0 3px rgba(14, 203, 129, .18); animation: blink 1.4s steps(1) infinite; }
.kicker.live { color: var(--bn-up); background: rgba(14, 203, 129, .08); border-color: rgba(14, 203, 129, .3); letter-spacing: .06em; }

/* ---------- big CA search (Binance input: dark field, hairline, yellow focus, yellow button) ---------- */
.s-wrap { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 760px; }
.bigsearch { display: flex; align-items: stretch; gap: 8px; padding: 6px; background: var(--bn-bg); border: 1px solid var(--bn-line); border-radius: 10px; transition: border-color .15s, box-shadow .15s; }
.bigsearch:focus-within { border-color: var(--bn-yellow); box-shadow: 0 0 0 3px rgba(240, 185, 11, .14); }
.bigsearch .s-ic { display: grid; place-items: center; width: 44px; flex: none; color: var(--bn-muted); }
.bigsearch .s-ic svg { width: 22px; height: 22px; }
.bigsearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--bn-text); font: 500 16px/1.2 var(--font-mono); padding: 14px 4px; }
html[data-lang="zh"] .bigsearch input:placeholder-shown { font-family: var(--font-sans); }
.bigsearch input::placeholder { color: var(--bn-dim); font-family: var(--font-sans); }
.bigsearch input:focus-visible { outline: 0; }
.bigsearch .s-btn { flex: none; min-height: 48px; }
.s-err { font: 500 13px/1.5 var(--font-sans); color: var(--bn-down); }
.s-err:empty { display: none; }
.s-try { display: flex; align-items: center; gap: 8px; font: 500 13px/1 var(--font-sans); color: var(--bn-muted); }

/* ---------- HERO spread (lab · countdown · pitch) ----------
   A grid, not fixed boxes: the pitch row grows with its copy (English runs long), so no CTA can be clipped. The lab spans
   both rows and reaches 26 px under the right column (the seams between the panels are the thin cuts drawn by comic.js). */
.hero-wrap { margin-top: 22px; }
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); grid-template-rows: auto 1fr; min-height: 800px; }
.hero > .pnl { position: relative; min-width: 0; }
/* the lab: deep black, one soft gold light, a faint diamond grid, the neural network in thin gold lines (canvas) */
.p-lab { grid-column: 1; grid-row: 1 / span 2; margin-right: -26px; --cut: "0 0, 100% 0, 100%-40 100%, 0 100%"; overflow: hidden;
  background: radial-gradient(ellipse 58% 46% at 64% 70%, rgba(240, 185, 11, .16), rgba(240, 185, 11, .04) 46%, transparent 72%), radial-gradient(ellipse 40% 34% at 12% 0%, rgba(240, 185, 11, .07), transparent 70%), #0B0E11; }
.lab-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(45deg, rgba(240, 185, 11, .075) 0 1px, transparent 1px 46px), repeating-linear-gradient(-45deg, rgba(240, 185, 11, .075) 0 1px, transparent 1px 46px);
  -webkit-mask: radial-gradient(ellipse 70% 62% at 66% 64%, #000 0, rgba(0, 0, 0, .55) 45%, transparent 78%); mask: radial-gradient(ellipse 70% 62% at 66% 64%, #000 0, rgba(0, 0, 0, .55) 45%, transparent 78%); }
.lab-net { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
  -webkit-mask: radial-gradient(ellipse 42% 40% at 22% 18%, rgba(0, 0, 0, .12) 60%, #000 100%); mask: radial-gradient(ellipse 42% 40% at 22% 18%, rgba(0, 0, 0, .12) 60%, #000 100%); }
.lab-glow { position: absolute; z-index: 0; width: 640px; height: 640px; right: -120px; bottom: -120px; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 185, 11, .16), rgba(240, 185, 11, .05) 40%, transparent 68%); }
/* the stage the characters stand on: a soft gold light on the floor, no lines */
.lab-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 170px; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 46% 60% at 30% 100%, rgba(240, 185, 11, .14), transparent 70%), radial-gradient(ellipse 34% 50% at 76% 100%, rgba(240, 185, 11, .12), transparent 70%), linear-gradient(transparent, rgba(11, 14, 17, .7)); }
.lab-mast { position: absolute; left: 40px; top: 34px; z-index: 12; display: flex; flex-direction: column; align-items: flex-start; }
.lab-mast .mast { font-size: 120px; margin-top: 14px; }
.lab-sub { margin: 0; }
/* the JEV pitch on the first screen: one link to the JEV section */
.lab-jev { position: relative; display: flex; flex-direction: column; gap: 4px; max-width: 360px; margin: 18px 0 0; padding: 12px 44px 12px 16px; font: 600 15px/1.4 var(--font-sans); color: var(--bn-text);
  background: rgba(30, 35, 41, .82); border: 1px solid var(--bn-line); border-left: 3px solid var(--bn-yellow); border-radius: 8px; transition: border-color .15s, background-color .15s; }
.lab-jev em { font-style: normal; font-weight: 500; color: var(--bn-yellow); }
.lab-jev .arr { position: absolute; right: 16px; top: 50%; margin-top: -10px; font: 600 18px/20px var(--font-sans); color: var(--bn-yellow); transition: transform .15s; }
.lab-jev:hover { background: rgba(43, 49, 57, .9); border-color: rgba(240, 185, 11, .5); }
.lab-jev:hover .arr { transform: translateX(3px); }
.lab-unoff { display: flex; align-items: center; gap: 7px; max-width: 380px; margin: 12px 0 0; font: 500 13px/1.45 var(--font-sans); color: var(--bn-text-2); }
.lab-unoff .ic { width: 16px; height: 16px; color: var(--bn-yellow); }
/* the AI 孵化博士 and the incubator: transparent cutouts on lit floors (only the halos and rings move) */
.lab-halo { position: absolute; left: 50%; top: 56%; width: 120%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(240, 185, 11, .2), rgba(240, 185, 11, .06) 42%, transparent 68%); }
.lab-doc { position: absolute; left: 30px; bottom: 34px; width: 392px; z-index: 7; display: flex; flex-direction: column; align-items: center; isolation: isolate; }
.lab-doc .pic { width: 100%; }
.lab-doc .doc-ring { inset: auto; left: 8%; top: 10%; width: 84%; aspect-ratio: 1 / 1; z-index: -1; }
.doc-tag { position: relative; z-index: 3; margin-top: -10px; }
.lab-inc { position: absolute; right: 60px; bottom: 50px; width: 320px; z-index: 6; isolation: isolate; }
.lab-inc .pic { width: 100%; }
.inc-tag { position: absolute; left: 12px; top: 6px; z-index: 3; }
.lab-say { position: absolute; left: 400px; top: 228px; width: 300px; z-index: 14; }
html[data-lang="en"] .lab-say { top: 246px; }
.lab-ding { right: 44px; top: 300px; font-size: 56px; z-index: 15; transform: rotate(10deg); }
html[data-lang="en"] .lab-ding { top: 360px; font-size: 52px; }
@media (min-width: 1101px) and (max-width: 1300px) {
  .lab-doc { width: 330px; }
  .lab-inc { width: 268px; right: 44px; }
  .lab-say { left: 340px; }
}
/* JEV seal: a clean round badge (gold ring, dark centre, upright letters) */
.jev-seal { position: absolute; right: 40px; top: 34px; z-index: 16; width: 132px; height: 132px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 50% 35%, #2B3139, #181A20 70%); border: 1px solid rgba(240, 185, 11, .7); box-shadow: 0 0 0 6px rgba(240, 185, 11, .08), 0 0 40px rgba(240, 185, 11, .18); transition: box-shadow .2s; }
.jev-seal:hover { box-shadow: 0 0 0 6px rgba(240, 185, 11, .16), 0 0 48px rgba(240, 185, 11, .3); }
.jev-seal .js-ring { position: absolute; inset: -12px; border-radius: 50%; border: 1px dashed rgba(240, 185, 11, .45); animation: spin 30s linear infinite; pointer-events: none; }
.jev-seal small { font: 500 12px/1 var(--font-sans); color: var(--bn-text-2); letter-spacing: .04em; }
.jev-seal b { font: 700 44px/1 var(--font-sans); letter-spacing: -.01em; color: var(--bn-yellow); }
.jev-seal em { font: 500 12px/1 var(--font-sans); font-style: normal; color: var(--bn-muted); white-space: nowrap; }

/* countdown: pre-launch = a calm status block (no fake digits); live = real digits to the next cut-off */
.p-count { grid-column: 2; grid-row: 1; margin-left: -12px; min-height: 360px; --cut: "40 0, 100% 0, 100% 100%-16, 20.7 100%"; padding: 34px 34px 30px 66px; overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 85% 0%, rgba(240, 185, 11, .1), transparent 70%), linear-gradient(180deg, var(--bn-panel-2), var(--bn-panel)); }
.cnt-dots { right: -8%; bottom: -14%; width: 64%; height: 76%; opacity: 1; -webkit-mask: radial-gradient(circle at 100% 100%, #000 10%, transparent 70%); mask: radial-gradient(circle at 100% 100%, #000 10%, transparent 70%); }
.cnt-cap { position: relative; z-index: 3; }
.cnt-big { position: relative; z-index: 3; display: flex; align-items: center; gap: 18px; min-height: 120px; margin: 20px 0 0 10px; }
.cnt-num { display: inline-block; font: 700 84px/1 var(--font-num); letter-spacing: -.02em; color: var(--bn-yellow); }
.cnt-dot { position: relative; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--bn-yellow); box-shadow: 0 0 0 6px rgba(240, 185, 11, .14), 0 0 22px rgba(240, 185, 11, .6); }
.cnt-dot::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(240, 185, 11, .6); animation: ping 2s ease-out infinite; }
@keyframes ping { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
.cnt-stamp { font: 700 76px/1 var(--font-sans); letter-spacing: .02em; color: var(--bn-text); white-space: nowrap; }
html[data-lang="en"] .cnt-stamp { letter-spacing: .04em; }
.cnt-fuse { position: relative; z-index: 3; height: 4px; margin: 18px 30px 0 0; border-radius: 4px; background: var(--bn-line); }
.cnt-fuse i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 4px; background: linear-gradient(90deg, #C99400, var(--bn-yellow)); }
.cnt-fuse .spark { position: absolute; left: 0; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--bn-yellow-hi); box-shadow: 0 0 14px 4px rgba(240, 185, 11, .6); }
.cnt-note { position: relative; z-index: 3; margin-top: 16px; max-width: 470px; font: 400 14.5px/1.65 var(--font-sans); color: var(--bn-text-2); }
.cnt-meta { position: relative; z-index: 3; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.cnt-meta span { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 10px; font: 500 13px/1.3 var(--font-sans); color: var(--bn-text); background: rgba(43, 49, 57, .6); border: 1px solid var(--bn-line); border-radius: 99px; }
.cnt-sfx { right: 34px; top: 28px; font-size: 44px; z-index: 2; transform: rotate(8deg); }

/* the AI 生币 pitch */
.p-pitch { grid-column: 2; grid-row: 2; margin: -4px 0 0 -12px; --cut: "20.7 16, 100% 0, 100% 100%, 0 100%"; padding: 48px 40px 36px 52px; overflow: hidden;
  background: radial-gradient(ellipse 60% 50% at 100% 100%, rgba(240, 185, 11, .08), transparent 70%), linear-gradient(180deg, var(--bn-panel-2), var(--bn-panel)); }
.pitch-dots { right: -10%; top: -20%; width: 70%; height: 80%; -webkit-mask: radial-gradient(circle at 100% 0, #000, transparent 70%); mask: radial-gradient(circle at 100% 0, #000, transparent 70%); }
.pitch-h { position: relative; z-index: 3; margin: 0; font: 700 42px/1.18 var(--font-sans); color: var(--bn-text); letter-spacing: -.01em; }
html[data-lang="zh"] .pitch-h { letter-spacing: .01em; }
html[data-lang="en"] .pitch-h { font-size: 38px; line-height: 1.14; }
.pitch-h em { font-style: normal; color: var(--bn-yellow); }
.pitch-p { position: relative; z-index: 3; margin: 16px 0 0; max-width: 460px; color: var(--bn-text-2); font: 400 14.5px/1.7 var(--font-sans); }
.pitch-cta { position: relative; z-index: 3; display: flex; gap: 12px; margin-top: 22px; padding-right: 112px; flex-wrap: wrap; }
.pitch-peek { position: absolute; right: -14px; bottom: -18px; width: 150px; z-index: 2; opacity: .96; }

/* ---------- JEV section ---------- */
.jev-sec { margin-top: 72px; scroll-margin-top: 84px; }
.jv-pnl { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 36px; padding: 46px 44px 40px; --cut: "0 0, 100% 0, 100% 100%-16, 100%-16 100%, 0 100%"; overflow: hidden;
  background: radial-gradient(ellipse 55% 70% at 74% 46%, rgba(240, 185, 11, .1), transparent 70%), linear-gradient(180deg, var(--bn-panel-2), var(--bn-panel)); }
.jv-dots { left: -6%; bottom: -16%; width: 50%; height: 64%; -webkit-mask: radial-gradient(circle at 0 100%, #000, transparent 70%); mask: radial-gradient(circle at 0 100%, #000, transparent 70%); }
.jv-speed { --sx: 66%; --sy2: 50%; opacity: .7; }
.jv-left { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.jv-h { display: flex; flex-direction: column; gap: 8px; font-size: 44px; line-height: 1.15; }
.jv-h em { font-size: .72em; }
html[data-lang="en"] .jv-h { font-size: 42px; }
.jv-sub { font: 400 16px/1.75 var(--font-sans); color: var(--bn-text-2); max-width: 540px; }
.jv-formula { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.jv-formula b { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; font: 600 13.5px/1 var(--font-sans); color: var(--bn-text); background: var(--bn-panel-2); border: 1px solid var(--bn-line); border-radius: 6px; white-space: nowrap; }
.jv-formula .f-jev { color: var(--bn-yellow); border-color: rgba(240, 185, 11, .45); background: var(--y-tint); }
.jv-formula .f-bis { color: var(--bn-on-yellow); background: var(--bn-yellow); border-color: transparent; font-weight: 700; }
.jv-formula i { font: 500 18px/1 var(--font-sans); font-style: normal; color: var(--bn-muted); }
.jv-honest { font: 400 13px/1.6 var(--font-sans); color: var(--bn-muted); padding-left: 12px; border-left: 2px solid rgba(240, 185, 11, .5); }
.jv-right { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.jv-viz { position: relative; height: 420px; }
.jv-net { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.jv-ins { position: absolute; left: 0; top: 0; bottom: 0; width: 28%; margin: 0; padding: 4px 0; list-style: none; display: flex; flex-direction: column; justify-content: space-around; align-items: flex-start; z-index: 2; }
.jv-in { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; font: 500 13px/1.2 var(--font-sans); color: var(--bn-text); background: var(--bn-panel-2); border: 1px solid var(--bn-line); border-radius: 99px; }
.jv-in i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ic); box-shadow: 0 0 8px var(--ic); }
.jv-ball { position: absolute; left: 44%; top: 50%; width: 132px; height: 132px; margin: -66px 0 0 -66px; z-index: 3; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 38%, #2B3139, #12151A 72%); border: 1px solid rgba(240, 185, 11, .8); box-shadow: 0 0 0 8px rgba(240, 185, 11, .07), 0 0 46px rgba(240, 185, 11, .25); transition: box-shadow .3s; }
.jv-ball b { font: 700 42px/1 var(--font-sans); letter-spacing: -.01em; color: var(--bn-yellow); }
.jv-ball small { margin-top: 6px; font: 500 12px/1 var(--font-mono); color: var(--bn-muted); }
.jv-viz.thinking .jv-ball { animation: ballGlow 1.2s ease-in-out infinite; }
@keyframes ballGlow { 50% { box-shadow: 0 0 0 12px rgba(240, 185, 11, .12), 0 0 70px rgba(240, 185, 11, .45); } }
.jv-outs { position: absolute; right: 0; top: 0; bottom: 0; width: 40%; display: flex; flex-direction: column; justify-content: space-between; z-index: 2; }
.jv-o { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; padding: 11px 14px 12px; background: rgba(24, 26, 32, .92); border: 1px solid var(--bn-line); border-radius: 10px; }
.jo-l { font: 500 13px/1.3 var(--font-sans); color: var(--bn-text-2); }
.jo-v { font: 700 22px/1 var(--font-num); color: var(--bn-text); text-align: right; white-space: nowrap; }
.jo-bar { grid-column: 1 / -1; display: flex; gap: 2px; height: 6px; border-radius: 3px; background: var(--bn-line); overflow: hidden; }
.jo-bar i { display: block; height: 100%; width: 0; border-radius: 3px; transition: width 1.1s cubic-bezier(.2, .8, .2, 1); }
.jo-bar.dist { background: transparent; }
.jo-bar.dist i { width: auto; min-width: 2px; border-radius: 1px; }
.jo-s { grid-column: 1 / -1; font: 400 12px/1.45 var(--font-sans); color: var(--bn-muted); min-height: 17px; }
.jv-o.off { background: rgba(24, 26, 32, .6); border-style: dashed; }
.jv-o.off .jo-v { color: var(--bn-dim); }
.jv-live { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; background: rgba(11, 14, 17, .7); border: 1px solid var(--bn-line); border-radius: 10px; }
.jv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bn-up); box-shadow: 0 0 0 4px rgba(14, 203, 129, .16); animation: blink 1.4s steps(1) infinite; }
.jv-live p { font: 500 13px/1.55 var(--font-sans); color: var(--bn-text); min-width: 0; overflow-wrap: anywhere; }
.jv-live-m { color: var(--bn-muted); font-weight: 400; }
.jv-acts { display: flex; gap: 10px; }
.jv-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.jv-card { padding: 20px 22px 24px; --cut: "0 0, 100% 0, 100% 100%-12, 100%-12 100%, 0 100%"; display: flex; flex-direction: column; }
.jv-card h3 { margin: 16px 0 8px; font: 700 20px/1.3 var(--font-sans); color: var(--bn-text); }
.jv-card p { font: 400 14px/1.7 var(--font-sans); color: var(--bn-text-2); }
.jc-tag { margin-top: 14px; align-self: flex-start; }
.jc-viz { position: relative; height: 100px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--bn-line); padding-bottom: 10px; }
.cv-gauge { width: 136px; }
.cv-gauge svg { width: 100%; height: auto; overflow: visible; }
.cv-needle { transform-origin: 60px 62px; animation: needleSwing 3.2s ease-in-out infinite alternate; }
@keyframes needleSwing { from { transform: rotate(-120deg); } to { transform: rotate(-12deg); } }
.cv-tiers { display: flex; align-items: flex-end; gap: 12px; height: 86px; }
.cv-tiers span { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; width: 34px; }
.cv-tiers i { display: block; width: 100%; height: var(--h); background: var(--c); border-radius: 4px 4px 1px 1px; opacity: .9; }
.cv-tiers b { font: 500 12px/1 var(--font-sans); color: var(--bn-text-2); white-space: nowrap; }
.cv-moves { display: grid; gap: 8px; width: 100%; max-width: 230px; }
.cv-moves span { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 8px; }
.cv-moves b { font: 500 12px/1 var(--font-sans); color: var(--bn-text-2); white-space: nowrap; }
.cv-moves i { display: block; height: 6px; width: var(--w); background: var(--c); border-radius: 3px; }
.cv-gene { display: flex; align-items: center; gap: 16px; width: 100%; max-width: 240px; }
.cv-egg { width: 64px; }
.cv-gene .love { flex: 1; }
.cv-gene .love .lbl { display: none; }

/* ---------- search section ---------- */
.search-sec { margin-top: 72px; }
.srch-pnl { position: relative; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 10px 40px; align-items: center; padding: 36px 48px 40px 30px; overflow: hidden; --cut: "0 0, 100% 0, 100% 100%-16, 100%-16 100%, 0 100%";
  background: radial-gradient(ellipse 40% 80% at 12% 60%, rgba(240, 185, 11, .12), transparent 70%), linear-gradient(180deg, var(--bn-panel-2), var(--bn-panel)); }
.srch-dots { right: -4%; top: -20%; width: 44%; height: 96%; -webkit-mask: radial-gradient(circle at 100% 0, #000, transparent 70%); mask: radial-gradient(circle at 100% 0, #000, transparent 70%); }
.srch-say { position: relative; z-index: 4; grid-column: 1; grid-row: 1; align-self: end; margin: 0 0 8px 6px; font-size: 14.5px; }
.srch-art { position: relative; z-index: 3; grid-column: 1; grid-row: 2; width: 210px; justify-self: center; }
.srch-main { position: relative; z-index: 3; grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 16px; }
.srch-hd { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.srch-p { font: 400 15.5px/1.7 var(--font-sans); color: var(--bn-text-2); max-width: 680px; }

/* ---------- radar (a Binance market table) ---------- */
.radar-pnl { padding: 4px 14px 10px; }
.radar { display: flex; flex-direction: column; }
.rrow { display: grid; grid-template-columns: minmax(180px, 1.5fr) 92px 92px 76px 116px minmax(0, 2.3fr) 104px; align-items: center; gap: 12px; padding: 12px 10px; border-bottom: 1px solid var(--bn-line-2); color: inherit; transition: background-color .12s; }
.rrow > * { min-width: 0; }
a.rrow { cursor: pointer; }
a.rrow:focus-visible { outline-offset: -3px; }
.rrow:last-child { border-bottom: 0; }
.rrow.th { font: 500 12px/1.2 var(--font-sans); color: var(--bn-muted); padding: 14px 10px 10px; border-bottom: 1px solid var(--bn-line); }
.rrow:not(.th):hover { background: rgba(255, 255, 255, .03); }
a.rrow:hover .rgo { --bg: var(--y-tint); --bd: var(--bn-yellow); }
.rrow.new { animation: rowNew 2.6s ease-out; }
@keyframes rowNew { from { background: rgba(240, 185, 11, .12); } to { background: transparent; } }
.r-more { align-self: center; display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 6px; padding: 0 16px; min-height: 38px; font: 600 14px/1 var(--font-sans); color: var(--bn-text); background: var(--bn-line); border-radius: 6px; transition: background-color .15s; }
.r-more:hover { background: #363D47; }
.r-more b { font: 600 12px/1 var(--font-num); color: var(--bn-on-yellow); background: var(--bn-yellow); padding: 3px 6px; border-radius: 3px; }
.r-more .arr { font: 600 15px/1 var(--font-sans); color: var(--bn-yellow); }
.rt { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* token avatar: the real logo when the data has one, else a round letter on a tinted plate */
.tkav { --tc: var(--bn-yellow); position: relative; display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .16), transparent 60%), color-mix(in srgb, var(--tc) 22%, #1E2329); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 55%, transparent); }
.tkav-l { position: relative; z-index: 2; font: 700 15px/1 var(--font-sans); color: var(--tc); }
.tkav-l.lat { font-size: 16px; }
.tkav > img { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; object-fit: cover; }
.rid { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rid b { font: 600 15px/1.2 var(--font-sans); color: var(--bn-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rid small { font: 400 12px/1.25 var(--font-sans); color: var(--bn-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rnew { flex: none; font: 600 11px/1 var(--font-sans); letter-spacing: .04em; color: var(--bn-on-yellow); background: var(--bn-yellow); padding: 3px 5px; border-radius: 3px; }
.r-stale { margin: 10px 10px 0; font: 500 12.5px/1.45 var(--font-sans); color: var(--bn-amber); }
.rc { font: 500 14px/1.2 var(--font-num); color: var(--bn-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc.up { color: var(--bn-up); } .rc.dn { color: var(--bn-down); }
.rc.na { color: var(--bn-muted); font: 400 13px/1.2 var(--font-sans); }
.rk { --rc: var(--bn-yellow); justify-self: start; display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 9px; color: var(--rc); background: color-mix(in srgb, var(--rc) 12%, transparent); border: 1px solid color-mix(in srgb, var(--rc) 40%, transparent); border-radius: 6px; white-space: nowrap; }
.rk b { font: 700 18px/1 var(--font-num); }
.rk small { font: 500 12px/1 var(--font-sans); }
.rk.na { --rc: var(--bn-muted); border-style: dashed; }
.rk.na b { font: 500 12px/1 var(--font-sans); }
.rk.grey { --rc: #B7BDC6; }
.rf { font: 400 13px/1.5 var(--font-sans); color: var(--bn-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rgo { justify-self: end; }
.rgo .arr { font-family: var(--font-sans); }

/* ---------- how-it-works strip ---------- */
.strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.step { min-height: 380px; padding: 18px 22px 24px; display: flex; flex-direction: column; overflow: hidden; --cut: "0 0, 100% 0, 100% 100%-12, 100%-12 100%, 0 100%"; }
.step-n { position: absolute; left: 20px; top: 16px; z-index: 6; font: 700 15px/1 var(--font-num); color: var(--bn-yellow); padding: 6px 8px; background: var(--y-tint); border: 1px solid rgba(240, 185, 11, .35); border-radius: 6px; }
.step-n::before { content: '0'; }
.step-art { position: relative; height: 196px; margin: 4px -22px 0; }
.step-art .speed { inset: -30%; --sx: 50%; --sy2: 50%; opacity: .9; }
.step h3.cap { align-self: flex-start; margin: 12px 0 0; }
.step p { margin: 12px 0 0; font: 400 14px/1.7 var(--font-sans); color: var(--bn-text-2); }
.st-egg { position: absolute; left: 50%; top: 50%; width: 124px; margin: -70px 0 0 -62px; }
.st-svg, .st-flow { position: absolute; inset: 0; }
.st-svg svg, .st-flow svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.st-l1 { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); white-space: nowrap; }
/* gene cards: the name sits upright inside each card; only the card plate and the art window tilt */
.mini-card { position: absolute; width: 84px; height: 118px; padding: 6px; isolation: isolate; }
.mini-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--bn-panel-2); border: 1px solid var(--rc, var(--bn-line)); border-radius: 8px; box-shadow: 0 10px 24px rgba(0, 0, 0, .45); transform: rotate(var(--r, 0deg)); }
.mini-card > .mc-art { position: relative; height: 72px; border-radius: 5px; overflow: hidden; transform: rotate(var(--r, 0deg));
  background: radial-gradient(circle at 50% 45%, rgba(240, 185, 11, .3), rgba(240, 185, 11, .06) 55%, transparent 75%), #252A33; }
.mini-card > .mc-art > .pic { position: absolute; left: 0; top: 0; width: 100%; --pr: 2px; }
.mini-card b { position: absolute; left: 6px; right: 6px; bottom: 14px; font: 600 12px/1.15 var(--font-sans); color: var(--bn-text); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-card.r-y { --rc: rgba(240, 185, 11, .7); } .mini-card.r-c, .mini-card.r-m { --rc: var(--bn-line); }
.mc1 { left: calc(50% - 120px); top: 46px; --r: -9deg; }
.mc2 { left: calc(50% + 36px); top: 46px; --r: 8deg; }
.mc3 { left: calc(50% - 42px); top: 24px; --r: -2deg; z-index: 2; }
.st-sfx2 { right: 14px; top: 8px; font-size: 32px; transform: rotate(10deg); }
.st-sfx3 { right: 16px; top: 8px; font-size: 34px; transform: rotate(8deg); }
.st-sfx4 { left: auto; right: 12px; top: 6px; font-size: 34px; transform: rotate(-8deg); }
.step canvas.mini-net { position: absolute; inset: 0; width: 100%; height: 100%; }
.st-egg2 { position: absolute; left: calc(88% - 30px); top: calc(52% - 30px); width: 60px; z-index: 3; }
.st-burst { position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; margin: -100px 0 0 -100px; opacity: .7; }
.st-drag { position: absolute; left: 50%; top: 50%; width: 128px; margin: -68px 0 0 -64px; }
/* the vault split: four flows from the child coin to burn / NVDAB / next brood / AI ops. The art is a centred 260 x 196
   box, so the source and the labels are placed from the centre line and the icons' heights (30 / 78 / 126 / 174 of 196) */
.st-src { position: absolute; left: calc(50% - 126px); top: 50%; width: 88px; margin-top: -48px; }
.fl { position: absolute; right: calc(50% - 76px); z-index: 4; font: 600 12px/1 var(--font-sans); color: var(--bn-text); padding: 5px 7px; white-space: nowrap; background: rgba(11, 14, 17, .88); border: 1px solid var(--fc, var(--bn-line)); border-radius: 4px; }
.fl1 { top: calc(15.3% - 11px); --fc: rgba(246, 70, 93, .7); }
.fl2 { top: calc(39.8% - 11px); --fc: rgba(118, 185, 0, .7); }
.fl3 { top: calc(64.3% - 11px); --fc: rgba(240, 185, 11, .7); }
.fl4 { top: calc(88.8% - 11px); --fc: rgba(183, 189, 198, .6); }
.chute { animation: chute 2.4s ease-in-out infinite alternate; }
@keyframes chute { from { transform: translate(-4px, -6px) rotate(-7deg); } to { transform: translate(4px, 7px) rotate(7deg); } }
.flowdash { animation: cable 1.1s linear infinite; }

/* ---------- gene pool (pre-launch) ---------- */
.genes-sec .sec-head { margin-bottom: 0; }
.gene-bus { position: relative; height: 96px; margin-top: 6px; }
.gene-bus canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.bus-hub { position: absolute; right: 2px; top: 6px; display: flex; align-items: center; gap: 8px; z-index: 2; }
.bus-hub > .pic { width: 48px; }
.bus-hub b { font: 600 13px/1 var(--font-sans); color: var(--bn-yellow); background: var(--y-tint); border: 1px solid rgba(240, 185, 11, .4); padding: 7px 10px; border-radius: 6px; }
.gc-egg { position: absolute; left: 50%; top: 50%; width: 112px; margin: -56px 0 0 -56px; z-index: 2; }
.gc-lock { position: absolute; right: 8px; top: 8px; z-index: 3; display: grid; place-items: center; width: 28px; height: 28px; background: rgba(11, 14, 17, .8); color: var(--bn-yellow); border: 1px solid var(--bn-line); border-radius: 50%; }
.gc-lock .ic { width: 14px; height: 14px; }
.gpre .gc-name b { font-size: 17px; }
.gc-sub { margin: 6px 2px 0; font: 400 12px/1.35 var(--font-sans); color: var(--bn-muted); }

/* ---------- hatchling cast (AI-drawn style samples; art only, not tokens) ---------- */
.cast { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 20px; }
.cast-card { margin: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cast-card .pic { width: 100%; --pdx: 0px; --pdy: 0px; transition: transform .2s var(--ease); }
.cast-card .pic::before { display: none; }
.cast-card:hover .pic { transform: translateY(-4px); }
.cast-card:hover .pic-in { border-color: rgba(240, 185, 11, .6); }
.cast-card figcaption { display: flex; flex-direction: column; gap: 4px; padding: 0 2px; }
.cast-card b { font: 700 18px/1.3 var(--font-sans); color: var(--bn-text); }
.cast-card figcaption span { font: 400 13px/1.55 var(--font-sans); color: var(--bn-muted); }

/* ---------- AI 查币 page ---------- */
.scan-top { margin-top: 22px; }
.scan-pnl { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; min-height: 420px; padding: 48px 0 0 48px; --cut: "0 0, 100% 0, 100% 100%-28, 100%-28 100%, 0 100%"; overflow: hidden;
  background: radial-gradient(ellipse 46% 70% at 80% 64%, rgba(240, 185, 11, .16), rgba(240, 185, 11, .04) 50%, transparent 74%), #0B0E11; }
.scan-dots { right: 0; top: 0; width: 60%; height: 100%; -webkit-mask: radial-gradient(ellipse at 70% 60%, #000, transparent 70%); mask: radial-gradient(ellipse at 70% 60%, #000, transparent 70%); }
.scan-speed { --sx: 78%; --sy2: 60%; opacity: .6; }
.scan-l { position: relative; z-index: 3; display: flex; flex-direction: column; gap: 18px; padding-bottom: 48px; }
.scan-hd { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.scan-hd .h-sec { font-size: 60px; line-height: 1.1; }
.scan-p { font: 400 16px/1.75 var(--font-sans); color: var(--bn-text-2); max-width: 580px; }
.scan-r { position: relative; min-height: 380px; }
.scan-net { position: absolute; inset: 0; width: 100%; height: 100%; }
.scan-doc { position: absolute; right: 70px; bottom: 0; width: 330px; z-index: 2; }
.scan-halo { position: absolute; right: 30px; bottom: -40px; width: 420px; aspect-ratio: 1 / 1; border-radius: 50%; z-index: 1; pointer-events: none; background: radial-gradient(circle, rgba(240, 185, 11, .22), rgba(240, 185, 11, .05) 45%, transparent 70%); }
.scan-sfx { right: 36px; top: 40px; font-size: 52px; transform: rotate(8deg); }
.crew { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.crew-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 22px 16px 22px; --cut: "0 0, 100% 0, 100% 100%-10, 100%-10 100%, 0 100%"; }
.crew-av { width: 112px; }
.crew-chief { background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(240, 185, 11, .12), transparent 70%), linear-gradient(180deg, var(--bn-panel-2), var(--bn-panel)); }
.crew-card h3 { margin: 16px 0 4px; font: 700 18px/1.3 var(--font-sans); color: var(--bn-text); }
.crew-chief h3 { color: var(--bn-yellow); }
.crew-role { font: 400 12.5px/1.45 var(--font-sans); color: var(--bn-muted); }
.crew-say { margin-top: 22px; font-size: 14px; line-height: 1.6; text-align: left; align-self: stretch; }

/* ---------- 金狗赏金 / 猎手榜 fallbacks (until pages-hunt.js registers its pages) ---------- */
.bty-hero { margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); min-height: 440px; padding: 44px 0 0 46px; --cut: "0 0, 100% 0, 100% 100%-24, 100%-24 100%, 0 100%"; overflow: hidden;
  background: radial-gradient(ellipse 50% 70% at 80% 60%, rgba(240, 185, 11, .16), transparent 72%), #0B0E11; }
.bty-dots { right: -6%; bottom: -12%; width: 56%; height: 70%; -webkit-mask: radial-gradient(circle at 100% 100%, #000 10%, transparent 70%); mask: radial-gradient(circle at 100% 100%, #000 10%, transparent 70%); }
.bty-l { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-bottom: 44px; }
.bty-h { font-size: 60px; }
.bty-lead { font: 700 24px/1.3 var(--font-sans); color: var(--bn-text); }
.bty-p { font: 400 15.5px/1.7 var(--font-sans); color: var(--bn-text-2); max-width: 560px; }
.bty-status { display: flex; align-items: center; gap: 8px; font: 500 13.5px/1.45 var(--font-sans); color: var(--bn-text); background: var(--bn-panel-2); border: 1px solid var(--bn-line); border-left: 3px solid var(--bn-yellow); padding: 9px 12px; border-radius: 6px; }
.bty-status .ic { color: var(--bn-yellow); }
.bty-r { position: relative; min-height: 380px; }
.bty-burst { position: absolute; right: 40px; top: 30px; width: 340px; height: 340px; opacity: .8; }
.bty-dog { position: absolute; right: 96px; top: 92px; width: 236px; }
.bty-say { position: absolute; left: 0; top: 40px; width: 220px; font-size: 15px; }
.bty-sfx { right: 30px; bottom: 30px; font-size: 56px; transform: rotate(-8deg); }
.bsteps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.bstep { padding: 64px 24px 26px; --cut: "0 0, 100% 0, 100% 100%-10, 100%-10 100%, 0 100%"; }
.bstep h3 { margin: 0 0 8px; font: 700 20px/1.3 var(--font-sans); color: var(--bn-text); }
.bstep p { font: 400 14.5px/1.7 var(--font-sans); color: var(--bn-text-2); }
.hboard { padding: 8px 16px 26px; }
.hrow { display: grid; grid-template-columns: 70px minmax(0, 2fr) repeat(4, minmax(0, 1fr)); gap: 12px; align-items: center; padding: 13px 8px; border-bottom: 1px solid var(--bn-line-2); font: 500 14px/1 var(--font-sans); color: var(--bn-dim); }
.hrow.th { color: var(--bn-muted); font-size: 12px; border-bottom: 1px solid var(--bn-line); }
.hr-rank { font: 700 18px/1 var(--font-num); color: var(--bn-yellow); }
.hr-who { display: flex; align-items: center; gap: 10px; }
.hr-who b { font: 500 14px/1 var(--font-sans); color: var(--bn-dim); }
.hr-av { width: 32px; height: 32px; border-radius: 50%; border: 1px dashed var(--bn-line); }
.hb-empty { position: relative; display: flex; align-items: center; gap: 26px; padding: 30px 10px 6px; }
.hb-art { width: 140px; }
.hb-say { font-size: 15px; max-width: 420px; }
.hb-sfx { right: 30px; top: 30px; font-size: 48px; transform: rotate(-8deg); }
.hb-cta { margin: 16px 0 0 10px; }
.miss { margin-top: 40px; padding: 40px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; font: 500 16px/1.6 var(--font-sans); }

/* =========================================================== responsive */
@media (max-width: 1240px) and (min-width: 761px) {
  .rrow { grid-template-columns: minmax(160px, 1.4fr) 84px 84px 66px 104px minmax(0, 2fr) 92px; gap: 10px; }
  .crew { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) and (min-width: 761px) {
  /* tablets: the lab spans the full width, the countdown and the pitch sit side by side under it */
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; min-height: 0; }
  .p-lab { grid-column: 1 / -1; grid-row: 1; margin: 0; height: 660px; --cut: "0 0, 100% 0, 100% 100%-20, 0 100%"; }
  .lab-mast .mast { font-size: 96px; }
  .lab-doc { width: 280px; left: 22px; bottom: 34px; }
  .lab-inc { width: 236px; right: 36px; bottom: 50px; }
  .lab-say { left: 330px; top: 230px; width: 280px; }
  html[data-lang="en"] .lab-say { top: 250px; }
  .lab-ding { right: 30px; top: 320px; font-size: 48px; }
  .jev-seal { width: 112px; height: 112px; right: 26px; top: 26px; }
  .jev-seal b { font-size: 36px; }
  .cnt-num { font-size: 64px; }
  .cnt-stamp { font-size: 56px; }
  .cnt-sfx { display: none; }
  .p-count { grid-column: 1; grid-row: 2; margin: -8px 0 0; min-height: 0; padding: 36px 26px 28px 30px; --cut: "0 8, 100% 0, 100%-12 100%, 0 100%"; }
  .p-pitch { grid-column: 2; grid-row: 2; margin: -8px 0 0 -12px; padding: 40px 26px 30px 36px; --cut: "12 0, 100% 8, 100% 100%, 0 100%"; }
  .pitch-h { font-size: 32px; }
  html[data-lang="en"] .pitch-h { font-size: 30px; }
  .jv-pnl { grid-template-columns: minmax(0, 1fr); }
  .jv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .srch-pnl { grid-template-columns: 210px minmax(0, 1fr); }
  .srch-art { width: 190px; }
  .strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cast { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .scan-pnl { grid-template-columns: minmax(0, 1fr); }
  .scan-r { min-height: 320px; }
  .bty-hero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .hero-wrap { margin-top: 12px; }
  .hero { min-height: 0; display: flex; flex-direction: column; gap: 12px; }
  .hero > .pnl { position: relative; margin: 0; width: auto; }
  /* phones: the countdown + pitch move below the JEV section (app.js), in their own .hero-more wrapper */
  .hero-more { margin-top: 28px; }
  .hero-more .p-count { margin-top: 0; }
  .p-lab { height: 650px; --cut: "0 0, 100% 0, 100% 100%-22, 0 100%"; }
  .lab-mast { left: 16px; top: 20px; right: 16px; }
  /* clear of the JEV seal in the top-right corner */
  .lab-sub { max-width: calc(100% - 112px); white-space: normal; font-size: 12.5px; }
  html[data-lang="zh"] .lab-sub { font-size: 12.5px; }
  .lab-mast .mast { font-size: 64px; margin-top: 12px; }
  html[data-lang="en"] .lab-mast .mast { font-size: min(50px, 12.6vw); } /* "AI HATCH" stays clear of the JEV seal's ring */
  .lab-jev { margin-top: 14px; max-width: none; font-size: 14px; padding: 10px 40px 10px 12px; }
  .lab-unoff { margin-top: 10px; font-size: 12.5px; }
  .lab-glow { width: 420px; height: 420px; right: -140px; bottom: -80px; }
  .lab-floor { height: 110px; }
  .lab-doc { left: 6px; bottom: 26px; width: 190px; }
  .lab-inc { right: 8px; bottom: 40px; width: 160px; }
  .doc-tag, .inc-tag { font-size: 12px; }
  .inc-tag { left: 4px; top: 0; }
  .lab-say { left: 16px; right: 16px; top: 300px; width: auto; font-size: 14px; }
  html[data-lang="en"] .lab-say { top: 314px; }
  .lab-ding { display: none; }
  .jev-seal { right: 14px; top: 16px; width: 88px; height: 88px; gap: 2px; }
  .jev-seal .js-ring { inset: -8px; }
  .jev-seal small, .jev-seal em { font-size: 11px; }
  html[data-lang="zh"] .jev-seal small, html[data-lang="zh"] .jev-seal em { font-size: 12px; }
  .jev-seal em { display: none; }
  .jev-seal b { font-size: 28px; }
  .p-count { min-height: 0; margin-top: 0; padding: 26px 18px 22px; --cut: "0 0, 100% 0, 100% 100%-14, 100%-14 100%, 0 100%"; }
  .cnt-num { font-size: 56px; }
  .cnt-big { margin-top: 14px; min-height: 84px; }
  .cnt-stamp { font-size: 48px; }
  .cnt-fuse { margin-right: 10px; }
  .cnt-note { font-size: 14px; }
  .cnt-meta { gap: 6px; }
  .cnt-meta span { font-size: 12.5px; }
  .cnt-sfx { display: none; }
  .p-pitch { margin-top: 0; padding: 30px 18px 30px; --cut: "0 0, 100% 0, 100% 100%-14, 100%-14 100%, 0 100%"; }
  .pitch-h { font-size: 30px; }
  html[data-lang="en"] .pitch-h { font-size: 29px; }
  .pitch-p { font-size: 14px; max-width: none; padding-right: 40px; }
  .pitch-peek { width: 108px; right: -12px; bottom: -14px; }
  .jev-sec { margin-top: 44px; }
  .jv-pnl { grid-template-columns: minmax(0, 1fr); padding: 28px 16px 24px; gap: 26px; --cut: "0 0, 100% 0, 100% 100%-12, 100%-12 100%, 0 100%"; }
  .jv-h { font-size: 30px; gap: 6px; }
  html[data-lang="en"] .jv-h { font-size: 30px; }
  .jv-sub { font-size: 14.5px; }
  .jv-formula b { font-size: 12.5px; padding: 0 9px; min-height: 30px; }
  .jv-formula i { font-size: 15px; }
  .jv-viz { height: auto; display: flex; flex-direction: column; align-items: stretch; gap: 44px; padding: 2px 0 6px; }
  .jv-ins { position: relative; width: auto; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; }
  .jv-in { font-size: 12.5px; padding: 0 10px; min-height: 30px; }
  .jv-ball { position: relative; left: auto; top: auto; margin: 0 auto; width: 112px; height: 112px; }
  .jv-ball b { font-size: 36px; }
  .jv-outs { position: relative; width: auto; gap: 10px; }
  .jv-live { grid-template-columns: auto minmax(0, 1fr); }
  .jv-acts { grid-column: 1 / -1; }
  .jv-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .search-sec { margin-top: 48px; }
  /* the octopus and its bubble share one row; the heading starts below them (no overlap) */
  .srch-pnl { grid-template-columns: 104px minmax(0, 1fr); padding: 24px 16px 26px; gap: 0 16px; align-items: center; --cut: "0 0, 100% 0, 100% 100%-12, 100%-12 100%, 0 100%"; }
  .srch-art { grid-column: 1; grid-row: 1; width: 100px; margin: 0; justify-self: start; }
  .srch-say { grid-column: 2; grid-row: 1; align-self: center; margin: 0; font-size: 13.5px; }
  .srch-main { grid-column: 1 / -1; grid-row: 2; margin-top: 24px; }
  .bigsearch { flex-wrap: wrap; }
  .bigsearch .s-ic { width: 36px; }
  .bigsearch input { font-size: 15px; padding: 12px 2px; }
  .bigsearch .s-btn { flex: 1 0 100%; }
  .rrow.th { display: none; }
  .radar-pnl { padding: 2px 12px 8px; }
  /* phones: one compact card per pool: token + score + arrow chip / liquidity · mcap · 1h on one line / findings */
  .rrow { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr) minmax(0, .88fr) auto; grid-template-areas: "t t k g" "a b c c" "f f f f"; gap: 8px 10px; padding: 12px 2px; }
  .rrow > :nth-child(1) { grid-area: t; } .rrow > :nth-child(2) { grid-area: a; } .rrow > :nth-child(3) { grid-area: b; } .rrow > :nth-child(4) { grid-area: c; }
  .rrow > .rk { grid-area: k; justify-self: end; } .rrow > .rf { grid-area: f; } .rrow > .rgo { grid-area: g; justify-self: end; align-self: center; }
  .rgo .rgo-t { display: none; }
  .rgo { padding: 0 9px; }
  .rc { font-size: 13px; }
  .rc::before { content: attr(data-s); margin-right: 5px; font: 400 12px/1 var(--font-sans); color: var(--bn-muted); }
  .rf { font-size: 12.5px; }
  .rid small { white-space: normal; line-height: 1.35; }
  .rid small .nw { white-space: nowrap; }
  .r-more { align-self: stretch; justify-content: center; }
  .strip { grid-template-columns: minmax(0, 1fr); }
  .step { min-height: 0; padding: 14px 16px 18px; }
  .step-art { height: 186px; margin: 0 -16px; }
  .step-n { left: 14px; top: 12px; }
  .step p { font-size: 13.5px; margin-top: 8px; }
  .gene-bus { height: 70px; }
  .cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; gap: 14px; padding: 6px 16px 22px; margin: 0 -16px; scrollbar-width: none; }
  .cards::-webkit-scrollbar { display: none; }
  .gcard { flex: 0 0 226px; scroll-snap-align: center; }
  .cast { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; gap: 16px; padding: 6px 24px 20px 16px; margin: 0 -16px; scrollbar-width: none; }
  .cast::-webkit-scrollbar { display: none; }
  .cast-card { flex: 0 0 156px; scroll-snap-align: start; gap: 12px; }
  .cast-card b { font-size: 16px; }
  .cast-card figcaption span { font-size: 12.5px; }
  .scan-pnl { grid-template-columns: minmax(0, 1fr); padding: 28px 16px 0; --cut: "0 0, 100% 0, 100% 100%-16, 100%-16 100%, 0 100%"; }
  .scan-hd .h-sec { font-size: 42px; }
  .scan-l { padding-bottom: 6px; }
  .scan-r { min-height: 260px; margin: 0 -16px; }
  .scan-doc { right: 50%; margin-right: -110px; width: 220px; }
  .scan-halo { right: 50%; margin-right: -160px; width: 320px; bottom: -40px; }
  .scan-sfx { right: auto; left: 20px; top: 34px; font-size: 40px; }
  .crew { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .crew-card { display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-areas: "av h" "av r" "s s"; text-align: left; align-items: center; gap: 2px 14px; padding: 16px; }
  .crew-av { grid-area: av; width: 80px; margin: 0; }
  .crew-card h3 { grid-area: h; margin: 0; align-self: end; }
  .crew-role { grid-area: r; align-self: start; }
  .crew-say { grid-area: s; margin-top: 20px; }
  .bty-hero { grid-template-columns: minmax(0, 1fr); padding: 30px 16px 0; }
  .bty-h { font-size: 44px; }
  .bty-lead { font-size: 20px; }
  .bty-r { min-height: 300px; margin: 0 -16px; }
  .bty-burst { right: 20px; top: 20px; width: 250px; height: 250px; }
  .bty-dog { right: 60px; top: 60px; width: 170px; }
  .bty-say { top: 10px; left: 14px; width: 170px; font-size: 13.5px; }
  .bty-sfx { font-size: 40px; right: 16px; bottom: 16px; }
  .bsteps { grid-template-columns: minmax(0, 1fr); }
  .hrow { grid-template-columns: 44px minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); }
  .hrow > :nth-child(n+5) { display: none; }
  .hb-empty { flex-direction: column; align-items: flex-start; }
  .hb-art { width: 110px; }
}