/* Auto-generated by scripts/extract-broadside-runtime.py cobalt-grid — DO NOT hand-edit.
 * Source: html_gen_prompt.py _COBALT_GRID_EXTRA_TOKENS + _COBALT_GRID_STAT_CARD_CSS
 * Loaded by editor.html so editor + viewer render cobalt-grid 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=Newsreader:ital,wght@0,400;0,500;1,300;1,400;1,500&family=Hanken+Grotesk:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

  

[data-template="cobalt-grid"] {

  /* ─────────────────────────────────────────────────────────
     Cobalt Grid — design tokens
     Coordinate system: 1920×1080 design canvas (NOT vw/vh).
     Visual identity: warm cream paper canvas + electric cobalt
                      (strictly bichromatic) + Newsreader italic
                      transitional serif display + graph-paper
                      grid texture as the structural signature.
     ───────────────────────────────────────────────────────── */
  /* ── PALETTE — STRICTLY BICHROMATIC: PAPER + COBALT ── */
  --cg-bg: #F0EBDE !important;  /* warm cream / ivory paper           */

  --cg-bg-alt: #E6E0CE !important;  /* slightly cooler paper alt          */

  --cg-bg-light: #F0EBDE !important;  /* alias — single light palette       */

  --cg-bg-light-alt: #E6E0CE !important;  /* alias                              */


  --cg-fg: #1F2BE0 !important;  /* electric cobalt / royal blue       */

  --cg-fg-2: #5560E5 !important;  /* lighter cobalt for secondary marks */

  --cg-fg-3: rgba(31, 43, 224, 0.55) !important;  /* tertiary           */

  --cg-fg-light: #1F2BE0 !important;  /* alias                              */

  --cg-fg-light-2: #5560E5 !important;  /* alias                              */

  --cg-fg-light-3: rgba(31, 43, 224, 0.55) !important;  /* alias              */


  --cg-accent: #1F2BE0 !important;  /* same cobalt — single-accent rule   */

  --cg-border: rgba(31, 43, 224, 0.20) !important;  /* hairline divider   */

  --cg-border-light: rgba(31, 43, 224, 0.20) !important;  /* alias              */

  --cg-grid: rgba(31, 43, 224, 0.10) !important;  /* graph-paper texture*/


  /* ── TYPOGRAPHY — NEWSREADER ITALIC + HANKEN GROTESK + DM MONO ── */
  --cg-font-display: "Newsreader", Georgia, serif !important;

  --cg-font-heading: "Newsreader", Georgia, serif !important;

  --cg-font-body: "Hanken Grotesk", system-ui, sans-serif !important;

  --cg-font-mono: "DM Mono", ui-monospace, monospace !important;

  /* Cross-template alias */
  --font-heading: "Newsreader", Georgia, serif !important;

  --font-body: "Hanken Grotesk", system-ui, sans-serif !important;


  /* ── TYPE SCALE — 1920×1080 px ── */
  --cg-sz-display: 200px !important;  /* hero — Newsreader italic            */

  --cg-sz-h1: 120px !important;  /* chapter / statement                 */

  --cg-sz-h2: 64px !important;   /* slide headlines                     */

  --cg-sz-h3: 38px !important;   /* sub-headlines                       */

  --cg-sz-lead: 28px !important;   /* lead paragraph                      */

  --cg-sz-body: 21px !important;   /* body text                           */

  --cg-sz-caption: 17px !important;   /* captions                            */

  --cg-sz-label: 14px !important;   /* mono labels                         */

}


