/* ===================================================================
   Prager Frühling 1968 – kinetisches Briefing-Design
   dunkler Hintergrund, Plakat-Typo, animierte Vektor-Icons statt Fotos
=================================================================== */

:root{
  --bg: #0a0b0e;
  --bg-panel: #15171d;
  --bg-panel-alt: #1a1d24;
  --rule: #2b2f38;
  --rule-dark: #23262d;

  --ink: #f3f1ea;
  --ink-dim: #9aa0ab;

  --p1: #3d8bfd;   /* Person 1 – Aufbruch & Reform (blau) */
  --p2: #ff3b4e;   /* Person 2 – Reaktion / Gefahr (rot) */
  --p3: #ffb020;   /* Person 3 – Invasion & Bewertung (amber) */

  --radius: 3px;
  --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 14px 34px -18px rgba(0,0,0,.7);

  --display: "Bebas Neue", "Impact", sans-serif;
  --sans: "Inter", "Segoe UI", Arial, sans-serif;
  --mono: "IBM Plex Mono", "Consolas", monospace;
}

*{ box-sizing: border-box; }

html,body{
  margin:0; padding:0; height:100%;
  background:var(--bg);
  color:var(--ink);
  font-family: var(--sans);
  overflow:hidden;
}

/* ambient newsreel scanlines + vignette + grain (purely decorative, no images) */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.6), transparent 65%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:75; pointer-events:none;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.025) 0 1px, transparent 1px 3px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay; opacity:.7;
}

/* ambient colour mood that shifts with whichever presenter is on screen */
.mood{ position:fixed; inset:-15%; z-index:0; pointer-events:none; filter:blur(70px); opacity:0; transition:opacity 1.1s ease; }
.mood-1{ background: radial-gradient(circle at 82% 18%, rgba(61,139,253,.28), transparent 58%); }
.mood-2{ background: radial-gradient(circle at 82% 18%, rgba(255,59,78,.24), transparent 58%); }
.mood-3{ background: radial-gradient(circle at 82% 18%, rgba(255,176,32,.22), transparent 58%); }
body.mood-p1 .mood-1{ opacity:1; }
body.mood-p2 .mood-2{ opacity:1; }
body.mood-p3 .mood-3{ opacity:1; }

/* giant faint watermark icon behind sparser slides */
.bg-icon{
  position:absolute; z-index:-1; right:2vw; bottom:-6vh;
  width:46vh; height:46vh; color:var(--ink); opacity:.045;
  transform: rotate(-8deg); pointer-events:none; stroke-width:1.4;
}
.slide{ z-index:0; }

