/* Colours: personal palette (HEX values unchanged; tints are alpha of those values). */
:root {
  --black: #000000;
  --white: #ffffff;
  --grey-d: #5a5a5a;
  --grey-m: #969696;
  --grey-l: #e6e6e6;
  --blue: #006dae;
  --cyan: #abf5f9;
  --bright: #285aff;
  --indigo: #121256;
  --purple: #7463d7;
  --navy: #102f86;
  --magenta: #cd2fb0;
  --wine: #710044;
  --peach: #ff5c8a;
  --orange: #f86700;
  --gold: #ffba00;
  --lime: #83a00a;
  --teal: #0b6554;
  --brown: #9d6a43;

  --text: var(--black);
  --muted: var(--grey-d);
  --faint: var(--grey-m);
  --line: var(--grey-l);
  --accent: var(--blue);
  --bad: var(--orange);
  --good: var(--teal);
  --sec: var(--blue);
  --panel: #ffffff;
  --shadow: 0 1px 2px rgba(18, 18, 86, 0.06), 0 12px 32px rgba(18, 18, 86, 0.08);
  --sans: -apple-system, 'SF Pro Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.2, 0.75, 0.2, 1);
  --spring: cubic-bezier(0.3, 1.5, 0.5, 1);
}
/* one colour per section: model, deliberation, results, discussion */
[data-sec='model'] { --sec: #006dae; }
[data-sec='delib'] { --sec: #7463d7; }
[data-sec='results'] { --sec: #0b6554; }
[data-sec='disc'] { --sec: #cd2fb0; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #0b0b33; overflow: hidden; }
body { font-family: var(--sans); color: var(--text); cursor: pointer; -webkit-font-smoothing: antialiased; }

.stage { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: center; overflow: hidden; background: var(--white); }

/* ---- chrome shared by every slide ----------------------------------------- */
.progress { position: absolute; left: 0; right: 0; top: 0; height: 6px; background: rgba(150, 150, 150, 0.2); z-index: 50; }
.progress i { display: block; height: 100%; background: var(--sec); transform-origin: left; transform: scaleX(0); transition: background 0.6s; }
.pager { position: absolute; right: 40px; bottom: 26px; font: 600 18px var(--mono); color: var(--faint); z-index: 50; display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.88); padding: 4px 10px; border-radius: 8px; }
.pager::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--grey-l); transition: background 0.3s; }
.pager.ready::before { background: var(--sec); }
.brand { position: absolute; left: 100px; bottom: 26px; font: 500 18px var(--sans); color: var(--faint); z-index: 50; letter-spacing: 0.3px; }
.brand b { color: var(--grey-d); font-weight: 650; }
.paused { position: absolute; right: 40px; top: 24px; font: 600 18px var(--mono); color: var(--white); background: var(--orange); padding: 6px 14px; border-radius: 6px; z-index: 60; opacity: 0; transition: opacity 0.3s; }
.paused.on { opacity: 1; }
.track { position: absolute; right: 100px; top: 70px; display: flex; gap: 6px; z-index: 50; transition: opacity 0.4s; }
.track span { font: 650 16px var(--sans); letter-spacing: 1.5px; text-transform: uppercase; padding: 8px 14px; border-radius: 30px; color: var(--grey-m); background: rgba(150, 150, 150, 0.1); transition: all 0.5s var(--ease); }
.track span.now { color: var(--white); background: var(--sec); }
.stage[data-sec=''] .track, .stage[data-sec=''] .brand { opacity: 0; }
.stage.dark .track span:not(.now) { color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.08); }
.stage.dark .brand, .stage.dark .pager { color: rgba(255, 255, 255, 0.5); }
.stage.dark .pager { background: transparent; }
.stage.dark .brand b { color: rgba(255, 255, 255, 0.75); }
.stage.dark .pager::before { background: rgba(255, 255, 255, 0.2); }
.stage.dark .pager.ready::before { background: var(--cyan); }

