/* ═══════════════════════════════════════════════════════════════════════
   JST Interview Deck — pink template, harmonious proportions, larger
   typography. Fonts: Arial for Latin glyphs, Noto Sans JP for Japanese.
   Type scale uses a 1.25 ratio anchored to a 19 px body.
   Rhythm uses a Fibonacci-leaning spacing scale (8 / 12 / 20 / 32 / 52).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Palette — anchored to the original .pptx so the look feels continuous */
  --pink-primary:  #E5198B;
  --pink-soft:     #FFF0F8;
  --pink-paler:    #FEF0FC;
  --pink-pale:     #FFCCCC;
  --pink-cream:    #FFF8FB;
  --magenta:       #7B2D8B;
  --cyan-accent:   #00BCD4;
  --ink:           #2A2024;
  --body:          #4A4248;
  --soft-gray:     #8A7E80;
  --hairline:      #F0D8E6;
  --bg:            #FFFFFF;

  /* Type stack — Latin glyphs render in Arial; Japanese glyphs fall through
     to Noto Sans JP (loaded via Google Fonts) and system Japanese sans. */
  --face: Arial, 'Noto Sans JP', 'Noto Sans CJK JP', 'Yu Gothic UI',
          'メイリオ', 'Meiryo', 'Hiragino Kaku Gothic ProN', sans-serif;

  /* Type scale (1.25 ratio, ≈ 23 px base).
     Use these consistently so the page has rhythm. */
  --fs-micro:  17px;
  --fs-small:  20px;
  --fs-base:   24px;
  --fs-lg:     30px;
  --fs-xl:     38px;
  --fs-2xl:    48px;
  --fs-3xl:    60px;
  --fs-4xl:    76px;
  --fs-5xl:    96px;
  --fs-6xl:   120px;

  /* Rhythm */
  --pad-bar-x: 64px;
  --pad-body-x: 72px;
  --pad-body-y: 48px;
}

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

html, body {
  height: 100%;
  font-family: var(--face);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--body);
  background: #15110f;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Deck container ──────────────────────────────────────────────────── */
#deck {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: var(--bg);
  overflow: hidden;
}

.slide {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  background: var(--bg);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.slide.active { display: flex; opacity: 1; }

/* ─── Title bar ───────────────────────────────────────────────────────── */
.title-bar {
  flex-shrink: 0;
  height: 104px;
  background: var(--pink-soft);
  border-bottom: 5px solid var(--pink-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad-bar-x);
  position: relative;
}
.title-bar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--pink-pale), transparent);
  opacity: 0.7;
}
.title-bar .title {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--magenta);
  letter-spacing: 0.01em;
  line-height: 1.2;
  word-break: keep-all;
  text-wrap: balance;
}
.title-bar .title-divider {
  color: var(--pink-primary);
  margin: 0 0.5em;
  font-weight: 300;
}

.sdg-slot {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sdg-icon {
  height: 72px;
  width: 72px;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}

/* Compact 2-row grid for slides that show many SDG icons (e.g., all 17).
   Falls back to 9 columns; 17 icons fill row 1 fully and row 2 partially,
   yielding a clean two-row block within the title bar. */
.sdg-slot.sdg-grid {
  display: grid;
  grid-template-columns: repeat(9, 42px);
  grid-auto-rows: 42px;
  gap: 5px;
  align-content: center;
}
.sdg-slot.sdg-grid .sdg-icon {
  height: 42px;
  width: 42px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* ─── Body container ──────────────────────────────────────────────────── */
.content-body {
  flex: 1;
  padding: var(--pad-body-y) var(--pad-body-x);
  display: flex;
  flex-direction: column;
  gap: 28px;
  overflow: hidden;
  min-height: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   1. COVER
   ═══════════════════════════════════════════════════════════════════════ */
.cover {
  background:
    radial-gradient(ellipse at 30% 25%, var(--pink-soft) 0%, transparent 60%),
    radial-gradient(ellipse at 78% 78%, var(--pink-paler) 0%, transparent 55%),
    var(--bg);
  align-items: center;
  justify-content: center;
}
.cover-stage {
  text-align: center;
  max-width: 1500px;
  padding: 60px 40px;
}
.cover-eyebrow {
  font-size: var(--fs-small);
  letter-spacing: 0.32em;
  color: var(--pink-primary);
  margin-bottom: 36px;
  font-weight: 700;
}
.cover-title {
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--magenta);
  line-height: 1.35;
  margin-bottom: 18px;
  letter-spacing: 0.01em;
  /* Prevent the Japanese title from breaking mid-phrase (e.g.,
     leaving a lone "部" on a new line). `word-break: keep-all`
     blocks breaks between adjacent CJK characters; `text-wrap:
     balance` is a modern hint for nicer line distribution. */
  word-break: keep-all;
  text-wrap: balance;
}
.cover-title-sub {
  display: inline-block;
  margin-top: 16px;
  font-size: var(--fs-2xl);
  font-weight: 900;
  color: var(--ink);
  letter-spacing: 0.06em;
}
.cover-rule {
  border: none;
  border-top: 3px solid var(--pink-primary);
  width: 84px;
  margin: 36px auto 28px;
}
.cover-name {
  font-size: var(--fs-xl);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 18px;
}
.cover-name-romaji {
  font-weight: 400;
  font-size: 0.78em;
  color: var(--body);
  letter-spacing: 0.04em;
}
.cover-meta {
  font-size: var(--fs-small);
  color: var(--body);
  letter-spacing: 0.14em;
  display: flex;
  justify-content: center;
  gap: 18px;
}
.cover-meta .dot { color: var(--pink-primary); }

/* ═══════════════════════════════════════════════════════════════════════
   2 & 6. DIVIDER (PART I / PART II)
   ═══════════════════════════════════════════════════════════════════════ */
.divider {
  background:
    radial-gradient(circle at 50% 50%, var(--pink-paler) 0%, transparent 60%),
    var(--bg);
  align-items: center;
  justify-content: center;
}
.divider-stage { text-align: center; padding: 60px 40px; }

/* ─── Ontology breadcrumb (collapsed by default, opened by a chevron) ──
   Default state shows only a small fading arrow; clicking it expands the
   six ontology terms below.  Hovering the open terms reveals the title
   "The Ontology of Social Fact" as a soft tooltip above. */
.ontology-toggle {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.ontology-toggle-btn {
  background: transparent;
  border: none;
  color: var(--pink-primary);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  opacity: 0.32;
  transition: opacity 0.25s ease, transform 0.35s ease;
  padding: 4px 14px;
  font-family: inherit;
}
.ontology-toggle-btn:hover  { opacity: 0.7; }
.ontology-toggle-btn.is-open { transform: rotate(180deg); opacity: 0.55; }

.ontology-banner {
  position: relative;
  display: inline-block;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.35s ease,
              transform 0.35s ease,
              visibility 0s linear 0.35s;
}
.ontology-banner.open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.35s ease,
              transform 0.35s ease,
              visibility 0s linear 0s;
}
.ontology-banner-title {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--fs-micro);
  letter-spacing: 0.34em;
  color: var(--soft-gray);
  font-style: italic;
  font-weight: 400;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  white-space: nowrap;
}
.ontology-banner.open:hover .ontology-banner-title,
.ontology-banner.open:hover .ontology-citation {
  opacity: 0.85;
}
.ontology-citation {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  color: var(--soft-gray);
  font-style: italic;
  letter-spacing: 0.02em;
  line-height: 1.5;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  white-space: nowrap;
}
.ontology-citation em {
  font-style: italic;
  color: var(--ink);
}
.ontology-concepts {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1200px;
}
.ontology-concept {
  font-size: var(--fs-small);
  color: #C8BBC4;
  letter-spacing: 0.06em;
  font-weight: 500;
  padding: 2px 10px;
  border-radius: 4px;
  transition: color 0.3s ease, background 0.3s ease;
}
.ontology-concept.active {
  color: var(--magenta);
  font-weight: 700;
  background: var(--pink-paler);
  border-bottom: 2px solid var(--pink-primary);
}
.ontology-concept-sep {
  color: var(--pink-pale);
  font-weight: 300;
  font-size: var(--fs-small);
  opacity: 0.5;
}

/* ─── Inline keyword highlight inside subtitles ─────────────────────── */
.kw {
  background: var(--pink-paler);
  border-bottom: 2px solid var(--pink-primary);
  color: var(--magenta);
  padding: 2px 10px;
  border-radius: 4px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.02em;
}
.part-label {
  font-size: var(--fs-lg);
  color: var(--pink-primary);
  letter-spacing: 0.45em;
  font-weight: 900;
  margin-bottom: 28px;
}
.part-title {
  font-size: var(--fs-5xl);
  color: var(--magenta);
  font-weight: 900;
  letter-spacing: 0.02em;
  margin-bottom: 24px;
  line-height: 1.15;
  word-break: keep-all;
  text-wrap: balance;
}
.part-sub {
  font-size: var(--fs-lg);
  color: var(--body);
  font-style: italic;
  letter-spacing: 0.1em;
  font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════════════════
   3. PROFILE
   ═══════════════════════════════════════════════════════════════════════ */
.profile-body { padding: 36px var(--pad-body-x) 48px; }
.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: start;
  flex: 1;
  min-height: 0;
}
.id-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
.id-row:last-child { border-bottom: none; }
.id-label {
  font-size: var(--fs-micro);
  letter-spacing: 0.22em;
  color: var(--pink-primary);
  text-transform: uppercase;
  font-weight: 700;
}
.id-value {
  font-size: var(--fs-base);
  color: var(--ink);
  line-height: 1.7;
  font-weight: 500;
}
.id-romaji {
  color: var(--body);
  font-weight: 400;
  font-size: 0.88em;
}

.timeline-heading {
  font-size: var(--fs-micro);
  letter-spacing: 0.28em;
  color: var(--pink-primary);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}
.tl-entry {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 22px;
  margin-bottom: 26px;
  padding-left: 18px;
  border-left: 3px solid var(--pink-pale);
}
.tl-year {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--magenta);
  letter-spacing: 0.06em;
  padding-top: 2px;
}
.tl-org {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.4;
}
.tl-role {
  font-size: var(--fs-small);
  color: var(--body);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════════
   4. CARDS-3 (Reading / Writing / Sharing)
   ═══════════════════════════════════════════════════════════════════════ */
.cards-3 {
  flex-direction: row;
  gap: 32px;
  padding-top: 40px;
  flex: 1;
  min-height: 0;
  align-items: stretch;
}
.card {
  flex: 1;
  background: var(--pink-cream);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 0;
}
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 32px; right: 32px;
  height: 4px;
  background: var(--pink-primary);
  border-radius: 0 0 4px 4px;
  opacity: 0.9;
}
.card-eyebrow {
  font-size: var(--fs-small);
  letter-spacing: 0.22em;
  color: var(--pink-primary);
  font-weight: 700;
  margin-bottom: 14px;
  margin-top: 12px;
}
.card-title {
  font-size: var(--fs-xl);
  font-weight: 900;
  color: var(--magenta);
  margin-bottom: 22px;
  line-height: 1.25;
  letter-spacing: 0.01em;
}
.card-body {
  font-size: var(--fs-base);
  line-height: 1.75;
  color: var(--ink);
  flex: 1;
  font-weight: 400;
}
.card-body strong {
  color: var(--magenta);
  font-weight: 700;
}

