/* Auto-generated by scripts/extract-broadside-runtime.py warm-earth — DO NOT hand-edit.
 * Source: html_gen_prompt.py _WARM_EARTH_EXTRA_TOKENS + _WARM_EARTH_STAT_CARD_CSS
 * Loaded by editor.html so editor + viewer render warm-earth 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=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');



[data-template="warm-earth"] {

  /* ── WARM EARTH design tokens (mirror of warm-earth.html :root) ── */
  --slide-bg-cream: #FFF8F0 !important; /* default canvas fill */
  --slide-bg-yellow: #FFBE32 !important; /* marigold (E1 hero, E4 statement, E8 alt cell) */
  --slide-card-sand: #FBE9CB !important; /* card fill (E5 alt bg, E6 metric cards) */
  --slide-ink-deep: #2A1300 !important; /* primary text */
  --slide-ink-warm: #5C2500 !important; /* secondary text + AI-image placeholder */
  --slide-rule: #7A4019 !important; /* card outline + row hairline */
  --we-cover-title: #5C2500 !important; /* cover h1 */
  --we-cover-sub: #8B4513 !important; /* cover subtitle */
  /* Fonts — Hanken Grotesk for display, JetBrains Mono for monospace.
     Loaded via Google Fonts in deck-engine.css. */
  --font-display: 'Hanken Grotesk', system-ui, sans-serif !important;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace !important;
  --font-heading: 'Hanken Grotesk', system-ui, sans-serif !important;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   WARM EARTH — slide-production component CSS
   Canvas: 1920×1080 for E1–E12 + closing !important; 1440×900 for cover.;
   Source of truth: design-specs/warm-earth.html
   Every selector is scoped under .slide so it cannot affect other templates;
   the runtime applies `[data-template="warm-earth"]` via deck-engine.js.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Slide canvas ── */
[data-template="warm-earth"].slide {
  width: 1920px !important; height: 1080px !important;
  position: relative !important; overflow: hidden !important;
  /* background intentionally NOT set here — deck-engine.css line 885+
     puts the cream on .slide-scale-inner (with rounded corners + shadow)
     so the slide section reads as a card on neutral editor chrome.
     Setting cream on .slide here would flood the editor area.
     (Rainy 2026-06-17 — "bg 颜色都扩散到 slide 外了".) */
  font-family: var(--font-display) !important;
  color: var(--slide-ink-deep) !important;
  box-sizing: border-box !important;
}
[data-template="warm-earth"] .slide * { box-sizing: border-box; }

/* ── Background primitives — every layout starts with one of these ── */
[data-template="warm-earth"] .s-bg { position: absolute; inset: 0; background: var(--slide-bg-cream); z-index: 0; }
[data-template="warm-earth"] .s-bg--yellow { background: var(--slide-bg-yellow); }
[data-template="warm-earth"] .s-bg--sand { background: var(--slide-card-sand); }

/* Soft-light noise overlay for E4 / E5 — texture comes from a static asset.
   The PNG-equivalent asset path is `engine/warm-earth-deco-0.webp` (cream
   noise) and `engine/warm-earth-deco-1.webp` (sand noise). */
[data-template="warm-earth"] .s-noise, [data-template="warm-earth"] .s-noise--sand {
  position: absolute !important; inset: 0 !important;
  background-size: 100% 100% !important; background-repeat: no-repeat !important;
  mix-blend-mode: soft-light !important; pointer-events: none !important;
  z-index: 1 !important;
}
[data-template="warm-earth"] .s-noise { background-image: url('warm-earth-deco-0.webp'); }
[data-template="warm-earth"] .s-noise--sand { background-image: url('warm-earth-deco-1.webp'); }

/* Caption + date row at the very top — 22px / 700, uppercase, tracking 0.16em. */
[data-template="warm-earth"] .s-caption, [data-template="warm-earth"] .s-date {
  position: absolute !important; top: 50px !important;
  font: 700 22px/1 var(--font-display) !important;
  letter-spacing: 0.16em !important; text-transform: uppercase !important;
  color: var(--slide-ink-warm) !important; z-index: 5 !important;
}
[data-template="warm-earth"] .s-caption { left: 40px; }
[data-template="warm-earth"] .s-date { right: 40px; }

/* AI-illustration rectangle — replaced in production by an <img> generated
   by the image-gen pipeline. Default fill = warm ink; alt fill = marigold. */[data-template="warm-earth"] ;
