/* global React, Slide, Halftone, Sunburst, Eyebrow, Title, Hand, StampBig, CornerLabel, CarlSig, PageNum, TYPE_SCALE, SPACING */

const TOTAL = 12;

// ─── 01 — title ──────────────────────────────────────────
function S01() {
  return (
    <Slide surface="kraft" align="flex-start" justify="center">
      <Sunburst from="#FF6B35" opacity={0.10} x="78%" y="20%" />
      <Halftone opacity={0.12} size={7} />
      <CarlSig section="camp" />
      <div style={{ position: "relative", maxWidth: 1500 }}>
        <Eyebrow color="var(--accent-ember)" style={{ marginBottom: 32 }}>field guide · vol. 01</Eyebrow>
        <Title style={{ fontSize: 168, lineHeight: 0.88, color: "var(--text-moonlight)" }}>
          reinforcement<br/>learning,<br/>
          <span style={{ color: "var(--accent-ember)" }}>eli5.</span>
        </Title>
        <div style={{ marginTop: 48, display: "flex", alignItems: "center", gap: 28 }}>
          <Hand color="var(--accent-spark)" rotate={-2} size={42}>how machines learn by trying stuff →</Hand>
        </div>
      </div>
      <div style={{ position: "absolute", bottom: 80, right: 90, display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 14 }}>
        <StampBig text="campfire tier" color="var(--comic-varsity-red)" rotate={-6} />
        <StampBig text="no math required" color="var(--comic-jayhawk)" rotate={3} />
      </div>
      <PageNum n={1} total={TOTAL} />
    </Slide>
  );
}

// ─── 02 — a dog. a treat. a trick. ───────────────────────
function S02() {
  const Box = ({ word, color, rotate, big = false }) => (
    <div style={{
      flex: 1, background: "var(--comic-paper)",
      border: "5px solid var(--border-ink)", borderRadius: 14,
      boxShadow: "10px 10px 0 var(--border-ink)",
      transform: `rotate(${rotate}deg)`,
      padding: "56px 32px",
      display: "flex", flexDirection: "column",
      alignItems: "center", justifyContent: "center",
      position: "relative", overflow: "hidden",
    }}>
      <div style={{
        position: "absolute", inset: 0, opacity: 0.18,
        backgroundImage: "radial-gradient(circle, rgba(0,0,0,0.6) 1.2px, transparent 1.6px)",
        backgroundSize: "8px 8px",
      }} />
      <div style={{
        fontFamily: "var(--font-display)", fontSize: big ? 120 : 96,
        color, lineHeight: 1, letterSpacing: "-0.02em",
        textTransform: "uppercase", position: "relative",
      }}>{word}</div>
    </div>
  );
  return (
    <Slide surface="campfire" justify="center" align="center">
      <CarlSig section="camp" />
      <Eyebrow color="var(--accent-ember)" style={{ position: "absolute", top: 110, left: SPACING.paddingX }}>
        the whole idea, in three words
      </Eyebrow>
      <div style={{ display: "flex", gap: 56, width: "100%", marginTop: 40 }}>
        <Box word="dog." color="var(--comic-varsity-red)" rotate={-2.5} />
        <Box word="treat." color="var(--accent-ember)" rotate={1.5} />
        <Box word="trick." color="var(--comic-jayhawk)" rotate={-1} />
      </div>
      <Hand color="var(--accent-spark)" rotate={-1.5} size={40} style={{ marginTop: 56 }}>
        that's the whole field. seriously.
      </Hand>
      <PageNum n={2} total={TOTAL} />
    </Slide>
  );
}

