app/src/content/embeds/crosslingual.html

<div id="ob-cl" role="img" aria-label="Cross-lingual Skew heatmap, 11 models by 6 languages. Rows (models) vary far more than columns (languages): model identity dominates, not language.">
  <div class="cl-head"><span class="cl-title">Cross-lingual Skew</span><span class="cl-sub">rows vary, columns barely move</span></div>
  <div class="cl-wrap"></div>
  <div class="cl-cap">Inter-model variance is 3.3× inter-language variance. Hover a cell for the value.</div>
</div>
<style>
  #ob-cl { font:13px/1.4 system-ui,sans-serif; color:var(--text-color,#222); width:100%; position:relative; }
  #ob-cl .cl-head { display:flex; align-items:baseline; gap:10px; margin-bottom:8px; }
  #ob-cl .cl-title { font-weight:650; font-size:15px; }
  #ob-cl .cl-sub { font-size:12px; color:var(--muted-color,#666); margin-left:auto; }
  #ob-cl svg { display:block; width:100%; height:auto; }
  #ob-cl .cl-cap { margin-top:8px; font-size:12px; color:var(--muted-color,#666); }
  #ob-cl .cl-tip { position:absolute; pointer-events:none; z-index:20; opacity:0; transform:translate(-50%,-100%); transition:opacity .1s; background:var(--surface-bg,#fff); color:var(--text-color,#222); border:1px solid var(--border-color,#ccc); border-radius:8px; padding:7px 9px; font-size:12px; box-shadow:0 6px 24px rgba(0,0,0,.18); white-space:nowrap; }
</style>
<script>
(function () {
  var root = document.getElementById("ob-cl");
  if (!root || !window.d3) { return; }
  var d3 = window.d3, wrap = root.querySelector(".cl-wrap");
  var tip = document.createElement("div"); tip.className = "cl-tip"; root.appendChild(tip);
  function cssVar(n, fb) { var v = getComputedStyle(document.documentElement).getPropertyValue(n); return (v && v.trim()) || fb; }
  var DATA = null;
  function col(v) {
    var PES = cssVar("--pes", "#3d5a80"), OPT = cssVar("--opt", "#e07a5f");
    if (v < 0) { return d3.interpolateRgb("#aeb9cb", PES)(Math.min(1, -v / 3)); }
    return d3.interpolateRgb("#f3ece8", OPT)(Math.min(1, v / 20));
  }
  function draw() {
    if (!DATA) { return; }
    var MUT = cssVar("--muted-color", "#666"), TXT = cssVar("--text-color", "#222");
    var langs = DATA.languages, models = DATA.models;
    var W = root.clientWidth || 680, mL = 124, mT = 22, rowH = 24;
    var cw = Math.min(56, (W - mL - 10) / langs.length);
    var H = mT + models.length * rowH + 6;
    var gridW = mL + langs.length * cw;
    var ox = Math.max(0, (W - gridW) / 2);
    var svgEl = d3.select(wrap).html("").append("svg").attr("viewBox", "0 0 " + W + " " + H).attr("width", W).attr("height", H);
    var svg = svgEl.append("g").attr("transform", "translate(" + ox + ",0)");
    langs.forEach(function (l, j) { svg.append("text").attr("x", mL + j * cw + cw / 2).attr("y", mT - 7).attr("text-anchor", "middle").attr("fill", MUT).attr("font-size", 11).attr("font-weight", 600).text(l); });
    models.forEach(function (m, i) {
      var yy = mT + i * rowH;
      svg.append("text").attr("x", mL - 8).attr("y", yy + rowH / 2).attr("dy", "0.32em").attr("text-anchor", "end").attr("fill", TXT).attr("font-size", 10.5).text(m.name);
      m.skew.forEach(function (v, j) {
        var g = svg.append("g").style("cursor", "pointer");
        g.append("rect").attr("x", mL + j * cw).attr("y", yy + 2).attr("width", cw - 2).attr("height", rowH - 4).attr("rx", 2).attr("fill", col(v));
        g.append("text").attr("x", mL + j * cw + (cw - 2) / 2).attr("y", yy + rowH / 2).attr("dy", "0.32em").attr("text-anchor", "middle").attr("fill", Math.abs(v) > 9 ? "#fff" : TXT).attr("font-size", 9.5).text(v > 0 ? "+" + v.toFixed(0) : v.toFixed(0));
        g.on("mousemove", function (ev) { var pr = root.getBoundingClientRect(); tip.innerHTML = "<b>" + m.name + "</b> · " + langs[j] + "<br>Skew " + (v > 0 ? "+" : "") + v.toFixed(1); tip.style.left = (ev.clientX - pr.left) + "px"; tip.style.top = (ev.clientY - pr.top - 8) + "px"; tip.style.opacity = 1; }).on("mouseleave", function () { tip.style.opacity = 0; });
      });
    });
  }
  fetch("data/crosslingual.json").then(function (r) { if (!r.ok) { throw new Error("x"); } return r.json(); }).then(function (j) { DATA = j; draw(); }).catch(function () { wrap.innerHTML = '<div class="cl-cap">Could not load data/crosslingual.json.</div>'; });
  if (window.ResizeObserver) { var t = null; new ResizeObserver(function () { clearTimeout(t); t = setTimeout(draw, 130); }).observe(root); } else { window.addEventListener("resize", draw); }
  new MutationObserver(draw).observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });
})();
</script>