/* Auto-generated by scripts/extract-broadside-runtime.py broadside — DO NOT hand-edit.
 * Source: html_gen_prompt.py _BROADSIDE_EXTRA_TOKENS + _BROADSIDE_STAT_CARD_CSS
 * Loaded by editor.html so editor + viewer render broadside 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=Barlow:wght@400;500;700;800;900&family=IBM+Plex+Mono:wght@300;400;500&family=Noto+Sans+SC:wght@400;500;700;900&display=swap');

  

[data-template="broadside"] {

  /* ─────────────────────────────────────────────────────────
     Broadside — design tokens
     Coordinate system: 1920×1080 design canvas (NOT vw/vh).
     Visual identity: near-black newspaper canvas + fire-orange
                      environment color (cover/chapter use full
                      orange backgrounds) + Barlow heavy grotesk.
     EN/CN bilingual via Noto Sans SC fallback fonts.
     ───────────────────────────────────────────────────────── */
  /* ── PALETTE — NEAR-BLACK · FIRE-ORANGE · CREAM ── */
  --bd-bg: #111111 !important;  /* near-black default canvas             */

  --bd-bg-alt: #1a1a18 !important;  /* secondary surface on dark slides      */

  --bd-bg-orange: #e85d26 !important;  /* fire-orange — cover/chapter env color */

  --bd-bg-light: #111111 !important;  /* alias — Broadside has no light scheme */

  --bd-bg-light-alt: #1a1a18 !important;  /* alias                                 */


  --bd-fg: #f0ece5 !important;  /* warm cream on dark                    */

  --bd-fg-2: #888880 !important;  /* muted on dark                         */

  --bd-fg-3: #505048 !important;  /* tertiary on dark                      */

  --bd-fg-light: #111111 !important;  /* dark ink ON orange slides             */

  --bd-fg-light-2: #2a1810 !important;  /* muted dark on orange                  */

  --bd-fg-light-3: rgba(17, 17, 17, 0.55) !important;  /* hint on orange         */


  --bd-accent: #e85d26 !important;  /* fire-orange accent on dark slides     */

  --bd-border: #282826 !important;  /* divider on dark                       */

  --bd-border-light: rgba(17, 17, 17, 0.20) !important;  /* divider on orange      */


  /* ── TYPOGRAPHY — BARLOW HEAVY GROTESK ── */
  --bd-font-display: "Barlow", "Noto Sans SC", sans-serif !important;

  --bd-font-heading: "Barlow", "Noto Sans SC", sans-serif !important;

  --bd-font-body: "Barlow", "Noto Sans SC", system-ui, sans-serif !important;

  --bd-font-mono: "IBM Plex Mono", monospace !important;

  /* Cross-template alias */
  --font-heading: "Barlow", "Noto Sans SC", sans-serif !important;

  --font-body: "Barlow", "Noto Sans SC", system-ui, sans-serif !important;


  /* ── TYPE SCALE — 1920×1080 fixed px (Broadside: TYPE IS MASSIVE) ── */
  --bd-sz-display: 250px !important;  /* hero/end — 13vw of 1920 ≈ 250 */

  --bd-sz-h1: 144px !important;  /* chapter title — 7.5vw ≈ 144   */

  --bd-sz-h2: 86px !important;   /* slide headline — 4.5vw ≈ 86   */

  --bd-sz-h3: 54px !important;   /* sub-headline — 2.8vw ≈ 54     */

  --bd-sz-lead: 30px !important;   /* lead — 1.6vw ≈ 30             */

  --bd-sz-body: 23px !important;   /* body — 1.2vw ≈ 23             */

  --bd-sz-caption: 17px !important;   /* caption — 0.9vw ≈ 17          */

  --bd-sz-label: 14px !important;   /* mono label/kicker — 0.72vw ≈ 14*/

}


/* ═══════════════════════════════════════════════════════════════════════════
   BROADSIDE — Slide-production component CSS
   Canvas: 1920×1080. All sizes in px (NEVER vw/vh).
   ALL selectors scoped under [data-template="broadside"] — never bare.
   Class names use bd- prefix to avoid cross-template collisions.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── ROOT / BASE ─────────────────────────────────────────────────────── */
