emitted 4809 chars to stdout
/* Auto-generated by scripts/extract-broadside-runtime.py biostate-dark — DO NOT hand-edit.
 * Source: html_gen_prompt.py _BIOSTATE_DARK_EXTRA_TOKENS + _BIOSTATE_DARK_STAT_CARD_CSS
 * Loaded by editor.html so editor + viewer render biostate-dark decks
 * even when the saved markup lost the prompt-injected <style> block.
 * (Rainy 2026-05-29 — AI gen for these 4 templates dropped prompt CSS.)
 */

[data-template="biostate-dark"] {

  /* ══════════════════════════════════════════════════════════════
     biostate-dark v2 design system — full token sync (Rainy 2026-05-05)
     Source of truth: design-specs/biostate-dark.html (in repo, see README)
     Section A (color) + Section B (typography) + card anatomy.
     1:1 复刻 spec,数值不改。
     ══════════════════════════════════════════════════════════════ */

  /* ── FONT FAMILIES (spec L7+L121 — Manrope) ── */
  --font-heading: 'Manrope', system-ui, sans-serif !important;
  --font-body: 'Manrope', system-ui, sans-serif !important;
  --font-mono: 'Manrope', system-ui, sans-serif !important;

  /* ── COLOR · BACKGROUNDS ────────────────────────────────────── */
  --bg-page: #080b12 !important;
  --bg-base: #0d1117 !important;
  --metal-1: #1a1f2e !important;
  --metal-2: #1e2535 !important;
  --metal-3: #232a3a !important;
  --metal-4: #1a2540 !important;

  /* ── COLOR · GLASS EFFECTS ──────────────────────────────────── */
  --glass-border: rgba(120,200,180,0.18) !important;
  --glass-border-bright: rgba(100,220,180,0.38) !important;
  --glass-shine: rgba(180,240,220,0.07) !important;

  /* ── COLOR · ACCENT PALETTE ─────────────────────────────────── */
  --teal: #3dd6a3 !important;
  --teal-dim: rgba(61,214,163,0.15) !important;
  --teal-glow: rgba(61,214,163,0.08) !important;
  --teal-border: rgba(61,214,163,0.30) !important;

  --purple: #a78bfa !important;
  --purple-dim: rgba(167,139,250,0.15) !important;
  --purple-border: rgba(167,139,250,0.30) !important;

  --silver: #b8c8d8 !important;
  --silver-dim: rgba(184,200,216,0.12) !important;

  --red: #f87171 !important;
  --red-dim: rgba(248,113,113,0.12) !important;

  /* ── COLOR · TYPOGRAPHY ─────────────────────────────────────── */
  --text-hero: #ffffff !important;
  --text-primary: #e8f0f8 !important;
  --text-secondary: #7a9bb5 !important;
  --text-muted: #4a6070 !important;
  --text-label: #3dd6a3 !important;
  --highlight: #5ee8b5 !important;

  /* ── TYPOGRAPHY · PAGE-LEVEL SCALE (1920×1080) ──────────────── */
  --fs-hero: 120px !important; --fw-hero: 700 !important; --lh-hero: 1.0 !important; --ls-hero: -3px !important;
  --fs-h1: 80px !important; --fw-h1: 600 !important; --lh-h1: 1.1 !important; --ls-h1: -2px !important;
  --fs-h2: 52px !important; --fw-h2: 500 !important; --lh-h2: 1.2 !important; --ls-h2: -1px !important;
  --fs-h3: 38px !important; --fw-h3: 600 !important; --lh-h3: 1.25 !important; --ls-h3: 0px !important;
  --fs-h4: 30px !important; --fw-h4: 600 !important; --lh-h4: 1.25 !important; --ls-h4: 2px !important;
  --fs-body: 38px !important; --fw-body: 300 !important; --lh-body: 1.5 !important;
  --fs-small: 26px !important; --fw-small: 400 !important; --lh-small: 1.5 !important;
  --fs-label: 22px !important; --fw-label: 600 !important; --lh-label: 1 !important; --ls-label: 4px !important;
  --fs-stat: 104px !important; --fw-stat: 600 !important; --lh-stat: 1 !important; --ls-stat: -2px !important;
  --fs-micro: 24px !important; --fw-micro: 400 !important; --lh-micro: 1.5 !important;

  /* ── TYPOGRAPHY · IN-CARD SCALE (denser containers) ─────────── */
  --fs-card-stat: 72px !important; --fw-card-stat: 600 !important; --lh-card-stat: 1 !important; --ls-card-stat: -1.5px !important;
  --fs-card-headline: 44px !important; --fw-card-headline: 600 !important; --lh-card-headline: 1.15 !important; --ls-card-headline: -0.5px !important;
  --fs-card-title: 30px !important; --fw-card-title: 600 !important; --lh-card-title: 1.2 !important; --ls-card-title: 1px !important;
  --fs-card-body: 22px !important; --fw-card-body: 300 !important; --lh-card-body: 1.45 !important;
  --fs-card-label: 22px !important; --fw-card-label: 600 !important; --lh-card-label: 1 !important; --ls-card-label: 3px !important;
  --fs-card-chip: 20px !important; --fw-card-chip: 400 !important; --lh-card-chip: 1 !important;
  --card-icon-size: 40px !important;

  /* ── SPACING SCALE ──────────────────────────────────────────── */
  --sp-2: 2px !important; --sp-4: 4px !important; --sp-6: 6px !important; --sp-8: 8px !important;
  --sp-12: 12px !important; --sp-16: 16px !important; --sp-20: 20px !important; --sp-24: 24px !important;
  --sp-32: 32px !important; --sp-40: 40px !important; --sp-48: 48px !important;

  /* ── CARD ANATOMY ───────────────────────────────────────────── */
  --card-padding: 24px !important;
  --card-gap-inner: 20px !important;
  --card-gap-footer: 20px !important;
  --card-gap-grid: 16px !important;
  --card-radius: 16px !important;
  --card-radius-sm: 10px !important;

  /* ── BORDER & RADIUS ────────────────────────────────────────── */
  --radius-sm: 4px !important;
  --radius-md: 8px !important;
  --radius-lg: 16px !important;
  --radius-xl: 20px !important;
  --radius-full: 9999px !important;
}