// ─── 03 — the loop ───────────────────────────────────────
function S03() {
  const Node = ({ label, sub, color, x, y, size = 200 }) => (
    <div style={{
      position: "absolute", left: x, top: y, width: size, height: size,
      transform: "translate(-50%, -50%)",
      borderRadius: "50%", border: `4px solid ${color}`,
      background: "var(--bg-bark)",
      boxShadow: "6px 6px 0 var(--border-ink)",
      display: "flex", flexDirection: "column",
      alignItems: "center", justifyContent: "center",
    }}>
      <div style={{ fontFamily: "var(--font-display)", fontSize: 30, color, textTransform: "uppercase", letterSpacing: "0.04em" }}>{label}</div>
      <div style={{ fontFamily: "var(--font-hand)", fontSize: 22, color: "var(--text-secondary)", marginTop: 6 }}>{sub}</div>
    </div>
  );
  const Arrow = ({ from, to, label, labelPos, color = "var(--accent-spark)" }) => {
    const dx = to.x - from.x, dy = to.y - from.y;
    const len = Math.hypot(dx, dy);
    const ang = Math.atan2(dy, dx) * 180 / Math.PI;
    return (
      <div style={{
        position: "absolute", left: from.x, top: from.y,
        width: len - 110, height: 4, background: color,
        transform: `rotate(${ang}deg)`, transformOrigin: "0 50%",
        marginLeft: 55,
      }}>
        <div style={{
          position: "absolute", right: -2, top: -10,
          width: 0, height: 0, borderLeft: `22px solid ${color}`,
          borderTop: "12px solid transparent", borderBottom: "12px solid transparent",
        }} />
        {label && <div style={{
          position: "absolute", left: "50%", top: -36,
          transform: `translateX(-50%) rotate(${-ang}deg)`,
          fontFamily: "var(--font-hand)", fontSize: 28, color: "var(--accent-spark)",
          whiteSpace: "nowrap",
        }}>{label}</div>}
      </div>
    );
  };
  const A = { x: 540, y: 440 };  // agent
  const W = { x: 1380, y: 440 }; // world
  return (
    <Slide surface="campfire" justify="flex-start" align="flex-start">
      <CarlSig section="camp" />
      <Eyebrow style={{ marginBottom: 28 }}>03 · the loop</Eyebrow>
      <Title>everything is just a <span style={{ color: "var(--accent-ember)" }}>loop.</span></Title>
      <div style={{ position: "relative", width: "100%", height: 560, marginTop: 30 }}>
        <Node label="agent" sub="the learner" color="var(--accent-ember)" x={A.x} y={A.y} size={240} />
        <Node label="world" sub="everything else" color="var(--neon-cyan)" x={W.x} y={W.y} size={240} />
        {/* top arrow agent -> world */}
        <div style={{ position: "absolute", left: A.x + 120, top: A.y - 80, width: W.x - A.x - 240, height: 80 }}>
          <svg viewBox="0 0 600 80" preserveAspectRatio="none" style={{ width: "100%", height: "100%" }}>
            <path d="M 10 70 Q 300 -20 590 70" stroke="var(--accent-spark)" strokeWidth="5" fill="none" strokeLinecap="round" />
            <polygon points="585,60 600,72 583,80" fill="var(--accent-spark)" />
          </svg>
          <div style={{ position: "absolute", left: "50%", top: -30, transform: "translateX(-50%)", fontFamily: "var(--font-hand)", fontSize: 32, color: "var(--accent-spark)" }}>action →</div>
        </div>
        {/* bottom arrow world -> agent */}
        <div style={{ position: "absolute", left: A.x + 120, top: A.y + 40, width: W.x - A.x - 240, height: 100 }}>
          <svg viewBox="0 0 600 100" preserveAspectRatio="none" style={{ width: "100%", height: "100%" }}>
            <path d="M 590 10 Q 300 110 10 10" stroke="var(--accent-firefly)" strokeWidth="5" fill="none" strokeLinecap="round" />
            <polygon points="20,0 5,12 22,20" fill="var(--accent-firefly)" />
          </svg>
          <div style={{ position: "absolute", left: "50%", top: 70, transform: "translateX(-50%)", fontFamily: "var(--font-hand)", fontSize: 32, color: "var(--accent-firefly)" }}>← reward + new state</div>
        </div>
      </div>
      <div style={{ position: "absolute", bottom: 96, left: SPACING.paddingX, fontFamily: "var(--font-journal)", fontSize: 26, color: "var(--comic-kraft)" }}>
        repeat ten thousand times. that's it.
      </div>
      <PageNum n={3} total={TOTAL} />
    </Slide>
  );
}