.s-ai-rect { position: absolute; background: var(--slide-ink-warm); z-index: 2; }
[data-template="warm-earth"] .s-ai-rect--alt { background: var(--slide-bg-yellow); }
[data-template="warm-earth"] .s-ai-rect > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Decorative PNG layer — base64 PNGs are extracted at build time and saved
   into `code/engine/warm-earth-deco-{N}.webp`. The slide markup references
   them via `engine/warm-earth-deco-{N}.webp` — same convention as
   `engine/midnight-cover-bg.png`. */
[data-template="warm-earth"] .s-deco {
  position: absolute !important; pointer-events: none !important; user-select: none !important; z-index: 1 !important;
}
[data-template="warm-earth"] .s-deco img { width: 100%; height: 100%; display: block; }

/* ── 0. COVER — 1440×900 canvas centered inside the 1920×1080 stage.
   FIDELITY DECISION: the spec's cover is natively 1440×900. The editor
   renders every slide at 1920×1080 with a transform:scale fit. We pick
   option (A) from the design brief: cover content is centered inside a
   1440×900 island ((1920−1440)/2 = 240 px left/right gutter), and the
   cream background fills the full 1920×1080 so the gutter never reads
   as transparent. The animated arcs SVG is loaded as a static asset
   from `engine/warm-earth-cover.svg`. */
[data-template="warm-earth"].slide[data-layout="cover"], [data-template="warm-earth"].slide[data-layout="closing"] {
  background: var(--slide-bg-cream) !important;
}
[data-template="warm-earth"] .we-cover-stage {
  /* (Rainy 2026-05-28) — was 1440×900 centered at (240, 90), leaving cream
     margins around the cover decoration. User wanted cover to fill the slide
     canvas. Now fills full 1920×1080. The .we-cover-bg SVG uses
     `background-size: cover` so it stretches to fill the new dimensions. */
  position: absolute !important; inset: 0 !important;
  overflow: hidden !important;
  background: var(--slide-bg-cream) !important;
}
[data-template="warm-earth"] .we-cover-bg {
  position: absolute !important; inset: 0 !important;
  background: url('warm-earth-cover.svg') center/cover no-repeat !important;
  z-index: 0 !important;
}
[data-template="warm-earth"] .cover-content {
  position: absolute !important; left: 100px !important; top: 55% !important;
  transform: translateY(-50%) !important; z-index: 10 !important;
  animation: weFadeUp 1.2s 0.2s cubic-bezier(0.22,1,0.36,1) both !important;
}
[data-template="warm-earth"] .cover-content h1 {
  font-size: 80px !important; font-weight: 800 !important; line-height: 1.0 !important;
  color: var(--we-cover-title) !important; letter-spacing: -2px !important;
  margin-bottom: 24px !important;
  font-family: 'Segoe UI', 'PingFang SC', sans-serif !important;
}
[data-template="warm-earth"] .cover-content .sub {
  font-size: 20px !important; color: var(--we-cover-sub) !important;
  font-weight: 400 !important;
  font-family: 'Segoe UI', 'PingFang SC', sans-serif !important;
}
@keyframes weFadeUp {
  from { opacity: 0; transform: translateY(calc(-50% + 30px)); }
  to   { opacity: 1; transform: translateY(-50%); }
}

/* ── E1 — Hero / Section opener (full-bleed marigold + bloom deco) ── */
[data-template="warm-earth"] .s32-headline {
  position: absolute !important; left: 58px !important; top: 64px !important;
  font: 800 120px/0.95 var(--font-display) !important;
  letter-spacing: -0.025em !important; color: var(--slide-ink-deep) !important;
  white-space: nowrap !important; z-index: 5 !important;
}
[data-template="warm-earth"] .s32-body {
  position: absolute !important; left: 58px !important; top: 775px !important; width: 1500px !important;
  font: 400 38px/1.4 var(--font-display) !important;
  color: var(--slide-ink-deep) !important; z-index: 5 !important;
}

/* ── E2 — Numbered list / Agenda (5 hairline rows) ── */
[data-template="warm-earth"] .s33-row {
  position: absolute !important; left: 0 !important; right: 0 !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  padding: 0 40px !important; height: 168px !important;
  border-bottom: 1px solid var(--slide-rule) !important;
  z-index: 3 !important;
}
[data-template="warm-earth"] .s33-row__num { font: 700 80px/1 var(--font-display); color: var(--slide-ink-deep); }
[data-template="warm-earth"] .s33-row__head { font: 700 80px/1 var(--font-display); color: var(--slide-ink-deep); letter-spacing: -0.01em; }

