/* ==========================================================================
   LAYOUT GEOMETRY — structural CSS for the 22 deck-export layouts.

   Everything here is authored at the fixed 1920×1080 stage size (px units).
   Skin (color, type, decoration) comes from the active template, which sets
   the CSS custom properties below and may override any rule in this file.

   ---- Template variable contract -------------------------------------
   --stage-bg          letterbox color behind the stage
   --slide-bg          slide background
   --slide-bg-accent   background for `bg: accent-soft` slides
   --ink / --muted / --faint     text colors, strong → weak
   --accent / --on-accent        primary accent + text placed on it
   --accent-2          secondary accent (observe/alt states)
   --panel / --panel-2 card & pane backgrounds
   --line              border/hairline color
   --hl                table highlight-column background
   --code-bg / --code-ink        code & terminal surfaces
   --font-display / --font-body / --font-mono
   --radius / --radius-lg        corner rounding
   --bw                signature border width
   --shadow            card shadow ("none" is fine)
   --eyebrow-ls        eyebrow letter-spacing
   --display-weight / --title-weight
   --ease              signature easing curve
   ========================================================================== */

.slide {
  font-family: var(--font-body, sans-serif);
  color: var(--ink, #111);
  padding: 96px 120px 120px;
  display: flex;
  flex-direction: column;
}
.slide.bg-accent-soft { background: var(--slide-bg-accent, var(--slide-bg)); }

/* ---------- entrance animation ---------- */
.slide .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.55s var(--ease, ease-out), transform 0.55s var(--ease, ease-out);
  transition-delay: var(--d, 0s);
}
.slide.active .reveal { opacity: 1; transform: none; }

/* ---------- shared frame ---------- */

.sl-head { flex: none; margin-bottom: 44px; }