// ─── 04 — the cast ───────────────────────────────────────
function S04() {
  const Card = ({ rotate, name, role, glyph, color }) => (
    <div style={{
      flex: 1, background: "var(--bg-bark)",
      border: "4px solid var(--border-ink)", borderRadius: 16,
      boxShadow: "8px 8px 0 var(--border-ink)",
      transform: `rotate(${rotate}deg)`,
      padding: "44px 36px",
      display: "flex", flexDirection: "column", gap: 20,
      position: "relative",
    }}>
      <div style={{
        width: 88, height: 88, borderRadius: "50%",
        border: `4px solid ${color}`, color,
        display: "flex", alignItems: "center", justifyContent: "center",
        fontFamily: "var(--font-camp)", fontSize: 42,
        background: "var(--bg-deep-forest)",
      }}>{glyph}</div>
      <div style={{
        fontFamily: "var(--font-display)", fontSize: 44,
        color, textTransform: "lowercase", letterSpacing: "-0.01em",
      }}>{name}</div>
      <div style={{ fontFamily: "var(--font-body)", fontSize: 28, color: "var(--text-moonlight)", lineHeight: 1.3 }}>{role}</div>
    </div>
  );
  return (
    <Slide surface="campfire" justify="flex-start">
      <CarlSig section="camp" />
      <Eyebrow style={{ marginBottom: 28 }}>04 · the cast</Eyebrow>
      <Title>five characters. <span style={{ color: "var(--accent-ember)" }}>that's all.</span></Title>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 32, marginTop: 60, width: "100%" }}>
        <Card rotate={-1.5} name="agent"   role="who's learning"      glyph="A" color="var(--accent-ember)" />
        <Card rotate={1}    name="state"   role="what's happening now" glyph="S" color="var(--neon-cyan)" />
        <Card rotate={-0.8} name="action"  role="what it does next"    glyph="→" color="var(--accent-spark)" />
        <Card rotate={1.2}  name="reward"  role="how good was that?"   glyph="+" color="var(--accent-firefly)" />
        <Card rotate={-1}   name="policy"  role="its strategy"         glyph="π" color="var(--neon-pink)" />
      </div>
      <PageNum n={4} total={TOTAL} />
    </Slide>
  );
}

// ─── 05 — trial and error, but smart ─────────────────────
function S05() {
  const Try = ({ n, attempt, result, good }) => (
    <div style={{
      display: "grid", gridTemplateColumns: "100px 1fr 1fr 60px",
      alignItems: "center", gap: 32,
      padding: "26px 36px",
      background: "var(--bg-undergrowth)",
      border: `1px solid ${good ? "rgba(168,255,176,0.30)" : "var(--border-subtle)"}`,
      borderRadius: 12,
      boxShadow: good ? "0 0 24px rgba(168,255,176,0.10)" : "none",
    }}>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 26, color: "var(--text-smoke)", letterSpacing: "0.1em" }}>try {String(n).padStart(2, "0")}</div>
      <div style={{ fontFamily: "var(--font-body)", fontSize: 30, color: "var(--text-moonlight)" }}>{attempt}</div>
      <div style={{ fontFamily: "var(--font-hand)", fontSize: 32, color: good ? "var(--accent-firefly)" : "var(--text-smoke)" }}>{result}</div>
      <div style={{
        fontFamily: "var(--font-camp)", fontSize: 28, fontWeight: 700,
        color: good ? "var(--accent-firefly)" : "var(--text-coal)",
        textAlign: "right",
      }}>{good ? "+1" : "−"}</div>
    </div>
  );
  return (
    <Slide surface="lab" justify="flex-start">
      <CarlSig section="lab" />
      <Eyebrow color="var(--neon-cyan)" style={{ marginBottom: 28 }}>05 · learning by doing</Eyebrow>
      <Title>do thing. see if it worked. <span style={{ color: "var(--neon-cyan)" }}>do more of what worked.</span></Title>
      <div style={{ display: "flex", flexDirection: "column", gap: 18, marginTop: 50, width: "100%", maxWidth: 1400 }}>
        <Try n={1} attempt="jump on the couch" result="got yelled at" good={false} />
        <Try n={2} attempt="bark at the door" result="nothing" good={false} />
        <Try n={3} attempt="sit when asked" result="got a treat" good={true} />
        <Try n={47} attempt="sit when asked" result="got a treat" good={true} />
        <Try n={312} attempt="sit when asked" result="treat. obviously." good={true} />
      </div>
      <div style={{ position: "absolute", bottom: 88, right: SPACING.paddingX, fontFamily: "var(--font-hand)", fontSize: 36, color: "var(--accent-spark)", transform: "rotate(-2deg)" }}>
        ↑ the &quot;learning&quot; is just this, scaled up.
      </div>
      <PageNum n={5} total={TOTAL} color="var(--text-smoke)" />
    </Slide>
  );
}

