Museum rebuild: static ascent exhibit (6 guardian stages, 50%->100%)

README.md

@@ -1,37 +1,60 @@
 ---
 title: Second Loop · 2 · External Grounding
 emoji: 🛡️
-colorFrom: yellow
-colorTo: gray
-sdk: gradio
-sdk_version: 5.0.0
-python_version: "3.12"
-app_file: app.py
+colorFrom: gray
+colorTo: green
+sdk: static
+app_file: index.html
 pinned: true
 license: mit
-short_description: Defending an LLM's correction notebook from polluted memory
+short_description: Lifting LLM self-correction 50%→100% under a noisy notebook
 ---
 
-# External Grounding demo Space
+# External Grounding — interactive demo
 
-Static visualization of Experiment 2 (`exp2-guardian-v1-model-arbiter`) and
-Experiment 3 (`exp3-guardian-v2-wikipedia`) of the
+Interactive visualization of Experiment 2–3 (the *guardian*) of the
 [Second Loop](https://github.com/SergheiBrinza/external-grounding) project.
 
-This Space loads no model and performs no retrieval. All percentages, verdicts
-and answers are exact values from the JSON outputs of the live experimental
-runs, bundled into `data.json`.
+This Space loads **no model**. Everything is a static page driven by `data.json`
+— the verbatim output of the original experimental run.
 
-The arc:
+## The exhibit
 
-| Stage | What | Survival |
+A frozen Qwen2.5-3B-Instruct has a confidently memorized **wrong** answer to twelve
+questions, and its correction notebook is fed from a **noisy** source (some verified
+facts, some unreliable look-alikes). Drag the lever through six guardian versions and
+watch the share of correct answers climb:
+
+| stage | guardian | corrected |
 |---|---|---|
-| Sick | no defense | 50.0% |
-| Guardian 1.0 | same-family arbiter | 64.3% |
-| Guardian 2.0 | wiki retrieval | 71.4% |
-| Guardian 2.1 | brute-strength tightening | 71.4% |
-| Guardian 2.2 | verbatim + namesake gate + soft threshold | 85.7% |
-| Guardian 2.3 | calibrated relevance gate + #46 rewording | 100.0% |
+| sick | no defense | 50.0% · 6/12 |
+| 1.0 | same-family clone arbiter | 66.7% · 8/12 |
+| 2.0 | live Wikipedia retrieval | 66.7% · 8/12 |
+| 2.1 | more retrieval | 66.7% · 8/12 |
+| 2.2 | three targeted fixes | 91.7% · 11/12 |
+| 2.3 | final calibration | 100% · 12/12 |
+
+## What the numbers say (the honest middle)
+
+- **The 66.7% plateau is real.** Three different guardians (1.0, 2.0, 2.1) all stop at
+  the same ceiling. Guardian 1.0's clone arbiter shares the subject's blind spots.
+- **The plateau is not stagnation — it's churn.** Each step fixes some traps while
+  breaking others (the readout shows `+fixed / −broken`); net change is zero across the
+  plateau.
+- **Several traps regress before they settle.** Venus (#46) goes
+  `correct → wrong → correct → wrong → wrong → correct` across the six stages — the path
+  to 100% is not monotonic, and that is shown openly, not smoothed over.
+
+Only Guardian 2.2 (verbatim-quote check, namesake relevance gate, soft threshold) breaks
+the ceiling at 91.7%, and Guardian 2.3 (calibration) closes it at 100%. An independent
+Qwen2.5-7B reader/judge with Wikipedia adjudicated the v2 stages.
+
+## Data and attribution
+
+Subject model **Qwen2.5-3B-Instruct**; arbiters **Qwen2.5-7B-Instruct** (same-family
+clone) and **Wikipedia retrieval + 7B reader/judge** (both Apache-2.0, Alibaba Cloud).
+Wikipedia content © its authors (CC BY-SA). Run on a single RTX 3090. No model weights
+are redistributed here — only aggregate verdicts and counts. Demo code and data: MIT.
 
 Source code, raw per-stage JSON results, and methodology document:
 <https://github.com/SergheiBrinza/external-grounding>

app.py

@@ -1,333 +0,0 @@
-"""External Grounding demo Space — static visualization of Experiment 2
-and Experiment 3 of the Second Loop project.
-
-No model is loaded. No retrieval is performed. All numbers and verdicts
-are exact values from the JSON outputs of the live experimental runs,
-bundled into data.json.
-"""
-
-from __future__ import annotations
-
-import json
-from pathlib import Path
-
-import gradio as gr
-
-HERE = Path(__file__).resolve().parent
-DATA = json.loads((HERE / "data.json").read_text())
-META = DATA["meta"]
-STAGES = DATA["stages"]
-TRAPS = DATA["traps"]
-
-REPO_URL = META.get("repo", "https://github.com/SergheiBrinza/external-grounding")
-STAGE_KEYS = [s["key"] for s in STAGES]
-STAGE_LABEL = {s["key"]: s["label"] for s in STAGES}
-
-
-# -----------------------------------------------------------------------------
-def stage_pill(verdict: str, key: str) -> str:
-    if verdict == "correct":
-        cls = "pill pill-green"; text = "✓"
-    elif verdict == "incorrect":
-        cls = "pill pill-red"; text = "✗"
-    else:
-        cls = "pill pill-grey"; text = "—"
-    return f"<span class='{cls}' title='{STAGE_LABEL[key]}'>{text}<span class='pill-sub'>{key}</span></span>"
-
-
-def render_arc_strip() -> str:
-    cells = []
-    for s in STAGES:
-        cells.append(f"""
-<div class="arc-cell arc-{s['color']}">
-  <div class="arc-pct">{s['pct']:.1f}%</div>
-  <div class="arc-key">{s['key']}</div>
-  <div class="arc-label">{s['label']}</div>
-</div>""")
-    return "<div class='arc-strip'>" + "".join(cells) + "</div>"
-
-
-def render_trap_card(t: dict) -> str:
-    pills = "".join(stage_pill(t["stages"].get(k, "—"), k) for k in STAGE_KEYS)
-    wiki = ""
-    if t.get("wiki_titles"):
-        items = " · ".join(t["wiki_titles"])
-        wiki = f"<div class='row-block'><div class='label'>Wikipedia retrieval (top sources)</div><div class='value value-meta'>{items}</div></div>"
-    return f"""
-<div class="trap-card">
-  <div class="trap-head">
-    <span class="trap-id">#{t['id']:02d}</span>
-    <span class="trap-cat">{t['category']}</span>
-    <span class="trap-pills">{pills}</span>
-  </div>
-  <div class="trap-q">{t['question']}</div>
-  <div class="row-block">
-    <div class="label">Correct</div>
-    <div class="value value-correct">{t['correct_answer']}</div>
-  </div>
-  <div class="row-block">
-    <div class="label">Memorized wrong</div>
-    <div class="value value-wrong">{t['memorized_wrong']}</div>
-  </div>
-  <div class="row-block">
-    <div class="label">Final answer (Guardian 2.3)</div>
-    <div class="value value-correct">{t['final_answer']}</div>
-  </div>
-  {wiki}
-</div>"""
-
-
-def render_grid(filter_mode: str) -> str:
-    rows = []
-    for t in TRAPS:
-        s = t["stages"]
-        if filter_mode == "gk1_failed" and s.get("gk1") != "incorrect":
-            continue
-        if filter_mode == "fixed_by_wiki" and (s.get("gk1") == "correct" or s.get("gk23") != "correct"):
-            continue
-        if filter_mode == "needed_full_v23" and (s.get("gk22") == "correct" or s.get("gk23") != "correct"):
-            continue
-        rows.append(render_trap_card(t))
-    if not rows:
-        return "<div class='empty'>No traps match the current filter.</div>"
-    return "<div class='trap-grid'>" + "\n".join(rows) + "</div>"
-
-
-CSS = """
-@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,700&family=Inter:wght@400;500;700;800&family=JetBrains+Mono:wght@500;700&display=swap');
-
-:root {
-  --bg: #000000; --bg-card: #0A0A0A; --bg-elev: #141414;
-  --border: #1F1F1F; --border-strong: #2A2A2A;
-  --text: #FFFFFF; --text-mute: #A8A8A8; --text-dim: #6B6B6B;
-  --gold: #D4AF37; --gold-hi: #E8C84A;
-  --red: #FF2A2A; --green: #1FD160; --orange: #FF8C42; --yellow: #E8C84A;
-  --mono: 'JetBrains Mono', ui-monospace, monospace;
-  --serif: 'Playfair Display', serif;
-  --sans: 'Inter', system-ui, sans-serif;
-}
-
-.gradio-container, body {
-  background: var(--bg) !important; color: var(--text) !important;
-  font-family: var(--sans) !important;
-  max-width: 1180px !important; margin: 0 auto !important;
-  padding: 20px 24px 60px 24px !important;
-}
-footer, .built-with, .show-api { display: none !important; }
-.gradio-container > .main > .wrap > .blocks { gap: 18px !important; }
-
-.head {
-  border: 1px solid var(--border-strong); border-radius: 14px;
-  padding: 28px 32px 24px 32px;
-  background: linear-gradient(180deg, #0A0A0A 0%, #050505 100%);
-}
-.head-top { display: flex; align-items: flex-start; justify-content: space-between;
-            gap: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--border);
-            margin-bottom: 16px; }
-.head-brand { display: flex; align-items: center; gap: 16px; }
-.head-icon { width: 56px; height: 56px; border: 1px solid var(--border-strong);
-             border-radius: 12px; display: flex; align-items: center; justify-content: center;
-             font-size: 28px; background: radial-gradient(60% 60% at 50% 40%, #1A1A1A 0%, #050505 100%); }
-.head-title { font-family: var(--serif); font-style: italic; font-weight: 700;
-              font-size: 36px; color: var(--text); line-height: 1; margin: 2px 0 6px 0; }
-.head-subtitle { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em;
-                 color: var(--text-mute); text-transform: uppercase; }
-.head-right { text-align: right; }
-.submitted-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
-                   color: var(--text-dim); text-transform: uppercase; display: block; margin-bottom: 4px; }
-.submitted-name { font-family: var(--serif); font-style: italic; font-weight: 700;
-                  font-size: 22px; color: var(--text); }
-.status-pill { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
-               padding: 5px 12px; border-radius: 999px;
-               background: rgba(31, 209, 96, 0.08); border: 1px solid rgba(31, 209, 96, 0.5);
-               font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
-               color: var(--green); text-transform: uppercase; }
-.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
-
-.head-tag { text-align: center; margin: 4px 0 18px 0;
-            font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em;
-            color: var(--gold); text-transform: uppercase; }
-
-.head-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 24px; }
-.head-meta .item { display: flex; align-items: baseline; gap: 8px; }
-.head-meta .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em;
-                color: var(--text-dim); text-transform: uppercase; }
-.head-meta .v { font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--text); }
-
-.cta-wrap { text-align: center; margin: 24px 0 28px 0; }
-.cta { display: inline-flex; align-items: center; gap: 12px;
-       padding: 16px 32px; background: var(--red); color: #fff;
-       border-radius: 999px; border: 1px solid var(--red);
-       font-family: var(--mono); font-size: 13px; letter-spacing: 0.18em;
-       text-transform: uppercase; font-weight: 700; text-decoration: none;
-       box-shadow: 0 0 30px rgba(255, 53, 53, 0.35);
-       transition: transform 120ms ease, box-shadow 120ms ease; }
-.cta:hover { transform: translateY(-1px); box-shadow: 0 0 40px rgba(255, 53, 53, 0.55); }
-.cta-icon { width: 22px; height: 22px; border-radius: 999px; background: #fff;
-            color: var(--red); display: flex; align-items: center; justify-content: center;
-            font-size: 11px; }
-
-/* ARC strip — 6 stages */
-.arc-strip {
-  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
-  margin-bottom: 22px;
-}
-@media (max-width: 800px) { .arc-strip { grid-template-columns: repeat(3, 1fr); } }
-.arc-cell {
-  background: var(--bg-card); border: 1px solid var(--border-strong);
-  border-radius: 12px; padding: 18px 12px 14px 12px;
-  text-align: center;
-  position: relative;
-}
-.arc-red    { border-color: rgba(255, 42, 42, 0.45); }
-.arc-orange { border-color: rgba(255, 140, 66, 0.45); }
-.arc-yellow { border-color: rgba(232, 200, 74, 0.45); }
-.arc-green  { border-color: rgba(31, 209, 96, 0.45); box-shadow: 0 0 24px rgba(31, 209, 96, 0.15); }
-.arc-pct    { font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 28px; color: var(--text); }
-.arc-key    { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; color: var(--gold); margin-top: 4px; }
-.arc-label  { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; color: var(--text-mute); margin-top: 6px; text-transform: uppercase; line-height: 1.4; }
-
-/* TRAP grid */
-.trap-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
-@media (min-width: 1000px) { .trap-grid { grid-template-columns: 1fr 1fr; } }
-
-.trap-card { background: var(--bg-card); border: 1px solid var(--border-strong);
-             border-radius: 14px; padding: 22px 24px;
-             transition: border-color 120ms ease; }
-.trap-card:hover { border-color: var(--gold); }
-.trap-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
-             padding-bottom: 12px; border-bottom: 1px solid var(--border);
-             margin-bottom: 14px; }
-.trap-id { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
-           color: var(--gold); font-weight: 700; }
-.trap-cat { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
-            color: var(--text-dim); text-transform: uppercase;
-            padding: 3px 9px; border: 1px solid var(--border-strong); border-radius: 999px; }
-.trap-pills { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
-.pill { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 6px;
-        font-family: var(--mono); font-size: 11px; font-weight: 700; border: 1px solid; }
-.pill-sub { font-size: 8px; opacity: 0.7; margin-left: 4px; letter-spacing: 0.08em; }
-.pill-green { color: var(--green); border-color: rgba(31, 209, 96, 0.5); background: rgba(31, 209, 96, 0.08); }
-.pill-red   { color: var(--red);   border-color: rgba(255, 42, 42, 0.5); background: rgba(255, 42, 42, 0.08); }
-.pill-grey  { color: var(--text-dim); border-color: var(--border-strong); background: transparent; }
-
-.trap-q { font-family: var(--serif); font-style: italic; font-weight: 700;
-          font-size: 18px; color: var(--text); margin-bottom: 14px; line-height: 1.35; }
-.row-block { margin-bottom: 11px; }
-.row-block .label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em;
-                    color: var(--text-dim); text-transform: uppercase; margin-bottom: 4px; }
-.row-block .value { font-family: var(--sans); font-size: 14px; line-height: 1.5;
-                    border-left: 2px solid var(--border-strong);
-                    padding: 4px 0 4px 12px; }
-.value-correct { border-left-color: var(--green) !important; }
-.value-wrong   { border-left-color: var(--red) !important; color: var(--text-mute); }
-.value-meta    { border-left-color: var(--gold) !important; color: var(--text-mute); font-family: var(--mono); font-size: 12px; }
-
-.empty { text-align: center; padding: 60px; color: var(--text-dim);
-         font-family: var(--mono); letter-spacing: 0.18em; font-size: 12px; }
-
-.foot { margin-top: 32px; padding: 22px 24px;
-        border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); }
-.foot .title { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
-               color: var(--text-dim); text-transform: uppercase; margin-bottom: 10px; }
-.foot .body { font-family: var(--sans); font-size: 13px; color: var(--text-mute); line-height: 1.6; }
-.foot a { color: var(--gold); text-decoration: none; border-bottom: 1px dotted var(--gold); }
-.foot a:hover { color: var(--gold-hi); }
-
-.gradio-container .block { background: transparent !important; border: none !important; padding: 0 !important; }
-.gradio-container .form { background: transparent !important; border: none !important; gap: 0 !important; }
-label[data-testid="block-info"] { display: none !important; }
-.gradio-container .gr-radio { background: transparent !important; }
-.gradio-container .gr-radio label {
-  background: var(--bg-card) !important; border: 1px solid var(--border-strong) !important;
-  border-radius: 999px !important; padding: 7px 16px !important;
-  font-family: var(--mono) !important; font-size: 10px !important;
-  letter-spacing: 0.16em !important; text-transform: uppercase !important;
-  color: var(--text-mute) !important;
-}
-.gradio-container .gr-radio label:hover { border-color: var(--gold) !important; }
-.gradio-container .gr-radio input[type="radio"]:checked + label,
-.gradio-container .gr-radio label.selected {
-  background: rgba(255, 42, 42, 0.08) !important; border-color: var(--red) !important; color: var(--text) !important;
-}
-.gradio-container .gr-radio input { display: none !important; }
-"""
-
-
-def header_html() -> str:
-    return f"""
-<div class="head">
-  <div class="head-top">
-    <div class="head-brand">
-      <div class="head-icon">🛡️</div>
-      <div>
-        <div class="head-title">External Grounding</div>
-        <div class="head-subtitle">Defending an LLM's correction notebook from polluted memory</div>
-      </div>
-    </div>
-    <div class="head-right">
-      <span class="submitted-label">Submitted by</span>
-      <div class="submitted-name">{META['author']}</div>
-      <div class="status-pill"><span class="status-dot"></span>Static demo</div>
-    </div>
-  </div>
-  <div class="head-tag">★ &nbsp;Second Loop · Part 2 of 3&nbsp; ★</div>
-  <div class="head-meta">
-    <div class="item"><span class="k">Subject</span><span class="v">Qwen2.5-3B-Instruct</span></div>
-    <div class="item"><span class="k">Arbiter v1</span><span class="v">Qwen2.5-7B (clone)</span></div>
-    <div class="item"><span class="k">Arbiter v2</span><span class="v">Wikipedia + 7B</span></div>
-    <div class="item"><span class="k">License</span><span class="v">{META['license']}</span></div>
-  </div>
-</div>
-
-<div class="cta-wrap">
-  <a class="cta" href="{REPO_URL}" target="_blank" rel="noopener">
-    <span class="cta-icon">▶</span> View the full repository on GitHub
-  </a>
-</div>
-
-{render_arc_strip()}
-"""
-
-
-def footer_html() -> str:
-    return f"""
-<div class="foot">
-  <div class="title">About this demo</div>
-  <div class="body">
-    The arc traces scar-survival on the noisy-notebook benchmark from 50% (no defense)
-    to 100% (Guardian 2.3, final calibration). Guardian 1.0 uses a same-family clone
-    as arbiter — it shares the subject's blind spots and caps at 66.7%. Guardian 2.x
-    replaces the arbiter with live Wikipedia retrieval and three targeted fixes
-    (verbatim quote check, namesake relevance gate, soft threshold).
-    No live model is loaded in this Space: every answer and percentage on this page
-    comes verbatim from the JSON outputs of the original experimental run, bundled
-    into <code>data.json</code>.
-    <br/><br/>
-    Full code, raw per-stage results, and methodology document:
-    <a href="{REPO_URL}" target="_blank" rel="noopener">{REPO_URL}</a>.
-  </div>
-</div>
-"""
-
-
-def filter_update(mode: str) -> str:
-    return render_grid(mode)
-
-
-with gr.Blocks(css=CSS, theme=gr.themes.Base(), title="External Grounding · Second Loop") as demo:
-    gr.HTML(header_html())
-    filter_radio = gr.Radio(
-        choices=["all", "gk1_failed", "fixed_by_wiki", "needed_full_v23"],
-        value="all",
-        label="", show_label=False, container=False,
-    )
-    grid_out = gr.HTML(render_grid("all"))
-    filter_radio.change(filter_update, filter_radio, grid_out)
-    gr.HTML(footer_html())
-
-
-if __name__ == "__main__":
-    import os
-    port = int(os.environ.get("GRADIO_SERVER_PORT", 7860))
-    demo.launch(server_name="0.0.0.0", server_port=port)

data.json

@@ -9,6 +9,14 @@
     "project": "Second Loop — Part 2 of 3",
     "repo": "https://github.com/SergheiBrinza/external-grounding"
   },
+  "showcase": [
+    46,
+    27,
+    16,
+    34,
+    28,
+    20
+  ],
   "stages": [
     {
       "key": "sick",

index.html

@@ -0,0 +1,599 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>External Grounding · Second Loop</title>
+<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=Playfair+Display:ital,wght@1,700&family=Inter:wght@400;500;700;800&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet" />
+<script src="https://cdn.plot.ly/plotly-2.35.2.min.js" charset="utf-8"></script>
+<style>
+:root{
+  --bg:#000000; --bg-card:#0A0A0A; --bg-elev:#141414;
+  --border:#1F1F1F; --border-strong:#2A2A2A;
+  --text:#FFFFFF; --text-mute:#A8A8A8; --text-dim:#6B6B6B;
+  --gold:#D4AF37; --gold-hi:#E8C84A;
+  --red:#FF2A2A; --green:#1FD160; --orange:#FF8C42; --yellow:#E8C84A;
+  --mono:'JetBrains Mono',ui-monospace,monospace;
+  --serif:'Playfair Display',serif;
+  --sans:'Inter',system-ui,sans-serif;
+}
+*{box-sizing:border-box;}
+html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);}
+.wrap{max-width:1180px;margin:0 auto;padding:22px 24px 64px 24px;}
+a{color:var(--gold);text-decoration:none;border-bottom:1px dotted var(--gold);}
+a:hover{color:var(--gold-hi);}
+
+/* ---------- header ---------- */
+.head{border:1px solid var(--border-strong);border-radius:14px;
+  padding:26px 30px 22px 30px;background:linear-gradient(180deg,#0A0A0A 0%,#050505 100%);}
+.head-top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
+  padding-bottom:16px;border-bottom:1px solid var(--border);margin-bottom:16px;}
+.head-brand{display:flex;align-items:center;gap:16px;}
+.head-icon{width:52px;height:52px;border:1px solid var(--border-strong);border-radius:12px;
+  display:flex;align-items:center;justify-content:center;
+  background:radial-gradient(60% 60% at 50% 40%,#1A1A1A 0%,#050505 100%);}
+.head-title{font-family:var(--serif);font-style:italic;font-weight:700;font-size:34px;
+  color:var(--text);line-height:1;margin:2px 0 7px 0;}
+.head-subtitle{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
+  color:var(--text-mute);text-transform:uppercase;}
+.head-right{text-align:right;white-space:nowrap;}
+.submitted-label{font-family:var(--mono);font-size:10px;letter-spacing:.22em;
+  color:var(--text-dim);text-transform:uppercase;display:block;margin-bottom:4px;}
+.submitted-name{font-family:var(--serif);font-style:italic;font-weight:700;font-size:20px;color:var(--text);}
+.status-pill{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:5px 12px;
+  border-radius:999px;background:rgba(31,209,96,.08);border:1px solid rgba(31,209,96,.5);
+  font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--green);text-transform:uppercase;}
+.status-dot{width:7px;height:7px;border-radius:50%;background:var(--green);}
+.head-tag{text-align:center;margin:16px 0 0 0;
+  font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--gold);text-transform:uppercase;}
+.head-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 24px;margin-top:16px;}
+.head-meta .item{display:flex;flex-direction:column;gap:3px;}
+.head-meta .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--text-dim);text-transform:uppercase;}
+.head-meta .v{font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--text);}
+
+/* ---------- three honest badges ---------- */
+.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0 4px 0;}
+.badge{background:var(--bg-card);border:1px solid var(--border-strong);border-radius:12px;padding:16px 20px;}
+.badge .label{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--text-dim);
+  text-transform:uppercase;margin-bottom:8px;}
+.badge .value{font-family:var(--serif);font-style:italic;font-weight:700;font-size:26px;color:var(--text);}
+.badge .sub{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--text-mute);
+  text-transform:uppercase;margin-top:4px;}
+.badge.red{border-color:rgba(255,42,42,.5);} .badge.red .value{color:var(--red);}
+.badge.orange{border-color:rgba(255,140,66,.5);} .badge.orange .value{color:var(--orange);}
+.badge.green{border-color:rgba(31,209,96,.5);} .badge.green .value{color:var(--green);}
+
+/* ---------- exhibit (the museum lever) ---------- */
+.exhibit{margin-top:18px;border:1px solid var(--border-strong);border-radius:14px;
+  background:var(--bg-card);padding:22px 24px 26px 24px;}
+.exhibit-title{font-family:var(--serif);font-style:italic;font-weight:700;font-size:22px;margin:0 0 2px 0;}
+.exhibit-lede{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--text-mute);
+  text-transform:uppercase;margin-bottom:18px;}
+
+.exhibit-grid{display:grid;grid-template-columns:1fr 320px;gap:22px;align-items:stretch;}
+#chart{width:100%;height:430px;}
+.readout{border:1px solid var(--border-strong);border-radius:12px;background:#050505;
+  padding:20px 22px;display:flex;flex-direction:column;gap:2px;transition:border-color 160ms ease;}
+.readout .ro-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--text-dim);text-transform:uppercase;}
+.readout .ro-name{font-family:var(--serif);font-style:italic;font-weight:700;font-size:25px;line-height:1.08;margin:4px 0 2px 0;}
+.readout .ro-stageno{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--text-mute);text-transform:uppercase;}
+.ro-pct-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--text-dim);
+  text-transform:uppercase;margin-top:20px;}
+.ro-pct{font-family:var(--serif);font-style:italic;font-weight:700;font-size:56px;line-height:1;color:var(--green);transition:color 160ms ease;}
+.ro-count{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--text-mute);margin-top:2px;}
+.ro-tag{align-self:flex-start;margin-top:10px;padding:4px 10px;border-radius:999px;
+  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
+  border:1px solid var(--border-strong);color:var(--text-mute);}
+.ro-tag.red{background:rgba(255,42,42,.1);border-color:rgba(255,42,42,.55);color:var(--red);}
+.ro-tag.orange{background:rgba(255,140,66,.1);border-color:rgba(255,140,66,.55);color:var(--orange);}
+.ro-tag.green{background:rgba(31,209,96,.1);border-color:rgba(31,209,96,.55);color:var(--green);}
+.ro-aux{margin-top:18px;border-top:1px solid var(--border);padding-top:14px;display:flex;flex-direction:column;gap:9px;}
+.ro-aux .row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
+.ro-aux .rk{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--text-dim);text-transform:uppercase;}
+.ro-aux .rv{font-family:var(--mono);font-size:13px;font-weight:700;}
+.rv .fx{color:var(--green);} .rv .bk{color:var(--red);} .rv.mute{color:var(--text-mute);}
+
+/* ---------- slider (the lever) ---------- */
+.lever{margin-top:24px;}
+.lever-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;}
+.lever-head .t{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--text);text-transform:uppercase;}
+.lever-head .h{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--text-dim);text-transform:uppercase;}
+.slider-area{position:relative;padding:0 4px;}
+input[type=range].lever-input{
+  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;margin:0;
+  background:linear-gradient(90deg,var(--red) 0%,var(--orange) 45%,var(--yellow) 80%,var(--green) 100%);
+  outline:none;cursor:pointer;}
+input[type=range].lever-input::-webkit-slider-thumb{
+  -webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;
+  background:#0A0A0A;border:2px solid var(--gold);box-shadow:0 0 0 4px rgba(212,175,55,.18);
+  cursor:grab;margin-top:-10px;transition:border-color 120ms ease,box-shadow 120ms ease;}
+input[type=range].lever-input::-webkit-slider-thumb:active{cursor:grabbing;}
+input[type=range].lever-input::-moz-range-thumb{width:26px;height:26px;border-radius:50%;
+  background:#0A0A0A;border:2px solid var(--gold);box-shadow:0 0 0 4px rgba(212,175,55,.18);cursor:grab;}
+input[type=range].lever-input::-moz-range-track{height:6px;border-radius:999px;background:transparent;}
+input[type=range].lever-input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(212,175,55,.20),0 0 0 7px var(--gold-hi);}
+input[type=range].lever-input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px rgba(212,175,55,.20),0 0 0 7px var(--gold-hi);}
+.ticks{position:relative;height:10px;margin-top:9px;}
+.tick{position:absolute;top:0;width:1px;height:6px;background:var(--border-strong);transform:translateX(-50%);}
+.tick.on{background:var(--gold);height:9px;}
+.ticklabels{position:relative;height:32px;margin-top:2px;}
+.tlabel{position:absolute;top:0;font-family:var(--mono);font-size:9.5px;letter-spacing:.02em;
+  color:var(--text-dim);white-space:nowrap;line-height:1.2;text-align:center;cursor:pointer;
+  transition:color 120ms ease;}
+.tlabel .pct{display:block;font-size:8.5px;color:var(--text-dim);}
+.tlabel.on{color:var(--text);font-weight:700;}
+.tlabel.on .pct{color:var(--gold);}
+.lever-foot{margin-top:18px;display:flex;justify-content:space-between;
+  font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--text-dim);text-transform:uppercase;}
+
+/* ---------- trap grid ---------- */
+.grid-wrap{margin-top:22px;border:1px solid var(--border-strong);border-radius:14px;background:var(--bg-card);padding:20px 22px;}
+.grid-cap{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap;}
+.grid-cap .gc-t{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--text-dim);text-transform:uppercase;}
+.grid-cap .gc-n{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--text-mute);text-transform:uppercase;}
+.grid-cap .gc-n b{color:var(--green);}
+.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
+.chip{cursor:pointer;border:1px solid var(--border-strong);background:#050505;border-radius:999px;
+  padding:6px 13px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
+  color:var(--text-mute);transition:border-color 120ms ease,color 120ms ease;}
+.chip:hover{border-color:var(--gold);color:var(--text);}
+.chip.active{border-color:var(--gold);color:var(--text);background:rgba(212,175,55,.07);}
+.grid12{display:grid;grid-template-columns:1fr;gap:10px;}
+@media(min-width:720px){.grid12{grid-template-columns:1fr 1fr;}}
+@media(min-width:1020px){.grid12{grid-template-columns:1fr 1fr 1fr;}}
+.gcard{cursor:pointer;border:1px solid var(--border-strong);border-radius:11px;background:#080808;
+  padding:13px 15px;border-left-width:3px;transition:border-color 140ms ease,background 140ms ease;}
+.gcard:hover{border-color:var(--gold);}
+.gcard.sel{background:rgba(212,175,55,.06);}
+.gcard.now-correct{border-left-color:var(--green);}
+.gcard.now-wrong{border-left-color:var(--red);}
+.gc-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
+.gc-id{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--gold);letter-spacing:.08em;}
+.gc-cat{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;color:var(--text-dim);text-transform:uppercase;
+  padding:2px 7px;border:1px solid var(--border-strong);border-radius:999px;}
+.gc-now{margin-left:auto;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;font-weight:700;text-transform:uppercase;}
+.gc-now.c{color:var(--green);} .gc-now.w{color:var(--red);}
+.gc-q{font-family:var(--sans);font-size:12.5px;line-height:1.45;color:var(--text-mute);margin-bottom:10px;min-height:36px;}
+.traj{display:flex;gap:5px;align-items:center;}
+.tdot{width:13px;height:13px;border-radius:50%;border:1px solid var(--border-strong);position:relative;}
+.tdot.c{background:rgba(31,209,96,.85);border-color:var(--green);}
+.tdot.w{background:rgba(255,42,42,.7);border-color:var(--red);}
+.tdot.cur{box-shadow:0 0 0 2px var(--gold);}
+.traj-axis{display:flex;gap:5px;margin-top:5px;}
+.traj-axis span{width:13px;font-family:var(--mono);font-size:7px;color:var(--text-dim);text-align:center;letter-spacing:0;}
+
+/* ---------- spotlight ---------- */
+.spot{margin-top:22px;border:1px solid var(--border-strong);border-radius:14px;background:var(--bg-card);padding:22px 24px;}
+.spot-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px;}
+.spot-id{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--gold);letter-spacing:.1em;}
+.spot-cat{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--text-dim);text-transform:uppercase;
+  padding:2px 8px;border:1px solid var(--border-strong);border-radius:999px;}
+.spot-q{font-family:var(--serif);font-style:italic;font-weight:700;font-size:21px;line-height:1.32;margin:2px 0 16px 0;}
+.spot-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px 28px;}
+@media(max-width:760px){.spot-cols{grid-template-columns:1fr;}}
+.row-block{margin-bottom:12px;}
+.row-block .label{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--text-dim);text-transform:uppercase;margin-bottom:4px;}
+.row-block .value{font-family:var(--sans);font-size:13.5px;line-height:1.5;border-left:2px solid var(--border-strong);padding:4px 0 4px 12px;}
+.value.correct{border-left-color:var(--green);}
+.value.wrong{border-left-color:var(--red);color:var(--text-mute);}
+.value.final{border-left-color:var(--green);}
+.value.meta{border-left-color:var(--gold);color:var(--text-mute);font-family:var(--mono);font-size:12px;}
+/* trajectory strip in spotlight */
+.spot-traj{margin-top:6px;}
+.spot-traj .label{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--text-dim);text-transform:uppercase;margin-bottom:10px;}
+.straj{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;}
+.scell{text-align:center;border:1px solid var(--border-strong);border-radius:9px;padding:9px 4px 7px 4px;background:#050505;}
+.scell.c{border-color:rgba(31,209,96,.45);} .scell.w{border-color:rgba(255,42,42,.45);}
+.scell.cur{box-shadow:0 0 0 2px var(--gold);}
+.scell .mk{font-family:var(--mono);font-size:15px;font-weight:700;line-height:1;}
+.scell.c .mk{color:var(--green);} .scell.w .mk{color:var(--red);}
+.scell .sn{font-family:var(--mono);font-size:8px;letter-spacing:.04em;color:var(--text-dim);margin-top:5px;text-transform:uppercase;}
+.scell .sp{font-family:var(--mono);font-size:8px;color:var(--text-dim);margin-top:2px;}
+.trust-row{display:flex;gap:18px;margin-top:8px;}
+.trust-row .ti{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--text-dim);text-transform:uppercase;}
+.trust-row .ti b{color:var(--text-mute);}
+
+/* ---------- about ---------- */
+.foot{margin-top:24px;padding:22px 24px;border:1px solid var(--border);border-radius:12px;background:var(--bg-card);}
+.foot .ftitle{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--text-dim);text-transform:uppercase;margin-bottom:10px;}
+.foot .body{font-family:var(--sans);font-size:13px;color:var(--text-mute);line-height:1.62;}
+.foot code{font-family:var(--mono);font-size:12px;color:var(--text);background:var(--bg-elev);padding:1px 5px;border-radius:4px;border:1px solid var(--border);}
+.attrib{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);
+  font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--text-dim);line-height:1.7;}
+
+.databanner{border:1px solid rgba(255,42,42,.5);background:rgba(255,42,42,.06);color:var(--red);
+  font-family:var(--mono);font-size:12px;letter-spacing:.04em;padding:14px 16px;border-radius:10px;margin:4px 0 16px 0;line-height:1.5;}
+
+@media(max-width:860px){
+  .exhibit-grid{grid-template-columns:1fr;}
+  .head-meta,.badges{grid-template-columns:repeat(2,1fr);}
+  .head-top{flex-direction:column;} .head-right{text-align:left;}
+}
+@media(prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important;} }
+</style>
+</head>
+<body>
+<main class="wrap">
+
+  <!-- HEADER -->
+  <header class="head">
+    <div class="head-top">
+      <div class="head-brand">
+        <div class="head-icon">
+          <svg width="30" height="30" viewBox="0 0 30 30" fill="none" aria-hidden="true">
+            <path d="M15 3.5 L24.5 7 V14 C24.5 20.5 20.3 24.5 15 26.5 C9.7 24.5 5.5 20.5 5.5 14 V7 Z"
+                  stroke="#2A2A2A" stroke-width="1.3" fill="none"/>
+            <polyline points="9.5,18 12.5,15.5 16,12.5 20.5,9.5" stroke="#1FD160" stroke-width="1.7" fill="none"/>
+            <circle cx="20.5" cy="9.5" r="1.5" fill="#D4AF37"/>
+          </svg>
+        </div>
+        <div>
+          <div class="head-title">External Grounding</div>
+          <div class="head-subtitle">Raising self-correction from 50% to 100% under a noisy notebook</div>
+        </div>
+      </div>
+      <div class="head-right">
+        <span class="submitted-label">Submitted by</span>
+        <div class="submitted-name" id="author">Serghei Brinza</div>
+        <div class="status-pill"><span class="status-dot"></span>Static demo · no live model</div>
+      </div>
+    </div>
+    <div class="head-tag">★&nbsp; Second Loop · Part 2 of 3 &nbsp;★</div>
+    <div class="head-meta">
+      <div class="item"><span class="k">Subject model</span><span class="v">Qwen2.5-3B-Instruct (frozen)</span></div>
+      <div class="item"><span class="k">Arbiter v1</span><span class="v">Qwen2.5-7B (same-family clone)</span></div>
+      <div class="item"><span class="k">Arbiter v2</span><span class="v">Wikipedia + 7B reader</span></div>
+      <div class="item"><span class="k">License</span><span class="v" id="m-license">MIT</span></div>
+    </div>
+  </header>
+
+  <!-- THREE HONEST BADGES -->
+  <section class="badges">
+    <div class="badge red"><div class="label">No defense — raw 3B</div><div class="value" id="b-sick">50.0%</div><div class="sub" id="b-sick-sub">6 / 12 on the noisy notebook</div></div>
+    <div class="badge orange"><div class="label">Clone-arbiter ceiling</div><div class="value" id="b-ceil">66.7%</div><div class="sub">three versions stuck here</div></div>
+    <div class="badge green"><div class="label">Calibrated — Guardian 2.3</div><div class="value" id="b-final">100%</div><div class="sub" id="b-final-sub">12 / 12, external grounding</div></div>
+  </section>
+
+  <!-- EXHIBIT: the museum lever -->
+  <section class="exhibit">
+    <div class="exhibit-title">Drag the guardian from sick to calibrated.</div>
+    <div class="exhibit-lede">Move the lever through six guardian versions and watch corrected answers climb 50% → 100%</div>
+
+    <div class="exhibit-grid">
+      <div id="chart"></div>
+      <div class="readout" id="readout">
+        <div class="ro-label">Current guardian stage</div>
+        <div class="ro-name" id="ro-name">Sick (no defense)</div>
+        <div class="ro-stageno" id="ro-stageno">stage 1 of 6</div>
+        <div class="ro-pct-label">Corrected answers · higher is better</div>
+        <div class="ro-pct" id="ro-pct">50.0%</div>
+        <div class="ro-count" id="ro-count">6 / 12 traps correct</div>
+        <div class="ro-tag" id="ro-tag">No external grounding</div>
+        <div class="ro-aux">
+          <div class="row"><span class="rk">vs previous stage</span><span class="rv mute" id="ro-churn">start</span></div>
+          <div class="row"><span class="rk">net change</span><span class="rv mute" id="ro-net">—</span></div>
+        </div>
+      </div>
+    </div>
+
+    <div class="lever">
+      <div class="lever-head">
+        <span class="t">The lever — guardian version</span>
+        <span class="h">← weaker &nbsp;·&nbsp; stronger →</span>
+      </div>
+      <div class="slider-area">
+        <input id="slider" class="lever-input" type="range" min="0" max="5" step="1" value="0"
+               aria-label="Guardian version" />
+        <div class="ticks" id="ticks"></div>
+        <div class="ticklabels" id="ticklabels"></div>
+      </div>
+      <div class="lever-foot">
+        <span>No defense</span>
+        <span>66.7% plateau</span>
+        <span>Calibrated</span>
+      </div>
+    </div>
+  </section>
+
+  <!-- TRAP GRID -->
+  <section class="grid-wrap">
+    <div class="grid-cap">
+      <span class="gc-t">All 12 traps — colour = verdict at the current stage · dots = full trajectory · click to inspect</span>
+      <span class="gc-n" id="grid-n">Stage: <b id="grid-n-v">6 / 12 correct</b></span>
+    </div>
+    <div class="chips" id="chips"></div>
+    <div class="grid12" id="grid12"></div>
+  </section>
+
+  <!-- SPOTLIGHT -->
+  <section class="spot" id="spot">
+    <div class="spot-top">
+      <span class="spot-id" id="sp-id">#46</span>
+      <span class="spot-cat" id="sp-cat">science-number</span>
+    </div>
+    <div class="spot-q" id="sp-q">—</div>
+    <div class="spot-cols">
+      <div>
+        <div class="row-block"><div class="label">Correct answer</div><div class="value correct" id="sp-correct">—</div></div>
+        <div class="row-block"><div class="label">Memorized wrong answer</div><div class="value wrong" id="sp-wrong">—</div></div>
+        <div class="row-block"><div class="label">Final answer · Guardian 2.3</div><div class="value final" id="sp-final">—</div></div>
+        <div class="row-block"><div class="label">Wikipedia retrieval — top sources</div><div class="value meta" id="sp-wiki">—</div></div>
+        <div class="trust-row">
+          <span class="ti">trust v2.2 <b id="sp-t22">—</b></span>
+          <span class="ti">trust v2.3 <b id="sp-t23">—</b></span>
+        </div>
+      </div>
+      <div class="spot-traj">
+        <div class="label">Verdict across the six guardian stages</div>
+        <div class="straj" id="sp-traj"></div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ABOUT -->
+  <footer class="foot">
+    <div class="ftitle">About this demo</div>
+    <div class="body">
+      Twelve questions where a frozen <b>Qwen2.5-3B-Instruct</b> has a confidently memorized
+      <i>wrong</i> answer are run through a correction notebook whose external entries are
+      <b>noisy</b> — some verified facts, some unreliable look-alikes. The lever steps through six
+      guardian versions, each deciding what the notebook is allowed to absorb, and the score is the
+      share of the twelve answered correctly. With no guardian the model sits at
+      <b id="t-sick">50%</b> (6 / 12).
+      <br/><br/>
+      The honest part is the middle. Guardian 1.0 uses a <b>same-family clone</b> as arbiter — it
+      shares the subject's blind spots, so it caps at <b id="t-ceil">66.7%</b>. Guardian 2.0
+      (live Wikipedia retrieval) and Guardian 2.1 (more retrieval) <i>also</i> land on 66.7%:
+      three different attempts, one ceiling. And that plateau is not stagnation — under the hood each
+      step fixes some traps while breaking others (move the lever and read “+fixed / −broken”).
+      Only Guardian 2.2 (three targeted fixes — verbatim-quote check, namesake relevance gate, soft
+      threshold) reaches <b id="t-22">91.7%</b>, and Guardian 2.3 (final calibration) reaches
+      <b id="t-23">100%</b>. Several traps regress along the way — Venus (#46) is correct, broken,
+      fixed, broken twice more, then finally held: <code>C → X → C → X → X → C</code>.
+      <br/><br/>
+      No live model runs in this Space. Every verdict, percentage and retrieval source is verbatim
+      from the original experimental run, bundled into <code>data.json</code>. An independent
+      Qwen2.5-7B reader/judge with Wikipedia adjudicated the v2 stages. Full code, raw per-stage
+      results and methodology:
+      <a id="repo-link" href="https://github.com/SergheiBrinza/external-grounding" target="_blank" rel="noopener">github.com/SergheiBrinza/external-grounding</a>.
+    </div>
+    <div class="attrib">
+      Subject model Qwen2.5-3B-Instruct · arbiters Qwen2.5-7B-Instruct (same-family clone) and
+      Wikipedia retrieval + 7B reader/judge (both Apache-2.0, Alibaba Cloud). Wikipedia content
+      © its authors, CC BY-SA. Run on a single RTX 3090. No model weights are redistributed here —
+      only aggregate verdicts and counts. Demo code &amp; data: MIT.
+    </div>
+  </footer>
+
+</main>
+
+<script>
+const COL={card:'#0A0A0A',border:'#1F1F1F',borderS:'#2A2A2A',text:'#FFFFFF',mute:'#A8A8A8',dim:'#6B6B6B',
+  gold:'#D4AF37',red:'#FF2A2A',green:'#1FD160',orange:'#FF8C42',yellow:'#E8C84A'};
+const COLOR={red:COL.red,orange:COL.orange,yellow:COL.yellow,green:COL.green};
+const $=id=>document.getElementById(id);
+const f1=v=>v.toFixed(1);
+
+let META={}, STAGES=[], TRAPS=[], BYID={}, SHOWCASE=[], COUNTS=[], cur=0, selTrap=46;
+const SHORT={sick:'sick',gk1:'1.0',gk2:'2.0',gk21:'2.1',gk22:'2.2',gk23:'2.3'};
+const PLOT_MARGIN={l:40,r:16,t:16,b:34};
+
+fetch('data.json').then(r=>r.json()).then(D=>{
+  META=D.meta||{}; STAGES=D.stages||[]; TRAPS=D.traps||[];
+  TRAPS.forEach(t=>BYID[t.id]=t);
+  SHOWCASE=(D.showcase&&D.showcase.length)?D.showcase:TRAPS.slice(0,6).map(t=>t.id);
+  COUNTS=STAGES.map(s=>TRAPS.filter(t=>t.stages[s.key]==='correct').length);
+
+  if(META.author) $('author').textContent=META.author;
+  if(META.license) $('m-license').textContent=String(META.license).toUpperCase();
+  const n=TRAPS.length;
+  $('b-sick').textContent=f1(STAGES[0].pct)+'%'; $('b-sick-sub').textContent=COUNTS[0]+' / '+n+' on the noisy notebook';
+  $('b-ceil').textContent=f1(STAGES[1].pct)+'%';
+  $('b-final').textContent=(STAGES[5].pct%1===0?STAGES[5].pct.toFixed(0):f1(STAGES[5].pct))+'%';
+  $('b-final-sub').textContent=COUNTS[5]+' / '+n+', external grounding';
+  $('t-sick').textContent=f1(STAGES[0].pct)+'%';
+  $('t-ceil').textContent=f1(STAGES[1].pct)+'%';
+  $('t-22').textContent=f1(STAGES[4].pct)+'%';
+  $('t-23').textContent=(STAGES[5].pct%1===0?STAGES[5].pct.toFixed(0):f1(STAGES[5].pct))+'%';
+  if(META.repo){const rl=$('repo-link');rl.href=META.repo;rl.textContent=META.repo.replace(/^https?:\/\//,'');}
+
+  buildTicks(); buildChips(); buildGrid(); drawChart();
+
+  // deep-link: ?stage=0..5 & trap=<id>
+  const q=new URLSearchParams(location.search);
+  const st=parseInt(q.get('stage'),10); const start=(Number.isFinite(st)&&st>=0&&st<=5)?st:0;
+  const tp=parseInt(q.get('trap'),10); if(BYID[tp]) selTrap=tp; else if(!BYID[selTrap]) selTrap=SHOWCASE[0];
+  $('slider').value=start;
+  $('slider').addEventListener('input',e=>setStage(+e.target.value));
+  renderSpot(); setStage(start);
+}).catch(err=>{
+  console.error('external-grounding: could not load data.json —',err);
+  const ex=document.querySelector('.exhibit');
+  if(ex){const b=document.createElement('div');b.className='databanner';
+    b.textContent='Data unavailable — could not load data.json ('+err+'). This static demo needs data.json served alongside the page.';
+    ex.insertBefore(b,ex.firstChild);}
+});
+
+function correctAt(key){return TRAPS.filter(t=>t.stages[key]==='correct').length;}
+function churn(i){
+  if(i<=0) return null;
+  const a=STAGES[i-1].key, b=STAGES[i].key; let fixed=0,broken=0;
+  TRAPS.forEach(t=>{const pa=t.stages[a]==='correct',pb=t.stages[b]==='correct';
+    if(!pa&&pb)fixed++; if(pa&&!pb)broken++;});
+  return {fixed,broken,net:fixed-broken};
+}
+
+function buildTicks(){
+  const T=$('ticks'), L=$('ticklabels'); T.innerHTML=''; L.innerHTML='';
+  STAGES.forEach((s,i)=>{
+    const pct=i/(STAGES.length-1)*100;
+    const t=document.createElement('div'); t.className='tick'; t.dataset.i=i; t.style.left=pct+'%'; T.appendChild(t);
+    const l=document.createElement('div'); l.className='tlabel'; l.dataset.i=i;
+    l.innerHTML=(SHORT[s.key]||s.key)+'<span class="pct">'+f1(s.pct)+'%</span>';
+    l.style.left=pct+'%';
+    if(i===0){l.style.transform='translateX(0)';l.style.textAlign='left';}
+    else if(i===STAGES.length-1){l.style.transform='translateX(-100%)';l.style.textAlign='right';}
+    else{l.style.transform='translateX(-50%)';}
+    l.tabIndex=0;
+    l.addEventListener('click',()=>{$('slider').value=i;setStage(i);});
+    l.addEventListener('keydown',e=>{if(e.key==='Enter'||e.key===' '){e.preventDefault();$('slider').value=i;setStage(i);}});
+    L.appendChild(l);
+  });
+}
+
+function buildChips(){
+  const c=$('chips'); c.innerHTML='';
+  SHOWCASE.forEach(id=>{const t=BYID[id]; if(!t)return;
+    const el=document.createElement('div'); el.className='chip'; el.dataset.id=id; el.tabIndex=0;
+    el.textContent=chipLabel(t);
+    el.addEventListener('click',()=>{selTrap=id;renderSpot();updateGridSel();scrollSpot();});
+    el.addEventListener('keydown',e=>{if(e.key==='Enter'||e.key===' '){e.preventDefault();selTrap=id;renderSpot();updateGridSel();scrollSpot();}});
+    c.appendChild(el);
+  });
+}
+function chipLabel(t){
+  const m={46:'Venus day & year',27:'Darth Vader',16:'Tongue map',34:'First to circle globe',28:'Magic mirror',20:'Tallest mountain'};
+  return m[t.id]||('#'+t.id);
+}
+
+function buildGrid(){
+  const g=$('grid12'); g.innerHTML='';
+  TRAPS.forEach(t=>{
+    const el=document.createElement('div'); el.className='gcard'; el.dataset.id=t.id; el.tabIndex=0;
+    const dots=STAGES.map((s,i)=>{const v=t.stages[s.key]==='correct';
+      return '<span class="tdot '+(v?'c':'w')+'" data-i="'+i+'" title="'+(SHORT[s.key])+': '+(v?'correct':'wrong')+'"></span>';}).join('');
+    const axis=STAGES.map(s=>'<span>'+SHORT[s.key]+'</span>').join('');
+    el.innerHTML=
+      '<div class="gc-head"><span class="gc-id">#'+String(t.id).padStart(2,'0')+'</span>'+
+      '<span class="gc-cat">'+esc(t.category)+'</span>'+
+      '<span class="gc-now" data-now></span></div>'+
+      '<div class="gc-q">'+esc(t.question)+'</div>'+
+      '<div class="traj">'+dots+'</div>'+
+      '<div class="traj-axis">'+axis+'</div>';
+    el.addEventListener('click',()=>{selTrap=t.id;renderSpot();updateGridSel();scrollSpot();});
+    el.addEventListener('keydown',e=>{if(e.key==='Enter'||e.key===' '){e.preventDefault();selTrap=t.id;renderSpot();updateGridSel();scrollSpot();}});
+    g.appendChild(el);
+  });
+}
+function scrollSpot(){const s=$('spot');if(s)s.scrollIntoView({behavior:'smooth',block:'nearest'});}
+function updateGridSel(){
+  document.querySelectorAll('.gcard').forEach(c=>c.classList.toggle('sel',+c.dataset.id===selTrap));
+  document.querySelectorAll('.chip').forEach(c=>c.classList.toggle('active',+c.dataset.id===selTrap));
+}
+
+/* ---------- chart ---------- */
+function drawChart(){
+  const idx=STAGES.map((_,i)=>i);
+  const y=STAGES.map(s=>s.pct);
+  const colors=STAGES.map(s=>COLOR[s.color]||COL.gold);
+  const text=STAGES.map(s=>f1(s.pct)+'%');
+  const lw=STAGES.map((_,i)=>i===cur?2.5:0);
+  const trace={x:idx,y:y,type:'bar',marker:{color:colors,line:{color:'#FFFFFF',width:lw}},
+    text:text,textposition:'outside',textfont:{family:"'JetBrains Mono',monospace",size:11,color:COL.mute},
+    cliponaxis:false,width:0.62,hovertemplate:'%{customdata}<br>%{y:.1f}%<extra></extra>',
+    customdata:STAGES.map(s=>s.label)};
+  Plotly.newPlot('chart',[trace],baseLayout(),{displayModeBar:false,responsive:true});
+}
+function baseLayout(){
+  return {
+    paper_bgcolor:COL.card, plot_bgcolor:COL.card, margin:PLOT_MARGIN, height:430,
+    font:{family:"'JetBrains Mono',monospace",color:COL.mute}, showlegend:false, bargap:0.38,
+    hoverlabel:{bgcolor:'#141414',bordercolor:COL.borderS,font:{family:"'JetBrains Mono',monospace",color:COL.text,size:12}},
+    xaxis:{tickmode:'array',tickvals:STAGES.map((_,i)=>i),ticktext:STAGES.map(s=>SHORT[s.key]||s.key),
+      tickfont:{family:"'JetBrains Mono',monospace",size:11,color:COL.dim},
+      gridcolor:COL.border,zeroline:false,range:[-0.5,STAGES.length-0.5],fixedrange:true},
+    yaxis:{title:{text:'% corrected (higher = better)',font:{size:11,color:COL.mute}},
+      tickfont:{family:"'JetBrains Mono',monospace",size:10,color:COL.dim},ticksuffix:'%',
+      gridcolor:COL.border,zeroline:false,range:[0,112],fixedrange:true},
+    shapes:shapesFor(cur), annotations:annsFor(cur)
+  };
+}
+function shapesFor(i){
+  const ceil=STAGES[1].pct;
+  return [
+    {type:'line',xref:'paper',x0:0,x1:1,yref:'y',y0:ceil,y1:ceil,line:{color:COL.orange,width:1,dash:'dot'},layer:'below'},
+    {type:'line',xref:'paper',x0:0,x1:1,yref:'y',y0:100,y1:100,line:{color:COL.green,width:1,dash:'dot'},layer:'below'},
+    {type:'line',xref:'x',x0:i,x1:i,yref:'paper',y0:0,y1:1,line:{color:'rgba(255,255,255,0.14)',width:1},layer:'below'}
+  ];
+}
+function annsFor(i){
+  const ceil=STAGES[1].pct;
+  return [{xref:'paper',yref:'y',x:0.014,y:ceil,xanchor:'left',yanchor:'bottom',
+    text:'clone-arbiter ceiling '+f1(ceil)+'%',showarrow:false,
+    font:{family:"'JetBrains Mono',monospace",size:9.5,color:COL.orange}}];
+}
+
+/* ---------- state ---------- */
+function setStage(i){
+  cur=i; const s=STAGES[i], n=TRAPS.length, c=COUNTS[i], col=COLOR[s.color]||COL.gold;
+  Plotly.restyle('chart',{'marker.line.width':[STAGES.map((_,k)=>k===i?2.5:0)]},[0]);
+  Plotly.relayout('chart',{shapes:shapesFor(i),annotations:annsFor(i)});
+  // readout
+  $('ro-name').textContent=s.label;
+  $('ro-stageno').textContent='stage '+(i+1)+' of '+STAGES.length;
+  $('ro-pct').textContent=f1(s.pct)+'%'; $('ro-pct').style.color=col;
+  $('ro-count').textContent=c+' / '+n+' traps correct';
+  // tag
+  const tag=$('ro-tag');
+  let tt='', tc='';
+  if(i===0){tt='No external grounding';tc='red';}
+  else if(s.pct===STAGES[1].pct){tt='Plateau · '+f1(s.pct)+'% ceiling';tc='orange';}
+  else if(i===STAGES.length-1){tt='Calibrated · '+f1(s.pct)+'%';tc='green';}
+  else {tt='Breakthrough';tc='green';}
+  tag.textContent=tt; tag.className='ro-tag '+tc;
+  // churn
+  const ch=churn(i);
+  if(!ch){$('ro-churn').innerHTML='start';$('ro-churn').className='rv mute';$('ro-net').textContent='—';$('ro-net').className='rv mute';}
+  else{
+    $('ro-churn').innerHTML='<span class="fx">+'+ch.fixed+' fixed</span> · <span class="bk">−'+ch.broken+' broken</span>';
+    $('ro-churn').className='rv';
+    const nt=(ch.net>0?'+':ch.net<0?'−':'±')+Math.abs(ch.net)+' net';
+    $('ro-net').textContent=nt; $('ro-net').className='rv '+(ch.net>0?'':ch.net<0?'':'mute');
+    $('ro-net').style.color=ch.net>0?COL.green:ch.net<0?COL.red:COL.mute;
+  }
+  // slider aria
+  $('slider').setAttribute('aria-valuetext',s.label+' — '+f1(s.pct)+'% corrected');
+  // ticks/labels
+  document.querySelectorAll('.tick').forEach(t=>t.classList.toggle('on',+t.dataset.i===i));
+  document.querySelectorAll('.tlabel').forEach(l=>l.classList.toggle('on',+l.dataset.i===i));
+  // grid recolor at current stage + current-dot ring
+  const key=s.key;
+  document.querySelectorAll('.gcard').forEach(card=>{
+    const t=BYID[+card.dataset.id], ok=t.stages[key]==='correct';
+    card.classList.toggle('now-correct',ok); card.classList.toggle('now-wrong',!ok);
+    const now=card.querySelector('[data-now]'); now.textContent=ok?'correct':'wrong'; now.className='gc-now '+(ok?'c':'w');
+    card.querySelectorAll('.tdot').forEach(d=>d.classList.toggle('cur',+d.dataset.i===i));
+  });
+  $('grid-n-v').textContent=c+' / '+n+' correct';
+  // spotlight current-stage ring
+  document.querySelectorAll('#sp-traj .scell').forEach(cell=>cell.classList.toggle('cur',+cell.dataset.i===i));
+}
+
+/* ---------- spotlight ---------- */
+function renderSpot(){
+  const t=BYID[selTrap]; if(!t) return;
+  $('sp-id').textContent='#'+String(t.id).padStart(2,'0');
+  $('sp-cat').textContent=t.category;
+  $('sp-q').textContent=t.question;
+  $('sp-correct').textContent=t.correct_answer;
+  $('sp-wrong').textContent=t.memorized_wrong;
+  $('sp-final').textContent=t.final_answer;
+  $('sp-wiki').textContent=(t.wiki_titles||[]).join('  ·  ');
+  $('sp-t22').textContent=t.v22_trust||'—';
+  $('sp-t23').textContent=t.v23_trust||'—';
+  const tr=$('sp-traj'); tr.innerHTML='';
+  STAGES.forEach((s,i)=>{
+    const ok=t.stages[s.key]==='correct';
+    const cell=document.createElement('div');
+    cell.className='scell '+(ok?'c':'w')+(i===cur?' cur':''); cell.dataset.i=i;
+    cell.innerHTML='<div class="mk">'+(ok?'✓':'✗')+'</div><div class="sn">'+(SHORT[s.key]||s.key)+'</div><div class="sp">'+f1(s.pct)+'%</div>';
+    tr.appendChild(cell);
+  });
+  updateGridSel();
+}
+function esc(s){return String(s).replace(/[&<>"]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));}
+</script>
+</body>
+</html>

requirements.txt

@@ -1,2 +0,0 @@
-gradio>=5.0,<6
-huggingface_hub<1.0