/* Cherry-blossom bulleted list inside a card (Sakura Science motif). */
.card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}
.card-list li {
  position: relative;
  padding-left: 36px;
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--ink);
  font-weight: 500;
}
.card-list li::before {
  content: "🌸";
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 0.95em;
  line-height: 1.4;
  opacity: 0.95;
}
.card-list li strong {
  color: var(--magenta);
  font-weight: 800;
}
.card-list li em {
  font-style: italic;
  color: var(--magenta);
  font-weight: 600;
}

/* Figure inside a card. `margin-top: auto` pushes it to the bottom of
   the card, so all three figures align to the same baseline regardless
   of how much text sits above them. */
.card-figure {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-shrink: 0;
}
.card-figure img {
  max-width: 100%;
  max-height: 260px;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(50, 35, 50, 0.10);
  cursor: zoom-in;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
/* The publication chart sits wider (90% of card width) and tall. */
.card-figure img[src*="publication"] {
  width: 90%;
  max-width: 90%;
  max-height: 400px;
}
/* The Zhihu screenshot — larger and frameless (no shadow / no rounding). */
.card-figure img[src*="zhihu"] {
  width: 85%;
  max-width: 85%;
  max-height: 440px;
  border-radius: 0;
  box-shadow: none;
}
.card-figure img:hover {
  transform: scale(1.025);
  box-shadow: 0 8px 22px rgba(50, 35, 50, 0.15);
}

/* ─── Develop-mode memo overlay ─────────────────────────────────────
   Hidden by default; visible only when JS enables dev mode (Shift+M).
   Inside `.slide-memo`:
     - `.slide-memo-handle` — small warm arrow button at bottom-right.
     - `.slide-memo-panel`  — slides up from the bottom edge, occupies
                              about 1/3 of the viewport height, with a
                              translucent backdrop so slide content
                              beneath remains visible. ──────────── */
.slide-memo {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  pointer-events: none;  /* let clicks pass through when collapsed */
}
.slide-memo[hidden] { display: none; }
.slide-memo-handle {
  position: absolute;
  right: 28px;
  bottom: 18px;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 7px 14px;
  background: rgba(255, 240, 248, 0.92);
  border: 1.5px solid var(--pink-pale);
  border-radius: 999px;
  color: var(--magenta);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(229, 25, 139, 0.18),
              0 1px 3px rgba(0, 0, 0, 0.10);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: transform 0.18s ease, box-shadow 0.18s ease,
              background 0.18s ease;
}
.slide-memo-handle:hover {
  transform: translateY(-2px);
  background: rgba(255, 230, 244, 1);
  box-shadow: 0 6px 18px rgba(229, 25, 139, 0.28),
              0 2px 4px rgba(0, 0, 0, 0.12);
}
.slide-memo-handle:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 3px;
}
.slide-memo-chevron {
  font-size: 18px;
  line-height: 1;
  display: inline-block;
  transform: translateY(1px);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.slide-memo[data-open="true"] .slide-memo-chevron {
  transform: rotate(180deg) translateY(-1px);
}
.slide-memo-label { letter-spacing: 0.14em; }
.slide-memo-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 33vh;
  min-height: 220px;
  pointer-events: auto;
  background: rgba(255, 252, 254, 0.78);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  border-top: 1px solid var(--pink-pale);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.12);
  transform: translateY(102%);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0.2, 1);
  display: flex;
  flex-direction: column;
  padding: 14px 36px 18px;
  box-sizing: border-box;
}
.slide-memo[data-open="true"] .slide-memo-panel {
  transform: translateY(0);
}
.slide-memo-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px dashed var(--pink-pale);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.slide-memo-bar-id {
  font-weight: 800;
  color: var(--magenta);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.slide-memo-bar-hint {
  color: var(--soft-gray);
  font-style: italic;
}
.slide-memo-input {
  flex: 1;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  padding: 0;
}
.slide-memo-input::placeholder {
  color: rgba(80, 60, 70, 0.32);
  font-style: italic;
}

/* Brief toast flashed when dev mode is toggled via keyboard. */
.slide-memo-flash {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(40, 18, 30, 0.86);
  color: #FFF0F8;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 7px 18px;
  border-radius: 999px;
  z-index: 1100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.slide-memo-flash[data-show="true"] {
  opacity: 1;
}

/* ─── Image lightbox — click any card figure to enlarge ──────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(20, 15, 22, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  z-index: 2000;
  cursor: zoom-out;
}
.lightbox.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}
.lightbox-img {
  max-width: 95vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
  cursor: default;
  transform: scale(0.96);
  transition: transform 0.3s ease;
}
.lightbox.active .lightbox-img {
  transform: scale(1);
}
.lightbox-close {
  position: absolute;
  top: 24px;
  right: 28px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.85);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}

/* ═══════════════════════════════════════════════════════════════════════
   5. TRAVEL CAROUSEL — fills the body
   ═══════════════════════════════════════════════════════════════════════ */
.travel-body {
  padding: 28px 56px 36px;
  gap: 18px;
  align-items: stretch;
}
.carousel {
  display: flex;
  align-items: stretch;
  gap: 28px;
  width: 100%;
  flex: 1;
  min-height: 0;
}
.car-arrow {
  background: var(--pink-cream);
  border: 1px solid var(--pink-pale);
  color: var(--magenta);
  width: 64px;
  height: 64px;
  align-self: center;
  border-radius: 50%;
  cursor: pointer;
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.2s ease;
  font-family: inherit;
  user-select: none;
  font-weight: 300;
}
.car-arrow:hover:not(:disabled) {
  background: var(--pink-primary);
  color: #fff;
  border-color: var(--pink-primary);
}
.car-arrow:disabled { opacity: 0.25; cursor: not-allowed; }
.car-stage {
  flex: 1;
  min-width: 0;
  background: var(--pink-cream);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  position: relative;
  justify-content: center;
  position: relative;
}
.car-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: opacity 0.4s ease;
}
.car-placeholder {
  color: var(--soft-gray);
  font-style: italic;
  padding: 32px;
  text-align: center;
  line-height: 1.7;
  font-size: var(--fs-small);
}
/* Travel map overlay: tiny GIS in the top-left corner of the photo. */
.travel-map {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 240px;
  height: 150px;
  z-index: 20;
  border: 2px solid #fff;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  background: #d9e8e5;
  overflow: hidden;
}
.travel-map .leaflet-control-attribution {
  font-size: 8px;
  background: rgba(255, 255, 255, 0.75);
  padding: 0 3px;
}
.travel-map .leaflet-control-zoom { display: none; }
.travel-map-label {
  position: absolute;
  top: 168px;
  left: 12px;
  z-index: 20;
  width: 240px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #1A0F0F;
  background: rgba(255, 255, 255, 0.88);
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  letter-spacing: 0.02em;
  pointer-events: none;
}
.travel-map-label.empty { display: none; }
/* Highlight ring for the active travel marker. */
.travel-marker {
  background: #E5198B;
  border: 2.5px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(229, 25, 139, 0.35),
              0 1px 3px rgba(0, 0, 0, 0.35);
  width: 10px;
  height: 10px;
}
.travel-marker.inactive {
  background: #7B2D8B;
  opacity: 0.55;
  box-shadow: 0 0 0 1px rgba(123, 45, 139, 0.25),
              0 1px 2px rgba(0, 0, 0, 0.25);
  width: 7px;
  height: 7px;
  border-width: 1.5px;
}
.car-caption {
  text-align: center;
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--ink);
  font-style: italic;
  min-height: 1.6em;
  margin: 0 auto;
  max-width: 900px;
  transition: opacity 0.35s ease;
}
.car-counter {
  text-align: center;
  color: var(--soft-gray);
  font-size: var(--fs-micro);
  letter-spacing: 0.22em;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════
   7. PAST  &  9. FUTURE
   ═══════════════════════════════════════════════════════════════════════ */
.past-body, .future-body { gap: 28px; }
.phase-row {
  display: flex;
  gap: 18px;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}
.phase {
  flex: 1;
  background: var(--pink-cream);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
}
.phase::before {
  content: '';
  position: absolute;
  top: 0; left: 26px; right: 26px;
  height: 4px;
  background: var(--pink-primary);
  border-radius: 0 0 4px 4px;
  opacity: 0.9;
}
.phase-tag {
  font-size: var(--fs-micro);
  letter-spacing: 0.26em;
  color: var(--pink-primary);
  font-weight: 900;
  margin-top: 12px;
  margin-bottom: 8px;
}
.phase-year {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--magenta);
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}
.phase-org {
  font-size: var(--fs-base);
  color: var(--ink);
  font-weight: 700;
  margin-bottom: 6px;
  line-height: 1.4;
}
.phase-role {
  font-size: var(--fs-small);
  color: var(--body);
  margin-bottom: 14px;
}
.phase-heading {
  font-size: var(--fs-xl);
  font-weight: 900;
  color: var(--magenta);
  margin-top: 6px;
  margin-bottom: 14px;
  line-height: 1.3;
  letter-spacing: 0.01em;
}
.phase-detail {
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--ink);
}
.phase-list { list-style: none; }
.phase-list li {
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--ink);
  padding: 7px 0 7px 32px;
  position: relative;
  font-weight: 500;
}
.phase-list li::before {
  content: '🌸';
  position: absolute;
  left: 0;
  top: 6px;
  font-size: 0.85em;
  line-height: 1.4;
  opacity: 0.9;
}

/* Nested sub-bullets inside a phase-list item — quiet, italic, no marker. */
.phase-list .sub-list {
  list-style: none;
  margin: 6px 0 4px 0;
  padding: 0;
}
.phase-list .sub-list li {
  font-size: var(--fs-micro);
  padding: 2px 0;
  font-style: italic;
  color: var(--body);
  font-weight: 400;
  line-height: 1.55;
}
.phase-list .sub-list li::before {
  content: "";
  display: none;
}
.phase-arrow {
  flex: 0 0 auto;
  align-self: center;
  font-size: var(--fs-2xl);
  color: var(--pink-primary);
  font-weight: 300;
}
.phase-conclusion {
  background: var(--pink-soft);
  border-left: 4px solid var(--pink-primary);
  padding: 18px 26px;
  font-size: var(--fs-base);
  color: var(--ink);
  line-height: 1.7;
  border-radius: 0 6px 6px 0;
  font-weight: 500;
}
.conclusion-soft {
  font-style: italic;
  text-align: center;
  border-left: none;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  color: var(--magenta);
  font-size: var(--fs-lg);
  letter-spacing: 0.05em;
  font-weight: 600;
}
.phase-future .phase-tag { color: var(--cyan-accent); }
.phase-future::before    { background: var(--cyan-accent); }

/* ── Quote pin: small clickable dot on a phase card ─────────────── */
.phase-quote-pin {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--pink-primary);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(229, 25, 139, 0.32),
              0 2px 6px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  padding: 0;
  z-index: 5;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.phase-quote-pin:hover {
  transform: scale(1.18);
  box-shadow: 0 0 0 3px rgba(229, 25, 139, 0.4),
              0 3px 9px rgba(0, 0, 0, 0.22);
}
.phase-quote-pin:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 3px;
}
.phase-quote-pin::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  pointer-events: none;
  animation: phase-quote-pulse 2.4s ease-out infinite;
}
@keyframes phase-quote-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(229, 25, 139, 0.45); }
  70%  { box-shadow: 0 0 0 14px rgba(229, 25, 139, 0); }
  100% { box-shadow: 0 0 0 0 rgba(229, 25, 139, 0); }
}