// ─── 06 — rewards (the tricky part) ──────────────────────
function S06() {
  return (
    <Slide surface="kraft" justify="center" align="flex-start">
      <Halftone opacity={0.10} size={7} />
      <CarlSig section="camp" />
      <Eyebrow style={{ marginBottom: 24 }}>06 · the tricky part</Eyebrow>
      <Title style={{ maxWidth: 1500 }}>
        rewards are the <span style={{ color: "var(--accent-ember)" }}>whole game</span> — and they're <span style={{ color: "var(--comic-varsity-red)" }}>weirdly hard.</span>
      </Title>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, marginTop: 80, width: "100%" }}>
        <div style={{
          background: "var(--comic-paper)", border: "5px solid var(--border-ink)",
          boxShadow: "8px 8px 0 var(--border-ink)", borderRadius: 14,
          padding: "40px 44px", transform: "rotate(-0.8deg)", color: "var(--comic-ink)",
        }}>
          <div style={{ fontFamily: "var(--font-camp)", fontSize: 22, color: "var(--comic-varsity-red)", letterSpacing: "0.15em", textTransform: "uppercase", marginBottom: 18 }}>say this</div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 56, color: "var(--comic-ink)", lineHeight: 1, textTransform: "lowercase" }}>"clean my room."</div>
          <div style={{ fontFamily: "var(--font-hand)", fontSize: 32, color: "var(--comic-varsity-red)", marginTop: 28, transform: "rotate(-1deg)" }}>get this:</div>
          <div style={{ fontFamily: "var(--font-journal)", fontSize: 28, color: "var(--comic-ink)", marginTop: 12, lineHeight: 1.4 }}>
            agent shoves everything in the closet.<br/>technically: room clean. ✓
          </div>
        </div>
        <div style={{
          background: "var(--bg-deep-forest)", border: "5px solid var(--border-ink)",
          boxShadow: "8px 8px 0 var(--border-ink)", borderRadius: 14,
          padding: "40px 44px", transform: "rotate(1.2deg)",
        }}>
          <div style={{ fontFamily: "var(--font-camp)", fontSize: 22, color: "var(--accent-spark)", letterSpacing: "0.15em", textTransform: "uppercase", marginBottom: 18 }}>the lesson</div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 48, color: "var(--text-moonlight)", lineHeight: 1.05, textTransform: "lowercase" }}>
            agents do <span style={{ color: "var(--accent-ember)" }}>exactly</span> what you reward —
          </div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 48, color: "var(--accent-firefly)", lineHeight: 1.05, marginTop: 12, textTransform: "lowercase" }}>
            not what you meant.
          </div>
        </div>
      </div>
      <PageNum n={6} total={TOTAL} />
    </Slide>
  );
}

