/* Auto-generated by scripts/extract-broadside-runtime.py signal — DO NOT hand-edit.
 * Source: html_gen_prompt.py _SIGNAL_EXTRA_TOKENS + _SIGNAL_STAT_CARD_CSS
 * Loaded by editor.html so editor + viewer render signal 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=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=DM+Sans:ital,opsz,wght@0,9..40,300..900;1,9..40,300..900&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Serif+SC:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

  

[data-template="signal"] {

  /* ─────────────────────────────────────────────────────────
     Signal — design tokens (vellum revision · 2026-05-07)
     Coordinate system: 1920×1080 design canvas (NOT vw/vh).
     Visual identity: deep periwinkle navy + warm-yellow italic
                      Cormorant serifs + dusty teal quote accent.
                      Quiet scholarly aesthetic. Single dark
                      palette across every layout — no inverted
                      light theme; .*-light tokens alias to dark.
     EN/CN bilingual via Noto Serif/Sans SC fallback fonts.
     ───────────────────────────────────────────────────────── */
  /* ── PALETTE — DEEP PERIWINKLE · WARM YELLOW · DUSTY TEAL ── */
  --sg-bg: #2a3870 !important;  /* deep periwinkle navy — every slide  */

  --sg-bg-alt: #343f80 !important;  /* slightly lifted alt for cards/frames */

  --sg-bg-light: #2a3870 !important;  /* alias — vellum has no light scheme  */

  --sg-bg-light-alt: #343f80 !important;  /* alias                                */


  --sg-fg: #E8D85C !important;  /* warm yellow type — every slide      */

  --sg-fg-2: rgba(232, 216, 92, 0.62) !important;  /* secondary (62%)    */

  --sg-fg-3: rgba(232, 216, 92, 0.32) !important;  /* tertiary (32%)     */

  --sg-fg-light: #E8D85C !important;  /* alias                                */

  --sg-fg-light-2: rgba(232, 216, 92, 0.62) !important;  /* alias               */

  --sg-fg-light-3: rgba(232, 216, 92, 0.32) !important;  /* alias               */


  --sg-accent: #3a7878 !important;  /* dusty teal — quote glyphs / sparing  */

  --sg-emphasis: #F5E168 !important;  /* brighter yellow — <em> highlights    */

  --sg-border: rgba(232, 216, 92, 0.20) !important;  /* yellow @ 20% alpha  */

  --sg-border-light: rgba(232, 216, 92, 0.20) !important;  /* alias               */


  /* ── TYPOGRAPHY — ITALIC CORMORANT DISPLAY + CLEAN SANS BODY ── */
  --sg-font-display: "Cormorant Garamond", "Noto Serif SC", Georgia, serif !important;

  --sg-font-heading: "Cormorant Garamond", "Noto Serif SC", Georgia, serif !important;

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

  --sg-font-mono: "Courier Prime", "Courier New", monospace !important;

  /* Cross-template alias (any inherited rule that reads --font-heading
     / --font-body resolves to Signal's stack). */
  --font-heading: "Cormorant Garamond", "Noto Serif SC", Georgia, serif !important;

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


  /* ── TYPE SCALE — 1920×1080 fixed px (converted from spec's vw scale) ── */
  --sg-sz-display: 180px !important;  /* hero cover — 9.5vw of 1920 ≈ 182 → 180 */

  --sg-sz-h1: 100px !important;  /* chapter / statement — 5.2vw ≈ 100 */

  --sg-sz-h2: 58px !important;   /* slide headlines — 3vw ≈ 58 */

  --sg-sz-h3: 36px !important;   /* sub-headlines — 1.9vw ≈ 36 */

  --sg-sz-lead: 27px !important;   /* lead paragraph — 1.4vw ≈ 27 */

  --sg-sz-body: 20px !important;   /* body text — 1.05vw ≈ 20 */

  --sg-sz-caption: 16px !important;   /* captions / footnotes — 0.82vw ≈ 16 */

  --sg-sz-label: 14px !important;   /* mono labels / kickers — 0.7vw ≈ 14 */

}


/* ═══════════════════════════════════════════════════════════════════════════
   SIGNAL — Slide-production component CSS
   Canvas: 1920×1080. All sizes in canvas pixels (NEVER vw / vh).
   Source of truth: design-specs/signal.html
   ALL selectors scoped under [data-template="signal"] — never bare.
   Class names use sg- prefix to avoid cross-template collisions.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── ROOT / BASE ─────────────────────────────────────────────────────── */
[data-template="signal"].slide,
[data-template="signal"] .slide {
  background: var(--sg-bg) !important;

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

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

  position: relative !important;

  overflow: hidden !important;

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

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

  color: inherit !important;

  margin: 0 !important;

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

}

/* Signal signature: italic serif in muted gold for <em> inside headlines */
[data-template="signal"] h1 em,
[data-template="signal"] h2 em,
[data-template="signal"] h3 em,
[data-template="signal"] .sg-display em,
[data-template="signal"] .sg-h1 em,
[data-template="signal"] .sg-h2 em,
[data-template="signal"] .sg-h3 em,
[data-template="signal"] .sg-lead em {
  font-style: italic !important;

  color: var(--sg-emphasis) !important;

  font-family: var(--sg-font-heading) !important;

}