/* ── E3 — Headline + extended body (2 paragraphs) ── */
[data-template="warm-earth"] .s34-headline {
  position: absolute !important; left: 40px !important; top: 407px !important;
  font: 700 80px/1 var(--font-display) !important;
  letter-spacing: -0.015em !important; color: var(--slide-ink-deep) !important;
  z-index: 3 !important;
}
[data-template="warm-earth"] .s34-body-col { position: absolute; left: 660px; top: 334px; width: 1220px; z-index: 3; }
[data-template="warm-earth"] .s34-body-col p { font: 400 38px/1.4 var(--font-display); color: var(--slide-ink-deep); }
[data-template="warm-earth"] .s34-body-col p + p { margin-top: 80px; }

/* ── E4 — Big statement (centered, marigold + arcs) ── */
[data-template="warm-earth"] .s35-statement {
  position: absolute !important; inset: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  text-align: center !important; z-index: 3 !important;
}
[data-template="warm-earth"] .s35-statement__text {
  max-width: 1500px !important; padding: 0 80px !important;
  font: 700 80px/1.1 var(--font-display) !important;
  letter-spacing: -0.015em !important; color: var(--slide-ink-deep) !important;
  position: relative !important; z-index: 2 !important;
}

/* ── E5 — 3-column outlined cards (sand bg + noise) ── */
[data-template="warm-earth"] .s36-card {
  /* (Rainy 2026-05-28) min-height + auto: 长 body 撑高,不溢出底部 */
  position: absolute !important; width: 611.67px !important; min-height: 1038px !important; height: auto !important;
  border: 1.5px solid var(--slide-rule) !important; border-radius: 15px !important;
  padding: 52px !important;
  display: flex !important; flex-direction: column !important; justify-content: space-between !important;
  z-index: 3 !important;
}
[data-template="warm-earth"] .s36-card__num { font: 700 16px/1 var(--font-mono); color: var(--slide-ink-deep); letter-spacing: 0.04em; }
[data-template="warm-earth"] .s36-card__head { font: 700 80px/1 var(--font-display); color: var(--slide-ink-deep); letter-spacing: -0.01em; margin-top: 24px; }
[data-template="warm-earth"] .s36-card__head-wrap { flex: 1; }
[data-template="warm-earth"] .s36-card__body { font: 400 32px/1.45 var(--font-display); color: var(--slide-ink-deep); }

/* ── E6 — 2×2 metric cards (cream bg, sand-filled cards) ── */
[data-template="warm-earth"] .s37-card {
  /* (Rainy 2026-05-28) min-height + auto: 长 body 撑高,不溢出底部 */
  position: absolute !important; width: 930.5px !important; min-height: 510px !important; height: auto !important;
  background: var(--slide-card-sand) !important; border-radius: 16px !important;
  padding: 60px !important;
  display: flex !important; flex-direction: column !important; z-index: 3 !important;
}
[data-template="warm-earth"] .s37-card__sub { font: 700 38px/1 var(--font-display); color: var(--slide-ink-deep); margin-bottom: 24px; }
[data-template="warm-earth"] .s37-card__stat { font: 700 80px/1 var(--font-display); color: var(--slide-ink-deep); letter-spacing: -0.01em; }
[data-template="warm-earth"] .s37-card__rule { height: 1.5px; background: var(--slide-ink-deep); margin: 24px 0; }
[data-template="warm-earth"] .s37-card__body { font: 400 32px/1.45 var(--font-display); color: var(--slide-ink-deep); }

/* ── E7 — Image-left + body-right ── */
[data-template="warm-earth"] .s38-body { position: absolute; left: 1303px; top: 263px; width: 580px; z-index: 3; }
[data-template="warm-earth"] .s38-body__sub { font: 700 44px/1 var(--font-display); color: var(--slide-ink-deep); margin-bottom: 28px; white-space: nowrap; }
[data-template="warm-earth"] .s38-body__para { font: 400 38px/1.4 var(--font-display); color: var(--slide-ink-deep); }
[data-template="warm-earth"] .s38-body__para + .s38-body__para { margin-top: 64px; }

