Upload index.html

index.html

@@ -657,20 +657,69 @@
     body.dark .fun-tile{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.075)}
     .fun-tile strong{display:block;margin-bottom:3px;font-size:.82rem}
 
+
+    .nav-tab-btn,.back-blog{
+      border:1px solid var(--glass-border);cursor:pointer;color:var(--ink);
+      background:rgba(255,255,255,.34);font-weight:750;
+      box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
+    }
+    .nav-tab-btn{padding:10px 13px;border-radius:14px;font-size:.82rem;margin-left:4px}
+    .nav-tab-btn:hover,.back-blog:hover{background:rgba(255,255,255,.58)}
+    body.dark .nav-tab-btn,body.dark .back-blog{background:rgba(255,255,255,.045)}
+    body.dark .nav-tab-btn:hover,body.dark .back-blog:hover{background:rgba(255,255,255,.08)}
+    .assistant-view{
+      display:none;
+      width:min(calc(100% - 34px),var(--content));
+      margin:54px auto 80px;
+      min-height:calc(100vh - 180px);
+    }
+    body.assistant-mode .assistant-view{display:block}
+    body.assistant-mode .hero,
+    body.assistant-mode > .stats,
+    body.assistant-mode > .layout,
+    body.assistant-mode > footer{display:none}
+    .assistant-view-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
+    .back-blog{padding:10px 14px;border-radius:14px}
+    body.assistant-mode .nav-wrap{position:sticky}
+    body.assistant-mode .ask-shell{max-width:980px;margin:24px auto 0}
+    body.assistant-mode .assistant-view > h2,
+    body.assistant-mode .assistant-view > p{max-width:980px;margin-left:auto;margin-right:auto}
+    body.assistant-mode .assistant-view-head{max-width:980px;margin-left:auto;margin-right:auto}
+    .desktop-only{display:inline}
+
     .mobile-menu{display:none}
 
     @media (max-width: 980px){
+      :root{--blur:22px}
       .hero-grid{grid-template-columns:1fr}
       .hero-side{min-height:0}
       .stats{grid-template-columns:repeat(2,1fr)}
       .layout{grid-template-columns:1fr}
       .toc{display:none}
       .flow{grid-template-columns:repeat(2,1fr)}
-      .nav-links{display:none}
+      .nav-links a{display:none}
+      .nav-links{display:flex}
+      .nav-tab-btn{margin:0}
       .mobile-menu{display:block}
     }
 
     @media (max-width: 640px){
+      .nav-wrap{top:8px;margin-top:8px;width:calc(100% - 16px)}
+      .nav{min-height:58px;border-radius:20px}
+      .brand-mark{width:34px;height:34px}
+      .icon-btn{width:38px;height:38px;border-radius:13px}
+      .nav-tab-btn{padding:9px 10px;font-size:.74rem}
+      .hero{margin-top:38px;width:calc(100% - 20px)}
+      .layout,.stats,footer{width:calc(100% - 20px)}
+      .assistant-view{width:calc(100% - 20px);margin-top:32px}
+      .ask-inner{padding:12px;border-radius:26px}
+      .ask-shell{border-radius:27px}
+      .chat-window{height:56vh;min-height:360px;padding:12px;border-radius:20px}
+      .bubble{max-width:91%;font-size:.86rem}
+      .ask-top{align-items:flex-start}
+      .online-pill{font-size:.6rem}
+      .fun-strip{display:none}
+      .composer{position:sticky;bottom:8px;z-index:5}
       .hero{margin-top:48px}
       .hero-main{padding:34px 24px 30px;border-radius:28px}
       .hero-side{border-radius:28px}
@@ -689,6 +738,13 @@
       section{margin-bottom:58px}
     }
 
+    @media (min-width: 1500px){
+      :root{--content:1320px}
+      .layout{grid-template-columns:280px minmax(0,1fr);gap:42px}
+      .hero-main{padding:62px}
+      .chat-window{height:520px}
+    }
+
     @media (prefers-reduced-motion: reduce){
       *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
     }
@@ -715,9 +771,9 @@
         <a href="#nano">Nano</a>
         <a href="#scale">2B scale-up</a>
         <a href="#t22">T2.2</a>