/* Subtle 80×80 grid texture on dark slides — Signal's fingerprint */
[data-template="signal"][data-layout="cover"]::before,
[data-template="signal"][data-layout="chapter"]::before,
[data-template="signal"][data-layout="statement"]::before,
[data-template="signal"][data-layout="stats"]::before,
[data-template="signal"][data-layout="quote"]::before,
[data-template="signal"][data-layout="compare"]::before,
[data-template="signal"][data-layout="editorial"]::before,
[data-template="signal"][data-layout="dense"]::before,
[data-template="signal"][data-layout="chart-bar"]::before,
[data-template="signal"][data-layout="chart-pie"]::before,
[data-template="signal"][data-layout="pyramid"]::before,
[data-template="signal"][data-layout="vtimeline"]::before,
[data-template="signal"][data-layout="cycle"]::before,
[data-template="signal"][data-layout="closing"]::before {
  content: "" !important;

  position: absolute !important;

  inset: 0 !important;

  /* Single-line bg-image so _force_important catches it — see cobalt-grid
     .cg- slide-scale-inner rule for rationale. */
  background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) !important;

  background-size: 80px 80px !important;

  pointer-events: none !important;

  z-index: 0 !important;

}
[data-template="signal"] > * {
  position: relative !important;

  z-index: 1 !important;

}

/* Reusable typography helpers (sg-prefixed; never bare).
   Vellum revision: all serif display classes default to italic. */
[data-template="signal"] .sg-display {
  font-family: var(--sg-font-display) !important;

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

  font-weight: 600 !important;

  font-style: italic !important;

  line-height: 0.96 !important;

  letter-spacing: -0.02em !important;

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

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

  font-weight: 500 !important;

  font-style: italic !important;

  line-height: 1.08 !important;

  letter-spacing: -0.01em !important;

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

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

  font-weight: 500 !important;

  font-style: italic !important;

  line-height: 1.18 !important;

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

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

  font-weight: 500 !important;

  font-style: italic !important;

  line-height: 1.3 !important;

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

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

  font-weight: 400 !important;

  line-height: 1.58 !important;

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

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

  font-weight: 400 !important;

  line-height: 1.65 !important;

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

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

  font-weight: 400 !important;

  line-height: 1.5 !important;

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

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

  font-weight: 500 !important;

  letter-spacing: 0.14em !important;

  text-transform: uppercase !important;

}
[data-template="signal"] .sg-muted     { color: var(--sg-fg-2); }
[data-template="signal"] .sg-muted-lt  { color: var(--sg-fg-light-2); }
[data-template="signal"] .sg-accent    { color: var(--sg-accent); }
[data-template="signal"] .sg-rule {
  width: 90px !important;

  height: 2px !important;

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

  display: block !important;

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

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

  letter-spacing: 0.2em !important;

  text-transform: uppercase !important;

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

}
[data-template="signal"] .sg-tag {
  display: inline-block !important;

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

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

  letter-spacing: 0.14em !important;

  text-transform: uppercase !important;

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

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

  padding: 6px 16px !important;

  line-height: 1 !important;

}

/* Reusable chrome bar (mono labels left + right divided by border) */
[data-template="signal"] .sg-chrome {
  position: absolute !important;

  left: 144px !important;

  right: 144px !important;

  top: 60px !important;

  display: flex !important;

  justify-content: space-between !important;

  align-items: center !important;

  padding-bottom: 18px !important;

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

  z-index: 2 !important;

}
[data-template="signal"] .sg-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: 18px !important;

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

  z-index: 2 !important;

}
[data-template="signal"] .sg-chrome .sg-label,
[data-template="signal"] .sg-foot .sg-label {
  color: var(--sg-fg-2) !important;

}
/* Light-variant chrome borders */
[data-template="signal"][data-layout="split"] .sg-chrome,
[data-template="signal"][data-layout="split"] .sg-foot,
[data-template="signal"][data-layout="list"] .sg-chrome,
[data-template="signal"][data-layout="list"] .sg-foot,
[data-template="signal"][data-layout="diagram"] .sg-chrome,
[data-template="signal"][data-layout="diagram"] .sg-foot {
  border-color: var(--sg-border-light) !important;

}
[data-template="signal"][data-layout="split"] .sg-chrome .sg-label,
[data-template="signal"][data-layout="split"] .sg-foot .sg-label,
[data-template="signal"][data-layout="list"] .sg-chrome .sg-label,
[data-template="signal"][data-layout="list"] .sg-foot .sg-label,
[data-template="signal"][data-layout="diagram"] .sg-chrome .sg-label,
[data-template="signal"][data-layout="diagram"] .sg-foot .sg-label {
  color: var(--sg-fg-light-2) !important;

}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT 1 · COVER (dark)
   Hero title — kicker · gold rule · large display + italic em accent ·
   subtitle (italic serif) · meta bar (author / version)
   Title ≤ 6 words · subtitle ≤ 18 words.
   ═══════════════════════════════════════════════════════════════════════ */