/* ── E8 / E9 — image-grid cells + per-cell captions ── */
[data-template="warm-earth"] .s-img-cell {
  position: absolute !important; width: 569px !important; height: 388px !important;
  background: var(--slide-ink-warm) !important; z-index: 2 !important;
}
[data-template="warm-earth"] .s-img-cell--alt { background: var(--slide-bg-yellow); }
[data-template="warm-earth"] .s-img-cell > img { width: 100%; height: 100%; object-fit: cover; display: block; }
[data-template="warm-earth"] .s-cell-caption { position: absolute; width: 569px; z-index: 3; }
[data-template="warm-earth"] .s-cell-caption__head { font: 700 38px/1.1 var(--font-display); color: var(--slide-ink-deep); margin-bottom: 16px; letter-spacing: -0.01em; }
[data-template="warm-earth"] .s-cell-caption__body { font: 400 32px/1.4 var(--font-display); color: var(--slide-ink-deep); }

/* ── E10 — Pull quote with attribution (deco anchored right) ── */
[data-template="warm-earth"] .s41-quote {
  position: absolute !important; left: 40px !important; top: 407px !important; width: 1300px !important;
  font: 500 80px/1.15 var(--font-display) !important;
  letter-spacing: -0.015em !important; color: var(--slide-ink-deep) !important;
  z-index: 3 !important;
}
[data-template="warm-earth"] .s41-attribution {
  position: absolute !important; left: 40px !important; top: 850px !important;
  font: 700 22px/1 var(--font-display) !important;
  letter-spacing: 0.16em !important; text-transform: uppercase !important;
  color: var(--slide-ink-deep) !important; z-index: 3 !important;
}

/* ── E11 — Headline + chart container (Chart.js host) ── */
[data-template="warm-earth"] .s42-headline {
  position: absolute !important; left: 40px !important; top: 132px !important;
  font: 700 80px/1 var(--font-display) !important;
  letter-spacing: -0.015em !important; color: var(--slide-ink-deep) !important;
  z-index: 3 !important;
}
[data-template="warm-earth"] .s42-chart {
  /* In production: transparent — Chart.js renders directly on the cream
     slide bg. The brown fill in the design spec is a sizing placeholder
     only (spec line 1425: "placeholder #5C2500 !important; in production transparent").;
     Chart.js color tokens: data #5C2500 · gridlines #E8DCC8 · axis labels
     22 px Hanken #2A1300. */
  position: absolute !important; left: 106px !important; top: 242px !important;
  width: 1708px !important; height: 765px !important;
  background: transparent !important; border-radius: 15px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  overflow: hidden !important; z-index: 2 !important;
}
[data-template="warm-earth"] .s42-chart__label {
  font: 700 13px/1 var(--font-mono) !important;
  letter-spacing: 0.16em !important; text-transform: uppercase !important;
  color: var(--slide-ink-warm) !important; opacity: 0.6 !important;
}
/* Chart.js render area — engine fills this; positioned inside .s42-chart */
[data-template="warm-earth"] .s42-chart .chart-host, [data-template="warm-earth"] .s42-chart canvas {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
}

/* ── E12 — Two big metrics (decorative anchored right) ── */
[data-template="warm-earth"] .s43-headline {
  position: absolute !important; left: 40px !important; top: 132px !important;
  font: 700 80px/1 var(--font-display) !important;
  letter-spacing: -0.015em !important; color: var(--slide-ink-deep) !important;
  z-index: 3 !important;
}
[data-template="warm-earth"] .s43-metric { position: absolute; width: 480px; text-align: center; z-index: 3; }
[data-template="warm-earth"] .s43-metric__num { font: 700 180px/1 var(--font-display); letter-spacing: -0.02em; color: var(--slide-ink-deep); margin-bottom: 32px; }
[data-template="warm-earth"] .s43-metric__cap { font: 700 30px/1.3 var(--font-display); color: var(--slide-ink-deep); letter-spacing: -0.005em; }
emitted 14213 chars to stdout

/* ─── Per-layout figma-sample bg PNG (Rainy 2026-06-18) ────────────────
   warm-earth's visual identity (cream paper + warm decorative shapes /
   metric cards / chart panels) lives in 7 hand-drawn PNGs under
   /samples/warm-earth-figma/assets/. The figma sample deck.json
   references them as `background.src` on each slide, but D-form AI-gen
   output has no background field — so AI-generated decks rendered as
   plain cream slides with no decorative artwork. Same fix pattern as
   botanical-blur 2026-06-17. ::before sits below all text/element
   slots; nothing else in warm-earth needs explicit z-index because the
   designed positioning is absolute and the bg pseudo is z:0. */
