Upload 6 files

README.md

@@ -1,10 +1,14 @@
 ---
-title: Bench Labs Leaderboard
-emoji: 💻
-colorFrom: gray
-colorTo: green
+title: Leaderboard
+emoji: 🏆
+colorFrom: green
+colorTo: blue
 sdk: static
 pinned: false
+license: apache-2.0
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Model performance across Bench Labs' benchmark suite — Effortless, Easy, Mid, and AGI.
+Reads from `models.json`, no backend required.
+
+all rights reserved @bench-labs

background.js

@@ -0,0 +1,90 @@
+(() => {
+  document.addEventListener("DOMContentLoaded", () => {
+    const bg = document.querySelector(".background");
+    const isMobile = window.matchMedia("(max-width: 768px)").matches;
+
+    // ---- Clouds ----
+    if (bg && !bg.querySelector(".cloud")) {
+      if (!isMobile && !document.getElementById("cloud-fluff")) {
+        const defs = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        defs.setAttribute("width", "0");
+        defs.setAttribute("height", "0");
+        defs.setAttribute("aria-hidden", "true");
+        defs.style.position = "absolute";
+        defs.innerHTML =
+          '<filter id="cloud-fluff" x="-150%" y="-150%" width="400%" height="400%">' +
+          '<feTurbulence type="fractalNoise" baseFrequency="0.012 0.02" numOctaves="4" seed="11" result="noise"/>' +
+          '<feDisplacementMap in="SourceGraphic" in2="noise" scale="120"/>' +
+          "</filter>";
+        document.body.appendChild(defs);
+      }
+      const cloudCount = isMobile ? 2 : 4;
+      for (let i = 1; i <= cloudCount; i++) {
+        const cloud = document.createElement("div");
+        cloud.className = "cloud cloud-" + i + (isMobile ? " cloud-simple" : "");
+        cloud.setAttribute("aria-hidden", "true");
+        bg.appendChild(cloud);
+      }
+    }
+
+    // ---- Grass strip ----
+    if (!document.querySelector(".grass")) {
+      const NS = "http://www.w3.org/2000/svg";
+      const W = isMobile ? 1200 : 2400;
+      const H = 70;
+      const svg = document.createElementNS(NS, "svg");
+      svg.setAttribute("class", "grass");
+      svg.setAttribute("viewBox", "0 0 " + W + " " + H);
+      svg.setAttribute("preserveAspectRatio", "xMidYMax slice");
+      svg.setAttribute("aria-hidden", "true");
+
+      svg.innerHTML =
+        '<defs><linearGradient id="grass-base" x1="0" y1="1" x2="0" y2="0">' +
+        '<stop offset="0" stop-color="#3e7a46" stop-opacity="0.55"/>' +
+        '<stop offset="1" stop-color="#3e7a46" stop-opacity="0"/>' +
+        "</linearGradient></defs>" +
+        '<rect x="0" y="' + (H - 16) + '" width="' + W + '" height="16" fill="url(#grass-base)"/>';
+
+      const layers = isMobile
+        ? [
+            { count: 50, hMin: 18, hMax: 32, colors: ["#4f9854"], opacity: 0.9 },
+            { count: 40, hMin: 24, hMax: 42, colors: ["#63ad64"], opacity: 1 },
+          ]
+        : [
+            { count: 190, hMin: 18, hMax: 36, colors: ["#3e7a46", "#457f4b", "#4a8a50"], opacity: 0.8 },
+            { count: 160, hMin: 26, hMax: 52, colors: ["#4f9854", "#57a05a", "#63ad64", "#6db36e"], opacity: 1 },
+          ];
+
+      layers.forEach((layer) => {
+        const g = document.createElementNS(NS, "g");
+        g.setAttribute("opacity", layer.opacity);
+        for (let i = 0; i < layer.count; i++) {
+          const x = Math.random() * W;
+          const h = layer.hMin + Math.random() * (layer.hMax - layer.hMin);
+          const lean = (Math.random() - 0.5) * 16;
+          const w = 3 + Math.random() * 3;
+          const color = layer.colors[(Math.random() * layer.colors.length) | 0];
+          const blade = document.createElementNS(NS, "path");
+          blade.setAttribute(
+            "d",
+            "M " + x + " " + H +
+              " Q " + (x + lean * 0.2) + " " + (H - h * 0.6) + " " + (x + lean) + " " + (H - h) +
+              " Q " + (x + lean * 0.6 + w * 0.5) + " " + (H - h * 0.55) + " " + (x + w) + " " + H + " Z"
+          );
+          blade.setAttribute("fill", color);
+          blade.style.transformBox = "fill-box";
+          blade.style.transformOrigin = "50% 100%";
+          if (!isMobile) {
+            blade.style.animation =
+              "blade-sway " + (2.6 + Math.random() * 2.4).toFixed(2) + "s ease-in-out " +
+              (-(x / W) * 3 - Math.random()).toFixed(2) + "s infinite alternate";
+          }
+          g.appendChild(blade);
+        }
+        svg.appendChild(g);
+      });
+
+      document.body.appendChild(svg);
+    }
+  });
+})();

index.html

@@ -99,4 +99,4 @@
 
 <script src="script.js" defer></script>
 </body>
-</html>
+</html>

models.json

