/* ============================================
   SLIDES · 各页样式
   Claude 官网风：克制、编辑级、层级通过字重与留白
   ============================================ */

/* ========== 通用 ========== */

kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4vw;
  padding: 0.15vw 0.45vw;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 0.2vw;
  font-family: var(--font-mono);
  font-size: 0.7vw;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Timer */
.timer-widget {
  position: fixed;
  bottom: 2vh;
  left: 2vw;
  font-family: var(--font-mono);
  font-size: 1vw;
  font-weight: 500;
  color: var(--accent);
  background: rgba(38, 38, 36, 0.8);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.3vw 0.8vw;
  letter-spacing: 0.05em;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 1001;
}
.timer-widget.on { opacity: 1; visibility: visible; }

/* Help overlay */
.help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(31, 30, 29, 0.95);
  backdrop-filter: blur(8px);
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.help-overlay.on { opacity: 1; visibility: visible; }
.help-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 3vw;
  min-width: 42vw;
}
.help-panel h3 {
  margin-bottom: 2vw;
  font-size: 1.6vw;
  font-weight: 500;
}
.help-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1vw 2vw;
}
.help-row {
  display: flex;
  align-items: center;
  gap: 0.6vw;
  font-size: 0.9vw;
  color: var(--text-secondary);
}

/* ========== P1 / P2 · 照片墙 ========== */

.slide-photos { background: var(--bg-primary); }

.photo-wall-layout {
  width: 100%;
  height: 100%;
  padding: 4vh 5vw 3vh;
  display: flex;
  flex-direction: column;
  gap: 2vh;
}

.photo-wall-header {
  display: flex;
  flex-direction: column;
  gap: 0.5vw;
}
.photo-wall-title {
  font-size: 3vw;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

/* 2×5 等格网格 · object-fit: contain 保证每张图完整显示 */
.photo-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0.6vw;
  min-height: 0;
}

.photo-cell {
  position: relative;
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  min-width: 0;
  transition: filter 0.5s, border-color 0.4s;
}

.photo-cell .photo-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.photo-cell .photo-placeholder {
  position: absolute;
  inset: 0;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2vw;
  font-weight: 500;
  color: var(--text-disabled);
  font-variant-numeric: tabular-nums;
}
.photo-cell .photo-placeholder::before {
  content: attr(data-placeholder);
}

.photo-cell.img-loaded .photo-placeholder { display: none; }

.photo-cell .photo-num {
  position: absolute;
  top: 0.6vw;
  left: 0.6vw;
  min-width: 1.6vw;
  height: 1.6vw;
  padding: 0 0.5vw;
  background: rgba(31, 30, 29, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-subtle);
  border-radius: 0.8vw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.8vw;
  font-weight: 500;
  color: var(--text-primary);
  z-index: 2;
  font-variant-numeric: tabular-nums;
}

.photo-cell .photo-stamp {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(38, 38, 36, 0.82);
  opacity: 0;
  transition: opacity 0.3s ease-out;
  z-index: 3;
  pointer-events: none;
}
.photo-cell .photo-stamp-label {
  font-family: var(--font-sans);
  font-size: 1.1vw;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 0.4vw 1vw;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: rgba(38, 38, 36, 0.35);
}

.photo-cell.revealed-real {
  border-color: var(--accent);
  border-width: 2px;
  z-index: 10;
}
.photo-cell.revealed-real .photo-num {
  background: var(--accent);
  color: var(--bg-primary);
  border-color: var(--accent);
}

/* 真实照片大字覆盖层 */
.photo-real-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2vw;
  background: rgba(201, 100, 66, 0.78);
  z-index: 4;
  opacity: 0;
  transition: opacity 0.3s ease-out;
  pointer-events: none;
  color: #ffffff;
  text-align: center;
  padding: 1vw;
}
.photo-real-overlay-main {
  font-size: 1.8vw;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.15;
}
.photo-real-overlay-sub {
  font-size: 0.85vw;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.85);
}

/* 关键：filter 只应用到图片，不影响 stamp 覆盖层 */
.photo-cell.dimmed .photo-img { filter: brightness(0.4) saturate(0.4); }

/* 揭晓状态：CSS 规则作为保底，JS 还会做淡入动画 */
.photo-cell.stamped .photo-stamp { opacity: 1; }
.photo-cell.revealed-real .photo-real-overlay { opacity: 1; }

.photo-wall-footer {
  display: flex;
  justify-content: space-between;
  color: var(--text-muted);
  font-size: 0.8vw;
}

/* ========== P3 · 近距离观察（gallery）========== */

.slide-closeup { background: var(--bg-primary); }
.closeup-layout {
  width: 100%;
  height: 100%;
  padding: 4vh 5vw 3vh;
  display: flex;
  flex-direction: column;
  gap: 2vh;
}

.closeup-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2vw;
}
.closeup-header h2 {
  font-size: 2vw;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.closeup-subtitle {
  font-size: 0.95vw;
  color: var(--text-muted);
}

.closeup-stage {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.closeup-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-elevated);
}

.closeup-error {
  padding: 2vw 3vw;
  background: var(--bg-elevated);
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 1.1vw;
  text-align: center;
}

.closeup-badge {
  position: absolute;
  top: 1.6vw;
  left: 1.6vw;
  display: flex;
  flex-direction: column;
  gap: 0.4vw;
  padding: 1.1vw 1.8vw;
  background: rgba(31, 30, 29, 0.92);
  backdrop-filter: blur(12px);
  border: 2px solid var(--border-medium);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
  z-index: 2;
}
.closeup-badge-num {
  font-family: var(--font-mono);
  font-size: 1.3vw;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}
