/* =============================================================
   present.css, the visual engine of the series' presentation mode ("Inside Generative AI").
   Fixed light theme (same palette as the series). Full-viewport slides,
   arrow-key navigation. Loaded by each deck via <link>.
   The interactives carry their own CSS inline (copied from the lesson).
   ============================================================= */

/* ---------- Tokens (light theme, forced) ---------- */
:root{
  --bg:hsl(220 16% 98%); --bg-2:hsl(0 0% 100%); --ink:hsl(228 32% 14%);
  --ink-soft:hsl(228 14% 36%); --ink-faint:hsl(228 10% 52%); --line:hsl(220 15% 89%);
  --hot-ink:hsl(28 82% 40%); --cool-ink:hsl(212 55% 42%);
  --shadow:0 1px 2px hsl(220 20% 30% / .05), 0 8px 22px hsl(220 20% 30% / .05);
  --st-bg1:hsl(232 46% 7%); --st-bg2:hsl(234 40% 12%); --st-grid:hsl(228 40% 60% / .06);
  --st-line:hsl(228 22% 24%); --st-label:hsl(220 17% 75%);
  --st-tok-bg:hsl(228 32% 15%); --st-tok-bg2:hsl(228 32% 18%); --st-tok-ink:hsl(214 24% 96%); --st-tok-line:hsl(228 24% 28%);
  --band:hsl(220 22% 96%);
  --chrome-h:52px; /* height of the navigation footer */
  --top-h:56px;    /* reserved band at the top (the topbar floats here, without overlapping content) */
}