.icon{ width:1em; height:1em; display:inline-block; stroke:currentColor; fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- slide-change wipe (film-cut transition) ---------- */
.wipe{
  position:fixed; inset:0; z-index:90; pointer-events:none;
  background: linear-gradient(100deg, var(--p2), #ff7a3d);
  transform: translateX(-100%);
}
.wipe.play{ animation: wipeAcross .5s cubic-bezier(.7,0,.2,1); }
@keyframes wipeAcross{
  0%{ transform: translateX(-100%); }
  48%{ transform: translateX(0); }
  100%{ transform: translateX(100%); }
}

/* ---------- top progress rule ---------- */
.timerbar{ position:fixed; top:0; left:0; right:0; height:4px; z-index:60; background:var(--rule); }
.timerbar-fill{ height:100%; width:0%; background: linear-gradient(90deg, var(--p1), var(--p2), var(--p3)); transition: width .35s ease; }
.timerbar-mark{ position:absolute; top:0; width:1px; height:100%; background:rgba(255,255,255,.15); }

/* ---------- masthead ---------- */
.topbar{
  position:fixed; top:4px; left:0; right:0; height:54px; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 5vw;
  background: linear-gradient(to bottom, var(--bg) 78%, transparent);
  border-bottom:1px solid var(--rule);
}
.brand{ font-family:var(--display); letter-spacing:.03em; font-size:1.3rem; color:var(--ink); }
.brand span{ color:var(--p2); }
.brand::before{ content:"§ "; color:var(--p3); font-family:var(--mono); font-size:.9rem; }

/* ---------- deck / slides ---------- */
#deck{ position:relative; width:100%; height:100vh; z-index:1; }

.slide{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:center;
  padding: 100px 6.5vw 74px;
  opacity:0; visibility:hidden;
  transform: translateX(24px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events:none;
}
.slide.active{ opacity:1; visibility:visible; transform:translateX(0); pointer-events:auto; }
.slide.prev{ transform: translateX(-24px); }

.slide h1{ font-family:var(--display); font-weight:400; letter-spacing:.01em; font-size: clamp(3.4rem, 9vw, 7rem); margin:0 0 0; color:var(--ink); line-height:.95; }
.slide h2{ font-family:var(--display); font-weight:400; letter-spacing:.01em; font-size: clamp(2rem, 4.4vw, 3.2rem); margin:0 0 .5em; color:var(--ink); position:relative; padding-top:20px; }
.slide h2::before{ content:""; position:absolute; top:0; left:1px; width:52px; height:4px; background:var(--ink-dim); }
.slide[data-presenter="1"] h2::before{ background:var(--p1); box-shadow:0 0 12px var(--p1); }
.slide[data-presenter="2"] h2::before{ background:var(--p2); box-shadow:0 0 12px var(--p2); }
.slide[data-presenter="3"] h2::before{ background:var(--p3); box-shadow:0 0 12px var(--p3); }
.slide h3.mini-head{ font-family:var(--mono); font-size:.82rem; color:var(--ink-dim); margin:0 0 .6em; text-transform:uppercase; letter-spacing:.08em; }

.slide.active h1, .slide.active h2{ animation: clipReveal .6s cubic-bezier(.16,.84,.44,1) both; }
@keyframes clipReveal{ from{ clip-path: inset(0 100% 0 0); } to{ clip-path: inset(0 0 0 0); } }

.slide-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 20px; }
.slidenum{ color:var(--ink-dim); font-size:.8rem; font-family:var(--mono); }

.tag{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:.74rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding: 6px 12px 6px 10px; border-radius:2px;
  background:var(--bg-panel); border:1px solid var(--rule); border-left:4px solid var(--ink-dim);
  color:var(--ink);
}
.tag.p1{ border-left-color:var(--p1); }
.tag.p2{ border-left-color:var(--p2); }
.tag.p3{ border-left-color:var(--p3); }
.tag-neutral{ border-left-color:var(--ink-dim); color:var(--ink-dim); }

.bullets{ margin:0; padding-left: 1.15em; line-height:1.6; font-size: clamp(.96rem, 1.35vw, 1.14rem); }
.bullets li{ margin-bottom:.6em; opacity:0; }
.bullets ul{ margin-top:.4em; }
.bullets .warn{ color:var(--p2); }
.bullets .warn strong{ color:var(--p2); }

@keyframes fadeUp{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:translateY(0);} }
.slide.active .bullets > li{ animation: fadeUp .5s ease both; }
.slide.active .bullets > li:nth-child(1){ animation-delay:.05s; }
.slide.active .bullets > li:nth-child(2){ animation-delay:.13s; }
.slide.active .bullets > li:nth-child(3){ animation-delay:.21s; }
.slide.active .bullets > li:nth-child(4){ animation-delay:.29s; }
.slide.active .bullets > li:nth-child(5){ animation-delay:.37s; }
.slide.active .bullets > li:nth-child(6){ animation-delay:.45s; }

.two-col{ display:grid; grid-template-columns: 1.5fr 1fr; gap: 4.5vw; align-items:start; position:relative; z-index:1; }

.source-date{ font-family:var(--mono); color:var(--ink-dim); font-size:.85rem; margin:-.6em 0 1.1em; }

/* ---------- quote: typed telex / document ---------- */
.quote{
  position:relative; margin: 0; padding: 22px 24px 20px 52px;
  background:linear-gradient(155deg, var(--bg-panel-alt), var(--bg-panel) 70%);
  border:1px solid var(--rule); border-left:4px solid var(--p3);
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: var(--shadow), 0 0 32px -14px rgba(255,176,32,.45);
  font-family: var(--mono); font-size: .98rem; line-height:1.65; color:var(--ink);
  transform: rotate(-.4deg);
}
.quote-icon{ position:absolute; left:16px; top:22px; width:22px; height:22px; color:var(--p3); opacity:.8; filter: drop-shadow(0 0 6px rgba(255,176,32,.6)); }
.quote.small{ font-size:.9rem; max-width: 900px; }
.qtext{ white-space:pre-wrap; }
.qtext.typing::after{ content:"▌"; margin-left:2px; color:var(--p3); animation: blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.quote cite{ display:block; margin-top:.9em; font-size:.76rem; letter-spacing:.02em; color:var(--ink-dim); opacity:0; transition: opacity .4s ease; }
.quote cite.shown{ opacity:1; }

/* ---------- reform barometer (replaces photo, slide "Was war...") ---------- */
.barometer{ background:linear-gradient(155deg, var(--bg-panel-alt), var(--bg-panel) 70%); border:1px solid var(--rule); border-top:3px solid var(--p1); border-radius:var(--radius); padding:22px 24px; box-shadow: var(--shadow), 0 0 32px -16px rgba(61,139,253,.5); transform: rotate(.5deg); }
.barometer-title{ margin:0 0 16px; font-family:var(--mono); font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-dim); display:flex; align-items:center; gap:8px; }
.barometer-title .icon{ color:var(--p1); width:16px; height:16px; }
.shift-row{ padding:10px 0; border-bottom:1px solid var(--rule); opacity:0; }
.shift-row:last-of-type{ border-bottom:none; padding-bottom:0; }
.shift-cat{ display:block; font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-dim); margin-bottom:4px; }
.shift-change{ margin:0; font-size:.94rem; }
.shift-change .before{ color:var(--ink-dim); text-decoration:line-through; text-decoration-color:var(--p2); text-decoration-thickness:2px; opacity:.85; }
.shift-change .arrow{ margin:0 9px; color:var(--p3); font-weight:700; }
.shift-change .after{ color:var(--ink); font-weight:700; text-shadow: 0 0 16px rgba(61,139,253,.35); }
.slide.active .shift-row{ animation: fadeUp .45s ease both; }
.slide.active .shift-row:nth-child(2){ animation-delay:.1s; }
.slide.active .shift-row:nth-child(3){ animation-delay:.22s; }
.slide.active .shift-row:nth-child(4){ animation-delay:.34s; }
.slide.active .shift-row:nth-child(5){ animation-delay:.46s; }
.barometer-note{ margin:14px 0 0; font-size:.68rem; color:var(--ink-dim); opacity:.7; font-style:italic; }

