/* Auto-generated by scripts/extract-broadside-runtime.py bold-mono — DO NOT hand-edit.
 * Source: html_gen_prompt.py _BOLD_MONO_EXTRA_TOKENS + _BOLD_MONO_STAT_CARD_CSS
 * Loaded by editor.html so editor + viewer render bold-mono 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.)
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');



[data-template="bold-mono"] {

  /* ─────────────────────────────────────────────────────────
     Bold Mono — design tokens (spec section 1.2 / 1.3)
     Source: design-specs/bold-mono.html. Canvas 1920×1080.
     Inter loaded via Google Fonts in stat_card_css below.
     ───────────────────────────────────────────────────────── */

  /* Palette — strictly monochrome + 2 semantic accents */
  --bm-black: #000000 !important;
  --bm-white: #FFFFFF !important;
  --bm-gray-100: #F5F5F5 !important;
  --bm-gray-300: #D9D9D9 !important;
  --bm-gray-500: #B8B8B8 !important;
  --bm-gray-700: #5F5E5A !important;
  --bm-success: #22C55E !important;
  --bm-danger: #EF4444 !important;

  /* Typography (Inter, system fallback) */
  --bm-font-display: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif !important;
  --bm-font-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif !important;
  --font-heading: 'Inter', system-ui, -apple-system, sans-serif !important;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif !important;

  /* Type scale (canvas-px @ 1920) — see spec section 1.3 */
  --bm-fs-display: 128px !important; /* Cover/Thanks/Contents */
  --bm-fs-h1-lg: 96px !important; /* T-06 / T-11 title */
  --bm-fs-h1: 88px !important; /* T-05 / T-08 / T-09 title */
  --bm-fs-h1-sm: 80px !important; /* T-07 title */
  --bm-fs-h1-xs: 64px !important; /* T-10 title */
  --bm-fs-pcard-num: 84px !important; /* Pricing percentage */
  --bm-fs-body-xl: 52px !important; /* Centered intro body */
  --bm-fs-pcard-name: 44px !important; /* Pricing plan name, T-07 column heading */
  --bm-fs-h3: 32px !important; /* Card heading, body default */
  --bm-fs-body: 32px !important;
  --bm-fs-body-s: 26px !important; /* Constrained spaces (T-08 status, T-11 step) */
  --bm-fs-pill: 22px !important; /* T-02 pill */
  --bm-fs-eyebrow: 16px !important; /* T-08 uppercase eyebrow */
  --bm-fs-label: 14px !important;

  /* Radii */
  --bm-radius-card: 20px !important;
  --bm-radius-block: 50px !important;
  --bm-radius-status: 16px !important;
  --bm-radius-pill: 999px !important;

  /* Margins (canvas px) */
  --bm-margin-x: 128px !important;
  --bm-margin-x-cov: 121px !important;
  --bm-margin-top: 80px !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   BOLD MONO — Slide-production component CSS
   Canvas: 1920×1080. All sizes in canvas pixels.
   Source of truth: design-specs/bold-mono.html
   Color semantics:
     · #000 black     → text, dark cards, bottom bar
     · #5F5E5A gray-700 → filled dark cards, step numbers
     · #B8B8B8 gray-500 → middle column (T-07) only
     · #D9D9D9 gray-300 → default card / panel / image placeholder
     · #22C55E success  → ✓ status indicator (T-08 only)
     · #EF4444 danger   → ✕ status indicator (T-08 only)
   Content limits per layout: see spec section 6.
   All rules scoped via .slide[data-template="bold-mono"] in deck-engine.
   ═══════════════════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BASE — slide canvas (white, monochrome)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-template="bold-mono"].slide {
  color: var(--bm-black) !important;
  font-family: var(--bm-font-body) !important;
  position: relative !important;
  overflow: hidden !important;
}
[data-template="bold-mono"] .slide-content { position: relative; z-index: 2; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SHARED PRIMITIVES — logo mark · bottom bar · dot pattern
   Used only on cover (T-01) and closing (T-04) slides.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Logo mark — two 64×64 squares, second offset (+32, +32) */
[data-template="bold-mono"] .bm-logo-mark { position: absolute; width: 96px; height: 96px; }
[data-template="bold-mono"] .bm-logo-mark .bm-sq { position: absolute; width: 64px; height: 64px; }
[data-template="bold-mono"] .bm-logo-mark .bm-sq.a { background: var(--bm-black);    top: 0;   left: 0; }
[data-template="bold-mono"] .bm-logo-mark .bm-sq.b { background: var(--bm-gray-300); top: 32px; left: 32px; }

/* Bottom black bar — 1341×10 at (121, 1000). Cover/closing only. */
[data-template="bold-mono"] .bm-bottom-bar {
  position: absolute !important;
  left: 121px !important; top: 1000px !important;
  width: 1341px !important; height: 10px !important;
  background: var(--bm-black) !important;
}

/* Dot pattern — 980×980 right-side decoration. Cover/closing only.
   Radial fade from #B0B0B0 → transparent, masked to a soft circle. */
[data-template="bold-mono"] .bm-dot-pattern {
  position: absolute !important;
  right: 0 !important; top: 0 !important;
  width: 980px !important; height: 980px !important;
  background-image: radial-gradient(circle at center, #B0B0B0 2.5px, transparent 3px) !important;
  background-size: 64px 64px !important;
  -webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 70%) !important;
  mask-image: radial-gradient(circle at center, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 70%) !important;
  transform: translate(-30px, 30px) !important;
  pointer-events: none !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   T-01 · COVER (data-layout="cover")
   Title 121,800 · Subtitle 121,950 · Logo 1060,658 · Bar 121,1000
   Content limits: title ≤3 words/1 line · subtitle ≤6 words/1 line
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-template="bold-mono"].slide[data-layout="cover"] { background: var(--bm-white); }
[data-template="bold-mono"][data-layout="cover"] .bm-cover-title {
  position: absolute !important;
  left: 121px !important; top: 800px !important;
  font-size: 128px !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1 !important;
  color: var(--bm-black) !important;
  font-family: var(--bm-font-display) !important;
}
[data-template="bold-mono"][data-layout="cover"] .bm-cover-subtitle {
  position: absolute !important;
  left: 121px !important; top: 950px !important;
  font-size: 32px !important;
  font-weight: 400 !important;
  color: var(--bm-black) !important;
}
[data-template="bold-mono"][data-layout="cover"] .bm-logo-mark { left: 1060px; top: 658px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   T-02 · INTRO (data-layout="intro")
   Centered pill + 52px body. Pill 22/600/0.12em. Body max-width 1100, ≤6 lines.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-template="bold-mono"][data-layout="intro"] .bm-intro {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important; height: 100% !important;
  padding: 0 360px !important;
}
[data-template="bold-mono"][data-layout="intro"] .bm-pill {
  background: var(--bm-black) !important;
  color: var(--bm-white) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 12px 36px !important;
  border-radius: 999px !important;
  margin-bottom: 48px !important;
}
[data-template="bold-mono"][data-layout="intro"] .bm-intro-body {
  font-size: 52px !important;
  font-weight: 700 !important;
  text-align: center !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  max-width: 1100px !important;
  color: var(--bm-black) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   T-03 · CONTENTS / TOC (data-layout="toc")
   Title 128,380 · 128/800 — List 1000,380 · 48/1.6
   Active item: black 800 + arrow · inactive: #888 500 (no arrow)
   Content limits: 5–6 items max · 1 word per item recommended
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-template="bold-mono"][data-layout="toc"] .bm-toc-title {
  position: absolute !important;
  left: 128px !important; top: 380px !important;
  font-size: 128px !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  color: var(--bm-black) !important;
  font-family: var(--bm-font-display) !important;
}
[data-template="bold-mono"][data-layout="toc"] .bm-toc-list {
  position: absolute !important;
  left: 1000px !important; top: 380px !important;
  font-size: 48px !important;
  line-height: 1.6 !important;
}
[data-template="bold-mono"][data-layout="toc"] .bm-toc-item {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  color: #888888 !important;
  font-weight: 500 !important;
}
[data-template="bold-mono"][data-layout="toc"] .bm-toc-item.active {
  color: var(--bm-black) !important;
  font-weight: 800 !important;
}
[data-template="bold-mono"][data-layout="toc"] .bm-toc-arrow { display: inline-block; width: 56px; }
[data-template="bold-mono"][data-layout="toc"] .bm-toc-item:not(.active) .bm-toc-arrow { visibility: hidden; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   T-04 · CLOSING / THANK YOU (data-layout="closing")
   Same skeleton as cover; logo offset to 933,689.;
   Content limits: title ≤3 words/1 line · subtitle ≤6 words/1 line
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-template="bold-mono"].slide[data-layout="closing"] { background: var(--bm-white); }
[data-template="bold-mono"][data-layout="closing"] .bm-closing-title {
  position: absolute !important;
  left: 121px !important; top: 800px !important;
  font-size: 128px !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1 !important;
  color: var(--bm-black) !important;
  font-family: var(--bm-font-display) !important;
}
[data-template="bold-mono"][data-layout="closing"] .bm-closing-subtitle {
  position: absolute !important;
  left: 121px !important; top: 950px !important;
  font-size: 32px !important;
  color: var(--bm-black) !important;
}
[data-template="bold-mono"][data-layout="closing"] .bm-logo-mark { left: 933px; top: 689px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   T-05 · ICON GRID (data-layout="grid")
   Title 128,128 · 88/800 — 3×2 grid 525×271 cards · gap 45 · radius 20
   Card bg #D9D9D9 · icon 56×56 top-left · body 32px left-align
   Content limits: exactly 6 cards · body ≤15 words / 3 lines
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-template="bold-mono"][data-layout="grid"] .bm-grid-title {
  position: absolute !important;
  left: 128px !important; top: 128px !important;
  font-size: 88px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--bm-black) !important;
}
[data-template="bold-mono"][data-layout="grid"] .bm-grid-cards {
  position: absolute !important;
  left: 0 !important; top: 317px !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, 525px) !important;
  gap: 45px 45px !important;
  padding: 0 128px !important;
}
[data-template="bold-mono"][data-layout="grid"] .bm-card {
  background: var(--bm-gray-300) !important;
  border-radius: 20px !important;
  /* (Rainy 2026-05-28) min-height + auto: user 写超长 body 时 grid card 撑高 */
  min-height: 271px !important;
  height: auto !important;
  padding: 40px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  text-align: left !important;
}
[data-template="bold-mono"][data-layout="grid"] .bm-card-icon {
  width: 56px !important; height: 56px !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 36px !important;
  color: var(--bm-black) !important;
}
[data-template="bold-mono"][data-layout="grid"] .bm-card-icon svg { width: 40px; height: 40px; }
[data-template="bold-mono"][data-layout="grid"] .bm-card-body {
  font-size: 32px !important;
  line-height: 1.4 !important;
  color: var(--bm-black) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   T-06 · PRICING (data-layout="pricing")
   Title 128,80 · 96/800 — 3 cards 560×640 · radius 50 · gap 30
   Pattern dark · light · dark. Percentage 84/700, name 44/700.
   Content limits: max 3 plans · name ≤3 words/1 line · ≤4 bullets · ≤10 words/2 lines each
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-template="bold-mono"][data-layout="pricing"] .bm-pricing-title {
  position: absolute !important;
  left: 128px !important; top: 80px !important;
  font-size: 96px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--bm-black) !important;
}
[data-template="bold-mono"][data-layout="pricing"] .bm-pricing-cards {
  position: absolute !important;
  left: 90px !important; top: 320px !important;
  display: flex !important;
  gap: 30px !important;
}
[data-template="bold-mono"][data-layout="pricing"] .bm-pcard {
  width: 560px !important;
  height: 640px !important;
  border-radius: 50px !important;
  padding: 56px 48px !important;
}
[data-template="bold-mono"][data-layout="pricing"] .bm-pcard.dark { background: var(--bm-gray-700); color: var(--bm-white); }
[data-template="bold-mono"][data-layout="pricing"] .bm-pcard.light { background: var(--bm-gray-300); color: var(--bm-black); }
[data-template="bold-mono"][data-layout="pricing"] .bm-pcard-pct {
  font-size: 84px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  margin-bottom: 12px !important;
}
[data-template="bold-mono"][data-layout="pricing"] .bm-pcard-name {
  font-size: 44px !important;
  font-weight: 700 !important;
  margin-bottom: 28px !important;
}
[data-template="bold-mono"][data-layout="pricing"] .bm-pcard ul {
  list-style: disc !important;
  padding-left: 28px !important;
  font-size: 32px !important;
  line-height: 1.35 !important;
}
[data-template="bold-mono"][data-layout="pricing"] .bm-pcard ul li { margin-bottom: 8px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   T-07 · MESSAGING (data-layout="messaging")
   Title 128,88 · 80/800 — Lead 800,88 (1000 wide, 32/700)
   3 columns full bleed · top 373 · height 707 · pad 80×64
   Fills: gray-300 / gray-500 / black. Heading 44/800. Body 32/400.
   Content limits: heading ≤4 words/1 line · body ≤5 lines
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-template="bold-mono"][data-layout="messaging"] .bm-msg-title {
  position: absolute !important;
  left: 128px !important; top: 88px !important;
  font-size: 80px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--bm-black) !important;
}
[data-template="bold-mono"][data-layout="messaging"] .bm-msg-lead {
  position: absolute !important;
  left: 800px !important; top: 88px !important;
  width: 1000px !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--bm-black) !important;
}
[data-template="bold-mono"][data-layout="messaging"] .bm-msg-cols {
  position: absolute !important;
  left: 0 !important; top: 373px !important;
  width: 100% !important;
  height: 707px !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
}
[data-template="bold-mono"][data-layout="messaging"] .bm-msg-col {
  padding: 80px 64px !important;
}
[data-template="bold-mono"][data-layout="messaging"] .bm-msg-col:nth-child(1) { background: var(--bm-gray-300); color: var(--bm-black); }
[data-template="bold-mono"][data-layout="messaging"] .bm-msg-col:nth-child(2) { background: var(--bm-gray-500); color: var(--bm-black); }
[data-template="bold-mono"][data-layout="messaging"] .bm-msg-col:nth-child(3) { background: var(--bm-black);    color: var(--bm-white); }
[data-template="bold-mono"][data-layout="messaging"] .bm-msg-col h4 {
  font-size: 44px !important;
  font-weight: 800 !important;
  margin-bottom: 28px !important;
  line-height: 1.15 !important;
}
[data-template="bold-mono"][data-layout="messaging"] .bm-msg-col p {
  font-size: 32px !important;
  line-height: 1.45 !important;
  color: inherit !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   T-08 · WORDMARK + STATUS CARDS (data-layout="wordmark")
   Left text-col 80,0 (460 wide, vertically centered) — title 88/800, body 32/400
   Right panel 1320 wide gray-300 · 3 white cards 370×920 radius 16, padding 36×32
   Status circle 56px · ✓ green / ✕ red. Eyebrow 16/700/0.1em #777.
   Card title (h5) 32/800 · subhead (h6) 26/800 · body 26/400.
   Content limits: title ≤3 words · subhead ≤15 words/3 lines · body ≤30 words/5 lines
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-template="bold-mono"][data-layout="wordmark"] .bm-word-text {
  position: absolute !important;
  left: 80px !important; top: 0 !important;
  width: 460px !important; height: 1080px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
[data-template="bold-mono"][data-layout="wordmark"] .bm-word-title {
  font-size: 88px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  margin-bottom: 40px !important;
  color: var(--bm-black) !important;
}
[data-template="bold-mono"][data-layout="wordmark"] .bm-word-body {
  width: 460px !important;
  font-size: 32px !important;
  line-height: 1.4 !important;
  color: var(--bm-black) !important;
}
[data-template="bold-mono"][data-layout="wordmark"] .bm-word-panel {
  position: absolute !important;
  right: 0 !important; top: 0 !important;
  width: 1320px !important; height: 1080px !important;
  background: var(--bm-gray-300) !important;
}
[data-template="bold-mono"][data-layout="wordmark"] .bm-word-cards {
  position: absolute !important;
  right: 80px !important; top: 80px !important;
  display: flex !important;
  gap: 30px !important;
}
[data-template="bold-mono"][data-layout="wordmark"] .bm-wcard {
  width: 370px !important;
  height: 920px !important;
  background: var(--bm-white) !important;
  border-radius: 16px !important;
  padding: 36px 32px !important;
}
[data-template="bold-mono"][data-layout="wordmark"] .bm-wcard-status {
  width: 56px !important; height: 56px !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--bm-white) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  margin-bottom: 24px !important;
}
[data-template="bold-mono"][data-layout="wordmark"] .bm-wcard-status.ok { background: var(--bm-success); }
[data-template="bold-mono"][data-layout="wordmark"] .bm-wcard-status.no { background: var(--bm-danger); }
[data-template="bold-mono"][data-layout="wordmark"] .bm-wcard h5 {
  font-size: 32px !important;
  font-weight: 800 !important;
  margin-bottom: 24px !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  color: var(--bm-black) !important;
}
[data-template="bold-mono"][data-layout="wordmark"] .bm-wcard-eyebrow {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #777777 !important;
  margin-bottom: 10px !important;
}
[data-template="bold-mono"][data-layout="wordmark"] .bm-wcard h6 {
  font-size: 26px !important;
  font-weight: 800 !important;
  margin-bottom: 20px !important;
  line-height: 1.25 !important;
  color: var(--bm-black) !important;
}
[data-template="bold-mono"][data-layout="wordmark"] .bm-wcard p {
  font-size: 26px !important;
  line-height: 1.4 !important;
  color: #111111 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   T-09 · HALF / HALF (data-layout="half")
   Left text-col 80,0 (600 wide, vertically centered) — title 88/800 (≤4 words/2 lines)
   Right image panel 1100×1080 gray-300 placeholder.
   Body 32/400 · max 7 lines.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-template="bold-mono"][data-layout="half"] .bm-half-text {
  position: absolute !important;
  left: 80px !important; top: 0 !important;
  width: 600px !important; height: 1080px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
[data-template="bold-mono"][data-layout="half"] .bm-half-title {
  font-size: 88px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 48px !important;
  color: var(--bm-black) !important;
}
[data-template="bold-mono"][data-layout="half"] .bm-half-body {
  font-size: 32px !important;
  line-height: 1.45 !important;
  color: var(--bm-black) !important;
}
[data-template="bold-mono"][data-layout="half"] .bm-half-panel {
  position: absolute !important;
  right: 0 !important; top: 0 !important;
  width: 1100px !important; height: 1080px !important;
  background: var(--bm-gray-300) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
[data-template="bold-mono"][data-layout="half"] .bm-half-panel .bm-placeholder {
  font-size: 72px !important;
  font-weight: 800 !important;
  color: var(--bm-black) !important;
}
[data-template="bold-mono"][data-layout="half"] .bm-half-panel img {
  width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   T-10 · HEADER + IMAGE (data-layout="header-image")
   Title 128,100 · 64/800 — Image panel 0,280 · 1920×800 gray-300.
   Content limits: title ≤4 words / 1 line.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-template="bold-mono"][data-layout="header-image"] .bm-hdr-title {
  position: absolute !important;
  left: 128px !important; top: 100px !important;
  font-size: 64px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--bm-black) !important;
}
[data-template="bold-mono"][data-layout="header-image"] .bm-hdr-panel {
  position: absolute !important;
  left: 0 !important; top: 280px !important;
  width: 1920px !important; height: 800px !important;
  background: var(--bm-gray-300) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
[data-template="bold-mono"][data-layout="header-image"] .bm-hdr-panel .bm-placeholder {
  font-size: 80px !important;
  font-weight: 800 !important;
  color: var(--bm-black) !important;
}
[data-template="bold-mono"][data-layout="header-image"] .bm-hdr-panel img {
  width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   T-11 · PROCESS / STEPS (data-layout="process")
   Title 128,80 · 96/800 — Image block -165,334 · 774×877 (left-bleed) radius 50
   Step grid 720,320 · 3 rows × 2 cols (100 num · 1fr step) gap 32×24 width 1100
   Number 100px circle (dark/light alternating). Step head 32/800. Body 26/400.
   Content limits: step heading ≤2 words/1 line · body ≤20 words/3 lines
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-template="bold-mono"][data-layout="process"] .bm-step-title {
  position: absolute !important;
  left: 128px !important; top: 80px !important;
  font-size: 96px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--bm-black) !important;
}
[data-template="bold-mono"][data-layout="process"] .bm-step-imgblock {
  position: absolute !important;
  left: -165px !important; top: 334px !important;
  width: 774px !important; height: 877px !important;
  background: var(--bm-gray-300) !important;
  border-radius: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
[data-template="bold-mono"][data-layout="process"] .bm-step-imgblock .bm-placeholder {
  font-size: 72px !important;
  font-weight: 800 !important;
  color: var(--bm-black) !important;
  transform: translateX(82px) !important;
}
[data-template="bold-mono"][data-layout="process"] .bm-step-imgblock img {
  width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important;
}
[data-template="bold-mono"][data-layout="process"] .bm-step-grid {
  position: absolute !important;
  left: 720px !important; top: 320px !important;
  display: grid !important;
  grid-template-columns: 100px 1fr 100px 1fr !important;
  gap: 32px 24px !important;
  width: 1100px !important;
}
[data-template="bold-mono"][data-layout="process"] .bm-step-num {
  width: 100px !important; height: 100px !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--bm-white) !important;
}
[data-template="bold-mono"][data-layout="process"] .bm-step-num.dark { background: var(--bm-gray-700); color: var(--bm-white); }
[data-template="bold-mono"][data-layout="process"] .bm-step-num.light { background: var(--bm-gray-300); color: var(--bm-black); }
[data-template="bold-mono"][data-layout="process"] .bm-step h4 {
  font-size: 32px !important;
  font-weight: 800 !important;
  margin-bottom: 8px !important;
  color: var(--bm-black) !important;
}
[data-template="bold-mono"][data-layout="process"] .bm-step p {
  font-size: 26px !important;
  line-height: 1.45 !important;
  color: var(--bm-black) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ANIMATIONS (reused fade-in, scoped to bold-mono)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@keyframes bmFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
[data-template="bold-mono"] .slide .fade-in { animation: bmFadeIn 0.6s ease-out both; }
[data-template="bold-mono"] .slide .fade-in-1 { animation: bmFadeIn 0.6s ease-out 0.08s both; }
[data-template="bold-mono"] .slide .fade-in-2 { animation: bmFadeIn 0.6s ease-out 0.16s both; }
[data-template="bold-mono"] .slide .fade-in-3 { animation: bmFadeIn 0.6s ease-out 0.24s both; }
[data-template="bold-mono"] .slide .fade-in-4 { animation: bmFadeIn 0.6s ease-out 0.32s both; }
[data-template="bold-mono"] .slide .fade-in-5 { animation: bmFadeIn 0.6s ease-out 0.40s both; }
emitted 24491 chars to stdout


/* ═══════════════════════════════════════════════════════════════════════════
   D-form fallback — section-level white bg for all layouts
   ───────────────────────────────────────────────────────────────────────────
   Spec only sets background on cover/closing via .slide selector. D-form
   thumbnails (dashboard my-decks card) render with section as direct
   element — no bg → transparent → iframe srcdoc default gray bleeds.
   All bold-mono layouts share white bg by design; add explicit section-
   level rule for every layout so thumbnails/preview never fall through.
   (Rainy 2026-06-22: my-decks card thumbnail "应该是白色 bg".)
   ═══════════════════════════════════════════════════════════════════════════ */
[data-template="bold-mono"][data-layout="cover"],
[data-template="bold-mono"][data-layout="closing"],
[data-template="bold-mono"][data-layout="intro"],
[data-template="bold-mono"][data-layout="toc"],
[data-template="bold-mono"][data-layout="grid"],
[data-template="bold-mono"][data-layout="pricing"],
[data-template="bold-mono"][data-layout="messaging"],
[data-template="bold-mono"][data-layout="wordmark"],
[data-template="bold-mono"][data-layout="half"],
[data-template="bold-mono"][data-layout="header-image"],
[data-template="bold-mono"][data-layout="process"] {
  background: var(--bm-white) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   Hide JsonRenderer's generic ambient mesh on bold-mono sections
   ───────────────────────────────────────────────────────────────────────────
   JsonRenderer.renderSlide always injects <div class="mesh">/<.mesh-lines>/
   <.sq-layer> ambient overlay for any slide whose bg is unmanaged. These
   divs carry gradient/noise CSS that washes bold-mono's clean white bg
   into a gray-cream visual. bold-mono manages its own bg via runtime CSS
   (white + dot pattern + bottom bar) — hide the generic mesh.
   (Rainy 2026-06-22: bold-mono my-decks card thumb visual gray trace.)
   ═══════════════════════════════════════════════════════════════════════════ */
[data-template="bold-mono"] > .mesh,
[data-template="bold-mono"] > .mesh-lines,
[data-template="bold-mono"] > .sq-layer,
[data-template="bold-mono"] .mesh,
[data-template="bold-mono"] .mesh-lines,
[data-template="bold-mono"] .sq-layer {
  display: none !important;
}