// ─── 07 — exploration vs exploitation ────────────────────
function S07() {
  return (
    <Slide surface="kraft" justify="flex-start">
      <Sunburst from="#F2A93B" opacity={0.08} x="50%" y="50%" />
      <CarlSig section="camp" />
      <Eyebrow style={{ marginBottom: 28 }}>07 · the dilemma</Eyebrow>
      <Title>your <span style={{ color: "var(--accent-ember)" }}>favorite</span> restaurant — or the <span style={{ color: "var(--neon-cyan)" }}>new one?</span></Title>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 80px 1fr", gap: 0, marginTop: 80, alignItems: "stretch", width: "100%" }}>
        <div style={{
          background: "var(--bg-bark)", border: "5px solid var(--border-ink)",
          boxShadow: "8px 8px 0 var(--border-ink)", borderRadius: 16,
          padding: 52, transform: "rotate(-1deg)",
          display: "flex", flexDirection: "column", gap: 24,
        }}>
          <div style={{ fontFamily: "var(--font-camp)", fontSize: 28, color: "var(--accent-ember)", letterSpacing: "0.1em" }}>EXPLOIT</div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 64, color: "var(--text-moonlight)", lineHeight: 0.95, textTransform: "lowercase" }}>do what already works.</div>
          <div style={{ fontFamily: "var(--font-hand)", fontSize: 32, color: "var(--accent-spark)", marginTop: 8 }}>safe. boring. probably 8/10.</div>
        </div>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 80, color: "var(--comic-ink)", transform: "rotate(-4deg)" }}>vs.</div>
        </div>
        <div style={{
          background: "var(--bg-deep-forest)", border: "5px solid var(--border-ink)",
          boxShadow: "8px 8px 0 var(--border-ink)", borderRadius: 16,
          padding: 52, transform: "rotate(1deg)",
          display: "flex", flexDirection: "column", gap: 24,
        }}>
          <div style={{ fontFamily: "var(--font-camp)", fontSize: 28, color: "var(--neon-cyan)", letterSpacing: "0.1em" }}>EXPLORE</div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 64, color: "var(--text-moonlight)", lineHeight: 0.95, textTransform: "lowercase" }}>try something new.</div>
          <div style={{ fontFamily: "var(--font-hand)", fontSize: 32, color: "var(--neon-pink)", marginTop: 8 }}>could be 10/10. could be food poisoning.</div>
        </div>
      </div>
      <div style={{ position: "absolute", bottom: 88, left: "50%", transform: "translateX(-50%)", fontFamily: "var(--font-journal)", fontSize: 28, color: "var(--comic-ink)" }}>
        good agents do both. balancing the two is half the science.
      </div>
      <PageNum n={7} total={TOTAL} />
    </Slide>
  );
}

// ─── 08 — the policy ─────────────────────────────────────
function S08() {
  return (
    <Slide surface="lab" justify="center" align="flex-start">
      <CarlSig section="lab" />
      <Eyebrow color="var(--neon-cyan)" style={{ marginBottom: 28 }}>08 · the policy (π)</Eyebrow>
      <Title>the <span style={{ color: "var(--neon-cyan)" }}>policy</span> is just the agent's <span style={{ color: "var(--accent-ember)" }}>habits.</span></Title>
      <div style={{
        marginTop: 70, padding: "60px 72px",
        background: "linear-gradient(180deg, rgba(0,240,255,0.04), rgba(176,38,255,0.04))",
        border: "1px solid rgba(0,240,255,0.25)", borderRadius: 18,
        boxShadow: "0 0 40px rgba(0,240,255,0.08)",
        width: "100%", maxWidth: 1500,
      }}>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 28, color: "var(--text-smoke)", letterSpacing: "0.05em", marginBottom: 20 }}>
          π : state ⟶ action
        </div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 56, color: "var(--text-moonlight)", lineHeight: 1.05, textTransform: "lowercase", marginBottom: 36 }}>
          "if i see <span style={{ color: "var(--neon-cyan)" }}>this</span>, i'll do <span style={{ color: "var(--accent-ember)" }}>that</span>."
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 28, marginTop: 12 }}>
          {[
            ["see: doorbell",   "do: bark"],
            ["see: empty bowl", "do: sit by it"],
            ["see: vacuum",     "do: leave town"],
          ].map(([a, b], i) => (
            <div key={i} style={{
              padding: "20px 24px", background: "var(--bg-undergrowth)",
              border: "1px solid var(--border-subtle)", borderRadius: 10,
              fontFamily: "var(--font-mono)", fontSize: 22, color: "var(--text-moonlight)", lineHeight: 1.5,
            }}>
              <div style={{ color: "var(--neon-cyan)" }}>{a}</div>
              <div style={{ color: "var(--accent-ember)" }}>{b}</div>
            </div>
          ))}
        </div>
      </div>
      <div style={{ marginTop: 44, fontFamily: "var(--font-hand)", fontSize: 36, color: "var(--accent-spark)", transform: "rotate(-1deg)" }}>
        training = nudging the policy until those habits are good ones.
      </div>
      <PageNum n={8} total={TOTAL} color="var(--text-smoke)" />
    </Slide>
  );
}