-        <a href="#ask-orion">Ask Orion</a>
+        <button class="nav-tab-btn" id="openAssistant" type="button">✦ AI Assistant</button>
       </div>
-      <button class="icon-btn" id="themeToggle" aria-label="Toggle theme" title="Toggle theme">◐</button>
+      <button class="icon-btn" id="themeToggle" aria-label="Switch to dark mode" title="Switch appearance"><span id="themeIcon">☾</span></button>
     </nav>
   </div>
 
@@ -806,7 +862,6 @@
       <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="#ask-orion">14 — Ask our chatbot</a>
     </aside>
 
     <main>
@@ -1356,8 +1411,16 @@
         </div>
       </section>
 
-      <section id="ask-orion">
-        <div class="section-kicker">14 / Interactive architecture guide</div>
+
+
+    </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>
         <h2>Ask our pattern-matching chatbot</h2>
         <p class="lead">
           Ask about Orion, T2.1, the ablations, Procedure Banks, Working State, the Vault, training data,
@@ -1405,10 +1468,7 @@
             </div>
           </div>
         </div>
-      </section>
-
-    </main>
-  </div>
+  </section>
 
   <footer>
     <div><strong>Orion / Project Prism</strong> · Transformer 2 research notes</div>
@@ -1423,14 +1483,21 @@
       const tocLinks = [...document.querySelectorAll('.toc a')];
       const sections = [...document.querySelectorAll('main section')];
 
-      const saved = localStorage.getItem('orion-theme');
-      if (saved === 'dark' || (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-        body.classList.add('dark');
-      }
-
+      const themeIcon = document.getElementById('themeIcon');
+      const safeGetTheme = () => { try { return localStorage.getItem('orion-theme'); } catch(e) { return null; } };
+      const safeSetTheme = v => { try { localStorage.setItem('orion-theme', v); } catch(e) {} };
+      const applyTheme = dark => {
+        body.classList.toggle('dark', dark);
+        themeIcon.textContent = dark ? '☀︎' : '☾';
+        toggle.setAttribute('aria-label', dark ? 'Switch to light mode' : 'Switch to dark mode');
+        document.querySelector('meta[name="theme-color"]').setAttribute('content', dark ? '#08131c' : '#eaf8ff');
+      };
+      const saved = safeGetTheme();
+      applyTheme(saved ? saved === 'dark' : window.matchMedia('(prefers-color-scheme: dark)').matches);
       toggle.addEventListener('click', () => {
-        body.classList.toggle('dark');
-        localStorage.setItem('orion-theme', body.classList.contains('dark') ? 'dark' : 'light');
+        const next = !body.classList.contains('dark');
+        applyTheme(next);
+        safeSetTheme(next ? 'dark' : 'light');
       });
 
       const updateScroll = () => {
@@ -1449,6 +1516,23 @@
       window.addEventListener('scroll', updateScroll, {passive:true});
       updateScroll();
 
+      const openAssistant = document.getElementById('openAssistant');
+      const backToBlog = document.getElementById('backToBlog');
+      const assistantView = document.getElementById('ask-orion');
+      function setView(mode, push=true){
+        const assistant = mode === 'assistant';
+        body.classList.toggle('assistant-mode', assistant);
+        assistantView.setAttribute('aria-hidden', assistant ? 'false' : 'true');
+        document.title = assistant ? 'AI Assistant — Orion / Project Prism' : 'Orion / Project Prism — Transformer 2 Research Blog';
+        if(push) history.pushState({view:mode},'',assistant ? '#assistant' : '#top');
+        window.scrollTo({top:0,behavior:'smooth'});
+      }
+      openAssistant.addEventListener('click',()=>setView('assistant'));
+      backToBlog.addEventListener('click',()=>setView('blog'));
+      window.addEventListener('popstate',()=>setView(location.hash === '#assistant' ? 'assistant' : 'blog',false));
+      if(location.hash === '#assistant') setView('assistant',false);
+
+
       const observer = new IntersectionObserver(entries => {
         entries.forEach(entry => {
           if (!entry.isIntersecting) return;