Spaces:

Testing347
/

Copy-ava-testing

Running

File size: 56,770 Bytes

<!-- SILENTPATTERN FINAL BUILD: 2025-12-15 | pages: 10 | features: hash-deep-linking, lab-navigator, access-modal, form-validation, program-dossiers, active-card-states -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <title>SILENTPATTERN — Programs</title>

  <!-- Tailwind -->
  <script src="https://cdn.tailwindcss.com"></script>

  <!-- Three.js + Vanta (pinned) -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vanta.net.min.js"></script>

  <!-- Icons + Font -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">

  <style>
    body { font-family: 'Inter', sans-serif; }

    .gradient-text {
      background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .aura {
      background:
        radial-gradient(circle at 25% 20%, rgba(99,102,241,0.22), transparent 44%),
        radial-gradient(circle at 80% 75%, rgba(236,72,153,0.12), transparent 50%),
        radial-gradient(circle at 55% 45%, rgba(139,92,246,0.10), transparent 60%);
    }

    .conscious-element { transition: all 0.28s ease; }
    .conscious-element:hover { transform: translateY(-2px); }

    .focus-ring:focus { outline: none; box-shadow: 0 0 0 2px rgba(99,102,241,0.65); }

    /* Scrollbar for dossier panel */
    .thin-scroll {
      scrollbar-width: thin;
      scrollbar-color: #4f46e5 #1e1b4b;
    }
    .thin-scroll::-webkit-scrollbar { width: 6px; }
    .thin-scroll::-webkit-scrollbar-track { background: #1e1b4b; }
    .thin-scroll::-webkit-scrollbar-thumb { background-color: #4f46e5; border-radius: 3px; }

    .modal { transition: opacity 0.3s ease, transform 0.3s ease; }
    .modal-hidden { opacity: 0; transform: translateY(20px); pointer-events: none; }
    .modal-visible { opacity: 1; transform: translateY(0); }

    /* Stage badges */
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 12px;
      border: 1px solid rgba(148,163,184,0.18);
      background: rgba(15,23,42,0.25);
      color: rgba(226,232,240,0.9);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .dot { width: 8px; height: 8px; border-radius: 999px; }
    .dot-concept { background: rgba(99,102,241,0.9); }
    .dot-proto { background: rgba(139,92,246,0.9); }
    .dot-validated { background: rgba(16,185,129,0.9); }

    /* Subtle "bay" grid */
    .bay-grid {
      background-image:
        linear-gradient(rgba(148,163,184,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,163,184,0.06) 1px, transparent 1px);
      background-size: 40px 40px;
      background-position: center;
    }

    /* Active card state (minimal, consistent with design) */
    .program-card.active {
      border-color: rgba(99,102,241,0.55) !important;
      box-shadow: 0 0 0 1px rgba(99,102,241,0.22), 0 0 28px rgba(99,102,241,0.08);
      transform: translateY(-1px);
    }
  </style>
</head>

<body class="bg-black text-white overflow-x-hidden">
  <!-- Animated background -->
  <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>

  <!-- Minimal top bar -->
  <nav class="relative z-10 py-6 px-8 flex justify-between items-center backdrop-blur-sm">
    <a href="index.html" class="flex items-center space-x-2">
      <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center">
        <div class="w-2 h-2 rounded-full bg-white animate-pulse"></div>
      </div>
      <span class="text-xl font-semibold">SILENTPATTERN</span>
    </a>

    <div class="flex items-center space-x-3">
      <button id="lab-nav-btn"
        class="w-10 h-10 rounded-full border border-indigo-500/40 bg-gray-900/20 hover:bg-gray-900/40 backdrop-blur-sm transition flex items-center justify-center focus-ring"
        aria-label="Open Lab Navigator" title="Lab Navigator" aria-controls="lab-navigator" aria-haspopup="dialog">
        <i class="fas fa-asterisk text-indigo-300 text-sm"></i>
      </button>

      <button id="access-btn"
        class="px-6 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full hover:opacity-90 transition focus-ring"
        aria-controls="access-modal" aria-haspopup="dialog">
        Access
      </button>
    </div>
  </nav>

  <!-- HERO -->
  <section class="relative z-10 px-6 pt-14 pb-8">
    <div class="max-w-6xl mx-auto">
      <div class="flex flex-col gap-5">
        <div class="inline-flex items-center gap-3 self-start px-4 py-2 rounded-full border border-gray-800 bg-gray-900/20 backdrop-blur-sm">
          <span class="w-2 h-2 rounded-full bg-indigo-400 animate-pulse"></span>
          <span class="text-xs text-gray-300 tracking-widest uppercase">Programs</span>
          <span class="text-xs text-gray-500">Research artifacts and prototypes</span>
        </div>

        <h1 class="text-3xl md:text-6xl font-bold leading-tight">
          <span class="gradient-text">Program Bay</span><br>
          Capabilities as auditable systems
        </h1>

        <p class="text-gray-300 max-w-3xl text-lg md:text-xl">
          SILENTPATTERN is presented as an interface, not a brochure. Each program has a dossier: scope, assumptions, evaluation protocol, and access gates.
        </p>

        <div class="text-xs text-gray-500 max-w-3xl">
          Note: Programs involving markets are research prototypes. Nothing here constitutes investment advice, solicitation, or performance claims.
        </div>
      </div>
    </div>
  </section>

  <!-- PROGRAM BAY + DOSSIER PANEL -->
  <section class="relative z-10 px-6 pb-16">
    <div class="max-w-6xl mx-auto">
      <div class="grid grid-cols-1 lg:grid-cols-5 gap-6">

        <!-- LEFT: Program Bay -->
        <div class="lg:col-span-3 rounded-2xl border border-gray-800 bg-gray-900/20 overflow-hidden aura">
          <div class="px-6 py-5 border-b border-gray-800/60 flex items-center justify-between">
            <div>
              <div class="text-sm text-gray-200 font-medium">Program Bay</div>
              <div class="text-xs text-gray-500 mt-1">Select a module to load its dossier.</div>
            </div>
            <div class="text-xs px-2.5 py-1 rounded-full border border-indigo-500/30 text-indigo-200 bg-indigo-900/15">
              INTERFACE MODE
            </div>
          </div>

          <div class="p-6 bay-grid">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">

              <!-- MCAP -->
              <button type="button"
                class="program-card text-left rounded-2xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/55 hover:bg-gray-900/45 transition p-5 conscious-element focus-ring"
                data-dossier="mcap" aria-label="Open dossier: MCAP" aria-pressed="false">
                <div class="flex items-start justify-between gap-4">
                  <div>
                    <div class="text-lg font-semibold text-gray-100">MCAP</div>
                    <div class="text-xs text-gray-500 mt-1">Minimal Causal Abstraction Principle</div>
                  </div>
                  <span class="badge"><span class="dot dot-proto"></span>Prototype</span>
                </div>
                <p class="text-sm text-gray-300 mt-4 leading-relaxed">
                  A compression rule for causal structure: preserve intervention-relevant information while minimizing representation.
                </p>
                <div class="mt-4 text-xs text-gray-500 flex items-center gap-2">
                  <i class="fas fa-shield-halved"></i>
                  <span>Evaluation-first; claims gated by evidence</span>
                </div>
              </button>

              <!-- CHAI -->
              <button type="button"
                class="program-card text-left rounded-2xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/55 hover:bg-gray-900/45 transition p-5 conscious-element focus-ring"
                data-dossier="chai" aria-label="Open dossier: CHAI" aria-pressed="false">
                <div class="flex items-start justify-between gap-4">
                  <div>
                    <div class="text-lg font-semibold text-gray-100">CHAI</div>
                    <div class="text-xs text-gray-500 mt-1">Forecasting & regime inference stack</div>
                  </div>
                  <span class="badge"><span class="dot dot-concept"></span>Concept</span>
                </div>
                <p class="text-sm text-gray-300 mt-4 leading-relaxed">
                  A research pipeline for market prediction under distribution shift: features, regimes, calibration, and robust validation.
                </p>
                <div class="mt-4 text-xs text-gray-500 flex items-center gap-2">
                  <i class="fas fa-triangle-exclamation"></i>
                  <span>Markets are adversarial; protocols matter</span>
                </div>
              </button>

              <!-- Quantum Lambda -->
              <button type="button"
                class="program-card text-left rounded-2xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/55 hover:bg-gray-900/45 transition p-5 conscious-element focus-ring"
                data-dossier="quantum_lambda" aria-label="Open dossier: Quantum Lambda" aria-pressed="false">
                <div class="flex items-start justify-between gap-4">
                  <div>
                    <div class="text-lg font-semibold text-gray-100">Quantum Lambda</div>
                    <div class="text-xs text-gray-500 mt-1">High-frequency decision systems</div>
                  </div>
                  <span class="badge"><span class="dot dot-concept"></span>Concept</span>
                </div>
                <p class="text-sm text-gray-300 mt-4 leading-relaxed">
                  A microstructure-aware control loop: latency budgets, execution constraints, and risk-aware action selection.
                </p>
                <div class="mt-4 text-xs text-gray-500 flex items-center gap-2">
                  <i class="fas fa-stopwatch"></i>
                  <span>Assumptions must be explicit (latency, slippage)</span>
                </div>
              </button>

              <!-- AI Scientist -->
              <button type="button"
                class="program-card text-left rounded-2xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/55 hover:bg-gray-900/45 transition p-5 conscious-element focus-ring"
                data-dossier="ai_scientist" aria-label="Open dossier: AI Scientist" aria-pressed="false">
                <div class="flex items-start justify-between gap-4">
                  <div>
                    <div class="text-lg font-semibold text-gray-100">AI Scientist</div>
                    <div class="text-xs text-gray-500 mt-1">Hypothesis → Experiment → Report</div>
                  </div>
                  <span class="badge"><span class="dot dot-proto"></span>Prototype</span>
                </div>
                <p class="text-sm text-gray-300 mt-4 leading-relaxed">
                  An internal research engine that standardizes experiments, enforces reproducibility, and generates concise research notes with uncertainty.
                </p>
                <div class="mt-4 text-xs text-gray-500 flex items-center gap-2">
                  <i class="fas fa-flask"></i>
                  <span>Reproducibility is a feature, not a slogan</span>
                </div>
              </button>

              <!-- Agentic Workforce -->
              <button type="button"
                class="program-card text-left rounded-2xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/55 hover:bg-gray-900/45 transition p-5 conscious-element focus-ring md:col-span-2"
                data-dossier="agentic_workforce" aria-label="Open dossier: Agentic Workforce" aria-pressed="false">
                <div class="flex items-start justify-between gap-4">
                  <div>
                    <div class="text-lg font-semibold text-gray-100">Agentic Workforce</div>
                    <div class="text-xs text-gray-500 mt-1">Autonomous workflows under governance</div>
                  </div>
                  <span class="badge"><span class="dot dot-concept"></span>Concept</span>
                </div>
                <p class="text-sm text-gray-300 mt-4 leading-relaxed">
                  "AI employees" as controlled agents: scoped permissions, logging, approval gates, and outcome verification.
                </p>
                <div class="mt-4 text-xs text-gray-500 flex items-center gap-2">
                  <i class="fas fa-key"></i>
                  <span>Permissions + audits + fail-closed behaviors</span>
                </div>
              </button>

            </div>
          </div>
        </div>

        <!-- RIGHT: Dossier Panel -->
        <div class="lg:col-span-2 rounded-2xl border border-gray-800 bg-gray-900/30 overflow-hidden">
          <div class="px-6 py-5 border-b border-gray-800/60">
            <div class="flex items-start justify-between gap-4">
              <div>
                <div id="dossier-title" class="text-lg font-semibold text-gray-100">Dossier</div>
                <div id="dossier-subtitle" class="text-xs text-gray-500 mt-1">Select a module to load details.</div>
              </div>
              <div id="dossier-status"
                class="text-xs px-2.5 py-1 rounded-full border border-indigo-500/30 text-indigo-200 bg-indigo-900/15">
                READY
              </div>
            </div>
          </div>

          <div class="p-6 space-y-5 max-h-[740px] overflow-auto thin-scroll">
            <div class="rounded-xl border border-gray-800 bg-black/20 p-4">
              <div class="text-xs text-gray-400 uppercase tracking-wider mb-2">Summary</div>
              <div id="dossier-body" class="text-sm text-gray-300 leading-relaxed">
                This panel is designed to be stable and audit-friendly: scope, assumptions, evaluation protocol, and access gates.
              </div>
            </div>

            <div class="rounded-xl border border-gray-800 bg-black/20 p-4">
              <div class="text-xs text-gray-400 uppercase tracking-wider mb-2">Evidence Capsule</div>
              <ul id="dossier-evidence" class="text-sm text-gray-300 space-y-1">
                <li class="text-gray-500">No module selected.</li>
              </ul>
            </div>

            <div class="rounded-xl border border-gray-800 bg-black/20 p-4">
              <div class="text-xs text-gray-400 uppercase tracking-wider mb-2">Public Interface</div>
              <div id="dossier-public" class="text-sm text-gray-300 leading-relaxed">
                Public copy remains conservative. Claims scale with verified evidence.
              </div>
            </div>

            <div class="rounded-xl border border-gray-800 bg-black/20 p-4">
              <div class="text-xs text-gray-400 uppercase tracking-wider mb-2">Evaluation Protocol</div>
              <div id="dossier-eval" class="text-sm text-gray-300 leading-relaxed">
                Define the benchmark first; then allow the method to earn its reputation.
              </div>
            </div>

            <div class="flex flex-col gap-3">
              <button id="dossier-primary"
                class="px-5 py-3 rounded-xl bg-gradient-to-r from-indigo-600 to-purple-600 hover:opacity-90 transition focus-ring">
                Request Access
              </button>
              <button id="dossier-secondary"
                class="px-5 py-3 rounded-xl border border-gray-700 bg-gray-900/20 hover:bg-gray-900/35 transition focus-ring">
                Open Console
              </button>
            </div>

            <div id="dossier-meta" class="text-xs text-gray-500">
              Last updated: <span class="text-gray-300">—</span>
            </div>
          </div>
        </div>

      </div>
    </div>
  </section>

  <!-- CAPABILITY PRIMITIVES (SHORT, NON-BROCHURE) -->
  <section class="relative z-10 px-6 pb-16">
    <div class="max-w-6xl mx-auto rounded-2xl border border-gray-800 bg-gray-900/20 overflow-hidden">
      <div class="px-6 py-5 border-b border-gray-800/60 flex items-center justify-between">
        <div>
          <div class="text-sm text-gray-200 font-medium">Capability Primitives</div>
          <div class="text-xs text-gray-500 mt-1">The building blocks behind programs.</div>
        </div>
        <div class="text-xs text-gray-500">Concise by design</div>
      </div>

      <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="rounded-2xl border border-gray-800 bg-gray-900/30 p-5">
          <div class="text-sm font-semibold text-gray-100">Causal Abstraction</div>
          <div class="text-sm text-gray-300 mt-2">
            Distill mechanisms, not correlations. Prefer intervention-relevant representations.
          </div>
        </div>

        <div class="rounded-2xl border border-gray-800 bg-gray-900/30 p-5">
          <div class="text-sm font-semibold text-gray-100">Regime Awareness</div>
          <div class="text-sm text-gray-300 mt-2">
            Models must survive distribution shift; calibration and uncertainty are first-class.
          </div>
        </div>

        <div class="rounded-2xl border border-gray-800 bg-gray-900/30 p-5">
          <div class="text-sm font-semibold text-gray-100">Experiment Automation</div>
          <div class="text-sm text-gray-300 mt-2">
            Repeatable harnesses, tracked assumptions, and reportable deltas per change.
          </div>
        </div>

        <div class="rounded-2xl border border-gray-800 bg-gray-900/30 p-5">
          <div class="text-sm font-semibold text-gray-100">Agentic Orchestration</div>
          <div class="text-sm text-gray-300 mt-2">
            Autonomous workflows with permissions, logs, approvals, and fail-closed behavior.
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Minimal Footer -->
  <footer class="relative z-10 px-6 pb-10">
    <div class="max-w-6xl mx-auto border-t border-gray-800/60 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
      <div class="text-sm text-gray-500">© 2025 SILENTPATTERN. All rights reserved.</div>
      <div class="text-sm text-gray-500 flex gap-6">
        <a href="research.html" class="hover:text-indigo-400 transition">Research</a>
        <a href="privacy.html" class="hover:text-indigo-400 transition">Privacy</a>
        <a href="terms.html" class="hover:text-indigo-400 transition">Terms</a>
        <a href="contact.html" class="hover:text-indigo-400 transition">Contact</a>
      </div>
    </div>
  </footer>

  <!-- ACCESS MODAL -->
  <div id="access-modal"
    class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm modal modal-hidden"
    role="dialog" aria-modal="true" aria-labelledby="access-modal-title" tabindex="-1">
    <div class="bg-gray-900/90 border border-gray-800 rounded-xl max-w-md w-full mx-4 relative overflow-hidden">
      <div class="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-indigo-600 to-purple-600"></div>
      <div class="p-6">
        <div class="flex justify-between items-start mb-6">
          <div>
            <h3 class="text-xl font-bold" id="access-modal-title">Request Access</h3>
            <p class="text-gray-400 mt-1">Curated access for research and evaluation</p>
          </div>
          <button id="close-access-modal" class="text-gray-400 hover:text-white focus-ring" aria-label="Close">
            <i class="fas fa-times"></i>
          </button>
        </div>

        <div id="access-feedback"
          class="hidden mb-4 rounded-lg border border-gray-800 bg-black/25 px-4 py-3 text-sm"
          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-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus-ring" autocomplete="name">
            <p id="name-error" class="hidden mt-1 text-xs text-red-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-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus-ring" autocomplete="email">
            <p id="email-error" class="hidden mt-1 text-xs text-red-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-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus-ring" autocomplete="organization">
            <p id="institution-error" class="hidden mt-1 text-xs text-red-300">Please enter your institution/organization.</p>
          </div>
          <div>
            <label for="purpose" class="block text-sm font-medium mb-1">Purpose</label>
            <select id="purpose" class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus-ring">
              <option value="">Select a purpose</option>
              <option value="research">Academic / Independent Research</option>
              <option value="development">Engineering / Product Evaluation</option>
              <option value="partnership">Partnership</option>
              <option value="other">Other</option>
            </select>
            <p id="purpose-error" class="hidden mt-1 text-xs text-red-300">Please select a purpose.</p>
          </div>
          <div class="pt-2">
            <button type="submit" class="w-full py-3 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg hover:opacity-90 transition focus-ring">
              Submit Request
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- LAB NAVIGATOR -->
  <div id="lab-navigator"
    class="fixed inset-0 z-[60] bg-black/80 backdrop-blur-md modal modal-hidden"
    role="dialog" aria-modal="true" aria-label="Lab Navigator" tabindex="-1">

    <div class="absolute inset-0" data-lab-close="true"></div>

    <div class="relative w-full h-full flex items-center justify-center p-6">
      <div class="w-full max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div class="relative rounded-2xl border border-gray-800 bg-gray-900/20 overflow-hidden">
          <div class="flex items-center justify-between px-5 py-4 border-b border-gray-800/60">
            <div class="flex items-center space-x-3">
              <div class="w-7 h-7 rounded-full bg-indigo-600 flex items-center justify-center">
                <div class="w-1.5 h-1.5 rounded-full bg-white animate-pulse"></div>
              </div>
              <div>
                <div class="text-sm text-gray-300 tracking-wide">SILENTPATTERN</div>
                <div class="text-xs text-gray-500">Lab Navigator</div>
              </div>
            </div>

            <button id="lab-nav-close"
              class="w-9 h-9 rounded-full border border-gray-800 bg-gray-900/30 hover:bg-gray-900/50 transition flex items-center justify-center focus-ring"
              aria-label="Close Lab Navigator">
              <i class="fas fa-times text-gray-300 text-sm"></i>
            </button>
          </div>

          <div class="relative p-6 min-h-[420px]">
            <div class="absolute inset-0 opacity-70 pointer-events-none"
              style="background: radial-gradient(circle at 30% 20%, rgba(99,102,241,0.18), transparent 45%),
                              radial-gradient(circle at 70% 70%, rgba(236,72,153,0.10), transparent 50%);"></div>

            <div class="relative grid grid-cols-1 sm:grid-cols-2 gap-3">
              <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4 focus-ring"
                data-dossier="start" aria-current="false">
                <div class="text-sm text-gray-200 font-medium">Start Here</div>
                <div class="text-xs text-gray-500 mt-1">Entry interface</div>
              </button>

              <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4 focus-ring"
                data-dossier="programs" aria-current="false">
                <div class="text-sm text-gray-200 font-medium">Programs</div>
                <div class="text-xs text-gray-500 mt-1">This page</div>
              </button>

              <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4 focus-ring"
                data-dossier="console" aria-current="false">
                <div class="text-sm text-gray-200 font-medium">Console</div>
                <div class="text-xs text-gray-500 mt-1">Controlled chat</div>
              </button>

              <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4 focus-ring"
                data-dossier="research" aria-current="false">
                <div class="text-sm text-gray-200 font-medium">Research</div>
                <div class="text-xs text-gray-500 mt-1">Notes and briefs</div>
              </button>

              <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4 focus-ring sm:col-span-2"
                data-dossier="access" aria-current="false">
                <div class="text-sm text-gray-200 font-medium">Access</div>
                <div class="text-xs text-gray-500 mt-1">Curated entry</div>
              </button>
            </div>

            <div class="relative mt-6 text-xs text-gray-500">
              Tip: Press <span class="text-gray-300">Esc</span> to close.
            </div>
          </div>
        </div>

        <div class="relative rounded-2xl border border-gray-800 bg-gray-900/30 overflow-hidden">
          <div class="px-6 py-5 border-b border-gray-800/60">
            <div class="flex items-start justify-between gap-4">
              <div>
                <div id="lab-dossier-title" class="text-lg font-semibold text-gray-100">Lab Dossier</div>
                <div id="lab-dossier-subtitle" class="text-xs text-gray-500 mt-1">Select a node to load details.</div>
              </div>
              <div id="lab-dossier-status"
                class="text-xs px-2.5 py-1 rounded-full border border-indigo-500/30 text-indigo-200 bg-indigo-900/15">
                READY
              </div>
            </div>
          </div>

          <div class="p-6 space-y-5 max-h-[560px] overflow-auto thin-scroll">
            <div id="lab-dossier-body" class="text-sm text-gray-300 leading-relaxed">
              This interface reveals SILENTPATTERN as a set of research programs and operational systems.
              The public layer is minimal by design; depth is opened intentionally.
            </div>

            <div class="rounded-xl border border-gray-800 bg-black/20 p-4">
              <div class="text-xs text-gray-400 uppercase tracking-wider mb-2">Evidence Capsule</div>
              <ul id="lab-dossier-evidence" class="text-sm text-gray-300 space-y-1">
                <li class="text-gray-500">No dossier selected.</li>
              </ul>
            </div>

            <div class="flex flex-col sm:flex-row gap-3">
              <button id="lab-dossier-primary"
                class="flex-1 px-5 py-3 rounded-xl bg-gradient-to-r from-indigo-600 to-purple-600 hover:opacity-90 transition focus-ring">
                Open
              </button>
              <button id="lab-dossier-secondary"
                class="flex-1 px-5 py-3 rounded-xl border border-gray-700 bg-gray-900/20 hover:bg-gray-900/35 transition focus-ring">
                View Note
              </button>
            </div>

            <div id="lab-dossier-meta" class="text-xs text-gray-500">
              Last updated: <span class="text-gray-300">—</span>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>

  <script>
    // Site-wide configuration
    const CONFIG = {
      MODAL_HASHES: new Set(['lab', 'access']),
      DOSSIER_HASHES: new Set(['mcap', 'chai', 'quantum_lambda', 'ai_scientist', 'agentic_workforce'])
    };

    /* -------------------------------------------------------------
       UTILITY FUNCTIONS (consistent with index.html)
    ------------------------------------------------------------- */
    function escapeHtml(str) {
      return String(str)
        .replaceAll('&', '&amp;')
        .replaceAll('<', '&lt;')
        .replaceAll('>', '&gt;')
        .replaceAll('"', '&quot;')
        .replaceAll("'", '&#039;');
    }

    function isValidEmail(email) {
      return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
    }

    function currentHashKey() {
      const h = (window.location.hash || '').replace('#', '').trim();
      return h;
    }

    function setHash(key, replace = false) {
      if (!key) return;
      if (window.location.hash.replace('#', '') === key) return;
      if (replace) {
        history.replaceState(null, '', '#' + key);
      } else {
        history.pushState(null, '', '#' + key);
      }
    }

    function clearHashIf(key) {
      const h = currentHashKey();
      if (!h) return;
      if (!key || h === key) {
        history.replaceState(null, '', window.location.pathname + window.location.search);
      }
    }

    /* -------------------------------------------------------------
       MODAL HELPERS (consistent with index.html)
    ------------------------------------------------------------- */
    function trapFocus(modal) {
      const focusable = modal.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
      if (!focusable.length) return;
      const first = focusable[0];
      const last = focusable[focusable.length - 1];

      function handler(e) {
        if (e.key === 'Tab') {
          if (e.shiftKey) {
            if (document.activeElement === first) { e.preventDefault(); last.focus(); }
          } else {
            if (document.activeElement === last) { e.preventDefault(); first.focus(); }
          }
        }
      }
      modal.addEventListener('keydown', handler);
      modal._focusHandler = handler;
    }

    function untrapFocus(modal) {
      if (modal._focusHandler) {
        modal.removeEventListener('keydown', modal._focusHandler);
        delete modal._focusHandler;
      }
    }

    const toggleModal = (modal, show) => {
      if (show) {
        modal.classList.remove('modal-hidden');
        modal.classList.add('modal-visible');
        document.body.style.overflow = 'hidden';
        setTimeout(() => { modal.focus(); trapFocus(modal); }, 0);
      } else {
        modal.classList.remove('modal-visible');
        modal.classList.add('modal-hidden');
        document.body.style.overflow = '';
        untrapFocus(modal);
      }
    };

    /* -------------------------------------------------------------
       VANTA BACKGROUND (guarded)
    ------------------------------------------------------------- */
    let vantaEffect = null;
    try {
      if (window.VANTA && typeof VANTA.NET === 'function') {
        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
        });
      }
    } catch (_) {
      vantaEffect = null;
    }
    window.addEventListener('resize', () => {
      if (vantaEffect && typeof vantaEffect.resize === 'function') vantaEffect.resize();
    });

    /* -------------------------------------------------------------
       ACCESS MODAL + INLINE FEEDBACK
    ------------------------------------------------------------- */
    const accessModal = document.getElementById('access-modal');
    const accessBtn = document.getElementById('access-btn');
    const closeAccessModal = document.getElementById('close-access-modal');
    const accessForm = document.getElementById('access-form');
    const accessFeedback = document.getElementById('access-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 setAccessFeedback(kind, text) {
      if (!accessFeedback) return;
      accessFeedback.classList.remove('hidden');
      accessFeedback.classList.remove('border-red-500/30', 'bg-red-900/10', 'text-red-200');
      accessFeedback.classList.remove('border-emerald-500/30', 'bg-emerald-900/10', 'text-emerald-200');
      accessFeedback.classList.remove('border-indigo-500/30', 'bg-indigo-900/10', 'text-indigo-200');

      if (kind === 'error') {
        accessFeedback.classList.add('border-red-500/30', 'bg-red-900/10', 'text-red-200');
      } else if (kind === 'success') {
        accessFeedback.classList.add('border-emerald-500/30', 'bg-emerald-900/10', 'text-emerald-200');
      } else {
        accessFeedback.classList.add('border-indigo-500/30', 'bg-indigo-900/10', 'text-indigo-200');
      }

      accessFeedback.textContent = text;
    }

    function hideAccessFeedback() {
      if (!accessFeedback) return;
      accessFeedback.textContent = '';
      accessFeedback.classList.add('hidden');
      accessFeedback.classList.remove(
        'border-red-500/30','bg-red-900/10','text-red-200',
        'border-emerald-500/30','bg-emerald-900/10','text-emerald-200',
        'border-indigo-500/30','bg-indigo-900/10','text-indigo-200'
      );
    }

    function setFieldError(inputEl, errorEl, isError) {
      if (!inputEl || !errorEl) return;
      if (isError) {
        errorEl.classList.remove('hidden');
        inputEl.setAttribute('aria-invalid', 'true');
        inputEl.classList.add('border-red-500/60');
      } else {
        errorEl.classList.add('hidden');
        inputEl.removeAttribute('aria-invalid');
        inputEl.classList.remove('border-red-500/60');
      }
    }

    function resetAccessErrors() {
      hideAccessFeedback();
      setFieldError(nameEl, nameErr, false);
      setFieldError(emailEl, emailErr, false);
      setFieldError(institutionEl, institutionErr, false);
      setFieldError(purposeEl, purposeErr, false);
    }

    function openAccessModal(setHashFlag = true) {
      resetAccessErrors();
      toggleModal(accessModal, true);
      if (setHashFlag) setHash('access');
      setTimeout(() => nameEl && nameEl.focus(), 80);
    }

    function closeAccessModal(clearHashFlag = true) {
      toggleModal(accessModal, false);
      if (clearHashFlag) clearHashIf('access');
    }

    accessBtn.addEventListener('click', () => openAccessModal(true));

    if (closeAccessModal) closeAccessModal.addEventListener('click', () => closeAccessModal(true));

    if (accessModal) {
      accessModal.addEventListener('click', (e) => {
        if (e.target === accessModal) closeAccessModal(true);
      });
    }

    if (accessForm) {
      // Clear per-field errors on input
      [nameEl, emailEl, institutionEl, purposeEl].forEach(el => {
        if (!el) return;
        el.addEventListener('input', () => {
          if (el === nameEl) setFieldError(nameEl, nameErr, !nameEl.value.trim());
          if (el === emailEl) setFieldError(emailEl, emailErr, !isValidEmail(emailEl.value.trim()));
          if (el === institutionEl) setFieldError(institutionEl, institutionErr, !institutionEl.value.trim());
          if (el === purposeEl) setFieldError(purposeEl, purposeErr, !purposeEl.value);
        });
        el.addEventListener('change', () => el.dispatchEvent(new Event('input')));
      });

      accessForm.addEventListener('submit', (e) => {
        e.preventDefault();
        resetAccessErrors();

        const name = (nameEl?.value || '').trim();
        const email = (emailEl?.value || '').trim();
        const institution = (institutionEl?.value || '').trim();
        const purpose = (purposeEl?.value || '').trim();

        let ok = true;

        if (!name) { setFieldError(nameEl, nameErr, true); ok = false; }
        if (!email || !isValidEmail(email)) { setFieldError(emailEl, emailErr, true); ok = false; }
        if (!institution) { setFieldError(institutionEl, institutionErr, true); ok = false; }
        if (!purpose) { setFieldError(purposeEl, purposeErr, true); ok = false; }

        if (!ok) {
          setAccessFeedback('error', 'Please correct the highlighted fields and resubmit.');
          return;
        }

        setAccessFeedback('success', 'Request received. You will be contacted after review.');
        accessForm.reset();
      });
    }

    /* -------------------------------------------------------------
       LAB NAVIGATOR
    ------------------------------------------------------------- */
    const labNav = document.getElementById('lab-navigator');
    const labNavBtn = document.getElementById('lab-nav-btn');
    const labNavClose = document.getElementById('lab-nav-close');

    const LAB_DOSSIERS = {
      start: {
        title: "Start Here",
        subtitle: "Entry interface",
        status: "ACTIVE",
        body: "Return to the main interface.",
        evidence: ["Public entry layer", "Programs as dossiers", "Console for controlled interaction"],
        primary: { label: "Go to Index", action: () => { window.location.href = "index.html"; } },
        secondary: { label: "Programs", action: () => { window.location.href = "capabilities.html"; } },
        updated: "—"
      },
      programs: {
        title: "Programs",
        subtitle: "This page",
        status: "ACTIVE",
        body: "Program Bay: MCAP, CHAI, Quantum Lambda, AI Scientist, Agentic Workforce.",
        evidence: ["Dossiers with maturity levels", "Evidence capsules", "Access gates"],
        primary: { label: "Close Navigator", action: () => closeLabNav(true) },
        secondary: { label: "View Note", action: () => { 
          // Demo note viewer
          const modal = document.createElement('div');
          modal.className = 'fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm modal modal-visible';
          modal.innerHTML = `
            <div class="bg-gray-900/90 border border-gray-800 rounded-xl max-w-2xl w-full mx-4 relative overflow-hidden">
              <div class="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-indigo-600 to-purple-600"></div>
              <div class="p-6">
                <div class="flex justify-between items-start mb-6">
                  <h3 class="text-xl font-bold">Program Technical Note</h3>
                  <button class="text-gray-400 hover:text-white close-note-viewer focus-ring">
                    <i class="fas fa-times"></i>
                  </button>
                </div>
                <p class="text-gray-300 mb-4">Technical notes contain evaluation protocols, assumptions, and evidence capsules. Available to qualified researchers.</p>
                <button class="w-full py-3 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg hover:opacity-90 transition close-note-viewer focus-ring">
                  Close
                </button>
              </div>
            </div>
          `;
          document.body.appendChild(modal);
          
          const closeBtn = modal.querySelector('.close-note-viewer');
          closeBtn.addEventListener('click', () => {
            toggleModal(modal, false);
            setTimeout(() => modal.remove(), 300);
          });
          modal.addEventListener('click', (e) => {
            if (e.target === modal) {
              toggleModal(modal, false);
              setTimeout(() => modal.remove(), 300);
            }
          });
          toggleModal(modal, true);
        } },
        updated: "—"
      },
      console: {
        title: "Console",
        subtitle: "Controlled chat",
        status: "DRAFT",
        body: "Controlled chat with exportable transcripts. Model access must remain server-side.",
        evidence: ["No client-side secrets", "Audit-ready transcripts", "Fail-closed behaviors"],
        primary: { label: "Open Console", action: () => { window.location.href = "chat.html"; } },
        secondary: { label: "Research", action: () => { window.location.href = "research.html"; } },
        updated: "—"
      },
      research: {
        title: "Research",
        subtitle: "Notes and briefs",
        status: "DRAFT",
        body: "Technical notes, evaluation methodology, and changelogs.",
        evidence: ["Evaluation philosophy", "Benchmarks + baselines", "Limitations and failure modes"],
        primary: { label: "Open Research", action: () => { window.location.href = "research.html"; } },
        secondary: { label: "Contact", action: () => { window.location.href = "contact.html"; } },
        updated: "—"
      },
      access: {
        title: "Access",
        subtitle: "Curated entry",
        status: "ACTIVE",
        body: "Request access for controlled demos and evaluation workflows.",
        evidence: ["Application-based", "Segmented by intent", "Controlled demos"],
        primary: { label: "Request Access", action: () => { closeLabNav(true); openAccessModal(true); } },
        secondary: { label: "Contact", action: () => { window.location.href = "contact.html"; } },
        updated: "—"
      }
    };

    const labDossierTitle = document.getElementById('lab-dossier-title');
    const labDossierSubtitle = document.getElementById('lab-dossier-subtitle');
    const labDossierStatus = document.getElementById('lab-dossier-status');
    const labDossierBody = document.getElementById('lab-dossier-body');
    const labDossierEvidence = document.getElementById('lab-dossier-evidence');
    const labDossierPrimary = document.getElementById('lab-dossier-primary');
    const labDossierSecondary = document.getElementById('lab-dossier-secondary');
    const labDossierMeta = document.getElementById('lab-dossier-meta');

    function setActiveLabNode(key) {
      document.querySelectorAll('.lab-node').forEach(btn => {
        const isActive = btn.getAttribute('data-dossier') === key;
        btn.classList.toggle('active', isActive);
        btn.setAttribute('aria-current', isActive ? 'true' : 'false');
      });
    }

    function renderLabDossier(key) {
      const d = LAB_DOSSIERS[key];
      if (!d) return;

      setActiveLabNode(key);

      labDossierTitle.textContent = d.title;
      labDossierSubtitle.textContent = d.subtitle;
      labDossierStatus.textContent = d.status;
      labDossierBody.textContent = d.body;

      labDossierEvidence.innerHTML = "";
      d.evidence.forEach(item => {
        const li = document.createElement('li');
        li.textContent = item;
        labDossierEvidence.appendChild(li);
      });

      labDossierPrimary.textContent = d.primary.label;
      labDossierPrimary.onclick = d.primary.action;

      labDossierSecondary.textContent = d.secondary.label;
      labDossierSecondary.onclick = d.secondary.action;

      labDossierMeta.innerHTML = `Last updated: <span class="text-gray-300">${d.updated}</span>`;
    }

    function openLabNav(setHashFlag = true) {
      toggleModal(labNav, true);
      if (setHashFlag) setHash('lab');
      setTimeout(() => labNav.focus(), 0);

      // Ensure a stable default selection when opened
      const alreadyActive = document.querySelector('.lab-node.active');
      if (!alreadyActive) renderLabDossier('programs');
    }

    function closeLabNav(clearHashFlag = true) {
      toggleModal(labNav, false);
      if (clearHashFlag) clearHashIf('lab');
    }

    labNavBtn.addEventListener('click', () => openLabNav(true));
    labNavClose.addEventListener('click', () => closeLabNav(true));

    labNav.addEventListener('click', (e) => {
      const shouldClose = e.target && e.target.getAttribute('data-lab-close') === 'true';
      if (shouldClose) closeLabNav(true);
    });

    document.querySelectorAll('.lab-node').forEach(btn => {
      btn.addEventListener('click', () => {
        const key = btn.getAttribute('data-dossier');
        renderLabDossier(key);
      });
    });

    /* -------------------------------------------------------------
       PROGRAM DOSSIERS
       + Hash deep-linking (#mcap, #chai, etc.)
       + Active-card state (aria-pressed)
       + popstate handling for back/forward reliability
    ------------------------------------------------------------- */
    const DOSSIERS = {
      mcap: {
        title: "MCAP",
        subtitle: "Minimal Causal Abstraction Principle",
        status: "PROTOTYPE",
        body:
          "MCAP is a proposed principle for building minimal representations of systems that preserve intervention-relevant causal structure. The public posture remains conservative until results are reproduced and benchmarked.",
        evidence: [
          "Defined abstraction objective (intervention-relevant compression)",
          "Planned: causal fidelity checks under interventions",
          "Planned: baseline comparisons (causal discovery + representation learning)"
        ],
        public:
          "Public-facing language should emphasize: a research principle, an evaluation harness, and transparent baselines. Avoid performance claims until replicated.",
        eval:
          "Evaluation focus: (1) identifiability assumptions, (2) interventional accuracy, (3) stability under distribution shift, (4) ablation against simpler baselines. Prefer preregistered protocols where possible.",
        primary: { label: "Request Access", action: () => openAccessModal(true) },
        secondary: { label: "Open Console", action: () => { window.location.href = "chat.html"; } },
        updated: "—"
      },
      chai: {
        title: "CHAI",
        subtitle: "Forecasting & regime inference stack",
        status: "CONCEPT",
        body:
          "CHAI is positioned as a forecasting pipeline that prioritizes robustness: regime detection, calibration, and evidence-first evaluation. Markets are adversarial; the protocol is the product.",
        evidence: [
          "Regime-aware framing (distribution shift explicit)",
          "Planned: walk-forward evaluation + leakage controls",
          "Planned: calibration and uncertainty reporting"
        ],
        public:
          "Public copy should emphasize methodology and evaluation (walk-forward, leakage prevention, calibration). Avoid any statement implying guaranteed returns or 'high accuracy.'",
        eval:
          "Evaluation focus: strict temporal splits, realistic transaction cost modeling, sensitivity to slippage assumptions, and robustness across assets/regimes. Report uncertainty and failure modes.",
        primary: { label: "Request Access", action: () => openAccessModal(true) },
        secondary: { label: "Open Console", action: () => { window.location.href = "chat.html"; } },
        updated: "—"
      },
      quantum_lambda: {
        title: "Quantum Lambda",
        subtitle: "High-frequency decision systems",
        status: "CONCEPT",
        body:
          "Quantum Lambda is framed as a decision system under tight latency constraints. The core requirement is explicit assumptions: data latency, execution model, risk limits, and compliance boundaries.",
        evidence: [
          "Microstructure-aware constraints (latency/slippage explicit)",
          "Planned: simulation harness with realistic fills",
          "Planned: risk controls as first-class objects"
        ],
        public:
          "Public copy should focus on systems engineering (constraints, risk, audit trails). Do not imply edge without verification. Emphasize that this is research, not a trading service.",
        eval:
          "Evaluation focus: execution realism, latency budgets, out-of-sample stability, and adversarial conditions. If assumptions are not auditable, results are not meaningful.",
        primary: { label: "Request Access", action: () => openAccessModal(true) },
        secondary: { label: "Open Console", action: () => { window.location.href = "chat.html"; } },
        updated: "—"
      },
      ai_scientist: {
        title: "AI Scientist",
        subtitle: "Hypothesis → Experiment → Report",
        status: "PROTOTYPE",
        body:
          "The AI Scientist is the lab's internal instrument: it standardizes experiments, manages baselines, logs assumptions, and produces concise research notes with uncertainty and reproducibility hooks.",
        evidence: [
          "Experiment templates (dataset → protocol → metrics)",
          "Baseline registry + ablation tracking",
          "Report generator (results + uncertainty + failure modes)"
        ],
        public:
          "Public positioning: an internal research engine for reproducibility and speed. Emphasize transparency, auditable reports, and discipline in evaluation.",
        eval:
          "Evaluation focus: reproducibility rates, time-to-result, and quality of decision-making under uncertainty. Output must be traceable from claim → experiment → evidence.",
        primary: { label: "Open Console", action: () => { window.location.href = "chat.html"; } },
        secondary: { label: "Research", action: () => { window.location.href = "research.html"; } },
        updated: "—"
      },
      agentic_workforce: {
        title: "Agentic Workforce",
        subtitle: "Autonomous workflows under governance",
        status: "CONCEPT",
        body:
          "Agentic AI employees are introduced as controlled agents, not unbounded automation: scoped permissions, action logs, approval gates, and verification layers. Governance is the differentiator.",
        evidence: [
          "Scope definitions (what agents can and cannot do)",
          "Audit trails (logs, transcripts, tool usage)",
          "Approval gates (human-in-the-loop where required)"
        ],
        public:
          "Public positioning: a governed agent platform for research ops and internal productivity. Avoid anthropomorphic claims; emphasize controls, accountability, and measurable outcomes.",
        eval:
          "Evaluation focus: error rates, containment failures avoided, auditability, and ROI in constrained workflows (data prep, experiments, reporting). Fail-closed behaviors are required.",
        primary: { label: "Request Access", action: () => openAccessModal(true) },
        secondary: { label: "Contact", action: () => { window.location.href = "contact.html"; } },
        updated: "—"
      }
    };

    const dossierTitle = document.getElementById('dossier-title');
    const dossierSubtitle = document.getElementById('dossier-subtitle');
    const dossierStatus = document.getElementById('dossier-status');
    const dossierBody = document.getElementById('dossier-body');
    const dossierEvidence = document.getElementById('dossier-evidence');
    const dossierPublic = document.getElementById('dossier-public');
    const dossierEval = document.getElementById('dossier-eval');
    const dossierPrimary = document.getElementById('dossier-primary');
    const dossierSecondary = document.getElementById('dossier-secondary');
    const dossierMeta = document.getElementById('dossier-meta');

    const programCards = Array.from(document.querySelectorAll('.program-card'));

    function setActiveCard(key) {
      programCards.forEach(btn => {
        const isMatch = btn.getAttribute('data-dossier') === key;
        btn.classList.toggle('active', isMatch);
        btn.setAttribute('aria-pressed', String(isMatch));
      });
    }

    function updateHash(key, replace = false) {
      const nextHash = `#${key}`;
      if (replace) {
        history.replaceState(null, '', nextHash);
      } else {
        history.pushState(null, '', nextHash);
      }
    }

    function normalizeHashToKey() {
      const raw = (window.location.hash || '').replace('#', '').trim().toLowerCase();
      return raw && DOSSIERS[raw] ? raw : null;
    }

    function renderDossier(key, opts = { setHash: true, replaceHash: false, setActive: true }) {
      const d = DOSSIERS[key];
      if (!d) return;

      dossierTitle.textContent = d.title;
      dossierSubtitle.textContent = d.subtitle;
      dossierStatus.textContent = d.status;

      dossierBody.textContent = d.body;

      dossierEvidence.innerHTML = "";
      d.evidence.forEach(item => {
        const li = document.createElement('li');
        li.textContent = item;
        dossierEvidence.appendChild(li);
      });

      dossierPublic.textContent = d.public;
      dossierEval.textContent = d.eval;

      dossierPrimary.textContent = d.primary.label;
      dossierPrimary.onclick = d.primary.action;

      dossierSecondary.textContent = d.secondary.label;
      dossierSecondary.onclick = d.secondary.action;

      dossierMeta.innerHTML = `Last updated: <span class="text-gray-300">${d.updated}</span>`;

      if (opts.setActive) setActiveCard(key);
      if (opts.setHash) updateHash(key, opts.replaceHash);

      if (!opts.replaceHash) {
        const isSmall = window.matchMedia && window.matchMedia('(max-width: 1023px)').matches;
        if (isSmall) dossierTitle.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    }

    programCards.forEach(btn => {
      btn.addEventListener('click', () => {
        const key = btn.getAttribute('data-dossier');
        if (!key) return;
        renderDossier(key, { setHash: true, replaceHash: false, setActive: true });
      });
    });

    (function initFromHashOrDefault() {
      const keyFromHash = normalizeHashToKey();
      const key = keyFromHash || 'mcap';
      renderDossier(key, { setHash: true, replaceHash: true, setActive: true });
    })();

    window.addEventListener('hashchange', () => {
      const keyFromHash = normalizeHashToKey();
      if (keyFromHash) {
        renderDossier(keyFromHash, { setHash: false, replaceHash: false, setActive: true });
      }
    });

    window.addEventListener('popstate', () => {
      const keyFromHash = normalizeHashToKey() || 'mcap';
      renderDossier(keyFromHash, { setHash: false, replaceHash: false, setActive: true });
    });

    /* -------------------------------------------------------------
       HASH ROUTER: handle modal hashes too
    ------------------------------------------------------------- */
    function applyHashState() {
      const key = currentHashKey();

      if (CONFIG.MODAL_HASHES.has(key)) {
        if (key === 'lab') openLabNav(false);
        if (key === 'access') openAccessModal(false);
      } else if (CONFIG.DOSSIER_HASHES.has(key)) {
        // Already handled by hashchange/popstate above
      }
    }

    window.addEventListener('hashchange', applyHashState);
    applyHashState(); // Initial load

    /* -------------------------------------------------------------
       GLOBAL ESC BEHAVIOR
    ------------------------------------------------------------- */
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape') {
        if (labNav && !labNav.classList.contains('modal-hidden')) closeLabNav(true);
        if (accessModal && !accessModal.classList.contains('modal-hidden')) closeAccessModal(true);
      }
    });

    // Initial lab dossier render
    renderLabDossier('programs');
  </script>
</body>
</html>