/* ---------- stat / counter panel (replaces photo, invasion slide) ---------- */
.stat-panel{ text-align:center; background:linear-gradient(155deg, var(--bg-panel-alt), var(--bg-panel) 70%); border:1px solid var(--rule); border-top:3px solid var(--p2); border-radius:var(--radius); padding: 28px 20px; box-shadow: var(--shadow), 0 0 40px -16px rgba(255,59,78,.55); transform: rotate(-.5deg); }
.stat-num{ display:block; font-family:var(--display); font-size: clamp(3rem, 6vw, 4.6rem); color:var(--p2); line-height:1; letter-spacing:.01em; text-shadow: 0 0 34px rgba(255,59,78,.55); }
.stat-label{ display:block; margin-top:6px; font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-dim); }
.tank-convergence{ display:flex; justify-content:center; gap:16px; margin-top:22px; color:var(--p2); font-size:2rem; }
.tank-convergence .icon{ filter: drop-shadow(0 0 8px rgba(255,59,78,.65)); }
.slide.active .tank.t1{ animation: convergeL .6s ease both; animation-delay:.15s; }
.slide.active .tank.t2{ animation: convergeT .6s ease both; animation-delay:.28s; }
.slide.active .tank.t3{ animation: convergeB .6s ease both; animation-delay:.41s; }
.slide.active .tank.t4{ animation: convergeR .6s ease both; animation-delay:.54s; }
@keyframes convergeL{ from{ transform:translateX(-100px) rotate(-12deg); opacity:0; } to{ transform:translateX(0) rotate(0); opacity:1; } }
@keyframes convergeR{ from{ transform:translateX(100px) rotate(12deg); opacity:0; } to{ transform:translateX(0) rotate(0); opacity:1; } }
@keyframes convergeT{ from{ transform:translateY(-50px) scale(.5); opacity:0; } to{ transform:translateY(0) scale(1); opacity:1; } }
@keyframes convergeB{ from{ transform:translateY(50px) scale(.5); opacity:0; } to{ transform:translateY(0) scale(1); opacity:1; } }
.stat-caption{ margin:16px 0 0; font-family:var(--mono); font-size:.7rem; color:var(--ink-dim); }

