updated code

complete-statistics/app.js

@@ -0,0 +1,454 @@
+// ===== CONFIGURATION & CONSTANTS =====
+const COLORS = {
+    primary: '#4a90e2',
+    cyan: '#64ffda',
+    orange: '#ff6b6b',
+    green: '#51cf66',
+    background: '#0f3460',
+    text: '#e1e1e1',
+    textSecondary: '#a0a0a0'
+};
+
+const chartColors = ['#1FB8CD', '#FFC185', '#B4413C', '#ECEBD5', '#5D878F', '#DB4545', '#D2BA4C', '#964325', '#944454', '#13343B'];
+
+// ===== STATE MANAGEMENT =====
+let currentTopic = 1;
+let animationFrames = {};
+
+// ===== INITIALIZATION =====
+document.addEventListener('DOMContentLoaded', () => {
+    initNavigation();
+    initInteractiveElements();
+    setupScrollObserver();
+    initializeAllVisualizations();
+});
+
+// ===== NAVIGATION =====
+function initNavigation() {
+    // Mobile menu toggle
+    const mobileMenuBtn = document.getElementById('mobileMenuBtn');
+    const sidebar = document.getElementById('sidebar');
+    
+    if (mobileMenuBtn) {
+        mobileMenuBtn.addEventListener('click', () => {
+            sidebar.classList.toggle('active');
+        });
+    }
+
+    // Topic link navigation
+    const topicLinks = document.querySelectorAll('.topic-link');
+    topicLinks.forEach(link => {
+        link.addEventListener('click', (e) => {
+            e.preventDefault();
+            const topicId = link.getAttribute('data-topic');
+            const target = document.getElementById(`topic-${topicId}`);
+            
+            if (target) {
+                target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                updateActiveLink(topicId);
+                
+                // Close mobile menu if open
+                if (window.innerWidth <= 1024) {
+                    sidebar.classList.remove('active');
+                }
+            }
+        });
+    });
+}
+
+function updateActiveLink(topicId) {
+    document.querySelectorAll('.topic-link').forEach(link => {
+        link.classList.remove('active');
+    });
+    const activeLink = document.querySelector(`[data-topic="${topicId}"]`);
+    if (activeLink) {
+        activeLink.classList.add('active');
+    }
+    currentTopic = parseInt(topicId);
+}
+
+// ===== SCROLL OBSERVER =====
+function setupScrollObserver() {
+    const options = {
+        root: null,
+        rootMargin: '-100px',
+        threshold: 0.3
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                const topicId = entry.target.id.split('-')[1];
+                updateActiveLink(topicId);
+            }
+        });
+    }, options);
+
+    document.querySelectorAll('.topic-section').forEach(section => {
+        observer.observe(section);
+    });
+}
+
+// ===== CANVAS UTILITIES =====
+function clearCanvas(ctx, canvas) {
+    ctx.fillStyle = COLORS.background;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+}
+
+function drawText(ctx, text, x, y, fontSize = 14, color = COLORS.text, align = 'center') {
+    ctx.fillStyle = color;
+    ctx.font = `${fontSize}px 'Segoe UI', sans-serif`;
+    ctx.textAlign = align;
+    ctx.fillText(text, x, y);
+}
+
+function drawCircle(ctx, x, y, radius, color, filled = true) {
+    ctx.beginPath();
+    ctx.arc(x, y, radius, 0, Math.PI * 2);
+    if (filled) {
+        ctx.fillStyle = color;
+        ctx.fill();
+    } else {
+        ctx.strokeStyle = color;
+        ctx.lineWidth = 2;
+        ctx.stroke();
+    }
+}
+
+function drawLine(ctx, x1, y1, x2, y2, color = COLORS.text, width = 1) {
+    ctx.beginPath();
+    ctx.moveTo(x1, y1);
+    ctx.lineTo(x2, y2);
+    ctx.strokeStyle = color;
+    ctx.lineWidth = width;
+    ctx.stroke();
+}
+
+function drawRect(ctx, x, y, width, height, color, filled = true) {
+    if (filled) {
+        ctx.fillStyle = color;
+        ctx.fillRect(x, y, width, height);
+    } else {
+        ctx.strokeStyle = color;
+        ctx.lineWidth = 2;
+        ctx.strokeRect(x, y, width, height);
+    }
+}
+
+// ===== STATISTICAL CALCULATIONS =====
+function calculateMean(data) {
+    return data.reduce((sum, val) => sum + val, 0) / data.length;
+}
+
+function calculateMedian(data) {
+    const sorted = [...data].sort((a, b) => a - b);
+    const mid = Math.floor(sorted.length / 2);
+    return sorted.length % 2 === 0
+        ? (sorted[mid - 1] + sorted[mid]) / 2
+        : sorted[mid];
+}
+
+function calculateMode(data) {
+    const frequency = {};
+    let maxFreq = 0;
+    
+    data.forEach(val => {
+        frequency[val] = (frequency[val] || 0) + 1;
+        maxFreq = Math.max(maxFreq, frequency[val]);
+    });
+    
+    if (maxFreq === 1) return 'None';
+    
+    const modes = Object.keys(frequency).filter(key => frequency[key] === maxFreq);
+    return modes.join(', ');
+}
+
+function calculateVariance(data, isSample = true) {
+    const mean = calculateMean(data);
+    const squaredDiffs = data.map(val => Math.pow(val - mean, 2));
+    const divisor = isSample ? data.length - 1 : data.length;
+    return squaredDiffs.reduce((sum, val) => sum + val, 0) / divisor;
+}
+
+function calculateStdDev(data, isSample = true) {
+    return Math.sqrt(calculateVariance(data, isSample));
+}
+
+function calculateQuartiles(data) {
+    const sorted = [...data].sort((a, b) => a - b);
+    const q2 = calculateMedian(sorted);
+    const midIndex = Math.floor(sorted.length / 2);
+    
+    const lowerHalf = sorted.length % 2 === 0
+        ? sorted.slice(0, midIndex)
+        : sorted.slice(0, midIndex);
+    const upperHalf = sorted.length % 2 === 0
+        ? sorted.slice(midIndex)
+        : sorted.slice(midIndex + 1);
+    
+    const q1 = calculateMedian(lowerHalf);
+    const q3 = calculateMedian(upperHalf);
+    
+    return { q1, q2, q3 };
+}
+
+function calculateIQR(data) {
+    const { q1, q3 } = calculateQuartiles(data);
+    const iqr = q3 - q1;
+    const lowerFence = q1 - 1.5 * iqr;
+    const upperFence = q3 + 1.5 * iqr;
+    
+    return { q1, q3, iqr, lowerFence, upperFence };
+}
+
+function detectOutliers(data) {
+    const { lowerFence, upperFence } = calculateIQR(data);
+    return data.filter(val => val < lowerFence || val > upperFence);
+}
+
+function calculateCovariance(x, y) {
+    const meanX = calculateMean(x);
+    const meanY = calculateMean(y);
+    let sum = 0;
+    
+    for (let i = 0; i < x.length; i++) {
+        sum += (x[i] - meanX) * (y[i] - meanY);
+    }
+    
+    return sum / (x.length - 1);
+}
+
+function calculateCorrelation(x, y) {
+    const cov = calculateCovariance(x, y);
+    const stdX = calculateStdDev(x);
+    const stdY = calculateStdDev(y);
+    return cov / (stdX * stdY);
+}
+
+// ===== VISUALIZATION FUNCTIONS =====
+
+// Population vs Sample Visualization
+function initPopulationSampleViz() {
+    const canvas = document.getElementById('populationSampleCanvas');
+    if (!canvas) return;
+    
+    const ctx = canvas.getContext('2d');
+    let population = [];
+    let sample = [];
+    let sampleSize = 30;
+    
+    // Initialize population
+    for (let i = 0; i < 200; i++) {
+        population.push({
+            x: Math.random() * (canvas.width - 40) + 20,
+            y: Math.random() * (canvas.height - 40) + 20,
+            inSample: false
+        });
+    }
+    
+    function draw() {
+        clearCanvas(ctx, canvas);
+        
+        // Draw title
+        drawText(ctx, 'Population (All dots) vs Sample (Highlighted)', canvas.width / 2, 30, 16, COLORS.cyan);
+        
+        // Draw population
+        population.forEach(point => {
+            const color = point.inSample ? COLORS.orange : COLORS.primary;
+            const radius = point.inSample ? 6 : 4;
+            drawCircle(ctx, point.x, point.y, radius, color);
+        });
+        
+        // Draw statistics
+        const popCount = population.length;
+        const sampleCount = population.filter(p => p.inSample).length;
+        drawText(ctx, `Population Size: N = ${popCount}`, 150, canvas.height - 20, 14, COLORS.text, 'center');
+        drawText(ctx, `Sample Size: n = ${sampleCount}`, canvas.width - 150, canvas.height - 20, 14, COLORS.orange, 'center');
+    }
+    
+    function takeSample() {
+        // Reset all
+        population.forEach(p => p.inSample = false);
+        
+        // Randomly select sample
+        const shuffled = [...population].sort(() => Math.random() - 0.5);
+        for (let i = 0; i < Math.min(sampleSize, population.length); i++) {
+            shuffled[i].inSample = true;
+        }
+        
+        draw();
+    }
+    
+    // Event listeners
+    const sampleBtn = document.getElementById('sampleBtn');
+    const resetBtn = document.getElementById('resetPopBtn');
+    const sizeSlider = document.getElementById('sampleSizeSlider');
+    const sizeLabel = document.getElementById('sampleSizeLabel');
+    
+    if (sampleBtn) {
+        sampleBtn.addEventListener('click', takeSample);
+    }
+    
+    if (resetBtn) {
+        resetBtn.addEventListener('click', () => {
+            population.forEach(p => p.inSample = false);
+            draw();
+        });
+    }
+    
+    if (sizeSlider) {
+        sizeSlider.addEventListener('input', (e) => {
+            sampleSize = parseInt(e.target.value);
+            if (sizeLabel) {
+                sizeLabel.textContent = sampleSize;
+            }
+        });
+    }
+    
+    draw();
+}
+
+// Central Tendency Visualization
+function initCentralTendencyViz() {
+    const canvas = document.getElementById('centralTendencyCanvas');
+    if (!canvas) return;
+    
+    const ctx = canvas.getContext('2d');
+    let data = [10, 20, 30, 40, 50];
+    
+    function parseInput(input) {
+        return input.split(',').map(s => parseFloat(s.trim())).filter(n => !isNaN(n));
+    }
+    
+    function draw() {
+        clearCanvas(ctx, canvas);
+        
+        if (data.length === 0) {
+            drawText(ctx, 'Please enter valid numbers', canvas.width / 2, canvas.height / 2, 16, COLORS.orange);
+            return;
+        }
+        
+        const sorted = [...data].sort((a, b) => a - b);
+        const min = Math.min(...sorted);
+        const max = Math.max(...sorted);
+        const range = max - min || 1;
+        const padding = 80;
+        const width = canvas.width - 2 * padding;
+        
+        // Calculate statistics
+        const mean = calculateMean(data);
+        const median = calculateMedian(data);
+        const mode = calculateMode(data);
+        
+        // Update results display
+        document.getElementById('meanResult').textContent = mean.toFixed(2);
+        document.getElementById('medianResult').textContent = median.toFixed(2);
+        document.getElementById('modeResult').textContent = mode;
+        
+        // Draw axis
+        const axisY = canvas.height / 2;
+        drawLine(ctx, padding, axisY, canvas.width - padding, axisY, COLORS.text, 2);
+        
+        // Draw data points
+        sorted.forEach((val, idx) => {
+            const x = padding + ((val - min) / range) * width;
+            drawCircle(ctx, x, axisY, 8, COLORS.primary);
+            drawText(ctx, val.toString(), x, axisY + 30, 12, COLORS.text);
+        });
+        
+        // Draw mean
+        const meanX = padding + ((mean - min) / range) * width;
+        drawLine(ctx, meanX, axisY - 60, meanX, axisY + 60, COLORS.cyan, 3);
+        drawText(ctx, `Mean: ${mean.toFixed(2)}`, meanX, axisY - 70, 14, COLORS.cyan);
+        
+        // Draw median
+        const medianX = padding + ((median - min) / range) * width;
+        drawLine(ctx, medianX, axisY - 50, medianX, axisY + 50, COLORS.orange, 2);
+        drawText(ctx, `Median: ${median.toFixed(2)}`, medianX, axisY - 55, 12, COLORS.orange);
+    }
+    
+    // Event listeners
+    const input = document.getElementById('centralTendencyInput');
+    const calcBtn = document.getElementById('calculateCentralBtn');
+    const randomBtn = document.getElementById('randomDataBtn');
+    
+    if (calcBtn && input) {
+        calcBtn.addEventListener('click', () => {
+            data = parseInput(input.value);
+            draw();
+        });
+    }
+    
+    if (randomBtn && input) {
+        randomBtn.addEventListener('click', () => {
+            data = Array.from({ length: 10 }, () => Math.floor(Math.random() * 100));
+            input.value = data.join(', ');
+            draw();
+        });
+    }
+    
+    if (input) {
+        input.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                data = parseInput(input.value);
+                draw();
+            }
+        });
+    }
+    
+    draw();
+}
+
+// ===== INITIALIZE ALL VISUALIZATIONS =====
+function initializeAllVisualizations() {
+    // Topic 2: Population vs Sample
+    initPopulationSampleViz();
+    
+    // Topic 5: Central Tendency
+    initCentralTendencyViz();
+    
+    // Add more visualizations as needed
+    // Each topic with a canvas gets its own initialization function
+}
+
+// ===== INTERACTIVE ELEMENTS =====
+function initInteractiveElements() {
+    // Add any additional interactive elements here
+    // Such as tooltips, modals, etc.
+}
+
+// ===== HELPER FUNCTIONS =====
+function generateRandomData(count, min, max) {
+    return Array.from({ length: count }, () => 
+        Math.floor(Math.random() * (max - min + 1)) + min
+    );
+}
+
+function formatNumber(num, decimals = 2) {
+    return Number(num).toFixed(decimals);
+}
+
+// ===== ANIMATION LOOP =====
+function startAnimation(canvasId, animationFunction) {
+    if (animationFrames[canvasId]) {
+        cancelAnimationFrame(animationFrames[canvasId]);
+    }
+    
+    function animate() {
+        animationFunction();
+        animationFrames[canvasId] = requestAnimationFrame(animate);
+    }
+    
+    animate();
+}
+
+function stopAnimation(canvasId) {
+    if (animationFrames[canvasId]) {
+        cancelAnimationFrame(animationFrames[canvasId]);
+        delete animationFrames[canvasId];
+    }
+}
+
+// ===== CONSOLE LOG =====
+console.log('%c📊 Statistics Mastery Platform Loaded', 'color: #64ffda; font-size: 16px; font-weight: bold;');
+console.log('%cReady to explore 41 comprehensive statistics topics!', 'color: #4a90e2; font-size: 14px;');

