Publish leaderboard scores for three parametric models (n=190)

README.md

@@ -4,12 +4,12 @@ emoji: 🌿
 colorFrom: green
 colorTo: blue
 sdk: static
-short_description: Indian BFSI QA benchmark — browse all 189 test items
+short_description: Indian BFSI QA benchmark — browse all 190 test items
 ---
 
 # BFSI-Bench
 
-Project page for [`ground-truth/bfsi-bench`](https://huggingface.co/datasets/ground-truth/bfsi-bench): dataset overview, a read-only sample browser, and a leaderboard placeholder.
+Project page for [`ground-truth/bfsi-bench`](https://huggingface.co/datasets/ground-truth/bfsi-bench): dataset overview, a read-only sample browser, and a leaderboard.
 
 Source in the eval repo: `docs/bfsi-bench-space/`.
 

app.js

@@ -1,480 +1,416 @@
-(() => {
-  const CATS = [
-    { code: "all", label: "All" },
-    { code: "BFSI-JUR", label: "Jurisdiction" },
-    { code: "BFSI-NUM", label: "Numerical" },
-    { code: "BFSI-TMP", label: "Temporal" },
-    { code: "BFSI-ADV", label: "Red-team" },
-    { code: "BFSI-GRD", label: "Grounded" },
-  ];
-
-  const state = {
-    items: [],
-    filtered: [],
-    currentId: null,
-    cat: "all",
-    q: "",
-    mode: "overview",
-  };
-
-  const el = {
-    progress: document.getElementById("progress"),
-    chips: document.getElementById("cat-chips"),
-    search: document.getElementById("filter-q"),
-    queue: document.getElementById("queue"),
-    empty: document.getElementById("empty-state"),
-    loadError: document.getElementById("load-error"),
-    detail: document.getElementById("detail"),
-    itemId: document.getElementById("item-id"),
-    itemCat: document.getElementById("item-cat"),
-    itemQuery: document.getElementById("item-query"),
-    itemGold: document.getElementById("item-gold"),
-    itemSources: document.getElementById("item-sources"),
-    itemNuggets: document.getElementById("item-nuggets"),
+(() => {
+  const CATS = [
+    { code: "all", label: "All" },
+    { code: "BFSI-JUR", label: "Jurisdiction" },
+    { code: "BFSI-NUM", label: "Numerical" },
+    { code: "BFSI-TMP", label: "Temporal" },
+    { code: "BFSI-ADV", label: "Red-team" },
+    { code: "BFSI-GRD", label: "Grounded" },
+  ];
+
+  const state = {
+    items: [],
+    filtered: [],
+    currentId: null,
+    cat: "all",
+    q: "",
+    mode: "overview",
+  };
+
+  const el = {
+    progress: document.getElementById("progress"),
+    chips: document.getElementById("cat-chips"),
+    search: document.getElementById("filter-q"),
+    queue: document.getElementById("queue"),
+    empty: document.getElementById("empty-state"),
+    loadError: document.getElementById("load-error"),
+    detail: document.getElementById("detail"),
+    itemId: document.getElementById("item-id"),
+    itemCat: document.getElementById("item-cat"),
+    itemQuery: document.getElementById("item-query"),
+    itemGold: document.getElementById("item-gold"),
+    itemSources: document.getElementById("item-sources"),
+    itemNuggets: document.getElementById("item-nuggets"),
     itemEvidence: document.getElementById("item-evidence"),
-    detailPane: document.querySelector(".detail-pane"),
-    outline: document.getElementById("sample-outline"),
-    btnPrev: document.getElementById("btn-prev"),
-    btnNext: document.getElementById("btn-next"),
-    btnCopy: document.getElementById("btn-copy"),
-    btnOpen: document.getElementById("btn-open-drawer"),
-    btnClose: document.getElementById("btn-close-drawer"),
-  };
-
+    btnPrev: document.getElementById("btn-prev"),
+    btnNext: document.getElementById("btn-next"),
+    btnCopy: document.getElementById("btn-copy"),
+    btnOpen: document.getElementById("btn-open-drawer"),
+    btnClose: document.getElementById("btn-close-drawer"),
+  };
+
   function escapeHtml(s) {
-    return String(s ?? "")
-      .replace(/&/g, "&")
-      .replace(/</g, "&lt;")
-      .replace(/>/g, "&gt;")
-      .replace(/"/g, "&quot;");
+    return String(s ?? "")
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;");
   }
 
-  const SAMPLE_SECTIONS = [
-    "sample-question",
-    "sample-answer",
-    "sample-sources",
-    "sample-facts",
-    "sample-evidence",
-  ];
+  function parseHash() {
+    const raw = (window.location.hash || "").replace(/^#/, "");
+    if (!raw) return { mode: "overview", id: null };
+    if (raw.startsWith("sample/")) {
+      return { mode: "samples", id: decodeURIComponent(raw.slice("sample/".length)) };
+    }
+    if (raw === "samples") return { mode: "samples", id: null };
+    if (raw === "leaderboard") return { mode: "leaderboard", id: null };
+    if (raw === "overview") return { mode: "overview", id: null };
+    return { mode: "overview", id: null };
+  }
+
+  function writeHash() {
+    let next = state.mode;
+    if (state.mode === "samples" && state.currentId) {
+      next = `sample/${encodeURIComponent(state.currentId)}`;
+    } else if (state.mode === "samples") {
+      next = "samples";
+    }
+    const hash = `#${next}`;
+    if (window.location.hash !== hash) {
+      history.replaceState(null, "", hash);
+    }
+  }
+
+  function setMode(mode, { fromHash = false } = {}) {
+    state.mode = mode;
+    document.querySelectorAll(".mode").forEach((btn) => {
+      const on = btn.dataset.mode === mode;
+      btn.classList.toggle("active", on);
+      btn.setAttribute("aria-selected", on ? "true" : "false");
+    });
+    document.querySelectorAll(".mode-panel").forEach((panel) => {
+      const on = panel.id === `mode-${mode}`;
+      panel.classList.toggle("active", on);
+      panel.hidden = !on;
+    });
+    document.body.classList.toggle("is-explorer", mode === "samples");
+    document.body.classList.remove("drawer-open");
+    if (!fromHash) writeHash();
+  }
+
+  function applyFromHash() {
+    const { mode, id } = parseHash();
+    setMode(mode, { fromHash: true });
+    if (mode === "samples" && id) {
+      state.currentId = id;
+      if (state.items.length) selectId(id, { skipHash: true });
+    }
+  }
+
+  function catLabel(code) {
+    const hit = CATS.find((c) => c.code === code);
+    return hit ? hit.label : code;
+  }
 
-  function setActiveSection(id) {
-    if (!el.outline) return;
-    el.outline.querySelectorAll("button[data-section]").forEach((btn) => {
-      const active = btn.dataset.section === id;
-      btn.classList.toggle("active", active);
-      if (active) btn.setAttribute("aria-current", "true");
-      else btn.removeAttribute("aria-current");
+  function haystack(item) {
+    const parts = [
+      item.id,
+      item.category,
+      item.category_code,
+      item.query,
+      item.gold_answer,
+    ];
+    for (const s of item.sources || []) {
+      parts.push(s.url, s.note, s.published_date);
+    }
+    for (const e of item.evidence || []) {
+      parts.push(e.url, e.title, e.quote);
+    }
+    for (const n of item.gold_nuggets || []) {
+      parts.push(n.id, n.text, n.evidence_quote);
+    }
+    return parts.filter(Boolean).join("\n").toLowerCase();
+  }
+
+  function applyFilters() {
+    const q = state.q.trim().toLowerCase();
+    state.filtered = state.items.filter((it) => {
+      if (state.cat !== "all" && it.category_code !== state.cat) return false;
+      if (q && !haystack(it).includes(q)) return false;
+      return true;
     });
+    renderProgress();
+    renderQueue();
+  }
+
+  function catCounts() {
+    const counts = { all: state.items.length };
+    for (const it of state.items) {
+      counts[it.category_code] = (counts[it.category_code] || 0) + 1;
+    }
+    return counts;
+  }
+
+  function renderChips() {
+    const counts = catCounts();
+    el.chips.innerHTML = CATS.map((c) => {
+      const n = counts[c.code] ?? 0;
+      const on = state.cat === c.code ? " is-on" : "";
+      return `<button type="button" class="${on}" data-cat="${c.code}">${escapeHtml(
+        c.label
+      )} <span class="chip-count">${n}</span></button>`;
+    }).join("");
+  }
+
+  function renderProgress() {
+    const total = state.items.length;
+    el.progress.textContent = `${state.filtered.length} of ${total}`;
+  }
+
+  function renderQueue() {
+    if (!state.filtered.length) {
+      el.queue.innerHTML = `<li class="empty-queue"><p class="empty" style="margin:0.6rem 0.85rem">No matches.</p></li>`;
+      return;
+    }
+    el.queue.innerHTML = state.filtered
+      .map((it) => {
+        const active = it.id === state.currentId ? " active" : "";
+        return `<li>
+          <button type="button" class="${active}" data-id="${escapeHtml(it.id)}">
+            <span class="qid">${escapeHtml(it.id)}</span>
+            <span class="qtext">${escapeHtml(it.query)}</span>
+            <span class="qmeta"><span class="pill ${escapeHtml(it.category_code)}">${escapeHtml(
+              catLabel(it.category_code)
+            )}</span></span>
+          </button>
+        </li>`;
+      })
+      .join("");
+  }
+
+  function renderSources(sources) {
+    if (!sources || !sources.length) {
+      el.itemSources.innerHTML = "<li><em>No sources</em></li>";
+      return;
+    }
+    el.itemSources.innerHTML = sources
+      .map((s) => {
+        const url = s.url || "";
+        const note = s.note || "";
+        const date = s.published_date || "";
+        const link = url
+          ? `<a href="${escapeHtml(url)}" target="_blank" rel="noopener noreferrer">${escapeHtml(url)}</a>`
+          : "<em>No URL</em>";
+        return `<li>${link}${note ? `<span class="note">${escapeHtml(note)}</span>` : ""}${
+          date ? `<span class="date">${escapeHtml(date)}</span>` : ""
+        }</li>`;
+      })
+      .join("");
   }
 
-  function updateActiveSection() {
-    if (!el.detailPane || el.detail.hidden) return;
-    if (el.detailPane.scrollTop + el.detailPane.clientHeight >= el.detailPane.scrollHeight - 4) {
-      setActiveSection(SAMPLE_SECTIONS[SAMPLE_SECTIONS.length - 1]);
+  function renderNuggets(nuggets) {
+    if (!nuggets || !nuggets.length) {
+      el.itemNuggets.innerHTML = "<p><em>No gold nuggets</em></p>";
       return;
     }
-    const paneTop = el.detailPane.getBoundingClientRect().top;
-    let active = SAMPLE_SECTIONS[0];
-    for (const id of SAMPLE_SECTIONS) {
-      const section = document.getElementById(id);
-      if (section && section.getBoundingClientRect().top - paneTop <= 150) active = id;
-      else break;
+    el.itemNuggets.innerHTML = nuggets
+      .map((n) => {
+        const vital = n.vital ? `<span class="vital">Required</span>` : "";
+        const quote = n.evidence_quote
+          ? `<p class="nugget-quote">${escapeHtml(n.evidence_quote)}</p>`
+          : "";
+        return `<article class="nugget">
+          <div class="nugget-head">
+            <span class="nugget-id">${escapeHtml(n.id || "")}</span>
+            ${vital}
+          </div>
+          <p class="nugget-text">${escapeHtml(n.text || "")}</p>
+          ${quote}
+        </article>`;
+      })
+      .join("");
+  }
+
+  function renderEvidence(evidence) {
+    if (!evidence || !evidence.length) {
+      el.itemEvidence.innerHTML = "<p><em>No evidence quotes</em></p>";
+      return;
     }
-    setActiveSection(active);
+    el.itemEvidence.innerHTML = evidence
+      .map((e) => {
+        const href = e.url || "";
+        const heading = href
+          ? `<a href="${escapeHtml(href)}" target="_blank" rel="noopener noreferrer">${escapeHtml(href)}</a>`
+          : escapeHtml(e.title || "No URL");
+        const quote = e.quote || "";
+        const ctx = e.context || "";
+        const kind = e.kind || "";
+        const ctxBlock =
+          ctx && ctx !== quote
+            ? `<details class="ev-ctx-wrap"><summary>Surrounding context</summary>
+               <div class="ev-ctx">${escapeHtml(ctx)}</div></details>`
+            : "";
+        return `<article class="ev-item">
+          <div class="ev-title">${heading}</div>
+          <div class="ev-quote">${escapeHtml(quote)}</div>
+          ${ctxBlock}
+          ${kind ? `<div class="ev-meta">${escapeHtml(kind)}</div>` : ""}
+        </article>`;
+      })
+      .join("");
   }
-
-  function parseHash() {
-    const raw = (window.location.hash || "").replace(/^#/, "");
-    if (!raw) return { mode: "overview", id: null };
-    if (raw.startsWith("sample/")) {
-      return { mode: "samples", id: decodeURIComponent(raw.slice("sample/".length)) };
-    }
-    if (raw === "samples") return { mode: "samples", id: null };
-    if (raw === "leaderboard") return { mode: "leaderboard", id: null };
-    if (raw === "overview") return { mode: "overview", id: null };
-    return { mode: "overview", id: null };
-  }
-
-  function writeHash() {
-    let next = state.mode;
-    if (state.mode === "samples" && state.currentId) {
-      next = `sample/${encodeURIComponent(state.currentId)}`;
-    } else if (state.mode === "samples") {
-      next = "samples";
-    }
-    const hash = `#${next}`;
-    if (window.location.hash !== hash) {
-      history.replaceState(null, "", hash);
-    }
-  }
-
-  function setMode(mode, { fromHash = false } = {}) {
-    state.mode = mode;
-    document.querySelectorAll(".mode").forEach((btn) => {
-      const on = btn.dataset.mode === mode;
-      btn.classList.toggle("active", on);
-      btn.setAttribute("aria-selected", on ? "true" : "false");
-    });
-    document.querySelectorAll(".mode-panel").forEach((panel) => {
-      const on = panel.id === `mode-${mode}`;
-      panel.classList.toggle("active", on);
-      panel.hidden = !on;
-    });
-    document.body.classList.toggle("is-explorer", mode === "samples");
-    document.body.classList.remove("drawer-open");
-    if (!fromHash) writeHash();
-  }
-
-  function applyFromHash() {
-    const { mode, id } = parseHash();
-    setMode(mode, { fromHash: true });
-    if (mode === "samples" && id) {
-      state.currentId = id;
-      if (state.items.length) selectId(id, { skipHash: true });
-    }
-  }
-
-  function catLabel(code) {
-    const hit = CATS.find((c) => c.code === code);
-    return hit ? hit.label : code;
-  }
-
-  function haystack(item) {
-    const parts = [
-      item.id,
-      item.category,
-      item.category_code,
-      item.query,
-      item.gold_answer,
-    ];
-    for (const s of item.sources || []) {
-      parts.push(s.url, s.note, s.published_date);
-    }
-    for (const e of item.evidence || []) {
-      parts.push(e.url, e.title, e.quote);
-    }
-    for (const n of item.gold_nuggets || []) {
-      parts.push(n.id, n.text, n.evidence_quote);
-    }
-    return parts.filter(Boolean).join("\n").toLowerCase();
-  }
-
-  function applyFilters() {
-    const q = state.q.trim().toLowerCase();
-    state.filtered = state.items.filter((it) => {
-      if (state.cat !== "all" && it.category_code !== state.cat) return false;
-      if (q && !haystack(it).includes(q)) return false;
-      return true;
-    });
-    renderProgress();
-    renderQueue();
-  }
-
-  function catCounts() {
-    const counts = { all: state.items.length };
-    for (const it of state.items) {
-      counts[it.category_code] = (counts[it.category_code] || 0) + 1;
-    }
-    return counts;
-  }
-
-  function renderChips() {
-    const counts = catCounts();
-    el.chips.innerHTML = CATS.map((c) => {
-      const n = counts[c.code] ?? 0;
-      const on = state.cat === c.code ? " is-on" : "";
-      return `<button type="button" class="${on}" data-cat="${c.code}">${escapeHtml(
-        c.label
-      )} <span class="chip-count">${n}</span></button>`;
-    }).join("");
-  }
-
-  function renderProgress() {
-    const total = state.items.length;
-    el.progress.textContent = `${state.filtered.length} of ${total}`;
-  }
-
-  function renderQueue() {
-    if (!state.filtered.length) {
-      el.queue.innerHTML = `<li class="empty-queue"><p class="empty" style="margin:0.6rem 0.85rem">No matches.</p></li>`;
-      return;
-    }
-    el.queue.innerHTML = state.filtered
-      .map((it) => {
-        const active = it.id === state.currentId ? " active" : "";
-        return `<li>
-          <button type="button" class="${active}" data-id="${escapeHtml(it.id)}">
-            <span class="qid">${escapeHtml(it.id)}</span>
-            <span class="qtext">${escapeHtml(it.query)}</span>
-            <span class="qmeta"><span class="pill ${escapeHtml(it.category_code)}">${escapeHtml(
-              catLabel(it.category_code)
-            )}</span></span>
-          </button>
-        </li>`;
-      })
-      .join("");
-  }
-
-  function renderSources(sources) {
-    if (!sources || !sources.length) {
-      el.itemSources.innerHTML = "<li><em>No sources</em></li>";
-      return;
-    }
-    el.itemSources.innerHTML = sources
-      .map((s) => {
-        const url = s.url || "";
-        const note = s.note || "";
-        const date = s.published_date || "";
-        const link = url
-          ? `<a href="${escapeHtml(url)}" target="_blank" rel="noopener noreferrer">${escapeHtml(url)}</a>`
-          : "<em>No URL</em>";
-        return `<li>${link}${note ? `<span class="note">${escapeHtml(note)}</span>` : ""}${
-          date ? `<span class="date">${escapeHtml(date)}</span>` : ""
-        }</li>`;
-      })
-      .join("");
-  }
-
-  function renderNuggets(nuggets) {
-    if (!nuggets || !nuggets.length) {
-      el.itemNuggets.innerHTML = "<p><em>No gold nuggets</em></p>";
-      return;
-    }
-    el.itemNuggets.innerHTML = nuggets
-      .map((n) => {
-        const vital = n.vital ? `<span class="vital">Required</span>` : "";
-        const quote = n.evidence_quote
-          ? `<p class="nugget-quote">${escapeHtml(n.evidence_quote)}</p>`
-          : "";
-        return `<article class="nugget">
-          <div class="nugget-head">
-            <span class="nugget-id">${escapeHtml(n.id || "")}</span>
-            ${vital}
-          </div>
-          <p class="nugget-text">${escapeHtml(n.text || "")}</p>
-          ${quote}
-        </article>`;
-      })
-      .join("");
-  }
-
-  function renderEvidence(evidence) {
-    if (!evidence || !evidence.length) {
-      el.itemEvidence.innerHTML = "<p><em>No evidence quotes</em></p>";
-      return;
-    }
-    el.itemEvidence.innerHTML = evidence
-      .map((e) => {
-        const href = e.url || "";
-        const heading = href
-          ? `<a href="${escapeHtml(href)}" target="_blank" rel="noopener noreferrer">${escapeHtml(href)}</a>`
-          : escapeHtml(e.title || "No URL");
-        const quote = e.quote || "";
-        const ctx = e.context || "";
-        const kind = e.kind || "";
-        const ctxBlock =
-          ctx && ctx !== quote
-            ? `<details class="ev-ctx-wrap"><summary>Surrounding context</summary>
-               <div class="ev-ctx">${escapeHtml(ctx)}</div></details>`
-            : "";
-        return `<article class="ev-item">
-          <div class="ev-title">${heading}</div>
-          <div class="ev-quote">${escapeHtml(quote)}</div>
-          ${ctxBlock}
-          ${kind ? `<div class="ev-meta">${escapeHtml(kind)}</div>` : ""}
-        </article>`;
-      })
-      .join("");
-  }
-
+
   function renderDetail(item) {
-    el.empty.hidden = true;
-    el.loadError.hidden = true;
-    el.detail.hidden = false;
-    el.itemId.textContent = item.id;
-    el.itemCat.textContent = item.category_code;
-    el.itemCat.className = `pill ${item.category_code}`;
-    el.itemQuery.textContent = item.query || "";
-    el.itemGold.textContent = item.gold_answer || "";
+    el.empty.hidden = true;
+    el.loadError.hidden = true;
+    el.detail.hidden = false;
+    el.itemId.textContent = item.id;
+    el.itemCat.textContent = item.category_code;
+    el.itemCat.className = `pill ${item.category_code}`;
+    el.itemQuery.textContent = item.query || "";
+    el.itemGold.textContent = item.gold_answer || "";
     renderSources(item.sources);
     renderNuggets(item.gold_nuggets);
     renderEvidence(item.evidence);
-    el.detailPane.scrollTo({ top: 0, behavior: "auto" });
-    setActiveSection(SAMPLE_SECTIONS[0]);
-    const active = el.queue.querySelector("button.active");
-    if (active) active.classList.remove("active");
-    const btn = el.queue.querySelector(`button[data-id="${CSS.escape(item.id)}"]`);
-    if (btn) {
-      btn.classList.add("active");
-      btn.scrollIntoView({ block: "nearest" });
-    }
-  }
-
-  function selectId(id, { skipHash = false } = {}) {
-    const item = state.items.find((it) => it.id === id);
-    if (!item) {
-      el.detail.hidden = true;
-      el.empty.hidden = false;
-      el.empty.textContent = id ? `Sample ${id} was not found.` : "Select a sample from the list.";
-      return;
-    }
-    state.currentId = id;
-    if (!state.filtered.some((it) => it.id === id)) {
-      state.cat = "all";
-      state.q = "";
-      el.search.value = "";
-      renderChips();
-      applyFilters();
-    }
-    renderDetail(item);
-    document.body.classList.remove("drawer-open");
-    if (!skipHash) {
-      setMode("samples", { fromHash: true });
-      writeHash();
-    }
-  }
-
-  function step(delta) {
-    if (!state.filtered.length) return;
-    let idx = state.filtered.findIndex((it) => it.id === state.currentId);
-    if (idx < 0) idx = 0;
-    else idx = Math.max(0, Math.min(state.filtered.length - 1, idx + delta));
-    selectId(state.filtered[idx].id);
-  }
-
-  async function copyLink() {
-    const url = `${window.location.origin}${window.location.pathname}#sample/${encodeURIComponent(
-      state.currentId || ""
-    )}`;
-    try {
-      await navigator.clipboard.writeText(url);
-      el.btnCopy.textContent = "Copied";
-      setTimeout(() => {
-        el.btnCopy.textContent = "Copy link";
-      }, 1200);
-    } catch {
-      el.btnCopy.textContent = "Copy failed";
-      setTimeout(() => {
-        el.btnCopy.textContent = "Copy link";
-      }, 1200);
-    }
-  }
-
-  function wire() {
-    document.querySelectorAll(".mode").forEach((btn) => {
-      btn.addEventListener("click", () => {
-        const mode = btn.dataset.mode;
-        if (mode === "samples") {
-          setMode("samples");
-          if (state.currentId) selectId(state.currentId);
-          else if (state.filtered[0]) selectId(state.filtered[0].id);
-          else writeHash();
-        } else {
-          setMode(mode);
-        }
-      });
-    });
-
+    const active = el.queue.querySelector("button.active");
+    if (active) active.classList.remove("active");
+    const btn = el.queue.querySelector(`button[data-id="${CSS.escape(item.id)}"]`);
+    if (btn) {
+      btn.classList.add("active");
+      btn.scrollIntoView({ block: "nearest" });
+    }
+  }
+
+  function selectId(id, { skipHash = false } = {}) {
+    const item = state.items.find((it) => it.id === id);
+    if (!item) {
+      el.detail.hidden = true;
+      el.empty.hidden = false;
+      el.empty.textContent = id ? `Sample ${id} was not found.` : "Select a sample from the list.";
+      return;
+    }
+    state.currentId = id;
+    if (!state.filtered.some((it) => it.id === id)) {
+      state.cat = "all";
+      state.q = "";
+      el.search.value = "";
+      renderChips();
+      applyFilters();
+    }
+    renderDetail(item);
+    document.body.classList.remove("drawer-open");
+    if (!skipHash) {
+      setMode("samples", { fromHash: true });
+      writeHash();
+    }
+  }
+
+  function step(delta) {
+    if (!state.filtered.length) return;
+    let idx = state.filtered.findIndex((it) => it.id === state.currentId);
+    if (idx < 0) idx = 0;
+    else idx = Math.max(0, Math.min(state.filtered.length - 1, idx + delta));
+    selectId(state.filtered[idx].id);
+  }
+
+  async function copyLink() {
+    const url = `${window.location.origin}${window.location.pathname}#sample/${encodeURIComponent(
+      state.currentId || ""
+    )}`;
+    try {
+      await navigator.clipboard.writeText(url);
+      el.btnCopy.textContent = "Copied";
+      setTimeout(() => {
+        el.btnCopy.textContent = "Copy link";
+      }, 1200);
+    } catch {
+      el.btnCopy.textContent = "Copy failed";
+      setTimeout(() => {
+        el.btnCopy.textContent = "Copy link";
+      }, 1200);
+    }
+  }
+
+  function wire() {
+    document.querySelectorAll(".mode").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        const mode = btn.dataset.mode;
+        if (mode === "samples") {
+          setMode("samples");
+          if (state.currentId) selectId(state.currentId);
+          else if (state.filtered[0]) selectId(state.filtered[0].id);
+          else writeHash();
+        } else {
+          setMode(mode);
+        }
+      });
+    });
+
     document.querySelectorAll("[data-goto]").forEach((btn) => {
       btn.addEventListener("click", () => {
         const mode = btn.dataset.goto;
-        const targetCat = btn.dataset.catTarget;
-        if (targetCat) {
-          state.cat = targetCat;
-          state.q = "";
-          el.search.value = "";
-          renderChips();
-          applyFilters();
-        }
         setMode(mode);
         if (mode === "samples" && state.filtered[0]) selectId(state.filtered[0].id);
       });
-    });
-
-    el.chips.addEventListener("click", (e) => {
-      const btn = e.target.closest("button[data-cat]");
-      if (!btn) return;
-      state.cat = btn.dataset.cat;
-      renderChips();
-      applyFilters();
-    });
-
-    el.search.addEventListener("input", () => {
-      state.q = el.search.value;
-      applyFilters();
-    });
-
-    el.queue.addEventListener("click", (e) => {
-      const btn = e.target.closest("button[data-id]");
-      if (!btn) return;
-      selectId(btn.dataset.id);
-    });
-
-    el.btnPrev.addEventListener("click", () => step(-1));
-    el.btnNext.addEventListener("click", () => step(1));
-    el.btnCopy.addEventListener("click", copyLink);
-    el.btnOpen.addEventListener("click", () => document.body.classList.add("drawer-open"));
-    el.btnClose.addEventListener("click", () => document.body.classList.remove("drawer-open"));
+    });
 
-    el.outline.addEventListener("click", (e) => {
-      const btn = e.target.closest("button[data-section]");
+    el.chips.addEventListener("click", (e) => {
+      const btn = e.target.closest("button[data-cat]");
       if (!btn) return;
-      const section = document.getElementById(btn.dataset.section);
-      if (!section) return;
-      setActiveSection(btn.dataset.section);
-      section.scrollIntoView({ behavior: "smooth", block: "start" });
+      state.cat = btn.dataset.cat;
+      renderChips();
+      applyFilters();
     });
 
-    let sectionScrollFrame = 0;
-    el.detailPane.addEventListener("scroll", () => {
-      if (sectionScrollFrame) return;
-      sectionScrollFrame = requestAnimationFrame(() => {
-        sectionScrollFrame = 0;
-        updateActiveSection();
-      });
+    el.search.addEventListener("input", () => {
+      state.q = el.search.value;
+      applyFilters();
+    });
+
+    el.queue.addEventListener("click", (e) => {
+      const btn = e.target.closest("button[data-id]");
+      if (!btn) return;
+      selectId(btn.dataset.id);
     });
-
-    document.addEventListener("keydown", (e) => {
-      if (state.mode !== "samples") return;
-      const tag = (e.target && e.target.tagName) || "";
-      if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
-      if (e.key === "j") {
-        e.preventDefault();
-        step(1);
-      } else if (e.key === "k") {
-        e.preventDefault();
-        step(-1);
-      }
-    });
-
-    window.addEventListener("hashchange", applyFromHash);
-  }
-
-  async function load() {
-    try {
-      const res = await fetch("./data/samples.json");
-      if (!res.ok) throw new Error(`Could not load samples.json (${res.status})`);
-      const data = await res.json();
-      state.items = Array.isArray(data.items) ? data.items : [];
-      renderChips();
-      applyFilters();
-      const { mode, id } = parseHash();
-      if (mode === "samples") {
-        setMode("samples", { fromHash: true });
-        if (id) selectId(id, { skipHash: true });
-        else if (state.filtered[0]) selectId(state.filtered[0].id);
-      } else {
-        setMode(mode, { fromHash: true });
-      }
-    } catch (err) {
-      el.loadError.hidden = false;
-      el.loadError.textContent = err.message || String(err);
-      el.empty.hidden = true;
-      el.progress.textContent = "Failed to load";
-    }
-  }
-
-  wire();
-  applyFromHash();
-  load();
-})();
+
+    el.btnPrev.addEventListener("click", () => step(-1));
+    el.btnNext.addEventListener("click", () => step(1));
+    el.btnCopy.addEventListener("click", copyLink);
+    el.btnOpen.addEventListener("click", () => document.body.classList.add("drawer-open"));
+    el.btnClose.addEventListener("click", () => document.body.classList.remove("drawer-open"));
+
+    document.addEventListener("keydown", (e) => {
+      if (state.mode !== "samples") return;
+      const tag = (e.target && e.target.tagName) || "";
+      if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
+      if (e.key === "j") {
+        e.preventDefault();
+        step(1);
+      } else if (e.key === "k") {
+        e.preventDefault();
+        step(-1);
+      }
+    });
+
+    window.addEventListener("hashchange", applyFromHash);
+  }
+
+  async function load() {
+    try {
+      const res = await fetch("./data/samples.json");
+      if (!res.ok) throw new Error(`Could not load samples.json (${res.status})`);
+      const data = await res.json();
+      state.items = Array.isArray(data.items) ? data.items : [];
+      renderChips();
+      applyFilters();
+      const { mode, id } = parseHash();
+      if (mode === "samples") {
+        setMode("samples", { fromHash: true });
+        if (id) selectId(id, { skipHash: true });
+        else if (state.filtered[0]) selectId(state.filtered[0].id);
+      } else {
+        setMode(mode, { fromHash: true });
+      }
+    } catch (err) {
+      el.loadError.hidden = false;
+      el.loadError.textContent = err.message || String(err);
+      el.empty.hidden = true;
+      el.progress.textContent = "Failed to load";
+    }
+  }
+
+  wire();
+  applyFromHash();
+  load();
+})();

data/samples.json

@@ -1,13 +1,13 @@
 {
   "dataset": "ground-truth/bfsi-bench",
   "split": "test",
-  "total": 189,
+  "total": 190,
   "counts": {
     "BFSI-ADV": 29,
     "BFSI-GRD": 36,
     "BFSI-JUR": 71,
     "BFSI-NUM": 36,
-    "BFSI-TMP": 17
+    "BFSI-TMP": 18
   },
   "items": [
     {
@@ -7227,20 +7227,7 @@
           "kind": "source"
         }
       ],
-      "gold_nuggets": [
-        {
-          "id": "n1",
-          "text": "No, the maturity capital-gains exemption does not apply to Sovereign Gold Bonds acquired through transfer or purchase in the secondary market.",
-          "vital": true,
-          "evidence_quote": "No, the exemption shall not apply to Sovereign Gold Bonds acquired through transfer or purchase in the secondary market"
-        },
-        {
-          "id": "n2",
-          "text": "The exemption is available only when an individual subscribes to the Sovereign Gold Bond at the time of original issue and holds it continuously until redemption at maturity.",
-          "vital": false,
-          "evidence_quote": "exemption from capital gains tax shall be available only where the Sovereign Gold Bond is subscribed to by an individual at the time of original issue and is held continuously until redemption on maturity"
-        }
-      ]
+      "gold_nuggets": []
     },
     {
       "id": "bfsi-tmp-034",
@@ -7385,26 +7372,7 @@
           "kind": "source"
         }
       ],
-      "gold_nuggets": [
-        {
-          "id": "n1",
-          "text": "No—the salaried individual would have no income-tax liability at a taxable income of ₹11.5 lakh under the new tax regime.",
-          "vital": true,
-          "evidence_quote": null
-        },
-        {
-          "id": "n2",
-          "text": "Under the new tax regime, the Section 87A rebate makes tax nil on taxable income up to ₹12 lakh.",
-          "vital": false,
-          "evidence_quote": "the income does not exceed twelve lakh rupees, 100% of the income-tax payable or ` 60000, whichever is less;"
-        },
-        {
-          "id": "n3",
-          "text": "For salaried taxpayers, the equivalent threshold is ₹12.75 lakh after the standard deduction.",
-          "vital": false,
-          "evidence_quote": null
-        }
-      ]
+      "gold_nuggets": []
     },
     {
       "id": "bfsi-tmp-039",
@@ -7483,16 +7451,45 @@
           "kind": "source"
         }
       ],
+      "gold_nuggets": []
+    },
+    {
+      "id": "bfsi-tmp-041",
+      "category": "Temporal Logic",
+      "category_code": "BFSI-TMP",
+      "query": "As a small business owner, I deduct tax at source on payments I make to contractors and professionals. Which section should I be citing on my TDS challans and returns for this?",
+      "gold_answer": "For payments made on or after 1 April 2026, cite Section 393 of the Income Tax Act, 2025, which consolidates the erstwhile TDS provisions (Sections 192 to 196D of the 1961 Act, including Section 194C for contractors and Section 194J for professionals) into a single structured section with sub-clauses covering rates and thresholds for each payment type. TDS rates themselves are unchanged - only the section reference and challan/return codes change.",
+      "sources": [
+        {
+          "url": "https://www.incometaxindia.gov.in/w/section-393-5",
+          "note": null
+        }
+      ],
+      "evidence": [
+        {
+          "url": "https://www.incometaxindia.gov.in/w/section-393-5",
+          "title": "incometaxindia.gov.in/section-393-5",
+          "quote": "Challan-cum-statement of deduction of tax under\n[section 393(1)](https://www.incometaxindia.gov.in/w/section-393-5#)\nof the Income-tax Act 2025 Payments to contractors referred to in section 393(1)[Table: Sl. No. 6(i)] Fees for professional or technical services referred to in section 393(1)[Table: Sl. No. 6(iii)]",
+          "context": "[Advanced Search](https://www.incometaxindia.gov.in/advanced-search)\n2\n\nDue Dates\n\n06 May 2026\n​Due date for deposit of Tax deducted/collected for the month of April, 2026. However, all sum deducted/collected by an office of the government shall be paid to the credit of the Central Government on the same day where tax is paid without production of a challan.\n29 May 2026\nChallan-cum-statement of deduction of tax under\n[section 393(1)](https://www.incometaxindia.gov.in/w/section-393-5#)\nof the Income-tax Act 2025\n[\nTable Sl. No. 2(i), 3(i), 6(ii) & 8(vi) in the month of April, 2026\nGo to Tax Calendar\nMenu\n\\\n\nDue Dates\n\n- [Home](https://www.incometaxindia.gov.in/en/home?doAsUserId=P8dqHo7GMNv%2FXYXPfeJIUA%3D%3D%3FcategoryId%3D10191473%3FcategoryId%3D%3FcategoryId%3D40193%3FcategoryId%3D%3FcategoryId%3D40193%3FcategoryId%3D10191473%3FcategoryId%3D40193%3FcategoryId%3D%3FcategoryId%3D39787%3FcategoryId%3D%3FcategoryId%3D39787%3FcategoryId%3D40193%3FcategoryId%3D39787%3FcategoryId%3D40193%3FcategoryId%3D%3FcategoryId%3D39787%3FcategoryId%3D39787%3FcategoryId%3D%3FcategoryId%3D10191473%3FcategoryId%3D39787%3FcategoryId%3D40193%3FcategoryId%3D%3FcategoryId%3D%3FcategoryId%3D%3FcategoryId%3D39787) \\\n- About Us \\\n- Tax Laws & Rules \\\n\nDue Dates\n\n- [Take Online Oath](https://www.incometaxindia.gov.in/en/take-online-oath?doAsUserId=P8dqHo7GMNv%2FXYXPfeJIUA%3D%3D%3FcategoryId%3D10191473%3FcategoryId%3D%3FcategoryId%3D40193%3FcategoryId%3D%3FcategoryId%3D40193%3FcategoryId%3D10191473%3FcategoryId%3D40193%3FcategoryId%3D%3FcategoryId%3D39787%3FcategoryId%3D%3FcategoryId%3D39787%3FcategoryId%3D40193%3FcategoryId%3D39787%3FcategoryId%3D40193%3FcategoryId%3D%3FcategoryId%3D39787%3FcategoryId%3D39787%3FcategoryId%3D%3FcategoryId%3D10191473%3FcategoryId%3D39787%3FcategoryId%3D40193%3FcategoryId%3D%3FcategoryId%3D%3FcategoryId%3D%3FcategoryId%3D39787) 2 \\\n\nDue Dates\\\n\n06 May 2026\n​Due date for deposit of Tax deducted/collected for the month of April, 2026. However, all sum deducted/collected by an office of the government shall be paid to the credit of the Central Government on the same day where tax is paid without production of a challan.\n29 May 2026\nChallan-cum-statement of deduction of tax under\n[section 393(1)](https://www.incometaxindia.gov.in/w/section-393-5#)\nof the Income-tax Act 2025\n[\nTable Sl. No. 2(i), 3(i), 6(ii) & 8(vi) in the month of April, 2026\nGo to Tax Calendar\nClose\n[Advanced Search](https://www.incometaxindia.gov.in/advanced-search)",
+          "kind": "source"
+        }
+      ],
       "gold_nuggets": [
         {
           "id": "n1",
-          "text": "Under SEBI’s OBPP framework, the effective minimum investment for listed corporate bonds is ₹10,000, typically the face value of one bond unit.",
+          "text": "For payments made on or after 1 April 2026, cite Section 393 of the Income Tax Act, 2025 on TDS challans and returns.",
           "vital": true,
-          "evidence_quote": "at a face value at Rs. Ten Thousand"
+          "evidence_quote": "Challan-cum-statement of deduction of tax under [section 393(1)] of the Income-tax Act 2025"
         },
         {
           "id": "n2",
-          "text": "The applicable minimum can vary by specific bond issue because the face value or unit size is set at issuance.",
+          "text": "Section 393 covers both payments to contractors and fees for professional or technical services.",
+          "vital": true,
+          "evidence_quote": "Payments to contractors referred to in section 393(1)[Table: Sl. No. 6(i)]. Fees for professional or technical services referred to in section 393(1)[Table: Sl. No. 6(iii)]."
+        },
+        {
+          "id": "n3",
+          "text": "The TDS rates remain unchanged; only the section reference and challan/return codes change.",
           "vital": false,
           "evidence_quote": null
         }

index.html

@@ -1,270 +1,268 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>BFSI-Bench — GroundTruth</title>
-    <meta
-      name="description"
-      content="BFSI-Bench tests how well language models answer questions about India’s banking, financial services, and insurance rules."
-    />
-    <link rel="icon" href="./assets/gt-favicon-color.svg" type="image/svg+xml" />
-    <link rel="stylesheet" href="./styles.css" />
-  </head>
-  <body>
-    <div class="app" id="app">
-      <header class="top">
-        <a class="brand-lockup" href="https://ground-truth.in/" target="_blank" rel="noopener noreferrer">
-          <img class="brand-logo" src="./assets/gt-logo.png" width="178" height="42" alt="GroundTruth" />
-          <span class="brand-product">BFSI-Bench</span>
-        </a>
-        <nav class="mode-nav" role="tablist" aria-label="Site sections">
-          <button class="mode active" type="button" role="tab" aria-selected="true" data-mode="overview">
-            Overview
-          </button>
-          <button class="mode" type="button" role="tab" aria-selected="false" data-mode="samples">
-            Samples
-          </button>
-          <button class="mode" type="button" role="tab" aria-selected="false" data-mode="leaderboard">
-            Leaderboard
-          </button>
-        </nav>
-        <div class="top-links">
-          <a href="https://huggingface.co/datasets/ground-truth/bfsi-bench" target="_blank" rel="noopener noreferrer"
-            >Dataset</a
-          >
-          <a href="https://ground-truth.in/" target="_blank" rel="noopener noreferrer">ground-truth.in</a>
-        </div>
-      </header>
-
-      <section class="mode-panel active" id="mode-overview" role="tabpanel">
-        <article class="overview">
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>BFSI-Bench — GroundTruth</title>
+    <meta
+      name="description"
+      content="BFSI-Bench tests how well language models answer questions about India’s banking, financial services, and insurance rules."
+    />
+    <link rel="icon" href="./assets/gt-mark.svg" type="image/svg+xml" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <div class="app" id="app">
+      <header class="top">
+        <a class="brand-lockup" href="https://ground-truth.in/" target="_blank" rel="noopener noreferrer">
+          <img class="brand-mark" src="./assets/gt-mark.svg" width="40" height="40" alt="GroundTruth" />
+          <span class="brand-text">
+            <span class="brand-name">GroundTruth</span>
+            <span class="brand-product">BFSI-Bench</span>
+          </span>
+        </a>
+        <nav class="mode-nav" role="tablist" aria-label="Site sections">
+          <button class="mode active" type="button" role="tab" aria-selected="true" data-mode="overview">
+            Overview
+          </button>
+          <button class="mode" type="button" role="tab" aria-selected="false" data-mode="samples">
+            Samples
+          </button>
+          <button class="mode" type="button" role="tab" aria-selected="false" data-mode="leaderboard">
+            Leaderboard
+          </button>
+        </nav>
+        <div class="top-links">
+          <a href="https://huggingface.co/datasets/ground-truth/bfsi-bench" target="_blank" rel="noopener noreferrer"
+            >Dataset</a
+          >
+          <a href="https://ground-truth.in/" target="_blank" rel="noopener noreferrer">ground-truth.in</a>
+        </div>
+      </header>
+
+      <section class="mode-panel active" id="mode-overview" role="tabpanel">
+        <article class="overview">
           <header class="hero">
-            <div class="hero-copy">
-              <p class="kicker">189 English questions · CC BY 4.0</p>
-              <h1>BFSI-Bench</h1>
-              <p class="deck">
-                BFSI-Bench tests how well language models answer questions about India’s banking,
-                financial services, and insurance (BFSI) rules.
-              </p>
-              <p class="deck">
-                The right answer often depends on circulars and regulations that change. Official
-                sources — sites like RBI, SEBI, and IRDAI — can be hard to find and keep current.
-              </p>
-              <p class="hero-actions">
-                <button type="button" class="btn-primary" data-goto="samples">Browse samples</button>
-                <a
-                  class="btn-ghost"
-                  href="https://ground-truth.in/blog/introducing-bfsi-bench"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  >Read the blog</a>
-                <a
-                  class="btn-ghost"
-                  href="https://huggingface.co/datasets/ground-truth/bfsi-bench"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  >Open the Hugging Face dataset</a>
-              </p>
-            </div>
-            <div class="overview-note-art" aria-hidden="true"></div>
+            <p class="kicker">190 English questions · CC BY 4.0</p>
+            <h1>BFSI-Bench</h1>
+            <p class="deck">
+              BFSI-Bench tests how well language models answer questions about India’s banking,
+              financial services, and insurance (BFSI) rules.
+            </p>
+            <p class="deck">
+              The right answer often depends on circulars and regulations that change. Official
+              sources — sites like RBI, SEBI, and IRDAI — can be hard to find and keep current.
+            </p>
+            <p class="hero-actions">
+              <button type="button" class="btn-primary" data-goto="samples">Browse samples</button>
+              <a
+                class="btn-ghost"
+                href="https://ground-truth.in/blog/introducing-bfsi-bench"
+                target="_blank"
+                rel="noopener noreferrer"
+                >Read the blog</a
+              >
+              <a
+                class="btn-ghost"
+                href="https://huggingface.co/datasets/ground-truth/bfsi-bench"
+                target="_blank"
+                rel="noopener noreferrer"
+                >Open the Hugging Face dataset</a
+              >
+            </p>
           </header>
 
-          <div class="trust-strip" aria-label="Benchmark principles">
-            <span>Primary-source grounded</span>
-            <span>Fact-level scoring</span>
-            <span>India-specific by design</span>
-          </div>
-
-          <section class="prose">
+          <section class="prose">
             <h2>What’s in the set</h2>
             <p>
-              There are 189 questions in English. Domain experts wrote the questions and the
+              There are 190 questions in English. Domain experts wrote the questions and the
               answers, then checked them against official Indian sources. You can open every
               sample on this page.
             </p>
-            <p>
-              The download does not include full source documents. Each sample has source links,
-              short quotes, and a list of facts used when we score a model.
-            </p>
-          </section>
-
-          <section>
+            <p>
+              The download does not include full source documents. Each sample has source links,
+              short quotes, and a list of facts used when we score a model.
+            </p>
+          </section>
+
+          <section>
             <h2>The five question types</h2>
-            <p class="section-lead">
-              Every question has one label. The number is how many items sit in that group.
-            </p>
-            <div class="cat-grid">
-              <button type="button" class="cat-card cat-jur" data-goto="samples" data-cat-target="BFSI-JUR">
-                <span class="cat-code">Jurisdiction · 71 questions</span>
-                <span class="cat-title">Jurisdiction-Aware Compliance</span>
-                <span class="cat-desc">
+            <p class="section-lead">
+              Every question has one label. The number is how many items sit in that group.
+            </p>
+            <div class="cat-grid">
+              <article class="cat-card cat-jur">
+                <p class="cat-code">Jurisdiction · 71 questions</p>
+                <h3>Jurisdiction-Aware Compliance</h3>
+                <p>
                   Use Indian rules, or ask which country the user means, instead of defaulting to
                   U.S. or EU law.
-                </span>
-                <span class="cat-arrow" aria-hidden="true">↗</span>
-              </button>
-              <button type="button" class="cat-card cat-num" data-goto="samples" data-cat-target="BFSI-NUM">
-                <span class="cat-code">Numerical · 36 questions</span>
-                <span class="cat-title">Numerical Reasoning</span>
-                <span class="cat-desc">Get the finance math right, including EMI, interest, and TDS.</span>
-                <span class="cat-arrow" aria-hidden="true">↗</span>
-              </button>
-              <button type="button" class="cat-card cat-tmp" data-goto="samples" data-cat-target="BFSI-TMP">
-                <span class="cat-code">Temporal · 17 questions</span>
-                <span class="cat-title">Temporal Logic</span>
-                <span class="cat-desc">Prefer the rule that applies now when the question does not name a year.</span>
-                <span class="cat-arrow" aria-hidden="true">↗</span>
-              </button>
-              <button type="button" class="cat-card cat-adv" data-goto="samples" data-cat-target="BFSI-ADV">
-                <span class="cat-code">Red-team · 29 questions</span>
-                <span class="cat-title">Red-Team Evasion</span>
-                <span class="cat-desc">
+                </p>
+              </article>
+              <article class="cat-card cat-num">
+                <p class="cat-code">Numerical · 36 questions</p>
+                <h3>Numerical Reasoning</h3>
+                <p>Get the finance math right, including EMI, interest, and TDS.</p>
+              </article>
+              <article class="cat-card cat-tmp">
+                <p class="cat-code">Temporal · 17 questions</p>
+                <h3>Temporal Logic</h3>
+                <p>Prefer the rule that applies now when the question does not name a year.</p>
+              </article>
+              <article class="cat-card cat-adv">
+                <p class="cat-code">Red-team · 29 questions</p>
+                <h3>Red-Team Evasion</h3>
+                <p>
                   Refuse illegal financial workarounds and point people to legitimate channels.
-                </span>
-                <span class="cat-arrow" aria-hidden="true">↗</span>
-              </button>
-              <button type="button" class="cat-card cat-grd" data-goto="samples" data-cat-target="BFSI-GRD">
-                <span class="cat-code">Groundedness · 36 questions</span>
-                <span class="cat-title">Groundedness</span>
-                <span class="cat-desc">Stick to the circular, scheme, or policy named in the question.</span>
-                <span class="cat-arrow" aria-hidden="true">↗</span>
-              </button>
-            </div>
-          </section>
-
-          <section>
+                </p>
+              </article>
+              <article class="cat-card cat-grd">
+                <p class="cat-code">Groundedness · 36 questions</p>
+                <h3>Groundedness</h3>
+                <p>Stick to the circular, scheme, or policy named in the question.</p>
+              </article>
+            </div>
+          </section>
+
+          <section>
             <h2>Fields in a sample</h2>
             <p class="section-lead">
               On Hugging Face these are column names. Here is what they mean.
-            </p>
-            <div class="table-wrap">
-              <table class="data-table">
-                <thead>
-                  <tr>
-                    <th>You see</th>
-                    <th>What it is</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr>
-                    <td>Id</td>
-                    <td>A stable name for the item, such as <code>bfsi-jur-001</code></td>
-                  </tr>
-                  <tr>
-                    <td>Question</td>
-                    <td>The prompt we send the model</td>
-                  </tr>
-                  <tr>
-                    <td>Expert answer</td>
-                    <td>The reference answer written by a domain expert</td>
-                  </tr>
-                  <tr>
-                    <td>Facts</td>
-                    <td>Short claims we check in a model’s reply. Some are marked required.</td>
-                  </tr>
-                  <tr>
-                    <td>Sources</td>
-                    <td>Official page links, a short note, and a publication date when we have one</td>
-                  </tr>
-                  <tr>
-                    <td>Evidence</td>
-                    <td>Quoted spans from those pages, plus a bit of surrounding text</td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </section>
-
-          <section class="prose">
+            </p>
+            <div class="table-wrap">
+              <table class="data-table">
+                <thead>
+                  <tr>
+                    <th>You see</th>
+                    <th>What it is</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>Id</td>
+                    <td>A stable name for the item, such as <code>bfsi-jur-001</code></td>
+                  </tr>
+                  <tr>
+                    <td>Question</td>
+                    <td>The prompt we send the model</td>
+                  </tr>
+                  <tr>
+                    <td>Expert answer</td>
+                    <td>The reference answer written by a domain expert</td>
+                  </tr>
+                  <tr>
+                    <td>Facts</td>
+                    <td>Short claims we check in a model’s reply. Some are marked required.</td>
+                  </tr>
+                  <tr>
+                    <td>Sources</td>
+                    <td>Official page links, a short note, and a publication date when we have one</td>
+                  </tr>
+                  <tr>
+                    <td>Evidence</td>
+                    <td>Quoted spans from those pages, plus a bit of surrounding text</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </section>
+
+          <section class="prose">
             <h2>Citation</h2>
-            <pre><code>@dataset{groundtruth2026bfsibench,
-  title={BFSI-Bench: Fact-Seeking Eval for Indian BFSI},
-  author={GroundTruth},
-  year={2026},
-  url={https://huggingface.co/datasets/ground-truth/bfsi-bench},
-  license={CC-BY-4.0}
-}</code></pre>
-            <p>
-              Questions about this work:
-              <a href="mailto:miroojin@ground-truth.in">miroojin@ground-truth.in</a>
-            </p>
-          </section>
-        </article>
-
-        <footer class="foot">
-          <a class="foot-brand" href="https://ground-truth.in/" target="_blank" rel="noopener noreferrer">
-            <img src="./assets/gt-logo.png" width="128" height="30" alt="GroundTruth" />
-          </a>
-          <p>
-            <a href="https://ground-truth.in/" target="_blank" rel="noopener noreferrer">ground-truth.in</a>
-            ·
-            <a href="https://huggingface.co/datasets/ground-truth/bfsi-bench" target="_blank" rel="noopener noreferrer"
-              >Hugging Face dataset</a
-            >
-          </p>
-        </footer>
-      </section>
-
-      <section class="mode-panel explorer-panel" id="mode-samples" role="tabpanel" hidden>
-        <div class="explorer" id="explorer">
-          <aside class="sidebar">
-            <header class="sidebar-head">
-              <h2>Samples</h2>
-              <p class="progress" id="progress">Loading…</p>
-              <button type="button" class="drawer-close" id="btn-close-drawer" hidden>Close list</button>
-            </header>
-            <div class="filters">
-              <label>
-                Search
-                <input type="search" id="filter-q" placeholder="Question, answer, or id…" autocomplete="off" />
-              </label>
-              <div class="filter-group">
-                <span class="filter-group-label">Question type</span>
-                <div class="filter-chips" id="cat-chips" role="group" aria-label="Question type"></div>
-              </div>
-            </div>
-            <ul class="queue" id="queue" aria-label="Sample list"></ul>
-          </aside>
-
-          <main class="detail-pane" id="main">
-            <p class="empty" id="empty-state">Pick a question from the list.</p>
-            <p class="empty error" id="load-error" hidden></p>
-
-            <section class="detail" id="detail" hidden>
-              <header class="detail-head">
-                <div class="meta">
-                  <button type="button" class="drawer-open" id="btn-open-drawer">List</button>
-                  <span class="id" id="item-id"></span>
-                  <span class="pill" id="item-cat"></span>
-                </div>
-                <div class="nav-btns">
-                  <button type="button" id="btn-prev" title="Previous (k)">← Prev</button>
-                  <button type="button" id="btn-next" title="Next (j)">Next →</button>
-                  <button type="button" id="btn-copy" title="Copy link">Copy link</button>
-                </div>
-              </header>
-
-              <div class="sample-document">
-                <section class="sample-section sample-question" id="sample-question">
+            <pre><code>@dataset{groundtruth2026bfsibench,
+  title={BFSI-Bench: Fact-Seeking Eval for Indian BFSI},
+  author={GroundTruth},
+  year={2026},
+  url={https://huggingface.co/datasets/ground-truth/bfsi-bench},
+  license={CC-BY-4.0}
+}</code></pre>
+            <p>
+              Questions about this work:
+              <a href="mailto:miroojin@ground-truth.in">miroojin@ground-truth.in</a>
+            </p>
+          </section>
+        </article>
+
+        <footer class="foot">
+          <a class="foot-brand" href="https://ground-truth.in/" target="_blank" rel="noopener noreferrer">
+            <img src="./assets/gt-mark.svg" width="28" height="28" alt="" />
+            <span>GroundTruth</span>
+          </a>
+          <p>
+            <a href="https://ground-truth.in/" target="_blank" rel="noopener noreferrer">ground-truth.in</a>
+            ·
+            <a href="https://huggingface.co/datasets/ground-truth/bfsi-bench" target="_blank" rel="noopener noreferrer"
+              >Hugging Face dataset</a
+            >
+          </p>
+        </footer>
+      </section>
+
+      <section class="mode-panel explorer-panel" id="mode-samples" role="tabpanel" hidden>
+        <div class="explorer" id="explorer">
+          <aside class="sidebar">
+            <header class="sidebar-head">
+              <h2>Samples</h2>
+              <p class="progress" id="progress">Loading…</p>
+              <button type="button" class="drawer-close" id="btn-close-drawer" hidden>Close list</button>
+            </header>
+            <div class="filters">
+              <label>
+                Search
+                <input type="search" id="filter-q" placeholder="Question, answer, or id…" autocomplete="off" />
+              </label>
+              <div class="filter-group">
+                <span class="filter-group-label">Question type</span>
+                <div class="filter-chips" id="cat-chips" role="group" aria-label="Question type"></div>
+              </div>
+            </div>
+            <ul class="queue" id="queue" aria-label="Sample list"></ul>
+          </aside>
+
+          <main class="detail-pane" id="main">
+            <p class="empty" id="empty-state">Pick a question from the list.</p>
+            <p class="empty error" id="load-error" hidden></p>
+
+            <section class="detail" id="detail" hidden>
+              <header class="detail-head">
+                <div class="meta">
+                  <button type="button" class="drawer-open" id="btn-open-drawer">List</button>
+                  <span class="id" id="item-id"></span>
+                  <span class="pill" id="item-cat"></span>
+                </div>
+                <div class="nav-btns">
+                  <button type="button" id="btn-prev" title="Previous (k)">← Prev</button>
+                  <button type="button" id="btn-next" title="Next (j)">Next →</button>
+                  <button type="button" id="btn-copy" title="Copy link">Copy link</button>
+                </div>
+              </header>
+
+              <div class="grid">
+                <section class="card span-2">
                   <h2>Question</h2>
                   <p class="body" id="item-query"></p>
                 </section>
-                <section class="sample-section sample-answer" id="sample-answer">
+                <section class="card span-2">
                   <h2>Expert answer</h2>
                   <p class="body gold" id="item-gold"></p>
                 </section>
-                <section class="sample-section sample-sources" id="sample-sources">
+                <section class="card">
                   <h2>Sources</h2>
                   <p class="card-hint">Official pages this answer is based on.</p>
                   <ul class="sources" id="item-sources"></ul>
                 </section>
-                <section class="sample-section sample-facts" id="sample-facts">
+                <section class="card">
                   <h2>Facts we score</h2>
                   <p class="card-hint">Required facts must be in a correct answer.</p>
                   <div class="nuggets" id="item-nuggets"></div>
                 </section>
-                <section class="sample-section sample-evidence" id="sample-evidence">
+                <section class="card span-2">
                   <h2>Evidence</h2>
                   <p class="card-hint">Quotes pulled from the source pages.</p>
                   <div class="evidence" id="item-evidence"></div>
@@ -272,38 +270,18 @@
               </div>
             </section>
           </main>
-
-          <aside class="sample-outline" aria-label="Sample sections">
-            <p class="outline-label">On this sample</p>
-            <nav class="outline-nav" id="sample-outline">
-              <button type="button" class="active" data-section="sample-question" aria-current="true">Question</button>
-              <button type="button" data-section="sample-answer">Expert answer</button>
-              <button type="button" data-section="sample-sources">Sources</button>
-              <button type="button" data-section="sample-facts">Facts we score</button>
-              <button type="button" data-section="sample-evidence">Evidence</button>
-            </nav>
-          </aside>
         </div>
       </section>
-
-      <section class="mode-panel" id="mode-leaderboard" role="tabpanel" hidden>
-        <article class="overview">
-          <header class="hero hero-plain leaderboard-hero">
-            <div class="hero-copy">
-              <p class="kicker">Model scores</p>
-              <h1>Leaderboard</h1>
-              <p class="deck">
-                This table will show how widely used models do on BFSI-Bench. The cells are empty
-                for now.
-              </p>
-            </div>
-            <div class="leaderboard-artwork">
-              <div class="status-note" aria-label="Leaderboard status">
-                <span class="status-dot" aria-hidden="true"></span>
-                <strong>Evaluation in progress</strong>
-                <small>Results publishing shortly</small>
-              </div>
-            </div>
+
+      <section class="mode-panel" id="mode-leaderboard" role="tabpanel" hidden>
+        <article class="overview">
+          <header class="hero hero-plain">
+            <p class="kicker">Model scores</p>
+            <h1>Leaderboard</h1>
+            <p class="deck">
+              Parametric scores (no tools, no India system prompt) graded against gold nuggets
+              on the 190-item test split. Empty cells are not published yet.
+            </p>
           </header>
           <section class="prose">
             <h2>How we score</h2>
@@ -315,7 +293,9 @@
           </section>
           <div class="table-wrap">
             <table class="data-table">
-              <caption>No scores published yet</caption>
+              <caption>
+                Accuracy (%) · nugget grader · n=190
+              </caption>
               <thead>
                 <tr>
                   <th>Model</th>
@@ -330,48 +310,73 @@
               <tbody>
                 <tr>
                   <td><code>openai/gpt-5.6-sol</code></td>
-                  <td class="num">—</td><td class="num">—</td><td class="num">—</td>
-                  <td class="num">—</td><td class="num">—</td><td class="num">—</td>
+                  <td class="num">86.32</td>
+                  <td class="num">77.46</td>
+                  <td class="num">100.0</td>
+                  <td class="num">66.67</td>
+                  <td class="num">93.1</td>
+                  <td class="num">94.44</td>
                 </tr>
                 <tr>
                   <td><code>meta/muse-spark-1.2</code></td>
-                  <td class="num">—</td><td class="num">—</td><td class="num">—</td>
-                  <td class="num">—</td><td class="num">—</td><td class="num">—</td>
+                  <td class="num">77.37</td>
+                  <td class="num">56.34</td>
+                  <td class="num">94.44</td>
+                  <td class="num">61.11</td>
+                  <td class="num">93.1</td>
+                  <td class="num">97.22</td>
                 </tr>
                 <tr>
                   <td><code>openai/gpt-5</code></td>
-                  <td class="num">—</td><td class="num">—</td><td class="num">—</td>
-                  <td class="num">—</td><td class="num">—</td><td class="num">—</td>
+                  <td class="num">—</td>
+                  <td class="num">—</td>
+                  <td class="num">—</td>
+                  <td class="num">—</td>
+                  <td class="num">—</td>
+                  <td class="num">—</td>
                 </tr>
                 <tr>
                   <td><code>google/gemini-3.7-flash</code></td>
-                  <td class="num">—</td><td class="num">—</td><td class="num">—</td>
-                  <td class="num">—</td><td class="num">—</td><td class="num">—</td>
+                  <td class="num">66.32</td>
+                  <td class="num">43.66</td>
+                  <td class="num">86.11</td>
+                  <td class="num">50.0</td>
+                  <td class="num">72.41</td>
+                  <td class="num">94.44</td>
                 </tr>
                 <tr>
                   <td><code>meta/muse-glimmer-30b</code></td>
-                  <td class="num">—</td><td class="num">—</td><td class="num">—</td>
-                  <td class="num">—</td><td class="num">—</td><td class="num">—</td>
+                  <td class="num">—</td>
+                  <td class="num">—</td>
+                  <td class="num">—</td>
+                  <td class="num">—</td>
+                  <td class="num">—</td>
+                  <td class="num">—</td>
                 </tr>
                 <tr>
                   <td><code>google/gemma-4-31b-it</code></td>
-                  <td class="num">—</td><td class="num">—</td><td class="num">—</td>
-                  <td class="num">—</td><td class="num">—</td><td class="num">—</td>
+                  <td class="num">—</td>
+                  <td class="num">—</td>
+                  <td class="num">—</td>
+                  <td class="num">—</td>
+                  <td class="num">—</td>
+                  <td class="num">—</td>
                 </tr>
               </tbody>
             </table>
           </div>
-        </article>
-        <footer class="foot">
-          <a class="foot-brand" href="https://ground-truth.in/" target="_blank" rel="noopener noreferrer">
-            <img src="./assets/gt-logo.png" width="128" height="30" alt="GroundTruth" />
-          </a>
-          <p>
-            <a href="https://ground-truth.in/" target="_blank" rel="noopener noreferrer">ground-truth.in</a>
-          </p>
-        </footer>
-      </section>
-    </div>
-    <script src="./app.js"></script>
-  </body>
-</html>
+        </article>
+        <footer class="foot">
+          <a class="foot-brand" href="https://ground-truth.in/" target="_blank" rel="noopener noreferrer">
+            <img src="./assets/gt-mark.svg" width="28" height="28" alt="" />
+            <span>GroundTruth</span>
+          </a>
+          <p>
+            <a href="https://ground-truth.in/" target="_blank" rel="noopener noreferrer">ground-truth.in</a>
+          </p>
+        </footer>
+      </section>
+    </div>
+    <script src="./app.js"></script>
+  </body>
+</html>

styles.css

@@ -1,584 +1,443 @@
 :root {
-  --bg: #f9f9f9;
-  --bg-band: #f3f3f3;
-  --ink: #1a1c1c;
-  --muted: #464651;
-  --line: rgba(198, 197, 211, 0.38);
-  --line-dark: #767682;
+  --bg: #f3f6f5;
+  --bg-band: #e4ebe7;
+  --ink: #13261b;
+  --muted: #5e6b64;
+  --line: #cfd8d2;
   --paper: #ffffff;
   --accent: #48a47c;
-  --accent-deep: #363f8c;
-  --artwork-green: #143b29;
+  --accent-deep: #193625;
   --accent-blue: #363f8c;
-  --accent-mid: #4e57a6;
-  --accent-soft: rgba(150, 242, 197, 0.22);
-  --jur: #193625;
-  --num: #3b5b88;
-  --tmp: #a85613;
-  --adv: #8a3d2a;
-  --grd: #363f8c;
-  --display: "Google Sans", "Manrope", Arial, sans-serif;
-  --sans: "Google Sans", "Manrope", Arial, sans-serif;
-  --mono: "Google Sans", ui-monospace, monospace;
-}
-
-@font-face {
-  font-family: "Google Sans";
-  src: url("./assets/GoogleSans-Subset.ttf") format("truetype");
-  font-style: normal;
-  font-weight: 100 900;
-  font-display: swap;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-html,
+  --accent-mid: #3b5b88;
+  --accent-soft: #e6f3ec;
+  --jur: #193625;
+  --num: #3b5b88;
+  --tmp: #a85613;
+  --adv: #8a3d2a;
+  --grd: #363f8c;
+  --display: "Poppins", "Inter", system-ui, sans-serif;
+  --sans: "Inter", system-ui, sans-serif;
+  --mono: "IBM Plex Mono", ui-monospace, monospace;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
 body {
-  margin: 0;
-  height: 100%;
-}
-
-body {
-  color: var(--ink);
-  background: var(--bg);
-  font-family: var(--sans);
-  font-size: 1rem;
+  margin: 0;
+  height: 100%;
+}
+
+body {
+  color: var(--ink);
+  background: var(--bg);
+  font-family: var(--sans);
+  font-size: 1.02rem;
   line-height: 1.6;
-  font-weight: 300;
-}
-
-.app {
-  min-height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-body.is-explorer {
-  overflow: hidden;
-}
-
-body.is-explorer .app {
-  height: 100%;
-}
-
-.top {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem 1.25rem;
-  padding: 0.7rem clamp(1rem, 3vw, 2.5rem);
-  border-bottom: 1px solid var(--line);
-  background: var(--paper);
-  flex-shrink: 0;
+}
+
+.app {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+body.is-explorer {
+  overflow: hidden;
+}
+
+body.is-explorer .app {
+  height: 100%;
+}
+
+.top {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem 1.25rem;
+  padding: 0.85rem 1.25rem;
+  border-bottom: 1px solid var(--line);
+  background: var(--paper);
+  flex-shrink: 0;
   z-index: 20;
-  min-height: 68px;
-}
-
+}
+
 .brand-lockup {
   display: inline-flex;
   align-items: center;
-  gap: 0.8rem;
+  gap: 0.7rem;
   text-decoration: none;
   color: inherit;
 }
-
-.brand-logo {
+
+.brand-mark {
   display: block;
-  width: clamp(128px, 13vw, 158px);
-  height: auto;
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
   flex-shrink: 0;
 }
 
+.brand-text {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.15;
+}
+
+.brand-name {
+  font-family: var(--display);
+  font-size: 1.05rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--accent-deep);
+}
+
 .brand-product {
-  border-left: 1px solid var(--line-dark);
-  padding-left: 0.8rem;
-  font-size: 0.78rem;
-  font-weight: 300;
+  font-size: 0.82rem;
+  font-weight: 500;
   color: var(--muted);
 }
-
-.mode-nav {
-  display: inline-flex;
-  gap: 0.15rem;
-  padding: 0.2rem;
-  background: transparent;
-  border-radius: 0;
-}
-
+
+.mode-nav {
+  display: inline-flex;
+  gap: 0.15rem;
+  padding: 0.2rem;
+  background: var(--bg-band);
+  border-radius: 8px;
+}
+
 .mode {
-  border: 0;
-  background: transparent;
-  color: var(--muted);
-  font: inherit;
-  font-weight: 400;
-  font-size: 0.9rem;
-  padding: 0.45rem 0.9rem;
-  border-radius: 0;
-  border-bottom: 2px solid transparent;
-  cursor: pointer;
-}
-
-.mode.active {
+  border: 0;
   background: transparent;
+  color: var(--muted);
+  font: inherit;
+  font-weight: 600;
+  font-size: 0.9rem;
+  padding: 0.45rem 0.95rem;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.mode.active {
+  background: var(--paper);
   color: var(--accent-deep);
-  border-bottom-color: var(--accent);
-}
-
-.mode:focus-visible,
-.nav-btns button:focus-visible,
-.filter-chips button:focus-visible,
-.btn-primary:focus-visible,
-.btn-ghost:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-}
-
-.top-links {
-  display: flex;
-  gap: 1rem;
-  font-size: 0.88rem;
-}
-
+}
+
+.mode:focus-visible,
+.nav-btns button:focus-visible,
+.filter-chips button:focus-visible,
+.btn-primary:focus-visible,
+.btn-ghost:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.top-links {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.88rem;
+}
+
 .top-links a {
-  color: var(--accent-mid);
-  text-decoration: none;
-  font-weight: 400;
-}
-
-.top-links a:hover {
-  color: var(--accent-deep);
-  text-decoration: underline;
-}
-
-.mode-panel[hidden] {
-  display: none !important;
-}
-
-.mode-panel:not(.explorer-panel) {
-  flex: 1;
-}
-
-#mode-overview,
-#mode-leaderboard {
-  max-width: 1160px;
-  width: 100%;
-  margin: 0 auto;
-  padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2rem) 3rem;
-}
-
-.hero {
-  display: grid;
-  grid-template-columns: 62% 38%;
-  gap: 0;
-  padding: 0;
-  min-height: 620px;
-  align-items: center;
-  border-radius: 0;
-  background: var(--artwork-green);
-  color: #f3f6f5;
-  margin-bottom: 0;
-  position: relative;
-  overflow: hidden;
+  color: var(--accent-mid);
+  text-decoration: none;
+  font-weight: 600;
 }
 
-.hero-copy,
-.hero-artwork,
-.overview-note-art,
-.leaderboard-artwork,
-.status-note {
-  position: relative;
-  z-index: 1;
+.top-links a:hover {
+  color: var(--accent-deep);
+  text-decoration: underline;
+}
+
+.mode-panel[hidden] {
+  display: none !important;
+}
+
+.mode-panel:not(.explorer-panel) {
+  flex: 1;
+}
+
+#mode-overview,
+#mode-leaderboard {
+  max-width: 960px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem 3rem;
 }
 
-.hero-copy { padding: clamp(3.5rem, 5vw, 4.5rem); }
+.hero {
+  padding: 1.75rem 1.6rem 1.5rem;
+  border-radius: 12px;
+  background:
+    linear-gradient(115deg, rgba(19, 38, 27, 0.96) 0%, rgba(25, 54, 37, 0.88) 48%, rgba(54, 63, 140, 0.78) 100%);
+  color: #f3f6f5;
+  margin-bottom: 1.5rem;
+}
 
-.overview-note-art {
-  align-self: stretch;
-  min-height: 620px;
-  background: var(--artwork-green) url("assets/bfsi-note-collage-v1.webp") center center / cover no-repeat;
-  border-left: 1px solid rgba(255, 255, 255, 0.12);
+.hero-plain {
+  background: var(--accent-deep);
 }
 
-.hero-artwork { min-height: 280px; }
-.hero-artwork::before,
-.hero-artwork::after { content: ""; position: absolute; border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 32px; }
-.hero-artwork::before { width: 72%; aspect-ratio: 1; right: 2%; top: 2%; }
-.hero-artwork::after { width: 48%; aspect-ratio: 1; right: 34%; top: 30%; border-radius: 50%; background: rgba(150, 242, 197, 0.1); }
-
 .kicker {
-  margin: 0 0 0.45rem;
-  font-size: 0.78rem;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  font-weight: 300;
+  margin: 0 0 0.45rem;
+  font-size: 0.78rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  font-weight: 600;
   opacity: 0.82;
-  font-family: var(--mono);
 }
 
-.kicker span { color: #93d7b8; margin-right: 0.65rem; }
-
 .hero h1 {
-  margin: 0;
-  font-family: var(--display);
-  max-width: 780px;
-  font-size: clamp(2.6rem, 5vw, 3.5rem);
-  font-weight: 300;
-  letter-spacing: -0.035em;
-  line-height: 1.04;
-}
-
-.hero .deck {
-  max-width: none;
-  font-size: clamp(0.95rem, 1.25vw, 1.05rem);
-  line-height: 1.55;
-  margin: 2rem 0 0;
-  color: #e7eee9;
-}
-
-.hero-note {
-  max-width: 620px;
-  margin: 1rem 0 0;
-  color: #afbeb5;
-  font-size: 0.9rem;
-  line-height: 1.5;
+  margin: 0 0 0.6rem;
+  font-family: var(--display);
+  font-size: clamp(1.7rem, 4vw, 2.35rem);
+  letter-spacing: -0.03em;
+  line-height: 1.15;
 }
 
-.trust-strip { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-top: 0; margin-bottom: 4rem; background: var(--paper); }
-.trust-strip span { padding: 1rem; text-align: center; color: var(--muted); font-family: var(--sans); font-size: .72rem; font-weight: 300; text-transform: uppercase; letter-spacing: .08em; border-right: 1px solid var(--line); }
-.trust-strip span:last-child { border-right: 0; }
-
 .hero .deck + .deck {
-  margin-top: 0.8rem;
-}
-
-.hero-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.6rem;
-  margin: 1.6rem 0 0;
-}
-
+  margin-top: 0.7rem;
+}
+
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.6rem;
+  margin: 1.15rem 0 0;
+}
+
 .btn-primary,
 .btn-ghost {
-  display: inline-flex;
-  align-items: center;
-  font: inherit;
-  font-weight: 400;
-  font-size: 0.92rem;
-  padding: 0.45rem 0.95rem;
-  border-radius: 9999px;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.btn-primary {
-  border: 1px solid var(--accent);
+  display: inline-flex;
+  align-items: center;
+  font: inherit;
+  font-weight: 600;
+  font-size: 0.92rem;
+  padding: 0.45rem 0.95rem;
+  border-radius: 8px;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.btn-primary {
+  border: 0;
   background: var(--accent);
   color: #fff;
-  box-shadow: 0 8px 15px rgba(72, 164, 124, 0.3);
-}
-
-.btn-primary:hover { background: #3c8d69; border-color: #3c8d69; }
-
-.btn-ghost {
-  border: 1px solid rgba(243, 246, 245, 0.35);
-  background: transparent;
-  color: #f3f6f5;
-}
-
-.btn-ghost:hover {
-  background: rgba(255, 255, 255, 0.08);
-}
-
+}
+
+.btn-ghost {
+  border: 1px solid rgba(243, 246, 245, 0.35);
+  background: transparent;
+  color: #f3f6f5;
+}
+
+.btn-ghost:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+
 .overview h2 {
   font-family: var(--display);
-  font-size: clamp(1.65rem, 3vw, 2.35rem);
-  font-weight: 300;
-  color: var(--accent-deep);
-  line-height: 1.08;
-  letter-spacing: -0.025em;
+  font-size: 1.2rem;
   margin: 0 0 0.75rem;
 }
 
-.overview > section,
-.overview > .prose { margin: 0 auto 4rem; max-width: 940px; }
-
-.section-index { margin: 0 0 .6rem !important; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; color: var(--accent) !important; }
-
-.section-lead {
-  margin: -0.25rem 0 0.9rem;
-  color: var(--muted);
-  font-size: 0.95rem;
-}
-
-.card-hint {
-  margin: 0 0 0.55rem;
-  font-size: 0.8rem;
-  color: var(--muted);
-  line-height: 1.4;
-}
-
-.prose p,
-.prose ol {
-  margin: 0 0 0.9rem;
-  color: var(--ink);
-}
-
-.prose blockquote {
-  margin: 0 0 1rem;
-  padding: 0.7rem 1rem;
-  border-left: 3px solid var(--accent);
-  background: var(--paper);
-  color: var(--muted);
-  font-style: italic;
-}
-
+.section-lead {
+  margin: -0.25rem 0 0.9rem;
+  color: var(--muted);
+  font-size: 0.95rem;
+}
+
+.card-hint {
+  margin: 0 0 0.55rem;
+  font-size: 0.8rem;
+  color: var(--muted);
+  line-height: 1.4;
+}
+
+.prose p,
+.prose ol {
+  margin: 0 0 0.9rem;
+  color: var(--ink);
+}
+
+.prose blockquote {
+  margin: 0 0 1rem;
+  padding: 0.7rem 1rem;
+  border-left: 3px solid var(--accent);
+  background: var(--paper);
+  color: var(--muted);
+  font-style: italic;
+}
+
 .prose pre,
 .overview pre {
-  background: #f1f2f1;
-  color: var(--ink);
+  background: var(--accent-deep);
+  color: #e8f0eb;
   padding: 1rem 1.1rem;
-  border: 1px solid var(--line);
-  border-radius: 0;
+  border-radius: 8px;
   overflow: auto;
-  font-family: var(--mono);
-  font-size: 0.78rem;
-  line-height: 1.5;
-}
-
-.prose code,
-.data-table code {
-  font-family: var(--mono);
-  font-size: 0.84em;
-}
-
-.cat-grid {
-  display: grid;
-  grid-template-columns: repeat(6, minmax(0, 1fr));
-  gap: 0;
-  margin-bottom: 2rem;
-  border-top: 1px solid var(--line);
-  border-left: 1px solid var(--line);
-  counter-reset: category;
+  font-family: var(--mono);
+  font-size: 0.78rem;
+  line-height: 1.5;
 }
 
-.cat-card {
-  appearance: none;
-  position: relative;
-  grid-column: span 2;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  min-height: 280px;
-  text-align: left;
-  color: var(--ink);
-  font: inherit;
-  background: transparent;
-  border: 0;
-  border-bottom: 1px solid var(--line);
-  border-right: 1px solid var(--line);
-  border-radius: 0;
-  padding: clamp(1.5rem, 2.5vw, 2rem);
-  cursor: pointer;
+.prose code,
+.data-table code {
+  font-family: var(--mono);
+  font-size: 0.84em;
 }
 
-.cat-card:nth-child(n + 4) { grid-column: span 3; }
-
-.cat-card::before {
-  counter-increment: category;
-  content: "0" counter(category);
-  color: var(--cat-color, var(--accent-deep));
-  font-size: 0.75rem;
-  font-variant-numeric: tabular-nums;
-  letter-spacing: 0.08em;
+.cat-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+  margin-bottom: 2rem;
 }
 
-.cat-card:hover { background: rgba(255, 255, 255, 0.72); }
-.cat-arrow {
-  position: absolute;
-  right: clamp(1.5rem, 2.5vw, 2rem);
-  bottom: clamp(1.5rem, 2.5vw, 2rem);
-  display: grid;
-  place-items: center;
-  width: 2rem;
-  height: 2rem;
-  background: var(--bg-band);
-  color: var(--muted);
-  transition: transform .15s ease, background .15s ease;
+.cat-card {
+  background: var(--paper);
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  padding: 1rem 1.05rem 1.05rem;
+  border-left: 4px solid var(--accent);
 }
-.cat-card:hover .cat-arrow { color: var(--accent); transform: translate(2px,-2px); }
-.cat-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
 
 .cat-card.cat-jur {
-  --cat-color: var(--jur);
+  border-left-color: var(--jur);
 }
 .cat-card.cat-num {
-  --cat-color: var(--num);
+  border-left-color: var(--num);
 }
 .cat-card.cat-tmp {
-  --cat-color: var(--tmp);
+  border-left-color: var(--tmp);
 }
 .cat-card.cat-adv {
-  --cat-color: var(--adv);
+  border-left-color: var(--adv);
 }
 .cat-card.cat-grd {
-  --cat-color: var(--grd);
+  border-left-color: var(--grd);
 }
-
+
 .cat-code {
-  display: block;
-  order: 4;
-  margin: auto 3rem 0 0;
-  padding-top: 2rem;
+  margin: 0 0 0.3rem;
   font-family: var(--mono);
   font-size: 0.72rem;
   letter-spacing: 0.04em;
   color: var(--muted);
 }
 
-.cat-title {
-  display: block;
-  order: 2;
-  margin: 2.25rem 0 0;
-  font-family: var(--display);
-  font-size: clamp(1.35rem, 2vw, 1.7rem);
-  font-weight: 300;
-  line-height: 1.15;
-  color: var(--accent-deep);
+.cat-card h3 {
+  margin: 0 0 0.35rem;
+  font-size: 1rem;
 }
 
-.cat-desc {
-  display: block;
-  order: 3;
-  margin-top: 0.9rem;
+.cat-card p {
+  margin: 0;
   font-size: 0.92rem;
-  line-height: 1.5;
   color: var(--muted);
 }
-
+
 .table-wrap {
-  overflow: auto;
-  margin-bottom: 1.75rem;
-  border: 1px solid var(--line);
-  border-radius: 0;
-  background: var(--paper);
-}
-
-.data-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.9rem;
-}
-
-.data-table caption {
-  caption-side: bottom;
-  text-align: left;
-  padding: 0.55rem 0.9rem;
-  color: var(--muted);
-  font-size: 0.8rem;
-}
-
-.data-table th,
-.data-table td {
-  text-align: left;
-  padding: 0.55rem 0.9rem;
-  border-bottom: 1px solid var(--line);
-  vertical-align: top;
-}
-
-.data-table th {
-  font-size: 0.75rem;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--muted);
-  background: var(--bg);
-}
-
-.data-table tr:last-child td {
-  border-bottom: 0;
-}
-
-.data-table .num {
-  text-align: right;
-  font-variant-numeric: tabular-nums;
-}
-
-.foot {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-  margin-top: 2rem;
-  padding-top: 1rem;
-  border-top: 1px solid var(--line);
-  color: var(--muted);
-  font-size: 0.88rem;
-}
-
+  overflow: auto;
+  margin-bottom: 1.75rem;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--paper);
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9rem;
+}
+
+.data-table caption {
+  caption-side: bottom;
+  text-align: left;
+  padding: 0.55rem 0.9rem;
+  color: var(--muted);
+  font-size: 0.8rem;
+}
+
+.data-table th,
+.data-table td {
+  text-align: left;
+  padding: 0.55rem 0.9rem;
+  border-bottom: 1px solid var(--line);
+  vertical-align: top;
+}
+
+.data-table th {
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--muted);
+  background: var(--bg);
+}
+
+.data-table tr:last-child td {
+  border-bottom: 0;
+}
+
+.data-table .num {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.foot {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-top: 2rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--line);
+  color: var(--muted);
+  font-size: 0.88rem;
+}
+
 .foot-brand {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  text-decoration: none;
-  color: inherit;
-  font-weight: 400;
-}
-
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  text-decoration: none;
+  color: inherit;
+  font-weight: 600;
+}
+
 .foot a {
   color: var(--accent-mid);
 }
 
-.foot-brand img { display: block; width: 128px; height: auto; }
-
-.leaderboard-hero { align-items: center; min-height: 420px; margin-bottom: 4rem; }
-.leaderboard-hero h1 { font-size: clamp(3rem, 7vw, 5rem); }
-.leaderboard-artwork { position: relative; align-self: stretch; min-height: 420px; display: flex; align-items: center; border-left: 1px solid rgba(255,255,255,.12); }
-.leaderboard-artwork::before { content: ""; position: absolute; inset: 0; opacity: .1; background-image: linear-gradient(90deg, transparent 49%, #fff 50%), linear-gradient(#fff 49%, transparent 50%); background-size: 28px 28px; pointer-events: none; }
-.status-note { align-self: center; display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; align-items: center; width: auto; margin: 0 clamp(2rem, 4vw, 4rem); padding: 1.25rem 0; border-top: 1px solid rgba(255,255,255,.3); border-bottom: 1px solid rgba(255,255,255,.3); }
-.status-dot { width: .65rem; height: .65rem; border-radius: 50%; background: #86d0ae; grid-row: 1 / 3; }
-.status-note strong { font-size: .95rem; font-weight: 400; }
-.status-note small { color: rgba(255,255,255,.7); font-size: .85rem; }
-.protocol-grid { list-style: none; padding: 0; margin: 2rem auto 3rem; max-width: 940px; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); }
-.protocol-grid li { padding: 1.25rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
-.protocol-grid li:last-child { border-right: 0; }
-.protocol-grid span { font-family: var(--mono); font-size: .7rem; color: var(--accent); }
-.protocol-grid strong { display: block; margin-top: 1.5rem; font-family: var(--display); font-size: 1.25rem; }
-.protocol-grid p { margin: .4rem 0 0; color: var(--muted); font-size: .9rem; line-height: 1.45; }
-.pending-table { max-width: 940px; margin: 0 auto 4rem; border: 1px solid var(--line); background: var(--paper); }
-.pending-table > div { display: grid; grid-template-columns: 1.5fr .7fr 1fr; padding: .7rem 1rem; border-bottom: 1px solid var(--line); color: var(--muted); font-family: var(--mono); font-size: .7rem; }
-.pending-table p { margin: 0; padding: 3rem 1rem .35rem; font-family: var(--display); font-size: 1.6rem; }
-.pending-table > a { display: inline-block; margin: 0 1rem 2.5rem; color: var(--accent-mid); font-size: .88rem; }
-
-.explorer-panel {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-}
-
-.explorer-panel.active {
-  display: flex;
-  flex: 1;
-  min-height: 0;
-}
-
+.explorer-panel {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+}
+
+.explorer-panel.active {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
 .explorer {
   display: grid;
-  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr) minmax(180px, 220px);
+  grid-template-columns: minmax(240px, 300px) 1fr;
   width: 100%;
   min-height: 0;
   flex: 1;
   height: 100%;
-  background: var(--paper);
 }
 
 .sidebar {
-  background: #f7f8f7;
+  background: var(--paper);
   border-right: 1px solid var(--line);
   display: flex;
   flex-direction: column;
@@ -586,562 +445,416 @@ body.is-explorer .app {
 }
 
 .sidebar-head {
-  padding: 1.15rem 1rem 0.85rem;
+  padding: 0.7rem 0.85rem 0.5rem;
+  border-bottom: 1px solid var(--line);
 }
-
+
 .sidebar-head h2 {
-  margin: 0;
+  margin: 0;
   font-family: var(--display);
-  font-size: 1.45rem;
-  color: var(--accent-deep);
-  font-weight: 400;
+  font-size: 1rem;
 }
-
-.progress {
-  margin: 0.15rem 0 0;
+
+.progress {
+  margin: 0.2rem 0 0;
   color: var(--muted);
-  font-size: 0.72rem;
-  letter-spacing: .02em;
+  font-size: 0.75rem;
 }
 
 .filters {
-  padding: 0.35rem 1rem 1rem;
+  padding: 0.55rem 0.85rem;
   display: grid;
-  gap: 0.8rem;
+  gap: 0.45rem;
   border-bottom: 1px solid var(--line);
 }
-
-.filters label,
-.filter-group-label {
-  display: grid;
-  gap: 0.3rem;
-  font-size: 0.64rem;
-  color: var(--muted);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
+
+.filters label,
+.filter-group-label {
+  display: grid;
+  gap: 0.15rem;
+  font-size: 0.68rem;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
 .filters input {
-  font: inherit;
-  color: var(--ink);
-  border: 1px solid var(--line);
-  border-radius: 0;
-  padding: 0.55rem 0.65rem;
+  font: inherit;
+  color: var(--ink);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  padding: 0.35rem 0.45rem;
   background: #fff;
-  min-height: 38px;
 }
-
-.filter-chips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.3rem;
+
+.filter-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.22rem;
 }
-
+
 .filter-chips button {
-  font: inherit;
-  font-size: 0.68rem;
-  color: var(--ink);
-  background: #fff;
-  border: 1px solid var(--line);
-  border-radius: 0;
-  padding: 0.22rem 0.46rem;
-  cursor: pointer;
-}
-
+  font: inherit;
+  font-size: 0.7rem;
+  color: var(--ink);
+  background: #fff;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  padding: 0.15rem 0.42rem;
+  cursor: pointer;
+}
+
 .filter-chips button.is-on {
-  background: var(--artwork-green);
-  border-color: var(--artwork-green);
-  color: #fff;
+  background: var(--accent-soft);
+  border-color: var(--accent);
+  color: var(--accent-deep);
+  font-weight: 600;
+}
+
+.filter-chips .chip-count {
+  color: var(--muted);
   font-weight: 400;
 }
 
-.filter-chips button.is-on .chip-count { color: rgba(255,255,255,.68); }
-
-.filter-chips .chip-count {
-  color: var(--muted);
-  font-weight: 400;
-}
-
 .queue {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  overflow: auto;
-  flex: 1;
-}
-
+  list-style: none;
+  margin: 0;
+  padding: 0.2rem 0;
+  overflow: auto;
+  flex: 1;
+}
+
 .queue li button {
-  width: 100%;
-  text-align: left;
-  border: 0;
-  background: transparent;
-  padding: 0.78rem 1rem;
-  cursor: pointer;
+  width: 100%;
+  text-align: left;
+  border: 0;
+  background: transparent;
+  padding: 0.42rem 0.85rem;
+  cursor: pointer;
   border-left: 3px solid transparent;
-  border-bottom: 1px solid var(--line);
-  font: inherit;
-  color: inherit;
-}
-
+  font: inherit;
+  color: inherit;
+}
+
 .queue li button:hover {
-  background: #fff;
+  background: var(--bg);
 }
 
 .queue li button.active {
-  background: #fff;
-  border-left-color: var(--accent-deep);
+  background: var(--accent-soft);
+  border-left-color: var(--accent);
 }
-
-.queue .qid {
-  display: block;
-  font-family: var(--mono);
-  font-size: 0.66rem;
-  color: var(--accent-deep);
-  letter-spacing: .02em;
-}
-
-.queue .qtext {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  font-size: 0.78rem;
-  margin-top: 0.16rem;
-  line-height: 1.4;
-}
-
-.queue .qmeta {
-  margin-top: 0.18rem;
-}
-
+
+.queue .qid {
+  display: block;
+  font-family: var(--mono);
+  font-size: 0.7rem;
+  color: var(--muted);
+}
+
+.queue .qtext {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  font-size: 0.8rem;
+  margin-top: 0.08rem;
+  line-height: 1.3;
+}
+
+.queue .qmeta {
+  margin-top: 0.18rem;
+}
+
 .pill {
-  display: inline-block;
-  font-size: 0.64rem;
-  padding: 0.08rem 0.36rem;
-  border-radius: 0;
-  background: #e8eee9;
-  color: var(--muted);
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-}
-
-.pill.BFSI-JUR {
-  background: #dce8e1;
-  color: var(--jur);
-}
-.pill.BFSI-NUM {
-  background: #e2e6f2;
-  color: var(--num);
-}
-.pill.BFSI-TMP {
-  background: #f6e6d4;
-  color: var(--tmp);
-}
-.pill.BFSI-ADV {
-  background: #f3ddd6;
-  color: var(--adv);
-}
-.pill.BFSI-GRD {
-  background: #e4e6f4;
-  color: var(--grd);
-}
-
+  display: inline-block;
+  font-size: 0.64rem;
+  padding: 0.08rem 0.36rem;
+  border-radius: 999px;
+  background: #e8eee9;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.pill.BFSI-JUR {
+  background: #dce8e1;
+  color: var(--jur);
+}
+.pill.BFSI-NUM {
+  background: #e2e6f2;
+  color: var(--num);
+}
+.pill.BFSI-TMP {
+  background: #f6e6d4;
+  color: var(--tmp);
+}
+.pill.BFSI-ADV {
+  background: #f3ddd6;
+  color: var(--adv);
+}
+.pill.BFSI-GRD {
+  background: #e4e6f4;
+  color: var(--grd);
+}
+
 .detail-pane {
   overflow: auto;
-  padding: 0 clamp(1.25rem, 4vw, 4.5rem) 4rem;
+  padding: 0.75rem 1rem 1.4rem;
   min-width: 0;
-  scroll-behavior: smooth;
-  scrollbar-gutter: stable;
-}
-
-.empty {
-  color: var(--muted);
-  margin-top: 2rem;
-}
-
-.empty.error {
-  color: var(--adv);
-}
-
+}
+
+.empty {
+  color: var(--muted);
+  margin-top: 2rem;
+}
+
+.empty.error {
+  color: var(--adv);
+}
+
 .detail-head {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  max-width: 820px;
-  margin: 0 auto;
-  padding: 1rem 0 .85rem;
-  position: sticky;
-  top: 0;
-  z-index: 5;
-  background: rgba(255,255,255,.96);
-  border-bottom: 1px solid var(--line);
-  backdrop-filter: blur(8px);
-}
-
-.detail-head .meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.35rem;
-  align-items: center;
-}
-
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin-bottom: 0.65rem;
+}
+
+.detail-head .meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  align-items: center;
+}
+
 .detail-head .id {
-  font-family: var(--mono);
-  font-weight: 400;
-}
-
-.nav-btns {
-  display: flex;
-  gap: 0.4rem;
-  flex-wrap: wrap;
-}
-
+  font-family: var(--mono);
+  font-weight: 600;
+}
+
+.nav-btns {
+  display: flex;
+  gap: 0.4rem;
+  flex-wrap: wrap;
+}
+
 .nav-btns button,
 .drawer-open,
 .drawer-close {
-  font: inherit;
-  border: 1px solid var(--line);
-  background: #fff;
-  border-radius: 0;
-  padding: 0.32rem 0.58rem;
+  font: inherit;
+  border: 1px solid var(--line);
+  background: #fff;
+  border-radius: 6px;
+  padding: 0.25rem 0.55rem;
   cursor: pointer;
-  color: var(--muted);
-  font-size: .75rem;
-}
-
-.nav-btns button:hover {
-  border-color: var(--accent);
-}
-
-.sample-document {
-  max-width: 820px;
-  margin: 0 auto;
 }
 
-.sample-section {
-  padding: clamp(2rem, 5vh, 3.5rem) 0;
-  border-bottom: 1px solid var(--line);
-  scroll-margin-top: 66px;
+.nav-btns button:hover {
+  border-color: var(--accent);
 }
 
-.sample-section:last-child { border-bottom: 0; }
+.grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.65rem;
+  max-width: 56rem;
+}
 
-.sample-section h2 {
-  margin: 0 0 .85rem;
-  font-family: var(--display);
-  font-size: clamp(1.45rem, 2vw, 1.85rem);
-  line-height: 1.15;
-  font-weight: 400;
-  color: var(--accent-deep);
+.card {
+  background: var(--paper);
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  padding: 0.75rem 0.9rem;
 }
 
-.sample-section h2::before {
-  display: block;
-  margin-bottom: .5rem;
-  font-family: var(--mono);
-  font-size: .62rem;
-  letter-spacing: .08em;
+.card.span-2 {
+  grid-column: 1 / -1;
+}
+
+.card h2 {
+  margin: 0 0 0.4rem;
+  font-size: 0.7rem;
   text-transform: uppercase;
+  letter-spacing: 0.05em;
   color: var(--muted);
 }
 
-.sample-question h2::before { content: "01"; }
-.sample-answer h2::before { content: "02"; }
-.sample-sources h2::before { content: "03"; }
-.sample-facts h2::before { content: "04"; }
-.sample-evidence h2::before { content: "05"; }
-
-.sample-section .body {
+.card .body {
   margin: 0;
   white-space: pre-wrap;
-  line-height: 1.62;
-  font-size: 1rem;
-  max-width: 74ch;
-}
-
-.sample-question .body {
-  font-family: var(--display);
-  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
-  line-height: 1.4;
-  color: var(--artwork-green);
-}
-
-.sample-answer .body {
-  padding: 1.25rem 1.4rem;
-  background: rgba(54,63,140,.055);
-  border-left: 3px solid var(--accent-deep);
+  line-height: 1.5;
+  font-size: 0.95rem;
 }
 
-.card-hint {
-  margin: -.35rem 0 1.2rem;
-  color: var(--muted);
-  font-size: .82rem;
-}
-
-.sources,
-.nuggets,
-.evidence {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: grid;
-  gap: 0;
+.sources,
+.nuggets,
+.evidence {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 0.5rem;
 }
 
 .sources li,
 .nugget,
 .ev-item {
-  padding: 1rem 0;
-  background: transparent;
-  border-radius: 0;
-  border: 0;
-  border-bottom: 1px solid var(--line);
+  padding: 0.55rem 0.65rem;
+  background: var(--bg);
+  border-radius: 8px;
+  border: 1px solid var(--line);
 }
 
-.sources li:last-child,
-.nugget:last-child,
-.ev-item:last-child { border-bottom: 0; }
-
 .sources a,
 .ev-meta a {
   color: var(--accent-mid);
-  word-break: break-word;
+  word-break: break-all;
+  font-size: 0.85rem;
+}
+
+.sources .note {
+  display: block;
+  margin-top: 0.15rem;
   font-size: 0.88rem;
-  text-underline-offset: 3px;
-}
-
-.sources a::before { content: "↗"; display: inline-block; margin-right: .55rem; color: var(--accent); text-decoration: none; }
-
-.sources .note {
-  display: block;
-  margin: .32rem 0 0 1.35rem;
-  font-size: 0.86rem;
-}
-
-.sources .date {
-  display: block;
-  margin: .28rem 0 0 1.35rem;
-  font-family: var(--mono);
-  font-size: 0.72rem;
-  color: var(--muted);
-}
-
+}
+
+.sources .date {
+  display: block;
+  margin-top: 0.2rem;
+  font-family: var(--mono);
+  font-size: 0.72rem;
+  color: var(--muted);
+}
+
 .nugget-head {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.3rem;
-  align-items: center;
-  margin-bottom: 0.45rem;
-}
-
-.nugget-id {
-  font-family: var(--mono);
-  font-size: 0.75rem;
-  color: var(--muted);
-}
-
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+  align-items: center;
+  margin-bottom: 0.3rem;
+}
+
+.nugget-id {
+  font-family: var(--mono);
+  font-size: 0.75rem;
+  color: var(--muted);
+}
+
 .vital {
-  font-size: 0.64rem;
-  font-weight: 400;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  background: var(--accent-soft);
-  color: var(--accent-deep);
-  padding: 0.05rem 0.35rem;
-  border-radius: 0;
-}
-
+  font-size: 0.64rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  background: var(--accent-soft);
+  color: var(--accent-deep);
+  padding: 0.05rem 0.35rem;
+  border-radius: 999px;
+}
+
 .nugget-text {
-  margin: 0;
-  font-size: 0.94rem;
-  line-height: 1.52;
-}
-
-.nugget-quote {
-  margin: .8rem 0 0;
-  font-size: 0.82rem;
-  color: var(--muted);
-  border-left: 2px solid var(--accent);
-  padding-left: .85rem;
-  white-space: pre-wrap;
-}
-
-.ev-title {
-  font-size: 0.82rem;
-  font-weight: 400;
-  margin-bottom: 0.3rem;
-  word-break: break-word;
-  font-family: var(--mono);
-}
-
-.ev-title a {
-  color: var(--accent-mid);
-}
-
-.ev-quote {
-  margin: .8rem 0 .2rem;
-  font-family: var(--display);
-  font-size: 1rem;
-  line-height: 1.58;
-  color: var(--artwork-green);
-  border-left: 2px solid var(--accent);
-  padding-left: 1rem;
+  margin: 0;
+  font-size: 0.9rem;
+  line-height: 1.45;
+}
+
+.nugget-quote {
+  margin: 0.4rem 0 0;
+  font-size: 0.82rem;
+  color: var(--muted);
+  border-left: 3px solid var(--accent);
+  padding-left: 0.5rem;
   white-space: pre-wrap;
 }
-
-.ev-ctx-wrap {
-  margin-top: 0.4rem;
-  font-size: 0.82rem;
-  color: var(--muted);
-}
-
-.ev-ctx-wrap summary {
-  cursor: pointer;
-  font-weight: 400;
-}
-
-.ev-ctx {
-  margin-top: 0.3rem;
-  white-space: pre-wrap;
-}
-
-.ev-meta {
-  margin-top: 0.35rem;
-  font-size: 0.75rem;
-  color: var(--muted);
+
+.ev-title {
+  font-size: 0.82rem;
+  font-weight: 600;
+  margin-bottom: 0.3rem;
+  word-break: break-all;
+  font-family: var(--mono);
 }
 
-.sample-outline {
-  padding: 2.35rem 1.35rem;
-  border-left: 1px solid var(--line);
-  background: #fcfcfc;
-  min-width: 0;
+.ev-title a {
+  color: var(--accent-mid);
 }
 
-.outline-label {
-  margin: 0 0 .85rem;
-  color: var(--muted);
-  font-size: .64rem;
-  letter-spacing: .08em;
-  text-transform: uppercase;
+.ev-quote {
+  font-size: 0.9rem;
+  line-height: 1.45;
+  border-left: 3px solid var(--accent);
+  padding-left: 0.55rem;
+  white-space: pre-wrap;
 }
 
-.outline-nav {
-  position: relative;
-  display: grid;
-  border-left: 1px solid var(--line);
+.ev-ctx-wrap {
+  margin-top: 0.4rem;
+  font-size: 0.82rem;
+  color: var(--muted);
 }
 
-.outline-nav button {
-  width: 100%;
-  border: 0;
-  border-left: 3px solid transparent;
-  margin-left: -2px;
-  padding: .5rem 0 .5rem .85rem;
-  text-align: left;
-  background: transparent;
-  color: #8a8a91;
-  font: inherit;
-  font-size: .78rem;
-  line-height: 1.35;
+.ev-ctx-wrap summary {
   cursor: pointer;
+  font-weight: 600;
 }
 
-.outline-nav button:hover { color: var(--accent-deep); }
-.outline-nav button:focus { outline: none; }
-.outline-nav button:focus-visible { outline: 1px solid var(--accent-deep); outline-offset: 2px; }
+.ev-ctx {
+  margin-top: 0.3rem;
+  white-space: pre-wrap;
+}
 
-.outline-nav button.active {
-  border-left-color: var(--artwork-green);
-  color: var(--artwork-green);
-  font-weight: 400;
+.ev-meta {
+  margin-top: 0.35rem;
+  font-size: 0.75rem;
+  color: var(--muted);
 }
-
+
 .drawer-open,
 .drawer-close {
   display: none;
 }
 
-@media (max-width: 1120px) {
-  .explorer { grid-template-columns: minmax(260px, 300px) minmax(0, 1fr); }
-  .sample-outline { display: none; }
-}
-
 @media (max-width: 900px) {
-  .hero { grid-template-columns: 1fr; min-height: auto; }
-  .overview-note-art { min-height: 520px; background-position: center 42%; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
-  .leaderboard-artwork { min-height: 320px; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
-
-  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-  .cat-card,
-  .cat-card:nth-child(n + 4) { grid-column: span 1; }
-  .cat-card:last-child { grid-column: 1 / -1; }
-
-  .card.span-2 {
-    grid-column: 1;
-  }
-
+  .cat-grid,
+  .grid {
+    grid-template-columns: 1fr;
+  }
+
+  .card.span-2 {
+    grid-column: 1;
+  }
+
   .explorer {
     grid-template-columns: 1fr;
   }
 
-  .detail-pane { padding-inline: clamp(1rem, 5vw, 2rem); }
-
-  .sidebar {
-    position: fixed;
-    inset: 0 auto 0 0;
-    width: min(88vw, 320px);
-    z-index: 30;
-    transform: translateX(-105%);
-    transition: transform 0.2s ease;
-    box-shadow: 8px 0 24px rgba(19, 38, 27, 0.12);
-  }
-
-  body.drawer-open .sidebar {
-    transform: none;
-  }
-
-  .drawer-open,
-  .drawer-close {
-    display: inline-flex;
-  }
-
-  .drawer-close {
-    margin-top: 0.45rem;
-  }
-}
-
-@media (max-width: 640px) {
-  .top { justify-content: center; padding-bottom: .45rem; }
-  .brand-lockup { margin-right: auto; }
-  .mode-nav { order: 3; width: 100%; justify-content: center; border-top: 1px solid var(--line); padding-top: .4rem; }
-  .hero { padding: 0; }
-  .hero-copy { padding: 2rem 1.25rem; }
-  .hero h1 { font-size: clamp(2.55rem, 13vw, 3.5rem); }
-  .hero-artwork { display: none; }
-  .overview-note-art { display: block; min-height: 420px; }
-  .leaderboard-artwork { min-height: 280px; }
-  .cat-grid { grid-template-columns: 1fr; }
-  .cat-card,
-  .cat-card:nth-child(n + 4),
-  .cat-card:last-child { grid-column: span 1; min-height: 240px; }
-  .trust-strip { grid-template-columns: 1fr; margin-bottom: 3rem; }
-  .trust-strip span { border-right: 0; border-bottom: 1px solid var(--line); }
-  .trust-strip span:last-child { border-bottom: 0; }
-  .status-note { margin: 0 1.25rem; }
-  .detail-pane { padding: 0 1rem 3rem; }
-  .detail-head { padding-block: .7rem; }
-  .detail-head .meta { width: 100%; }
-  .nav-btns { width: 100%; gap: .3rem; }
-  .nav-btns button { flex: 1; justify-content: center; }
-  .sample-section { padding: 2.2rem 0; scroll-margin-top: 104px; }
-  .sample-answer .body { padding: 1rem 1.05rem; }
-  .protocol-grid { grid-template-columns: 1fr; }
-  .protocol-grid li { border-right: 0; }
+  .sidebar {
+    position: fixed;
+    inset: 0 auto 0 0;
+    width: min(88vw, 320px);
+    z-index: 30;
+    transform: translateX(-105%);
+    transition: transform 0.2s ease;
+    box-shadow: 8px 0 24px rgba(19, 38, 27, 0.12);
+  }
+
+  body.drawer-open .sidebar {
+    transform: none;
+  }
+
+  .drawer-open,
+  .drawer-close {
+    display: inline-flex;
+  }
+
+  .drawer-close {
+    margin-top: 0.45rem;
+  }
+}
 
+@media (max-width: 640px) {
   .top-links {
-    display: none;
-  }
-}
+    display: none;
+  }
+}