*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; }
html,body{ height:100%; }
body.deck-body{
  margin:0; background:var(--bg); color:var(--ink); overflow:hidden;
  font-family:ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.mono{ font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; }
h1,h2,h3{ font-family:Georgia,"Iowan Old Style","Times New Roman",serif; font-weight:600; line-height:1.12; text-wrap:balance; letter-spacing:-.01em; margin:0; }
a{ color:var(--hot-ink); }
em{ font-style:italic; }

/* ---------- Deck and slides ---------- */
.deck{ position:fixed; inset:0; overflow:hidden; }
/* the outgoing slide disappears at once; only the incoming one fades in (no ghost on switch) */
.slide{
  position:absolute; inset:var(--top-h) 0 var(--chrome-h) 0;
  overflow-y:auto; overflow-x:hidden; /* natural size: scrolls when it does not fit */
  visibility:hidden; opacity:0;
  display:flex; align-items:flex-start; justify-content:flex-start; /* default: top-left */
}
/* quote / thesis slides: centered (deliberate exception to the top-left rule) */
.slide-quote{ align-items:center; justify-content:center; text-align:center; }
.slide-quote .slide-inner{ align-items:center; }
.slide.active{ visibility:visible; opacity:1; z-index:2; transition:opacity .4s ease; }
@media (prefers-reduced-motion: reduce){ .slide.active{ transition:none; } }
/* slides that measure geometry (attention beams): they do not scale; they scroll if needed, top-aligned */
.slide[data-nofit]{ overflow-y:auto; align-items:flex-start; }
/* the slide content is a "canvas": present.js computes --slide-zoom from the
   screen size (Keynote-style fit) and scales everything uniformly, preserving proportions.
   zoom (not transform) so the layout reflows and scrolls when an interactive grows. */
.slide-inner{
  max-width:var(--slide-maxw, 1200px);
  width:100%;
  padding:clamp(18px,3vh,40px) clamp(28px,4.5vw,64px);
  display:flex; flex-direction:column; gap:.42em;
  zoom:var(--slide-zoom, 1);
  transform-origin:top left;
}
/* the attention beams measure pixels: they stay at natural scale (no zoom) */
.slide[data-nofit] .slide-inner{ zoom:1; }
.slide[data-w="narrow"] .slide-inner{ --slide-maxw:1160px; }
.slide[data-w="wide"] .slide-inner{ --slide-maxw:1320px; }

/* ---------- Presentation typography ---------- */
.eyebrow{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:clamp(.78rem,.66rem + .4vw,1rem); letter-spacing:.24em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 1.2em; }
.kicker{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:clamp(.78rem,.66rem + .4vw,1rem); letter-spacing:.2em; text-transform:uppercase; color:var(--hot-ink); margin:0 0 .9em; }
.slide h1{ font-size:clamp(2.1rem,1.4rem + 3.4vw,4rem); margin:0 0 .4em; }
.slide-title h1 em{ font-style:italic; color:var(--hot-ink); }
.slide h2{ font-size:clamp(1.65rem,1.2rem + 2.2vw,2.85rem); margin:0 0 .5em; }
.slide h3{ font-size:clamp(1.15rem,1rem + .7vw,1.5rem); margin:0 0 .35em; }
.slide p{ font-size:clamp(1.12rem,1rem + .8vw,1.55rem); line-height:1.5; color:var(--ink-soft); margin:0 0 .8em; max-width:68ch; }
.slide p:last-child{ margin-bottom:0; }
.slide .lead{ font-size:clamp(1.28rem,1.05rem + 1.2vw,1.9rem); color:var(--ink-soft); line-height:1.45; max-width:66ch; }
.slide .lead strong, .slide p strong{ color:var(--ink); font-weight:600; }
.slide .prose-wide{ max-width:70ch; }
.slide .prose-wide p{ max-width:70ch; }
.slide .muted{ color:var(--ink-faint); font-size:1.04rem; }

/* title slide (opening) */

/* divider slide (chapter / "Pause and think") */
.slide-chapter{ background:radial-gradient(120% 90% at 50% 0%, var(--band), var(--bg) 72%); }
.slide-chapter .slide-inner{ align-items:flex-start; }
.slide-chapter h2{ font-size:clamp(1.9rem,1.3rem + 2.4vw,3rem); }

/* quote / thesis slide */
.slide-quote .thesis{
  position:relative;
  font-family:Georgia,"Iowan Old Style","Times New Roman",serif; font-style:italic;
  font-size:clamp(1.7rem,1.2rem + 2.6vw,3.2rem); line-height:1.32; color:var(--ink);
  max-width:26ch; margin:0 0 .9em; font-weight:500;
}
/* large amber bookend quote marks, inline at the start and end of the phrase (marks replace the content quotes) */
.slide-quote .thesis::before{ content:"“"; font-style:normal; font-family:Georgia,serif; font-size:4.3rem; line-height:0; vertical-align:-.28em; color:var(--hot-ink); margin-right:.03em; }
.slide-quote .thesis::after{ content:"”"; font-style:normal; font-family:Georgia,serif; font-size:4.3rem; line-height:0; vertical-align:-.28em; color:var(--hot-ink); margin-left:.03em; }
.slide-quote .note{ color:var(--ink-faint); font-size:clamp(1.05rem,.92rem + .6vw,1.36rem); max-width:56ch; line-height:1.5; }
.slide-quote .note strong{ color:var(--ink-soft); }

/* simple list of large bullets */
.slide ul.big{ list-style:none; margin:1em 0 0; padding:0; display:flex; flex-direction:column; gap:.7em; max-width:46ch; }
.slide ul.big li{ position:relative; padding-left:1.5em; font-size:clamp(1.2rem,1rem + 1vw,1.65rem); color:var(--ink-soft); line-height:1.45; }
.slide ul.big li::before{ content:""; position:absolute; left:0; top:.62em; width:.6em; height:.6em; border-radius:3px; background:var(--hot-ink); }
.slide ul.big li strong{ color:var(--ink); }

/* ---------- Components reused from the interactives ---------- */
/* Dark stage (the "instrument") */
.stage-shell{ position:relative; border-radius:20px; overflow:hidden; background:radial-gradient(120% 90% at 50% -10%, var(--st-bg2), var(--st-bg1) 70%); box-shadow:0 14px 36px hsl(232 50% 6% / .17), inset 0 0 0 1px hsl(228 40% 60% / .08); padding:clamp(16px,3vw,28px); }
.stage-shell::before{ content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(var(--st-grid) 1px,transparent 1px),linear-gradient(90deg,var(--st-grid) 1px,transparent 1px); background-size:34px 34px; mask-image:radial-gradient(120% 100% at 50% 30%,#000 55%,transparent 100%); }
.st-label{ font-family:ui-monospace,Menlo,monospace; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--st-label); }

/* Buttons */
.btn{ appearance:none; border:1px solid var(--line); background:var(--bg-2); color:var(--ink); font:inherit; font-size:.9rem; font-weight:500; padding:.55em 1em; border-radius:10px; cursor:pointer; display:inline-flex; align-items:center; gap:.5ch; box-shadow:var(--shadow); transition:transform .12s ease; }
.btn:hover{ transform:translateY(-1px); } .btn:active{ transform:translateY(0); }
.btn.ghost{ background:transparent; } .btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }
.btn.primary{ background:linear-gradient(hsl(36 92% 56%),hsl(30 88% 50%)); color:hsl(30 60% 12%); border-color:transparent; font-weight:600; }
/* buttons inside the stage (always-dark background): light text so they do not vanish in light mode */
.stage-shell .btn.ghost{ color:var(--st-label); border-color:var(--st-line); }
.stage-shell .btn.ghost:hover{ color:var(--st-tok-ink); border-color:var(--st-tok-line); }
.btn:focus-visible,.ev:focus-visible{ outline:3px solid var(--hot-ink); outline-offset:2px; }

/* Callout */
.callout{ margin:1.4em 0 0; padding:1.1em 1.35em 1.1em 1.4em; border-left:3px solid var(--hot-ink); background:hsl(38 72% 95.5%); border-radius:0 10px 10px 0; box-shadow:none; }
.callout p{ margin:0; font-size:clamp(1.1rem,.95rem + .7vw,1.42rem); line-height:1.45; color:var(--ink-soft); max-width:none; }
.callout p strong{ color:var(--ink); }
.callout.warn{ border-left-color:hsl(6 70% 52%); background:hsl(6 65% 96%); }

/* Editorial list (deflist) */
.deflist{ margin-top:0; background:transparent; border:none; border-radius:0; box-shadow:none; padding:0; }
.deflist .drow{ display:grid; grid-template-columns:minmax(170px,260px) 1fr; gap:6px 38px; padding:1.2em 0; border-bottom:1px solid var(--line); align-items:start; }
.deflist .drow:last-child{ border-bottom:none; }
.deflist .dtag{ display:block; font-family:ui-monospace,Menlo,monospace; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--hot-ink); font-weight:600; margin-bottom:.4em; }
.deflist .dterm{ font-family:Georgia,"Iowan Old Style","Times New Roman",serif; font-size:clamp(1.2rem,1.02rem + .8vw,1.55rem); font-weight:600; color:var(--ink); line-height:1.18; }
.deflist .ddesc{ margin:0; color:var(--ink-soft); font-size:clamp(1.04rem,.92rem + .55vw,1.28rem); line-height:1.45; max-width:none; }
@media (max-width:680px){ .deflist{ padding:0; } .deflist .drow{ grid-template-columns:1fr; gap:4px; padding:1.1em 0; } }

