Hugging Face's logo

Spaces:
caustino
/
New1
Running

App Files Community
caustino commited on
Commit
c45f2c4
·
verified ·
1 Parent(s): 15c1240

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +852 -19
index.html CHANGED
@@ -1,19 +1,852 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ```html
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+
5
+ <head>
6
+ <meta charset="UTF-8">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+ <title>UOSE Neural Stimulation System — Production Blueprint</title>
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
11
+ <link rel="preconnect" href="https://fonts.googleapis.com">
12
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13
+ <link
14
+ href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap"
15
+ rel="stylesheet">
16
+ <script>
17
+ tailwind.config = {
18
+ theme: {
19
+ extend: {
20
+ fontFamily: {
21
+ sans: ['Inter', 'system-ui', 'sans-serif'],
22
+ mono: ['JetBrains Mono', 'monospace'],
23
+ display: ['Space Grotesk', 'sans-serif'],
24
+ },
25
+ colors: {
26
+ uose: {
27
+ 50: '#f0f9ff',
28
+ 100: '#e0f2fe',
29
+ 200: '#bae6fd',
30
+ 300: '#7dd3fc',
31
+ 400: '#38bdf8',
32
+ 500: '#0ea5e9',
33
+ 600: '#0284c7',
34
+ 700: '#0369a1',
35
+ 800: '#075985',
36
+ 900: '#0c4a6e',
37
+ 950: '#082f49',
38
+ },
39
+ neon: {
40
+ blue: '#00d4ff',
41
+ green: '#00ff88',
42
+ amber: '#ffaa00',
43
+ violet: '#8b5cf6',
44
+ rose: '#f43f5e',
45
+ },
46
+ surface: {
47
+ 50: '#fafafa',
48
+ 100: '#f5f5f5',
49
+ 200: '#e5e5e5',
50
+ 300: '#d4d4d4',
51
+ 400: '#a3a3a3',
52
+ 500: '#737373',
53
+ 600: '#525252',
54
+ 700: '#404040',
55
+ 800: '#262626',
56
+ 900: '#171717',
57
+ 950: '#0a0a0a',
58
+ }
59
+ },
60
+ animation: {
61
+ 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
62
+ 'glow': 'glow 2s ease-in-out infinite alternate',
63
+ 'float': 'float 6s ease-in-out infinite',
64
+ 'scan': 'scan 3s linear infinite',
65
+ 'shimmer': 'shimmer 2s linear infinite',
66
+ },
67
+ keyframes: {
68
+ glow: {
69
+ '0%': { boxShadow: '0 0 5px #00d4ff22, 0 0 10px #00d4ff11' },
70
+ '100%': { boxShadow: '0 0 20px #00d4ff44, 0 0 40px #00d4ff22' },
71
+ },
72
+ float: {
73
+ '0%, 100%': { transform: 'translateY(0)' },
74
+ '50%': { transform: 'translateY(-10px)' },
75
+ },
76
+ scan: {
77
+ '0%': { transform: 'translateY(-100%)' },
78
+ '100%': { transform: 'translateY(100%)' },
79
+ },
80
+ shimmer: {
81
+ '0%': { backgroundPosition: '-200% 0' },
82
+ '100%': { backgroundPosition: '200% 0' },
83
+ },
84
+ }
85
+ }
86
+ }
87
+ }
88
+ </script>
89
+ <style>
90
+ * {
91
+ scrollbar-width: thin;
92
+ scrollbar-color: #404040 #171717;
93
+ }
94
+
95
+ ::-webkit-scrollbar {
96
+ width: 6px;
97
+ height: 6px;
98
+ }
99
+
100
+ ::-webkit-scrollbar-track {
101
+ background: #171717;
102
+ }
103
+
104
+ ::-webkit-scrollbar-thumb {
105
+ background: #404040;
106
+ border-radius: 3px;
107
+ }
108
+
109
+ ::-webkit-scrollbar-thumb:hover {
110
+ background: #525252;
111
+ }
112
+
113
+ .glass-panel {
114
+ background: rgba(23, 23, 23, 0.8);
115
+ backdrop-filter: blur(12px);
116
+ -webkit-backdrop-filter: blur(12px);
117
+ border: 1px solid rgba(255, 255, 255, 0.06);
118
+ }
119
+
120
+ .glass-panel-light {
121
+ background: rgba(250, 250, 250, 0.8);
122
+ backdrop-filter: blur(12px);
123
+ -webkit-backdrop-filter: blur(12px);
124
+ border: 1px solid rgba(0, 0, 0, 0.06);
125
+ }
126
+
127
+ .neon-border {
128
+ position: relative;
129
+ }
130
+
131
+ .neon-border::after {
132
+ content: '';
133
+ position: absolute;
134
+ inset: -1px;
135
+ border-radius: inherit;
136
+ padding: 1px;
137
+ background: linear-gradient(135deg, #00d4ff, #00ff88, #8b5cf6, #00d4ff);
138
+ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
139
+ -webkit-mask-composite: xor;
140
+ mask-composite: exclude;
141
+ opacity: 0;
142
+ transition: opacity 0.3s;
143
+ }
144
+
145
+ .neon-border:hover::after {
146
+ opacity: 1;
147
+ }
148
+
149
+ .tech-grid {
150
+ background-image:
151
+ linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px),
152
+ linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px);
153
+ background-size: 40px 40px;
154
+ }
155
+
156
+ .fibonacci-spiral {
157
+ position: relative;
158
+ width: 200px;
159
+ height: 200px;
160
+ }
161
+
162
+ .layer-stack {
163
+ transform-style: preserve-3d;
164
+ perspective: 1000px;
165
+ }
166
+
167
+ .layer-card {
168
+ transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
169
+ }
170
+
171
+ .layer-card:hover {
172
+ transform: translateZ(20px) scale(1.02);
173
+ }
174
+
175
+ .wavelength-bar {
176
+ height: 4px;
177
+ border-radius: 2px;
178
+ position: relative;
179
+ overflow: hidden;
180
+ }
181
+
182
+ .wavelength-bar::after {
183
+ content: '';
184
+ position: absolute;
185
+ inset: 0;
186
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
187
+ animation: shimmer 2s linear infinite;
188
+ background-size: 200% 100%;
189
+ }
190
+
191
+ .status-indicator {
192
+ width: 8px;
193
+ height: 8px;
194
+ border-radius: 50%;
195
+ position: relative;
196
+ }
197
+
198
+ .status-indicator::after {
199
+ content: '';
200
+ position: absolute;
201
+ inset: -4px;
202
+ border-radius: 50%;
203
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
204
+ }
205
+
206
+ .status-active {
207
+ background: #00ff88;
208
+ box-shadow: 0 0 8px #00ff88;
209
+ }
210
+
211
+ .status-active::after {
212
+ border: 2px solid #00ff88;
213
+ }
214
+
215
+ .status-warning {
216
+ background: #ffaa00;
217
+ box-shadow: 0 0 8px #ffaa00;
218
+ }
219
+
220
+ .status-warning::after {
221
+ border: 2px solid #ffaa00;
222
+ }
223
+
224
+ .status-critical {
225
+ background: #f43f5e;
226
+ box-shadow: 0 0 8px #f43f5e;
227
+ }
228
+
229
+ .status-critical::after {
230
+ border: 2px solid #f43f5e;
231
+ }
232
+
233
+ .equation {
234
+ font-family: 'JetBrains Mono', monospace;
235
+ background: rgba(0, 0, 0, 0.3);
236
+ padding: 1rem;
237
+ border-radius: 0.5rem;
238
+ border-left: 3px solid #00d4ff;
239
+ overflow-x: auto;
240
+ }
241
+
242
+ .claim-box {
243
+ border: 1px solid rgba(0, 212, 255, 0.2);
244
+ background: rgba(0, 212, 255, 0.05);
245
+ border-radius: 0.5rem;
246
+ padding: 1rem;
247
+ position: relative;
248
+ }
249
+
250
+ .claim-box::before {
251
+ content: attr(data-claim);
252
+ position: absolute;
253
+ top: -0.75rem;
254
+ left: 1rem;
255
+ background: #0c4a6e;
256
+ color: #00d4ff;
257
+ padding: 0.125rem 0.5rem;
258
+ border-radius: 0.25rem;
259
+ font-size: 0.75rem;
260
+ font-family: 'JetBrains Mono', monospace;
261
+ font-weight: 600;
262
+ }
263
+
264
+ .tab-active {
265
+ background: rgba(0, 212, 255, 0.1);
266
+ color: #00d4ff;
267
+ border-bottom: 2px solid #00d4ff;
268
+ }
269
+
270
+ .holographic {
271
+ background: linear-gradient(135deg,
272
+ rgba(0, 212, 255, 0.1) 0%,
273
+ rgba(139, 92, 246, 0.1) 25%,
274
+ rgba(0, 255, 136, 0.1) 50%,
275
+ rgba(255, 170, 0, 0.1) 75%,
276
+ rgba(0, 212, 255, 0.1) 100%);
277
+ background-size: 400% 400%;
278
+ animation: gradient-shift 8s ease infinite;
279
+ }
280
+
281
+ @keyframes gradient-shift {
282
+
283
+ 0%,
284
+ 100% {
285
+ background-position: 0% 50%;
286
+ }
287
+
288
+ 50% {
289
+ background-position: 100% 50%;
290
+ }
291
+ }
292
+
293
+ .data-stream {
294
+ font-family: 'JetBrains Mono', monospace;
295
+ font-size: 0.75rem;
296
+ line-height: 1.6;
297
+ color: #00d4ff;
298
+ opacity: 0.6;
299
+ }
300
+
301
+ .cross-section {
302
+ position: relative;
303
+ }
304
+
305
+ .cross-section-line {
306
+ position: absolute;
307
+ top: 0;
308
+ bottom: 0;
309
+ width: 2px;
310
+ background: linear-gradient(to bottom, #00d4ff, #00ff88, #8b5cf6, #ffaa00);
311
+ left: 50%;
312
+ transform: translateX(-50%);
313
+ }
314
+
315
+ .cross-section-label {
316
+ position: absolute;
317
+ left: calc(50% + 10px);
318
+ transform: translateY(-50%);
319
+ background: #171717;
320
+ border: 1px solid #00d4ff;
321
+ color: #00d4ff;
322
+ padding: 0.25rem 0.5rem;
323
+ border-radius: 0.25rem;
324
+ font-size: 0.625rem;
325
+ font-family: 'JetBrains Mono', monospace;
326
+ white-space: nowrap;
327
+ }
328
+
329
+ .thermal-gradient {
330
+ background: linear-gradient(90deg,
331
+ #00d4ff 0%,
332
+ #00ff88 33%,
333
+ #ffaa00 66%,
334
+ #f43f5e 100%);
335
+ }
336
+
337
+ .progress-ring {
338
+ transform: rotate(-90deg);
339
+ }
340
+
341
+ .progress-ring-circle {
342
+ transition: stroke-dashoffset 0.5s ease;
343
+ }
344
+
345
+ @media (max-width: 768px) {
346
+ .fibonacci-spiral {
347
+ width: 120px;
348
+ height: 120px;
349
+ }
350
+ }
351
+ </style>
352
+ </head>
353
+
354
+ <body class="bg-surface-950 text-surface-100 font-sans min-h-screen overflow-x-hidden">
355
+ <!-- Header -->
356
+ <header class="fixed top-0 left-0 right-0 z-50 glass-panel border-b border-surface-800">
357
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
358
+ <div class="flex items-center justify-between h-16">
359
+ <div class="flex items-center gap-3">
360
+ <div
361
+ class="w-10 h-10 rounded-lg bg-gradient-to-br from-uose-500 to-neon-violet flex items-center justify-center">
362
+ <i class="fas fa-atom text-white text-lg"></i>
363
+ </div>
364
+ <div>
365
+ <h1 class="font-display font-bold text-lg tracking-tight text-surface-100">UOSE</h1>
366
+ <p class="text-xs text-surface-500 font-mono">Unified Optical Superposition Engine</p>
367
+ </div>
368
+ </div>
369
+
370
+ <nav class="hidden md:flex items-center gap-1">
371
+ <a href="#overview"
372
+ class="px-3 py-2 text-sm text-surface-400 hover:text-surface-100 transition-colors">Overview</a>
373
+ <a href="#bom" class="px-3 py-2 text-sm text-surface-400 hover:text-surface-100 transition-colors">BOM</a>
374
+ <a href="#manufacturing"
375
+ class="px-3 py-2 text-sm text-surface-400 hover:text-surface-100 transition-colors">Manufacturing</a>
376
+ <a href="#patents"
377
+ class="px-3 py-2 text-sm text-surface-400 hover:text-surface-100 transition-colors">Patents</a>
378
+ <a href="#regulatory"
379
+ class="px-3 py-2 text-sm text-surface-400 hover:text-surface-100 transition-colors">Regulatory</a>
380
+ </nav>
381
+
382
+ <div class="flex items-center gap-3">
383
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank"
384
+ class="text-xs text-surface-500 hover:text-neon-blue transition-colors">
385
+ <span class="hidden sm:inline">Built with </span>anycoder
386
+ </a>
387
+ <div class="status-indicator status-active"></div>
388
+ <span class="text-xs font-mono text-neon-green">SYSTEM ACTIVE</span>
389
+ </div>
390
+ </div>
391
+ </div>
392
+ </header>
393
+
394
+ <!-- Hero Section -->
395
+ <section class="relative pt-24 pb-16 overflow-hidden tech-grid">
396
+ <div class="absolute inset-0 bg-gradient-to-b from-surface-950 via-transparent to-surface-950 pointer-events-none">
397
+ </div>
398
+
399
+ <!-- Animated background elements -->
400
+ <div class="absolute top-20 left-10 w-64 h-64 bg-neon-blue/5 rounded-full blur-3xl animate-pulse-slow"></div>
401
+ <div class="absolute bottom-20 right-10 w-96 h-96 bg-neon-violet/5 rounded-full blur-3xl animate-pulse-slow"
402
+ style="animation-delay: 1s;"></div>
403
+
404
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
405
+ <div class="grid lg:grid-cols-2 gap-12 items-center">
406
+ <div>
407
+ <div
408
+ class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-neon-blue/10 border border-neon-blue/20 mb-6">
409
+ <div class="status-indicator status-active"></div>
410
+ <span class="text-xs font-mono text-neon-blue">PRODUCTION BLUEPRINT v2.1</span>
411
+ </div>
412
+
413
+ <h2 class="font-display text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight mb-6">
414
+ Neural Stimulation<br>
415
+ <span class="bg-gradient-to-r from-neon-blue via-neon-green to-neon-violet bg-clip-text text-transparent">Superposition Engine</span>
416
+ </h2>
417
+
418
+ <p class="text-lg text-surface-400 leading-relaxed mb-8 max-w-xl">
419
+ Production-ready blueprints for the UOSE Neural Stimulation System — transitioning from prototype to scaled
420
+ manufacturing with dual-channel viral and non-genetic neuromodulation.
421
+ </p>
422
+
423
+ <div class="flex flex-wrap gap-3">
424
+ <button onclick="scrollToSection('overview')" class="px-6 py-3 bg-neon-blue text-surface-950 font-semibold rounded-lg hover:bg-neon-blue/90 transition-all flex items-center gap-2">
425
+ <i class="fas fa-play text-sm"></i>
426
+ Explore System
427
+ </button>
428
+ <button onclick="scrollToSection('bom')" class="px-6 py-3 glass-panel text-surface-300 font-semibold rounded-lg hover:bg-surface-800 transition-all flex items-center gap-2">
429
+ <i class="fas fa-list-ul text-sm"></i>
430
+ View BOM
431
+ </button>
432
+ </div>
433
+
434
+ <!-- Key metrics -->
435
+ <div class="grid grid-cols-3 gap-4 mt-10">
436
+ <div class="glass-panel rounded-lg p-4">
437
+ <div class="text-2xl font-bold font-mono text-neon-blue">O(L²)</div>
438
+ <div class="text-xs text-surface-500 mt-1">Virtual Channels</div>
439
+ </div>
440
+ <div class="glass-panel rounded-lg p-4">
441
+ <div class="text-2xl font-bold font-mono text-neon-green">480</div>
442
+ <div class="text-xs text-surface-500 mt-1">Optical Sources</div>
443
+ </div>
444
+ <div class="glass-panel rounded-lg p-4">
445
+ <div class="text-2xl font-bold font-mono text-neon-violet">7</div>
446
+ <div class="text-xs text-surface-500 mt-1">Layer Stack</div>
447
+ </div>
448
+ </div>
449
+ </div>
450
+
451
+ <!-- Interactive 3D Layer Visualization -->
452
+ <div class="relative">
453
+ <div class="layer-stack relative w-full aspect-square max-w-md mx-auto">
454
+ <!-- Layer 7: Encapsulation -->
455
+ <div class="layer-card absolute inset-0 rounded-2xl glass-panel holographic p-4 flex flex-col justify-end"
456
+ style="transform: translateZ(0px);">
457
+ <div class="text-xs font-mono text-surface-500 mb-2">LAYER 7 — ENCAPSULATION</div>
458
+ <div class="flex gap-2">
459
+ <div class="wavelength-bar flex-1 bg-surface-700"></div>
460
+ <div class="wavelength-bar flex-1 bg-surface-600"></div>
461
+ <div class="wavelength-bar flex-1 bg-surface-500"></div>
462
+ </div>
463
+ </div>
464
+
465
+ <!-- Layer 6: Interface -->
466
+ <div
467
+ class="layer-card absolute inset-x-4 top-4 bottom-4 rounded-xl glass-panel border-neon-green/20 p-4 flex flex-col justify-end"
468
+ style="transform: translateZ(30px);">
469
+ <div class="text-xs font-mono text-neon-green mb-2">LAYER 6 — INTERFACE COATING</div>
470
+ <div class="flex gap-2 mb-2">
471
+ <div class="w-3 h-3 rounded-full bg-neon-green/30 animate-pulse"></div>
472
+ <div class="w-3 h-3 rounded-full bg-neon-amber/30"></div>
473
+ <div class="w-3 h-3 rounded-full bg-neon-rose/30"></div>
474
+ </div>
475
+ <div class="text-xs text-surface-500">PEG Hydrogel + AAV + HUP</div>
476
+ </div>
477
+
478
+ <!-- Layer 5: Waveguides -->
479
+ <div
480
+ class="layer-card absolute inset-x-8 top-8 bottom-8 rounded-xl glass-panel border-neon-blue/20 p-4 flex flex-col justify-center"
481
+ style="transform: translateZ(60px);">
482
+ <div class="text-xs font-mono text-neon-blue mb-2">LAYER 5 — WAVEGUIDES</div>
483
+ <div class="space-y-2">
484
+ <div class="h-1 bg-gradient-to-r from-neon-blue/50 to-transparent rounded"></div>
485
+ <div class="h-1 bg-gradient-to-r from-neon-violet/50 to-transparent rounded" style="width: 80%;"></div>
486
+ <div class="h-1 bg-gradient-to-r from-neon-amber/50 to-transparent rounded" style="width: 60%;"></div>
487
+ </div>
488
+ </div>
489
+
490
+ <!-- Layer 4: Phase Modulation -->
491
+ <div
492
+ class="layer-card absolute inset-x-12 top-12 bottom-12 rounded-xl glass-panel border-neon-violet/20 p-4 flex flex-col justify-start"
493
+ style="transform: translateZ(90px);">
494
+ <div class="text-xs font-mono text-neon-violet mb-2">LAYER 4 — PHASE MODULATION</div>
495
+ <div class="grid grid-cols-4 gap-1">
496
+ <div class="aspect-square bg-neon-violet/20 rounded-sm animate-pulse" style="animation-delay: 0s;">
497
+ </div>
498
+ <div class="aspect-square bg-neon-violet/20 rounded-sm animate-pulse" style="animation-delay: 0.1s;">
499
+ </div>
500
+ <div class="aspect-square bg-neon-violet/20 rounded-sm animate-pulse" style="animation-delay: 0.2s;">
501
+ </div>
502
+ <div class="aspect-square bg-neon-violet/20 rounded-sm animate-pulse" style="animation-delay: 0.3s;">
503
+ </div>
504
+ </div>
505
+ <div class="text-xs text-surface-500 mt-2">LCoS SLM + MEMS DMD</div>
506
+ </div>
507
+
508
+ <!-- Layer 3: Optical Sources -->
509
+ <div
510
+ class="layer-card absolute inset-x-16 top-16 bottom-16 rounded-xl glass-panel border-neon-amber/20 p-4 flex flex-col justify-center"
511
+ style="transform: translateZ(120px);">
512
+ <div class="text-xs font-mono text-neon-amber mb-2">LAYER 3 — OPTICAL SOURCES</div>
513
+ <div class="flex flex-wrap gap-1">
514
+ <div class="w-2 h-2 rounded-full bg-neon-blue animate-pulse"></div>
515
+ <div class="w-2 h-2 rounded-full bg-neon-green animate-pulse" style="animation-delay: 0.1s;"></div>
516
+ <div class="w-2 h-2 rounded-full bg-neon-amber animate-pulse" style="animation-delay: 0.2s;"></div>
517
+ <div class="w-2 h-2 rounded-full bg-neon-rose animate-pulse" style="animation-delay: 0.3s;"></div>
518
+ </div>
519
+ <div class="text-xs text-surface-500 mt-2">μ-LEDs + μ-Lasers + VCSEL</div>
520
+ </div>
521
+
522
+ <!-- Layer 2: EM Emitters -->
523
+ <div
524
+ class="layer-card absolute inset-x-20 top-20 bottom-20 rounded-xl glass-panel border-surface-500/20 p-4 flex flex-col justify-end"
525
+ style="transform: translateZ(150px);">
526
+ <div class="text-xs font-mono text-surface-400 mb-2">LAYER 2 — EM EMITTERS</div>
527
+ <div class="flex gap-1">
528
+ <div class="flex-1 h-4 bg-surface-700 rounded flex items-center justify-center">
529
+ <div class="w-2 h-2 rounded-full bg-surface-500"></div>
530
+ </div>
531
+ <div class="flex-1 h-4 bg-surface-700 rounded flex items-center justify-center">
532
+ <div class="w-2 h-2 rounded-full bg-surface-500"></div>
533
+ </div>
534
+ </div>
535
+ </div>
536
+
537
+ <!-- Layer 1: Substrate -->
538
+ <div
539
+ class="layer-card absolute inset-x-24 top-24 bottom-24 rounded-xl glass-panel border-uose-500/20 p-4 flex items-center justify-center"
540
+ style="transform: translateZ(180px);">
541
+ <div class="text-center">
542
+ <div class="text-xs font-mono text-uose-400 mb-1">LAYER 1</div>
543
+ <div class="text-sm font-bold text-uose-300">Si SUBSTRATE</div>
544
+ <div class="text-xs text-surface-500 mt-1">CMOS + FPGA + TSV</div>
545
+ </div>
546
+ </div>
547
+ </div>
548
+
549
+ <!-- Fibonacci lattice overlay -->
550
+ <div class="absolute -bottom-4 -right-4 w-32 h-32 opacity-30">
551
+ <svg viewBox="0 0 100 100" class="w-full h-full">
552
+ <defs>
553
+ <radialGradient id="fib-gradient" cx="50%" cy="50%" r="50%">
554
+ <stop offset="0%" stop-color="#00d4ff" stop-opacity="0.8" />
555
+ <stop offset="100%" stop-color="#00d4ff" stop-opacity="0" />
556
+ </radialGradient>
557
+ </defs>
558
+ <!-- Golden spiral approximation -->
559
+ <path d="M50,50 m-40,0 a40,40 0 1,1 80,0 a40,40 0 1,1 -80,0" fill="none" stroke="url(#fib-gradient)"
560
+ stroke-width="0.5" />
561
+ <path d="M50,50 m-25,0 a25,25 0 1,1 50,0 a25,25 0 1,1 -50,0" fill="none" stroke="url(#fib-gradient)"
562
+ stroke-width="0.5" />
563
+ <path d="M50,50 m-15,0 a15,15 0 1,1 30,0 a15,15 0 1,1 -30,0" fill="none" stroke="url(#fib-gradient)"
564
+ stroke-width="0.5" />
565
+ <!-- Dots at golden angle -->
566
+ <g fill="#00d4ff">
567
+ <circle cx="50" cy="50" r="1" />
568
+ <circle cx="55" cy="45" r="0.8" />
569
+ <circle cx="48" cy="42" r="0.8" />
570
+ <circle cx="60" cy="52" r="0.8" />
571
+ <circle cx="45" cy="55" r="0.8" />
572
+ <circle cx="58" cy="38" r="0.6" />
573
+ <circle cx="42" cy="48" r="0.6" />
574
+ <circle cx="52" cy="62" r="0.6" />
575
+ </g>
576
+ </svg>
577
+ </div>
578
+ </div>
579
+ </div>
580
+ </div>
581
+ </section>
582
+
583
+ <!-- System Overview Dashboard -->
584
+ <section id="overview" class="py-16 border-t border-surface-800">
585
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
586
+ <div class="flex items-center gap-3 mb-8">
587
+ <div class="w-1 h-8 bg-neon-blue rounded-full"></div>
588
+ <h3 class="font-display text-2xl font-bold">System Architecture</h3>
589
+ </div>
590
+
591
+ <!-- Channel Bank Status -->
592
+ <div class="grid md:grid-cols-3 gap-4 mb-8">
593
+ <div class="glass-panel rounded-xl p-5 neon-border">
594
+ <div class="flex items-center justify-between mb-4">
595
+ <div class="flex items-center gap-2">
596
+ <div class="w-3 h-3 rounded-full bg-neon-green animate-pulse"></div>
597
+ <span class="text-sm font-semibold text-neon-green">VEO BANK</span>
598
+ </div>
599
+ <span class="text-xs font-mono text-surface-500">Viral-Enabled</span>
600
+ </div>
601
+ <div class="space-y-2">
602
+ <div class="flex justify-between text-sm">
603
+ <span class="text-surface-400">Opsin Channels</span>
604
+ <span class="font-mono text-neon-green">6 variants</span>
605
+ </div>
606
+ <div class="flex justify-between text-sm">
607
+ <span class="text-surface-400">SLM Pixels</span>
608
+ <span class="font-mono text-neon-green">1.3M</span>
609
+ </div>
610
+ <div class="flex justify-between text-sm">
611
+ <span class="text-surface-400">Wavelength Range</span>
612
+ <span class="font-mono text-neon-green">450-590nm</span>
613
+ </div>
614
+ </div>
615
+ <div class="mt-3 pt-3 border-t border-surface-800">
616
+ <div class="wavelength-bar bg-gradient-to-r from-blue-500 via-green-500 to-amber-500"></div>
617
+ </div>
618
+ </div>
619
+
620
+ <div class="glass-panel rounded-xl p-5 neon-border">
621
+ <div class="flex items-center justify-between mb-4">
622
+ <div class="flex items-center gap-2">
623
+ <div class="w-3 h-3 rounded-full bg-neon-amber animate-pulse"></div>
624
+ <span class="text-sm font-semibold text-neon-amber">NGO BANK</span>
625
+ </div>
626
+ <span class="text-xs font-mono text-surface-500">Non-Genetic</span>
627
+ </div>
628
+ <div class="space-y-2">
629
+ <div class="flex justify-between text-sm">
630
+ <span class="text-surface-400">INS Sources</span>
631
+ <span class="font-mono text-neon-amber">32 @ 1870nm</span>
632
+ </div>
633
+ <div class="flex justify-between text-sm">
634
+ <span class="text-surface-400">HUP Excitation</span>
635
+ <span class="font-mono text-neon-amber">64 @ 980nm</span>
636
+ </div>
637
+ <div class="flex justify-between text-sm">
638
+ <span class="text-surface-400">PBM Priming</span>
639
+ <span class="font-mono text-neon-amber">64 @ 810nm</span>
640
+ </div>
641
+ </div>
642
+ <div class="mt-3 pt-3 border-t border-surface-800">
643
+ <div class="wavelength-bar bg-gradient-to-r from-rose-500 via-amber-500 to-yellow-500"></div>
644
+ </div>
645
+ </div>
646
+
647
+ <div class="glass-panel rounded-xl p-5 neon-border">
648
+ <div class="flex items-center justify-between mb-4">
649
+ <div class="flex items-center gap-2">
650
+ <div class="w-3 h-3 rounded-full bg-neon-violet animate-pulse"></div>
651
+ <span class="text-sm font-semibold text-neon-violet">HOS BANK</span>
652
+ </div>
653
+ <span class="text-xs font-mono text-surface-500">Hybrid Superposition</span>
654
+ </div>
655
+ <div class="space-y-2">
656
+ <div class="flex justify-between text-sm">
657
+ <span class="text-surface-400">Simultaneous λ</span>
658
+ <span class="font-mono text-neon-violet">3-5 bands</span>
659
+ </div>
660
+ <div class="flex justify-between text-sm">
661
+ <span class="text-surface-400">VOM Overlap</span>
662
+ <span class="font-mono text-neon-violet">Coherent</span>
663
+ </div>
664
+ <div class="flex justify-between text-sm">
665
+ <span class="text-surface-400">Max Channels</span>
666
+ <span class="font-mono text-neon-violet">115,440</span>
667
+ </div>
668
+ </div>
669
+ <div class="mt-3 pt-3 border-t border-surface-800">
670
+ <div class="wavelength-bar bg-gradient-to-r from-violet-500 via-fuchsia-500 to-pink-500"></div>
671
+ </div>
672
+ </div>
673
+ </div>
674
+
675
+ <!-- Superposition Equation -->
676
+ <div class="glass-panel rounded-xl p-6 mb-8">
677
+ <div class="flex items-center gap-2 mb-4">
678
+ <i class="fas fa-function text-neon-blue"></i>
679
+ <span class="text-sm font-semibold text-surface-300">Optical Superposition Field Equation</span>
680
+ </div>
681
+ <div class="equation text-sm md:text-base">
682
+ Φ(r, t) = Σ<sub>j=1</sub><sup>L</sup> B<sub>j</sub>(t) · G<sub>j</sub>(r) · cos(ν<sub>j</sub>t + ψ<sub>j</sub>
683
+ + δ<sub>j</sub>(r))
684
+ </div>
685
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4 mt-4 text-xs">
686
+ <div class="glass-panel rounded-lg p-3">
687
+ <span class="text-neon-blue font-mono">B<sub>j</sub>(t)</span>
688
+ <span class="text-surface-400"> — Amplitude envelope (12-bit DAC, 4096 levels)</span>
689
+ </div>
690
+ <div class="glass-panel rounded-lg p-3">
691
+ <span class="text-neon-green font-mono">G<sub>j</sub>(r)</span>
692
+ <span class="text-surface-400"> — Spatial pattern (Gaussian/holographic)</span>
693
+ </div>
694
+ <div class="glass-panel rounded-lg p-3">
695
+ <span class="text-neon-amber font-mono">ν<sub>j</sub></span>
696
+ <span class="text-surface-400"> — Optical frequency 2πc/λ<sub>j</sub></span>
697
+ </div>
698
+ <div class="glass-panel rounded-lg p-3">
699
+ <span class="text-neon-violet font-mono">ψ<sub>j</sub></span>
700
+ <span class="text-surface-400"> — Programmable phase (8-bit, 0-2π)</span>
701
+ </div>
702
+ </div>
703
+ </div>
704
+
705
+ <!-- RACI Dashboard -->
706
+ <div class="glass-panel rounded-xl p-6">
707
+ <div class="flex items-center justify-between mb-6">
708
+ <div class="flex items-center gap-2">
709
+ <i class="fas fa-brain text-neon-violet"></i>
710
+ <span class="text-sm font-semibold text-surface-300">RACI — Reasoning-Answer Coherence Index</span>
711
+ </div>
712
+ <div class="flex items-center gap-2">
713
+ <span class="text-xs text-surface-500">Current:</span>
714
+ <span class="text-lg font-mono font-bold text-neon-green">0.87</span>
715
+ </div>
716
+ </div>
717
+
718
+ <div class="grid md:grid-cols-2 gap-6">
719
+ <div>
720
+ <div class="text-xs text-surface-500 mb-3">COHERENCE COMPONENTS</div>
721
+ <div class="space-y-3">
722
+ <div>
723
+ <div class="flex justify-between text-sm mb-1">
724
+ <span class="text-surface-400">Reasoning Weight (w<sub>r</sub> = 0.40)</span>
725
+ <span class="font-mono text-neon-blue">0.92</span>
726
+ </div>
727
+ <div class="h-2 bg-surface-800 rounded-full overflow-hidden">
728
+ <div class="h-full bg-neon-blue rounded-full" style="width: 92%"></div>
729
+ </div>
730
+ </div>
731
+ <div>
732
+ <div class="flex justify-between text-sm mb-1">
733
+ <span class="text-surface-400">Evidence Weight (w<sub>e</sub> = 0.30)</span>
734
+ <span class="font-mono text-neon-green">0.88</span>
735
+ </div>
736
+ <div class="h-2 bg-surface-800 rounded-full overflow-hidden">
737
+ <div class="h-full bg-neon-green rounded-full" style="width: 88%"></div>
738
+ </div>
739
+ </div>
740
+ <div>
741
+ <div class="flex justify-between text-sm mb-1">
742
+ <span class="text-surface-400">Optical-Reasoning (w<sub>or</sub> = 0.20)</span>
743
+ <span class="font-mono text-neon-amber">0.85</span>
744
+ </div>
745
+ <div class="h-2 bg-surface-800 rounded-full overflow-hidden">
746
+ <div class="h-full bg-neon-amber rounded-full" style="width: 85%"></div>
747
+ </div>
748
+ </div>
749
+ <div>
750
+ <div class="flex justify-between text-sm mb-1">
751
+ <span class="text-surface-400">Optical-Evidence (w<sub>oe</sub> = 0.10)</span>
752
+ <span class="font-mono text-neon-violet">0.79</span>
753
+ </div>
754
+ <div class="h-2 bg-surface-800 rounded-full overflow-hidden">
755
+ <div class="h-full bg-neon-violet rounded-full" style="width: 79%"></div>
756
+ </div>
757
+ </div>
758
+ </div>
759
+ </div>
760
+
761
+ <div>
762
+ <div class="text-xs text-surface-500 mb-3">SAFETY CONSTRAINT (β<sub>optical</sub>)</div>
763
+ <div class="glass-panel rounded-lg p-4 mb-4">
764
+ <div class="flex items-center gap-3 mb-3">
765
+ <div class="status-indicator status-active"></div>
766
+ <span class="text-sm font-semibold text-neon-green">ALL CONSTRAINTS SATISFIED</span>
767
+ </div>
768
+ <div class="space-y-2 text-xs">
769
+ <div class="flex justify-between">
770
+ <span class="text-surface-400">SAR<sub>optical</sub> ≤ 1.6 W/kg</span>
771
+ <span class="font-mono text-neon-green">1.12 ✓</span>
772
+ </div>
773
+ <div class="flex justify-between">
774
+ <span class="text-surface-400">T<sub>max</sub> ≤ 43°C</span>
775
+ <span class="font-mono text-neon-green">38.7°C ✓</span>
776
+ </div>
777
+ <div class="flex justify-between">
778
+ <span class="text-surface-400">H<sub>max</sub> ≤ H<sub>MPE</sub></span>
779
+ <span class="font-mono text-neon-green">0.73 ✓</span>
780
+ </div>
781
+ </div>
782
+ </div>
783
+ <div class="text-xs text-surface-500">
784
+ β<sub>optical</sub> = +0.10 (constraints satisfied) | −0.50 (violation)
785
+ </div>
786
+ </div>
787
+ </div>
788
+
789
+ <!-- Threshold Actions -->
790
+ <div class="grid grid-cols-3 gap-3 mt-6">
791
+ <div class="glass-panel rounded-lg p-3 text-center border border-neon-green/20">
792
+ <div class="text-lg font-mono font-bold text-neon-green">≥ 0.85</div>
793
+ <div class="text-xs text-surface-400 mt-1">HIGH — Maintain params</div>
794
+ </div>
795
+ <div class="glass-panel rounded-lg p-3 text-center border border-neon-amber/20">
796
+ <div class="text-lg font-mono font-bold text-neon-amber">0.70–0.85</div>
797
+ <div class="text-xs text-surface-400 mt-1">MODERATE — Audit + HITL</div>
798
+ </div>
799
+ <div class="glass-panel rounded-lg p-3 text-center border border-neon-rose/20">
800
+ <div class="text-lg font-mono font-bold text-neon-rose">&lt; 0.70</div>
801
+ <div class="text-xs text-surface-400 mt-1">LOW — HALT + Alert</div>
802
+ </div>
803
+ </div>
804
+ </div>
805
+ </div>
806
+ </section>
807
+
808
+ <!-- Bill of Materials -->
809
+ <section id="bom" class="py-16 border-t border-surface-800">
810
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
811
+ <div class="flex items-center gap-3 mb-8">
812
+ <div class="w-1 h-8 bg-neon-green rounded-full"></div>
813
+ <h3 class="font-display text-2xl font-bold">Bill of Materials</h3>
814
+ <span class="text-xs font-mono text-surface-500 ml-auto">P/N: UOSE-HP-001</span>
815
+ </div>
816
+
817
+ <!-- Cost Summary -->
818
+ <div class="grid md:grid-cols-3 gap-4 mb-8">
819
+ <div class="glass-panel rounded-xl p-5">
820
+ <div class="text-xs text-surface-500 mb-2">LOW-VOLUME PROTOTYPE (10 units)</div>
821
+ <div class="text-3xl font-bold font-mono text-surface-100">$8K–$15K</div>
822
+ <div class="text-xs text-surface-500 mt-1">per probe</div>
823
+ <div class="text-xs text-neon-amber mt-2">ASIC + SLM + GMP materials dominate</div>
824
+ </div>
825
+ <div class="glass-panel rounded-xl p-5">
826
+ <div class="text-xs text-surface-500 mb-2">SCALED PRODUCTION (1K+ units)</div>
827
+ <div class="text-3xl font-bold font-mono text-neon-green">&lt; $1,500</div>
828
+ <div class="text-xs text-surface-500 mt-1">per probe</div>
829
+ <div class="text-xs text-neon-green mt-2">300mm wafers + wafer-level bonding</div>
830
+ </div>
831
+ <div class="glass-panel rounded-xl p-5">
832
+ <div class="text-xs text-surface-500 mb-2">TARGET VOLUME (10K+ units)</div>
833
+ <div class="text-3xl font-bold font-mono text-neon-blue">&lt; $800</div>
834
+ <div class="text-xs text-surface-500 mt-1">per probe</div>
835
+ <div class="text-xs text-neon-blue mt-2">Full automation, multi-die reticles</div>
836
+ </div>
837
+ </div>
838
+
839
+ <!-- Layer Tabs -->
840
+ <div class="flex flex-wrap gap-1 mb-6">
841
+ <button onclick="showBOMLayer('all')" class="bom-tab px-4 py-2 text-sm rounded-lg transition-all tab-active" data-layer="all">All Layers</button>
842
+ <button onclick="showBOMLayer('610')" class="bom-tab px-4 py-2 text-sm rounded-lg transition-all text-surface-400 hover:text-surface-100" data-layer="610">610 — Substrate</button>
843
+ <button onclick="showBOMLayer('620')" class="bom-tab px-4 py-2 text-sm rounded-lg transition-all text-surface-400 hover:text-surface-100" data-layer="620">620 — EM</button>
844
+ <button onclick="showBOMLayer('630')" class="bom-tab px-4 py-2 text-sm rounded-lg transition-all text-surface-400 hover:text-surface-100" data-layer="630">630 — Optical</button>
845
+ <button onclick="showBOMLayer('640')" class="bom-tab px-4 py-2 text-sm rounded-lg transition-all text-surface-400 hover:text-surface-100" data-layer="640">640 — Modulation</button>
846
+ <button onclick="showBOMLayer('650')" class="bom-tab px-4 py-2 text-sm rounded-lg transition-all text-surface-400 hover:text-surface-100" data-layer="650">650 — Waveguides</button>
847
+ <button onclick="showBOMLayer('660')" class="bom-tab px-4 py-2 text-sm rounded-lg transition-all text-surface-400 hover:text-surface-100" data-layer="660">660 — Interface</button>
848
+ <button onclick="showBOMLayer('670')" class="bom-tab px-4 py-2 text-sm rounded-lg transition-all text-surface-400 hover:text-surface-100" data-layer="670">670 — Encapsulation</button>
849
+ </div>
850
+
851
+ <!-- BOM Table -->
852
+ <div class="glass-panel rounded-xl overflow-hidden">