Spaces:

Testing347
/

Copy-ava-testing

Running

App Files Files Community

Testing347 commited on Dec 21, 2025

Commit

0ab2956

verified ·

1 Parent(s): 30e60a2

Update index.html

Browse files

Files changed (1) hide show

index.html +1040 -1

index.html CHANGED Viewed

	@@ -1 +1,1040 @@
1	- ~~Restore~~ ~~index.~~html ~~from commit 5c3088c~~

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <title>SILENTPATTERN · Super Intelligence Lab</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <!-- Tailwind (CDN build, fine for Spaces static) -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Font Awesome for icons -->
+    <script src="https://kit.fontawesome.com/a2b5c2de3d.js" crossorigin="anonymous"></script>
+    <!-- Vanta + Three.js (background) -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
+    <style>
+        :root {
+            color-scheme: dark;
+        }
+        body {
+            margin: 0;
+            min-height: 100vh;
+            font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
+                "Segoe UI", sans-serif;
+            background: radial-gradient(circle at 0% 0%, #0f172a, #020617 40%, #020617);
+        }
+        /* Prevent layout shift while Vanta loads */
+        #vanta-bg {
+            opacity: 0;
+            transition: opacity 600ms ease;
+        }
+        .vanta-ready #vanta-bg {
+            opacity: 1;
+        }
+        /* Orb animation */
+        @keyframes orb-breathe {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.08); }
+            100% { transform: scale(1); }
+        }
+        @keyframes orb-glow {
+            0% { box-shadow: 0 0 18px rgba(129, 140, 248, 0.25); }
+            50% { box-shadow: 0 0 36px rgba(236, 72, 153, 0.55); }
+            100% { box-shadow: 0 0 18px rgba(129, 140, 248, 0.25); }
+        }
+        .conscious-orb {
+            animation: orb-breathe 2.5s ease-in-out infinite,
+                       orb-glow 1.5s ease-in-out infinite;
+            filter: drop-shadow(0 0 40px #a21cafee) brightness(1.12);
+        }
+        /* Site-wide consistency styles */
+        .focus-ring:focus {
+            outline: none;
+            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.9);
+        }
+        .thin-scroll {
+            scrollbar-width: thin;
+            scrollbar-color: #4f46e5 #1e1b4b;
+        }
+        .thin-scroll::-webkit-scrollbar {
+            width: 6px;
+        }
+        .thin-scroll::-webkit-scrollbar-track {
+            background: #0b1120;
+        }
+        .thin-scroll::-webkit-scrollbar-thumb {
+            background-color: #4f46e5;
+            border-radius: 9999px;
+        }
+        /* Modal backdrop */
+        .modal-backdrop {
+            background: radial-gradient(circle at top, rgba(129, 140, 248, 0.32), transparent 60%),
+                        rgba(2, 6, 23, 0.92);
+        }
+        /* Lab Navigator slide-in */
+        #lab-nav-overlay[data-open="true"] {
+            opacity: 1;
+            pointer-events: auto;
+        }
+        #lab-nav-panel[data-open="true"] {
+            transform: translateX(0);
+        }
+        #lab-nav-overlay,
+        #lab-nav-panel {
+            transition: all 220ms ease-out;
+        }
+    </style>
+</head>
+<body class="text-slate-100 antialiased">
+<!-- Vanta background -->
+<div id="vanta-bg" class="fixed inset-0 z-0"></div>
+<div class="relative z-10 min-h-screen flex flex-col">
+    <!-- NAVIGATION BAR -->
+    <nav class="relative z-10 py-6 px-6 lg:px-10 flex justify-between items-center backdrop-blur-sm">
+        <!-- Logo + mini orb -->
+        <div id="conscious-orb-container" class="flex items-center space-x-2">
+            <div class="w-9 h-9 rounded-full bg-indigo-600 flex items-center justify-center conscious-orb">
+                <div class="w-2.5 h-2.5 rounded-full bg-white animate-pulse"></div>
+            </div>
+            <span class="text-lg sm:text-xl font-semibold tracking-wide">
+                SILENTPATTERN
+            </span>
+        </div>
+        <!-- Links (desktop) -->
+        <div class="hidden md:flex space-x-7 text-sm font-medium">
+            <a href="capabilities.html" class="hover:text-indigo-400 transition">Capabilities</a>
+            <a href="consciousness.html" class="hover:text-indigo-400 transition">Consciousness</a>
+            <a href="chat.html" class="hover:text-indigo-400 transition">Chat</a>
+            <a href="about.html" class="hover:text-indigo-400 transition">About</a>
+        </div>
+        <!-- Right-hand controls -->
+        <div class="flex items-center space-x-3">
+            <!-- Lab Navigator trigger glyph -->
+            <button id="lab-nav-trigger"
+                    class="w-9 h-9 rounded-full border border-indigo-400/40 bg-slate-900/50 hover:bg-slate-900 focus-ring flex items-center justify-center"
+                    aria-label="Open Lab Navigator">
+                <i class="fas fa-asterisk text-indigo-300 text-sm"></i>
+            </button>
+            <!-- Access button -->
+            <button id="access-btn"
+                    class="hidden sm:inline-flex px-5 py-2 rounded-full bg-gradient-to-r from-indigo-600 to-purple-600 hover:opacity-90 text-sm font-medium">
+                Access
+            </button>
+        </div>
+    </nav>
+    <!-- MAIN CONTENT -->
+    <main class="flex-1 px-6 lg:px-10 pb-16 pt-4">
+        <div class="max-w-6xl mx-auto grid gap-10 lg:grid-cols-2 items-stretch">
+            <!-- Left: Hero copy -->
+            <section class="space-y-6">
+                <p class="text-xs uppercase tracking-[0.25em] text-indigo-300/80">
+                    Super Intelligence Research Lab
+                </p>
+                <h1 class="text-3xl sm:text-4xl lg:text-5xl font-semibold leading-tight">
+                    A minimal public interface
+                    <span class="text-indigo-300">to a maximal mind.</span>
+                </h1>
+                <p class="text-sm sm:text-base text-slate-300/90 max-w-xl">
+                    SILENTPATTERN is an applied research environment for high-alignment,
+                    high-capability systems. The public surface is intentionally small;
+                    research depth is opened by explicit request and audit.
+                </p>
+                <div class="grid gap-4 sm:grid-cols-2 text-sm">
+                    <div class="rounded-xl border border-slate-800 bg-slate-950/60 p-4 space-y-1.5">
+                        <p class="font-medium text-slate-100 flex items-center gap-2">
+                            <span class="inline-flex h-1.5 w-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
+                            Operational Programs
+                        </p>
+                        <ul class="text-slate-400 text-xs space-y-0.5">
+                            <li>• MCAP – Mechanistic Certificates</li>
+                            <li>• CHAI-Ω² – Market physics</li>
+                            <li>• Quantum Lambda – Decision gradients</li>
+                        </ul>
+                    </div>
+                    <div class="rounded-xl border border-slate-800 bg-slate-950/60 p-4 space-y-1.5">
+                        <p class="font-medium text-slate-100">Safety & Governance</p>
+                        <ul class="text-slate-400 text-xs space-y-0.5">
+                            <li>• System card & evaluations</li>
+                            <li>• Human-in-the-loop checkpoints</li>
+                            <li>• Immutable experiment logs</li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="flex flex-wrap gap-3 text-sm">
+                    <button id="hero-access-btn"
+                            class="px-5 py-2.5 rounded-full bg-gradient-to-r from-indigo-600 to-purple-600 hover:opacity-90 font-medium">
+                        Request Access
+                    </button>
+                    <button id="hero-lab-btn"
+                            class="px-5 py-2.5 rounded-full border border-slate-700 bg-slate-950/60 hover:bg-slate-900/70">
+                        Open Lab Navigator
+                    </button>
+                </div>
+            </section>
+            <!-- Right: Chat + consciousness card -->
+            <section class="space-y-5">
+                <!-- Chat card -->
+                <div class="rounded-2xl border border-slate-800 bg-slate-950/80 backdrop-blur-sm p-5 flex flex-col h-full">
+                    <header class="flex items-center justify-between mb-3">
+                        <div>
+                            <p class="text-xs uppercase tracking-[0.24em] text-indigo-300/80">
+                                SI Channel
+                            </p>
+                            <p class="text-sm text-slate-400">
+                                Static-safe demo. No external calls.
+                            </p>
+                        </div>
+                        <span class="inline-flex items-center gap-2 text-xs text-slate-400">
+                            <span class="h-2 w-2 rounded-full bg-emerald-400 animate-pulse"></span>
+                            Simulated
+                        </span>
+                    </header>
+                    <div id="chat-log"
+                         class="flex-1 rounded-xl border border-slate-800 bg-slate-950/70 p-3 mb-3 thin-scroll overflow-y-auto text-sm space-y-3"
+                         aria-live="polite">
+                        <div class="text-slate-400 text-xs">
+                            Messages here are locally simulated. In production this panel
+                            would be wired to the SI channel with full logging and review.
+                        </div>
+                    </div>
+                    <form id="chat-form" class="flex items-center gap-0" autocomplete="off" aria-label="Send message to SI">
+                        <input id="chat-input" type="text"
+                               placeholder="Ask SI anything…"
+                               class="flex-1 bg-slate-900/70 border border-slate-800 rounded-l-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:border-transparent" />
+                        <button id="send-btn" type="submit"
+                                class="bg-indigo-600 hover:bg-indigo-700 px-5 py-2.5 rounded-r-lg text-sm font-medium flex items-center gap-2">
+                            <i class="fas fa-paper-plane text-xs"></i>
+                            Send
+                        </button>
+                    </form>
+                    <div id="typing-indicator" class="mt-2 text-xs text-slate-400 hidden">
+                        SI is composing a reply…
+                    </div>
+                </div>
+                <!-- Consciousness demo teaser -->
+                <div class="rounded-2xl border border-pink-500/40 bg-gradient-to-br from-slate-950 via-slate-950 to-fuchsia-900/10 p-5 relative overflow-hidden">
+                    <div class="absolute -right-16 -bottom-16 w-64 h-64 rounded-full bg-gradient-to-tr from-indigo-500/30 via-fuchsia-500/25 to-sky-400/25 blur-3xl"></div>
+                    <div class="relative space-y-2">
+                        <p class="text-xs uppercase tracking-[0.24em] text-pink-300/80">
+                            Consciousness Demonstration
+                        </p>
+                        <p class="text-sm text-slate-200">
+                            A safe, bounded visualization of artificial qualia and internal dynamics.
+                        </p>
+                        <button id="open-consciousness-btn"
+                                class="mt-2 inline-flex items-center gap-2 px-4 py-2 rounded-full bg-slate-950/70 border border-pink-500/60 hover:bg-slate-900">
+                            <i class="fas fa-brain text-xs text-pink-300"></i>
+                            Open demo
+                        </button>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </main>
+    <!-- FOOTER -->
+    <footer class="border-t border-slate-800/60 py-6 px-6 lg:px-10 mt-auto">
+        <div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4 text-xs sm:text-sm text-slate-400">
+            <div class="flex flex-wrap gap-4">
+                <a href="#" class="hover:text-indigo-300 transition">Privacy</a>
+                <a href="#" class="hover:text-indigo-300 transition">Terms</a>
+                <a href="research.html" class="hover:text-indigo-300 transition">Research</a>
+                <a href="contact.html" class="hover:text-indigo-300 transition">Contact</a>
+            </div>
+            <div class="text-center md:text-right space-y-1">
+                <p>© 2025 Super Intelligence / SILENTPATTERN. All rights reserved.</p>
+                <p class="text-slate-500">The future of consciousness is here – but under supervision.</p>
+            </div>
+        </div>
+    </footer>
+</div>
+<!-- ACCESS MODAL -->
+<div id="access-modal"
+     class="fixed inset-0 z-30 hidden items-center justify-center modal-backdrop">
+    <div class="absolute inset-0 modal-backdrop" aria-hidden="true"></div>
+    <div class="relative max-w-lg w-full mx-4 rounded-2xl border border-slate-800 bg-slate-950/95 backdrop-blur-md p-6">
+        <div class="flex items-start justify-between mb-4">
+            <div>
+                <h3 class="text-xl font-semibold" id="access-modal-title">Request SI Access</h3>
+                <p class="text-slate-400 text-sm mt-1">Limited availability for qualified researchers and partners.</p>
+            </div>
+            <button id="close-modal" class="text-slate-400 hover:text-white" aria-label="Close request access modal">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+        <div id="access-form-feedback"
+             class="hidden mb-4 text-sm rounded-lg border border-slate-800 bg-black/20 p-3"
+             role="status" aria-live="polite"></div>
+        <form id="access-form" class="space-y-4" novalidate>
+            <div>
+                <label for="name" class="block text-sm font-medium mb-1">Full Name</label>
+                <input type="text" id="name"
+                       class="w-full bg-slate-900/70 border border-slate-800 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:border-transparent"
+                       autocomplete="name" />
+                <p id="name-error" class="hidden mt-1 text-xs text-rose-300">Please enter your full name.</p>
+            </div>
+            <div>
+                <label for="email" class="block text-sm font-medium mb-1">Email</label>
+                <input type="email" id="email"
+                       class="w-full bg-slate-900/70 border border-slate-800 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:border-transparent"
+                       autocomplete="email" />
+                <p id="email-error" class="hidden mt-1 text-xs text-rose-300">Please enter a valid email address.</p>
+            </div>
+            <div>
+                <label for="institution" class="block text-sm font-medium mb-1">Institution / Organization</label>
+                <input type="text" id="institution"
+                       class="w-full bg-slate-900/70 border border-slate-800 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:border-transparent"
+                       autocomplete="organization" />
+                <p id="institution-error" class="hidden mt-1 text-xs text-rose-300">Please enter your institution / organization.</p>
+            </div>
+            <div>
+                <label for="purpose" class="block text-sm font-medium mb-1">Purpose of Access</label>
+                <select id="purpose"
+                        class="w-full bg-slate-900/70 border border-slate-800 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:border-transparent">
+                    <option value="">Select a purpose</option>
+                    <option value="research">Academic Research</option>
+                    <option value="development">AI Development / Engineering</option>
+                    <option value="governance">Safety / Governance</option>
+                    <option value="other">Other</option>
+                </select>
+                <p id="purpose-error" class="hidden mt-1 text-xs text-rose-300">Please select a purpose.</p>
+            </div>
+            <div class="pt-1">
+                <button type="submit"
+                        class="w-full py-2.5 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg hover:opacity-90 text-sm font-medium">
+                    Submit Request
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+<!-- CONSCIOUSNESS DEMO MODAL -->
+<div id="consciousness-modal"
+     class="fixed inset-0 z-30 hidden items-center justify-center modal-backdrop">
+    <div class="absolute inset-0 modal-backdrop" aria-hidden="true"></div>
+    <div class="relative max-w-3xl w-full mx-4 rounded-2xl border border-fuchsia-600/40 bg-slate-950/95 backdrop-blur-md p-6">
+        <div class="flex items-start justify-between mb-4">
+            <div>
+                <h3 class="text-xl font-semibold" id="consciousness-modal-title">Consciousness Demonstration</h3>
+                <p class="text-slate-400 text-sm mt-1">
+                    A simplified visualization of internal state dynamics. This is a bounded, non-sentient simulation.
+                </p>
+            </div>
+            <button id="close-consciousness-modal" class="text-slate-400 hover:text-white"
+                    aria-label="Close consciousness demo modal">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+        <div class="space-y-4">
+            <div class="relative h-64 bg-slate-900/40 rounded-xl border border-dashed border-slate-700 flex items-center justify-center overflow-hidden">
+                <canvas id="neural-canvas" class="w-full h-full"></canvas>
+                <div class="absolute inset-0 flex items-center justify-center pointer-events-none" id="demo-overlay">
+                    <button id="start-demo"
+                            class="pointer-events-auto px-5 py-2.5 bg-indigo-600 rounded-full hover:bg-indigo-700 text-sm font-medium flex items-center gap-2">
+                        <i class="fas fa-play text-xs"></i>
+                        Start simulation
+                    </button>
+                </div>
+            </div>
+            <div class="flex items-center justify-between text-xs text-slate-400">
+                <div>
+                    <i class="fas fa-info-circle mr-1"></i>
+                    This is a stylized visualization, not evidence of subjective experience.
+                </div>
+                <button id="learn-more-demo" class="text-indigo-400 hover:text-indigo-300">
+                    Learn more <i class="fas fa-arrow-right ml-1"></i>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- LAB NAVIGATOR OVERLAY -->
+<div id="lab-nav-overlay"
+     class="fixed inset-0 z-40 opacity-0 pointer-events-none flex justify-end">
+    <div class="flex-1 bg-black/40" id="lab-nav-backdrop"></div>
+    <aside id="lab-nav-panel"
+           class="w-full max-w-md bg-slate-950/98 border-l border-slate-800 px-5 py-6 translate-x-full flex flex-col gap-4">
+        <header class="flex items-center justify-between mb-2">
+            <div>
+                <p class="text-xs uppercase tracking-[0.24em] text-indigo-300/80">Lab Navigator</p>
+                <p class="text-sm text-slate-400">Programs, agents, safety and access.</p>
+            </div>
+            <button id="lab-nav-close"
+                    class="w-9 h-9 rounded-full border border-slate-800 bg-slate-900/40 hover:bg-slate-900/70 flex items-center justify-center"
+                    aria-label="Close Lab Navigator">
+                <i class="fas fa-times text-slate-300 text-sm"></i>
+            </button>
+        </header>
+        <div class="relative mb-3">
+            <div class="absolute inset-0 opacity-40 pointer-events-none"
+                 style="background:
+                     radial-gradient(circle at 10% 0%, rgba(59,130,246,0.32), transparent 50%),
+                     radial-gradient(circle at 90% 80%, rgba(236,72,153,0.18), transparent 55%);">
+            </div>
+            <div class="relative grid grid-cols-1 sm:grid-cols-2 gap-3 mb-4">
+                <button class="lab-node text-left rounded-xl border border-slate-800 bg-slate-900/40 hover:border-indigo-500/60 hover:bg-slate-900/60 transition p-3"
+                        data-dossier="start">
+                    <div class="text-sm text-slate-100 font-medium">Start here</div>
+                    <div class="text-xs text-slate-400 mt-1">Guided entry into the lab.</div>
+                </button>
+                <button class="lab-node text-left rounded-xl border border-slate-800 bg-slate-900/40 hover:border-indigo-500/60 hover:bg-slate-900/60 transition p-3"
+                        data-dossier="programs">
+                    <div class="text-sm text-slate-100 font-medium">Programs</div>
+                    <div class="text-xs text-slate-400 mt-1">MCAP · CHAI-Ω² · Quantum Lambda.</div>
+                </button>
+                <button class="lab-node text-left rounded-xl border border-slate-800 bg-slate-900/40 hover:border-indigo-500/60 hover:bg-slate-900/60 transition p-3"
+                        data-dossier="ai_scientist">
+                    <div class="text-sm text-slate-100 font-medium">AI Scientist</div>
+                    <div class="text-xs text-slate-400 mt-1">Hypothesis → experiment → report.</div>
+                </button>
+                <button class="lab-node text-left rounded-xl border border-slate-800 bg-slate-900/40 hover:border-indigo-500/60 hover:bg-slate-900/60 transition p-3"
+                        data-dossier="agents">
+                    <div class="text-sm text-slate-100 font-medium">Agents</div>
+                    <div class="text-xs text-slate-400 mt-1">Role-based, auditable autonomy.</div>
+                </button>
+                <button class="lab-node text-left rounded-xl border border-slate-800 bg-slate-900/40 hover:border-indigo-500/60 hover:bg-slate-900/60 transition p-3"
+                        data-dossier="research">
+                    <div class="text-sm text-slate-100 font-medium">Research Notes</div>
+                    <div class="text-xs text-slate-400 mt-1">Technical notes and evaluations.</div>
+                </button>
+                <button class="lab-node text-left rounded-xl border border-slate-800 bg-slate-900/40 hover:border-indigo-500/60 hover:bg-slate-900/60 transition p-3"
+                        data-dossier="safety">
+                    <div class="text-sm text-slate-100 font-medium">Safety / System Card</div>
+                    <div class="text-xs text-slate-400 mt-1">Constraints, evaluations, governance.</div>
+                </button>
+                <button class="lab-node text-left rounded-xl border border-slate-800 bg-slate-900/40 hover:border-indigo-500/60 hover:bg-slate-900/60 transition p-3 sm:col-span-2"
+                        data-dossier="access">
+                    <div class="text-sm text-slate-100 font-medium">Access</div>
+                    <div class="text-xs text-slate-400 mt-1">Request access to demos and research.</div>
+                </button>
+            </div>
+            <div class="relative p-4 rounded-xl border border-slate-800 bg-slate-950/80 thin-scroll max-h-[360px] overflow-auto">
+                <div id="dossier-body" class="text-sm text-slate-300 leading-relaxed space-y-2">
+                    <!-- Filled by JS -->
+                </div>
+                <div class="mt-4 flex flex-col sm:flex-row gap-2">
+                    <button id="dossier-primary"
+                            class="flex-1 px-4 py-2 rounded-lg bg-gradient-to-r from-indigo-600 to-purple-600 hover:opacity-90 text-sm font-medium">
+                        Open
+                    </button>
+                    <button id="dossier-secondary"
+                            class="flex-1 px-4 py-2 rounded-lg border border-slate-700 bg-slate-900/40 hover:bg-slate-900/70 text-sm font-medium">
+                        View Note
+                    </button>
+                </div>
+            </div>
+        </aside>
+    </aside>
+</div>
+<!-- MAIN SCRIPT -->
+<script>
+    /* ------------------------------------------------------------------
+       VANTA BACKGROUND
+    ------------------------------------------------------------------ */
+    let vantaEffect = null;
+    window.addEventListener('DOMContentLoaded', () => {
+        vantaEffect = VANTA.NET({
+            el: "#vanta-bg",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x4f46e5,
+            backgroundColor: 0x020617,
+            points: 12.00,
+            maxDistance: 20.00,
+            spacing: 15.00
+        });
+        document.body.classList.add('vanta-ready');
+    });
+    window.addEventListener('resize', () => {
+        if (vantaEffect && typeof vantaEffect.resize === 'function') {
+            vantaEffect.resize();
+        }
+    });
+    /* ------------------------------------------------------------------
+       HASH HANDLING (for modals / lab)
+    ------------------------------------------------------------------ */
+    const MODAL_HASHES = new Set(['lab', 'access', 'consciousness-demo']);
+    function currentHashKey() {
+        return (window.location.hash || '').replace('#', '').trim();
+    }
+    function setHash(key) {
+        if (!key) return;
+        const now = currentHashKey();
+        if (now === key) return;
+        window.location.hash = key;
+    }
+    function clearHash() {
+        if (!window.location.hash) return;
+        history.pushState('', document.title, window.location.pathname + window.location.search);
+    }
+    /* ------------------------------------------------------------------
+       ACCESS MODAL
+    ------------------------------------------------------------------ */
+    const accessModal = document.getElementById('access-modal');
+    const accessBtn = document.getElementById('access-btn');
+    const heroAccessBtn = document.getElementById('hero-access-btn');
+    const closeModal = document.getElementById('close-modal');
+    const accessForm = document.getElementById('access-form');
+    const accessFeedback = document.getElementById('access-form-feedback');
+    const nameEl = document.getElementById('name');
+    const emailEl = document.getElementById('email');
+    const institutionEl = document.getElementById('institution');
+    const purposeEl = document.getElementById('purpose');
+    const nameErr = document.getElementById('name-error');
+    const emailErr = document.getElementById('email-error');
+    const institutionErr = document.getElementById('institution-error');
+    const purposeErr = document.getElementById('purpose-error');
+    function showAccessModal(fromHash = false) {
+        accessModal.classList.remove('hidden');
+        accessModal.classList.add('flex');
+        setTimeout(() => nameEl?.focus(), 0);
+        if (!fromHash) setHash('access');
+    }
+    function closeAccessModal(fromHash = false) {
+        accessModal.classList.add('hidden');
+        accessModal.classList.remove('flex');
+        if (!fromHash) clearHash();
+    }
+    function showAccessFeedback(message, type) {
+        if (!accessFeedback) return;
+        accessFeedback.classList.remove('hidden');
+        accessFeedback.textContent = message;
+        accessFeedback.classList.remove('border-red-500/40', 'border-green-500/40', 'text-red-200', 'text-green-200');
+        if (type === 'error') {
+            accessFeedback.classList.add('border-red-500/40', 'text-red-200');
+        } else if (type === 'success') {
+            accessFeedback.classList.add('border-green-500/40', 'text-green-200');
+        } else {
+            accessFeedback.classList.add('text-slate-200');
+        }
+    }
+    function hideAccessFeedback() {
+        if (!accessFeedback) return;
+        accessFeedback.classList.add('hidden');
+        accessFeedback.textContent = '';
+    }
+    function setFieldError(input, errEl, hasError) {
+        if (!input || !errEl) return;
+        if (hasError) {
+            input.classList.add('border-rose-500/70');
+            errEl.classList.remove('hidden');
+        } else {
+            input.classList.remove('border-rose-500/70');
+            errEl.classList.add('hidden');
+        }
+    }
+    function isValidEmail(email) {
+        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+    }
+    function validateAccessForm() {
+        let ok = true;
+        const nameVal = nameEl.value.trim();
+        const emailVal = emailEl.value.trim();
+        const instVal = institutionEl.value.trim();
+        const purposeVal = purposeEl.value;
+        setFieldError(nameEl, nameErr, !nameVal);
+        setFieldError(emailEl, emailErr, !isValidEmail(emailVal));
+        setFieldError(institutionEl, institutionErr, !instVal);
+        setFieldError(purposeEl, purposeErr, !purposeVal);
+        if (!nameVal || !isValidEmail(emailVal) || !instVal || !purposeVal) ok = false;
+        return ok;
+    }
+    [nameEl, emailEl, institutionEl, purposeEl].forEach(el => {
+        if (!el) return;
+        el.addEventListener('input', () => {
+            hideAccessFeedback();
+            validateAccessForm();
+        });
+    });
+    accessForm?.addEventListener('submit', (e) => {
+        e.preventDefault();
+        hideAccessFeedback();
+        if (!validateAccessForm()) {
+            showAccessFeedback('Please complete all required fields.', 'error');
+            return;
+        }
+        showAccessFeedback('Request received. You will be contacted after review.', 'success');
+        accessForm.reset();
+    });
+    accessBtn?.addEventListener('click', () => showAccessModal(false));
+    heroAccessBtn?.addEventListener('click', () => showAccessModal(false));
+    closeModal?.addEventListener('click', () => closeAccessModal(false));
+    accessModal?.addEventListener('click', (e) => {
+        if (e.target === accessModal) closeAccessModal(false);
+    });
+    /* ------------------------------------------------------------------
+       CONSCIOUSNESS MODAL + VISUALIZATION
+    ------------------------------------------------------------------ */
+    const consciousnessModal = document.getElementById('consciousness-modal');
+    const openConsciousnessBtn = document.getElementById('open-consciousness-btn');
+    const closeConsciousnessModalBtn = document.getElementById('close-consciousness-modal');
+    const neuralCanvas = document.getElementById('neural-canvas');
+    const demoOverlay = document.getElementById('demo-overlay');
+    const startDemoBtn = document.getElementById('start-demo');
+    const learnMoreDemoBtn = document.getElementById('learn-more-demo');
+    let neuralCtx = null;
+    let neurons = [];
+    let demoRunning = false;
+    function showConsciousnessModal(fromHash = false) {
+        consciousnessModal.classList.remove('hidden');
+        consciousnessModal.classList.add('flex');
+        setTimeout(() => startDemoBtn?.focus(), 0);
+        if (!fromHash) setHash('consciousness-demo');
+    }
+    function closeConsciousnessModal(fromHash = false) {
+        consciousnessModal.classList.add('hidden');
+        consciousnessModal.classList.remove('flex');
+        demoRunning = false;
+        if (!fromHash) clearHash();
+    }
+    function resizeNeuralCanvas() {
+        if (!neuralCanvas) return;
+        neuralCanvas.width = neuralCanvas.clientWidth;
+        neuralCanvas.height = neuralCanvas.clientHeight;
+        neuralCtx = neuralCanvas.getContext('2d');
+    }
+    function setupNeurons() {
+        if (!neuralCanvas) return;
+        const count = 80;
+        neurons = [];
+        for (let i = 0; i < count; i++) {
+            neurons.push({
+                x: Math.random(),
+                y: Math.random(),
+                phase: Math.random() * Math.PI * 2,
+                speed: 0.4 + Math.random() * 0.8
+            });
+        }
+    }
+    function drawNeuralActivity(timestamp) {
+        if (!demoRunning || !neuralCtx || !neuralCanvas) return;
+        const w = neuralCanvas.width;
+        const h = neuralCanvas.height;
+        neuralCtx.clearRect(0, 0, w, h);
+        neuralCtx.fillStyle = "rgba(15,23,42,0.95)";
+        neuralCtx.fillRect(0, 0, w, h);
+        // connections
+        neuralCtx.lineWidth = 0.7;
+        for (let i = 0; i < neurons.length; i++) {
+            for (let j = i + 1; j < neurons.length; j++) {
+                const dx = neurons[i].x - neurons[j].x;
+                const dy = neurons[i].y - neurons[j].y;
+                const dist = Math.sqrt(dx * dx + dy * dy);
+                if (dist < 0.18) {
+                    const alpha = (0.18 - dist) / 0.18 * 0.7;
+                    neuralCtx.strokeStyle = `rgba(129,140,248,${alpha})`;
+                    neuralCtx.beginPath();
+                    neuralCtx.moveTo(neurons[i].x * w, neurons[i].y * h);
+                    neuralCtx.lineTo(neurons[j].x * w, neurons[j].y * h);
+                    neuralCtx.stroke();
+                }
+            }
+        }
+        // nodes
+        for (const n of neurons) {
+            const a = 0.6 + 0.4 * Math.sin(timestamp / 1000 * n.speed + n.phase);
+            const r = 2 + 1.5 * a;
+            neuralCtx.fillStyle = `rgba(236,72,153,${0.25 + 0.5 * a})`;
+            neuralCtx.beginPath();
+            neuralCtx.arc(n.x * w, n.y * h, r + 1, 0, Math.PI * 2);
+            neuralCtx.fill();
+            neuralCtx.fillStyle = `rgba(248,250,252,${0.6 + 0.3 * a})`;
+            neuralCtx.beginPath();
+            neuralCtx.arc(n.x * w, n.y * h, r - 1, 0, Math.PI * 2);
+            neuralCtx.fill();
+            n.x += (Math.sin(timestamp / 1200 + n.phase) * 0.0004);
+            n.y += (Math.cos(timestamp / 1400 + n.phase) * 0.0004);
+        }
+        requestAnimationFrame(drawNeuralActivity);
+    }
+    openConsciousnessBtn?.addEventListener('click', () => showConsciousnessModal(false));
+    closeConsciousnessModalBtn?.addEventListener('click', () => closeConsciousnessModal(false));
+    consciousnessModal?.addEventListener('click', (e) => {
+        if (e.target === consciousnessModal) closeConsciousnessModal(false);
+    });
+    startDemoBtn?.addEventListener('click', () => {
+        demoOverlay.classList.add('hidden');
+        demoRunning = true;
+        resizeNeuralCanvas();
+        setupNeurons();
+        requestAnimationFrame(drawNeuralActivity);
+    });
+    learnMoreDemoBtn?.addEventListener('click', () => {
+        alert("In the production system this would open a technical note on artificial consciousness and phenomenology models.");
+    });
+    window.addEventListener('resize', () => {
+        resizeNeuralCanvas();
+        if (demoRunning) setupNeurons();
+    });
+    /* ------------------------------------------------------------------
+       CHAT PANEL (static demo, with optional /api/chat)
+    ------------------------------------------------------------------ */
+    const chatForm = document.getElementById('chat-form');
+    const chatInput = document.getElementById('chat-input');
+    const typingIndicator = document.getElementById('typing-indicator');
+    const chatLog = document.getElementById('chat-log');
+    function escapeHtml(str) {
+        return String(str)
+            .replaceAll('&', '&amp;')
+            .replaceAll('<', '&lt;')
+            .replaceAll('>', '&gt;')
+            .replaceAll('"', '&quot;')
+            .replaceAll("'", '&#039;');
+    }
+    function addMessage(text, isUser = false) {
+        if (!chatLog) return;
+        const safe = escapeHtml(text);
+        const outer = document.createElement('div');
+        outer.className = "flex " + (isUser ? "justify-end" : "justify-start");
+        const bubble = document.createElement('div');
+        bubble.className = "max-w-[80%] rounded-xl px-3 py-2 text-xs sm:text-sm " +
+            (isUser
+                ? "bg-indigo-600 text-slate-50"
+                : "bg-slate-900/80 border border-slate-800 text-slate-100");
+        bubble.innerHTML = safe;
+        outer.appendChild(bubble);
+        chatLog.appendChild(outer);
+        chatLog.scrollTop = chatLog.scrollHeight;
+    }
+    async function callServerChat(userMessage) {
+        const res = await fetch('/api/chat', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                message: userMessage,
+                meta: { page: 'index.html', product: 'silentpattern' }
+            })
+        });
+        if (!res.ok) throw new Error("Server error: " + res.status);
+        const data = await res.json();
+        if (!data || typeof data.reply !== 'string') {
+            throw new Error("Invalid response from /api/chat");
+        }
+        return data.reply;
+    }
+    function localDemoResponse(userMessage) {
+        const msg = userMessage.toLowerCase();
+        if (msg.includes('mcap')) {
+            return "MCAP is a certificate-driven framework; every claim must be backed by a mechanistic proof object. The public version here is a static description only.";
+        }
+        if (msg.includes('chai')) {
+            return "CHAI-Ω² models markets as physical systems with falsifiable predictive laws. The demo environment exposes the interface, not the real models.";
+        }
+        if (msg.includes('quantum')) {
+            return "Quantum Lambda is a research track on decision gradients under hard constraints. In this environment you can only see a textual overview.";
+        }
+        if (msg.includes('safety') || msg.includes('risk')) {
+            return "Safety work is primary: bounded autonomy, system cards, and human-in-the-loop checkpoints. Any production deployment would go through independent review.";
+        }
+        return "This channel is running in demo mode. In production the reply would be generated by the SI stack with full logging. For now, treat this as a conceptual sketch rather than an oracle.";
+    }
+    chatForm?.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const userText = chatInput.value.trim();
+        if (!userText) return;
+        addMessage(userText, true);
+        chatInput.value = '';
+        typingIndicator.classList.remove('hidden');
+        try {
+            let reply;
+            try {
+                reply = await callServerChat(userText);
+            } catch {
+                reply = localDemoResponse(userText);
+            }
+            addMessage(reply, false);
+        } catch (err) {
+            addMessage("The SI channel is temporarily unavailable. This environment is safe-mode only.", false);
+            console.error(err);
+        } finally {
+            typingIndicator.classList.add('hidden');
+        }
+    });
+    /* ------------------------------------------------------------------
+       ORB TILT INTERACTION
+    ------------------------------------------------------------------ */
+    const orbContainer = document.getElementById('conscious-orb-container');
+    if (orbContainer) {
+        orbContainer.addEventListener('mousemove', (e) => {
+            const rect = orbContainer.getBoundingClientRect();
+            const x = (e.clientX - rect.left) / rect.width;
+            const y = (e.clientY - rect.top) / rect.height;
+            orbContainer.style.transform =
+                `perspective(900px) rotateX(${(y - 0.5) * 10}deg) rotateY(${(x - 0.5) * -10}deg) scale(1.03)`;
+        });
+        orbContainer.addEventListener('mouseleave', () => {
+            orbContainer.style.transform = 'perspective(900px) rotateX(0deg) rotateY(0deg) scale(1)';
+        });
+    }
+    /* ------------------------------------------------------------------
+       LAB NAVIGATOR
+    ------------------------------------------------------------------ */
+    const labNavOverlay = document.getElementById('lab-nav-overlay');
+    const labNavPanel = document.getElementById('lab-nav-panel');
+    const labNavTrigger = document.getElementById('lab-nav-trigger');
+    const heroLabBtn = document.getElementById('hero-lab-btn');
+    const labNavClose = document.getElementById('lab-nav-close');
+    const labNavBackdrop = document.getElementById('lab-nav-backdrop');
+    const dossierBody = document.getElementById('dossier-body');
+    const dossierPrimary = document.getElementById('dossier-primary');
+    const dossierSecondary = document.getElementById('dossier-secondary');
+    const LAB_DOSSIERS = {
+        start: {
+            title: "Start here",
+            body: [
+                "SILENTPATTERN is an applied lab running a small number of tightly-scoped research programs.",
+                "The goal of this navigator is to show a single coherent surface: what exists, how it is evaluated, and how access is negotiated.",
+                "Most of the real work happens behind the scenes; this interface is a safe, non-capability-exposing layer."
+            ],
+            primary: { label: "Overview", action: () => window.location.href = "about.html" },
+            secondary: { label: "Research notes", action: () => window.location.href = "research.html" }
+        },
+        programs: {
+            title: "Programs",
+            body: [
+                "• MCAP – Mechanistic Certificates and Alignment Proofs.",
+                "• CHAI-Ω² – Closed-loop market physics and entropic bridges.",
+                "• Quantum Lambda – High-frequency decision systems under hard constraints.",
+                "This demo lists programs only at a conceptual level; no proprietary models are exposed."
+            ],
+            primary: { label: "Capabilities", action: () => window.location.href = "capabilities.html" },
+            secondary: { label: "Program note (demo)", action: () => alert("Program technical notes would be linked here in production.") }
+        },
+        ai_scientist: {
+            title: "AI Scientist stack",
+            body: [
+                "Pipeline: hypothesis → experiment plan → execution → dataset → report.",
+                "Every run is logged with a cryptographic trace and linked to a safety policy.",
+                "In this environment you only see a conceptual shell; the real pipeline is never exposed directly."
+            ],
+            primary: { label: "Open (demo)", action: () => alert("AI Scientist module would open here.") },
+            secondary: { label: "Research notes", action: () => window.location.href = "research.html" }
+        },
+        agents: {
+            title: "Agents",
+            body: [
+                "Role-based agents with narrow capabilities and explicit oversight.",
+                "Human-in-the-loop checkpoints exist at every off-platform boundary.",
+                "Actions are recorded in immutable audit logs."
+            ],
+            primary: { label: "Agents (demo)", action: () => alert("Agents dossier would be implemented as a separate view.") },
+            secondary: { label: "Safety view", action: () => window.location.href = "about.html" }
+        },
+        research: {
+            title: "Research notes",
+            body: [
+                "Working notes, ablations, and failure cases are at least as important as headline results.",
+                "The public research log highlights falsification attempts and limitations, not only successes."
+            ],
+            primary: { label: "Open research log", action: () => window.location.href = "research.html" },
+            secondary: { label: "White paper (demo)", action: () => alert("White paper link would be wired here.") }
+        },
+        safety: {
+            title: "Safety / System card",
+            body: [
+                "The system card enumerates capabilities, limitations, failure modes, and safety mitigations.",
+                "The emphasis is on boundary-setting and refusal behavior rather than unconstrained power."
+            ],
+            primary: { label: "System card", action: () => window.location.href = "about.html" },
+            secondary: { label: "Ethics note (demo)", action: () => alert("Ethical framework documentation would be displayed here.") }
+        },
+        access: {
+            title: "Access",
+            body: [
+                "Access to deeper demos and experimental interfaces is intentionally constrained.",
+                "Requests are evaluated on intent, safeguards, and potential impact."
+            ],
+            primary: { label: "Request access", action: () => showAccessModal(false) },
+            secondary: { label: "Contact", action: () => window.location.href = "contact.html" }
+        }
+    };
+    function renderDossier(key) {
+        const obj = LAB_DOSSIERS[key] || LAB_DOSSIERS.start;
+        if (!dossierBody) return;
+        const lines = [
+            `<p class="text-sm font-semibold text-slate-100 mb-1">${escapeHtml(obj.title)}</p>`,
+            ...obj.body.map(p => `<p class="text-sm text-slate-300 mb-1.5">${escapeHtml(p)}</p>`)
+        ];
+        dossierBody.innerHTML = lines.join("");
+        if (dossierPrimary && obj.primary) {
+            dossierPrimary.textContent = obj.primary.label;
+            dossierPrimary.onclick = obj.primary.action;
+        }
+        if (dossierSecondary && obj.secondary) {
+            dossierSecondary.textContent = obj.secondary.label;
+            dossierSecondary.onclick = obj.secondary.action;
+        }
+        setActiveLabNode(key);
+    }
+    function setActiveLabNode(key) {
+        document.querySelectorAll('.lab-node').forEach(btn => {
+            const isActive = btn.getAttribute('data-dossier') === key;
+            btn.classList.toggle('border-indigo-500/60', isActive);
+            btn.classList.toggle('bg-slate-900/60', isActive);
+            btn.classList.toggle('ring-2', isActive);
+            btn.classList.toggle('ring-indigo-500/20', isActive);
+        });
+    }
+    function openLabNav(fromHash = false) {
+        labNavOverlay.dataset.open = "true";
+        labNavPanel.dataset.open = "true";
+        renderDossier('start');
+        if (!fromHash) setHash('lab');
+    }
+    function closeLabNav(fromHash = false) {
+        labNavOverlay.dataset.open = "false";
+        labNavPanel.dataset.open = "false";
+        if (!fromHash) clearHash();
+    }
+    labNavTrigger?.addEventListener('click', () => openLabNav(false));
+    heroLabBtn?.addEventListener('click', () => openLabNav(false));
+    labNavClose?.addEventListener('click', () => closeLabNav(false));
+    labNavBackdrop?.addEventListener('click', () => closeLabNav(false));
+    document.querySelectorAll('.lab-node').forEach(btn => {
+        btn.addEventListener('click', () => {
+            const key = btn.getAttribute('data-dossier');
+            renderDossier(key);
+        });
+    });
+    /* ------------------------------------------------------------------
+       HASH ROUTING → open correct overlay on load / change
+    ------------------------------------------------------------------ */
+    function applyHashRoute() {
+        const key = currentHashKey();
+        if (!key) {
+            closeAccessModal(true);
+            closeConsciousnessModal(true);
+            closeLabNav(true);
+            return;
+        }
+        if (!MODAL_HASHES.has(key)) return;
+        // Close all first
+        closeAccessModal(true);
+        closeConsciousnessModal(true);
+        closeLabNav(true);
+        if (key === 'access') showAccessModal(true);
+        if (key === 'consciousness-demo') showConsciousnessModal(true);
+        if (key === 'lab') openLabNav(true);
+    }
+    window.addEventListener('hashchange', applyHashRoute);
+    window.addEventListener('DOMContentLoaded', applyHashRoute);
+</script>
+</body>
+</html>