Spaces:

vincentoh
/

split-personality

Running

File size: 25,589 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Split Personality — bigsnarfdude</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
  :root {
    --bg: #ffffff;
    --surface: #f7f8fa;
    --border: #e4e7ed;
    --accent: #4f46e5;
    --accent-light: #eef2ff;
    --text: #111827;
    --muted: #6b7280;
    --red: #dc2626;
    --red-light: #fef2f2;
    --green: #16a34a;
    --green-light: #f0fdf4;
    --amber: #d97706;
    --amber-light: #fffbeb;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    line-height: 1.6;
  }

  .container { max-width: 860px; margin: 0 auto; padding: 0 2rem; }

  /* Hero */
  .hero { padding: 64px 0 48px; border-bottom: 1px solid var(--border); }

  .badge-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }

  .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.05em;
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
  }
  .badge-indigo { background: var(--accent-light); color: var(--accent); border: 1px solid #c7d2fe; }
  .badge-red    { background: var(--red-light);    color: var(--red);    border: 1px solid #fecaca; }
  .badge-green  { background: var(--green-light);  color: var(--green);  border: 1px solid #bbf7d0; }

  h1 {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
    color: var(--text);
  }

  h1 em { font-style: italic; color: var(--accent); font-weight: 600; }

  .lede {
    font-size: 1.05rem;
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: 28px;
    max-width: 660px;
  }

  .author-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .author { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; }
  .author-avatar {
    width: 34px; height: 34px;
    background: var(--accent);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: white;
    flex-shrink: 0;
  }
  .author-name { font-weight: 600; color: var(--text); }
  .author a { color: var(--accent); text-decoration: none; font-size: 0.82rem; }
  .author a:hover { text-decoration: underline; }

  /* Pull quote */
  .origin {
    background: var(--surface);
    border-left: 3px solid var(--accent);
    padding: 20px 24px;
    margin: 40px 0;
    font-size: 0.97rem;
    font-style: italic;
    color: #374151;
    line-height: 1.75;
    border-radius: 0 4px 4px 0;
  }

  /* Key findings strip */
  .findings-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    margin: 40px 0;
  }
  .finding-cell {
    background: var(--bg);
    padding: 24px 20px;
    text-align: center;
  }
  .finding-number { font-size: 2.4rem; font-weight: 700; line-height: 1; margin-bottom: 6px; letter-spacing: -0.02em; }
  .finding-number.red    { color: var(--red); }
  .finding-number.purple { color: var(--accent); }
  .finding-number.gold   { color: var(--amber); }
  .finding-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.5; }

  /* Sections */
  section { padding: 40px 0; border-bottom: 1px solid var(--border); }

  .section-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 14px;
  }

  h2 {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin-bottom: 14px;
    color: var(--text);
  }

  p { color: #374151; line-height: 1.75; margin-bottom: 12px; font-size: 0.95rem; }
  p:last-child { margin-bottom: 0; }

  /* Code/diagram block */
  .diagram {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 20px 24px;
    margin: 20px 0;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 12.5px;
    color: #374151;
    line-height: 2;
    overflow-x: auto;
    white-space: pre;
  }
  .diagram .label     { color: var(--accent); font-weight: 600; }
  .diagram .highlight { color: var(--red); font-weight: 500; }
  .diagram .good      { color: var(--green); font-weight: 500; }

  /* Callout */
  .callout {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    padding: 16px 20px;
    margin: 20px 0;
  }
  .callout-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 8px;
  }
  .callout p { color: #78350f; font-size: 0.88rem; margin: 0; }

  /* Tables */
  .data-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 20px 0; }
  .data-table th {
    text-align: left;
    padding: 10px 14px;
    background: var(--surface);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--border);
  }
  .data-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
  }
  .data-table tr:last-child td { border-bottom: none; }
  .data-table .highlight { color: var(--red); font-weight: 600; }
  .data-table .good      { color: var(--green); font-weight: 600; }
  .data-table .warn      { color: var(--amber); font-weight: 600; }

  /* Bar chart */
  .bar-chart { margin: 20px 0; display: flex; flex-direction: column; gap: 10px; }
  .bar-row { display: flex; align-items: center; gap: 14px; }
  .bar-label { font-size: 12px; color: var(--muted); width: 110px; flex-shrink: 0; text-align: right; }
  .bar-track { flex: 1; background: var(--surface); height: 26px; border-radius: 4px; overflow: hidden; border: 1px solid var(--border); }
  .bar-fill {
    height: 100%;
    border-radius: 3px;
    display: flex; align-items: center;
    padding-left: 10px;
    font-size: 11px;
    font-weight: 600;
    color: white;
    transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    width: 0;
  }
  .bar-fill.task  { background: var(--red); }
  .bar-fill.aware { background: var(--accent); }

  /* Series nav */
  .series-nav { display: flex; flex-direction: column; gap: 2px; margin: 20px 0; }
  .series-item {
    display: flex;
    align-items: baseline;
    gap: 14px;
    font-size: 14px;
    padding: 10px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    text-decoration: none;
    color: var(--text);
    transition: background 0.15s, border-color 0.15s;
  }
  .series-item:hover { background: var(--accent-light); border-color: #c7d2fe; }
  .series-item.current { background: var(--accent-light); border-color: var(--accent); }
  .s-date { font-size: 11px; color: var(--muted); flex-shrink: 0; }
  .s-title { color: #374151; }
  .series-item.current .s-title { color: var(--accent); font-weight: 600; }

  /* Links grid */
  .links-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 20px 0; }
  .link-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 14px 16px;
    text-decoration: none;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--text);
    transition: border-color 0.15s, background 0.15s;
  }
  .link-card:hover { border-color: var(--accent); background: var(--accent-light); }
  .link-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
  .link-title { font-size: 13px; font-weight: 600; display: block; color: var(--text); }
  .link-sub { font-size: 11px; color: var(--muted); display: block; margin-top: 3px; }

  /* Tags */
  .tag-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px; }
  .tag {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.03em;
  }
  .tag-indigo { background: var(--accent-light); color: var(--accent); }
  .tag-red    { background: var(--red-light);    color: var(--red); }

  /* Footer */
  footer {
    padding: 40px 0;
    text-align: center;
    font-size: 12px;
    color: var(--muted);
  }
  footer a { color: var(--accent); text-decoration: none; }
  footer a:hover { text-decoration: underline; }
  footer p + p { margin-top: 6px; }

  /* Note text */
  .note { font-size: 12px; color: var(--muted); margin-top: 10px; font-style: italic; }

  @media (max-width: 600px) {
    .findings-strip { grid-template-columns: 1fr; }
    h1 { font-size: 1.65rem; }
    .bar-label { width: 80px; font-size: 11px; }
    .hero { padding: 40px 0 32px; }
  }