complete-statistics/style.css

@@ -0,0 +1,1631 @@
+:root {
+  /* Primitive Color Tokens */
+  --color-white: rgba(255, 255, 255, 1);
+  --color-black: rgba(0, 0, 0, 1);
+  --color-cream-50: rgba(252, 252, 249, 1);
+  --color-cream-100: rgba(255, 255, 253, 1);
+  --color-gray-200: rgba(245, 245, 245, 1);
+  --color-gray-300: rgba(167, 169, 169, 1);
+  --color-gray-400: rgba(119, 124, 124, 1);
+  --color-slate-500: rgba(98, 108, 113, 1);
+  --color-brown-600: rgba(94, 82, 64, 1);
+  --color-charcoal-700: rgba(31, 33, 33, 1);
+  --color-charcoal-800: rgba(38, 40, 40, 1);
+  --color-slate-900: rgba(19, 52, 59, 1);
+  --color-teal-300: rgba(50, 184, 198, 1);
+  --color-teal-400: rgba(45, 166, 178, 1);
+  --color-teal-500: rgba(33, 128, 141, 1);
+  --color-teal-600: rgba(29, 116, 128, 1);
+  --color-teal-700: rgba(26, 104, 115, 1);
+  --color-teal-800: rgba(41, 150, 161, 1);
+  --color-red-400: rgba(255, 84, 89, 1);
+  --color-red-500: rgba(192, 21, 47, 1);
+  --color-orange-400: rgba(230, 129, 97, 1);
+  --color-orange-500: rgba(168, 75, 47, 1);
+
+  /* RGB versions for opacity control */
+  --color-brown-600-rgb: 94, 82, 64;
+  --color-teal-500-rgb: 33, 128, 141;
+  --color-slate-900-rgb: 19, 52, 59;
+  --color-slate-500-rgb: 98, 108, 113;
+  --color-red-500-rgb: 192, 21, 47;
+  --color-red-400-rgb: 255, 84, 89;
+  --color-orange-500-rgb: 168, 75, 47;
+  --color-orange-400-rgb: 230, 129, 97;
+
+  /* Background color tokens (Light Mode) */
+  --color-bg-1: rgba(59, 130, 246, 0.08); /* Light blue */
+  --color-bg-2: rgba(245, 158, 11, 0.08); /* Light yellow */
+  --color-bg-3: rgba(34, 197, 94, 0.08); /* Light green */
+  --color-bg-4: rgba(239, 68, 68, 0.08); /* Light red */
+  --color-bg-5: rgba(147, 51, 234, 0.08); /* Light purple */
+  --color-bg-6: rgba(249, 115, 22, 0.08); /* Light orange */
+  --color-bg-7: rgba(236, 72, 153, 0.08); /* Light pink */
+  --color-bg-8: rgba(6, 182, 212, 0.08); /* Light cyan */
+
+  /* Semantic Color Tokens (Light Mode) */
+  --color-background: var(--color-cream-50);
+  --color-surface: var(--color-cream-100);
+  --color-text: var(--color-slate-900);
+  --color-text-secondary: var(--color-slate-500);
+  --color-primary: var(--color-teal-500);
+  --color-primary-hover: var(--color-teal-600);
+  --color-primary-active: var(--color-teal-700);
+  --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
+  --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
+  --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
+  --color-border: rgba(var(--color-brown-600-rgb), 0.2);
+  --color-btn-primary-text: var(--color-cream-50);
+  --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
+  --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
+  --color-error: var(--color-red-500);
+  --color-success: var(--color-teal-500);
+  --color-warning: var(--color-orange-500);
+  --color-info: var(--color-slate-500);
+  --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
+  --color-select-caret: rgba(var(--color-slate-900-rgb), 0.8);
+
+  /* Common style patterns */
+  --focus-ring: 0 0 0 3px var(--color-focus-ring);
+  --focus-outline: 2px solid var(--color-primary);
+  --status-bg-opacity: 0.15;
+  --status-border-opacity: 0.25;
+  --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+
+  /* RGB versions for opacity control */
+  --color-success-rgb: 33, 128, 141;
+  --color-error-rgb: 192, 21, 47;
+  --color-warning-rgb: 168, 75, 47;
+  --color-info-rgb: 98, 108, 113;
+
+  /* Typography */
+  --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system,
+    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo,
+    Monaco, Consolas, monospace;
+  --font-size-xs: 11px;
+  --font-size-sm: 12px;
+  --font-size-base: 14px;
+  --font-size-md: 14px;
+  --font-size-lg: 16px;
+  --font-size-xl: 18px;
+  --font-size-2xl: 20px;
+  --font-size-3xl: 24px;
+  --font-size-4xl: 30px;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 550;
+  --font-weight-bold: 600;
+  --line-height-tight: 1.2;
+  --line-height-normal: 1.5;
+  --letter-spacing-tight: -0.01em;
+
+  /* Spacing */
+  --space-0: 0;
+  --space-1: 1px;
+  --space-2: 2px;
+  --space-4: 4px;
+  --space-6: 6px;
+  --space-8: 8px;
+  --space-10: 10px;
+  --space-12: 12px;
+  --space-16: 16px;
+  --space-20: 20px;
+  --space-24: 24px;
+  --space-32: 32px;
+
+  /* Border Radius */
+  --radius-sm: 6px;
+  --radius-base: 8px;
+  --radius-md: 10px;
+  --radius-lg: 12px;
+  --radius-full: 9999px;
+
+  /* Shadows */
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04),
+    0 2px 4px -1px rgba(0, 0, 0, 0.02);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
+    0 4px 6px -2px rgba(0, 0, 0, 0.02);
+  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.03);
+
+  /* Animation */
+  --duration-fast: 150ms;
+  --duration-normal: 250ms;
+  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
+
+  /* Layout */
+  --container-sm: 640px;
+  --container-md: 768px;
+  --container-lg: 1024px;
+  --container-xl: 1280px;
+}
+
+/* Dark mode colors */
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* RGB versions for opacity control (Dark Mode) */
+    --color-gray-400-rgb: 119, 124, 124;
+    --color-teal-300-rgb: 50, 184, 198;
+    --color-gray-300-rgb: 167, 169, 169;
+    --color-gray-200-rgb: 245, 245, 245;
+
+    /* Background color tokens (Dark Mode) */
+    --color-bg-1: rgba(29, 78, 216, 0.15); /* Dark blue */
+    --color-bg-2: rgba(180, 83, 9, 0.15); /* Dark yellow */
+    --color-bg-3: rgba(21, 128, 61, 0.15); /* Dark green */
+    --color-bg-4: rgba(185, 28, 28, 0.15); /* Dark red */
+    --color-bg-5: rgba(107, 33, 168, 0.15); /* Dark purple */
+    --color-bg-6: rgba(194, 65, 12, 0.15); /* Dark orange */
+    --color-bg-7: rgba(190, 24, 93, 0.15); /* Dark pink */
+    --color-bg-8: rgba(8, 145, 178, 0.15); /* Dark cyan */
+
+    /* Semantic Color Tokens (Dark Mode) */
+    --color-background: var(--color-charcoal-700);
+    --color-surface: var(--color-charcoal-800);
+    --color-text: var(--color-gray-200);
+    --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
+    --color-primary: var(--color-teal-300);
+    --color-primary-hover: var(--color-teal-400);
+    --color-primary-active: var(--color-teal-800);
+    --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
+    --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
+    --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
+    --color-border: rgba(var(--color-gray-400-rgb), 0.3);
+    --color-error: var(--color-red-400);
+    --color-success: var(--color-teal-300);
+    --color-warning: var(--color-orange-400);
+    --color-info: var(--color-gray-300);
+    --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
+    --color-btn-primary-text: var(--color-slate-900);
+    --color-card-border: rgba(var(--color-gray-400-rgb), 0.2);
+    --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
+    --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
+      inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+    --button-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
+    --color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
+    --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);
+
+    /* Common style patterns - updated for dark mode */
+    --focus-ring: 0 0 0 3px var(--color-focus-ring);
+    --focus-outline: 2px solid var(--color-primary);
+    --status-bg-opacity: 0.15;
+    --status-border-opacity: 0.25;
+    --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+    --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+
+    /* RGB versions for dark mode */
+    --color-success-rgb: var(--color-teal-300-rgb);
+    --color-error-rgb: var(--color-red-400-rgb);
+    --color-warning-rgb: var(--color-orange-400-rgb);
+    --color-info-rgb: var(--color-gray-300-rgb);
+  }
+}
+
+/* Data attribute for manual theme switching */
+[data-color-scheme="dark"] {
+  /* RGB versions for opacity control (dark mode) */
+  --color-gray-400-rgb: 119, 124, 124;
+  --color-teal-300-rgb: 50, 184, 198;
+  --color-gray-300-rgb: 167, 169, 169;
+  --color-gray-200-rgb: 245, 245, 245;
+
+  /* Colorful background palette - Dark Mode */
+  --color-bg-1: rgba(29, 78, 216, 0.15); /* Dark blue */
+  --color-bg-2: rgba(180, 83, 9, 0.15); /* Dark yellow */
+  --color-bg-3: rgba(21, 128, 61, 0.15); /* Dark green */
+  --color-bg-4: rgba(185, 28, 28, 0.15); /* Dark red */
+  --color-bg-5: rgba(107, 33, 168, 0.15); /* Dark purple */
+  --color-bg-6: rgba(194, 65, 12, 0.15); /* Dark orange */
+  --color-bg-7: rgba(190, 24, 93, 0.15); /* Dark pink */
+  --color-bg-8: rgba(8, 145, 178, 0.15); /* Dark cyan */
+
+  /* Semantic Color Tokens (Dark Mode) */
+  --color-background: var(--color-charcoal-700);
+  --color-surface: var(--color-charcoal-800);
+  --color-text: var(--color-gray-200);
+  --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
+  --color-primary: var(--color-teal-300);
+  --color-primary-hover: var(--color-teal-400);
+  --color-primary-active: var(--color-teal-800);
+  --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
+  --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
+  --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
+  --color-border: rgba(var(--color-gray-400-rgb), 0.3);
+  --color-error: var(--color-red-400);
+  --color-success: var(--color-teal-300);
+  --color-warning: var(--color-orange-400);
+  --color-info: var(--color-gray-300);
+  --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
+  --color-btn-primary-text: var(--color-slate-900);
+  --color-card-border: rgba(var(--color-gray-400-rgb), 0.15);
+  --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
+  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  --color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
+  --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);
+
+  /* Common style patterns - updated for dark mode */
+  --focus-ring: 0 0 0 3px var(--color-focus-ring);
+  --focus-outline: 2px solid var(--color-primary);
+  --status-bg-opacity: 0.15;
+  --status-border-opacity: 0.25;
+  --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+
+  /* RGB versions for dark mode */
+  --color-success-rgb: var(--color-teal-300-rgb);
+  --color-error-rgb: var(--color-red-400-rgb);
+  --color-warning-rgb: var(--color-orange-400-rgb);
+  --color-info-rgb: var(--color-gray-300-rgb);
+}
+
+[data-color-scheme="light"] {
+  /* RGB versions for opacity control (light mode) */
+  --color-brown-600-rgb: 94, 82, 64;
+  --color-teal-500-rgb: 33, 128, 141;
+  --color-slate-900-rgb: 19, 52, 59;
+
+  /* Semantic Color Tokens (Light Mode) */
+  --color-background: var(--color-cream-50);
+  --color-surface: var(--color-cream-100);
+  --color-text: var(--color-slate-900);
+  --color-text-secondary: var(--color-slate-500);
+  --color-primary: var(--color-teal-500);
+  --color-primary-hover: var(--color-teal-600);
+  --color-primary-active: var(--color-teal-700);
+  --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
+  --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
+  --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
+  --color-border: rgba(var(--color-brown-600-rgb), 0.2);
+  --color-btn-primary-text: var(--color-cream-50);
+  --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
+  --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
+  --color-error: var(--color-red-500);
+  --color-success: var(--color-teal-500);
+  --color-warning: var(--color-orange-500);
+  --color-info: var(--color-slate-500);
+  --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
+
+  /* RGB versions for light mode */
+  --color-success-rgb: var(--color-teal-500-rgb);
+  --color-error-rgb: var(--color-red-500-rgb);
+  --color-warning-rgb: var(--color-orange-500-rgb);
+  --color-info-rgb: var(--color-slate-500-rgb);
+}
+
+/* Base styles */
+html {
+  font-size: var(--font-size-base);
+  font-family: var(--font-family-base);
+  line-height: var(--line-height-normal);
+  color: var(--color-text);
+  background-color: var(--color-background);
+  -webkit-font-smoothing: antialiased;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+/* Typography */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-tight);
+  color: var(--color-text);
+  letter-spacing: var(--letter-spacing-tight);
+}
+
+h1 {
+  font-size: var(--font-size-4xl);
+}
+h2 {
+  font-size: var(--font-size-3xl);
+}
+h3 {
+  font-size: var(--font-size-2xl);
+}
+h4 {
+  font-size: var(--font-size-xl);
+}
+h5 {
+  font-size: var(--font-size-lg);
+}
+h6 {
+  font-size: var(--font-size-md);
+}
+
+p {
+  margin: 0 0 var(--space-16) 0;
+}
+
+a {
+  color: var(--color-primary);
+  text-decoration: none;
+  transition: color var(--duration-fast) var(--ease-standard);
+}
+
+a:hover {
+  color: var(--color-primary-hover);
+}
+
+code,
+pre {
+  font-family: var(--font-family-mono);
+  font-size: calc(var(--font-size-base) * 0.95);
+  background-color: var(--color-secondary);
+  border-radius: var(--radius-sm);
+}
+
+code {
+  padding: var(--space-1) var(--space-4);
+}
+
+pre {
+  padding: var(--space-16);
+  margin: var(--space-16) 0;
+  overflow: auto;
+  border: 1px solid var(--color-border);
+}
+
+pre code {
+  background: none;
+  padding: 0;
+}
+
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-8) var(--space-16);
+  border-radius: var(--radius-base);
+  font-size: var(--font-size-base);
+  font-weight: 500;
+  line-height: 1.5;
+  cursor: pointer;
+  transition: all var(--duration-normal) var(--ease-standard);
+  border: none;
+  text-decoration: none;
+  position: relative;
+}
+
+.btn:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.btn--primary {
+  background: var(--color-primary);
+  color: var(--color-btn-primary-text);
+}
+
+.btn--primary:hover {
+  background: var(--color-primary-hover);
+}
+
+.btn--primary:active {
+  background: var(--color-primary-active);
+}
+
+.btn--secondary {
+  background: var(--color-secondary);
+  color: var(--color-text);
+}
+
+.btn--secondary:hover {
+  background: var(--color-secondary-hover);
+}
+
+.btn--secondary:active {
+  background: var(--color-secondary-active);
+}
+
+.btn--outline {
+  background: transparent;
+  border: 1px solid var(--color-border);
+  color: var(--color-text);
+}
+
+.btn--outline:hover {
+  background: var(--color-secondary);
+}
+
+.btn--sm {
+  padding: var(--space-4) var(--space-12);
+  font-size: var(--font-size-sm);
+  border-radius: var(--radius-sm);
+}
+
+.btn--lg {
+  padding: var(--space-10) var(--space-20);
+  font-size: var(--font-size-lg);
+  border-radius: var(--radius-md);
+}
+
+.btn--full-width {
+  width: 100%;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Form elements */
+.form-control {
+  display: block;
+  width: 100%;
+  padding: var(--space-8) var(--space-12);
+  font-size: var(--font-size-md);
+  line-height: 1.5;
+  color: var(--color-text);
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-base);
+  transition: border-color var(--duration-fast) var(--ease-standard),
+    box-shadow var(--duration-fast) var(--ease-standard);
+}
+
+textarea.form-control {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+}
+
+select.form-control {
+  padding: var(--space-8) var(--space-12);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-image: var(--select-caret-light);
+  background-repeat: no-repeat;
+  background-position: right var(--space-12) center;
+  background-size: 16px;
+  padding-right: var(--space-32);
+}
+
+/* Add a dark mode specific caret */
+@media (prefers-color-scheme: dark) {
+  select.form-control {
+    background-image: var(--select-caret-dark);
+  }
+}
+
+/* Also handle data-color-scheme */
+[data-color-scheme="dark"] select.form-control {
+  background-image: var(--select-caret-dark);
+}
+
+[data-color-scheme="light"] select.form-control {
+  background-image: var(--select-caret-light);
+}
+
+.form-control:focus {
+  border-color: var(--color-primary);
+  outline: var(--focus-outline);
+}
+
+.form-label {
+  display: block;
+  margin-bottom: var(--space-8);
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-sm);
+}
+
+.form-group {
+  margin-bottom: var(--space-16);
+}
+
+/* Card component */
+.card {
+  background-color: var(--color-surface);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-card-border);
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
+  transition: box-shadow var(--duration-normal) var(--ease-standard);
+}
+
+.card:hover {
+  box-shadow: var(--shadow-md);
+}
+
+.card__body {
+  padding: var(--space-16);
+}
+
+.card__header,
+.card__footer {
+  padding: var(--space-16);
+  border-bottom: 1px solid var(--color-card-border-inner);
+}
+
+/* Status indicators - simplified with CSS variables */
+.status {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--space-6) var(--space-12);
+  border-radius: var(--radius-full);
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-sm);
+}
+
+.status--success {
+  background-color: rgba(
+    var(--color-success-rgb, 33, 128, 141),
+    var(--status-bg-opacity)
+  );
+  color: var(--color-success);
+  border: 1px solid
+    rgba(var(--color-success-rgb, 33, 128, 141), var(--status-border-opacity));
+}
+
+.status--error {
+  background-color: rgba(
+    var(--color-error-rgb, 192, 21, 47),
+    var(--status-bg-opacity)
+  );
+  color: var(--color-error);
+  border: 1px solid
+    rgba(var(--color-error-rgb, 192, 21, 47), var(--status-border-opacity));
+}
+
+.status--warning {
+  background-color: rgba(
+    var(--color-warning-rgb, 168, 75, 47),
+    var(--status-bg-opacity)
+  );
+  color: var(--color-warning);
+  border: 1px solid
+    rgba(var(--color-warning-rgb, 168, 75, 47), var(--status-border-opacity));
+}
+
+.status--info {
+  background-color: rgba(
+    var(--color-info-rgb, 98, 108, 113),
+    var(--status-bg-opacity)
+  );
+  color: var(--color-info);
+  border: 1px solid
+    rgba(var(--color-info-rgb, 98, 108, 113), var(--status-border-opacity));
+}
+
+/* Container layout */
+.container {
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: var(--space-16);
+  padding-left: var(--space-16);
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: var(--container-sm);
+  }
+}
+@media (min-width: 768px) {
+  .container {
+    max-width: var(--container-md);
+  }
+}
+@media (min-width: 1024px) {
+  .container {
+    max-width: var(--container-lg);
+  }
+}
+@media (min-width: 1280px) {
+  .container {
+    max-width: var(--container-xl);
+  }
+}
+
+/* Utility classes */
+.flex {
+  display: flex;
+}
+.flex-col {
+  flex-direction: column;
+}
+.items-center {
+  align-items: center;
+}
+.justify-center {
+  justify-content: center;
+}
+.justify-between {
+  justify-content: space-between;
+}
+.gap-4 {
+  gap: var(--space-4);
+}
+.gap-8 {
+  gap: var(--space-8);
+}
+.gap-16 {
+  gap: var(--space-16);
+}
+
+.m-0 {
+  margin: 0;
+}
+.mt-8 {
+  margin-top: var(--space-8);
+}
+.mb-8 {
+  margin-bottom: var(--space-8);
+}
+.mx-8 {
+  margin-left: var(--space-8);
+  margin-right: var(--space-8);
+}
+.my-8 {
+  margin-top: var(--space-8);
+  margin-bottom: var(--space-8);
+}
+
+.p-0 {
+  padding: 0;
+}
+.py-8 {
+  padding-top: var(--space-8);
+  padding-bottom: var(--space-8);
+}
+.px-8 {
+  padding-left: var(--space-8);
+  padding-right: var(--space-8);
+}
+.py-16 {
+  padding-top: var(--space-16);
+  padding-bottom: var(--space-16);
+}
+.px-16 {
+  padding-left: var(--space-16);
+  padding-right: var(--space-16);
+}
+
+.block {
+  display: block;
+}
+.hidden {
+  display: none;
+}
+
+/* Accessibility */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: 2px;
+}
+
+/* Dark mode specifics */
+[data-color-scheme="dark"] .btn--outline {
+  border: 1px solid var(--color-border-secondary);
+}
+
+@font-face {
+  font-family: 'FKGroteskNeue';
+  src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2')
+    format('woff2');
+}
+
+/* END PERPLEXITY DESIGN SYSTEM */
+/* Reset and Base Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background-color: #1a1a2e;
+    color: #e1e1e1;
+    line-height: 1.6;
+    overflow-x: hidden;
+}
+
+/* Top Navigation */
+.top-nav {
+    position: sticky;
+    top: 0;
+    background: linear-gradient(135deg, #16213e 0%, #0f3460 100%);
+    padding: 1rem 0;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+    z-index: 1000;
+    border-bottom: 2px solid #4a90e2;
+}
+
+.nav-container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 0 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.course-title {
+    font-size: 1.8rem;
+    color: #64ffda;
+    font-weight: 700;
+    text-shadow: 0 0 20px rgba(100, 255, 218, 0.3);
+}
+
+.mobile-menu-btn {
+    display: none;
+    flex-direction: column;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0.5rem;
+}
+
+.mobile-menu-btn span {
+    width: 25px;
+    height: 3px;
+    background: #64ffda;
+    margin: 3px 0;
+    border-radius: 3px;
+    transition: all 0.3s ease;
+}
+
+/* Main Container */
+.main-container {
+    display: flex;
+    max-width: 1400px;
+    margin: 0 auto;
+    min-height: calc(100vh - 80px);
+}
+
+/* Sidebar */
+.sidebar {
+    width: 280px;
+    background: #16213e;
+    padding: 2rem 1rem;
+    position: sticky;
+    top: 80px;
+    height: calc(100vh - 80px);
+    overflow-y: auto;
+    border-right: 2px solid #0f3460;
+    transition: transform 0.3s ease;
+}
+
+.sidebar-content h3 {
+    color: #64ffda;
+    margin-bottom: 1.5rem;
+    font-size: 1.3rem;
+    text-align: center;
+}
+
+.module {
+    margin-bottom: 2rem;
+}
+
+.module-title {
+    color: #4a90e2;
+    font-size: 0.9rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-bottom: 0.8rem;
+    padding: 0.5rem;
+    background: rgba(74, 144, 226, 0.1);
+    border-radius: 5px;
+    border-left: 3px solid #4a90e2;
+}
+
+.topic-list {
+    list-style: none;
+}
+
+.topic-list li {
+    margin-bottom: 0.5rem;
+}
+
+.topic-link {
+    display: block;
+    padding: 0.6rem 0.8rem;
+    color: #a0a0a0;
+    text-decoration: none;
+    border-radius: 5px;
+    transition: all 0.3s ease;
+    font-size: 0.9rem;
+    border-left: 3px solid transparent;
+}
+
+.topic-link:hover {
+    background: rgba(100, 255, 218, 0.1);
+    color: #64ffda;
+    border-left-color: #64ffda;
+    transform: translateX(5px);
+}
+
+.topic-link.active {
+    background: rgba(100, 255, 218, 0.15);
+    color: #64ffda;
+    border-left-color: #64ffda;
+    font-weight: 600;
+}
+
+/* Scrollbar Styling */
+.sidebar::-webkit-scrollbar {
+    width: 8px;
+}
+
+.sidebar::-webkit-scrollbar-track {
+    background: #0f3460;
+}
+
+.sidebar::-webkit-scrollbar-thumb {
+    background: #4a90e2;
+    border-radius: 4px;
+}
+
+.sidebar::-webkit-scrollbar-thumb:hover {
+    background: #64ffda;
+}
+
+/* Main Content */
+.content {
+    flex: 1;
+    padding: 3rem;
+    background: #1a1a2e;
+}
+
+/* Topic Section */
+.topic-section {
+    margin-bottom: 4rem;
+    opacity: 0;
+    transform: translateY(20px);
+    animation: fadeInUp 0.6s ease forwards;
+}
+
+@keyframes fadeInUp {
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.topic-header {
+    margin-bottom: 2rem;
+    padding-bottom: 1.5rem;
+    border-bottom: 3px solid #0f3460;
+}
+
+.topic-number {
+    display: inline-block;
+    background: linear-gradient(135deg, #4a90e2, #64ffda);
+    color: #1a1a2e;
+    padding: 0.3rem 1rem;
+    border-radius: 20px;
+    font-size: 0.85rem;
+    font-weight: 700;
+    margin-bottom: 0.8rem;
+}
+
+.topic-header h2 {
+    font-size: 2.5rem;
+    color: #64ffda;
+    margin-bottom: 0.5rem;
+    text-shadow: 0 0 20px rgba(100, 255, 218, 0.2);
+}
+
+.topic-subtitle {
+    color: #a0a0a0;
+    font-size: 1.1rem;
+    font-style: italic;
+}
+
+/* Content Cards */
+.content-card {
+    background: #16213e;
+    padding: 2rem;
+    border-radius: 12px;
+    margin-bottom: 2rem;
+    border: 1px solid #0f3460;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.content-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 25px rgba(74, 144, 226, 0.2);
+}
+
+.content-card h3 {
+    color: #4a90e2;
+    margin-bottom: 1rem;
+    font-size: 1.5rem;
+}
+
+.content-card h4 {
+    margin-top: 1rem;
+    margin-bottom: 0.8rem;
+    font-size: 1.2rem;
+}
+
+.content-card p {
+    margin-bottom: 1rem;
+    color: #d0d0d0;
+    line-height: 1.8;
+}
+
+.content-card ul,
+.content-card ol {
+    margin-left: 2rem;
+    margin-bottom: 1rem;
+}
+
+.content-card li {
+    margin-bottom: 0.5rem;
+    color: #d0d0d0;
+}
+
+/* Callout Boxes */
+.callout-box {
+    padding: 1.5rem;
+    border-radius: 10px;
+    margin-bottom: 2rem;
+    border-left: 4px solid;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+.callout-header {
+    font-weight: 700;
+    font-size: 1rem;
+    margin-bottom: 0.8rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.callout-box.insight {
+    background: rgba(100, 255, 218, 0.1);
+    border-left-color: #64ffda;
+}
+
+.callout-box.insight .callout-header {
+    color: #64ffda;
+}
+
+.callout-box.warning {
+    background: rgba(255, 107, 107, 0.1);
+    border-left-color: #ff6b6b;
+}
+
+.callout-box.warning .callout-header {
+    color: #ff6b6b;
+}
+
+.callout-box.tip {
+    background: rgba(81, 207, 102, 0.1);
+    border-left-color: #51cf66;
+}
+
+.callout-box.tip .callout-header {
+    color: #51cf66;
+}
+
+.callout-box.example {
+    background: rgba(74, 144, 226, 0.1);
+    border-left-color: #4a90e2;
+}
+
+.callout-box.example .callout-header {
+    color: #4a90e2;
+}
+
+.callout-box p,
+.callout-box ul,
+.callout-box ol {
+    color: #d0d0d0;
+}
+
+/* Formula Cards */
+.formula-card {
+    background: linear-gradient(135deg, #0f3460 0%, #16213e 100%);
+    padding: 2rem;
+    border-radius: 12px;
+    margin-bottom: 1.5rem;
+    border: 2px solid #4a90e2;
+    box-shadow: 0 4px 20px rgba(74, 144, 226, 0.2);
+}
+
+.formula-header {
+    color: #64ffda;
+    font-size: 1.2rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    text-align: center;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+.formula-main {
+    font-size: 1.8rem;
+    text-align: center;
+    margin: 1.5rem 0;
+    color: #fff;
+    font-family: 'Courier New', monospace;
+}
+
+.formula-symbol {
+    color: #64ffda;
+    font-weight: 700;
+    font-size: 2rem;
+}
+
+.formula-var {
+    color: #64ffda;
+    font-weight: 600;
+}
+
+.formula-fraction {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0 0.5rem;
+    vertical-align: middle;
+}
+
+.formula-numerator,
+.formula-denominator {
+    padding: 0.2rem 0.5rem;
+}
+
+.formula-line {
+    width: 100%;
+    height: 2px;
+    background: #fff;
+    margin: 0.2rem 0;
+}
+
+.formula-steps {
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.formula-steps p {
+    color: #a0a0a0;
+    margin-bottom: 0.5rem;
+}
+
+.formula-steps ol,
+.formula-steps ul {
+    margin-left: 2rem;
+    color: #d0d0d0;
+}
+
+.formula-steps li {
+    margin-bottom: 0.5rem;
+}
+
+/* Interactive Container */
+.interactive-container {
+    background: #16213e;
+    padding: 2rem;
+    border-radius: 12px;
+    margin-bottom: 2rem;
+    border: 2px solid #4a90e2;
+    box-shadow: 0 4px 20px rgba(74, 144, 226, 0.3);
+}
+
+.interactive-container h3 {
+    color: #64ffda;
+    margin-bottom: 1.5rem;
+    text-align: center;
+    font-size: 1.5rem;
+}
+
+.interactive-container canvas {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    margin: 0 auto 1.5rem;
+    background: #0f3460;
+    border-radius: 8px;
+    border: 1px solid #4a90e2;
+}
+
+/* Controls */
+.controls {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    align-items: center;
+}
+
+.input-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.8rem;
+    width: 100%;
+    max-width: 600px;
+}
+
+.input-group label {
+    color: #64ffda;
+    font-weight: 600;
+}
+
+.form-control {
+    padding: 0.8rem;
+    background: #0f3460;
+    border: 2px solid #4a90e2;
+    border-radius: 8px;
+    color: #e1e1e1;
+    font-size: 1rem;
+    transition: all 0.3s ease;
+}
+
+.form-control:focus {
+    outline: none;
+    border-color: #64ffda;
+    box-shadow: 0 0 10px rgba(100, 255, 218, 0.3);
+}
+
+.slider-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    width: 100%;
+}
+
+.slider-group label {
+    color: #64ffda;
+    font-weight: 600;
+}
+
+.slider {
+    width: 100%;
+    height: 8px;
+    border-radius: 5px;
+    background: #0f3460;
+    outline: none;
+    -webkit-appearance: none;
+}
+
+.slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: #64ffda;
+    cursor: pointer;
+    box-shadow: 0 0 10px rgba(100, 255, 218, 0.5);
+    transition: all 0.3s ease;
+}
+
+.slider::-webkit-slider-thumb:hover {
+    background: #4a90e2;
+    transform: scale(1.2);
+}
+
+.slider::-moz-range-thumb {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: #64ffda;
+    cursor: pointer;
+    border: none;
+    box-shadow: 0 0 10px rgba(100, 255, 218, 0.5);
+}
+
+/* Buttons */
+.btn {
+    padding: 0.8rem 2rem;
+    border: none;
+    border-radius: 8px;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, #4a90e2, #64ffda);
+    color: #1a1a2e;
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(100, 255, 218, 0.4);
+}
+
+.btn-secondary {
+    background: #0f3460;
+    color: #64ffda;
+    border: 2px solid #4a90e2;
+}
+
+.btn-secondary:hover {
+    background: #16213e;
+    transform: translateY(-2px);
+}
+
+/* Results Display */
+.results {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 1rem;
+    width: 100%;
+    margin-top: 1rem;
+}
+
+.result-item {
+    background: #0f3460;
+    padding: 1rem;
+    border-radius: 8px;
+    text-align: center;
+    border: 2px solid #4a90e2;
+}
+
+.result-label {
+    display: block;
+    color: #64ffda;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+    font-size: 0.9rem;
+}
+
+.result-item span:last-child {
+    display: block;
+    color: #fff;
+    font-size: 1.5rem;
+    font-weight: 700;
+}
+
+/* Tables */
+.comparison-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1rem 0;
+    background: #0f3460;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.comparison-table thead {
+    background: linear-gradient(135deg, #4a90e2, #64ffda);
+    color: #1a1a2e;
+}
+
+.comparison-table th,
+.comparison-table td {
+    padding: 1rem;
+    text-align: left;
+    border-bottom: 1px solid #16213e;
+}
+
+.comparison-table th {
+    font-weight: 700;
+    text-transform: uppercase;
+    font-size: 0.9rem;
+    letter-spacing: 1px;
+}
+
+.comparison-table tbody tr {
+    transition: background 0.3s ease;
+}
+
+.comparison-table tbody tr:hover {
+    background: rgba(74, 144, 226, 0.1);
+}
+
+.comparison-table td {
+    color: #d0d0d0;
+}
+
+/* Two Column Layout */
+.two-column {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+    margin: 1.5rem 0;
+}
+
+.column {
+    background: #0f3460;
+    padding: 1.5rem;
+    border-radius: 8px;
+    border: 2px solid rgba(74, 144, 226, 0.3);
+}
+
+/* Comparison Grid */
+.comparison-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 1.5rem;
+    margin: 1.5rem 0;
+}
+
+.comparison-item {
+    background: #0f3460;
+    padding: 1.5rem;
+    border-radius: 8px;
+    border-left: 4px solid #4a90e2;
+}
+
+/* Data Tree */
+.data-tree {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2rem;
+    padding: 2rem;
+    margin: 1.5rem 0;
+}
+
+.tree-level-1,
+.tree-level-2,
+.tree-level-3 {
+    display: flex;
+    gap: 2rem;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.tree-node {
+    padding: 1rem 2rem;
+    background: #0f3460;
+    border: 2px solid #4a90e2;
+    border-radius: 8px;
+    color: #64ffda;
+    font-weight: 600;
+    position: relative;
+    transition: all 0.3s ease;
+}
+
+.tree-node:hover {
+    transform: scale(1.05);
+    box-shadow: 0 4px 15px rgba(74, 144, 226, 0.4);
+}
+
+.tree-node.main {
+    font-size: 1.3rem;
+    background: linear-gradient(135deg, #4a90e2, #64ffda);
+    color: #1a1a2e;
+}
+
+.tree-node.categorical {
+    border-color: #64ffda;
+}
+
+.tree-node.numerical {
+    border-color: #ff6b6b;
+}
+
+/* Use Case List */
+.use-case-list {
+    list-style: none;
+    margin-left: 0;
+}
+
+.use-case-list li {
+    padding: 1rem;
+    margin-bottom: 1rem;
+    background: #0f3460;
+    border-radius: 8px;
+    border-left: 4px solid #4a90e2;
+    transition: all 0.3s ease;
+}
+
+.use-case-list li:hover {
+    transform: translateX(5px);
+    border-left-color: #64ffda;
+}
+
+/* Example Solution */
+.example-solution {
+    background: #0f3460;
+    padding: 1.5rem;
+    border-radius: 8px;
+    margin-top: 1rem;
+    font-family: 'Courier New', monospace;
+}
+
+.example-solution p {
+    margin-bottom: 0.8rem;
+    color: #d0d0d0;
+}
+
+.example-solution strong {
+    color: #64ffda;
+}
+
+/* Summary Card */
+.summary-card {
+    background: linear-gradient(135deg, #0f3460 0%, #16213e 100%);
+    padding: 2rem;
+    border-radius: 12px;
+    border: 2px solid #64ffda;
+    box-shadow: 0 4px 20px rgba(100, 255, 218, 0.3);
+    margin-bottom: 2rem;
+}
+
+.summary-card h3 {
+    color: #64ffda;
+    margin-bottom: 1rem;
+    font-size: 1.5rem;
+    text-align: center;
+}
+
+.summary-card ul {
+    list-style: none;
+    margin-left: 0;
+}
+
+.summary-card li {
+    padding: 0.8rem;
+    margin-bottom: 0.8rem;
+    background: rgba(100, 255, 218, 0.05);
+    border-radius: 6px;
+    border-left: 3px solid #64ffda;
+    color: #d0d0d0;
+}
+
+.summary-card li::before {
+    content: "✓";
+    color: #64ffda;
+    font-weight: 700;
+    margin-right: 0.8rem;
+}
+
+/* Data Examples Table */
+.data-examples-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 1rem;
+}
+
+.data-examples-table th,
+.data-examples-table td {
+    padding: 1rem;
+    text-align: left;
+    border-bottom: 1px solid rgba(74, 144, 226, 0.2);
+}
+
+.data-examples-table th {
+    background: rgba(74, 144, 226, 0.2);
+    color: #64ffda;
+    font-weight: 600;
+}
+
+/* Responsive Design */
+@media (max-width: 1024px) {
+    .main-container {
+        flex-direction: column;
+    }
+
+    .sidebar {
+        width: 100%;
+        height: auto;
+        position: static;
+        transform: translateX(-100%);
+    }
+
+    .sidebar.active {
+        transform: translateX(0);
+    }
+
+    .mobile-menu-btn {
+        display: flex;
+    }
+
+    .content {
+        padding: 2rem 1.5rem;
+    }
+
+    .topic-header h2 {
+        font-size: 2rem;
+    }
+
+    .two-column {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 768px) {
+    .course-title {
+        font-size: 1.3rem;
+    }
+
+    .content {
+        padding: 1.5rem 1rem;
+    }
+
+    .topic-header h2 {
+        font-size: 1.6rem;
+    }
+
+    .formula-main {
+        font-size: 1.3rem;
+    }
+
+    .comparison-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .results {
+        grid-template-columns: 1fr;
+    }
+
+    .interactive-container canvas {
+        max-width: 100%;
+        height: auto;
+    }
+}
+
+/* Animations */
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
+}
+
+.pulse {
+    animation: pulse 2s ease-in-out infinite;
+}
+
+/* Loading State */
+.loading {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    border: 3px solid rgba(100, 255, 218, 0.3);
+    border-radius: 50%;
+    border-top-color: #64ffda;
+    animation: spin 1s ease-in-out infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* Smooth Transitions */
+* {
+    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+}

ml_complete-all-topics/app.js

@@ -104,6 +104,9 @@ function initSections() {
         if (section.id === 'cross-validation') initCrossValidation();
         if (section.id === 'preprocessing') initPreprocessing();
         if (section.id === 'loss-functions') initLossFunctions();
+        if (section.id === 'optimal-k') initOptimalK();
+        if (section.id === 'hyperparameter-tuning') initHyperparameterTuning();
+        if (section.id === 'naive-bayes') initNaiveBayes();
       }
     });
   });
@@ -2351,6 +2354,334 @@ function drawLossCurves() {
   ctx.restore();
 }
 
+// Optimal K for KNN
+function initOptimalK() {
+  const canvas = document.getElementById('optimal-k-canvas');
+  if (!canvas || canvas.dataset.initialized) return;
+  canvas.dataset.initialized = 'true';
+  
+  const rangeSlider = document.getElementById('k-range-slider');
+  const foldsSlider = document.getElementById('cv-folds-slider');
+  
+  if (rangeSlider) {
+    rangeSlider.addEventListener('input', (e) => {
+      document.getElementById('k-range-val').textContent = e.target.value;
+      drawOptimalK();
+    });
+  }
+  
+  if (foldsSlider) {
+    foldsSlider.addEventListener('input', (e) => {
+      document.getElementById('cv-folds-val').textContent = e.target.value;
+      drawOptimalK();
+    });
+  }
+  
+  drawOptimalK();
+}
+
+function drawOptimalK() {
+  const canvas = document.getElementById('optimal-k-canvas');
+  if (!canvas) return;
+  
+  const ctx = canvas.getContext('2d');
+  const width = canvas.width = canvas.offsetWidth;
+  const height = canvas.height = 400;
+  
+  ctx.clearRect(0, 0, width, height);
+  ctx.fillStyle = '#1a2332';
+  ctx.fillRect(0, 0, width, height);
+  
+  const padding = 60;
+  const chartWidth = width - 2 * padding;
+  const chartHeight = height - 2 * padding;
+  
+  // Use provided data
+  const kRange = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
+  const accuracies = [0.85, 0.88, 0.92, 0.94, 0.96, 0.97, 0.98, 0.97, 0.96, 0.95, 0.94, 0.93, 0.92, 0.91, 0.90, 0.89, 0.88, 0.87, 0.86, 0.85];
+  const optimalK = 7;
+  
+  const scaleX = (k) => padding + ((k - 1) / 19) * chartWidth;
+  const scaleY = (acc) => height - padding - ((acc - 0.8) / 0.2) * chartHeight;
+  
+  // Draw grid
+  ctx.strokeStyle = 'rgba(42, 53, 68, 0.5)';
+  ctx.lineWidth = 1;
+  for (let i = 0; i <= 10; i++) {
+    const x = padding + (chartWidth / 10) * i;
+    ctx.beginPath();
+    ctx.moveTo(x, padding);
+    ctx.lineTo(x, height - padding);
+    ctx.stroke();
+    
+    const y = padding + (chartHeight / 10) * i;
+    ctx.beginPath();
+    ctx.moveTo(padding, y);
+    ctx.lineTo(width - padding, y);
+    ctx.stroke();
+  }
+  
+  // Draw axes
+  ctx.strokeStyle = '#2a3544';
+  ctx.lineWidth = 2;
+  ctx.beginPath();
+  ctx.moveTo(padding, padding);
+  ctx.lineTo(padding, height - padding);
+  ctx.lineTo(width - padding, height - padding);
+  ctx.stroke();
+  
+  // Draw line
+  ctx.strokeStyle = '#6aa9ff';
+  ctx.lineWidth = 3;
+  ctx.beginPath();
+  kRange.forEach((k, i) => {
+    const x = scaleX(k);
+    const y = scaleY(accuracies[i]);
+    if (i === 0) ctx.moveTo(x, y);
+    else ctx.lineTo(x, y);
+  });
+  ctx.stroke();
+  
+  // Draw points
+  kRange.forEach((k, i) => {
+    const x = scaleX(k);
+    const y = scaleY(accuracies[i]);
+    const isOptimal = k === optimalK;
+    
+    ctx.fillStyle = isOptimal ? '#7ef0d4' : '#6aa9ff';
+    ctx.beginPath();
+    ctx.arc(x, y, isOptimal ? 8 : 5, 0, 2 * Math.PI);
+    ctx.fill();
+    
+    if (isOptimal) {
+      ctx.strokeStyle = '#7ef0d4';
+      ctx.lineWidth = 2;
+      ctx.beginPath();
+      ctx.arc(x, y, 14, 0, 2 * Math.PI);
+      ctx.stroke();
+      
+      // Label
+      ctx.fillStyle = '#7ef0d4';
+      ctx.font = 'bold 14px sans-serif';
+      ctx.textAlign = 'center';
+      ctx.fillText(`Optimal K=${optimalK}`, x, y - 25);
+      ctx.fillText(`Accuracy: ${(accuracies[i] * 100).toFixed(1)}%`, x, y - 10);
+    }
+  });
+  
+  // Draw vertical line at optimal K
+  ctx.strokeStyle = 'rgba(126, 240, 212, 0.3)';
+  ctx.lineWidth = 2;
+  ctx.setLineDash([5, 5]);
+  ctx.beginPath();
+  ctx.moveTo(scaleX(optimalK), padding);
+  ctx.lineTo(scaleX(optimalK), height - padding);
+  ctx.stroke();
+  ctx.setLineDash([]);
+  
+  // Labels
+  ctx.fillStyle = '#a9b4c2';
+  ctx.font = '12px sans-serif';
+  ctx.textAlign = 'center';
+  ctx.fillText('K Value', width / 2, height - 20);
+  ctx.save();
+  ctx.translate(20, height / 2);
+  ctx.rotate(-Math.PI / 2);
+  ctx.fillText('Mean Accuracy', 0, 0);
+  ctx.restore();
+  
+  // X-axis labels
+  for (let i = 1; i <= 20; i += 2) {
+    ctx.fillText(i, scaleX(i), height - padding + 20);
+  }
+}
+
+// Hyperparameter Tuning & GridSearch
+function initHyperparameterTuning() {
+  const canvas = document.getElementById('gridsearch-canvas');
+  if (!canvas || canvas.dataset.initialized) return;
+  canvas.dataset.initialized = 'true';
+  drawGridSearch();
+}
+
+function drawGridSearch() {
+  const canvas = document.getElementById('gridsearch-canvas');
+  if (!canvas) return;
+  
+  const ctx = canvas.getContext('2d');
+  const width = canvas.width = canvas.offsetWidth;
+  const height = canvas.height = 400;
+  
+  ctx.clearRect(0, 0, width, height);
+  ctx.fillStyle = '#1a2332';
+  ctx.fillRect(0, 0, width, height);
+  
+  const padding = 80;
+  const chartWidth = width - 2 * padding;
+  const chartHeight = height - 2 * padding;
+  
+  // Grid data - C vs gamma heatmap
+  const cValues = [0.1, 1, 10, 100];
+  const gammaValues = [0.001, 0.01, 0.1, 1];
+  
+  // Scores (simulated)
+  const scores = [
+    [0.70, 0.75, 0.78, 0.76],
+    [0.82, 0.88, 0.92, 0.85],
+    [0.88, 0.95, 0.93, 0.87],
+    [0.85, 0.90, 0.88, 0.82]
+  ];
+  
+  const cellWidth = chartWidth / cValues.length;
+  const cellHeight = chartHeight / gammaValues.length;
+  
+  // Draw cells
+  cValues.forEach((c, i) => {
+    gammaValues.forEach((g, j) => {
+      const x = padding + i * cellWidth;
+      const y = padding + j * cellHeight;
+      const score = scores[i][j];
+      
+      // Color based on score
+      const intensity = (score - 0.7) / 0.25;
+      const r = Math.floor(255 - intensity * 155);
+      const gb = Math.floor(100 + intensity * 140);
+      ctx.fillStyle = `rgb(${r}, ${gb}, ${Math.floor(gb * 0.9)})`;
+      ctx.fillRect(x, y, cellWidth, cellHeight);
+      
+      // Border
+      ctx.strokeStyle = '#1a2332';
+      ctx.lineWidth = 2;
+      ctx.strokeRect(x, y, cellWidth, cellHeight);
+      
+      // Score text
+      ctx.fillStyle = score > 0.88 ? '#1a2332' : '#e8eef6';
+      ctx.font = 'bold 14px sans-serif';
+      ctx.textAlign = 'center';
+      ctx.fillText((score * 100).toFixed(0) + '%', x + cellWidth / 2, y + cellHeight / 2 + 5);
+      
+      // Highlight best
+      if (score === 0.95) {
+        ctx.strokeStyle = '#7ef0d4';
+        ctx.lineWidth = 4;
+        ctx.strokeRect(x, y, cellWidth, cellHeight);
+        
+        ctx.fillStyle = '#7ef0d4';
+        ctx.font = '12px sans-serif';
+        ctx.fillText('★ Best', x + cellWidth / 2, y + cellHeight / 2 + 22);
+      }
+    });
+  });
+  
+  // Axis labels - C
+  ctx.fillStyle = '#a9b4c2';
+  ctx.font = '12px sans-serif';
+  ctx.textAlign = 'center';
+  cValues.forEach((c, i) => {
+    const x = padding + i * cellWidth + cellWidth / 2;
+    ctx.fillText(`C=${c}`, x, height - padding + 25);
+  });
+  
+  // Axis labels - gamma
+  ctx.textAlign = 'right';
+  gammaValues.forEach((g, i) => {
+    const y = padding + i * cellHeight + cellHeight / 2;
+    ctx.fillText(`γ=${g}`, padding - 10, y + 5);
+  });
+  
+  // Title
+  ctx.fillStyle = '#7ef0d4';
+  ctx.font = 'bold 16px sans-serif';
+  ctx.textAlign = 'center';
+  ctx.fillText('GridSearch Heatmap: C vs gamma (RBF kernel)', width / 2, 30);
+  
+  // Legend
+  ctx.font = '12px sans-serif';
+  ctx.fillStyle = '#a9b4c2';
+  ctx.textAlign = 'left';
+  ctx.fillText('Lower accuracy', padding, height - 10);
+  ctx.textAlign = 'right';
+  ctx.fillText('Higher accuracy', width - padding, height - 10);
+}
+
+// Naive Bayes
+function initNaiveBayes() {
+  const canvas = document.getElementById('naive-bayes-canvas');
+  if (!canvas || canvas.dataset.initialized) return;
+  canvas.dataset.initialized = 'true';
+  drawNaiveBayes();
+}
+
+function drawNaiveBayes() {
+  const canvas = document.getElementById('naive-bayes-canvas');
+  if (!canvas) return;
+  
+  const ctx = canvas.getContext('2d');
+  const width = canvas.width = canvas.offsetWidth;
+  const height = canvas.height = 350;
+  
+  ctx.clearRect(0, 0, width, height);
+  ctx.fillStyle = '#1a2332';
+  ctx.fillRect(0, 0, width, height);
+  
+  // Display calculation flow
+  const steps = [
+    { label: 'Words', value: '["free", "money"]', color: '#6aa9ff' },
+    { label: 'P(free|spam)', value: '0.8', color: '#7ef0d4' },
+    { label: 'P(money|spam)', value: '0.7', color: '#7ef0d4' },
+    { label: 'P(spam)', value: '0.3', color: '#ff8c6a' },
+    { label: 'Likelihood', value: '0.8 × 0.7 = 0.56', color: '#7ef0d4' },
+    { label: 'Posterior', value: '0.56 × 0.3 = 0.168', color: '#7ef0d4' },
+    { label: 'Result', value: 'P(spam) = 0.98 (98%)', color: '#7ef0d4' }
+  ];
+  
+  const boxWidth = 180;
+  const boxHeight = 45;
+  const startY = 40;
+  const gap = 8;
+  
+  steps.forEach((step, i) => {
+    const x = (width - boxWidth) / 2;
+    const y = startY + i * (boxHeight + gap);
+    
+    // Box
+    ctx.fillStyle = '#2a3544';
+    ctx.fillRect(x, y, boxWidth, boxHeight);
+    ctx.strokeStyle = step.color;
+    ctx.lineWidth = 2;
+    ctx.strokeRect(x, y, boxWidth, boxHeight);
+    
+    // Text
+    ctx.fillStyle = '#a9b4c2';
+    ctx.font = '11px sans-serif';
+    ctx.textAlign = 'center';
+    ctx.fillText(step.label, x + boxWidth / 2, y + boxHeight / 2 - 6);
+    
+    ctx.fillStyle = step.color;
+    ctx.font = 'bold 13px monospace';
+    ctx.fillText(step.value, x + boxWidth / 2, y + boxHeight / 2 + 10);
+    
+    // Arrow
+    if (i < steps.length - 1) {
+      ctx.strokeStyle = '#6aa9ff';
+      ctx.fillStyle = '#6aa9ff';
+      ctx.lineWidth = 2;
+      const arrowY = y + boxHeight + gap / 2;
+      ctx.beginPath();
+      ctx.moveTo(x + boxWidth / 2, arrowY - 3);
+      ctx.lineTo(x + boxWidth / 2, arrowY + 3);
+      ctx.stroke();
+      
+      // Arrowhead
+      ctx.beginPath();
+      ctx.moveTo(x + boxWidth / 2, arrowY + 3);
+      ctx.lineTo(x + boxWidth / 2 - 4, arrowY - 2);
+      ctx.lineTo(x + boxWidth / 2 + 4, arrowY - 2);
+      ctx.fill();
+    }
+  });
+}
+
 // Handle window resize
 let resizeTimer;
 window.addEventListener('resize', () => {
@@ -2377,5 +2708,8 @@ window.addEventListener('resize', () => {
     drawSVMCParameter();
     drawSVMTraining();
     drawSVMKernel();
+    drawOptimalK();
+    drawGridSearch();
+    drawNaiveBayes();
   }, 250);
 });

ml_complete-all-topics/index.html

@@ -496,6 +496,9 @@ canvas {
                 <a href="#cross-validation" class="toc-link">10. Cross-Validation</a>
                 <a href="#preprocessing" class="toc-link">11. Data Preprocessing</a>
                 <a href="#loss-functions" class="toc-link">12. Loss Functions</a>
+                <a href="#optimal-k" class="toc-link">13. Finding Optimal K for KNN</a>
+                <a href="#hyperparameter-tuning" class="toc-link">14. Hyperparameter Tuning &amp; GridSearch</a>
+                <a href="#naive-bayes" class="toc-link">15. Naive Bayes Classifier</a>
             </nav>
         </aside>
 
@@ -2378,6 +2381,514 @@ Actual  Pos     TP     FN
                 </div>
             </div>
 
+            <!-- Section 13: Finding Optimal K for KNN -->
+            <div class="section" id="optimal-k">
+                <div class="section-header">
+                    <h2>13. Finding Optimal K for KNN 🎯</h2>
+                    <button class="section-toggle">▼</button>
+                </div>
+                <div class="section-body">
+                    <p>In KNN, choosing the right K value is crucial! Too small = overfitting, too large = underfitting. How do we find the optimal K? Use cross-validation!</p>
+
+                    <div class="info-card">
+                        <div class="info-card-title">The Problem</div>
+                        <ul class="info-card-list">
+                            <li>K=1: Overfits (memorizes training data, including noise)</li>
+                            <li>K=too large: Underfits (boundary too smooth, misses patterns)</li>
+                            <li>Need: K that balances bias and variance</li>
+                            <li>K controls model complexity</li>
+                        </ul>
+                    </div>
+
+                    <h3>Why K Matters</h3>
+                    <ul>
+                        <li><strong>K controls model complexity:</strong> Small K = complex boundaries, large K = simple boundaries</li>
+                        <li><strong>Affects decision boundary smoothness:</strong> Directly impacts predictions</li>
+                        <li><strong>Impacts generalization ability:</strong> Wrong K hurts test performance</li>
+                        <li><strong>Must be chosen carefully:</strong> Can't just guess!</li>
+                    </ul>
+
+                    <h3>The Solution: Cross-Validation</h3>
+                    <div class="formula">
+                        <strong>K-Selection Algorithm:</strong>
+                        For K = 1 to 20:<br>
+                        &nbsp;&nbsp;For each fold in K-Fold CV:<br>
+                        &nbsp;&nbsp;&nbsp;&nbsp;Train KNN with this K value<br>
+                        &nbsp;&nbsp;&nbsp;&nbsp;Test on validation fold<br>
+                        &nbsp;&nbsp;&nbsp;&nbsp;Record accuracy<br>
+                        &nbsp;&nbsp;Calculate mean accuracy across all folds<br>
+                        &nbsp;&nbsp;Store: (K, mean_accuracy)<br>
+                        <br>
+                        Plot K vs Mean Accuracy<br>
+                        Choose K with highest mean accuracy
+                    </div>
+
+                    <h3>Step-by-Step Process</h3>
+                    <ol>
+                        <li><strong>Define K Range:</strong> Try K = 1, 2, 3, ..., 20 (or use √n as starting point)</li>
+                        <li><strong>Set Up Cross-Validation:</strong> Use k-fold CV (e.g., k=10) to ensure robust evaluation</li>
+                        <li><strong>Train and Evaluate:</strong> For each K value, run k-fold CV, get accuracy for each fold, calculate mean ± std dev</li>
+                        <li><strong>Select Optimal K:</strong> Choose K with highest mean accuracy (or use elbow method)</li>
+                    </ol>
+
+                    <h3>Example Walkthrough</h3>
+                    <p><strong>Dataset:</strong> A, B, C, D, E, F (6 samples), k-fold = 3</p>
+
+                    <table class="data-table">
+                        <thead>
+                            <tr><th>K Value</th><th>Fold 1</th><th>Fold 2</th><th>Fold 3</th><th>Mean Accuracy</th></tr>
+                        </thead>
+                        <tbody>
+                            <tr><td>K=1</td><td>100%</td><td>100%</td><td>50%</td><td>83.3%</td></tr>
+                            <tr style="background: rgba(126, 240, 212, 0.1);"><td><strong>K=3</strong></td><td>100%</td><td>100%</td><td>100%</td><td><strong>100% ← Best!</strong></td></tr>
+                            <tr><td>K=5</td><td>100%</td><td>50%</td><td>100%</td><td>83.3%</td></tr>
+                        </tbody>
+                    </table>
+
+                    <div class="figure">
+                        <div class="figure-placeholder" style="height: 400px">
+                            <canvas id="optimal-k-canvas"></canvas>
+                        </div>
+                        <p class="figure-caption"><strong>Figure:</strong> K vs Accuracy plot showing optimal K value</p>
+                    </div>
+
+                    <div class="controls">
+                        <div class="control-group">
+                            <label>K Range (max): <span id="k-range-val">20</span></label>
+                            <input type="range" id="k-range-slider" min="10" max="30" step="5" value="20">
+                        </div>
+                        <div class="control-group">
+                            <label>CV Folds: <span id="cv-folds-val">10</span></label>
+                            <input type="range" id="cv-folds-slider" min="3" max="10" step="1" value="10">
+                        </div>
+                    </div>
+
+                    <h3>Elbow Method</h3>
+                    <p>Look for the "elbow point" where accuracy stops improving significantly:</p>
+                    <ul>
+                        <li><strong>Sharp increase:</strong> Significant improvement with larger K</li>
+                        <li><strong>Elbow point:</strong> Diminishing returns begin</li>
+                        <li><strong>Plateau:</strong> Little benefit from larger K</li>
+                        <li><strong>Choose K at/near elbow:</strong> Best trade-off</li>
+                    </ul>
+
+                    <div class="callout info">
+                        <div class="callout-title">💡 Odd K Values</div>
+                        <div class="callout-content">
+                            Always prefer odd K values (3, 5, 7, 9) for binary classification! This avoids ties when neighbors vote. For K=4, you might get 2 votes for each class.
+                        </div>
+                    </div>
+
+                    <div class="callout warning">
+                        <div class="callout-title">⚠️ Don't Use Test Set!</div>
+                        <div class="callout-content">
+                            Never use the test set for K selection! Always use cross-validation on training data only. The test set should remain untouched until final evaluation.
+                        </div>
+                    </div>
+
+                    <h3>Practical Tips</h3>
+                    <ul>
+                        <li><strong>Start with K = √n:</strong> n = training samples (good starting point)</li>
+                        <li><strong>Use odd K:</strong> Avoids ties in binary classification</li>
+                        <li><strong>Consider computational cost:</strong> Large K = more neighbors to check</li>
+                        <li><strong>Visualize decision boundaries:</strong> For different K values</li>
+                        <li><strong>Use stratified k-fold:</strong> For imbalanced data</li>
+                    </ul>
+
+                    <h3>Real-World Example</h3>
+                    <div class="info-card">
+                        <div class="info-card-title">🌸 Iris Flower Classification (150 samples)</div>
+                        <p style="margin: 12px 0; line-height: 1.6;">
+                            <strong>Process:</strong> Try K = 1 to 20, Use 10-fold CV<br>
+                            <strong>Results:</strong><br>
+                            • K=1: 95% accuracy (overfits to noise)<br>
+                            • K=7: 97% accuracy (optimal! ✓)<br>
+                            • K=15: 94% accuracy (underfits, too smooth)<br>
+                            <br>
+                            The optimal K=7 provides the best balance between model complexity and generalization!
+                        </p>
+                    </div>
+
+                    <div class="callout success">
+                        <div class="callout-title">✅ Key Takeaway</div>
+                        <div class="callout-content">
+                            Finding optimal K is not guesswork! Use systematic cross-validation to evaluate multiple K values and choose the one with highest mean accuracy. This ensures your KNN model generalizes well to unseen data.
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Section 14: Hyperparameter Tuning & GridSearch -->
+            <div class="section" id="hyperparameter-tuning">
+                <div class="section-header">
+                    <h2>14. Hyperparameter Tuning &amp; GridSearch ⚙️</h2>
+                    <button class="section-toggle">▼</button>
+                </div>
+                <div class="section-body">
+                    <p>Models have two types of parameters: <strong>learned parameters</strong> (like weights) and <strong>hyperparameters</strong> (like learning rate). We must tune hyperparameters to get the best model!</p>
+
+                    <h3>What Are Hyperparameters?</h3>
+                    <p><strong>Definition:</strong> Parameters that control the learning process but aren't learned from data.</p>
+
+                    <div class="info-card">
+                        <div class="info-card-title">Parameters vs Hyperparameters</div>
+                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px;">
+                            <div style="background: rgba(126, 240, 212, 0.1); padding: 12px; border-radius: 6px;">
+                                <strong style="color: #7ef0d4;">Parameters (Learned)</strong>
+                                <ul style="margin-top: 8px; font-size: 14px;">
+                                    <li>Linear Regression: w, b</li>
+                                    <li>Logistic Regression: coefficients</li>
+                                    <li>SVM: support vector positions</li>
+                                    <li>Optimized during training</li>
+                                </ul>
+                            </div>
+                            <div style="background: rgba(106, 169, 255, 0.1); padding: 12px; border-radius: 6px;">
+                                <strong style="color: #6aa9ff;">Hyperparameters (Set Before)</strong>
+                                <ul style="margin-top: 8px; font-size: 14px;">
+                                    <li>Learning rate (α)</li>
+                                    <li>Number of iterations</li>
+                                    <li>SVM: C, gamma, kernel</li>
+                                    <li>KNN: K value</li>
+                                    <li>Must be tuned manually</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+
+                    <h3>Examples Across Algorithms</h3>
+                    
+                    <h4>Linear/Logistic Regression:</h4>
+                    <ul>
+                        <li><strong>Learning rate (α):</strong> 0.001, 0.01, 0.1</li>
+                        <li><strong>Number of iterations:</strong> 100, 1000, 10000</li>
+                        <li><strong>Regularization strength (λ):</strong> 0.01, 0.1, 1, 10</li>
+                    </ul>
+
+                    <h4>SVM:</h4>
+                    <ul>
+                        <li><strong>C (regularization):</strong> 0.1, 1, 10, 100, 1000</li>
+                        <li><strong>gamma (kernel coefficient):</strong> 'scale', 'auto', 0.001, 0.01, 0.1</li>
+                        <li><strong>kernel:</strong> 'linear', 'poly', 'rbf', 'sigmoid'</li>
+                        <li><strong>degree (for poly):</strong> 2, 3, 4, 5</li>
+                    </ul>
+
+                    <h4>KNN:</h4>
+                    <ul>
+                        <li><strong>K (neighbors):</strong> 1, 3, 5, 7, 9, 11</li>
+                        <li><strong>Distance metric:</strong> 'euclidean', 'manhattan', 'minkowski'</li>
+                        <li><strong>Weights:</strong> 'uniform', 'distance'</li>
+                    </ul>
+
+                    <div class="callout warning">
+                        <div class="callout-title">⚠️ The Problem with Random Values</div>
+                        <div class="callout-content">
+                            If we just try random hyperparameter values:<br>
+                            • Inefficient (might miss optimal combination)<br>
+                            • No systematic approach<br>
+                            • Hard to reproduce<br>
+                            • Wastes time and resources
+                        </div>
+                    </div>
+
+                    <h3>Solution: GridSearch!</h3>
+                    <p><strong>What is GridSearch?</strong> Systematically try all combinations of hyperparameters and pick the best.</p>
+
+                    <div class="formula">
+                        <strong>GridSearch Algorithm:</strong><br>
+                        1. Define parameter grid:<br>
+                        &nbsp;&nbsp;{ 'C': [0.1, 1, 10, 100],<br>
+                        &nbsp;&nbsp;&nbsp;&nbsp;'gamma': ['scale', 'auto', 0.001, 0.01],<br>
+                        &nbsp;&nbsp;&nbsp;&nbsp;'kernel': ['linear', 'rbf', 'poly'] }<br>
+                        <br>
+                        2. Generate all combinations:<br>
+                        &nbsp;&nbsp;Total: 4 × 4 × 3 = 48 combinations<br>
+                        <br>
+                        3. For each combination:<br>
+                        &nbsp;&nbsp;- Train model with these hyperparameters<br>
+                        &nbsp;&nbsp;- Evaluate using cross-validation<br>
+                        &nbsp;&nbsp;- Record mean CV score<br>
+                        <br>
+                        4. Select best combination:<br>
+                        &nbsp;&nbsp;- Highest CV score = best hyperparameters
+                    </div>
+
+                    <div class="figure">
+                        <div class="figure-placeholder" style="height: 400px">
+                            <canvas id="gridsearch-canvas"></canvas>
+                        </div>
+                        <p class="figure-caption"><strong>Figure:</strong> GridSearch heatmap showing parameter combinations and their scores</p>
+                    </div>
+
+                    <h3>SVM GridSearch Example</h3>
+                    
+                    <table class="data-table">
+                        <thead>
+                            <tr><th>#</th><th>C</th><th>gamma</th><th>kernel</th><th>CV Score</th></tr>
+                        </thead>
+                        <tbody>
+                            <tr><td>1</td><td>0.1</td><td>0.001</td><td>linear</td><td>0.85</td></tr>
+                            <tr><td>2</td><td>0.1</td><td>0.001</td><td>rbf</td><td>0.88</td></tr>
+                            <tr><td>...</td><td>...</td><td>...</td><td>...</td><td>...</td></tr>
+                            <tr style="background: rgba(126, 240, 212, 0.1);"><td><strong>32</strong></td><td><strong>10</strong></td><td><strong>0.01</strong></td><td><strong>rbf</strong></td><td><strong>0.95 ← Best!</strong></td></tr>
+                        </tbody>
+                    </table>
+
+                    <p><strong>Result:</strong> Best parameters found automatically: C=10, gamma=0.01, kernel='rbf'</p>
+
+                    <h3>Computational Cost</h3>
+                    <div class="formula">
+                        <strong>Total Time Formula:</strong><br>
+                        Total Time = n_combinations × cv_folds × training_time<br>
+                        <br>
+                        <strong>Example:</strong><br>
+                        • 48 combinations<br>
+                        • 5-fold CV<br>
+                        • 1 second per training<br>
+                        <strong>Total:</strong> 48 × 5 × 1 = 240 seconds (4 minutes)
+                    </div>
+
+                    <div class="callout warning">
+                        <div class="callout-title">⚠️ GridSearch Can Be Slow!</div>
+                        <div class="callout-content">
+                            For large parameter grids, GridSearch can take hours or days! Solutions:<br>
+                            • Use fewer parameter values (coarse then fine grid)<br>
+                            • Use RandomizedSearchCV (samples random combinations)<br>
+                            • Use parallel processing (n_jobs=-1)
+                        </div>
+                    </div>
+
+                    <div class="callout info">
+                        <div class="callout-title">💡 Always Use Cross-Validation!</div>
+                        <div class="callout-content">
+                            GridSearch must use cross-validation internally to avoid overfitting to validation set. Never tune hyperparameters on test set!
+                        </div>
+                    </div>
+
+                    <h3>Practical Workflow</h3>
+                    <ol>
+                        <li><strong>Step 1 - Coarse Grid:</strong> Wide range, few values (e.g., C = [0.1, 1, 10, 100, 1000]) to find approximate best region</li>
+                        <li><strong>Step 2 - Fine Grid:</strong> Narrow range, more values (e.g., C = [5, 7, 9, 11, 13]) to refine optimal value</li>
+                        <li><strong>Step 3 - Final Model:</strong> Train on full training set using best hyperparameters, then evaluate on test set</li>
+                    </ol>
+
+                    <div class="callout success">
+                        <div class="callout-title">✅ Key Takeaway</div>
+                        <div class="callout-content">
+                            GridSearch finds optimal hyperparameters automatically - no manual guessing needed! It's the standard approach for hyperparameter tuning in machine learning. Just be patient with large grids!
+                        </div>
+                    </div>
+
+                    <h3>Advanced: RandomizedSearchCV</h3>
+                    <p>For very large hyperparameter spaces, use <strong>RandomizedSearchCV</strong>:</p>
+                    <ul>
+                        <li>Samples random combinations instead of trying all</li>
+                        <li>Much faster than exhaustive GridSearch</li>
+                        <li>Good for many hyperparameters or continuous ranges</li>
+                        <li>Specify number of iterations (e.g., 100 random combinations)</li>
+                    </ul>
+                </div>
+            </div>
+
+            <!-- Section 15: Naive Bayes Classifier -->
+            <div class="section" id="naive-bayes">
+                <div class="section-header">
+                    <h2>15. Naive Bayes Classifier 📊</h2>
+                    <button class="section-toggle">▼</button>
+                </div>
+                <div class="section-body">
+                    <p>Naive Bayes is a probabilistic classifier based on Bayes' Theorem. It's called "naive" because it assumes features are independent (which often isn't true, but it works surprisingly well anyway!)</p>
+
+                    <div class="info-card">
+                        <div class="info-card-title">Key Concepts</div>
+                        <ul class="info-card-list">
+                            <li>Based on Bayes' Theorem and probability</li>
+                            <li>Assumes features are independent ("naive" assumption)</li>
+                            <li>Fast training and prediction</li>
+                            <li>Works well for text classification</li>
+                        </ul>
+                    </div>
+
+                    <h3>Bayes' Theorem</h3>
+                    <div class="formula">
+                        <strong>Bayes' Theorem:</strong><br>
+                        P(A|B) = P(B|A) × P(A) / P(B)<br>
+                        <br>
+                        <strong>In classification context:</strong><br>
+                        P(class|features) = P(features|class) × P(class) / P(features)<br>
+                        <br>
+                        <small>where:<br>
+                        • P(class|features) = Posterior probability (what we want)<br>
+                        • P(features|class) = Likelihood<br>
+                        • P(class) = Prior probability<br>
+                        • P(features) = Evidence (normalizing constant)</small>
+                    </div>
+
+                    <h3>Simple Example: Email Spam Classification</h3>
+                    <p>Email contains words: ["free", "money"]</p>
+                    <p><strong>Calculate:</strong> P(spam|free, money)</p>
+
+                    <h4>Given:</h4>
+                    <ul>
+                        <li>P(spam) = 0.3 (30% emails are spam)</li>
+                        <li>P(not spam) = 0.7</li>
+                        <li>P(free|spam) = 0.8</li>
+                        <li>P(money|spam) = 0.7</li>
+                        <li>P(free|not spam) = 0.1</li>
+                        <li>P(money|not spam) = 0.05</li>
+                    </ul>
+
+                    <h4>Naive Assumption (features are independent):</h4>
+                    <div class="formula">
+                        P(free, money|spam) = P(free|spam) × P(money|spam)<br>
+                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= 0.8 × 0.7 = 0.56<br>
+                        <br>
+                        P(free, money|not spam) = 0.1 × 0.05 = 0.005
+                    </div>
+
+                    <h4>Calculate Posterior:</h4>
+                    <div class="formula">
+                        P(spam|features) = P(free, money|spam) × P(spam)<br>
+                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= 0.56 × 0.3 = 0.168<br>
+                        <br>
+                        P(not spam|features) = 0.005 × 0.7 = 0.0035<br>
+                        <br>
+                        <strong>Normalize:</strong><br>
+                        P(spam|features) = 0.168 / (0.168 + 0.0035) = 0.98<br>
+                        <br>
+                        <strong style="color: #7ef0d4;">Result: 98% probability it's spam! 📧</strong>
+                    </div>
+
+                    <div class="figure">
+                        <div class="figure-placeholder" style="height: 350px">
+                            <canvas id="naive-bayes-canvas"></canvas>
+                        </div>
+                        <p class="figure-caption"><strong>Figure:</strong> Naive Bayes probability calculations for spam detection</p>
+                    </div>
+
+                    <h3>Types of Naive Bayes</h3>
+
+                    <h4>1. Gaussian Naive Bayes</h4>
+                    <ul>
+                        <li><strong>For:</strong> Continuous features</li>
+                        <li><strong>Assumes:</strong> Normal distribution</li>
+                        <li><strong>Formula:</strong> P(x|class) = (1/√(2πσ²)) × e^(-(x-μ)²/(2σ²))</li>
+                        <li><strong>Use case:</strong> Real-valued features (height, weight, temperature)</li>
+                    </ul>
+
+                    <h4>2. Multinomial Naive Bayes</h4>
+                    <ul>
+                        <li><strong>For:</strong> Count data</li>
+                        <li><strong>Features:</strong> Frequencies (e.g., word counts)</li>
+                        <li><strong>Use case:</strong> Text classification (word counts in documents)</li>
+                    </ul>
+
+                    <h4>3. Bernoulli Naive Bayes</h4>
+                    <ul>
+                        <li><strong>For:</strong> Binary features (0/1, yes/no)</li>
+                        <li><strong>Features:</strong> Presence/absence</li>
+                        <li><strong>Use case:</strong> Document classification (word present or not)</li>
+                    </ul>
+
+                    <h3>Training Algorithm</h3>
+                    <div class="formula">
+                        <strong>Training Process:</strong><br>
+                        For each class:<br>
+                        &nbsp;&nbsp;Calculate P(class) = count(class) / total_samples<br>
+                        &nbsp;&nbsp;<br>
+                        &nbsp;&nbsp;For each feature:<br>
+                        &nbsp;&nbsp;&nbsp;&nbsp;Calculate P(feature|class)<br>
+                        &nbsp;&nbsp;&nbsp;&nbsp;<br>
+                        &nbsp;&nbsp;&nbsp;&nbsp;Gaussian: Estimate μ and σ<br>
+                        &nbsp;&nbsp;&nbsp;&nbsp;Multinomial: Count frequencies<br>
+                        &nbsp;&nbsp;&nbsp;&nbsp;Bernoulli: Count presence<br>
+                        <br>
+                        <strong>Prediction Process:</strong><br>
+                        For each class:<br>
+                        &nbsp;&nbsp;posterior = P(class) × ∏ P(feature_i|class)<br>
+                        <br>
+                        Choose class with maximum posterior
+                    </div>
+
+                    <h3>Worked Example: Play Tennis Dataset</h3>
+                    <p>Predict: Should we play tennis?</p>
+                    <p><strong>Given:</strong> Sunny, Cool, High humidity, Windy</p>
+
+                    <table class="data-table">
+                        <thead>
+                            <tr><th>Outlook</th><th>Temp</th><th>Humidity</th><th>Windy</th><th>Play</th></tr>
+                        </thead>
+                        <tbody>
+                            <tr><td>Sunny</td><td>Hot</td><td>High</td><td>No</td><td>No</td></tr>
+                            <tr><td>Sunny</td><td>Hot</td><td>High</td><td>Yes</td><td>No</td></tr>
+                            <tr><td>Overcast</td><td>Hot</td><td>High</td><td>No</td><td>Yes</td></tr>
+                            <tr><td>Rain</td><td>Mild</td><td>High</td><td>No</td><td>Yes</td></tr>
+                            <tr><td>Rain</td><td>Cool</td><td>Normal</td><td>No</td><td>Yes</td></tr>
+                            <tr><td>...</td><td>...</td><td>...</td><td>...</td><td>...</td></tr>
+                        </tbody>
+                    </table>
+
+                    <p>Calculate P(Yes|features) and P(No|features), then compare!</p>
+
+                    <h3>Advantages</h3>
+                    <ul>
+                        <li>✓ <strong>Fast training and prediction:</strong> Very efficient</li>
+                        <li>✓ <strong>Works well with high dimensions:</strong> Many features</li>
+                        <li>✓ <strong>Requires small training data:</strong> Good for limited data</li>
+                        <li>✓ <strong>Handles missing values well:</strong> Robust</li>
+                        <li>✓ <strong>Probabilistic predictions:</strong> Returns confidence scores</li>
+                        <li>✓ <strong>Good baseline classifier:</strong> Easy to implement</li>
+                    </ul>
+
+                    <h3>Disadvantages</h3>
+                    <ul>
+                        <li>✗ <strong>Independence assumption often wrong:</strong> Features are usually correlated</li>
+                        <li>✗ <strong>Zero probability problem:</strong> Needs Laplace smoothing</li>
+                        <li>✗ <strong>Not great for correlated features:</strong> Performance suffers</li>
+                        <li>✗ <strong>Requires distribution assumption:</strong> For continuous features</li>
+                    </ul>
+
+                    <div class="callout info">
+                        <div class="callout-title">💡 Despite "Naive" Assumption</div>
+                        <div class="callout-content">
+                            Despite the naive independence assumption being violated in most real-world datasets, Naive Bayes often works remarkably well in practice! It's especially powerful for text classification tasks.
+                        </div>
+                    </div>
+
+                    <div class="callout warning">
+                        <div class="callout-title">⚠️ Zero Probability Problem</div>
+                        <div class="callout-content">
+                            If a feature value never occurs with a class in training, P = 0! This makes the entire posterior zero.<br>
+                            <br>
+                            <strong>Solution: Laplace Smoothing</strong><br>
+                            P(feature|class) = (count + α) / (total + α × n_features)<br>
+                            where α = smoothing parameter (usually 1)
+                        </div>
+                    </div>
+
+                    <h3>Applications</h3>
+                    <ul>
+                        <li><strong>Spam filtering:</strong> Email classification (spam/not spam)</li>
+                        <li><strong>Sentiment analysis:</strong> Positive/negative reviews</li>
+                        <li><strong>Document classification:</strong> Topic categorization</li>
+                        <li><strong>Medical diagnosis:</strong> Disease prediction from symptoms</li>
+                        <li><strong>Real-time prediction:</strong> Fast classification needed</li>
+                        <li><strong>Recommendation systems:</strong> User preferences</li>
+                    </ul>
+
+                    <div class="callout success">
+                        <div class="callout-title">✅ Key Takeaway</div>
+                        <div class="callout-content">
+                            Naive Bayes is simple, fast, and surprisingly effective! Despite its "naive" independence assumption, it's a powerful baseline classifier that works especially well for text classification. Great for when you need quick results with limited data!
+                        </div>
+                    </div>
+
+                    <h3>🎉 Congratulations!</h3>
+                    <p style="font-size: 18px; color: #7ef0d4; margin-top: 24px;">
+                        You've now completed all 15 machine learning topics! From basic concepts to advanced techniques, you've learned linear regression, gradient descent, classification algorithms, model evaluation, regularization, hyperparameter tuning, and probabilistic methods. You're ready to build real ML projects! 🚀
+                    </p>
+                </div>
+            </div>
+
         </main>
     </div>