/* AI 生币 breeder pages — 孵化室 #/hatch · 子币 #/c/<id> · 家族树 #/tree (styles for js/pages-breeder.js).
   Binance-style dark UI (2026-10-01): page #0B0E11, panels #181A20 / #1E2329, hairlines #2B3139, one yellow (#F0B90B,
   hover #FCD535), text #EAECEF / #848E9C, up #0ECB81, down #F6465D. Colours and fonts come from the shell's variables
   (css/app.css: --bn-* and --font-*, with the same values as fallbacks here). The comic identity lives in the characters
   (transparent v20 art on a gold-glow plate), the thin panel frames with their cut corners (drawn by pages-breeder.js)
   and the speech bubbles; SFX lettering (叮！ BOOM!) is a small accent in --font-sfx only.
   Type: headings are clean bold sans (IBM Plex Sans 600–700 / Noto Sans SC 700) in white or yellow, never outlined,
     echoed or skewed; body text 400–500; numbers use --font-num with tabular figures; hashes / model tags --font-mono.
   Crisp text: an element holding text under 32px is never rotated, skewed, scaled or filtered; animations on text
     move it with translate / opacity only; small text is at least 12px (CJK) / 11px (Latin).
   Every class is prefixed br-; tokens are re-declared on .br (from the shell variables) so the pages render the same
   while the shell's stylesheet changes. */

