/* ============================================================
   Deck Base — shared design tokens and components for all decks
   ============================================================ */

:root {
  --color-surface: oklch(97% 0.015 80);
  --color-surface-alt: oklch(94% 0.02 75);
  --color-ink: oklch(22% 0.02 40);
  --color-ink-soft: oklch(45% 0.02 40);
  --color-accent: oklch(55% 0.15 40);
  --color-accent-soft: oklch(85% 0.08 55);
  --color-line: oklch(85% 0.015 60);
  --color-highlight: oklch(92% 0.12 95);
  --color-ok: oklch(55% 0.14 145);
  --color-bad: oklch(55% 0.17 25);
  --color-warn: oklch(65% 0.16 70);

  --text-xs: clamp(0.85rem, 0.8rem + 0.2vw, 0.95rem);
  --text-sm: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  --text-base: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  --text-lg: clamp(1.5rem, 1.2rem + 1vw, 2.2rem);
  --text-xl: clamp(2rem, 1.5rem + 2vw, 3.8rem);
  --text-hero: clamp(3rem, 2rem + 4vw, 6rem);

  --space-xs: clamp(0.5rem, 0.4rem + 0.3vw, 0.75rem);
  --space-sm: clamp(1rem, 0.8rem + 0.5vw, 1.5rem);
  --space-md: clamp(1.5rem, 1.2rem + 1vw, 2.5rem);
  --space-lg: clamp(2.5rem, 2rem + 2vw, 4.5rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: "Noto Serif TC", "Source Han Serif TC", "PingFang TC", serif;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
}

.deck { position: relative; width: 100vw; height: 100vh; z-index: 1; }

.slide {
  position: absolute;
  inset: 0;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease-out);
  overflow-y: auto;
}

.slide.active { opacity: 1; visibility: visible; }
.slide-inner { max-width: 1100px; margin: 0 auto; width: 100%; }

h1 { font-size: var(--text-hero); line-height: 0.95; letter-spacing: -0.02em; font-weight: 700; margin-bottom: var(--space-md); }
h2 { font-size: var(--text-xl); line-height: 1.15; letter-spacing: -0.01em; font-weight: 700; margin-bottom: var(--space-md); }
h3 { font-size: var(--text-lg); line-height: 1.2; font-weight: 600; margin-bottom: var(--space-sm); }

p, li { font-size: var(--text-base); line-height: 1.6; color: var(--color-ink); font-family: "Noto Sans TC", "PingFang TC", sans-serif; }
ul, ol { padding-left: 1.5em; margin-bottom: var(--space-sm); }
li + li { margin-top: 0.5em; }

strong { color: var(--color-accent); font-weight: 700; }
em { font-style: normal; background: linear-gradient(180deg, transparent 65%, var(--color-highlight) 65%); padding: 0 0.15em; }

code {
  font-family: "JetBrains Mono", "SF Mono", Consolas, monospace;
  font-size: 0.9em; background: var(--color-surface-alt);
  padding: 0.15em 0.4em; border-radius: 4px; color: var(--color-accent);
}

pre {
  background: var(--color-ink); color: oklch(95% 0.02 80);
  padding: var(--space-sm); border-radius: 8px;
  font-family: "JetBrains Mono", "SF Mono", Consolas, monospace;
  font-size: var(--text-sm); line-height: 1.5; overflow-x: auto; margin-bottom: var(--space-sm);
}
pre code { background: transparent; color: inherit; padding: 0; }

.eyebrow {
  display: inline-block; font-size: var(--text-xs); letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--color-accent);
  margin-bottom: var(--space-sm); font-family: "Noto Sans TC", sans-serif; font-weight: 600;
}
.lede { font-size: var(--text-lg); line-height: 1.4; color: var(--color-ink-soft); max-width: 32ch; margin-bottom: var(--space-md); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); }

.card { padding: var(--space-md); background: var(--color-surface-alt); border-radius: 12px; border: 1px solid var(--color-line); position: relative; }
.card h3 { color: var(--color-accent); margin-bottom: var(--space-xs); }

.rule-row {
  display: flex; align-items: flex-start; gap: var(--space-sm);
  padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-line);
}
.rule-row:last-child { border-bottom: none; }
.rule-num { font-family: "Noto Serif TC", serif; font-size: var(--text-lg); color: var(--color-accent); font-weight: 700; min-width: 2.2ch; }
.rule-title { font-weight: 700; font-size: var(--text-base); min-width: 10ch; font-family: "Noto Sans TC", sans-serif; }
.rule-body { color: var(--color-ink-soft); flex: 1; font-family: "Noto Sans TC", sans-serif; font-size: var(--text-sm); line-height: 1.6; }

