Update index.html

index.html

@@ -7,19 +7,20 @@
   <script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
   <style>
     :root {
-      --bg: #09090b;
-      --bg2: #111115;
-      --surface: #141418;
-      --surface2: #17171c;
+      --bg: #08080a;
+      --bg2: #101014;
+      --surface: rgba(255,255,255,0.035);
+      --surface-2: rgba(255,255,255,0.05);
       --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;
+      --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);
+      --radius: 24px;
     }
 
     * { box-sizing: border-box; }
@@ -31,27 +32,32 @@
       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 top left, rgba(255,255,255,0.08), transparent 27%),
         radial-gradient(circle at bottom right, rgba(255,255,255,0.05), transparent 24%),
-        linear-gradient(180deg, #09090b 0%, #060607 100%);
+        linear-gradient(180deg, #08080a 0%, #060607 100%);
     }
 
     .app {
-      max-width: 1280px;
+      max-width: 1440px;
       margin: 0 auto;
       display: grid;
       gap: 18px;
     }
 
-    .hero, .panel, .chart-card, .list-card {
-      background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015));
+    .hero,
+    .panel,
+    .chart-card,
+    .list-card,
+    .info-card {
+      background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
       border: 1px solid var(--border);
       box-shadow: var(--shadow);
+      backdrop-filter: blur(12px);
     }
 
     .hero {
-      border-radius: calc(var(--radius) + 4px);
-      padding: 24px;
+      border-radius: calc(var(--radius) + 6px);
+      padding: 26px;
       position: relative;
       overflow: hidden;
     }
@@ -60,12 +66,12 @@
       content: "";
       position: absolute;
       inset: 0;
-      background: linear-gradient(90deg, rgba(255,255,255,0.03), transparent 36%, rgba(255,255,255,0.02));
+      background: linear-gradient(90deg, rgba(255,255,255,0.03), transparent 38%, rgba(255,255,255,0.02));
       pointer-events: none;
     }
 
     .eyebrow {
-      color: var(--silver2);
+      color: var(--silver-2);
       text-transform: uppercase;
       letter-spacing: 0.22em;
       font-size: 11px;
@@ -74,24 +80,28 @@
 
     h1 {
       margin: 0;
-      font-size: clamp(34px, 5vw, 66px);
+      font-size: clamp(34px, 5vw, 68px);
       line-height: 0.96;
       letter-spacing: -0.06em;
       font-weight: 850;
     }
 
-    .title-silver { color: var(--silver); }
+    .title-silver {
+      color: var(--silver);
+      text-shadow: 0 0 22px rgba(255,255,255,0.10);
+    }
+
     .sub {
       margin: 14px 0 0;
       color: var(--muted);
-      max-width: 860px;
+      max-width: 980px;
       line-height: 1.7;
       font-size: 14px;
     }
 
     .layout {
       display: grid;
-      grid-template-columns: 320px minmax(0, 1fr);
+      grid-template-columns: 330px minmax(0, 1fr);
       gap: 18px;
       align-items: start;
     }
@@ -103,7 +113,10 @@
       top: 18px;
     }
 