.br {
  --bg: var(--bn-bg, #0B0E11);
  --panel: var(--bn-panel, #181A20);
  --panel-2: var(--bn-panel-2, #1E2329);
  --line: var(--bn-line, #2B3139);
  --y: var(--bn-yellow, #F0B90B);
  --y-hi: var(--bn-yellow-hi, #FCD535);
  --text: var(--bn-text, #EAECEF);
  --muted: var(--bn-muted, #848E9C);
  --up: var(--bn-up, #0ECB81);
  --down: var(--bn-down, #F6465D);
  --soft: var(--bn-text-2, #B7BDC6); /* paragraphs on panels (one step brighter than --muted) */
  --ink: var(--bn-on-yellow, #202630); /* text on yellow */
  --dim: var(--bn-dim, #5E6673);   /* disabled, placeholders */
  --nv: #76B900;                   /* the NVDAB badge only */
  --y-tint: rgba(240, 185, 11, .1);
  --y-edge: rgba(240, 185, 11, .38);
  --grid: rgba(240, 185, 11, .07);
  /* the shell's families (fonts/fonts.css): BSI Sans = IBM Plex Sans, Noto SC = Noto Sans SC, BSI Mono = IBM Plex Mono,
     BSI Oblique = the 得意黑 SFX subset; on Chinese pages the shell points --font-sans at 'BSI Sans ZH' */
  --f-sans: var(--font-sans, 'BSI Sans', 'Noto SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif);
  --f-num: var(--font-num, 'BSI Sans', 'Noto SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif);
  --f-mono: var(--font-mono, 'BSI Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace);
  --f-sfx: var(--font-sfx, 'BSI Oblique', 'BSI Sans', 'Noto SC', sans-serif);
  --ease: cubic-bezier(.2, .7, .2, 1);
  position: relative; z-index: 1; padding-bottom: 12px;
  color: var(--text); font: 400 15px/1.6 var(--f-sans);
  font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: normal;
}
/* resets at zero specificity (:where), so every br- component rule below wins over them */
:where(.br) *, :where(.br) *::before, :where(.br) *::after { box-sizing: border-box; }
:where(.br) :where(p, h1, h2, h3, h4, ul, ol, figure) { margin: 0; }
:where(.br) :where(a) { color: inherit; text-decoration: none; }
:where(.br) :where(button, input, textarea) { font: inherit; color: inherit; }
:where(.br) :where(svg) { display: block; }
:where(.br) :where(b, strong) { font-weight: 600; }
.br-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.br .br-num { font-family: var(--f-num); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.br .br-nv { color: var(--nv); }
.br .br-yv { color: var(--y); }

/* ---------- stickers (light bursts, the NVDAB coin badge) ---------- */
.br .art { width: 100%; height: 100%; overflow: visible; }
@keyframes brSpin { to { transform: rotate(360deg); } }

/* ---------- character art: transparent v20 cut-outs on a dark plate with a soft gold glow ----------
   pic() in pages-breeder.js returns <span class="pic br-fr br-fr-{face|bust|full} [round]"> (the shell's .pic frame
   classes, css/comic.css). Knobs per placement: --fr-r (corner radius), --fr-off (offset of the thin gold outline
   behind the frame; 0 hides it), --fr-line (frame line), --fr-glow (glow strength). Frames hold pictures only. */
:where(.br) .br-fr { width: 100%; }   /* zero-specificity width: every placement class below sets its own */
.br .br-fr { --pr: var(--fr-r, 14px); }
.br .br-fr.round { --pr: 50%; }
.br .br-fr::before { border: 1px solid var(--y-edge); background: none; border-radius: var(--pr);
  transform: translate(var(--fr-off, 6px), var(--fr-off, 6px)); }
.br .br-fr > .pic-in { border: 1px solid var(--fr-line, rgba(240, 185, 11, .3)); box-shadow: none;
  background: radial-gradient(circle at 50% 44%, rgba(240, 185, 11, var(--fr-glow, .24)), rgba(240, 185, 11, .06) 46%, transparent 72%), linear-gradient(180deg, #252A33, #15191E); }
.br .br-fr > .pic-in::after { display: none; }
.br .br-fr-face > .pic-in { background: radial-gradient(circle at 50% 52%, rgba(240, 185, 11, var(--fr-glow, .3)), rgba(240, 185, 11, .06) 52%, transparent 76%), linear-gradient(180deg, #262B34, #171B20); }
.br-px-face { position: absolute; max-width: none; }
/* crack lines over a framed picture (pathLength 1: stroke-dashoffset 1 = hidden, 0 = drawn) */
.br-crack { position: absolute; left: 0; top: 0; z-index: 4; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.br-crack path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.br-crack path:first-child { stroke-width: 2.4; }
.br-crack path:last-child { stroke-width: 1; }

/* AI 孵化博士: the robot portrait + live signals on the network drawn on his forehead (screen-blended) */
.br-doctor { position: relative; }
.br-doc-fr { --fr-r: 18px; --fr-off: 0px; --fr-glow: .2; }
.br-doc-fr::before { display: none; }
.br-doc-brain { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; mix-blend-mode: screen; pointer-events: none; }
.br-doctor.br-doc-on .br-doc-fr > .pic-in { border-color: rgba(63, 216, 255, .6); }
.br-doc-tag { position: absolute; left: -10px; bottom: 14px; z-index: 5; font: 600 12px/1 var(--f-sans); color: var(--ink); background: var(--y); border-radius: 4px; padding: 6px 9px; white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, .45); }
.br-doc-emo { position: absolute; left: 10px; top: -18px; z-index: 6; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  font: 700 22px/1 var(--f-sans); color: var(--ink); background: var(--y); box-shadow: 0 0 0 4px rgba(240, 185, 11, .18), 0 6px 16px rgba(0, 0, 0, .5); opacity: 0; }
.br-doc-emo.on { animation: brEmo .4s var(--ease) forwards; }
@keyframes brEmo { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: none; } }

/* ---------- layout ---------- */
.br-sec { position: relative; z-index: 1; max-width: 1392px; margin: 0 auto; padding: 0 24px; }
.br-sec-head { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin: 64px 0 22px; }
.br-h-sec { font: 700 32px/1.2 var(--f-sans); color: var(--text); letter-spacing: -.005em; }
.br-h-sec em { font-style: normal; color: var(--y); }
.br[data-lang="zh"] .br-h-sec { letter-spacing: .01em; }

/* page headings: clean bold sans, white with a yellow part */
.br-h1 { position: relative; font: 700 52px/1.12 var(--f-sans); color: var(--text); letter-spacing: -.015em; text-wrap: balance; }
.br[data-lang="zh"] .br-h1 { letter-spacing: .02em; }
.br-h1 .br-hy, .br-h1 .br-l2 { color: var(--y); }
.br-h1 .br-l2 { display: block; }

/* small labels: upright chips with hairline edges (no tilted plates) */
.br-kicker { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 10px; font: 500 12px/1.3 var(--f-sans); color: var(--y); background: var(--y-tint); border: 1px solid rgba(240, 185, 11, .28); border-radius: 4px; white-space: nowrap; }
.br-kicker.br-km { color: var(--soft); background: rgba(132, 142, 156, .1); border-color: rgba(132, 142, 156, .3); }
.br-cap { position: relative; z-index: 25; display: inline-flex; align-items: center; min-height: 26px; padding: 4px 10px; font: 600 13px/1.3 var(--f-sans); color: var(--ink); background: var(--y); border-radius: 4px; white-space: nowrap; }
.br-cap.br-k { color: var(--y); background: rgba(11, 14, 17, .78); box-shadow: inset 0 0 0 1px rgba(240, 185, 11, .45); }
.br-cap.br-c { color: var(--text); background: var(--line); }
.br-cap.br-p { color: var(--ink); background: var(--text); }
.br-gen { display: inline-flex; align-items: center; padding: 5px 8px; font: 600 12px/1 var(--f-sans); color: var(--text); background: var(--line); border-radius: 4px; white-space: nowrap; }
.br-gen.br-g0 { color: var(--ink); background: var(--y); }
.br-gen.br-g2 { color: var(--up); background: rgba(14, 203, 129, .12); }
.br-gen.br-g3 { color: var(--soft); background: rgba(132, 142, 156, .16); }
.br-stamp { position: absolute; z-index: 22; padding: 5px 9px; font: 600 12px/1 var(--f-sans); color: var(--y); background: rgba(11, 14, 17, .84); border: 1px dashed rgba(240, 185, 11, .6); border-radius: 4px; white-space: nowrap; }
.br-flag { display: inline-flex; align-items: center; padding: 4px 7px; font: 600 12px/1 var(--f-sans); color: var(--ink); background: var(--y-hi); border-radius: 4px; }
.br-sym { font: 600 12px/1 var(--f-num); letter-spacing: .04em; color: var(--y); }
.br-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font: 500 12px/1.3 var(--f-sans); color: var(--muted); border: 1px solid var(--line); border-radius: 99px; }
.br-tag { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 4px 10px; font: 500 12px/1.2 var(--f-sans); color: var(--soft); background: rgba(43, 49, 57, .45); border: 1px solid var(--line); border-radius: 4px; white-space: nowrap; }
.br-tag-jev { color: var(--y); background: var(--y-tint); border-color: rgba(240, 185, 11, .35); }
a.br-tag-link { color: var(--text); cursor: pointer; transition: border-color .15s, color .15s; }
a.br-tag-link:hover { color: var(--y); border-color: rgba(240, 185, 11, .5); }
a.br-tag-link:focus-visible { outline: 2px solid var(--y-hi); outline-offset: 2px; }
/* the JEV mark: a tiny neural glyph in gold lines */
.br-tag-jev i, .br-pw i { flex: none; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3.5L8 8M3 12.5L8 8M8 8L13 8' stroke='%23F0B90B' stroke-width='1.3' fill='none'/%3E%3Ccircle cx='3' cy='3.5' r='1.9' fill='%23F0B90B'/%3E%3Ccircle cx='3' cy='12.5' r='1.9' fill='%23F0B90B'/%3E%3Ccircle cx='8' cy='8' r='2.1' fill='%23FCD535'/%3E%3Ccircle cx='13' cy='8' r='2.1' fill='%23F0B90B'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- panels: clip-path cut + thin frame (drawn by pages-breeder.js) ---------- */
.br-pnl { position: relative; background: linear-gradient(180deg, var(--panel-2), var(--panel)); isolation: isolate; }
.br-pnl > .br-frame { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 20; overflow: visible; }
/* the Binance diamond grid (faded by each placement's mask) */
.br-dots-m, .br-dots-c, .br-dots-y, .br-dots-k { position: absolute; pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(45deg, var(--grid) 0 1px, transparent 1px 22px), repeating-linear-gradient(-45deg, var(--grid) 0 1px, transparent 1px 22px); }
/* a soft gold light (was comic speed lines) */
.br-speed { position: absolute; inset: -40%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle at var(--sx, 50%) var(--sy2, 50%), rgba(240, 185, 11, .17), rgba(240, 185, 11, .05) 26%, transparent 46%); }

/* onomatopoeia: a small accent in the SFX face (34px and up, so a tilt is allowed; never body text) */
.br-sfx { position: absolute; z-index: 30; pointer-events: none; font: 400 40px/1 var(--f-sfx); color: var(--y); letter-spacing: .02em; white-space: nowrap;
  text-shadow: 0 2px 0 #0B0E11, 0 0 22px rgba(240, 185, 11, .45); }
.br-sfx.br-w { color: #fff; text-shadow: 0 2px 0 #0B0E11, 0 0 20px rgba(255, 255, 255, .35); }

/* speech + thought bubbles: the comic voice, in clean type */
.br-bub { position: relative; z-index: 26; background: #fff; color: #0B0E11; font: 500 15px/1.55 var(--f-sans); padding: 11px 16px; border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .5); text-wrap: pretty; } /* pretty: no lone character on a bubble's last line */
.br-bub b { font-weight: 700; color: #0B0E11; background: linear-gradient(transparent 60%, rgba(240, 185, 11, .6) 60%); }
.br-bub::after { content: ''; position: absolute; width: 0; height: 0; border-style: solid; }
.br-tail-bl::after { left: var(--tx, 36px); bottom: -13px; border-width: 14px 5px 0 12px; border-color: var(--bubbg, #fff) transparent transparent transparent; transform: skewX(-20deg); }
.br-tail-br::after { right: var(--tx, 36px); bottom: -13px; border-width: 14px 12px 0 5px; border-color: var(--bubbg, #fff) transparent transparent transparent; transform: skewX(20deg); }
.br-tail-t::after { left: var(--tx, 40px); top: -13px; border-width: 0 5px 14px 12px; border-color: transparent transparent var(--bubbg, #fff) transparent; transform: skewX(20deg); }
.br-caret { display: inline-block; width: .45em; height: 1em; background: var(--y); vertical-align: -2px; margin-left: 2px; animation: brBlink .7s steps(1) infinite; }
@keyframes brBlink { 50% { opacity: 0; } }
.br-think { position: relative; z-index: 26; background: #fff; color: #0B0E11; font: 500 14px/1.45 var(--f-sans); padding: 13px 22px; border-radius: 50%; text-align: center; box-shadow: 0 10px 28px rgba(0, 0, 0, .5); text-wrap: pretty; }
.br-think i { position: absolute; background: #fff; border-radius: 50%; }

/* buttons (Binance: solid yellow primary, grey secondary); hover changes colour only */
.br-btn { --bg: var(--y); --fg: var(--ink); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; cursor: pointer;
  font: 600 15px/1.2 var(--f-sans); color: var(--fg); background: var(--bg); border: 0; border-radius: 6px; white-space: nowrap; transition: background-color .15s, color .15s, box-shadow .15s; }
.br-btn:hover { --bg: var(--y-hi); }
.br-btn:active { --bg: #DCA70A; }
.br-btn:focus-visible, .br-lock:focus-visible { outline: 2px solid var(--y-hi); outline-offset: 2px; }
.br-btn.br-ghost { --bg: var(--line); --fg: var(--text); }
.br-btn.br-ghost:hover { --bg: #363D47; }
.br-btn.br-ghost:active { --bg: #2F353E; }
.br-btn.br-mag { --bg: transparent; --fg: var(--y); box-shadow: inset 0 0 0 1px var(--y); }
.br-btn.br-mag:hover { --bg: var(--y-tint); }
.br-btn.br-sm { min-height: 36px; padding: 0 14px; font-size: 14px; }
.br-btn .br-arr { font: 600 1em/1 var(--f-sans); }
.br-btn.br-off, .br-btn.br-off:hover { cursor: not-allowed; --bg: var(--line); --fg: var(--muted); white-space: normal; text-align: center; padding-top: 8px; padding-bottom: 8px; }

/* reveal: panels fade up as they scroll in (translate + opacity only) */
.br-rv { opacity: 0; }
.br-rv.in { animation: brIn .55s var(--ease) both; animation-delay: var(--d, 0s); }
.br.br-instant .br-rv, .br.br-instant .br-rv.in { opacity: 1; animation: none; }
@keyframes brIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* neural divider */
.br-nn-div { position: relative; height: 54px; margin: 40px auto 0; max-width: 1392px; }
.br-nn-div canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* fallback toast (the shell's BISUI.toast is used when present) */
.br-toast { position: fixed; left: 0; right: 0; top: 84px; z-index: 200; width: max-content; max-width: calc(100vw - 32px); margin: 0 auto; font: 500 14px/1.4 var(--font-sans, 'BSI Sans', 'Noto SC', sans-serif);
  background: #1E2329; color: #EAECEF; border: 1px solid #2B3139; border-left: 3px solid #F0B90B; border-radius: 6px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); padding: 10px 16px; animation: brToast .25s ease-out both; }
@keyframes brToast { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* the contract's 1 %–35 % line next to every set of odds */
.br-odds-cap { font: 500 12px/1.5 var(--f-sans); color: var(--soft); text-wrap: pretty; }

/* =====================================================================================
   孵化室 #/hatch
   ===================================================================================== */
.br-hatch { padding-top: 22px; }
/* header strip */
.br-hh { display: grid; grid-template-columns: minmax(0, 1fr) 410px 300px; }
.br-hh > .br-pnl { min-height: 196px; }
.br-hh-title { --cut: "0 0, 100% 0, 100%-16 100%, 0 100%"; padding: 22px 46px 22px 30px; overflow: hidden;
  background: radial-gradient(ellipse 60% 90% at 100% 0, rgba(240, 185, 11, .1), transparent 60%), linear-gradient(180deg, var(--panel-2), var(--panel)); }
.br-hh-dots { right: -4%; top: -30%; width: 50%; height: 130%; -webkit-mask: radial-gradient(circle at 100% 30%, #000, transparent 70%); mask: radial-gradient(circle at 100% 30%, #000, transparent 70%); }
.br-hh-h { z-index: 2; }
/* the GPU dragon, floated so the heading and the lead wrap around it */
.br-hh-pic { float: right; position: relative; z-index: 2; width: 132px; margin: 0 -10px 10px 18px; }
.br-hh-pic .br-fr { --fr-r: 14px; --fr-off: 6px; }
.br-hh-title p { position: relative; z-index: 2; margin-top: 12px; max-width: 680px; color: var(--soft); font-size: 14.5px; line-height: 1.7; }
.br-hh-title p b { color: var(--text); font-weight: 600; }
.br-hh-tags { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
/* the countdown: the round's clock in yellow on a gold-lit panel */
.br-hh-count { --cut: "16 0, 100% 0, 100%-16 100%, 0 100%"; margin-left: -8px; padding: 24px 34px 20px 38px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  background: radial-gradient(ellipse 80% 90% at 100% 0, rgba(240, 185, 11, .22), rgba(240, 185, 11, .04) 55%, transparent 75%), linear-gradient(180deg, #232830, var(--panel)); }
.br-cnt-dots { right: -12%; bottom: -30%; width: 70%; height: 110%; -webkit-mask: radial-gradient(circle at 100% 100%, #000, transparent 70%); mask: radial-gradient(circle at 100% 100%, #000, transparent 70%); }
.br-hh-big { position: relative; z-index: 2; margin-top: 16px; font: 700 46px/1.05 var(--f-num); color: var(--y); letter-spacing: .01em; white-space: nowrap; }
.br[data-lang="en"] .br-hh-big { font-size: 42px; letter-spacing: 0; }
.br-hh-meta { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 4px; margin-top: 14px; font: 500 13px/1.45 var(--f-sans); color: var(--soft); }
.br-hh-meta span::before { content: '▶ '; font-size: .75em; color: var(--y); } /* ▶ ships in the Noto SC core; ▸ fell back to a system font */
.br-hh-ctl { --cut: "16 0, 100% 0, 100% 100%, 0 100%"; margin-left: -8px; padding: 24px 24px 18px 36px; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(180deg, var(--panel-2), var(--panel)); }
.br-replay { align-self: flex-start; }
/* the demo's five stages: a segmented progress line */
.br-steps { list-style: none; padding: 0; margin-top: 20px; display: flex; gap: 4px; }
.br-steps li { flex: 1 1 0; min-width: 0; padding: 0 0 8px; font: 500 12px/1.2 var(--f-sans); color: var(--muted); text-align: center; white-space: nowrap; border-bottom: 2px solid var(--line); transition: color .2s, border-color .2s; }
.br-steps li.on { color: var(--y); border-bottom-color: var(--y); font-weight: 600; }
.br-steps li.done { color: var(--text); border-bottom-color: rgba(240, 185, 11, .45); }
.br-ctl-note { margin-top: 12px; font: 500 12px/1.45 var(--f-sans); color: var(--muted); }

/* decision spread */
.br-dec-wrap { margin-top: 14px; }
.br-dec { display: grid; grid-template-columns: minmax(0, 1fr) 430px; height: 612px; }
.br-dec > .br-pnl { height: 612px; }
.br-dec-net { --cut: "0 0, 100% 0, 100%-18 100%, 0 100%"; overflow: hidden;
  background: radial-gradient(ellipse 55% 65% at 64% 50%, rgba(240, 185, 11, .09), transparent 70%), repeating-linear-gradient(45deg, rgba(240, 185, 11, .035) 0 1px, transparent 1px 26px), repeating-linear-gradient(-45deg, rgba(240, 185, 11, .035) 0 1px, transparent 1px 26px), linear-gradient(180deg, #171A1F, #101317); }
.br-dnet { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.br-dec-cap { position: absolute; left: 26px; top: 22px; z-index: 6; display: flex; align-items: center; gap: 10px; }
.br-dec-arrow { font: 600 16px/1 var(--f-sans); color: var(--muted); }
.br-demo-stamp { right: 40px; top: 24px; }
.br-genes { position: absolute; left: 26px; top: 80px; width: 266px; z-index: 5; display: flex; flex-direction: column; gap: 10px; }
.br[data-lang="en"] .br-genes { width: 318px; } /* "Courier Hamster" fits on one line */
.br-gchip { --rc: var(--y); position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 10px; height: 76px; padding: 6px 12px 6px 9px;
  background: rgba(30, 35, 41, .94); border: 1px solid var(--line); border-radius: 10px; box-shadow: inset 3px 0 0 var(--rc), 0 6px 18px rgba(0, 0, 0, .35); transition: transform .3s var(--ease), opacity .4s, border-color .25s, box-shadow .25s; }
.br-gc-av { position: relative; width: 54px; height: 54px; border-radius: 50%; overflow: hidden; border: 1.5px solid var(--rc);
  background: radial-gradient(circle at 50% 50%, rgba(240, 185, 11, .3), rgba(240, 185, 11, .05) 60%), #1A1E24; transition: filter .4s; }
.br-gc-mid { min-width: 0; }
.br-gc-mid b { display: block; font: 600 15px/1.25 var(--f-sans); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-gc-mid .br-sym { display: block; margin-top: 5px; color: var(--muted); }
.br-gc-sc { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; text-align: right; }
.br-gc-draw { min-width: 68px; font: 700 20px/1 var(--f-num); color: var(--y); }
.br-gc-jev { font: 500 12px/1 var(--f-num); color: var(--muted); white-space: nowrap; }
.br-gc-jev i { font-style: normal; color: var(--soft); }
.br-gchip.scan { transform: translateX(6px); border-color: rgba(240, 185, 11, .7); }
.br-gchip.win { transform: translateX(10px); z-index: 3; border-color: var(--y); box-shadow: inset 3px 0 0 var(--rc), 0 0 0 1px var(--y), 0 0 28px rgba(240, 185, 11, .35); }
.br-gchip.lose { opacity: .42; }
.br-gchip.lose .br-gc-av { filter: grayscale(.85); } /* art only, no text inside */
.br-gc-stamp { position: absolute; right: -8px; top: -10px; z-index: 4; padding: 4px 7px; font: 600 12px/1 var(--f-sans); color: var(--ink); background: var(--y); border-radius: 4px; white-space: nowrap; opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .3s var(--ease); box-shadow: 0 4px 12px rgba(0, 0, 0, .45); }
.br-gchip.win .br-gc-stamp { opacity: 1; transform: none; }
.br-layers { position: absolute; left: 330px; right: 372px; bottom: 20px; z-index: 6; display: flex; justify-content: space-around; gap: 8px; transition: opacity .3s; }
.br[data-lang="en"] .br-layers { left: 380px; }
.br-layers span { font: 500 12px/1 var(--f-sans); color: var(--muted); border: 1px dashed var(--line); padding: 6px 9px; background: rgba(11, 14, 17, .82); border-radius: 4px; white-space: nowrap; }
/* the draw strip takes the bottom of the spread from the draw on: the layer labels step aside */
.br-dec:is([data-phase="draw"], [data-phase="choose"], [data-phase="review"], [data-phase="crack"], [data-phase="boom"], [data-phase="born"]) .br-layers { opacity: 0; }

/* egg stage: the incubator shakes, cracks along a zig-zag, splits, a light burst, the hatchling pops (pictures only
   move; the SFX lettering is 36px and up) */
.br-stage { position: absolute; right: 34px; top: 24px; width: 320px; height: 500px; z-index: 4; }
.br-stage-glow { position: absolute; left: 50%; top: 44%; width: 440px; height: 440px; margin: -220px 0 0 -220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 185, 11, .3), rgba(240, 185, 11, .1) 34%, transparent 64%); transition: transform .6s; }
.br-stage-speed { inset: -40% -60%; --sx: 50%; --sy2: 44%; opacity: 0; transition: opacity .3s; }
.br-stage-egg { position: absolute; left: 50%; top: 44%; width: 264px; height: 264px; margin: -132px 0 0 -132px; z-index: 3; transform-origin: 50% 90%; }
.br-stage-egg > div { position: absolute; inset: 0; }
.br-stage-egg .br-fr { --fr-r: 20px; --fr-off: 8px; --fr-glow: .3; }
.br-egg-top, .br-egg-bot { opacity: 0; pointer-events: none; }
.br-egg-top { clip-path: polygon(0 0, 100% 0, 100% 48%, 96% 52%, 88% 45%, 80% 51%, 72% 44%, 64% 52%, 56% 45%, 48% 53%, 40% 44%, 32% 52%, 24% 45%, 16% 53%, 8% 46%, 0 50%); }
.br-egg-bot { clip-path: polygon(0 50%, 8% 46%, 16% 53%, 24% 45%, 32% 52%, 40% 44%, 48% 53%, 56% 45%, 64% 52%, 72% 44%, 80% 51%, 88% 45%, 96% 52%, 100% 48%, 100% 100%, 0 100%); }
.br-stage-egg > .br-egg-flash { inset: -50px; z-index: 6; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, #fff 0 18%, rgba(252, 213, 53, .9) 34%, rgba(240, 185, 11, .45) 52%, transparent 70%); }
.br-stage-baby { position: absolute; left: 50%; top: 43%; width: 244px; height: 244px; margin: -122px 0 0 -122px; z-index: 4; opacity: 0; }
.br-stage-baby .br-fr { --fr-off: 0px; --fr-line: var(--y); --fr-glow: .4; }
.br-stage-baby .br-fr > .pic-in { box-shadow: 0 0 0 4px rgba(240, 185, 11, .18), 0 0 46px rgba(240, 185, 11, .45); }
.br-stage-burst { position: absolute; left: 50%; top: 43%; width: 440px; height: 440px; margin: -220px 0 0 -220px; z-index: 1; transform: scale(0) rotate(-30deg); opacity: 0; }
.br-crackfx { right: -6px; top: 40px; font-size: 40px; --r: 12deg; transform: rotate(12deg) scale(0); opacity: 0; }
.br-dingfx { left: -32px; top: 22px; font-size: 42px; --r: -10deg; transform: rotate(-10deg) scale(0); opacity: 0; }
.br-boomfx { left: -44px; top: 34px; font-size: 54px; --r: -12deg; transform: rotate(-12deg) scale(0); opacity: 0; z-index: 40; }
.br-dec[data-phase="think"] .br-stage-egg { animation: brEggWob 1.6s ease-in-out infinite; }
.br-dec[data-phase="think"] .br-stage-glow { animation: brGlowP 1.2s ease-in-out infinite; }
.br-dec[data-phase="choose"] .br-stage-egg { animation: brEggShake .16s linear infinite; }
.br-dec[data-phase="choose"] .br-dingfx, .br-dec[data-phase="crack"] .br-dingfx { animation: brSfxPop .45s var(--ease) forwards; }
.br-dec[data-phase="crack"] .br-stage-egg { animation: brEggShake .1s linear infinite; }
.br-dec[data-phase="crack"] .br-egg-whole .br-crack path { stroke-dashoffset: 0; transition: stroke-dashoffset .5s ease-out; }
.br-dec[data-phase="crack"] .br-crackfx { animation: brSfxPop .4s var(--ease) forwards; }
.br-dec[data-phase="boom"] .br-boomfx, .br-dec[data-phase="born"] .br-boomfx { animation: brSfxPop .5s var(--ease) forwards; }
.br-dec[data-phase="boom"] .br-dingfx, .br-dec[data-phase="born"] .br-dingfx,
.br-dec[data-phase="boom"] .br-crackfx, .br-dec[data-phase="born"] .br-crackfx { opacity: 0; }
.br-dec[data-phase="boom"] .br-egg-whole, .br-dec[data-phase="born"] .br-egg-whole { opacity: 0; }
.br-dec[data-phase="boom"] .br-egg-top, .br-dec[data-phase="born"] .br-egg-top { animation: brTopFly .9s cubic-bezier(.2, .7, .3, 1) forwards; }
.br-dec[data-phase="boom"] .br-egg-bot, .br-dec[data-phase="born"] .br-egg-bot { animation: brBotDrop .9s cubic-bezier(.4, 0, .7, .4) forwards; }
.br-dec[data-phase="boom"] .br-egg-flash, .br-dec[data-phase="born"] .br-egg-flash { animation: brFlash .6s ease-out forwards; }
.br-dec[data-phase="boom"] .br-stage-baby, .br-dec[data-phase="born"] .br-stage-baby { animation: brBabyPop .8s var(--ease) .12s both; }
.br-dec[data-phase="boom"] .br-stage-burst, .br-dec[data-phase="born"] .br-stage-burst { animation: brBurstIn .6s var(--ease) forwards, brBurstSpin 14s linear .6s infinite; }
.br-dec[data-phase="boom"] .br-stage-speed, .br-dec[data-phase="born"] .br-stage-speed { opacity: 1; }
.br-dec[data-phase="boom"] .br-stage-glow, .br-dec[data-phase="born"] .br-stage-glow { transform: scale(1.3); }
@keyframes brEggWob { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-3deg); } 40% { transform: rotate(2.5deg); } 60% { transform: rotate(-1.5deg); } 80% { transform: rotate(1deg); } }
@keyframes brEggShake { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-3px, 1px) rotate(-2.5deg); } 50% { transform: translate(3px, -1px) rotate(2.5deg); } 75% { transform: translate(-2px, 0) rotate(-1.5deg); } 100% { transform: translate(0, 0) rotate(0); } }
@keyframes brGlowP { 50% { transform: scale(1.1); } }
@keyframes brSfxPop { 0% { opacity: 0; transform: rotate(var(--r, 12deg)) scale(.3); } 100% { opacity: 1; transform: rotate(var(--r, 12deg)); } }
@keyframes brTopFly { 0% { opacity: 1; transform: none; } 55% { opacity: 1; } 100% { opacity: 0; transform: translate(96px, -170px) rotate(28deg); } }
@keyframes brBotDrop { 0% { opacity: 1; transform: none; } 55% { opacity: 1; } 100% { opacity: 0; transform: translate(-44px, 160px) rotate(-14deg); } }
@keyframes brFlash { 0% { opacity: 0; transform: scale(.5); } 22% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes brBabyPop { 0% { opacity: 0; transform: scale(.1) translateY(80px); } 60% { opacity: 1; transform: scale(1.08) translateY(-10px); } 100% { opacity: 1; transform: none; } }
@keyframes brBurstIn { 0% { opacity: 0; transform: scale(.1) rotate(-40deg); } 100% { opacity: 1; transform: none; } }
@keyframes brBurstSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* the 20-minute review (示意): a countdown badge on the incubator (upright) */
.br-review { position: absolute; right: -10px; top: 26px; z-index: 35; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 13px 8px;
  background: rgba(11, 14, 17, .94); border: 1px solid var(--y); border-radius: 8px; box-shadow: 0 0 24px rgba(240, 185, 11, .25), 0 8px 20px rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transition: opacity .25s; }
.br-review b { font: 600 12px/1 var(--f-sans); color: var(--y); letter-spacing: .04em; }
.br-review-t { font: 700 28px/1 var(--f-num); color: var(--text); }
.br-review small { font: 500 12px/1.1 var(--f-sans); color: var(--soft); }
.br-dec[data-phase="review"] .br-review { opacity: 1; visibility: visible; }

/* the block-hash draw (示意): appears once JEV has handed in the odds (.br-draw-on, set by the demo) */
.br-draw { position: absolute; right: 34px; bottom: 14px; z-index: 7; width: 440px; padding: 11px 13px 11px; background: rgba(11, 14, 17, .95); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .5); transition: opacity .3s; }
.br-draw:not(.br-draw-on) { opacity: 0; visibility: hidden; }
.br-draw-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.br-draw-hd b { font: 600 13px/1.2 var(--f-sans); color: var(--y); }
.br-draw-hd span { font: 500 12px/1 var(--f-num); color: var(--soft); }
/* the bar: segments in on-chain order; the needle is a pointer ABOVE the bar, so it never covers a % label */
.br-draw-bar { position: relative; display: flex; height: 24px; margin-top: 20px; background: #0B0E11; border-radius: 4px; }
.br-ds { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; background: var(--rc); border-right: 2px solid #0B0E11; opacity: .62; transition: opacity .3s; }
.br-ds:first-child { border-radius: 4px 0 0 4px; }
.br-ds:last-of-type { border-right: 0; border-radius: 0 4px 4px 0; }
.br-ds b { font: 600 12px/1 var(--f-num); color: #0B0E11; white-space: nowrap; }
.br-ds.br-ds-sm b { display: none; } /* too narrow for a label (the list shows every share) */
.br-ds.hit { opacity: 1; box-shadow: inset 0 0 0 2px #fff; }
.br-draw-needle { position: absolute; top: -16px; left: 0; width: 0; height: 13px; z-index: 2; pointer-events: none; }
.br-draw-needle::before { content: ''; position: absolute; left: -8px; top: 0; border-style: solid; border-width: 13px 8px 0; border-color: #0B0E11 transparent transparent; }
.br-draw-needle::after { content: ''; position: absolute; left: -6px; top: 1px; border-style: solid; border-width: 10px 6px 0; border-color: var(--y-hi) transparent transparent; }
.br-draw .br-odds-cap { margin-top: 7px; }
/* seed formula + the two values filled in at launch (示意) */
.br-draw-kv { margin: 6px 0 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 10px; }
.br-draw-kv > div { display: contents; }
.br-draw-kv dt { font: 500 12px/1.45 var(--f-sans); color: var(--muted); }
.br-draw-kv dd { margin: 0; font: 400 12px/1.45 var(--f-sans); color: var(--soft); min-width: 0; overflow-wrap: anywhere; }
.br-draw-res { margin-top: 6px; font: 600 13px/1.3 var(--f-num); color: var(--y); min-height: 17px; }
.br-draw-res:empty { display: none; }

/* AI panel: the doctor + typed bubbles */
.br-dec-ai { --cut: "18 0, 100% 0, 100% 100%, 0 100%"; margin-left: -8px; overflow: hidden;
  background: radial-gradient(ellipse 70% 55% at 80% 88%, rgba(240, 185, 11, .14), transparent 70%), linear-gradient(180deg, var(--panel-2), #14171C); }
.br-ai-dots { left: -10%; bottom: -10%; width: 70%; height: 60%; -webkit-mask: radial-gradient(circle at 0 100%, #000, transparent 70%); mask: radial-gradient(circle at 0 100%, #000, transparent 70%); }
.br-ai-cap { position: absolute; left: 40px; top: 22px; z-index: 6; }
.br-talk { position: absolute; left: 40px; right: 24px; top: 70px; height: 266px; z-index: 8; display: flex; flex-direction: column; justify-content: flex-end; gap: 24px;
  -webkit-mask: linear-gradient(transparent, #000 18%); mask: linear-gradient(transparent, #000 18%); }
.br-talk .br-bub { font-size: 15px; line-height: 1.55; padding: 11px 16px; border-radius: 16px; animation: brBubIn .3s ease-out both; }
@keyframes brBubIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* earlier bubbles recede into the panel (dark plate, text still ≥ 4.5:1) */
.br-talk .br-old { animation: none; font-size: 13.5px; background: #2B3139; color: var(--soft); box-shadow: none; }
.br-talk .br-old b { color: var(--text); background: none; }
.br-talk .br-old::after { display: none; }
.br-talk .br-think.br-old i { background: #2B3139; }
.br-talk .br-final { --bubbg: var(--y); background: var(--y); color: var(--ink); font-size: 17px; font-weight: 600; }
.br-talk .br-final b { color: var(--ink); background: none; font-weight: 700; }
.br-talk .br-final.br-old { background: #2B3139; color: var(--soft); font-size: 13.5px; font-weight: 500; }
.br-talk .br-final.br-old b { color: var(--text); }
.br-talk .br-think { align-self: flex-start; padding: 12px 20px; animation: brBubIn .3s ease-out both; }
.br-ai-doc { position: absolute; right: 26px; bottom: 24px; width: 232px; z-index: 6; }

/* birth reveal (示意) */
.br-born { margin-top: 14px; min-height: 220px; --cut: "0 0, 100%-14 0, 100% 100%, 0 100%"; overflow: hidden;
  background: radial-gradient(ellipse 40% 90% at 10% 50%, rgba(240, 185, 11, .12), transparent 70%), linear-gradient(180deg, var(--panel-2), var(--panel)); }
.br-born::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 30% 80% at 12% 50%, rgba(240, 185, 11, .2), transparent 70%); opacity: 0; transition: opacity .5s; }
.br-born.show::before { opacity: 1; }
.br-born-wait { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: 28px; padding: 12px 40px 12px 26px; transition: opacity .3s; }
.br-bw-av { justify-self: center; width: 150px; }
.br-bw-av .br-fr { --fr-off: 0px; --fr-glow: .32; }
.br-bw-main { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.br-bw-p { max-width: 640px; font: 400 15px/1.65 var(--f-sans); color: var(--soft); }
.br-born.show .br-born-wait { opacity: 0; visibility: hidden; }
.br-born-card { position: relative; z-index: 3; display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; align-items: center; gap: 28px; padding: 14px 40px 14px 26px; opacity: 0; visibility: hidden; }
.br-born.show .br-born-card { visibility: visible; animation: brIn .6s var(--ease) forwards; }
.br-bc-av { position: relative; width: 210px; height: 200px; display: grid; place-items: center; }
.br-bc-burst { position: absolute; inset: -30px -34px; }
.br-bc-pic { position: relative; width: 158px; --fr-off: 0px; --fr-line: var(--y); --fr-glow: .38; }
.br-bc-main, .br-bc-cta { position: relative; z-index: 1; } /* text always paints above the burst */
.br-bc-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.br-bc-name { margin-top: 12px; font: 700 40px/1.12 var(--f-sans); color: var(--text); letter-spacing: -.01em; }
.br[data-lang="zh"] .br-bc-name { letter-spacing: .02em; }
.br-bc-name .br-sym { font: 600 20px/1 var(--f-num); color: var(--y); margin-left: 6px; letter-spacing: .03em; }
.br-bc-story { margin-top: 8px; font: 400 15px/1.55 var(--f-sans); color: var(--soft); }
.br-bc-stats { display: grid; grid-template-columns: repeat(4, auto); gap: 8px 30px; margin-top: 16px; justify-content: start; }
.br-bc-stats div { display: flex; flex-direction: column; gap: 4px; }
.br-bc-stats span { font: 500 12px/1.2 var(--f-sans); color: var(--muted); }
.br-bc-stats b { font: 700 20px/1.15 var(--f-num); color: var(--text); }
.br-bc-stats b.br-nv { color: var(--nv); }
.br-bc-stats b.br-yv { color: var(--y); }
.br-bc-stats small { font: 400 12px/1.3 var(--f-sans); color: var(--muted); }
.br-bc-cta { display: flex; flex-direction: column; align-items: stretch; gap: 12px; max-width: 250px; }

/* JEV 出概率 / JEV odds */
.br-jev-sec { margin-top: 18px; }
.br-jev { --cut: "0 0, 100% 0, 100% 100%-14, 0 100%"; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 34px; padding: 34px 36px 38px 40px; overflow: hidden;
  background: radial-gradient(ellipse 45% 75% at 76% 50%, rgba(240, 185, 11, .12), transparent 70%), linear-gradient(180deg, var(--panel-2), var(--panel)); }
.br-jev-dots { left: -8%; top: -20%; width: 46%; height: 70%; -webkit-mask: radial-gradient(circle at 0 0, #000, transparent 70%); mask: radial-gradient(circle at 0 0, #000, transparent 70%); }
.br-jev-text { position: relative; z-index: 3; }
.br-jev-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.br-pw { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 4px 10px; font: 600 12px/1.2 var(--f-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--y); background: var(--y-tint); border: 1px solid rgba(240, 185, 11, .35); border-radius: 4px; white-space: nowrap; }
.br-model { font: 500 12px/1.4 var(--f-mono); color: var(--soft); padding: 5px 9px; border: 1px solid var(--line); background: rgba(43, 49, 57, .35); border-radius: 4px; }
.br-jev-h { margin-top: 20px; font-size: 56px; }
.br-jev-eq { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin-top: 18px; }
.br-jev-eq b { font: 600 15px/1 var(--f-sans); color: var(--text); background: var(--line); padding: 10px 13px; border-radius: 6px; }
.br-jev-eq b.br-eq-y { color: var(--ink); background: var(--y); }
.br-jev-eq .br-eqs { position: relative; flex: none; width: 18px; height: 11px; }
.br-jev-eq .br-eqs::before, .br-jev-eq .br-eqs::after { content: ''; position: absolute; left: 0; right: 0; height: 3px; border-radius: 2px; background: var(--muted); }
.br-jev-eq .br-eqs::before { top: 0; } .br-jev-eq .br-eqs::after { bottom: 0; }
.br-jev-p { margin-top: 18px; max-width: 620px; color: var(--soft); font-size: 15px; line-height: 1.75; }
.br-jev-p b { color: var(--y); font-weight: 600; }
.br-jev-feats { list-style: none; padding: 0; margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.br-jev-feats li { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 13px; background: rgba(11, 14, 17, .45); border: 1px solid var(--line); border-radius: 8px; }
.br-jev-feats li:nth-child(4) { border-color: rgba(240, 185, 11, .4); } /* veto only */
.br-jev-feats b { font: 600 15px/1.25 var(--f-sans); color: var(--y); }
.br-jev-feats span { font: 400 13px/1.55 var(--f-sans); color: var(--soft); }
.br-fine { margin-top: 16px; font: 400 12px/1.6 var(--f-sans); color: var(--muted); }

.br-jev-viz { position: relative; z-index: 2; min-height: 430px; }
.br-jv-net { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.br-jv-in { position: absolute; left: 0; top: 0; bottom: 0; width: 160px; z-index: 3; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.br-jv-card { --rc: var(--y); position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 9px; padding: 8px 10px 8px 9px;
  background: rgba(30, 35, 41, .95); border: 1px solid var(--line); border-radius: 10px; box-shadow: inset 3px 0 0 var(--rc), 0 6px 18px rgba(0, 0, 0, .35); }
.br-jv-art { position: relative; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; border: 1.5px solid var(--rc); background: radial-gradient(circle, rgba(240, 185, 11, .28), rgba(240, 185, 11, .04) 62%), #1A1E24; }
.br-jv-card b { font: 600 13.5px/1.25 var(--f-sans); color: var(--text); }
.br-jv-core { position: absolute; left: 50%; top: 50%; width: 140px; height: 140px; margin: -70px 0 0 -70px; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #2B3139, #15181D 72%); border: 1px solid rgba(240, 185, 11, .6); box-shadow: 0 0 0 6px rgba(240, 185, 11, .07), 0 0 46px rgba(240, 185, 11, .28); }
.br-jv-core b { position: relative; z-index: 2; font: 700 34px/1 var(--f-sans); letter-spacing: .04em; color: var(--y); }
.br-jv-core small { position: relative; z-index: 2; margin-top: 6px; font: 500 12px/1 var(--f-sans); color: var(--soft); }
.br-jv-halo { position: absolute; inset: -48px; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(240, 185, 11, .3), rgba(240, 185, 11, .06) 45%, transparent 68%); opacity: .45; transition: opacity .5s; }
.br-jv-ring { position: absolute; inset: -14px; border-radius: 50%; border: 1px dashed rgba(240, 185, 11, .55); pointer-events: none; }
.br-jev-viz.br-ask .br-jv-ring { animation: brSpin 2.6s linear infinite; border-color: var(--y); }
.br-jev-viz.br-on .br-jv-halo { opacity: 1; }
.br-jv-q { position: absolute; left: 50%; top: 4px; margin-left: -92px; width: 184px; z-index: 5; font-size: 14px; padding: 12px 16px; opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .3s ease-out; }
.br-jev-viz.br-ask .br-jv-q { opacity: 1; transform: none; }
.br-jv-out { position: absolute; right: 0; top: 0; bottom: 0; width: 216px; z-index: 3; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.br-jv-h { align-self: flex-start; margin-bottom: 2px; }
.br-jv-row { --rc: var(--y); display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n p" "b b" "d d"; gap: 6px 8px; align-items: end; padding: 9px 12px 9px;
  background: rgba(11, 14, 17, .88); border: 1px solid var(--line); border-radius: 8px; }
.br-jv-name { grid-area: n; font: 600 13px/1.2 var(--f-sans); color: var(--text); }
.br-jv-pct { grid-area: p; font: 700 17px/1 var(--f-num); color: var(--text); }
.br-jv-pct b { font-weight: 700; }
.br-jv-bar { grid-area: b; display: block; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.br-jv-bar i { display: block; height: 100%; width: 0; background: var(--rc); border-radius: 3px; transition: width .9s cubic-bezier(.2, .9, .3, 1); }
.br-jev-viz.br-on .br-jv-bar i { width: var(--v); }
.br-jv-draw { grid-area: d; font: 500 12px/1 var(--f-sans); color: var(--muted); }
.br-jv-draw b { color: var(--y); font-weight: 600; }
.br-jv-conf { font: 500 12px/1.3 var(--f-sans); color: var(--muted); }
.br-jv-conf b { color: var(--text); font-weight: 600; }
.br-jv-cap { display: block; }
.br-jv-stamp { left: 4px; top: 10px; }

/* four panels */
.br-how { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.br-step { padding: 0 20px 24px; }
.br-step:nth-child(1) { --cut: "0 0, 100% 0, 100%-10 100%, 0 100%"; }
.br-step:nth-child(2) { --cut: "10 0, 100% 0, 100% 100%, 0 100%"; }
.br-step:nth-child(3) { --cut: "0 0, 100% 0, 100% 100%-10, 0 100%"; }
.br-step:nth-child(4) { --cut: "0 10, 100% 0, 100% 100%, 0 100%"; }
/* the step number paints above the panel's stickers (.br-sfx is z-index 30) */
.br-step-n { position: absolute; left: 16px; top: 14px; z-index: 35; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font: 700 15px/1 var(--f-num); color: var(--ink); background: var(--y); box-shadow: 0 0 0 4px rgba(240, 185, 11, .16); }
.br-step-art { position: relative; height: 210px; margin: 0 -20px 16px; overflow: hidden; border-bottom: 1px solid var(--line);
  background: radial-gradient(ellipse 70% 80% at 50% 60%, rgba(240, 185, 11, .1), transparent 70%), #12151A; }
.br-step p { margin-top: 12px; font-size: 14px; line-height: 1.7; color: var(--soft); }
.br-step p b { color: var(--text); font-weight: 600; }
/* fanned mini cards (pictures + bars, no text, so they may be tilted) */
.br-mini-card { --rc: var(--y); position: absolute; width: 94px; height: 122px; padding: 7px 7px 0; background: #1E2329; border: 1px solid var(--line); border-radius: 10px; box-shadow: inset 0 2px 0 var(--rc), 0 10px 24px rgba(0, 0, 0, .5); }
.br-mini-pic { position: relative; display: block; width: 78px; height: 78px; border-radius: 6px; overflow: hidden; background: radial-gradient(circle, rgba(240, 185, 11, .3), rgba(240, 185, 11, .04) 62%), #15191E; }
.br-mini-bar { display: block; height: 6px; margin-top: 9px; border-radius: 3px; background: var(--rc); }
.br-mini-bar.br-mb2 { width: 60%; margin-top: 6px; background: var(--line); }
.br-how-say { position: absolute; left: 14px; top: 142px; z-index: 6; font-size: 14px; padding: 7px 14px; border-radius: 14px; }
.br-mini-net { position: absolute; inset: 0; width: 100%; height: 100%; }
.br-mini-jev { position: absolute; left: 74%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; z-index: 4; display: grid; place-items: center; border-radius: 50%;
  background: var(--y); box-shadow: 0 0 0 5px rgba(240, 185, 11, .16), 0 0 26px rgba(240, 185, 11, .45); font: 700 15px/1 var(--f-sans); letter-spacing: .04em; color: var(--ink); }
/* stickers stay inside their panel with ≥ 12 px to spare, rotation included */
.br-how-ding { right: 28px; top: 28px; font-size: 34px; transform: rotate(8deg); }
.br-how-egg { position: absolute; left: 50%; top: 22px; width: 160px; margin-left: -80px; animation: brEggShake .5s linear infinite; }
.br-how-egg .br-fr { --fr-r: 14px; --fr-off: 0px; }
.br-how-egg .br-crack path { stroke-dashoffset: 0; }
.br-how-crack { right: 22px; top: 32px; font-size: 34px; transform: rotate(10deg); }
.br-how-burst { position: absolute; left: 50%; top: 50%; width: 230px; height: 230px; margin: -115px 0 0 -115px; animation: brBurstSpin 30s linear infinite; }
.br-how-baby { position: absolute; left: 50%; top: 50%; width: 132px; margin: -70px 0 0 -66px; }
.br-how-baby .br-fr { --fr-off: 0px; --fr-line: var(--y); --fr-glow: .4; }
.br-how-chutes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.br-chute { animation: brChute 2.6s ease-in-out infinite; }
@keyframes brChute { 50% { transform: translate(0, 7px) rotate(5deg); } }
.br-how-boom { left: 18px; bottom: 26px; font-size: 38px; transform: rotate(-10deg); }

/* candidate pool (empty slots) + submit (disabled) */
.br-pool-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 540px; gap: 34px; align-items: start; }
.br-pool .br-sec-head, .br-submit .br-sec-head { margin-top: 36px; }
.br-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.br-slot { position: relative; display: flex; flex-direction: column; padding: 12px 14px 16px; min-height: 268px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: 12px; }
.br-slot-top { display: flex; justify-content: space-between; align-items: center; padding: 2px 2px 10px; }
.br-slot-no { font: 500 12px/1 var(--f-num); letter-spacing: .06em; color: var(--muted); }
.br-slot-q { width: 26px; height: 26px; border-radius: 50%; border: 1px dashed var(--line); display: grid; place-items: center; font: 600 13px/1 var(--f-sans); color: var(--muted); }
.br-slot-art { position: relative; height: 122px; display: grid; place-items: center; border: 1px dashed var(--line); border-radius: 8px; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .022) 0 8px, transparent 8px 16px); }
.br-slot-pic { width: 96px; --fr-r: 12px; --fr-off: 0px; --fr-line: var(--line); --fr-glow: .12; }
.br-slot-pic img { filter: grayscale(.85) brightness(.6); } /* picture only, no text inside */
.br-slot-t { margin-top: 12px; font: 600 18px/1.2 var(--f-sans); color: var(--text); }
.br-slot-s { margin-top: 4px; font: 400 12.5px/1.45 var(--f-sans); color: var(--muted); }
.br-love { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px; }
.br-love-l { font: 500 12px/1 var(--f-sans); color: var(--muted); white-space: nowrap; }
.br-love-bar { flex: 1; height: 8px; display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; } /* no text inside */
.br-love-bar i { background: var(--line); border-radius: 1px; }
.br-love-v { min-width: 18px; text-align: right; font: 600 13px/1 var(--f-num); color: var(--muted); }
.br-pool-note { margin: 18px 4px 0; font-size: 13.5px; line-height: 1.7; color: var(--muted); }
.br-pool-note b { color: var(--text); font-weight: 600; }
/* the sixth tile: how big a brood can get */
.br-slot-more { justify-content: center; gap: 8px; border: 1px dashed rgba(240, 185, 11, .5); background: radial-gradient(circle at 50% 30%, rgba(240, 185, 11, .1), transparent 70%), var(--panel); }
.br-more-n { font: 700 44px/1 var(--f-num); color: var(--y); }
.br-more-t { font: 600 17px/1.3 var(--f-sans); color: var(--text); }
/* live pool cards (gene text from the chain, written as text) */
.br-slot-live { min-height: 0; gap: 4px; }
.br-slot-live .br-slot-t { margin-top: 4px; font: 600 17px/1.3 var(--f-sans); overflow-wrap: anywhere; }
.br-slot-story { margin: 4px 0 0; font: 400 13px/1.55 var(--f-sans); color: var(--soft); overflow-wrap: anywhere; }

.br-sform { padding: 24px 26px 26px; }
.br-sform fieldset { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.br-sf-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.br-fld { position: relative; display: flex; flex-direction: column; gap: 8px; }
.br-fld > span { font: 600 14px/1.25 var(--f-sans); color: var(--text); }
.br-fld > span i { font: 400 12px/1.3 var(--f-sans); font-style: normal; color: var(--muted); margin-left: 6px; }
.br-fld input, .br-fld textarea { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; color: var(--text); font: 400 15px/1.4 var(--f-sans); padding: 11px 12px; outline: none; resize: none; transition: border-color .15s; }
.br-fld input:hover, .br-fld textarea:hover { border-color: #474D57; }
.br-fld input:focus-visible, .br-fld textarea:focus-visible { border-color: var(--y); }
.br-fld input::placeholder, .br-fld textarea::placeholder { color: var(--dim); opacity: 1; }
.br-fld input[name="name"] { padding-right: 62px; }
.br-fld textarea { padding-right: 70px; }
.br-fld-n { position: absolute; right: 12px; bottom: 13px; font: 500 12px/1 var(--f-num); font-style: normal; color: var(--muted); pointer-events: none; }
.br-fld-n.br-over { color: var(--down); }
.br-fld.br-bad input, .br-fld.br-bad textarea { border-color: var(--down); }
.br-sf-err { margin: -6px 0 0; font: 500 13px/1.5 var(--f-sans); color: var(--down); }
.br-sym-f b { position: absolute; left: 13px; bottom: 13px; font: 600 16px/1 var(--f-num); color: var(--y); }
.br-sym-f input { padding-left: 28px; font: 600 16px/1.3 var(--f-num); letter-spacing: .06em; color: var(--y); text-transform: uppercase; }
/* disabled until launch: labels and the fee stay at full strength; only the controls go quiet */
.br-sform fieldset[disabled] input, .br-sform fieldset[disabled] textarea { background: #12151A; border-style: dashed; color: var(--dim); cursor: not-allowed; }
.br-sform fieldset[disabled] .br-sym-f b { color: var(--dim); }
.br-sform fieldset[disabled] .br-ok input { cursor: not-allowed; }
.br-sform fieldset[disabled] .br-sbtn, .br-sform fieldset[disabled] .br-sbtn:hover, .br-sform fieldset[disabled] .br-sbtn:active { --bg: var(--line); --fg: #7E8794; cursor: not-allowed; }
.br-sf-row2 { grid-template-columns: minmax(0, 1fr) 200px; align-items: start; }
.br-sf-rules { padding: 12px 14px 13px; border: 1px solid var(--line); border-radius: 8px; background: rgba(11, 14, 17, .45); }
.br-sf-rules b { font: 600 14px/1.25 var(--f-sans); color: var(--y); }
.br-sf-rules ul { margin: 8px 0 0; padding: 0 0 0 16px; display: grid; gap: 6px; }
.br-sf-rules li { font: 400 13px/1.55 var(--f-sans); color: var(--soft); }
.br-sf-rules li::marker { color: var(--y); }
.br-preview { display: flex; flex-direction: column; gap: 8px; }
.br-pv-note { margin-top: 10px; font: 400 12px/1.5 var(--f-sans); color: var(--muted); }
.br-pv-lbl { font: 600 14px/1.25 var(--f-sans); color: var(--text); }
.br-pv-card { position: relative; padding: 9px 9px 12px; background: var(--panel-2); border: 1px solid rgba(240, 185, 11, .45); border-radius: 12px; box-shadow: 0 0 24px rgba(240, 185, 11, .1); }
.br-pv-top { display: flex; justify-content: space-between; align-items: center; padding: 3px 4px 8px; }
.br-pv-top span { font: 600 12px/1 var(--f-sans); letter-spacing: .04em; color: var(--y); }
.br-pv-top i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--y); color: var(--ink); font: 700 13px/1 var(--f-sans); font-style: normal; }
.br-pv-art { position: relative; height: 110px; display: grid; place-items: center; border-radius: 8px; overflow: hidden; background: #12151A; }
.br-pv-art .br-speed { --sx: 50%; --sy2: 50%; inset: -20%; }
.br-pv-pic { position: relative; z-index: 2; width: 86px; --fr-r: 10px; --fr-off: 0px; --fr-glow: .32; }
.br-pv-name { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-top: 10px; padding: 0 3px; }
.br-pv-name b { font: 600 16px/1.2 var(--f-sans); color: var(--text); }
.br-pv-card p { margin: 6px 3px 0; font: 400 13px/1.5 var(--f-sans); color: var(--soft); }
.br-fee { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; justify-content: space-between; padding: 12px 14px; border: 1px solid rgba(14, 203, 129, .35); border-radius: 8px; background: rgba(14, 203, 129, .06); }
.br-fee > div { display: flex; flex-direction: column; gap: 4px; }
.br-fee b { font: 600 15px/1.25 var(--f-sans); color: var(--up); }
.br-fee > div span { font: 400 12.5px/1.45 var(--f-sans); color: var(--muted); }
.br-ok { display: flex; align-items: center; gap: 8px; font: 500 13px/1.45 var(--f-sans); color: var(--text); }
.br-ok input { flex: none; width: 16px; height: 16px; accent-color: var(--y); }
.br-sbtn { align-self: flex-start; }
/* the lock: an upright status badge (centred by layout, no translate) */
.br-lock { position: absolute; right: 26px; bottom: 24px; z-index: 30; display: inline-flex; align-items: center; gap: 8px; width: max-content; max-width: 60%; padding: 10px 16px; cursor: pointer;
  font: 600 15px/1.25 var(--f-sans); color: var(--y); background: rgba(11, 14, 17, .92); border: 1px solid rgba(240, 185, 11, .6); border-radius: 6px; box-shadow: 0 0 22px rgba(240, 185, 11, .15); text-align: center; }
.br-lock::before { content: ''; flex: none; width: 15px; height: 15px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F0B90B' stroke-width='2.4' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat; }
.br-lock:hover { background: rgba(240, 185, 11, .1); }

/* =====================================================================================
   子币页 #/c/<id>
   ===================================================================================== */
.br-child { padding-top: 22px; }
.br-ch-hero { --cut: "0 0, 100% 0, 100%-18 100%, 0 100%"; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); min-height: 500px; overflow: hidden;
  background: radial-gradient(ellipse 45% 80% at 80% 55%, rgba(240, 185, 11, .16), transparent 68%), linear-gradient(180deg, #1A1D23, #111418); }
.br-ch-net { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  -webkit-mask: linear-gradient(90deg, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .2) 48%, #000 64%); mask: linear-gradient(90deg, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .2) 48%, #000 64%); }
.br-ch-dots { right: -8%; bottom: -20%; width: 60%; height: 80%; -webkit-mask: radial-gradient(circle at 100% 100%, #000, transparent 70%); mask: radial-gradient(circle at 100% 100%, #000, transparent 70%); }
.br-ch-speed { --sx: 78%; --sy2: 56%; }
.br-ch-text { position: relative; z-index: 4; padding: 40px 20px 46px 44px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.br-ch-cap { z-index: 5; }
.br-ch-id { margin-left: .3em; } /* the label is a flex item: its leading space is trimmed */
.br-ch-h { margin-top: 22px; font-size: 64px; line-height: 1.08; }
.br-ch-text p { margin-top: 20px; max-width: 580px; font-size: 16px; line-height: 1.75; color: var(--soft); }
.br-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.br-ch-art { position: relative; z-index: 3; min-height: 500px; }
.br-ch-glow { position: absolute; left: 50%; top: 50%; width: 460px; height: 460px; margin: -210px 0 0 -230px; border-radius: 50%; background: radial-gradient(circle, rgba(240, 185, 11, .26), rgba(240, 185, 11, .07) 40%, transparent 66%); }
.br-ch-inc { position: absolute; left: 50%; top: 50%; width: 360px; margin: -168px 0 0 -170px; z-index: 2; }
.br-ch-inc .br-fr { --fr-r: 22px; --fr-off: 9px; --fr-glow: .28; }
.br-ch-say { position: absolute; left: -16px; top: 30px; z-index: 6; max-width: 340px; }
.br-ch-sfx { right: 8%; bottom: 92px; font-size: 38px; transform: rotate(8deg); }
/* live child page: the coin's name (chain text) in the heading slot, facts as a definition list */
.br-ch-name { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; max-width: 100%; font: 700 56px/1.08 var(--f-sans); color: var(--text); overflow-wrap: anywhere; }
.br-ch-name .br-sym { font: 600 26px/1 var(--f-num); color: var(--y); }
.br-ch-facts { margin-top: 4px; }
.br-ch-art-live { --fr-r: 22px; }
.br-ch-bad .br-ch-h .br-l2 { color: var(--down); }
.br-soon-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.br-soon { display: flex; flex-direction: column; align-items: flex-start; padding: 0 20px 22px; }
.br-soon:nth-child(1) { --cut: "0 0, 100% 0, 100%-10 100%, 0 100%"; }
.br-soon:nth-child(2) { --cut: "10 0, 100% 0, 100% 100%, 0 100%"; }
.br-soon:nth-child(3) { --cut: "0 0, 100% 0, 100% 100%-10, 0 100%"; }
.br-soon:nth-child(4) { --cut: "0 10, 100% 0, 100% 100%, 0 100%"; }
.br-soon-art { position: relative; align-self: stretch; height: 196px; margin: 0 -20px 16px; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--line); background: #12151A; }
.br-soon-art .br-speed { --sx: 50%; --sy2: 50%; }
/* thumbnails (framed critters + one badge; no text inside pictures) */
.br-th { position: relative; z-index: 1; width: 136px; }
.br-th-pic { --fr-r: 14px; --fr-off: 6px; }
.br-th-q { position: absolute; right: -10px; top: -10px; z-index: 3; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--y); color: var(--ink); font: 700 17px/1 var(--f-sans); box-shadow: 0 0 0 4px rgba(240, 185, 11, .16); }
.br-th-coin { position: absolute; right: -12px; top: -12px; z-index: 3; width: 40px; height: 40px; }
.br-soon p { flex: 1; margin-top: 12px; font-size: 14px; line-height: 1.7; color: var(--soft); }
.br-soon p b { color: var(--text); font-weight: 600; }
.br-soon-tag { margin-top: 14px; padding: 5px 9px; font: 500 12px/1 var(--f-sans); color: var(--muted); border: 1px dashed var(--line); border-radius: 4px; }

/* =====================================================================================
   家族树 #/tree
   ===================================================================================== */
.br-tree { padding-top: 22px; }
.br-tr-top { display: grid; grid-template-columns: minmax(0, 1fr) 480px; }
.br-tr-top > .br-pnl { min-height: 184px; }
.br-tr-title { --cut: "0 0, 100% 0, 100%-16 100%, 0 100%"; padding: 22px 46px 24px 30px; overflow: hidden;
  background: radial-gradient(ellipse 60% 90% at 100% 0, rgba(240, 185, 11, .1), transparent 60%), linear-gradient(180deg, var(--panel-2), var(--panel)); }
.br-tr-h { z-index: 2; }
.br-tr-title p { position: relative; z-index: 2; margin-top: 12px; max-width: 800px; color: var(--soft); font-size: 14.5px; line-height: 1.7; }
.br-tr-title p b { color: var(--text); font-weight: 600; }
.br-tr-key { --cut: "16 0, 100% 0, 100% 100%, 0 100%"; margin-left: -8px; padding: 22px 26px 22px 38px;
  background: radial-gradient(ellipse 80% 90% at 100% 0, rgba(240, 185, 11, .16), transparent 70%), linear-gradient(180deg, #232830, var(--panel)); }
.br-tr-legend { list-style: none; padding: 0; margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; }
.br-tr-legend li { display: flex; align-items: center; gap: 10px; font: 500 13px/1.35 var(--f-sans); color: var(--text); }
.br-tr-legend li.br-lg-ghost { grid-column: 1 / -1; color: var(--soft); }
.br-ghost-dot { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px dashed var(--muted); background: rgba(132, 142, 156, .08); }
.br-tr-graph { margin-top: 14px; height: 690px; --cut: "0 0, 100% 0, 100% 100%-14, 0 100%"; overflow: hidden;
  background: radial-gradient(ellipse 60% 65% at 20% 42%, rgba(240, 185, 11, .1), transparent 70%), repeating-linear-gradient(45deg, rgba(240, 185, 11, .03) 0 1px, transparent 1px 28px), repeating-linear-gradient(-45deg, rgba(240, 185, 11, .03) 0 1px, transparent 1px 28px), linear-gradient(180deg, #15181D, #0E1115); }
.br-tr-field, .br-tr-net { position: absolute; inset: 0; width: 100%; height: 100%; }
.br-tr-field { z-index: 0; opacity: .8; }
.br-tr-net { z-index: 2; }
.br-tr-stamp { right: 24px; top: 22px; }
.br-tr-cols { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.br-tr-col { position: absolute; padding: 5px 9px; font: 600 12px/1 var(--f-sans); color: var(--soft); background: rgba(11, 14, 17, .86); border: 1px solid var(--line); border-radius: 4px; white-space: nowrap; }
.br-tr-col.br-tr-col0 { color: var(--y); border-color: rgba(240, 185, 11, .45); }
.br-tr-nodes { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.br-tn { position: absolute; left: 0; top: 0; isolation: isolate; }
.br-tn-mom { width: 176px; height: 176px; border-radius: 50%; }
.br-tn-pic { position: absolute; inset: 0; }
.br-tn-pic .br-fr { --fr-off: 0px; --fr-line: var(--y); --fr-glow: .34; }
.br-tn-pic .br-fr > .pic-in { box-shadow: 0 0 0 5px rgba(240, 185, 11, .14), 0 0 40px rgba(240, 185, 11, .35); }
/* the mother coin: the brand logo as a gold coin (a dark rim between the logo's yellow and the gold ring) */
.br-tn-pic .br-fr-coin > .pic-in { border: 3px solid #0B0E11; background: var(--y);
  box-shadow: 0 0 0 2px var(--y), 0 0 0 8px rgba(240, 185, 11, .12), 0 0 44px rgba(240, 185, 11, .38); }
/* name plate under the circle: centred by layout (no translate), upright text */
.br-tn-cap { position: absolute; left: -70px; right: -70px; top: calc(100% + 16px); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.br-tn-name { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 12px; background: var(--y); border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); white-space: nowrap; }
.br-tn-name b { font: 700 20px/1.1 var(--f-sans); color: var(--ink); }
.br-tn-sym { font: 600 13px/1 var(--f-num); color: var(--ink); letter-spacing: .03em; }
.br-tn-halo { position: absolute; inset: -60px; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(240, 185, 11, .28), rgba(240, 185, 11, .06) 45%, transparent 68%); }
.br-tn-ring { position: absolute; inset: -18px; z-index: -1; border-radius: 50%; border: 1px dashed rgba(240, 185, 11, .7); animation: brSpin 26s linear infinite; }
.br-tn-ghost { width: 66px; height: 66px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: rgba(24, 26, 32, .94); border: 1px dashed rgba(132, 142, 156, .6); }
.br-tn-ghost.br-tn-g2 { width: 60px; height: 60px; }
.br-tn-ghost.br-tn-g3 { width: 54px; height: 54px; }
.br-tn-ghost b { position: relative; z-index: 1; font: 700 18px/1 var(--f-sans); color: var(--soft); }
.br-tn-egg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; opacity: .2; filter: grayscale(.9) brightness(.8); } /* picture only */
.br-tn-ghost small { position: relative; z-index: 1; margin-top: 3px; font: 500 12px/1 var(--f-sans); color: var(--muted); }
.br-tn-ghost::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid rgba(240, 185, 11, .45); opacity: 0; animation: brGhost 2.8s ease-out infinite; animation-delay: var(--dl, 0s); pointer-events: none; }
.br-tn-ghost.br-ping::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--y); animation: brPing .7s ease-out forwards; pointer-events: none; }
@keyframes brGhost { 0% { opacity: 0; transform: scale(.86); } 30% { opacity: .9; } 100% { opacity: 0; transform: scale(1.32); } }
@keyframes brPing { 0% { opacity: 1; transform: scale(.92); } 100% { opacity: 0; transform: scale(1.5); } }
.br-tr-say { position: absolute; z-index: 6; max-width: 300px; font-size: 14.5px; }
.br-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.br-rule { padding: 24px 24px 26px 72px; min-height: 168px; }
.br-rule:nth-child(1) { --cut: "0 0, 100% 0, 100%-10 100%, 0 100%"; }
.br-rule:nth-child(2) { --cut: "10 0, 100% 0, 100% 100%, 0 100%"; }
.br-rule:nth-child(3) { --cut: "0 0, 100% 0, 100% 100%-10, 0 100%"; }
.br-rule-n { position: absolute; left: 24px; top: 24px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font: 700 15px/1 var(--f-num); color: var(--y); background: var(--y-tint); border: 1px solid rgba(240, 185, 11, .4); }
.br-rule p { margin-top: 14px; font-size: 14px; line-height: 1.7; color: var(--soft); }
.br-tr-more { margin-top: 20px; }

/* =====================================================================================
   孵化室 · how it stays fair / how to check it (also on the child page)
   ===================================================================================== */
.br-fair { --cut: "0 0, 100% 0, 100% 100%-14, 0 100%"; padding: 26px 30px 30px; overflow: hidden;
  background: radial-gradient(ellipse 50% 80% at 90% 8%, rgba(240, 185, 11, .1), transparent 70%), linear-gradient(180deg, var(--panel-2), var(--panel)); }
.br-fair-dots { right: -6%; top: -24%; width: 42%; height: 70%; -webkit-mask: radial-gradient(circle at 100% 0, #000, transparent 70%); mask: radial-gradient(circle at 100% 0, #000, transparent 70%); }
.br-fair-top { position: relative; z-index: 2; display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 26px; align-items: center; }
.br-fair-pic { width: 124px; }
.br-fair-pic .br-fr { --fr-r: 14px; --fr-off: 6px; }
.br-fair-lead { max-width: 1000px; font: 500 17px/1.65 var(--f-sans); color: var(--text); }
.br-fair-lead b { color: var(--y); font-weight: 600; }
.br-fair-rows { position: relative; z-index: 2; list-style: none; padding: 0; margin: 26px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.br-fair-row { position: relative; padding: 16px 16px 17px 58px; background: rgba(11, 14, 17, .45); border: 1px solid var(--line); border-radius: 10px; }
.br-fair-row:nth-child(4) { border-color: rgba(240, 185, 11, .4); }
.br-fair-row:nth-child(6) { border-color: rgba(132, 142, 156, .5); }
.br-fair-n { position: absolute; left: 16px; top: 15px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 700 14px/1 var(--f-num); color: var(--y); background: var(--y-tint); border: 1px solid rgba(240, 185, 11, .4); }
.br-fair-row b { display: block; font: 600 15px/1.35 var(--f-sans); color: var(--text); }
.br-fair-row p { margin-top: 7px; font: 400 13.5px/1.65 var(--f-sans); color: var(--soft); }
.br-fair-crit { position: relative; z-index: 2; margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.br-fair-crit > .br-cap { max-width: 100%; white-space: normal; }
.br-fair-q { font: 500 14.5px/1.55 var(--f-sans); color: var(--text); }
.br-fair-crit ul { list-style: none; padding: 0; margin: 0; flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.br-fair-crit li { font: 500 13px/1.3 var(--f-sans); color: var(--text); padding: 7px 11px; border: 1px solid var(--line); border-radius: 4px; background: rgba(43, 49, 57, .35); }

/* =====================================================================================
   孵化室 · rules & risks
   ===================================================================================== */
.br-risks { --cut: "0 0, 100%-14 0, 100% 100%, 0 100%"; padding: 26px 30px 24px; overflow: hidden;
  background: radial-gradient(ellipse 45% 80% at 0 100%, rgba(240, 185, 11, .08), transparent 70%), linear-gradient(180deg, var(--panel-2), var(--panel)); }
.br-risks-dots { left: -8%; bottom: -24%; width: 46%; height: 64%; -webkit-mask: radial-gradient(circle at 0 100%, #000, transparent 70%); mask: radial-gradient(circle at 0 100%, #000, transparent 70%); }
.br-risk-top { position: relative; z-index: 2; display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 26px; align-items: center; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.br-risks-pic { width: 132px; }
.br-risks-pic .br-fr { --fr-r: 14px; --fr-off: 6px; }
.br-risk-tax p { margin-top: 14px; max-width: 1000px; font: 400 15px/1.7 var(--f-sans); color: var(--soft); }
.br-risk-list { position: relative; z-index: 2; list-style: none; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 26px; }
.br-risk p { margin-top: 12px; font: 400 13.5px/1.7 var(--f-sans); color: var(--soft); }
.br-risk p b { color: var(--text); font-weight: 600; }
.br-risk-foot { position: relative; z-index: 2; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); font: 400 13px/1.65 var(--f-sans); color: var(--muted); }
.br-risk-foot b { color: var(--text); font-weight: 600; }

/* =====================================================================================
   K-line (DexScreener embed, or an honest empty state)
   ===================================================================================== */
.br-kl { --cut: "0 0, 100% 0, 100% 100%-12, 0 100%"; padding: 18px 20px 20px; }
.br-kl-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.br-kl-src { font: 500 12px/1 var(--f-sans); color: var(--muted); letter-spacing: .02em; }
.br-kl-frame { position: relative; margin-top: 16px; height: 480px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.br-kl-if { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; border: 0; color-scheme: dark; background: transparent; }
.br-kl-msg { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 0 20px; text-align: center; font: 500 14px/1.5 var(--f-sans); color: var(--muted); }
.br-kl-note { margin-top: 10px; font: 400 12.5px/1.5 var(--f-sans); color: var(--muted); }
.br-kl-note a { color: var(--y); text-decoration: underline; text-underline-offset: 3px; }
/* empty state: a blank chart grid (no fake candles) + the chart-watching panda */
.br-kl-empty { position: relative; margin-top: 16px; min-height: 220px; display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 28px; align-items: center; padding: 24px 28px; border: 1px dashed var(--line); border-radius: 8px;
  background: linear-gradient(rgba(43, 49, 57, .45) 1px, transparent 1px) 0 0 / 100% 38px, linear-gradient(90deg, rgba(43, 49, 57, .45) 1px, transparent 1px) 0 0 / 56px 100%, #101317; }
.br-kl-pic { width: 140px; }
.br-kl-pic .br-fr { --fr-r: 14px; --fr-off: 6px; }
.br-kl-big { display: block; font: 700 28px/1.2 var(--f-sans); color: var(--text); }
.br-kl-txt p { margin-top: 10px; max-width: 640px; font: 400 14.5px/1.7 var(--f-sans); color: var(--soft); }

/* =====================================================================================
   live (once the breeder is live): the round, its proof, banners, recent broods, born coins
   ===================================================================================== */
.br-live .br-sec-head { margin-top: 40px; }
.br-lv-banners { display: grid; gap: 8px; margin-bottom: 14px; }
.br-lv-ban { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 16px; background: rgba(240, 185, 11, .06); border: 1px solid rgba(240, 185, 11, .4); border-radius: 8px; font: 500 14px/1.55 var(--f-sans); color: var(--text); }
.br-lv-ban b { font-weight: 600; }
.br-lv-ban.br-warn { background: rgba(246, 70, 93, .07); border-color: rgba(246, 70, 93, .45); }
.br-lv-round { padding: 20px 22px 22px; }
.br-lv-hd { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.br-lv-st { padding: 5px 8px; font: 600 12px/1 var(--f-sans); color: var(--text); background: var(--line); border-radius: 4px; }
.br-st-open, .br-st-review { color: var(--ink); background: var(--y); }
.br-st-hatched { color: var(--ink); background: var(--up); }
.br-st-skipped, .br-st-vetoed, .br-st-expired, .br-st-dormant { color: var(--soft); background: rgba(132, 142, 156, .18); }
.br-lv-par { font: 500 13px/1.35 var(--f-sans); color: var(--muted); }
.br-lv-why { margin-top: 12px; padding: 10px 12px; border-left: 3px solid var(--y); background: var(--y-tint); border-radius: 0 6px 6px 0; font: 500 14px/1.6 var(--f-sans); color: var(--text); }
.br-lv-note { margin-top: 10px; font: 400 13px/1.6 var(--f-sans); color: var(--muted); }
.br-lv-tl { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.br-lv-tl li { display: flex; flex-direction: column; gap: 4px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; background: rgba(11, 14, 17, .45); }
.br-lv-tl li span { font: 500 12px/1.2 var(--f-sans); color: var(--muted); }
.br-lv-tl li b { font: 600 14px/1.25 var(--f-num); color: var(--text); }
.br-lv-tl li.br-past b { color: var(--muted); }
.br-lv-tl li.br-next { border-color: var(--y); box-shadow: 0 0 18px rgba(240, 185, 11, .15); }
.br-lv-left { font: 600 13px/1 var(--f-num); color: var(--y); }
.br-lv-odds { margin-top: 18px; }
.br-lv-odds h4, .br-lv-more h4, .br-lv-born h4 { margin: 0; font: 600 14px/1.4 var(--f-sans); color: var(--y); }
.br-lv-legend { display: flex; justify-content: flex-end; gap: 22px; margin-top: 6px; padding-right: 10px; font: 500 12px/1.2 var(--f-sans); color: var(--muted); }
.br-lv-legend span + span { color: var(--y); }
.br-lv-odds ol { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.br-lv-odds li { display: grid; grid-template-columns: 34px minmax(0, 1.5fr) minmax(70px, 1fr) 66px auto; align-items: center; gap: 10px; padding: 8px 10px; background: rgba(11, 14, 17, .45); border: 1px solid var(--line); border-radius: 6px; }
.br-lv-odds.br-lv-jv li { grid-template-columns: 34px minmax(0, 1.5fr) minmax(60px, 1fr) 62px 66px auto; }
.br-lv-odds li.br-win { border-color: var(--y); box-shadow: 0 0 18px rgba(240, 185, 11, .2); }
.br-lv-i { font: 500 12px/1 var(--f-num); color: var(--muted); }
.br-lv-nm { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.br-lv-nm b { font: 600 14px/1.35 var(--f-sans); color: var(--text); overflow-wrap: anywhere; }
.br-lv-src, .br-lv-clash { padding: 3px 5px; font: 500 12px/1 var(--f-sans); font-style: normal; color: var(--soft); border: 1px solid var(--line); border-radius: 3px; }
.br-lv-clash { color: var(--ink); background: var(--y); border-color: var(--y); }
.br-lv-pb { display: block; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.br-lv-pb i { display: block; height: 100%; width: var(--v); background: var(--y); border-radius: 3px; }
.br-lv-jev { font: 500 13px/1 var(--f-num); color: var(--muted); text-align: right; }
.br-lv-p { font: 700 15px/1 var(--f-num); color: var(--text); text-align: right; }
.br-lv-won { padding: 4px 6px; font: 600 12px/1 var(--f-sans); color: var(--ink); background: var(--y); border-radius: 4px; }
.br-lv-bar { margin-top: 26px; }
.br-lv-sum { margin-top: 8px; font: 500 12.5px/1.3 var(--f-num); color: var(--muted); }
.br-lv-odds .br-odds-cap { margin-top: 4px; }
.br-lv-kv { margin: 18px 0 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; }
.br-lv-kv > div { display: contents; }
.br-lv-kv dt { font: 500 12.5px/1.55 var(--f-sans); color: var(--muted); }
.br-lv-kv dd { margin: 0; min-width: 0; font: 400 13px/1.55 var(--f-sans); color: var(--text); }
.br-lv-kv code { font: 400 12.5px/1.55 var(--f-mono); color: var(--soft); word-break: break-all; }
.br-lv-kv a { color: var(--y); text-decoration: underline; text-underline-offset: 3px; }
.br-lv-verify { margin-top: 8px; }
.br-lv-vout { display: inline-block; margin: 8px 0 0 12px; font: 500 13px/1.45 var(--f-sans); color: var(--muted); }
.br-lv-vout.br-ok { color: var(--up); }
.br-lv-vout.br-no { color: var(--down); }
.br-lv-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.br-lv-more { margin-top: 20px; }
.br-lv-recent { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.br-lv-recent li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 10px; background: rgba(11, 14, 17, .45); border: 1px solid var(--line); border-radius: 6px; font: 400 13.5px/1.5 var(--f-sans); color: var(--soft); }
.br-lv-born { margin-top: 22px; }
.br-lv-born a { color: var(--y); text-decoration: underline; text-underline-offset: 3px; }
.br-live .br-kl { margin-top: 12px; }
.br-hh-clock { font-variant-numeric: tabular-nums; }
.br-kids { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.br-kid { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 14px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: 10px; transition: border-color .15s; }
.br-kid:hover, .br-kid:focus-visible { border-color: var(--y); }
.br-kid b { font: 600 15px/1.3 var(--f-sans); color: var(--text); overflow-wrap: anywhere; }
.br-kid small { flex-basis: 100%; font: 400 12px/1.4 var(--f-num); color: var(--muted); }

/* the decision spread stacks (net panel, then the doctor) below 1300 px: the gene column, the incubator and the
   draw strip need the whole width to stay clear of each other */
@media (max-width: 1300px) and (min-width: 761px) {
  .br-dec { grid-template-columns: 1fr; height: auto; }
  .br-dec > .br-dec-net { height: 640px; --cut: "0 0, 100% 0, 100% 100%-14, 0 100%"; }
  .br-dec > .br-dec-ai { height: 400px; margin: -4px 0 0; --cut: "0 14, 100% 0, 100% 100%, 0 100%"; }
  .br-layers { right: 300px; }
  .br-stage { right: 22px; width: 262px; }
  .br-stage-egg { width: 224px; height: 224px; margin: -112px 0 0 -112px; }
  .br-stage-baby { width: 214px; height: 214px; margin: -107px 0 0 -107px; }
  .br-stage-burst { width: 360px; height: 360px; margin: -180px 0 0 -180px; }
  .br-stage-glow { width: 380px; height: 380px; margin: -190px 0 0 -190px; }
  .br-draw { right: 22px; width: min(440px, calc(100% - 400px)); }
  .br-talk { right: 290px; height: 250px; }
  .br-ai-doc { width: 220px; bottom: 26px; }
}

/* =====================================================================================
   tablets (761–1100px)
   ===================================================================================== */
@media (max-width: 1100px) and (min-width: 761px) {
  .br-hh { grid-template-columns: minmax(0, 1fr) 340px; }
  .br-hh-count { padding-right: 28px; }
  .br-hh-big { font-size: 40px; }
  .br[data-lang="en"] .br-hh-big { font-size: 36px; }
  .br-hh > .br-hh-ctl { grid-column: 1 / -1; min-height: 0; margin: -4px 0 0; padding: 22px 26px 18px; --cut: "0 10, 100% 0, 100% 100%, 0 100%"; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
  .br-hh-ctl .br-steps { margin-top: 0; flex: 1 1 320px; }
  .br-hh-ctl .br-ctl-note { margin-top: 0; flex-basis: 100%; }
  .br-jev { grid-template-columns: 1fr; }
  .br-jev-viz { min-height: 410px; max-width: 660px; width: 100%; justify-self: center; }
  .br-how { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .br-pool-wrap { grid-template-columns: 1fr; gap: 0; }
  .br-ch-h { font-size: 52px; }
  .br-soon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .br-tr-top { grid-template-columns: 1fr; }
  .br-tr-top > .br-tr-key { margin: -4px 0 0; --cut: "0 12, 100% 0, 100% 100%, 0 100%"; padding-left: 30px; }
  .br-tr-legend { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .br-rules { grid-template-columns: 1fr; }
  .br-jev-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .br-fair-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .br-risk-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .br-lv-tl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =====================================================================================
   phones (≤ 760px)
   ===================================================================================== */
@media (max-width: 760px) {
  .br { font-size: 14px; }
  .br-hatch, .br-child, .br-tree { padding-top: 12px; }
  .br-sec { padding: 0 14px; }
  .br-sec-head { margin: 44px 0 16px; gap: 8px 12px; }
  .br-h-sec { font-size: 24px; }
  .br-h1 { font-size: 36px; }
  .br-cap { font-size: 13px; padding: 4px 9px; }
  .br-btn { font-size: 15px; padding: 0 16px; }
  .br-btn.br-sm { font-size: 13.5px; }
  .br-sfx { font-size: 36px; }
  .br-bub { font-size: 14.5px; padding: 10px 14px; border-radius: 14px; }

  /* hatch: header */
  .br-hh { grid-template-columns: 1fr; }
  .br-hh > .br-pnl { min-height: 0; }
  .br-hh-title { padding: 18px 16px 24px; --cut: "0 0, 100% 0, 100% 100%-12, 0 100%"; }
  .br-hh-pic { width: 92px; margin: 2px 0 8px 12px; }
  .br-hh-title p { font-size: 13.5px; line-height: 1.65; margin-top: 10px; }
  .br-hh-tags { gap: 6px; margin-top: 12px; }
  .br-tag { font-size: 12px; }
  .br-hh > .br-hh-count { margin: -4px 0 0; padding: 24px 16px 18px; --cut: "0 12, 100% 0, 100% 100%-10, 0 100%"; }
  .br-hh-big { font-size: 38px; margin-top: 12px; }
  .br[data-lang="en"] .br-hh-big { font-size: 34px; }
  .br-hh > .br-hh-ctl { margin: -4px 0 0; padding: 22px 14px 14px; --cut: "0 10, 100% 0, 100% 100%, 0 100%"; }
  .br-hh-ctl .br-replay { align-self: stretch; }
  .br-steps { margin-top: 16px; }

  /* hatch: decision — a column on phones: genes → the net → the incubator → the draw strip → stamp */
  .br-dec { grid-template-columns: 1fr; height: auto; }
  .br-dec > .br-dec-net { height: auto; display: flex; flex-direction: column; padding: 60px 10px 20px; --cut: "0 0, 100% 0, 100% 100%-14, 0 100%"; }
  .br-dec-cap { left: 12px; right: 12px; top: 16px; gap: 6px; flex-wrap: wrap; }
  .br-dec-cap .br-cap { font-size: 12px; padding: 4px 8px; }
  .br-dec-arrow { font-size: 14px; }
  .br-demo-stamp { position: relative; right: auto; top: auto; order: 9; align-self: flex-start; margin: 18px 0 0 4px; }
  .br[data-lang] .br-genes { width: auto; } /* beats the desktop en width */
  .br-genes { position: relative; left: auto; right: auto; top: auto; order: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
  .br-gchip { grid-template-columns: 1fr; justify-items: center; align-content: start; height: auto; min-height: 120px; gap: 5px; padding: 8px 3px 8px; border-radius: 10px; box-shadow: inset 0 3px 0 var(--rc), 0 6px 18px rgba(0, 0, 0, .35); }
  .br-gc-av { width: 40px; height: 40px; }
  .br-gc-mid { width: 100%; text-align: center; }
  .br-gc-mid b { font: 600 12px/1.25 var(--f-sans); white-space: nowrap; overflow: visible; text-overflow: clip; }
  .br[data-lang="en"] .br-gc-mid b { white-space: normal; }
  .br-gc-mid .br-sym { display: none; }
  .br-gc-sc { align-items: center; gap: 4px; text-align: center; }
  .br-gc-draw { min-width: 0; font-size: 15px; }
  .br-gchip.scan, .br-gchip.win { transform: translateY(-4px); }
  .br-gchip.win { box-shadow: inset 0 3px 0 var(--rc), 0 0 0 1px var(--y), 0 0 22px rgba(240, 185, 11, .35); }
  .br-gc-stamp { right: -4px; top: -14px; }
  .br-layers { display: none; }
  .br-stage { position: relative; left: auto; right: auto; top: auto; bottom: auto; order: 3; width: 250px; height: 290px; margin: 132px auto 0; }
  .br-stage-egg { width: 200px; height: 200px; margin: -100px 0 0 -100px; top: 54%; }
  .br-stage-egg .br-fr { --fr-r: 16px; --fr-off: 6px; }
  .br-stage-baby { width: 196px; height: 196px; margin: -98px 0 0 -98px; top: 52%; }
  .br-stage-burst { width: 320px; height: 320px; margin: -160px 0 0 -160px; top: 52%; }
  .br-stage-glow { width: 320px; height: 320px; margin: -160px 0 0 -160px; top: 54%; }
  .br-crackfx { font-size: 36px; right: -16px; top: 16px; }
  .br-dingfx { font-size: 36px; left: -22px; top: 8px; }
  .br-boomfx { font-size: 46px; left: -30px; top: -4px; }
  .br-review { right: -8px; top: 20px; padding: 7px 10px 6px; }
  .br-review-t { font-size: 24px; }
  /* the draw strip has its own row under the incubator; before the draw it waits, greyed (no labels, no needle) */
  .br-draw, .br-draw:not(.br-draw-on) { position: relative; left: auto; right: auto; top: auto; bottom: auto; order: 4; width: auto; margin: 16px 0 0; opacity: 1; visibility: visible; }
  .br-draw:not(.br-draw-on) .br-ds { background: var(--line); opacity: 1; }
  .br-draw:not(.br-draw-on) .br-ds b, .br-draw:not(.br-draw-on) .br-draw-needle { visibility: hidden; }
  .br-draw-kv { grid-template-columns: 1fr; gap: 0; }
  .br-draw-kv dd { margin-bottom: 5px; }
  .br-draw-res:empty { display: block; } /* keeps its line while waiting: no jump below when the result appears */
  .br-dec > .br-dec-ai { height: 500px; margin: -4px 0 0; --cut: "0 14, 100% 0, 100% 100%, 0 100%"; }
  .br-ai-cap { left: 14px; top: 30px; }
  .br-talk { left: 14px; right: 14px; top: 76px; height: 236px; gap: 22px; }
  .br-talk .br-bub { font-size: 14.5px; }
  .br-talk .br-old { font-size: 13px; }
  .br-talk .br-final { font-size: 16px; }
  .br-talk .br-think { font-size: 13.5px; }
  .br-talk > :nth-last-child(n+3) { display: none; } /* phones: the last two bubbles only */
  .br-ai-doc { width: 150px; right: 18px; bottom: 18px; }
  .br-doc-tag { font-size: 12px; left: -8px; bottom: 10px; }
  .br-doc-emo { width: 36px; height: 36px; font-size: 20px; left: -20px; top: 30px; }
  .br-born { min-height: 0; --cut: "0 0, 100% 0, 100% 100%, 0 100%"; }
  .br-born-wait { position: static; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; padding: 20px 16px 22px; align-items: start; }
  .br-bw-av { width: 88px; }
  .br-bw-main { gap: 10px; }
  .br-bw-p { font-size: 13.5px; line-height: 1.6; }
  .br-born.show .br-born-wait { display: none; }
  .br-born-card { grid-template-columns: 1fr; gap: 10px; padding: 16px 16px 22px; display: none; }
  .br-born.show .br-born-card { display: grid; }
  .br-bc-av { width: 170px; height: 160px; margin: 10px auto 14px; }
  .br-bc-pic { width: 136px; }
  .br-bc-burst { inset: -16px -26px; }
  .br-bc-name { font-size: 30px; }
  .br-bc-name .br-sym { font-size: 17px; }
  .br-bc-stats { grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  .br-bc-cta { flex-direction: row; flex-wrap: wrap; align-items: center; max-width: none; }

  /* hatch: JEV */
  .br-jev { grid-template-columns: 1fr; gap: 24px; padding: 24px 16px 28px; --cut: "0 0, 100% 0, 100% 100%-10, 0 100%"; }
  .br-jev-h { font-size: 40px; margin-top: 16px; }
  .br-jev-eq b { font-size: 14px; padding: 9px 10px; }
  .br-jev-p { font-size: 14px; line-height: 1.7; }
  .br-jev-feats { grid-template-columns: 1fr; }
  .br-jev-viz { min-height: 620px; }
  .br-jv-in { right: 0; bottom: auto; width: auto; height: 120px; flex-direction: row; justify-content: space-between; gap: 6px; }
  .br-jv-card { flex: 1 1 0; min-width: 0; grid-template-columns: 1fr; justify-items: center; gap: 5px; padding: 9px 4px 9px; text-align: center; box-shadow: inset 0 3px 0 var(--rc), 0 6px 18px rgba(0, 0, 0, .35); }
  .br-jv-card b { font-size: 12px; }
  .br-jv-core { top: 238px; width: 124px; height: 124px; margin: -62px 0 0 -62px; }
  .br-jv-core b { font-size: 30px; }
  .br-jv-q { top: 130px; left: auto; right: 0; margin: 0; width: 128px; font-size: 13px; padding: 10px 12px; }
  .br-jv-out { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 296px; justify-content: flex-end; gap: 8px; }
  .br-jv-stamp { left: -4px; right: auto; bottom: auto; top: -14px; } /* on the first card's corner, never over the bubble */

  /* hatch: four panels, pool, form */
  .br-how { grid-template-columns: 1fr; gap: 12px; }
  .br-step-art { height: 196px; }
  .br-pool-wrap { grid-template-columns: 1fr; gap: 0; }
  .br-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .br-slot { min-height: 236px; padding: 10px 11px 14px; }
  .br-slot-art { height: 96px; }
  .br-slot-pic { width: 76px; }
  .br-slot-t { font-size: 16px; }
  .br-love-l { display: none; }
  .br-more-n { font-size: 38px; }
  .br-more-t { font-size: 15px; }
  .br-sform { padding: 18px 14px 22px; }
  .br-sf-row, .br-sf-row2 { grid-template-columns: 1fr; }
  .br-preview { display: none; }
  .br-lock { position: relative; right: auto; bottom: auto; display: flex; justify-content: center; max-width: none; width: 100%; margin: 18px 0 2px; font-size: 14px; }

  /* child */
  .br-ch-hero { grid-template-columns: 1fr; --cut: "0 0, 100% 0, 100% 100%-14, 0 100%"; min-height: 0; }
  .br-ch-text { padding: 22px 16px 10px; }
  .br-ch-h { font-size: 40px; margin-top: 16px; }
  .br-ch-text p { font-size: 14.5px; margin-top: 14px; }
  .br-cta { gap: 10px; margin-top: 20px; }
  .br-ch-art { min-height: 410px; }
  .br-ch-inc { width: 246px; margin: -112px 0 0 -118px; top: 52%; }
  .br-ch-glow { width: 340px; height: 340px; margin: -150px 0 0 -170px; }
  .br-ch-say { left: 14px; top: 8px; max-width: 210px; font-size: 14px; }
  .br-ch-sfx { right: 18px; bottom: 104px; font-size: 34px; }
  .br-ch-name { font-size: 36px; }
  .br-ch-name .br-sym { font-size: 20px; }
  .br-ch-net { -webkit-mask: linear-gradient(180deg, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .2) 46%, #000 60%); mask: linear-gradient(180deg, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .2) 46%, #000 60%); }
  .br-soon-grid { grid-template-columns: 1fr; gap: 12px; }
  .br-soon { display: grid; grid-template-columns: 124px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 14px; padding: 14px 14px 16px 0; align-items: start; }
  .br-soon-art { grid-row: 1 / 4; align-self: stretch; height: auto; min-height: 150px; margin: -14px 0 -16px; border-bottom: 0; border-right: 1px solid var(--line); }
  .br-th { width: 90px; }
  .br-th-q { right: -8px; top: -8px; width: 28px; height: 28px; font-size: 14px; }
  .br-th-coin { right: -10px; top: -10px; width: 32px; height: 32px; }
  .br-soon .br-cap { justify-self: start; }
  .br-soon p { margin-top: 10px; font-size: 13.5px; }
  .br-soon-tag { justify-self: start; margin-top: 10px; }

  /* tree */
  .br-tr-top { grid-template-columns: 1fr; }
  .br-tr-top > .br-pnl { min-height: 0; }
  .br-tr-title { padding: 18px 16px 24px; --cut: "0 0, 100% 0, 100% 100%-12, 0 100%"; }
  .br-tr-title p { font-size: 13.5px; }
  .br-tr-top > .br-tr-key { margin: -4px 0 0; padding: 22px 16px 18px; --cut: "0 12, 100% 0, 100% 100%, 0 100%"; }
  .br-tr-legend { gap: 10px 12px; }
  .br-tr-legend li { font-size: 12.5px; }
  .br-tr-graph { height: 800px; margin-top: 12px; }
  .br-tr-stamp { right: 12px; top: 14px; }
  .br-tn-mom { width: 136px; height: 136px; }
  .br-tn-cap { top: calc(100% + 12px); gap: 6px; }
  .br-tn-name { padding: 5px 10px; }
  .br-tn-name b { font-size: 18px; }
  .br-tn-sym { font-size: 12.5px; }
  .br-tn-ghost { width: 56px; height: 56px; }
  .br-tn-ghost.br-tn-g2 { width: 52px; height: 52px; }
  .br-tn-ghost.br-tn-g3 { width: 48px; height: 48px; }
  .br-tn-ghost b { font-size: 16px; }
  .br-tr-say { max-width: none; font-size: 14px; }
  .br-rules { grid-template-columns: 1fr; gap: 12px; }
  .br-rule { padding: 18px 16px 20px 64px; min-height: 0; }
  .br-rule-n { left: 18px; top: 18px; }
  .br-kids { grid-template-columns: 1fr; }

  /* fair / rules & risks / K-line / live */
  .br-fair { padding: 20px 14px 22px; --cut: "0 0, 100% 0, 100% 100%-10, 0 100%"; }
  .br-fair-top { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: start; }
  .br-fair-pic { width: 84px; }
  .br-fair-pic .br-fr { --fr-off: 4px; }
  .br-fair-lead { font-size: 15px; line-height: 1.6; }
  .br-fair-rows { grid-template-columns: 1fr; gap: 10px; margin-top: 18px; }
  .br-fair-row { padding: 14px 13px 15px 52px; }
  .br-fair-n { left: 13px; top: 13px; }
  .br-fair-q { font-size: 14px; }
  .br-risks { padding: 20px 14px 20px; --cut: "0 0, 100% 0, 100% 100%, 0 100%"; }
  .br-risk-top { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: start; }
  .br-risks-pic { width: 84px; }
  .br-risks-pic .br-fr { --fr-off: 4px; }
  .br-risk-tax p { margin-top: 10px; font-size: 14px; line-height: 1.65; }
  .br-risk-list { grid-template-columns: 1fr; gap: 18px; }
  .br-kl { padding: 14px 12px 16px; }
  .br-kl-frame { height: 420px; }
  .br-kl-empty { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; padding: 16px 14px; min-height: 0; align-items: start; }
  .br-kl-pic { width: 84px; }
  .br-kl-pic .br-fr { --fr-off: 4px; }
  .br-kl-big { font-size: 22px; }
  .br-kl-txt p { margin-top: 8px; font-size: 13.5px; }
  .br-lv-round { padding: 16px 12px 18px; }
  .br-lv-tl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .br-lv-legend { display: none; }
  .br-lv-odds li, .br-lv-odds.br-lv-jv li { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .br-lv-i { grid-row: 1 / 3; align-self: start; }
  .br-lv-nm { grid-column: 2; grid-row: 1; }
  .br-lv-p { grid-column: 3; grid-row: 1; }
  .br-lv-pb { grid-column: 2 / 4; grid-row: 2; }
  .br-lv-jev { grid-column: 2 / 4; grid-row: 3; text-align: left; }
  .br-lv-jev::before { content: 'JEV '; }
  .br-lv-won { grid-column: 2 / 4; justify-self: start; }
  .br-lv-kv { grid-template-columns: 1fr; gap: 0; }
  .br-lv-kv dd { margin-bottom: 9px; }
}

/* small phones: the six demo genes as a 3 × 2 grid, names on one line */
@media (max-width: 600px) {
  .br-genes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px 6px; margin: 0 -3px; }
  .br-gchip { min-height: 0; gap: 4px; padding: 9px 4px 8px; }
  .br-gc-mid b, .br[data-lang] .br-gc-mid b { font: 600 12px/1.25 var(--f-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .br-gc-stamp { right: -4px; top: -14px; }
}

@media (prefers-reduced-motion: reduce) {
  .br *, .br *::before, .br *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition: none !important; }
  .br .br-rv { opacity: 1; }
}

/* Actual family balances: one vault, separately accounted funds. */
.br-funds { margin: 20px 0 28px; padding: 22px; background: #101b2b; border: 1px solid #354459; border-top: 3px solid #f0b90b; }
.br-funds .br-sec-head { flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.br-funds h3 { margin: 0; color: #f3f5f8; font: 700 24px/1.25 var(--f-sans); }
.br-funds .br-lv-kv { margin: 0 0 18px; }
.br-funds-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.br-fund { min-width: 0; padding: 16px; background: #19273a; border: 1px solid #354459; color: #f3f5f8; }
.br-fund span { display: block; color: #cad3df; font: 600 13px/1.5 var(--f-sans); }
.br-fund strong { display: block; margin: 8px 0 3px; font-size: clamp(18px, 2.5vw, 26px); overflow-wrap: anywhere; }
.br-fund small { color: #a8b7c9; font-size: 12px; }
.br-fund-main { border-color: #a77d20; background: #29291e; }
.br-fund-main strong { color: #fcd535; }
.br-funds-totals { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 18px 0 0; font-size: 12px; color: #bac8d8; }
.br-funds-totals b { color: #f3f5f8; }
.br-funds-at { display: block; margin-top: 10px; color: #a8b7c9; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .br-funds { padding: 16px 12px; }
  .br-funds-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .br-fund { padding: 13px 10px; }
  .br-funds .br-kicker { white-space: normal; }
}