/* ─────────────────────────────────────────────────────────────────
   chart-bar layout — biostate-dark's chart slide. Spec doesn't define
   explicit coords (the chart-bar layout name is what the model
   emits per retry endpoint hint), so use a generous full-canvas
   layout: heading top-left, chart filling slot below with metal-
   gradient bg + 1px border + padding per .tmpl-img.chart-host design
   (html_gen_prompt.py:1171).

   Without these force rules the chart-host inherits no positioning
   from the section, ends up 1920px wide spanning the whole slide
   (Rainy 2026-06-19: "dark 又和原来一样了"), no chrome, leaves a big
   black void below the chart bars.

   Outer-only rule (direct children of section / obj-html-inner) gets
   coords; nested wraps fall through to fill-parent. Mirror of clean-
   light page-10 split pattern.
   ───────────────────────────────────────────────────────────────── */
[data-template="biostate-dark"][data-layout="chart-bar"] > .tmpl-img,
[data-template="biostate-dark"][data-layout="chart-bar"] > .tmpl-img.chart-host,
[data-template="biostate-dark"][data-layout="chart-bar"] > .chart-host,
[data-template="biostate-dark"][data-layout="chart-bar"] > .tmpl-chart,
[data-template="biostate-dark"][data-layout="chart-bar"] .obj-html-inner > .tmpl-img,
[data-template="biostate-dark"][data-layout="chart-bar"] .obj-html-inner > .tmpl-img.chart-host,
[data-template="biostate-dark"][data-layout="chart-bar"] .obj-html-inner > .chart-host,
[data-template="biostate-dark"][data-layout="chart-bar"] .obj-html-inner > .tmpl-chart {
  position: absolute !important;
  left: 80px !important; top: 200px !important;
  width: 1760px !important; height: 820px !important;
  max-width: none !important; max-height: none !important;
  min-width: 1760px !important; min-height: 820px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  z-index: 2 !important;
  overflow: hidden !important;
}
/* Inner wraps fill parent — no double offset. */
[data-template="biostate-dark"][data-layout="chart-bar"] .tmpl-img .chart-host,
[data-template="biostate-dark"][data-layout="chart-bar"] .chart-host .tmpl-img,
[data-template="biostate-dark"][data-layout="chart-bar"] .tmpl-chart .chart-host {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important; top: 0 !important;
  width: 100% !important; height: 100% !important;
}

/* Heading per Spec — h1/h2/h3/.tmpl-title @ top:80 left:80 */
[data-template="biostate-dark"][data-layout="chart-bar"] h1,
[data-template="biostate-dark"][data-layout="chart-bar"] h2,
[data-template="biostate-dark"][data-layout="chart-bar"] h3,
[data-template="biostate-dark"][data-layout="chart-bar"] .tmpl-title,
[data-template="biostate-dark"][data-layout="chart-bar"] .tmpl-h2 {
  position: absolute !important;
  top: 70px !important;
  left: 80px !important;
  max-width: 1760px !important;
  margin: 0 !important;
  z-index: 3 !important;
}

/* Canvas fills wrap */
[data-template="biostate-dark"][data-layout="chart-bar"] canvas {
  width: 100% !important; height: 100% !important;
  display: block !important;
}

/* Hide stray caption — chart-bar layout is heading + chart only */
[data-template="biostate-dark"][data-layout="chart-bar"] .obj-html-inner > p,
[data-template="biostate-dark"][data-layout="chart-bar"] .obj-html-inner > span,
[data-template="biostate-dark"][data-layout="chart-bar"] .obj-html-inner > div:not(.tmpl-img):not(.chart-host):not(.tmpl-chart):not([class*="slide-bg"]):not([class*="halo"]):not([class*="glow"]):not([class*="cover-"]):not(.scaffold):not(.strip):not(.vlabel),
[data-template="biostate-dark"][data-layout="chart-bar"] > p {
  display: none !important;
}