add prompt enginnering

README.md

@@ -1,163 +1,133 @@
 # 📊 DataScience Learning Hub
 
-Welcome to a comprehensive collection of educational web projects for learning data science! This repository contains multiple interactive courses and resources covering statistics, machine learning, visualization, mathematics, and feature engineering.
-
-## 🎯 Live Demos
-
-Visit our courses directly in your browser:
-
-- [📈 Interactive Statistics Course](https://aashishgarg13.github.io/DataScience/complete-statistics/)
-- [🤖 Machine Learning Guide](https://aashishgarg13.github.io/DataScience/ml_complete-all-topics/)
-- [📊 Data Visualization](https://aashishgarg13.github.io/DataScience/Visualization/)
-- [🔢 Mathematics for Data Science](https://aashishgarg13.github.io/DataScience/math-ds-complete/)
-- [⚙️ Feature Engineering Guide](https://aashishgarg13.github.io/DataScience/feature-engineering/)
-
-## 📚 Contents
-
-### 📈 Complete Statistics Course
-- **Location:** `complete-statistics/`
-- **Features:**
-  - 40+ Interactive Topics
-  - Descriptive Statistics
-  - Probability & Distributions
-  - Hypothesis Testing
-  - Interactive Visualizations & Canvas
-  - Hands-on Learning Experience
-
-### 🤖 Machine Learning Guide
-- **Location:** `ml_complete-all-topics/`
-- **Features:**
-  - Comprehensive ML Topics
-  - Interactive Demonstrations
-  - Visual Learning Aids
-  - Step-by-Step Explanations
-
-### 📊 Data Visualization
-- **Location:** `Visualization/`
-- **Features:**
-  - Interactive Data Visualization Examples
-  - Chart Types and Best Practices
-  - Dynamic Visualization Techniques
-  - Data Presentation Guidelines
-
-### 🔢 Mathematics for Data Science
-- **Location:** `math-ds-complete/`
-- **Features:**
-  - Linear Algebra Fundamentals
-  - Calculus for Machine Learning
-  - Statistical Mathematics
-  - Optimization Theory
-
-### ⚙️ Feature Engineering Guide
-- **Location:** `feature-engineering/`
-- **Features:**
-  - Data Preprocessing Techniques
-  - Feature Selection Methods
-  - Feature Transformation
-  - Dimensionality Reduction
-
-> 💡 Both projects are pure static websites - no server needed! Open directly in your browser or use a simple static server.
-
-## 🚀 Quick Start
-
-### Option A: View Online
-Visit our GitHub Pages hosted versions:
-1. [Statistics Course](https://aashishgarg13.github.io/DataScience/complete-statistics/)
-2. [Machine Learning Guide](https://aashishgarg13.github.io/DataScience/ml_complete-all-topics/)
-
-### Option B: Run Locally (Recommended for Development)
-
-#### Simple Browser Opening:
-1. Clone this repository
-2. Navigate to either project folder
-3. Double-click `index.html`
-
-#### Using Local Server (Recommended to avoid CORS issues):
-
-From the repository root, run one of the following in a terminal:
+Welcome — a single repo that hosts several static, interactive learning resources for data science. Everything here is pure HTML/CSS/JS and works either by opening the `index.html` files in your browser or by serving the repo with a simple static server.
+
+## 🎯 Live demos (GitHub Pages)
+
+Open the projects directly (after you enable GitHub Pages for the repo):
+
+- 📈 Interactive Statistics Course — https://aashishgarg13.github.io/DataScience/complete-statistics/
+- 🤖 Machine Learning Guide — https://aashishgarg13.github.io/DataScience/ml_complete-all-topics/
+- 📊 Data Visualization — https://aashishgarg13.github.io/DataScience/Visualization/
+- 🔢 Mathematics for Data Science — https://aashishgarg13.github.io/DataScience/math-ds-complete/
+- ⚙️ Feature Engineering Guide — https://aashishgarg13.github.io/DataScience/feature-engineering/
+
+If you want me to set up a small demo page that lists these and includes thumbnails, I can add it.
+
+## 🔗 Prompt engineering resources
+
+This repo focuses on data science, but many workflows now rely on well-crafted prompts. Useful prompt-engineering references:
+
+- Learn Prompting (interactive guide): https://learnprompting.org/
+- Prompt Engineering Guide (community-maintained): https://github.com/dair-ai/Prompt-Engineering-Guide
+
+Add one of these links to your docs or course materials where you introduce LLMs and prompts.
+
+---
+
+## 📚 What’s inside (folders)
+
+Each folder contains a standalone static site (open `index.html`). Brief overview:
+
+- `complete-statistics/` — Interactive Statistics Course (40+ topics, visualizations, canvas demos).
+- `ml_complete-all-topics/` — Large Mathematics / ML / Statistics learning platform (125+ topics across subjects; uses many canvas visualizations and interactive examples).
+- `Visualization/` — Data visualization examples and interactive charts.
+- `math-ds-complete/` — Mathematics for data science: linear algebra, calculus, optimization.
+- `feature-engineering/` — Feature engineering notes and interactive examples.
+
+All folders are static. No server-side code.
+
+## 🚀 Quick start — view locally
+
+Option 1 — open file directly:
+
+1. In Finder or your OS file manager, double-click the folder you want and open `index.html`.
+
+Option 2 — run a local static server (recommended):
 
 ```bash
-# Python 3 (simple static server, available on macOS):
+# from repository root
 python3 -m http.server 8000
 
-# or using Node.js http-server (if installed):
-npx http-server -c-1 . 8000
+# then open one of:
+http://localhost:8000/complete-statistics/
+http://localhost:8000/ml_complete-all-topics/
+http://localhost:8000/Visualization/
+http://localhost:8000/math-ds-complete/
+http://localhost:8000/feature-engineering/
 ```
 
-Then open http://localhost:8000/complete-statistics/ or http://localhost:8000/ml_complete-all-topics/ in your browser.
+Tip: using a local server avoids some browser restrictions (CORS, file:// quirks) and provides consistent behaviour for the JS visualizations.
 
-## Deploy to GitHub Pages
+## ✅ Local file checks I ran
 
-1. Push your changes to the `main` branch on GitHub (already done for this repo).
-2. In your repository settings on GitHub, go to "Pages" and select the `main` branch and root (`/`) as the source, or set the `gh-pages` branch if you prefer.
-3. Save — GitHub Pages will publish the site. For multi-site repos you can add a `docs/` folder or create separate branches, or create a small repo per site.
+- Verified `ml_complete-all-topics/` contains `index.html`, `style.css`, and `app.js` (these are referenced by the page).
+- No external CDN dependencies are required by the core sites (the pages use local CSS/JS and canvas APIs).
+- No image assets referenced directly inside `ml_complete-all-topics/index.html` (no missing .png/.jpg/.svg references found).
 
-Because these are static sites you can also host them on Netlify, Vercel, or any static host.
+If you'd like, I can add a tiny verification script (Python) that scans each `index.html` for href/src and confirms the referenced files exist.
 
-## 📁 Project Structure
+## 📁 Project file layout (example)
 
-### Statistics Course
-```
 complete-statistics/
-├── index.html  # Main course interface
-├── style.css   # Course styling
-└── app.js      # Interactive visualizations
-```
+├── index.html
+├── style.css
+└── app.js
 
-### Machine Learning Guide
-```
 ml_complete-all-topics/
-├── index.html  # Main guide interface
-├── style.css   # Guide styling
-└── app.js      # Interactive components
-```
+├── index.html
+├── style.css
+└── app.js
 
-### Data Visualization
-```
 Visualization/
-├── index.html  # Visualization examples
-├── style.css   # Visualization styling
-└── app.js      # Interactive charts
-```
+├── index.html
+├── style.css
+└── app.js
 
-### Mathematics for Data Science
-```
 math-ds-complete/
-├── index.html  # Mathematics course interface
-├── style.css   # Course styling
-└── app.js      # Interactive math demonstrations
-```
+├── index.html
+├── style.css
+└── app.js
 
-### Feature Engineering Guide
-```
 feature-engineering/
-├── index.html  # Feature engineering guide
-├── style.css   # Guide styling
-└── app.js      # Interactive examples
-```
+├── index.html
+├── style.css
+└── app.js
+
+## ⚙️ Deploying (GitHub Pages)
+
+1. Push the `main` branch to GitHub (already done for this repo).
+2. In the repository on GitHub -> Settings -> Pages, set the source to `main` branch and `/ (root)` or use `docs/` if you prefer.
+3. Wait a few minutes; the site will be available at `https://<username>.github.io/<repo>/` (e.g. the links at the top of this README).
+
+Note: the sites use relative paths (`style.css`, `app.js`), so they work fine when served from a subpath such as `/DataScience/complete-statistics/`.
 
-## Notes about repository cleanup
+## 🧹 Notes about cleanup
 
-While repairing the repository I removed macOS Finder metadata files (names beginning with `._`) that had been added inside the `.git` metadata and working tree. Those `._*` files are resource-fork metadata and are not project code. A `.gitignore` entry was added to ignore these moving forward:
+During repo cleanup I removed macOS Finder resource files (`._*`) and added a `.gitignore` entry to prevent them from being re-added. Example entries:
 
 ```
 ._*
 .DS_Store
->__MACOSX/
+__MACOSX/
 ```
 
-If you want to inspect any backup I created of the original `.git`, look for directories named `.git.broken_<timestamp>` in the repository root — they contain the backed-up git metadata.
+If you see `.git.broken_<timestamp>` directories, they contain backups of previous `.git` metadata.
 
-## Contributing
+## 🙋 Next steps (I can help)
+
+- Add screenshots/thumbnails to the README and to each project folder.
+- Add an automated verification script that scans all `index.html` files and confirms local assets exist. I can create a small `scripts/verify_assets.py`.
+- Split very long single-page projects into per-topic pages (if you want better maintainability).
+- Add a small 'demo index' page that lists live links and embeds screenshots.
 
-If you'd like me to expand this README with:
+Tell me which of the above you'd like and I'll implement it.
 
-- per-subproject detailed run instructions and screenshots
-- short descriptions of each interactive demo and what files to edit
-- automated preview script to open both sites in the browser
+## Contributing
 
-Tell me which of the above you want and I will add it.
+PRs, suggestions and fixes welcome. If you want me to add more documentation for a folder (detailed topic list, how-to-edit, or tests), say which folder and I'll add it.
 
 ## License
 
-Use or adapt however you like (no license file present; if you want one, tell me which license and I'll add it).
+No license file is included. If you'd like one (MIT, Apache-2.0, CC BY, etc.), tell me and I will add it.
+

math-ds-complete/app.js

@@ -55,7 +55,8 @@ function switchSubject(subject) {
         'statistics': 'Statistics Content',
         'linear-algebra': 'Linear Algebra Content',
         'calculus': 'Calculus Content',
-        'data-science': 'Data Science Content'
+        'data-science': 'Data Science Content',
+        'machine-learning': 'Machine Learning Algorithms'
     };
     const sidebarTitle = document.getElementById('sidebarTitle');
     if (sidebarTitle) {
@@ -496,6 +497,265 @@ function initializeAllVisualizations() {
     initPCACanvas();
     initGradientDescentCanvas();
     initLossLandscapeCanvas();
+    
+    // Machine Learning visualizations
+    initMLLinearRegressionCanvas();
+    initMLKMeansCanvas();
+}
+
+// ===== MACHINE LEARNING VISUALIZATIONS =====
+
+function initMLLinearRegressionCanvas() {
+    const canvas = document.getElementById('canvas-ml-1');
+    if (!canvas) return;
+    
+    const ctx = canvas.getContext('2d');
+    let showLine = false;
+    
+    // House price data from worked example
+    const data = [
+        {x: 1000, y: 150},
+        {x: 1500, y: 200},
+        {x: 2000, y: 250},
+        {x: 3000, y: 350}
+    ];
+    
+    function draw() {
+        clearCanvas(ctx, canvas);
+        
+        const padding = 80;
+        const width = canvas.width - 2 * padding;
+        const height = canvas.height - 2 * padding;
+        
+        const maxX = 3500;
+        const maxY = 400;
+        
+        // Draw axes
+        drawLine(ctx, padding, canvas.height - padding, canvas.width - padding, canvas.height - padding, COLORS.text, 2);
+        drawLine(ctx, padding, padding, padding, canvas.height - padding, COLORS.text, 2);
+        
+        // Draw grid
+        for (let i = 0; i <= 7; i++) {
+            const x = padding + (i / 7) * width;
+            const xVal = (i * 500).toString();
+            drawLine(ctx, x, canvas.height - padding, x, canvas.height - padding + 5, COLORS.textSecondary, 1);
+            drawText(ctx, xVal, x, canvas.height - padding + 20, 10, COLORS.textSecondary);
+        }
+        
+        for (let i = 0; i <= 8; i++) {
+            const y = canvas.height - padding - (i / 8) * height;
+            const yVal = (i * 50).toString();
+            drawLine(ctx, padding - 5, y, padding, y, COLORS.textSecondary, 1);
+            drawText(ctx, yVal, padding - 15, y + 4, 10, COLORS.textSecondary, 'right');
+        }
+        
+        // Draw labels
+        drawText(ctx, 'Size (sq ft)', canvas.width / 2, canvas.height - 10, 12, COLORS.cyan);
+        ctx.save();
+        ctx.translate(20, canvas.height / 2);
+        ctx.rotate(-Math.PI / 2);
+        drawText(ctx, 'Price ($1000s)', 0, 0, 12, COLORS.cyan);
+        ctx.restore();
+        
+        // Draw data points
+        data.forEach(point => {
+            const px = padding + (point.x / maxX) * width;
+            const py = canvas.height - padding - (point.y / maxY) * height;
+            drawCircle(ctx, px, py, 8, COLORS.cyan);
+            drawText(ctx, `${point.y}k`, px + 15, py - 10, 10, COLORS.cyan, 'left');
+        });
+        
+        // Draw regression line if enabled
+        if (showLine) {
+            // From worked example: y = 50 + 0.1x
+            const slope = 0.1;
+            const intercept = 50;
+            
+            const x1 = 0;
+            const y1 = intercept;
+            const x2 = maxX;
+            const y2 = intercept + slope * x2;
+            
+            const px1 = padding + (x1 / maxX) * width;
+            const py1 = canvas.height - padding - (y1 / maxY) * height;
+            const px2 = padding + (x2 / maxX) * width;
+            const py2 = canvas.height - padding - (y2 / maxY) * height;
+            
+            drawLine(ctx, px1, py1, px2, py2, COLORS.orange, 3);
+            
+            // Show equation
+            drawText(ctx, 'y = 50 + 0.10x', canvas.width / 2, 30, 16, COLORS.orange);
+            drawText(ctx, 'R² = 1.00 (Perfect Fit!)', canvas.width / 2, 50, 14, COLORS.green);
+            
+            // Highlight prediction point (2500, 300)
+            const predX = 2500;
+            const predY = 50 + 0.1 * predX;
+            const ppx = padding + (predX / maxX) * width;
+            const ppy = canvas.height - padding - (predY / maxY) * height;
+            drawCircle(ctx, ppx, ppy, 10, COLORS.green);
+            drawText(ctx, '2500 sq ft → $300k', ppx - 80, ppy - 15, 12, COLORS.green, 'left');
+        }
+    }
+    
+    const fitBtn = document.getElementById('btn-ml-1-fit');
+    const resetBtn = document.getElementById('btn-ml-1-reset');
+    
+    if (fitBtn) {
+        fitBtn.addEventListener('click', () => {
+            showLine = true;
+            draw();
+        });
+    }
+    
+    if (resetBtn) {
+        resetBtn.addEventListener('click', () => {
+            showLine = false;
+            draw();
+        });
+    }
+    
+    draw();
+}
+
+function initMLKMeansCanvas() {
+    const canvas = document.getElementById('canvas-ml-15');
+    if (!canvas) return;
+    
+    const ctx = canvas.getContext('2d');
+    let clustered = false;
+    
+    // Customer data from worked example
+    const customers = [
+        {name: 'A', age: 25, income: 40, cluster: null},
+        {name: 'B', age: 30, income: 50, cluster: null},
+        {name: 'C', age: 28, income: 45, cluster: null},
+        {name: 'D', age: 55, income: 80, cluster: null},
+        {name: 'E', age: 60, income: 90, cluster: null},
+        {name: 'F', age: 52, income: 75, cluster: null}
+    ];
+    
+    let centroids = [
+        {age: 25, income: 40, color: COLORS.cyan},
+        {age: 60, income: 90, color: COLORS.orange}
+    ];
+    
+    function assignClusters() {
+        customers.forEach(customer => {
+            // Calculate distance to each centroid
+            const d1 = Math.sqrt(Math.pow(customer.age - centroids[0].age, 2) + Math.pow(customer.income - centroids[0].income, 2));
+            const d2 = Math.sqrt(Math.pow(customer.age - centroids[1].age, 2) + Math.pow(customer.income - centroids[1].income, 2));
+            
+            customer.cluster = d1 < d2 ? 0 : 1;
+        });
+        
+        // Update centroids
+        const cluster0 = customers.filter(c => c.cluster === 0);
+        const cluster1 = customers.filter(c => c.cluster === 1);
+        
+        if (cluster0.length > 0) {
+            centroids[0].age = cluster0.reduce((s, c) => s + c.age, 0) / cluster0.length;
+            centroids[0].income = cluster0.reduce((s, c) => s + c.income, 0) / cluster0.length;
+        }
+        if (cluster1.length > 0) {
+            centroids[1].age = cluster1.reduce((s, c) => s + c.age, 0) / cluster1.length;
+            centroids[1].income = cluster1.reduce((s, c) => s + c.income, 0) / cluster1.length;
+        }
+    }
+    
+    function draw() {
+        clearCanvas(ctx, canvas);
+        
+        const padding = 80;
+        const width = canvas.width - 2 * padding;
+        const height = canvas.height - 2 * padding;
+        
+        const minAge = 20, maxAge = 70;
+        const minIncome = 30, maxIncome = 100;
+        
+        // Draw axes
+        drawLine(ctx, padding, canvas.height - padding, canvas.width - padding, canvas.height - padding, COLORS.text, 2);
+        drawLine(ctx, padding, padding, padding, canvas.height - padding, COLORS.text, 2);
+        
+        // Draw grid
+        for (let age = 20; age <= 70; age += 10) {
+            const x = padding + ((age - minAge) / (maxAge - minAge)) * width;
+            drawLine(ctx, x, canvas.height - padding, x, canvas.height - padding + 5, COLORS.textSecondary, 1);
+            drawText(ctx, age.toString(), x, canvas.height - padding + 20, 10, COLORS.textSecondary);
+        }
+        
+        for (let income = 30; income <= 100; income += 10) {
+            const y = canvas.height - padding - ((income - minIncome) / (maxIncome - minIncome)) * height;
+            drawLine(ctx, padding - 5, y, padding, y, COLORS.textSecondary, 1);
+            drawText(ctx, `$${income}k`, padding - 40, y + 4, 10, COLORS.textSecondary, 'right');
+        }
+        
+        // Draw labels
+        drawText(ctx, 'Age', canvas.width / 2, canvas.height - 10, 12, COLORS.cyan);
+        ctx.save();
+        ctx.translate(20, canvas.height / 2);
+        ctx.rotate(-Math.PI / 2);
+        drawText(ctx, 'Income ($k)', 0, 0, 12, COLORS.cyan);
+        ctx.restore();
+        
+        // Draw customers
+        customers.forEach(customer => {
+            const px = padding + ((customer.age - minAge) / (maxAge - minAge)) * width;
+            const py = canvas.height - padding - ((customer.income - minIncome) / (maxIncome - minIncome)) * height;
+            
+            const color = clustered ? (customer.cluster === 0 ? COLORS.cyan : COLORS.orange) : COLORS.primary;
+            drawCircle(ctx, px, py, 10, color);
+            drawText(ctx, customer.name, px, py - 15, 12, COLORS.text);
+        });
+        
+        // Draw centroids if clustered
+        if (clustered) {
+            centroids.forEach((centroid, i) => {
+                const cx = padding + ((centroid.age - minAge) / (maxAge - minAge)) * width;
+                const cy = canvas.height - padding - ((centroid.income - minIncome) / (maxIncome - minIncome)) * height;
+                
+                // Draw X marker for centroid
+                ctx.strokeStyle = centroid.color;
+                ctx.lineWidth = 4;
+                ctx.beginPath();
+                ctx.moveTo(cx - 12, cy - 12);
+                ctx.lineTo(cx + 12, cy + 12);
+                ctx.moveTo(cx + 12, cy - 12);
+                ctx.lineTo(cx - 12, cy + 12);
+                ctx.stroke();
+                
+                drawText(ctx, `C${i+1} [${centroid.age.toFixed(1)}, ${centroid.income.toFixed(1)}]`, 
+                         cx + 20, cy, 11, centroid.color, 'left');
+            });
+            
+            drawText(ctx, 'Cluster 1 (Young, Lower Income)', 150, 30, 12, COLORS.cyan);
+            drawText(ctx, 'Cluster 2 (Mature, Higher Income)', 150, 50, 12, COLORS.orange);
+        }
+    }
+    
+    const clusterBtn = document.getElementById('btn-ml-15-cluster');
+    const resetBtn = document.getElementById('btn-ml-15-reset');
+    
+    if (clusterBtn) {
+        clusterBtn.addEventListener('click', () => {
+            clustered = true;
+            assignClusters();
+            draw();
+        });
+    }
+    
+    if (resetBtn) {
+        resetBtn.addEventListener('click', () => {
+            clustered = false;
+            customers.forEach(c => c.cluster = null);
+            centroids = [
+                {age: 25, income: 40, color: COLORS.cyan},
+                {age: 60, income: 90, color: COLORS.orange}
+            ];
+            draw();
+        });
+    }
+    
+    draw();
 }
 
 // ===== LINEAR ALGEBRA VISUALIZATIONS =====
@@ -1676,6 +1936,6 @@ function initLossLandscapeCanvas() {
     draw();
 }
 
-console.log('%c📊 Mathematics Mastery Platform Loaded', 'color: #64ffda; font-size: 16px; font-weight: bold;');
-console.log('%cReady to explore 85 comprehensive topics across 4 subjects!', 'color: #4a90e2; font-size: 14px;');
-console.log('%c✓ Statistics (1-41) ✓ Linear Algebra (42-57) ✓ Calculus (58-69) ✓ Data Science (70-85)', 'color: #51cf66; font-size: 12px;');
+console.log('%c📊 Ultimate Learning Platform Loaded', 'color: #64ffda; font-size: 16px; font-weight: bold;');
+console.log('%cReady to explore 125+ comprehensive topics across 5 subjects!', 'color: #4a90e2; font-size: 14px;');
+console.log('%c✓ Statistics (41) ✓ Linear Algebra (16) ✓ Calculus (12) ✓ Data Science (16) ✓ Machine Learning (40+)', 'color: #51cf66; font-size: 12px;');

math-ds-complete/style.css

@@ -952,6 +952,35 @@ body {
     background: linear-gradient(135deg, #51cf66, #40c057);
 }
 
+.topic-section[data-subject="machine-learning"] .topic-number {
+    background: linear-gradient(135deg, #ff6b9d, #c44569);
+}
+
+/* ML-specific topic number colors by category */
+.topic-number.ml-regression {
+    background: linear-gradient(135deg, #4a90e2, #64ffda);
+}
+
+.topic-number.ml-classification {
+    background: linear-gradient(135deg, #ff6b9d, #ffa94d);
+}
+
+.topic-number.ml-clustering {
+    background: linear-gradient(135deg, #51cf66, #40c057);
+}
+
+.topic-number.ml-reduction {
+    background: linear-gradient(135deg, #b47aea, #e66af5);
+}
+
+.topic-number.ml-reinforcement {
+    background: linear-gradient(135deg, #c44569, #ff6b9d);
+}
+
+.topic-number.ml-advanced {
+    background: linear-gradient(135deg, #ffa94d, #f39c12);
+}
+
 .topic-section[data-subject="linear-algebra"] .topic-header h2 {
     color: #b47aea;
 }
@@ -964,6 +993,35 @@ body {
     color: #51cf66;
 }
 
+.topic-section[data-subject="machine-learning"] .topic-header h2 {
+    color: #ff6b9d;
+}
+
+/* ML section styling */
+.ml-section {
+    border-left: 4px solid rgba(255, 107, 157, 0.3);
+    padding-left: 20px;
+}
+
+.ml-section .worked-example-section {
+    border: 2px solid rgba(255, 107, 157, 0.2);
+}
+
+.ml-section .code-block {
+    background: rgba(0, 0, 0, 0.4);
+    padding: 20px;
+    border-radius: 8px;
+    border-left: 4px solid #ff6b9d;
+    font-family: 'Courier New', monospace;
+    overflow-x: auto;
+}
+
+.ml-section .code-block code {
+    color: #64ffda;
+    font-size: 14px;
+    line-height: 1.8;
+}
+
 /* Topic Section */
 .topic-section {
     margin-bottom: 4rem;

ml_complete-all-topics/style.css

@@ -738,1230 +738,892 @@ select.form-control {
 }
 
 /* END PERPLEXITY DESIGN SYSTEM */
-/* Reset and Base Styles */
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-html {
-    scroll-behavior: smooth;
-}
-
-body {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    background-color: #1a1a2e;
-    color: #e1e1e1;
-    line-height: 1.6;
-    overflow-x: hidden;
-}
-
-/* Subject Tabs */
-.subject-tabs {
-    display: flex;
-    gap: 1rem;
-    margin-top: 1rem;
-}
-
-.subject-tab {
-    padding: 0.6rem 1.5rem;
-    background: rgba(74, 144, 226, 0.2);
-    border: 2px solid transparent;
-    border-radius: 8px;
-    color: #a0a0a0;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    font-size: 0.9rem;
-}
-
-.subject-tab:hover {
-    background: rgba(74, 144, 226, 0.3);
-    color: #64ffda;
-}
-
-.subject-tab.active {
-    background: linear-gradient(135deg, #4a90e2, #64ffda);
-    color: #1a1a2e;
-    border-color: #64ffda;
-    box-shadow: 0 4px 15px rgba(100, 255, 218, 0.3);
-}
-
-/* Top Navigation */
-.top-nav {
-    position: sticky;
-    top: 0;
-    background: linear-gradient(135deg, #16213e 0%, #0f3460 100%);
-    padding: 1rem 0;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-    z-index: 1000;
-    border-bottom: 2px solid #4a90e2;
-}
-
-.nav-container {
-    max-width: 1400px;
-    margin: 0 auto;
-    padding: 0 2rem;
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-}
-
-.course-title {
-    font-size: 1.8rem;
-    color: #64ffda;
-    font-weight: 700;
-    text-shadow: 0 0 20px rgba(100, 255, 218, 0.3);
-}
-
-.mobile-menu-btn {
-    display: none;
-    flex-direction: column;
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 0.5rem;
-}
-
-.mobile-menu-btn span {
-    width: 25px;
-    height: 3px;
-    background: #64ffda;
-    margin: 3px 0;
-    border-radius: 3px;
-    transition: all 0.3s ease;
-}
-
-/* Main Container */
-.main-container {
-    display: flex;
-    max-width: 1400px;
-    margin: 0 auto;
-    min-height: calc(100vh - 80px);
-}
-
-/* Sidebar */
-.sidebar {
-    width: 280px;
-    background: #16213e;
-    padding: 2rem 1rem;
-    position: sticky;
-    top: 80px;
-    height: calc(100vh - 80px);
-    overflow-y: auto;
-    border-right: 2px solid #0f3460;
-    transition: transform 0.3s ease;
-}
-
-.sidebar-content h3 {
-    color: #64ffda;
-    margin-bottom: 1.5rem;
-    font-size: 1.3rem;
-    text-align: center;
-}
-
-.module {
-    margin-bottom: 2rem;
-}
-
-.module-title {
-    color: #4a90e2;
-    font-size: 0.9rem;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    margin-bottom: 0.8rem;
-    padding: 0.5rem;
-    background: rgba(74, 144, 226, 0.1);
-    border-radius: 5px;
-    border-left: 3px solid #4a90e2;
-}
-
-.topic-list {
-    list-style: none;
-}
-
-.topic-list li {
-    margin-bottom: 0.5rem;
-}
-
-.topic-link {
-    display: block;
-    padding: 0.6rem 0.8rem;
-    color: #a0a0a0;
-    text-decoration: none;
-    border-radius: 5px;
-    transition: all 0.3s ease;
-    font-size: 0.9rem;
-    border-left: 3px solid transparent;
-}
-
-.topic-link:hover {
-    background: rgba(100, 255, 218, 0.1);
-    color: #64ffda;
-    border-left-color: #64ffda;
-    transform: translateX(5px);
-}
-
-.topic-link.active {
-    background: rgba(100, 255, 218, 0.15);
-    color: #64ffda;
-    border-left-color: #64ffda;
-    font-weight: 600;
-}
-
-/* Scrollbar Styling */
-.sidebar::-webkit-scrollbar {
-    width: 8px;
-}
+:root {
+  /* Primitive Color Tokens */
+  --color-white: rgba(255, 255, 255, 1);
+  --color-black: rgba(0, 0, 0, 1);
+  --color-cream-50: rgba(252, 252, 249, 1);
+  --color-cream-100: rgba(255, 255, 253, 1);
+  --color-gray-200: rgba(245, 245, 245, 1);
+  --color-gray-300: rgba(167, 169, 169, 1);
+  --color-gray-400: rgba(119, 124, 124, 1);
+  --color-slate-500: rgba(98, 108, 113, 1);
+  --color-brown-600: rgba(94, 82, 64, 1);
+  --color-charcoal-700: rgba(31, 33, 33, 1);
+  --color-charcoal-800: rgba(38, 40, 40, 1);
+  --color-slate-900: rgba(19, 52, 59, 1);
+  --color-teal-300: rgba(50, 184, 198, 1);
+  --color-teal-400: rgba(45, 166, 178, 1);
+  --color-teal-500: rgba(33, 128, 141, 1);
+  --color-teal-600: rgba(29, 116, 128, 1);
+  --color-teal-700: rgba(26, 104, 115, 1);
+  --color-teal-800: rgba(41, 150, 161, 1);
+  --color-red-400: rgba(255, 84, 89, 1);
+  --color-red-500: rgba(192, 21, 47, 1);
+  --color-orange-400: rgba(230, 129, 97, 1);
+  --color-orange-500: rgba(168, 75, 47, 1);
 
-.sidebar::-webkit-scrollbar-track {
-    background: #0f3460;
-}
+  /* RGB versions for opacity control */
+  --color-brown-600-rgb: 94, 82, 64;
+  --color-teal-500-rgb: 33, 128, 141;
+  --color-slate-900-rgb: 19, 52, 59;
+  --color-slate-500-rgb: 98, 108, 113;
+  --color-red-500-rgb: 192, 21, 47;
+  --color-red-400-rgb: 255, 84, 89;
+  --color-orange-500-rgb: 168, 75, 47;
+  --color-orange-400-rgb: 230, 129, 97;
 
-.sidebar::-webkit-scrollbar-thumb {
-    background: #4a90e2;
-    border-radius: 4px;
-}
+  /* Background color tokens (Light Mode) */
+  --color-bg-1: rgba(59, 130, 246, 0.08);
+  --color-bg-2: rgba(245, 158, 11, 0.08);
+  --color-bg-3: rgba(34, 197, 94, 0.08);
+  --color-bg-4: rgba(239, 68, 68, 0.08);
+  --color-bg-5: rgba(147, 51, 234, 0.08);
+  --color-bg-6: rgba(249, 115, 22, 0.08);
+  --color-bg-7: rgba(236, 72, 153, 0.08);
+  --color-bg-8: rgba(6, 182, 212, 0.08);
 
-.sidebar::-webkit-scrollbar-thumb:hover {
-    background: #64ffda;
-}
+  /* Semantic Color Tokens (Light Mode) */
+  --color-background: var(--color-cream-50);
+  --color-surface: var(--color-cream-100);
+  --color-text: var(--color-slate-900);
+  --color-text-secondary: var(--color-slate-500);
+  --color-primary: var(--color-teal-500);
+  --color-primary-hover: var(--color-teal-600);
+  --color-primary-active: var(--color-teal-700);
+  --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
+  --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
+  --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
+  --color-border: rgba(var(--color-brown-600-rgb), 0.2);
+  --color-btn-primary-text: var(--color-cream-50);
+  --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
+  --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
+  --color-error: var(--color-red-500);
+  --color-success: var(--color-teal-500);
+  --color-warning: var(--color-orange-500);
+  --color-info: var(--color-slate-500);
+  --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
+  --color-select-caret: rgba(var(--color-slate-900-rgb), 0.8);
 
-/* Main Content */
-.content {
-    flex: 1;
-    padding: 3rem;
-    background: #1a1a2e;
-}
+  /* Typography */
+  --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  --font-size-xs: 11px;
+  --font-size-sm: 12px;
+  --font-size-base: 14px;
+  --font-size-md: 14px;
+  --font-size-lg: 16px;
+  --font-size-xl: 18px;
+  --font-size-2xl: 20px;
+  --font-size-3xl: 24px;
+  --font-size-4xl: 30px;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 550;
+  --font-weight-bold: 600;
+  --line-height-tight: 1.2;
+  --line-height-normal: 1.5;
+  --letter-spacing-tight: -0.01em;
 
-/* Subject-specific styling */
-.topic-section[data-subject="statistics"] .topic-number {
-    background: linear-gradient(135deg, #4a90e2, #64ffda);
-}
+  /* Spacing */
+  --space-0: 0;
+  --space-1: 1px;
+  --space-2: 2px;
+  --space-4: 4px;
+  --space-6: 6px;
+  --space-8: 8px;
+  --space-10: 10px;
+  --space-12: 12px;
+  --space-16: 16px;
+  --space-20: 20px;
+  --space-24: 24px;
+  --space-32: 32px;
 
-.topic-section[data-subject="linear-algebra"] .topic-number {
-    background: linear-gradient(135deg, #b47aea, #e66af5);
-}
+  /* Border Radius */
+  --radius-sm: 6px;
+  --radius-base: 8px;
+  --radius-md: 10px;
+  --radius-lg: 12px;
+  --radius-full: 9999px;
 
-.topic-section[data-subject="calculus"] .topic-number {
-    background: linear-gradient(135deg, #ff6b6b, #ffa94d);
-}
+  /* Shadows */
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
+  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.03);
 
-.topic-section[data-subject="data-science"] .topic-number {
-    background: linear-gradient(135deg, #51cf66, #40c057);
+  /* Animation */
+  --duration-fast: 150ms;
+  --duration-normal: 250ms;
+  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.topic-section[data-subject="machine-learning"] .topic-number {
-    background: linear-gradient(135deg, #ff6b9d, #c44569);
-}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-gray-400-rgb: 119, 124, 124;
+    --color-teal-300-rgb: 50, 184, 198;
+    --color-gray-300-rgb: 167, 169, 169;
+    --color-gray-200-rgb: 245, 245, 245;
 
-/* ML-specific topic number colors by category */
-.topic-number.ml-regression {
-    background: linear-gradient(135deg, #4a90e2, #64ffda);
-}
+    --color-bg-1: rgba(29, 78, 216, 0.15);
+    --color-bg-2: rgba(180, 83, 9, 0.15);
+    --color-bg-3: rgba(21, 128, 61, 0.15);
+    --color-bg-4: rgba(185, 28, 28, 0.15);
+    --color-bg-5: rgba(107, 33, 168, 0.15);
+    --color-bg-6: rgba(194, 65, 12, 0.15);
+    --color-bg-7: rgba(190, 24, 93, 0.15);
+    --color-bg-8: rgba(8, 145, 178, 0.15);
 
-.topic-number.ml-classification {
-    background: linear-gradient(135deg, #ff6b9d, #ffa94d);
+    --color-background: var(--color-charcoal-700);
+    --color-surface: var(--color-charcoal-800);
+    --color-text: var(--color-gray-200);
+    --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
+    --color-primary: var(--color-teal-300);
+    --color-primary-hover: var(--color-teal-400);
+    --color-primary-active: var(--color-teal-800);
+    --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
+    --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
+    --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
+    --color-border: rgba(var(--color-gray-400-rgb), 0.3);
+    --color-error: var(--color-red-400);
+    --color-success: var(--color-teal-300);
+    --color-warning: var(--color-orange-400);
+    --color-info: var(--color-gray-300);
+    --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
+    --color-btn-primary-text: var(--color-slate-900);
+    --color-card-border: rgba(var(--color-gray-400-rgb), 0.2);
+    --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
+    --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  }
 }
 
-.topic-number.ml-clustering {
-    background: linear-gradient(135deg, #51cf66, #40c057);
+@font-face {
+  font-family: 'FKGroteskNeue';
+  src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2') format('woff2');
 }
 
-.topic-number.ml-reduction {
-    background: linear-gradient(135deg, #b47aea, #e66af5);
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
-.topic-number.ml-reinforcement {
-    background: linear-gradient(135deg, #c44569, #ff6b9d);
+html, body {
+  height: 100%;
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-normal);
+  color: var(--color-text);
+  background-color: var(--color-background);
+  -webkit-font-smoothing: antialiased;
 }
 
-.topic-number.ml-advanced {
-    background: linear-gradient(135deg, #ffa94d, #f39c12);
+.app-container {
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
 }
 
-.topic-section[data-subject="linear-algebra"] .topic-header h2 {
-    color: #b47aea;
+/* Sidebar Navigation */
+.sidebar {
+  width: 260px;
+  background-color: var(--color-surface);
+  border-right: 1px solid var(--color-border);
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
 }
 
-.topic-section[data-subject="calculus"] .topic-header h2 {
-    color: #ff6b6b;
+.sidebar-header {
+  padding: var(--space-24) var(--space-20);
+  border-bottom: 1px solid var(--color-border);
 }
 
-.topic-section[data-subject="data-science"] .topic-header h2 {
-    color: #51cf66;
+.sidebar-header h1 {
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text);
+  margin-bottom: var(--space-4);
 }
 
-.topic-section[data-subject="machine-learning"] .topic-header h2 {
-    color: #ff6b9d;
+.sidebar-header p {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
 }
 
-/* ML section styling */
-.ml-section {
-    border-left: 4px solid rgba(255, 107, 157, 0.3);
-    padding-left: 20px;
+.nav-menu {
+  list-style: none;
+  padding: var(--space-12);
 }
 
-.ml-section .worked-example-section {
-    border: 2px solid rgba(255, 107, 157, 0.2);
+.nav-item {
+  display: flex;
+  align-items: center;
+  padding: var(--space-12) var(--space-16);
+  margin-bottom: var(--space-4);
+  border-radius: var(--radius-base);
+  cursor: pointer;
+  transition: all var(--duration-fast) var(--ease-standard);
+  color: var(--color-text);
 }
 
-.ml-section .code-block {
-    background: rgba(0, 0, 0, 0.4);
-    padding: 20px;
-    border-radius: 8px;
-    border-left: 4px solid #ff6b9d;
-    font-family: 'Courier New', monospace;
-    overflow-x: auto;
+.nav-item:hover {
+  background-color: var(--color-secondary);
 }
 
-.ml-section .code-block code {
-    color: #64ffda;
-    font-size: 14px;
-    line-height: 1.8;
+.nav-item.active {
+  background-color: var(--color-primary);
+  color: var(--color-btn-primary-text);
 }
 
-/* Topic Section */
-.topic-section {
-    margin-bottom: 4rem;
-    opacity: 0;
-    transform: translateY(20px);
-    animation: fadeInUp 0.6s ease forwards;
+/* TOC Category Styles */
+.toc-category {
+  margin-bottom: var(--space-8);
 }
 
-@keyframes fadeInUp {
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+.toc-category-header {
+  display: flex;
+  align-items: center;
+  padding: var(--space-12) var(--space-16);
+  background-color: rgba(var(--color-teal-500-rgb), 0.15);
+  border-radius: var(--radius-base);
+  cursor: pointer;
+  transition: all var(--duration-fast) var(--ease-standard);
+  margin-bottom: var(--space-8);
 }
 
-.topic-header {
-    margin-bottom: 2rem;
-    padding-bottom: 1.5rem;
-    border-bottom: 3px solid #0f3460;
+.toc-category-header:hover {
+  background-color: rgba(var(--color-teal-500-rgb), 0.25);
 }
 
-.topic-number {
-    display: inline-block;
-    background: linear-gradient(135deg, #4a90e2, #64ffda);
-    color: #1a1a2e;
-    padding: 0.3rem 1rem;
-    border-radius: 20px;
-    font-size: 0.85rem;
-    font-weight: 700;
-    margin-bottom: 0.8rem;
+.toc-category-header[data-category="supervised"] {
+  background-color: rgba(106, 169, 255, 0.15);
 }
 
-.topic-header h2 {
-    font-size: 2.5rem;
-    color: #64ffda;
-    margin-bottom: 0.5rem;
-    text-shadow: 0 0 20px rgba(100, 255, 218, 0.2);
+.toc-category-header[data-category="supervised"]:hover {
+  background-color: rgba(106, 169, 255, 0.25);
 }
 
-.topic-subtitle {
-    color: #a0a0a0;
-    font-size: 1.1rem;
-    font-style: italic;
+.toc-category-header[data-category="unsupervised"] {
+  background-color: rgba(126, 240, 212, 0.15);
 }
 
-/* Content Cards */
-.content-card {
-    background: #16213e;
-    padding: 2rem;
-    border-radius: 12px;
-    margin-bottom: 2rem;
-    border: 1px solid #0f3460;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
+.toc-category-header[data-category="unsupervised"]:hover {
+  background-color: rgba(126, 240, 212, 0.25);
 }
 
-.content-card:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 25px rgba(74, 144, 226, 0.2);
+.toc-category-header[data-category="reinforcement"] {
+  background-color: rgba(255, 140, 106, 0.15);
 }
 
-.content-card h3 {
-    color: #4a90e2;
-    margin-bottom: 1rem;
-    font-size: 1.5rem;
+.toc-category-header[data-category="reinforcement"]:hover {
+  background-color: rgba(255, 140, 106, 0.25);
 }
 
-.content-card h4 {
-    margin-top: 1rem;
-    margin-bottom: 0.8rem;
-    font-size: 1.2rem;
+.category-icon {
+  font-size: var(--font-size-xl);
+  margin-right: var(--space-8);
 }
 
-.content-card p {
-    margin-bottom: 1rem;
-    color: #d0d0d0;
-    line-height: 1.8;
+.category-title {
+  flex: 1;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text);
+  letter-spacing: 0.5px;
 }
 
-.content-card ul,
-.content-card ol {
-    margin-left: 2rem;
-    margin-bottom: 1rem;
+.category-toggle {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  transition: transform var(--duration-normal) var(--ease-standard);
 }
 
-.content-card li {
-    margin-bottom: 0.5rem;
-    color: #d0d0d0;
+.category-toggle.collapsed {
+  transform: rotate(-90deg);
 }
 
-/* Callout Boxes */
-.callout-box {
-    padding: 1.5rem;
-    border-radius: 10px;
-    margin-bottom: 2rem;
-    border-left: 4px solid;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+.toc-category-content {
+  padding-left: var(--space-16);
+  max-height: 1000px;
+  overflow: hidden;
+  transition: max-height var(--duration-normal) var(--ease-standard);
 }
 
-.callout-header {
-    font-weight: 700;
-    font-size: 1rem;
-    margin-bottom: 0.8rem;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
+.toc-category-content.collapsed {
+  max-height: 0;
 }
 
-.callout-box.insight {
-    background: rgba(100, 255, 218, 0.1);
-    border-left-color: #64ffda;
+.toc-subcategory {
+  margin-bottom: var(--space-12);
 }
 
-.callout-box.insight .callout-header {
-    color: #64ffda;
+.toc-subcategory-title {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  padding: var(--space-8) var(--space-8) var(--space-4) var(--space-8);
 }
 
-.callout-box.warning {
-    background: rgba(255, 107, 107, 0.1);
-    border-left-color: #ff6b6b;
+.toc-link.toc-sub {
+  padding: var(--space-8) var(--space-12);
+  font-size: var(--font-size-sm);
+  margin-bottom: var(--space-4);
 }
 
-.callout-box.warning .callout-header {
-    color: #ff6b6b;
+.nav-icon {
+  font-size: var(--font-size-xl);
+  margin-right: var(--space-12);
 }
 
-.callout-box.tip {
-    background: rgba(81, 207, 102, 0.1);
-    border-left-color: #51cf66;
+.nav-label {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
 }
 
-.callout-box.tip .callout-header {
-    color: #51cf66;
+/* Main Content */
+.main-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--space-32);
 }
 
-.callout-box.example {
-    background: rgba(74, 144, 226, 0.1);
-    border-left-color: #4a90e2;
+.module {
+  max-width: 1400px;
+  margin: 0 auto;
 }
 
-.callout-box.example .callout-header {
-    color: #4a90e2;
+.module-header {
+  margin-bottom: var(--space-32);
 }
 
-.callout-box p,
-.callout-box ul,
-.callout-box ol {
-    color: #d0d0d0;
+.module-header h2 {
+  font-size: var(--font-size-4xl);
+  font-weight: var(--font-weight-bold);
+  margin-bottom: var(--space-8);
+  color: var(--color-text);
 }
 
-/* Formula Cards */
-.formula-card {
-    background: linear-gradient(135deg, #0f3460 0%, #16213e 100%);
-    padding: 2rem;
-    border-radius: 12px;
-    margin-bottom: 1.5rem;
-    border: 2px solid #4a90e2;
-    box-shadow: 0 4px 20px rgba(74, 144, 226, 0.2);
+.module-header p {
+  font-size: var(--font-size-lg);
+  color: var(--color-text-secondary);
 }
 
-.formula-header {
-    color: #64ffda;
-    font-size: 1.2rem;
-    font-weight: 700;
-    margin-bottom: 1rem;
-    text-align: center;
-    text-transform: uppercase;
-    letter-spacing: 1px;
+.content-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: var(--space-24);
 }
 
-.formula-main {
-    font-size: 1.8rem;
-    text-align: center;
-    margin: 1.5rem 0;
-    color: #fff;
-    font-family: 'Courier New', monospace;
+.section {
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-card-border);
+  border-radius: var(--radius-lg);
+  padding: var(--space-24);
 }
 
-.formula-symbol {
-    color: #64ffda;
-    font-weight: 700;
-    font-size: 2rem;
+.section h3 {
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-semibold);
+  margin-bottom: var(--space-16);
+  color: var(--color-text);
 }
 
-.formula-var {
-    color: #64ffda;
-    font-weight: 600;
+.section h4 {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-medium);
+  margin-bottom: var(--space-12);
+  color: var(--color-text);
 }
 
-.formula-fraction {
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    margin: 0 0.5rem;
-    vertical-align: middle;
+.chart-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
-.formula-numerator,
-.formula-denominator {
-    padding: 0.2rem 0.5rem;
+.chart-section canvas {
+  max-width: 100%;
+  height: auto;
 }
 
-.formula-line {
-    width: 100%;
-    height: 2px;
-    background: #fff;
-    margin: 0.2rem 0;
+.full-width {
+  grid-column: 1 / -1;
 }
 
-.formula-steps {
-    margin-top: 1rem;
-    padding-top: 1rem;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
+/* Tables */
+.table-container {
+  overflow-x: auto;
 }
 
-.formula-steps p {
-    color: #a0a0a0;
-    margin-bottom: 0.5rem;
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
 }
 
-.formula-steps ol,
-.formula-steps ul {
-    margin-left: 2rem;
-    color: #d0d0d0;
+.data-table thead {
+  background-color: var(--color-secondary);
 }
 
-.formula-steps li {
-    margin-bottom: 0.5rem;
+.data-table th,
+.data-table td {
+  padding: var(--space-12);
+  text-align: left;
+  border-bottom: 1px solid var(--color-border);
 }
 
-/* Interactive Container */
-.interactive-container {
-    background: #16213e;
-    padding: 2rem;
-    border-radius: 12px;
-    margin-bottom: 2rem;
-    border: 2px solid #4a90e2;
-    box-shadow: 0 4px 20px rgba(74, 144, 226, 0.3);
+.data-table th {
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-sm);
+  color: var(--color-text);
 }
 
-.interactive-container h3 {
-    color: #64ffda;
-    margin-bottom: 1.5rem;
-    text-align: center;
-    font-size: 1.5rem;
+.data-table td {
+  font-size: var(--font-size-base);
+  color: var(--color-text);
 }
 
-.interactive-container canvas {
-    display: block;
-    max-width: 100%;
-    height: auto;
-    margin: 0 auto 1.5rem;
-    background: #0f3460;
-    border-radius: 8px;
-    border: 1px solid #4a90e2;
+.data-table tbody tr:hover {
+  background-color: var(--color-secondary);
 }
 
 /* Controls */
 .controls {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    align-items: center;
-}
-
-.input-group {
-    display: flex;
-    flex-direction: column;
-    gap: 0.8rem;
-    width: 100%;
-    max-width: 600px;
-}
-
-.input-group label {
-    color: #64ffda;
-    font-weight: 600;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-16);
 }
 
-.form-control {
-    padding: 0.8rem;
-    background: #0f3460;
-    border: 2px solid #4a90e2;
-    border-radius: 8px;
-    color: #e1e1e1;
-    font-size: 1rem;
-    transition: all 0.3s ease;
+.control-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
 }
 
-.form-control:focus {
-    outline: none;
-    border-color: #64ffda;
-    box-shadow: 0 0 10px rgba(100, 255, 218, 0.3);
+.control-group label {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text);
 }
 
-.slider-group {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    width: 100%;
+.control-group input[type="range"] {
+  width: 100%;
+  height: 6px;
+  border-radius: var(--radius-full);
+  background: var(--color-secondary);
+  outline: none;
+  cursor: pointer;
 }
 
-.slider-group label {
-    color: #64ffda;
-    font-weight: 600;
+.control-group input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--color-primary);
+  cursor: pointer;
 }
 
-.slider {
-    width: 100%;
-    height: 8px;
-    border-radius: 5px;
-    background: #0f3460;
-    outline: none;
-    -webkit-appearance: none;
+.control-group input[type="range"]::-moz-range-thumb {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--color-primary);
+  cursor: pointer;
+  border: none;
 }
 
-.slider::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    background: #64ffda;
-    cursor: pointer;
-    box-shadow: 0 0 10px rgba(100, 255, 218, 0.5);
-    transition: all 0.3s ease;
+.radio-group {
+  display: flex;
+  gap: var(--space-16);
+  flex-wrap: wrap;
 }
 
-.slider::-webkit-slider-thumb:hover {
-    background: #4a90e2;
-    transform: scale(1.2);
+.radio-group label {
+  display: flex;
+  align-items: center;
+  gap: var(--space-6);
+  cursor: pointer;
+  font-size: var(--font-size-base);
 }
 
-.slider::-moz-range-thumb {
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    background: #64ffda;
-    cursor: pointer;
-    border: none;
-    box-shadow: 0 0 10px rgba(100, 255, 218, 0.5);
+.radio-group input[type="radio"] {
+  cursor: pointer;
 }
 
 /* Buttons */
 .btn {
-    padding: 0.8rem 2rem;
-    border: none;
-    border-radius: 8px;
-    font-size: 1rem;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-}
-
-.btn-primary {
-    background: linear-gradient(135deg, #4a90e2, #64ffda);
-    color: #1a1a2e;
-}
-
-.btn-primary:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 20px rgba(100, 255, 218, 0.4);
-}
-
-.btn-secondary {
-    background: #0f3460;
-    color: #64ffda;
-    border: 2px solid #4a90e2;
-}
-
-.btn-secondary:hover {
-    background: #16213e;
-    transform: translateY(-2px);
-}
-
-/* Results Display */
-.results {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-    gap: 1rem;
-    width: 100%;
-    margin-top: 1rem;
-}
-
-.result-item {
-    background: #0f3460;
-    padding: 1rem;
-    border-radius: 8px;
-    text-align: center;
-    border: 2px solid #4a90e2;
-}
-
-.result-label {
-    display: block;
-    color: #64ffda;
-    font-weight: 600;
-    margin-bottom: 0.5rem;
-    font-size: 0.9rem;
-}
-
-.result-item span:last-child {
-    display: block;
-    color: #fff;
-    font-size: 1.5rem;
-    font-weight: 700;
-}
-
-/* Tables */
-.comparison-table {
-    width: 100%;
-    border-collapse: collapse;
-    margin: 1rem 0;
-    background: #0f3460;
-    border-radius: 8px;
-    overflow: hidden;
-}
-
-.comparison-table thead {
-    background: linear-gradient(135deg, #4a90e2, #64ffda);
-    color: #1a1a2e;
-}
-
-.comparison-table th,
-.comparison-table td {
-    padding: 1rem;
-    text-align: left;
-    border-bottom: 1px solid #16213e;
-}
-
-.comparison-table th {
-    font-weight: 700;
-    text-transform: uppercase;
-    font-size: 0.9rem;
-    letter-spacing: 1px;
-}
-
-.comparison-table tbody tr {
-    transition: background 0.3s ease;
-}
-
-.comparison-table tbody tr:hover {
-    background: rgba(74, 144, 226, 0.1);
-}
-
-.comparison-table td {
-    color: #d0d0d0;
-}
-
-/* Two Column Layout */
-.two-column {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 2rem;
-    margin: 1.5rem 0;
-}
-
-.column {
-    background: #0f3460;
-    padding: 1.5rem;
-    border-radius: 8px;
-    border: 2px solid rgba(74, 144, 226, 0.3);
-}
-
-/* Comparison Grid */
-.comparison-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: 1.5rem;
-    margin: 1.5rem 0;
-}
-
-.comparison-item {
-    background: #0f3460;
-    padding: 1.5rem;
-    border-radius: 8px;
-    border-left: 4px solid #4a90e2;
-}
-
-/* Data Tree */
-.data-tree {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 2rem;
-    padding: 2rem;
-    margin: 1.5rem 0;
-}
-
-.tree-level-1,
-.tree-level-2,
-.tree-level-3 {
-    display: flex;
-    gap: 2rem;
-    justify-content: center;
-    flex-wrap: wrap;
-}
-
-.tree-node {
-    padding: 1rem 2rem;
-    background: #0f3460;
-    border: 2px solid #4a90e2;
-    border-radius: 8px;
-    color: #64ffda;
-    font-weight: 600;
-    position: relative;
-    transition: all 0.3s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-10) var(--space-20);
+  border-radius: var(--radius-base);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition: all var(--duration-normal) var(--ease-standard);
+  border: none;
+  text-decoration: none;
 }
 
-.tree-node:hover {
-    transform: scale(1.05);
-    box-shadow: 0 4px 15px rgba(74, 144, 226, 0.4);
+.btn--primary {
+  background: var(--color-primary);
+  color: var(--color-btn-primary-text);
 }
 
-.tree-node.main {
-    font-size: 1.3rem;
-    background: linear-gradient(135deg, #4a90e2, #64ffda);
-    color: #1a1a2e;
+.btn--primary:hover {
+  background: var(--color-primary-hover);
 }
 
-.tree-node.categorical {
-    border-color: #64ffda;
+.btn--secondary {
+  background: var(--color-secondary);
+  color: var(--color-text);
 }
 
-.tree-node.numerical {
-    border-color: #ff6b6b;
+.btn--secondary:hover {
+  background: var(--color-secondary-hover);
 }
 
-/* Use Case List */
-.use-case-list {
-    list-style: none;
-    margin-left: 0;
+/* Info Cards */
+.info-card {
+  background-color: var(--color-bg-1);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-base);
+  padding: var(--space-16);
+  margin-top: var(--space-16);
 }
 
-.use-case-list li {
-    padding: 1rem;
-    margin-bottom: 1rem;
-    background: #0f3460;
-    border-radius: 8px;
-    border-left: 4px solid #4a90e2;
-    transition: all 0.3s ease;
+.info-card h4 {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-secondary);
+  margin-bottom: var(--space-8);
 }
 
-.use-case-list li:hover {
-    transform: translateX(5px);
-    border-left-color: #64ffda;
+.metric-value {
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-primary);
 }
 
-/* Example Solution */
-.example-solution {
-    background: #0f3460;
-    padding: 1.5rem;
-    border-radius: 8px;
-    margin-top: 1rem;
-    font-family: 'Courier New', monospace;
+.metric-detail {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  margin-top: var(--space-4);
 }
 
-.example-solution p {
-    margin-bottom: 0.8rem;
-    color: #d0d0d0;
+/* Explanation Cards */
+.explanation-card {
+  background-color: var(--color-bg-2);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-base);
+  padding: var(--space-20);
 }
 
-.example-solution strong {
-    color: #64ffda;
+.explanation-card h4 {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  margin-bottom: var(--space-12);
 }
 
-/* Summary Card */
-.summary-card {
-    background: linear-gradient(135deg, #0f3460 0%, #16213e 100%);
-    padding: 2rem;
-    border-radius: 12px;
-    border: 2px solid #64ffda;
-    box-shadow: 0 4px 20px rgba(100, 255, 218, 0.3);
-    margin-bottom: 2rem;
+.explanation-card p {
+  margin-bottom: var(--space-12);
+  line-height: 1.6;
 }
 
-.summary-card h3 {
-    color: #64ffda;
-    margin-bottom: 1rem;
-    font-size: 1.5rem;
-    text-align: center;
+.explanation-card ul {
+  padding-left: var(--space-20);
+  margin-top: var(--space-12);
 }
 
-.summary-card ul {
-    list-style: none;
-    margin-left: 0;
+.explanation-card li {
+  margin-bottom: var(--space-8);
+  line-height: 1.6;
 }
 
-.summary-card li {
-    padding: 0.8rem;
-    margin-bottom: 0.8rem;
-    background: rgba(100, 255, 218, 0.05);
-    border-radius: 6px;
-    border-left: 3px solid #64ffda;
-    color: #d0d0d0;
+.formula {
+  font-family: var(--font-family-mono);
+  background-color: var(--color-surface);
+  padding: var(--space-8) var(--space-12);
+  border-radius: var(--radius-sm);
+  display: inline-block;
+  margin: var(--space-8) 0;
+  border: 1px solid var(--color-border);
 }
 
-.summary-card li::before {
-    content: "✓";
-    color: #64ffda;
-    font-weight: 700;
-    margin-right: 0.8rem;
+/* Confusion Matrix */
+.confusion-matrix {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-12);
+  margin-bottom: var(--space-20);
 }
 
-/* Data Examples Table */
-.data-examples-table {
-    width: 100%;
-    border-collapse: collapse;
-    margin-top: 1rem;
+.cm-cell {
+  padding: var(--space-20);
+  border-radius: var(--radius-base);
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
 }
 
-.data-examples-table th,
-.data-examples-table td {
-    padding: 1rem;
-    text-align: left;
-    border-bottom: 1px solid rgba(74, 144, 226, 0.2);
+.cm-label {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-secondary);
 }
 
-.data-examples-table th {
-    background: rgba(74, 144, 226, 0.2);
-    color: #64ffda;
-    font-weight: 600;
+.cm-value {
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-bold);
 }
 
-/* Responsive Design */
-@media (max-width: 1024px) {
-    .subject-tabs {
-        flex-wrap: wrap;
-        gap: 0.5rem;
-    }
-    
-    .subject-tab {
-        font-size: 0.8rem;
-        padding: 0.5rem 1rem;
-    }
-    .main-container {
-        flex-direction: column;
-    }
-
-    .sidebar {
-        width: 100%;
-        height: auto;
-        position: static;
-        transform: translateX(-100%);
-    }
-
-    .sidebar.active {
-        transform: translateX(0);
-    }
-
-    .mobile-menu-btn {
-        display: flex;
-    }
-
-    .content {
-        padding: 2rem 1.5rem;
-    }
-
-    .topic-header h2 {
-        font-size: 2rem;
-    }
-
-    .two-column {
-        grid-template-columns: 1fr;
-    }
+.cm-tn {
+  background-color: var(--color-bg-3);
+  border: 2px solid var(--color-success);
 }
 
-@media (max-width: 768px) {
-    .course-title {
-        font-size: 1.3rem;
-    }
-
-    .content {
-        padding: 1.5rem 1rem;
-    }
-
-    .topic-header h2 {
-        font-size: 1.6rem;
-    }
-
-    .formula-main {
-        font-size: 1.3rem;
-    }
-
-    .comparison-grid {
-        grid-template-columns: 1fr;
-    }
-
-    .results {
-        grid-template-columns: 1fr;
-    }
-
-    .interactive-container canvas {
-        max-width: 100%;
-        height: auto;
-    }
+.cm-tn .cm-value {
+  color: var(--color-success);
 }
 
-/* Worked Example Section Styles */
-.worked-example-section {
-    background: linear-gradient(135deg, #1e3a5f 0%, #2d4a6f 100%);
-    border-radius: 12px;
-    padding: 30px;
-    margin: 40px 0;
-    border-left: 5px solid #64ffda;
-    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
+.cm-fp {
+  background-color: var(--color-bg-4);
+  border: 2px solid var(--color-error);
 }
 
-.example-problem {
-    background: rgba(255,255,255,0.08);
-    padding: 25px;
-    border-radius: 10px;
-    margin-bottom: 30px;
-    border: 2px solid #64ffda;
+.cm-fp .cm-value {
+  color: var(--color-error);
 }
 
-.problem-statement {
-    font-size: 19px;
-    font-weight: 600;
-    color: #64ffda;
-    line-height: 1.6;
+.cm-fn {
+  background-color: var(--color-bg-4);
+  border: 2px solid var(--color-error);
 }
 
-.solution-step {
-    display: flex;
-    gap: 20px;
-    margin: 25px 0;
-    padding: 25px;
-    background: rgba(0,0,0,0.3);
-    border-radius: 10px;
-    border-left: 4px solid #4a90e2;
-    transition: all 0.3s ease;
+.cm-fn .cm-value {
+  color: var(--color-error);
 }
 
-.solution-step:hover {
-    background: rgba(0,0,0,0.4);
-    border-left-width: 6px;
-    transform: translateX(5px);
+.cm-tp {
+  background-color: var(--color-bg-3);
+  border: 2px solid var(--color-success);
 }
 
-.step-number {
-    font-weight: 700;
-    color: #64ffda;
-    font-size: 20px;
-    min-width: 90px;
-    flex-shrink: 0;
+.cm-tp .cm-value {
+  color: var(--color-success);
 }
 
-.step-content {
-    flex: 1;
+/* Metrics Panel */
+.metrics-panel {
+  display: flex;
+  gap: var(--space-20);
+  flex-wrap: wrap;
+  margin-top: var(--space-16);
 }
 
-.step-description {
-    font-size: 16px;
-    font-weight: 600;
-    color: #fff;
-    margin-bottom: 12px;
+.metric-item {
+  flex: 1;
+  min-width: 150px;
+  padding: var(--space-12);
+  background-color: var(--color-secondary);
+  border-radius: var(--radius-base);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
 }
 
-.step-work {
-    background: rgba(0,0,0,0.4);
-    padding: 18px;
-    border-radius: 8px;
-    margin: 12px 0;
-    font-family: 'Courier New', monospace;
-    border-left: 3px solid #ff6b6b;
-    overflow-x: auto;
+.metric-label {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
 }
 
-.step-work code {
-    display: block;
-    color: #e1e1e1;
-    font-size: 14px;
-    line-height: 1.8;
-    margin: 4px 0;
+.metric-val {
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text);
 }
 
-.step-explanation {
-    font-style: italic;
-    color: #a0a0a0;
-    font-size: 14px;
-    margin-top: 10px;
+/* Three Charts Layout */
+.three-charts {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-20);
+  width: 100%;
 }
 
-.calculation-table {
-    width: 100%;
-    border-collapse: collapse;
-    margin: 15px 0;
-    background: rgba(0,0,0,0.2);
-    border-radius: 8px;
-    overflow: hidden;
+.chart-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-12);
 }
 
-.calculation-table th,
-.calculation-table td {
-    padding: 12px;
-    border: 1px solid rgba(255,255,255,0.1);
-    text-align: center;
+.chart-container h4 {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  text-align: center;
 }
 
-.calculation-table th {
-    background: #4a90e2;
-    font-weight: 600;
-    color: #fff;
+.chart-desc {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  text-align: center;
+  margin-top: var(--space-8);
 }
 
-.calculation-table tbody tr:hover {
-    background: rgba(100, 255, 218, 0.1);
+/* Calculation Panel */
+.calculation-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-12);
 }
 
-.final-answer {
-    background: linear-gradient(135deg, #51cf66 0%, #37b24d 100%);
-    padding: 25px;
-    border-radius: 10px;
-    margin-top: 30px;
-    text-align: center;
-    font-size: 18px;
-    box-shadow: 0 4px 12px rgba(81,207,102,0.3);
+.calc-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--space-12);
+  background-color: var(--color-secondary);
+  border-radius: var(--radius-base);
 }
 
-.answer-highlight {
-    font-weight: 700;
-    font-size: 24px;
-    color: white;
-    display: block;
-    margin-top: 12px;
-    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+.calc-item strong {
+  font-weight: var(--font-weight-medium);
 }
 
-.verification {
-    background: rgba(100, 255, 218, 0.1);
-    padding: 20px;
-    border-radius: 8px;
-    border-left: 4px solid #51cf66;
-    margin-top: 20px;
+.calc-item span {
+  font-family: var(--font-family-mono);
+  color: var(--color-primary);
+  font-weight: var(--font-weight-semibold);
 }
 
-.verification strong {
-    color: #51cf66;
-    font-size: 16px;
+/* Responsive adjustments */
+@media (max-width: 1200px) {
+  .content-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .three-charts {
+    grid-template-columns: 1fr;
+  }
 }
 
-.verification p {
-    color: #d0d0d0;
-    margin-top: 10px;
-    line-height: 1.6;
+/* Pipeline Flow */
+.pipeline-flow {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: var(--space-16);
 }
 
-.practice-problems {
-    background: rgba(74, 144, 226, 0.1);
-    padding: 25px;
-    border-radius: 10px;
-    margin-top: 30px;
-    border: 2px solid #4a90e2;
+.pipeline-stage {
+  background: var(--color-bg-1);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-base);
+  padding: var(--space-16);
 }
 
-.practice-problems h4 {
-    color: #64ffda;
-    margin-bottom: 15px;
-    font-size: 18px;
+.pipeline-stage h4 {
+  font-size: var(--font-size-base);
+  margin-bottom: var(--space-12);
+  color: var(--color-primary);
 }
 
-.practice-problems ol {
-    margin: 15px 0 15px 25px;
-    color: #d0d0d0;
+/* Workflow Container */
+.workflow-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--space-16);
+  padding: var(--space-24);
 }
 
-.practice-problems li {
-    margin-bottom: 10px;
-    line-height: 1.6;
+.workflow-stage {
+  flex: 1;
+  min-width: 140px;
+  background: var(--color-bg-1);
+  border: 2px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: var(--space-20);
+  text-align: center;
+  transition: all var(--duration-normal) var(--ease-standard);
+  cursor: pointer;
 }
 
-.show-answers-btn {
-    background: #4a90e2;
-    color: white;
-    border: none;
-    padding: 10px 20px;
-    border-radius: 6px;
-    cursor: pointer;
-    font-weight: 600;
-    margin: 10px 0;
-    transition: all 0.3s ease;
+.workflow-stage:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-lg);
+  border-color: var(--color-primary);
 }
 
-.show-answers-btn:hover {
-    background: #64ffda;
-    color: #1a1a2e;
-    transform: translateY(-2px);
+.workflow-stage.active {
+  background: var(--color-primary);
+  color: var(--color-btn-primary-text);
+  border-color: var(--color-primary);
 }
 
-.practice-answers {
-    background: rgba(0,0,0,0.3);
-    padding: 20px;
-    border-radius: 8px;
-    margin-top: 15px;
-    border-left: 4px solid #51cf66;
+.stage-icon {
+  font-size: 32px;
+  margin-bottom: var(--space-8);
 }
 
-.practice-answers p strong {
-    color: #51cf66;
+.workflow-stage h4 {
+  font-size: var(--font-size-base);
+  margin-bottom: var(--space-8);
 }
 
-.practice-answers ol {
-    margin-left: 25px;
-    color: #e1e1e1;
+.workflow-stage p {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  margin-bottom: var(--space-12);
 }
 
-/* Animations */
-@keyframes pulse {
-    0%, 100% {
-        opacity: 1;
-    }
-    50% {
-        opacity: 0.5;
-    }
+.workflow-stage.active p {
+  color: var(--color-btn-primary-text);
+  opacity: 0.9;
 }
 
-.pulse {
-    animation: pulse 2s ease-in-out infinite;
+.workflow-arrow {
+  font-size: 24px;
+  color: var(--color-primary);
+  font-weight: bold;
 }
 
-/* Loading State */
-.loading {
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    border: 3px solid rgba(100, 255, 218, 0.3);
-    border-radius: 50%;
-    border-top-color: #64ffda;
-    animation: spin 1s ease-in-out infinite;
+.stage-btn {
+  font-size: var(--font-size-sm);
+  padding: var(--space-6) var(--space-12);
 }
 
-@keyframes spin {
-    to {
-        transform: rotate(360deg);
-    }
+@media (max-width: 1200px) {
+  .workflow-container {
+    flex-direction: column;
+  }
+  
+  .workflow-arrow {
+    transform: rotate(90deg);
+  }
 }
 
-/* Smooth Transitions */
-* {
-    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+@media (max-width: 768px) {
+  .sidebar {
+    width: 80px;
+  }
+  
+  .nav-label {
+    display: none;
+  }
+  
+  .sidebar-header h1 {
+    font-size: var(--font-size-lg);
+  }
+  
+  .sidebar-header p {
+    display: none;
+  }
 }

prompt-engineering-guide/app.js

@@ -0,0 +1,628 @@
+// Topics data
+const topics = [
+    { id: 1, title: "Introduction to Prompt Engineering", subtitle: "What & Why" },
+    { id: 2, title: "Prompt Structure", subtitle: "Building Blocks" },
+    { id: 3, title: "Clarity & Specificity", subtitle: "Writing Precise Prompts" },
+    { id: 4, title: "Context & Background", subtitle: "Providing Information" },
+    { id: 5, title: "Output Format", subtitle: "Specifying Structure" },
+    { id: 6, title: "Iterative Refinement", subtitle: "Testing & Improving" },
+    { id: 7, title: "Advanced Techniques", subtitle: "Expert Methods" },
+    { id: 8, title: "Real-World Applications", subtitle: "Putting It Together" }
+];
+
+// State management
+let currentTopic = 1;
+let completedTopics = [];
+
+// Initialize app
+function init() {
+    renderTopicList();
+    initializeCanvases();
+    updateProgress();
+    showContextExample('minimal');
+    showFormatExample('list');
+    showIteration(1);
+    updateSpecificity();
+    setChallenge('email');
+}
+
+// Render topic list in sidebar
+function renderTopicList() {
+    const topicList = document.getElementById('topicList');
+    topicList.innerHTML = topics.map(topic => `
+        <li class="topic-item ${topic.id === currentTopic ? 'active' : ''}" onclick="navigateTo(${topic.id})">
+            <h3>${topic.id}. ${topic.title}</h3>
+            <p>${topic.subtitle}</p>
+        </li>
+    `).join('');
+}
+
+// Navigate to topic
+function navigateTo(topicId) {
+    // Hide current section
+    const currentSection = document.querySelector('.content-section.active');
+    if (currentSection) {
+        currentSection.classList.remove('active');
+    }
+
+    // Show new section
+    const newSection = document.getElementById(`topic-${topicId}`);
+    if (newSection) {
+        newSection.classList.add('active');
+        currentTopic = topicId;
+        
+        // Mark previous topics as completed
+        if (!completedTopics.includes(topicId - 1) && topicId > 1) {
+            completedTopics.push(topicId - 1);
+        }
+        
+        renderTopicList();
+        updateProgress();
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+}
+
+// Update progress bar
+function updateProgress() {
+    const progress = (currentTopic / topics.length) * 100;
+    const progressBar = document.getElementById('progressBar');
+    progressBar.style.width = `${progress}%`;
+}
+
+// Prompt quality evaluation
+function updatePromptQuality() {
+    const role = document.getElementById('roleInput').value;
+    const context = document.getElementById('contextInput').value;
+    const task = document.getElementById('taskInput').value;
+    const format = document.getElementById('formatInput').value;
+
+    const components = [role, context, task, format];
+    const filledComponents = components.filter(c => c.trim().length > 0).length;
+
+    const qualityGrade = document.getElementById('qualityGrade');
+    const combinedPrompt = document.getElementById('combinedPrompt');
+
+    let gradeText = '';
+    let gradeClass = '';
+
+    if (filledComponents === 0) {
+        gradeText = 'Quality: Poor';
+        gradeClass = 'grade-poor';
+        combinedPrompt.textContent = 'Start filling in the components above...';
+    } else if (filledComponents <= 2) {
+        gradeText = 'Quality: Poor';
+        gradeClass = 'grade-poor';
+    } else if (filledComponents === 3) {
+        gradeText = 'Quality: Good';
+        gradeClass = 'grade-good';
+    } else {
+        gradeText = 'Quality: Excellent';
+        gradeClass = 'grade-excellent';
+    }
+
+    qualityGrade.textContent = gradeText;
+    qualityGrade.className = 'quality-grade ' + gradeClass;
+
+    if (filledComponents > 0) {
+        const parts = [];
+        if (role) parts.push(role);
+        if (context) parts.push(context);
+        if (task) parts.push(task);
+        if (format) parts.push(format);
+        combinedPrompt.textContent = parts.join(' ');
+    }
+}
+
+// Specificity slider
+const specificityLevels = [
+    {
+        level: 1,
+        prompt: "Write about AI.",
+        quality: "Poor - Too vague, could mean anything"
+    },
+    {
+        level: 2,
+        prompt: "Write about machine learning.",
+        quality: "Poor - Still too broad, no specific focus"
+    },
+    {
+        level: 3,
+        prompt: "Explain how machine learning works in simple terms.",
+        quality: "Good - More specific, mentions simplicity"
+    },
+    {
+        level: 4,
+        prompt: "Explain how machine learning works in 200 words, using simple terms for beginners.",
+        quality: "Very Good - Specifies length and audience"
+    },
+    {
+        level: 5,
+        prompt: "Write a 200-word beginner's guide explaining how machine learning works, using a coffee shop analogy. Keep language simple for 10th graders.",
+        quality: "Excellent - Specific length, audience, analogy, and complexity level"
+    }
+];
+
+function updateSpecificity() {
+    const slider = document.getElementById('specificitySlider');
+    const value = parseInt(slider.value);
+    document.getElementById('specificityValue').textContent = value;
+
+    const level = specificityLevels[value - 1];
+    document.getElementById('specificityPrompt').textContent = level.prompt;
+    document.getElementById('specificityQuality').textContent = level.quality;
+}
+
+// Context examples
+const contextExamples = {
+    minimal: {
+        prompt: "Write a marketing email.",
+        quality: "⚠️ Poor - No context about product, audience, or goal"
+    },
+    moderate: {
+        prompt: "Write a marketing email for our new coffee subscription service. Target coffee enthusiasts.",
+        quality: "⚡ Good - Has product and audience, but could use more details"
+    },
+    rich: {
+        prompt: "Write a marketing email for our new coffee subscription service. We're a sustainable brand targeting environmentally-conscious coffee enthusiasts aged 25-40. The service delivers ethically-sourced beans monthly. Tone should be warm and knowledgeable. Email should introduce the service, highlight sustainability, and include a 20% off first order offer. Keep it under 200 words.",
+        quality: "✓ Excellent - Complete context with audience, brand voice, key points, and constraints"
+    }
+};
+
+function showContextExample(level) {
+    // Update button states
+    const buttons = document.querySelectorAll('#topic-4 .scenario-btn');
+    buttons.forEach(btn => btn.classList.remove('active'));
+    event.target.classList.add('active');
+
+    const example = contextExamples[level];
+    document.getElementById('contextPromptText').textContent = example.prompt;
+    document.getElementById('contextQuality').textContent = example.quality;
+}
+
+// Format examples
+const formatExamples = {
+    list: {
+        prompt: "Provide the information as a numbered list with brief explanations for each point.",
+        output: "1. First Point\n   Brief explanation here\n\n2. Second Point\n   Brief explanation here\n\n3. Third Point\n   Brief explanation here"
+    },
+    table: {
+        prompt: "Create a comparison table with columns: Feature, Pros, Cons",
+        output: "| Feature    | Pros              | Cons              |\n|------------|-------------------|-------------------|\n| Feature A  | Advantage 1       | Disadvantage 1    |\n| Feature B  | Advantage 2       | Disadvantage 2    |"
+    },
+    narrative: {
+        prompt: "Write the response as a 3-paragraph narrative with introduction, body, and conclusion.",
+        output: "Introduction paragraph setting context...\n\nBody paragraph with main information and details...\n\nConclusion paragraph summarizing key points..."
+    },
+    code: {
+        prompt: "Provide Python code with inline comments explaining each step.",
+        output: "# Calculate factorial of a number\ndef factorial(n):\n    # Base case: factorial of 0 or 1 is 1\n    if n <= 1:\n        return 1\n    # Recursive case\n    return n * factorial(n - 1)"
+    },
+    json: {
+        prompt: "Return the data as a JSON object with proper structure.",
+        output: "{\n  \"name\": \"Example\",\n  \"items\": [\n    { \"id\": 1, \"value\": \"Item 1\" },\n    { \"id\": 2, \"value\": \"Item 2\" }\n  ]\n}"
+    }
+};
+
+function showFormatExample(format) {
+    // Update button states
+    const buttons = document.querySelectorAll('#topic-5 .scenario-btn');
+    buttons.forEach(btn => btn.classList.remove('active'));
+    event.target.classList.add('active');
+
+    const example = formatExamples[format];
+    document.getElementById('formatPromptText').textContent = example.prompt;
+    document.getElementById('formatOutputExample').textContent = example.output;
+}
+
+// Iteration examples
+const iterations = [
+    {
+        iteration: 1,
+        prompt: "Help me with my website.",
+        score: "25/100 - Very Poor",
+        notes: "❌ Issues: No context, unclear task, no specifics. AI won't know what kind of help you need."
+    },
+    {
+        iteration: 2,
+        prompt: "I have an e-commerce website and need help improving the checkout process. Can you suggest improvements?",
+        score: "65/100 - Good",
+        notes: "✓ Better: Added context (e-commerce) and specific area (checkout). ⚠️ Still missing: What problems exist? What's the current user experience?"
+    },
+    {
+        iteration: 3,
+        prompt: "I run an e-commerce website selling handmade jewelry. Our checkout abandonment rate is 70%. Users complain it takes too long (5+ steps). Analyze this and suggest 3-5 specific improvements to reduce friction. Format as: Problem → Solution → Expected Impact.",
+        score: "95/100 - Excellent",
+        notes: "✓ Excellent: Clear context, specific problem with data, defined task, output format specified. AI has everything needed for quality response."
+    }
+];
+
+function showIteration(num) {
+    const iteration = iterations[num - 1];
+    document.getElementById('iterationPrompt').textContent = iteration.prompt;
+    document.getElementById('iterationScore').textContent = iteration.score;
+    document.getElementById('iterationNotes').innerHTML = `<p style="color: #ccc; margin: 0;">${iteration.notes}</p>`;
+}
+
+// Challenge scenarios
+const challenges = {
+    email: {
+        scenario: "Your manager asked you to write a follow-up email to a client who attended yesterday's product demo. The client seemed interested but had concerns about pricing and implementation timeline."
+    },
+    code: {
+        scenario: "You need to create a JavaScript function that validates email addresses and returns detailed error messages for invalid formats. It should handle edge cases like missing @ symbols, invalid domains, and special characters."
+    },
+    creative: {
+        scenario: "Create a compelling Instagram caption for a new eco-friendly water bottle launch. Your brand targets young professionals who care about sustainability. The post should encourage engagement and include a call-to-action."
+    },
+    analysis: {
+        scenario: "You have sales data from Q1-Q4 showing declining revenue in Q3. Analyze what might have caused this dip and provide actionable recommendations. Consider seasonality, marketing spend, and competition."
+    }
+};
+
+let currentChallenge = 'email';
+
+function setChallenge(type) {
+    currentChallenge = type;
+    
+    // Update button states
+    const buttons = document.querySelectorAll('.challenge-box .scenario-btn');
+    buttons.forEach(btn => btn.classList.remove('active'));
+    event.target.classList.add('active');
+
+    document.getElementById('challengeScenario').textContent = challenges[type].scenario;
+    document.getElementById('challengeInput').value = '';
+    document.getElementById('challengeFeedback').classList.remove('show');
+}
+
+function evaluateChallenge() {
+    const input = document.getElementById('challengeInput').value;
+    const feedback = document.getElementById('challengeFeedback');
+
+    if (!input.trim()) {
+        feedback.innerHTML = '<p style="color: #FF6B35;">⚠️ Please write a prompt first!</p>';
+        feedback.classList.add('show');
+        return;
+    }
+
+    // Simple evaluation based on key elements
+    const hasRole = /you are|act as|as a/i.test(input);
+    const hasContext = input.length > 100;
+    const hasFormat = /format|structure|provide|return|list|table/i.test(input);
+    const hasConstraints = /words|length|tone|style|keep/i.test(input);
+
+    let score = 0;
+    let feedbackItems = [];
+
+    if (hasRole) {
+        score += 25;
+        feedbackItems.push('✓ Good: Includes role/persona');
+    } else {
+        feedbackItems.push('⚠️ Consider: Adding a role or persona');
+    }
+
+    if (hasContext) {
+        score += 25;
+        feedbackItems.push('✓ Good: Provides context');
+    } else {
+        feedbackItems.push('⚠️ Consider: Adding more context and background');
+    }
+
+    if (hasFormat) {
+        score += 25;
+        feedbackItems.push('✓ Good: Specifies output format');
+    } else {
+        feedbackItems.push('⚠️ Consider: Specifying the desired output format');
+    }
+
+    if (hasConstraints) {
+        score += 25;
+        feedbackItems.push('✓ Good: Includes constraints');
+    } else {
+        feedbackItems.push('⚠️ Consider: Adding constraints like length, tone, or style');
+    }
+
+    let grade = '';
+    let color = '';
+    if (score >= 75) {
+        grade = 'Excellent';
+        color = '#00FF88';
+    } else if (score >= 50) {
+        grade = 'Good';
+        color = '#FFB800';
+    } else {
+        grade = 'Needs Improvement';
+        color = '#FF6B35';
+    }
+
+    feedback.innerHTML = `
+        <h4 style="color: ${color}; margin-bottom: 12px;">Score: ${score}/100 - ${grade}</h4>
+        ${feedbackItems.map(item => `<p style="margin: 8px 0; font-size: 14px;">${item}</p>`).join('')}
+        ${score >= 75 ? '<p style="margin-top: 15px; color: #00D9FF;">🎉 Great job! Your prompt includes all key components.</p>' : ''}
+    `;
+    feedback.classList.add('show');
+}
+
+function resetChallenge() {
+    document.getElementById('challengeInput').value = '';
+    document.getElementById('challengeFeedback').classList.remove('show');
+}
+
+// Practice challenge
+function startPractice(topicId) {
+    alert('Practice mode: Try building a prompt for a simple task like \"Write a product description for noise-canceling headphones\" and include all four components: Role, Context, Task, and Format!');
+}
+
+// Template copy
+function copyTemplate(element) {
+    const template = element.querySelector('pre').textContent;
+    
+    // Create temporary textarea
+    const textarea = document.createElement('textarea');
+    textarea.value = template;
+    document.body.appendChild(textarea);
+    textarea.select();
+    
+    try {
+        document.execCommand('copy');
+        // Show feedback
+        const originalHTML = element.innerHTML;
+        element.style.borderColor = '#00FF88';
+        setTimeout(() => {
+            element.style.borderColor = '#333';
+        }, 1000);
+    } catch (err) {
+        console.error('Copy failed:', err);
+    }
+    
+    document.body.removeChild(textarea);
+}
+
+// Canvas visualizations
+function initializeCanvases() {
+    // Structure Canvas - Component visualization
+    const structureCanvas = document.getElementById('structureCanvas');
+    if (structureCanvas) {
+        const ctx = structureCanvas.getContext('2d');
+        drawStructureVisualization(ctx, structureCanvas);
+    }
+
+    // Context Canvas - Information layers
+    const contextCanvas = document.getElementById('contextCanvas');
+    if (contextCanvas) {
+        const ctx = contextCanvas.getContext('2d');
+        drawContextVisualization(ctx, contextCanvas);
+    }
+
+    // Refinement Canvas - Improvement curve
+    const refinementCanvas = document.getElementById('refinementCanvas');
+    if (refinementCanvas) {
+        const ctx = refinementCanvas.getContext('2d');
+        drawRefinementVisualization(ctx, refinementCanvas);
+    }
+
+    // Techniques Canvas - Pattern comparison
+    const techniquesCanvas = document.getElementById('techniquesCanvas');
+    if (techniquesCanvas) {
+        const ctx = techniquesCanvas.getContext('2d');
+        drawTechniquesVisualization(ctx, techniquesCanvas);
+    }
+}
+
+function drawStructureVisualization(ctx, canvas) {
+    canvas.width = canvas.offsetWidth;
+    canvas.height = canvas.offsetHeight;
+
+    const components = [
+        { name: 'Role', color: '#0066FF', y: 80 },
+        { name: 'Context', color: '#00D9FF', y: 160 },
+        { name: 'Task', color: '#FFB800', y: 240 },
+        { name: 'Format', color: '#00FF88', y: 320 }
+    ];
+
+    const centerX = canvas.width / 2;
+
+    // Draw connecting lines
+    ctx.strokeStyle = '#333';
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.moveTo(centerX, 60);
+    ctx.lineTo(centerX, 340);
+    ctx.stroke();
+
+    // Draw components
+    components.forEach(comp => {
+        // Circle
+        ctx.fillStyle = comp.color;
+        ctx.beginPath();
+        ctx.arc(centerX, comp.y, 30, 0, Math.PI * 2);
+        ctx.fill();
+
+        // Text
+        ctx.fillStyle = '#FFFFFF';
+        ctx.font = 'bold 14px sans-serif';
+        ctx.textAlign = 'center';
+        ctx.fillText(comp.name, centerX, comp.y + 5);
+    });
+
+    // Title
+    ctx.fillStyle = '#00D9FF';
+    ctx.font = 'bold 18px sans-serif';
+    ctx.textAlign = 'center';
+    ctx.fillText('Prompt Structure Components', centerX, 30);
+}
+
+function drawContextVisualization(ctx, canvas) {
+    canvas.width = canvas.offsetWidth;
+    canvas.height = canvas.offsetHeight;
+
+    const layers = [
+        { name: 'Task Only', width: 100, color: '#FF6B35' },
+        { name: '+ Basic Context', width: 200, color: '#FFB800' },
+        { name: '+ Full Context', width: 350, color: '#00FF88' }
+    ];
+
+    const startY = 100;
+    const layerHeight = 60;
+    const spacing = 30;
+
+    layers.forEach((layer, index) => {
+        const y = startY + (index * (layerHeight + spacing));
+        
+        // Draw rectangle
+        ctx.fillStyle = layer.color + '44';
+        ctx.fillRect(50, y, layer.width, layerHeight);
+        
+        // Draw border
+        ctx.strokeStyle = layer.color;
+        ctx.lineWidth = 2;
+        ctx.strokeRect(50, y, layer.width, layerHeight);
+        
+        // Draw text
+        ctx.fillStyle = '#FFFFFF';
+        ctx.font = '14px sans-serif';
+        ctx.textAlign = 'left';
+        ctx.fillText(layer.name, 60, y + 35);
+    });
+
+    // Title
+    ctx.fillStyle = '#00D9FF';
+    ctx.font = 'bold 18px sans-serif';
+    ctx.textAlign = 'left';
+    ctx.fillText('Context Layers: From Minimal to Rich', 50, 50);
+}
+
+function drawRefinementVisualization(ctx, canvas) {
+    canvas.width = canvas.offsetWidth;
+    canvas.height = canvas.offsetHeight;
+
+    const points = [
+        { x: 100, y: 300, label: 'Iteration 1' },
+        { x: 300, y: 200, label: 'Iteration 2' },
+        { x: 500, y: 120, label: 'Iteration 3' },
+        { x: 700, y: 80, label: 'Final' }
+    ];
+
+    // Draw curve
+    ctx.strokeStyle = '#0066FF';
+    ctx.lineWidth = 3;
+    ctx.beginPath();
+    ctx.moveTo(points[0].x, points[0].y);
+    
+    for (let i = 1; i < points.length; i++) {
+        const xMid = (points[i - 1].x + points[i].x) / 2;
+        ctx.quadraticCurveTo(xMid, points[i - 1].y, points[i].x, points[i].y);
+    }
+    ctx.stroke();
+
+    // Draw points
+    points.forEach((point, index) => {
+        ctx.fillStyle = '#00D9FF';
+        ctx.beginPath();
+        ctx.arc(point.x, point.y, 8, 0, Math.PI * 2);
+        ctx.fill();
+
+        // Labels
+        ctx.fillStyle = '#FFFFFF';
+        ctx.font = '12px sans-serif';
+        ctx.textAlign = 'center';
+        ctx.fillText(point.label, point.x, point.y + 25);
+    });
+
+    // Y-axis label
+    ctx.save();
+    ctx.translate(30, 200);
+    ctx.rotate(-Math.PI / 2);
+    ctx.fillStyle = '#888';
+    ctx.font = '14px sans-serif';
+    ctx.textAlign = 'center';
+    ctx.fillText('Quality', 0, 0);
+    ctx.restore();
+
+    // X-axis label
+    ctx.fillStyle = '#888';
+    ctx.font = '14px sans-serif';
+    ctx.textAlign = 'center';
+    ctx.fillText('Iterations', canvas.width / 2, canvas.height - 20);
+
+    // Title
+    ctx.fillStyle = '#00D9FF';
+    ctx.font = 'bold 18px sans-serif';
+    ctx.textAlign = 'center';
+    ctx.fillText('Prompt Improvement Through Iteration', canvas.width / 2, 30);
+}
+
+function drawTechniquesVisualization(ctx, canvas) {
+    canvas.width = canvas.offsetWidth;
+    canvas.height = canvas.offsetHeight;
+
+    const techniques = [
+        { name: 'Basic', score: 40, color: '#FF6B35', x: 150 },
+        { name: 'Chain-of-Thought', score: 75, color: '#FFB800', x: 350 },
+        { name: 'Few-Shot', score: 85, color: '#00D9FF', x: 550 },
+        { name: 'Combined', score: 95, color: '#00FF88', x: 750 }
+    ];
+
+    const maxHeight = 250;
+    const barWidth = 80;
+    const baseY = 320;
+
+    techniques.forEach(tech => {
+        const barHeight = (tech.score / 100) * maxHeight;
+        
+        // Draw bar
+        ctx.fillStyle = tech.color + '88';
+        ctx.fillRect(tech.x - barWidth / 2, baseY - barHeight, barWidth, barHeight);
+        
+        // Draw border
+        ctx.strokeStyle = tech.color;
+        ctx.lineWidth = 2;
+        ctx.strokeRect(tech.x - barWidth / 2, baseY - barHeight, barWidth, barHeight);
+        
+        // Score text
+        ctx.fillStyle = '#FFFFFF';
+        ctx.font = 'bold 16px sans-serif';
+        ctx.textAlign = 'center';
+        ctx.fillText(tech.score + '%', tech.x, baseY - barHeight - 10);
+        
+        // Technique name
+        ctx.font = '12px sans-serif';
+        ctx.fillText(tech.name, tech.x, baseY + 25);
+    });
+
+    // Title
+    ctx.fillStyle = '#00D9FF';
+    ctx.font = 'bold 18px sans-serif';
+    ctx.textAlign = 'center';
+    ctx.fillText('Technique Effectiveness Comparison', canvas.width / 2, 30);
+
+    // Y-axis
+    ctx.strokeStyle = '#333';
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.moveTo(80, 70);
+    ctx.lineTo(80, baseY);
+    ctx.stroke();
+
+    // Y-axis label
+    ctx.fillStyle = '#888';
+    ctx.font = '12px sans-serif';
+    ctx.textAlign = 'right';
+    ctx.fillText('0%', 75, baseY + 5);
+    ctx.fillText('50%', 75, baseY - 125);
+    ctx.fillText('100%', 75, baseY - 250);
+}
+
+// Checklist interaction
+document.addEventListener('click', function(e) {
+    if (e.target.tagName === 'LI' && e.target.parentElement.classList.contains('checklist')) {
+        e.target.classList.toggle('checked');
+    }
+});
+
+// Initialize on load
+window.addEventListener('load', init);
+
+// Handle window resize for canvases
+window.addEventListener('resize', function() {
+    initializeCanvases();
+});

prompt-engineering-guide/index.html

@@ -0,0 +1,1661 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Prompt Engineering Masterclass</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+            background-color: #121212;
+            color: #FFFFFF;
+            line-height: 1.6;
+            overflow-x: hidden;
+        }
+
+        .app-container {
+            display: flex;
+            min-height: 100vh;
+        }
+
+        /* Sidebar */
+        .sidebar {
+            width: 280px;
+            background: #1a1a1a;
+            border-right: 1px solid #333;
+            position: fixed;
+            height: 100vh;
+            overflow-y: auto;
+            padding: 20px;
+            z-index: 100;
+        }
+
+        .sidebar-header {
+            margin-bottom: 30px;
+        }
+
+        .sidebar-header h1 {
+            font-size: 20px;
+            color: #0066FF;
+            margin-bottom: 5px;
+        }
+
+        .sidebar-header p {
+            font-size: 12px;
+            color: #888;
+        }
+
+        .progress-bar {
+            width: 100%;
+            height: 4px;
+            background: #333;
+            border-radius: 2px;
+            margin: 15px 0;
+            overflow: hidden;
+        }
+
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(90deg, #0066FF, #00D9FF);
+            width: 0%;
+            transition: width 0.5s ease;
+        }
+
+        .topic-list {
+            list-style: none;
+        }
+
+        .topic-item {
+            padding: 12px 15px;
+            margin-bottom: 8px;
+            background: #222;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            border-left: 3px solid transparent;
+        }
+
+        .topic-item:hover {
+            background: #2a2a2a;
+            border-left-color: #0066FF;
+        }
+
+        .topic-item.active {
+            background: #0066FF22;
+            border-left-color: #0066FF;
+        }
+
+        .topic-item h3 {
+            font-size: 14px;
+            margin-bottom: 3px;
+            color: #fff;
+        }
+
+        .topic-item p {
+            font-size: 11px;
+            color: #888;
+        }
+
+        /* Main Content */
+        .main-content {
+            flex: 1;
+            margin-left: 280px;
+            padding: 40px;
+            max-width: 1200px;
+        }
+
+        .content-section {
+            display: none;
+            animation: fadeIn 0.5s ease;
+        }
+
+        .content-section.active {
+            display: block;
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        .section-header {
+            margin-bottom: 30px;
+        }
+
+        .section-header h2 {
+            font-size: 36px;
+            color: #00D9FF;
+            margin-bottom: 8px;
+        }
+
+        .section-header .subtitle {
+            font-size: 18px;
+            color: #888;
+            margin-bottom: 15px;
+        }
+
+        .section-header .description {
+            font-size: 16px;
+            color: #ccc;
+            line-height: 1.8;
+        }
+
+        /* Cards */
+        .card {
+            background: #1a1a1a;
+            border: 1px solid #333;
+            border-radius: 12px;
+            padding: 25px;
+            margin-bottom: 25px;
+            transition: all 0.3s ease;
+        }
+
+        .card:hover {
+            border-color: #0066FF;
+            box-shadow: 0 4px 20px rgba(0, 102, 255, 0.1);
+        }
+
+        .card h3 {
+            font-size: 20px;
+            color: #00D9FF;
+            margin-bottom: 15px;
+        }
+
+        .card p {
+            font-size: 15px;
+            color: #ccc;
+            line-height: 1.8;
+        }
+
+        /* Callout Boxes */
+        .callout {
+            padding: 18px 20px;
+            border-radius: 8px;
+            margin: 15px 0;
+            border-left: 4px solid;
+            font-size: 14px;
+            line-height: 1.6;
+        }
+
+        .callout-insight {
+            background: rgba(0, 217, 255, 0.1);
+            border-color: #00D9FF;
+            color: #00D9FF;
+        }
+
+        .callout-mistake {
+            background: rgba(255, 107, 53, 0.1);
+            border-color: #FF6B35;
+            color: #FF6B35;
+        }
+
+        .callout-tip {
+            background: rgba(0, 255, 136, 0.1);
+            border-color: #00FF88;
+            color: #00FF88;
+        }
+
+        .callout strong {
+            margin-right: 8px;
+        }
+
+        /* Interactive Elements */
+        .interactive-demo {
+            background: #0a0a0a;
+            border: 2px solid #333;
+            border-radius: 12px;
+            padding: 30px;
+            margin: 25px 0;
+        }
+
+        .prompt-builder {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 20px;
+            margin-top: 20px;
+        }
+
+        .prompt-component {
+            background: #1a1a1a;
+            padding: 15px;
+            border-radius: 8px;
+            border: 2px dashed #444;
+        }
+
+        .prompt-component h4 {
+            color: #0066FF;
+            font-size: 14px;
+            margin-bottom: 10px;
+        }
+
+        .prompt-component textarea {
+            width: 100%;
+            background: #222;
+            border: 1px solid #444;
+            color: #fff;
+            padding: 10px;
+            border-radius: 6px;
+            font-size: 14px;
+            font-family: inherit;
+            resize: vertical;
+            min-height: 80px;
+        }
+
+        .prompt-component textarea:focus {
+            outline: none;
+            border-color: #0066FF;
+        }
+
+        .output-preview {
+            grid-column: 1 / -1;
+            background: #1a1a1a;
+            padding: 20px;
+            border-radius: 8px;
+            border: 2px solid #0066FF;
+        }
+
+        .quality-grade {
+            display: inline-block;
+            padding: 8px 16px;
+            border-radius: 20px;
+            font-weight: 600;
+            font-size: 14px;
+            margin-bottom: 15px;
+        }
+
+        .grade-poor { background: #FF6B35; color: #000; }
+        .grade-good { background: #FFB800; color: #000; }
+        .grade-excellent { background: #00FF88; color: #000; }
+
+        /* Canvas */
+        .canvas-container {
+            position: relative;
+            width: 100%;
+            height: 400px;
+            background: #0a0a0a;
+            border: 2px solid #333;
+            border-radius: 12px;
+            margin: 25px 0;
+            overflow: hidden;
+        }
+
+        canvas {
+            display: block;
+            width: 100%;
+            height: 100%;
+        }
+
+        /* Buttons */
+        .btn {
+            padding: 12px 24px;
+            border: none;
+            border-radius: 8px;
+            font-size: 14px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: inline-block;
+            text-decoration: none;
+        }
+
+        .btn-primary {
+            background: #0066FF;
+            color: #fff;
+        }
+
+        .btn-primary:hover {
+            background: #0052CC;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0, 102, 255, 0.3);
+        }
+
+        .btn-secondary {
+            background: #333;
+            color: #fff;
+        }
+
+        .btn-secondary:hover {
+            background: #444;
+        }
+
+        .btn-group {
+            display: flex;
+            gap: 10px;
+            margin: 20px 0;
+            flex-wrap: wrap;
+        }
+
+        /* Slider */
+        .slider-control {
+            margin: 25px 0;
+        }
+
+        .slider-control label {
+            display: block;
+            color: #00D9FF;
+            font-size: 14px;
+            font-weight: 600;
+            margin-bottom: 10px;
+        }
+
+        .slider {
+            width: 100%;
+            height: 6px;
+            border-radius: 3px;
+            background: #333;
+            outline: none;
+            -webkit-appearance: none;
+        }
+
+        .slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: #0066FF;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .slider::-webkit-slider-thumb:hover {
+            background: #00D9FF;
+            transform: scale(1.2);
+        }
+
+        .slider::-moz-range-thumb {
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: #0066FF;
+            cursor: pointer;
+            border: none;
+        }
+
+        .slider-value {
+            display: inline-block;
+            margin-left: 15px;
+            color: #fff;
+            font-weight: 600;
+        }
+
+        /* Comparison */
+        .comparison {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 20px;
+            margin: 25px 0;
+        }
+
+        .comparison-item {
+            background: #1a1a1a;
+            padding: 20px;
+            border-radius: 8px;
+            border: 2px solid #333;
+        }
+
+        .comparison-item.bad {
+            border-color: #FF6B35;
+        }
+
+        .comparison-item.good {
+            border-color: #00FF88;
+        }
+
+        .comparison-item h4 {
+            margin-bottom: 12px;
+            font-size: 16px;
+        }
+
+        .comparison-item.bad h4 {
+            color: #FF6B35;
+        }
+
+        .comparison-item.good h4 {
+            color: #00FF88;
+        }
+
+        /* Navigation */
+        .nav-buttons {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 40px;
+            padding-top: 30px;
+            border-top: 1px solid #333;
+        }
+
+        /* Component Grid */
+        .component-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 20px;
+            margin: 25px 0;
+        }
+
+        .component-card {
+            background: #1a1a1a;
+            padding: 20px;
+            border-radius: 8px;
+            border: 2px solid #333;
+            transition: all 0.3s ease;
+        }
+
+        .component-card:hover {
+            border-color: #0066FF;
+            transform: translateY(-4px);
+        }
+
+        .component-card h4 {
+            color: #0066FF;
+            font-size: 16px;
+            margin-bottom: 10px;
+        }
+
+        .component-card p {
+            font-size: 14px;
+            color: #ccc;
+            margin-bottom: 12px;
+        }
+
+        .component-card code {
+            display: block;
+            background: #0a0a0a;
+            padding: 10px;
+            border-radius: 4px;
+            font-size: 13px;
+            color: #00D9FF;
+            font-family: 'Courier New', monospace;
+        }
+
+        /* Steps */
+        .steps {
+            margin: 25px 0;
+        }
+
+        .step {
+            display: flex;
+            gap: 20px;
+            margin-bottom: 25px;
+            padding: 20px;
+            background: #1a1a1a;
+            border-radius: 8px;
+            border-left: 4px solid #0066FF;
+        }
+
+        .step-number {
+            flex-shrink: 0;
+            width: 40px;
+            height: 40px;
+            background: #0066FF;
+            color: #fff;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 700;
+            font-size: 18px;
+        }
+
+        .step-content h4 {
+            color: #00D9FF;
+            font-size: 16px;
+            margin-bottom: 8px;
+        }
+
+        .step-content p {
+            font-size: 14px;
+            color: #ccc;
+        }
+
+        /* Use Cases */
+        .use-case-section {
+            margin: 30px 0;
+        }
+
+        .use-case-section h4 {
+            color: #0066FF;
+            font-size: 18px;
+            margin-bottom: 15px;
+        }
+
+        .use-case-list {
+            list-style: none;
+            padding-left: 0;
+        }
+
+        .use-case-list li {
+            padding: 12px 15px;
+            background: #1a1a1a;
+            border-left: 3px solid #00D9FF;
+            margin-bottom: 10px;
+            border-radius: 4px;
+            font-size: 14px;
+        }
+
+        /* Checklist */
+        .checklist {
+            list-style: none;
+            margin: 20px 0;
+        }
+
+        .checklist li {
+            padding: 12px;
+            margin-bottom: 8px;
+            background: #1a1a1a;
+            border-radius: 6px;
+            font-size: 14px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .checklist li:hover {
+            background: #222;
+        }
+
+        .checklist li::before {
+            content: '☐';
+            font-size: 20px;
+            color: #666;
+        }
+
+        .checklist li.checked::before {
+            content: '✓';
+            color: #00FF88;
+        }
+
+        .checklist li.checked {
+            opacity: 0.6;
+            text-decoration: line-through;
+        }
+
+        /* Responsive */
+        @media (max-width: 768px) {
+            .sidebar {
+                width: 100%;
+                position: relative;
+                height: auto;
+                border-right: none;
+                border-bottom: 1px solid #333;
+            }
+
+            .main-content {
+                margin-left: 0;
+                padding: 20px;
+            }
+
+            .prompt-builder,
+            .comparison,
+            .component-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .section-header h2 {
+                font-size: 28px;
+            }
+        }
+
+        /* Template Library */
+        .template-library {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 15px;
+            margin: 25px 0;
+        }
+
+        .template-item {
+            background: #1a1a1a;
+            padding: 18px;
+            border-radius: 8px;
+            border: 2px solid #333;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .template-item:hover {
+            border-color: #0066FF;
+            background: #222;
+        }
+
+        .template-item h5 {
+            color: #00D9FF;
+            font-size: 15px;
+            margin-bottom: 10px;
+        }
+
+        .template-item pre {
+            background: #0a0a0a;
+            padding: 12px;
+            border-radius: 4px;
+            font-size: 12px;
+            color: #ccc;
+            overflow-x: auto;
+            white-space: pre-wrap;
+        }
+
+        /* Practice Challenge */
+        .challenge-box {
+            background: linear-gradient(135deg, #0066FF22, #00D9FF22);
+            border: 2px solid #0066FF;
+            border-radius: 12px;
+            padding: 30px;
+            margin: 30px 0;
+        }
+
+        .challenge-box h3 {
+            color: #00D9FF;
+            margin-bottom: 15px;
+        }
+
+        .challenge-prompt {
+            background: #0a0a0a;
+            padding: 20px;
+            border-radius: 8px;
+            margin: 15px 0;
+            font-size: 14px;
+            color: #ccc;
+        }
+
+        .feedback {
+            background: #1a1a1a;
+            padding: 15px;
+            border-radius: 8px;
+            margin-top: 15px;
+            display: none;
+        }
+
+        .feedback.show {
+            display: block;
+            animation: slideDown 0.3s ease;
+        }
+
+        @keyframes slideDown {
+            from { opacity: 0; transform: translateY(-10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        /* Scenario Selector */
+        .scenario-selector {
+            display: flex;
+            gap: 12px;
+            margin: 20px 0;
+            flex-wrap: wrap;
+        }
+
+        .scenario-btn {
+            padding: 10px 18px;
+            background: #1a1a1a;
+            border: 2px solid #333;
+            border-radius: 8px;
+            color: #fff;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-size: 14px;
+        }
+
+        .scenario-btn:hover {
+            border-color: #0066FF;
+            background: #222;
+        }
+
+        .scenario-btn.active {
+            border-color: #0066FF;
+            background: #0066FF22;
+            color: #00D9FF;
+        }
+
+        .hidden {
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <div class="app-container">
+        <!-- Sidebar -->
+        <aside class="sidebar">
+            <div class="sidebar-header">
+                <h1>Prompt Engineering</h1>
+                <p>Master the Art of AI Communication</p>
+                <div class="progress-bar">
+                    <div class="progress-fill" id="progressBar"></div>
+                </div>
+            </div>
+            <ul class="topic-list" id="topicList"></ul>
+        </aside>
+
+        <!-- Main Content -->
+        <main class="main-content">
+            <!-- Topic 1: Introduction -->
+            <section class="content-section active" id="topic-1">
+                <div class="section-header">
+                    <h2>Introduction to Prompt Engineering</h2>
+                    <p class="subtitle">What Is It and Why Does It Matter?</p>
+                    <p class="description">Learn the fundamentals of prompt engineering and why it's crucial in the AI era</p>
+                </div>
+
+                <div class="card">
+                    <h3>What is Prompt Engineering?</h3>
+                    <p>Prompt engineering is the art of writing clear, specific instructions for AI models to produce desired outputs. Think of it as learning to communicate effectively with an intelligent assistant.</p>
+                    <p>Just like how you'd give detailed instructions to a colleague for important work, prompt engineering teaches you to craft precise, contextual requests that help AI understand exactly what you need.</p>
+                </div>
+
+                <div class="callout callout-insight">
+                    <strong>💡 Insight:</strong> The difference between a vague and specific prompt can be 10x in output quality
+                </div>
+
+                <div class="card">
+                    <h3>Real-World Analogy</h3>
+                    <p><strong>Ordering Food:</strong></p>
+                    <div class="comparison">
+                        <div class="comparison-item bad">
+                            <h4>❌ Vague Order</h4>
+                            <p>"Give me something to eat."</p>
+                            <p style="margin-top: 10px; font-size: 13px; color: #888;">Result: You might get anything - could be great, could be terrible, probably not what you wanted.</p>
+                        </div>
+                        <div class="comparison-item good">
+                            <h4>✓ Detailed Order</h4>
+                            <p>"I'd like a medium pepperoni pizza with thin crust, extra cheese, and light sauce. Please deliver it to 123 Main St by 7 PM."</p>
+                            <p style="margin-top: 10px; font-size: 13px; color: #888;">Result: You get exactly what you wanted, when you wanted it.</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="callout callout-tip">
+                    <strong>✅ Tip:</strong> AI models don't read minds—be explicit about what you want
+                </div>
+
+                <div class="card">
+                    <h3>Why Does It Matter?</h3>
+                    <p>In today's AI-powered world, the ability to communicate effectively with AI systems is becoming as important as traditional communication skills. Good prompt engineering helps you:</p>
+                    <ul style="margin-left: 20px; margin-top: 10px; color: #ccc;">
+                        <li style="margin-bottom: 8px;">Save time by getting better results on the first try</li>
+                        <li style="margin-bottom: 8px;">Unlock advanced AI capabilities for complex tasks</li>
+                        <li style="margin-bottom: 8px;">Reduce errors and misunderstandings</li>
+                        <li style="margin-bottom: 8px;">Boost productivity across all domains</li>
+                    </ul>
+                </div>
+
+                <div class="card">
+                    <h3>Key Applications</h3>
+                    <div class="use-case-section">
+                        <ul class="use-case-list">
+                            <li>📧 Email writing and summarization</li>
+                            <li>📊 Report generation and data analysis</li>
+                            <li>💻 Code generation and debugging</li>
+                            <li>✍️ Creative writing and content creation</li>
+                            <li>🎓 Educational content and explanations</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="callout callout-mistake">
+                    <strong>⚠️ Common Mistake:</strong> Assuming AI knows what you want without explicit instructions
+                </div>
+
+                <div class="card">
+                    <h3>Summary &amp; Key Takeaways</h3>
+                    <ul class="checklist">
+                        <li>Prompt engineering is about clear AI communication</li>
+                        <li>Specificity dramatically improves output quality</li>
+                        <li>It's a learnable skill that improves with practice</li>
+                        <li>Applications span professional, technical, and creative domains</li>
+                    </ul>
+                    <div class="btn-group" style="margin-top: 20px;">
+                        <button class="btn btn-primary" onclick="startPractice(1)">Try Practice Challenge</button>
+                    </div>
+                </div>
+
+                <div class="nav-buttons">
+                    <button class="btn btn-secondary" disabled>← Previous</button>
+                    <button class="btn btn-primary" onclick="navigateTo(2)">Next: Prompt Structure →</button>
+                </div>
+            </section>
+
+            <!-- Topic 2: Prompt Structure -->
+            <section class="content-section" id="topic-2">
+                <div class="section-header">
+                    <h2>Prompt Structure: The Building Blocks</h2>
+                    <p class="subtitle">Role, Context, Task, and Format</p>
+                    <p class="description">Master the four key components of effective prompts</p>
+                </div>
+
+                <div class="card">
+                    <h3>The Four Components</h3>
+                    <p>Every effective prompt has four essential building blocks. Understanding and using these components will transform your AI interactions.</p>
+                </div>
+
+                <div class="component-grid">
+                    <div class="component-card">
+                        <h4>1. Role</h4>
+                        <p>What persona should the AI adopt?</p>
+                        <code>"You are an expert marketing consultant"</code>
+                    </div>
+                    <div class="component-card">
+                        <h4>2. Context</h4>
+                        <p>What background information is important?</p>
+                        <code>"We just launched a new coffee shop in Manhattan"</code>
+                    </div>
+                    <div class="component-card">
+                        <h4>3. Task</h4>
+                        <p>What exactly should the AI do?</p>
+                        <code>"Generate 5 creative marketing strategies"</code>
+                    </div>
+                    <div class="component-card">
+                        <h4>4. Format</h4>
+                        <p>How should the output be structured?</p>
+                        <code>"Provide as bullet points with pros and cons"</code>
+                    </div>
+                </div>
+
+                <div class="callout callout-insight">
+                    <strong>💡 Insight:</strong> Context is king—more information usually means better output
+                </div>
+
+                <div class="interactive-demo">
+                    <h3 style="color: #00D9FF; margin-bottom: 20px;">Interactive Prompt Builder</h3>
+                    <p style="color: #888; margin-bottom: 15px;">Fill in each component and watch the quality grade update in real-time:</p>
+                    
+                    <div class="prompt-builder">
+                        <div class="prompt-component">
+                            <h4>Role</h4>
+                            <textarea id="roleInput" placeholder="e.g., You are a senior software engineer..." oninput="updatePromptQuality()"></textarea>
+                        </div>
+                        <div class="prompt-component">
+                            <h4>Context</h4>
+                            <textarea id="contextInput" placeholder="e.g., Working on a mobile app for..." oninput="updatePromptQuality()"></textarea>
+                        </div>
+                        <div class="prompt-component">
+                            <h4>Task</h4>
+                            <textarea id="taskInput" placeholder="e.g., Write a function that..." oninput="updatePromptQuality()"></textarea>
+                        </div>
+                        <div class="prompt-component">
+                            <h4>Format</h4>
+                            <textarea id="formatInput" placeholder="e.g., Provide code with comments..." oninput="updatePromptQuality()"></textarea>
+                        </div>
+                        <div class="output-preview">
+                            <span class="quality-grade grade-poor" id="qualityGrade">Quality: Poor</span>
+                            <h4 style="color: #00D9FF; margin-bottom: 10px;">Combined Prompt:</h4>
+                            <p id="combinedPrompt" style="color: #ccc; font-size: 14px;">Start filling in the components above...</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="callout callout-tip">
+                    <strong>✅ Tip:</strong> Start with clear action verbs: Write, Analyze, Explain, Generate, Debug
+                </div>
+
+                <div class="canvas-container">
+                    <canvas id="structureCanvas"></canvas>
+                </div>
+
+                <div class="card">
+                    <h3>Summary &amp; Key Takeaways</h3>
+                    <ul class="checklist">
+                        <li>All four components work together for best results</li>
+                        <li>Role sets the AI's perspective and expertise level</li>
+                        <li>Context provides necessary background information</li>
+                        <li>Task defines the specific action you want</li>
+                        <li>Format ensures output matches your needs</li>
+                    </ul>
+                </div>
+
+                <div class="nav-buttons">
+                    <button class="btn btn-secondary" onclick="navigateTo(1)">← Previous</button>
+                    <button class="btn btn-primary" onclick="navigateTo(3)">Next: Clarity &amp; Specificity →</button>
+                </div>
+            </section>
+
+            <!-- Topic 3: Clarity and Specificity -->
+            <section class="content-section" id="topic-3">
+                <div class="section-header">
+                    <h2>Clarity and Specificity</h2>
+                    <p class="subtitle">Writing Precise Prompts</p>
+                    <p class="description">Learn how to eliminate ambiguity and get better results</p>
+                </div>
+
+                <div class="card">
+                    <h3>Why Specificity Matters</h3>
+                    <p>Vague prompts leave too much room for interpretation. The AI has to guess what you want, and guesses are rarely perfect. Specific prompts eliminate ambiguity and guide the AI to produce exactly what you need.</p>
+                </div>
+
+                <div class="callout callout-insight">
+                    <strong>💡 Insight:</strong> Testing and iteration is key to prompt mastery
+                </div>
+
+                <div class="card">
+                    <h3>Before &amp; After Examples</h3>
+                    <div class="comparison" style="margin-top: 20px;">
+                        <div class="comparison-item bad">
+                            <h4>❌ Vague Prompt</h4>
+                            <p style="font-family: monospace; font-size: 13px;">"Write something about AI"</p>
+                        </div>
+                        <div class="comparison-item good">
+                            <h4>✓ Specific Prompt</h4>
+                            <p style="font-family: monospace; font-size: 13px;">"Write a 200-word beginner's guide explaining how machine learning works, using a coffee shop analogy"</p>
+                        </div>
+                    </div>
+
+                    <div class="comparison" style="margin-top: 20px;">
+                        <div class="comparison-item bad">
+                            <h4>❌ Vague Prompt</h4>
+                            <p style="font-family: monospace; font-size: 13px;">"Fix my code"</p>
+                        </div>
+                        <div class="comparison-item good">
+                            <h4>✓ Specific Prompt</h4>
+                            <p style="font-family: monospace; font-size: 13px;">"I have a Python function that calculates factorial but it returns wrong results for numbers &gt; 10. Here's the code: [code]. What's the bug and how do I fix it?"</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="callout callout-mistake">
+                    <strong>⚠️ Common Mistake:</strong> Not specifying output format, then being surprised by format
+                </div>
+
+                <div class="interactive-demo">
+                    <h3 style="color: #00D9FF; margin-bottom: 20px;">Specificity Slider</h3>
+                    <p style="color: #888; margin-bottom: 15px;">Adjust the specificity level and see how the prompt improves:</p>
+                    
+                    <div class="slider-control">
+                        <label>Specificity Level: <span class="slider-value" id="specificityValue">1</span>/5</label>
+                        <input type="range" min="1" max="5" value="1" class="slider" id="specificitySlider" oninput="updateSpecificity()">
+                    </div>
+
+                    <div style="margin-top: 25px; background: #1a1a1a; padding: 20px; border-radius: 8px;">
+                        <h4 style="color: #00D9FF; margin-bottom: 12px;">Current Prompt:</h4>
+                        <p id="specificityPrompt" style="color: #ccc; font-size: 14px; line-height: 1.8;"></p>
+                        <div style="margin-top: 15px; padding: 12px; background: #0a0a0a; border-radius: 6px;">
+                            <strong style="color: #00D9FF;">Expected Quality:</strong>
+                            <span id="specificityQuality" style="margin-left: 10px;"></span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="callout callout-tip">
+                    <strong>✅ Tip:</strong> Use phrases like 'For a 10th-grade student' to guide tone and complexity
+                </div>
+
+                <div class="card">
+                    <h3>Key Elements of Specific Prompts</h3>
+                    <div class="steps">
+                        <div class="step">
+                            <div class="step-number">1</div>
+                            <div class="step-content">
+                                <h4>Define Clear Objectives</h4>
+                                <p>State exactly what you want to achieve</p>
+                            </div>
+                        </div>
+                        <div class="step">
+                            <div class="step-number">2</div>
+                            <div class="step-content">
+                                <h4>Set Constraints</h4>
+                                <p>Specify length, style, tone, or other limitations</p>
+                            </div>
+                        </div>
+                        <div class="step">
+                            <div class="step-number">3</div>
+                            <div class="step-content">
+                                <h4>Provide Examples</h4>
+                                <p>Show the AI what good output looks like</p>
+                            </div>
+                        </div>
+                        <div class="step">
+                            <div class="step-number">4</div>
+                            <div class="step-content">
+                                <h4>Specify Audience</h4>
+                                <p>Indicate who will consume the output</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="card">
+                    <h3>Summary &amp; Key Takeaways</h3>
+                    <ul class="checklist">
+                        <li>Vague prompts lead to unpredictable results</li>
+                        <li>Add specific details: length, format, style, audience</li>
+                        <li>Include examples when possible</li>
+                        <li>Set clear constraints and boundaries</li>
+                        <li>Think about edge cases and clarify them</li>
+                    </ul>
+                </div>
+
+                <div class="nav-buttons">
+                    <button class="btn btn-secondary" onclick="navigateTo(2)">← Previous</button>
+                    <button class="btn btn-primary" onclick="navigateTo(4)">Next: Context &amp; Background →</button>
+                </div>
+            </section>
+
+            <!-- Topic 4: Context and Background -->
+            <section class="content-section" id="topic-4">
+                <div class="section-header">
+                    <h2>Context and Background</h2>
+                    <p class="subtitle">Providing Enough Information</p>
+                    <p class="description">Give AI the full picture for better outputs</p>
+                </div>
+
+                <div class="card">
+                    <h3>Why Context Matters</h3>
+                    <p>Context is the background information that helps AI understand the bigger picture. Without proper context, even the most specific task instructions can lead to irrelevant results.</p>
+                    <p style="margin-top: 15px;">Think of context as the frame around a painting—it helps define boundaries and provides essential information for interpretation.</p>
+                </div>
+
+                <div class="callout callout-insight">
+                    <strong>💡 Insight:</strong> Format specification prevents surprises in AI responses
+                </div>
+
+                <div class="card">
+                    <h3>Essential Context Elements</h3>
+                    <div class="component-grid">
+                        <div class="component-card">
+                            <h4>📄 Relevant Documents</h4>
+                            <p>Include or reference important files, data, or prior conversations</p>
+                        </div>
+                        <div class="component-card">
+                            <h4>🎯 Target Audience</h4>
+                            <p>Specify who will use or read the output</p>
+                        </div>
+                        <div class="component-card">
+                            <h4>⚙️ Constraints</h4>
+                            <p>Mention technical, budget, or time limitations</p>
+                        </div>
+                        <div class="component-card">
+                            <h4>🎨 Brand Voice</h4>
+                            <p>Describe tone, style, or brand guidelines</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="callout callout-tip">
+                    <strong>✅ Tip:</strong> Include examples of good output in your prompt
+                </div>
+
+                <div class="card">
+                    <h3>Context Levels Comparison</h3>
+                    <div class="interactive-demo">
+                        <div class="scenario-selector">
+                            <button class="scenario-btn active" onclick="showContextExample('minimal')">Minimal Context</button>
+                            <button class="scenario-btn" onclick="showContextExample('moderate')">Moderate Context</button>
+                            <button class="scenario-btn" onclick="showContextExample('rich')">Rich Context</button>
+                        </div>
+
+                        <div id="contextExample" style="margin-top: 20px; background: #1a1a1a; padding: 20px; border-radius: 8px;">
+                            <h4 style="color: #00D9FF; margin-bottom: 12px;">Prompt Example:</h4>
+                            <p id="contextPromptText" style="color: #ccc; line-height: 1.8;"></p>
+                            <div style="margin-top: 15px; padding: 12px; background: #0a0a0a; border-radius: 6px;">
+                                <strong style="color: #00D9FF;">Output Quality:</strong>
+                                <span id="contextQuality" style="margin-left: 10px;"></span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="callout callout-mistake">
+                    <strong>⚠️ Common Mistake:</strong> Providing too little context about your problem
+                </div>
+
+                <div class="card">
+                    <h3>Best Practices for Context</h3>
+                    <ul style="margin-left: 20px; margin-top: 15px; color: #ccc;">
+                        <li style="margin-bottom: 12px;"><strong style="color: #00D9FF;">Be comprehensive but focused:</strong> Include all relevant information without overwhelming details</li>
+                        <li style="margin-bottom: 12px;"><strong style="color: #00D9FF;">Front-load important context:</strong> Put crucial information at the beginning</li>
+                        <li style="margin-bottom: 12px;"><strong style="color: #00D9FF;">Use examples:</strong> Show the AI what success looks like</li>
+                        <li style="margin-bottom: 12px;"><strong style="color: #00D9FF;">Mention constraints:</strong> Be upfront about limitations</li>
+                        <li style="margin-bottom: 12px;"><strong style="color: #00D9FF;">Define your audience:</strong> Specify who will consume the output</li>
+                    </ul>
+                </div>
+
+                <div class="canvas-container">
+                    <canvas id="contextCanvas"></canvas>
+                </div>
+
+                <div class="card">
+                    <h3>Summary &amp; Key Takeaways</h3>
+                    <ul class="checklist">
+                        <li>Context provides the frame for AI to understand your request</li>
+                        <li>Include relevant documents and background information</li>
+                        <li>Specify target audience and use cases</li>
+                        <li>Mention constraints and limitations upfront</li>
+                        <li>Provide examples of desired output when possible</li>
+                    </ul>
+                </div>
+
+                <div class="nav-buttons">
+                    <button class="btn btn-secondary" onclick="navigateTo(3)">← Previous</button>
+                    <button class="btn btn-primary" onclick="navigateTo(5)">Next: Output Format →</button>
+                </div>
+            </section>
+
+            <!-- Topic 5: Output Format -->
+            <section class="content-section" id="topic-5">
+                <div class="section-header">
+                    <h2>Output Format and Constraints</h2>
+                    <p class="subtitle">Specifying Desired Output</p>
+                    <p class="description">Control exactly how the AI structures its response</p>
+                </div>
+
+                <div class="card">
+                    <h3>Why Format Matters</h3>
+                    <p>Specifying the output format ensures you get results in a structure that's immediately useful. Without format guidance, AI might provide information in a way that requires significant reformatting.</p>
+                </div>
+
+                <div class="callout callout-tip">
+                    <strong>✅ Tip:</strong> Keep prompts focused on one main task
+                </div>
+
+                <div class="card">
+                    <h3>Common Output Formats</h3>
+                    <div class="component-grid">
+                        <div class="component-card">
+                            <h4>📝 Structured List</h4>
+                            <p>Organized points with clear hierarchy</p>
+                            <code>"Return as numbered list with brief explanations"</code>
+                        </div>
+                        <div class="component-card">
+                            <h4>📊 Table Format</h4>
+                            <p>Data organized in rows and columns</p>
+                            <code>"Create a comparison table with 3 columns: Feature, Pros, Cons"</code>
+                        </div>
+                        <div class="component-card">
+                            <h4>📖 Narrative</h4>
+                            <p>Flowing prose or storytelling format</p>
+                            <code>"Write as a 3-paragraph narrative explanation"</code>
+                        </div>
+                        <div class="component-card">
+                            <h4>💻 Code Block</h4>
+                            <p>Formatted code with explanations</p>
+                            <code>"Provide Python code with comments explaining each step"</code>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="callout callout-insight">
+                    <strong>💡 Insight:</strong> Save and reuse effective prompts as templates
+                </div>
+
+                <div class="interactive-demo">
+                    <h3 style="color: #00D9FF; margin-bottom: 20px;">Format Selector</h3>
+                    <p style="color: #888; margin-bottom: 15px;">Choose a format and see how to specify it in your prompt:</p>
+                    
+                    <div class="scenario-selector">
+                        <button class="scenario-btn active" onclick="showFormatExample('list')">List</button>
+                        <button class="scenario-btn" onclick="showFormatExample('table')">Table</button>
+                        <button class="scenario-btn" onclick="showFormatExample('narrative')">Narrative</button>
+                        <button class="scenario-btn" onclick="showFormatExample('code')">Code</button>
+                        <button class="scenario-btn" onclick="showFormatExample('json')">JSON</button>
+                    </div>
+
+                    <div id="formatExample" style="margin-top: 20px; background: #1a1a1a; padding: 20px; border-radius: 8px;">
+                        <h4 style="color: #00D9FF; margin-bottom: 12px;">Format Specification:</h4>
+                        <p id="formatPromptText" style="color: #ccc; line-height: 1.8; margin-bottom: 15px;"></p>
+                        <h4 style="color: #00D9FF; margin-bottom: 12px;">Example Output:</h4>
+                        <pre id="formatOutputExample" style="background: #0a0a0a; padding: 15px; border-radius: 6px; color: #ccc; overflow-x: auto;"></pre>
+                    </div>
+                </div>
+
+                <div class="callout callout-mistake">
+                    <strong>⚠️ Common Mistake:</strong> Asking too many things in one prompt
+                </div>
+
+                <div class="card">
+                    <h3>Setting Effective Constraints</h3>
+                    <div class="steps">
+                        <div class="step">
+                            <div class="step-number">1</div>
+                            <div class="step-content">
+                                <h4>Length Constraints</h4>
+                                <p>Specify word count, character limit, or number of items</p>
+                            </div>
+                        </div>
+                        <div class="step">
+                            <div class="step-number">2</div>
+                            <div class="step-content">
+                                <h4>Style Guidelines</h4>
+                                <p>Define tone, formality, and writing style</p>
+                            </div>
+                        </div>
+                        <div class="step">
+                            <div class="step-number">3</div>
+                            <div class="step-content">
+                                <h4>Structure Rules</h4>
+                                <p>Specify sections, headings, or organization</p>
+                            </div>
+                        </div>
+                        <div class="step">
+                            <div class="step-number">4</div>
+                            <div class="step-content">
+                                <h4>Content Boundaries</h4>
+                                <p>Define what to include or exclude</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="card">
+                    <h3>Summary &amp; Key Takeaways</h3>
+                    <ul class="checklist">
+                        <li>Always specify the desired output format</li>
+                        <li>Use clear format instructions (list, table, code, etc.)</li>
+                        <li>Set length and style constraints</li>
+                        <li>Define structure and organization upfront</li>
+                        <li>Provide format examples when needed</li>
+                    </ul>
+                </div>
+
+                <div class="nav-buttons">
+                    <button class="btn btn-secondary" onclick="navigateTo(4)">← Previous</button>
+                    <button class="btn btn-primary" onclick="navigateTo(6)">Next: Iterative Refinement →</button>
+                </div>
+            </section>
+
+            <!-- Topic 6: Iterative Refinement -->
+            <section class="content-section" id="topic-6">
+                <div class="section-header">
+                    <h2>Iterative Refinement</h2>
+                    <p class="subtitle">Testing and Improving Prompts</p>
+                    <p class="description">How to iterate and optimize your prompts through testing</p>
+                </div>
+
+                <div class="card">
+                    <h3>The Refinement Process</h3>
+                    <p>Perfect prompts are rarely written on the first try. Iterative refinement is the process of testing, evaluating, and improving your prompts based on actual results.</p>
+                    <p style="margin-top: 15px;">Think of it like cooking—you taste and adjust seasonings until it's just right.</p>
+                </div>
+
+                <div class="callout callout-insight">
+                    <strong>💡 Insight:</strong> Testing and iteration is key to prompt mastery
+                </div>
+
+                <div class="card">
+                    <h3>5-Step Refinement Process</h3>
+                    <div class="steps">
+                        <div class="step">
+                            <div class="step-number">1</div>
+                            <div class="step-content">
+                                <h4>Test Your Prompt</h4>
+                                <p>Run your prompt and get initial output</p>
+                            </div>
+                        </div>
+                        <div class="step">
+                            <div class="step-number">2</div>
+                            <div class="step-content">
+                                <h4>Evaluate Results</h4>
+                                <p>Does it meet your requirements? What's missing?</p>
+                            </div>
+                        </div>
+                        <div class="step">
+                            <div class="step-number">3</div>
+                            <div class="step-content">
+                                <h4>Refine</h4>
+                                <p>Add specificity, context, or better format instructions</p>
+                            </div>
+                        </div>
+                        <div class="step">
+                            <div class="step-number">4</div>
+                            <div class="step-content">
+                                <h4>Test Again</h4>
+                                <p>Compare new output with previous version</p>
+                            </div>
+                        </div>
+                        <div class="step">
+                            <div class="step-number">5</div>
+                            <div class="step-content">
+                                <h4>Repeat</h4>
+                                <p>Keep iterating until satisfied</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="callout callout-tip">
+                    <strong>✅ Tip:</strong> Keep a library of successful prompts for future use
+                </div>
+
+                <div class="canvas-container">
+                    <canvas id="refinementCanvas"></canvas>
+                </div>
+
+                <div class="callout callout-mistake">
+                    <strong>⚠️ Common Mistake:</strong> Not iterating or refining based on initial results
+                </div>
+
+                <div class="card">
+                    <h3>What to Look For When Evaluating</h3>
+                    <div class="component-grid">
+                        <div class="component-card">
+                            <h4>✓ Accuracy</h4>
+                            <p>Is the information correct and relevant?</p>
+                        </div>
+                        <div class="component-card">
+                            <h4>✓ Completeness</h4>
+                            <p>Did it cover everything you needed?</p>
+                        </div>
+                        <div class="component-card">
+                            <h4>✓ Format</h4>
+                            <p>Is it structured as you requested?</p>
+                        </div>
+                        <div class="component-card">
+                            <h4>✓ Tone & Style</h4>
+                            <p>Does it match your requirements?</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="interactive-demo">
+                    <h3 style="color: #00D9FF; margin-bottom: 20px;">Refinement Simulator</h3>
+                    <p style="color: #888; margin-bottom: 15px;">See how a prompt improves through iterations:</p>
+                    
+                    <div class="btn-group">
+                        <button class="btn btn-primary" onclick="showIteration(1)">Iteration 1</button>
+                        <button class="btn btn-primary" onclick="showIteration(2)">Iteration 2</button>
+                        <button class="btn btn-primary" onclick="showIteration(3)">Iteration 3 (Final)</button>
+                    </div>
+
+                    <div id="iterationDisplay" style="margin-top: 20px; background: #1a1a1a; padding: 20px; border-radius: 8px;">
+                        <h4 style="color: #00D9FF; margin-bottom: 12px;">Current Iteration:</h4>
+                        <p id="iterationPrompt" style="color: #ccc; line-height: 1.8; margin-bottom: 15px;"></p>
+                        <div style="padding: 12px; background: #0a0a0a; border-radius: 6px;">
+                            <strong style="color: #00D9FF;">Quality Score:</strong>
+                            <span id="iterationScore" style="margin-left: 10px;"></span>
+                        </div>
+                        <div id="iterationNotes" style="margin-top: 15px; padding: 12px; border-left: 3px solid #00D9FF; background: #0a0a0a;"></div>
+                    </div>
+                </div>
+
+                <div class="card">
+                    <h3>Summary &amp; Key Takeaways</h3>
+                    <ul class="checklist">
+                        <li>First attempts rarely produce perfect results</li>
+                        <li>Test, evaluate, refine, and repeat</li>
+                        <li>Look for accuracy, completeness, format, and style</li>
+                        <li>Keep successful prompts as templates</li>
+                        <li>Small tweaks can lead to big improvements</li>
+                    </ul>
+                </div>
+
+                <div class="nav-buttons">
+                    <button class="btn btn-secondary" onclick="navigateTo(5)">← Previous</button>
+                    <button class="btn btn-primary" onclick="navigateTo(7)">Next: Advanced Techniques →</button>
+                </div>
+            </section>
+
+            <!-- Topic 7: Advanced Techniques -->
+            <section class="content-section" id="topic-7">
+                <div class="section-header">
+                    <h2>Prompt Patterns and Techniques</h2>
+                    <p class="subtitle">Advanced Methods for Better Results</p>
+                    <p class="description">Learn professional techniques used by prompt engineering experts</p>
+                </div>
+
+                <div class="card">
+                    <h3>Advanced Prompt Techniques</h3>
+                    <p>Once you master the basics, these advanced techniques will help you unlock even more powerful AI capabilities.</p>
+                </div>
+
+                <div class="component-grid">
+                    <div class="component-card">
+                        <h4>🧠 Chain-of-Thought</h4>
+                        <p>Ask AI to show its reasoning step-by-step</p>
+                        <code>"Think through this step-by-step before answering"</code>
+                    </div>
+                    <div class="component-card">
+                        <h4>📚 Few-Shot Examples</h4>
+                        <p>Provide examples of desired output format</p>
+                        <code>"Here are 3 examples: [examples]. Now do this:"</code>
+                    </div>
+                    <div class="component-card">
+                        <h4>⚙️ System Prompts</h4>
+                        <p>Set AI behavior and personality upfront</p>
+                        <code>"You are a helpful tutor for 10th-grade students"</code>
+                    </div>
+                    <div class="component-card">
+                        <h4>🎯 Constraints</h4>
+                        <p>Limit scope and manage complexity</p>
+                        <code>"Keep under 100 words, use simple language"</code>
+                    </div>
+                </div>
+
+                <div class="callout callout-insight">
+                    <strong>💡 Insight:</strong> Chain-of-thought prompting can improve reasoning by 50% or more
+                </div>
+
+                <div class="card">
+                    <h3>Technique Deep Dive: Chain-of-Thought</h3>
+                    <p>Chain-of-thought prompting asks the AI to show its work, which leads to better reasoning and more accurate results.</p>
+                    
+                    <div class="comparison" style="margin-top: 20px;">
+                        <div class="comparison-item bad">
+                            <h4>❌ Without Chain-of-Thought</h4>
+                            <p style="font-family: monospace; font-size: 13px; margin-bottom: 10px;">"What's 15% of 240?"</p>
+                            <p style="font-size: 13px; color: #888;">AI might give answer without showing work, making errors harder to spot.</p>
+                        </div>
+                        <div class="comparison-item good">
+                            <h4>✓ With Chain-of-Thought</h4>
+                            <p style="font-family: monospace; font-size: 13px; margin-bottom: 10px;">"What's 15% of 240? Think through this step-by-step."</p>
+                            <p style="font-size: 13px; color: #888;">AI shows: 1) 10% of 240 = 24, 2) 5% = half of 10% = 12, 3) 15% = 24 + 12 = 36</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="callout callout-tip">
+                    <strong>✅ Tip:</strong> Use few-shot examples when the output format is complex or unusual
+                </div>
+
+                <div class="card">
+                    <h3>Template Library</h3>
+                    <p style="margin-bottom: 20px;">Ready-to-use prompt templates for common scenarios:</p>
+                    
+                    <div class="template-library">
+                        <div class="template-item" onclick="copyTemplate(this)">
+                            <h5>📧 Email Writing</h5>
+                            <pre>You are a professional email writer.
+
+Write a [formal/casual] email to [recipient] about [topic].
+
+Tone: [professional/friendly]
+Length: [brief/detailed]
+Action needed: [yes/no]</pre>
+                        </div>
+                        <div class="template-item" onclick="copyTemplate(this)">
+                            <h5>💻 Code Generation</h5>
+                            <pre>You are an expert [language] developer.
+
+Write a function that [task description].
+
+Requirements:
+- [requirement 1]
+- [requirement 2]
+
+Provide code with comments.</pre>
+                        </div>
+                        <div class="template-item" onclick="copyTemplate(this)">
+                            <h5>📊 Data Analysis</h5>
+                            <pre>Analyze this data: [data]
+
+Provide:
+1. Key insights
+2. Trends or patterns
+3. Recommendations
+
+Format as bullet points.</pre>
+                        </div>
+                        <div class="template-item" onclick="copyTemplate(this)">
+                            <h5>✍️ Content Creation</h5>
+                            <pre>Write a [blog post/article] about [topic].
+
+Audience: [description]
+Tone: [conversational/professional]
+Length: [word count]
+
+Include:
+- Introduction
+- 3-5 main points
+- Conclusion</pre>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="callout callout-mistake">
+                    <strong>⚠️ Common Mistake:</strong> Using advanced techniques when simple prompts would work better
+                </div>
+
+                <div class="canvas-container">
+                    <canvas id="techniquesCanvas"></canvas>
+                </div>
+
+                <div class="card">
+                    <h3>Summary &amp; Key Takeaways</h3>
+                    <ul class="checklist">
+                        <li>Chain-of-thought improves reasoning quality</li>
+                        <li>Few-shot examples guide output format</li>
+                        <li>System prompts set overall behavior</li>
+                        <li>Constraints keep responses focused</li>
+                        <li>Use templates to save time and ensure consistency</li>
+                    </ul>
+                </div>
+
+                <div class="nav-buttons">
+                    <button class="btn btn-secondary" onclick="navigateTo(6)">← Previous</button>
+                    <button class="btn btn-primary" onclick="navigateTo(8)">Next: Real-World Applications →</button>
+                </div>
+            </section>
+
+            <!-- Topic 8: Real-World Applications -->
+            <section class="content-section" id="topic-8">
+                <div class="section-header">
+                    <h2>Real-World Applications</h2>
+                    <p class="subtitle">Putting It All Together</p>
+                    <p class="description">See prompt engineering in action across different domains</p>
+                </div>
+
+                <div class="card">
+                    <h3>Prompt Engineering in Practice</h3>
+                    <p>Now that you've learned the fundamentals and advanced techniques, let's explore how prompt engineering is applied across different real-world domains.</p>
+                </div>
+
+                <div class="card">
+                    <h3>Professional Writing</h3>
+                    <div class="use-case-section">
+                        <ul class="use-case-list">
+                            <li>Email summarization and drafting</li>
+                            <li>Report generation</li>
+                            <li>Meeting notes synthesis</li>
+                        </ul>
+                    </div>
+                    <div class="callout callout-tip" style="margin-top: 15px;">
+                        <strong>✅ Example:</strong> "Summarize this 3-page meeting transcript into 5 key action items with owners and deadlines. Format as a table."
+                    </div>
+                </div>
+
+                <div class="card">
+                    <h3>Technical Applications</h3>
+                    <div class="use-case-section">
+                        <ul class="use-case-list">
+                            <li>Code generation and debugging</li>
+                            <li>API documentation creation</li>
+                            <li>Technical explanation simplification</li>
+                        </ul>
+                    </div>
+                    <div class="callout callout-tip" style="margin-top: 15px;">
+                        <strong>✅ Example:</strong> "I have a React component that's re-rendering unnecessarily. Here's the code: [code]. Identify the issue and provide an optimized version with explanations."
+                    </div>
+                </div>
+
+                <div class="card">
+                    <h3>Creative Work</h3>
+                    <div class="use-case-section">
+                        <ul class="use-case-list">
+                            <li>Marketing copy creation</li>
+                            <li>Brainstorming ideas</li>
+                            <li>Content outline generation</li>
+                        </ul>
+                    </div>
+                    <div class="callout callout-tip" style="margin-top: 15px;">
+                        <strong>✅ Example:</strong> "Generate 10 creative Instagram post ideas for a sustainable fashion brand targeting Gen Z. Include post caption and hashtag suggestions."
+                    </div>
+                </div>
+
+                <div class="card">
+                    <h3>Educational Content</h3>
+                    <div class="use-case-section">
+                        <ul class="use-case-list">
+                            <li>Concept explanation</li>
+                            <li>Quiz generation</li>
+                            <li>Study guide creation</li>
+                        </ul>
+                    </div>
+                    <div class="callout callout-tip" style="margin-top: 15px;">
+                        <strong>✅ Example:</strong> "Explain photosynthesis to a 7th grader using an analogy they can relate to. Keep it under 150 words."
+                    </div>
+                </div>
+
+                <div class="callout callout-insight">
+                    <strong>💡 Insight:</strong> The best prompts combine multiple techniques based on the specific use case
+                </div>
+
+                <div class="challenge-box">
+                    <h3>🎯 Final Challenge: Build Your Own Prompt</h3>
+                    <p style="color: #ccc; margin-bottom: 15px;">Choose a scenario and build a complete prompt using everything you've learned:</p>
+                    
+                    <div class="scenario-selector">
+                        <button class="scenario-btn active" onclick="setChallenge('email')">Email Writing</button>
+                        <button class="scenario-btn" onclick="setChallenge('code')">Coding Help</button>
+                        <button class="scenario-btn" onclick="setChallenge('creative')">Creative Writing</button>
+                        <button class="scenario-btn" onclick="setChallenge('analysis')">Data Analysis</button>
+                    </div>
+
+                    <div class="challenge-prompt" id="challengeScenario" style="margin-top: 15px;">
+                        Scenario will appear here...
+                    </div>
+
+                    <textarea id="challengeInput" placeholder="Build your prompt here..." style="width: 100%; min-height: 150px; background: #0a0a0a; border: 2px solid #333; color: #fff; padding: 15px; border-radius: 8px; font-size: 14px; margin-top: 15px; font-family: inherit;"></textarea>
+
+                    <div class="btn-group" style="margin-top: 15px;">
+                        <button class="btn btn-primary" onclick="evaluateChallenge()">Evaluate My Prompt</button>
+                        <button class="btn btn-secondary" onclick="resetChallenge()">Reset</button>
+                    </div>
+
+                    <div class="feedback" id="challengeFeedback"></div>
+                </div>
+
+                <div class="card">
+                    <h3>Congratulations! 🎉</h3>
+                    <p>You've completed the Prompt Engineering Masterclass! You now have the knowledge and tools to communicate effectively with AI systems.</p>
+                    
+                    <div style="margin-top: 20px; padding: 20px; background: linear-gradient(135deg, #0066FF22, #00D9FF22); border-radius: 8px;">
+                        <h4 style="color: #00D9FF; margin-bottom: 15px;">What You've Learned:</h4>
+                        <ul class="checklist">
+                            <li>The four components of effective prompts</li>
+                            <li>How to write clear and specific instructions</li>
+                            <li>The importance of context and background</li>
+                            <li>How to specify output formats</li>
+                            <li>Iterative refinement techniques</li>
+                            <li>Advanced prompt patterns</li>
+                            <li>Real-world applications across domains</li>
+                        </ul>
+                    </div>
+
+                    <div class="btn-group" style="margin-top: 20px;">
+                        <button class="btn btn-primary" onclick="navigateTo(1)">↻ Review from Beginning</button>
+                        <button class="btn btn-secondary" onclick="alert('Export feature coming soon!')">📄 Export Summary</button>
+                    </div>
+                </div>
+
+                <div class="nav-buttons">
+                    <button class="btn btn-secondary" onclick="navigateTo(7)">← Previous</button>
+                    <button class="btn btn-primary" onclick="navigateTo(1)">↻ Start Over</button>
+                </div>
+            </section>
+        </main>
+    </div>
+
+    <script src="app.js"></script>
+</body>
+</html>