@@ -0,0 +1,122 @@
+{
+  "updated": "2026-07-18",
+  "benchmarks": [
+    {
+      "id": "bench-effortless-6-2026",
+      "label": "Effortless",
+      "tier": 1,
+      "rows": 240,
+      "metric": "exact_match",
+      "dataset_url": "https://huggingface.co/datasets/bench-labs/bench-effortless-6-2026",
+      "description": "Sanity-layer benchmark. No ambiguity, no trick questions — tests whether a model can avoid failing on simple tasks."
+    },
+    {
+      "id": "bench-easy-6-2026",
+      "label": "Easy",
+      "tier": 2,
+      "rows": 300,
+      "metric": "exact_match",
+      "dataset_url": "https://huggingface.co/datasets/bench-labs/bench-easy-6-2026",
+      "description": "Effortless-to-Easy tier QA. Structured language understanding and controlled generalization."
+    },
+    {
+      "id": "bench-mid-6-2026",
+      "label": "Mid",
+      "tier": 3,
+      "rows": 155,
+      "metric": "acc_norm",
+      "dataset_url": "https://huggingface.co/datasets/bench-labs/bench-mid-6-2026",
+      "description": "Easy-to-Mid tier multiple-choice QA scored via lm-eval loglikelihood, target_scores dict."
+    },
+    {
+      "id": "bench-AGI",
+      "label": "AGI",
+      "tier": 4,
+      "rows": null,
+      "metric": "rank_order",
+      "dataset_url": "https://huggingface.co/datasets/bench-labs/bench-AGI",
+      "description": "Hard, open-ended questions with human-argued reasoning traces, graded blind by a multi-vendor panel. Rank-order evaluation, not absolute scoring."
+    }
+  ],
+  "categories": [
+    "Knowledge-basic", "Knowledge-definitions",
+    "Math-arithmetic", "Math-pattern", "Math-reasoning",
+    "Logic-deduction", "Logic-pattern", "Logic-consistency",
+    "Language-comprehension", "Language-transformation", "Language-structure",
+    "Commonsense-reasoning", "Commonsense-causality", "Commonsense-simulation",
+    "Pattern-matching", "Pattern-recognition", "Pattern-generation"
+  ],
+  "models": [
+    {
+      "id": "qwen2.5-0.5b",
+      "name": "Qwen/Qwen2.5-0.5B",
+      "org": "Qwen",
+      "params_b": 0.5,
+      "url": "https://huggingface.co/Qwen/Qwen2.5-0.5B",
+      "eval_source": "https://huggingface.co/spaces/bench-labs/blog?post=bMid-qwen0-5.html",
+      "runs": {
+        "bench-effortless-6-2026": {
+          "score": 0.612,
+          "n": 240,
+          "notes": "Exact-match, normalized. Extrapolated from Mid-tier category profile."
+        },
+        "bench-easy-6-2026": {
+          "score": 0.547,
+          "n": 300,
+          "notes": "Exact-match, normalized."
+        },
+        "bench-mid-6-2026": {
+          "score": 0.6103,
+          "n": 155,
+          "acc": 0.5806,
+          "acc_norm": 0.6000,
+          "soft_score": 0.5871,
+          "soft_score_norm": 0.6103,
+          "stderr": 0.0388,
+          "categories": {
+            "Commonsense-causality": { "n": 5, "acc": 1.000, "acc_norm": 1.000 },
+            "Commonsense-reasoning": { "n": 10, "acc": 0.700, "acc_norm": 0.600 },
+            "Commonsense-simulation": { "n": 10, "acc": 0.300, "acc_norm": 0.500 },
+            "Knowledge-basic": { "n": 8, "acc": 1.000, "acc_norm": 1.000 },
+            "Knowledge-definitions": { "n": 10, "acc": 0.700, "acc_norm": 0.900 },
+            "Language-comprehension": { "n": 10, "acc": 0.600, "acc_norm": 0.800 },
+            "Language-structure": { "n": 10, "acc": 0.000, "acc_norm": 0.100 },
+            "Language-transformation": { "n": 10, "acc": 0.500, "acc_norm": 0.600 },
+            "Logic-consistency": { "n": 5, "acc": 0.200, "acc_norm": 0.200 },
+            "Logic-deduction": { "n": 10, "acc": 0.500, "acc_norm": 0.500 },
+            "Logic-pattern": { "n": 10, "acc": 0.400, "acc_norm": 0.400 },
+            "Math-arithmetic": { "n": 8, "acc": 0.625, "acc_norm": 0.625 },
+            "Math-pattern": { "n": 10, "acc": 0.800, "acc_norm": 0.800 },
+            "Math-reasoning": { "n": 10, "acc": 0.600, "acc_norm": 0.500 },
+            "Pattern-generation": { "n": 9, "acc": 0.778, "acc_norm": 0.667 },
+            "Pattern-matching": { "n": 10, "acc": 1.000, "acc_norm": 0.800 },
+            "Pattern-recognition": { "n": 10, "acc": 0.300, "acc_norm": 0.300 }
+          }
+        },
+        "bench-AGI": { "score": null, "n": null, "notes": "Not yet evaluated on this tier." }
+      }
+    },
+    {
+      "id": "qwen2.5-1.5b-instruct",
+      "name": "Qwen/Qwen2.5-1.5B-Instruct",
+      "org": "Qwen",
+      "params_b": 1.5,
+      "url": "https://huggingface.co/Qwen/Qwen2.5-1.5B-Instruct",
+      "eval_source": "https://huggingface.co/spaces/bench-labs/blog?post=evaluatingllm.html",
+      "runs": {
+        "bench-effortless-6-2026": {
+          "score": 0.783,
+          "n": 240,
+          "notes": "Strong on commonsense & language transformation; weak on symbolic logic per the hybrid evaluator writeup."
+        },
+        "bench-easy-6-2026": {
+          "score": 0.741,
+          "n": 300,
+          "notes": "Hybrid category-aware scoring (strict / flexible / semantic)."
+        },
+        "bench-mid-6-2026": { "score": null, "n": null, "notes": "Not yet evaluated on this tier." },
+        "bench-AGI": { "score": null, "n": null, "notes": "Not yet evaluated on this tier." }
+      }
+    }
+  ]
+}

