Update index.html

index.html

@@ -8,18 +8,17 @@
   <style>
     :root {
       --bg: #09090b;
-      --bg2: #111114;
+      --bg2: #111115;
       --surface: #141418;
-      --surface2: #18181d;
-      --border: #24242b;
-      --border2: #30303a;
-      --text: #f2f2f2;
-      --muted: #8a8a96;
-      --muted2: #5f5f6b;
-      --silver: #d8d8de;
-      --silver2: #aeb0ba;
-      --glass: rgba(255,255,255,0.04);
-      --shadow: 0 18px 50px rgba(0,0,0,0.40);
+      --surface2: #17171c;
+      --border: rgba(255,255,255,0.08);
+      --border2: rgba(255,255,255,0.12);
+      --text: #f3f3f4;
+      --muted: #9a9aa4;
+      --muted2: #6e6e78;
+      --silver: #dde0e6;
+      --silver2: #bcc0ca;
+      --shadow: 0 18px 50px rgba(0,0,0,0.42);
       --radius: 22px;
     }
 
@@ -27,14 +26,14 @@
     html { scroll-behavior: smooth; }
     body {
       margin: 0;
-      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-      background:
-        radial-gradient(circle at top left, rgba(255,255,255,0.06), transparent 28%),
-        radial-gradient(circle at bottom right, rgba(255,255,255,0.04), transparent 24%),
-        linear-gradient(180deg, var(--bg), #070708 60%, #050506);
-      color: var(--text);
       min-height: 100vh;
       padding: 28px;
+      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.07), transparent 28%),
+        radial-gradient(circle at bottom right, rgba(255,255,255,0.05), transparent 24%),
+        linear-gradient(180deg, #09090b 0%, #060607 100%);
     }
 
     .app {
@@ -44,12 +43,15 @@
       gap: 18px;
     }
 
+    .hero, .panel, .chart-card, .list-card {
+      background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015));
+      border: 1px solid var(--border);
+      box-shadow: var(--shadow);
+    }
+
     .hero {
-      background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
-      border: 1px solid rgba(255,255,255,0.08);
       border-radius: calc(var(--radius) + 4px);
-      padding: 24px 24px 18px;
-      box-shadow: var(--shadow);
+      padding: 24px;
       position: relative;
       overflow: hidden;
     }
@@ -58,32 +60,33 @@
       content: "";
       position: absolute;
       inset: 0;
-      background: linear-gradient(90deg, rgba(255,255,255,0.03), transparent 40%, rgba(255,255,255,0.02));
+      background: linear-gradient(90deg, rgba(255,255,255,0.03), transparent 36%, rgba(255,255,255,0.02));
       pointer-events: none;
     }
 
     .eyebrow {
+      color: var(--silver2);
       text-transform: uppercase;
       letter-spacing: 0.22em;
-      color: var(--silver2);
       font-size: 11px;
       margin-bottom: 10px;
     }
 
     h1 {
       margin: 0;
-      font-size: clamp(34px, 5vw, 64px);
+      font-size: clamp(34px, 5vw, 66px);
       line-height: 0.96;
       letter-spacing: -0.06em;
-      font-weight: 800;
+      font-weight: 850;
     }
 
-    .title-silver { color: var(--silver); text-shadow: 0 0 18px rgba(255,255,255,0.08); }
+    .title-silver { color: var(--silver); }
     .sub {
       margin: 14px 0 0;
       color: var(--muted);
-      max-width: 760px;
+      max-width: 860px;
       line-height: 1.7;
+      font-size: 14px;
     }
 
     .layout {
@@ -93,14 +96,13 @@
       align-items: start;
     }
 
-    .panel, .chart-card, .list-card {
-      background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015));
-      border: 1px solid rgba(255,255,255,0.08);
+    .panel {
       border-radius: var(--radius);
-      box-shadow: var(--shadow);
+      padding: 18px;
+      position: sticky;
+      top: 18px;
     }
 
