diff --git a/.gitignore b/.gitignore
index b1f929871998..637b6e4e013a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,27 +1,18 @@
+```
 # Compiled and build artifacts
 *.pyc
 __pycache__/
 *.o
 *.obj
-*.class
-*.exe
-*.dll
-*.so
-*.a
-*.out
 dist/
 build/
-target/
+*.out
 
 # Dependencies
 .venv/
 venv/
 node_modules/
-.mypy_cache/
-.pytest_cache/
-.coverage
-coverage/
-htmlcov/
+target/
 .gradle/
 
 # Logs and temp files
@@ -33,7 +24,7 @@ htmlcov/
 # Environment
 .env
 .env.local
-.env.*
+*.env.*
 
 # Editors
 .vscode/
@@ -45,6 +36,11 @@ htmlcov/
 .DS_Store
 Thumbs.db
 
+# Coverage
+coverage/
+htmlcov/
+.coverage
+
 # Compressed files
 *.zip
 *.gz
@@ -67,4 +63,5 @@ Thumbs.db
 *.tar.gz
 *.tar.bz2
 *.tar.xz
-*.tar.zst
\ No newline at end of file
+*.tar.zst
+```
\ No newline at end of file
diff --git a/biostats_immersive.html b/biostats_immersive.html
new file mode 100644
index 000000000000..40495fa6bf24
--- /dev/null
+++ b/biostats_immersive.html
@@ -0,0 +1,813 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Biostats Neural Cortex | Immersive Learning System</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML"></script>
+    <style>
+        :root {
+            --neon-blue: #00f3ff;
+            --neon-purple: #bc13fe;
+            --neon-green: #0aff0a;
+            --neon-red: #ff003c;
+            --bg-dark: #050510;
+            --glass: rgba(255, 255, 255, 0.05);
+            --border: rgba(255, 255, 255, 0.1);
+        }
+
+        * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
+        
+        body {
+            background-color: var(--bg-dark);
+            color: white;
+            overflow: hidden;
+            height: 100vh;
+            width: 100vw;
+        }
+
+        /* UI Overlay */
+        #ui-layer {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: 10;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
+
+        .header {
+            padding: 20px;
+            background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, transparent 100%);
+            pointer-events: auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        h1 {
+            font-size: 1.5rem;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            text-shadow: 0 0 10px var(--neon-blue);
+        }
+
+        .nav-controls {
+            pointer-events: auto;
+            display: flex;
+            gap: 10px;
+            background: var(--glass);
+            backdrop-filter: blur(10px);
+            padding: 10px;
+            border-radius: 8px;
+            border: 1px solid var(--border);
+        }
+
+        button {
+            background: transparent;
+            border: 1px solid var(--neon-blue);
+            color: var(--neon-blue);
+            padding: 8px 16px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            text-transform: uppercase;
+            font-weight: bold;
+            font-size: 0.8rem;
+        }
+
+        button:hover, button.active {
+            background: var(--neon-blue);
+            color: black;
+            box-shadow: 0 0 15px var(--neon-blue);
+        }
+
+        button.mode-2 { border-color: var(--neon-purple); color: var(--neon-purple); }
+        button.mode-2:hover, button.mode-2.active { background: var(--neon-purple); color: white; box-shadow: 0 0 15px var(--neon-purple); }
+        
+        button.mode-3 { border-color: var(--neon-green); color: var(--neon-green); }
+        button.mode-3:hover, button.mode-3.active { background: var(--neon-green); color: black; box-shadow: 0 0 15px var(--neon-green); }
+
+        /* View Containers */
+        .view-container {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.5s ease;
+            z-index: 1;
+        }
+
+        .view-container.active {
+            opacity: 1;
+            pointer-events: auto;
+            z-index: 5;
+        }
+
+        /* STATE 00: 3D Knowledge Universe */
+        #view-3d { background: radial-gradient(circle at center, #1a1a2e 0%, #000000 100%); }
+        #canvas-3d { width: 100%; height: 100%; outline: none; }
+        #tooltip {
+            position: absolute;
+            background: rgba(0, 0, 0, 0.8);
+            border: 1px solid var(--neon-blue);
+            padding: 15px;
+            border-radius: 4px;
+            pointer-events: none;
+            display: none;
+            max-width: 300px;
+            backdrop-filter: blur(5px);
+            box-shadow: 0 0 20px rgba(0, 243, 255, 0.2);
+        }
+        #tooltip h3 { color: var(--neon-blue); margin-bottom: 5px; font-size: 1rem; }
+        #tooltip p { font-size: 0.9rem; line-height: 1.4; color: #ddd; }
+        #tooltip .formula { font-style: italic; color: var(--neon-green); margin-top: 5px; display: block; }
+
+        /* STATE 01: AR Glossary */
+        #view-glossary {
+            background: #0a0a12;
+            overflow-y: auto;
+            padding: 40px;
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+            gap: 30px;
+            perspective: 1000px;
+        }
+
+        .flashcard {
+            background: var(--glass);
+            border: 1px solid var(--border);
+            border-radius: 12px;
+            height: 400px;
+            position: relative;
+            transform-style: preserve-3d;
+            transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            cursor: pointer;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+        }
+
+        .flashcard.flipped {
+            transform: rotateY(180deg);
+        }
+
+        .card-face {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            backface-visibility: hidden;
+            padding: 25px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            border-radius: 12px;
+            background: rgba(20, 20, 35, 0.9);
+        }
+
+        .card-front {
+            border-bottom: 4px solid var(--neon-purple);
+        }
+
+        .card-back {
+            transform: rotateY(180deg);
+            border-top: 4px solid var(--neon-green);
+            text-align: left;
+            align-items: flex-start;
+            overflow-y: auto;
+        }
+
+        .term-title { font-size: 1.8rem; font-weight: bold; color: var(--neon-purple); margin-bottom: 10px; text-align: center; }
+        .term-latex { font-size: 1.2rem; color: white; margin-bottom: 20px; }
+        .badge { background: var(--neon-blue); color: black; padding: 4px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: bold; margin-bottom: 15px; }
+        
+        .detail-row { margin-bottom: 15px; width: 100%; }
+        .detail-label { color: var(--neon-green); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; display: block; margin-bottom: 5px; }
+        .detail-content { font-size: 0.95rem; line-height: 1.5; color: #eee; }
+        .exam-trap { color: var(--neon-red); font-weight: bold; border-left: 3px solid var(--neon-red); padding-left: 10px; }
+
+        /* STATE 02: Quantum Computation */
+        #view-compute {
+            background: #050805;
+            display: flex;
+            flex-direction: column;
+            padding: 20px;
+        }
+
+        .quantum-dashboard {
+            display: grid;
+            grid-template-columns: 300px 1fr;
+            gap: 20px;
+            height: 100%;
+        }
+
+        .control-panel {
+            background: var(--glass);
+            border: 1px solid var(--neon-green);
+            border-radius: 8px;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+
+        .visualization-area {
+            background: rgba(0, 20, 0, 0.3);
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            padding: 20px;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .slider-group { margin-bottom: 15px; }
+        .slider-group label { display: block; color: var(--neon-green); margin-bottom: 5px; font-size: 0.9rem; }
+        input[type=range] { width: 100%; accent-color: var(--neon-green); }
+        
+        .test-selector select {
+            width: 100%;
+            background: black;
+            color: var(--neon-green);
+            border: 1px solid var(--neon-green);
+            padding: 10px;
+            font-family: monospace;
+        }
+
+        .computation-log {
+            font-family: 'Courier New', monospace;
+            color: var(--neon-green);
+            font-size: 0.9rem;
+            margin-top: 20px;
+            border-top: 1px solid var(--border);
+            padding-top: 10px;
+            max-height: 200px;
+            overflow-y: auto;
+        }
+
+        .log-entry { margin-bottom: 5px; opacity: 0; animation: fadeIn 0.3s forwards; }
+        @keyframes fadeIn { to { opacity: 1; } }
+
+        .result-display {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            text-align: center;
+            background: rgba(0, 0, 0, 0.8);
+            padding: 40px;
+            border: 2px solid var(--neon-green);
+            border-radius: 10px;
+            box-shadow: 0 0 50px rgba(10, 255, 10, 0.2);
+            display: none;
+        }
+        
+        .result-value { font-size: 3rem; font-weight: bold; color: white; }
+        .result-label { color: var(--neon-green); text-transform: uppercase; letter-spacing: 2px; margin-top: 10px; }
+        .interpretation { margin-top: 20px; color: #aaa; font-style: italic; }
+
+        /* Loading Screen */
+        #loader {
+            position: fixed;
+            top: 0; left: 0; width: 100%; height: 100%;
+            background: black;
+            z-index: 100;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            transition: opacity 1s ease;
+        }
+        .loader-bar { width: 300px; height: 4px; background: #333; margin-top: 20px; position: relative; overflow: hidden; }
+        .loader-progress { width: 0%; height: 100%; background: var(--neon-blue); transition: width 0.2s; }
+        .loader-text { color: var(--neon-blue); font-family: monospace; letter-spacing: 2px; }
+
+    </style>
+</head>
+<body>
+
+    <!-- LOADING SCREEN -->
+    <div id="loader">
+        <div class="loader-text">INITIALIZING NEURAL CORTEX...</div>
+        <div class="loader-bar"><div class="loader-progress" id="progress"></div></div>
+        <div style="margin-top: 10px; color: #666; font-size: 0.8rem;" id="load-status">Loading Assets</div>
+    </div>
+
+    <!-- UI LAYER -->
+    <div id="ui-layer">
+        <div class="header">
+            <h1>BioStats <span style="color:var(--neon-blue)">OS</span> v4.0</h1>
+            <div class="nav-controls">
+                <button onclick="switchView('view-3d')" class="active" id="btn-3d">00: Knowledge Universe</button>
+                <button onclick="switchView('view-glossary')" class="mode-2" id="btn-glossary">01: AR Glossary</button>
+                <button onclick="switchView('view-compute')" class="mode-3" id="btn-compute">02: Quantum Matrix</button>
+            </div>
+        </div>
+        <div style="padding: 20px; color: #666; font-size: 0.8rem; text-align: right;">
+            STATUS: ONLINE | MODE: IMMERSIVE
+        </div>
+    </div>
+
+    <!-- STATE 00: 3D KNOWLEDGE UNIVERSE -->
+    <div id="view-3d" class="view-container active">
+        <div id="tooltip">
+            <h3 id="tt-title">Term</h3>
+            <p id="tt-desc">Description</p>
+            <span id="tt-formula" class="formula"></span>
+        </div>
+        <div id="canvas-3d"></div>
+    </div>
+
+    <!-- STATE 01: AR GLOSSARY -->
+    <div id="view-glossary" class="view-container">
+        <!-- Cards injected via JS -->
+    </div>
+
+    <!-- STATE 02: QUANTUM COMPUTATION -->
+    <div id="view-compute" class="view-container">
+        <div class="quantum-dashboard">
+            <div class="control-panel">
+                <div class="test-selector">
+                    <label style="color:white; display:block; margin-bottom:5px;">SELECT TEST PROTOCOL</label>
+                    <select id="test-select" onchange="updateComputeUI()">
+                        <option value="sensitivity">Sensitivity / Specificity</option>
+                        <option value="ppv">Predictive Values (PPV/NPV)</option>
+                        <option value="or">Odds Ratio (Case Control)</option>
+                        <option value="rr">Relative Risk (Cohort)</option>
+                        <option value="ci">Confidence Interval (Mean)</option>
+                    </select>
+                </div>
+
+                <div id="inputs-container">
+                    <!-- Dynamic Inputs -->
+                </div>
+
+                <button onclick="runQuantumCalc()" style="width:100%; margin-top:auto;">EXECUTE CALCULATION</button>
+                
+                <div class="computation-log" id="comp-log">
+                    <div class="log-entry">> System Ready...</div>
+                </div>
+            </div>
+
+            <div class="visualization-area">
+                <div id="quantum-viz-bg" style="position:absolute; top:0; left:0; width:100%; height:100%; opacity:0.3;"></div>
+                <div id="result-box" class="result-display">
+                    <div class="result-value" id="res-val">0.00</div>
+                    <div class="result-label" id="res-label">RESULT</div>
+                    <div class="interpretation" id="res-interpret">Waiting for input...</div>
+                </div>
+                <div style="position:absolute; bottom:20px; left:20px; color:#444; font-family:monospace;">
+                    VISUALIZATION ENGINE: ACTIVE
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // --- DATA STORE ---
+        const biostatsData = [
+            {
+                id: "sens", term: "Sensitivity", latex: "\\text{Sensitivity} = \\frac{TP}{TP + FN}",
+                desc: "Probability that a test is positive given the disease is present. 'SnNout': High Sensitivity, Negative result rules OUT disease.",
+                clinical: "Screening tests (e.g., HIV ELISA) need high sensitivity to catch all cases.",
+                trap: "Does NOT tell you the probability the patient has the disease after a positive test (that's PPV).",
+                mnemonic: "SENsitivity = SEE the disease (True Positive Rate)",
+                color: 0xff003c,
+                pos: {x: -10, y: 5, z: 10}
+            },
+            {
+                id: "spec", term: "Specificity", latex: "\\text{Specificity} = \\frac{TN}{TN + FP}",
+                desc: "Probability that a test is negative given the disease is absent. 'SpPin': High Specificity, Positive result rules IN disease.",
+                clinical: "Confirmatory tests (e.g., Western Blot) need high specificity to avoid false alarms.",
+                trap: "High specificity does not mean the test is good at finding sick people (it might miss many).",
+                mnemonic: "SPECificity = SPECify the healthy (True Negative Rate)",
+                color: 0x00f3ff,
+                pos: {x: 10, y: 5, z: 10}
+            },
+            {
+                id: "ppv", term: "PPV", latex: "\\text{PPV} = \\frac{TP}{TP + FP}",
+                desc: "Positive Predictive Value. Probability disease is present given a positive test. Depends heavily on prevalence.",
+                clinical: "As prevalence increases, PPV increases.",
+                trap: "Students often confuse PPV with Sensitivity. PPV changes with population prevalence; Sensitivity does not.",
+                mnemonic: "PPV = Positive Predicts Victory (Disease)",
+                color: 0xbc13fe,
+                pos: {x: 0, y: 15, z: 0}
+            },
+            {
+                id: "or", term: "Odds Ratio", latex: "OR = \\frac{a \\times d}{b \\times c}",
+                desc: "Measure of association in Case-Control studies. Compares odds of exposure in cases vs controls.",
+                clinical: "Used for rare diseases. OR ≈ RR if disease is rare (<10%).",
+                trap: "Cannot calculate Incidence or Relative Risk directly from a Case-Control study.",
+                mnemonic: "Cross-multiply the 2x2 table (Ad/Bc)",
+                color: 0x0aff0a,
+                pos: {x: -15, y: -5, z: -5}
+            },
+            {
+                id: "rr", term: "Relative Risk", latex: "RR = \\frac{A/(A+B)}{C/(C+D)}",
+                desc: "Risk in exposed divided by risk in unexposed. Used in Cohort studies and RCTs.",
+                clinical: "RR = 1 means no association. RR > 1 means risk factor. RR < 1 means protective.",
+                trap: "Do not use OR formula for Cohort studies if you can calculate incidence.",
+                mnemonic: "RR = Real Risk (Cohort/RCT)",
+                color: 0xffaa00,
+                pos: {x: 15, y: -5, z: -5}
+            },
+            {
+                id: "type1", term: "Type I Error", latex: "\\alpha = P(\\text{Reject } H_0 | H_0 \\text{ is true})",
+                desc: "False Positive. Concluding there is an effect when there isn't one.",
+                clinical: "Convicting an innocent person. Approving an ineffective drug.",
+                trap: "Decreasing alpha (making significance stricter) increases Beta (Type II error).",
+                mnemonic: "Type I = I cried falsely (False Positive)",
+                color: 0xffffff,
+                pos: {x: 0, y: -15, z: 10}
+            },
+            {
+                id: "power", term: "Power", latex: "\\text{Power} = 1 - \\beta",
+                desc: "Probability of correctly rejecting null hypothesis when it is false. Detecting a real effect.",
+                clinical: "Increased by larger sample size, larger effect size, higher alpha, less variability.",
+                trap: "Power is not the probability that H0 is true. It's conditional on H0 being false.",
+                mnemonic: "Power = Ability to detect Power (Effect)",
+                color: 0xff00ff,
+                pos: {x: 0, y: 0, z: -20}
+            }
+        ];
+
+        // --- INITIALIZATION ---
+        window.onload = function() {
+            let progress = 0;
+            const bar = document.getElementById('progress');
+            const status = document.getElementById('load-status');
+            const loader = document.getElementById('loader');
+            
+            const interval = setInterval(() => {
+                progress += Math.random() * 10;
+                if(progress > 100) progress = 100;
+                bar.style.width = progress + '%';
+                
+                if(progress < 30) status.innerText = "Loading Neural Weights...";
+                else if(progress < 60) status.innerText = "Rendering 3D Topology...";
+                else if(progress < 90) status.innerText = "Calibrating Quantum Matrices...";
+                else status.innerText = "Finalizing Sync...";
+
+                if(progress === 100) {
+                    clearInterval(interval);
+                    setTimeout(() => {
+                        loader.style.opacity = 0;
+                        setTimeout(() => loader.remove(), 1000);
+                        initThreeJS();
+                        renderGlossary();
+                        updateComputeUI();
+                    }, 500);
+                }
+            }, 100);
+        };
+
+        function switchView(viewId) {
+            document.querySelectorAll('.view-container').forEach(el => el.classList.remove('active'));
+            document.querySelectorAll('.nav-controls button').forEach(el => el.classList.remove('active'));
+            
+            document.getElementById(viewId).classList.add('active');
+            document.getElementById('btn-' + viewId.split('-')[1]).classList.add('active');
+
+            if(viewId === 'view-3d') resizeThree();
+        }
+
+        // --- STATE 00: THREE.JS IMPLEMENTATION ---
+        let scene, camera, renderer, particles, raycaster, mouse;
+        let particleData = [];
+
+        function initThreeJS() {
+            const container = document.getElementById('canvas-3d');
+            scene = new THREE.Scene();
+            scene.fog = new THREE.FogExp2(0x050510, 0.02);
+
+            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+            camera.position.z = 30;
+
+            renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            renderer.setPixelRatio(window.devicePixelRatio);
+            container.appendChild(renderer.domElement);
+
+            raycaster = new THREE.Raycaster();
+            mouse = new THREE.Vector2();
+
+            // Create Particles
+            const geometry = new THREE.BufferGeometry();
+            const positions = [];
+            const colors = [];
+            const sizes = [];
+
+            biostatsData.forEach((item, index) => {
+                positions.push(item.pos.x, item.pos.y, item.pos.z);
+                
+                const color = new THREE.Color(item.color);
+                colors.push(color.r, color.g, color.b);
+                
+                sizes.push(2.0); // Base size
+
+                particleData.push({
+                    id: item.id,
+                    term: item.term,
+                    desc: item.desc,
+                    formula: item.latex,
+                    baseY: item.pos.y
+                });
+            });
+
+            geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
+            geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
+            geometry.setAttribute('size', new THREE.Float32BufferAttribute(sizes, 1));
+
+            const material = new THREE.PointsMaterial({ 
+                size: 1.5, 
+                vertexColors: true,
+                map: createCircleTexture(),
+                transparent: true,
+                blending: THREE.AdditiveBlending,
+                depthWrite: false
+            });
+
+            particles = new THREE.Points(geometry, material);
+            scene.add(particles);
+
+            // Connect lines (Decision Trees)
+            const lineMat = new THREE.LineBasicMaterial({ color: 0x333355, transparent: true, opacity: 0.3 });
+            const lineGeo = new THREE.BufferGeometry();
+            const linePos = [];
+            
+            // Simple logic: connect everything to center-ish or neighbors
+            for(let i=0; i<biostatsData.length; i++) {
+                for(let j=i+1; j<biostatsData.length; j++) {
+                    if(Math.random() > 0.6) { // Random connections for "Neural" look
+                        linePos.push(biostatsData[i].pos.x, biostatsData[i].pos.y, biostatsData[i].pos.z);
+                        linePos.push(biostatsData[j].pos.x, biostatsData[j].pos.y, biostatsData[j].pos.z);
+                    }
+                }
+            }
+            lineGeo.setAttribute('position', new THREE.Float32BufferAttribute(linePos, 3));
+            const lines = new THREE.LineSegments(lineGeo, lineMat);
+            scene.add(lines);
+
+            // Animation Loop
+            animate();
+
+            // Events
+            window.addEventListener('resize', resizeThree, false);
+            container.addEventListener('mousemove', onMouseMove, false);
+            container.addEventListener('click', onClick, false);
+        }
+
+        function createCircleTexture() {
+            const canvas = document.createElement('canvas');
+            canvas.width = 32; canvas.height = 32;
+            const ctx = canvas.getContext('2d');
+            const grad = ctx.createRadialGradient(16,16,0,16,16,16);
+            grad.addColorStop(0, 'rgba(255,255,255,1)');
+            grad.addColorStop(1, 'rgba(0,0,0,0)');
+            ctx.fillStyle = grad;
+            ctx.fillRect(0,0,32,32);
+            const texture = new THREE.Texture(canvas);
+            texture.needsUpdate = true;
+            return texture;
+        }
+
+        function resizeThree() {
+            if(!camera || !renderer) return;
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        }
+
+        function onMouseMove(event) {
+            event.preventDefault();
+            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+
+            // Tooltip follow
+            const tooltip = document.getElementById('tooltip');
+            if(tooltip.style.display === 'block') {
+                tooltip.style.left = event.clientX + 15 + 'px';
+                tooltip.style.top = event.clientY + 15 + 'px';
+            }
+        }
+
+        function onClick() {
+            if(intersectedIndex !== -1) {
+                const data = particleData[intersectedIndex];
+                // Expand camera view
+                // In a full app, this would trigger a modal or transition
+                console.log("Clicked: " + data.term);
+            }
+        }
+
+        let intersectedIndex = -1;
+
+        function animate() {
+            requestAnimationFrame(animate);
+            
+            if(particles) {
+                particles.rotation.y += 0.002;
+                particles.rotation.x += 0.001;
+
+                // Hover effect
+                raycaster.setFromCamera(mouse, camera);
+                const intersects = raycaster.intersectObject(particles);
+
+                if (intersects.length > 0) {
+                    const idx = intersects[0].index;
+                    if (intersectedIndex != idx) {
+                        intersectedIndex = idx;
+                        const data = particleData[idx];
+                        
+                        const tt = document.getElementById('tooltip');
+                        document.getElementById('tt-title').innerText = data.term;
+                        document.getElementById('tt-desc').innerText = data.desc;
+                        document.getElementById('tt-formula').innerHTML = `$${data.formula}$`;
+                        tt.style.display = 'block';
+                        document.body.style.cursor = 'pointer';
+                        
+                        // Trigger MathJax render
+                        MathJax.Hub.Queue(["Typeset", MathJax.Hub, "tt-formula"]);
+                    }
+                } else {
+                    if(intersectedIndex != -1) {
+                        intersectedIndex = -1;
+                        document.getElementById('tooltip').style.display = 'none';
+                        document.body.style.cursor = 'default';
+                    }
+                }
+            }
+            renderer.render(scene, camera);
+        }
+
+        // --- STATE 01: AR GLOSSARY IMPLEMENTATION ---
+        function renderGlossary() {
+            const container = document.getElementById('view-glossary');
+            let html = '';
+            
+            biostatsData.forEach(item => {
+                html += `
+                <div class="flashcard" onclick="this.classList.toggle('flipped')">
+                    <div class="card-face card-front">
+                        <div class="badge">BIOSTATISTICS CORE</div>
+                        <div class="term-title">${item.term}</div>
+                        <div class="term-latex">$${item.latex}$</div>
+                        <div style="color:#666; font-size:0.8rem; margin-top:20px;">(Tap to Flip)</div>
+                    </div>
+                    <div class="card-face card-back">
+                        <div class="detail-row">
+                            <span class="detail-label">Definition</span>
+                            <div class="detail-content">${item.desc}</div>
+                        </div>
+                        <div class="detail-row">
+                            <span class="detail-label">Clinical Context</span>
+                            <div class="detail-content">${item.clinical}</div>
+                        </div>
+                        <div class="detail-row">
+                            <span class="detail-label">Exam Trap ⚠️</span>
+                            <div class="detail-content exam-trap">${item.trap}</div>
+                        </div>
+                        <div class="detail-row">
+                            <span class="detail-label">Mnemonic</span>
+                            <div class="detail-content" style="color:var(--neon-blue)">${item.mnemonic}</div>
+                        </div>
+                    </div>
+                </div>
+                `;
+            });
+            container.innerHTML = html;
+            MathJax.Hub.Queue(["Typeset", MathJax.Hub, container]);
+        }
+
+        // --- STATE 02: QUANTUM COMPUTATION IMPLEMENTATION ---
+        function updateComputeUI() {
+            const type = document.getElementById('test-select').value;
+            const container = document.getElementById('inputs-container');
+            let inputs = '';
+
+            if(type === 'sensitivity') {
+                inputs = `
+                    <div class="slider-group"><label>True Positives (TP)</label><input type="number" id="in-tp" value="80"></div>
+                    <div class="slider-group"><label>False Negatives (FN)</label><input type="number" id="in-fn" value="20"></div>
+                    <div class="slider-group"><label>Mode</label><select id="calc-mode"><option value="sens">Calculate Sensitivity</option><option value="spec">Calculate Specificity (Need TN/FP)</option></select></div>
+                `;
+            } else if (type === 'ppv') {
+                inputs = `
+                    <div class="slider-group"><label>True Positives (TP)</label><input type="number" id="in-tp" value="90"></div>
+                    <div class="slider-group"><label>False Positives (FP)</label><input type="number" id="in-fp" value="50"></div>
+                    <div class="slider-group"><label>Prevalence (%)</label><input type="range" id="in-prev" min="1" max="99" value="10" oninput="document.getElementById('prev-val').innerText=this.value+'%'"><span id="prev-val" style="float:right; color:white">10%</span></div>
+                    <small style="color:#666">*Note: Changing prevalence updates TP/FP ratio automatically for simulation</small>
+                `;
+            } else if (type === 'or') {
+                inputs = `
+                    <div style="display:grid; grid-template-columns:1fr 1fr; gap:10px;">
+                        <div class="slider-group"><label>A (Cases+Exp)</label><input type="number" id="in-a" value="40"></div>
+                        <div class="slider-group"><label>B (Ctrl+Exp)</label><input type="number" id="in-b" value="10"></div>
+                        <div class="slider-group"><label>C (Cases+Unexp)</label><input type="number" id="in-c" value="20"></div>
+                        <div class="slider-group"><label>D (Ctrl+Unexp)</label><input type="number" id="in-d" value="80"></div>
+                    </div>
+                `;
+            } else if (type === 'rr') {
+                inputs = `
+                    <div class="slider-group"><label>Risk in Exposed (A/A+B)</label><input type="number" id="in-re" value="0.4" step="0.01"></div>
+                    <div class="slider-group"><label>Risk in Unexposed (C/C+D)</label><input type="number" id="in-ru" value="0.1" step="0.01"></div>
+                `;
+            } else if (type === 'ci') {
+                inputs = `
+                    <div class="slider-group"><label>Sample Mean (x̄)</label><input type="number" id="in-mean" value="120"></div>
+                    <div class="slider-group"><label>Std Dev (s)</label><input type="number" id="in-sd" value="15"></div>
+                    <div class="slider-group"><label>N</label><input type="number" id="in-n" value="100"></div>
+                    <div class="slider-group"><label>Z-score (95%)</label><input type="number" id="in-z" value="1.96" readonly></div>
+                `;
+            }
+
+            container.innerHTML = inputs;
+            document.getElementById('result-box').style.display = 'none';
+            logMsg(`> Protocol loaded: ${type.toUpperCase()}`);
+        }
+
+        function logMsg(msg) {
+            const log = document.getElementById('comp-log');
+            const div = document.createElement('div');
+            div.className = 'log-entry';
+            div.innerText = msg;
+            log.prepend(div);
+            if(log.children.length > 6) log.lastChild.remove();
+        }
+
+        function runQuantumCalc() {
+            const type = document.getElementById('test-select').value;
+            const resBox = document.getElementById('result-box');
+            const resVal = document.getElementById('res-val');
+            const resLabel = document.getElementById('res-label');
+            const resInterp = document.getElementById('res-interpret');
+            
+            resBox.style.display = 'block';
+            resVal.style.opacity = 0;
+            
+            logMsg("> Initializing quantum registers...");
+            setTimeout(() => logMsg("> Collapsing wavefunction..."), 300);
+            
+            let result = 0;
+            let label = "";
+            let interp = "";
+
+            if(type === 'sensitivity') {
+                const tp = parseFloat(document.getElementById('in-tp').value);
+                const fn = parseFloat(document.getElementById('in-fn').value);
+                result = tp / (tp + fn);
+                label = "SENSITIVITY";
+                interp = result > 0.9 ? "Excellent screening test." : "May miss significant cases.";
+            } else if (type === 'ppv') {
+                const tp = parseFloat(document.getElementById('in-tp').value);
+                const fp = parseFloat(document.getElementById('in-fp').value);
+                result = tp / (tp + fp);
+                label = "POSITIVE PREDICTIVE VALUE";
+                interp = `Given current prevalence, a positive test means ${Math.round(result*100)}% chance of disease.`;
+            } else if (type === 'or') {
+                const a = parseFloat(document.getElementById('in-a').value);
+                const b = parseFloat(document.getElementById('in-b').value);
+                const c = parseFloat(document.getElementById('in-c').value);
+                const d = parseFloat(document.getElementById('in-d').value);
+                result = (a*d)/(b*c);
+                label = "ODDS RATIO";
+                interp = result > 1 ? "Exposure associated with higher odds of disease." : "Exposure associated with lower odds.";
+            } else if (type === 'rr') {
+                const re = parseFloat(document.getElementById('in-re').value);
+                const ru = parseFloat(document.getElementById('in-ru').value);
+                result = re / ru;
+                label = "RELATIVE RISK";
+                interp = result === 1 ? "No association." : `Exposed group is ${result.toFixed(2)}x more likely to develop outcome.`;
+            } else if (type === 'ci') {
+                const mean = parseFloat(document.getElementById('in-mean').value);
+                const sd = parseFloat(document.getElementById('in-sd').value);
+                const n = parseFloat(document.getElementById('in-n').value);
+                const z = parseFloat(document.getElementById('in-z').value);
+                const margin = z * (sd / Math.sqrt(n));
+                result = margin;
+                label = "MARGIN OF ERROR (±)";
+                interp = `95% CI: [${(mean-margin).toFixed(2)}, ${(mean+margin).toFixed(2)}]`;
+            }
+
+            setTimeout(() => {
+                resVal.innerText = result.toFixed(3);
+                resLabel.innerText = label;
+                resInterp.innerText = interp;
+                resVal.style.opacity = 1;
+                resVal.style.transition = "opacity 1s";
+                logMsg(`> Calculation complete: ${result.toFixed(4)}`);
+                
+                // Visual flare
+                resBox.style.boxShadow = `0 0 ${50 + Math.random()*50}px var(--neon-green)`;
+                setTimeout(() => resBox.style.boxShadow = "0 0 50px rgba(10, 255, 10, 0.2)", 500);
+            }, 800);
+        }
+
+    </script>
+</body>
+</html>
\ No newline at end of file