script.js

@@ -0,0 +1,376 @@
+(() => {
+  "use strict";
+
+  const state = {
+    data: null,
+    activeBenchmark: null,
+    search: "",
+    sort: "score-desc",
+  };
+
+  const els = {};
+
+  document.addEventListener("DOMContentLoaded", init);
+
+  async function init() {
+    els.tierStrip = document.getElementById("tier-strip");
+    els.metricSelect = document.getElementById("metric-select");
+    els.sortSelect = document.getElementById("sort-select");
+    els.searchInput = document.getElementById("model-search");
+    els.tbody = document.getElementById("leaderboard-body");
+    els.emptyState = document.getElementById("empty-state");
+    els.table = document.getElementById("leaderboard-table");
+    els.detailPanel = document.getElementById("detail-panel");
+    els.detailTitle = document.getElementById("detail-title");
+    els.detailSubtitle = document.getElementById("detail-subtitle");
+    els.detailCats = document.getElementById("detail-cats");
+    els.detailClose = document.getElementById("detail-close");
+
+    try {
+      const res = await fetch("models.json", { cache: "no-store" });
+      if (!res.ok) throw new Error("HTTP " + res.status);
+      state.data = await res.json();
+    } catch (err) {
+      renderLoadError(err);
+      return;
+    }
+
+    state.activeBenchmark = state.data.benchmarks[0]?.id || null;
+
+    buildTierStrip();
+    buildMetricSelect();
+    bindControls();
+    render();
+  }
+
+  function renderLoadError(err) {
+    els.tbody = document.getElementById("leaderboard-body");
+    els.tbody.innerHTML =
+      '<tr><td colspan="4" style="padding:32px;text-align:center;color:var(--muted);">' +
+      "Couldn't load <code>models.json</code> (" + escapeHtml(String(err.message || err)) +
+      "). Make sure it sits next to index.html." +
+      "</td></tr>";
+  }
+
+  // -------------------- TIER STRIP --------------------
+
+  function buildTierStrip() {
+    const frag = document.createDocumentFragment();
+    state.data.benchmarks
+      .slice()
+      .sort((a, b) => a.tier - b.tier)
+      .forEach((bench) => {
+        const card = document.createElement("button");
+        card.type = "button";
+        card.className = "tier-card" + (bench.id === state.activeBenchmark ? " active" : "");
+        card.dataset.benchmarkId = bench.id;
+
+        const rowsLabel = bench.rows != null ? bench.rows + " rows" : "open-ended";
+
+        card.innerHTML =
+          '<span class="tier-num">Tier ' + bench.tier + " · " + escapeHtml(bench.label) + "</span>" +
+          "<h3>" + escapeHtml(bench.id) + "</h3>" +
+          "<p>" + escapeHtml(bench.description) + "</p>" +
+          '<div class="tier-meta">' +
+          "<span>" + rowsLabel + "</span>" +
+          "<span>" + escapeHtml(bench.metric) + "</span>" +
+          "</div>";
+
+        card.addEventListener("click", () => {
+          state.activeBenchmark = bench.id;
+          closeDetail();
+          buildTierStrip();
+          buildMetricSelect();
+          render();
+        });
+
+        frag.appendChild(card);
+      });
+
+    els.tierStrip.innerHTML = "";
+    els.tierStrip.appendChild(frag);
+  }
+
+  // -------------------- METRIC SELECT --------------------
+
+  function buildMetricSelect() {
+    const bench = getActiveBenchmark();
+    if (!bench) return;
+
+    // Collect every metric key present across model runs for this benchmark,
+    // beyond the headline "score", so users can pivot (acc vs acc_norm etc).
+    const keys = new Set(["score"]);
+    state.data.models.forEach((m) => {
+      const run = m.runs?.[bench.id];
+      if (!run) return;
+      Object.keys(run).forEach((k) => {
+        if (typeof run[k] === "number" && k !== "n" && k !== "stderr") keys.add(k);
+      });
+    });
+
+    const labels = {
+      score: "Headline score",
+      acc: "acc",
+      acc_norm: "acc_norm",
+      soft_score: "soft_score",
+      soft_score_norm: "soft_score_norm",
+      stderr: "stderr",
+    };
+
+    const prev = els.metricSelect.value;
+    els.metricSelect.innerHTML = "";
+    Array.from(keys).forEach((k) => {
+      const opt = document.createElement("option");
+      opt.value = k;
+      opt.textContent = labels[k] || k;
+      els.metricSelect.appendChild(opt);
+    });
+    if (keys.has(prev)) els.metricSelect.value = prev;
+  }
+
+  // -------------------- CONTROLS --------------------
+
+  function bindControls() {
+    els.searchInput.addEventListener("input", (e) => {
+      state.search = e.target.value.trim().toLowerCase();
+      render();
+    });
+
+    els.sortSelect.addEventListener("change", (e) => {
+      state.sort = e.target.value;
+      render();
+    });
+
+    els.metricSelect.addEventListener("change", render);
+
+    els.table.querySelectorAll("thead th[data-key]").forEach((th) => {
+      th.addEventListener("click", () => {
+        const key = th.dataset.key;
+        if (key === "score") {
+          state.sort = state.sort === "score-desc" ? "score-asc" : "score-desc";
+        } else if (key === "params") {
+          state.sort = state.sort === "params-asc" ? "params-desc" : "params-asc";
+        } else if (key === "name") {
+          state.sort = "name-asc";
+        }
+        els.sortSelect.value = state.sort;
+        render();
+      });
+    });
+
+    els.detailClose.addEventListener("click", closeDetail);
+  }
+
+  // -------------------- HELPERS --------------------
+
+  function getActiveBenchmark() {
+    return state.data.benchmarks.find((b) => b.id === state.activeBenchmark) || null;
+  }
+
+  function getMetricValue(run, metricKey) {
+    if (!run) return null;
+    const v = run[metricKey];
+    return typeof v === "number" ? v : null;
+  }
+
+  function scoreClass(v) {
+    if (v == null) return "";
+    if (v >= 0.66) return "good";
+    if (v >= 0.4) return "ok";
+    return "bad";
+  }
+
+  function fmtScore(v) {
+    if (v == null) return null;
+    return (v * 100).toFixed(1) + "%";
+  }
+
+  function escapeHtml(s) {
+    return String(s)
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;");
+  }
+
+  // -------------------- RENDER TABLE --------------------
+
+  function render() {
+    const bench = getActiveBenchmark();
+    if (!bench) return;
+
+    const metricKey = els.metricSelect.value || "score";
+
+    let rows = state.data.models.map((m) => {
+      const run = m.runs?.[bench.id] || null;
+      const value = getMetricValue(run, metricKey);
+      return { model: m, run, value };
+    });
+
+    if (state.search) {
+      rows = rows.filter(
+        (r) =>
+          r.model.name.toLowerCase().includes(state.search) ||
+          (r.model.org || "").toLowerCase().includes(state.search)
+      );
+    }
+
+    rows = sortRows(rows, state.sort);
+
+    els.tbody.innerHTML = "";
+    if (rows.length === 0) {
+      els.emptyState.hidden = false;
+      els.table.hidden = true;
+      return;
+    }
+    els.emptyState.hidden = true;
+    els.table.hidden = false;
+
+    const frag = document.createDocumentFragment();
+    rows.forEach((r, idx) => {
+      frag.appendChild(buildRow(r, idx + 1, bench));
+    });
+    els.tbody.appendChild(frag);
+
+    updateSortIndicators();
+  }
+
+  function sortRows(rows, sort) {
+    const withScore = (r) => (r.value == null ? -Infinity : r.value);
+    const withParams = (r) => (r.model.params_b == null ? Infinity : r.model.params_b);
+
+    switch (sort) {
+      case "score-asc":
+        return rows.slice().sort((a, b) => {
+          if (a.value == null && b.value == null) return 0;
+          if (a.value == null) return 1;
+          if (b.value == null) return 1;
+          return a.value - b.value;
+        });
+      case "params-asc":
+        return rows.slice().sort((a, b) => withParams(a) - withParams(b));
+      case "params-desc":
+        return rows.slice().sort((a, b) => withParams(b) - withParams(a));
+      case "name-asc":
+        return rows.slice().sort((a, b) => a.model.name.localeCompare(b.model.name));
+      case "score-desc":
+      default:
+        return rows.slice().sort((a, b) => {
+          if (a.value == null && b.value == null) return 0;
+          if (a.value == null) return 1;
+          if (b.value == null) return -1;
+          return b.value - a.value;
+        });
+    }
+  }
+
+  function updateSortIndicators() {
+    els.table.querySelectorAll("thead th[data-key]").forEach((th) => {
+      th.classList.remove("sorted");
+      const arrow = th.querySelector(".sort-arrow");
+      if (!arrow) return;
+      const key = th.dataset.key;
+      const active =
+        (key === "score" && (state.sort === "score-desc" || state.sort === "score-asc")) ||
+        (key === "params" && (state.sort === "params-asc" || state.sort === "params-desc")) ||
+        (key === "name" && state.sort === "name-asc");
+      if (active) {
+        th.classList.add("sorted");
+        arrow.textContent = state.sort.endsWith("asc") ? "▲" : "▼";
+      }
+    });
+  }
+
+  function buildRow(r, rank, bench) {
+    const tr = document.createElement("tr");
+    const { model, run, value } = r;
+
+    // rank
+    const rankTd = document.createElement("td");
+    rankTd.className = "rank-cell" + (rank <= 3 ? " top-" + rank : "");
+    rankTd.textContent = value == null ? "–" : String(rank);
+    tr.appendChild(rankTd);
+
+    // model
+    const modelTd = document.createElement("td");
+    modelTd.innerHTML =
+      '<div class="model-cell">' +
+      '<span class="model-name"><a href="' + escapeHtml(model.url) + '" target="_blank" rel="noopener">' +
+      escapeHtml(model.name) + "</a></span>" +
+      '<span class="model-org">' + escapeHtml(model.org || "") + "</span>" +
+      "</div>";
+    tr.appendChild(modelTd);
+
+    // params
+    const paramsTd = document.createElement("td");
+    paramsTd.className = "params-cell";
+    paramsTd.textContent = model.params_b != null ? model.params_b + "B" : "—";
+    tr.appendChild(paramsTd);
+
+    // score
+    const scoreTd = document.createElement("td");
+    scoreTd.className = "score-cell";
+    if (value == null) {
+      scoreTd.innerHTML = '<span class="score-na">not evaluated</span>';
+    } else {
+      const pct = Math.max(0, Math.min(100, value * 100));
+      const cls = scoreClass(value);
+      scoreTd.innerHTML =
+        '<span class="score-pill">' +
+        '<span class="score-num ' + cls + '">' + fmtScore(value) + "</span>" +
+        '<span class="score-bar-track"><span class="score-bar-fill" style="width:' + pct.toFixed(1) + '%"></span></span>' +
+        "</span>";
+    }
+    tr.appendChild(scoreTd);
+
+    if (run && run.categories) {
+      tr.style.cursor = "pointer";
+      tr.title = "Click for per-category breakdown";
+      tr.addEventListener("click", () => openDetail(model, run, bench));
+    }
+
+    return tr;
+  }
+
+  // -------------------- DETAIL PANEL --------------------
+
+  function openDetail(model, run, bench) {
+    els.detailTitle.textContent = model.name + " on " + bench.id;
+    els.detailSubtitle.textContent =
+      "Per-category breakdown" + (run.n ? " · n=" + run.n : "") +
+      (run.stderr != null ? " · stderr " + run.stderr : "");
+
+    const cats = run.categories || {};
+    const frag = document.createDocumentFragment();
+    Object.keys(cats)
+      .sort()
+      .forEach((catName) => {
+        const c = cats[catName];
+        const v = typeof c.acc_norm === "number" ? c.acc_norm : c.acc;
+        const pct = Math.max(0, Math.min(100, (v || 0) * 100));
+        const cls = scoreClass(v);
+        const color =
+          cls === "good" ? "var(--score-good)" : cls === "ok" ? "var(--score-ok)" : "var(--score-bad)";
+
+        const row = document.createElement("div");
+        row.className = "cat-row";
+        row.innerHTML =
+          '<div class="cat-row-top">' +
+          '<span class="cat-name">' + escapeHtml(catName) + "</span>" +
+          '<span class="cat-score" style="color:' + color + '">' + fmtScore(v) + "</span>" +
+          "</div>" +
+          '<div class="cat-bar-track"><div class="cat-bar-fill" style="width:' + pct.toFixed(1) + "%;background:" + color + ';"></div></div>' +
+          '<div class="cat-n">n=' + c.n + "</div>";
+        frag.appendChild(row);
+      });
+
+    els.detailCats.innerHTML = "";
+    els.detailCats.appendChild(frag);
+    els.detailPanel.classList.add("open");
+    els.detailPanel.scrollIntoView({ behavior: "smooth", block: "nearest" });
+  }
+
+  function closeDetail() {
+    els.detailPanel.classList.remove("open");
+  }
+})();

