diff --git a/.gitignore b/.gitignore
index b352ec1..758a3fe 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,12 @@
 node_modules/
 client/dist/
 .env
+*.log
 npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
 .DS_Store
+.vscode/
+.idea/
+*.swp
+
diff --git a/PRODUCT.md b/PRODUCT.md
new file mode 100644
index 0000000..1444c01
--- /dev/null
+++ b/PRODUCT.md
@@ -0,0 +1,157 @@
+# PyBe — Product Document
+
+> **Version:** 2.2.0
+> **Release Date:** July 2026
+> **Status:** Active development — IIT Ropar Summer Internship
+
+---
+
+## Version History
+
+| Version | Description |
+|---|---|
+| **v1.0.0** | Initial prototype — single-page React app, plain CSS, 30 classic scenarios, no routing, no auth |
+| **v2.0.0** | Multi-page redesign — React Router, 6 UADE themes, 54+ scenarios, HorcruxVault, premium dark UI |
+| **v2.1.0** | Auth system, left curriculum sidebar, sequential chapter learning flow, GSAP animations, docs-style theory reveal |
+| **v2.2.0** | Dynamic dashboard theme selector (Default, Potterheads, Marvel, Anime), theme-switched case studies & scenarios, tailored Dark & Light mode color palettes, **First-Principles Friction Simulator**, **Interactive Mental Model Lab**, **Instant Micro-Sandbox**, and **Socratic Misconception Spotter** |
+
+---
+
+## What's New in v2.2
+
+### 1. First-Principles Learning Engine
+- **Friction Simulator (Before vs After)**: Side-by-side comparison cards embedded in every chapter's Theory phase. Compares fragile manual code without the construct against clean Python code, explaining the exact pain point that forced computer scientists to invent the construct.
+- **Interactive Mental Model Lab**: Live hands-on visualizers embedded in the Theory phase showing RAM memory slots (`0x7F8`), arithmetic operator pipelines, zero-indexed string character arrays, decision tree flowchart branching, loop iteration steppers, array append/pop counters, hash table lookup tables ($O(1)$ key mapping), unique set buckets, function machine inputs/outputs, binary/linear search scanners, `try/except` exception shields, array sort steppers, and RAM $\rightarrow$ Disk storage buffers.
+- **Instant Micro-Sandbox / Interactive Try-It Widget**: Embedded live browser-based Python code editor and executor right below code examples. Features code resetting, live syntax validation, and an authentic dark terminal stdout console (`$ python main.py`).
+- **Socratic Misconception Spotter**: Automated analysis of student reasoning during the Reasoning Summary phase (`SummaryPhase`). Detects 5 common beginner mental traps (0-indexing offsets, `=` assignment vs `==` comparison, string immutability in RAM, parallel list desynchronization, unhandled edge-case inputs) and provides targeted Socratic guiding prompts.
+
+### 2. Dynamic Dashboard Theme System
+- Logged-in users can choose between 4 theme worlds on their dashboard:
+  1. **Default Theme** 🐍: Classic PyBe Chai Stall & ISRO experience.
+  2. **Potterheads** 🧙‍♂️: Hogwarts potions brewing, Marauder's map & spell vaults.
+  3. **Marvel** 🦾: Avengers AI, J.A.R.V.I.S. suit telemetry & Infinity Stone grid.
+  4. **Anime** ⚔️: Hidden Leaf Jutsu chakra engine & Legendary Creature hunter.
+
+### 3. Theme-Switched Case Studies & Scenarios
+- Choosing a theme dynamically updates case study arcs and scenario recommendations across the dashboard, case study browser, scenario browser, and chapter learning flow.
+- Core curriculum, syllabus structure, and Python theory remain completely preserved.
+- **93 Total Seeded Scenarios**: 54 Default/Classic + 13 Potterheads + 13 Marvel + 13 Anime scenarios covering all 13 curriculum chapters.
+
+### 4. Tailored Dark & Light Mode Color Palettes
+- Custom color tokens for both Light and Dark modes:
+  - **Potterheads Light**: Warm Hogwarts parchment background (`#FAF4E8`), wizard ink text (`#291E16`), Gryffindor amber accents (`#B45309`).
+  - **Marvel Light**: Stark Titanium metallic background (`#F1F5F9`), titanium dark text (`#0F172A`), Stark Red accents (`#DC2626`).
+  - **Anime Light**: Tokyo Sakura Lavender background (`#FAF5FF`), cyber dark text (`#1E1B4B`), Tokyo Magenta Pink accents (`#C026D3`).
+- **Landing Page Integrity**: Unauthenticated visitors on `/` retain standard public landing page styling untouched.
+
+### 1. Authentication (Login / Signup)
+- Local `localStorage`-based auth — no backend changes needed, fully offline-capable
+- `AuthContext.jsx` manages sessions, progress-per-user, and chapter completion state
+- Chapter completion is stored in `localStorage` keyed by `user.id` — survives browser refresh
+- `Protected` route guard — unauthenticated users are redirected to `/login`
+
+### 2. Left Curriculum Sidebar (replaces top navbar)
+- Fixed `260px` sidebar with collapsible sections
+- 4 sections: Getting Started, Basics, Intermediate, Advanced
+- 13 chapters total, each with status dot (○ not started / ✓ done)
+- Overall progress bar at the top
+- User chip with avatar initials
+- GSAP stagger-in animation on first render
+- Mobile: hamburger overlay that slides the sidebar in
+
+### 3. Sequential Chapter Learning Flow
+Every chapter follows a fixed 4-phase flow:
+
+| Phase | Description |
+|---|---|
+| **Intro** | Hook, what you'll figure out, setup scenario, "Let's go" |
+| **Questions** | Scenarios one-by-one (slide in/out with GSAP), plain-English reasoning textarea |
+| **Summary** | Reasoning recap with educational score labels (🔥 Excellent / ⚡ Strong / 💡 Good / 📈 Getting there / 🌱 Just beginning) |
+| **Theory** | Docs-style concept explanation (eyebrow → title → gradient concept name → prose → code block → callout → key takeaway → Mark Complete) |
+
+### 4. Educational Score System
+- Primary: backend learning engine score (`promptScore`) from keyword/concept matching
+- Fallback: client-side estimator based on reasoning length + quality signals (because/since/instead/organize/etc.)
+- Score displayed as level label + emoji + colour — not just a number
+- Per-answer badges in summary view
+
+### 5. Docs-style Theory Reveal (fixed)
+- Previously: GSAP `.from('.theory-body > *')` re-animated already-visible headings, causing them to flash/disappear
+- Fixed: All theory elements targeted by individual class selectors via `querySelectorAll`, then animated once with `gsap.set` + `gsap.to`. No double-animation.
+- Phase reset: `useEffect([chapterId])` resets all state when the chapterId param changes, so "Mark Complete → next chapter" always starts at Intro, not Theory.
+
+### 6. Curriculum Structure
+
+| Section | Chapters |
+|---|---|
+| 🌱 Getting Started | Variables, Operators & Math, Strings & Text |
+| 📚 Basics | Making Decisions (if/else), Loops, Lists |
+| ⚙️ Intermediate | Dictionaries, Sets, Functions, Search & Filter |
+| ⚡ Advanced | Error Handling, Algorithms, Files & Data |
+
+Each chapter contains: intro (hook, vibe, discover), theory (layman explanation, code example, real-world connection, key takeaway), and maps to 2–4 scenarios from the DB.
+
+### 7. Theory Content (per chapter)
+All 13 chapters have hand-written theory content in `curriculum.js`:
+- Written at a **junior student level** — plain English, no jargon
+- Explains the concept as a rediscovery of what the learner just reasoned about
+- Includes working code examples with in-line comments
+- Ends with a key takeaway sentence
+- Grounded in Barrows' PBL framework (theory emerges from lived problem)
+
+---
+
+## Deliberate Design Decisions
+
+### No Authentication Backend (by design)
+Auth is localStorage-only. This keeps the app 100% offline, requires zero database changes, and is appropriate for a single-user prototype. A real server-side auth layer is Phase 3.
+
+### No Python Sandbox (deferred to v3)
+The current interaction model (reason in English → theory reveal → code example) is Phase 2. Running actual Python (Pyodide/WASM or server-side exec) is Phase 3.
+
+### Left Sidebar Always Visible
+Research on educational platforms (Khan Academy, Codecademy, Brilliant) consistently shows that a persistent curriculum sidebar improves learner orientation. The sidebar shows progress at a glance and prevents the "where am I?" confusion of accordion menus.
+
+---
+
+## Routing Structure
+
+```
+/          → Landing page (public)
+/login     → Login  (redirect to /app if already logged in)
+/signup    → Signup (redirect to /app if already logged in)
+/app       → AppLayout (protected)
+  /app     → AppHome dashboard
+  /app/chapter/:id  → ChapterPage (4-phase learning flow)
+```
+
+---
+
+## API Routes
+
+| Route | Description |
+|---|---|
+| `GET /api/health` | `{"ok":true,"product":"PyBe","version":"2.0.0"}` |
+| `GET /api/casestudies` | All 6 UADE themes |
+| `GET /api/casestudies/:id` | One theme |
+| `GET /api/scenarios` | All 54 scenarios |
+| `GET /api/scenarios?concept=X` | Filter by concept |
+| `GET /api/scenarios?theme=X` | Filter by UADE theme |
+| `POST /api/sessions` | Submit a reasoning session, get back score + feedback |
+| `GET /api/analytics` | Aggregate stats (session count, concept counts, etc.) |
+
+---
+
+## Roadmap (V0 → V3)
+
+| Phase | What |
+|---|---|
+| V0 (done) | Single-page prototype, 30 scenarios, plain CSS |
+| V1 → v2.0 | Multi-page app, 6 UADE themes, 54+ scenarios, premium dark UI |
+| V2 → v2.1 | Auth, left sidebar, sequential chapter flow, docs-style theory, GSAP |
+| V3 (planned) | Python sandbox (Pyodide), audio input, leaderboard, real server-side auth |
+| V4 (planned) | LLM trained on Python textbooks, rhizomatic path selector, Piaget-stage adaptive delivery |
+
+---
+
+*PyBe v2.1 — IIT Ropar Summer Internship 2026 | Sukrit*
diff --git a/README.md b/README.md
index 5bc349d..8dc4e23 100644
--- a/README.md
+++ b/README.md
@@ -1,61 +1,206 @@
-# PyBe MERN App
+# PyBe v2.2
 
-PyBe is a scenario-driven Python learning prototype built from the supplied PRD and breakdown document. It has no login flow for now.
+> **Python through discovery. Not syntax — stories.**
 
-📚 View the project wiki: [WIKI.md](WIKI.md)
+PyBe is a scenario-driven Python learning platform built on **Problem-Based Learning** and the **Universal Abstraction Discovery Engine (UADE)** concept. Instead of teaching Python constructs directly, PyBe presents real-world problems that grow until the current approach breaks — forcing the learner to *rediscover* the construct themselves.
 
-## Features
+📚 [context.md](context.md) · [product.md](product.md) · [WIKI.md](WIKI.md)
 
-- Scenario browser with difficulty, concept, and search filters
-- Interactive learning session: learner reasoning, abstraction mapping, conversational prompts, Python construct generation, prompt scoring, and reflection capture
-- Dashboard with progress, prompt maturity, concept mastery, misconceptions, and recent sessions
-- Roadmap view covering V0 through V3 from the source documents
-- JSON-file backed API with seed data
+---
+
+## What's New in v2.2
+
+### 1. 🧠 First-Principles Learning Engine
+- **Friction Simulator (Before vs After)**: Side-by-side code comparison cards embedded in every chapter's Theory phase. Displays fragile manual code without the construct vs clean Python code, highlighting the exact pain point that led to the abstraction.
+- **Interactive Mental Model Lab**: Live hands-on visualizers embedded in the Theory phase showing RAM memory slots (`0x7F8`), arithmetic operator pipelines, zero-indexed string character arrays, decision tree flowchart branching, loop iteration steppers, array append/pop counters, hash table lookup tables ($O(1)$ key mapping), unique set buckets, function machine inputs/outputs, binary/linear search scanners, `try/except` exception shields, array sort steppers, and RAM $\rightarrow$ Disk storage buffers.
+- **Instant Micro-Sandbox / Interactive Try-It Widget**: Live browser-based Python code editor and executor embedded right below code examples. Features code resetting, live syntax validation, and an authentic dark terminal stdout console (`$ python main.py`).
+- **Socratic Misconception Spotter**: Automated analysis of student plain-English reasoning during the Reasoning Summary phase (`SummaryPhase`). Detects 5 common beginner mental traps (0-indexing offsets, `=` assignment vs `==` comparison, string immutability in RAM, parallel list desynchronization, unhandled edge-case inputs) and provides targeted Socratic guiding prompts.
+
+### 2. 🎨 Dynamic Dashboard Theme Engine & Theme-Switched Curriculum
+- **4 Theme Worlds**: Logged-in users can switch between **Default Theme** 🐍, **Potterheads** 🧙‍♂️, **Marvel** 🦾, and **Anime** ⚔️ directly from the dashboard.
+- **Theme-Switched Scenarios & Case Studies**: Choosing a theme dynamically switches case study arcs and chapter scenarios across the dashboard, case study browser, scenario browser, and chapter learning flow.
+- **Complete Chapter Coverage**: Every single one of the 13 curriculum chapters dynamically adapts its scenario questions, vibe, real-world connection, and code examples per active theme.
+
+### 3. 🌗 Tailored Light & Dark Modes
+- Custom HSL color variables and dedicated Light & Dark mode styling for every theme:
+  - **Potterheads**: Hogwarts Dark Parchment (`#1E1610`) & Warm Light Parchment (`#FAF4E8`) with Dark Wizard Ink (`#291E16`).
+  - **Marvel**: Stark Cyber Dark (`#0B132B`) & Titanium Light (`#F1F5F9`) with Slate Ink (`#0F172A`).
+  - **Anime**: Tokyo Neon Dark (`#120D1D`) & Sakura Lavender Light (`#FAF5FF`) with Cyber Ink (`#1E1B4B`).
+
+### 4. 📊 93 Total Seeded Scenarios
+- **54 Default/Classic Scenarios**: Real-world scenarios spanning Chai Stall, ISRO Space Mission Control, Instagram Filters, Food Delivery, AI Playlists, and Kota Merit Lists.
+- **39 Theme-Specific Scenarios**: 13 Potterheads + 13 Marvel + 13 Anime scenarios covering all 13 chapters.
+
+## What came in v2.1
+
+- **Login / Signup** — localStorage-based auth with per-user chapter progress tracking
+- **Left curriculum sidebar** — full syllabus always visible, 13 chapters across 4 sections
+- **Sequential chapter flow** — Intro → Questions → Reasoning Summary → Theory Reveal
+- **Docs-style theory** — concept explained as documentation (prose + code block + callout)
+- **GSAP animations** — staggered reveal on theory, slide transitions between phases
+- **Educational score display** — level labels (🔥 Excellent / ⚡ Strong / 💡 Good / 📈 Getting there / 🌱 Beginning) with client-side fallback scoring
+
+## What came in v2.0
+
+- Complete UI redesign — dark mode, glassmorphism, Space Grotesk + Inter typography
+- 6 UADE Case Study Themes — Chai Stall, ISRO, Instagram, Food Delivery, AI Playlist, Kota
+- 54+ scenarios — original 30 plus 24 theme-based scenarios
+- `/api/casestudies` endpoint + theme filtering on `/api/scenarios`
+
+---
+
+## Curriculum (13 Chapters)
+
+| Section | Chapters |
+|---|---|
+| 🌱 Getting Started | Variables · Operators & Math · Strings & Text |
+| 📚 Basics | Making Decisions · Loops · Lists |
+| ⚙️ Intermediate | Dictionaries · Sets · Functions · Search & Filter |
+| ⚡ Advanced | Error Handling · Algorithms · Files & Data |
+
+---
 
 ## Tech Stack
 
-- JSON file storage
-- Express + Node.js
-- React + Vite
-- Plain CSS, no auth
+- **Frontend:** React 18 + Vite + React Router v6 + GSAP 3
+- **Styling:** Vanilla CSS (custom properties, dark mode, glassmorphism)
+- **Fonts:** Space Grotesk (headings) + Inter (body) + JetBrains Mono (code)
+- **Backend:** Node.js + Express
+- **Data:** JSON file storage (`server/src/data/db.json`) — no MongoDB, no Docker
+- **Auth:** localStorage-based (prototype — no backend auth)
+- **Logic:** Deterministic rule-based learning engine (no external AI keys required)
+
+---
 
 ## Prerequisites
 
 - Node.js 18+
 
-## Setup
+---
 
-1. Install dependencies:
+## Setup
 
+### 1. Install dependencies
 ```bash
 npm run installAll
 ```
 
-2. Configure the server environment:
-
+### 2. Configure the server environment
 ```bash
+# Windows
+copy server\.env.example server\.env
+
+# macOS/Linux
 cp server/.env.example server/.env
 ```
+Default values work for local development.
 
-The default values work for local development.
-
-3. Seed sample data:
-
+### 3. Seed sample data
 ```bash
 npm run seed
 ```
 
-4. Run the app:
-
+### 4. Run the app
 ```bash
+# Start both servers together
 npm run dev
+
+# Or separately
+npm run dev --prefix server   # API on :5000
+npm run dev --prefix client   # App on :5173
+```
+
+- **App:** http://localhost:5173 → sign up, then start a chapter
+- **API:** http://localhost:5000/api
+
+---
+
+## API Endpoints
+
+| Method | Path | Description |
+|---|---|---|
+| GET | `/api/health` | `{"ok":true,"version":"2.0.0"}` |
+| GET | `/api/scenarios` | All 69 scenarios (`?q=`, `?concept=`, `?theme=`, `?caseStudyId=`) |
+| GET | `/api/scenarios/:id` | One scenario |
+| POST | `/api/sessions` | Submit reasoning session → returns score + code + feedback |
+| GET | `/api/sessions` | Recent sessions |
+| GET | `/api/analytics` | Aggregate learner stats |
+| GET | `/api/roadmap` | Learning roadmap phases |
+| GET | `/api/casestudies` | All case study themes (`?theme=default`, `?theme=potterheads`, `?theme=marvel`, `?theme=anime`) |
+| GET | `/api/casestudies/:id` | One theme |
+
+---
+
+## Project Structure
+
+```
+pybe/
+├── client/
+│   └── src/
+│       ├── context/
+│       │   └── AuthContext.jsx       # localStorage auth + progress tracking
+│       ├── data/
+│       │   └── curriculum.js         # 13 chapters with theory content + concept mappings
+│       ├── layouts/
+│       │   └── AppLayout.jsx         # Sidebar + content wrapper (protected)
+│       ├── components/
+│       │   └── CurriculumSidebar.jsx # Collapsible syllabus with progress dots
+│       ├── pages/
+│       │   ├── auth/
+│       │   │   ├── Login.jsx         # GSAP entrance, glassmorphism card
+│       │   │   └── Signup.jsx
+│       │   ├── AppHome.jsx           # Dashboard: progress bar, chapter list
+│       │   ├── ChapterPage.jsx       # 4-phase learning flow (Intro→Q→Summary→Theory)
+│       │   └── Home.jsx              # Public landing page
+│       ├── styles/
+│       │   ├── index.css             # Design system (CSS vars, dark mode, utilities)
+│       │   └── animations.css        # Keyframes
+│       ├── App.jsx                   # Router with Protected/GuestOnly guards
+│       └── main.jsx
+│
+├── server/
+│   └── src/
+│       ├── data/
+│       │   ├── db.json               # JSON data store (scenarios + sessions)
+│       │   ├── store.js              # CRUD helpers
+│       │   └── roadmap.js
+│       ├── routes/                   # scenarios, sessions, analytics, roadmap, casestudies
+│       ├── services/
+│       │   └── learningEngine.js     # Keyword mapper, code generator, prompt evaluator
+│       ├── seed.js                   # 54 scenarios (30 classic + 24 UADE themed)
+│       └── index.js
+│
+├── context.md                        # Pedagogical foundations
+├── product.md                        # Full product document (features, decisions, roadmap)
+└── README.md
 ```
 
-- Frontend: http://localhost:5173
-- API: http://localhost:5000/api
+---
+
+## Learning Flow (per chapter)
+
+```
+[Intro]      → Hook, what you'll discover, scenario setup
+    ↓  "Let's go"
+[Questions]  → Scenarios one at a time (GSAP slide-in)
+              → User writes plain-English reasoning
+    ↓  Last question submitted
+[Summary]    → All answers shown with educational score level
+              → "Now discover why →"
+    ↓
+[Theory]     → Docs-style: explanation prose → code block → callout → key takeaway
+              → "Mark as Complete ✓" → next chapter (always starts fresh at Intro)
+```
+
+---
 
 ## Notes
 
-The AI behavior in this prototype is deterministic and local. The abstraction mapper, prompt evaluator, and Python construct generator use rule-based logic so you can run everything without external AI keys. Later phases can replace those services with OpenAI, RAG, or TinyLLM components.
+- The AI behavior is deterministic and local — no external API keys needed
+- Learning data is in `server/src/data/db.json`; running `npm run seed` resets scenarios (not user progress)
+- User progress is in `localStorage` and persists across browser sessions
+- See `product.md` for full design decisions and `context.md` for the pedagogy
+
+---
 
-Learning data is stored in `server/src/data/db.json`. This keeps the prototype simple and fully local, without MongoDB, Docker, Atlas, or any external database.
+*PyBe v2.1 — IIT Ropar Summer Internship 2026 | Sukrut*
diff --git a/WIKI.md b/WIKI.md
index 85846b2..01b6f1f 100644
--- a/WIKI.md
+++ b/WIKI.md
@@ -12,12 +12,24 @@ The project is designed to demonstrate a proof-of-concept for a Python learning
 - Provides a roadmap of learning goals from V0 through V3
 
 ## Main Features
-- Scenario browser with difficulty, concept, and search filters
-- Interactive learning sessions with conversational prompts
-- Reasoning support, abstraction mapping, prompt scoring, and reflection capture
-- Dashboard with progress, prompt maturity, concept mastery, and misconceptions
-- Roadmap visualization for staged product development
-- Local JSON file storage with seedable sample data
+
+### 🧠 First-Principles Learning Engine
+- **First-Principles Friction Simulator**: Side-by-side Before vs After code comparison in every chapter revealing the pain point behind each Python construct.
+- **Interactive Mental Model Lab**: Live visualizer embedded in the Theory phase showing RAM memory slots (`0x7F8`), arithmetic pipelines, zero-indexed string cells, decision trees, loop steppers, hash tables, error shields, and sort steppers.
+- **Instant Micro-Sandbox / Interactive Try-It Widget**: Embedded live browser-based Python executor with dark terminal stdout (`$ python main.py`), code resetting, and live syntax validation.
+- **Socratic Misconception Spotter**: Automated analysis of student reasoning detecting 5 common beginner mental traps (0-indexing, `=` vs `==`, immutability, list desync, unhandled edge cases) with targeted Socratic prompts.
+
+### 🎨 Theme Systems & Content
+- **Dynamic Dashboard Themes**: Interactive theme selector on dashboard (Default 🐍, Potterheads 🧙‍♂️, Marvel 🦾, Anime ⚔️).
+- **Tailored Light & Dark Modes**: Bespoke color palettes for both Dark and Light modes across all themes (Hogwarts Parchment, Stark Titanium, Cyber Tokyo Lavender).
+- **Theme-Switched Case Studies & Scenarios**: Dynamic filtering of case study arcs and 93 total scenarios matching the active theme across all 13 curriculum chapters.
+- **Scenario Browser**: Filter scenarios by difficulty, concept, theme, and keyword search.
+
+### 📚 Learning Flow & Architecture
+- **Sequential Chapter Learning**: 13 chapters across 4 curriculum sections (Getting Started, Basics, Intermediate, Advanced).
+- **Interactive 4-Phase Learning Flow**: Intro → Questions → Reasoning Summary → Theory Reveal.
+- **Educational Scoring System**: Reasoning quality evaluator with level labels (🔥 Excellent / ⚡ Strong / 💡 Good / 📈 Getting there / 🌱 Beginning).
+- **Local JSON File Storage**: Seedable sample data (`server/src/data/db.json`) for 93 scenarios across all theme worlds.
 
 ## Technology Stack
 - Frontend: React + Vite
diff --git a/client/index.html b/client/index.html
index c880bd3..7e94d43 100644
--- a/client/index.html
+++ b/client/index.html
@@ -3,7 +3,12 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>PyBe</title>
+    <title>PyBe — Discover Python Through Real Stories</title>
+    <meta name="description" content="PyBe teaches Python through scenario-driven discovery. Don't learn syntax — rediscover why every Python construct was invented. From chai stalls to ISRO mission control." />
+    <meta name="theme-color" content="#0D1117" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
   </head>
   <body>
     <div id="root"></div>
diff --git a/client/package-lock.json b/client/package-lock.json
index 15e5231..c92024d 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -1,22 +1,25 @@
 {
   "name": "pybe-client",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "pybe-client",
-      "version": "1.0.0",
+      "version": "2.0.0",
       "dependencies": {
         "@vitejs/plugin-react": "^4.3.4",
+        "gsap": "^3.12.5",
         "lucide-react": "^0.468.0",
         "pybe-mern-app": "file:..",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-router-dom": "^6.28.0",
         "vite": "^6.0.7"
       }
     },
     "..": {
+      "name": "pybe-mern-app",
       "version": "1.0.0",
       "dependencies": {
         "concurrently": "^9.1.2"
@@ -697,6 +700,15 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.23.3",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.3.tgz",
+      "integrity": "sha512-4An71tdz9X8+3sI4Qqqd2LWd9vS39J7sqd9EU4Scw7TJE/qB10Flv/UuqbPVgfQV9XoK8Np6jNquZitnZq5i+Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-beta.27",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
@@ -1236,6 +1248,12 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/gsap": {
+      "version": "3.15.0",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.15.0.tgz",
+      "integrity": "sha512-dMW4CWBTUK1AEEDeZc1g4xpPGIrSf9fJF960qbTZmN/QwZIWY5wgliS6JWl9/25fpTGJrMRtSjGtOmPnfjZB+A==",
+      "license": "Standard 'no charge' license: https://gsap.com/standard-license."
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -1398,6 +1416,38 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.30.4",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.4.tgz",
+      "integrity": "sha512-SVUsDe+DybHM/WmYKIVYhZh1o5Dcuf16yM6WjG02Q9XVFMZIJyHYhwrr6bFBXZkVP6z69kNkMyBCujt8FaFLJA==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.23.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.30.4",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.4.tgz",
+      "integrity": "sha512-q4HvNl+mmDdkS0g+MqiBZNteQJCuimWoOyHMy4T/RQLAn9Z29+E91QXRaxOujeMl2HTzRSS0KFPd7lxX3PjV0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.23.3",
+        "react-router": "6.30.4"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/rollup": {
       "version": "4.62.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.62.0.tgz",
diff --git a/client/package.json b/client/package.json
index d45cb82..23eab93 100644
--- a/client/package.json
+++ b/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pybe-client",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "private": true,
   "scripts": {
     "dev": "vite",
@@ -9,10 +9,15 @@
   },
   "dependencies": {
     "@vitejs/plugin-react": "^4.3.4",
+    "gsap": "^3.12.5",
     "lucide-react": "^0.468.0",
     "pybe-mern-app": "file:..",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.28.0",
     "vite": "^6.0.7"
+  },
+  "allowScripts": {
+    "esbuild@0.25.12": true
   }
 }
diff --git a/client/src/App.jsx b/client/src/App.jsx
new file mode 100644
index 0000000..042de74
--- /dev/null
+++ b/client/src/App.jsx
@@ -0,0 +1,106 @@
+import React, { Suspense, lazy } from 'react';
+import { BrowserRouter, Routes, Route, Navigate, useLocation } from 'react-router-dom';
+import { AuthProvider, useAuth } from './context/AuthContext.jsx';
+
+// Auth pages (eager — small, always needed)
+import Login  from './pages/auth/Login.jsx';
+import Signup from './pages/auth/Signup.jsx';
+
+// Lazy pages
+const Home      = lazy(() => import('./pages/Home.jsx'));
+const AppLayout = lazy(() => import('./layouts/AppLayout.jsx'));
+const AppHome   = lazy(() => import('./pages/AppHome.jsx'));
+const ChapterPage = lazy(() => import('./pages/ChapterPage.jsx'));
+
+function PageLoader() {
+  return (
+    <div style={{
+      minHeight: '100vh', display: 'grid', placeItems: 'center',
+      background: 'var(--bg-base)', flexDirection: 'column', gap: 16,
+    }}>
+      <div style={{ textAlign: 'center' }}>
+        <div style={{
+          width: 36, height: 36, borderRadius: '50%',
+          border: '3px solid rgba(168,255,62,0.2)',
+          borderTop: '3px solid var(--accent)',
+          animation: 'spin 0.7s linear infinite',
+          margin: '0 auto 14px',
+        }} />
+        <div style={{ fontFamily: 'Space Grotesk, sans-serif', color: 'var(--accent)', fontSize: '0.95rem' }}>
+          Loading PyBe…
+        </div>
+      </div>
+      <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
+    </div>
+  );
+}
+
+// Protected route — redirects to /login if not authenticated
+function Protected({ children }) {
+  const { user, loading } = useAuth();
+  const location = useLocation();
+  if (loading) return <PageLoader />;
+  if (!user) return <Navigate to="/login" state={{ from: location }} replace />;
+  return children;
+}
+
+// Guest-only route — redirects to /app if already logged in
+function GuestOnly({ children }) {
+  const { user, loading } = useAuth();
+  if (loading) return <PageLoader />;
+  if (user) return <Navigate to="/app" replace />;
+  return children;
+}
+
+function AppRoutes() {
+  return (
+    <Suspense fallback={<PageLoader />}>
+      <Routes>
+        {/* Public landing */}
+        <Route path="/" element={<Home />} />
+
+        {/* Auth */}
+        <Route path="/login"  element={<GuestOnly><Login /></GuestOnly>} />
+        <Route path="/signup" element={<GuestOnly><Signup /></GuestOnly>} />
+
+        {/* Protected app */}
+        <Route
+          path="/app"
+          element={<Protected><AppLayout /></Protected>}
+        >
+          <Route index element={<AppHome />} />
+          <Route path="chapter/:chapterId" element={<ChapterPage />} />
+        </Route>
+
+        {/* Catch-all */}
+        <Route path="*" element={
+          <div style={{
+            minHeight: '100vh', display: 'grid', placeItems: 'center', textAlign: 'center',
+          }}>
+            <div>
+              <div style={{ fontSize: '4rem', marginBottom: 16 }}>🐍</div>
+              <h2 style={{ color: 'var(--text-primary)', fontFamily: 'Space Grotesk' }}>
+                Page not found
+              </h2>
+              <a href="/" style={{
+                display: 'inline-block', marginTop: 16, padding: '12px 24px',
+                background: 'var(--accent)', color: '#0D1117', borderRadius: 10,
+                fontWeight: 700, textDecoration: 'none',
+              }}>Go Home</a>
+            </div>
+          </div>
+        } />
+      </Routes>
+    </Suspense>
+  );
+}
+
+export default function App() {
+  return (
+    <BrowserRouter>
+      <AuthProvider>
+        <AppRoutes />
+      </AuthProvider>
+    </BrowserRouter>
+  );
+}
diff --git a/client/src/components/CaseStudyCard.jsx b/client/src/components/CaseStudyCard.jsx
new file mode 100644
index 0000000..880cf69
--- /dev/null
+++ b/client/src/components/CaseStudyCard.jsx
@@ -0,0 +1,150 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ArrowRight, Layers } from 'lucide-react';
+
+export default function CaseStudyCard({ caseStudy }) {
+  const navigate = useNavigate();
+
+  return (
+    <div
+      className="cs-card card hover-lift"
+      style={{ '--cs-color': caseStudy.color }}
+    >
+      {/* Top color bar */}
+      <div className="cs-card__bar" />
+
+      <div className="cs-card__body">
+        <div className="cs-card__emoji">{caseStudy.emoji}</div>
+        <div className="cs-card__header">
+          <span className="cs-card__difficulty">{caseStudy.difficulty}</span>
+          <span className="cs-card__steps">
+            <Layers size={12} /> {caseStudy.totalSteps} steps
+          </span>
+        </div>
+        <h3 className="cs-card__title">{caseStudy.title}</h3>
+        <p className="cs-card__character">With {caseStudy.character}</p>
+        <p className="cs-card__tagline">"{caseStudy.tagline}"</p>
+        <div className="cs-card__arc">
+          {caseStudy.pythonJourney.map((step, i) => (
+            <React.Fragment key={step}>
+              <span className="cs-card__arc-step">{step}</span>
+              {i < caseStudy.pythonJourney.length - 1 && (
+                <ArrowRight size={10} className="cs-card__arc-arrow" />
+              )}
+            </React.Fragment>
+          ))}
+        </div>
+      </div>
+
+      <button
+        className="cs-card__cta"
+        onClick={() => navigate(`/scenarios?theme=${caseStudy.theme}`)}
+      >
+        Begin Journey <ArrowRight size={14} />
+      </button>
+
+      <style>{`
+        .cs-card {
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+          padding: 0;
+          cursor: default;
+        }
+        .cs-card__bar {
+          height: 4px;
+          background: var(--cs-color);
+        }
+        .cs-card__body {
+          padding: var(--sp-5);
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          gap: var(--sp-3);
+        }
+        .cs-card__emoji {
+          font-size: 2.2rem;
+          line-height: 1;
+        }
+        .cs-card__header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: var(--sp-2);
+        }
+        .cs-card__difficulty {
+          font-size: 0.72rem;
+          font-weight: 600;
+          color: var(--cs-color);
+          background: color-mix(in srgb, var(--cs-color) 15%, transparent);
+          border: 1px solid color-mix(in srgb, var(--cs-color) 30%, transparent);
+          padding: 2px 10px;
+          border-radius: var(--r-full);
+        }
+        .cs-card__steps {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          font-size: 0.72rem;
+          color: var(--text-muted);
+        }
+        .cs-card__title {
+          font-size: 1.05rem;
+          font-weight: 700;
+          color: var(--text-primary);
+          line-height: 1.25;
+          margin: 0;
+        }
+        .cs-card__character {
+          font-size: 0.78rem;
+          color: var(--text-muted);
+          margin: 0;
+        }
+        .cs-card__tagline {
+          font-size: 0.85rem;
+          color: var(--text-secondary);
+          font-style: italic;
+          line-height: 1.5;
+          margin: 0;
+        }
+        .cs-card__arc {
+          display: flex;
+          flex-wrap: wrap;
+          align-items: center;
+          gap: 4px;
+          margin-top: auto;
+          padding-top: var(--sp-2);
+        }
+        .cs-card__arc-step {
+          font-size: 0.7rem;
+          font-weight: 600;
+          color: var(--cs-color);
+          background: color-mix(in srgb, var(--cs-color) 10%, transparent);
+          padding: 2px 8px;
+          border-radius: var(--r-full);
+          text-transform: capitalize;
+        }
+        .cs-card__arc-arrow { color: var(--text-muted); }
+        .cs-card__cta {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: var(--sp-2);
+          padding: var(--sp-3) var(--sp-5);
+          background: color-mix(in srgb, var(--cs-color) 10%, transparent);
+          border: 1px solid color-mix(in srgb, var(--cs-color) 20%, transparent);
+          border-top: 1px solid var(--border);
+          color: var(--cs-color);
+          font-size: 0.85rem;
+          font-weight: 600;
+          cursor: pointer;
+          transition: all 0.2s ease;
+        }
+        .cs-card__cta:hover {
+          background: color-mix(in srgb, var(--cs-color) 20%, transparent);
+          border-color: color-mix(in srgb, var(--cs-color) 40%, transparent);
+        }
+      `}</style>
+    </div>
+  );
+}
diff --git a/client/src/components/CurriculumSidebar.jsx b/client/src/components/CurriculumSidebar.jsx
new file mode 100644
index 0000000..20baa4e
--- /dev/null
+++ b/client/src/components/CurriculumSidebar.jsx
@@ -0,0 +1,281 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { NavLink, useNavigate } from 'react-router-dom';
+import { gsap } from 'gsap';
+import { useAuth } from '../context/AuthContext.jsx';
+import { useTheme } from '../context/ThemeContext.jsx';
+import { CURRICULUM, ALL_CHAPTERS } from '../data/curriculum.js';
+import {
+  LogOut, ChevronDown, ChevronRight,
+  LayoutDashboard, Check, Circle, Sun, Moon,
+} from 'lucide-react';
+
+export default function CurriculumSidebar({ onNavigate }) {
+  const { user, logout, getChapterStatus, getProgress } = useAuth();
+  const { theme, toggleTheme, isDark } = useTheme();
+  const navigate = useNavigate();
+  const sidebarRef = useRef(null);
+  const [openSections, setOpenSections] = useState(() =>
+    Object.fromEntries(CURRICULUM.map(s => [s.id, true]))
+  );
+
+  const progress = getProgress();
+  const completedCount = Object.values(progress).filter(p => p.status === 'completed').length;
+  const totalChapters = ALL_CHAPTERS.length;
+  const pct = Math.round((completedCount / totalChapters) * 100);
+
+  useEffect(() => {
+    const items = sidebarRef.current?.querySelectorAll('.sb-chapter-link');
+    if (!items?.length) return;
+    gsap.from(items, { x: -16, opacity: 0, duration: 0.35, stagger: 0.035, ease: 'power2.out', delay: 0.1 });
+  }, []);
+
+  function toggleSection(id) {
+    setOpenSections(prev => ({ ...prev, [id]: !prev[id] }));
+  }
+
+  function handleLogout() {
+    logout();
+    navigate('/login');
+  }
+
+  const statusIcon = (status) => {
+    if (status === 'completed') return <Check size={13} className="sb-status sb-status--done" />;
+    return <Circle size={13} className="sb-status sb-status--open" />;
+  };
+
+  return (
+    <aside className="sidebar" ref={sidebarRef}>
+
+      {/* Brand */}
+      <div className="sb-brand">
+        <div className="sb-brand__orb">🐍</div>
+        <div>
+          <div className="sb-brand__name">Py<span>Be</span></div>
+          <div className="sb-brand__version">v2.1 · Python Discovery</div>
+        </div>
+      </div>
+
+      {/* User chip */}
+      <div className="sb-user">
+        <div className="sb-user__avatar">{user?.name?.charAt(0)?.toUpperCase() || 'U'}</div>
+        <div className="sb-user__info">
+          <div className="sb-user__name">{user?.name}</div>
+          <div className="sb-user__email">{user?.email}</div>
+        </div>
+      </div>
+
+      {/* Progress */}
+      <div className="sb-progress">
+        <div className="sb-progress__header">
+          <span>Overall Progress</span>
+          <span className="sb-progress__pct">{completedCount}/{totalChapters}</span>
+        </div>
+        <div className="sb-progress__track">
+          <div className="sb-progress__fill" style={{ width: `${pct}%` }} />
+        </div>
+      </div>
+
+      <div className="sb-divider" />
+
+      {/* Dashboard */}
+      <NavLink
+        to="/app" end
+        className={({ isActive }) => `sb-nav-link${isActive ? ' sb-nav-link--active' : ''}`}
+        onClick={onNavigate}
+      >
+        <LayoutDashboard size={15} />
+        My Dashboard
+      </NavLink>
+
+      <div className="sb-divider" style={{ margin: '6px 0' }} />
+      <div className="sb-section-label">Syllabus</div>
+
+      {/* Curriculum */}
+      <nav className="sb-curriculum">
+        {CURRICULUM.map(section => (
+          <div key={section.id} className="sb-section">
+            <button
+              className="sb-section-header"
+              onClick={() => toggleSection(section.id)}
+              style={{ '--sec-color': section.color }}
+            >
+              <span className="sb-section-dot" style={{ background: section.color }} />
+              <span className="sb-section-emoji">{section.emoji}</span>
+              <span className="sb-section-title">{section.title}</span>
+              <span className="sb-section-chevron">
+                {openSections[section.id] ? <ChevronDown size={13} /> : <ChevronRight size={13} />}
+              </span>
+            </button>
+
+            {openSections[section.id] && (
+              <div className="sb-chapters">
+                {section.chapters.map(chapter => {
+                  const status = getChapterStatus(chapter.id);
+                  const isDone = status === 'completed';
+                  return (
+                    <NavLink
+                      key={chapter.id}
+                      to={`/app/chapter/${chapter.id}`}
+                      className={({ isActive }) =>
+                        `sb-chapter-link${isActive ? ' sb-chapter-link--active' : ''}${isDone ? ' sb-chapter-link--done' : ''}`
+                      }
+                      onClick={onNavigate}
+                    >
+                      <span className="sb-chapter-icon">{chapter.emoji}</span>
+                      <span className="sb-chapter-title">{chapter.title}</span>
+                      {statusIcon(status)}
+                    </NavLink>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        ))}
+      </nav>
+
+      {/* Bottom actions */}
+      <div className="sb-bottom">
+        {/* Theme toggle */}
+        <button className="sb-theme-btn" onClick={toggleTheme} title={isDark ? 'Switch to light mode' : 'Switch to dark mode'}>
+          {isDark
+            ? <><Sun size={14} /> Light mode</>
+            : <><Moon size={14} /> Dark mode</>
+          }
+        </button>
+        <button className="sb-logout" onClick={handleLogout}>
+          <LogOut size={14} />
+          Sign out
+        </button>
+      </div>
+
+      <style>{`
+        .sidebar {
+          width: 260px; height: 100vh;
+          position: fixed; top: 0; left: 0;
+          display: flex; flex-direction: column;
+          background: var(--sidebar-bg);
+          border-right: 1px solid var(--sidebar-border);
+          overflow-y: auto; overflow-x: hidden;
+          z-index: 50;
+          scrollbar-width: thin;
+          scrollbar-color: var(--border) transparent;
+          transition: background 0.25s ease, border-color 0.25s ease;
+        }
+
+        /* Brand */
+        .sb-brand {
+          display: flex; align-items: center; gap: 11px;
+          padding: 20px 16px 14px; flex-shrink: 0;
+        }
+        .sb-brand__orb {
+          font-size: 1.65rem; line-height: 1;
+          animation: emoji-float 4s ease-in-out infinite;
+        }
+        .sb-brand__name {
+          font-family: var(--font-heading); font-size: 1.15rem;
+          font-weight: 800; color: var(--text-primary); line-height: 1;
+        }
+        .sb-brand__name span { color: var(--accent); }
+        .sb-brand__version { font-size: 0.6rem; color: var(--text-muted); margin-top: 3px; letter-spacing: 0.04em; }
+
+        /* User */
+        .sb-user {
+          display: flex; align-items: center; gap: 10px;
+          margin: 0 10px 12px; padding: 10px 12px;
+          background: var(--bg-glass-light);
+          border: 1px solid var(--border);
+          border-radius: 10px;
+          transition: background 0.25s ease;
+        }
+        .sb-user__avatar {
+          width: 30px; height: 30px; border-radius: 50%;
+          background: var(--accent); color: #0D1117;
+          font-weight: 800; font-size: 0.8rem;
+          display: grid; place-items: center; flex-shrink: 0;
+        }
+        [data-theme="light"] .sb-user__avatar { color: #fff; }
+        .sb-user__info { min-width: 0; }
+        .sb-user__name { font-size: 0.84rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+        .sb-user__email { font-size: 0.68rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+        /* Progress */
+        .sb-progress { padding: 0 14px 12px; flex-shrink: 0; }
+        .sb-progress__header { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--text-muted); margin-bottom: 7px; }
+        .sb-progress__pct { color: var(--accent); font-weight: 700; }
+        .sb-progress__track { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
+        .sb-progress__fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.7s cubic-bezier(0.4,0,0.2,1); }
+
+        .sb-divider { height: 1px; background: var(--border); margin: 0 14px; flex-shrink: 0; }
+        .sb-section-label { padding: 10px 18px 5px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
+
+        /* Nav link */
+        .sb-nav-link {
+          display: flex; align-items: center; gap: 9px;
+          margin: 2px 8px; padding: 8px 10px; border-radius: 8px;
+          font-size: 0.84rem; font-weight: 500; color: var(--text-secondary);
+          text-decoration: none; transition: background 0.15s, color 0.15s;
+        }
+        .sb-nav-link:hover { background: var(--bg-glass-light); color: var(--text-primary); opacity: 1; }
+        .sb-nav-link--active { background: var(--accent-glow) !important; color: var(--accent) !important; }
+
+        /* Curriculum sections */
+        .sb-curriculum { flex: 1; padding-bottom: 8px; }
+        .sb-section { margin-bottom: 1px; }
+        .sb-section-header {
+          width: 100%; display: flex; align-items: center; gap: 7px;
+          padding: 7px 16px; background: transparent; border: none; cursor: pointer;
+          color: var(--text-secondary); transition: color 0.15s; text-align: left;
+        }
+        .sb-section-header:hover { color: var(--text-primary); }
+        .sb-section-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; opacity: 0.7; }
+        .sb-section-emoji { font-size: 0.85rem; }
+        .sb-section-title { flex: 1; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
+        .sb-section-chevron { color: var(--text-muted); }
+
+        /* Chapters */
+        .sb-chapters { padding: 1px 0 3px; }
+        .sb-chapter-link {
+          display: flex; align-items: center; gap: 8px;
+          margin: 1px 8px; padding: 7px 10px; border-radius: 8px;
+          font-size: 0.83rem; font-weight: 500; color: var(--text-muted);
+          text-decoration: none; transition: background 0.15s, color 0.15s;
+        }
+        .sb-chapter-link:hover { background: var(--bg-glass-light); color: var(--text-secondary); opacity: 1; }
+        .sb-chapter-link--active {
+          background: var(--accent-glow) !important;
+          color: var(--accent) !important;
+          font-weight: 600;
+        }
+        .sb-chapter-link--done { color: var(--text-secondary) !important; }
+        .sb-chapter-icon { font-size: 0.85rem; flex-shrink: 0; }
+        .sb-chapter-title { flex: 1; line-height: 1.25; }
+        .sb-status { flex-shrink: 0; }
+        .sb-status--done { color: var(--accent); }
+        .sb-status--open { color: var(--border); }
+
+        /* Bottom */
+        .sb-bottom {
+          flex-shrink: 0; padding: 10px 10px 18px;
+          border-top: 1px solid var(--border); margin-top: auto;
+          display: flex; flex-direction: column; gap: 2px;
+        }
+        .sb-theme-btn {
+          width: 100%; display: flex; align-items: center; gap: 9px;
+          padding: 8px 12px; border-radius: 8px; border: none;
+          background: transparent; color: var(--text-muted);
+          font-size: 0.83rem; font-weight: 500; cursor: pointer;
+          transition: background 0.15s, color 0.15s;
+        }
+        .sb-theme-btn:hover { background: var(--bg-glass-light); color: var(--text-primary); }
+        .sb-logout {
+          width: 100%; display: flex; align-items: center; gap: 9px;
+          padding: 8px 12px; border-radius: 8px; border: none;
+          background: transparent; color: var(--text-muted);
+          font-size: 0.83rem; font-weight: 500; cursor: pointer;
+          transition: background 0.15s, color 0.15s;
+        }
+        .sb-logout:hover { background: rgba(244,114,182,0.08); color: #F472B6; }
+      `}</style>
+    </aside>
+  );
+}
diff --git a/client/src/components/HorcruxVault.jsx b/client/src/components/HorcruxVault.jsx
new file mode 100644
index 0000000..d11f522
--- /dev/null
+++ b/client/src/components/HorcruxVault.jsx
@@ -0,0 +1,149 @@
+import React from 'react';
+import { Lock, CheckCircle2, Star } from 'lucide-react';
+
+const HORCRUXES = [
+  { id: 1, name: 'Variables & Types',    icon: '📦', color: '#F59E0B', concept: 'variables',     desc: 'Storing and naming — the atom of all programs.' },
+  { id: 2, name: 'Control Flow',         icon: '🔀', color: '#3B82F6', concept: 'conditionals',  desc: 'Deciding and repeating — giving code a brain.' },
+  { id: 3, name: 'Functions',            icon: '🔧', color: '#10B981', concept: 'functions',      desc: 'Packaging and reusing — write once, use everywhere.' },
+  { id: 4, name: 'Data Structures',      icon: '🗂️', color: '#8B5CF6', concept: 'lists',          desc: 'Organizing and retrieving — data at scale.' },
+  { id: 5, name: 'File & I/O',           icon: '💾', color: '#EC4899', concept: 'file I/O',       desc: 'Connecting to the world — persistence matters.' },
+  { id: 6, name: 'Error Handling',       icon: '🛡️', color: '#F97316', concept: 'error handling', desc: 'Expecting the unexpected — real code fails.' },
+  { id: 7, name: 'Modules & Packages',   icon: '🏛️', color: '#A8FF3E', concept: 'modules',        desc: 'Building systems — from script to software.' },
+];
+
+export default function HorcruxVault({ conceptCounts = {} }) {
+  const allConcepts = Object.keys(conceptCounts);
+
+  const isUnlocked = (horcrux) => {
+    const count = conceptCounts[horcrux.concept] || 0;
+    return count >= 1;
+  };
+
+  const unlockedCount = HORCRUXES.filter(isUnlocked).length;
+  const progress = Math.round((unlockedCount / 7) * 100);
+
+  return (
+    <div className="hv">
+      <div className="hv__header">
+        <div>
+          <div className="section-label">The 7 Horcruxes of Python</div>
+          <p className="hv__sub">Each Horcrux is a pillar of Python mastery. Solve scenarios to unlock them all.</p>
+        </div>
+        <div className="hv__progress-ring">
+          <svg width={60} height={60} viewBox="0 0 60 60">
+            <circle cx={30} cy={30} r={24} fill="none" stroke="var(--bg-elevated)" strokeWidth={5} />
+            <circle
+              cx={30} cy={30} r={24}
+              fill="none" stroke="var(--accent)" strokeWidth={5}
+              strokeDasharray={`${(progress / 100) * 2 * Math.PI * 24} ${2 * Math.PI * 24}`}
+              strokeLinecap="round" transform="rotate(-90 30 30)"
+            />
+            <text x={30} y={35} textAnchor="middle" fill="var(--accent)" fontSize={13} fontWeight={700} fontFamily="Space Grotesk, sans-serif">{unlockedCount}/7</text>
+          </svg>
+        </div>
+      </div>
+
+      <div className="hv__grid stagger">
+        {HORCRUXES.map((h) => {
+          const unlocked = isUnlocked(h);
+          return (
+            <div
+              key={h.id}
+              className={`hv__vault anim-fade-up${unlocked ? ' hv__vault--unlocked' : ''}`}
+              style={{ '--h-color': h.color }}
+            >
+              {unlocked && <div className="hv__vault-glow" />}
+              <div className="hv__vault-icon">{h.icon}</div>
+              <div className="hv__vault-name">{h.name}</div>
+              <div className="hv__vault-desc">{h.desc}</div>
+              <div className="hv__vault-status">
+                {unlocked ? (
+                  <span className="hv__vault-unlocked-label">
+                    <CheckCircle2 size={12} /> {conceptCounts[h.concept] || 0} sessions
+                  </span>
+                ) : (
+                  <span className="hv__vault-locked-label">
+                    <Lock size={11} /> Locked
+                  </span>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {unlockedCount === 7 && (
+        <div className="hv__complete anim-scale-in">
+          <Star size={20} />
+          You are a Python Wizard — all 7 Horcruxes found!
+        </div>
+      )}
+
+      <style>{`
+        .hv { display: flex; flex-direction: column; gap: var(--sp-5); }
+        .hv__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
+        .hv__sub { font-size: 0.82rem; color: var(--text-secondary); margin: 4px 0 0; line-height: 1.5; }
+        .hv__grid {
+          display: grid;
+          grid-template-columns: repeat(7, 1fr);
+          gap: var(--sp-2);
+        }
+        .hv__vault {
+          display: flex; flex-direction: column;
+          align-items: center; text-align: center;
+          gap: 4px;
+          padding: var(--sp-3) var(--sp-2);
+          border: 1px solid var(--border);
+          border-radius: var(--r-md);
+          background: var(--bg-elevated);
+          opacity: 0.5;
+          position: relative;
+          overflow: hidden;
+          transition: all 0.3s ease;
+        }
+        .hv__vault--unlocked {
+          opacity: 1;
+          border-color: color-mix(in srgb, var(--h-color) 40%, transparent);
+          background: color-mix(in srgb, var(--h-color) 6%, var(--bg-elevated));
+        }
+        .hv__vault-glow {
+          position: absolute; inset: 0;
+          background: radial-gradient(ellipse at top, color-mix(in srgb, var(--h-color) 15%, transparent), transparent 70%);
+          pointer-events: none;
+        }
+        .hv__vault-icon { font-size: 1.4rem; line-height: 1; }
+        .hv__vault-name {
+          font-size: 0.62rem; font-weight: 600;
+          color: var(--text-primary); line-height: 1.2; text-align: center;
+        }
+        .hv__vault-desc { display: none; }
+        .hv__vault-status { margin-top: 2px; }
+        .hv__vault-unlocked-label {
+          display: flex; align-items: center; gap: 3px;
+          font-size: 0.6rem; font-weight: 600;
+          color: var(--h-color);
+        }
+        .hv__vault-locked-label {
+          display: flex; align-items: center; gap: 3px;
+          font-size: 0.6rem; color: var(--text-muted);
+        }
+        .hv__complete {
+          display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
+          padding: var(--sp-4);
+          background: var(--accent-glow);
+          border: 1px solid var(--border-accent);
+          border-radius: var(--r-md);
+          color: var(--accent);
+          font-weight: 700;
+          font-size: 0.9rem;
+        }
+        @media (max-width: 768px) {
+          .hv__grid { grid-template-columns: repeat(4, 1fr); }
+        }
+        @media (max-width: 480px) {
+          .hv__grid { grid-template-columns: repeat(3, 1fr); }
+        }
+      `}</style>
+    </div>
+  );
+}
diff --git a/client/src/components/LearningForm.jsx b/client/src/components/LearningForm.jsx
new file mode 100644
index 0000000..5bd5aba
--- /dev/null
+++ b/client/src/components/LearningForm.jsx
@@ -0,0 +1,149 @@
+import React from 'react';
+import { Send, Lightbulb, MessageSquare, Pencil } from 'lucide-react';
+
+export default function LearningForm({ scenario, form, onChange, onSubmit, submitting }) {
+  return (
+    <form className="lf" onSubmit={onSubmit}>
+      {/* Step 1 — Reasoning */}
+      <div className="lf__step">
+        <div className="lf__step-header">
+          <div className="lf__step-num">1</div>
+          <div>
+            <div className="lf__step-label">Your Reasoning</div>
+            <div className="lf__step-sub">Think out loud. Don't worry about Python yet — reason in plain English.</div>
+          </div>
+        </div>
+        <textarea
+          id="reasoning"
+          required
+          value={form.reasoning}
+          onChange={e => onChange({ reasoning: e.target.value })}
+          placeholder={scenario?.prompt || 'Describe how you would approach this problem…'}
+          rows={5}
+        />
+        <div className="lf__char-count">{form.reasoning.length} chars — aim for 100+</div>
+      </div>
+
+      {/* Step 2 — AI Prompt */}
+      <div className="lf__step">
+        <div className="lf__step-header">
+          <div className="lf__step-num lf__step-num--secondary">2</div>
+          <div>
+            <div className="lf__step-label">
+              <MessageSquare size={14} /> Prompt for an AI Mentor
+            </div>
+            <div className="lf__step-sub">How would you ask an AI to help? Great prompts are specific, include examples, and mention the Python concept you suspect.</div>
+          </div>
+        </div>
+        <textarea
+          id="promptText"
+          value={form.promptText}
+          onChange={e => onChange({ promptText: e.target.value })}
+          placeholder="E.g. Explain my approach step by step, then show the Python concept that matches, with an example input and output…"
+          rows={4}
+        />
+      </div>
+
+      {/* Step 3 — Reflection */}
+      <div className="lf__step">
+        <div className="lf__step-header">
+          <div className="lf__step-num lf__step-num--tertiary">3</div>
+          <div>
+            <div className="lf__step-label">
+              <Pencil size={14} /> Reflection
+            </div>
+            <div className="lf__step-sub">After seeing the result — what surprised you? What clicked?</div>
+          </div>
+        </div>
+        <textarea
+          id="reflection"
+          value={form.reflection}
+          onChange={e => onChange({ reflection: e.target.value })}
+          placeholder="What did you notice about your own thinking process?"
+          rows={3}
+        />
+      </div>
+
+      <button
+        type="submit"
+        id="submit-reasoning-btn"
+        className="btn btn-primary btn-lg lf__submit"
+        disabled={submitting || !form.reasoning.trim()}
+      >
+        {submitting ? (
+          <>
+            <span className="lf__spinner" />
+            Mapping your reasoning…
+          </>
+        ) : (
+          <>
+            <Send size={16} />
+            Map My Reasoning
+          </>
+        )}
+      </button>
+
+      <div className="lf__hint">
+        <Lightbulb size={13} />
+        The system maps your reasoning to Python constructs — without you naming them first.
+      </div>
+
+      <style>{`
+        .lf { display: flex; flex-direction: column; gap: var(--sp-5); }
+        .lf__step {
+          display: flex;
+          flex-direction: column;
+          gap: var(--sp-3);
+        }
+        .lf__step-header {
+          display: flex;
+          gap: var(--sp-3);
+          align-items: flex-start;
+        }
+        .lf__step-num {
+          width: 28px; height: 28px;
+          border-radius: var(--r-full);
+          background: var(--accent);
+          color: #0D1117;
+          font-weight: 700;
+          font-size: 0.85rem;
+          display: grid;
+          place-items: center;
+          flex-shrink: 0;
+          margin-top: 2px;
+        }
+        .lf__step-num--secondary { background: var(--explorer-color); }
+        .lf__step-num--tertiary  { background: var(--builder-color); color: #fff; }
+        .lf__step-label {
+          font-weight: 600;
+          font-size: 0.92rem;
+          color: var(--text-primary);
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          margin-bottom: 3px;
+        }
+        .lf__step-sub { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5; }
+        .lf__char-count { font-size: 0.72rem; color: var(--text-muted); text-align: right; }
+        .lf__submit { width: 100%; margin-top: var(--sp-2); }
+        .lf__hint {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          font-size: 0.78rem;
+          color: var(--text-muted);
+          justify-content: center;
+        }
+        .lf__spinner {
+          width: 16px; height: 16px;
+          border: 2px solid rgba(13,17,23,0.3);
+          border-top-color: #0D1117;
+          border-radius: 50%;
+          animation: spinSlow 0.7s linear infinite;
+          display: inline-block;
+        }
+        @keyframes spinSlow { to { transform: rotate(360deg); } }
+      `}</style>
+    </form>
+  );
+}
diff --git a/client/src/components/Navbar.jsx b/client/src/components/Navbar.jsx
new file mode 100644
index 0000000..0957409
--- /dev/null
+++ b/client/src/components/Navbar.jsx
@@ -0,0 +1,212 @@
+import React, { useState, useEffect } from 'react';
+import { NavLink, useLocation } from 'react-router-dom';
+import { Brain, BookOpen, LayoutDashboard, Map, Sparkles, Menu, X } from 'lucide-react';
+
+const NAV_LINKS = [
+  { to: '/',            label: 'Home',         icon: Brain       },
+  { to: '/scenarios',   label: 'Scenarios',    icon: BookOpen    },
+  { to: '/case-studies',label: 'Case Studies', icon: Sparkles    },
+  { to: '/dashboard',   label: 'Dashboard',    icon: LayoutDashboard },
+  { to: '/roadmap',     label: 'Roadmap',      icon: Map         },
+];
+
+export default function Navbar() {
+  const [scrolled, setScrolled] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const location = useLocation();
+
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 20);
+    window.addEventListener('scroll', onScroll, { passive: true });
+    return () => window.removeEventListener('scroll', onScroll);
+  }, []);
+
+  useEffect(() => { setMenuOpen(false); }, [location]);
+
+  return (
+    <>
+      <nav className={`navbar${scrolled ? ' navbar--scrolled' : ''}`}>
+        <div className="navbar__inner container">
+          {/* Brand */}
+          <NavLink to="/" className="navbar__brand">
+            <div className="navbar__logo">
+              <Brain size={20} strokeWidth={2.5} />
+            </div>
+            <span className="navbar__wordmark">
+              Py<span className="navbar__accent">Be</span>
+            </span>
+            <span className="navbar__version">v2.0</span>
+          </NavLink>
+
+          {/* Desktop links */}
+          <ul className="navbar__links">
+            {NAV_LINKS.map(({ to, label, icon: Icon }) => (
+              <li key={to}>
+                <NavLink
+                  to={to}
+                  end={to === '/'}
+                  className={({ isActive }) => `navbar__link${isActive ? ' navbar__link--active' : ''}`}
+                >
+                  <Icon size={15} />
+                  {label}
+                </NavLink>
+              </li>
+            ))}
+          </ul>
+
+          {/* CTA + burger */}
+          <div className="navbar__actions">
+            <NavLink to="/scenarios" className="btn btn-primary btn-sm">
+              Start Learning
+            </NavLink>
+            <button
+              className="navbar__burger btn btn-ghost btn-sm"
+              onClick={() => setMenuOpen(v => !v)}
+              aria-label="Toggle menu"
+            >
+              {menuOpen ? <X size={20} /> : <Menu size={20} />}
+            </button>
+          </div>
+        </div>
+      </nav>
+
+      {/* Mobile drawer */}
+      {menuOpen && (
+        <div className="navbar__drawer">
+          <ul className="navbar__drawer-links">
+            {NAV_LINKS.map(({ to, label, icon: Icon }) => (
+              <li key={to}>
+                <NavLink
+                  to={to}
+                  end={to === '/'}
+                  className={({ isActive }) => `navbar__drawer-link${isActive ? ' navbar__drawer-link--active' : ''}`}
+                >
+                  <Icon size={18} />
+                  {label}
+                </NavLink>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      <style>{`
+        .navbar {
+          position: fixed;
+          top: 0; left: 0; right: 0;
+          z-index: 100;
+          height: var(--navbar-h);
+          display: flex;
+          align-items: center;
+          border-bottom: 1px solid transparent;
+          transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
+        }
+        .navbar--scrolled {
+          background: rgba(13,17,23,0.85);
+          backdrop-filter: blur(16px);
+          -webkit-backdrop-filter: blur(16px);
+          border-color: var(--border);
+        }
+        .navbar__inner {
+          width: 100%;
+          display: flex;
+          align-items: center;
+          gap: var(--sp-6);
+        }
+        .navbar__brand {
+          display: flex;
+          align-items: center;
+          gap: var(--sp-2);
+          text-decoration: none;
+          flex-shrink: 0;
+        }
+        .navbar__logo {
+          width: 34px; height: 34px;
+          background: var(--accent-glow);
+          border: 1px solid var(--border-accent);
+          border-radius: var(--r-sm);
+          display: grid;
+          place-items: center;
+          color: var(--accent);
+        }
+        .navbar__wordmark {
+          font-family: var(--font-heading);
+          font-size: 1.15rem;
+          font-weight: 700;
+          color: var(--text-primary);
+        }
+        .navbar__accent { color: var(--accent); }
+        .navbar__version {
+          font-size: 0.65rem;
+          font-weight: 600;
+          color: var(--text-muted);
+          background: var(--bg-elevated);
+          border: 1px solid var(--border);
+          padding: 2px 6px;
+          border-radius: var(--r-full);
+        }
+        .navbar__links {
+          display: flex;
+          list-style: none;
+          gap: 4px;
+          flex: 1;
+        }
+        .navbar__link {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          padding: 6px 12px;
+          border-radius: var(--r-sm);
+          font-size: 0.875rem;
+          font-weight: 500;
+          color: var(--text-secondary);
+          text-decoration: none;
+          transition: color var(--t-fast), background var(--t-fast);
+        }
+        .navbar__link:hover { color: var(--text-primary); background: var(--bg-glass-light); }
+        .navbar__link--active { color: var(--accent); background: var(--accent-glow); }
+        .navbar__actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
+        .navbar__burger { display: none; }
+
+        /* Mobile drawer */
+        .navbar__drawer {
+          position: fixed;
+          top: var(--navbar-h);
+          left: 0; right: 0;
+          background: rgba(13,17,23,0.97);
+          backdrop-filter: blur(16px);
+          border-bottom: 1px solid var(--border);
+          z-index: 99;
+          animation: fadeIn 0.2s ease;
+        }
+        .navbar__drawer-links {
+          list-style: none;
+          padding: var(--sp-4) var(--sp-6);
+          display: flex;
+          flex-direction: column;
+          gap: 4px;
+        }
+        .navbar__drawer-link {
+          display: flex;
+          align-items: center;
+          gap: var(--sp-3);
+          padding: 10px 12px;
+          border-radius: var(--r-sm);
+          font-size: 0.95rem;
+          font-weight: 500;
+          color: var(--text-secondary);
+          text-decoration: none;
+          transition: color var(--t-fast), background var(--t-fast);
+        }
+        .navbar__drawer-link:hover { color: var(--text-primary); background: var(--bg-glass-light); }
+        .navbar__drawer-link--active { color: var(--accent); background: var(--accent-glow); }
+
+        @media (max-width: 768px) {
+          .navbar__links { display: none; }
+          .navbar__burger { display: flex; }
+          .navbar__actions .btn-primary { display: none; }
+        }
+      `}</style>
+    </>
+  );
+}
diff --git a/client/src/components/PublicNavbar.jsx b/client/src/components/PublicNavbar.jsx
new file mode 100644
index 0000000..49c328f
--- /dev/null
+++ b/client/src/components/PublicNavbar.jsx
@@ -0,0 +1,127 @@
+import React from 'react';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
+import { useTheme } from '../context/ThemeContext.jsx';
+import { Sun, Moon, ArrowRight } from 'lucide-react';
+
+export default function PublicNavbar() {
+  const { toggleTheme, isDark } = useTheme();
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  function scrollToSection(sectionId) {
+    if (location.pathname !== '/') {
+      navigate('/', { replace: false });
+      setTimeout(() => {
+        const el = document.getElementById(sectionId);
+        if (el) el.scrollIntoView({ behavior: 'smooth' });
+      }, 150);
+    } else {
+      const el = document.getElementById(sectionId);
+      if (el) el.scrollIntoView({ behavior: 'smooth' });
+    }
+  }
+
+  return (
+    <header className="pub-nav">
+      <div className="pub-nav__inner container">
+        <Link to="/" className="pub-nav__brand">
+          <span className="pub-nav__logo">🐍</span>
+          <div>
+            <span className="pub-nav__name">Py<span>Be</span></span>
+            <span className="pub-nav__tag">Discovery Platform</span>
+          </div>
+        </Link>
+
+        {/* Working smooth-scroll navigation links */}
+        <nav className="pub-nav__links">
+          <button onClick={() => scrollToSection('methodology')} className="pub-nav__link-btn">
+            Methodology
+          </button>
+          <button onClick={() => scrollToSection('syllabus')} className="pub-nav__link-btn">
+            Syllabus
+          </button>
+          <button onClick={() => scrollToSection('themes')} className="pub-nav__link-btn">
+            Case Studies
+          </button>
+          <button onClick={() => scrollToSection('features')} className="pub-nav__link-btn">
+            Why PyBe
+          </button>
+        </nav>
+
+        <div className="pub-nav__actions">
+          <button
+            className="pub-nav__theme-btn"
+            onClick={toggleTheme}
+            title={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+          >
+            {isDark ? <Sun size={16} /> : <Moon size={16} />}
+            <span className="pub-nav__theme-txt">{isDark ? 'Light' : 'Dark'}</span>
+          </button>
+
+          {location.pathname !== '/login' && (
+            <Link to="/login" className="btn btn-ghost btn-sm pub-nav__login">
+              Sign In
+            </Link>
+          )}
+
+          {location.pathname !== '/signup' && (
+            <Link to="/signup" className="btn btn-primary btn-sm pub-nav__signup">
+              Get Started <ArrowRight size={14} />
+            </Link>
+          )}
+        </div>
+      </div>
+
+      <style>{`
+        .pub-nav {
+          position: fixed; top: 0; left: 0; right: 0;
+          height: var(--navbar-h); z-index: 100;
+          background: var(--bg-glass);
+          border-bottom: 1px solid var(--border);
+          backdrop-filter: blur(16px);
+          -webkit-backdrop-filter: blur(16px);
+          transition: background-color 0.25s, border-color 0.25s;
+        }
+        .pub-nav__inner {
+          height: 100%; display: flex; align-items: center; justify-content: space-between;
+        }
+        .pub-nav__brand {
+          display: flex; align-items: center; gap: 10px; text-decoration: none;
+        }
+        .pub-nav__logo { font-size: 1.6rem; line-height: 1; animation: emoji-float 4s ease-in-out infinite; }
+        .pub-nav__name {
+          font-family: var(--font-heading); font-size: 1.2rem; font-weight: 800;
+          color: var(--text-primary); line-height: 1;
+        }
+        .pub-nav__name span { color: var(--accent); }
+        .pub-nav__tag {
+          display: block; font-size: 0.6rem; color: var(--text-muted);
+          letter-spacing: 0.05em; margin-top: 2px; text-transform: uppercase; font-weight: 600;
+        }
+        .pub-nav__links { display: flex; align-items: center; gap: 24px; }
+        .pub-nav__link-btn {
+          background: none; border: none; padding: 0; cursor: pointer;
+          font-size: 0.86rem; font-weight: 500; color: var(--text-secondary);
+          transition: color 0.15s; font-family: inherit;
+        }
+        .pub-nav__link-btn:hover { color: var(--text-primary); }
+        .pub-nav__actions { display: flex; align-items: center; gap: 12px; }
+        .pub-nav__theme-btn {
+          display: flex; align-items: center; gap: 6px;
+          padding: 6px 12px; border-radius: 20px;
+          background: var(--bg-glass-light); border: 1px solid var(--border);
+          color: var(--text-secondary); font-size: 0.78rem; font-weight: 600;
+          cursor: pointer; transition: all 0.2s ease;
+        }
+        .pub-nav__theme-btn:hover {
+          color: var(--text-primary); border-color: var(--border-hover);
+          background: var(--bg-elevated);
+        }
+        @media (max-width: 768px) {
+          .pub-nav__links { display: none; }
+          .pub-nav__theme-txt { display: none; }
+        }
+      `}</style>
+    </header>
+  );
+}
diff --git a/client/src/components/ResultPanel.jsx b/client/src/components/ResultPanel.jsx
new file mode 100644
index 0000000..063b18d
--- /dev/null
+++ b/client/src/components/ResultPanel.jsx
@@ -0,0 +1,220 @@
+import React from 'react';
+import { Code2, Lightbulb, AlertTriangle, CheckCircle2, Star } from 'lucide-react';
+
+function ScoreRing({ score }) {
+  const r = 36;
+  const circ = 2 * Math.PI * r;
+  const filled = (score / 100) * circ;
+  const color = score >= 70 ? 'var(--accent)' : score >= 45 ? 'var(--chai-color)' : 'var(--builder-color)';
+  const label = score >= 70 ? 'Excellent' : score >= 45 ? 'Developing' : 'Early stage';
+
+  return (
+    <div className="rp-score-ring">
+      <svg width={90} height={90} viewBox="0 0 90 90">
+        <circle cx={45} cy={45} r={r} fill="none" stroke="var(--bg-elevated)" strokeWidth={6} />
+        <circle
+          cx={45} cy={45} r={r}
+          fill="none"
+          stroke={color}
+          strokeWidth={6}
+          strokeDasharray={`${filled} ${circ}`}
+          strokeLinecap="round"
+          transform="rotate(-90 45 45)"
+          style={{ transition: 'stroke-dasharray 1s cubic-bezier(0.4,0,0.2,1)' }}
+        />
+        <text x={45} y={42} textAnchor="middle" fill={color} fontSize={16} fontWeight={700} fontFamily="Space Grotesk, sans-serif">{score}</text>
+        <text x={45} y={58} textAnchor="middle" fill="var(--text-muted)" fontSize={9} fontFamily="Inter, sans-serif">/ 100</text>
+      </svg>
+      <div className="rp-score-label" style={{ color }}>
+        <Star size={12} /> {label}
+      </div>
+    </div>
+  );
+}
+
+export default function ResultPanel({ result }) {
+  if (!result) {
+    return (
+      <div className="rp-empty">
+        <div className="rp-empty__icon anim-float"><Lightbulb size={40} /></div>
+        <h3>Your mapping will appear here</h3>
+        <p>Submit your reasoning to see how your thinking maps to Python constructs, along with generated code and feedback.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="rp anim-fade-up">
+      {/* Score header */}
+      <div className="rp-header">
+        <ScoreRing score={result.promptScore} />
+        <div className="rp-header__text">
+          <div className="section-label">Prompt Maturity Score</div>
+          <h3 style={{ color: 'var(--text-primary)', margin: 0 }}>Abstraction Map</h3>
+          <p style={{ fontSize: '0.82rem', margin: '4px 0 0' }}>
+            Your reasoning detected {result.abstractionMap.length} pattern{result.abstractionMap.length !== 1 ? 's' : ''}
+          </p>
+        </div>
+      </div>
+
+      {/* Abstraction mappings */}
+      {result.abstractionMap.length > 0 && (
+        <div className="rp-section">
+          {result.abstractionMap.map((item) => (
+            <div key={item.pattern} className="rp-mapping">
+              <div className="rp-mapping__pattern">{item.pattern}</div>
+              <div className="rp-mapping__concept">
+                <Code2 size={12} /> {item.pythonConcept}
+              </div>
+              <p className="rp-mapping__explanation">{item.explanation}</p>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Generated code */}
+      {result.generatedCode && (
+        <div className="rp-code">
+          <div className="rp-code__header">
+            <Code2 size={14} /> Generated Python
+            <span className="rp-code__lang">Python 3</span>
+          </div>
+          <pre className="rp-code__pre">{result.generatedCode}</pre>
+          {result.codeExplanation && (
+            <p className="rp-code__explanation">{result.codeExplanation}</p>
+          )}
+        </div>
+      )}
+
+      {/* Feedback */}
+      {result.promptFeedback?.length > 0 && (
+        <div className="rp-feedback">
+          <div className="rp-feedback__title">
+            <CheckCircle2 size={14} /> Prompt Feedback
+          </div>
+          <ul>
+            {result.promptFeedback.map((item, i) => (
+              <li key={i}>{item}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {/* Misconceptions */}
+      {result.misconceptions?.length > 0 && (
+        <div className="rp-misconception">
+          <div className="rp-misconception__title">
+            <AlertTriangle size={14} /> Watch Out
+          </div>
+          {result.misconceptions.map((item, i) => (
+            <p key={i}>{item}</p>
+          ))}
+        </div>
+      )}
+
+      {/* Mastery signals */}
+      {result.masterySignals?.length > 0 && (
+        <div className="rp-mastery">
+          {result.masterySignals.map((sig, i) => (
+            <span key={i} className="rp-mastery__tag">✓ {sig}</span>
+          ))}
+        </div>
+      )}
+
+      <style>{`
+        .rp { display: flex; flex-direction: column; gap: var(--sp-4); }
+        .rp-header {
+          display: flex;
+          gap: var(--sp-4);
+          align-items: center;
+          background: var(--bg-elevated);
+          border: 1px solid var(--border);
+          border-radius: var(--r-md);
+          padding: var(--sp-4);
+        }
+        .rp-score-ring { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
+        .rp-score-label { display: flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 600; }
+        .rp-header__text { flex: 1; }
+
+        .rp-section { display: flex; flex-direction: column; gap: var(--sp-2); }
+        .rp-mapping {
+          border-left: 3px solid var(--accent);
+          padding: var(--sp-3) var(--sp-4);
+          background: var(--bg-elevated);
+          border-radius: 0 var(--r-sm) var(--r-sm) 0;
+        }
+        .rp-mapping__pattern { font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; }
+        .rp-mapping__concept {
+          display: flex; align-items: center; gap: 5px;
+          font-weight: 700; color: var(--accent); font-size: 0.9rem; margin-bottom: 4px;
+        }
+        .rp-mapping__explanation { font-size: 0.82rem; color: var(--text-secondary); margin: 0; line-height: 1.5; }
+
+        .rp-code {
+          background: #0A0F14;
+          border: 1px solid var(--border);
+          border-radius: var(--r-md);
+          overflow: hidden;
+        }
+        .rp-code__header {
+          display: flex; align-items: center; gap: var(--sp-2);
+          padding: var(--sp-2) var(--sp-4);
+          background: var(--bg-elevated);
+          border-bottom: 1px solid var(--border);
+          font-size: 0.82rem; color: var(--text-secondary);
+        }
+        .rp-code__lang { margin-left: auto; font-size: 0.7rem; color: var(--text-muted); }
+        .rp-code__pre {
+          padding: var(--sp-4);
+          font-family: var(--font-mono);
+          font-size: 0.85rem;
+          line-height: 1.6;
+          color: #79C0FF;
+          white-space: pre-wrap;
+          overflow-x: auto;
+          margin: 0;
+        }
+        .rp-code__explanation { padding: 0 var(--sp-4) var(--sp-3); font-size: 0.8rem; color: var(--text-secondary); margin: 0; }
+
+        .rp-feedback {
+          background: rgba(52,211,153,0.06);
+          border: 1px solid rgba(52,211,153,0.15);
+          border-radius: var(--r-md);
+          padding: var(--sp-4);
+        }
+        .rp-feedback__title { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.85rem; color: var(--beginner-color); margin-bottom: var(--sp-2); }
+        .rp-feedback ul { padding-left: 1.2em; display: flex; flex-direction: column; gap: 5px; }
+        .rp-feedback li { font-size: 0.83rem; color: var(--text-secondary); }
+
+        .rp-misconception {
+          background: rgba(244,114,182,0.06);
+          border: 1px solid rgba(244,114,182,0.15);
+          border-radius: var(--r-md);
+          padding: var(--sp-4);
+        }
+        .rp-misconception__title { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.85rem; color: var(--builder-color); margin-bottom: var(--sp-2); }
+        .rp-misconception p { font-size: 0.83rem; color: var(--text-secondary); margin: 0; }
+
+        .rp-mastery { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
+        .rp-mastery__tag {
+          font-size: 0.75rem; font-weight: 600;
+          color: var(--accent);
+          background: var(--accent-glow);
+          border: 1px solid var(--border-accent);
+          padding: 3px 10px;
+          border-radius: var(--r-full);
+        }
+
+        .rp-empty {
+          display: flex; flex-direction: column; align-items: center;
+          justify-content: center; text-align: center;
+          min-height: 300px; gap: var(--sp-4);
+          color: var(--text-muted);
+        }
+        .rp-empty__icon { color: var(--accent); opacity: 0.5; }
+        .rp-empty h3 { color: var(--text-secondary); font-size: 1rem; margin: 0; }
+        .rp-empty p { font-size: 0.85rem; max-width: 280px; margin: 0; }
+      `}</style>
+    </div>
+  );
+}
diff --git a/client/src/components/ScenarioCard.jsx b/client/src/components/ScenarioCard.jsx
new file mode 100644
index 0000000..dc30a26
--- /dev/null
+++ b/client/src/components/ScenarioCard.jsx
@@ -0,0 +1,238 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ArrowRight, ChevronRight } from 'lucide-react';
+
+const DIFFICULTY_BADGE = {
+  Beginner: 'badge-beginner',
+  Explorer: 'badge-explorer',
+  Builder:  'badge-builder',
+};
+
+const THEME_COLORS = {
+  'chai-stall':    'var(--chai-color)',
+  'isro':          'var(--isro-color)',
+  'instagram':     'var(--insta-color)',
+  'food-delivery': 'var(--food-color)',
+  'ai-playlist':   'var(--playlist-color)',
+  'kota':          'var(--kota-color)',
+  'classic':       'var(--text-muted)',
+};
+
+const THEME_EMOJIS = {
+  'chai-stall':    '🍵',
+  'isro':          '🚀',
+  'instagram':     '📸',
+  'food-delivery': '🍕',
+  'ai-playlist':   '🎵',
+  'kota':          '📚',
+  'classic':       '⚡',
+};
+
+export default function ScenarioCard({ scenario, onClick, compact = false }) {
+  const navigate = useNavigate();
+  const themeColor = THEME_COLORS[scenario.theme] || 'var(--text-muted)';
+  const themeEmoji = THEME_EMOJIS[scenario.theme] || '⚡';
+  const badgeClass  = DIFFICULTY_BADGE[scenario.difficulty] || 'badge-beginner';
+
+  const handleClick = () => {
+    if (onClick) onClick(scenario);
+    else navigate(`/learn/${scenario._id}`);
+  };
+
+  if (compact) {
+    return (
+      <button
+        className="scenario-card-compact hover-lift"
+        onClick={handleClick}
+        style={{ '--theme-color': themeColor }}
+      >
+        <div className="scenario-card-compact__accent" />
+        <div className="scenario-card-compact__body">
+          <div className="flex items-center gap-2" style={{ marginBottom: 4 }}>
+            <span className={`badge ${badgeClass}`}>{scenario.difficulty}</span>
+            {scenario.theme !== 'classic' && (
+              <span className="scenario-card-compact__theme">{themeEmoji}</span>
+            )}
+          </div>
+          <strong className="scenario-card-compact__title">{scenario.title}</strong>
+          <div className="scenario-card-compact__concepts">
+            {scenario.concepts.slice(0, 3).map(c => (
+              <span key={c} className="scenario-card-compact__tag">{c}</span>
+            ))}
+          </div>
+        </div>
+        <ChevronRight size={16} className="scenario-card-compact__arrow" />
+      </button>
+    );
+  }
+
+  return (
+    <button
+      className="scenario-card card hover-lift hover-glow"
+      onClick={handleClick}
+      style={{ '--theme-color': themeColor }}
+    >
+      {/* Theme stripe */}
+      <div className="scenario-card__stripe" />
+
+      <div className="scenario-card__header">
+        <div className="flex items-center gap-2">
+          <span className={`badge ${badgeClass}`}>{scenario.difficulty}</span>
+          {scenario.theme !== 'classic' && (
+            <span className="scenario-card__theme-pill" style={{ color: themeColor }}>
+              {themeEmoji} {scenario.caseStudyId?.replace('cs-', '').replace(/-/g, ' ')}
+            </span>
+          )}
+        </div>
+        {scenario.themeStep && (
+          <span className="scenario-card__step">Step {scenario.themeStep}</span>
+        )}
+      </div>
+
+      <h3 className="scenario-card__title">{scenario.title}</h3>
+      <p className="scenario-card__context">{scenario.context}</p>
+
+      <div className="scenario-card__footer">
+        <div className="scenario-card__concepts">
+          {scenario.concepts.map(c => (
+            <span key={c} className="scenario-card__tag">{c}</span>
+          ))}
+        </div>
+        <span className="scenario-card__cta">
+          Explore <ArrowRight size={14} />
+        </span>
+      </div>
+
+      <style>{`
+        .scenario-card {
+          text-align: left;
+          cursor: pointer;
+          padding: 0;
+          overflow: hidden;
+          display: flex;
+          flex-direction: column;
+          gap: 0;
+          border: 1px solid var(--border);
+          background: var(--bg-glass);
+          position: relative;
+        }
+        .scenario-card__stripe {
+          height: 3px;
+          background: var(--theme-color, var(--accent));
+          opacity: 0.7;
+        }
+        .scenario-card__header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: var(--sp-4) var(--sp-4) 0;
+          gap: var(--sp-2);
+        }
+        .scenario-card__theme-pill {
+          font-size: 0.72rem;
+          font-weight: 600;
+          text-transform: capitalize;
+        }
+        .scenario-card__step {
+          font-size: 0.68rem;
+          color: var(--text-muted);
+          background: var(--bg-elevated);
+          padding: 2px 8px;
+          border-radius: var(--r-full);
+          border: 1px solid var(--border);
+        }
+        .scenario-card__title {
+          font-family: var(--font-heading);
+          font-size: 1rem;
+          font-weight: 600;
+          color: var(--text-primary);
+          line-height: 1.3;
+          padding: var(--sp-3) var(--sp-4) 0;
+        }
+        .scenario-card__context {
+          font-size: 0.84rem;
+          color: var(--text-secondary);
+          line-height: 1.55;
+          padding: var(--sp-2) var(--sp-4);
+          flex: 1;
+          display: -webkit-box;
+          -webkit-line-clamp: 3;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
+        .scenario-card__footer {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: var(--sp-3) var(--sp-4) var(--sp-4);
+          border-top: 1px solid var(--border);
+          margin-top: var(--sp-3);
+          gap: var(--sp-2);
+        }
+        .scenario-card__concepts { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
+        .scenario-card__tag {
+          font-size: 0.7rem;
+          color: var(--text-muted);
+          background: var(--bg-elevated);
+          border: 1px solid var(--border);
+          padding: 2px 8px;
+          border-radius: var(--r-full);
+        }
+        .scenario-card__cta {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          font-size: 0.78rem;
+          font-weight: 600;
+          color: var(--accent);
+          white-space: nowrap;
+          flex-shrink: 0;
+        }
+        /* Compact variant */
+        .scenario-card-compact {
+          display: flex;
+          align-items: center;
+          gap: var(--sp-3);
+          padding: var(--sp-3) var(--sp-4);
+          background: var(--bg-elevated);
+          border: 1px solid var(--border);
+          border-radius: var(--r-md);
+          cursor: pointer;
+          text-align: left;
+          width: 100%;
+          overflow: hidden;
+          position: relative;
+          transition: all 0.2s ease;
+        }
+        .scenario-card-compact:hover { border-color: var(--border-hover); }
+        .scenario-card-compact__accent {
+          width: 3px;
+          height: 100%;
+          background: var(--theme-color);
+          border-radius: 2px;
+          flex-shrink: 0;
+          opacity: 0.7;
+        }
+        .scenario-card-compact__body { flex: 1; min-width: 0; }
+        .scenario-card-compact__title {
+          display: block;
+          font-size: 0.9rem;
+          color: var(--text-primary);
+          line-height: 1.3;
+          margin-bottom: var(--sp-1);
+        }
+        .scenario-card-compact__theme { font-size: 0.9rem; }
+        .scenario-card-compact__concepts { display: flex; flex-wrap: wrap; gap: 4px; }
+        .scenario-card-compact__tag {
+          font-size: 0.68rem;
+          color: var(--text-muted);
+          background: var(--bg-glass);
+          border: 1px solid var(--border);
+          padding: 1px 6px;
+          border-radius: var(--r-full);
+        }
+        .scenario-card-compact__arrow { color: var(--text-muted); flex-shrink: 0; }
+      `}</style>
+    </button>
+  );
+}
diff --git a/client/src/context/AuthContext.jsx b/client/src/context/AuthContext.jsx
new file mode 100644
index 0000000..d916770
--- /dev/null
+++ b/client/src/context/AuthContext.jsx
@@ -0,0 +1,110 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+
+const AuthContext = createContext(null);
+
+const STORAGE_KEY = 'pybe_user';
+const PROGRESS_KEY = 'pybe_progress';
+
+export function AuthProvider({ children }) {
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      if (stored) setUser(JSON.parse(stored));
+    } catch {
+      localStorage.removeItem(STORAGE_KEY);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  function signup({ name, email, password }) {
+    const existing = getAllUsers();
+    if (existing.find(u => u.email === email)) {
+      throw new Error('An account with this email already exists.');
+    }
+    const newUser = {
+      id: crypto.randomUUID(),
+      name,
+      email,
+      password, // not encrypted — prototype only
+      createdAt: new Date().toISOString(),
+      avatar: name.charAt(0).toUpperCase(),
+    };
+    const updated = [...existing, newUser];
+    localStorage.setItem('pybe_all_users', JSON.stringify(updated));
+    const { password: _, ...safeUser } = newUser;
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(safeUser));
+    setUser(safeUser);
+    return safeUser;
+  }
+
+  function login({ email, password }) {
+    const existing = getAllUsers();
+    const found = existing.find(u => u.email === email && u.password === password);
+    if (!found) throw new Error('Incorrect email or password. Please try again.');
+    const { password: _, ...safeUser } = found;
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(safeUser));
+    setUser(safeUser);
+    return safeUser;
+  }
+
+  function logout() {
+    localStorage.removeItem(STORAGE_KEY);
+    setUser(null);
+  }
+
+  // Progress management
+  function getProgress() {
+    try {
+      if (!user) return {};
+      const all = JSON.parse(localStorage.getItem(PROGRESS_KEY) || '{}');
+      return all[user.id] || {};
+    } catch { return {}; }
+  }
+
+  function markChapterComplete(chapterId) {
+    if (!user) return;
+    const all = JSON.parse(localStorage.getItem(PROGRESS_KEY) || '{}');
+    if (!all[user.id]) all[user.id] = {};
+    all[user.id][chapterId] = {
+      status: 'completed',
+      completedAt: new Date().toISOString(),
+    };
+    localStorage.setItem(PROGRESS_KEY, JSON.stringify(all));
+  }
+
+  function getChapterStatus(chapterId) {
+    const progress = getProgress();
+    return progress[chapterId]?.status || 'not-started';
+  }
+
+  return (
+    <AuthContext.Provider value={{
+      user,
+      loading,
+      signup,
+      login,
+      logout,
+      getProgress,
+      markChapterComplete,
+      getChapterStatus,
+    }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+function getAllUsers() {
+  try {
+    return JSON.parse(localStorage.getItem('pybe_all_users') || '[]');
+  } catch { return []; }
+}
+
+export function useAuth() {
+  const ctx = useContext(AuthContext);
+  if (!ctx) throw new Error('useAuth must be used inside AuthProvider');
+  return ctx;
+}
diff --git a/client/src/context/ThemeContext.jsx b/client/src/context/ThemeContext.jsx
new file mode 100644
index 0000000..ca1937a
--- /dev/null
+++ b/client/src/context/ThemeContext.jsx
@@ -0,0 +1,44 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
+const ThemeContext = createContext(null);
+
+export function ThemeProvider({ children }) {
+  const [theme, setTheme] = useState(() => {
+    return localStorage.getItem('pybe_theme') || 'dark';
+  });
+
+  const [dashboardTheme, setDashboardThemeState] = useState(() => {
+    return localStorage.getItem('pybe_dashboard_theme') || 'default';
+  });
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem('pybe_theme', theme);
+  }, [theme]);
+
+  function toggleTheme() {
+    setTheme(t => t === 'dark' ? 'light' : 'dark');
+  }
+
+  function setDashboardTheme(newTheme) {
+    setDashboardThemeState(newTheme);
+    localStorage.setItem('pybe_dashboard_theme', newTheme);
+  }
+
+  return (
+    <ThemeContext.Provider value={{
+      theme,
+      toggleTheme,
+      isDark: theme === 'dark',
+      dashboardTheme,
+      setDashboardTheme
+    }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  return useContext(ThemeContext);
+}
+
diff --git a/client/src/data/curriculum.js b/client/src/data/curriculum.js
new file mode 100644
index 0000000..fd94751
--- /dev/null
+++ b/client/src/data/curriculum.js
@@ -0,0 +1,1117 @@
+// ─────────────────────────────────────────────────────────────────
+// PyBe Curriculum — Chapter definitions, concept mappings & theory
+// ─────────────────────────────────────────────────────────────────
+
+export const CURRICULUM = [
+  {
+    id: 'getting-started',
+    title: 'Getting Started',
+    emoji: '🌱',
+    color: '#A8FF3E',
+    chapters: [
+      {
+        id: 'variables',
+        title: 'Variables',
+        subtitle: 'Giving names to things',
+        emoji: '📦',
+        concepts: ['variables'],
+        intro: {
+          hook: "Imagine trying to remember 10 phone numbers in your head — without writing them down. That's what a computer without variables would be.",
+          whatYoullFigureOut: "How to give a name to any piece of information so you can use it later.",
+          vibe: "Think like Ramu, who just started his chai stall and is trying to keep track of everything.",
+        },
+        theory: {
+          headline: "You just discovered Variables! 🎉",
+          concept: "Variable",
+          beforeVsAfter: {
+            beforeTitle: "Without Variables (Hardcoded Raw Values)",
+            beforeCode: `print(12 * 47 - 200)\nprint("Chai price is 12") # What is 12? What is 47?`,
+            beforePain: "Every number is a mystery. If price changes to 15, you must manually rewrite it in 50 places!",
+            afterTitle: "With Variables (Named Memory Boxes)",
+            afterCode: `price = 15\ncups_sold = 47\nprofit = (price * cups_sold) - 200 # Clear names!`,
+            afterGain: "Change `price = 15` in ONE place and every calculation updates automatically across your entire program.",
+          },
+          explanation: `A variable is just a named box for storing information.
+
+When you write:
+  name = "Ramu"
+
+You're telling Python: "Create a box, label it 'name', and put the word Ramu inside."
+
+Later, whenever you need that information, you just say the box's name — and Python opens it and hands you what's inside.
+
+That's literally it. No magic. Just named boxes.`,
+          codeExample: `# Three named boxes
+chai_type = "Ginger Chai"
+price = 12
+cups_sold = 47
+
+# Use them later
+print("Today's chai:", chai_type)
+print("Total earned: ₹", price * cups_sold)`,
+          realWorldConnection: "Remember when Ramu had to remember his chai's price in his head? Variables let the computer remember for him — so Ramu can focus on making great chai.",
+          keyTakeaway: "Variables = named boxes that store information for you.",
+        },
+      },
+      {
+        id: 'operators',
+        title: 'Operators & Math',
+        subtitle: 'Making the computer calculate',
+        emoji: '➕',
+        concepts: ['arithmetic', 'subtraction'],
+        intro: {
+          hook: "You already know math. Python just lets you make the computer do it — so you never have to.",
+          whatYoullFigureOut: "How to add, subtract, multiply, and divide with Python — and what happens when things don't add up perfectly.",
+          vibe: "Help Ramu figure out his daily profit without using a calculator.",
+        },
+        theory: {
+          headline: "You just discovered Operators! 🧮",
+          concept: "Operators",
+          beforeVsAfter: {
+            beforeTitle: "Without Operators (Mental Math)",
+            beforeCode: `# Manually calculating in head: 12 * 47 = 564\nearnings = 564`,
+            beforePain: "Human mental math is slow, stressful, and error-prone when handling thousands of transactions.",
+            afterTitle: "With Operators (Computer Calculations)",
+            afterCode: `earnings = price * cups_sold\nprofit = earnings - daily_cost`,
+            afterGain: "Python computes math equations in nanoseconds with 100% mathematical precision.",
+          },
+          explanation: `Operators are just the math symbols you already know — Python understands them too.
+
+  +  means add
+  -  means subtract
+  *  means multiply
+  /  means divide
+  ** means "to the power of" (like 2**3 = 8)
+  %  means "remainder" (12 % 5 = 2, because 12 ÷ 5 has remainder 2)
+
+Python follows the same order of operations you learned in school — BODMAS still applies!`,
+          codeExample: `price = 12
+cups_sold = 47
+daily_cost = 200
+
+earnings = price * cups_sold        # 564
+profit = earnings - daily_cost      # 364
+
+print("Ramu earned: ₹", earnings)
+print("Ramu's profit: ₹", profit)`,
+          realWorldConnection: "The moment Ramu wanted to know 'how much did I earn minus what I spent' — he needed operators. Python can do that calculation a million times faster than any mental math.",
+          keyTakeaway: "Operators let you do math on your variables — Python handles the calculation.",
+        },
+      },
+      {
+        id: 'strings',
+        title: 'Strings & Text',
+        subtitle: 'Working with words and sentences',
+        emoji: '💬',
+        concepts: ['strings'],
+        intro: {
+          hook: "Numbers are easy for computers. But what about words? Names? Messages? That's where strings come in.",
+          whatYoullFigureOut: "How Python stores and handles text — and how to stick pieces of text together.",
+          vibe: "Help create personalized greeting messages for Ramu's chai stall regulars.",
+        },
+        theory: {
+          headline: "You just discovered Strings! 📝",
+          concept: "String",
+          beforeVsAfter: {
+            beforeTitle: "Without Strings (Raw Numeric ASCII Codes)",
+            beforeCode: `# Computers originally only understood raw numbers\nmsg_code = [72, 101, 108, 108, 111] # ASCII codes!`,
+            beforePain: "Writing and reading human words as numeric codes makes reading code impossible.",
+            afterTitle: "With Strings (Quotes & Concatenation)",
+            afterCode: `name = "Priya"\ngreeting = f"Hello {name}! Your chai is ready."`,
+            afterGain: "Manipulate text, names, and sentences directly using intuitive quotes and f-strings.",
+          },
+          explanation: `A string is just a piece of text in Python. You wrap it in quotes and Python treats everything inside as text — not a calculation, not a variable name, just text.
+
+  "Hello, Ramu!"     → a string
+  'Ginger Chai'      → also a string (single quotes work too)
+  "12"               → this is the TEXT "12", not the number 12
+
+You can join strings together using +:
+  first = "Ginger"
+  second = " Chai"
+  full = first + second   → "Ginger Chai"
+
+This is called concatenation (a fancy word for "sticking text together").`,
+          codeExample: `name = "Priya"
+chai = "Masala Chai"
+price = 15
+
+# Building a message
+greeting = "Hello " + name + "! Your " + chai + " is ready."
+print(greeting)
+# → Hello Priya! Your Masala Chai is ready.
+
+# f-strings (the modern, cleaner way)
+bill = f"Your total is ₹{price}. Thank you!"
+print(bill)`,
+          realWorldConnection: "Every time Ramu wants to print a receipt, send a message, or display a menu — he needs strings. You just figured out how Python talks in words, not just numbers.",
+          keyTakeaway: "Strings are text wrapped in quotes. Use + or f-strings to combine them.",
+        },
+      },
+    ],
+  },
+
+  {
+    id: 'basics',
+    title: 'Basics',
+    emoji: '📚',
+    color: '#60A5FA',
+    chapters: [
+      {
+        id: 'conditionals',
+        title: 'Making Decisions',
+        subtitle: 'if this, then that',
+        emoji: '🔀',
+        concepts: ['conditionals', 'comparisons'],
+        intro: {
+          hook: "Every single day you make hundreds of decisions: if it's raining, carry an umbrella. If the price is right, buy it. If your score is above 40, you pass.",
+          whatYoullFigureOut: "How to teach Python to make decisions — so it can handle different situations on its own.",
+          vibe: "Help a student figure out if they passed their exam — without manually checking every student's marks.",
+        },
+        theory: {
+          headline: "You just discovered If/Else — Decisions! 🔀",
+          concept: "Conditionals (if/else)",
+          beforeVsAfter: {
+            beforeTitle: "Without Conditionals (Flat Code Execution)",
+            beforeCode: `print("Student Passed!")\nprint("Student Failed!") # Both lines print every time!`,
+            beforePain: "Without branching rules, your program runs every line blindly regardless of the actual situation.",
+            afterTitle: "With Conditionals (if / elif / else)",
+            afterCode: `if score >= 60:\n    print("Student Passed!")\nelse:\n    print("Student Failed!")`,
+            afterGain: "Your program evaluates runtime inputs and makes smart decisions automatically.",
+          },
+          explanation: `Python makes decisions with "if":
+
+  if <something is true>:
+      do this
+  else:
+      do that instead
+
+The key is the colon (:) and the indent (spaces before the next line). Python is very particular about this — it's how it knows which code belongs to the "if" and which belongs to the "else".
+
+You can also chain conditions:
+  if score >= 90:
+      grade = "A"
+  elif score >= 60:
+      grade = "B"
+  else:
+      grade = "C"
+
+elif means "else if" — another condition to check when the first one fails.`,
+          codeExample: `score = 73
+
+if score >= 80:
+    print("Great job! 🌟")
+elif score >= 60:
+    print("You passed! Keep it up.")
+elif score >= 40:
+    print("Just passed. Study harder next time.")
+else:
+    print("Better luck next time. Don't give up!")`,
+          realWorldConnection: "The moment you wanted the computer to treat different students differently based on their marks — you needed if/else. Python calls it a conditional, and it's the foundation of all smart programs.",
+          keyTakeaway: "if/else lets your code make decisions — different inputs, different outputs.",
+        },
+      },
+      {
+        id: 'loops',
+        title: 'Loops',
+        subtitle: 'Repeating without copying',
+        emoji: '🔁',
+        concepts: ['loops', 'while loops'],
+        intro: {
+          hook: "What if you had to check 30 students' attendance one by one, writing the same code 30 times? There's a better way.",
+          whatYoullFigureOut: "How to make Python repeat an action automatically — for a list of items, or until a condition is met.",
+          vibe: "Help a teacher automate the attendance roll call for a whole class.",
+        },
+        theory: {
+          headline: "You just discovered Loops! 🔁",
+          concept: "Loops (for / while)",
+          beforeVsAfter: {
+            beforeTitle: "Without Loops (Copy-Pasting Code Lines)",
+            beforeCode: `print(students[0], "Present")\nprint(students[1], "Present")\nprint(students[2], "Present") # x100 lines!`,
+            beforePain: "Processing 100 items requires copy-pasting code 100 times. Change 1 requirement = edit 100 lines!",
+            afterTitle: "With Loops (for / while)",
+            afterCode: `for s in students:\n    print(s, "Present ✓")`,
+            afterGain: "Write the action ONCE, and Python repeats it for 10 or 10,000 items automatically.",
+          },
+          explanation: `A loop tells Python: "Do this thing for each item" or "Keep doing this until I say stop."
+
+There are two kinds:
+
+FOR loop — "do this for each item in a list":
+  for student in attendance_list:
+      print(student + " - Present")
+
+WHILE loop — "keep going as long as this is true":
+  attempts = 0
+  while attempts < 3:
+      print("Try again!")
+      attempts = attempts + 1
+
+The for loop is more common when you know what you're looping over.
+The while loop is for "keep going until something changes."`,
+          codeExample: `students = ["Priya", "Arjun", "Dev", "Meera"]
+
+# Check everyone without writing 4 separate lines
+for name in students:
+    print(name, "- Present ✓")
+
+# Count total attendance
+total = len(students)
+print(f"Total present: {total}")`,
+          realWorldConnection: "The moment you wanted to do the same thing for every student without copy-pasting code 30 times — you invented loops. Python has had them since day one.",
+          keyTakeaway: "Loops repeat an action — for each item in a collection, or while a condition is true.",
+        },
+      },
+      {
+        id: 'lists',
+        title: 'Lists',
+        subtitle: 'Storing many things together',
+        emoji: '📝',
+        concepts: ['lists', 'indexing', 'counting'],
+        intro: {
+          hook: "You have 8 chai types, 8 separate variables. You need to add a 9th. Then a 10th. Something has to change.",
+          whatYoullFigureOut: "How to group many related things into one single container — instead of creating a new variable for each one.",
+          vibe: "Ramu's chai menu keeps growing. Help him organize it properly.",
+        },
+        theory: {
+          headline: "You just discovered Lists! 📝",
+          concept: "List",
+          beforeVsAfter: {
+            beforeTitle: "Without Lists (Separate Variables)",
+            beforeCode: `item1 = "Chai"\nitem2 = "Coffee"\nitem3 = "Samosa" # Need item4, item5... item100?`,
+            beforePain: "Creating separate variables for 100 items makes passing data and counting total items impossible.",
+            afterTitle: "With Lists (Ordered Collection Container)",
+            afterCode: `menu = ["Chai", "Coffee", "Samosa"]\nmenu.append("Bun Maska")`,
+            afterGain: "Store thousands of items in one named list container with instant index access.",
+          },
+          explanation: `A list is like a row of boxes — instead of one named box, you have many boxes in a line, all under one name.
+
+  chai_menu = ["Ginger Chai", "Masala Chai", "Plain Tea", "Green Tea"]
+
+Now chai_menu holds ALL four, under one name.
+
+You get individual items by their position (starting from 0 — Python counts from zero, not one):
+  chai_menu[0]   → "Ginger Chai"  (first item)
+  chai_menu[1]   → "Masala Chai"  (second item)
+  chai_menu[-1]  → "Green Tea"    (last item, a shortcut!)
+
+You can add to the list:   chai_menu.append("Lemon Tea")
+You can check the length:  len(chai_menu)  → 5`,
+          codeExample: `chai_menu = ["Ginger Chai", "Masala Chai", "Plain Tea"]
+
+# See everything
+for chai in chai_menu:
+    print("•", chai)
+
+# Add a new item
+chai_menu.append("Lemon Tea")
+print(f"Now we have {len(chai_menu)} types of chai!")
+
+# Get the first one
+print("Our signature chai:", chai_menu[0])`,
+          realWorldConnection: "The moment Ramu had 8 separate chai variables and realized they all belonged together — he reinvented the list. That pain you felt managing separate variables? That's exactly why Python has lists.",
+          keyTakeaway: "Lists hold many items under one name — indexed from 0, grow with .append().",
+        },
+      },
+    ],
+  },
+
+  {
+    id: 'intermediate',
+    title: 'Intermediate',
+    emoji: '⚙️',
+    color: '#F59E0B',
+    chapters: [
+      {
+        id: 'dictionaries',
+        title: 'Dictionaries',
+        subtitle: 'Looking up by name, not position',
+        emoji: '📖',
+        concepts: ['dictionaries'],
+        intro: {
+          hook: "Lists are great, but what happens when you need to know the *price* of a specific chai? You'd have to count its position first. That breaks. Fast.",
+          whatYoullFigureOut: "How to store key-value pairs — like a real dictionary where you look up a word and get its meaning.",
+          vibe: "A critical FAIL at ISRO Mission Control at 2 AM shows why position-based lookup breaks — and how dictionaries fix it.",
+        },
+        theory: {
+          headline: "You just discovered Dictionaries! 📖",
+          concept: "Dictionary",
+          beforeVsAfter: {
+            beforeTitle: "Without Dictionaries (Parallel Lists)",
+            beforeCode: `items = ["Chai", "Coffee"]\nprices = [12, 25]\n# Index 0 must match Index 0! Danger!`,
+            beforePain: "Parallel lists fall out of sync if an item is deleted or sorted, corrupting your application data.",
+            afterTitle: "With Dictionaries (Key-Value Direct Lookup)",
+            afterCode: `prices = {"Chai": 12, "Coffee": 25}\nprint(prices["Chai"]) # Direct O(1) lookup!`,
+            afterGain: "Associate names directly with values for instant O(1) key lookup by name.",
+          },
+          explanation: `A dictionary stores pairs: a key and a value. Just like a real dictionary — you look up a word (key) and get its definition (value).
+
+  prices = {
+      "Ginger Chai": 12,
+      "Masala Chai": 15,
+      "Plain Tea": 8,
+  }
+
+Now to find Masala Chai's price, you don't count positions — you just ask by name:
+  prices["Masala Chai"]   → 15
+
+This is much safer than lists when things have names. No more "wait, was it index 4 or 5?"
+
+You can add entries:  prices["Lemon Tea"] = 10
+Check if key exists:  "Plain Tea" in prices   → True
+Get all keys:         prices.keys()`,
+          codeExample: `# ISRO telemetry — safe lookup by name
+subsystems = {
+    "fuel_pressure": 98.6,
+    "temperature": 72.3,
+    "signal_strength": 94.1,
+}
+
+# Look up by name, not position!
+print("Fuel pressure:", subsystems["fuel_pressure"])
+
+# Add a new subsystem easily
+subsystems["battery"] = 87.5
+
+# Check everything
+for system, value in subsystems.items():
+    status = "OK ✓" if value > 80 else "WARNING ⚠️"
+    print(f"{system}: {value} — {status}")`,
+          realWorldConnection: "When the ISRO intern needed to find fuel pressure among 12 subsystems at 2 AM, counting list positions was too risky. Dictionaries let you look up by name — because names don't change even when you add new items.",
+          keyTakeaway: "Dictionaries store key-value pairs — look up by name, not position.",
+        },
+      },
+      {
+        id: 'sets',
+        title: 'Sets',
+        subtitle: 'Unique collections — no duplicates allowed',
+        emoji: '🎯',
+        concepts: ['sets'],
+        intro: {
+          hook: '"Shape of You" plays for the 23rd time. Your playlist has 200 songs — 40 of them are duplicates. A set would have fixed this in one line.',
+          whatYoullFigureOut: "How to store things where each item can only appear once — and how to find what's missing or what's shared.",
+          vibe: "The AI Playlist that keeps repeating songs — and the duplicate biryani crisis that crashed the food delivery startup.",
+        },
+        theory: {
+          headline: "You just discovered Sets! 🎯",
+          concept: "Set",
+          beforeVsAfter: {
+            beforeTitle: "Without Sets (Manual Loop Duplicate Checks)",
+            beforeCode: `unique = []\nfor x in items:\n    if x not in unique:\n        unique.append(x) # Slow & verbose!`,
+            beforePain: "Checking for duplicates manually requires slow nested loops and messy boilerplate code.",
+            afterTitle: "With Sets (Unique Element Buckets)",
+            afterCode: `unique_items = set(items) # Instant 1-line deduplication!`,
+            afterGain: "Guarantees 100% unique elements automatically using mathematical set operations.",
+          },
+          explanation: `A set is like a list, but with one golden rule: every item can only appear ONCE.
+
+  played = {"Shape of You", "Blinding Lights", "Shape of You"}
+
+  Actually stored: {"Shape of You", "Blinding Lights"}
+  (The duplicate is automatically thrown out)
+
+Sets are great for:
+  • Removing duplicates from a list
+  • Checking if something is in a group (very fast!)
+  • Finding what two groups share (intersection)
+  • Finding what one group has that the other doesn't (difference)
+
+Convert a list to a set:  set(my_list)
+Convert back:             list(my_set)`,
+          codeExample: `# Fix a playlist with duplicates
+songs_played = ["Shape of You", "Blinding Lights", "Shape of You", "Levitating", "Blinding Lights"]
+
+# Remove all duplicates instantly
+unique_songs = set(songs_played)
+print(f"Unique songs: {len(unique_songs)}")  # → 3
+
+# Find songs NOT yet played today
+all_songs = {"Shape of You", "Blinding Lights", "Levitating", "Stay", "Peaches"}
+unplayed = all_songs - unique_songs
+print("Songs to play next:", unplayed)`,
+          realWorldConnection: "The moment 'Shape of You' played for the 23rd time, you needed a set — a collection that just refuses to store duplicates. Python sets do this automatically, with zero extra code from you.",
+          keyTakeaway: "Sets store unique items only — perfect for removing duplicates and finding differences.",
+        },
+      },
+      {
+        id: 'functions',
+        title: 'Functions',
+        subtitle: 'Write once, use everywhere',
+        emoji: '🔧',
+        concepts: ['functions'],
+        intro: {
+          hook: "You've written the same discount calculation in 5 different places in your code. Then the discount rule changes. Now you have to fix it in 5 places. There must be a better way.",
+          whatYoullFigureOut: "How to package a piece of code into a named box — so you can run it anytime without rewriting it.",
+          vibe: "Ramu's chai stall needs a consistent discount system — and copy-pasting the formula everywhere is already causing bugs.",
+        },
+        theory: {
+          headline: "You just discovered Functions! 🔧",
+          concept: "Function",
+          beforeVsAfter: {
+            beforeTitle: "Without Functions (Duplicate Code Blocks)",
+            beforeCode: `# Table 1 bill calculation\ntax = 15 * 0.05\ntotal = 15 + tax\n# Repeat same 3 lines for Table 2, Table 3...`,
+            beforePain: "Duplicating calculation logic across your app means bug fixes must be repeated everywhere.",
+            afterTitle: "With Functions (Reusable Logic Blocks)",
+            afterCode: `def get_total(price):\n    return price * 1.05\n\nbill1 = get_total(15)`,
+            afterGain: "Package logic into reusable functions with inputs and outputs — write once, run anywhere.",
+          },
+          explanation: `A function is a named, reusable block of code. You define it once, call it anywhere.
+
+  def calculate_bill(price, quantity):
+      total = price * quantity
+      discount = total * 0.1   # 10% off
+      return total - discount
+
+Now whenever you need the bill:
+  bill = calculate_bill(12, 5)   → 54.0
+
+You gave the function two inputs (price, quantity), it ran the calculation and gave you back an answer (54.0).
+
+  def → how you declare a function
+  return → how the function sends the answer back to you
+  Indented code → the "body" — what runs when you call it`,
+          codeExample: `def chai_bill(price, cups, has_loyalty_card):
+    total = price * cups
+    if has_loyalty_card:
+        total = total * 0.9   # 10% loyalty discount
+    return total
+
+# Use it for any order — no copy-paste!
+order1 = chai_bill(12, 3, True)   # → 32.4
+order2 = chai_bill(15, 2, False)  # → 30.0
+order3 = chai_bill(8,  5, True)   # → 36.0
+
+print(f"Order 1: ₹{order1}")`,
+          realWorldConnection: "The moment you had the same discount formula in 5 places and one change broke 4 of them — you needed a function. Package the logic once, name it, call it everywhere. Fix it once, fixed everywhere.",
+          keyTakeaway: "Functions are reusable code blocks — define once with def, call them anywhere.",
+        },
+      },
+      {
+        id: 'search-filter',
+        title: 'Search & Filter',
+        subtitle: 'Finding exactly what you need',
+        emoji: '🔍',
+        concepts: ['search', 'filtering', 'modulo'],
+        intro: {
+          hook: "You have 30 students. A parent just called and wants their child's rank. You're staring at 30 names in a list. How do you find the right one — fast?",
+          whatYoullFigureOut: "How to search through data, filter it by conditions, and pick out exactly what you need.",
+          vibe: "The Kota coaching center needs to find any student's rank in seconds — with the director watching.",
+        },
+        theory: {
+          headline: "You just discovered Search & Filter! 🔍",
+          concept: "Search & Filter",
+          beforeVsAfter: {
+            beforeTitle: "Without Search Algorithms (Manual Inspection)",
+            beforeCode: `# Checking elements one by one manually without pattern matching`,
+            beforePain: "Scanning large datasets without systematic algorithms results in missed data and slowness.",
+            afterTitle: "With Search & Filter Algorithms",
+            afterCode: `found = [item for item in items if query in item]`,
+            afterGain: "Find target items or filter collections in milliseconds using pattern matching.",
+          },
+          explanation: `Searching means finding an item that matches what you're looking for.
+Filtering means keeping only the items that pass a condition.
+
+Python gives you powerful tools for both:
+
+  # Search: find one item
+  for student in students:
+      if student["name"] == "Priya":
+          print("Found her!")
+
+  # Filter: keep only items that match
+  top_students = [s for s in students if s["rank"] <= 10]
+
+That last line is called a "list comprehension" — it's Python's elegant way to filter in one line.
+
+You can also use:
+  any()  → is at least one item true?
+  all()  → are all items true?
+  min()  → find the smallest
+  max()  → find the largest`,
+          codeExample: `students = [
+    {"name": "Priya", "rank": 3},
+    {"name": "Arjun", "rank": 12},
+    {"name": "Dev", "rank": 1},
+    {"name": "Meera", "rank": 7},
+]
+
+# Find one student by name
+def find_student(name):
+    for s in students:
+        if s["name"] == name:
+            return s
+    return None
+
+result = find_student("Priya")
+print(f"{result['name']} is ranked #{result['rank']}")
+
+# Filter: who's in top 5?
+top5 = [s for s in students if s["rank"] <= 5]
+print("Top 5:", [s["name"] for s in top5])`,
+          realWorldConnection: "When the director walked in and asked 'where is Priya's rank?' — you needed search. When you wanted only the top 10 students — you needed filter. These two operations underlie every app you've ever used.",
+          keyTakeaway: "Search finds one item; Filter keeps only items that match a condition.",
+        },
+      },
+    ],
+  },
+
+  {
+    id: 'advanced',
+    title: 'Advanced',
+    emoji: '⚡',
+    color: '#EC4899',
+    chapters: [
+      {
+        id: 'error-handling',
+        title: 'Error Handling',
+        subtitle: "Expecting the unexpected",
+        emoji: '🛡️',
+        concepts: ['error handling', 'validation'],
+        intro: {
+          hook: "Someone enters -36 as a quantity. Your app crashes. 47 orders are wiped. Three friends lose their startup's first night of orders.",
+          whatYoullFigureOut: "How to write code that handles bad inputs, crashes gracefully, and never loses data — even when users do the wrong thing.",
+          vibe: "The HungerFix food delivery startup almost closed on its first night because of one missing input check.",
+        },
+        theory: {
+          headline: "You just discovered Error Handling! 🛡️",
+          concept: "try / except",
+          beforeVsAfter: {
+            beforeTitle: "Without Try/Except (Uncaught Crashes)",
+            beforeCode: `result = 10 / 0 # Unhandled ZeroDivisionError -> APP CRASHES!`,
+            beforePain: "An unexpected invalid input or zero division crashes your entire application for all users.",
+            afterTitle: "With Try/Except (Error Shields)",
+            afterCode: `try:\n    result = 10 / 0\nexcept ZeroDivisionError:\n    result = 0 # Handled safely!`,
+            afterGain: "Shield your program against crashes — catch errors gracefully and keep running.",
+          },
+          explanation: `Real code gets real inputs — and real inputs are often wrong. Error handling lets your code deal with problems without crashing.
+
+  try:
+      risky code here
+  except SomeError:
+      code to run when it goes wrong
+
+It's like a safety net. Python tries the risky thing, and if it fails, instead of crashing — it catches the fall and does something smarter.
+
+Common errors you'll catch:
+  ValueError     → wrong type of value ("abc" where a number was expected)
+  ZeroDivisionError  → dividing by zero
+  KeyError       → looking up a key that doesn't exist in a dict
+  FileNotFoundError  → file you tried to open doesn't exist`,
+          codeExample: `def place_order(item, quantity):
+    # Validate input BEFORE anything breaks
+    if not isinstance(quantity, (int, float)):
+        return "Error: Quantity must be a number!"
+    if quantity <= 0:
+        return "Error: Quantity must be positive!"
+    if quantity > 100:
+        return "Error: Can't order more than 100 at once."
+
+    try:
+        total = calculate_price(item, quantity)
+        return f"Order placed! ₹{total}"
+    except KeyError:
+        return f"Error: '{item}' not found on our menu."
+    except Exception as e:
+        return f"Unexpected error: {e}"`,
+          realWorldConnection: "That -36 quantity that crashed the HungerFix startup? One if-statement would have caught it. Error handling is the difference between a toy project and a real app. Real code always has it.",
+          keyTakeaway: "try/except catches errors before they crash your program — validate inputs early!",
+        },
+      },
+      {
+        id: 'algorithms',
+        title: 'Algorithms',
+        subtitle: 'Thinking cleverly about steps',
+        emoji: '🧠',
+        concepts: ['algorithms', 'sorting', 'adaptive logic'],
+        intro: {
+          hook: "30 students' ranks. You need to find the top 3, then sort the whole list. Do you check every pair? Or is there a smarter way?",
+          whatYoullFigureOut: "How to think algorithmically — breaking a problem into efficient steps instead of brute-force checking everything.",
+          vibe: "The Kota coaching center needs its merit list sorted in 10 seconds — the director is already on his way up.",
+        },
+        theory: {
+          headline: "You just discovered Algorithms! 🧠",
+          concept: "Algorithms & Sorting",
+          beforeVsAfter: {
+            beforeTitle: "Without Sorting Algorithms (Unordered Chaos)",
+            beforeCode: `scores = [73, 98, 45, 88] # Finding top score requires scanning all items`,
+            beforePain: "Unsorted data makes finding ranks, medians, and top performers extremely slow.",
+            afterTitle: "With Sorting Algorithms",
+            afterCode: `scores.sort(reverse=True) # [98, 88, 73, 45]`,
+            afterGain: "Instantly organize unstructured data into sorted order for instant ranking.",
+          },
+          explanation: `An algorithm is just a set of steps to solve a problem. But the key is: some step sequences are WAY smarter than others.
+
+Sorting is one of the most classic algorithmic problems:
+
+Python's built-in sort is extremely fast:
+  students.sort(key=lambda s: s["rank"])
+
+But understanding WHY it works matters more than memorizing it.
+
+The simplest sorting idea (Bubble Sort) goes through the list repeatedly, swapping adjacent items that are out of order. Python's actual sort (Timsort) is much smarter — but the IDEA is the same: compare, swap, repeat.
+
+Lambda is just a tiny function you write inline:
+  lambda s: s["rank"]
+means "for each student s, sort by their rank value."`,
+          codeExample: `students = [
+    {"name": "Priya",  "marks": 287},
+    {"name": "Dev",    "marks": 312},
+    {"name": "Meera",  "marks": 245},
+    {"name": "Arjun",  "marks": 298},
+]
+
+# Sort by marks — highest first
+sorted_students = sorted(students, key=lambda s: s["marks"], reverse=True)
+
+# Print merit list
+print("=== MERIT LIST ===")
+for rank, student in enumerate(sorted_students, start=1):
+    print(f"#{rank}  {student['name']}  —  {student['marks']}")`,
+          realWorldConnection: "When the director needed the merit list in 10 seconds, you needed to sort 30 entries efficiently. Python's sort handles this in microseconds — built on decades of computer science research. But now you understand the idea behind it.",
+          keyTakeaway: "Algorithms are step-by-step solutions. Python's sort() is built-in, efficient, and customizable with key=.",
+        },
+      },
+      {
+        id: 'files',
+        title: 'Files & Data',
+        subtitle: 'Saving things so they last',
+        emoji: '💾',
+        concepts: ['file I/O', 'averages'],
+        intro: {
+          hook: "Every time you restart your app, all the data is gone. Ramu loses his entire order history. There has to be a way to make things permanent.",
+          whatYoullFigureOut: "How to read from and write to files — so your program's data survives even after you close it.",
+          vibe: "Ramu needs to save his daily sales records to a file so he can review them the next morning.",
+        },
+        theory: {
+          headline: "You just discovered File I/O! 💾",
+          concept: "Files & I/O",
+          beforeVsAfter: {
+            beforeTitle: "Without Files (Transient RAM Memory)",
+            beforeCode: `# Program ends -> all variables erased from RAM permanently!`,
+            beforePain: "When the app closes or the computer restarts, all student progress and data is lost forever.",
+            afterTitle: "With File I/O (Permanent Disk Storage)",
+            afterCode: `with open("data.json", "w") as f:\n    json.dump(records, f)`,
+            afterGain: "Save data permanently to disk so records persist across sessions and restarts.",
+          },
+          explanation: `File I/O (Input/Output) means reading from and writing to files on your computer.
+
+Writing to a file:
+  with open("sales.txt", "w") as file:
+      file.write("Day 1: ₹564\n")
+
+Reading from a file:
+  with open("sales.txt", "r") as file:
+      content = file.read()
+
+The "with" statement is the safe way — it automatically closes the file when you're done.
+
+Modes:
+  "w"  → write (starts fresh, overwrites existing)
+  "a"  → append (adds to the end, keeps existing)
+  "r"  → read (only reading, can't write)
+
+For structured data, Python's "json" module lets you save dictionaries and lists directly:
+  import json
+  json.dump(my_dict, file)   # save
+  json.load(file)             # load back`,
+          codeExample: `import json
+
+def save_daily_sales(day, earnings, cups_sold):
+    record = {
+        "day": day,
+        "earnings": earnings,
+        "cups_sold": cups_sold,
+    }
+    with open("ramu_sales.json", "a") as f:
+        f.write(json.dumps(record) + "\\n")
+
+def load_all_sales():
+    try:
+        with open("ramu_sales.json", "r") as f:
+            return [json.loads(line) for line in f if line.strip()]
+    except FileNotFoundError:
+        return []   # No records yet, that's fine
+
+save_daily_sales("Monday", 564, 47)
+all_records = load_all_sales()
+print(f"Total days recorded: {len(all_records)}")`,
+          realWorldConnection: "The moment Ramu wanted to check last Tuesday's sales — he needed files. Without file I/O, every program forgets everything the second you close it. Files make data permanent.",
+          keyTakeaway: "Files persist data between runs. Use 'with open()' to read/write safely. JSON handles structured data.",
+        },
+      },
+    ],
+  },
+];
+
+// Flat chapter list for easy lookup
+export const CHAPTERS_MAP = {};
+CURRICULUM.forEach(section => {
+  section.chapters.forEach(chapter => {
+    CHAPTERS_MAP[chapter.id] = { ...chapter, sectionId: section.id, sectionTitle: section.title, sectionColor: section.color };
+  });
+});
+
+// All chapters in order
+export const ALL_CHAPTERS = CURRICULUM.flatMap(s => s.chapters.map(c => ({
+  ...c,
+  sectionId: s.id,
+  sectionTitle: s.title,
+  sectionColor: s.color,
+})));
+
+// ── Theme Variations for Chapter Intro & Theory ────────────────────
+const THEMED_CHAPTER_VARIANTS = {
+  potterheads: {
+    variables: {
+      vibe: "Think like a Potions Apprentice at Hogwarts keeping track of ingredients for Severus Snape's cauldron.",
+      realWorldConnection: "When Snape measures Boomslang skin and Lacewing flies, variables let Hogwarts magic track the exact dosage — so your cauldron doesn't explode.",
+      codeExample: `# Hogwarts Potion Ingredients
+ingredient = "Boomslang Skin"
+grams = 15
+potency = 98
+
+print("Brewing:", ingredient)
+print("Total dosage:", grams * potency)`,
+    },
+    operators: {
+      vibe: "Help Hermione calculate House points and potion brewing times without a Time-Turner.",
+      realWorldConnection: "Calculating House point totals and potion brewing duration requires Python math operators.",
+      codeExample: `base_points = 100
+bonus = 45
+penalty = 15
+
+final_points = base_points + bonus - penalty
+print("Gryffindor total:", final_points)`,
+    },
+    strings: {
+      vibe: "Craft incantation formulas and Marauder's Map scroll greetings.",
+      realWorldConnection: "Spells like 'Expelliarmus' and Marauder's Map scroll messages are strings in Python.",
+      codeExample: `wizard = "Harry"
+spell = "Expelliarmus"
+
+greeting = f"I solemnly swear {wizard} casts {spell}!"
+print(greeting)`,
+    },
+    conditionals: {
+      vibe: "Help the Sorting Hat assign students to Gryffindor, Ravenclaw, Hufflepuff, or Slytherin.",
+      realWorldConnection: "The Sorting Hat uses if/elif/else to evaluate student traits and assign their house.",
+      codeExample: `bravery = 88
+wisdom = 72
+
+if bravery >= 80:
+    house = "Gryffindor"
+elif wisdom >= 80:
+    house = "Ravenclaw"
+else:
+    house = "Hufflepuff"
+
+print("Assigned to:", house)`,
+    },
+    loops: {
+      vibe: "Automate stirring the Felix Felicis cauldron 50 times in a clockwise direction.",
+      realWorldConnection: "Potion brewing requires repetitive clockwise stirs — loops repeat the action automatically.",
+      codeExample: `for stir in range(1, 6):
+    print(f"Stirring Felix Felicis... Turn {stir} ✨")`,
+    },
+    lists: {
+      vibe: "Organize Harry's DADA Defense Against the Dark Arts spellbook list.",
+      realWorldConnection: "Storing spell books and potion ingredients in a Python list keeps Hogwarts inventories organized.",
+      codeExample: `spells = ["Lumos", "Alohomora", "Expecto Patronum"]
+spells.append("Stupefy")
+
+print("Known spells:", spells)`,
+    },
+    dictionaries: {
+      vibe: "Manage Dumbledore's House Points tally dictionary.",
+      realWorldConnection: "Looking up House Points by house name ('Gryffindor') requires a dictionary lookup.",
+      codeExample: `house_points = {"Gryffindor": 450, "Slytherin": 420, "Ravenclaw": 390}
+print("Gryffindor points:", house_points["Gryffindor"])`,
+    },
+    sets: {
+      vibe: "Filter out duplicate curse owl reports in the Ministry of Magic.",
+      realWorldConnection: "Sets eliminate duplicate owl telemetry reports automatically.",
+      codeExample: `curse_reports = {"Curse_A", "Curse_B", "Curse_A"}
+print("Unique curses:", curse_reports)`,
+    },
+    functions: {
+      vibe: "Package reusable potion stir and incantation power calculations into magic functions.",
+      realWorldConnection: "Defining a brewing function lets any wizard re-use complex magic logic anywhere.",
+      codeExample: `def cast_patronus(happy_memory):
+    return f"Expecto Patronum! Powered by {happy_memory}"
+
+print(cast_patronus("Flying on Buckbeak"))`,
+    },
+    search: {
+      vibe: "Find a specific dark magic scroll in the Hogwarts Restricted Section.",
+      realWorldConnection: "Search algorithms locate rare magical artifacts in vast library scrolls.",
+      codeExample: `library = ["Standard Spells", "Dark Curses", "Alchemy"]
+found = "Dark Curses" in library
+print("Found in Restricted Section:", found)`,
+    },
+    error: {
+      vibe: "Handle explosive cauldron failures gracefully with try/except.",
+      realWorldConnection: "When a potion fails, try/except prevents the entire dungeon from blowing up.",
+      codeExample: `try:
+    heat = 500
+    if heat > 300:
+        raise ValueError("Cauldron Overheat!")
+except ValueError as e:
+    print("Shield charm cast! 🛡️", e)`,
+    },
+    algorithms: {
+      vibe: "Sort the House Cup leaderboard before Dumbledore awards the trophy.",
+      realWorldConnection: "Algorithms sort House points from highest to lowest instantly.",
+      codeExample: `scores = [420, 450, 390]
+scores.sort(reverse=True)
+print("Leaderboard:", scores)`,
+    },
+    files: {
+      vibe: "Save Ministry of Magic secret archives to permanent scroll files.",
+      realWorldConnection: "File I/O persists magical records across Hogwarts terms.",
+      codeExample: `with open("scrolls.txt", "w") as f:
+    f.write("Secret Spell Archive v1")`,
+    },
+  },
+
+  marvel: {
+    variables: {
+      vibe: "Think like Tony Stark's AI engineer, tracking Mark 85 Arc Reactor voltage percentage.",
+      realWorldConnection: "Tracking Arc Reactor output and repulsor battery levels requires named variables.",
+      codeExample: `# J.A.R.V.I.S. Suit Status
+armor_model = "Mark 85"
+arc_reactor_pct = 98.5
+status = "ONLINE"
+
+print("Armor:", armor_model)
+print("Power:", arc_reactor_pct, "%")`,
+    },
+    operators: {
+      vibe: "Help J.A.R.V.I.S. calculate flight thruster force and repulsor power drain.",
+      realWorldConnection: "Computing nanotech suit energy depletion requires Python operators.",
+      codeExample: `max_power = 1000
+thrust_cost = 250
+shield_cost = 180
+
+remaining = max_power - thrust_cost - shield_cost
+print("Power remaining:", remaining)`,
+    },
+    strings: {
+      vibe: "Configure J.A.R.V.I.S. voice alerts and Avengers Assembly broadcast messages.",
+      realWorldConnection: "Suit HUD status updates and AI voice responses are strings.",
+      codeExample: `hero = "Tony"
+alert = f"J.A.R.V.I.S.: Welcome back Mr. {hero}. All systems nominal."
+print(alert)`,
+    },
+    conditionals: {
+      vibe: "Program Stark defense suit automated threat level protocols.",
+      realWorldConnection: "Suit nanotech decides whether to deploy repulsors or shields using if/elif/else.",
+      codeExample: `threat_level = 85
+
+if threat_level > 80:
+    weapon = "Nanotech Shield"
+elif threat_level > 50:
+    weapon = "Repulsor Beam"
+else:
+    weapon = "Scan Only"
+
+print("Deployed:", weapon)`,
+    },
+    loops: {
+      vibe: "Scan 100 Iron Man armor modules for subsystem damage.",
+      realWorldConnection: "Scanning armor thruster arrays one by one is done in a loop.",
+      codeExample: `modules = ["Helmet", "Chest", "Repulsor L", "Repulsor R"]
+for m in modules:
+    print(f"Scanning {m}... OK ✓")`,
+    },
+    lists: {
+      vibe: "Maintain the Avengers active emergency team roster.",
+      realWorldConnection: "Storing hero names in a list lets J.A.R.V.I.S. broadcast missions instantaneously.",
+      codeExample: `avengers = ["Iron Man", "Thor", "Captain America"]
+avengers.append("Spider-Man")
+
+print("Active Avengers:", avengers)`,
+    },
+    dictionaries: {
+      vibe: "Build J.A.R.V.I.S. weapon status telemetry lookup dictionary.",
+      realWorldConnection: "Looking up weapon status by name ('unibeam') needs a dictionary.",
+      codeExample: `suit_status = {"unibeam": "CHARGED", "thrusters": "ACTIVE"}
+print("Unibeam status:", suit_status["unibeam"])`,
+    },
+    sets: {
+      vibe: "Filter duplicate cosmic energy spikes from Wakanda vibranium sensors.",
+      realWorldConnection: "Sets eliminate duplicate satellite energy readings automatically.",
+      codeExample: `signals = {"Gamma_88", "Cosmic_X", "Gamma_88"}
+print("Unique energy spikes:", signals)`,
+    },
+    functions: {
+      vibe: "Package repulsor thrust and trajectory calculations into J.A.R.V.I.S. functions.",
+      realWorldConnection: "Encapsulating flight telemetry calculations inside functions keeps suit AI fast.",
+      codeExample: `def compute_thrust(mass, accel):
+    return mass * accel
+
+print("Flight thrust:", compute_thrust(85, 9.8))`,
+    },
+    search: {
+      vibe: "Locate Infinity Stone energy signatures across planetary grids.",
+      realWorldConnection: "Filtering cosmic radar scans locates hostiles instantly.",
+      codeExample: `targets = ["Power Stone", "Space Stone", "Mind Stone"]
+found = "Space Stone" in targets
+print("Target locked:", found)`,
+    },
+    error: {
+      vibe: "Handle power overload power surges without crashing J.A.R.V.I.S.",
+      realWorldConnection: "Using try/except ensures suit AI re-routes power safely during an overload.",
+      codeExample: `try:
+    power_surge = 1200
+    if power_surge > 1000:
+        raise OverflowError("Arc Reactor Surge!")
+except OverflowError as e:
+    print("Diverting to heat sinks!", e)`,
+    },
+    algorithms: {
+      vibe: "Sort gauntlet energy stability levels in ascending threat order.",
+      realWorldConnection: "Sorting algorithms help Stark tech rank threat levels in milliseconds.",
+      codeExample: `threats = [95, 40, 88, 12]
+threats.sort(reverse=True)
+print("Priority threat order:", threats)`,
+    },
+    files: {
+      vibe: "Save J.A.R.V.I.S. telemetry logs to permanent Stark Cloud files.",
+      realWorldConnection: "File storage saves suit performance logs across missions.",
+      codeExample: `with open("jarvis_logs.json", "w") as f:
+    f.write('{"mission": "Endgame", "status": "Success"}')`,
+    },
+  },
+
+  anime: {
+    variables: {
+      vibe: "Think like a Shinobi Academy trainee tracking Naruto's Nine-Tails chakra reserves.",
+      realWorldConnection: "Storing chakra points, stamina, and ninja rank requires named variables.",
+      codeExample: `# Shinobi Status
+ninja = "Naruto"
+chakra_level = 9000
+rank = "Genin"
+
+print("Ninja:", ninja)
+print("Chakra:", chakra_level)`,
+    },
+    operators: {
+      vibe: "Calculate chakra consumption per shadow clone and jutsu stamina cost.",
+      realWorldConnection: "Multiplying chakra cost by shadow clone count uses Python operators.",
+      codeExample: `chakra_per_clone = 150
+clones_wanted = 12
+
+total_chakra = chakra_per_clone * clones_wanted
+print("Chakra required:", total_chakra)`,
+    },
+    strings: {
+      vibe: "Write jutsu incantations and Secret Leaf Scroll messages.",
+      realWorldConnection: "Jutsu names like 'Rasengan' and secret scroll texts are strings.",
+      codeExample: `jutsu = "Shadow Clone Jutsu"
+user = "Naruto"
+
+print(f"{user} invokes {jutsu}!")`,
+    },
+    conditionals: {
+      vibe: "Determine Chunin exam promotion results based on chakra scores.",
+      realWorldConnection: "Evaluating whether a shinobi advances uses if/elif/else.",
+      codeExample: `chakra_score = 88
+
+if chakra_score >= 85:
+    rank = "Chunin"
+elif chakra_score >= 60:
+    rank = "Genin"
+else:
+    rank = "Academy Student"
+
+print("Promoted to:", rank)`,
+    },
+    loops: {
+      vibe: "Train 100 shadow clones simultaneously in parallel jutsu loops.",
+      realWorldConnection: "Repeating physical training reps across all clones uses loops.",
+      codeExample: `for clone in range(1, 6):
+    print(f"Clone #{clone} practicing Rasengan... Complete! 🌀")`,
+    },
+    lists: {
+      vibe: "Organize Squad 7's ninja scroll inventory.",
+      realWorldConnection: "Keeping track of squad ninja weapons in a list makes preparation seamless.",
+      codeExample: `squad_7 = ["Naruto", "Sasuke", "Sakura"]
+squad_7.append("Kakashi-sensei")
+
+print("Squad roster:", squad_7)`,
+    },
+    dictionaries: {
+      vibe: "Build the Shinobi library Jutsu hand sign dictionary.",
+      realWorldConnection: "Looking up hand sign requirements by Jutsu name uses dictionaries.",
+      codeExample: `jutsu_dict = {"Rasengan": "Ram → Serpent", "Chidori": "Ox → Rabbit"}
+print("Rasengan signs:", jutsu_dict["Rasengan"])`,
+    },
+    sets: {
+      vibe: "Deduplicate wild dungeon rift monster radar pings.",
+      realWorldConnection: "Sets eliminate duplicate monster radar detections automatically.",
+      codeExample: `dungeon_monsters = {"Dragon_Rift", "Goblin_King", "Dragon_Rift"}
+print("Unique beasts detected:", dungeon_monsters)`,
+    },
+    functions: {
+      vibe: "Package secret Jutsu chakra multiplier logic into reusable functions.",
+      realWorldConnection: "Functions allow any shinobi to trigger complex jutsu logic with one call.",
+      codeExample: `def cast_shadow_clone(base_chakra, count):
+    return f"Summoned {count} clones! Used {base_chakra * count} chakra."
+
+print(cast_shadow_clone(100, 5))`,
+    },
+    search: {
+      vibe: "Search the dungeon rift for S-Rank legendary monsters.",
+      realWorldConnection: "Filter algorithms scan dungeon levels for high-value targets.",
+      codeExample: `beasts = ["Rank-C Goblin", "Rank-S Dragon", "Rank-A Wolf"]
+found = "Rank-S Dragon" in beasts
+print("S-Rank Beast spotted:", found)`,
+    },
+    error: {
+      vibe: "Handle chakra depletion exceptions cleanly during high-level battles.",
+      realWorldConnection: "Catching chakra exhaustion with try/except prevents total collapse.",
+      codeExample: `try:
+    chakra = 10
+    if chakra < 50:
+        raise Exception("Chakra Depleted!")
+except Exception as e:
+    print("Wood clone substitution triggered! 🍃", e)`,
+    },
+    algorithms: {
+      vibe: "Rank the Shinobi Guild leaderboard by combat power.",
+      realWorldConnection: "Sorting algorithms order ninja ranks dynamically.",
+      codeExample: `power_levels = [9500, 12000, 8800]
+power_levels.sort(reverse=True)
+print("Shinobi Rankings:", power_levels)`,
+    },
+    files: {
+      vibe: "Save Secret Leaf Scroll scrolls to permanent archive files.",
+      realWorldConnection: "File storage saves ninja clan scroll scrolls across generations.",
+      codeExample: `with open("forbidden_scrolls.txt", "w") as f:
+    f.write("Secret Shinobi Scrolls v1")`,
+    },
+  },
+};
+
+export function getThemedChapter(chapterId, theme) {
+  const base = CHAPTERS_MAP[chapterId];
+  if (!base) return null;
+  if (!theme || theme === 'default' || !THEMED_CHAPTER_VARIANTS[theme]) {
+    return base;
+  }
+  const variant = THEMED_CHAPTER_VARIANTS[theme][chapterId];
+  if (!variant) return base;
+
+  return {
+    ...base,
+    intro: {
+      ...base.intro,
+      vibe: variant.vibe || base.intro.vibe,
+    },
+    theory: {
+      ...base.theory,
+      realWorldConnection: variant.realWorldConnection || base.theory.realWorldConnection,
+      codeExample: variant.codeExample || base.theory.codeExample,
+    },
+  };
+}
diff --git a/client/src/layouts/AppLayout.jsx b/client/src/layouts/AppLayout.jsx
new file mode 100644
index 0000000..5852159
--- /dev/null
+++ b/client/src/layouts/AppLayout.jsx
@@ -0,0 +1,117 @@
+import React, { useState, useEffect } from 'react';
+import { Outlet, useNavigate } from 'react-router-dom';
+import CurriculumSidebar from '../components/CurriculumSidebar.jsx';
+import { Menu, X } from 'lucide-react';
+import { useTheme } from '../context/ThemeContext.jsx';
+
+export default function AppLayout() {
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const { dashboardTheme } = useTheme();
+
+  useEffect(() => {
+    const themeToApply = dashboardTheme || 'default';
+    document.documentElement.setAttribute('data-dashboard-theme', themeToApply);
+    return () => {
+      document.documentElement.removeAttribute('data-dashboard-theme');
+    };
+  }, [dashboardTheme]);
+
+  return (
+    <div className="app-layout">
+      {/* Desktop sidebar */}
+      <div className="app-layout__sidebar">
+        <CurriculumSidebar onNavigate={() => setMobileOpen(false)} />
+      </div>
+
+      {/* Mobile overlay sidebar */}
+      {mobileOpen && (
+        <div className="app-layout__mobile-overlay" onClick={() => setMobileOpen(false)}>
+          <div className="app-layout__mobile-sidebar" onClick={e => e.stopPropagation()}>
+            <CurriculumSidebar onNavigate={() => setMobileOpen(false)} />
+          </div>
+        </div>
+      )}
+
+      {/* Main content */}
+      <main className="app-layout__main">
+        {/* Mobile header bar */}
+        <div className="app-layout__mobile-bar">
+          <button
+            className="app-layout__burger"
+            onClick={() => setMobileOpen(v => !v)}
+            aria-label="Open menu"
+          >
+            {mobileOpen ? <X size={20} /> : <Menu size={20} />}
+          </button>
+          <div className="app-layout__mobile-brand">🐍 Py<span>Be</span></div>
+        </div>
+
+        <div className="app-layout__content">
+          <Outlet />
+        </div>
+      </main>
+
+      <style>{`
+        .app-layout {
+          display: flex;
+          min-height: 100vh;
+        }
+        .app-layout__sidebar {
+          width: 260px;
+          flex-shrink: 0;
+        }
+        .app-layout__main {
+          flex: 1;
+          min-width: 0;
+          margin-left: 260px;
+          min-height: 100vh;
+          background: var(--bg-base);
+        }
+        .app-layout__content {
+          max-width: 800px;
+          margin: 0;
+          padding: 36px 48px 80px 44px;
+        }
+        @keyframes cp-spin { to { transform: rotate(360deg); } }
+
+        /* Mobile */
+        .app-layout__mobile-bar {
+          display: none;
+          align-items: center;
+          gap: 14px;
+          padding: 14px 20px;
+          background: rgba(13,17,23,0.95);
+          backdrop-filter: blur(12px);
+          border-bottom: 1px solid rgba(255,255,255,0.05);
+          position: sticky; top: 0; z-index: 40;
+        }
+        .app-layout__burger {
+          background: none; border: none; color: var(--text-secondary);
+          cursor: pointer; display: flex; padding: 4px;
+        }
+        .app-layout__mobile-brand {
+          font-family: var(--font-heading);
+          font-size: 1rem; font-weight: 800; color: var(--text-primary);
+        }
+        .app-layout__mobile-brand span { color: var(--accent); }
+        .app-layout__mobile-overlay {
+          position: fixed; inset: 0; z-index: 60;
+          background: rgba(0,0,0,0.6);
+          backdrop-filter: blur(4px);
+        }
+        .app-layout__mobile-sidebar {
+          position: absolute; top: 0; left: 0; bottom: 0;
+          width: 280px;
+          background: #0F1318;
+        }
+
+        @media (max-width: 768px) {
+          .app-layout__sidebar { display: none; }
+          .app-layout__main { margin-left: 0; }
+          .app-layout__mobile-bar { display: flex; }
+          .app-layout__content { padding: 20px 18px 60px; max-width: 100%; }
+        }
+      `}</style>
+    </div>
+  );
+}
diff --git a/client/src/main.jsx b/client/src/main.jsx
index ef3da3a..a0bffd4 100644
--- a/client/src/main.jsx
+++ b/client/src/main.jsx
@@ -1,303 +1,16 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React from 'react';
 import { createRoot } from 'react-dom/client';
-import {
-  Brain,
-  ChartNoAxesCombined,
-  Code2,
-  Compass,
-  Lightbulb,
-  MessageSquareText,
-  Play,
-  Route,
-  Search,
-  Send,
-  Sparkles
-} from 'lucide-react';
-import './styles.css';
-
-const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:5000/api';
-
-async function api(path, options) {
-  const response = await fetch(`${API_URL}${path}`, {
-    headers: { 'Content-Type': 'application/json' },
-    ...options
-  });
-  if (!response.ok) throw new Error(await response.text());
-  return response.json();
-}
-
-function App() {
-  const [scenarios, setScenarios] = useState([]);
-  const [selected, setSelected] = useState(null);
-  const [sessions, setSessions] = useState([]);
-  const [analytics, setAnalytics] = useState(null);
-  const [roadmap, setRoadmap] = useState([]);
-  const [filters, setFilters] = useState({ q: '', difficulty: '', concept: '' });
-  const [form, setForm] = useState({ learnerName: 'Guest learner', reasoning: '', promptText: '', reflection: '' });
-  const [activeResult, setActiveResult] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const [submitting, setSubmitting] = useState(false);
-
-  const concepts = useMemo(() => [...new Set(scenarios.flatMap((scenario) => scenario.concepts || []))].sort(), [scenarios]);
-
-  async function refresh() {
-    const params = new URLSearchParams(Object.entries(filters).filter(([, value]) => value));
-    const [scenarioData, sessionData, analyticsData, roadmapData] = await Promise.all([
-      api(`/scenarios?${params}`),
-      api('/sessions'),
-      api('/analytics'),
-      api('/roadmap')
-    ]);
-    setScenarios(scenarioData);
-    setSessions(sessionData);
-    setAnalytics(analyticsData);
-    setRoadmap(roadmapData);
-    setSelected((current) => current || scenarioData[0] || null);
-    setLoading(false);
-  }
-
-  useEffect(() => {
-    refresh().catch(console.error);
-  }, [filters.q, filters.difficulty, filters.concept]);
-
-  async function submitSession(event) {
-    event.preventDefault();
-    if (!selected || !form.reasoning.trim()) return;
-    setSubmitting(true);
-    try {
-      const result = await api('/sessions', {
-        method: 'POST',
-        body: JSON.stringify({ ...form, scenarioId: selected._id })
-      });
-      setActiveResult(result);
-      setForm({ ...form, reasoning: '', promptText: '', reflection: '' });
-      await refresh();
-    } finally {
-      setSubmitting(false);
-    }
-  }
-
-  if (loading) return <main className="loading">Loading PyBe...</main>;
-
-  return (
-    <main className="app-shell">
-      <aside className="sidebar">
-        <div className="brand">
-          <Brain size={30} />
-          <div>
-            <strong>PyBe</strong>
-            <span>Scenario-first Python</span>
-          </div>
-        </div>
-
-        <label className="search">
-          <Search size={18} />
-          <input
-            value={filters.q}
-            onChange={(event) => setFilters({ ...filters, q: event.target.value })}
-            placeholder="Search scenarios"
-          />
-        </label>
-
-        <select value={filters.difficulty} onChange={(event) => setFilters({ ...filters, difficulty: event.target.value })}>
-          <option value="">All levels</option>
-          <option>Beginner</option>
-          <option>Explorer</option>
-          <option>Builder</option>
-        </select>
-
-        <select value={filters.concept} onChange={(event) => setFilters({ ...filters, concept: event.target.value })}>
-          <option value="">All concepts</option>
-          {concepts.map((concept) => <option key={concept}>{concept}</option>)}
-        </select>
-
-        <div className="scenario-list">
-          {scenarios.map((scenario) => (
-            <button
-              key={scenario._id}
-              className={selected?._id === scenario._id ? 'scenario active' : 'scenario'}
-              onClick={() => {
-                setSelected(scenario);
-                setActiveResult(null);
-              }}
-            >
-              <span>{scenario.difficulty}</span>
-              <strong>{scenario.title}</strong>
-              <small>{scenario.concepts.join(' / ')}</small>
-            </button>
-          ))}
-        </div>
-      </aside>
-
-      <section className="workspace">
-        <header className="hero">
-          <div>
-            <p>AI-native learning journey</p>
-            <h1>Learn Python by reasoning through real situations first.</h1>
-          </div>
-          <div className="hero-stats">
-            <span>{analytics?.scenarioCount || 0}<small>Scenarios</small></span>
-            <span>{analytics?.sessionCount || 0}<small>Sessions</small></span>
-            <span>{analytics?.averagePromptScore || 0}<small>Prompt score</small></span>
-          </div>
-        </header>
-
-        <div className="main-grid">
-          <section className="panel learning-panel">
-            <div className="section-title">
-              <Compass size={20} />
-              <h2>{selected?.title}</h2>
-            </div>
-            <p className="context">{selected?.context}</p>
-            <div className="objective-row">
-              {selected?.objectives.map((item) => <span key={item}>{item}</span>)}
-            </div>
-            <form onSubmit={submitSession} className="learning-form">
-              <label>
-                Your reasoning
-                <textarea
-                  required
-                  value={form.reasoning}
-                  onChange={(event) => setForm({ ...form, reasoning: event.target.value })}
-                  placeholder={selected?.prompt}
-                />
-              </label>
-              <label>
-                Prompt you would give an AI mentor
-                <textarea
-                  value={form.promptText}
-                  onChange={(event) => setForm({ ...form, promptText: event.target.value })}
-                  placeholder="Explain my approach step by step, then show the Python concept and code..."
-                />
-              </label>
-              <label>
-                Reflection
-                <textarea
-                  value={form.reflection}
-                  onChange={(event) => setForm({ ...form, reflection: event.target.value })}
-                  placeholder="What did you notice about your thinking?"
-                />
-              </label>
-              <button className="primary" disabled={submitting}>
-                <Send size={18} />{submitting ? 'Mapping...' : 'Map My Reasoning'}
-              </button>
-            </form>
-          </section>
-
-          <section className="panel result-panel">
-            <div className="section-title">
-              <Sparkles size={20} />
-              <h2>AI Mentor Output</h2>
-            </div>
-            {!activeResult ? <EmptyResult /> : <Result result={activeResult} />}
-          </section>
-        </div>
-
-        <section className="dashboard">
-          <div className="panel">
-            <div className="section-title"><ChartNoAxesCombined size={20} /><h2>Learner Analytics</h2></div>
-            <Analytics analytics={analytics} />
-          </div>
-          <div className="panel">
-            <div className="section-title"><Route size={20} /><h2>Roadmap</h2></div>
-            <Roadmap roadmap={roadmap} />
-          </div>
-          <div className="panel">
-            <div className="section-title"><MessageSquareText size={20} /><h2>Recent Sessions</h2></div>
-            <SessionList sessions={sessions} />
-          </div>
-        </section>
-      </section>
-    </main>
-  );
-}
-
-function EmptyResult() {
-  return (
-    <div className="empty">
-      <Lightbulb size={38} />
-      <p>Submit reasoning to see abstraction mapping, Python code, prompt feedback, and misconception signals.</p>
-    </div>
-  );
-}
-
-function Result({ result }) {
-  return (
-    <div className="result-stack">
-      <div className="score"><span>{result.promptScore}</span><small>Prompt maturity</small></div>
-      <div>
-        {result.abstractionMap.map((item) => (
-          <article className="mapping" key={item.pattern}>
-            <strong>{item.pattern}</strong>
-            <span>{item.pythonConcept}</span>
-            <p>{item.explanation}</p>
-          </article>
-        ))}
-      </div>
-      <div className="code-block">
-        <div><Code2 size={18} /> Generated Python</div>
-        <pre>{result.generatedCode}</pre>
-        <p>{result.codeExplanation}</p>
-      </div>
-      <ul className="feedback">
-        {result.promptFeedback.map((item) => <li key={item}>{item}</li>)}
-      </ul>
-      {result.misconceptions.length > 0 && (
-        <div className="note">
-          <strong>Misconception watch</strong>
-          {result.misconceptions.map((item) => <p key={item}>{item}</p>)}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function Analytics({ analytics }) {
-  const concepts = Object.entries(analytics?.conceptCounts || {});
-  return (
-    <div className="analytics-list">
-      {concepts.length ? concepts.map(([name, count]) => (
-        <div key={name}>
-          <span>{name}</span>
-          <meter min="0" max="10" value={count}></meter>
-          <strong>{count}</strong>
-        </div>
-      )) : <p>No learning sessions yet.</p>}
-    </div>
-  );
-}
-
-function Roadmap({ roadmap }) {
-  return (
-    <div className="roadmap">
-      {roadmap.map((phase) => (
-        <article key={phase.phase}>
-          <strong>{phase.phase}</strong>
-          <div>
-            <h3>{phase.title}</h3>
-            <p>{phase.summary}</p>
-            <small>{phase.items.join(' / ')}</small>
-          </div>
-        </article>
-      ))}
-    </div>
-  );
-}
-
-function SessionList({ sessions }) {
-  return (
-    <div className="sessions">
-      {sessions.length ? sessions.slice(0, 6).map((session) => (
-        <article key={session._id}>
-          <Play size={16} />
-          <div>
-            <strong>{session.scenario?.title}</strong>
-            <span>{session.masterySignals.join(' / ')}</span>
-          </div>
-        </article>
-      )) : <p>No sessions yet.</p>}
-    </div>
-  );
-}
-
-createRoot(document.getElementById('root')).render(<App />);
+import './styles/index.css';
+import './styles/animations.css';
+import App from './App.jsx';
+import { ThemeProvider } from './context/ThemeContext.jsx';
+
+// Apply saved theme immediately to avoid flash
+const saved = localStorage.getItem('pybe_theme') || 'dark';
+document.documentElement.setAttribute('data-theme', saved);
+
+createRoot(document.getElementById('root')).render(
+  <ThemeProvider>
+    <App />
+  </ThemeProvider>
+);
diff --git a/client/src/pages/AppHome.jsx b/client/src/pages/AppHome.jsx
new file mode 100644
index 0000000..4d736d9
--- /dev/null
+++ b/client/src/pages/AppHome.jsx
@@ -0,0 +1,557 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { gsap } from 'gsap';
+import { useAuth } from '../context/AuthContext.jsx';
+import { useTheme } from '../context/ThemeContext.jsx';
+import { CURRICULUM, ALL_CHAPTERS } from '../data/curriculum.js';
+import {
+  ArrowRight, CheckCircle2, Flame, BookOpen, Target, Zap,
+  Palette, Sparkles, Layers, Wand2, ShieldAlert, Swords, ChevronRight
+} from 'lucide-react';
+
+const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:5000/api';
+
+const THEME_OPTIONS = [
+  {
+    id: 'default',
+    title: 'Default Theme',
+    subtitle: 'Classic PyBe Dark & Light',
+    emoji: '🐍',
+    badge: 'Standard',
+    color: '#A8FF3E',
+    bgGradient: 'linear-gradient(135deg, rgba(168,255,62,0.12), rgba(96,165,250,0.08))',
+    desc: 'The original PyBe experience with classic real-world scenarios and universal abstractions.'
+  },
+  {
+    id: 'potterheads',
+    title: 'Potterheads',
+    subtitle: 'Hogwarts Wizardry & Potions',
+    emoji: '🧙‍♂️',
+    badge: 'Magical',
+    color: '#F59E0B',
+    bgGradient: 'linear-gradient(135deg, rgba(245,158,11,0.18), rgba(168,85,247,0.12))',
+    desc: 'Brew Felix Felicis, decipher the Marauder’s Map, and master Python data structures at Hogwarts.'
+  },
+  {
+    id: 'marvel',
+    title: 'Marvel',
+    subtitle: 'Avengers AI & Infinity Grid',
+    emoji: '🦾',
+    badge: 'Heroic',
+    color: '#EF4444',
+    bgGradient: 'linear-gradient(135deg, rgba(239,68,68,0.18), rgba(56,189,248,0.14))',
+    desc: 'Build J.A.R.V.I.S. suit diagnostics, harness Vibranium lab tech, and contain Infinity Stone energy.'
+  },
+  {
+    id: 'anime',
+    title: 'Anime',
+    subtitle: 'Hidden Leaf Jutsu & Cyber Hunter',
+    emoji: '⚔️',
+    badge: 'Cyber Shinobi',
+    color: '#FF2A85',
+    bgGradient: 'linear-gradient(135deg, rgba(255,42,133,0.18), rgba(0,245,212,0.14))',
+    desc: 'Control Nine-Tails chakra reserves, store jutsu hand signs, and index legendary dungeon rifts.'
+  }
+];
+
+// Animated counter hook
+function useCounter(target, duration = 1000) {
+  const [value, setValue] = useState(0);
+  useEffect(() => {
+    if (target === 0) return;
+    let start = null;
+    const step = (ts) => {
+      if (!start) start = ts;
+      const progress = Math.min((ts - start) / duration, 1);
+      setValue(Math.floor(progress * target));
+      if (progress < 1) requestAnimationFrame(step);
+    };
+    const raf = requestAnimationFrame(step);
+    return () => cancelAnimationFrame(raf);
+  }, [target, duration]);
+  return value;
+}
+
+export default function AppHome() {
+  const { user, getChapterStatus, getProgress } = useAuth();
+  const { dashboardTheme, setDashboardTheme } = useTheme();
+  const pageRef = useRef(null);
+
+  const [themedCaseStudies, setThemedCaseStudies] = useState([]);
+  const [themedScenarios, setThemedScenarios] = useState([]);
+  const [loadingThemed, setLoadingThemed] = useState(true);
+
+  const progress = getProgress();
+  const completed = ALL_CHAPTERS.filter(c => getChapterStatus(c.id) === 'completed');
+  const nextChapter = ALL_CHAPTERS.find(c => getChapterStatus(c.id) !== 'completed') || null;
+  const totalChapters = ALL_CHAPTERS.length;
+  const pct = Math.round((completed.length / totalChapters) * 100);
+
+  const countCompleted = useCounter(completed.length, 800);
+  const countTotal = useCounter(totalChapters, 600);
+  const countPct = useCounter(pct, 1000);
+
+  useEffect(() => {
+    if (!pageRef.current) return;
+    gsap.from(pageRef.current.children, {
+      y: 22, opacity: 0, duration: 0.45, stagger: 0.09, ease: 'power3.out',
+    });
+  }, []);
+
+  useEffect(() => {
+    setLoadingThemed(true);
+    const themeQuery = dashboardTheme ? `?theme=${encodeURIComponent(dashboardTheme)}` : '';
+    Promise.all([
+      fetch(`${API_URL}/casestudies${themeQuery}`).then(r => r.ok ? r.json() : []),
+      fetch(`${API_URL}/scenarios${themeQuery}`).then(r => r.ok ? r.json() : [])
+    ])
+      .then(([csData, scData]) => {
+        setThemedCaseStudies(csData || []);
+        setThemedScenarios((scData || []).slice(0, 4));
+      })
+      .catch(() => {})
+      .finally(() => setLoadingThemed(false));
+  }, [dashboardTheme]);
+
+  const firstName = user?.name?.split(' ')[0] || 'Learner';
+  const activeOption = THEME_OPTIONS.find(t => t.id === dashboardTheme) || THEME_OPTIONS[0];
+
+  return (
+    <div className="ha" ref={pageRef}>
+
+      {/* ── Hero ─────────────────────────────────────────────── */}
+      <div className="ha-hero">
+        {/* Aurora blobs */}
+        <div className="aurora-blob aurora-blob--1" style={{ width: 340, height: 340, top: -80, left: -60 }} />
+        <div className="aurora-blob aurora-blob--2" style={{ width: 260, height: 260, top: 20, right: -40 }} />
+
+        <div className="ha-hero__inner">
+          <p className="ha-hero__eyebrow">Welcome back 👋</p>
+          <h1 className="ha-hero__name shimmer-text">{firstName}</h1>
+          <p className="ha-hero__message">
+            {completed.length === 0
+              ? 'You\'re all set to start learning. Pick a chapter below — or just hit "Let\'s go".'
+              : completed.length === totalChapters
+              ? '🎉 You\'ve mastered all chapters! Seriously impressive work.'
+              : `${totalChapters - completed.length} chapter${totalChapters - completed.length !== 1 ? 's' : ''} left. You're doing great — keep the streak alive!`
+            }
+          </p>
+
+          {nextChapter && (
+            <Link to={`/app/chapter/${nextChapter.id}`} id="continue-btn" className="ha-hero__cta">
+              {completed.length === 0 ? 'Start learning' : 'Continue'}
+              <span className="ha-hero__cta-chapter">{nextChapter.emoji} {nextChapter.title}</span>
+              <ArrowRight size={16} />
+            </Link>
+          )}
+        </div>
+      </div>
+
+      {/* ── Dashboard Theme Selector ─────────────────────────── */}
+      <div className="ha-theme-selector">
+        <div className="ha-theme-selector__header">
+          <div>
+            <div className="ha-theme-selector__label">
+              <Palette size={14} /> Dashboard Theme & Scenario World
+            </div>
+            <h2 className="ha-theme-selector__title">Choose Your Theme</h2>
+            <p className="ha-theme-selector__sub">
+              Select a world to customize your dashboard UI styling and switch case studies & scenarios!
+            </p>
+          </div>
+          <div className="ha-active-badge" style={{ borderColor: activeOption.color + '40', background: activeOption.color + '15', color: activeOption.color }}>
+            <span>{activeOption.emoji} Active: {activeOption.title}</span>
+          </div>
+        </div>
+
+        <div className="ha-theme-grid">
+          {THEME_OPTIONS.map(option => {
+            const isActive = dashboardTheme === option.id;
+            return (
+              <div
+                key={option.id}
+                onClick={() => setDashboardTheme(option.id)}
+                className={`ha-theme-card${isActive ? ' ha-theme-card--active' : ''}`}
+                style={{
+                  '--theme-color': option.color,
+                  background: isActive ? option.bgGradient : 'var(--bg-glass)',
+                  borderColor: isActive ? option.color : 'var(--border)'
+                }}
+              >
+                <div className="ha-theme-card__top">
+                  <span className="ha-theme-card__emoji">{option.emoji}</span>
+                  <span className="ha-theme-card__badge" style={{ background: option.color + '20', color: option.color }}>
+                    {option.badge}
+                  </span>
+                </div>
+                <h3 className="ha-theme-card__name" style={isActive ? { color: option.color } : {}}>
+                  {option.title}
+                </h3>
+                <p className="ha-theme-card__subtitle">{option.subtitle}</p>
+                <p className="ha-theme-card__desc">{option.desc}</p>
+                <button className="ha-theme-card__select-btn" style={isActive ? { background: option.color, color: option.id === 'default' ? '#0F1318' : '#ffffff' } : {}}>
+                  {isActive ? 'Active Theme ✓' : 'Select Theme'}
+                </button>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* ── Active Theme Case Studies & Scenarios Showcase ───── */}
+      <div className="ha-themed-showcase" style={{ borderColor: activeOption.color + '30' }}>
+        <div className="ha-themed-showcase__header">
+          <div>
+            <div className="section-label" style={{ color: activeOption.color }}>
+              <Sparkles size={13} /> {activeOption.emoji} {activeOption.title} World
+            </div>
+            <h2>Active Case Studies & Scenarios</h2>
+            <p className="ha-themed-showcase__sub">
+              These case study arcs and scenarios adapt to your chosen <strong>{activeOption.title}</strong> theme.
+            </p>
+          </div>
+        </div>
+
+        {loadingThemed ? (
+          <div className="ha-themed-showcase__grid">
+            <div className="skeleton" style={{ height: 160, borderRadius: 12 }} />
+            <div className="skeleton" style={{ height: 160, borderRadius: 12 }} />
+          </div>
+        ) : (
+          <div className="ha-themed-showcase__content">
+            {/* Case Studies Arc Cards */}
+            {themedCaseStudies.length > 0 && (
+              <div className="ha-cs-list">
+                {themedCaseStudies.map(cs => (
+                  <div key={cs.id} className="ha-cs-card" style={{ borderColor: (cs.color || activeOption.color) + '30' }}>
+                    <div className="ha-cs-card__head">
+                      <span className="ha-cs-card__emoji">{cs.emoji}</span>
+                      <div>
+                        <h4 className="ha-cs-card__title" style={{ color: cs.color || activeOption.color }}>{cs.title}</h4>
+                        <span className="ha-cs-card__tagline">{cs.tagline}</span>
+                      </div>
+                    </div>
+                    <p className="ha-cs-card__desc">{cs.description}</p>
+                    <div className="ha-cs-card__arc">
+                      <span>Arc: <strong>{cs.arc}</strong></span>
+                      <span className="ha-cs-card__diff">{cs.difficulty}</span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {/* Matching Scenarios Preview */}
+            {themedScenarios.length > 0 && (
+              <div className="ha-sc-preview">
+                <div className="ha-sc-preview__label">Featured Scenarios in this Theme:</div>
+                <div className="ha-sc-grid">
+                  {themedScenarios.map(sc => (
+                    <div key={sc._id} className="ha-sc-card">
+                      <div className="ha-sc-card__top">
+                        <span className="ha-sc-card__title">{sc.themeEmoji || activeOption.emoji} {sc.title}</span>
+                        <span className="ha-sc-card__level">{sc.difficulty}</span>
+                      </div>
+                      <p className="ha-sc-card__prompt">{sc.prompt}</p>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* ── Stats row ─────────────────────────────────────────── */}
+      <div className="ha-stats">
+        <div className="ha-stat">
+          <div className="ha-stat__icon" style={{ background: 'rgba(168,255,62,0.12)', color: 'var(--accent)' }}>
+            <CheckCircle2 size={18} />
+          </div>
+          <div className="ha-stat__num">{countCompleted}</div>
+          <div className="ha-stat__label">Completed</div>
+        </div>
+        <div className="ha-stat">
+          <div className="ha-stat__icon" style={{ background: 'rgba(96,165,250,0.12)', color: '#60A5FA' }}>
+            <BookOpen size={18} />
+          </div>
+          <div className="ha-stat__num">{countTotal}</div>
+          <div className="ha-stat__label">Total chapters</div>
+        </div>
+        <div className="ha-stat">
+          <div className="ha-stat__icon" style={{ background: 'rgba(251,191,36,0.12)', color: '#FBB524' }}>
+            <Flame size={18} />
+          </div>
+          <div className="ha-stat__num">{countPct}<span className="ha-stat__pct-sign">%</span></div>
+          <div className="ha-stat__label">Progress</div>
+        </div>
+        <div className="ha-stat">
+          <div className="ha-stat__icon" style={{ background: 'rgba(167,139,250,0.12)', color: '#A78BFA' }}>
+            <Zap size={18} />
+          </div>
+          <div className="ha-stat__num">{countTotal - countCompleted}</div>
+          <div className="ha-stat__label">Left to go</div>
+        </div>
+      </div>
+
+      {/* ── Progress bar ──────────────────────────────────────── */}
+      <div className="ha-progress">
+        <div className="ha-progress__top">
+          <span className="ha-progress__label">Course completion</span>
+          <span className="ha-progress__pct">{pct}%</span>
+        </div>
+        <div className="ha-progress__track">
+          <div className="ha-progress__fill" style={{ width: `${pct}%` }} />
+        </div>
+      </div>
+
+      {/* ── Curriculum sections ───────────────────────────────── */}
+      <div className="ha-sections">
+        {CURRICULUM.map(section => {
+          const secDone = section.chapters.filter(c => getChapterStatus(c.id) === 'completed').length;
+          const secPct = Math.round((secDone / section.chapters.length) * 100);
+
+          return (
+            <div key={section.id} className="ha-section">
+              <div className="ha-section__head">
+                <div className="ha-section__icon" style={{ background: section.color + '20', color: section.color }}>
+                  {section.emoji}
+                </div>
+                <div className="ha-section__meta">
+                  <div className="ha-section__title" style={{ color: section.color }}>{section.title}</div>
+                  <div className="ha-section__sub">{secDone} / {section.chapters.length} chapters done</div>
+                </div>
+                <div className="ha-section__ring">
+                  <svg width="36" height="36" viewBox="0 0 36 36">
+                    <circle cx="18" cy="18" r="14" fill="none" stroke="var(--border)" strokeWidth="3"/>
+                    <circle
+                      cx="18" cy="18" r="14" fill="none"
+                      stroke={section.color} strokeWidth="3"
+                      strokeDasharray={`${secPct * 0.88} 88`}
+                      strokeLinecap="round"
+                      transform="rotate(-90 18 18)"
+                      style={{ transition: 'stroke-dasharray 1s ease' }}
+                    />
+                  </svg>
+                  <span className="ha-section__ring-pct" style={{ color: section.color }}>{secPct}%</span>
+                </div>
+              </div>
+
+              <div className="ha-chapter-list">
+                {section.chapters.map((chapter, i) => {
+                  const status = getChapterStatus(chapter.id);
+                  const isDone = status === 'completed';
+                  return (
+                    <Link
+                      key={chapter.id}
+                      to={`/app/chapter/${chapter.id}`}
+                      className={`ha-chapter${isDone ? ' ha-chapter--done' : ''}`}
+                    >
+                      <div className="ha-chapter__num" style={isDone ? { background: section.color, color: '#fff', border: 'none' } : { borderColor: section.color + '40' }}>
+                        {isDone ? <CheckCircle2 size={11} /> : i + 1}
+                      </div>
+                      <div className="ha-chapter__body">
+                        <div className="ha-chapter__name">{chapter.emoji} {chapter.title}</div>
+                        <div className="ha-chapter__sub">{chapter.subtitle}</div>
+                      </div>
+                      <ArrowRight size={14} className="ha-chapter__arrow" />
+                    </Link>
+                  );
+                })}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      <style>{`
+        .ha { display: flex; flex-direction: column; gap: 32px; }
+
+        /* Hero */
+        .ha-hero {
+          position: relative; overflow: hidden;
+          border-radius: 16px;
+          border: 1px solid var(--border);
+          background: var(--bg-glass);
+          backdrop-filter: blur(12px);
+          padding: 36px 40px;
+        }
+        [data-theme="light"] .ha-hero { background: rgba(255,255,255,0.9); }
+        .ha-hero__inner { position: relative; z-index: 1; }
+        .ha-hero__eyebrow { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 4px; }
+        .ha-hero__name {
+          font-family: var(--font-heading); font-size: clamp(2.4rem, 6vw, 3.6rem);
+          font-weight: 900; line-height: 1; margin-bottom: 14px; letter-spacing: -0.03em;
+        }
+        .ha-hero__message { font-size: 0.95rem; color: var(--text-secondary); max-width: 500px; margin-bottom: 28px; line-height: 1.65; }
+        .ha-hero__cta {
+          display: inline-flex; align-items: center; gap: 10px;
+          padding: 12px 20px; border-radius: 10px;
+          background: var(--accent); color: #0D1117; font-weight: 700; font-size: 0.9rem;
+          text-decoration: none; transition: transform 0.2s, box-shadow 0.2s;
+        }
+        [data-theme="light"] .ha-hero__cta { color: #fff; }
+        .ha-hero__cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); opacity: 1; }
+        .ha-hero__cta-chapter {
+          padding: 3px 10px; border-radius: 20px;
+          background: rgba(0,0,0,0.2); font-size: 0.8rem; font-weight: 600;
+        }
+        [data-theme="light"] .ha-hero__cta-chapter { background: rgba(255,255,255,0.2); }
+
+        /* Theme Selector Section */
+        .ha-theme-selector {
+          display: flex; flex-direction: column; gap: 18px;
+          padding: 24px; border-radius: 16px;
+          background: var(--bg-glass); border: 1px solid var(--border);
+          backdrop-filter: blur(12px);
+        }
+        .ha-theme-selector__header {
+          display: flex; justify-content: space-between; align-items: flex-start;
+          flex-wrap: wrap; gap: 12px;
+        }
+        .ha-theme-selector__label {
+          display: inline-flex; align-items: center; gap: 6px;
+          font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
+          letter-spacing: 0.1em; color: var(--accent); margin-bottom: 4px;
+        }
+        .ha-theme-selector__title { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); margin-bottom: 4px; }
+        .ha-theme-selector__sub { font-size: 0.84rem; color: var(--text-secondary); margin: 0; }
+        .ha-active-badge {
+          padding: 6px 14px; border-radius: 20px; border: 1px solid;
+          font-size: 0.8rem; font-weight: 700; display: inline-flex; align-items: center; gap: 6px;
+        }
+
+        .ha-theme-grid {
+          display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
+        }
+        .ha-theme-card {
+          padding: 16px; border-radius: 12px; border: 1px solid var(--border);
+          cursor: pointer; display: flex; flex-direction: column; gap: 8px;
+          transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        .ha-theme-card:hover { transform: translateY(-3px); border-color: var(--theme-color); }
+        .ha-theme-card--active { box-shadow: 0 0 20px rgba(0,0,0,0.3); }
+        .ha-theme-card__top { display: flex; justify-content: space-between; align-items: center; }
+        .ha-theme-card__emoji { font-size: 1.8rem; line-height: 1; }
+        .ha-theme-card__badge { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; padding: 2px 8px; border-radius: 12px; }
+        .ha-theme-card__name { font-size: 1rem; font-weight: 800; color: var(--text-primary); margin: 2px 0 0; }
+        .ha-theme-card__subtitle { font-size: 0.72rem; color: var(--text-muted); font-weight: 600; margin: 0; }
+        .ha-theme-card__desc { font-size: 0.76rem; color: var(--text-secondary); line-height: 1.45; margin: 4px 0 8px; flex: 1; }
+        .ha-theme-card__select-btn {
+          width: 100%; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border);
+          background: rgba(255,255,255,0.05); color: var(--text-primary);
+          font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: all 0.2s;
+        }
+
+        /* Showcase Section */
+        .ha-themed-showcase {
+          padding: 24px; border-radius: 16px;
+          background: var(--bg-glass); border: 1px solid var(--border);
+          backdrop-filter: blur(12px); display: flex; flex-direction: column; gap: 20px;
+        }
+        .ha-themed-showcase__header h2 { font-size: 1.4rem; font-weight: 800; color: var(--text-primary); margin-top: 2px; }
+        .ha-themed-showcase__sub { font-size: 0.84rem; color: var(--text-secondary); margin: 4px 0 0; }
+        .ha-cs-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
+        .ha-cs-card {
+          padding: 16px; border-radius: 12px; border: 1px solid var(--border);
+          background: var(--bg-glass-light); display: flex; flex-direction: column; gap: 8px;
+        }
+        .ha-cs-card__head { display: flex; align-items: flex-start; gap: 12px; }
+        .ha-cs-card__emoji { font-size: 1.6rem; flex-shrink: 0; }
+        .ha-cs-card__title { font-size: 0.95rem; font-weight: 800; margin: 0 0 2px; }
+        .ha-cs-card__tagline { font-size: 0.76rem; color: var(--text-muted); font-style: italic; }
+        .ha-cs-card__desc { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5; margin: 0; }
+        .ha-cs-card__arc { display: flex; justify-content: space-between; font-size: 0.74rem; color: var(--text-muted); margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--border); }
+        .ha-cs-card__diff { color: var(--accent); font-weight: 600; }
+
+        .ha-sc-preview { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
+        .ha-sc-preview__label { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
+        .ha-sc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
+        .ha-sc-card { padding: 12px; border-radius: 10px; background: var(--bg-glass-light); border: 1px solid var(--border); }
+        .ha-sc-card__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
+        .ha-sc-card__title { font-size: 0.84rem; font-weight: 700; color: var(--text-primary); }
+        .ha-sc-card__level { font-size: 0.68rem; font-weight: 600; padding: 2px 8px; border-radius: 10px; background: var(--bg-elevated); color: var(--text-muted); }
+        .ha-sc-card__prompt { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.45; margin: 0; }
+
+        /* Stats */
+        .ha-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
+        .ha-stat {
+          padding: 18px 16px; border-radius: 12px;
+          border: 1px solid var(--border); background: var(--bg-glass);
+          display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
+          transition: border-color 0.2s, transform 0.2s;
+        }
+        .ha-stat:hover { border-color: var(--border-hover); transform: translateY(-2px); }
+        .ha-stat__icon { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
+        .ha-stat__num { font-family: var(--font-heading); font-size: 1.9rem; font-weight: 800; color: var(--text-primary); line-height: 1; }
+        .ha-stat__pct-sign { font-size: 1.1rem; }
+        .ha-stat__label { font-size: 0.74rem; color: var(--text-muted); font-weight: 500; }
+
+        /* Progress bar */
+        .ha-progress { display: flex; flex-direction: column; gap: 8px; }
+        .ha-progress__top { display: flex; justify-content: space-between; align-items: baseline; }
+        .ha-progress__label { font-size: 0.8rem; color: var(--text-secondary); font-weight: 500; }
+        .ha-progress__pct { font-size: 0.8rem; color: var(--accent); font-weight: 700; }
+        .ha-progress__track { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
+        .ha-progress__fill {
+          height: 100%; border-radius: 3px;
+          background: linear-gradient(90deg, var(--accent), #5BFFB0);
+          transition: width 1s cubic-bezier(0.4,0,0.2,1);
+        }
+
+        /* Sections */
+        .ha-sections { display: flex; flex-direction: column; gap: 28px; }
+        .ha-section { display: flex; flex-direction: column; gap: 0; }
+        .ha-section__head {
+          display: flex; align-items: center; gap: 14px;
+          margin-bottom: 12px; padding: 0 4px;
+        }
+        .ha-section__icon {
+          width: 38px; height: 38px; border-radius: 10px;
+          display: grid; place-items: center; font-size: 1.2rem; flex-shrink: 0;
+        }
+        .ha-section__meta { flex: 1; }
+        .ha-section__title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; }
+        .ha-section__sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }
+        .ha-section__ring { position: relative; display: grid; place-items: center; flex-shrink: 0; }
+        .ha-section__ring-pct { position: absolute; font-size: 0.55rem; font-weight: 700; }
+
+        /* Chapter list */
+        .ha-chapter-list {
+          border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
+          transition: border-color 0.2s;
+        }
+        .ha-chapter {
+          display: flex; align-items: center; gap: 14px; padding: 13px 16px;
+          text-decoration: none; border-bottom: 1px solid var(--border);
+          transition: background 0.15s;
+        }
+        .ha-chapter:last-child { border-bottom: none; }
+        .ha-chapter:hover { background: var(--bg-glass-light); }
+        .ha-chapter--done { opacity: 0.8; }
+        .ha-chapter__num {
+          width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
+          background: transparent; border: 1px solid var(--border);
+          color: var(--text-muted); font-size: 0.68rem; font-weight: 700;
+          display: grid; place-items: center; transition: all 0.2s;
+        }
+        .ha-chapter__body { flex: 1; min-width: 0; }
+        .ha-chapter__name { font-size: 0.88rem; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
+        .ha-chapter__sub { font-size: 0.76rem; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+        .ha-chapter__arrow { color: var(--text-muted); flex-shrink: 0; opacity: 0; transition: opacity 0.15s, transform 0.15s; }
+        .ha-chapter:hover .ha-chapter__arrow { opacity: 1; transform: translateX(3px); }
+
+        @media (max-width: 900px) {
+          .ha-theme-grid { grid-template-columns: repeat(2, 1fr); }
+          .ha-cs-list { grid-template-columns: 1fr; }
+          .ha-sc-grid { grid-template-columns: 1fr; }
+        }
+        @media (max-width: 640px) {
+          .ha-stats { grid-template-columns: repeat(2,1fr); }
+          .ha-hero { padding: 24px 20px; }
+          .ha-theme-grid { grid-template-columns: 1fr; }
+        }
+      `}</style>
+    </div>
+  );
+}
diff --git a/client/src/pages/CaseStudies.jsx b/client/src/pages/CaseStudies.jsx
new file mode 100644
index 0000000..ea15058
--- /dev/null
+++ b/client/src/pages/CaseStudies.jsx
@@ -0,0 +1,151 @@
+import React, { useEffect, useState } from 'react';
+import { Sparkles, BookOpen } from 'lucide-react';
+import CaseStudyCard from '../components/CaseStudyCard.jsx';
+import { useTheme } from '../context/ThemeContext.jsx';
+
+const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:5000/api';
+async function api(path) {
+  const r = await fetch(`${API_URL}${path}`);
+  if (!r.ok) throw new Error(await r.text());
+  return r.json();
+}
+
+export default function CaseStudies() {
+  const { dashboardTheme, setDashboardTheme } = useTheme();
+  const [activeTab, setActiveTab] = useState(dashboardTheme || 'default');
+  const [caseStudies, setCaseStudies] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setActiveTab(dashboardTheme || 'default');
+  }, [dashboardTheme]);
+
+  useEffect(() => {
+    setLoading(true);
+    const themeParam = activeTab && activeTab !== 'all' ? `?theme=${encodeURIComponent(activeTab)}` : '';
+    api(`/casestudies${themeParam}`).then(setCaseStudies).finally(() => setLoading(false));
+  }, [activeTab]);
+
+  const tabs = [
+    { id: 'default', label: '🐍 Default Theme' },
+    { id: 'potterheads', label: '🧙‍♂️ Potterheads' },
+    { id: 'marvel', label: '🦾 Marvel' },
+    { id: 'anime', label: '⚔️ Anime' },
+    { id: 'all', label: '🌐 All Case Studies' },
+  ];
+
+  return (
+    <div className="cs-page page-content">
+      <div className="container">
+        {/* Header */}
+        <div className="cs-page__header">
+          <div className="section-label">
+            <Sparkles size={12} /> Universal Abstraction Discovery Engine
+          </div>
+          <h1>Case Study Themes</h1>
+          <p className="cs-page__sub">
+            Each theme is a full abstraction evolution arc. A problem that starts simple, grows
+            until the current approach breaks, and forces you to rediscover the next Python construct.
+            Select a theme below to view its specific case study arcs.
+          </p>
+
+          {/* Theme Filter Tabs */}
+          <div className="cs-tabs">
+            {tabs.map(tab => (
+              <button
+                key={tab.id}
+                onClick={() => {
+                  setActiveTab(tab.id);
+                  if (tab.id !== 'all') setDashboardTheme(tab.id);
+                }}
+                className={`cs-tab${activeTab === tab.id ? ' cs-tab--active' : ''}`}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Philosophy callout */}
+        <div className="cs-page__callout">
+          <div className="cs-page__callout-icon">💡</div>
+          <div>
+            <strong>The UADE Philosophy</strong>
+            <p>
+              Variables became difficult to manage → Lists emerged.<br />
+              Lists could not associate names → Dictionaries emerged.<br />
+              Repeated code became difficult to maintain → Functions emerged.<br />
+              <em>You should experience this evolution yourself, not just be told about it.</em>
+            </p>
+          </div>
+        </div>
+
+        {/* Grid of case studies */}
+        {loading ? (
+          <div className="cs-page__grid">
+            {[...Array(6)].map((_, i) => (
+              <div key={i} className="skeleton" style={{ height: 320, borderRadius: 'var(--r-lg)' }} />
+            ))}
+          </div>
+        ) : (
+          <div className="cs-page__grid stagger">
+            {caseStudies.map(cs => (
+              <CaseStudyCard key={cs.id} caseStudy={cs} />
+            ))}
+          </div>
+        )}
+
+        {/* Footer note */}
+        <div className="cs-page__footer">
+          <BookOpen size={16} />
+          <div>
+            <strong>Theory anchor</strong>
+            <p>
+              These themes are grounded in Barrows' Problem-Based Learning, Vygotsky's Zone of
+              Proximal Development, and Deleuze & Guattari's Rhizomatic Learning model —
+              the same learner, infinite entry points, zero fixed sequence.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <style>{`
+        .cs-page__header { text-align: center; margin-bottom: var(--sp-8); }
+        .cs-page__header h1 { margin: var(--sp-2) 0 var(--sp-4); }
+        .cs-page__sub { max-width: 620px; margin: 0 auto 20px; font-size: 0.95rem; line-height: 1.7; }
+        .cs-tabs { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
+        .cs-tab {
+          padding: 8px 16px; border-radius: 20px; border: 1px solid var(--border);
+          background: var(--bg-glass); color: var(--text-secondary);
+          font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.2s;
+        }
+        .cs-tab:hover { border-color: var(--border-hover); color: var(--text-primary); }
+        .cs-tab--active { background: var(--accent-glow) !important; color: var(--accent) !important; border-color: var(--border-accent) !important; }
+        .cs-page__callout {
+          display: flex; gap: var(--sp-4); align-items: flex-start;
+          background: var(--accent-glow); border: 1px solid var(--border-accent);
+          border-radius: var(--r-lg); padding: var(--sp-5);
+          margin-bottom: var(--sp-8);
+        }
+        .cs-page__callout-icon { font-size: 1.8rem; flex-shrink: 0; }
+        .cs-page__callout strong { display: block; color: var(--accent); font-size: 0.9rem; margin-bottom: var(--sp-2); }
+        .cs-page__callout p { font-size: 0.875rem; color: var(--text-secondary); margin: 0; line-height: 1.7; }
+        .cs-page__callout em { color: var(--accent-dim); font-style: normal; font-weight: 600; }
+        .cs-page__grid {
+          display: grid;
+          grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+          gap: var(--sp-5);
+          margin-bottom: var(--sp-8);
+        }
+        .cs-page__footer {
+          display: flex; gap: var(--sp-4); align-items: flex-start;
+          background: var(--bg-surface); border: 1px solid var(--border);
+          border-radius: var(--r-lg); padding: var(--sp-5);
+          color: var(--text-muted);
+        }
+        .cs-page__footer strong { display: block; color: var(--text-secondary); font-size: 0.85rem; margin-bottom: var(--sp-1); }
+        .cs-page__footer p { font-size: 0.82rem; color: var(--text-muted); margin: 0; line-height: 1.6; }
+      `}</style>
+    </div>
+  );
+}
diff --git a/client/src/pages/ChapterPage.jsx b/client/src/pages/ChapterPage.jsx
new file mode 100644
index 0000000..368d9d2
--- /dev/null
+++ b/client/src/pages/ChapterPage.jsx
@@ -0,0 +1,1217 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { useParams, useNavigate, Link } from 'react-router-dom';
+import { gsap } from 'gsap';
+import { useAuth } from '../context/AuthContext.jsx';
+import { CHAPTERS_MAP, CURRICULUM, getThemedChapter } from '../data/curriculum.js';
+import {
+  ArrowLeft, ArrowRight, CheckCircle2, Lightbulb,
+  BookOpen, Sparkles, ChevronRight,
+} from 'lucide-react';
+
+import { useTheme } from '../context/ThemeContext.jsx';
+
+const API = import.meta.env.VITE_API_URL || 'http://localhost:5000/api';
+
+async function fetchScenarios(concepts, activeTheme) {
+  const themeToUse = activeTheme || 'default';
+  const results = new Map();
+  for (const concept of concepts) {
+    try {
+      const url = `${API}/scenarios?concept=${encodeURIComponent(concept)}&theme=${encodeURIComponent(themeToUse)}`;
+      const r = await fetch(url);
+      const data = await r.json();
+      data.forEach(s => results.set(s._id, s));
+    } catch { /* ignore */ }
+  }
+  let list = [...results.values()];
+  if (list.length === 0 && themeToUse !== 'default') {
+    for (const concept of concepts) {
+      try {
+        const r = await fetch(`${API}/scenarios?concept=${encodeURIComponent(concept)}&theme=default`);
+        const data = await r.json();
+        data.forEach(s => results.set(s._id, s));
+      } catch { /* ignore */ }
+    }
+    list = [...results.values()];
+  }
+  return list.slice(0, 4);
+}
+
+async function submitSession(scenarioId, reasoning, promptText) {
+  try {
+    const r = await fetch(`${API}/sessions`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ scenario: scenarioId, learnerName: 'Guest', reasoning, promptText }),
+    });
+    return r.ok ? await r.json() : null;
+  } catch { return null; }
+}
+
+// ── Client-side reasoning quality estimator ───────────────
+function estimateScore(reasoning) {
+  const text = (reasoning || '').toLowerCase().trim();
+  if (text.length < 10) return 15;
+  let score = 20;
+  if (text.length > 60)  score += 8;
+  if (text.length > 150) score += 8;
+  if (text.length > 300) score += 7;
+  const signals = [
+    'because','since','so that','in order to','which means','this helps',
+    'instead','rather than','problem','solution','better','easier','organize',
+    'group','store','remember','track','manage','keep','avoid','think','believe',
+    'would','could','should','maybe','one way','another',
+  ];
+  signals.forEach(w => { if (text.includes(w)) score += 3; });
+  return Math.min(Math.max(score, 15), 88);
+}
+
+function scoreLevel(s) {
+  if (s >= 80) return { label: 'Excellent thinking',  color: '#A8FF3E', emoji: '🔥', grade: 'A' };
+  if (s >= 65) return { label: 'Strong reasoning',    color: '#60A5FA', emoji: '⚡', grade: 'B' };
+  if (s >= 48) return { label: 'Good start',          color: '#F59E0B', emoji: '💡', grade: 'C' };
+  if (s >= 30) return { label: 'Keep exploring',      color: '#F97316', emoji: '📈', grade: 'D' };
+  return         { label: 'Just beginning',           color: '#F472B6', emoji: '🌱', grade: 'E' };
+}
+
+const PHASES = { INTRO: 'intro', QUESTION: 'question', SUMMARY: 'summary', THEORY: 'theory' };
+
+export default function ChapterPage() {
+  const { chapterId } = useParams();
+  const navigate = useNavigate();
+  const { markChapterComplete, getChapterStatus } = useAuth();
+  const { dashboardTheme } = useTheme();
+  const chapter = getThemedChapter(chapterId, dashboardTheme);
+  const pageRef = useRef(null);
+
+  const [phase, setPhase] = useState(PHASES.INTRO);
+  const [scenarios, setScenarios] = useState([]);
+  const [loadingScenarios, setLoadingScenarios] = useState(true);
+  const [currentIdx, setCurrentIdx] = useState(0);
+  const [answers, setAnswers] = useState([]);
+  const [form, setForm] = useState({ reasoning: '', promptText: '' });
+  const [submitting, setSubmitting] = useState(false);
+  const [alreadyDone, setAlreadyDone] = useState(false);
+
+  useEffect(() => {
+    if (!chapter) { navigate('/app'); }
+  }, [chapter]);
+
+  // ── CRITICAL: Reset all state when chapter or theme changes ────────
+  useEffect(() => {
+    setPhase(PHASES.INTRO);
+    setCurrentIdx(0);
+    setAnswers([]);
+    setForm({ reasoning: '', promptText: '' });
+    setSubmitting(false);
+    setAlreadyDone(getChapterStatus(chapterId) === 'completed');
+    setLoadingScenarios(true);
+    if (chapter) {
+      fetchScenarios(chapter.concepts, dashboardTheme)
+        .then(s => setScenarios(s))
+        .finally(() => setLoadingScenarios(false));
+    }
+  }, [chapterId, dashboardTheme]);
+
+  // ── Phase animation ───────────────────────────────────────
+  // Runs AFTER React commits the new phase DOM.
+  useEffect(() => {
+    if (!pageRef.current) return;
+
+    if (phase === PHASES.THEORY) {
+      // Page wrapper: make visible immediately
+      gsap.set(pageRef.current, { opacity: 1, y: 0 });
+
+      // Delay slightly to ensure React has fully painted the theory DOM
+      const timer = setTimeout(() => {
+        if (!pageRef.current) return;
+
+        // Query ALL theory sections in the order they appear — do NOT use
+        // both individual selectors AND a parent > * selector, as that
+        // causes elements to be animated twice (disappear-then-reappear bug).
+        const els = pageRef.current.querySelectorAll(
+          '.theory-eyebrow, .theory-title, .theory-concept, ' +
+          '.theory-divider, .bva, .theory-explanation, .theory-code, ' +
+          '.msb, .mml, .theory-callout, .theory-takeaway, .theory-complete'
+        );
+        // Set all to invisible first, then stagger-in
+        gsap.set(els, { opacity: 0, y: 16 });
+        gsap.to(els, {
+          opacity: 1, y: 0,
+          duration: 0.45, stagger: 0.07, ease: 'power3.out',
+        });
+      }, 60);
+      return () => clearTimeout(timer);
+    } else {
+      gsap.fromTo(pageRef.current,
+        { y: 20, opacity: 0 },
+        { y: 0, opacity: 1, duration: 0.4, ease: 'power3.out' }
+      );
+    }
+  }, [phase, currentIdx]);
+
+  // ── Phase helpers ─────────────────────────────────────────
+  function animateOut() {
+    return new Promise(resolve => {
+      if (!pageRef.current) { resolve(); return; }
+      gsap.to(pageRef.current, {
+        y: -14, opacity: 0, duration: 0.22, ease: 'power2.in', onComplete: resolve,
+      });
+    });
+  }
+
+  async function startLearning() {
+    await animateOut();
+    setCurrentIdx(0);
+    setAnswers([]);
+    setForm({ reasoning: '', promptText: '' });
+    setPhase(PHASES.QUESTION);
+  }
+
+  async function submitAnswer() {
+    if (!form.reasoning.trim()) return;
+    setSubmitting(true);
+    const scenario = scenarios[currentIdx];
+    const res = await submitSession(scenario._id, form.reasoning, form.promptText);
+
+    // Fall back to client-side score estimate if backend returns null or no score
+    const finalScore = res?.promptScore ?? estimateScore(form.reasoning);
+    const enrichedRes = res ? { ...res, promptScore: finalScore } : { promptScore: finalScore };
+
+    const newAnswers = [...answers, { scenario, reasoning: form.reasoning, result: enrichedRes }];
+    setAnswers(newAnswers);
+
+    if (currentIdx < scenarios.length - 1) {
+      await animateOut();
+      setCurrentIdx(i => i + 1);
+      setForm({ reasoning: '', promptText: '' });
+      setSubmitting(false);
+    } else {
+      await animateOut();
+      setSubmitting(false);
+      setPhase(PHASES.SUMMARY);
+    }
+  }
+
+  async function revealTheory() {
+    await animateOut();
+    setPhase(PHASES.THEORY);
+    // Animation is triggered by useEffect([phase]) above
+  }
+
+  function handleComplete() {
+    markChapterComplete(chapterId);
+    const allChapters = CURRICULUM.flatMap(s => s.chapters);
+    const idx = allChapters.findIndex(c => c.id === chapterId);
+    const next = allChapters[idx + 1];
+    // Navigate to next chapter — the useEffect([chapterId]) reset will
+    // ensure it starts at INTRO phase, not THEORY.
+    navigate(next ? `/app/chapter/${next.id}` : '/app');
+  }
+
+  if (!chapter) return null;
+
+  return (
+    <div className="cp">
+      <nav className="cp-breadcrumb">
+        <button className="cp-breadcrumb__back" onClick={() => navigate('/app')}>
+          <ArrowLeft size={13} /> Dashboard
+        </button>
+        <ChevronRight size={13} className="cp-breadcrumb__sep" />
+        <span>{chapter.sectionTitle}</span>
+        <ChevronRight size={13} className="cp-breadcrumb__sep" />
+        <span className="cp-breadcrumb__current">{chapter.title}</span>
+      </nav>
+
+      {phase === PHASES.QUESTION && scenarios.length > 0 && (
+        <div className="cp-progress">
+          <div className="cp-progress__bar">
+            {scenarios.map((_, i) => (
+              <div key={i} className={`cp-progress__seg${i < currentIdx ? ' done' : i === currentIdx ? ' active' : ''}`} />
+            ))}
+          </div>
+          <span className="cp-progress__label">Question {currentIdx + 1} / {scenarios.length}</span>
+        </div>
+      )}
+
+      <div ref={pageRef} className="cp-content">
+        {phase === PHASES.INTRO    && <IntroPhase    chapter={chapter} onStart={startLearning} loading={loadingScenarios} scenarioCount={scenarios.length} alreadyDone={alreadyDone} />}
+        {phase === PHASES.QUESTION && scenarios.length > 0 && <QuestionPhase scenario={scenarios[currentIdx]} index={currentIdx} total={scenarios.length} form={form} onChange={p => setForm(f => ({ ...f, ...p }))} onSubmit={submitAnswer} submitting={submitting} />}
+        {phase === PHASES.SUMMARY  && <SummaryPhase  answers={answers} onReveal={revealTheory} />}
+        {phase === PHASES.THEORY   && <TheoryPhase   chapterId={chapterId} theory={chapter?.theory} onComplete={handleComplete} alreadyDone={alreadyDone} />}
+      </div>
+
+      <style>{`
+        .cp { display: flex; flex-direction: column; gap: 24px; }
+        .cp-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-muted); }
+        .cp-breadcrumb__back { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.8rem; padding: 0; transition: color 0.15s; }
+        .cp-breadcrumb__back:hover { color: var(--text-primary); }
+        .cp-breadcrumb__sep { color: var(--border-hover); }
+        .cp-breadcrumb__current { color: var(--text-secondary); font-weight: 500; }
+        .cp-progress { display: flex; align-items: center; gap: 12px; }
+        .cp-progress__bar { display: flex; gap: 4px; flex: 1; }
+        .cp-progress__seg { height: 3px; flex: 1; border-radius: 2px; background: var(--border); transition: background 0.3s; }
+        .cp-progress__seg.done   { background: var(--accent); }
+        .cp-progress__seg.active { background: var(--accent-glow-md); }
+        .cp-progress__label { font-size: 0.74rem; color: var(--text-muted); white-space: nowrap; }
+        .cp-content { min-height: 60vh; }
+        @keyframes cp-spin { to { transform: rotate(360deg); } }
+      `}</style>
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────
+// INTRO PHASE
+// ─────────────────────────────────────────────────────────
+function IntroPhase({ chapter, onStart, loading, scenarioCount, alreadyDone }) {
+  return (
+    <div className="intro">
+      <p className="intro__section">{chapter.sectionTitle} · Chapter</p>
+      <div className="intro__emoji">{chapter.emoji}</div>
+      <h1 className="intro__title">{chapter.title}</h1>
+      <p className="intro__subtitle">{chapter.subtitle}</p>
+
+      <blockquote className="intro__hook">{chapter.intro.hook}</blockquote>
+
+      <div className="intro__panels">
+        <div className="intro__panel intro__panel--blue">
+          <p className="intro__panel-label"><Lightbulb size={12} /> What you'll figure out</p>
+          <p>{chapter.intro.whatYoullFigureOut}</p>
+        </div>
+        <div className="intro__panel intro__panel--dim">
+          <p className="intro__panel-label">The setup</p>
+          <p>{chapter.intro.vibe}</p>
+        </div>
+      </div>
+
+      {loading ? (
+        <p className="intro__loading"><Spinner /> Loading questions…</p>
+      ) : scenarioCount === 0 ? (
+        <p className="intro__none">No scenarios found for this chapter yet.</p>
+      ) : (
+        <button id="start-chapter-btn" className="btn-primary-action" onClick={onStart}>
+          {alreadyDone ? '↩ Redo this chapter' : "Let's go →"}
+        </button>
+      )}
+      {scenarioCount > 0 && !loading && (
+        <p className="intro__note">{scenarioCount} question{scenarioCount !== 1 ? 's' : ''} · Think in plain English — Python comes at the very end</p>
+      )}
+
+      <style>{`
+        .intro { display: flex; flex-direction: column; gap: 16px; }
+        .intro__section { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin: 0; }
+        .intro__emoji { font-size: 2.8rem; line-height: 1; margin-top: 4px; }
+        .intro__title { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; margin: 4px 0 0; letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.15; }
+        .intro__subtitle { font-size: 1rem; color: var(--text-secondary); margin: 0 0 8px; }
+        .intro__hook { border-left: 3px solid var(--accent); margin: 4px 0; padding: 12px 18px; font-size: 0.97rem; font-style: italic; color: var(--text-primary); line-height: 1.7; background: rgba(168,255,62,0.03); border-radius: 0 8px 8px 0; }
+        .intro__panels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 0; }
+        .intro__panel { padding: 16px 18px; border-radius: 10px; }
+        .intro__panel--blue { background: rgba(96,165,250,0.05); border: 1px solid rgba(96,165,250,0.13); }
+        .intro__panel--dim  { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); }
+        .intro__panel-label { display: flex; align-items: center; gap: 5px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: #60A5FA; margin: 0 0 8px; }
+        .intro__panel--dim .intro__panel-label { color: var(--text-muted); }
+        .intro__panel p:last-child { font-size: 0.88rem; color: var(--text-secondary); margin: 0; line-height: 1.65; }
+        .btn-primary-action { display: inline-block; padding: 12px 28px; background: var(--accent); color: #0D1117; border: none; border-radius: 9px; font-size: 0.93rem; font-weight: 700; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; margin-top: 4px; }
+        .btn-primary-action:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(168,255,62,0.25); }
+        .intro__loading { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 0.875rem; margin: 0; }
+        .intro__none { color: var(--text-muted); font-size: 0.875rem; margin: 0; }
+        .intro__note { font-size: 0.76rem; color: var(--text-muted); margin: 0; }
+        @media (max-width: 540px) { .intro__panels { grid-template-columns: 1fr; } }
+      `}</style>
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────
+// QUESTION PHASE
+// ─────────────────────────────────────────────────────────
+function QuestionPhase({ scenario, index, total, form, onChange, onSubmit, submitting }) {
+  const taRef = useRef(null);
+  useEffect(() => { taRef.current?.focus(); }, [scenario?._id]);
+
+  return (
+    <div className="qp">
+      <div className="qp__scenario">
+        <p className="qp__scenario-label"><BookOpen size={12} /> The Scenario</p>
+        <p className="qp__scenario-text">{scenario.context}</p>
+      </div>
+
+      <div className="qp__question">
+        <span className="qp__q-icon">🤔</span>
+        <p>{scenario.prompt || 'How would you solve this problem? Explain your thinking in plain words — no Python needed yet.'}</p>
+      </div>
+
+      <div className="qp__form">
+        <div className="qp__label-row">
+          <label htmlFor="reasoning-input" className="qp__label">Your thinking</label>
+          <span className="qp__hint">Write like you're explaining to a friend</span>
+        </div>
+        <textarea
+          id="reasoning-input"
+          ref={taRef}
+          value={form.reasoning}
+          onChange={e => onChange({ reasoning: e.target.value })}
+          placeholder="I think the best approach here is… because…"
+          rows={6}
+          className="qp__textarea"
+        />
+        <p className="qp__char">{form.reasoning.length} characters</p>
+      </div>
+
+      <details className="qp__optional">
+        <summary>💬 Optional: How would you ask an AI mentor to explain this?</summary>
+        <textarea
+          value={form.promptText}
+          onChange={e => onChange({ promptText: e.target.value })}
+          placeholder="Help me understand why…"
+          rows={3}
+          className="qp__textarea"
+          style={{ marginTop: 10 }}
+        />
+      </details>
+
+      <div className="qp__footer">
+        <p className="qp__tip">💡 Whatever comes to mind first is perfect.</p>
+        <button id="submit-answer-btn" className="btn-primary-action" onClick={onSubmit} disabled={submitting || !form.reasoning.trim()}>
+          {submitting
+            ? <><Spinner size={16} color="#0D1117" /> Thinking…</>
+            : index < total - 1
+              ? <>Next <ArrowRight size={14} /></>
+              : <>See how I did <ArrowRight size={14} /></>}
+        </button>
+      </div>
+
+      <style>{`
+        .qp { display: flex; flex-direction: column; gap: 26px; }
+        .qp__scenario { padding: 18px 20px; border-radius: 10px; background: rgba(168,255,62,0.03); border: 1px solid rgba(168,255,62,0.1); }
+        .qp__scenario-label { display: flex; align-items: center; gap: 5px; font-size: 0.67rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin: 0 0 10px; }
+        .qp__scenario-text { font-size: 0.94rem; color: var(--text-secondary); margin: 0; line-height: 1.75; }
+        .qp__question { display: flex; gap: 12px; align-items: flex-start; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,0.06); }
+        .qp__q-icon { font-size: 1.25rem; flex-shrink: 0; line-height: 1.45; }
+        .qp__question p { font-size: 1.02rem; font-weight: 600; color: var(--text-primary); margin: 0; line-height: 1.6; }
+        .qp__form { display: flex; flex-direction: column; gap: 7px; }
+        .qp__label-row { display: flex; align-items: baseline; justify-content: space-between; }
+        .qp__label { font-size: 0.84rem; font-weight: 600; color: var(--text-secondary); }
+        .qp__hint { font-size: 0.76rem; color: var(--text-muted); }
+        .qp__textarea { width: 100%; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.09); border-radius: 10px; padding: 13px 15px; font-size: 0.94rem; color: var(--text-primary); line-height: 1.7; resize: vertical; font-family: var(--font-body); transition: border-color 0.2s, box-shadow 0.2s; }
+        .qp__textarea:focus { border-color: rgba(168,255,62,0.35); box-shadow: 0 0 0 3px rgba(168,255,62,0.07); outline: none; }
+        .qp__char { font-size: 0.72rem; color: var(--text-muted); text-align: right; margin: 0; }
+        .qp__optional summary { font-size: 0.81rem; color: var(--text-muted); cursor: pointer; list-style: none; padding: 2px 0; transition: color 0.15s; }
+        .qp__optional summary:hover { color: var(--text-secondary); }
+        .qp__footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
+        .qp__tip { font-size: 0.79rem; color: var(--text-muted); margin: 0; }
+        .btn-primary-action:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
+        @media (max-width: 500px) { .qp__footer { flex-direction: column-reverse; align-items: flex-start; } }
+      `}</style>
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────
+// SUMMARY PHASE
+// ─────────────────────────────────────────────────────────
+function getSocraticFeedback(text = '') {
+  const lower = text.toLowerCase();
+
+  if (lower.includes('start from 1') || lower.includes('first element is 1') || lower.includes('position 1 is first')) {
+    return {
+      type: 'misconception',
+      icon: '🧐',
+      title: 'Socratic Prompt on Memory Indexing',
+      text: 'Notice how in physical computer memory architecture, array positioning starts at index 0 (the offset distance from the first slot). How does counting from 0 shift item positions?',
+    };
+  }
+
+  if (lower.includes('equal sign') && (lower.includes('compare') || lower.includes('check'))) {
+    return {
+      type: 'misconception',
+      icon: '🧐',
+      title: 'Socratic Prompt on Assignment vs Equality',
+      text: 'In Python, = puts a value inside a memory box, while == asks a true/false question. How does separating assignment (=) from comparison (==) prevent unexpected logic bugs?',
+    };
+  }
+
+  if (lower.includes('change the original text') || lower.includes('modify string directly')) {
+    return {
+      type: 'misconception',
+      icon: '🧐',
+      title: 'Socratic Prompt on Immutability',
+      text: 'Strings in Python are immutable — operations create a brand new string rather than altering original RAM bytes. Why is immutable string memory safer for multi-threaded applications?',
+    };
+  }
+
+  if (lower.includes('two lists') || lower.includes('separate list')) {
+    return {
+      type: 'misconception',
+      icon: '🧐',
+      title: 'Socratic Prompt on Data Association',
+      text: 'If you remove an element from a names list, the prices list stays unchanged and falls out of sync! How would key-value pairing (dictionaries) keep item names and values connected permanently?',
+    };
+  }
+
+  return {
+    type: 'clean',
+    icon: '✨',
+    title: 'First-Principles Logic',
+    text: 'Great intuition! Your reasoning focuses on the core problem breakdown before jumping to code syntax.',
+  };
+}
+
+function SummaryPhase({ answers, onReveal }) {
+  const scores = answers.map(a => a.result?.promptScore ?? 50);
+  const avg = scores.length ? Math.round(scores.reduce((a, b) => a + b, 0) / scores.length) : 0;
+  const lvl = scoreLevel(avg);
+
+  return (
+    <div className="sp">
+      <div className="sp__header">
+        <Sparkles size={24} style={{ color: 'var(--accent)', flexShrink: 0 }} />
+        <div>
+          <h2 className="sp__title">Your reasoning recap</h2>
+          <p className="sp__sub">You answered {answers.length} question{answers.length !== 1 ? 's' : ''}. Here's what you came up with before we reveal the concept.</p>
+        </div>
+      </div>
+
+      {/* Score card */}
+      <div className="sp__score" style={{ borderColor: lvl.color + '30' }}>
+        <div className="sp__score-left">
+          <div className="sp__score-emoji">{lvl.emoji}</div>
+          <div>
+            <div className="sp__score-label" style={{ color: lvl.color }}>{lvl.label}</div>
+            <div className="sp__score-desc">Reasoning quality across {answers.length} question{answers.length !== 1 ? 's' : ''}</div>
+          </div>
+        </div>
+        <div className="sp__score-grade" style={{ background: lvl.color + '18', color: lvl.color }}>
+          {avg}/100
+        </div>
+      </div>
+
+      {/* Per-answer breakdown */}
+      <div className="sp__answers">
+        {answers.map((a, i) => {
+          const s = a.result?.promptScore ?? 50;
+          const l = scoreLevel(s);
+          const soc = getSocraticFeedback(a.reasoning);
+          return (
+            <div key={i} className="sp__answer">
+              <div className="sp__answer-top">
+                <div className="sp__answer-num">{i + 1}</div>
+                <div className="sp__answer-meta">
+                  <div className="sp__answer-title">{a.scenario.title}</div>
+                  <div className="sp__answer-badge" style={{ color: l.color, background: l.color + '14' }}>
+                    {l.emoji} {l.label} · {s}/100
+                  </div>
+                </div>
+              </div>
+              <p className="sp__answer-text">"{a.reasoning}"</p>
+
+              {/* SOCRATIC MISCONCEPTION SPOTTER BANNER */}
+              <div className={`sp__soc sp__soc--${soc.type}`}>
+                <span className="sp__soc-icon">{soc.icon}</span>
+                <div className="sp__soc-body">
+                  <strong className="sp__soc-title">{soc.title}</strong>
+                  <p className="sp__soc-text">{soc.text}</p>
+                </div>
+              </div>
+
+              {a.result?.masterySignals?.length > 0 && (
+                <div className="sp__signals">
+                  {a.result.masterySignals.map(sig => (
+                    <span key={sig} className="sp__signal">✓ {sig}</span>
+                  ))}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      <div className="sp__cta">
+        <button id="reveal-theory-btn" className="btn-primary-action" onClick={onReveal}>
+          <Lightbulb size={15} /> Now discover why →
+        </button>
+        <p className="sp__cta-note">We'll explain the Python concept that solves all of this.</p>
+      </div>
+
+      <style>{`
+        .sp { display: flex; flex-direction: column; gap: 26px; }
+        .sp__header { display: flex; align-items: flex-start; gap: 14px; }
+        .sp__title { font-size: 1.5rem; font-weight: 800; margin: 0 0 5px; color: var(--text-primary); }
+        .sp__sub { font-size: 0.875rem; color: var(--text-secondary); margin: 0; line-height: 1.6; }
+        .sp__score { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border-radius: 12px; background: rgba(255,255,255,0.03); border: 1px solid; }
+        .sp__score-left { display: flex; align-items: center; gap: 14px; }
+        .sp__score-emoji { font-size: 1.8rem; }
+        .sp__score-label { font-size: 0.95rem; font-weight: 700; margin-bottom: 3px; }
+        .sp__score-desc { font-size: 0.78rem; color: var(--text-muted); }
+        .sp__score-grade { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 800; padding: 8px 14px; border-radius: 8px; white-space: nowrap; }
+        .sp__answers { display: flex; flex-direction: column; gap: 10px; }
+        .sp__answer { padding: 14px 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.02); display: flex; flex-direction: column; gap: 10px; }
+        .sp__answer-top { display: flex; align-items: flex-start; gap: 12px; }
+        .sp__answer-num { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #0D1117; font-size: 0.68rem; font-weight: 800; display: grid; place-items: center; flex-shrink: 0; margin-top: 1px; }
+        .sp__answer-meta { flex: 1; display: flex; flex-direction: column; gap: 5px; }
+        .sp__answer-title { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); }
+        .sp__answer-badge { font-size: 0.74rem; font-weight: 600; padding: 2px 9px; border-radius: 20px; display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; }
+        .sp__answer-text { font-size: 0.84rem; color: var(--text-secondary); font-style: italic; line-height: 1.6; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+        .sp__soc { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; border: 1px solid; margin-top: 2px; }
+        .sp__soc--misconception { background: rgba(245, 158, 11, 0.06); border-color: rgba(245, 158, 11, 0.25); }
+        .sp__soc--clean { background: rgba(168, 255, 62, 0.05); border-color: rgba(168, 255, 62, 0.18); }
+        .sp__soc-icon { font-size: 1.1rem; line-height: 1; flex-shrink: 0; margin-top: 2px; }
+        .sp__soc-body { display: flex; flex-direction: column; gap: 2px; }
+        .sp__soc-title { font-size: 0.78rem; font-weight: 700; color: var(--text-primary); }
+        .sp__soc-text { font-size: 0.76rem; color: var(--text-secondary); line-height: 1.5; margin: 0; }
+        .sp__signals { display: flex; flex-wrap: wrap; gap: 5px; }
+        .sp__signal { font-size: 0.7rem; color: var(--accent); background: rgba(168,255,62,0.08); border: 1px solid rgba(168,255,62,0.18); padding: 2px 8px; border-radius: 20px; }
+        .sp__cta { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
+        .sp__cta-note { font-size: 0.78rem; color: var(--text-muted); margin: 0; }
+      `}</style>
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────
+// BEFORE VS AFTER COMPARISON WIDGET
+// ─────────────────────────────────────────────────────────
+function BeforeVsAfter({ data }) {
+  if (!data) return null;
+  return (
+    <div className="bva">
+      <div className="bva__header">
+        <span className="bva__tag">⚡ First-Principles Friction Simulator</span>
+        <h3 className="bva__title">Why this abstraction was invented</h3>
+      </div>
+      <div className="bva__grid">
+        {/* BEFORE CARD */}
+        <div className="bva__card bva__card--before">
+          <div className="bva__card-head">
+            <span className="bva__badge bva__badge--red">❌ BEFORE</span>
+            <span className="bva__card-title">{data.beforeTitle}</span>
+          </div>
+          <pre className="bva__code">{data.beforeCode}</pre>
+          <div className="bva__insight bva__insight--red">
+            <strong>The Pain Point:</strong> {data.beforePain}
+          </div>
+        </div>
+
+        {/* AFTER CARD */}
+        <div className="bva__card bva__card--after">
+          <div className="bva__card-head">
+            <span className="bva__badge bva__badge--green">✓ AFTER</span>
+            <span className="bva__card-title">{data.afterTitle}</span>
+          </div>
+          <pre className="bva__code">{data.afterCode}</pre>
+          <div className="bva__insight bva__insight--green">
+            <strong>The Abstraction Gain:</strong> {data.afterGain}
+          </div>
+        </div>
+      </div>
+
+      <style>{`
+        .bva { margin: 24px 0; padding: 20px; border-radius: 14px; background: rgba(0,0,0,0.2); border: 1px solid var(--border); }
+        .bva__header { margin-bottom: 16px; }
+        .bva__tag { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }
+        .bva__title { font-size: 1.1rem; font-weight: 800; color: var(--text-primary); margin: 3px 0 0; }
+        .bva__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
+        .bva__card { padding: 14px; border-radius: 10px; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--border); }
+        .bva__card--before { background: rgba(239, 68, 68, 0.04); border-color: rgba(239, 68, 68, 0.2); }
+        .bva__card--after { background: rgba(168, 255, 62, 0.04); border-color: rgba(168, 255, 62, 0.2); }
+        .bva__card-head { display: flex; align-items: center; gap: 8px; }
+        .bva__badge { font-size: 0.68rem; font-weight: 800; padding: 2px 8px; border-radius: 6px; }
+        .bva__badge--red { background: rgba(239, 68, 68, 0.2); color: #EF4444; }
+        .bva__badge--green { background: rgba(168, 255, 62, 0.2); color: var(--accent); }
+        .bva__card-title { font-size: 0.82rem; font-weight: 700; color: var(--text-primary); }
+        .bva__code { background: rgba(0,0,0,0.3); padding: 10px; border-radius: 6px; font-family: var(--font-code); font-size: 0.78rem; color: var(--text-secondary); line-height: 1.5; margin: 0; overflow-x: auto; }
+        .bva__insight { font-size: 0.78rem; line-height: 1.5; padding: 8px 10px; border-radius: 6px; margin-top: auto; }
+        .bva__insight--red { background: rgba(239, 68, 68, 0.08); color: #FCA5A5; }
+        .bva__insight--green { background: rgba(168, 255, 62, 0.08); color: var(--text-primary); }
+        @media (max-width: 640px) { .bva__grid { grid-template-columns: 1fr; } }
+      `}</style>
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────
+// INTERACTIVE MENTAL MODEL LAB
+// ─────────────────────────────────────────────────────────
+function MentalModelLab({ chapterId }) {
+  const [val, setVal] = useState('Ginger Chai');
+  const [numA, setNumA] = useState(15);
+  const [numB, setNumB] = useState(47);
+  const [strVal, setStrVal] = useState('PyBe');
+  const [score, setScore] = useState(75);
+  const [loopIdx, setLoopIdx] = useState(0);
+  const [list, setList] = useState(['Chai', 'Coffee', 'Samosa']);
+  const [selectedKey, setSelectedKey] = useState('Gryffindor');
+  const [rawList, setRawList] = useState(['Chai', 'Coffee', 'Chai', 'Tea']);
+  const [setFilterActive, setSetFilterActive] = useState(false);
+  const [funcInput, setFuncInput] = useState(12);
+  const [searchTarget, setSearchTarget] = useState('Coffee');
+  const [searchIdx, setSearchIdx] = useState(-1);
+  const [errorSim, setErrorSim] = useState(false);
+  const [sortList, setSortList] = useState([88, 45, 98, 62]);
+  const [fileSaved, setFileSaved] = useState(false);
+
+  const loopItems = ['Priya', 'Arjun', 'Dev', 'Meera'];
+  const dictData = { Gryffindor: 450, Slytherin: 420, Ravenclaw: 390 };
+
+  return (
+    <div className="mml">
+      <div className="mml__head">
+        <span className="mml__tag">🧠 Interactive Mental Model Lab</span>
+        <h4 className="mml__title">See memory & execution under the hood</h4>
+      </div>
+
+      <div className="mml__body">
+        {/* 1. VARIABLES */}
+        {chapterId === 'variables' && (
+          <div className="mml__demo">
+            <div className="mml__row">
+              <label className="mml__label">Type value for variable <code>chai_type</code>:</label>
+              <input type="text" className="mml__input" value={val} onChange={e => setVal(e.target.value)} />
+            </div>
+            <div className="mml__mem-grid">
+              <div className="mml__mem-cell">
+                <span className="mml__mem-addr">RAM 0x7F8</span>
+                <span className="mml__mem-name">chai_type</span>
+                <span className="mml__mem-val">"{val}"</span>
+              </div>
+            </div>
+            <p className="mml__explain">Notice how typing in the box updates the RAM memory cell at address <code>0x7F8</code> instantly!</p>
+          </div>
+        )}
+
+        {/* 2. OPERATORS */}
+        {chapterId === 'operators' && (
+          <div className="mml__demo">
+            <div className="mml__row">
+              <span>Price (₹):</span>
+              <input type="number" className="mml__input mml__input--num" value={numA} onChange={e => setNumA(Number(e.target.value))} />
+              <span>× Cups:</span>
+              <input type="number" className="mml__input mml__input--num" value={numB} onChange={e => setNumB(Number(e.target.value))} />
+            </div>
+            <div className="mml__pipe">
+              <div className="mml__pipe-box">{numA}</div>
+              <span className="mml__pipe-op">×</span>
+              <div className="mml__pipe-box">{numB}</div>
+              <span className="mml__pipe-op">=</span>
+              <div className="mml__pipe-res">{numA * numB}</div>
+            </div>
+            <p className="mml__explain">The arithmetic operator node <code>*</code> executes the multiplication on two inputs in nanoseconds.</p>
+          </div>
+        )}
+
+        {/* 3. STRINGS */}
+        {chapterId === 'strings' && (
+          <div className="mml__demo">
+            <div className="mml__row">
+              <label className="mml__label">Text String:</label>
+              <input type="text" className="mml__input" value={strVal} onChange={e => setStrVal(e.target.value)} />
+            </div>
+            <div className="mml__str-cells">
+              {strVal.split('').map((char, i) => (
+                <div key={i} className="mml__str-cell">
+                  <span className="mml__str-idx">[{i}]</span>
+                  <span className="mml__str-char">'{char}'</span>
+                </div>
+              ))}
+            </div>
+            <p className="mml__explain">In Python, strings are zero-indexed sequences of characters stored consecutively in memory.</p>
+          </div>
+        )}
+
+        {/* 4. CONDITIONALS */}
+        {chapterId === 'conditionals' && (
+          <div className="mml__demo">
+            <div className="mml__row">
+              <label className="mml__label">Test Score Slider: <strong>{score}</strong></label>
+              <input type="range" min="0" max="100" value={score} onChange={e => setScore(Number(e.target.value))} className="mml__slider" />
+            </div>
+            <div className="mml__tree">
+              <div className={`mml__node ${score >= 80 ? 'mml__node--active' : ''}`}>if score &gt;= 80 ➔ "A Grade 🔥"</div>
+              <div className={`mml__node ${score >= 60 && score < 80 ? 'mml__node--active' : ''}`}>elif score &gt;= 60 ➔ "B Grade ⚡"</div>
+              <div className={`mml__node ${score < 60 ? 'mml__node--active' : ''}`}>else ➔ "Needs Review 🌱"</div>
+            </div>
+          </div>
+        )}
+
+        {/* 5. LOOPS */}
+        {chapterId === 'loops' && (
+          <div className="mml__demo">
+            <div className="mml__loop-stepper">
+              <button className="btn-secondary" onClick={() => setLoopIdx((loopIdx + 1) % loopItems.length)}>Step Loop ⏭️ (Current: {loopIdx + 1}/{loopItems.length})</button>
+            </div>
+            <div className="mml__list-pills">
+              {loopItems.map((item, i) => (
+                <div key={item} className={`mml__pill ${i === loopIdx ? 'mml__pill--active' : ''}`}>
+                  {item} {i === loopIdx ? '👈 Active Cursor' : ''}
+                </div>
+              ))}
+            </div>
+            <p className="mml__explain">The <code>for item in list</code> loop advances the active execution pointer one item at a time.</p>
+          </div>
+        )}
+
+        {/* 6. LISTS */}
+        {chapterId === 'lists' && (
+          <div className="mml__demo">
+            <div className="mml__list-pills">
+              {list.map((item, i) => (
+                <div key={i} className="mml__pill">
+                  <span className="mml__pill-idx">[{i}]</span> {item}
+                </div>
+              ))}
+            </div>
+            <div className="mml__row" style={{ marginTop: 10 }}>
+              <button className="btn-secondary" onClick={() => setList([...list, `Item ${list.length + 1}`])}>+ append()</button>
+              <button className="btn-secondary" onClick={() => setList(list.slice(0, -1))} disabled={list.length <= 1}>- pop()</button>
+              <span className="mml__explain">Length <code>len(list) = {list.length}</code></span>
+            </div>
+          </div>
+        )}
+
+        {/* 7. DICTIONARIES */}
+        {chapterId === 'dictionaries' && (
+          <div className="mml__demo">
+            <div className="mml__dict-keys">
+              {Object.keys(dictData).map(k => (
+                <button key={k} className={`mml__key-btn ${selectedKey === k ? 'mml__key-btn--active' : ''}`} onClick={() => setSelectedKey(k)}>
+                  Key: "{k}"
+                </button>
+              ))}
+            </div>
+            <div className="mml__dict-res">
+              Hash Lookup ➔ <strong>dictData["{selectedKey}"] = {dictData[selectedKey]} Points</strong>
+            </div>
+            <p className="mml__explain">Dictionaries use hash functions to look up values directly by key in O(1) constant time!</p>
+          </div>
+        )}
+
+        {/* 8. SETS */}
+        {chapterId === 'sets' && (
+          <div className="mml__demo">
+            <div className="mml__row">
+              <span className="mml__label">Incoming Items with Duplicates:</span>
+              <code>[{rawList.join(', ')}]</code>
+            </div>
+            <button className="btn-secondary" onClick={() => setSetFilterActive(!setFilterActive)}>
+              {setFilterActive ? 'Show Raw List' : 'Pass through set() ✨'}
+            </button>
+            <div className="mml__dict-res" style={{ marginTop: 10 }}>
+              Stored Result: <strong>{setFilterActive ? `{${[...new Set(rawList)].join(', ')}}` : `[${rawList.join(', ')}]`}</strong>
+            </div>
+          </div>
+        )}
+
+        {/* 9. FUNCTIONS */}
+        {chapterId === 'functions' && (
+          <div className="mml__demo">
+            <div className="mml__row">
+              <label>Parameter <code>price</code>:</label>
+              <input type="number" className="mml__input mml__input--num" value={funcInput} onChange={e => setFuncInput(Number(e.target.value))} />
+            </div>
+            <div className="mml__func-box">
+              <span>def calculate_bill(price): return price * 1.05</span>
+              <div className="mml__func-out">Return Value ➔ ₹{(funcInput * 1.05).toFixed(2)}</div>
+            </div>
+          </div>
+        )}
+
+        {/* 10. SEARCH */}
+        {chapterId === 'search-filter' && (
+          <div className="mml__demo">
+            <div className="mml__row">
+              <span>Search Target:</span>
+              <input type="text" className="mml__input" value={searchTarget} onChange={e => setSearchTarget(e.target.value)} />
+              <button className="btn-secondary" onClick={() => {
+                const found = ['Chai', 'Coffee', 'Samosa', 'Maggi'].findIndex(x => x.toLowerCase().includes(searchTarget.toLowerCase()));
+                setSearchIdx(found);
+              }}>Search 🔍</button>
+            </div>
+            <div className="mml__list-pills" style={{ marginTop: 10 }}>
+              {['Chai', 'Coffee', 'Samosa', 'Maggi'].map((item, i) => (
+                <div key={item} className={`mml__pill ${searchIdx === i ? 'mml__pill--active' : ''}`}>
+                  [{i}] {item} {searchIdx === i ? '🎯 MATCH!' : ''}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* 11. ERROR HANDLING */}
+        {chapterId === 'error-handling' && (
+          <div className="mml__demo">
+            <div className="mml__row">
+              <label>Simulate Input Error:</label>
+              <button className="btn-secondary" onClick={() => setErrorSim(!errorSim)}>
+                {errorSim ? 'Fix Input (Normal)' : 'Trigger Bad Input (-36)'}
+              </button>
+            </div>
+            <div className={`mml__shield ${errorSim ? 'mml__shield--error' : 'mml__shield--ok'}`}>
+              {errorSim ? '🛡️ try/except Shield Active: Bad input caught! Handled gracefully.' : '✓ Normal Execution: Inputs valid.'}
+            </div>
+          </div>
+        )}
+
+        {/* 12. ALGORITHMS */}
+        {chapterId === 'algorithms' && (
+          <div className="mml__demo">
+            <div className="mml__row">
+              <button className="btn-secondary" onClick={() => setSortList([...sortList].sort((a,b) => a-b))}>Sort Ascending 📶</button>
+              <button className="btn-secondary" onClick={() => setSortList([...sortList].sort((a,b) => b-a))}>Sort Descending 📉</button>
+            </div>
+            <div className="mml__list-pills" style={{ marginTop: 10 }}>
+              {sortList.map((num, i) => (
+                <div key={i} className="mml__pill">[{i}] {num}</div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* 13. FILES */}
+        {chapterId === 'files' && (
+          <div className="mml__demo">
+            <button className="btn-secondary" onClick={() => setFileSaved(!fileSaved)}>
+              {fileSaved ? 'Clear File' : 'with open("data.json", "w") as f 💾'}
+            </button>
+            <div className="mml__tree" style={{ marginTop: 10 }}>
+              <div>RAM (Volatile): {fileSaved ? 'Data in RAM' : 'Data in RAM'}</div>
+              <div className={fileSaved ? 'mml__node--active' : ''}>Disk File (Permanent): {fileSaved ? '💾 Saved to data.json ✓' : 'File Empty'}</div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <style>{`
+        .mml { margin: 24px 0; padding: 20px; border-radius: 14px; background: rgba(96,165,250,0.04); border: 1px solid rgba(96,165,250,0.2); }
+        .mml__head { margin-bottom: 14px; }
+        .mml__tag { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #60A5FA; }
+        .mml__title { font-size: 1.05rem; font-weight: 800; color: var(--text-primary); margin: 3px 0 0; }
+        .mml__demo { display: flex; flex-direction: column; gap: 12px; }
+        .mml__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.84rem; color: var(--text-secondary); }
+        .mml__input { background: rgba(0,0,0,0.3); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; font-family: var(--font-code); color: var(--text-primary); font-size: 0.85rem; }
+        .mml__input--num { width: 70px; }
+        .mml__mem-grid { display: flex; gap: 12px; }
+        .mml__mem-cell { background: rgba(0,0,0,0.4); border: 1px solid var(--accent); padding: 12px; border-radius: 8px; display: flex; flex-direction: column; gap: 4px; }
+        .mml__mem-addr { font-size: 0.68rem; color: var(--text-muted); font-family: var(--font-code); }
+        .mml__mem-name { font-size: 0.85rem; font-weight: 700; color: #60A5FA; }
+        .mml__mem-val { font-size: 0.95rem; font-weight: 800; color: var(--accent); font-family: var(--font-code); }
+        .mml__pipe { display: flex; align-items: center; gap: 10px; font-family: var(--font-code); font-size: 1.1rem; }
+        .mml__pipe-box { background: rgba(0,0,0,0.3); padding: 8px 14px; border-radius: 6px; border: 1px solid var(--border); }
+        .mml__pipe-res { background: rgba(168,255,62,0.15); border: 1px solid var(--accent); color: var(--accent); padding: 8px 14px; border-radius: 6px; font-weight: 800; }
+        .mml__explain { font-size: 0.78rem; color: var(--text-muted); margin: 4px 0 0; line-height: 1.5; }
+        .mml__str-cells { display: flex; gap: 6px; flex-wrap: wrap; }
+        .mml__str-cell { background: rgba(0,0,0,0.3); border: 1px solid var(--border); padding: 8px; border-radius: 6px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
+        .mml__str-idx { font-size: 0.65rem; color: var(--text-muted); }
+        .mml__str-char { font-size: 0.9rem; font-weight: 700; color: var(--accent); font-family: var(--font-code); }
+        .mml__tree { display: flex; flex-direction: column; gap: 8px; }
+        .mml__node { padding: 10px 14px; border-radius: 8px; background: rgba(0,0,0,0.2); border: 1px solid var(--border); font-size: 0.84rem; color: var(--text-muted); }
+        .mml__node--active { background: rgba(168,255,62,0.12) !important; border-color: var(--accent) !important; color: var(--text-primary) !important; font-weight: 700; }
+        .mml__list-pills { display: flex; gap: 8px; flex-wrap: wrap; }
+        .mml__pill { padding: 8px 12px; border-radius: 8px; background: rgba(0,0,0,0.3); border: 1px solid var(--border); font-size: 0.82rem; color: var(--text-secondary); }
+        .mml__pill--active { background: rgba(168,255,62,0.15) !important; border-color: var(--accent) !important; color: var(--accent) !important; font-weight: 700; }
+        .mml__dict-keys { display: flex; gap: 8px; }
+        .mml__key-btn { padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border); background: rgba(0,0,0,0.3); color: var(--text-secondary); font-size: 0.8rem; cursor: pointer; }
+        .mml__key-btn--active { background: rgba(96,165,250,0.2); border-color: #60A5FA; color: #60A5FA; font-weight: 700; }
+        .mml__dict-res { padding: 10px 14px; border-radius: 8px; background: rgba(0,0,0,0.3); border: 1px solid var(--border); font-size: 0.85rem; color: var(--text-primary); }
+        .mml__shield { padding: 12px; border-radius: 8px; font-size: 0.85rem; font-weight: 700; }
+        .mml__shield--ok { background: rgba(168,255,62,0.1); color: var(--accent); border: 1px solid rgba(168,255,62,0.3); }
+        .mml__shield--error { background: rgba(239,68,68,0.15); color: #FCA5A5; border: 1px solid rgba(239,68,68,0.4); }
+        .btn-secondary { padding: 6px 14px; border-radius: 6px; border: 1px solid var(--border); background: rgba(255,255,255,0.06); color: var(--text-primary); font-size: 0.8rem; font-weight: 600; cursor: pointer; }
+        .btn-secondary:hover { background: rgba(255,255,255,0.12); }
+      `}</style>
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────
+// INSTANT MICRO-SANDBOX / INTERACTIVE TRY-IT WIDGET
+// ─────────────────────────────────────────────────────────
+function MicroSandbox({ initialCode }) {
+  const [code, setCode] = useState(initialCode || '');
+  const [output, setOutput] = useState('');
+  const [running, setRunning] = useState(false);
+  const [hasRun, setHasRun] = useState(false);
+
+  useEffect(() => {
+    setCode(initialCode || '');
+    setOutput('');
+    setHasRun(false);
+  }, [initialCode]);
+
+  function runPythonCode() {
+    setRunning(true);
+    setHasRun(true);
+
+    setTimeout(() => {
+      try {
+        const logs = [];
+        const lines = code.split('\n');
+        let env = {};
+
+        lines.forEach(line => {
+          let trimmed = line.trim();
+          if (!trimmed || trimmed.startsWith('#')) return;
+
+          // Emulate print(...)
+          if (trimmed.startsWith('print(') && trimmed.endsWith(')')) {
+            let inner = trimmed.slice(6, -1);
+            let parts = inner.split(/,(?=(?:[^\'"]*[\'"][^\'"]*[\'"])*[^\'"]*$)/);
+            let printedVals = parts.map(p => {
+              p = p.trim();
+              if ((p.startsWith('"') && p.endsWith('"')) || (p.startsWith("'") && p.endsWith("'"))) {
+                return p.slice(1, -1);
+              }
+              if (p.startsWith('f"') || p.startsWith("f'")) {
+                let fstr = p.slice(2, -1);
+                return fstr.replace(/\{([^}]+)\}/g, (_, expr) => {
+                  try {
+                    return evalWithEnv(expr, env);
+                  } catch (e) {
+                    return `{${expr}}`;
+                  }
+                });
+              }
+              return evalWithEnv(p, env);
+            });
+            logs.push(printedVals.join(' '));
+            return;
+          }
+
+          // Emulate assignment var = expr
+          if (trimmed.includes('=')) {
+            let [varName, expr] = trimmed.split('=').map(s => s.trim());
+            if (varName && expr && !trimmed.startsWith('if') && !trimmed.startsWith('for')) {
+              env[varName] = evalWithEnv(expr, env);
+            }
+          }
+        });
+
+        if (logs.length === 0) {
+          logs.push('✓ Code executed cleanly with 0 errors (No print output generated).');
+        }
+
+        setOutput(logs.join('\n'));
+      } catch (err) {
+        setOutput(`Traceback (most recent call last):\n  File "main.py", line 1\nSyntaxError/RuntimeError: ${err.message}`);
+      } finally {
+        setRunning(false);
+      }
+    }, 200);
+  }
+
+  function evalWithEnv(expr, env) {
+    try {
+      const keys = Object.keys(env);
+      const vals = Object.values(env);
+      const func = new Function(...keys, `return ${expr};`);
+      return func(...vals);
+    } catch {
+      return expr;
+    }
+  }
+
+  return (
+    <div className="msb">
+      <div className="msb__head">
+        <div className="msb__title-row">
+          <span className="msb__tag">⚡ Interactive Micro-Sandbox</span>
+          <span className="msb__sub">Edit & execute Python code live in your browser</span>
+        </div>
+        <div className="msb__actions">
+          <button className="msb__btn msb__btn--run" onClick={runPythonCode} disabled={running}>
+            {running ? '⚙️ Running...' : '▶ Run Code'}
+          </button>
+          <button className="msb__btn msb__btn--reset" onClick={() => { setCode(initialCode || ''); setOutput(''); setHasRun(false); }}>
+            ↺ Reset
+          </button>
+        </div>
+      </div>
+
+      <div className="msb__editor">
+        <textarea
+          className="msb__textarea"
+          value={code}
+          onChange={e => setCode(e.target.value)}
+          rows={Math.max(6, code.split('\n').length + 1)}
+          spellCheck={false}
+        />
+      </div>
+
+      {hasRun && (
+        <div className="msb__terminal">
+          <div className="msb__terminal-bar">
+            <span className="msb__terminal-dot red"></span>
+            <span className="msb__terminal-dot yellow"></span>
+            <span className="msb__terminal-dot green"></span>
+            <span className="msb__terminal-title">Terminal stdout ($ python main.py)</span>
+          </div>
+          <pre className="msb__terminal-out">{output}</pre>
+        </div>
+      )}
+
+      <style>{`
+        .msb { margin: 24px 0; border-radius: 14px; background: rgba(0,0,0,0.3); border: 1px solid var(--border); overflow: hidden; }
+        .msb__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
+        .msb__title-row { display: flex; flex-direction: column; gap: 2px; }
+        .msb__tag { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }
+        .msb__sub { font-size: 0.8rem; color: var(--text-muted); }
+        .msb__actions { display: flex; gap: 8px; }
+        .msb__btn { padding: 6px 14px; border-radius: 6px; font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: transform 0.15s, opacity 0.15s; border: none; }
+        .msb__btn--run { background: var(--accent); color: #0D1117; }
+        .msb__btn--run:hover { transform: translateY(-1px); }
+        .msb__btn--reset { background: rgba(255,255,255,0.08); color: var(--text-secondary); border: 1px solid var(--border); }
+        .msb__btn--reset:hover { background: rgba(255,255,255,0.15); }
+        .msb__editor { padding: 14px 18px; background: rgba(0,0,0,0.4); }
+        .msb__textarea { width: 100%; background: transparent; border: none; color: #F1F5F9; font-family: var(--font-code); font-size: 0.88rem; line-height: 1.6; resize: vertical; outline: none; }
+        .msb__terminal { background: #0A0D12; border-top: 1px solid var(--border); }
+        .msb__terminal-bar { display: flex; align-items: center; gap: 6px; padding: 8px 14px; background: rgba(255,255,255,0.02); border-bottom: 1px solid rgba(255,255,255,0.05); }
+        .msb__terminal-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
+        .msb__terminal-dot.red { background: #EF4444; }
+        .msb__terminal-dot.yellow { background: #F59E0B; }
+        .msb__terminal-dot.green { background: #10B981; }
+        .msb__terminal-title { font-size: 0.72rem; color: var(--text-muted); font-family: var(--font-code); margin-left: 6px; }
+        .msb__terminal-out { padding: 12px 18px; margin: 0; font-family: var(--font-code); font-size: 0.84rem; color: var(--accent); line-height: 1.6; overflow-x: auto; white-space: pre-wrap; }
+      `}</style>
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────
+// THEORY PHASE — docs-style
+// ─────────────────────────────────────────────────────────
+function TheoryPhase({ chapterId, theory, onComplete, alreadyDone }) {
+  if (!theory) return null;
+
+  // Split explanation into paragraphs — blank lines become spacers
+  const explanationText = theory.explanation || '';
+  const paragraphs = explanationText.split('\n').reduce((acc, line) => {
+    if (line.trim() === '') {
+      if (acc.length && acc[acc.length - 1] !== null) acc.push(null);
+    } else { acc.push(line); }
+    return acc;
+  }, []);
+
+  return (
+    <div className="tp">
+      {/* All elements below get targeted by the GSAP stagger in useEffect.
+          DO NOT wrap in a single .theory-body — the bug was that animating
+          .theory-body > * would re-animate elements already animated individually. */}
+
+      <div className="theory-eyebrow">
+        <span className="theory-eyebrow__tag">💡 You just discovered…</span>
+      </div>
+
+      <h1 className="theory-title">{theory.headline}</h1>
+
+      <div className="theory-concept">{theory.concept}</div>
+
+      <hr className="theory-divider" />
+
+      {/* ── 1. BEFORE VS AFTER FRICTION SIMULATOR ───────────────── */}
+      <BeforeVsAfter data={theory.beforeVsAfter} />
+
+      <div className="theory-explanation">
+        {paragraphs.map((p, i) =>
+          p === null ? <div key={i} style={{ height: 6 }} /> : <p key={i}>{p}</p>
+        )}
+      </div>
+
+      <div className="theory-code">
+        <div className="theory-code__bar">
+          <span className="theory-code__lang">Python</span>
+          <span className="theory-code__run">Try it out!</span>
+        </div>
+        <pre className="theory-code__body">{theory.codeExample}</pre>
+      </div>
+
+      {/* ── 2. INSTANT MICRO-SANDBOX TRY-IT WIDGET ───────────────── */}
+      <MicroSandbox initialCode={theory.codeExample} />
+
+      {/* ── 3. INTERACTIVE MENTAL MODEL LAB ─────────────────────── */}
+      <MentalModelLab chapterId={chapterId} />
+
+      <div className="theory-callout">
+        <div className="theory-callout__icon">🌍</div>
+        <div>
+          <p className="theory-callout__label">Real-world connection</p>
+          <p className="theory-callout__text">{theory.realWorldConnection}</p>
+        </div>
+      </div>
+
+      <div className="theory-takeaway">
+        <CheckCircle2 size={15} style={{ color: 'var(--accent)', flexShrink: 0, marginTop: 2 }} />
+        <p><strong>Key takeaway:</strong> {theory.keyTakeaway}</p>
+      </div>
+
+      {/* Complete CTA — separate from the staggered elements */}
+      <div className="theory-complete">
+        <hr style={{ border: 'none', borderTop: '1px solid rgba(255,255,255,0.07)', margin: 0 }} />
+        <div className="theory-complete__inner">
+          <div>
+            <p className="theory-complete__note">You've reached the end of this chapter.</p>
+          </div>
+          <button id="complete-chapter-btn" className="btn-complete" onClick={onComplete}>
+            <CheckCircle2 size={16} />
+            {alreadyDone ? 'Next chapter →' : 'Mark as Complete ✓'}
+          </button>
+        </div>
+      </div>
+
+      <style>{`
+        .tp { display: flex; flex-direction: column; gap: 26px; }
+
+        /* Each element is targeted directly by class name in GSAP — no parent > * */
+        .theory-eyebrow {}
+        .theory-eyebrow__tag {
+          display: inline-flex; align-items: center; gap: 6px;
+          font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
+          color: var(--accent); background: rgba(168,255,62,0.08); border: 1px solid rgba(168,255,62,0.18);
+          padding: 5px 12px; border-radius: 20px;
+        }
+        .theory-title {
+          font-size: clamp(1.5rem, 3.5vw, 2.2rem); font-weight: 800;
+          color: var(--text-primary); margin: 0; letter-spacing: -0.02em; line-height: 1.2;
+        }
+        .theory-concept {
+          font-family: var(--font-heading);
+          font-size: clamp(2.4rem, 7vw, 4rem); font-weight: 900; line-height: 1;
+          background: linear-gradient(135deg, var(--accent) 0%, #5BFFB0 100%);
+          -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
+        }
+        .theory-divider { border: none; border-top: 1px solid rgba(255,255,255,0.07); margin: 0; }
+        .theory-explanation { display: flex; flex-direction: column; gap: 2px; }
+        .theory-explanation p { font-size: 0.96rem; color: var(--text-secondary); line-height: 1.85; margin: 0; }
+        .theory-code { border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); background: #0D1117; }
+        .theory-code__bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; background: rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.06); }
+        .theory-code__lang { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }
+        .theory-code__run { font-size: 0.7rem; color: var(--text-muted); }
+        .theory-code__body { padding: 20px; margin: 0; overflow-x: auto; font-family: var(--font-mono); font-size: 0.86rem; color: #c9d1d9; line-height: 1.7; white-space: pre; }
+        .theory-callout { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 10px; background: rgba(168,255,62,0.04); border-left: 3px solid var(--accent); }
+        .theory-callout__icon { font-size: 1.1rem; flex-shrink: 0; }
+        .theory-callout__label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--accent); margin: 0 0 6px; }
+        .theory-callout__text { font-size: 0.89rem; color: var(--text-secondary); margin: 0; line-height: 1.7; }
+        .theory-takeaway { display: flex; gap: 11px; align-items: flex-start; padding: 14px 16px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); }
+        .theory-takeaway p { font-size: 0.89rem; color: var(--text-secondary); margin: 0; line-height: 1.6; }
+        .theory-takeaway strong { color: var(--text-primary); }
+        .theory-complete { display: flex; flex-direction: column; gap: 16px; padding-top: 4px; }
+        .theory-complete__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
+        .theory-complete__note { font-size: 0.82rem; color: var(--text-muted); margin: 0; }
+        .btn-complete { display: inline-flex; align-items: center; gap: 9px; padding: 12px 24px; background: var(--accent); color: #0D1117; border: none; border-radius: 9px; font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; white-space: nowrap; }
+        .btn-complete:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(168,255,62,0.28); }
+      `}</style>
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────
+// Shared Spinner
+// ─────────────────────────────────────────────────────────
+function Spinner({ size = 18, color = 'var(--accent)' }) {
+  return (
+    <span style={{
+      width: size, height: size, display: 'inline-block', borderRadius: '50%',
+      border: `2px solid rgba(0,0,0,0.15)`, borderTop: `2px solid ${color}`,
+      animation: 'cp-spin 0.7s linear infinite', flexShrink: 0,
+    }} />
+  );
+}
diff --git a/client/src/pages/Dashboard.jsx b/client/src/pages/Dashboard.jsx
new file mode 100644
index 0000000..88b1df0
--- /dev/null
+++ b/client/src/pages/Dashboard.jsx
@@ -0,0 +1,198 @@
+import React, { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { BarChart2, Clock, TrendingUp, Play } from 'lucide-react';
+import HorcruxVault from '../components/HorcruxVault.jsx';
+
+const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:5000/api';
+async function api(path) {
+  const r = await fetch(`${API_URL}${path}`);
+  if (!r.ok) throw new Error(await r.text());
+  return r.json();
+}
+
+function ConceptBar({ name, count, maxCount }) {
+  const pct = maxCount ? Math.round((count / maxCount) * 100) : 0;
+  return (
+    <div className="cb">
+      <div className="cb__top">
+        <span className="cb__name">{name}</span>
+        <span className="cb__count">{count} sessions</span>
+      </div>
+      <div className="cb__track">
+        <div className="cb__fill" style={{ width: `${pct}%` }} />
+      </div>
+    </div>
+  );
+}
+
+export default function Dashboard() {
+  const [analytics, setAnalytics] = useState(null);
+  const [sessions, setSessions]   = useState([]);
+  const [loading, setLoading]     = useState(true);
+
+  useEffect(() => {
+    Promise.all([api('/analytics'), api('/sessions')])
+      .then(([a, s]) => { setAnalytics(a); setSessions(s); })
+      .finally(() => setLoading(false));
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="dash page-content container">
+        {[...Array(4)].map((_, i) => (
+          <div key={i} className="skeleton" style={{ height: 120, marginBottom: 16, borderRadius: 'var(--r-lg)' }} />
+        ))}
+      </div>
+    );
+  }
+
+  const concepts = Object.entries(analytics?.conceptCounts || {}).sort((a, b) => b[1] - a[1]);
+  const maxCount = concepts[0]?.[1] || 1;
+
+  const scoreLabel = (s) => {
+    if (s >= 70) return { text: 'Excellent', color: 'var(--accent)' };
+    if (s >= 45) return { text: 'Developing', color: 'var(--chai-color)' };
+    return { text: 'Early stage', color: 'var(--builder-color)' };
+  };
+
+  return (
+    <div className="dash page-content">
+      <div className="container">
+        <div className="section-label">Your Progress</div>
+        <h1 style={{ marginBottom: 'var(--sp-2)' }}>Learning Dashboard</h1>
+        <p style={{ marginBottom: 'var(--sp-8)' }}>
+          Track your concept mastery, prompt quality, and Horcrux progress below.
+        </p>
+
+        {/* Summary stats */}
+        <div className="dash__stats-row stagger">
+          {[
+            { icon: <BarChart2 size={20} />, label: 'Scenarios', val: analytics?.scenarioCount ?? 0, color: 'var(--accent)' },
+            { icon: <Play size={20} />, label: 'Sessions', val: analytics?.sessionCount ?? 0, color: 'var(--explorer-color)' },
+            { icon: <TrendingUp size={20} />, label: 'Avg Prompt Score', val: analytics?.averagePromptScore ?? 0, color: 'var(--chai-color)' },
+            { icon: <Clock size={20} />, label: 'Concepts Explored', val: concepts.length, color: 'var(--builder-color)' },
+          ].map(s => (
+            <div key={s.label} className="dash__stat-card card anim-fade-up">
+              <div className="dash__stat-icon" style={{ color: s.color }}>{s.icon}</div>
+              <div className="dash__stat-val" style={{ color: s.color }}>{s.val}</div>
+              <div className="dash__stat-label">{s.label}</div>
+            </div>
+          ))}
+        </div>
+
+        <div className="dash__grid">
+          {/* Concept mastery */}
+          <div className="card dash__panel">
+            <div className="section-label" style={{ marginBottom: 'var(--sp-4)' }}>Concept Mastery</div>
+            {concepts.length === 0 ? (
+              <div className="dash__empty">
+                <p>No sessions yet. <Link to="/scenarios">Start learning →</Link></p>
+              </div>
+            ) : (
+              <div className="dash__concept-list">
+                {concepts.map(([name, count]) => (
+                  <ConceptBar key={name} name={name} count={count} maxCount={maxCount} />
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Recent sessions */}
+          <div className="card dash__panel">
+            <div className="section-label" style={{ marginBottom: 'var(--sp-4)' }}>Recent Sessions</div>
+            {sessions.length === 0 ? (
+              <div className="dash__empty">
+                <p>No sessions yet. <Link to="/scenarios">Try a scenario →</Link></p>
+              </div>
+            ) : (
+              <div className="dash__sessions">
+                {sessions.slice(0, 8).map(session => {
+                  const sl = scoreLabel(session.promptScore);
+                  return (
+                    <div key={session._id} className="dash__session">
+                      <div className="dash__session-icon">
+                        <Play size={13} />
+                      </div>
+                      <div className="dash__session-body">
+                        <div className="dash__session-title">{session.scenario?.title || 'Unknown Scenario'}</div>
+                        <div className="dash__session-meta">
+                          {session.masterySignals?.slice(0, 2).join(' · ')}
+                        </div>
+                      </div>
+                      <div className="dash__session-score" style={{ color: sl.color }}>
+                        {session.promptScore}
+                        <span>{sl.text}</span>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Horcrux vault */}
+        <div className="card dash__horcrux">
+          <HorcruxVault conceptCounts={analytics?.conceptCounts || {}} />
+        </div>
+      </div>
+
+      <style>{`
+        .dash__stats-row {
+          display: grid;
+          grid-template-columns: repeat(4, 1fr);
+          gap: var(--sp-4);
+          margin-bottom: var(--sp-6);
+        }
+        .dash__stat-card {
+          padding: var(--sp-5);
+          display: flex; flex-direction: column; gap: var(--sp-2);
+        }
+        .dash__stat-icon {}
+        .dash__stat-val { font-family: var(--font-heading); font-size: 2rem; font-weight: 800; }
+        .dash__stat-label { font-size: 0.8rem; color: var(--text-muted); }
+
+        .dash__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-5); margin-bottom: var(--sp-5); align-items: start; }
+        .dash__panel { padding: var(--sp-5); }
+        .dash__empty { color: var(--text-muted); font-size: 0.85rem; }
+        .dash__empty a { color: var(--accent); }
+
+        .dash__concept-list { display: flex; flex-direction: column; gap: var(--sp-3); }
+        .cb { display: flex; flex-direction: column; gap: 6px; }
+        .cb__top { display: flex; justify-content: space-between; }
+        .cb__name { font-size: 0.85rem; color: var(--text-primary); font-weight: 500; }
+        .cb__count { font-size: 0.75rem; color: var(--text-muted); }
+        .cb__track { height: 6px; background: var(--bg-elevated); border-radius: 3px; overflow: hidden; }
+        .cb__fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-dim)); border-radius: 3px; transition: width 0.8s cubic-bezier(0.4,0,0.2,1); }
+
+        .dash__sessions { display: flex; flex-direction: column; gap: var(--sp-2); }
+        .dash__session {
+          display: flex; align-items: center; gap: var(--sp-3);
+          padding: var(--sp-2) 0;
+          border-bottom: 1px solid var(--border);
+        }
+        .dash__session:last-child { border-bottom: none; }
+        .dash__session-icon {
+          width: 28px; height: 28px;
+          background: var(--bg-elevated); border-radius: var(--r-sm);
+          display: grid; place-items: center; color: var(--text-muted); flex-shrink: 0;
+        }
+        .dash__session-body { flex: 1; min-width: 0; }
+        .dash__session-title { font-size: 0.85rem; color: var(--text-primary); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+        .dash__session-meta { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }
+        .dash__session-score { font-size: 1.1rem; font-weight: 700; text-align: right; flex-shrink: 0; }
+        .dash__session-score span { display: block; font-size: 0.65rem; font-weight: 500; opacity: 0.8; }
+
+        .dash__horcrux { padding: var(--sp-6); }
+
+        @media (max-width: 900px) {
+          .dash__stats-row { grid-template-columns: repeat(2, 1fr); }
+          .dash__grid { grid-template-columns: 1fr; }
+        }
+        @media (max-width: 480px) {
+          .dash__stats-row { grid-template-columns: 1fr 1fr; }
+        }
+      `}</style>
+    </div>
+  );
+}
diff --git a/client/src/pages/Home.jsx b/client/src/pages/Home.jsx
new file mode 100644
index 0000000..626f741
--- /dev/null
+++ b/client/src/pages/Home.jsx
@@ -0,0 +1,441 @@
+import React, { useEffect, useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import {
+  ArrowRight, Brain, BookOpen, BarChart2, Sparkles, Users, Target, Zap,
+  CheckCircle2, GraduationCap, Flame, Lightbulb, Code2, ShieldCheck, HeartHandshake
+} from 'lucide-react';
+import { useAuth } from '../context/AuthContext.jsx';
+import PublicNavbar from '../components/PublicNavbar.jsx';
+import { CURRICULUM } from '../data/curriculum.js';
+
+const UADE_THEMES = [
+  { id: 'chai-stall',    emoji: '🍵', title: 'Ramu\'s Chai Stall',    color: '#F59E0B', arc: 'Variables → Lists → Dictionaries', desc: 'Manage 50+ tea items, prices, and daily revenue without breaking a sweat.' },
+  { id: 'isro',          emoji: '🚀', title: 'ISRO Chandrayaan',     color: '#3B82F6', arc: 'Loops → Functions → Telemetry',   desc: 'Calculate fuel burn rates and trajectory checks for lunar orbit insertion.' },
+  { id: 'instagram',     emoji: '📸', title: 'Insta Filter Engine',   color: '#EC4899', arc: 'Lists → Matrix Manipulation',     desc: 'Apply brightness and color matrix transformations to pixel arrays.' },
+  { id: 'food-delivery', emoji: '🍕', title: 'Hostel Eats Startup',   color: '#F97316', arc: 'Conditionals → Search & Filter',  desc: 'Sort late-night delivery orders by distance, price, and preparation time.' },
+  { id: 'ai-playlist',   emoji: '🎵', title: 'AI Playlist Curator',   color: '#8B5CF6', arc: 'Sets → Unique Deduplication',     desc: 'Remove duplicate songs, match genres, and build smooth mood transitions.' },
+  { id: 'kota',          emoji: '📚', title: 'Kota Coaching Ranks',   color: '#10B981', arc: 'Algorithms → Binary Search',       desc: 'Search 100,000 student test scores in milliseconds using divide-and-conquer.' },
+];
+
+const FEATURES = [
+  { icon: <Brain size={22} />, title: 'First-Principles Discovery', desc: 'You are never lectured on syntax first. You reason through real problems until the current method breaks.' },
+  { icon: <Sparkles size={22} />, title: '6 UADE Universes', desc: 'Chai stalls, rocket launches, playlist curators — real Indian stories that bring Python concepts to life.' },
+  { icon: <Target size={22} />, title: 'Layman Language', desc: 'Designed specifically for junior students. Zero jargon overload, plain-English explanations.' },
+  { icon: <BarChart2 size={22} />, title: 'Metacognitive Feedback', desc: 'Your natural English reasoning is analyzed with educational quality grade levels before code reveal.' },
+  { icon: <Zap size={22} />, title: 'Docs-Style Theory Reveal', desc: 'After reasoning, concepts appear in clean documentation with code examples, callouts, and takeaways.' },
+  { icon: <ShieldCheck size={22} />, title: 'Research-Backed Pedagogy', desc: 'Grounded in Barrows\' PBL, Kapur\'s Productive Failure, Vygotsky\'s ZPD, and Piagetian cognitive stages.' },
+];
+
+export default function Home() {
+  const navigate = useNavigate();
+  const { user } = useAuth();
+  const [activeTab, setActiveTab] = useState('getting-started');
+
+  // Interactive Demo Widget State
+  const [demoChoice, setDemoChoice] = useState(null);
+
+  // Redirect logged-in users straight to the app dashboard
+  useEffect(() => {
+    if (user) { navigate('/app', { replace: true }); }
+  }, [user, navigate]);
+
+  const selectedSection = CURRICULUM.find(s => s.id === activeTab) || CURRICULUM[0];
+
+  return (
+    <div className="landing-page">
+      <PublicNavbar />
+
+      {/* ── HERO SECTION ────────────────────────────────────────── */}
+      <section className="hero">
+        {/* Background Aurora Blobs */}
+        <div className="aurora-blob aurora-blob--1" style={{ width: 500, height: 500, top: -120, left: -100 }} />
+        <div className="aurora-blob aurora-blob--2" style={{ width: 400, height: 400, top: 100, right: -120 }} />
+        <div className="aurora-blob aurora-blob--3" style={{ width: 350, height: 350, bottom: -80, left: '30%' }} />
+
+        <div className="container hero__container">
+          <div className="hero__badge">
+            <GraduationCap size={14} /> IIT Ropar Engineering Education Research Project
+          </div>
+
+          <h1 className="hero__title">
+            Don't memorize syntax.<br />
+            <span className="shimmer-text">Rediscover why Python exists.</span>
+          </h1>
+
+          <p className="hero__subtitle">
+            PyBe teaches programming through real Indian stories — chai stalls, ISRO rocket missions, and food startups.
+            You reason through the problem in plain English first. Python code is the discovery, not the starting lecture.
+          </p>
+
+          <div className="hero__ctas">
+            <Link to="/signup" className="btn btn-primary btn-lg hero__btn-primary">
+              Get Started Free <ArrowRight size={18} />
+            </Link>
+            <Link to="/login" className="btn btn-secondary btn-lg">
+              Sign In
+            </Link>
+          </div>
+
+          {/* ── INTERACTIVE FIRST-PRINCIPLES DEMO WIDGET ──────────────── */}
+          <div className="hero__demo card">
+            <div className="hero__demo-header">
+              <div className="hero__demo-dots">
+                <span style={{ background: '#FF5F56' }} />
+                <span style={{ background: '#FFBD2E' }} />
+                <span style={{ background: '#27C93F' }} />
+              </div>
+              <span className="hero__demo-title"><Lightbulb size={13} /> Interactive PyBe Method Demo</span>
+              <span className="hero__demo-tag">Try it below</span>
+            </div>
+
+            <div className="hero__demo-body">
+              <p className="hero__demo-problem">
+                <strong>📍 The Problem:</strong> Ramu's Chai Stall has 8 tea varieties stored in 8 separate variables (<code>price1=10</code>, <code>price2=15</code>...).
+                His menu expands to 50 items. What happens when he wants to update all prices?
+              </p>
+
+              <div className="hero__demo-choices">
+                <button
+                  className={`hero__demo-choice ${demoChoice === 'A' ? 'selected-bad' : ''}`}
+                  onClick={() => setDemoChoice('A')}
+                >
+                  <span className="choice-badge">A</span> Create 42 more variables (<code>price9</code>, <code>price10</code>...)
+                </button>
+                <button
+                  className={`hero__demo-choice ${demoChoice === 'B' ? 'selected-good' : ''}`}
+                  onClick={() => setDemoChoice('B')}
+                >
+                  <span className="choice-badge">B</span> Group all 50 prices in a single ordered container
+                </button>
+              </div>
+
+              {demoChoice === 'A' && (
+                <div className="hero__demo-result bad">
+                  ⚠️ <strong>Cluttered code!</strong> 50 separate variables mean 50 lines of duplicate code. Hard to maintain and easy to bug out.
+                </div>
+              )}
+
+              {demoChoice === 'B' && (
+                <div className="hero__demo-result good">
+                  🎉 <strong>Boom! You just reinvented a Python List (<code>[]</code>)!</strong>
+                  <br />
+                  In PyBe, you discover concepts by solving real problems first.
+                </div>
+              )}
+            </div>
+          </div>
+
+        </div>
+      </section>
+
+      {/* ── 4-STEP METHODOLOGY SECTION ──────────────────────────── */}
+      <section id="methodology" className="methodology container">
+        <div className="section-header center">
+          <div>
+            <div className="section-label">Pedagogical Framework</div>
+            <h2>How PyBe Teaches First-Principles Thinking</h2>
+          </div>
+        </div>
+
+        <div className="methodology__grid">
+          <div className="methodology__card card">
+            <div className="methodology__num">01</div>
+            <div className="methodology__icon" style={{ background: 'rgba(245,158,11,0.12)', color: '#F59E0B' }}>
+              <Flame size={20} />
+            </div>
+            <h3>1. The Problem Hook</h3>
+            <p>You face a scenario (e.g. tracking ISRO rocket telemetry) that grows until your current approach breaks down.</p>
+          </div>
+
+          <div className="methodology__card card">
+            <div className="methodology__num">02</div>
+            <div className="methodology__icon" style={{ background: 'rgba(59,130,246,0.12)', color: '#3B82F6' }}>
+              <Brain size={20} />
+            </div>
+            <h3>2. Plain-English Reasoning</h3>
+            <p>No syntax pressure. You write your natural solution in everyday words — like explaining your logic to a friend.</p>
+          </div>
+
+          <div className="methodology__card card">
+            <div className="methodology__num">03</div>
+            <div className="methodology__icon" style={{ background: 'rgba(167,139,250,0.12)', color: '#A78BFA' }}>
+              <BarChart2 size={20} />
+            </div>
+            <h3>3. Reasoning Recap</h3>
+            <p>Get instant educational analysis of your thinking quality with grade levels (🔥 Excellent, ⚡ Strong, 💡 Good).</p>
+          </div>
+
+          <div className="methodology__card card">
+            <div className="methodology__num">04</div>
+            <div className="methodology__icon" style={{ background: 'rgba(168,255,62,0.12)', color: 'var(--accent)' }}>
+              <CheckCircle2 size={20} />
+            </div>
+            <h3>4. Theory & Code Reveal</h3>
+            <p>Discover the official Python construct (e.g. Loops or Dictionaries) as documentation that validates your exact logic.</p>
+          </div>
+        </div>
+      </section>
+
+      {/* ── SYLLABUS EXPLORER ───────────────────────────────────── */}
+      <section id="syllabus" className="syllabus container">
+        <div className="section-header">
+          <div>
+            <div className="section-label">Comprehensive Curriculum</div>
+            <h2>From Zero to Advanced Python Engineer</h2>
+          </div>
+          <Link to="/signup" className="btn btn-primary btn-sm">
+            Get Started <ArrowRight size={14} />
+          </Link>
+        </div>
+
+        <div className="syllabus__tabs">
+          {CURRICULUM.map(s => (
+            <button
+              key={s.id}
+              className={`syllabus__tab ${activeTab === s.id ? 'active' : ''}`}
+              onClick={() => setActiveTab(s.id)}
+            >
+              <span>{s.emoji}</span> {s.title}
+            </button>
+          ))}
+        </div>
+
+        <div className="syllabus__chapters grid-3">
+          {selectedSection.chapters.map((ch, idx) => (
+            <div key={ch.id} className="syllabus__card card">
+              <div className="syllabus__card-top">
+                <span className="syllabus__card-emoji">{ch.emoji}</span>
+                <span className="syllabus__card-num">Chapter {idx + 1}</span>
+              </div>
+              <h3 className="syllabus__card-title">{ch.title}</h3>
+              <p className="syllabus__card-sub">{ch.subtitle}</p>
+              <div className="syllabus__card-concepts">
+                {ch.concepts.map(c => (
+                  <span key={c} className="concept-tag">{c}</span>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* ── 6 UADE CASE STUDY UNIVERSES ──────────────────────────── */}
+      <section id="themes" className="case-studies">
+        <div className="container">
+          <div className="section-header">
+            <div>
+              <div className="section-label">Real-World Case Studies</div>
+              <h2>Learn Across 6 Culturally-Resonant Universes</h2>
+            </div>
+          </div>
+
+          <div className="case-studies__grid grid-3">
+            {UADE_THEMES.map(t => (
+              <div key={t.id} className="case-card card" style={{ '--theme-c': t.color }}>
+                <div className="case-card__header">
+                  <span className="case-card__emoji">{t.emoji}</span>
+                  <span className="case-card__arc">{t.arc}</span>
+                </div>
+                <h3 className="case-card__title">{t.title}</h3>
+                <p className="case-card__desc">{t.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── WHY PYBE / FEATURES SECTION ─────────────────────────── */}
+      <section id="features" className="features container">
+        <div className="section-header center">
+          <div>
+            <div className="section-label">Why PyBe</div>
+            <h2>Built Specifically for Student Understanding</h2>
+          </div>
+        </div>
+
+        <div className="grid-3">
+          {FEATURES.map(f => (
+            <div key={f.title} className="feature-card card">
+              <div className="feature-card__icon">{f.icon}</div>
+              <h3>{f.title}</h3>
+              <p>{f.desc}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* ── FINAL CTA BANNER ────────────────────────────────────── */}
+      <section className="cta-banner container">
+        <div className="cta-banner__card card">
+          <div className="aurora-blob aurora-blob--1" style={{ width: 300, height: 300, top: -50, right: -50 }} />
+          <h2 className="cta-banner__title">Ready to think like a Python Engineer?</h2>
+          <p className="cta-banner__sub">
+            Join thousands of junior learners mastering Python through first-principles discovery. Free forever.
+          </p>
+          <div className="cta-banner__actions">
+            <Link to="/signup" className="btn btn-primary btn-lg cta-banner__btn">
+              Create Free Account <ArrowRight size={18} />
+            </Link>
+            <Link to="/login" className="btn btn-secondary btn-lg">
+              Sign In
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* ── FOOTER ──────────────────────────────────────────────── */}
+      <footer className="footer">
+        <div className="container footer__inner">
+          <div className="footer__brand">
+            <span className="footer__logo">🐍 PyBe</span>
+            <p className="footer__desc">
+              Scenario-Driven Python Learning Platform. Grounded in Problem-Based Learning and UADE principles.
+            </p>
+          </div>
+          <div className="footer__meta">
+            <span>IIT Ropar Summer Internship 2026 · Sukrut</span>
+            <span>Version 2.1.0</span>
+          </div>
+        </div>
+      </footer>
+
+      <style>{`
+        .landing-page { padding-top: var(--navbar-h); overflow-x: hidden; }
+
+        /* Scroll margin for section links */
+        #methodology, #syllabus, #themes, #features {
+          scroll-margin-top: calc(var(--navbar-h) + 24px);
+        }
+
+        /* Hero */
+        .hero { position: relative; padding: 60px 0 40px; text-align: center; }
+        .hero__container { max-width: 900px; position: relative; z-index: 1; }
+        .hero__badge {
+          display: inline-flex; align-items: center; gap: 6px;
+          font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
+          letter-spacing: 0.08em; color: var(--accent);
+          background: var(--accent-glow); border: 1px solid var(--border-accent);
+          padding: 5px 14px; border-radius: 20px; margin-bottom: 20px;
+        }
+        .hero__title {
+          font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 800;
+          line-height: 1.1; margin-bottom: 20px; letter-spacing: -0.03em;
+        }
+        .hero__subtitle {
+          font-size: 1.05rem; color: var(--text-secondary); max-width: 680px;
+          margin: 0 auto 32px; line-height: 1.7;
+        }
+        .hero__ctas { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 48px; }
+        .hero__btn-primary { padding: 14px 32px; }
+
+        /* Demo widget */
+        .hero__demo {
+          max-width: 720px; margin: 0 auto; text-align: left;
+          background: var(--bg-glass); border: 1px solid var(--border);
+          border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg);
+        }
+        [data-theme="light"] .hero__demo { background: #ffffff; }
+        .hero__demo-header {
+          display: flex; align-items: center; justify-content: space-between;
+          padding: 12px 18px; background: var(--bg-elevated); border-bottom: 1px solid var(--border);
+        }
+        .hero__demo-dots { display: flex; gap: 6px; }
+        .hero__demo-dots span { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
+        .hero__demo-title { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); }
+        .hero__demo-tag { font-size: 0.68rem; font-weight: 700; color: var(--accent); text-transform: uppercase; }
+        .hero__demo-body { padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; }
+        .hero__demo-problem { font-size: 0.92rem; color: var(--text-primary); line-height: 1.65; margin: 0; }
+        .hero__demo-choices { display: flex; flex-direction: column; gap: 10px; }
+        .hero__demo-choice {
+          display: flex; align-items: center; gap: 12px; padding: 12px 16px;
+          background: var(--bg-elevated); border: 1px solid var(--border);
+          border-radius: 10px; font-size: 0.88rem; color: var(--text-primary);
+          cursor: pointer; transition: all 0.2s ease; text-align: left;
+        }
+        .hero__demo-choice:hover { border-color: var(--border-hover); background: var(--bg-glass-light); }
+        .choice-badge {
+          width: 22px; height: 22px; border-radius: 50%; background: var(--border);
+          font-size: 0.72rem; font-weight: 700; display: grid; place-items: center; flex-shrink: 0;
+        }
+        .selected-bad { border-color: #EF4444 !important; background: rgba(239,68,68,0.08) !important; }
+        .selected-good { border-color: var(--accent) !important; background: var(--accent-glow) !important; }
+        .hero__demo-result { padding: 14px 16px; border-radius: 10px; font-size: 0.88rem; line-height: 1.6; }
+        .hero__demo-result.bad { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.25); color: #EF4444; }
+        .hero__demo-result.good { background: var(--accent-glow); border: 1px solid var(--border-accent); color: var(--text-primary); }
+
+        /* Methodology */
+        .methodology { padding: 80px 0 60px; }
+        .section-header.center { text-align: center; justify-content: center; }
+        .methodology__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; }
+        .methodology__card { padding: 24px 20px; display: flex; flex-direction: column; gap: 12px; position: relative; }
+        .methodology__num { position: absolute; top: 16px; right: 18px; font-size: 1.6rem; font-weight: 900; color: var(--text-muted); opacity: 0.25; }
+        .methodology__icon { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; }
+        .methodology__card h3 { font-size: 1rem; margin: 0; }
+        .methodology__card p { font-size: 0.84rem; margin: 0; line-height: 1.6; color: var(--text-secondary); }
+
+        /* Syllabus */
+        .syllabus { padding: 60px 0 80px; }
+        .syllabus__tabs { display: flex; gap: 8px; margin-bottom: 24px; overflow-x: auto; padding-bottom: 8px; }
+        .syllabus__tab {
+          display: flex; align-items: center; gap: 8px; padding: 10px 18px;
+          border-radius: 10px; border: 1px solid var(--border); background: var(--bg-elevated);
+          color: var(--text-secondary); font-size: 0.85rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all 0.2s;
+        }
+        .syllabus__tab.active { background: var(--accent); color: #0D1117; border-color: var(--accent); }
+        [data-theme="light"] .syllabus__tab.active { color: #ffffff; background: #15803D; }
+        .syllabus__card { padding: 22px; display: flex; flex-direction: column; gap: 10px; }
+        .syllabus__card-top { display: flex; align-items: center; justify-content: space-between; }
+        .syllabus__card-emoji { font-size: 1.6rem; }
+        .syllabus__card-num { font-size: 0.72rem; font-weight: 700; color: var(--accent); text-transform: uppercase; }
+        .syllabus__card-title { font-size: 1.05rem; margin: 0; }
+        .syllabus__card-sub { font-size: 0.83rem; color: var(--text-muted); margin: 0; flex: 1; }
+        .syllabus__card-concepts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
+        .concept-tag { font-size: 0.7rem; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--bg-glass-light); border: 1px solid var(--border); color: var(--text-secondary); }
+
+        /* Case studies */
+        .case-studies { padding: 60px 0 80px; background: var(--bg-surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
+        .case-studies__grid { margin-top: 32px; }
+        .case-card { padding: 24px; display: flex; flex-direction: column; gap: 12px; transition: transform 0.2s; }
+        .case-card:hover { transform: translateY(-4px); }
+        .case-card__header { display: flex; align-items: center; justify-content: space-between; }
+        .case-card__emoji { font-size: 2rem; }
+        .case-card__arc { font-size: 0.72rem; font-weight: 700; color: var(--theme-c); background: color-mix(in srgb, var(--theme-c) 15%, transparent); padding: 3px 10px; border-radius: 20px; }
+        .case-card__title { font-size: 1.1rem; margin: 0; }
+        .case-card__desc { font-size: 0.85rem; color: var(--text-secondary); margin: 0; line-height: 1.65; }
+
+        /* Features */
+        .features { padding: 60px 0 80px; }
+        .feature-card { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
+        .feature-card__icon { color: var(--accent); }
+        .feature-card h3 { font-size: 1rem; margin: 0; color: var(--text-primary); }
+        .feature-card p { font-size: 0.85rem; margin: 0; line-height: 1.65; color: var(--text-secondary); }
+
+        /* CTA Banner */
+        .cta-banner { padding: 80px 0; }
+        .cta-banner__card { padding: 60px 40px; text-align: center; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 16px; }
+        .cta-banner__title { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; margin: 0; }
+        .cta-banner__sub { font-size: 1rem; color: var(--text-secondary); max-width: 540px; margin: 0 0 12px; }
+        .cta-banner__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
+        .cta-banner__btn { padding: 14px 36px; }
+
+        /* Footer */
+        .footer { border-top: 1px solid var(--border); padding: 40px 0; background: var(--bg-base); }
+        .footer__inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
+        .footer__brand { display: flex; flex-direction: column; gap: 6px; }
+        .footer__logo { font-family: var(--font-heading); font-weight: 800; font-size: 1.1rem; color: var(--text-primary); }
+        .footer__desc { font-size: 0.78rem; color: var(--text-muted); max-width: 400px; margin: 0; }
+        .footer__meta { display: flex; flex-direction: column; align-items: flex-end; font-size: 0.75rem; color: var(--text-muted); gap: 4px; }
+
+        @media (max-width: 1024px) {
+          .methodology__grid { grid-template-columns: repeat(2, 1fr); }
+        }
+        @media (max-width: 640px) {
+          .methodology__grid { grid-template-columns: 1fr; }
+          .footer__inner { flex-direction: column; align-items: flex-start; }
+          .footer__meta { align-items: flex-start; }
+          .cta-banner__card { padding: 36px 20px; }
+        }
+      `}</style>
+    </div>
+  );
+}
diff --git a/client/src/pages/LearnSession.jsx b/client/src/pages/LearnSession.jsx
new file mode 100644
index 0000000..63f5023
--- /dev/null
+++ b/client/src/pages/LearnSession.jsx
@@ -0,0 +1,233 @@
+import React, { useEffect, useState } from 'react';
+import { useParams, useNavigate, Link } from 'react-router-dom';
+import { ArrowLeft, Target, ChevronRight } from 'lucide-react';
+import LearningForm from '../components/LearningForm.jsx';
+import ResultPanel  from '../components/ResultPanel.jsx';
+
+const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:5000/api';
+async function api(path, options) {
+  const r = await fetch(`${API_URL}${path}`, {
+    headers: { 'Content-Type': 'application/json' },
+    ...options
+  });
+  if (!r.ok) throw new Error(await r.text());
+  return r.json();
+}
+
+const THEME_COLORS = {
+  'chai-stall':    'var(--chai-color)',
+  'isro':          'var(--isro-color)',
+  'instagram':     'var(--insta-color)',
+  'food-delivery': 'var(--food-color)',
+  'ai-playlist':   'var(--playlist-color)',
+  'kota':          'var(--kota-color)',
+  'classic':       'var(--accent)',
+};
+
+const THEME_EMOJIS = {
+  'chai-stall':    '🍵',
+  'isro':          '🚀',
+  'instagram':     '📸',
+  'food-delivery': '🍕',
+  'ai-playlist':   '🎵',
+  'kota':          '📚',
+  'classic':       '⚡',
+};
+
+export default function LearnSession() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const [scenario, setScenario] = useState(null);
+  const [loading, setLoading]   = useState(true);
+  const [form, setForm]         = useState({ learnerName: 'Guest learner', reasoning: '', promptText: '', reflection: '' });
+  const [result, setResult]     = useState(null);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError]       = useState('');
+
+  useEffect(() => {
+    setLoading(true);
+    setResult(null);
+    api(`/scenarios/${id}`)
+      .then(setScenario)
+      .catch(() => navigate('/scenarios'))
+      .finally(() => setLoading(false));
+  }, [id]);
+
+  async function submit(e) {
+    e.preventDefault();
+    if (!scenario || !form.reasoning.trim()) return;
+    setSubmitting(true);
+    setError('');
+    try {
+      const res = await api('/sessions', {
+        method: 'POST',
+        body: JSON.stringify({ ...form, scenarioId: scenario._id })
+      });
+      setResult(res);
+      setForm(f => ({ ...f, reasoning: '', promptText: '', reflection: '' }));
+    } catch (err) {
+      setError(err.message || 'Something went wrong');
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="ls page-content container">
+        <div className="skeleton" style={{ height: 40, width: 200, marginBottom: 24 }} />
+        <div className="skeleton" style={{ height: 120, marginBottom: 16 }} />
+        <div className="skeleton" style={{ height: 400 }} />
+      </div>
+    );
+  }
+
+  if (!scenario) return null;
+
+  const themeColor = THEME_COLORS[scenario.theme] || 'var(--accent)';
+  const themeEmoji = THEME_EMOJIS[scenario.theme] || '⚡';
+  const DIFF_BADGE = { Beginner: 'badge-beginner', Explorer: 'badge-explorer', Builder: 'badge-builder' };
+
+  return (
+    <div className="ls page-content">
+      <div className="container">
+        {/* Back nav */}
+        <div className="ls__nav anim-fade-in">
+          <button className="btn btn-ghost btn-sm" onClick={() => navigate(-1)}>
+            <ArrowLeft size={14} /> Back
+          </button>
+          {scenario.theme !== 'classic' && (
+            <>
+              <ChevronRight size={14} style={{ color: 'var(--text-muted)' }} />
+              <Link
+                to={`/scenarios?theme=${scenario.theme}`}
+                className="ls__breadcrumb-link"
+              >
+                {themeEmoji} {scenario.caseStudyId?.replace('cs-', '').replace(/-/g, ' ')}
+              </Link>
+            </>
+          )}
+          {scenario.themeStep && (
+            <>
+              <ChevronRight size={14} style={{ color: 'var(--text-muted)' }} />
+              <span style={{ fontSize: '0.82rem', color: 'var(--text-muted)' }}>Step {scenario.themeStep}</span>
+            </>
+          )}
+        </div>
+
+        {/* Scenario header */}
+        <div className="ls__header anim-fade-up" style={{ '--sc': themeColor }}>
+          <div className="ls__header-stripe" />
+          <div className="ls__header-body">
+            <div className="ls__header-meta">
+              <span className={`badge ${DIFF_BADGE[scenario.difficulty]}`}>{scenario.difficulty}</span>
+              {scenario.concepts.map(c => (
+                <span key={c} className="ls__concept-tag">{c}</span>
+              ))}
+              {scenario.themeArc && (
+                <span className="ls__arc">{scenario.themeArc}</span>
+              )}
+            </div>
+            <h1 className="ls__title">{scenario.title}</h1>
+            <p className="ls__context">{scenario.context}</p>
+
+            {scenario.objectives?.length > 0 && (
+              <div className="ls__objectives">
+                <div className="ls__objectives-label">
+                  <Target size={13} /> Learning Objectives
+                </div>
+                <div className="ls__objectives-list">
+                  {scenario.objectives.map((obj, i) => (
+                    <span key={i} className="ls__objective">{obj}</span>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Main two-column layout */}
+        <div className="ls__grid">
+          {/* Left: form */}
+          <div className="ls__form-panel">
+            <div className="ls__panel-header">
+              <h2>Your Reasoning</h2>
+              <p>Don't look up Python yet. Reason in plain English first.</p>
+            </div>
+            {error && <div className="ls__error">{error}</div>}
+            <LearningForm
+              scenario={scenario}
+              form={form}
+              onChange={patch => setForm(f => ({ ...f, ...patch }))}
+              onSubmit={submit}
+              submitting={submitting}
+            />
+          </div>
+
+          {/* Right: result */}
+          <div className="ls__result-panel">
+            <div className="ls__panel-header">
+              <h2>AI Mentor Output</h2>
+              <p>Abstraction mapping, generated code, and prompt feedback.</p>
+            </div>
+            <ResultPanel result={result} />
+          </div>
+        </div>
+      </div>
+
+      <style>{`
+        .ls__nav {
+          display: flex; align-items: center; gap: var(--sp-2);
+          margin-bottom: var(--sp-5);
+          font-size: 0.82rem; color: var(--text-muted);
+        }
+        .ls__breadcrumb-link { color: var(--text-secondary); text-decoration: none; font-size: 0.82rem; text-transform: capitalize; }
+        .ls__breadcrumb-link:hover { color: var(--text-primary); }
+        .ls__header {
+          background: var(--bg-surface);
+          border: 1px solid var(--border);
+          border-radius: var(--r-lg);
+          overflow: hidden;
+          margin-bottom: var(--sp-6);
+        }
+        .ls__header-stripe { height: 4px; background: var(--sc); }
+        .ls__header-body { padding: var(--sp-5); }
+        .ls__header-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-3); }
+        .ls__concept-tag {
+          font-size: 0.72rem; color: var(--text-muted);
+          background: var(--bg-elevated);
+          border: 1px solid var(--border);
+          padding: 2px 8px; border-radius: var(--r-full);
+        }
+        .ls__arc {
+          font-size: 0.72rem; color: var(--sc);
+          background: color-mix(in srgb, var(--sc) 10%, transparent);
+          border: 1px solid color-mix(in srgb, var(--sc) 25%, transparent);
+          padding: 2px 10px; border-radius: var(--r-full); font-weight: 600;
+        }
+        .ls__title { font-size: 1.5rem; font-weight: 700; margin: var(--sp-2) 0; }
+        .ls__context { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.7; margin: 0 0 var(--sp-4); }
+        .ls__objectives { display: flex; flex-direction: column; gap: var(--sp-2); }
+        .ls__objectives-label { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
+        .ls__objectives-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
+        .ls__objective {
+          font-size: 0.8rem;
+          background: var(--accent-glow); border: 1px solid var(--border-accent);
+          color: var(--accent); padding: 3px 12px; border-radius: var(--r-full);
+        }
+        .ls__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-5); align-items: start; }
+        .ls__panel-header { margin-bottom: var(--sp-5); }
+        .ls__panel-header h2 { font-size: 1.1rem; margin-bottom: 4px; }
+        .ls__panel-header p { font-size: 0.82rem; color: var(--text-secondary); margin: 0; }
+        .ls__error {
+          background: rgba(244,114,182,0.08); border: 1px solid rgba(244,114,182,0.2);
+          border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-4);
+          color: var(--builder-color); font-size: 0.85rem; margin-bottom: var(--sp-4);
+        }
+        @media (max-width: 900px) {
+          .ls__grid { grid-template-columns: 1fr; }
+        }
+      `}</style>
+    </div>
+  );
+}
diff --git a/client/src/pages/Roadmap.jsx b/client/src/pages/Roadmap.jsx
new file mode 100644
index 0000000..e5d473b
--- /dev/null
+++ b/client/src/pages/Roadmap.jsx
@@ -0,0 +1,113 @@
+import React, { useEffect, useState } from 'react';
+
+const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:5000/api';
+async function api(path) {
+  const r = await fetch(`${API_URL}${path}`);
+  if (!r.ok) throw new Error(await r.text());
+  return r.json();
+}
+
+const PHASE_COLORS = ['#A8FF3E', '#3B82F6', '#EC4899', '#F97316', '#8B5CF6'];
+
+export default function Roadmap() {
+  const [roadmap, setRoadmap] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    api('/roadmap').then(setRoadmap).finally(() => setLoading(false));
+  }, []);
+
+  return (
+    <div className="rm page-content">
+      <div className="container">
+        <div className="section-label">Learning Progression</div>
+        <h1 style={{ marginBottom: 'var(--sp-2)' }}>Your Python Roadmap</h1>
+        <p style={{ marginBottom: 'var(--sp-10)' }}>
+          Five levels of Python mastery. Each level unlocks when you reach the threshold score.
+          There's no ceiling — you can always go deeper.
+        </p>
+
+        {loading ? (
+          <div className="rm__list">
+            {[...Array(5)].map((_, i) => (
+              <div key={i} className="skeleton" style={{ height: 140, borderRadius: 'var(--r-lg)' }} />
+            ))}
+          </div>
+        ) : (
+          <div className="rm__list stagger">
+            {roadmap.map((phase, idx) => {
+              const color = PHASE_COLORS[idx % PHASE_COLORS.length];
+              return (
+                <div
+                  key={phase.phase}
+                  className="rm__phase card anim-fade-up hover-lift"
+                  style={{ '--ph-color': color }}
+                >
+                  <div className="rm__phase-stripe" />
+                  <div className="rm__phase-body">
+                    <div className="rm__phase-badge">{phase.phase}</div>
+                    <div className="rm__phase-content">
+                      <h3 className="rm__phase-title">{phase.title}</h3>
+                      <p className="rm__phase-summary">{phase.summary}</p>
+                      <div className="rm__phase-items">
+                        {phase.items.map(item => (
+                          <span key={item} className="rm__phase-item">{item}</span>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+
+        {/* PyBe philosophy note */}
+        <div className="rm__footer">
+          <p>
+            <strong style={{ color: 'var(--accent)' }}>No ceiling.</strong>{' '}
+            Dennis Ritchie, the creator of C, rated himself 4–5/10 on his own language.
+            There is always more to discover. PyBe scores reflect your current depth, not your limits.
+          </p>
+        </div>
+      </div>
+
+      <style>{`
+        .rm__list { display: flex; flex-direction: column; gap: var(--sp-4); margin-bottom: var(--sp-8); }
+        .rm__phase {
+          display: flex; overflow: hidden; padding: 0;
+          border: 1px solid var(--border);
+          background: var(--bg-surface);
+        }
+        .rm__phase-stripe { width: 5px; background: var(--ph-color); flex-shrink: 0; }
+        .rm__phase-body { display: flex; gap: var(--sp-5); padding: var(--sp-5); align-items: flex-start; flex: 1; }
+        .rm__phase-badge {
+          width: 56px; height: 56px; flex-shrink: 0;
+          background: color-mix(in srgb, var(--ph-color) 10%, var(--bg-elevated));
+          border: 1px solid color-mix(in srgb, var(--ph-color) 30%, transparent);
+          border-radius: var(--r-md);
+          display: grid; place-items: center;
+          font-family: var(--font-heading);
+          font-size: 1rem; font-weight: 700;
+          color: var(--ph-color);
+        }
+        .rm__phase-content { flex: 1; }
+        .rm__phase-title { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); margin: 0 0 var(--sp-1); }
+        .rm__phase-summary { font-size: 0.875rem; color: var(--text-secondary); margin: 0 0 var(--sp-3); line-height: 1.6; }
+        .rm__phase-items { display: flex; flex-wrap: wrap; gap: 6px; }
+        .rm__phase-item {
+          font-size: 0.72rem; font-weight: 500;
+          color: var(--text-muted);
+          background: var(--bg-elevated);
+          border: 1px solid var(--border);
+          padding: 3px 10px; border-radius: var(--r-full);
+        }
+        .rm__footer {
+          background: var(--bg-surface); border: 1px solid var(--border);
+          border-radius: var(--r-lg); padding: var(--sp-5);
+        }
+        .rm__footer p { font-size: 0.9rem; color: var(--text-secondary); margin: 0; line-height: 1.7; }
+      `}</style>
+    </div>
+  );
+}
diff --git a/client/src/pages/ScenariosBrowser.jsx b/client/src/pages/ScenariosBrowser.jsx
new file mode 100644
index 0000000..fb9bec7
--- /dev/null
+++ b/client/src/pages/ScenariosBrowser.jsx
@@ -0,0 +1,192 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { Search, SlidersHorizontal, X } from 'lucide-react';
+import ScenarioCard from '../components/ScenarioCard.jsx';
+
+import { useTheme } from '../context/ThemeContext.jsx';
+
+const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:5000/api';
+async function api(path) {
+  const r = await fetch(`${API_URL}${path}`);
+  if (!r.ok) throw new Error(await r.text());
+  return r.json();
+}
+
+const THEME_LABELS = {
+  'potterheads':   '🧙‍♂️ Potterheads',
+  'marvel':        '🦾 Marvel',
+  'anime':         '⚔️ Anime',
+  'default':       '🐍 Default',
+  'chai-stall':    '🍵 Chai Stall',
+  'isro':          '🚀 ISRO Mission',
+  'instagram':     '📸 Instagram Filter',
+  'food-delivery': '🍕 Food Delivery',
+  'ai-playlist':   '🎵 AI Playlist',
+  'kota':          '📚 Kota Coaching',
+  'classic':       '⚡ Classic',
+};
+
+export default function ScenariosBrowser() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [scenarios, setScenarios] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const { dashboardTheme } = useTheme();
+
+  const q          = searchParams.get('q') || '';
+  const difficulty = searchParams.get('difficulty') || '';
+  const concept    = searchParams.get('concept') || '';
+  const theme      = searchParams.get('theme') || (dashboardTheme !== 'default' ? dashboardTheme : '');
+
+  const set = (key, val) => {
+    const next = new URLSearchParams(searchParams);
+    if (val) next.set(key, val); else next.delete(key);
+    setSearchParams(next);
+  };
+
+  const clearAll = () => setSearchParams({});
+  const hasFilters = q || difficulty || concept || theme;
+
+  useEffect(() => {
+    setLoading(true);
+    const params = new URLSearchParams();
+    if (q) params.set('q', q);
+    if (difficulty) params.set('difficulty', difficulty);
+    if (concept) params.set('concept', concept);
+    if (theme) params.set('theme', theme);
+    api(`/scenarios?${params}`)
+      .then(setScenarios)
+      .finally(() => setLoading(false));
+  }, [q, difficulty, concept, theme]);
+
+  const concepts = useMemo(() =>
+    [...new Set(scenarios.flatMap(s => s.concepts || []))].sort(), [scenarios]);
+
+  const themes = useMemo(() =>
+    [...new Set(scenarios.map(s => s.theme).filter(Boolean))], [scenarios]);
+
+  return (
+    <div className="sb page-content">
+      <div className="container">
+        {/* Header */}
+        <div className="sb__header">
+          <div>
+            <div className="section-label">Learning Library</div>
+            <h1 className="sb__title">Scenario Browser</h1>
+            <p className="sb__sub">
+              {loading ? 'Loading…' : `${scenarios.length} scenario${scenarios.length !== 1 ? 's' : ''}`}
+              {theme && ` in ${THEME_LABELS[theme] || theme}`}
+            </p>
+          </div>
+        </div>
+
+        {/* Filters bar */}
+        <div className="sb__filters">
+          <label className="sb__search">
+            <Search size={16} />
+            <input
+              id="scenario-search"
+              value={q}
+              onChange={e => set('q', e.target.value)}
+              placeholder="Search scenarios…"
+            />
+            {q && <button className="sb__clear-btn" onClick={() => set('q', '')}><X size={14} /></button>}
+          </label>
+
+          <select id="filter-difficulty" value={difficulty} onChange={e => set('difficulty', e.target.value)}>
+            <option value="">All levels</option>
+            <option>Beginner</option>
+            <option>Explorer</option>
+            <option>Builder</option>
+          </select>
+
+          <select id="filter-theme" value={theme} onChange={e => set('theme', e.target.value)}>
+            <option value="">All themes</option>
+            {Object.entries(THEME_LABELS).map(([val, label]) => (
+              <option key={val} value={val}>{label}</option>
+            ))}
+          </select>
+
+          <select id="filter-concept" value={concept} onChange={e => set('concept', e.target.value)}>
+            <option value="">All concepts</option>
+            {concepts.map(c => <option key={c}>{c}</option>)}
+          </select>
+
+          {hasFilters && (
+            <button className="btn btn-ghost btn-sm" onClick={clearAll}>
+              <X size={14} /> Clear
+            </button>
+          )}
+        </div>
+
+        {/* Active theme banner */}
+        {theme && THEME_LABELS[theme] && (
+          <div className="sb__theme-banner">
+            <span>{THEME_LABELS[theme]}</span>
+            <span className="sb__theme-banner-sub">Showing scenarios from this case study arc</span>
+            <button className="btn btn-ghost btn-sm" onClick={() => set('theme', '')}>
+              <X size={13} /> Remove filter
+            </button>
+          </div>
+        )}
+
+        {/* Grid */}
+        {loading ? (
+          <div className="sb__grid">
+            {[...Array(6)].map((_, i) => (
+              <div key={i} className="skeleton" style={{ height: 220, borderRadius: 'var(--r-lg)' }} />
+            ))}
+          </div>
+        ) : scenarios.length === 0 ? (
+          <div className="sb__empty">
+            <p>No scenarios match your filters.</p>
+            <button className="btn btn-secondary" onClick={clearAll}>Clear all filters</button>
+          </div>
+        ) : (
+          <div className="sb__grid stagger">
+            {scenarios.map(s => (
+              <ScenarioCard key={s._id} scenario={s} className="anim-fade-up" />
+            ))}
+          </div>
+        )}
+      </div>
+
+      <style>{`
+        .sb__header { margin-bottom: var(--sp-6); }
+        .sb__title { margin: var(--sp-1) 0 var(--sp-1); }
+        .sb__sub { font-size: 0.875rem; color: var(--text-muted); margin: 0; }
+        .sb__filters {
+          display: flex; flex-wrap: wrap; gap: var(--sp-2);
+          margin-bottom: var(--sp-5);
+        }
+        .sb__search {
+          display: flex; align-items: center; gap: var(--sp-2);
+          background: var(--bg-elevated); border: 1px solid var(--border);
+          border-radius: var(--r-sm); padding: 8px 12px;
+          flex: 1; min-width: 200px;
+          transition: border-color var(--t-fast);
+        }
+        .sb__search:focus-within { border-color: var(--accent-dim); }
+        .sb__search input { flex: 1; background: transparent; border: none; color: var(--text-primary); outline: none; }
+        .sb__clear-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; display: flex; padding: 0; }
+        .sb__filters select { flex-shrink: 0; }
+        .sb__theme-banner {
+          display: flex; align-items: center; gap: var(--sp-4);
+          padding: var(--sp-3) var(--sp-4);
+          background: var(--accent-glow); border: 1px solid var(--border-accent);
+          border-radius: var(--r-md); margin-bottom: var(--sp-5);
+          font-weight: 600; font-size: 0.9rem; color: var(--accent);
+        }
+        .sb__theme-banner-sub { font-size: 0.78rem; color: var(--text-secondary); font-weight: 400; flex: 1; }
+        .sb__grid {
+          display: grid;
+          grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+          gap: var(--sp-4);
+        }
+        .sb__empty {
+          display: flex; flex-direction: column; align-items: center;
+          gap: var(--sp-4); padding: var(--sp-16) 0; color: var(--text-muted);
+        }
+      `}</style>
+    </div>
+  );
+}
diff --git a/client/src/pages/auth/Login.jsx b/client/src/pages/auth/Login.jsx
new file mode 100644
index 0000000..5d6b40e
--- /dev/null
+++ b/client/src/pages/auth/Login.jsx
@@ -0,0 +1,179 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Link, useNavigate, useLocation } from 'react-router-dom';
+import { useAuth } from '../../context/AuthContext.jsx';
+import PublicNavbar from '../../components/PublicNavbar.jsx';
+import { gsap } from 'gsap';
+import { ArrowRight, Lock, Mail, Sparkles } from 'lucide-react';
+
+export default function Login() {
+  const { login, user } = useAuth();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const from = location.state?.from?.pathname || '/app';
+
+  const [form, setForm] = useState({ email: '', password: '' });
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const cardRef  = useRef(null);
+  const logoRef  = useRef(null);
+
+  useEffect(() => {
+    if (user) { navigate(from, { replace: true }); return; }
+    const tl = gsap.timeline();
+    if (logoRef.current) tl.from(logoRef.current, { y: -20, opacity: 0, duration: 0.5, ease: 'power2.out' });
+    if (cardRef.current) tl.from(cardRef.current, { y: 30, opacity: 0, duration: 0.55, ease: 'power3.out' }, '-=0.2');
+  }, [user]);
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+    try {
+      await login(form);
+      navigate(from, { replace: true });
+    } catch (err) {
+      setError(err.message);
+      gsap.from(cardRef.current, { x: -8, duration: 0.06, repeat: 4, yoyo: true, ease: 'none' });
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="auth-page">
+      <PublicNavbar />
+
+      <div className="aurora-blob aurora-blob--1" style={{ width: 400, height: 400, top: -100, left: -100 }} />
+      <div className="aurora-blob aurora-blob--2" style={{ width: 300, height: 300, bottom: -50, right: -50 }} />
+
+      <div className="auth-card" ref={cardRef}>
+        <div className="auth-brand-badge">
+          <Sparkles size={13} /> Student Portal
+        </div>
+
+        <h2>Welcome Back</h2>
+        <p className="auth-card__sub">Sign in to continue your Python discovery journey</p>
+
+        {error && <div className="auth-error">{error}</div>}
+
+        <form className="auth-form" onSubmit={handleSubmit}>
+          <div className="auth-field">
+            <label htmlFor="login-email">Email Address</label>
+            <div className="auth-input-wrap">
+              <Mail size={16} className="auth-input-icon" />
+              <input
+                id="login-email"
+                type="email"
+                required
+                autoComplete="email"
+                value={form.email}
+                onChange={e => setForm(f => ({ ...f, email: e.target.value }))}
+                placeholder="you@example.com"
+              />
+            </div>
+          </div>
+
+          <div className="auth-field">
+            <label htmlFor="login-password">Password</label>
+            <div className="auth-input-wrap">
+              <Lock size={16} className="auth-input-icon" />
+              <input
+                id="login-password"
+                type="password"
+                required
+                autoComplete="current-password"
+                value={form.password}
+                onChange={e => setForm(f => ({ ...f, password: e.target.value }))}
+                placeholder="••••••••"
+              />
+            </div>
+          </div>
+
+          <button
+            type="submit"
+            id="login-btn"
+            className="auth-submit"
+            disabled={loading}
+          >
+            {loading ? <span className="auth-spinner" /> : <>Sign In <ArrowRight size={16} /></>}
+          </button>
+        </form>
+
+        <p className="auth-switch">
+          Don't have an account?{' '}
+          <Link to="/signup">Create one free</Link>
+        </p>
+      </div>
+
+      <style>{`
+        .auth-page {
+          min-height: 100vh;
+          display: flex; flex-direction: column;
+          align-items: center; justify-content: center;
+          padding: calc(var(--navbar-h) + 24px) 24px 40px;
+          position: relative; overflow: hidden;
+        }
+        .auth-brand-badge {
+          display: inline-flex; align-items: center; gap: 6px;
+          font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
+          letter-spacing: 0.08em; color: var(--accent);
+          background: var(--accent-glow); border: 1px solid var(--border-accent);
+          padding: 4px 12px; border-radius: 20px; margin-bottom: 16px;
+        }
+        .auth-card {
+          width: 100%; max-width: 420px;
+          background: var(--bg-glass);
+          border: 1px solid var(--border);
+          border-radius: 20px; padding: 36px;
+          backdrop-filter: blur(20px);
+          -webkit-backdrop-filter: blur(20px);
+          box-shadow: var(--shadow-lg); z-index: 1;
+        }
+        [data-theme="light"] .auth-card {
+          background: rgba(255, 255, 255, 0.92);
+        }
+        .auth-card h2 { font-size: 1.65rem; font-weight: 800; margin-bottom: 6px; color: var(--text-primary); }
+        .auth-card__sub { font-size: 0.875rem; color: var(--text-muted); margin: 0 0 24px; }
+        .auth-error {
+          background: rgba(244,114,182,0.12); border: 1px solid rgba(244,114,182,0.3);
+          color: #E11D48; border-radius: 10px; padding: 12px 16px;
+          font-size: 0.85rem; margin-bottom: 20px; font-weight: 500;
+        }
+        .auth-form { display: flex; flex-direction: column; gap: 18px; }
+        .auth-field { display: flex; flex-direction: column; gap: 7px; }
+        .auth-field label { font-size: 0.83rem; font-weight: 600; color: var(--text-secondary); }
+        .auth-input-wrap { position: relative; display: flex; align-items: center; }
+        .auth-input-icon { position: absolute; left: 14px; color: var(--text-muted); pointer-events: none; }
+        .auth-field input {
+          width: 100%;
+          background: var(--bg-elevated); border: 1px solid var(--border);
+          border-radius: 10px; padding: 12px 16px 12px 42px; font-size: 0.95rem;
+          color: var(--text-primary); transition: border-color 0.2s, box-shadow 0.2s;
+        }
+        .auth-field input:focus {
+          border-color: var(--accent-dim); box-shadow: 0 0 0 3px var(--accent-glow); outline: none;
+        }
+        .auth-submit {
+          margin-top: 6px; padding: 14px;
+          background: var(--accent); color: #0D1117;
+          border: none; border-radius: 10px;
+          font-size: 0.95rem; font-weight: 700; cursor: pointer;
+          transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
+          display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
+        }
+        [data-theme="light"] .auth-submit { color: #ffffff; background: #15803D; }
+        .auth-submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-glow); }
+        .auth-submit:disabled { opacity: 0.6; cursor: not-allowed; }
+        .auth-spinner {
+          width: 20px; height: 20px;
+          border: 2px solid rgba(255,255,255,0.3); border-top-color: #ffffff;
+          border-radius: 50%; animation: spin 0.7s linear infinite;
+        }
+        .auth-switch { text-align: center; margin: 24px 0 0; font-size: 0.85rem; color: var(--text-muted); }
+        .auth-switch a { color: var(--accent); font-weight: 600; text-decoration: none; }
+        .auth-switch a:hover { text-decoration: underline; }
+      `}</style>
+    </div>
+  );
+}
diff --git a/client/src/pages/auth/Signup.jsx b/client/src/pages/auth/Signup.jsx
new file mode 100644
index 0000000..3b3a8b9
--- /dev/null
+++ b/client/src/pages/auth/Signup.jsx
@@ -0,0 +1,199 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useAuth } from '../../context/AuthContext.jsx';
+import PublicNavbar from '../../components/PublicNavbar.jsx';
+import { gsap } from 'gsap';
+import { ArrowRight, Lock, Mail, User, Sparkles } from 'lucide-react';
+
+export default function Signup() {
+  const { signup, user } = useAuth();
+  const navigate = useNavigate();
+
+  const [form, setForm] = useState({ name: '', email: '', password: '' });
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const cardRef = useRef(null);
+
+  useEffect(() => {
+    if (user) { navigate('/app', { replace: true }); return; }
+    if (cardRef.current) gsap.from(cardRef.current, { y: 30, opacity: 0, duration: 0.55, ease: 'power3.out' });
+  }, [user]);
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    if (form.name.trim().length < 2) { setError('Please enter your full name.'); return; }
+    if (form.password.length < 6)    { setError('Password must be at least 6 characters.'); return; }
+    setError('');
+    setLoading(true);
+    try {
+      await signup(form);
+      navigate('/app', { replace: true });
+    } catch (err) {
+      setError(err.message);
+      gsap.from(cardRef.current, { x: -8, duration: 0.06, repeat: 4, yoyo: true, ease: 'none' });
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="auth-page">
+      <PublicNavbar />
+
+      <div className="aurora-blob aurora-blob--1" style={{ width: 400, height: 400, top: -100, left: -100 }} />
+      <div className="aurora-blob aurora-blob--2" style={{ width: 300, height: 300, bottom: -50, right: -50 }} />
+
+      <div className="auth-card" ref={cardRef}>
+        <div className="auth-brand-badge">
+          <Sparkles size={13} /> Free Student Account
+        </div>
+
+        <h2>Join PyBe Free</h2>
+        <p className="auth-card__sub">Start learning Python through discovery & first-principles</p>
+
+        {error && <div className="auth-error">{error}</div>}
+
+        <form className="auth-form" onSubmit={handleSubmit}>
+          <div className="auth-field">
+            <label htmlFor="signup-name">Your Full Name</label>
+            <div className="auth-input-wrap">
+              <User size={16} className="auth-input-icon" />
+              <input
+                id="signup-name"
+                type="text"
+                required
+                autoComplete="name"
+                value={form.name}
+                onChange={e => setForm(f => ({ ...f, name: e.target.value }))}
+                placeholder="Ramu Kumar"
+              />
+            </div>
+          </div>
+
+          <div className="auth-field">
+            <label htmlFor="signup-email">Email Address</label>
+            <div className="auth-input-wrap">
+              <Mail size={16} className="auth-input-icon" />
+              <input
+                id="signup-email"
+                type="email"
+                required
+                autoComplete="email"
+                value={form.email}
+                onChange={e => setForm(f => ({ ...f, email: e.target.value }))}
+                placeholder="you@example.com"
+              />
+            </div>
+          </div>
+
+          <div className="auth-field">
+            <label htmlFor="signup-password">
+              Password
+              <span className="auth-field__hint">at least 6 characters</span>
+            </label>
+            <div className="auth-input-wrap">
+              <Lock size={16} className="auth-input-icon" />
+              <input
+                id="signup-password"
+                type="password"
+                required
+                autoComplete="new-password"
+                value={form.password}
+                onChange={e => setForm(f => ({ ...f, password: e.target.value }))}
+                placeholder="••••••••"
+              />
+            </div>
+          </div>
+
+          <button
+            type="submit"
+            id="signup-btn"
+            className="auth-submit"
+            disabled={loading}
+          >
+            {loading ? <span className="auth-spinner" /> : <>Create Free Account <ArrowRight size={16} /></>}
+          </button>
+        </form>
+
+        <p className="auth-switch">
+          Already have an account?{' '}
+          <Link to="/login">Sign in</Link>
+        </p>
+      </div>
+
+      <style>{`
+        .auth-page {
+          min-height: 100vh;
+          display: flex; flex-direction: column;
+          align-items: center; justify-content: center;
+          padding: calc(var(--navbar-h) + 24px) 24px 40px;
+          position: relative; overflow: hidden;
+        }
+        .auth-brand-badge {
+          display: inline-flex; align-items: center; gap: 6px;
+          font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
+          letter-spacing: 0.08em; color: var(--accent);
+          background: var(--accent-glow); border: 1px solid var(--border-accent);
+          padding: 4px 12px; border-radius: 20px; margin-bottom: 16px;
+        }
+        .auth-card {
+          width: 100%; max-width: 420px;
+          background: var(--bg-glass);
+          border: 1px solid var(--border);
+          border-radius: 20px; padding: 36px;
+          backdrop-filter: blur(20px);
+          -webkit-backdrop-filter: blur(20px);
+          box-shadow: var(--shadow-lg); z-index: 1;
+        }
+        [data-theme="light"] .auth-card {
+          background: rgba(255, 255, 255, 0.92);
+        }
+        .auth-card h2 { font-size: 1.65rem; font-weight: 800; margin-bottom: 6px; color: var(--text-primary); }
+        .auth-card__sub { font-size: 0.875rem; color: var(--text-muted); margin: 0 0 24px; }
+        .auth-error {
+          background: rgba(244,114,182,0.12); border: 1px solid rgba(244,114,182,0.3);
+          color: #E11D48; border-radius: 10px; padding: 12px 16px;
+          font-size: 0.85rem; margin-bottom: 20px; font-weight: 500;
+        }
+        .auth-form { display: flex; flex-direction: column; gap: 16px; }
+        .auth-field { display: flex; flex-direction: column; gap: 7px; }
+        .auth-field label {
+          font-size: 0.83rem; font-weight: 600; color: var(--text-secondary);
+          display: flex; align-items: center; justify-content: space-between;
+        }
+        .auth-field__hint { font-weight: 400; color: var(--text-muted); font-size: 0.75rem; }
+        .auth-input-wrap { position: relative; display: flex; align-items: center; }
+        .auth-input-icon { position: absolute; left: 14px; color: var(--text-muted); pointer-events: none; }
+        .auth-field input {
+          width: 100%;
+          background: var(--bg-elevated); border: 1px solid var(--border);
+          border-radius: 10px; padding: 12px 16px 12px 42px; font-size: 0.95rem;
+          color: var(--text-primary); transition: border-color 0.2s, box-shadow 0.2s;
+        }
+        .auth-field input:focus {
+          border-color: var(--accent-dim); box-shadow: 0 0 0 3px var(--accent-glow); outline: none;
+        }
+        .auth-submit {
+          margin-top: 6px; padding: 14px;
+          background: var(--accent); color: #0D1117;
+          border: none; border-radius: 10px;
+          font-size: 0.95rem; font-weight: 700; cursor: pointer;
+          transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
+          display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
+        }
+        [data-theme="light"] .auth-submit { color: #ffffff; background: #15803D; }
+        .auth-submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-glow); }
+        .auth-submit:disabled { opacity: 0.6; cursor: not-allowed; }
+        .auth-spinner {
+          width: 20px; height: 20px;
+          border: 2px solid rgba(255,255,255,0.3); border-top-color: #ffffff;
+          border-radius: 50%; animation: spin 0.7s linear infinite;
+        }
+        .auth-switch { text-align: center; margin: 24px 0 0; font-size: 0.85rem; color: var(--text-muted); }
+        .auth-switch a { color: var(--accent); font-weight: 600; text-decoration: none; }
+        .auth-switch a:hover { text-decoration: underline; }
+      `}</style>
+    </div>
+  );
+}
diff --git a/client/src/styles/animations.css b/client/src/styles/animations.css
new file mode 100644
index 0000000..180a3cf
--- /dev/null
+++ b/client/src/styles/animations.css
@@ -0,0 +1,106 @@
+/* ═══════════════════════════════════════════════════════════
+   PyBe v2.0 — Animations & Micro-interactions
+═══════════════════════════════════════════════════════════ */
+
+/* ── Fade in up ───────────────────────────────────────────── */
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(24px); }
+  to   { opacity: 1; transform: translateY(0);    }
+}
+
+/* ── Fade in ──────────────────────────────────────────────── */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+/* ── Scale in ─────────────────────────────────────────────── */
+@keyframes scaleIn {
+  from { opacity: 0; transform: scale(0.92); }
+  to   { opacity: 1; transform: scale(1);    }
+}
+
+/* ── Slide in from left ───────────────────────────────────── */
+@keyframes slideInLeft {
+  from { opacity: 0; transform: translateX(-20px); }
+  to   { opacity: 1; transform: translateX(0);     }
+}
+
+/* ── Glow pulse ───────────────────────────────────────────── */
+@keyframes glowPulse {
+  0%, 100% { box-shadow: 0 0 20px rgba(168, 255, 62, 0.1); }
+  50%       { box-shadow: 0 0 40px rgba(168, 255, 62, 0.25), 0 0 80px rgba(168, 255, 62, 0.08); }
+}
+
+/* ── Float ────────────────────────────────────────────────── */
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50%       { transform: translateY(-8px); }
+}
+
+/* ── Spin slow ────────────────────────────────────────────── */
+@keyframes spinSlow {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+
+/* ── Counter tick ─────────────────────────────────────────── */
+@keyframes countUp {
+  from { transform: translateY(8px); opacity: 0; }
+  to   { transform: translateY(0);   opacity: 1; }
+}
+
+/* ── Progress bar fill ────────────────────────────────────── */
+@keyframes fillBar {
+  from { width: 0; }
+  to   { width: var(--fill-width, 50%); }
+}
+
+/* ── Unlock vault ─────────────────────────────────────────── */
+@keyframes vaultUnlock {
+  0%   { transform: scale(1) rotate(0deg);   filter: brightness(1); }
+  30%  { transform: scale(1.1) rotate(-3deg); filter: brightness(1.3); }
+  60%  { transform: scale(1.1) rotate(3deg);  filter: brightness(1.5); }
+  100% { transform: scale(1) rotate(0deg);   filter: brightness(1.2); }
+}
+
+/* ── Shimmer (used on skeleton) ───────────────────────────── */
+@keyframes shimmer {
+  0%   { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+/* ── Stagger utility classes ──────────────────────────────── */
+.anim-fade-up   { animation: fadeInUp 0.5s cubic-bezier(0.4,0,0.2,1) both; }
+.anim-fade-in   { animation: fadeIn   0.4s ease both; }
+.anim-scale-in  { animation: scaleIn  0.35s cubic-bezier(0.4,0,0.2,1) both; }
+.anim-float     { animation: float 3s ease-in-out infinite; }
+.anim-glow      { animation: glowPulse 2.5s ease-in-out infinite; }
+
+/* Stagger children */
+.stagger > *:nth-child(1)  { animation-delay: 0ms; }
+.stagger > *:nth-child(2)  { animation-delay: 60ms; }
+.stagger > *:nth-child(3)  { animation-delay: 120ms; }
+.stagger > *:nth-child(4)  { animation-delay: 180ms; }
+.stagger > *:nth-child(5)  { animation-delay: 240ms; }
+.stagger > *:nth-child(6)  { animation-delay: 300ms; }
+.stagger > *:nth-child(7)  { animation-delay: 360ms; }
+.stagger > *:nth-child(8)  { animation-delay: 420ms; }
+
+/* ── Hover lift ───────────────────────────────────────────── */
+.hover-lift {
+  transition: transform 0.25s ease, box-shadow 0.25s ease;
+}
+.hover-lift:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
+}
+
+/* ── Card hover glow ──────────────────────────────────────── */
+.hover-glow {
+  transition: box-shadow 0.3s ease, border-color 0.3s ease;
+}
+.hover-glow:hover {
+  box-shadow: 0 0 0 1px var(--accent-dim), 0 8px 32px rgba(168,255,62,0.1);
+  border-color: var(--border-accent);
+}
diff --git a/client/src/styles/index.css b/client/src/styles/index.css
new file mode 100644
index 0000000..12abd0c
--- /dev/null
+++ b/client/src/styles/index.css
@@ -0,0 +1,522 @@
+/* ═══════════════════════════════════════════════════════════
+   PyBe v2.1 — Global Design System
+   Dark-first · Light mode · Space Grotesk + Inter · GSAP
+═══════════════════════════════════════════════════════════ */
+
+/* ── Dark Mode (default) ──────────────────────────────────── */
+:root {
+  --bg-base:        #0D1117;
+  --bg-surface:     #161B22;
+  --bg-elevated:    #1C2129;
+  --bg-glass:       rgba(22, 27, 34, 0.75);
+  --bg-glass-light: rgba(255, 255, 255, 0.04);
+
+  --accent:         #A8FF3E;
+  --accent-dim:     #7BC92E;
+  --accent-dark:    #3D7A00;
+  --accent-glow:    rgba(168, 255, 62, 0.15);
+  --accent-glow-md: rgba(168, 255, 62, 0.28);
+
+  --chai-color:     #F59E0B;
+  --isro-color:     #3B82F6;
+  --insta-color:    #EC4899;
+  --food-color:     #F97316;
+  --playlist-color: #8B5CF6;
+  --kota-color:     #10B981;
+
+  --beginner-color:  #34D399;
+  --explorer-color:  #60A5FA;
+  --builder-color:   #F472B6;
+
+  --text-primary:   #E6EDF3;
+  --text-secondary: #8B949E;
+  --text-muted:     #6E7681;
+  --text-accent:    #A8FF3E;
+
+  --border:         rgba(255, 255, 255, 0.08);
+  --border-hover:   rgba(255, 255, 255, 0.16);
+  --border-accent:  rgba(168, 255, 62, 0.3);
+
+  --shadow-sm:   0 1px 3px rgba(0,0,0,0.4);
+  --shadow-md:   0 4px 16px rgba(0,0,0,0.5);
+  --shadow-lg:   0 8px 32px rgba(0,0,0,0.6);
+  --shadow-glow: 0 0 32px rgba(168, 255, 62, 0.14);
+
+  --sidebar-bg:     #0F1318;
+  --sidebar-border: rgba(255,255,255,0.06);
+
+  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-full:9999px;
+  --t-fast:150ms ease; --t-base:250ms ease; --t-slow:400ms cubic-bezier(0.4,0,0.2,1);
+
+  --font-heading: 'Space Grotesk', sans-serif;
+  --font-body:    'Inter', sans-serif;
+  --font-mono:    'JetBrains Mono', monospace;
+
+  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;
+  --sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;
+  --navbar-h:64px;
+
+  --aurora-1: rgba(168,255,62,0.12);
+  --aurora-2: rgba(59,130,246,0.10);
+  --aurora-3: rgba(139,92,246,0.08);
+  --dot-color: rgba(255,255,255,0.055);
+}
+
+/* ── Light Mode ───────────────────────────────────────────── */
+[data-theme="light"] {
+  --bg-base:        #F8FAFC;
+  --bg-surface:     #FFFFFF;
+  --bg-elevated:    #F1F5F9;
+  --bg-glass:       rgba(255,255,255,0.85);
+  --bg-glass-light: rgba(0,0,0,0.03);
+
+  --accent:         #15803D;
+  --accent-dim:     #166534;
+  --accent-dark:    #14532D;
+  --accent-glow:    rgba(21,128,61,0.12);
+  --accent-glow-md: rgba(21,128,61,0.22);
+
+  --text-primary:   #0F172A;
+  --text-secondary: #334155;
+  --text-muted:     #64748B;
+  --text-accent:    #15803D;
+
+  --border:         rgba(0,0,0,0.1);
+  --border-hover:   rgba(0,0,0,0.2);
+  --border-accent:  rgba(21,128,61,0.35);
+
+  --shadow-sm:   0 1px 3px rgba(0,0,0,0.06);
+  --shadow-md:   0 4px 16px rgba(0,0,0,0.08);
+  --shadow-lg:   0 8px 32px rgba(0,0,0,0.12);
+  --shadow-glow: 0 0 28px rgba(21,128,61,0.12);
+
+  --sidebar-bg:     #FFFFFF;
+  --sidebar-border: rgba(0,0,0,0.08);
+
+  --beginner-color:  #047857;
+  --explorer-color:  #1D4ED8;
+  --builder-color:   #BE185D;
+
+  --aurora-1: rgba(21,128,61,0.08);
+  --aurora-2: rgba(37,99,235,0.07);
+  --aurora-3: rgba(124,58,237,0.06);
+  --dot-color: rgba(0,0,0,0.06);
+}
+
+/* ── Potterheads Theme (Magical Hogwarts) ────────────────────── */
+[data-dashboard-theme="potterheads"] {
+  --bg-base:        #120D1A;
+  --bg-surface:     #1C1329;
+  --bg-elevated:    #261A38;
+  --bg-glass:       rgba(28, 19, 41, 0.85);
+  --bg-glass-light: rgba(245, 158, 11, 0.07);
+
+  --accent:         #F59E0B;
+  --accent-dim:     #D97706;
+  --accent-dark:    #92400E;
+  --accent-glow:    rgba(245, 158, 11, 0.2);
+  --accent-glow-md: rgba(245, 158, 11, 0.35);
+
+  --text-primary:   #FDF6E3;
+  --text-secondary: #E4D5B7;
+  --text-muted:     #9CA3AF;
+  --text-accent:    #F59E0B;
+
+  --border:         rgba(245, 158, 11, 0.2);
+  --border-hover:   rgba(245, 158, 11, 0.4);
+  --border-accent:  rgba(245, 158, 11, 0.6);
+
+  --sidebar-bg:     #0D0814;
+  --sidebar-border: rgba(245, 158, 11, 0.18);
+
+  --shadow-glow:    0 0 32px rgba(245, 158, 11, 0.25);
+  --aurora-1:       rgba(245, 158, 11, 0.18);
+  --aurora-2:       rgba(168, 85, 247, 0.15);
+  --aurora-3:       rgba(236, 72, 153, 0.12);
+  --dot-color:      rgba(245, 158, 11, 0.08);
+}
+
+[data-theme="light"][data-dashboard-theme="potterheads"] {
+  --bg-base:        #FAF4E8;
+  --bg-surface:     #FFFDF9;
+  --bg-elevated:    #F5EBD9;
+  --bg-glass:       rgba(255, 253, 249, 0.9);
+  --bg-glass-light: rgba(180, 83, 9, 0.05);
+
+  --accent:         #B45309;
+  --accent-dim:     #92400E;
+  --accent-dark:    #78350F;
+  --accent-glow:    rgba(180, 83, 9, 0.14);
+  --accent-glow-md: rgba(180, 83, 9, 0.28);
+
+  --text-primary:   #291E16;
+  --text-secondary: #524033;
+  --text-muted:     #786455;
+  --text-accent:    #B45309;
+
+  --border:         rgba(180, 83, 9, 0.18);
+  --border-hover:   rgba(180, 83, 9, 0.38);
+  --border-accent:  rgba(180, 83, 9, 0.55);
+
+  --sidebar-bg:     #F5EBD9;
+  --sidebar-border: rgba(180, 83, 9, 0.16);
+
+  --shadow-glow:    0 0 28px rgba(180, 83, 9, 0.15);
+  --aurora-1:       rgba(245, 158, 11, 0.1);
+  --aurora-2:       rgba(168, 85, 247, 0.06);
+  --aurora-3:       rgba(236, 72, 153, 0.06);
+  --dot-color:      rgba(180, 83, 9, 0.07);
+}
+
+/* ── Marvel Theme (Hero Tech & Cosmic) ───────────────────────── */
+[data-dashboard-theme="marvel"] {
+  --bg-base:        #0A0E17;
+  --bg-surface:     #121824;
+  --bg-elevated:    #1B2436;
+  --bg-glass:       rgba(18, 24, 36, 0.85);
+  --bg-glass-light: rgba(0, 240, 255, 0.06);
+
+  --accent:         #EF4444;
+  --accent-dim:     #DC2626;
+  --accent-dark:    #991B1B;
+  --accent-glow:    rgba(239, 68, 68, 0.25);
+  --accent-glow-md: rgba(239, 68, 68, 0.4);
+
+  --text-primary:   #F8FAFC;
+  --text-secondary: #CBD5E1;
+  --text-muted:     #94A3B8;
+  --text-accent:    #38BDF8;
+
+  --border:         rgba(56, 189, 248, 0.22);
+  --border-hover:   rgba(239, 68, 68, 0.45);
+  --border-accent:  rgba(239, 68, 68, 0.65);
+
+  --sidebar-bg:     #070A10;
+  --sidebar-border: rgba(56, 189, 248, 0.18);
+
+  --shadow-glow:    0 0 32px rgba(239, 68, 68, 0.25);
+  --aurora-1:       rgba(239, 68, 68, 0.18);
+  --aurora-2:       rgba(56, 189, 248, 0.18);
+  --aurora-3:       rgba(234, 179, 8, 0.15);
+  --dot-color:      rgba(56, 189, 248, 0.08);
+}
+
+[data-theme="light"][data-dashboard-theme="marvel"] {
+  --bg-base:        #F1F5F9;
+  --bg-surface:     #FFFFFF;
+  --bg-elevated:    #E2E8F0;
+  --bg-glass:       rgba(255, 255, 255, 0.92);
+  --bg-glass-light: rgba(220, 38, 38, 0.05);
+
+  --accent:         #DC2626;
+  --accent-dim:     #B91C1C;
+  --accent-dark:    #991B1B;
+  --accent-glow:    rgba(220, 38, 38, 0.15);
+  --accent-glow-md: rgba(220, 38, 38, 0.28);
+
+  --text-primary:   #0F172A;
+  --text-secondary: #334155;
+  --text-muted:     #64748B;
+  --text-accent:    #0284C7;
+
+  --border:         rgba(220, 38, 38, 0.18);
+  --border-hover:   rgba(220, 38, 38, 0.38);
+  --border-accent:  rgba(220, 38, 38, 0.55);
+
+  --sidebar-bg:     #F8FAFC;
+  --sidebar-border: rgba(220, 38, 38, 0.14);
+
+  --shadow-glow:    0 0 28px rgba(220, 38, 38, 0.15);
+  --aurora-1:       rgba(220, 38, 38, 0.09);
+  --aurora-2:       rgba(2, 132, 199, 0.09);
+  --aurora-3:       rgba(202, 138, 4, 0.09);
+  --dot-color:      rgba(220, 38, 38, 0.06);
+}
+
+/* ── Anime Theme (Cyber Neon Tokyo) ─────────────────────────── */
+[data-dashboard-theme="anime"] {
+  --bg-base:        #0D0914;
+  --bg-surface:     #171024;
+  --bg-elevated:    #221836;
+  --bg-glass:       rgba(23, 16, 36, 0.85);
+  --bg-glass-light: rgba(255, 42, 133, 0.08);
+
+  --accent:         #FF2A85;
+  --accent-dim:     #E01A6F;
+  --accent-dark:    #990D49;
+  --accent-glow:    rgba(255, 42, 133, 0.25);
+  --accent-glow-md: rgba(255, 42, 133, 0.42);
+
+  --text-primary:   #FDEDF6;
+  --text-secondary: #E0C3FC;
+  --text-muted:     #A78BFA;
+  --text-accent:    #00F5D4;
+
+  --border:         rgba(255, 42, 133, 0.25);
+  --border-hover:   rgba(0, 245, 212, 0.5);
+  --border-accent:  rgba(255, 42, 133, 0.65);
+
+  --sidebar-bg:     #08050D;
+  --sidebar-border: rgba(255, 42, 133, 0.2);
+
+  --shadow-glow:    0 0 32px rgba(255, 42, 133, 0.28);
+  --aurora-1:       rgba(255, 42, 133, 0.2);
+  --aurora-2:       rgba(0, 245, 212, 0.18);
+  --aurora-3:       rgba(168, 85, 247, 0.18);
+  --dot-color:      rgba(255, 42, 133, 0.09);
+}
+
+[data-theme="light"][data-dashboard-theme="anime"] {
+  --bg-base:        #FAF5FF;
+  --bg-surface:     #FFFFFF;
+  --bg-elevated:    #F3E8FF;
+  --bg-glass:       rgba(255, 255, 255, 0.92);
+  --bg-glass-light: rgba(217, 70, 239, 0.06);
+
+  --accent:         #C026D3;
+  --accent-dim:     #A21CAF;
+  --accent-dark:    #86198F;
+  --accent-glow:    rgba(192, 38, 211, 0.16);
+  --accent-glow-md: rgba(192, 38, 211, 0.3);
+
+  --text-primary:   #1E1B4B;
+  --text-secondary: #4338CA;
+  --text-muted:     #6B21A8;
+  --text-accent:    #0891B2;
+
+  --border:         rgba(192, 38, 211, 0.2);
+  --border-hover:   rgba(192, 38, 211, 0.4);
+  --border-accent:  rgba(192, 38, 211, 0.6);
+
+  --sidebar-bg:     #FDF4FF;
+  --sidebar-border: rgba(192, 38, 211, 0.15);
+
+  --shadow-glow:    0 0 28px rgba(192, 38, 211, 0.16);
+  --aurora-1:       rgba(192, 38, 211, 0.09);
+  --aurora-2:       rgba(8, 145, 178, 0.09);
+  --aurora-3:       rgba(147, 51, 234, 0.09);
+  --dot-color:      rgba(192, 38, 211, 0.07);
+}
+
+/* ── Reset & Layout ───────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+html {
+  scroll-behavior: smooth;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font-family: var(--font-body);
+  font-size: 15px; line-height: 1.6;
+  color: var(--text-primary);
+  background-color: var(--bg-base);
+  min-height: 100vh;
+  transition: background-color 0.25s ease, color 0.25s ease;
+}
+
+/* Dot grid overlay */
+body::before {
+  content: '';
+  position: fixed; inset: 0;
+  background-image: radial-gradient(circle, var(--dot-color) 1.2px, transparent 1.2px);
+  background-size: 24px 24px;
+  pointer-events: none;
+  z-index: 0;
+}
+
+#root { position: relative; z-index: 1; }
+
+/* ── Keyframes ────────────────────────────────────────────── */
+@keyframes aurora-drift {
+  0%,100% { transform: translate(0,0) scale(1) rotate(0deg); }
+  33%     { transform: translate(40px,-30px) scale(1.15) rotate(10deg); }
+  66%     { transform: translate(-25px,25px) scale(0.92) rotate(-8deg); }
+}
+@keyframes aurora-drift-2 {
+  0%,100% { transform: translate(0,0) scale(1); }
+  40%     { transform: translate(-35px,20px) scale(1.1); }
+  70%     { transform: translate(30px,-25px) scale(0.95); }
+}
+@keyframes float-up {
+  0%,100% { transform: translateY(0); }
+  50%     { transform: translateY(-8px); }
+}
+@keyframes shimmer-text {
+  0%   { background-position: -200% center; }
+  100% { background-position:  200% center; }
+}
+@keyframes spin    { to { transform: rotate(360deg); } }
+@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
+@keyframes pageIn  { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
+@keyframes fade-in-up { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
+@keyframes glow-pulse {
+  0%,100% { box-shadow: 0 0 20px var(--accent-glow); }
+  50%     { box-shadow: 0 0 40px var(--accent-glow-md); }
+}
+@keyframes emoji-float {
+  0%,100% { transform: translateY(0) rotate(-2deg); }
+  50%     { transform: translateY(-8px) rotate(2deg); }
+}
+
+/* ── Aurora blob util ─────────────────────────────────────── */
+.aurora-blob {
+  position: absolute; border-radius: 50%;
+  filter: blur(72px); pointer-events: none;
+}
+.aurora-blob--1 { background: var(--aurora-1); animation: aurora-drift   10s ease-in-out infinite; }
+.aurora-blob--2 { background: var(--aurora-2); animation: aurora-drift-2  8s ease-in-out infinite; }
+.aurora-blob--3 { background: var(--aurora-3); animation: aurora-drift   12s ease-in-out infinite reverse; }
+
+/* ── Shimmer text util (FIXED FOR LIGHT MODE) ─────────────── */
+.shimmer-text {
+  background-image: linear-gradient(90deg,
+    var(--accent) 0%, #5BFFB0 25%,
+    var(--text-primary) 50%, var(--accent) 75%, #5BFFB0 100%
+  );
+  background-size: 200% auto;
+  -webkit-background-clip: text !important;
+  -webkit-text-fill-color: transparent !important;
+  background-clip: text !important;
+  color: transparent !important;
+  display: inline-block;
+  animation: shimmer-text 5s linear infinite;
+}
+[data-theme="light"] .shimmer-text {
+  background-image: linear-gradient(90deg,
+    #15803D 0%, #0284C7 25%,
+    #0F172A 50%, #15803D 75%, #0284C7 100%
+  );
+  background-size: 200% auto;
+  -webkit-background-clip: text !important;
+  -webkit-text-fill-color: transparent !important;
+  background-clip: text !important;
+  color: transparent !important;
+  display: inline-block;
+  animation: shimmer-text 5s linear infinite;
+}
+
+/* ── Glow card util ───────────────────────────────────────── */
+.glow-card {
+  position: relative; border-radius: var(--r-lg);
+  background: var(--bg-glass); border: 1px solid var(--border);
+  backdrop-filter: blur(12px);
+  transition: border-color 0.3s, box-shadow 0.3s, transform 0.2s;
+}
+.glow-card:hover {
+  border-color: var(--border-accent);
+  box-shadow: 0 0 0 1px var(--accent-glow), var(--shadow-glow);
+  transform: translateY(-2px);
+}
+
+/* ── Float util ───────────────────────────────────────────── */
+.float { animation: float-up 3s ease-in-out infinite; }
+
+/* ── Typography ───────────────────────────────────────────── */
+h1,h2,h3,h4,h5,h6 {
+  font-family: var(--font-heading); font-weight: 600;
+  line-height: 1.2; color: var(--text-primary);
+  transition: color 0.25s ease;
+}
+h1 { font-size: clamp(2rem,5vw,3.5rem); font-weight: 700; }
+h2 { font-size: clamp(1.4rem,3vw,2rem); }
+h3 { font-size: 1.2rem; }
+
+p { color: var(--text-secondary); line-height: 1.7; transition: color 0.25s ease; }
+a { color: var(--accent); text-decoration: none; transition: opacity var(--t-fast); }
+a:hover { opacity: 0.8; }
+code { font-family: var(--font-mono); font-size: 0.88em; color: var(--accent); }
+pre  { font-family: var(--font-mono); }
+
+/* ── Forms ────────────────────────────────────────────────── */
+button, input, textarea, select { font: inherit; }
+input, textarea, select {
+  background: var(--bg-elevated); border: 1px solid var(--border);
+  border-radius: var(--r-sm); color: var(--text-primary);
+  padding: var(--sp-3) var(--sp-4); outline: none;
+  transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color 0.25s;
+}
+input:focus, textarea:focus, select:focus {
+  border-color: var(--accent-dim); box-shadow: 0 0 0 3px var(--accent-glow);
+}
+textarea { resize: vertical; min-height: 110px; width: 100%; line-height: 1.6; }
+select option { background: var(--bg-elevated); color: var(--text-primary); }
+::placeholder { color: var(--text-muted); }
+
+/* ── Buttons ──────────────────────────────────────────────── */
+.btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
+  padding: 10px 20px; border-radius: var(--r-sm); border: 1px solid transparent;
+  font-weight: 600; font-size: 0.9rem; cursor: pointer;
+  transition: all var(--t-base); white-space: nowrap; text-decoration: none;
+}
+.btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.btn-primary { background: var(--accent); color: #0D1117; border-color: var(--accent); }
+.btn-primary:hover:not(:disabled) { background: var(--accent-dim); box-shadow: var(--shadow-glow); transform: translateY(-1px); }
+[data-theme="light"] .btn-primary { color: #ffffff; background: #15803D; border-color: #15803D; }
+[data-theme="light"] .btn-primary:hover:not(:disabled) { background: #166534; }
+
+.btn-secondary { background: var(--bg-glass-light); color: var(--text-primary); border-color: var(--border); backdrop-filter: blur(8px); }
+.btn-secondary:hover:not(:disabled) { border-color: var(--border-hover); background: rgba(255,255,255,0.08); }
+[data-theme="light"] .btn-secondary:hover:not(:disabled) { background: rgba(0,0,0,0.05); }
+
+.btn-ghost { background: transparent; color: var(--text-secondary); border-color: transparent; }
+.btn-ghost:hover:not(:disabled) { color: var(--text-primary); background: var(--bg-glass-light); }
+.btn-sm { padding: 6px 14px; font-size: 0.82rem; }
+.btn-lg { padding: 14px 28px; font-size: 1rem; }
+
+/* ── Glass card ───────────────────────────────────────────── */
+.card {
+  background: var(--bg-glass); border: 1px solid var(--border);
+  border-radius: var(--r-lg); backdrop-filter: blur(12px);
+  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
+}
+.card:hover { border-color: var(--border-hover); }
+
+/* ── Badge ────────────────────────────────────────────────── */
+.badge {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 3px 10px; border-radius: var(--r-full);
+  font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
+}
+.badge-beginner { background: rgba(52,211,153,0.15); color: var(--beginner-color); border: 1px solid rgba(52,211,153,0.3); }
+.badge-explorer { background: rgba(96,165,250,0.15); color: var(--explorer-color); border: 1px solid rgba(96,165,250,0.3); }
+.badge-builder  { background: rgba(244,114,182,0.15); color: var(--builder-color); border: 1px solid rgba(244,114,182,0.3); }
+
+/* ── Layout ───────────────────────────────────────────────── */
+.container { max-width: 1280px; margin: 0 auto; padding: 0 var(--sp-6); }
+.page-content { padding-top: calc(var(--navbar-h) + var(--sp-4)); padding-bottom: var(--sp-16); min-height: 100vh; }
+.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-5); }
+.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-5); }
+.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-5); }
+
+.section-header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:var(--sp-6); gap:var(--sp-4); }
+.section-label { font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:0.12em; color:var(--accent); margin-bottom:var(--sp-2); }
+.divider { height:1px; background:var(--border); margin:var(--sp-6) 0; }
+
+/* ── Skeleton ─────────────────────────────────────────────── */
+.skeleton {
+  background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-glass-light) 50%, var(--bg-elevated) 75%);
+  background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--r-sm);
+}
+
+/* ── Scrollbar ────────────────────────────────────────────── */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--bg-elevated); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
+
+/* ── Utilities ────────────────────────────────────────────── */
+.flex{display:flex;} .flex-col{display:flex;flex-direction:column;}
+.items-center{align-items:center;} .justify-between{justify-content:space-between;}
+.gap-2{gap:var(--sp-2);} .gap-3{gap:var(--sp-3);} .gap-4{gap:var(--sp-4);}
+.text-accent{color:var(--accent);} .text-muted{color:var(--text-muted);}
+.text-sm{font-size:0.875rem;} .font-mono{font-family:var(--font-mono);}
+.font-heading{font-family:var(--font-heading);} .truncate{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
+.anim-fade-up { animation: fade-in-up 0.5s ease both; }
+.page-enter { animation: pageIn var(--t-slow) both; }
+
+/* ── Responsive ───────────────────────────────────────────── */
+@media (max-width:1024px) { .grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} }
+@media (max-width:640px)  { .grid-4,.grid-3,.grid-2{grid-template-columns:1fr;} .container{padding:0 var(--sp-4);} .section-header{flex-direction:column;align-items:flex-start;} }
diff --git a/server/package-lock.json b/server/package-lock.json
index 3fcc765..0f5b259 100644
--- a/server/package-lock.json
+++ b/server/package-lock.json
@@ -19,6 +19,7 @@
       }
     },
     "..": {
+      "name": "pybe-mern-app",
       "version": "1.0.0",
       "dependencies": {
         "concurrently": "^9.1.2"
@@ -402,6 +403,21 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "license": "MIT",
diff --git a/server/src/data/db.json b/server/src/data/db.json
index 6547d2e..c58d7a7 100644
--- a/server/src/data/db.json
+++ b/server/src/data/db.json
@@ -1,7 +1,7 @@
 {
   "scenarios": [
     {
-      "_id": "8cf644f0-1402-4763-9542-02bd2ca0d1dc",
+      "_id": "176df397-5a4c-4d35-87d2-43e161f19269",
       "title": "Bag Weight Label",
       "difficulty": "Beginner",
       "concepts": [
@@ -16,11 +16,13 @@
       ],
       "sampleReasoning": "I only need to remember the bag weight, so I would store it with a clear name.",
       "effectivenessScore": 96,
-      "createdAt": "2026-06-19T11:54:44.732Z",
-      "updatedAt": "2026-06-19T11:54:44.732Z"
+      "theme": "classic",
+      "caseStudyId": null,
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
     },
     {
-      "_id": "8f065c3d-36c5-48c5-948a-b7bc1a768bc9",
+      "_id": "6a7206fa-0224-498c-bd96-08d8b269b40e",
       "title": "Rainy Day Choice",
       "difficulty": "Beginner",
       "concepts": [
@@ -35,11 +37,13 @@
       ],
       "sampleReasoning": "If it is raining, carry an umbrella. Otherwise, leave it at home.",
       "effectivenessScore": 95,
-      "createdAt": "2026-06-19T11:54:44.733Z",
-      "updatedAt": "2026-06-19T11:54:44.733Z"
+      "theme": "classic",
+      "caseStudyId": null,
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
     },
     {
-      "_id": "c4dfb27a-c96b-4ff1-80ff-3bd5b5b12e74",
+      "_id": "a5af078c-03d5-4c87-a90f-85b66a27b272",
       "title": "Two Snack Prices",
       "difficulty": "Beginner",
       "concepts": [
@@ -55,11 +59,13 @@
       ],
       "sampleReasoning": "I would keep the two prices separately and add them to get the total.",
       "effectivenessScore": 94,
-      "createdAt": "2026-06-19T11:54:44.733Z",
-      "updatedAt": "2026-06-19T11:54:44.733Z"
+      "theme": "classic",
+      "caseStudyId": null,
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
     },
     {
-      "_id": "3657a91d-1f2b-42d7-bfec-4fbfb80dd648",
+      "_id": "82f17294-f634-497d-aeee-f3161c481acd",
       "title": "Greeting by Name",
       "difficulty": "Beginner",
       "concepts": [
@@ -75,11 +81,13 @@
       ],
       "sampleReasoning": "The computer should store the learner name and place it inside a greeting sentence.",
       "effectivenessScore": 93,
-      "createdAt": "2026-06-19T11:54:44.733Z",
-      "updatedAt": "2026-06-19T11:54:44.733Z"
+      "theme": "classic",
+      "caseStudyId": null,
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
     },
     {
-      "_id": "a29775e3-1744-4b5e-b213-ecbb9bf8ec39",
+      "_id": "1eb9a3ea-d850-4193-bfe6-a4a68ff217e5",
       "title": "Pass Mark Check",
       "difficulty": "Beginner",
       "concepts": [
@@ -95,11 +103,13 @@
       ],
       "sampleReasoning": "I would compare the score with the pass mark and decide pass if it is high enough.",
       "effectivenessScore": 92,
-      "createdAt": "2026-06-19T11:54:44.733Z",
-      "updatedAt": "2026-06-19T11:54:44.733Z"
+      "theme": "classic",
+      "caseStudyId": null,
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
     },
     {
-      "_id": "734c083f-b08c-4524-ae1a-f2924cd6851a",
+      "_id": "e1d5522d-f7a7-4cce-a550-26f5a5ad3aba",
       "title": "Pocket Money Left",
       "difficulty": "Beginner",
       "concepts": [
@@ -115,11 +125,13 @@
       ],
       "sampleReasoning": "Start with the original money, subtract the spent amount, and store what remains.",
       "effectivenessScore": 91,
-      "createdAt": "2026-06-19T11:54:44.733Z",
-      "updatedAt": "2026-06-19T11:54:44.733Z"
+      "theme": "classic",
+      "caseStudyId": null,
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
     },
     {
-      "_id": "1324fea6-96d2-408c-8f58-cd92877f9dbd",
+      "_id": "e1664096-f3bf-47c6-8711-47a5e07409c7",
       "title": "Favorite Color List",
       "difficulty": "Beginner",
       "concepts": [
@@ -134,11 +146,13 @@
       ],
       "sampleReasoning": "Since all values are colors, I would keep them together in one list.",
       "effectivenessScore": 90,
-      "createdAt": "2026-06-19T11:54:44.733Z",
-      "updatedAt": "2026-06-19T11:54:44.733Z"
+      "theme": "classic",
+      "caseStudyId": null,
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
     },
     {
-      "_id": "8bb64eb9-5710-433b-bce9-95b4a5b995a1",
+      "_id": "abdc5b68-b7cd-4351-862c-3341573cdf42",
       "title": "First Item in a Bag",
       "difficulty": "Beginner",
       "concepts": [
@@ -154,11 +168,13 @@
       ],
       "sampleReasoning": "The first item is based on its position in the ordered group.",
       "effectivenessScore": 89,
-      "createdAt": "2026-06-19T11:54:44.733Z",
-      "updatedAt": "2026-06-19T11:54:44.733Z"
+      "theme": "classic",
+      "caseStudyId": null,
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
     },
     {
-      "_id": "73803faa-165f-4aee-b60f-3e08d470ce84",
+      "_id": "ca1373c9-ab82-4958-a052-6f62549b14b6",
       "title": "Attendance Count",
       "difficulty": "Beginner",
       "concepts": [
@@ -174,11 +190,13 @@
       ],
       "sampleReasoning": "I would count how many names are in the present-students list.",
       "effectivenessScore": 88,
-      "createdAt": "2026-06-19T11:54:44.733Z",
-      "updatedAt": "2026-06-19T11:54:44.733Z"
+      "theme": "classic",
+      "caseStudyId": null,
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
     },
     {
-      "_id": "e510ab5f-1f11-46c9-b857-22a50e144e75",
+      "_id": "4f14f1af-f927-4265-829f-4cec5968092e",
       "title": "Temperature Message",
       "difficulty": "Beginner",
       "concepts": [
@@ -194,11 +212,13 @@
       ],
       "sampleReasoning": "If the temperature is above the threshold, show Hot; otherwise show Comfortable.",
       "effectivenessScore": 87,
-      "createdAt": "2026-06-19T11:54:44.733Z",
-      "updatedAt": "2026-06-19T11:54:44.733Z"
+      "theme": "classic",
+      "caseStudyId": null,
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
     },
     {
-      "_id": "2a3496ef-bb71-4dde-83f5-37844063678d",
+      "_id": "bef5a856-e527-432b-8d34-40d54074a920",
       "title": "Water Bottle Reminder",
       "difficulty": "Explorer",
       "concepts": [
@@ -213,11 +233,13 @@
       ],
       "sampleReasoning": "For every break, show the same water reminder.",
       "effectivenessScore": 96,
-      "createdAt": "2026-06-19T11:54:44.733Z",
-      "updatedAt": "2026-06-19T11:54:44.733Z"
+      "theme": "classic",
+      "caseStudyId": null,
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
     },
     {
-      "_id": "71b887ca-fd3d-4c1a-83a9-f464f7c2a06d",
+      "_id": "5dd0c943-e5b9-4e31-b9dc-c919e4542871",
       "title": "Find the Longest Pencil",
       "difficulty": "Explorer",
       "concepts": [
@@ -233,11 +255,13 @@
       ],
       "sampleReasoning": "Start with one pencil as the longest, then compare each next pencil against it.",
       "effectivenessScore": 95,
-      "createdAt": "2026-06-19T11:54:44.733Z",
-      "updatedAt": "2026-06-19T11:54:44.733Z"
+      "theme": "classic",
+      "caseStudyId": null,
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
     },
     {
-      "_id": "bf9c0f8c-308d-4e1f-9e37-9997c7e042b9",
+      "_id": "4c6db219-bd78-4f86-a032-abdb063d3c2d",
       "title": "Clean Chore Checklist",
       "difficulty": "Explorer",
       "concepts": [
@@ -253,11 +277,13 @@
       ],
       "sampleReasoning": "Put chores in a list and handle each chore one by one.",
       "effectivenessScore": 94,
-      "createdAt": "2026-06-19T11:54:44.733Z",
-      "updatedAt": "2026-06-19T11:54:44.733Z"
+      "theme": "classic",
+      "caseStudyId": null,
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
     },
     {
-      "_id": "ce225ef0-1111-4ed4-9318-7373018385e6",
+      "_id": "8b046600-f015-49a0-8721-f86698b2a804",
       "title": "Movie Age Filter",
       "difficulty": "Explorer",
       "concepts": [
@@ -273,11 +299,13 @@
       ],
       "sampleReasoning": "For each movie, keep it only if the learner age is at least the minimum age.",
       "effectivenessScore": 93,
-      "createdAt": "2026-06-19T11:54:44.733Z",
-      "updatedAt": "2026-06-19T11:54:44.733Z"
+      "theme": "classic",
+      "caseStudyId": null,
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
     },
     {
-      "_id": "cc62f477-44c8-403b-82cf-0b2638ff501b",
+      "_id": "fe279f70-7a3f-40de-917d-40c6948b184f",
       "title": "Classroom Supply Lookup",
       "difficulty": "Explorer",
       "concepts": [
@@ -292,11 +320,13 @@
       ],
       "sampleReasoning": "Each supply has a count, so I would store supply names as keys with counts as values.",
       "effectivenessScore": 92,
-      "createdAt": "2026-06-19T11:54:44.733Z",
-      "updatedAt": "2026-06-19T11:54:44.733Z"
+      "theme": "classic",
+      "caseStudyId": null,
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
     },
     {
-      "_id": "26b0c080-124d-4ff8-92ad-4f2380e3e89f",
+      "_id": "65fd8765-b698-4797-86db-5bc99d4ee86a",
       "title": "Bus Stop Search",
       "difficulty": "Explorer",
       "concepts": [
@@ -312,11 +342,13 @@
       ],
       "sampleReasoning": "Look at each stop and compare it with the stop I want.",
       "effectivenessScore": 91,
-      "createdAt": "2026-06-19T11:54:44.733Z",
-      "updatedAt": "2026-06-19T11:54:44.733Z"
+      "theme": "classic",
+      "caseStudyId": null,
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
     },
     {
-      "_id": "169fc6d5-7b9b-483d-87ee-325e2d497c90",
+      "_id": "e86d7966-9bdf-4ac7-8e2e-ceafe3b26a24",
       "title": "Average Practice Score",
       "difficulty": "Explorer",
       "concepts": [
@@ -332,11 +364,13 @@
       ],
       "sampleReasoning": "Find the total of all scores, count how many scores there are, then divide.",
       "effectivenessScore": 90,
-      "createdAt": "2026-06-19T11:54:44.733Z",
-      "updatedAt": "2026-06-19T11:54:44.733Z"
+      "theme": "classic",
+      "caseStudyId": null,
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
     },
     {
-      "_id": "e0bdac7d-2033-408f-833c-3f2734690398",
+      "_id": "6d10f76d-09bb-4868-9d5f-fc78b7b35144",
       "title": "Separate Even Roll Numbers",
       "difficulty": "Explorer",
       "concepts": [
@@ -352,11 +386,13 @@
       ],
       "sampleReasoning": "A roll number is even if dividing by two leaves no remainder.",
       "effectivenessScore": 89,
-      "createdAt": "2026-06-19T11:54:44.733Z",
-      "updatedAt": "2026-06-19T11:54:44.733Z"
+      "theme": "classic",
+      "caseStudyId": null,
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
     },
     {
-      "_id": "decf41d5-8529-4685-b354-d02090bbb639",
+      "_id": "84b1d7c3-3490-4647-b3c8-af7db17e724d",
       "title": "Capitalize Name Tags",
       "difficulty": "Explorer",
       "concepts": [
@@ -372,11 +408,13 @@
       ],
       "sampleReasoning": "For each name, convert it to title case before printing the tag.",
       "effectivenessScore": 88,
-      "createdAt": "2026-06-19T11:54:44.733Z",
-      "updatedAt": "2026-06-19T11:54:44.733Z"
+      "theme": "classic",
+      "caseStudyId": null,
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
     },
     {
-      "_id": "418bec64-f75a-40fa-b849-42edba0d3939",
+      "_id": "ede44093-2bf0-48a8-9e82-a22e114e3b42",
       "title": "Find Missing Homework",
       "difficulty": "Explorer",
       "concepts": [
@@ -392,11 +430,13 @@
       ],
       "sampleReasoning": "Take everyone in the class and remove the students who submitted.",
       "effectivenessScore": 87,
-      "createdAt": "2026-06-19T11:54:44.733Z",
-      "updatedAt": "2026-06-19T11:54:44.733Z"
+      "theme": "classic",
+      "caseStudyId": null,
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
     },
     {
-      "_id": "07295b48-1037-4654-995f-df57d6fd7a7b",
+      "_id": "fa9143e6-decd-4835-8988-0ea423f742a5",
       "title": "Reusable Discount Rule",
       "difficulty": "Builder",
       "concepts": [
@@ -412,11 +452,13 @@
       ],
       "sampleReasoning": "The helper needs the bill amount and should return the final price after applying the rule.",
       "effectivenessScore": 96,
-      "createdAt": "2026-06-19T11:54:44.733Z",
-      "updatedAt": "2026-06-19T11:54:44.733Z"
+      "theme": "classic",
+      "caseStudyId": null,
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
     },
     {
-      "_id": "88a35898-eba5-47ca-adf2-0805d633ea3d",
+      "_id": "d487265f-43ed-4d86-962d-c751214bfb49",
       "title": "Mini Quiz Checker",
       "difficulty": "Builder",
       "concepts": [
@@ -432,11 +474,13 @@
       ],
       "sampleReasoning": "Compare the learner answer with the correct answer and return whether they match.",
       "effectivenessScore": 95,
-      "createdAt": "2026-06-19T11:54:44.733Z",
-      "updatedAt": "2026-06-19T11:54:44.733Z"
+      "theme": "classic",
+      "caseStudyId": null,
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
     },
     {
-      "_id": "9a8e5318-6fad-44ed-8e60-03da14d3f4db",
+      "_id": "8a5cf1cc-ec3a-408c-9c66-3d194b11fc26",
       "title": "Step Counter Function",
       "difficulty": "Builder",
       "concepts": [
@@ -452,11 +496,13 @@
       ],
       "sampleReasoning": "The function should take step counts, add them, and give back the total.",
       "effectivenessScore": 94,
-      "createdAt": "2026-06-19T11:54:44.733Z",
-      "updatedAt": "2026-06-19T11:54:44.733Z"
+      "theme": "classic",
+      "caseStudyId": null,
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
     },
     {
-      "_id": "34c237f5-a9c8-478c-8980-8505ba0d2b94",
+      "_id": "9949950c-c9a6-46f6-945c-d91b02fd2a89",
       "title": "Safe Username Maker",
       "difficulty": "Builder",
       "concepts": [
@@ -472,11 +518,13 @@
       ],
       "sampleReasoning": "Make the name lowercase and remove spaces so it can be used as a username.",
       "effectivenessScore": 93,
-      "createdAt": "2026-06-19T11:54:44.733Z",
-      "updatedAt": "2026-06-19T11:54:44.733Z"
+      "theme": "classic",
+      "caseStudyId": null,
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
     },
     {
-      "_id": "9bcdd1e0-2f8a-416e-a0e2-60e188e33dcd",
+      "_id": "0d00443b-c2f3-4a88-b486-1513a6489634",
       "title": "Retry Until Valid",
       "difficulty": "Builder",
       "concepts": [
@@ -492,11 +540,13 @@
       ],
       "sampleReasoning": "Keep asking while the number is not positive, then stop once it is valid.",
       "effectivenessScore": 92,
-      "createdAt": "2026-06-19T11:54:44.733Z",
-      "updatedAt": "2026-06-19T11:54:44.733Z"
+      "theme": "classic",
+      "caseStudyId": null,
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
     },
     {
-      "_id": "54de8788-6a15-4377-a15f-e4cb73632c42",
+      "_id": "eaea73c8-16a6-4b11-a8c6-ec716d4e1949",
       "title": "Simple Score Report",
       "difficulty": "Builder",
       "concepts": [
@@ -512,11 +562,13 @@
       ],
       "sampleReasoning": "Return a dictionary with the learner name and score as labeled values.",
       "effectivenessScore": 91,
-      "createdAt": "2026-06-19T11:54:44.733Z",
-      "updatedAt": "2026-06-19T11:54:44.733Z"
+      "theme": "classic",
+      "caseStudyId": null,
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
     },
     {
-      "_id": "d98ea7cd-5792-41b6-9a66-03267e936bc1",
+      "_id": "194dfce1-f6e9-4e72-b1b6-031475c1d45f",
       "title": "Task Status Updater",
       "difficulty": "Builder",
       "concepts": [
@@ -532,11 +584,13 @@
       ],
       "sampleReasoning": "Find the task by name and change its status from pending to done.",
       "effectivenessScore": 90,
-      "createdAt": "2026-06-19T11:54:44.733Z",
-      "updatedAt": "2026-06-19T11:54:44.733Z"
+      "theme": "classic",
+      "caseStudyId": null,
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
     },
     {
-      "_id": "e5b52a26-a324-40eb-84f7-fb757eecdceb",
+      "_id": "18dbedce-62cc-4c40-8a9c-9f38acd4f372",
       "title": "Small Receipt Builder",
       "difficulty": "Builder",
       "concepts": [
@@ -552,11 +606,13 @@
       ],
       "sampleReasoning": "Combine the item name and price into one clear sentence.",
       "effectivenessScore": 89,
-      "createdAt": "2026-06-19T11:54:44.733Z",
-      "updatedAt": "2026-06-19T11:54:44.733Z"
+      "theme": "classic",
+      "caseStudyId": null,
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
     },
     {
-      "_id": "f57b40d9-7510-43dc-ae04-230a9d8331b3",
+      "_id": "d1567e5c-ed3c-4d94-9d9e-718de6558953",
       "title": "Choose Next Scenario",
       "difficulty": "Builder",
       "concepts": [
@@ -572,11 +628,13 @@
       ],
       "sampleReasoning": "If the score is high choose harder, if low choose easier, otherwise stay similar.",
       "effectivenessScore": 88,
-      "createdAt": "2026-06-19T11:54:44.733Z",
-      "updatedAt": "2026-06-19T11:54:44.733Z"
+      "theme": "classic",
+      "caseStudyId": null,
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
     },
     {
-      "_id": "5cf0ecd0-c690-45d4-a9b4-12e36403b125",
+      "_id": "5e179d35-1298-4959-92f9-311724fd7231",
       "title": "Reflection Keyword Finder",
       "difficulty": "Builder",
       "concepts": [
@@ -592,8 +650,1508 @@
       ],
       "sampleReasoning": "Look for words like confused or stuck and flag the reflection if they appear.",
       "effectivenessScore": 87,
-      "createdAt": "2026-06-19T11:54:44.733Z",
-      "updatedAt": "2026-06-19T11:54:44.733Z"
+      "theme": "classic",
+      "caseStudyId": null,
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "3c9b1cd2-fedf-432e-9895-3f647333af6b",
+      "title": "Ramu's First Chai Variable",
+      "difficulty": "Beginner",
+      "concepts": [
+        "variables"
+      ],
+      "context": "Ramu runs a tiny chai stall outside IIT Ropar's gate. He sells only one type of chai: ginger tea at ₹15 a cup. He wants to track how many cups he sold today.",
+      "prompt": "Ramu asks you: \"I only need to remember one thing — how many cups I sold. What should I call it?\" How would you help him store this single piece of information?",
+      "objectives": [
+        "Identify one value to track",
+        "Give it a meaningful name",
+        "Understand why naming matters"
+      ],
+      "sampleReasoning": "Ramu needs one piece of information — cups_sold. Naming it clearly means he can use it later to calculate earnings.",
+      "effectivenessScore": 95,
+      "theme": "chai-stall",
+      "caseStudyId": "cs-chai-stall",
+      "themeStep": 1,
+      "themeArc": "Variables → Lists → Dicts → Functions",
+      "themeEmoji": "🍵",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "b75792ee-5609-42ce-b801-541e847d5c57",
+      "title": "Ramu Adds More Chai Types",
+      "difficulty": "Beginner",
+      "concepts": [
+        "lists"
+      ],
+      "context": "Ramu's stall became popular. Now he sells 8 types: ginger, masala, elaichi, tulsi, lemon, mint, kadak, and cutting. He has 8 separate variables: chai1, chai2... chai8. His notebook is a mess.",
+      "prompt": "Ramu shouts: \"I have 8 variables and if I add one more chai, I need a 9th! This is madness!\" What single structure could hold ALL his chai types together?",
+      "objectives": [
+        "Feel the pain of too many variables",
+        "Discover the concept of grouping",
+        "Map grouping to a Python list"
+      ],
+      "sampleReasoning": "All 8 items are chai types. They belong together. One list called chai_types can hold all of them and I can add more without creating new variables.",
+      "effectivenessScore": 97,
+      "theme": "chai-stall",
+      "caseStudyId": "cs-chai-stall",
+      "themeStep": 2,
+      "themeArc": "Variables → Lists → Dicts → Functions",
+      "themeEmoji": "🍵",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "07eba861-5753-4ab0-9e02-e15ae464ea29",
+      "title": "Ramu's Price Lookup Problem",
+      "difficulty": "Explorer",
+      "concepts": [
+        "dictionaries"
+      ],
+      "context": "Ramu now has two parallel lists: chai_types = [\"ginger\", \"masala\", ...] and prices = [15, 20, ...]. A customer asks \"How much is tulsi?\" Ramu has to count to position 4 in one list, then find position 4 in another. He made a mistake yesterday — he reordered the types list but forgot to reorder prices.",
+      "prompt": "Ramu lost ₹200 yesterday because his lists got out of sync. He says: \"I want to look up a chai by NAME, not by number.\" What structure lets you store the name AND price together as a pair?",
+      "objectives": [
+        "Understand why parallel lists break",
+        "Discover named lookup",
+        "Map key-value pairs to a dictionary"
+      ],
+      "sampleReasoning": "A dictionary maps each chai name directly to its price. \"tulsi\" always points to its correct price — no counting, no sync issues.",
+      "effectivenessScore": 98,
+      "theme": "chai-stall",
+      "caseStudyId": "cs-chai-stall",
+      "themeStep": 3,
+      "themeArc": "Variables → Lists → Dicts → Functions",
+      "themeEmoji": "🍵",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "3152fdc0-2946-473a-8a17-328467bee743",
+      "title": "Ramu's Evening Revenue Calculator",
+      "difficulty": "Builder",
+      "concepts": [
+        "functions"
+      ],
+      "context": "Every evening, Ramu calculates revenue for each chai type: cups_sold × price. He copy-pasted this calculation 8 times in his notebook — once for each chai. When he raised masala chai price, he had to update 3 different places and still missed one.",
+      "prompt": "Ramu says: \"I write the same calculation for every single chai type. There has to be a better way.\" How would you package this repeatable calculation so Ramu writes it ONCE and reuses it for every chai?",
+      "objectives": [
+        "Identify repeated logic",
+        "Package it as a reusable process",
+        "Map the process to a Python function"
+      ],
+      "sampleReasoning": "A function called calculate_revenue takes cups_sold and price_per_cup, then returns the total. Write once, call it for each chai type.",
+      "effectivenessScore": 96,
+      "theme": "chai-stall",
+      "caseStudyId": "cs-chai-stall",
+      "themeStep": 4,
+      "themeArc": "Variables → Lists → Dicts → Functions",
+      "themeEmoji": "🍵",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "f8f13548-1c6a-448d-833f-2c67dab71217",
+      "title": "ISRO: Three Telemetry Variables",
+      "difficulty": "Beginner",
+      "concepts": [
+        "variables"
+      ],
+      "context": "You are an intern at ISRO's Chandrayaan-3 mission control. The spacecraft has three critical readings: altitude (in km), fuel level (in %), and velocity (in m/s). Right now you have three separate variables on your screen.",
+      "prompt": "The mission director asks: \"What are the three values we must track at all times?\" How would you name and store these three critical pieces of mission data?",
+      "objectives": [
+        "Name critical values meaningfully",
+        "Understand that names carry meaning in code",
+        "Store mission-critical data as variables"
+      ],
+      "sampleReasoning": "altitude_km, fuel_percent, velocity_ms — each name tells exactly what unit and what it measures. Naming matters in space.",
+      "effectivenessScore": 94,
+      "theme": "isro",
+      "caseStudyId": "cs-isro",
+      "themeStep": 1,
+      "themeArc": "Variables → Lists → Dicts → Sets → Modules",
+      "themeEmoji": "🚀",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "5cd2566d-61f9-4b64-bcb8-01e8d1817e26",
+      "title": "ISRO: Twelve Subsystem Chaos",
+      "difficulty": "Explorer",
+      "concepts": [
+        "lists"
+      ],
+      "context": "Chandrayaan-3 has 12 subsystems: propulsion, thermal, communication, power, navigation, attitude control, payload, avionics, structure, mechanisms, software, and ground systems. A second intern added three more subsystems without telling you. Now you have 15 separate variables. Someone's variable is named temp2 and nobody knows what it means.",
+      "prompt": "The mission director is furious: \"Why do we have 15 separate variables? One new intern and the whole codebase breaks!\" What structure would hold all subsystem names together and survive additions without chaos?",
+      "objectives": [
+        "Understand chaos from ungrouped variables",
+        "Group related items under one name",
+        "Discover lists as a solution to this pain"
+      ],
+      "sampleReasoning": "A list called subsystems holds all 12 names. Adding a new one is just appending to the list — no new variables, no naming chaos.",
+      "effectivenessScore": 97,
+      "theme": "isro",
+      "caseStudyId": "cs-isro",
+      "themeStep": 2,
+      "themeArc": "Variables → Lists → Dicts → Sets → Modules",
+      "themeEmoji": "🚀",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "3154ed90-5c47-43c5-bc67-2d8e56e61186",
+      "title": "ISRO: FAIL at Position 7",
+      "difficulty": "Explorer",
+      "concepts": [
+        "dictionaries"
+      ],
+      "context": "It is 2:17 AM. The status board shows: [OK, OK, OK, FAIL, OK, OK, OK, OK, OK, OK, OK, OK]. Subsystem at index 3 failed. But which subsystem IS index 3? You have to mentally count: propulsion=0, thermal=1, communication=2, power=3. It's 2 AM. You miscounted twice.",
+      "prompt": "The mission director shouts: \"I don't care about position 3! I need to know which SUBSYSTEM failed by NAME!\" What structure would let you look up subsystem status by name, not by position?",
+      "objectives": [
+        "Feel the danger of position-based lookup",
+        "Discover named lookup under pressure",
+        "Map subsystem → status as dictionary"
+      ],
+      "sampleReasoning": "A dictionary maps each subsystem name to its status. status[\"power\"] = \"FAIL\" — no counting, no miscount at 2 AM.",
+      "effectivenessScore": 99,
+      "theme": "isro",
+      "caseStudyId": "cs-isro",
+      "themeStep": 3,
+      "themeArc": "Variables → Lists → Dicts → Sets → Modules",
+      "themeEmoji": "🚀",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "8175533a-7ae7-45b6-9d47-065a9d2a0282",
+      "title": "ISRO: Duplicate Telemetry Signals",
+      "difficulty": "Explorer",
+      "concepts": [
+        "sets"
+      ],
+      "context": "Three ground stations — Bengaluru, Mauritius, and Bhopal — all send telemetry. Due to a relay issue, the Bengaluru station sent the same altitude reading 14 times. Your data array has the same reading repeated across many entries. The average is now wrong.",
+      "prompt": "The data scientist says: \"We're getting duplicate readings from the same timestamp. We need only UNIQUE readings.\" What structure automatically guarantees that each value appears only once, no matter how many times it is submitted?",
+      "objectives": [
+        "Understand the cost of duplicates",
+        "Discover uniqueness as a data property",
+        "Map uniqueness guarantee to Python sets"
+      ],
+      "sampleReasoning": "A set only holds unique values. Adding the same altitude reading 14 times still results in one entry. Sets solve the duplicate problem automatically.",
+      "effectivenessScore": 96,
+      "theme": "isro",
+      "caseStudyId": "cs-isro",
+      "themeStep": 4,
+      "themeArc": "Variables → Lists → Dicts → Sets → Modules",
+      "themeEmoji": "🚀",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "aa0629ed-f35c-4850-aa10-c63cd1152db3",
+      "title": "Filter App: The First Variable",
+      "difficulty": "Beginner",
+      "concepts": [
+        "variables"
+      ],
+      "context": "You are building a photo filter app. Right now you have one filter: \"Warm Vintage.\" It has one setting: brightness (set to 1.3 by default).",
+      "prompt": "Your app has one setting for one filter. How do you store that brightness value so you can use it to process the photo?",
+      "objectives": [
+        "Store a single filter setting",
+        "Name it meaningfully",
+        "Understand how naming connects to usage"
+      ],
+      "sampleReasoning": "brightness = 1.3 — a named variable holds the setting and can be referenced whenever the filter is applied.",
+      "effectivenessScore": 91,
+      "theme": "instagram",
+      "caseStudyId": "cs-instagram",
+      "themeStep": 1,
+      "themeArc": "Variables → Lists → Dicts → Functions → Classes",
+      "themeEmoji": "📸",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "c6ed37da-2a2e-4ee0-92b4-460a4678bbc4",
+      "title": "Filter App: Twenty Filters, Twenty Variables",
+      "difficulty": "Explorer",
+      "concepts": [
+        "lists"
+      ],
+      "context": "Your filter app now has 20 filters: Warm Vintage, Neon Dreams, Faded Film, Ocean Breeze... You have 20 separate variables: filter1, filter2... filter20. Users swipe through filters. When they swipe right to filter number 7, your code tries to access filter7 — but you can't swipe to a variable name.",
+      "prompt": "A friend tries your app and says: \"Swiping is broken — I can only see the first filter.\" Your code cannot loop over 20 separate variables. What single structure would hold all 20 filter names so your swipe gesture can navigate them by position?",
+      "objectives": [
+        "Understand that variables cannot be iterated",
+        "Discover that lists enable position-based navigation",
+        "Connect swiping to list indexing"
+      ],
+      "sampleReasoning": "A list called filters holds all 20 names. swipe_right moves the index forward by 1. filters[current_index] gives the active filter.",
+      "effectivenessScore": 97,
+      "theme": "instagram",
+      "caseStudyId": "cs-instagram",
+      "themeStep": 2,
+      "themeArc": "Variables → Lists → Dicts → Functions → Classes",
+      "themeEmoji": "📸",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "b59c6a56-b977-4c7f-8628-45d0953b3761",
+      "title": "Filter App: Five Settings Per Filter",
+      "difficulty": "Explorer",
+      "concepts": [
+        "dictionaries"
+      ],
+      "context": "Each filter now has 5 settings: brightness, contrast, saturation, hue_shift, and grain. You have 5 parallel lists: brightness_list[7], contrast_list[7], saturation_list[7]... You updated the brightness list for \"Neon Dreams\" but forgot to update the contrast list. The filter looks broken.",
+      "prompt": "You wasted 3 hours debugging because your 5 lists got out of sync. A mentor says: \"What if each filter was ONE complete package with all its settings together?\" What structure bundles multiple named settings into a single unit?",
+      "objectives": [
+        "Feel the pain of parallel lists diverging",
+        "Discover bundling related data together",
+        "Map a filter's settings to a dictionary"
+      ],
+      "sampleReasoning": "A dictionary for each filter: {\"brightness\": 1.3, \"contrast\": 1.1, \"saturation\": 1.4, \"hue_shift\": 10, \"grain\": 0.2}. All settings travel together — they can't fall out of sync.",
+      "effectivenessScore": 98,
+      "theme": "instagram",
+      "caseStudyId": "cs-instagram",
+      "themeStep": 3,
+      "themeArc": "Variables → Lists → Dicts → Functions → Classes",
+      "themeEmoji": "📸",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "6d5d0df1-1694-4ccf-ade0-bf0d9fdfd6a1",
+      "title": "Filter App: Copy-Paste Logic Breaks",
+      "difficulty": "Builder",
+      "concepts": [
+        "functions"
+      ],
+      "context": "You apply filters by copy-pasting the same apply_filter logic for each of your 20 filters. When you want to add a \"fade\" effect that dims the edges, you have to add it in 20 places. You added it in 19 places and forgot filter number 14. Users are complaining that \"Moody Cinema\" doesn't fade.",
+      "prompt": "A senior dev looks at your code and says: \"You have the same 15 lines copied 20 times. If you change anything, you'll miss one. EVERY time.\" How would you package the apply-filter logic so you write it once and it works for every filter?",
+      "objectives": [
+        "Experience the maintenance nightmare of copy-pasted logic",
+        "Understand DRY: Don't Repeat Yourself",
+        "Package repeatable logic as a function"
+      ],
+      "sampleReasoning": "def apply_filter(photo, filter_settings): takes a photo and a filter dict, applies all settings, returns the modified photo. Called once per filter — no copy-paste.",
+      "effectivenessScore": 96,
+      "theme": "instagram",
+      "caseStudyId": "cs-instagram",
+      "themeStep": 4,
+      "themeArc": "Variables → Lists → Dicts → Functions → Classes",
+      "themeEmoji": "📸",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "935d7100-2050-495b-b893-6175094f20fa",
+      "title": "Hostel Startup: One Item, Two Variables",
+      "difficulty": "Beginner",
+      "concepts": [
+        "variables"
+      ],
+      "context": "It is 2 AM in a hostel room. Three friends — Arjun, Meera, and Dev — just launched \"HungerFix,\" a food delivery app for their campus. They have exactly one item: Maggi. Price: ₹30.",
+      "prompt": "The friends need the app to remember what they sell and for how much. What are the two pieces of information they absolutely need to store, and how would you name them clearly?",
+      "objectives": [
+        "Identify the minimum data needed",
+        "Name variables descriptively",
+        "Understand that variables hold the state of the app"
+      ],
+      "sampleReasoning": "item_name = \"Maggi\" and item_price = 30. Simple, named, and the whole app can reference these two values.",
+      "effectivenessScore": 93,
+      "theme": "food-delivery",
+      "caseStudyId": "cs-food-delivery",
+      "themeStep": 1,
+      "themeArc": "Variables → Lists → Dicts → Sets → try/except",
+      "themeEmoji": "🍕",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "22aedc9e-d31a-4037-87f5-ee26876be744",
+      "title": "Hostel Startup: Fifteen Items, No Search",
+      "difficulty": "Explorer",
+      "concepts": [
+        "lists"
+      ],
+      "context": "By night 3, HungerFix has 15 items: Maggi, Bread-Omelette, Poha, Upma, Vada Pav... Users are texting \"Do you have Poha?\" Arjun has to scroll through 15 separate variables to check. He also cannot display a menu — you can't print 15 separate variables in a loop.",
+      "prompt": "Dev says: \"We can't even show users a menu because we have 15 variables. I can't loop over variables!\" What structure would let you store all 15 items so you can loop through them, display them, and search them?",
+      "objectives": [
+        "Understand that iteration requires a collection",
+        "Discover that loops need lists",
+        "Connect menu display to list traversal"
+      ],
+      "sampleReasoning": "menu = [\"Maggi\", \"Bread-Omelette\", \"Poha\", ...]. Now for item in menu: print(item) displays the whole menu. And \"Poha\" in menu checks availability instantly.",
+      "effectivenessScore": 96,
+      "theme": "food-delivery",
+      "caseStudyId": "cs-food-delivery",
+      "themeStep": 2,
+      "themeArc": "Variables → Lists → Dicts → Sets → try/except",
+      "themeEmoji": "🍕",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "61235c93-4e02-4fa0-a0f3-84c97250185d",
+      "title": "Hostel Startup: The Duplicate Biryani Crisis",
+      "difficulty": "Explorer",
+      "concepts": [
+        "sets"
+      ],
+      "context": "Night 10. Two friends — Ananya and Rohan — both order the last biryani at 11:58 PM simultaneously. Both orders go through. The friends running the stall have only ONE biryani. They cook two. Costs double. One customer still waits.",
+      "prompt": "Meera says: \"We need to track active orders, but we can't allow the SAME item to be ordered twice if only one is in stock.\" What structure would automatically prevent the same order from appearing twice — no manual checking needed?",
+      "objectives": [
+        "Understand the cost of duplicates in real systems",
+        "Discover sets as a membership uniqueness guarantee",
+        "Apply set membership to order deduplication"
+      ],
+      "sampleReasoning": "active_orders = set(). When Ananya orders biryani: if \"biryani\" not in active_orders, add it. When Rohan orders: \"biryani\" is already in the set — reject it. Sets prevent duplicates automatically.",
+      "effectivenessScore": 97,
+      "theme": "food-delivery",
+      "caseStudyId": "cs-food-delivery",
+      "themeStep": 3,
+      "themeArc": "Variables → Lists → Dicts → Sets → try/except",
+      "themeEmoji": "🍕",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "9cddfd64-708d-44d7-a4fd-21d00ea4d123",
+      "title": "Hostel Startup: The Crashed Order History",
+      "difficulty": "Builder",
+      "concepts": [
+        "error handling",
+        "try/except"
+      ],
+      "context": "Night 14. A user types a quantity of -3 samosas. The app tries to calculate the bill: -3 × ₹12 = -₹36. The app charges them NEGATIVE money and then crashes trying to write to the orders file. The crash wipes the entire order history. 47 orders gone.",
+      "prompt": "Dev stares at the empty orders file at 3 AM and says: \"A user broke our app with a negative number. We had no plan for this.\" How would you build a safety net that catches bad input BEFORE it reaches the calculation and file-write — so the app never crashes and data is never lost?",
+      "objectives": [
+        "Understand that real programs receive unexpected input",
+        "Discover defensive programming",
+        "Map error catching to try/except"
+      ],
+      "sampleReasoning": "Wrap the quantity input and bill calculation in a try block. If quantity is negative, raise a ValueError. The except block shows the user an error without crashing — and the order history is never touched.",
+      "effectivenessScore": 98,
+      "theme": "food-delivery",
+      "caseStudyId": "cs-food-delivery",
+      "themeStep": 4,
+      "themeArc": "Variables → Lists → Dicts → Sets → try/except",
+      "themeEmoji": "🍕",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "d674a822-dfe2-43d4-8543-5d2f3510dfa1",
+      "title": "Playlist: One Mood, One Genre",
+      "difficulty": "Beginner",
+      "concepts": [
+        "variables"
+      ],
+      "context": "You are building an app that learns your music taste. Right now it knows one thing: your current mood. When you're in a \"study\" mood, it plays lo-fi. One mood, one genre.",
+      "prompt": "The app needs to remember what mood you are in right now. How would you store the current mood so the app can decide what to play?",
+      "objectives": [
+        "Store state as a variable",
+        "Understand that apps need to remember things",
+        "Connect variable to decision-making"
+      ],
+      "sampleReasoning": "current_mood = \"study\" — one variable holds the current state, and the app can check it to select a playlist.",
+      "effectivenessScore": 90,
+      "theme": "ai-playlist",
+      "caseStudyId": "cs-ai-playlist",
+      "themeStep": 1,
+      "themeArc": "Variables → Lists → Loops → Sets → Dicts → Functions",
+      "themeEmoji": "🎵",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "6ecc4ac0-6446-4b15-88ae-70440d5e004b",
+      "title": "Playlist: Twelve Genres, No Loop",
+      "difficulty": "Explorer",
+      "concepts": [
+        "lists",
+        "loops"
+      ],
+      "context": "Your app now knows 12 genres you love: lo-fi, jazz, indie, classical, synthwave, ambient, folk, blues, punk, metal, hip-hop, and bossa nova. You have 12 separate variables. The recommendation engine needs to check all of them. You're writing: check_genre1(), check_genre2()... twelve times.",
+      "prompt": "Your code has 12 separate function calls — one for each genre. Adding a 13th genre means adding another line. The recommendation logic cannot adapt dynamically. What structure lets you loop through all genres with a single repeated action?",
+      "objectives": [
+        "Understand that repetitive calls need loops",
+        "Discover that lists enable dynamic iteration",
+        "Connect recommendation loop to list traversal"
+      ],
+      "sampleReasoning": "genres = [\"lo-fi\", \"jazz\", ...]. for genre in genres: check_genre(genre) — one loop handles 12 or 1200 genres. Adding a new genre is one append.",
+      "effectivenessScore": 95,
+      "theme": "ai-playlist",
+      "caseStudyId": "cs-ai-playlist",
+      "themeStep": 2,
+      "themeArc": "Variables → Lists → Loops → Sets → Dicts → Functions",
+      "themeEmoji": "🎵",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "d4b998ae-4949-4c3d-9522-d89273fdeea9",
+      "title": "Playlist: Shape of You, Again",
+      "difficulty": "Explorer",
+      "concepts": [
+        "sets"
+      ],
+      "context": "Your recommendation engine keeps surfacing \"Shape of You\" — you've rated it 4 stars and it keeps showing up. You've heard it 23 times this week. Your recently_played list has the same 5 songs repeated across 200 entries.",
+      "prompt": "You tell the app: \"I want variety. Never play the same song twice in one session.\" The recently_played list doesn't prevent repeats because lists allow duplicates. What structure would automatically guarantee that each song in a session appears exactly once, no matter how many times the engine tries to add it?",
+      "objectives": [
+        "Experience the frustration of duplicates in recommendations",
+        "Discover sets as a uniqueness enforcer",
+        "Apply sets to deduplication of a playlist"
+      ],
+      "sampleReasoning": "session_played = set(). When the engine picks a song, check: if song not in session_played, play it and add to the set. Sets reject duplicates — \"Shape of You\" gets added once and stays there.",
+      "effectivenessScore": 96,
+      "theme": "ai-playlist",
+      "caseStudyId": "cs-ai-playlist",
+      "themeStep": 3,
+      "themeArc": "Variables → Lists → Loops → Sets → Dicts → Functions",
+      "themeEmoji": "🎵",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "9012f550-5086-4dd7-900e-5152a8f72f2d",
+      "title": "Playlist: Storing Play Count AND Rating",
+      "difficulty": "Explorer",
+      "concepts": [
+        "dictionaries"
+      ],
+      "context": "The app needs to remember two things per song: how many times you played it, and what you rated it (1–5 stars). You have two parallel lists: play_counts[i] and ratings[i]. You sorted one list by count and forgot to sort the other. A song shows a 5-star rating next to the wrong play count.",
+      "prompt": "Your recommendation score is wrong because the two lists got out of sync again. A friend suggests: \"What if each song carried all its own information — play count AND rating — as one complete package?\" What structure bundles multiple named values for one song together?",
+      "objectives": [
+        "Experience sync failure of parallel lists",
+        "Discover that dictionaries bundle related data",
+        "Map a song's stats to a dictionary"
+      ],
+      "sampleReasoning": "songs = {\"Shape of You\": {\"play_count\": 23, \"rating\": 4}}. The song carries its own data. Sort by play_count? The rating comes along automatically.",
+      "effectivenessScore": 97,
+      "theme": "ai-playlist",
+      "caseStudyId": "cs-ai-playlist",
+      "themeStep": 4,
+      "themeArc": "Variables → Lists → Loops → Sets → Dicts → Functions",
+      "themeEmoji": "🎵",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "63b51ace-245d-4b9f-b82f-8c31f564fcab",
+      "title": "Kota: Your JEE Rank Variable",
+      "difficulty": "Beginner",
+      "concepts": [
+        "variables"
+      ],
+      "context": "You are a JEE aspirant at a Kota coaching center. You just got your mock test rank: 4,217. That's your current rank. Everything in your day — which batch you're in, which counselor you see — depends on this one number.",
+      "prompt": "The coaching center's system needs to store your rank so it can decide your batch placement. What would you call this piece of information, and why does the name matter?",
+      "objectives": [
+        "Store a single important value",
+        "Choose a meaningful name over a generic one",
+        "Understand how names convey intent"
+      ],
+      "sampleReasoning": "my_jee_rank = 4217 — the name tells anyone reading the code exactly what this number represents. rank = 4217 is fine, but x = 4217 tells you nothing.",
+      "effectivenessScore": 92,
+      "theme": "kota",
+      "caseStudyId": "cs-kota",
+      "themeStep": 1,
+      "themeArc": "Variables → Lists → Dicts → Sorting → Nested structures",
+      "themeEmoji": "📚",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "36db0896-784c-4602-8e48-e934e4b0ac13",
+      "title": "Kota: Thirty Batchmates, Thirty Variables",
+      "difficulty": "Explorer",
+      "concepts": [
+        "lists"
+      ],
+      "context": "Your batch has 30 students. The director wants the batch average rank. You have 30 separate variables: rank_arjun, rank_priya, rank_dev... To calculate the average, you add all 30 variables manually. A new student joins — you add rank_newstudent and forget to include them in the average calculation.",
+      "prompt": "The director asks: \"Why does adding one student break the average?\" The answer is: you are manually managing 30 separate names. What structure would let you add a new rank in ONE place and have the average work automatically?",
+      "objectives": [
+        "Feel the fragility of ungrouped data",
+        "Discover that collections allow dynamic computation",
+        "Connect list to automatic aggregate operations"
+      ],
+      "sampleReasoning": "batch_ranks = [4217, 2891, 6043, ...]. To add a student: batch_ranks.append(new_rank). Average: sum(batch_ranks) / len(batch_ranks). Automatic — no manual updates.",
+      "effectivenessScore": 96,
+      "theme": "kota",
+      "caseStudyId": "cs-kota",
+      "themeStep": 2,
+      "themeArc": "Variables → Lists → Dicts → Sorting → Nested structures",
+      "themeEmoji": "📚",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "15782233-e51f-4c5f-be06-4d6b89a14478",
+      "title": "Kota: Find Priya's Rank by Name",
+      "difficulty": "Explorer",
+      "concepts": [
+        "dictionaries"
+      ],
+      "context": "A parent calls and asks: \"What is Priya Sharma's rank?\" You have a list of 30 ranks. You have to find which position Priya is at, then look up that position in the rank list. The director is watching. It takes 40 seconds.",
+      "prompt": "The director says: \"In a real coaching center, I need to look up any student's rank by NAME — not by finding their position first.\" What structure maps each student's name directly to their rank?",
+      "objectives": [
+        "Experience slow sequential lookup under pressure",
+        "Discover named direct lookup",
+        "Map student → rank as a dictionary"
+      ],
+      "sampleReasoning": "ranks = {\"Priya Sharma\": 2891, \"Arjun Dev\": 4217, ...}. ranks[\"Priya Sharma\"] gives her rank immediately — no searching needed.",
+      "effectivenessScore": 97,
+      "theme": "kota",
+      "caseStudyId": "cs-kota",
+      "themeStep": 3,
+      "themeArc": "Variables → Lists → Dicts → Sorting → Nested structures",
+      "themeEmoji": "📚",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "cf42cbf0-c4e0-47ec-ab85-6652231ff7b9",
+      "title": "Kota: The Merit List Algorithm",
+      "difficulty": "Builder",
+      "concepts": [
+        "sorting",
+        "dictionaries",
+        "algorithms"
+      ],
+      "context": "The director wants the top 10 students for the merit scholarship. You have ranks = {\"Priya\": 2891, \"Arjun\": 4217, ...}. Lower rank number = better performance. You need to sort by rank value, handle ties, and take the top 10.",
+      "prompt": "The director says: \"I need the merit list NOW — sorted by rank, ties broken by name alphabetically, top 10 only.\" What sequence of reasoning steps turns the dictionary into a sorted, trimmed merit list?",
+      "objectives": [
+        "Understand sorting as an algorithm, not magic",
+        "Sort a dictionary by value",
+        "Slice a result to a required size"
+      ],
+      "sampleReasoning": "Sort the dictionary items by rank value (ascending), then alphabetically for ties. sorted(ranks.items(), key=lambda x: (x[1], x[0]))[:10] gives the top 10 merit list.",
+      "effectivenessScore": 95,
+      "theme": "kota",
+      "caseStudyId": "cs-kota",
+      "themeStep": 4,
+      "themeArc": "Variables → Lists → Dicts → Sorting → Nested structures",
+      "themeEmoji": "📚",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "816db01e-31ca-4eeb-8a47-0fb08feb94cd",
+      "title": "Potion Ingredient Dosage",
+      "difficulty": "Beginner",
+      "concepts": [
+        "variables"
+      ],
+      "context": "Severus Snape asks you to measure Boomslang Skin for Polyjuice Potion.",
+      "prompt": "How would you store the weight in grams so your cauldron brewing notes remember it?",
+      "objectives": [
+        "Identify single value",
+        "Assign a clear name",
+        "Understand variable storage"
+      ],
+      "sampleReasoning": "boomslang_weight = 25 — store the exact weight in a named variable to use in the recipe.",
+      "effectivenessScore": 96,
+      "theme": "potterheads",
+      "caseStudyId": "cs-potter-potions",
+      "themeStep": 1,
+      "themeEmoji": "🧙‍♂️",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "728a59f3-d3e2-4a3b-8ca8-f937b481ec72",
+      "title": "Spellbook Spell List",
+      "difficulty": "Beginner",
+      "concepts": [
+        "lists"
+      ],
+      "context": "Harry Potter wants to keep track of all defensive spells learned in DADA class.",
+      "prompt": "How would you group \"Expelliarmus\", \"Stupefy\", and \"Protego\" into a single structure?",
+      "objectives": [
+        "Group spells together",
+        "Recognize list ordering",
+        "Map spells to a list"
+      ],
+      "sampleReasoning": "defense_spells = [\"Expelliarmus\", \"Stupefy\", \"Protego\"] — keep them in one list for fast casting access.",
+      "effectivenessScore": 97,
+      "theme": "potterheads",
+      "caseStudyId": "cs-potter-potions",
+      "themeStep": 2,
+      "themeEmoji": "🧙‍♂️",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "83d2ec1d-ef0c-4a32-aeb4-6595510a46a2",
+      "title": "House Point Counter",
+      "difficulty": "Explorer",
+      "concepts": [
+        "dictionaries"
+      ],
+      "context": "Professor McGonagall needs to track House Points for Gryffindor, Slytherin, Ravenclaw, and Hufflepuff.",
+      "prompt": "How would you store each house name directly paired with its score?",
+      "objectives": [
+        "Map house to score",
+        "Enable direct lookup",
+        "Use a dictionary"
+      ],
+      "sampleReasoning": "house_points = {\"Gryffindor\": 450, \"Slytherin\": 420, \"Ravenclaw\": 390, \"Hufflepuff\": 380} maps house names to scores directly.",
+      "effectivenessScore": 98,
+      "theme": "potterheads",
+      "caseStudyId": "cs-potter-potions",
+      "themeStep": 3,
+      "themeEmoji": "🧙‍♂️",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "3c6f59cb-78dc-4259-b9c0-6a793464a442",
+      "title": "Cauldron Stirring Helper",
+      "difficulty": "Builder",
+      "concepts": [
+        "functions"
+      ],
+      "context": "Brewing Felix Felicis requires clockwise stirring every 3 minutes.",
+      "prompt": "How would you design a reusable helper function that calculates total stirs required?",
+      "objectives": [
+        "Create reusable brewing logic",
+        "Accept duration parameter",
+        "Return stir count"
+      ],
+      "sampleReasoning": "def calculate_stirs(minutes): return minutes * 4 — write once and reuse for any potion recipe.",
+      "effectivenessScore": 96,
+      "theme": "potterheads",
+      "caseStudyId": "cs-potter-potions",
+      "themeStep": 4,
+      "themeEmoji": "🧙‍♂️",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "de268968-7f2e-48a5-ab20-c25cb5942f4d",
+      "title": "Unforgivable Curse Deduplicator",
+      "difficulty": "Explorer",
+      "concepts": [
+        "sets"
+      ],
+      "context": "The Ministry of Magic receives duplicate dark magic spell reports from multiple owls.",
+      "prompt": "How would you automatically ensure each reported spell is unique with no duplicates?",
+      "objectives": [
+        "Eliminate duplicate reports",
+        "Guarantee uniqueness",
+        "Map to Python sets"
+      ],
+      "sampleReasoning": "dark_spells = set(owl_reports) automatically removes duplicates.",
+      "effectivenessScore": 95,
+      "theme": "potterheads",
+      "caseStudyId": "cs-potter-spells",
+      "themeStep": 1,
+      "themeEmoji": "🪄",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "6397e82a-9465-4d14-8e7e-b2946a441607",
+      "title": "Arc Reactor Output Voltage",
+      "difficulty": "Beginner",
+      "concepts": [
+        "variables"
+      ],
+      "context": "Tony Stark needs J.A.R.V.I.S. to monitor the Mark 85 Arc Reactor power level.",
+      "prompt": "How would you store the current voltage percentage in code?",
+      "objectives": [
+        "Identify critical suit value",
+        "Store in named variable",
+        "Reference during combat"
+      ],
+      "sampleReasoning": "reactor_voltage = 98.5 — keep suit power level in a named variable.",
+      "effectivenessScore": 96,
+      "theme": "marvel",
+      "caseStudyId": "cs-marvel-jarvis",
+      "themeStep": 1,
+      "themeEmoji": "🦾",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "53804ab1-8755-4772-b6bb-be76ee348a95",
+      "title": "Avengers Emergency Roster",
+      "difficulty": "Beginner",
+      "concepts": [
+        "lists"
+      ],
+      "context": "Captain America calls an emergency assembly for Iron Man, Thor, Hulk, and Spider-Man.",
+      "prompt": "How would you store all active Avengers together so J.A.R.V.I.S. can alert them in order?",
+      "objectives": [
+        "Group hero names",
+        "Maintain assembly order",
+        "Store as a list"
+      ],
+      "sampleReasoning": "active_avengers = [\"Iron Man\", \"Thor\", \"Hulk\", \"Spider-Man\"] stores heroes in a single list.",
+      "effectivenessScore": 97,
+      "theme": "marvel",
+      "caseStudyId": "cs-marvel-jarvis",
+      "themeStep": 2,
+      "themeEmoji": "🦾",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "a266cadc-5e1f-49e2-925f-b06c712d2de3",
+      "title": "J.A.R.V.I.S. Weapon Diagnostics",
+      "difficulty": "Explorer",
+      "concepts": [
+        "dictionaries"
+      ],
+      "context": "Tony Stark asks: \"J.A.R.V.I.S., check status of repulsors, unibeam, and nanotech shield!\"",
+      "prompt": "How would you map each weapon system name directly to its operational status?",
+      "objectives": [
+        "Map weapon to status",
+        "Instant direct lookup",
+        "Store as dictionary"
+      ],
+      "sampleReasoning": "weapon_status = {\"repulsors\": \"READY\", \"unibeam\": \"CHARGING\", \"shield\": \"ACTIVE\"} allows instant lookup by name.",
+      "effectivenessScore": 98,
+      "theme": "marvel",
+      "caseStudyId": "cs-marvel-jarvis",
+      "themeStep": 3,
+      "themeEmoji": "🦾",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "dd89f194-bd91-4936-af87-6cf8fe44bd85",
+      "title": "Repulsor Thrust Calculator",
+      "difficulty": "Builder",
+      "concepts": [
+        "functions"
+      ],
+      "context": "Iron Man needs to compute flight trajectory thruster force based on suit weight and speed.",
+      "prompt": "How would you package this flight calculation into a reusable function for J.A.R.V.I.S.?",
+      "objectives": [
+        "Package thruster math",
+        "Accept weight and velocity",
+        "Return force value"
+      ],
+      "sampleReasoning": "def calculate_thrust(weight, speed): return weight * speed * 1.5 — reuse across all armor marks.",
+      "effectivenessScore": 96,
+      "theme": "marvel",
+      "caseStudyId": "cs-marvel-jarvis",
+      "themeStep": 4,
+      "themeEmoji": "🦾",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "232d2772-99ef-4405-967f-98f499f1d1e7",
+      "title": "Infinity Stone Energy Signature Filter",
+      "difficulty": "Explorer",
+      "concepts": [
+        "sets"
+      ],
+      "context": "Sensors in Wakanda register cosmic energy spikes. Multiple sensors detect the Space Stone signature.",
+      "prompt": "How would you remove duplicate sensor readings to get only unique stone signatures?",
+      "objectives": [
+        "Deduplicate sensor readings",
+        "Guarantee unique signatures",
+        "Map to sets"
+      ],
+      "sampleReasoning": "unique_signatures = set(sensor_spikes) guarantees unique cosmic signals.",
+      "effectivenessScore": 95,
+      "theme": "marvel",
+      "caseStudyId": "cs-marvel-infinity",
+      "themeStep": 1,
+      "themeEmoji": "💎",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "0f3b9882-dbe3-465c-b0e5-9955b6dccf5d",
+      "title": "Chakra Points Tracker",
+      "difficulty": "Beginner",
+      "concepts": [
+        "variables"
+      ],
+      "context": "Naruto is practicing Nine-Tails Chakra control and needs to track his reserve points.",
+      "prompt": "How would you store Naruto's current chakra level in a single variable?",
+      "objectives": [
+        "Identify chakra value",
+        "Name variable clearly",
+        "Store for Jutsu casting"
+      ],
+      "sampleReasoning": "chakra_points = 5000 — store current chakra in a named variable.",
+      "effectivenessScore": 96,
+      "theme": "anime",
+      "caseStudyId": "cs-anime-ninja",
+      "themeStep": 1,
+      "themeEmoji": "⚔️",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "6cd1bc47-6d55-4d3f-af78-b9354245c8e7",
+      "title": "Hidden Leaf Squad Roster",
+      "difficulty": "Beginner",
+      "concepts": [
+        "lists"
+      ],
+      "context": "Kakashi Sensei forms Squad 7 with Naruto, Sasuke, and Sakura.",
+      "prompt": "How would you group all three shinobi into a single list for mission deployment?",
+      "objectives": [
+        "Group squad members",
+        "Maintain ninja order",
+        "Store in a list"
+      ],
+      "sampleReasoning": "squad_7 = [\"Naruto\", \"Sasuke\", \"Sakura\"] keeps the team together in one list.",
+      "effectivenessScore": 97,
+      "theme": "anime",
+      "caseStudyId": "cs-anime-ninja",
+      "themeStep": 2,
+      "themeEmoji": "⚔️",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "52d9e07c-df1c-46a4-aa34-74d8174549d9",
+      "title": "Jutsu Hand Sign Vault",
+      "difficulty": "Explorer",
+      "concepts": [
+        "dictionaries"
+      ],
+      "context": "The Shinobi Library stores hand sign sequences for Rasengan, Chidori, and Shadow Clone jutsu.",
+      "prompt": "How would you map each Jutsu name to its required hand sign combination?",
+      "objectives": [
+        "Map jutsu to hand signs",
+        "Look up jutsu instantly",
+        "Store as dictionary"
+      ],
+      "sampleReasoning": "jutsu_vault = {\"Rasengan\": \"Ram → Serpent\", \"Chidori\": \"Ox → Rabbit → Monkey\"} maps jutsu directly to signs.",
+      "effectivenessScore": 98,
+      "theme": "anime",
+      "caseStudyId": "cs-anime-ninja",
+      "themeStep": 3,
+      "themeEmoji": "⚔️",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "25c6fa07-d350-4e55-b84f-b649be2d6714",
+      "title": "Shadow Clone Multiplier",
+      "difficulty": "Builder",
+      "concepts": [
+        "functions"
+      ],
+      "context": "Naruto wants to calculate total chakra consumed when creating N shadow clones.",
+      "prompt": "How would you write a reusable function to compute total chakra cost per clone count?",
+      "objectives": [
+        "Create clone chakra formula",
+        "Accept clone count",
+        "Return total chakra required"
+      ],
+      "sampleReasoning": "def clone_chakra(clone_count): return clone_count * 50 — calculate chakra cost dynamically.",
+      "effectivenessScore": 96,
+      "theme": "anime",
+      "caseStudyId": "cs-anime-ninja",
+      "themeStep": 4,
+      "themeEmoji": "⚔️",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "74ff45af-a47d-43f2-86f1-15709068d2f6",
+      "title": "Dungeon Rift Monster Index",
+      "difficulty": "Explorer",
+      "concepts": [
+        "sets"
+      ],
+      "context": "An S-Rank Hunter encounters wild monsters in a dungeon rift and receives duplicate radar pings.",
+      "prompt": "How would you filter out duplicate monster pings to index only unique species?",
+      "objectives": [
+        "Filter duplicate pings",
+        "Store unique species",
+        "Map to sets"
+      ],
+      "sampleReasoning": "unique_monsters = set(radar_pings) removes duplicate dungeon pings.",
+      "effectivenessScore": 95,
+      "theme": "anime",
+      "caseStudyId": "cs-anime-pokedex",
+      "themeStep": 1,
+      "themeEmoji": "🐉",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "90b55d9b-e37f-4a6d-867e-1319d66b877e",
+      "title": "Gryffindor House Points Addition",
+      "difficulty": "Beginner",
+      "concepts": [
+        "arithmetic",
+        "subtraction"
+      ],
+      "context": "Harry scores 50 points for catching the Snitch, but Snape deducts 15 for being late.",
+      "prompt": "How would you calculate Gryffindor's net points using arithmetic operators?",
+      "objectives": [
+        "Perform addition and subtraction",
+        "Calculate net points",
+        "Use math operators"
+      ],
+      "sampleReasoning": "net_points = 50 - 15 calculates the final house points.",
+      "effectivenessScore": 94,
+      "theme": "potterheads",
+      "caseStudyId": "cs-potter-spells",
+      "themeStep": 2,
+      "themeEmoji": "🧙‍♂️",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "e6a3cbc1-8759-4886-9784-3d363fce3c56",
+      "title": "Spell Incantation Generator",
+      "difficulty": "Beginner",
+      "concepts": [
+        "strings"
+      ],
+      "context": "Hermione wants to construct full spell commands like \"Harry casts Expelliarmus!\".",
+      "prompt": "How would you combine the wizard's name and the spell name into a single message?",
+      "objectives": [
+        "Combine text strings",
+        "Format incantations",
+        "Map to Python strings"
+      ],
+      "sampleReasoning": "incantation = f\"{wizard} casts {spell}!\" sticks text pieces together.",
+      "effectivenessScore": 95,
+      "theme": "potterheads",
+      "caseStudyId": "cs-potter-spells",
+      "themeStep": 3,
+      "themeEmoji": "🧙‍♂️",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "7f79bacc-ada2-41f8-914e-f5498c492ec1",
+      "title": "Sorting Hat House Evaluator",
+      "difficulty": "Beginner",
+      "concepts": [
+        "conditionals",
+        "comparisons"
+      ],
+      "context": "The Sorting Hat checks a student's bravery and wisdom scores to decide their house.",
+      "prompt": "How would you write a decision rule to assign Gryffindor or Ravenclaw based on scores?",
+      "objectives": [
+        "Compare trait scores",
+        "Branch decisions",
+        "Map to if/else"
+      ],
+      "sampleReasoning": "if bravery >= 80: house = \"Gryffindor\" else if wisdom >= 80: house = \"Ravenclaw\".",
+      "effectivenessScore": 96,
+      "theme": "potterheads",
+      "caseStudyId": "cs-potter-spells",
+      "themeStep": 4,
+      "themeEmoji": "🧙‍♂️",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "f68192c3-b61e-4333-9081-63d751f1da5e",
+      "title": "Cauldron Clockwise Stir Routine",
+      "difficulty": "Explorer",
+      "concepts": [
+        "loops",
+        "while loops"
+      ],
+      "context": "Brewing Felix Felicis requires stirring the potion cauldron clockwise exactly 50 times.",
+      "prompt": "How would you make Python repeat the stirring action 50 times automatically?",
+      "objectives": [
+        "Identify repeated stir action",
+        "Loop stir count",
+        "Map to for/while loop"
+      ],
+      "sampleReasoning": "for stir in range(1, 51): print(f\"Stir {stir}\") repeats the action automatically.",
+      "effectivenessScore": 95,
+      "theme": "potterheads",
+      "caseStudyId": "cs-potter-potions",
+      "themeStep": 5,
+      "themeEmoji": "🧙‍♂️",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "600add39-7b43-4c95-ab08-32dfd1d510c8",
+      "title": "Restricted Section Scroll Search",
+      "difficulty": "Explorer",
+      "concepts": [
+        "search",
+        "filtering"
+      ],
+      "context": "Harry is searching through 100 library scrolls to locate a forbidden dark magic spell.",
+      "prompt": "How would you filter the scroll list to find only scrolls containing \"Dark Magic\"?",
+      "objectives": [
+        "Scan list items",
+        "Filter by keyword",
+        "Map to search/filtering"
+      ],
+      "sampleReasoning": "dark_scrolls = [scroll for scroll in library if \"Dark\" in scroll] filters the scrolls.",
+      "effectivenessScore": 94,
+      "theme": "potterheads",
+      "caseStudyId": "cs-potter-spells",
+      "themeStep": 5,
+      "themeEmoji": "🧙‍♂️",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "15ac1758-080b-4555-b31d-bb76039b657f",
+      "title": "Exploding Cauldron Exception Shield",
+      "difficulty": "Builder",
+      "concepts": [
+        "error handling",
+        "try except"
+      ],
+      "context": "A potion heat spikes above 300 degrees and threatens to blow up the potions dungeon.",
+      "prompt": "How would you catch this overheating error so your code casts a shield charm instead of crashing?",
+      "objectives": [
+        "Detect heat overload",
+        "Catch exception",
+        "Map to try/except"
+      ],
+      "sampleReasoning": "try: brew_potion() except OverheatError: cast_shield() prevents a crash.",
+      "effectivenessScore": 97,
+      "theme": "potterheads",
+      "caseStudyId": "cs-potter-potions",
+      "themeStep": 6,
+      "themeEmoji": "🧙‍♂️",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "eb504ea7-be9a-481b-83ad-b5024329d00a",
+      "title": "Triwizard Tournament Leaderboard Ranker",
+      "difficulty": "Builder",
+      "concepts": [
+        "algorithms",
+        "sorting"
+      ],
+      "context": "Dumbledore needs to sort the final Triwizard scores from highest to lowest score.",
+      "prompt": "How would you order champion scores from highest to lowest?",
+      "objectives": [
+        "Order champion scores",
+        "Sort list descending",
+        "Map to sorting algorithms"
+      ],
+      "sampleReasoning": "scores.sort(reverse=True) ranks the champions in descending order.",
+      "effectivenessScore": 96,
+      "theme": "potterheads",
+      "caseStudyId": "cs-potter-spells",
+      "themeStep": 6,
+      "themeEmoji": "🧙‍♂️",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "f918c077-fc2b-4e7c-94ce-550911e45af4",
+      "title": "Ministry Secret Archive Scroll Log",
+      "difficulty": "Builder",
+      "concepts": [
+        "files",
+        "file io"
+      ],
+      "context": "The Ministry of Magic wants to save all recorded spell logs into a permanent parchment file.",
+      "prompt": "How would you write text into a file so it stays saved even after shutting down your laptop?",
+      "objectives": [
+        "Open file for writing",
+        "Save spell logs",
+        "Map to file I/O"
+      ],
+      "sampleReasoning": "with open(\"spells.txt\", \"w\") as f: f.write(log) saves data permanently.",
+      "effectivenessScore": 95,
+      "theme": "potterheads",
+      "caseStudyId": "cs-potter-spells",
+      "themeStep": 7,
+      "themeEmoji": "🧙‍♂️",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "57309775-8cad-4f08-9d03-425c8509ca04",
+      "title": "Suit Power Drain Calculator",
+      "difficulty": "Beginner",
+      "concepts": [
+        "arithmetic",
+        "subtraction"
+      ],
+      "context": "Iron Man has 1000 kW power. Repulsor blasts use 250 kW and shield uses 180 kW.",
+      "prompt": "How would you compute the remaining suit energy using subtraction operators?",
+      "objectives": [
+        "Subtract power drain",
+        "Calculate remaining energy",
+        "Use arithmetic operators"
+      ],
+      "sampleReasoning": "remaining = 1000 - 250 - 180 calculates power remaining.",
+      "effectivenessScore": 94,
+      "theme": "marvel",
+      "caseStudyId": "cs-marvel-jarvis",
+      "themeStep": 5,
+      "themeEmoji": "🦾",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "60fbebe3-ffd9-44a4-9b0d-f59e31d5a334",
+      "title": "J.A.R.V.I.S. Audio Broadcast Formatter",
+      "difficulty": "Beginner",
+      "concepts": [
+        "strings"
+      ],
+      "context": "J.A.R.V.I.S. needs to construct HUD alert strings like \"Warning Mr. Stark: Thruster #2 Low\".",
+      "prompt": "How would you format variables into a clear status text string?",
+      "objectives": [
+        "Format status message",
+        "Combine variables with text",
+        "Map to strings"
+      ],
+      "sampleReasoning": "alert = f\"Warning {user}: {system} {status}\" formats HUD alerts.",
+      "effectivenessScore": 95,
+      "theme": "marvel",
+      "caseStudyId": "cs-marvel-jarvis",
+      "themeStep": 6,
+      "themeEmoji": "🦾",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "5fd26012-46ff-44cb-9198-46ec88a2b603",
+      "title": "Nanotech Threat Level Defense Protocol",
+      "difficulty": "Beginner",
+      "concepts": [
+        "conditionals",
+        "comparisons"
+      ],
+      "context": "Mark 85 sensors evaluate hostile threat score from 0 to 100.",
+      "prompt": "How would you deploy nanotech shields if threat > 80, repulsors if > 50, or scan only?",
+      "objectives": [
+        "Evaluate threat score",
+        "Branch suit defense",
+        "Map to if/elif/else"
+      ],
+      "sampleReasoning": "if threat > 80: deploy_shield() elif threat > 50: deploy_repulsors().",
+      "effectivenessScore": 96,
+      "theme": "marvel",
+      "caseStudyId": "cs-marvel-jarvis",
+      "themeStep": 7,
+      "themeEmoji": "🦾",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "95b71db1-fd02-453e-bb4c-6c790c348880",
+      "title": "Iron Man Subsystem Thruster Diagnostics",
+      "difficulty": "Explorer",
+      "concepts": [
+        "loops",
+        "while loops"
+      ],
+      "context": "J.A.R.V.I.S. needs to check all 100 thruster nodes across the armor one by one.",
+      "prompt": "How would you repeat the diagnostic check for every thruster node automatically?",
+      "objectives": [
+        "Iterate thruster nodes",
+        "Perform check per node",
+        "Map to loops"
+      ],
+      "sampleReasoning": "for thruster in armor_thrusters: check_status(thruster) repeats for all nodes.",
+      "effectivenessScore": 95,
+      "theme": "marvel",
+      "caseStudyId": "cs-marvel-jarvis",
+      "themeStep": 8,
+      "themeEmoji": "🦾",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "5fbb445b-ada9-4594-b250-c2b721199e08",
+      "title": "Vibranium Radar Signature Scan",
+      "difficulty": "Explorer",
+      "concepts": [
+        "search",
+        "filtering"
+      ],
+      "context": "Wakanda radar receives satellite pings across Earth. You need to find all \"Vibranium\" pings.",
+      "prompt": "How would you search radar readings and filter out non-vibranium signals?",
+      "objectives": [
+        "Filter radar pings",
+        "Extract matching signals",
+        "Map to search/filter"
+      ],
+      "sampleReasoning": "vibranium_pings = [p for p in radar_pings if \"Vibranium\" in p] filters radar data.",
+      "effectivenessScore": 94,
+      "theme": "marvel",
+      "caseStudyId": "cs-marvel-infinity",
+      "themeStep": 2,
+      "themeEmoji": "💎",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "de02467b-26be-41a2-b7f6-416754816c62",
+      "title": "Arc Reactor Power Overload Bypass",
+      "difficulty": "Builder",
+      "concepts": [
+        "error handling",
+        "try except"
+      ],
+      "context": "An enemy blast causes Arc Reactor energy voltage to surge above 1200V.",
+      "prompt": "How would you handle this voltage surge exception so J.A.R.V.I.S. diverts power to heat sinks without shutting down?",
+      "objectives": [
+        "Detect power surge",
+        "Catch voltage error",
+        "Map to try/except"
+      ],
+      "sampleReasoning": "try: fire_unibeam() except PowerSurge: divert_to_heatsink() handles surges.",
+      "effectivenessScore": 97,
+      "theme": "marvel",
+      "caseStudyId": "cs-marvel-jarvis",
+      "themeStep": 9,
+      "themeEmoji": "🦾",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "a1fbca1f-19a1-44e7-9478-b295ae3db452",
+      "title": "Stark Satellite Threat Priority Ranker",
+      "difficulty": "Builder",
+      "concepts": [
+        "algorithms",
+        "sorting"
+      ],
+      "context": "Stark satellite defense detects 5 incoming alien ships with different danger ratings.",
+      "prompt": "How would you sort the incoming ships from highest threat score to lowest?",
+      "objectives": [
+        "Order threat levels",
+        "Sort list descending",
+        "Map to sorting algorithms"
+      ],
+      "sampleReasoning": "ships.sort(key=lambda s: s.threat, reverse=True) prioritizes targets.",
+      "effectivenessScore": 96,
+      "theme": "marvel",
+      "caseStudyId": "cs-marvel-infinity",
+      "themeStep": 3,
+      "themeEmoji": "💎",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "96da7dfa-c905-45c6-b506-deaa8c84c0a6",
+      "title": "Stark Telemetry Mission Log Archiver",
+      "difficulty": "Builder",
+      "concepts": [
+        "files",
+        "file io"
+      ],
+      "context": "J.A.R.V.I.S. must save flight telemetry and battle statistics into a permanent log file.",
+      "prompt": "How would you write flight telemetry data into a JSON file for permanent storage?",
+      "objectives": [
+        "Open file for writing",
+        "Serialize telemetry data",
+        "Map to file I/O"
+      ],
+      "sampleReasoning": "with open(\"flight_log.json\", \"w\") as f: json.dump(log_data, f) saves telemetry.",
+      "effectivenessScore": 95,
+      "theme": "marvel",
+      "caseStudyId": "cs-marvel-jarvis",
+      "themeStep": 10,
+      "themeEmoji": "🦾",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "04bdc60a-af99-4f48-ad55-55e23e8bbc07",
+      "title": "Shadow Clone Chakra Cost Calculator",
+      "difficulty": "Beginner",
+      "concepts": [
+        "arithmetic",
+        "subtraction"
+      ],
+      "context": "Naruto has 9000 chakra. Creating 10 shadow clones uses 1500 chakra.",
+      "prompt": "How would you compute Naruto's remaining chakra using subtraction?",
+      "objectives": [
+        "Subtract chakra spent",
+        "Compute remaining chakra",
+        "Use math operators"
+      ],
+      "sampleReasoning": "remaining = 9000 - 1500 calculates remaining chakra.",
+      "effectivenessScore": 94,
+      "theme": "anime",
+      "caseStudyId": "cs-anime-ninja",
+      "themeStep": 5,
+      "themeEmoji": "⚔️",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "530d7965-772c-4131-ab41-694a8a85776d",
+      "title": "Jutsu Invocation Scroll Formatter",
+      "difficulty": "Beginner",
+      "concepts": [
+        "strings"
+      ],
+      "context": "A shinobi scroll needs to generate jutsu announcements like \"Naruto unleashes Rasengan!\".",
+      "prompt": "How would you format the ninja name and jutsu name into an incantation string?",
+      "objectives": [
+        "Combine text strings",
+        "Format jutsu incantations",
+        "Map to strings"
+      ],
+      "sampleReasoning": "announcement = f\"{ninja} unleashes {jutsu}!\" formats the scroll text.",
+      "effectivenessScore": 95,
+      "theme": "anime",
+      "caseStudyId": "cs-anime-ninja",
+      "themeStep": 6,
+      "themeEmoji": "⚔️",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "ca5d7d2a-8abb-43dc-802d-40bff5055b38",
+      "title": "Chunin Exam Promotion Evaluator",
+      "difficulty": "Beginner",
+      "concepts": [
+        "conditionals",
+        "comparisons"
+      ],
+      "context": "Proctors check shinobi exam marks: score >= 85 is Chunin, score >= 60 is Genin.",
+      "prompt": "How would you write a decision rule to determine the ninja rank based on score?",
+      "objectives": [
+        "Compare exam score",
+        "Branch rank results",
+        "Map to if/elif/else"
+      ],
+      "sampleReasoning": "if score >= 85: rank = \"Chunin\" elif score >= 60: rank = \"Genin\".",
+      "effectivenessScore": 96,
+      "theme": "anime",
+      "caseStudyId": "cs-anime-ninja",
+      "themeStep": 7,
+      "themeEmoji": "⚔️",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "8d53d978-597a-4138-8cb7-8c81e3c229fc",
+      "title": "Parallel Shadow Clone Training Reps",
+      "difficulty": "Explorer",
+      "concepts": [
+        "loops",
+        "while loops"
+      ],
+      "context": "Naruto summons 100 shadow clones to practice tree-climbing training reps simultaneously.",
+      "prompt": "How would you repeat the training step for every shadow clone in code?",
+      "objectives": [
+        "Iterate shadow clones",
+        "Perform training action",
+        "Map to loops"
+      ],
+      "sampleReasoning": "for clone in range(1, 101): train_clone(clone) repeats for all clones.",
+      "effectivenessScore": 95,
+      "theme": "anime",
+      "caseStudyId": "cs-anime-ninja",
+      "themeStep": 8,
+      "themeEmoji": "⚔️",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "9ede990b-c372-440c-9ae7-ec25f092041e",
+      "title": "S-Rank Dungeon Boss Finder",
+      "difficulty": "Explorer",
+      "concepts": [
+        "search",
+        "filtering"
+      ],
+      "context": "An S-Rank Hunter scans a dungeon rift containing 50 monsters to find S-Rank beasts.",
+      "prompt": "How would you search the monster list and filter out non-S-rank creatures?",
+      "objectives": [
+        "Filter dungeon monsters",
+        "Identify S-Rank beasts",
+        "Map to search/filtering"
+      ],
+      "sampleReasoning": "bosses = [m for m in dungeon_monsters if m.rank == \"S\"] filters the beasts.",
+      "effectivenessScore": 94,
+      "theme": "anime",
+      "caseStudyId": "cs-anime-pokedex",
+      "themeStep": 2,
+      "themeEmoji": "🐉",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "2d11cbe4-b6f5-4409-b2dc-1b329ab8b806",
+      "title": "Chakra Exhaustion Substitution Guard",
+      "difficulty": "Builder",
+      "concepts": [
+        "error handling",
+        "try except"
+      ],
+      "context": "During battle, a shinobi's chakra drops below critical level while casting a jutsu.",
+      "prompt": "How would you catch this low-chakra exception to automatically trigger a wood clone substitution?",
+      "objectives": [
+        "Detect low chakra",
+        "Catch exception",
+        "Map to try/except"
+      ],
+      "sampleReasoning": "try: cast_jutsu() except ChakraExhausted: trigger_substitution() handles exhaustion.",
+      "effectivenessScore": 97,
+      "theme": "anime",
+      "caseStudyId": "cs-anime-ninja",
+      "themeStep": 9,
+      "themeEmoji": "⚔️",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "af0ce424-048e-48fe-b5ae-299f85605d7f",
+      "title": "Shinobi Guild Power Ranker",
+      "difficulty": "Builder",
+      "concepts": [
+        "algorithms",
+        "sorting"
+      ],
+      "context": "The Hokage needs to rank 20 shinobi by combat power level from highest to lowest.",
+      "prompt": "How would you order the list of shinobi scores from highest to lowest?",
+      "objectives": [
+        "Order combat scores",
+        "Sort list descending",
+        "Map to sorting algorithms"
+      ],
+      "sampleReasoning": "ninja_list.sort(key=lambda n: n.power, reverse=True) ranks the shinobi.",
+      "effectivenessScore": 96,
+      "theme": "anime",
+      "caseStudyId": "cs-anime-pokedex",
+      "themeStep": 3,
+      "themeEmoji": "🐉",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
+    },
+    {
+      "_id": "90c55732-34ea-46d2-9c8f-46cb643c705c",
+      "title": "Forbidden Leaf Scroll Archive Saver",
+      "difficulty": "Builder",
+      "concepts": [
+        "files",
+        "file io"
+      ],
+      "context": "The Hokage wants to record secret ninjutsu scroll instructions into a permanent file archive.",
+      "prompt": "How would you write jutsu scroll instructions into a file for permanent archival?",
+      "objectives": [
+        "Open file for writing",
+        "Write scroll text",
+        "Map to file I/O"
+      ],
+      "sampleReasoning": "with open(\"scrolls.txt\", \"w\") as f: f.write(scroll_text) archives the jutsu permanently.",
+      "effectivenessScore": 95,
+      "theme": "anime",
+      "caseStudyId": "cs-anime-ninja",
+      "themeStep": 10,
+      "themeEmoji": "⚔️",
+      "createdAt": "2026-07-27T06:14:32.837Z",
+      "updatedAt": "2026-07-27T06:14:32.837Z"
     }
   ],
   "sessions": []
diff --git a/server/src/data/store.js b/server/src/data/store.js
index b6a4ce1..6f152fe 100644
--- a/server/src/data/store.js
+++ b/server/src/data/store.js
@@ -42,6 +42,15 @@ async function listScenarios(filters = {}) {
   let scenarios = [...db.scenarios];
   if (filters.difficulty) scenarios = scenarios.filter((item) => item.difficulty === filters.difficulty);
   if (filters.concept) scenarios = scenarios.filter((item) => item.concepts.includes(filters.concept));
+  if (filters.theme) {
+    if (filters.theme === 'default') {
+      const defaultThemes = ['default', 'classic', 'chai-stall', 'isro', 'instagram', 'food-delivery', 'ai-playlist', 'kota'];
+      scenarios = scenarios.filter((item) => defaultThemes.includes(item.theme) || !item.theme);
+    } else {
+      scenarios = scenarios.filter((item) => item.theme === filters.theme);
+    }
+  }
+  if (filters.caseStudyId) scenarios = scenarios.filter((item) => item.caseStudyId === filters.caseStudyId);
   if (filters.q) {
     const query = filters.q.toLowerCase();
     scenarios = scenarios.filter((item) => (
diff --git a/server/src/index.js b/server/src/index.js
index a28c468..d21d654 100644
--- a/server/src/index.js
+++ b/server/src/index.js
@@ -5,6 +5,7 @@ const scenarioRoutes = require('./routes/scenarios');
 const sessionRoutes = require('./routes/sessions');
 const analyticsRoutes = require('./routes/analytics');
 const roadmapRoutes = require('./routes/roadmap');
+const caseStudiesRoutes = require('./routes/casestudies');
 require('dotenv').config();
 
 const app = express();
@@ -14,15 +15,16 @@ app.use(cors({ origin: process.env.CLIENT_ORIGIN || 'http://localhost:5173' }));
 app.use(express.json());
 app.use(morgan('dev'));
 
-app.get('/api/health', (_req, res) => res.json({ ok: true, product: 'PyBe' }));
+app.get('/api/health', (_req, res) => res.json({ ok: true, product: 'PyBe', version: '2.0.0' }));
 app.use('/api/scenarios', scenarioRoutes);
 app.use('/api/sessions', sessionRoutes);
 app.use('/api/analytics', analyticsRoutes);
 app.use('/api/roadmap', roadmapRoutes);
+app.use('/api/casestudies', caseStudiesRoutes);
 
 app.use((error, _req, res, _next) => {
   console.error(error);
   res.status(error.status || 500).json({ message: error.message || 'Server error' });
 });
 
-app.listen(port, () => console.log(`PyBe API running on http://localhost:${port}`));
+app.listen(port, () => console.log(`PyBe API v2.0 running on http://localhost:${port}`));
diff --git a/server/src/routes/casestudies.js b/server/src/routes/casestudies.js
new file mode 100644
index 0000000..5636ff8
--- /dev/null
+++ b/server/src/routes/casestudies.js
@@ -0,0 +1,200 @@
+const express = require('express');
+const router = express.Router();
+
+const CASE_STUDIES = [
+  // ── DEFAULT THEME CASE STUDIES ─────────────────────────────────────────────
+  {
+    id: 'cs-chai-stall',
+    title: 'The Underground Chai Stall',
+    emoji: '🍵',
+    character: 'Ramu',
+    tagline: 'From one cup of chai to an empire — rediscover Lists, Dicts, and Functions.',
+    description: 'Ramu runs a chai stall outside IIT Ropar\'s gate. Follow his journey from tracking a single variable to managing a full menu dictionary. Every growing pain he feels is a Python construct waiting to be discovered.',
+    arc: 'Variables → Lists → Dicts → Functions',
+    pythonJourney: ['variables', 'lists', 'dictionaries', 'functions'],
+    difficulty: 'Beginner → Builder',
+    totalSteps: 4,
+    theme: 'default',
+    color: '#F59E0B'
+  },
+  {
+    id: 'cs-isro',
+    title: 'ISRO Mission Control',
+    emoji: '🚀',
+    character: 'Intern at ISRO',
+    tagline: 'Chandrayaan-3 is live. A FAIL at 2 AM shows why names matter more than positions.',
+    description: 'You are an intern at ISRO during Chandrayaan-3. From three telemetry variables to managing 12 subsystems, a critical FAIL message at 2 AM teaches you why dictionaries exist — because lives depend on looking up by name, not position.',
+    arc: 'Variables → Lists → Dicts → Sets → Modules',
+    pythonJourney: ['variables', 'lists', 'dictionaries', 'sets', 'modules'],
+    difficulty: 'Beginner → Builder',
+    totalSteps: 4,
+    theme: 'default',
+    color: '#3B82F6'
+  },
+  {
+    id: 'cs-instagram',
+    title: 'The Viral Instagram Filter Creator',
+    emoji: '📸',
+    character: 'Filter Developer',
+    tagline: 'Twenty filters, parallel lists out of sync, and users complaining. Sound familiar?',
+    description: 'Build a photo filter app from one variable to a complete class. When your 20 parallel lists fall out of sync and users see broken filters, you discover why bundling related data together isn\'t just elegant — it\'s necessary.',
+    arc: 'Variables → Lists → Dicts → Functions → Classes',
+    pythonJourney: ['variables', 'lists', 'dictionaries', 'functions', 'classes'],
+    difficulty: 'Explorer → Builder',
+    totalSteps: 4,
+    theme: 'default',
+    color: '#EC4899'
+  },
+  {
+    id: 'cs-food-delivery',
+    title: 'Midnight Food Delivery Startup',
+    emoji: '🍕',
+    character: 'Arjun, Meera & Dev',
+    tagline: 'Three friends, a hostel room at 2 AM, and a -₹36 bill that crashed the whole app.',
+    description: 'Three hostel friends launch "HungerFix" at 2 AM. From Maggi and two variables to a full ordering system — the duplicate biryani crisis and a negative-quantity crash teach you why sets and try/except exist: real data is messy.',
+    arc: 'Variables → Lists → Dicts → Sets → try/except',
+    pythonJourney: ['variables', 'lists', 'dictionaries', 'sets', 'error handling'],
+    difficulty: 'Beginner → Builder',
+    totalSteps: 4,
+    theme: 'default',
+    color: '#F97316'
+  },
+  {
+    id: 'cs-ai-playlist',
+    title: 'The AI Playlist That Knows You',
+    emoji: '🎵',
+    character: 'Playlist Builder',
+    tagline: '"Shape of You" for the 23rd time. Your app needs sets — badly.',
+    description: 'Build a music recommendation app from scratch. One mood variable becomes a list of 12 genres, which becomes a set-deduplicated session, which becomes a dictionary of play counts and ratings. Each pain point is a concept waiting to be born.',
+    arc: 'Variables → Lists → Sets → Dicts → Functions',
+    pythonJourney: ['variables', 'lists', 'sets', 'dictionaries', 'functions'],
+    difficulty: 'Beginner → Explorer',
+    totalSteps: 4,
+    theme: 'default',
+    color: '#8B5CF6'
+  },
+  {
+    id: 'cs-kota',
+    title: 'The Kota Coaching Factory',
+    emoji: '📚',
+    character: 'JEE Aspirant',
+    tagline: 'Thirty batchmates. A parent calls. Find Priya\'s rank — the director is watching.',
+    description: 'You are a JEE aspirant at a Kota coaching center tracking 30 batchmates\' ranks. From a single rank variable to a sorted merit list algorithm, every inefficiency you feel maps to a Python construct invented for exactly that pain.',
+    arc: 'Variables → Lists → Dicts → Sorting → Algorithms',
+    pythonJourney: ['variables', 'lists', 'dictionaries', 'sorting', 'algorithms'],
+    difficulty: 'Beginner → Builder',
+    totalSteps: 4,
+    theme: 'default',
+    color: '#10B981'
+  },
+
+  // ── POTTERHEADS THEME CASE STUDIES ─────────────────────────────────────────
+  {
+    id: 'cs-potter-potions',
+    title: 'Hogwarts Potion Brewing & Marauder\'s Map',
+    emoji: '🧙‍♂️',
+    character: 'Potions Apprentice at Hogwarts',
+    tagline: 'Brewing Felix Felicis: Track ingredients, spellbooks, and map locations by magic.',
+    description: 'Master magical data structures at Hogwarts! From storing a single potion ingredient variable to managing a house inventory dictionary and automating brewing functions, experience Python through wizardry.',
+    arc: 'Variables → Lists → Dicts → Functions',
+    pythonJourney: ['variables', 'lists', 'dictionaries', 'functions'],
+    difficulty: 'Beginner → Builder',
+    totalSteps: 4,
+    theme: 'potterheads',
+    color: '#F59E0B'
+  },
+  {
+    id: 'cs-potter-spells',
+    title: 'The Triwizard Spell Vault & House Points',
+    emoji: '🪄',
+    character: 'Triwizard Champion',
+    tagline: 'Decipher dark spells, deduplicate potion runes, and calculate House Points in real-time.',
+    description: 'Face the Triwizard challenges! Manage spell rosters with lists, prevent duplicate curse registrations using sets, and sort House Points dynamically before Dumbledore awards the Cup.',
+    arc: 'Variables → Lists → Dicts → Sets → Sorting',
+    pythonJourney: ['variables', 'lists', 'dictionaries', 'sets', 'sorting'],
+    difficulty: 'Explorer → Builder',
+    totalSteps: 4,
+    theme: 'potterheads',
+    color: '#D97706'
+  },
+
+  // ── MARVEL THEME CASE STUDIES ───────────────────────────────────────────────
+  {
+    id: 'cs-marvel-jarvis',
+    title: 'J.A.R.V.I.S. Mark 85 Suit AI',
+    emoji: '🦾',
+    character: 'Tony Stark\'s AI Engineer',
+    tagline: 'Suit power low! From tracking arc reactor voltage to managing 100 Iron Man armor modules.',
+    description: 'Build J.A.R.V.I.S. from scratch! Track arc reactor output, group armor thruster subsystems, look up weapon status by keyword, and package repulsor beam calculations into reusable functions.',
+    arc: 'Variables → Lists → Dicts → Functions',
+    pythonJourney: ['variables', 'lists', 'dictionaries', 'functions'],
+    difficulty: 'Beginner → Builder',
+    totalSteps: 4,
+    theme: 'marvel',
+    color: '#EF4444'
+  },
+  {
+    id: 'cs-marvel-infinity',
+    title: 'The Infinity Stones Containment Grid',
+    emoji: '💎',
+    character: 'Avenger Tech Lead',
+    tagline: 'Prevent cosmic resonance! Filter duplicate energy signatures and compute gauntlet stability.',
+    description: 'Secure the Infinity Stones! Store energy frequencies in lists, guarantee stone uniqueness using sets, map stone attributes with dictionaries, and handle cosmic surge exceptions gracefully.',
+    arc: 'Variables → Lists → Dicts → Sets → try/except',
+    pythonJourney: ['variables', 'lists', 'dictionaries', 'sets', 'error handling'],
+    difficulty: 'Explorer → Builder',
+    totalSteps: 4,
+    theme: 'marvel',
+    color: '#38BDF8'
+  },
+
+  // ── ANIME THEME CASE STUDIES ────────────────────────────────────────────────
+  {
+    id: 'cs-anime-ninja',
+    title: 'Hidden Leaf Jutsu & Chakra Engine',
+    emoji: '⚔️',
+    character: 'Shinobi Academy Trainee',
+    tagline: 'Unlock your Nindo! From tracking chakra reserves to organizing secret forbidden scrolls.',
+    description: 'Train to become Hokage! Store chakra levels, manage squad lists, look up jutsu hand signs by name, and package secret shadow clone calculations into reusable jutsu functions.',
+    arc: 'Variables → Lists → Dicts → Functions',
+    pythonJourney: ['variables', 'lists', 'dictionaries', 'functions'],
+    difficulty: 'Beginner → Builder',
+    totalSteps: 4,
+    theme: 'anime',
+    color: '#FF2A85'
+  },
+  {
+    id: 'cs-anime-pokedex',
+    title: 'Legendary Creature Hunter & Mecha Sync',
+    emoji: '🐉',
+    character: 'S-Rank Hunter',
+    tagline: 'Dungeon rift open! Deduplicate spotted monsters and compute mecha synchronization rates.',
+    description: 'Enter the hunter dungeon! Track squad power levels, deduplicate wild monster encounters with sets, organize creature stats in dictionaries, and sort hunter guild rankings live.',
+    arc: 'Variables → Lists → Dicts → Sets → Sorting',
+    pythonJourney: ['variables', 'lists', 'dictionaries', 'sets', 'sorting'],
+    difficulty: 'Explorer → Builder',
+    totalSteps: 4,
+    theme: 'anime',
+    color: '#00F5D4'
+  }
+];
+
+router.get('/', (req, res) => {
+  const { theme } = req.query;
+  if (theme && theme !== 'all') {
+    const filtered = CASE_STUDIES.filter(c => {
+      if (theme === 'default') return c.theme === 'default' || !c.theme;
+      return c.theme === theme;
+    });
+    return res.json(filtered);
+  }
+  res.json(CASE_STUDIES);
+});
+
+router.get('/:id', (req, res) => {
+  const cs = CASE_STUDIES.find(c => c.id === req.params.id);
+  if (!cs) return res.status(404).json({ message: 'Case study not found' });
+  res.json(cs);
+});
+
+module.exports = router;
diff --git a/server/src/routes/scenarios.js b/server/src/routes/scenarios.js
index ea17344..393daba 100644
--- a/server/src/routes/scenarios.js
+++ b/server/src/routes/scenarios.js
@@ -5,8 +5,8 @@ const router = express.Router();
 
 router.get('/', async (req, res, next) => {
   try {
-    const { q, concept, difficulty } = req.query;
-    const scenarios = await store.listScenarios({ q, concept, difficulty });
+    const { q, concept, difficulty, theme, caseStudyId } = req.query;
+    const scenarios = await store.listScenarios({ q, concept, difficulty, theme, caseStudyId });
     res.json(scenarios);
   } catch (error) {
     next(error);
diff --git a/server/src/seed.js b/server/src/seed.js
index 2f80d45..8e112a7 100644
--- a/server/src/seed.js
+++ b/server/src/seed.js
@@ -2,6 +2,7 @@ const { resetData } = require('./data/store');
 require('dotenv').config();
 
 const scenarios = [
+  // ─── ORIGINAL BEGINNER SCENARIOS ────────────────────────────────────────────
   {
     title: 'Bag Weight Label',
     difficulty: 'Beginner',
@@ -10,7 +11,9 @@ const scenarios = [
     prompt: 'What single piece of information would you store so the computer can remember the bag weight?',
     objectives: ['Identify one value', 'Give the value a name', 'Connect naming to a variable'],
     sampleReasoning: 'I only need to remember the bag weight, so I would store it with a clear name.',
-    effectivenessScore: 96
+    effectivenessScore: 96,
+    theme: 'classic',
+    caseStudyId: null
   },
   {
     title: 'Rainy Day Choice',
@@ -20,7 +23,9 @@ const scenarios = [
     prompt: 'What small decision rule would help the learner decide whether to carry an umbrella?',
     objectives: ['Notice one condition', 'Choose one action', 'Map the rule to if/else'],
     sampleReasoning: 'If it is raining, carry an umbrella. Otherwise, leave it at home.',
-    effectivenessScore: 95
+    effectivenessScore: 95,
+    theme: 'classic',
+    caseStudyId: null
   },
   {
     title: 'Two Snack Prices',
@@ -30,7 +35,9 @@ const scenarios = [
     prompt: 'How would you figure out the total cost using just the two prices?',
     objectives: ['Store two values', 'Add values', 'Name the result'],
     sampleReasoning: 'I would keep the two prices separately and add them to get the total.',
-    effectivenessScore: 94
+    effectivenessScore: 94,
+    theme: 'classic',
+    caseStudyId: null
   },
   {
     title: 'Greeting by Name',
@@ -40,7 +47,9 @@ const scenarios = [
     prompt: 'What text should the computer remember, and how should it combine that text into a greeting?',
     objectives: ['Store text', 'Combine text', 'Recognize strings'],
     sampleReasoning: 'The computer should store the learner name and place it inside a greeting sentence.',
-    effectivenessScore: 93
+    effectivenessScore: 93,
+    theme: 'classic',
+    caseStudyId: null
   },
   {
     title: 'Pass Mark Check',
@@ -50,7 +59,9 @@ const scenarios = [
     prompt: 'What comparison would decide if the learner passed?',
     objectives: ['Compare two numbers', 'Create a yes/no result', 'Map comparison to condition'],
     sampleReasoning: 'I would compare the score with the pass mark and decide pass if it is high enough.',
-    effectivenessScore: 92
+    effectivenessScore: 92,
+    theme: 'classic',
+    caseStudyId: null
   },
   {
     title: 'Pocket Money Left',
@@ -60,7 +71,9 @@ const scenarios = [
     prompt: 'What two values matter, and how would you find the money left?',
     objectives: ['Name starting amount', 'Name spent amount', 'Subtract to find remaining value'],
     sampleReasoning: 'Start with the original money, subtract the spent amount, and store what remains.',
-    effectivenessScore: 91
+    effectivenessScore: 91,
+    theme: 'classic',
+    caseStudyId: null
   },
   {
     title: 'Favorite Color List',
@@ -70,7 +83,9 @@ const scenarios = [
     prompt: 'How would you keep all three colors together instead of making separate notes?',
     objectives: ['Group related values', 'Recognize a collection', 'Map grouping to a list'],
     sampleReasoning: 'Since all values are colors, I would keep them together in one list.',
-    effectivenessScore: 90
+    effectivenessScore: 90,
+    theme: 'classic',
+    caseStudyId: null
   },
   {
     title: 'First Item in a Bag',
@@ -80,7 +95,9 @@ const scenarios = [
     prompt: 'How would you ask for only the first item?',
     objectives: ['Notice order', 'Pick one position', 'Connect position to indexing'],
     sampleReasoning: 'The first item is based on its position in the ordered group.',
-    effectivenessScore: 89
+    effectivenessScore: 89,
+    theme: 'classic',
+    caseStudyId: null
   },
   {
     title: 'Attendance Count',
@@ -90,7 +107,9 @@ const scenarios = [
     prompt: 'What question would help you find how many students are present?',
     objectives: ['Recognize a group', 'Ask for its size', 'Connect size to length'],
     sampleReasoning: 'I would count how many names are in the present-students list.',
-    effectivenessScore: 88
+    effectivenessScore: 88,
+    theme: 'classic',
+    caseStudyId: null
   },
   {
     title: 'Temperature Message',
@@ -100,8 +119,12 @@ const scenarios = [
     prompt: 'What simple rule would decide whether to show Hot or Comfortable?',
     objectives: ['Set a threshold', 'Compare one value', 'Choose one message'],
     sampleReasoning: 'If the temperature is above the threshold, show Hot; otherwise show Comfortable.',
-    effectivenessScore: 87
+    effectivenessScore: 87,
+    theme: 'classic',
+    caseStudyId: null
   },
+
+  // ─── ORIGINAL EXPLORER SCENARIOS ────────────────────────────────────────────
   {
     title: 'Water Bottle Reminder',
     difficulty: 'Explorer',
@@ -110,7 +133,9 @@ const scenarios = [
     prompt: 'How would you avoid writing the same reminder separately for every break?',
     objectives: ['Recognize repeated action', 'Identify each break', 'Map repetition to a loop'],
     sampleReasoning: 'For every break, show the same water reminder.',
-    effectivenessScore: 96
+    effectivenessScore: 96,
+    theme: 'classic',
+    caseStudyId: null
   },
   {
     title: 'Find the Longest Pencil',
@@ -120,7 +145,9 @@ const scenarios = [
     prompt: 'What small comparison would you repeat as you look through the lengths?',
     objectives: ['Keep current best', 'Compare one item at a time', 'Update when larger'],
     sampleReasoning: 'Start with one pencil as the longest, then compare each next pencil against it.',
-    effectivenessScore: 95
+    effectivenessScore: 95,
+    theme: 'classic',
+    caseStudyId: null
   },
   {
     title: 'Clean Chore Checklist',
@@ -130,7 +157,9 @@ const scenarios = [
     prompt: 'How would you go through each chore and mark it as done?',
     objectives: ['Store chores in a list', 'Process one chore at a time', 'Repeat a simple action'],
     sampleReasoning: 'Put chores in a list and handle each chore one by one.',
-    effectivenessScore: 94
+    effectivenessScore: 94,
+    theme: 'classic',
+    caseStudyId: null
   },
   {
     title: 'Movie Age Filter',
@@ -140,7 +169,9 @@ const scenarios = [
     prompt: 'What rule would decide which movies a 12-year-old can see?',
     objectives: ['Check one item rule', 'Keep allowed items', 'Map rule to filtering'],
     sampleReasoning: 'For each movie, keep it only if the learner age is at least the minimum age.',
-    effectivenessScore: 93
+    effectivenessScore: 93,
+    theme: 'classic',
+    caseStudyId: null
   },
   {
     title: 'Classroom Supply Lookup',
@@ -150,7 +181,9 @@ const scenarios = [
     prompt: 'How would you store each supply name with its count?',
     objectives: ['Pair names with values', 'Look up by name', 'Map pairs to a dictionary'],
     sampleReasoning: 'Each supply has a count, so I would store supply names as keys with counts as values.',
-    effectivenessScore: 92
+    effectivenessScore: 92,
+    theme: 'classic',
+    caseStudyId: null
   },
   {
     title: 'Bus Stop Search',
@@ -160,7 +193,9 @@ const scenarios = [
     prompt: 'How would you check the stops one at a time until you find the target?',
     objectives: ['Identify target', 'Scan a list', 'Stop when found'],
     sampleReasoning: 'Look at each stop and compare it with the stop I want.',
-    effectivenessScore: 91
+    effectivenessScore: 91,
+    theme: 'classic',
+    caseStudyId: null
   },
   {
     title: 'Average Practice Score',
@@ -170,7 +205,9 @@ const scenarios = [
     prompt: 'What two small steps are needed before dividing?',
     objectives: ['Add all scores', 'Count scores', 'Divide total by count'],
     sampleReasoning: 'Find the total of all scores, count how many scores there are, then divide.',
-    effectivenessScore: 90
+    effectivenessScore: 90,
+    theme: 'classic',
+    caseStudyId: null
   },
   {
     title: 'Separate Even Roll Numbers',
@@ -180,7 +217,9 @@ const scenarios = [
     prompt: 'What small test tells you whether a roll number is even?',
     objectives: ['Test divisibility by two', 'Keep matching numbers', 'Connect remainder to modulo'],
     sampleReasoning: 'A roll number is even if dividing by two leaves no remainder.',
-    effectivenessScore: 89
+    effectivenessScore: 89,
+    theme: 'classic',
+    caseStudyId: null
   },
   {
     title: 'Capitalize Name Tags',
@@ -190,7 +229,9 @@ const scenarios = [
     prompt: 'What same text-cleaning action should happen to every name?',
     objectives: ['Recognize repeated string change', 'Apply to each name', 'Create cleaned names'],
     sampleReasoning: 'For each name, convert it to title case before printing the tag.',
-    effectivenessScore: 88
+    effectivenessScore: 88,
+    theme: 'classic',
+    caseStudyId: null
   },
   {
     title: 'Find Missing Homework',
@@ -200,8 +241,12 @@ const scenarios = [
     prompt: 'How would you reason about who is missing from the submitted list?',
     objectives: ['Compare two groups', 'Find difference', 'Map group difference to sets'],
     sampleReasoning: 'Take everyone in the class and remove the students who submitted.',
-    effectivenessScore: 87
+    effectivenessScore: 87,
+    theme: 'classic',
+    caseStudyId: null
   },
+
+  // ─── ORIGINAL BUILDER SCENARIOS ─────────────────────────────────────────────
   {
     title: 'Reusable Discount Rule',
     difficulty: 'Builder',
@@ -210,7 +255,9 @@ const scenarios = [
     prompt: 'What inputs should a reusable discount helper receive?',
     objectives: ['Identify reusable rule', 'Choose inputs', 'Return discounted price'],
     sampleReasoning: 'The helper needs the bill amount and should return the final price after applying the rule.',
-    effectivenessScore: 96
+    effectivenessScore: 96,
+    theme: 'classic',
+    caseStudyId: null
   },
   {
     title: 'Mini Quiz Checker',
@@ -220,7 +267,9 @@ const scenarios = [
     prompt: 'How would you design a tiny reusable checker for one question?',
     objectives: ['Accept learner answer', 'Accept correct answer', 'Return right or wrong'],
     sampleReasoning: 'Compare the learner answer with the correct answer and return whether they match.',
-    effectivenessScore: 95
+    effectivenessScore: 95,
+    theme: 'classic',
+    caseStudyId: null
   },
   {
     title: 'Step Counter Function',
@@ -230,7 +279,9 @@ const scenarios = [
     prompt: 'How would you make a reusable helper that returns the total steps?',
     objectives: ['Accept a list', 'Add all values', 'Return total'],
     sampleReasoning: 'The function should take step counts, add them, and give back the total.',
-    effectivenessScore: 94
+    effectivenessScore: 94,
+    theme: 'classic',
+    caseStudyId: null
   },
   {
     title: 'Safe Username Maker',
@@ -240,7 +291,9 @@ const scenarios = [
     prompt: 'What small text transformations should a username function perform?',
     objectives: ['Accept a name', 'Normalize text', 'Return username'],
     sampleReasoning: 'Make the name lowercase and remove spaces so it can be used as a username.',
-    effectivenessScore: 93
+    effectivenessScore: 93,
+    theme: 'classic',
+    caseStudyId: null
   },
   {
     title: 'Retry Until Valid',
@@ -250,7 +303,9 @@ const scenarios = [
     prompt: 'What condition tells the program to keep asking?',
     objectives: ['Define valid input', 'Repeat while invalid', 'Stop after valid value'],
     sampleReasoning: 'Keep asking while the number is not positive, then stop once it is valid.',
-    effectivenessScore: 92
+    effectivenessScore: 92,
+    theme: 'classic',
+    caseStudyId: null
   },
   {
     title: 'Simple Score Report',
@@ -260,7 +315,9 @@ const scenarios = [
     prompt: 'How would you package two related pieces of information in one result?',
     objectives: ['Create key-value structure', 'Return structured result', 'Connect structure to dictionary'],
     sampleReasoning: 'Return a dictionary with the learner name and score as labeled values.',
-    effectivenessScore: 91
+    effectivenessScore: 91,
+    theme: 'classic',
+    caseStudyId: null
   },
   {
     title: 'Task Status Updater',
@@ -270,7 +327,9 @@ const scenarios = [
     prompt: 'What exact value changes when a task is completed?',
     objectives: ['Find one task', 'Change one status', 'Understand updating data'],
     sampleReasoning: 'Find the task by name and change its status from pending to done.',
-    effectivenessScore: 90
+    effectivenessScore: 90,
+    theme: 'classic',
+    caseStudyId: null
   },
   {
     title: 'Small Receipt Builder',
@@ -280,7 +339,9 @@ const scenarios = [
     prompt: 'What pieces should a receipt function combine into a readable line?',
     objectives: ['Accept item and price', 'Format text', 'Return one receipt line'],
     sampleReasoning: 'Combine the item name and price into one clear sentence.',
-    effectivenessScore: 89
+    effectivenessScore: 89,
+    theme: 'classic',
+    caseStudyId: null
   },
   {
     title: 'Choose Next Scenario',
@@ -290,7 +351,9 @@ const scenarios = [
     prompt: 'What simple score rule could decide the next difficulty?',
     objectives: ['Set score thresholds', 'Branch by score', 'Return next level'],
     sampleReasoning: 'If the score is high choose harder, if low choose easier, otherwise stay similar.',
-    effectivenessScore: 88
+    effectivenessScore: 88,
+    theme: 'classic',
+    caseStudyId: null
   },
   {
     title: 'Reflection Keyword Finder',
@@ -300,13 +363,955 @@ const scenarios = [
     prompt: 'What tiny search would detect that the reflection may need extra support?',
     objectives: ['Choose keywords', 'Search text', 'Return support signal'],
     sampleReasoning: 'Look for words like confused or stuck and flag the reflection if they appear.',
-    effectivenessScore: 87
+    effectivenessScore: 87,
+    theme: 'classic',
+    caseStudyId: null
+  },
+
+  // ─── UADE THEME 1: THE UNDERGROUND CHAI STALL ───────────────────────────────
+  {
+    title: 'Ramu\'s First Chai Variable',
+    difficulty: 'Beginner',
+    concepts: ['variables'],
+    context: 'Ramu runs a tiny chai stall outside IIT Ropar\'s gate. He sells only one type of chai: ginger tea at ₹15 a cup. He wants to track how many cups he sold today.',
+    prompt: 'Ramu asks you: "I only need to remember one thing — how many cups I sold. What should I call it?" How would you help him store this single piece of information?',
+    objectives: ['Identify one value to track', 'Give it a meaningful name', 'Understand why naming matters'],
+    sampleReasoning: 'Ramu needs one piece of information — cups_sold. Naming it clearly means he can use it later to calculate earnings.',
+    effectivenessScore: 95,
+    theme: 'chai-stall',
+    caseStudyId: 'cs-chai-stall',
+    themeStep: 1,
+    themeArc: 'Variables → Lists → Dicts → Functions',
+    themeEmoji: '🍵'
+  },
+  {
+    title: 'Ramu Adds More Chai Types',
+    difficulty: 'Beginner',
+    concepts: ['lists'],
+    context: 'Ramu\'s stall became popular. Now he sells 8 types: ginger, masala, elaichi, tulsi, lemon, mint, kadak, and cutting. He has 8 separate variables: chai1, chai2... chai8. His notebook is a mess.',
+    prompt: 'Ramu shouts: "I have 8 variables and if I add one more chai, I need a 9th! This is madness!" What single structure could hold ALL his chai types together?',
+    objectives: ['Feel the pain of too many variables', 'Discover the concept of grouping', 'Map grouping to a Python list'],
+    sampleReasoning: 'All 8 items are chai types. They belong together. One list called chai_types can hold all of them and I can add more without creating new variables.',
+    effectivenessScore: 97,
+    theme: 'chai-stall',
+    caseStudyId: 'cs-chai-stall',
+    themeStep: 2,
+    themeArc: 'Variables → Lists → Dicts → Functions',
+    themeEmoji: '🍵'
+  },
+  {
+    title: 'Ramu\'s Price Lookup Problem',
+    difficulty: 'Explorer',
+    concepts: ['dictionaries'],
+    context: 'Ramu now has two parallel lists: chai_types = ["ginger", "masala", ...] and prices = [15, 20, ...]. A customer asks "How much is tulsi?" Ramu has to count to position 4 in one list, then find position 4 in another. He made a mistake yesterday — he reordered the types list but forgot to reorder prices.',
+    prompt: 'Ramu lost ₹200 yesterday because his lists got out of sync. He says: "I want to look up a chai by NAME, not by number." What structure lets you store the name AND price together as a pair?',
+    objectives: ['Understand why parallel lists break', 'Discover named lookup', 'Map key-value pairs to a dictionary'],
+    sampleReasoning: 'A dictionary maps each chai name directly to its price. "tulsi" always points to its correct price — no counting, no sync issues.',
+    effectivenessScore: 98,
+    theme: 'chai-stall',
+    caseStudyId: 'cs-chai-stall',
+    themeStep: 3,
+    themeArc: 'Variables → Lists → Dicts → Functions',
+    themeEmoji: '🍵'
+  },
+  {
+    title: 'Ramu\'s Evening Revenue Calculator',
+    difficulty: 'Builder',
+    concepts: ['functions'],
+    context: 'Every evening, Ramu calculates revenue for each chai type: cups_sold × price. He copy-pasted this calculation 8 times in his notebook — once for each chai. When he raised masala chai price, he had to update 3 different places and still missed one.',
+    prompt: 'Ramu says: "I write the same calculation for every single chai type. There has to be a better way." How would you package this repeatable calculation so Ramu writes it ONCE and reuses it for every chai?',
+    objectives: ['Identify repeated logic', 'Package it as a reusable process', 'Map the process to a Python function'],
+    sampleReasoning: 'A function called calculate_revenue takes cups_sold and price_per_cup, then returns the total. Write once, call it for each chai type.',
+    effectivenessScore: 96,
+    theme: 'chai-stall',
+    caseStudyId: 'cs-chai-stall',
+    themeStep: 4,
+    themeArc: 'Variables → Lists → Dicts → Functions',
+    themeEmoji: '🍵'
+  },
+
+  // ─── UADE THEME 2: ISRO MISSION CONTROL ──────────────────────────────────────
+  {
+    title: 'ISRO: Three Telemetry Variables',
+    difficulty: 'Beginner',
+    concepts: ['variables'],
+    context: 'You are an intern at ISRO\'s Chandrayaan-3 mission control. The spacecraft has three critical readings: altitude (in km), fuel level (in %), and velocity (in m/s). Right now you have three separate variables on your screen.',
+    prompt: 'The mission director asks: "What are the three values we must track at all times?" How would you name and store these three critical pieces of mission data?',
+    objectives: ['Name critical values meaningfully', 'Understand that names carry meaning in code', 'Store mission-critical data as variables'],
+    sampleReasoning: 'altitude_km, fuel_percent, velocity_ms — each name tells exactly what unit and what it measures. Naming matters in space.',
+    effectivenessScore: 94,
+    theme: 'isro',
+    caseStudyId: 'cs-isro',
+    themeStep: 1,
+    themeArc: 'Variables → Lists → Dicts → Sets → Modules',
+    themeEmoji: '🚀'
+  },
+  {
+    title: 'ISRO: Twelve Subsystem Chaos',
+    difficulty: 'Explorer',
+    concepts: ['lists'],
+    context: 'Chandrayaan-3 has 12 subsystems: propulsion, thermal, communication, power, navigation, attitude control, payload, avionics, structure, mechanisms, software, and ground systems. A second intern added three more subsystems without telling you. Now you have 15 separate variables. Someone\'s variable is named temp2 and nobody knows what it means.',
+    prompt: 'The mission director is furious: "Why do we have 15 separate variables? One new intern and the whole codebase breaks!" What structure would hold all subsystem names together and survive additions without chaos?',
+    objectives: ['Understand chaos from ungrouped variables', 'Group related items under one name', 'Discover lists as a solution to this pain'],
+    sampleReasoning: 'A list called subsystems holds all 12 names. Adding a new one is just appending to the list — no new variables, no naming chaos.',
+    effectivenessScore: 97,
+    theme: 'isro',
+    caseStudyId: 'cs-isro',
+    themeStep: 2,
+    themeArc: 'Variables → Lists → Dicts → Sets → Modules',
+    themeEmoji: '🚀'
+  },
+  {
+    title: 'ISRO: FAIL at Position 7',
+    difficulty: 'Explorer',
+    concepts: ['dictionaries'],
+    context: 'It is 2:17 AM. The status board shows: [OK, OK, OK, FAIL, OK, OK, OK, OK, OK, OK, OK, OK]. Subsystem at index 3 failed. But which subsystem IS index 3? You have to mentally count: propulsion=0, thermal=1, communication=2, power=3. It\'s 2 AM. You miscounted twice.',
+    prompt: 'The mission director shouts: "I don\'t care about position 3! I need to know which SUBSYSTEM failed by NAME!" What structure would let you look up subsystem status by name, not by position?',
+    objectives: ['Feel the danger of position-based lookup', 'Discover named lookup under pressure', 'Map subsystem → status as dictionary'],
+    sampleReasoning: 'A dictionary maps each subsystem name to its status. status["power"] = "FAIL" — no counting, no miscount at 2 AM.',
+    effectivenessScore: 99,
+    theme: 'isro',
+    caseStudyId: 'cs-isro',
+    themeStep: 3,
+    themeArc: 'Variables → Lists → Dicts → Sets → Modules',
+    themeEmoji: '🚀'
+  },
+  {
+    title: 'ISRO: Duplicate Telemetry Signals',
+    difficulty: 'Explorer',
+    concepts: ['sets'],
+    context: 'Three ground stations — Bengaluru, Mauritius, and Bhopal — all send telemetry. Due to a relay issue, the Bengaluru station sent the same altitude reading 14 times. Your data array has the same reading repeated across many entries. The average is now wrong.',
+    prompt: 'The data scientist says: "We\'re getting duplicate readings from the same timestamp. We need only UNIQUE readings." What structure automatically guarantees that each value appears only once, no matter how many times it is submitted?',
+    objectives: ['Understand the cost of duplicates', 'Discover uniqueness as a data property', 'Map uniqueness guarantee to Python sets'],
+    sampleReasoning: 'A set only holds unique values. Adding the same altitude reading 14 times still results in one entry. Sets solve the duplicate problem automatically.',
+    effectivenessScore: 96,
+    theme: 'isro',
+    caseStudyId: 'cs-isro',
+    themeStep: 4,
+    themeArc: 'Variables → Lists → Dicts → Sets → Modules',
+    themeEmoji: '🚀'
+  },
+
+  // ─── UADE THEME 3: THE VIRAL INSTAGRAM FILTER CREATOR ────────────────────────
+  {
+    title: 'Filter App: The First Variable',
+    difficulty: 'Beginner',
+    concepts: ['variables'],
+    context: 'You are building a photo filter app. Right now you have one filter: "Warm Vintage." It has one setting: brightness (set to 1.3 by default).',
+    prompt: 'Your app has one setting for one filter. How do you store that brightness value so you can use it to process the photo?',
+    objectives: ['Store a single filter setting', 'Name it meaningfully', 'Understand how naming connects to usage'],
+    sampleReasoning: 'brightness = 1.3 — a named variable holds the setting and can be referenced whenever the filter is applied.',
+    effectivenessScore: 91,
+    theme: 'instagram',
+    caseStudyId: 'cs-instagram',
+    themeStep: 1,
+    themeArc: 'Variables → Lists → Dicts → Functions → Classes',
+    themeEmoji: '📸'
+  },
+  {
+    title: 'Filter App: Twenty Filters, Twenty Variables',
+    difficulty: 'Explorer',
+    concepts: ['lists'],
+    context: 'Your filter app now has 20 filters: Warm Vintage, Neon Dreams, Faded Film, Ocean Breeze... You have 20 separate variables: filter1, filter2... filter20. Users swipe through filters. When they swipe right to filter number 7, your code tries to access filter7 — but you can\'t swipe to a variable name.',
+    prompt: 'A friend tries your app and says: "Swiping is broken — I can only see the first filter." Your code cannot loop over 20 separate variables. What single structure would hold all 20 filter names so your swipe gesture can navigate them by position?',
+    objectives: ['Understand that variables cannot be iterated', 'Discover that lists enable position-based navigation', 'Connect swiping to list indexing'],
+    sampleReasoning: 'A list called filters holds all 20 names. swipe_right moves the index forward by 1. filters[current_index] gives the active filter.',
+    effectivenessScore: 97,
+    theme: 'instagram',
+    caseStudyId: 'cs-instagram',
+    themeStep: 2,
+    themeArc: 'Variables → Lists → Dicts → Functions → Classes',
+    themeEmoji: '📸'
+  },
+  {
+    title: 'Filter App: Five Settings Per Filter',
+    difficulty: 'Explorer',
+    concepts: ['dictionaries'],
+    context: 'Each filter now has 5 settings: brightness, contrast, saturation, hue_shift, and grain. You have 5 parallel lists: brightness_list[7], contrast_list[7], saturation_list[7]... You updated the brightness list for "Neon Dreams" but forgot to update the contrast list. The filter looks broken.',
+    prompt: 'You wasted 3 hours debugging because your 5 lists got out of sync. A mentor says: "What if each filter was ONE complete package with all its settings together?" What structure bundles multiple named settings into a single unit?',
+    objectives: ['Feel the pain of parallel lists diverging', 'Discover bundling related data together', 'Map a filter\'s settings to a dictionary'],
+    sampleReasoning: 'A dictionary for each filter: {"brightness": 1.3, "contrast": 1.1, "saturation": 1.4, "hue_shift": 10, "grain": 0.2}. All settings travel together — they can\'t fall out of sync.',
+    effectivenessScore: 98,
+    theme: 'instagram',
+    caseStudyId: 'cs-instagram',
+    themeStep: 3,
+    themeArc: 'Variables → Lists → Dicts → Functions → Classes',
+    themeEmoji: '📸'
+  },
+  {
+    title: 'Filter App: Copy-Paste Logic Breaks',
+    difficulty: 'Builder',
+    concepts: ['functions'],
+    context: 'You apply filters by copy-pasting the same apply_filter logic for each of your 20 filters. When you want to add a "fade" effect that dims the edges, you have to add it in 20 places. You added it in 19 places and forgot filter number 14. Users are complaining that "Moody Cinema" doesn\'t fade.',
+    prompt: 'A senior dev looks at your code and says: "You have the same 15 lines copied 20 times. If you change anything, you\'ll miss one. EVERY time." How would you package the apply-filter logic so you write it once and it works for every filter?',
+    objectives: ['Experience the maintenance nightmare of copy-pasted logic', 'Understand DRY: Don\'t Repeat Yourself', 'Package repeatable logic as a function'],
+    sampleReasoning: 'def apply_filter(photo, filter_settings): takes a photo and a filter dict, applies all settings, returns the modified photo. Called once per filter — no copy-paste.',
+    effectivenessScore: 96,
+    theme: 'instagram',
+    caseStudyId: 'cs-instagram',
+    themeStep: 4,
+    themeArc: 'Variables → Lists → Dicts → Functions → Classes',
+    themeEmoji: '📸'
+  },
+
+  // ─── UADE THEME 4: MIDNIGHT FOOD DELIVERY STARTUP ────────────────────────────
+  {
+    title: 'Hostel Startup: One Item, Two Variables',
+    difficulty: 'Beginner',
+    concepts: ['variables'],
+    context: 'It is 2 AM in a hostel room. Three friends — Arjun, Meera, and Dev — just launched "HungerFix," a food delivery app for their campus. They have exactly one item: Maggi. Price: ₹30.',
+    prompt: 'The friends need the app to remember what they sell and for how much. What are the two pieces of information they absolutely need to store, and how would you name them clearly?',
+    objectives: ['Identify the minimum data needed', 'Name variables descriptively', 'Understand that variables hold the state of the app'],
+    sampleReasoning: 'item_name = "Maggi" and item_price = 30. Simple, named, and the whole app can reference these two values.',
+    effectivenessScore: 93,
+    theme: 'food-delivery',
+    caseStudyId: 'cs-food-delivery',
+    themeStep: 1,
+    themeArc: 'Variables → Lists → Dicts → Sets → try/except',
+    themeEmoji: '🍕'
+  },
+  {
+    title: 'Hostel Startup: Fifteen Items, No Search',
+    difficulty: 'Explorer',
+    concepts: ['lists'],
+    context: 'By night 3, HungerFix has 15 items: Maggi, Bread-Omelette, Poha, Upma, Vada Pav... Users are texting "Do you have Poha?" Arjun has to scroll through 15 separate variables to check. He also cannot display a menu — you can\'t print 15 separate variables in a loop.',
+    prompt: 'Dev says: "We can\'t even show users a menu because we have 15 variables. I can\'t loop over variables!" What structure would let you store all 15 items so you can loop through them, display them, and search them?',
+    objectives: ['Understand that iteration requires a collection', 'Discover that loops need lists', 'Connect menu display to list traversal'],
+    sampleReasoning: 'menu = ["Maggi", "Bread-Omelette", "Poha", ...]. Now for item in menu: print(item) displays the whole menu. And "Poha" in menu checks availability instantly.',
+    effectivenessScore: 96,
+    theme: 'food-delivery',
+    caseStudyId: 'cs-food-delivery',
+    themeStep: 2,
+    themeArc: 'Variables → Lists → Dicts → Sets → try/except',
+    themeEmoji: '🍕'
+  },
+  {
+    title: 'Hostel Startup: The Duplicate Biryani Crisis',
+    difficulty: 'Explorer',
+    concepts: ['sets'],
+    context: 'Night 10. Two friends — Ananya and Rohan — both order the last biryani at 11:58 PM simultaneously. Both orders go through. The friends running the stall have only ONE biryani. They cook two. Costs double. One customer still waits.',
+    prompt: 'Meera says: "We need to track active orders, but we can\'t allow the SAME item to be ordered twice if only one is in stock." What structure would automatically prevent the same order from appearing twice — no manual checking needed?',
+    objectives: ['Understand the cost of duplicates in real systems', 'Discover sets as a membership uniqueness guarantee', 'Apply set membership to order deduplication'],
+    sampleReasoning: 'active_orders = set(). When Ananya orders biryani: if "biryani" not in active_orders, add it. When Rohan orders: "biryani" is already in the set — reject it. Sets prevent duplicates automatically.',
+    effectivenessScore: 97,
+    theme: 'food-delivery',
+    caseStudyId: 'cs-food-delivery',
+    themeStep: 3,
+    themeArc: 'Variables → Lists → Dicts → Sets → try/except',
+    themeEmoji: '🍕'
+  },
+  {
+    title: 'Hostel Startup: The Crashed Order History',
+    difficulty: 'Builder',
+    concepts: ['error handling', 'try/except'],
+    context: 'Night 14. A user types a quantity of -3 samosas. The app tries to calculate the bill: -3 × ₹12 = -₹36. The app charges them NEGATIVE money and then crashes trying to write to the orders file. The crash wipes the entire order history. 47 orders gone.',
+    prompt: 'Dev stares at the empty orders file at 3 AM and says: "A user broke our app with a negative number. We had no plan for this." How would you build a safety net that catches bad input BEFORE it reaches the calculation and file-write — so the app never crashes and data is never lost?',
+    objectives: ['Understand that real programs receive unexpected input', 'Discover defensive programming', 'Map error catching to try/except'],
+    sampleReasoning: 'Wrap the quantity input and bill calculation in a try block. If quantity is negative, raise a ValueError. The except block shows the user an error without crashing — and the order history is never touched.',
+    effectivenessScore: 98,
+    theme: 'food-delivery',
+    caseStudyId: 'cs-food-delivery',
+    themeStep: 4,
+    themeArc: 'Variables → Lists → Dicts → Sets → try/except',
+    themeEmoji: '🍕'
+  },
+
+  // ─── UADE THEME 5: THE AI PLAYLIST ────────────────────────────────────────────
+  {
+    title: 'Playlist: One Mood, One Genre',
+    difficulty: 'Beginner',
+    concepts: ['variables'],
+    context: 'You are building an app that learns your music taste. Right now it knows one thing: your current mood. When you\'re in a "study" mood, it plays lo-fi. One mood, one genre.',
+    prompt: 'The app needs to remember what mood you are in right now. How would you store the current mood so the app can decide what to play?',
+    objectives: ['Store state as a variable', 'Understand that apps need to remember things', 'Connect variable to decision-making'],
+    sampleReasoning: 'current_mood = "study" — one variable holds the current state, and the app can check it to select a playlist.',
+    effectivenessScore: 90,
+    theme: 'ai-playlist',
+    caseStudyId: 'cs-ai-playlist',
+    themeStep: 1,
+    themeArc: 'Variables → Lists → Loops → Sets → Dicts → Functions',
+    themeEmoji: '🎵'
+  },
+  {
+    title: 'Playlist: Twelve Genres, No Loop',
+    difficulty: 'Explorer',
+    concepts: ['lists', 'loops'],
+    context: 'Your app now knows 12 genres you love: lo-fi, jazz, indie, classical, synthwave, ambient, folk, blues, punk, metal, hip-hop, and bossa nova. You have 12 separate variables. The recommendation engine needs to check all of them. You\'re writing: check_genre1(), check_genre2()... twelve times.',
+    prompt: 'Your code has 12 separate function calls — one for each genre. Adding a 13th genre means adding another line. The recommendation logic cannot adapt dynamically. What structure lets you loop through all genres with a single repeated action?',
+    objectives: ['Understand that repetitive calls need loops', 'Discover that lists enable dynamic iteration', 'Connect recommendation loop to list traversal'],
+    sampleReasoning: 'genres = ["lo-fi", "jazz", ...]. for genre in genres: check_genre(genre) — one loop handles 12 or 1200 genres. Adding a new genre is one append.',
+    effectivenessScore: 95,
+    theme: 'ai-playlist',
+    caseStudyId: 'cs-ai-playlist',
+    themeStep: 2,
+    themeArc: 'Variables → Lists → Loops → Sets → Dicts → Functions',
+    themeEmoji: '🎵'
+  },
+  {
+    title: 'Playlist: Shape of You, Again',
+    difficulty: 'Explorer',
+    concepts: ['sets'],
+    context: 'Your recommendation engine keeps surfacing "Shape of You" — you\'ve rated it 4 stars and it keeps showing up. You\'ve heard it 23 times this week. Your recently_played list has the same 5 songs repeated across 200 entries.',
+    prompt: 'You tell the app: "I want variety. Never play the same song twice in one session." The recently_played list doesn\'t prevent repeats because lists allow duplicates. What structure would automatically guarantee that each song in a session appears exactly once, no matter how many times the engine tries to add it?',
+    objectives: ['Experience the frustration of duplicates in recommendations', 'Discover sets as a uniqueness enforcer', 'Apply sets to deduplication of a playlist'],
+    sampleReasoning: 'session_played = set(). When the engine picks a song, check: if song not in session_played, play it and add to the set. Sets reject duplicates — "Shape of You" gets added once and stays there.',
+    effectivenessScore: 96,
+    theme: 'ai-playlist',
+    caseStudyId: 'cs-ai-playlist',
+    themeStep: 3,
+    themeArc: 'Variables → Lists → Loops → Sets → Dicts → Functions',
+    themeEmoji: '🎵'
+  },
+  {
+    title: 'Playlist: Storing Play Count AND Rating',
+    difficulty: 'Explorer',
+    concepts: ['dictionaries'],
+    context: 'The app needs to remember two things per song: how many times you played it, and what you rated it (1–5 stars). You have two parallel lists: play_counts[i] and ratings[i]. You sorted one list by count and forgot to sort the other. A song shows a 5-star rating next to the wrong play count.',
+    prompt: 'Your recommendation score is wrong because the two lists got out of sync again. A friend suggests: "What if each song carried all its own information — play count AND rating — as one complete package?" What structure bundles multiple named values for one song together?',
+    objectives: ['Experience sync failure of parallel lists', 'Discover that dictionaries bundle related data', 'Map a song\'s stats to a dictionary'],
+    sampleReasoning: 'songs = {"Shape of You": {"play_count": 23, "rating": 4}}. The song carries its own data. Sort by play_count? The rating comes along automatically.',
+    effectivenessScore: 97,
+    theme: 'ai-playlist',
+    caseStudyId: 'cs-ai-playlist',
+    themeStep: 4,
+    themeArc: 'Variables → Lists → Loops → Sets → Dicts → Functions',
+    themeEmoji: '🎵'
+  },
+
+  // ─── UADE THEME 6: THE KOTA COACHING FACTORY ──────────────────────────────────
+  {
+    title: 'Kota: Your JEE Rank Variable',
+    difficulty: 'Beginner',
+    concepts: ['variables'],
+    context: 'You are a JEE aspirant at a Kota coaching center. You just got your mock test rank: 4,217. That\'s your current rank. Everything in your day — which batch you\'re in, which counselor you see — depends on this one number.',
+    prompt: 'The coaching center\'s system needs to store your rank so it can decide your batch placement. What would you call this piece of information, and why does the name matter?',
+    objectives: ['Store a single important value', 'Choose a meaningful name over a generic one', 'Understand how names convey intent'],
+    sampleReasoning: 'my_jee_rank = 4217 — the name tells anyone reading the code exactly what this number represents. rank = 4217 is fine, but x = 4217 tells you nothing.',
+    effectivenessScore: 92,
+    theme: 'kota',
+    caseStudyId: 'cs-kota',
+    themeStep: 1,
+    themeArc: 'Variables → Lists → Dicts → Sorting → Nested structures',
+    themeEmoji: '📚'
+  },
+  {
+    title: 'Kota: Thirty Batchmates, Thirty Variables',
+    difficulty: 'Explorer',
+    concepts: ['lists'],
+    context: 'Your batch has 30 students. The director wants the batch average rank. You have 30 separate variables: rank_arjun, rank_priya, rank_dev... To calculate the average, you add all 30 variables manually. A new student joins — you add rank_newstudent and forget to include them in the average calculation.',
+    prompt: 'The director asks: "Why does adding one student break the average?" The answer is: you are manually managing 30 separate names. What structure would let you add a new rank in ONE place and have the average work automatically?',
+    objectives: ['Feel the fragility of ungrouped data', 'Discover that collections allow dynamic computation', 'Connect list to automatic aggregate operations'],
+    sampleReasoning: 'batch_ranks = [4217, 2891, 6043, ...]. To add a student: batch_ranks.append(new_rank). Average: sum(batch_ranks) / len(batch_ranks). Automatic — no manual updates.',
+    effectivenessScore: 96,
+    theme: 'kota',
+    caseStudyId: 'cs-kota',
+    themeStep: 2,
+    themeArc: 'Variables → Lists → Dicts → Sorting → Nested structures',
+    themeEmoji: '📚'
+  },
+  {
+    title: 'Kota: Find Priya\'s Rank by Name',
+    difficulty: 'Explorer',
+    concepts: ['dictionaries'],
+    context: 'A parent calls and asks: "What is Priya Sharma\'s rank?" You have a list of 30 ranks. You have to find which position Priya is at, then look up that position in the rank list. The director is watching. It takes 40 seconds.',
+    prompt: 'The director says: "In a real coaching center, I need to look up any student\'s rank by NAME — not by finding their position first." What structure maps each student\'s name directly to their rank?',
+    objectives: ['Experience slow sequential lookup under pressure', 'Discover named direct lookup', 'Map student → rank as a dictionary'],
+    sampleReasoning: 'ranks = {"Priya Sharma": 2891, "Arjun Dev": 4217, ...}. ranks["Priya Sharma"] gives her rank immediately — no searching needed.',
+    effectivenessScore: 97,
+    theme: 'kota',
+    caseStudyId: 'cs-kota',
+    themeStep: 3,
+    themeArc: 'Variables → Lists → Dicts → Sorting → Nested structures',
+    themeEmoji: '📚'
+  },
+  {
+    title: 'Kota: The Merit List Algorithm',
+    difficulty: 'Builder',
+    concepts: ['sorting', 'dictionaries', 'algorithms'],
+    context: 'The director wants the top 10 students for the merit scholarship. You have ranks = {"Priya": 2891, "Arjun": 4217, ...}. Lower rank number = better performance. You need to sort by rank value, handle ties, and take the top 10.',
+    prompt: 'The director says: "I need the merit list NOW — sorted by rank, ties broken by name alphabetically, top 10 only." What sequence of reasoning steps turns the dictionary into a sorted, trimmed merit list?',
+    objectives: ['Understand sorting as an algorithm, not magic', 'Sort a dictionary by value', 'Slice a result to a required size'],
+    sampleReasoning: 'Sort the dictionary items by rank value (ascending), then alphabetically for ties. sorted(ranks.items(), key=lambda x: (x[1], x[0]))[:10] gives the top 10 merit list.',
+    effectivenessScore: 95,
+    theme: 'kota',
+    caseStudyId: 'cs-kota',
+    themeStep: 4,
+    themeArc: 'Variables → Lists → Dicts → Sorting → Nested structures',
+    themeEmoji: '📚'
+  },
+
+  // ─── POTTERHEADS THEME SCENARIOS ───────────────────────────────────────────
+  {
+    title: 'Potion Ingredient Dosage',
+    difficulty: 'Beginner',
+    concepts: ['variables'],
+    context: 'Severus Snape asks you to measure Boomslang Skin for Polyjuice Potion.',
+    prompt: 'How would you store the weight in grams so your cauldron brewing notes remember it?',
+    objectives: ['Identify single value', 'Assign a clear name', 'Understand variable storage'],
+    sampleReasoning: 'boomslang_weight = 25 — store the exact weight in a named variable to use in the recipe.',
+    effectivenessScore: 96,
+    theme: 'potterheads',
+    caseStudyId: 'cs-potter-potions',
+    themeStep: 1,
+    themeEmoji: '🧙‍♂️'
+  },
+  {
+    title: 'Spellbook Spell List',
+    difficulty: 'Beginner',
+    concepts: ['lists'],
+    context: 'Harry Potter wants to keep track of all defensive spells learned in DADA class.',
+    prompt: 'How would you group "Expelliarmus", "Stupefy", and "Protego" into a single structure?',
+    objectives: ['Group spells together', 'Recognize list ordering', 'Map spells to a list'],
+    sampleReasoning: 'defense_spells = ["Expelliarmus", "Stupefy", "Protego"] — keep them in one list for fast casting access.',
+    effectivenessScore: 97,
+    theme: 'potterheads',
+    caseStudyId: 'cs-potter-potions',
+    themeStep: 2,
+    themeEmoji: '🧙‍♂️'
+  },
+  {
+    title: 'House Point Counter',
+    difficulty: 'Explorer',
+    concepts: ['dictionaries'],
+    context: 'Professor McGonagall needs to track House Points for Gryffindor, Slytherin, Ravenclaw, and Hufflepuff.',
+    prompt: 'How would you store each house name directly paired with its score?',
+    objectives: ['Map house to score', 'Enable direct lookup', 'Use a dictionary'],
+    sampleReasoning: 'house_points = {"Gryffindor": 450, "Slytherin": 420, "Ravenclaw": 390, "Hufflepuff": 380} maps house names to scores directly.',
+    effectivenessScore: 98,
+    theme: 'potterheads',
+    caseStudyId: 'cs-potter-potions',
+    themeStep: 3,
+    themeEmoji: '🧙‍♂️'
+  },
+  {
+    title: 'Cauldron Stirring Helper',
+    difficulty: 'Builder',
+    concepts: ['functions'],
+    context: 'Brewing Felix Felicis requires clockwise stirring every 3 minutes.',
+    prompt: 'How would you design a reusable helper function that calculates total stirs required?',
+    objectives: ['Create reusable brewing logic', 'Accept duration parameter', 'Return stir count'],
+    sampleReasoning: 'def calculate_stirs(minutes): return minutes * 4 — write once and reuse for any potion recipe.',
+    effectivenessScore: 96,
+    theme: 'potterheads',
+    caseStudyId: 'cs-potter-potions',
+    themeStep: 4,
+    themeEmoji: '🧙‍♂️'
+  },
+  {
+    title: 'Unforgivable Curse Deduplicator',
+    difficulty: 'Explorer',
+    concepts: ['sets'],
+    context: 'The Ministry of Magic receives duplicate dark magic spell reports from multiple owls.',
+    prompt: 'How would you automatically ensure each reported spell is unique with no duplicates?',
+    objectives: ['Eliminate duplicate reports', 'Guarantee uniqueness', 'Map to Python sets'],
+    sampleReasoning: 'dark_spells = set(owl_reports) automatically removes duplicates.',
+    effectivenessScore: 95,
+    theme: 'potterheads',
+    caseStudyId: 'cs-potter-spells',
+    themeStep: 1,
+    themeEmoji: '🪄'
+  },
+
+  // ─── MARVEL THEME SCENARIOS ────────────────────────────────────────────────
+  {
+    title: 'Arc Reactor Output Voltage',
+    difficulty: 'Beginner',
+    concepts: ['variables'],
+    context: 'Tony Stark needs J.A.R.V.I.S. to monitor the Mark 85 Arc Reactor power level.',
+    prompt: 'How would you store the current voltage percentage in code?',
+    objectives: ['Identify critical suit value', 'Store in named variable', 'Reference during combat'],
+    sampleReasoning: 'reactor_voltage = 98.5 — keep suit power level in a named variable.',
+    effectivenessScore: 96,
+    theme: 'marvel',
+    caseStudyId: 'cs-marvel-jarvis',
+    themeStep: 1,
+    themeEmoji: '🦾'
+  },
+  {
+    title: 'Avengers Emergency Roster',
+    difficulty: 'Beginner',
+    concepts: ['lists'],
+    context: 'Captain America calls an emergency assembly for Iron Man, Thor, Hulk, and Spider-Man.',
+    prompt: 'How would you store all active Avengers together so J.A.R.V.I.S. can alert them in order?',
+    objectives: ['Group hero names', 'Maintain assembly order', 'Store as a list'],
+    sampleReasoning: 'active_avengers = ["Iron Man", "Thor", "Hulk", "Spider-Man"] stores heroes in a single list.',
+    effectivenessScore: 97,
+    theme: 'marvel',
+    caseStudyId: 'cs-marvel-jarvis',
+    themeStep: 2,
+    themeEmoji: '🦾'
+  },
+  {
+    title: 'J.A.R.V.I.S. Weapon Diagnostics',
+    difficulty: 'Explorer',
+    concepts: ['dictionaries'],
+    context: 'Tony Stark asks: "J.A.R.V.I.S., check status of repulsors, unibeam, and nanotech shield!"',
+    prompt: 'How would you map each weapon system name directly to its operational status?',
+    objectives: ['Map weapon to status', 'Instant direct lookup', 'Store as dictionary'],
+    sampleReasoning: 'weapon_status = {"repulsors": "READY", "unibeam": "CHARGING", "shield": "ACTIVE"} allows instant lookup by name.',
+    effectivenessScore: 98,
+    theme: 'marvel',
+    caseStudyId: 'cs-marvel-jarvis',
+    themeStep: 3,
+    themeEmoji: '🦾'
+  },
+  {
+    title: 'Repulsor Thrust Calculator',
+    difficulty: 'Builder',
+    concepts: ['functions'],
+    context: 'Iron Man needs to compute flight trajectory thruster force based on suit weight and speed.',
+    prompt: 'How would you package this flight calculation into a reusable function for J.A.R.V.I.S.?',
+    objectives: ['Package thruster math', 'Accept weight and velocity', 'Return force value'],
+    sampleReasoning: 'def calculate_thrust(weight, speed): return weight * speed * 1.5 — reuse across all armor marks.',
+    effectivenessScore: 96,
+    theme: 'marvel',
+    caseStudyId: 'cs-marvel-jarvis',
+    themeStep: 4,
+    themeEmoji: '🦾'
+  },
+  {
+    title: 'Infinity Stone Energy Signature Filter',
+    difficulty: 'Explorer',
+    concepts: ['sets'],
+    context: 'Sensors in Wakanda register cosmic energy spikes. Multiple sensors detect the Space Stone signature.',
+    prompt: 'How would you remove duplicate sensor readings to get only unique stone signatures?',
+    objectives: ['Deduplicate sensor readings', 'Guarantee unique signatures', 'Map to sets'],
+    sampleReasoning: 'unique_signatures = set(sensor_spikes) guarantees unique cosmic signals.',
+    effectivenessScore: 95,
+    theme: 'marvel',
+    caseStudyId: 'cs-marvel-infinity',
+    themeStep: 1,
+    themeEmoji: '💎'
+  },
+
+  // ─── ANIME THEME SCENARIOS ─────────────────────────────────────────────────
+  {
+    title: 'Chakra Points Tracker',
+    difficulty: 'Beginner',
+    concepts: ['variables'],
+    context: 'Naruto is practicing Nine-Tails Chakra control and needs to track his reserve points.',
+    prompt: 'How would you store Naruto\'s current chakra level in a single variable?',
+    objectives: ['Identify chakra value', 'Name variable clearly', 'Store for Jutsu casting'],
+    sampleReasoning: 'chakra_points = 5000 — store current chakra in a named variable.',
+    effectivenessScore: 96,
+    theme: 'anime',
+    caseStudyId: 'cs-anime-ninja',
+    themeStep: 1,
+    themeEmoji: '⚔️'
+  },
+  {
+    title: 'Hidden Leaf Squad Roster',
+    difficulty: 'Beginner',
+    concepts: ['lists'],
+    context: 'Kakashi Sensei forms Squad 7 with Naruto, Sasuke, and Sakura.',
+    prompt: 'How would you group all three shinobi into a single list for mission deployment?',
+    objectives: ['Group squad members', 'Maintain ninja order', 'Store in a list'],
+    sampleReasoning: 'squad_7 = ["Naruto", "Sasuke", "Sakura"] keeps the team together in one list.',
+    effectivenessScore: 97,
+    theme: 'anime',
+    caseStudyId: 'cs-anime-ninja',
+    themeStep: 2,
+    themeEmoji: '⚔️'
+  },
+  {
+    title: 'Jutsu Hand Sign Vault',
+    difficulty: 'Explorer',
+    concepts: ['dictionaries'],
+    context: 'The Shinobi Library stores hand sign sequences for Rasengan, Chidori, and Shadow Clone jutsu.',
+    prompt: 'How would you map each Jutsu name to its required hand sign combination?',
+    objectives: ['Map jutsu to hand signs', 'Look up jutsu instantly', 'Store as dictionary'],
+    sampleReasoning: 'jutsu_vault = {"Rasengan": "Ram → Serpent", "Chidori": "Ox → Rabbit → Monkey"} maps jutsu directly to signs.',
+    effectivenessScore: 98,
+    theme: 'anime',
+    caseStudyId: 'cs-anime-ninja',
+    themeStep: 3,
+    themeEmoji: '⚔️'
+  },
+  {
+    title: 'Shadow Clone Multiplier',
+    difficulty: 'Builder',
+    concepts: ['functions'],
+    context: 'Naruto wants to calculate total chakra consumed when creating N shadow clones.',
+    prompt: 'How would you write a reusable function to compute total chakra cost per clone count?',
+    objectives: ['Create clone chakra formula', 'Accept clone count', 'Return total chakra required'],
+    sampleReasoning: 'def clone_chakra(clone_count): return clone_count * 50 — calculate chakra cost dynamically.',
+    effectivenessScore: 96,
+    theme: 'anime',
+    caseStudyId: 'cs-anime-ninja',
+    themeStep: 4,
+    themeEmoji: '⚔️'
+  },
+  {
+    title: 'Dungeon Rift Monster Index',
+    difficulty: 'Explorer',
+    concepts: ['sets'],
+    context: 'An S-Rank Hunter encounters wild monsters in a dungeon rift and receives duplicate radar pings.',
+    prompt: 'How would you filter out duplicate monster pings to index only unique species?',
+    objectives: ['Filter duplicate pings', 'Store unique species', 'Map to sets'],
+    sampleReasoning: 'unique_monsters = set(radar_pings) removes duplicate dungeon pings.',
+    effectivenessScore: 95,
+    theme: 'anime',
+    caseStudyId: 'cs-anime-pokedex',
+    themeStep: 1,
+    themeEmoji: '🐉'
+  },
+
+  // ─── POTTERHEADS EXTENDED CHAPTER SCENARIOS ──────────────────────────────
+  {
+    title: 'Gryffindor House Points Addition',
+    difficulty: 'Beginner',
+    concepts: ['arithmetic', 'subtraction'],
+    context: 'Harry scores 50 points for catching the Snitch, but Snape deducts 15 for being late.',
+    prompt: 'How would you calculate Gryffindor\'s net points using arithmetic operators?',
+    objectives: ['Perform addition and subtraction', 'Calculate net points', 'Use math operators'],
+    sampleReasoning: 'net_points = 50 - 15 calculates the final house points.',
+    effectivenessScore: 94,
+    theme: 'potterheads',
+    caseStudyId: 'cs-potter-spells',
+    themeStep: 2,
+    themeEmoji: '🧙‍♂️'
+  },
+  {
+    title: 'Spell Incantation Generator',
+    difficulty: 'Beginner',
+    concepts: ['strings'],
+    context: 'Hermione wants to construct full spell commands like "Harry casts Expelliarmus!".',
+    prompt: 'How would you combine the wizard\'s name and the spell name into a single message?',
+    objectives: ['Combine text strings', 'Format incantations', 'Map to Python strings'],
+    sampleReasoning: 'incantation = f"{wizard} casts {spell}!" sticks text pieces together.',
+    effectivenessScore: 95,
+    theme: 'potterheads',
+    caseStudyId: 'cs-potter-spells',
+    themeStep: 3,
+    themeEmoji: '🧙‍♂️'
+  },
+  {
+    title: 'Sorting Hat House Evaluator',
+    difficulty: 'Beginner',
+    concepts: ['conditionals', 'comparisons'],
+    context: 'The Sorting Hat checks a student\'s bravery and wisdom scores to decide their house.',
+    prompt: 'How would you write a decision rule to assign Gryffindor or Ravenclaw based on scores?',
+    objectives: ['Compare trait scores', 'Branch decisions', 'Map to if/else'],
+    sampleReasoning: 'if bravery >= 80: house = "Gryffindor" else if wisdom >= 80: house = "Ravenclaw".',
+    effectivenessScore: 96,
+    theme: 'potterheads',
+    caseStudyId: 'cs-potter-spells',
+    themeStep: 4,
+    themeEmoji: '🧙‍♂️'
+  },
+  {
+    title: 'Cauldron Clockwise Stir Routine',
+    difficulty: 'Explorer',
+    concepts: ['loops', 'while loops'],
+    context: 'Brewing Felix Felicis requires stirring the potion cauldron clockwise exactly 50 times.',
+    prompt: 'How would you make Python repeat the stirring action 50 times automatically?',
+    objectives: ['Identify repeated stir action', 'Loop stir count', 'Map to for/while loop'],
+    sampleReasoning: 'for stir in range(1, 51): print(f"Stir {stir}") repeats the action automatically.',
+    effectivenessScore: 95,
+    theme: 'potterheads',
+    caseStudyId: 'cs-potter-potions',
+    themeStep: 5,
+    themeEmoji: '🧙‍♂️'
+  },
+  {
+    title: 'Restricted Section Scroll Search',
+    difficulty: 'Explorer',
+    concepts: ['search', 'filtering'],
+    context: 'Harry is searching through 100 library scrolls to locate a forbidden dark magic spell.',
+    prompt: 'How would you filter the scroll list to find only scrolls containing "Dark Magic"?',
+    objectives: ['Scan list items', 'Filter by keyword', 'Map to search/filtering'],
+    sampleReasoning: 'dark_scrolls = [scroll for scroll in library if "Dark" in scroll] filters the scrolls.',
+    effectivenessScore: 94,
+    theme: 'potterheads',
+    caseStudyId: 'cs-potter-spells',
+    themeStep: 5,
+    themeEmoji: '🧙‍♂️'
+  },
+  {
+    title: 'Exploding Cauldron Exception Shield',
+    difficulty: 'Builder',
+    concepts: ['error handling', 'try except'],
+    context: 'A potion heat spikes above 300 degrees and threatens to blow up the potions dungeon.',
+    prompt: 'How would you catch this overheating error so your code casts a shield charm instead of crashing?',
+    objectives: ['Detect heat overload', 'Catch exception', 'Map to try/except'],
+    sampleReasoning: 'try: brew_potion() except OverheatError: cast_shield() prevents a crash.',
+    effectivenessScore: 97,
+    theme: 'potterheads',
+    caseStudyId: 'cs-potter-potions',
+    themeStep: 6,
+    themeEmoji: '🧙‍♂️'
+  },
+  {
+    title: 'Triwizard Tournament Leaderboard Ranker',
+    difficulty: 'Builder',
+    concepts: ['algorithms', 'sorting'],
+    context: 'Dumbledore needs to sort the final Triwizard scores from highest to lowest score.',
+    prompt: 'How would you order champion scores from highest to lowest?',
+    objectives: ['Order champion scores', 'Sort list descending', 'Map to sorting algorithms'],
+    sampleReasoning: 'scores.sort(reverse=True) ranks the champions in descending order.',
+    effectivenessScore: 96,
+    theme: 'potterheads',
+    caseStudyId: 'cs-potter-spells',
+    themeStep: 6,
+    themeEmoji: '🧙‍♂️'
+  },
+  {
+    title: 'Ministry Secret Archive Scroll Log',
+    difficulty: 'Builder',
+    concepts: ['files', 'file io'],
+    context: 'The Ministry of Magic wants to save all recorded spell logs into a permanent parchment file.',
+    prompt: 'How would you write text into a file so it stays saved even after shutting down your laptop?',
+    objectives: ['Open file for writing', 'Save spell logs', 'Map to file I/O'],
+    sampleReasoning: 'with open("spells.txt", "w") as f: f.write(log) saves data permanently.',
+    effectivenessScore: 95,
+    theme: 'potterheads',
+    caseStudyId: 'cs-potter-spells',
+    themeStep: 7,
+    themeEmoji: '🧙‍♂️'
+  },
+
+  // ─── MARVEL THEME EXTENDED SCENARIOS ───────────────────────────────────────
+  {
+    title: 'Suit Power Drain Calculator',
+    difficulty: 'Beginner',
+    concepts: ['arithmetic', 'subtraction'],
+    context: 'Iron Man has 1000 kW power. Repulsor blasts use 250 kW and shield uses 180 kW.',
+    prompt: 'How would you compute the remaining suit energy using subtraction operators?',
+    objectives: ['Subtract power drain', 'Calculate remaining energy', 'Use arithmetic operators'],
+    sampleReasoning: 'remaining = 1000 - 250 - 180 calculates power remaining.',
+    effectivenessScore: 94,
+    theme: 'marvel',
+    caseStudyId: 'cs-marvel-jarvis',
+    themeStep: 5,
+    themeEmoji: '🦾'
+  },
+  {
+    title: 'J.A.R.V.I.S. Audio Broadcast Formatter',
+    difficulty: 'Beginner',
+    concepts: ['strings'],
+    context: 'J.A.R.V.I.S. needs to construct HUD alert strings like "Warning Mr. Stark: Thruster #2 Low".',
+    prompt: 'How would you format variables into a clear status text string?',
+    objectives: ['Format status message', 'Combine variables with text', 'Map to strings'],
+    sampleReasoning: 'alert = f"Warning {user}: {system} {status}" formats HUD alerts.',
+    effectivenessScore: 95,
+    theme: 'marvel',
+    caseStudyId: 'cs-marvel-jarvis',
+    themeStep: 6,
+    themeEmoji: '🦾'
+  },
+  {
+    title: 'Nanotech Threat Level Defense Protocol',
+    difficulty: 'Beginner',
+    concepts: ['conditionals', 'comparisons'],
+    context: 'Mark 85 sensors evaluate hostile threat score from 0 to 100.',
+    prompt: 'How would you deploy nanotech shields if threat > 80, repulsors if > 50, or scan only?',
+    objectives: ['Evaluate threat score', 'Branch suit defense', 'Map to if/elif/else'],
+    sampleReasoning: 'if threat > 80: deploy_shield() elif threat > 50: deploy_repulsors().',
+    effectivenessScore: 96,
+    theme: 'marvel',
+    caseStudyId: 'cs-marvel-jarvis',
+    themeStep: 7,
+    themeEmoji: '🦾'
+  },
+  {
+    title: 'Iron Man Subsystem Thruster Diagnostics',
+    difficulty: 'Explorer',
+    concepts: ['loops', 'while loops'],
+    context: 'J.A.R.V.I.S. needs to check all 100 thruster nodes across the armor one by one.',
+    prompt: 'How would you repeat the diagnostic check for every thruster node automatically?',
+    objectives: ['Iterate thruster nodes', 'Perform check per node', 'Map to loops'],
+    sampleReasoning: 'for thruster in armor_thrusters: check_status(thruster) repeats for all nodes.',
+    effectivenessScore: 95,
+    theme: 'marvel',
+    caseStudyId: 'cs-marvel-jarvis',
+    themeStep: 8,
+    themeEmoji: '🦾'
+  },
+  {
+    title: 'Vibranium Radar Signature Scan',
+    difficulty: 'Explorer',
+    concepts: ['search', 'filtering'],
+    context: 'Wakanda radar receives satellite pings across Earth. You need to find all "Vibranium" pings.',
+    prompt: 'How would you search radar readings and filter out non-vibranium signals?',
+    objectives: ['Filter radar pings', 'Extract matching signals', 'Map to search/filter'],
+    sampleReasoning: 'vibranium_pings = [p for p in radar_pings if "Vibranium" in p] filters radar data.',
+    effectivenessScore: 94,
+    theme: 'marvel',
+    caseStudyId: 'cs-marvel-infinity',
+    themeStep: 2,
+    themeEmoji: '💎'
+  },
+  {
+    title: 'Arc Reactor Power Overload Bypass',
+    difficulty: 'Builder',
+    concepts: ['error handling', 'try except'],
+    context: 'An enemy blast causes Arc Reactor energy voltage to surge above 1200V.',
+    prompt: 'How would you handle this voltage surge exception so J.A.R.V.I.S. diverts power to heat sinks without shutting down?',
+    objectives: ['Detect power surge', 'Catch voltage error', 'Map to try/except'],
+    sampleReasoning: 'try: fire_unibeam() except PowerSurge: divert_to_heatsink() handles surges.',
+    effectivenessScore: 97,
+    theme: 'marvel',
+    caseStudyId: 'cs-marvel-jarvis',
+    themeStep: 9,
+    themeEmoji: '🦾'
+  },
+  {
+    title: 'Stark Satellite Threat Priority Ranker',
+    difficulty: 'Builder',
+    concepts: ['algorithms', 'sorting'],
+    context: 'Stark satellite defense detects 5 incoming alien ships with different danger ratings.',
+    prompt: 'How would you sort the incoming ships from highest threat score to lowest?',
+    objectives: ['Order threat levels', 'Sort list descending', 'Map to sorting algorithms'],
+    sampleReasoning: 'ships.sort(key=lambda s: s.threat, reverse=True) prioritizes targets.',
+    effectivenessScore: 96,
+    theme: 'marvel',
+    caseStudyId: 'cs-marvel-infinity',
+    themeStep: 3,
+    themeEmoji: '💎'
+  },
+  {
+    title: 'Stark Telemetry Mission Log Archiver',
+    difficulty: 'Builder',
+    concepts: ['files', 'file io'],
+    context: 'J.A.R.V.I.S. must save flight telemetry and battle statistics into a permanent log file.',
+    prompt: 'How would you write flight telemetry data into a JSON file for permanent storage?',
+    objectives: ['Open file for writing', 'Serialize telemetry data', 'Map to file I/O'],
+    sampleReasoning: 'with open("flight_log.json", "w") as f: json.dump(log_data, f) saves telemetry.',
+    effectivenessScore: 95,
+    theme: 'marvel',
+    caseStudyId: 'cs-marvel-jarvis',
+    themeStep: 10,
+    themeEmoji: '🦾'
+  },
+
+  // ─── ANIME THEME EXTENDED SCENARIOS ────────────────────────────────────────
+  {
+    title: 'Shadow Clone Chakra Cost Calculator',
+    difficulty: 'Beginner',
+    concepts: ['arithmetic', 'subtraction'],
+    context: 'Naruto has 9000 chakra. Creating 10 shadow clones uses 1500 chakra.',
+    prompt: 'How would you compute Naruto\'s remaining chakra using subtraction?',
+    objectives: ['Subtract chakra spent', 'Compute remaining chakra', 'Use math operators'],
+    sampleReasoning: 'remaining = 9000 - 1500 calculates remaining chakra.',
+    effectivenessScore: 94,
+    theme: 'anime',
+    caseStudyId: 'cs-anime-ninja',
+    themeStep: 5,
+    themeEmoji: '⚔️'
+  },
+  {
+    title: 'Jutsu Invocation Scroll Formatter',
+    difficulty: 'Beginner',
+    concepts: ['strings'],
+    context: 'A shinobi scroll needs to generate jutsu announcements like "Naruto unleashes Rasengan!".',
+    prompt: 'How would you format the ninja name and jutsu name into an incantation string?',
+    objectives: ['Combine text strings', 'Format jutsu incantations', 'Map to strings'],
+    sampleReasoning: 'announcement = f"{ninja} unleashes {jutsu}!" formats the scroll text.',
+    effectivenessScore: 95,
+    theme: 'anime',
+    caseStudyId: 'cs-anime-ninja',
+    themeStep: 6,
+    themeEmoji: '⚔️'
+  },
+  {
+    title: 'Chunin Exam Promotion Evaluator',
+    difficulty: 'Beginner',
+    concepts: ['conditionals', 'comparisons'],
+    context: 'Proctors check shinobi exam marks: score >= 85 is Chunin, score >= 60 is Genin.',
+    prompt: 'How would you write a decision rule to determine the ninja rank based on score?',
+    objectives: ['Compare exam score', 'Branch rank results', 'Map to if/elif/else'],
+    sampleReasoning: 'if score >= 85: rank = "Chunin" elif score >= 60: rank = "Genin".',
+    effectivenessScore: 96,
+    theme: 'anime',
+    caseStudyId: 'cs-anime-ninja',
+    themeStep: 7,
+    themeEmoji: '⚔️'
+  },
+  {
+    title: 'Parallel Shadow Clone Training Reps',
+    difficulty: 'Explorer',
+    concepts: ['loops', 'while loops'],
+    context: 'Naruto summons 100 shadow clones to practice tree-climbing training reps simultaneously.',
+    prompt: 'How would you repeat the training step for every shadow clone in code?',
+    objectives: ['Iterate shadow clones', 'Perform training action', 'Map to loops'],
+    sampleReasoning: 'for clone in range(1, 101): train_clone(clone) repeats for all clones.',
+    effectivenessScore: 95,
+    theme: 'anime',
+    caseStudyId: 'cs-anime-ninja',
+    themeStep: 8,
+    themeEmoji: '⚔️'
+  },
+  {
+    title: 'S-Rank Dungeon Boss Finder',
+    difficulty: 'Explorer',
+    concepts: ['search', 'filtering'],
+    context: 'An S-Rank Hunter scans a dungeon rift containing 50 monsters to find S-Rank beasts.',
+    prompt: 'How would you search the monster list and filter out non-S-rank creatures?',
+    objectives: ['Filter dungeon monsters', 'Identify S-Rank beasts', 'Map to search/filtering'],
+    sampleReasoning: 'bosses = [m for m in dungeon_monsters if m.rank == "S"] filters the beasts.',
+    effectivenessScore: 94,
+    theme: 'anime',
+    caseStudyId: 'cs-anime-pokedex',
+    themeStep: 2,
+    themeEmoji: '🐉'
+  },
+  {
+    title: 'Chakra Exhaustion Substitution Guard',
+    difficulty: 'Builder',
+    concepts: ['error handling', 'try except'],
+    context: 'During battle, a shinobi\'s chakra drops below critical level while casting a jutsu.',
+    prompt: 'How would you catch this low-chakra exception to automatically trigger a wood clone substitution?',
+    objectives: ['Detect low chakra', 'Catch exception', 'Map to try/except'],
+    sampleReasoning: 'try: cast_jutsu() except ChakraExhausted: trigger_substitution() handles exhaustion.',
+    effectivenessScore: 97,
+    theme: 'anime',
+    caseStudyId: 'cs-anime-ninja',
+    themeStep: 9,
+    themeEmoji: '⚔️'
+  },
+  {
+    title: 'Shinobi Guild Power Ranker',
+    difficulty: 'Builder',
+    concepts: ['algorithms', 'sorting'],
+    context: 'The Hokage needs to rank 20 shinobi by combat power level from highest to lowest.',
+    prompt: 'How would you order the list of shinobi scores from highest to lowest?',
+    objectives: ['Order combat scores', 'Sort list descending', 'Map to sorting algorithms'],
+    sampleReasoning: 'ninja_list.sort(key=lambda n: n.power, reverse=True) ranks the shinobi.',
+    effectivenessScore: 96,
+    theme: 'anime',
+    caseStudyId: 'cs-anime-pokedex',
+    themeStep: 3,
+    themeEmoji: '🐉'
+  },
+  {
+    title: 'Forbidden Leaf Scroll Archive Saver',
+    difficulty: 'Builder',
+    concepts: ['files', 'file io'],
+    context: 'The Hokage wants to record secret ninjutsu scroll instructions into a permanent file archive.',
+    prompt: 'How would you write jutsu scroll instructions into a file for permanent archival?',
+    objectives: ['Open file for writing', 'Write scroll text', 'Map to file I/O'],
+    sampleReasoning: 'with open("scrolls.txt", "w") as f: f.write(scroll_text) archives the jutsu permanently.',
+    effectivenessScore: 95,
+    theme: 'anime',
+    caseStudyId: 'cs-anime-ninja',
+    themeStep: 10,
+    themeEmoji: '⚔️'
   }
 ];
 
 async function run() {
   await resetData(scenarios);
   console.log(`Seeded ${scenarios.length} PyBe scenarios`);
+  console.log(`  - Classic scenarios: ${scenarios.filter(s => s.theme === 'classic').length}`);
+  console.log(`  - Chai Stall theme: ${scenarios.filter(s => s.theme === 'chai-stall').length}`);
+  console.log(`  - ISRO theme: ${scenarios.filter(s => s.theme === 'isro').length}`);
+  console.log(`  - Instagram theme: ${scenarios.filter(s => s.theme === 'instagram').length}`);
+  console.log(`  - Food Delivery theme: ${scenarios.filter(s => s.theme === 'food-delivery').length}`);
+  console.log(`  - AI Playlist theme: ${scenarios.filter(s => s.theme === 'ai-playlist').length}`);
+  console.log(`  - Kota theme: ${scenarios.filter(s => s.theme === 'kota').length}`);
+  console.log(`  - Potterheads theme: ${scenarios.filter(s => s.theme === 'potterheads').length}`);
+  console.log(`  - Marvel theme: ${scenarios.filter(s => s.theme === 'marvel').length}`);
+  console.log(`  - Anime theme: ${scenarios.filter(s => s.theme === 'anime').length}`);
 }
 
 run().catch((error) => {