Hugging Face's logo

Spaces:
Matrix-Corp
/
Matrix-Voxel
Running

App Files Community
Zandy-Wandy commited on
Commit
cb8e78b
·
verified ·
1 Parent(s): 1b7065a

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +1735 -19
index.html CHANGED
@@ -1,19 +1,1735 @@
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
+ <!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>Matrix Voxel — Architecture Spec</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&family=Barlow+Condensed:wght@300;400;600;700;900&display=swap" rel="stylesheet">
9
+ <style>
10
+ :root {
11
+ --bg: #06080a;
12
+ --bg2: #090c10;
13
+ --panel: #0b1018;
14
+ --border: #14202e;
15
+ --border2: #1c2d40;
16
+ --amber: #f5a623;
17
+ --amber2: #ffcc5c;
18
+ --amber-dim: rgba(245,166,35,0.08);
19
+ --blue: #1e90ff;
20
+ --blue-dim: rgba(30,144,255,0.08);
21
+ --teal: #00d4aa;
22
+ --red: #ff4757;
23
+ --green: #2ed573;
24
+ --purple: #a855f7;
25
+ --text: #8fa8c0;
26
+ --text-bright: #c8dce8;
27
+ --white: #eaf2f8;
28
+ --atlas: #f5a623;
29
+ --forge: #ff6b35;
30
+ --cast: #00d4aa;
31
+ --lens: #7b8fff;
32
+ --prime: #a855f7;
33
+ }
34
+
35
+ * { box-sizing: border-box; margin: 0; padding: 0; }
36
+
37
+ html { scroll-behavior: smooth; }
38
+
39
+ body {
40
+ background: var(--bg);
41
+ font-family: 'DM Mono', monospace;
42
+ color: var(--text);
43
+ overflow-x: hidden;
44
+ cursor: crosshair;
45
+ }
46
+
47
+ /* ── Blueprint grid bg ── */
48
+ body::before {
49
+ content: '';
50
+ position: fixed;
51
+ inset: 0;
52
+ background-image:
53
+ linear-gradient(rgba(245,166,35,0.025) 1px, transparent 1px),
54
+ linear-gradient(90deg, rgba(245,166,35,0.025) 1px, transparent 1px),
55
+ linear-gradient(rgba(245,166,35,0.008) 1px, transparent 1px),
56
+ linear-gradient(90deg, rgba(245,166,35,0.008) 1px, transparent 1px);
57
+ background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
58
+ pointer-events: none;
59
+ z-index: 0;
60
+ }
61
+
62
+ /* ── Scanline overlay ── */
63
+ body::after {
64
+ content: '';
65
+ position: fixed;
66
+ inset: 0;
67
+ background: repeating-linear-gradient(
68
+ 0deg,
69
+ transparent,
70
+ transparent 2px,
71
+ rgba(0,0,0,0.08) 2px,
72
+ rgba(0,0,0,0.08) 4px
73
+ );
74
+ pointer-events: none;
75
+ z-index: 0;
76
+ }
77
+
78
+ .wrap {
79
+ position: relative;
80
+ z-index: 1;
81
+ max-width: 1280px;
82
+ margin: 0 auto;
83
+ padding: 0 40px 120px;
84
+ }
85
+
86
+ /* ─────────────── HERO ─────────────── */
87
+ .hero {
88
+ min-height: 100vh;
89
+ display: flex;
90
+ flex-direction: column;
91
+ justify-content: center;
92
+ align-items: flex-start;
93
+ padding: 80px 0 60px;
94
+ position: relative;
95
+ }
96
+
97
+ /* Rotating wireframe cube */
98
+ .cube-wrap {
99
+ position: absolute;
100
+ right: -40px;
101
+ top: 50%;
102
+ transform: translateY(-50%);
103
+ width: 520px;
104
+ height: 520px;
105
+ opacity: 0.18;
106
+ }
107
+
108
+ .cube-svg {
109
+ width: 100%;
110
+ height: 100%;
111
+ animation: rotateCube 20s linear infinite;
112
+ transform-origin: center center;
113
+ }
114
+
115
+ @keyframes rotateCube {
116
+ 0% { transform: rotateY(0deg) rotateX(15deg); }
117
+ 100% { transform: rotateY(360deg) rotateX(15deg); }
118
+ }
119
+
120
+ .cube-svg line {
121
+ stroke: var(--amber);
122
+ stroke-width: 1;
123
+ }
124
+
125
+ .hero-eyebrow {
126
+ font-family: 'DM Mono', monospace;
127
+ font-size: 10px;
128
+ color: var(--amber);
129
+ letter-spacing: 6px;
130
+ text-transform: uppercase;
131
+ margin-bottom: 24px;
132
+ display: flex;
133
+ align-items: center;
134
+ gap: 12px;
135
+ }
136
+ .hero-eyebrow::before {
137
+ content: '';
138
+ display: block;
139
+ width: 40px;
140
+ height: 1px;
141
+ background: var(--amber);
142
+ }
143
+
144
+ .hero-title {
145
+ font-family: 'Orbitron', monospace;
146
+ font-size: clamp(56px, 8vw, 112px);
147
+ font-weight: 900;
148
+ line-height: 0.9;
149
+ letter-spacing: -2px;
150
+ margin-bottom: 8px;
151
+ }
152
+
153
+ .hero-title .matrix {
154
+ color: var(--border2);
155
+ display: block;
156
+ font-size: 0.45em;
157
+ letter-spacing: 8px;
158
+ font-weight: 400;
159
+ margin-bottom: 4px;
160
+ }
161
+
162
+ .hero-title .voxel {
163
+ background: linear-gradient(135deg, var(--amber) 0%, var(--amber2) 50%, var(--forge) 100%);
164
+ -webkit-background-clip: text;
165
+ -webkit-text-fill-color: transparent;
166
+ background-clip: text;
167
+ display: block;
168
+ filter: drop-shadow(0 0 40px rgba(245,166,35,0.3));
169
+ }
170
+
171
+ .hero-sub {
172
+ font-family: 'Barlow Condensed', sans-serif;
173
+ font-size: 16px;
174
+ color: var(--text);
175
+ letter-spacing: 3px;
176
+ margin-bottom: 48px;
177
+ font-weight: 300;
178
+ text-transform: uppercase;
179
+ }
180
+
181
+ .hero-tags {
182
+ display: flex;
183
+ flex-wrap: wrap;
184
+ gap: 8px;
185
+ margin-bottom: 56px;
186
+ max-width: 700px;
187
+ }
188
+
189
+ .tag {
190
+ font-family: 'DM Mono', monospace;
191
+ font-size: 9px;
192
+ letter-spacing: 2px;
193
+ padding: 5px 14px;
194
+ border: 1px solid var(--border2);
195
+ color: var(--text);
196
+ text-transform: uppercase;
197
+ }
198
+
199
+ .tag.a { border-color: var(--amber); color: var(--amber); background: var(--amber-dim); }
200
+ .tag.b { border-color: var(--blue); color: var(--blue); background: var(--blue-dim); }
201
+ .tag.g { border-color: var(--green); color: var(--green); background: rgba(46,213,115,0.06); }
202
+ .tag.p { border-color: var(--purple); color: var(--purple); background: rgba(168,85,247,0.06); }
203
+
204
+ /* Scroll indicator */
205
+ .scroll-hint {
206
+ display: flex;
207
+ align-items: center;
208
+ gap: 12px;
209
+ font-size: 9px;
210
+ color: var(--border2);
211
+ letter-spacing: 3px;
212
+ animation: pulse 2s ease-in-out infinite;
213
+ }
214
+ .scroll-hint::after {
215
+ content: '↓';
216
+ font-size: 14px;
217
+ animation: bounce 1.5s ease-in-out infinite;
218
+ }
219
+ @keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }
220
+ @keyframes pulse { 0%,100%{opacity:0.4} 50%{opacity:1} }
221
+
222
+ /* Hero bottom rule */
223
+ .hero-rule {
224
+ width: 100%;
225
+ height: 1px;
226
+ background: linear-gradient(90deg, var(--amber), var(--border), transparent);
227
+ margin-top: 60px;
228
+ }
229
+
230
+ /* ─────────────── SECTION SYSTEM ─────────────── */
231
+ .section {
232
+ margin-top: 100px;
233
+ opacity: 0;
234
+ transform: translateY(30px);
235
+ transition: opacity 0.7s ease, transform 0.7s ease;
236
+ }
237
+ .section.visible {
238
+ opacity: 1;
239
+ transform: translateY(0);
240
+ }
241
+
242
+ .section-header {
243
+ display: flex;
244
+ align-items: baseline;
245
+ gap: 20px;
246
+ margin-bottom: 36px;
247
+ padding-bottom: 16px;
248
+ border-bottom: 1px solid var(--border);
249
+ position: relative;
250
+ }
251
+ .section-header::after {
252
+ content: '';
253
+ position: absolute;
254
+ bottom: -1px;
255
+ left: 0;
256
+ width: 80px;
257
+ height: 1px;
258
+ background: var(--amber);
259
+ }
260
+
261
+ .section-num {
262
+ font-family: 'Orbitron', monospace;
263
+ font-size: 11px;
264
+ color: var(--border2);
265
+ letter-spacing: 3px;
266
+ }
267
+
268
+ .section-title {
269
+ font-family: 'Barlow Condensed', sans-serif;
270
+ font-size: 32px;
271
+ font-weight: 700;
272
+ color: var(--white);
273
+ letter-spacing: 1px;
274
+ text-transform: uppercase;
275
+ }
276
+
277
+ /* ─────────────── MODEL FAMILY TABLE ─────────────── */
278
+ .model-grid {
279
+ display: grid;
280
+ grid-template-columns: repeat(5, 1fr);
281
+ gap: 2px;
282
+ }
283
+
284
+ .model-card {
285
+ background: var(--panel);
286
+ border: 1px solid var(--border);
287
+ padding: 0;
288
+ position: relative;
289
+ overflow: hidden;
290
+ transition: transform 0.2s, border-color 0.2s;
291
+ }
292
+ .model-card:hover {
293
+ transform: translateY(-4px);
294
+ z-index: 2;
295
+ }
296
+
297
+ .model-card-top {
298
+ height: 4px;
299
+ }
300
+ .mc-atlas .model-card-top { background: var(--atlas); }
301
+ .mc-forge .model-card-top { background: var(--forge); }
302
+ .mc-cast .model-card-top { background: var(--cast); }
303
+ .mc-lens .model-card-top { background: var(--lens); }
304
+ .mc-prime .model-card-top { background: var(--prime); }
305
+
306
+ .mc-atlas:hover { border-color: var(--atlas); }
307
+ .mc-forge:hover { border-color: var(--forge); }
308
+ .mc-cast:hover { border-color: var(--cast); }
309
+ .mc-lens:hover { border-color: var(--lens); }
310
+ .mc-prime:hover { border-color: var(--prime); }
311
+
312
+ .model-card-body { padding: 20px; }
313
+
314
+ .mc-icon { font-size: 28px; margin-bottom: 12px; }
315
+
316
+ .mc-name {
317
+ font-family: 'Orbitron', monospace;
318
+ font-size: 13px;
319
+ font-weight: 700;
320
+ color: var(--white);
321
+ margin-bottom: 4px;
322
+ letter-spacing: 1px;
323
+ }
324
+ .mc-atlas .mc-name { color: var(--atlas); }
325
+ .mc-forge .mc-name { color: var(--forge); }
326
+ .mc-cast .mc-name { color: var(--cast); }
327
+ .mc-lens .mc-name { color: var(--lens); }
328
+ .mc-prime .mc-name { color: var(--prime); }
329
+
330
+ .mc-task {
331
+ font-size: 10px;
332
+ color: var(--text);
333
+ line-height: 1.6;
334
+ margin-bottom: 14px;
335
+ }
336
+
337
+ .mc-formats {
338
+ display: flex;
339
+ flex-direction: column;
340
+ gap: 4px;
341
+ }
342
+ .mc-fmt {
343
+ font-size: 9px;
344
+ letter-spacing: 1px;
345
+ color: var(--text);
346
+ padding: 3px 8px;
347
+ background: rgba(255,255,255,0.03);
348
+ border-left: 2px solid var(--border2);
349
+ }
350
+ .mc-atlas .mc-fmt { border-left-color: rgba(245,166,35,0.4); }
351
+ .mc-forge .mc-fmt { border-left-color: rgba(255,107,53,0.4); }
352
+ .mc-cast .mc-fmt { border-left-color: rgba(0,212,170,0.4); }
353
+ .mc-lens .mc-fmt { border-left-color: rgba(123,143,255,0.4); }
354
+ .mc-prime .mc-fmt { border-left-color: rgba(168,85,247,0.4); }
355
+
356
+ .mc-badges {
357
+ display: flex;
358
+ gap: 5px;
359
+ margin-top: 14px;
360
+ flex-wrap: wrap;
361
+ }
362
+ .mc-badge {
363
+ font-size: 8px;
364
+ letter-spacing: 1px;
365
+ padding: 2px 7px;
366
+ border: 1px solid;
367
+ text-transform: uppercase;
368
+ }
369
+ .badge-open { border-color: var(--green); color: var(--green); }
370
+ .badge-closed { border-color: var(--purple); color: var(--purple); }
371
+ .badge-planned { border-color: var(--amber); color: var(--amber); }
372
+
373
+ /* ─────────────── INPUT MODALITIES ─────────────── */
374
+ .input-grid {
375
+ display: grid;
376
+ grid-template-columns: repeat(5, 1fr);
377
+ gap: 2px;
378
+ }
379
+
380
+ .input-card {
381
+ background: var(--panel);
382
+ border: 1px solid var(--border);
383
+ padding: 24px 20px;
384
+ position: relative;
385
+ transition: border-color 0.2s;
386
+ }
387
+ .input-card:hover { border-color: var(--amber); }
388
+
389
+ .input-icon { font-size: 32px; margin-bottom: 14px; }
390
+ .input-name {
391
+ font-family: 'Barlow Condensed', sans-serif;
392
+ font-size: 18px;
393
+ font-weight: 700;
394
+ color: var(--white);
395
+ letter-spacing: 1px;
396
+ margin-bottom: 8px;
397
+ text-transform: uppercase;
398
+ }
399
+ .input-enc {
400
+ font-size: 9px;
401
+ color: var(--amber);
402
+ letter-spacing: 1px;
403
+ margin-bottom: 10px;
404
+ }
405
+ .input-desc {
406
+ font-size: 10px;
407
+ color: var(--text);
408
+ line-height: 1.7;
409
+ }
410
+
411
+ /* Arrow between inputs */
412
+ .input-grid-wrap {
413
+ position: relative;
414
+ }
415
+ .fusion-arrow {
416
+ text-align: center;
417
+ padding: 20px 0;
418
+ font-size: 11px;
419
+ color: var(--amber);
420
+ letter-spacing: 4px;
421
+ display: flex;
422
+ align-items: center;
423
+ justify-content: center;
424
+ gap: 16px;
425
+ }
426
+ .fusion-arrow::before,
427
+ .fusion-arrow::after {
428
+ content: '';
429
+ flex: 1;
430
+ height: 1px;
431
+ background: linear-gradient(90deg, transparent, var(--amber));
432
+ }
433
+ .fusion-arrow::after {
434
+ background: linear-gradient(90deg, var(--amber), transparent);
435
+ }
436
+
437
+ .fusion-box {
438
+ background: linear-gradient(135deg, rgba(245,166,35,0.1), rgba(255,107,53,0.05));
439
+ border: 1px solid var(--amber);
440
+ padding: 20px 28px;
441
+ text-align: center;
442
+ position: relative;
443
+ }
444
+ .fusion-box::before,
445
+ .fusion-box::after {
446
+ content: '◆';
447
+ position: absolute;
448
+ top: 50%;
449
+ transform: translateY(-50%);
450
+ color: var(--amber);
451
+ font-size: 10px;
452
+ }
453
+ .fusion-box::before { left: -6px; }
454
+ .fusion-box::after { right: -6px; }
455
+ .fusion-label {
456
+ font-family: 'Orbitron', monospace;
457
+ font-size: 11px;
458
+ color: var(--amber);
459
+ letter-spacing: 4px;
460
+ margin-bottom: 4px;
461
+ }
462
+ .fusion-desc { font-size: 10px; color: var(--text); letter-spacing: 1px; }
463
+
464
+ /* ─────────────── ARCHITECTURE ─────────────── */
465
+ .arch-diagram {
466
+ display: grid;
467
+ grid-template-columns: 1fr 1fr;
468
+ gap: 32px;
469
+ align-items: start;
470
+ }
471
+
472
+ .arch-stack {
473
+ display: flex;
474
+ flex-direction: column;
475
+ gap: 2px;
476
+ }
477
+
478
+ .arch-layer {
479
+ padding: 14px 20px;
480
+ border: 1px solid var(--border);
481
+ background: var(--panel);
482
+ display: flex;
483
+ align-items: center;
484
+ gap: 14px;
485
+ position: relative;
486
+ transition: all 0.15s;
487
+ }
488
+ .arch-layer:hover {
489
+ border-color: var(--amber);
490
+ background: rgba(245,166,35,0.04);
491
+ padding-left: 28px;
492
+ }
493
+
494
+ .arch-layer-connector {
495
+ position: absolute;
496
+ left: 50%;
497
+ bottom: -2px;
498
+ width: 1px;
499
+ height: 2px;
500
+ background: var(--amber);
501
+ z-index: 1;
502
+ }
503
+
504
+ .arch-dot {
505
+ width: 8px;
506
+ height: 8px;
507
+ border: 1px solid;
508
+ border-radius: 0;
509
+ transform: rotate(45deg);
510
+ flex-shrink: 0;
511
+ }
512
+
513
+ .arch-label {
514
+ font-size: 11px;
515
+ color: var(--text-bright);
516
+ letter-spacing: 0.5px;
517
+ flex: 1;
518
+ }
519
+ .arch-sub {
520
+ font-size: 9px;
521
+ color: var(--text);
522
+ margin-top: 2px;
523
+ letter-spacing: 0.5px;
524
+ }
525
+ .arch-param {
526
+ font-size: 9px;
527
+ color: var(--amber);
528
+ letter-spacing: 1px;
529
+ flex-shrink: 0;
530
+ }
531
+
532
+ .arch-layer.backbone { border-color: var(--amber); }
533
+ .arch-layer.backbone .arch-dot { border-color: var(--amber); background: rgba(245,166,35,0.3); }
534
+ .arch-layer.decoder { }
535
+ .arch-layer.decoder .arch-dot { border-color: var(--blue); }
536
+ .arch-layer.input .arch-dot { border-color: var(--teal); }
537
+ .arch-layer.fuse .arch-dot { border-color: var(--amber2); background: rgba(255,204,92,0.2); }
538
+
539
+ .arch-aside {
540
+ display: flex;
541
+ flex-direction: column;
542
+ gap: 16px;
543
+ }
544
+
545
+ .arch-stat-box {
546
+ background: var(--panel);
547
+ border: 1px solid var(--border);
548
+ padding: 20px;
549
+ }
550
+
551
+ .asb-label {
552
+ font-family: 'DM Mono', monospace;
553
+ font-size: 9px;
554
+ color: var(--amber);
555
+ letter-spacing: 3px;
556
+ margin-bottom: 12px;
557
+ }
558
+
559
+ .asb-row {
560
+ display: flex;
561
+ justify-content: space-between;
562
+ padding: 7px 0;
563
+ border-bottom: 1px solid var(--border);
564
+ font-size: 10px;
565
+ }
566
+ .asb-row:last-child { border-bottom: none; }
567
+ .asb-k { color: var(--text); }
568
+ .asb-v { color: var(--white); font-weight: 500; }
569
+ .asb-v.amber { color: var(--amber); }
570
+ .asb-v.green { color: var(--green); }
571
+
572
+ /* ─────────────── DECODER HEADS ─────────────── */
573
+ .decoder-tabs {
574
+ display: flex;
575
+ gap: 2px;
576
+ margin-bottom: 2px;
577
+ }
578
+ .dtab {
579
+ padding: 10px 24px;
580
+ font-family: 'DM Mono', monospace;
581
+ font-size: 10px;
582
+ letter-spacing: 2px;
583
+ cursor: pointer;
584
+ border: 1px solid var(--border);
585
+ background: var(--panel);
586
+ color: var(--text);
587
+ transition: all 0.15s;
588
+ text-transform: uppercase;
589
+ }
590
+ .dtab:hover { color: var(--white); }
591
+ .dtab.active-atlas { border-color: var(--atlas); color: var(--atlas); background: rgba(245,166,35,0.06); }
592
+ .dtab.active-forge { border-color: var(--forge); color: var(--forge); background: rgba(255,107,53,0.06); }
593
+ .dtab.active-cast { border-color: var(--cast); color: var(--cast); background: rgba(0,212,170,0.06); }
594
+ .dtab.active-lens { border-color: var(--lens); color: var(--lens); background: rgba(123,143,255,0.06); }
595
+
596
+ .decoder-panel {
597
+ display: none;
598
+ background: var(--panel);
599
+ border: 1px solid var(--border);
600
+ padding: 32px;
601
+ }
602
+ .decoder-panel.active { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
603
+
604
+ .dp-title {
605
+ font-family: 'Barlow Condensed', sans-serif;
606
+ font-size: 26px;
607
+ font-weight: 700;
608
+ text-transform: uppercase;
609
+ letter-spacing: 2px;
610
+ margin-bottom: 8px;
611
+ }
612
+ .dp-title.atlas { color: var(--atlas); }
613
+ .dp-title.forge { color: var(--forge); }
614
+ .dp-title.cast { color: var(--cast); }
615
+ .dp-title.lens { color: var(--lens); }
616
+
617
+ .dp-task {
618
+ font-size: 11px;
619
+ color: var(--text);
620
+ line-height: 1.7;
621
+ margin-bottom: 20px;
622
+ }
623
+
624
+ .dp-outputs {
625
+ display: flex;
626
+ flex-wrap: wrap;
627
+ gap: 6px;
628
+ margin-bottom: 24px;
629
+ }
630
+ .dp-fmt {
631
+ font-size: 9px;
632
+ letter-spacing: 2px;
633
+ padding: 4px 12px;
634
+ border: 1px solid var(--border2);
635
+ color: var(--text);
636
+ text-transform: uppercase;
637
+ }
638
+
639
+ .dp-modules {
640
+ display: flex;
641
+ flex-direction: column;
642
+ gap: 8px;
643
+ }
644
+ .dp-module {
645
+ padding: 10px 14px;
646
+ border-left: 2px solid var(--border2);
647
+ background: rgba(255,255,255,0.02);
648
+ }
649
+ .dp-mod-name { font-size: 10px; color: var(--text-bright); margin-bottom: 3px; letter-spacing: 0.5px; }
650
+ .dp-mod-desc { font-size: 9px; color: var(--text); line-height: 1.6; }
651
+
652
+ .dp-stats {
653
+ display: flex;
654
+ flex-direction: column;
655
+ gap: 2px;
656
+ }
657
+ .dp-stat {
658
+ display: flex;
659
+ justify-content: space-between;
660
+ align-items: center;
661
+ padding: 10px 14px;
662
+ background: rgba(255,255,255,0.02);
663
+ border: 1px solid var(--border);
664
+ font-size: 10px;
665
+ }
666
+ .dp-stat-k { color: var(--text); }
667
+ .dp-stat-v { color: var(--white); font-family: 'Orbitron', monospace; font-size: 9px; }
668
+
669
+ /* Atlas border color */
670
+ .decoder-panel[data-model="atlas"] { border-top: 2px solid var(--atlas); }
671
+ .decoder-panel[data-model="forge"] { border-top: 2px solid var(--forge); }
672
+ .decoder-panel[data-model="cast"] { border-top: 2px solid var(--cast); }
673
+ .decoder-panel[data-model="lens"] { border-top: 2px solid var(--lens); }
674
+
675
+ /* ─────────────── SHARED MODULES ─────────────── */
676
+ .modules-grid {
677
+ display: grid;
678
+ grid-template-columns: repeat(5, 1fr);
679
+ gap: 2px;
680
+ }
681
+
682
+ .mod-card {
683
+ background: var(--panel);
684
+ border: 1px solid var(--border);
685
+ padding: 20px 16px;
686
+ position: relative;
687
+ transition: all 0.15s;
688
+ }
689
+ .mod-card:hover {
690
+ border-color: var(--amber);
691
+ background: var(--amber-dim);
692
+ }
693
+
694
+ .mod-num {
695
+ font-family: 'Orbitron', monospace;
696
+ font-size: 20px;
697
+ font-weight: 900;
698
+ color: var(--border2);
699
+ line-height: 1;
700
+ margin-bottom: 10px;
701
+ }
702
+ .mod-card:hover .mod-num { color: var(--amber); }
703
+
704
+ .mod-name {
705
+ font-size: 10px;
706
+ color: var(--text-bright);
707
+ letter-spacing: 0.5px;
708
+ margin-bottom: 8px;
709
+ line-height: 1.4;
710
+ font-weight: 500;
711
+ }
712
+
713
+ .mod-desc {
714
+ font-size: 9px;
715
+ color: var(--text);
716
+ line-height: 1.7;
717
+ }
718
+
719
+ /* ─────────────── VRAM TABLE ─────────────── */
720
+ .vram-grid {
721
+ display: grid;
722
+ grid-template-columns: repeat(5, 1fr);
723
+ gap: 2px;
724
+ }
725
+
726
+ .vram-card {
727
+ background: var(--panel);
728
+ border: 1px solid var(--border);
729
+ padding: 24px 20px;
730
+ }
731
+ .vc-name {
732
+ font-family: 'Orbitron', monospace;
733
+ font-size: 10px;
734
+ letter-spacing: 2px;
735
+ margin-bottom: 16px;
736
+ padding-bottom: 10px;
737
+ border-bottom: 1px solid var(--border);
738
+ }
739
+ .mc-atlas .vc-name { color: var(--atlas); }
740
+ .mc-forge .vc-name { color: var(--forge); }
741
+ .mc-cast .vc-name { color: var(--cast); }
742
+ .mc-lens .vc-name { color: var(--lens); }
743
+ .mc-prime .vc-name { color: var(--prime); }
744
+
745
+ .vc-row {
746
+ display: flex;
747
+ justify-content: space-between;
748
+ font-size: 10px;
749
+ padding: 6px 0;
750
+ border-bottom: 1px solid var(--border);
751
+ }
752
+ .vc-row:last-child { border-bottom: none; }
753
+ .vc-k { color: var(--text); }
754
+ .vc-v { color: var(--white); font-weight: 500; }
755
+ .vc-v.green { color: var(--green); }
756
+
757
+ /* ─────────────── TRAINING ─────────────── */
758
+ .training-phases {
759
+ display: grid;
760
+ grid-template-columns: repeat(4, 1fr);
761
+ gap: 2px;
762
+ position: relative;
763
+ }
764
+
765
+ .training-phases::before {
766
+ content: '';
767
+ position: absolute;
768
+ top: 40px;
769
+ left: 12%;
770
+ right: 12%;
771
+ height: 1px;
772
+ background: linear-gradient(90deg, transparent, var(--amber), var(--amber), var(--amber), transparent);
773
+ z-index: 0;
774
+ }
775
+
776
+ .phase-card {
777
+ background: var(--panel);
778
+ border: 1px solid var(--border);
779
+ padding: 28px 20px;
780
+ position: relative;
781
+ z-index: 1;
782
+ transition: all 0.15s;
783
+ }
784
+ .phase-card:hover {
785
+ border-color: var(--amber);
786
+ transform: translateY(-3px);
787
+ }
788
+
789
+ .phase-num {
790
+ font-family: 'Orbitron', monospace;
791
+ font-size: 36px;
792
+ font-weight: 900;
793
+ color: var(--border2);
794
+ line-height: 1;
795
+ margin-bottom: 12px;
796
+ transition: color 0.15s;
797
+ }
798
+ .phase-card:hover .phase-num { color: var(--amber); }
799
+
800
+ .phase-title {
801
+ font-family: 'Barlow Condensed', sans-serif;
802
+ font-size: 18px;
803
+ font-weight: 700;
804
+ color: var(--white);
805
+ letter-spacing: 1px;
806
+ text-transform: uppercase;
807
+ margin-bottom: 10px;
808
+ }
809
+ .phase-steps {
810
+ font-size: 10px;
811
+ color: var(--text);
812
+ line-height: 1.8;
813
+ }
814
+ .phase-steps li {
815
+ list-style: none;
816
+ padding-left: 14px;
817
+ position: relative;
818
+ margin-bottom: 4px;
819
+ }
820
+ .phase-steps li::before {
821
+ content: '—';
822
+ position: absolute;
823
+ left: 0;
824
+ color: var(--amber);
825
+ font-size: 8px;
826
+ }
827
+
828
+ /* ─────────────── PRIME ─────────────── */
829
+ .prime-panel {
830
+ background: var(--panel);
831
+ border: 1px solid var(--purple);
832
+ position: relative;
833
+ overflow: hidden;
834
+ }
835
+
836
+ .prime-panel::before {
837
+ content: '';
838
+ position: absolute;
839
+ top: 0; left: 0; right: 0;
840
+ height: 3px;
841
+ background: linear-gradient(90deg, var(--prime), var(--blue), var(--prime));
842
+ background-size: 200% 100%;
843
+ animation: shimmer 3s linear infinite;
844
+ }
845
+ @keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
846
+
847
+ .prime-inner { padding: 40px; }
848
+
849
+ .prime-header {
850
+ display: flex;
851
+ align-items: flex-start;
852
+ justify-content: space-between;
853
+ margin-bottom: 32px;
854
+ }
855
+ .prime-title {
856
+ font-family: 'Orbitron', monospace;
857
+ font-size: 36px;
858
+ font-weight: 900;
859
+ color: var(--prime);
860
+ filter: drop-shadow(0 0 20px rgba(168,85,247,0.4));
861
+ letter-spacing: 2px;
862
+ }
863
+ .prime-subtitle { font-size: 11px; color: var(--text); margin-top: 6px; letter-spacing: 2px; }
864
+ .prime-badges { display: flex; gap: 8px; flex-direction: column; align-items: flex-end; }
865
+ .prime-badge {
866
+ font-size: 9px;
867
+ letter-spacing: 2px;
868
+ padding: 4px 14px;
869
+ border: 1px solid;
870
+ text-transform: uppercase;
871
+ }
872
+ .pb-closed { border-color: var(--purple); color: var(--purple); background: rgba(168,85,247,0.08); }
873
+ .pb-api { border-color: var(--blue); color: var(--blue); background: rgba(30,144,255,0.08); }
874
+
875
+ .prime-modules {
876
+ display: grid;
877
+ grid-template-columns: repeat(3, 1fr);
878
+ gap: 2px;
879
+ margin-bottom: 32px;
880
+ }
881
+ .pm-card {
882
+ background: rgba(168,85,247,0.04);
883
+ border: 1px solid rgba(168,85,247,0.2);
884
+ padding: 16px;
885
+ transition: all 0.15s;
886
+ }
887
+ .pm-card:hover {
888
+ background: rgba(168,85,247,0.08);
889
+ border-color: var(--purple);
890
+ }
891
+ .pm-name { font-size: 10px; color: var(--prime); margin-bottom: 5px; letter-spacing: 0.5px; }
892
+ .pm-desc { font-size: 9px; color: var(--text); line-height: 1.6; }
893
+
894
+ .prime-api {
895
+ background: #020608;
896
+ border: 1px solid var(--border);
897
+ padding: 24px 28px;
898
+ font-family: 'DM Mono', monospace;
899
+ font-size: 11px;
900
+ line-height: 2;
901
+ overflow-x: auto;
902
+ }
903
+ .kw { color: var(--prime); }
904
+ .str { color: #86efac; }
905
+ .key { color: var(--amber); }
906
+ .cm { color: var(--border2); }
907
+ .num { color: var(--lens); }
908
+
909
+ /* ─────────────── TRAINING DATA ─────────────── */
910
+ .data-table {
911
+ width: 100%;
912
+ border-collapse: collapse;
913
+ font-size: 11px;
914
+ }
915
+ .data-table th {
916
+ font-family: 'DM Mono', monospace;
917
+ font-size: 9px;
918
+ letter-spacing: 3px;
919
+ color: var(--amber);
920
+ text-transform: uppercase;
921
+ padding: 10px 16px;
922
+ border-bottom: 1px solid var(--amber);
923
+ text-align: left;
924
+ background: rgba(245,166,35,0.04);
925
+ }
926
+ .data-table td {
927
+ padding: 10px 16px;
928
+ border-bottom: 1px solid var(--border);
929
+ color: var(--text);
930
+ vertical-align: top;
931
+ }
932
+ .data-table tr:hover td { background: rgba(255,255,255,0.02); color: var(--text-bright); }
933
+ .td-dataset { color: var(--white); font-weight: 500; }
934
+ .td-size { color: var(--amber); font-family: 'Orbitron', monospace; font-size: 9px; }
935
+ .td-used { display: flex; gap: 4px; flex-wrap: wrap; }
936
+ .td-chip {
937
+ font-size: 8px;
938
+ letter-spacing: 1px;
939
+ padding: 2px 7px;
940
+ border: 1px solid var(--border2);
941
+ color: var(--text);
942
+ }
943
+ .chip-atlas { border-color: rgba(245,166,35,0.4); color: var(--atlas); }
944
+ .chip-forge { border-color: rgba(255,107,53,0.4); color: var(--forge); }
945
+ .chip-cast { border-color: rgba(0,212,170,0.4); color: var(--cast); }
946
+ .chip-lens { border-color: rgba(123,143,255,0.4); color: var(--lens); }
947
+ .chip-prime { border-color: rgba(168,85,247,0.4); color: var(--prime); }
948
+
949
+ /* ─────────────── FOOTER ─────────────── */
950
+ .footer {
951
+ margin-top: 100px;
952
+ padding: 32px 0;
953
+ border-top: 1px solid var(--border);
954
+ display: flex;
955
+ justify-content: space-between;
956
+ align-items: center;
957
+ flex-wrap: gap;
958
+ gap: 16px;
959
+ }
960
+ .footer-left {
961
+ font-size: 9px;
962
+ color: var(--border2);
963
+ letter-spacing: 3px;
964
+ line-height: 1.8;
965
+ }
966
+ .footer-models {
967
+ display: flex;
968
+ gap: 20px;
969
+ }
970
+ .fm-dot {
971
+ font-size: 9px;
972
+ letter-spacing: 2px;
973
+ display: flex;
974
+ align-items: center;
975
+ gap: 6px;
976
+ }
977
+ .fm-dot::before { content: '◆'; font-size: 7px; }
978
+ .fm-atlas::before { color: var(--atlas); }
979
+ .fm-forge::before { color: var(--forge); }
980
+ .fm-cast::before { color: var(--cast); }
981
+ .fm-lens::before { color: var(--lens); }
982
+ .fm-prime::before { color: var(--prime); }
983
+
984
+ /* ─────────────── SCROLLBAR ─────────────── */
985
+ ::-webkit-scrollbar { width: 4px; }
986
+ ::-webkit-scrollbar-track { background: var(--bg); }
987
+ ::-webkit-scrollbar-thumb { background: var(--border2); }
988
+ ::-webkit-scrollbar-thumb:hover { background: var(--amber); }
989
+
990
+ /* ─────────────── RESPONSIVE ─────────────── */
991
+ @media (max-width: 1100px) {
992
+ .model-grid { grid-template-columns: repeat(3, 1fr); }
993
+ .vram-grid { grid-template-columns: repeat(3, 1fr); }
994
+ .arch-diagram { grid-template-columns: 1fr; }
995
+ .prime-modules { grid-template-columns: repeat(2, 1fr); }
996
+ }
997
+ @media (max-width: 800px) {
998
+ .wrap { padding: 0 20px 80px; }
999
+ .model-grid { grid-template-columns: 1fr 1fr; }
1000
+ .input-grid { grid-template-columns: 1fr 1fr; }
1001
+ .modules-grid { grid-template-columns: 1fr 1fr; }
1002
+ .training-phases { grid-template-columns: 1fr 1fr; }
1003
+ .training-phases::before { display: none; }
1004
+ .decoder-panel.active { grid-template-columns: 1fr; }
1005
+ .decoder-tabs { flex-wrap: wrap; }
1006
+ .prime-modules { grid-template-columns: 1fr; }
1007
+ .cube-wrap { display: none; }
1008
+ }
1009
+ </style>
1010
+ </head>
1011
+ <body>
1012
+ <div class="wrap">
1013
+
1014
+ <!-- ══════ HERO ══════ -->
1015
+ <div class="hero">
1016
+ <!-- Wireframe cube SVG (CSS 3D simulated) -->
1017
+ <div class="cube-wrap">
1018
+ <svg class="cube-svg" viewBox="0 0 520 520" fill="none" xmlns="http://www.w3.org/2000/svg">
1019
+ <!-- Outer cube -->
1020
+ <line x1="130" y1="130" x2="390" y2="130"/>
1021
+ <line x1="390" y1="130" x2="390" y2="390"/>
1022
+ <line x1="390" y1="390" x2="130" y2="390"/>
1023
+ <line x1="130" y1="390" x2="130" y2="130"/>
1024
+ <!-- Inner cube (depth illusion) -->
1025
+ <line x1="180" y1="180" x2="340" y2="180"/>
1026
+ <line x1="340" y1="180" x2="340" y2="340"/>
1027
+ <line x1="340" y1="340" x2="180" y2="340"/>
1028
+ <line x1="180" y1="340" x2="180" y2="180"/>
1029
+ <!-- Connectors -->
1030
+ <line x1="130" y1="130" x2="180" y2="180" stroke-dasharray="4 4"/>
1031
+ <line x1="390" y1="130" x2="340" y2="180" stroke-dasharray="4 4"/>
1032
+ <line x1="390" y1="390" x2="340" y2="340" stroke-dasharray="4 4"/>
1033
+ <line x1="130" y1="390" x2="180" y2="340" stroke-dasharray="4 4"/>
1034
+ <!-- Diagonals -->
1035
+ <line x1="130" y1="130" x2="390" y2="390" stroke-opacity="0.15"/>
1036
+ <line x1="390" y1="130" x2="130" y2="390" stroke-opacity="0.15"/>
1037
+ <!-- Cross hairs -->
1038
+ <line x1="260" y1="80" x2="260" y2="440" stroke-opacity="0.1" stroke-dasharray="2 6"/>
1039
+ <line x1="80" y1="260" x2="440" y2="260" stroke-opacity="0.1" stroke-dasharray="2 6"/>
1040
+ <!-- Corner dots -->
1041
+ <circle cx="130" cy="130" r="4" fill="#f5a623"/>
1042
+ <circle cx="390" cy="130" r="4" fill="#f5a623"/>
1043
+ <circle cx="390" cy="390" r="4" fill="#f5a623"/>
1044
+ <circle cx="130" cy="390" r="4" fill="#f5a623"/>
1045
+ <circle cx="180" cy="180" r="3" fill="#f5a623" fill-opacity="0.5"/>
1046
+ <circle cx="340" cy="180" r="3" fill="#f5a623" fill-opacity="0.5"/>
1047
+ <circle cx="340" cy="340" r="3" fill="#f5a623" fill-opacity="0.5"/>
1048
+ <circle cx="180" cy="340" r="3" fill="#f5a623" fill-opacity="0.5"/>
1049
+ <!-- Center -->
1050
+ <circle cx="260" cy="260" r="6" fill="none" stroke="#f5a623" stroke-opacity="0.6"/>
1051
+ <circle cx="260" cy="260" r="2" fill="#f5a623"/>
1052
+ <!-- Measurement lines -->
1053
+ <line x1="80" y1="130" x2="110" y2="130" stroke-opacity="0.3"/>
1054
+ <line x1="80" y1="390" x2="110" y2="390" stroke-opacity="0.3"/>
1055
+ <line x1="80" y1="130" x2="80" y2="390" stroke-opacity="0.3"/>
1056
+ <line x1="130" y1="440" x2="130" y2="410" stroke-opacity="0.3"/>
1057
+ <line x1="390" y1="440" x2="390" y2="410" stroke-opacity="0.3"/>
1058
+ <line x1="130" y1="440" x2="390" y2="440" stroke-opacity="0.3"/>
1059
+ </svg>
1060
+ </div>
1061
+
1062
+ <div class="hero-eyebrow">MATRIX.CORP — 3D GENERATION SERIES</div>
1063
+
1064
+ <h1 class="hero-title">
1065
+ <span class="matrix">MATRIX</span>
1066
+ <span class="voxel">VOXEL</span>
1067
+ </h1>
1068
+
1069
+ <p class="hero-sub">Flow Matching · Multi-Modal Input · Task-Specific Decoders · A100 40GB</p>
1070
+
1071
+ <div class="hero-tags">
1072
+ <span class="tag a">5 Models</span>
1073
+ <span class="tag a">Shared Backbone ~2.3B</span>
1074
+ <span class="tag b">Flow Matching (DiT)</span>
1075
+ <span class="tag b">Triplane Latent Space</span>
1076
+ <span class="tag g">4 Open Source</span>
1077
+ <span class="tag p">1 Closed Source (Prime)</span>
1078
+ <span class="tag">Text + Image + Video + 3D Input</span>
1079
+ <span class="tag">OBJ · GLB · STL · NeRF · 3DGS · USD</span>
1080
+ <span class="tag">A100 40GB Target</span>
1081
+ </div>
1082
+
1083
+ <div class="scroll-hint">SCROLL TO EXPLORE</div>
1084
+ <div class="hero-rule"></div>
1085
+ </div>
1086
+
1087
+ <!-- ══════ SECTION 1 — MODEL FAMILY ══════ -->
1088
+ <div class="section" id="s1">
1089
+ <div class="section-header">
1090
+ <span class="section-num">01 —</span>
1091
+ <span class="section-title">Model Family</span>
1092
+ </div>
1093
+
1094
+ <div class="model-grid">
1095
+ <!-- Atlas -->
1096
+ <div class="model-card mc-atlas">
1097
+ <div class="model-card-top"></div>
1098
+ <div class="model-card-body">
1099
+ <div class="mc-icon">🗺️</div>
1100
+ <div class="mc-name">Voxel Atlas</div>
1101
+ <div class="mc-task">World & environment generation. Terrain, buildings, biomes, interiors.</div>
1102
+ <div class="mc-formats">
1103
+ <div class="mc-fmt">.vox — Voxel Grid</div>
1104
+ <div class="mc-fmt">.obj — Scene</div>
1105
+ <div class="mc-fmt">.usd — Stage</div>
1106
+ </div>
1107
+ <div class="mc-badges">
1108
+ <span class="mc-badge badge-open">Open Source</span>
1109
+ <span class="mc-badge badge-planned">Planned</span>
1110
+ </div>
1111
+ </div>
1112
+ </div>
1113
+ <!-- Forge -->
1114
+ <div class="model-card mc-forge">
1115
+ <div class="model-card-top"></div>
1116
+ <div class="model-card-body">
1117
+ <div class="mc-icon">⚒️</div>
1118
+ <div class="mc-name">Voxel Forge</div>
1119
+ <div class="mc-task">Game-ready mesh & asset generation with PBR textures.</div>
1120
+ <div class="mc-formats">
1121
+ <div class="mc-fmt">.obj / .glb</div>
1122
+ <div class="mc-fmt">.fbx — Game Engine</div>
1123
+ <div class="mc-fmt">.usdz — Apple AR</div>
1124
+ </div>
1125
+ <div class="mc-badges">
1126
+ <span class="mc-badge badge-open">Open Source</span>
1127
+ <span class="mc-badge badge-planned">Planned</span>
1128
+ </div>
1129
+ </div>
1130
+ </div>
1131
+ <!-- Cast -->
1132
+ <div class="model-card mc-cast">
1133
+ <div class="model-card-top"></div>
1134
+ <div class="model-card-body">
1135
+ <div class="mc-icon">🖨️</div>
1136
+ <div class="mc-name">Voxel Cast</div>
1137
+ <div class="mc-task">3D printable generation. Watertight, manifold, structurally valid.</div>
1138
+ <div class="mc-formats">
1139
+ <div class="mc-fmt">.stl — Universal</div>
1140
+ <div class="mc-fmt">.step — CAD</div>
1141
+ <div class="mc-fmt">.3mf — Modern</div>
1142
+ </div>
1143
+ <div class="mc-badges">
1144
+ <span class="mc-badge badge-open">Open Source</span>
1145
+ <span class="mc-badge badge-planned">Planned</span>
1146
+ </div>
1147
+ </div>
1148
+ </div>
1149
+ <!-- Lens -->
1150
+ <div class="model-card mc-lens">
1151
+ <div class="model-card-top"></div>
1152
+ <div class="model-card-body">
1153
+ <div class="mc-icon">🔭</div>
1154
+ <div class="mc-name">Voxel Lens</div>
1155
+ <div class="mc-task">NeRF & Gaussian Splatting. Photorealistic scenes for VR/AR & cinema.</div>
1156
+ <div class="mc-formats">
1157
+ <div class="mc-fmt">.ply — 3DGS</div>
1158
+ <div class="mc-fmt">NeRF weights</div>
1159
+ <div class="mc-fmt">.mp4 — Render</div>
1160
+ </div>
1161
+ <div class="mc-badges">
1162
+ <span class="mc-badge badge-open">Open Source</span>
1163
+ <span class="mc-badge badge-planned">Planned</span>
1164
+ </div>
1165
+ </div>
1166
+ </div>
1167
+ <!-- Prime -->
1168
+ <div class="model-card mc-prime">
1169
+ <div class="model-card-top"></div>
1170
+ <div class="model-card-body">
1171
+ <div class="mc-icon">⭐</div>
1172
+ <div class="mc-name">Voxel Prime</div>
1173
+ <div class="mc-task">All-in-one unified generation. All output types in a single API call.</div>
1174
+ <div class="mc-formats">
1175
+ <div class="mc-fmt">All formats</div>
1176
+ <div class="mc-fmt">Pipeline mode</div>
1177
+ <div class="mc-fmt">Style transfer</div>
1178
+ </div>
1179
+ <div class="mc-badges">
1180
+ <span class="mc-badge badge-closed">Closed Source</span>
1181
+ <span class="mc-badge badge-planned">Planned</span>
1182
+ </div>
1183
+ </div>
1184
+ </div>
1185
+ </div>
1186
+ </div>
1187
+
1188
+ <!-- ══════ SECTION 2 — INPUTS ══════ -->
1189
+ <div class="section" id="s2">
1190
+ <div class="section-header">
1191
+ <span class="section-num">02 —</span>
1192
+ <span class="section-title">Input Modalities</span>
1193
+ </div>
1194
+
1195
+ <div class="input-grid">
1196
+ <div class="input-card">
1197
+ <div class="input-icon">💬</div>
1198
+ <div class="input-name">Text</div>
1199
+ <div class="input-enc">CLIP-ViT-L + T5-XXL</div>
1200
+ <div class="input-desc">Natural language prompt. Primary conditioning signal. Supports detailed descriptions, style directives, material specs.</div>
1201
+ </div>
1202
+ <div class="input-card">
1203
+ <div class="input-icon">🖼️</div>
1204
+ <div class="input-name">Image</div>
1205
+ <div class="input-enc">DINOv2-L + Depth Encoder</div>
1206
+ <div class="input-desc">Single reference image lifted to 3D. Infers geometry from visual cues, shading, perspective.</div>
1207
+ </div>
1208
+ <div class="input-card">
1209
+ <div class="input-icon">📷</div>
1210
+ <div class="input-name">Multi-View</div>
1211
+ <div class="input-enc">Multi-View Transformer</div>
1212
+ <div class="input-desc">2–12 images from different angles. Best geometry accuracy. Triangulates structure from multiple perspectives.</div>
1213
+ </div>
1214
+ <div class="input-card">
1215
+ <div class="input-icon">🎬</div>
1216
+ <div class="input-name">Video</div>
1217
+ <div class="input-enc">Video-MAE + Temporal Pool</div>
1218
+ <div class="input-desc">Extracts frames, infers 3D from camera motion. Enables dynamic / animated 3D scene generation (Lens).</div>
1219
+ </div>
1220
+ <div class="input-card">
1221
+ <div class="input-icon">🗿</div>
1222
+ <div class="input-name">3D Model</div>
1223
+ <div class="input-enc">PointNet++</div>
1224
+ <div class="input-desc">Existing mesh or point cloud as conditioning. Enables retexturing, restyling, format conversion, remeshing.</div>
1225
+ </div>
1226
+ </div>
1227
+
1228
+ <div class="fusion-arrow">ALL INPUTS → CROSS-MODAL ATTENTION FUSION → 1024-DIM CONDITIONING VECTOR</div>
1229
+ </div>
1230
+
1231
+ <!-- ══════ SECTION 3 — ARCHITECTURE ══════ -->
1232
+ <div class="section" id="s3">
1233
+ <div class="section-header">
1234
+ <span class="section-num">03 —</span>
1235
+ <span class="section-title">Core Architecture</span>
1236
+ </div>
1237
+
1238
+ <div class="arch-diagram">
1239
+ <div class="arch-stack">
1240
+ <!-- Input encoders -->
1241
+ <div class="arch-layer input">
1242
+ <div class="arch-dot"></div>
1243
+ <div><div class="arch-label">Text Encoder (T5-XXL + CLIP-ViT-L)</div><div class="arch-sub">→ 1024-dim text embedding</div></div>
1244
+ <div class="arch-param">~4.7B</div>
1245
+ </div>
1246
+ <div class="arch-layer input">
1247
+ <div class="arch-dot"></div>
1248
+ <div><div class="arch-label">Image / MultiView / Video / 3D Encoders</div><div class="arch-sub">DINOv2 · MultiViewTX · VideoMAE · PointNet++</div></div>
1249
+ <div class="arch-param">~1.2B</div>
1250
+ </div>
1251
+ <!-- Fusion -->
1252
+ <div class="arch-layer fuse" style="border-color:rgba(255,204,92,0.4); margin-top:2px;">
1253
+ <div class="arch-dot"></div>
1254
+ <div><div class="arch-label">Cross-Modal Conditioning Fusion</div><div class="arch-sub">Fuses all active input modalities → unified conditioning</div></div>
1255
+ <div class="arch-param">Module 01</div>
1256
+ </div>
1257
+ <!-- Backbone -->
1258
+ <div style="margin-top:2px;">
1259
+ <div class="arch-layer backbone">
1260
+ <div class="arch-dot"></div>
1261
+ <div><div class="arch-label">Flow Matching DiT Backbone</div><div class="arch-sub">24 blocks · hidden 1536 · 24 heads · AdaLN-Zero · 3D RoPE</div></div>
1262
+ <div class="arch-param">~2.3B</div>
1263
+ </div>
1264
+ <div class="arch-layer backbone" style="opacity:0.7">
1265
+ <div class="arch-dot"></div>
1266
+ <div><div class="arch-label">Triplane Latent Space</div><div class="arch-sub">3 × 256 × 256 × 32 channels · XY / XZ / YZ planes</div></div>
1267
+ <div class="arch-param">SHARED</div>
1268
+ </div>
1269
+ </div>
1270
+ <!-- Decoders -->
1271
+ <div style="margin-top:2px; display:grid; grid-template-columns:1fr 1fr; gap:2px;">
1272
+ <div class="arch-layer decoder" style="border-color:rgba(245,166,35,0.3)">
1273
+ <div class="arch-dot" style="border-color:var(--atlas)"></div>
1274
+ <div><div class="arch-label">Atlas Decoder</div><div class="arch-sub">Scene layout + voxelizer</div></div>
1275
+ </div>
1276
+ <div class="arch-layer decoder" style="border-color:rgba(255,107,53,0.3)">
1277
+ <div class="arch-dot" style="border-color:var(--forge)"></div>
1278
+ <div><div class="arch-label">Forge Decoder</div><div class="arch-sub">Occupancy + mesh refinement</div></div>
1279
+ </div>
1280
+ <div class="arch-layer decoder" style="border-color:rgba(0,212,170,0.3)">
1281
+ <div class="arch-dot" style="border-color:var(--cast)"></div>
1282
+ <div><div class="arch-label">Cast Decoder</div><div class="arch-sub">SDF → watertight mesh</div></div>
1283
+ </div>
1284
+ <div class="arch-layer decoder" style="border-color:rgba(123,143,255,0.3)">
1285
+ <div class="arch-dot" style="border-color:var(--lens)"></div>
1286
+ <div><div class="arch-label">Lens Decoder</div><div class="arch-sub">Gaussian param predictor</div></div>
1287
+ </div>
1288
+ </div>
1289
+ </div>
1290
+
1291
+ <!-- Stats aside -->
1292
+ <div class="arch-aside">
1293
+ <div class="arch-stat-box">
1294
+ <div class="asb-label">Flow Matching Config</div>
1295
+ <div class="asb-row"><span class="asb-k">Method</span><span class="asb-v amber">Optimal Transport FM</span></div>
1296
+ <div class="asb-row"><span class="asb-k">Inference Steps</span><span class="asb-v">20 – 50 NFE</span></div>
1297
+ <div class="asb-row"><span class="asb-k">vs DDPM</span><span class="asb-v green">~50× faster sampling</span></div>
1298
+ <div class="asb-row"><span class="asb-k">CFG Scale</span><span class="asb-v">5.0 – 10.0</span></div>
1299
+ <div class="asb-row"><span class="asb-k">CFG Dropout</span><span class="asb-v">10% during train</span></div>
1300
+ <div class="asb-row"><span class="asb-k">Scheduler</span><span class="asb-v">RF (Rectified Flow)</span></div>
1301
+ </div>
1302
+ <div class="arch-stat-box">
1303
+ <div class="asb-label">Triplane Latent</div>
1304
+ <div class="asb-row"><span class="asb-k">Planes</span><span class="asb-v">XY · XZ · YZ</span></div>
1305
+ <div class="asb-row"><span class="asb-k">Resolution</span><span class="asb-v">256 × 256</span></div>
1306
+ <div class="asb-row"><span class="asb-k">Channels</span><span class="asb-v">32 per plane</span></div>
1307
+ <div class="asb-row"><span class="asb-k">Total values</span><span class="asb-v">~6M latents</span></div>
1308
+ <div class="asb-row"><span class="asb-k">Point query</span><span class="asb-v">Project → 3 planes → sum</span></div>
1309
+ </div>
1310
+ <div class="arch-stat-box">
1311
+ <div class="asb-label">Backbone Stats</div>
1312
+ <div class="asb-row"><span class="asb-k">Architecture</span><span class="asb-v amber">DiT (Diffusion Transformer)</span></div>
1313
+ <div class="asb-row"><span class="asb-k">Layers</span><span class="asb-v">24 transformer blocks</span></div>
1314
+ <div class="asb-row"><span class="asb-k">Hidden dim</span><span class="asb-v">1536</span></div>
1315
+ <div class="asb-row"><span class="asb-k">Attention heads</span><span class="asb-v">24</span></div>
1316
+ <div class="asb-row"><span class="asb-k">Conditioning</span><span class="asb-v">AdaLN-Zero</span></div>
1317
+ <div class="asb-row"><span class="asb-k">Parameters</span><span class="asb-v green">~2.3B</span></div>
1318
+ </div>
1319
+ </div>
1320
+ </div>
1321
+ </div>
1322
+
1323
+ <!-- ══════ SECTION 4 — DECODER HEADS ══════ -->
1324
+ <div class="section" id="s4">
1325
+ <div class="section-header">
1326
+ <span class="section-num">04 —</span>
1327
+ <span class="section-title">Task-Specific Decoder Heads</span>
1328
+ </div>
1329
+
1330
+ <div class="decoder-tabs">
1331
+ <div class="dtab active-atlas" onclick="showDecoder('atlas', this)">🗺️ Atlas</div>
1332
+ <div class="dtab" onclick="showDecoder('forge', this)">⚒️ Forge</div>
1333
+ <div class="dtab" onclick="showDecoder('cast', this)">🖨️ Cast</div>
1334
+ <div class="dtab" onclick="showDecoder('lens', this)">🔭 Lens</div>
1335
+ </div>
1336
+
1337
+ <!-- Atlas -->
1338
+ <div class="decoder-panel active" id="dp-atlas" data-model="atlas">
1339
+ <div>
1340
+ <div class="dp-title atlas">Voxel Atlas</div>
1341
+ <div class="dp-task">World & environment generation. Generates complete 3D scenes — terrain, structures, vegetation, sky. Supports infinite world tiling with seamless chunk stitching and biome-aware generation across 8 biome types.</div>
1342
+ <div class="dp-outputs">
1343
+ <span class="dp-fmt">.vox</span><span class="dp-fmt">.obj scene</span><span class="dp-fmt">.usd stage</span>
1344
+ </div>
1345
+ <div class="dp-modules">
1346
+ <div class="dp-module">
1347
+ <div class="dp-mod-name">Scene Layout Transformer</div>
1348
+ <div class="dp-mod-desc">6-layer transformer over 32×32 spatial grid. Divides space into semantic regions: terrain, structures, vegetation, sky, water.</div>
1349
+ </div>
1350
+ <div class="dp-module">
1351
+ <div class="dp-mod-name">Region-wise NeRF Decoder</div>
1352
+ <div class="dp-mod-desc">Per-region MLP: 3D coords + triplane → density + RGB + semantic label. Marching cubes extraction per region.</div>
1353
+ </div>
1354
+ <div class="dp-module">
1355
+ <div class="dp-mod-name">Infinite World Tiling</div>
1356
+ <div class="dp-mod-desc">Generates seamless adjacent chunks. Tiling latent conditioning ensures consistent biome transitions at borders.</div>
1357
+ </div>
1358
+ <div class="dp-module">
1359
+ <div class="dp-mod-name">LOD Generator</div>
1360
+ <div class="dp-mod-desc">Auto-generates 4 levels of detail per scene object. Compatible with Unity/Unreal LOD systems.</div>
1361
+ </div>
1362
+ </div>
1363
+ </div>
1364
+ <div class="dp-stats">
1365
+ <div class="dp-stat"><span class="dp-stat-k">Decoder params</span><span class="dp-stat-v">~400M</span></div>
1366
+ <div class="dp-stat"><span class="dp-stat-k">Total model size</span><span class="dp-stat-v">~2.7B</span></div>
1367
+ <div class="dp-stat"><span class="dp-stat-k">VRAM (BF16)</span><span class="dp-stat-v">~22GB</span></div>
1368
+ <div class="dp-stat"><span class="dp-stat-k">Small scene</span><span class="dp-stat-v">~8s on A100</span></div>
1369
+ <div class="dp-stat"><span class="dp-stat-k">Large chunk (256³)</span><span class="dp-stat-v">~35s on A100</span></div>
1370
+ <div class="dp-stat"><span class="dp-stat-k">Biome types</span><span class="dp-stat-v">8</span></div>
1371
+ <div class="dp-stat"><span class="dp-stat-k">LOD levels</span><span class="dp-stat-v">4</span></div>
1372
+ <div class="dp-stat"><span class="dp-stat-k">Max world resolution</span><span class="dp-stat-v">256×256×128 voxels</span></div>
1373
+ </div>
1374
+ </div>
1375
+
1376
+ <!-- Forge -->
1377
+ <div class="decoder-panel" id="dp-forge" data-model="forge">
1378
+ <div>
1379
+ <div class="dp-title forge">Voxel Forge</div>
1380
+ <div class="dp-task">Game-ready 3D asset generation with clean topology and full PBR texture maps. Supports characters, objects, props, vehicles, and architectural elements. Topology-optimized for animation rigging.</div>
1381
+ <div class="dp-outputs">
1382
+ <span class="dp-fmt">.obj + .mtl</span><span class="dp-fmt">.glb / .gltf</span><span class="dp-fmt">.fbx</span><span class="dp-fmt">.usdz</span>
1383
+ </div>
1384
+ <div class="dp-modules">
1385
+ <div class="dp-module">
1386
+ <div class="dp-mod-name">Occupancy Network + Marching Cubes</div>
1387
+ <div class="dp-mod-desc">MLP: 3D point + triplane → occupancy probability. Differentiable marching cubes produces initial raw mesh.</div>
1388
+ </div>
1389
+ <div class="dp-module">
1390
+ <div class="dp-mod-name">Mesh Refinement GNN</div>
1391
+ <div class="dp-mod-desc">Graph neural network over mesh vertices/edges. 8 message-passing rounds. Predicts vertex position offsets for clean quad-dominant topology.</div>
1392
+ </div>
1393
+ <div class="dp-module">
1394
+ <div class="dp-mod-name">UV Unwrapper + Texture Diffusion</div>
1395
+ <div class="dp-mod-desc">Learned UV unwrapping (SeamlessUV lineage). 2D flow matching in UV space generates albedo, roughness, metallic, normal maps at 1K–2K resolution.</div>
1396
+ </div>
1397
+ <div class="dp-module">
1398
+ <div class="dp-mod-name">Topology & Animation Optimizer</div>
1399
+ <div class="dp-mod-desc">Enforces edge loops for rigging. Optional bilateral symmetry. Scale normalized to real-world meters.</div>
1400
+ </div>
1401
+ </div>
1402
+ </div>
1403
+ <div class="dp-stats">
1404
+ <div class="dp-stat"><span class="dp-stat-k">Decoder params</span><span class="dp-stat-v">~350M</span></div>
1405
+ <div class="dp-stat"><span class="dp-stat-k">Total model size</span><span class="dp-stat-v">~2.65B</span></div>
1406
+ <div class="dp-stat"><span class="dp-stat-k">VRAM (BF16)</span><span class="dp-stat-v">~21GB</span></div>
1407
+ <div class="dp-stat"><span class="dp-stat-k">Low poly (≤5K tris)</span><span class="dp-stat-v">~6s on A100</span></div>
1408
+ <div class="dp-stat"><span class="dp-stat-k">Mid poly (≤50K tris)</span><span class="dp-stat-v">~15s on A100</span></div>
1409
+ <div class="dp-stat"><span class="dp-stat-k">High poly (≤500K)</span><span class="dp-stat-v">~45s on A100</span></div>
1410
+ <div class="dp-stat"><span class="dp-stat-k">Texture resolution</span><span class="dp-stat-v">1024 or 2048px</span></div>
1411
+ <div class="dp-stat"><span class="dp-stat-k">LOD levels</span><span class="dp-stat-v">4 (100/50/25/10%)</span></div>
1412
+ </div>
1413
+ </div>
1414
+
1415
+ <!-- Cast -->
1416
+ <div class="decoder-panel" id="dp-cast" data-model="cast">
1417
+ <div>
1418
+ <div class="dp-title cast">Voxel Cast</div>
1419
+ <div class="dp-task">Physically valid 3D printable model generation. Every Cast output is guaranteed watertight, manifold, zero self-intersections, minimum wall thickness enforced. Supports FDM, SLA, and resin printing workflows.</div>
1420
+ <div class="dp-outputs">
1421
+ <span class="dp-fmt">.stl</span><span class="dp-fmt">.obj (watertight)</span><span class="dp-fmt">.step (CAD)</span><span class="dp-fmt">.3mf</span>
1422
+ </div>
1423
+ <div class="dp-modules">
1424
+ <div class="dp-module">
1425
+ <div class="dp-mod-name">SDF Decoder → Dual Marching Cubes</div>
1426
+ <div class="dp-mod-desc">MLP outputs signed distance field. Dual marching cubes guarantees watertight topology — no holes by construction.</div>
1427
+ </div>
1428
+ <div class="dp-module">
1429
+ <div class="dp-mod-name">Printability Validator (hard constraints)</div>
1430
+ <div class="dp-mod-desc">Wall thickness ≥ 1.2mm enforced. Overhang > 45° flagged. Manifold checker + auto-repair. All outputs pass validation before delivery.</div>
1431
+ </div>
1432
+ <div class="dp-module">
1433
+ <div class="dp-mod-name">Hollowing Engine</div>
1434
+ <div class="dp-mod-desc">Auto-hollows solid objects with configurable wall thickness. Adds drain holes. Reduces material use by up to 80%.</div>
1435
+ </div>
1436
+ <div class="dp-module">
1437
+ <div class="dp-mod-name">Interlocking Part Splitter</div>
1438
+ <div class="dp-mod-desc">Splits large objects into printable parts with generated snap-fit joints. Scale validates against Bambu, Prusa, Ender bed sizes.</div>
1439
+ </div>
1440
+ </div>
1441
+ </div>
1442
+ <div class="dp-stats">
1443
+ <div class="dp-stat"><span class="dp-stat-k">Decoder params</span><span class="dp-stat-v">~200M</span></div>
1444
+ <div class="dp-stat"><span class="dp-stat-k">Total model size</span><span class="dp-stat-v">~2.5B</span></div>
1445
+ <div class="dp-stat"><span class="dp-stat-k">VRAM (BF16)</span><span class="dp-stat-v">~20GB</span></div>
1446
+ <div class="dp-stat"><span class="dp-stat-k">Guaranteed</span><span class="dp-stat-v">Watertight + Manifold</span></div>
1447
+ <div class="dp-stat"><span class="dp-stat-k">Min wall thickness</span><span class="dp-stat-v">1.2mm</span></div>
1448
+ <div class="dp-stat"><span class="dp-stat-k">Hollowing saving</span><span class="dp-stat-v">up to 80% material</span></div>
1449
+ <div class="dp-stat"><span class="dp-stat-k">Supported printers</span><span class="dp-stat-v">Bambu · Prusa · Ender</span></div>
1450
+ <div class="dp-stat"><span class="dp-stat-k">Non-manifold edges</span><span class="dp-stat-v">0 (guaranteed)</span></div>
1451
+ </div>
1452
+ </div>
1453
+
1454
+ <!-- Lens -->
1455
+ <div class="decoder-panel" id="dp-lens" data-model="lens">
1456
+ <div>
1457
+ <div class="dp-title lens">Voxel Lens</div>
1458
+ <div class="dp-task">Photorealistic 3D scene generation via Neural Radiance Fields and 3D Gaussian Splatting. Optimized for VR/AR visualization, cinematic rendering, and dynamic animated scenes from video input.</div>
1459
+ <div class="dp-outputs">
1460
+ <span class="dp-fmt">.ply (3DGS)</span><span class="dp-fmt">NeRF weights</span><span class="dp-fmt">.mp4 render</span><span class="dp-fmt">depth maps</span>
1461
+ </div>
1462
+ <div class="dp-modules">
1463
+ <div class="dp-module">
1464
+ <div class="dp-mod-name">Gaussian Parameter Decoder</div>
1465
+ <div class="dp-mod-desc">Per-Gaussian: position (3) + rotation (4) + scale (3) + opacity (1) + SH coefficients (48). Targets 500K–3M Gaussians per scene. Adaptive densification + pruning.</div>
1466
+ </div>
1467
+ <div class="dp-module">
1468
+ <div class="dp-mod-name">NeRF Branch (Instant-NGP style)</div>
1469
+ <div class="dp-mod-desc">Hash-grid encoder + tiny MLP. Runs in parallel with 3DGS branch. Used for scenes requiring higher photometric accuracy.</div>
1470
+ </div>
1471
+ <div class="dp-module">
1472
+ <div class="dp-mod-name">Dynamic Scene Support</div>
1473
+ <div class="dp-mod-desc">Temporal Gaussian sequences for animated scenes. Accepts video input → extracts motion → generates temporally consistent 3DGS.</div>
1474
+ </div>
1475
+ <div class="dp-module">
1476
+ <div class="dp-mod-name">Compression Module</div>
1477
+ <div class="dp-mod-desc">Reduces 3DGS file size by 60–80% with minimal quality loss. Critical for web and mobile delivery of Gaussian scenes.</div>
1478
+ </div>
1479
+ </div>
1480
+ </div>
1481
+ <div class="dp-stats">
1482
+ <div class="dp-stat"><span class="dp-stat-k">Decoder params</span><span class="dp-stat-v">~500M</span></div>
1483
+ <div class="dp-stat"><span class="dp-stat-k">Total model size</span><span class="dp-stat-v">~2.8B</span></div>
1484
+ <div class="dp-stat"><span class="dp-stat-k">VRAM (BF16)</span><span class="dp-stat-v">~22GB</span></div>
1485
+ <div class="dp-stat"><span class="dp-stat-k">Object-centric</span><span class="dp-stat-v">~12s on A100</span></div>
1486
+ <div class="dp-stat"><span class="dp-stat-k">Indoor scene</span><span class="dp-stat-v">~40s on A100</span></div>
1487
+ <div class="dp-stat"><span class="dp-stat-k">Outdoor scene</span><span class="dp-stat-v">~90s on A100</span></div>
1488
+ <div class="dp-stat"><span class="dp-stat-k">Max Gaussians</span><span class="dp-stat-v">3M per scene</span></div>
1489
+ <div class="dp-stat"><span class="dp-stat-k">File compression</span><span class="dp-stat-v">60–80% reduction</span></div>
1490
+ </div>
1491
+ </div>
1492
+ </div>
1493
+
1494
+ <!-- ══════ SECTION 5 — SHARED MODULES ══════ -->
1495
+ <div class="section" id="s5">
1496
+ <div class="section-header">
1497
+ <span class="section-num">05 —</span>
1498
+ <span class="section-title">10 Shared Custom Modules</span>
1499
+ </div>
1500
+ <div class="modules-grid">
1501
+ <div class="mod-card"><div class="mod-num">01</div><div class="mod-name">Cross-Modal Conditioning Fusion</div><div class="mod-desc">CrossModalAttention over all active input types. Unified 1024-dim conditioning vector fed to backbone.</div></div>
1502
+ <div class="mod-card"><div class="mod-num">02</div><div class="mod-name">3D RoPE Encoder</div><div class="mod-desc">RoPE adapted for triplane 3D spatial positions. Encodes XYZ coordinates with rotary positional embeddings.</div></div>
1503
+ <div class="mod-card"><div class="mod-num">03</div><div class="mod-name">Geometry Quality Scorer</div><div class="mod-desc">Rates generated geometry [0–1] before output. Flags low-quality generations for re-sampling at higher NFE.</div></div>
1504
+ <div class="mod-card"><div class="mod-num">04</div><div class="mod-name">Semantic Label Head</div><div class="mod-desc">Per-voxel/vertex semantic class prediction: wall, floor, ceiling, tree, water, metal, glass, fabric, etc.</div></div>
1505
+ <div class="mod-card"><div class="mod-num">05</div><div class="mod-name">Scale & Unit Manager</div><div class="mod-desc">Enforces consistent real-world scale. All outputs tagged with unit metadata (meters). Validates print scale.</div></div>
1506
+ <div class="mod-card"><div class="mod-num">06</div><div class="mod-name">Material Property Head</div><div class="mod-desc">Predicts PBR properties: roughness, metallic, IOR, subsurface scattering. Compatible with Blender/UE material graphs.</div></div>
1507
+ <div class="mod-card"><div class="mod-num">07</div><div class="mod-name">Confidence & Uncertainty Head</div><div class="mod-desc">Per-region generation confidence. Flags uncertain areas in output metadata. Drives re-sampling priority.</div></div>
1508
+ <div class="mod-card"><div class="mod-num">08</div><div class="mod-name">Prompt Adherence Scorer</div><div class="mod-desc">CLIP-based similarity score: how well the 3D output matches the input text prompt. Exposed in API response.</div></div>
1509
+ <div class="mod-card"><div class="mod-num">09</div><div class="mod-name">Multi-Resolution Decoder</div><div class="mod-desc">Coarse-to-fine generation: 64³ → 128³ → 256³. Each stage refines the previous. Enables fast previews at 64³.</div></div>
1510
+ <div class="mod-card"><div class="mod-num">10</div><div class="mod-name">Style Embedding Module</div><div class="mod-desc">Encodes style reference images into conditioning vector. Transfers art style, material aesthetic, and visual language to 3D output.</div></div>
1511
+ </div>
1512
+ </div>
1513
+
1514
+ <!-- ══════ SECTION 6 — VOXEL PRIME ══════ -->
1515
+ <div class="section" id="s6">
1516
+ <div class="section-header">
1517
+ <span class="section-num">06 —</span>
1518
+ <span class="section-title">Voxel Prime — All-In-One</span>
1519
+ </div>
1520
+ <div class="prime-panel">
1521
+ <div class="prime-inner">
1522
+ <div class="prime-header">
1523
+ <div>
1524
+ <div class="prime-title">VOXEL PRIME</div>
1525
+ <div class="prime-subtitle">CLOSED SOURCE · API ONLY · ALL DECODER HEADS · 6 EXCLUSIVE MODULES</div>
1526
+ </div>
1527
+ <div class="prime-badges">
1528
+ <span class="prime-badge pb-closed">🟣 Closed Source</span>
1529
+ <span class="prime-badge pb-api">API Access Only</span>
1530
+ </div>
1531
+ </div>
1532
+
1533
+ <div class="prime-modules">
1534
+ <div class="pm-card"><div class="pm-name">Cross-Task Consistency</div><div class="pm-desc">Ensures Atlas world + Forge assets + Lens scene all match visually when generated together in one call.</div></div>
1535
+ <div class="pm-card"><div class="pm-name">Scene Population Engine</div><div class="pm-desc">Generates a world (Atlas) then auto-populates it with fitting assets (Forge). One prompt → full scene.</div></div>
1536
+ <div class="pm-card"><div class="pm-name">Pipeline Orchestrator</div><div class="pm-desc">Chains Atlas → Forge → Cast → Lens in a single API request. Manages inter-model dependencies automatically.</div></div>
1537
+ <div class="pm-card"><div class="pm-name">4× Texture Upscaler</div><div class="pm-desc">Photorealistic super-resolution on all generated textures. 512px base → 2048px final via flow matching in UV space.</div></div>
1538
+ <div class="pm-card"><div class="pm-name">Style Transfer Module</div><div class="pm-desc">Apply artistic styles (Studio Ghibli, cyberpunk, brutalist, etc.) consistently across all output types in one generation.</div></div>
1539
+ <div class="pm-card"><div class="pm-name">Iterative Refinement</div><div class="pm-desc">Text-guided editing of already-generated 3D content. "Make the roof taller" → re-runs only affected regions.</div></div>
1540
+ </div>
1541
+
1542
+ <div class="prime-api">
1543
+ <span class="cm">POST /v1/voxel/generate</span><br>
1544
+ {<br>
1545
+ &nbsp;&nbsp;<span class="key">"prompt"</span>: <span class="str">"A medieval castle on a cliff at sunset"</span>,<br>
1546
+ &nbsp;&nbsp;<span class="key">"output_types"</span>: [<span class="str">"world"</span>, <span class="str">"mesh"</span>, <span class="str">"nerf"</span>],<br>
1547
+ &nbsp;&nbsp;<span class="key">"inputs"</span>: {<br>
1548
+ &nbsp;&nbsp;&nbsp;&nbsp;<span class="key">"image"</span>: <span class="str">"base64..."</span>,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="cm">// optional reference</span><br>
1549
+ &nbsp;&nbsp;&nbsp;&nbsp;<span class="key">"video"</span>: <span class="str">"base64..."</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="cm">// optional for dynamic scenes</span><br>
1550
+ &nbsp;&nbsp;},<br>
1551
+ &nbsp;&nbsp;<span class="key">"settings"</span>: {<br>
1552
+ &nbsp;&nbsp;&nbsp;&nbsp;<span class="key">"quality"</span>: <span class="str">"high"</span>,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="cm">// draft | standard | high</span><br>
1553
+ &nbsp;&nbsp;&nbsp;&nbsp;<span class="key">"style"</span>: <span class="str">"realistic"</span>,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="cm">// realistic | stylized | low-poly | ...</span><br>
1554
+ &nbsp;&nbsp;&nbsp;&nbsp;<span class="key">"scale_meters"</span>: <span class="num">100.0</span>,<br>
1555
+ &nbsp;&nbsp;&nbsp;&nbsp;<span class="key">"populate_scene"</span>: <span class="kw">true</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="cm">// Atlas → auto-populate with Forge assets</span><br>
1556
+ &nbsp;&nbsp;}<br>
1557
+ }
1558
+ </div>
1559
+ </div>
1560
+ </div>
1561
+ </div>
1562
+
1563
+ <!-- ══════ SECTION 7 — TRAINING DATA ══════ -->
1564
+ <div class="section" id="s7">
1565
+ <div class="section-header">
1566
+ <span class="section-num">07 —</span>
1567
+ <span class="section-title">Training Data</span>
1568
+ </div>
1569
+ <table class="data-table">
1570
+ <thead>
1571
+ <tr><th>Dataset</th><th>Size</th><th>Content</th><th>Used by</th></tr>
1572
+ </thead>
1573
+ <tbody>
1574
+ <tr><td class="td-dataset">Objaverse-XL</td><td class="td-size">10M+</td><td>Massive diverse 3D objects</td><td class="td-used"><span class="td-chip chip-atlas">Atlas</span><span class="td-chip chip-forge">Forge</span><span class="td-chip chip-cast">Cast</span><span class="td-chip chip-lens">Lens</span></td></tr>
1575
+ <tr><td class="td-dataset">Objaverse</td><td class="td-size">800K+</td><td>Diverse annotated 3D assets</td><td class="td-used"><span class="td-chip chip-forge">Forge</span><span class="td-chip chip-cast">Cast</span><span class="td-chip chip-lens">Lens</span></td></tr>
1576
+ <tr><td class="td-dataset">ShapeNet</td><td class="td-size">55K</td><td>Common object categories</td><td class="td-used"><span class="td-chip chip-forge">Forge</span><span class="td-chip chip-cast">Cast</span></td></tr>
1577
+ <tr><td class="td-dataset">ScanNet / ScanNet++</td><td class="td-size">1.5K scenes</td><td>Indoor 3D scans (RGB-D)</td><td class="td-used"><span class="td-chip chip-atlas">Atlas</span><span class="td-chip chip-lens">Lens</span></td></tr>
1578
+ <tr><td class="td-dataset">KITTI / nuScenes</td><td class="td-size">40K frames</td><td>Outdoor driving 3D scenes</td><td class="td-used"><span class="td-chip chip-atlas">Atlas</span><span class="td-chip chip-lens">Lens</span></td></tr>
1579
+ <tr><td class="td-dataset">ABO (Amazon Berkeley)</td><td class="td-size">148K</td><td>Product meshes + materials</td><td class="td-used"><span class="td-chip chip-forge">Forge</span></td></tr>
1580
+ <tr><td class="td-dataset">Thingiverse</td><td class="td-size">2M+</td><td>3D printable STL models</td><td class="td-used"><span class="td-chip chip-cast">Cast</span></td></tr>
1581
+ <tr><td class="td-dataset">Polycam Scans</td><td class="td-size">~500K</td><td>Real-world 3DGS / NeRF captures</td><td class="td-used"><span class="td-chip chip-lens">Lens</span></td></tr>
1582
+ <tr><td class="td-dataset">Synthetic Renders</td><td class="td-size">Generated</td><td>Multi-view renders of Objaverse</td><td class="td-used"><span class="td-chip chip-atlas">Atlas</span><span class="td-chip chip-forge">Forge</span><span class="td-chip chip-cast">Cast</span><span class="td-chip chip-lens">Lens</span></td></tr>
1583
+ <tr><td class="td-dataset">Text-3D Pairs (synthetic)</td><td class="td-size">Generated</td><td>GPT-4o descriptions of Objaverse</td><td class="td-used"><span class="td-chip chip-atlas">Atlas</span><span class="td-chip chip-forge">Forge</span><span class="td-chip chip-cast">Cast</span><span class="td-chip chip-lens">Lens</span></td></tr>
1584
+ </tbody>
1585
+ </table>
1586
+ </div>
1587
+
1588
+ <!-- ══════ SECTION 8 — VRAM ══════ -->
1589
+ <div class="section" id="s8">
1590
+ <div class="section-header">
1591
+ <span class="section-num">08 —</span>
1592
+ <span class="section-title">Model Sizes & VRAM</span>
1593
+ </div>
1594
+ <div class="vram-grid">
1595
+ <div class="vram-card mc-atlas">
1596
+ <div class="vc-name">VOXEL ATLAS</div>
1597
+ <div class="vc-row"><span class="vc-k">Backbone</span><span class="vc-v">2.3B</span></div>
1598
+ <div class="vc-row"><span class="vc-k">Decoder</span><span class="vc-v">~400M</span></div>
1599
+ <div class="vc-row"><span class="vc-k">Total</span><span class="vc-v">~2.7B</span></div>
1600
+ <div class="vc-row"><span class="vc-k">BF16 VRAM</span><span class="vc-v">~22GB</span></div>
1601
+ <div class="vc-row"><span class="vc-k">INT8 VRAM</span><span class="vc-v green">~11GB</span></div>
1602
+ </div>
1603
+ <div class="vram-card mc-forge">
1604
+ <div class="vc-name">VOXEL FORGE</div>
1605
+ <div class="vc-row"><span class="vc-k">Backbone</span><span class="vc-v">2.3B</span></div>
1606
+ <div class="vc-row"><span class="vc-k">Decoder</span><span class="vc-v">~350M</span></div>
1607
+ <div class="vc-row"><span class="vc-k">Total</span><span class="vc-v">~2.65B</span></div>
1608
+ <div class="vc-row"><span class="vc-k">BF16 VRAM</span><span class="vc-v">~21GB</span></div>
1609
+ <div class="vc-row"><span class="vc-k">INT8 VRAM</span><span class="vc-v green">~11GB</span></div>
1610
+ </div>
1611
+ <div class="vram-card mc-cast">
1612
+ <div class="vc-name">VOXEL CAST</div>
1613
+ <div class="vc-row"><span class="vc-k">Backbone</span><span class="vc-v">2.3B</span></div>
1614
+ <div class="vc-row"><span class="vc-k">Decoder</span><span class="vc-v">~200M</span></div>
1615
+ <div class="vc-row"><span class="vc-k">Total</span><span class="vc-v">~2.5B</span></div>
1616
+ <div class="vc-row"><span class="vc-k">BF16 VRAM</span><span class="vc-v">~20GB</span></div>
1617
+ <div class="vc-row"><span class="vc-k">INT8 VRAM</span><span class="vc-v green">~10GB</span></div>
1618
+ </div>
1619
+ <div class="vram-card mc-lens">
1620
+ <div class="vc-name">VOXEL LENS</div>
1621
+ <div class="vc-row"><span class="vc-k">Backbone</span><span class="vc-v">2.3B</span></div>
1622
+ <div class="vc-row"><span class="vc-k">Decoder</span><span class="vc-v">~500M</span></div>
1623
+ <div class="vc-row"><span class="vc-k">Total</span><span class="vc-v">~2.8B</span></div>
1624
+ <div class="vc-row"><span class="vc-k">BF16 VRAM</span><span class="vc-v">~22GB</span></div>
1625
+ <div class="vc-row"><span class="vc-k">INT8 VRAM</span><span class="vc-v green">~11GB</span></div>
1626
+ </div>
1627
+ <div class="vram-card mc-prime">
1628
+ <div class="vc-name">VOXEL PRIME</div>
1629
+ <div class="vc-row"><span class="vc-k">Backbone</span><span class="vc-v">2.3B</span></div>
1630
+ <div class="vc-row"><span class="vc-k">All Decoders</span><span class="vc-v">~1.4B</span></div>
1631
+ <div class="vc-row"><span class="vc-k">Total</span><span class="vc-v">~3.7B</span></div>
1632
+ <div class="vc-row"><span class="vc-k">BF16 VRAM</span><span class="vc-v">~30GB</span></div>
1633
+ <div class="vc-row"><span class="vc-k">INT8 VRAM</span><span class="vc-v green">~15GB</span></div>
1634
+ </div>
1635
+ </div>
1636
+ <div style="margin-top:12px; padding:12px 16px; border:1px solid var(--border); background:var(--panel); font-size:10px; color:var(--text);">
1637
+ ✦ &nbsp;All specialist models (Atlas/Forge/Cast/Lens) fit A100 40GB in BF16 comfortably. &nbsp;·&nbsp; INT8 quantization brings all under 15GB — viable on consumer RTX 4090 (24GB). &nbsp;·&nbsp; Voxel Prime requires A100 40GB BF16 or 2× 4090 INT8.
1638
+ </div>
1639
+ </div>
1640
+
1641
+ <!-- ══════ SECTION 9 — TRAINING ══════ -->
1642
+ <div class="section" id="s9">
1643
+ <div class="section-header">
1644
+ <span class="section-num">09 —</span>
1645
+ <span class="section-title">Training Strategy</span>
1646
+ </div>
1647
+ <div class="training-phases">
1648
+ <div class="phase-card">
1649
+ <div class="phase-num">01</div>
1650
+ <div class="phase-title">Backbone Pre-Training</div>
1651
+ <ul class="phase-steps">
1652
+ <li>Train shared DiT on Objaverse-XL triplane reconstructions</li>
1653
+ <li>Text + single image conditioning only</li>
1654
+ <li>Context: general 3D structure, no task specialization</li>
1655
+ <li>~100K steps on A100 cluster</li>
1656
+ </ul>
1657
+ </div>
1658
+ <div class="phase-card">
1659
+ <div class="phase-num">02</div>
1660
+ <div class="phase-title">Decoder Head Training</div>
1661
+ <ul class="phase-steps">
1662
+ <li>Freeze backbone, train each head independently</li>
1663
+ <li>Atlas: ScanNet + synthetic world data</li>
1664
+ <li>Forge: ShapeNet + Objaverse + textures</li>
1665
+ <li>Cast: Thingiverse + watertight synthetic meshes</li>
1666
+ <li>Lens: Polycam + synthetic multi-view renders</li>
1667
+ <li>~50K steps each (parallel runs)</li>
1668
+ </ul>
1669
+ </div>
1670
+ <div class="phase-card">
1671
+ <div class="phase-num">03</div>
1672
+ <div class="phase-title">Joint Fine-Tuning</div>
1673
+ <ul class="phase-steps">
1674
+ <li>Unfreeze backbone, full end-to-end per model</li>
1675
+ <li>Add all input modalities (video, multi-view, point cloud)</li>
1676
+ <li>Multi-resolution curriculum: 64³ → 128³ → 256³</li>
1677
+ <li>~30K steps each</li>
1678
+ </ul>
1679
+ </div>
1680
+ <div class="phase-card">
1681
+ <div class="phase-num">04</div>
1682
+ <div class="phase-title">Prime Training</div>
1683
+ <ul class="phase-steps">
1684
+ <li>Init from jointly fine-tuned backbone</li>
1685
+ <li>All 4 decoder heads trained simultaneously</li>
1686
+ <li>Cross-task consistency losses</li>
1687
+ <li>Pipeline orchestrator + style transfer modules</li>
1688
+ <li>~50K steps</li>
1689
+ </ul>
1690
+ </div>
1691
+ </div>
1692
+ </div>
1693
+
1694
+ <!-- Footer -->
1695
+ <div class="footer">
1696
+ <div class="footer-left">
1697
+ MATRIX.CORP — VOXEL SPEC V1.0<br>
1698
+ 🔴 PLANNED · ARCHITECTURE COMPLETE · COMPUTE TBD
1699
+ </div>
1700
+ <div class="footer-models">
1701
+ <span class="fm-dot fm-atlas" style="color:var(--atlas)">ATLAS</span>
1702
+ <span class="fm-dot fm-forge" style="color:var(--forge)">FORGE</span>
1703
+ <span class="fm-dot fm-cast" style="color:var(--cast)">CAST</span>
1704
+ <span class="fm-dot fm-lens" style="color:var(--lens)">LENS</span>
1705
+ <span class="fm-dot fm-prime" style="color:var(--prime)">PRIME</span>
1706
+ </div>
1707
+ </div>
1708
+
1709
+ </div>
1710
+
1711
+ <script>
1712
+ // ── Decoder tab switching ──
1713
+ function showDecoder(model, tabEl) {
1714
+ document.querySelectorAll('.decoder-panel').forEach(p => p.classList.remove('active'));
1715
+ document.querySelectorAll('.dtab').forEach(t => t.className = 'dtab');
1716
+ document.getElementById('dp-' + model).classList.add('active');
1717
+ tabEl.classList.add('active-' + model);
1718
+ }
1719
+
1720
+ // ── Scroll-triggered section reveals ──
1721
+ const observer = new IntersectionObserver((entries) => {
1722
+ entries.forEach(e => {
1723
+ if (e.isIntersecting) {
1724
+ e.target.classList.add('visible');
1725
+ }
1726
+ });
1727
+ }, { threshold: 0.08 });
1728
+
1729
+ document.querySelectorAll('.section').forEach((s, i) => {
1730
+ s.style.transitionDelay = '0.05s';
1731
+ observer.observe(s);
1732
+ });
1733
+ </script>
1734
+ </body>
1735
+ </html>