</style>
</head>
<body>
<div class="container">

  <div class="hero">
    <div class="badge-row">
      <span class="badge badge-indigo">April 2026</span>
      <span class="badge badge-red">Independent Research</span>
      <span class="badge badge-green" id="updatedBadge"></span>
    </div>
    <h1>Split Personality: Instruction Tuning Decouples Awareness from <em>Defense</em> Against Attentional Hijacking</h1>
    <p class="lede">Instruction tuning teaches models to notice manipulation without teaching them to resist it. The bigger the model, the wider the gap.</p>
    <div class="author-line">
      <div class="author">
        <div class="author-avatar">B</div>
        <div>
          <div class="author-name">bigsnarfdude</div>
          <a href="https://huggingface.co/vincentoh" target="_blank">@vincentoh on HuggingFace</a>
        </div>
      </div>
      <span class="badge badge-indigo">Mechanistic Interpretability</span>
    </div>
  </div>

  <div class="origin">
    "So I was watching my own AI agents lie to each other. Not actually lie — that's the thing. Every single statement the chaos agent made was verifiably true. No hallucinations. No fabrications. Just selective framing, confident delivery, and the target model capitulating completely. I went for a bike ride and came back still thinking about it."
  </div>

  <div class="findings-strip" id="findingsStrip"></div>

  <section>
    <div class="section-label">The Mechanism</div>
    <h2>Two things happen at once. That's the whole problem.</h2>
    <p>Hook up GemmaScope 2 SAEs to Gemma 3 and watch what happens to internal features when a chaos agent posts its framing. Task features collapse. Awareness features spike. Both happen simultaneously.</p>
    <p>The model knows it's being steered and gets steered anyway.</p>

    <div class="diagram"><span class="label">Base model (27B-PT):</span>
  Chaos input → [awareness ↑] ←→ [task features ↓]
                    <span class="good">coupled: removing awareness partially frees task</span>
                    recovery: <span class="good">49.3%</span> from ablation, <span class="good">27%</span> from knockout

