diff --git "a/math-ds-complete/index.html" "b/math-ds-complete/index.html"
--- "a/math-ds-complete/index.html"
+++ "b/math-ds-complete/index.html"
@@ -1,16 +1,54 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Mathematics Mastery Platform - Statistics, Linear Algebra &amp; Calculus</title>
+    <meta name="description"
+        content="Comprehensive Mathematics Mastery Platform covering Statistics, Linear Algebra, Calculus, Data Science, and Machine Learning with interactive visualizations and step-by-step explanations.">
+    <meta name="keywords"
+        content="statistics, linear algebra, calculus, data science, machine learning, mathematics, learning platform, interactive math">
+    <meta name="author" content="Mathematics Mastery">
+    <title>Mathematics Mastery Platform - Statistics, Linear Algebra & Calculus</title>
+
+    <!-- MathJax for beautiful formula rendering -->
+    <script>
+        MathJax = {
+            tex: {
+                inlineMath: [['$', '$'], ['\\(', '\\)']],
+                displayMath: [['$$', '$$'], ['\\[', '\\]']],
+                processEscapes: true
+            },
+            options: {
+                skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
+            }
+        };
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" async></script>
+
+    <!-- Google Fonts for premium typography -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
+        rel="stylesheet">
+
     <link rel="stylesheet" href="style.css">
 </head>
+
 <body>
     <!-- Top Navigation -->
     <nav class="top-nav">
         <div class="nav-container">
             <h1 class="course-title">📊 Mathematics Mastery Platform</h1>
+
+            <!-- Search Bar -->
+            <div class="search-container">
+                <input type="text" id="globalSearch" class="search-input" placeholder="🔍 Search topics..."
+                    autocomplete="off">
+                <div id="searchResults" class="search-results"></div>
+            </div>
+
             <div class="subject-tabs">
                 <button class="subject-tab active" data-subject="statistics">📊 Statistics</button>
                 <button class="subject-tab" data-subject="linear-algebra">📐 Linear Algebra</button>
@@ -18,6 +56,7 @@
                 <button class="subject-tab" data-subject="data-science">🤖 Data Science</button>
                 <button class="subject-tab" data-subject="machine-learning">🚀 Machine Learning</button>
             </div>
+
             <button class="mobile-menu-btn" id="mobileMenuBtn">
                 <span></span>
                 <span></span>
@@ -32,7 +71,7 @@
         <aside class="sidebar" id="sidebar">
             <div class="sidebar-content">
                 <h3 id="sidebarTitle">Statistics Content</h3>
-                
+
                 <div class="module">
                     <h4 class="module-title">Module 1: Introduction</h4>
                     <ul class="topic-list">
@@ -94,7 +133,8 @@
                         <li><a href="#topic-26" class="topic-link" data-topic="26">🎯 Significance Level α</a></li>
                         <li><a href="#topic-27" class="topic-link" data-topic="27">📊 Standard Error</a></li>
                         <li><a href="#topic-28" class="topic-link" data-topic="28">📏 Z-Test</a></li>
-                        <li><a href="#topic-29" class="topic-link" data-topic="29">🎚️ Z-Score &amp; Critical Values</a></li>
+                        <li><a href="#topic-29" class="topic-link" data-topic="29">🎚️ Z-Score &amp; Critical Values</a>
+                        </li>
                         <li><a href="#topic-30" class="topic-link" data-topic="30">💯 P-Value</a></li>
                         <li><a href="#topic-31" class="topic-link" data-topic="31">↔️ One vs Two Tailed</a></li>
                         <li><a href="#topic-32" class="topic-link" data-topic="32">📐 T-Test</a></li>
@@ -126,8 +166,10 @@
                 <div class="module" data-subject="linear-algebra" style="display: none;">
                     <h4 class="module-title">Module 9: Introduction to Linear Algebra</h4>
                     <ul class="topic-list">
-                        <li><a href="#topic-42" class="topic-link" data-topic="42">➡️ Vectors - What Even Are They?</a></li>
-                        <li><a href="#topic-43" class="topic-link" data-topic="43">🎯 Linear Combinations, Span, Basis</a></li>
+                        <li><a href="#topic-42" class="topic-link" data-topic="42">➡️ Vectors - What Even Are They?</a>
+                        </li>
+                        <li><a href="#topic-43" class="topic-link" data-topic="43">🎯 Linear Combinations, Span,
+                                Basis</a></li>
                     </ul>
                 </div>
 
@@ -162,7 +204,8 @@
                 <div class="module" data-subject="linear-algebra" style="display: none;">
                     <h4 class="module-title">Module 13: Eigenvalues &amp; Eigenvectors</h4>
                     <ul class="topic-list">
-                        <li><a href="#topic-54" class="topic-link" data-topic="54">🎯 Eigenvectors &amp; Eigenvalues</a></li>
+                        <li><a href="#topic-54" class="topic-link" data-topic="54">🎯 Eigenvectors &amp; Eigenvalues</a>
+                        </li>
                         <li><a href="#topic-55" class="topic-link" data-topic="55">⚡ Eigenvalue Quick Trick</a></li>
                         <li><a href="#topic-56" class="topic-link" data-topic="56">∞ Abstract Vector Spaces</a></li>
                         <li><a href="#topic-57" class="topic-link" data-topic="57">📐 Cramer's Rule</a></li>
@@ -193,7 +236,8 @@
                     <ul class="topic-list">
                         <li><a href="#topic-64" class="topic-link" data-topic="64">∫ Integrals</a></li>
                         <li><a href="#topic-65" class="topic-link" data-topic="65">⚖️ Fundamental Theorem</a></li>
-                        <li><a href="#topic-66" class="topic-link" data-topic="66">📊 Area &amp; Slope Connection</a></li>
+                        <li><a href="#topic-66" class="topic-link" data-topic="66">📊 Area &amp; Slope Connection</a>
+                        </li>
                         <li><a href="#topic-67" class="topic-link" data-topic="67">📈 Higher Order Derivatives</a></li>
                         <li><a href="#topic-68" class="topic-link" data-topic="68">∞ Taylor Series</a></li>
                         <li><a href="#topic-69" class="topic-link" data-topic="69">∞ Limits (ε-δ Definition)</a></li>
@@ -209,7 +253,8 @@
                         <li><a href="#topic-72" class="topic-link" data-topic="72">72. Logistic Regression</a></li>
                         <li><a href="#topic-73" class="topic-link" data-topic="73">73. ANOVA</a></li>
                         <li><a href="#topic-74" class="topic-link" data-topic="74">74. Polynomial Regression</a></li>
-                        <li><a href="#topic-75" class="topic-link" data-topic="75">75. R² &amp; Model Evaluation</a></li>
+                        <li><a href="#topic-75" class="topic-link" data-topic="75">75. R² &amp; Model Evaluation</a>
+                        </li>
                     </ul>
                 </div>
 
@@ -239,36 +284,52 @@
                 <div class="module" data-subject="machine-learning" style="display: none;">
                     <h4 class="module-title">Supervised Learning - Regression</h4>
                     <ul class="topic-list">
-                        <li><a href="#ml-topic-1" class="topic-link" data-topic="ml-topic-1">ML-1. Linear Regression</a></li>
-                        <li><a href="#ml-topic-2" class="topic-link" data-topic="ml-topic-2">ML-2. Polynomial Regression</a></li>
-                        <li><a href="#ml-topic-3" class="topic-link" data-topic="ml-topic-3">ML-3. Ridge Regression (L2)</a></li>
-                        <li><a href="#ml-topic-4" class="topic-link" data-topic="ml-topic-4">ML-4. Lasso Regression (L1)</a></li>
+                        <li><a href="#ml-topic-1" class="topic-link" data-topic="ml-topic-1">ML-1. Linear Regression</a>
+                        </li>
+                        <li><a href="#ml-topic-2" class="topic-link" data-topic="ml-topic-2">ML-2. Polynomial
+                                Regression</a></li>
+                        <li><a href="#ml-topic-3" class="topic-link" data-topic="ml-topic-3">ML-3. Ridge Regression
+                                (L2)</a></li>
+                        <li><a href="#ml-topic-4" class="topic-link" data-topic="ml-topic-4">ML-4. Lasso Regression
+                                (L1)</a></li>
                         <li><a href="#ml-topic-5" class="topic-link" data-topic="ml-topic-5">ML-5. Elastic Net</a></li>
-                        <li><a href="#ml-topic-6" class="topic-link" data-topic="ml-topic-6">ML-6. Support Vector Regression</a></li>
+                        <li><a href="#ml-topic-6" class="topic-link" data-topic="ml-topic-6">ML-6. Support Vector
+                                Regression</a></li>
                     </ul>
                 </div>
 
                 <div class="module" data-subject="machine-learning" style="display: none;">
                     <h4 class="module-title">Supervised Learning - Classification</h4>
                     <ul class="topic-list">
-                        <li><a href="#ml-topic-7" class="topic-link" data-topic="ml-topic-7">ML-7. Logistic Regression</a></li>
-                        <li><a href="#ml-topic-8" class="topic-link" data-topic="ml-topic-8">ML-8. K-Nearest Neighbors</a></li>
-                        <li><a href="#ml-topic-9" class="topic-link" data-topic="ml-topic-9">ML-9. Support Vector Machines</a></li>
-                        <li><a href="#ml-topic-10" class="topic-link" data-topic="ml-topic-10">ML-10. Decision Trees</a></li>
-                        <li><a href="#ml-topic-11" class="topic-link" data-topic="ml-topic-11">ML-11. Naive Bayes</a></li>
-                        <li><a href="#ml-topic-12" class="topic-link" data-topic="ml-topic-12">ML-12. Random Forest</a></li>
-                        <li><a href="#ml-topic-13" class="topic-link" data-topic="ml-topic-13">ML-13. Gradient Boosting</a></li>
-                        <li><a href="#ml-topic-14" class="topic-link" data-topic="ml-topic-14">ML-14. Neural Networks</a></li>
+                        <li><a href="#ml-topic-7" class="topic-link" data-topic="ml-topic-7">ML-7. Logistic
+                                Regression</a></li>
+                        <li><a href="#ml-topic-8" class="topic-link" data-topic="ml-topic-8">ML-8. K-Nearest
+                                Neighbors</a></li>
+                        <li><a href="#ml-topic-9" class="topic-link" data-topic="ml-topic-9">ML-9. Support Vector
+                                Machines</a></li>
+                        <li><a href="#ml-topic-10" class="topic-link" data-topic="ml-topic-10">ML-10. Decision Trees</a>
+                        </li>
+                        <li><a href="#ml-topic-11" class="topic-link" data-topic="ml-topic-11">ML-11. Naive Bayes</a>
+                        </li>
+                        <li><a href="#ml-topic-12" class="topic-link" data-topic="ml-topic-12">ML-12. Random Forest</a>
+                        </li>
+                        <li><a href="#ml-topic-13" class="topic-link" data-topic="ml-topic-13">ML-13. Gradient
+                                Boosting</a></li>
+                        <li><a href="#ml-topic-14" class="topic-link" data-topic="ml-topic-14">ML-14. Neural
+                                Networks</a></li>
                     </ul>
                 </div>
 
                 <div class="module" data-subject="machine-learning" style="display: none;">
                     <h4 class="module-title">Unsupervised - Clustering</h4>
                     <ul class="topic-list">
-                        <li><a href="#ml-topic-15" class="topic-link" data-topic="ml-topic-15">ML-15. K-Means Clustering</a></li>
-                        <li><a href="#ml-topic-16" class="topic-link" data-topic="ml-topic-16">ML-16. Hierarchical Clustering</a></li>
+                        <li><a href="#ml-topic-15" class="topic-link" data-topic="ml-topic-15">ML-15. K-Means
+                                Clustering</a></li>
+                        <li><a href="#ml-topic-16" class="topic-link" data-topic="ml-topic-16">ML-16. Hierarchical
+                                Clustering</a></li>
                         <li><a href="#ml-topic-17" class="topic-link" data-topic="ml-topic-17">ML-17. DBSCAN</a></li>
-                        <li><a href="#ml-topic-18" class="topic-link" data-topic="ml-topic-18">ML-18. Gaussian Mixture Models</a></li>
+                        <li><a href="#ml-topic-18" class="topic-link" data-topic="ml-topic-18">ML-18. Gaussian Mixture
+                                Models</a></li>
                     </ul>
                 </div>
 
@@ -277,44 +338,64 @@
                     <ul class="topic-list">
                         <li><a href="#ml-topic-19" class="topic-link" data-topic="ml-topic-19">ML-19. PCA</a></li>
                         <li><a href="#ml-topic-20" class="topic-link" data-topic="ml-topic-20">ML-20. t-SNE</a></li>
-                        <li><a href="#ml-topic-21" class="topic-link" data-topic="ml-topic-21">ML-21. Autoencoders</a></li>
+                        <li><a href="#ml-topic-21" class="topic-link" data-topic="ml-topic-21">ML-21. Autoencoders</a>
+                        </li>
                     </ul>
                 </div>
 
                 <div class="module" data-subject="machine-learning" style="display: none;">
                     <h4 class="module-title">Reinforcement Learning</h4>
                     <ul class="topic-list">
-                        <li><a href="#ml-topic-22" class="topic-link" data-topic="ml-topic-22">ML-22. Q-Learning</a></li>
-                        <li><a href="#ml-topic-23" class="topic-link" data-topic="ml-topic-23">ML-23. Deep Q-Networks</a></li>
-                        <li><a href="#ml-topic-24" class="topic-link" data-topic="ml-topic-24">ML-24. Policy Gradient</a></li>
+                        <li><a href="#ml-topic-22" class="topic-link" data-topic="ml-topic-22">ML-22. Q-Learning</a>
+                        </li>
+                        <li><a href="#ml-topic-23" class="topic-link" data-topic="ml-topic-23">ML-23. Deep
+                                Q-Networks</a></li>
+                        <li><a href="#ml-topic-24" class="topic-link" data-topic="ml-topic-24">ML-24. Policy
+                                Gradient</a></li>
                     </ul>
                 </div>
 
                 <div class="module" data-subject="machine-learning" style="display: none;">
                     <h4 class="module-title">Model Evaluation &amp; Optimization</h4>
                     <ul class="topic-list">
-                        <li><a href="#ml-topic-25" class="topic-link" data-topic="ml-topic-25">ML-25. Cross-Validation</a></li>
-                        <li><a href="#ml-topic-26" class="topic-link" data-topic="ml-topic-26">ML-26. GridSearch &amp; RandomSearch</a></li>
-                        <li><a href="#ml-topic-27" class="topic-link" data-topic="ml-topic-27">ML-27. Hyperparameter Tuning</a></li>
-                        <li><a href="#ml-topic-28" class="topic-link" data-topic="ml-topic-28">ML-28. Model Evaluation Metrics</a></li>
-                        <li><a href="#ml-topic-29" class="topic-link" data-topic="ml-topic-29">ML-29. Regularization</a></li>
-                        <li><a href="#ml-topic-30" class="topic-link" data-topic="ml-topic-30">ML-30. Bias-Variance Tradeoff</a></li>
+                        <li><a href="#ml-topic-25" class="topic-link" data-topic="ml-topic-25">ML-25.
+                                Cross-Validation</a></li>
+                        <li><a href="#ml-topic-26" class="topic-link" data-topic="ml-topic-26">ML-26. GridSearch &amp;
+                                RandomSearch</a></li>
+                        <li><a href="#ml-topic-27" class="topic-link" data-topic="ml-topic-27">ML-27. Hyperparameter
+                                Tuning</a></li>
+                        <li><a href="#ml-topic-28" class="topic-link" data-topic="ml-topic-28">ML-28. Model Evaluation
+                                Metrics</a></li>
+                        <li><a href="#ml-topic-29" class="topic-link" data-topic="ml-topic-29">ML-29. Regularization</a>
+                        </li>
+                        <li><a href="#ml-topic-30" class="topic-link" data-topic="ml-topic-30">ML-30. Bias-Variance
+                                Tradeoff</a></li>
                     </ul>
                 </div>
 
                 <div class="module" data-subject="machine-learning" style="display: none;">
                     <h4 class="module-title">Advanced Topics</h4>
                     <ul class="topic-list">
-                        <li><a href="#ml-topic-31" class="topic-link" data-topic="ml-topic-31">ML-31. Ensemble Methods</a></li>
-                        <li><a href="#ml-topic-32" class="topic-link" data-topic="ml-topic-32">ML-32. Feature Engineering</a></li>
-                        <li><a href="#ml-topic-33" class="topic-link" data-topic="ml-topic-33">ML-33. Imbalanced Data</a></li>
-                        <li><a href="#ml-topic-34" class="topic-link" data-topic="ml-topic-34">ML-34. Time Series Analysis</a></li>
-                        <li><a href="#ml-topic-35" class="topic-link" data-topic="ml-topic-35">ML-35. Anomaly Detection</a></li>
-                        <li><a href="#ml-topic-36" class="topic-link" data-topic="ml-topic-36">ML-36. Transfer Learning</a></li>
-                        <li><a href="#ml-topic-37" class="topic-link" data-topic="ml-topic-37">ML-37. Fine-tuning Models</a></li>
-                        <li><a href="#ml-topic-38" class="topic-link" data-topic="ml-topic-38">ML-38. Model Interpretability</a></li>
-                        <li><a href="#ml-topic-39" class="topic-link" data-topic="ml-topic-39">ML-39. Optimization Algorithms</a></li>
-                        <li><a href="#ml-topic-40" class="topic-link" data-topic="ml-topic-40">ML-40. Batch Norm &amp; Dropout</a></li>
+                        <li><a href="#ml-topic-31" class="topic-link" data-topic="ml-topic-31">ML-31. Ensemble
+                                Methods</a></li>
+                        <li><a href="#ml-topic-32" class="topic-link" data-topic="ml-topic-32">ML-32. Feature
+                                Engineering</a></li>
+                        <li><a href="#ml-topic-33" class="topic-link" data-topic="ml-topic-33">ML-33. Imbalanced
+                                Data</a></li>
+                        <li><a href="#ml-topic-34" class="topic-link" data-topic="ml-topic-34">ML-34. Time Series
+                                Analysis</a></li>
+                        <li><a href="#ml-topic-35" class="topic-link" data-topic="ml-topic-35">ML-35. Anomaly
+                                Detection</a></li>
+                        <li><a href="#ml-topic-36" class="topic-link" data-topic="ml-topic-36">ML-36. Transfer
+                                Learning</a></li>
+                        <li><a href="#ml-topic-37" class="topic-link" data-topic="ml-topic-37">ML-37. Fine-tuning
+                                Models</a></li>
+                        <li><a href="#ml-topic-38" class="topic-link" data-topic="ml-topic-38">ML-38. Model
+                                Interpretability</a></li>
+                        <li><a href="#ml-topic-39" class="topic-link" data-topic="ml-topic-39">ML-39. Optimization
+                                Algorithms</a></li>
+                        <li><a href="#ml-topic-40" class="topic-link" data-topic="ml-topic-40">ML-40. Batch Norm &amp;
+                                Dropout</a></li>
                     </ul>
                 </div>
             </div>
@@ -327,19 +408,27 @@
                 <div class="topic-header">
                     <span class="topic-number">Topic 1</span>
                     <h2>📊 What is Statistics &amp; Why It Matters</h2>
-                    <p class="topic-subtitle">The science of collecting, organizing, analyzing, and interpreting data</p>
+                    <p class="topic-subtitle">The science of collecting, organizing, analyzing, and interpreting data
+                    </p>
                 </div>
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Statistics is a branch of mathematics that deals with data. It provides methods to make sense of numbers and help us make informed decisions based on evidence rather than guesswork.</p>
-                    <p><strong>Why it matters:</strong> From business forecasting to medical research, sports analysis to government policy, statistics powers nearly every decision in our modern world.</p>
-                    <p><strong>When to use it:</strong> Whenever you need to understand patterns, test theories, make predictions, or draw conclusions from data.</p>
+                    <p><strong>What is it?</strong> Statistics is a branch of mathematics that deals with data. It
+                        provides methods to make sense of numbers and help us make informed decisions based on evidence
+                        rather than guesswork.</p>
+                    <p><strong>Why it matters:</strong> From business forecasting to medical research, sports analysis
+                        to government policy, statistics powers nearly every decision in our modern world.</p>
+                    <p><strong>When to use it:</strong> Whenever you need to understand patterns, test theories, make
+                        predictions, or draw conclusions from data.</p>
                 </div>
 
                 <div class="callout-box insight">
                     <div class="callout-header">💡 REAL-WORLD EXAMPLE</div>
-                    <p>Imagine Netflix deciding what shows to produce. They analyze viewing statistics: what genres people watch, when they pause, what they finish. Statistics transforms millions of data points into actionable insights like "Create more thriller series" or "Release episodes on Fridays."</p>
+                    <p>Imagine Netflix deciding what shows to produce. They analyze viewing statistics: what genres
+                        people watch, when they pause, what they finish. Statistics transforms millions of data points
+                        into actionable insights like "Create more thriller series" or "Release episodes on Fridays."
+                    </p>
                 </div>
 
                 <div class="content-card">
@@ -367,7 +456,8 @@
                 <div class="content-card">
                     <h3>Use Cases &amp; Applications</h3>
                     <ul class="use-case-list">
-                        <li><strong>Healthcare:</strong> Clinical trials testing new drugs, disease outbreak tracking</li>
+                        <li><strong>Healthcare:</strong> Clinical trials testing new drugs, disease outbreak tracking
+                        </li>
                         <li><strong>Business:</strong> Customer behavior analysis, sales forecasting, A/B testing</li>
                         <li><strong>Government:</strong> Census data, economic indicators, policy impact assessment</li>
                         <li><strong>Sports:</strong> Player performance metrics, game strategy optimization</li>
@@ -395,14 +485,20 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> A <em>population</em> includes ALL members of a defined group. A <em>sample</em> is a subset selected from that population.</p>
-                    <p><strong>Why it matters:</strong> It's usually impossible or impractical to study entire populations. Sampling allows us to make inferences about large groups by studying smaller representative groups.</p>
-                    <p><strong>When to use it:</strong> Use populations when you can access all data; use samples when populations are too large, expensive, or time-consuming to study.</p>
+                    <p><strong>What is it?</strong> A <em>population</em> includes ALL members of a defined group. A
+                        <em>sample</em> is a subset selected from that population.
+                    </p>
+                    <p><strong>Why it matters:</strong> It's usually impossible or impractical to study entire
+                        populations. Sampling allows us to make inferences about large groups by studying smaller
+                        representative groups.</p>
+                    <p><strong>When to use it:</strong> Use populations when you can access all data; use samples when
+                        populations are too large, expensive, or time-consuming to study.</p>
                 </div>
 
                 <div class="callout-box insight">
                     <div class="callout-header">💡 REAL-WORLD ANALOGY</div>
-                    <p>Think of tasting soup. You don't need to eat the entire pot (population) to know if it needs salt. A single spoonful (sample) gives you a good idea—as long as you stirred it well first!</p>
+                    <p>Think of tasting soup. You don't need to eat the entire pot (population) to know if it needs
+                        salt. A single spoonful (sample) gives you a good idea—as long as you stirred it well first!</p>
                 </div>
 
                 <div class="interactive-container">
@@ -460,12 +556,15 @@
 
                 <div class="callout-box warning">
                     <div class="callout-header">⚠️ COMMON MISTAKE</div>
-                    <p><strong>Biased Sampling:</strong> If your sample doesn't represent the population, your conclusions will be wrong. Example: Surveying only morning shoppers at a store will miss evening customer patterns.</p>
+                    <p><strong>Biased Sampling:</strong> If your sample doesn't represent the population, your
+                        conclusions will be wrong. Example: Surveying only morning shoppers at a store will miss evening
+                        customer patterns.</p>
                 </div>
 
                 <div class="callout-box tip">
                     <div class="callout-header">✅ PRO TIP</div>
-                    <p>For a sample to be representative, use <strong>random sampling</strong>. Every member of the population should have an equal chance of being selected.</p>
+                    <p>For a sample to be representative, use <strong>random sampling</strong>. Every member of the
+                        population should have an equal chance of being selected.</p>
                 </div>
 
                 <div class="summary-card">
@@ -489,14 +588,20 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> A <em>parameter</em> is a numerical characteristic of a <em>population</em>. A <em>statistic</em> is a numerical characteristic of a <em>sample</em>.</p>
-                    <p><strong>Why it matters:</strong> We usually can't measure parameters directly (populations are too large), so we estimate them using statistics from samples.</p>
-                    <p><strong>When to use it:</strong> Parameters are what we want to know; statistics are what we can calculate.</p>
+                    <p><strong>What is it?</strong> A <em>parameter</em> is a numerical characteristic of a
+                        <em>population</em>. A <em>statistic</em> is a numerical characteristic of a <em>sample</em>.
+                    </p>
+                    <p><strong>Why it matters:</strong> We usually can't measure parameters directly (populations are
+                        too large), so we estimate them using statistics from samples.</p>
+                    <p><strong>When to use it:</strong> Parameters are what we want to know; statistics are what we can
+                        calculate.</p>
                 </div>
 
                 <div class="callout-box insight">
                     <div class="callout-header">💡 REAL-WORLD EXAMPLE</div>
-                    <p>You want to know the average height of all students in your country (parameter). You can't measure everyone, so you measure 1,000 students (sample) and calculate their average height (statistic) to estimate the population parameter.</p>
+                    <p>You want to know the average height of all students in your country (parameter). You can't
+                        measure everyone, so you measure 1,000 students (sample) and calculate their average height
+                        (statistic) to estimate the population parameter.</p>
                 </div>
 
                 <div class="content-card">
@@ -544,9 +649,11 @@
                     <div class="formula-card">
                         <div class="formula-header">Key Concept</div>
                         <p style="text-align: center; font-size: 1.2em; margin: 20px 0;">
-                            <span style="color: #ff6b6b;">Statistic</span> → Estimates → <span style="color: #64ffda;">Parameter</span>
+                            <span style="color: #ff6b6b;">Statistic</span> → Estimates → <span
+                                style="color: #64ffda;">Parameter</span>
                         </p>
-                        <p>We use <strong>statistics</strong> (calculated from samples) to <strong>estimate parameters</strong> (unknown population values).</p>
+                        <p>We use <strong>statistics</strong> (calculated from samples) to <strong>estimate
+                                parameters</strong> (unknown population values).</p>
                     </div>
                 </div>
 
@@ -566,7 +673,8 @@
 
                 <div class="callout-box warning">
                     <div class="callout-header">⚠️ COMMON MISTAKE</div>
-                    <p>Confusing symbols! Greek letters (μ, σ, ρ) refer to <strong>parameters</strong> (population). Roman letters (x̄, s, r) refer to <strong>statistics</strong> (sample).</p>
+                    <p>Confusing symbols! Greek letters (μ, σ, ρ) refer to <strong>parameters</strong> (population).
+                        Roman letters (x̄, s, r) refer to <strong>statistics</strong> (sample).</p>
                 </div>
 
                 <div class="summary-card">
@@ -590,9 +698,12 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Data comes in different types, and understanding these types determines which statistical methods you can use.</p>
-                    <p><strong>Why it matters:</strong> Using the wrong analysis method for your data type leads to incorrect conclusions. You can't calculate an average of colors!</p>
-                    <p><strong>When to use it:</strong> Before any analysis, identify your data type to choose appropriate statistical techniques.</p>
+                    <p><strong>What is it?</strong> Data comes in different types, and understanding these types
+                        determines which statistical methods you can use.</p>
+                    <p><strong>Why it matters:</strong> Using the wrong analysis method for your data type leads to
+                        incorrect conclusions. You can't calculate an average of colors!</p>
+                    <p><strong>When to use it:</strong> Before any analysis, identify your data type to choose
+                        appropriate statistical techniques.</p>
                 </div>
 
                 <div class="content-card">
@@ -617,7 +728,7 @@
                 <div class="content-card">
                     <h3>Categorical Data</h3>
                     <p>Represents categories or groups (qualitative)</p>
-                    
+
                     <div class="two-column">
                         <div class="column">
                             <h4 style="color: #64ffda;">Nominal</h4>
@@ -645,7 +756,7 @@
                 <div class="content-card">
                     <h3>Numerical Data</h3>
                     <p>Represents quantities (quantitative)</p>
-                    
+
                     <div class="two-column">
                         <div class="column">
                             <h4 style="color: #64ffda;">Discrete</h4>
@@ -721,7 +832,9 @@
 
                 <div class="callout-box warning">
                     <div class="callout-header">⚠️ COMMON MISTAKE</div>
-                    <p>Just because something is written as a number doesn't make it numerical! Phone numbers, jersey numbers, and zip codes are <strong>categorical</strong> because they identify categories, not quantities.</p>
+                    <p>Just because something is written as a number doesn't make it numerical! Phone numbers, jersey
+                        numbers, and zip codes are <strong>categorical</strong> because they identify categories, not
+                        quantities.</p>
                 </div>
 
                 <div class="summary-card">
@@ -745,23 +858,28 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Measures of central tendency are single values that represent the "center" or "typical" value in a dataset.</p>
-                    <p><strong>Why it matters:</strong> Instead of looking at hundreds of numbers, one central value summarizes the data. "Average salary" tells you more than listing every employee's salary.</p>
-                    <p><strong>When to use it:</strong> When you need to summarize data with a single representative value.</p>
+                    <p><strong>What is it?</strong> Measures of central tendency are single values that represent the
+                        "center" or "typical" value in a dataset.</p>
+                    <p><strong>Why it matters:</strong> Instead of looking at hundreds of numbers, one central value
+                        summarizes the data. "Average salary" tells you more than listing every employee's salary.</p>
+                    <p><strong>When to use it:</strong> When you need to summarize data with a single representative
+                        value.</p>
                 </div>
 
                 <div class="callout-box insight">
                     <div class="callout-header">💡 REAL-WORLD ANALOGY</div>
-                    <p>Imagine finding the "center" of a group of people standing on a field. Mean is like finding the balance point where they'd balance on a seesaw. Median is literally the middle person. Mode is where the most people are clustered together.</p>
+                    <p>Imagine finding the "center" of a group of people standing on a field. Mean is like finding the
+                        balance point where they'd balance on a seesaw. Median is literally the middle person. Mode is
+                        where the most people are clustered together.</p>
                 </div>
 
                 <div class="content-card">
                     <h3>Mathematical Foundations</h3>
-                    
+
                     <div class="formula-card">
                         <div class="formula-header">Mean (Average)</div>
                         <div class="formula-main">
-                            <span class="formula-symbol">μ</span> = 
+                            <span class="formula-symbol">μ</span> =
                             <span class="formula-fraction">
                                 <span class="formula-numerator">Σx</span>
                                 <span class="formula-line"></span>
@@ -770,7 +888,8 @@
                         </div>
                         <p><strong>Where:</strong></p>
                         <ul>
-                            <li><span class="formula-var">μ</span> (mu) = population mean or <span class="formula-var">x̄</span> (x-bar) = sample mean</li>
+                            <li><span class="formula-var">μ</span> (mu) = population mean or <span
+                                    class="formula-var">x̄</span> (x-bar) = sample mean</li>
                             <li><span class="formula-var">Σx</span> = sum of all values</li>
                             <li><span class="formula-var">n</span> = number of values</li>
                         </ul>
@@ -822,14 +941,18 @@
                     <div class="controls">
                         <div class="input-group">
                             <label>Enter values (comma-separated):</label>
-                            <input type="text" id="centralTendencyInput" value="10, 20, 30, 40, 50" class="form-control">
+                            <input type="text" id="centralTendencyInput" value="10, 20, 30, 40, 50"
+                                class="form-control">
                             <button class="btn btn-primary" id="calculateCentralBtn">Calculate</button>
                             <button class="btn btn-secondary" id="randomDataBtn">Random Data</button>
                         </div>
                         <div class="results" id="centralTendencyResults">
-                            <div class="result-item"><span class="result-label">Mean:</span> <span id="meanResult">30</span></div>
-                            <div class="result-item"><span class="result-label">Median:</span> <span id="medianResult">30</span></div>
-                            <div class="result-item"><span class="result-label">Mode:</span> <span id="modeResult">None</span></div>
+                            <div class="result-item"><span class="result-label">Mean:</span> <span
+                                    id="meanResult">30</span></div>
+                            <div class="result-item"><span class="result-label">Median:</span> <span
+                                    id="medianResult">30</span></div>
+                            <div class="result-item"><span class="result-label">Mode:</span> <span
+                                    id="modeResult">None</span></div>
                         </div>
                     </div>
                 </div>
@@ -841,11 +964,11 @@
                         <p><strong>Mean:</strong></p>
                         <p>Sum = 65 + 70 + 75 + 80 + 85 + 90 + 95 = 560</p>
                         <p>Mean = 560 / 7 = <strong>80</strong></p>
-                        
+
                         <p><strong>Median:</strong></p>
                         <p>Already sorted. Middle position = (7 + 1) / 2 = 4th value</p>
                         <p>Median = <strong>80</strong></p>
-                        
+
                         <p><strong>Mode:</strong></p>
                         <p>All values appear once. <strong>No mode</strong></p>
                     </div>
@@ -886,26 +1009,29 @@
 
                 <div class="callout-box warning">
                     <div class="callout-header">⚠️ COMMON MISTAKE</div>
-                    <p><strong>Mean is affected by outliers!</strong> In salary data like $30K, $35K, $40K, $45K, $500K, the mean is $130K (misleading!). The median of $40K better represents typical salary.</p>
+                    <p><strong>Mean is affected by outliers!</strong> In salary data like $30K, $35K, $40K, $45K, $500K,
+                        the mean is $130K (misleading!). The median of $40K better represents typical salary.</p>
                 </div>
 
                 <div class="callout-box tip">
                     <div class="callout-header">✅ PRO TIP</div>
-                    <p>For skewed data (like income, house prices), <strong>always report the median</strong> along with the mean. If they're very different, your data has outliers or is skewed!</p>
+                    <p>For skewed data (like income, house prices), <strong>always report the median</strong> along with
+                        the mean. If they're very different, your data has outliers or is skewed!</p>
                 </div>
 
                 <!-- WORKED EXAMPLE SECTION -->
                 <div class="content-block worked-example-section">
                     <h3>📝 Worked Example - Step by Step</h3>
-                    
+
                     <div class="example-problem">
                         <h4>Problem:</h4>
-                        <p class="problem-statement">Find the mean, median, and mode of: [12, 15, 12, 18, 20, 15, 12, 22]</p>
+                        <p class="problem-statement">Find the mean, median, and mode of: [12, 15, 12, 18, 20, 15, 12,
+                            22]</p>
                     </div>
-                    
+
                     <div class="example-solution">
                         <h4>Solution:</h4>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 1:</div>
                             <div class="step-content">
@@ -915,10 +1041,11 @@
                                     <code>Count (n) = 8 values</code><br>
                                     <code>Mean = Sum ÷ n = 126 ÷ 8 = 15.75</code>
                                 </div>
-                                <p class="step-explanation">Add all values together, then divide by how many values there are</p>
+                                <p class="step-explanation">Add all values together, then divide by how many values
+                                    there are</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 2:</div>
                             <div class="step-content">
@@ -932,7 +1059,7 @@
                                 <p class="step-explanation">For even-sized datasets, average the two middle values</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 3:</div>
                             <div class="step-content">
@@ -947,18 +1074,19 @@
                                 <p class="step-explanation">The mode is the value that appears most often</p>
                             </div>
                         </div>
-                        
+
                         <div class="final-answer">
                             <strong>Final Answer:</strong>
                             <span class="answer-highlight">Mean = 15.75, Median = 15, Mode = 12</span>
                         </div>
-                        
+
                         <div class="verification">
                             <strong>✓ Check:</strong>
-                            <p>Mean (15.75) is slightly higher than median (15) because the outlier 22 pulls it up. The mode (12) is the lowest because it's the most common value at the lower end.</p>
+                            <p>Mean (15.75) is slightly higher than median (15) because the outlier 22 pulls it up. The
+                                mode (12) is the lowest because it's the most common value at the lower end.</p>
                         </div>
                     </div>
-                    
+
                     <div class="practice-problems">
                         <h4>💪 Try These:</h4>
                         <ol>
@@ -966,7 +1094,9 @@
                             <li>What's the median of: [3, 1, 4, 1, 5]?</li>
                             <li>Find the mode of: [2, 2, 3, 4, 4, 4, 5]</li>
                         </ol>
-                        <button class="show-answers-btn" onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show Answers</button>
+                        <button class="show-answers-btn"
+                            onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
+                            Answers</button>
                         <div class="practice-answers" style="display: none;">
                             <p><strong>Answers:</strong></p>
                             <ol>
@@ -999,14 +1129,19 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Outliers are data points that are significantly different from other observations in a dataset.</p>
-                    <p><strong>Why it matters:</strong> Outliers can indicate data errors, special cases, or important patterns. They can also severely distort statistical analyses.</p>
-                    <p><strong>When to use it:</strong> Always check for outliers before analyzing data, especially when calculating means and standard deviations.</p>
+                    <p><strong>What is it?</strong> Outliers are data points that are significantly different from other
+                        observations in a dataset.</p>
+                    <p><strong>Why it matters:</strong> Outliers can indicate data errors, special cases, or important
+                        patterns. They can also severely distort statistical analyses.</p>
+                    <p><strong>When to use it:</strong> Always check for outliers before analyzing data, especially when
+                        calculating means and standard deviations.</p>
                 </div>
 
                 <div class="callout-box insight">
                     <div class="callout-header">💡 REAL-WORLD EXAMPLE</div>
-                    <p>In a salary dataset for entry-level employees: $35K, $38K, $40K, $37K, $250K. The $250K is an outlier—maybe it's a data entry error (someone added an extra zero) or a special case (CEO's child). Either way, it needs investigation!</p>
+                    <p>In a salary dataset for entry-level employees: $35K, $38K, $40K, $37K, $250K. The $250K is an
+                        outlier—maybe it's a data entry error (someone added an extra zero) or a special case (CEO's
+                        child). Either way, it needs investigation!</p>
                 </div>
 
                 <div class="content-card">
@@ -1037,7 +1172,8 @@
 
                 <div class="callout-box warning">
                     <div class="callout-header">⚠️ COMMON MISTAKE</div>
-                    <p>Never automatically delete outliers! They might be: (1) Valid extreme values, (2) Data entry errors, (3) Important discoveries. Always investigate before removing.</p>
+                    <p>Never automatically delete outliers! They might be: (1) Valid extreme values, (2) Data entry
+                        errors, (3) Important discoveries. Always investigate before removing.</p>
                 </div>
 
                 <div class="summary-card">
@@ -1061,9 +1197,12 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Variance measures the average squared deviation from the mean. Standard deviation is the square root of variance.</p>
-                    <p><strong>Why it matters:</strong> Shows how spread out data is. Low values mean data is clustered; high values mean data is scattered.</p>
-                    <p><strong>When to use it:</strong> Whenever you need to understand data variability—in finance (risk), manufacturing (quality control), or research (reliability).</p>
+                    <p><strong>What is it?</strong> Variance measures the average squared deviation from the mean.
+                        Standard deviation is the square root of variance.</p>
+                    <p><strong>Why it matters:</strong> Shows how spread out data is. Low values mean data is clustered;
+                        high values mean data is scattered.</p>
+                    <p><strong>When to use it:</strong> Whenever you need to understand data variability—in finance
+                        (risk), manufacturing (quality control), or research (reliability).</p>
                 </div>
 
                 <div class="content-card">
@@ -1101,15 +1240,16 @@
                 <!-- WORKED EXAMPLE SECTION -->
                 <div class="content-block worked-example-section">
                     <h3>📝 Worked Example - Step by Step</h3>
-                    
+
                     <div class="example-problem">
                         <h4>Problem:</h4>
-                        <p class="problem-statement">Calculate the variance and standard deviation for the dataset: [4, 8, 6, 5, 3]</p>
+                        <p class="problem-statement">Calculate the variance and standard deviation for the dataset: [4,
+                            8, 6, 5, 3]</p>
                     </div>
-                    
+
                     <div class="example-solution">
                         <h4>Solution:</h4>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 1:</div>
                             <div class="step-content">
@@ -1121,7 +1261,7 @@
                                 <p class="step-explanation">First, we need the mean to calculate deviations</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 2:</div>
                             <div class="step-content">
@@ -1136,7 +1276,7 @@
                                 <p class="step-explanation">Subtract the mean from each value</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 3:</div>
                             <div class="step-content">
@@ -1148,10 +1288,11 @@
                                     <code>(-0.2)² = 0.04</code><br>
                                     <code>(-2.2)² = 4.84</code>
                                 </div>
-                                <p class="step-explanation">Squaring eliminates negative signs and emphasizes larger deviations</p>
+                                <p class="step-explanation">Squaring eliminates negative signs and emphasizes larger
+                                    deviations</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 4:</div>
                             <div class="step-content">
@@ -1164,7 +1305,7 @@
                                 <p class="step-explanation">We use (n-1) for sample variance (Bessel's correction)</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 5:</div>
                             <div class="step-content">
@@ -1175,25 +1316,28 @@
                                 <p class="step-explanation">Standard deviation is the square root of variance</p>
                             </div>
                         </div>
-                        
+
                         <div class="final-answer">
                             <strong>Final Answer:</strong>
                             <span class="answer-highlight">Variance = 3.7, Standard Deviation = 1.92</span>
                         </div>
-                        
+
                         <div class="verification">
                             <strong>✓ Interpretation:</strong>
-                            <p>A standard deviation of 1.92 means most values fall within about 1.92 units of the mean (5.2). This indicates moderate spread in the data.</p>
+                            <p>A standard deviation of 1.92 means most values fall within about 1.92 units of the mean
+                                (5.2). This indicates moderate spread in the data.</p>
                         </div>
                     </div>
-                    
+
                     <div class="practice-problems">
                         <h4>💪 Try These:</h4>
                         <ol>
                             <li>Calculate the standard deviation of: [2, 4, 6, 8]</li>
                             <li>Find the variance of: [10, 12, 14, 16, 18]</li>
                         </ol>
-                        <button class="show-answers-btn" onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show Answers</button>
+                        <button class="show-answers-btn"
+                            onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
+                            Answers</button>
                         <div class="practice-answers" style="display: none;">
                             <p><strong>Answers:</strong></p>
                             <ol>
@@ -1225,8 +1369,10 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Quartiles divide sorted data into 4 equal parts. Percentiles divide data into 100 equal parts.</p>
-                    <p><strong>Why it matters:</strong> Shows relative position in a dataset. "90th percentile" means you scored better than 90% of people.</p>
+                    <p><strong>What is it?</strong> Quartiles divide sorted data into 4 equal parts. Percentiles divide
+                        data into 100 equal parts.</p>
+                    <p><strong>Why it matters:</strong> Shows relative position in a dataset. "90th percentile" means
+                        you scored better than 90% of people.</p>
                 </div>
 
                 <div class="content-card">
@@ -1242,7 +1388,8 @@
 
                 <div class="callout-box insight">
                     <div class="callout-header">💡 REAL-WORLD EXAMPLE</div>
-                    <p>SAT scores: If you score 1350 and that's the 90th percentile, it means you scored higher than 90% of test-takers. Percentiles are perfect for standardized tests!</p>
+                    <p>SAT scores: If you score 1350 and that's the 90th percentile, it means you scored higher than 90%
+                        of test-takers. Percentiles are perfect for standardized tests!</p>
                 </div>
 
                 <div class="summary-card">
@@ -1266,8 +1413,10 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> IQR = Q3 - Q1. It represents the range of the middle 50% of your data.</p>
-                    <p><strong>Why it matters:</strong> IQR is resistant to outliers and is the foundation of the 1.5×IQR rule for outlier detection.</p>
+                    <p><strong>What is it?</strong> IQR = Q3 - Q1. It represents the range of the middle 50% of your
+                        data.</p>
+                    <p><strong>Why it matters:</strong> IQR is resistant to outliers and is the foundation of the
+                        1.5×IQR rule for outlier detection.</p>
                 </div>
 
                 <div class="content-card">
@@ -1304,7 +1453,8 @@
                 <div class="content-card">
                     <h3>Introduction</h3>
                     <p><strong>What is it?</strong> Skewness measures the asymmetry of a distribution.</p>
-                    <p><strong>Why it matters:</strong> Indicates whether data leans left or right, affecting which statistical methods to use.</p>
+                    <p><strong>Why it matters:</strong> Indicates whether data leans left or right, affecting which
+                        statistical methods to use.</p>
                 </div>
 
                 <div class="content-card">
@@ -1334,15 +1484,15 @@
                 <!-- WORKED EXAMPLE SECTION -->
                 <div class="content-block worked-example-section">
                     <h3>📝 Worked Example - Step by Step</h3>
-                    
+
                     <div class="example-problem">
                         <h4>Problem:</h4>
                         <p class="problem-statement">Calculate and interpret skewness for dataset: [2, 3, 4, 5, 15]</p>
                     </div>
-                    
+
                     <div class="example-solution">
                         <h4>Solution:</h4>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 1:</div>
                             <div class="step-content">
@@ -1355,7 +1505,7 @@
                                 <p class="step-explanation">First, find the average of all values</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 2:</div>
                             <div class="step-content">
@@ -1370,7 +1520,7 @@
                                 <p class="step-explanation">We need standard deviation for the skewness formula</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 3:</div>
                             <div class="step-content">
@@ -1381,10 +1531,11 @@
                                     <code>Sum = 695.53</code><br>
                                     <code>Skewness = (695.53/5) / (5.26)³ = 139.11 / 145.77 = 0.95</code>
                                 </div>
-                                <p class="step-explanation">Skewness formula uses cubed deviations divided by cubed standard deviation</p>
+                                <p class="step-explanation">Skewness formula uses cubed deviations divided by cubed
+                                    standard deviation</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 4:</div>
                             <div class="step-content">
@@ -1398,18 +1549,19 @@
                                 <p class="step-explanation">Positive skewness means tail extends to the right</p>
                             </div>
                         </div>
-                        
+
                         <div class="final-answer">
                             <strong>✓ Final Answer:</strong>
                             <span class="answer-highlight">Skewness = +0.95 (positively skewed, right tail)</span>
                         </div>
-                        
+
                         <div class="verification">
                             <strong>Check:</strong>
-                            <p>The positive skewness confirms that the outlier (15) creates a long right tail, pulling the mean (5.8) above the median (4).</p>
+                            <p>The positive skewness confirms that the outlier (15) creates a long right tail, pulling
+                                the mean (5.8) above the median (4).</p>
                         </div>
                     </div>
-                    
+
                     <div class="practice-problems">
                         <h4>💪 Try These:</h4>
                         <ol>
@@ -1417,7 +1569,9 @@
                             <li>Data with left tail - positive or negative skew?</li>
                             <li>If mean &lt; median, what type of skew?</li>
                         </ol>
-                        <button class="show-answers-btn" onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show Answers</button>
+                        <button class="show-answers-btn"
+                            onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
+                            Answers</button>
                         <div class="practice-answers" style="display: none;">
                             <p><strong>Answers:</strong></p>
                             <ol>
@@ -1451,7 +1605,8 @@
                 <div class="content-card">
                     <h3>Introduction</h3>
                     <p><strong>What is it?</strong> Covariance measures how two variables change together.</p>
-                    <p><strong>Why it matters:</strong> Shows if variables have a positive, negative, or no relationship.</p>
+                    <p><strong>Why it matters:</strong> Shows if variables have a positive, negative, or no
+                        relationship.</p>
                 </div>
 
                 <div class="content-card">
@@ -1475,15 +1630,15 @@
                 <!-- WORKED EXAMPLE SECTION -->
                 <div class="content-block worked-example-section">
                     <h3>📝 Worked Example - Step by Step</h3>
-                    
+
                     <div class="example-problem">
                         <h4>Problem:</h4>
                         <p class="problem-statement">Find covariance between X=[2, 4, 6, 8] and Y=[1, 3, 5, 7]</p>
                     </div>
-                    
+
                     <div class="example-solution">
                         <h4>Solution:</h4>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 1:</div>
                             <div class="step-content">
@@ -1495,7 +1650,7 @@
                                 <p class="step-explanation">Find the average of each variable</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 2:</div>
                             <div class="step-content">
@@ -1550,7 +1705,7 @@
                                 <p class="step-explanation">Calculate deviations from means and their products</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 3:</div>
                             <div class="step-content">
@@ -1564,7 +1719,7 @@
                                 <p class="step-explanation">Use n-1 for sample covariance (Bessel's correction)</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 4:</div>
                             <div class="step-content">
@@ -1579,18 +1734,19 @@
                                 <p class="step-explanation">Positive covariance shows positive relationship</p>
                             </div>
                         </div>
-                        
+
                         <div class="final-answer">
                             <strong>Final Answer:</strong>
                             <span class="answer-highlight">Cov(X,Y) = 6.67 (positive relationship)</span>
                         </div>
-                        
+
                         <div class="verification">
                             <strong>✓ Verification:</strong>
-                            <p>The positive covariance confirms that X and Y have a positive linear relationship. As X increases by 2, Y also increases by 2, showing consistent movement together.</p>
+                            <p>The positive covariance confirms that X and Y have a positive linear relationship. As X
+                                increases by 2, Y also increases by 2, showing consistent movement together.</p>
                         </div>
                     </div>
-                    
+
                     <div class="practice-problems">
                         <h4>💪 Try These:</h4>
                         <ol>
@@ -1598,7 +1754,9 @@
                             <li>If Cov(X,Y) = -5, what does this tell you about the relationship?</li>
                             <li>Find Cov(X,Y) for X=[5, 5, 5] and Y=[1, 2, 3]. What do you notice?</li>
                         </ol>
-                        <button class="show-answers-btn" onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show Answers</button>
+                        <button class="show-answers-btn"
+                            onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
+                            Answers</button>
                         <div class="practice-answers" style="display: none;">
                             <p><strong>Answers:</strong></p>
                             <ol>
@@ -1631,8 +1789,10 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Correlation coefficient (r) is a standardized measure of linear relationship between two variables.</p>
-                    <p><strong>Why it matters:</strong> Always between -1 and +1, making it easy to interpret strength and direction of relationships.</p>
+                    <p><strong>What is it?</strong> Correlation coefficient (r) is a standardized measure of linear
+                        relationship between two variables.</p>
+                    <p><strong>Why it matters:</strong> Always between -1 and +1, making it easy to interpret strength
+                        and direction of relationships.</p>
                 </div>
 
                 <div class="content-card">
@@ -1661,21 +1821,23 @@
 
                 <div class="callout-box insight">
                     <div class="callout-header">💡 REAL-WORLD EXAMPLE</div>
-                    <p>Study hours vs exam scores typically show r = 0.7 (strong positive). More study hours correlate with higher scores.</p>
+                    <p>Study hours vs exam scores typically show r = 0.7 (strong positive). More study hours correlate
+                        with higher scores.</p>
                 </div>
 
                 <!-- WORKED EXAMPLE SECTION -->
                 <div class="content-block worked-example-section">
                     <h3>📝 Worked Example - Step by Step</h3>
-                    
+
                     <div class="example-problem">
                         <h4>Problem:</h4>
-                        <p class="problem-statement">Calculate correlation coefficient for X=[2, 4, 6, 8] and Y=[1, 3, 5, 7]</p>
+                        <p class="problem-statement">Calculate correlation coefficient for X=[2, 4, 6, 8] and Y=[1, 3,
+                            5, 7]</p>
                     </div>
-                    
+
                     <div class="example-solution">
                         <h4>Solution:</h4>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 1:</div>
                             <div class="step-content">
@@ -1688,7 +1850,7 @@
                                 <p class="step-explanation">We already calculated this in Topic 11</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 2:</div>
                             <div class="step-content">
@@ -1703,7 +1865,7 @@
                                 <p class="step-explanation">Standard deviation measures spread of X values</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 3:</div>
                             <div class="step-content">
@@ -1718,7 +1880,7 @@
                                 <p class="step-explanation">Standard deviation measures spread of Y values</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 4:</div>
                             <div class="step-content">
@@ -1729,10 +1891,11 @@
                                     <code>r = 6.67 / 6.66</code><br>
                                     <code>r ≈ 1.00</code>
                                 </div>
-                                <p class="step-explanation">Correlation standardizes covariance by dividing by both standard deviations</p>
+                                <p class="step-explanation">Correlation standardizes covariance by dividing by both
+                                    standard deviations</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 5:</div>
                             <div class="step-content">
@@ -1748,18 +1911,20 @@
                                 <p class="step-explanation">r = 1 indicates perfect positive linear correlation</p>
                             </div>
                         </div>
-                        
+
                         <div class="final-answer">
                             <strong>Final Answer:</strong>
                             <span class="answer-highlight">r = 1.00 (perfect positive linear correlation)</span>
                         </div>
-                        
+
                         <div class="verification">
                             <strong>✓ Verification:</strong>
-                            <p>Check: If we plot these points, they form a perfect line. When X=2, Y=1; X=4, Y=3; X=6, Y=5; X=8, Y=7. The relationship is Y = (X/2) - 1 + (X/2) = 0.5X, which is indeed perfectly linear! ✓</p>
+                            <p>Check: If we plot these points, they form a perfect line. When X=2, Y=1; X=4, Y=3; X=6,
+                                Y=5; X=8, Y=7. The relationship is Y = (X/2) - 1 + (X/2) = 0.5X, which is indeed
+                                perfectly linear! ✓</p>
                         </div>
                     </div>
-                    
+
                     <div class="practice-problems">
                         <h4>💪 Try These:</h4>
                         <ol>
@@ -1767,7 +1932,9 @@
                             <li>What does r = -0.8 indicate about the relationship?</li>
                             <li>Can correlation be greater than 1? Why or why not?</li>
                         </ol>
-                        <button class="show-answers-btn" onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show Answers</button>
+                        <button class="show-answers-btn"
+                            onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
+                            Answers</button>
                         <div class="practice-answers" style="display: none;">
                             <p><strong>Answers:</strong></p>
                             <ol>
@@ -1819,21 +1986,23 @@
                 <div class="callout-box example">
                     <div class="callout-header">📊 FAMOUS EXAMPLE</div>
                     <p><strong>Ice cream sales correlate with drowning deaths.</strong></p>
-                    <p>Does ice cream cause drowning? NO! The third variable is summer weather—more people swim in summer (more drownings) and eat ice cream in summer.</p>
+                    <p>Does ice cream cause drowning? NO! The third variable is summer weather—more people swim in
+                        summer (more drownings) and eat ice cream in summer.</p>
                 </div>
 
                 <!-- WORKED EXAMPLE SECTION -->
                 <div class="content-block worked-example-section">
                     <h3>📝 Worked Example - Step by Step</h3>
-                    
+
                     <div class="example-problem">
                         <h4>Problem:</h4>
-                        <p class="problem-statement">Study finds r = -0.75 between hours of TV watched and exam scores. Interpret this result and discuss causation.</p>
+                        <p class="problem-statement">Study finds r = -0.75 between hours of TV watched and exam scores.
+                            Interpret this result and discuss causation.</p>
                     </div>
-                    
+
                     <div class="example-solution">
                         <h4>Solution:</h4>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 1:</div>
                             <div class="step-content">
@@ -1843,10 +2012,11 @@
                                     <code>As one variable increases, the other decreases</code><br>
                                     <code>More TV → Lower scores (or vice versa)</code>
                                 </div>
-                                <p class="step-explanation">The negative sign tells us the direction of the relationship</p>
+                                <p class="step-explanation">The negative sign tells us the direction of the relationship
+                                </p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 2:</div>
                             <div class="step-content">
@@ -1862,7 +2032,7 @@
                                 <p class="step-explanation">The absolute value determines relationship strength</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 3:</div>
                             <div class="step-content">
@@ -1875,7 +2045,7 @@
                                 <p class="step-explanation">Combine sign and strength for complete interpretation</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 4:</div>
                             <div class="step-content">
@@ -1888,10 +2058,11 @@
                                     <code>  c) Third variable: stress causes both TV watching and poor performance</code><br>
                                     <code>Cannot determine causation from correlation alone</code>
                                 </div>
-                                <p class="step-explanation">Correlation never proves causation - always consider alternatives</p>
+                                <p class="step-explanation">Correlation never proves causation - always consider
+                                    alternatives</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 5:</div>
                             <div class="step-content">
@@ -1901,21 +2072,24 @@
                                     <code>But prediction ≠ causation</code><br>
                                     <code>r² = 0.75² = 0.56 = 56% of variance explained</code>
                                 </div>
-                                <p class="step-explanation">r² shows percentage of variance in one variable explained by the other</p>
+                                <p class="step-explanation">r² shows percentage of variance in one variable explained by
+                                    the other</p>
                             </div>
                         </div>
-                        
+
                         <div class="final-answer">
                             <strong>✓ Final Answer:</strong>
-                            <span class="answer-highlight">Strong negative correlation (r = -0.75), but does NOT prove TV causes lower scores</span>
+                            <span class="answer-highlight">Strong negative correlation (r = -0.75), but does NOT prove
+                                TV causes lower scores</span>
                         </div>
-                        
+
                         <div class="verification">
                             <strong>Check:</strong>
-                            <p>While the correlation is strong, we must resist concluding causation. The relationship could be coincidental, reverse-causal, or due to confounding variables.</p>
+                            <p>While the correlation is strong, we must resist concluding causation. The relationship
+                                could be coincidental, reverse-causal, or due to confounding variables.</p>
                         </div>
                     </div>
-                    
+
                     <div class="practice-problems">
                         <h4>💪 Try These:</h4>
                         <ol>
@@ -1923,7 +2097,9 @@
                             <li>Can r = 1.5? Why or why not?</li>
                             <li>If r = 0, does that mean no relationship at all?</li>
                         </ol>
-                        <button class="show-answers-btn" onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show Answers</button>
+                        <button class="show-answers-btn"
+                            onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
+                            Answers</button>
                         <div class="practice-answers" style="display: none;">
                             <p><strong>Answers:</strong></p>
                             <ol>
@@ -1956,15 +2132,18 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Probability measures the likelihood of an event occurring, ranging from 0 (impossible) to 1 (certain).</p>
-                    <p><strong>Why it matters:</strong> Foundation for all statistical inference, hypothesis testing, and prediction.</p>
+                    <p><strong>What is it?</strong> Probability measures the likelihood of an event occurring, ranging
+                        from 0 (impossible) to 1 (certain).</p>
+                    <p><strong>Why it matters:</strong> Foundation for all statistical inference, hypothesis testing,
+                        and prediction.</p>
                 </div>
 
                 <div class="content-card">
                     <h3>Basic Formula</h3>
                     <div class="formula-card">
                         <div class="formula-header">Probability of Event E</div>
-                        <div class="formula-main">P(E) = Number of favorable outcomes / Total number of possible outcomes</div>
+                        <div class="formula-main">P(E) = Number of favorable outcomes / Total number of possible
+                            outcomes</div>
                     </div>
                 </div>
 
@@ -2007,7 +2186,8 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Set theory provides a mathematical framework for organizing events and calculating probabilities.</p>
+                    <p><strong>What is it?</strong> Set theory provides a mathematical framework for organizing events
+                        and calculating probabilities.</p>
                 </div>
 
                 <div class="content-card">
@@ -2023,15 +2203,16 @@
                 <!-- WORKED EXAMPLE SECTION -->
                 <div class="content-block worked-example-section">
                     <h3>📝 Worked Example - Step by Step</h3>
-                    
+
                     <div class="example-problem">
                         <h4>Problem:</h4>
-                        <p class="problem-statement">In a class of 40 students: 25 like Math, 20 like Science, 10 like both. Find: a) P(Math OR Science), b) P(only Math), c) P(neither)</p>
+                        <p class="problem-statement">In a class of 40 students: 25 like Math, 20 like Science, 10 like
+                            both. Find: a) P(Math OR Science), b) P(only Math), c) P(neither)</p>
                     </div>
-                    
+
                     <div class="example-solution">
                         <h4>Solution:</h4>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 1:</div>
                             <div class="step-content">
@@ -2045,7 +2226,7 @@
                                 <p class="step-explanation">Convert all counts to probabilities</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 2:</div>
                             <div class="step-content">
@@ -2059,7 +2240,7 @@
                                 <p class="step-explanation">We subtract the intersection to avoid double-counting</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 3:</div>
                             <div class="step-content">
@@ -2072,7 +2253,7 @@
                                 <p class="step-explanation">Subtract those who like both from total Math students</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 4:</div>
                             <div class="step-content">
@@ -2087,18 +2268,20 @@
                                 <p class="step-explanation">Use complement rule or count directly</p>
                             </div>
                         </div>
-                        
+
                         <div class="final-answer">
                             <strong>✓ Final Answer:</strong>
-                            <span class="answer-highlight">a) P(Math OR Science) = 0.875 (87.5%)<br>b) P(only Math) = 0.375 (37.5%)<br>c) P(neither) = 0.125 (12.5%)</span>
+                            <span class="answer-highlight">a) P(Math OR Science) = 0.875 (87.5%)<br>b) P(only Math) =
+                                0.375 (37.5%)<br>c) P(neither) = 0.125 (12.5%)</span>
                         </div>
-                        
+
                         <div class="verification">
                             <strong>Verification:</strong>
-                            <p>Check: 0.375 (only Math) + 0.25 (both) + 0.25 (only Science) + 0.125 (neither) = 1.0 ✓</p>
+                            <p>Check: 0.375 (only Math) + 0.25 (both) + 0.25 (only Science) + 0.125 (neither) = 1.0 ✓
+                            </p>
                         </div>
                     </div>
-                    
+
                     <div class="practice-problems">
                         <h4>💪 Try These:</h4>
                         <ol>
@@ -2106,7 +2289,9 @@
                             <li>If P(A∪B)=0.8, P(A)=0.5, P(B)=0.4, find P(A∩B)</li>
                             <li>100 students: 60 like pizza, 40 like burgers, 20 like both. How many like neither?</li>
                         </ol>
-                        <button class="show-answers-btn" onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show Answers</button>
+                        <button class="show-answers-btn"
+                            onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
+                            Answers</button>
                         <div class="practice-answers" style="display: none;">
                             <p><strong>Answers:</strong></p>
                             <ol>
@@ -2139,7 +2324,8 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Conditional probability is the probability of event A occurring given that event B has already occurred.</p>
+                    <p><strong>What is it?</strong> Conditional probability is the probability of event A occurring
+                        given that event B has already occurred.</p>
                 </div>
 
                 <div class="content-card">
@@ -2180,7 +2366,8 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Two events are independent if the occurrence of one doesn't affect the probability of the other.</p>
+                    <p><strong>What is it?</strong> Two events are independent if the occurrence of one doesn't affect
+                        the probability of the other.</p>
                 </div>
 
                 <div class="content-card">
@@ -2197,22 +2384,24 @@
                     <h3>Examples</h3>
                     <ul>
                         <li><strong>Independent:</strong> Coin flips, die rolls with replacement</li>
-                        <li><strong>Dependent:</strong> Drawing cards without replacement, weather on consecutive days</li>
+                        <li><strong>Dependent:</strong> Drawing cards without replacement, weather on consecutive days
+                        </li>
                     </ul>
                 </div>
 
                 <!-- WORKED EXAMPLE SECTION -->
                 <div class="content-block worked-example-section">
                     <h3>📝 Worked Example - Step by Step</h3>
-                    
+
                     <div class="example-problem">
                         <h4>Problem:</h4>
-                        <p class="problem-statement">Two dice are rolled. Let A = "first die shows 6" and B = "sum is 7". Are A and B independent?</p>
+                        <p class="problem-statement">Two dice are rolled. Let A = "first die shows 6" and B = "sum is
+                            7". Are A and B independent?</p>
                     </div>
-                    
+
                     <div class="example-solution">
                         <h4>Solution:</h4>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 1:</div>
                             <div class="step-content">
@@ -2224,7 +2413,7 @@
                                 <p class="step-explanation">Probability the first die is 6</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 2:</div>
                             <div class="step-content">
@@ -2237,7 +2426,7 @@
                                 <p class="step-explanation">Count all ways to get sum of 7</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 3:</div>
                             <div class="step-content">
@@ -2250,7 +2439,7 @@
                                 <p class="step-explanation">Find where both events occur simultaneously</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 4:</div>
                             <div class="step-content">
@@ -2264,7 +2453,7 @@
                                 <p class="step-explanation">Compare the two probabilities to test independence</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 5:</div>
                             <div class="step-content">
@@ -2276,18 +2465,19 @@
                                 <p class="step-explanation">When the product rule holds, events are independent</p>
                             </div>
                         </div>
-                        
+
                         <div class="final-answer">
                             <strong>✓ Final Answer:</strong>
                             <span class="answer-highlight">YES, events are independent. P(A∩B) = P(A)×P(B) = 1/36</span>
                         </div>
-                        
+
                         <div class="verification">
                             <strong>Check:</strong>
-                            <p>We can also verify: P(B|A) = P(A∩B)/P(A) = (1/36)/(1/6) = 1/6 = P(B). Since P(B|A) = P(B), the events are independent.</p>
+                            <p>We can also verify: P(B|A) = P(A∩B)/P(A) = (1/36)/(1/6) = 1/6 = P(B). Since P(B|A) =
+                                P(B), the events are independent.</p>
                         </div>
                     </div>
-                    
+
                     <div class="practice-problems">
                         <h4>💪 Try These:</h4>
                         <ol>
@@ -2295,7 +2485,9 @@
                             <li>Coin flip: P(Heads) and P(Tails). Independent?</li>
                             <li>Drawing two cards without replacement. Independent?</li>
                         </ol>
-                        <button class="show-answers-btn" onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show Answers</button>
+                        <button class="show-answers-btn"
+                            onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
+                            Answers</button>
                         <div class="practice-answers" style="display: none;">
                             <p><strong>Answers:</strong></p>
                             <ol>
@@ -2328,8 +2520,10 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Bayes' Theorem shows how to update probability based on new information.</p>
-                    <p><strong>Why it matters:</strong> Used in medical diagnosis, spam filters, machine learning, and countless applications.</p>
+                    <p><strong>What is it?</strong> Bayes' Theorem shows how to update probability based on new
+                        information.</p>
+                    <p><strong>Why it matters:</strong> Used in medical diagnosis, spam filters, machine learning, and
+                        countless applications.</p>
                 </div>
 
                 <div class="content-card">
@@ -2363,15 +2557,17 @@
                 <!-- WORKED EXAMPLE SECTION -->
                 <div class="content-block worked-example-section">
                     <h3>📝 Worked Example - Step by Step</h3>
-                    
+
                     <div class="example-problem">
                         <h4>Problem:</h4>
-                        <p class="problem-statement">A disease affects 1% of the population. A test is 99% accurate (detects 99% of sick people and correctly identifies 99% of healthy people). You test positive. What's the probability you actually have the disease?</p>
+                        <p class="problem-statement">A disease affects 1% of the population. A test is 99% accurate
+                            (detects 99% of sick people and correctly identifies 99% of healthy people). You test
+                            positive. What's the probability you actually have the disease?</p>
                     </div>
-                    
+
                     <div class="example-solution">
                         <h4>Solution:</h4>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 1:</div>
                             <div class="step-content">
@@ -2383,10 +2579,11 @@
                                     <code>P(B|A) = 0.99 (99% true positive rate)</code><br>
                                     <code>P(B|A') = 0.01 (1% false positive rate)</code>
                                 </div>
-                                <p class="step-explanation">Set up all known probabilities before applying Bayes' Theorem</p>
+                                <p class="step-explanation">Set up all known probabilities before applying Bayes'
+                                    Theorem</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 2:</div>
                             <div class="step-content">
@@ -2399,7 +2596,7 @@
                                 <p class="step-explanation">Find the overall probability of testing positive</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 3:</div>
                             <div class="step-content">
@@ -2410,28 +2607,34 @@
                                     <code>P(A|B) = 0.0099 / 0.0198</code><br>
                                     <code>P(A|B) = 0.5 = 50%</code>
                                 </div>
-                                <p class="step-explanation">This is the posterior probability - what we want to find!</p>
+                                <p class="step-explanation">This is the posterior probability - what we want to find!
+                                </p>
                             </div>
                         </div>
-                        
+
                         <div class="final-answer">
                             <strong>Final Answer:</strong>
-                            <span class="answer-highlight">Only 50% chance you have the disease despite testing positive!</span>
+                            <span class="answer-highlight">Only 50% chance you have the disease despite testing
+                                positive!</span>
                         </div>
-                        
+
                         <div class="verification">
                             <strong>✓ Why So Low?</strong>
-                            <p>This counter-intuitive result occurs because the disease is so rare (1%). Even with a 99% accurate test, there are many more false positives from the healthy 99% than true positives from the sick 1%. Base rates matter!</p>
+                            <p>This counter-intuitive result occurs because the disease is so rare (1%). Even with a 99%
+                                accurate test, there are many more false positives from the healthy 99% than true
+                                positives from the sick 1%. Base rates matter!</p>
                         </div>
                     </div>
-                    
+
                     <div class="practice-problems">
                         <h4>💪 Try These:</h4>
                         <ol>
                             <li>What if the disease affects 10% of the population instead? Recalculate P(A|B)</li>
                             <li>If the test was 95% accurate instead of 99%, what would P(A|B) be?</li>
                         </ol>
-                        <button class="show-answers-btn" onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show Answers</button>
+                        <button class="show-answers-btn"
+                            onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
+                            Answers</button>
                         <div class="practice-answers" style="display: none;">
                             <p><strong>Answers:</strong></p>
                             <ol>
@@ -2463,8 +2666,10 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> PMF gives the probability that a discrete random variable equals a specific value.</p>
-                    <p><strong>Why it matters:</strong> Used for countable outcomes like dice rolls, coin flips, or number of defects.</p>
+                    <p><strong>What is it?</strong> PMF gives the probability that a discrete random variable equals a
+                        specific value.</p>
+                    <p><strong>Why it matters:</strong> Used for countable outcomes like dice rolls, coin flips, or
+                        number of defects.</p>
                 </div>
 
                 <div class="content-card">
@@ -2506,7 +2711,8 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> PDF describes probability for continuous random variables. Probability at exact point is 0; we calculate probability over intervals.</p>
+                    <p><strong>What is it?</strong> PDF describes probability for continuous random variables.
+                        Probability at exact point is 0; we calculate probability over intervals.</p>
                 </div>
 
                 <div class="content-card">
@@ -2522,15 +2728,16 @@
                 <!-- WORKED EXAMPLE SECTION -->
                 <div class="content-block worked-example-section">
                     <h3>📝 Worked Example - Step by Step</h3>
-                    
+
                     <div class="example-problem">
                         <h4>Problem:</h4>
-                        <p class="problem-statement">Continuous random variable X has uniform distribution on interval [0, 10]. a) Find the PDF f(x), b) Calculate P(3 ≤ X ≤ 7)</p>
+                        <p class="problem-statement">Continuous random variable X has uniform distribution on interval
+                            [0, 10]. a) Find the PDF f(x), b) Calculate P(3 ≤ X ≤ 7)</p>
                     </div>
-                    
+
                     <div class="example-solution">
                         <h4>Solution:</h4>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 1:</div>
                             <div class="step-content">
@@ -2540,10 +2747,11 @@
                                     <code>For uniform on [a, b], PDF is constant</code><br>
                                     <code>Total area under curve must equal 1</code>
                                 </div>
-                                <p class="step-explanation">Uniform means constant probability density across the interval</p>
+                                <p class="step-explanation">Uniform means constant probability density across the
+                                    interval</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 2:</div>
                             <div class="step-content">
@@ -2558,7 +2766,7 @@
                                 <p class="step-explanation">The constant height must give total area of 1</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 3:</div>
                             <div class="step-content">
@@ -2572,7 +2780,7 @@
                                 <p class="step-explanation">Probability is the area of the rectangle</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 4:</div>
                             <div class="step-content">
@@ -2585,18 +2793,19 @@
                                 <p class="step-explanation">The geometric area equals the probability</p>
                             </div>
                         </div>
-                        
+
                         <div class="final-answer">
                             <strong>✓ Final Answer:</strong>
-                            <span class="answer-highlight">a) f(x) = 0.1 for x ∈ [0,10]<br>b) P(3 ≤ X ≤ 7) = 0.4 (40%)</span>
+                            <span class="answer-highlight">a) f(x) = 0.1 for x ∈ [0,10]<br>b) P(3 ≤ X ≤ 7) = 0.4
+                                (40%)</span>
                         </div>
-                        
+
                         <div class="verification">
                             <strong>Verification:</strong>
                             <p>P(0 ≤ X ≤ 10) = 10 × 0.1 = 1.0 ✓ (total probability = 1)</p>
                         </div>
                     </div>
-                    
+
                     <div class="practice-problems">
                         <h4>💪 Try These:</h4>
                         <ol>
@@ -2604,7 +2813,9 @@
                             <li>For above, find P(8 ≤ X ≤ 12)</li>
                             <li>Why is P(X = 7) = 0 for continuous distributions?</li>
                         </ol>
-                        <button class="show-answers-btn" onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show Answers</button>
+                        <button class="show-answers-btn"
+                            onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
+                            Answers</button>
                         <div class="practice-answers" style="display: none;">
                             <p><strong>Answers:</strong></p>
                             <ol>
@@ -2637,7 +2848,8 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> CDF gives the probability that X is less than or equal to a specific value.</p>
+                    <p><strong>What is it?</strong> CDF gives the probability that X is less than or equal to a specific
+                        value.</p>
                     <p><strong>Formula:</strong> F(x) = P(X ≤ x)</p>
                 </div>
 
@@ -2654,15 +2866,16 @@
                 <!-- WORKED EXAMPLE SECTION -->
                 <div class="content-block worked-example-section">
                     <h3>📝 Worked Example - Step by Step</h3>
-                    
+
                     <div class="example-problem">
                         <h4>Problem:</h4>
-                        <p class="problem-statement">For the uniform distribution from Topic 20 (X ~ Uniform[0,10]), find: a) F(5) = P(X ≤ 5), b) F(12), c) P(2 &lt; X ≤ 8)</p>
+                        <p class="problem-statement">For the uniform distribution from Topic 20 (X ~ Uniform[0,10]),
+                            find: a) F(5) = P(X ≤ 5), b) F(12), c) P(2 &lt; X ≤ 8)</p>
                     </div>
-                    
+
                     <div class="example-solution">
                         <h4>Solution:</h4>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 1:</div>
                             <div class="step-content">
@@ -2674,7 +2887,7 @@
                                 <p class="step-explanation">CDF accumulates probability from the left</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 2:</div>
                             <div class="step-content">
@@ -2687,7 +2900,7 @@
                                 <p class="step-explanation">Half of the distribution is below x = 5</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 3:</div>
                             <div class="step-content">
@@ -2701,7 +2914,7 @@
                                 <p class="step-explanation">CDF plateaus at 1 beyond the support of the distribution</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 4:</div>
                             <div class="step-content">
@@ -2715,7 +2928,7 @@
                                 <p class="step-explanation">Subtract lower CDF from upper CDF</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 5:</div>
                             <div class="step-content">
@@ -2729,18 +2942,20 @@
                                 <p class="step-explanation">The complete CDF function has three pieces</p>
                             </div>
                         </div>
-                        
+
                         <div class="final-answer">
                             <strong>✓ Final Answer:</strong>
-                            <span class="answer-highlight">a) F(5) = 0.5<br>b) F(12) = 1.0<br>c) P(2 &lt; X ≤ 8) = 0.6</span>
+                            <span class="answer-highlight">a) F(5) = 0.5<br>b) F(12) = 1.0<br>c) P(2 &lt; X ≤ 8) =
+                                0.6</span>
                         </div>
-                        
+
                         <div class="verification">
                             <strong>Check:</strong>
-                            <p>F(0) = 0 (no probability below 0), F(10) = 1 (all probability by 10), F is non-decreasing ✓</p>
+                            <p>F(0) = 0 (no probability below 0), F(10) = 1 (all probability by 10), F is non-decreasing
+                                ✓</p>
                         </div>
                     </div>
-                    
+
                     <div class="practice-problems">
                         <h4>💪 Try These:</h4>
                         <ol>
@@ -2748,7 +2963,9 @@
                             <li>What is P(X &gt; 7) using the CDF?</li>
                             <li>If F(x) = 0.75, what does this mean?</li>
                         </ol>
-                        <button class="show-answers-btn" onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show Answers</button>
+                        <button class="show-answers-btn"
+                            onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
+                            Answers</button>
                         <div class="practice-answers" style="display: none;">
                             <p><strong>Answers:</strong></p>
                             <ol>
@@ -2781,7 +2998,8 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Models a single trial with two outcomes: success (1) or failure (0).</p>
+                    <p><strong>What is it?</strong> Models a single trial with two outcomes: success (1) or failure (0).
+                    </p>
                     <p><strong>Examples:</strong> Coin flip, pass/fail test, yes/no question</p>
                 </div>
 
@@ -2798,15 +3016,16 @@
                 <!-- WORKED EXAMPLE SECTION -->
                 <div class="content-block worked-example-section">
                     <h3>📝 Worked Example - Step by Step</h3>
-                    
+
                     <div class="example-problem">
                         <h4>Problem:</h4>
-                        <p class="problem-statement">Flip a fair coin once. Let X = 1 if Heads, X = 0 if Tails. a) Find P(X=1) and P(X=0), b) Calculate E(X) and Var(X)</p>
+                        <p class="problem-statement">Flip a fair coin once. Let X = 1 if Heads, X = 0 if Tails. a) Find
+                            P(X=1) and P(X=0), b) Calculate E(X) and Var(X)</p>
                     </div>
-                    
+
                     <div class="example-solution">
                         <h4>Solution:</h4>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 1:</div>
                             <div class="step-content">
@@ -2819,7 +3038,7 @@
                                 <p class="step-explanation">This is a classic Bernoulli trial</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 2:</div>
                             <div class="step-content">
@@ -2832,7 +3051,7 @@
                                 <p class="step-explanation">Probabilities must sum to 1</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 3:</div>
                             <div class="step-content">
@@ -2846,7 +3065,7 @@
                                 <p class="step-explanation">Expected value is the probability of success</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 4:</div>
                             <div class="step-content">
@@ -2859,7 +3078,7 @@
                                 <p class="step-explanation">Variance measures spread of outcomes</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 5:</div>
                             <div class="step-content">
@@ -2871,18 +3090,20 @@
                                 <p class="step-explanation">Expected value represents long-run average</p>
                             </div>
                         </div>
-                        
+
                         <div class="final-answer">
                             <strong>✓ Final Answer:</strong>
-                            <span class="answer-highlight">a) P(X=1) = 0.5, P(X=0) = 0.5<br>b) E(X) = 0.5, Var(X) = 0.25</span>
+                            <span class="answer-highlight">a) P(X=1) = 0.5, P(X=0) = 0.5<br>b) E(X) = 0.5, Var(X) =
+                                0.25</span>
                         </div>
-                        
+
                         <div class="verification">
                             <strong>Check:</strong>
-                            <p>For fair coin, p = 0.5 makes sense. Over many flips, we expect half heads (E(X) = 0.5).</p>
+                            <p>For fair coin, p = 0.5 makes sense. Over many flips, we expect half heads (E(X) = 0.5).
+                            </p>
                         </div>
                     </div>
-                    
+
                     <div class="practice-problems">
                         <h4>💪 Try These:</h4>
                         <ol>
@@ -2890,7 +3111,9 @@
                             <li>Free throw: 80% success rate. Model as Bernoulli</li>
                             <li>When is Var(X) maximized for Bernoulli?</li>
                         </ol>
-                        <button class="show-answers-btn" onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show Answers</button>
+                        <button class="show-answers-btn"
+                            onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
+                            Answers</button>
                         <div class="practice-answers" style="display: none;">
                             <p><strong>Answers:</strong></p>
                             <ol>
@@ -2923,7 +3146,8 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Models the number of successes in n independent Bernoulli trials.</p>
+                    <p><strong>What is it?</strong> Models the number of successes in n independent Bernoulli trials.
+                    </p>
                     <p><strong>Requirements:</strong> Fixed n, same p, independent trials, binary outcomes</p>
                 </div>
 
@@ -2965,8 +3189,10 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> The most important continuous probability distribution—symmetric, bell-shaped curve.</p>
-                    <p><strong>Why it matters:</strong> Many natural phenomena follow normal distribution. Foundation of inferential statistics.</p>
+                    <p><strong>What is it?</strong> The most important continuous probability distribution—symmetric,
+                        bell-shaped curve.</p>
+                    <p><strong>Why it matters:</strong> Many natural phenomena follow normal distribution. Foundation of
+                        inferential statistics.</p>
                 </div>
 
                 <div class="content-card">
@@ -3000,15 +3226,16 @@
                 <!-- WORKED EXAMPLE SECTION -->
                 <div class="content-block worked-example-section">
                     <h3>📝 Worked Example - Step by Step</h3>
-                    
+
                     <div class="example-problem">
                         <h4>Problem:</h4>
-                        <p class="problem-statement">IQ scores follow Normal distribution with μ = 100, σ = 15. Find: a) P(IQ ≤ 115), b) P(85 ≤ IQ ≤ 115), c) IQ score at 95th percentile</p>
+                        <p class="problem-statement">IQ scores follow Normal distribution with μ = 100, σ = 15. Find: a)
+                            P(IQ ≤ 115), b) P(85 ≤ IQ ≤ 115), c) IQ score at 95th percentile</p>
                     </div>
-                    
+
                     <div class="example-solution">
                         <h4>Solution:</h4>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 1:</div>
                             <div class="step-content">
@@ -3021,7 +3248,7 @@
                                 <p class="step-explanation">Parameters define the shape and location of the curve</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 2:</div>
                             <div class="step-content">
@@ -3034,7 +3261,7 @@
                                 <p class="step-explanation">Standardize to z-score, then use standard normal table</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 3:</div>
                             <div class="step-content">
@@ -3049,7 +3276,7 @@
                                 <p class="step-explanation">One standard deviation on each side covers 68% of data</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 4:</div>
                             <div class="step-content">
@@ -3061,21 +3288,24 @@
                                     <code>= 100 + 24.675 = 124.675</code><br>
                                     <code>IQ ≈ 125</code>
                                 </div>
-                                <p class="step-explanation">Convert z-score back to original scale using inverse formula</p>
+                                <p class="step-explanation">Convert z-score back to original scale using inverse formula
+                                </p>
                             </div>
                         </div>
-                        
+
                         <div class="final-answer">
                             <strong>✓ Final Answer:</strong>
-                            <span class="answer-highlight">a) P(IQ ≤ 115) = 0.8413 (84.13%)<br>b) P(85 ≤ IQ ≤ 115) = 0.6826 (68.26%)<br>c) 95th percentile = IQ of 125</span>
+                            <span class="answer-highlight">a) P(IQ ≤ 115) = 0.8413 (84.13%)<br>b) P(85 ≤ IQ ≤ 115) =
+                                0.6826 (68.26%)<br>c) 95th percentile = IQ of 125</span>
                         </div>
-                        
+
                         <div class="verification">
                             <strong>Verification:</strong>
-                            <p>Using 68-95-99.7 rule: μ±1σ contains 68% ✓, μ±2σ contains 95%, μ±3σ contains 99.7%. Our answer matches the empirical rule!</p>
+                            <p>Using 68-95-99.7 rule: μ±1σ contains 68% ✓, μ±2σ contains 95%, μ±3σ contains 99.7%. Our
+                                answer matches the empirical rule!</p>
                         </div>
                     </div>
-                    
+
                     <div class="practice-problems">
                         <h4>💪 Try These:</h4>
                         <ol>
@@ -3083,7 +3313,9 @@
                             <li>What IQ scores contain the middle 95% of people?</li>
                             <li>If z = -2, what percentile is this?</li>
                         </ol>
-                        <button class="show-answers-btn" onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show Answers</button>
+                        <button class="show-answers-btn"
+                            onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
+                            Answers</button>
                         <div class="practice-answers" style="display: none;">
                             <p><strong>Answers:</strong></p>
                             <ol>
@@ -3116,8 +3348,10 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Statistical method for testing claims about populations using sample data.</p>
-                    <p><strong>Why it matters:</strong> Allows us to make evidence-based decisions and determine if effects are real or due to chance.</p>
+                    <p><strong>What is it?</strong> Statistical method for testing claims about populations using sample
+                        data.</p>
+                    <p><strong>Why it matters:</strong> Allows us to make evidence-based decisions and determine if
+                        effects are real or due to chance.</p>
                 </div>
 
                 <div class="content-card">
@@ -3167,7 +3401,8 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> α (alpha) is the probability of rejecting H₀ when it's actually true (Type I error rate).</p>
+                    <p><strong>What is it?</strong> α (alpha) is the probability of rejecting H₀ when it's actually true
+                        (Type I error rate).</p>
                     <p><strong>Common values:</strong> 0.05 (5%), 0.01 (1%), 0.10 (10%)</p>
                 </div>
 
@@ -3184,15 +3419,16 @@
                 <!-- WORKED EXAMPLE SECTION -->
                 <div class="content-block worked-example-section">
                     <h3>📝 Worked Example - Step by Step</h3>
-                    
+
                     <div class="example-problem">
                         <h4>Problem:</h4>
-                        <p class="problem-statement">Explain the difference between α = 0.05 and α = 0.01. Which is more strict? Find critical values for both in a two-tailed test.</p>
+                        <p class="problem-statement">Explain the difference between α = 0.05 and α = 0.01. Which is more
+                            strict? Find critical values for both in a two-tailed test.</p>
                     </div>
-                    
+
                     <div class="example-solution">
                         <h4>Solution:</h4>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 1:</div>
                             <div class="step-content">
@@ -3205,7 +3441,7 @@
                                 </div>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 2:</div>
                             <div class="step-content">
@@ -3218,7 +3454,7 @@
                                 </div>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 3:</div>
                             <div class="step-content">
@@ -3231,7 +3467,7 @@
                                 </div>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 4:</div>
                             <div class="step-content">
@@ -3244,7 +3480,7 @@
                                 </div>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 5:</div>
                             <div class="step-content">
@@ -3256,13 +3492,14 @@
                                 </div>
                             </div>
                         </div>
-                        
+
                         <div class="final-answer">
                             <strong>✓ Final Answer:</strong>
-                            <span class="answer-highlight">α = 0.05: z = ±1.96; α = 0.01: z = ±2.576 (more strict)</span>
+                            <span class="answer-highlight">α = 0.05: z = ±1.96; α = 0.01: z = ±2.576 (more
+                                strict)</span>
                         </div>
                     </div>
-                    
+
                     <div class="practice-problems">
                         <h4>💪 Practice Problems:</h4>
                         <ol>
@@ -3294,7 +3531,8 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Standard error (SE) measures how much sample means vary from the true population mean.</p>
+                    <p><strong>What is it?</strong> Standard error (SE) measures how much sample means vary from the
+                        true population mean.</p>
                 </div>
 
                 <div class="content-card">
@@ -3319,15 +3557,16 @@
                 <!-- WORKED EXAMPLE SECTION -->
                 <div class="content-block worked-example-section">
                     <h3>📝 Worked Example - Step by Step</h3>
-                    
+
                     <div class="example-problem">
                         <h4>Problem:</h4>
-                        <p class="problem-statement">Population has σ = 20. Calculate standard error for sample sizes: n = 4, n = 16, n = 64, n = 100. What pattern do you notice?</p>
+                        <p class="problem-statement">Population has σ = 20. Calculate standard error for sample sizes: n
+                            = 4, n = 16, n = 64, n = 100. What pattern do you notice?</p>
                     </div>
-                    
+
                     <div class="example-solution">
                         <h4>Solution:</h4>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 1:</div>
                             <div class="step-content">
@@ -3341,7 +3580,7 @@
                                 </div>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 2:</div>
                             <div class="step-content">
@@ -3353,7 +3592,7 @@
                                 </div>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 3:</div>
                             <div class="step-content">
@@ -3365,7 +3604,7 @@
                                 </div>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 4:</div>
                             <div class="step-content">
@@ -3377,7 +3616,7 @@
                                 </div>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 5:</div>
                             <div class="step-content">
@@ -3389,7 +3628,7 @@
                                 </div>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 6:</div>
                             <div class="step-content">
@@ -3405,13 +3644,14 @@
                                 </div>
                             </div>
                         </div>
-                        
+
                         <div class="final-answer">
                             <strong>✓ Final Answer:</strong>
-                            <span class="answer-highlight">SE: 10, 5, 2.5, 2. Larger n → Smaller SE (more precision)</span>
+                            <span class="answer-highlight">SE: 10, 5, 2.5, 2. Larger n → Smaller SE (more
+                                precision)</span>
                         </div>
                     </div>
-                    
+
                     <div class="practice-problems">
                         <h4>💪 Practice Problems:</h4>
                         <ol>
@@ -3466,15 +3706,16 @@
                 <!-- WORKED EXAMPLE SECTION -->
                 <div class="content-block worked-example-section">
                     <h3>📝 Worked Example - Step by Step</h3>
-                    
+
                     <div class="example-problem">
                         <h4>Problem:</h4>
-                        <p class="problem-statement">A factory claims μ = 100. Sample: n = 36, x̄ = 105, σ = 12. Test at α = 0.05 (two-tailed).</p>
+                        <p class="problem-statement">A factory claims μ = 100. Sample: n = 36, x̄ = 105, σ = 12. Test at
+                            α = 0.05 (two-tailed).</p>
                     </div>
-                    
+
                     <div class="example-solution">
                         <h4>Solution:</h4>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 1:</div>
                             <div class="step-content">
@@ -3486,7 +3727,7 @@
                                 </div>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 2:</div>
                             <div class="step-content">
@@ -3499,7 +3740,7 @@
                                 </div>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 3:</div>
                             <div class="step-content">
@@ -3512,7 +3753,7 @@
                                 </div>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 4:</div>
                             <div class="step-content">
@@ -3524,7 +3765,7 @@
                                 </div>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 5:</div>
                             <div class="step-content">
@@ -3538,7 +3779,7 @@
                                 </div>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 6:</div>
                             <div class="step-content">
@@ -3550,18 +3791,18 @@
                                 </div>
                             </div>
                         </div>
-                        
+
                         <div class="final-answer">
                             <strong>✓ Final Answer:</strong>
                             <span class="answer-highlight">z = 2.5 &gt; 1.96, REJECT H₀ (claim is false)</span>
                         </div>
-                        
+
                         <div class="verification">
                             <strong>Check:</strong>
                             <p>P-value = 2 × P(Z &gt; 2.5) = 2 × 0.0062 = 0.0124 &lt; 0.05 ✓ Confirms rejection</p>
                         </div>
                     </div>
-                    
+
                     <div class="practice-problems">
                         <h4>💪 Practice Problems:</h4>
                         <ol>
@@ -3612,15 +3853,16 @@
                 <!-- WORKED EXAMPLE SECTION -->
                 <div class="content-block worked-example-section">
                     <h3>📝 Worked Example - Step by Step</h3>
-                    
+
                     <div class="example-problem">
                         <h4>Problem:</h4>
-                        <p class="problem-statement">Find critical z-values for: a) α = 0.05 one-tailed (right), b) α = 0.05 two-tailed, c) α = 0.01 two-tailed. Draw rejection regions.</p>
+                        <p class="problem-statement">Find critical z-values for: a) α = 0.05 one-tailed (right), b) α =
+                            0.05 two-tailed, c) α = 0.01 two-tailed. Draw rejection regions.</p>
                     </div>
-                    
+
                     <div class="example-solution">
                         <h4>Solution:</h4>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 1:</div>
                             <div class="step-content">
@@ -3636,7 +3878,7 @@
                                 </div>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 2:</div>
                             <div class="step-content">
@@ -3652,7 +3894,7 @@
                                 </div>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 3:</div>
                             <div class="step-content">
@@ -3668,7 +3910,7 @@
                                 </div>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 4:</div>
                             <div class="step-content">
@@ -3682,13 +3924,13 @@
                                 </div>
                             </div>
                         </div>
-                        
+
                         <div class="final-answer">
                             <strong>✓ Final Answer:</strong>
                             <span class="answer-highlight">a) z = 1.645, b) z = ±1.96, c) z = ±2.576</span>
                         </div>
                     </div>
-                    
+
                     <div class="practice-problems">
                         <h4>💪 Practice Problems:</h4>
                         <ol>
@@ -3720,7 +3962,8 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> P-value is the probability of getting results as extreme as observed, assuming H₀ is true.</p>
+                    <p><strong>What is it?</strong> P-value is the probability of getting results as extreme as
+                        observed, assuming H₀ is true.</p>
                 </div>
 
                 <div class="content-card">
@@ -3743,21 +3986,23 @@
 
                 <div class="callout-box warning">
                     <div class="callout-header">⚠️ COMMON MISCONCEPTION</div>
-                    <p>P-value is NOT the probability that H₀ is true! It's the probability of observing your data IF H₀ were true.</p>
+                    <p>P-value is NOT the probability that H₀ is true! It's the probability of observing your data IF H₀
+                        were true.</p>
                 </div>
 
                 <!-- WORKED EXAMPLE SECTION -->
                 <div class="content-block worked-example-section">
                     <h3>📝 Worked Example - Step by Step</h3>
-                    
+
                     <div class="example-problem">
                         <h4>Problem:</h4>
-                        <p class="problem-statement">Sample of 36 students has mean score x̄ = 78. Population mean claimed to be μ₀ = 75 with σ = 12. Test at α = 0.05 using p-value method.</p>
+                        <p class="problem-statement">Sample of 36 students has mean score x̄ = 78. Population mean
+                            claimed to be μ₀ = 75 with σ = 12. Test at α = 0.05 using p-value method.</p>
                     </div>
-                    
+
                     <div class="example-solution">
                         <h4>Solution:</h4>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 1:</div>
                             <div class="step-content">
@@ -3770,7 +4015,7 @@
                                 <p class="step-explanation">Set up null and alternative hypotheses</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 2:</div>
                             <div class="step-content">
@@ -3784,7 +4029,7 @@
                                 <p class="step-explanation">Calculate the z-score</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 3:</div>
                             <div class="step-content">
@@ -3797,7 +4042,7 @@
                                 <p class="step-explanation">Multiply by 2 for two-tailed test</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 4:</div>
                             <div class="step-content">
@@ -3810,7 +4055,7 @@
                                 <p class="step-explanation">Since p-value exceeds α, we fail to reject H₀</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 5:</div>
                             <div class="step-content">
@@ -3824,25 +4069,28 @@
                                 <p class="step-explanation">Interpret in context</p>
                             </div>
                         </div>
-                        
+
                         <div class="final-answer">
                             <strong>✓ Final Answer:</strong>
                             <span class="answer-highlight">p-value = 0.1336 &gt; 0.05, Fail to reject H₀</span>
                         </div>
-                        
+
                         <div class="verification">
                             <strong>Check:</strong>
-                            <p>The result is not statistically significant at α = 0.05 level. We need stronger evidence to claim the mean differs from 75.</p>
+                            <p>The result is not statistically significant at α = 0.05 level. We need stronger evidence
+                                to claim the mean differs from 75.</p>
                         </div>
                     </div>
-                    
+
                     <div class="practice-problems">
                         <h4>💪 Try These:</h4>
                         <ol>
                             <li>If z = 2.5, α = 0.01, find p-value and decide</li>
                             <li>When do we reject H₀ using p-value method?</li>
                         </ol>
-                        <button class="show-answers-btn" onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show Answers</button>
+                        <button class="show-answers-btn"
+                            onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
+                            Answers</button>
                         <div class="practice-answers" style="display: none;">
                             <p><strong>Answers:</strong></p>
                             <ol>
@@ -3896,15 +4144,17 @@
                 <!-- WORKED EXAMPLE SECTION -->
                 <div class="content-block worked-example-section">
                     <h3>📝 Worked Example - Step by Step</h3>
-                    
+
                     <div class="example-problem">
                         <h4>Problem:</h4>
-                        <p class="problem-statement">Researcher claims new drug LOWERS blood pressure (μ &lt; 120). Sample of 49: x̄ = 115, σ = 21. Test at α = 0.05. Should this be one-tailed or two-tailed?</p>
+                        <p class="problem-statement">Researcher claims new drug LOWERS blood pressure (μ &lt; 120).
+                            Sample of 49: x̄ = 115, σ = 21. Test at α = 0.05. Should this be one-tailed or two-tailed?
+                        </p>
                     </div>
-                    
+
                     <div class="example-solution">
                         <h4>Solution:</h4>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 1:</div>
                             <div class="step-content">
@@ -3917,7 +4167,7 @@
                                 <p class="step-explanation">Directional claim = one-tailed test</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 2:</div>
                             <div class="step-content">
@@ -3930,7 +4180,7 @@
                                 <p class="step-explanation">Alternative hypothesis shows the direction</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 3:</div>
                             <div class="step-content">
@@ -3944,7 +4194,7 @@
                                 <p class="step-explanation">Negative z-score indicates below mean</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 4:</div>
                             <div class="step-content">
@@ -3956,7 +4206,7 @@
                                 <p class="step-explanation">One-tailed critical value differs from two-tailed</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 5:</div>
                             <div class="step-content">
@@ -3970,7 +4220,7 @@
                                 <p class="step-explanation">Falls in rejection region, so reject null</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 6:</div>
                             <div class="step-content">
@@ -3984,25 +4234,29 @@
                                 <p class="step-explanation">Test choice matters!</p>
                             </div>
                         </div>
-                        
+
                         <div class="final-answer">
                             <strong>✓ Final Answer:</strong>
-                            <span class="answer-highlight">Use ONE-TAILED (left). z = -1.67 &lt; -1.645, Reject H₀</span>
+                            <span class="answer-highlight">Use ONE-TAILED (left). z = -1.67 &lt; -1.645, Reject
+                                H₀</span>
                         </div>
-                        
+
                         <div class="verification">
                             <strong>Check:</strong>
-                            <p>Evidence supports claim that drug lowers blood pressure. One-tailed test was appropriate for directional claim.</p>
+                            <p>Evidence supports claim that drug lowers blood pressure. One-tailed test was appropriate
+                                for directional claim.</p>
                         </div>
                     </div>
-                    
+
                     <div class="practice-problems">
                         <h4>💪 Try These:</h4>
                         <ol>
                             <li>Claim: μ &gt; 50. One-tailed or two-tailed?</li>
                             <li>Claim: μ ≠ 100. Which test?</li>
                         </ol>
-                        <button class="show-answers-btn" onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show Answers</button>
+                        <button class="show-answers-btn"
+                            onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
+                            Answers</button>
                         <div class="practice-answers" style="display: none;">
                             <p><strong>Answers:</strong></p>
                             <ol>
@@ -4054,15 +4308,16 @@
                 <!-- WORKED EXAMPLE SECTION -->
                 <div class="content-block worked-example-section">
                     <h3>📝 Worked Example - Step by Step</h3>
-                    
+
                     <div class="example-problem">
                         <h4>Problem:</h4>
-                        <p class="problem-statement">Small sample: n = 16, x̄ = 52, s = 8. Test if μ = 50 at α = 0.05. Population σ unknown.</p>
+                        <p class="problem-statement">Small sample: n = 16, x̄ = 52, s = 8. Test if μ = 50 at α = 0.05.
+                            Population σ unknown.</p>
                     </div>
-                    
+
                     <div class="example-solution">
                         <h4>Solution:</h4>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 1:</div>
                             <div class="step-content">
@@ -4075,7 +4330,7 @@
                                 <p class="step-explanation">Small sample + unknown σ = t-test</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 2:</div>
                             <div class="step-content">
@@ -4089,7 +4344,7 @@
                                 <p class="step-explanation">Use sample standard deviation s</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 3:</div>
                             <div class="step-content">
@@ -4101,7 +4356,7 @@
                                 <p class="step-explanation">Lose 1 df for estimating mean</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 4:</div>
                             <div class="step-content">
@@ -4114,7 +4369,7 @@
                                 <p class="step-explanation">Look up in t-distribution table</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 5:</div>
                             <div class="step-content">
@@ -4128,7 +4383,7 @@
                                 <p class="step-explanation">Test statistic not in rejection region</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 6:</div>
                             <div class="step-content">
@@ -4140,25 +4395,28 @@
                                 <p class="step-explanation">Interpret in context of problem</p>
                             </div>
                         </div>
-                        
+
                         <div class="final-answer">
                             <strong>✓ Final Answer:</strong>
                             <span class="answer-highlight">t = 1.0, critical = ±2.131, Fail to reject H₀</span>
                         </div>
-                        
+
                         <div class="verification">
                             <strong>Check:</strong>
-                            <p>The difference between 52 and 50 is not statistically significant at α = 0.05 level with this small sample.</p>
+                            <p>The difference between 52 and 50 is not statistically significant at α = 0.05 level with
+                                this small sample.</p>
                         </div>
                     </div>
-                    
+
                     <div class="practice-problems">
                         <h4>💪 Try These:</h4>
                         <ol>
                             <li>n = 25, x̄ = 100, s = 15, test μ = 95 at α = 0.01</li>
                             <li>Why use t-test instead of z-test?</li>
                         </ol>
-                        <button class="show-answers-btn" onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show Answers</button>
+                        <button class="show-answers-btn"
+                            onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
+                            Answers</button>
                         <div class="practice-answers" style="display: none;">
                             <p><strong>Answers:</strong></p>
                             <ol>
@@ -4190,7 +4448,8 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Degrees of freedom (df) is the number of independent values that can vary in analysis.</p>
+                    <p><strong>What is it?</strong> Degrees of freedom (df) is the number of independent values that can
+                        vary in analysis.</p>
                 </div>
 
                 <div class="content-card">
@@ -4214,15 +4473,16 @@
                 <!-- WORKED EXAMPLE SECTION -->
                 <div class="content-block worked-example-section">
                     <h3>📝 Worked Example - Step by Step</h3>
-                    
+
                     <div class="example-problem">
                         <h4>Problem:</h4>
-                        <p class="problem-statement">Calculate degrees of freedom for: a) Single sample t-test: n = 20, b) Two-sample t-test: n₁ = 15, n₂ = 18, c) Chi-squared test: 3×4 contingency table</p>
+                        <p class="problem-statement">Calculate degrees of freedom for: a) Single sample t-test: n = 20,
+                            b) Two-sample t-test: n₁ = 15, n₂ = 18, c) Chi-squared test: 3×4 contingency table</p>
                     </div>
-                    
+
                     <div class="example-solution">
                         <h4>Solution:</h4>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 1:</div>
                             <div class="step-content">
@@ -4236,7 +4496,7 @@
                                 <p class="step-explanation">Each parameter estimated reduces df by 1</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 2:</div>
                             <div class="step-content">
@@ -4250,7 +4510,7 @@
                                 <p class="step-explanation">Two samples = two means estimated</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 3:</div>
                             <div class="step-content">
@@ -4264,7 +4524,7 @@
                                 <p class="step-explanation">Degrees of freedom for independence test</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 4:</div>
                             <div class="step-content">
@@ -4277,25 +4537,28 @@
                                 <p class="step-explanation">Conceptual understanding</p>
                             </div>
                         </div>
-                        
+
                         <div class="final-answer">
                             <strong>✓ Final Answer:</strong>
                             <span class="answer-highlight">a) df = 19, b) df = 31, c) df = 6</span>
                         </div>
-                        
+
                         <div class="verification">
                             <strong>Check:</strong>
-                            <p>These df values would be used to find appropriate critical values from respective distribution tables.</p>
+                            <p>These df values would be used to find appropriate critical values from respective
+                                distribution tables.</p>
                         </div>
                     </div>
-                    
+
                     <div class="practice-problems">
                         <h4>💪 Try These:</h4>
                         <ol>
                             <li>Sample size 100, find df for t-test</li>
                             <li>5×3 table, find df for chi-squared</li>
                         </ol>
-                        <button class="show-answers-btn" onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show Answers</button>
+                        <button class="show-answers-btn"
+                            onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
+                            Answers</button>
                         <div class="practice-answers" style="display: none;">
                             <p><strong>Answers:</strong></p>
                             <ol>
@@ -4368,15 +4631,16 @@
                 <!-- WORKED EXAMPLE SECTION -->
                 <div class="content-block worked-example-section">
                     <h3>📝 Worked Example - Step by Step</h3>
-                    
+
                     <div class="example-problem">
                         <h4>Problem:</h4>
-                        <p class="problem-statement">Drug trial tests H₀: "Drug is safe" vs H₁: "Drug is dangerous". Describe Type I and Type II errors with consequences.</p>
+                        <p class="problem-statement">Drug trial tests H₀: "Drug is safe" vs H₁: "Drug is dangerous".
+                            Describe Type I and Type II errors with consequences.</p>
                     </div>
-                    
+
                     <div class="example-solution">
                         <h4>Solution:</h4>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 1:</div>
                             <div class="step-content">
@@ -4390,7 +4654,7 @@
                                 <p class="step-explanation">False alarm - reject truth</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 2:</div>
                             <div class="step-content">
@@ -4404,7 +4668,7 @@
                                 <p class="step-explanation">Miss detecting danger</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 3:</div>
                             <div class="step-content">
@@ -4418,7 +4682,7 @@
                                 <p class="step-explanation">Four possible outcomes</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 4:</div>
                             <div class="step-content">
@@ -4431,7 +4695,7 @@
                                 <p class="step-explanation">Probabilities of each error</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 5:</div>
                             <div class="step-content">
@@ -4444,25 +4708,29 @@
                                 <p class="step-explanation">Context determines which error is worse</p>
                             </div>
                         </div>
-                        
+
                         <div class="final-answer">
                             <strong>✓ Final Answer:</strong>
-                            <span class="answer-highlight">Type I (α): Reject safe drug<br>Type II (β): Approve dangerous drug<br>Type II more dangerous in this case!</span>
+                            <span class="answer-highlight">Type I (α): Reject safe drug<br>Type II (β): Approve
+                                dangerous drug<br>Type II more dangerous in this case!</span>
                         </div>
-                        
+
                         <div class="verification">
                             <strong>Check:</strong>
-                            <p>In medical contexts, Type II errors (missing danger) are often considered worse than Type I errors (false alarms).</p>
+                            <p>In medical contexts, Type II errors (missing danger) are often considered worse than Type
+                                I errors (false alarms).</p>
                         </div>
                     </div>
-                    
+
                     <div class="practice-problems">
                         <h4>💪 Try These:</h4>
                         <ol>
                             <li>Security scanner: H₀ = "Safe". Describe Type I/II errors</li>
                             <li>If α = 0.01, what's P(Type I error)?</li>
                         </ol>
-                        <button class="show-answers-btn" onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show Answers</button>
+                        <button class="show-answers-btn"
+                            onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
+                            Answers</button>
                         <div class="practice-answers" style="display: none;">
                             <p><strong>Answers:</strong></p>
                             <ol>
@@ -4494,7 +4762,8 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Chi-squared (χ²) distribution is used for testing hypotheses about categorical data.</p>
+                    <p><strong>What is it?</strong> Chi-squared (χ²) distribution is used for testing hypotheses about
+                        categorical data.</p>
                 </div>
 
                 <div class="content-card">
@@ -4537,7 +4806,8 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Tests whether observed frequencies match expected frequencies from a theoretical distribution.</p>
+                    <p><strong>What is it?</strong> Tests whether observed frequencies match expected frequencies from a
+                        theoretical distribution.</p>
                 </div>
 
                 <div class="content-card">
@@ -4580,7 +4850,8 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Tests whether two categorical variables are independent or associated.</p>
+                    <p><strong>What is it?</strong> Tests whether two categorical variables are independent or
+                        associated.</p>
                 </div>
 
                 <div class="content-card">
@@ -4596,7 +4867,8 @@
                 <div class="callout-box example">
                     <div class="callout-header">📊 EXAMPLE</div>
                     <p><strong>Are gender and color preference independent?</strong></p>
-                    <p>Create contingency table, calculate expected frequencies, compute χ², and test against critical value.</p>
+                    <p>Create contingency table, calculate expected frequencies, compute χ², and test against critical
+                        value.</p>
                 </div>
 
                 <div class="summary-card">
@@ -4620,7 +4892,8 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Tests hypotheses about population variance or standard deviation.</p>
+                    <p><strong>What is it?</strong> Tests hypotheses about population variance or standard deviation.
+                    </p>
                 </div>
 
                 <div class="content-card">
@@ -4656,8 +4929,10 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> A confidence interval provides a range of values that likely contains the true population parameter.</p>
-                    <p><strong>Why it matters:</strong> More informative than point estimates—shows precision and uncertainty.</p>
+                    <p><strong>What is it?</strong> A confidence interval provides a range of values that likely
+                        contains the true population parameter.</p>
+                    <p><strong>Why it matters:</strong> More informative than point estimates—shows precision and
+                        uncertainty.</p>
                 </div>
 
                 <div class="content-card">
@@ -4707,7 +4982,8 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Margin of error (MOE) is the ± part of a confidence interval, showing the precision of an estimate.</p>
+                    <p><strong>What is it?</strong> Margin of error (MOE) is the ± part of a confidence interval,
+                        showing the precision of an estimate.</p>
                 </div>
 
                 <div class="content-card">
@@ -4749,8 +5025,10 @@
 
                 <div class="content-card">
                     <h3>Correct Interpretation</h3>
-                    <p><strong>"We are 95% confident that the true population parameter lies within this interval."</strong></p>
-                    <p>This means: If we repeated this process many times, 95% of the intervals would contain the true parameter.</p>
+                    <p><strong>"We are 95% confident that the true population parameter lies within this
+                            interval."</strong></p>
+                    <p>This means: If we repeated this process many times, 95% of the intervals would contain the true
+                        parameter.</p>
                 </div>
 
                 <div class="callout-box warning">
@@ -4773,7 +5051,8 @@
 
                 <div class="callout-box tip">
                     <div class="callout-header">✅ PRO TIP</div>
-                    <p>Report confidence intervals instead of just p-values! CIs provide more information: effect size AND statistical significance.</p>
+                    <p>Report confidence intervals instead of just p-values! CIs provide more information: effect size
+                        AND statistical significance.</p>
                 </div>
 
                 <div class="summary-card">
@@ -4799,8 +5078,11 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> A vector can be viewed from three perspectives: as an arrow in space (physics), as an ordered list of numbers (computer science), or as an abstract object that can be added and scaled (mathematics).</p>
-                    <p><strong>Why it matters:</strong> Vectors are fundamental to linear algebra, physics, machine learning, and computer graphics. Understanding vectors unlocks countless applications.</p>
+                    <p><strong>What is it?</strong> A vector can be viewed from three perspectives: as an arrow in space
+                        (physics), as an ordered list of numbers (computer science), or as an abstract object that can
+                        be added and scaled (mathematics).</p>
+                    <p><strong>Why it matters:</strong> Vectors are fundamental to linear algebra, physics, machine
+                        learning, and computer graphics. Understanding vectors unlocks countless applications.</p>
                 </div>
 
                 <div class="callout-box insight">
@@ -4865,8 +5147,10 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Any vector can be expressed as a linear combination of basis vectors. In 2D, we use i-hat [1,0] and j-hat [0,1].</p>
-                    <p><strong>The span</strong> of vectors is all possible linear combinations you can create by scaling and adding them.</p>
+                    <p><strong>What is it?</strong> Any vector can be expressed as a linear combination of basis
+                        vectors. In 2D, we use i-hat [1,0] and j-hat [0,1].</p>
+                    <p><strong>The span</strong> of vectors is all possible linear combinations you can create by
+                        scaling and adding them.</p>
                 </div>
 
                 <div class="content-card">
@@ -4928,8 +5212,10 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> A linear transformation moves vectors around space while keeping grid lines parallel and evenly spaced, with the origin fixed.</p>
-                    <p><strong>Why matrices?</strong> A matrix completely describes a linear transformation by recording where the basis vectors land.</p>
+                    <p><strong>What is it?</strong> A linear transformation moves vectors around space while keeping
+                        grid lines parallel and evenly spaced, with the origin fixed.</p>
+                    <p><strong>Why matrices?</strong> A matrix completely describes a linear transformation by recording
+                        where the basis vectors land.</p>
                 </div>
 
                 <div class="content-card">
@@ -4981,8 +5267,10 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> An eigenvector of a matrix is a special vector that doesn't change direction during the transformation—it only gets scaled by its eigenvalue λ.</p>
-                    <p><strong>Why it matters:</strong> Eigenvectors reveal the fundamental directions of a transformation. Used in Google PageRank, quantum mechanics, and data science.</p>
+                    <p><strong>What is it?</strong> An eigenvector of a matrix is a special vector that doesn't change
+                        direction during the transformation—it only gets scaled by its eigenvalue λ.</p>
+                    <p><strong>Why it matters:</strong> Eigenvectors reveal the fundamental directions of a
+                        transformation. Used in Google PageRank, quantum mechanics, and data science.</p>
                 </div>
 
                 <div class="content-card">
@@ -5001,8 +5289,10 @@
 
                 <div class="callout-box insight">
                     <div class="callout-header">💡 GEOMETRIC MEANING</div>
-                    <p>Most vectors get knocked off their span during a transformation. But eigenvectors stay on their line—they just stretch or shrink!</p>
-                    <p><strong>Example:</strong> A rotation has no real eigenvectors (everything rotates). A scaling transformation has eigenvectors along the axes.</p>
+                    <p>Most vectors get knocked off their span during a transformation. But eigenvectors stay on their
+                        line—they just stretch or shrink!</p>
+                    <p><strong>Example:</strong> A rotation has no real eigenvectors (everything rotates). A scaling
+                        transformation has eigenvectors along the axes.</p>
                 </div>
 
                 <div class="interactive-container">
@@ -5019,7 +5309,8 @@
                     <ul class="use-case-list">
                         <li><strong>Google PageRank:</strong> Finds important web pages using eigenvectors</li>
                         <li><strong>PCA (Principal Component Analysis):</strong> Data dimensionality reduction</li>
-                        <li><strong>Stability Analysis:</strong> Engineering systems (will it oscillate or stabilize?)</li>
+                        <li><strong>Stability Analysis:</strong> Engineering systems (will it oscillate or stabilize?)
+                        </li>
                         <li><strong>Quantum Mechanics:</strong> Energy states are eigenvectors</li>
                     </ul>
                 </div>
@@ -5044,8 +5335,10 @@
                 </div>
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Matrix multiplication represents applying one transformation after another (composition).</p>
-                    <p><strong>Why it matters:</strong> Understanding this geometrically makes matrix multiplication intuitive instead of just memorizing rules.</p>
+                    <p><strong>What is it?</strong> Matrix multiplication represents applying one transformation after
+                        another (composition).</p>
+                    <p><strong>Why it matters:</strong> Understanding this geometrically makes matrix multiplication
+                        intuitive instead of just memorizing rules.</p>
                 </div>
                 <div class="content-card">
                     <h3>Formula</h3>
@@ -5076,13 +5369,14 @@
                 <div class="content-card">
                     <h3>Introduction</h3>
                     <p><strong>What is it?</strong> Linear transformations in 3D space using 3×3 matrices.</p>
-                    <p><strong>Why it matters:</strong> Essential for 3D graphics, robotics, and physics simulations.</p>
+                    <p><strong>Why it matters:</strong> Essential for 3D graphics, robotics, and physics simulations.
+                    </p>
                 </div>
                 <div class="content-card">
                     <h3>Basis in 3D</h3>
                     <div class="formula-card">
                         <div class="formula-header">Standard Basis</div>
-                        <div class="formula-main">î = [1, 0, 0]  ĵ = [0, 1, 0]  k̂ = [0, 0, 1]</div>
+                        <div class="formula-main">î = [1, 0, 0] ĵ = [0, 1, 0] k̂ = [0, 0, 1]</div>
                         <p>3×3 matrix = [where î lands | where ĵ lands | where k̂ lands]</p>
                     </div>
                 </div>
@@ -5106,8 +5400,10 @@
                 </div>
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> The determinant measures how much a transformation scales areas (2D) or volumes (3D).</p>
-                    <p><strong>Why it matters:</strong> Tells if transformation is invertible, changes orientation, and by how much space is scaled.</p>
+                    <p><strong>What is it?</strong> The determinant measures how much a transformation scales areas (2D)
+                        or volumes (3D).</p>
+                    <p><strong>Why it matters:</strong> Tells if transformation is invertible, changes orientation, and
+                        by how much space is scaled.</p>
                 </div>
                 <div class="content-card">
                     <h3>Formula</h3>
@@ -5180,8 +5476,10 @@
                 </div>
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> m×n matrices transform n-dimensional space to m-dimensional space.</p>
-                    <p><strong>Why it matters:</strong> Many real-world problems involve different input/output dimensions.</p>
+                    <p><strong>What is it?</strong> m×n matrices transform n-dimensional space to m-dimensional space.
+                    </p>
+                    <p><strong>Why it matters:</strong> Many real-world problems involve different input/output
+                        dimensions.</p>
                 </div>
                 <div class="content-card">
                     <h3>Examples</h3>
@@ -5211,7 +5509,8 @@
                 </div>
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> The dot product v·w measures how much v and w point in the same direction.</p>
+                    <p><strong>What is it?</strong> The dot product v·w measures how much v and w point in the same
+                        direction.</p>
                 </div>
                 <div class="content-card">
                     <h3>Formula</h3>
@@ -5249,8 +5548,10 @@
                 </div>
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> The cross product v×w creates a vector perpendicular to both v and w.</p>
-                    <p><strong>Why it matters:</strong> Essential in 3D physics (torque, angular momentum) and graphics.</p>
+                    <p><strong>What is it?</strong> The cross product v×w creates a vector perpendicular to both v and
+                        w.</p>
+                    <p><strong>Why it matters:</strong> Essential in 3D physics (torque, angular momentum) and graphics.
+                    </p>
                 </div>
                 <div class="content-card">
                     <h3>Formula</h3>
@@ -5289,12 +5590,15 @@
                 </div>
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Understanding cross products through the lens of determinants and transformations.</p>
-                    <p><strong>Why it matters:</strong> Reveals the connection between cross products, determinants, and volume.</p>
+                    <p><strong>What is it?</strong> Understanding cross products through the lens of determinants and
+                        transformations.</p>
+                    <p><strong>Why it matters:</strong> Reveals the connection between cross products, determinants, and
+                        volume.</p>
                 </div>
                 <div class="callout-box insight">
                     <div class="callout-header">💡 KEY INSIGHT</div>
-                    <p>The cross product can be computed as the determinant of a special matrix involving basis vectors î, ĵ, k̂ and the components of v and w.</p>
+                    <p>The cross product can be computed as the determinant of a special matrix involving basis vectors
+                        î, ĵ, k̂ and the components of v and w.</p>
                 </div>
                 <div class="summary-card">
                     <h3>🎯 Key Takeaways</h3>
@@ -5316,8 +5620,10 @@
                 </div>
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Converting between different coordinate systems (bases) to view transformations differently.</p>
-                    <p><strong>Why it matters:</strong> Some problems are easier in different coordinate systems. Eigenvector basis simplifies many calculations.</p>
+                    <p><strong>What is it?</strong> Converting between different coordinate systems (bases) to view
+                        transformations differently.</p>
+                    <p><strong>Why it matters:</strong> Some problems are easier in different coordinate systems.
+                        Eigenvector basis simplifies many calculations.</p>
                 </div>
                 <div class="content-card">
                     <h3>The Formula</h3>
@@ -5348,7 +5654,8 @@
                 </div>
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Shortcuts and tricks for quickly computing eigenvalues in special cases.</p>
+                    <p><strong>What is it?</strong> Shortcuts and tricks for quickly computing eigenvalues in special
+                        cases.</p>
                 </div>
                 <div class="content-card">
                     <h3>Quick Tricks</h3>
@@ -5379,8 +5686,10 @@
                 </div>
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Vectors can be anything that follows vector space axioms: polynomials, functions, matrices themselves!</p>
-                    <p><strong>Why it matters:</strong> Linear algebra applies to far more than just arrows in space.</p>
+                    <p><strong>What is it?</strong> Vectors can be anything that follows vector space axioms:
+                        polynomials, functions, matrices themselves!</p>
+                    <p><strong>Why it matters:</strong> Linear algebra applies to far more than just arrows in space.
+                    </p>
                 </div>
                 <div class="content-card">
                     <h3>Examples of Vector Spaces</h3>
@@ -5412,7 +5721,8 @@
                 <div class="content-card">
                     <h3>Introduction</h3>
                     <p><strong>What is it?</strong> A formula for solving linear systems Ax = b using determinants.</p>
-                    <p><strong>Why it matters:</strong> Provides explicit formulas for solutions, though not always most efficient computationally.</p>
+                    <p><strong>Why it matters:</strong> Provides explicit formulas for solutions, though not always most
+                        efficient computationally.</p>
                 </div>
                 <div class="content-card">
                     <h3>Formula</h3>
@@ -5424,7 +5734,8 @@
                 </div>
                 <div class="content-card">
                     <h3>Geometric Interpretation</h3>
-                    <p>Solution relates to how much the output vector b changes the signed volume of the transformation.</p>
+                    <p>Solution relates to how much the output vector b changes the signed volume of the transformation.
+                    </p>
                 </div>
                 <div class="summary-card">
                     <h3>🎯 Key Takeaways</h3>
@@ -5449,14 +5760,17 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Calculus is the mathematics of change and accumulation. It answers: "How fast?" (derivatives) and "How much total?" (integrals).</p>
-                    <p><strong>Big Idea:</strong> Break problems into infinitely many infinitely small pieces, then add them up.</p>
+                    <p><strong>What is it?</strong> Calculus is the mathematics of change and accumulation. It answers:
+                        "How fast?" (derivatives) and "How much total?" (integrals).</p>
+                    <p><strong>Big Idea:</strong> Break problems into infinitely many infinitely small pieces, then add
+                        them up.</p>
                 </div>
 
                 <div class="callout-box insight">
                     <div class="callout-header">💡 THE CIRCLE AREA PROBLEM</div>
                     <p>How do we know the area of a circle is πr²?</p>
-                    <p><strong>Calculus approach:</strong> Unwrap the circle into infinitely thin rings. Each ring is approximately a rectangle with height dr and width 2πr. Integrate from 0 to r:</p>
+                    <p><strong>Calculus approach:</strong> Unwrap the circle into infinitely thin rings. Each ring is
+                        approximately a rectangle with height dr and width 2πr. Integrate from 0 to r:</p>
                     <p>∫ 2πr dr = πr²</p>
                     <p>This is the essence of integration: summing infinitely small pieces!</p>
                 </div>
@@ -5509,7 +5823,8 @@
 
                 <div class="content-card">
                     <h3>The Paradox</h3>
-                    <p><strong>Question:</strong> How can something have a "rate of change" at a single instant in time?</p>
+                    <p><strong>Question:</strong> How can something have a "rate of change" at a single instant in time?
+                    </p>
                     <p>Rate means change divided by time. But at a single instant, no time passes, so we'd get 0/0!</p>
                     <p><strong>Solution:</strong> Limits! We find the rate as we approach that instant.</p>
                 </div>
@@ -5537,7 +5852,8 @@
 
                 <div class="callout-box insight">
                     <div class="callout-header">💡 VISUAL INTUITION</div>
-                    <p>Draw a secant line between two points on a curve. As you bring the points closer together, the secant line approaches the tangent line. The derivative is the slope of that tangent line!</p>
+                    <p>Draw a secant line between two points on a curve. As you bring the points closer together, the
+                        secant line approaches the tangent line. The derivative is the slope of that tangent line!</p>
                 </div>
 
                 <div class="summary-card">
@@ -5560,8 +5876,10 @@
                 </div>
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Standard rules for computing derivatives without using limits every time.</p>
-                    <p><strong>Why it matters:</strong> Makes calculus practical - we can quickly find derivatives of complex functions.</p>
+                    <p><strong>What is it?</strong> Standard rules for computing derivatives without using limits every
+                        time.</p>
+                    <p><strong>Why it matters:</strong> Makes calculus practical - we can quickly find derivatives of
+                        complex functions.</p>
                 </div>
                 <div class="content-card">
                     <h3>Common Derivative Rules</h3>
@@ -5587,15 +5905,15 @@
                 <!-- WORKED EXAMPLE SECTION -->
                 <div class="content-block worked-example-section">
                     <h3>📝 Worked Example - Step by Step</h3>
-                    
+
                     <div class="example-problem">
                         <h4>Problem:</h4>
                         <p class="problem-statement">Find the derivative of f(x) = 3x⁴ - 2x³ + 5x - 7</p>
                     </div>
-                    
+
                     <div class="example-solution">
                         <h4>Solution:</h4>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 1:</div>
                             <div class="step-content">
@@ -5607,7 +5925,7 @@
                                 <p class="step-explanation">The power rule works term by term</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 2:</div>
                             <div class="step-content">
@@ -5620,7 +5938,7 @@
                                 <p class="step-explanation">Bring down the 4, multiply by coefficient 3</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 3:</div>
                             <div class="step-content">
@@ -5631,7 +5949,7 @@
                                 <p class="step-explanation">Same process, keep the negative sign</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 4:</div>
                             <div class="step-content">
@@ -5643,7 +5961,7 @@
                                 <p class="step-explanation">x⁰ = 1, so we just get the coefficient</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 5:</div>
                             <div class="step-content">
@@ -5654,7 +5972,7 @@
                                 <p class="step-explanation">Constants disappear when we take the derivative</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 6:</div>
                             <div class="step-content">
@@ -5666,18 +5984,18 @@
                                 <p class="step-explanation">Sum the derivatives of each term</p>
                             </div>
                         </div>
-                        
+
                         <div class="final-answer">
                             <strong>Final Answer:</strong>
                             <span class="answer-highlight">f'(x) = 12x³ - 6x² + 5</span>
                         </div>
-                        
+
                         <div class="verification">
                             <strong>✓ Check:</strong>
                             <p>At x=1: f'(1) = 12(1) - 6(1) + 5 = 11. This is the slope of the tangent line at x=1.</p>
                         </div>
                     </div>
-                    
+
                     <div class="practice-problems">
                         <h4>💪 Try These:</h4>
                         <ol>
@@ -5685,7 +6003,9 @@
                             <li>Find the derivative of g(x) = 5x⁴ - x</li>
                             <li>What is d/dx(7x² + 2x + 8)?</li>
                         </ol>
-                        <button class="show-answers-btn" onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show Answers</button>
+                        <button class="show-answers-btn"
+                            onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
+                            Answers</button>
                         <div class="practice-answers" style="display: none;">
                             <p><strong>Answers:</strong></p>
                             <ol>
@@ -5717,7 +6037,8 @@
                 </div>
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Rules for finding derivatives of complex functions built from simpler ones.</p>
+                    <p><strong>What is it?</strong> Rules for finding derivatives of complex functions built from
+                        simpler ones.</p>
                 </div>
                 <div class="content-card">
                     <h3>The Rules</h3>
@@ -5759,8 +6080,10 @@
                 </div>
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> The exponential function eˣ has the remarkable property that its derivative equals itself!</p>
-                    <p><strong>Why it matters:</strong> e appears throughout nature - growth, decay, compound interest, probability.</p>
+                    <p><strong>What is it?</strong> The exponential function eˣ has the remarkable property that its
+                        derivative equals itself!</p>
+                    <p><strong>Why it matters:</strong> e appears throughout nature - growth, decay, compound interest,
+                        probability.</p>
                 </div>
                 <div class="content-card">
                     <h3>The Special Property</h3>
@@ -5776,7 +6099,8 @@
                 </div>
                 <div class="callout-box insight">
                     <div class="callout-header">💡 WHY e IS SPECIAL</div>
-                    <p>e ≈ 2.71828... is defined so that the rate of change of eˣ at x=0 equals 1. This makes it the "natural" base for exponentials in calculus!</p>
+                    <p>e ≈ 2.71828... is defined so that the rate of change of eˣ at x=0 equals 1. This makes it the
+                        "natural" base for exponentials in calculus!</p>
                 </div>
                 <div class="summary-card">
                     <h3>🎯 Key Takeaways</h3>
@@ -5798,8 +6122,10 @@
                 </div>
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Finding dy/dx when the equation isn't solved for y (like x² + y² = 25).</p>
-                    <p><strong>Why it matters:</strong> Many relationships can't be expressed as y = f(x), but we still need derivatives.</p>
+                    <p><strong>What is it?</strong> Finding dy/dx when the equation isn't solved for y (like x² + y² =
+                        25).</p>
+                    <p><strong>Why it matters:</strong> Many relationships can't be expressed as y = f(x), but we still
+                        need derivatives.</p>
                 </div>
                 <div class="content-card">
                     <h3>Method</h3>
@@ -5837,8 +6163,10 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Integration sums infinitely many infinitely small pieces. Visually, it's the area under a curve.</p>
-                    <p><strong>Why it matters:</strong> Calculates total distance from velocity, total profit from marginal profit, total probability from density functions.</p>
+                    <p><strong>What is it?</strong> Integration sums infinitely many infinitely small pieces. Visually,
+                        it's the area under a curve.</p>
+                    <p><strong>Why it matters:</strong> Calculates total distance from velocity, total profit from
+                        marginal profit, total probability from density functions.</p>
                 </div>
 
                 <div class="content-card">
@@ -5870,15 +6198,15 @@
                 <!-- WORKED EXAMPLE SECTION -->
                 <div class="content-block worked-example-section">
                     <h3>📝 Worked Example - Step by Step</h3>
-                    
+
                     <div class="example-problem">
                         <h4>Problem:</h4>
                         <p class="problem-statement">Calculate the definite integral: ∫₀³ (2x + 1) dx</p>
                     </div>
-                    
+
                     <div class="example-solution">
                         <h4>Solution:</h4>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 1:</div>
                             <div class="step-content">
@@ -5892,7 +6220,7 @@
                                 <p class="step-explanation">Use the power rule in reverse</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 2:</div>
                             <div class="step-content">
@@ -5904,7 +6232,7 @@
                                 <p class="step-explanation">Evaluate antiderivative at bounds and subtract</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 3:</div>
                             <div class="step-content">
@@ -5916,7 +6244,7 @@
                                 <p class="step-explanation">Substitute x = 3 into F(x)</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 4:</div>
                             <div class="step-content">
@@ -5928,7 +6256,7 @@
                                 <p class="step-explanation">Substitute x = 0 into F(x)</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 5:</div>
                             <div class="step-content">
@@ -5940,18 +6268,19 @@
                                 <p class="step-explanation">Final calculation</p>
                             </div>
                         </div>
-                        
+
                         <div class="final-answer">
                             <strong>Final Answer:</strong>
                             <span class="answer-highlight">12</span>
                         </div>
-                        
+
                         <div class="verification">
                             <strong>✓ Meaning:</strong>
-                            <p>The area under the curve y = 2x + 1 from x = 0 to x = 3 is 12 square units. This represents the accumulated value of the function over that interval.</p>
+                            <p>The area under the curve y = 2x + 1 from x = 0 to x = 3 is 12 square units. This
+                                represents the accumulated value of the function over that interval.</p>
                         </div>
                     </div>
-                    
+
                     <div class="practice-problems">
                         <h4>💪 Try These:</h4>
                         <ol>
@@ -5959,7 +6288,9 @@
                             <li>Find ∫₀² (3x² + 2) dx</li>
                             <li>Evaluate ∫₁³ (4x - 1) dx</li>
                         </ol>
-                        <button class="show-answers-btn" onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show Answers</button>
+                        <button class="show-answers-btn"
+                            onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
+                            Answers</button>
                         <div class="practice-answers" style="display: none;">
                             <p><strong>Answers:</strong></p>
                             <ol>
@@ -5991,8 +6322,10 @@
                 </div>
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> The most important theorem in calculus - it shows that derivatives and integrals are inverse operations!</p>
-                    <p><strong>Why it matters:</strong> Lets us compute integrals using antiderivatives instead of limits of Riemann sums.</p>
+                    <p><strong>What is it?</strong> The most important theorem in calculus - it shows that derivatives
+                        and integrals are inverse operations!</p>
+                    <p><strong>Why it matters:</strong> Lets us compute integrals using antiderivatives instead of
+                        limits of Riemann sums.</p>
                 </div>
                 <div class="content-card">
                     <h3>The Two Parts</h3>
@@ -6009,7 +6342,8 @@
                 </div>
                 <div class="callout-box insight">
                     <div class="callout-header">💡 THE BIG IDEA</div>
-                    <p>Integration and differentiation are opposite operations, like multiplication and division. This means we can evaluate integrals by finding antiderivatives!</p>
+                    <p>Integration and differentiation are opposite operations, like multiplication and division. This
+                        means we can evaluate integrals by finding antiderivatives!</p>
                 </div>
                 <div class="summary-card">
                     <h3>🎯 Key Takeaways</h3>
@@ -6031,17 +6365,20 @@
                 </div>
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> A deeper look at why the Fundamental Theorem works - the geometric intuition behind the connection.</p>
+                    <p><strong>What is it?</strong> A deeper look at why the Fundamental Theorem works - the geometric
+                        intuition behind the connection.</p>
                 </div>
                 <div class="content-card">
                     <h3>The Connection</h3>
-                    <p><strong>Area accumulation:</strong> As you move right, area under curve accumulates. The RATE of this accumulation equals the height of the curve!</p>
+                    <p><strong>Area accumulation:</strong> As you move right, area under curve accumulates. The RATE of
+                        this accumulation equals the height of the curve!</p>
                     <p>If A(x) = area from 0 to x, then A'(x) = height at x = f(x)</p>
                     <p>This is WHY derivatives and integrals are inverses!</p>
                 </div>
                 <div class="callout-box insight">
                     <div class="callout-header">💡 GEOMETRIC INTUITION</div>
-                    <p>Imagine filling a container with water. The accumulated water (integral) grows at a rate equal to the flow rate (derivative). The RATE of area accumulation equals the height!</p>
+                    <p>Imagine filling a container with water. The accumulated water (integral) grows at a rate equal to
+                        the flow rate (derivative). The RATE of area accumulation equals the height!</p>
                 </div>
                 <div class="summary-card">
                     <h3>🎯 Key Takeaways</h3>
@@ -6063,8 +6400,10 @@
                 </div>
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Taking the derivative multiple times: f'(x), f''(x), f'''(x), ...</p>
-                    <p><strong>Why it matters:</strong> Used in physics (acceleration is second derivative of position), optimization (concavity), and approximations.</p>
+                    <p><strong>What is it?</strong> Taking the derivative multiple times: f'(x), f''(x), f'''(x), ...
+                    </p>
+                    <p><strong>Why it matters:</strong> Used in physics (acceleration is second derivative of position),
+                        optimization (concavity), and approximations.</p>
                 </div>
                 <div class="content-card">
                     <h3>Notation and Meaning</h3>
@@ -6119,8 +6458,10 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Any smooth function can be approximated as an infinite polynomial centered at a point.</p>
-                    <p><strong>Why it matters:</strong> Computers can't calculate sin(x) directly, but they can calculate polynomials. Taylor series makes complex functions computable!</p>
+                    <p><strong>What is it?</strong> Any smooth function can be approximated as an infinite polynomial
+                        centered at a point.</p>
+                    <p><strong>Why it matters:</strong> Computers can't calculate sin(x) directly, but they can
+                        calculate polynomials. Taylor series makes complex functions computable!</p>
                 </div>
 
                 <div class="content-card">
@@ -6181,8 +6522,10 @@
                 </div>
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> The precise, formal definition of a limit that makes calculus mathematically rigorous.</p>
-                    <p><strong>Why it matters:</strong> Puts calculus on a solid logical foundation. Before this (1800s), calculus worked but wasn't rigorously justified.</p>
+                    <p><strong>What is it?</strong> The precise, formal definition of a limit that makes calculus
+                        mathematically rigorous.</p>
+                    <p><strong>Why it matters:</strong> Puts calculus on a solid logical foundation. Before this
+                        (1800s), calculus worked but wasn't rigorously justified.</p>
                 </div>
                 <div class="content-card">
                     <h3>The Formal Definition</h3>
@@ -6195,7 +6538,8 @@
                 </div>
                 <div class="callout-box insight">
                     <div class="callout-header">💡 IN PLAIN ENGLISH</div>
-                    <p>"We can make f(x) arbitrarily close to L (ε-close) by making x sufficiently close to a (δ-close)."</p>
+                    <p>"We can make f(x) arbitrarily close to L (ε-close) by making x sufficiently close to a
+                        (δ-close)."</p>
                     <p>ε (epsilon) = how close we want to be to L</p>
                     <p>δ (delta) = how close we need to be to a</p>
                     <p>The limit exists if, for ANY ε challenge, we can find a δ response that works.</p>
@@ -6221,7 +6565,9 @@
                 </div>
                 <div class="callout-box warning">
                     <div class="callout-header">⚠️ DON'T PANIC</div>
-                    <p>This definition looks scary but you don't need it for most calculus! It's the logical foundation, but you can use intuitive limits for practical work. Think of it like knowing a car's engine works even if you just drive it normally.</p>
+                    <p>This definition looks scary but you don't need it for most calculus! It's the logical foundation,
+                        but you can use intuitive limits for practical work. Think of it like knowing a car's engine
+                        works even if you just drive it normally.</p>
                 </div>
                 <div class="summary-card">
                     <h3>🎯 Key Takeaways</h3>
@@ -6246,14 +6592,18 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Simple linear regression models the relationship between a dependent variable (y) and an independent variable (x) using a straight line.</p>
-                    <p><strong>Why it matters:</strong> Foundation for predictive modeling. Used everywhere from business forecasting to scientific research.</p>
-                    <p><strong>When to use it:</strong> When you have two continuous variables and want to predict one from the other.</p>
+                    <p><strong>What is it?</strong> Simple linear regression models the relationship between a dependent
+                        variable (y) and an independent variable (x) using a straight line.</p>
+                    <p><strong>Why it matters:</strong> Foundation for predictive modeling. Used everywhere from
+                        business forecasting to scientific research.</p>
+                    <p><strong>When to use it:</strong> When you have two continuous variables and want to predict one
+                        from the other.</p>
                 </div>
 
                 <div class="callout-box insight">
                     <div class="callout-header">💡 REAL-WORLD ANALOGY</div>
-                    <p>Like drawing the best-fit line through scattered points on a graph. Imagine plotting house prices vs square footage - regression finds the line that best describes this relationship!</p>
+                    <p>Like drawing the best-fit line through scattered points on a graph. Imagine plotting house prices
+                        vs square footage - regression finds the line that best describes this relationship!</p>
                 </div>
 
                 <div class="content-card">
@@ -6300,8 +6650,10 @@
 
                 <div class="callout-box warning">
                     <div class="callout-header">⚠️ COMMON MISTAKES</div>
-                    <p><strong>Assuming correlation = causation:</strong> Just because two variables are related doesn't mean one causes the other!</p>
-                    <p><strong>Extrapolating beyond data:</strong> Don't predict values far outside your training data range.</p>
+                    <p><strong>Assuming correlation = causation:</strong> Just because two variables are related doesn't
+                        mean one causes the other!</p>
+                    <p><strong>Extrapolating beyond data:</strong> Don't predict values far outside your training data
+                        range.</p>
                     <p><strong>Ignoring outliers:</strong> Extreme values can heavily distort your regression line.</p>
                 </div>
 
@@ -6316,15 +6668,16 @@
                 <!-- WORKED EXAMPLE SECTION -->
                 <div class="content-block worked-example-section">
                     <h3>📝 Worked Example - Step by Step</h3>
-                    
+
                     <div class="example-problem">
                         <h4>Problem:</h4>
-                        <p class="problem-statement">Find the best-fit line for the data points: (1,2), (2,4), (3,5), (4,7), (5,8)</p>
+                        <p class="problem-statement">Find the best-fit line for the data points: (1,2), (2,4), (3,5),
+                            (4,7), (5,8)</p>
                     </div>
-                    
+
                     <div class="example-solution">
                         <h4>Solution:</h4>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 1:</div>
                             <div class="step-content">
@@ -6336,7 +6689,7 @@
                                 <p class="step-explanation">Find the average of x values and y values</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 2:</div>
                             <div class="step-content">
@@ -6348,7 +6701,7 @@
                                 <p class="step-explanation">This is the least squares formula for slope</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 3:</div>
                             <div class="step-content">
@@ -6365,7 +6718,7 @@
                                 <p class="step-explanation">Organize all calculations in a table</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 4:</div>
                             <div class="step-content">
@@ -6376,7 +6729,7 @@
                                 <p class="step-explanation">For every 1 unit increase in x, y increases by 1.5</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 5:</div>
                             <div class="step-content">
@@ -6389,7 +6742,7 @@
                                 <p class="step-explanation">Where the line crosses the y-axis</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 6:</div>
                             <div class="step-content">
@@ -6401,19 +6754,19 @@
                                 <p class="step-explanation">This is our best-fit line!</p>
                             </div>
                         </div>
-                        
+
                         <div class="final-answer">
                             <strong>Final Answer:</strong>
                             <span class="answer-highlight">y = 0.7 + 1.5x</span>
                         </div>
-                        
+
                         <div class="verification">
                             <strong>✓ Check:</strong>
                             <p>When x=3: y = 0.7 + 1.5(3) = 5.2 ✓ (matches our mean!)</p>
                             <p>When x=1: y = 0.7 + 1.5(1) = 2.2 (close to actual 2)</p>
                         </div>
                     </div>
-                    
+
                     <div class="practice-problems">
                         <h4>💪 Try These:</h4>
                         <ol>
@@ -6421,7 +6774,9 @@
                             <li>Using y=2+3x, predict y when x=6</li>
                             <li>If b=2 and the line passes through (3,10), find a</li>
                         </ol>
-                        <button class="show-answers-btn" onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show Answers</button>
+                        <button class="show-answers-btn"
+                            onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
+                            Answers</button>
                         <div class="practice-answers" style="display: none;">
                             <p><strong>Answers:</strong></p>
                             <ol>
@@ -6454,13 +6809,16 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Multiple linear regression extends simple regression to handle multiple independent variables simultaneously.</p>
-                    <p><strong>Why it matters:</strong> Real-world outcomes usually depend on multiple factors, not just one!</p>
+                    <p><strong>What is it?</strong> Multiple linear regression extends simple regression to handle
+                        multiple independent variables simultaneously.</p>
+                    <p><strong>Why it matters:</strong> Real-world outcomes usually depend on multiple factors, not just
+                        one!</p>
                 </div>
 
                 <div class="callout-box insight">
                     <div class="callout-header">💡 REAL-WORLD EXAMPLE</div>
-                    <p>Like having multiple factors influencing an outcome - house price depends on size, location, age, bedrooms, etc. Multiple regression handles all of these together!</p>
+                    <p>Like having multiple factors influencing an outcome - house price depends on size, location, age,
+                        bedrooms, etc. Multiple regression handles all of these together!</p>
                 </div>
 
                 <div class="content-card">
@@ -6481,7 +6839,8 @@
                     <h3>Applications</h3>
                     <ul class="use-case-list">
                         <li><strong>Housing Prices:</strong> Predict from size, location, age, bedrooms, bathrooms</li>
-                        <li><strong>Student Performance:</strong> Model grades from study hours, attendance, prior GPA</li>
+                        <li><strong>Student Performance:</strong> Model grades from study hours, attendance, prior GPA
+                        </li>
                         <li><strong>Business Revenue:</strong> Forecast from marketing, seasonality, competition</li>
                     </ul>
                 </div>
@@ -6521,13 +6880,16 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Logistic regression predicts binary outcomes (0/1, Yes/No, Pass/Fail) using a sigmoid function.</p>
-                    <p><strong>Why it matters:</strong> Essential for classification problems - spam detection, disease diagnosis, customer churn.</p>
+                    <p><strong>What is it?</strong> Logistic regression predicts binary outcomes (0/1, Yes/No,
+                        Pass/Fail) using a sigmoid function.</p>
+                    <p><strong>Why it matters:</strong> Essential for classification problems - spam detection, disease
+                        diagnosis, customer churn.</p>
                 </div>
 
                 <div class="callout-box insight">
                     <div class="callout-header">💡 ANALOGY</div>
-                    <p>Like a switch - given inputs, predict ON/OFF, YES/NO, PASS/FAIL. Unlike linear regression (predicts any number), logistic gives probability between 0 and 1!</p>
+                    <p>Like a switch - given inputs, predict ON/OFF, YES/NO, PASS/FAIL. Unlike linear regression
+                        (predicts any number), logistic gives probability between 0 and 1!</p>
                 </div>
 
                 <div class="content-card">
@@ -6564,7 +6926,8 @@
 
                 <div class="callout-box warning">
                     <div class="callout-header">⚠️ COMMON MISTAKES</div>
-                    <p><strong>Interpreting output as continuous:</strong> Output is probability, not direct prediction</p>
+                    <p><strong>Interpreting output as continuous:</strong> Output is probability, not direct prediction
+                    </p>
                     <p><strong>Not scaling features:</strong> Can affect convergence</p>
                     <p><strong>Ignoring class imbalance:</strong> When one class dominates, model becomes biased</p>
                 </div>
@@ -6597,13 +6960,16 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> ANOVA tests whether the means of three or more groups are significantly different.</p>
-                    <p><strong>Why it matters:</strong> More powerful than multiple t-tests. Avoids inflated Type I error rate.</p>
+                    <p><strong>What is it?</strong> ANOVA tests whether the means of three or more groups are
+                        significantly different.</p>
+                    <p><strong>Why it matters:</strong> More powerful than multiple t-tests. Avoids inflated Type I
+                        error rate.</p>
                 </div>
 
                 <div class="callout-box insight">
                     <div class="callout-header">💡 EXAMPLE</div>
-                    <p>Testing if different teaching methods (A, B, C) produce different average test scores. Instead of 3 separate t-tests, ANOVA does it all at once!</p>
+                    <p>Testing if different teaching methods (A, B, C) produce different average test scores. Instead of
+                        3 separate t-tests, ANOVA does it all at once!</p>
                 </div>
 
                 <div class="content-card">
@@ -6678,13 +7044,16 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Polynomial regression fits curved relationships by including higher-order terms (x², x³, etc.).</p>
-                    <p><strong>Why it matters:</strong> Many relationships aren't linear - think projectile motion, growth curves, economic trends.</p>
+                    <p><strong>What is it?</strong> Polynomial regression fits curved relationships by including
+                        higher-order terms (x², x³, etc.).</p>
+                    <p><strong>Why it matters:</strong> Many relationships aren't linear - think projectile motion,
+                        growth curves, economic trends.</p>
                 </div>
 
                 <div class="callout-box insight">
                     <div class="callout-header">💡 ANALOGY</div>
-                    <p>When relationship is curved, not straight - like throwing a ball (parabola) or bacterial growth (exponential). Polynomial regression captures these curves!</p>
+                    <p>When relationship is curved, not straight - like throwing a ball (parabola) or bacterial growth
+                        (exponential). Polynomial regression captures these curves!</p>
                 </div>
 
                 <div class="content-card">
@@ -6753,7 +7122,8 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> R² (coefficient of determination) measures the proportion of variance explained by the model.</p>
+                    <p><strong>What is it?</strong> R² (coefficient of determination) measures the proportion of
+                        variance explained by the model.</p>
                     <p><strong>Why it matters:</strong> Tells you if your model is actually useful or just garbage!</p>
                 </div>
 
@@ -6805,7 +7175,8 @@
                 <div class="callout-box warning">
                     <div class="callout-header">⚠️ COMMON MISTAKES</div>
                     <p><strong>R² always increases with more variables:</strong> Use Adjusted R² instead</p>
-                    <p><strong>High R² doesn't mean causation:</strong> Can have perfect correlation with no causal link</p>
+                    <p><strong>High R² doesn't mean causation:</strong> Can have perfect correlation with no causal link
+                    </p>
                     <p><strong>Ignoring residual plots:</strong> R² alone doesn't catch all problems</p>
                 </div>
 
@@ -6837,13 +7208,16 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> SVD decomposes any matrix into three matrices representing rotations and scaling.</p>
-                    <p><strong>Why it matters:</strong> Powers Netflix recommendations, image compression, PCA, and data science applications everywhere!</p>
+                    <p><strong>What is it?</strong> SVD decomposes any matrix into three matrices representing rotations
+                        and scaling.</p>
+                    <p><strong>Why it matters:</strong> Powers Netflix recommendations, image compression, PCA, and data
+                        science applications everywhere!</p>
                 </div>
 
                 <div class="callout-box insight">
                     <div class="callout-header">💡 ANALOGY</div>
-                    <p>Breaking down a complex transformation into simpler rotations and stretches - like decomposing a complicated dance move into: rotate, stretch, rotate again!</p>
+                    <p>Breaking down a complex transformation into simpler rotations and stretches - like decomposing a
+                        complicated dance move into: rotate, stretch, rotate again!</p>
                 </div>
 
                 <div class="content-card">
@@ -6870,7 +7244,8 @@
 
                 <div class="callout-box warning">
                     <div class="callout-header">⚠️ COMMON MISTAKES</div>
-                    <p><strong>Confusing with eigendecomposition:</strong> SVD works on any matrix, eigen only on square</p>
+                    <p><strong>Confusing with eigendecomposition:</strong> SVD works on any matrix, eigen only on square
+                    </p>
                     <p><strong>Not sorting singular values:</strong> Always ordered largest to smallest</p>
                 </div>
 
@@ -6902,13 +7277,16 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> PCA finds the most important directions (principal components) in high-dimensional data.</p>
-                    <p><strong>Why it matters:</strong> Reduce 1000 features to 10 while keeping most information. Essential for visualization and ML!</p>
+                    <p><strong>What is it?</strong> PCA finds the most important directions (principal components) in
+                        high-dimensional data.</p>
+                    <p><strong>Why it matters:</strong> Reduce 1000 features to 10 while keeping most information.
+                        Essential for visualization and ML!</p>
                 </div>
 
                 <div class="callout-box insight">
                     <div class="callout-header">💡 ANALOGY</div>
-                    <p>Finding the most important directions in high-dimensional data. Like taking a photo of a 3D object - you pick the best angle that captures the most detail!</p>
+                    <p>Finding the most important directions in high-dimensional data. Like taking a photo of a 3D
+                        object - you pick the best angle that captures the most detail!</p>
                 </div>
 
                 <div class="content-card">
@@ -6979,7 +7357,8 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Methods to factor matrices into products of simpler matrices for efficient computation.</p>
+                    <p><strong>What is it?</strong> Methods to factor matrices into products of simpler matrices for
+                        efficient computation.</p>
                     <p><strong>Why it matters:</strong> Makes solving large systems fast and numerically stable.</p>
                 </div>
 
@@ -7036,8 +7415,10 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Norms measure the "size" of vectors. Distance metrics measure how far apart vectors are.</p>
-                    <p><strong>Why it matters:</strong> Essential for regularization (L1/L2), clustering, nearest neighbors, and optimization.</p>
+                    <p><strong>What is it?</strong> Norms measure the "size" of vectors. Distance metrics measure how
+                        far apart vectors are.</p>
+                    <p><strong>Why it matters:</strong> Essential for regularization (L1/L2), clustering, nearest
+                        neighbors, and optimization.</p>
                 </div>
 
                 <div class="content-card">
@@ -7097,13 +7478,16 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Gradient descent is an iterative algorithm that finds minimum of a function by following the negative gradient.</p>
-                    <p><strong>Why it matters:</strong> Powers ALL modern machine learning! Neural networks, linear regression, everything uses gradient descent.</p>
+                    <p><strong>What is it?</strong> Gradient descent is an iterative algorithm that finds minimum of a
+                        function by following the negative gradient.</p>
+                    <p><strong>Why it matters:</strong> Powers ALL modern machine learning! Neural networks, linear
+                        regression, everything uses gradient descent.</p>
                 </div>
 
                 <div class="callout-box insight">
                     <div class="callout-header">💡 ANALOGY</div>
-                    <p>Walking downhill to find the valley - taking steps in the steepest descent direction. Learning rate = step size. Too big = overshoot, too small = slow!</p>
+                    <p>Walking downhill to find the valley - taking steps in the steepest descent direction. Learning
+                        rate = step size. Too big = overshoot, too small = slow!</p>
                 </div>
 
                 <div class="content-card">
@@ -7124,7 +7508,8 @@
                     <div class="controls">
                         <div class="slider-group">
                             <label>Learning Rate: <span id="label80">0.1</span></label>
-                            <input type="range" id="slider80" min="0.01" max="0.5" value="0.1" step="0.01" class="slider">
+                            <input type="range" id="slider80" min="0.01" max="0.5" value="0.1" step="0.01"
+                                class="slider">
                         </div>
                         <button class="btn btn-primary" id="btn80start">Start Descent</button>
                         <button class="btn btn-secondary" id="btn80reset">Reset</button>
@@ -7159,15 +7544,16 @@
                 <!-- WORKED EXAMPLE SECTION -->
                 <div class="content-block worked-example-section">
                     <h3>📝 Worked Example - Step by Step</h3>
-                    
+
                     <div class="example-problem">
                         <h4>Problem:</h4>
-                        <p class="problem-statement">Minimize f(x) = x² using gradient descent. Start at x₀ = 5, learning rate α = 0.1, run 3 iterations.</p>
+                        <p class="problem-statement">Minimize f(x) = x² using gradient descent. Start at x₀ = 5,
+                            learning rate α = 0.1, run 3 iterations.</p>
                     </div>
-                    
+
                     <div class="example-solution">
                         <h4>Solution:</h4>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 1:</div>
                             <div class="step-content">
@@ -7180,7 +7566,7 @@
                                 <p class="step-explanation">The gradient tells us which direction is uphill</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 2:</div>
                             <div class="step-content">
@@ -7194,7 +7580,7 @@
                                 <p class="step-explanation">Move against the gradient (downhill)</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 3:</div>
                             <div class="step-content">
@@ -7207,7 +7593,7 @@
                                 <p class="step-explanation">Gradient is smaller, we're getting closer to minimum</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 4:</div>
                             <div class="step-content">
@@ -7220,7 +7606,7 @@
                                 <p class="step-explanation">Still moving toward x = 0 (the true minimum)</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 5:</div>
                             <div class="step-content">
@@ -7237,19 +7623,21 @@
                                 <p class="step-explanation">If we continue, x converges to 0</p>
                             </div>
                         </div>
-                        
+
                         <div class="final-answer">
                             <strong>Final Answer:</strong>
                             <span class="answer-highlight">After 3 iterations: x₃ = 2.56, f(x₃) = 6.55</span><br>
                             <span class="answer-highlight">At convergence: x = 0, minimum value f(0) = 0</span>
                         </div>
-                        
+
                         <div class="verification">
                             <strong>✓ Check:</strong>
-                            <p>The function f(x) = x² has its minimum at x = 0. Gradient descent successfully moves us from x = 5 toward x = 0. With more iterations (or larger learning rate), we'd get even closer!</p>
+                            <p>The function f(x) = x² has its minimum at x = 0. Gradient descent successfully moves us
+                                from x = 5 toward x = 0. With more iterations (or larger learning rate), we'd get even
+                                closer!</p>
                         </div>
                     </div>
-                    
+
                     <div class="practice-problems">
                         <h4>💪 Try These:</h4>
                         <ol>
@@ -7257,7 +7645,9 @@
                             <li>Find the minimum of f(x) = (x-3)² using calculus (no GD)</li>
                             <li>If gradient is positive, which direction should we move?</li>
                         </ol>
-                        <button class="show-answers-btn" onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show Answers</button>
+                        <button class="show-answers-btn"
+                            onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
+                            Answers</button>
                         <div class="practice-answers" style="display: none;">
                             <p><strong>Answers:</strong></p>
                             <ol>
@@ -7290,7 +7680,8 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> SGD updates parameters using a small random batch instead of the entire dataset.</p>
+                    <p><strong>What is it?</strong> SGD updates parameters using a small random batch instead of the
+                        entire dataset.</p>
                     <p><strong>Why it matters:</strong> Much faster! Essential for large datasets and deep learning.</p>
                 </div>
 
@@ -7357,8 +7748,10 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Partial derivative measures rate of change with respect to ONE variable while holding others constant.</p>
-                    <p><strong>Why it matters:</strong> Machine learning has many parameters - we need partial derivatives for all of them!</p>
+                    <p><strong>What is it?</strong> Partial derivative measures rate of change with respect to ONE
+                        variable while holding others constant.</p>
+                    <p><strong>Why it matters:</strong> Machine learning has many parameters - we need partial
+                        derivatives for all of them!</p>
                 </div>
 
                 <div class="content-card">
@@ -7377,7 +7770,8 @@
 
                 <div class="content-card">
                     <h3>Geometric Interpretation</h3>
-                    <p>Imagine a 3D surface f(x,y). The partial derivative ∂f/∂x is the slope if you walk in the x-direction only. ∂f/∂y is the slope in the y-direction.</p>
+                    <p>Imagine a 3D surface f(x,y). The partial derivative ∂f/∂x is the slope if you walk in the
+                        x-direction only. ∂f/∂y is the slope in the y-direction.</p>
                 </div>
 
                 <div class="callout-box example">
@@ -7408,8 +7802,10 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> The gradient collects all partial derivatives into a vector. The Jacobian is a matrix of partial derivatives.</p>
-                    <p><strong>Why it matters:</strong> These are what gradient descent actually computes! Core of backpropagation.</p>
+                    <p><strong>What is it?</strong> The gradient collects all partial derivatives into a vector. The
+                        Jacobian is a matrix of partial derivatives.</p>
+                    <p><strong>Why it matters:</strong> These are what gradient descent actually computes! Core of
+                        backpropagation.</p>
                 </div>
 
                 <div class="content-card">
@@ -7467,8 +7863,10 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> In convex optimization, any local minimum is also a global minimum - no getting stuck!</p>
-                    <p><strong>Why it matters:</strong> Guarantees we find the best solution. Linear regression, SVM, many ML problems are convex.</p>
+                    <p><strong>What is it?</strong> In convex optimization, any local minimum is also a global minimum -
+                        no getting stuck!</p>
+                    <p><strong>Why it matters:</strong> Guarantees we find the best solution. Linear regression, SVM,
+                        many ML problems are convex.</p>
                 </div>
 
                 <div class="callout-box insight">
@@ -7528,8 +7926,10 @@
 
                 <div class="content-card">
                     <h3>Introduction</h3>
-                    <p><strong>What is it?</strong> Loss functions quantify how wrong your model's predictions are. We minimize loss during training.</p>
-                    <p><strong>Why it matters:</strong> Different problems need different loss functions. Wrong loss = bad model!</p>
+                    <p><strong>What is it?</strong> Loss functions quantify how wrong your model's predictions are. We
+                        minimize loss during training.</p>
+                    <p><strong>Why it matters:</strong> Different problems need different loss functions. Wrong loss =
+                        bad model!</p>
                 </div>
 
                 <div class="content-card">
@@ -7608,7 +8008,8 @@
                 <div class="callout-box warning">
                     <div class="callout-header">⚠️ COMMON MISTAKES</div>
                     <p><strong>Wrong loss for problem type:</strong> MSE for classification is bad!</p>
-                    <p><strong>Not understanding loss behavior:</strong> Different losses encourage different solutions</p>
+                    <p><strong>Not understanding loss behavior:</strong> Different losses encourage different solutions
+                    </p>
                     <p><strong>Ignoring regularization:</strong> Add L1/L2 penalty to prevent overfitting</p>
                 </div>
 
@@ -7634,7 +8035,8 @@
             <!-- MACHINE LEARNING ALGORITHMS START HERE -->
 
             <!-- ML-1: Linear Regression -->
-            <section class="topic-section ml-section" id="ml-topic-1" data-subject="machine-learning" style="display: none;">
+            <section class="topic-section ml-section" id="ml-topic-1" data-subject="machine-learning"
+                style="display: none;">
                 <div class="topic-header">
                     <span class="topic-number ml-regression">ML Algorithm 1</span>
                     <h2>📈 Linear Regression</h2>
@@ -7643,8 +8045,11 @@
 
                 <div class="content-card">
                     <h3>📚 What is Linear Regression?</h3>
-                    <p>Linear regression is the simplest supervised learning algorithm that models the relationship between input features and a continuous output variable using a straight line (in 2D) or hyperplane (in higher dimensions).</p>
-                    <p><strong>Analogy:</strong> Like drawing the best-fit line through scattered points on a graph to predict future values based on the trend.</p>
+                    <p>Linear regression is the simplest supervised learning algorithm that models the relationship
+                        between input features and a continuous output variable using a straight line (in 2D) or
+                        hyperplane (in higher dimensions).</p>
+                    <p><strong>Analogy:</strong> Like drawing the best-fit line through scattered points on a graph to
+                        predict future values based on the trend.</p>
                 </div>
 
                 <div class="callout-box insight">
@@ -7682,23 +8087,42 @@
 
                 <div class="worked-example-section">
                     <h3>📝 Worked Example - Predicting House Prices</h3>
-                    
+
                     <div class="example-problem">
                         <h4>Problem:</h4>
-                        <p class="problem-statement">A real estate company has data on 5 houses. Predict the price of a 2500 sq ft house.</p>
+                        <p class="problem-statement">A real estate company has data on 5 houses. Predict the price of a
+                            2500 sq ft house.</p>
                         <table class="calculation-table">
-                            <tr><th>Size (sq ft)</th><th>Price ($1000s)</th></tr>
-                            <tr><td>1000</td><td>150</td></tr>
-                            <tr><td>1500</td><td>200</td></tr>
-                            <tr><td>2000</td><td>250</td></tr>
-                            <tr><td>2500</td><td>?</td></tr>
-                            <tr><td>3000</td><td>350</td></tr>
+                            <tr>
+                                <th>Size (sq ft)</th>
+                                <th>Price ($1000s)</th>
+                            </tr>
+                            <tr>
+                                <td>1000</td>
+                                <td>150</td>
+                            </tr>
+                            <tr>
+                                <td>1500</td>
+                                <td>200</td>
+                            </tr>
+                            <tr>
+                                <td>2000</td>
+                                <td>250</td>
+                            </tr>
+                            <tr>
+                                <td>2500</td>
+                                <td>?</td>
+                            </tr>
+                            <tr>
+                                <td>3000</td>
+                                <td>350</td>
+                            </tr>
                         </table>
                     </div>
-                    
+
                     <div class="example-solution">
                         <h4>Solution:</h4>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 1:</div>
                             <div class="step-content">
@@ -7710,7 +8134,7 @@
                                 <p class="step-explanation">We exclude the house we're predicting from training</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 2:</div>
                             <div class="step-content">
@@ -7722,7 +8146,7 @@
                                 <p class="step-explanation">Find how much each point differs from the mean</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 3:</div>
                             <div class="step-content">
@@ -7737,7 +8161,7 @@
                                 <p class="step-explanation">Slope tells us price change per sq ft</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 4:</div>
                             <div class="step-content">
@@ -7750,7 +8174,7 @@
                                 <p class="step-explanation">Base price when size = 0</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 5:</div>
                             <div class="step-content">
@@ -7763,7 +8187,7 @@
                                 <p class="step-explanation">$300,000 predicted price</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 6:</div>
                             <div class="step-content">
@@ -7776,19 +8200,20 @@
                                 <p class="step-explanation">R² = 1.0 means perfect linear fit</p>
                             </div>
                         </div>
-                        
+
                         <div class="final-answer">
                             <strong>✓ Final Prediction:</strong>
                             <span class="answer-highlight">House Price = $300,000 for 2500 sq ft</span><br>
                             <span class="answer-highlight">Equation: Price = $50k + $0.10k × Size</span>
                         </div>
-                        
+
                         <div class="verification">
                             <strong>Validation:</strong>
-                            <p>The model fits perfectly (R²=1.0). Each additional sq ft adds $100 to the price. The $50k base price represents fixed costs.</p>
+                            <p>The model fits perfectly (R²=1.0). Each additional sq ft adds $100 to the price. The $50k
+                                base price represents fixed costs.</p>
                         </div>
                     </div>
-                    
+
                     <div class="practice-problems">
                         <h4>💪 Practice Problems:</h4>
                         <ol>
@@ -7796,7 +8221,9 @@
                             <li>If price is $275k, estimate the house size</li>
                             <li>What does the slope 0.10 mean in real terms?</li>
                         </ol>
-                        <button class="show-answers-btn" onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show Answers</button>
+                        <button class="show-answers-btn"
+                            onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
+                            Answers</button>
                         <div class="practice-answers" style="display: none;">
                             <p><strong>Answers:</strong></p>
                             <ol>
@@ -7815,7 +8242,8 @@
                         <li><strong>Advantages:</strong> Simple, interpretable, fast, works well with limited data</li>
                         <li><strong>Disadvantages:</strong> Only models linear relationships, sensitive to outliers</li>
                         <li><strong>Hyperparameters:</strong> None (closed-form solution)</li>
-                        <li><strong>Applications:</strong> Sales forecasting, real estate, economics, trend analysis</li>
+                        <li><strong>Applications:</strong> Sales forecasting, real estate, economics, trend analysis
+                        </li>
                     </ul>
                 </div>
 
@@ -7891,7 +8319,8 @@
             </section>
 
             <!-- ML-8: K-Nearest Neighbors -->
-            <section class="topic-section ml-section" id="ml-topic-8" data-subject="machine-learning" style="display: none;">
+            <section class="topic-section ml-section" id="ml-topic-8" data-subject="machine-learning"
+                style="display: none;">
                 <div class="topic-header">
                     <span class="topic-number ml-classification">ML Algorithm 8</span>
                     <h2>🎯 K-Nearest Neighbors (KNN)</h2>
@@ -7900,8 +8329,11 @@
 
                 <div class="content-card">
                     <h3>📚 What is KNN?</h3>
-                    <p>K-Nearest Neighbors is a simple, non-parametric algorithm that classifies data points based on how their neighbors are classified. It finds the K closest training examples and uses majority vote.</p>
-                    <p><strong>Analogy:</strong> "You are the average of the 5 people you spend the most time with." KNN says "You're similar to your closest neighbors in feature space!"</p>
+                    <p>K-Nearest Neighbors is a simple, non-parametric algorithm that classifies data points based on
+                        how their neighbors are classified. It finds the K closest training examples and uses majority
+                        vote.</p>
+                    <p><strong>Analogy:</strong> "You are the average of the 5 people you spend the most time with." KNN
+                        says "You're similar to your closest neighbors in feature space!"</p>
                 </div>
 
                 <div class="callout-box insight">
@@ -7937,23 +8369,48 @@
 
                 <div class="worked-example-section">
                     <h3>📝 Worked Example - Classifying Iris Flowers</h3>
-                    
+
                     <div class="example-problem">
                         <h4>Problem:</h4>
-                        <p class="problem-statement">Classify a new iris flower with sepal length=5.0cm, sepal width=3.5cm. Use K=3.</p>
+                        <p class="problem-statement">Classify a new iris flower with sepal length=5.0cm, sepal
+                            width=3.5cm. Use K=3.</p>
                         <table class="calculation-table">
-                            <tr><th>Sepal Length</th><th>Sepal Width</th><th>Species</th></tr>
-                            <tr><td>5.1</td><td>3.5</td><td>Setosa</td></tr>
-                            <tr><td>4.9</td><td>3.0</td><td>Setosa</td></tr>
-                            <tr><td>7.0</td><td>3.2</td><td>Versicolor</td></tr>
-                            <tr><td>6.4</td><td>3.2</td><td>Versicolor</td></tr>
-                            <tr><td>5.0</td><td>3.6</td><td>Setosa</td></tr>
+                            <tr>
+                                <th>Sepal Length</th>
+                                <th>Sepal Width</th>
+                                <th>Species</th>
+                            </tr>
+                            <tr>
+                                <td>5.1</td>
+                                <td>3.5</td>
+                                <td>Setosa</td>
+                            </tr>
+                            <tr>
+                                <td>4.9</td>
+                                <td>3.0</td>
+                                <td>Setosa</td>
+                            </tr>
+                            <tr>
+                                <td>7.0</td>
+                                <td>3.2</td>
+                                <td>Versicolor</td>
+                            </tr>
+                            <tr>
+                                <td>6.4</td>
+                                <td>3.2</td>
+                                <td>Versicolor</td>
+                            </tr>
+                            <tr>
+                                <td>5.0</td>
+                                <td>3.6</td>
+                                <td>Setosa</td>
+                            </tr>
                         </table>
                     </div>
-                    
+
                     <div class="example-solution">
                         <h4>Solution:</h4>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 1:</div>
                             <div class="step-content">
@@ -7965,7 +8422,7 @@
                                 <p class="step-explanation">The flower we want to classify</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 2:</div>
                             <div class="step-content">
@@ -7980,25 +8437,49 @@
                                 <p class="step-explanation">Euclidean distance to each training point</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 3:</div>
                             <div class="step-content">
                                 <p class="step-description">Sort by Distance</p>
                                 <div class="step-work">
                                     <table class="calculation-table">
-                                        <tr><th>Rank</th><th>Distance</th><th>Species</th></tr>
-                                        <tr style="background: rgba(100,255,218,0.2);"><td>1</td><td>0.10</td><td>Setosa</td></tr>
-                                        <tr style="background: rgba(100,255,218,0.2);"><td>2</td><td>0.10</td><td>Setosa</td></tr>
-                                        <tr style="background: rgba(100,255,218,0.2);"><td>3</td><td>0.51</td><td>Setosa</td></tr>
-                                        <tr><td>4</td><td>1.43</td><td>Versicolor</td></tr>
-                                        <tr><td>5</td><td>2.02</td><td>Versicolor</td></tr>
+                                        <tr>
+                                            <th>Rank</th>
+                                            <th>Distance</th>
+                                            <th>Species</th>
+                                        </tr>
+                                        <tr style="background: rgba(100,255,218,0.2);">
+                                            <td>1</td>
+                                            <td>0.10</td>
+                                            <td>Setosa</td>
+                                        </tr>
+                                        <tr style="background: rgba(100,255,218,0.2);">
+                                            <td>2</td>
+                                            <td>0.10</td>
+                                            <td>Setosa</td>
+                                        </tr>
+                                        <tr style="background: rgba(100,255,218,0.2);">
+                                            <td>3</td>
+                                            <td>0.51</td>
+                                            <td>Setosa</td>
+                                        </tr>
+                                        <tr>
+                                            <td>4</td>
+                                            <td>1.43</td>
+                                            <td>Versicolor</td>
+                                        </tr>
+                                        <tr>
+                                            <td>5</td>
+                                            <td>2.02</td>
+                                            <td>Versicolor</td>
+                                        </tr>
                                     </table>
                                 </div>
                                 <p class="step-explanation">Select top 3 (highlighted) for K=3</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 4:</div>
                             <div class="step-content">
@@ -8014,7 +8495,7 @@
                                 <p class="step-explanation">Majority class wins</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 5:</div>
                             <div class="step-content">
@@ -8026,18 +8507,19 @@
                                 <p class="step-explanation">All neighbors agree</p>
                             </div>
                         </div>
-                        
+
                         <div class="final-answer">
                             <strong>✓ Final Classification:</strong>
                             <span class="answer-highlight">Predicted Species = Setosa (100% confidence)</span>
                         </div>
-                        
+
                         <div class="verification">
                             <strong>Validation:</strong>
-                            <p>The new flower is extremely close to known Setosa examples (distances 0.10, 0.10, 0.51). The unanimous vote gives us high confidence in this classification.</p>
+                            <p>The new flower is extremely close to known Setosa examples (distances 0.10, 0.10, 0.51).
+                                The unanimous vote gives us high confidence in this classification.</p>
                         </div>
                     </div>
-                    
+
                     <div class="practice-problems">
                         <h4>💪 Practice Problems:</h4>
                         <ol>
@@ -8045,7 +8527,9 @@
                             <li>If distances were 0.5(Setosa), 0.6(Setosa), 0.7(Versicolor), predict class</li>
                             <li>Why is K usually chosen as odd number?</li>
                         </ol>
-                        <button class="show-answers-btn" onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show Answers</button>
+                        <button class="show-answers-btn"
+                            onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
+                            Answers</button>
                         <div class="practice-answers" style="display: none;">
                             <p><strong>Answers:</strong></p>
                             <ol>
@@ -8062,9 +8546,11 @@
                     <ul>
                         <li><strong>When to use:</strong> Non-linear decision boundaries, small-medium datasets</li>
                         <li><strong>Advantages:</strong> Simple, no training phase, works for any decision boundary</li>
-                        <li><strong>Disadvantages:</strong> Slow prediction, memory-intensive, sensitive to irrelevant features</li>
+                        <li><strong>Disadvantages:</strong> Slow prediction, memory-intensive, sensitive to irrelevant
+                            features</li>
                         <li><strong>Hyperparameters:</strong> K (number of neighbors), distance metric, weights</li>
-                        <li><strong>Applications:</strong> Recommendation systems, pattern recognition, anomaly detection</li>
+                        <li><strong>Applications:</strong> Recommendation systems, pattern recognition, anomaly
+                            detection</li>
                     </ul>
                 </div>
 
@@ -8131,7 +8617,8 @@
             </section>
 
             <!-- ML-10: Decision Trees -->
-            <section class="topic-section ml-section" id="ml-topic-10" data-subject="machine-learning" style="display: none;">
+            <section class="topic-section ml-section" id="ml-topic-10" data-subject="machine-learning"
+                style="display: none;">
                 <div class="topic-header">
                     <span class="topic-number ml-classification">ML Algorithm 10</span>
                     <h2>🌳 Decision Trees</h2>
@@ -8140,8 +8627,10 @@
 
                 <div class="content-card">
                     <h3>📚 What is a Decision Tree?</h3>
-                    <p>Decision Trees make predictions by asking a series of yes/no questions about features, creating a flowchart-like structure from root to leaves.</p>
-                    <p><strong>Analogy:</strong> Like a game of 20 Questions - each question (split) narrows down possibilities until you reach a final decision (leaf).</p>
+                    <p>Decision Trees make predictions by asking a series of yes/no questions about features, creating a
+                        flowchart-like structure from root to leaves.</p>
+                    <p><strong>Analogy:</strong> Like a game of 20 Questions - each question (split) narrows down
+                        possibilities until you reach a final decision (leaf).</p>
                 </div>
 
                 <div class="callout-box insight">
@@ -8178,24 +8667,59 @@
 
                 <div class="worked-example-section">
                     <h3>📝 Worked Example - Loan Approval Prediction</h3>
-                    
+
                     <div class="example-problem">
                         <h4>Problem:</h4>
                         <p class="problem-statement">Build decision tree for loan approval. Dataset:</p>
                         <table class="calculation-table">
-                            <tr><th>Income</th><th>Credit Score</th><th>Age</th><th>Approved?</th></tr>
-                            <tr><td>High</td><td>Good</td><td>35</td><td>Yes</td></tr>
-                            <tr><td>High</td><td>Good</td><td>40</td><td>Yes</td></tr>
-                            <tr><td>Low</td><td>Poor</td><td>25</td><td>No</td></tr>
-                            <tr><td>Low</td><td>Good</td><td>30</td><td>Yes</td></tr>
-                            <tr><td>High</td><td>Poor</td><td>45</td><td>No</td></tr>
-                            <tr><td>Low</td><td>Poor</td><td>28</td><td>No</td></tr>
+                            <tr>
+                                <th>Income</th>
+                                <th>Credit Score</th>
+                                <th>Age</th>
+                                <th>Approved?</th>
+                            </tr>
+                            <tr>
+                                <td>High</td>
+                                <td>Good</td>
+                                <td>35</td>
+                                <td>Yes</td>
+                            </tr>
+                            <tr>
+                                <td>High</td>
+                                <td>Good</td>
+                                <td>40</td>
+                                <td>Yes</td>
+                            </tr>
+                            <tr>
+                                <td>Low</td>
+                                <td>Poor</td>
+                                <td>25</td>
+                                <td>No</td>
+                            </tr>
+                            <tr>
+                                <td>Low</td>
+                                <td>Good</td>
+                                <td>30</td>
+                                <td>Yes</td>
+                            </tr>
+                            <tr>
+                                <td>High</td>
+                                <td>Poor</td>
+                                <td>45</td>
+                                <td>No</td>
+                            </tr>
+                            <tr>
+                                <td>Low</td>
+                                <td>Poor</td>
+                                <td>28</td>
+                                <td>No</td>
+                            </tr>
                         </table>
                     </div>
-                    
+
                     <div class="example-solution">
                         <h4>Solution:</h4>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 1:</div>
                             <div class="step-content">
@@ -8210,7 +8734,7 @@
                                 <p class="step-explanation">Maximum entropy = maximum disorder</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 2:</div>
                             <div class="step-content">
@@ -8225,7 +8749,7 @@
                                 <p class="step-explanation">Information gain from splitting on Credit Score</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 3:</div>
                             <div class="step-content">
@@ -8239,7 +8763,7 @@
                                 <p class="step-explanation">Income provides less information gain</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 4:</div>
                             <div class="step-content">
@@ -8252,7 +8776,7 @@
                                 <p class="step-explanation">Choose feature with highest information gain</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 5:</div>
                             <div class="step-content">
@@ -8267,7 +8791,7 @@
                                 <p class="step-explanation">Continue splitting until pure or stopping criterion</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 6:</div>
                             <div class="step-content">
@@ -8280,18 +8804,20 @@
                                 <p class="step-explanation">Traverse tree from root to leaf</p>
                             </div>
                         </div>
-                        
+
                         <div class="final-answer">
                             <strong>✓ Final Tree &amp; Prediction:</strong>
-                            <span class="answer-highlight">Best split: Credit Score → If Good: Approved, If Poor: check Income</span>
+                            <span class="answer-highlight">Best split: Credit Score → If Good: Approved, If Poor: check
+                                Income</span>
                         </div>
-                        
+
                         <div class="verification">
                             <strong>Validation:</strong>
-                            <p>The tree correctly classifies all training examples. Credit Score is the most important feature with IG=0.459.</p>
+                            <p>The tree correctly classifies all training examples. Credit Score is the most important
+                                feature with IG=0.459.</p>
                         </div>
                     </div>
-                    
+
                     <div class="practice-problems">
                         <h4>💪 Practice Problems:</h4>
                         <ol>
@@ -8299,7 +8825,9 @@
                             <li>If split gives H_left=0 and H_right=0.5, which is better split?</li>
                             <li>Why might deep trees overfit?</li>
                         </ol>
-                        <button class="show-answers-btn" onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show Answers</button>
+                        <button class="show-answers-btn"
+                            onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
+                            Answers</button>
                         <div class="practice-answers" style="display: none;">
                             <p><strong>Answers:</strong></p>
                             <ol>
@@ -8314,10 +8842,14 @@
                 <div class="content-card">
                     <h3>⚙️ Algorithm Details</h3>
                     <ul>
-                        <li><strong>When to use:</strong> Need interpretable model, non-linear relationships, mixed feature types</li>
-                        <li><strong>Advantages:</strong> Easy to understand, visualize, handles non-linear data, no scaling needed</li>
-                        <li><strong>Disadvantages:</strong> Prone to overfitting, unstable (small data changes = different tree)</li>
-                        <li><strong>Hyperparameters:</strong> max_depth, min_samples_split, criterion (gini/entropy)</li>
+                        <li><strong>When to use:</strong> Need interpretable model, non-linear relationships, mixed
+                            feature types</li>
+                        <li><strong>Advantages:</strong> Easy to understand, visualize, handles non-linear data, no
+                            scaling needed</li>
+                        <li><strong>Disadvantages:</strong> Prone to overfitting, unstable (small data changes =
+                            different tree)</li>
+                        <li><strong>Hyperparameters:</strong> max_depth, min_samples_split, criterion (gini/entropy)
+                        </li>
                         <li><strong>Applications:</strong> Credit scoring, medical diagnosis, customer segmentation</li>
                     </ul>
                 </div>
@@ -8350,7 +8882,8 @@
             </section>
 
             <!-- ML-15: K-Means Clustering -->
-            <section class="topic-section ml-section" id="ml-topic-15" data-subject="machine-learning" style="display: none;">
+            <section class="topic-section ml-section" id="ml-topic-15" data-subject="machine-learning"
+                style="display: none;">
                 <div class="topic-header">
                     <span class="topic-number ml-clustering">ML Algorithm 15</span>
                     <h2>🎯 K-Means Clustering</h2>
@@ -8359,8 +8892,10 @@
 
                 <div class="content-card">
                     <h3>📚 What is K-Means?</h3>
-                    <p>K-Means is an unsupervised learning algorithm that groups similar data points into K clusters by minimizing within-cluster variance.</p>
-                    <p><strong>Analogy:</strong> Organizing a messy room by grouping similar items together. K-Means finds natural groupings in unlabeled data.</p>
+                    <p>K-Means is an unsupervised learning algorithm that groups similar data points into K clusters by
+                        minimizing within-cluster variance.</p>
+                    <p><strong>Analogy:</strong> Organizing a messy room by grouping similar items together. K-Means
+                        finds natural groupings in unlabeled data.</p>
                 </div>
 
                 <div class="callout-box insight">
@@ -8396,24 +8931,53 @@
 
                 <div class="worked-example-section">
                     <h3>📝 Worked Example - Customer Segmentation</h3>
-                    
+
                     <div class="example-problem">
                         <h4>Problem:</h4>
-                        <p class="problem-statement">Cluster 6 customers into K=2 groups based on [Age, Income]. Data:</p>
+                        <p class="problem-statement">Cluster 6 customers into K=2 groups based on [Age, Income]. Data:
+                        </p>
                         <table class="calculation-table">
-                            <tr><th>Customer</th><th>Age</th><th>Income ($k)</th></tr>
-                            <tr><td>A</td><td>25</td><td>40</td></tr>
-                            <tr><td>B</td><td>30</td><td>50</td></tr>
-                            <tr><td>C</td><td>28</td><td>45</td></tr>
-                            <tr><td>D</td><td>55</td><td>80</td></tr>
-                            <tr><td>E</td><td>60</td><td>90</td></tr>
-                            <tr><td>F</td><td>52</td><td>75</td></tr>
+                            <tr>
+                                <th>Customer</th>
+                                <th>Age</th>
+                                <th>Income ($k)</th>
+                            </tr>
+                            <tr>
+                                <td>A</td>
+                                <td>25</td>
+                                <td>40</td>
+                            </tr>
+                            <tr>
+                                <td>B</td>
+                                <td>30</td>
+                                <td>50</td>
+                            </tr>
+                            <tr>
+                                <td>C</td>
+                                <td>28</td>
+                                <td>45</td>
+                            </tr>
+                            <tr>
+                                <td>D</td>
+                                <td>55</td>
+                                <td>80</td>
+                            </tr>
+                            <tr>
+                                <td>E</td>
+                                <td>60</td>
+                                <td>90</td>
+                            </tr>
+                            <tr>
+                                <td>F</td>
+                                <td>52</td>
+                                <td>75</td>
+                            </tr>
                         </table>
                     </div>
-                    
+
                     <div class="example-solution">
                         <h4>Solution:</h4>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 1:</div>
                             <div class="step-content">
@@ -8425,7 +8989,7 @@
                                 <p class="step-explanation">Start with random points or use K-means++</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 2:</div>
                             <div class="step-content">
@@ -8446,7 +9010,7 @@
                                 <p class="step-explanation">Each point goes to its nearest centroid</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 3:</div>
                             <div class="step-content">
@@ -8464,7 +9028,7 @@
                                 <p class="step-explanation">Centroids move to center of their clusters</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 4:</div>
                             <div class="step-content">
@@ -8477,7 +9041,7 @@
                                 <p class="step-explanation">Algorithm stops when assignments don't change</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 5:</div>
                             <div class="step-content">
@@ -8490,19 +9054,21 @@
                                 <p class="step-explanation">Measures cluster compactness (lower = better)</p>
                             </div>
                         </div>
-                        
+
                         <div class="final-answer">
                             <strong>✓ Final Clusters:</strong>
-                            <span class="answer-highlight">Cluster 1 (Young): A, B, C (avg age 28, income $45k)</span><br>
+                            <span class="answer-highlight">Cluster 1 (Young): A, B, C (avg age 28, income
+                                $45k)</span><br>
                             <span class="answer-highlight">Cluster 2 (Mature): D, E, F (avg age 56, income $82k)</span>
                         </div>
-                        
+
                         <div class="verification">
                             <strong>Validation:</strong>
-                            <p>Algorithm converged in 1 iteration. Clear separation: younger customers with lower income vs older customers with higher income.</p>
+                            <p>Algorithm converged in 1 iteration. Clear separation: younger customers with lower income
+                                vs older customers with higher income.</p>
                         </div>
                     </div>
-                    
+
                     <div class="practice-problems">
                         <h4>💪 Practice Problems:</h4>
                         <ol>
@@ -8510,7 +9076,9 @@
                             <li>How would you choose optimal K value?</li>
                             <li>What happens if we use K=3 instead?</li>
                         </ol>
-                        <button class="show-answers-btn" onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show Answers</button>
+                        <button class="show-answers-btn"
+                            onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
+                            Answers</button>
                         <div class="practice-answers" style="display: none;">
                             <p><strong>Answers:</strong></p>
                             <ol>
@@ -8525,11 +9093,15 @@
                 <div class="content-card">
                     <h3>⚙️ Algorithm Details</h3>
                     <ul>
-                        <li><strong>When to use:</strong> Unlabeled data, need to find natural groupings, spherical clusters</li>
+                        <li><strong>When to use:</strong> Unlabeled data, need to find natural groupings, spherical
+                            clusters</li>
                         <li><strong>Advantages:</strong> Simple, fast, scales well, works with large datasets</li>
-                        <li><strong>Disadvantages:</strong> Must choose K, sensitive to initialization, assumes spherical clusters</li>
-                        <li><strong>Hyperparameters:</strong> K (number of clusters), max_iter, initialization method</li>
-                        <li><strong>Applications:</strong> Customer segmentation, image compression, document clustering</li>
+                        <li><strong>Disadvantages:</strong> Must choose K, sensitive to initialization, assumes
+                            spherical clusters</li>
+                        <li><strong>Hyperparameters:</strong> K (number of clusters), max_iter, initialization method
+                        </li>
+                        <li><strong>Applications:</strong> Customer segmentation, image compression, document clustering
+                        </li>
                     </ul>
                 </div>
 
@@ -8572,7 +9144,8 @@
             </section>
 
             <!-- ML-25: Cross-Validation -->
-            <section class="topic-section ml-section" id="ml-topic-25" data-subject="machine-learning" style="display: none;">
+            <section class="topic-section ml-section" id="ml-topic-25" data-subject="machine-learning"
+                style="display: none;">
                 <div class="topic-header">
                     <span class="topic-number ml-advanced">ML Algorithm 25</span>
                     <h2>🔄 Cross-Validation (K-Fold)</h2>
@@ -8581,8 +9154,10 @@
 
                 <div class="content-card">
                     <h3>📚 What is Cross-Validation?</h3>
-                    <p>Cross-validation is a resampling technique that evaluates model performance by training and testing on different subsets of data multiple times.</p>
-                    <p><strong>Analogy:</strong> Testing a student on multiple different exams instead of just one - gives more reliable assessment of their true knowledge.</p>
+                    <p>Cross-validation is a resampling technique that evaluates model performance by training and
+                        testing on different subsets of data multiple times.</p>
+                    <p><strong>Analogy:</strong> Testing a student on multiple different exams instead of just one -
+                        gives more reliable assessment of their true knowledge.</p>
                 </div>
 
                 <div class="callout-box insight">
@@ -8615,15 +9190,17 @@
 
                 <div class="worked-example-section">
                     <h3>📝 Worked Example - 5-Fold Cross-Validation</h3>
-                    
+
                     <div class="example-problem">
                         <h4>Problem:</h4>
-                        <p class="problem-statement">Evaluate a model using 5-fold CV. Dataset has 100 samples. After running, fold accuracies are: 0.85, 0.90, 0.88, 0.87, 0.90. Calculate mean accuracy and standard error.</p>
+                        <p class="problem-statement">Evaluate a model using 5-fold CV. Dataset has 100 samples. After
+                            running, fold accuracies are: 0.85, 0.90, 0.88, 0.87, 0.90. Calculate mean accuracy and
+                            standard error.</p>
                     </div>
-                    
+
                     <div class="example-solution">
                         <h4>Solution:</h4>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 1:</div>
                             <div class="step-content">
@@ -8637,25 +9214,43 @@
                                 <p class="step-explanation">Divide data into 5 equal parts</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 2:</div>
                             <div class="step-content">
                                 <p class="step-description">Record Fold Results</p>
                                 <div class="step-work">
                                     <table class="calculation-table">
-                                        <tr><th>Fold</th><th>Accuracy</th></tr>
-                                        <tr><td>1</td><td>0.85</td></tr>
-                                        <tr><td>2</td><td>0.90</td></tr>
-                                        <tr><td>3</td><td>0.88</td></tr>
-                                        <tr><td>4</td><td>0.87</td></tr>
-                                        <tr><td>5</td><td>0.90</td></tr>
+                                        <tr>
+                                            <th>Fold</th>
+                                            <th>Accuracy</th>
+                                        </tr>
+                                        <tr>
+                                            <td>1</td>
+                                            <td>0.85</td>
+                                        </tr>
+                                        <tr>
+                                            <td>2</td>
+                                            <td>0.90</td>
+                                        </tr>
+                                        <tr>
+                                            <td>3</td>
+                                            <td>0.88</td>
+                                        </tr>
+                                        <tr>
+                                            <td>4</td>
+                                            <td>0.87</td>
+                                        </tr>
+                                        <tr>
+                                            <td>5</td>
+                                            <td>0.90</td>
+                                        </tr>
                                     </table>
                                 </div>
                                 <p class="step-explanation">Performance on each test fold</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 3:</div>
                             <div class="step-content">
@@ -8668,7 +9263,7 @@
                                 <p class="step-explanation">This is our best estimate of model performance</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 4:</div>
                             <div class="step-content">
@@ -8683,7 +9278,7 @@
                                 <p class="step-explanation">Measures variability across folds</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 5:</div>
                             <div class="step-content">
@@ -8696,7 +9291,7 @@
                                 <p class="step-explanation">Precision of our mean estimate</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 6:</div>
                             <div class="step-content">
@@ -8709,19 +9304,20 @@
                                 <p class="step-explanation">Final performance estimate with uncertainty</p>
                             </div>
                         </div>
-                        
+
                         <div class="final-answer">
                             <strong>✓ Final Result:</strong>
                             <span class="answer-highlight">5-Fold CV Accuracy = 88.0% ± 0.9%</span><br>
                             <span class="answer-highlight">95% CI: [86.2%, 89.8%]</span>
                         </div>
-                        
+
                         <div class="verification">
                             <strong>Validation:</strong>
-                            <p>Low variability (SD=0.021) indicates stable model performance. Every test fold performed similarly, suggesting the model generalizes well.</p>
+                            <p>Low variability (SD=0.021) indicates stable model performance. Every test fold performed
+                                similarly, suggesting the model generalizes well.</p>
                         </div>
                     </div>
-                    
+
                     <div class="practice-problems">
                         <h4>💪 Practice Problems:</h4>
                         <ol>
@@ -8729,7 +9325,9 @@
                             <li>3-fold CV gives: 0.80, 0.85, 0.90. Find mean.</li>
                             <li>When should you use stratified K-fold?</li>
                         </ol>
-                        <button class="show-answers-btn" onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show Answers</button>
+                        <button class="show-answers-btn"
+                            onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
+                            Answers</button>
                         <div class="practice-answers" style="display: none;">
                             <p><strong>Answers:</strong></p>
                             <ol>
@@ -8746,9 +9344,11 @@
                     <ul>
                         <li><strong>When to use:</strong> Always! Best practice for model evaluation</li>
                         <li><strong>Advantages:</strong> Uses all data, reduces variance, detects overfitting</li>
-                        <li><strong>Disadvantages:</strong> K times slower, not for time-series (use time-series CV)</li>
+                        <li><strong>Disadvantages:</strong> K times slower, not for time-series (use time-series CV)
+                        </li>
                         <li><strong>Hyperparameters:</strong> K (typically 5 or 10), stratified (yes/no)</li>
-                        <li><strong>Applications:</strong> Model selection, hyperparameter tuning, performance estimation</li>
+                        <li><strong>Applications:</strong> Model selection, hyperparameter tuning, performance
+                            estimation</li>
                     </ul>
                 </div>
 
@@ -8779,7 +9379,8 @@
             </section>
 
             <!-- ML Algorithm 2: Polynomial Regression -->
-            <section class="topic-section ml-section" id="ml-topic-2" data-subject="machine-learning" style="display: none;">
+            <section class="topic-section ml-section" id="ml-topic-2" data-subject="machine-learning"
+                style="display: none;">
                 <div class="topic-header">
                     <span class="topic-number ml-regression">ML Algorithm 2</span>
                     <h2>📈 Polynomial Regression</h2>
@@ -8787,11 +9388,14 @@
                 </div>
                 <div class="content-card">
                     <h3>📚 What is Polynomial Regression?</h3>
-                    <p>Polynomial regression extends linear regression by adding polynomial terms (x², x³, etc.) to capture non-linear, curved relationships in data.</p>
-                    <p><strong>Analogy:</strong> When a straight line won't fit your data (like trajectory of a thrown ball), use a curved line instead!</p>
-                    <p><strong>When to use:</strong> Data shows curved patterns, quadratic relationships, or non-linear trends.</p>
+                    <p>Polynomial regression extends linear regression by adding polynomial terms (x², x³, etc.) to
+                        capture non-linear, curved relationships in data.</p>
+                    <p><strong>Analogy:</strong> When a straight line won't fit your data (like trajectory of a thrown
+                        ball), use a curved line instead!</p>
+                    <p><strong>When to use:</strong> Data shows curved patterns, quadratic relationships, or non-linear
+                        trends.</p>
                 </div>
-                
+
                 <div class="content-card">
                     <h3>🧮 Mathematics Behind It</h3>
                     <div class="formula-card">
@@ -8800,7 +9404,7 @@
                         <p>Still uses linear regression, just with polynomial features!</p>
                     </div>
                 </div>
-                
+
                 <div class="content-card">
                     <h3>💻 Python Implementation</h3>
                     <div class="code-block">
@@ -8816,7 +9420,7 @@
                         print(f"Prediction: ${model.predict(X_new)[0]:.0f}")</code>
                     </div>
                 </div>
-                
+
                 <div class="summary-card">
                     <h3>🎯 Key Takeaways</h3>
                     <ul>
@@ -8830,7 +9434,8 @@
 
             <!-- ML Algorithm 3: Ridge Regression -->
             <!-- ML Algorithm 19: PCA (Additional Content) -->
-            <section class="topic-section ml-section" id="ml-topic-19" data-subject="machine-learning" style="display: none;">
+            <section class="topic-section ml-section" id="ml-topic-19" data-subject="machine-learning"
+                style="display: none;">
                 <div class="topic-header">
                     <span class="topic-number ml-reduction">ML Algorithm 19</span>
                     <h2>🎯 Principal Component Analysis (PCA)</h2>
@@ -8847,282 +9452,895 @@
             </section>
 
             <!-- ML Algorithm 20-24: Remaining Topics -->
-            <section class="topic-section ml-section" id="ml-topic-20" data-subject="machine-learning" style="display: none;">
+            <section class="topic-section ml-section" id="ml-topic-20" data-subject="machine-learning"
+                style="display: none;">
                 <div class="topic-header">
                     <span class="topic-number ml-reduction">ML Algorithm 20</span>
-                    <h2>🎨 t-SNE</h2>
+                    <h2>🎨 t-SNE (t-Distributed Stochastic Neighbor Embedding)</h2>
+                    <p class="topic-subtitle">Visualizing high-dimensional data in 2D/3D</p>
                 </div>
-                <div class="summary-card"><ul><li>Non-linear reduction for visualization (2D/3D)</li></ul></div>
-            </section>
 
-            <section class="topic-section ml-section" id="ml-topic-21" data-subject="machine-learning" style="display: none;">
-                <div class="topic-header"><span class="topic-number ml-reduction">ML Algorithm 21</span><h2>🔄 Autoencoders</h2></div>
-                <div class="summary-card"><ul><li>Neural network for unsupervised learning</li></ul></div>
-            </section>
+                <div class="content-card">
+                    <h3>📚 What is t-SNE?</h3>
+                    <p>t-SNE is a non-linear dimensionality reduction technique specifically designed for visualizing
+                        high-dimensional data. It excels at revealing clusters and patterns that PCA might miss.</p>
+                    <p><strong>Analogy:</strong> Imagine untangling a ball of Christmas lights. t-SNE carefully
+                        rearranges points so similar ones stay close, while different ones spread apart - revealing the
+                        natural groupings!</p>
+                </div>
 
-            <section class="topic-section ml-section" id="ml-topic-22" data-subject="machine-learning" style="display: none;">
-                <div class="topic-header"><span class="topic-number ml-reinforcement">ML Algorithm 22</span><h2>🎮 Q-Learning</h2></div>
-                <div class="summary-card"><ul><li>Learns optimal policy through rewards</li></ul></div>
-            </section>
+                <div class="callout-box insight">
+                    <div class="callout-header">💡 PCA vs t-SNE</div>
+                    <table class="comparison-table">
+                        <tr>
+                            <th>Aspect</th>
+                            <th>PCA</th>
+                            <th>t-SNE</th>
+                        </tr>
+                        <tr>
+                            <td>Type</td>
+                            <td>Linear</td>
+                            <td>Non-linear</td>
+                        </tr>
+                        <tr>
+                            <td>Preserves</td>
+                            <td>Global structure</td>
+                            <td>Local structure</td>
+                        </tr>
+                        <tr>
+                            <td>Speed</td>
+                            <td>Fast</td>
+                            <td>Slow</td>
+                        </tr>
+                        <tr>
+                            <td>Best for</td>
+                            <td>General reduction</td>
+                            <td>Visualization</td>
+                        </tr>
+                    </table>
+                </div>
 
-            <section class="topic-section ml-section" id="ml-topic-23" data-subject="machine-learning" style="display: none;">
-                <div class="topic-header"><span class="topic-number ml-reinforcement">ML Algorithm 23</span><h2>🧠 Deep Q-Networks</h2></div>
-                <div class="summary-card"><ul><li>Neural network approximates Q-values</li></ul></div>
-            </section>
+                <div class="content-card">
+                    <h3>🧮 Mathematics Behind It</h3>
+                    <div class="formula-card">
+                        <div class="formula-header">Step 1: Pairwise Similarities in High-D</div>
+                        <div class="formula-main">$$p_{j|i} = \frac{\exp(-||x_i - x_j||^2 / 2\sigma_i^2)}{\sum_{k \neq
+                            i} \exp(-||x_i - x_k||^2 / 2\sigma_i^2)}$$</div>
+                        <p>Probability that $x_i$ would pick $x_j$ as neighbor (Gaussian distribution)</p>
+                    </div>
+                    <div class="formula-card">
+                        <div class="formula-header">Step 2: Pairwise Similarities in Low-D</div>
+                        <div class="formula-main">$$q_{ij} = \frac{(1 + ||y_i - y_j||^2)^{-1}}{\sum_{k \neq l}(1 + ||y_k
+                            - y_l||^2)^{-1}}$$</div>
+                        <p>Uses Student's t-distribution (heavy tails) to avoid crowding problem</p>
+                    </div>
+                    <div class="formula-card">
+                        <div class="formula-header">Step 3: Minimize KL Divergence</div>
+                        <div class="formula-main">$$KL(P||Q) = \sum_{i \neq j} p_{ij} \log \frac{p_{ij}}{q_{ij}}$$</div>
+                        <p>Move low-D points to match high-D similarity structure</p>
+                    </div>
+                </div>
+
+                <div class="content-card">
+                    <h3>💻 Python Implementation</h3>
+                    <div class="code-block">
+                        <code>from sklearn.manifold import TSNE<br>
+import matplotlib.pyplot as plt<br><br>
+# Apply t-SNE<br>
+tsne = TSNE(n_components=2, perplexity=30, random_state=42)<br>
+X_embedded = tsne.fit_transform(X_high_dim)<br><br>
+# Visualize<br>
+plt.scatter(X_embedded[:, 0], X_embedded[:, 1], c=labels, cmap='viridis')<br>
+plt.title('t-SNE Visualization')<br>
+plt.show()</code>
+                    </div>
+                </div>
 
-            <section class="topic-section ml-section" id="ml-topic-24" data-subject="machine-learning" style="display: none;">
-                <div class="topic-header"><span class="topic-number ml-reinforcement">ML Algorithm 24</span><h2>🎯 Policy Gradient</h2></div>
-                <div class="summary-card"><ul><li>Optimizes policy directly</li></ul></div>
+                <div class="content-card">
+                    <h3>⚙️ Key Hyperparameter: Perplexity</h3>
+                    <ul>
+                        <li><strong>Perplexity ≈ 5-50:</strong> Balances local vs global aspects</li>
+                        <li><strong>Low perplexity:</strong> Focus on local structure (tight clusters)</li>
+                        <li><strong>High perplexity:</strong> More global view (spread out)</li>
+                        <li><strong>Rule of thumb:</strong> perplexity ≈ √n_samples</li>
+                    </ul>
+                </div>
+
+                <div class="summary-card">
+                    <h3>🎯 Key Takeaways</h3>
+                    <ul>
+                        <li>Best for visualizing clusters in high-dimensional data</li>
+                        <li>Non-linear: captures complex relationships PCA misses</li>
+                        <li>Only for visualization (can't transform new data)</li>
+                        <li>Perplexity controls local vs global balance</li>
+                        <li>Results can vary - run multiple times!</li>
+                    </ul>
+                </div>
             </section>
 
-            <!-- ML Algorithm 3: Ridge Regression -->
-            <section class="topic-section ml-section" id="ml-topic-3" data-subject="machine-learning" style="display: none;">
+            <section class="topic-section ml-section" id="ml-topic-21" data-subject="machine-learning"
+                style="display: none;">
                 <div class="topic-header">
-                    <span class="topic-number ml-regression">ML Algorithm 3</span>
-                    <h2>🎯 Ridge Regression (L2 Regularization)</h2>
-                    <p class="topic-subtitle">Preventing overfitting with L2 penalty</p>
+                    <span class="topic-number ml-reduction">ML Algorithm 21</span>
+                    <h2>🔄 Autoencoders</h2>
+                    <p class="topic-subtitle">Neural networks that learn compressed representations</p>
                 </div>
+
                 <div class="content-card">
-                    <h3>📚 What is Ridge Regression?</h3>
-                    <p>Ridge regression adds an L2 penalty term to the loss function, shrinking coefficient magnitudes to prevent overfitting.</p>
-                    <p><strong>Formula:</strong> J = MSE + α Σβᵢ²</p>
+                    <h3>📚 What is an Autoencoder?</h3>
+                    <p>An autoencoder is a neural network that learns to encode data into a compressed representation,
+                        then decode it back. It learns features without labels (unsupervised).</p>
+                    <p><strong>Analogy:</strong> Like learning to describe a picture in just 3 words, then
+                        reconstructing the picture from those words. You're forced to capture the most important
+                        features!</p>
                 </div>
-                
-                <div class="worked-example-section">
-                    <h3>📝 Worked Example</h3>
-                    <div class="example-problem">
-                        <h4>Problem:</h4>
-                        <p class="problem-statement">Compare linear vs ridge regression. Data prone to overfitting. α = 0.1</p>
+
+                <div class="callout-box insight">
+                    <div class="callout-header">💡 Architecture</div>
+                    <pre style="color: #64ffda; font-family: monospace;">
+Input (784) → Encoder → Bottleneck (32) → Decoder → Output (784)
+    ↓           ↓            ↓              ↓           ↓
+[Image]    [Compress]   [Latent Code]   [Expand]   [Reconstructed]
+                    </pre>
+                </div>
+
+                <div class="content-card">
+                    <h3>🧮 Mathematics Behind It</h3>
+                    <div class="formula-card">
+                        <div class="formula-header">Encoder Function</div>
+                        <div class="formula-main">$$z = f_\theta(x) = \sigma(Wx + b)$$</div>
+                        <p>Maps input $x$ to latent representation $z$</p>
                     </div>
-                    <div class="example-solution">
-                        <div class="solution-step">
-                            <div class="step-number">Step 1:</div>
-                            <div class="step-content">
-                                <p class="step-description">Linear Regression Cost</p>
-                                <div class="step-work"><code>J = (1/n)Σ(y - ŷ)²</code></div>
-                            </div>
-                        </div>
-                        <div class="solution-step">
-                            <div class="step-number">Step 2:</div>
-                            <div class="step-content">
-                                <p class="step-description">Ridge Cost Function</p>
-                                <div class="step-work"><code>J_ridge = (1/n)Σ(y - ŷ)² + α Σβᵢ²<br>Penalty term shrinks large coefficients</code></div>
-                            </div>
-                        </div>
-                        <div class="final-answer">
-                            <strong>✓ Result:</strong>
-                            <span class="answer-highlight">Ridge reduces overfitting by penalizing large coefficients</span>
-                        </div>
+                    <div class="formula-card">
+                        <div class="formula-header">Decoder Function</div>
+                        <div class="formula-main">$$\hat{x} = g_\phi(z) = \sigma(W'z + b')$$</div>
+                        <p>Reconstructs input from latent code</p>
                     </div>
+                    <div class="formula-card">
+                        <div class="formula-header">Loss Function (Reconstruction Error)</div>
+                        <div class="formula-main">$$L = ||x - \hat{x}||^2 = ||x - g_\phi(f_\theta(x))||^2$$</div>
+                        <p>Minimize difference between input and reconstruction</p>
+                    </div>
+                </div>
+
+                <div class="content-card">
+                    <h3>🎭 Types of Autoencoders</h3>
+                    <table class="comparison-table">
+                        <tr>
+                            <th>Type</th>
+                            <th>Description</th>
+                            <th>Use Case</th>
+                        </tr>
+                        <tr>
+                            <td>Vanilla AE</td>
+                            <td>Basic encoder-decoder</td>
+                            <td>Dimensionality reduction</td>
+                        </tr>
+                        <tr>
+                            <td>Denoising AE</td>
+                            <td>Input = noisy, output = clean</td>
+                            <td>Noise removal</td>
+                        </tr>
+                        <tr>
+                            <td>Variational AE (VAE)</td>
+                            <td>Learns probability distribution</td>
+                            <td>Generative models</td>
+                        </tr>
+                        <tr>
+                            <td>Sparse AE</td>
+                            <td>Adds sparsity constraint</td>
+                            <td>Feature learning</td>
+                        </tr>
+                    </table>
                 </div>
-                
+
                 <div class="content-card">
                     <h3>💻 Python Implementation</h3>
                     <div class="code-block">
-                        <code>from sklearn.linear_model import Ridge<br><br>
-                        model = Ridge(alpha=0.1)<br>
-                        model.fit(X_train, y_train)<br>
-                        predictions = model.predict(X_test)</code>
+                        <code>from tensorflow.keras import Model, layers<br><br>
+# Encoder<br>
+input_img = layers.Input(shape=(784,))<br>
+encoded = layers.Dense(128, activation='relu')(input_img)<br>
+encoded = layers.Dense(32, activation='relu')(encoded)  # Bottleneck<br><br>
+# Decoder<br>
+decoded = layers.Dense(128, activation='relu')(encoded)<br>
+decoded = layers.Dense(784, activation='sigmoid')(decoded)<br><br>
+# Full autoencoder<br>
+autoencoder = Model(input_img, decoded)<br>
+autoencoder.compile(optimizer='adam', loss='mse')<br><br>
+# Train (X_train as both input and target!)<br>
+autoencoder.fit(X_train, X_train, epochs=50, batch_size=256)</code>
                     </div>
                 </div>
-                
+
                 <div class="summary-card">
                     <h3>🎯 Key Takeaways</h3>
                     <ul>
-                        <li>L2 penalty shrinks coefficients</li>
-                        <li>Reduces overfitting, handles multicollinearity</li>
-                        <li>Hyperparameter α controls regularization strength</li>
-                        <li>Never shrinks coefficients to exactly zero</li>
+                        <li>Unsupervised: learns to compress & reconstruct data</li>
+                        <li>Bottleneck forces learning of essential features</li>
+                        <li>Loss = reconstruction error: $||x - \hat{x}||^2$</li>
+                        <li>Applications: dimensionality reduction, denoising, anomaly detection</li>
+                        <li>VAE variant enables generation of new samples</li>
                     </ul>
                 </div>
             </section>
 
-            <!-- ML Algorithm 4: Lasso Regression -->
-            <section class="topic-section ml-section" id="ml-topic-4" data-subject="machine-learning" style="display: none;">
+            <section class="topic-section ml-section" id="ml-topic-22" data-subject="machine-learning"
+                style="display: none;">
                 <div class="topic-header">
-                    <span class="topic-number ml-regression">ML Algorithm 4</span>
-                    <h2>🎯 Lasso Regression (L1 Regularization)</h2>
-                    <p class="topic-subtitle">Feature selection through L1 penalty</p>
+                    <span class="topic-number ml-reinforcement">ML Algorithm 22</span>
+                    <h2>🎮 Q-Learning</h2>
+                    <p class="topic-subtitle">Learning optimal actions through trial and error</p>
                 </div>
+
                 <div class="content-card">
-                    <h3>📚 What is Lasso?</h3>
-                    <p>Lasso adds L1 penalty: J = MSE + α Σ|βᵢ|. Can shrink coefficients to exactly zero, performing automatic feature selection.</p>
+                    <h3>📚 What is Q-Learning?</h3>
+                    <p>Q-Learning is a model-free reinforcement learning algorithm that learns the value of actions in
+                        states. The agent learns a Q-table that tells it which action gives the best reward in each
+                        situation.</p>
+                    <p><strong>Analogy:</strong> Like a mouse learning a maze - it tries different paths, remembers
+                        which ones lead to cheese (reward), and eventually learns the optimal route without any map!</p>
                 </div>
-                
-                <div class="worked-example-section">
-                    <h3>📝 Worked Example - Feature Selection</h3>
-                    <div class="example-problem">
-                        <h4>Problem:</h4>
-                        <p class="problem-statement">5 features, but only 2 are relevant. Use Lasso with α = 0.5</p>
-                    </div>
-                    <div class="example-solution">
-                        <div class="solution-step">
-                            <div class="step-number">Step 1:</div>
-                            <div class="step-content">
-                                <p class="step-description">Linear Regression (No Penalty)</p>
-                                <div class="step-work"><code>All coefficients non-zero: [3.2, 0.5, 5.1, 0.3, 0.1]</code></div>
-                            </div>
+
+                <div class="callout-box insight">
+                    <div class="callout-header">💡 Key Concepts</div>
+                    <ul>
+                        <li><strong>State (s):</strong> Current situation (where you are)</li>
+                        <li><strong>Action (a):</strong> What you can do (move left, right, etc.)</li>
+                        <li><strong>Reward (r):</strong> Feedback from environment (+1, -1, etc.)</li>
+                        <li><strong>Q-value:</strong> Expected future reward for action in state</li>
+                        <li><strong>Policy:</strong> Strategy for choosing actions</li>
+                    </ul>
+                </div>
+
+                <div class="content-card">
+                    <h3>🧮 Mathematics Behind It</h3>
+                    <div class="formula-card">
+                        <div class="formula-header">Q-Learning Update Rule (Bellman Equation)</div>
+                        <div class="formula-main">$$Q(s,a) \leftarrow Q(s,a) + \alpha \left[ r + \gamma \max_{a'}
+                            Q(s',a') - Q(s,a) \right]$$</div>
+                        <p>Where:</p>
+                        <ul>
+                            <li>$\alpha$ = learning rate (0 to 1) - how much to update</li>
+                            <li>$\gamma$ = discount factor (0 to 1) - importance of future rewards</li>
+                            <li>$r$ = immediate reward received</li>
+                            <li>$s'$ = next state after taking action</li>
+                            <li>$\max_{a'} Q(s',a')$ = best possible future value</li>
+                        </ul>
+                    </div>
+                    <div class="formula-card">
+                        <div class="formula-header">ε-Greedy Policy</div>
+                        <div class="formula-main">$$a = \begin{cases} \text{random action} & \text{with probability }
+                            \epsilon \\ \arg\max_a Q(s,a) & \text{with probability } 1-\epsilon \end{cases}$$</div>
+                        <p>Balances exploration (trying new things) vs exploitation (using known best actions)</p>
+                    </div>
+                </div>
+
+                <div class="worked-example-section">
+                    <h3>📝 Worked Example - Simple Grid World</h3>
+                    <div class="example-problem">
+                        <h4>Problem:</h4>
+                        <p class="problem-statement">A robot in a 2x2 grid must reach the goal (bottom-right). Reward:
+                            +10 at goal, -1 per step. γ=0.9, α=0.5</p>
+                        <pre>
+┌───┬───┐
+│ S │   │  S = Start
+├───┼───┤  G = Goal (+10)
+│   │ G │
+└───┴───┘</pre>
+                    </div>
+                    <div class="example-solution">
+                        <div class="solution-step">
+                            <div class="step-number">Step 1:</div>
+                            <div class="step-content">
+                                <p class="step-description">Initialize Q-table to zeros</p>
+                                <div class="step-work">
+                                    <code>Q-table: All Q(s,a) = 0 initially</code>
+                                </div>
+                            </div>
                         </div>
                         <div class="solution-step">
                             <div class="step-number">Step 2:</div>
                             <div class="step-content">
-                                <p class="step-description">Apply Lasso Penalty</p>
-                                <div class="step-work"><code>J = MSE + 0.5 Σ|βᵢ|<br>Small coefficients penalized heavily</code></div>
+                                <p class="step-description">Episode 1: Robot takes action "Down" from S</p>
+                                <div class="step-work">
+                                    <code>Reward = -1, Next state can reach G</code><br>
+                                    <code>Q(S,Down) = 0 + 0.5[−1 + 0.9×max(Q) − 0]</code><br>
+                                    <code>Q(S,Down) = 0.5 × (−1 + 0) = −0.5</code>
+                                </div>
                             </div>
                         </div>
                         <div class="solution-step">
                             <div class="step-number">Step 3:</div>
                             <div class="step-content">
-                                <p class="step-description">Lasso Result</p>
-                                <div class="step-work"><code>Coefficients: [3.1, 0, 5.0, 0, 0]<br>Features 2, 4, 5 eliminated!</code></div>
+                                <p class="step-description">From middle-left, take "Right" to reach Goal</p>
+                                <div class="step-work">
+                                    <code>Reward = +10 (Goal!)</code><br>
+                                    <code>Q(middle,Right) = 0 + 0.5[10 + 0.9×0 − 0]</code><br>
+                                    <code>Q(middle,Right) = 5.0</code>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="solution-step">
+                            <div class="step-number">Step 4:</div>
+                            <div class="step-content">
+                                <p class="step-description">Episode 2: Values propagate backward</p>
+                                <div class="step-work">
+                                    <code>Q(S,Down) = −0.5 + 0.5[−1 + 0.9×5.0 − (−0.5)]</code><br>
+                                    <code>Q(S,Down) = −0.5 + 0.5[−1 + 4.5 + 0.5] = 1.5</code>
+                                </div>
+                                <p class="step-explanation">Robot learns: Going Down is good (leads to goal)</p>
                             </div>
                         </div>
                         <div class="final-answer">
                             <strong>✓ Result:</strong>
-                            <span class="answer-highlight">Lasso selected 2 important features, set others to zero</span>
+                            <span class="answer-highlight">After many episodes, Q-table converges to optimal policy:
+                                S→Down→Right→Goal</span>
                         </div>
                     </div>
                 </div>
-                
+
                 <div class="content-card">
                     <h3>💻 Python Implementation</h3>
                     <div class="code-block">
-                        <code>from sklearn.linear_model import Lasso<br><br>
-                        model = Lasso(alpha=0.5)<br>
-                        model.fit(X_train, y_train)<br>
-                        print(f"Non-zero features: {np.sum(model.coef_ != 0)}")</code>
+                        <code>import numpy as np<br><br>
+# Initialize Q-table<br>
+Q = np.zeros((n_states, n_actions))<br>
+alpha, gamma, epsilon = 0.1, 0.99, 0.1<br><br>
+for episode in range(1000):<br>
+&nbsp;&nbsp;&nbsp;&nbsp;state = env.reset()<br>
+&nbsp;&nbsp;&nbsp;&nbsp;done = False<br>
+&nbsp;&nbsp;&nbsp;&nbsp;<br>
+&nbsp;&nbsp;&nbsp;&nbsp;while not done:<br>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;# ε-greedy action selection<br>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if np.random.random() < epsilon:<br>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action = np.random.randint(n_actions)<br>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else:<br>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action = np.argmax(Q[state])<br>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;next_state, reward, done = env.step(action)<br>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;# Q-Learning update<br>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Q[state, action] += alpha * (<br>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;reward + gamma * np.max(Q[next_state]) - Q[state, action]<br>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;)<br>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state = next_state</code>
                     </div>
                 </div>
-                
+
+                <div class="content-card">
+                    <h3>⚙️ Hyperparameters</h3>
+                    <table class="comparison-table">
+                        <tr>
+                            <th>Parameter</th>
+                            <th>Typical Range</th>
+                            <th>Effect</th>
+                        </tr>
+                        <tr>
+                            <td>α (learning rate)</td>
+                            <td>0.01 - 0.5</td>
+                            <td>Higher = faster learning but unstable</td>
+                        </tr>
+                        <tr>
+                            <td>γ (discount)</td>
+                            <td>0.9 - 0.99</td>
+                            <td>Higher = values future rewards more</td>
+                        </tr>
+                        <tr>
+                            <td>ε (exploration)</td>
+                            <td>0.1 - 0.3</td>
+                            <td>Higher = more random exploration</td>
+                        </tr>
+                    </table>
+                </div>
+
                 <div class="summary-card">
                     <h3>🎯 Key Takeaways</h3>
                     <ul>
-                        <li>L1 penalty creates sparse models (many zeros)</li>
-                        <li>Automatic feature selection</li>
-                        <li>Use when you suspect only few features matter</li>
-                        <li>Produces interpretable models with fewer features</li>
+                        <li>Q-Learning learns optimal actions without knowing environment dynamics</li>
+                        <li>Uses Bellman equation: $Q(s,a) \leftarrow Q(s,a) + \alpha[r + \gamma \max Q(s',a') -
+                            Q(s,a)]$</li>
+                        <li>ε-greedy balances exploration vs exploitation</li>
+                        <li>Converges to optimal policy with enough episodes</li>
+                        <li>Foundation for Deep Q-Networks (DQN)</li>
                     </ul>
                 </div>
             </section>
 
-            <!-- ML Algorithm 5-7: Elastic Net, SVR, Logistic Regression -->
-            <section class="topic-section ml-section" id="ml-topic-5" data-subject="machine-learning" style="display: none;">
+            <section class="topic-section ml-section" id="ml-topic-23" data-subject="machine-learning"
+                style="display: none;">
                 <div class="topic-header">
-                    <span class="topic-number ml-regression">ML Algorithm 5</span>
-                    <h2>⚖️ Elastic Net</h2>
-                    <p class="topic-subtitle">Combining L1 and L2 penalties</p>
+                    <span class="topic-number ml-reinforcement">ML Algorithm 23</span>
+                    <h2>🧠 Deep Q-Networks (DQN)</h2>
+                    <p class="topic-subtitle">Combining deep learning with Q-Learning for complex environments</p>
                 </div>
+
                 <div class="content-card">
-                    <h3>📚 What is Elastic Net?</h3>
-                    <p>Combines L1 and L2: J = MSE + α₁Σ|βᵢ| + α₂Σβᵢ². Best of both Ridge and Lasso.</p>
+                    <h3>📚 What is DQN?</h3>
+                    <p>Deep Q-Networks use a neural network to approximate Q-values instead of a table. This enables
+                        learning in environments with huge or continuous state spaces where tables are impractical.</p>
+                    <p><strong>Breakthrough:</strong> DeepMind used DQN to play Atari games at superhuman levels
+                        directly from pixels!</p>
+                </div>
+
+                <div class="callout-box insight">
+                    <div class="callout-header">💡 Q-Table vs DQN</div>
+                    <table class="comparison-table">
+                        <tr>
+                            <th>Aspect</th>
+                            <th>Q-Table</th>
+                            <th>DQN</th>
+                        </tr>
+                        <tr>
+                            <td>State space</td>
+                            <td>Small, discrete</td>
+                            <td>Large, continuous</td>
+                        </tr>
+                        <tr>
+                            <td>Memory</td>
+                            <td>O(states × actions)</td>
+                            <td>Fixed (network params)</td>
+                        </tr>
+                        <tr>
+                            <td>Generalization</td>
+                            <td>None</td>
+                            <td>To similar states</td>
+                        </tr>
+                        <tr>
+                            <td>Training</td>
+                            <td>Fast, stable</td>
+                            <td>Slower, needs tricks</td>
+                        </tr>
+                    </table>
                 </div>
+
                 <div class="content-card">
-                    <h3>💻 Python Implementation</h3>
-                    <div class="code-block"><code>from sklearn.linear_model import ElasticNet<br>model = ElasticNet(alpha=0.1, l1_ratio=0.5)<br>model.fit(X, y)</code></div>
+                    <h3>🧮 Key Innovations</h3>
+                    <div class="formula-card">
+                        <div class="formula-header">Neural Network Q-Approximation</div>
+                        <div class="formula-main">$$Q(s, a; \theta) \approx Q^*(s, a)$$</div>
+                        <p>Neural network with weights $\theta$ approximates optimal Q-function</p>
+                    </div>
+                    <div class="formula-card">
+                        <div class="formula-header">DQN Loss Function</div>
+                        <div class="formula-main">$$L(\theta) = \mathbb{E}\left[(r + \gamma \max_{a'} Q(s', a';
+                            \theta^-) - Q(s, a; \theta))^2\right]$$</div>
+                        <p>$\theta^-$ = target network parameters (updated slowly for stability)</p>
+                    </div>
                 </div>
-                <div class="summary-card">
-                    <h3>🎯 Key Takeaways</h3>
+
+                <div class="content-card">
+                    <h3>🔑 Key Techniques</h3>
                     <ul>
-                        <li>Combination of Ridge (L2) and Lasso (L1)</li>
-                        <li>Two hyperparameters: alpha and l1_ratio</li>
-                        <li>Often performs better than either alone</li>
-                        <li>Good for correlated features</li>
+                        <li><strong>Experience Replay:</strong> Store transitions in buffer, sample randomly to break
+                            correlation</li>
+                        <li><strong>Target Network:</strong> Separate network for computing targets, updated
+                            periodically</li>
+                        <li><strong>Frame Stacking:</strong> Stack 4 frames to capture motion (for Atari)</li>
+                        <li><strong>Reward Clipping:</strong> Clip rewards to [-1, 1] for stability</li>
                     </ul>
                 </div>
-            </section>
 
-            <section class="topic-section ml-section" id="ml-topic-6" data-subject="machine-learning" style="display: none;">
-                <div class="topic-header">
-                    <span class="topic-number ml-regression">ML Algorithm 6</span>
-                    <h2>📉 Support Vector Regression (SVR)</h2>
-                    <p class="topic-subtitle">Robust regression with margin tolerance</p>
-                </div>
-                <div class="content-card">
-                    <h3>📚 What is SVR?</h3>
-                    <p>SVR finds hyperplane that fits data within margin ε. Points outside margin contribute to loss. Robust to outliers.</p>
-                </div>
                 <div class="content-card">
-                    <h3>💻 Python Implementation</h3>
-                    <div class="code-block"><code>from sklearn.svm import SVR<br>model = SVR(kernel='rbf', C=1.0, epsilon=0.1)<br>model.fit(X, y)</code></div>
+                    <h3>💻 Python Implementation (Simplified)</h3>
+                    <div class="code-block">
+                        <code>import torch.nn as nn<br><br>
+class DQN(nn.Module):<br>
+&nbsp;&nbsp;&nbsp;&nbsp;def __init__(self, state_dim, action_dim):<br>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;super().__init__()<br>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.fc = nn.Sequential(<br>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nn.Linear(state_dim, 128),<br>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nn.ReLU(),<br>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nn.Linear(128, 128),<br>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nn.ReLU(),<br>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nn.Linear(128, action_dim)<br>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;)<br><br>
+&nbsp;&nbsp;&nbsp;&nbsp;def forward(self, x):<br>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return self.fc(x)  # Returns Q(s,a) for all actions</code>
+                    </div>
                 </div>
+
                 <div class="summary-card">
                     <h3>🎯 Key Takeaways</h3>
                     <ul>
-                        <li>Regression version of SVM</li>
-                        <li>Defines margin of tolerance (ε)</li>
-                        <li>Robust to outliers, works well with high dimensions</li>
-                        <li>Uses kernel trick for non-linear relationships</li>
+                        <li>DQN = Q-Learning + Deep Neural Network</li>
+                        <li>Handles large/continuous state spaces (like images)</li>
+                        <li>Experience Replay + Target Network = stability</li>
+                        <li>Used for game playing, robotics, control</li>
                     </ul>
                 </div>
             </section>
 
-            <section class="topic-section ml-section" id="ml-topic-7" data-subject="machine-learning" style="display: none;">
+            <section class="topic-section ml-section" id="ml-topic-24" data-subject="machine-learning"
+                style="display: none;">
                 <div class="topic-header">
-                    <span class="topic-number ml-classification">ML Algorithm 7</span>
-                    <h2>🎯 Logistic Regression</h2>
-                    <p class="topic-subtitle">Binary classification with sigmoid function</p>
+                    <span class="topic-number ml-reinforcement">ML Algorithm 24</span>
+                    <h2>🎯 Policy Gradient Methods</h2>
+                    <p class="topic-subtitle">Directly learning the optimal action policy</p>
                 </div>
+
                 <div class="content-card">
-                    <h3>📚 What is Logistic Regression?</h3>
-                    <p>Binary classification using sigmoid: P(y=1) = 1/(1+e^(-z)) where z = β₀+β₁x. Despite name, it's for classification!</p>
+                    <h3>📚 What is Policy Gradient?</h3>
+                    <p>Instead of learning Q-values and deriving a policy, policy gradient methods directly learn the
+                        policy: the probability of taking each action in each state.</p>
+                    <p><strong>Analogy:</strong> Q-Learning learns "how good is each action?", Policy Gradient learns
+                        "what should I do?" directly.</p>
+                </div>
+
+                <div class="callout-box insight">
+                    <div class="callout-header">💡 Value-Based vs Policy-Based</div>
+                    <table class="comparison-table">
+                        <tr>
+                            <th>Aspect</th>
+                            <th>Q-Learning/DQN</th>
+                            <th>Policy Gradient</th>
+                        </tr>
+                        <tr>
+                            <td>Learns</td>
+                            <td>Q(s,a) values</td>
+                            <td>π(a|s) probabilities</td>
+                        </tr>
+                        <tr>
+                            <td>Action space</td>
+                            <td>Discrete only</td>
+                            <td>Continuous OK!</td>
+                        </tr>
+                        <tr>
+                            <td>Policy</td>
+                            <td>Deterministic (argmax)</td>
+                            <td>Stochastic</td>
+                        </tr>
+                        <tr>
+                            <td>Variance</td>
+                            <td>Lower</td>
+                            <td>Higher</td>
+                        </tr>
+                    </table>
                 </div>
+
                 <div class="content-card">
-                    <h3>💻 Python Implementation</h3>
-                    <div class="code-block"><code>from sklearn.linear_model import LogisticRegression<br>model = LogisticRegression()<br>model.fit(X, y)<br>proba = model.predict_proba(X_new)</code></div>
+                    <h3>🧮 Mathematics Behind It</h3>
+                    <div class="formula-card">
+                        <div class="formula-header">Policy Network</div>
+                        <div class="formula-main">$$\pi_\theta(a|s) = P(A=a | S=s; \theta)$$</div>
+                        <p>Neural network outputs action probabilities given state</p>
+                    </div>
+                    <div class="formula-card">
+                        <div class="formula-header">Objective: Maximize Expected Return</div>
+                        <div class="formula-main">$$J(\theta) = \mathbb{E}_{\tau \sim \pi_\theta}[R(\tau)]$$</div>
+                        <p>Find θ that maximizes expected cumulative reward</p>
+                    </div>
+                    <div class="formula-card">
+                        <div class="formula-header">Policy Gradient Theorem (REINFORCE)</div>
+                        <div class="formula-main">$$\nabla_\theta J(\theta) = \mathbb{E}\left[\sum_t \nabla_\theta \log
+                            \pi_\theta(a_t|s_t) \cdot G_t\right]$$</div>
+                        <p>$G_t$ = return from time t. Actions with high returns get increased probability!</p>
+                    </div>
+                </div>
+
+                <div class="content-card">
+                    <h3>💻 REINFORCE Algorithm</h3>
+                    <div class="code-block">
+                        <code># Collect episode trajectory<br>
+states, actions, rewards = run_episode(policy)<br><br>
+# Calculate returns<br>
+returns = []<br>
+G = 0<br>
+for r in reversed(rewards):<br>
+&nbsp;&nbsp;&nbsp;&nbsp;G = r + gamma * G<br>
+&nbsp;&nbsp;&nbsp;&nbsp;returns.insert(0, G)<br><br>
+# Update policy<br>
+for s, a, G in zip(states, actions, returns):<br>
+&nbsp;&nbsp;&nbsp;&nbsp;log_prob = torch.log(policy(s)[a])<br>
+&nbsp;&nbsp;&nbsp;&nbsp;loss = -log_prob * G  # Negative for gradient ascent<br>
+&nbsp;&nbsp;&nbsp;&nbsp;loss.backward()<br>
+optimizer.step()</code>
+                    </div>
+                </div>
+
+                <div class="content-card">
+                    <h3>🚀 Advanced Variants</h3>
+                    <ul>
+                        <li><strong>Actor-Critic:</strong> Combine policy (actor) with value function (critic)</li>
+                        <li><strong>A2C/A3C:</strong> Advantage-based updates, parallel training</li>
+                        <li><strong>PPO:</strong> Proximal Policy Optimization - safe, stable updates</li>
+                        <li><strong>TRPO:</strong> Trust Region Policy Optimization</li>
+                    </ul>
                 </div>
+
                 <div class="summary-card">
                     <h3>🎯 Key Takeaways</h3>
                     <ul>
-                        <li>Classification algorithm despite "regression" name</li>
-                        <li>Outputs probability via sigmoid function</li>
-                        <li>Threshold at 0.5 for binary decisions</li>
-                        <li>See Data Science Topic 72 for complete details</li>
+                        <li>Directly optimizes policy: $\pi_\theta(a|s)$</li>
+                        <li>Works for continuous action spaces (robotics!)</li>
+                        <li>REINFORCE: $\nabla J = \mathbb{E}[\nabla \log \pi \cdot G]$</li>
+                        <li>Higher variance than value-based methods</li>
+                        <li>PPO is currently most popular (stable, effective)</li>
                     </ul>
                 </div>
             </section>
 
-            <section class="topic-section ml-section" id="ml-topic-9" data-subject="machine-learning" style="display: none;">
+            <!-- ML Algorithm 3: Ridge Regression -->
+            <section class="topic-section ml-section" id="ml-topic-3" data-subject="machine-learning"
+                style="display: none;">
                 <div class="topic-header">
-                    <span class="topic-number ml-classification">ML Algorithm 9</span>
-                    <h2>🎯 Support Vector Machines (SVM)</h2>
-                    <p class="topic-subtitle">Maximum margin classification</p>
+                    <span class="topic-number ml-regression">ML Algorithm 3</span>
+                    <h2>🎯 Ridge Regression (L2 Regularization)</h2>
+                    <p class="topic-subtitle">Preventing overfitting with L2 penalty</p>
                 </div>
                 <div class="content-card">
-                    <h3>📚 What is SVM?</h3>
-                    <p>SVM finds hyperplane that maximally separates classes. Uses support vectors (closest points) and kernel trick for non-linear boundaries.</p>
+                    <h3>📚 What is Ridge Regression?</h3>
+                    <p>Ridge regression adds an L2 penalty term to the loss function, shrinking coefficient magnitudes
+                        to prevent overfitting.</p>
+                    <p><strong>Formula:</strong> J = MSE + α Σβᵢ²</p>
                 </div>
-                <div class="content-card">
-                    <h3>💻 Python Implementation</h3>
-                    <div class="code-block"><code>from sklearn.svm import SVC<br>model = SVC(kernel='rbf', C=1.0, gamma='auto')<br>model.fit(X, y)</code></div>
+
+                <div class="worked-example-section">
+                    <h3>📝 Worked Example</h3>
+                    <div class="example-problem">
+                        <h4>Problem:</h4>
+                        <p class="problem-statement">Compare linear vs ridge regression. Data prone to overfitting. α =
+                            0.1</p>
+                    </div>
+                    <div class="example-solution">
+                        <div class="solution-step">
+                            <div class="step-number">Step 1:</div>
+                            <div class="step-content">
+                                <p class="step-description">Linear Regression Cost</p>
+                                <div class="step-work"><code>J = (1/n)Σ(y - ŷ)²</code></div>
+                            </div>
+                        </div>
+                        <div class="solution-step">
+                            <div class="step-number">Step 2:</div>
+                            <div class="step-content">
+                                <p class="step-description">Ridge Cost Function</p>
+                                <div class="step-work">
+                                    <code>J_ridge = (1/n)Σ(y - ŷ)² + α Σβᵢ²<br>Penalty term shrinks large coefficients</code>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="final-answer">
+                            <strong>✓ Result:</strong>
+                            <span class="answer-highlight">Ridge reduces overfitting by penalizing large
+                                coefficients</span>
+                        </div>
+                    </div>
                 </div>
+
                 <div class="content-card">
-                    <h3>📊 Interactive Visualization</h3>
-                    <canvas id="canvas-ml-9" width="700" height="400"></canvas>
+                    <h3>💻 Python Implementation</h3>
+                    <div class="code-block">
+                        <code>from sklearn.linear_model import Ridge<br><br>
+                        model = Ridge(alpha=0.1)<br>
+                        model.fit(X_train, y_train)<br>
+                        predictions = model.predict(X_test)</code>
+                    </div>
                 </div>
+
                 <div class="summary-card">
                     <h3>🎯 Key Takeaways</h3>
                     <ul>
-                        <li>Maximizes margin between classes</li>
-                        <li>Uses kernel trick for non-linear boundaries (RBF, polynomial)</li>
-                        <li>Effective in high dimensions, memory efficient</li>
-                        <li>Support vectors are the critical training examples</li>
+                        <li>L2 penalty shrinks coefficients</li>
+                        <li>Reduces overfitting, handles multicollinearity</li>
+                        <li>Hyperparameter α controls regularization strength</li>
+                        <li>Never shrinks coefficients to exactly zero</li>
                     </ul>
                 </div>
             </section>
 
-            <section class="topic-section ml-section" id="ml-topic-11" data-subject="machine-learning" style="display: none;">
+            <!-- ML Algorithm 4: Lasso Regression -->
+            <section class="topic-section ml-section" id="ml-topic-4" data-subject="machine-learning"
+                style="display: none;">
                 <div class="topic-header">
-                    <span class="topic-number ml-classification">ML Algorithm 11</span>
-                    <h2>📊 Naive Bayes</h2>
-                    <p class="topic-subtitle">Probabilistic classifier using Bayes' Theorem</p>
+                    <span class="topic-number ml-regression">ML Algorithm 4</span>
+                    <h2>🎯 Lasso Regression (L1 Regularization)</h2>
+                    <p class="topic-subtitle">Feature selection through L1 penalty</p>
+                </div>
+                <div class="content-card">
+                    <h3>📚 What is Lasso?</h3>
+                    <p>Lasso adds L1 penalty: J = MSE + α Σ|βᵢ|. Can shrink coefficients to exactly zero, performing
+                        automatic feature selection.</p>
+                </div>
+
+                <div class="worked-example-section">
+                    <h3>📝 Worked Example - Feature Selection</h3>
+                    <div class="example-problem">
+                        <h4>Problem:</h4>
+                        <p class="problem-statement">5 features, but only 2 are relevant. Use Lasso with α = 0.5</p>
+                    </div>
+                    <div class="example-solution">
+                        <div class="solution-step">
+                            <div class="step-number">Step 1:</div>
+                            <div class="step-content">
+                                <p class="step-description">Linear Regression (No Penalty)</p>
+                                <div class="step-work"><code>All coefficients non-zero: [3.2, 0.5, 5.1, 0.3, 0.1]</code>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="solution-step">
+                            <div class="step-number">Step 2:</div>
+                            <div class="step-content">
+                                <p class="step-description">Apply Lasso Penalty</p>
+                                <div class="step-work">
+                                    <code>J = MSE + 0.5 Σ|βᵢ|<br>Small coefficients penalized heavily</code>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="solution-step">
+                            <div class="step-number">Step 3:</div>
+                            <div class="step-content">
+                                <p class="step-description">Lasso Result</p>
+                                <div class="step-work">
+                                    <code>Coefficients: [3.1, 0, 5.0, 0, 0]<br>Features 2, 4, 5 eliminated!</code>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="final-answer">
+                            <strong>✓ Result:</strong>
+                            <span class="answer-highlight">Lasso selected 2 important features, set others to
+                                zero</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="content-card">
+                    <h3>💻 Python Implementation</h3>
+                    <div class="code-block">
+                        <code>from sklearn.linear_model import Lasso<br><br>
+                        model = Lasso(alpha=0.5)<br>
+                        model.fit(X_train, y_train)<br>
+                        print(f"Non-zero features: {np.sum(model.coef_ != 0)}")</code>
+                    </div>
+                </div>
+
+                <div class="summary-card">
+                    <h3>🎯 Key Takeaways</h3>
+                    <ul>
+                        <li>L1 penalty creates sparse models (many zeros)</li>
+                        <li>Automatic feature selection</li>
+                        <li>Use when you suspect only few features matter</li>
+                        <li>Produces interpretable models with fewer features</li>
+                    </ul>
+                </div>
+            </section>
+
+            <!-- ML Algorithm 5-7: Elastic Net, SVR, Logistic Regression -->
+            <section class="topic-section ml-section" id="ml-topic-5" data-subject="machine-learning"
+                style="display: none;">
+                <div class="topic-header">
+                    <span class="topic-number ml-regression">ML Algorithm 5</span>
+                    <h2>⚖️ Elastic Net</h2>
+                    <p class="topic-subtitle">Combining L1 and L2 penalties</p>
+                </div>
+                <div class="content-card">
+                    <h3>📚 What is Elastic Net?</h3>
+                    <p>Combines L1 and L2: J = MSE + α₁Σ|βᵢ| + α₂Σβᵢ². Best of both Ridge and Lasso.</p>
+                </div>
+                <div class="content-card">
+                    <h3>💻 Python Implementation</h3>
+                    <div class="code-block">
+                        <code>from sklearn.linear_model import ElasticNet<br>model = ElasticNet(alpha=0.1, l1_ratio=0.5)<br>model.fit(X, y)</code>
+                    </div>
+                </div>
+                <div class="summary-card">
+                    <h3>🎯 Key Takeaways</h3>
+                    <ul>
+                        <li>Combination of Ridge (L2) and Lasso (L1)</li>
+                        <li>Two hyperparameters: alpha and l1_ratio</li>
+                        <li>Often performs better than either alone</li>
+                        <li>Good for correlated features</li>
+                    </ul>
+                </div>
+            </section>
+
+            <section class="topic-section ml-section" id="ml-topic-6" data-subject="machine-learning"
+                style="display: none;">
+                <div class="topic-header">
+                    <span class="topic-number ml-regression">ML Algorithm 6</span>
+                    <h2>📉 Support Vector Regression (SVR)</h2>
+                    <p class="topic-subtitle">Robust regression with margin tolerance</p>
+                </div>
+                <div class="content-card">
+                    <h3>📚 What is SVR?</h3>
+                    <p>SVR finds hyperplane that fits data within margin ε. Points outside margin contribute to loss.
+                        Robust to outliers.</p>
+                </div>
+                <div class="content-card">
+                    <h3>💻 Python Implementation</h3>
+                    <div class="code-block">
+                        <code>from sklearn.svm import SVR<br>model = SVR(kernel='rbf', C=1.0, epsilon=0.1)<br>model.fit(X, y)</code>
+                    </div>
+                </div>
+                <div class="summary-card">
+                    <h3>🎯 Key Takeaways</h3>
+                    <ul>
+                        <li>Regression version of SVM</li>
+                        <li>Defines margin of tolerance (ε)</li>
+                        <li>Robust to outliers, works well with high dimensions</li>
+                        <li>Uses kernel trick for non-linear relationships</li>
+                    </ul>
+                </div>
+            </section>
+
+            <section class="topic-section ml-section" id="ml-topic-7" data-subject="machine-learning"
+                style="display: none;">
+                <div class="topic-header">
+                    <span class="topic-number ml-classification">ML Algorithm 7</span>
+                    <h2>🎯 Logistic Regression</h2>
+                    <p class="topic-subtitle">Binary classification with sigmoid function</p>
+                </div>
+                <div class="content-card">
+                    <h3>📚 What is Logistic Regression?</h3>
+                    <p>Binary classification using sigmoid: P(y=1) = 1/(1+e^(-z)) where z = β₀+β₁x. Despite name, it's
+                        for classification!</p>
+                </div>
+                <div class="content-card">
+                    <h3>💻 Python Implementation</h3>
+                    <div class="code-block">
+                        <code>from sklearn.linear_model import LogisticRegression<br>model = LogisticRegression()<br>model.fit(X, y)<br>proba = model.predict_proba(X_new)</code>
+                    </div>
+                </div>
+                <div class="summary-card">
+                    <h3>🎯 Key Takeaways</h3>
+                    <ul>
+                        <li>Classification algorithm despite "regression" name</li>
+                        <li>Outputs probability via sigmoid function</li>
+                        <li>Threshold at 0.5 for binary decisions</li>
+                        <li>See Data Science Topic 72 for complete details</li>
+                    </ul>
+                </div>
+            </section>
+
+            <section class="topic-section ml-section" id="ml-topic-9" data-subject="machine-learning"
+                style="display: none;">
+                <div class="topic-header">
+                    <span class="topic-number ml-classification">ML Algorithm 9</span>
+                    <h2>🎯 Support Vector Machines (SVM)</h2>
+                    <p class="topic-subtitle">Maximum margin classification</p>
+                </div>
+                <div class="content-card">
+                    <h3>📚 What is SVM?</h3>
+                    <p>SVM finds hyperplane that maximally separates classes. Uses support vectors (closest points) and
+                        kernel trick for non-linear boundaries.</p>
+                </div>
+                <div class="content-card">
+                    <h3>💻 Python Implementation</h3>
+                    <div class="code-block">
+                        <code>from sklearn.svm import SVC<br>model = SVC(kernel='rbf', C=1.0, gamma='auto')<br>model.fit(X, y)</code>
+                    </div>
+                </div>
+                <div class="content-card">
+                    <h3>📊 Interactive Visualization</h3>
+                    <canvas id="canvas-ml-9" width="700" height="400"></canvas>
+                </div>
+                <div class="summary-card">
+                    <h3>🎯 Key Takeaways</h3>
+                    <ul>
+                        <li>Maximizes margin between classes</li>
+                        <li>Uses kernel trick for non-linear boundaries (RBF, polynomial)</li>
+                        <li>Effective in high dimensions, memory efficient</li>
+                        <li>Support vectors are the critical training examples</li>
+                    </ul>
+                </div>
+            </section>
+
+            <section class="topic-section ml-section" id="ml-topic-11" data-subject="machine-learning"
+                style="display: none;">
+                <div class="topic-header">
+                    <span class="topic-number ml-classification">ML Algorithm 11</span>
+                    <h2>📊 Naive Bayes</h2>
+                    <p class="topic-subtitle">Probabilistic classifier using Bayes' Theorem</p>
                 </div>
                 <div class="content-card">
                     <h3>📚 What is Naive Bayes?</h3>
-                    <p>Applies Bayes' Theorem with "naive" independence assumption. P(y|x) ∝ P(y)ΠP(xᵢ|y). Extremely fast for text classification.</p>
+                    <p>Applies Bayes' Theorem with "naive" independence assumption. P(y|x) ∝ P(y)ΠP(xᵢ|y). Extremely
+                        fast for text classification.</p>
                 </div>
                 <div class="content-card">
                     <h3>💻 Python Implementation</h3>
-                    <div class="code-block"><code>from sklearn.naive_bayes import GaussianNB<br>model = GaussianNB()<br>model.fit(X, y)<br>predictions = model.predict(X_test)</code></div>
+                    <div class="code-block">
+                        <code>from sklearn.naive_bayes import GaussianNB<br>model = GaussianNB()<br>model.fit(X, y)<br>predictions = model.predict(X_test)</code>
+                    </div>
                 </div>
                 <div class="summary-card">
                     <h3>🎯 Key Takeaways</h3>
@@ -9135,7 +10353,8 @@
                 </div>
             </section>
 
-            <section class="topic-section ml-section" id="ml-topic-12" data-subject="machine-learning" style="display: none;">
+            <section class="topic-section ml-section" id="ml-topic-12" data-subject="machine-learning"
+                style="display: none;">
                 <div class="topic-header">
                     <span class="topic-number ml-classification">ML Algorithm 12</span>
                     <h2>🌲 Random Forest</h2>
@@ -9143,11 +10362,14 @@
                 </div>
                 <div class="content-card">
                     <h3>📚 What is Random Forest?</h3>
-                    <p>Ensemble of decision trees. Each tree trained on random subset (bootstrap) with random features. Final prediction by majority vote.</p>
+                    <p>Ensemble of decision trees. Each tree trained on random subset (bootstrap) with random features.
+                        Final prediction by majority vote.</p>
                 </div>
                 <div class="content-card">
                     <h3>💻 Python Implementation</h3>
-                    <div class="code-block"><code>from sklearn.ensemble import RandomForestClassifier<br>model = RandomForestClassifier(n_estimators=100, max_depth=10)<br>model.fit(X, y)<br>feature_importance = model.feature_importances_</code></div>
+                    <div class="code-block">
+                        <code>from sklearn.ensemble import RandomForestClassifier<br>model = RandomForestClassifier(n_estimators=100, max_depth=10)<br>model.fit(X, y)<br>feature_importance = model.feature_importances_</code>
+                    </div>
                 </div>
                 <div class="content-card">
                     <h3>📊 Interactive Visualization</h3>
@@ -9164,7 +10386,8 @@
                 </div>
             </section>
 
-            <section class="topic-section ml-section" id="ml-topic-13" data-subject="machine-learning" style="display: none;">
+            <section class="topic-section ml-section" id="ml-topic-13" data-subject="machine-learning"
+                style="display: none;">
                 <div class="topic-header">
                     <span class="topic-number ml-classification">ML Algorithm 13</span>
                     <h2>🚀 Gradient Boosting (XGBoost)</h2>
@@ -9172,11 +10395,14 @@
                 </div>
                 <div class="content-card">
                     <h3>📚 What is Gradient Boosting?</h3>
-                    <p>Sequentially builds trees, each correcting errors of previous. Predictions: F(x) = f₁(x) + f₂(x) + ... + f_n(x).</p>
+                    <p>Sequentially builds trees, each correcting errors of previous. Predictions: F(x) = f₁(x) + f₂(x)
+                        + ... + f_n(x).</p>
                 </div>
                 <div class="content-card">
                     <h3>💻 Python Implementation</h3>
-                    <div class="code-block"><code>from xgboost import XGBClassifier<br>model = XGBClassifier(n_estimators=100, learning_rate=0.1)<br>model.fit(X, y)</code></div>
+                    <div class="code-block">
+                        <code>from xgboost import XGBClassifier<br>model = XGBClassifier(n_estimators=100, learning_rate=0.1)<br>model.fit(X, y)</code>
+                    </div>
                 </div>
                 <div class="content-card">
                     <h3>📊 Interactive Visualization</h3>
@@ -9193,7 +10419,8 @@
                 </div>
             </section>
 
-            <section class="topic-section ml-section" id="ml-topic-14" data-subject="machine-learning" style="display: none;">
+            <section class="topic-section ml-section" id="ml-topic-14" data-subject="machine-learning"
+                style="display: none;">
                 <div class="topic-header">
                     <span class="topic-number ml-classification">ML Algorithm 14</span>
                     <h2>🧠 Neural Networks (Deep Learning Basics)</h2>
@@ -9201,11 +10428,14 @@
                 </div>
                 <div class="content-card">
                     <h3>📚 What are Neural Networks?</h3>
-                    <p>Layers of connected neurons. Each neuron: z = Σwᵢxᵢ + b, then activation function σ(z). Trained via backpropagation + gradient descent.</p>
+                    <p>Layers of connected neurons. Each neuron: z = Σwᵢxᵢ + b, then activation function σ(z). Trained
+                        via backpropagation + gradient descent.</p>
                 </div>
                 <div class="content-card">
                     <h3>💻 Python Implementation</h3>
-                    <div class="code-block"><code>from sklearn.neural_network import MLPClassifier<br>model = MLPClassifier(hidden_layer_sizes=(100, 50), activation='relu')<br>model.fit(X, y)</code></div>
+                    <div class="code-block">
+                        <code>from sklearn.neural_network import MLPClassifier<br>model = MLPClassifier(hidden_layer_sizes=(100, 50), activation='relu')<br>model.fit(X, y)</code>
+                    </div>
                 </div>
                 <div class="content-card">
                     <h3>📊 Interactive Visualization</h3>
@@ -9222,13 +10452,15 @@
                 </div>
             </section>
 
-            <section class="topic-section ml-section" id="ml-topic-16" data-subject="machine-learning" style="display: none;">
+            <section class="topic-section ml-section" id="ml-topic-16" data-subject="machine-learning"
+                style="display: none;">
                 <div class="topic-header">
                     <span class="topic-number ml-clustering">ML Algorithm 16</span>
                     <h2>🌳 Hierarchical Clustering</h2>
                 </div>
                 <div class="content-card">
-                    <p>Builds hierarchy of clusters (dendrogram). Agglomerative: merge closest clusters. Divisive: split clusters. No need to specify K upfront.</p>
+                    <p>Builds hierarchy of clusters (dendrogram). Agglomerative: merge closest clusters. Divisive: split
+                        clusters. No need to specify K upfront.</p>
                 </div>
                 <div class="summary-card">
                     <h3>🎯 Key Takeaways</h3>
@@ -9240,13 +10472,15 @@
                 </div>
             </section>
 
-            <section class="topic-section ml-section" id="ml-topic-17" data-subject="machine-learning" style="display: none;">
+            <section class="topic-section ml-section" id="ml-topic-17" data-subject="machine-learning"
+                style="display: none;">
                 <div class="topic-header">
                     <span class="topic-number ml-clustering">ML Algorithm 17</span>
                     <h2>📍 DBSCAN</h2>
                 </div>
                 <div class="content-card">
-                    <p>Density-Based Spatial Clustering. Groups points with many neighbors (dense regions). Can find arbitrarily-shaped clusters and outliers.</p>
+                    <p>Density-Based Spatial Clustering. Groups points with many neighbors (dense regions). Can find
+                        arbitrarily-shaped clusters and outliers.</p>
                 </div>
                 <div class="summary-card">
                     <h3>🎯 Key Takeaways</h3>
@@ -9258,13 +10492,15 @@
                 </div>
             </section>
 
-            <section class="topic-section ml-section" id="ml-topic-18" data-subject="machine-learning" style="display: none;">
+            <section class="topic-section ml-section" id="ml-topic-18" data-subject="machine-learning"
+                style="display: none;">
                 <div class="topic-header">
                     <span class="topic-number ml-clustering">ML Algorithm 18</span>
                     <h2>📊 Gaussian Mixture Models (GMM)</h2>
                 </div>
                 <div class="content-card">
-                    <p>Soft clustering: each point has probability of belonging to each cluster. Mixture of K Gaussian distributions. Uses EM algorithm.</p>
+                    <p>Soft clustering: each point has probability of belonging to each cluster. Mixture of K Gaussian
+                        distributions. Uses EM algorithm.</p>
                 </div>
                 <div class="summary-card">
                     <h3>🎯 Key Takeaways</h3>
@@ -9276,13 +10512,15 @@
                 </div>
             </section>
 
-            <section class="topic-section ml-section" id="ml-topic-19" data-subject="machine-learning" style="display: none;">
+            <section class="topic-section ml-section" id="ml-topic-19" data-subject="machine-learning"
+                style="display: none;">
                 <div class="topic-header">
                     <span class="topic-number ml-reduction">ML Algorithm 19</span>
                     <h2>🎯 Principal Component Analysis (PCA)</h2>
                 </div>
                 <div class="content-card">
-                    <p>See Data Science Topic 77 for complete details. Reduces dimensions by finding directions of maximum variance.</p>
+                    <p>See Data Science Topic 77 for complete details. Reduces dimensions by finding directions of
+                        maximum variance.</p>
                 </div>
                 <div class="summary-card">
                     <h3>🎯 Key Takeaways</h3>
@@ -9294,13 +10532,15 @@
                 </div>
             </section>
 
-            <section class="topic-section ml-section" id="ml-topic-20" data-subject="machine-learning" style="display: none;">
+            <section class="topic-section ml-section" id="ml-topic-20" data-subject="machine-learning"
+                style="display: none;">
                 <div class="topic-header">
                     <span class="topic-number ml-reduction">ML Algorithm 20</span>
                     <h2>🎨 t-SNE</h2>
                 </div>
                 <div class="content-card">
-                    <p>t-Distributed Stochastic Neighbor Embedding. Non-linear dimensionality reduction for visualization. Preserves local structure better than PCA.</p>
+                    <p>t-Distributed Stochastic Neighbor Embedding. Non-linear dimensionality reduction for
+                        visualization. Preserves local structure better than PCA.</p>
                 </div>
                 <div class="summary-card">
                     <h3>🎯 Key Takeaways</h3>
@@ -9312,13 +10552,15 @@
                 </div>
             </section>
 
-            <section class="topic-section ml-section" id="ml-topic-21" data-subject="machine-learning" style="display: none;">
+            <section class="topic-section ml-section" id="ml-topic-21" data-subject="machine-learning"
+                style="display: none;">
                 <div class="topic-header">
                     <span class="topic-number ml-reduction">ML Algorithm 21</span>
                     <h2>🔄 Autoencoders</h2>
                 </div>
                 <div class="content-card">
-                    <p>Neural network that learns compressed representation. Encoder: reduces dimensions. Decoder: reconstructs input. Latent space = compressed features.</p>
+                    <p>Neural network that learns compressed representation. Encoder: reduces dimensions. Decoder:
+                        reconstructs input. Latent space = compressed features.</p>
                 </div>
                 <div class="summary-card">
                     <h3>🎯 Key Takeaways</h3>
@@ -9330,19 +10572,23 @@
                 </div>
             </section>
 
-            <section class="topic-section ml-section" id="ml-topic-22" data-subject="machine-learning" style="display: none;">
+            <section class="topic-section ml-section" id="ml-topic-22" data-subject="machine-learning"
+                style="display: none;">
                 <div class="topic-header">
                     <span class="topic-number ml-reinforcement">ML Algorithm 22</span>
                     <h2>🎮 Q-Learning</h2>
                     <p class="topic-subtitle">Learn optimal actions through trial and error</p>
                 </div>
-                
+
                 <div class="content-card">
                     <h3>📚 What is Q-Learning?</h3>
-                    <p>Q-Learning is a model-free reinforcement learning algorithm that learns the value of taking specific actions in specific states. It builds a Q-table mapping state-action pairs to expected future rewards.</p>
-                    <p><strong>Analogy:</strong> Like learning to play a video game by trying different moves and remembering which ones led to high scores.</p>
+                    <p>Q-Learning is a model-free reinforcement learning algorithm that learns the value of taking
+                        specific actions in specific states. It builds a Q-table mapping state-action pairs to expected
+                        future rewards.</p>
+                    <p><strong>Analogy:</strong> Like learning to play a video game by trying different moves and
+                        remembering which ones led to high scores.</p>
                 </div>
-                
+
                 <div class="callout-box insight">
                     <div class="callout-header">💡 How It Works</div>
                     <p><strong>Key Concepts:</strong></p>
@@ -9354,7 +10600,7 @@
                         <li><strong>Policy π:</strong> Strategy for choosing actions</li>
                     </ol>
                 </div>
-                
+
                 <div class="content-card">
                     <h3>🧮 Mathematics Behind It</h3>
                     <div class="formula-card">
@@ -9371,24 +10617,39 @@
                         <p>Choose action with highest Q-value</p>
                     </div>
                 </div>
-                
+
                 <div class="worked-example-section">
                     <h3>📝 Worked Example - Grid World Navigation</h3>
-                    
+
                     <div class="example-problem">
                         <h4>Problem:</h4>
-                        <p class="problem-statement">Agent navigates 3×3 grid. Start at (0,0), Goal at (2,2). Actions: Up, Down, Left, Right. Reward: +10 at goal, -1 per step. Use α=0.5, γ=0.9</p>
+                        <p class="problem-statement">Agent navigates 3×3 grid. Start at (0,0), Goal at (2,2). Actions:
+                            Up, Down, Left, Right. Reward: +10 at goal, -1 per step. Use α=0.5, γ=0.9</p>
                         <table class="calculation-table">
-                            <tr><th colspan="3">Grid World</th></tr>
-                            <tr><td>Start</td><td>[ ]</td><td>[ ]</td></tr>
-                            <tr><td>[ ]</td><td>[ ]</td><td>[ ]</td></tr>
-                            <tr><td>[ ]</td><td>[ ]</td><td>Goal</td></tr>
+                            <tr>
+                                <th colspan="3">Grid World</th>
+                            </tr>
+                            <tr>
+                                <td>Start</td>
+                                <td>[ ]</td>
+                                <td>[ ]</td>
+                            </tr>
+                            <tr>
+                                <td>[ ]</td>
+                                <td>[ ]</td>
+                                <td>[ ]</td>
+                            </tr>
+                            <tr>
+                                <td>[ ]</td>
+                                <td>[ ]</td>
+                                <td>Goal</td>
+                            </tr>
                         </table>
                     </div>
-                    
+
                     <div class="example-solution">
                         <h4>Solution:</h4>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 1:</div>
                             <div class="step-content">
@@ -9402,7 +10663,7 @@
                                 <p class="step-explanation">Start with zero knowledge</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 2:</div>
                             <div class="step-content">
@@ -9418,7 +10679,7 @@
                                 <p class="step-explanation">Exploring and updating Q-values</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 3:</div>
                             <div class="step-content">
@@ -9433,7 +10694,7 @@
                                 <p class="step-explanation">Goal state has terminal value, max Q = 0</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 4:</div>
                             <div class="step-content">
@@ -9448,39 +10709,72 @@
                                 <p class="step-explanation">Future rewards influence current decisions</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 5:</div>
                             <div class="step-content">
                                 <p class="step-description">Converged Q-Table (After Many Episodes)</p>
                                 <div class="step-work">
                                     <table class="calculation-table">
-                                        <tr><th>State</th><th>Best Action</th><th>Q-value</th></tr>
-                                        <tr><td>(0,0)</td><td>Right</td><td>2.95</td></tr>
-                                        <tr><td>(0,1)</td><td>Right</td><td>3.83</td></tr>
-                                        <tr><td>(0,2)</td><td>Down</td><td>4.69</td></tr>
-                                        <tr><td>(1,1)</td><td>Right</td><td>4.26</td></tr>
-                                        <tr><td>(1,2)</td><td>Down</td><td>5.21</td></tr>
-                                        <tr><td>(2,1)</td><td>Right</td><td>5.79</td></tr>
-                                        <tr style="background: rgba(81,207,102,0.2);"><td>(2,2)</td><td>GOAL</td><td>10.0</td></tr>
+                                        <tr>
+                                            <th>State</th>
+                                            <th>Best Action</th>
+                                            <th>Q-value</th>
+                                        </tr>
+                                        <tr>
+                                            <td>(0,0)</td>
+                                            <td>Right</td>
+                                            <td>2.95</td>
+                                        </tr>
+                                        <tr>
+                                            <td>(0,1)</td>
+                                            <td>Right</td>
+                                            <td>3.83</td>
+                                        </tr>
+                                        <tr>
+                                            <td>(0,2)</td>
+                                            <td>Down</td>
+                                            <td>4.69</td>
+                                        </tr>
+                                        <tr>
+                                            <td>(1,1)</td>
+                                            <td>Right</td>
+                                            <td>4.26</td>
+                                        </tr>
+                                        <tr>
+                                            <td>(1,2)</td>
+                                            <td>Down</td>
+                                            <td>5.21</td>
+                                        </tr>
+                                        <tr>
+                                            <td>(2,1)</td>
+                                            <td>Right</td>
+                                            <td>5.79</td>
+                                        </tr>
+                                        <tr style="background: rgba(81,207,102,0.2);">
+                                            <td>(2,2)</td>
+                                            <td>GOAL</td>
+                                            <td>10.0</td>
+                                        </tr>
                                     </table>
                                 </div>
                                 <p class="step-explanation">Optimal path emerges from Q-values</p>
                             </div>
                         </div>
-                        
+
                         <div class="final-answer">
                             <strong>✓ Optimal Policy Learned:</strong>
                             <span class="answer-highlight">(0,0) → Right → Right → Down → Down → Right → GOAL</span><br>
                             <span class="answer-highlight">Total reward: 10 - 5 = +5</span>
                         </div>
-                        
+
                         <div class="verification">
                             <strong>Validation:</strong>
-                            <p>Agent learned shortest path (5 steps) to goal through trial and error. Q-values form gradient pointing toward goal.</p>
+                            <p>Agent learned shortest path (5 steps) to goal through trial and error. Q-values form
+                                gradient pointing toward goal.</p>
                         </div>
                     </div>
-                    
+
                     <div class="practice-problems">
                         <h4>💪 Practice Problems:</h4>
                         <ol>
@@ -9488,7 +10782,9 @@
                             <li>Why use ε-greedy exploration?</li>
                             <li>Calculate Q-update: current Q=2, r=-1, max next Q=5, α=0.1, γ=0.9</li>
                         </ol>
-                        <button class="show-answers-btn" onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show Answers</button>
+                        <button class="show-answers-btn"
+                            onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
+                            Answers</button>
                         <div class="practice-answers" style="display: none;">
                             <p><strong>Answers:</strong></p>
                             <ol>
@@ -9499,7 +10795,7 @@
                         </div>
                     </div>
                 </div>
-                
+
                 <div class="content-card">
                     <h3>💻 Python Implementation</h3>
                     <div class="code-block">
@@ -9528,7 +10824,7 @@ for episode in range(1000):<br>
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state = next_state</code>
                     </div>
                 </div>
-                
+
                 <div class="summary-card">
                     <h3>🎯 Key Takeaways</h3>
                     <ul>
@@ -9540,19 +10836,23 @@ for episode in range(1000):<br>
                 </div>
             </section>
 
-            <section class="topic-section ml-section" id="ml-topic-23" data-subject="machine-learning" style="display: none;">
+            <section class="topic-section ml-section" id="ml-topic-23" data-subject="machine-learning"
+                style="display: none;">
                 <div class="topic-header">
                     <span class="topic-number ml-reinforcement">ML Algorithm 23</span>
                     <h2>🧠 Deep Q-Networks (DQN)</h2>
                     <p class="topic-subtitle">Neural networks for complex state spaces</p>
                 </div>
-                
+
                 <div class="content-card">
                     <h3>📚 What is DQN?</h3>
-                    <p>Deep Q-Networks combine Q-Learning with deep neural networks to handle high-dimensional state spaces (like raw pixels from games). Instead of a Q-table, a neural network approximates Q-values.</p>
-                    <p><strong>Why it matters:</strong> Enabled AI to play Atari games from pixels alone, achieving superhuman performance. Breakthrough in combining deep learning with RL.</p>
+                    <p>Deep Q-Networks combine Q-Learning with deep neural networks to handle high-dimensional state
+                        spaces (like raw pixels from games). Instead of a Q-table, a neural network approximates
+                        Q-values.</p>
+                    <p><strong>Why it matters:</strong> Enabled AI to play Atari games from pixels alone, achieving
+                        superhuman performance. Breakthrough in combining deep learning with RL.</p>
                 </div>
-                
+
                 <div class="callout-box insight">
                     <div class="callout-header">💡 Key Innovations</div>
                     <ol>
@@ -9562,7 +10862,7 @@ for episode in range(1000):<br>
                         <li><strong>Conv Layers:</strong> Extract features from raw pixels</li>
                     </ol>
                 </div>
-                
+
                 <div class="content-card">
                     <h3>🧮 Mathematics Behind It</h3>
                     <div class="formula-card">
@@ -9574,21 +10874,23 @@ for episode in range(1000):<br>
                     </div>
                     <div class="formula-card">
                         <div class="formula-header">Network Architecture (Atari)</div>
-                        <div class="formula-main">Conv(32, 8×8, stride=4) → ReLU → Conv(64, 4×4, stride=2) → ReLU → Conv(64, 3×3, stride=1) → ReLU → FC(512) → FC(num_actions)</div>
+                        <div class="formula-main">Conv(32, 8×8, stride=4) → ReLU → Conv(64, 4×4, stride=2) → ReLU →
+                            Conv(64, 3×3, stride=1) → ReLU → FC(512) → FC(num_actions)</div>
                     </div>
                 </div>
-                
+
                 <div class="worked-example-section">
                     <h3>📝 Worked Example - Training DQN for Cart-Pole</h3>
-                    
+
                     <div class="example-problem">
                         <h4>Problem:</h4>
-                        <p class="problem-statement">Train DQN to balance pole on cart. State: [cart_pos, cart_vel, pole_angle, pole_vel]. Actions: {Left, Right}. Goal: Keep pole upright for 200 steps.</p>
+                        <p class="problem-statement">Train DQN to balance pole on cart. State: [cart_pos, cart_vel,
+                            pole_angle, pole_vel]. Actions: {Left, Right}. Goal: Keep pole upright for 200 steps.</p>
                     </div>
-                    
+
                     <div class="example-solution">
                         <h4>Solution:</h4>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 1:</div>
                             <div class="step-content">
@@ -9605,7 +10907,7 @@ for episode in range(1000):<br>
                                 <p class="step-explanation">Network outputs Q(s, Left) and Q(s, Right)</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 2:</div>
                             <div class="step-content">
@@ -9622,7 +10924,7 @@ for episode in range(1000):<br>
                                 <p class="step-explanation">Replay buffer breaks correlation in sequential data</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 3:</div>
                             <div class="step-content">
@@ -9640,7 +10942,7 @@ for episode in range(1000):<br>
                                 <p class="step-explanation">Collect data by interacting with environment</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 4:</div>
                             <div class="step-content">
@@ -9660,7 +10962,7 @@ for episode in range(1000):<br>
                                 <p class="step-explanation">Update network to minimize TD error</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 5:</div>
                             <div class="step-content">
@@ -9675,39 +10977,72 @@ for episode in range(1000):<br>
                                 <p class="step-explanation">Prevents moving target problem</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 6:</div>
                             <div class="step-content">
                                 <p class="step-description">Learning Progress</p>
                                 <div class="step-work">
                                     <table class="calculation-table">
-                                        <tr><th>Episode</th><th>Steps</th><th>ε (exploration)</th><th>Avg Q-value</th></tr>
-                                        <tr><td>1-10</td><td>15-30</td><td>0.9</td><td>0.2</td></tr>
-                                        <tr><td>50</td><td>45</td><td>0.5</td><td>1.5</td></tr>
-                                        <tr><td>100</td><td>85</td><td>0.3</td><td>5.2</td></tr>
-                                        <tr><td>200</td><td>150</td><td>0.1</td><td>12.8</td></tr>
-                                        <tr style="background: rgba(81,207,102,0.2);"><td>300</td><td>200</td><td>0.05</td><td>18.5</td></tr>
+                                        <tr>
+                                            <th>Episode</th>
+                                            <th>Steps</th>
+                                            <th>ε (exploration)</th>
+                                            <th>Avg Q-value</th>
+                                        </tr>
+                                        <tr>
+                                            <td>1-10</td>
+                                            <td>15-30</td>
+                                            <td>0.9</td>
+                                            <td>0.2</td>
+                                        </tr>
+                                        <tr>
+                                            <td>50</td>
+                                            <td>45</td>
+                                            <td>0.5</td>
+                                            <td>1.5</td>
+                                        </tr>
+                                        <tr>
+                                            <td>100</td>
+                                            <td>85</td>
+                                            <td>0.3</td>
+                                            <td>5.2</td>
+                                        </tr>
+                                        <tr>
+                                            <td>200</td>
+                                            <td>150</td>
+                                            <td>0.1</td>
+                                            <td>12.8</td>
+                                        </tr>
+                                        <tr style="background: rgba(81,207,102,0.2);">
+                                            <td>300</td>
+                                            <td>200</td>
+                                            <td>0.05</td>
+                                            <td>18.5</td>
+                                        </tr>
                                     </table>
                                     <code>Solved! Agent keeps pole upright for 200 steps consistently</code>
                                 </div>
                                 <p class="step-explanation">Gradual improvement as network learns</p>
                             </div>
                         </div>
-                        
+
                         <div class="final-answer">
                             <strong>✓ DQN Successfully Trained!</strong>
-                            <span class="answer-highlight">Network learned to balance pole from raw state features</span><br>
-                            <span class="answer-highlight">Key: Experience replay + target network = stable learning</span>
+                            <span class="answer-highlight">Network learned to balance pole from raw state
+                                features</span><br>
+                            <span class="answer-highlight">Key: Experience replay + target network = stable
+                                learning</span>
                         </div>
-                        
+
                         <div class="verification">
                             <strong>Validation:</strong>
-                            <p>DQN converged in ~300 episodes. Experience replay broke correlation, target network stabilized targets. Network generalized to unseen states!</p>
+                            <p>DQN converged in ~300 episodes. Experience replay broke correlation, target network
+                                stabilized targets. Network generalized to unseen states!</p>
                         </div>
                     </div>
                 </div>
-                
+
                 <div class="content-card">
                     <h3>💻 Python Implementation (PyTorch)</h3>
                     <div class="code-block">
@@ -9760,7 +11095,7 @@ for episode in range(1000):<br>
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target_network.load_state_dict(q_network.state_dict())</code>
                     </div>
                 </div>
-                
+
                 <div class="summary-card">
                     <h3>🎯 Key Takeaways</h3>
                     <ul>
@@ -9772,19 +11107,22 @@ for episode in range(1000):<br>
                 </div>
             </section>
 
-            <section class="topic-section ml-section" id="ml-topic-24" data-subject="machine-learning" style="display: none;">
+            <section class="topic-section ml-section" id="ml-topic-24" data-subject="machine-learning"
+                style="display: none;">
                 <div class="topic-header">
                     <span class="topic-number ml-reinforcement">ML Algorithm 24</span>
                     <h2>🎯 Policy Gradient Methods</h2>
                     <p class="topic-subtitle">Direct policy optimization for maximum reward</p>
                 </div>
-                
+
                 <div class="content-card">
                     <h3>📚 What are Policy Gradient Methods?</h3>
-                    <p>Policy gradient algorithms directly optimize the agent's policy π(a|s) (mapping from states to probability distributions over actions), rather than indirectly through Q-values.</p>
-                    <p><strong>Why it matters:</strong> Enables handling of continuous and large action spaces, and complex policies (e.g., in robotics).</p>
+                    <p>Policy gradient algorithms directly optimize the agent's policy π(a|s) (mapping from states to
+                        probability distributions over actions), rather than indirectly through Q-values.</p>
+                    <p><strong>Why it matters:</strong> Enables handling of continuous and large action spaces, and
+                        complex policies (e.g., in robotics).</p>
                 </div>
-                
+
                 <div class="callout-box insight">
                     <div class="callout-header">💡 Key Concepts</div>
                     <ol>
@@ -9795,7 +11133,7 @@ for episode in range(1000):<br>
                         <li><strong>Variants:</strong> REINFORCE, Actor-Critic, PPO, A2C/A3C</li>
                     </ol>
                 </div>
-                
+
                 <div class="content-card">
                     <h3>🧮 Mathematics - Policy Gradient Theorem</h3>
                     <div class="formula-card">
@@ -9809,18 +11147,20 @@ for episode in range(1000):<br>
                         <p>α = learning rate</p>
                     </div>
                 </div>
-                
+
                 <div class="worked-example-section">
                     <h3>📝 Worked Example - REINFORCE for Cart-Pole</h3>
-                    
+
                     <div class="example-problem">
                         <h4>Problem:</h4>
-                        <p class="problem-statement">Train an agent to balance a pole using REINFORCE. Episode: agent starts at s₀, takes actions a₀, a₁,... receives rewards r₀, r₁, .... Max episode length = 5. Use learning rate α=0.1.</p>
+                        <p class="problem-statement">Train an agent to balance a pole using REINFORCE. Episode: agent
+                            starts at s₀, takes actions a₀, a₁,... receives rewards r₀, r₁, .... Max episode length = 5.
+                            Use learning rate α=0.1.</p>
                     </div>
-                    
+
                     <div class="example-solution">
                         <h4>Solution:</h4>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 1:</div>
                             <div class="step-content">
@@ -9838,7 +11178,7 @@ for episode in range(1000):<br>
                                 <p class="step-explanation">Agent collects (state, action, reward) for trajectory</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 2:</div>
                             <div class="step-content">
@@ -9853,7 +11193,7 @@ for episode in range(1000):<br>
                                 <p class="step-explanation">Reward-to-go boosts good actions early in episode</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 3:</div>
                             <div class="step-content">
@@ -9867,7 +11207,7 @@ for episode in range(1000):<br>
                                 <p class="step-explanation">Actions leading to higher returns get reinforced</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 4:</div>
                             <div class="step-content">
@@ -9880,7 +11220,7 @@ for episode in range(1000):<br>
                                 <p class="step-explanation">Learning rate α = 0.1 used</p>
                             </div>
                         </div>
-                        
+
                         <div class="solution-step">
                             <div class="step-number">Step 5:</div>
                             <div class="step-content">
@@ -9892,10 +11232,11 @@ for episode in range(1000):<br>
                                 <p class="step-explanation">Training curve shows learning progress</p>
                             </div>
                         </div>
-                        
+
                         <div class="final-answer">
                             <strong>✓ Policy Gradient Success:</strong>
-                            <span class="answer-highlight">Agent learns to balance pole by maximizing expected return</span>
+                            <span class="answer-highlight">Agent learns to balance pole by maximizing expected
+                                return</span>
                         </div>
                         <div class="verification">
                             <strong>Learning Curve:</strong>
@@ -9909,7 +11250,9 @@ for episode in range(1000):<br>
                             <li>What are advantages of policy gradient vs Q-learning?</li>
                             <li>What problem occurs if your learning rate is too high?</li>
                         </ol>
-                        <button class="show-answers-btn" onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show Answers</button>
+                        <button class="show-answers-btn"
+                            onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
+                            Answers</button>
                         <div class="practice-answers" style="display: none;">
                             <p><strong>Answers:</strong></p>
                             <ol>
@@ -9920,7 +11263,7 @@ for episode in range(1000):<br>
                         </div>
                     </div>
                 </div>
-                
+
                 <div class="content-card">
                     <h3>💻 Python Implementation (REINFORCE)</h3>
                     <div class="code-block">
@@ -9963,7 +11306,7 @@ for episode in range(1000):
     optimizer.step()</code>
                     </div>
                 </div>
-                
+
                 <div class="summary-card">
                     <h3>🎯 Key Takeaways</h3>
                     <ul>
@@ -9976,7 +11319,8 @@ for episode in range(1000):
                 </div>
             </section>
 
-            <section class="topic-section ml-section" id="ml-topic-26" data-subject="machine-learning" style="display: none;">
+            <section class="topic-section ml-section" id="ml-topic-26" data-subject="machine-learning"
+                style="display: none;">
                 <div class="topic-header">
                     <span class="topic-number ml-advanced">ML Algorithm 26</span>
                     <h2>🔍 GridSearch &amp; RandomSearch</h2>
@@ -9985,7 +11329,8 @@ for episode in range(1000):
                 <div class="content-card">
                     <h3>📚 Introduction</h3>
                     <p><strong>GridSearch:</strong> Try all combinations of hyperparameters exhaustively.</p>
-                    <p><strong>RandomSearch:</strong> Sample random combinations - often finds good solutions faster.</p>
+                    <p><strong>RandomSearch:</strong> Sample random combinations - often finds good solutions faster.
+                    </p>
                     <p>Both use cross-validation for robust evaluation.</p>
                 </div>
                 <div class="content-card">
@@ -10009,254 +11354,1499 @@ for episode in range(1000):
                 </div>
             </section>
 
-            <section class="topic-section ml-section" id="ml-topic-27" data-subject="machine-learning" style="display: none;">
+            <section class="topic-section ml-section" id="ml-topic-27" data-subject="machine-learning"
+                style="display: none;">
                 <div class="topic-header">
                     <span class="topic-number ml-advanced">ML Algorithm 27</span>
                     <h2>⚙️ Hyperparameter Tuning</h2>
+                    <p class="topic-subtitle">Finding the optimal model settings for maximum performance</p>
+                </div>
+
+                <div class="content-card">
+                    <h3>📚 Parameters vs Hyperparameters</h3>
+                    <p><strong>Parameters:</strong> Learned from data (weights, biases) - model trains these.</p>
+                    <p><strong>Hyperparameters:</strong> Set before training (learning rate, tree depth) - YOU choose
+                        these!</p>
+                </div>
+
+                <div class="callout-box insight">
+                    <div class="callout-header">💡 Tuning Methods Comparison</div>
+                    <table class="comparison-table">
+                        <tr>
+                            <th>Method</th>
+                            <th>How it Works</th>
+                            <th>Pros</th>
+                            <th>Cons</th>
+                        </tr>
+                        <tr>
+                            <td>Grid Search</td>
+                            <td>Try all combinations</td>
+                            <td>Exhaustive, guaranteed</td>
+                            <td>Slow with many params</td>
+                        </tr>
+                        <tr>
+                            <td>Random Search</td>
+                            <td>Random sampling</td>
+                            <td>Fast, good coverage</td>
+                            <td>May miss optimal</td>
+                        </tr>
+                        <tr>
+                            <td>Bayesian Opt</td>
+                            <td>Learn from results</td>
+                            <td>Efficient, smart</td>
+                            <td>Complex setup</td>
+                        </tr>
+                    </table>
+                </div>
+
+                <div class="content-card">
+                    <h3>🧮 Cross-Validation for Tuning</h3>
+                    <div class="formula-card">
+                        <div class="formula-header">K-Fold CV Score</div>
+                        <div class="formula-main">$$\text{CV Score} = \frac{1}{K}\sum_{k=1}^{K} \text{Score}_k$$</div>
+                        <p>Average performance across K validation folds</p>
+                    </div>
+                </div>
+
+                <div class="worked-example">
+                    <h4>📝 Worked Example: Tuning Random Forest</h4>
+                    <div class="example-problem">
+                        <p><strong>Problem:</strong> Find optimal n_estimators and max_depth for a classifier</p>
+                    </div>
+                    <div class="code-block">
+                        <code>from sklearn.model_selection import GridSearchCV<br>
+from sklearn.ensemble import RandomForestClassifier<br><br>
+# Define parameter grid<br>
+param_grid = {<br>
+&nbsp;&nbsp;&nbsp;&nbsp;'n_estimators': [50, 100, 200],<br>
+&nbsp;&nbsp;&nbsp;&nbsp;'max_depth': [5, 10, 20, None]<br>
+}<br><br>
+# Grid search with 5-fold CV<br>
+grid_search = GridSearchCV(<br>
+&nbsp;&nbsp;&nbsp;&nbsp;RandomForestClassifier(),<br>
+&nbsp;&nbsp;&nbsp;&nbsp;param_grid,<br>
+&nbsp;&nbsp;&nbsp;&nbsp;cv=5,<br>
+&nbsp;&nbsp;&nbsp;&nbsp;scoring='accuracy'<br>
+)<br>
+grid_search.fit(X_train, y_train)<br><br>
+print(f"Best params: {grid_search.best_params_}")<br>
+print(f"Best CV score: {grid_search.best_score_:.3f}")</code>
+                    </div>
+                </div>
+
+                <div class="summary-card">
+                    <h3>🎯 Key Takeaways</h3>
+                    <ul>
+                        <li>Hyperparameters set BEFORE training (learning rate, depth, regularization)</li>
+                        <li>Use validation set or cross-validation - NEVER test set!</li>
+                        <li>Grid Search: exhaustive but slow | Random Search: 60x faster, often equally good</li>
+                        <li>Bayesian Optimization: best for expensive models (neural networks)</li>
+                    </ul>
+                </div>
+            </section>
+
+            <section class="topic-section ml-section" id="ml-topic-28" data-subject="machine-learning"
+                style="display: none;">
+                <div class="topic-header">
+                    <span class="topic-number ml-advanced">ML Algorithm 28</span>
+                    <h2>📊 Model Evaluation Metrics</h2>
+                    <p class="topic-subtitle">Measuring model performance correctly for your use case</p>
+                </div>
+
+                <div class="content-card">
+                    <h3>📋 The Confusion Matrix</h3>
+                    <table class="comparison-table">
+                        <tr>
+                            <th></th>
+                            <th>Predicted Positive</th>
+                            <th>Predicted Negative</th>
+                        </tr>
+                        <tr>
+                            <td><strong>Actual Positive</strong></td>
+                            <td>TP (True Positive)</td>
+                            <td>FN (False Negative)</td>
+                        </tr>
+                        <tr>
+                            <td><strong>Actual Negative</strong></td>
+                            <td>FP (False Positive)</td>
+                            <td>TN (True Negative)</td>
+                        </tr>
+                    </table>
+                </div>
+
+                <div class="content-card">
+                    <h3>🧮 Classification Metrics</h3>
+                    <div class="formula-card">
+                        <div class="formula-header">Accuracy</div>
+                        <div class="formula-main">$$\text{Accuracy} = \frac{TP + TN}{TP + TN + FP + FN}$$</div>
+                        <p>Overall correctness - misleading with imbalanced data!</p>
+                    </div>
+                    <div class="formula-card">
+                        <div class="formula-header">Precision (Positive Predictive Value)</div>
+                        <div class="formula-main">$$\text{Precision} = \frac{TP}{TP + FP}$$</div>
+                        <p>"Of all predicted positives, how many are correct?" Important when FP is costly (spam
+                            filter).</p>
+                    </div>
+                    <div class="formula-card">
+                        <div class="formula-header">Recall (Sensitivity / TPR)</div>
+                        <div class="formula-main">$$\text{Recall} = \frac{TP}{TP + FN}$$</div>
+                        <p>"Of all actual positives, how many did we catch?" Important when FN is costly (disease
+                            detection).</p>
+                    </div>
+                    <div class="formula-card">
+                        <div class="formula-header">F1-Score (Harmonic Mean)</div>
+                        <div class="formula-main">$$F_1 = 2 \cdot \frac{\text{Precision} \cdot
+                            \text{Recall}}{\text{Precision} + \text{Recall}}$$</div>
+                        <p>Balances precision and recall - use when you need both!</p>
+                    </div>
+                </div>
+
+                <div class="callout-box insight">
+                    <div class="callout-header">💡 When to Use Which Metric?</div>
+                    <table class="comparison-table">
+                        <tr>
+                            <th>Scenario</th>
+                            <th>Priority</th>
+                            <th>Metric</th>
+                        </tr>
+                        <tr>
+                            <td>Spam detection</td>
+                            <td>Don't lose good emails</td>
+                            <td>High Precision</td>
+                        </tr>
+                        <tr>
+                            <td>Cancer screening</td>
+                            <td>Catch all cases</td>
+                            <td>High Recall</td>
+                        </tr>
+                        <tr>
+                            <td>Balanced classes</td>
+                            <td>Overall accuracy</td>
+                            <td>Accuracy</td>
+                        </tr>
+                        <tr>
+                            <td>Imbalanced classes</td>
+                            <td>Balance P & R</td>
+                            <td>F1-Score, AUC</td>
+                        </tr>
+                    </table>
+                </div>
+
+                <div class="worked-example">
+                    <h4>📝 Worked Example: Calculate All Metrics</h4>
+                    <div class="example-problem">
+                        <p><strong>Problem:</strong> A spam classifier produces this confusion matrix. Calculate all
+                            metrics.</p>
+                        <table class="comparison-table" style="max-width: 300px;">
+                            <tr>
+                                <th></th>
+                                <th>Pred Spam</th>
+                                <th>Pred Not</th>
+                            </tr>
+                            <tr>
+                                <td><strong>Actual Spam</strong></td>
+                                <td>TP = 80</td>
+                                <td>FN = 20</td>
+                            </tr>
+                            <tr>
+                                <td><strong>Actual Not</strong></td>
+                                <td>FP = 10</td>
+                                <td>TN = 890</td>
+                            </tr>
+                        </table>
+                    </div>
+                    <div class="example-solution">
+                        <p><strong>Step 1: Accuracy</strong></p>
+                        <div class="formula-main">$$\text{Accuracy} = \frac{TP + TN}{Total} = \frac{80 + 890}{1000} =
+                            \frac{970}{1000} = 0.97$$</div>
+
+                        <p><strong>Step 2: Precision</strong> (of predicted spam, how many correct?)</p>
+                        <div class="formula-main">$$\text{Precision} = \frac{TP}{TP + FP} = \frac{80}{80 + 10} =
+                            \frac{80}{90} = 0.889$$</div>
+
+                        <p><strong>Step 3: Recall</strong> (of actual spam, how many caught?)</p>
+                        <div class="formula-main">$$\text{Recall} = \frac{TP}{TP + FN} = \frac{80}{80 + 20} =
+                            \frac{80}{100} = 0.80$$</div>
+
+                        <p><strong>Step 4: F1-Score</strong> (harmonic mean)</p>
+                        <div class="formula-main">$$F_1 = 2 \cdot \frac{0.889 \times 0.80}{0.889 + 0.80} = 2 \cdot
+                            \frac{0.711}{1.689} = 0.842$$</div>
+                    </div>
+                    <div class="example-answer">
+                        <p><strong>Answer:</strong> Accuracy = 97%, Precision = 88.9%, Recall = 80%, F1 = 84.2%</p>
+                        <p><em>Note: High accuracy but only 80% of spam caught (20% missed!)</em></p>
+                    </div>
+                </div>
+
+                <div class="worked-example">
+                    <h4>💻 Python Verification</h4>
+                    <div class="code-block">
+                        <code>from sklearn.metrics import classification_report, roc_auc_score<br><br>
+# Get predictions<br>
+y_pred = model.predict(X_test)<br>
+y_proba = model.predict_proba(X_test)[:, 1]<br><br>
+# Full classification report<br>
+print(classification_report(y_test, y_pred))<br><br>
+# ROC-AUC (needs probability scores)<br>
+auc = roc_auc_score(y_test, y_proba)<br>
+print(f"ROC-AUC: {auc:.3f}")</code>
+                    </div>
+                </div>
+
+                <div class="summary-card">
+                    <h3>🎯 Key Takeaways</h3>
+                    <ul>
+                        <li>Accuracy is misleading with imbalanced classes (99% accuracy on 99/1 split = useless)</li>
+                        <li>Precision: minimize false positives | Recall: minimize false negatives</li>
+                        <li>F1-Score: harmonic mean of precision & recall</li>
+                        <li>ROC-AUC: probability ranking quality (0.5 = random, 1.0 = perfect)</li>
+                    </ul>
+                </div>
+            </section>
+
+            <section class="topic-section ml-section" id="ml-topic-29" data-subject="machine-learning"
+                style="display: none;">
+                <div class="topic-header">
+                    <span class="topic-number ml-advanced">ML Algorithm 29</span>
+                    <h2>🎯 Regularization Techniques</h2>
+                    <p class="topic-subtitle">Preventing overfitting by constraining model complexity</p>
+                </div>
+
+                <div class="content-card">
+                    <h3>📚 Why Regularization?</h3>
+                    <p>Complex models can memorize training data (overfitting) instead of learning patterns.
+                        Regularization adds a penalty for complexity, forcing simpler solutions that generalize better.
+                    </p>
+                </div>
+
+                <div class="content-card">
+                    <h3>🧮 L1 and L2 Regularization</h3>
+                    <div class="formula-card">
+                        <div class="formula-header">L1 Regularization (Lasso)</div>
+                        <div class="formula-main">$$\text{Loss} = \text{MSE} + \lambda \sum_i |w_i|$$</div>
+                        <p>Drives weights to exactly zero → Feature selection!</p>
+                    </div>
+                    <div class="formula-card">
+                        <div class="formula-header">L2 Regularization (Ridge)</div>
+                        <div class="formula-main">$$\text{Loss} = \text{MSE} + \lambda \sum_i w_i^2$$</div>
+                        <p>Shrinks weights toward zero (but not exactly zero)</p>
+                    </div>
+                    <div class="formula-card">
+                        <div class="formula-header">Elastic Net (L1 + L2)</div>
+                        <div class="formula-main">$$\text{Loss} = \text{MSE} + \lambda_1 \sum_i |w_i| + \lambda_2 \sum_i
+                            w_i^2$$</div>
+                        <p>Best of both worlds - selection + stability</p>
+                    </div>
+                </div>
+
+                <div class="callout-box insight">
+                    <div class="callout-header">💡 L1 vs L2 Comparison</div>
+                    <table class="comparison-table">
+                        <tr>
+                            <th>Aspect</th>
+                            <th>L1 (Lasso)</th>
+                            <th>L2 (Ridge)</th>
+                        </tr>
+                        <tr>
+                            <td>Effect on weights</td>
+                            <td>Sparse (many zeros)</td>
+                            <td>Small but non-zero</td>
+                        </tr>
+                        <tr>
+                            <td>Feature selection</td>
+                            <td>Yes (built-in)</td>
+                            <td>No</td>
+                        </tr>
+                        <tr>
+                            <td>Correlated features</td>
+                            <td>Picks one randomly</td>
+                            <td>Shrinks all equally</td>
+                        </tr>
+                        <tr>
+                            <td>When to use</td>
+                            <td>Many irrelevant features</td>
+                            <td>All features relevant</td>
+                        </tr>
+                    </table>
+                </div>
+
+                <div class="content-card">
+                    <h3>🧠 Neural Network Regularization</h3>
+                    <ul>
+                        <li><strong>Dropout:</strong> Randomly "drop" p% of neurons during training (p=0.5 typical)</li>
+                        <li><strong>Early Stopping:</strong> Stop training when validation error increases</li>
+                        <li><strong>Data Augmentation:</strong> Create more training examples (rotations, flips)</li>
+                    </ul>
+                </div>
+
+                <div class="worked-example">
+                    <h4>📝 Worked Example: Ridge vs Lasso Loss</h4>
+                    <div class="example-problem">
+                        <p><strong>Problem:</strong> Given weights $w = [2, -3, 0.5]$ and MSE = 10. Calculate total loss
+                            with λ = 0.1 for both Ridge and Lasso.</p>
+                    </div>
+                    <div class="example-solution">
+                        <p><strong>Ridge (L2) Loss:</strong></p>
+                        <div class="formula-main">$$\text{L2 Penalty} = \lambda \sum w_i^2 = 0.1 \times (2^2 + (-3)^2 +
+                            0.5^2)$$</div>
+                        <div class="formula-main">$$= 0.1 \times (4 + 9 + 0.25) = 0.1 \times 13.25 = 1.325$$</div>
+                        <div class="formula-main">$$\text{Ridge Loss} = 10 + 1.325 = 11.325$$</div>
+
+                        <p><strong>Lasso (L1) Loss:</strong></p>
+                        <div class="formula-main">$$\text{L1 Penalty} = \lambda \sum |w_i| = 0.1 \times (|2| + |-3| +
+                            |0.5|)$$</div>
+                        <div class="formula-main">$$= 0.1 \times (2 + 3 + 0.5) = 0.1 \times 5.5 = 0.55$$</div>
+                        <div class="formula-main">$$\text{Lasso Loss} = 10 + 0.55 = 10.55$$</div>
+                    </div>
+                    <div class="example-answer">
+                        <p><strong>Answer:</strong> Ridge Loss = 11.325, Lasso Loss = 10.55</p>
+                        <p><em>Note: Ridge penalizes large weights more heavily (squared), Lasso is more linear.</em>
+                        </p>
+                    </div>
+                </div>
+
+                <div class="worked-example">
+                    <h4>💻 Python Example</h4>
+                    <div class="code-block">
+                        <code>from sklearn.linear_model import Ridge, Lasso, ElasticNet<br><br>
+# L2 (Ridge) - shrinks weights<br>
+ridge = Ridge(alpha=1.0)  # alpha = λ<br>
+ridge.fit(X_train, y_train)<br><br>
+# L1 (Lasso) - feature selection<br>
+lasso = Lasso(alpha=0.1)<br>
+lasso.fit(X_train, y_train)<br>
+print(f"Non-zero features: {sum(lasso.coef_ != 0)}")<br><br>
+# Neural network with dropout<br>
+model = Sequential([<br>
+&nbsp;&nbsp;&nbsp;&nbsp;Dense(128, activation='relu'),<br>
+&nbsp;&nbsp;&nbsp;&nbsp;Dropout(0.5),  # 50% neurons dropped<br>
+&nbsp;&nbsp;&nbsp;&nbsp;Dense(10, activation='softmax')<br>
+])</code>
+                    </div>
+                </div>
+
+                <div class="summary-card">
+                    <h3>🎯 Key Takeaways</h3>
+                    <ul>
+                        <li>Regularization = penalize model complexity to prevent overfitting</li>
+                        <li>L1 (Lasso): sparse weights → automatic feature selection</li>
+                        <li>L2 (Ridge): small weights → stable when features correlated</li>
+                        <li>Dropout: randomly deactivate neurons → prevents co-adaptation</li>
+                        <li>λ (alpha) controls regularization strength</li>
+                    </ul>
+                </div>
+            </section>
+
+            <section class="topic-section ml-section" id="ml-topic-30" data-subject="machine-learning"
+                style="display: none;">
+                <div class="topic-header">
+                    <span class="topic-number ml-advanced">ML Algorithm 30</span>
+                    <h2>⚖️ Bias-Variance Tradeoff</h2>
+                    <p class="topic-subtitle">Finding the sweet spot between underfitting and overfitting</p>
+                </div>
+
+                <div class="content-card">
+                    <h3>🧮 The Mathematical Decomposition</h3>
+                    <div class="formula-card">
+                        <div class="formula-header">Expected Prediction Error</div>
+                        <div class="formula-main">$$\mathbb{E}[(y - \hat{f}(x))^2] = \text{Bias}^2 + \text{Variance} +
+                            \text{Irreducible Noise}$$</div>
+                    </div>
+                    <div class="formula-card">
+                        <div class="formula-header">Bias (Systematic Error)</div>
+                        <div class="formula-main">$$\text{Bias} = \mathbb{E}[\hat{f}(x)] - f(x)$$</div>
+                        <p>How far is the average prediction from truth?</p>
+                    </div>
+                    <div class="formula-card">
+                        <div class="formula-header">Variance</div>
+                        <div class="formula-main">$$\text{Variance} = \mathbb{E}[(\hat{f}(x) -
+                            \mathbb{E}[\hat{f}(x)])^2]$$</div>
+                        <p>How much do predictions vary with different training data?</p>
+                    </div>
+                </div>
+
+                <div class="callout-box insight">
+                    <div class="callout-header">💡 The Dartboard Analogy</div>
+                    <table class="comparison-table">
+                        <tr>
+                            <th></th>
+                            <th>Low Variance</th>
+                            <th>High Variance</th>
+                        </tr>
+                        <tr>
+                            <td><strong>Low Bias</strong></td>
+                            <td>🎯 Tight cluster on bullseye (IDEAL)</td>
+                            <td>Scattered around bullseye</td>
+                        </tr>
+                        <tr>
+                            <td><strong>High Bias</strong></td>
+                            <td>Tight cluster off-center</td>
+                            <td>💀 Scattered AND off-center (WORST)</td>
+                        </tr>
+                    </table>
+                </div>
+
+                <div class="content-card">
+                    <h3>📊 Model Complexity Effects</h3>
+                    <table class="comparison-table">
+                        <tr>
+                            <th>Model Complexity</th>
+                            <th>Bias</th>
+                            <th>Variance</th>
+                            <th>Result</th>
+                        </tr>
+                        <tr>
+                            <td>Too Simple (linear on nonlinear data)</td>
+                            <td>High ⬆</td>
+                            <td>Low ⬇</td>
+                            <td>Underfitting</td>
+                        </tr>
+                        <tr>
+                            <td>Just Right</td>
+                            <td>Medium</td>
+                            <td>Medium</td>
+                            <td>Good Generalization</td>
+                        </tr>
+                        <tr>
+                            <td>Too Complex (high-degree polynomial)</td>
+                            <td>Low ⬇</td>
+                            <td>High ⬆</td>
+                            <td>Overfitting</td>
+                        </tr>
+                    </table>
+                </div>
+
+                <div class="content-card">
+                    <h3>🛠️ Practical Diagnosis</h3>
+                    <ul>
+                        <li><strong>High Bias (Underfitting):</strong> Train AND test error both high → Use more complex
+                            model</li>
+                        <li><strong>High Variance (Overfitting):</strong> Train error low, test error high → Regularize,
+                            get more data</li>
+                    </ul>
+                </div>
+
+                <div class="summary-card">
+                    <h3>🎯 Key Takeaways</h3>
+                    <ul>
+                        <li>Total Error = Bias² + Variance + Noise (can't reduce noise)</li>
+                        <li>Bias: systematic error (wrong assumptions) → Underfitting</li>
+                        <li>Variance: sensitivity to training data → Overfitting</li>
+                        <li>More complex model: ↓ bias, ↑ variance | Simpler model: ↑ bias, ↓ variance</li>
+                        <li>Goal: minimize TOTAL error, not just one component</li>
+                    </ul>
+                </div>
+            </section>
+
+            <section class="topic-section ml-section" id="ml-topic-31" data-subject="machine-learning"
+                style="display: none;">
+                <div class="topic-header">
+                    <span class="topic-number ml-advanced">ML Algorithm 31</span>
+                    <h2>🎭 Ensemble Methods</h2>
+                    <p class="topic-subtitle">Combining multiple models for superior performance</p>
+                </div>
+
+                <div class="content-card">
+                    <h3>📚 The Power of Crowds</h3>
+                    <p>Individual models have weaknesses. By combining multiple models, we can cancel out individual
+                        errors and achieve better predictions than any single model.</p>
+                </div>
+
+                <div class="callout-box insight">
+                    <div class="callout-header">💡 Ensemble Strategy Comparison</div>
+                    <table class="comparison-table">
+                        <tr>
+                            <th>Method</th>
+                            <th>How it Works</th>
+                            <th>Reduces</th>
+                            <th>Example</th>
+                        </tr>
+                        <tr>
+                            <td>Bagging</td>
+                            <td>Parallel models on bootstrap samples, average</td>
+                            <td>Variance</td>
+                            <td>Random Forest</td>
+                        </tr>
+                        <tr>
+                            <td>Boosting</td>
+                            <td>Sequential models correct previous errors</td>
+                            <td>Bias</td>
+                            <td>XGBoost, AdaBoost</td>
+                        </tr>
+                        <tr>
+                            <td>Stacking</td>
+                            <td>Meta-model combines base model predictions</td>
+                            <td>Both</td>
+                            <td>Custom ensemble</td>
+                        </tr>
+                    </table>
+                </div>
+
+                <div class="content-card">
+                    <h3>🧮 Why Bagging Reduces Variance</h3>
+                    <div class="formula-card">
+                        <div class="formula-header">Averaging Reduces Variance</div>
+                        <div class="formula-main">$$\text{Var}\left(\frac{1}{n}\sum_i X_i\right) = \frac{\sigma^2}{n}$$
+                        </div>
+                        <p>If models are uncorrelated, averaging n models reduces variance by factor of n!</p>
+                    </div>
+                </div>
+
+                <div class="content-card">
+                    <h3>🚀 Boosting: Learn from Mistakes</h3>
+                    <div class="formula-card">
+                        <div class="formula-header">AdaBoost Update Rule</div>
+                        <div class="formula-main">$$w_i^{(t+1)} = w_i^{(t)} \cdot e^{\alpha_t \cdot \mathbb{1}[y_i \neq
+                            h_t(x_i)]}$$</div>
+                        <p>Increase weight on misclassified examples → Focus on hard cases</p>
+                    </div>
+                </div>
+
+                <div class="worked-example">
+                    <h4>📝 Worked Example: Ensemble Variance Reduction</h4>
+                    <div class="example-problem">
+                        <p><strong>Problem:</strong> Three independent models each have variance σ² = 9. What's the
+                            variance of their average prediction?</p>
+                    </div>
+                    <div class="example-solution">
+                        <p><strong>Apply variance reduction formula:</strong></p>
+                        <div class="formula-main">$$\text{Var}(\bar{X}) = \frac{\sigma^2}{n} = \frac{9}{3} = 3$$</div>
+
+                        <p><strong>Compare:</strong></p>
+                        <ul>
+                            <li>Single model variance: σ² = 9 (std dev = 3)</li>
+                            <li>Ensemble of 3 variance: σ² = 3 (std dev = 1.73)</li>
+                        </ul>
+                    </div>
+                    <div class="example-answer">
+                        <p><strong>Answer:</strong> Ensemble variance = 3 (reduced by 66%!)</p>
+                        <p><em>Note: With 100 models: variance = 9/100 = 0.09 (almost no variance!)</em></p>
+                    </div>
+                </div>
+
+                <div class="worked-example">
+                    <h4>💻 Python Example</h4>
+                    <div class="code-block">
+                        <code>from sklearn.ensemble import RandomForestClassifier, GradientBoostingClassifier<br>
+from sklearn.ensemble import StackingClassifier<br>
+from sklearn.linear_model import LogisticRegression<br><br>
+# Bagging (Random Forest)<br>
+rf = RandomForestClassifier(n_estimators=100, max_depth=10)<br><br>
+# Boosting (Gradient Boosting)<br>
+gb = GradientBoostingClassifier(n_estimators=100, learning_rate=0.1)<br><br>
+# Stacking (combine RF + GB with LogReg)<br>
+stack = StackingClassifier(<br>
+&nbsp;&nbsp;&nbsp;&nbsp;estimators=[('rf', rf), ('gb', gb)],<br>
+&nbsp;&nbsp;&nbsp;&nbsp;final_estimator=LogisticRegression()<br>
+)<br>
+stack.fit(X_train, y_train)</code>
+                    </div>
+                </div>
+
+                <div class="summary-card">
+                    <h3>🎯 Key Takeaways</h3>
+                    <ul>
+                        <li>Ensembles combine multiple models → better than any single model</li>
+                        <li>Bagging: parallel, reduces variance (Random Forest)</li>
+                        <li>Boosting: sequential, reduces bias (XGBoost, LightGBM)</li>
+                        <li>Stacking: meta-model learns optimal combination</li>
+                        <li>Ensemble methods dominate Kaggle competitions!</li>
+                    </ul>
+                </div>
+            </section>
+
+            <section class="topic-section ml-section" id="ml-topic-32" data-subject="machine-learning"
+                style="display: none;">
+                <div class="topic-header">
+                    <span class="topic-number ml-advanced">ML Algorithm 32</span>
+                    <h2>🔧 Feature Engineering</h2>
+                    <p class="topic-subtitle">The art of creating powerful features from raw data</p>
+                </div>
+
+                <div class="content-card">
+                    <h3>📚 Why Feature Engineering Matters</h3>
+                    <p>"Coming up with features is difficult, time-consuming, requires expert knowledge. Applied machine
+                        learning is basically feature engineering." — Andrew Ng</p>
+                    <p>Good features can make a simple model outperform a complex one with poor features.</p>
+                </div>
+
+                <div class="callout-box insight">
+                    <div class="callout-header">💡 Essential Techniques</div>
+                    <table class="comparison-table">
+                        <tr>
+                            <th>Category</th>
+                            <th>Technique</th>
+                            <th>Example</th>
+                        </tr>
+                        <tr>
+                            <td>Scaling</td>
+                            <td>StandardScaler, MinMax</td>
+                            <td>Z-score: (x - μ) / σ</td>
+                        </tr>
+                        <tr>
+                            <td>Encoding</td>
+                            <td>One-Hot, Label, Target</td>
+                            <td>Color → [1,0,0], [0,1,0]</td>
+                        </tr>
+                        <tr>
+                            <td>Transformation</td>
+                            <td>Log, Square Root, Box-Cox</td>
+                            <td>log(price) for skewed data</td>
+                        </tr>
+                        <tr>
+                            <td>Interaction</td>
+                            <td>Multiply features</td>
+                            <td>area = length × width</td>
+                        </tr>
+                        <tr>
+                            <td>Polynomial</td>
+                            <td>Higher order terms</td>
+                            <td>x, x², x³</td>
+                        </tr>
+                        <tr>
+                            <td>Binning</td>
+                            <td>Discretize continuous</td>
+                            <td>Age → [0-18, 18-30, 30+]</td>
+                        </tr>
+                    </table>
+                </div>
+
+                <div class="content-card">
+                    <h3>📊 Handling Different Data Types</h3>
+                    <ul>
+                        <li><strong>Numeric:</strong> Scale (StandardScaler), transform (log), create interactions</li>
+                        <li><strong>Categorical:</strong> One-hot for low cardinality, target encoding for high</li>
+                        <li><strong>Text:</strong> TF-IDF, word embeddings, n-grams</li>
+                        <li><strong>Dates:</strong> Extract year, month, day_of_week, is_holiday</li>
+                    </ul>
+                </div>
+
+                <div class="worked-example">
+                    <h4>📝 Python Example</h4>
+                    <div class="code-block">
+                        <code>from sklearn.preprocessing import StandardScaler, OneHotEncoder<br>
+from sklearn.preprocessing import PolynomialFeatures<br>
+import numpy as np<br><br>
+# Scaling<br>
+scaler = StandardScaler()<br>
+X_scaled = scaler.fit_transform(X_numeric)<br><br>
+# One-hot encoding<br>
+encoder = OneHotEncoder(sparse=False)<br>
+X_encoded = encoder.fit_transform(X_categorical)<br><br>
+# Polynomial features<br>
+poly = PolynomialFeatures(degree=2, include_bias=False)<br>
+X_poly = poly.fit_transform(X)  # Creates x1, x2, x1², x2², x1*x2<br><br>
+# Log transform for skewed data<br>
+X['log_price'] = np.log1p(X['price'])</code>
+                    </div>
+                </div>
+
+                <div class="summary-card">
+                    <h3>🎯 Key Takeaways</h3>
+                    <ul>
+                        <li>Feature engineering often matters MORE than model choice</li>
+                        <li>Scale numeric features (StandardScaler for most algorithms)</li>
+                        <li>Encode categoricals (one-hot, target encoding)</li>
+                        <li>Create domain-specific features (ratios, interactions)</li>
+                        <li>Log-transform skewed distributions</li>
+                    </ul>
+                </div>
+            </section>
+
+            <section class="topic-section ml-section" id="ml-topic-33" data-subject="machine-learning"
+                style="display: none;">
+                <div class="topic-header">
+                    <span class="topic-number ml-advanced">ML Algorithm 33</span>
+                    <h2>⚖️ Handling Imbalanced Data</h2>
+                    <p class="topic-subtitle">Strategies when one class dominates your dataset</p>
+                </div>
+
+                <div class="content-card">
+                    <h3>📚 The Problem</h3>
+                    <p>Imagine fraud detection: 99.9% of transactions are legitimate. A model predicting "no fraud"
+                        always gets 99.9% accuracy but catches zero frauds! Accuracy is meaningless here.</p>
+                </div>
+
+                <div class="callout-box insight">
+                    <div class="callout-header">💡 Solution Strategies</div>
+                    <table class="comparison-table">
+                        <tr>
+                            <th>Strategy</th>
+                            <th>How it Works</th>
+                            <th>Pros</th>
+                            <th>Cons</th>
+                        </tr>
+                        <tr>
+                            <td>SMOTE</td>
+                            <td>Create synthetic minority examples</td>
+                            <td>More minority examples</td>
+                            <td>Can create noise</td>
+                        </tr>
+                        <tr>
+                            <td>Undersampling</td>
+                            <td>Remove majority examples</td>
+                            <td>Fast, simple</td>
+                            <td>Loses information</td>
+                        </tr>
+                        <tr>
+                            <td>Class Weights</td>
+                            <td>Penalize minority errors more</td>
+                            <td>No data change</td>
+                            <td>Needs tuning</td>
+                        </tr>
+                        <tr>
+                            <td>Different Metric</td>
+                            <td>Use F1, AUC instead of accuracy</td>
+                            <td>Proper evaluation</td>
+                            <td>Still need strategy</td>
+                        </tr>
+                    </table>
+                </div>
+
+                <div class="content-card">
+                    <h3>🧮 SMOTE: Synthetic Minority Oversampling</h3>
+                    <p>Creates new minority examples by interpolating between existing ones:</p>
+                    <div class="formula-card">
+                        <div class="formula-header">SMOTE Synthetic Point</div>
+                        <div class="formula-main">$$x_{new} = x_i + \lambda \cdot (x_{nn} - x_i)$$</div>
+                        <p>$x_i$ = original minority point, $x_{nn}$ = nearest neighbor, $\lambda \in [0,1]$</p>
+                    </div>
+                </div>
+
+                <div class="worked-example">
+                    <h4>📝 Worked Example: SMOTE Synthetic Point</h4>
+                    <div class="example-problem">
+                        <p><strong>Problem:</strong> Create a synthetic minority point using SMOTE.</p>
+                        <p>Original point: $x_i = (2, 4)$. Nearest neighbor: $x_{nn} = (6, 8)$. Random λ = 0.3</p>
+                    </div>
+                    <div class="example-solution">
+                        <p><strong>Apply SMOTE formula:</strong></p>
+                        <div class="formula-main">$$x_{new} = x_i + \lambda \cdot (x_{nn} - x_i)$$</div>
+                        <div class="formula-main">$$x_{new} = (2, 4) + 0.3 \cdot ((6, 8) - (2, 4))$$</div>
+                        <div class="formula-main">$$x_{new} = (2, 4) + 0.3 \cdot (4, 4)$$</div>
+                        <div class="formula-main">$$x_{new} = (2, 4) + (1.2, 1.2) = (3.2, 5.2)$$</div>
+                    </div>
+                    <div class="example-answer">
+                        <p><strong>Answer:</strong> New synthetic minority point: (3.2, 5.2)</p>
+                        <p><em>Note: The new point lies on the line between original and its neighbor!</em></p>
+                    </div>
                 </div>
-                <div class="content-card">
-                    <p>Optimizing model settings: learning rate, regularization, tree depth, etc. Methods: Grid search, random search, Bayesian optimization.</p>
+
+                <div class="worked-example">
+                    <h4>💻 Python Example</h4>
+                    <div class="code-block">
+                        <code>from imblearn.over_sampling import SMOTE<br>
+from imblearn.under_sampling import RandomUnderSampler<br>
+from sklearn.ensemble import RandomForestClassifier<br><br>
+# Before: 95% class 0, 5% class 1<br>
+print(f"Before: {sum(y==0)} vs {sum(y==1)}")<br><br>
+# SMOTE oversampling<br>
+smote = SMOTE(random_state=42)<br>
+X_resampled, y_resampled = smote.fit_resample(X, y)<br>
+print(f"After SMOTE: {sum(y_resampled==0)} vs {sum(y_resampled==1)}")<br><br>
+# Or use class weights (simpler)<br>
+clf = RandomForestClassifier(class_weight='balanced')<br>
+clf.fit(X_train, y_train)</code>
+                    </div>
                 </div>
+
                 <div class="summary-card">
                     <h3>🎯 Key Takeaways</h3>
                     <ul>
-                        <li>Hyperparameters set before training</li>
-                        <li>Use validation set or CV for tuning</li>
-                        <li>Never tune on test set!</li>
+                        <li>Accuracy is meaningless with imbalanced classes</li>
+                        <li>Use F1-score, Precision, Recall, or AUC instead</li>
+                        <li>SMOTE: synthetic minority examples (don't apply to test set!)</li>
+                        <li>Class weights: penalize errors on minority class more</li>
+                        <li>Combine strategies: SMOTE + class weights often works best</li>
                     </ul>
                 </div>
             </section>
 
-            <section class="topic-section ml-section" id="ml-topic-28" data-subject="machine-learning" style="display: none;">
+            <section class="topic-section ml-section" id="ml-topic-34" data-subject="machine-learning"
+                style="display: none;">
                 <div class="topic-header">
-                    <span class="topic-number ml-advanced">ML Algorithm 28</span>
-                    <h2>📊 Model Evaluation Metrics</h2>
+                    <span class="topic-number ml-advanced">ML Algorithm 34</span>
+                    <h2>📈 Time Series Analysis</h2>
+                    <p class="topic-subtitle">Predicting future values from sequential, temporal data</p>
                 </div>
+
                 <div class="content-card">
-                    <p><strong>Classification:</strong> Accuracy, Precision, Recall, F1-Score, ROC-AUC. <strong>Regression:</strong> MSE, RMSE, MAE, R². Choose based on problem.</p>
-                </div>
-                <div class="summary-card">
-                    <h3>🎯 Key Takeaways</h3>
+                    <h3>📚 What Makes Time Series Special?</h3>
+                    <p>Time series data has <strong>temporal structure</strong>: today's value depends on yesterday's.
+                        You cannot shuffle data randomly like in regular ML!</p>
                     <ul>
-                        <li>Accuracy misleading with imbalanced classes</li>
-                        <li>F1-Score balances precision and recall</li>
-                        <li>ROC-AUC for probability predictions</li>
+                        <li><strong>Trend:</strong> Long-term direction (up/down)</li>
+                        <li><strong>Seasonality:</strong> Regular periodic patterns (daily, weekly, yearly)</li>
+                        <li><strong>Autocorrelation:</strong> Correlation with past values</li>
                     </ul>
                 </div>
-            </section>
 
-            <section class="topic-section ml-section" id="ml-topic-29" data-subject="machine-learning" style="display: none;">
-                <div class="topic-header">
-                    <span class="topic-number ml-advanced">ML Algorithm 29</span>
-                    <h2>🎯 Regularization Techniques</h2>
+                <div class="callout-box insight">
+                    <div class="callout-header">💡 Method Comparison</div>
+                    <table class="comparison-table">
+                        <tr>
+                            <th>Method</th>
+                            <th>Best For</th>
+                            <th>Complexity</th>
+                        </tr>
+                        <tr>
+                            <td>ARIMA</td>
+                            <td>Linear patterns, univariate</td>
+                            <td>Medium</td>
+                        </tr>
+                        <tr>
+                            <td>LSTM/GRU</td>
+                            <td>Non-linear, multivariate</td>
+                            <td>High</td>
+                        </tr>
+                        <tr>
+                            <td>Prophet</td>
+                            <td>Business forecasting, easy use</td>
+                            <td>Low</td>
+                        </tr>
+                        <tr>
+                            <td>XGBoost</td>
+                            <td>With lag features</td>
+                            <td>Medium</td>
+                        </tr>
+                    </table>
                 </div>
+
                 <div class="content-card">
-                    <p><strong>L1 (Lasso):</strong> Sparse. <strong>L2 (Ridge):</strong> Smooth. <strong>Dropout:</strong> Random neuron deactivation. <strong>Early Stopping:</strong> Stop when validation error increases.</p>
+                    <h3>🧮 ARIMA: AutoRegressive Integrated Moving Average</h3>
+                    <div class="formula-card">
+                        <div class="formula-header">ARIMA(p, d, q) Model</div>
+                        <div class="formula-main">$$y_t = c + \phi_1 y_{t-1} + ... + \phi_p y_{t-p} + \theta_1
+                            \epsilon_{t-1} + ... + \theta_q \epsilon_{t-q} + \epsilon_t$$</div>
+                        <p><strong>p</strong> = AR lags, <strong>d</strong> = differencing order, <strong>q</strong> =
+                            MA lags</p>
+                    </div>
                 </div>
-                <div class="summary-card">
-                    <h3>🎯 Key Takeaways</h3>
+
+                <div class="content-card">
+                    <h3>⚠️ Critical Rules</h3>
                     <ul>
-                        <li>Prevents overfitting by constraining model complexity</li>
-                        <li>L1/L2 for linear models, dropout for neural nets</li>
-                        <li>Early stopping: monitor validation loss</li>
+                        <li><strong>NEVER shuffle:</strong> Train on past, validate on future</li>
+                        <li><strong>Stationarity:</strong> Mean and variance constant over time (use differencing)</li>
+                        <li><strong>Walk-forward validation:</strong> Train → predict → expand training window</li>
                     </ul>
                 </div>
-            </section>
 
-            <section class="topic-section ml-section" id="ml-topic-30" data-subject="machine-learning" style="display: none;">
-                <div class="topic-header">
-                    <span class="topic-number ml-advanced">ML Algorithm 30</span>
-                    <h2>⚖️ Bias-Variance Tradeoff</h2>
-                </div>
-                <div class="content-card">
-                    <p>Total Error = Bias² + Variance + Noise. <strong>High Bias:</strong> Underfitting (too simple). <strong>High Variance:</strong> Overfitting (too complex). Goal: balance both.</p>
+                <div class="worked-example">
+                    <h4>📝 Python Example</h4>
+                    <div class="code-block">
+                        <code>from statsmodels.tsa.arima.model import ARIMA<br>
+from prophet import Prophet<br>
+import pandas as pd<br><br>
+# ARIMA<br>
+model = ARIMA(y_train, order=(2, 1, 2))  # (p, d, q)<br>
+fit = model.fit()<br>
+forecast = fit.forecast(steps=30)<br><br>
+# Prophet (requires 'ds' and 'y' columns)<br>
+df = pd.DataFrame({'ds': dates, 'y': values})<br>
+prophet = Prophet(yearly_seasonality=True)<br>
+prophet.fit(df)<br>
+future = prophet.make_future_dataframe(periods=30)<br>
+prediction = prophet.predict(future)</code>
+                    </div>
                 </div>
+
                 <div class="summary-card">
                     <h3>🎯 Key Takeaways</h3>
                     <ul>
-                        <li>Bias: error from wrong assumptions (underfitting)</li>
-                        <li>Variance: error from sensitivity to training data (overfitting)</li>
-                        <li>Sweet spot: model complex enough but not too complex</li>
+                        <li>Time series has temporal structure → no random shuffling!</li>
+                        <li>Decompose into: Trend + Seasonality + Residuals</li>
+                        <li>ARIMA for linear patterns, LSTM for complex non-linear</li>
+                        <li>Prophet: easy-to-use, handles holidays and seasonality</li>
+                        <li>Always validate using walk-forward (time-respecting) splits</li>
                     </ul>
                 </div>
             </section>
 
-            <section class="topic-section ml-section" id="ml-topic-31" data-subject="machine-learning" style="display: none;">
+            <section class="topic-section ml-section" id="ml-topic-35" data-subject="machine-learning"
+                style="display: none;">
                 <div class="topic-header">
-                    <span class="topic-number ml-advanced">ML Algorithm 31</span>
-                    <h2>🎭 Ensemble Methods</h2>
+                    <span class="topic-number ml-advanced">ML Algorithm 35</span>
+                    <h2>🚨 Anomaly Detection</h2>
+                    <p class="topic-subtitle">Finding rare, unusual observations in your data</p>
                 </div>
+
                 <div class="content-card">
-                    <p><strong>Bagging:</strong> Parallel models, average predictions (Random Forest). <strong>Boosting:</strong> Sequential, correct errors (XGBoost). <strong>Stacking:</strong> Meta-model combines base models.</p>
-                </div>
-                <div class="summary-card">
-                    <h3>🎯 Key Takeaways</h3>
-                    <ul>
-                        <li>Combine multiple models for better performance</li>
-                        <li>Bagging reduces variance, Boosting reduces bias</li>
-                        <li>Often wins Kaggle competitions</li>
-                    </ul>
+                    <h3>📚 What is Anomaly Detection?</h3>
+                    <p>Also called outlier detection. Goal: identify data points that are "different" from the normal
+                        pattern. Critical for fraud detection, network security, quality control.</p>
                 </div>
-            </section>
 
-            <section class="topic-section ml-section" id="ml-topic-32" data-subject="machine-learning" style="display: none;">
-                <div class="topic-header">
-                    <span class="topic-number ml-advanced">ML Algorithm 32</span>
-                    <h2>🔧 Feature Engineering</h2>
+                <div class="callout-box insight">
+                    <div class="callout-header">💡 Method Comparison</div>
+                    <table class="comparison-table">
+                        <tr>
+                            <th>Method</th>
+                            <th>How it Works</th>
+                            <th>Best For</th>
+                        </tr>
+                        <tr>
+                            <td>Isolation Forest</td>
+                            <td>Isolates anomalies via random splits</td>
+                            <td>High-dimensional data</td>
+                        </tr>
+                        <tr>
+                            <td>One-Class SVM</td>
+                            <td>Learns boundary around normal data</td>
+                            <td>Clear normal region</td>
+                        </tr>
+                        <tr>
+                            <td>Autoencoder</td>
+                            <td>High reconstruction error = anomaly</td>
+                            <td>Complex patterns</td>
+                        </tr>
+                        <tr>
+                            <td>Z-Score</td>
+                            <td>Points > 3 std away</td>
+                            <td>Univariate, Gaussian</td>
+                        </tr>
+                        <tr>
+                            <td>IQR</td>
+                            <td>Points outside Q1-1.5×IQR, Q3+1.5×IQR</td>
+                            <td>Robust to normality</td>
+                        </tr>
+                    </table>
                 </div>
+
                 <div class="content-card">
-                    <p>Creating new features from existing ones. Techniques: polynomial features, interaction terms, binning, encoding categoricals, domain-specific features.</p>
+                    <h3>🌲 Isolation Forest: Key Insight</h3>
+                    <p>Anomalies are rare and different → they get isolated quickly by random splits!</p>
+                    <div class="formula-card">
+                        <div class="formula-header">Anomaly Score</div>
+                        <div class="formula-main">$$s(x) = 2^{-\frac{E[h(x)]}{c(n)}}$$</div>
+                        <p>$h(x)$ = path length to isolate point, $c(n)$ = average path length in random tree. Score
+                            close to 1 = anomaly!</p>
+                    </div>
                 </div>
+
+                <div class="worked-example">
+                    <h4>📝 Python Example</h4>
+                    <div class="code-block">
+                        <code>from sklearn.ensemble import IsolationForest<br>
+from sklearn.preprocessing import StandardScaler<br>
+import numpy as np<br><br>
+# Statistical method (Z-score)<br>
+z_scores = np.abs((X - X.mean()) / X.std())<br>
+anomalies_zscore = z_scores > 3<br><br>
+# Isolation Forest<br>
+iso_forest = IsolationForest(<br>
+&nbsp;&nbsp;&nbsp;&nbsp;contamination=0.01,  # Expected % of anomalies<br>
+&nbsp;&nbsp;&nbsp;&nbsp;random_state=42<br>
+)<br>
+predictions = iso_forest.fit_predict(X)<br>
+anomalies = predictions == -1  # -1 = anomaly<br><br>
+print(f"Found {sum(anomalies)} anomalies out of {len(X)}")</code>
+                    </div>
+                </div>
+
                 <div class="summary-card">
                     <h3>🎯 Key Takeaways</h3>
                     <ul>
-                        <li>Often more important than algorithm choice</li>
-                        <li>Domain knowledge crucial</li>
-                        <li>Techniques: scaling, encoding, transformations, interactions</li>
+                        <li>Anomaly detection finds rare, unusual observations</li>
+                        <li>Isolation Forest: anomalies isolated quickly via random splits</li>
+                        <li>Autoencoder: anomalies have high reconstruction error</li>
+                        <li>Applications: fraud, intrusion detection, quality control</li>
+                        <li>Set contamination based on expected anomaly rate</li>
                     </ul>
                 </div>
             </section>
 
-            <section class="topic-section ml-section" id="ml-topic-33" data-subject="machine-learning" style="display: none;">
+            <section class="topic-section ml-section" id="ml-topic-36" data-subject="machine-learning"
+                style="display: none;">
                 <div class="topic-header">
-                    <span class="topic-number ml-advanced">ML Algorithm 33</span>
-                    <h2>⚖️ Handling Imbalanced Data</h2>
+                    <span class="topic-number ml-advanced">ML Algorithm 36</span>
+                    <h2>🔄 Transfer Learning</h2>
+                    <p class="topic-subtitle">Leveraging knowledge from pre-trained models</p>
                 </div>
+
                 <div class="content-card">
-                    <p>When one class dominates: <strong>SMOTE</strong> (synthetic minority oversampling), <strong>undersampling</strong>, <strong>class weights</strong>, or use metrics like F1/ROC-AUC instead of accuracy.</p>
+                    <h3>📚 The Big Idea</h3>
+                    <p>Why train from scratch when someone already trained a great model? Take a model trained on
+                        millions of images (ImageNet) and adapt it to your task with little data!</p>
+                    <p><strong>Example:</strong> ImageNet model learned to recognize edges → shapes → objects. These
+                        features are useful for YOUR image task too!</p>
                 </div>
-                <div class="summary-card">
-                    <h3>🎯 Key Takeaways</h3>
+
+                <div class="callout-box insight">
+                    <div class="callout-header">💡 Transfer Learning Strategies</div>
+                    <table class="comparison-table">
+                        <tr>
+                            <th>Strategy</th>
+                            <th>When to Use</th>
+                            <th>Action</th>
+                        </tr>
+                        <tr>
+                            <td>Feature Extraction</td>
+                            <td>Small data, similar domain</td>
+                            <td>Freeze all, add new head</td>
+                        </tr>
+                        <tr>
+                            <td>Fine-Tuning (Top)</td>
+                            <td>Medium data</td>
+                            <td>Train top layers only</td>
+                        </tr>
+                        <tr>
+                            <td>Full Fine-Tuning</td>
+                            <td>Large data, different domain</td>
+                            <td>Unfreeze all, small LR</td>
+                        </tr>
+                    </table>
+                </div>
+
+                <div class="content-card">
+                    <h3>🏗️ Network Structure</h3>
                     <ul>
-                        <li>Accuracy misleading with imbalanced classes</li>
-                        <li>SMOTE: create synthetic minority examples</li>
-                        <li>Class weights: penalize minority errors more</li>
+                        <li><strong>Base Model:</strong> Pre-trained CNN (ResNet, VGG, EfficientNet)</li>
+                        <li><strong>Custom Head:</strong> Your layers for your specific task</li>
+                        <li><strong>Freeze:</strong> Set trainable=False for layers you don't want to update</li>
                     </ul>
                 </div>
-            </section>
 
-            <section class="topic-section ml-section" id="ml-topic-34" data-subject="machine-learning" style="display: none;">
-                <div class="topic-header">
-                    <span class="topic-number ml-advanced">ML Algorithm 34</span>
-                    <h2>📈 Time Series Analysis</h2>
-                </div>
-                <div class="content-card">
-                    <p>Sequential data with temporal dependency. Models: ARIMA, LSTM, Prophet. Key: train/test split must respect time order (no shuffling!).</p>
+                <div class="worked-example">
+                    <h4>📝 Keras Example</h4>
+                    <div class="code-block">
+                        <code>from tensorflow.keras.applications import ResNet50<br>
+from tensorflow.keras.layers import Dense, GlobalAveragePooling2D<br>
+from tensorflow.keras.models import Model<br><br>
+# Load pre-trained model (without top classification layer)<br>
+base_model = ResNet50(weights='imagenet', include_top=False)<br><br>
+# Freeze base model<br>
+base_model.trainable = False<br><br>
+# Add custom classification head<br>
+x = GlobalAveragePooling2D()(base_model.output)<br>
+x = Dense(256, activation='relu')(x)<br>
+output = Dense(num_classes, activation='softmax')(x)<br><br>
+model = Model(base_model.input, output)<br>
+model.compile(optimizer='adam', loss='categorical_crossentropy')</code>
+                    </div>
                 </div>
+
                 <div class="summary-card">
                     <h3>🎯 Key Takeaways</h3>
                     <ul>
-                        <li>Temporal structure matters - no random splitting</li>
-                        <li>ARIMA for linear, LSTM for non-linear patterns</li>
-                        <li>Handle seasonality, trend, autocorrelation</li>
+                        <li>Use pre-trained models → faster training, less data needed</li>
+                        <li>Feature extraction: freeze everything, just train new head</li>
+                        <li>Fine-tuning: unfreeze some layers, use lower learning rate</li>
+                        <li>Popular models: ResNet, EfficientNet (vision), BERT (NLP)</li>
+                        <li>Transfer works if source and target domains are related</li>
                     </ul>
                 </div>
             </section>
 
-            <section class="topic-section ml-section" id="ml-topic-35" data-subject="machine-learning" style="display: none;">
+            <section class="topic-section ml-section" id="ml-topic-37" data-subject="machine-learning"
+                style="display: none;">
                 <div class="topic-header">
-                    <span class="topic-number ml-advanced">ML Algorithm 35</span>
-                    <h2>🚨 Anomaly Detection</h2>
+                    <span class="topic-number ml-advanced">ML Algorithm 37</span>
+                    <h2>🎯 Fine-Tuning Pre-trained Models</h2>
+                    <p class="topic-subtitle">Carefully adapting pre-trained models to your specific task</p>
                 </div>
+
                 <div class="content-card">
-                    <p>Finding rare, unusual observations. Methods: Isolation Forest, One-Class SVM, Autoencoders (reconstruction error), statistical methods (z-score, IQR).</p>
+                    <h3>📚 Fine-Tuning vs Feature Extraction</h3>
+                    <p><strong>Feature Extraction:</strong> Freeze all pre-trained layers, only train new head.</p>
+                    <p><strong>Fine-Tuning:</strong> Unfreeze some/all layers and continue training with your data. More
+                        powerful but risky!</p>
                 </div>
-                <div class="summary-card">
-                    <h3>🎯 Key Takeaways</h3>
+
+                <div class="callout-box warning">
+                    <div class="callout-header">⚠️ Critical: Avoid Catastrophic Forgetting!</div>
+                    <p>If you train too aggressively, the model "forgets" what it learned. Solutions:</p>
                     <ul>
-                        <li>Identifies outliers/anomalies in data</li>
-                        <li>Isolation Forest: isolates anomalies faster</li>
-                        <li>Applications: fraud detection, quality control</li>
+                        <li><strong>Lower learning rate:</strong> 10-100x smaller than training from scratch</li>
+                        <li><strong>Progressive unfreezing:</strong> Unfreeze layers gradually</li>
+                        <li><strong>Discriminative LRs:</strong> Lower LR for early layers, higher for later</li>
                     </ul>
                 </div>
-            </section>
 
-            <section class="topic-section ml-section" id="ml-topic-36" data-subject="machine-learning" style="display: none;">
-                <div class="topic-header">
-                    <span class="topic-number ml-advanced">ML Algorithm 36</span>
-                    <h2>🔄 Transfer Learning</h2>
-                </div>
                 <div class="content-card">
-                    <p>Use pre-trained model on new task. Take model trained on ImageNet, adapt to your problem. Faster training, needs less data.</p>
+                    <h3>📊 Fine-Tuning Strategy</h3>
+                    <table class="comparison-table">
+                        <tr>
+                            <th>Phase</th>
+                            <th>Action</th>
+                            <th>Learning Rate</th>
+                        </tr>
+                        <tr>
+                            <td>1. Train head</td>
+                            <td>Freeze all, train new layers</td>
+                            <td>Normal (1e-3)</td>
+                        </tr>
+                        <tr>
+                            <td>2. Unfreeze top</td>
+                            <td>Unfreeze last 2-3 blocks</td>
+                            <td>Very low (1e-5)</td>
+                        </tr>
+                        <tr>
+                            <td>3. Full fine-tune</td>
+                            <td>Unfreeze all (optional)</td>
+                            <td>Extremely low (1e-6)</td>
+                        </tr>
+                    </table>
+                </div>
+
+                <div class="worked-example">
+                    <h4>📝 Progressive Fine-Tuning Example</h4>
+                    <div class="code-block">
+                        <code># Phase 1: Train only the head<br>
+base_model.trainable = False<br>
+model.compile(optimizer=Adam(1e-3), loss='categorical_crossentropy')<br>
+model.fit(X_train, y_train, epochs=5)<br><br>
+# Phase 2: Unfreeze top layers<br>
+base_model.trainable = True<br>
+for layer in base_model.layers[:-20]:  # Freeze all but last 20<br>
+&nbsp;&nbsp;&nbsp;&nbsp;layer.trainable = False<br><br>
+# Use very low learning rate!<br>
+model.compile(optimizer=Adam(1e-5), loss='categorical_crossentropy')<br>
+model.fit(X_train, y_train, epochs=10)</code>
+                    </div>
                 </div>
+
                 <div class="summary-card">
                     <h3>🎯 Key Takeaways</h3>
                     <ul>
-                        <li>Leverage knowledge from source task</li>
-                        <li>Common in computer vision (ImageNet models)</li>
-                        <li>Freeze early layers, train final layers</li>
+                        <li>Fine-tuning = continue training pre-trained model on your data</li>
+                        <li>Use MUCH lower learning rate (10-100x smaller)</li>
+                        <li>Progressive unfreezing: head first → top layers → all layers</li>
+                        <li>Early layers learn generic features (edges) → freeze these</li>
+                        <li>Later layers learn task-specific features → fine-tune these</li>
                     </ul>
                 </div>
             </section>
 
-            <section class="topic-section ml-section" id="ml-topic-37" data-subject="machine-learning" style="display: none;">
+            <section class="topic-section ml-section" id="ml-topic-38" data-subject="machine-learning"
+                style="display: none;">
                 <div class="topic-header">
-                    <span class="topic-number ml-advanced">ML Algorithm 37</span>
-                    <h2>🎯 Fine-Tuning Pre-trained Models</h2>
+                    <span class="topic-number ml-advanced">ML Algorithm 38</span>
+                    <h2>🔍 Model Interpretability & SHAP</h2>
+                    <p class="topic-subtitle">Understanding why your model made a specific prediction</p>
                 </div>
+
                 <div class="content-card">
-                    <p>Start with pre-trained weights, continue training on new data. Lower learning rate, selectively unfreeze layers. Balances speed and customization.</p>
-                </div>
-                <div class="summary-card">
-                    <h3>🎯 Key Takeaways</h3>
+                    <h3>📚 Why Interpretability Matters</h3>
+                    <p>"Why did you reject my loan?" Models must explain themselves for:</p>
                     <ul>
-                        <li>Adapt pre-trained model to specific task</li>
-                        <li>Use lower learning rate to avoid catastrophic forgetting</li>
-                        <li>Unfreeze layers gradually from top</li>
+                        <li><strong>Trust:</strong> Users need to understand predictions</li>
+                        <li><strong>Debugging:</strong> Find if model learned wrong patterns</li>
+                        <li><strong>Regulation:</strong> GDPR requires "right to explanation"</li>
                     </ul>
                 </div>
-            </section>
 
-            <section class="topic-section ml-section" id="ml-topic-38" data-subject="machine-learning" style="display: none;">
-                <div class="topic-header">
-                    <span class="topic-number ml-advanced">ML Algorithm 38</span>
-                    <h2>🔍 Model Interpretability &amp; SHAP</h2>
+                <div class="callout-box insight">
+                    <div class="callout-header">💡 Interpretability Methods</div>
+                    <table class="comparison-table">
+                        <tr>
+                            <th>Method</th>
+                            <th>Scope</th>
+                            <th>How it Works</th>
+                        </tr>
+                        <tr>
+                            <td>SHAP</td>
+                            <td>Local + Global</td>
+                            <td>Game theory: fair credit to each feature</td>
+                        </tr>
+                        <tr>
+                            <td>LIME</td>
+                            <td>Local</td>
+                            <td>Fits simple model around prediction</td>
+                        </tr>
+                        <tr>
+                            <td>Feature Importance</td>
+                            <td>Global</td>
+                            <td>Average contribution across dataset</td>
+                        </tr>
+                        <tr>
+                            <td>Partial Dependence</td>
+                            <td>Global</td>
+                            <td>Effect of feature while averaging others</td>
+                        </tr>
+                    </table>
                 </div>
+
                 <div class="content-card">
-                    <p><strong>SHAP:</strong> SHapley Additive exPlanations. Assigns each feature an importance value for prediction. Based on game theory (Shapley values).</p>
+                    <h3>🧮 SHAP: SHapley Additive exPlanations</h3>
+                    <div class="formula-card">
+                        <div class="formula-header">Shapley Value Formula</div>
+                        <div class="formula-main">$$\phi_i = \sum_{S \subseteq N \setminus \{i\}}
+                            \frac{|S|!(n-|S|-1)!}{n!}[f(S \cup \{i\}) - f(S)]$$</div>
+                        <p>Measures each feature's contribution by averaging over all possible feature coalitions</p>
+                    </div>
+                    <p><strong>Interpretation:</strong> Positive SHAP → pushes prediction up. Negative → pushes down.
+                    </p>
+                </div>
+
+                <div class="worked-example">
+                    <h4>📝 Python Example</h4>
+                    <div class="code-block">
+                        <code>import shap<br><br>
+# Train your model<br>
+model = XGBClassifier().fit(X_train, y_train)<br><br>
+# Create SHAP explainer<br>
+explainer = shap.TreeExplainer(model)<br>
+shap_values = explainer.shap_values(X_test)<br><br>
+# Visualize single prediction<br>
+shap.force_plot(explainer.expected_value, <br>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;shap_values[0], X_test.iloc[0])<br><br>
+# Global feature importance<br>
+shap.summary_plot(shap_values, X_test)</code>
+                    </div>
                 </div>
+
                 <div class="summary-card">
                     <h3>🎯 Key Takeaways</h3>
                     <ul>
-                        <li>Explains individual predictions</li>
-                        <li>SHAP values show feature contributions</li>
-                        <li>LIME: Local Interpretable Model-agnostic Explanations</li>
+                        <li>Interpretability: understand WHY a prediction was made</li>
+                        <li>SHAP: fair attribution based on game theory (Shapley values)</li>
+                        <li>LIME: local approximation with simple interpretable model</li>
+                        <li>SHAP values sum to (prediction - average prediction)</li>
+                        <li>Essential for regulated industries (finance, healthcare)</li>
                     </ul>
                 </div>
             </section>
 
-            <section class="topic-section ml-section" id="ml-topic-39" data-subject="machine-learning" style="display: none;">
+            <section class="topic-section ml-section" id="ml-topic-39" data-subject="machine-learning"
+                style="display: none;">
                 <div class="topic-header">
                     <span class="topic-number ml-advanced">ML Algorithm 39</span>
                     <h2>⚡ Optimization Algorithms (Adam, RMSprop)</h2>
+                    <p class="topic-subtitle">How neural networks learn: from SGD to modern optimizers</p>
+                </div>
+
+                <div class="content-card">
+                    <h3>🧮 The Optimization Problem</h3>
+                    <p>Training = finding weights that minimize loss. We use gradient descent variants:</p>
+                    <div class="formula-card">
+                        <div class="formula-header">Basic Gradient Descent</div>
+                        <div class="formula-main">$$\theta_{t+1} = \theta_t - \eta \nabla L(\theta_t)$$</div>
+                        <p>Move opposite to gradient. $\eta$ = learning rate.</p>
+                    </div>
+                </div>
+
+                <div class="callout-box insight">
+                    <div class="callout-header">💡 Optimizer Comparison</div>
+                    <table class="comparison-table">
+                        <tr>
+                            <th>Optimizer</th>
+                            <th>Key Feature</th>
+                            <th>Best For</th>
+                        </tr>
+                        <tr>
+                            <td>SGD</td>
+                            <td>Simple, just gradients</td>
+                            <td>Baseline, often better final accuracy</td>
+                        </tr>
+                        <tr>
+                            <td>SGD+Momentum</td>
+                            <td>Accumulates gradients</td>
+                            <td>Faster convergence</td>
+                        </tr>
+                        <tr>
+                            <td>RMSprop</td>
+                            <td>Adaptive per-param LR</td>
+                            <td>RNNs, non-stationary</td>
+                        </tr>
+                        <tr>
+                            <td>Adam</td>
+                            <td>Momentum + Adaptive</td>
+                            <td>Default choice, fast</td>
+                        </tr>
+                        <tr>
+                            <td>AdamW</td>
+                            <td>Adam + weight decay</td>
+                            <td>Transformer models</td>
+                        </tr>
+                    </table>
                 </div>
+
                 <div class="content-card">
-                    <p><strong>Adam:</strong> Adaptive learning rates per parameter + momentum. Most popular optimizer. <strong>RMSprop:</strong> Divides by moving average of gradient squared.</p>
+                    <h3>🧮 Key Formulas</h3>
+                    <div class="formula-card">
+                        <div class="formula-header">Momentum</div>
+                        <div class="formula-main">$$v_t = \beta v_{t-1} + \nabla L, \quad \theta_{t+1} = \theta_t - \eta
+                            v_t$$</div>
+                        <p>β ≈ 0.9. Accumulates gradient direction like a ball rolling downhill.</p>
+                    </div>
+                    <div class="formula-card">
+                        <div class="formula-header">Adam (Simplified)</div>
+                        <div class="formula-main">$$m_t = \beta_1 m_{t-1} + (1-\beta_1)\nabla L$$</div>
+                        <div class="formula-main">$$v_t = \beta_2 v_{t-1} + (1-\beta_2)(\nabla L)^2$$</div>
+                        <div class="formula-main">$$\theta_{t+1} = \theta_t - \eta \frac{\hat{m}_t}{\sqrt{\hat{v}_t} +
+                            \epsilon}$$</div>
+                        <p>Combines momentum ($m$) with adaptive LR ($v$). β₁=0.9, β₂=0.999.</p>
+                    </div>
+                </div>
+
+                <div class="worked-example">
+                    <h4>📝 Worked Example: SGD with Momentum</h4>
+                    <div class="example-problem">
+                        <p><strong>Problem:</strong> Given: θ = 5, gradient ∇L = 2, previous velocity v₀ = 0, η = 0.1, β
+                            = 0.9. Calculate θ after 2 steps.</p>
+                    </div>
+                    <div class="example-solution">
+                        <p><strong>Step 1:</strong> Calculate velocity and update θ</p>
+                        <div class="formula-main">$$v_1 = \beta v_0 + \nabla L = 0.9 \times 0 + 2 = 2$$</div>
+                        <div class="formula-main">$$\theta_1 = \theta_0 - \eta v_1 = 5 - 0.1 \times 2 = 4.8$$</div>
+
+                        <p><strong>Step 2:</strong> (assume same gradient for simplicity)</p>
+                        <div class="formula-main">$$v_2 = \beta v_1 + \nabla L = 0.9 \times 2 + 2 = 1.8 + 2 = 3.8$$
+                        </div>
+                        <div class="formula-main">$$\theta_2 = \theta_1 - \eta v_2 = 4.8 - 0.1 \times 3.8 = 4.42$$</div>
+                    </div>
+                    <div class="example-answer">
+                        <p><strong>Answer:</strong> After 2 steps: θ = 4.42</p>
+                        <p><em>Note: Momentum accumulates (v grew from 2 to 3.8), accelerating descent in consistent
+                                direction!</em></p>
+                    </div>
+                </div>
+
+                <div class="worked-example">
+                    <h4>💻 Python Usage</h4>
+                    <div class="code-block">
+                        <code># PyTorch<br>
+from torch.optim import Adam, SGD, RMSprop<br>
+optimizer = Adam(model.parameters(), lr=0.001)<br><br>
+# Keras<br>
+model.compile(<br>
+&nbsp;&nbsp;&nbsp;&nbsp;optimizer='adam',  # or Adam(learning_rate=0.001)<br>
+&nbsp;&nbsp;&nbsp;&nbsp;loss='categorical_crossentropy'<br>
+)<br><br>
+# Learning rate scheduling<br>
+scheduler = ReduceLROnPlateau(optimizer, patience=5)</code>
+                    </div>
                 </div>
+
                 <div class="summary-card">
                     <h3>🎯 Key Takeaways</h3>
                     <ul>
-                        <li>Adam: adaptive + momentum, good default choice</li>
-                        <li>RMSprop: adaptive learning rates</li>
-                        <li>SGD+Momentum: simple but effective</li>
+                        <li>SGD: simple, can generalize better but slower</li>
+                        <li>Momentum: accelerates SGD in consistent directions</li>
+                        <li>Adam: adaptive + momentum, BEST DEFAULT CHOICE</li>
+                        <li>AdamW: fixes weight decay, use for transformers</li>
+                        <li>Always use learning rate schedulers for better results</li>
                     </ul>
                 </div>
             </section>
 
-            <section class="topic-section ml-section" id="ml-topic-40" data-subject="machine-learning" style="display: none;">
+            <section class="topic-section ml-section" id="ml-topic-40" data-subject="machine-learning"
+                style="display: none;">
                 <div class="topic-header">
                     <span class="topic-number ml-advanced">ML Algorithm 40</span>
-                    <h2>🎯 Batch Normalization &amp; Dropout</h2>
+                    <h2>🎯 Batch Normalization & Dropout</h2>
+                    <p class="topic-subtitle">Essential techniques for training deep neural networks</p>
+                </div>
+
+                <div class="content-card">
+                    <h3>📊 Batch Normalization</h3>
+                    <p>Normalizes layer inputs to have zero mean and unit variance. Dramatically stabilizes and speeds
+                        up training!</p>
+                    <div class="formula-card">
+                        <div class="formula-header">Batch Norm Formula</div>
+                        <div class="formula-main">$$\hat{x}_i = \frac{x_i - \mu_B}{\sqrt{\sigma_B^2 + \epsilon}}, \quad
+                            y_i = \gamma \hat{x}_i + \beta$$</div>
+                        <p>$\mu_B, \sigma_B$ = batch mean/std. γ, β = learnable parameters.</p>
+                    </div>
+                </div>
+
+                <div class="callout-box insight">
+                    <div class="callout-header">💡 Train vs Inference</div>
+                    <table class="comparison-table">
+                        <tr>
+                            <th>Technique</th>
+                            <th>Training</th>
+                            <th>Inference</th>
+                        </tr>
+                        <tr>
+                            <td>Batch Norm</td>
+                            <td>Uses batch statistics</td>
+                            <td>Uses running average</td>
+                        </tr>
+                        <tr>
+                            <td>Dropout</td>
+                            <td>Randomly drops neurons</td>
+                            <td>Uses all neurons (scaled)</td>
+                        </tr>
+                    </table>
+                    <p>⚠️ Always set model to eval mode for inference: <code>model.eval()</code></p>
+                </div>
+
+                <div class="content-card">
+                    <h3>🎲 Dropout</h3>
+                    <p>Randomly "drops" neurons during training with probability p. Prevents co-adaptation and
+                        overfitting.</p>
+                    <div class="formula-card">
+                        <div class="formula-header">Dropout During Training</div>
+                        <div class="formula-main">$$h' = \frac{1}{1-p} \cdot r \odot h, \quad r_i \sim
+                            \text{Bernoulli}(1-p)$$</div>
+                        <p>p = drop probability (0.5 common). Outputs scaled by 1/(1-p) to maintain expected values.</p>
+                    </div>
                 </div>
+
                 <div class="content-card">
-                    <p><strong>Batch Norm:</strong> Normalizes layer inputs, stabilizes training. <strong>Dropout:</strong> Randomly drops neurons during training (p=0.5 typical), prevents overfitting.</p>
+                    <h3>🏗️ Where to Place Them?</h3>
+                    <ul>
+                        <li><strong>BatchNorm:</strong> After linear/conv, before activation (Conv → BN → ReLU)</li>
+                        <li><strong>Dropout:</strong> After activation, typically 0.2-0.5 after dense layers</li>
+                        <li><strong>Don't combine:</strong> Using both together can be tricky</li>
+                    </ul>
+                </div>
+
+                <div class="worked-example">
+                    <h4>📝 Worked Example: Batch Normalization</h4>
+                    <div class="example-problem">
+                        <p><strong>Problem:</strong> Given batch values [1, 2, 3, 4] with γ=1, β=0. Apply batch
+                            normalization.</p>
+                    </div>
+                    <div class="example-solution">
+                        <p><strong>Step 1:</strong> Calculate batch mean and variance</p>
+                        <div class="formula-main">$$\mu_B = \frac{1+2+3+4}{4} = 2.5$$</div>
+                        <div class="formula-main">$$\sigma_B^2 = \frac{(1-2.5)^2 + (2-2.5)^2 + (3-2.5)^2 + (4-2.5)^2}{4}
+                            = \frac{2.25+0.25+0.25+2.25}{4} = 1.25$$</div>
+
+                        <p><strong>Step 2:</strong> Normalize each value (using ε = 0.001)</p>
+                        <div class="formula-main">$$\hat{x}_1 = \frac{1 - 2.5}{\sqrt{1.25 + 0.001}} = \frac{-1.5}{1.118}
+                            = -1.34$$</div>
+                        <div class="formula-main">$$\hat{x}_2 = \frac{2 - 2.5}{1.118} = -0.45, \quad \hat{x}_3 = 0.45,
+                            \quad \hat{x}_4 = 1.34$$</div>
+
+                        <p><strong>Step 3:</strong> Scale and shift (with γ=1, β=0, output = normalized values)</p>
+                    </div>
+                    <div class="example-answer">
+                        <p><strong>Answer:</strong> Normalized batch: [-1.34, -0.45, 0.45, 1.34]</p>
+                        <p><em>Note: Mean ≈ 0, variance ≈ 1. Values are now comparable regardless of original
+                                scale!</em></p>
+                    </div>
+                </div>
+
+                <div class="worked-example">
+                    <h4>💻 Keras Example</h4>
+                    <div class="code-block">
+                        <code>from tensorflow.keras.layers import Dense, BatchNormalization, Dropout<br><br>
+model = Sequential([<br>
+&nbsp;&nbsp;&nbsp;&nbsp;Dense(256, input_shape=(100,)),<br>
+&nbsp;&nbsp;&nbsp;&nbsp;BatchNormalization(),  # Normalize before activation<br>
+&nbsp;&nbsp;&nbsp;&nbsp;Activation('relu'),<br>
+&nbsp;&nbsp;&nbsp;&nbsp;Dropout(0.3),  # Drop 30% after activation<br><br>
+&nbsp;&nbsp;&nbsp;&nbsp;Dense(128),<br>
+&nbsp;&nbsp;&nbsp;&nbsp;BatchNormalization(),<br>
+&nbsp;&nbsp;&nbsp;&nbsp;Activation('relu'),<br>
+&nbsp;&nbsp;&nbsp;&nbsp;Dropout(0.3),<br><br>
+&nbsp;&nbsp;&nbsp;&nbsp;Dense(10, activation='softmax')<br>
+])</code>
+                    </div>
                 </div>
+
                 <div class="summary-card">
                     <h3>🎯 Key Takeaways</h3>
                     <ul>
-                        <li>Batch Norm: faster training, less sensitive to initialization</li>
-                        <li>Dropout: regularization for neural networks</li>
-                        <li>Both critical for deep learning success</li>
+                        <li>Batch Norm: normalizes layers → faster, more stable training</li>
+                        <li>Dropout: randomly drops neurons → prevents overfitting</li>
+                        <li>Both behave differently in training vs inference mode</li>
+                        <li>BatchNorm: Conv → BN → Activation order</li>
+                        <li>Dropout: typically p=0.2-0.5 for dense layers</li>
                     </ul>
                 </div>
             </section>
@@ -10266,4 +12856,5 @@ for episode in range(1000):
 
     <script src="app.js"></script>
 </body>
+
 </html>
\ No newline at end of file