[data-template="broadside"].slide,
[data-template="broadside"] .slide {
  background: transparent !important;
  font-family: var(--bd-font-body) !important;

  color: var(--bd-fg) !important;

  position: relative !important;

  overflow: hidden !important;

}
[data-template="broadside"] .slide > .slide-scale-inner,
[data-template="broadside"].slide > .slide-scale-inner {
  background: var(--bd-bg) !important;

}
/* Generate-modal build canvas ONLY (see cobalt-grid for rationale). */
#genStudioCanvas [data-template="broadside"] .slide > .slide-scale-inner,
#genStudioCanvas [data-template="broadside"].slide > .slide-scale-inner,
.gen-studio-slide-thumb [data-template="broadside"] .slide > .slide-scale-inner,
.gen-studio-slide-thumb [data-template="broadside"].slide > .slide-scale-inner {
  height: 100% !important;

}
[data-template="broadside"] h1,
[data-template="broadside"] h2,
[data-template="broadside"] h3,
[data-template="broadside"] h4 {
  font-family: var(--bd-font-heading) !important;

  color: inherit !important;

  margin: 0 !important;

}
[data-template="broadside"] p,
[data-template="broadside"] li,
[data-template="broadside"] span,
[data-template="broadside"] div {
  font-family: var(--bd-font-body) !important;

}

/* Cover / chapter / end use FIRE ORANGE bg.
   Background ONLY on .slide-scale-inner so the orange stays within the
   1920×1080 slide frame and doesn't bleed into the editor viewport. */
[data-template="broadside"][data-layout="cover"] > .slide-scale-inner,
[data-template="broadside"][data-layout="chapter"] > .slide-scale-inner,
[data-template="broadside"][data-layout="end"] > .slide-scale-inner {
  background: var(--bd-bg-orange) !important;

  color: var(--bd-fg-light) !important;

}

/* On orange: display/heading text becomes near-black ink */
[data-template="broadside"][data-layout="cover"] h1,
[data-template="broadside"][data-layout="cover"] h2,
[data-template="broadside"][data-layout="cover"] .bd-display,
[data-template="broadside"][data-layout="cover"] .bd-h1,
[data-template="broadside"][data-layout="cover"] .bd-h2,
[data-template="broadside"][data-layout="chapter"] h1,
[data-template="broadside"][data-layout="chapter"] h2,
[data-template="broadside"][data-layout="chapter"] .bd-display,
[data-template="broadside"][data-layout="chapter"] .bd-h1,
[data-template="broadside"][data-layout="chapter"] .bd-h2,
[data-template="broadside"][data-layout="end"] h1,
[data-template="broadside"][data-layout="end"] .bd-display,
[data-template="broadside"][data-layout="end"] .bd-h1 {
  color: var(--bd-fg-light) !important;

}