-    .panel h2, .chart-card h2, .list-card h2 {
+    .panel h2,
+    .chart-card h2,
+    .list-card h2,
+    .info-card h2 {
       margin: 0 0 14px;
       font-size: 14px;
       letter-spacing: 0.12em;
@@ -117,7 +130,7 @@
     .section-label {
       display: block;
       margin-bottom: 10px;
-      color: var(--silver2);
+      color: var(--silver-2);
       font-size: 12px;
       text-transform: uppercase;
       letter-spacing: 0.12em;
@@ -129,7 +142,8 @@
       gap: 8px;
     }
 
-    button {
+    button,
+    .chip {
       border: 1px solid rgba(255,255,255,0.10);
       background: rgba(255,255,255,0.03);
       color: var(--muted);
@@ -139,18 +153,21 @@
       transition: all 0.15s ease;
       font: inherit;
       font-size: 13px;
+      user-select: none;
     }
 
-    button:hover {
+    button:hover,
+    .chip:hover {
       border-color: rgba(255,255,255,0.24);
       color: var(--text);
       transform: translateY(-1px);
     }
 
-    button.active {
+    button.active,
+    .chip.active {
       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));
+      border-color: rgba(224,226,232,0.48);
+      background: linear-gradient(180deg, rgba(224,226,232,0.18), rgba(224,226,232,0.08));
       box-shadow: 0 0 0 1px rgba(255,255,255,0.03) inset;
     }
 
@@ -169,7 +186,7 @@
     }
 
     .stat .k {
-      color: var(--muted2);
+      color: var(--muted-2);
       font-size: 11px;
       text-transform: uppercase;
       letter-spacing: 0.12em;
@@ -177,14 +194,14 @@
 
     .stat .v {
       margin-top: 6px;
-      font-size: 20px;
-      font-weight: 750;
+      font-size: 19px;
+      font-weight: 760;
       color: var(--silver);
       font-variant-numeric: tabular-nums;
     }
 
     .small-note {
-      color: var(--muted2);
+      color: var(--muted-2);
       font-size: 12px;
       line-height: 1.6;
       margin-top: 10px;
@@ -192,13 +209,15 @@
 
     .chart-card {
       border-radius: var(--radius);
-      padding: 16px 16px 10px;
-      min-height: 640px;
+      padding: 18px 18px 12px;
+      min-height: 690px;
+      position: relative;
+      overflow: hidden;
     }
 
     .chart-top {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       justify-content: space-between;
       gap: 12px;
       margin-bottom: 12px;
@@ -207,8 +226,8 @@
 
     .chart-title {
       margin: 0;
-      font-size: 18px;
-      font-weight: 750;
+      font-size: 19px;
+      font-weight: 760;
       letter-spacing: -0.03em;
     }
 
@@ -216,68 +235,219 @@
       margin: 4px 0 0;
       color: var(--muted);
       font-size: 13px;
+      line-height: 1.5;
     }
 
     .badge {
-      padding: 8px 12px;
+      padding: 9px 12px;
       border-radius: 999px;
-      background: rgba(221,224,230,0.08);
-      border: 1px solid rgba(221,224,230,0.16);
+      background: rgba(224,226,232,0.08);
+      border: 1px solid rgba(224,226,232,0.16);
       color: var(--silver);
       font-size: 13px;
       white-space: nowrap;
+      font-variant-numeric: tabular-nums;
     }
 
-    canvas { width: 100% !important; height: 540px !important; }
+    .callout {
+      margin-top: 10px;
+      display: inline-flex;
+      align-items: center;
+      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;
+      font-size: 12px;
+      letter-spacing: 0.01em;
+    }
+
+    .callout .dot {
+      width: 9px;
+      height: 9px;
+      border-radius: 50%;
+      background: linear-gradient(180deg, #f7f7f9, #b9bec8);
+      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;
+    }
+
+    .info-grid {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 14px;
+    }
+
+    .info-card {
+      border-radius: 20px;
+      padding: 16px;
+    }
+
+    .info-card .big {
+      font-size: 22px;
+      font-weight: 800;
+      color: var(--silver);
+      margin-top: 6px;
+      font-variant-numeric: tabular-nums;
+    }
+
+    .info-card .label {
+      color: var(--muted-2);
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: 0.12em;
+    }
 
     .list-card {
       border-radius: var(--radius);
       padding: 16px;
     }
 
-    .model-list {
-      display: grid;
-      gap: 10px;
-      max-height: 360px;
+    .table-wrap {
       overflow: auto;
-      padding-right: 4px;
+      border-radius: 18px;
+      border: 1px solid rgba(255,255,255,0.08);
+      background: rgba(255,255,255,0.02);
     }
 
-    .model-row {
-      display: grid;
-      grid-template-columns: 1fr auto auto;
-      gap: 12px;
-      align-items: center;
-      padding: 12px 14px;
-      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;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      min-width: 900px;
+    }
+
+    thead th {
+      position: sticky;
+      top: 0;
+      background: rgba(12,12,14,0.96);
+      backdrop-filter: blur(8px);
+      color: var(--muted);
+      text-align: left;
+      font-size: 10px;
+      text-transform: uppercase;
+      letter-spacing: 0.12em;
+      padding: 14px 14px;
+      border-bottom: 1px solid rgba(255,255,255,0.08);
+      cursor: pointer;
+      user-select: none;
+      white-space: nowrap;
+    }
+
+    thead th:hover { color: var(--silver); }
+
+    tbody tr {
+      border-bottom: 1px solid rgba(255,255,255,0.06);
+      transition: background 0.12s ease, transform 0.12s ease;
       cursor: pointer;
     }
 
-    .model-row:hover {
-      transform: translateY(-1px);
-      border-color: rgba(221,224,230,0.20);
-      background: rgba(221,224,230,0.045);
+    tbody tr:hover {
+      background: rgba(224,226,232,0.05);
     }
 
-    .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; }
+    tbody td {
+      padding: 13px 14px;
+      color: var(--text);
+      font-size: 13px;
+      vertical-align: middle;
+    }
 
-    @media (max-width: 1050px) {
-      .layout { grid-template-columns: 1fr; }
-      .panel { position: static; }
-      canvas { height: 500px !important; }
+    tbody td.muted {
+      color: var(--muted);
     }
 
-    @media (max-width: 720px) {
+    .above {
+      color: #f2f2f6;
+      text-shadow: 0 0 10px rgba(255,255,255,0.08);
+    }
+
+    .below {
+      color: #8f949d;
+    }
+
+    .pill-up {
+      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-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);
+      font-size: 12px;
+      line-height: 1.6;
+      padding-top: 2px;
+    }
+
+    @media (max-width: 1120px) {
+      .layout {
+        grid-template-columns: 1fr;
+      }
+      .panel {
+        position: static;
+      }
+      canvas { height: 520px !important; }
+      .info-grid { grid-template-columns: 1fr; }
+    }
+
+    @media (max-width: 760px) {
       body { padding: 16px; }
-      .hero, .panel, .chart-card, .list-card { border-radius: 18px; }
+      .hero, .panel, .chart-card, .list-card, .info-card { border-radius: 18px; }
       .stat-grid { grid-template-columns: 1fr; }
-      .model-row { grid-template-columns: 1fr; gap: 8px; }
       canvas { height: 420px !important; }
+      table { min-width: 760px; }
     }
   </style>
 </head>
@@ -287,8 +457,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 inspect each model against the line.
-        Hover any dot to see the model name, and click the dot to open its model page.
+        Pick a benchmark, fit a linear regression on <b>log10(parameters)</b>, and inspect how every model sits against the size trend.
+        Hover any dot to see the model name. Click a dot to open the model page.
       </p>
     </section>
 
@@ -301,16 +471,29 @@
           <div class="btn-grid" id="benchmarkButtons"></div>
         </div>
 
+        <div class="section">
+          <span class="section-label">Search models</span>
+          <input id="searchBox" class="search" type="text" placeholder="Type a model or org name..." />
+          <div class="small-note">Filters the chart and the table at once.</div>
+        </div>
+
         <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">MSE</div><div class="v" id="statMSE">—</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 fit updates instantly when you switch benchmarks.</div>
         </div>
+
+        <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.
+          </div>
+        </div>
       </aside>
 
       <main style="display:grid; gap:18px;">
@@ -319,64 +502,147 @@
             <div>
               <h2 class="chart-title" id="chartTitle">Average score vs log parameters</h2>
               <p class="chart-sub" id="chartSub">Beautiful silver regression line over all featured models.</p>
+              <div class="callout">
+                <span class="dot"></span>
+                <span>Above the dotted line = above expected for that parameter scale.</span>
+              </div>
             </div>
             <div class="badge" id="countBadge">0 models</div>
           </div>
           <canvas id="scatterChart"></canvas>
         </section>
 
+        <section class="info-grid">
+          <div class="info-card">
+            <div class="label">Selected benchmark</div>
+            <div class="big" id="infoBenchmark">Avg</div>
+          </div>
+          <div class="info-card">
+            <div class="label">Visible models</div>
+            <div class="big" id="infoCount">0</div>
+          </div>
+          <div class="info-card">
+            <div class="label">Regression loss</div>
+            <div class="big" id="infoLoss">—</div>
+          </div>
+        </section>
+
         <section class="list-card">
           <h2>Featured models</h2>
-          <div class="model-list" id="modelList"></div>
+          <div class="table-wrap">
+            <table>
+              <thead>
+                <tr>
+                  <th data-sort="name">Model</th>
+                  <th data-sort="org">Org</th>
+                  <th data-sort="params">Params</th>
+                  <th data-sort="score">Score</th>
+                  <th data-sort="residual">Residual</th>
+                  <th data-sort="side">Relation</th>
+                </tr>
+              </thead>
+              <tbody id="modelTable"></tbody>
+            </table>
+          </div>
+          <div class="footer-note">
+            Clicking a row opens the model page.
+          </div>
         </section>
       </main>
     </div>
   </div>
 
   <script>
-    // 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, 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' }
+      { 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: '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: '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' },
+      { name: 'Pythia-31M', org: 'EleutherAI', params: 31000000, arc_easy: 0.3388, arc_challenge: 0.2167, piqa: 0.5626, hellaswag: 0.2714, avg_4: 0.3474, url: 'https://huggingface.co/EleutherAI/pythia-31m' },
+      { name: 'Stentor3-50M', org: 'StentorLabs', params: 50000000, arc_easy: 0.2967, arc_challenge: 0.2167, piqa: 0.5375, hellaswag: 0.2710, avg_4: 0.3335, url: 'https://huggingface.co/StentorLabs/Stentor3-50M' },
+      { name: 'Stentor3-20M', org: 'StentorLabs', params: 20000000, arc_easy: 0.2950, arc_challenge: 0.2312, piqa: 0.5506, hellaswag: 0.2706, avg_4: 0.3394, url: 'https://huggingface.co/StentorLabs/Stentor3-20M' },
+      { name: 'Portimbria-150M', org: 'StentorLabs', params: 151026432, arc_easy: 0.3582, arc_challenge: 0.1877, piqa: 0.5827, hellaswag: 0.2709, avg_4: 0.3499, url: 'https://huggingface.co/StentorLabs/Portimbria-150M' },
+      { name: 'nanowhale-100m-base', org: 'HuggingFace', params: 100000000, arc_easy: 0.2879, arc_challenge: 0.2483, piqa: 0.5180, hellaswag: 0.2631, avg_4: 0.3293, url: 'https://huggingface.co/HuggingFaceTB/nanowhale-100m-base' },
+      { name: 'Pythia-14M', org: 'EleutherAI', params: 14000000, arc_easy: 0.3228, arc_challenge: 0.2100, piqa: 0.5588, hellaswag: 0.2620, avg_4: 0.3384, url: 'https://huggingface.co/EleutherAI/pythia-14m' },
+      { name: 'Tenete-8M', org: 'Harley-ml', params: 8000000, arc_easy: 0.3169, arc_challenge: 0.2184, piqa: 0.5566, hellaswag: 0.2675, avg_4: 0.3409, url: 'https://huggingface.co/Harley-ml/Tenete-8M' },
+      { name: 'Dillion-1.2M', org: 'Harley-ml', params: 1281384, arc_easy: 0.3119, arc_challenge: 0.2278, piqa: 0.5305, hellaswag: 0.2665, avg_4: 0.3338, url: 'https://huggingface.co/Harley-ml/Dillion-1.2M' },
+      { name: 'CinnabarLM-1.4M-Base', org: 'MihaiPopa-1', params: 1510000, arc_easy: 0.2854, arc_challenge: 0.2338, piqa: 0.5250, hellaswag: 0.2708, avg_4: 0.3416, url: 'https://huggingface.co/MihaiPopa-1/CinnabarLM-1.4M-Base' },
+      { name: 'CinnabarLM-4M-Base', org: 'MihaiPopa-1', params: 4230000, arc_easy: 0.2828, arc_challenge: 0.2270, piqa: 0.5229, hellaswag: 0.2771, avg_4: 0.3302, url: 'https://huggingface.co/MihaiPopa-1/CinnabarLM-4M-Base' },
+      { name: 'CinnabarLM-1.5M-Base', org: 'MihaiPopa-1', params: 1710000, arc_easy: 0.2811, arc_challenge: 0.2193, piqa: 0.5294, hellaswag: 0.2708, avg_4: 0.3338, url: 'https://huggingface.co/MihaiPopa-1/CinnabarLM-1.5M-Base' },
+      { name: 'Dillionv2-1.3M', org: 'Harley-ml', params: 1285200, arc_easy: 0.2963, arc_challenge: 0.2224, piqa: 0.5305, hellaswag: 0.2738, avg_4: 0.3292, url: 'https://huggingface.co/Harley-ml/Dillionv2-1.3M' },
+      { name: 'KeyLM-75M', org: 'Eclipse-Senpai', params: 75251200, arc_easy: 0.3573, arc_challenge: 0.2398, piqa: 0.6050, hellaswag: 0.2966, avg_4: 0.3947, url: 'https://huggingface.co/Eclipse-Senpai/KeyLM-75M' },
+      { name: 'Supra-Mini-v6-1M', org: 'SupraLabs', params: 1410688, arc_easy: 0.3068, arc_challenge: 0.2048, piqa: 0.5370, hellaswag: 0.2722, avg_4: 0.3322, url: 'https://huggingface.co/SupraLabs/Supra-Mini-v6-1M' },
+      { name: 'GPT-S-1.4M', org: 'AxiomicLabs', params: 1426000, arc_easy: 0.3186, arc_challenge: 0.2210, piqa: 0.5511, hellaswag: 0.2686, avg_4: 0.3341, url: 'https://huggingface.co/AxiomicLabs/GPT-S-1.4M' },
+      { name: 'Archaea-74M', org: 'GODELEV', params: 74016256, arc_easy: 0.3906, arc_challenge: 0.2270, piqa: 0.5827, hellaswag: 0.2727, avg_4: 0.3812, url: 'https://huggingface.co/GODELEV/Archaea-74M' },
+      { name: 'Cali-0.1B', org: 'Sandroeth', params: 123782400, arc_easy: 0.2753, arc_challenge: 0.2449, piqa: 0.5212, hellaswag: 0.2684, avg_4: 0.3274, url: 'https://huggingface.co/Sandroeth/cali-0.1B' },
+      { name: 'Quark-50M', org: 'ThingAI', params: 56666496, arc_easy: 0.3678, arc_challenge: 0.2526, piqa: 0.5783, hellaswag: 0.2848, avg_4: 0.3717, url: 'https://huggingface.co/ThingAI/Quark-50m' },
+      { name: 'Quark-135M', org: 'ThingAI', params: 134561088, arc_easy: 0.4789, arc_challenge: 0.2824, piqa: 0.5865, hellaswag: 0.3137, avg_4: 0.4143, url: 'https://huggingface.co/ThingAI/Quark-135m' },
+      { name: 'Veyra-30M-Base', org: 'veyra-ai', params: 34611712, arc_easy: 0.3594, arc_challenge: 0.2389, piqa: 0.5903, hellaswag: 0.2787, avg_4: 0.3692, url: 'https://huggingface.co/veyra-ai/veyra-30m-base-5b-tokens' },
+      { name: 'Syn-2.6M', org: 'FromZero', params: 2604210, arc_easy: 0.3211, arc_challenge: 0.2039, piqa: 0.5365, hellaswag: 0.2702, avg_4: 0.3331, url: 'https://huggingface.co/fromziro/Syn-2.6M' },
+      { name: 'Ant-5M', org: 'GODELEV', params: 4713344, arc_easy: 0.2639, arc_challenge: 0.2577, piqa: 0.4864, hellaswag: 0.2599, avg_4: 0.3195, url: 'https://huggingface.co/GODELEV/Ant-5m' },
+      { name: 'Er-Medium-12.5M', org: 'FromZero', params: 12497520, arc_easy: 0.3476, arc_challenge: 0.2082, piqa: 0.5783, hellaswag: 0.2841, avg_4: 0.3668, url: 'https://huggingface.co/fromziro/Er-Medium-12.5M' },
+      { name: 'michel-tiny', org: 'finnianx', params: 55719040, arc_easy: 0.3737, arc_challenge: 0.2176, piqa: 0.5734, hellaswag: 0.2815, avg_4: 0.3502, url: 'https://huggingface.co/finnianx/michel-tiny' },
+      { name: 'OdinNext-138M-Base', org: 'joelhenwang', params: 138449696, arc_easy: 0.4508, arc_challenge: 0.2381, piqa: 0.5952, hellaswag: 0.2809, avg_4: 0.3920, url: 'https://huggingface.co/joelhenwang/OdinNext-138M-Base' },
+      { name: 'OdinNext-138M-Instruct', org: 'joelhenwang', params: 138451232, arc_easy: 0.4440, arc_challenge: 0.2312, piqa: 0.5865, hellaswag: 0.2886, avg_4: 0.3888, url: 'https://huggingface.co/joelhenwang/OdinNext-138M-Instruct' },
+      { name: 'michel-micro', org: 'finnianx', params: 28355072, arc_easy: 0.3859, arc_challenge: 0.2312, piqa: 0.5762, hellaswag: 0.2823, avg_4: 0.3803, url: 'https://huggingface.co/finnianx/michel-micro' },
+      { name: 'kirk-tung', org: 'RTC', params: 53111296, arc_easy: 0.3043, arc_challenge: 0.2201, piqa: 0.5261, hellaswag: 0.2632, avg_4: 0.3184, url: 'https://huggingface.co/rtc2022/kirk-tung' },
+      { name: 'ettin-decoder-32m', org: 'JHU CLSP', params: 32081344, arc_easy: 0.3173, arc_challenge: 0.2201, piqa: 0.5229, hellaswag: 0.2779, avg_4: 0.3348, url: 'https://huggingface.co/jhu-clsp/ettin-decoder-32m' },
+      { name: 'ettin-decoder-17m', org: 'JHU CLSP', params: 16913600, arc_easy: 0.3165, arc_challenge: 0.2227, piqa: 0.5337, hellaswag: 0.2739, avg_4: 0.3438, url: 'https://huggingface.co/jhu-clsp/ettin-decoder-17m' },
+      { name: 'Er-Tiny-1.3M', org: 'FromZero', params: 1332744, arc_easy: 0.3009, arc_challenge: 0.2235, piqa: 0.5272, hellaswag: 0.2767, avg_4: 0.3292, url: 'https://huggingface.co/fromziro/Er-Tiny-1.3M' },
+      { name: 'michel-nano', org: 'finnianx', params: 5963008, arc_easy: 0.3329, arc_challenge: 0.2270, piqa: 0.5479, hellaswag: 0.2712, avg_4: 0.3464, url: 'https://huggingface.co/finnianx/michel-nano' },
+      { name: 'Supra-1.5-50M-base-exp', org: 'SupraLabs', params: 51786240, arc_easy: 0.4840, arc_challenge: 0.2551, piqa: 0.6001, hellaswag: 0.2978, avg_4: 0.4288, url: 'https://huggingface.co/SupraLabs/Supra-1.5-50M-base-exp' },
+      { name: 'ettin-decoder-68m', org: 'JHU CLSP', params: 68457664, arc_easy: 0.3274, arc_challenge: 0.2304, piqa: 0.5218, hellaswag: 0.2781, avg_4: 0.3394, url: 'https://huggingface.co/jhu-clsp/ettin-decoder-68m' },
+      { name: 'ettin-decoder-150m', org: 'JHU CLSP', params: 149655232, arc_easy: 0.2997, arc_challenge: 0.2423, piqa: 0.5125, hellaswag: 0.2595, avg_4: 0.3189, url: 'https://huggingface.co/jhu-clsp/ettin-decoder-150m' },
+      { name: 'Ant-10M', org: 'GODELEV', params: 9902336, arc_easy: 0.2753, arc_challenge: 0.2824, piqa: 0.5065, hellaswag: 0.2696, avg_4: 0.3302, url: 'https://huggingface.co/GODELEV/Ant-19m' },
+      { name: 'Supra-1.5-50M-Instruct-exp', org: 'SupraLabs', params: 51786240, arc_easy: 0.4394, arc_challenge: 0.2611, piqa: 0.5941, hellaswag: 0.2926, avg_4: 0.4077, url: 'https://huggingface.co/SupraLabs/Supra-1.5-50M-Instruct-exp' },
+      { name: 'SLM-10M', org: 'Liodon AI', params: 9968640, arc_easy: 0.3552, arc_challenge: 0.2346, piqa: 0.5707, hellaswag: 0.2740, avg_4: 0.3401, url: 'https://huggingface.co/liodon-ai/slm-10m' },
+      { name: 'Doge-20M', org: 'SmallDoge', params: 13118728, arc_easy: 0.3338, arc_challenge: 0.2073, piqa: 0.5430, hellaswag: 0.2661, avg_4: 0.3236, url: 'https://huggingface.co/SmallDoge/Doge-20M' }
     ];
 
     const BENCHMARKS = [
-      { key: 'avg', label: 'Avg' },
-      { key: 'arc', label: 'ARC-Easy' },
-      { key: 'arcChall', label: 'ARC-Challenge' },
+      { key: 'avg_4', label: 'Avg' },
+      { key: 'arc_easy', label: 'ARC-Easy' },
+      { key: 'arc_challenge', label: 'ARC-Challenge' },
       { key: 'hellaswag', label: 'HellaSwag' },
-      { key: 'piqa', label: 'PIQA' },
-      { key: 'arithmark2', label: 'ArithMark-2' }
+      { key: 'piqa', label: 'PIQA' }
     ];
 
-    let activeBenchmark = 'avg';
+    const BENCHMARK_NAMES = {
+      avg_4: 'Average',
+      arc_easy: 'ARC-Easy',
+      arc_challenge: 'ARC-Challenge',
+      hellaswag: 'HellaSwag',
+      piqa: 'PIQA'
+    };
+
+    let activeBenchmark = 'avg_4';
+    let activeSearch = '';
+    let sortKey = 'score';
     let chart = null;
 
-    const formatParams = (n) => {
+    const fmtParams = (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);
     };
 
-    const getScore = (m, key) => m[key] ?? null;
+    const toPct = (v) => (v * 100);
 
-    const mean = (arr) => arr.reduce((a, b) => a + b, 0) / arr.length;
-
-    function linearRegression(points) {
+    const linearRegression = (points) => {
       const n = points.length;
       let sumX = 0, sumY = 0, sumXY = 0, sumXX = 0;
       for (const p of points) {
@@ -389,111 +655,143 @@
       const slope = Math.abs(denom) < 1e-12 ? 0 : (n * sumXY - sumX * sumY) / denom;
       const intercept = n ? (sumY - slope * sumX) / n : 0;
       return { slope, intercept };
-    }
+    };
 
-    function computeLoss(data, benchmark, slope, intercept) {
-      const residuals = data.map(m => {
-        const pred = slope * m.x + intercept;
-        return m.y - pred;
+    const getScore = (m, key) => (m[key] ?? null);
+
+    const getVisibleModels = () => {
+      const q = activeSearch.trim().toLowerCase();
+      return MODELS.filter(m => {
+        const s = getScore(m, activeBenchmark);
+        if (s === null || !Number.isFinite(m.params)) return false;
+        if (!q) return true;
+        return (
+          m.name.toLowerCase().includes(q) ||
+          m.org.toLowerCase().includes(q)
+        );
       });
-      const mse = mean(residuals.map(r => r * r));
+    };
+
+    const 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 };
-    }
-
-    function getChartData() {
-      return MODELS
-        .filter(m => Number.isFinite(m.params) && getScore(m, activeBenchmark) !== null)
-        .map(m => ({
-          name: m.name,
-          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 renderBenchmarkButtons() {
+    const 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();
         });
       });
-    }
+    };
 
-    function renderModelList(data) {
-      const list = document.getElementById('modelList');
-      list.innerHTML = data.map(m => `
-        <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>
-          </div>
-          <div class="model-score">x=${m.x.toFixed(3)}</div>
-          <div class="model-score">y=${m.y.toFixed(2)}%</div>
-        </div>
-      `).join('');
+    const renderTable = (data) => {
+      const tbody = document.getElementById('modelTable');
+      const rows = [...data].sort((a, b) => {
+        if (sortKey === 'name') return a.name.localeCompare(b.name);
+        if (sortKey === 'org') return a.org.localeCompare(b.org);
+        if (sortKey === 'params') return a.params - b.params;
+        if (sortKey === 'score') return b.score - a.score;
+        if (sortKey === 'residual') return b.residual - a.residual;
+        if (sortKey === 'side') return b.residual - a.residual;
+        return 0;
+      });
 
-      list.querySelectorAll('.model-row').forEach(row => {
+      tbody.innerHTML = rows.map(m => {
+        const above = m.residual >= 0;
+        return `
+          <tr data-url="${m.url}">
+            <td>${m.name}</td>
+            <td class="muted">${m.org}</td>
+            <td class="muted">${fmtParams(m.params)} <span style="color:#6f737d;">(${m.params.toLocaleString()})</span></td>
+            <td>${m.score.toFixed(2)}%</td>
+            <td class="${above ? 'above' : 'below'}">${above ? '+' : ''}${m.residual.toFixed(2)} pts</td>
+            <td>${above ? '<span class="pill-up">Above line</span>' : '<span class="pill-down">Below line</span>'}</td>
+          </tr>
+        `;
+      }).join('');
+
+      tbody.querySelectorAll('tr').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) {
+    const updateStats = (slope, intercept, mse, rmse, count) => {
       document.getElementById('statSlope').textContent = slope.toFixed(4);
       document.getElementById('statIntercept').textContent = intercept.toFixed(2);
-      document.getElementById('statLoss').textContent = mse.toFixed(4);
-      document.getElementById('statRmse').textContent = rmse.toFixed(2);
+      document.getElementById('statMSE').textContent = mse.toFixed(4);
+      document.getElementById('statRMSE').textContent = rmse.toFixed(2);
       document.getElementById('countBadge').textContent = `${count} models`;
-    }
+      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 = getChartData();
-      if (data.length < 2) return;
+      const data = getVisibleModels().map(m => ({
+        name: m.name,
+        org: m.org,
+        params: m.params,
+        score: toPct(m[activeBenchmark]),
+        url: m.url,
+        x: Math.log10(m.params)
+      }));
+
+      if (data.length < 2) {
+        document.getElementById('chartTitle').textContent = 'Not enough models';
+        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 = '';
+        if (chart) chart.destroy();
+        return;
+      }
 
-      const points = data.map(d => ({ x: d.x, y: d.y }));
+      const points = data.map(d => ({ x: d.x, y: d.score }));
       const { slope, intercept } = linearRegression(points);
-      const { mse, rmse, residuals } = computeLoss(data, activeBenchmark, slope, intercept);
-      data.forEach((d, i) => { d.residual = residuals[i]; });
+      const { mse, rmse, residuals } = computeLoss(data, slope, intercept);
+
+      data.forEach((d, i) => {
+        d.residual = residuals[i];
+      });
 
       updateStats(slope, intercept, mse, rmse, data.length);
-      renderModelList(data);
 
       const xMin = Math.min(...data.map(d => d.x));
       const xMax = Math.max(...data.map(d => d.x));
-      const pad = Math.max(0.2, (xMax - xMin) * 0.09);
-      const xLow = xMin - pad;
-      const xHigh = xMax + pad;
+      const xPad = Math.max(0.2, (xMax - xMin) * 0.09);
+      const xLow = xMin - xPad;
+      const xHigh = xMax + xPad;
       const yLow = slope * xLow + intercept;
       const yHigh = slope * xHigh + intercept;
-      const yMin = Math.min(...data.map(d => d.y), yLow) - 1.5;
-      const yMax = Math.max(...data.map(d => d.y), yHigh) + 1.8;
+
+      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 titleMap = {
-        avg: 'Average score vs log parameters',
-        arc: 'ARC-Easy vs log parameters',
-        arcChall: 'ARC-Challenge vs log parameters',
+        avg_4: 'Average score vs log parameters',
+        arc_easy: 'ARC-Easy vs log parameters',
+        arc_challenge: 'ARC-Challenge vs log parameters',
         hellaswag: 'HellaSwag vs log parameters',
-        piqa: 'PIQA vs log parameters',
-        arithmark2: 'ArithMark-2 vs log parameters'
+        piqa: 'PIQA vs log parameters'
       };
 
-      document.getElementById('chartTitle').textContent = titleMap[activeBenchmark] || activeBenchmark;
-      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)}.`;
+      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)}.`;
+
+      renderTable(data);
 
       const ctx = document.getElementById('scatterChart').getContext('2d');
       if (chart) chart.destroy();
@@ -510,7 +808,9 @@
                 { x: xHigh, y: yHigh }
               ],
               borderColor: 'rgba(236, 236, 241, 0.98)',
-              borderWidth: 3.2,
+              borderWidth: 3,
+              borderDash: [2, 7],
+              borderCapStyle: 'round',
               pointRadius: 0,
               tension: 0,
               fill: false,
@@ -519,12 +819,26 @@
             {
               label: 'Models',
               data: data.map(d => ({ ...d })),
+              parsing: false,
               pointRadius: 7,
               pointHoverRadius: 10,
+              pointHitRadius: 12,
               borderWidth: 1.5,
-              backgroundColor: 'rgba(225, 226, 232, 0.86)',
-              borderColor: 'rgba(255,255,255,0.92)',
-              hoverBackgroundColor: 'rgba(245, 245, 248, 0.98)',
+              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)';
+              },
+              borderColor: (ctx) => {
+                const raw = ctx.raw;
+                if (!raw) return 'rgba(255,255,255,0.92)';
+                return raw.residual >= 0
+                  ? 'rgba(255,255,255,0.98)'
+                  : 'rgba(220,220,224,0.55)';
+              },
+              hoverBackgroundColor: 'rgba(247, 247, 250, 0.99)',
               hoverBorderColor: 'rgba(255,255,255,0.98)',
               order: 2
             }
@@ -535,6 +849,9 @@
           maintainAspectRatio: false,
           animation: { duration: 0 },
           interaction: { mode: 'nearest', intersect: true },
+          onHover: (event, elements) => {
+            event.native.target.style.cursor = elements.length ? 'pointer' : 'default';
+          },
           onClick: (event, elements) => {
             if (!elements.length) return;
             const hit = elements[0];
@@ -545,11 +862,11 @@
           plugins: {
             legend: { display: false },
             tooltip: {
-              backgroundColor: 'rgba(15,15,18,0.97)',
-              borderColor: 'rgba(236,236,241,0.22)',
+              backgroundColor: 'rgba(12,12,15,0.97)',
+              borderColor: 'rgba(236,236,241,0.24)',
               borderWidth: 1,
               titleColor: '#ffffff',
-              bodyColor: '#d4d4da',
+              bodyColor: '#d7d7de',
               padding: 12,
               displayColors: false,
               callbacks: {
@@ -559,8 +876,8 @@
                   const pred = slope * d.x + intercept;
                   const resid = d.y - pred;
                   return [
-                    `Params: ${formatParams(d.params)} (${d.params.toLocaleString()})`,
-                    `Score: ${d.y.toFixed(2)}%`,
+                    `Params: ${fmtParams(d.params)} (${d.params.toLocaleString()})`,
+                    `Score: ${d.score.toFixed(2)}%`,
                     `Residual: ${resid >= 0 ? '+' : ''}${resid.toFixed(2)} pts`,
                     `Prediction: ${pred.toFixed(2)}%`
                   ];
@@ -575,13 +892,13 @@
               max: xHigh,
               grid: { color: 'rgba(255,255,255,0.045)' },
               ticks: {
-                color: '#7f7f88',
+                color: '#84848d',
                 callback: v => `10^${Number(v).toFixed(1)}`
               },
               title: {
                 display: true,
                 text: 'Log₁₀(parameters)',
-                color: '#7f7f88',
+                color: '#84848d',
                 font: { weight: '600' }
               }
             },
@@ -590,13 +907,13 @@
               max: yMax,
               grid: { color: 'rgba(255,255,255,0.045)' },
               ticks: {
-                color: '#7f7f88',
+                color: '#84848d',
                 callback: v => `${Number(v).toFixed(0)}%`
               },
               title: {
                 display: true,
                 text: 'Score (%)',
-                color: '#7f7f88',
+                color: '#84848d',
                 font: { weight: '600' }
               }
             }
@@ -605,7 +922,19 @@
       });
     }
 
+    document.getElementById('searchBox').addEventListener('input', (e) => {
+      activeSearch = e.target.value || '';
+      render();
+    });
+
+    document.querySelectorAll('thead th[data-sort]').forEach(th => {
+      th.addEventListener('click', () => {
+        sortKey = th.dataset.sort;
+        render();
+      });
+    });
+
     render();
   </script>
 </body>
-</html>"}]}
+</html>