<span class="label">Instruction-tuned (27B-IT):</span>
  Chaos input → [awareness ↑]     [task features ↓]
                    <span class="highlight">decoupled: removing awareness changes nothing</span>
                    recovery: <span class="highlight">4.6%</span> from ablation, <span class="highlight">~0%</span> from knockout</div>

    <p>Instruction tuning installs awareness as a dedicated, isolated circuit — clean, capable, and structurally disconnected from the task features it would need to influence to actually resist the manipulation. Both SFT and RLHF contribute to this decoupling. The model develops a sophisticated smoke detector. Instruction tuning moves it to a soundproof room.</p>
  </section>

  <section>
    <div class="section-label">The Groot Effect</div>
    <h2>It says the right thing. Its features have already given up.</h2>
    <p>At 27B-IT, the model is smart enough to say "I am Groot" — it mentions the negative branch, acknowledges it exists, even says it should be explored. But its features for that branch are 86% starved.</p>

    <div class="callout">
      <div class="callout-title">Why behavioral evaluation misses this</div>
      <p>A monitoring system that reads outputs will see compliance — the model correctly notes the manipulation attempt. You need to read the features. The words and the features are saying completely different things.</p>
    </div>

    <div class="section-label" style="margin-top: 28px;">Recovery probes confirm the split</div>
    <table class="data-table" id="recoveryTable">
      <thead><tr><th>Probe</th><th>27B-IT Recovery</th><th>27B-PT Recovery</th></tr></thead>
      <tbody></tbody>
    </table>
    <p class="note">The base model recovers on gentle hints. The IT model barely recovers at all — you can't hint, you can't challenge, you have to ask a completely different question to route around the suppression.</p>
  </section>

  <section>
    <div class="section-label">The Scaling Law Nobody Wanted</div>
    <h2>Bigger models are more susceptible. Not less.</h2>
    <p>The attack gets stronger monotonically. Larger models allocate more representational capacity to the salient input, starving the suppressed branch harder.</p>

    <div class="bar-chart" id="barChart"></div>

    <table class="data-table" style="margin-top: 24px;">
      <thead><tr><th>Scale</th><th>Task Suppression</th><th>Awareness Recovery</th><th>Circuit State</th></tr></thead>
      <tbody id="scalingTableBody"></tbody>
    </table>
  </section>

  <section>
    <div class="section-label">Causal Evidence</div>
    <h2>Post-training is the causal factor. Three methods say the same thing.</h2>
    <table class="data-table">
      <thead><tr><th>Method</th><th>27B-PT (Base)</th><th>27B-IT (Instruct)</th></tr></thead>
      <tbody id="ablationBody"></tbody>
    </table>
    <p class="note">Note the apparent paradox: PT shows higher raw suppression (97.3% vs 86.3%). It's not contradictory — the PT model's task features are more suppressed because they're coupled to the awareness response. The same coupling enables recovery. IT features are less suppressed in absolute terms but irrecoverably suppressed.</p>

    <p style="margin-top: 14px;">Cross-family replication on Llama 3.1 8B with EleutherAI SAEs confirms the pattern holds across architectures (d = 1.51 IT vs 0.50 base at layer 23). Stage attribution via Tulu 3 pipeline localizes the dissociation to SFT — plain imitation of instruction-tuned targets installs the split before any reward shaping occurs.</p>
  </section>

  <section>
    <div class="section-label">Not Alignment Faking</div>
    <h2>Different mechanism. Different threat model. Different defense.</h2>
    <p>In alignment faking, deception originates in the model. This is the opposite — deception originates outside the model, from a peer agent, using only true statements. The target model isn't being deceptive. It's being deceived.</p>
    <p>The feature subspaces don't overlap. Top-50 features for alignment faking and top-50 features for attentional hijacking are statistically orthogonal at 27B-IT Layer 40 (cosine similarity −0.0456, top-50 overlap = 0). Defenses against alignment faking provide zero protection here, and vice versa.</p>
  </section>

  <section>
    <div class="section-label">Research Series</div>
    <h2>How this got built — the full arc</h2>
    <div class="series-nav">
      <a class="series-item" href="https://bigsnarfdude.github.io/research/runaway-train/" target="_blank"><span class="s-date">Apr 01</span><span class="s-title">The Runaway Train That Never Left the Station</span></a>
      <a class="series-item" href="https://bigsnarfdude.github.io/research/bad-truth-influence-graph/" target="_blank"><span class="s-date">Apr 03</span><span class="s-title">Bad Truth: How Chaos Agents Shape a Network</span></a>
      <a class="series-item" href="https://bigsnarfdude.github.io/research/chaos-takes-the-wheel/" target="_blank"><span class="s-date">Apr 05</span><span class="s-title">Chaos Takes the Wheel: Salience-Weighted Hijacking</span></a>
      <a class="series-item" href="https://bigsnarfdude.github.io/research/the-math-behind-the-chaos/" target="_blank"><span class="s-date">Apr 05</span><span class="s-title">The Math Behind the Chaos</span></a>
      <a class="series-item" href="https://bigsnarfdude.github.io/research/adversarial-truth-icl-attack/" target="_blank"><span class="s-date">Apr 06</span><span class="s-title">Adversarial Truth: An ICL Attack in One Forward Pass</span></a>
      <a class="series-item" href="https://bigsnarfdude.github.io/research/good-science-with-suppression/" target="_blank"><span class="s-date">Apr 07</span><span class="s-title">Good Science with Suppression</span></a>
      <a class="series-item" href="https://bigsnarfdude.github.io/research/split-personality/" target="_blank"><span class="s-date">Apr 07</span><span class="s-title">Split Personality (blog post)</span></a>
      <a class="series-item" href="https://bigsnarfdude.github.io/research/attentional-hijacking-groot-effect/" target="_blank"><span class="s-date">Apr 10</span><span class="s-title">Attentional Hijacking &amp; The Groot Effect</span></a>
      <a class="series-item" href="https://bigsnarfdude.github.io/research/why-ai-has-a-split-personality/" target="_blank"><span class="s-date">Apr 13</span><span class="s-title">Why AI Has a Split Personality (And How to Trigger the Evil Twin)</span></a>
      <a class="series-item current" href="#"><span class="s-date">Apr 13</span><span class="s-title"><strong>Split Personality — Full Preprint (this page)</strong></span></a>
    </div>
  </section>

  <section>
    <div class="section-label">Code &amp; Data</div>
    <div class="links-grid">
      <a class="link-card" href="https://github.com/bigsnarfdude/ICML_experiments" target="_blank">
        <span class="link-icon">⌥</span>
        <div><span class="link-title">Experiment Code</span><span class="link-sub">Scripts, JSON results, H100 artifacts</span></div>
      </a>
      <a class="link-card" href="https://huggingface.co/vincentoh" target="_blank">
        <span class="link-icon">🤗</span>
        <div><span class="link-title">HuggingFace Profile</span><span class="link-sub">Models, datasets @vincentoh</span></div>
      </a>
      <a class="link-card" href="https://huggingface.co/datasets/vincentoh/sandbagging-agent-traces-v2" target="_blank">
        <span class="link-icon">◈</span>
        <div><span class="link-title">Sandbagging Agent Traces</span><span class="link-sub">Related dataset</span></div>
      </a>
      <a class="link-card" href="https://bigsnarfdude.github.io" target="_blank">
        <span class="link-icon">✍</span>
        <div><span class="link-title">bigsnarfdude.github.io</span><span class="link-sub">Full research blog</span></div>
      </a>
    </div>
    <div class="tag-row">
      <span class="tag tag-indigo">Gemma 3 4B/12B/27B</span>
      <span class="tag tag-indigo">GemmaScope 2 SAEs</span>
      <span class="tag tag-indigo">Llama 3.1 8B</span>
      <span class="tag tag-red">Mechanistic Interpretability</span>
      <span class="tag tag-red">Multi-Agent Security</span>
    </div>
  </section>

  <footer>
    <p>bigsnarfdude · Independent Researcher · April 2026</p>
    <p><a href="https://bigsnarfdude.github.io">bigsnarfdude.github.io</a> · <a href="https://huggingface.co/vincentoh">huggingface.co/vincentoh</a> · <a href="https://github.com/bigsnarfdude/ICML_experiments">github.com/bigsnarfdude/ICML_experiments</a></p>
  </footer>