[data-template="signal"][data-layout="cover"],
[data-template="signal"][data-layout="cover"] > .slide-scale-inner {
  background: var(--sg-bg) !important;

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

}
[data-template="signal"] .sg-cover-body {
  position: absolute !important;

  left: 144px !important;

  right: 144px !important;

  bottom: 110px !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 36px !important;

  z-index: 2 !important;

}
[data-template="signal"] .sg-cover-stamp {
  font-family: var(--sg-font-mono) !important;

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

  letter-spacing: 0.2em !important;

  text-transform: uppercase !important;

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

}
[data-template="signal"] .sg-cover-rule {
  width: 90px !important;

  height: 2px !important;

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

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

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

  font-weight: 700 !important;

  line-height: 0.96 !important;

  letter-spacing: -0.02em !important;

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

  /* (Rainy 2026-05-29: "我不要 textAlign: center, 我要 left/start" — keep
     the editorial left-aligned heading; previous attempt to center was
     reverted.) */
  text-align: left !important;

  max-width: 1500px !important;

}
[data-template="signal"] .sg-cover-title em {
  font-style: italic !important;

  color: var(--sg-emphasis) !important;

}
[data-template="signal"] .sg-cover-subtitle {
  font-family: var(--sg-font-heading) !important;

  font-style: italic !important;

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

  line-height: 1.5 !important;

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

  max-width: 900px !important;

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

  justify-content: space-between !important;

  align-items: flex-end !important;

  margin-top: 24px !important;

  padding-top: 22px !important;

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

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

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

  letter-spacing: 0.14em !important;

  text-transform: uppercase !important;

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

}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT 2 · CHAPTER (dark)
   Section divider — chapter num (mono) · gold rule · title with italic em
   accent · description.   kicker ≤ 4 words · title ≤ 10 words.
   ═══════════════════════════════════════════════════════════════════════ */
[data-template="signal"][data-layout="chapter"],
[data-template="signal"][data-layout="chapter"] > .slide-scale-inner {
  background: var(--sg-bg) !important;

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

}
[data-template="signal"] .sg-chapter-body {
  position: absolute !important;

  left: 144px !important;

  right: 144px !important;

  top: 50% !important;

  transform: translateY(-50%) !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 36px !important;

  z-index: 2 !important;

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

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

  letter-spacing: 0.2em !important;

  text-transform: uppercase !important;

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

}
[data-template="signal"] .sg-chapter-rule {
  width: 90px !important;

  height: 2px !important;

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

}
[data-template="signal"] .sg-chapter-title {
  font-family: var(--sg-font-heading) !important;

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

  font-weight: 600 !important;

  line-height: 1.08 !important;

  letter-spacing: -0.01em !important;

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

  max-width: 1100px !important;

}
[data-template="signal"] .sg-chapter-title em {
  font-style: italic !important;

  color: var(--sg-emphasis) !important;

}
[data-template="signal"] .sg-chapter-desc {
  font-family: var(--sg-font-body) !important;

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

  line-height: 1.5 !important;

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

  max-width: 900px !important;

}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT 3 · STATEMENT (dark)
   Editorial argument — chrome bar · kicker · gold rule · large h1 with
   italic em accent.   h1 ≤ 25 words.
   ═══════════════════════════════════════════════════════════════════════ */
[data-template="signal"][data-layout="statement"],
[data-template="signal"][data-layout="statement"] > .slide-scale-inner {
  background: var(--sg-bg) !important;

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

}
[data-template="signal"] .sg-statement-body {
  position: absolute !important;

  left: 144px !important;

  right: 144px !important;

  top: 50% !important;

  transform: translateY(-50%) !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 36px !important;

  z-index: 2 !important;

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

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

  font-weight: 600 !important;

  line-height: 1.08 !important;

  letter-spacing: -0.01em !important;

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

  max-width: 1300px !important;

}
[data-template="signal"] .sg-statement-h1 em {
  font-style: italic !important;

  color: var(--sg-emphasis) !important;

}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT 4 · SPLIT (light · bone paper)
   Two-column 1:1 grid — text + image. h2 ≤ 8 words · 3-4 bullets each.
   ═══════════════════════════════════════════════════════════════════════ */
[data-template="signal"][data-layout="split"],
[data-template="signal"][data-layout="split"] > .slide-scale-inner {
  background: var(--sg-bg-light) !important;

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

}
[data-template="signal"][data-layout="split"]::before { display: none !important; }
[data-template="signal"] .sg-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: 100px !important;

  align-items: center !important;

  z-index: 2 !important;

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

  flex-direction: column !important;

  gap: 28px !important;

}
[data-template="signal"] .sg-split-text .sg-h2 {
  color: var(--sg-fg-light) !important;

  max-width: 100% !important;

}
[data-template="signal"] .sg-split-text .sg-lead {
  color: var(--sg-fg-light-2) !important;

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

  flex-direction: column !important;

  gap: 14px !important;

  height: 100% !important;

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

  background: var(--sg-bg-light-alt) !important;

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

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  min-height: 480px !important;

  overflow: hidden !important;

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

  height: 100% !important;

  object-fit: cover !important;

  display: block !important;

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

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

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

  letter-spacing: 0.14em !important;

  text-transform: uppercase !important;

}
[data-template="signal"] .sg-img-caption {
  font-family: var(--sg-font-mono) !important;

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

  letter-spacing: 0.04em !important;

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

  opacity: 0.7 !important;

}
[data-template="signal"] .sg-bullet-list {
  list-style: none !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 16px !important;

  margin: 0 !important;

  padding: 0 !important;

}
[data-template="signal"] .sg-bullet-list li {
  display: grid !important;

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

  gap: 12px !important;

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

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

  line-height: 1.5 !important;

}
[data-template="signal"] .sg-bullet-list li::before {
  content: "—" !important;

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

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

  line-height: 1.5 !important;

}
[data-template="signal"][data-layout="split"] .sg-bullet-list li {
  color: var(--sg-fg-light) !important;

}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT 5 · STATS (dark)
   Number grid (3 or 4 cols). 3-4 stats; stat-label ≤ 12 words.
   ═══════════════════════════════════════════════════════════════════════ */