style.css

@@ -1,28 +1,639 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@1,400;1,600&display=swap');
+
+:root {
+    --bg: #eaf5ee;
+    --text: #2d3e50;
+    --heading: #1a2b3c;
+    --muted: #6b7f92;
+    --surface: rgba(255,255,255,0.55);
+    --surface-2: rgba(255,255,255,0.75);
+    --border: rgba(255,255,255,0.7);
+    --border-soft: rgba(120, 160, 200, 0.18);
+    --accent: #4a90c2;
+    --accent-soft: #7cb8e0;
+    --accent-green: #5da570;
+    --accent-green-soft: #9ccba6;
+    --white: #ffffff;
+    --transition: 0.2s ease;
+    --radius: 18px;
+    --shadow-soft: 0 8px 32px rgba(120, 160, 200, 0.15);
+    --shadow-hover: 0 12px 40px rgba(74, 144, 194, 0.2);
+
+    /* score heat scale, reuses the blog's good/ok/bad palette */
+    --score-good: #00c853;
+    --score-ok: #ffb300;
+    --score-bad: #ff3d00;
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+html { scroll-behavior: smooth; }
+
+@media (prefers-reduced-motion: reduce) {
+    html { scroll-behavior: auto; }
+    *, *::before, *::after {
+        transition-duration: 0.01ms !important;
+        animation-duration: 0.01ms !important;
+    }
+}
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    background: var(--bg);
+    color: var(--text);
+    font-family: Inter, system-ui, sans-serif;
+    line-height: 1.6;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    padding-bottom: 80px;
+}
+
+h1, h2, h3, h4 { color: var(--heading); letter-spacing: -0.02em; }
+h1 { font-family: 'Newsreader', serif; font-style: italic; }
+
+a { color: var(--accent); text-decoration: none; transition: opacity var(--transition); }
+a:hover { opacity: 0.75; }
+a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; opacity: 1; }
+
+/* -------------------- BACKGROUND -------------------- */
+
+.background {
+    position: fixed;
+    inset: 0;
+    z-index: -1;
+    background:
+        radial-gradient(ellipse 130% 45% at 50% 108%, rgba(125, 180, 130, 0.35) 0%, transparent 70%),
+        linear-gradient(180deg, #7cb8e0 0%, #a8d0e8 35%, #d8ebf5 60%, #dceee2 82%, #e4f2e6 100%);
+    overflow: hidden;
+}
+
+.background::before {
+    content: '';
+    position: absolute;
+    top: 10%; left: -10%;
+    width: 60%; height: 40%;
+    background: radial-gradient(ellipse at center, rgba(255,255,255,0.6) 0%, transparent 70%);
+    filter: blur(40px);
+    pointer-events: none;
+}
+
+.background::after {
+    content: '';
+    position: absolute;
+    top: 30%; right: -5%;
+    width: 50%; height: 30%;
+    background: radial-gradient(ellipse at center, rgba(255,255,255,0.5) 0%, transparent 70%);
+    filter: blur(50px);
+    pointer-events: none;
+}
+
+.background .cloud {
+    position: absolute;
+    left: 0;
+    width: 220px;
+    height: 60px;
+    border-radius: 50%;
+    background: rgba(255,255,255,0.9);
+    box-shadow:
+        -70px 12px 30px 6px rgba(255,255,255,0.75),
+        80px -12px 34px 10px rgba(255,255,255,0.9),
+        30px 14px 36px 8px rgba(255,255,255,0.8),
+        -20px -26px 28px 2px rgba(255,255,255,0.95),
+        60px 22px 30px 4px rgba(250,253,255,0.7),
+        0 34px 26px -14px rgba(150,175,200,0.4);
+    filter: url(#cloud-fluff);
+    animation: cloud-drift linear infinite;
+    will-change: transform;
+}
+
+.background .cloud-1 { top: 8%;  --cloud-scale: 1.15; animation-duration: 210s; animation-delay: -80s; }
+.background .cloud-2 { top: 24%; --cloud-scale: 0.75; opacity: 0.85; animation-duration: 260s; animation-delay: -180s; }
+.background .cloud-3 { top: 14%; --cloud-scale: 1.5;  opacity: 0.95; animation-duration: 300s; animation-delay: -40s; }
+.background .cloud-4 { top: 36%; --cloud-scale: 0.55; opacity: 0.6;  animation-duration: 320s; animation-delay: -240s; }
+.background .cloud-simple { filter: none; }
+
+@keyframes cloud-drift {
+    from { transform: translateX(-45vw) scale(var(--cloud-scale, 1)); }
+    to   { transform: translateX(120vw) scale(var(--cloud-scale, 1)); }
+}
+
+.grass {
+    position: fixed;
+    bottom: -2px; left: 0;
+    width: 100%; height: 70px;
+    z-index: 50;
+    pointer-events: none;
+}
+
+@keyframes blade-sway {
+    from { transform: rotate(-2.4deg); }
+    to   { transform: rotate(3.2deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .grass path { animation: none !important; }
+}
+
+/* -------------------- LAYOUT -------------------- */
+
+.container {
+    max-width: 1180px;
+    margin: auto;
+    padding: 64px 24px 40px;
+}
+
+.hero { margin-bottom: 36px; }
+
+.eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--accent);
+    font-size: 0.78rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    margin-bottom: 14px;
+}
+
+.eyebrow a { color: var(--accent); }
+
+.hero h1 {
+    font-size: clamp(2.2rem, 6vw, 3.4rem);
+    font-weight: 800;
+    letter-spacing: -0.05em;
+    line-height: 1.1;
+    background: linear-gradient(135deg, #5da570 0%, #0c1927 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-shadow: 0 2px 20px rgba(255,255,255,0.3);
+}
+
+.subtitle {
+    margin-top: 12px;
+    max-width: 640px;
+    color: var(--muted);
+    font-size: 1.05rem;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* -------------------- TIER STRIP -------------------- */
+
+.tier-strip {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
+    gap: 14px;
+    margin: 32px 0 30px;
+}
+
+.tier-card {
+    padding: 18px 20px;
+    border-radius: var(--radius);
+    background: var(--surface);
+    border: 1px solid var(--border);
+    backdrop-filter: blur(20px) saturate(1.2);
+    -webkit-backdrop-filter: blur(20px) saturate(1.2);
+    box-shadow: var(--shadow-soft);
+    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
+    cursor: pointer;
+}
+
+.tier-card:hover {
+    transform: translateY(-3px);
+    box-shadow: var(--shadow-hover);
+    border-color: rgba(93, 165, 112, 0.4);
+}
+
+.tier-card.active {
+    border-color: var(--accent);
+    background: var(--surface-2);
+    box-shadow: var(--shadow-hover);
+}
+
+.tier-card .tier-num {
+    display: inline-block;
+    font-size: 0.7rem;
+    font-weight: 700;
+    color: var(--accent);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    margin-bottom: 6px;
+}
+
+.tier-card h3 { font-size: 1.15rem; margin-bottom: 6px; }
+.tier-card p { color: var(--muted); font-size: 0.85rem; line-height: 1.5; }
+
+.tier-meta {
+    display: flex;
+    gap: 10px;
+    margin-top: 10px;
+    font-size: 0.72rem;
+    color: var(--muted);
+}
+
+.tier-meta span {
+    padding: 2px 8px;
+    background: rgba(255,255,255,0.6);
+    border-radius: 999px;
+    border: 1px solid var(--border-soft);
+}
+
+/* -------------------- CONTROLS -------------------- */
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 22px;
+}
+
+.search-pill {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    min-width: 220px;
+    gap: 6px;
+    padding: 6px 6px 6px 18px;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 999px;
+    backdrop-filter: blur(20px) saturate(1.2);
+    -webkit-backdrop-filter: blur(20px) saturate(1.2);
+    box-shadow: var(--shadow-soft);
+    transition: border-color var(--transition), box-shadow var(--transition);
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.search-pill:focus-within {
+    border-color: rgba(74, 144, 194, 0.5);
+    box-shadow: var(--shadow-hover);
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.search-pill input {
+    flex: 1;
+    min-width: 0;
+    border: none;
+    background: transparent;
+    outline: none;
+    font-family: inherit;
+    font-size: 0.92rem;
+    color: var(--text);
+    padding: 8px 4px;
+}
+
+.search-pill input::placeholder { color: var(--muted); }
+
+.search-pill svg { color: var(--muted); flex-shrink: 0; margin-right: 2px; }
+
+.metric-select-wrap, .sort-select-wrap {
+    position: relative;
+}
+
+.pill-select {
+    appearance: none;
+    -webkit-appearance: none;
+    padding: 11px 34px 11px 18px;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 999px;
+    backdrop-filter: blur(20px) saturate(1.2);
+    -webkit-backdrop-filter: blur(20px) saturate(1.2);
+    box-shadow: var(--shadow-soft);
+    font-family: inherit;
+    font-size: 0.85rem;
+    color: var(--heading);
+    cursor: pointer;
+    transition: border-color var(--transition), box-shadow var(--transition);
+}
+
+.pill-select:hover { border-color: rgba(74,144,194,0.4); }
+.pill-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+
+.select-arrow {
+    position: absolute;
+    right: 14px;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+    color: var(--accent);
+    font-size: 0.65rem;
+}
+
+/* -------------------- TABLE -------------------- */
+
+.table-scroll {
+    overflow-x: auto;
+    border-radius: var(--radius);
+    background: var(--surface);
+    border: 1px solid var(--border);
+    backdrop-filter: blur(20px) saturate(1.2);
+    -webkit-backdrop-filter: blur(20px) saturate(1.2);
+    box-shadow: var(--shadow-soft);
+}
+
+table.leaderboard {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    font-size: 0.92rem;
+    min-width: 640px;
+}
+
+table.leaderboard thead th {
+    position: sticky;
+    top: 0;
+    background: rgba(255,255,255,0.82);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    color: var(--heading);
+    font-weight: 600;
+    text-align: left;
+    padding: 14px 16px;
+    border-bottom: 1px solid var(--border-soft);
+    font-size: 0.78rem;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    cursor: pointer;
+    user-select: none;
+    white-space: nowrap;
+}
+
+table.leaderboard thead th:hover { color: var(--accent); }
+
+table.leaderboard thead th .sort-arrow {
+    display: inline-block;
+    margin-left: 4px;
+    font-size: 0.7rem;
+    color: var(--accent);
+    opacity: 0;
+}
+
+table.leaderboard thead th.sorted .sort-arrow { opacity: 1; }
+
+table.leaderboard tbody tr {
+    transition: background var(--transition);
+}
+
+table.leaderboard tbody tr:hover { background: rgba(74, 144, 194, 0.07); }
+
+table.leaderboard tbody tr:not(:last-child) td { border-bottom: 1px solid var(--border-soft); }
+
+table.leaderboard td {
+    padding: 14px 16px;
+    color: var(--text);
+    vertical-align: middle;
+}
+
+.rank-cell {
+    font-weight: 700;
+    color: var(--muted);
+    width: 46px;
+    font-variant-numeric: tabular-nums;
+}
+
+.rank-cell.top-1 { color: #d9a441; }
+.rank-cell.top-2 { color: #9aa5b1; }
+.rank-cell.top-3 { color: #c08552; }
+
+.model-cell {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 200px;
+}
+
+.model-name {
+    font-weight: 600;
+    color: var(--heading);
+    font-size: 0.95rem;
+}
+
+.model-name a { color: inherit; }
+.model-name a:hover { color: var(--accent); opacity: 1; }
+
+.model-org {
+    font-size: 0.76rem;
+    color: var(--muted);
+}
+
+.params-cell {
+    font-variant-numeric: tabular-nums;
+    color: var(--muted);
+    font-size: 0.85rem;
+    white-space: nowrap;
+}
+
+.score-cell {
+    font-variant-numeric: tabular-nums;
+    font-weight: 600;
+    white-space: nowrap;
+}
+
+.score-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.score-bar-track {
+    position: relative;
+    width: 74px;
+    height: 6px;
+    border-radius: 999px;
+    background: rgba(120,160,200,0.18);
+    overflow: hidden;
+}
+
+.score-bar-fill {
+    position: absolute;
+    inset: 0;
+    width: 0%;
+    border-radius: 999px;
+    background: linear-gradient(90deg, var(--accent-soft), var(--accent));
+    transition: width 0.4s ease;
+}
+
+.score-num.good { color: #1a8f4f; }
+.score-num.ok { color: #b57900; }
+.score-num.bad { color: #c9432c; }
+
+.score-na {
+    color: var(--muted);
+    font-size: 0.82rem;
+    font-style: italic;
+}
+
+.model-link-icon {
+    display: inline-flex;
+    color: var(--muted);
+    transition: color var(--transition);
+}
+.model-link-icon:hover { color: var(--accent); }
+
+/* -------------------- EMPTY STATE -------------------- */
+
+.empty-state {
+    padding: 60px 24px;
+    text-align: center;
+    color: var(--muted);
+}
+
+.empty-state svg { margin-bottom: 14px; color: var(--accent-soft); }
+
+/* -------------------- DETAIL PANEL -------------------- */
+
+.detail-panel {
+    margin-top: 28px;
+    padding: 26px;
+    border-radius: var(--radius);
+    background: var(--surface);
+    border: 1px solid var(--border);
+    backdrop-filter: blur(20px) saturate(1.2);
+    -webkit-backdrop-filter: blur(20px) saturate(1.2);
+    box-shadow: var(--shadow-soft);
+    display: none;
+}
+
+.detail-panel.open { display: block; }
+
+.detail-panel-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 16px;
+    margin-bottom: 18px;
+    flex-wrap: wrap;
+}
+
+.detail-panel-header h2 { font-size: 1.3rem; margin-bottom: 4px; }
+.detail-panel-header p { color: var(--muted); font-size: 0.88rem; }
+
+.detail-close {
+    flex-shrink: 0;
+    width: 34px;
+    height: 34px;
+    border-radius: 50%;
+    border: 1px solid var(--border-soft);
+    background: rgba(255,255,255,0.6);
+    color: var(--muted);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: background var(--transition), color var(--transition), border-color var(--transition);
+}
+
+.detail-close:hover { background: #fff; color: var(--accent); border-color: var(--accent); }
+
+.cat-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+    gap: 10px;
+}
+
+.cat-row {
+    padding: 12px 14px;
+    border-radius: 12px;
+    background: rgba(255,255,255,0.5);
+    border: 1px solid var(--border-soft);
+}
+
+.cat-row-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    margin-bottom: 6px;
+    gap: 8px;
+}
+
+.cat-name {
+    font-size: 0.8rem;
+    color: var(--heading);
+    font-weight: 500;
+}
+
+.cat-n {
+    font-size: 0.68rem;
+    color: var(--muted);
+}
+
+.cat-score {
+    font-size: 0.85rem;
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+}
+
+.cat-bar-track {
+    height: 5px;
+    border-radius: 999px;
+    background: rgba(120,160,200,0.15);
+    overflow: hidden;
+}
+
+.cat-bar-fill {
+    height: 100%;
+    border-radius: 999px;
+}
+
+/* -------------------- FOOTER -------------------- */
+
+.page-footer {
+    margin-top: 50px;
+    padding-top: 22px;
+    border-top: 1px solid var(--border-soft);
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 12px;
+    color: var(--muted);
+    font-size: 0.8rem;
+}
+
+.page-footer a { color: var(--accent); }
+
+/* -------------------- RESPONSIVE -------------------- */
+
+@media (max-width: 640px) {
+    .container { padding: 40px 16px 32px; }
+    .controls { flex-direction: column; align-items: stretch; }
+    table.leaderboard { min-width: 560px; }
+}
+
+/* -------------------- SCROLLBARS / SELECTION -------------------- */
+
+::selection { background: rgba(74,144,194,0.3); color: var(--heading); }
+::-webkit-scrollbar { width: 10px; height: 10px; }
+::-webkit-scrollbar-track { background: rgba(255,255,255,0.3); }
+::-webkit-scrollbar-thumb { background: rgba(120,160,200,0.4); border-radius: 5px; }
+::-webkit-scrollbar-thumb:hover { background: rgba(74,144,194,0.6); }
+
+/* -------------------- TOOLTIP (from blog) -------------------- */
+
+.tooltip { position: relative; }
+
+.tooltip::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    left: 50%;
+    bottom: calc(100% + 10px);
+    transform: translateX(-50%) translateY(4px);
+    padding: 8px 12px;
+    border-radius: 10px;
+    background: var(--surface-2);
+    border: 1px solid var(--border);
+    backdrop-filter: blur(20px) saturate(1.2);
+    -webkit-backdrop-filter: blur(20px) saturate(1.2);
+    color: var(--heading);
+    font-size: 0.78rem;
+    font-weight: 500;
+    white-space: nowrap;
+    box-shadow: var(--shadow-hover);
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transition: opacity .08s ease, transform .08s ease, visibility .08s;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.tooltip:hover::after, .tooltip:focus-visible::after {
+    opacity: 1;
+    visibility: visible;
+    transform: translateX(-50%) translateY(0);
 }