Upload 3 files

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;
+}