/* ─── REUSABLE TYPOGRAPHY HELPERS ────────────────────────────────────── */
[data-template="broadside"] .bd-display {
  font-family: var(--bd-font-display) !important;

  font-size: var(--bd-sz-display) !important;

  font-weight: 900 !important;

  line-height: 0.88 !important;

  letter-spacing: -0.04em !important;

}
[data-template="broadside"] .bd-h1 {
  font-family: var(--bd-font-heading) !important;

  font-size: var(--bd-sz-h1) !important;

  font-weight: 800 !important;

  line-height: 0.9 !important;

  letter-spacing: -0.03em !important;

}
[data-template="broadside"] .bd-h2 {
  font-family: var(--bd-font-heading) !important;

  font-size: var(--bd-sz-h2) !important;

  font-weight: 700 !important;

  line-height: 1.1 !important;

  letter-spacing: -0.02em !important;

}
[data-template="broadside"] .bd-h3 {
  font-family: var(--bd-font-heading) !important;

  font-size: var(--bd-sz-h3) !important;

  font-weight: 600 !important;

  line-height: 1.2 !important;

}
[data-template="broadside"] .bd-lead {
  font-family: var(--bd-font-body) !important;

  font-size: var(--bd-sz-lead) !important;

  font-weight: 400 !important;

  line-height: 1.5 !important;

}
[data-template="broadside"] .bd-body {
  font-family: var(--bd-font-body) !important;

  font-size: var(--bd-sz-body) !important;

  font-weight: 400 !important;

  line-height: 1.6 !important;

}
[data-template="broadside"] .bd-caption {
  font-family: var(--bd-font-body) !important;

  font-size: var(--bd-sz-caption) !important;

  font-weight: 400 !important;

  line-height: 1.5 !important;

}
[data-template="broadside"] .bd-label {
  font-family: var(--bd-font-mono) !important;

  font-size: var(--bd-sz-label) !important;

  font-weight: 500 !important;

  letter-spacing: 0.14em !important;

  text-transform: uppercase !important;

  color: var(--bd-fg-2) !important;

}
[data-template="broadside"] .bd-accent { color: var(--bd-accent); }
[data-template="broadside"] .bd-muted  { color: var(--bd-fg-2); }
[data-template="broadside"] .bd-rule {
  width: 36px !important;

  height: 2px !important;

  background: var(--bd-accent) !important;

  display: block !important;

}
[data-template="broadside"] .bd-kicker {
  font-family: var(--bd-font-mono) !important;

  font-size: var(--bd-sz-label) !important;

  letter-spacing: 0.2em !important;

  text-transform: uppercase !important;

  color: var(--bd-accent) !important;

}

/* On orange slides: kicker / rule become dark ink */
[data-template="broadside"][data-layout="cover"] .bd-kicker,
[data-template="broadside"][data-layout="chapter"] .bd-kicker,
[data-template="broadside"][data-layout="end"] .bd-kicker {
  color: var(--bd-fg-light-3) !important;

}
[data-template="broadside"][data-layout="cover"] .bd-rule,
[data-template="broadside"][data-layout="chapter"] .bd-rule,
[data-template="broadside"][data-layout="end"] .bd-rule {
  background: #111111 !important;

}

