Update index.html

index.html

@@ -7,24 +7,25 @@
   <script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
   <style>
     :root {
-      --bg: #08080a;
-      --bg2: #101014;
+      --bg: #050506;
+      --bg2: #0b0b0d;
       --surface: rgba(255,255,255,0.035);
-      --surface-2: rgba(255,255,255,0.05);
+      --surface2: rgba(255,255,255,0.06);
       --border: rgba(255,255,255,0.08);
-      --border-2: rgba(255,255,255,0.13);
-      --text: #f3f3f5;
-      --muted: #a0a0aa;
-      --muted-2: #73737d;
-      --silver: #e0e2e8;
-      --silver-2: #c2c6cf;
-      --silver-3: #8f949f;
-      --shadow: 0 24px 70px rgba(0,0,0,0.48);
+      --border2: rgba(255,255,255,0.13);
+      --text: #f4f4f6;
+      --muted: #a3a3ad;
+      --muted2: #7d7d88;
+      --silver: #e5e7eb;
+      --silver2: #c8ccd5;
+      --silver3: #9ca3af;
+      --shadow: 0 24px 70px rgba(0,0,0,0.52);
       --radius: 24px;
     }
 
     * { box-sizing: border-box; }
     html { scroll-behavior: smooth; }
+
     body {
       margin: 0;
       min-height: 100vh;
@@ -32,24 +33,20 @@
       font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
       color: var(--text);
       background:
-        radial-gradient(circle at top left, rgba(255,255,255,0.08), transparent 27%),
+        radial-gradient(circle at top left, rgba(255,255,255,0.07), transparent 28%),
         radial-gradient(circle at bottom right, rgba(255,255,255,0.05), transparent 24%),
-        linear-gradient(180deg, #08080a 0%, #060607 100%);
+        linear-gradient(180deg, #070708 0%, #040405 100%);
     }
 
     .app {
-      max-width: 1440px;
+      max-width: 1460px;
       margin: 0 auto;
       display: grid;
       gap: 18px;
     }
 
-    .hero,
-    .panel,
-    .chart-card,
-    .list-card,
-    .info-card {
-      background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
+    .hero, .panel, .chart-card, .list-card, .info-card {
+      background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
       border: 1px solid var(--border);
       box-shadow: var(--shadow);
       backdrop-filter: blur(12px);
@@ -58,20 +55,20 @@
     .hero {
       border-radius: calc(var(--radius) + 6px);
       padding: 26px;
-      position: relative;
       overflow: hidden;
+      position: relative;
     }
 
     .hero::after {
       content: "";
       position: absolute;
       inset: 0;
-      background: linear-gradient(90deg, rgba(255,255,255,0.03), transparent 38%, rgba(255,255,255,0.02));
+      background: linear-gradient(90deg, rgba(255,255,255,0.035), transparent 36%, rgba(255,255,255,0.02));
       pointer-events: none;
     }
 
     .eyebrow {
-      color: var(--silver-2);
+      color: var(--silver2);
       text-transform: uppercase;
       letter-spacing: 0.22em;
       font-size: 11px;
@@ -101,7 +98,7 @@
 
     .layout {
       display: grid;
-      grid-template-columns: 330px minmax(0, 1fr);
+      grid-template-columns: 334px minmax(0, 1fr);
       gap: 18px;
       align-items: start;
     }
@@ -113,10 +110,7 @@
       top: 18px;
     }
 
-    .panel h2,
-    .chart-card h2,
-    .list-card h2,
-    .info-card h2 {
+    .panel h2, .chart-card h2, .list-card h2, .info-card h2 {
       margin: 0 0 14px;
       font-size: 14px;
       letter-spacing: 0.12em;
@@ -130,7 +124,7 @@
     .section-label {
       display: block;
       margin-bottom: 10px;
-      color: var(--silver-2);
+      color: var(--silver2);
       font-size: 12px;
       text-transform: uppercase;
       letter-spacing: 0.12em;
@@ -142,8 +136,7 @@
       gap: 8px;
     }
 
-    button,
-    .chip {
+    button, .chip {
       border: 1px solid rgba(255,255,255,0.10);
       background: rgba(255,255,255,0.03);
       color: var(--muted);
@@ -156,21 +149,35 @@
       user-select: none;
     }
 
-    button:hover,
-    .chip:hover {
+    button:hover, .chip:hover {
       border-color: rgba(255,255,255,0.24);
       color: var(--text);
       transform: translateY(-1px);
     }
 
-    button.active,
-    .chip.active {
+    button.active, .chip.active {
       color: #fafafa;
-      border-color: rgba(224,226,232,0.48);
-      background: linear-gradient(180deg, rgba(224,226,232,0.18), rgba(224,226,232,0.08));
+      border-color: rgba(229,231,235,0.48);
+      background: linear-gradient(180deg, rgba(229,231,235,0.18), rgba(229,231,235,0.08));
       box-shadow: 0 0 0 1px rgba(255,255,255,0.03) inset;
     }
 
+    .search {
+      width: 100%;
+      border: 1px solid rgba(255,255,255,0.10);
+      background: rgba(255,255,255,0.03);
+      color: var(--text);
+      border-radius: 16px;
+      padding: 12px 14px;
+      outline: none;
+      font: inherit;
+    }
+
+    .search:focus {
+      border-color: rgba(229,231,235,0.26);
+      background: rgba(255,255,255,0.05);
+    }
+
     .stat-grid {
       display: grid;
       grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -186,7 +193,7 @@
     }
 
     .stat .k {
-      color: var(--muted-2);
+      color: var(--muted2);
       font-size: 11px;
       text-transform: uppercase;
       letter-spacing: 0.12em;
@@ -201,7 +208,7 @@
     }
 
     .small-note {
-      color: var(--muted-2);
+      color: var(--muted2);
       font-size: 12px;
       line-height: 1.6;
       margin-top: 10px;
@@ -211,8 +218,8 @@
       border-radius: var(--radius);
       padding: 18px 18px 12px;
       min-height: 690px;
-      position: relative;
       overflow: hidden;
+      position: relative;
     }
 
     .chart-top {
@@ -241,8 +248,8 @@
     .badge {
       padding: 9px 12px;
       border-radius: 999px;
-      background: rgba(224,226,232,0.08);
-      border: 1px solid rgba(224,226,232,0.16);
+      background: rgba(229,231,235,0.08);
+      border: 1px solid rgba(229,231,235,0.16);
       color: var(--silver);
       font-size: 13px;
       white-space: nowrap;
@@ -256,48 +263,21 @@
       gap: 10px;
       padding: 9px 12px;
       border-radius: 999px;
-      border: 1px solid rgba(224,226,232,0.16);
-      background: rgba(224,226,232,0.06);
-      color: #efeff2;
+      border: 1px solid rgba(229,231,235,0.16);
+      background: rgba(229,231,235,0.06);
+      color: #f2f2f6;
       font-size: 12px;
-      letter-spacing: 0.01em;
     }
 
     .callout .dot {
       width: 9px;
       height: 9px;
       border-radius: 50%;
-      background: linear-gradient(180deg, #f7f7f9, #b9bec8);
+      background: linear-gradient(180deg, #fafafa, #bcc2cc);
       box-shadow: 0 0 14px rgba(255,255,255,0.22);
       flex: 0 0 auto;
     }
 
-    .filters {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-      margin: 10px 0 16px;
-    }
-
-    .search {
-      width: min(100%, 420px);
-      border: 1px solid rgba(255,255,255,0.10);
-      background: rgba(255,255,255,0.03);
-      color: var(--text);
-      border-radius: 16px;
-      padding: 12px 14px;
-      outline: none;
-      font: inherit;
-      transition: border-color 0.15s ease, background 0.15s ease;
-    }
-
-    .search::placeholder { color: var(--muted-2); }
-
-    .search:focus {
-      border-color: rgba(224,226,232,0.28);
-      background: rgba(255,255,255,0.05);
-    }
-
     canvas {
       width: 100% !important;
       height: 560px !important;
@@ -323,7 +303,7 @@
     }
 
     .info-card .label {
-      color: var(--muted-2);
+      color: var(--muted2);
       font-size: 11px;
       text-transform: uppercase;
       letter-spacing: 0.12em;
@@ -344,13 +324,13 @@
     table {
       width: 100%;
       border-collapse: collapse;
-      min-width: 900px;
+      min-width: 980px;
     }
 
     thead th {
       position: sticky;
       top: 0;
-      background: rgba(12,12,14,0.96);
+      background: rgba(8,8,10,0.96);
       backdrop-filter: blur(8px);
       color: var(--muted);
       text-align: left;
@@ -368,13 +348,11 @@
 
     tbody tr {
       border-bottom: 1px solid rgba(255,255,255,0.06);
-      transition: background 0.12s ease, transform 0.12s ease;
+      transition: background 0.12s ease;
       cursor: pointer;
     }
 
-    tbody tr:hover {
-      background: rgba(224,226,232,0.05);
-    }
+    tbody tr:hover { background: rgba(229,231,235,0.05); }
 
     tbody td {
       padding: 13px 14px;
@@ -383,61 +361,43 @@
       vertical-align: middle;
     }
 
-    tbody td.muted {
-      color: var(--muted);
-    }
-
-    .above {
-      color: #f2f2f6;
-      text-shadow: 0 0 10px rgba(255,255,255,0.08);
-    }
+    tbody td.muted { color: var(--muted); }
+    .above { color: #f2f2f7; }
+    .below { color: #8f949d; }
 
-    .below {
-      color: #8f949d;
-    }
-
-    .pill-up {
+    .pill-up, .pill-down {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       padding: 5px 10px;
       border-radius: 999px;
-      border: 1px solid rgba(224,226,232,0.18);
-      background: rgba(224,226,232,0.08);
-      color: var(--silver);
       font-size: 11px;
       font-weight: 700;
       letter-spacing: 0.03em;
     }
 
+    .pill-up {
+      border: 1px solid rgba(229,231,235,0.18);
+      background: rgba(229,231,235,0.08);
+      color: var(--silver);
+    }
+
     .pill-down {
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      padding: 5px 10px;
-      border-radius: 999px;
       border: 1px solid rgba(255,255,255,0.08);
       background: rgba(255,255,255,0.03);
       color: var(--muted);
-      font-size: 11px;
-      font-weight: 700;
-      letter-spacing: 0.03em;
     }
 
     .footer-note {
-      color: var(--muted-2);
+      color: var(--muted2);
       font-size: 12px;
       line-height: 1.6;
       padding-top: 2px;
     }
 
     @media (max-width: 1120px) {
-      .layout {
-        grid-template-columns: 1fr;
-      }
-      .panel {
-        position: static;
-      }
+      .layout { grid-template-columns: 1fr; }
+      .panel { position: static; }
       canvas { height: 520px !important; }
       .info-grid { grid-template-columns: 1fr; }
     }
@@ -491,7 +451,7 @@
         <div class="section">
           <span class="section-label">Legend</span>
           <div class="small-note">
-            Silver points above the line are outperforming the size trend. Gray points are below it.
+            Silver points above the line are outperforming the size trend. Darker gray points are below it.
           </div>
         </div>
       </aside>
@@ -553,21 +513,21 @@
   </div>
 
   <script>
+    // Use x/y for scatter points. That is the important fix.
+    // Add more models by copying one object and changing the fields.
     const MODELS = [
       { name: 'SmolLM2-135M', org: 'HuggingFace', params: 135000000, arc_easy: 0.5858585858585859, arc_challenge: 0.2960750853242321, piqa: 0.6849836779107725, hellaswag: 0.43108942441744674, avg_4: 0.5177858993388165, url: 'https://huggingface.co/HuggingFaceTB/SmolLM2-135M' },
       { name: 'GPT-X2-125M', org: 'AxiomicLabs', params: 125081664, arc_easy: 0.5151515151515151, arc_challenge: 0.2764505119453925, piqa: 0.6751904243743199, hellaswag: 0.40529774945230035, avg_4: 0.4898234185711896, url: 'https://huggingface.co/AxiomicLabs/GPT-X2-125M' },
       { name: 'GPT-X-125M', org: 'AxiomicLabs', params: 124561728, arc_easy: 0.5075757575757576, arc_challenge: 0.2687713310580205, piqa: 0.6517954298150164, hellaswag: 0.36496713802031466, avg_4: 0.464060299783275, url: 'https://huggingface.co/AxiomicLabs/GPT-X-125M' },
-      { name: 'MobileLLM-R1-140M-base', org: 'Facebook', params: 140000000, arc_easy: 0.4992424242424242, arc_challenge: 0.24744027303754265, piqa: 0.6322089227421109, hellaswag: 0.3384379853648824, avg_4: 0.443830, url: 'https://huggingface.co/facebook/MobileLLM-R1-140M-base' },
+      { name: 'MobileLLM-R1-140M-base', org: 'Facebook', params: 140000000, arc_easy: 0.4992424242424242, arc_challenge: 0.24744027303754265, piqa: 0.6322089227421109, hellaswag: 0.3384379853648824, avg_4: 0.44383, url: 'https://huggingface.co/facebook/MobileLLM-R1-140M-base' },
       { name: 'Supra-50M-Base', org: 'SupraLabs', params: 51786240, arc_easy: 0.460016835016835, arc_challenge: 0.25, piqa: 0.6207834602829162, hellaswag: 0.31776538538139815, avg_4: 0.4252144857313513, url: 'https://huggingface.co/SupraLabs/Supra-50M-Base' },
-      { name: 'Shards-1', org: 'CompactAI', params: 54500000, arc_easy: 0.4112, arc_challenge: 0.2099, piqa: 0.5822, hellaswag: 0.2920, avg_4: 0.3698, url: 'https://huggingface.co/CompactAI-O/Shard-1' },
-
       { name: 'Supra-50M-Instruct', org: 'SupraLabs', params: 51786240, arc_easy: 0.4440, arc_challenge: 0.2730, piqa: 0.5947, hellaswag: 0.2909, avg_4: 0.4030, url: 'https://huggingface.co/SupraLabs/Supra-50M-Instruct' },
       { name: 'Supra-50M-Reasoning', org: 'SupraLabs', params: 51786240, arc_easy: 0.4444, arc_challenge: 0.2739, piqa: 0.5930, hellaswag: 0.2910, avg_4: 0.4006, url: 'https://huggingface.co/SupraLabs/Supra-50M-Reasoning' },
       { name: 'SmolLM-135M', org: 'HuggingFace', params: 135000000, arc_easy: 0.5631, arc_challenge: 0.2901, piqa: 0.6828, hellaswag: 0.4270, avg_4: 0.4908, url: 'https://huggingface.co/HuggingFaceTB/SmolLM-135M' },
       { name: 'OPT-125M', org: 'Facebook', params: 125000000, arc_easy: 0.4028, arc_challenge: 0.2270, piqa: 0.6224, hellaswag: 0.3131, avg_4: 0.3913, url: 'https://huggingface.co/facebook/opt-125m' },
       { name: 'GPT-2', org: 'OpenAI', params: 124000000, arc_easy: 0.3935, arc_challenge: 0.2235, piqa: 0.6208, hellaswag: 0.3126, avg_4: 0.3892, url: 'https://huggingface.co/openai-community/gpt2' },
-      { name: 'Spark-5M-Base-v4', org: 'LH-Tech-AI', params: 5000000, arc_easy: 0.3316, arc_challenge: 0.2150, piqa: 0.5332, hellaswag: 0.2703, avg_4: 0.3250, url: 'https://huggingface.co/LH-Tech-AI/Spark-5M-Base-v4' },
 
+      { name: 'Spark-5M-Base-v4', org: 'LH-Tech-AI', params: 5000000, arc_easy: 0.3316, arc_challenge: 0.2150, piqa: 0.5332, hellaswag: 0.2703, avg_4: 0.3250, url: 'https://huggingface.co/LH-Tech-AI/Spark-5M-Base-v4' },
       { name: 'Supra-Mini-v5-8M', org: 'SupraLabs', params: 7870000, arc_easy: 0.3321, arc_challenge: 0.2116, piqa: 0.5403, hellaswag: 0.2637, avg_4: 0.3219, url: 'https://huggingface.co/SupraLabs/Supra-Mini-v5-8M' },
       { name: 'Pythia-70M', org: 'EleutherAI', params: 70000000, arc_easy: 0.3165, arc_challenge: 0.2363, piqa: 0.5348, hellaswag: 0.2749, avg_4: 0.3657, url: 'https://huggingface.co/EleutherAI/pythia-70m' },
       { name: 'Supra-Mini-v4-2M', org: 'SupraLabs', params: 2620000, arc_easy: 0.3098, arc_challenge: 0.2150, piqa: 0.5190, hellaswag: 0.2552, avg_4: 0.3188, url: 'https://huggingface.co/SupraLabs/Supra-Mini-v4-2M' },
@@ -640,9 +600,9 @@
       return String(n);
     };
 
-    const toPct = (v) => (v * 100);
+    const toPct = (v) => v * 100;
 
-    const linearRegression = (points) => {
+    function linearRegression(points) {
       const n = points.length;
       let sumX = 0, sumY = 0, sumXY = 0, sumXX = 0;
       for (const p of points) {
@@ -655,44 +615,39 @@
       const slope = Math.abs(denom) < 1e-12 ? 0 : (n * sumXY - sumX * sumY) / denom;
       const intercept = n ? (sumY - slope * sumX) / n : 0;
       return { slope, intercept };
-    };
-
-    const getScore = (m, key) => (m[key] ?? null);
+    }
 
-    const getVisibleModels = () => {
+    function getVisibleModels() {
       const q = activeSearch.trim().toLowerCase();
       return MODELS.filter(m => {
-        const s = getScore(m, activeBenchmark);
-        if (s === null || !Number.isFinite(m.params)) return false;
+        const s = m[activeBenchmark];
+        if (s === null || s === undefined || !Number.isFinite(m.params)) return false;
         if (!q) return true;
-        return (
-          m.name.toLowerCase().includes(q) ||
-          m.org.toLowerCase().includes(q)
-        );
+        return m.name.toLowerCase().includes(q) || m.org.toLowerCase().includes(q);
       });
-    };
+    }
 
-    const computeLoss = (data, slope, intercept) => {
+    function computeLoss(data, slope, intercept) {
       const residuals = data.map(d => d.y - (slope * d.x + intercept));
       const mse = residuals.reduce((a, b) => a + b * b, 0) / residuals.length;
       const rmse = Math.sqrt(mse);
       return { mse, rmse, residuals };
-    };
+    }
 
-    const renderBenchmarkButtons = () => {
+    function renderBenchmarkButtons() {
       const box = document.getElementById('benchmarkButtons');
-      box.innerHTML = BENCHMARKS.map(b =>
-        `<button class="${b.key === activeBenchmark ? 'active' : ''}" data-key="${b.key}">${b.label}</button>`
-      ).join('');
+      box.innerHTML = BENCHMARKS.map(b => `
+        <button class="${b.key === activeBenchmark ? 'active' : ''}" data-key="${b.key}">${b.label}</button>
+      `).join('');
       box.querySelectorAll('button').forEach(btn => {
         btn.addEventListener('click', () => {
           activeBenchmark = btn.dataset.key;
           render();
         });
       });
-    };
+    }
 
-    const renderTable = (data) => {
+    function renderTable(data) {
       const tbody = document.getElementById('modelTable');
       const rows = [...data].sort((a, b) => {
         if (sortKey === 'name') return a.name.localeCompare(b.name);
@@ -724,9 +679,9 @@
           if (url) window.open(url, '_blank', 'noopener,noreferrer');
         });
       });
-    };
+    }
 
-    const updateStats = (slope, intercept, mse, rmse, count) => {
+    function updateStats(slope, intercept, mse, rmse, count) {
       document.getElementById('statSlope').textContent = slope.toFixed(4);
       document.getElementById('statIntercept').textContent = intercept.toFixed(2);
       document.getElementById('statMSE').textContent = mse.toFixed(4);
@@ -735,18 +690,22 @@
       document.getElementById('infoBenchmark').textContent = BENCHMARK_NAMES[activeBenchmark] || activeBenchmark;
       document.getElementById('infoCount').textContent = String(count);
       document.getElementById('infoLoss').textContent = `MSE ${mse.toFixed(4)} · RMSE ${rmse.toFixed(2)}`;
-    };
+    }
 
     function render() {
       renderBenchmarkButtons();
 
-      const data = getVisibleModels().map(m => ({
+      const models = getVisibleModels();
+
+      // IMPORTANT: scatter data must use x/y, not x/score.
+      const data = models.map(m => ({
         name: m.name,
         org: m.org,
         params: m.params,
         score: toPct(m[activeBenchmark]),
         url: m.url,
-        x: Math.log10(m.params)
+        x: Math.log10(m.params),
+        y: toPct(m[activeBenchmark])
       }));
 
       if (data.length < 2) {
@@ -754,17 +713,18 @@
         document.getElementById('chartSub').textContent = 'Add more models or clear the search filter.';
         document.getElementById('fitNote').textContent = 'Need at least 2 visible models to fit a line.';
         document.getElementById('modelTable').innerHTML = '';
+        document.getElementById('countBadge').textContent = `${data.length} models`;
+        document.getElementById('infoBenchmark').textContent = BENCHMARK_NAMES[activeBenchmark] || activeBenchmark;
+        document.getElementById('infoCount').textContent = String(data.length);
+        document.getElementById('infoLoss').textContent = '—';
         if (chart) chart.destroy();
         return;
       }
 
-      const points = data.map(d => ({ x: d.x, y: d.score }));
+      const points = data.map(d => ({ x: d.x, y: d.y }));
       const { slope, intercept } = linearRegression(points);
       const { mse, rmse, residuals } = computeLoss(data, slope, intercept);
-
-      data.forEach((d, i) => {
-        d.residual = residuals[i];
-      });
+      data.forEach((d, i) => { d.residual = residuals[i]; });
 
       updateStats(slope, intercept, mse, rmse, data.length);
 
@@ -776,8 +736,8 @@
       const yLow = slope * xLow + intercept;
       const yHigh = slope * xHigh + intercept;
 
-      const yMin = Math.min(...data.map(d => d.score), yLow) - 1.8;
-      const yMax = Math.max(...data.map(d => d.score), yHigh) + 1.8;
+      const yMin = Math.min(...data.map(d => d.y), yLow) - 1.8;
+      const yMax = Math.max(...data.map(d => d.y), yHigh) + 1.8;
 
       const titleMap = {
         avg_4: 'Average score vs log parameters',
@@ -788,8 +748,10 @@
       };
 
       document.getElementById('chartTitle').textContent = titleMap[activeBenchmark] || 'Regression vs log parameters';
-      document.getElementById('chartSub').textContent = `Silver dotted regression line on ${BENCHMARK_NAMES[activeBenchmark] || activeBenchmark}. Hover for model names, click to open model pages.`;
-      document.getElementById('fitNote').textContent = `Regression loss for ${BENCHMARK_NAMES[activeBenchmark] || activeBenchmark}: MSE ${mse.toFixed(4)} · RMSE ${rmse.toFixed(2)}.`;
+      document.getElementById('chartSub').textContent =
+        `Silver dotted regression line on ${BENCHMARK_NAMES[activeBenchmark] || activeBenchmark}. Hover for model names, click to open model pages.`;
+      document.getElementById('fitNote').textContent =
+        `Regression loss for ${BENCHMARK_NAMES[activeBenchmark] || activeBenchmark}: MSE ${mse.toFixed(4)} · RMSE ${rmse.toFixed(2)}.`;
 
       renderTable(data);
 
@@ -818,18 +780,18 @@
             },
             {
               label: 'Models',
-              data: data.map(d => ({ ...d })),
+              data: data,
               parsing: false,
               pointRadius: 7,
               pointHoverRadius: 10,
-              pointHitRadius: 12,
+              pointHitRadius: 14,
               borderWidth: 1.5,
               backgroundColor: (ctx) => {
                 const raw = ctx.raw;
                 if (!raw) return 'rgba(225, 226, 232, 0.86)';
                 return raw.residual >= 0
-                  ? 'rgba(241, 242, 247, 0.96)'
-                  : 'rgba(146, 151, 160, 0.93)';
+                  ? 'rgba(244, 245, 248, 0.98)'
+                  : 'rgba(144, 148, 156, 0.95)';
               },
               borderColor: (ctx) => {
                 const raw = ctx.raw;
@@ -862,7 +824,7 @@
           plugins: {
             legend: { display: false },
             tooltip: {
-              backgroundColor: 'rgba(12,12,15,0.97)',
+              backgroundColor: 'rgba(12,12,15,0.98)',
               borderColor: 'rgba(236,236,241,0.24)',
               borderWidth: 1,
               titleColor: '#ffffff',