Spaces:

CubicLabs
/

README

Runtime error

App Files Files Community

Restrictated commited on Jul 5

Commit

5f680c0

verified ·

1 Parent(s): bd6be38

Update index.html

Browse files

Files changed (1) hide show

index.html +397 -15

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Cubic — AGI, AI, and Cybersecurity Research</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&display=swap" rel="stylesheet">
@@ -168,7 +168,7 @@
     margin-bottom:5px;
     letter-spacing:-0.01em;
   }
-  .metric span{font-size:10.5px;color:var(--muted);letter-spacing:0.04em;text-transform:uppercase;font-family:'IBM Plex Mono',monospace;}
   section{margin-bottom:64px;}
   h2{
@@ -184,7 +184,7 @@
   }
   h2::after{content:"";flex:1;height:1px;background:var(--line-bright);}
-  .focus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
   .card{
     position:relative;
     background:linear-gradient(180deg, var(--panel-2), var(--panel));
@@ -293,6 +293,69 @@
   .project-meta span{color:var(--muted);}
   .project-card p.hint{font-size:12px;color:var(--muted);margin:0;font-family:'IBM Plex Mono',monospace;}
   .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
   .team-card{text-align:center;}
   .avatar{
@@ -423,26 +486,21 @@
     </nav>
   </header>
-  <div class="eyebrow">AGI · AI · Cybersecurity Research</div>
   <h1>Accessible AI systems that run on consumer hardware.</h1>
   <p class="tagline">CPU-first training, open-source research, and practical deployment — no data center required.</p>
   <div class="metrics">
-    <div class="metric"><b><span class="pin1" title="pin 1"></span>27</b><span>Models</span></div>
-    <div class="metric"><b>1</b><span>Research paper</span></div>
-    <div class="metric"><b>3</b><span>Team members</span></div>
-    <div class="metric"><b>$0.004</b><span>Min training cost</span></div>
-    <div class="metric"><b>100%</b><span>Open source</span></div>
   </div>
   <section>
     <h2>Research Focus</h2>
     <div class="focus-grid" id="focus-grid">
-      <button type="button" class="card focus-card" data-filter="agi">
-        <b>AGI Research</b>
-        <p>Advancing towards artificial general intelligence.</p>
-        <em>Filter projects →</em>
-      </button>
       <button type="button" class="card focus-card" data-filter="cpu-first code">
         <b>AI Development</b>
         <p>CPU-first architectures and open-source models.</p>
@@ -477,6 +535,148 @@
     <div class="empty-state" id="empty-state">No projects match that search. Press Esc to reset.</div>
   </section>
   <section>
     <h2>Team</h2>
     <div class="team-grid">
@@ -492,7 +692,7 @@
       <li>Dark/Light theme toggle</li>
       <li>Category filtering on projects</li>
       <li>Search across projects</li>
-      <li>Layered 3D sun backdrop</li>
       <li>Keyboard shortcuts (/ to search, Esc to close)</li>
       <li>Print-friendly CSS</li>
       <li>Responsive design</li>
@@ -639,6 +839,188 @@
     });
   });
   /* ---------- cursor glow (perf-guarded, respects reduced motion) ---------- */
   var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
   if (!reduceMotion) {

 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Cubic — AI and Cybersecurity Research</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&display=swap" rel="stylesheet">
     margin-bottom:5px;
     letter-spacing:-0.01em;
   }
+  .metric > span{font-size:11px;color:var(--muted);letter-spacing:0.04em;text-transform:uppercase;font-family:'IBM Plex Mono',monospace;}
   section{margin-bottom:64px;}
   h2{
   }
   h2::after{content:"";flex:1;height:1px;background:var(--line-bright);}