/* ═══════════════════════════════════════════════════════════════════════════
   COBALT GRID — Slide-production component CSS
   Canvas: 1920×1080 px. ALL selectors scoped under [data-template="cobalt-grid"].
   Class names use cg- prefix.
   ═══════════════════════════════════════════════════════════════════════════ */

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

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

  position: relative !important;

  overflow: hidden !important;

}
[data-template="cobalt-grid"] .slide > .slide-scale-inner,
[data-template="cobalt-grid"].slide > .slide-scale-inner {
  /* Cream background + graph-paper grid texture painted as
     background-image on top. The grid CANNOT use the slide-level
     ::before approach because slide-scale-inner (z-index:1) sits
     above slide's ::before (z-index:0) and the cream bg-color of
     this wrapper covers the ::before grid completely. Painting
     grid as a background-image of THIS element layers it above the
     cream bg-color but below child content (normal flow).
     (Rainy 2026-05-29.) */
  background-color: var(--cg-bg) !important;

  /* Single-line bg-image so scripts/extract-broadside-runtime.py's
     _force_important catches it and emits `!important`. Multi-line
     declarations are skipped by the script, leaving them powerless
     against the deck's embedded `background: var(--cg-bg) !important`
     shorthand (which resets bg-image to none). (Rainy 2026-05-29.) */
  background-image: linear-gradient(var(--cg-grid) 1px, transparent 1px), linear-gradient(90deg, var(--cg-grid) 1px, transparent 1px) !important;

  background-size: 60px 60px !important;

}
/* Generate-modal build canvas ONLY: slide-scale-inner is height:0 because
   build-time slides don't have content yet, so absolute-positioned children
   (top:144 bottom:144) get a height:0 containing block and overflow the
   top of the slide. Scope under #genStudioCanvas so editor (where slide
   sizes from content) is unaffected. (Rainy 2026-05-29.) */
#genStudioCanvas [data-template="cobalt-grid"] .slide > .slide-scale-inner,
#genStudioCanvas [data-template="cobalt-grid"].slide > .slide-scale-inner,
.gen-studio-slide-thumb [data-template="cobalt-grid"] .slide > .slide-scale-inner,
.gen-studio-slide-thumb [data-template="cobalt-grid"].slide > .slide-scale-inner {
  height: 100% !important;

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

  color: inherit !important;

  margin: 0 !important;

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

}

/* COBALT GRID SIGNATURE: graph-paper texture is painted as
   background-image on .slide-scale-inner (see the rule above).
   The slide-level ::before approach used to leak past
   slide-scale-inner's edges in editor + dashboard (where slide is
   sized larger than slide-scale-inner due to engine wrapping), so
   the texture has been moved onto slide-scale-inner. ::before is
   kept empty (no bg-image) for backward compat with gallery
   markup that may still query for it. (Rainy 2026-05-29.) */
[data-template="cobalt-grid"][data-layout="cover"]::before,
[data-template="cobalt-grid"][data-layout="chapter"]::before,
[data-template="cobalt-grid"][data-layout="statement"]::before,
[data-template="cobalt-grid"][data-layout="split"]::before,
[data-template="cobalt-grid"][data-layout="stats"]::before,
[data-template="cobalt-grid"][data-layout="quote"]::before,
[data-template="cobalt-grid"][data-layout="list"]::before,
[data-template="cobalt-grid"][data-layout="compare"]::before,
[data-template="cobalt-grid"][data-layout="chart-bar"]::before,
[data-template="cobalt-grid"][data-layout="end"]::before {
  content: none !important;

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

  z-index: 1 !important;

}

/* Italic Newsreader for display headlines is the second signature.
   <em> uses ink-soft (lighter cobalt) to add a quieter accent. */