/* ---------- five-row (Warschauer Fünf) ---------- */
.five-row{ display:flex; gap:12px; margin:-.4em 0 1.2em; color:var(--p2); }
.five-row .icon{ width:24px; height:24px; opacity:0; filter: drop-shadow(0 0 8px rgba(255,59,78,.7)); }
.slide.active .five-row .icon{ animation: fadeUp .4s ease both; }
.slide.active .five-row .icon:nth-child(1){ animation-delay:.05s; }
.slide.active .five-row .icon:nth-child(2){ animation-delay:.12s; }
.slide.active .five-row .icon:nth-child(3){ animation-delay:.19s; }
.slide.active .five-row .icon:nth-child(4){ animation-delay:.26s; }
.slide.active .five-row .icon:nth-child(5){ animation-delay:.33s; }

/* ---------- split screen (Riss im Ostblock) ---------- */
.split{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden; margin-bottom: 1.2em; box-shadow: var(--shadow); }
.split-half{ padding:22px 26px; background:var(--bg-panel); }
.split-half.left{ background:linear-gradient(135deg, rgba(255,59,78,.16), var(--bg-panel) 75%); }
.split-half.right{ background:linear-gradient(225deg, rgba(255,176,32,.18), var(--bg-panel) 75%); }
.crack-divider{ position:absolute; left:50%; top:0; height:100%; width:44px; transform:translateX(-50%); color:var(--ink-dim); opacity:.45; z-index:2; }
@keyframes slideInL{ from{ transform:translateX(-26px); opacity:0; } to{ transform:translateX(0); opacity:1; } }
@keyframes slideInR{ from{ transform:translateX(26px); opacity:0; } to{ transform:translateX(0); opacity:1; } }
.slide.active .split-half.left{ animation: slideInL .5s ease both; }
.slide.active .split-half.right{ animation: slideInR .5s ease both .1s; }

/* ---------- timeline ---------- */
.timeline{ display:flex; flex-direction:column; gap: 0; position:relative; margin: 1em 0; }
.tl-item{ display:grid; grid-template-columns: 150px 20px 1fr; align-items:start; column-gap: 18px; position:relative; padding: 12px 0; opacity:0; }
.slide.active .tl-item{ animation: fadeUp .5s ease both; }
.slide.active .tl-item:nth-child(1){ animation-delay:.05s; }
.slide.active .tl-item:nth-child(2){ animation-delay:.2s; }
.slide.active .tl-item:nth-child(3){ animation-delay:.35s; }
.slide.active .tl-item:nth-child(4){ animation-delay:.5s; }
.tl-item::before{ content:""; position:absolute; left:159px; top:0; bottom:-12px; width:1px; background:repeating-linear-gradient(to bottom, var(--rule) 0 4px, transparent 4px 8px); }
.tl-item:last-child::before{ display:none; }
.tl-dot{ width:9px; height:9px; border-radius:50%; background:var(--ink-dim); margin-top:6px; grid-column:2; z-index:1; box-shadow: 0 0 0 4px var(--bg); }
.tl-item.highlight .tl-dot{ background: var(--p2); box-shadow: 0 0 0 4px var(--bg), 0 0 12px 2px rgba(255,59,78,.6); }
.tl-date{ font-family:var(--mono); font-weight:600; color:var(--ink); font-size:.82rem; grid-column:1; background:var(--bg-panel); border:1px solid var(--rule); padding:3px 8px; border-radius:2px; width:fit-content; height:fit-content; }
.tl-item.highlight .tl-date{ border-color:var(--p2); color:var(--p2); }
.tl-text{ grid-column:3; font-size: clamp(.9rem,1.3vw,1.05rem); line-height:1.55; padding-top:2px; }
.tl-item.highlight .tl-text{ color:var(--ink); font-weight:500; }