+  .focus-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
   .card{
     position:relative;
     background:linear-gradient(180deg, var(--panel-2), var(--panel));
   .project-meta span{color:var(--muted);}
   .project-card p.hint{font-size:12px;color:var(--muted);margin:0;font-family:'IBM Plex Mono',monospace;}
+  .calc-panel{padding:0;overflow:hidden;}
+  .calc-tabs{
+    display:flex;
+    flex-wrap:wrap;
+    border-bottom:1px solid var(--line);
+    background:var(--panel);
+  }
+  .calc-tab{
+    background:none;
+    border:none;
+    border-right:1px solid var(--line);
+    color:var(--muted);
+    font-family:'IBM Plex Mono',monospace;
+    font-size:11.5px;
+    letter-spacing:0.02em;
+    padding:12px 14px;
+    cursor:pointer;
+    transition:color 0.12s ease, background 0.12s ease;
+  }
+  .calc-tab:hover{color:var(--silk);}
+  .calc-tab.active{color:var(--silk);background:var(--panel-2);box-shadow:inset 0 -2px 0 var(--accent);}
+  .calc-tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
+  .calc-body{padding:20px;}
+  .calc-pane{display:none;}
+  .calc-pane.active{display:block;}
+  .calc-desc{font-size:13px;color:var(--muted);margin:0 0 16px;line-height:1.55;}
+  .calc-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px;}
+  .calc-row label{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--text);}
+  .calc-row input,.calc-row select{
+    width:180px;
+    background:var(--panel);
+    border:1px solid var(--line);
+    color:var(--text);
+    border-radius:6px;
+    padding:8px 10px;
+    font-size:13px;
+    font-family:'IBM Plex Mono',monospace;
+    outline:none;
+    transition:border-color 0.15s ease;
+  }
+  .calc-row input:focus,.calc-row select:focus{border-color:var(--line-bright);}
+  .calc-result{
+    margin-top:16px;
+    padding:13px 14px;
+    background:var(--panel);
+    border:1px solid var(--line-bright);
+    border-radius:6px;
+    font-size:13.5px;
+    color:var(--muted);
+    font-family:'IBM Plex Mono',monospace;
+  }
+  .calc-result b{color:var(--silk);font-size:15px;}
+  .calc-compare{display:flex;flex-direction:column;gap:6px;}
+  .calc-compare .cc-row{display:flex;justify-content:space-between;}
+  .calc-compare .cc-row span:first-child{color:var(--text);}
+  .calc-compare .cc-row span:last-child{color:var(--silk);font-weight:600;}
+  @media (max-width:720px){
+    .calc-row{flex-direction:column;align-items:flex-start;}
+    .calc-row input,.calc-row select{width:100%;}
+  }
   .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
   .team-card{text-align:center;}
   .avatar{
     </nav>
   </header>
+  <div class="eyebrow">AI · Cybersecurity Research</div>
   <h1>Accessible AI systems that run on consumer hardware.</h1>
   <p class="tagline">CPU-first training, open-source research, and practical deployment — no data center required.</p>
   <div class="metrics">
+    <div class="metric"><b><span class="pin1" title="pin 1"></span><span class="count-num" data-target="27" data-suffix="">0</span></b><span>Models</span></div>
+    <div class="metric"><b><span class="count-num" data-target="1" data-suffix="">0</span></b><span>Research paper</span></div>
+    <div class="metric"><b><span class="count-num" data-target="3" data-suffix="">0</span></b><span>Team members</span></div>
+    <div class="metric"><b>$<span class="count-num" data-target="0.004" data-decimals="3" data-suffix="">0</span></b><span>Min training cost</span></div>
+    <div class="metric"><b><span class="count-num" data-target="100" data-suffix="%">0</span></b><span>Open source</span></div>
   </div>
   <section>
     <h2>Research Focus</h2>
     <div class="focus-grid" id="focus-grid">
       <button type="button" class="card focus-card" data-filter="cpu-first code">
         <b>AI Development</b>
         <p>CPU-first architectures and open-source models.</p>
     <div class="empty-state" id="empty-state">No projects match that search. Press Esc to reset.</div>
   </section>
+  <section>
+    <h2>Interactive Tools</h2>
+    <div class="calc-panel card">
+      <div class="calc-tabs" id="calc-tabs" role="tablist" aria-label="Calculator selector">
+        <button type="button" class="calc-tab active" data-calc="training-cost" role="tab" aria-selected="true">Training Cost</button>
+        <button type="button" class="calc-tab" data-calc="inference-speed" role="tab" aria-selected="false">Inference Speed</button>
+        <button type="button" class="calc-tab" data-calc="gguf-size" role="tab" aria-selected="false">GGUF Size</button>
+        <button type="button" class="calc-tab" data-calc="context-length" role="tab" aria-selected="false">Context Length</button>
+        <button type="button" class="calc-tab" data-calc="memory-usage" role="tab" aria-selected="false">Memory Usage</button>
+        <button type="button" class="calc-tab" data-calc="training-time" role="tab" aria-selected="false">Training Time</button>
+        <button type="button" class="calc-tab" data-calc="model-compare" role="tab" aria-selected="false">Model Compare</button>
+      </div>
+      <div class="calc-body">
+        <div class="calc-pane active" data-pane="training-cost">
+          <p class="calc-desc">Extrapolates from AXL's measured $0.004 per-model cost on consumer CPU.</p>
+          <div class="calc-row">
+            <label for="tc-models">Number of models</label>
+            <input type="number" id="tc-models" min="1" step="1" value="27">
+          </div>
+          <div class="calc-result" id="tc-result">Total: <b>$0.108</b></div>
+        </div>
+        <div class="calc-pane" data-pane="inference-speed">
+          <p class="calc-desc">Estimated CPU tokens/sec by parameter count (byte-level transformer, single-thread baseline).</p>
+          <div class="calc-row">
+            <label for="is-params">Model size (params)</label>
+            <select id="is-params">
+              <option value="566000">566K (smallest AXL)</option>
+              <option value="8000000">8M</option>
+              <option value="60000000">60M</option>
+              <option value="150000000">150M</option>
+              <option value="318000000" selected>318M (largest AXL)</option>
+            </select>
+          </div>
+          <div class="calc-row">
+            <label for="is-threads">CPU threads</label>
+            <input type="number" id="is-threads" min="1" max="64" step="1" value="4">
+          </div>
+          <div class="calc-result" id="is-result">Estimated: <b>— tok/s</b></div>
+        </div>
+        <div class="calc-pane" data-pane="gguf-size">
+          <p class="calc-desc">File size from parameter count and quantization level.</p>
+          <div class="calc-row">
+            <label for="gg-params">Parameters</label>
+            <input type="number" id="gg-params" min="1" step="1" value="318000000">
+          </div>
+          <div class="calc-row">
+            <label for="gg-quant">Quantization</label>
+            <select id="gg-quant">
+              <option value="4">Q4 (4-bit)</option>
+              <option value="5">Q5 (5-bit)</option>
+              <option value="8" selected>Q8 (8-bit)</option>
+              <option value="16">F16 (16-bit)</option>
+              <option value="32">F32 (32-bit)</option>
+            </select>
+          </div>
+          <div class="calc-result" id="gg-result">File size: <b>—</b></div>
+        </div>
+        <div class="calc-pane" data-pane="context-length">
+          <p class="calc-desc">KV-cache memory required for a given context window.</p>
+          <div class="calc-row">
+            <label for="cl-tokens">Context length (tokens)</label>
+            <input type="number" id="cl-tokens" min="1" step="1" value="4096">
+          </div>
+          <div class="calc-row">
+            <label for="cl-layers">Layers</label>
+            <input type="number" id="cl-layers" min="1" step="1" value="12">
+          </div>
+          <div class="calc-row">
+            <label for="cl-dims">Hidden dim</label>
+            <input type="number" id="cl-dims" min="1" step="1" value="768">
+          </div>
+          <div class="calc-result" id="cl-result">KV-cache: <b>—</b></div>
+        </div>
+        <div class="calc-pane" data-pane="memory-usage">
+          <p class="calc-desc">Total estimated RAM: weights at your chosen quantization plus KV-cache overhead.</p>
+          <div class="calc-row">
+            <label for="mu-params">Parameters</label>
+            <input type="number" id="mu-params" min="1" step="1" value="318000000">
+          </div>
+          <div class="calc-row">
+            <label for="mu-quant">Quantization</label>
+            <select id="mu-quant">
+              <option value="4">Q4 (4-bit)</option>
+              <option value="8" selected>Q8 (8-bit)</option>
+              <option value="16">F16 (16-bit)</option>
+            </select>
+          </div>
+          <div class="calc-row">
+            <label for="mu-context">Context (tokens)</label>
+            <input type="number" id="mu-context" min="0" step="1" value="4096">
+          </div>
+          <div class="calc-result" id="mu-result">Estimated RAM: <b>—</b></div>
+        </div>
+        <div class="calc-pane" data-pane="training-time">
+          <p class="calc-desc">Backs out training time from the $0.004/model anchor at a given effective hourly CPU rate.</p>
+          <div class="calc-row">
+            <label for="tt-rate">CPU cost ($ / hour)</label>
+            <input type="number" id="tt-rate" min="0.001" step="0.001" value="0.05">
+          </div>
+          <div class="calc-row">
+            <label for="tt-cost">Cost per model ($)</label>
+            <input type="number" id="tt-cost" min="0.0001" step="0.001" value="0.004">
+          </div>
+          <div class="calc-result" id="tt-result">Estimated time: <b>—</b></div>
+        </div>
+        <div class="calc-pane" data-pane="model-compare">
+          <p class="calc-desc">Side-by-side comparison of two AXL model sizes.</p>
+          <div class="calc-row">
+            <label for="mc-a">Model A (params)</label>
+            <select id="mc-a">
+              <option value="566000" selected>566K</option>
+              <option value="8000000">8M</option>
+              <option value="60000000">60M</option>
+              <option value="150000000">150M</option>
+              <option value="318000000">318M</option>
+            </select>
+          </div>
+          <div class="calc-row">
+            <label for="mc-b">Model B (params)</label>
+            <select id="mc-b">
+              <option value="566000">566K</option>
+              <option value="8000000">8M</option>
+              <option value="60000000">60M</option>
+              <option value="150000000">150M</option>
+              <option value="318000000" selected>318M</option>
+            </select>
+          </div>
+          <div class="calc-result calc-compare" id="mc-result"></div>
+        </div>
+      </div>
+    </div>
+  </section>
   <section>
     <h2>Team</h2>
     <div class="team-grid">
       <li>Dark/Light theme toggle</li>
       <li>Category filtering on projects</li>
       <li>Search across projects</li>
+      <li>Animated counters on metrics</li>
       <li>Keyboard shortcuts (/ to search, Esc to close)</li>
       <li>Print-friendly CSS</li>
       <li>Responsive design</li>
     });
   });
