Upload index.html

index.html

@@ -5,6 +5,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta name="theme-color" content="#eaf8ff" />
   <meta name="description" content="Orion / Project Prism — Transformer 2 research notes on Procedure Banks, Working State, recurrent deliberation, and the retirement of the Knowledge Vault." />
+  <meta property="og:title" content="Orion / Project Prism — Transformer 2 Research Notes" />
+  <meta property="og:description" content="Architecture notes, ablations, training telemetry, negative results, and the road to T2.2." />
+  <meta property="og:type" content="website" />
+  <meta name="twitter:card" content="summary_large_image" />
   <title>Orion / Project Prism — Transformer 2 Research Blog</title>
 
   <style>
@@ -752,6 +756,101 @@
 .eyebrow{border-radius:10px}.stat-card{border-radius:16px}.glass-card,.callout,.table-wrap,.timeline-card{border-radius:18px}
 .btn{border-radius:11px}.arch-row{border-radius:12px}.arch-row .tag{border-radius:7px}.toc{border-radius:18px}
 .section-kicker{letter-spacing:.055em}.quote{font-weight:650}
+
+    .quick-tools{
+      position:fixed;right:16px;bottom:16px;z-index:90;
+      display:flex;gap:8px;padding:7px;border-radius:16px;
+      background:var(--glass);border:1px solid var(--glass-border);
+      backdrop-filter:blur(20px) saturate(160%);box-shadow:var(--shadow-soft)
+    }
+    .quick-tools button,.assistant-actions button{
+      border:1px solid var(--glass-border);background:rgba(255,255,255,.35);color:var(--ink);
+      border-radius:10px;cursor:pointer;font-weight:750
+    }
+    .quick-tools button{width:38px;height:38px}
+    body.dark .quick-tools button,body.dark .assistant-actions button{background:rgba(255,255,255,.045)}
+    .lab-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:26px}
+    .lab-card{
+      background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(22px) saturate(150%);
+      border-radius:18px;padding:20px;box-shadow:var(--shadow-soft);min-width:0
+    }
+    .span-2{grid-column:span 2}
+    .lab-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:16px}
+    .lab-head h3{margin:7px 0 0}
+    .evidence{display:inline-block;font-size:.61rem;font-weight:850;letter-spacing:.08em;padding:5px 7px;border-radius:7px;border:1px solid var(--line)}
+    .observed{color:#157a63;background:rgba(53,180,143,.08)}
+    .ablation{color:#8a6200;background:rgba(204,153,42,.08)}
+    .planned{color:#316db1;background:rgba(70,132,203,.08)}
+    .illustrative{color:#7c5a9e;background:rgba(133,88,173,.08)}
+    .range{width:100%;accent-color:var(--cyan)}
+    .tm-scale{display:flex;justify-content:space-between;gap:6px;font-size:.65rem;color:var(--muted);margin:8px 0 15px}
+    .metric-bars{display:grid;gap:10px}
+    .metric-row{display:grid;grid-template-columns:95px 1fr 70px;gap:10px;align-items:center;font-size:.78rem}
+    .metric-track{height:10px;background:rgba(30,80,100,.09);border-radius:999px;overflow:hidden}
+    .metric-fill{height:100%;background:var(--cyan);border-radius:999px;transition:width .35s ease}
+    .micro{font-size:.76rem;line-height:1.5;color:var(--muted);margin:12px 0 0}
+    .ablation-switches{display:grid;gap:9px}
+    .ablation-switches label{display:flex;gap:9px;align-items:center;font-size:.84rem}
+    .ablation-meter{height:12px;border-radius:999px;background:rgba(30,80,100,.09);overflow:hidden;margin:16px 0}
+    .ablation-meter div{height:100%;width:14%;background:var(--cyan);transition:.25s}
+    .status-live{font-size:.66rem;font-weight:850;color:#21816b}
+    .status-list{display:grid;gap:0;margin:0}
+    .status-list div{display:flex;justify-content:space-between;gap:18px;padding:9px 0;border-bottom:1px solid var(--line)}
+    .status-list dt{color:var(--muted);font-size:.76rem}.status-list dd{margin:0;font-size:.79rem;font-weight:700;text-align:right}
+    .diff{margin:0;background:rgba(9,29,39,.94);color:#e9f5fa;padding:17px;border-radius:13px;line-height:1.8;overflow:auto;font-size:.8rem}
+    .diff .minus{color:#ff9b9b}.diff .plus{color:#8fe1b9}.diff .same{color:#d9e6ec}.diff .maybe{color:#f0cd7a}
+    .token-demo{display:flex;gap:8px}.token-demo input{flex:1;min-width:0}
+    .token-demo input,.token-demo button,.assistant-mode-select{
+      border:1px solid var(--glass-border);background:rgba(255,255,255,.35);color:var(--ink);border-radius:10px;padding:10px 12px
+    }
+    body.dark .token-demo input,body.dark .token-demo button,body.dark .assistant-mode-select{background:rgba(255,255,255,.045)}
+    .token-demo button{cursor:pointer;font-weight:750}
+    .token-path{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
+    .token-node{padding:9px 10px;border:1px solid var(--line);border-radius:10px;font-size:.74rem;opacity:.35;transform:translateY(4px);transition:.3s}
+    .token-node.on{opacity:1;transform:none;background:rgba(54,175,205,.08)}
+    .experts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
+    .expert{aspect-ratio:1;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;font-size:.72rem;font-weight:800;background:rgba(255,255,255,.2)}
+    .expert.hot{background:rgba(53,185,204,.18);box-shadow:inset 0 0 0 1px rgba(53,185,204,.18)}
+    .family-tree{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
+    .family-tree div{padding:12px;border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;gap:3px;min-width:105px}
+    .family-tree span{font-size:.7rem;color:var(--muted)}.family-tree i{color:var(--muted)}.family-tree .future{border-style:dashed}
+    .repro summary{cursor:pointer;font-weight:800}.repro-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
+    .repro-grid div{padding:12px;border:1px solid var(--line);border-radius:12px}.repro-grid b,.repro-grid span{display:block}.repro-grid span{font-size:.76rem;color:var(--muted);margin-top:4px}
+    .assistant-mode-select{font-size:.7rem;padding:6px 8px;margin-left:8px}
+    .assistant-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.assistant-actions button{padding:8px 10px;font-size:.72rem}
+    .modal-backdrop{position:fixed;inset:0;background:rgba(5,12,18,.38);backdrop-filter:blur(10px);z-index:300}
+    .modal-panel{position:fixed;left:50%;top:14%;transform:translateX(-50%);width:min(680px,calc(100% - 24px));z-index:310;background:var(--glass-strong);border:1px solid var(--glass-border);backdrop-filter:blur(30px) saturate(170%);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.22);padding:14px}
+    .palette input,.search-panel input{width:100%;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:12px;padding:14px;font-size:1rem;outline:0}
+    .palette-item,.search-result{padding:11px 12px;border-radius:10px;cursor:pointer;border-bottom:1px solid var(--line)}
+    .palette-item:hover,.palette-item.active,.search-result:hover{background:rgba(255,255,255,.28)}
+    .palette-help{font-size:.68rem;color:var(--muted);padding:9px 5px 2px}
+    .modal-title{display:flex;justify-content:space-between;align-items:center;font-weight:850;margin:2px 2px 12px}
+    .modal-title button{border:0;background:none;color:var(--ink);font-size:1.4rem;cursor:pointer}
+    .change-item{padding:12px 4px;border-top:1px solid var(--line)}.change-item b,.change-item span{display:block}.change-item span{color:var(--muted);font-size:.78rem;line-height:1.5;margin-top:4px}
+    .toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:400;background:#102b3a;color:white;border-radius:10px;padding:10px 14px;font-size:.78rem;transition:.2s}
+    .toast.show{opacity:1;transform:translate(-50%,0)}
+    .section-anchor{opacity:0;margin-left:8px;font-size:.7em;color:var(--muted);transition:.15s}.section-anchor:hover{opacity:1}h2:hover .section-anchor{opacity:.65}
+    mark.search-hit{background:rgba(255,222,91,.55);color:inherit;border-radius:3px}
+    body.paper-mode{background:#fff!important;color:#111!important}
+    body.paper-mode .ambient,body.paper-mode .quick-tools,body.paper-mode .nav-wrap{display:none!important}
+    body.paper-mode .hero-main,body.paper-mode .hero-side,body.paper-mode .stat-card,body.paper-mode .glass-card,body.paper-mode .callout,body.paper-mode .table-wrap,body.paper-mode .timeline-card,body.paper-mode .lab-card{background:white!important;box-shadow:none!important;backdrop-filter:none!important;border:1px solid #ddd!important}
+    body.paper-mode{--ink:#111;--muted:#555;--line:#ddd;--glass:#fff;--glass-border:#ddd}
+    body.no-glass *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
+    body.no-animations *{animation:none!important;transition:none!important}
+    body.no-radius *{border-radius:0!important}
+    body.no-css{font-family:serif!important;background:white!important;color:black!important}
+    body.no-css *{box-shadow:none!important;background:transparent!important;color:inherit!important;border-radius:0!important;backdrop-filter:none!important}
+    @media(max-width:760px){
+      .lab-grid{grid-template-columns:1fr}.span-2{grid-column:auto}.repro-grid{grid-template-columns:1fr}
+      .quick-tools{right:8px;bottom:8px}.quick-tools button{width:34px;height:34px}
+      .tm-scale{font-size:.55rem}.metric-row{grid-template-columns:78px 1fr 55px}.family-tree i{display:none}
+      .modal-panel{top:8%}
+    }
+    @media print{
+      .nav-wrap,.quick-tools,.ambient,.progress,.assistant-view,.hero-actions{display:none!important}
+      body{background:#fff!important}.hero-main,.hero-side,.stat-card,.glass-card,.callout,.table-wrap,.timeline-card,.lab-card{box-shadow:none!important;backdrop-filter:none!important;background:white!important}
+    }
+
 </style>
 </head>
 <body>
@@ -776,12 +875,21 @@
         <a href="#scale">2B scale-up</a>
         <a href="#t22">T2.2</a>
         <button class="nav-tab-btn" id="openAssistant" type="button">✦ AI Assistant</button>
+        <button class="nav-tab-btn" id="openPalette" type="button" title="Command palette">⌘K</button>
       </div>
       <button class="icon-btn" id="themeToggle" aria-label="Switch to dark mode" title="Switch appearance"><span id="themeIcon">☾</span></button>
     </nav>
   </div>
 
-  <header class="hero" id="top">
+  
+  <div class="quick-tools" aria-label="Research tools">
+    <button id="searchBtn" title="Search research">⌕</button>
+    <button id="paperModeBtn" title="Paper / print mode">▤</button>
+    <button id="ablateSiteBtn" title="Ablate the website">Δ</button>
+    <button id="changelogBtn" title="Changelog">↻</button>
+  </div>
+
+<header class="hero" id="top">
     <div class="hero-grid">
       <div class="hero-main">
         <div class="eyebrow"><span class="pulse-dot"></span> Ongoing independent ML research</div>
@@ -866,6 +974,7 @@
       <a href="#t22">11 — T2.2 direction</a>
       <a href="#vm">12 — Built-in VM idea</a>
       <a href="#science">13 — What is actually proven?</a>
+      <a href="#lab">14 — Interactive research lab</a>
     </aside>
 
     <main>
@@ -1417,13 +1526,108 @@
 
 
 
+
+      <section id="lab">
+        <div class="section-kicker">14 / Interactive research lab</div>
+        <h2>Explore the architecture</h2>
+        <p class="lead">Interactive views of the same measurements used in the research notes. Where a view is illustrative rather than measured, it is labelled as such.</p>
+
+        <div class="lab-grid">
+          <article class="lab-card span-2">
+            <div class="lab-head">
+              <div><span class="evidence observed">OBSERVED</span><h3>Checkpoint Time Machine</h3></div>
+              <span class="mono" id="tmLabel">Mini</span>
+            </div>
+            <input id="timeMachine" class="range" type="range" min="0" max="4" step="1" value="0" aria-label="Checkpoint">
+            <div class="tm-scale"><span>Mini</span><span>Nano 1k</span><span>Nano 4.36B</span><span>Nano 9.4B</span><span>2B 1.72B</span></div>
+            <div class="metric-bars" id="tmBars"></div>
+            <p class="micro" id="tmNote"></p>
+          </article>
+
+          <article class="lab-card">
+            <div class="lab-head"><div><span class="evidence ablation">ABLATION</span><h3>Ablation Playground</h3></div><span class="mono" id="ablCE">CE 2.7877</span></div>
+            <div class="ablation-switches">
+              <label><input type="checkbox" data-ablate="vault" checked> Vault</label>
+              <label><input type="checkbox" data-ablate="state" checked> Working State</label>
+              <label><input type="checkbox" data-ablate="procedure" checked> Procedure</label>
+              <label><input type="checkbox" data-ablate="delib" checked> Deliberation</label>
+            </div>
+            <div class="ablation-meter"><div id="ablFill"></div></div>
+            <p class="micro" id="ablText">All measured subsystems enabled.</p>
+          </article>
+
+          <article class="lab-card">
+            <div class="lab-head"><div><span class="evidence observed">OBSERVED</span><h3>Experiment status</h3></div><span class="status-live">● RUNNING</span></div>
+            <dl class="status-list">
+              <div><dt>Model</dt><dd>~2B T2.1</dd></div>
+              <div><dt>Target</dt><dd>99,999,907,840 tokens</dd></div>
+              <div><dt>Hardware</dt><dd>8× H200</dd></div>
+              <div><dt>Throughput</dt><dd>~160–167k tok/s</dd></div>
+              <div><dt>Latest supplied point</dt><dd>~1.72B tokens</dd></div>
+            </dl>
+            <p class="micro">Static snapshot from the supplied research notes. Ready to swap for a live telemetry endpoint later.</p>
+          </article>
+
+          <article class="lab-card span-2">
+            <div class="lab-head"><div><span class="evidence planned">PLANNED</span><h3>T2.1 → T2.2 architecture diff</h3></div></div>
+            <pre class="diff"><span class="minus">- Knowledge Vault (explicit persistent memory)</span>
+<span class="plus">+ More Procedure capacity</span>
+<span class="plus">+ Mid-sized Working State budget</span>
+<span class="same">  Recurrent/shared computation</span>
+<span class="same">  Recurrent deliberation</span>
+<span class="same">  State-conditioned routing</span>
+<span class="maybe">? Deterministic VM / exact-compute path</span></pre>
+          </article>
+
+          <article class="lab-card span-2">
+            <div class="lab-head"><div><span class="evidence illustrative">ILLUSTRATIVE</span><h3>Inside one token</h3></div></div>
+            <div class="token-demo">
+              <input id="tokenInput" value="The capital of France is" aria-label="Illustrative token prompt">
+              <button id="runToken">Run illustrative trace</button>
+            </div>
+            <div class="token-path" id="tokenPath"></div>
+            <p class="micro">This animation is a conceptual walkthrough, not a recorded causal trace from a live checkpoint.</p>
+          </article>
+
+          <article class="lab-card">
+            <div class="lab-head"><div><span class="evidence observed">OBSERVED</span><h3>Procedure Bank visualizer</h3></div><select id="bankSelect" aria-label="Procedure bank"></select></div>
+            <div class="experts" id="experts"></div>
+            <p class="micro" id="bankNote"></p>
+          </article>
+
+          <article class="lab-card">
+            <div class="lab-head"><div><span class="evidence observed">OBSERVED</span><h3>Model family tree</h3></div></div>
+            <div class="family-tree">
+              <div><b>Mini</b><span>219.1M</span></div><i>→</i>
+              <div><b>Nano T2.1</b><span>134.7M</span></div><i>→</i>
+              <div><b>2B T2.1</b><span>~2B</span></div><i>→</i>
+              <div class="future"><b>T2.2</b><span>designing</span></div>
+            </div>
+          </article>
+
+          <article class="lab-card span-2">
+            <details class="repro">
+              <summary>Reproducibility drawer</summary>
+              <div class="repro-grid">
+                <div><b>Data</b><span>Nano: 50B tokens; 60% general, 20% math, 20% code</span></div>
+                <div><b>2B target</b><span>99,999,907,840 tokens</span></div>
+                <div><b>Hardware</b><span>8× NVIDIA H200</span></div>
+                <div><b>Tokens/update</b><span>114,688</span></div>
+                <div><b>Reported throughput</b><span>~160k–167k tokens/s</span></div>
+                <div><b>Scientific caveat</b><span>Inference ablations show checkpoint dependence, not matched-training superiority.</span></div>
+              </div>
+            </details>
+          </article>
+        </div>
+      </section>
+
     </main>
   </div>
 
   <section id="ask-orion" class="assistant-view" aria-hidden="true">
         <div class="assistant-view-head">
           <button class="back-blog" id="backToBlog" type="button">← Research blog</button>
-          <div class="section-kicker">AI / Interactive architecture guide</div>
+          <div class="section-kicker">AI Assistant / Interactive architecture guide</div>
         </div>
         <h2>Ask our pattern-matching chatbot</h2>
         <p class="lead">
@@ -1439,6 +1643,10 @@
               <div class="bot-id">
                 <div class="bot-orb" aria-hidden="true"></div>
                 <div><strong>Prism Pattern Matcher</strong><span>Local research guide · no server required</span></div>
+                <select id="assistantMode" class="assistant-mode-select" title="Assistant mode">
+                  <option value="pattern">Pattern Matcher</option>
+                  <option value="orion" disabled>Orion 2B · connect later</option>
+                </select>
               </div>
               <div class="online-pill">● READY</div>
             </div>
@@ -1466,6 +1674,11 @@
               <div class="fun-tile"><strong>🧪 Research mode</strong>Will say when the current notes do not support an answer.</div>
             </div>
 
+            <div class="assistant-actions">
+              <button id="researchModeBtn">Research mode: OFF</button>
+              <button id="exportChatBtn">Export Markdown</button>
+              <button id="shareChatBtn">Copy share link</button>
+            </div>
             <div class="bot-disclaimer">
               Pattern-matching assistant, not a hosted LLM. It can handle varied/rephrased architecture questions by
               retrieving and combining relevant project facts, but it does not invent new experimental results.
@@ -1689,7 +1902,212 @@
         chatInput.style.height=Math.min(chatInput.scrollHeight,130)+'px';
       });
       document.querySelectorAll('.suggestion').forEach(btn=>btn.addEventListener('click',()=>ask(btn.textContent)));
+
+      // ---------- Reading time, anchors, search corpus ----------
+      const articleText = [...document.querySelectorAll('main section')].map(x=>x.innerText).join(' ');
+      const words = articleText.trim().split(/\s+/).length;
+      const reading = document.getElementById('readingTime');
+      if(reading) reading.textContent = Math.max(1, Math.round(words/220)) + ' min read';
+
+      document.querySelectorAll('main section h2').forEach(h=>{
+        const sec=h.closest('section'); if(!sec || !sec.id) return;
+        const a=document.createElement('a'); a.href='#'+sec.id; a.className='section-anchor'; a.textContent='¶'; a.title='Copy section link';
+        a.addEventListener('click',e=>{ e.preventDefault(); history.replaceState(null,'','#'+sec.id); navigator.clipboard?.writeText(location.href); showToast('Section link copied'); });
+        h.appendChild(a);
+      });
+
+      const searchDocs=[...document.querySelectorAll('main section')].map(sec=>({
+        id:sec.id, title:sec.querySelector('h2')?.childNodes[0]?.textContent?.trim() || sec.id, text:sec.innerText
+      }));
+
+      // ---------- Checkpoint Time Machine ----------
+      const checkpoints=[
+        {name:'Mini', note:'Mini checkpoint: Working State was the strongest observed dependency; Vault evidence was weak/mixed.', vals:{Vault:.2,State:9.0,Procedure:0,Deliberation:1.6}},
+        {name:'Nano · ~1k steps', note:'Procedure mattered almost immediately, while State and Vault were still small.', vals:{Vault:.0012,State:.0332,Procedure:2.9562,Deliberation:.0806}},
+        {name:'Nano · 4.36B', note:'Working State had become a major dependency by this point.', vals:{Vault:.1622,State:4.4783,Procedure:5.8667,Deliberation:.6068}},
+        {name:'Nano · 9.4B', note:'Procedure and State were both strongly important; Vault remained much smaller.', vals:{Vault:.2111,State:6.1979,Procedure:6.6810,Deliberation:1.0009}},
+        {name:'2B · 1.72B', note:'Early 2B checkpoint: Procedure dominated the measured ablation effect.', vals:{Vault:0,State:.8092,Procedure:13.8884,Deliberation:.4310}}
+      ];
+      const tm=document.getElementById('timeMachine'), tmBars=document.getElementById('tmBars'), tmLabel=document.getElementById('tmLabel'), tmNote=document.getElementById('tmNote');
+      function renderTM(){
+        const c=checkpoints[+tm.value]; tmLabel.textContent=c.name; tmNote.textContent=c.note; tmBars.innerHTML='';
+        const max=Math.max(...Object.values(c.vals),1);
+        Object.entries(c.vals).forEach(([k,v])=>{
+          const r=document.createElement('div'); r.className='metric-row';
+          r.innerHTML=`<b>${k}</b><div class="metric-track"><div class="metric-fill" style="width:${Math.max(1,v/max*100)}%"></div></div><span class="mono">${v===0?'≈0':v.toFixed(v<1?3:2)}</span>`;
+          tmBars.appendChild(r);
+        });
+      }
+      tm?.addEventListener('input',renderTM); if(tm) renderTM();
+
+      // ---------- Ablation playground ----------
+      const baseCE=2.7877, deltas={vault:-.0030,state:.8092,procedure:13.8884,delib:.4310};
+      function renderAblation(){
+        let ce=baseCE, removed=[];
+        document.querySelectorAll('[data-ablate]').forEach(x=>{ if(!x.checked){ce+=deltas[x.dataset.ablate];removed.push(x.parentElement.textContent.trim())} });
+        document.getElementById('ablCE').textContent='CE '+ce.toFixed(4);
+        document.getElementById('ablFill').style.width=Math.min(100,Math.max(5,ce/17*100))+'%';
+        document.getElementById('ablText').textContent=removed.length ? 'Disabled: '+removed.join(', ')+'. This is a simple composition of the supplied single-subsystem deltas, not a measured multi-ablation result.' : 'All measured subsystems enabled.';
+      }
+      document.querySelectorAll('[data-ablate]').forEach(x=>x.addEventListener('change',renderAblation));
+
+      // ---------- Token walkthrough ----------
+      const tokenPath=document.getElementById('tokenPath');
+      const tokenSteps=['Embedding','Cortex','Procedure B0 · maybe NULL','Working State write','Deeper Cortex','Procedure B4','Deliberation','Next-token logits'];
+      function resetToken(){ tokenPath.innerHTML=''; tokenSteps.forEach(t=>{const n=document.createElement('div');n.className='token-node';n.textContent=t;tokenPath.appendChild(n)}); }
+      resetToken();
+      document.getElementById('runToken')?.addEventListener('click',()=>{
+        resetToken(); [...tokenPath.children].forEach((n,i)=>setTimeout(()=>n.classList.add('on'),i*220));
+      });
+
+      // ---------- Procedure visualizer ----------
+      const bankNull=[.943,.853,.720,.620,.441,.534], bankSelect=document.getElementById('bankSelect'), experts=document.getElementById('experts'), bankNote=document.getElementById('bankNote');
+      if(bankSelect){
+        bankNull.forEach((v,i)=>{const o=document.createElement('option');o.value=i;o.textContent='Bank B'+i;bankSelect.appendChild(o)});
+        function renderBank(){
+          const b=+bankSelect.value, active=1-bankNull[b]; experts.innerHTML='';
+          for(let i=0;i<12;i++){ const e=document.createElement('div'); e.className='expert '+(i<Math.round(active*12)?'hot':''); e.textContent='E'+i; e.title='Illustrative expert activity display'; experts.appendChild(e); }
+          bankNote.textContent=`Observed soft-NULL probability for B${b}: ${bankNull[b].toFixed(3)}. Expert highlights are illustrative; the supplied notes only establish zero dead experts and bank-level NULL usage.`;
+        }
+        bankSelect.addEventListener('change',renderBank); renderBank();
+      }
+
+      // ---------- Modal / palette / search ----------
+      const backdrop=document.getElementById('modalBackdrop'), palette=document.getElementById('commandPalette'), searchPanel=document.getElementById('searchPanel'), changelogPanel=document.getElementById('changelogPanel');
+      const modalPanels=[palette,searchPanel,changelogPanel];
+      function closeModals(){modalPanels.forEach(x=>x.hidden=true);backdrop.hidden=true}
+      function openModal(el){closeModals();el.hidden=false;backdrop.hidden=false;setTimeout(()=>el.querySelector('input')?.focus(),30)}
+      backdrop.addEventListener('click',closeModals); document.querySelectorAll('[data-close-modal]').forEach(b=>b.addEventListener('click',closeModals));
+      document.addEventListener('keydown',e=>{if(e.key==='Escape')closeModals()});
+
+      const commands=[
+        {label:'Open AI Assistant',action:()=>setView('assistant')},
+        {label:'Go to current 2B experiment',action:()=>location.hash='scale'},
+        {label:'Open interactive research lab',action:()=>location.hash='lab'},
+        {label:'Toggle dark mode',action:()=>toggle.click()},
+        {label:'Toggle paper mode',action:()=>document.body.classList.toggle('paper-mode')},
+        {label:'Search research',action:()=>openModal(searchPanel)},
+        {label:'Print / save PDF',action:()=>window.print()},
+        {label:'Download RSS snapshot',action:downloadRSS}
+      ];
+      searchDocs.forEach(d=>commands.push({label:'Section: '+d.title,action:()=>location.hash=d.id}));
+      const palInput=document.getElementById('paletteInput'), palResults=document.getElementById('paletteResults');
+      function renderPalette(){
+        const q=(palInput.value||'').toLowerCase(); palResults.innerHTML='';
+        commands.filter(c=>c.label.toLowerCase().includes(q)).slice(0,10).forEach((c,i)=>{
+          const el=document.createElement('div');el.className='palette-item';el.textContent=c.label;el.onclick=()=>{closeModals();c.action()};palResults.appendChild(el)
+        });
+      }
+      palInput.addEventListener('input',renderPalette);
+      document.getElementById('openPalette')?.addEventListener('click',()=>{openModal(palette);renderPalette()});
+      document.addEventListener('keydown',e=>{if((e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==='k'){e.preventDefault();openModal(palette);renderPalette()}});
+
+      const siteSearchInput=document.getElementById('siteSearchInput'), siteSearchResults=document.getElementById('siteSearchResults');
+      function renderSearch(){
+        const q=siteSearchInput.value.trim().toLowerCase();siteSearchResults.innerHTML=''; if(q.length<2)return;
+        searchDocs.map(d=>({...d,score:(d.title.toLowerCase().includes(q)?4:0)+(d.text.toLowerCase().match(new RegExp(q.replace(/[.*+?^${}()|[\]\\]/g,'\\$&'),'g'))||[]).length}))
+          .filter(x=>x.score>0).sort((a,b)=>b.score-a.score).slice(0,12).forEach(d=>{
+            const el=document.createElement('div');el.className='search-result';el.innerHTML=`<b>${d.title}</b><div class="micro">${d.text.slice(0,150).replace(/\s+/g,' ')}…</div>`;
+            el.onclick=()=>{closeModals();setView('blog',false);location.hash=d.id};siteSearchResults.appendChild(el)
+          });
+      }
+      siteSearchInput.addEventListener('input',renderSearch);
+      document.getElementById('searchBtn')?.addEventListener('click',()=>openModal(searchPanel));
+      document.getElementById('changelogBtn')?.addEventListener('click',()=>openModal(changelogPanel));
+
+      // ---------- Paper mode + website self-ablation ----------
+      document.getElementById('paperModeBtn')?.addEventListener('click',()=>document.body.classList.toggle('paper-mode'));
+      let ablationStage=0;
+      const siteAblations=[
+        {cls:'no-glass',msg:'ΔGlass: backdrop blur removed.'},
+        {cls:'no-animations',msg:'ΔAnimations: motion removed.'},
+        {cls:'no-radius',msg:'ΔRadius: rounded corners removed.'},
+        {cls:'no-css',msg:'ΔCSS: website has entered the Times New Roman dimension.'}
+      ];
+      document.getElementById('ablateSiteBtn')?.addEventListener('click',()=>{
+        if(ablationStage>=siteAblations.length){
+          siteAblations.forEach(x=>document.body.classList.remove(x.cls));ablationStage=0;showToast('Website restored. CSS pathway recovered.');return;
+        }
+        const a=siteAblations[ablationStage++];document.body.classList.add(a.cls);showToast(a.msg+(ablationStage===4?' The website is extraordinarily dependent on its CSS pathway.':''));
+      });
+
+      // ---------- Assistant research mode / export / share ----------
+      let researchMode=false;
+      const researchBtn=document.getElementById('researchModeBtn');
+      researchBtn?.addEventListener('click',()=>{researchMode=!researchMode;researchBtn.textContent='Research mode: '+(researchMode?'ON':'OFF')});
+      const oldCompose=composeAnswer;
+      composeAnswer=function(question){
+        const a=oldCompose(question);
+        if(!researchMode)return a;
+        return `OBSERVATION\n${a}\n\nINTERPRETATION\nThis answer is assembled from the supplied Orion research notes and their repeated qualitative patterns.\n\nLIMITATION\nInference-time ablations establish checkpoint dependence; matched retrained controls are still needed for stronger architecture-level claims.`;
+      };
+      document.getElementById('exportChatBtn')?.addEventListener('click',()=>{
+        const rows=[...document.querySelectorAll('#chatWindow .msg')].map(m=>(m.classList.contains('user')?'## You':'## Prism')+'\n'+m.innerText.trim()).join('\n\n');
+        const blob=new Blob(['# Orion Assistant Conversation\n\n'+rows],{type:'text/markdown'});const a=document.createElement('a');a.href=URL.createObjectURL(blob);a.download='orion-chat.md';a.click();URL.revokeObjectURL(a.href);
+      });
+      document.getElementById('shareChatBtn')?.addEventListener('click',()=>{history.replaceState(null,'','#assistant');navigator.clipboard?.writeText(location.href);showToast('Assistant link copied')});
+
+      // slash commands
+      const originalAsk=ask;
+      ask=function(text){
+        const t=text.trim();
+        if(t.startsWith('/')){
+          const map={'/architecture':'What is the current Orion architecture?','/ablations':'What have the ablations shown?','/training':'How is the current 2B run training?','/t22':'What is planned for T2.2?'};
+          if(map[t.toLowerCase()]) return originalAsk(map[t.toLowerCase()]);
+        }
+        if(/are you conscious/i.test(t)){addMessage(t,'user');setTimeout(()=>addMessage('bro I am currently JavaScript pattern matching 😭','bot'),180);chatInput.value='';return}
+        return originalAsk(text);
+      };
+
+      // ---------- RSS snapshot ----------
+      function downloadRSS(){
+        const items=searchDocs.slice(0,8).map(d=>`<item><title>${escapeXML(d.title)}</title><description>${escapeXML(d.text.slice(0,280))}</description><guid>#${d.id}</guid></item>`).join('');
+        const xml=`<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"><channel><title>Orion / Project Prism Research Notes</title><description>Transformer 2 research updates</description><link>${escapeXML(location.href)}</link>${items}</channel></rss>`;
+        const blob=new Blob([xml],{type:'application/rss+xml'});const a=document.createElement('a');a.href=URL.createObjectURL(blob);a.download='orion-research.xml';a.click();URL.revokeObjectURL(a.href);
+      }
+      function escapeXML(x){return String(x).replace(/[<>&'"]/g,c=>({'<':'&lt;','>':'&gt;','&':'&amp;',"'":'&apos;','"':'&quot;'}[c]))}
+
+      // ---------- Toast ----------
+      let toastTimer;
+      function showToast(msg){const t=document.getElementById('toast');t.textContent=msg;t.classList.add('show');clearTimeout(toastTimer);toastTimer=setTimeout(()=>t.classList.remove('show'),2200)}
+
+      // ---------- Keyboard section navigation ----------
+      document.addEventListener('keydown',e=>{
+        if(['INPUT','TEXTAREA','SELECT'].includes(document.activeElement.tagName))return;
+        if(e.key==='j'||e.key==='k'){
+          const secs=[...document.querySelectorAll('main section')]; const y=scrollY+160;
+          let idx=secs.findIndex(x=>x.offsetTop>y); if(idx<0)idx=secs.length;
+          if(e.key==='k') idx=Math.max(0,idx-2); else idx=Math.min(secs.length-1,idx);
+          secs[idx]?.scrollIntoView({behavior:'smooth'});
+        }
+      });
+
     })();
   </script>
+
+  <div class="modal-backdrop" id="modalBackdrop" hidden></div>
+
+  <div class="palette modal-panel" id="commandPalette" hidden role="dialog" aria-modal="true" aria-label="Command palette">
+    <input id="paletteInput" placeholder="Search sections or run a command…" autocomplete="off">
+    <div id="paletteResults"></div>
+    <div class="palette-help">↑↓ navigate · Enter open · Esc close · Ctrl/⌘ K toggle</div>
+  </div>
+
+  <div class="modal-panel search-panel" id="searchPanel" hidden role="dialog" aria-modal="true">
+    <div class="modal-title">Search research <button data-close-modal>×</button></div>
+    <input id="siteSearchInput" placeholder="Search the blog…" autocomplete="off">
+    <div id="siteSearchResults"></div>
+  </div>
+
+  <div class="modal-panel changelog-panel" id="changelogPanel" hidden role="dialog" aria-modal="true">
+    <div class="modal-title">Changelog <button data-close-modal>×</button></div>
+    <div class="change-item"><b>v4 · Interactive Lab</b><span>Checkpoint time machine, ablation playground, family tree, token walkthrough, procedure visualizer, search, command palette, paper mode, self-ablation.</span></div>
+    <div class="change-item"><b>v3 · Assistant view</b><span>Separate AI tab, responsive mobile layout, persistent dark mode.</span></div>
+    <div class="change-item"><b>v2 · Pattern Matcher</b><span>Local architecture Q&A with evidence-aware retrieval.</span></div>
+    <div class="change-item"><b>v1 · Research Blog</b><span>Original Orion/T2 research notes site.</span></div>
+  </div>
+
+  <div class="toast" id="toast" role="status" aria-live="polite"></div>
+
 </body>
 </html>