.stamp{ display:inline-block; margin-left:8px; padding:1px 9px; border:2px solid var(--p2); color:var(--p2); font-family:var(--mono); font-weight:700; font-size:.65rem; text-transform:uppercase; letter-spacing:.04em; vertical-align:middle; opacity:0; transform:rotate(-8deg) scale(2); box-shadow: 0 0 16px rgba(255,59,78,.5); }
.slide.active .stamp{ animation: stampSlam .4s cubic-bezier(.34,1.56,.64,1) forwards; animation-delay:.7s; }
@keyframes stampSlam{ from{ transform:rotate(-8deg) scale(2); opacity:0; } 60%{ transform:rotate(-8deg) scale(.9); opacity:1; } to{ transform:rotate(-8deg) scale(1); opacity:1; } }

.handoff{ margin-top: 1.5em; color:var(--ink-dim); font-family:var(--mono); font-style:italic; font-size:.95rem; opacity:0; }
.slide.active .handoff{ animation: fadeUp .5s ease both .95s; }

/* ---------- infobox (standalone fact callout) ---------- */
.infobox{
  display:flex; align-items:flex-start; gap:16px;
  margin-top: 1.4em; padding: 16px 20px;
  background: linear-gradient(155deg, var(--bg-panel-alt), var(--bg-panel) 70%);
  border:1px solid var(--rule); border-left:4px solid var(--p2);
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: var(--shadow), 0 0 32px -14px rgba(255,59,78,.5);
  opacity:0; max-width: 720px;
}
.infobox-icon{ width:30px; height:30px; color:var(--p2); flex-shrink:0; margin-top:2px; filter: drop-shadow(0 0 10px rgba(255,59,78,.6)); }
.infobox-title{ margin:0 0 4px; font-family:var(--display); font-size:1.3rem; letter-spacing:.01em; color:var(--ink); }
.infobox-text{ margin:0; font-size:.86rem; color:var(--ink-dim); line-height:1.5; }
.slide.active .infobox{ animation: fadeUp .5s ease both .68s; }

/* ---------- squeeze / lock graphic (Breschnew-Doktrin) ---------- */
.squeeze{ text-align:center; padding-top: 1em; }
.lock-icon{ width:110px; height:110px; color:var(--p3); opacity:0; filter: drop-shadow(0 0 20px rgba(255,176,32,.6)); }
.slide.active .lock-icon{ animation: lockShut .7s ease both; animation-delay:.3s; }
@keyframes lockShut{ from{ transform:scale(1.3) rotate(-8deg); opacity:0; } 70%{ transform:scale(.94) rotate(3deg); opacity:1; } to{ transform:scale(1) rotate(0); opacity:1; } }
.squeeze-label{ margin-top:14px; font-family:var(--mono); font-size:.85rem; color:var(--ink-dim); line-height:1.4; }

/* ---------- pro/contra ---------- */
.pro-contra{ background:linear-gradient(155deg, var(--bg-panel-alt), var(--bg-panel) 70%); border-radius: var(--radius); padding: 20px 24px; border-top:3px solid var(--ink-dim); box-shadow: var(--shadow); opacity:0; }
.pro-contra.pro{ border-top-color: var(--p1); box-shadow: var(--shadow), 0 0 32px -16px rgba(61,139,253,.5); transform: rotate(-.3deg); }
.pro-contra.contra{ border-top-color: var(--p2); box-shadow: var(--shadow), 0 0 32px -16px rgba(255,59,78,.5); transform: rotate(.3deg); }
.pro-contra h3{ margin:0 0 .6em; font-family:var(--mono); font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-dim); }
@keyframes clashL{ from{ transform:translateX(-50px) rotate(-.3deg); opacity:0; } to{ transform:translateX(0) rotate(-.3deg); opacity:1; } }
@keyframes clashR{ from{ transform:translateX(50px) rotate(.3deg); opacity:0; } to{ transform:translateX(0) rotate(.3deg); opacity:1; } }
.slide.active .pro-contra.pro{ animation: clashL .55s cubic-bezier(.22,1,.36,1) both; }
.slide.active .pro-contra.contra{ animation: clashR .55s cubic-bezier(.22,1,.36,1) both .08s; }