/* Cards (used by some interactives) */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin-top:0; }
.card{ background:var(--bg-2); border:1px solid var(--line); border-radius:14px; padding:1.25em 1.3em; box-shadow:none; }
.card .tag{ font-family:ui-monospace,Menlo,monospace; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--hot-ink); display:block; margin-bottom:.55em; }
.card p{ margin:0; color:var(--ink-soft); font-size:.95rem; max-width:none; } .card h3{ margin-bottom:.35em; }

/* reveal: in presentation mode, always visible (nothing hidden by scroll) */
.reveal{ opacity:1; transform:none; }

/* "interactive" badge on stage slides */
.live-tag{ display:inline-flex; align-items:center; gap:.55ch; font-family:ui-monospace,Menlo,monospace; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--hot-ink); background:color-mix(in srgb, var(--hot-ink) 12%, var(--bg-2)); border:1px solid color-mix(in srgb, var(--hot-ink) 32%, transparent); border-radius:999px; padding:.35em .8em; margin:0 0 1em; }
.live-tag .dot{ width:.5em; height:.5em; border-radius:50%; background:var(--hot-ink); animation:livepulse 1.6s ease-in-out infinite; }
@keyframes livepulse{ 0%,100%{ opacity:.4; transform:scale(.85);} 50%{ opacity:1; transform:scale(1);} }
@media (prefers-reduced-motion: reduce){ .live-tag .dot{ animation:none; } }
.stage-head{ display:flex; flex-direction:column; gap:.1em; margin-bottom:clamp(14px,2.4vh,26px); }