[data-template="warm-earth"] > .slide-scale-inner {
  position: relative !important;
}
[data-template="warm-earth"][data-layout="E1"]  > .slide-scale-inner::before,
[data-template="warm-earth"][data-layout="E4"]  > .slide-scale-inner::before,
[data-template="warm-earth"][data-layout="E5"]  > .slide-scale-inner::before,
[data-template="warm-earth"][data-layout="E8"]  > .slide-scale-inner::before,
[data-template="warm-earth"][data-layout="E9"]  > .slide-scale-inner::before,
[data-template="warm-earth"][data-layout="E10"] > .slide-scale-inner::before,
[data-template="warm-earth"][data-layout="E12"] > .slide-scale-inner::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
[data-template="warm-earth"][data-layout="E1"]  > .slide-scale-inner::before { background-image: url('/samples/warm-earth-figma/assets/Slide 16_9 - 71.png') !important; }
[data-template="warm-earth"][data-layout="E4"]  > .slide-scale-inner::before { background-image: url('/samples/warm-earth-figma/assets/Slide 16_9 - 73.png') !important; }
[data-template="warm-earth"][data-layout="E5"]  > .slide-scale-inner::before { background-image: url('/samples/warm-earth-figma/assets/Slide 16_9 - 75.png') !important; }
[data-template="warm-earth"][data-layout="E8"]  > .slide-scale-inner::before { background-image: url('/samples/warm-earth-figma/assets/Slide 16_9 - 76.png') !important; }
[data-template="warm-earth"][data-layout="E9"]  > .slide-scale-inner::before { background-image: url('/samples/warm-earth-figma/assets/Frame.png') !important; }
[data-template="warm-earth"][data-layout="E10"] > .slide-scale-inner::before { background-image: url('/samples/warm-earth-figma/assets/Slide 16_9 - 74.png') !important; }
[data-template="warm-earth"][data-layout="E12"] > .slide-scale-inner::before { background-image: url('/samples/warm-earth-figma/assets/Slide 16_9 - 72.png') !important; }
/* Make sure designed positioned children stack above the bg layer.
   warm-earth slot classes are .s-*, .s42-*, .s43-*, .we-* — set
   z-index on .slide-scale-inner direct children. */
[data-template="warm-earth"] > .slide-scale-inner > *:not(::before) {
  z-index: 1 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   D-form fallback — section-level ::before bg-image
   ───────────────────────────────────────────────────────────────────────────
   warm-earth uses `> .slide-scale-inner::before` PNG layers instead of
   solid bg colors. D-form decks (JsonRenderer.renderSlide) don't wrap
   in .slide-scale-inner, so the ::before selector misses → flat white.
   Mirror the same ::before chain to section directly. Editor path keeps
   working because its .slide-scale-inner::before still matches; both
   ::before layers paint identical PNG, fully covered by .slide-scale-inner.
   (Rainy 2026-06-22: batch D-form fallback fix.)
   ═══════════════════════════════════════════════════════════════════════════ */
[data-template="warm-earth"][data-layout="E1"]::before,
[data-template="warm-earth"][data-layout="E4"]::before,
[data-template="warm-earth"][data-layout="E5"]::before,
[data-template="warm-earth"][data-layout="E8"]::before,
[data-template="warm-earth"][data-layout="E9"]::before,
[data-template="warm-earth"][data-layout="E10"]::before,
[data-template="warm-earth"][data-layout="E12"]::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
[data-template="warm-earth"][data-layout="E1"]::before  { background-image: url('/samples/warm-earth-figma/assets/Slide 16_9 - 71.png') !important; }
[data-template="warm-earth"][data-layout="E4"]::before  { background-image: url('/samples/warm-earth-figma/assets/Slide 16_9 - 73.png') !important; }
[data-template="warm-earth"][data-layout="E5"]::before  { background-image: url('/samples/warm-earth-figma/assets/Slide 16_9 - 75.png') !important; }
[data-template="warm-earth"][data-layout="E8"]::before  { background-image: url('/samples/warm-earth-figma/assets/Slide 16_9 - 76.png') !important; }
[data-template="warm-earth"][data-layout="E9"]::before  { background-image: url('/samples/warm-earth-figma/assets/Frame.png') !important; }
[data-template="warm-earth"][data-layout="E10"]::before { background-image: url('/samples/warm-earth-figma/assets/Slide 16_9 - 74.png') !important; }
[data-template="warm-earth"][data-layout="E12"]::before { background-image: url('/samples/warm-earth-figma/assets/Slide 16_9 - 72.png') !important; }