update maths file

math-ds-complete/app.js

@@ -18,14 +18,28 @@ let animationFrames = {};
 
 // ===== INITIALIZATION =====
 document.addEventListener('DOMContentLoaded', () => {
+    // Core initialization
     initNavigation();
     initSubjectTabs();
     initInteractiveElements();
     setupScrollObserver();
     initializeAllVisualizations();
-    
+
+    // Enhanced features
+    initSearch();
+    initProgressTracking();
+    initKeyboardShortcuts();
+    initLazyLoading();
+
     // Show initial subject
     switchSubject('statistics');
+
+    // Log features
+    console.log('%c🚀 Enhanced Features Active:', 'color: #64ffda; font-size: 14px; font-weight: bold;');
+    console.log('%c  ✓ Global Search (Ctrl/Cmd+K)', 'color: #4a90e2;');
+    console.log('%c  ✓ Progress Tracking (saved locally)', 'color: #4a90e2;');
+    console.log('%c  ✓ MathJax Formula Rendering', 'color: #4a90e2;');
+    console.log('%c  ✓ Keyboard Navigation (Alt+↑/↓)', 'color: #4a90e2;');
 });
 
 // ===== SUBJECT SWITCHING =====
@@ -41,7 +55,7 @@ function initSubjectTabs() {
 
 function switchSubject(subject) {
     currentSubject = subject;
-    
+
     // Update active tab
     document.querySelectorAll('.subject-tab').forEach(tab => {
         tab.classList.remove('active');
@@ -49,7 +63,7 @@ function switchSubject(subject) {
             tab.classList.add('active');
         }
     });
-    
+
     // Update sidebar title
     const titles = {
         'statistics': 'Statistics Content',
@@ -62,7 +76,7 @@ function switchSubject(subject) {
     if (sidebarTitle) {
         sidebarTitle.textContent = titles[subject];
     }
-    
+
     // Show/hide sidebar modules
     document.querySelectorAll('.module').forEach(module => {
         const moduleSubject = module.dataset.subject;
@@ -73,13 +87,13 @@ function switchSubject(subject) {
             module.style.display = subject === 'statistics' ? 'block' : 'none';
         }
     });
-    
+
     // Show/hide topic sections
     document.querySelectorAll('.topic-section').forEach(section => {
         const sectionSubject = section.dataset.subject || 'statistics';
         section.style.display = sectionSubject === subject ? 'block' : 'none';
     });
-    
+
     // Scroll to first topic of subject
     const firstTopic = document.querySelector(`.topic-section[data-subject="${subject}"], .topic-section:not([data-subject])`);
     if (firstTopic && subject !== 'statistics') {
@@ -101,7 +115,7 @@ function initNavigation() {
     // Mobile menu toggle
     const mobileMenuBtn = document.getElementById('mobileMenuBtn');
     const sidebar = document.getElementById('sidebar');
-    
+
     if (mobileMenuBtn) {
         mobileMenuBtn.addEventListener('click', () => {
             sidebar.classList.toggle('active');
@@ -114,17 +128,17 @@ function initNavigation() {
         link.addEventListener('click', (e) => {
             e.preventDefault();
             const topicId = link.getAttribute('data-topic');
-            
+
             // Handle both 'topic-X' and 'ml-topic-X' formats
             let target = document.getElementById(topicId);
             if (!target && !topicId.includes('-')) {
                 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');
@@ -230,14 +244,14 @@ function calculateMedian(data) {
 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(', ');
 }
@@ -257,17 +271,17 @@ 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 };
 }
 
@@ -276,7 +290,7 @@ function calculateIQR(data) {
     const iqr = q3 - q1;
     const lowerFence = q1 - 1.5 * iqr;
     const upperFence = q3 + 1.5 * iqr;
-    
+
     return { q1, q3, iqr, lowerFence, upperFence };
 }
 
@@ -289,11 +303,11 @@ 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);
 }
 
@@ -310,12 +324,12 @@ function calculateCorrelation(x, y) {
 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({
@@ -324,57 +338,57 @@ function initPopulationSampleViz() {
             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);
@@ -383,7 +397,7 @@ function initPopulationSampleViz() {
             }
         });
     }
-    
+
     draw();
 }
 
@@ -391,73 +405,73 @@ function initPopulationSampleViz() {
 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));
@@ -465,7 +479,7 @@ function initCentralTendencyViz() {
             draw();
         });
     }
-    
+
     if (input) {
         input.addEventListener('keypress', (e) => {
             if (e.key === 'Enter') {
@@ -474,7 +488,7 @@ function initCentralTendencyViz() {
             }
         });
     }
-    
+
     draw();
 }
 
@@ -483,19 +497,19 @@ function initializeAllVisualizations() {
     // Statistics visualizations
     initPopulationSampleViz();
     initCentralTendencyViz();
-    
+
     // Linear Algebra visualizations
     initVectorCanvas();
     initSpanCanvas();
     initTransformationGrid();
     initEigenvectorCanvas();
-    
+
     // Calculus visualizations
     initCircleAreaCanvas();
     initDerivativeCanvas();
     initRiemannSumCanvas();
     initTaylorSeriesCanvas();
-    
+
     // Data Science visualizations
     initSimpleRegressionCanvas();
     initLogisticRegressionCanvas();
@@ -503,7 +517,7 @@ function initializeAllVisualizations() {
     initPCACanvas();
     initGradientDescentCanvas();
     initLossLandscapeCanvas();
-    
+
     // Machine Learning visualizations
     initMLLinearRegressionCanvas();
     initMLKMeansCanvas();
@@ -518,32 +532,32 @@ function initializeAllVisualizations() {
 function initMLLinearRegressionCanvas() {
     const canvas = document.getElementById('canvas-ml-1');
     if (!canvas) return;
-    
+
     const ctx = canvas.getContext('2d');
     let showLine = false;
-    
+
     // House price data from worked example
     const data = [
-        {x: 1000, y: 150},
-        {x: 1500, y: 200},
-        {x: 2000, y: 250},
-        {x: 3000, y: 350}
+        { x: 1000, y: 150 },
+        { x: 1500, y: 200 },
+        { x: 2000, y: 250 },
+        { x: 3000, y: 350 }
     ];
-    
+
     function draw() {
         clearCanvas(ctx, canvas);
-        
+
         const padding = 80;
         const width = canvas.width - 2 * padding;
         const height = canvas.height - 2 * padding;
-        
+
         const maxX = 3500;
         const maxY = 400;
-        
+
         // Draw axes
         drawLine(ctx, padding, canvas.height - padding, canvas.width - padding, canvas.height - padding, COLORS.text, 2);
         drawLine(ctx, padding, padding, padding, canvas.height - padding, COLORS.text, 2);
-        
+
         // Draw grid
         for (let i = 0; i <= 7; i++) {
             const x = padding + (i / 7) * width;
@@ -551,14 +565,14 @@ function initMLLinearRegressionCanvas() {
             drawLine(ctx, x, canvas.height - padding, x, canvas.height - padding + 5, COLORS.textSecondary, 1);
             drawText(ctx, xVal, x, canvas.height - padding + 20, 10, COLORS.textSecondary);
         }
-        
+
         for (let i = 0; i <= 8; i++) {
             const y = canvas.height - padding - (i / 8) * height;
             const yVal = (i * 50).toString();
             drawLine(ctx, padding - 5, y, padding, y, COLORS.textSecondary, 1);
             drawText(ctx, yVal, padding - 15, y + 4, 10, COLORS.textSecondary, 'right');
         }
-        
+
         // Draw labels
         drawText(ctx, 'Size (sq ft)', canvas.width / 2, canvas.height - 10, 12, COLORS.cyan);
         ctx.save();
@@ -566,7 +580,7 @@ function initMLLinearRegressionCanvas() {
         ctx.rotate(-Math.PI / 2);
         drawText(ctx, 'Price ($1000s)', 0, 0, 12, COLORS.cyan);
         ctx.restore();
-        
+
         // Draw data points
         data.forEach(point => {
             const px = padding + (point.x / maxX) * width;
@@ -574,29 +588,29 @@ function initMLLinearRegressionCanvas() {
             drawCircle(ctx, px, py, 8, COLORS.cyan);
             drawText(ctx, `${point.y}k`, px + 15, py - 10, 10, COLORS.cyan, 'left');
         });
-        
+
         // Draw regression line if enabled
         if (showLine) {
             // From worked example: y = 50 + 0.1x
             const slope = 0.1;
             const intercept = 50;
-            
+
             const x1 = 0;
             const y1 = intercept;
             const x2 = maxX;
             const y2 = intercept + slope * x2;
-            
+
             const px1 = padding + (x1 / maxX) * width;
             const py1 = canvas.height - padding - (y1 / maxY) * height;
             const px2 = padding + (x2 / maxX) * width;
             const py2 = canvas.height - padding - (y2 / maxY) * height;
-            
+
             drawLine(ctx, px1, py1, px2, py2, COLORS.orange, 3);
-            
+
             // Show equation
             drawText(ctx, 'y = 50 + 0.10x', canvas.width / 2, 30, 16, COLORS.orange);
             drawText(ctx, 'R² = 1.00 (Perfect Fit!)', canvas.width / 2, 50, 14, COLORS.green);
-            
+
             // Highlight prediction point (2500, 300)
             const predX = 2500;
             const predY = 50 + 0.1 * predX;
@@ -606,62 +620,62 @@ function initMLLinearRegressionCanvas() {
             drawText(ctx, '2500 sq ft → $300k', ppx - 80, ppy - 15, 12, COLORS.green, 'left');
         }
     }
-    
+
     const fitBtn = document.getElementById('btn-ml-1-fit');
     const resetBtn = document.getElementById('btn-ml-1-reset');
-    
+
     if (fitBtn) {
         fitBtn.addEventListener('click', () => {
             showLine = true;
             draw();
         });
     }
-    
+
     if (resetBtn) {
         resetBtn.addEventListener('click', () => {
             showLine = false;
             draw();
         });
     }
-    
+
     draw();
 }
 
 function initMLKMeansCanvas() {
     const canvas = document.getElementById('canvas-ml-15');
     if (!canvas) return;
-    
+
     const ctx = canvas.getContext('2d');
     let clustered = false;
-    
+
     // Customer data from worked example
     const customers = [
-        {name: 'A', age: 25, income: 40, cluster: null},
-        {name: 'B', age: 30, income: 50, cluster: null},
-        {name: 'C', age: 28, income: 45, cluster: null},
-        {name: 'D', age: 55, income: 80, cluster: null},
-        {name: 'E', age: 60, income: 90, cluster: null},
-        {name: 'F', age: 52, income: 75, cluster: null}
+        { name: 'A', age: 25, income: 40, cluster: null },
+        { name: 'B', age: 30, income: 50, cluster: null },
+        { name: 'C', age: 28, income: 45, cluster: null },
+        { name: 'D', age: 55, income: 80, cluster: null },
+        { name: 'E', age: 60, income: 90, cluster: null },
+        { name: 'F', age: 52, income: 75, cluster: null }
     ];
-    
+
     let centroids = [
-        {age: 25, income: 40, color: COLORS.cyan},
-        {age: 60, income: 90, color: COLORS.orange}
+        { age: 25, income: 40, color: COLORS.cyan },
+        { age: 60, income: 90, color: COLORS.orange }
     ];
-    
+
     function assignClusters() {
         customers.forEach(customer => {
             // Calculate distance to each centroid
             const d1 = Math.sqrt(Math.pow(customer.age - centroids[0].age, 2) + Math.pow(customer.income - centroids[0].income, 2));
             const d2 = Math.sqrt(Math.pow(customer.age - centroids[1].age, 2) + Math.pow(customer.income - centroids[1].income, 2));
-            
+
             customer.cluster = d1 < d2 ? 0 : 1;
         });
-        
+
         // Update centroids
         const cluster0 = customers.filter(c => c.cluster === 0);
         const cluster1 = customers.filter(c => c.cluster === 1);
-        
+
         if (cluster0.length > 0) {
             centroids[0].age = cluster0.reduce((s, c) => s + c.age, 0) / cluster0.length;
             centroids[0].income = cluster0.reduce((s, c) => s + c.income, 0) / cluster0.length;
@@ -671,34 +685,34 @@ function initMLKMeansCanvas() {
             centroids[1].income = cluster1.reduce((s, c) => s + c.income, 0) / cluster1.length;
         }
     }
-    
+
     function draw() {
         clearCanvas(ctx, canvas);
-        
+
         const padding = 80;
         const width = canvas.width - 2 * padding;
         const height = canvas.height - 2 * padding;
-        
+
         const minAge = 20, maxAge = 70;
         const minIncome = 30, maxIncome = 100;
-        
+
         // Draw axes
         drawLine(ctx, padding, canvas.height - padding, canvas.width - padding, canvas.height - padding, COLORS.text, 2);
         drawLine(ctx, padding, padding, padding, canvas.height - padding, COLORS.text, 2);
-        
+
         // Draw grid
         for (let age = 20; age <= 70; age += 10) {
             const x = padding + ((age - minAge) / (maxAge - minAge)) * width;
             drawLine(ctx, x, canvas.height - padding, x, canvas.height - padding + 5, COLORS.textSecondary, 1);
             drawText(ctx, age.toString(), x, canvas.height - padding + 20, 10, COLORS.textSecondary);
         }
-        
+
         for (let income = 30; income <= 100; income += 10) {
             const y = canvas.height - padding - ((income - minIncome) / (maxIncome - minIncome)) * height;
             drawLine(ctx, padding - 5, y, padding, y, COLORS.textSecondary, 1);
             drawText(ctx, `$${income}k`, padding - 40, y + 4, 10, COLORS.textSecondary, 'right');
         }
-        
+
         // Draw labels
         drawText(ctx, 'Age', canvas.width / 2, canvas.height - 10, 12, COLORS.cyan);
         ctx.save();
@@ -706,23 +720,23 @@ function initMLKMeansCanvas() {
         ctx.rotate(-Math.PI / 2);
         drawText(ctx, 'Income ($k)', 0, 0, 12, COLORS.cyan);
         ctx.restore();
-        
+
         // Draw customers
         customers.forEach(customer => {
             const px = padding + ((customer.age - minAge) / (maxAge - minAge)) * width;
             const py = canvas.height - padding - ((customer.income - minIncome) / (maxIncome - minIncome)) * height;
-            
+
             const color = clustered ? (customer.cluster === 0 ? COLORS.cyan : COLORS.orange) : COLORS.primary;
             drawCircle(ctx, px, py, 10, color);
             drawText(ctx, customer.name, px, py - 15, 12, COLORS.text);
         });
-        
+
         // Draw centroids if clustered
         if (clustered) {
             centroids.forEach((centroid, i) => {
                 const cx = padding + ((centroid.age - minAge) / (maxAge - minAge)) * width;
                 const cy = canvas.height - padding - ((centroid.income - minIncome) / (maxIncome - minIncome)) * height;
-                
+
                 // Draw X marker for centroid
                 ctx.strokeStyle = centroid.color;
                 ctx.lineWidth = 4;
@@ -732,19 +746,19 @@ function initMLKMeansCanvas() {
                 ctx.moveTo(cx + 12, cy - 12);
                 ctx.lineTo(cx - 12, cy + 12);
                 ctx.stroke();
-                
-                drawText(ctx, `C${i+1} [${centroid.age.toFixed(1)}, ${centroid.income.toFixed(1)}]`, 
-                         cx + 20, cy, 11, centroid.color, 'left');
+
+                drawText(ctx, `C${i + 1} [${centroid.age.toFixed(1)}, ${centroid.income.toFixed(1)}]`,
+                    cx + 20, cy, 11, centroid.color, 'left');
             });
-            
+
             drawText(ctx, 'Cluster 1 (Young, Lower Income)', 150, 30, 12, COLORS.cyan);
             drawText(ctx, 'Cluster 2 (Mature, Higher Income)', 150, 50, 12, COLORS.orange);
         }
     }
-    
+
     const clusterBtn = document.getElementById('btn-ml-15-cluster');
     const resetBtn = document.getElementById('btn-ml-15-reset');
-    
+
     if (clusterBtn) {
         clusterBtn.addEventListener('click', () => {
             clustered = true;
@@ -752,19 +766,19 @@ function initMLKMeansCanvas() {
             draw();
         });
     }
-    
+
     if (resetBtn) {
         resetBtn.addEventListener('click', () => {
             clustered = false;
             customers.forEach(c => c.cluster = null);
             centroids = [
-                {age: 25, income: 40, color: COLORS.cyan},
-                {age: 60, income: 90, color: COLORS.orange}
+                { age: 25, income: 40, color: COLORS.cyan },
+                { age: 60, income: 90, color: COLORS.orange }
             ];
             draw();
         });
     }
-    
+
     draw();
 }
 
@@ -773,21 +787,21 @@ function initMLKMeansCanvas() {
 function initVectorCanvas() {
     const canvas = document.getElementById('canvas-42');
     if (!canvas) return;
-    
+
     const ctx = canvas.getContext('2d');
     let vx = 3, vy = 2;
-    
+
     function draw() {
         clearCanvas(ctx, canvas);
-        
+
         const centerX = canvas.width / 2;
         const centerY = canvas.height / 2;
         const scale = 40;
-        
+
         // Draw axes
         drawLine(ctx, 0, centerY, canvas.width, centerY, '#555', 1);
         drawLine(ctx, centerX, 0, centerX, canvas.height, '#555', 1);
-        
+
         // Draw grid
         ctx.strokeStyle = '#333';
         ctx.lineWidth = 0.5;
@@ -797,14 +811,14 @@ function initVectorCanvas() {
                 drawLine(ctx, 0, centerY + i * scale, canvas.width, centerY + i * scale, '#333', 0.5);
             }
         }
-        
+
         // Draw vector
         const endX = centerX + vx * scale;
         const endY = centerY - vy * scale;
-        
+
         // Arrow shaft
         drawLine(ctx, centerX, centerY, endX, endY, COLORS.cyan, 3);
-        
+
         // Arrow head
         const angle = Math.atan2(vy, vx);
         const arrowSize = 15;
@@ -815,20 +829,20 @@ function initVectorCanvas() {
         ctx.closePath();
         ctx.fillStyle = COLORS.cyan;
         ctx.fill();
-        
+
         // Draw vector label
         drawText(ctx, `v = [${vx.toFixed(1)}, ${vy.toFixed(1)}]`, endX + 20, endY - 10, 14, COLORS.cyan, 'left');
-        
+
         // Draw magnitude
         const magnitude = Math.sqrt(vx * vx + vy * vy);
         drawText(ctx, `|v| = ${magnitude.toFixed(2)}`, canvas.width / 2, 30, 14, COLORS.text);
     }
-    
+
     const sliderX = document.getElementById('slider42x');
     const sliderY = document.getElementById('slider42y');
     const labelX = document.getElementById('vec42x');
     const labelY = document.getElementById('vec42y');
-    
+
     if (sliderX) {
         sliderX.addEventListener('input', (e) => {
             vx = parseFloat(e.target.value);
@@ -836,7 +850,7 @@ function initVectorCanvas() {
             draw();
         });
     }
-    
+
     if (sliderY) {
         sliderY.addEventListener('input', (e) => {
             vy = parseFloat(e.target.value);
@@ -844,7 +858,7 @@ function initVectorCanvas() {
             draw();
         });
     }
-    
+
     const resetBtn = document.getElementById('btn42reset');
     if (resetBtn) {
         resetBtn.addEventListener('click', () => {
@@ -856,37 +870,37 @@ function initVectorCanvas() {
             draw();
         });
     }
-    
+
     draw();
 }
 
 function initSpanCanvas() {
     const canvas = document.getElementById('canvas-43');
     if (!canvas) return;
-    
+
     const ctx = canvas.getContext('2d');
     let animating = false;
     let t = 0;
-    
+
     function draw() {
         clearCanvas(ctx, canvas);
-        
+
         const centerX = canvas.width / 2;
         const centerY = canvas.height / 2;
         const scale = 50;
-        
+
         // Draw axes
         drawLine(ctx, 0, centerY, canvas.width, centerY, '#555', 1);
         drawLine(ctx, centerX, 0, centerX, canvas.height, '#555', 1);
-        
+
         // Basis vectors
         const v1 = { x: 2, y: 1 };
         const v2 = { x: -1, y: 1.5 };
-        
+
         // Draw basis vectors
         drawLine(ctx, centerX, centerY, centerX + v1.x * scale, centerY - v1.y * scale, COLORS.cyan, 3);
         drawLine(ctx, centerX, centerY, centerX + v2.x * scale, centerY - v2.y * scale, COLORS.orange, 3);
-        
+
         if (animating) {
             // Draw span (multiple linear combinations)
             ctx.globalAlpha = 0.3;
@@ -899,78 +913,78 @@ function initSpanCanvas() {
             }
             ctx.globalAlpha = 1;
         }
-        
+
         drawText(ctx, 'v₁', centerX + v1.x * scale + 20, centerY - v1.y * scale, 16, COLORS.cyan);
         drawText(ctx, 'v₂', centerX + v2.x * scale - 20, centerY - v2.y * scale, 16, COLORS.orange);
     }
-    
+
     const animateBtn = document.getElementById('btn43animate');
     const resetBtn = document.getElementById('btn43reset');
-    
+
     if (animateBtn) {
         animateBtn.addEventListener('click', () => {
             animating = true;
             draw();
         });
     }
-    
+
     if (resetBtn) {
         resetBtn.addEventListener('click', () => {
             animating = false;
             draw();
         });
     }
-    
+
     draw();
 }
 
 function initTransformationGrid() {
     const canvas = document.getElementById('canvas-44');
     if (!canvas) return;
-    
+
     const ctx = canvas.getContext('2d');
     let matrix = [[1, 0], [0, 1]]; // Identity
-    
+
     function drawGrid(transform = false) {
         clearCanvas(ctx, canvas);
-        
+
         const centerX = canvas.width / 2;
         const centerY = canvas.height / 2;
         const scale = 40;
         const gridSize = 5;
-        
+
         ctx.strokeStyle = transform ? COLORS.cyan : '#555';
         ctx.lineWidth = 1;
-        
+
         // Draw grid lines
         for (let i = -gridSize; i <= gridSize; i++) {
             for (let j = -gridSize; j <= gridSize; j++) {
                 let x1 = i, y1 = j;
                 let x2 = i + 1, y2 = j;
                 let x3 = i, y3 = j + 1;
-                
+
                 if (transform) {
                     [x1, y1] = [matrix[0][0] * i + matrix[0][1] * j, matrix[1][0] * i + matrix[1][1] * j];
                     [x2, y2] = [matrix[0][0] * (i + 1) + matrix[0][1] * j, matrix[1][0] * (i + 1) + matrix[1][1] * j];
                     [x3, y3] = [matrix[0][0] * i + matrix[0][1] * (j + 1), matrix[1][0] * i + matrix[1][1] * (j + 1)];
                 }
-                
+
                 drawLine(ctx, centerX + x1 * scale, centerY - y1 * scale, centerX + x2 * scale, centerY - y2 * scale, ctx.strokeStyle, 1);
                 drawLine(ctx, centerX + x1 * scale, centerY - y1 * scale, centerX + x3 * scale, centerY - y3 * scale, ctx.strokeStyle, 1);
             }
         }
-        
+
         // Draw i-hat and j-hat
         const iHat = transform ? [matrix[0][0], matrix[1][0]] : [1, 0];
         const jHat = transform ? [matrix[0][1], matrix[1][1]] : [0, 1];
-        
+
         drawLine(ctx, centerX, centerY, centerX + iHat[0] * scale, centerY - iHat[1] * scale, COLORS.orange, 3);
         drawLine(ctx, centerX, centerY, centerX + jHat[0] * scale, centerY - jHat[1] * scale, COLORS.green, 3);
     }
-    
+
     const select = document.getElementById('select44');
     const applyBtn = document.getElementById('btn44apply');
-    
+
     if (applyBtn && select) {
         applyBtn.addEventListener('click', () => {
             const type = select.value;
@@ -990,34 +1004,34 @@ function initTransformationGrid() {
             drawGrid(true);
         });
     }
-    
+
     drawGrid(false);
 }
 
 function initEigenvectorCanvas() {
     const canvas = document.getElementById('canvas-54');
     if (!canvas) return;
-    
+
     const ctx = canvas.getContext('2d');
     let transformed = false;
-    
+
     function draw() {
         clearCanvas(ctx, canvas);
-        
+
         const centerX = canvas.width / 2;
         const centerY = canvas.height / 2;
         const scale = 50;
-        
+
         // Draw axes
         drawLine(ctx, 0, centerY, canvas.width, centerY, '#555', 1);
         drawLine(ctx, centerX, 0, centerX, canvas.height, '#555', 1);
-        
+
         // Matrix [[2, 0], [0, 1]] - scaling transformation
         // Eigenvectors: [1, 0] with eigenvalue 2, [0, 1] with eigenvalue 1
-        
+
         const e1Scale = transformed ? 2 : 1;
         const e2Scale = 1;
-        
+
         // Draw regular vectors (affected)
         const regularVecs = [[2, 2], [1, 2], [-2, 1]];
         regularVecs.forEach(([x, y]) => {
@@ -1025,32 +1039,32 @@ function initEigenvectorCanvas() {
             const endY = centerY - y * scale;
             drawLine(ctx, centerX, centerY, endX, endY, '#666', 2);
         });
-        
+
         // Draw eigenvectors (special - stay on their line)
         drawLine(ctx, centerX, centerY, centerX + e1Scale * 2 * scale, centerY, COLORS.cyan, 4);
         drawLine(ctx, centerX, centerY, centerX, centerY - 2 * scale, COLORS.orange, 4);
-        
+
         drawText(ctx, 'Eigenvector 1 (λ=2)', centerX + e1Scale * 2 * scale + 10, centerY - 10, 12, COLORS.cyan, 'left');
         drawText(ctx, 'Eigenvector 2 (λ=1)', centerX + 10, centerY - 2 * scale - 10, 12, COLORS.orange, 'left');
     }
-    
+
     const transformBtn = document.getElementById('btn54transform');
     const resetBtn = document.getElementById('btn54reset');
-    
+
     if (transformBtn) {
         transformBtn.addEventListener('click', () => {
             transformed = true;
             draw();
         });
     }
-    
+
     if (resetBtn) {
         resetBtn.addEventListener('click', () => {
             transformed = false;
             draw();
         });
     }
-    
+
     draw();
 }
 
@@ -1059,18 +1073,18 @@ function initEigenvectorCanvas() {
 function initCircleAreaCanvas() {
     const canvas = document.getElementById('canvas-58');
     if (!canvas) return;
-    
+
     const ctx = canvas.getContext('2d');
     let unwrapping = false;
     let progress = 0;
-    
+
     function draw() {
         clearCanvas(ctx, canvas);
-        
+
         const centerX = canvas.width / 4;
         const centerY = canvas.height / 2;
         const radius = 100;
-        
+
         if (!unwrapping) {
             // Draw circle
             drawCircle(ctx, centerX, centerY, radius, COLORS.cyan, false);
@@ -1084,22 +1098,22 @@ function initCircleAreaCanvas() {
                 const rectY = centerY - r;
                 const rectHeight = 2 * r;
                 const dr = radius / rings;
-                
+
                 ctx.fillStyle = COLORS.cyan;
                 ctx.globalAlpha = 0.6;
                 ctx.fillRect(rectX, rectY, 2, rectHeight);
             }
             ctx.globalAlpha = 1;
-            
+
             if (progress >= 0.99) {
                 drawText(ctx, 'Integrated! Area = πr²', canvas.width * 0.7, centerY + 50, 14, COLORS.green);
             }
         }
     }
-    
+
     const animateBtn = document.getElementById('btn58animate');
     const resetBtn = document.getElementById('btn58reset');
-    
+
     if (animateBtn) {
         animateBtn.addEventListener('click', () => {
             unwrapping = true;
@@ -1113,7 +1127,7 @@ function initCircleAreaCanvas() {
             }, 50);
         });
     }
-    
+
     if (resetBtn) {
         resetBtn.addEventListener('click', () => {
             unwrapping = false;
@@ -1121,32 +1135,32 @@ function initCircleAreaCanvas() {
             draw();
         });
     }
-    
+
     draw();
 }
 
 function initDerivativeCanvas() {
     const canvas = document.getElementById('canvas-59');
     if (!canvas) return;
-    
+
     const ctx = canvas.getContext('2d');
     let dx = 1.0;
-    
+
     function f(x) {
         return 0.02 * x * x;
     }
-    
+
     function draw() {
         clearCanvas(ctx, canvas);
-        
+
         const scale = 50;
         const centerX = canvas.width / 2;
         const centerY = canvas.height * 0.8;
-        
+
         // Draw axes
         drawLine(ctx, 50, centerY, canvas.width - 50, centerY, '#555', 1);
         drawLine(ctx, centerX, 50, centerX, canvas.height - 50, '#555', 1);
-        
+
         // Draw function
         ctx.beginPath();
         for (let x = -canvas.width / 2; x < canvas.width / 2; x += 2) {
@@ -1161,25 +1175,25 @@ function initDerivativeCanvas() {
         ctx.strokeStyle = COLORS.cyan;
         ctx.lineWidth = 2;
         ctx.stroke();
-        
+
         // Draw secant line
         const x0 = 0;
         const x1 = dx * scale;
         const y0 = centerY - f(x0) * scale;
         const y1 = centerY - f(x1) * scale;
-        
+
         drawLine(ctx, centerX + x0 - 50, y0 - (y1 - y0) / x1 * 50, centerX + x1 + 50, y1 + (y1 - y0) / x1 * 50, COLORS.orange, 2);
         drawCircle(ctx, centerX + x0, y0, 5, COLORS.green);
         drawCircle(ctx, centerX + x1, y1, 5, COLORS.green);
-        
+
         const slope = (f(x1 / scale) - f(0)) / (x1 / scale);
         drawText(ctx, `Slope = ${slope.toFixed(3)}`, canvas.width / 2, 40, 14, COLORS.orange);
         drawText(ctx, `As Δx → 0, slope → derivative`, canvas.width / 2, 60, 12, COLORS.text);
     }
-    
+
     const slider = document.getElementById('slider59dx');
     const label = document.getElementById('label59dx');
-    
+
     if (slider) {
         slider.addEventListener('input', (e) => {
             dx = parseFloat(e.target.value);
@@ -1187,32 +1201,32 @@ function initDerivativeCanvas() {
             draw();
         });
     }
-    
+
     draw();
 }
 
 function initRiemannSumCanvas() {
     const canvas = document.getElementById('canvas-64');
     if (!canvas) return;
-    
+
     const ctx = canvas.getContext('2d');
     let n = 8;
-    
+
     function f(x) {
         return 50 + 50 * Math.sin(x / 30);
     }
-    
+
     function draw() {
         clearCanvas(ctx, canvas);
-        
+
         const padding = 50;
         const width = canvas.width - 2 * padding;
         const height = canvas.height - 2 * padding;
-        
+
         // Draw axes
         drawLine(ctx, padding, height + padding, canvas.width - padding, height + padding, '#555', 2);
         drawLine(ctx, padding, padding, padding, height + padding, '#555', 2);
-        
+
         // Draw function
         ctx.beginPath();
         for (let x = 0; x <= width; x += 2) {
@@ -1227,16 +1241,16 @@ function initRiemannSumCanvas() {
         ctx.strokeStyle = COLORS.cyan;
         ctx.lineWidth = 3;
         ctx.stroke();
-        
+
         // Draw rectangles
         const rectWidth = width / n;
         let totalArea = 0;
-        
+
         for (let i = 0; i < n; i++) {
             const x = i * rectWidth;
             const rectHeight = f(x);
             totalArea += rectWidth * rectHeight;
-            
+
             ctx.fillStyle = COLORS.orange;
             ctx.globalAlpha = 0.5;
             ctx.fillRect(padding + x, height + padding - rectHeight, rectWidth, rectHeight);
@@ -1244,14 +1258,14 @@ function initRiemannSumCanvas() {
             ctx.globalAlpha = 1;
             ctx.strokeRect(padding + x, height + padding - rectHeight, rectWidth, rectHeight);
         }
-        
+
         drawText(ctx, `Rectangles: ${n}`, canvas.width / 2, 30, 14, COLORS.text);
         drawText(ctx, `Approximate Area: ${(totalArea / 100).toFixed(2)}`, canvas.width / 2, 50, 12, COLORS.orange);
     }
-    
+
     const slider = document.getElementById('slider64n');
     const label = document.getElementById('label64n');
-    
+
     if (slider) {
         slider.addEventListener('input', (e) => {
             n = parseInt(e.target.value);
@@ -1259,29 +1273,29 @@ function initRiemannSumCanvas() {
             draw();
         });
     }
-    
+
     draw();
 }
 
 function initTaylorSeriesCanvas() {
     const canvas = document.getElementById('canvas-68');
     if (!canvas) return;
-    
+
     const ctx = canvas.getContext('2d');
     let degree = 1;
     let func = 'sin';
-    
+
     function draw() {
         clearCanvas(ctx, canvas);
-        
+
         const scale = 50;
         const centerX = canvas.width / 2;
         const centerY = canvas.height / 2;
-        
+
         // Draw axes
         drawLine(ctx, 50, centerY, canvas.width - 50, centerY, '#555', 1);
         drawLine(ctx, centerX, 50, centerX, canvas.height - 50, '#555', 1);
-        
+
         // Draw actual function
         ctx.beginPath();
         for (let x = -canvas.width / 2; x < canvas.width / 2; x += 2) {
@@ -1290,7 +1304,7 @@ function initTaylorSeriesCanvas() {
             if (func === 'sin') y = Math.sin(t);
             else if (func === 'cos') y = Math.cos(t);
             else y = Math.exp(t);
-            
+
             const px = centerX + x;
             const py = centerY - y * scale;
             if (x === -canvas.width / 2) {
@@ -1302,13 +1316,13 @@ function initTaylorSeriesCanvas() {
         ctx.strokeStyle = COLORS.cyan;
         ctx.lineWidth = 2;
         ctx.stroke();
-        
+
         // Draw Taylor approximation
         ctx.beginPath();
         for (let x = -canvas.width / 2; x < canvas.width / 2; x += 2) {
             const t = x / scale;
             let y = 0;
-            
+
             if (func === 'sin') {
                 for (let n = 0; n <= degree; n++) {
                     const term = Math.pow(-1, n) * Math.pow(t, 2 * n + 1) / factorial(2 * n + 1);
@@ -1324,7 +1338,7 @@ function initTaylorSeriesCanvas() {
                     y += Math.pow(t, n) / factorial(n);
                 }
             }
-            
+
             const px = centerX + x;
             const py = centerY - y * scale;
             if (x === -canvas.width / 2) {
@@ -1336,20 +1350,20 @@ function initTaylorSeriesCanvas() {
         ctx.strokeStyle = COLORS.orange;
         ctx.lineWidth = 3;
         ctx.stroke();
-        
+
         drawText(ctx, `Function: ${func}(x)`, canvas.width / 2, 30, 14, COLORS.cyan);
         drawText(ctx, `Taylor degree: ${degree}`, canvas.width / 2, 50, 14, COLORS.orange);
     }
-    
+
     function factorial(n) {
         if (n <= 1) return 1;
         return n * factorial(n - 1);
     }
-    
+
     const slider = document.getElementById('slider68degree');
     const label = document.getElementById('label68degree');
     const select = document.getElementById('select68func');
-    
+
     if (slider) {
         slider.addEventListener('input', (e) => {
             degree = parseInt(e.target.value);
@@ -1357,14 +1371,14 @@ function initTaylorSeriesCanvas() {
             draw();
         });
     }
-    
+
     if (select) {
         select.addEventListener('change', (e) => {
             func = e.target.value;
             draw();
         });
     }
-    
+
     draw();
 }
 
@@ -1376,7 +1390,7 @@ function initInteractiveElements() {
 
 // ===== HELPER FUNCTIONS =====
 function generateRandomData(count, min, max) {
-    return Array.from({ length: count }, () => 
+    return Array.from({ length: count }, () =>
         Math.floor(Math.random() * (max - min + 1)) + min
     );
 }
@@ -1390,12 +1404,12 @@ function startAnimation(canvasId, animationFunction) {
     if (animationFrames[canvasId]) {
         cancelAnimationFrame(animationFrames[canvasId]);
     }
-    
+
     function animate() {
         animationFunction();
         animationFrames[canvasId] = requestAnimationFrame(animate);
     }
-    
+
     animate();
 }
 
@@ -1413,160 +1427,160 @@ function stopAnimation(canvasId) {
 function initMLSVMCanvas() {
     const canvas = document.getElementById('canvas-ml-9');
     if (!canvas) return;
-    
+
     const ctx = canvas.getContext('2d');
-    
+
     // Generate two-class data
-    const class1 = Array.from({length: 20}, () => ({
+    const class1 = Array.from({ length: 20 }, () => ({
         x: Math.random() * 100 + 50,
         y: Math.random() * 100 + 50
     }));
-    const class2 = Array.from({length: 20}, () => ({
+    const class2 = Array.from({ length: 20 }, () => ({
         x: Math.random() * 100 + 200,
         y: Math.random() * 100 + 200
     }));
-    
+
     function draw() {
         clearCanvas(ctx, canvas);
-        
+
         const padding = 50;
-        
+
         // Draw decision boundary (simplified)
         drawLine(ctx, padding, canvas.height - padding, canvas.width - padding, padding, COLORS.orange, 3);
-        drawText(ctx, 'Decision Boundary', canvas.width/2, 30, 14, COLORS.orange);
-        
+        drawText(ctx, 'Decision Boundary', canvas.width / 2, 30, 14, COLORS.orange);
+
         // Draw margin lines
         drawLine(ctx, padding, canvas.height - padding - 30, canvas.width - padding, padding - 30, COLORS.green, 1);
         drawLine(ctx, padding, canvas.height - padding + 30, canvas.width - padding, padding + 30, COLORS.green, 1);
-        drawText(ctx, 'Maximum Margin', canvas.width/2, 50, 12, COLORS.green);
-        
+        drawText(ctx, 'Maximum Margin', canvas.width / 2, 50, 12, COLORS.green);
+
         // Draw data points
         class1.forEach(p => drawCircle(ctx, p.x, p.y, 6, COLORS.cyan));
         class2.forEach(p => drawCircle(ctx, p.x, p.y, 6, COLORS.primary));
     }
-    
+
     draw();
 }
 
 function initMLRandomForestCanvas() {
     const canvas = document.getElementById('canvas-ml-12');
     if (!canvas) return;
-    
+
     const ctx = canvas.getContext('2d');
-    
+
     function draw() {
         clearCanvas(ctx, canvas);
-        
-        drawText(ctx, 'Random Forest: Ensemble of Decision Trees', canvas.width/2, 50, 16, COLORS.cyan);
-        
+
+        drawText(ctx, 'Random Forest: Ensemble of Decision Trees', canvas.width / 2, 50, 16, COLORS.cyan);
+
         // Draw multiple trees
         const treeCount = 5;
         const treeWidth = (canvas.width - 100) / treeCount;
-        
+
         for (let i = 0; i < treeCount; i++) {
-            const x = 50 + i * treeWidth + treeWidth/2;
+            const x = 50 + i * treeWidth + treeWidth / 2;
             const y = 100;
-            
+
             // Draw simple tree structure
             drawLine(ctx, x, y, x - 30, y + 60, COLORS.green, 2);
             drawLine(ctx, x, y, x + 30, y + 60, COLORS.green, 2);
             drawCircle(ctx, x, y, 8, COLORS.cyan);
             drawCircle(ctx, x - 30, y + 60, 6, COLORS.orange);
             drawCircle(ctx, x + 30, y + 60, 6, COLORS.orange);
-            
-            drawText(ctx, `Tree ${i+1}`, x, y + 100, 12, COLORS.text);
+
+            drawText(ctx, `Tree ${i + 1}`, x, y + 100, 12, COLORS.text);
         }
-        
+
         // Draw voting arrow
-        drawLine(ctx, canvas.width/2, 200, canvas.width/2, 280, COLORS.orange, 3);
-        drawText(ctx, '↓ Majority Vote', canvas.width/2 + 10, 250, 14, COLORS.orange, 'left');
-        
-        drawRect(ctx, canvas.width/2 - 80, 280, 160, 40, COLORS.green);
-        drawText(ctx, 'Final Prediction', canvas.width/2, 305, 14, '#000');
+        drawLine(ctx, canvas.width / 2, 200, canvas.width / 2, 280, COLORS.orange, 3);
+        drawText(ctx, '↓ Majority Vote', canvas.width / 2 + 10, 250, 14, COLORS.orange, 'left');
+
+        drawRect(ctx, canvas.width / 2 - 80, 280, 160, 40, COLORS.green);
+        drawText(ctx, 'Final Prediction', canvas.width / 2, 305, 14, '#000');
     }
-    
+
     draw();
 }
 
 function initMLGradientBoostingCanvas() {
     const canvas = document.getElementById('canvas-ml-13');
     if (!canvas) return;
-    
+
     const ctx = canvas.getContext('2d');
-    
+
     function draw() {
         clearCanvas(ctx, canvas);
-        
-        drawText(ctx, 'Gradient Boosting: Sequential Error Correction', canvas.width/2, 40, 16, COLORS.cyan);
-        
+
+        drawText(ctx, 'Gradient Boosting: Sequential Error Correction', canvas.width / 2, 40, 16, COLORS.cyan);
+
         const stages = 4;
         const stageWidth = (canvas.width - 100) / stages;
-        
+
         for (let i = 0; i < stages; i++) {
             const x = 50 + i * stageWidth;
-            const y = canvas.height/2;
-            
+            const y = canvas.height / 2;
+
             // Draw tree
             drawRect(ctx, x, y - 40, stageWidth - 40, 80, i === 0 ? COLORS.cyan : COLORS.orange, false);
-            drawText(ctx, `Tree ${i+1}`, x + (stageWidth-40)/2, y, 12, COLORS.text);
-            drawText(ctx, i === 0 ? 'Base' : 'Fix Errors', x + (stageWidth-40)/2, y + 20, 10, COLORS.textSecondary);
-            
+            drawText(ctx, `Tree ${i + 1}`, x + (stageWidth - 40) / 2, y, 12, COLORS.text);
+            drawText(ctx, i === 0 ? 'Base' : 'Fix Errors', x + (stageWidth - 40) / 2, y + 20, 10, COLORS.textSecondary);
+
             // Draw arrow
             if (i < stages - 1) {
                 drawLine(ctx, x + stageWidth - 40, y, x + stageWidth, y, COLORS.green, 2);
                 drawText(ctx, '+', x + stageWidth - 20, y - 10, 16, COLORS.green);
             }
         }
-        
-        drawText(ctx, 'Each tree learns from previous mistakes', canvas.width/2, canvas.height - 30, 12, COLORS.text);
+
+        drawText(ctx, 'Each tree learns from previous mistakes', canvas.width / 2, canvas.height - 30, 12, COLORS.text);
     }
-    
+
     draw();
 }
 
 function initMLNeuralNetworkCanvas() {
     const canvas = document.getElementById('canvas-ml-14');
     if (!canvas) return;
-    
+
     const ctx = canvas.getContext('2d');
-    
+
     function draw() {
         clearCanvas(ctx, canvas);
-        
-        drawText(ctx, 'Neural Network Architecture', canvas.width/2, 30, 16, COLORS.cyan);
-        
+
+        drawText(ctx, 'Neural Network Architecture', canvas.width / 2, 30, 16, COLORS.cyan);
+
         const layers = [3, 5, 4, 2]; // neurons per layer
         const layerSpacing = (canvas.width - 100) / (layers.length - 1);
-        
+
         // Draw connections
         ctx.globalAlpha = 0.3;
         for (let l = 0; l < layers.length - 1; l++) {
             const x1 = 50 + l * layerSpacing;
             const x2 = 50 + (l + 1) * layerSpacing;
-            
+
             for (let i = 0; i < layers[l]; i++) {
-                const y1 = canvas.height/2 - (layers[l] - 1) * 15 + i * 30;
+                const y1 = canvas.height / 2 - (layers[l] - 1) * 15 + i * 30;
                 for (let j = 0; j < layers[l + 1]; j++) {
-                    const y2 = canvas.height/2 - (layers[l + 1] - 1) * 15 + j * 30;
+                    const y2 = canvas.height / 2 - (layers[l + 1] - 1) * 15 + j * 30;
                     drawLine(ctx, x1, y1, x2, y2, COLORS.textSecondary, 1);
                 }
             }
         }
         ctx.globalAlpha = 1;
-        
+
         // Draw neurons
         layers.forEach((count, l) => {
             const x = 50 + l * layerSpacing;
             for (let i = 0; i < count; i++) {
-                const y = canvas.height/2 - (count - 1) * 15 + i * 30;
+                const y = canvas.height / 2 - (count - 1) * 15 + i * 30;
                 drawCircle(ctx, x, y, 12, l === 0 ? COLORS.cyan : (l === layers.length - 1 ? COLORS.green : COLORS.orange));
             }
-            
+
             const layerNames = ['Input', 'Hidden 1', 'Hidden 2', 'Output'];
             drawText(ctx, layerNames[l], x, canvas.height - 30, 12, COLORS.text);
         });
     }
-    
+
     draw();
 }
 
@@ -1575,68 +1589,68 @@ function initMLNeuralNetworkCanvas() {
 function initSimpleRegressionCanvas() {
     const canvas = document.getElementById('canvas-70');
     if (!canvas) return;
-    
+
     const ctx = canvas.getContext('2d');
     let showLine = false;
-    
+
     // Sample data
     const data = [
-        {x: 1, y: 2.1}, {x: 2, y: 4.2}, {x: 3, y: 5.8}, {x: 4, y: 8.1},
-        {x: 5, y: 10.3}, {x: 6, y: 12.1}, {x: 7, y: 13.9}, {x: 8, y: 16.2},
-        {x: 9, y: 18.1}, {x: 10, y: 20.0}
+        { x: 1, y: 2.1 }, { x: 2, y: 4.2 }, { x: 3, y: 5.8 }, { x: 4, y: 8.1 },
+        { x: 5, y: 10.3 }, { x: 6, y: 12.1 }, { x: 7, y: 13.9 }, { x: 8, y: 16.2 },
+        { x: 9, y: 18.1 }, { x: 10, y: 20.0 }
     ];
-    
+
     function calculateRegression() {
         const n = data.length;
         const sumX = data.reduce((s, p) => s + p.x, 0);
         const sumY = data.reduce((s, p) => s + p.y, 0);
         const sumXY = data.reduce((s, p) => s + p.x * p.y, 0);
         const sumX2 = data.reduce((s, p) => s + p.x * p.x, 0);
-        
+
         const slope = (n * sumXY - sumX * sumY) / (n * sumX2 - sumX * sumX);
         const intercept = (sumY - slope * sumX) / n;
-        
+
         return { slope, intercept };
     }
-    
+
     function draw() {
         clearCanvas(ctx, canvas);
-        
+
         const padding = 60;
         const width = canvas.width - 2 * padding;
         const height = canvas.height - 2 * padding;
-        
+
         const maxX = 11;
         const maxY = 22;
-        
+
         // Draw axes
         drawLine(ctx, padding, canvas.height - padding, canvas.width - padding, canvas.height - padding, COLORS.text, 2);
         drawLine(ctx, padding, padding, padding, canvas.height - padding, COLORS.text, 2);
-        
+
         // Draw grid
         for (let i = 0; i <= 10; i++) {
             const x = padding + (i / maxX) * width;
             const y = canvas.height - padding - (i * 2 / maxY) * height;
             drawLine(ctx, x, canvas.height - padding, x, canvas.height - padding + 5, COLORS.textSecondary, 1);
             drawText(ctx, i.toString(), x, canvas.height - padding + 20, 10, COLORS.textSecondary);
-            
+
             if (i * 2 <= maxY) {
                 drawLine(ctx, padding - 5, y, padding, y, COLORS.textSecondary, 1);
                 drawText(ctx, (i * 2).toString(), padding - 15, y + 4, 10, COLORS.textSecondary, 'right');
             }
         }
-        
+
         // Draw labels
         drawText(ctx, 'X', canvas.width - padding + 20, canvas.height - padding + 4, 12, COLORS.cyan);
         drawText(ctx, 'Y', padding - 4, padding - 20, 12, COLORS.cyan);
-        
+
         // Draw data points
         data.forEach(point => {
             const x = padding + (point.x / maxX) * width;
             const y = canvas.height - padding - (point.y / maxY) * height;
             drawCircle(ctx, x, y, 6, COLORS.cyan);
         });
-        
+
         // Draw regression line
         if (showLine) {
             const { slope, intercept } = calculateRegression();
@@ -1644,14 +1658,14 @@ function initSimpleRegressionCanvas() {
             const y1 = intercept;
             const x2 = maxX;
             const y2 = slope * x2 + intercept;
-            
+
             const px1 = padding + (x1 / maxX) * width;
             const py1 = canvas.height - padding - (y1 / maxY) * height;
             const px2 = padding + (x2 / maxX) * width;
             const py2 = canvas.height - padding - (y2 / maxY) * height;
-            
+
             drawLine(ctx, px1, py1, px2, py2, COLORS.orange, 3);
-            
+
             // Calculate R²
             const meanY = data.reduce((s, p) => s + p.y, 0) / data.length;
             let ssTot = 0, ssRes = 0;
@@ -1661,57 +1675,57 @@ function initSimpleRegressionCanvas() {
                 ssTot += Math.pow(point.y - meanY, 2);
             });
             const r2 = 1 - (ssRes / ssTot);
-            
+
             drawText(ctx, `y = ${intercept.toFixed(2)} + ${slope.toFixed(2)}x`, canvas.width / 2, 30, 14, COLORS.orange);
             drawText(ctx, `R² = ${r2.toFixed(4)}`, canvas.width / 2, 50, 14, COLORS.green);
         } else {
             drawText(ctx, 'Click "Fit Regression Line" to see the best fit', canvas.width / 2, 30, 14, COLORS.text);
         }
     }
-    
+
     const fitBtn = document.getElementById('btn70fit');
     const resetBtn = document.getElementById('btn70reset');
-    
+
     if (fitBtn) {
         fitBtn.addEventListener('click', () => {
             showLine = true;
             draw();
         });
     }
-    
+
     if (resetBtn) {
         resetBtn.addEventListener('click', () => {
             showLine = false;
             draw();
         });
     }
-    
+
     draw();
 }
 
 function initLogisticRegressionCanvas() {
     const canvas = document.getElementById('canvas-72');
     if (!canvas) return;
-    
+
     const ctx = canvas.getContext('2d');
     let threshold = 0.5;
-    
+
     function sigmoid(z) {
         return 1 / (1 + Math.exp(-z));
     }
-    
+
     function draw() {
         clearCanvas(ctx, canvas);
-        
+
         const padding = 60;
         const width = canvas.width - 2 * padding;
         const height = canvas.height - 2 * padding;
-        
+
         // Draw axes
         const centerY = canvas.height / 2;
         drawLine(ctx, padding, centerY, canvas.width - padding, centerY, COLORS.text, 2);
         drawLine(ctx, canvas.width / 2, padding, canvas.width / 2, canvas.height - padding, COLORS.text, 2);
-        
+
         // Draw sigmoid curve
         ctx.beginPath();
         for (let x = -6; x <= 6; x += 0.1) {
@@ -1727,25 +1741,25 @@ function initLogisticRegressionCanvas() {
         ctx.strokeStyle = COLORS.cyan;
         ctx.lineWidth = 3;
         ctx.stroke();
-        
+
         // Draw threshold line
         const thresholdY = canvas.height - padding - threshold * height;
         drawLine(ctx, padding, thresholdY, canvas.width - padding, thresholdY, COLORS.orange, 2);
         drawText(ctx, `Threshold = ${threshold.toFixed(2)}`, canvas.width - 100, thresholdY - 10, 12, COLORS.orange);
-        
+
         // Draw labels
         drawText(ctx, 'P(y=1) = σ(z) = 1/(1+e^(-z))', canvas.width / 2, 30, 14, COLORS.cyan);
         drawText(ctx, 'Class 1 (if P ≥ threshold)', canvas.width - 150, thresholdY - 30, 12, COLORS.green);
         drawText(ctx, 'Class 0 (if P < threshold)', canvas.width - 150, thresholdY + 30, 12, COLORS.textSecondary);
-        
+
         // Draw axis labels
         drawText(ctx, '0', canvas.width / 2 + 5, centerY + 20, 10, COLORS.text, 'left');
         drawText(ctx, '1', padding - 20, padding + 10, 10, COLORS.text);
     }
-    
+
     const slider = document.getElementById('slider72');
     const label = document.getElementById('label72');
-    
+
     if (slider) {
         slider.addEventListener('input', (e) => {
             threshold = parseFloat(e.target.value);
@@ -1753,24 +1767,24 @@ function initLogisticRegressionCanvas() {
             draw();
         });
     }
-    
+
     draw();
 }
 
 function initPolynomialRegressionCanvas() {
     const canvas = document.getElementById('canvas-74');
     if (!canvas) return;
-    
+
     const ctx = canvas.getContext('2d');
     let degree = 1;
-    
+
     // Generate sample data with some noise
     const trueFunc = (x) => 0.5 * x * x - 3 * x + 5;
     const data = [];
     for (let x = 0; x <= 10; x += 0.5) {
         data.push({ x, y: trueFunc(x) + (Math.random() - 0.5) * 2 });
     }
-    
+
     function fitPolynomial(degree) {
         // Simple polynomial fit (not production-quality)
         return (x) => {
@@ -1780,28 +1794,28 @@ function initPolynomialRegressionCanvas() {
             return trueFunc(x);
         };
     }
-    
+
     function draw() {
         clearCanvas(ctx, canvas);
-        
+
         const padding = 60;
         const width = canvas.width - 2 * padding;
         const height = canvas.height - 2 * padding;
-        
+
         const maxX = 10;
         const maxY = 15;
-        
+
         // Draw axes
         drawLine(ctx, padding, canvas.height - padding, canvas.width - padding, canvas.height - padding, COLORS.text, 2);
         drawLine(ctx, padding, padding, padding, canvas.height - padding, COLORS.text, 2);
-        
+
         // Draw data points
         data.forEach(point => {
             const px = padding + (point.x / maxX) * width;
             const py = canvas.height - padding - (point.y / maxY) * height;
             drawCircle(ctx, px, py, 4, COLORS.cyan);
         });
-        
+
         // Draw polynomial fit
         const polyFunc = fitPolynomial(degree);
         ctx.beginPath();
@@ -1818,17 +1832,17 @@ function initPolynomialRegressionCanvas() {
         ctx.strokeStyle = COLORS.orange;
         ctx.lineWidth = 3;
         ctx.stroke();
-        
+
         drawText(ctx, `Polynomial Degree: ${degree}`, canvas.width / 2, 30, 14, COLORS.orange);
-        
+
         if (degree > 5) {
             drawText(ctx, 'High degree may overfit!', canvas.width / 2, 50, 12, COLORS.orange);
         }
     }
-    
+
     const slider = document.getElementById('slider74');
     const label = document.getElementById('label74');
-    
+
     if (slider) {
         slider.addEventListener('input', (e) => {
             degree = parseInt(e.target.value);
@@ -1836,17 +1850,17 @@ function initPolynomialRegressionCanvas() {
             draw();
         });
     }
-    
+
     draw();
 }
 
 function initPCACanvas() {
     const canvas = document.getElementById('canvas-77');
     if (!canvas) return;
-    
+
     const ctx = canvas.getContext('2d');
     let showPCs = false;
-    
+
     // Generate 2D data
     const data = [];
     for (let i = 0; i < 50; i++) {
@@ -1854,100 +1868,100 @@ function initPCACanvas() {
         const y = 0.8 * x + Math.random() * 0.5;
         data.push({ x, y });
     }
-    
+
     function draw() {
         clearCanvas(ctx, canvas);
-        
+
         const centerX = canvas.width / 2;
         const centerY = canvas.height / 2;
         const scale = 80;
-        
+
         // Draw axes
         drawLine(ctx, 0, centerY, canvas.width, centerY, '#555', 1);
         drawLine(ctx, centerX, 0, centerX, canvas.height, '#555', 1);
-        
+
         // Draw data points
         data.forEach(point => {
             const px = centerX + point.x * scale;
             const py = centerY - point.y * scale;
             drawCircle(ctx, px, py, 5, COLORS.cyan);
         });
-        
+
         if (showPCs) {
             // Draw PC1 (main direction)
             const pc1Angle = Math.atan(0.8);
             const pc1Length = 150;
-            drawLine(ctx, 
-                centerX - pc1Length * Math.cos(pc1Angle), 
+            drawLine(ctx,
+                centerX - pc1Length * Math.cos(pc1Angle),
                 centerY + pc1Length * Math.sin(pc1Angle),
-                centerX + pc1Length * Math.cos(pc1Angle), 
+                centerX + pc1Length * Math.cos(pc1Angle),
                 centerY - pc1Length * Math.sin(pc1Angle),
                 COLORS.orange, 3
             );
             drawText(ctx, 'PC1 (80% variance)', centerX + 100, centerY - 80, 14, COLORS.orange);
-            
+
             // Draw PC2 (perpendicular)
             const pc2Angle = pc1Angle + Math.PI / 2;
             const pc2Length = 80;
-            drawLine(ctx, 
-                centerX - pc2Length * Math.cos(pc2Angle), 
+            drawLine(ctx,
+                centerX - pc2Length * Math.cos(pc2Angle),
                 centerY + pc2Length * Math.sin(pc2Angle),
-                centerX + pc2Length * Math.cos(pc2Angle), 
+                centerX + pc2Length * Math.cos(pc2Angle),
                 centerY - pc2Length * Math.sin(pc2Angle),
                 COLORS.green, 3
             );
             drawText(ctx, 'PC2 (20% variance)', centerX - 100, centerY - 80, 14, COLORS.green);
         }
-        
+
         drawText(ctx, 'PCA finds directions of maximum variance', canvas.width / 2, 30, 14, COLORS.cyan);
     }
-    
+
     const projectBtn = document.getElementById('btn77project');
     const resetBtn = document.getElementById('btn77reset');
-    
+
     if (projectBtn) {
         projectBtn.addEventListener('click', () => {
             showPCs = true;
             draw();
         });
     }
-    
+
     if (resetBtn) {
         resetBtn.addEventListener('click', () => {
             showPCs = false;
             draw();
         });
     }
-    
+
     draw();
 }
 
 function initGradientDescentCanvas() {
     const canvas = document.getElementById('canvas-80');
     if (!canvas) return;
-    
+
     const ctx = canvas.getContext('2d');
     let learningRate = 0.1;
     let animating = false;
     let path = [];
-    
+
     // Simple quadratic function
     const f = (x) => (x - 3) * (x - 3) + 2;
     const df = (x) => 2 * (x - 3);
-    
+
     function draw() {
         clearCanvas(ctx, canvas);
-        
+
         const padding = 60;
         const width = canvas.width - 2 * padding;
         const height = canvas.height - 2 * padding;
         const xMin = 0, xMax = 6;
         const yMax = 12;
-        
+
         // Draw axes
         drawLine(ctx, padding, canvas.height - padding, canvas.width - padding, canvas.height - padding, COLORS.text, 2);
         drawLine(ctx, padding, padding, padding, canvas.height - padding, COLORS.text, 2);
-        
+
         // Draw function
         ctx.beginPath();
         for (let x = xMin; x <= xMax; x += 0.05) {
@@ -1963,14 +1977,14 @@ function initGradientDescentCanvas() {
         ctx.strokeStyle = COLORS.cyan;
         ctx.lineWidth = 2;
         ctx.stroke();
-        
+
         // Draw path
         if (path.length > 0) {
             ctx.beginPath();
             path.forEach((point, i) => {
                 const px = padding + ((point.x - xMin) / (xMax - xMin)) * width;
                 const py = canvas.height - padding - (point.y / yMax) * height;
-                
+
                 if (i === 0) {
                     ctx.moveTo(px, py);
                 } else {
@@ -1982,48 +1996,48 @@ function initGradientDescentCanvas() {
             ctx.lineWidth = 2;
             ctx.stroke();
         }
-        
+
         drawText(ctx, 'Gradient Descent: Following negative gradient to minimum', canvas.width / 2, 30, 14, COLORS.cyan);
         drawText(ctx, `Learning Rate: ${learningRate.toFixed(2)}`, canvas.width / 2, 50, 12, COLORS.text);
     }
-    
+
     function startDescent() {
         if (animating) return;
         animating = true;
         path = [{ x: 0.5, y: f(0.5) }];
-        
+
         const interval = setInterval(() => {
             const current = path[path.length - 1];
             const grad = df(current.x);
             const nextX = current.x - learningRate * grad;
-            
+
             if (Math.abs(grad) < 0.01 || path.length > 50) {
                 clearInterval(interval);
                 animating = false;
                 return;
             }
-            
+
             path.push({ x: nextX, y: f(nextX) });
             draw();
         }, 200);
     }
-    
+
     const slider = document.getElementById('slider80');
     const label = document.getElementById('label80');
     const startBtn = document.getElementById('btn80start');
     const resetBtn = document.getElementById('btn80reset');
-    
+
     if (slider) {
         slider.addEventListener('input', (e) => {
             learningRate = parseFloat(e.target.value);
             if (label) label.textContent = learningRate.toFixed(2);
         });
     }
-    
+
     if (startBtn) {
         startBtn.addEventListener('click', startDescent);
     }
-    
+
     if (resetBtn) {
         resetBtn.addEventListener('click', () => {
             path = [];
@@ -2031,31 +2045,31 @@ function initGradientDescentCanvas() {
             draw();
         });
     }
-    
+
     draw();
 }
 
 function initLossLandscapeCanvas() {
     const canvas = document.getElementById('canvas-85');
     if (!canvas) return;
-    
+
     const ctx = canvas.getContext('2d');
     let lossType = 'mse';
-    
+
     function draw() {
         clearCanvas(ctx, canvas);
-        
+
         const padding = 60;
         const width = canvas.width - 2 * padding;
         const height = canvas.height - 2 * padding;
-        
+
         // True value
         const trueVal = 5;
-        
+
         // Draw axes
         drawLine(ctx, padding, canvas.height - padding, canvas.width - padding, canvas.height - padding, COLORS.text, 2);
         drawLine(ctx, padding, padding, padding, canvas.height - padding, COLORS.text, 2);
-        
+
         // Draw loss function
         ctx.beginPath();
         for (let pred = 0; pred <= 10; pred += 0.1) {
@@ -2068,10 +2082,10 @@ function initLossLandscapeCanvas() {
                 // Simplified cross-entropy
                 loss = -Math.log(Math.max(0.01, 1 - Math.abs(trueVal - pred) / 10));
             }
-            
+
             const px = padding + (pred / 10) * width;
             const py = canvas.height - padding - (loss / 30) * height;
-            
+
             if (pred === 0) {
                 ctx.moveTo(px, py);
             } else {
@@ -2081,23 +2095,23 @@ function initLossLandscapeCanvas() {
         ctx.strokeStyle = COLORS.cyan;
         ctx.lineWidth = 3;
         ctx.stroke();
-        
+
         // Draw minimum
         const minX = padding + (trueVal / 10) * width;
         drawLine(ctx, minX, canvas.height - padding, minX, padding, COLORS.orange, 2);
         drawText(ctx, 'Minimum', minX + 10, padding + 20, 12, COLORS.orange);
-        
+
         const lossNames = {
             'mse': 'Mean Squared Error: (y - ŷ)²',
             'mae': 'Mean Absolute Error: |y - ŷ|',
             'cross': 'Cross-Entropy Loss'
         };
-        
+
         drawText(ctx, lossNames[lossType], canvas.width / 2, 30, 14, COLORS.cyan);
         drawText(ctx, 'Predicted Value →', canvas.width - 100, canvas.height - 30, 12, COLORS.text);
         drawText(ctx, 'Loss ↑', padding - 40, padding, 12, COLORS.text);
     }
-    
+
     const select = document.getElementById('select85');
     if (select) {
         select.addEventListener('change', (e) => {
@@ -2105,10 +2119,316 @@ function initLossLandscapeCanvas() {
             draw();
         });
     }
-    
+
     draw();
 }
 
+// ========== SEARCH FUNCTIONALITY ==========
+function initSearch() {
+    const searchInput = document.getElementById('globalSearch');
+    const searchResults = document.getElementById('searchResults');
+
+    if (!searchInput || !searchResults) return;
+
+    // Build search index from all topics
+    const searchIndex = [];
+    document.querySelectorAll('.topic-section').forEach(section => {
+        const id = section.id;
+        const header = section.querySelector('h2');
+        const subtitle = section.querySelector('.topic-subtitle');
+        const content = section.textContent.substring(0, 500);
+        const subject = section.dataset.subject || 'statistics';
+
+        if (header) {
+            searchIndex.push({
+                id: id,
+                title: header.textContent,
+                subtitle: subtitle ? subtitle.textContent : '',
+                content: content,
+                subject: subject
+            });
+        }
+    });
+
+    searchInput.addEventListener('input', (e) => {
+        const query = e.target.value.toLowerCase().trim();
+
+        if (query.length < 2) {
+            searchResults.classList.remove('active');
+            return;
+        }
+
+        const results = searchIndex.filter(item =>
+            item.title.toLowerCase().includes(query) ||
+            item.subtitle.toLowerCase().includes(query) ||
+            item.content.toLowerCase().includes(query)
+        ).slice(0, 8);
+
+        if (results.length === 0) {
+            searchResults.innerHTML = '<div class="no-results">No topics found for "' + query + '"</div>';
+        } else {
+            searchResults.innerHTML = results.map(result => `
+                <div class="search-result-item" data-topic-id="${result.id}" data-subject="${result.subject}">
+                    <div class="search-result-title">${highlightMatch(result.title, query)}</div>
+                    <div class="search-result-subject">${result.subject.replace('-', ' ')}</div>
+                </div>
+            `).join('');
+        }
+
+        searchResults.classList.add('active');
+    });
+
+    // Handle result clicks
+    searchResults.addEventListener('click', (e) => {
+        const item = e.target.closest('.search-result-item');
+        if (item) {
+            const topicId = item.dataset.topicId;
+            const subject = item.dataset.subject;
+
+            // Switch to correct subject first
+            switchSubject(subject);
+
+            // Then scroll to topic
+            setTimeout(() => {
+                const target = document.getElementById(topicId);
+                if (target) {
+                    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                }
+            }, 200);
+
+            searchResults.classList.remove('active');
+            searchInput.value = '';
+        }
+    });
+
+    // Close on outside click
+    document.addEventListener('click', (e) => {
+        if (!searchInput.contains(e.target) && !searchResults.contains(e.target)) {
+            searchResults.classList.remove('active');
+        }
+    });
+
+    // Close on Escape
+    searchInput.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') {
+            searchResults.classList.remove('active');
+            searchInput.blur();
+        }
+    });
+}
+
+function highlightMatch(text, query) {
+    const regex = new RegExp(`(${query})`, 'gi');
+    return text.replace(regex, '<span class="search-highlight">$1</span>');
+}
+
+// ========== PROGRESS TRACKING ==========
+const STORAGE_KEY = 'math_mastery_progress';
+
+function initProgressTracking() {
+    loadProgress();
+    addCompletionButtons();
+    updateProgressDisplay();
+}
+
+function loadProgress() {
+    try {
+        const saved = localStorage.getItem(STORAGE_KEY);
+        if (saved) {
+            const completed = JSON.parse(saved);
+            completed.forEach(topicId => {
+                markTopicComplete(topicId, false);
+            });
+        }
+    } catch (e) {
+        console.warn('Could not load progress:', e);
+    }
+}
+
+function saveProgress() {
+    try {
+        const completed = [];
+        document.querySelectorAll('.topic-complete-btn.completed').forEach(btn => {
+            completed.push(btn.dataset.topicId);
+        });
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(completed));
+    } catch (e) {
+        console.warn('Could not save progress:', e);
+    }
+}
+
+function addCompletionButtons() {
+    document.querySelectorAll('.topic-section').forEach(section => {
+        const topicId = section.id;
+        const summaryCard = section.querySelector('.summary-card');
+
+        if (summaryCard && !section.querySelector('.topic-complete-btn')) {
+            const btn = document.createElement('button');
+            btn.className = 'topic-complete-btn';
+            btn.dataset.topicId = topicId;
+            btn.innerHTML = '<span class="check-icon"></span> Mark as Complete';
+
+            btn.addEventListener('click', () => {
+                toggleTopicComplete(topicId);
+            });
+
+            summaryCard.appendChild(btn);
+        }
+    });
+}
+
+function toggleTopicComplete(topicId) {
+    const btn = document.querySelector(`.topic-complete-btn[data-topic-id="${topicId}"]`);
+    if (btn) {
+        const isCompleted = btn.classList.toggle('completed');
+        btn.innerHTML = isCompleted
+            ? '<span class="check-icon"></span> Completed!'
+            : '<span class="check-icon"></span> Mark as Complete';
+
+        // Update sidebar link
+        const sidebarLink = document.querySelector(`[data-topic="${topicId}"], [data-topic="${topicId.replace('topic-', '')}"]`);
+        if (sidebarLink) {
+            sidebarLink.classList.toggle('completed', isCompleted);
+        }
+
+        saveProgress();
+        updateProgressDisplay();
+    }
+}
+
+function markTopicComplete(topicId, save = true) {
+    const btn = document.querySelector(`.topic-complete-btn[data-topic-id="${topicId}"]`);
+    if (btn && !btn.classList.contains('completed')) {
+        btn.classList.add('completed');
+        btn.innerHTML = '<span class="check-icon"></span> Completed!';
+
+        const sidebarLink = document.querySelector(`[data-topic="${topicId}"], [data-topic="${topicId.replace('topic-', '')}"]`);
+        if (sidebarLink) {
+            sidebarLink.classList.add('completed');
+        }
+
+        if (save) {
+            saveProgress();
+            updateProgressDisplay();
+        }
+    }
+}
+
+function updateProgressDisplay() {
+    // Progress bar removed - keeping function for compatibility
+    // Can be used for console logging if needed
+}
+
+// ========== ROBUST CANVAS INITIALIZATION ==========
+function ensureCanvasVisible(canvasId, callback) {
+    const canvas = document.getElementById(canvasId);
+    if (!canvas) return;
+
+    // Already initialized
+    if (canvas.dataset.initialized === 'true') return;
+
+    // Check visibility
+    if (canvas.offsetWidth === 0) {
+        setTimeout(() => ensureCanvasVisible(canvasId, callback), 100);
+        return;
+    }
+
+    // Mark and execute
+    canvas.dataset.initialized = 'true';
+    callback();
+}
+
+// ========== LAZY LOADING FOR VISUALIZATIONS ==========
+function initLazyLoading() {
+    const observerOptions = {
+        root: null,
+        rootMargin: '100px',
+        threshold: 0.1
+    };
+
+    const lazyObserver = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                const section = entry.target;
+                const canvases = section.querySelectorAll('canvas:not([data-initialized="true"])');
+
+                canvases.forEach(canvas => {
+                    const initFn = canvas.dataset.initFn;
+                    if (initFn && window[initFn]) {
+                        ensureCanvasVisible(canvas.id, window[initFn]);
+                    }
+                });
+
+                lazyObserver.unobserve(section);
+            }
+        });
+    }, observerOptions);
+
+    document.querySelectorAll('.topic-section').forEach(section => {
+        lazyObserver.observe(section);
+    });
+}
+
+// ========== INTERACTIVE ELEMENTS ==========
+function initInteractiveElements() {
+    // Toggle visibility for practice answers
+    document.querySelectorAll('.show-answers-btn').forEach(btn => {
+        btn.addEventListener('click', () => {
+            const answers = btn.nextElementSibling;
+            if (answers && answers.classList.contains('practice-answers')) {
+                const isHidden = answers.style.display === 'none' || !answers.style.display;
+                answers.style.display = isHidden ? 'block' : 'none';
+                btn.textContent = isHidden ? 'Hide Answers' : 'Show Answers';
+            }
+        });
+    });
+
+    // Initialize formula tooltips
+    document.querySelectorAll('.formula-var').forEach(el => {
+        el.style.cursor = 'help';
+    });
+}
+
+// ========== KEYBOARD SHORTCUTS ==========
+function initKeyboardShortcuts() {
+    document.addEventListener('keydown', (e) => {
+        // Ctrl/Cmd + K for search
+        if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+            e.preventDefault();
+            const searchInput = document.getElementById('globalSearch');
+            if (searchInput) {
+                searchInput.focus();
+            }
+        }
+
+        // Arrow keys for topic navigation
+        if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
+            e.preventDefault();
+            navigateTopics(e.key === 'ArrowDown' ? 1 : -1);
+        }
+    });
+}
+
+function navigateTopics(direction) {
+    const visibleTopics = Array.from(document.querySelectorAll('.topic-section'))
+        .filter(t => t.style.display !== 'none');
+
+    const currentActive = document.querySelector('.topic-link.active');
+    let currentIndex = 0;
+
+    if (currentActive) {
+        const currentId = currentActive.getAttribute('data-topic');
+        currentIndex = visibleTopics.findIndex(t =>
+            t.id === currentId || t.id === `topic-${currentId}`
+        );
+    }
+
+    const newIndex = Math.max(0, Math.min(visibleTopics.length - 1, currentIndex + direction));
+    if (visibleTopics[newIndex]) {
+        visibleTopics[newIndex].scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+}
+
 console.log('%c📊 Ultimate Learning Platform Loaded', 'color: #64ffda; font-size: 16px; font-weight: bold;');
 console.log('%cReady to explore 125+ comprehensive topics across 5 subjects!', 'color: #4a90e2; font-size: 14px;');
 console.log('%c✓ Statistics (41) ✓ Linear Algebra (16) ✓ Calculus (12) ✓ Data Science (16) ✓ Machine Learning (40+)', 'color: #51cf66; font-size: 12px;');

math-ds-complete/style.css

@@ -1,167 +1,251 @@
 :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;
+    /* 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) */
+    :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;
 
-    /* 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 */
+    /* 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);
@@ -181,11 +265,10 @@
     --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: 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);
-    --button-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
+        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);
 
@@ -202,121 +285,62 @@
     --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);
+    /* 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;
+    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;
+    margin: 0;
+    padding: 0;
 }
 
 *,
 *::before,
 *::after {
-  box-sizing: inherit;
+    box-sizing: inherit;
 }
 
 /* Typography */
@@ -326,415 +350,426 @@ 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);
+    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);
+    font-size: var(--font-size-4xl);
 }
+
 h2 {
-  font-size: var(--font-size-3xl);
+    font-size: var(--font-size-3xl);
 }
+
 h3 {
-  font-size: var(--font-size-2xl);
+    font-size: var(--font-size-2xl);
 }
+
 h4 {
-  font-size: var(--font-size-xl);
+    font-size: var(--font-size-xl);
 }
+
 h5 {
-  font-size: var(--font-size-lg);
+    font-size: var(--font-size-lg);
 }
+
 h6 {
-  font-size: var(--font-size-md);
+    font-size: var(--font-size-md);
 }
 
 p {
-  margin: 0 0 var(--space-16) 0;
+    margin: 0 0 var(--space-16) 0;
 }
 
 a {
-  color: var(--color-primary);
-  text-decoration: none;
-  transition: color var(--duration-fast) var(--ease-standard);
+    color: var(--color-primary);
+    text-decoration: none;
+    transition: color var(--duration-fast) var(--ease-standard);
 }
 
 a:hover {
-  color: var(--color-primary-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);
+    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);
+    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);
+    padding: var(--space-16);
+    margin: var(--space-16) 0;
+    overflow: auto;
+    border: 1px solid var(--color-border);
 }
 
 pre code {
-  background: none;
-  padding: 0;
+    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;
+    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);
+    outline: none;
+    box-shadow: var(--focus-ring);
 }
 
 .btn--primary {
-  background: var(--color-primary);
-  color: var(--color-btn-primary-text);
+    background: var(--color-primary);
+    color: var(--color-btn-primary-text);
 }
 
 .btn--primary:hover {
-  background: var(--color-primary-hover);
+    background: var(--color-primary-hover);
 }
 
 .btn--primary:active {
-  background: var(--color-primary-active);
+    background: var(--color-primary-active);
 }
 
 .btn--secondary {
-  background: var(--color-secondary);
-  color: var(--color-text);
+    background: var(--color-secondary);
+    color: var(--color-text);
 }
 
 .btn--secondary:hover {
-  background: var(--color-secondary-hover);
+    background: var(--color-secondary-hover);
 }
 
 .btn--secondary:active {
-  background: var(--color-secondary-active);
+    background: var(--color-secondary-active);
 }
 
 .btn--outline {
-  background: transparent;
-  border: 1px solid var(--color-border);
-  color: var(--color-text);
+    background: transparent;
+    border: 1px solid var(--color-border);
+    color: var(--color-text);
 }
 
 .btn--outline:hover {
-  background: var(--color-secondary);
+    background: var(--color-secondary);
 }
 
 .btn--sm {
-  padding: var(--space-4) var(--space-12);
-  font-size: var(--font-size-sm);
-  border-radius: var(--radius-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);
+    padding: var(--space-10) var(--space-20);
+    font-size: var(--font-size-lg);
+    border-radius: var(--radius-md);
 }
 
 .btn--full-width {
-  width: 100%;
+    width: 100%;
 }
 
 .btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+    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);
+    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);
+    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);
+    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);
-  }
+    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);
+    background-image: var(--select-caret-dark);
 }
 
 [data-color-scheme="light"] select.form-control {
-  background-image: var(--select-caret-light);
+    background-image: var(--select-caret-light);
 }
 
 .form-control:focus {
-  border-color: var(--color-primary);
-  outline: var(--focus-outline);
+    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);
+    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);
+    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);
+    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);
+    box-shadow: var(--shadow-md);
 }
 
 .card__body {
-  padding: var(--space-16);
+    padding: var(--space-16);
 }
 
 .card__header,
 .card__footer {
-  padding: var(--space-16);
-  border-bottom: 1px solid var(--color-card-border-inner);
+    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);
+    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));
+    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));
+    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));
+    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));
+    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);
+    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);
-  }
+    .container {
+        max-width: var(--container-sm);
+    }
 }
+
 @media (min-width: 768px) {
-  .container {
-    max-width: var(--container-md);
-  }
+    .container {
+        max-width: var(--container-md);
+    }
 }
+
 @media (min-width: 1024px) {
-  .container {
-    max-width: var(--container-lg);
-  }
+    .container {
+        max-width: var(--container-lg);
+    }
 }
+
 @media (min-width: 1280px) {
-  .container {
-    max-width: var(--container-xl);
-  }
+    .container {
+        max-width: var(--container-xl);
+    }
 }
 
 /* Utility classes */
 .flex {
-  display: flex;
+    display: flex;
 }
+
 .flex-col {
-  flex-direction: column;
+    flex-direction: column;
 }
+
 .items-center {
-  align-items: center;
+    align-items: center;
 }
+
 .justify-center {
-  justify-content: center;
+    justify-content: center;
 }
+
 .justify-between {
-  justify-content: space-between;
+    justify-content: space-between;
 }
+
 .gap-4 {
-  gap: var(--space-4);
+    gap: var(--space-4);
 }
+
 .gap-8 {
-  gap: var(--space-8);
+    gap: var(--space-8);
 }
+
 .gap-16 {
-  gap: var(--space-16);
+    gap: var(--space-16);
 }
 
 .m-0 {
-  margin: 0;
+    margin: 0;
 }
+
 .mt-8 {
-  margin-top: var(--space-8);
+    margin-top: var(--space-8);
 }
+
 .mb-8 {
-  margin-bottom: var(--space-8);
+    margin-bottom: var(--space-8);
 }
+
 .mx-8 {
-  margin-left: var(--space-8);
-  margin-right: var(--space-8);
+    margin-left: var(--space-8);
+    margin-right: var(--space-8);
 }
+
 .my-8 {
-  margin-top: var(--space-8);
-  margin-bottom: var(--space-8);
+    margin-top: var(--space-8);
+    margin-bottom: var(--space-8);
 }
 
 .p-0 {
-  padding: 0;
+    padding: 0;
 }
+
 .py-8 {
-  padding-top: var(--space-8);
-  padding-bottom: var(--space-8);
+    padding-top: var(--space-8);
+    padding-bottom: var(--space-8);
 }
+
 .px-8 {
-  padding-left: var(--space-8);
-  padding-right: var(--space-8);
+    padding-left: var(--space-8);
+    padding-right: var(--space-8);
 }
+
 .py-16 {
-  padding-top: var(--space-16);
-  padding-bottom: var(--space-16);
+    padding-top: var(--space-16);
+    padding-bottom: var(--space-16);
 }
+
 .px-16 {
-  padding-left: var(--space-16);
-  padding-right: var(--space-16);
+    padding-left: var(--space-16);
+    padding-right: var(--space-16);
 }
 
 .block {
-  display: block;
+    display: block;
 }
+
 .hidden {
-  display: none;
+    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;
+    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;
+    outline: var(--focus-outline);
+    outline-offset: 2px;
 }
 
 /* Dark mode specifics */
 [data-color-scheme="dark"] .btn--outline {
-  border: 1px solid var(--color-border-secondary);
+    border: 1px solid var(--color-border-secondary);
 }
 
 @font-face {
-  font-family: 'FKGroteskNeue';
-  src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2')
-    format('woff2');
+    font-family: 'FKGroteskNeue';
+    src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2') format('woff2');
 }
 
 /* END PERPLEXITY DESIGN SYSTEM */
@@ -1335,6 +1370,7 @@ body {
     background: #0f3460;
     outline: none;
     -webkit-appearance: none;
+    appearance: none;
 }
 
 .slider::-webkit-slider-thumb {
@@ -1653,11 +1689,12 @@ body {
         flex-wrap: wrap;
         gap: 0.5rem;
     }
-    
+
     .subject-tab {
         font-size: 0.8rem;
         padding: 0.5rem 1rem;
     }
+
     .main-container {
         flex-direction: column;
     }
@@ -1728,11 +1765,11 @@ body {
     padding: 30px;
     margin: 40px 0;
     border-left: 5px solid #64ffda;
-    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
 }
 
 .example-problem {
-    background: rgba(255,255,255,0.08);
+    background: rgba(255, 255, 255, 0.08);
     padding: 25px;
     border-radius: 10px;
     margin-bottom: 30px;
@@ -1751,14 +1788,14 @@ body {
     gap: 20px;
     margin: 25px 0;
     padding: 25px;
-    background: rgba(0,0,0,0.3);
+    background: rgba(0, 0, 0, 0.3);
     border-radius: 10px;
     border-left: 4px solid #4a90e2;
     transition: all 0.3s ease;
 }
 
 .solution-step:hover {
-    background: rgba(0,0,0,0.4);
+    background: rgba(0, 0, 0, 0.4);
     border-left-width: 6px;
     transform: translateX(5px);
 }
@@ -1783,7 +1820,7 @@ body {
 }
 
 .step-work {
-    background: rgba(0,0,0,0.4);
+    background: rgba(0, 0, 0, 0.4);
     padding: 18px;
     border-radius: 8px;
     margin: 12px 0;
@@ -1811,7 +1848,7 @@ body {
     width: 100%;
     border-collapse: collapse;
     margin: 15px 0;
-    background: rgba(0,0,0,0.2);
+    background: rgba(0, 0, 0, 0.2);
     border-radius: 8px;
     overflow: hidden;
 }
@@ -1819,7 +1856,7 @@ body {
 .calculation-table th,
 .calculation-table td {
     padding: 12px;
-    border: 1px solid rgba(255,255,255,0.1);
+    border: 1px solid rgba(255, 255, 255, 0.1);
     text-align: center;
 }
 
@@ -1840,7 +1877,7 @@ body {
     margin-top: 30px;
     text-align: center;
     font-size: 18px;
-    box-shadow: 0 4px 12px rgba(81,207,102,0.3);
+    box-shadow: 0 4px 12px rgba(81, 207, 102, 0.3);
 }
 
 .answer-highlight {
@@ -1849,7 +1886,7 @@ body {
     color: white;
     display: block;
     margin-top: 12px;
-    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
 }
 
 .verification {
@@ -1914,7 +1951,7 @@ body {
 }
 
 .practice-answers {
-    background: rgba(0,0,0,0.3);
+    background: rgba(0, 0, 0, 0.3);
     padding: 20px;
     border-radius: 8px;
     margin-top: 15px;
@@ -1932,9 +1969,12 @@ body {
 
 /* Animations */
 @keyframes pulse {
-    0%, 100% {
+
+    0%,
+    100% {
         opacity: 1;
     }
+
     50% {
         opacity: 0.5;
     }
@@ -1964,4 +2004,362 @@ body {
 /* Smooth Transitions */
 * {
     transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+}
+
+/* ========== SEARCH FUNCTIONALITY ========== */
+.search-container {
+    position: relative;
+    margin: 0 1.5rem;
+    flex-shrink: 0;
+}
+
+.search-input {
+    width: 280px;
+    padding: 0.7rem 1rem 0.7rem 1rem;
+    background: rgba(255, 255, 255, 0.08);
+    border: 1px solid rgba(100, 255, 218, 0.2);
+    border-radius: 10px;
+    color: #e1e1e1;
+    font-size: 0.9rem;
+    outline: none;
+    transition: all 0.3s ease;
+    backdrop-filter: blur(10px);
+}
+
+.search-input::placeholder {
+    color: rgba(255, 255, 255, 0.5);
+}
+
+.search-input:focus {
+    background: rgba(255, 255, 255, 0.12);
+    border-color: rgba(100, 255, 218, 0.5);
+    box-shadow: 0 0 20px rgba(100, 255, 218, 0.15);
+    width: 320px;
+}
+
+.search-results {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background: rgba(26, 26, 46, 0.98);
+    border: 1px solid rgba(100, 255, 218, 0.2);
+    border-radius: 10px;
+    margin-top: 0.5rem;
+    max-height: 400px;
+    overflow-y: auto;
+    z-index: 1000;
+    display: none;
+    backdrop-filter: blur(20px);
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+}
+
+.search-results.active {
+    display: block;
+    animation: slideDown 0.2s ease;
+}
+
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.search-result-item {
+    padding: 0.8rem 1rem;
+    cursor: pointer;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    transition: all 0.2s ease;
+}
+
+.search-result-item:hover {
+    background: rgba(100, 255, 218, 0.1);
+}
+
+.search-result-item:last-child {
+    border-bottom: none;
+}
+
+.search-result-title {
+    color: #64ffda;
+    font-weight: 600;
+    font-size: 0.95rem;
+    margin-bottom: 0.2rem;
+}
+
+.search-result-subject {
+    color: rgba(255, 255, 255, 0.5);
+    font-size: 0.8rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.search-highlight {
+    background: rgba(100, 255, 218, 0.3);
+    border-radius: 2px;
+    padding: 0 2px;
+}
+
+.no-results {
+    padding: 1.5rem;
+    text-align: center;
+    color: rgba(255, 255, 255, 0.5);
+}
+
+/* Topic completion checkbox */
+.topic-complete-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    background: rgba(100, 255, 218, 0.1);
+    border: 1px solid rgba(100, 255, 218, 0.3);
+    border-radius: 8px;
+    color: #64ffda;
+    font-size: 0.85rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    margin-top: 1rem;
+}
+
+.topic-complete-btn:hover {
+    background: rgba(100, 255, 218, 0.2);
+    transform: translateY(-2px);
+}
+
+.topic-complete-btn.completed {
+    background: rgba(81, 207, 102, 0.2);
+    border-color: #51cf66;
+    color: #51cf66;
+}
+
+.topic-complete-btn .check-icon {
+    width: 18px;
+    height: 18px;
+    border: 2px solid currentColor;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+}
+
+.topic-complete-btn.completed .check-icon::after {
+    content: '✓';
+}
+
+/* Sidebar topic completed state */
+.topic-link.completed {
+    color: #51cf66 !important;
+    position: relative;
+}
+
+.topic-link.completed::before {
+    content: '✓ ';
+    font-weight: bold;
+}
+
+/* ========== MICRO-ANIMATIONS ========== */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes shimmer {
+    0% {
+        background-position: -200% 0;
+    }
+
+    100% {
+        background-position: 200% 0;
+    }
+}
+
+@keyframes glow {
+
+    0%,
+    100% {
+        box-shadow: 0 0 5px rgba(100, 255, 218, 0.3);
+    }
+
+    50% {
+        box-shadow: 0 0 20px rgba(100, 255, 218, 0.6);
+    }
+}
+
+.topic-section {
+    animation: fadeInUp 0.5s ease forwards;
+}
+
+.content-card {
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.content-card:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+}
+
+.callout-box {
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.callout-box:hover {
+    transform: translateX(5px);
+}
+
+/* Button hover effects */
+.btn-primary,
+.btn-secondary,
+.subject-tab {
+    position: relative;
+    overflow: hidden;
+}
+
+.btn-primary::after,
+.btn-secondary::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    transition: width 0.6s ease, height 0.6s ease;
+}
+
+.btn-primary:hover::after,
+.btn-secondary:hover::after {
+    width: 300px;
+    height: 300px;
+}
+
+/* ========== GLASSMORPHISM EFFECTS ========== */
+.formula-card {
+    background: rgba(255, 255, 255, 0.03) !important;
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(100, 255, 218, 0.1) !important;
+}
+
+.summary-card {
+    background: linear-gradient(135deg, rgba(100, 255, 218, 0.05), rgba(74, 144, 226, 0.05)) !important;
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(100, 255, 218, 0.2) !important;
+}
+
+/* ========== IMPROVED TYPOGRAPHY ========== */
+body {
+    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
+}
+
+.formula-card,
+code,
+pre,
+.formula-main {
+    font-family: 'JetBrains Mono', 'Consolas', monospace !important;
+}
+
+/* MathJax styling */
+.MathJax {
+    font-size: 1.1em !important;
+}
+
+mjx-container[jax="CHTML"] {
+    margin: 0.5em 0 !important;
+}
+
+/* ========== INTERACTIVE ELEMENT IMPROVEMENTS ========== */
+canvas {
+    border-radius: 12px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+    transition: box-shadow 0.3s ease;
+}
+
+canvas:hover {
+    box-shadow: 0 8px 30px rgba(100, 255, 218, 0.2);
+}
+
+.controls {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+    align-items: center;
+    padding: 1rem;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+    margin-top: 1rem;
+}
+
+.slider-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
+}
+
+.slider-group label {
+    font-size: 0.85rem;
+    color: rgba(255, 255, 255, 0.7);
+}
+
+input[type="range"] {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 150px;
+    height: 6px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 3px;
+    outline: none;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 16px;
+    height: 16px;
+    background: linear-gradient(135deg, #4a90e2, #64ffda);
+    border-radius: 50%;
+    cursor: pointer;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+    transition: transform 0.2s ease;
+}
+
+input[type="range"]::-webkit-slider-thumb:hover {
+    transform: scale(1.2);
+}
+
+/* ========== RESPONSIVE ADJUSTMENTS ========== */
+@media (max-width: 1200px) {
+    .search-container {
+        order: 3;
+        margin: 0.5rem 0;
+        width: 100%;
+    }
+
+    .search-input {
+        width: 100%;
+    }
+
+    .search-input:focus {
+        width: 100%;
+    }
+}
+
+@media (max-width: 768px) {
+    .search-container {
+        display: none;
+    }
 }