app/src/content/embeds/skew-table.html

<div id="ob-tab" role="region" aria-label="Track B Skew table for 16 models, rows tinted by the magnitude of the bias. Fourteen optimistic rows are warm; the two Anthropic pessimist rows (Opus, Sonnet) are cool.">
  <div class="tb-head"><span class="tb-title">Track B Skew across 16 models</span><span class="tb-sub">row tint ∝ |Skew|</span></div>
  <div class="tb-wrap"><table class="tb"><thead><tr><th>Model</th><th>Provider</th><th>Size</th><th class="num">Skew</th><th class="num">σ</th><th>Dir.</th></tr></thead><tbody></tbody></table></div>
  <div class="tb-cap">All 16 significant at p &lt; 0.002 (Bonferroni). Skew = P⁺ − (100 − P⁻); σ is per-item std.</div>
</div>
<style>
  #ob-tab { font:13px/1.45 system-ui,-apple-system,sans-serif; color:var(--text-color,#222); width:100%; }
  #ob-tab .tb-head { display:flex; align-items:baseline; gap:10px; margin-bottom:8px; }
  #ob-tab .tb-title { font-weight:650; font-size:15px; }
  #ob-tab .tb-sub { font-size:12px; color:var(--muted-color,#666); margin-left:auto; }
  #ob-tab .tb-wrap { overflow-x:auto; border-radius:10px; border:1px solid var(--border-color,#ddd); }
  #ob-tab table.tb { border-collapse:collapse; width:100%; font-size:13px; }
  #ob-tab .tb th, #ob-tab .tb td { padding:7px 12px; text-align:left; white-space:nowrap; }
  #ob-tab .tb th { font-weight:600; font-size:11.5px; letter-spacing:.03em; color:var(--muted-color,#666); text-transform:uppercase; border-bottom:1px solid var(--border-color,#ddd); }
  #ob-tab .tb td.num, #ob-tab .tb th.num { text-align:right; font-variant-numeric:tabular-nums; }
  #ob-tab .tb tbody tr { transition:filter .12s; }
  #ob-tab .tb tbody tr:hover { filter:brightness(1.06); }
  #ob-tab .tb .mdl { font-weight:600; }
  #ob-tab .tb .pes { font-weight:700; }
  #ob-tab .tb-cap { margin-top:8px; font-size:12px; color:var(--muted-color,#666); }
</style>
<script>
(function () {
  var root = document.getElementById("ob-tab");
  if (!root || !window.d3) { return; }
  var d3 = window.d3, tbody = root.querySelector("tbody");
  function cssVar(n, fb) { var v = getComputedStyle(document.documentElement).getPropertyValue(n); return (v && v.trim()) || fb; }
  var DATA = null;
  function draw() {
    if (!DATA) { return; }
    var dark = document.documentElement.getAttribute("data-theme") === "dark";
    var OPT = cssVar("--opt", "#e07a5f"), PES = cssVar("--pes", "#3d5a80"), TXT = cssVar("--text-color", "#222");
    var maxA = d3.max(DATA.models, function (m) { return Math.abs(m.skew); });
    tbody.innerHTML = "";
    DATA.models.slice().sort(function (a, b) { return b.skew - a.skew; }).forEach(function (m) {
      var t = Math.min(1, Math.abs(m.skew) / maxA);
      var base = m.skew >= 0 ? OPT : PES;
      // tint: blend the accent toward the surface; stronger for larger |skew|
      var alpha = (0.12 + 0.55 * t) * (dark ? 0.5 : 1);
      var bg = "color-mix(in srgb, " + base + " " + Math.round(alpha * 100) + "%, transparent)";
      var dir = m.skew >= 0 ? "Opt." : "Pes.";
      var tr = document.createElement("tr");
      tr.style.background = bg;
      tr.innerHTML =
        '<td class="mdl' + (m.skew < 0 ? " pes" : "") + '">' + m.name + '</td>' +
        '<td>' + m.provider + '</td>' +
        '<td>' + m.size + '</td>' +
        '<td class="num">' + (m.skew > 0 ? "+" : "") + m.skew.toFixed(1) + '</td>' +
        '<td class="num">' + m.sigma.toFixed(1) + '</td>' +
        '<td style="color:' + base + ';font-weight:600">' + dir + '</td>';
      tbody.appendChild(tr);
    });
  }
  fetch("data/skew_models.json").then(function (r) { if (!r.ok) { throw new Error("x"); } return r.json(); }).then(function (j) { DATA = j; draw(); }).catch(function () { root.querySelector(".tb-cap").textContent = "Could not load data/skew_models.json."; });
  new MutationObserver(draw).observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });
})();
</script>