.closeup-badge-label {
  font-size: 2.1vw;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.closeup-badge.is-real {
  border-color: var(--accent);
  background: rgba(224, 122, 93, 0.16);
}
.closeup-badge.is-real .closeup-badge-label {
  color: var(--accent);
}

.closeup-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1vh;
  border-top: 1px solid var(--border-faint);
}
.closeup-pagination {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.closeup-pagination-dots {
  display: flex;
  gap: 0.35vw;
}
.closeup-dot {
  width: 0.6vw;
  height: 0.6vw;
  border-radius: 50%;
  background: var(--border-subtle);
  transition: background 0.3s;
}
.closeup-dot.active { background: var(--accent); }
.closeup-dot.done { background: var(--text-muted); }
.closeup-dot.real { background: transparent; border: 1px solid var(--accent); }
.closeup-dot.real.active { background: var(--accent); }

.closeup-pagination-count {
  font-family: var(--font-mono);
  font-size: 0.9vw;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}

.closeup-hint {
  font-size: 0.75vw;
  color: var(--text-faint);
}
.closeup-hint kbd { font-size: 0.7vw; }

/* ========== P8 · 冲击金句 ========== */

.slide-quote { background: var(--bg-primary); }
.quote-layout {
  width: 100%;
  height: 100%;
  padding: 0 10vw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2vw;
  position: relative;
}
.quote-hero {
  font-size: 5.5vw;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  max-width: 80vw;
}
.quote-hero .highlight {
  color: var(--accent);
}

/* ========== P9 · 单图全屏 ========== */

.slide-single-image {
  background: var(--bg-primary);
  align-items: center;
  justify-content: center;
}
.single-image {
  max-width: 92vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ========== P9 (legacy) · 4 年前 vs 现在 ========== */

.slide-bridge { background: var(--bg-primary); }
.bridge-layout {
  width: 100%;
  height: 100%;
  padding: 5vh 5vw 3vh;
  display: flex;
  flex-direction: column;
  gap: 3vh;
}

.bridge-header {
  display: flex;
  flex-direction: column;
  gap: 0.6vw;
  max-width: 60vw;
}
.bridge-title {
  font-size: 2.8vw;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.bridge-compare {
  flex: 1;
  display: grid;
  grid-template-columns: 40fr 60fr;
  gap: 0;
  align-items: stretch;
  border-top: 1px solid var(--border-faint);
  padding-top: 2vh;
}

.bridge-side {
  display: flex;
  flex-direction: column;
  gap: 1vw;
  padding: 0 3vw;
  position: relative;
}

.bridge-side:first-child {
  border-right: 1px solid var(--border-faint);
  padding-left: 0;
}
.bridge-side:last-child {
  padding-right: 0;
}

.bridge-label {
  display: flex;
  flex-direction: column;
  gap: 0.3vw;
}
.bridge-label h3 {
  font-size: 1.4vw;
  font-weight: 500;
  color: var(--text-primary);
}

.bridge-img-wrap {
  flex: 1;
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-elevated);
  min-height: 45vh;
}

.bridge-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.bridge-img.missing { display: none; }

.bridge-img-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  color: var(--text-faint);
  font-size: 0.9vw;
  z-index: 0;
}

.bridge-caption {
  font-size: 0.9vw;
  color: var(--text-muted);
}

.bridge-old .bridge-img { filter: grayscale(0.25) contrast(0.92); }

/* ========== 时代页 · P11-14 / P16 / P18 统一 ========== */

.slide-era { background: var(--bg-primary); }
.era-layout {
  width: 100%;
  height: 100%;
  padding: 5vh 6vw 3vh;
  display: flex;
  flex-direction: column;
  gap: 2.2vh;
  overflow: hidden;
}

/* Header 区 */
.era-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: flex-end;
  gap: 2vw;
  padding-bottom: 1.5vh;
  border-bottom: 1px solid var(--border-faint);
}
.era-head-left { display: flex; flex-direction: column; gap: 0.4vw; }
.era-tag {
  font-size: 0.8vw;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.era-tag .era-num {
  display: inline-block;
  padding: 0.15vw 0.55vw;
  background: var(--bg-elevated);
  border-radius: 0.25vw;
  margin-right: 0.6vw;
  font-family: var(--font-mono);
}
.era-title {
  font-size: 3.2vw;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.era-subtitle {
  margin-top: 0.5vw;
  font-size: 1.2vw;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-secondary);
}

/* 叙事段落：subtitle 下方、主角上方 */
.era-narrative {
  padding: 1.2vh 0 0.2vh;
  font-size: 1.3vw;
  line-height: 1.6;
  color: var(--text-primary);
  font-weight: 400;
  letter-spacing: 0.005em;
  max-width: 78vw;
}

/* 主角模块 */
.era-protagonist {
  padding: 1.4vh 0;
  border-top: 1px solid var(--border-faint);
  border-bottom: 1px solid var(--border-faint);
  display: flex;
  flex-direction: column;
  gap: 0.6vw;
}
.era-protagonist-label {
  font-size: 0.72vw;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.era-protagonist-cards {
  display: grid;
  gap: 1.5vw;
}
.era-protagonist-cards[data-count="1"] {
  grid-template-columns: 1fr;
}
.era-protagonist-cards[data-count="3"] {
  grid-template-columns: repeat(3, 1fr);
}
.protagonist-card {
  display: flex;
  flex-direction: column;
  gap: 0.35vw;
}
.protagonist-head {
  display: flex;
  align-items: baseline;
  gap: 1vw;
  flex-wrap: wrap;
}
.protagonist-name {
  font-size: 1.5vw;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.protagonist-meta {
  font-family: var(--font-mono);
  font-size: 0.85vw;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.protagonist-why {
  font-size: 0.95vw;
  color: var(--text-secondary);
  line-height: 1.5;
}
.era-head-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2vw;
  text-align: right;
}
.era-days {
  font-size: 3vw;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.era-daterange {
  margin-top: 0.3vw;
  font-family: var(--font-mono);
  font-size: 1.15vw;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* 主体：左侧"理解力阶梯锚点" + 右侧事件流 */
.era-body {
  flex: 1;
  display: grid;
  grid-template-columns: 19vw 1fr;
  gap: 3vw;
  min-height: 0;
}

/* 左侧锚点模块 */
.era-anchor {
  display: flex;
  flex-direction: column;
  gap: 1.2vw;
}
.era-anchor-label {
  font-size: 0.72vw;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.era-anchor-level {
  font-size: 1.6vw;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.era-anchor-level .lvl {
  color: var(--accent);
  font-family: var(--font-mono);
  margin-right: 0.4vw;
}
.era-anchor-items {
  display: flex;
  flex-direction: column;
  gap: 0.9vw;
  margin-top: 0.4vw;
}
.era-anchor-item {
  display: flex;
  flex-direction: column;
  gap: 0.2vw;
}
.era-anchor-item-label {
  font-size: 0.72vw;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}
.era-anchor-item-body {
  font-size: 0.95vw;
  color: var(--text-primary);
  line-height: 1.45;
  font-weight: 400;
}
.era-anchor-item-body.muted {
  color: var(--text-secondary);
}

/* 右侧事件流 */
.era-events {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}
.era-events-header {
  font-size: 0.72vw;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-bottom: 0.8vw;
  border-bottom: 1px solid var(--border-faint);
  margin-bottom: 0.4vw;
}

.era-event {
  display: grid;
  grid-template-columns: 6.5vw 1fr;
  gap: 1.8vw;
  padding: 0.8vw 0;
  border-bottom: 1px solid var(--border-faint);
}
.era-event:last-child { border-bottom: none; }

.era-event-date {
  font-family: var(--font-mono);
  font-size: 1.1vw;
  color: var(--text-primary);
  font-weight: 500;
  padding-top: 0.1vw;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.era-event-body {
  display: flex;
  flex-direction: column;
  gap: 0.35vw;
}
.era-event-title {
  font-size: 1.15vw;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.era-event-detail {
  font-size: 0.9vw;
  color: var(--text-secondary);
  line-height: 1.6;
  font-weight: 400;
}

.era-event.accent .era-event-date { color: var(--accent); }
.era-event.accent .era-event-title { color: var(--accent); }

/* ========== P10 · 时间轴总览（HERO · 双行） ========== */

.slide-timeline { background: var(--bg-primary); }
.timeline-layout {
  width: 100%;
  height: 100%;
  padding: 5vh 6vw 3vh;
  display: flex;
  flex-direction: column;
  gap: 3vh;
}
.timeline-header {
  display: flex;
  flex-direction: column;
  gap: 0.6vw;
  max-width: 70vw;
}
.timeline-title {
  font-size: 3vw;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.timeline-subtitle {
  font-size: 1.1vw;
  color: var(--text-secondary);
  line-height: 1.5;
}

.timeline-canvas {
  flex: 1;
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4vh;
  padding-top: 2vh;
}

.timeline-row {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1vh;
}
.timeline-row-main { flex: 1; min-height: 0; }
.timeline-row-zoom { flex: 1; min-height: 0; }

.tm-row-label {
  font-size: 0.82vw;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tm-row-label-accent { color: var(--accent); }

/* Row 1 canvas */
.tm-canvas {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
}
.tm-canvas .tm-date {
  position: absolute;
  top: 0;
  font-family: var(--font-mono);
  font-size: 0.75vw;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.tm-canvas .tm-bar {
  position: absolute;
  top: 1.8vw;
  height: 2.6vw;
  border-radius: 3px;
}
.tm-canvas .tm-name {
  position: absolute;
  top: 5vw;
  transform: translateX(-50%);
  font-size: 1.05vw;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.tm-canvas .tm-days {
  position: absolute;
  top: 6.6vw;
  transform: translateX(-50%);
  font-family: var(--font-sans);
  font-size: 1.6vw;
  font-weight: 500;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.tm-canvas .tm-days span {
  font-size: 0.55em;
  color: var(--text-muted);
  margin-left: 0.25em;
  font-weight: 400;
}
/* 第 6 阶段 NOW · 竖线 + 右侧标签组 */
.tm-bar-now {
  background: var(--accent) !important;
  min-width: 2px;   /* 极细但要可见 */
}
.tm-now-marker {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 1vw;
  gap: 0.6vw;
}
.tm-now-arrow {
  font-size: 1.8vw;
  color: var(--accent);
  line-height: 1;
  font-weight: 500;
}
.tm-now-info {
  display: flex;
  flex-direction: column;
  gap: 0.1vw;
}
.tm-now-label {
  font-family: var(--font-mono);
  font-size: 0.8vw;
  color: var(--accent);
  letter-spacing: 0.08em;
  font-weight: 500;
}
.tm-now-name {
  font-size: 1.1vw;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.tm-now-days {
  font-size: 0.85vw;
  color: var(--text-secondary);
}
.tm-now-days span {
  font-size: 1.4em;
  color: var(--accent);
  font-weight: 500;
  margin-right: 0.1em;
  font-variant-numeric: tabular-nums;
}

/* ========== P15 · 理解力金字塔 ========== */

.slide-pyramid { background: var(--bg-primary); }
.pyramid-layout {
  width: 100%;
  height: 100%;
  padding: 5vh 6vw 3vh;
  display: flex;
  flex-direction: column;
  gap: 2vh;
}
.pyramid-header {
  display: flex;
  flex-direction: column;
  gap: 0.5vw;
  max-width: 70vw;
}
.pyramid-title {
  font-size: 3vw;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.pyramid-subtitle {
  font-size: 1.1vw;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* 新版 P15 · 两条赛道 */
.pyramid-body {
  flex: 1;
  display: grid;
  grid-template-columns: 58fr 38fr;
  gap: 2vw;
  min-height: 0;
  padding: 1vh 0;
}

.pyramid-track {
  display: flex;
  flex-direction: column;
  gap: 0.8vw;
  min-width: 0;
}

.track-label {
  font-size: 0.8vw;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-bottom: 0.4vw;
}
.track-label-alt { color: var(--accent); }

.pyramid-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.8vw;
  min-height: 0;
}

/* 赛道二：世界模型 callout */
.world-track {
  display: flex;
  flex-direction: column;
  gap: 0.8vw;
  min-width: 0;
}

.world-callout {
  flex: 1;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 1.4vw 1.6vw;
  display: flex;
  flex-direction: column;
  gap: 1vw;
  overflow: hidden;
}

.world-callout-title {
  font-size: 1.6vw;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.world-list {
  display: flex;
  flex-direction: column;
  gap: 0.4vw;
  padding-bottom: 0.6vw;
  border-bottom: 1px solid var(--border-faint);
}
.world-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0.8vw;
}
.world-name {
  font-size: 1.1vw;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.world-meta {
  font-family: var(--font-mono);
  font-size: 0.78vw;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.world-section {
  display: flex;
  flex-direction: column;
  gap: 0.25vw;
}
.world-section-label {
  font-size: 0.7vw;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.world-section-body {
  font-size: 0.92vw;
  color: var(--text-secondary);
  line-height: 1.55;
}

.world-caveat {
  font-size: 0.75vw;
  color: var(--text-muted);
  line-height: 1.55;
  padding: 0.6vw 0.8vw;
  background: rgba(245, 244, 239, 0.03);
  border-radius: var(--radius-sm);
  margin-top: auto;
}

/* chip feature 标注 (L3 里 GPT Image 2.0 "+ 思考模式") */
.model-chip .chip-feature {
  font-size: 0.65vw;
  color: var(--text-muted);
  margin-left: 0.3vw;
  padding: 0.1vw 0.4vw;
  border: 1px solid var(--border-subtle);
  border-radius: 0.15vw;
  letter-spacing: 0.02em;
}
.model-chip.hero .chip-feature {
  color: rgba(31, 30, 29, 0.75);
  border-color: rgba(31, 30, 29, 0.35);
}

/* 原 pyramid-canvas 旧布局保留给兼容（但现在用 pyramid-body） */
.pyramid-canvas { display: none; }

.pyramid-footer {
  padding-top: 1.5vh;
  border-top: 1px solid var(--border-faint);
  display: flex;
  flex-direction: column;
  gap: 0.4vw;
}
.pyramid-insight {
  font-size: 1vw;
  color: var(--text-secondary);
  line-height: 1.5;
}
.pyramid-insight:last-child {
  color: var(--text-primary);
  font-weight: 500;
}

.tier-row {
  display: grid;
  grid-template-columns: 11vw 1fr;
  gap: 1.5vw;
  align-items: center;
}
.tier-row-inner {
  display: flex;
  justify-content: center;
}

.tier-label {
  text-align: right;
  padding-right: 1vw;
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 0.15vw;
  align-items: flex-end;
  align-self: stretch;
  justify-content: center;
  padding-top: 0.4vw;
  padding-bottom: 0.4vw;
}
.tier-label-level {
  font-family: var(--font-mono);
  font-size: 0.85vw;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  font-weight: 500;
}
.tier-label-name {
  font-size: 1.1vw;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.tier-label-desc {
  font-size: 0.7vw;
  color: var(--text-muted);
  line-height: 1.45;
}

.tier-bar {
  padding: 0.7vw 1vw;
  background: var(--bg-elevated);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-sm);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5vw;
  align-items: center;
  min-height: 3.2vw;
}
.tier-bar.hero {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
}
.tier-bar.empty {
  background: transparent;
  border: 1px dashed var(--border-subtle);
  color: var(--text-faint);
  justify-content: center;
  font-size: 0.85vw;
}

.model-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4vw;
  padding: 0.32vw 0.7vw;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 0.2vw;
  font-size: 0.78vw;
  color: var(--text-primary);
  white-space: nowrap;
}
.model-chip .chip-name { font-weight: 500; }
.model-chip .chip-sep {
  width: 1px;
  height: 0.8vw;
  background: var(--border-subtle);
  margin: 0 0.1vw;
}
.model-chip .chip-company {
  font-size: 0.68vw;
  color: var(--text-muted);
}
.model-chip .chip-date {
  font-family: var(--font-mono);
  font-size: 0.68vw;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.model-chip.hero {
  background: var(--accent);
  border-color: var(--accent);
  color: #1f1e1d;
  font-size: 0.95vw;
  padding: 0.4vw 0.9vw;
}
.model-chip.hero .chip-company {
  color: rgba(31, 30, 29, 0.75);
}
.model-chip.hero .chip-date {
  color: rgba(31, 30, 29, 0.75);
}
.model-chip.hero .chip-sep {
  background: rgba(31, 30, 29, 0.3);
}

/* ========== P17 · 独立 vs 通用 对比 ========== */

.slide-compare2 { background: var(--bg-primary); }
.compare2-layout {
  width: 100%;
  height: 100%;
  padding: 5vh 6vw 3vh;
  display: flex;
  flex-direction: column;
  gap: 2.5vh;
}
.compare2-header {
  display: flex;
  flex-direction: column;
  gap: 0.5vw;
  max-width: 70vw;
}
.compare2-title {
  font-size: 3vw;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.compare2-subtitle {
  font-size: 1.1vw;
  color: var(--text-secondary);
  line-height: 1.5;
}

.compare2-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--border-faint);
  min-height: 0;
}
.compare2-column {
  display: flex;
  flex-direction: column;
  padding: 2vh 3vw 2vh 0;
}
.compare2-column + .compare2-column {
  padding-left: 3vw;
  border-left: 1px solid var(--border-faint);
}
.compare2-column-label {
  font-size: 0.8vw;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.8vw;
}
.compare2-column-heading {
  font-size: 1.8vw;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 1.5vh;
  line-height: 1.2;
}
.compare2-column-heading .direction {
  display: block;
  font-size: 0.85vw;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 0.3vw;
  letter-spacing: 0.04em;
}
.compare2-column-heading.shrinking .direction { color: var(--data-lagging); }
.compare2-column-heading.growing .direction { color: var(--data-leading); }

.compare2-list {
  display: flex;
  flex-direction: column;
  gap: 0.6vw;
  flex: 1;
}
.compare2-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1vw;
  padding: 0.8vw 0;
  border-bottom: 1px solid var(--border-faint);
}
.compare2-item:last-child { border-bottom: none; }
.compare2-item-name {
  font-size: 1.05vw;
  font-weight: 500;
  color: var(--text-primary);
}
.compare2-item-name.retiring {
  color: var(--data-lagging);
  text-decoration: line-through;
  text-decoration-color: var(--data-lagging);
}
.compare2-item-meta {
  font-size: 0.75vw;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.compare2-item-tag {
  font-size: 0.7vw;
  color: var(--text-muted);
  padding: 0.1vw 0.4vw;
  background: var(--bg-elevated);
  border-radius: 0.2vw;
  margin-left: 0.4vw;
}

.compare2-verdict {
  padding-top: 1.5vh;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 0.3vw;
}
.compare2-verdict-text {
  font-size: 1.3vw;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.35;
  color: var(--text-primary);
}
.compare2-verdict-text .highlight { color: var(--accent); }

/* ========== P19 · Arena 榜单 ========== */

.slide-arena { background: var(--bg-primary); }
.arena-layout {
  width: 100%;
  height: 100%;
  padding: 5vh 6vw 3vh;
  display: flex;
  flex-direction: column;
  gap: 3vh;
}
.arena-header {
  display: flex;
  flex-direction: column;
  gap: 0.5vw;
  max-width: 70vw;
}
.arena-title {
  font-size: 3vw;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.arena-subtitle {
  font-size: 1.1vw;
  color: var(--text-secondary);
  line-height: 1.5;
}

.arena-chart {
  flex: 1;
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.arena-rows {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
  min-height: 0;
}

.arena-row {
  display: grid;
  grid-template-columns: 3vw 16vw 1fr 6vw;
  align-items: center;
  gap: 1.2vw;
  padding: 0.4vw 0;
}

.arena-rank {
  font-family: var(--font-mono);
  font-size: 1.3vw;
  font-weight: 500;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.arena-row.hero .arena-rank {
  color: var(--accent);
  font-size: 1.8vw;
}

.arena-name-col {
  display: flex;
  flex-direction: column;
  gap: 0.15vw;
}
.arena-name {
  font-size: 1vw;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.arena-maker {
  font-size: 0.75vw;
  color: var(--text-muted);
}
.arena-row.hero .arena-name {
  font-size: 1.2vw;
  color: var(--accent);
}

.arena-bar-track {
  position: relative;
  height: 2.2vw;
  background: var(--bg-elevated);
  border-radius: 3px;
  overflow: visible;
}
.arena-row.hero .arena-bar-track {
  height: 3vw;
}
.arena-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--data-neutral);
  border-radius: 3px;
  min-width: 2px;
}
.arena-row.hero .arena-bar {
  background: var(--accent);
}

.arena-lead-badge {
  position: absolute;
  right: 0.6vw;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.95vw;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: 0.02em;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.arena-elo {
  font-family: var(--font-sans);
  font-size: 1.4vw;
  font-weight: 500;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  text-align: left;
}
.arena-row.hero .arena-elo {
  font-size: 2vw;
  color: var(--accent);
}

.arena-xaxis {
  position: relative;
  height: 1.5vw;
  margin-left: calc(3vw + 16vw + 1.2vw + 1.2vw);
  margin-right: calc(6vw + 1.2vw);
  border-top: 1px solid var(--border-faint);
  margin-top: 0.4vw;
}
.arena-tick {
  position: absolute;
  top: 0.4vw;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.7vw;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.arena-footer {
  display: flex;
  flex-direction: column;
  gap: 0.2vw;
  padding-top: 1vh;
  border-top: 1px solid var(--border-faint);
}
.arena-footer .text-xs {
  font-size: 0.7vw;
  color: var(--text-muted);
}

/* ========== P20 · 八维矩阵 ========== */

.slide-matrix { background: var(--bg-primary); }
.matrix-layout {
  width: 100%;
  height: 100%;
  padding: 5vh 5vw 3vh;
  display: flex;
  flex-direction: column;
  gap: 2vh;
}
.matrix-header {
  display: flex;
  flex-direction: column;
  gap: 0.5vw;
  max-width: 70vw;
}
.matrix-title {
  font-size: 2.8vw;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.matrix-subtitle {
  font-size: 1vw;
  color: var(--text-secondary);
  line-height: 1.5;
}

.matrix-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 11vw repeat(6, 1fr);
  grid-auto-rows: minmax(0, 1fr);
  gap: 1px;
  background: var(--border-faint);
  border: 1px solid var(--border-faint);
  min-height: 0;
}

.matrix-cell {
  position: relative;
  background: var(--bg-primary);
  padding: 0.6vw 0.8vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2vw;
  overflow: hidden;
}

/* 左上角空白 */
.matrix-cell.header-corner {
  background: transparent;
}

/* 表头列（产品名）*/
.matrix-cell.header-col {
  padding: 0.8vw;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 0.3vw;
}
.matrix-cell.header-col .prod-name {
  font-size: 0.95vw;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.15;
  letter-spacing: -0.005em;
}
.matrix-cell.header-col .prod-level {
  font-size: 0.68vw;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  font-family: var(--font-mono);
}
.matrix-cell.header-col .prod-company {
  font-size: 0.65vw;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 0.1vw;
}

.matrix-cell.header-col.hero .prod-name { color: var(--accent); }
.matrix-cell.header-col.hero .prod-level { color: var(--accent); }

/* 表头行（维度名）*/
.matrix-cell.header-row {
  padding: 0.6vw 0.8vw;
  justify-content: center;
  align-items: flex-end;
  text-align: right;
  gap: 0.15vw;
}
.matrix-cell.header-row .dim-name {
  font-size: 0.9vw;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.15;
}
.matrix-cell.header-row .dim-source {
  font-size: 0.6vw;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* 三档颜色 */
.matrix-cell.tier-leading {
  background: var(--data-leading-bg);
}
.matrix-cell.tier-neutral {
  background: var(--bg-primary);
}
.matrix-cell.tier-lagging {
  background: var(--data-lagging-bg);
}

/* 估算维度的淡化处理 */
.matrix-cell.header-row.estimated .dim-name {
  color: var(--text-muted);
  font-weight: 400;
}
.matrix-cell.header-row.estimated .dim-source {
  color: var(--text-faint);
}
.matrix-cell.estimated {
  opacity: 0.68;
}

/* 单元格内容 */
.matrix-cell-value {
  font-size: 0.95vw;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.matrix-cell.tier-leading .matrix-cell-value { color: var(--data-leading); }
.matrix-cell.tier-lagging .matrix-cell-value { color: var(--data-lagging); }
.matrix-cell-note {
  font-size: 0.7vw;
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
}

.matrix-footer {
  padding-top: 1vh;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2vw;
  border-top: 1px solid var(--border-faint);
}
.matrix-legend {
  display: flex;
  gap: 1.5vw;
  align-items: center;
}
.matrix-legend-item {
  display: flex;
  align-items: center;
  gap: 0.4vw;
  font-size: 0.72vw;
  color: var(--text-muted);
}
.matrix-legend-swatch {
  width: 0.8vw;
  height: 0.8vw;
  border-radius: 0.15vw;
}
.matrix-legend-swatch.leading { background: var(--data-leading-bg); border: 1px solid var(--data-leading); }
.matrix-legend-swatch.neutral { background: var(--bg-primary); border: 1px solid var(--border-subtle); }
.matrix-legend-swatch.lagging { background: var(--data-lagging-bg); border: 1px solid var(--data-lagging); }
.matrix-legend-swatch.estimated { background: var(--bg-primary); border: 1px dashed var(--border-subtle); }
.matrix-source {
  font-size: 0.7vw;
  color: var(--text-faint);
  text-align: right;
  line-height: 1.5;
}

/* ========== P26 · 章节结尾 ========== */

.slide-transition { background: var(--bg-primary); }
.transition-layout {
  width: 100%;
  height: 100%;
  padding: 6vh 8vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3vh;
}

.transition-eyebrow {
  font-size: 0.8vw;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.transition-verdict { }
.transition-big {
  font-size: 6vw;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.028em;
  color: var(--text-primary);
  max-width: 85vw;
}
.transition-big .highlight { color: var(--accent); }

.transition-summary {
  display: flex;
  flex-direction: column;
  gap: 0.8vw;
  padding: 2vh 0;
  border-top: 1px solid var(--border-faint);
  border-bottom: 1px solid var(--border-faint);
}
.summary-line {
  display: grid;
  grid-template-columns: 8vw 1fr;
  gap: 1.5vw;
  align-items: baseline;
}
.summary-line .summary-num {
  font-size: 1.8vw;
  font-weight: 500;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.summary-line .summary-text {
  font-size: 1vw;
  color: var(--text-secondary);
}

.transition-question {
  display: flex;
  flex-direction: column;
  gap: 0.4vw;
  max-width: 50vw;
}
.transition-question .q-lead {
  font-size: 1.1vw;
  color: var(--text-muted);
}
.transition-question .q-main {
  font-size: 1.4vw;
  color: var(--text-primary);
  font-weight: 500;
  line-height: 1.3;
}

.transition-next {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 1.5vh;
}
.transition-next-label {
  display: flex;
  flex-direction: column;
  gap: 0.2vw;
}
.transition-next-label .eyebrow {
  font-size: 0.7vw;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.transition-next-label .text-sm {
  font-size: 0.85vw;
  color: var(--text-secondary);
}


/* ============================================================
   CHAPTER 2 · 文生视频 · 新组件
   ============================================================ */

/* ========== c2p1 · 章节标题 ========== */

.slide-chapter-title {
  background: var(--bg-primary);
  align-items: center;
  justify-content: center;
}
.chapter-title-layout {
  width: 100%;
  max-width: 82vw;
  padding: 0 6vw;
  display: flex;
  flex-direction: column;
  gap: 1.5vw;
  align-items: flex-start;
}
.chapter-number {
  font-family: var(--font-mono);
  font-size: 0.9vw;
  color: var(--accent);
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.chapter-title-main {
  font-size: 10vw;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--text-primary);
}
.chapter-title-sub {
  font-size: 2.8vw;
  font-weight: 400;
  color: var(--text-secondary);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.chapter-title-lede {
  margin-top: 2vw;
  padding-top: 2vw;
  border-top: 1px solid var(--border-subtle);
  font-size: 1.35vw;
  line-height: 1.7;
  color: var(--text-primary);
  max-width: 70vw;
}

/* ========== c2p2 · C1-C4 金字塔 ========== */

.slide-c-pyramid { background: var(--bg-primary); }
.c-pyramid-layout {
  width: 100%;
  height: 100%;
  padding: 5vh 6vw 4vh;
  display: flex;
  flex-direction: column;
  gap: 2.5vh;
}
.c-pyramid-header {
  display: flex;
  flex-direction: column;
  gap: 0.6vw;
  max-width: 75vw;
}
.c-pyramid-title {
  font-size: 3vw;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.c-pyramid-subtitle {
  font-size: 1.2vw;
  color: var(--text-secondary);
  line-height: 1.55;
}

.c-pyramid-canvas {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.8vw;
  align-items: center;
  padding: 2vh 0;
  min-height: 0;
}

.c-tier {
  display: flex;
  align-items: center;
  gap: 1.5vw;
  width: 100%;
}
.c-tier-bar {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 1vw 1.5vw;
  display: flex;
  align-items: center;
  gap: 1.2vw;
}
.c-tier-hero .c-tier-bar {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.c-tier-hero .c-tier-code { color: var(--accent); }
.c-tier-hero .c-tier-name { color: var(--accent); }

.c-tier-code {
  font-family: var(--font-mono);
  font-size: 1.6vw;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.c-tier-name {
  font-size: 1.5vw;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  min-width: 8vw;
}
.c-tier-desc {
  font-size: 1vw;
  color: var(--text-secondary);
  line-height: 1.45;
  flex: 1;
}
.c-tier-note {
  font-size: 0.85vw;
  color: var(--text-muted);
  font-family: var(--font-mono);
  white-space: nowrap;
}

/* ========== c2p3 · 双时间轴 ========== */

.slide-dual-timeline { background: var(--bg-primary); }
.dual-timeline-layout {
  width: 100%;
  height: 100%;
  padding: 5vh 6vw 4vh;
  display: flex;
  flex-direction: column;
  gap: 2.5vh;
}
.dual-timeline-header {
  display: flex;
  flex-direction: column;
  gap: 0.6vw;
  max-width: 75vw;
}
.dual-timeline-title {
  font-size: 3vw;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.dual-timeline-subtitle {
  font-size: 1.2vw;
  color: var(--text-secondary);
  line-height: 1.55;
}

.dual-timeline-canvas {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5vh;
  min-height: 0;
  padding: 2vh 0;
}

.dual-tl-row {
  display: flex;
  flex-direction: column;
  gap: 0.8vw;
}
.dual-tl-label {
  font-size: 1.1vw;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.dual-tl-label-mono {
  font-family: var(--font-mono);
  font-size: 0.8vw;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  margin-left: 0.6vw;
}
.dual-tl-canvas {
  position: relative;
  width: 100%;
  height: 6.5vw;
}
.dual-tl-date {
  position: absolute;
  top: 0;
  font-family: var(--font-mono);
  font-size: 0.75vw;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dual-tl-bar {
  position: absolute;
  top: 1.5vw;
  height: 2.4vw;
  border-radius: 3px;
  min-width: 2px;
}
.dual-tl-bar-hero {
  background: var(--accent) !important;
}
.dual-tl-name {
  position: absolute;
  top: 4.3vw;
  transform: translateX(-50%);
  font-size: 0.9vw;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.dual-tl-days {
  position: absolute;
  top: 5.5vw;
  transform: translateX(-50%);
  font-size: 0.75vw;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ========== c2p7 · 三件事子模块 ========== */

.era-three-things {
  padding: 1.2vh 0;
  border-top: 1px solid var(--border-faint);
  border-bottom: 1px solid var(--border-faint);
  display: flex;
  flex-direction: column;
  gap: 0.8vw;
}
.era-three-things-label {
  font-size: 0.72vw;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.three-things-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5vw;
}
.three-thing {
  display: flex;
  flex-direction: column;
  gap: 0.3vw;
}
.three-thing-num {
  font-family: var(--font-mono);
  font-size: 0.9vw;
  color: var(--accent);
  font-weight: 500;
  letter-spacing: 0.05em;
}
.three-thing-title {
  font-size: 1.25vw;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.three-thing-body {
  font-size: 0.88vw;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* c2p7 整页更紧凑一点，为 three-things 腾空间 */
.slide-era-with-extra .era-narrative {
  padding: 0.8vh 0 0.1vh;
  font-size: 1.2vw;
}
.slide-era-with-extra .era-body {
  grid-template-columns: 17vw 1fr;
  gap: 2vw;
}
.slide-era-with-extra .era-event {
  padding: 0.55vw 0;
}

/* ========== c2p8 · 首次命中率 ========== */

.slide-hitrate { background: var(--bg-primary); }
.hitrate-layout {
  width: 100%;
  height: 100%;
  padding: 5vh 6vw 4vh;
  display: flex;
  flex-direction: column;
  gap: 2.5vh;
}
.hitrate-header {
  display: flex;
  flex-direction: column;
  gap: 0.4vw;
  max-width: 78vw;
}
.hitrate-title {
  font-size: 2.8vw;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.hitrate-subtitle {
  font-size: 1.15vw;
  color: var(--text-secondary);
  line-height: 1.5;
}
.hitrate-chart {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5vh;
  min-height: 0;
  padding: 1vh 0;
}
.hitrate-group {
  display: flex;
  flex-direction: column;
  gap: 0.4vw;
}
.hitrate-group-label {
  font-size: 0.8vw;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.2vw;
}
.hitrate-row {
  display: grid;
  grid-template-columns: 18vw 1fr 6vw;
  align-items: center;
  gap: 1vw;
  padding: 0.35vw 0;
}
.hitrate-row-hero {
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  padding: 0.5vw 1vw;
  margin: 0.1vw 0;
}
.hitrate-name {
  font-size: 1vw;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.hitrate-row-hero .hitrate-name { color: var(--accent); font-size: 1.1vw; }
.hitrate-name-note {
  font-size: 0.75vw;
  color: var(--text-muted);
  margin-left: 0.4vw;
}
.hitrate-bar-track {
  position: relative;
  height: 1.4vw;
  background: var(--bg-elevated);
  border-radius: 0.2vw;
  overflow: visible;
}
.hitrate-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--data-neutral);
  border-radius: 0.2vw;
  width: 0;
}
.hitrate-row-hero .hitrate-bar { background: var(--accent); }
.hitrate-row-danger .hitrate-bar { background: var(--data-lagging); }
.hitrate-threshold {
  position: absolute;
  top: -0.3vw;
  bottom: -0.3vw;
  width: 1px;
  background: var(--text-muted);
  opacity: 0.6;
}
.hitrate-threshold::after {
  content: attr(data-label);
  position: absolute;
  top: -1.3vw;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.65vw;
  color: var(--text-muted);
  font-family: var(--font-mono);
  white-space: nowrap;
  letter-spacing: 0.05em;
}
.hitrate-threshold-tool { left: 50%; background: var(--data-leading); opacity: 0.7; }
.hitrate-threshold-gacha { left: 30%; background: var(--data-lagging); opacity: 0.7; }
.hitrate-value {
  font-family: var(--font-sans);
  font-size: 1.1vw;
  font-weight: 500;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.hitrate-row-hero .hitrate-value { color: var(--accent); font-size: 1.3vw; }

.hitrate-footer {
  display: flex;
  flex-direction: column;
  gap: 0.3vw;
  padding-top: 1.2vh;
  border-top: 1px solid var(--border-faint);
}
.hitrate-insight {
  font-size: 1.15vw;
  color: var(--text-primary);
  font-weight: 400;
}
.hitrate-source {
  font-size: 0.75vw;
  color: var(--text-faint);
}

/* ========== c2p9 · 品味门槛地图 ========== */

.slide-taste-map { background: var(--bg-primary); }
.taste-map-layout {
  width: 100%;
  height: 100%;
  padding: 5vh 6vw 4vh;
  display: flex;
  flex-direction: column;
  gap: 2.5vh;
}
.taste-map-header {
  display: flex;
  flex-direction: column;
  gap: 0.5vw;
  max-width: 78vw;
}
.taste-map-title {
  font-size: 2.8vw;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.taste-map-subtitle {
  font-size: 1.15vw;
  color: var(--text-secondary);
  line-height: 1.5;
}

.taste-map-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 3vw;
  align-items: stretch;
  padding: 1vh 0;
  min-height: 0;
}

.taste-map-col {
  display: flex;
  flex-direction: column;
  gap: 1vw;
  padding: 1vw 1.5vw;
  border-radius: var(--radius-md);
}
.taste-col-crossed {
  background: rgba(130, 184, 145, 0.08);
  border-left: 3px solid var(--data-leading);
}
.taste-col-notyet {
  background: rgba(211, 115, 115, 0.08);
  border-left: 3px solid var(--data-lagging);
}
.taste-col-label {
  font-size: 1.1vw;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.taste-col-crossed .taste-col-label { color: var(--data-leading); }
.taste-col-notyet .taste-col-label { color: var(--data-lagging); }

.taste-map-divider {
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--border-medium) 30%, var(--border-medium) 70%, transparent);
}

.taste-col-items {
  display: flex;
  flex-direction: column;
  gap: 1.2vw;
  flex: 1;
}
.taste-item {
  display: flex;
  flex-direction: column;
  gap: 0.3vw;
  padding: 0.5vw 0;
  border-bottom: 1px solid var(--border-faint);
}
.taste-item:last-child { border-bottom: none; }
.taste-item-name {
  font-size: 1.3vw;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.taste-item-detail {
  font-size: 0.9vw;
  color: var(--text-secondary);
  line-height: 1.5;
}

.taste-map-footer {
  padding-top: 1.5vh;
  border-top: 1px solid var(--border-faint);
}
.taste-map-contrast {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2vw;
  align-items: center;
}
.contrast-item {
  display: flex;
  flex-direction: column;
  gap: 0.2vw;
  text-align: center;
}
.contrast-label {
  font-size: 0.75vw;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}
.contrast-value {
  font-size: 1.2vw;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.contrast-divider {
  width: 1px;
  height: 2.5vw;
  background: var(--border-medium);
}

/* ========== c2p10 · 手机摄影参考 ========== */

.slide-ref-photo { background: var(--bg-primary); }
.ref-photo-layout {
  width: 100%;
  height: 100%;
  padding: 5vh 6vw 3vh;
  display: flex;
  flex-direction: column;
  gap: 2vh;
}
.ref-photo-header {
  display: flex;
  flex-direction: column;
  gap: 0.4vw;
}
.ref-photo-title {
  font-size: 2.6vw;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.ref-photo-subtitle {
  font-size: 1.1vw;
  color: var(--text-secondary);
  line-height: 1.5;
}
.ref-photo-narrative {
  font-size: 1.15vw;
  color: var(--text-primary);
  line-height: 1.65;
  padding: 1vh 0;
  border-top: 1px solid var(--border-faint);
  border-bottom: 1px solid var(--border-faint);
}

.ref-photo-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3vw;
  min-height: 0;
  padding: 1vh 0;
}
.ref-photo-col {
  display: flex;
  flex-direction: column;
  gap: 1vw;
  min-width: 0;
}
.ref-col-label {
  font-size: 0.75vw;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ref-timeline {
  display: flex;
  flex-direction: column;
  gap: 0.5vw;
}
.ref-event {
  display: grid;
  grid-template-columns: 5vw 1fr;
  gap: 1.2vw;
  padding: 0.6vw 0;
  border-bottom: 1px solid var(--border-faint);
  align-items: baseline;
}
.ref-event-date {
  font-family: var(--font-mono);
  font-size: 0.95vw;
  font-weight: 500;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.ref-event.accent .ref-event-date { color: var(--accent); }
.ref-event-title {
  font-size: 1.1vw;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.ref-event.accent .ref-event-title { color: var(--accent); }
.ref-event-note {
  font-size: 0.85vw;
  color: var(--text-secondary);
  margin-top: 0.2vw;
}

.ref-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1vw;
  align-items: center;
}
.ref-compare-side {
  display: flex;
  flex-direction: column;
  gap: 0.4vw;
  padding: 1vw 1.2vw;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  min-height: 14vw;
}
.ref-compare-after {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.ref-compare-header {
  font-size: 0.8vw;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ref-compare-after .ref-compare-header { color: var(--accent); }
.ref-compare-list {
  list-style: none;
  margin-top: 0.5vw;
  display: flex;
  flex-direction: column;
  gap: 0.3vw;
}
.ref-compare-list li {
  font-size: 1vw;
  color: var(--text-primary);
  padding-left: 0.8vw;
  position: relative;
}
.ref-compare-list li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--text-muted);
}
.ref-compare-after .ref-compare-list li::before { color: var(--accent); }
.ref-compare-footer {
  margin-top: auto;
  padding-top: 0.8vw;
  border-top: 1px solid var(--border-faint);
  font-size: 0.85vw;
  color: var(--text-muted);
  font-style: italic;
}
.ref-compare-after .ref-compare-footer { color: var(--accent); font-style: normal; font-weight: 500; }
.ref-compare-arrow {
  font-size: 2vw;
  color: var(--accent);
  font-weight: 500;
  line-height: 1;
}

.ref-photo-footer {
  padding-top: 1vh;
  border-top: 1px solid var(--border-faint);
}
.ref-photo-mapping {
  font-size: 1.1vw;
  color: var(--text-primary);
}

/* ========== c2p11 · Arena 双榜 ========== */

.slide-arena-dual { background: var(--bg-primary); }
.arena-dual-layout {
  width: 100%;
  height: 100%;
  padding: 5vh 6vw 3vh;
  display: flex;
  flex-direction: column;
  gap: 2.5vh;
}
.arena-dual-header {
  display: flex;
  flex-direction: column;
  gap: 0.5vw;
  max-width: 78vw;
}
.arena-dual-title {
  font-size: 2.6vw;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.arena-dual-subtitle {
  font-size: 1.15vw;
  color: var(--text-secondary);
  line-height: 1.5;
}

.arena-dual-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3vw;
  min-height: 0;
  padding: 1vh 0;
}
.arena-dual-col {
  display: flex;
  flex-direction: column;
  gap: 1vw;
  min-width: 0;
}
.arena-dual-col-label {
  font-size: 0.9vw;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-bottom: 0.6vw;
  border-bottom: 1px solid var(--border-subtle);
}

.arena-dual-list {
  display: flex;
  flex-direction: column;
  gap: 0.6vw;
}
.arena-dual-row {
  display: grid;
  grid-template-columns: 2vw 1fr 1fr 5vw;
  align-items: center;
  gap: 0.8vw;
  padding: 0.5vw 0;
  border-bottom: 1px solid var(--border-faint);
}
.arena-dual-row:last-child { border-bottom: none; }
.arena-dual-rank {
  font-family: var(--font-mono);
  font-size: 1.1vw;
  font-weight: 500;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.arena-dual-row-hero .arena-dual-rank { color: var(--accent); font-size: 1.4vw; }
.arena-dual-name {
  font-size: 1vw;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.arena-dual-row-hero .arena-dual-name { color: var(--accent); font-size: 1.15vw; }
.arena-dual-bar-track {
  position: relative;
  height: 1vw;
  background: var(--bg-elevated);
  border-radius: 0.2vw;
}
.arena-dual-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--data-neutral);
  border-radius: 0.2vw;
  width: 0;
}
.arena-dual-row-hero .arena-dual-bar { background: var(--accent); }
.arena-dual-elo {
  font-family: var(--font-sans);
  font-size: 1.05vw;
  font-weight: 500;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  text-align: right;
}
.arena-dual-row-hero .arena-dual-elo { color: var(--accent); font-size: 1.2vw; }

.arena-dual-footer {
  display: flex;
  flex-direction: column;
  gap: 0.2vw;
  padding-top: 1vh;
  border-top: 1px solid var(--border-faint);
}
.arena-dual-footer .text-xs {
  font-size: 0.7vw;
  color: var(--text-muted);
}

/* ========== c2p13 · 创意栈坍塌 ========== */

.slide-stack-collapse { background: var(--bg-primary); }
.stack-collapse-layout {
  width: 100%;
  height: 100%;
  padding: 5vh 6vw 4vh;
  display: flex;
  flex-direction: column;
  gap: 2vh;
}
.stack-collapse-header {
  display: flex;
  flex-direction: column;
  gap: 0.4vw;
  max-width: 78vw;
}
.stack-collapse-title {
  font-size: 2.8vw;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.stack-collapse-subtitle {
  font-size: 1.15vw;
  color: var(--text-secondary);
  line-height: 1.55;
}

.stack-collapse-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2vw;
  align-items: stretch;
  min-height: 0;
  padding: 1vh 0;
}
.stack-col {
  display: flex;
  flex-direction: column;
  gap: 0.8vw;
  min-width: 0;
}
.stack-col-label {
  font-size: 0.85vw;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-bottom: 0.4vw;
  border-bottom: 1px solid var(--border-subtle);
}

.stack-layers {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3vw;
  justify-content: stretch;
}
.stack-layer {
  flex: 1;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.8vw 1.2vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1vw;
  min-height: 0;
}
.stack-layer-human {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.stack-layer-name {
  font-size: 1.1vw;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.stack-layer-human .stack-layer-name { color: var(--accent); }
.stack-layer-desc {
  font-size: 0.85vw;
  color: var(--text-muted);
  margin-top: 0.15vw;
}
.stack-layer-tag {
  font-family: var(--font-mono);
  font-size: 0.75vw;
  font-weight: 500;
  padding: 0.2vw 0.55vw;
  background: var(--bg-primary);
  border: 1px solid var(--border-medium);
  border-radius: 0.2vw;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}
.stack-layer-human .stack-layer-tag {
  background: var(--accent);
  color: #1f1e1d;
  border-color: var(--accent);
}

.stack-layer-collapsed {
  flex: 3;
  border: 1px dashed var(--accent);
  background: transparent;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.4vw;
  padding: 1.5vw 1.2vw;
}
.stack-collapsed-label {
  font-size: 0.85vw;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.stack-collapsed-value {
  font-size: 1.8vw;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: -0.015em;
}
.stack-collapsed-tag {
  position: absolute;
  top: 0.8vw;
  right: 0.8vw;
  font-family: var(--font-mono);
  font-size: 0.7vw;
  font-weight: 500;
  padding: 0.2vw 0.55vw;
  background: var(--accent);
  color: #1f1e1d;
  border-radius: 0.2vw;
  letter-spacing: 0.05em;
}
.stack-layer-collapsed { position: relative; }

.stack-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5vw;
  color: var(--accent);
  font-weight: 300;
  padding: 0 0.5vw;
}

.stack-collapse-footer {
  padding-top: 1.5vh;
  border-top: 1px solid var(--border-faint);
  display: flex;
  flex-direction: column;
  gap: 0.4vw;
}
.stack-insight {
  font-size: 1.3vw;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.stack-insight-num {
  font-family: var(--font-sans);
  font-size: 1.6vw;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.stack-insight-note {
  font-size: 0.95vw;
  color: var(--text-secondary);
}

/* ========== c2p14 · 前沿方向（重用 frontier-card 结构） ========== */

.slide-frontiers { background: var(--bg-primary); }
.frontiers-layout {
  width: 100%;
  height: 100%;
  padding: 5vh 6vw 4vh;
  display: flex;
  flex-direction: column;
  gap: 2.5vh;
}
.frontiers-header { display: flex; flex-direction: column; gap: 0.5vw; }
.frontiers-title { font-size: 2.8vw; font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }
.frontiers-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1.5vw;
  min-height: 0;
}
.frontier-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.5vw 1.8vw;
  display: flex;
  flex-direction: column;
  gap: 0.5vw;
  position: relative;
}
.frontier-card-hero {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.frontier-num {
  font-family: var(--font-mono);
  font-size: 0.9vw;
  color: var(--accent);
  letter-spacing: 0.15em;
  font-weight: 500;
}
.frontier-card h3 {
  font-size: 1.5vw;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.frontier-desc {
  flex: 1;
  color: var(--text-secondary);
  line-height: 1.55;
  font-size: 0.95vw;
}
.frontier-footer {
  padding-top: 0.6vw;
  border-top: 1px solid var(--border-faint);
  font-size: 0.85vw;
  color: var(--text-muted);
}
.frontier-footer .eyebrow {
  margin-right: 0.5vw;
  font-size: 0.7vw;
}

/* ========== c2p15 · 瓶颈 ========== */

.slide-bottlenecks { background: var(--bg-primary); }
.bottlenecks-layout {
  width: 100%;
  height: 100%;
  padding: 5vh 6vw 4vh;
  display: flex;
  flex-direction: column;
  gap: 2.5vh;
}
.bottlenecks-header { display: flex; flex-direction: column; gap: 0.5vw; }
.bottlenecks-title { font-size: 2.8vw; font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }
.bottlenecks-list {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1.5vw;
  min-height: 0;
}
.bottleneck {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5vw;
  padding: 1.2vw 1.5vw;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--data-lagging);
  border-radius: var(--radius-md);
}
.bottleneck-num {
  font-family: var(--font-mono);
  font-size: 1.4vw;
  font-weight: 500;
  color: var(--data-lagging);
  opacity: 0.7;
  letter-spacing: 0.02em;
}
.bottleneck-body { display: flex; flex-direction: column; gap: 0.4vw; }
.bottleneck-body h3 { font-size: 1.4vw; font-weight: 500; letter-spacing: -0.005em; }
.bottleneck-detail {
  color: var(--text-secondary);
  line-height: 1.55;
}
.bottleneck-impact {
  margin-top: 0.4vw;
  padding-top: 0.6vw;
  border-top: 1px solid var(--border-faint);
  display: flex;
  flex-direction: column;
  gap: 0.2vw;
}
.bottleneck-impact .eyebrow {
  font-size: 0.7vw;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-muted);
}
.bottleneck-impact .text-md {
  font-size: 1vw;
  color: var(--text-primary);
}

/* ========== c2p16 · 收敛陷阱 ========== */

.slide-convergence { background: var(--bg-primary); }
.convergence-layout {
  width: 100%;
  height: 100%;
  padding: 5vh 6vw 4vh;
  display: flex;
  flex-direction: column;
  gap: 2.5vh;
}
.convergence-header {
  display: flex;
  flex-direction: column;
  gap: 0.4vw;
  max-width: 78vw;
}
.convergence-title {
  font-size: 2.8vw;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.convergence-subtitle {
  font-size: 1.15vw;
  color: var(--text-secondary);
  line-height: 1.55;
}

.convergence-body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2.5vw;
  align-items: center;
  padding: 2vh 0;
}
.convergence-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5vw;
  padding: 1.5vw;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.convergence-col:last-child {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.convergence-col-label {
  font-size: 0.8vw;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.convergence-col:last-child .convergence-col-label { color: var(--accent); }
.convergence-col-headline {
  font-size: 2vw;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.convergence-col:last-child .convergence-col-headline { color: var(--accent); }
.convergence-col-reason {
  font-size: 0.95vw;
  color: var(--text-secondary);
}
.convergence-arrow {
  font-size: 2.5vw;
  color: var(--accent);
  font-weight: 300;
}

.convergence-examples {
  display: flex;
  flex-direction: column;
  gap: 0.6vw;
  padding: 1.5vh 0;
  border-top: 1px solid var(--border-faint);
  border-bottom: 1px solid var(--border-faint);
}
.convergence-example-label {
  font-size: 0.75vw;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.convergence-example-list {
  display: flex;
  gap: 2vw;
  flex-wrap: wrap;
}
.convergence-example {
  font-size: 1.1vw;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.convergence-footer {
  display: flex;
  flex-direction: column;
  gap: 1vh;
  padding-top: 1vh;
}
.convergence-verdict {
  display: flex;
  flex-direction: column;
  gap: 0.4vw;
}
.verdict-row {
  display: grid;
  grid-template-columns: 7vw 1fr;
  gap: 1.5vw;
  align-items: baseline;
  padding: 0.4vw 0;
}
.verdict-row.highlight-row {
  padding: 0.6vw 0.9vw;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
}
.verdict-prefix {
  font-family: var(--font-mono);
  font-size: 0.85vw;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.highlight-row .verdict-prefix { color: var(--accent); font-weight: 500; }
.verdict-content {
  font-size: 1.25vw;
  color: var(--text-primary);
  font-weight: 500;
  letter-spacing: -0.005em;
}

.convergence-moat {
  font-size: 1.3vw;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.convergence-moat-note {
  font-size: 0.95vw;
  color: var(--text-secondary);
  margin-top: 0.3vw;
  font-weight: 400;
}

/* P15 单栏模式（去掉世界模型右栏后）*/
.pyramid-body-single {
  grid-template-columns: 1fr !important;
}
.pyramid-track-full {
  max-width: 90vw;
  margin: 0 auto;
}

/* 视频页 · p20b */
.slide-video {
  background: #000;
  align-items: center;
  justify-content: center;
}
.video-player {
  max-width: 100vw;
  max-height: 100vh;
  max-height: 100dvh;
  width: auto;
  height: auto;
  display: block;
}

/* 心智模型概念登场页（c2p8i, c2p9i） */
.slide-model-intro {
  background: var(--bg-primary);
  align-items: center;
  justify-content: center;
}
.model-intro-layout {
  width: 100%;
  max-width: 82vw;
  padding: 0 6vw;
  display: flex;
  flex-direction: column;
  gap: 1.5vw;
  align-items: flex-start;
}
.model-intro-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.9vw;
  color: var(--accent);
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.model-intro-title {
  font-size: 10vw;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--text-primary);
}
.model-intro-body {
  margin-top: 1.5vw;
  padding-top: 2vw;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 0.8vw;
  font-size: 1.8vw;
  line-height: 1.55;
  color: var(--text-primary);
  max-width: 72vw;
  font-weight: 400;
}
.model-intro-body .highlight { color: var(--accent); }
.model-intro-body .text-muted-line {
  color: var(--text-muted);
}


/* ============================================================
   CHAPTER 3 · AI 对话 · 新组件
   ============================================================ */

/* ========== c3p2 · 6 阶段速览 ========== */

.slide-c3-overview { background: var(--bg-primary); }
.c3-overview-layout {
  width: 100%;
  height: 100%;
  padding: 5vh 6vw 4vh;
  display: flex;
  flex-direction: column;
  gap: 2.5vh;
}
.c3-overview-header { display: flex; flex-direction: column; gap: 0.5vw; }
.c3-overview-title {
  font-size: 2.6vw;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.c3-overview-timeline {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1vw;
  padding: 2vh 0;
  min-height: 0;
  position: relative;
}
.c3-overview-timeline::before {
  content: "";
  position: absolute;
  top: calc(2vh + 2.8vw);
  left: 8%;
  right: 8%;
  height: 1px;
  background: var(--border-subtle);
  z-index: 0;
}
.c3-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6vw;
  text-align: center;
  padding: 0 0.5vw;
  position: relative;
  z-index: 1;
}
.c3-stage-year {
  font-family: var(--font-mono);
  font-size: 0.85vw;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  font-weight: 500;
}
.c3-stage-dot {
  width: 0.7vw;
  height: 0.7vw;
  border-radius: 50%;
  background: var(--text-muted);
  border: 2px solid var(--bg-primary);
  margin: 0.3vw 0;
}
.c3-stage-current .c3-stage-dot {
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.c3-stage-name {
  font-size: 1.2vw;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.c3-stage-current .c3-stage-name { color: var(--accent); }
.c3-stage-model {
  font-family: var(--font-mono);
  font-size: 0.8vw;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}
.c3-stage-current .c3-stage-model { color: var(--accent); }
.c3-stage-line {
  font-size: 0.82vw;
  color: var(--text-muted);
  line-height: 1.45;
}
.c3-overview-footer {
  padding-top: 1.5vh;
  border-top: 1px solid var(--border-faint);
  display: flex;
  flex-direction: column;
  gap: 0.5vw;
}
.c3-overview-anchor {
  font-size: 1.6vw;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.c3-overview-transition {
  font-size: 1vw;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* ========== c3p3 · 痛点 ========== */

.slide-c3-problem { background: var(--bg-primary); }
.c3-problem-layout {
  width: 100%;
  height: 100%;
  padding: 5vh 6vw 4vh;
  display: flex;
  flex-direction: column;
  gap: 2.5vh;
  justify-content: center;
}
.c3-problem-header {
  display: flex;
  flex-direction: column;
  gap: 0.6vw;
  max-width: 82vw;
}
.c3-problem-title {
  font-size: 2.4vw;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.015em;
}
.c3-problem-lede {
  font-size: 1.1vw;
  color: var(--text-secondary);
  padding: 1.5vh 0 0.5vw;
  border-top: 1px solid var(--border-faint);
}
.c3-problem-list {
  display: flex;
  flex-direction: column;
  gap: 0.6vw;
}
.c3-problem-item {
  display: grid;
  grid-template-columns: 4vw 1fr;
  align-items: baseline;
  gap: 1.5vw;
  padding: 1vw 0;
  border-bottom: 1px solid var(--border-faint);
}
.c3-problem-num {
  font-family: var(--font-mono);
  font-size: 1.2vw;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.c3-problem-text {
  font-size: 1.5vw;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}

/* ========== c3p4 · 理想场景 ========== */

.slide-c3-ideal { background: var(--bg-primary); }
.c3-ideal-layout {
  width: 100%;
  height: 100%;
  padding: 5vh 8vw 4vh;
  display: flex;
  flex-direction: column;
  gap: 2.5vh;
  justify-content: center;
}
.c3-ideal-header { display: flex; flex-direction: column; gap: 0.5vw; }
.c3-ideal-title {
  font-size: 2.2vw;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.c3-ideal-narrative {
  font-size: 1.5vw;
  line-height: 1.7;
  color: var(--text-primary);
  max-width: 72vw;
}
.c3-ideal-divider {
  width: 4vw;
  height: 2px;
  background: var(--border-medium);
  margin: 1vw 0;
}
.c3-ideal-turn {
  display: flex;
  flex-direction: column;
  gap: 0.8vw;
  max-width: 72vw;
}
.c3-ideal-question {
  font-size: 1.15vw;
  color: var(--text-muted);
  line-height: 1.55;
}
.c3-ideal-answer {
  font-size: 1.2vw;
  line-height: 1.65;
  color: var(--text-primary);
}
.c3-ideal-verdict {
  padding-top: 2vh;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 0.4vw;
}
.c3-verdict-line {
  font-size: 1.3vw;
  color: var(--text-secondary);
  line-height: 1.45;
}
.c3-verdict-line-big {
  font-size: 1.7vw;
  color: var(--text-primary);
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ========== c3p5 · Context 概念 ========== */

.slide-c3-concept { background: var(--bg-primary); }
.c3-concept-layout {
  width: 100%;
  height: 100%;
  padding: 5vh 6vw 4vh;
  display: flex;
  flex-direction: column;
  gap: 2.2vh;
}
.c3-concept-header {
  display: flex;
  flex-direction: column;
  gap: 0.5vw;
}
.c3-concept-title {
  font-size: 4.5vw;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--accent);
}
.c3-concept-def {
  font-size: 1.5vw;
  color: var(--text-primary);
  line-height: 1.5;
  max-width: 70vw;
  margin-top: 0.5vw;
}
.c3-concept-body {
  flex: 1;
  display: grid;
  grid-template-columns: 0.9fr 1.2fr;
  gap: 3vw;
  min-height: 0;
  padding: 1vh 0;
}
.c3-concept-col {
  display: flex;
  flex-direction: column;
  gap: 0.8vw;
}
.c3-concept-col-label {
  font-size: 0.8vw;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.c3-concept-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5vw;
}
.c3-concept-list li {
  font-size: 1.15vw;
  color: var(--text-primary);
  padding-left: 1vw;
  position: relative;
}
.c3-concept-list li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-size: 1.5em;
  line-height: 1;
}
.c3-concept-col-note {
  margin-top: auto;
  padding-top: 1vw;
  border-top: 1px solid var(--border-faint);
  font-size: 1vw;
  color: var(--text-secondary);
  line-height: 1.5;
}

.c3-concept-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.whiteboard {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.8vw;
}
.whiteboard-label {
  font-size: 0.85vw;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
}
.whiteboard-area {
  background: #f5f4ef;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  padding: 1.2vw 1.5vw;
  display: flex;
  flex-direction: column;
  gap: 0.4vw;
  min-height: 16vw;
  position: relative;
  overflow: hidden;
}
.whiteboard-line {
  font-family: var(--font-mono);
  font-size: 0.85vw;
  color: #3a3935;
  letter-spacing: 0.02em;
}
.whiteboard-line-fading {
  color: #a5a297;
  position: relative;
}
.whiteboard-line-fading::before {
  content: "";
  position: absolute;
  left: -1.5vw;
  right: -1.5vw;
  top: 50%;
  height: 0.1vw;
  background: #c96442;
  transform: translateY(-50%);
}
.whiteboard-note {
  font-size: 0.85vw;
  color: var(--text-muted);
  line-height: 1.55;
}

.c3-concept-footer {
  padding-top: 1.5vh;
  border-top: 1px solid var(--border-faint);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2vw;
}
.c3-concept-meta {
  font-size: 0.85vw;
  color: var(--text-muted);
  line-height: 1.55;
}
.c3-concept-meta .mono {
  color: var(--text-primary);
  font-weight: 500;
}
.c3-concept-verdict {
  font-size: 1.6vw;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* ========== c3p6 · Memory 类比 ========== */

.slide-c3-memory { background: var(--bg-primary); }
.c3-memory-layout {
  width: 100%;
  height: 100%;
  padding: 5vh 6vw 4vh;
  display: flex;
  flex-direction: column;
  gap: 2.5vh;
}
.c3-memory-header {
  display: flex;
  flex-direction: column;
  gap: 0.5vw;
  max-width: 82vw;
}
.c3-memory-title {
  font-size: 2.8vw;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.c3-memory-sub {
  font-size: 1.15vw;
  color: var(--text-secondary);
  line-height: 1.5;
}

.c3-memory-analogy {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 3vw;
  align-items: center;
  padding: 1vh 0;
  min-height: 0;
}
.c3-memory-side {
  display: flex;
  flex-direction: column;
  gap: 1vw;
  align-items: stretch;
}
.c3-memory-side-label {
  font-size: 0.85vw;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}
.c3-memory-bundle {
  display: flex;
  flex-direction: column;
  gap: 0.5vw;
  padding: 1.2vw 1.5vw;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.c3-memory-doc {
  font-size: 1vw;
  color: var(--text-primary);
  padding: 0.4vw 0;
  border-bottom: 1px solid var(--border-faint);
}
.c3-memory-doc:last-child { border-bottom: none; }
.c3-memory-bundle-small {
  padding: 2vw 1.5vw;
  align-items: center;
  text-align: center;
  min-height: 8vw;
  justify-content: center;
  background: var(--accent-soft);
  border-color: var(--accent);
}
.c3-memory-bundle-small .c3-memory-doc {
  font-size: 1.4vw;
  font-weight: 500;
  color: var(--accent);
  border: none;
  padding: 0;
}
.c3-memory-side-note {
  font-size: 0.92vw;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-top: 0.5vw;
}

.c3-memory-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5vw;
}
.c3-memory-arrow-label {
  font-size: 0.85vw;
  color: var(--accent);
  letter-spacing: 0.1em;
  font-weight: 500;
  text-transform: uppercase;
}
.c3-memory-arrow-icon {
  font-size: 3vw;
  color: var(--accent);
  font-weight: 300;
  line-height: 1;
}

.c3-memory-footer {
  padding-top: 1.5vh;
  border-top: 1px solid var(--border-faint);
  display: flex;
  flex-direction: column;
  gap: 0.4vw;
}
.c3-memory-verdict {
  font-size: 1.5vw;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.c3-memory-verdict-sub {
  font-size: 1.3vw;
  color: var(--text-secondary);
  font-weight: 400;
}

/* ========== c3p7 / c3p8 · 产品对比 ========== */

.slide-c3-product { background: var(--bg-primary); }
.c3-product-layout {
  width: 100%;
  height: 100%;
  padding: 5vh 6vw 4vh;
  display: flex;
  flex-direction: column;
  gap: 2.5vh;
}
.c3-product-header {
  display: flex;
  flex-direction: column;
  gap: 0.4vw;
  max-width: 82vw;
}
.c3-product-title {
  font-size: 3.5vw;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.c3-product-sub {
  font-size: 1.3vw;
  color: var(--text-secondary);
  line-height: 1.5;
}

.c3-product-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 3vw;
  padding: 1vh 0;
  min-height: 0;
}
.c3-product-col {
  display: flex;
  flex-direction: column;
  gap: 0.8vw;
}
.c3-product-col-label {
  font-size: 0.8vw;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.c3-product-list {
  display: flex;
  flex-direction: column;
  gap: 0.6vw;
}
.c3-product-item {
  font-size: 1.1vw;
  color: var(--text-primary);
  line-height: 1.55;
  padding: 0.5vw 0;
  border-bottom: 1px solid var(--border-faint);
}
.c3-product-item:last-child { border-bottom: none; }
.c3-danger { color: var(--data-lagging); font-weight: 500; }
.c3-good { color: var(--data-leading); font-weight: 500; }

.c3-product-analysis {
  display: flex;
  flex-direction: column;
  gap: 0.8vw;
  padding: 1.5vw;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.c3-product-key {
  font-size: 1.5vw;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.c3-product-mechanism {
  font-size: 0.98vw;
  color: var(--text-secondary);
  line-height: 1.55;
  padding-top: 0.6vw;
  border-top: 1px solid var(--border-faint);
}

.c3-product-footer {
  padding-top: 1.5vh;
  border-top: 1px solid var(--border-faint);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2vw;
}
.c3-product-metaphor {
  display: flex;
  flex-direction: column;
  gap: 0.3vw;
}
.c3-metaphor-label {
  font-size: 0.75vw;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}
.c3-metaphor-text {
  font-size: 1.5vw;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.c3-product-footer-neg .c3-metaphor-text { color: var(--data-lagging); }
.c3-product-footer-pos .c3-metaphor-text { color: var(--data-leading); }

.c3-product-core {
  font-size: 1.1vw;
  color: var(--text-primary);
  max-width: 32vw;
  text-align: right;
  line-height: 1.5;
}

/* ========== c3p10 · Context 光谱 ========== */

.slide-c3-spectrum { background: var(--bg-primary); }
.c3-spectrum-layout {
  width: 100%;
  height: 100%;
  padding: 5vh 6vw 4vh;
  display: flex;
  flex-direction: column;
  gap: 2.5vh;
}
.c3-spectrum-header {
  display: flex;
  flex-direction: column;
  gap: 0.5vw;
}
.c3-spectrum-title {
  font-size: 2.8vw;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.c3-spectrum-body {
  flex: 1;
  display: grid;
  grid-template-columns: 3vw 1fr;
  gap: 2vw;
  min-height: 0;
  padding: 1vh 0;
}

.c3-spectrum-axis {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6vw;
}
.c3-axis-label {
  font-family: var(--font-mono);
  font-size: 0.9vw;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.1em;
}
.c3-axis-high { color: var(--accent); }
.c3-axis-track {
  flex: 1;
  width: 2px;
  background: linear-gradient(to bottom,
    var(--accent) 0%,
    var(--border-medium) 80%,
    var(--text-faint) 100%);
}

.c3-spectrum-list {
  display: flex;
  flex-direction: column;
  gap: 0.6vw;
  justify-content: space-between;
  padding: 0.5vw 0;
}
.c3-spectrum-row {
  display: grid;
  grid-template-columns: 16vw 1fr;
  gap: 1.5vw;
  align-items: baseline;
  padding: 0.8vw 1vw;
  background: var(--bg-elevated);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-sm);
}
.c3-spectrum-top {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.c3-spectrum-bottom {
  border-color: var(--data-lagging);
  border-left: 3px solid var(--data-lagging);
  background: rgba(211, 115, 115, 0.06);
}
.c3-row-name {
  font-size: 1.2vw;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.c3-spectrum-top .c3-row-name { color: var(--accent); }
.c3-row-desc {
  font-size: 0.95vw;
  color: var(--text-secondary);
  line-height: 1.55;
}

.c3-spectrum-footer {
  padding-top: 2vh;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 0.3vw;
}
.c3-spectrum-verdict {
  font-size: 1.4vw;
  color: var(--text-primary);
  line-height: 1.5;
  letter-spacing: -0.005em;
}
.c3-spectrum-verdict-hero {
  font-size: 1.8vw;
  font-weight: 500;
  margin-top: 0.3vw;
  letter-spacing: -0.01em;
}
.c3-muted { color: var(--text-muted); }

/* ========== c3p11 · 上帝视角 ========== */

.slide-c3-godview { background: var(--bg-primary); }
.c3-godview-layout {
  width: 100%;
  height: 100%;
  padding: 5vh 6vw 4vh;
  display: flex;
  flex-direction: column;
  gap: 2vh;
}
.c3-godview-header {
  display: flex;
  flex-direction: column;
  gap: 0.5vw;
}
.c3-godview-title {
  font-size: 2.2vw;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--text-secondary);
}
.c3-godview-hero {
  font-size: 4.8vw;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text-primary);
  margin-top: 0.3vw;
}

.c3-godview-scenarios {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5vw;
  justify-content: center;
  padding: 1vh 0;
}
.c3-scenario {
  display: grid;
  grid-template-columns: 22vw 3vw 1fr;
  gap: 1vw;
  align-items: baseline;
  padding: 0.9vw 0;
  border-bottom: 1px solid var(--border-faint);
}
.c3-scenario:last-child { border-bottom: none; }
.c3-scenario-trigger {
  font-size: 1.05vw;
  color: var(--text-secondary);
  line-height: 1.4;
}
.c3-scenario-arrow {
  font-size: 1.2vw;
  color: var(--accent);
  text-align: center;
  font-weight: 500;
}
.c3-scenario-question {
  font-size: 1.2vw;
  color: var(--text-primary);
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.c3-godview-footer {
  padding-top: 1.5vh;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 0.3vw;
  font-size: 1.25vw;
  line-height: 1.5;
}
.c3-godview-footer > div:last-child {
  font-size: 1.5vw;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}

/* 结束页 */
.slide-end {
  background: var(--bg-primary);
  align-items: center;
  justify-content: center;
}
.end-layout {
  display: flex;
  align-items: center;
  justify-content: center;
}
.end-text {
  font-size: 1.4vw;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  font-weight: 400;
}
.end-text .end-date {
  font-family: var(--font-mono);
  color: var(--accent);
  margin-left: 0.4vw;
  letter-spacing: 0.05em;
}

/* ========== Chapter 3 实例页 · 逐图揭晓 ========== */

.slide-c3-examples { background: var(--bg-primary); }
.c3-examples-layout {
  width: 100%;
  height: 100%;
  padding: 4vh 5vw 3vh;
  display: flex;
  flex-direction: column;
  gap: 2vh;
}
.c3-examples-header {
  display: flex;
  align-items: baseline;
  gap: 1vw;
}
.c3-examples-header .eyebrow {
  font-size: 1vw;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.c3-examples-grid {
  flex: 1;
  display: grid;
  gap: 1vw;
  min-height: 0;
  align-items: stretch;
}
.c3-examples-grid[data-count="2"] {
  grid-template-columns: 1fr 1fr;
}
.c3-examples-grid[data-count="3"] {
  grid-template-columns: 1fr 1fr 1fr;
}

.c3-example-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-sm);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.35s var(--ease-out);
  min-height: 0;
}
.c3-example-slot.revealed {
  opacity: 1;
}
.c3-example-slot img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.c3-example-slot-num {
  position: absolute;
  top: 0.8vw;
  left: 0.8vw;
  min-width: 1.6vw;
  height: 1.6vw;
  padding: 0 0.45vw;
  background: rgba(31, 30, 29, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-medium);
  border-radius: 0.8vw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.72vw;
  font-weight: 500;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  z-index: 2;
}

.c3-examples-hint {
  font-size: 0.75vw;
  color: var(--text-faint);
  text-align: right;
  padding-top: 0.5vh;
  border-top: 1px solid var(--border-faint);
}
.c3-examples-hint kbd {
  font-size: 0.7vw;
}


/* ============================================================
   移动端适配 · Plan A
   - 竖屏：提示转横屏
   - 横屏矮屏：内容溢出时允许纵向滚动（安全网）
   ============================================================ */

/* 竖屏提示浮层 · 默认隐藏，仅手机竖屏显示 */
.rotate-hint {
  display: none;
}

@media (orientation: portrait) and (max-width: 920px) {
  .rotate-hint {
    position: fixed;
    inset: 0;
    z-index: 9800;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4vw;
    background: var(--bg-primary, #262624);
    text-align: center;
    padding: 0 8vw;
  }
  /* 用户主动选择竖屏浏览后隐藏 */
  body.rotate-hint-dismissed .rotate-hint {
    display: none;
  }
  .rotate-hint-icon {
    font-size: 18vw;
    color: var(--accent, #e07a5d);
    line-height: 1;
    animation: rotate-hint-spin 2.4s ease-in-out infinite;
  }
  .rotate-hint-text {
    font-size: 5.5vw;
    font-weight: 600;
    color: var(--text-primary, #f5f4ef);
    letter-spacing: 0.02em;
  }
  .rotate-hint-sub {
    font-size: 3.6vw;
    color: var(--text-secondary, #cdc9c0);
  }
  .rotate-hint-dismiss {
    margin-top: 4vw;
    padding: 2.6vw 5vw;
    font-size: 3.4vw;
    color: var(--text-muted, #a5a297);
    background: transparent;
    border: 1px solid var(--border-medium, rgba(245,244,239,0.2));
    border-radius: 2vw;
    cursor: pointer;
    font-family: inherit;
  }
}

@keyframes rotate-hint-spin {
  0%, 100% { transform: rotate(-12deg); }
  50% { transform: rotate(78deg); }
}

/* 横屏矮屏（手机横屏）· 内容溢出时允许在页内滚动，避免被裁切 */
@media (orientation: landscape) and (max-height: 520px) {
  .slide.active {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
}