[data-template="signal"][data-layout="stats"],
[data-template="signal"][data-layout="stats"] > .slide-scale-inner {
  background: var(--sg-bg) !important;

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

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

  left: 144px !important;

  right: 144px !important;

  top: 200px !important;

  bottom: 160px !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 70px !important;

  justify-content: center !important;

  z-index: 2 !important;

}
[data-template="signal"] .sg-stats-headline {
  font-family: var(--sg-font-heading) !important;

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

  font-weight: 600 !important;

  line-height: 1.18 !important;

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

  max-width: 1300px !important;

}
[data-template="signal"] .sg-stats-headline em {
  font-style: italic !important;

  color: var(--sg-emphasis) !important;

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

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

  gap: 0 !important;

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

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

  flex-direction: column !important;

  gap: 18px !important;

  padding: 32px 32px 32px 0 !important;

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

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

  font-size: 106px !important;

  font-weight: 600 !important;

  line-height: 1 !important;

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

  letter-spacing: -0.02em !important;

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

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

  line-height: 1.5 !important;

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

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

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

  letter-spacing: 0.05em !important;

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

}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT 6 · QUOTE (dark)
   Pull quote — gold opening mark · large italic serif text · attribution.
   Quote ≤ 24 words · author + role ≤ 6 words each.
   ═══════════════════════════════════════════════════════════════════════ */
[data-template="signal"][data-layout="quote"],
[data-template="signal"][data-layout="quote"] > .slide-scale-inner {
  background: var(--sg-bg) !important;

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

}
[data-template="signal"] .sg-quote-body {
  position: absolute !important;

  left: 200px !important;

  right: 200px !important;

  top: 50% !important;

  transform: translateY(-50%) !important;

  display: flex !important;

  flex-direction: column !important;

  z-index: 2 !important;

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

  font-size: 154px !important;

  line-height: 0.6 !important;

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

  font-weight: 300 !important;

  margin-bottom: 36px !important;

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

  font-size: 70px !important;

  font-weight: 400 !important;

  line-height: 1.28 !important;

  letter-spacing: -0.01em !important;

  font-style: italic !important;

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

  max-width: 1400px !important;

  margin-bottom: 64px !important;

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

  flex-direction: column !important;

  gap: 6px !important;

}
[data-template="signal"] .sg-quote-attr .sg-quote-name {
  font-family: var(--sg-font-mono) !important;

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

  letter-spacing: 0.14em !important;

  text-transform: uppercase !important;

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

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

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

  letter-spacing: 0.14em !important;

  text-transform: uppercase !important;

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

}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT 7 · LIST (light · bone paper)
   Numbered/bulleted list — 2:3 split (intro col + bullet col).
   4-6 list items · each ≤ 12 words.
   ═══════════════════════════════════════════════════════════════════════ */
[data-template="signal"][data-layout="list"],
[data-template="signal"][data-layout="list"] > .slide-scale-inner {
  background: var(--sg-bg-light) !important;

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

}
[data-template="signal"][data-layout="list"]::before { display: none !important; }
[data-template="signal"] .sg-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: 130px !important;

  align-items: center !important;

  z-index: 2 !important;

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

  flex-direction: column !important;

  gap: 28px !important;

}
[data-template="signal"] .sg-list-head .sg-h2 {
  color: var(--sg-fg-light) !important;

}
[data-template="signal"] .sg-list-head .sg-h2 em {
  color: var(--sg-emphasis) !important;

  font-style: italic !important;

}
[data-template="signal"] .sg-list-head .sg-body {
  color: var(--sg-fg-light-2) !important;

}
[data-template="signal"] .sg-numbered-list {
  list-style: none !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 26px !important;

  margin: 0 !important;

  padding: 0 !important;

}
[data-template="signal"] .sg-numbered-list li {
  display: grid !important;

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

  gap: 18px !important;

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

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

  line-height: 1.5 !important;

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

}
[data-template="signal"] .sg-numbered-list li::before {
  content: "—" !important;

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

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

  line-height: 1.5 !important;

}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT 8 · COMPARE (dark)
   Two-column comparison — Before (left, muted) · After (right, gold label).
   EXACTLY 2 panels · h3 ≤ 7 words · 3 bullets each.
   ═══════════════════════════════════════════════════════════════════════ */
[data-template="signal"][data-layout="compare"],
[data-template="signal"][data-layout="compare"] > .slide-scale-inner {
  background: var(--sg-bg) !important;

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

}
[data-template="signal"] .sg-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="signal"] .sg-compare-panel {
  display: flex !important;

  flex-direction: column !important;

  gap: 24px !important;

  padding: 32px 0 !important;

}
[data-template="signal"] .sg-compare-panel.sg-left {
  padding-right: 80px !important;

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

}
[data-template="signal"] .sg-compare-panel.sg-right {
  padding-left: 80px !important;

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

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

  letter-spacing: 0.16em !important;

  text-transform: uppercase !important;

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

  padding-bottom: 18px !important;

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

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

}
[data-template="signal"] .sg-compare-panel .sg-h3 em {
  font-style: italic !important;

  color: var(--sg-emphasis) !important;

}
[data-template="signal"] .sg-compare-panel .sg-lead {
  color: var(--sg-fg-2) !important;

}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT 9 · EDITORIAL (dark)
   Newsletter — stamp · headline (italic em) · 2-col body
   (left: log-list · right: 2x2 stat-4 grid) · analysis line · footer.
   4-6 log rows · 4 stat-4 cells · 1 analysis line.
   ═══════════════════════════════════════════════════════════════════════ */