.conclusion{ margin-top: 1.1em; font-family:var(--sans); font-weight:700; font-size:1.02rem; line-height:1.4; padding: 12px 18px; background: var(--bg-panel); border-left:4px solid var(--p2); border-radius: 0 var(--radius) var(--radius) 0; opacity:0; }
@keyframes dropIn{ from{ transform:translateY(-18px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
.slide.active .conclusion{ animation: dropIn .5s cubic-bezier(.34,1.56,.64,1) both .45s; }

.legacy{ margin-top: .6em; font-size:.88rem; color: var(--ink-dim); line-height:1.4; border-left:3px solid var(--p2); padding-left:12px; opacity:0; }
@keyframes legacyIn{ from{ opacity:0; transform:translateY(10px); border-left-color:var(--p2); } 60%{ border-left-color:var(--p2);} to{ opacity:1; transform:translateY(0); border-left-color:#ffd479; } }
.slide.active .legacy{ animation: legacyIn 1s ease both .75s; }

.sources{ margin-top: .7em; font-family:var(--mono); font-size:.66rem; color:var(--ink-dim); opacity:0; max-width: 780px; }
.slide.active .sources{ animation: fadeUp .5s ease both 1.1s; }
.sources-head{ margin:0 0 .3em; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-dim); opacity:.8; }
.sources ul{ margin:0; padding-left: 1.1em; line-height:1.4; }
.sources li{ margin-bottom:.12em; }

/* ---------- title slide ---------- */
.title-slide{ align-items:flex-start; position:relative; overflow:hidden; }
.bg-year{
  position:absolute; right:-4vw; top:-10vh; font-family:var(--display); font-size:48vh; line-height:1;
  color:rgba(255,255,255,.045); z-index:0; user-select:none; pointer-events:none;
  animation: driftYear 16s ease-in-out infinite alternate;
}
@keyframes driftYear{ from{ transform:translateY(0) scale(1); } to{ transform:translateY(-2%) scale(1.03); } }
.flagbar{ display:flex; gap:6px; margin-bottom: 32px; position:relative; z-index:1; }
.flagbar span{ width:40px; height:8px; }
.flagbar span:nth-child(1){ background: var(--p2); }
.flagbar span:nth-child(2){ background: var(--ink); }
.flagbar span:nth-child(3){ background: var(--p1); }
.kicker{ font-family:var(--mono); color:var(--ink-dim); text-transform:uppercase; letter-spacing:.16em; font-size:.82rem; margin:0 0 .5em; position:relative; z-index:1; }
.title-slide h1{ position:relative; z-index:1; }
.title-slide h2{ color:var(--ink-dim); font-weight:400; position:relative; z-index:1; }
.authors{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 1.8em; position:relative; z-index:1; }
.author-chip{ padding: 9px 16px; border-radius:2px; font-family:var(--mono); font-weight:600; font-size:.85rem; background:var(--bg-panel); border:1px solid var(--rule); border-bottom:3px solid var(--ink-dim); opacity:0; }
.slide.active .author-chip{ animation: fadeUp .5s ease both; }
.slide.active .author-chip:nth-child(1){ animation-delay:.5s; }
.slide.active .author-chip:nth-child(2){ animation-delay:.62s; }
.slide.active .author-chip:nth-child(3){ animation-delay:.74s; }
.author-chip small{ font-weight:400; font-family:var(--sans); color:var(--ink-dim); font-style:italic; }
.author-chip.p1{ border-bottom-color: var(--p1); }
.author-chip.p2{ border-bottom-color: var(--p2); }
.author-chip.p3{ border-bottom-color: var(--p3); }
.hint{ margin-top: 2.2em; font-family:var(--mono); font-size:.78rem; color:var(--ink-dim); position:relative; z-index:1; }
.hint code{ background:var(--bg-panel); border:1px solid var(--rule); padding:2px 6px; border-radius:2px; }

/* ---------- outline slide ---------- */
.lead{ max-width: 820px; line-height:1.6; color:var(--ink-dim); font-size:1.1rem; margin-bottom: 1.8em; }
.lead strong{ color:var(--ink); }
.agenda{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.agenda-item{ display:grid; grid-template-columns: 40px 1fr auto; align-items:center; gap:20px; background:linear-gradient(155deg, var(--bg-panel-alt), var(--bg-panel) 70%); border:1px solid var(--rule); border-left:4px solid var(--ink-dim); border-radius: var(--radius); padding: 16px 22px; box-shadow: var(--shadow); opacity:0; }
.agenda-item.p1{ border-left-color:var(--p1); color:var(--p1); box-shadow: var(--shadow), 0 0 28px -16px rgba(61,139,253,.55); }
.agenda-item.p2{ border-left-color:var(--p2); color:var(--p2); box-shadow: var(--shadow), 0 0 28px -16px rgba(255,59,78,.55); }
.agenda-item.p3{ border-left-color:var(--p3); color:var(--p3); box-shadow: var(--shadow), 0 0 28px -16px rgba(255,176,32,.55); }
.agenda-icon{ width:26px; height:26px; filter: drop-shadow(0 0 6px currentColor); }
.slide.active .agenda-item.p1{ animation: slideInL .5s ease both; }
.slide.active .agenda-item.p2{ animation: fadeUp .5s ease both .12s; }
.slide.active .agenda-item.p3{ animation: slideInR .5s ease both .24s; }
.agenda-item h3{ margin:0 0 .2em; font-family:var(--sans); font-size:1.12rem; font-weight:700; color:var(--ink); }
.agenda-item p{ margin:0; color:var(--ink-dim); font-size:.9rem; }
.agenda-who{ font-family:var(--mono); font-size:.76rem; color:var(--ink-dim); white-space:nowrap; text-transform:uppercase; letter-spacing:.04em; }

/* ---------- speaker notes ---------- */
/* ---------- nav controls ---------- */
.controls{ position:fixed; left:0; right:0; bottom:24px; z-index:40; display:flex; align-items:center; justify-content:center; gap: 18px; }
.navbtn{ width:38px; height:38px; border-radius:50%; cursor:pointer; background:var(--bg-panel); border:1px solid var(--rule); color:var(--ink); font-size:1rem; display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow); }
.navbtn:hover{ border-color:var(--p2); color:var(--p2); }
.navbtn:disabled{ opacity:.3; cursor:default; box-shadow:none; }

.dots{ display:flex; gap:7px; align-items:center; }
.dot{ width:7px; height:7px; border-radius:50%; background:var(--rule); cursor:pointer; transition: all .2s ease; }
.dot.active{ background:var(--ink); width:20px; border-radius:4px; }
.dot.d-p1.active{ background:var(--p1); }
.dot.d-p2.active{ background:var(--p2); }
.dot.d-p3.active{ background:var(--p3); }

.helpline{ position:fixed; bottom:5px; left:0; right:0; z-index:39; display:flex; justify-content:center; gap:24px; font-family:var(--mono); font-size:.68rem; color:var(--ink-dim); opacity:.7; }

/* ---------- responsive ---------- */
@media (max-width: 820px){
  .two-col{ grid-template-columns: 1fr; }
  .split{ grid-template-columns: 1fr; }
  .crack-divider{ display:none; }
  .slide{ padding: 88px 6vw 96px; overflow-y:auto; }
  html,body{ overflow:auto; }
  .tl-item{ grid-template-columns: 110px 16px 1fr; }
  .tl-item::before{ left:118px; }
  .agenda-item{ grid-template-columns: 30px 1fr; }
  .agenda-who{ grid-column: 2; }
}