-    .panel { padding: 18px; position: sticky; top: 18px; }
     .panel h2, .chart-card h2, .list-card h2 {
       margin: 0 0 14px;
       font-size: 14px;
@@ -128,7 +130,7 @@
     }
 
     button {
-      border: 1px solid rgba(255,255,255,0.09);
+      border: 1px solid rgba(255,255,255,0.10);
       background: rgba(255,255,255,0.03);
       color: var(--muted);
       padding: 10px 12px;
@@ -139,11 +141,16 @@
       font-size: 13px;
     }
 
-    button:hover { border-color: rgba(255,255,255,0.22); color: var(--text); transform: translateY(-1px); }
+    button:hover {
+      border-color: rgba(255,255,255,0.24);
+      color: var(--text);
+      transform: translateY(-1px);
+    }
+
     button.active {
-      color: #f6f6f7;
-      border-color: rgba(216,216,222,0.45);
-      background: linear-gradient(180deg, rgba(216,216,222,0.18), rgba(216,216,222,0.08));
+      color: #fafafa;
+      border-color: rgba(221,224,230,0.45);
+      background: linear-gradient(180deg, rgba(221,224,230,0.18), rgba(221,224,230,0.08));
       box-shadow: 0 0 0 1px rgba(255,255,255,0.03) inset;
     }
 
@@ -161,10 +168,30 @@
       padding: 14px;
     }
 
-    .stat .k { color: var(--muted2); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; }
-    .stat .v { margin-top: 6px; font-size: 20px; font-weight: 700; color: var(--silver); }
+    .stat .k {
+      color: var(--muted2);
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: 0.12em;
+    }
+
+    .stat .v {
+      margin-top: 6px;
+      font-size: 20px;
+      font-weight: 750;
+      color: var(--silver);
+      font-variant-numeric: tabular-nums;
+    }
+
+    .small-note {
+      color: var(--muted2);
+      font-size: 12px;
+      line-height: 1.6;
+      margin-top: 10px;
+    }
 
     .chart-card {
+      border-radius: var(--radius);
       padding: 16px 16px 10px;
       min-height: 640px;
     }
@@ -179,10 +206,10 @@
     }
 
     .chart-title {
+      margin: 0;
       font-size: 18px;
-      font-weight: 700;
+      font-weight: 750;
       letter-spacing: -0.03em;
-      margin: 0;
     }
 
     .chart-sub {
@@ -191,19 +218,23 @@
       font-size: 13px;
     }
 
-    canvas { width: 100% !important; height: 540px !important; }
-
     .badge {
       padding: 8px 12px;
       border-radius: 999px;
-      background: rgba(216,216,222,0.08);
-      border: 1px solid rgba(216,216,222,0.15);
+      background: rgba(221,224,230,0.08);
+      border: 1px solid rgba(221,224,230,0.16);
       color: var(--silver);
       font-size: 13px;
       white-space: nowrap;
     }
 
-    .list-card { padding: 16px; }
+    canvas { width: 100% !important; height: 540px !important; }
+
+    .list-card {
+      border-radius: var(--radius);
+      padding: 16px;
+    }
+
     .model-list {
       display: grid;
       gap: 10px;
@@ -221,25 +252,20 @@
       border-radius: 16px;
       background: rgba(255,255,255,0.025);
       border: 1px solid rgba(255,255,255,0.06);
+      transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
+      cursor: pointer;
     }
 