/* ---- slides ----------------------------------------------------------------- */
.slide { position: absolute; inset: 0; padding: 66px 100px 80px; opacity: 0; visibility: hidden; transition: opacity 0.6s var(--ease), visibility 0s 0.6s; background: var(--white); }
.slide.current { opacity: 1; visibility: visible; transition: opacity 0.6s var(--ease); z-index: 2; }
.slide.leaving { visibility: visible; z-index: 1; }
.slide.frozen * { animation-play-state: paused !important; }
/* faint dot grid, fading in towards the lower right */
.slide::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(18, 18, 86, 0.16) 1.5px, transparent 1.8px); background-size: 34px 34px;
  -webkit-mask-image: linear-gradient(115deg, transparent 35%, #000 100%); mask-image: linear-gradient(115deg, transparent 35%, #000 100%); }
.slide.plain::before { display: none; }

.slide.dark { background: radial-gradient(1200px 700px at 85% 110%, #1d1d7a 0%, rgba(18, 18, 86, 0) 70%), var(--indigo); color: var(--white);
  --text: #fff; --muted: rgba(255, 255, 255, 0.74); --faint: rgba(255, 255, 255, 0.5); --line: rgba(255, 255, 255, 0.14); --accent: var(--cyan); --panel: rgba(255, 255, 255, 0.06); }
.slide.dark::before { background-image: radial-gradient(rgba(171, 245, 249, 0.14) 1.5px, transparent 1.8px); }

.kicker { display: inline-flex; align-items: center; gap: 10px; font: 700 18px var(--sans); letter-spacing: 2.5px; text-transform: uppercase; color: var(--white); background: var(--sec); padding: 8px 16px 8px 14px; border-radius: 30px; }
.kicker::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); }
.kicker .sub { opacity: 0.75; font-weight: 600; }
h1.title { font: 760 60px/1.12 var(--sans); letter-spacing: -1.4px; margin-top: 18px; max-width: 1720px; }
h1.title em { font-style: normal; color: var(--sec); }

.abs { position: absolute; }
.row { display: flex; gap: 24px; }
.col { display: flex; flex-direction: column; gap: 18px; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.blue { color: var(--accent); }
.sec { color: var(--sec); }
.bad { color: var(--bad); }
.good { color: var(--good); }
.mono { font-family: var(--mono); }
.big { font-size: 34px; line-height: 1.35; }
.mid { font-size: 28px; line-height: 1.4; }
.small { font-size: 22px; line-height: 1.4; }
b, strong { font-weight: 650; }
.label-s { font: 700 15px var(--sans); letter-spacing: 2px; text-transform: uppercase; color: var(--faint); }
.dark .label-s { color: rgba(255, 255, 255, 0.55); }

/* ---- cards ------------------------------------------------------------------ */
.card { background: var(--panel); border: 1px solid rgba(18, 18, 86, 0.07); border-radius: 20px; padding: 22px 26px; box-shadow: var(--shadow); }
.card.blue { border: 2px solid var(--blue); }
.card.secb { border: 2px solid var(--sec); }
.card.fill { background: rgba(230, 230, 230, 0.45); box-shadow: none; border-color: transparent; }
.card.accent { border-left: 6px solid var(--sec); }
.card.warn { border-left: 6px solid var(--orange); }
.card.ok { border-left: 6px solid var(--teal); }
.card h3 { font: 700 27px var(--sans); margin-bottom: 6px; }
.card p { font-size: 23px; line-height: 1.42; color: var(--muted); }
.dark .card { border-color: rgba(255, 255, 255, 0.12); box-shadow: none; }
.nb { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sec); color: var(--white); font: 750 21px var(--sans); }
.nb.blue { background: var(--blue); }
.icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 16px; font-size: 32px; background: rgba(0, 109, 174, 0.08); }
.tag { display: inline-block; font: 650 17px var(--mono); padding: 4px 10px; border-radius: 6px; background: var(--grey-l); color: var(--grey-d); white-space: nowrap; }
.tag.blue { background: var(--blue); color: var(--white); }
.tag.orange { background: var(--orange); color: var(--white); }
.tag.teal { background: var(--teal); color: var(--white); }
.tag.sec { background: var(--sec); color: var(--white); }
.chip { display: inline-flex; align-items: center; gap: 10px; font: 550 23px var(--sans); padding: 10px 18px; border-radius: 40px; border: 2px solid var(--line); background: var(--white); white-space: nowrap; }
.chip.blue { border-color: var(--blue); color: var(--blue); }
.chip.solid { background: var(--blue); border-color: var(--blue); color: var(--white); }
.chip.orange { border-color: var(--orange); color: var(--orange); background: rgba(248, 103, 0, 0.06); }
.chip.ghost { background: rgba(230, 230, 230, 0.5); border-color: transparent; }
.num { font-variant-numeric: tabular-nums; }