/* ── Quote popup ──────────────────────────────────────────────── */
.phase-quote-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: min(620px, 86vw);
  background: #FFFBF8;
  border: 1.5px solid var(--pink-pale);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32),
              0 0 0 1px rgba(229, 25, 139, 0.08) inset;
  padding: 30px 40px 28px;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.phase-quote-popup[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.phase-quote-popup[hidden] {
  display: none;
}
.phase-quote-close {
  position: absolute;
  top: 10px;
  right: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  color: var(--soft-gray);
  padding: 0;
}
.phase-quote-close:hover { color: var(--magenta); }
.phase-quote-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--magenta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--pink-pale);
}
.phase-quote-text {
  font-size: 22px;
  line-height: 1.7;
  font-weight: 500;
  color: var(--ink);
  font-family: "Shippori Mincho B1", "Hiragino Mincho ProN",
               "Yu Mincho", "MS Mincho", serif;
  letter-spacing: 0.02em;
  text-align: left;
  margin-bottom: 14px;
}
.phase-quote-emph {
  font-weight: 800;
  color: var(--magenta);
  background: linear-gradient(transparent 62%,
              rgba(229, 25, 139, 0.20) 62%,
              rgba(229, 25, 139, 0.20) 96%, transparent 96%);
  padding: 0 2px;
  letter-spacing: 0.04em;
}
.phase-quote-attr {
  font-size: 14px;
  color: var(--body);
  text-align: right;
  font-style: italic;
  letter-spacing: 0.04em;
}
.phase-quote-divider {
  height: 1px;
  background: linear-gradient(to right,
              transparent, var(--pink-pale) 18%, var(--pink-pale) 82%, transparent);
  margin: 22px 0 18px;
}
.phase-quote-subtitle {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--magenta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.phase-quote-reflection {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink);
  font-family: "Shippori Mincho B1", "Hiragino Mincho ProN",
               "Yu Mincho", "MS Mincho", serif;
}
.phase-quote-reflection p {
  margin: 0 0 10px;
}
.phase-quote-reflection em {
  font-style: italic;
  color: var(--magenta);
  font-weight: 700;
}
.phase-quote-example {
  margin-top: 12px !important;
  padding: 10px 14px;
  border-left: 3px solid var(--pink-pale);
  background: rgba(255, 224, 239, 0.28);
  font-size: 14px;
  line-height: 1.7;
  color: var(--body);
  border-radius: 0 6px 6px 0;
}
.phase-quote-points {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.phase-quote-point {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 240, 248, 0.55);
  border-left: 3px solid var(--pink-pale);
  border-radius: 0 6px 6px 0;
  font-size: 14.5px;
  line-height: 1.7;
}
.phase-quote-point-num {
  flex: 0 0 auto;
  font-weight: 800;
  color: var(--magenta);
  font-family: 'Cambria Math', Georgia, serif;
}
.phase-quote-point-body {
  flex: 1;
  color: var(--ink);
}
.phase-quote-point-body em {
  font-style: italic;
  font-weight: 700;
  color: var(--magenta);
}
.phase-quote-point-body strong {
  font-weight: 800;
  color: var(--magenta);
  letter-spacing: 0.04em;
}
/* Purple highlight: distinct from the pink/magenta emphasis, used to
   mark a sharp philosophical takeaway inside a point. */
.phase-quote-purple {
  font-weight: 800;
  color: #5B3FA8;
  background: linear-gradient(transparent 62%,
              rgba(123, 45, 139, 0.22) 62%,
              rgba(123, 45, 139, 0.22) 96%,
              transparent 96%);
  padding: 0 3px;
  letter-spacing: 0.03em;
}
/* Synthesis-point variant: cyan accent to distinguish it from
   the problem-points (1) and (2). Marks a turn from critique
   toward direction of resolution. */
.phase-quote-point-syn {
  background: rgba(232, 250, 252, 0.55);
  border-left-color: #7FD8E0;
}
.phase-quote-point-syn .phase-quote-point-num,
.phase-quote-point-syn .phase-quote-point-body em,
.phase-quote-point-syn .phase-quote-point-body strong {
  color: #00838F;
}
.phase-quote-conclusion {
  margin-top: 18px;
  padding: 14px 18px;
  background: #FFF0F8;
  border: 1px solid var(--pink-pale);
  border-left: 4px solid var(--pink-primary);
  border-radius: 0 8px 8px 0;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink);
  font-family: "Shippori Mincho B1", "Hiragino Mincho ProN",
               "Yu Mincho", "MS Mincho", serif;
}
.phase-quote-conclusion em {
  font-style: italic;
  color: var(--magenta);
  font-weight: 700;
}
.phase-quote-conclusion-arrow {
  color: var(--pink-primary);
  font-weight: 700;
  margin-right: 6px;
  letter-spacing: -0.05em;
}
/* Backdrop */
.phase-quote-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 8, 14, 0.36);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.phase-quote-backdrop[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}

/* ─── Motivation slide: compact phase cards + future-goals strip ───── */
.motivation-body { gap: 20px; }
.motivation-body .phase {
  padding: 16px 22px;
}
.motivation-body .phase-tag    { margin-top: 4px; margin-bottom: 4px; }
.motivation-body .phase-year   { margin-bottom: 8px; }
.motivation-body .phase-heading{ margin-top: 2px; margin-bottom: 8px; }
.motivation-body .phase-list li {
  padding: 4px 0 4px 28px;
  line-height: 1.5;
}
.motivation-goals {
  flex: 1;
  background: var(--pink-soft);
  border: 1px solid var(--pink-pale);
  border-radius: 8px;
  padding: 22px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  min-height: 0;
}
.motivation-goals::before {
  content: '';
  position: absolute;
  top: 0; left: 30px; right: 30px;
  height: 4px;
  background: var(--cyan-accent);
  border-radius: 0 0 4px 4px;
  opacity: 0.9;
}
.motivation-goals-title {
  font-size: var(--fs-xl);
  font-weight: 900;
  color: var(--cyan-accent);
  margin: 6px 0 0;
  text-align: center;
  letter-spacing: 0.02em;
}
.motivation-goals-body {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 22px;
  align-items: stretch;
}
.motivation-goals-list {
  flex: 1;
  margin: 0;
  padding: 0 4px 0 28px;
  list-style: decimal;
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--ink);
  align-self: center;
}
.motivation-goals-list li {
  padding: 3px 0 3px 6px;
  font-weight: 500;
}
.motivation-goals-list li::marker {
  color: var(--magenta);
  font-weight: 900;
}
.motivation-goals-aside {
  flex: 0 0 auto;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: "Kaisei Tokumin", "Shippori Mincho B1", "Reggae One",
               "Yuji Mai", "Yuji Syuku", "Yuji Boku",
               "Hiragino Mincho ProN", "Yu Mincho", "MS Mincho",
               "Kaiti SC", "DFKai-SB", serif;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #1A0F0F;
  padding: 4px 8px 4px 16px;
  border-left: 1.5px solid var(--pink-pale);
  white-space: nowrap;
  -webkit-text-stroke: 0.5px #1A0F0F;
  text-shadow: 0 0 0.3px currentColor;
}
.motivation-goals-aside .goals-aside-line {
  display: block;
  margin: 0 8px;
  padding: 0;
}

/* Auxiliary/secondary fields footer at the bottom of a phase card. */
.phase-aux {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--hairline);
  font-size: var(--fs-micro);
  color: var(--body);
  font-style: italic;
  line-height: 1.55;
}
.aux-label {
  color: var(--pink-primary);
  font-weight: 900;
  letter-spacing: 0.16em;
  font-style: normal;
  margin-right: 10px;
  font-size: 0.9em;
}

/* Sub-routes (e.g. two academic paths within Phase 2 of Future) */
.route {
  background: rgba(255, 255, 255, 0.55);
  border-left: 3px solid var(--cyan-accent);
  padding: 12px 14px 10px;
  margin-top: 14px;
  border-radius: 0 6px 6px 0;
}
.route-label {
  font-size: var(--fs-micro);
  letter-spacing: 0.22em;
  color: var(--cyan-accent);
  font-weight: 900;
  margin-bottom: 4px;
}
.route-title {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--magenta);
  margin-bottom: 4px;
  line-height: 1.35;
}
.route .phase-list { margin-top: 2px; }
.route .phase-list li {
  font-size: var(--fs-micro);
  padding: 3px 0 3px 28px;
}
.route .phase-list li::before { top: 4px; }

/* ═══════════════════════════════════════════════════════════════════════
   8. PRESENT
   ═══════════════════════════════════════════════════════════════════════ */
.present-body { gap: 28px; }
.present-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28px;
  flex: 1;
  min-height: 0;
}
.present-block {
  background: var(--pink-cream);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 32px;
  position: relative;
}
.present-block::before {
  content: '';
  position: absolute;
  top: 0; left: 32px; right: 32px;
  height: 4px;
  background: var(--pink-primary);
  border-radius: 0 0 4px 4px;
  opacity: 0.9;
}
.block-title {
  font-size: var(--fs-xl);
  font-weight: 900;
  color: var(--magenta);
  margin-top: 14px;
  margin-bottom: 18px;
  letter-spacing: 0.01em;
}
.block-list { list-style: none; }
.block-list li {
  font-size: var(--fs-base);
  line-height: 1.75;
  color: var(--ink);
  padding: 6px 0 6px 36px;
  position: relative;
  font-weight: 500;
}
.block-list li::before {
  content: '🌸';
  position: absolute;
  left: 0;
  top: 4px;
  font-size: 0.85em;
  line-height: 1.4;
  opacity: 0.9;
}
.skills {
  background: var(--pink-soft);
  padding: 22px 32px;
  border-radius: 8px;
  border: 1px solid var(--hairline);
}
.skills-label {
  font-size: var(--fs-micro);
  letter-spacing: 0.26em;
  color: var(--pink-primary);
  font-weight: 900;
  margin-bottom: 14px;
}
.skill-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  font-size: var(--fs-small);
  padding: 7px 16px;
  background: #fff;
  border: 1px solid var(--pink-pale);
  border-radius: 999px;
  color: var(--magenta);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════════════════════════════
   HUD (page indicator + nav hint)
   ═══════════════════════════════════════════════════════════════════════ */
.hud {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  padding: 16px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  z-index: 1000;
  font-size: var(--fs-micro);
  color: var(--soft-gray);
  letter-spacing: 0.14em;
}
.hud .nav-hint { opacity: 0.55; }
.hud .page-number {
  font-weight: 700;
  color: var(--magenta);
  letter-spacing: 0.22em;
  font-size: var(--fs-small);
}
.hud .page-number .of {
  color: var(--pink-pale);
  margin: 0 6px;
  font-weight: 300;
}

/* ═══════════════════════════════════════════════════════════════════════
   PART III — RESEARCH SLIDES
   Two-column layout: figure on the left, notes (meta + heading + bullets)
   on the right.  Same pink-cream card aesthetic as Past/Future, but with
   a roomier figure pane suited to a single diagram.
   ═══════════════════════════════════════════════════════════════════════ */
.research-body { gap: 24px; }
.research-grid {
  display: grid;
  grid-template-columns: 1.618fr 1fr;   /* golden ratio */
  gap: 36px;
  flex: 1;
  min-height: 0;
}