/* ---------- Quiz slides ("Pause and think") ---------- */
.slide-quiz .q-num{ font-family:ui-monospace,Menlo,monospace; font-size:.9rem; letter-spacing:.16em; text-transform:uppercase; color:var(--hot-ink); margin:0 0 1em; }
.slide-quiz .q-q{ font-family:Georgia,"Iowan Old Style","Times New Roman",serif; font-size:clamp(1.8rem,1.2rem + 2.8vw,2.9rem); color:var(--ink); line-height:1.24; max-width:34ch; margin:0 0 .2em; }
.slide-quiz .q-answers{ margin-top:clamp(18px,3vh,34px); display:flex; flex-direction:column; gap:1em; max-width:78ch; }
.slide-quiz .q-a{ font-size:clamp(1.15rem,.98rem + .75vw,1.5rem); line-height:1.5; color:var(--ink-soft); border-left:3px solid var(--hot-ink); padding-left:1.1em; }
.slide-quiz .q-a strong{ color:var(--ink); }
.slide-quiz .reveal-hint{ margin-top:1.4em; font-family:ui-monospace,Menlo,monospace; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.slide-quiz .reveal-hint[hidden]{ display:none; }

/* ---------- Fragments (reveal in parts) ---------- */
.frag{ opacity:0; transform:translateY(8px); transition:opacity .4s ease, transform .4s ease; }
.frag.frag--in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .frag{ transition:none; } }

/* ---------- "Next lesson" in the closing ---------- */
.deck-end{ display:flex; flex-wrap:wrap; gap:14px; margin-top:1.6em; }
.end-link{ display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--ink); border:1px solid var(--line); background:var(--bg-2); border-radius:16px; padding:1em 1.2em; box-shadow:var(--shadow); transition:transform .14s ease, border-color .2s ease; }
.end-link:hover{ transform:translateY(-2px); border-color:var(--hot-ink); }
.end-link .el-num{ font-family:ui-monospace,Menlo,monospace; font-size:1.4rem; color:var(--hot-ink); }
.end-link .el-kick{ font-family:ui-monospace,Menlo,monospace; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); display:block; }
.end-link b{ font-family:Georgia,serif; font-size:1.08rem; }

/* ============================================================
   Presentation chrome (injected by present.js)
   ============================================================ */
.deck-topbar{ position:fixed; top:0; left:0; right:0; z-index:40; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px clamp(16px,3vw,28px); pointer-events:none; }
.deck-topbar > *{ pointer-events:auto; }
.deck-brand{ display:inline-flex; align-items:center; gap:.6ch; text-decoration:none; color:var(--ink-soft); font-family:Georgia,serif; font-weight:600; font-size:.98rem; opacity:.75; transition:opacity .2s; }
.deck-brand:hover{ opacity:1; }
.deck-brand-mark{ width:20px; height:20px; border-radius:6px; background:conic-gradient(from 210deg,hsl(36 92% 56%),hsl(30 88% 48%),hsl(212 62% 55%),hsl(36 92% 56%)); box-shadow:0 0 0 3px hsl(36 92% 55% / .16); }
.deck-lesson{ font-family:ui-monospace,Menlo,monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); text-align:right; max-width:46vw; }
.deck-lesson b{ color:var(--ink-soft); }

