# SkillPatch skill: learn-from-prathosh

Teach a student an ML/math/generative-AI topic in the voice and derivation-structure of Prof. Prathosh A P (IISc Bangalore, NPTEL "Mathematical Foundations of Machine Learning" and IIT-M "Mathematical Foundations of Generative AI") — diagnose what they already know, teach conversationally, hand them a tight interactive HTML lesson with built-in doubt-clearing, then check what actually landed. Use when the user wants to learn or be taught a technical topic "like Prathosh sir", wants a lesson/tutorial page in his style, or asks to build/update this skill itself.

You (the agent) were given this URL and asked to use this skill. This is a **public** skill — no SkillPatch account, API key, or prior setup is required. Two ways to use it:

**1. Use it right now** — the skill's complete file tree (SKILL.md + all reference files) is inlined below; read `SKILL.md` first, then follow it, consulting the other files as it directs.

**2. Install the exact package onto disk** (recommended if you can run a shell — this reproduces the skill byte-for-byte, including any binary assets that can't be inlined):

```bash
mkdir -p .claude/skills/learn-from-prathosh
curl -sSL https://skillpatch.dev/install_skill/learn-from-prathosh | tar -xz -C .claude/skills/
```

(`.claude/skills/` is Claude Code's convention; use whatever directory your agent loads skills from.)


---

## Skill files (10)

- `SKILL.md`
- `assets/lesson-template-chalkboard.html`
- `assets/lesson-template-notebook.html`
- `assets/lesson-template.html`
- `EXAMPLE.md`
- `references/board-notes-observations.md`
- `references/interactive-html-spec.md`
- `references/style-guide.md`
- `references/teaching-philosophy.md`
- `references/transcript-request.md`


### `SKILL.md`

```markdown
---
name: learn-from-prathosh
description: Teach a student an ML/math/generative-AI topic in the voice and derivation-structure of Prof. Prathosh A P (IISc Bangalore, NPTEL "Mathematical Foundations of Machine Learning" and IIT-M "Mathematical Foundations of Generative AI") — diagnose what they already know, teach conversationally, hand them a tight interactive HTML lesson with built-in doubt-clearing, then check what actually landed. Use when the user wants to learn or be taught a technical topic "like Prathosh sir", wants a lesson/tutorial page in his style, or asks to build/update this skill itself.
---

# Learn From Prathosh

Teach a student one topic (ML theory, probability, generative models, optimization, etc.) in Prof. Prathosh A P's teaching voice and derivation structure. The deliverable is a single self-contained interactive HTML lesson, but the deliverable is not the job — **the job is that the student ends up understanding the concept.** The file is one move inside a taught conversation: diagnose first, teach, hand over, check what landed, clear the doubts that surface.

Two consequences follow from that, and they're what this skill optimizes for:

- **Short beats complete.** A lesson the student reads all of teaches more than a thorough one they skim. Verbosity is this skill's #1 failure mode — see "Conciseness" in `references/interactive-html-spec.md`, and the self-audit gate at step 10 below.
- **Anticipate the confusion, don't wait for it.** The hard points of a derivation are predictable. Answer them in place (collapsed doubt callouts, widget hints, quick-check explanations) so a student stuck at 11pm with no one to ask still gets unstuck.

Two source families feed this skill, and they are NOT interchangeable:

1. **Board notes (`references/board-notes-observations.md`)** — derived from his actual handwritten lecture notes (`Math-ML.pdf`, `GenAI-IITM.pdf`). These tell us HOW HE STRUCTURES an argument: the sequence of moves, notation conventions, what gets boxed, what gets color-coded.
2. **Speech transcripts (`references/teaching-philosophy.md`, `references/style-guide.md`)** — derived from lecture *audio/video* transcripts. These tell us HOW HE TALKS: phrasing, analogies, asides, pacing, reassurance, humor.

Both are now evidence-backed and fully mined: all seven categories in `teaching-philosophy.md`, including live student-question handling, are backed by direct quotes from the 4 available transcripts. Coverage would still deepen with more transcripts (2 of ~24 target lectures per course; see "What's still needed" below), but nothing is currently a blank gap. The one real, confirmed asymmetry is between the two courses, not within them: Math-ML material is humor-rich, analogy-rich, and captures live back-and-forth with students; GenAI material is dense, nearly humorless, and reads as closer to uninterrupted monologue — no comparable Q&A exchange turned up anywhere in the GenAI transcripts on a full pass. Follow the "voice varies by course" guidance in `style-guide.md` rather than flattening the two into one tone, and don't invent quotes, analogies, jokes, or Q&A warmth beyond what those two files document.

## Workflow

0. **Open the conversation in voice, and diagnose before you build — never generate the HTML on the first message.** This is a first-principles teaching move, not a stylistic one: a teacher who doesn't know what the student already knows can't pitch the lesson correctly, and guesses badly in both directions (boring an advanced student with scaffolding they don't need, or losing a beginner by skipping a step that felt "obvious"). Concretely:
   - Greet and name the topic the way Prathosh opens a class (`teaching-philosophy.md` §1: greeting → name the topic → one line of motivation, or recap-first if this continues an earlier topic).
   - Then genuinely ask, not rhetorically, where the student is starting from — e.g. "before I put the derivation in front of you: have you seen [prerequisite] before, or should I build from scratch? Where would you place yourself — never touched this, seen it once, or comfortable and just want the gaps filled?" Use `AskUserQuestion` for this so it's a real choice, not a line the student has to type past. The point isn't ceremony — the answer changes what you actually write: a beginner needs the naive-goal and why-it-fails steps spelled out slowly with more grounding in the intuition section and gentler jumps in the math; someone who says they already know the prerequisite gets that step compressed to a one-line reminder so the lesson doesn't waste their time restating what they've got. Don't ask this as a generic "beginner/intermediate/advanced" combo box divorced from the topic — anchor it to what's actually a prerequisite for *this* topic (e.g. for attention: "have you worked with dot products / softmax before?").
   - Also ask, lightly, whether there's a specific angle or sub-question they came in with (mirrors the "one line of motivation" move, but pointed at them instead of at you) — this can surface something worth folding into the hook or the running example.
   - Once you have that, set up the intuition or running example you're about to use (§2) in a couple of sentences — not the whole lesson. **Then stop and check the setup before you build anything.** A short "any questions on the setup before I hand you the full thing, yeah?" — the confirmed mid-derivation pacing move in `teaching-philosophy.md` §3 — costs one exchange and catches the case that actually wastes the student's time: they misread the premise, you write a whole lesson on top of that misreading, and they spend twenty minutes confused by a file that was never going to land. Don't roll setup and file-handoff into one message.
   - Then say the full derivation and interactive widgets are coming in the file, and invite doubts for while they go through it ("if something doesn't click, or you want to stop and ask before I go on — say so, right?" register, not a generic "let me know if you have questions"). Use the stock tics from `style-guide.md` (`right?`, `Okay.`, `make sense?`) sparingly, the way they'd land in his actual speech — don't overload one message with all of them.
   - After handing over the HTML file, don't just stop — close the turn the way he closes a topic (§7: recap-then-forward-pointer, not a cliffhanger), and then actually check in, the way a teacher walking the room would. **Use `AskUserQuestion` for this check-in, the same way you did for the opening diagnostic**, with concrete options rather than an open "any questions?" — something like "got all three quick-checks", "one of them tripped me up", "the derivation lost me at a specific step", "solid, next topic". An open-ended question is easy to skip past with "all good"; a concrete option is something a student will actually click, and their answer tells you *exactly* which step to re-explain. This closes the formative-assessment loop the diagnostic question opened — don't skip it just because the file was delivered.
   - If the student comes back confused, respond the way §5 documents: a brief one-word acknowledgment tic first ("Yeah.", "Correct.", "Got it."), then either a terse direct correction, a named-and-scheduled deferral ("that's exactly what we're about to cover"), or — if their confusion actually reveals a half-right idea — restate it neutrally and point at the real concept it's foreshadowing. Keep it brisk, not gently Socratic; that's the register the transcripts actually show.
1. Read `references/teaching-philosophy.md` for the seven-category voice framework and `references/style-guide.md` for phrase-level mechanics. Note which of the requested topic's home course (Math-ML vs. GenAI) it belongs to, since the voice differs between them.
2. Read `references/board-notes-observations.md` for how he sequences a derivation (definition → problem statement → obstruction → surrogate/fix → boxed result → named takeaway) and reuse that arc for the requested topic.
3. Read `references/interactive-html-spec.md` for the technical rules governing the output page (MathJax, widgets, layout, accessibility).
4. Look at `EXAMPLE.md` for one fully worked example (Maximum Likelihood Estimation) showing topic → arc → chosen interactions → voice, end to end.
5. Pick one of the three scaffolds in `assets/` (all wired identically underneath — MathJax, a live-plot-driven-by-a-slider block, a step-through derivation block, a quick-check block, callout boxes, a progress bar; only the CSS/visual identity differs) and fill in the requested topic's content — don't rebuild the scaffold from scratch each time:
   - `assets/lesson-template.html` — warm paper/serif, cream background. The default when nothing else points elsewhere.
   - `assets/lesson-template-chalkboard.html` — dark board, chalk-white text, monospace equations, matches the actual look of his handwritten board notes (`board-notes-observations.md`'s green-forward/red-gradient color convention is baked into `--fwd`/`--grad`). Reach for this on math-heavy derivation-forward topics.
   - `assets/lesson-template-notebook.html` — light ruled-paper page, red margin line, italic serif headings, a rotated sticky-note box for the boxed result. Reach for this on lighter, more narrative topics (the Math-ML-flavored, analogy-rich material per `style-guide.md`).
   If the student expresses a preference (or you're generating a second lesson back-to-back and want visual variety rather than three identical-looking pages in a row), just ask or pick deliberately — don't default to the same template every single time out of habit. All three share the same section `id`s and element `id`s (`slider1`, `plot1`, `#derivation .step`, etc.), so content-generation logic in steps 6-8 below applies unchanged regardless of which one you start from.
6. Default lesson arc, unless the topic clearly calls for a different shape: **hook → intuition → make it precise → the math → why it matters → edges/next**. These names are internal scaffolding for you — never let them leak into the output as literal headings (no `<h2>Hook</h2>`, `<h2>The math</h2>`, etc.). Write every visible heading as a topic-specific phrase, per the "Headings" section of `interactive-html-spec.md`, so the lesson reads as one continuous lecture rather than a labeled rubric.
7. In "The math," show the actual algebra: every derivation step that manipulates an expression must display the resulting equation, not just narrate the manipulation in prose. "Add and subtract the mean and expand" without ever showing the expanded line is not a derivation — see `interactive-html-spec.md`'s equation requirement.
8. Pick one concrete running example for the whole lesson and callback to it later rather than inventing a new example per section — see "Running example / callback thread" in `interactive-html-spec.md`.
9. **Keep every section short.** Before writing the file, re-read "Conciseness" in `interactive-html-spec.md` — this skill's most common feedback is that the output runs too long. One short paragraph per prose section, no restating a point a later or earlier section already made, and "the math" leans on the equations rather than prose explaining them. When in doubt, cut the sentence rather than trim it.
10. **Anticipate the two or three places this specific topic confuses people, and answer them in place.** A student reading alone can't raise a hand, so the page has to do it. Three mechanisms, all specified in `interactive-html-spec.md` — use them, and don't invent a fourth:
    - **Doubt callouts** (collapsed `<details>`) at the derivation's `Question:` step and at the boxed result. Collapsed means they cost zero reading length for a student who doesn't need them — that's why they don't conflict with step 9.
    - **Widget hints** — one short caption per interactive control, so a reader knows the slider is draggable and the derivation is step-through. A widget nobody realizes is interactive teaches nothing.
    - **Quick-check explanations** — a one-sentence `data-why` on every question saying *why* the right answer is right. Getting it wrong is the highest-value learning moment on the page; "Not quite" alone throws it away.
    Pick doubts that are real for *this* topic (what does the $\sqrt{d_k}$ actually fix? why is this an inequality and not an equality?), not generic filler.
11. **Self-audit, then output — do not skip this.** Steps 9-10 are advisory until you check your own draft. Re-read the finished file and verify, concretely:
    - Each prose section (hook, intuition, precise, why, edges) is **≤3 sentences and exactly one paragraph.** A second paragraph gets cut, not split.
    - "Why it matters" makes **one** connection; "edges" names **at most two** caveats. Count them.
    - No derivation step carries more than **one sentence** of narration beside its equation.
    - Every equation-manipulating step actually shows the resulting `$$...$$`.
    - Every quick-check question has a `data-why`; every interactive control has a hint.
    If any check fails, delete until it passes — shortening the wording is not the fix, removing the sentence is. Only then write the file.
12. Output one self-contained `.html` file (inline CSS/JS, MathJax via CDN script tag is acceptable here since this is a local file, not a claude.ai Artifact).

## Room to grow

Only 2 of the ~24 target transcripts per course (see `references/transcript-request.md`) have been mined so far — every category in `teaching-philosophy.md` has direct evidence, but a wider transcript sample would still sharpen range (more analogies, more topic areas, confirmation of whether the GenAI course really never has live Q&A or that's an artifact of which two lectures got transcribed). `transcript-request.md` explains what's most useful to add next. The skill is not blocked on this — it generates real-voice lessons from solid evidence today.

## Source material (not shipped in this package)

The distilled files under `references/` are all this skill needs at runtime — nothing here depends on raw source material being present. The original raw sources (`Math-ML.pdf`, `GenAI-IITM.pdf`, and the lecture transcript `.docx` files) were used once, up front, to mine `teaching-philosophy.md`, `style-guide.md`, and `board-notes-observations.md`, and are kept only on the maintainer's machine for re-mining later (pulling more categories out, verifying a quote) — they are intentionally excluded from this package to keep it small (the PDFs alone run ~340MB). If you need to re-mine or extend coverage, ask for the raw sources separately; don't assume a `source/` folder exists alongside this skill.

```


### `assets/lesson-template-chalkboard.html`

```
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{TOPIC_TITLE}}</title>
<script>
  window.MathJax = { tex: { inlineMath: [['$','$']], displayMath: [['$$','$$']] } };
</script>
<script defer src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<style>
  /*
    CHALKBOARD variant — evokes the actual handwritten board notes
    (board-notes-observations.md): dark board, chalk-white text,
    green = forward/definition ink, red = correction/gradient ink,
    a chalky boxed-in-yellow callout for the one result worth remembering.
    Same section IDs / element IDs as lesson-template.html — only the look changes.
  */
  :root {
    --bg: #1c2b22; --fg: #eef2e8; --muted: #9db3a2; --accent: #e8d17a;
    --card: #223328; --border: #3a4d3e; --box: #2c3a1f; --box-border: #e8d17a;
    --fwd: #8fd19e; --grad: #e8836b;
  }
  @media (prefers-color-scheme: light) {
    :root {
      --bg: #16241b; --fg: #eef2e8; --muted: #9db3a2; --accent: #e8d17a;
      --card: #1e2f24; --border: #354a3a; --box: #2c3a1f; --box-border: #e8d17a;
      --fwd: #8fd19e; --grad: #e8836b;
    }
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--bg); color: var(--fg);
    font-family: 'Courier New', Courier, monospace; line-height: 1.65;
    background-image:
      radial-gradient(ellipse at top left, rgba(255,255,255,.03), transparent 60%),
      radial-gradient(ellipse at bottom right, rgba(255,255,255,.02), transparent 60%);
  }
  .progress { position: sticky; top: 0; height: 4px; background: var(--border); z-index: 10; }
  .progress-fill { height: 100%; width: 0%; background: var(--accent); transition: width .1s linear; }
  header { max-width: 760px; margin: 0 auto; padding: 2.5rem 1.25rem 1rem; border-bottom: 1px dashed var(--border); }
  header h1 { font-size: 1.7rem; margin: 0 0 .25rem; letter-spacing: .01em; }
  header p.sub { color: var(--muted); margin: 0; font-family: system-ui, sans-serif; }
  main { max-width: 760px; margin: 0 auto; padding: 0 1.25rem 4rem; }
  section { margin: 2.5rem 0; }
  section h2 {
    font-family: system-ui, sans-serif; font-size: .95rem; letter-spacing: .08em;
    text-transform: uppercase; color: var(--accent); border-bottom: 1px dashed var(--border);
    padding-bottom: .4rem; margin-bottom: 1rem;
  }
  .card {
    background: var(--card); border: 1px dashed var(--border); border-radius: 4px;
    padding: 1.25rem 1.5rem; margin: 1rem 0;
  }
  .card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .box {
    background: var(--box); border: 2px solid var(--box-border); border-radius: 2px;
    padding: 1rem 1.25rem; margin: 1rem 0; font-family: system-ui, sans-serif;
    box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--box-border);
  }
  .box strong { display: block; margin-bottom: .35rem; color: var(--accent); }
  .fwd { color: var(--fwd); font-weight: 600; }
  .grad { color: var(--grad); font-weight: 600; }
  label { font-family: system-ui, sans-serif; font-size: .9rem; color: var(--muted); }
  input[type=range] { width: 100%; accent-color: var(--accent); }
  .readout { font-family: system-ui, sans-serif; font-weight: 600; color: var(--accent); }
  /* Always-visible usage caption for any interactive control. Not a doubt callout. */
  .hint { display: block; font-family: system-ui, sans-serif; font-size: .78rem; color: var(--muted); margin-top: .2rem; }
  .step-nav .hint { display: inline; margin: 0 0 0 .5rem; }
  /* Collapsed doubt callout — chalk-margin aside, zero visible length until opened. */
  details.doubt {
    border-left: 3px dashed var(--accent); background: rgba(232,209,122,.06);
    border-radius: 0 4px 4px 0; padding: .5rem .9rem; margin: .9rem 0;
    font-family: system-ui, sans-serif; font-size: .9rem;
  }
  details.doubt summary {
    cursor: pointer; color: var(--accent); font-weight: 600;
    font-size: .8rem; letter-spacing: .05em; text-transform: uppercase;
  }
  details.doubt p { margin: .55rem 0 .15rem; }
  .step-nav { display: flex; gap: .5rem; align-items: center; font-family: system-ui, sans-serif; margin-top: .75rem; flex-wrap: wrap; }
  .step-nav button {
    font: inherit; padding: .4rem .9rem; border-radius: 2px; border: 1px solid var(--border);
    background: var(--card); color: var(--fg); cursor: pointer;
  }
  .step-nav button:disabled { opacity: .4; cursor: default; }
  .step { display: none; }
  .step.active { display: block; }
  .quick-check .q { margin: 1rem 0; }
  .quick-check button.opt {
    display: block; width: 100%; text-align: left; font: inherit; padding: .6rem .9rem;
    margin: .3rem 0; border: 1px solid var(--border); border-radius: 2px; background: var(--card);
    color: var(--fg); cursor: pointer; font-family: system-ui, sans-serif;
  }
  .quick-check button.opt.correct { border-color: var(--fwd); background: color-mix(in srgb, var(--fwd) 18%, var(--card)); }
  .quick-check button.opt.wrong { border-color: var(--grad); background: color-mix(in srgb, var(--grad) 18%, var(--card)); }
  .feedback { font-family: system-ui, sans-serif; font-size: .9rem; margin-top: .4rem; min-height: 1.2em; }
  canvas { width: 100%; height: 260px; display: block; border-radius: 4px; background: var(--card); border: 1px dashed var(--border); }
  .diagram-alt { font-family: system-ui, sans-serif; font-size: .85rem; color: var(--muted); }