table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-family: "Noto Sans TC", sans-serif; margin-bottom: var(--space-sm); }
th, td { padding: 0.75em 1em; text-align: left; border-bottom: 1px solid var(--color-line); vertical-align: top; }
th { background: var(--color-surface-alt); font-weight: 700; }

.hero { text-align: left; }
.brand-mark {
  font-size: var(--text-sm); letter-spacing: 0.3em; color: var(--color-ink-soft);
  margin-bottom: var(--space-md); text-transform: uppercase; font-family: "Noto Sans TC", sans-serif;
}
.hero-title { font-size: var(--text-hero); line-height: 0.9; font-weight: 800; letter-spacing: -0.03em; }
.hero-title .accent { color: var(--color-accent); font-style: italic; font-family: "Noto Serif TC", serif; }
.hero-sub { margin-top: var(--space-md); font-size: var(--text-base); color: var(--color-ink-soft); font-family: "Noto Sans TC", sans-serif; max-width: 42ch; }

.section-divider { text-align: center; }
.section-divider .number {
  font-size: clamp(6rem, 10vw, 10rem); color: var(--color-accent-soft);
  font-family: "Noto Serif TC", serif; font-weight: 700; line-height: 1; opacity: 0.6;
}
.section-divider .title { font-size: var(--text-xl); font-weight: 700; margin-top: -0.3em; }

.callout {
  padding: var(--space-md); background: linear-gradient(135deg, var(--color-accent-soft), transparent);
  border-left: 4px solid var(--color-accent); border-radius: 8px; margin-top: var(--space-sm);
}
.callout-label {
  font-size: var(--text-xs); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-accent); font-weight: 700; margin-bottom: 0.3em;
  font-family: "Noto Sans TC", sans-serif;
}

.timeline { display: grid; grid-template-columns: auto 1fr; gap: var(--space-xs) var(--space-md); font-family: "Noto Sans TC", sans-serif; font-size: var(--text-sm); }
.time-mark { color: var(--color-accent); font-weight: 600; font-variant-numeric: tabular-nums; }

.progress-bar { position: fixed; bottom: 0; left: 0; height: 3px; background: var(--color-accent); transition: width 0.3s var(--ease-out); z-index: 10; }
.slide-indicator {
  position: fixed; bottom: var(--space-sm); right: var(--space-sm);
  font-family: "Noto Sans TC", sans-serif; font-size: var(--text-xs); color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums; background: var(--color-surface);
  padding: 0.3em 0.8em; border-radius: 99px; border: 1px solid var(--color-line); z-index: 10;
}
.help-hint {
  position: fixed; bottom: var(--space-sm); left: var(--space-sm);
  font-family: "Noto Sans TC", sans-serif; font-size: var(--text-xs);
  color: var(--color-ink-soft); z-index: 10; opacity: 0.6;
}
.speaker-notes { display: none; }

.prompt-box {
  background: oklch(98% 0.01 80); border: 1px solid var(--color-line);
  border-left: 4px solid var(--color-accent); border-radius: 8px;
  padding: var(--space-sm); font-family: "Noto Sans TC", sans-serif;
  font-size: var(--text-sm); line-height: 1.7; white-space: pre-wrap;
}
.prompt-box.bad { border-left-color: var(--color-bad); background: oklch(97% 0.02 25 / 0.4); }
.prompt-box.good { border-left-color: var(--color-ok); background: oklch(97% 0.025 145 / 0.3); }

.prompt-label {
  display: inline-block; font-size: var(--text-xs); font-family: "Noto Sans TC", sans-serif;
  font-weight: 700; padding: 0.2em 0.7em; border-radius: 99px;
  margin-bottom: 0.4em; letter-spacing: 0.1em;
}
.prompt-label.bad { background: oklch(95% 0.03 25); color: oklch(45% 0.15 25); }
.prompt-label.good { background: oklch(95% 0.04 145); color: oklch(35% 0.13 145); }

.badge { display: inline-block; padding: 0.2em 0.7em; background: var(--color-accent); color: var(--color-surface); border-radius: 99px; font-size: var(--text-xs); font-weight: 600; font-family: "Noto Sans TC", sans-serif; letter-spacing: 0.05em; }
.badge-soft { background: var(--color-accent-soft); color: var(--color-ink); }
.badge.ok { background: var(--color-ok); }
.badge.bad { background: var(--color-bad); }
.badge.warn { background: var(--color-warn); color: var(--color-ink); }