[data-template="cobalt-grid"] h1 em,
[data-template="cobalt-grid"] h2 em,
[data-template="cobalt-grid"] h3 em,
[data-template="cobalt-grid"] .cg-display em,
[data-template="cobalt-grid"] .cg-h1 em,
[data-template="cobalt-grid"] .cg-h2 em,
[data-template="cobalt-grid"] .cg-h3 em {
  color: var(--cg-fg-2) !important;

  font-style: italic !important;

}

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

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

  font-weight: 400 !important;

  font-style: italic !important;

  line-height: 0.92 !important;

  letter-spacing: -0.02em !important;

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

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

  font-weight: 400 !important;

  font-style: italic !important;

  line-height: 1.0 !important;

  letter-spacing: -0.015em !important;

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

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

  font-weight: 400 !important;

  font-style: italic !important;

  line-height: 1.1 !important;

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

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

  font-weight: 500 !important;

  font-style: italic !important;

  line-height: 1.2 !important;

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

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

  font-weight: 400 !important;

  line-height: 1.5 !important;

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

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

  font-weight: 400 !important;

  line-height: 1.6 !important;

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

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

  font-weight: 400 !important;

  line-height: 1.5 !important;

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

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

  font-weight: 500 !important;

  letter-spacing: 0.18em !important;

  text-transform: uppercase !important;

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

}
[data-template="cobalt-grid"] .cg-muted    { color: var(--cg-fg-2); }
[data-template="cobalt-grid"] .cg-rule {
  width: 60px !important;

  height: 1px !important;

  background: var(--cg-fg) !important;

  display: block !important;

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

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

  letter-spacing: 0.22em !important;

  text-transform: uppercase !important;

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

}

/* COBALT GRID third signature: pixel stair-step decoration block */
[data-template="cobalt-grid"] .cg-pixel-stair {
  display: grid !important;

  grid-template-columns: repeat(5, 12px) !important;

  grid-template-rows: repeat(5, 12px) !important;

  gap: 0 !important;

}
[data-template="cobalt-grid"] .cg-pixel-stair span {
  display: block !important;

  background: transparent !important;

}
[data-template="cobalt-grid"] .cg-pixel-stair span.on {
  background: var(--cg-fg) !important;

}

/* ─── REUSABLE CHROME ──────────────────────────────────────────────── */
[data-template="cobalt-grid"] .cg-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(--cg-border) !important;

  z-index: 2 !important;

}
[data-template="cobalt-grid"] .cg-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(--cg-border) !important;

  z-index: 2 !important;

}
[data-template="cobalt-grid"][data-layout="cover"] .cg-slide-chrome,
[data-template="cobalt-grid"][data-layout="cover"] .cg-slide-foot,
[data-template="cobalt-grid"][data-layout="quote"] .cg-slide-chrome,
[data-template="cobalt-grid"][data-layout="quote"] .cg-slide-foot,
[data-template="cobalt-grid"][data-layout="end"] .cg-slide-chrome,
[data-template="cobalt-grid"][data-layout="end"] .cg-slide-foot {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT 1 · COVER
   Massive italic Newsreader title fills the slide. Cobalt on cream paper.
   ═══════════════════════════════════════════════════════════════════════ */
[data-template="cobalt-grid"] .cg-cover-body {
  position: absolute !important;

  left: 144px !important;

  right: 144px !important;

  top: 144px !important;

  bottom: 144px !important;

  display: flex !important;

  flex-direction: column !important;

  justify-content: flex-end !important;

  gap: 38px !important;

  z-index: 2 !important;

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

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

  font-weight: 400 !important;

  font-style: italic !important;

  line-height: 0.92 !important;

  letter-spacing: -0.02em !important;

  color: var(--cg-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;

}
[data-template="cobalt-grid"] .cg-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(--cg-border) !important;

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

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

  letter-spacing: 0.18em !important;

  text-transform: uppercase !important;

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

}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT 2 · CHAPTER
   Section divider. Italic Newsreader. Hairline rule. Optional pixel-stair.
   ═══════════════════════════════════════════════════════════════════════ */
[data-template="cobalt-grid"] .cg-chapter-body {
  position: absolute !important;

  left: 144px !important;

  right: 144px !important;

  top: 144px !important;

  bottom: 144px !important;

  display: flex !important;

  flex-direction: column !important;

  justify-content: center !important;

  z-index: 2 !important;

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

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

  letter-spacing: 0.22em !important;

  text-transform: uppercase !important;

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

  margin-bottom: 22px !important;

}
[data-template="cobalt-grid"] .cg-chapter-rule {
  width: 60px !important;

  height: 1px !important;

  background: var(--cg-fg) !important;

  margin-bottom: 30px !important;

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

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

  font-weight: 400 !important;

  font-style: italic !important;

  line-height: 1.0 !important;

  letter-spacing: -0.015em !important;

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

}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT 3 · STATEMENT (manifesto)
   Single bold claim in italic Newsreader. ≤ 14 words.
   ═══════════════════════════════════════════════════════════════════════ */
[data-template="cobalt-grid"] .cg-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: 30px !important;

  z-index: 2 !important;

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

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

  font-weight: 400 !important;

  font-style: italic !important;

  line-height: 1.0 !important;

  letter-spacing: -0.015em !important;

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

}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT 4 · SPLIT
   Left text, right image. h2 ≤ 8 words · 3 bullets each ≤ 8 words.
   ═══════════════════════════════════════════════════════════════════════ */