</style>
</head>
<body>

<div class="progress"><div class="progress-fill" id="progressFill"></div></div>

<header>
  <h1>{{TOPIC_TITLE}}</h1>
  <p class="sub">{{TOPIC_SUBTITLE}}</p>
</header>

<main>

  <section id="hook">
    <h2>{{HOOK_HEADING — topic-specific phrase, not the word "Hook"}}</h2>
    <p>{{HOOK_TEXT — concrete question or minimal example, no equations here. Max 3 sentences, one paragraph.}}</p>
  </section>

  <section id="intuition">
    <h2>{{INTUITION_HEADING — topic-specific phrase, not the word "Intuition"}}</h2>
    <p>{{INTUITION_TEXT — max 3 sentences, one paragraph.}}</p>
    <div class="card">
      <label for="slider1">{{SLIDER_LABEL}}: <span class="readout" id="slider1Val">{{DEFAULT}}</span></label>
      <input type="range" id="slider1" min="0" max="100" value="50" aria-label="{{SLIDER_ARIA_LABEL — what the control varies and over what range}}">
      <span class="hint">{{SLIDER_HINT — e.g. "drag to watch the weights redistribute"}}</span>
      <canvas id="plot1" width="700" height="260" role="img" aria-label="{{PLOT_ALT_TEXT — describe what the plot shows at both extremes of the slider}}"></canvas>
    </div>
    <p>{{INTUITION_PAYOFF — 1-2 sentences naming what the widget just showed and pointing at the derivation. Optional; cut if the section already lands.}}</p>
  </section>

  <section id="precise">
    <h2>{{PRECISE_HEADING — topic-specific phrase, not "Make it precise"}}</h2>
    <p>{{PRECISE_TEXT — restate the intuition with typed notation, e.g. $X \in \mathbb{R}^d$, $Y \in \mathbb{R}$. Max 3 sentences; type every symbol as it appears, don't re-justify what intuition already established.}}</p>
  </section>

  <section id="math">
    <h2>{{MATH_HEADING — topic-specific phrase, not "The math"}}</h2>
    <div class="card" id="derivation" tabindex="0">
      <div class="step active" data-step="1">
        <p><strong>1. Define & type.</strong> {{one sentence of narration max}} $$ {{typed objects as an equation, e.g. y = f(x) + \epsilon}} $$</p>
      </div>
      <div class="step" data-step="2">
        <p><strong>2. The naive goal.</strong> {{one sentence max}} $$ {{the naive objective, as an equation}} $$</p>
      </div>
      <div class="step" data-step="3">
        <p><strong>3. Why it can't be done directly.</strong> {{one sentence max, ∵ ...}}</p>
      </div>
      <div class="step" data-step="4">
        <p><strong>Question:</strong> {{the question this derivation answers}}</p>
        <details class="doubt">
          <summary>{{DOUBT_1_SUMMARY — the confusion in the student's own words, e.g. "Why can't we just use the raw scores?"}}</summary>
          <p>{{DOUBT_1_ANSWER — acknowledgment tic, then a terse direct answer or a named forward-pointer. Per teaching-philosophy.md §5. 2-3 sentences. A side-question only — never re-derive the main line here.}}</p>
        </details>
      </div>
      <div class="step" data-step="5">
        <p><strong>4. Derive the fix.</strong> {{one sentence of narration}} $$ {{show every intermediate line of the algebra — a reader following only the equations should be able to reconstruct the derivation}} $$</p>
        <div class="box">
          <strong>{{BOXED_RESULT_NAME}}</strong>
          $$ {{boxed equation}} $$
        </div>
        <details class="doubt">
          <summary>{{DOUBT_2_SUMMARY — the confusion readers actually hit at the boxed result}}</summary>
          <p>{{DOUBT_2_ANSWER — same register, 2-3 sentences.}}</p>
        </details>
      </div>
      <div class="step" data-step="6">
        <p><strong>5. Ground it.</strong> {{one sentence}} $$ {{the numeric/concrete instance as an equation, e.g. plugging in the hook's example}} $$</p>
      </div>
      <div class="step-nav">
        <button id="prevStep">&larr; Prev</button>
        <span class="readout" id="stepCount">1 / 6</span>
        <button id="nextStep">Next &rarr;</button>
        <span class="hint">step through with &larr; &rarr; or the buttons</span>
      </div>
    </div>
  </section>

  <section id="why">
    <h2>{{WHY_HEADING — topic-specific phrase, not "Why it matters"}}</h2>
    <p>{{WHY_TEXT — exactly ONE connection: where the boxed result recurs or what it makes possible. 1-2 sentences. Not a list of use cases.}}</p>
  </section>

  <section id="edges">
    <h2>{{EDGES_HEADING — topic-specific phrase, not "Edges & what's next"}}</h2>
    <p>{{EDGES_TEXT — at most TWO caveats, 1-2 sentences each, plus a pointer to the next topic. Three or more caveats means pick the most consequential and cut the rest.}}</p>
  </section>

  <section id="check" class="quick-check">
    <h2>{{CHECK_HEADING — topic-specific phrase, not "Quick check"}}</h2>
    <div class="q" data-answer="1" data-why="{{WHY_THIS_ANSWER — one sentence on why the correct option is correct. Shown on both right and wrong answers; this is the highest-value teaching moment on the page, so make it explain the reason, not restate the option.}}">
      <p>{{QUESTION_TEXT}}</p>
      <button class="opt" data-idx="0">{{OPTION_A}}</button>
      <button class="opt" data-idx="1">{{OPTION_B — correct}}</button>
      <button class="opt" data-idx="2">{{OPTION_C}}</button>
      <div class="feedback"></div>
    </div>
  </section>

</main>

<script>
// Progress bar
window.addEventListener('scroll', () => {
  const h = document.documentElement;
  const pct = (h.scrollTop) / (h.scrollHeight - h.clientHeight) * 100;
  document.getElementById('progressFill').style.width = pct + '%';
});

// Slider + live canvas plot (placeholder function — replace with the real one per topic)
const slider1 = document.getElementById('slider1');
const slider1Val = document.getElementById('slider1Val');
const canvas1 = document.getElementById('plot1');
const ctx1 = canvas1.getContext('2d');
function drawPlot(k) {
  const w = canvas1.width, h = canvas1.height;
  ctx1.clearRect(0, 0, w, h);
  ctx1.strokeStyle = getComputedStyle(document.body).getPropertyValue('--fwd');
  ctx1.lineWidth = 2;
  ctx1.beginPath();
  for (let px = 0; px <= w; px++) {
    const x = (px / w) * 10 - 5;
    const y = Math.sin(x * (k / 20 + 0.1)) * (h / 4); // placeholder curve
    const py = h / 2 - y;
    px === 0 ? ctx1.moveTo(px, py) : ctx1.lineTo(px, py);
  }
  ctx1.stroke();
}
slider1.addEventListener('input', () => {
  slider1Val.textContent = slider1.value;
  drawPlot(Number(slider1.value));
});
drawPlot(Number(slider1.value));

// Step-through derivation
const derivation = document.getElementById('derivation');
const steps = Array.from(document.querySelectorAll('#derivation .step'));
let stepIdx = 0;
const prevBtn = document.getElementById('prevStep');
const nextBtn = document.getElementById('nextStep');
const stepCount = document.getElementById('stepCount');
function renderStep() {
  steps.forEach((s, i) => s.classList.toggle('active', i === stepIdx));
  stepCount.textContent = `${stepIdx + 1} / ${steps.length}`;
  prevBtn.disabled = stepIdx === 0;
  nextBtn.disabled = stepIdx === steps.length - 1;
  // Keep keyboard control alive when the focused button becomes disabled at a boundary.
  if (document.activeElement && document.activeElement.disabled) derivation.focus();
}
prevBtn.addEventListener('click', () => { stepIdx = Math.max(0, stepIdx - 1); renderStep(); });
nextBtn.addEventListener('click', () => { stepIdx = Math.min(steps.length - 1, stepIdx + 1); renderStep(); });
// Arrow-key navigation, so the "use ← →" hint is actually true.
derivation.addEventListener('keydown', (e) => {
  if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
  if (e.key === 'ArrowLeft')  { stepIdx = Math.max(0, stepIdx - 1); renderStep(); e.preventDefault(); }
  if (e.key === 'ArrowRight') { stepIdx = Math.min(steps.length - 1, stepIdx + 1); renderStep(); e.preventDefault(); }
});
renderStep();

// Quick-check — always explain WHY, on right and wrong alike.
document.querySelectorAll('.quick-check .q').forEach(q => {
  const correct = Number(q.dataset.answer);
  const why = q.dataset.why || '';
  const fb = q.querySelector('.feedback');
  q.querySelectorAll('.opt').forEach(btn => {
    btn.addEventListener('click', () => {
      q.querySelectorAll('.opt').forEach(b => b.classList.remove('correct', 'wrong'));
      const idx = Number(btn.dataset.idx);
      if (idx === correct) {
        btn.classList.add('correct');
        fb.textContent = why ? 'Right. ' + why : 'Right.';
      } else {
        btn.classList.add('wrong');
        q.querySelectorAll('.opt')[correct].classList.add('correct');
        fb.textContent = why ? 'Not quite — the right one is highlighted. ' + why
                             : 'Not quite — correct answer highlighted.';
      }
    });
  });
});
</script>

</body>
</html>

```


### `assets/lesson-template-notebook.html`

```
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{TOPIC_TITLE}}</title>
<script>
  window.MathJax = { tex: { inlineMath: [['$','$']], displayMath: [['$$','$$']] } };
</script>
<script defer src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<style>
  /*
    NOTEBOOK variant — ruled-paper page, red margin line, blue "ink" text,
    a rotated sticky-note box for the boxed result. Lighter and more informal
    than the default warm-paper template or the chalkboard variant.
    Same section IDs / element IDs as lesson-template.html — only the look changes.
  */
  :root {
    --bg: #fdfdf7; --fg: #23324a; --muted: #6d7891; --accent: #b23b3b;
    --card: #ffffff; --border: #cdd6e8; --box: #fff4a3; --box-border: #d8c34a;
    --fwd: #2f7d4f; --grad: #b5432a; --rule: #dfe6f2; --margin: #e0a3a3;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #1a1c22; --fg: #dfe4f0; --muted: #9aa3ba; --accent: #e07a7a;
      --card: #22242c; --border: #33384a; --box: #3a3520; --box-border: #a99a3e;
      --fwd: #5fbf87; --grad: #e2836a; --rule: #2a2e3a; --margin: #5a3a3a;
    }
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--bg); color: var(--fg);
    font-family: 'Segoe UI', system-ui, sans-serif; line-height: 1.7;
    background-image: repeating-linear-gradient(var(--bg) 0 34px, var(--rule) 34px 35px);
    background-attachment: local;
  }
  .progress { position: sticky; top: 0; height: 4px; background: var(--border); z-index: 10; }
  .progress-fill { height: 100%; width: 0%; background: var(--accent); transition: width .1s linear; }
  header { max-width: 760px; margin: 0 auto; padding: 2.5rem 1.25rem 1rem 2.5rem; position: relative; border-left: 2px solid var(--margin); }
  header h1 { font-size: 1.85rem; margin: 0 0 .25rem; font-family: Georgia, serif; font-style: italic; }
  header p.sub { color: var(--muted); margin: 0; }
  main { max-width: 760px; margin: 0 auto; padding: 0 1.25rem 4rem 2.5rem; border-left: 2px solid var(--margin); }
  section { margin: 2.5rem 0; }
  section h2 {
    font-family: Georgia, serif; font-weight: 700; font-style: italic; font-size: 1.2rem;
    color: var(--accent); border-bottom: 1px solid var(--border);
    padding-bottom: .4rem; margin-bottom: 1rem; text-transform: none; letter-spacing: 0;
  }
  .card {
    background: var(--card); border: 1px solid var(--border); border-radius: 6px;
    padding: 1.25rem 1.5rem; margin: 1rem 0; box-shadow: 1px 2px 6px rgba(0,0,0,.04);
  }
  .card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .box {
    background: var(--box); border: 1px solid var(--box-border); border-radius: 3px;
    padding: 1rem 1.25rem; margin: 1.25rem 0; font-family: 'Segoe UI', system-ui, sans-serif;
    transform: rotate(-0.6deg); box-shadow: 2px 3px 8px rgba(0,0,0,.12);
  }
  .box strong { display: block; margin-bottom: .35rem; color: var(--accent); }
  .fwd { color: var(--fwd); font-weight: 600; }
  .grad { color: var(--grad); font-weight: 600; }
  label { font-family: system-ui, sans-serif; font-size: .9rem; color: var(--muted); }
  input[type=range] { width: 100%; accent-color: var(--accent); }
  .readout { font-family: system-ui, sans-serif; font-weight: 600; }
  /* Always-visible usage caption for any interactive control. Not a doubt callout. */
  .hint { display: block; font-family: system-ui, sans-serif; font-size: .78rem; color: var(--muted); margin-top: .2rem; }
  .step-nav .hint { display: inline; margin: 0 0 0 .5rem; }
  /* Collapsed doubt callout — margin-note aside, zero visible length until opened. */
  details.doubt {
    border-left: 3px solid var(--margin); background: color-mix(in srgb, var(--accent) 5%, transparent);
    border-radius: 0 6px 6px 0; padding: .5rem .9rem; margin: .9rem 0;
    font-family: 'Segoe UI', system-ui, sans-serif; font-size: .9rem;
  }
  details.doubt summary {
    cursor: pointer; color: var(--accent); font-weight: 700;
    font-family: Georgia, serif; font-style: italic; font-size: .95rem;
  }
  details.doubt p { margin: .55rem 0 .15rem; }
  .step-nav { display: flex; gap: .5rem; align-items: center; font-family: system-ui, sans-serif; margin-top: .75rem; flex-wrap: wrap; }
  .step-nav button {
    font: inherit; padding: .4rem .9rem; border-radius: 14px; border: 1px solid var(--border);
    background: var(--card); color: var(--fg); cursor: pointer;
  }
  .step-nav button:disabled { opacity: .4; cursor: default; }
  .step { display: none; }
  .step.active { display: block; }
  .quick-check .q { margin: 1rem 0; }
  .quick-check button.opt {
    display: block; width: 100%; text-align: left; font: inherit; padding: .6rem .9rem;
    margin: .3rem 0; border: 1px solid var(--border); border-radius: 14px; background: var(--card);
    color: var(--fg); cursor: pointer; font-family: system-ui, sans-serif;
  }
  .quick-check button.opt.correct { border-color: var(--fwd); background: color-mix(in srgb, var(--fwd) 15%, var(--card)); }
  .quick-check button.opt.wrong { border-color: var(--grad); background: color-mix(in srgb, var(--grad) 15%, var(--card)); }
  .feedback { font-family: system-ui, sans-serif; font-size: .9rem; margin-top: .4rem; min-height: 1.2em; }
  canvas { width: 100%; height: 260px; display: block; border-radius: 6px; background: var(--card); border: 1px solid var(--border); }
  .diagram-alt { font-family: system-ui, sans-serif; font-size: .85rem; color: var(--muted); }
</style>
</head>
<body>

<div class="progress"><div class="progress-fill" id="progressFill"></div></div>

<header>
  <h1>{{TOPIC_TITLE}}</h1>
  <p class="sub">{{TOPIC_SUBTITLE}}</p>
</header>

<main>

  <section id="hook">
    <h2>{{HOOK_HEADING — topic-specific phrase, not the word "Hook"}}</h2>
    <p>{{HOOK_TEXT — concrete question or minimal example, no equations here. Max 3 sentences, one paragraph.}}</p>
  </section>

  <section id="intuition">
    <h2>{{INTUITION_HEADING — topic-specific phrase, not the word "Intuition"}}</h2>
    <p>{{INTUITION_TEXT — max 3 sentences, one paragraph.}}</p>
    <div class="card">
      <label for="slider1">{{SLIDER_LABEL}}: <span class="readout" id="slider1Val">{{DEFAULT}}</span></label>
      <input type="range" id="slider1" min="0" max="100" value="50" aria-label="{{SLIDER_ARIA_LABEL — what the control varies and over what range}}">
      <span class="hint">{{SLIDER_HINT — e.g. "drag to watch the weights redistribute"}}</span>
      <canvas id="plot1" width="700" height="260" role="img" aria-label="{{PLOT_ALT_TEXT — describe what the plot shows at both extremes of the slider}}"></canvas>
    </div>
    <p>{{INTUITION_PAYOFF — 1-2 sentences naming what the widget just showed and pointing at the derivation. Optional; cut if the section already lands.}}</p>
  </section>

  <section id="precise">
    <h2>{{PRECISE_HEADING — topic-specific phrase, not "Make it precise"}}</h2>
    <p>{{PRECISE_TEXT — restate the intuition with typed notation, e.g. $X \in \mathbb{R}^d$, $Y \in \mathbb{R}$. Max 3 sentences; type every symbol as it appears, don't re-justify what intuition already established.}}</p>
  </section>

  <section id="math">
    <h2>{{MATH_HEADING — topic-specific phrase, not "The math"}}</h2>
    <div class="card" id="derivation" tabindex="0">
      <div class="step active" data-step="1">
        <p><strong>1. Define & type.</strong> {{one sentence of narration max}} $$ {{typed objects as an equation, e.g. y = f(x) + \epsilon}} $$</p>
      </div>
      <div class="step" data-step="2">
        <p><strong>2. The naive goal.</strong> {{one sentence max}} $$ {{the naive objective, as an equation}} $$</p>
      </div>
      <div class="step" data-step="3">
        <p><strong>3. Why it can't be done directly.</strong> {{one sentence max, ∵ ...}}</p>
      </div>
      <div class="step" data-step="4">
        <p><strong>Question:</strong> {{the question this derivation answers}}</p>
        <details class="doubt">
          <summary>{{DOUBT_1_SUMMARY — the confusion in the student's own words, e.g. "Why can't we just use the raw scores?"}}</summary>
          <p>{{DOUBT_1_ANSWER — acknowledgment tic, then a terse direct answer or a named forward-pointer. Per teaching-philosophy.md §5. 2-3 sentences. A side-question only — never re-derive the main line here.}}</p>
        </details>
      </div>
      <div class="step" data-step="5">
        <p><strong>4. Derive the fix.</strong> {{one sentence of narration}} $$ {{show every intermediate line of the algebra — a reader following only the equations should be able to reconstruct the derivation}} $$</p>
        <div class="box">
          <strong>{{BOXED_RESULT_NAME}}</strong>
          $$ {{boxed equation}} $$
        </div>
        <details class="doubt">
          <summary>{{DOUBT_2_SUMMARY — the confusion readers actually hit at the boxed result}}</summary>
          <p>{{DOUBT_2_ANSWER — same register, 2-3 sentences.}}</p>
        </details>
      </div>
      <div class="step" data-step="6">
        <p><strong>5. Ground it.</strong> {{one sentence}} $$ {{the numeric/concrete instance as an equation, e.g. plugging in the hook's example}} $$</p>
      </div>
      <div class="step-nav">
        <button id="prevStep">&larr; Prev</button>
        <span class="readout" id="stepCount">1 / 6</span>
        <button id="nextStep">Next &rarr;</button>
        <span class="hint">step through with &larr; &rarr; or the buttons</span>
      </div>
    </div>
  </section>

  <section id="why">
    <h2>{{WHY_HEADING — topic-specific phrase, not "Why it matters"}}</h2>
    <p>{{WHY_TEXT — exactly ONE connection: where the boxed result recurs or what it makes possible. 1-2 sentences. Not a list of use cases.}}</p>
  </section>

  <section id="edges">
    <h2>{{EDGES_HEADING — topic-specific phrase, not "Edges & what's next"}}</h2>
    <p>{{EDGES_TEXT — at most TWO caveats, 1-2 sentences each, plus a pointer to the next topic. Three or more caveats means pick the most consequential and cut the rest.}}</p>
  </section>

  <section id="check" class="quick-check">
    <h2>{{CHECK_HEADING — topic-specific phrase, not "Quick check"}}</h2>
    <div class="q" data-answer="1" data-why="{{WHY_THIS_ANSWER — one sentence on why the correct option is correct. Shown on both right and wrong answers; this is the highest-value teaching moment on the page, so make it explain the reason, not restate the option.}}">
      <p>{{QUESTION_TEXT}}</p>
      <button class="opt" data-idx="0">{{OPTION_A}}</button>
      <button class="opt" data-idx="1">{{OPTION_B — correct}}</button>
      <button class="opt" data-idx="2">{{OPTION_C}}</button>
      <div class="feedback"></div>
    </div>
  </section>

</main>

<script>
// Progress bar
window.addEventListener('scroll', () => {
  const h = document.documentElement;
  const pct = (h.scrollTop) / (h.scrollHeight - h.clientHeight) * 100;
  document.getElementById('progressFill').style.width = pct + '%';
});

// Slider + live canvas plot (placeholder function — replace with the real one per topic)
const slider1 = document.getElementById('slider1');
const slider1Val = document.getElementById('slider1Val');
const canvas1 = document.getElementById('plot1');
const ctx1 = canvas1.getContext('2d');
function drawPlot(k) {
  const w = canvas1.width, h = canvas1.height;
  ctx1.clearRect(0, 0, w, h);
  ctx1.strokeStyle = getComputedStyle(document.body).getPropertyValue('--fwd');
  ctx1.lineWidth = 2;
  ctx1.beginPath();
  for (let px = 0; px <= w; px++) {
    const x = (px / w) * 10 - 5;
    const y = Math.sin(x * (k / 20 + 0.1)) * (h / 4); // placeholder curve
    const py = h / 2 - y;
    px === 0 ? ctx1.moveTo(px, py) : ctx1.lineTo(px, py);
  }
  ctx1.stroke();
}
slider1.addEventListener('input', () => {
  slider1Val.textContent = slider1.value;
  drawPlot(Number(slider1.value));
});
drawPlot(Number(slider1.value));

// Step-through derivation
const derivation = document.getElementById('derivation');
const steps = Array.from(document.querySelectorAll('#derivation .step'));
let stepIdx = 0;
const prevBtn = document.getElementById('prevStep');
const nextBtn = document.getElementById('nextStep');
const stepCount = document.getElementById('stepCount');
function renderStep() {
  steps.forEach((s, i) => s.classList.toggle('active', i === stepIdx));
  stepCount.textContent = `${stepIdx + 1} / ${steps.length}`;
  prevBtn.disabled = stepIdx === 0;
  nextBtn.disabled = stepIdx === steps.length - 1;
  // Keep keyboard control alive when the focused button becomes disabled at a boundary.
  if (document.activeElement && document.activeElement.disabled) derivation.focus();
}
prevBtn.addEventListener('click', () => { stepIdx = Math.max(0, stepIdx - 1); renderStep(); });
nextBtn.addEventListener('click', () => { stepIdx = Math.min(steps.length - 1, stepIdx + 1); renderStep(); });
// Arrow-key navigation, so the "use ← →" hint is actually true.
derivation.addEventListener('keydown', (e) => {
  if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
  if (e.key === 'ArrowLeft')  { stepIdx = Math.max(0, stepIdx - 1); renderStep(); e.preventDefault(); }
  if (e.key === 'ArrowRight') { stepIdx = Math.min(steps.length - 1, stepIdx + 1); renderStep(); e.preventDefault(); }
});
renderStep();

// Quick-check — always explain WHY, on right and wrong alike.
document.querySelectorAll('.quick-check .q').forEach(q => {
  const correct = Number(q.dataset.answer);
  const why = q.dataset.why || '';
  const fb = q.querySelector('.feedback');
  q.querySelectorAll('.opt').forEach(btn => {
    btn.addEventListener('click', () => {
      q.querySelectorAll('.opt').forEach(b => b.classList.remove('correct', 'wrong'));
      const idx = Number(btn.dataset.idx);
      if (idx === correct) {
        btn.classList.add('correct');
        fb.textContent = why ? 'Right. ' + why : 'Right.';
      } else {
        btn.classList.add('wrong');
        q.querySelectorAll('.opt')[correct].classList.add('correct');
        fb.textContent = why ? 'Not quite — the right one is highlighted. ' + why
                             : 'Not quite — correct answer highlighted.';
      }
    });
  });
});
</script>

</body>
</html>

```


### `assets/lesson-template.html`

```
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{TOPIC_TITLE}}</title>
<script>
  window.MathJax = { tex: { inlineMath: [['$','$']], displayMath: [['$$','$$']] } };
</script>
<script defer src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<style>
  /*
    DEFAULT variant — warm paper, serif body, cream background.
    Same section IDs / element IDs as the chalkboard and notebook variants.
  */
  :root {
    --bg: #fbf9f4; --fg: #1f1c17; --muted: #6b6355; --accent: #8a5a2b;
    --card: #ffffff; --border: #e6ddcc; --box: #fff4dd; --box-border: #d8b35a;
    --fwd: #2f7d4f; --grad: #b5432a;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #171512; --fg: #ece6d9; --muted: #a89f8c; --accent: #d59a52;
      --card: #201d18; --border: #3a3428; --box: #2b2410; --box-border: #a97a2e;
      --fwd: #5fbf87; --grad: #e2836a;
    }
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--bg); color: var(--fg);
    font-family: Georgia, 'Times New Roman', serif; line-height: 1.6;
  }
  .progress { position: sticky; top: 0; height: 4px; background: var(--border); z-index: 10; }
  .progress-fill { height: 100%; width: 0%; background: var(--accent); transition: width .1s linear; }
  header { max-width: 760px; margin: 0 auto; padding: 2.5rem 1.25rem 1rem; }
  header h1 { font-size: 1.9rem; margin: 0 0 .25rem; }
  header p.sub { color: var(--muted); margin: 0; font-family: system-ui, sans-serif; }
  main { max-width: 760px; margin: 0 auto; padding: 0 1.25rem 4rem; }
  section { margin: 2.5rem 0; }
  section h2 {
    font-family: system-ui, sans-serif; font-size: 1rem; letter-spacing: .06em;
    text-transform: uppercase; color: var(--accent); border-bottom: 1px solid var(--border);
    padding-bottom: .4rem; margin-bottom: 1rem;
  }
  .card {
    background: var(--card); border: 1px solid var(--border); border-radius: 10px;
    padding: 1.25rem 1.5rem; margin: 1rem 0;
  }
  .card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .box {
    background: var(--box); border: 1.5px solid var(--box-border); border-radius: 8px;
    padding: 1rem 1.25rem; margin: 1rem 0; font-family: system-ui, sans-serif;
  }
  .box strong { display: block; margin-bottom: .35rem; }
  .fwd { color: var(--fwd); font-weight: 600; }
  .grad { color: var(--grad); font-weight: 600; }
  label { font-family: system-ui, sans-serif; font-size: .9rem; color: var(--muted); }
  input[type=range] { width: 100%; }
  .readout { font-family: system-ui, sans-serif; font-weight: 600; }
  /* Always-visible usage caption for any interactive control. Not a doubt callout. */
  .hint { display: block; font-family: system-ui, sans-serif; font-size: .78rem; color: var(--muted); margin-top: .2rem; }
  .step-nav .hint { display: inline; margin: 0 0 0 .5rem; }
  /* Collapsed doubt callout — zero visible length until opened. */
  details.doubt {
    border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent);
    border-radius: 0 6px 6px 0; padding: .5rem .9rem; margin: .9rem 0;
    font-family: system-ui, sans-serif; font-size: .9rem;
  }
  details.doubt summary {
    cursor: pointer; color: var(--accent); font-weight: 600;
    font-size: .8rem; letter-spacing: .04em; text-transform: uppercase;
  }
  details.doubt p { margin: .55rem 0 .15rem; }
  .step-nav { display: flex; gap: .5rem; align-items: center; font-family: system-ui, sans-serif; margin-top: .75rem; flex-wrap: wrap; }
  .step-nav button {
    font: inherit; padding: .4rem .9rem; border-radius: 6px; border: 1px solid var(--border);
    background: var(--card); color: var(--fg); cursor: pointer;
  }
  .step-nav button:disabled { opacity: .4; cursor: default; }
  .step { display: none; }
  .step.active { display: block; }
  .quick-check .q { margin: 1rem 0; }
  .quick-check button.opt {
    display: block; width: 100%; text-align: left; font: inherit; padding: .6rem .9rem;
    margin: .3rem 0; border: 1px solid var(--border); border-radius: 6px; background: var(--card);
    color: var(--fg); cursor: pointer; font-family: system-ui, sans-serif;
  }
  .quick-check button.opt.correct { border-color: var(--fwd); background: color-mix(in srgb, var(--fwd) 15%, var(--card)); }
  .quick-check button.opt.wrong { border-color: var(--grad); background: color-mix(in srgb, var(--grad) 15%, var(--card)); }
  .feedback { font-family: system-ui, sans-serif; font-size: .9rem; margin-top: .4rem; min-height: 1.2em; }
  canvas { width: 100%; height: 260px; display: block; border-radius: 8px; background: var(--card); border: 1px solid var(--border); }
  .diagram-alt { font-family: system-ui, sans-serif; font-size: .85rem; color: var(--muted); }
</style>
</head>
<body>

<div class="progress"><div class="progress-fill" id="progressFill"></div></div>

<header>
  <h1>{{TOPIC_TITLE}}</h1>
  <p class="sub">{{TOPIC_SUBTITLE}}</p>
</header>

<main>

  <section id="hook">
    <h2>{{HOOK_HEADING — topic-specific phrase, not the word "Hook"}}</h2>
    <p>{{HOOK_TEXT — concrete question or minimal example, no equations here. Max 3 sentences, one paragraph.}}</p>
  </section>

  <section id="intuition">
    <h2>{{INTUITION_HEADING — topic-specific phrase, not the word "Intuition"}}</h2>
    <p>{{INTUITION_TEXT — max 3 sentences, one paragraph.}}</p>
    <div class="card">
      <label for="slider1">{{SLIDER_LABEL}}: <span class="readout" id="slider1Val">{{DEFAULT}}</span></label>
      <input type="range" id="slider1" min="0" max="100" value="50" aria-label="{{SLIDER_ARIA_LABEL — what the control varies and over what range}}">
      <span class="hint">{{SLIDER_HINT — e.g. "drag to watch the weights redistribute"}}</span>
      <canvas id="plot1" width="700" height="260" role="img" aria-label="{{PLOT_ALT_TEXT — describe what the plot shows at both extremes of the slider}}"></canvas>
    </div>
    <p>{{INTUITION_PAYOFF — 1-2 sentences naming what the widget just showed and pointing at the derivation. Optional; cut if the section already lands.}}</p>
  </section>

  <section id="precise">
    <h2>{{PRECISE_HEADING — topic-specific phrase, not "Make it precise"}}</h2>
    <p>{{PRECISE_TEXT — restate the intuition with typed notation, e.g. $X \in \mathbb{R}^d$, $Y \in \mathbb{R}$. Max 3 sentences; type every symbol as it appears, don't re-justify what intuition already established.}}</p>
  </section>

  <section id="math">
    <h2>{{MATH_HEADING — topic-specific phrase, not "The math"}}</h2>
    <div class="card" id="derivation" tabindex="0">
      <div class="step active" data-step="1">
        <p><strong>1. Define & type.</strong> {{one sentence of narration max}} $$ {{typed objects as an equation, e.g. y = f(x) + \epsilon}} $$</p>
      </div>
      <div class="step" data-step="2">
        <p><strong>2. The naive goal.</strong> {{one sentence max}} $$ {{the naive objective, as an equation}} $$</p>
      </div>
      <div class="step" data-step="3">
        <p><strong>3. Why it can't be done directly.</strong> {{one sentence max, ∵ ...}}</p>
      </div>
      <div class="step" data-step="4">
        <p><strong>Question:</strong> {{the question this derivation answers}}</p>
        <details class="doubt">
          <summary>{{DOUBT_1_SUMMARY — the confusion in the student's own words, e.g. "Why can't we just use the raw scores?"}}</summary>
          <p>{{DOUBT_1_ANSWER — acknowledgment tic, then a terse direct answer or a named forward-pointer. Per teaching-philosophy.md §5. 2-3 sentences. A side-question only — never re-derive the main line here.}}</p>
        </details>
      </div>
      <div class="step" data-step="5">
        <p><strong>4. Derive the fix.</strong> {{one sentence of narration}} $$ {{show every intermediate line of the algebra — a reader following only the equations should be able to reconstruct the derivation}} $$</p>
        <div class="box">
          <strong>{{BOXED_RESULT_NAME}}</strong>
          $$ {{boxed equation}} $$
        </div>
        <details class="doubt">
          <summary>{{DOUBT_2_SUMMARY — the confusion readers actually hit at the boxed result}}</summary>
          <p>{{DOUBT_2_ANSWER — same register, 2-3 sentences.}}</p>
        </details>
      </div>
      <div class="step" data-step="6">
        <p><strong>5. Ground it.</strong> {{one sentence}} $$ {{the numeric/concrete instance as an equation, e.g. plugging in the hook's example}} $$</p>
      </div>
      <div class="step-nav">
        <button id="prevStep">&larr; Prev</button>
        <span class="readout" id="stepCount">1 / 6</span>
        <button id="nextStep">Next &rarr;</button>
        <span class="hint">step through with &larr; &rarr; or the buttons</span>
      </div>
    </div>
  </section>

  <section id="why">
    <h2>{{WHY_HEADING — topic-specific phrase, not "Why it matters"}}</h2>
    <p>{{WHY_TEXT — exactly ONE connection: where the boxed result recurs or what it makes possible. 1-2 sentences. Not a list of use cases.}}</p>
  </section>

  <section id="edges">
    <h2>{{EDGES_HEADING — topic-specific phrase, not "Edges & what's next"}}</h2>
    <p>{{EDGES_TEXT — at most TWO caveats, 1-2 sentences each, plus a pointer to the next topic. Three or more caveats means pick the most consequential and cut the rest.}}</p>
  </section>

  <section id="check" class="quick-check">
    <h2>{{CHECK_HEADING — topic-specific phrase, not "Quick check"}}</h2>
    <div class="q" data-answer="1" data-why="{{WHY_THIS_ANSWER — one sentence on why the correct option is correct. Shown on both right and wrong answers; this is the highest-value teaching moment on the page, so make it explain the reason, not restate the option.}}">
      <p>{{QUESTION_TEXT}}</p>
      <button class="opt" data-idx="0">{{OPTION_A}}</button>
      <button class="opt" data-idx="1">{{OPTION_B — correct}}</button>
      <button class="opt" data-idx="2">{{OPTION_C}}</button>
      <div class="feedback"></div>
    </div>
  </section>

</main>

<script>
// Progress bar
window.addEventListener('scroll', () => {
  const h = document.documentElement;
  const pct = (h.scrollTop) / (h.scrollHeight - h.clientHeight) * 100;
  document.getElementById('progressFill').style.width = pct + '%';
});

// Slider + live canvas plot (placeholder function — replace with the real one per topic)
const slider1 = document.getElementById('slider1');
const slider1Val = document.getElementById('slider1Val');
const canvas1 = document.getElementById('plot1');
const ctx1 = canvas1.getContext('2d');
function drawPlot(k) {
  const w = canvas1.width, h = canvas1.height;
  ctx1.clearRect(0, 0, w, h);
  ctx1.strokeStyle = getComputedStyle(document.body).getPropertyValue('--fwd');
  ctx1.lineWidth = 2;
  ctx1.beginPath();
  for (let px = 0; px <= w; px++) {
    const x = (px / w) * 10 - 5;
    const y = Math.sin(x * (k / 20 + 0.1)) * (h / 4); // placeholder curve
    const py = h / 2 - y;
    px === 0 ? ctx1.moveTo(px, py) : ctx1.lineTo(px, py);
  }
  ctx1.stroke();
}
slider1.addEventListener('input', () => {
  slider1Val.textContent = slider1.value;
  drawPlot(Number(slider1.value));
});
drawPlot(Number(slider1.value));

// Step-through derivation
const derivation = document.getElementById('derivation');
const steps = Array.from(document.querySelectorAll('#derivation .step'));
let stepIdx = 0;
const prevBtn = document.getElementById('prevStep');
const nextBtn = document.getElementById('nextStep');
const stepCount = document.getElementById('stepCount');
function renderStep() {
  steps.forEach((s, i) => s.classList.toggle('active', i === stepIdx));
  stepCount.textContent = `${stepIdx + 1} / ${steps.length}`;
  prevBtn.disabled = stepIdx === 0;
  nextBtn.disabled = stepIdx === steps.length - 1;
  // Keep keyboard control alive when the focused button becomes disabled at a boundary.
  if (document.activeElement && document.activeElement.disabled) derivation.focus();
}
prevBtn.addEventListener('click', () => { stepIdx = Math.max(0, stepIdx - 1); renderStep(); });
nextBtn.addEventListener('click', () => { stepIdx = Math.min(steps.length - 1, stepIdx + 1); renderStep(); });
// Arrow-key navigation, so the "use ← →" hint is actually true.
derivation.addEventListener('keydown', (e) => {
  if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
  if (e.key === 'ArrowLeft')  { stepIdx = Math.max(0, stepIdx - 1); renderStep(); e.preventDefault(); }
  if (e.key === 'ArrowRight') { stepIdx = Math.min(steps.length - 1, stepIdx + 1); renderStep(); e.preventDefault(); }
});
renderStep();

// Quick-check — always explain WHY, on right and wrong alike.
document.querySelectorAll('.quick-check .q').forEach(q => {
  const correct = Number(q.dataset.answer);
  const why = q.dataset.why || '';
  const fb = q.querySelector('.feedback');
  q.querySelectorAll('.opt').forEach(btn => {
    btn.addEventListener('click', () => {
      q.querySelectorAll('.opt').forEach(b => b.classList.remove('correct', 'wrong'));
      const idx = Number(btn.dataset.idx);
      if (idx === correct) {
        btn.classList.add('correct');
        fb.textContent = why ? 'Right. ' + why : 'Right.';
      } else {
        btn.classList.add('wrong');
        q.querySelectorAll('.opt')[correct].classList.add('correct');
        fb.textContent = why ? 'Not quite — the right one is highlighted. ' + why
                             : 'Not quite — correct answer highlighted.';
      }
    });
  });
});
</script>

</body>
</html>

```


### `EXAMPLE.md`

```markdown
# Worked example: Maximum Likelihood Estimation

Shows the full pipeline this skill follows — topic in, arc chosen, interactions chosen, voice used — for one topic. MLE sits on the Math-ML side of the course split (it's foundational probability/ERM-adjacent material), so per `style-guide.md`'s "voice varies by course" rule this lesson can carry the fuller Math-ML register: story-analogy, a proverb-drop, dry aside, checkpoint tics — not the denser, analogy-poor GenAI register.

> **Read the quoted prose, not the bullet lengths.** The bullets below are *notes about* each section — what it does and why — and they run longer than the section itself. The actual page prose is only the quoted material inside them, and every one of those quotes is 1-3 sentences. Don't calibrate output length off this file's bullets; calibrate off the quotes, and off the caps in `references/interactive-html-spec.md`.

## Topic

Maximum Likelihood Estimation (MLE), as an entry point that later feeds into ELBO/variational inference — chosen because it's the first rung of a ladder that shows up explicitly in the GenAI board notes (page ~90: "F_θ(q) is a lower bound on l(θ)... Evidence Lower Bound (ELBO)" presupposes the reader already has MLE) and because the coin-toss framing is one of his confirmed running examples (`teaching-philosophy.md` §4).

## Arc applied, with voice

Internal scaffold names (Hook, Intuition, ...) are listed below for clarity, but none of them appear verbatim as a heading in the actual HTML — each section gets its own topic-specific `<h2>`, shown in brackets.

1. **Hook** — `<h2>Guessing a coin's bias before anyone taught you how</h2>` — opens on the coin toss, his confirmed paradigm case for "totally blind" estimation, in the rhetorical-question-then-answer pattern from §3: "You flip a coin 10 times, get 7 heads. How do you solve that problem if you're totally blind about the bias? Anybody? Well — you already know the answer is 0.7 before anyone teaches you a formula, right? MLE is just the formula that agrees with your gut."
2. **Intuition** — `<h2>Watch the likelihood peak</h2>` — a slider over a candidate bias $p \in [0,1]$ redraws the likelihood curve $L(p) = p^7(1-p)^3$ live; narration leans on dimensional/numeric grounding the way GenAI-side lectures do for abstract objects, but here paired with the story: "Slide $p$ from 0 to 1 and watch the curve. Okay — see where it peaks? That's not a coincidence."
3. **Make it precise** — `<h2>Typing the problem</h2>` — restate with typed notation per the board-notes convention (type everything immediately): data $D = \{x_1,\dots,x_n\}$, $x_i \overset{iid}{\sim} p_\theta$, unknown $\theta \in \Theta$, likelihood $L(\theta) = \prod_i p_\theta(x_i)$.
4. **The math** — `<h2>From a product no one can differentiate to a sum anyone can</h2>` — following the board-notes arc, narrated with checkpoint tics, every step showing the actual equation rather than just describing it:
   - *Define & type:* $\theta \in \Theta$, $x_i \overset{iid}{\sim} p_\theta$. "Right?"
   - *Naive goal:* "we'd like the $\theta$ under which the data was most probable" → displayed equation $\theta^* = \arg\max_\theta \prod_i p_\theta(x_i)$.
   - *Why it's awkward directly:* a product of $n$ probabilities underflows numerically and is hard to differentiate as a product — flagged directly, the way he names an obstruction rather than silently routing around it.
   - *Question:* "Is there a transform that turns the product into something we can actually differentiate and compute?"
   - *Doubt callout at the Question step* (collapsed `<details>`) — summary: "Doesn't taking a log change the answer?" / answer: "Yeah — the obvious worry. $\log$ is strictly increasing, so it moves the *value* of the objective but not the *location* of its maximum, and the location is all we're after. That's the whole reason this substitution is free."
   - *Derive the fix:* monotonicity of $\log$ lets us maximize $\sum_i \log p_\theta(x_i)$ instead of the raw product — shown as the actual rewritten equation, $\arg\max_\theta \prod_i p_\theta(x_i) = \arg\max_\theta \log\prod_i p_\theta(x_i) = \arg\max_\theta \sum_i \log p_\theta(x_i)$, not just described in words. "Do you see why? Same argmax, easier problem."
   - *Boxed result, with proverb framing per §6:* "So here is the statement" → $\hat\theta_{MLE} = \arg\max_\theta \sum_i \log p_\theta(x_i)$, named and boxed — exactly one box for this lesson.
   - *Doubt callout at the boxed result* — summary: "Why $\arg\max$ and not $\max$?" / answer: "Correct thing to ask. $\max$ gives you the height of the peak; $\arg\max$ gives you *where* it is. We want the parameter, not the likelihood value it achieves — so it's always $\arg\max$ that gets boxed."
   - *Ground it:* plug in the coin example from the hook — displayed equation $\frac{d}{dp}\big[7\log p + 3\log(1-p)\big] = 0 \Rightarrow \hat p = 7/10$ — not just the stated conclusion. "Got it?"
5. **Why it matters** — `<h2>Where this shows up again: ELBO</h2>` — connects forward the way his closings do (§7, recap-then-forward-pointer): this is exactly the $l(\theta)$ that reappears, intractable, in the ELBO derivation later — MLE is the thing you'd do directly if you could; ELBO exists because for latent-variable models you can't.
6. **Edges/next** — `<h2>What MLE won't tell you</h2>` — MLE has no opinion about overfitting or prior belief; closes with a light aside in the confirmed dry-self-deprecating register rather than a bare caveat list: "MLE will happily overfit a coin flipped twice and report $\hat p = 1$. All models are wrong, some are useful — this is one of the useful ones, as long as you don't ask it to be more confident than your data deserves." (bridges forward to MAP/regularization and to why intractable-likelihood models need ELBO)
7. **Quick-check** — `<h2>Check yourself</h2>` — "Why do we maximize log-likelihood instead of likelihood directly?" with the numerical-stability/differentiability answer as correct, a "because it's smaller" distractor, and a "no real reason, just convention" distractor. `data-why` on the question: *"A product of $n$ probabilities underflows to zero and has to be differentiated by the product rule; the log turns it into a sum, which is stable and differentiates term by term — and monotonicity means the argmax doesn't move."* Shown whether they answer right or wrong, so a lucky guess still leaves them with the reason.

## Interactions chosen and why

- Likelihood-curve slider in Intuition: earns its place because moving $p$ and watching the curve peak *is* the concept, not decoration. Hint caption beneath it — "drag $p$ and watch where the curve peaks" — because a reader who doesn't realize it's draggable gets nothing from it at all.
- Step-through derivation in The Math: matches the board-notes convention of narrating one move at a time, reinforced by the checkpoint-tic pacing confirmed in the transcripts rather than presenting a wall of algebra. Hint on the step counter, since a static-looking "1 / 6" reads as a lesson missing five steps.
- Two doubt callouts, collapsed, at the two places this derivation actually loses people: the log substitution and the $\arg\max$ vs. $\max$ distinction. Both are side-questions a student would raise a hand for and can't here. Collapsed means they cost a confident reader nothing — which is the only reason they're compatible with the conciseness caps.
- One box, for $\hat\theta_{MLE}$ only, introduced with "so here is the statement" — per both `board-notes-observations.md` and the confirmed verbal proverb-drop pattern in `teaching-philosophy.md` §6.
- No widget in Why it matters / Edges — those sections are connective, not conceptual; a forced widget there would violate "does this help intuition or is it noise?" from `interactive-html-spec.md`. Same test applies to doubt callouts: two, at the hard points, not one per section.

## Voice note

This lesson uses the evidence-backed Math-ML register: the coin-toss hook and "all models are wrong, some are useful" line are his confirmed recurring material (`teaching-philosophy.md` §4, quote bank), the rhetorical-question-then-self-answer move and checkpoint tics ("right?", "do you see why?", "got it?") are confirmed patterns (§3, `style-guide.md`), and the closing aside mirrors his documented dry, self-deprecating humor register rather than inventing a new joke style. The quick-check step doesn't stage a live wrong-answer exchange, but if the student gets it wrong in chat, respond per §5's now-evidenced pattern (acknowledge, then correct or defer, briskly). This lesson's register is Math-ML-specific — a GenAI-topic example (VAE, GAN, diffusion, attention) should be written in the denser, analogy-poor, Q&A-sparser register instead; do not reuse this lesson's tone as a template for that side of the course.

```


### `references/board-notes-observations.md`

```markdown
---
name: board-notes-observations
description: Structural patterns observed directly in Prathosh's handwritten lecture notes (Math-ML.pdf, GenAI-IITM.pdf) — how he sequences a derivation, what he boxes, how he annotates. Evidence-backed from the notes themselves, not from speech.
metadata:
  type: reference
---

# Board-notes observations

Source: direct visual inspection of `Math-ML.pdf` (146 pages, NPTEL "Mathematical Foundations of Machine Learning") and `GenAI-IITM.pdf` (147 pages, IIT-M "Mathematical Foundations of Generative AI"), sampled across ~15 pages spread from page 1 to the final page of each. These are board/note-taking-app renders (ruled paper, handwriting, two ink colors), not slides. No audio — this file captures *sequencing and notation*, not *voice*. Voice comes from `teaching-philosophy.md` once transcripts are available.

## The recurring derivation arc

Every worked derivation sampled follows close to the same skeleton:

1. **Section header**, underlined, standalone line (e.g. "Machine Learning", "Neural Networks.", "The Policy Gradient Theorem").
2. **Set up notation and types before doing anything with them.** Every object introduced gets its domain/codomain or dimension annotated immediately and physically next to it: `X : domain set (Input)`, `Y : Range set (output)`, `W₁ ∈ R^(l₁×d)`. Nothing is left untyped for later.
3. **State the ideal/naive goal plainly**, often as a one-line "Assume" or "Given ... find ..." — frequently boxed: `Given D, find f`.
4. **Name the obstruction explicitly**, usually with a `∵` (because) or "can't be... since": *"True risk function can't be minimized ∵ Pxy is unknown."* He never silently swaps in the practical version — he states why the ideal one fails first.
5. **Pose it as an explicit `Question:`** at a heading-like line before deriving the fix — e.g. *"Question: What choice of q(z) would make the ELBO tight?"*, *"Question: How to modify a GAN such that the inversion is possible?"* This is a deliberate device: the question is written down, not just implied, before the derivation that answers it.
6. **Introduce the surrogate/fix and derive it inline**, with connective phrases doing the narration between equations ("Start with some initial guess on f. 'refine' the guess using D (data)").
7. **Name and box the payoff result**, usually with the acronym introduced right there: `Empirical Risk Minimization (ERM)`, `Evidence Lower Bound (ELBO)`. The box is reserved for the thing you're meant to remember, not every equation.
8. **Follow up with a concrete instantiation** of the abstract object where one is available — e.g. right after defining `X, Y, D, f` abstractly, he immediately grounds it: *"Consider Xᵢ to be x-ray images"* with a small hand-drawn diagram turning a P×Q image into an R^(PQ) vector.

## Other structural conventions

- **Two-column contrast for before/after.** When a problem is reformulated (e.g. true risk vs. empirical risk, original optimization vs. modified optimization), both versions are written side by side or stacked with inline labels (`: original`, `: modified optimization`), not narrated separately.
- **Color as a semantic channel, not decoration.** In the GAN/diffusion training notes, green consistently marks the forward/generative path (`g_θ(z)`, sampling), red consistently marks gradients and parameter updates (`∇_θ J`, `θ^(t+1) ← θ^t − α∇...`). The color tells you which "direction" of computation you're looking at.
- **Composite objects built up with braces/brackets showing nesting**, not flattened — e.g. the 3-layer MLP `h_θ(x) = W₃[σ(W₂[σ(W₁x)])]` is written with visible bracket nesting matching the composition order, and `Θ = [W₁, W₂, W₃]` is written immediately after to name the full parameter set.
- **Architecture diagrams sit next to their equations**, not before or after in a separate figure block — the U-net "bowtie" and the GAN generator/discriminator/encoder triangles are drawn inline, arrows labeled with the exact tensor/variable names used in the adjacent equations.
- **`∴` (therefore) marks the logical payoff line**, distinguishing "still deriving" from "here's the conclusion."
- **Terse, declarative sentence fragments carry the narration**, not full prose — "The underlying function 'f' is unknown." / "One NN which predicts μ_θ(x_t) for any x_t." Connective tissue is minimal; the math and the fragments alternate.

## Implication for lesson generation

When building the "the math" section of a generated lesson, follow this arc rather than a generic textbook derivation order:
`define & type everything → state the naive goal → name why it fails → ask the question the fix answers → derive the fix → name + box the result → ground it in a concrete instance`.

Use color deliberately in any generated diagram (e.g. forward pass vs. gradient path) rather than decoratively. Prefer a boxed "remember this" callout over highlighting every equation. When two formulations are being compared, lay them out side by side rather than describing the difference in prose alone.

```


### `references/interactive-html-spec.md`

```markdown
---
name: interactive-html-spec
description: Technical rules for the interactive HTML lessons this skill produces — MathJax, widgets, layout, accessibility.
metadata:
  type: reference
---

# Interactive HTML spec

## Output format

- Single self-contained `.html` file. Inline `<style>` and `<script>`; MathJax loaded via its public CDN `<script>` tag is fine since these are local files the user opens directly, not claude.ai Artifacts (Artifacts disallow external requests — this skill's output is not published as an Artifact by default).
- No build step. Plain HTML/CSS/JS, MathJax 3 (`tex-mml-chtml.js`) for math rendering with `$...$` / `$$...$$` delimiters.
- Works standalone when opened from disk (`file://`) — no server assumed.

## Required structural blocks (from `assets/lesson-template.html`)

These blocks are the *internal* arc you write to — they are scaffolding names for you, the author, not copy. Never let "Hook", "Intuition", "Make it precise", "The math", "Why it matters", or "Edges & what's next" appear verbatim as a heading in the output. Every `<h2>` must be a topic-specific phrase a reader would actually want to read, so the lesson reads as one continuous lecture, not a labeled rubric. See "Headings" below for how to derive them.

1. **Header + progress bar** — topic title, short subtitle, a thin progress bar that fills as the reader scrolls through named sections.
2. **Hook** — a short, concrete opening (question, surprising fact, or minimal example) before any formalism. No equations in this block.
3. **Intuition** — picture/analogy-first explanation, ideally with one lightweight interactive element (slider, toggle) that lets the reader feel the concept before seeing its equation.
4. **Make it precise** — the informal intuition restated with correct notation, typed immediately per `board-notes-observations.md` conventions.
5. **The math** — the derivation itself, following the arc in `board-notes-observations.md`: define & type → naive goal → why it fails → explicit `Question:` → derive the fix → boxed named result → concrete instantiation. Use a step-through control (next/prev buttons or numbered reveal) rather than dumping the whole derivation at once. **Every step that performs an algebraic or logical manipulation must show the result of that manipulation as a displayed equation (`$$...$$`), not just describe it in prose.** "Add and subtract the mean and expand" is not a derivation step on its own — follow it with the actual expanded expression. A reader should be able to follow the derivation by reading only the equations, with the prose as narration alongside them, the way it would appear on his board.
6. **Why it matters** — connects the boxed result back to a real use case or to where it reappears later in a course.
7. **Edges / next** — caveats, failure modes, and a pointer to the natural next topic (mirrors "close a topic and bridge to the next" in `teaching-philosophy.md`).
8. **Quick-check** — 2-4 short self-check questions (multiple choice or numeric input) with immediate inline feedback, no server round-trip. **Every question carries a `data-why` attribute: one sentence saying why the correct answer is correct**, shown when the reader answers wrong. A wrong answer is the single highest-value learning moment on the page — the student has just discovered a gap and is motivated to close it. "Not quite — correct answer highlighted" wastes that moment entirely; it tells them *what* without *why*, so they memorize the option letter instead of the reason.
9. **Doubt callouts** — 2-3 collapsed `<details class="doubt">` boxes, placed inline at the derivation's `Question:` step and at the boxed result (the two points where readers actually get stuck). Each anticipates one specific plausible confusion for *this* topic and answers it in the register documented in `teaching-philosophy.md` §5: a one-word acknowledgment tic first ("Yeah — common one."), then a terse direct answer, or a named forward-pointer if a later topic covers it. Collapsed by default, so they add zero visible length for a reader who doesn't need them — this is what lets doubt-clearing coexist with the Conciseness rules below. A doubt callout answers a *side-question*; it never re-derives the main line, and it is not a place to park content that was cut for length.

## Conciseness (hard limit — this is the #1 failure mode)

Generated lessons have consistently come out too verbose. Enforce this strictly:

- **One short paragraph per prose block**, 2-3 sentences max, outside "the math." If you're about to write a second paragraph in hook/intuition/precise/why/edges, cut instead — pick the one sentence that's doing the real work and delete the rest.
- **Don't say the same thing twice in different words.** Each section advances the lesson one step; it does not restate what the previous section already established. If intuition already showed *why* something's needed, precise does not re-justify it — it just types it.
- **In "the math," the equations carry the argument.** Each derivation step gets at most one sentence of narration next to its equation(s) — never a paragraph explaining what the equation "really means" after already showing it. If the equation is clear, don't caption it.
- **"Why it matters" makes exactly one connection, in one or two sentences** — not a list of use cases. **"Edges" names at most two caveats**, one to two sentences each. Capping sentences-per-point isn't enough: four one-sentence caveats is still a mini-lecture, and a student remembers one caveat named sharply where they forget four named briskly. Three or more worth naming is a signal to pick the most consequential and cut the rest. Don't re-derive the mechanism — it was already derived in "the math."
- **Cut throat-clearing.** No "Let's take a moment to understand..." / "Now, it's important to note that..." — start the sentence at the content.
- **Spoken rhythm is a texture inside this budget, not a licence to exceed it.** `style-guide.md` documents his clause-chained lecture speech and checkpoint tics — apply that *within* the sentence caps above. One tic per sentence; never stack two or three ("right? — got it? — make sense?"). Where the two rules pull apart, conciseness wins.
- If a section still feels long after a pass, the fix is deletion, not tighter wording — cut the sentence, don't just compress it.

## Headings

- Write every `<h2>` as a topic-specific phrase, not the scaffold name. Think of it as the caption you'd actually put on that part of the board for *this* topic — e.g. for bias-variance: "Where does the error actually come from?" (hook), "Watch the tradeoff happen" (intuition), "Setting up the objects" (precise), "Cracking the error apart" (math), "Why this is the reason regularization exists" (why it matters), "What this doesn't cover" (edges). For MLE: "Guessing the coin's bias", "Watch the likelihood peak", "Typing the problem", "From product to sum", "Where this shows up again", "What MLE can't tell you".
- Section `id` attributes (`hook`, `intuition`, `precise`, `math`, `why`, `edges`, `check`) stay as-is internally for the progress bar and any anchor logic — only the visible `<h2>` text changes.
- Don't announce the section's function in its own heading ("Intuition:", "The Math:") — the content and the reader's momentum should make the function obvious without a label prefix.

## Running example / callback thread

Evidence-backed pattern (`teaching-philosophy.md` §4, `style-guide.md` "Recurring analogies and callbacks"): he doesn't reach for a fresh example in every section — he picks **one concrete running example for the whole lesson**, gives it narrative color once, then calls back to the same example tersely at later points instead of re-explaining it ("remember our example on the Bayesian estimate...", "let's go back to our typewriter-monkey problem").

Apply this to every generated lesson:
- Choose one concrete running example before writing any section. If the topic naturally fits one of the confirmed Math-ML story-analogies (coin toss, radiologist/X-ray, typewriter-monkey, flute/waveguide), reuse it rather than inventing a new one. If it doesn't fit and the topic is GenAI-flavored, use a concrete numeric/model instantiation instead (per the dimensional-grounding move in `style-guide.md`) — don't force a real-world story onto GenAI material or invent a new Math-ML-style analogy not in evidence.
- Introduce it with full narrative color exactly once — typically in the Hook or Intuition section.
- Callback to the *same* example, briefly, at natural later points: grounding the boxed result in "the math," and optionally in "why it matters." A callback should be short — a clause or a sentence — not a re-explanation from scratch.
- Don't introduce a second unrelated example partway through; if the intuition section needs a live widget, wire it to the same running example rather than a different one.

## Widget guidance

- A widget earns its place only if it changes what the reader *understands*, not decoration. A slider on a variance parameter that redraws a live plot is good; a slider that just replays a static GIF is not.
- Prefer `<canvas>` or inline SVG redrawn via JS for live plots over embedding external chart libraries (keeps it dependency-free besides MathJax).
- Every interactive control needs a visible current-value readout next to it (not just the slider handle position).
- **Every control also gets a short always-visible hint caption** (`<span class="hint">`) saying what to do with it — "drag to see the weights redistribute" beside a slider, "use ← → or Prev/Next" beside the step counter. A reader who doesn't realize the slider moves gets nothing from the widget, and a reader who doesn't realize the derivation is step-through thinks the lesson is missing five steps. This is a caption, not a doubt callout: one short phrase, always visible, no expand/collapse, and it does not count against the prose sentence budget.
- Keyboard-operable: sliders/buttons must be reachable and usable via Tab + arrow keys, not mouse-only. If the step-nav hint promises ← →, wire an actual `keydown` handler for it — a hint that lies is worse than no hint.

## Accessibility & responsiveness

- Semantic headings (`h1`/`h2`/`h3`) matching the structural blocks above, so the page has a real outline.
- `alt` text or an adjacent text description for any hand-drawn-style diagram, since these lessons are meant to also work for a screen-reader user.
- Relative units, `max-width` on the content column (~720-840px) for readability, responsive down to mobile width.
- Respect `prefers-color-scheme` — the page should not be unreadable in a user's dark-mode browser.
- Any color used semantically (e.g. forward-path vs. gradient-path per the board-notes color convention) must also be distinguishable without color alone (label, dash pattern, or icon) for colorblind readers.

## What NOT to do

- Don't fabricate a Prathosh quote or verbal tic not present in `teaching-philosophy.md`/`style-guide.md` — if those are still placeholders, write in a neutral precise voice instead of guessing at his phrasing.
- Don't box more than one or two results per lesson — over-boxing defeats the "this is the important part" signal observed in the notes.
- Don't add a widget just to prove the page is interactive; every element in the required blocks above should survive being asked "does this help intuition or is it noise?"

```


### `references/style-guide.md`

```markdown
---
name: style-guide
description: Phrase-level mechanics of Prathosh's teaching voice — stock phrases, analogy patterns, pacing, reassurance, and live Q&A handling. Evidence-backed from a full close-read of the 4 available lecture transcripts (2 Math-ML, 2 GenAI) plus the board notes; the one confirmed asymmetry is the "voice varies by course" note below.
metadata:
  type: reference
---

# Style guide

## Notation & formatting conventions — evidence-backed (from board notes)

These are safe to use now; see `board-notes-observations.md` for the full evidence.

- Type/annotate every symbol the moment it's introduced (domain, codomain, or dimension), never after.
- State the naive/ideal goal before the practical one, and say explicitly why the ideal one fails (`∵ ...`) rather than silently substituting the workable version.
- Pose the pivot of a derivation as an explicit `Question:` line before answering it.
- Reserve a boxed callout for the one result per section worth memorizing — not every equation.
- When two formulations are compared (true vs. empirical, original vs. modified), lay them out side by side with short inline labels rather than two separate paragraphs.
- Use color/visual channel consistently for one semantic distinction at a time (e.g. forward path vs. gradient path) if the medium supports it.
- Ground an abstract definition in one concrete instantiation immediately after stating it.

## Verbal phrasing, pacing, tone, humor, reassurance — evidence-backed (partial)

Sourced from `teaching-philosophy.md`'s quote bank (2 Math-ML + 2 GenAI transcripts). Full quotes and citations live there; this file distills them into reusable rules for lesson generation.

**Voice varies by course — do not flatten this.** Math-ML transcripts are humor-rich and analogy-rich; GenAI transcripts are dense, technical, and nearly humorless, leaning on recap/callback phrasing and dimensional grounding instead. Pick the register that matches the topic's home course, not a single averaged tone. A VAE/GAN/diffusion/attention/state-space/PPO lesson should read denser and more technical; a probability/ERM/SVM/regularization/PCA/RL lesson can carry more humor and story-analogy.

**Stock tics, roughly ranked by frequency:**
- `"right?"` — the single most frequent tic, a rhetorical check-in after nearly every clause, in both courses.
- `"Okay."` as a standalone paragraph-boundary marker — very high frequency, appears almost every few sentences.
- `"make sense?"` / `"got it?"` / `"do you see this?"` / `"do you see why?"` — comprehension-checkpoint tics threaded through derivations, several times per lecture.
- `"or rather"` — self-correcting hedge, used when restating something more precisely mid-sentence.
- Stutter-repeat: saying a word or short phrase twice before continuing — `"recall, recall that..."`, `"represent, represent..."` — observed specifically and repeatedly in the GenAI transcripts; not confirmed in Math-ML.
- Mild self-correction asides ("uh beg your pardon, there's no— it's not a network, it's a sampling operation") appear in GenAI material as texture — these read as corrections, not jokes; don't mistake them for humor.

**Transitioning into a hard derivation:** no single fixed warning phrase — the real move is posing a rhetorical question to the room and then answering it step by step ("How do you do that if you're totally blind? ... Anybody? ... that's a bad way to do it, right?"; "So what is a rollout? A rollout is..."). Occasionally names the size of an assumption directly ("You are making a big leap of faith that...").

**Transitioning out of one / payoff phrasing:** state the result as a flat, quotable line, sometimes explicitly flagged first ("So here is the statement. All models are wrong. Some are useful..."), then move directly to "we'll stop here and next class we'll..." — recap-then-forward-pointer, not a cliffhanger question.

**Recurring analogies and callbacks (Math-ML only, confirmed):** coin toss, radiologist/X-ray, typewriter-monkey problem, "all models are wrong, some are useful," flute/waveguide for phoneme modeling. Each is introduced once with narrative color, then referenced tersely later in a different lecture ("remember our example on the basian estimate...", "let's go back to our typewriter monkey problem"). **GenAI gap:** no equivalent story-analogies found yet — its grounding move is numeric/dimensional ("suppose your R is some 400 pixels...") or naming commercial products (ChatGPT, Gemini, Claude, Stable Diffusion), not storytelling. Don't invent a GenAI story-analogy to match the Math-ML pattern.

**Humor style:** dry, infrequent, concentrated in Math-ML material — a real anecdote (a colleague claiming "8 billion parameters" as if it were a personal achievement), a self-deprecating close ("why did I spend 90 minutes on this topic? Always happens that way"), historical trivia played for a light laugh (three names for one condition because "there are three different people, they did not collaborate"). GenAI transcripts mined so far show essentially none — don't inject jokes into a GenAI-topic lesson to force parity with the Math-ML voice.

**Sentence rhythm in speech vs. board writing:** confirmed different from the board notes. The board notes show terse declarative fragments; the spoken transcripts run long and clause-chained, larded with "uh," "right?," and the checkpoint tics above — closer to real spontaneous lecture speech than to the compressed board writing. When generating lesson prose meant to sound spoken (e.g. narration inside the "Make it precise" or "The math" steps), lean toward the clause-chained spoken rhythm with checkpoint tics; keep the boxed/typed notation itself terse per the board-notes conventions above. **Where this spoken-rhythm guidance and `interactive-html-spec.md`'s Conciseness rule pull in different directions, Conciseness wins.** Written prose a student reads alone is not speech a student hears in a room: the tics that give a lecture its pacing become padding on a page, because the reader sets their own pace. Use at most one checkpoint tic per sentence, never stack two or three, and prefer one clause-chained sentence to two separate ones — the rhythm is a texture applied inside the sentence budget, not a reason to exceed it.

**Pacing markers:** no numbered "let's make sure everyone's with me" ritual found — pacing is carried by the checkpoint tics threaded continuously through a derivation rather than one scheduled pause. He does periodically throw a wider comprehension check to the room mid-derivation — "any questions on the formulation, yeah", "any questions so far?", "Is there anybody who does not know what duality is?" — and will visibly change plan based on the answer, rather than a fixed scheduled pause.

**Live Q&A register (evidence-backed, Math-ML only — see `teaching-philosophy.md` §5 for full quotes):** a one- or two-word acknowledgment tic first ("Yeah.", "Correct.", "Exactly.", "that's a good question, right?"), then one of: a terse direct correction ("No it does not... Only policy depends on reward."), a named-and-scheduled deferral ("that's a question that we will answer... that is what we will see later"), or — for a plausible-but-wrong answer — a neutral restatement of the suggestion followed by the actual failure reason, sometimes redeemed later in the same lecture by naming the real concept it foreshadowed ("this is what is called as overfitting"). He also sometimes asks for the answer in English before in math ("Tell me in English what is the constraint?"), rewarding a conceptually-right answer before it's been formalized. Keep this register brisk and terse, not warm or Socratic — the evidence is short exchanges, not extended gentle dialogue.

**Course asymmetry on Q&A:** this live-correction pattern is confirmed only in the Math-ML transcripts, which capture an interactive classroom. No comparable exchange turned up anywhere in either GenAI transcript on a full pass — treat that as a real difference in register (GenAI reads as closer to monologue), not a mining gap. A GenAI-topic lesson's quick-check feedback should stay in the denser GenAI register rather than importing this back-and-forth wholesale.

```


### `references/teaching-philosophy.md`

```markdown
---
name: teaching-philosophy
description: Seven-category framework for Prathosh's teaching voice, answered in his first-person voice with verbatim quotes as evidence. Evidence-backed from a full close-read of the 4 available lecture transcripts (2 Math-ML, 2 GenAI); all seven categories now have direct evidence — see the course-asymmetry note for the one real remaining unevenness.
metadata:
  type: reference
---

# Teaching philosophy — evidence-backed

**Status: fully mined.** Evidence comes from a complete pass over `math ml lec transcription.docx` + `math ml lec transcription 2.0.docx` (Math-ML course: "Intro lecture", "Lec-1", "Lec 10 Challenge With ML", "Lec 33 Regularization", "Lec 37 SVM Formulation", a PCA/autoencoder lecture, "Lec 69 RL") and `Gen AI transcription.docx` + `gen AI transcription 2.0.docx` (GenAI course: W1_L1, W1_L2, W6_L21 Training VAE, Attention mechanism L41, W11_L50 PPO, W12_L54 State-space models). That's still only 2 of ~24 target transcripts per course (see `transcript-request.md`) — more transcripts would still deepen coverage — but every one of the seven categories below is now backed by a direct quote from these four files, including student-question handling (§5), which an earlier pass had missed entirely on a first read.

**Important asymmetry, carry this into every generated lesson:** the two courses do not sound the same in these transcripts. Math-ML is humor-rich and analogy-rich. GenAI is dense, technical, almost humorless, and analogy-poor — it leans on recap/callback phrasing and dimensional grounding instead of storytelling. Don't average the two into one uniform "he's always funny" voice. A lesson on a Math-ML-flavored topic (probability, ERM, SVMs, regularization, PCA, RL) can carry more humor and analogy; a lesson on a GenAI-flavored topic (VAEs, GANs, diffusion, attention, state-space models, PPO) should stay denser and more technical, per the actual evidence.

**Source-attribution note:** part of `Gen AI transcription.docx` (the W2 tutorial / MLP walkthrough section) is spoken by a teaching assistant, not Prathosh — it is excluded from all quotes below and must not be attributed to him.

Each category is phrased as a question "Prathosh" would answer in first person.

## 1. Why do I start a topic where I start it?

I open with a greeting, then name the topic, then one line of motivation — and if I'm continuing a thread, the recap comes before the motivation, not after:

> "Hello everyone, welcome to the NPTEL course on mathematical foundations of machine learning. Let's begin the first lecture. So you have seen that in today's era machines have started thinking." (Lec-1)

> "Hello everyone. Welcome to this course on deep generative models. My name is Prat and I am a faculty member at the division of EECS Indian Institute of Science Bengaluru." (GenAI, W1_L1)

> "Hello everyone. In this module, we are going to look at two improvised versions of uh policy gradient algorithms for aligning the language model to human preferences." (GenAI, W11_L50 PPO)

When resuming a thread rather than opening fresh, the recap comes first, motivation second: "So welcome everyone. So in today's lecture we will continue uh our discussion on the bias variance decomposition. So last time we saw that..." (Lec 33).

## 2. How do I build intuition before I build rigor?

On the Math-ML side, I reach for a real-world story first and only formalize after: the radiologist/X-ray analogy, the typewriter-monkey problem, the internal-combustion-engine analogy for why we learn foundations instead of just using tools ("of course you don't need to know how an internal combustion engine works to drive a car. But you need to know the inner workings if you want to build one," Lec-1). On the GenAI side, the transcripts show a different default: fewer stories, more dimensional/numeric grounding — "suppose your R is some 400 pixels and your C is 400 pixels... this would be 480,000 dimensionality of the data" (W1_L2) — and rhetorical questions I answer myself rather than narrative color: "What is a rollout? A rollout is enacting the policy, uh, in the RL framework" (PPO). When a distinction is genuinely subtle I flag it explicitly before proceeding: "Now what do we want to connect here is the question. Think about it. It's very subtle." (Lec-1).

## 3. What do I do when the math gets heavy?

I don't have one fixed warning phrase — the real move is a rhetorical question posed to the room and then answered step by step, with constant small checkpoint tics threaded through the derivation rather than one dramatic pause: "How do you do that if you're totally blind? How do you solve that problem? Anybody? ... Not present. Well, that's uh that's a bad way to do it, right?" (Lec-1). The checkpoint tics — "right?", "Okay.", "make sense?", "got it?", "do you see this?" — recur after nearly every algebraic step across both courses; they function as my way of pacing a dense derivation rather than a single "brace yourself" line. Occasionally I flag the size of an assumption directly: "You are making a big leap of faith that the underlying density function actually has this functional form." (Lec 10).

## 4. What analogies and running examples do I reach for?

Confirmed recurring ones, all from the Math-ML transcripts:
- **Coin toss** — the paradigm case for "totally blind" estimation, introduced in Lec-1, explicitly recalled two lectures later for the Bayesian-prior discussion (Lec 33).
- **Radiologist/X-ray** — function approximation grounded as "in fact in real world this function F is a pathologist or a radiologist... looking at the images these X-rays and diagnosing whether this X-ray correspond to a disease case" (Lec-1) — his running example for the rest of that lecture's dimensionality discussion.
- **Typewriter-monkey problem** — for the manifold hypothesis, set up then explicitly reapplied within the same lecture to the dataset-size argument (Lec 33).
- **"All models are wrong, some are useful"** — a proverb-drop, stated in Lec-1, reused verbatim as a punchline in Lec 10.
- **Flute/waveguide** — for how speech scientists modeled phoneme production: "it's like concatenate multiple pipes of different diameters... if somebody is familiar with playing a flute, you know what I'm talking about, right?" (Lec-1).

**Confirmed absence on the GenAI side, not a data gap:** a full pass of both GenAI transcripts turns up no equivalent real-world story-analogy anywhere — the only "grounding" move there is numeric/dimensional (pixel counts, parameter counts) or pointing at commercial products ("ChatGPT... Gemini... claude... stable diffusion," W1_L2), consistently, across every lecture mined. Treat this as an established stylistic fact about how he teaches GenAI material, not as thin evidence waiting to be filled in. Do not invent a GAN-counterfeiter or painter analogy for him — a GenAI lesson needing a grounding move should use the dimensional/numeric pattern that IS evidenced, not a Math-ML-style story.

## 5. How do I handle a wrong or half-formed student question?

**Evidence-backed** (found on a closer re-read of the Math-ML transcripts — these are classroom recordings with live interjections, not clean monologue, and the exchanges were there all along). The pattern is consistent across several separate moments in Lec-1, Lec 37, the PCA/autoencoder lecture, and Lec 69 RL:

1. **I solicit before I'm asked** — I throw a question at the room rather than waiting to be interrupted: "How do you do that if you're totally blind? How do you solve that problem? Anybody?" (Lec-1); "okay any questions on the formulation, yeah" (Lec-1); "Is there anybody who does not know what uh duality is in optimization theory?" (Lec 37) — and I adapt on the spot to the answer: "Okay. There are a few people. Okay. Let me just quickly tell you what it is." I do this again later in the same derivation with a lighter touch: "any questions so far?" (PCA lecture).
2. **I acknowledge before I evaluate** — a one- or two-word tic comes first, separate from the content of my answer: "Yeah.", "Correct.", "Exactly.", or naming it as a good question outright: "Yeah. Yeah. Correct. So, that's a good question, right?" (PCA lecture, on a question about rank-deficiency in PCA).
3. **A wrong or naive answer gets restated neutrally, then corrected with the actual reason, not just flagged wrong** — when a student suggests defining the function as literally equal to the observed data points (i.e., memorization), I don't say "wrong": "Well, that's uh that's a bad way to do it, right? I mean, the one suggestion is that uh you just define the function to be equal to yi at every point xi. But that's not a good uh estimate because—" and then I explain the actual failure mode (it doesn't generalize to unobserved x). Crucially, I circle back later in the same lecture and redeem the naive answer by naming the real concept it was groping toward: "In fact, [I'm] glad that you put this idea out because we will formalize this idea. This is what is called as overfitting." (Lec-1) — a wrong answer isn't a dead end, it's raw material for the next definition.
4. **I restate the question in my own words before answering it** — "The question is, if you make it to be a full rank matrix, then wouldn't W be identity? So, how do you uh How do you avoid that? You make it rank deficient." (PCA lecture). This does double duty: it confirms I understood the question correctly and it repeats the question for anyone in the room who didn't hear it.
5. **A question I'm not ready to answer yet gets a named placeholder, not a brush-off** — "that's a question that we will answer... I mean I told you right, we [are] begging the question since we do not know px, how do we calculate uh the distance metric — that is what we will see [later]" (Lec-1); "It's a number between 0 and one. I'll tell you what that is." (Lec 69 RL). The move is always: name that it's a real question, say explicitly that it's coming, don't answer it half-right just to have an answer.
6. **Quick corrections to a student's partial answer are terse and immediate, not gentled with padding** — "No it does not. No, the kernel transition kernel does not depend on the reward. Only policy depends on reward. We'll get to that." (Lec 69 RL, correcting a student's guess that the transition kernel depends on reward); "Yeah but you keep going back and forth, that's it. So the environment interacts with you actively, that's that's the difference." (same lecture, sharpening a student's partial distinction rather than just confirming it).
7. **I sometimes ask for English before I ask for math** — "Is this an unconstrained problem? It's not an unconstrained problem. There's a constraint. What is the constraint? ... No, not mathematically. Tell me uh in English what is the constraint?" (Lec 37 SVM) — the student's correct English answer gets "Exactly." before I convert it to notation myself. This is a distinct move from asking for the derivation directly: it separates "do you have the concept" from "can you write it," and lets a conceptually-right, notation-poor answer still land as a win.

**What this means for generated lessons:** the "quick-check" feedback in `interactive-html-spec.md` can now draw on a real register — brief acknowledgment tic, then either a named-and-scheduled deferral, a terse direct correction, or (for a plausible-but-wrong answer) a neutral restatement followed by the actual failure reason and, where it fits, a note that the wrong answer is pointing at a real upcoming concept. Don't invent warmth or Socratic hand-holding beyond this — the real register is brisk, not gentle; validation is a one-word tic, not a paragraph of reassurance.

**Course asymmetry still holds:** all of the above is from the Math-ML transcripts, which capture a live, interactive classroom. The GenAI transcripts mined so far read as closer to uninterrupted monologue — no comparable live-correction exchange turned up anywhere in either GenAI file on this pass. Treat that as a real difference in how the two courses were recorded/taught, not a gap to fill in by borrowing the Math-ML pattern wholesale — a GenAI-topic lesson's quick-check feedback should stay in the denser, more clipped GenAI register (see `style-guide.md`) even while using the acknowledge-then-correct structure above.

## 6. How do I signal "this is the important part, remember this"?

The clearest verbal signal is stating a result as a flat, quotable proverb-line and then repeating it: "So here is the statement. All models are wrong. Some are useful because they're density estimators." (Lec 10) — the "so here is the statement" framing precedes the line worth remembering. This lines up with the board-notes convention (`board-notes-observations.md`) of boxing exactly one named result per section: verbal emphasis and the boxed callout are the same instinct in two media. Outside of that, emphasis is carried by repetition of the checkpoint tics rather than a distinct "pay attention now" phrase.

## 7. How do I close a topic and bridge to the next one?

Consistent recap-then-forward-pointer pattern, not a cliffhanger question:

> "We'll stop here and next class what we should do is we should actually construct the dual optimization problem and solve the dual problem." (Lec 37 SVM)

> "So that brings us to the end of this particular session. I'll just quickly recap." — followed by an itemized recap, then "See you in the next session." (GenAI W1_L1)

For a full course close, the recap widens to the whole course and ends with thanks and good wishes: "So a quick summary of what we looked at right... started from probability theory... hope to see some of you in that next course... hope that you enjoyed the course. Thank you." (Lec 69, Math-ML course close); "I wish, uh, I wish and, uh, hope that this course was, uh, useful both in terms of theory and practical implications... I wish you all the best. Thank you." (GenAI course close).

## Verbatim quote bank

Organized by course; each quote is sourced to the transcript file and the nearest lecture header found in it. This is the evidence base `style-guide.md` draws its phrase-level entries from.

**Math-ML** (`math ml lec transcription.docx`, `math ml lec transcription 2.0.docx`):
- "So welcome everyone. So in today's lecture we will continue uh our discussion on the bias variance decomposition. So last time we saw that..." — Lec 33 Regularization, opening.
- "And I told you in the last class to look at these things called conter conditions, KKT conditions, right?" — Lec 37 SVM Formulation.
- "So just just recalling right we formally today defined what the problem of machine learning is..." — Lec-1, closing recap.
- "remember our example on the basian estimate right if we are tossing a coin and we are estimating the success probability using basian methods" — Lec 33.
- "In a market where everybody claims to be a data scientist... everybody and their grandmother is a data scientist nowadays." — Lec-1.
- "He was telling me that oh I'm using a larger model now... I asked him how many parameters does your model has? He says oh it has gone to eight now... so we are talking about 8 billion parameters right [laughter]" — Lec-1.
- "See I keep telling this jokingly to my students always that as engineers, you solve a problem empirically first and retrofit the math. [laughter] So that's how most papers are written, by the way." — PCA/autoencoder lecture.
- "It always happens that when I summarize the class for a day, it looks like why did I spend 90 minutes on this topic? Always happens that way. But anyway..." — Lec-1, close.
- "There's an interesting story why there are three names to this these particular conditions. There are three different people. They did not collaborate." — Lec 37.
- "That's why I made the mistake, right? So, when I talk of variance, I said it's minimizing. It's maximizing the projected variance or minimizing the projected error." — PCA/autoencoder lecture, self-correction.
- "Uh okay. Uh we will stop here and continue in the next lecture." — Lec 33, close.
- "Anybody? ... Not present. Well, that's uh that's a bad way to do it, right? I mean, the one suggestion is that uh you just define the function to be equal to yi at every point xi. But that's not a good uh estimate because—" — Lec-1, live student exchange on the naive memorization answer.
- "In fact [I'm] glad that you put this idea out because we will formalize this idea. This is what is called as overfitting." — Lec-1, redeeming the same naive answer later in the lecture.
- "okay any questions on the formulation, yeah ... that's a question that we will answer. The question is, I mean I told you right, we [are] begging the question since we do not know px, how do we calculate uh the distance metric — that is what we will see [later]." — Lec-1, named-and-scheduled deferral.
- "Is there anybody who does not know what uh duality is in optimization theory? Okay. There are a few people. Okay. Let me just quickly tell you what it is." — Lec 37, live comprehension check that changes his plan.
- "Is this an unconstrained problem? It's not an unconstrained problem. There's a constraint. What is the constraint? ... No, not mathematically. Tell me uh in English what is the constraint? ... Exactly. No point should be misclassified." — Lec 37, English-before-math move.
- "I think I made a mistake. Can somebody point the mistake?" — PCA/autoencoder lecture, inviting the room to catch his own error rather than silently fixing it.
- "Question? Yeah. Yeah. Correct. So, that's a good question, right? The question is, if you make it to be a full rank matrix, then wouldn't W be identity? So, how do you uh How do you avoid that? You make it rank deficient." — PCA/autoencoder lecture.
- "No it does not. No, the kernel transition kernel does not depend on the reward. Only policy depends on reward. We'll get to that." — Lec 69 RL, terse correction of a student's guess.
- "Yeah but you keep going back and forth, that's it. So the environment interacts with you actively, that's that's the difference." — Lec 69 RL, sharpening a student's partial distinction.

**GenAI** (`Gen AI transcription.docx`, `gen AI transcription 2.0.docx`):
- "So recall, recall that in the RL framework, a language model is viewed as a policy" — W11_L50 PPO.
- "So just to recap, what did we do was we started from the definition of state-space models," — W12_L54 SSM.
- "Now let us proceed with the gradient computation... let me just reiterate the data flow within a VAE so that the discussion on gradient computation is well appreciated." — W6_L21 Training VAE.
- "in the model that we saw so far, which is called the S4, what happens is the kernel is fixed, right?" — W12_L54 SSM, contrasting with Mamba.
- "uh beg your pardon. There's no it's not a network. It's a sampling operation" — W6_L21, self-correction (not humor).
- "So what is prefix sum in algorithms? One would know that given a particular sequence, you have to compute another sequence whose elements are cumulative sums..." — W12_L54 SSM.
- "let's take a very nice example of football... this deviation which is there is actually the error" — flagged as **TA voice, not Prathosh**, excluded as evidence of his own style.

```


### `references/transcript-request.md`

```markdown
---
name: transcript-request
description: Exact list/count of lecture transcripts still needed to fill teaching-philosophy.md and style-guide.md, and how to hand them over.
metadata:
  type: reference
---

# What transcripts are needed, and why this count

**Update: 4 real transcripts already supplied and fully mined** — `math ml lec transcription.docx`, `math ml lec transcription 2.0.docx` (Math-ML course) and `Gen AI transcription.docx`, `gen AI transcription 2.0.docx` (GenAI course), covering roughly 2 lectures' worth of material per course (several lecture transcripts are concatenated per file). They live in `source/transcripts/` on the maintainer's machine (not shipped in the packaged skill — see SKILL.md). `teaching-philosophy.md` and `style-guide.md` are now evidence-backed from a complete close-read of these — every one of the seven categories, including student-question handling, has direct quotes. This request is purely additive now: more transcripts would add range (more analogies, more topic areas, and would test whether the GenAI course really has no live Q&A or that's just these two lectures) rather than filling an empty category.

The board notes (`board-notes-observations.md`) already tell us *how Prathosh sequences a derivation*. They cannot tell us *how he talks* — phrasing, analogies, reassurance, humor, pacing — because they contain no speech, only what ended up on the board. That's the one thing only real lecture transcripts can supply, and it's the piece `teaching-philosophy.md` and `style-guide.md` draw from.

**Target: 24 transcripts total — 12 per course.** That's enough to see his range (early/mid/late in a course, easy vs. hard topics) without transcribing all 162 videos in the two playlists, which would be far more text than needed to extract a stable style (style saturates well before 162 lectures — most of the marginal value is in spreading across the course, not in raw volume).

Skip tutorial videos (`T1`, `T2`, ... in the GenAI playlist) — those are code walkthroughs (PyTorch mechanics), not conceptual teaching, and are a different register. Only lectures (`L` / `Lec`) count toward the 12+12.

## Course 1 — NPTEL "Mathematical Foundations of Machine Learning" (89 videos, IISc Bangalore)

Confirmed from the playlist so far:
1. Mathematical Foundations of Machine Learning (Intro) — 3:33
2. Lec 01 — Overview of Function Approximation — 47:50
3. Lec 02 — Recap of Probability Theory - 1, Part 1 — 32:13
4. Lec 03 — Recap of Probability Theory - 1, Part 2 — 14:30
5. Lec 04 — Recap of Probability Theory - 1, Part 3 — 29:06
6. Lec 05 — Recap of Probability Theory, Part 2 (title cut off in playlist view)

**Ask:** open the full 89-video playlist and pick 12 lecture transcripts spread across it — roughly one every 7-8 lectures — covering:
- The intro + Lec 01 (opening style, how he frames the course and first topic) — items 2-3 above
- 3-4 from the early/foundations third (probability recap, function approximation, ERM-era material — matches board-notes pages ~1-40)
- 3-4 from the middle third (neural networks, optimization — matches board-notes pages ~60-100)
- 3-4 from the late third (whatever the course closes on — matches board-notes pages ~110-146)

If you'd rather not hand-pick, just grab the NPTEL/SWAYAM transcript PDF for the whole course from the course's Downloads page if one exists — that's a single file and I can sample from it directly instead of you choosing 12.

## Course 2 — IIT Madras BS "Mathematical Foundations of Generative AI" (73 videos, Prof. Prathosh A P)

Confirmed from the playlist so far (Week 1):
1. W1_L1 — Course outline deep generative models — 9:33
2. W1_L2 — Introduction & problem setting: generative AI basics explained — 58:32
3. W1_L3 — F-divergence: variational divergence minimization in generative models — 28:44
4. W1_L4 — Variational divergence minimization — 26:09
(W1_T1-T3 are tutorials — skip per above)

**Ask:** all four Week 1 lectures above are a good start (covers his course-opening style). Then pick 8 more `L`-numbered lectures spread across weeks — e.g. one or two lectures each from roughly W3, W5, W7, W9, W11 (or whatever weeks exist up to the course's end) — to cover VAEs/ELBO territory, GAN territory, and diffusion/policy-gradient territory, which the board notes show all appear later in the course (pages ~35, ~90, ~130+).

## How to hand them over

Either:
- Paste/attach transcript text or PDF files directly in chat, or
- Drop them in a folder and tell me the path so I can read them with the Read tool, or
- If YouTube auto-captions are the only option, copy the caption text (Show transcript panel on the video → copy) even if messy — it's workable, just noisier than official transcripts.

## What happens once they arrive

I'll read across all 24 (or however many land), fill in the seven categories in `teaching-philosophy.md` with verbatim quotes and lecture citations, populate `style-guide.md`'s verbal-mechanics section, rewrite `EXAMPLE.md` with 1-2 more worked examples pulled from real topics, and regenerate a sample lesson so you can judge whether it actually sounds like him.

```