[data-template="signal"][data-layout="editorial"],
[data-template="signal"][data-layout="editorial"] > .slide-scale-inner {
  background: var(--sg-bg) !important;

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

}
[data-template="signal"] .sg-editorial-stamp {
  position: absolute !important;

  left: 144px !important;

  right: 144px !important;

  top: 130px !important;

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

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

  letter-spacing: 0.22em !important;

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

  z-index: 2 !important;

}
[data-template="signal"] .sg-editorial-stamp .sg-accent {
  color: var(--sg-accent) !important;

}
[data-template="signal"] .sg-editorial-hl {
  position: absolute !important;

  left: 144px !important;

  right: 144px !important;

  top: 180px !important;

  font-family: var(--sg-font-heading) !important;

  font-size: 52px !important;

  font-weight: 600 !important;

  line-height: 1.2 !important;

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

  padding-bottom: 28px !important;

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

  max-width: 1500px !important;

  z-index: 2 !important;

}
[data-template="signal"] .sg-editorial-hl em {
  font-style: italic !important;

  color: var(--sg-emphasis) !important;

}
[data-template="signal"] .sg-editorial-cols {
  position: absolute !important;

  left: 144px !important;

  right: 144px !important;

  top: 340px !important;

  bottom: 200px !important;

  display: grid !important;

  grid-template-columns: 1.15fr 0.85fr !important;

  gap: 0 !important;

  z-index: 2 !important;

}
[data-template="signal"] .sg-editorial-col-left {
  padding-right: 64px !important;

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

  display: flex !important;

  flex-direction: column !important;

}
[data-template="signal"] .sg-editorial-col-right {
  padding-left: 64px !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 24px !important;

}
[data-template="signal"] .sg-editorial-col-head {
  font-family: var(--sg-font-mono) !important;

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

  letter-spacing: 0.18em !important;

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

  padding-bottom: 16px !important;

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

  margin-bottom: 16px !important;

}
[data-template="signal"] .sg-log-list {
  display: flex !important;

  flex-direction: column !important;

  gap: 18px !important;

}
[data-template="signal"] .sg-log-row {
  display: grid !important;

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

  gap: 18px !important;

  align-items: baseline !important;

}
[data-template="signal"] .sg-log-dt {
  font-family: var(--sg-font-mono) !important;

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

  letter-spacing: 0.1em !important;

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

  white-space: nowrap !important;

}
[data-template="signal"] .sg-log-dd {
  font-family: var(--sg-font-body) !important;

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

  line-height: 1.52 !important;

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

}
[data-template="signal"] .sg-log-dd em {
  font-style: italic !important;

  color: var(--sg-emphasis) !important;

  font-family: var(--sg-font-heading) !important;

}
[data-template="signal"] .sg-stat-4 {
  display: grid !important;

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

  gap: 0 !important;

}
[data-template="signal"] .sg-stat-4-cell {
  border-top: 1px solid var(--sg-border) !important;

  padding: 16px 0 20px 0 !important;

}
[data-template="signal"] .sg-stat-4-cell:nth-child(even) {
  border-left: 1px solid var(--sg-border) !important;

  padding-left: 22px !important;

}
[data-template="signal"] .sg-stat-4-val {
  font-family: var(--sg-font-body) !important;

  font-size: 48px !important;

  font-weight: 700 !important;

  line-height: 1 !important;

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

  margin-bottom: 8px !important;

  letter-spacing: -0.02em !important;

}
[data-template="signal"] .sg-stat-4-val em {
  font-family: var(--sg-font-display) !important;

  font-style: italic !important;

  color: var(--sg-emphasis) !important;

  font-weight: 600 !important;

}
[data-template="signal"] .sg-stat-4-label {
  font-family: var(--sg-font-mono) !important;

  font-size: 12px !important;

  letter-spacing: 0.07em !important;

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

  line-height: 1.4 !important;

  text-transform: uppercase !important;

}
[data-template="signal"] .sg-editorial-analysis {
  position: absolute !important;

  left: 144px !important;

  right: 144px !important;

  bottom: 130px !important;

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

  font-size: 17px !important;

  line-height: 1.72 !important;

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

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

  padding-top: 18px !important;

  z-index: 2 !important;

}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT 10 · DENSE (dark)
   Two-column long-form — headline · 2 columns · 3 paragraphs each.
   EXACTLY 2 columns · h4 ≤ 4 words.
   ═══════════════════════════════════════════════════════════════════════ */
