diff --git a/.gitignore b/.gitignore
index e9d39ff175..3d3471e152 100644
--- a/.gitignore
+++ b/.gitignore
@@ -57,6 +57,8 @@ mlruns/
 .link-cache.json
 .claude/
 catalog.json
+site/course/
+site/materials.js
 
 # Generated by site/build.js on every Vercel deploy (buildCommand) — never
 # commit, so they can't drift or drop URLs. Regenerated fresh from PHASES.
diff --git a/site/README.md b/site/README.md
new file mode 100644
index 0000000000..43d3dd80cf
--- /dev/null
+++ b/site/README.md
@@ -0,0 +1,20 @@
+# Run the course website locally
+
+The website is static and has no package dependencies. From the repository root:
+
+```sh
+node site/build.js
+python -m http.server 4173 --directory site
+```
+
+Open <http://localhost:4173>. Use `python3` instead of `python` on systems where that is the Python command.
+
+The build generates `site/data.js`, `site/materials.js`, and `site/course/`. The last two are ignored by Git because they are rebuilt from the course files already in this repository. Serve the site over HTTP instead of opening `index.html` directly so lesson and quiz files can be loaded by the browser.
+
+Progress, reading position, theme, and reading preferences are stored only in the current browser with `localStorage`. No account or backend is required.
+
+Run the progress tracker check with:
+
+```sh
+node site/tests/progress.test.js
+```
diff --git a/site/about.html b/site/about.html
index 53f76485b5..88e52ad837 100644
--- a/site/about.html
+++ b/site/about.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>About - AI Engineering from Scratch</title>
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' fill='%23fafaf5'/><rect x='2' y='2' width='28' height='28' fill='none' stroke='%233553ff' stroke-width='1.2'/><text x='6' y='22' font-size='14' font-family='monospace' fill='%233553ff'>AI</text></svg>">
-  <meta name="description" content="What AI Engineering from Scratch is, why it exists, who builds it, and how the site is made. A free, open-source, MIT-licensed curriculum.">
+  <meta name="description" content="About AI Engineering from Scratch, the open-source curriculum created by Rohit Ghumare and contributors.">
   <link rel="canonical" href="https://aiengineeringfromscratch.com/about.html">
   <meta property="og:title" content="About · AI Engineering from Scratch">
   <meta property="og:description" content="Why this curriculum exists, who builds it, and how the site is made. Free, open source, MIT.">
@@ -109,6 +109,11 @@
       <div class="about-eyebrow">About</div>
       <h1>About this project</h1>
 
+      <aside class="source-credit" aria-label="Original course attribution">
+        <strong>Built in the open.</strong>
+        <span>The <a href="https://github.com/rohitg00/ai-engineering-from-scratch" target="_blank" rel="noopener">AI Engineering from Scratch repository</a> and its course content are created and maintained by <a href="https://github.com/rohitg00" target="_blank" rel="noopener">Rohit Ghumare</a> and contributors. The website is part of the same open-source project.</span>
+      </aside>
+
       <p class="lede">AI Engineering from Scratch is a free, open-source curriculum that builds every core AI algorithm by hand. 503 lessons across 20 phases, from linear algebra to autonomous agents, in Python, TypeScript, Rust, and Julia.</p>
 
       <h2>Why it exists</h2>
@@ -120,7 +125,7 @@ <h2>How it is made</h2>
       <p>The site itself is deliberately plain: hand-written HTML, CSS, and vanilla JavaScript, no framework. A single build script (<code>site/build.js</code>) reads the lesson Markdown in the repository and generates the catalog, search index, sitemap, and <code>llms.txt</code> on every deploy, so the published numbers can never drift from the source. It is hosted on Vercel.</p>
 
       <h2>Who builds it</h2>
-      <p>Maintained by <a href="https://github.com/rohitg00" target="_blank" rel="noopener">Rohit Ghumare</a> and contributors. It is MIT-licensed and free forever. There is no token, no course upsell, and no gated content.</p>
+      <p>The curriculum and website are maintained by <a href="https://github.com/rohitg00" target="_blank" rel="noopener">Rohit Ghumare</a> and contributors. The project is MIT-licensed and free forever.</p>
 
       <h2>Get involved</h2>
       <ul>
diff --git a/site/app.js b/site/app.js
index 4092ae744b..8edce433fb 100644
--- a/site/app.js
+++ b/site/app.js
@@ -13,7 +13,9 @@
   document.addEventListener('DOMContentLoaded', function () {
     initThemeToggle();
     populateStats();
+    renderLearningCommand();
     renderPhases();
+    initCourseUniverse();
     initStaggerIndex();
     initModal();
     initCopyButton();
@@ -50,18 +52,21 @@
       var lessons = PHASES[i].lessons;
       totalLessons += lessons.length;
       for (var j = 0; j < lessons.length; j++) {
-        var staticDone = lessons[j].status === 'complete';
         var userDone = false;
         if (hasProgress && lessons[j].url) {
           var lp = window.AIFSProgress.extractPath(lessons[j].url);
           if (lp) userDone = window.AIFSProgress.isLessonComplete(lp);
         }
-        if (staticDone || userDone) completeLessons++;
+        if (userDone) completeLessons++;
       }
     }
     var completePhases = 0;
     for (var p = 0; p < PHASES.length; p++) {
-      if (PHASES[p].status === 'complete') completePhases++;
+      var phaseLessons = PHASES[p].lessons;
+      if (phaseLessons.length && phaseLessons.every(function (lesson) {
+        var path = lesson.url && hasProgress ? window.AIFSProgress.extractPath(lesson.url) : '';
+        return path && window.AIFSProgress.isLessonComplete(path);
+      })) completePhases++;
     }
     return {
       lessons: totalLessons,
@@ -113,13 +118,12 @@
       var total = p.lessons.length;
       var done = 0;
       for (var j = 0; j < p.lessons.length; j++) {
-        var staticDone = p.lessons[j].status === 'complete';
         var userDone = false;
         if (hasProgress && p.lessons[j].url) {
           var lp = window.AIFSProgress.extractPath(p.lessons[j].url);
           if (lp) userDone = window.AIFSProgress.isLessonComplete(lp);
         }
-        if (staticDone || userDone) done++;
+        if (userDone) done++;
       }
       var statusClass = p.status.replace(/ /g, '-');
       var roman = toRoman(p.id);
@@ -152,6 +156,177 @@
     }
   }
 
