/* ===== Tokens ===== */
:root{
  --ink: #0E1420;
  --panel: #161F30;
  --panel-edge: #233049;
  --text: #EDEFF5;
  --text-dim: #A9B3C7;

  --amber: #D9A24B;
  --cyan: #4FD1C5;
  --violet: #8B7CF6;
  --magenta: #F45FA0;
  --prism-a: #F45FA0;
  --prism-b: #4FD1C5;
  --prism-c: #FFD166;

  --school-maroon: #7B1C2E;
  --school-maroon-dark: #5A0F1F;
  --school-gold: #B8860B;
  --school-paper: #FBF7F0;

  --font-head: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Source Sans 3', system-ui, sans-serif;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; height:100%; background:var(--ink); }
body{
  font-family: var(--font-body);
  color: var(--text);
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

h1,h2,h3{ font-family: var(--font-head); margin:0; font-weight:600; letter-spacing: -0.01em; }

/* ===== Deck / slide mechanics ===== */
.deck{ position:relative; width:100%; height:100vh; }
.slide{
  position:absolute; inset:0;
  display:flex; align-items:center;
  padding: 6vh 7vw;
  opacity:0; visibility:hidden;
  transform: translateX(24px);
  transition: opacity .5s ease, transform .5s ease;
  overflow-y: auto;
}
.slide.active{ opacity:1; visibility:visible; transform:none; }
.slide.leaving{ transform: translateX(-24px); }

.slide--story{ gap: 6vw; background: var(--ink); }
.slide--story .story-text{ flex: 0 0 44%; }
.slide--story .story-scene{ flex: 1 1 auto; display:flex; justify-content:center; }
.story-text--wide{ flex: 0 0 auto !important; max-width: 760px; width:100%; }

.era-pill{
  display:inline-block;
  font-family: var(--font-head);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--era-color, var(--cyan));
  padding: .3rem .9rem;
  border-radius: 999px;
  margin: 0 0 1.1rem 0;
}
.slide--story h2{ font-size: clamp(2rem, 3.4vw, 3.1rem); line-height:1.12; margin-bottom: 1.1rem; }
.story-caption{ font-size: 1.15rem; line-height:1.6; color: var(--text-dim); max-width: 46ch; }

/* era accent wiring */
.slide[data-era="amber"]{ --era-color: var(--amber); }
.slide[data-era="cyan"]{ --era-color: var(--cyan); }
.slide[data-era="violet"]{ --era-color: var(--violet); }
.slide[data-era="magenta"]{ --era-color: var(--magenta); }
.slide[data-era="prism"]{ --era-color: var(--prism-c); }

.scene-svg{ width: min(34vw, 420px); height: auto; }

.photo-frame{
  margin:0; width: min(36vw, 440px);
  border: 3px solid var(--era-color);
  border-radius: 10px;
  overflow:hidden;
  background: var(--panel);
}
.photo-frame img{ display:block; width:100%; height:auto; filter: sepia(.25) contrast(1.05); }
.photo-frame figcaption{ padding:.6rem .9rem; font-size:.78rem; color: var(--text-dim); border-top:1px solid var(--panel-edge); }

/* generic svg strokes/fills keyed to era color */
.s-panel{ fill: var(--panel); stroke: var(--era-color); stroke-width:3; }
.s-tubes circle{ fill: var(--era-color); opacity:.85; animation: glow 2.4s ease-in-out infinite; }
.s-tubes circle:nth-child(2){ animation-delay:.3s; }
.s-tubes circle:nth-child(3){ animation-delay:.6s; }
.s-tubes circle:nth-child(4){ animation-delay:.9s; }
.s-tubes circle:nth-child(5){ animation-delay:1.2s; }
@keyframes glow{ 0%,100%{opacity:.5;} 50%{opacity:1;} }
.s-card rect{ fill: var(--panel); stroke: var(--era-color); stroke-width:2; }
.s-holes circle{ fill: var(--era-color); }

.s-axis{ stroke: var(--text-dim); stroke-width:2; }
.s-bars rect{ fill: var(--era-color); }

/* ===== Analytics: ledger -> report animation ===== */
.analytics-viz{ display:flex; flex-direction:column; align-items:center; gap:1.4rem; }
.viz-row{ display:flex; align-items:flex-end; gap:1.1rem; }

.viz-ledger{ display:flex; flex-direction:column; gap:.4rem; width:132px; }
.ledger-row{
  display:flex; justify-content:space-between; font-family:'Courier New', monospace; font-size:.82rem;
  background: var(--panel); border:1px solid var(--panel-edge); border-radius:6px; padding:.35rem .6rem;
  color: var(--text-dim);
  opacity:0; transform: translateX(-10px);
}
.analytics-viz.play .ledger-row{ animation: ledger-in .4s ease forwards; }
.analytics-viz.play .ledger-row:nth-child(1){ animation-delay:0s; }
.analytics-viz.play .ledger-row:nth-child(2){ animation-delay:.12s; }
.analytics-viz.play .ledger-row:nth-child(3){ animation-delay:.24s; }
.analytics-viz.play .ledger-row:nth-child(4){ animation-delay:.36s; }
.analytics-viz.play .ledger-row:nth-child(5){ animation-delay:.48s; }
@keyframes ledger-in{ to{ opacity:1; transform:none; } }

.viz-arrow{ font-size:1.6rem; color: var(--era-color); padding-bottom: 2.6rem; opacity:0; }
.analytics-viz.play .viz-arrow{ animation: arrow-in .4s ease forwards .7s; }
@keyframes arrow-in{ to{ opacity:1; } }

.viz-chart{ display:flex; align-items:flex-end; gap:.6rem; height:180px; }
.viz-bar{
  position:relative; width:34px; height:0%;
  display:flex; justify-content:center;
}
.analytics-viz.play .viz-bar{ animation: bar-grow .6s cubic-bezier(.2,.8,.3,1) forwards; }
.analytics-viz.play .viz-bar:nth-child(1){ animation-delay:.8s; }
.analytics-viz.play .viz-bar:nth-child(2){ animation-delay:.9s; }
.analytics-viz.play .viz-bar:nth-child(3){ animation-delay:1s; }
.analytics-viz.play .viz-bar:nth-child(4){ animation-delay:1.1s; }
.analytics-viz.play .viz-bar:nth-child(5){ animation-delay:1.2s; }
@keyframes bar-grow{ to{ height: var(--h); } }
.viz-bar-fill{ position:absolute; inset:0; background: var(--era-color); border-radius:4px 4px 0 0; opacity:.85; }
.viz-bar-value{ position:absolute; bottom:100%; margin-bottom:.3rem; font-size:.78rem; font-family: var(--font-head); color: var(--text-dim); white-space:nowrap; }

.viz-stamp{
  margin:0; font-family: var(--font-head); font-size:1rem; color: var(--era-color);
  border:2px solid var(--era-color); border-radius:6px; padding:.4rem .9rem;
  opacity:0; transform: scale(1.3) rotate(-4deg);
}
.analytics-viz.play .viz-stamp{ animation: stamp-in .4s cubic-bezier(.3,1.6,.5,1) forwards 1.9s; }
@keyframes stamp-in{ to{ opacity:1; transform: scale(1) rotate(-4deg); } }

/* ===== Real-time analytics: live transaction feed ===== */
.realtime-viz{ width: min(36vw, 440px); }
.rt-live{ display:flex; align-items:center; gap:.5rem; margin:0 0 .9rem; font-family: var(--font-head); font-size:.85rem; color: var(--era-color); }
.rt-live-dot{ width:8px; height:8px; border-radius:50%; background: var(--era-color); animation: rt-blink 1.3s ease-in-out infinite; }
@keyframes rt-blink{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

.rt-feed{ display:flex; flex-direction:column; gap:.5rem; }
.rt-row{
  display:grid; grid-template-columns: 1fr auto auto; align-items:center; gap:.8rem;
  background: var(--panel); border:1px solid var(--panel-edge); border-radius:8px; padding:.55rem .8rem;
  font-size:.85rem;
  opacity:0; transform: translateY(8px);
}
.realtime-viz.play .rt-row{ animation: rt-row-in .4s ease forwards; }
.realtime-viz.play .rt-row:nth-child(1){ animation-delay:0s; }
.realtime-viz.play .rt-row:nth-child(2){ animation-delay:.3s; }
.realtime-viz.play .rt-row:nth-child(3){ animation-delay:.6s; }
.realtime-viz.play .rt-row:nth-child(4){ animation-delay:.9s; }
.realtime-viz.play .rt-row:nth-child(5){ animation-delay:1.2s; }
@keyframes rt-row-in{ to{ opacity:1; transform:none; } }

.rt-label{ color: var(--text); }
.rt-amount{ color: var(--text-dim); font-family:'Courier New', monospace; }
.rt-status{ font-size:.72rem; font-family: var(--font-head); padding:.2rem .5rem; border-radius:999px; white-space:nowrap; color: var(--text-dim); background: var(--panel-edge); }
.rt-status--ok.resolved{ color:#1F3D33; background: var(--era-color); }
.rt-status--bad.resolved{ color:#3D1313; background:#F45FA0; }

.rt-row--alert.resolved{ border-color:#F45FA0; animation: rt-shake .4s ease; }
@keyframes rt-shake{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-4px); } 75%{ transform:translateX(4px); } }

/* ===== Predictive analytics: declining trend -> churn prediction ===== */
.predictive-viz{ width: min(36vw, 440px); }
.pred-label{ margin:0 0 .6rem; font-size:.85rem; color: var(--text-dim); font-family: var(--font-head); }
.pred-svg{ width:100%; height:auto; overflow:visible; }
.pred-axis{ stroke: var(--panel-edge); stroke-width:1.5; }

.pred-line-solid{
  fill:none; stroke: var(--era-color); stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray: 340; stroke-dashoffset: 340;
}
.predictive-viz.play .pred-line-solid{ animation: pred-draw 1.1s ease forwards .2s; }
@keyframes pred-draw{ to{ stroke-dashoffset:0; } }

.pred-line-dashed{
  fill:none; stroke: var(--era-color); stroke-width:3; stroke-dasharray:5 6; stroke-linecap:round; opacity:0;
}
.predictive-viz.play .pred-line-dashed{ animation: pred-fade-in .4s ease forwards 1.4s; }
@keyframes pred-fade-in{ to{ opacity:.8; } }

.pred-dots circle{ r:4; fill: var(--panel); stroke: var(--era-color); stroke-width:2.5; opacity:0; transform-origin: center; }
.predictive-viz.play .pred-dots circle{ animation: pred-dot-in .3s ease forwards; }
.predictive-viz.play .pred-dots circle:nth-child(1){ animation-delay:.15s; }
.predictive-viz.play .pred-dots circle:nth-child(2){ animation-delay:.35s; }
.predictive-viz.play .pred-dots circle:nth-child(3){ animation-delay:.55s; }
.predictive-viz.play .pred-dots circle:nth-child(4){ animation-delay:.75s; }
.predictive-viz.play .pred-dots circle:nth-child(5){ animation-delay:.95s; }
.predictive-viz.play .pred-dots circle:nth-child(6){ animation-delay:1.15s; }
@keyframes pred-dot-in{ to{ opacity:1; } }

.pred-dot-future{ fill: var(--era-color); opacity:0; transform-box: fill-box; transform-origin: center; }
.predictive-viz.play .pred-dot-future{ animation: pred-future-in .3s ease forwards 1.5s, pred-future-pulse 1.4s ease-in-out infinite 1.9s; }
@keyframes pred-future-in{ to{ opacity:1; } }
@keyframes pred-future-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.4); } }