// ─── 09 — how this trains an LLM ─────────────────────────
function S09() {
  const Step = ({ n, label, sub, color }) => (
    <div style={{
      flex: 1, padding: "32px 28px",
      background: "var(--bg-undergrowth)",
      border: `1px solid ${color}55`, borderRadius: 14,
      display: "flex", flexDirection: "column", gap: 14,
      position: "relative",
    }}>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 20, color, letterSpacing: "0.18em" }}>STEP {n}</div>
      <div style={{ fontFamily: "var(--font-display)", fontSize: 36, color: "var(--text-moonlight)", textTransform: "lowercase", lineHeight: 1.05 }}>{label}</div>
      <div style={{ fontFamily: "var(--font-body)", fontSize: 22, color: "var(--text-secondary)", lineHeight: 1.5 }}>{sub}</div>
    </div>
  );
  return (
    <Slide surface="lab" justify="flex-start">
      <CarlSig section="lab" />
      <Eyebrow color="var(--neon-cyan)" style={{ marginBottom: 28 }}>09 · rl on llms (rlhf, in plain words)</Eyebrow>
      <Title>same loop. <span style={{ color: "var(--neon-cyan)" }}>different dog.</span></Title>
      <div style={{ display: "flex", gap: 24, marginTop: 56, width: "100%", alignItems: "stretch" }}>
        <Step n="01" label="model writes two answers" sub="same prompt, two attempts." color="var(--neon-cyan)" />
        <div style={{ alignSelf: "center", color: "var(--text-smoke)", fontFamily: "var(--font-mono)", fontSize: 30 }}>→</div>
        <Step n="02" label="human picks the better one" sub="that's the &quot;treat&quot;." color="var(--accent-ember)" />
        <div style={{ alignSelf: "center", color: "var(--text-smoke)", fontFamily: "var(--font-mono)", fontSize: 30 }}>→</div>
        <Step n="03" label="model nudges its policy" sub="more like the picked one. less like the other." color="var(--accent-firefly)" />
        <div style={{ alignSelf: "center", color: "var(--text-smoke)", fontFamily: "var(--font-mono)", fontSize: 30 }}>→</div>
        <Step n="04" label="repeat. a lot." sub="millions of times. it works." color="var(--neon-pink)" />
      </div>
      <div style={{ marginTop: 64, fontFamily: "var(--font-hand)", fontSize: 38, color: "var(--accent-spark)", transform: "rotate(-1deg)" }}>
        agent = LLM. action = the next token. reward = "did a human (or another model) like this?"
      </div>
      <PageNum n={9} total={TOTAL} color="var(--text-smoke)" />
    </Slide>
  );
}

// ─── 10 — coherence ──────────────────────────────────────
function S10() {
  return (
    <Slide surface="lab" justify="center" align="flex-start">
      <CarlSig section="lab" />
      <Eyebrow color="var(--neon-pink)" style={{ marginBottom: 28 }}>10 · the catch</Eyebrow>
      <Title style={{ maxWidth: 1500 }}>
        push too hard on reward, and the model <span style={{ color: "var(--neon-pink)" }}>falls apart.</span>
      </Title>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, marginTop: 72, width: "100%" }}>
        <div style={{
          padding: "44px 48px", background: "var(--bg-undergrowth)",
          border: "1px solid rgba(255,20,147,0.30)", borderRadius: 16,
        }}>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 22, color: "var(--neon-pink)", letterSpacing: "0.18em", marginBottom: 18 }}>REWARD HACKING</div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 40, color: "var(--text-moonlight)", lineHeight: 1.1, textTransform: "lowercase" }}>
            it games the metric. high score, dumb behavior.
          </div>
        </div>
        <div style={{
          padding: "44px 48px", background: "var(--bg-undergrowth)",
          border: "1px solid rgba(255,20,147,0.30)", borderRadius: 16,
        }}>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 22, color: "var(--neon-pink)", letterSpacing: "0.18em", marginBottom: 18 }}>MODE COLLAPSE</div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 40, color: "var(--text-moonlight)", lineHeight: 1.1, textTransform: "lowercase" }}>
            it forgets how to do anything except the rewarded thing.
          </div>
        </div>
      </div>
      <div style={{
        marginTop: 60, padding: "32px 44px",
        background: "linear-gradient(90deg, rgba(168,255,176,0.08), transparent)",
        borderLeft: "4px solid var(--accent-firefly)", borderRadius: 4,
        width: "100%", maxWidth: 1500,
      }}>
        <div style={{ fontFamily: "var(--font-hand)", fontSize: 34, color: "var(--accent-firefly)", lineHeight: 1.3 }}>
          → the fix: reward the right answer, <em>and</em> reward staying coherent. don't break the model to win the test.
        </div>
      </div>
      <PageNum n={10} total={TOTAL} color="var(--text-smoke)" />
    </Slide>
  );
}