[data-template="signal"][data-layout="dense"],
[data-template="signal"][data-layout="dense"] > .slide-scale-inner {
  background: var(--sg-bg) !important;

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

}
[data-template="signal"] .sg-dense-hl {
  position: absolute !important;

  left: 144px !important;

  right: 144px !important;

  top: 180px !important;

  font-family: var(--sg-font-heading) !important;

  font-size: 46px !important;

  font-weight: 600 !important;

  line-height: 1.2 !important;

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

  padding-bottom: 32px !important;

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

  max-width: 1500px !important;

  z-index: 2 !important;

}
[data-template="signal"] .sg-dense-hl em {
  font-style: italic !important;

  color: var(--sg-emphasis) !important;

}
[data-template="signal"] .sg-dense-cols {
  position: absolute !important;

  left: 144px !important;

  right: 144px !important;

  top: 360px !important;

  bottom: 160px !important;

  display: grid !important;

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

  gap: 90px !important;

  padding-top: 24px !important;

  z-index: 2 !important;

}
[data-template="signal"] .sg-dense-col h4 {
  font-family: var(--sg-font-mono) !important;

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

  letter-spacing: 0.16em !important;

  text-transform: uppercase !important;

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

  margin-bottom: 18px !important;

  padding-bottom: 18px !important;

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

}
[data-template="signal"] .sg-dense-col p {
  font-family: var(--sg-font-body) !important;

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

  line-height: 1.72 !important;

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

  margin-bottom: 14px !important;

}
[data-template="signal"] .sg-dense-col p:last-child { margin-bottom: 0; }
[data-template="signal"] .sg-dense-col p em {
  font-style: italic !important;

  color: var(--sg-emphasis) !important;

  font-family: var(--sg-font-heading) !important;

}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT 11 · CHART-BAR (dark — Chart.js bar with gold accent on hi value)
   4-7 bars. Use Chart.js. Last bar typically the "hero" data point in gold.
   ═══════════════════════════════════════════════════════════════════════ */
[data-template="signal"][data-layout="chart-bar"],
[data-template="signal"][data-layout="chart-bar"] > .slide-scale-inner {
  background: var(--sg-bg) !important;

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

}
[data-template="signal"] .sg-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="signal"] .sg-chart-header {
  display: flex !important;

  justify-content: space-between !important;

  align-items: baseline !important;

  flex-shrink: 0 !important;

}
[data-template="signal"] .sg-chart-header .sg-h2 em {
  color: var(--sg-emphasis) !important;

  font-style: italic !important;

}
[data-template="signal"] .sg-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="signal"] .sg-chart-wrap > canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
[data-template="signal"] .sg-chart-source {
  font-family: var(--sg-font-mono) !important;

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

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

  letter-spacing: 0.06em !important;

  margin-top: 18px !important;

  flex-shrink: 0 !important;

}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT 12 · DIAGRAM (light · bone paper)
   3-5 numbered flow steps with arrows. Title ≤ 4 words · desc ≤ 14 words.
   ═══════════════════════════════════════════════════════════════════════ */
[data-template="signal"][data-layout="diagram"],
[data-template="signal"][data-layout="diagram"] > .slide-scale-inner {
  background: var(--sg-bg-light) !important;

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

}
[data-template="signal"][data-layout="diagram"]::before { display: none !important; }
[data-template="signal"] .sg-diagram-body {
  position: absolute !important;

  left: 144px !important;

  right: 144px !important;

  top: 200px !important;

  bottom: 160px !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 60px !important;

  justify-content: center !important;

  z-index: 2 !important;

}
[data-template="signal"] .sg-diagram-body .sg-h2 {
  color: var(--sg-fg-light) !important;

}
[data-template="signal"] .sg-diagram-body .sg-h2 em {
  color: var(--sg-emphasis) !important;

  font-style: italic !important;

}
[data-template="signal"] .sg-flow {
  display: flex !important;

  align-items: stretch !important;

  gap: 0 !important;

}
[data-template="signal"] .sg-flow-step {
  flex: 1 !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 14px !important;

  padding-right: 40px !important;

}
[data-template="signal"] .sg-flow-num {
  font-family: var(--sg-font-display) !important;

  font-size: 86px !important;

  font-weight: 700 !important;

  line-height: 1 !important;

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

  letter-spacing: -0.02em !important;

  font-style: italic !important;

}
[data-template="signal"] .sg-flow-title {
  font-family: var(--sg-font-heading) !important;

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

  font-weight: 600 !important;

  line-height: 1.15 !important;

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

}
[data-template="signal"] .sg-flow-desc {
  font-family: var(--sg-font-body) !important;

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

  color: var(--sg-fg-light-2) !important;

  line-height: 1.62 !important;

}
[data-template="signal"] .sg-flow-arrow {
  display: flex !important;

  align-items: flex-start !important;

  padding-top: 18px !important;

  padding-right: 40px !important;

  font-size: 38px !important;

  color: var(--sg-border-light) !important;

  flex-shrink: 0 !important;

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

}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT 13 · CHART-PIE (dark — Chart.js doughnut)
   3-5 segments with side legend.
   ═══════════════════════════════════════════════════════════════════════ */