.research-figure {
  background: var(--pink-cream);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.research-figure::before {
  content: '';
  position: absolute;
  top: 0; left: 32px; right: 32px;
  height: 4px;
  background: var(--pink-primary);
  border-radius: 0 0 4px 4px;
  opacity: 0.9;
  z-index: 1;
}
/* Stage holds the image (or placeholder) with overlay arrows. */
.research-figure .rf-stage {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 0;
}
.research-figure .rf-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: zoom-in;
  transition: opacity 0.35s ease;
}
.research-figure .rf-placeholder {
  color: var(--soft-gray);
  font-style: italic;
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  text-align: center;
  padding: 32px;
  line-height: 1.6;
}
/* Soft arrow buttons overlaid on the stage edges. */
.research-figure .rf-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 240, 248, 0.82);
  border: 1px solid var(--pink-pale);
  color: var(--magenta);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  font-family: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  z-index: 5;
  user-select: none;
}
.research-figure .rf-arrow.rf-prev { left: 10px; }
.research-figure .rf-arrow.rf-next { right: 10px; }
.research-figure.has-images .rf-arrow,
.research-figure.has-inline-figures .rf-arrow {
  opacity: 0.55;
  pointer-events: auto;
}
.research-figure.has-images:hover .rf-arrow,
.research-figure.has-inline-figures:hover .rf-arrow { opacity: 0.95; }
.research-figure .rf-arrow:hover:not(:disabled) {
  background: var(--pink-primary);
  color: #fff;
  border-color: var(--pink-primary);
}
.research-figure .rf-arrow:disabled {
  opacity: 0.18;
  cursor: not-allowed;
}
/* Caption: soft italic on a warm pink-tinted strip. */
.research-figure .rf-caption {
  display: none;
  padding: 10px 24px 6px;
  background: linear-gradient(to bottom, rgba(255, 240, 248, 0), rgba(255, 240, 248, 0.85));
  color: var(--ink);
  font-style: italic;
  font-size: var(--fs-micro);
  line-height: 1.55;
  text-align: center;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}
.research-figure.has-images.has-caption .rf-caption { display: block; }
.research-figure .rf-counter {
  display: none;
  padding: 0 24px 10px;
  text-align: center;
  font-size: 11px;
  color: var(--soft-gray);
  letter-spacing: 0.22em;
  font-weight: 600;
  background: rgba(255, 240, 248, 0.85);
  flex-shrink: 0;
}
.research-figure.has-images.show-counter .rf-counter { display: block; }
/* When images are present, hide the placeholder. */
.research-figure.has-images .rf-placeholder { display: none; }
.research-figure:not(.has-images) .rf-img { display: none; }

/* ─── PIM inline pedagogical diagram (slide [1]) ──────────────────────
   A gentle, animated, non-expert-friendly diagram explaining why
   Processing-in-Memory saves energy.  Visible only when no real figures
   have been added to the PIM manifest.  Replaces the placeholder. */
.research-figure.has-images .pim-diagram { display: none; }
.pim-diagram {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 18px 22px 18px;
  gap: 10px;
  box-sizing: border-box;
}
.pim-title {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--magenta);
  text-align: center;
  letter-spacing: 0.02em;
}
.pim-compare {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex: 1;
  min-height: 0;
}
.pim-card {
  flex: 1;
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 12px 12px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.pim-tag {
  font-size: 17px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--soft-gray);
  font-weight: 700;
}
.pim-scene {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-height: 100px;
  width: 100%;
  justify-content: center;
}
.pim-chip {
  padding: 20px 26px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 22px;
  white-space: nowrap;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  cursor: default;
}
.pim-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(50, 35, 50, 0.12);
}
.pim-cpu {
  background: var(--pink-soft);
  border: 2px solid var(--pink-primary);
  color: var(--magenta);
}
.pim-mem {
  background: #E0F7FA;
  border: 2px solid var(--cyan-accent);
  color: #006A78;
}
/* Channel between CPU and Memory — vertical stack of label + dot flow. */
.pim-channel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
}
.pim-channel-label {
  font-size: 22px;
  font-style: italic;
  letter-spacing: 0.04em;
  white-space: nowrap;
  font-weight: 700;
  color: var(--soft-gray);
  text-align: center;
}
/* Red for the traditional (high-energy) side, green for the PIM side. */
.pim-card-traditional .pim-channel-label { color: #8C2A2A; }
.pim-card-pim         .pim-channel-label { color: #2F5E33; }
/* Real two-headed arrow spanning the channel width (CSS triangles + bar) */
.pim-channel-arrow {
  display: flex;
  align-items: center;
  width: 100%;
  height: 18px;
  margin: 2px 0;
}
.pim-arrow-tip {
  width: 0;
  height: 0;
  flex-shrink: 0;
}
.pim-arrow-left {
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-right: 14px solid var(--pink-primary);
}
.pim-arrow-right {
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 14px solid var(--pink-primary);
}
.pim-arrow-line {
  flex: 1;
  height: 3px;
  background: var(--pink-primary);
}
.pim-flow {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 16px;
}
.pim-bit {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--pink-primary);
  display: inline-block;
  animation: pim-flow 2.4s ease-in-out infinite;
  opacity: 0;
}
@keyframes pim-flow {
  0%   { transform: translateX(-38px); opacity: 0; }
  12%  { opacity: 1; }
  88%  { transform: translateX(38px); opacity: 1; }
  100% { transform: translateX(38px); opacity: 0; }
}
/* "Today" — dense flow: 4 bits, fast loop. */
.pim-flow-heavy .pim-bit { animation-duration: 1.4s; }
.pim-flow-heavy .pim-bit:nth-child(1) { animation-delay: 0s; }
.pim-flow-heavy .pim-bit:nth-child(2) { animation-delay: 0.35s; background: var(--magenta); }
.pim-flow-heavy .pim-bit:nth-child(3) { animation-delay: 0.70s; }
.pim-flow-heavy .pim-bit:nth-child(4) { animation-delay: 1.05s; background: var(--magenta); }
/* "PIM" — sparse flow: 1 bit, slow loop (the CPU still occasionally talks
   to memory, but far less than before). */
.pim-flow-light .pim-bit { animation-duration: 3.2s; }

/* Reverse-direction flow row (Memory → CPU).  Mirrored via scaleX(-1) so
   the bits travel right-to-left while reusing the same keyframe. */
.pim-flow-reverse { transform: scaleX(-1); }
.pim-arrow-trans {
  font-size: 26px;
  color: var(--pink-primary);
  font-weight: 300;
  flex-shrink: 0;
  align-self: center;
  opacity: 0.7;
}
/* PIM Memory chip — has small "PE" (Processing Element) units inside,
   stacked under the "Memory" label. */
.pim-mem-with-pe {
  background: #E0F7FA;
  border: 2px solid var(--cyan-accent);
  color: #006A78;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
}
.pim-mem-name { font-size: 22px; font-weight: 700; }
.pim-pe-row { display: flex; gap: 6px; }
.pim-pe {
  background: var(--pink-soft);
  border: 1.5px solid var(--pink-primary);
  color: var(--magenta);
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* Energy summary sits right under the scene (below the CPU/Memory row). */
.pim-energy {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-style: italic;
  text-align: center;
  padding-top: 6px;
}
.pim-high { color: #8C2A2A; }
.pim-low  { color: #2F5E33; }
.pim-energy-text { font-weight: 700; font-style: italic; }
/* Numbered takeaway points at the bottom of the diagram. */
.pim-caption {
  font-size: 19px;
  color: var(--ink);
  line-height: 1.55;
  padding: 8px 0 0;
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}
.pim-caption p {
  margin: 4px 0;
}
.pim-num {
  display: inline-block;
  color: var(--magenta);
  font-weight: 700;
  margin-right: 6px;
  font-style: normal;
}
.pim-caption em {
  font-style: italic;
  color: var(--magenta);
  font-weight: 700;
}
.pim-caption strong {
  color: var(--magenta);
  font-weight: 700;
  font-style: normal;
}

/* ─── SNN inline pedagogical diagram (slide [2]) ─────────────────────
   Two-row layout: biological neurons + V-t plot on top, PIM device
   with neural network distributed across chips on the bottom. */
.research-figure.has-images .snn-diagram { display: none; }
.snn-diagram {
  width: 100%;
  height: 100%;
  position: relative;        /* host for absolute-positioned figs */
  box-sizing: border-box;
  overflow: hidden;
}
/* Each figure fills the diagram; only the one matching [data-fig] is
   visible, with a quick crossfade between them. */
.snn-fig {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 18px;
  gap: 36px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  overflow: hidden;
}
.snn-diagram[data-fig="1"] .snn-fig-1,
.snn-diagram[data-fig="2"] .snn-fig-2 {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease, visibility 0s linear 0s;
}
/* Page indicator (two dots, top-right corner) */
.snn-fig-indicator {
  position: absolute;
  top: 14px;
  right: 18px;
  display: flex;
  gap: 6px;
  z-index: 5;
  pointer-events: none;
}
.snn-fig-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pink-pale);
  transition: background 0.25s ease;
}
.snn-diagram[data-fig="1"] .snn-fig-dot:nth-child(1),
.snn-diagram[data-fig="2"] .snn-fig-dot:nth-child(2) {
  background: var(--pink-primary);
}
.snn-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.snn-row-title {
  font-size: 24px;
  letter-spacing: 0.04em;
  color: var(--magenta);
  font-weight: 700;
  font-style: italic;
  text-align: center;
}

/* Row 1 — biological neurons.  Three-column horizontal layout:
   neuron — channel — neuron, vertically centered so the synapse
   line passes through neuron centers. */
.snn-bio-scene {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 220px;
}
.snn-neuron {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--pink-soft);
  border: 2.5px solid var(--pink-primary);
  color: var(--magenta);
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
/* Channel column between neurons: plot on top, synapse line at the
   vertical middle (so it meets the neuron centers), label below. */
.snn-bio-channel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 220px;
}
.snn-bio-channel-top {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 0;
}
/* Wrapper around the V-t plot that hosts the hover tooltip. */
.snn-plot-wrap {
  position: relative;
  width: 100%;
  max-width: 380px;
  cursor: help;
}
.snn-vt-plot {
  width: 100%;
  height: 90px;
  display: block;
}
/* Hover tooltip: pink rounded box that fades in when the user hovers
   the V-t plot.  Hidden by default so it never crowds the row title. */
.snn-hh-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--pink-paler);
  border: 1px solid var(--pink-pale);
  border-radius: 12px;
  padding: 12px 22px;
  color: var(--ink);
  text-align: center;
  line-height: 1.5;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
  z-index: 20;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(50, 35, 50, 0.10);
}
.snn-plot-wrap:hover .snn-hh-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0s;
}
.snn-hh-line { font-size: 16px; font-style: italic; }
.snn-hh-emphasis { color: var(--magenta); font-weight: 700; font-style: italic; }
.snn-hh-formula {
  margin-top: 6px;
  font-family: 'Cambria Math', 'STIX Math', Georgia, serif;
  font-size: 18px;
  color: var(--ink);
  font-style: italic;
  letter-spacing: 0.01em;
}
.snn-spike {
  animation: snn-spike-flash 2.7s infinite ease-in-out;
}
@keyframes snn-spike-flash {
  0%, 100% { opacity: 0.35; }
  10%, 25% { opacity: 1; }
}
/* Middle row = the synapse line + directional arrowhead, sitting at
   the vertical center of the channel (so it aligns with neurons). */
.snn-bio-channel-mid {
  display: flex;
  align-items: center;
  height: 18px;
  gap: 0;
}
.snn-synapse-line {
  flex: 1;
  height: 5px;
  background: var(--pink-primary);
  border-radius: 2.5px;
  position: relative;
}
.snn-synapse-tip {
  width: 0;
  height: 0;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 16px solid var(--pink-primary);
  flex-shrink: 0;
}
.snn-synapse-pulse {
  position: absolute;
  top: -3px;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--magenta);
  box-shadow: 0 0 6px var(--pink-primary);
  animation: snn-pulse-travel 2.7s infinite ease-in-out;
}
@keyframes snn-pulse-travel {
  0%, 100% { left: 0; opacity: 0; }
  10%      { opacity: 1; }
  90%      { left: calc(100% - 11px); opacity: 1; }
  100%     { left: calc(100% - 11px); opacity: 0; }
}
.snn-bio-channel-bot {
  flex: 1;
  text-align: center;
  padding-top: 6px;
  min-height: 0;
}
.snn-synapse-label {
  font-size: 20px;
  font-style: italic;
  color: var(--soft-gray);
  letter-spacing: 0.04em;
}