.pred-card{
  display:flex; align-items:center; gap:.7rem; margin-top:1.4rem;
  background: var(--panel); border:1px solid var(--era-color); border-radius:10px; padding:.8rem 1rem;
  opacity:0; transform: translateY(10px);
}
.predictive-viz.play .pred-card{ animation: pred-card-in .5s ease forwards 1.9s; }
@keyframes pred-card-in{ to{ opacity:1; transform:none; } }
.pred-icon{ font-size:1.3rem; }
.pred-text{ margin:0; font-size:.9rem; color: var(--text-dim); line-height:1.4; }
.pred-percent{ font-family: var(--font-head); font-size:1.15rem; color: var(--era-color); }

/* ===== Machine learning: labeled examples -> accuracy -> live test ===== */
.ml-viz{ width: min(36vw, 440px); }
.ml-caption{ margin:0 0 .6rem; font-size:.85rem; color: var(--text-dim); font-family: var(--font-head); }

.ml-examples{ display:flex; flex-direction:column; gap:.45rem; }
.ml-ex{
  display:flex; justify-content:space-between; align-items:center; gap:.7rem;
  background: var(--panel); border:1px solid var(--panel-edge); border-radius:8px; padding:.5rem .75rem;
  font-size:.82rem; opacity:0; transform: translateY(8px);
}
.ml-viz.play .ml-examples .ml-ex{ animation: ml-ex-in .4s ease forwards; }
.ml-viz.play .ml-examples .ml-ex:nth-child(1){ animation-delay:0s; }
.ml-viz.play .ml-examples .ml-ex:nth-child(2){ animation-delay:.3s; }
.ml-viz.play .ml-examples .ml-ex:nth-child(3){ animation-delay:.6s; }
.ml-viz.play .ml-examples .ml-ex:nth-child(4){ animation-delay:.9s; }
@keyframes ml-ex-in{ to{ opacity:1; transform:none; } }