+  function courseLessons() {
+    var out = [];
+    for (var i = 0; i < PHASES.length; i++) {
+      for (var j = 0; j < PHASES[i].lessons.length; j++) {
+        var lesson = PHASES[i].lessons[j];
+        var path = lesson.url && window.AIFSProgress ? window.AIFSProgress.extractPath(lesson.url) : '';
+        if (path) out.push({ phase: PHASES[i], lesson: lesson, path: path });
+      }
+    }
+    return out;
+  }
+
+  function renderLearningCommand() {
+    var card = document.getElementById('learningCommand');
+    if (!card || !window.AIFSProgress) return;
+    var lessons = courseLessons();
+    if (!lessons.length) return;
+
+    var state = window.AIFSProgress.getState();
+    var completed = 0;
+    for (var i = 0; i < lessons.length; i++) {
+      if (state.lessons[lessons[i].path] && state.lessons[lessons[i].path].completedAt) completed++;
+    }
+    var overallPct = Math.round((completed / lessons.length) * 100);
+    var recent = window.AIFSProgress.getMostRecentLesson();
+    var recentIndex = -1;
+    if (recent) {
+      for (var r = 0; r < lessons.length; r++) {
+        if (lessons[r].path === recent.path) { recentIndex = r; break; }
+      }
+    }
+
+    var targetIndex = recentIndex >= 0 ? recentIndex : 0;
+    if (recentIndex >= 0 && window.AIFSProgress.isLessonComplete(lessons[recentIndex].path)) {
+      for (var n = recentIndex + 1; n < lessons.length; n++) {
+        if (!window.AIFSProgress.isLessonComplete(lessons[n].path)) { targetIndex = n; break; }
+      }
+    }
+    var target = lessons[targetIndex];
+    var targetProgress = window.AIFSProgress.getLessonProgress(target.path);
+    var readingPct = Math.round(targetProgress.scrollPercent || 0);
+
+    var ring = document.getElementById('learningProgressRing');
+    var pctEl = document.getElementById('learningProgressPct');
+    var kicker = document.getElementById('learningCommandKicker');
+    var title = document.getElementById('learningCommandTitle');
+    var meta = document.getElementById('learningCommandMeta');
+    var link = document.getElementById('continueLearning');
+    if (ring) ring.style.setProperty('--progress', (overallPct * 3.6) + 'deg');
+    if (pctEl) pctEl.textContent = overallPct + '%';
+    if (kicker) kicker.textContent = recent ? 'Continue · Phase ' + String(target.phase.id).padStart(2, '0') : 'Start · Phase ' + String(target.phase.id).padStart(2, '0');
+    if (title) title.textContent = target.lesson.name;
+    if (meta) meta.textContent = completed + ' of ' + lessons.length + ' lessons completed' + (readingPct > 1 ? ' · resume at ' + readingPct + '%' : '') + '. Progress stays saved on this device.';
+    if (link) {
+      link.href = 'lesson.html?path=' + encodeURIComponent(target.path) + (readingPct > 1 ? '&resume=1' : '');
+      link.textContent = readingPct > 1 ? 'Resume lesson' : (recent ? 'Continue learning' : 'Start course');
+    }
+  }
+
+  function initCourseUniverse() {
+    var scene = document.getElementById('courseUniverse');
+    var canvas = document.getElementById('courseUniverseCanvas');
+    var nodeLayer = document.getElementById('courseUniverseNodes');
+    if (!scene || !canvas || !nodeLayer || typeof PHASES === 'undefined') return;
+
+    var ctx = canvas.getContext('2d');
+    var nodes = [];
+    var points = [];
+    var rotationX = -0.18;
+    var rotationY = -0.45;
+    var dragging = false;
+    var previousX = 0;
+    var previousY = 0;
+    var reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+    for (var i = 0; i < PHASES.length; i++) {
+      var button = document.createElement('button');
+      button.type = 'button';
+      button.className = 'course-universe-node phase-card';
+      button.setAttribute('data-phase', i);
+      button.setAttribute('aria-label', 'Open Phase ' + PHASES[i].id + ': ' + PHASES[i].name);
+      button.title = 'Phase ' + PHASES[i].id + ' · ' + PHASES[i].name;
+      button.textContent = 'P' + String(PHASES[i].id).padStart(2, '0');
+      var phaseDone = PHASES[i].lessons.length > 0 && PHASES[i].lessons.every(function (lesson) {
+        var path = lesson.url && window.AIFSProgress ? window.AIFSProgress.extractPath(lesson.url) : '';
+        return path && window.AIFSProgress.isLessonComplete(path);
+      });
+      if (phaseDone) button.classList.add('done');
+      nodeLayer.appendChild(button);
+      nodes.push(button);
+
+      var angle = (i / PHASES.length) * Math.PI * 4.2;
+      var radius = 175 + (i % 3) * 31;
+      points.push({ x: Math.cos(angle) * radius, y: (i - (PHASES.length - 1) / 2) * 19, z: Math.sin(angle) * radius });
+    }
+
+    function project(point) {
+      var cosY = Math.cos(rotationY), sinY = Math.sin(rotationY);
+      var x1 = point.x * cosY - point.z * sinY;
+      var z1 = point.x * sinY + point.z * cosY;
+      var cosX = Math.cos(rotationX), sinX = Math.sin(rotationX);
+      var y1 = point.y * cosX - z1 * sinX;
+      var z2 = point.y * sinX + z1 * cosX;
+      var scale = 650 / (650 - z2);
+      return { x: x1 * scale, y: y1 * scale, z: z2, scale: scale };
+    }
+
+    function resize() {
+      var rect = scene.getBoundingClientRect();
+      var dpr = Math.min(window.devicePixelRatio || 1, 2);
+      canvas.width = Math.round(rect.width * dpr);
+      canvas.height = Math.round(rect.height * dpr);
+      canvas.style.width = rect.width + 'px';
+      canvas.style.height = rect.height + 'px';
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    }
+
+    function draw() {
+      var rect = scene.getBoundingClientRect();
+      ctx.clearRect(0, 0, rect.width, rect.height);
+      var projected = points.map(project);
+      var styles = getComputedStyle(document.documentElement);
+      ctx.strokeStyle = styles.getPropertyValue('--blueprint').trim() || '#3553ff';
+      ctx.globalAlpha = 0.32;
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      for (var i = 0; i < projected.length; i++) {
+        var p = projected[i];
+        var px = rect.width / 2 + p.x;
+        var py = rect.height / 2 + p.y;
+        if (i === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py);
+      }
+      ctx.stroke();
+      ctx.globalAlpha = 1;
+
+      for (var n = 0; n < nodes.length; n++) {
+        var pt = projected[n];
+        var scale = Math.max(0.62, Math.min(1.28, pt.scale));
+        nodes[n].style.transform = 'translate(-50%, -50%) translate3d(' + pt.x.toFixed(1) + 'px,' + pt.y.toFixed(1) + 'px,0) scale(' + scale.toFixed(2) + ')';
+        nodes[n].style.opacity = String(Math.max(0.45, Math.min(1, 0.72 + pt.z / 700)));
+        nodes[n].style.zIndex = String(Math.round(pt.z + 300));
+      }
+    }
+
+    function frame() {
+      if (!dragging) rotationY += 0.0014;
+      draw();
+      if (!reduced) window.requestAnimationFrame(frame);
+    }
+
+    scene.addEventListener('pointerdown', function (event) {
+      dragging = true;
+      previousX = event.clientX;
+      previousY = event.clientY;
+      scene.setPointerCapture(event.pointerId);
+    });
+    scene.addEventListener('pointermove', function (event) {
+      if (!dragging) return;
+      rotationY += (event.clientX - previousX) * 0.008;
+      rotationX = Math.max(-0.8, Math.min(0.55, rotationX - (event.clientY - previousY) * 0.005));
+      previousX = event.clientX;
+      previousY = event.clientY;
+      if (reduced) draw();
+    });
+    scene.addEventListener('pointerup', function () { dragging = false; });
+    scene.addEventListener('pointercancel', function () { dragging = false; });
+    window.addEventListener('resize', function () { resize(); draw(); });
+    resize();
+    frame();
+  }
+
   function toRoman(num) {
     var lookup = [
       ['M', 1000], ['CM', 900], ['D', 500], ['CD', 400],
@@ -301,6 +476,7 @@
         renderModalLessons(PHASES[currentPhaseIdx]);
       }
       populateStats();
+      renderLearningCommand();
       renderPhases();
     });
   }