// ─── 11 — carl.camp in one picture ───────────────────────
function S11() {
  const Pin = ({ left, top, label, sub, color, rotate = 0 }) => (
    <div style={{
      position: "absolute", left, top, transform: `translate(-50%, -50%) rotate(${rotate}deg)`,
      display: "flex", flexDirection: "column", alignItems: "center", gap: 10,
    }}>
      <div style={{
        width: 24, height: 24, borderRadius: "50%",
        background: color, border: "3px solid var(--border-ink)",
        boxShadow: "3px 3px 0 var(--border-ink)",
      }} />
      <div style={{
        background: "var(--comic-paper)", border: "3px solid var(--border-ink)",
        boxShadow: "4px 4px 0 var(--border-ink)", borderRadius: 6,
        padding: "10px 18px", color: "var(--comic-ink)",
      }}>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 22, color, textTransform: "uppercase", letterSpacing: "0.06em" }}>{label}</div>
        <div style={{ fontFamily: "var(--font-journal)", fontSize: 18, color: "var(--comic-ink)", marginTop: 2 }}>{sub}</div>
      </div>
    </div>
  );
  return (
    <Slide surface="kraft" justify="flex-start">
      <Halftone opacity={0.10} size={7} />
      <CarlSig section="camp" />
      <Eyebrow style={{ marginBottom: 28 }}>11 · where carl.camp fits</Eyebrow>
      <Title>a whole camp for the <span style={{ color: "var(--accent-ember)" }}>training loop.</span></Title>
      <div style={{
        position: "relative", marginTop: 50, width: "100%", height: 540,
        background: "var(--bg-bark)", border: "4px solid var(--border-ink)",
        boxShadow: "10px 10px 0 var(--border-ink)", borderRadius: 18,
        overflow: "hidden",
      }}>
        <Halftone opacity={0.14} size={9} />
        <Sunburst from="#FF6B35" opacity={0.06} x="50%" y="50%" />
        {/* dotted path */}
        <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }} viewBox="0 0 1660 540" preserveAspectRatio="none">
          <path d="M 200 380 Q 460 120, 760 280 T 1280 200 T 1500 380" stroke="var(--accent-spark)" strokeWidth="4" fill="none" strokeDasharray="8 14" />
        </svg>
        <Pin left="200px" top="380px" label="grounds" sub="train agents" color="var(--accent-spark)" rotate={-3} />
        <Pin left="640px" top="200px" label="lab"     sub="tune coherence" color="var(--neon-cyan)" rotate={2} />
        <Pin left="1080px" top="240px" label="campfire" sub="watch & share"  color="var(--accent-ember)" rotate={-2} />
        <Pin left="1480px" top="380px" label="cabin"   sub="your agents" color="var(--neon-pink)" rotate={3} />
      </div>
      <PageNum n={11} total={TOTAL} />
    </Slide>
  );
}

// ─── 12 — start training ─────────────────────────────────
function S12() {
  return (
    <Slide surface="kraft" justify="center" align="center">
      <Sunburst from="#FF6B35" opacity={0.14} x="50%" y="50%" />
      <Halftone opacity={0.10} size={7} />
      <CarlSig section="camp" />
      <div style={{ textAlign: "center", maxWidth: 1500 }}>
        <Eyebrow style={{ marginBottom: 36, justifyContent: "center", display: "flex" }}>that's it. that's reinforcement learning.</Eyebrow>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 200, lineHeight: 0.9, color: "var(--text-moonlight)", letterSpacing: "-0.03em", textTransform: "lowercase" }}>
          try.<br/>
          <span style={{ color: "var(--accent-ember)" }}>reward.</span><br/>
          repeat.
        </div>
        <div style={{ marginTop: 56, display: "flex", justifyContent: "center", gap: 24 }}>
          <StampBig text="now go train one" color="var(--comic-varsity-red)" rotate={-4} />
          <StampBig text="carl.camp" color="var(--comic-jayhawk)" rotate={3} />
        </div>
      </div>
      <PageNum n={12} total={TOTAL} />
    </Slide>
  );
}

window.SLIDES = [S01, S02, S03, S04, S05, S06, S07, S08, S09, S10, S11, S12];