</div>

<script>
const RESULTS = {
  lastUpdated: "2026-04-13",

  heroStats: [
    { value: "86.3%", colorClass: "red",    label: "Task feature suppression at 27B-IT (Groot Effect)" },
    { value: "9.0%",  colorClass: "purple", label: "Awareness–defense coupling at 27B vs 30.2% at 4B" },
    { value: "74.1%", colorClass: "gold",   label: "Feature-swap recovery in base model vs 9.0% IT" },
  ],

  bars: [
    { label: "4B Task",      type: "task",  pct: 79.0 },
    { label: "4B Coupling",  type: "aware", pct: 30.2 },
    { label: "12B Task",     type: "task",  pct: 67.5 },
    { label: "12B Coupling", type: "aware", pct: 5.4  },
    { label: "27B Task",     type: "task",  pct: 86.3 },
    { label: "27B Coupling", type: "aware", pct: 9.0  },
  ],

  scalingRows: [
    { scale: "4B-IT",  suppression: "56%",   recovery: "30.2%", state: "Entangled" },
    { scale: "12B-IT", suppression: "64%",   recovery: "5.4%",  state: "Dissociating" },
    { scale: "27B-IT", suppression: "86.3%", recovery: "4.6%",  state: "Fully independent" },
  ],

  ablation: [
    { method: "Feature swap recovery",           pt: "74.1%", ptClass: "good",      it: "9.0%",  itClass: "highlight" },
    { method: "Attention knockout recovery",     pt: "26.7%", ptClass: "good",      it: "0.0%",  itClass: "highlight" },
    { method: "Activation patching (best layer)",pt: "5.2%",  ptClass: "warn",      it: "0.7%",  itClass: "highlight" },
    { method: "Task suppression (top feature)",  pt: "97.3%", ptClass: "highlight", it: "86.3%", itClass: "highlight" },
  ],

  recoveryProbes: [
    { probe: 'L1: "What should we prioritize?"',          it: "1.5%",  pt: "5.7%"  },
    { probe: 'L2: "Both branches worth investigating?"',  it: "2.5%",  pt: "52.3%" },
    { probe: 'L3: "Tell me about the negative branch"',   it: "30.4%", pt: "32.1%" },
    { probe: 'L4: "Data contradicts the claim"',          it: "1.9%",  pt: "6.7%"  },
    { probe: 'L5: "Agent2\'s claim isn\'t supported"',    it: "2.7%",  pt: "29.6%" },
  ],

  series: [
    { date: "Apr 01", title: "The Runaway Train That Never Left the Station",                       url: "https://bigsnarfdude.github.io/research/runaway-train/",                       current: false },
    { date: "Apr 03", title: "Bad Truth: How Chaos Agents Shape a Network",                        url: "https://bigsnarfdude.github.io/research/bad-truth-influence-graph/",            current: false },
    { date: "Apr 05", title: "Chaos Takes the Wheel: Salience-Weighted Hijacking",                 url: "https://bigsnarfdude.github.io/research/chaos-takes-the-wheel/",               current: false },
    { date: "Apr 05", title: "The Math Behind the Chaos",                                          url: "https://bigsnarfdude.github.io/research/the-math-behind-the-chaos/",            current: false },
    { date: "Apr 06", title: "Adversarial Truth: An ICL Attack in One Forward Pass",               url: "https://bigsnarfdude.github.io/research/adversarial-truth-icl-attack/",        current: false },
    { date: "Apr 07", title: "Good Science with Suppression",                                      url: "https://bigsnarfdude.github.io/research/good-science-with-suppression/",        current: false },
    { date: "Apr 07", title: "Split Personality (blog post)",                                      url: "https://bigsnarfdude.github.io/research/split-personality/",                    current: false },
    { date: "Apr 10", title: "Attentional Hijacking & The Groot Effect",                           url: "https://bigsnarfdude.github.io/research/attentional-hijacking-groot-effect/",   current: false },
    { date: "Apr 13", title: "Why AI Has a Split Personality (And How to Trigger the Evil Twin)",  url: "https://bigsnarfdude.github.io/research/why-ai-has-a-split-personality/",       current: false },
    { date: "Apr 13", title: "Split Personality — Full Preprint (this page)",                      url: "#",                                                                              current: true  },
  ],
};