[data-template="signal"][data-layout="chart-pie"],
[data-template="signal"][data-layout="chart-pie"] > .slide-scale-inner {
  background: var(--sg-bg) !important;

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

}
[data-template="signal"] .sg-pie-body {
  position: absolute !important;

  left: 144px !important;

  right: 144px !important;

  top: 200px !important;

  bottom: 160px !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 32px !important;

  z-index: 2 !important;

}
[data-template="signal"] .sg-pie-body .sg-h2 em {
  color: var(--sg-emphasis) !important;

  font-style: italic !important;

}
[data-template="signal"] .sg-pie-row {
  flex: 1 !important;

  display: grid !important;

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

  gap: 100px !important;

  align-items: center !important;

  min-height: 0 !important;

}
[data-template="signal"] .sg-pie-chart-box {
  position: relative !important;

  width: 540px !important;

  height: 540px !important;

  justify-self: center !important;

}
[data-template="signal"] .sg-pie-chart-box > canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
[data-template="signal"] .sg-pie-legend {
  display: flex !important;

  flex-direction: column !important;

  gap: 22px !important;

}
[data-template="signal"] .sg-pie-item {
  display: grid !important;

  grid-template-columns: 18px 1fr auto !important;

  gap: 18px !important;

  align-items: center !important;

}
[data-template="signal"] .sg-pie-swatch {
  width: 18px !important;

  height: 18px !important;

  border-radius: 3px !important;

  flex-shrink: 0 !important;

}
[data-template="signal"] .sg-pie-item-label {
  font-family: var(--sg-font-body) !important;

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

  line-height: 1.4 !important;

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

}
[data-template="signal"] .sg-pie-item-val {
  font-family: var(--sg-font-mono) !important;

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

  font-weight: 500 !important;

  letter-spacing: 0.06em !important;

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

}
[data-template="signal"] .sg-pie-total {
  margin-top: 16px !important;

  padding-top: 16px !important;

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

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

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

  letter-spacing: 0.1em !important;

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

}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT 14 · PYRAMID (dark)
   4-5 stacked levels, narrowest at top, gold-tinted color-mix descent.
   pyr-name ≤ 4 words · pyr-desc ≤ 10 words.
   ═══════════════════════════════════════════════════════════════════════ */
[data-template="signal"][data-layout="pyramid"],
[data-template="signal"][data-layout="pyramid"] > .slide-scale-inner {
  background: var(--sg-bg) !important;

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

}
[data-template="signal"] .sg-pyramid-body {
  position: absolute !important;

  left: 144px !important;

  right: 144px !important;

  top: 200px !important;

  bottom: 160px !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 32px !important;

  justify-content: center !important;

  z-index: 2 !important;

}
[data-template="signal"] .sg-pyramid-body .sg-h2 em {
  color: var(--sg-emphasis) !important;

  font-style: italic !important;

}
[data-template="signal"] .sg-pyramid {
  display: flex !important;

  flex-direction: column !important;

  gap: 6px !important;

  align-items: center !important;

}
[data-template="signal"] .sg-pyr-level {
  display: flex !important;

  justify-content: space-between !important;

  align-items: center !important;

  padding: 22px 56px !important;

  border-left: 4px solid var(--sg-accent) !important;

}
[data-template="signal"] .sg-pyr-level:nth-child(1) {
  background: color-mix(in srgb, var(--sg-accent) 70%, var(--sg-bg)) !important;

  width: 38% !important;

}
[data-template="signal"] .sg-pyr-level:nth-child(2) {
  background: color-mix(in srgb, var(--sg-accent) 45%, var(--sg-bg)) !important;

  width: 54% !important;

}
[data-template="signal"] .sg-pyr-level:nth-child(3) {
  background: color-mix(in srgb, var(--sg-accent) 27%, var(--sg-bg)) !important;

  width: 70% !important;

}
[data-template="signal"] .sg-pyr-level:nth-child(4) {
  background: color-mix(in srgb, var(--sg-accent) 15%, var(--sg-bg)) !important;

  width: 86% !important;

}
[data-template="signal"] .sg-pyr-level:nth-child(5) {
  background: color-mix(in srgb, var(--sg-accent) 8%, var(--sg-bg)) !important;

  width: 100% !important;

}
[data-template="signal"] .sg-pyr-name {
  font-family: var(--sg-font-heading) !important;

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

  font-weight: 500 !important;

  line-height: 1.2 !important;

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

}
[data-template="signal"] .sg-pyr-desc {
  font-family: var(--sg-font-body) !important;

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

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

  text-align: right !important;

  max-width: 55% !important;

  line-height: 1.4 !important;

}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT 15 · VTIMELINE (dark)
   Vertical timeline — date col · spine · content col · 3-5 events.
   vt-title ≤ 5 words · vt-body ≤ 16 words.
   ═══════════════════════════════════════════════════════════════════════ */
