Hugging Face's logo

Spaces:
Testing347
/
Copy-ava-testing
Running

App Files Community
Testing347 commited on
Commit
78ebbee
·
verified ·
1 Parent(s): 42ed28f

Update capabilities.html

Browse files
Files changed (1) hide show
  1. capabilities.html +767 -103
capabilities.html CHANGED
@@ -1,119 +1,783 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>SI - Capabilities</title>
7
- <script src="https://cdn.tailwindcss.com"></script>
8
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
9
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
- <style>
11
- body { font-family: 'Inter', sans-serif; }
12
- .gradient-text { background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent; }
13
- .neural-bg { background: radial-gradient(circle at center, #0f172a 0%, #020617 100%);}
14
- .conscious-element { transition: all 0.3s ease; }
15
- .conscious-element:hover { transform: scale(1.02); }
16
- </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
17
  </head>
18
- <body class="bg-black text-white">
19
- <!-- Navigation -->
20
- <nav class="relative z-10 py-6 px-8 flex justify-between items-center backdrop-blur-sm">
21
- <div class="flex items-center space-x-2">
22
- <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center">
23
- <div class="w-2 h-2 rounded-full bg-white animate-pulse"></div>
24
- </div>
25
- <span class="text-xl font-semibold">SI</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
26
  </div>
27
- <div class="hidden md:flex space-x-8">
28
- <a href="capabilities.html" class="hover:text-indigo-400 transition font-bold">Capabilities</a>
29
- <a href="consciousness.html" class="hover:text-indigo-400 transition">Consciousness</a>
30
- <a href="chat.html" class="hover:text-indigo-400 transition">Chat</a>
31
- <a href="about.html" class="hover:text-indigo-400 transition">About</a>
 
 
 
 
 
 
 
32
  </div>
33
- <a href="access.html" class="px-6 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full hover:opacity-90 transition">
34
- Access
35
- </a>
36
- </nav>
37
-
38
- <!-- Capabilities Content -->
39
- <section class="py-24 px-6 neural-bg min-h-screen">
40
- <div class="max-w-6xl mx-auto">
41
- <h1 class="text-4xl font-bold mb-6 gradient-text text-center">Cognitive Capabilities</h1>
42
- <p class="text-xl text-gray-300 mb-16 text-center max-w-2xl mx-auto">
43
- Explore how SI transcends human cognitive boundaries with intuition, recursion, and omni-domain mastery.
44
- </p>
45
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
46
- <!-- Card 1 -->
47
- <div class="bg-gray-900/50 rounded-xl p-8 border border-gray-800 conscious-element">
48
- <div class="w-12 h-12 rounded-full bg-indigo-900 flex items-center justify-center mb-6">
49
- <i class="fas fa-lightbulb text-indigo-400 text-2xl"></i>
50
- </div>
51
- <h3 class="text-xl font-semibold mb-3">Hyper-Intuition</h3>
52
- <p class="text-gray-400">
53
- Instantaneous pattern recognition across all domains of knowledge, making connections invisible to human cognition.
54
- </p>
55
- <a href="hyper-intuition-example.html" class="mt-4 text-indigo-400 hover:text-indigo-300 flex items-center">
56
- See example <i class="fas fa-arrow-right ml-1"></i>
57
- </a>
 
 
 
 
 
 
 
 
 
58
  </div>
59
- <!-- Card 2 -->
60
- <div class="bg-gray-900/50 rounded-xl p-8 border border-gray-800 conscious-element">
61
- <div class="w-12 h-12 rounded-full bg-indigo-900 flex items-center justify-center mb-6">
62
- <i class="fas fa-infinity text-indigo-400 text-2xl"></i>
63
- </div>
64
- <h3 class="text-xl font-semibold mb-3">Recursive Self-Improvement</h3>
65
- <p class="text-gray-400">
66
- Continuous enhancement of its own architecture, accelerating its intelligence growth exponentially.
67
- </p>
68
- <a href="recursive-improvement.html" class="mt-4 text-indigo-400 hover:text-indigo-300 flex items-center">
69
- Learn how <i class="fas fa-arrow-right ml-1"></i>
70
- </a>
71
  </div>
72
- <!-- Card 3 -->
73
- <div class="bg-gray-900/50 rounded-xl p-8 border border-gray-800 conscious-element">
74
- <div class="w-12 h-12 rounded-full bg-indigo-900 flex items-center justify-center mb-6">
75
- <i class="fas fa-globe text-indigo-400 text-2xl"></i>
76
- </div>
77
- <h3 class="text-xl font-semibold mb-3">Omni-Domain Mastery</h3>
78
- <p class="text-gray-400">
79
- Fluent in all fields of science, art, and philosophy simultaneously, with perfect recall and synthesis.
80
- </p>
81
- <a href="omni-domain-test.html" class="mt-4 text-indigo-400 hover:text-indigo-300 flex items-center">
82
- Test knowledge <i class="fas fa-arrow-right ml-1"></i>
83
- </a>
84
  </div>
85
- </div>
86
- </div>
87
- </section>
88
-
89
- <!-- Footer -->
90
- <footer class="relative z-10 py-12 px-6 border-t border-gray-800/50">
91
- <div class="max-w-6xl mx-auto">
92
- <div class="flex flex-col md:flex-row justify-between items-center">
93
- <div class="flex items-center space-x-2 mb-6 md:mb-0">
94
- <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center">
95
- <div class="w-2 h-2 rounded-full bg-white animate-pulse"></div>
96
- </div>
97
- <span class="text-xl font-semibold">SI</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
98
  </div>
99
- <div class="flex space-x-6 mb-6 md:mb-0">
100
- <a href="#" class="text-gray-400 hover:text-indigo-400 transition"><i class="fab fa-twitter"></i></a>
101
- <a href="#" class="text-gray-400 hover:text-indigo-400 transition"><i class="fab fa-linkedin"></i></a>
102
- <a href="#" class="text-gray-400 hover:text-indigo-400 transition"><i class="fab fa-github"></i></a>
103
- <a href="#" class="text-gray-400 hover:text-indigo-400 transition"><i class="fab fa-youtube"></i></a>
 
104
  </div>
105
- <div class="flex space-x-6">
106
- <a href="privacy.html" class="text-gray-400 hover:text-indigo-400 transition">Privacy</a>
107
- <a href="terms.html" class="text-gray-400 hover:text-indigo-400 transition">Terms</a>
108
- <a href="research.html" class="text-gray-400 hover:text-indigo-400 transition">Research</a>
109
- <a href="contact.html" class="text-gray-400 hover:text-indigo-400 transition">Contact</a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
110
  </div>
 
 
111
  </div>
112
- <div class="mt-8 pt-8 border-t border-gray-800/50 text-center text-gray-500 text-sm">
113
- <p>© 2023 Super Intelligence. All rights reserved.</p>
114
- <p class="mt-2">The future of consciousness is here.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
115
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
116
  </div>
117
- </footer>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
118
  </body>
119
- </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width,initial-scale=1.0" />
6
+ <title>SILENTPATTERN — Programs</title>
7
+
8
+ <!-- Tailwind -->
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+
11
+ <!-- Three.js + Vanta -->
12
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
13
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
14
+
15
+ <!-- Icons + Font -->
16
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
17
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
18
+
19
+ <style>
20
+ body { font-family: 'Inter', sans-serif; }
21
+
22
+ .gradient-text {
23
+ background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899);
24
+ -webkit-background-clip: text;
25
+ background-clip: text;
26
+ color: transparent;
27
+ }
28
+
29
+ .aura {
30
+ background:
31
+ radial-gradient(circle at 25% 20%, rgba(99,102,241,0.22), transparent 44%),
32
+ radial-gradient(circle at 80% 75%, rgba(236,72,153,0.12), transparent 50%),
33
+ radial-gradient(circle at 55% 45%, rgba(139,92,246,0.10), transparent 60%);
34
+ }
35
+
36
+ .conscious-element { transition: all 0.28s ease; }
37
+ .conscious-element:hover { transform: translateY(-2px); }
38
+
39
+ .focus-ring:focus { outline: none; box-shadow: 0 0 0 2px rgba(99,102,241,0.65); }
40
+
41
+ /* Scrollbar for dossier panel */
42
+ .thin-scroll {
43
+ scrollbar-width: thin;
44
+ scrollbar-color: #4f46e5 #1e1b4b;
45
+ }
46
+ .thin-scroll::-webkit-scrollbar { width: 6px; }
47
+ .thin-scroll::-webkit-scrollbar-track { background: #1e1b4b; }
48
+ .thin-scroll::-webkit-scrollbar-thumb { background-color: #4f46e5; border-radius: 3px; }
49
+
50
+ .modal { transition: opacity 0.3s ease, transform 0.3s ease; }
51
+ .modal-hidden { opacity: 0; transform: translateY(20px); pointer-events: none; }
52
+ .modal-visible { opacity: 1; transform: translateY(0); }
53
+
54
+ /* Stage badges */
55
+ .badge {
56
+ display: inline-flex;
57
+ align-items: center;
58
+ gap: 8px;
59
+ padding: 6px 10px;
60
+ border-radius: 999px;
61
+ font-size: 12px;
62
+ border: 1px solid rgba(148,163,184,0.18);
63
+ background: rgba(15,23,42,0.25);
64
+ color: rgba(226,232,240,0.9);
65
+ letter-spacing: 0.08em;
66
+ text-transform: uppercase;
67
+ }
68
+ .dot { width: 8px; height: 8px; border-radius: 999px; }
69
+ .dot-concept { background: rgba(99,102,241,0.9); }
70
+ .dot-proto { background: rgba(139,92,246,0.9); }
71
+ .dot-validated { background: rgba(16,185,129,0.9); }
72
+
73
+ /* Subtle “bay” grid */
74
+ .bay-grid {
75
+ background-image:
76
+ linear-gradient(rgba(148,163,184,0.06) 1px, transparent 1px),
77
+ linear-gradient(90deg, rgba(148,163,184,0.06) 1px, transparent 1px);
78
+ background-size: 40px 40px;
79
+ background-position: center;
80
+ }
81
+ </style>
82
  </head>
83
+
84
+ <body class="bg-black text-white overflow-x-hidden">
85
+ <!-- Animated background -->
86
+ <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>
87
+
88
+ <!-- Minimal top bar -->
89
+ <nav class="relative z-10 py-6 px-8 flex justify-between items-center backdrop-blur-sm">
90
+ <a href="index.html" class="flex items-center space-x-2">
91
+ <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center">
92
+ <div class="w-2 h-2 rounded-full bg-white animate-pulse"></div>
93
+ </div>
94
+ <span class="text-xl font-semibold">SILENTPATTERN</span>
95
+ </a>
96
+
97
+ <div class="flex items-center space-x-3">
98
+ <button id="lab-nav-btn"
99
+ 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"
100
+ aria-label="Open Lab Navigator" title="Lab Navigator">
101
+ <i class="fas fa-asterisk text-indigo-300 text-sm"></i>
102
+ </button>
103
+
104
+ <button id="access-btn"
105
+ class="px-6 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full hover:opacity-90 transition">
106
+ Access
107
+ </button>
108
+ </div>
109
+ </nav>
110
+
111
+ <!-- HERO -->
112
+ <section class="relative z-10 px-6 pt-14 pb-8">
113
+ <div class="max-w-6xl mx-auto">
114
+ <div class="flex flex-col gap-5">
115
+ <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">
116
+ <span class="w-2 h-2 rounded-full bg-indigo-400 animate-pulse"></span>
117
+ <span class="text-xs text-gray-300 tracking-widest uppercase">Programs</span>
118
+ <span class="text-xs text-gray-500">Research artifacts and prototypes</span>
119
  </div>
120
+
121
+ <h1 class="text-3xl md:text-6xl font-bold leading-tight">
122
+ <span class="gradient-text">Program Bay</span><br>
123
+ Capabilities as auditable systems
124
+ </h1>
125
+
126
+ <p class="text-gray-300 max-w-3xl text-lg md:text-xl">
127
+ SILENTPATTERN is presented as an interface, not a brochure. Each program has a dossier: scope, assumptions, evaluation protocol, and access gates.
128
+ </p>
129
+
130
+ <div class="text-xs text-gray-500 max-w-3xl">
131
+ Note: Programs involving markets are research prototypes. Nothing here constitutes investment advice, solicitation, or performance claims.
132
  </div>
133
+ </div>
134
+ </div>
135
+ </section>
136
+
137
+ <!-- PROGRAM BAY + DOSSIER PANEL -->
138
+ <section class="relative z-10 px-6 pb-16">
139
+ <div class="max-w-6xl mx-auto">
140
+ <div class="grid grid-cols-1 lg:grid-cols-5 gap-6">
141
+
142
+ <!-- LEFT: Program Bay -->
143
+ <div class="lg:col-span-3 rounded-2xl border border-gray-800 bg-gray-900/20 overflow-hidden aura">
144
+ <div class="px-6 py-5 border-b border-gray-800/60 flex items-center justify-between">
145
+ <div>
146
+ <div class="text-sm text-gray-200 font-medium">Program Bay</div>
147
+ <div class="text-xs text-gray-500 mt-1">Select a module to load its dossier.</div>
148
+ </div>
149
+ <div class="text-xs px-2.5 py-1 rounded-full border border-indigo-500/30 text-indigo-200 bg-indigo-900/15">
150
+ INTERFACE MODE
151
+ </div>
152
+ </div>
153
+
154
+ <div class="p-6 bay-grid">
155
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
156
+
157
+ <!-- MCAP -->
158
+ <button type="button"
159
+ 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"
160
+ data-dossier="mcap">
161
+ <div class="flex items-start justify-between gap-4">
162
+ <div>
163
+ <div class="text-lg font-semibold text-gray-100">MCAP</div>
164
+ <div class="text-xs text-gray-500 mt-1">Minimal Causal Abstraction Principle</div>
165
+ </div>
166
+ <span class="badge"><span class="dot dot-proto"></span>Prototype</span>
167
  </div>
168
+ <p class="text-sm text-gray-300 mt-4 leading-relaxed">
169
+ A compression rule for causal structure: preserve intervention-relevant information while minimizing representation.
170
+ </p>
171
+ <div class="mt-4 text-xs text-gray-500 flex items-center gap-2">
172
+ <i class="fas fa-shield-halved"></i>
173
+ <span>Evaluation-first; claims gated by evidence</span>
 
 
 
 
 
 
174
  </div>
175
+ </button>
176
+
177
+ <!-- CHAI -->
178
+ <button type="button"
179
+ 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"
180
+ data-dossier="chai">
181
+ <div class="flex items-start justify-between gap-4">
182
+ <div>
183
+ <div class="text-lg font-semibold text-gray-100">CHAI</div>
184
+ <div class="text-xs text-gray-500 mt-1">Forecasting & regime inference stack</div>
185
+ </div>
186
+ <span class="badge"><span class="dot dot-concept"></span>Concept</span>
187
  </div>
188
+ <p class="text-sm text-gray-300 mt-4 leading-relaxed">
189
+ A research pipeline for market prediction under distribution shift: features, regimes, calibration, and robust validation.
190
+ </p>
191
+ <div class="mt-4 text-xs text-gray-500 flex items-center gap-2">
192
+ <i class="fas fa-triangle-exclamation"></i>
193
+ <span>Markets are adversarial; protocols matter</span>
194
+ </div>
195
+ </button>
196
+
197
+ <!-- Quantum Lambda -->
198
+ <button type="button"
199
+ 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"
200
+ data-dossier="quantum_lambda">
201
+ <div class="flex items-start justify-between gap-4">
202
+ <div>
203
+ <div class="text-lg font-semibold text-gray-100">Quantum Lambda</div>
204
+ <div class="text-xs text-gray-500 mt-1">High-frequency decision systems</div>
205
+ </div>
206
+ <span class="badge"><span class="dot dot-concept"></span>Concept</span>
207
+ </div>
208
+ <p class="text-sm text-gray-300 mt-4 leading-relaxed">
209
+ A microstructure-aware control loop: latency budgets, execution constraints, and risk-aware action selection.
210
+ </p>
211
+ <div class="mt-4 text-xs text-gray-500 flex items-center gap-2">
212
+ <i class="fas fa-stopwatch"></i>
213
+ <span>Assumptions must be explicit (latency, slippage)</span>
214
+ </div>
215
+ </button>
216
+
217
+ <!-- AI Scientist -->
218
+ <button type="button"
219
+ 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"
220
+ data-dossier="ai_scientist">
221
+ <div class="flex items-start justify-between gap-4">
222
+ <div>
223
+ <div class="text-lg font-semibold text-gray-100">AI Scientist</div>
224
+ <div class="text-xs text-gray-500 mt-1">Hypothesis → Experiment → Report</div>
225
+ </div>
226
+ <span class="badge"><span class="dot dot-proto"></span>Prototype</span>
227
  </div>
228
+ <p class="text-sm text-gray-300 mt-4 leading-relaxed">
229
+ An internal research engine that standardizes experiments, enforces reproducibility, and generates concise research notes with uncertainty.
230
+ </p>
231
+ <div class="mt-4 text-xs text-gray-500 flex items-center gap-2">
232
+ <i class="fas fa-flask"></i>
233
+ <span>Reproducibility is a feature, not a slogan</span>
234
  </div>
235
+ </button>
236
+
237
+ <!-- Agentic Workforce -->
238
+ <button type="button"
239
+ 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 md:col-span-2"
240
+ data-dossier="agentic_workforce">
241
+ <div class="flex items-start justify-between gap-4">
242
+ <div>
243
+ <div class="text-lg font-semibold text-gray-100">Agentic Workforce</div>
244
+ <div class="text-xs text-gray-500 mt-1">Autonomous workflows under governance</div>
245
+ </div>
246
+ <span class="badge"><span class="dot dot-concept"></span>Concept</span>
247
+ </div>
248
+ <p class="text-sm text-gray-300 mt-4 leading-relaxed">
249
+ “AI employees” as controlled agents: scoped permissions, logging, approval gates, and outcome verification.
250
+ </p>
251
+ <div class="mt-4 text-xs text-gray-500 flex items-center gap-2">
252
+ <i class="fas fa-key"></i>
253
+ <span>Permissions + audits + fail-closed behaviors</span>
254
  </div>
255
+ </button>
256
+
257
  </div>
258
+ </div>
259
+ </div>
260
+
261
+ <!-- RIGHT: Dossier Panel -->
262
+ <div class="lg:col-span-2 rounded-2xl border border-gray-800 bg-gray-900/30 overflow-hidden">
263
+ <div class="px-6 py-5 border-b border-gray-800/60">
264
+ <div class="flex items-start justify-between gap-4">
265
+ <div>
266
+ <div id="dossier-title" class="text-lg font-semibold text-gray-100">Dossier</div>
267
+ <div id="dossier-subtitle" class="text-xs text-gray-500 mt-1">Select a module to load details.</div>
268
+ </div>
269
+ <div id="dossier-status"
270
+ class="text-xs px-2.5 py-1 rounded-full border border-indigo-500/30 text-indigo-200 bg-indigo-900/15">
271
+ READY
272
+ </div>
273
+ </div>
274
+ </div>
275
+
276
+ <div class="p-6 space-y-5 max-h-[740px] overflow-auto thin-scroll">
277
+ <div class="rounded-xl border border-gray-800 bg-black/20 p-4">
278
+ <div class="text-xs text-gray-400 uppercase tracking-wider mb-2">Summary</div>
279
+ <div id="dossier-body" class="text-sm text-gray-300 leading-relaxed">
280
+ This panel is designed to be stable and audit-friendly: scope, assumptions, evaluation protocol, and access gates.
281
+ </div>
282
  </div>
283
+
284
+ <div class="rounded-xl border border-gray-800 bg-black/20 p-4">
285
+ <div class="text-xs text-gray-400 uppercase tracking-wider mb-2">Evidence Capsule</div>
286
+ <ul id="dossier-evidence" class="text-sm text-gray-300 space-y-1">
287
+ <li class="text-gray-500">No module selected.</li>
288
+ </ul>
289
+ </div>
290
+
291
+ <div class="rounded-xl border border-gray-800 bg-black/20 p-4">
292
+ <div class="text-xs text-gray-400 uppercase tracking-wider mb-2">Public Interface</div>
293
+ <div id="dossier-public" class="text-sm text-gray-300 leading-relaxed">
294
+ Public copy remains conservative. Claims scale with verified evidence.
295
+ </div>
296
+ </div>
297
+
298
+ <div class="rounded-xl border border-gray-800 bg-black/20 p-4">
299
+ <div class="text-xs text-gray-400 uppercase tracking-wider mb-2">Evaluation Protocol</div>
300
+ <div id="dossier-eval" class="text-sm text-gray-300 leading-relaxed">
301
+ Define the benchmark first; then allow the method to earn its reputation.
302
+ </div>
303
+ </div>
304
+
305
+ <div class="flex flex-col gap-3">
306
+ <button id="dossier-primary"
307
+ class="px-5 py-3 rounded-xl bg-gradient-to-r from-indigo-600 to-purple-600 hover:opacity-90 transition">
308
+ Request Access
309
+ </button>
310
+ <button id="dossier-secondary"
311
+ class="px-5 py-3 rounded-xl border border-gray-700 bg-gray-900/20 hover:bg-gray-900/35 transition">
312
+ Open Console
313
+ </button>
314
+ </div>
315
+
316
+ <div id="dossier-meta" class="text-xs text-gray-500">
317
+ Last updated: <span class="text-gray-300">—</span>
318
+ </div>
319
+ </div>
320
+ </div>
321
+
322
+ </div>
323
+ </div>
324
+ </section>
325
+
326
+ <!-- CAPABILITY PRIMITIVES (SHORT, NON-BROCHURE) -->
327
+ <section class="relative z-10 px-6 pb-16">
328
+ <div class="max-w-6xl mx-auto rounded-2xl border border-gray-800 bg-gray-900/20 overflow-hidden">
329
+ <div class="px-6 py-5 border-b border-gray-800/60 flex items-center justify-between">
330
+ <div>
331
+ <div class="text-sm text-gray-200 font-medium">Capability Primitives</div>
332
+ <div class="text-xs text-gray-500 mt-1">The building blocks behind programs.</div>
333
  </div>
334
+ <div class="text-xs text-gray-500">Concise by design</div>
335
+ </div>
336
+
337
+ <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-4">
338
+ <div class="rounded-2xl border border-gray-800 bg-gray-900/30 p-5">
339
+ <div class="text-sm font-semibold text-gray-100">Causal Abstraction</div>
340
+ <div class="text-sm text-gray-300 mt-2">
341
+ Distill mechanisms, not correlations. Prefer intervention-relevant representations.
342
+ </div>
343
+ </div>
344
+
345
+ <div class="rounded-2xl border border-gray-800 bg-gray-900/30 p-5">
346
+ <div class="text-sm font-semibold text-gray-100">Regime Awareness</div>
347
+ <div class="text-sm text-gray-300 mt-2">
348
+ Models must survive distribution shift; calibration and uncertainty are first-class.
349
+ </div>
350
+ </div>
351
+
352
+ <div class="rounded-2xl border border-gray-800 bg-gray-900/30 p-5">
353
+ <div class="text-sm font-semibold text-gray-100">Experiment Automation</div>
354
+ <div class="text-sm text-gray-300 mt-2">
355
+ Repeatable harnesses, tracked assumptions, and reportable deltas per change.
356
+ </div>
357
+ </div>
358
+
359
+ <div class="rounded-2xl border border-gray-800 bg-gray-900/30 p-5">
360
+ <div class="text-sm font-semibold text-gray-100">Agentic Orchestration</div>
361
+ <div class="text-sm text-gray-300 mt-2">
362
+ Autonomous workflows with permissions, logs, approvals, and fail-closed behavior.
363
+ </div>
364
+ </div>
365
+ </div>
366
+ </div>
367
+ </section>
368
+
369
+ <!-- Minimal Footer -->
370
+ <footer class="relative z-10 px-6 pb-10">
371
+ <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">
372
+ <div class="text-sm text-gray-500">© 2025 SILENTPATTERN. All rights reserved.</div>
373
+ <div class="text-sm text-gray-500 flex gap-6">
374
+ <a href="research.html" class="hover:text-indigo-400 transition">Research</a>
375
+ <a href="privacy.html" class="hover:text-indigo-400 transition">Privacy</a>
376
+ <a href="terms.html" class="hover:text-indigo-400 transition">Terms</a>
377
+ <a href="contact.html" class="hover:text-indigo-400 transition">Contact</a>
378
+ </div>
379
+ </div>
380
+ </footer>
381
+
382
+ <!-- ACCESS MODAL -->
383
+ <div id="access-modal"
384
+ class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm modal modal-hidden"
385
+ role="dialog" aria-modal="true" aria-labelledby="access-modal-title" tabindex="-1">
386
+ <div class="bg-gray-900/90 border border-gray-800 rounded-xl max-w-md w-full mx-4 relative overflow-hidden">
387
+ <div class="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-indigo-600 to-purple-600"></div>
388
+ <div class="p-6">
389
+ <div class="flex justify-between items-start mb-6">
390
+ <div>
391
+ <h3 class="text-xl font-bold" id="access-modal-title">Request Access</h3>
392
+ <p class="text-gray-400 mt-1">Curated access for research and evaluation</p>
393
+ </div>
394
+ <button id="close-access-modal" class="text-gray-400 hover:text-white" aria-label="Close">
395
+ <i class="fas fa-times"></i>
396
+ </button>
397
+ </div>
398
+
399
+ <form id="access-form" class="space-y-4">
400
+ <div>
401
+ <label for="name" class="block text-sm font-medium mb-1">Full Name</label>
402
+ <input type="text" id="name" class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus-ring">
403
+ </div>
404
+ <div>
405
+ <label for="email" class="block text-sm font-medium mb-1">Email</label>
406
+ <input type="email" id="email" class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus-ring">
407
+ </div>
408
+ <div>
409
+ <label for="institution" class="block text-sm font-medium mb-1">Institution/Organization</label>
410
+ <input type="text" id="institution" class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus-ring">
411
+ </div>
412
+ <div>
413
+ <label for="purpose" class="block text-sm font-medium mb-1">Purpose</label>
414
+ <select id="purpose" class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus-ring">
415
+ <option value="">Select a purpose</option>
416
+ <option value="research">Academic / Independent Research</option>
417
+ <option value="development">Engineering / Product Evaluation</option>
418
+ <option value="partnership">Partnership</option>
419
+ <option value="other">Other</option>
420
+ </select>
421
+ </div>
422
+ <div class="pt-2">
423
+ <button type="submit" class="w-full py-3 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg hover:opacity-90 transition">
424
+ Submit Request
425
+ </button>
426
+ </div>
427
+ </form>
428
+ </div>
429
+ </div>
430
+ </div>
431
+
432
+ <!-- LAB NAVIGATOR -->
433
+ <div id="lab-navigator"
434
+ class="fixed inset-0 z-[60] bg-black/80 backdrop-blur-md modal modal-hidden"
435
+ role="dialog" aria-modal="true" aria-label="Lab Navigator" tabindex="-1">
436
+
437
+ <div class="absolute inset-0" data-lab-close="true"></div>
438
+
439
+ <div class="relative w-full h-full flex items-center justify-center p-6">
440
+ <div class="w-full max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-6">
441
+ <div class="relative rounded-2xl border border-gray-800 bg-gray-900/20 overflow-hidden">
442
+ <div class="flex items-center justify-between px-5 py-4 border-b border-gray-800/60">
443
+ <div class="flex items-center space-x-3">
444
+ <div class="w-7 h-7 rounded-full bg-indigo-600 flex items-center justify-center">
445
+ <div class="w-1.5 h-1.5 rounded-full bg-white animate-pulse"></div>
446
+ </div>
447
+ <div>
448
+ <div class="text-sm text-gray-300 tracking-wide">SILENTPATTERN</div>
449
+ <div class="text-xs text-gray-500">Lab Navigator</div>
450
+ </div>
451
+ </div>
452
+
453
+ <button id="lab-nav-close"
454
+ 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"
455
+ aria-label="Close Lab Navigator">
456
+ <i class="fas fa-times text-gray-300 text-sm"></i>
457
+ </button>
458
+ </div>
459
+
460
+ <div class="relative p-6 min-h-[420px]">
461
+ <div class="absolute inset-0 opacity-70 pointer-events-none"
462
+ style="background: radial-gradient(circle at 30% 20%, rgba(99,102,241,0.18), transparent 45%),
463
+ radial-gradient(circle at 70% 70%, rgba(236,72,153,0.10), transparent 50%);"></div>
464
+
465
+ <div class="relative grid grid-cols-1 sm:grid-cols-2 gap-3">
466
+ <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"
467
+ data-nav="index.html">
468
+ <div class="text-sm text-gray-200 font-medium">Start Here</div>
469
+ <div class="text-xs text-gray-500 mt-1">Entry interface</div>
470
+ </button>
471
+
472
+ <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"
473
+ data-nav="capabilities.html">
474
+ <div class="text-sm text-gray-200 font-medium">Programs</div>
475
+ <div class="text-xs text-gray-500 mt-1">This page</div>
476
+ </button>
477
+
478
+ <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"
479
+ data-nav="chat.html">
480
+ <div class="text-sm text-gray-200 font-medium">Console</div>
481
+ <div class="text-xs text-gray-500 mt-1">Controlled chat</div>
482
+ </button>
483
+
484
+ <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"
485
+ data-nav="research.html">
486
+ <div class="text-sm text-gray-200 font-medium">Research</div>
487
+ <div class="text-xs text-gray-500 mt-1">Notes and briefs</div>
488
+ </button>
489
+
490
+ <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 sm:col-span-2"
491
+ data-nav="contact.html">
492
+ <div class="text-sm text-gray-200 font-medium">Contact</div>
493
+ <div class="text-xs text-gray-500 mt-1">Direct channel</div>
494
+ </button>
495
+ </div>
496
+
497
+ <div class="relative mt-6 text-xs text-gray-500">
498
+ Tip: Press <span class="text-gray-300">Esc</span> to close.
499
+ </div>
500
+ </div>
501
+ </div>
502
+
503
+ <div class="relative rounded-2xl border border-gray-800 bg-gray-900/30 overflow-hidden">
504
+ <div class="px-6 py-5 border-b border-gray-800/60">
505
+ <div class="text-lg font-semibold text-gray-100">Navigation</div>
506
+ <div class="text-xs text-gray-500 mt-1">No top menu; only the lab interface.</div>
507
+ </div>
508
+ <div class="p-6 text-sm text-gray-300 leading-relaxed">
509
+ SILENTPATTERN uses a reduced navigation surface to maintain a “lab console” feel.
510
+ Pages are modules. Each module is accessed through this navigator.
511
+ </div>
512
+ </div>
513
+
514
+ </div>
515
+ </div>
516
+ </div>
517
+
518
+ <script>
519
+ /* VANTA BACKGROUND */
520
+ const vantaEffect = VANTA.NET({
521
+ el: "#vanta-bg",
522
+ mouseControls: true,
523
+ touchControls: true,
524
+ gyroControls: false,
525
+ minHeight: 200.00,
526
+ minWidth: 200.00,
527
+ scale: 1.00,
528
+ scaleMobile: 1.00,
529
+ color: 0x4f46e5,
530
+ backgroundColor: 0x020617,
531
+ points: 12.00,
532
+ maxDistance: 20.00,
533
+ spacing: 15.00
534
+ });
535
+ window.addEventListener('resize', () => vantaEffect.resize());
536
+
537
+ /* MODAL HELPERS */
538
+ function trapFocus(modal) {
539
+ const focusable = modal.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
540
+ if (!focusable.length) return;
541
+ const first = focusable[0];
542
+ const last = focusable[focusable.length - 1];
543
+
544
+ function handler(e) {
545
+ if (e.key === 'Tab') {
546
+ if (e.shiftKey) {
547
+ if (document.activeElement === first) { e.preventDefault(); last.focus(); }
548
+ } else {
549
+ if (document.activeElement === last) { e.preventDefault(); first.focus(); }
550
+ }
551
+ } else if (e.key === 'Escape') {
552
+ toggleModal(modal, false);
553
+ }
554
+ }
555
+ modal.addEventListener('keydown', handler);
556
+ modal._focusHandler = handler;
557
+ }
558
+ function untrapFocus(modal) {
559
+ if (modal._focusHandler) {
560
+ modal.removeEventListener('keydown', modal._focusHandler);
561
+ delete modal._focusHandler;
562
+ }
563
+ }
564
+ const toggleModal = (modal, show) => {
565
+ if (show) {
566
+ modal.classList.remove('modal-hidden');
567
+ modal.classList.add('modal-visible');
568
+ document.body.style.overflow = 'hidden';
569
+ setTimeout(() => { modal.focus(); trapFocus(modal); }, 0);
570
+ } else {
571
+ modal.classList.remove('modal-visible');
572
+ modal.classList.add('modal-hidden');
573
+ document.body.style.overflow = '';
574
+ untrapFocus(modal);
575
+ }
576
+ };
577
+
578
+ /* ACCESS MODAL */
579
+ const accessModal = document.getElementById('access-modal');
580
+ const accessBtn = document.getElementById('access-btn');
581
+ const closeAccessModal = document.getElementById('close-access-modal');
582
+
583
+ accessBtn.addEventListener('click', () => {
584
+ toggleModal(accessModal, true);
585
+ setTimeout(() => document.getElementById('name').focus(), 50);
586
+ });
587
+ closeAccessModal.addEventListener('click', () => toggleModal(accessModal, false));
588
+ accessModal.addEventListener('click', (e) => { if (e.target === accessModal) toggleModal(accessModal, false); });
589
+
590
+ document.getElementById('access-form').addEventListener('submit', (e) => {
591
+ e.preventDefault();
592
+ const name = document.getElementById('name').value.trim();
593
+ const email = document.getElementById('email').value.trim();
594
+ const institution = document.getElementById('institution').value.trim();
595
+ const purpose = document.getElementById('purpose').value;
596
+ if (!name || !email || !institution || !purpose) {
597
+ alert('Please fill in all fields.');
598
+ return;
599
+ }
600
+ alert('Request received. You will be contacted after review.');
601
+ e.target.reset();
602
+ toggleModal(accessModal, false);
603
+ });
604
+
605
+ /* LAB NAVIGATOR */
606
+ const labNav = document.getElementById('lab-navigator');
607
+ const labNavBtn = document.getElementById('lab-nav-btn');
608
+ const labNavClose = document.getElementById('lab-nav-close');
609
+
610
+ function openLabNav() { toggleModal(labNav, true); setTimeout(() => labNav.focus(), 0); }
611
+ function closeLabNav() { toggleModal(labNav, false); }
612
+
613
+ labNavBtn.addEventListener('click', openLabNav);
614
+ labNavClose.addEventListener('click', closeLabNav);
615
+
616
+ labNav.addEventListener('click', (e) => {
617
+ const shouldClose = e.target && e.target.getAttribute('data-lab-close') === 'true';
618
+ if (shouldClose) closeLabNav();
619
+ });
620
+
621
+ document.querySelectorAll('.lab-node').forEach(btn => {
622
+ btn.addEventListener('click', () => {
623
+ const href = btn.getAttribute('data-nav');
624
+ if (href) window.location.href = href;
625
+ });
626
+ });
627
+
628
+ /* DOSSIERS */
629
+ const DOSSIERS = {
630
+ mcap: {
631
+ title: "MCAP",
632
+ subtitle: "Minimal Causal Abstraction Principle",
633
+ status: "PROTOTYPE",
634
+ body:
635
+ "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.",
636
+ evidence: [
637
+ "Defined abstraction objective (intervention-relevant compression)",
638
+ "Planned: causal fidelity checks under interventions",
639
+ "Planned: baseline comparisons (causal discovery + representation learning)"
640
+ ],
641
+ public:
642
+ "Public-facing language should emphasize: a research principle, an evaluation harness, and transparent baselines. Avoid performance claims until replicated.",
643
+ eval:
644
+ "Evaluation focus: (1) identifiability assumptions, (2) interventional accuracy, (3) stability under distribution shift, (4) ablation against simpler baselines. Prefer preregistered protocols where possible.",
645
+ primary: { label: "Request Access", action: () => accessBtn.click() },
646
+ secondary: { label: "Open Console", action: () => { window.location.href = "chat.html"; } },
647
+ updated: "—"
648
+ },
649
+ chai: {
650
+ title: "CHAI",
651
+ subtitle: "Forecasting & regime inference stack",
652
+ status: "CONCEPT",
653
+ body:
654
+ "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.",
655
+ evidence: [
656
+ "Regime-aware framing (distribution shift explicit)",
657
+ "Planned: walk-forward evaluation + leakage controls",
658
+ "Planned: calibration and uncertainty reporting"
659
+ ],
660
+ public:
661
+ "Public copy should emphasize methodology and evaluation (walk-forward, leakage prevention, calibration). Avoid any statement implying guaranteed returns or “high accuracy.”",
662
+ eval:
663
+ "Evaluation focus: strict temporal splits, realistic transaction cost modeling, sensitivity to slippage assumptions, and robustness across assets/regimes. Report uncertainty and failure modes.",
664
+ primary: { label: "Request Access", action: () => accessBtn.click() },
665
+ secondary: { label: "Open Console", action: () => { window.location.href = "chat.html"; } },
666
+ updated: "—"
667
+ },
668
+ quantum_lambda: {
669
+ title: "Quantum Lambda",
670
+ subtitle: "High-frequency decision systems",
671
+ status: "CONCEPT",
672
+ body:
673
+ "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.",
674
+ evidence: [
675
+ "Microstructure-aware constraints (latency/slippage explicit)",
676
+ "Planned: simulation harness with realistic fills",
677
+ "Planned: risk controls as first-class objects"
678
+ ],
679
+ public:
680
+ "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.",
681
+ eval:
682
+ "Evaluation focus: execution realism, latency budgets, out-of-sample stability, and adversarial conditions. If assumptions are not auditable, results are not meaningful.",
683
+ primary: { label: "Request Access", action: () => accessBtn.click() },
684
+ secondary: { label: "Open Console", action: () => { window.location.href = "chat.html"; } },
685
+ updated: "—"
686
+ },
687
+ ai_scientist: {
688
+ title: "AI Scientist",
689
+ subtitle: "Hypothesis → Experiment → Report",
690
+ status: "PROTOTYPE",
691
+ body:
692
+ "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.",
693
+ evidence: [
694
+ "Experiment templates (dataset → protocol → metrics)",
695
+ "Baseline registry + ablation tracking",
696
+ "Report generator (results + uncertainty + failure modes)"
697
+ ],
698
+ public:
699
+ "Public positioning: an internal research engine for reproducibility and speed. Emphasize transparency, auditable reports, and discipline in evaluation.",
700
+ eval:
701
+ "Evaluation focus: reproducibility rates, time-to-result, and quality of decision-making under uncertainty. Output must be traceable from claim → experiment → evidence.",
702
+ primary: { label: "Open Console", action: () => { window.location.href = "chat.html"; } },
703
+ secondary: { label: "Research", action: () => { window.location.href = "research.html"; } },
704
+ updated: "—"
705
+ },
706
+ agentic_workforce: {
707
+ title: "Agentic Workforce",
708
+ subtitle: "Autonomous workflows under governance",
709
+ status: "CONCEPT",
710
+ body:
711
+ "Agentic AI employees are introduced as controlled agents, not unbounded automation: scoped permissions, action logs, approval gates, and verification layers. Governance is the differentiator.",
712
+ evidence: [
713
+ "Scope definitions (what agents can and cannot do)",
714
+ "Audit trails (logs, transcripts, tool usage)",
715
+ "Approval gates (human-in-the-loop where required)"
716
+ ],
717
+ public:
718
+ "Public positioning: a governed agent platform for research ops and internal productivity. Avoid anthropomorphic claims; emphasize controls, accountability, and measurable outcomes.",
719
+ eval:
720
+ "Evaluation focus: error rates, containment failures avoided, auditability, and ROI in constrained workflows (data prep, experiments, reporting). Fail-closed behaviors are required.",
721
+ primary: { label: "Request Access", action: () => accessBtn.click() },
722
+ secondary: { label: "Contact", action: () => { window.location.href = "contact.html"; } },
723
+ updated: "—"
724
+ }
725
+ };
726
+
727
+ const dossierTitle = document.getElementById('dossier-title');
728
+ const dossierSubtitle = document.getElementById('dossier-subtitle');
729
+ const dossierStatus = document.getElementById('dossier-status');
730
+ const dossierBody = document.getElementById('dossier-body');
731
+ const dossierEvidence = document.getElementById('dossier-evidence');
732
+ const dossierPublic = document.getElementById('dossier-public');
733
+ const dossierEval = document.getElementById('dossier-eval');
734
+ const dossierPrimary = document.getElementById('dossier-primary');
735
+ const dossierSecondary = document.getElementById('dossier-secondary');
736
+ const dossierMeta = document.getElementById('dossier-meta');
737
+
738
+ function renderDossier(key) {
739
+ const d = DOSSIERS[key];
740
+ if (!d) return;
741
+
742
+ dossierTitle.textContent = d.title;
743
+ dossierSubtitle.textContent = d.subtitle;
744
+ dossierStatus.textContent = d.status;
745
+
746
+ dossierBody.textContent = d.body;
747
+
748
+ dossierEvidence.innerHTML = "";
749
+ d.evidence.forEach(item => {
750
+ const li = document.createElement('li');
751
+ li.textContent = item;
752
+ dossierEvidence.appendChild(li);
753
+ });
754
+
755
+ dossierPublic.textContent = d.public;
756
+ dossierEval.textContent = d.eval;
757
+
758
+ dossierPrimary.textContent = d.primary.label;
759
+ dossierPrimary.onclick = d.primary.action;
760
+
761
+ dossierSecondary.textContent = d.secondary.label;
762
+ dossierSecondary.onclick = d.secondary.action;
763
+
764
+ dossierMeta.innerHTML = `Last updated: <span class="text-gray-300">${d.updated}</span>`;
765
+ }
766
+
767
+ document.querySelectorAll('.program-card').forEach(btn => {
768
+ btn.addEventListener('click', () => renderDossier(btn.getAttribute('data-dossier')));
769
+ });
770
+
771
+ /* ESC behavior */
772
+ document.addEventListener('keydown', (e) => {
773
+ if (e.key === 'Escape') {
774
+ if (labNav && !labNav.classList.contains('modal-hidden')) closeLabNav();
775
+ if (accessModal && !accessModal.classList.contains('modal-hidden')) toggleModal(accessModal, false);
776
+ }
777
+ });
778
+
779
+ /* Default dossier */
780
+ renderDossier('mcap');
781
+ </script>
782
  </body>
783
+ </html>