/* ─── REUSABLE CHROME (header + footer mono labels) ───────────────────── */
[data-template="broadside"] .bd-slide-chrome {
  position: absolute !important;

  left: 144px !important;

  right: 144px !important;

  top: 80px !important;

  display: flex !important;

  justify-content: space-between !important;

  align-items: center !important;

  padding-bottom: 16px !important;

  border-bottom: 1px solid var(--bd-border) !important;

  z-index: 2 !important;

}
[data-template="broadside"] .bd-slide-foot {
  position: absolute !important;

  left: 144px !important;

  right: 144px !important;

  bottom: 60px !important;

  display: flex !important;

  justify-content: space-between !important;

  align-items: center !important;

  padding-top: 16px !important;

  border-top: 1px solid var(--bd-border) !important;

  z-index: 2 !important;

}
/* Cover / chapter / quote / end suppress chrome */
[data-template="broadside"][data-layout="cover"] .bd-slide-chrome,
[data-template="broadside"][data-layout="cover"] .bd-slide-foot,
[data-template="broadside"][data-layout="chapter"] .bd-slide-chrome,
[data-template="broadside"][data-layout="chapter"] .bd-slide-foot,
[data-template="broadside"][data-layout="quote"] .bd-slide-chrome,
[data-template="broadside"][data-layout="quote"] .bd-slide-foot,
[data-template="broadside"][data-layout="end"] .bd-slide-chrome,
[data-template="broadside"][data-layout="end"] .bd-slide-foot {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT 1 · COVER (orange)
   Title fills slide. Massive Barlow 900 on fire orange. ≤ 8 words.
   ═══════════════════════════════════════════════════════════════════════ */
[data-template="broadside"] .bd-cover-body {
  position: absolute !important;

  left: 106px !important;

  right: 106px !important;

  top: 106px !important;

  bottom: 106px !important;

  display: flex !important;

  flex-direction: column !important;

  justify-content: flex-end !important;

  gap: 22px !important;

  z-index: 2 !important;

}
[data-template="broadside"] .bd-cover-title {
  font-family: var(--bd-font-display) !important;

  font-size: var(--bd-sz-display) !important;

  font-weight: 900 !important;

  line-height: 0.88 !important;

  letter-spacing: -0.04em !important;

  color: var(--bd-fg-light) !important;

}
[data-template="broadside"] .bd-cover-meta {
  display: flex !important;

  justify-content: space-between !important;

  align-items: flex-end !important;

  margin-top: 38px !important;

  padding-top: 16px !important;

  border-top: 1px solid var(--bd-border-light) !important;

  font-family: var(--bd-font-mono) !important;

  font-size: var(--bd-sz-label) !important;

  letter-spacing: 0.16em !important;

  text-transform: uppercase !important;

  color: var(--bd-fg-light-3) !important;

}
[data-template="broadside"] .bd-num {
  font-family: var(--bd-font-mono) !important;

  font-size: var(--bd-sz-label) !important;

  letter-spacing: 0.2em !important;

  text-transform: uppercase !important;

  color: var(--bd-fg-light-3) !important;

  margin-bottom: 22px !important;

}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT 2 · CHAPTER (orange)
   Section divider. Big weight-900 title. No chrome. ≤ 6 words.
   ═══════════════════════════════════════════════════════════════════════ */
[data-template="broadside"] .bd-chapter-body {
  position: absolute !important;

  left: 106px !important;

  right: 106px !important;

  top: 106px !important;

  bottom: 106px !important;

  display: flex !important;

  flex-direction: column !important;

  justify-content: center !important;

  z-index: 2 !important;

}
[data-template="broadside"] .bd-chapter-num {
  font-family: var(--bd-font-mono) !important;

  font-size: var(--bd-sz-label) !important;

  letter-spacing: 0.2em !important;

  text-transform: uppercase !important;

  color: var(--bd-fg-light-3) !important;

  margin-bottom: 22px !important;

}
[data-template="broadside"] .bd-chapter-rule {
  width: 36px !important;

  height: 2px !important;

  background: #111111 !important;

  margin-bottom: 22px !important;

}
[data-template="broadside"] .bd-chapter-title {
  font-family: var(--bd-font-display) !important;

  font-size: var(--bd-sz-h1) !important;

  font-weight: 900 !important;

  line-height: 0.9 !important;

  letter-spacing: -0.03em !important;

  color: var(--bd-fg-light) !important;

}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT 3 · STATEMENT (dark)
   Single bold claim. 4-12 words. Let the type breathe.
   ═══════════════════════════════════════════════════════════════════════ */
[data-template="broadside"] .bd-statement-body {
  position: absolute !important;

  left: 144px !important;

  right: 144px !important;

  top: 200px !important;

  bottom: 160px !important;

  display: flex !important;

  flex-direction: column !important;

  justify-content: center !important;

  gap: 22px !important;

  z-index: 2 !important;

}
[data-template="broadside"] .bd-statement-h1 {
  font-family: var(--bd-font-heading) !important;

  font-size: var(--bd-sz-h1) !important;

  font-weight: 800 !important;

  line-height: 0.9 !important;

  letter-spacing: -0.03em !important;

  color: var(--bd-fg) !important;

}
[data-template="broadside"] .bd-statement-h1 em {
  color: var(--bd-accent) !important;

  font-style: normal !important;

}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT 4 · SPLIT (dark)
   Left text, right image. h2 ≤ 8 words · 3 bullets each ≤ 8 words.
   ═══════════════════════════════════════════════════════════════════════ */
[data-template="broadside"] .bd-split-grid {
  position: absolute !important;

  left: 144px !important;

  right: 144px !important;

  top: 200px !important;

  bottom: 160px !important;

  display: grid !important;

  grid-template-columns: 1fr 1fr !important;

  gap: 80px !important;

  align-items: center !important;

  z-index: 2 !important;

}
[data-template="broadside"] .bd-split-text {
  display: flex !important;

  flex-direction: column !important;

  gap: 22px !important;

}
[data-template="broadside"] .bd-split-text .bd-h2 em {
  color: var(--bd-accent) !important;

  font-style: normal !important;

}
[data-template="broadside"] .bd-split-image {
  display: flex !important;

  flex-direction: column !important;

  gap: 14px !important;

  height: 100% !important;

}
[data-template="broadside"] .bd-split-image-frame {
  flex: 1 !important;

  background: var(--bd-bg-alt) !important;

  border: 1px solid var(--bd-border) !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  min-height: 480px !important;

  overflow: hidden !important;

}
[data-template="broadside"] .bd-split-image-frame img {
  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

  display: block !important;

}
[data-template="broadside"] .bd-split-image-frame .bd-img-placeholder {
  font-family: var(--bd-font-mono) !important;

  font-size: var(--bd-sz-label) !important;

  color: var(--bd-fg-3) !important;

  letter-spacing: 0.14em !important;

  text-transform: uppercase !important;

}

/* Bullet list (used in split + list layouts) */
[data-template="broadside"] .bd-bullet-list {
  list-style: none !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 16px !important;

  margin: 0 !important;

  padding: 0 !important;

}
[data-template="broadside"] .bd-bullet-list li {
  display: flex !important;

  align-items: baseline !important;

  gap: 12px !important;

  font-family: var(--bd-font-body) !important;

  font-size: var(--bd-sz-body) !important;

  font-weight: 500 !important;

  line-height: 1.5 !important;

  color: var(--bd-fg) !important;

}
[data-template="broadside"] .bd-bullet-list li::before {
  content: "/" !important;

  color: var(--bd-accent) !important;

  font-family: var(--bd-font-mono) !important;

  font-weight: 700 !important;

  flex-shrink: 0 !important;

  min-width: 24px !important;

}
[data-template="broadside"] .bd-bullet-list li > span:empty {
  display: none !important;

}
[data-template="broadside"] .bd-bullet-list li > span {
  flex: 1 !important;

  min-width: 0 !important;

}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT 5 · STATS (orange)
   3 or 4 large numbers in fire-orange env. Numbers in dark ink.
   ═══════════════════════════════════════════════════════════════════════ */
[data-template="broadside"][data-layout="stats"] > .slide-scale-inner {
  background: var(--bd-bg-orange) !important;

  color: var(--bd-fg-light) !important;

}
[data-template="broadside"] .bd-stats-body {
  position: absolute !important;

  left: 106px !important;

  right: 106px !important;

  top: 200px !important;

  bottom: 160px !important;

  display: flex !important;

  flex-direction: column !important;

  justify-content: center !important;

  gap: 38px !important;

  z-index: 2 !important;

}
[data-template="broadside"] .bd-stats-headline {
  font-family: var(--bd-font-display) !important;

  font-size: var(--bd-sz-h2) !important;

  font-weight: 800 !important;

  line-height: 1.0 !important;

  letter-spacing: -0.02em !important;

  color: var(--bd-fg-light) !important;

  max-width: 1200px !important;

}
[data-template="broadside"] .bd-stats-grid {
  display: grid !important;

  grid-template-columns: repeat(3, 1fr) !important;

  gap: 0 !important;

}
[data-template="broadside"] .bd-stats-grid.bd-cols-4 {
  grid-template-columns: repeat(4, 1fr) !important;

}
[data-template="broadside"] .bd-stat-card {
  display: flex !important;

  flex-direction: column !important;

  gap: 14px !important;

  padding: 22px 22px 22px 0 !important;

  border-top: 2px solid var(--bd-fg-light) !important;

}
[data-template="broadside"] .bd-stat-value {
  font-family: var(--bd-font-display) !important;

  font-size: 106px !important;

  font-weight: 900 !important;

  line-height: 1 !important;

  color: var(--bd-fg-light) !important;

  letter-spacing: -0.04em !important;

}
[data-template="broadside"] .bd-stat-label {
  font-family: var(--bd-font-body) !important;

  font-size: var(--bd-sz-body) !important;

  font-weight: 500 !important;

  line-height: 1.4 !important;

  color: var(--bd-fg-light) !important;

}
[data-template="broadside"] .bd-stat-note {
  font-family: var(--bd-font-mono) !important;

  font-size: var(--bd-sz-caption) !important;

  letter-spacing: 0.05em !important;

  color: var(--bd-fg-light-3) !important;

}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT 6 · QUOTE (dark)
   Full-slide pull quote. Orange opening mark. ≤ 26 words.
   ═══════════════════════════════════════════════════════════════════════ */
[data-template="broadside"] .bd-quote-body {
  position: absolute !important;

  left: 158px !important;

  right: 158px !important;

  top: 130px !important;

  bottom: 130px !important;

  display: flex !important;

  flex-direction: column !important;

  justify-content: center !important;

  z-index: 2 !important;

}
[data-template="broadside"] .bd-quote-mark {
  font-family: var(--bd-font-display) !important;

  font-size: 192px !important;

  line-height: 0.6 !important;

  color: var(--bd-accent) !important;

  margin-bottom: 22px !important;

  font-weight: 900 !important;

}
[data-template="broadside"] .bd-quote-text {
  font-family: var(--bd-font-display) !important;

  font-size: 73px !important;

  font-weight: 700 !important;

  line-height: 1.15 !important;

  letter-spacing: -0.02em !important;

  max-width: 78% !important;

  margin-bottom: 38px !important;

  color: var(--bd-fg) !important;

}
[data-template="broadside"] .bd-quote-attr {
  display: flex !important;

  flex-direction: column !important;

  gap: 4px !important;

}
[data-template="broadside"] .bd-quote-attr .bd-quote-author {
  font-family: var(--bd-font-body) !important;

  font-size: var(--bd-sz-lead) !important;

  font-weight: 600 !important;

  color: var(--bd-fg) !important;

}
[data-template="broadside"] .bd-quote-attr .bd-quote-role {
  font-family: var(--bd-font-mono) !important;

  font-size: var(--bd-sz-caption) !important;

  letter-spacing: 0.1em !important;

  text-transform: uppercase !important;

  color: var(--bd-fg-2) !important;

}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT 7 · LIST (dark)
   Headline left, bullets right. Max 4 bullets. ≤ 14 words each.
   ═══════════════════════════════════════════════════════════════════════ */
[data-template="broadside"] .bd-list-grid {
  position: absolute !important;

  left: 144px !important;

  right: 144px !important;

  top: 200px !important;

  bottom: 160px !important;

  display: grid !important;

  grid-template-columns: 2fr 3fr !important;

  gap: 90px !important;

  align-items: center !important;

  z-index: 2 !important;

}
[data-template="broadside"] .bd-list-head {
  display: flex !important;

  flex-direction: column !important;

  gap: 22px !important;

  padding-top: 16px !important;

}
[data-template="broadside"] .bd-list-head .bd-h2 em {
  color: var(--bd-accent) !important;

  font-style: normal !important;

}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT 8 · COMPARE (dark)
   Side-by-side before/after. Orange "after" label. EXACTLY 2 panels.
   ═══════════════════════════════════════════════════════════════════════ */
[data-template="broadside"] .bd-compare-grid {
  position: absolute !important;

  left: 144px !important;

  right: 144px !important;

  top: 200px !important;

  bottom: 160px !important;

  display: grid !important;

  grid-template-columns: 1fr 1fr !important;

  gap: 0 !important;

  z-index: 2 !important;

}
[data-template="broadside"] .bd-compare-panel {
  display: flex !important;

  flex-direction: column !important;

  gap: 22px !important;

  padding: 22px 0 !important;

}
[data-template="broadside"] .bd-compare-panel.bd-left {
  padding-right: 60px !important;

  border-right: 1px solid var(--bd-border) !important;

}
[data-template="broadside"] .bd-compare-panel.bd-right {
  padding-left: 60px !important;

}
[data-template="broadside"] .bd-compare-label {
  font-family: var(--bd-font-mono) !important;

  font-size: var(--bd-sz-label) !important;

  letter-spacing: 0.16em !important;

  text-transform: uppercase !important;

  padding-bottom: 11px !important;

  border-bottom: 1px solid var(--bd-border) !important;

  color: var(--bd-fg-2) !important;

}
[data-template="broadside"] .bd-compare-label.bd-after {
  color: var(--bd-accent) !important;

  border-color: var(--bd-accent) !important;

}
[data-template="broadside"] .bd-compare-h3 {
  font-family: var(--bd-font-heading) !important;

  font-size: var(--bd-sz-h3) !important;

  font-weight: 700 !important;

  line-height: 1.15 !important;

  color: var(--bd-fg) !important;

}
[data-template="broadside"] .bd-compare-h3 em {
  color: var(--bd-accent) !important;

  font-style: normal !important;

}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT 9 · CHART-BAR (dark — Chart.js with fire-orange hero bar)
   4-7 bars. Use Chart.js. Last bar typically the "hero" data point.
   ═══════════════════════════════════════════════════════════════════════ */
[data-template="broadside"] .bd-chart-body {
  position: absolute !important;

  left: 144px !important;

  right: 144px !important;

  top: 200px !important;

  bottom: 160px !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 28px !important;

  z-index: 2 !important;

}
[data-template="broadside"] .bd-chart-header {
  display: flex !important;

  justify-content: space-between !important;

  align-items: baseline !important;

  flex-shrink: 0 !important;

}
[data-template="broadside"] .bd-chart-header .bd-h2 em {
  color: var(--bd-accent) !important;

  font-style: normal !important;

}
[data-template="broadside"] .bd-chart-wrap {
  position: relative !important;

  flex: 1 !important;

  display: flex !important;

  flex-direction: column !important;

  justify-content: flex-end !important;

  min-height: 0 !important;

}
[data-template="broadside"] .bd-chart-wrap > canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
[data-template="broadside"] .bd-chart-source {
  font-family: var(--bd-font-mono) !important;

  font-size: var(--bd-sz-caption) !important;

  color: var(--bd-fg-3) !important;

  letter-spacing: 0.06em !important;

  margin-top: 18px !important;

  flex-shrink: 0 !important;

}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT 10 · END (orange)
   Closing slide. Massive closing headline on fire orange. ≤ 8 words.
   ═══════════════════════════════════════════════════════════════════════ */
[data-template="broadside"] .bd-end-body {
  position: absolute !important;

  left: 106px !important;

  right: 106px !important;

  top: 106px !important;

  bottom: 106px !important;

  display: flex !important;

  flex-direction: column !important;

  justify-content: center !important;

  gap: 22px !important;

  z-index: 2 !important;

}
[data-template="broadside"] .bd-end-title {
  font-family: var(--bd-font-display) !important;

  font-size: var(--bd-sz-display) !important;

  font-weight: 900 !important;

  line-height: 0.88 !important;

  letter-spacing: -0.04em !important;

  color: var(--bd-fg-light) !important;

}
[data-template="broadside"] .bd-end-contact {
  font-family: var(--bd-font-mono) !important;

  font-size: var(--bd-sz-caption) !important;

  letter-spacing: 0.14em !important;

  text-transform: uppercase !important;

  color: var(--bd-fg-light-3) !important;

  margin-top: 38px !important;

  padding-top: 16px !important;

  border-top: 1px solid var(--bd-border-light) !important;

}
emitted 27166 chars to stdout


/* ═══════════════════════════════════════════════════════════════════════════
   D-form fallback — section-level bg
   ───────────────────────────────────────────────────────────────────────────
   Layout bg rules above target `> .slide-scale-inner`, but D-form decks
   (AI-gen via generate-modal → JsonRenderer.renderSlide) render slide
   section's direct child as `.obj-html` instead of `.slide-scale-inner`,
   so the bg selector misses and falls back to thumbWrap's inline white.
   Mirror each layout bg directly to the section element so D-form preview
   renders correct bg. Editor path (section > .slide-scale-inner) is
   unaffected because inner has inset:0 fully covering section bg paint.
   (Rainy 2026-06-22: batch fix after retro-modern proof-of-fix.)
   ═══════════════════════════════════════════════════════════════════════════ */
[data-template="broadside"][data-layout="chapter"],
[data-template="broadside"][data-layout="cover"],
[data-template="broadside"][data-layout="end"],
[data-template="broadside"][data-layout="stats"] {
  background: var(--bd-bg-orange) !important;
}