.ml-ex-label{ color: var(--text-dim); }
.ml-ex-tag{ font-size:.68rem; font-family: var(--font-head); padding:.2rem .5rem; border-radius:999px; white-space:nowrap; }
.ml-ex-tag--spam{ color:#3D1313; background:#F45FA0; }
.ml-ex-tag--ok{ color:#1F2A3D; background: var(--era-color); }

.ml-meter{ margin-top:1rem; opacity:0; }
.ml-viz.play .ml-meter{ animation: ml-ex-in .3s ease forwards 1.2s; }
.ml-meter-label{ margin:0 0 .4rem; font-size:.82rem; color: var(--text-dim); }
.ml-meter-percent{ font-family: var(--font-head); color: var(--era-color); }
.ml-meter-track{ height:8px; border-radius:999px; background: var(--panel-edge); overflow:hidden; }
.ml-meter-fill{ height:100%; width:0%; background: var(--era-color); border-radius:999px; }

.ml-test{
  display:flex; justify-content:space-between; align-items:center; gap:.7rem; margin-top:1rem;
  background: var(--panel); border:1px solid var(--era-color); border-radius:8px; padding:.6rem .8rem;
  font-size:.82rem; opacity:0; transform: translateY(8px);
}
.ml-viz.play .ml-test{ animation: ml-ex-in .4s ease forwards 2.4s; }
.ml-test-result{ font-family: var(--font-head); font-size:.78rem; color: var(--era-color); white-space:nowrap; }

/* ===== Computer vision: live object detection ===== */
.cv-viz{ width: min(38vw, 460px); }
.cv-row{ display:flex; gap:1.3rem; justify-content:center; }

.cv-object{ position:relative; width:84px; height:84px; opacity:0; }
.cv-viz.play .cv-object{ animation: cv-in .3s ease forwards; }
.cv-viz.play .cv-object:nth-child(1){ animation-delay:.1s; }
.cv-viz.play .cv-object--2{ animation-delay:.6s; }
.cv-viz.play .cv-object--3{ animation-delay:1.1s; }
@keyframes cv-in{ to{ opacity:1; } }

.cv-icon{ width:100%; height:100%; }
.cv-icon circle, .cv-icon ellipse, .cv-icon polygon{ fill:none; stroke: var(--era-color); stroke-width:2.5; }
.cv-icon path{ stroke: var(--era-color); stroke-width:2.5; }
.cv-icon-eye{ fill: var(--era-color); stroke:none; }
.cv-icon--sign polygon{ fill: var(--era-color); opacity:.18; }
.cv-icon--sign text{ fill: var(--era-color); font-family: var(--font-head); font-size:11px; font-weight:700; }

.cv-corner{ position:absolute; width:14px; height:14px; border: 2px solid var(--era-color); opacity:0; }
.cv-corner--tl{ top:-6px; left:-6px; border-right:none; border-bottom:none; }
.cv-corner--tr{ top:-6px; right:-6px; border-left:none; border-bottom:none; }
.cv-corner--bl{ bottom:-6px; left:-6px; border-right:none; border-top:none; }
.cv-corner--br{ bottom:-6px; right:-6px; border-left:none; border-top:none; }
.cv-viz.play .cv-object .cv-corner{ animation: cv-in .25s ease forwards; }
.cv-viz.play .cv-object:nth-child(1) .cv-corner{ animation-delay:.3s; }
.cv-viz.play .cv-object--2 .cv-corner{ animation-delay:.8s; }
.cv-viz.play .cv-object--3 .cv-corner{ animation-delay:1.3s; }

.cv-tag{
  position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:.5rem;
  font-size:.7rem; font-family: var(--font-head); color: var(--era-color);
  background: var(--panel); border:1px solid var(--era-color); border-radius:999px; padding:.2rem .55rem;
  white-space:nowrap; opacity:0;
}
.cv-viz.play .cv-object:nth-child(1) .cv-tag{ animation: cv-in .3s ease forwards .45s; }
.cv-viz.play .cv-object--2 .cv-tag{ animation: cv-in .3s ease forwards .95s; }
.cv-viz.play .cv-object--3 .cv-tag{ animation: cv-in .3s ease forwards 1.45s; }

.cv-summary{ margin: 2.6rem 0 0; text-align:center; font-size:.92rem; color: var(--text-dim); opacity:0; }
.cv-viz.play .cv-summary{ animation: cv-in .4s ease forwards 1.9s; }
.cv-summary .cv-count, .cv-summary .cv-ms{ font-family: var(--font-head); color: var(--era-color); }

/* ===== Generative AI intro: fragments remix into a new sentence ===== */
.genai-viz{ width: min(38vw, 460px); }
.genai-sources{ position:relative; height:130px; }
.genai-frag{
  position:absolute; font-size:.85rem; color: var(--text); white-space:nowrap; opacity:0;
}
.genai-viz.play .genai-frag{ animation: genai-dissolve 2.4s ease forwards; }
.genai-viz.play .genai-frag:nth-child(1){ animation-delay:0s; }
.genai-viz.play .genai-frag:nth-child(2){ animation-delay:.3s; }
.genai-viz.play .genai-frag:nth-child(3){ animation-delay:.6s; }
.genai-viz.play .genai-frag:nth-child(4){ animation-delay:.9s; }
.genai-viz.play .genai-frag:nth-child(5){ animation-delay:1.2s; }
.genai-viz.play .genai-frag:nth-child(6){ animation-delay:1.5s; }
@keyframes genai-dissolve{
  0%{ opacity:0; transform:translateY(10px) scale(.92); }
  18%{ opacity:1; transform:translateY(0) scale(1); }
  65%{ opacity:1; transform:translateY(0) scale(1); }
  100%{ opacity:0; transform:translateY(-22px) scale(.92); }
}
.genai-output{
  margin:0; font-family: var(--font-head); font-size:1.15rem; color: var(--text);
  min-height:1.6em; border-top:1px solid var(--panel-edge); padding-top:1rem;
}
.genai-tag{ margin:.9rem 0 0; font-size:.85rem; color: var(--era-color); opacity:0; }
.genai-tag.show{ animation: ledger-in .4s ease forwards; }

.s-frame{ fill: var(--panel); stroke: var(--era-color); stroke-width:3; }
.s-frame-sun{ fill: var(--era-color); opacity:.8; }
.s-frame-mountain{ fill: var(--era-color); opacity:.35; }
.s-wand-stick{ stroke: var(--text-dim); stroke-width:4; stroke-linecap:round; }
.s-wand-sparkles{ fill:none; stroke: var(--era-color); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }

/* ===== AGI: specialist badges orbit a locked, undefined core ===== */
.agi-viz{ display:flex; flex-direction:column; align-items:center; gap:1.6rem; }
.agi-ring{ position:relative; width:320px; height:320px; }
.agi-core{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%; border:2px dashed var(--era-color);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-head); font-size:1.5rem; color: var(--era-color);
  opacity:0;
}
.agi-viz.play .agi-core{ animation: agi-in .4s ease forwards 1.5s, agi-pulse 2s ease-in-out infinite 1.9s; }
@keyframes agi-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.5; } }