[data-template="cobalt-grid"] .cg-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="cobalt-grid"] .cg-split-text {
  display: flex !important;

  flex-direction: column !important;

  gap: 22px !important;

}
[data-template="cobalt-grid"] .cg-split-image {
  display: flex !important;

  flex-direction: column !important;

  gap: 14px !important;

  height: 100% !important;

}
[data-template="cobalt-grid"] .cg-split-image-frame {
  flex: 1 !important;

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

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

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  min-height: 480px !important;

  overflow: hidden !important;

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

  height: 100% !important;

  object-fit: cover !important;

  display: block !important;

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

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

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

  letter-spacing: 0.18em !important;

  text-transform: uppercase !important;

}

[data-template="cobalt-grid"] .cg-bullet-list {
  list-style: none !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 14px !important;

  margin: 0 !important;

  padding: 0 !important;

}
[data-template="cobalt-grid"] .cg-bullet-list li {
  display: flex !important;

  align-items: baseline !important;

  gap: 12px !important;

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

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

  line-height: 1.5 !important;

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

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

  padding-top: 14px !important;

}
[data-template="cobalt-grid"] .cg-bullet-list li::before {
  content: "→" !important;

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

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

  font-weight: 500 !important;

  flex-shrink: 0 !important;

  min-width: 24px !important;

}
/* Tolerate bare text, single span, or multi-span li markup. */
[data-template="cobalt-grid"] .cg-bullet-list li > span:empty {
  display: none !important;

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

  min-width: 0 !important;

}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT 5 · STATS (data)
   3 or 4 large numbers. Hairline-divided. Numbers in italic Newsreader.
   ═══════════════════════════════════════════════════════════════════════ */
[data-template="cobalt-grid"] .cg-stats-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: 38px !important;

  z-index: 2 !important;

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

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

  gap: 0 !important;

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

}
[data-template="cobalt-grid"] .cg-stat-card {
  display: flex !important;

  flex-direction: column !important;

  gap: 14px !important;

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

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

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

  font-size: 120px !important;

  font-weight: 400 !important;

  font-style: italic !important;

  line-height: 1 !important;

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

  letter-spacing: -0.03em !important;

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

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

  font-weight: 500 !important;

  line-height: 1.4 !important;

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

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

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

  letter-spacing: 0.05em !important;

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

}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT 6 · QUOTE
   Full pull quote in italic Newsreader. Cobalt opening mark. ≤ 26 words.
   ═══════════════════════════════════════════════════════════════════════ */