.sl-eyebrow {
  font-family: var(--font-mono, monospace);
  font-size: 24px;
  letter-spacing: var(--eyebrow-ls, 0.14em);
  text-transform: uppercase;
  color: var(--accent, #f50);
  margin-bottom: 20px;
}

.sl-chip {
  display: inline-block;
  font-family: var(--font-mono, monospace);
  font-size: 22px;
  padding: 8px 20px;
  border: var(--bw, 2px) solid var(--accent, #f50);
  border-radius: 999px;
  color: var(--accent, #f50);
  margin-bottom: 22px;
}

.sl-title {
  font-family: var(--font-display, sans-serif);
  font-weight: var(--title-weight, 800);
  font-size: 64px;
  line-height: 1.08;
  margin: 0;
  max-width: 1560px;
}

.sl-intro {
  font-size: 29px;
  line-height: 1.5;
  color: var(--muted, #666);
  margin: 24px 0 0;
  max-width: 1440px;
}

.sl-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.sl-takeaway {
  flex: none;
  margin-top: 40px;
  padding-top: 26px;
  border-top: var(--bw, 2px) solid var(--line, #ddd);
  display: flex;
  align-items: baseline;
  gap: 24px;
  font-size: 27px;
  line-height: 1.4;
}
.sl-takeaway-tag {
  font-family: var(--font-mono, monospace);
  font-size: 20px;
  letter-spacing: var(--eyebrow-ls, 0.14em);
  text-transform: uppercase;
  color: var(--accent, #f50);
  white-space: nowrap;
}
.sl-takeaway-text { color: var(--muted, #555); }
.sl-takeaway-text strong, .sl-takeaway-text em { color: var(--ink, #111); }

.sl-pagenum {
  position: absolute;
  right: 56px;
  bottom: 44px;
  font-family: var(--font-mono, monospace);
  font-size: 22px;
  color: var(--faint, #aaa);
}
.sl-pagetotal { opacity: 0.55; }

.slide code {
  font-family: var(--font-mono, monospace);
  font-size: 0.92em;
  background: var(--panel, rgba(127, 127, 127, 0.12));
  border-radius: 6px;
  padding: 2px 10px;
}
.slide em { color: var(--accent, inherit); font-style: italic; }

/* ================= title (cover) ================= */

.layout-title { justify-content: center; }
.cv-banner {
  position: absolute;
  top: 56px;
  left: 120px;
  font-family: var(--font-mono, monospace);
  font-size: 24px;
  letter-spacing: var(--eyebrow-ls, 0.14em);
  text-transform: uppercase;
  color: var(--accent, #f50);
}
.cv-eyebrow {
  font-family: var(--font-mono, monospace);
  font-size: 26px;
  letter-spacing: var(--eyebrow-ls, 0.14em);
  text-transform: uppercase;
  color: var(--accent, #f50);
  margin-bottom: 36px;
}
.cv-title {
  font-family: var(--font-display, sans-serif);
  font-weight: var(--display-weight, 900);
  font-size: 116px;
  line-height: 1.02;
  margin: 0;
  max-width: 1620px;
}
.cv-subtitle {
  font-size: 40px;
  line-height: 1.4;
  color: var(--muted, #666);
  margin: 44px 0 0;
  max-width: 1360px;
}
.cv-footer {
  position: absolute;
  left: 120px;
  right: 120px;
  bottom: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  font-family: var(--font-mono, monospace);
  font-size: 24px;
  color: var(--faint, #999);
  border-top: var(--bw, 2px) solid var(--line, #ddd);
  padding-top: 28px;
}
.cv-topic {
  color: var(--accent, #f50);
  border: var(--bw, 2px) solid var(--accent, #f50);
  padding: 6px 22px;
  border-radius: 999px;
}
.layout-title .sl-pagenum { display: none; }

/* ================= agenda ================= */

.ag-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}
.ag-list li {
  display: flex;
  align-items: baseline;
  gap: 48px;
  padding: 22px 8px;
  border-bottom: 1px solid var(--line, #ddd);
  font-size: 32px;
}
.ag-time {
  flex: none;
  width: 180px;
  font-family: var(--font-mono, monospace);
  font-size: 25px;
  color: var(--accent, #f50);
}
.ag-label { line-height: 1.3; }
/* 7 items: tighter rows */
.ag-list:has(li:nth-child(7)) li { font-size: 28px; padding: 15px 8px; }
.ag-list:has(li:nth-child(7)) .ag-time { width: 150px; font-size: 22px; }
/* 8+ items: two columns */
.ag-list:has(li:nth-child(8)) {
  display: block;
  columns: 2;
  column-gap: 80px;
  margin-top: 20px;
}
.ag-list:has(li:nth-child(8)) li { break-inside: avoid; font-size: 26px; padding: 15px 8px; }
.ag-list:has(li:nth-child(8)) .ag-time { width: 120px; font-size: 21px; }

/* ================= section ================= */

.layout-section { justify-content: center; }
.sec { position: relative; }
.sec-number {
  font-family: var(--font-display, sans-serif);
  font-weight: var(--display-weight, 900);
  font-size: 260px;
  line-height: 1;
  color: var(--accent, #f50);
  opacity: 0.85;
  margin-bottom: 24px;
}
.sec-title {
  font-family: var(--font-display, sans-serif);
  font-weight: var(--display-weight, 900);
  font-size: 96px;
  line-height: 1.05;
  margin: 0;
  max-width: 1560px;
}
.sec-kicker {
  margin-top: 40px;
  font-family: var(--font-mono, monospace);
  font-size: 27px;
  letter-spacing: var(--eyebrow-ls, 0.14em);
  text-transform: uppercase;
  color: var(--muted, #777);
}

/* ================= break ================= */

.layout-break { justify-content: center; align-items: center; text-align: center; }
.brk-label {
  font-family: var(--font-mono, monospace);
  font-size: 30px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent, #f50);
}
.brk-min { display: flex; align-items: baseline; justify-content: center; gap: 24px; margin: 30px 0; }
.brk-num {
  font-family: var(--font-display, sans-serif);
  font-weight: var(--display-weight, 900);
  font-size: 320px;
  line-height: 1;
}
.brk-unit { font-family: var(--font-mono, monospace); font-size: 44px; color: var(--muted, #777); }
.brk-resume { font-size: 36px; color: var(--muted, #777); }
.brk-resume strong { color: var(--ink, #111); }

/* ================= end ================= */

.layout-end { justify-content: center; }
.end-title {
  font-family: var(--font-display, sans-serif);
  font-weight: var(--display-weight, 900);
  font-size: 128px;
  line-height: 1.02;
  margin: 0;
}
.end-subtitle {
  font-size: 38px;
  line-height: 1.5;
  color: var(--muted, #666);
  margin: 48px 0 0;
  max-width: 1400px;
}

/* ================= bullet ================= */

.bl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 34px;
}
.bl-list li { display: flex; gap: 30px; font-size: 33px; line-height: 1.45; }
.bl-mark { flex: none; margin-top: 0.42em; }
.bl-mark::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: var(--accent, #f50);
  border-radius: var(--marker-radius, 3px);
}
.marker-arrow .bl-mark { margin-top: 0; }
.marker-arrow .bl-mark::before {
  content: "→";
  width: auto;
  height: auto;
  background: none;
  color: var(--accent, #f50);
  font-family: var(--font-mono, monospace);
  font-size: 33px;
}
.marker-check .bl-mark { margin-top: 0; }
.marker-check .bl-mark::before {
  content: "✓";
  width: auto;
  height: auto;
  background: none;
  color: var(--accent, #f50);
  font-weight: 700;
  font-size: 33px;
}
.marker-none .bl-mark { display: none; }
.bl-list.size-xl li { font-size: 46px; }
.bl-list.size-xl .bl-mark::before { width: 24px; height: 24px; }

/* dense fallback for long lists — shrink instead of overflowing */
.bl-list:has(li:nth-child(6)) { gap: 26px; }
.bl-list:has(li:nth-child(6)) li { font-size: 30px; }
.bl-list:has(li:nth-child(8)) { gap: 20px; }
.bl-list:has(li:nth-child(8)) li { font-size: 27px; }

/* ================= numbered ================= */

.num-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 36px;
  counter-reset: num;
}
.num-item { display: flex; gap: 36px; align-items: flex-start; }
.num-index {
  flex: none;
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, sans-serif);
  font-weight: var(--display-weight, 900);
  font-size: 40px;
  color: var(--on-accent, #fff);
  background: var(--accent, #f50);
  border-radius: var(--radius, 10px);
}
.num-text h3 { font-family: var(--font-display, sans-serif); font-size: 33px; margin: 6px 0 8px; font-weight: var(--title-weight, 800); }
.num-text p { font-size: 27px; line-height: 1.45; color: var(--muted, #666); margin: 0; max-width: 1380px; }

/* 5+ items: two-column grid */
.num-list:has(.num-item:nth-child(5)) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 64px;
  align-content: center;
}
.num-list:has(.num-item:nth-child(5)) .num-index { width: 68px; height: 68px; font-size: 32px; }
.num-list:has(.num-item:nth-child(5)) .num-text h3 { font-size: 29px; }
.num-list:has(.num-item:nth-child(5)) .num-text p { font-size: 24px; }

/* ================= split ================= */

.sp-panes { flex-direction: row !important; gap: 44px; align-items: stretch; }
.sp-pane {
  flex: 1;
  min-width: 0;
  background: var(--panel, #f4f4f4);
  border: var(--bw, 2px) solid var(--line, #ddd);
  border-radius: var(--radius-lg, 18px);
  padding: 44px 48px;
  box-shadow: var(--shadow, none);
  display: flex;
  flex-direction: column;
}
.sp-right { background: var(--panel-2, var(--panel, #ececec)); }
.sp-label {
  font-family: var(--font-mono, monospace);
  font-size: 23px;
  letter-spacing: var(--eyebrow-ls, 0.14em);
  text-transform: uppercase;
  color: var(--accent, #f50);
  margin-bottom: 30px;
}
.sp-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.sp-items li { font-size: 28px; line-height: 1.45; padding-left: 34px; position: relative; }
.sp-items li::before { content: "—"; position: absolute; left: 0; color: var(--accent, #f50); }
.sp-items:has(li:nth-child(5)) li { font-size: 25px; }

/* ================= table ================= */

.tb { width: 100%; border-collapse: collapse; font-size: 28px; }
.tb th {
  font-family: var(--font-mono, monospace);
  font-size: 22px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--muted, #777);
  padding: 16px 28px;
  border-bottom: var(--bw, 2px) solid var(--ink, #111);
}
.tb td { padding: 22px 28px; border-bottom: 1px solid var(--line, #ddd); line-height: 1.4; vertical-align: top; }
.tb td:first-child { font-weight: 600; }
.tb .col-hl { background: var(--hl, rgba(255, 85, 0, 0.1)); }
.tb th.col-hl { color: var(--accent, #f50); }
/* dense tables */
.tb:has(tbody tr:nth-child(6)) { font-size: 25px; }
.tb:has(tbody tr:nth-child(6)) td { padding: 15px 24px; }
.tb:has(tbody tr:nth-child(9)) { font-size: 22px; }
.tb:has(tbody tr:nth-child(9)) td { padding: 11px 20px; }

/* ================= cardgrid ================= */

.cg-grid { display: grid; gap: 36px; align-content: center; }
.cg-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cg-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cg-grid.cols-4 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; }
.cg-card {
  background: var(--panel, #f4f4f4);
  border: var(--bw, 2px) solid var(--line, #ddd);
  border-radius: var(--radius-lg, 18px);
  padding: 38px 42px;
  box-shadow: var(--shadow, none);
}
.cg-card.accent { background: var(--accent, #f50); border-color: var(--accent, #f50); color: var(--on-accent, #fff); }
.cg-card.accent .cg-k, .cg-card.accent .cg-b { color: inherit; opacity: 0.92; }
.cg-card.accent .slide code, .cg-card.accent code { background: rgba(0, 0, 0, 0.18); }
.cg-k {
  font-family: var(--font-mono, monospace);
  font-size: 21px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent, #f50);
  margin-bottom: 18px;
}
.cg-h { font-family: var(--font-display, sans-serif); font-weight: var(--title-weight, 800); font-size: 33px; margin: 0 0 14px; line-height: 1.15; }
.cg-b { font-size: 25px; line-height: 1.45; color: var(--muted, #666); margin: 0; }
.cg-grid.cols-4 .cg-card { padding: 28px 34px; }
.cg-grid.cols-4 .cg-h { font-size: 29px; }
.cg-grid.cols-4 .cg-b { font-size: 23px; }

/* ================= quote ================= */

.layout-quote { justify-content: center; }
.qt { margin: 0; max-width: 1520px; }
.qt-text {
  font-family: var(--font-display, sans-serif);
  font-weight: var(--quote-weight, 600);
  font-size: 66px;
  line-height: 1.25;
  margin: 0;
  position: relative;
}
.qt-text::before {
  content: "“";
  position: absolute;
  left: -70px;
  top: -30px;
  font-size: 160px;
  color: var(--accent, #f50);
  line-height: 1;
}
.qt-attr {
  margin-top: 52px;
  font-family: var(--font-mono, monospace);
  font-size: 26px;
  letter-spacing: 0.08em;
  color: var(--muted, #777);
}
.qt-attr::before { content: "— "; color: var(--accent, #f50); }

/* ================= image ================= */

.im { flex: 1; min-height: 0; margin: 0; display: flex; flex-direction: column; gap: 28px; }
.im-frame {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg, 18px);
  overflow: hidden;
  background: var(--panel, #f4f4f4);
  border: var(--bw, 2px) solid var(--line, #ddd);
  position: relative;
}
.im-frame img { width: 100%; height: 100%; object-fit: contain; }
.im-fallback {
  display: none;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  text-align: center;
  padding: 60px;
  font-size: 30px;
  color: var(--muted, #777);
}
.im-fallback code { font-size: 22px; }
.im-frame.missing img { display: none; }
.im-frame.missing .im-fallback { display: flex; }
.im-caption { font-size: 28px; line-height: 1.5; color: var(--muted, #666); }
.im.pos-left { flex-direction: row; align-items: stretch; gap: 56px; }
.im.pos-left .im-frame { flex: 1.3; }
.im.pos-left .im-caption { flex: 1; display: flex; align-items: center; font-size: 31px; }

/* ================= code ================= */

.code-fig { margin: 0; display: flex; flex-direction: column; gap: 30px; min-height: 0; }
.code-pre {
  margin: 0;
  background: var(--code-bg, #14141a);
  color: var(--code-ink, #e8e8f0);
  border-radius: var(--radius-lg, 18px);
  padding: 44px 52px;
  font-family: var(--font-mono, monospace);
  font-size: 26px;
  line-height: 1.6;
  overflow: hidden;
  white-space: pre-wrap;
  border: var(--bw, 2px) solid var(--line, transparent);
}
.code-pre code { background: none; padding: 0; font-size: inherit; }
.code-caption { font-size: 28px; line-height: 1.5; color: var(--muted, #666); }
/* long code blocks shrink */
.layout-code .code-pre:has(code) { max-height: 640px; }

/* ================= splitcode ================= */

.sc-panes { flex-direction: row !important; gap: 52px; align-items: center; }
.sc-panes .code-pre { flex: 1.1; min-width: 0; font-size: 25px; }
.sc-bullets { flex: 1; gap: 28px; }
.sc-bullets li { font-size: 28px; }

/* ================= terminal ================= */

.term {
  border-radius: var(--radius-lg, 14px);
  overflow: hidden;
  border: var(--bw, 2px) solid var(--line, #333);
  background: var(--code-bg, #14141a);
}
.term-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  background: rgba(127, 127, 127, 0.14);
}
.term-bar i { width: 16px; height: 16px; border-radius: 50%; background: var(--faint, #666); opacity: 0.6; }
.term-bar i:first-child { background: var(--accent, #f50); opacity: 1; }
.term-title {
  margin-left: 12px;
  font-family: var(--font-mono, monospace);
  font-size: 18px;
  color: var(--faint, #888);
  text-transform: lowercase;
}
.term-body { padding: 40px 46px; display: flex; flex-direction: column; gap: 20px; }
.term-line {
  font-family: var(--font-mono, monospace);
  font-size: 26px;
  line-height: 1.5;
  color: var(--code-ink, #d8d8e0);
  white-space: pre-wrap;
  opacity: 0;
  transition: opacity 0.4s ease;
  transition-delay: var(--d, 0s);
}
.slide.active .term-line { opacity: 1; }
.term-line.hl { color: var(--accent, #f50); font-weight: 700; }
.term-line code { background: none; padding: 0; }

/* ================= pipeline ================= */

.pl-chain { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px; }
.pl-step {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--panel, #f4f4f4);
  border: var(--bw, 2px) solid var(--ink, #111);
  border-radius: var(--radius, 12px);
  padding: 24px 34px;
  box-shadow: var(--shadow, none);
}
.pl-num {
  font-family: var(--font-mono, monospace);
  font-size: 20px;
  color: var(--on-accent, #fff);
  background: var(--accent, #f50);
  border-radius: 6px;
  padding: 4px 12px;
}
.pl-name { font-family: var(--font-display, sans-serif); font-size: 30px; font-weight: var(--title-weight, 700); }
.pl-caption { text-align: center; font-size: 29px; line-height: 1.5; color: var(--muted, #666); margin: 56px auto 0; max-width: 1360px; }

/* ================= trace ================= */

.tr-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.tr-step {
  display: flex;
  align-items: baseline;
  gap: 36px;
  padding: 20px 32px;
  background: var(--panel, #f6f6f6);
  border-left: 8px solid var(--k-color, var(--accent, #f50));
  border-radius: var(--radius, 10px);
}
.tr-step.kind-act      { --k-color: var(--accent, #f50); }
.tr-step.kind-observe  { --k-color: var(--accent-2, #3a86ff); }
.tr-step.kind-reason   { --k-color: var(--muted, #888); }
.tr-step.kind-answer   { --k-color: var(--ink, #111); background: var(--panel-2, var(--panel)); }
.tr-label {
  flex: none;
  width: 200px;
  font-family: var(--font-mono, monospace);
  font-size: 21px;
  letter-spacing: 0.1em;
  color: var(--k-color, var(--accent));
}
.tr-text { font-size: 27px; line-height: 1.4; }
.tr-step.kind-answer .tr-text { font-weight: 600; }
.tr-steps:has(.tr-step:nth-child(6)) { gap: 14px; }
.tr-steps:has(.tr-step:nth-child(6)) .tr-step { padding: 14px 28px; }
.tr-steps:has(.tr-step:nth-child(6)) .tr-text { font-size: 24px; }
/* 8+ steps: tighter still (a 2-line title in a heavy display font leaves less
   room). The JS auto-fit is the final guarantee across templates. */
.tr-steps:has(.tr-step:nth-child(8)) { gap: 10px; }
.tr-steps:has(.tr-step:nth-child(8)) .tr-step { padding: 11px 26px; }
.tr-steps:has(.tr-step:nth-child(8)) .tr-text { font-size: 22px; }
.tr-steps:has(.tr-step:nth-child(8)) .tr-label { font-size: 19px; width: 168px; }

/* ================= pattern (diagram) ================= */

.pt-wrap { gap: 52px; }
.pt-diagram { display: flex; justify-content: center; padding: 12px 0; }
.pt-bullets { gap: 22px; }
.pt-bullets li { font-size: 27px; }

.dg { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
.dg-chain { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center; }
.dg-node {
  background: var(--panel, #f4f4f4);
  border: var(--bw, 2px) solid var(--ink, #111);
  border-radius: var(--radius, 12px);
  padding: 20px 32px;
  font-family: var(--font-display, sans-serif);
  font-size: 26px;
  font-weight: 600;
  text-align: center;
  box-shadow: var(--shadow, none);
}
.dg-node.accent { background: var(--accent, #f50); border-color: var(--accent, #f50); color: var(--on-accent, #fff); }
.dg-node.muted { opacity: 0.55; }
.dg-arrow { flex: none; width: 44px; height: 2px; background: var(--muted, #888); position: relative; }
.dg-arrow::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -5px;
  border: 6px solid transparent;
  border-left-color: var(--muted, #888);
}
.dg-col { display: flex; align-items: center; }
.dg-stack { flex-direction: column; gap: 16px; align-items: stretch; }
.dg-stack .dg-node { text-align: center; }
.dg-loop { flex-direction: column; gap: 18px; }
.dg-back {
  font-family: var(--font-mono, monospace);
  font-size: 23px;
  color: var(--accent, #f50);
  border: 2px dashed var(--accent, #f50);
  border-radius: 999px;
  padding: 10px 30px;
}
.dg-super, .dg-tree { flex-direction: column; gap: 0; }
.dg-tier { display: flex; justify-content: center; }
.dg-row { display: flex; gap: 24px; justify-content: center; align-items: flex-start; }
.dg-link { width: 2px; height: 34px; background: var(--muted, #888); margin: 0 auto; }
.dg-team { display: flex; flex-direction: column; align-items: center; }
.dg-leaves { gap: 14px; }
.dg-leaves .dg-node { font-size: 22px; padding: 14px 22px; }

/* ================= comparison ================= */

.cp-cols { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 40px; align-items: stretch; }
.cp-col {
  background: var(--panel, #f4f4f4);
  border: var(--bw, 2px) solid var(--line, #ddd);
  border-radius: var(--radius-lg, 18px);
  padding: 40px 44px;
  box-shadow: var(--shadow, none);
}
.cp-col.highlight { border-color: var(--accent, #f50); outline: var(--bw, 2px) solid var(--accent, #f50); }
.cp-name { font-family: var(--font-display, sans-serif); font-size: 36px; font-weight: var(--title-weight, 800); margin: 0 0 8px; }
.cp-col.highlight .cp-name { color: var(--accent, #f50); }
.cp-tagline { font-family: var(--font-mono, monospace); font-size: 23px; color: var(--muted, #777); margin-bottom: 26px; }
.cp-rows { margin: 0; display: flex; flex-direction: column; }
.cp-row { padding: 18px 0; border-bottom: 1px solid var(--line, #ddd); }
.cp-row:last-child { border-bottom: none; }
.cp-row dt {
  font-family: var(--font-mono, monospace);
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted, #777);
  margin-bottom: 8px;
}
.cp-row dd { margin: 0; font-size: 25px; line-height: 1.35; }

/* ================= versus ================= */

.vs-wrap { flex-direction: row !important; align-items: stretch; gap: 36px; }
.vs-panel {
  flex: 1;
  background: var(--panel, #f4f4f4);
  border: var(--bw, 2px) solid var(--line, #ddd);
  border-radius: var(--radius-lg, 18px);
  padding: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  box-shadow: var(--shadow, none);
}
.vs-title {
  font-family: var(--font-mono, monospace);
  font-size: 25px;
  letter-spacing: var(--eyebrow-ls, 0.14em);
  text-transform: uppercase;
  color: var(--accent, #f50);
}
.vs-top { display: flex; flex-direction: column; align-items: center; }
.vs-chain { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; }
.vs-chain .dg-node { font-size: 28px; }
.vs-caption { font-size: 25px; color: var(--muted, #777); text-align: center; margin-top: auto; }
.vs-divider {
  align-self: center;
  font-family: var(--font-display, sans-serif);
  font-weight: var(--display-weight, 900);
  font-size: 40px;
  color: var(--accent, #f50);
  text-transform: uppercase;
}

/* ================= poll ================= */

.layout-poll { justify-content: center; }
.poll {
  border: var(--bw, 2px) solid var(--accent, #f50);
  border-radius: var(--radius-lg, 22px);
  background: var(--panel, transparent);
  padding: 90px 100px;
  max-width: 1560px;
  box-shadow: var(--shadow, none);
}
.poll-kicker {
  font-family: var(--font-mono, monospace);
  font-size: 24px;
  letter-spacing: var(--eyebrow-ls, 0.14em);
  text-transform: uppercase;
  color: var(--accent, #f50);
  margin-bottom: 36px;
}
.poll-prompt {
  font-family: var(--font-display, sans-serif);
  font-weight: var(--title-weight, 800);
  font-size: 68px;
  line-height: 1.12;
  margin: 0 0 40px;
}
.poll-instruction { font-size: 33px; line-height: 1.4; margin: 0 0 22px; }
.poll-hint { font-size: 28px; line-height: 1.5; color: var(--muted, #777); font-style: italic; margin: 0; }
/* wordy polls: shrink instead of overflowing */
.poll.dense { padding: 60px 80px; }
.poll.dense .poll-kicker { margin-bottom: 24px; }
.poll.dense .poll-prompt { font-size: 52px; margin-bottom: 28px; }
.poll.dense .poll-instruction { font-size: 29px; }
.poll.dense .poll-hint { font-size: 25px; }

/* ================= clip ================= */

.clip-wrap { gap: 44px; }
.clip-card {
  display: flex;
  align-items: center;
  gap: 44px;
  text-decoration: none;
  color: inherit;
  background: var(--panel, #f4f4f4);
  border: var(--bw, 2px) solid var(--line, #ddd);
  border-radius: var(--radius-lg, 20px);
  padding: 44px 56px;
  box-shadow: var(--shadow, none);
}
.clip-card:hover { border-color: var(--accent, #f50); }
.clip-play {
  flex: none;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--accent, #f50);
  color: var(--on-accent, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  padding-left: 8px;
}
.clip-meta { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.clip-speaker { font-family: var(--font-display, sans-serif); font-size: 33px; font-weight: var(--title-weight, 700); line-height: 1.25; }
.clip-detail { font-family: var(--font-mono, monospace); font-size: 24px; color: var(--muted, #777); }
.clip-bridge { font-size: 29px; line-height: 1.5; color: var(--muted, #666); margin: 0; max-width: 1500px; }

/* ================= overview thumbnails: freeze motion ================= */
.ov-thumb * { animation: none !important; }