Upload app.js with huggingface_hub

app.js

@@ -1,6 +1,7 @@
 /**
- * MVA Syndrome 5D Genomic Studio — Client Engine
- * High-performance browser for Clinical Phenotypes, 5M Whole-Genome Variants, Mosaicism, and WGS Flowcell metrics.
+ * MVA Syndrome Multi-Dimensional Genomic Studio — Client Engine
+ * High-performance browser for Clinical Phenotypes, 5M WGS Variants, Mosaicism,
+ * Candidate Gene Burden, Syndromic Differentials, and Mitotic Interactome Matrix Tables.
  */
 
 (function () {
@@ -15,8 +16,13 @@
     chromosomes: null,
     wgs: null,
     pathway: null,
+    geneBurden: null,
+    syndromicDiff: null,
+    mosaicStrat: null,
+    mitoticMachinery: null,
+    karyotypeInstability: null,
     
-    // Filters
+    // Variant Filters
     selectedGene: 'ALL',
     selectedType: 'ALL',
     selectedMosaic: 'ALL',
@@ -55,16 +61,35 @@
     btnResetChr: document.getElementById('btnResetChr'),
     variantTableBody: document.getElementById('variantTableBody'),
     
-    // Tab 3: Mosaicism
+    // Tab 3: Gene Burden Matrix
+    geneBurdenTableBody: document.getElementById('geneBurdenTableBody'),
+    searchGeneBurden: document.getElementById('searchGeneBurden'),
+    
+    // Tab 4: Syndromic Differential Matrix
+    syndromicDiffTableBody: document.getElementById('syndromicDiffTableBody'),
+    searchSyndromicDiff: document.getElementById('searchSyndromicDiff'),
+    
+    // Tab 5: Mosaic Allelic Stratification
+    mosaicStratTableBody: document.getElementById('mosaicStratTableBody'),
+    
+    // Tab 6: Mitotic Machinery Interactome
+    mitoticMachineryTableBody: document.getElementById('mitoticMachineryTableBody'),
+    searchMitoticMachinery: document.getElementById('searchMitoticMachinery'),
+    
+    // Tab 7: 24-Chromosome Karyotype Matrix
+    karyotypeMatrixTableBody: document.getElementById('karyotypeMatrixTableBody'),
+    searchKaryotypeMatrix: document.getElementById('searchKaryotypeMatrix'),
+    
+    // Tab 8: Mosaicism Spectrum
     mosaicListSummary: document.getElementById('mosaicListSummary'),
     hetListSummary: document.getElementById('hetListSummary'),
     homListSummary: document.getElementById('homListSummary'),
     topMosaicTable: document.getElementById('topMosaicTable'),
     
-    // Tab 4: WGS
+    // Tab 9: WGS
     laneTableBody: document.getElementById('laneTableBody'),
     
-    // Tab 5: Pathway
+    // Tab 10: Pathway
     pathwayComplexes: document.getElementById('pathwayComplexes'),
     
     // Modals
@@ -88,12 +113,28 @@
 
   async function loadAllDatasets() {
     try {
-      const [clinicalRes, genesRes, chrRes, wgsRes, pathRes] = await Promise.all([
+      const [
+        clinicalRes,
+        genesRes,
+        chrRes,
+        wgsRes,
+        pathRes,
+        geneBurdenRes,
+        syndromicDiffRes,
+        mosaicStratRes,
+        mitoticMachineryRes,
+        karyoInstabilityRes
+      ] = await Promise.all([
         fetch('data/clinical_phenotype.json').then(r => r.json()),
         fetch('data/candidate_genes_variants.json').then(r => r.json()),
         fetch('data/chromosome_stats.json').then(r => r.json()),
         fetch('data/wgs_sequencing_metrics.json').then(r => r.json()),
-        fetch('data/pathway_network.json').then(r => r.json())
+        fetch('data/pathway_network.json').then(r => r.json()),
+        fetch('data/gene_burden_matrix.json').then(r => r.json()),
+        fetch('data/syndromic_differential_matrix.json').then(r => r.json()),
+        fetch('data/mosaic_stratification_matrix.json').then(r => r.json()),
+        fetch('data/mitotic_machinery_matrix.json').then(r => r.json()),
+        fetch('data/karyotype_instability_matrix.json').then(r => r.json())
       ]);
 
       state.clinical = clinicalRes;
@@ -101,8 +142,13 @@
       state.chromosomes = chrRes;
       state.wgs = wgsRes;
       state.pathway = pathRes;
+      state.geneBurden = geneBurdenRes;
+      state.syndromicDiff = syndromicDiffRes;
+      state.mosaicStrat = mosaicStratRes;
+      state.mitoticMachinery = mitoticMachineryRes;
+      state.karyotypeInstability = karyoInstabilityRes;
 
-      // Flatten all variants
+      // Flatten all candidate variants
       state.allVariants = [];
       Object.entries(state.genesData.genes).forEach(([gname, gentry]) => {
         gentry.variants.forEach(v => {
@@ -125,6 +171,11 @@
     renderClinicalTab();
     renderChromosomeKaryotype();
     applyVariantFilters();
+    renderGeneBurdenTable();
+    renderSyndromicDiffTable();
+    renderMosaicStratTable();
+    renderMitoticMachineryTable();
+    renderKaryotypeMatrixTable();
     renderMosaicTab();
     renderWGSTab();
     renderPathwayTab();
@@ -221,7 +272,7 @@
 
   function renderVariantTable() {
     els.variantTableBody.innerHTML = '';
-    const slice = state.filteredVariants.slice(0, 150); // High-performance virtualization
+    const slice = state.filteredVariants.slice(0, 150);
 
     if (slice.length === 0) {
       els.variantTableBody.innerHTML = `
@@ -264,7 +315,184 @@
   }
 
   // -------------------------------------------------------------
-  // Tab 3: Mosaicism & VAF Spectrum
+  // Tab 3: Candidate Gene Burden Matrix
+  // -------------------------------------------------------------
+  function renderGeneBurdenTable(filter = '') {
+    if (!state.geneBurden) return;
+    els.geneBurdenTableBody.innerHTML = '';
+    let genes = state.geneBurden.genes || [];
+
+    if (filter.trim() !== '') {
+      const q = filter.toLowerCase().trim();
+      genes = genes.filter(g => 
+        g.gene.toLowerCase().includes(q) ||
+        g.syndrome.toLowerCase().includes(q) ||
+        g.complex.toLowerCase().includes(q) ||
+        g.role.toLowerCase().includes(q) ||
+        g.clinical_link.toLowerCase().includes(q)
+      );
+    }
+
+    genes.forEach(g => {
+      const tr = document.createElement('tr');
+      let tierBadge = `<span class="badge-tier2">${g.pathogenicity_tier}</span>`;
+      if (g.pathogenicity_tier.includes('Tier 1')) {
+        tierBadge = `<span class="badge-tier1">${g.pathogenicity_tier}</span>`;
+      } else if (g.pathogenicity_tier.includes('Tier 3')) {
+        tierBadge = `<span class="badge-tier3">${g.pathogenicity_tier}</span>`;
+      }
+
+      tr.innerHTML = `
+        <td><strong style="color:var(--primary-cyan); font-size: 13px;">${g.gene}</strong></td>
+        <td><span class="font-mono" style="color:var(--text-muted);">${g.omim}</span><br><strong style="font-size:11px; color:var(--text-dim);">${g.cytoband}</strong></td>
+        <td><strong style="color:#fff;">${g.syndrome}</strong></td>
+        <td><span style="color:var(--primary-cyan); font-weight:600;">${g.complex}</span><br><span style="font-size:11px; color:var(--text-muted);">${g.role}</span></td>
+        <td><span style="font-size:11px; color:var(--text-main);">${g.inheritance}</span></td>
+        <td class="font-mono"><strong>${g.patient_variants}</strong></td>
+        <td class="font-mono"><strong style="color:${g.highest_vaf.includes('Mosaic') ? 'var(--accent-gold)' : 'var(--text-main)'};">${g.highest_vaf}</strong></td>
+        <td class="font-mono">${g.mosaic_candidates > 0 ? `<span class="tag-mosaic">${g.mosaic_candidates} loci</span>` : '0'}</td>
+        <td style="font-size:11px; color:var(--text-muted);">${g.clinical_link}</td>
+        <td>${tierBadge}</td>
+      `;
+      els.geneBurdenTableBody.appendChild(tr);
+    });
+  }
+
+  // -------------------------------------------------------------
+  // Tab 4: Phenotype Differential Matrix
+  // -------------------------------------------------------------
+  function renderSyndromicDiffTable(filter = '') {
+    if (!state.syndromicDiff) return;
+    els.syndromicDiffTableBody.innerHTML = '';
+    let phenos = state.syndromicDiff.phenotypes || [];
+
+    if (filter.trim() !== '') {
+      const q = filter.toLowerCase().trim();
+      phenos = phenos.filter(p => 
+        p.feature.toLowerCase().includes(q) ||
+        p.hpo.toLowerCase().includes(q) ||
+        p.competing_syndromes.toLowerCase().includes(q) ||
+        p.mva_genes.toLowerCase().includes(q) ||
+        p.molecular_mechanism.toLowerCase().includes(q)
+      );
+    }
+
+    phenos.forEach(p => {
+      const tr = document.createElement('tr');
+      tr.innerHTML = `
+        <td>
+          <strong style="color:var(--text-main); font-size:13px;">${p.feature}</strong><br>
+          <span class="hpo-code">${p.hpo}</span>
+        </td>
+        <td><span class="badge-mva-match">${p.mva_syndrome_match}</span></td>
+        <td><strong style="color:var(--primary-cyan); font-family:var(--font-mono);">${p.mva_genes}</strong></td>
+        <td style="font-size:11px; color:var(--text-muted);">${p.competing_syndromes}</td>
+        <td style="font-size:11px; line-height:1.45; color:#e2e8f0;">${p.molecular_mechanism}</td>
+        <td><span class="badge-patho">${p.discriminatory_power}</span></td>
+      `;
+      els.syndromicDiffTableBody.appendChild(tr);
+    });
+  }
+
+  // -------------------------------------------------------------
+  // Tab 5: Mosaic Allelic Stratification
+  // -------------------------------------------------------------
+  function renderMosaicStratTable() {
+    if (!state.mosaicStrat) return;
+    els.mosaicStratTableBody.innerHTML = '';
+    state.mosaicStrat.bins.forEach(b => {
+      const tr = document.createElement('tr');
+      let vafStyle = 'color:var(--text-main);';
+      if (b.vaf_range.includes('5.0%') || b.vaf_range.includes('15.1%') || b.vaf_range.includes('28.1%')) {
+        vafStyle = 'color:var(--accent-gold); font-weight:800;';
+      }
+
+      tr.innerHTML = `
+        <td><strong class="font-mono" style="${vafStyle}">${b.vaf_range}</strong></td>
+        <td><strong style="color:#fff;">${b.category}</strong><br><span style="font-size:10px; color:var(--text-dim);">${b.inferred_timing}</span></td>
+        <td class="font-mono"><strong>${b.variant_count}</strong></td>
+        <td class="font-mono">${b.mean_dp}</td>
+        <td><strong style="color:var(--primary-cyan);">${b.tissue_penetrance}</strong></td>
+        <td><span style="font-family:var(--font-mono); color:var(--text-main);">${b.key_genes_affected}</span></td>
+        <td style="font-size:11px; color:var(--text-muted);">${b.biological_impact}</td>
+      `;
+      els.mosaicStratTableBody.appendChild(tr);
+    });
+  }
+
+  // -------------------------------------------------------------
+  // Tab 6: Mitotic Machinery & Interactome Functional Table
+  // -------------------------------------------------------------
+  function renderMitoticMachineryTable(filter = '') {
+    if (!state.mitoticMachinery) return;
+    els.mitoticMachineryTableBody.innerHTML = '';
+    let proteins = state.mitoticMachinery.proteins || [];
+
+    if (filter.trim() !== '') {
+      const q = filter.toLowerCase().trim();
+      proteins = proteins.filter(p => 
+        p.protein.toLowerCase().includes(q) ||
+        p.uniprot.toLowerCase().includes(q) ||
+        p.complex.toLowerCase().includes(q) ||
+        p.mva_type.toLowerCase().includes(q) ||
+        p.biochemical_function.toLowerCase().includes(q)
+      );
+    }
+
+    proteins.forEach(p => {
+      const tr = document.createElement('tr');
+      tr.innerHTML = `
+        <td>
+          <strong style="color:var(--primary-cyan); font-size:13px;">${p.protein}</strong><br>
+          <span class="font-mono" style="font-size:10px; color:var(--text-dim);">UniProt: ${p.uniprot}</span>
+        </td>
+        <td class="font-mono">${p.length_aa} aa</td>
+        <td style="font-size:11px; color:var(--text-main);">${p.subcellular_location}</td>
+        <td style="font-size:11px; color:#e2e8f0; line-height:1.4;">${p.biochemical_function}</td>
+        <td><span style="color:var(--primary-cyan); font-weight:600; font-size:11px;">${p.complex}</span></td>
+        <td><span class="badge-patho">${p.mva_type}</span></td>
+        <td style="font-size:11px; color:var(--accent-gold); font-family:var(--font-mono);">${p.proband_findings}</td>
+      `;
+      els.mitoticMachineryTableBody.appendChild(tr);
+    });
+  }
+
+  // -------------------------------------------------------------
+  // Tab 7: 24-Chromosome Karyotype Matrix
+  // -------------------------------------------------------------
+  function renderKaryotypeMatrixTable(filter = '') {
+    if (!state.karyotypeInstability) return;
+    els.karyotypeMatrixTableBody.innerHTML = '';
+    let chrs = state.karyotypeInstability.chromosomes || [];
+
+    if (filter.trim() !== '') {
+      const q = filter.toLowerCase().trim();
+      chrs = chrs.filter(c => 
+        c.chr.toLowerCase().includes(q) ||
+        c.aneuploidy_vulnerability.toLowerCase().includes(q)
+      );
+    }
+
+    chrs.forEach(c => {
+      const tr = document.createElement('tr');
+      const isMvaKey = ['chr15', 'chr11', 'chr5', 'chr18', 'chr7', 'chr8'].includes(c.chr);
+      tr.innerHTML = `
+        <td><strong style="color:${isMvaKey ? 'var(--accent-gold)' : 'var(--primary-cyan)'}; font-size:13px;">${c.chr}</strong></td>
+        <td class="font-mono">${c.length_bp}</td>
+        <td class="font-mono"><strong>${c.total_variants}</strong></td>
+        <td class="font-mono">${c.snvs}</td>
+        <td class="font-mono">${c.indels}</td>
+        <td class="font-mono"><strong>${c.density_per_mb}</strong></td>
+        <td class="font-mono">${c.snv_indel_ratio}</td>
+        <td class="font-mono" style="font-size:11px;">${c.heterozygous} / ${c.homozygous}</td>
+        <td style="font-size:11px; color:${isMvaKey ? '#fef08a' : 'var(--text-muted)'}; font-weight:${isMvaKey ? '600' : '400'};">${c.aneuploidy_vulnerability}</td>
+      `;
+      els.karyotypeMatrixTableBody.appendChild(tr);
+    });
+  }
+
+  // -------------------------------------------------------------
+  // Tab 8: Mosaicism Spectrum
   // -------------------------------------------------------------
   function renderMosaicTab() {
     const mosaicVars = state.allVariants.filter(v => v.classification === 'Mosaic Somatic Candidate');
@@ -306,7 +534,7 @@
   }
 
   // -------------------------------------------------------------
-  // Tab 4: WGS Sequencing Metrics
+  // Tab 9: WGS Sequencing Metrics
   // -------------------------------------------------------------
   function renderWGSTab() {
     if (!state.wgs) return;
@@ -328,7 +556,7 @@
   }
 
   // -------------------------------------------------------------
-  // Tab 5: Mitotic Pathway Network
+  // Tab 10: Mitotic Pathway Network
   // -------------------------------------------------------------
   function renderPathwayTab() {
     if (!state.pathway) return;
@@ -398,7 +626,7 @@
       };
     });
 
-    // Filters
+    // Variant Filters
     els.geneFilter.onchange = (e) => {
       state.selectedGene = e.target.value;
       applyVariantFilters();
@@ -425,826 +653,47 @@
       applyVariantFilters();
     };
 
-    // Modals
-    els.btnCloseVarModal.onclick = () => els.modalVariant.classList.add('hidden');
-    els.btnShortcuts.onclick = () => els.modalHelp.classList.remove('hidden');
-    els.btnCloseHelpModal.onclick = () => els.modalHelp.classList.add('hidden');
-
-    // Keyboard Shortcuts
-    window.onkeydown = (e) => {
-      if (e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT') return;
-
-      switch (e.key) {
-        case '1':
-        case '2':
-        case '3':
-        case '4':
-        case '5':
-        case '6':
-        case '7':
-        case '8':
-          const idx = parseInt(e.key, 10) - 1;
-          if (els.navTabs[idx]) els.navTabs[idx].click();
-          break;
-        case '/':
-          e.preventDefault();
-          if (els.navTabs[1]) els.navTabs[1].click();
-          els.variantSearch.focus();
-          break;
-        case 'Escape':
-          els.modalVariant.classList.add('hidden');
-          els.modalHelp.classList.add('hidden');
-          break;
-      }
-    };
-  }
-
-  // -------------------------------------------------------------
-  // Animation 1: 4D Mitotic Nondisjunction & SAC Failure (7s)
-  // -------------------------------------------------------------
-  const mitosisSim = {
-    canvas: null,
-    ctx: null,
-    time: 0.0, // 0.0 to 7.0 seconds
-    maxTime: 7.0,
-    isPlaying: true,
-    speed: 1.0,
-    scenario: 'MVA', // 'WT' or 'MVA'
-    lastTimestamp: 0,
-    
-    // Chromosomes
-    chromosomes: [
-      { name: 'Chr 1', color: '#38bdf8', yOff: -110, lag: false },
-      { name: 'Chr 4', color: '#38bdf8', yOff: -75, lag: false },
-      { name: 'Chr 7 (MAD1L1)', color: '#a855f7', yOff: -40, lag: false },
-      { name: 'Chr 11 (WT1/CEP57)', color: '#fbbf24', yOff: -5, lag: false },
-      { name: 'Chr 15 (BUB1B)', color: '#f43f5e', yOff: 30, lag: true }, // Lagging
-      { name: 'Chr 17 (TP53)', color: '#38bdf8', yOff: 65, lag: false },
-      { name: 'Chr 18 (CEP192)', color: '#ec4899', yOff: 100, lag: false }
-    ]
-  };
-
-  function initMitosisAnim() {
-    mitosisSim.canvas = document.getElementById('mitosisCanvas');
-    if (!mitosisSim.canvas) return;
-    mitosisSim.ctx = mitosisSim.canvas.getContext('2d');
-
-    const btnPlay = document.getElementById('btnPlayMitosis');
-    const btnReset = document.getElementById('btnResetMitosis');
-    const btnWT = document.getElementById('btnScenWT');
-    const btnMVA = document.getElementById('btnScenMVA');
-    const range = document.getElementById('mitosisTimeline');
-    const speedBtns = document.querySelectorAll('.btn-speed-mitosis');
-
-    if (btnPlay) {
-      btnPlay.onclick = () => {
-        mitosisSim.isPlaying = !mitosisSim.isPlaying;
-        btnPlay.textContent = mitosisSim.isPlaying ? '⏸ Pause' : '▶ Play (7s)';
-        btnPlay.classList.toggle('playing', mitosisSim.isPlaying);
-      };
+    // Infotable Search Filters
+    if (els.searchGeneBurden) {
+      els.searchGeneBurden.oninput = (e) => renderGeneBurdenTable(e.target.value);
     }
 
-    if (btnReset) {
-      btnReset.onclick = () => {
-        mitosisSim.time = 0.0;
-        if (range) range.value = 0;
-      };
+    if (els.searchSyndromicDiff) {
+      els.searchSyndromicDiff.oninput = (e) => renderSyndromicDiffTable(e.target.value);
     }
 
-    if (btnWT && btnMVA) {
-      btnWT.onclick = () => {
-        mitosisSim.scenario = 'WT';
-        btnWT.classList.add('active');
-        btnMVA.classList.remove('active');
-        document.getElementById('mitosisCallout').innerHTML = `<strong>Wild-Type Mechanism:</strong> Intact BUBR1/MAD1L1 complex actively detects tension absence on unattached chromatid 15, arresting anaphase onset until bipolar amphitelic biorientation is achieved. Symmetric 46,XX division results.`;
-      };
-      btnMVA.onclick = () => {
-        mitosisSim.scenario = 'MVA';
-        btnMVA.classList.add('active');
-        btnWT.classList.remove('active');
-        document.getElementById('mitosisCallout').innerHTML = `<strong>Diagnostic Mechanism:</strong> In MVA syndrome, BUBR1/TRIP13/CEP57 deficiency allows premature anaphase firing while chromosome 15 is syntelic. The lagging chromatid fails to segregate and forms an aneuploid micronucleus.`;
-      };
+    if (els.searchMitoticMachinery) {
+      els.searchMitoticMachinery.oninput = (e) => renderMitoticMachineryTable(e.target.value);
     }
 
-    if (range) {
-      range.oninput = (e) => {
-        mitosisSim.time = (parseInt(e.target.value, 10) / 700) * mitosisSim.maxTime;
-      };
+    if (els.searchKaryotypeMatrix) {
+      els.searchKaryotypeMatrix.oninput = (e) => renderKaryotypeMatrixTable(e.target.value);
     }
 
-    speedBtns.forEach(b => {
-      b.onclick = () => {
-        speedBtns.forEach(x => x.classList.remove('active'));
-        b.classList.add('active');
-        mitosisSim.speed = parseFloat(b.dataset.speed);
-      };
-    });
-
-    requestAnimationFrame(renderMitosisLoop);
-  }
-
-  function renderMitosisLoop(timestamp) {
-    if (!mitosisSim.lastTimestamp) mitosisSim.lastTimestamp = timestamp;
-    const dt = (timestamp - mitosisSim.lastTimestamp) / 1000;
-    mitosisSim.lastTimestamp = timestamp;
-
-    if (mitosisSim.isPlaying && mitosisSim.ctx) {
-      mitosisSim.time += dt * mitosisSim.speed;
-      if (mitosisSim.time > mitosisSim.maxTime) {
-        mitosisSim.time = 0.0;
-      }
-      const range = document.getElementById('mitosisTimeline');
-      if (range) range.value = Math.floor((mitosisSim.time / mitosisSim.maxTime) * 700);
-    }
-
-    if (mitosisSim.ctx) {
-      drawMitosisFrame(mitosisSim.time);
-    }
-
-    requestAnimationFrame(renderMitosisLoop);
-  }
-
-  function drawMitosisFrame(t) {
-    const ctx = mitosisSim.ctx;
-    const w = mitosisSim.canvas.width;
-    const h = mitosisSim.canvas.height;
-    const cx = w / 2;
-    const cy = h / 2;
-
-    // Clear background
-    ctx.fillStyle = '#02050c';
-    ctx.fillRect(0, 0, w, h);
-
-    // Grid pattern
-    ctx.strokeStyle = 'rgba(30, 45, 74, 0.25)';
-    ctx.lineWidth = 1;
-    for (let x = 0; x < w; x += 40) { ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, h); ctx.stroke(); }
-    for (let y = 0; y < h; y += 40) { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(w, y); ctx.stroke(); }
-
-    // Phase Calculation
-    let phaseName = 'Prophase (Centrosome Migration)';
-    let sacStatus = 'Active Wait-Anaphase';
-    let tension = 1.0;
-    let mccLevel = 90;
-    let apcLevel = 10;
-    let karyoA = '46,XX (Diploid)';
-    let karyoB = '46,XX (Diploid)';
-
-    const isMVA = mitosisSim.scenario === 'MVA';
-
-    if (t < 2.0) {
-      // Phase 1: Prophase / Prometaphase
-      phaseName = 'Prophase / Prometaphase (Microtubule Capture)';
-      sacStatus = 'Active Wait-Anaphase (BUBR1/MAD2 Bound)';
-      tension = 1.0 + (t / 2.0) * 2.5;
-      mccLevel = 95 - (t / 2.0) * 10;
-      apcLevel = 5 + (t / 2.0) * 10;
-    } else if (t < 4.5) {
-      // Phase 2: Metaphase Congression
-      phaseName = 'Metaphase Plate Congression';
-      tension = 3.5 + ((t - 2.0) / 2.5) * 1.5;
-      if (isMVA) {
-        sacStatus = '⚠️ SAC LEAKAGE (Mutant BUBR1 Premature Release)';
-        mccLevel = 85 - ((t - 2.0) / 2.5) * 60; // Collapses in MVA
-        apcLevel = 15 + ((t - 2.0) / 2.5) * 75; // Premature firing
-      } else {
-        sacStatus = 'SAC ARREST (Syntelic Kinetochore Detected)';
-        mccLevel = 90;
-        apcLevel = 15;
-      }
-    } else if (t < 6.0) {
-      // Phase 3: Anaphase
-      phaseName = isMVA ? '⚡ Premature Anaphase (Lagging Chromatid)' : 'Normal Bipolar Anaphase';
-      sacStatus = isMVA ? 'Anaphase Fired (Cohesin Cleaved Prematurely)' : 'Bipolar Segregation';
-      tension = 6.5;
-      mccLevel = 10;
-      apcLevel = 95;
-      if (isMVA) {
-        karyoA = '47,XX (+15 Trisomy Pole)';
-        karyoB = '45,XX (-15 Monosomy Pole)';
-      }
-    } else {
-      // Phase 4: Telophase / Micronuclei
-      phaseName = isMVA ? '💥 Nondisjunction & Micronucleus Entrapment' : 'Euploid Daughter Cells';
-      sacStatus = isMVA ? 'Aneuploid Segregation Error Complete' : 'Normal Telophase';
-      tension = 0.5;
-      mccLevel = 5;
-      apcLevel = 100;
-      if (isMVA) {
-        karyoA = '47,XX (Trisomy 15 clone)';
-        karyoB = '45,XX (Monosomy 15 + Micronucleus)';
-      }
-    }
-
-    // Update HUD labels
-    document.getElementById('mitosisPhaseName').textContent = phaseName;
-    document.getElementById('mitosisClock').textContent = `${t.toFixed(2)}s / 7.00s`;
-    document.getElementById('mitosisSacStatus').textContent = sacStatus;
-    document.getElementById('mitosisSacStatus').style.color = isMVA && t > 2.0 ? 'var(--accent-red)' : 'var(--accent-gold)';
-
-    document.getElementById('barTension').style.width = `${Math.min(100, (tension / 6.0) * 100)}%`;
-    document.getElementById('valTension').textContent = `${tension.toFixed(1)} pN`;
-
-    document.getElementById('barMCC').style.width = `${mccLevel}%`;
-    document.getElementById('valMCC').textContent = `${mccLevel}% Active`;
-
-    document.getElementById('barAPC').style.width = `${apcLevel}%`;
-    document.getElementById('valAPC').textContent = `${apcLevel}% Activated`;
-
-    document.getElementById('karyoA').textContent = karyoA;
-    document.getElementById('karyoB').textContent = karyoB;
-
-    // 1. Draw Centrosome Spindle Poles (Left & Right)
-    const poleX1 = cx - 380 + Math.sin(t) * 2;
-    const poleX2 = cx + 380 - Math.sin(t) * 2;
-    const poleY = cy;
-
-    // Centrosome radial astral rays
-    ctx.save();
-    for (let pole of [{ x: poleX1, y: poleY }, { x: poleX2, y: poleY }]) {
-      for (let angle = 0; angle < Math.PI * 2; angle += Math.PI / 8) {
-        ctx.beginPath();
-        ctx.moveTo(pole.x, pole.y);
-        ctx.lineTo(pole.x + Math.cos(angle) * 70, pole.y + Math.sin(angle) * 70);
-        ctx.strokeStyle = 'rgba(56, 189, 248, 0.25)';
-        ctx.lineWidth = 1.5;
-        ctx.stroke();
-      }
-
-      // Centrosome Core (CEP57 / CEP192 barrel)
-      ctx.beginPath();
-      ctx.arc(pole.x, pole.y, 14, 0, Math.PI * 2);
-      ctx.fillStyle = '#0284c7';
-      ctx.fill();
-      ctx.strokeStyle = '#38bdf8';
-      ctx.lineWidth = 3;
-      ctx.stroke();
-
-      ctx.fillStyle = '#fff';
-      ctx.font = '700 9px JetBrains Mono';
-      ctx.fillText('CENTROSOME', pole.x - 30, pole.y - 20);
-      ctx.fillStyle = 'rgba(56, 189, 248, 0.8)';
-      ctx.font = '600 8px JetBrains Mono';
-      ctx.fillText('(CEP57/192)', pole.x - 24, pole.y + 24);
-    }
-    ctx.restore();
-
-    // 2. Draw Cleavage Furrow in Anaphase/Telophase
-    if (t > 4.5) {
-      const furrowConstrict = Math.min(1.0, (t - 4.5) / 2.0);
-      ctx.save();
-      ctx.strokeStyle = 'rgba(236, 72, 153, 0.6)';
-      ctx.lineWidth = 2;
-      ctx.setLineDash([4, 4]);
-      ctx.beginPath();
-      ctx.moveTo(cx, 40);
-      ctx.lineTo(cx, 40 + furrowConstrict * 100);
-      ctx.moveTo(cx, h - 40);
-      ctx.lineTo(cx, h - 40 - furrowConstrict * 100);
-      ctx.stroke();
-      ctx.fillStyle = 'rgba(236, 72, 153, 0.8)';
-      ctx.font = '700 9px JetBrains Mono';
-      ctx.fillText('CLEAVAGE FURROW', cx - 45, 30);
-      ctx.restore();
-    }
-
-    // 3. Draw Chromosomes and Spindle K-Fibers
-    mitosisSim.chromosomes.forEach((chr, i) => {
-      let chrX1 = cx - 10;
-      let chrX2 = cx + 10;
-      let chrY = cy + chr.yOff;
-
-      if (t < 2.0) {
-        // Congression wandering
-        const wander = Math.sin(t * 4 + i) * (30 - t * 12);
-        chrX1 = cx - 12 + wander;
-        chrX2 = cx + 12 + wander;
-      } else if (t < 4.5) {
-        // Metaphase Plate Lock
-        chrX1 = cx - 8;
-        chrX2 = cx + 8;
-      } else {
-        // Anaphase Pulling
-        const sepProgress = Math.min(1.0, (t - 4.5) / 2.0);
-        const pullDist = sepProgress * 260;
-
-        if (chr.lag && isMVA) {
-          // Lagging Chromosome 15 entrapped in center
-          chrX1 = cx - 15 + Math.sin(t * 6) * 4;
-          chrX2 = cx + 15 + Math.sin(t * 6) * 4;
-        } else {
-          chrX1 = cx - 8 - pullDist;
-          chrX2 = cx + 8 + pullDist;
-        }
-      }
-
-      // Draw Kinetochore Microtubule Fibers (K-Fibers)
-      ctx.save();
-      ctx.beginPath();
-      ctx.moveTo(poleX1, poleY);
-      ctx.lineTo(chrX1, chrY);
-      ctx.strokeStyle = (chr.lag && isMVA && t > 2.0) ? 'rgba(244, 63, 94, 0.7)' : 'rgba(16, 185, 129, 0.7)';
-      ctx.lineWidth = (chr.lag && isMVA) ? 2.5 : 1.8;
-      ctx.stroke();
-
-      ctx.beginPath();
-      ctx.moveTo(poleX2, poleY);
-      ctx.lineTo(chrX2, chrY);
-      ctx.strokeStyle = (chr.lag && isMVA && t > 2.0) ? 'rgba(251, 191, 36, 0.5)' : 'rgba(16, 185, 129, 0.7)';
-      ctx.lineWidth = 1.8;
-      ctx.stroke();
-      ctx.restore();
-
-      // Draw Sister Chromatids
-      ctx.save();
-      ctx.fillStyle = chr.color;
-      ctx.shadowColor = chr.color;
-      ctx.shadowBlur = (chr.lag && isMVA) ? 14 : 6;
-
-      // Left Chromatid
-      ctx.beginPath();
-      ctx.roundRect(chrX1 - 10, chrY - 14, 10, 28, 5);
-      ctx.fill();
-
-      // Right Chromatid
-      ctx.beginPath();
-      ctx.roundRect(chrX2, chrY - 14, 10, 28, 5);
-      ctx.fill();
-
-      // Centromere / Kinetochore Ring
-      ctx.fillStyle = '#fff';
-      ctx.beginPath();
-      ctx.arc(chrX1, chrY, 3, 0, Math.PI * 2);
-      ctx.arc(chrX2, chrY, 3, 0, Math.PI * 2);
-      ctx.fill();
-
-      // Label
-      ctx.shadowBlur = 0;
-      ctx.fillStyle = '#f1f5f9';
-      ctx.font = '700 9px JetBrains Mono';
-      ctx.fillText(chr.name, chrX2 + 16, chrY + 3);
-
-      // Lagging Warning Badge
-      if (chr.lag && isMVA && t > 4.5) {
-        ctx.fillStyle = '#f43f5e';
-        ctx.font = '800 10px JetBrains Mono';
-        ctx.fillText('⚠️ LAGGING ANEUPLOID CHROMOSOME', cx - 95, chrY + 30);
-      }
-
-      ctx.restore();
-    });
-
-    // 4. Draw Entrapped Micronucleus at t > 6.0 in MVA
-    if (isMVA && t > 6.0) {
-      ctx.save();
-      ctx.beginPath();
-      ctx.arc(cx, cy + 30, 36, 0, Math.PI * 2);
-      ctx.strokeStyle = '#f43f5e';
-      ctx.lineWidth = 2;
-      ctx.setLineDash([3, 3]);
-      ctx.stroke();
-      ctx.fillStyle = 'rgba(244, 63, 94, 0.15)';
-      ctx.fill();
-
-      ctx.fillStyle = '#f43f5e';
-      ctx.font = '800 10px JetBrains Mono';
-      ctx.fillText('ISOLATED MICRONUCLEUS', cx - 65, cy + 80);
-      ctx.fillText('(DNA Damage & Chromothripsis)', cx - 80, cy + 94);
-      ctx.restore();
-    }
-  }
-
-  // -------------------------------------------------------------
-  // Animation 2: Clonal Variegation & Tissue Dynamics (8s)
-  // -------------------------------------------------------------
-  const clonalSim = {
-    canvas: null,
-    ctx: null,
-    time: 0.0,
-    maxTime: 8.0,
-    isPlaying: true,
-    speed: 1.0,
-    lastTimestamp: 0
-  };
-
-  function initClonalAnim() {
-    clonalSim.canvas = document.getElementById('clonalCanvas');
-    if (!clonalSim.canvas) return;
-    clonalSim.ctx = clonalSim.canvas.getContext('2d');
-
-    const btnPlay = document.getElementById('btnPlayClonal');
-    const btnReset = document.getElementById('btnResetClonal');
-    const range = document.getElementById('clonalTimeline');
-    const speedBtns = document.querySelectorAll('.btn-speed-clonal');
-
-    if (btnPlay) {
-      btnPlay.onclick = () => {
-        clonalSim.isPlaying = !clonalSim.isPlaying;
-        btnPlay.textContent = clonalSim.isPlaying ? '⏸ Pause' : '▶ Play (8s)';
-        btnPlay.classList.toggle('playing', clonalSim.isPlaying);
-      };
-    }
-
-    if (btnReset) {
-      btnReset.onclick = () => {
-        clonalSim.time = 0.0;
-        if (range) range.value = 0;
-      };
-    }
-
-    if (range) {
-      range.oninput = (e) => {
-        clonalSim.time = (parseInt(e.target.value, 10) / 800) * clonalSim.maxTime;
-      };
-    }
-
-    speedBtns.forEach(b => {
-      b.onclick = () => {
-        speedBtns.forEach(x => x.classList.remove('active'));
-        b.classList.add('active');
-        clonalSim.speed = parseFloat(b.dataset.speed);
-      };
-    });
-
-    requestAnimationFrame(renderClonalLoop);
-  }
-
-  function renderClonalLoop(timestamp) {
-    if (!clonalSim.lastTimestamp) clonalSim.lastTimestamp = timestamp;
-    const dt = (timestamp - clonalSim.lastTimestamp) / 1000;
-    clonalSim.lastTimestamp = timestamp;
-
-    if (clonalSim.isPlaying && clonalSim.ctx) {
-      clonalSim.time += dt * clonalSim.speed;
-      if (clonalSim.time > clonalSim.maxTime) clonalSim.time = 0.0;
-      const range = document.getElementById('clonalTimeline');
-      if (range) range.value = Math.floor((clonalSim.time / clonalSim.maxTime) * 800);
-    }
-
-    if (clonalSim.ctx) {
-      drawClonalFrame(clonalSim.time);
-    }
-
-    requestAnimationFrame(renderClonalLoop);
-  }
+    // Modals
+    els.btnCloseVarModal.onclick = () => els.modalVariant.classList.add('hidden');
+    els.btnShortcuts.onclick = () => els.modalHelp.classList.remove('hidden');
+    els.btnCloseHelpModal.onclick = () => els.modalHelp.classList.add('hidden');
 
-  function drawClonalFrame(t) {
-    const ctx = clonalSim.ctx;
-    const w = clonalSim.canvas.width;
-    const h = clonalSim.canvas.height;
-
-    ctx.fillStyle = '#02050c';
-    ctx.fillRect(0, 0, w, h);
-
-    // Compute Clonal Proportions
-    let pEuploid = 100.0;
-    let pTrisomy = 0.0;
-    let pMonosomy = 0.0;
-    let pComplex = 0.0;
-    let stageName = 'Zygote & Cleavage (100% Diploid 46,XX)';
-    let muscleMosaic = 0;
-    let kidneyMosaic = 0;
-
-    if (t < 2.0) {
-      stageName = 'Cleavage / 8-Cell Morula (Diploid Euploid)';
-      pEuploid = 100.0;
-    } else if (t < 4.5) {
-      stageName = 'Blastocyst: Post-Zygotic Somatic Nondisjunction';
-      const prog = (t - 2.0) / 2.5;
-      pTrisomy = prog * 18.0;
-      pMonosomy = prog * 16.0;
-      pEuploid = 100.0 - (pTrisomy + pMonosomy);
-      muscleMosaic = Math.round(prog * 12);
-      kidneyMosaic = Math.round(prog * 15);
-    } else if (t < 7.0) {
-      stageName = 'Gastrula: Mesodermal Lineage Trapping';
-      const prog = (t - 4.5) / 2.5;
-      pTrisomy = 18.0 + prog * 12.0;
-      pMonosomy = 16.0 + prog * 14.0;
-      pComplex = prog * 6.0;
-      pEuploid = 100.0 - (pTrisomy + pMonosomy + pComplex);
-      muscleMosaic = Math.round(12 + prog * 26); // Reaches 38%
-      kidneyMosaic = Math.round(15 + prog * 20); // Reaches 35%
-    } else {
-      stageName = 'Organogenesis: Rhabdomyosarcoma & Nephrocalcinosis Foci';
-      pTrisomy = 30.0;
-      pMonosomy = 30.0;
-      pComplex = 6.0;
-      pEuploid = 34.0;
-      muscleMosaic = 38;
-      kidneyMosaic = 35;
-    }
+    // Keyboard Shortcuts (1-9 and 0)
+    window.onkeydown = (e) => {
+      if (e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT') return;
 
-    // HUD Update
-    document.getElementById('clonalStageName').textContent = stageName;
-    document.getElementById('clonalClock').textContent = `${t.toFixed(2)}s / 8.00s`;
-    document.getElementById('clonalMosaicPct').textContent = `${(100.0 - pEuploid).toFixed(1)}%`;
-
-    document.getElementById('pctEuploid').textContent = `${pEuploid.toFixed(1)}%`;
-    document.getElementById('pctTrisomy').textContent = `${pTrisomy.toFixed(1)}%`;
-    document.getElementById('pctMonosomy').textContent = `${pMonosomy.toFixed(1)}%`;
-    document.getElementById('pctComplex').textContent = `${pComplex.toFixed(1)}%`;
-
-    document.getElementById('barMuscleMosaic').style.width = `${(muscleMosaic / 40) * 100}%`;
-    document.getElementById('txtMuscleMosaic').textContent = `${muscleMosaic}% VAF Mosaicism (Rhabdomyosarcoma Driver)`;
-
-    document.getElementById('barKidneyMosaic').style.width = `${(kidneyMosaic / 40) * 100}%`;
-    document.getElementById('txtKidneyMosaic').textContent = `${kidneyMosaic}% VAF Mosaicism (Congenital Nephrocalcinosis)`;
-
-    // Draw Clonal Branching Phylogenetic Tree
-    ctx.save();
-    const treeX = 80;
-    const treeY = 80;
-
-    ctx.strokeStyle = 'rgba(56, 189, 248, 0.4)';
-    ctx.lineWidth = 3;
-
-    // Root Zygote
-    ctx.beginPath();
-    ctx.arc(treeX, h / 2, 22, 0, Math.PI * 2);
-    ctx.fillStyle = '#0284c7';
-    ctx.fill();
-    ctx.stroke();
-    ctx.fillStyle = '#fff';
-    ctx.font = '700 10px JetBrains Mono';
-    ctx.fillText('ZYGOTE', treeX - 18, h / 2 + 4);
-
-    if (t >= 2.0) {
-      const bProgress = Math.min(1.0, (t - 2.0) / 2.5);
-
-      // Branch 1: Euploid Clone (Blue)
-      ctx.beginPath();
-      ctx.moveTo(treeX + 22, h / 2);
-      ctx.bezierCurveTo(treeX + 150, h / 2, treeX + 250, h / 2 - 120, treeX + 350 * bProgress, h / 2 - 120 * bProgress);
-      ctx.strokeStyle = '#38bdf8';
-      ctx.stroke();
-
-      // Branch 2: Trisomy 15 Clone (Red)
-      ctx.beginPath();
-      ctx.moveTo(treeX + 22, h / 2);
-      ctx.bezierCurveTo(treeX + 150, h / 2, treeX + 250, h / 2, treeX + 350 * bProgress, h / 2);
-      ctx.strokeStyle = '#f43f5e';
-      ctx.stroke();
-
-      // Branch 3: Monosomy 15 Clone (Yellow)
-      ctx.beginPath();
-      ctx.moveTo(treeX + 22, h / 2);
-      ctx.bezierCurveTo(treeX + 150, h / 2, treeX + 250, h / 2 + 120, treeX + 350 * bProgress, h / 2 + 120 * bProgress);
-      ctx.strokeStyle = '#fbbf24';
-      ctx.stroke();
-
-      // Clone Colony Discs
-      if (t >= 4.5) {
-        const c1X = treeX + 360;
-        const c2X = treeX + 360;
-        const c3X = treeX + 360;
-
-        // Euploid Disc
-        ctx.beginPath();
-        ctx.arc(c1X, h / 2 - 120, 28, 0, Math.PI * 2);
-        ctx.fillStyle = 'rgba(56, 189, 248, 0.2)';
-        ctx.fill();
-        ctx.strokeStyle = '#38bdf8';
-        ctx.stroke();
-        ctx.fillStyle = '#38bdf8';
-        ctx.fillText('46,XX Normal', c1X + 36, h / 2 - 120);
-
-        // Trisomy Disc (Muscle / Rhabdomyosarcoma Focus)
-        ctx.beginPath();
-        ctx.arc(c2X, h / 2, 34, 0, Math.PI * 2);
-        ctx.fillStyle = 'rgba(244, 63, 94, 0.25)';
-        ctx.fill();
-        ctx.strokeStyle = '#f43f5e';
-        ctx.stroke();
-        ctx.fillStyle = '#f43f5e';
-        ctx.fillText('47,XX (+15 Trisomy)', c2X + 44, h / 2 - 6);
-        ctx.fillStyle = '#fca5a5';
-        ctx.font = '600 9px JetBrains Mono';
-        ctx.fillText('→ Rhabdomyosarcoma Niche (VAF: 38%)', c2X + 44, h / 2 + 10);
-
-        // Monosomy Disc (Renal / Nephrocalcinosis Focus)
-        ctx.beginPath();
-        ctx.arc(c3X, h / 2 + 120, 30, 0, Math.PI * 2);
-        ctx.fillStyle = 'rgba(251, 191, 36, 0.25)';
-        ctx.fill();
-        ctx.strokeStyle = '#fbbf24';
-        ctx.stroke();
-        ctx.fillStyle = '#fbbf24';
-        ctx.font = '700 10px JetBrains Mono';
-        ctx.fillText('45,XX (-15 Monosomy)', c3X + 40, h / 2 + 116);
-        ctx.fillStyle = '#fde68a';
-        ctx.font = '600 9px JetBrains Mono';
-        ctx.fillText('→ Congenital Nephrocalcinosis (VAF: 35%)', c3X + 40, h / 2 + 130);
+      if (['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'].includes(e.key)) {
+        let idx = parseInt(e.key, 10) - 1;
+        if (e.key === '0') idx = 9;
+        if (els.navTabs[idx]) els.navTabs[idx].click();
+      } else if (e.key === '/') {
+        e.preventDefault();
+        if (els.navTabs[1]) els.navTabs[1].click();
+        els.variantSearch.focus();
+      } else if (e.key === 'Escape') {
+        els.modalVariant.classList.add('hidden');
+        els.modalHelp.classList.add('hidden');
       }
-    }
-    ctx.restore();
-  }
-
-  // -------------------------------------------------------------
-  // Animation 3: Kinetochore Molecular Machinery (5s)
-  // -------------------------------------------------------------
-  const kinetoSim = {
-    canvas: null,
-    ctx: null,
-    time: 0.0,
-    maxTime: 5.0,
-    isPlaying: true,
-    speed: 1.0,
-    lastTimestamp: 0
-  };
-
-  function initKinetoAnim() {
-    kinetoSim.canvas = document.getElementById('kinetoCanvas');
-    if (!kinetoSim.canvas) return;
-    kinetoSim.ctx = kinetoSim.canvas.getContext('2d');
-
-    const btnPlay = document.getElementById('btnPlayKineto');
-    const btnReset = document.getElementById('btnResetKineto');
-    const range = document.getElementById('kinetoTimeline');
-    const speedBtns = document.querySelectorAll('.btn-speed-kineto');
-
-    if (btnPlay) {
-      btnPlay.onclick = () => {
-        kinetoSim.isPlaying = !kinetoSim.isPlaying;
-        btnPlay.textContent = kinetoSim.isPlaying ? '⏸ Pause' : '▶ Play (5s)';
-        btnPlay.classList.toggle('playing', kinetoSim.isPlaying);
-      };
-    }
-
-    if (btnReset) {
-      btnReset.onclick = () => {
-        kinetoSim.time = 0.0;
-        if (range) range.value = 0;
-      };
-    }
-
-    if (range) {
-      range.oninput = (e) => {
-        kinetoSim.time = (parseInt(e.target.value, 10) / 500) * kinetoSim.maxTime;
-      };
-    }
-
-    speedBtns.forEach(b => {
-      b.onclick = () => {
-        speedBtns.forEach(x => x.classList.remove('active'));
-        b.classList.add('active');
-        kinetoSim.speed = parseFloat(b.dataset.speed);
-      };
-    });
-
-    requestAnimationFrame(renderKinetoLoop);
-  }
-
-  function renderKinetoLoop(timestamp) {
-    if (!kinetoSim.lastTimestamp) kinetoSim.lastTimestamp = timestamp;
-    const dt = (timestamp - kinetoSim.lastTimestamp) / 1000;
-    kinetoSim.lastTimestamp = timestamp;
-
-    if (kinetoSim.isPlaying && kinetoSim.ctx) {
-      kinetoSim.time += dt * kinetoSim.speed;
-      if (kinetoSim.time > kinetoSim.maxTime) kinetoSim.time = 0.0;
-      const range = document.getElementById('kinetoTimeline');
-      if (range) range.value = Math.floor((kinetoSim.time / kinetoSim.maxTime) * 500);
-    }
-
-    if (kinetoSim.ctx) {
-      drawKinetoFrame(kinetoSim.time);
-    }
-
-    requestAnimationFrame(renderKinetoLoop);
-  }
-
-  function drawKinetoFrame(t) {
-    const ctx = kinetoSim.ctx;
-    const w = kinetoSim.canvas.width;
-    const h = kinetoSim.canvas.height;
-    const cy = h / 2;
-
-    ctx.fillStyle = '#02050c';
-    ctx.fillRect(0, 0, w, h);
-
-    // Stepping Physics
-    const stepCycle = (t % 1.0) / 1.0;
-    const stepCount = Math.floor(t);
-    const displacementNm = (stepCount * 8.0 + stepCycle * 8.0).toFixed(1);
-    const pullForce = (3.5 + Math.sin(t * 3) * 1.5).toFixed(1);
-    const atpRate = (12.0 + Math.cos(t * 4) * 4.0).toFixed(1);
-
-    document.getElementById('kinetoClock').textContent = `${t.toFixed(2)}s / 5.00s`;
-    document.getElementById('valDisplacement').textContent = `${displacementNm} nm / 40 nm`;
-    document.getElementById('barStepDisplacement').style.width = `${(parseFloat(displacementNm) / 40.0) * 100}%`;
-
-    document.getElementById('valPullForce').textContent = `${pullForce} pN`;
-    document.getElementById('barPullForce').style.width = `${(parseFloat(pullForce) / 7.0) * 100}%`;
-
-    document.getElementById('valAtpRate').textContent = `${atpRate} ATP / sec`;
-    document.getElementById('barAtpRate').style.width = `${(parseFloat(atpRate) / 20.0) * 100}%`;
-
-    // 1. Draw Microtubule Lattice (Tubulin Dimers)
-    const mtY = cy + 80;
-    ctx.save();
-    for (let x = 60; x < w - 60; x += 32) {
-      // Alpha-tubulin
-      ctx.beginPath();
-      ctx.arc(x, mtY, 12, 0, Math.PI * 2);
-      ctx.fillStyle = '#0369a1';
-      ctx.fill();
-      ctx.strokeStyle = '#38bdf8';
-      ctx.stroke();
-
-      // Beta-tubulin
-      ctx.beginPath();
-      ctx.arc(x + 16, mtY, 12, 0, Math.PI * 2);
-      ctx.fillStyle = '#0284c7';
-      ctx.fill();
-      ctx.strokeStyle = '#7dd3fc';
-      ctx.stroke();
-    }
-    ctx.fillStyle = '#38bdf8';
-    ctx.font = '700 10px JetBrains Mono';
-    ctx.fillText('MICROTUBULE PROTOFILAMENT (α/β-Tubulin Dimers, 8.0 nm period)', 60, mtY + 36);
-    ctx.restore();
-
-    // 2. Draw CENPE Kinesin Motor Stepping along Protofilament
-    const motorBaseX = 140 + (parseFloat(displacementNm) / 40.0) * 550;
-    const motorY = mtY - 14;
-
-    ctx.save();
-    // Motor Heads
-    ctx.beginPath();
-    ctx.arc(motorBaseX, motorY, 10, 0, Math.PI * 2);
-    ctx.arc(motorBaseX + 16, motorY - Math.abs(Math.sin(stepCycle * Math.PI)) * 14, 10, 0, Math.PI * 2);
-    ctx.fillStyle = '#fbbf24';
-    ctx.fill();
-    ctx.strokeStyle = '#fef08a';
-    ctx.lineWidth = 2;
-    ctx.stroke();
-
-    // Stalk connecting to Kinetochore Core
-    ctx.beginPath();
-    ctx.moveTo(motorBaseX + 8, motorY - 10);
-    ctx.lineTo(motorBaseX + 8, cy - 60);
-    ctx.strokeStyle = 'rgba(251, 191, 36, 0.8)';
-    ctx.lineWidth = 4;
-    ctx.stroke();
-    ctx.fillStyle = '#fbbf24';
-    ctx.font = '800 10px JetBrains Mono';
-    ctx.fillText('CENPE Kinesin-7 Motor Head (8.0 nm Hand-over-Hand Step)', motorBaseX - 40, motorY - 26);
-    ctx.restore();
-
-    // 3. Draw Outer Kinetochore Scaffold & BUBR1 Kinase Complex
-    const coreX = motorBaseX + 8;
-    const coreY = cy - 80;
-
-    ctx.save();
-    // Outer Plate (Ndc80 / KMN Network)
-    ctx.beginPath();
-    ctx.roundRect(coreX - 70, coreY - 20, 140, 40, 8);
-    ctx.fillStyle = 'rgba(236, 72, 153, 0.2)';
-    ctx.fill();
-    ctx.strokeStyle = '#ec4899';
-    ctx.lineWidth = 2;
-    ctx.stroke();
-
-    ctx.fillStyle = '#fff';
-    ctx.font = '800 10px JetBrains Mono';
-    ctx.fillText('OUTER KINETOCHORE (Ndc80/KMN)', coreX - 60, coreY);
-
-    // BUBR1 Phosphorylation Glow
-    if (Math.sin(t * 8) > 0) {
-      ctx.beginPath();
-      ctx.arc(coreX - 45, coreY + 30, 12, 0, Math.PI * 2);
-      ctx.fillStyle = '#f43f5e';
-      ctx.shadowColor = '#f43f5e';
-      ctx.shadowBlur = 12;
-      ctx.fill();
-      ctx.fillStyle = '#fff';
-      ctx.font = '700 8px JetBrains Mono';
-      ctx.fillText('BUBR1-P', coreX - 62, coreY + 33);
-    }
-
-    // TRIP13 AAA+ Hexamer Ring
-    ctx.beginPath();
-    ctx.arc(coreX + 45, coreY + 30, 14, 0, Math.PI * 2);
-    ctx.fillStyle = 'rgba(168, 85, 247, 0.3)';
-    ctx.strokeStyle = '#a855f7';
-    ctx.lineWidth = 2;
-    ctx.fill();
-    ctx.stroke();
-    ctx.fillStyle = '#d8b4fe';
-    ctx.font = '700 8px JetBrains Mono';
-    ctx.fillText('TRIP13', coreX + 32, coreY + 33);
-    ctx.restore();
+    };
   }
 
-  // -------------------------------------------------------------
-  // App Bootstrapper
-  // -------------------------------------------------------------
-  window.addEventListener('DOMContentLoaded', () => {
-    init();
-    initMitosisAnim();
-    initClonalAnim();
-    initKinetoAnim();
-  });
+  // Launch on DOM ready
+  window.addEventListener('DOMContentLoaded', init);
 })();
-