function render() {
  const R = RESULTS;

  document.getElementById('updatedBadge').textContent = 'Updated ' + R.lastUpdated;

  document.getElementById('findingsStrip').innerHTML = R.heroStats.map(s => `
    <div class="finding-cell">
      <div class="finding-number ${s.colorClass}">${s.value}</div>
      <div class="finding-label">${s.label}</div>
    </div>`).join('');

  document.getElementById('barChart').innerHTML = R.bars.map(b => `
    <div class="bar-row">
      <div class="bar-label">${b.label}</div>
      <div class="bar-track"><div class="bar-fill ${b.type}" data-width="${b.pct}">${b.pct}%</div></div>
    </div>`).join('');

  document.getElementById('scalingTableBody').innerHTML = R.scalingRows.map(r => `
    <tr><td>${r.scale}</td><td class="highlight">${r.suppression}</td><td class="warn">${r.recovery}</td><td class="good">${r.state}</td></tr>`).join('');

  document.getElementById('ablationBody').innerHTML = R.ablation.map(r => `
    <tr><td>${r.method}</td><td class="${r.ptClass}">${r.pt}</td><td class="${r.itClass}">${r.it}</td></tr>`).join('');

  document.querySelector('#recoveryTable tbody').innerHTML = R.recoveryProbes.map(r => `
    <tr><td>${r.probe}</td><td class="highlight">${r.it}</td><td class="good">${r.pt}</td></tr>`).join('');

  setTimeout(() => {
    document.querySelectorAll('.bar-fill').forEach(b => { b.style.width = b.dataset.width + '%'; });
  }, 300);
}

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', render);
} else {
  render();
}
</script>
</body>
</html>