.agi-badge{
  position:absolute; background: var(--panel); border:1px solid var(--panel-edge); border-radius:999px;
  padding:.5rem 1rem; font-size:.8rem; color: var(--text-dim); white-space:nowrap;
  opacity:0;
}
.agi-badge--1{ top:0; left:50%; transform:translateX(-50%); }
.agi-badge--2{ top:50%; right:0; transform:translateY(-50%); }
.agi-badge--3{ bottom:0; left:50%; transform:translateX(-50%); }
.agi-badge--4{ top:50%; left:0; transform:translateY(-50%); }
.agi-viz.play .agi-badge{ animation: agi-badge-in .35s ease forwards; }
.agi-viz.play .agi-badge--1{ animation-delay:.1s; }
.agi-viz.play .agi-badge--2{ animation-delay:.4s; }
.agi-viz.play .agi-badge--3{ animation-delay:.7s; }
.agi-viz.play .agi-badge--4{ animation-delay:1s; }
@keyframes agi-badge-in{ from{ opacity:0; } to{ opacity:1; border-color: var(--era-color); color: var(--text); } }
@keyframes agi-in{ to{ opacity:1; } }

.agi-caption{ color: var(--text-dim); font-size:.9rem; text-align:center; max-width:40ch; opacity:0; }
.agi-viz.play .agi-caption{ animation: agi-in .4s ease forwards 1.3s; }