/* Row 2 — PIM device with neural network */
.snn-pim-device-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.snn-pim-svg {
  width: 100%;
  max-height: 320px;
  display: block;
}
.snn-pim-caption {
  font-size: 20px;
  color: var(--ink);
  font-style: italic;
  text-align: center;
  margin-top: 6px;
}
.snn-pim-caption em {
  color: var(--magenta);
  font-weight: 700;
  font-style: italic;
}

/* Bottom takeaways */
.snn-caption {
  font-size: 18px;
  color: var(--ink);
  line-height: 1.55;
  padding: 6px 0 0;
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}
.snn-caption p { margin: 3px 0; }
.snn-num {
  display: inline-block;
  color: var(--magenta);
  font-weight: 700;
  margin-right: 6px;
}
.snn-caption em {
  font-style: italic;
  color: var(--magenta);
  font-weight: 700;
}

/* ─── SNN Figure 2 — Optimization workflow (4 steps) ─────────────────── */
.snn-fig-2 { gap: 18px; padding: 20px 20px; }
.snn2-step {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.snn2-step-num {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--pink-soft);
  border: 2.5px solid var(--pink-primary);
  color: var(--magenta);
  font-size: 24px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.snn2-step-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.snn2-step-label {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
}
.snn2-step-label em {
  font-style: italic;
  color: var(--magenta);
  font-weight: 700;
}
.snn2-step-visual {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.snn2-arrow {
  font-size: 32px;
  color: var(--pink-primary);
  font-weight: 300;
  line-height: 1;
}
.snn2-box {
  padding: 14px 20px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
}
.snn2-data-box {
  background: var(--pink-cream);
  border: 1.5px solid var(--pink-primary);
  color: var(--magenta);
}
.snn2-jh-box {
  background: #E0F7FA;
  border: 1.5px solid var(--cyan-accent);
  color: #006A78;
  font-style: italic;
}
.snn2-jh-box em { font-style: italic; font-weight: 700; color: #006A78; }

/* Spike trains visualization (step 1) */
.snn2-spike-trains {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.snn2-st-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.snn2-st-label {
  font-size: 16px;
  color: var(--magenta);
  font-weight: 700;
  width: 80px;
  flex-shrink: 0;
}
.snn2-st-track {
  flex: 1;
  height: 22px;
  position: relative;
  border-bottom: 1.5px solid var(--hairline);
}
.snn2-st-spike {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--pink-primary);
  border-radius: 1px;
}

/* Ising model grid (step 2) */
.snn2-ising-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.snn2-ising-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  background: var(--pink-cream);
  border: 2px solid var(--magenta);
  border-radius: 8px;
  padding: 10px 14px;
}
.snn2-ising-grid span {
  font-size: 22px;
  font-weight: 700;
  color: var(--magenta);
  width: 22px;
  text-align: center;
  line-height: 1;
}
.snn2-ising-label {
  font-size: 18px;
  color: var(--magenta);
  font-style: italic;
  font-weight: 700;
}
/* Pairwise Ising tooltip — appears as a soft pink rounded card when the
   user hovers the Ising grid, mirroring the HH tooltip on figure 1. */
.snn2-ising-hover-wrap {
  position: relative;
  cursor: help;
}
.snn2-ising-tooltip {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--pink-paler);
  border: 1px solid var(--pink-pale);
  border-radius: 12px;
  padding: 14px 22px;
  color: var(--ink);
  text-align: center;
  line-height: 1.5;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
  z-index: 20;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(50, 35, 50, 0.10);
}
.snn2-ising-hover-wrap:hover .snn2-ising-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0s;
}
.snn2-formula-eq {
  font-size: 22px;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 4px;
}
.snn2-formula-legend {
  font-size: 16px;
  color: var(--body);
  font-style: italic;
  line-height: 1.6;
  text-align: left;
}