.lesson { font: 650 29px/1.35 var(--sans); color: var(--sec); background: rgba(150, 150, 150, 0.07); border-left: 6px solid var(--sec); padding: 18px 26px; border-radius: 0 16px 16px 0; }
.lesson::before { content: 'Lesson'; display: block; font: 750 14px var(--sans); letter-spacing: 2.5px; text-transform: uppercase; opacity: 0.7; margin-bottom: 4px; }
.lesson.plain::before { display: none; }
.delta { font: 760 64px var(--sans); letter-spacing: -1.5px; }
.delta .from { color: var(--faint); }
.delta .arrow { color: var(--faint); margin: 0 14px; font-weight: 300; }
.tabs { display: flex; gap: 10px; }
.tabs span { font: 750 24px var(--mono); padding: 8px 16px; border-radius: 10px; background: rgba(150, 150, 150, 0.12); color: var(--grey-m); }
.tabs span.now { background: var(--sec); color: var(--white); }
.tabs span.done { background: rgba(11, 101, 84, 0.12); color: var(--teal); }
.tabs span.done::after { content: ' ✓'; }

/* ---- code -------------------------------------------------------------------- */
.code { background: var(--indigo); color: #f2f2ff; font: 400 22px/1.5 var(--mono); padding: 22px 26px; border-radius: 16px; white-space: pre; overflow: hidden; box-shadow: 0 18px 44px rgba(18, 18, 86, 0.25); position: relative; }
.code[data-file] { padding-top: 58px; }
.code[data-file]::before { content: attr(data-file); position: absolute; left: 0; right: 0; top: 0; height: 40px; padding-left: 92px; font: 500 15px/40px var(--mono); color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.07); }
.code[data-file]::after { content: ''; position: absolute; left: 22px; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: var(--peach); box-shadow: 17px 0 0 var(--gold), 34px 0 0 var(--lime); }
.code .ln { display: block; padding: 0 8px; margin: 0 -8px; border-radius: 6px; transition: background 0.35s, color 0.35s, opacity 0.35s; }
.code .ln.hl { background: rgba(171, 245, 249, 0.16); box-shadow: inset 4px 0 0 var(--cyan); }
.code.dimmable:has(.hl) .ln:not(.hl) { opacity: 0.42; }
.code .t-k { color: var(--cyan); }
.code .t-p { color: var(--gold); }
.code .t-v { color: var(--peach); }
.code .t-c { color: var(--grey-m); font-style: italic; }
.code .t-s { color: #c6e870; }
.code .t-n { color: var(--peach); }
.code.small { font-size: 19px; padding: 18px 22px; }
.code.tiny { font-size: 17px; padding: 16px 20px; }
.code.small[data-file], .code.tiny[data-file] { padding-top: 54px; }
.code.reveal { opacity: 0; transition: opacity 0.4s var(--ease); }
.code.reveal.on { opacity: 1; }
.code.reveal .ln { opacity: 0; transform: translateX(-12px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), background 0.35s; transition-delay: calc(var(--i) * 70ms); }
.code.reveal.on .ln { opacity: 1; transform: none; }
.code.light { background: var(--white); color: var(--black); box-shadow: var(--shadow); border: 1px solid rgba(18, 18, 86, 0.07); }
.code.light .t-c { color: var(--grey-d); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- video ------------------------------------------------------------------ */
.clip { position: absolute; border-radius: 22px; overflow: hidden; background: #222; border: 6px solid var(--white); box-shadow: 0 26px 60px rgba(18, 18, 86, 0.24); }
.dark .clip { border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.35); }
.clip video { width: 100%; height: 100%; object-fit: cover; display: block; }
.clip .label { position: absolute; left: 14px; top: 12px; font: 650 17px var(--mono); color: var(--white); background: rgba(18, 18, 86, 0.85); padding: 6px 12px; border-radius: 8px; }
.clip .label::before { content: '● '; color: var(--peach); }
.hud { position: absolute; right: 12px; top: 12px; display: flex; gap: 8px; font: 650 18px var(--mono); }
.hud span.hb { background: rgba(255, 255, 255, 0.94); color: var(--black); padding: 6px 12px; border-radius: 8px; }
.hud span.hb i { font-style: normal; color: var(--grey-d); font-weight: 400; margin-right: 6px; }
.bubble { position: absolute; font: 650 22px var(--sans); background: var(--white); color: var(--black); padding: 10px 16px; border-radius: 12px; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28); white-space: nowrap; border-left: 6px solid var(--blue); }
.bubble.orange { border-left-color: var(--orange); }
.bubble.teal { border-left-color: var(--teal); }
.bubble small { display: block; font: 500 16px var(--mono); color: var(--grey-d); margin-top: 2px; }

/* ---- animation primitives ---------------------------------------------------- */
.fx { opacity: 0; transition: opacity 0.7s var(--ease), transform 0.8s var(--ease), filter 0.6s; will-change: opacity, transform; }
.fx.up { transform: translateY(36px); }
.fx.down { transform: translateY(-30px); }
.fx.left { transform: translateX(-60px); }
.fx.right { transform: translateX(60px); }
.fx.zoom { transform: scale(0.92); }
.fx.pop { transform: scale(0.5); transition: opacity 0.4s, transform 0.6s var(--spring); }
.fx.blur { filter: blur(12px); }
.fx.on { opacity: 1; transform: none; filter: none; }
.fx.on.off { opacity: 0.22; }
.fx.on.off.gone { opacity: 0; }
[data-step].fx:not(.on) { transition-duration: 0.25s; }
.wipe { clip-path: inset(0 100% 0 0); transition: clip-path 1s var(--ease); }
.wipe.on { clip-path: inset(0 0 0 0); }
.wipe.on.off.gone { clip-path: inset(0 0 0 100%); }
svg .draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s var(--ease); }
svg .draw.on { stroke-dashoffset: 0; }
svg .draw.slow { transition-duration: 2.4s; }
.strike { position: relative; }
.strike::after { content: ''; position: absolute; left: -4px; right: -4px; top: 50%; height: 4px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease); }
.strike.on::after { transform: scaleX(1); }
.strike.on { opacity: 0.55; transition: opacity 0.6s; }
.flow { offset-rotate: 0deg; animation: flow 2.2s linear infinite; opacity: 0; }
.on > .flow, .flow.on { opacity: 1; }
@keyframes flow { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.grow { transform-origin: left; transform: scaleX(0); transition: transform 1s var(--ease); }
.grow.on { transform: scaleX(1); }

/* ---- slide-specific helpers -------------------------------------------------- */
.bgvideo { position: absolute; inset: 0; }
.bgvideo video { width: 100%; height: 100%; object-fit: cover; animation: drift 40s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.12) translate(-30px, -16px); } }
.veil { position: absolute; inset: 0; background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.97) 36%, rgba(255, 255, 255, 0.6) 58%, rgba(255, 255, 255, 0) 80%); }
.order { position: relative; width: 248px; border-radius: 16px; border: 1px solid rgba(18, 18, 86, 0.07); padding: 14px 18px 12px; background: var(--white); box-shadow: var(--shadow); }
.order .dish { display: inline; font: 700 22px var(--sans); }
.order .meta { font: 500 18px var(--mono); color: var(--grey-d); margin-top: 6px; }
.order .emoji { font-size: 26px; margin-right: 6px; vertical-align: -2px; }
.order .veil2 { position: absolute; inset: -1px; border-radius: 16px; background: rgba(255, 255, 255, 0.8); }
.order .otag { position: absolute; right: 12px; bottom: 12px; }
.order .ring { position: absolute; inset: -6px; border-radius: 20px; border: 4px solid var(--blue); }
.box { position: absolute; border-radius: 20px; background: var(--white); padding: 20px 20px 18px; text-align: center; box-shadow: var(--shadow); border: 1px solid rgba(18, 18, 86, 0.07); border-top: 6px solid var(--grey-m); }
.box h4 { font: 750 29px var(--sans); }
.box p { font: 400 21px/1.35 var(--sans); color: var(--grey-d); margin-top: 6px; }
.box.code-step { border-top-color: var(--sec); }
.box.code-step h4 { color: var(--sec); font-family: var(--mono); font-size: 27px; }
.step-n { position: absolute; width: 46px; height: 46px; border-radius: 50%; background: var(--sec); color: #fff; font: 750 22px/46px var(--sans); text-align: center; box-shadow: 0 6px 16px rgba(116, 99, 215, 0.4); }
.thing { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; }
.thing .icon { width: 54px; height: 54px; font-size: 30px; }
.thing b { font-size: 25px; }
.thing span { font-size: 18px; line-height: 1.35; color: var(--muted); }
.sym { display: flex; gap: 16px; align-items: flex-start; }
.sym p { font-size: 25px; line-height: 1.38; color: var(--text); }
svg .fx { transform-box: fill-box; transform-origin: center; }

.pdf-only { display: none; }