/* ===== ASI: an intelligence scale with the top left undefined ===== */
.asi-viz{ display:flex; flex-direction:column; align-items:center; gap:1.6rem; }
.asi-label{ color: var(--text-dim); font-size:.95rem; margin:0; }
.asi-bars{ display:flex; align-items:flex-end; gap:1.6rem; height:200px; }
.asi-bar-col{ display:flex; flex-direction:column; align-items:center; gap:.6rem; justify-content:flex-end; height:100%; }
.asi-bar{
  width:46px; height:0; background: var(--era-color); border-radius:6px 6px 0 0; opacity:.85;
}
.asi-viz.play .asi-bar{ animation: asi-grow .7s cubic-bezier(.2,.8,.3,1) forwards; }
.asi-viz.play .asi-bar-col:nth-child(1) .asi-bar{ animation-delay:.1s; }
.asi-viz.play .asi-bar-col:nth-child(2) .asi-bar{ animation-delay:.4s; }
.asi-viz.play .asi-bar-col:nth-child(3) .asi-bar{ animation-delay:.7s; }
@keyframes asi-grow{ to{ height: var(--h); } }
.asi-bar--unknown{
  width:46px; height:0; background:none; border:2px dashed var(--era-color); border-radius:6px 6px 0 0;
  display:flex; align-items:flex-start; justify-content:center; padding-top:.4rem;
  font-family: var(--font-head); color: var(--era-color); opacity:0;
}
.asi-viz.play .asi-bar--unknown{ animation: asi-unknown-in .5s ease forwards 1.1s, asi-pulse 1.8s ease-in-out infinite 1.7s; }
@keyframes asi-unknown-in{ to{ opacity:1; height:88%; } }
@keyframes asi-pulse{ 0%,100%{ border-color: var(--era-color); } 50%{ border-color: var(--text-dim); } }
.asi-bar-label{ color: var(--text-dim); font-size:.78rem; }