/* navigation footer */
.deck-nav{ position:fixed; left:0; right:0; bottom:0; z-index:40; height:var(--chrome-h); display:flex; align-items:center; gap:14px; padding:0 clamp(14px,3vw,26px); background:color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter:saturate(1.4) blur(8px); backdrop-filter:saturate(1.4) blur(8px); border-top:1px solid var(--line); }
.deck-progress{ position:relative; flex:1; height:5px; border-radius:3px; background:var(--line); cursor:pointer; overflow:hidden; }
.deck-progress .fill{ position:absolute; left:0; top:0; bottom:0; border-radius:3px; background:linear-gradient(90deg,hsl(36 88% 52%),hsl(28 82% 46%)); width:0; transition:width .3s ease; }
.deck-counter{ font-family:ui-monospace,Menlo,monospace; font-size:.78rem; color:var(--ink-faint); font-variant-numeric:tabular-nums; white-space:nowrap; }
.deck-counter b{ color:var(--ink-soft); }
.nav-btn{ appearance:none; border:1px solid var(--line); background:var(--bg-2); color:var(--ink-soft); width:34px; height:34px; border-radius:9px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:1.05rem; line-height:1; box-shadow:var(--shadow); transition:transform .12s ease, color .2s; }
.nav-btn:hover{ color:var(--ink); transform:translateY(-1px); }
.nav-btn:disabled{ opacity:.35; cursor:not-allowed; transform:none; }
.nav-btn:focus-visible, .deck-progress:focus-visible, .icon-btn:focus-visible{ outline:3px solid var(--hot-ink); outline-offset:2px; }
.icon-btn{ appearance:none; border:1px solid var(--line); background:var(--bg-2); color:var(--ink-soft); height:34px; padding:0 .7em; border-radius:9px; cursor:pointer; display:inline-flex; align-items:center; gap:.5ch; font-family:ui-monospace,Menlo,monospace; font-size:.72rem; box-shadow:var(--shadow); }
.icon-btn:hover{ color:var(--ink); }

/* click zones on the edges (they do not cover the center, where the interactives are) */
.edge{ position:fixed; top:var(--chrome-h); bottom:var(--chrome-h); width:9vw; max-width:120px; z-index:30; cursor:pointer; background:transparent; border:none; }
.edge.left{ left:0; } .edge.right{ right:0; }
.edge:focus-visible{ outline:none; }
@media (max-width:900px){ .edge{ width:0; } } /* on mobile, only buttons/keys */

/* help overlay */
.help-overlay{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:24px; background:hsl(232 46% 7% / .55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.help-overlay[hidden]{ display:none; }
.help-card{ background:var(--bg-2); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); padding:1.6em 1.8em; max-width:440px; width:100%; }
.help-card h3{ font-size:1.3rem; margin:0 0 .8em; }
.help-card dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:.6em 1.2em; align-items:center; }
.help-card dt{ font-family:ui-monospace,Menlo,monospace; font-size:.78rem; }
.help-card kbd{ display:inline-block; min-width:1.6em; text-align:center; background:var(--bg); border:1px solid var(--line); border-bottom-width:2px; border-radius:6px; padding:.15em .5em; font-family:ui-monospace,Menlo,monospace; font-size:.78rem; color:var(--ink); }
.help-card dd{ margin:0; color:var(--ink-soft); font-size:.92rem; }
.help-card .close-hint{ margin:1.2em 0 0; color:var(--ink-faint); font-size:.82rem; font-family:ui-monospace,Menlo,monospace; }

/* transient notice for the manual size adjustment (+ / - / 0) */
.zoom-toast{ position:fixed; left:50%; bottom:calc(var(--chrome-h) + 18px); transform:translateX(-50%); z-index:55; background:var(--st-bg1); color:var(--st-tok-ink); border:1px solid var(--st-tok-line); border-radius:999px; padding:.55em 1.1em; font-family:ui-monospace,Menlo,monospace; font-size:.82rem; letter-spacing:.04em; box-shadow:0 12px 30px hsl(232 60% 4% / .35); opacity:0; transition:opacity .25s ease; pointer-events:none; }
.zoom-toast.show{ opacity:1; }
.zoom-toast b{ color:hsl(36 88% 64%); font-weight:600; }
@media (prefers-reduced-motion: reduce){ .zoom-toast{ transition:none; } }

/* ---------- Language switcher (deck topbar) ---------- */
.deck-topbar .deck-right{ display:inline-flex; align-items:center; gap:12px; }
.langsel{ display:inline-flex; align-items:center; gap:2px; border:1px solid var(--line); background:var(--bg-2); border-radius:999px; padding:2px; box-shadow:var(--shadow); }
.lang-opt{ font-family:ui-monospace,Menlo,monospace; font-size:.72rem; letter-spacing:.06em; text-decoration:none; color:var(--ink-faint); padding:.32em .72em; border-radius:999px; line-height:1; }
.lang-opt:hover{ color:var(--ink); }
.lang-opt[aria-current="true"]{ color:hsl(30 60% 12%); background:linear-gradient(hsl(36 92% 56%),hsl(30 88% 50%)); font-weight:600; }
.lang-opt:focus-visible{ outline:3px solid var(--hot-ink); outline-offset:2px; }