.four-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); }
.pillar {
  background: linear-gradient(180deg, var(--color-surface-alt), transparent);
  border-radius: 10px; padding: var(--space-sm); border: 1px solid var(--color-line);
  text-align: center; font-family: "Noto Sans TC", sans-serif;
}
.pillar .p-icon { font-size: 2.5rem; line-height: 1; margin-bottom: 0.3em; }
.pillar .p-zh { font-size: var(--text-base); font-weight: 700; font-family: "Noto Serif TC", serif; color: var(--color-accent); margin-bottom: 0.2em; }
.pillar .p-en { font-size: var(--text-xs); letter-spacing: 0.08em; color: var(--color-ink-soft); margin-bottom: var(--space-xs); }
.pillar .p-body { font-size: var(--text-xs); line-height: 1.5; color: var(--color-ink); }

.group-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
.group-card {
  padding: var(--space-sm); border-radius: 10px;
  background: var(--color-surface-alt); border: 1px solid var(--color-line);
  font-family: "Noto Sans TC", sans-serif;
}
.group-card.a { border-top: 4px solid oklch(65% 0.13 220); }
.group-card.b { border-top: 4px solid oklch(65% 0.15 130); }
.group-card.c { border-top: 4px solid oklch(65% 0.17 40); }
.group-card .g-tag { font-size: var(--text-xs); letter-spacing: 0.1em; color: var(--color-ink-soft); margin-bottom: 0.3em; }
.group-card .g-title { font-size: var(--text-base); font-weight: 700; font-family: "Noto Serif TC", serif; margin-bottom: 0.3em; }
.group-card .g-body { font-size: var(--text-sm); line-height: 1.6; color: var(--color-ink-soft); }

/* Paired comparison grid — rows auto-align across columns so images share a top edge
   even when the text above them (labels, prompt boxes) has different heights. */
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-md);
  row-gap: var(--space-sm);
  align-items: start;
  margin-top: var(--space-md);
}
.compare-grid > * { min-width: 0; }
.compare-grid figure {
  margin: 0;
  display: flex; flex-direction: column;
}
.compare-grid figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: clamp(180px, 30vh, 320px);
  object-fit: contain;
  cursor: zoom-in;
  transition: transform 0.25s var(--ease-out);
}
.compare-grid figure img:hover { transform: scale(1.02); }
.compare-grid figure figcaption {
  font-size: var(--text-xs); color: var(--color-ink-soft);
  font-style: italic; margin-top: 0.4em; line-height: 1.5;
}
.compare-grid .cg-note {
  font-size: var(--text-sm); color: var(--color-ink-soft); margin: 0;
}

.compare-origin {
  margin: 0 auto var(--space-sm);
  max-width: 520px;
  text-align: center;
}
.compare-origin img {
  display: block; margin: 0 auto;
  width: 100%; height: auto;
  max-height: clamp(120px, 20vh, 180px);
  object-fit: contain;
  cursor: zoom-in;
  transition: transform 0.25s var(--ease-out);
}
.compare-origin img:hover { transform: scale(1.02); }
.compare-origin figcaption {
  font-size: var(--text-xs); color: var(--color-ink-soft);
  font-style: italic; margin-top: 0.3em; letter-spacing: 0.05em;
}

.takeaways {
  list-style: none; padding: 0; counter-reset: takeaway;
  display: flex; flex-direction: column; gap: var(--space-sm);
}
.takeaways li {
  counter-increment: takeaway;
  font-size: var(--text-lg); line-height: 1.5;
  padding-left: 2.2em; position: relative;
  font-family: "Noto Sans TC", sans-serif;
}
.takeaways li::before {
  content: counter(takeaway);
  position: absolute; left: 0; top: 0.1em;
  font-family: "Noto Serif TC", serif; font-size: 1.4em; font-weight: 700;
  color: var(--color-accent-soft); line-height: 1;
}

.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 3vw, 3rem);
  background: oklch(10% 0.01 60 / 0.92);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s var(--ease-out), visibility 0s linear 0.3s;
  cursor: zoom-out;
}
.lightbox.active {
  opacity: 1; visibility: visible;
  transition: opacity 0.3s var(--ease-out), visibility 0s linear 0s;
}
.lightbox img {
  display: block;
  max-width: 95vw; max-height: 95vh;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 20px 60px oklch(0% 0 0 / 0.5);
  transform: scale(0.95);
  transition: transform 0.3s var(--ease-out);
}
.lightbox.active img { transform: scale(1); }
.lightbox-hint {
  position: fixed; bottom: var(--space-md); left: 50%; transform: translateX(-50%);
  font-family: "Noto Sans TC", sans-serif; font-size: var(--text-xs);
  color: oklch(90% 0.01 60 / 0.7); letter-spacing: 0.15em;
  text-transform: uppercase; pointer-events: none;
}

@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4, .four-pillars, .group-grid { grid-template-columns: 1fr; }
}

@media print {
  .slide { position: relative; opacity: 1; visibility: visible; page-break-after: always; height: 100vh; }
  .progress-bar, .slide-indicator, .help-hint { display: none; }
}