/* ===== Bookend (title / closing) ===== */
.slide--bookend{
  flex-direction: column; justify-content: center; align-items:center; text-align:center;
  background: radial-gradient(ellipse at 50% 30%, var(--school-maroon-dark) 0%, var(--ink) 65%);
  gap: 3rem;
}
.bookend-logos{ display:flex; align-items:center; gap: 2.5rem; position:absolute; top:5vh; left:0; right:0; justify-content:center; }
.bookend-logos--closing{ position:static; margin-top: 2rem; }
.logo--school{ height: 64px; width:auto; }
.logo--ymtl{ height: 30px; width:auto; display:block; }
.powered-by{ display:flex; align-items:center; gap:.7rem; font-size:.85rem; color: #4A4A4A; background:#fff; padding:.4rem .9rem; border-radius:999px; }
.powered-by span{ white-space:nowrap; }

.bookend-kicker{ color: var(--school-gold); font-family: var(--font-head); font-size:1.1rem; margin:0 0 .5rem; }
.bookend-title{ font-size: clamp(2.4rem, 5.5vw, 4.4rem); line-height:1.08; }
.bookend-sub{ color: var(--text-dim); font-size:1.2rem; max-width:50ch; margin: 1rem auto 0; }
.bookend-hint{ color: var(--text-dim); font-size:.95rem; margin-top:2.5rem; opacity:.7; }

.closing-rail{ display:flex; gap:.5rem; justify-content:center; margin: 1.5rem 0; }
.closing-rail span{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.closing-rail span[data-dot="amber"]{ background: var(--amber); }
.closing-rail span[data-dot="cyan"]{ background: var(--cyan); }
.closing-rail span[data-dot="violet"]{ background: var(--violet); }
.closing-rail span[data-dot="magenta"]{ background: var(--magenta); }
.closing-rail span[data-dot="prism"]{ background: var(--prism-c); }

/* ===== Cue slide ===== */
.slide--cue{
  gap: 4vw;
  background: linear-gradient(135deg, var(--panel) 0%, var(--ink) 100%);
  border-left: 6px solid var(--era-color);
}
.cue-text{ flex: 0 0 44%; }
.cue-kicker{ color: var(--era-color); font-family: var(--font-head); margin-bottom:.5rem; }
.cue-title{ font-size: clamp(2.2rem, 4vw, 3.4rem); margin-bottom:1rem; }
.cue-body{ color: var(--text-dim); font-size:1.25rem; max-width: 56ch; line-height:1.55; }

.cue-scene{ flex: 1 1 auto; display:flex; justify-content:center; }
.cue-browser{ width: min(32vw, 400px); border-radius:12px; overflow:hidden; border:1px solid var(--panel-edge); box-shadow: 0 20px 50px rgba(0,0,0,.4); }
.cue-browser-bar{ display:flex; align-items:center; gap:.5rem; background:#1C2436; padding:.7rem .9rem; }
.cue-dot{ width:9px; height:9px; border-radius:50%; background: var(--panel-edge); }
.cue-url{
  margin-left:.6rem; flex:1; background: var(--ink); border-radius:999px; padding:.3rem .7rem;
  font-size:.78rem; color: var(--text-dim); font-family: var(--font-body); white-space:nowrap; overflow:hidden;
}
.cue-browser-body{
  height:160px; background: var(--ink); display:flex; align-items:center; justify-content:center;
}
.cue-live{ display:flex; align-items:center; gap:.5rem; font-family: var(--font-head); font-size:1rem; color: var(--era-color); }

/* ===== Code comparison (programming languages) ===== */
.slide--code{ gap: 4vw; }
.slide--code .story-text{ flex: 0 0 40%; display:flex; flex-direction:column; align-items:flex-start; gap:1.5rem; }
.code-col{ flex: 1 1 auto; display:flex; flex-direction:column; gap:.7rem; max-width: 420px; }
.code-card{
  background: var(--panel); border:1px solid var(--panel-edge); border-radius:10px;
  padding: .7rem 1rem;
  opacity:0; transform: translateX(14px);
  animation: code-in .5s ease forwards;
}
.code-card--1{ animation-delay: .1s; }
.code-card--2{ animation-delay: .35s; }
.code-card--3{ animation-delay: .6s; }
.code-card--4{ border-color: var(--era-color); animation-delay: .85s; }
@keyframes code-in{ to{ opacity:1; transform:none; } }
.code-label{ margin:0 0 .35rem; font-size:.75rem; color: var(--era-color); font-family: var(--font-head); }
.code-card pre{
  margin:0; font-family: 'Courier New', monospace; font-size:.8rem; line-height:1.5;
  color: var(--text); white-space:pre; overflow-x:auto;
}
.code-card--4 pre{ font-size:1rem; color: var(--era-color); }
.code-punchline{
  color: var(--text-dim); font-size:1rem; margin:0;
  opacity:0; animation: code-in .6s ease forwards; animation-delay: 1.15s;
}

/* ===== Trio (meet the assistants) ===== */
.trio-viz{ width: min(36vw, 440px); }
.trio-prompt{ margin:0 0 .9rem; font-family: var(--font-head); font-size:.95rem; color: var(--text); min-height:1.4em; }
.trio-row{ display:flex; flex-direction:column; gap:.7rem; width:100%; }
.trio-card{
  background: var(--panel); border-radius:12px; padding:.8rem 1rem; border-left: 4px solid;
  opacity:0; transform: translateY(10px);
  display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap;
}
.trio-viz.play .trio-card{ animation: ledger-in .4s ease forwards; }
.trio-viz.play .trio-card--a{ animation-delay:.1s; }
.trio-viz.play .trio-card--b{ animation-delay:.25s; }
.trio-viz.play .trio-card--c{ animation-delay:.4s; }
.trio-card--a{ border-color: #74AA9C; }
.trio-card--b{ border-color: var(--magenta); }
.trio-card--c{ border-color: #4285F4; }
.trio-mark{ font-size:.85rem; }
.trio-card h3{ font-size:.92rem; margin:0; flex: 0 0 auto; }
.trio-meta{ color: var(--text-dim); font-size:.72rem; margin:0; flex: 0 0 100%; }
.trio-answer{ color: var(--text); font-size:.8rem; line-height:1.4; margin:0; flex: 0 0 100%; min-height:2.2em; }

/* ===== Demo slides (chat + filter) ===== */
.slide--demo{ flex-direction:column; justify-content:center; align-items:center; gap:2rem; }
.demo-head{ text-align:center; max-width:60ch; }
.demo-head h2{ font-size: clamp(1.9rem,3vw,2.6rem); margin-top:.4rem; }
.demo-note{ color: var(--text-dim); font-size:1rem; max-width:56ch; text-align:center; }

.chat-window{ width:min(640px, 80vw); display:flex; flex-direction:column; gap:1rem; }
.chat-row{ display:flex; }
.chat-row--user{ justify-content:flex-end; }
.chat-row--ai{ justify-content:flex-start; }
.chat-bubble{ padding:.9rem 1.2rem; border-radius: 18px; max-width:80%; font-size:1.05rem; line-height:1.5; }
.chat-bubble--user{ background: var(--panel-edge); border-bottom-right-radius:4px; }
.chat-bubble--ai{ background: var(--magenta); color: #241019; border-bottom-left-radius:4px; min-height:1.6em; }
.chat-caret{ animation: blink 1s step-start infinite; }
@keyframes blink{ 50%{ opacity:0; } }

.filter-stage{ display:flex; gap:2.5rem; align-items:center; width:100%; justify-content:center; }
.filter-video-wrap{ position:relative; width: 420px; height: 315px; background: var(--panel); border-radius:16px; overflow:hidden; display:flex; align-items:center; justify-content:center; border:2px solid var(--panel-edge); }
#filter-video{ width:100%; height:100%; object-fit:cover; transform: scaleX(-1); display:none; }
#filter-video.live{ display:block; }
.filter-canvas-hidden{ display:none; }
.filter-placeholder{ color: var(--text-dim); text-align:center; padding:0 2rem; font-size:.95rem; }
.filter-controls{ display:flex; flex-direction:column; gap:1.2rem; }
.filter-btn-row{ display:flex; gap:.6rem; }
.filter-btn{ font-family: var(--font-body); font-weight:600; font-size:1rem; padding:.8rem 1.4rem; border-radius:10px; border:none; cursor:pointer; }
.filter-btn--primary{ background: var(--magenta); color:#241019; flex:1; }
.filter-btn--stop{ background: var(--panel); color: var(--text-dim); border:1px solid var(--panel-edge); }
.filter-btn--stop:disabled{ opacity:.4; cursor:not-allowed; }
.filter-presets{ display:grid; grid-template-columns: 1fr 1fr; gap:.6rem; }
.filter-preset{ font-family: var(--font-body); font-size:.9rem; padding:.6rem .9rem; border-radius:8px; border:1px solid var(--panel-edge); background: var(--panel); color: var(--text); cursor:pointer; }
.filter-preset.active{ border-color: var(--magenta); color: var(--magenta); }

/* ===== Grid of examples ===== */
.slide--grid{ flex-direction:column; justify-content:flex-start; align-items:flex-start; gap:1rem; }
.slide--grid .era-pill{ margin-bottom:.6rem; }
.slide--grid .story-text--wide h2{ font-size: clamp(1.5rem, 2.3vw, 2.1rem); margin-bottom:0; }
.examples-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:.7rem; width:100%; }
.example-tile{ background: var(--panel); border-radius:12px; padding:.75rem .9rem; }
.example-tile h3{ font-size:.88rem; margin:0 0 .3rem; color: var(--magenta); }
.example-tile p{ color: var(--text-dim); font-size:.75rem; line-height:1.35; margin:0; }

/* ===== Recap ===== */
.slide--recap{ flex-direction:column; justify-content:center; align-items:flex-start; max-width:900px; }
.slide--recap h2{ font-size: clamp(2rem,3.4vw,3rem); margin:.6rem 0 1.2rem; }
.recap-checklist{ display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.6rem; }
.recap-item{
  display:flex; align-items:center; gap:.7rem; font-size:1.1rem; color: var(--text-dim);
  opacity:0; transform: translateX(-10px);
}
.recap-checklist.play .recap-item{ animation: ledger-in .35s ease forwards; }
.recap-checklist.play .recap-item:nth-child(1){ animation-delay:.1s; }
.recap-checklist.play .recap-item:nth-child(2){ animation-delay:.4s; }
.recap-checklist.play .recap-item:nth-child(3){ animation-delay:.7s; }
.recap-checklist.play .recap-item:nth-child(4){ animation-delay:1s; }
.recap-check{
  display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
  border-radius:50%; background: var(--era-color); color:#3D1313; font-size:.75rem; flex:0 0 auto;
}
.recap-line{ font-size:1.4rem; line-height:1.5; color: var(--text-dim); opacity:0; }
.recap-checklist.play ~ .recap-line{ animation: ledger-in .5s ease forwards 1.5s; }

/* ===== Navigation chrome ===== */
.rail{
  position:fixed; bottom: 2.2vh; left:50%; transform:translateX(-50%);
  display:flex; gap:7px; z-index:10;
}
.rail button{
  width:9px; height:9px; border-radius:50%; border:none; padding:0; cursor:pointer;
  background: var(--panel-edge); opacity:.6;
  transition: transform .2s ease, opacity .2s ease;
}
.rail button.on{ opacity:1; transform: scale(1.3); }
.rail button[data-era="amber"].on{ background: var(--amber); }
.rail button[data-era="cyan"].on{ background: var(--cyan); }
.rail button[data-era="violet"].on{ background: var(--violet); }
.rail button[data-era="magenta"].on{ background: var(--magenta); }
.rail button[data-era="prism"].on{ background: var(--prism-c); }

.slide-counter{
  position:fixed; top: 2.4vh; right: 2.4vw; z-index:10;
  font-family: var(--font-head); font-size:.85rem; color: var(--text-dim);
}

.back-to-blog{
  position:fixed; top: 2.4vh; left: 2.4vw; z-index:10;
  font-family: var(--font-head); font-size:.82rem; color: var(--text-dim);
  text-decoration:none; opacity:.7;
}
.back-to-blog:hover{ opacity:1; color: var(--text); }

@media (max-width: 860px){
  .slide--story{ flex-direction:column-reverse; }
  .slide--story .story-text, .story-text--wide{ flex: none; }
  .scene-svg{ width: 48vw; }
  .code-col{ max-width:none; }
  .examples-grid{ grid-template-columns: 1fr 1fr; }
  .filter-stage{ flex-direction:column; }
}