[data-template="signal"][data-layout="vtimeline"],
[data-template="signal"][data-layout="vtimeline"] > .slide-scale-inner {
  background: var(--sg-bg) !important;

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

}
[data-template="signal"] .sg-vt-hl {
  position: absolute !important;

  left: 144px !important;

  right: 144px !important;

  top: 180px !important;

  font-family: var(--sg-font-heading) !important;

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

  font-weight: 600 !important;

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

  padding-bottom: 28px !important;

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

  z-index: 2 !important;

}
[data-template="signal"] .sg-vt-hl em {
  font-style: italic !important;

  color: var(--sg-emphasis) !important;

}
[data-template="signal"] .sg-vtimeline {
  position: absolute !important;

  left: 144px !important;

  right: 144px !important;

  top: 320px !important;

  bottom: 160px !important;

  display: grid !important;

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

  gap: 0 !important;

  padding-top: 28px !important;

  z-index: 2 !important;

}
[data-template="signal"] .sg-vt-date {
  font-family: var(--sg-font-mono) !important;

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

  letter-spacing: 0.08em !important;

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

  text-align: right !important;

  padding: 0 32px 60px 0 !important;

  line-height: 1.4 !important;

}
[data-template="signal"] .sg-vt-spine {
  background: var(--sg-border) !important;

  position: relative !important;

}
[data-template="signal"] .sg-vt-spine::before {
  content: "" !important;

  position: absolute !important;

  top: 6px !important;

  left: -4px !important;

  width: 9px !important;

  height: 9px !important;

  border-radius: 50% !important;

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

}
[data-template="signal"] .sg-vt-content {
  padding: 0 0 60px 32px !important;

}
[data-template="signal"] .sg-vt-title {
  font-family: var(--sg-font-heading) !important;

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

  font-weight: 500 !important;

  margin-bottom: 8px !important;

  line-height: 1.25 !important;

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

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

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

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

  line-height: 1.65 !important;

}
[data-template="signal"] .sg-vt-body em {
  font-style: italic !important;

  color: var(--sg-emphasis) !important;

  font-family: var(--sg-font-heading) !important;

}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT 16 · CYCLE (dark)
   2x2 cycle grid — 4 numbered steps + arrows in cross pattern.
   EXACTLY 4 steps · title ≤ 4 words.
   ═══════════════════════════════════════════════════════════════════════ */
[data-template="signal"][data-layout="cycle"],
[data-template="signal"][data-layout="cycle"] > .slide-scale-inner {
  background: var(--sg-bg) !important;

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

}
[data-template="signal"] .sg-cycle-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="signal"] .sg-cycle-body .sg-h2 em {
  color: var(--sg-emphasis) !important;

  font-style: italic !important;

}
[data-template="signal"] .sg-cycle-grid {
  flex: 1 !important;

  display: grid !important;

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

  grid-template-rows: 1fr 60px 1fr !important;

  gap: 18px !important;

  align-items: center !important;

  min-height: 0 !important;

}
[data-template="signal"] .sg-cycle-step {
  display: flex !important;

  flex-direction: column !important;

  gap: 18px !important;

  padding: 32px 36px !important;

  border-top: 3px solid var(--sg-accent) !important;

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

}
[data-template="signal"] .sg-cycle-num {
  font-family: var(--sg-font-display) !important;

  font-size: 60px !important;

  font-weight: 700 !important;

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

  line-height: 1 !important;

  letter-spacing: -0.02em !important;

}
[data-template="signal"] .sg-cycle-title {
  font-family: var(--sg-font-heading) !important;

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

  font-weight: 500 !important;

  line-height: 1.2 !important;

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

}
[data-template="signal"] .sg-cycle-desc {
  font-family: var(--sg-font-body) !important;

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

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

  line-height: 1.6 !important;

}
[data-template="signal"] .sg-cycle-arrow {
  color: var(--sg-fg-3) !important;

  font-size: 34px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

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

}
[data-template="signal"] .sg-cycle-corner {
  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT 17 · CLOSING (dark)
   End slide — kicker · gold rule · h1 with italic em · contact line.
   kicker ≤ 5 words · h1 ≤ 10 words · contact line.
   ═══════════════════════════════════════════════════════════════════════ */
[data-template="signal"][data-layout="closing"],
[data-template="signal"][data-layout="closing"] > .slide-scale-inner {
  background: var(--sg-bg) !important;

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

}
[data-template="signal"] .sg-closing-body {
  position: absolute !important;

  left: 144px !important;

  right: 144px !important;

  top: 50% !important;

  transform: translateY(-50%) !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 32px !important;

  z-index: 2 !important;

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

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

  letter-spacing: 0.2em !important;

  text-transform: uppercase !important;

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

}
[data-template="signal"] .sg-closing-rule {
  width: 90px !important;

  height: 2px !important;

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

}
[data-template="signal"] .sg-closing-title {
  font-family: var(--sg-font-heading) !important;

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

  font-weight: 600 !important;

  line-height: 1.08 !important;

  letter-spacing: -0.01em !important;

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

  max-width: 1100px !important;

}
[data-template="signal"] .sg-closing-title em {
  font-style: italic !important;

  color: var(--sg-emphasis) !important;

}
[data-template="signal"] .sg-closing-contact {
  font-family: var(--sg-font-body) !important;

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

  line-height: 1.5 !important;

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

  max-width: 800px !important;

}


/* ═══════════════════════════════════════════════════════════════════════════
   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="signal"][data-layout="chapter"],
[data-template="signal"][data-layout="chart-bar"],
[data-template="signal"][data-layout="chart-pie"],
[data-template="signal"][data-layout="closing"],
[data-template="signal"][data-layout="compare"],
[data-template="signal"][data-layout="cover"],
[data-template="signal"][data-layout="cycle"],
[data-template="signal"][data-layout="dense"],
[data-template="signal"][data-layout="editorial"],
[data-template="signal"][data-layout="pyramid"],
[data-template="signal"][data-layout="quote"],
[data-template="signal"][data-layout="statement"],
[data-template="signal"][data-layout="stats"],
[data-template="signal"][data-layout="vtimeline"] {
  background: var(--sg-bg) !important;
}
[data-template="signal"][data-layout="diagram"],
[data-template="signal"][data-layout="list"],
[data-template="signal"][data-layout="split"] {
  background: var(--sg-bg-light) !important;
}