[data-template="cobalt-grid"] .cg-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="cobalt-grid"] .cg-quote-mark {
  font-family: var(--cg-font-display) !important;

  font-size: 192px !important;

  line-height: 0.6 !important;

  font-style: italic !important;

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

  margin-bottom: 22px !important;

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

  font-size: 73px !important;

  font-weight: 400 !important;

  font-style: italic !important;

  line-height: 1.18 !important;

  letter-spacing: -0.015em !important;

  max-width: 78% !important;

  margin-bottom: 38px !important;

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

}
[data-template="cobalt-grid"] .cg-quote-attr {
  display: flex !important;

  flex-direction: column !important;

  gap: 4px !important;

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

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

  font-weight: 600 !important;

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

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

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

  letter-spacing: 0.12em !important;

  text-transform: uppercase !important;

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

}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT 7 · LIST (index-like)
   Headline left, numbered hairline-divided rows right. Up to 6 items.
   ═══════════════════════════════════════════════════════════════════════ */
[data-template="cobalt-grid"] .cg-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="cobalt-grid"] .cg-list-head {
  display: flex !important;

  flex-direction: column !important;

  gap: 22px !important;

  padding-top: 16px !important;

}
[data-template="cobalt-grid"] .cg-index-rows {
  list-style: none !important;

  display: flex !important;

  flex-direction: column !important;

  margin: 0 !important;

  padding: 0 !important;

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

}
[data-template="cobalt-grid"] .cg-index-rows li {
  display: grid !important;

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

  gap: 22px !important;

  align-items: baseline !important;

  padding: 18px 0 !important;

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

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

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

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

}
[data-template="cobalt-grid"] .cg-index-rows .cg-idx-num {
  font-family: var(--cg-font-mono) !important;

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

  letter-spacing: 0.18em !important;

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

}
[data-template="cobalt-grid"] .cg-index-rows .cg-idx-page {
  font-family: var(--cg-font-mono) !important;

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

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

}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT 8 · COMPARE
   Side-by-side panels with hairline divider. EXACTLY 2 panels.
   ═══════════════════════════════════════════════════════════════════════ */
[data-template="cobalt-grid"] .cg-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="cobalt-grid"] .cg-compare-panel {
  display: flex !important;

  flex-direction: column !important;

  gap: 22px !important;

  padding: 22px 0 !important;

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

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

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

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

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

  letter-spacing: 0.22em !important;

  text-transform: uppercase !important;

  padding-bottom: 11px !important;

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

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

}
[data-template="cobalt-grid"] .cg-compare-label.cg-after {
  color: var(--cg-fg) !important;

  border-color: var(--cg-fg) !important;

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

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

  font-weight: 400 !important;

  font-style: italic !important;

  line-height: 1.15 !important;

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

}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT 9 · CHART-BAR (Chart.js with cobalt bars)
   4-7 bars. Cobalt for hero, ink-soft for rest.
   ═══════════════════════════════════════════════════════════════════════ */
[data-template="cobalt-grid"] .cg-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="cobalt-grid"] .cg-chart-header {
  display: flex !important;

  justify-content: space-between !important;

  align-items: baseline !important;

  flex-shrink: 0 !important;

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

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

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

  letter-spacing: 0.06em !important;

  margin-top: 18px !important;

  flex-shrink: 0 !important;

}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT 10 · END (colophon)
   Closing slide. Italic Newsreader headline + colophon mono lines.
   ═══════════════════════════════════════════════════════════════════════ */
[data-template="cobalt-grid"] .cg-end-body {
  position: absolute !important;

  left: 144px !important;

  right: 144px !important;

  top: 144px !important;

  bottom: 144px !important;

  display: flex !important;

  flex-direction: column !important;

  justify-content: center !important;

  gap: 38px !important;

  z-index: 2 !important;

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

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

  font-weight: 400 !important;

  font-style: italic !important;

  line-height: 0.92 !important;

  letter-spacing: -0.02em !important;

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

}
[data-template="cobalt-grid"] .cg-colophon {
  display: grid !important;

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

  gap: 60px !important;

  margin-top: 38px !important;

  padding-top: 22px !important;

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

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

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

  letter-spacing: 0.06em !important;

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

  line-height: 1.6 !important;

}