diff --git a/site/build.js b/site/build.js
index d6e22e970d..e36f3a5cb8 100644
--- a/site/build.js
+++ b/site/build.js
@@ -400,6 +400,56 @@ function discoverArtifacts() {
 // ─── Main build ──────────────────────────────────────────────────────
 // Write the git ref this deploy was built from, so lesson.html fetches docs
 // from the right branch (PR previews render their own edits, not main).
+function listMaterialFiles(absDir, publicDir) {
+  if (!fs.existsSync(absDir)) return [];
+  const files = [];
+  function walk(dir, publicBase) {
+    for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+      const abs = path.join(dir, entry.name);
+      const href = `${publicBase}/${entry.name}`.replace(/\\/g, '/');
+      if (entry.isDirectory()) walk(abs, href);
+      else if (entry.name !== '.gitkeep') files.push({ name: entry.name, path: href, size: fs.statSync(abs).size });
+    }
+  }
+  walk(absDir, publicDir);
+  return files;
+}
+
+function collectMaterials(phases) {
+  const materials = {};
+  for (const phase of phases) {
+    for (const lesson of phase.lessons) {
+      if (!lesson.url) continue;
+      const rel = lesson.url.replace(GITHUB_BASE, '').replace(/\/+$/, '');
+      const abs = path.join(REPO_ROOT, rel);
+      materials[rel] = {
+        lesson: fs.existsSync(path.join(abs, 'docs', 'en.md')) ? `course/${rel}/docs/en.md` : '',
+        quiz: fs.existsSync(path.join(abs, 'quiz.json')) ? `course/${rel}/quiz.json` : '',
+        code: listMaterialFiles(path.join(abs, 'code'), `course/${rel}/code`),
+        outputs: listMaterialFiles(path.join(abs, 'outputs'), `course/${rel}/outputs`),
+        extras: listMaterialFiles(abs, `course/${rel}`).filter(file => !file.path.includes('/docs/') && !file.path.includes('/code/') && !file.path.includes('/outputs/') && !file.path.endsWith('/quiz.json')),
+      };
+    }
+  }
+  return materials;
+}
+
+function syncCourseContent() {
+  const target = path.join(__dirname, 'course');
+  if (!target.startsWith(__dirname + path.sep)) throw new Error('Unsafe course output path');
+  fs.rmSync(target, { recursive: true, force: true });
+  fs.mkdirSync(target, { recursive: true });
+  for (const dir of ['phases', 'projects', 'outputs', 'glossary']) {
+    const source = path.join(REPO_ROOT, dir);
+    if (fs.existsSync(source)) fs.cpSync(source, path.join(target, dir), { recursive: true });
+  }
+  for (const file of ['README.md', 'ROADMAP.md', 'LICENSE']) {
+    const source = path.join(REPO_ROOT, file);
+    if (fs.existsSync(source)) fs.copyFileSync(source, path.join(target, file));
+  }
+  console.log('   bundled complete course content');
+}
+
 function writeBuildMeta() {
   let ref = process.env.VERCEL_GIT_COMMIT_REF || '';
   if (!ref) {
@@ -449,6 +499,8 @@ function build() {
     }
   }
 
+  const materials = collectMaterials(phases);
+
   // Stats
   let totalLessons = 0;
   let completeLessons = 0;
@@ -477,6 +529,8 @@ const ARTIFACTS = ${JSON.stringify(artifacts, null, 2)};
 `;
 
   fs.writeFileSync(OUTPUT_PATH, output, 'utf8');
+  fs.writeFileSync(path.join(__dirname, 'materials.js'), '// Auto-generated by build.js - do not edit.\nwindow.MATERIALS = ' + JSON.stringify(materials) + ';\n', 'utf8');
+  syncCourseContent();
   console.log(`\n✅ Generated ${OUTPUT_PATH}`);
 
   syncCounts(totalLessons, phases.length, artifacts.length);
diff --git a/site/index.html b/site/index.html
index 6678e42201..9e9b6fb7a8 100644
--- a/site/index.html
+++ b/site/index.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>AI Engineering from Scratch</title>
+  <title>AI Engineering from Scratch - Interactive Course</title>
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' fill='%23fafaf5'/><rect x='2' y='2' width='28' height='28' fill='none' stroke='%233553ff' stroke-width='1.2'/><text x='6' y='22' font-size='14' font-family='monospace' fill='%233553ff'>AI</text></svg>">
   <meta name="description" content="AI Engineering from Scratch is a free, open-source curriculum that builds every core AI algorithm by hand — 503 lessons, 20 phases, four languages. The math, the model, the tokenizer, and the agent loop. Once, by hand.">
   <link rel="canonical" href="https://aiengineeringfromscratch.com/">
@@ -705,9 +705,13 @@
         <span>FIG_000 &middot; curriculum v1.0 · 2026</span>
         <span class="right">open source · MIT</span>
       </div>
+      <aside class="source-credit" aria-label="Original course attribution">
+        <strong>Free and open-source curriculum</strong>
+        <span><a href="https://github.com/rohitg00/ai-engineering-from-scratch" target="_blank" rel="noopener">AI Engineering from Scratch</a> is created and maintained by <a href="https://github.com/rohitg00" target="_blank" rel="noopener">Rohit Ghumare</a> and contributors. The repository contains the complete curriculum, lessons, code, quizzes, and reusable artifacts; this website adds an interactive course map, reading controls, navigation, and device-local progress tracking.</span>
+      </aside>
       <h1 class="manual-title">AI Engineering<br>from Scratch</h1>
       <p class="manual-tagline reveal">503 lessons. 20 phases. Every algorithm built from raw math before a single framework gets imported.</p>
-      <p class="manual-attribution reveal" style="--stagger-delay: 80ms;">Maintained by Rohit Ghumare and contributors. Run on your own machine.</p>
+      <p class="manual-attribution reveal" style="--stagger-delay: 80ms;">Created and maintained by Rohit Ghumare and contributors.</p>
       <div class="masthead-cta reveal" style="--stagger-delay: 140ms;">
         <a class="masthead-btn masthead-btn--primary" href="https://github.com/rohitg00/ai-engineering-from-scratch" target="_blank" rel="noopener" aria-label="Star ai-engineering-from-scratch on GitHub">
           <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 19.896l-7.416 3.517 1.48-8.279L0 9.306l8.332-1.151z"/></svg>
@@ -719,9 +723,38 @@ <h1 class="manual-title">AI Engineering<br>from Scratch</h1>
           <span>Follow @rohitg00</span>
         </a>
       </div>
+      <div class="course-universe reveal" id="courseUniverse" aria-label="Interactive 3D map of all 20 course phases">
+        <canvas class="course-universe-canvas" id="courseUniverseCanvas" aria-hidden="true"></canvas>
+        <div class="course-universe-nodes" id="courseUniverseNodes"></div>
+        <div class="course-universe-core" aria-hidden="true"><span>AI</span><small>20 PHASES</small></div>
+        <p class="course-universe-hint">Drag to rotate &middot; select a phase</p>
+      </div>
       <div class="ascii-rule" style="margin-top:48px;"></div>
     </section>
 
+    <section class="learning-command container" id="learningCommand">
+      <div class="learning-command-card reveal">
+        <div class="learning-command-progress" id="learningProgressRing" aria-hidden="true">
+          <strong id="learningProgressPct">0%</strong><span>complete</span>
+        </div>
+        <div class="learning-command-copy">
+          <div class="learning-command-kicker" id="learningCommandKicker">Your learning journey</div>
+          <h2 id="learningCommandTitle">Begin with the foundations</h2>
+          <p id="learningCommandMeta">Your lesson history, quiz answers, and reading position stay saved on this device.</p>
+          <div class="learning-command-actions">
+            <a class="learning-command-primary" id="continueLearning" href="#contents">Start course</a>
+            <a class="learning-command-secondary" href="prereqs.html">View roadmap</a>
+          </div>
+        </div>
+        <div class="learning-command-materials" aria-label="Included course material">
+          <span><b>503</b> lessons</span>
+          <span><b>499</b> artifacts</span>
+          <span><b>6</b> quiz questions per lesson</span>
+          <span><b>4</b> programming languages</span>
+        </div>
+      </div>
+    </section>
+
     <section class="preface container">
       <div class="preface-grid">
         <div class="preface-eyebrow reveal reveal--left">How this works</div>
diff --git a/site/lesson.html b/site/lesson.html
index b43f0b759f..55f9d708c6 100644
--- a/site/lesson.html
+++ b/site/lesson.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Lesson - AI Engineering from Scratch</title>
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' fill='%23fafaf5'/><rect x='2' y='2' width='28' height='28' fill='none' stroke='%233553ff' stroke-width='1.2'/><text x='6' y='22' font-size='14' font-family='monospace' fill='%233553ff'>AI</text></svg>">
-  <meta name="description" content="A lesson from the AI Engineering from Scratch curriculum. 503 lessons across 20 phases, four languages, every algorithm built from raw math.">
+  <meta name="description" content="Read a lesson and track your progress through AI Engineering from Scratch by Rohit Ghumare and contributors.">
   <link rel="canonical" href="https://aiengineeringfromscratch.com/lesson.html">
   <meta property="og:title" content="AI Engineering from Scratch · Lesson">
   <meta property="og:description" content="503 lessons. 20 phases. Write the backprop, the tokenizer, the attention mechanism, and the agent loop by hand.">
@@ -1560,6 +1560,57 @@
       .timeline-item { min-width: 70px; }
       .timeline-line { width: 20px; }
     }
+
+    .reader-dock {
+      position: fixed;
+      right: 18px;
+      bottom: 18px;
+      z-index: 95;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 6px;
+      border: 1px solid var(--rule-soft);
+      background: var(--header-bg);
+      box-shadow: var(--shadow-hard);
+      backdrop-filter: blur(12px);
+    }
+    .reader-dock > span {
+      padding: 0 8px;
+      font-family: var(--font-mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      color: var(--ink-mute);
+    }
+    .reader-dock button {
+      min-width: 34px;
+      height: 30px;
+      padding: 0 8px;
+      border: 1px solid transparent;
+      background: transparent;
+      color: var(--ink-soft);
+      font-family: var(--font-mono);
+      font-size: 0.7rem;
+      cursor: pointer;
+    }
+    .reader-dock button:hover,
+    .reader-dock button.active {
+      border-color: var(--blueprint);
+      color: var(--blueprint);
+      background: var(--blueprint-tint);
+    }
+    body.reader-small .lesson-article p,
+    body.reader-small .lesson-article li { font-size: 0.92rem; line-height: 1.58; }
+    body.reader-large .lesson-article p,
+    body.reader-large .lesson-article li { font-size: 1.12rem; line-height: 1.78; }
+    body.reader-focus .lesson-content { max-width: 680px; }
+
+    @media (max-width: 600px) {
+      .reader-dock { right: 10px; bottom: 10px; }
+      .reader-dock > span { display: none; }
+      .reader-dock button { min-width: 30px; padding: 0 6px; }
+    }
   </style>
 </head>
 <body>
@@ -1601,6 +1652,14 @@
 
   <button class="lesson-sidebar-toggle" id="sidebarToggle" aria-label="Toggle sidebar">&#9776;</button>
 
+  <div class="reader-dock" aria-label="Reading comfort controls">
+    <span>Reading</span>
+    <button type="button" data-reader-size="small" aria-label="Smaller text">A-</button>
+    <button type="button" data-reader-size="medium" aria-label="Default text size">A</button>
+    <button type="button" data-reader-size="large" aria-label="Larger text">A+</button>
+    <button type="button" id="readerFocus" aria-label="Toggle focused reading width">Focus</button>
+  </div>
+
   <div class="mermaid-modal-overlay" id="mermaidModalOverlay" aria-hidden="true">
     <div class="mermaid-modal" role="dialog" aria-modal="true" aria-label="Expanded diagram">
       <div class="mermaid-modal-header">
@@ -1628,6 +1687,7 @@
 
   <script src="build-meta.js"></script>
   <script src="data.js?v=20260525a"></script>
+  <script src="materials.js"></script>
   <script src="progress.js?v=20260525a"></script>
   <script src="header.js?v=20260525a" defer></script>
   <script src="cmdpalette.js?v=20260525a" defer></script>
@@ -1697,6 +1757,35 @@
         });
       }
 
+      function applyReaderSettings() {
+        var size = localStorage.getItem('aifs:reader:size') || 'medium';
+        var focus = localStorage.getItem('aifs:reader:focus') === 'true';
+        document.body.classList.remove('reader-small', 'reader-large', 'reader-focus');
+        if (size === 'small') document.body.classList.add('reader-small');
+        if (size === 'large') document.body.classList.add('reader-large');
+        if (focus) document.body.classList.add('reader-focus');
+        document.querySelectorAll('[data-reader-size]').forEach(function (control) {
+          control.classList.toggle('active', control.getAttribute('data-reader-size') === size);
+        });
+        var focusBtn = document.getElementById('readerFocus');
+        if (focusBtn) focusBtn.classList.toggle('active', focus);
+      }
+
+      document.querySelectorAll('[data-reader-size]').forEach(function (control) {
+        control.addEventListener('click', function () {
+          localStorage.setItem('aifs:reader:size', control.getAttribute('data-reader-size'));
+          applyReaderSettings();
+        });
+      });
+      var readerFocus = document.getElementById('readerFocus');
+      if (readerFocus) {
+        readerFocus.addEventListener('click', function () {
+          localStorage.setItem('aifs:reader:focus', String(!document.body.classList.contains('reader-focus')));
+          applyReaderSettings();
+        });
+      }
+      applyReaderSettings();
+
       var params = new URLSearchParams(window.location.search);
       var lessonPath = params.get('path');
 
@@ -1737,6 +1826,7 @@
               type: l.type,
               lang: l.lang,
               url: l.url,
+              materials: window.MATERIALS ? window.MATERIALS['phases/' + pSlug + '/' + lSlug] || null : null,
               path: 'phases/' + pSlug + '/' + lSlug,
               isReadable: l.status === 'complete' || !!l.url
             });
@@ -1843,12 +1933,31 @@
       function initScrollProgress() {
         var bar = document.getElementById('scrollProgress');
         if (!bar) return;
-        window.addEventListener('scroll', function () {
+        var saveTimer = null;
+        function updatePosition(save) {
           var scrollTop = window.scrollY || document.documentElement.scrollTop;
           var docHeight = document.documentElement.scrollHeight - window.innerHeight;
           var pct = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
           bar.style.width = pct + '%';
+          if (save && window.AIFSProgress) window.AIFSProgress.recordPosition(lessonPath, pct, scrollTop);
+        }
+        window.addEventListener('scroll', function () {
+          updatePosition(false);
+          if (saveTimer) clearTimeout(saveTimer);
+          saveTimer = setTimeout(function () { updatePosition(true); }, 350);
         }, { passive: true });
+        window.addEventListener('beforeunload', function () { updatePosition(true); });
+        updatePosition(false);
+      }
+
+      function restoreReadingPosition() {
+        if (params.get('resume') !== '1' || !window.AIFSProgress) return;
+        var progress = window.AIFSProgress.getLessonProgress(lessonPath);
+        if (!progress) return;
+        var docHeight = document.documentElement.scrollHeight - window.innerHeight;
+        var fromPercent = docHeight > 0 ? docHeight * ((progress.scrollPercent || 0) / 100) : 0;
+        var target = Math.max(progress.scrollY || 0, fromPercent);
+        if (target > 40) window.scrollTo({ top: target, behavior: 'smooth' });
       }
 
       function fetchLesson(path) {
@@ -1859,12 +1968,22 @@
         var base = 'https://raw.githubusercontent.com/rohitg00/ai-engineering-from-scratch/' + ref + '/';
         var rawUrl = base + path + '/docs/en.md';
         var quizUrl = base + path + '/quiz.json';
+        var localUrl = 'course/' + path + '/docs/en.md';
+        var localQuizUrl = 'course/' + path + '/quiz.json';
 
-        fetch(rawUrl)
-          .then(function (res) {
-            if (!res.ok) throw new Error('fetch-failed');
+        function fetchText(primary, fallback) {
+          return fetch(primary).then(function (res) {
+            if (!res.ok) throw new Error('local-fetch-failed');
             return res.text();
-          })
+          }).catch(function () {
+            return fetch(fallback).then(function (res) {
+              if (!res.ok) throw new Error('fetch-failed');
+              return res.text();
+            });
+          });
+        }
+
+        fetchText(localUrl, rawUrl)
           .then(function (md) {
             try {
               renderLesson(md);
@@ -1873,9 +1992,11 @@
               showError('Render error', 'Loaded the lesson markdown but failed to render it. Details in the browser console.');
               return;
             }
-            fetch(quizUrl)
-              .then(function (res) { return res.ok ? res.json() : null; })
-              .catch(function () { return null; })
+            fetch(localQuizUrl)
+              .then(function (res) { if (!res.ok) throw new Error('local-quiz-missing'); return res.json(); })
+              .catch(function () {
+                return fetch(quizUrl).then(function (res) { return res.ok ? res.json() : null; }).catch(function () { return null; });
+              })
               .then(function (data) {
                 if (!data) return;
                 try { renderQuiz(data); }
@@ -1955,7 +2076,7 @@
         var html = parseMd(md);
         html += '<div class="ai-panels" id="aiPanels"></div>';
         html = addBottomNav(html);
-        el.innerHTML = '<article class="lesson-article">' + html + '</article>';
+        el.innerHTML = '<aside class="source-credit lesson-source-credit" aria-label="Course attribution"><strong>Open-source course</strong><span>This lesson is part of <a href="https://github.com/rohitg00/ai-engineering-from-scratch" target="_blank" rel="noopener">AI Engineering from Scratch</a>, created and maintained by <a href="https://github.com/rohitg00" target="_blank" rel="noopener">Rohit Ghumare</a> and contributors.</span></aside><article class="lesson-article">' + html + '</article>';
 
         document.title = extractTitle(md) + ' - AI Engineering from Scratch';
         updateLessonSeo(extractTitle(md), md);
@@ -1965,6 +2086,7 @@
         if (window.mountLessonFigures) window.mountLessonFigures(el);
         renderAIPanels();
         buildTOC();
+        setTimeout(restoreReadingPosition, 500);
 
         document.querySelectorAll('a[href^="#"]').forEach(function (link) {
           link.addEventListener('click', function (e) {
@@ -2997,6 +3119,7 @@
         var container = document.getElementById('aiPanels');
         if (!container || !lessonPath) return;
 
+        renderMaterialsPanel(container);
         renderOutputsPanel(container);
         renderCodePanel(container);
         renderQuizPanel(container);
@@ -3060,12 +3183,53 @@
         return firstLine ? firstLine.trim().substring(0, 120) : '';
       }
 
+      function renderMaterialsPanel(container) {
+        var materials = currentLessonIndex >= 0 ? flatLessons[currentLessonIndex].materials : null;
+        if (!materials) return;
+        var panel = document.createElement('div');
+        panel.className = 'ai-panel';
+        var links = [];
+        if (materials.lesson) links.push({ label: 'Lesson notes', path: materials.lesson, detail: 'Complete narrative' });
+        if (materials.quiz) links.push({ label: 'Quiz source', path: materials.quiz, detail: 'All assessment questions' });
+        (materials.extras || []).forEach(function (file) {
+          links.push({ label: file.name, path: file.path, detail: formatSize(file.size) });
+        });
+        var html = '<div class="ai-panel-header"><div class="ai-panel-icon">M</div><div class="ai-panel-title">Complete Lesson Pack</div></div>';
+        html += '<div class="ai-panel-subtitle">Nothing omitted: notes, quiz, ' + materials.code.length + ' code files, ' + materials.outputs.length + ' outputs, and lesson extras</div>';
+        html += '<div class="output-cards">';
+        links.forEach(function (item) {
+          html += '<div class="output-card"><div class="output-badge other">Material</div><div class="output-card-name">' + escapeHtml(item.label) + '</div><div class="output-desc">' + escapeHtml(item.detail) + '</div><div class="output-actions"><a class="output-btn" href="' + escapeAttr(item.path) + '" target="_blank" rel="noopener">Open</a></div></div>';
+        });
+        html += '</div>';
+        panel.innerHTML = html;
+        container.appendChild(panel);
+      }
+
       function renderOutputsPanel(container) {
         var panel = document.createElement('div');
         panel.className = 'ai-panel';
         panel.innerHTML = '<div class="ai-panel-header"><div class="ai-panel-icon">O</div><div class="ai-panel-title">What This Lesson Ships</div></div><div class="ai-panel-subtitle">Prompts, skills, and artifacts you can use right now</div><div id="outputsContent" class="panel-loading">Loading outputs...</div>';
         container.appendChild(panel);
 
+        var localOutputs = currentLessonIndex >= 0 && flatLessons[currentLessonIndex].materials ? flatLessons[currentLessonIndex].materials.outputs : [];
+        if (localOutputs && localOutputs.length) {
+          var localHtml = '<div class="output-cards">';
+          localOutputs.forEach(function (file) {
+            var type = classifyOutput(file.name);
+            var badgeText = type === 'prompt' ? 'Prompt' : type === 'skill' ? 'Skill' : 'Output';
+            var artifact = typeof ARTIFACTS !== 'undefined' ? ARTIFACTS.find(function (item) { return file.path.endsWith(item.file); }) : null;
+            localHtml += '<div class="output-card">';
+            localHtml += '<div class="output-badge ' + type + '">' + badgeText + '</div>';
+            localHtml += '<div class="output-card-name">' + escapeHtml(file.name) + '</div>';
+            localHtml += '<div class="output-desc">' + escapeHtml(artifact && artifact.description ? artifact.description : 'Included with this lesson · ' + formatSize(file.size)) + '</div>';
+            localHtml += '<div class="output-actions"><a class="output-btn" href="' + escapeAttr(file.path) + '" target="_blank" rel="noopener">Open artifact</a></div>';
+            localHtml += '</div>';
+          });
+          localHtml += '</div>';
+          document.getElementById('outputsContent').innerHTML = localHtml;
+          return;
+        }
+
         ghApiFetch(lessonPath + '/outputs', function (err, data) {
           var el = document.getElementById('outputsContent');
           if (err || !data || !Array.isArray(data) || data.length === 0) {
@@ -3124,6 +3288,35 @@
         panel.innerHTML = '<div class="ai-panel-header"><div class="ai-panel-icon">C</div><div class="ai-panel-title">Run the Code</div></div><div class="ai-panel-subtitle">Executable files from this lesson</div><div id="codeContent" class="panel-loading">Loading code files...</div>';
         container.appendChild(panel);
 
+        var localCode = currentLessonIndex >= 0 && flatLessons[currentLessonIndex].materials ? flatLessons[currentLessonIndex].materials.code : [];
+        if (localCode && localCode.length) {
+          var localCodeHtml = '<div class="code-cards">';
+          localCode.forEach(function (file) {
+            var icon = langIcon(file.name);
+            var cmd = langCommand(file.name);
+            var repoPath = file.path.replace(/^course\//, '');
+            var runCmd = cmd + ' ' + repoPath;
+            localCodeHtml += '<div class="code-card">';
+            localCodeHtml += '<div class="code-card-header"><span class="code-lang-icon">' + icon + '</span><span class="code-card-name">' + escapeHtml(repoPath.split('/').slice(-2).join('/')) + '</span></div>';
+            localCodeHtml += '<div class="code-card-size">' + formatSize(file.size) + '</div>';
+            localCodeHtml += '<div class="code-card-run">' + escapeHtml(runCmd) + '</div>';
+            localCodeHtml += '<div class="code-card-actions"><a class="code-card-btn" href="' + escapeAttr(file.path) + '" target="_blank" rel="noopener">Open file</a><button class="code-card-btn code-card-copy" data-command="' + escapeAttr(runCmd) + '">Copy command</button></div>';
+            localCodeHtml += '</div>';
+          });
+          localCodeHtml += '</div>';
+          var localCodeEl = document.getElementById('codeContent');
+          localCodeEl.innerHTML = localCodeHtml;
+          localCodeEl.querySelectorAll('.code-card-copy').forEach(function (button) {
+            button.addEventListener('click', function () {
+              navigator.clipboard.writeText(button.getAttribute('data-command')).then(function () {
+                button.textContent = 'Copied!';
+                setTimeout(function () { button.textContent = 'Copy command'; }, 1500);
+              });
+            });
+          });
+          return;
+        }
+
         ghApiFetch(lessonPath + '/code', function (err, data) {
           var el = document.getElementById('codeContent');
           if (err || !data || !Array.isArray(data) || data.length === 0) {
@@ -3345,17 +3538,21 @@
 
         html += '<div class="learning-timeline">';
         if (hiddenBefore > 0) {
+          var hiddenBeforeDone = lessonsInPhase.slice(0, startIdx).every(function (item) {
+            return window.AIFSProgress && window.AIFSProgress.isLessonComplete(item.flat.path);
+          });
           html += '<span class="timeline-ellipsis" title="' + hiddenBefore + ' earlier lessons">&laquo; ' + hiddenBefore + '</span>';
-          html += '<div class="timeline-line done"></div>';
+          html += '<div class="timeline-line ' + (hiddenBeforeDone ? 'done' : '') + '"></div>';
         }
         visible.forEach(function (item, vIdx) {
           var idx = startIdx + vIdx;
           var isCurrent = idx === currentIdxInPhase;
-          var isPrev = idx < currentIdxInPhase;
-          var cls = isCurrent ? 'current' : isPrev ? 'prev' : '';
+          var isDone = window.AIFSProgress && window.AIFSProgress.isLessonComplete(item.flat.path);
+          var cls = isCurrent ? 'current' : isDone ? 'prev' : '';
 
           if (vIdx > 0) {
-            var lineCls = idx <= currentIdxInPhase ? (idx === currentIdxInPhase ? 'active' : 'done') : '';
+            var previousDone = window.AIFSProgress && window.AIFSProgress.isLessonComplete(visible[vIdx - 1].flat.path);
+            var lineCls = previousDone && isDone ? 'done' : (isCurrent && previousDone ? 'active' : '');
             html += '<div class="timeline-line ' + lineCls + '"></div>';
           }
 
@@ -3374,7 +3571,9 @@
         }
         html += '</div>';
 
-        var completedCount = currentIdxInPhase + 1;
+        var completedCount = lessonsInPhase.filter(function (item) {
+          return window.AIFSProgress && window.AIFSProgress.isLessonComplete(item.flat.path);
+        }).length;
         var totalCount = lessonsInPhase.length;
         var pct = Math.round((completedCount / totalCount) * 100);
 
@@ -3406,6 +3605,8 @@
 
         var html = '<div class="ai-panel-header"><div class="ai-panel-icon">N</div><div class="ai-panel-title">Continue Learning</div></div>';
         html += '<div class="continue-panel">';
+        var isComplete = window.AIFSProgress && window.AIFSProgress.isLessonComplete(lessonPath);
+        html += '<button type="button" class="btn btn-primary" id="lessonCompleteToggle">' + (isComplete ? 'Completed - mark unfinished' : 'Mark lesson complete') + '</button>';
 
         if (!next || !next.path) {
           html += '<div class="phase-finished">\u2705 You finished this phase!</div>';
@@ -3424,6 +3625,18 @@
 
         panel.innerHTML = html;
         container.appendChild(panel);
+        var completeToggle = document.getElementById('lessonCompleteToggle');
+        if (completeToggle && window.AIFSProgress) {
+          completeToggle.addEventListener('click', function () {
+            if (window.AIFSProgress.isLessonComplete(lessonPath)) {
+              window.AIFSProgress.unmarkLessonComplete(lessonPath);
+              completeToggle.textContent = 'Mark lesson complete';
+            } else {
+              window.AIFSProgress.markLessonComplete(lessonPath);
+              completeToggle.textContent = 'Completed - mark unfinished';
+            }
+          });
+        }
       }
 
       function escapeHtml(str) {
diff --git a/site/progress.js b/site/progress.js
index 3ef1a34398..421d9b635c 100644
--- a/site/progress.js
+++ b/site/progress.js
@@ -11,7 +11,9 @@
  *       "<lesson-path>": {
  *         answers: { "<qid>": { picked: number, correct: boolean, t: number } },
  *         completedAt: number | null,
- *         visitedAt: number
+ *         visitedAt: number,
+ *         scrollPercent: number,
+ *         scrollY: number
  *       }
  *     },
  *     updatedAt: number
@@ -56,7 +58,7 @@
 
   function ensureLesson(state, path) {
     if (!state.lessons[path]) {
-      state.lessons[path] = { answers: {}, completedAt: null, visitedAt: 0 };
+      state.lessons[path] = { answers: {}, completedAt: null, visitedAt: 0, scrollPercent: 0, scrollY: 0 };
     }
     return state.lessons[path];
   }
@@ -77,6 +79,16 @@
     write(state);
   }
 
+  function recordPosition(path, scrollPercent, scrollY) {
+    if (!path) return;
+    var state = read();
+    var lesson = ensureLesson(state, path);
+    lesson.visitedAt = Date.now();
+    lesson.scrollPercent = Math.max(0, Math.min(100, Number(scrollPercent) || 0));
+    lesson.scrollY = Math.max(0, Number(scrollY) || 0);
+    write(state);
+  }
+
   function markLessonComplete(path) {
     if (!path) return;
     var state = read();
@@ -99,7 +111,24 @@
   function getLessonProgress(path) {
     if (!path) return null;
     var state = read();
-    return state.lessons[path] || { answers: {}, completedAt: null, visitedAt: 0 };
+    return state.lessons[path] || { answers: {}, completedAt: null, visitedAt: 0, scrollPercent: 0, scrollY: 0 };
+  }
+
+  function getMostRecentLesson() {
+    var state = read();
+    var recent = null;
+    for (var path in state.lessons) {
+      var lesson = state.lessons[path];
+      if (!lesson || !lesson.visitedAt) continue;
+      if (!recent || lesson.visitedAt > recent.progress.visitedAt) {
+        recent = { path: path, progress: lesson };
+      }
+    }
+    return recent;
+  }
+
+  function getState() {
+    return read();
   }
 
   function isLessonComplete(path) {
@@ -159,6 +188,7 @@
 
   window.AIFSProgress = {
     recordVisit: recordVisit,
+    recordPosition: recordPosition,
     recordAnswer: recordAnswer,
     markLessonComplete: markLessonComplete,
     unmarkLessonComplete: unmarkLessonComplete,
@@ -167,6 +197,8 @@
     countCompletedFromUrls: countCompletedFromUrls,
     extractPath: extractPath,
     totalCompleted: totalCompleted,
+    getMostRecentLesson: getMostRecentLesson,
+    getState: getState,
     reset: reset,
     onChange: onChange,
   };
diff --git a/site/style.css b/site/style.css
index 1f82682249..1a68056570 100644
--- a/site/style.css
+++ b/site/style.css
@@ -1372,3 +1372,197 @@ body[data-palette-open] {
     display: none;
   }
 }
+
+/* Immersive curriculum map + personal learning command center */
+.theme-icon { font-size: 0; line-height: 1; }
+.theme-icon::before { content: "\263E"; font-size: 1.1rem; }
+[data-theme="dark"] .theme-icon::before { content: "\2600"; }
+
+.source-credit {
+  display: grid;
+  grid-template-columns: minmax(150px, 0.32fr) minmax(0, 1fr);
+  gap: 20px;
+  margin: 0 0 32px;
+  padding: 16px 18px;
+  border: 1px solid var(--blueprint);
+  background: var(--blueprint-tint);
+  color: var(--ink);
+}
+.source-credit strong {
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  letter-spacing: 0.1em;
+  line-height: 1.5;
+  text-transform: uppercase;
+  color: var(--blueprint);
+}
+.source-credit span {
+  font-family: var(--font-body);
+  font-size: 0.88rem;
+  line-height: 1.55;
+  color: var(--ink-soft);
+}
+.source-credit a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
+.lesson-source-credit { margin-bottom: 28px; }
+
+@media (max-width: 600px) {
+  .source-credit { grid-template-columns: 1fr; gap: 8px; padding: 14px; }
+}
+
+.course-universe {
+  position: relative;
+  height: clamp(420px, 55vw, 620px);
+  margin-top: 48px;
+  overflow: hidden;
+  border: 1px solid var(--rule-soft);
+  background: radial-gradient(circle at 50% 48%, var(--blueprint-tint-strong), transparent 22%), radial-gradient(circle at 50% 50%, var(--bg-surface), var(--bg) 72%);
+  box-shadow: inset 0 0 90px var(--blueprint-tint);
+  isolation: isolate;
+  touch-action: none;
+  cursor: grab;
+}
+
+.course-universe:active { cursor: grabbing; }
+.course-universe::before,
+.course-universe::after {
+  content: "";
+  position: absolute;
+  inset: 11%;
+  border: 1px solid var(--blueprint-tint-strong);
+  border-radius: 50%;
+  transform: perspective(700px) rotateX(67deg);
+  pointer-events: none;
+}
+.course-universe::after { inset: 22%; opacity: 0.55; transform: perspective(700px) rotateX(67deg) rotateZ(23deg); }
+.course-universe-canvas,
+.course-universe-nodes { position: absolute; inset: 0; width: 100%; height: 100%; }
+
+.course-universe-node {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  min-width: 48px;
+  height: 34px;
+  padding: 0 9px;
+  border: 1px solid var(--blueprint);
+  background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
+  color: var(--ink);
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  letter-spacing: 0.06em;
+  white-space: nowrap;
+  cursor: pointer;
+  transform-origin: center;
+  backdrop-filter: blur(8px);
+  box-shadow: 0 0 18px var(--blueprint-tint-strong);
+  transition: border-color 0.18s, color 0.18s, background 0.18s;
+}
+.course-universe-node:hover,
+.course-universe-node:focus-visible {
+  z-index: 100 !important;
+  border-color: var(--ink);
+  background: var(--blueprint);
+  color: var(--bg);
+  outline: 2px solid var(--bg);
+  outline-offset: 2px;
+}
+.course-universe-node.done::after {
+  content: "";
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--status-complete);
+  box-shadow: 0 0 8px var(--status-complete);
+}
+
+.course-universe-core {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 112px;
+  height: 112px;
+  display: grid;
+  place-content: center;
+  text-align: center;
+  transform: translate(-50%, -50%);
+  border: 1px solid var(--blueprint);
+  border-radius: 50%;
+  background: var(--bg);
+  color: var(--blueprint);
+  box-shadow: 0 0 24px var(--blueprint-tint-strong), 0 0 70px var(--blueprint-tint);
+  pointer-events: none;
+  z-index: 80;
+}
+.course-universe-core span { font-family: var(--font-display); font-size: 2.9rem; line-height: 0.8; }
+.course-universe-core small { margin-top: 8px; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.15em; }
+.course-universe-hint {
+  position: absolute;
+  left: 18px;
+  bottom: 14px;
+  z-index: 90;
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--ink-mute);
+  pointer-events: none;
+}
+
+.learning-command { padding-top: 28px; padding-bottom: 28px; }
+.learning-command-card {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) minmax(180px, 0.52fr);
+  gap: 32px;
+  align-items: center;
+  padding: clamp(24px, 4vw, 42px);
+  border: 1px solid var(--blueprint);
+  background: linear-gradient(135deg, var(--blueprint-tint), transparent 60%), var(--bg-surface);
+  box-shadow: var(--shadow-hard-lg);
+}
+.learning-command-progress {
+  --progress: 0deg;
+  width: 132px;
+  aspect-ratio: 1;
+  display: grid;
+  place-content: center;
+  text-align: center;
+  border-radius: 50%;
+  background: radial-gradient(circle closest-side, var(--bg-surface) 78%, transparent 80% 99%), conic-gradient(var(--blueprint) var(--progress), var(--rule-soft) 0);
+}
+.learning-command-progress strong { font-family: var(--font-display); font-size: 2rem; font-weight: 400; color: var(--blueprint); }
+.learning-command-progress span,
+.learning-command-kicker { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-mute); }
+.learning-command-copy h2 { margin: 8px 0 10px; color: var(--ink); font-size: clamp(1.65rem, 3vw, 2.4rem); }
+.learning-command-copy p { max-width: 680px; color: var(--ink-soft); }
+.learning-command-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
+.learning-command-primary,
+.learning-command-secondary {
+  padding: 9px 14px;
+  border: 1px solid var(--blueprint);
+  font-family: var(--font-mono);
+  font-size: 0.74rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.learning-command-primary { background: var(--blueprint); color: var(--bg); }
+.learning-command-secondary { color: var(--blueprint); }
+.learning-command-materials { display: grid; grid-template-columns: 1fr 1fr; border-left: 1px solid var(--rule-soft); }
+.learning-command-materials span { padding: 12px 14px; border-bottom: 1px solid var(--rule-soft); font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.04em; color: var(--ink-mute); }
+.learning-command-materials b { display: block; font-family: var(--font-display); font-size: 1.45rem; font-weight: 400; color: var(--ink); }
+
+@media (max-width: 860px) {
+  .learning-command-card { grid-template-columns: auto 1fr; }
+  .learning-command-materials { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--rule-soft); }
+}
+@media (max-width: 600px) {
+  .course-universe { height: 440px; margin-top: 32px; }
+  .course-universe-node { min-width: 40px; height: 30px; padding: 0 6px; font-size: 0.58rem; }
+  .course-universe-core { width: 88px; height: 88px; }
+  .course-universe-core span { font-size: 2.2rem; }
+  .learning-command-card { grid-template-columns: 1fr; gap: 22px; }
+  .learning-command-progress { width: 104px; }
+  .learning-command-materials { grid-column: auto; }
+}
diff --git a/site/tests/progress.test.js b/site/tests/progress.test.js
new file mode 100644
index 0000000000..19ec80a4be
--- /dev/null
+++ b/site/tests/progress.test.js
@@ -0,0 +1,43 @@
+const assert = require('node:assert/strict');
+const fs = require('node:fs');
+const vm = require('node:vm');
+
+const values = new Map();
+const localStorage = {
+  getItem: key => values.has(key) ? values.get(key) : null,
+  setItem: (key, value) => values.set(key, value),
+  removeItem: key => values.delete(key),
+};
+const window = { addEventListener() {} };
+
+vm.runInNewContext(fs.readFileSync('site/progress.js', 'utf8'), {
+  Date,
+  JSON,
+  Number,
+  String,
+  localStorage,
+  window,
+});
+
+const progress = window.AIFSProgress;
+const lesson = 'phases/00-setup-and-tooling/01-dev-environment';
+
+progress.recordVisit(lesson);
+progress.recordPosition(lesson, 42.5, 900);
+assert.equal(progress.getMostRecentLesson().path, lesson);
+assert.equal(progress.getLessonProgress(lesson).scrollPercent, 42.5);
+assert.equal(progress.getLessonProgress(lesson).scrollY, 900);
+
+progress.recordPosition(lesson, 120, -1);
+assert.equal(progress.getLessonProgress(lesson).scrollPercent, 100);
+assert.equal(progress.getLessonProgress(lesson).scrollY, 0);
+
+progress.markLessonComplete(lesson);
+assert.equal(progress.isLessonComplete(lesson), true);
+assert.equal(progress.totalCompleted(), 1);
+assert.equal(progress.extractPath(`https://github.com/example/repo/tree/main/${lesson}`), lesson);
+
+progress.reset();
+assert.deepEqual(JSON.parse(JSON.stringify(progress.getState())), { lessons: {}, updatedAt: 0 });
+
+console.log('progress tracker: ok');