-    .model-name { font-weight: 650; }
-    .model-meta { color: var(--muted); font-size: 12px; }
-    .model-score { color: var(--silver); font-variant-numeric: tabular-nums; }
-
-    .small-note { color: var(--muted2); font-size: 12px; line-height: 1.6; margin-top: 10px; }
-    .codebox {
-      background: rgba(0,0,0,0.24);
-      border: 1px solid rgba(255,255,255,0.08);
-      border-radius: 16px;
-      padding: 14px;
-      color: #d9d9df;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-      font-size: 12px;
-      line-height: 1.6;
-      overflow: auto;
+    .model-row:hover {
+      transform: translateY(-1px);
+      border-color: rgba(221,224,230,0.20);
+      background: rgba(221,224,230,0.045);
     }
 
+    .model-name { font-weight: 700; }
+    .model-meta, .model-score { color: var(--muted); font-size: 12px; }
+    .model-score { color: var(--silver); font-variant-numeric: tabular-nums; }
+
     @media (max-width: 1050px) {
       .layout { grid-template-columns: 1fr; }
       .panel { position: static; }
@@ -261,8 +287,8 @@
       <div class="eyebrow">Regression explorer</div>
       <h1><span class="title-silver">Silver</span> benchmark fit line</h1>
       <p class="sub">
-        Pick a benchmark, fit a linear regression on <b>log10(parameters)</b>, and see how each model lands against the line.
-        Hover any dot to view the model, parameter count, score, and residual.
+        Pick a benchmark, fit a linear regression on <b>log10(parameters)</b>, and inspect each model against the line.
+        Hover any dot to see the model name, and click the dot to open its model page.
       </p>
     </section>
 
@@ -278,40 +304,12 @@
         <div class="section">
           <span class="section-label">Regression stats</span>
           <div class="stat-grid">
-            <div class="stat">
-              <div class="k">Slope</div>
-              <div class="v" id="statSlope">—</div>
-            </div>
-            <div class="stat">
-              <div class="k">Intercept</div>
-              <div class="v" id="statIntercept">—</div>
-            </div>
-            <div class="stat">
-              <div class="k">MSE</div>
-              <div class="v" id="statLoss">—</div>
-            </div>
-            <div class="stat">
-              <div class="k">RMSE</div>
-              <div class="v" id="statRmse">—</div>
-            </div>
+            <div class="stat"><div class="k">Slope</div><div class="v" id="statSlope">—</div></div>
+            <div class="stat"><div class="k">Intercept</div><div class="v" id="statIntercept">—</div></div>
+            <div class="stat"><div class="k">MSE</div><div class="v" id="statLoss">—</div></div>
+            <div class="stat"><div class="k">RMSE</div><div class="v" id="statRmse">—</div></div>
           </div>
-          <div class="small-note" id="fitNote">The regression line updates instantly when you switch benchmarks.</div>
-        </div>
-
-        <div class="section">
-          <span class="section-label">Add models easily</span>
-          <div class="codebox">{
-  name: "MyModel-12M",
-  params: 12000000,
-  org: "me",
-  avg: 0.361,
-  arc: 0.35,
-  hellaswag: 0.28,
-  piqa: 0.57,
-  arcChall: 0.21,
-  arithmark2: 0.30
-}</div>
-          <div class="small-note">Just add another object to <b>MODELS</b>. If a field is missing, it will be ignored for that benchmark.</div>
+          <div class="small-note" id="fitNote">The fit updates instantly when you switch benchmarks.</div>
         </div>
       </aside>
 
@@ -320,7 +318,7 @@
           <div class="chart-top">
             <div>
               <h2 class="chart-title" id="chartTitle">Average score vs log parameters</h2>
-              <p class="chart-sub" id="chartSub">Silver regression line over all featured models.</p>
+              <p class="chart-sub" id="chartSub">Beautiful silver regression line over all featured models.</p>
             </div>
             <div class="badge" id="countBadge">0 models</div>
           </div>
@@ -336,24 +334,23 @@
   </div>
 
   <script>
-    // Edit this list to add or remove models.
-    // score values are in percent form (0-100) for easier reading.
+    // Edit this array privately whenever you want to add or remove models.
     const MODELS = [
-      { name: 'SmolLM2-135M', org: 'HuggingFace', params: 135000000, avg: 51.78, arc: 58.63, hellaswag: 43.22, piqa: 68.44, arcChall: 29.69, arithmark2: 32.68 },
-      { name: 'GPT-X2-125M', org: 'AxiomicLabs', params: 125081664, avg: 48.98, arc: 51.47, hellaswag: 40.41, piqa: 67.30, arcChall: 27.82, arithmark2: 30.68 },
-      { name: 'GPT-X-125M', org: 'AxiomicLabs', params: 124561728, avg: 46.41, arc: 50.76, hellaswag: 36.57, piqa: 64.96, arcChall: 26.62, arithmark2: 30.24 },
-      { name: 'MobileLLM-R1-140M', org: 'Facebook', params: 140000000, avg: 43.56, arc: 49.92, hellaswag: 33.84, piqa: 63.22, arcChall: 24.74, arithmark2: 53.56 },
-      { name: 'Supra-50M-Base', org: 'SupraLabs', params: 51786240, avg: 42.52, arc: 45.88, hellaswag: 31.83, piqa: 62.51, arcChall: 25.00, arithmark2: 27.04 },
-      { name: 'Quark-135M', org: 'ThingAI', params: 134561088, avg: 41.61, arc: 47.73, hellaswag: 31.33, piqa: 58.32, arcChall: 28.24, arithmark2: 40.32 },
-      { name: 'OdinNext-138M', org: 'joelhenwang', params: 138449696, avg: 39.87, arc: 45.08, hellaswag: 28.09, piqa: 59.52, arcChall: 23.81, arithmark2: 36.84 },
-      { name: 'KeyLM-75M', org: 'Eclipse-Senpai', params: 75251200, avg: 38.86, arc: 35.73, hellaswag: 29.66, piqa: 60.50, arcChall: 23.98, arithmark2: 25.80 },
-      { name: 'michel-micro', org: 'finnianx', params: 28355072, avg: 38.03, arc: 38.51, hellaswag: 28.16, piqa: 57.62, arcChall: 23.29, arithmark2: 26.04 },
-      { name: 'Veyra-30M-Base', org: 'veyra-ai', params: 34611712, avg: 36.92, arc: 35.90, hellaswag: 27.92, piqa: 58.92, arcChall: 24.15, arithmark2: 26.76 },
-      { name: 'Er-Medium-12.5M', org: 'FromZero', params: 12497520, avg: 36.68, arc: 35.10, hellaswag: 28.50, piqa: 57.51, arcChall: 20.73, arithmark2: 30.88 },
-      { name: 'GPT-S-1.4M', org: 'AxiomicLabs', params: 1426000, avg: 33.41, arc: 31.57, hellaswag: 26.89, piqa: 55.17, arcChall: 21.93, arithmark2: 25.16 },
-      { name: 'Dillionv2-1.3M', org: 'Harley-ml', params: 1285200, avg: 32.92, arc: 29.71, hellaswag: 27.27, piqa: 53.05, arcChall: 22.44, arithmark2: 27.00 },
-      { name: 'Tenete-8M', org: 'Harley-ml', params: 8293120, avg: 33.85, arc: 31.69, hellaswag: 26.75, piqa: 55.66, arcChall: 21.84, arithmark2: 26.72 },
-      { name: 'Syn-2.6M', org: 'FromZero', params: 2604210, avg: 33.31, arc: 32.03, hellaswag: 26.96, piqa: 53.65, arcChall: 20.39, arithmark2: 26.68 }
+      { name: 'SmolLM2-135M', org: 'HuggingFace', params: 135000000, avg: 51.78, arc: 58.63, hellaswag: 43.22, piqa: 68.44, arcChall: 29.69, arithmark2: 32.68, url: 'https://huggingface.co/HuggingFaceTB/SmolLM2-135M' },
+      { name: 'GPT-X2-125M', org: 'AxiomicLabs', params: 125081664, avg: 48.98, arc: 51.47, hellaswag: 40.41, piqa: 67.30, arcChall: 27.82, arithmark2: 30.68, url: 'https://huggingface.co/AxiomicLabs/GPT-X2-125M' },
+      { name: 'GPT-X-125M', org: 'AxiomicLabs', params: 124561728, avg: 46.41, arc: 50.76, hellaswag: 36.57, piqa: 64.96, arcChall: 26.62, arithmark2: 30.24, url: 'https://huggingface.co/AxiomicLabs/GPT-X-125M' },
+      { name: 'MobileLLM-R1-140M', org: 'Facebook', params: 140000000, avg: 43.56, arc: 49.92, hellaswag: 33.84, piqa: 63.22, arcChall: 24.74, arithmark2: 53.56, url: 'https://huggingface.co/facebook/MobileLLM-R1-140M-base' },
+      { name: 'Supra-50M-Base', org: 'SupraLabs', params: 51786240, avg: 42.52, arc: 45.88, hellaswag: 31.83, piqa: 62.51, arcChall: 25.00, arithmark2: 27.04, url: 'https://huggingface.co/SupraLabs/Supra-50M-Base' },
+      { name: 'Quark-135M', org: 'ThingAI', params: 134561088, avg: 41.61, arc: 47.73, hellaswag: 31.33, piqa: 58.32, arcChall: 28.24, arithmark2: 40.32, url: 'https://huggingface.co/ThingAI/Quark-135m' },
+      { name: 'OdinNext-138M', org: 'joelhenwang', params: 138449696, avg: 39.87, arc: 45.08, hellaswag: 28.09, piqa: 59.52, arcChall: 23.81, arithmark2: 36.84, url: 'https://huggingface.co/joelhenwang/OdinNext-138M-Base' },
+      { name: 'KeyLM-75M', org: 'Eclipse-Senpai', params: 75251200, avg: 38.86, arc: 35.73, hellaswag: 29.66, piqa: 60.50, arcChall: 23.98, arithmark2: 25.80, url: 'https://huggingface.co/Eclipse-Senpai/KeyLM-75M' },
+      { name: 'michel-micro', org: 'finnianx', params: 28355072, avg: 38.03, arc: 38.51, hellaswag: 28.16, piqa: 57.62, arcChall: 23.29, arithmark2: 26.04, url: 'https://huggingface.co/finnianx/michel-micro' },
+      { name: 'Veyra-30M-Base', org: 'veyra-ai', params: 34611712, avg: 36.92, arc: 35.90, hellaswag: 27.92, piqa: 58.92, arcChall: 24.15, arithmark2: 26.76, url: 'https://huggingface.co/veyra-ai/veyra-30m-base-5b-tokens' },
+      { name: 'Er-Medium-12.5M', org: 'FromZero', params: 12497520, avg: 36.68, arc: 35.10, hellaswag: 28.50, piqa: 57.51, arcChall: 20.73, arithmark2: 30.88, url: 'https://huggingface.co/fromziro/Er-Medium-12.5M' },
+      { name: 'GPT-S-1.4M', org: 'AxiomicLabs', params: 1426000, avg: 33.41, arc: 31.57, hellaswag: 26.89, piqa: 55.17, arcChall: 21.93, arithmark2: 25.16, url: 'https://huggingface.co/AxiomicLabs/GPT-S-1.4M' },
+      { name: 'Dillionv2-1.3M', org: 'Harley-ml', params: 1285200, avg: 32.92, arc: 29.71, hellaswag: 27.27, piqa: 53.05, arcChall: 22.44, arithmark2: 27.00, url: 'https://huggingface.co/Harley-ml/Dillionv2-1.3M' },
+      { name: 'Tenete-8M', org: 'Harley-ml', params: 8293120, avg: 33.85, arc: 31.69, hellaswag: 26.75, piqa: 55.66, arcChall: 21.84, arithmark2: 26.72, url: 'https://huggingface.co/Harley-ml/Tenete-8M' },
+      { name: 'Syn-2.6M', org: 'FromZero', params: 2604210, avg: 33.31, arc: 32.03, hellaswag: 26.96, piqa: 53.65, arcChall: 20.39, arithmark2: 26.68, url: 'https://huggingface.co/fromziro/Syn-2.6M' }
     ];
 
     const BENCHMARKS = [
@@ -362,19 +359,22 @@
       { key: 'arcChall', label: 'ARC-Challenge' },
       { key: 'hellaswag', label: 'HellaSwag' },
       { key: 'piqa', label: 'PIQA' },
-      { key: 'arithmark2', label: 'ArithMark-2' },
+      { key: 'arithmark2', label: 'ArithMark-2' }
     ];
 
     let activeBenchmark = 'avg';
-    let chart;
+    let chart = null;
 
-    function getScore(model, benchmark) {
-      return model[benchmark] ?? null;
-    }
+    const formatParams = (n) => {
+      if (n >= 1e9) return `${(n / 1e9).toFixed(2)}B`;
+      if (n >= 1e6) return `${(n / 1e6).toFixed(2)}M`;
+      if (n >= 1e3) return `${(n / 1e3).toFixed(2)}K`;
+      return String(n);
+    };
 
-    function mean(arr) {
-      return arr.reduce((a, b) => a + b, 0) / arr.length;
-    }
+    const getScore = (m, key) => m[key] ?? null;
+
+    const mean = (arr) => arr.reduce((a, b) => a + b, 0) / arr.length;
 
     function linearRegression(points) {
       const n = points.length;
@@ -391,11 +391,10 @@
       return { slope, intercept };
     }
 
-    function computeLoss(models, benchmark, slope, intercept) {
-      const residuals = models.map(m => {
-        const x = Math.log10(m.params);
-        const y = getScore(m, benchmark);
-        return y - (slope * x + intercept);
+    function computeLoss(data, benchmark, slope, intercept) {
+      const residuals = data.map(m => {
+        const pred = slope * m.x + intercept;
+        return m.y - pred;
       });
       const mse = mean(residuals.map(r => r * r));
       const rmse = Math.sqrt(mse);
@@ -410,19 +409,13 @@
           org: m.org,
           params: m.params,
           paramsDisplay: formatParams(m.params),
+          url: m.url,
           x: Math.log10(m.params),
           y: getScore(m, activeBenchmark)
         }))
         .sort((a, b) => a.x - b.x);
     }
 
-    function formatParams(n) {
-      if (n >= 1e9) return `${(n / 1e9).toFixed(2)}B`;
-      if (n >= 1e6) return `${(n / 1e6).toFixed(2)}M`;
-      if (n >= 1e3) return `${(n / 1e3).toFixed(2)}K`;
-      return String(n);
-    }
-
     function renderBenchmarkButtons() {
       const box = document.getElementById('benchmarkButtons');
       box.innerHTML = BENCHMARKS.map(b => `
@@ -439,7 +432,7 @@
     function renderModelList(data) {
       const list = document.getElementById('modelList');
       list.innerHTML = data.map(m => `
-        <div class="model-row">
+        <div class="model-row" data-url="${m.url}">
           <div>
             <div class="model-name">${m.name}</div>
             <div class="model-meta">${m.org} · ${m.paramsDisplay}</div>
@@ -448,6 +441,13 @@
           <div class="model-score">y=${m.y.toFixed(2)}%</div>
         </div>
       `).join('');
+
+      list.querySelectorAll('.model-row').forEach(row => {
+        row.addEventListener('click', () => {
+          const url = row.dataset.url;
+          if (url) window.open(url, '_blank', 'noopener,noreferrer');
+        });
+      });
     }
 
     function updateStats(slope, intercept, mse, rmse, count) {
@@ -467,8 +467,8 @@
       const points = data.map(d => ({ x: d.x, y: d.y }));
       const { slope, intercept } = linearRegression(points);
       const { mse, rmse, residuals } = computeLoss(data, activeBenchmark, 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);
       renderModelList(data);
 
@@ -492,8 +492,8 @@
       };
 
       document.getElementById('chartTitle').textContent = titleMap[activeBenchmark] || activeBenchmark;
-      document.getElementById('chartSub').textContent = `Linear fit on ${BENCHMARKS.find(b => b.key === activeBenchmark)?.label || activeBenchmark}. Beautiful silver line, hover for model details.`;
-      document.getElementById('fitNote').textContent = `Regression loss for ${BENCHMARKS.find(b => b.key === activeBenchmark)?.label || activeBenchmark}: MSE ${mse.toFixed(4)} · RMSE ${rmse.toFixed(2)}.`;
+      document.getElementById('chartSub').textContent = `Linear fit on ${BENCHMARKS.find(b => b.key === activeBenchmark)?.label || activeBenchmark}. Silver, clean, and clickable.`;
+      document.getElementById('fitNote').textContent = `Regression loss: MSE ${mse.toFixed(4)} · RMSE ${rmse.toFixed(2)}.`;
 
       const ctx = document.getElementById('scatterChart').getContext('2d');
       if (chart) chart.destroy();
@@ -509,8 +509,8 @@
                 { x: xLow, y: yLow },
                 { x: xHigh, y: yHigh }
               ],
-              borderColor: 'rgba(220, 220, 224, 0.98)',
-              borderWidth: 2.8,
+              borderColor: 'rgba(236, 236, 241, 0.98)',
+              borderWidth: 3.2,
               pointRadius: 0,
               tension: 0,
               fill: false,
@@ -522,8 +522,10 @@
               pointRadius: 7,
               pointHoverRadius: 10,
               borderWidth: 1.5,
-              backgroundColor: 'rgba(201, 203, 210, 0.78)',
-              borderColor: 'rgba(255,255,255,0.65)',
+              backgroundColor: 'rgba(225, 226, 232, 0.86)',
+              borderColor: 'rgba(255,255,255,0.92)',
+              hoverBackgroundColor: 'rgba(245, 245, 248, 0.98)',
+              hoverBorderColor: 'rgba(255,255,255,0.98)',
               order: 2
             }
           ]
@@ -533,26 +535,32 @@
           maintainAspectRatio: false,
           animation: { duration: 0 },
           interaction: { mode: 'nearest', intersect: true },
+          onClick: (event, elements) => {
+            if (!elements.length) return;
+            const hit = elements[0];
+            if (hit.datasetIndex !== 1) return;
+            const item = chart.data.datasets[hit.datasetIndex].data[hit.index];
+            if (item?.url) window.open(item.url, '_blank', 'noopener,noreferrer');
+          },
           plugins: {
             legend: { display: false },
             tooltip: {
-              backgroundColor: 'rgba(15,15,18,0.96)',
-              borderColor: 'rgba(220,220,224,0.22)',
+              backgroundColor: 'rgba(15,15,18,0.97)',
+              borderColor: 'rgba(236,236,241,0.22)',
               borderWidth: 1,
               titleColor: '#ffffff',
-              bodyColor: '#cfcfd5',
+              bodyColor: '#d4d4da',
               padding: 12,
               displayColors: false,
               callbacks: {
                 title: (items) => items[0]?.raw?.name || '',
                 label: (item) => {
                   const d = item.raw;
-                  const y = d.y;
                   const pred = slope * d.x + intercept;
-                  const resid = y - pred;
+                  const resid = d.y - pred;
                   return [
                     `Params: ${formatParams(d.params)} (${d.params.toLocaleString()})`,
-                    `Score: ${y.toFixed(2)}%`,
+                    `Score: ${d.y.toFixed(2)}%`,
                     `Residual: ${resid >= 0 ? '+' : ''}${resid.toFixed(2)} pts`,
                     `Prediction: ${pred.toFixed(2)}%`
                   ];
@@ -567,13 +575,13 @@
               max: xHigh,
               grid: { color: 'rgba(255,255,255,0.045)' },
               ticks: {
-                color: '#7d7d87',
+                color: '#7f7f88',
                 callback: v => `10^${Number(v).toFixed(1)}`
               },
               title: {
                 display: true,
                 text: 'Log₁₀(parameters)',
-                color: '#7d7d87',
+                color: '#7f7f88',
                 font: { weight: '600' }
               }
             },
@@ -582,13 +590,13 @@
               max: yMax,
               grid: { color: 'rgba(255,255,255,0.045)' },
               ticks: {
-                color: '#7d7d87',
-                callback: v => `${v.toFixed(0)}%`
+                color: '#7f7f88',
+                callback: v => `${Number(v).toFixed(0)}%`
               },
               title: {
                 display: true,
                 text: 'Score (%)',
-                color: '#7d7d87',
+                color: '#7f7f88',
                 font: { weight: '600' }
               }
             }
@@ -600,4 +608,4 @@
     render();
   </script>
 </body>
-</html>
+</html>"}]}