+  /* ---------- calculator tabs ---------- */
+  var calcTabs = Array.prototype.slice.call(document.querySelectorAll('.calc-tab'));
+  var calcPanes = Array.prototype.slice.call(document.querySelectorAll('.calc-pane'));
+  calcTabs.forEach(function(tab){
+    tab.addEventListener('click', function(){
+      var target = tab.dataset.calc;
+      calcTabs.forEach(function(t){
+        t.classList.toggle('active', t === tab);
+        t.setAttribute('aria-selected', t === tab ? 'true' : 'false');
+      });
+      calcPanes.forEach(function(p){
+        p.classList.toggle('active', p.dataset.pane === target);
+      });
+    });
+  });
+  function fmtBytes(bytes){
+    if (bytes < 1024) return bytes.toFixed(0) + ' B';
+    var units = ['KB','MB','GB','TB'];
+    var val = bytes;
+    var i = -1;
+    do { val /= 1024; i++; } while (val >= 1024 && i < units.length - 1);
+    return val.toFixed(2) + ' ' + units[i];
+  }
+  function fmtParams(n){
+    if (n >= 1e9) return (n / 1e9).toFixed(2) + 'B';
+    if (n >= 1e6) return (n / 1e6).toFixed(1) + 'M';
+    if (n >= 1e3) return (n / 1e3).toFixed(0) + 'K';
+    return String(n);
+  }
+  /* Training Cost — extrapolates from the $0.004/model measured anchor */
+  var tcModels = document.getElementById('tc-models');
+  var tcResult = document.getElementById('tc-result');
+  function calcTrainingCost(){
+    var n = parseFloat(tcModels.value) || 0;
+    var total = n * 0.004;
+    tcResult.innerHTML = 'Total: <b>$' + total.toFixed(3) + '</b>';
+  }
+  tcModels.addEventListener('input', calcTrainingCost);
+  /* Inference Speed — heuristic tok/s from param count + thread count on CPU */
+  var isParams = document.getElementById('is-params');
+  var isThreads = document.getElementById('is-threads');
+  var isResult = document.getElementById('is-result');
+  function calcInferenceSpeed(){
+    var params = parseFloat(isParams.value) || 1;
+    var threads = Math.max(1, parseFloat(isThreads.value) || 1);
+    /* baseline: ~40 tok/s per thread for a 1M-param byte-level model,
+       scaling down roughly with sqrt of param count growth */
+    var base = 40 / Math.sqrt(params / 1e6);
+    var estimate = base * Math.pow(threads, 0.7);
+    isResult.innerHTML = 'Estimated: <b>' + estimate.toFixed(1) + ' tok/s</b>';
+  }
+  isParams.addEventListener('change', calcInferenceSpeed);
+  isThreads.addEventListener('input', calcInferenceSpeed);
+  /* GGUF File Size — params × bytes-per-param at chosen quantization + ~5% metadata overhead */
+  var ggParams = document.getElementById('gg-params');
+  var ggQuant = document.getElementById('gg-quant');
+  var ggResult = document.getElementById('gg-result');
+  function calcGGUFSize(){
+    var params = parseFloat(ggParams.value) || 0;
+    var bitsPerParam = parseFloat(ggQuant.value) || 8;
+    var bytes = params * (bitsPerParam / 8) * 1.05;
+    ggResult.innerHTML = 'File size: <b>' + fmtBytes(bytes) + '</b>';
+  }
+  ggParams.addEventListener('input', calcGGUFSize);
+  ggQuant.addEventListener('change', calcGGUFSize);
+  /* Context Length — KV-cache = 2 (K+V) × layers × context × hidden_dim × 2 bytes (fp16) */
+  var clTokens = document.getElementById('cl-tokens');
+  var clLayers = document.getElementById('cl-layers');
+  var clDims = document.getElementById('cl-dims');
+  var clResult = document.getElementById('cl-result');
+  function calcContextLength(){
+    var tokens = parseFloat(clTokens.value) || 0;
+    var layers = parseFloat(clLayers.value) || 0;
+    var dims = parseFloat(clDims.value) || 0;
+    var bytes = 2 * layers * tokens * dims * 2;
+    clResult.innerHTML = 'KV-cache: <b>' + fmtBytes(bytes) + '</b>';
+  }
+  [clTokens, clLayers, clDims].forEach(function(el){ el.addEventListener('input', calcContextLength); });
+  /* Memory Usage — weights at quantization + KV-cache overhead (assumes 12 layers / 768 dim default arch) */
+  var muParams = document.getElementById('mu-params');
+  var muQuant = document.getElementById('mu-quant');
+  var muContext = document.getElementById('mu-context');
+  var muResult = document.getElementById('mu-result');
+  function calcMemoryUsage(){
+    var params = parseFloat(muParams.value) || 0;
+    var bitsPerParam = parseFloat(muQuant.value) || 8;
+    var context = parseFloat(muContext.value) || 0;
+    var weightBytes = params * (bitsPerParam / 8);
+    var kvBytes = 2 * 12 * context * 768 * 2; /* approximate default arch */
+    var total = weightBytes + kvBytes;
+    muResult.innerHTML = 'Estimated RAM: <b>' + fmtBytes(total) + '</b>';
+  }
+  [muParams, muQuant, muContext].forEach(function(el){ el.addEventListener('input', calcMemoryUsage); el.addEventListener('change', calcMemoryUsage); });
+  /* Training Time — time = cost / hourly rate */
+  var ttRate = document.getElementById('tt-rate');
+  var ttCost = document.getElementById('tt-cost');
+  var ttResult = document.getElementById('tt-result');
+  function calcTrainingTime(){
+    var rate = parseFloat(ttRate.value) || 0.0001;
+    var cost = parseFloat(ttCost.value) || 0;
+    var hours = cost / rate;
+    var minutes = hours * 60;
+    var label = minutes < 60 ? minutes.toFixed(1) + ' min' : hours.toFixed(2) + ' hr';
+    ttResult.innerHTML = 'Estimated time: <b>' + label + '</b>';
+  }
+  [ttRate, ttCost].forEach(function(el){ el.addEventListener('input', calcTrainingTime); });
+  /* Model Comparison — side by side on params, est. GGUF (Q8) size, and est. inference speed */
+  var mcA = document.getElementById('mc-a');
+  var mcB = document.getElementById('mc-b');
+  var mcResult = document.getElementById('mc-result');
+  function speedFor(params){ return 40 / Math.sqrt(params / 1e6) * Math.pow(4, 0.7); }
+  function calcModelCompare(){
+    var a = parseFloat(mcA.value) || 1;
+    var b = parseFloat(mcB.value) || 1;
+    var sizeA = a * 1 * 1.05, sizeB = b * 1 * 1.05; /* Q8 */
+    var speedA = speedFor(a), speedB = speedFor(b);
+    mcResult.innerHTML =
+      '<div class="cc-row"><span>Parameters</span><span>' + fmtParams(a) + ' vs ' + fmtParams(b) + '</span></div>' +
+      '<div class="cc-row"><span>Est. GGUF size (Q8)</span><span>' + fmtBytes(sizeA) + ' vs ' + fmtBytes(sizeB) + '</span></div>' +
+      '<div class="cc-row"><span>Est. inference (4 threads)</span><span>' + speedA.toFixed(1) + ' vs ' + speedB.toFixed(1) + ' tok/s</span></div>' +
+      '<div class="cc-row"><span>Training cost</span><span>$0.004 vs $0.004</span></div>';
+  }
+  [mcA, mcB].forEach(function(el){ el.addEventListener('change', calcModelCompare); });
+  /* run all calculators once on load so panes aren't showing placeholder dashes */
+  calcTrainingCost();
+  calcInferenceSpeed();
+  calcGGUFSize();
+  calcContextLength();
+  calcMemoryUsage();
+  calcTrainingTime();
+  calcModelCompare();
+  /* ---------- animated metric counters ---------- */
+  function animateCounters(){
+    var nums = Array.prototype.slice.call(document.querySelectorAll('.count-num'));
+    var duration = 900;
+    nums.forEach(function(el){
+      var target = parseFloat(el.dataset.target);
+      var decimals = el.dataset.decimals ? parseInt(el.dataset.decimals, 10) : 0;
+      var suffix = el.dataset.suffix || '';
+      if (isNaN(target)) return;
+      var start = null;
+      function step(ts){
+        if (start === null) start = ts;
+        var progress = Math.min((ts - start) / duration, 1);
+        var eased = 1 - Math.pow(1 - progress, 3);
+        var value = target * eased;
+        el.textContent = value.toFixed(decimals) + suffix;
+        if (progress < 1) {
+          requestAnimationFrame(step);
+        } else {
+          el.textContent = target.toFixed(decimals) + suffix;
+        }
+      }
+      requestAnimationFrame(step);
+    });
+  }
+  var reduceMotionCounters = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  if (reduceMotionCounters) {
+    document.querySelectorAll('.count-num').forEach(function(el){
+      var target = parseFloat(el.dataset.target);
+      var decimals = el.dataset.decimals ? parseInt(el.dataset.decimals, 10) : 0;
+      el.textContent = target.toFixed(decimals) + (el.dataset.suffix || '');
+    });
+  } else {
+    animateCounters();
+  }
   /* ---------- cursor glow (perf-guarded, respects reduced motion) ---------- */
   var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
   if (!reduceMotion) {