/* Step 3 — input pair: J,H model + the uncolored 8-neuron network. */
.snn2-plus {
  font-size: 28px;
  color: var(--magenta);
  font-weight: 700;
  line-height: 1;
}
.snn2-net-box {
  background: #ffffff;
  border: 2px solid var(--soft-gray);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.snn2-net-svg {
  width: 160px;
  height: 90px;
  display: block;
}
.snn2-net-label {
  font-size: 14px;
  color: var(--body);
  font-style: italic;
  letter-spacing: 0.02em;
}

/* Mini-chip cluster (step 3 output) */
.snn2-mini-chips {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.snn2-mini-chip {
  background: #E0F7FA;
  border: 2px solid var(--cyan-accent);
  border-radius: 8px;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 80px;
}
.snn2-mc-label {
  font-size: 16px;
  color: #006A78;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.snn2-mc-dots {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.snn2-mc-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
}

/* Step 4 benefits — bullet list with cherry-blossom markers */
.snn2-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.snn2-benefits li {
  font-size: 20px;
  color: var(--ink);
  padding-left: 32px;
  position: relative;
  line-height: 1.5;
}
.snn2-benefits li::before {
  content: "🌸";
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 0.85em;
  opacity: 0.9;
}

.research-notes {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 8px;
}
.research-meta {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.research-tag {
  font-size: var(--fs-micro);
  letter-spacing: 0.22em;
  color: var(--pink-primary);
  font-weight: 900;
}
.research-context {
  font-size: var(--fs-small);
  color: var(--body);
  letter-spacing: 0.02em;
  font-style: italic;
}
.research-heading {
  font-size: var(--fs-xl);
  font-weight: 900;
  color: var(--magenta);
  line-height: 1.3;
  letter-spacing: 0.01em;
  margin-bottom: 8px;
}
/* Grouped bullets on research-intro pages: 背景 / 問題 / 方法 / 貢献 */
.research-section {
  margin-bottom: 8px;
}
.research-section:last-child {
  margin-bottom: 0;
}
.research-section-label {
  font-size: 11px;
  font-weight: 900;
  color: var(--magenta);
  letter-spacing: 0.22em;
  margin-bottom: 1px;
  padding-bottom: 1px;
  border-bottom: 1px dashed var(--pink-pale);
}
.research-section .phase-list {
  margin: 0;
  padding: 0;
}
.research-section .phase-list li {
  padding-top: 3px;
  padding-bottom: 3px;
  font-size: var(--fs-small);
  line-height: 1.55;
}
/* Parenthetical sub-label after a section label (e.g. "方法 (...)") */
.research-section-sublabel {
  font-size: 11px;
  font-weight: 600;
  color: var(--body);
  letter-spacing: 0.04em;
  text-transform: none;
  font-style: italic;
  margin-left: 6px;
}
/* Inline method tags — three colored highlighter bands marking the
   methodological register of a bullet (historical / physical / psy).
   Uses a linear-gradient highlighter effect like .phase-quote-purple. */
.method-tag {
  font-weight: 800;
  font-size: inherit;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0 4px;
  margin-right: 8px;
  white-space: nowrap;
}
.method-tag-hist {
  color: #B11968;
  background: linear-gradient(transparent 62%,
              rgba(229, 25, 139, 0.22) 62%,
              rgba(229, 25, 139, 0.22) 96%,
              transparent 96%);
}
.method-tag-phys {
  color: #00838F;
  background: linear-gradient(transparent 62%,
              rgba(0, 188, 212, 0.25) 62%,
              rgba(0, 188, 212, 0.25) 96%,
              transparent 96%);
}
.method-tag-psy {
  color: #5B3FA8;
  background: linear-gradient(transparent 62%,
              rgba(123, 45, 139, 0.22) 62%,
              rgba(123, 45, 139, 0.22) 96%,
              transparent 96%);
}

/* ═══════════════════════════════════════════════════════════════════════
   INLINE RESEARCH DIAGRAMS — slide-specific
   Shared shape: full-size pedagogical panel that replaces the figure
   placeholder when no manifest images are listed.
   ═══════════════════════════════════════════════════════════════════════ */
.research-figure.has-images .eeg-diagram,
.research-figure.has-images .phil-diagram,
.research-figure.has-images .qss-diagram,
.research-figure.has-images .gecsg-diagram,
.research-figure.has-images .ep-diagram { display: none; }

/* ─── EEG diagram (slide [3]) ────────────────────────────────────────── */
.eeg-diagram {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 22px;
  gap: 18px;
  box-sizing: border-box;
  overflow: hidden;
}
.eeg-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.eeg-row-num {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--pink-soft);
  border: 2.5px solid var(--pink-primary);
  color: var(--magenta);
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.eeg-row-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.eeg-row-label {
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
}
.eeg-signal-svg {
  width: 320px;
  max-width: 100%;
  height: 70px;
  display: block;
  flex: 0 1 320px;
}
.eeg-row-visual {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.eeg-arrow {
  font-size: 30px;
  color: var(--pink-primary);
  font-weight: 300;
}

/* Discrete brain-state sequence (step 1 output) */
.eeg-state-seq {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.eeg-state-seq-mini { gap: 5px; }
.eeg-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-family: 'Cambria Math', Georgia, serif;
}
.eeg-s1 { background: #FFE0E8; color: #B53A56; border: 1.5px solid #E5198B; }
.eeg-s2 { background: #E0F7FA; color: #006A78; border: 1.5px solid #00BCD4; }
.eeg-s3 { background: #FFF4D0; color: #B57A00; border: 1.5px solid #C99500; }
.eeg-state-dot {
  font-size: 22px;
  color: var(--soft-gray);
  font-weight: 700;
  margin-left: 2px;
  align-self: center;
}

/* Grammar box (step 2 output) */
.eeg-grammar-box {
  background: var(--pink-cream);
  border: 1.5px solid var(--pink-primary);
  border-radius: 8px;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
}
.eeg-grammar-title {
  font-size: 13px;
  color: var(--magenta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
}
.eeg-grammar-rules {
  font-family: 'Cambria Math', Georgia, serif;
  font-size: 16px;
  color: var(--ink);
  line-height: 1.55;
}
.eeg-grammar-rules div { font-style: italic; }

/* Step 3 — two inputs (grammar + sequence) → ML model → output */
.eeg-inputs-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.eeg-input-box {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  min-width: 100px;
}
.eeg-input-grammar {
  background: var(--pink-cream);
  border: 1.5px solid var(--pink-primary);
  color: var(--magenta);
}
.eeg-input-seq {
  background: #E0F7FA;
  border: 1.5px solid var(--cyan-accent);
  color: #006A78;
}
.eeg-input-tree {
  background: #F0E5FF;
  border: 1.5px solid #7B2D8B;
  color: #5B3FA8;
}
.eeg-input-tree-visual {
  padding: 6px 10px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.eeg-tree-svg {
  width: 130px;
  height: 84px;
}
.eeg-tree-caption {
  font-size: 12px;
  font-weight: 700;
  color: #5B3FA8;
  letter-spacing: 0.02em;
}
.eeg-input-signal {
  background: #FFF4D0;
  border: 1.5px solid #C99500;
  color: #8C6500;
}

/* Syntax-analysis box — neutral white with pink-primary outline,
   visually distinct from both the colored inputs and the magenta ML box */
.eeg-syntax-box {
  background: white;
  border: 2px dashed var(--pink-primary);
  border-radius: 10px;
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.eeg-syntax-label {
  font-size: 17px;
  font-weight: 700;
  color: var(--magenta);
}
.eeg-syntax-sub {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--soft-gray);
}
.eeg-ml-box {
  background: var(--magenta);
  color: white;
  border-radius: 10px;
  padding: 14px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  box-shadow: 0 4px 12px rgba(123, 45, 139, 0.25);
}
.eeg-ml-label {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.eeg-ml-sub {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
}
.eeg-output {
  background: var(--pink-soft);
  border: 2px solid var(--pink-primary);
  border-radius: 10px;
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.eeg-output-label {
  font-size: 13px;
  color: var(--magenta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
}
.eeg-output-result {
  font-size: 18px;
  color: var(--magenta);
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
}
.eeg-output-yn {
  font-size: 15px;
  color: var(--soft-gray);
  font-weight: 600;
  letter-spacing: 0.12em;
}
.eeg-caption {
  font-size: 18px;
  color: var(--ink);
  line-height: 1.55;
  padding-top: 4px;
}
.eeg-caption p { margin: 2px 0; }
.eeg-num { color: var(--magenta); font-weight: 700; margin-right: 6px; }

/* ─── Philosophy diagram (slide [4]) ─────────────────────────────────── */
.phil-diagram {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 22px;
  gap: 14px;
  box-sizing: border-box;
  overflow: hidden;
}
.phil-section {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.phil-section-num {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--pink-soft);
  border: 2.5px solid var(--pink-primary);
  color: var(--magenta);
  font-size: 24px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phil-section-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.phil-section-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--magenta);
  letter-spacing: 0.01em;
}

/* Section ①: phenomenon + definition cards side by side */
.phil-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.phil-card {
  background: var(--pink-cream);
  border: 1.5px solid var(--hairline);
  border-radius: 8px;
  padding: 12px 16px;
}
.phil-card-label {
  font-size: 16px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--magenta);
  font-weight: 700;
  margin-bottom: 8px;
}
.phil-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.phil-list li {
  font-size: 19px;
  color: var(--ink);
  padding: 3px 0 3px 22px;
  position: relative;
  line-height: 1.55;
}
.phil-list li::before {
  content: "·";
  position: absolute;
  left: 4px;
  top: -2px;
  color: var(--pink-primary);
  font-weight: 900;
  font-size: 26px;
}
.phil-defn-body {
  font-size: 19px;
  color: var(--ink);
  line-height: 1.6;
  font-style: italic;
}
.phil-defn-body em {
  font-style: italic;
  color: var(--magenta);
  font-weight: 700;
}

/* Bullet list inside a phil section (used for phenomenon + essence) */
.phil-essence-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.phil-essence-list li {
  font-size: 18px;
  color: var(--ink);
  padding: 5px 0 5px 26px;
  position: relative;
  line-height: 1.5;
}
.phil-essence-list li::before {
  content: "🌸";
  position: absolute;
  left: 0;
  top: 6px;
  font-size: 0.85em;
  opacity: 0.9;
}
.phil-essence-list li strong {
  color: var(--magenta);
  font-weight: 700;
}

/* Section ②: three lenses side by side */
.phil-lenses {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.phil-lens {
  background: var(--pink-cream);
  border: 1.5px solid var(--hairline);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.phil-lens-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--magenta);
  letter-spacing: 0.01em;
}
.phil-lens-body {
  font-size: 17px;
  color: var(--ink);
  line-height: 1.55;
}
.phil-lens-body em {
  font-style: italic;
  color: var(--magenta);
  font-weight: 700;
}
.phil-lens-arrow {
  color: var(--pink-primary);
  font-weight: 700;
  margin: 0 3px;
}
.phil-lens-tag {
  font-size: 15px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--soft-gray);
  font-style: italic;
  margin-top: auto;
}

/* The proposal — relational ontology — highlighted as the paper's
   distinctive contribution; visually stronger than ordinary emphasis. */
.phil-proposal {
  background: var(--pink-primary);
  color: white;
  padding: 3px 12px;
  border-radius: 6px;
  font-weight: 700;
  font-style: normal;
  box-shadow: 0 2px 6px rgba(229, 25, 139, 0.30);
  letter-spacing: 0.01em;
}

/* ↓ Convergence row */
.phil-resolution {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-top: 4px;
}
.phil-resolution-arrow {
  font-size: 24px;
  color: var(--pink-primary);
  font-weight: 300;
}
.phil-resolution-text {
  font-size: 22px;
  font-style: italic;
  color: var(--ink);
  text-align: center;
  background: var(--pink-soft);
  border: 1px solid var(--pink-primary);
  border-radius: 8px;
  padding: 12px 26px;
  font-weight: 600;
}
.phil-resolution-text em {
  font-style: italic;
  color: var(--magenta);
  font-weight: 700;
}

/* ─── QSS diagram (slide [5]) ────────────────────────────────────────── */
.qss-diagram {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 22px;
  gap: 6px;
  box-sizing: border-box;
  overflow: hidden;
}

/* Outer frames that enclose each functional block (philosophy / cycle /
   tools) so the viewer immediately reads them as three distinct layers
   supporting the central Research Cycle. */
.qss-frame {
  position: relative;
  border: 1.5px solid var(--pink-pale);
  border-radius: 12px;
  padding: 22px 18px 14px;
  background: rgba(255, 248, 251, 0.55);
}
.qss-frame-philosophy { border-color: var(--pink-pale); }
.qss-frame-tools { border-color: var(--pink-pale); }
.qss-frame-cycle {
  border: 2px solid var(--magenta);
  background: var(--pink-soft);
  padding: 22px 22px 18px;
}
.qss-frame-label {
  position: absolute;
  top: -12px;
  left: 22px;
  background: white;
  padding: 2px 14px;
  font-size: 16px;
  font-weight: 700;
  color: var(--magenta);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 4px;
}
.qss-frame-cycle .qss-frame-label-center {
  background: var(--magenta);
  color: white;
  font-size: 18px;
  letter-spacing: 0.1em;
  left: 50%;
  transform: translateX(-50%);
}

/* Soft "support" arrow between the frames (guide ↓ / enable ↑). */
.qss-flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--magenta);
  font-size: 22px;
  font-weight: 300;
  padding: 2px 0;
}
.qss-flow-text {
  font-size: 14px;
  font-style: italic;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--soft-gray);
  font-weight: 600;
}
/* Four pillars laid out in a grid; each pillar is a uniform card with
   a pink header and a list of sub-categories below. */
.qss-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
}
.qss-pillar {
  background: var(--pink-soft);
  border: 2px solid var(--pink-primary);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.qss-pillar-head {
  background: var(--pink-primary);
  color: white;
  padding: 10px 10px;
  font-weight: 700;
  text-align: center;
  font-size: 18px;
  letter-spacing: 0.02em;
}
.qss-pillar-items {
  list-style: none;
  padding: 12px 14px 14px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.qss-pillar-items li {
  font-size: 16px;
  color: var(--ink);
  line-height: 1.5;
  padding: 1px 0;
}
/* Ethics pillar gets a cyan accent so the late-added fourth dimension
   reads as a distinct concern (data ethics, epistemic injustice). */
.qss-pillar-ethics {
  border-color: var(--cyan-accent);
  background: #EDF8FB;
}
.qss-pillar-ethics .qss-pillar-head {
  background: var(--cyan-accent);
  color: #003D4A;
}
.qss-cycle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
}
.qss-cy-node {
  background: white;
  border: 1.5px solid var(--pink-primary);
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}
.qss-cy-node-loop {
  background: var(--pink-primary);
  border-color: var(--pink-primary);
  color: white;
}
.qss-cy-arrow {
  color: var(--magenta);
  font-size: 20px;
  font-weight: 300;
}
.qss-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.qss-chip {
  background: white;
  border: 1.5px solid var(--pink-pale);
  color: var(--magenta);
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
}
.qss-chip-accent {
  background: var(--pink-primary);
  color: white;
  border-color: var(--pink-primary);
}

/* The developed software framework — set apart from "tools" because it
   is an applied output, not a methodological instrument.  Cyan accent
   mirrors the Ethics pillar's color for "developed/applied" elements. */
.qss-software {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 18px;
  margin-top: 6px;
  background: #EDF8FB;
  border: 1.5px solid var(--cyan-accent);
  border-radius: 10px;
}
.qss-software-tag {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #006A78;
  font-weight: 700;
}
.qss-software-name {
  font-size: 17px;
  color: #003D4A;
  font-weight: 700;
  font-style: italic;
}

/* ─── GE-CSG diagram (slide [6]) ─────────────────────────────────────── */
.gecsg-diagram {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 22px;
  gap: 16px;
  box-sizing: border-box;
  overflow: hidden;
}
.gecsg-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.gecsg-step-num {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--pink-soft);
  border: 2.5px solid var(--pink-primary);
  color: var(--magenta);
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gecsg-step-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gecsg-step-label {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
.gecsg-step-label em {
  font-style: italic;
  color: var(--magenta);
  font-weight: 700;
}
.gecsg-sequence {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-family: 'Cambria Math', 'STIX Math', Georgia, serif;
}
.gecsg-base {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 700;
}
.gecsg-A { background: #FFE0E8; color: #B53A56; }
.gecsg-T { background: #E0F7FA; color: #006A78; }
.gecsg-C { background: #FFF4D0; color: #B57A00; }
.gecsg-G { background: #E8E0FF; color: #5B3FA8; }
.gecsg-ellipsis {
  font-size: 22px;
  color: var(--soft-gray);
  font-weight: 700;
  margin-left: 4px;
  align-self: center;
}

/* Step 1: four-cell symmetry grid (original / complement / reverse / RC) */
.gecsg-symmetries {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 4px;
}
.gecsg-symmetries-2col {
  grid-template-columns: repeat(2, 1fr);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
/* New cell-internal example row + biology line for Step ①.
   Used when each cell shows a DNA example with arrows plus a
   short biological/cancer-relevance line. */
.gecsg-sym-ex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 6px 0 4px;
  min-height: 28px;
}
.gecsg-sym-ex .gecsg-codon-chip {
  font-size: 17px;
  padding: 4px 10px;
  letter-spacing: 0.04em;
}
.gecsg-sym-ex .gecsg-sym-arrow {
  font-size: 18px;
}
.gecsg-sym-ex-wrap .gecsg-codon-chip { font-size: 11px; padding: 1px 4px; }
.gecsg-sym-arrow {
  font-size: 13px;
  color: var(--pink-primary);
  font-weight: 700;
}
.gecsg-sym-bio {
  font-size: 11px;
  font-style: italic;
  color: #7B2D8B;
  text-align: center;
  line-height: 1.4;
  margin-top: auto;
  padding-top: 4px;
  border-top: 1px dashed var(--pink-pale);
}
.gecsg-sym-cell {
  background: var(--pink-cream);
  border: 1.5px solid var(--pink-pale);
  border-radius: 8px;
  padding: 6px 8px 8px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
.gecsg-sym-cell-primary {
  background: #E8FAFC;
  border-color: #7FD8E0;
  box-shadow: 0 0 0 1px #7FD8E0 inset;
}
.gecsg-sym-group {
  font-size: 17px;
  font-weight: 800;
  color: #7B2D8B;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--pink-pale);
  border-radius: 4px;
  padding: 2px 10px;
  letter-spacing: 0.02em;
  align-self: center;
  margin-bottom: 4px;
  font-family: 'Cambria Math', 'STIX Math', Georgia, serif;
}
.gecsg-sym-cell-primary .gecsg-sym-group {
  color: #00838F;
  border-color: #7FD8E0;
}
.gecsg-sym-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--magenta);
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.3;
}
.gecsg-sym-cell-primary .gecsg-sym-name {
  color: #00838F;
}
.gecsg-sym-rule {
  display: block;
  font-size: 11px;
  font-weight: 500;
  font-style: italic;
  color: var(--body);
  letter-spacing: 0;
  text-transform: none;
  margin-top: 2px;
}
.gecsg-sym-cell-primary .gecsg-sym-rule {
  color: #00838F;
  font-weight: 700;
  font-style: normal;
}
.gecsg-sym-seq {
  display: flex;
  gap: 3px;
  font-family: 'Cambria Math', 'STIX Math', Georgia, serif;
}
.gecsg-sym-note {
  font-size: 14px;
  font-style: italic;
  color: var(--body);
  text-align: center;
  margin-top: 4px;
  line-height: 1.4;
}
.gecsg-sym-note em {
  font-style: italic;
  color: var(--magenta);
  font-weight: 700;
}

.gecsg-transform-chain {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 10px;
  padding: 8px 12px;
  background: #FFF6FA;
  border: 1px dashed var(--pink-pale);
  border-radius: 8px;
  font-size: 14px;
}
.gecsg-codon-chip {
  font-family: 'Cambria Math', 'STIX Math', Georgia, serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--pink-pale);
  border-radius: 5px;
  padding: 3px 9px;
  letter-spacing: 0.04em;
}
.gecsg-trans-arrow {
  font-size: 12px;
  font-style: italic;
  color: var(--magenta);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.gecsg-trans-tag {
  margin-left: auto;
  font-size: 13px;
  color: #00838F;
  font-weight: 700;
  background: #E8FAFC;
  border: 1px solid #7FD8E0;
  border-radius: 5px;
  padding: 3px 9px;
  letter-spacing: 0.02em;
}
.gecsg-orbits {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.gecsg-orbits-prefix {
  font-size: 13px;
  color: var(--body);
  font-style: italic;
  margin-right: 8px;
}
.gecsg-orbits-prefix em {
  font-style: italic;
  color: var(--magenta);
  font-weight: 700;
}
/* Compression visualization for Step ② — single clear example
   showing how a codon sub-sequence maps to an orbit sequence
   under the symmetry group G. */
.gecsg-compress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 4px 0 6px;
  padding: 12px 14px 14px;
  background: #FFF6FA;
  border: 1.5px solid var(--pink-pale);
  border-radius: 10px;
}
.gecsg-compress-rowlabel {
  font-size: 11px;
  font-style: italic;
  color: var(--soft-gray);
  letter-spacing: 0.04em;
}
.gecsg-compress-seq {
  display: flex;
  gap: 4px;
  justify-content: center;
  flex-wrap: wrap;
}
.gecsg-base-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  font-family: 'Cambria Math', 'STIX Math', Georgia, serif;
  font-weight: 800;
  font-size: 17px;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--pink-pale);
}
.gecsg-compress-single {
  display: flex;
  justify-content: center;
  margin: 4px 0;
}
.gecsg-orbit-chip-big {
  font-size: 26px;
  padding: 10px 24px;
  width: auto;
  border-width: 2px;
}
.gecsg-compress-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(64px, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 540px;
}
.gecsg-compress-row > * {
  justify-self: center;
}
.gecsg-compress-row .gecsg-codon-chip {
  width: 100%;
  text-align: center;
  font-size: 15px;
  padding: 4px 0;
}
.gecsg-orbit-chip {
  display: inline-block;
  width: 100%;
  text-align: center;
  font-family: 'Cambria Math', 'STIX Math', Georgia, serif;
  font-weight: 800;
  font-size: 16px;
  color: #5B3FA8;
  background: #EFE5FF;
  border: 1.5px solid #C5B0E8;
  border-radius: 6px;
  padding: 4px 0;
  letter-spacing: 0.04em;
}
.gecsg-compress-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  margin: 2px 0;
}
.gecsg-compress-arrow-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--magenta);
  letter-spacing: 0.04em;
}
.gecsg-compress-arrow-label em {
  font-style: italic;
  color: #7B2D8B;
}
.gecsg-compress-arrow-glyph {
  font-size: 16px;
  color: var(--pink-primary);
  line-height: 1;
}
.gecsg-compress-defs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 20px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--pink-pale);
  font-family: 'Cambria Math', 'STIX Math', Georgia, serif;
  font-size: 13px;
  color: var(--ink);
  width: 100%;
  max-width: 540px;
}
.gecsg-compress-defs strong {
  color: #5B3FA8;
  font-weight: 800;
  margin-right: 4px;
}
/* Concrete symmetry × orbit examples for Step ② (legacy, unused). */
.gecsg-sym-examples {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 6px 0 10px;
}
.gecsg-sym-example {
  background: #FFF6FA;
  border: 1.5px solid var(--pink-pale);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gecsg-sym-ex-head {
  font-size: 13px;
  font-weight: 700;
  color: var(--magenta);
  letter-spacing: 0.02em;
}
.gecsg-sym-ex-head em {
  font-style: italic;
  font-weight: 500;
  color: #7B2D8B;
  margin-left: 4px;
}
.gecsg-sym-group-tag {
  display: inline-block;
  font-family: 'Cambria Math', 'STIX Math', Georgia, serif;
  font-weight: 800;
  color: #7B2D8B;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--pink-pale);
  border-radius: 4px;
  padding: 0 5px;
  margin-right: 4px;
  font-size: 12px;
}
.gecsg-sym-ex-body {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.gecsg-sym-ex-orbit {
  font-size: 13px;
  font-style: italic;
  color: #7B2D8B;
  font-family: 'Cambria Math', 'STIX Math', Georgia, serif;
}
.gecsg-orbit {
  background: var(--pink-cream);
  border: 1.5px solid var(--pink-pale);
  border-radius: 8px;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gecsg-orbit-label {
  font-size: 13px;
  color: var(--magenta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}
.gecsg-orbit-members {
  font-family: 'Cambria Math', 'STIX Math', Georgia, serif;
  font-size: 16px;
  color: var(--ink);
}
.gecsg-orbit-ellipsis {
  padding: 10px 14px;
  background: transparent;
  border: none;
  color: var(--soft-gray);
  font-size: 22px;
  font-weight: 700;
  align-self: stretch;
  justify-content: center;
}
.gecsg-orbit-ellipsis .gecsg-orbit-members {
  font-size: 22px;
  color: var(--soft-gray);
  letter-spacing: 0.18em;
}
.gecsg-orbit-summary {
  margin-left: auto;
  background: #E8FAFC;
  border: 1.5px solid #7FD8E0;
  border-radius: 10px;
  padding: 8px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 110px;
}
.gecsg-orbit-summary-num {
  font-size: 32px;
  font-weight: 900;
  color: #00838F;
  line-height: 1;
}
.gecsg-orbit-summary-label {
  font-size: 12px;
  font-weight: 700;
  color: #00838F;
  text-align: center;
  line-height: 1.3;
  letter-spacing: 0.02em;
}
.gecsg-step-visual {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.gecsg-tree-svg { height: 110px; flex: 0 0 auto; }
.gecsg-complexity {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--pink-soft);
  border: 1px solid var(--pink-pale);
  border-radius: 8px;
  padding: 10px 16px;
}
.gecsg-complexity-label {
  font-size: 13px;
  color: var(--magenta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
}
.gecsg-complexity-formula {
  font-size: 22px;
  color: var(--ink);
}
.gecsg-complexity-note {
  font-size: 14px;
  font-style: italic;
  color: var(--body);
}
.gecsg-orbit-note {
  flex: 1;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--pink-soft);
  border: 1px solid var(--pink-pale);
  border-radius: 8px;
  padding: 12px 16px;
}
.gecsg-orbit-note em {
  font-style: italic;
  font-weight: 700;
  color: var(--magenta);
}
.gecsg-note-line {
  padding: 2px 0;
}
.gecsg-note-line-key {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--pink-pale);
  font-weight: 700;
}
.gecsg-caption {
  font-size: 17px;
  color: var(--ink);
  line-height: 1.55;
  padding-top: 4px;
}
.gecsg-caption p { margin: 2px 0; }
.gecsg-num { color: var(--magenta); font-weight: 700; margin-right: 6px; }

/* ─── Econ × Physics diagram (slide [7]) ─────────────────────────────── */
.ep-diagram {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 22px;
  gap: 16px;
  box-sizing: border-box;
  overflow: hidden;
}
.ep-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--magenta);
  text-align: center;
  letter-spacing: 0.02em;
}
.ep-panels {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.ep-panel {
  flex: 1;
  min-width: 200px;
  max-width: 320px;
  background: var(--pink-cream);
  border: 1.5px solid var(--hairline);
  border-radius: 10px;
  padding: 14px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.ep-panel-label {
  font-size: 16px;
  color: var(--magenta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}
.ep-panel-svg { width: 100%; height: 140px; }
.ep-panel-caption {
  font-size: 14px;
  font-style: italic;
  color: var(--body);
  text-align: center;
}
.ep-mapping {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.ep-mapping-arrow {
  font-size: 36px;
  color: var(--pink-primary);
  font-weight: 300;
}
.ep-mapping-label {
  font-size: 13px;
  color: var(--magenta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
}
.ep-formula-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  background: var(--pink-soft);
  border: 1px solid var(--pink-pale);
  border-radius: 8px;
}
.ep-formula-label {
  font-size: 14px;
  color: var(--magenta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
}
.ep-formula {
  font-size: 20px;
  color: var(--ink);
}
.ep-caption {
  font-size: 17px;
  color: var(--ink);
  line-height: 1.55;
  padding-top: 2px;
}
.ep-caption p { margin: 2px 0; }
.ep-num { color: var(--magenta); font-weight: 700; margin-right: 6px; }

/* Step layout for slide [7] — mirrors GE-CSG step cadence */
.ep-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.ep-step-num {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--pink-soft);
  border: 2.5px solid var(--pink-primary);
  color: var(--magenta);
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ep-step-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ep-step-label {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
.ep-step-label em {
  font-style: italic;
  color: var(--magenta);
  font-weight: 700;
}
.ep-step-visual {
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
}
.ep-step-svg {
  flex: 0 0 auto;
  width: 540px;
  height: 195px;
}
/* Notes appear as a hover tooltip anchored to the right of the SVG,
   so they do not cover the figure. Hidden by default. */
.ep-step-note {
  position: absolute;
  top: 50%;
  left: 558px;   /* SVG is 540px wide, plus the visual's 18px gap */
  transform: translateY(-50%);
  width: calc(100% - 566px);
  max-width: 440px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: rgba(255, 252, 254, 0.97);
  border: 1.5px solid var(--pink-pale);
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  z-index: 5;
}
.ep-step:hover .ep-step-note,
.ep-step-visual:hover .ep-step-note,
.ep-step-note:hover {
  opacity: 1;
  pointer-events: auto;
}
.ep-step-note em {
  font-style: italic;
  font-weight: 700;
  color: var(--magenta);
}
.ep-katex { white-space: nowrap; }

/* Fig 1 ↔ Fig 2 toggle */
.ep-diagram > .ep-fig {
  display: none;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}
.ep-diagram[data-fig="1"] > .ep-fig-1 { display: flex; justify-content: center; }
.ep-diagram[data-fig="2"] > .ep-fig-2 { display: flex; justify-content: center; }
.ep-diagram[data-fig="3"] > .ep-fig-3 { display: flex; justify-content: center; }
.ep-diagram[data-fig="4"] > .ep-fig-4 { display: flex; justify-content: center; }

/* Fig 3 — selected geometric insights (2×2 panel grid) */
.ep-fig3-title {
  text-align: center;
  font-size: 19px;
  font-weight: 700;
  color: var(--magenta);
  letter-spacing: 0.04em;
  padding-bottom: 4px;
  border-bottom: 1.5px solid var(--pink-pale);
}
.ep-vis-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 12px;
  flex: 1;
  min-height: 0;
}
.ep-vis-panel {
  background: var(--pink-cream);
  border: 1px solid var(--pink-pale);
  border-radius: 8px;
  padding: 7px 10px 9px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ep-vis-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--magenta);
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--pink-pale);
  padding-bottom: 3px;
}
.ep-vis-svg {
  width: 100%;
  height: 150px;
}
.ep-vis-note {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
}
.ep-vis-note em {
  font-style: italic;
  color: var(--magenta);
  font-weight: 700;
}

/* Fig 2 — full correspondence dictionary */
.ep-fig2-title {
  text-align: center;
  font-size: 19px;
  font-weight: 700;
  color: var(--magenta);
  letter-spacing: 0.04em;
  padding-bottom: 4px;
  border-bottom: 1.5px solid var(--pink-pale);
}
.ep-corr-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 14px;
  flex: 1;
  min-height: 0;
}
.ep-corr-box {
  background: var(--pink-cream);
  border: 1px solid var(--pink-pale);
  border-radius: 6px;
  padding: 6px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ep-corr-head {
  font-size: 14px;
  font-weight: 700;
  color: var(--magenta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--pink-pale);
  margin-bottom: 3px;
}
.ep-corr-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13.5px;
  line-height: 1.42;
  padding: 1px 0;
}
.ep-corr-row .ep-lhs {
  flex: 0 0 47%;
  font-style: italic;
  color: var(--ink);
  word-break: break-word;
}
.ep-corr-row .ep-lhs em {
  font-style: italic;
  color: var(--magenta);
  font-weight: 700;
}
.ep-corr-row .ep-arrow {
  flex: 0 0 auto;
  color: var(--soft-gray);
  font-weight: 700;
}
.ep-corr-row .ep-rhs {
  flex: 1;
  color: var(--body);
}
.ep-corr-row .ep-rhs em {
  font-style: italic;
  color: var(--magenta);
}
.ep-justice-banner {
  background: #E8FAFC;
  border: 1.5px solid #7FD8E0;
  border-radius: 8px;
  padding: 6px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ep-justice-head {
  font-size: 13px;
  font-weight: 700;
  color: #00838F;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 1px solid #7FD8E0;
  margin-bottom: 3px;
}
.ep-justice-banner .ep-corr-row .ep-lhs { color: #00606A; }
.ep-justice-banner .ep-corr-row .ep-rhs { color: var(--ink); }
.ep-row-star {
  background: #FFF0F8;
  border-left: 3px solid var(--magenta);
  padding-left: 6px;
  border-radius: 3px;
}

/* ─── Law slide [9] ─────────────────────────────────────────────────── */
.law-diagram {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 22px;
  gap: 14px;
  box-sizing: border-box;
  overflow: hidden;
}
.law-diagram > .law-fig {
  display: none;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}
.law-diagram[data-fig="1"] > .law-fig-1 { display: flex; justify-content: center; }
.law-diagram[data-fig="2"] > .law-fig-2 { display: flex; justify-content: center; }
.law-diagram[data-fig="3"] > .law-fig-3 { display: flex; justify-content: center; }
.law-diagram[data-fig="4"] > .law-fig-4 { display: flex; justify-content: center; }
.law-diagram[data-fig="5"] > .law-fig-5 { display: flex; justify-content: center; }

/* Fig 1 — step pedagogy (mirrors ep-step pattern) */
.law-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.law-step-num {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--pink-soft);
  border: 2.5px solid var(--pink-primary);
  color: var(--magenta);
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.law-step-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.law-step-label {
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
}
.law-step-label em {
  font-style: italic;
  color: var(--magenta);
  font-weight: 700;
}
.law-step-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  position: relative;
}
.law-step-svg {
  flex: 0 0 auto;
  width: 600px;
  height: 225px;
}
/* Fig 5 = Civil-law category diagrams (smaller viewBox 340×130) */
.law-fig-5 .law-step-svg {
  width: 500px;
  height: 190px;
}
/* Enlarge SVGs in Figs 2 (scenarios), 3 (matrix), 4 (comparative paradigms) for readable internal text. */
.law-fig-2 .law-step-svg,
.law-fig-3 .law-step-svg,
.law-fig-4 .law-step-svg {
  width: 640px;
  height: 240px;
}
/* Wide-format step SVG for the 5-scenario detailed view */
.law-step-svg.law-step-svg-wide {
  width: 600px;
  height: 200px;
}
/* Step notes hidden by default, shown on hover anchored to the right
   of the SVG (so they don't cover the figure). Larger readable font. */
.law-step-note {
  position: absolute;
  top: 50%;
  left: 618px;       /* SVG (600) + 18 gap */
  transform: translateY(-50%);
  width: calc(100% - 626px);
  max-width: 420px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: rgba(255, 252, 254, 0.97);
  border: 1.5px solid var(--pink-pale);
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  z-index: 5;
}
.law-step:hover .law-step-note,
.law-step-visual:hover .law-step-note,
.law-step-note:hover {
  opacity: 1;
  pointer-events: auto;
}
.law-step-note em {
  font-style: italic;
  font-weight: 700;
  color: var(--magenta);
}
.law-caption {
  font-size: 17px;
  color: var(--ink);
  line-height: 1.55;
  padding-top: 2px;
}
.law-caption p { margin: 2px 0; }
.law-num { color: var(--magenta); font-weight: 700; margin-right: 6px; }

/* Fig 2 — twelve schools dictionary */
.law-fig2-title {
  text-align: center;
  font-size: 19px;
  font-weight: 700;
  color: var(--magenta);
  letter-spacing: 0.04em;
  padding-bottom: 4px;
  border-bottom: 1.5px solid var(--pink-pale);
}
.law-school-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  flex: 1;
  min-height: 0;
}
.law-school-box {
  background: var(--pink-cream);
  border: 1px solid var(--pink-pale);
  border-radius: 6px;
  padding: 7px 10px 9px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  justify-content: flex-start;
}
.law-school-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--magenta);
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--pink-pale);
  padding-bottom: 3px;
}
.law-school-desc {
  font-size: 12px;
  line-height: 1.42;
  color: var(--ink);
}
.law-school-desc em {
  font-style: italic;
  color: var(--magenta);
  font-weight: 700;
}

/* Justice banner */
.law-justice-banner {
  background: #E8FAFC;
  border: 1.5px solid #7FD8E0;
  border-radius: 8px;
  padding: 7px 14px 9px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.law-justice-head {
  font-size: 13px;
  font-weight: 700;
  color: #00838F;
  letter-spacing: 0.04em;
  padding-bottom: 4px;
  border-bottom: 1px solid #7FD8E0;
}
.law-justice-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.law-jrow {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.45;
}
.law-jlhs {
  flex: 0 0 18%;
  font-style: italic;
  font-weight: 700;
  color: #00606A;
}
.law-jarrow {
  flex: 0 0 auto;
  color: var(--soft-gray);
  font-weight: 700;
}
.law-jrhs {
  flex: 1;
  color: var(--ink);
}
.law-jrhs em {
  font-style: italic;
  color: var(--magenta);
  font-weight: 700;
}
.law-jrow-star {
  background: #FFF0F8;
  border-left: 3px solid var(--magenta);
  padding: 2px 6px;
  border-radius: 3px;
}

/* ─── Group Field Theory diagram (slide [8]) ─────────────────────────── */
.gft-diagram {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 22px;
  gap: 14px;
  box-sizing: border-box;
  overflow: hidden;
}
/* Fig 1 ↔ Fig 2 toggle */
.gft-diagram > .gft-fig {
  display: none;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}
.gft-diagram[data-fig="1"] > .gft-fig-1 { display: flex; justify-content: center; }
.gft-diagram[data-fig="2"] > .gft-fig-2 { display: flex; justify-content: center; }
/* Fig 1 — four-stage structure-generation flow */
.gft-fig-title {
  text-align: center;
  font-size: 19px;
  font-weight: 800;
  color: var(--magenta);
  letter-spacing: 0.02em;
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--pink-pale);
  margin-bottom: 4px;
}
/* GFT slide layout: stack figure on top + 貢献 section underneath
   in the left column. Right column (notes) keeps the standard look. */
.gft-left-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.gft-left-stack > .research-figure {
  flex: 1;
  min-height: 0;
}
.gft-fig-banner {
  flex: 0 0 auto;
  font-size: 13px;
  font-style: italic;
  color: var(--magenta);
  letter-spacing: 0.04em;
  text-align: center;
  padding: 6px 12px;
  background: rgba(255, 240, 248, 0.55);
  border: 1px dashed var(--pink-pale);
  border-radius: 6px;
}
.gft-fig-banner em {
  font-style: normal;
  font-weight: 700;
  color: #7B2D8B;
}
.gft-contrib-bottom {
  flex: 0 0 auto;
  background: var(--pink-soft);
  border: 1px solid var(--pink-pale);
  border-radius: 8px;
  padding: 8px 16px 10px;
}
.gft-contrib-bottom .research-section { margin-bottom: 0; }
.gft-contrib-bottom .research-section-label {
  margin-bottom: 3px;
}
.gft-flow {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  flex: 1;
  min-height: 0;
}
.gft-stage {
  flex: 1;
  background: var(--pink-cream);
  border: 1.5px solid var(--pink-pale);
  border-radius: 10px;
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  min-width: 0;
}
.gft-stage-num {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--pink-primary);
  color: var(--magenta);
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gft-stage-name {
  margin-top: 10px;
  font-size: 17px;
  font-weight: 800;
  color: var(--magenta);
  letter-spacing: 0.01em;
  text-align: center;
  line-height: 1.2;
  min-height: 2.4em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gft-stage-svg {
  width: 100%;
  height: 78px;
}
.gft-stage-formula {
  font-family: 'Cambria Math', 'STIX Math', Georgia, serif;
  font-size: 17px;
  font-weight: 700;
  color: #7B2D8B;
  text-align: center;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid var(--pink-pale);
  border-radius: 5px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gft-stage-desc {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  text-align: center;
}
.gft-stage-desc em {
  font-style: italic;
  font-weight: 700;
  color: var(--magenta);
}
.gft-flow-arrow {
  align-self: center;
  font-size: 24px;
  color: var(--pink-primary);
  font-weight: 300;
  flex: 0 0 auto;
}
.gft-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.gft-step-num {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--pink-soft);
  border: 2.5px solid var(--pink-primary);
  color: var(--magenta);
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gft-step-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gft-step-label {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
.gft-step-label em {
  font-style: italic;
  color: var(--magenta);
  font-weight: 700;
}
.gft-step-visual {
  display: flex;
  align-items: center;
  gap: 18px;
}
.gft-step-svg {
  flex: 0 0 auto;
  width: 420px;
  height: 144px;
}
.gft-step-note {
  flex: 1;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--pink-cream);
  border: 1px solid var(--pink-pale);
  border-radius: 8px;
  padding: 10px 14px;
}
.gft-step-note em {
  font-style: italic;
  font-weight: 700;
  color: var(--magenta);
}
.gft-caption {
  font-size: 17px;
  color: var(--ink);
  line-height: 1.55;
  padding-top: 2px;
}
.gft-caption p { margin: 2px 0; }
.gft-num { color: var(--magenta); font-weight: 700; margin-right: 6px; }

:fullscreen #deck { width: 100vw; height: 100vh; }
:-webkit-full-screen #deck { width: 100vw; height: 100vh; }