Hugging Face's logo

Spaces:
Matrix-Corp
/
Vexa
Running

App Files Community
Zandy-Wandy commited on
Commit
2f6956a
·
verified ·
1 Parent(s): 94b7123

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +1254 -19
index.html CHANGED
@@ -1,19 +1,1254 @@
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 Vexa — Crystalline Intelligence</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=DM+Sans:wght@300;400;500&family=Fira+Code:wght@300;400&display=swap" rel="stylesheet">
8
+ <style>
9
+ :root {
10
+ --bg: #fdf8f5;
11
+ --bg2: #faf3ee;
12
+ --pink: #f4a7c3;
13
+ --lavender: #c4b5f4;
14
+ --mint: #a8e6cf;
15
+ --peach: #ffcba4;
16
+ --sky: #a8d8ea;
17
+ --rose: #f9c6cf;
18
+ --gold: #f7d794;
19
+ --lilac: #dbb8f5;
20
+ --text: #5a4a5a;
21
+ --text-soft: #9a8a9a;
22
+ --white: #fff;
23
+ --panel: rgba(255,255,255,0.6);
24
+ --border: rgba(196,181,244,0.25);
25
+ }
26
+ *{box-sizing:border-box;margin:0;padding:0;}
27
+ html{scroll-behavior:smooth;}
28
+ body{
29
+ background:var(--bg);
30
+ font-family:'DM Sans',sans-serif;
31
+ color:var(--text);
32
+ overflow-x:hidden;
33
+ cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpolygon points='10,1 13,8 20,8 14,13 16,20 10,16 4,20 6,13 0,8 7,8' fill='%23f4a7c3' opacity='0.8'/%3E%3C/svg%3E") 10 10, auto;
34
+ }
35
+
36
+ /* ── Dreamy gradient bg ── */
37
+ body::before {
38
+ content:'';
39
+ position:fixed;inset:0;
40
+ background:
41
+ radial-gradient(ellipse 70% 50% at 15% 20%, rgba(244,167,195,0.18) 0%, transparent 60%),
42
+ radial-gradient(ellipse 60% 70% at 85% 80%, rgba(196,181,244,0.18) 0%, transparent 60%),
43
+ radial-gradient(ellipse 50% 40% at 50% 50%, rgba(168,230,207,0.10) 0%, transparent 55%),
44
+ radial-gradient(ellipse 40% 60% at 80% 15%, rgba(255,203,164,0.14) 0%, transparent 50%);
45
+ pointer-events:none;z-index:0;
46
+ animation:bgShift 12s ease-in-out infinite alternate;
47
+ }
48
+ @keyframes bgShift {
49
+ 0%{filter:hue-rotate(0deg);}
50
+ 100%{filter:hue-rotate(20deg);}
51
+ }
52
+
53
+ /* Rain canvas */
54
+ #rainCanvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:0.7;}
55
+
56
+ ::-webkit-scrollbar{width:6px;}
57
+ ::-webkit-scrollbar-track{background:var(--bg);}
58
+ ::-webkit-scrollbar-thumb{background:var(--lavender);border-radius:3px;}
59
+
60
+ .wrap{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 36px 120px;}
61
+
62
+ /* ── HERO ── */
63
+ .hero{
64
+ min-height:100vh;
65
+ display:flex;flex-direction:column;
66
+ justify-content:center;align-items:center;
67
+ text-align:center;
68
+ padding:100px 0 60px;
69
+ position:relative;
70
+ }
71
+
72
+ .hero-crystal{
73
+ width:200px;height:200px;
74
+ position:relative;margin-bottom:32px;
75
+ animation:crystalFloat 4s ease-in-out infinite;
76
+ }
77
+ @keyframes crystalFloat{
78
+ 0%,100%{transform:translateY(0) rotate(0deg);}
79
+ 50%{transform:translateY(-16px) rotate(8deg);}
80
+ }
81
+
82
+ .hero-badge{
83
+ display:inline-flex;align-items:center;gap:8px;
84
+ padding:8px 20px;
85
+ background:rgba(244,167,195,0.15);
86
+ border:1px solid rgba(244,167,195,0.4);
87
+ border-radius:100px;
88
+ font-family:'Fira Code',monospace;font-size:10px;
89
+ color:var(--pink);letter-spacing:3px;
90
+ margin-bottom:24px;
91
+ animation:badgePulse 3s ease-in-out infinite;
92
+ }
93
+ @keyframes badgePulse{
94
+ 0%,100%{box-shadow:0 0 0 0 rgba(244,167,195,0.3);}
95
+ 50%{box-shadow:0 0 0 12px rgba(244,167,195,0);}
96
+ }
97
+
98
+ .hero-title{
99
+ font-family:'Playfair Display',serif;
100
+ font-size:clamp(64px,12vw,140px);
101
+ font-weight:900;
102
+ line-height:0.9;
103
+ margin-bottom:16px;
104
+ background:linear-gradient(135deg,
105
+ var(--pink) 0%,
106
+ var(--lavender) 35%,
107
+ var(--sky) 65%,
108
+ var(--mint) 100%);
109
+ -webkit-background-clip:text;-webkit-text-fill-color:transparent;
110
+ background-clip:text;
111
+ filter:drop-shadow(0 4px 24px rgba(196,181,244,0.4));
112
+ animation:titleGlow 3s ease-in-out infinite alternate;
113
+ background-size:200% 200%;
114
+ }
115
+ @keyframes titleGlow{
116
+ 0%{filter:drop-shadow(0 4px 24px rgba(244,167,195,0.4));background-position:0% 50%;}
117
+ 100%{filter:drop-shadow(0 4px 40px rgba(196,181,244,0.6));background-position:100% 50%;}
118
+ }
119
+
120
+ .hero-sub{
121
+ font-family:'Playfair Display',serif;
122
+ font-size:clamp(14px,2vw,20px);
123
+ font-style:italic;
124
+ color:var(--text-soft);
125
+ margin-bottom:32px;
126
+ letter-spacing:1px;
127
+ }
128
+
129
+ .hero-desc{
130
+ font-size:15px;color:var(--text);line-height:1.9;
131
+ max-width:580px;margin:0 auto 48px;font-weight:300;
132
+ }
133
+ .hero-desc strong{color:var(--lavender);font-weight:500;}
134
+
135
+ .hero-pills{
136
+ display:flex;flex-wrap:wrap;gap:8px;
137
+ justify-content:center;margin-bottom:56px;
138
+ }
139
+ .pill{
140
+ padding:7px 18px;border-radius:100px;
141
+ font-size:11px;font-weight:500;letter-spacing:0.5px;
142
+ backdrop-filter:blur(8px);
143
+ transition:transform 0.2s,box-shadow 0.2s;
144
+ }
145
+ .pill:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.1);}
146
+ .p1{background:rgba(244,167,195,0.2);border:1px solid rgba(244,167,195,0.4);color:#c4617f;}
147
+ .p2{background:rgba(196,181,244,0.2);border:1px solid rgba(196,181,244,0.4);color:#7c5cbf;}
148
+ .p3{background:rgba(168,230,207,0.2);border:1px solid rgba(168,230,207,0.4);color:#4a9b75;}
149
+ .p4{background:rgba(255,203,164,0.2);border:1px solid rgba(255,203,164,0.4);color:#c47a3a;}
150
+ .p5{background:rgba(168,216,234,0.2);border:1px solid rgba(168,216,234,0.4);color:#3a7a9b;}
151
+
152
+ .scroll-down{
153
+ font-family:'Fira Code',monospace;font-size:10px;
154
+ color:var(--text-soft);letter-spacing:3px;
155
+ animation:scrollHint 2s ease-in-out infinite;
156
+ }
157
+ @keyframes scrollHint{0%,100%{opacity:0.4;transform:translateY(0);}50%{opacity:1;transform:translateY(6px);}}
158
+
159
+ /* ── SECTION SYSTEM ── */
160
+ .sec{margin-top:100px;opacity:0;transform:translateY(32px);transition:opacity 0.8s ease,transform 0.8s ease;}
161
+ .sec.vis{opacity:1;transform:translateY(0);}
162
+
163
+ .sec-label{
164
+ font-family:'Fira Code',monospace;font-size:10px;
165
+ color:var(--pink);letter-spacing:4px;
166
+ margin-bottom:8px;text-align:center;
167
+ }
168
+ .sec-title{
169
+ font-family:'Playfair Display',serif;
170
+ font-size:clamp(32px,5vw,56px);
171
+ font-weight:700;text-align:center;
172
+ color:var(--text);margin-bottom:12px;
173
+ }
174
+ .sec-title em{
175
+ font-style:italic;
176
+ background:linear-gradient(135deg,var(--pink),var(--lavender));
177
+ -webkit-background-clip:text;-webkit-text-fill-color:transparent;
178
+ background-clip:text;
179
+ }
180
+ .sec-sub{
181
+ font-size:14px;color:var(--text-soft);text-align:center;
182
+ max-width:560px;margin:0 auto 48px;line-height:1.8;
183
+ }
184
+ .sec-rule{
185
+ width:80px;height:2px;margin:16px auto 48px;
186
+ background:linear-gradient(90deg,var(--pink),var(--lavender),var(--mint));
187
+ border-radius:1px;
188
+ }
189
+
190
+ /* ── GLASS CARDS ── */
191
+ .glass{
192
+ background:rgba(255,255,255,0.55);
193
+ backdrop-filter:blur(16px);
194
+ border:1px solid rgba(255,255,255,0.7);
195
+ border-radius:20px;
196
+ box-shadow:0 8px 32px rgba(196,181,244,0.12), 0 2px 8px rgba(244,167,195,0.08);
197
+ transition:transform 0.3s,box-shadow 0.3s;
198
+ }
199
+ .glass:hover{
200
+ transform:translateY(-4px);
201
+ box-shadow:0 16px 48px rgba(196,181,244,0.2), 0 4px 16px rgba(244,167,195,0.12);
202
+ }
203
+
204
+ /* ── GLYPH ANATOMY ── */
205
+ .anatomy-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;}
206
+ .glyph-canvas-wrap{
207
+ border-radius:20px;overflow:hidden;
208
+ background:rgba(255,255,255,0.4);
209
+ border:1px solid rgba(255,255,255,0.7);
210
+ height:440px;position:relative;
211
+ }
212
+ .glyph-canvas-wrap canvas{width:100%;height:100%;}
213
+ .gc-label{
214
+ position:absolute;top:16px;left:16px;
215
+ font-family:'Fira Code',monospace;font-size:9px;
216
+ color:var(--lavender);letter-spacing:3px;
217
+ }
218
+
219
+ .fields-list{display:flex;flex-direction:column;gap:6px;}
220
+ .field-row{
221
+ display:grid;grid-template-columns:110px 100px 1fr;
222
+ align-items:center;gap:12px;
223
+ padding:12px 16px;
224
+ border-radius:12px;
225
+ background:rgba(255,255,255,0.6);
226
+ border:1px solid rgba(255,255,255,0.8);
227
+ transition:all 0.2s;
228
+ }
229
+ .field-row:hover{background:rgba(255,255,255,0.9);transform:translateX(4px);}
230
+ .fr-name{font-family:'Fira Code',monospace;font-size:10px;font-weight:400;}
231
+ .fr-type{font-family:'Fira Code',monospace;font-size:9px;color:var(--text-soft);}
232
+ .fr-desc{font-size:10px;color:var(--text);line-height:1.5;}
233
+ .fr-c1 .fr-name{color:#c4617f;}
234
+ .fr-c2 .fr-name{color:#7c5cbf;}
235
+ .fr-c3 .fr-name{color:#4a9b75;}
236
+ .fr-c4 .fr-name{color:#c47a3a;}
237
+ .fr-c5 .fr-name{color:#3a7a9b;}
238
+
239
+ /* ── EDGES ── */
240
+ .edges-wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
241
+ .edge-card{
242
+ padding:16px 14px;border-radius:16px;
243
+ background:rgba(255,255,255,0.6);
244
+ border:1px solid rgba(255,255,255,0.8);
245
+ text-align:center;
246
+ transition:all 0.2s;
247
+ }
248
+ .edge-card:hover{transform:translateY(-4px);background:rgba(255,255,255,0.9);}
249
+ .ec-gem{font-size:24px;margin-bottom:8px;}
250
+ .ec-name{font-family:'Fira Code',monospace;font-size:9px;letter-spacing:1px;margin-bottom:4px;}
251
+ .ec-ex{font-size:9px;color:var(--text-soft);font-style:italic;margin-bottom:4px;}
252
+ .ec-desc{font-size:9px;color:var(--text);line-height:1.5;}
253
+
254
+ /* ── CRYSTALLIZATION ── */
255
+ .cryst-grid{display:grid;grid-template-columns:1fr 320px;gap:32px;}
256
+ .phase-list{display:flex;flex-direction:column;gap:8px;}
257
+ .phase-card{
258
+ display:grid;grid-template-columns:64px 1fr;
259
+ border-radius:16px;overflow:hidden;
260
+ background:rgba(255,255,255,0.55);
261
+ border:1px solid rgba(255,255,255,0.8);
262
+ transition:all 0.2s;
263
+ }
264
+ .phase-card:hover{transform:translateX(4px);background:rgba(255,255,255,0.85);}
265
+ .phase-left{
266
+ display:flex;flex-direction:column;align-items:center;justify-content:center;
267
+ padding:16px 8px;
268
+ font-family:'Playfair Display',serif;
269
+ }
270
+ .pl-num{font-size:28px;font-weight:900;line-height:1;}
271
+ .pl-time{font-family:'Fira Code',monospace;font-size:7px;color:var(--text-soft);letter-spacing:1px;margin-top:2px;}
272
+ .phase-right{padding:16px 20px;}
273
+ .pr-name{font-size:13px;font-weight:600;color:var(--text);margin-bottom:4px;}
274
+ .pr-desc{font-size:10px;color:var(--text-soft);line-height:1.7;}
275
+
276
+ .ph1 .phase-left{background:rgba(244,167,195,0.12);} .ph1 .pl-num{color:var(--pink);}
277
+ .ph2 .phase-left{background:rgba(196,181,244,0.12);} .ph2 .pl-num{color:var(--lavender);}
278
+ .ph3 .phase-left{background:rgba(168,230,207,0.12);} .ph3 .pl-num{color:var(--mint);}
279
+ .ph4 .phase-left{background:rgba(255,203,164,0.12);} .ph4 .pl-num{color:var(--peach);}
280
+ .ph5 .phase-left{background:rgba(168,216,234,0.12);} .ph5 .pl-num{color:var(--sky);}
281
+
282
+ /* Crystal timer */
283
+ .crystal-timer{
284
+ border-radius:20px;
285
+ background:rgba(255,255,255,0.6);
286
+ border:1px solid rgba(255,255,255,0.8);
287
+ padding:28px 24px;
288
+ position:sticky;top:32px;
289
+ text-align:center;
290
+ }
291
+ .ct-gem{font-size:48px;margin-bottom:8px;animation:gemSpin 6s linear infinite;}
292
+ @keyframes gemSpin{0%{transform:rotateY(0);}100%{transform:rotateY(360deg);}}
293
+ .ct-title{
294
+ font-family:'Playfair Display',serif;font-size:13px;
295
+ color:var(--text-soft);margin-bottom:16px;letter-spacing:1px;
296
+ }
297
+ .ct-time{
298
+ font-family:'Playfair Display',serif;
299
+ font-size:56px;font-weight:900;
300
+ background:linear-gradient(135deg,var(--pink),var(--lavender));
301
+ -webkit-background-clip:text;-webkit-text-fill-color:transparent;
302
+ background-clip:text;
303
+ line-height:1;margin-bottom:4px;
304
+ }
305
+ .ct-unit{font-size:10px;color:var(--text-soft);letter-spacing:3px;margin-bottom:20px;font-family:'Fira Code',monospace;}
306
+ .ct-bars{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
307
+ .cb-row{text-align:left;}
308
+ .cb-labels{display:flex;justify-content:space-between;font-size:9px;margin-bottom:3px;}
309
+ .cb-k{color:var(--text-soft);}
310
+ .cb-v{font-family:'Fira Code',monospace;}
311
+ .cb-track{height:6px;background:rgba(196,181,244,0.15);border-radius:3px;overflow:hidden;}
312
+ .cb-fill{height:100%;border-radius:3px;transition:width 0.1s linear;}
313
+ .cf1{background:linear-gradient(90deg,var(--pink),var(--rose));}
314
+ .cf2{background:linear-gradient(90deg,var(--lavender),var(--lilac));}
315
+ .cf3{background:linear-gradient(90deg,var(--mint),var(--sky));}
316
+ .cf4{background:linear-gradient(90deg,var(--peach),var(--gold));}
317
+ .cf5{background:linear-gradient(90deg,var(--sky),var(--mint));}
318
+ .ct-btn{
319
+ width:100%;padding:12px;border-radius:12px;
320
+ background:linear-gradient(135deg,var(--pink),var(--lavender));
321
+ border:none;color:white;
322
+ font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;
323
+ cursor:pointer;letter-spacing:1px;
324
+ transition:all 0.2s;box-shadow:0 4px 16px rgba(196,181,244,0.3);
325
+ }
326
+ .ct-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(196,181,244,0.4);}
327
+ .ct-stats{margin-top:16px;display:flex;flex-direction:column;gap:4px;}
328
+ .cs-row{display:flex;justify-content:space-between;font-size:10px;padding:5px 0;border-bottom:1px solid rgba(196,181,244,0.1);}
329
+ .cs-k{color:var(--text-soft);}
330
+ .cs-v{font-family:'Fira Code',monospace;color:var(--lavender);}
331
+
332
+ /* ── LATTICE ── */
333
+ .lattice-wrap{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
334
+ .lattice-canvas-box{
335
+ border-radius:20px;height:480px;overflow:hidden;
336
+ background:rgba(255,255,255,0.4);
337
+ border:1px solid rgba(255,255,255,0.7);
338
+ position:relative;
339
+ }
340
+ .lattice-canvas-box canvas{width:100%;height:100%;}
341
+ .lc-tag{
342
+ position:absolute;top:16px;left:16px;
343
+ font-family:'Fira Code',monospace;font-size:9px;
344
+ color:var(--lavender);letter-spacing:3px;
345
+ }
346
+ .lc-legend{
347
+ position:absolute;bottom:16px;left:16px;
348
+ display:flex;flex-direction:column;gap:6px;
349
+ }
350
+ .ll{display:flex;align-items:center;gap:6px;font-size:9px;color:var(--text-soft);}
351
+ .ll-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
352
+
353
+ .density-cards{display:flex;flex-direction:column;gap:8px;}
354
+ .dc{
355
+ display:grid;grid-template-columns:80px 1fr 70px 80px;
356
+ align-items:center;gap:12px;
357
+ padding:14px 16px;border-radius:14px;
358
+ background:rgba(255,255,255,0.55);
359
+ border:1px solid rgba(255,255,255,0.8);
360
+ transition:all 0.2s;
361
+ }
362
+ .dc:hover{background:rgba(255,255,255,0.9);transform:translateX(4px);}
363
+ .dc.header{
364
+ background:rgba(196,181,244,0.08);
365
+ border-color:rgba(196,181,244,0.2);
366
+ font-family:'Fira Code',monospace;font-size:9px;
367
+ color:var(--lavender);letter-spacing:2px;
368
+ }
369
+ .dc-tier{font-weight:600;color:var(--text);}
370
+ .dc-glyphs{font-family:'Fira Code',monospace;font-size:11px;color:var(--lavender);}
371
+ .dc-ram{font-family:'Fira Code',monospace;font-size:11px;color:var(--mint);}
372
+ .dc-use{font-size:10px;color:var(--text-soft);}
373
+ .dc.max .dc-tier{color:var(--pink);}
374
+ .dc.max .dc-glyphs{color:var(--pink);}
375
+
376
+ /* ── LUME ── */
377
+ .lume-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
378
+ .lume-box{
379
+ border-radius:20px;overflow:hidden;
380
+ background:rgba(255,255,255,0.5);
381
+ border:1px solid rgba(255,255,255,0.8);
382
+ }
383
+ .lume-tabbar{
384
+ display:flex;background:rgba(255,255,255,0.6);
385
+ border-bottom:1px solid rgba(196,181,244,0.15);
386
+ }
387
+ .ltab{
388
+ padding:10px 18px;font-family:'Fira Code',monospace;
389
+ font-size:9px;letter-spacing:2px;color:var(--text-soft);
390
+ cursor:pointer;border-bottom:2px solid transparent;
391
+ transition:all 0.15s;
392
+ }
393
+ .ltab:hover{color:var(--text);}
394
+ .ltab.on{color:var(--lavender);border-bottom-color:var(--lavender);}
395
+ .lume-code{
396
+ padding:24px;font-family:'Fira Code',monospace;
397
+ font-size:11px;line-height:2;min-height:380px;
398
+ overflow-x:auto;
399
+ }
400
+ .lc-b{display:none;} .lc-b.on{display:block;}
401
+ .lkw{color:#c4617f;} .lid{color:#7c5cbf;} .lstr{color:#4a9b75;}
402
+ .lnum{color:#c47a3a;} .lcm{color:#c0b4c0;font-style:italic;} .lprop{color:#3a7a9b;}
403
+
404
+ .lume-explain{display:flex;flex-direction:column;gap:8px;}
405
+ .le{
406
+ padding:16px 18px;border-radius:14px;
407
+ background:rgba(255,255,255,0.55);
408
+ border:1px solid rgba(255,255,255,0.8);
409
+ border-left:3px solid;
410
+ transition:all 0.2s;
411
+ }
412
+ .le:hover{transform:translateX(4px);background:rgba(255,255,255,0.9);}
413
+ .le-n{font-family:'Fira Code',monospace;font-size:10px;margin-bottom:4px;}
414
+ .le-d{font-size:10px;color:var(--text-soft);line-height:1.7;}
415
+ .le.e1{border-left-color:var(--pink);} .le.e1 .le-n{color:#c4617f;}
416
+ .le.e2{border-left-color:var(--lavender);} .le.e2 .le-n{color:#7c5cbf;}
417
+ .le.e3{border-left-color:var(--mint);} .le.e3 .le-n{color:#4a9b75;}
418
+ .le.e4{border-left-color:var(--peach);} .le.e4 .le-n{color:#c47a3a;}
419
+ .le.e5{border-left-color:var(--sky);} .le.e5 .le-n{color:#3a7a9b;}
420
+ .le.e6{border-left-color:var(--lilac);} .le.e6 .le-n{color:#9c5cbf;}
421
+ .le.e7{border-left-color:var(--gold);} .le.e7 .le-n{color:#b47a2a;}
422
+
423
+ /* ── THREADS ── */
424
+ .threads-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
425
+ .thread-card{
426
+ padding:28px 24px;border-radius:20px;
427
+ background:rgba(255,255,255,0.55);
428
+ border:1px solid rgba(255,255,255,0.8);
429
+ position:relative;overflow:hidden;
430
+ transition:all 0.3s;
431
+ }
432
+ .thread-card:hover{transform:translateY(-6px);background:rgba(255,255,255,0.85);}
433
+ .thread-card::before{
434
+ content:'';position:absolute;top:0;left:0;right:0;height:4px;
435
+ }
436
+ .tc1::before{background:linear-gradient(90deg,var(--pink),var(--rose));}
437
+ .tc2::before{background:linear-gradient(90deg,var(--lavender),var(--lilac));}
438
+ .tc3::before{background:linear-gradient(90deg,var(--gold),var(--peach));}
439
+ .tc-pulse{
440
+ position:absolute;top:20px;right:20px;
441
+ width:10px;height:10px;border-radius:50%;
442
+ }
443
+ .tcp1{background:var(--pink);animation:tcPulse 1.5s ease-in-out infinite;}
444
+ .tcp2{background:var(--lavender);animation:tcPulse 1.5s ease-in-out infinite 0.5s;}
445
+ .tcp3{background:var(--gold);animation:tcPulse 1.5s ease-in-out infinite 1s;}
446
+ @keyframes tcPulse{
447
+ 0%,100%{transform:scale(1);opacity:1;box-shadow:0 0 0 0 currentColor;}
448
+ 50%{transform:scale(1.4);opacity:0.6;box-shadow:0 0 0 6px transparent;}
449
+ }
450
+ .tc-icon{font-size:32px;margin-bottom:12px;}
451
+ .tc-name{font-family:'Playfair Display',serif;font-size:18px;font-weight:700;color:var(--text);margin-bottom:8px;}
452
+ .tc-desc{font-size:11px;color:var(--text-soft);line-height:1.8;margin-bottom:16px;}
453
+ .tc-stats{display:flex;flex-direction:column;gap:4px;}
454
+ .ts{display:flex;justify-content:space-between;font-size:10px;padding:5px 0;border-bottom:1px solid rgba(196,181,244,0.1);}
455
+ .ts-k{color:var(--text-soft);}
456
+ .ts-v{font-family:'Fira Code',monospace;}
457
+ .tc1 .ts-v{color:#c4617f;} .tc2 .ts-v{color:#7c5cbf;} .tc3 .ts-v{color:#b47a2a;}
458
+
459
+ /* ── COMPARE ── */
460
+ .compare-table{width:100%;border-collapse:collapse;border-radius:16px;overflow:hidden;}
461
+ .compare-table th{
462
+ font-size:10px;letter-spacing:2px;padding:14px 16px;
463
+ text-align:left;background:rgba(196,181,244,0.12);
464
+ color:var(--lavender);font-weight:500;font-family:'Fira Code',monospace;
465
+ border-bottom:1px solid rgba(196,181,244,0.2);
466
+ }
467
+ .compare-table td{
468
+ padding:12px 16px;border-bottom:1px solid rgba(196,181,244,0.08);
469
+ font-size:11px;
470
+ background:rgba(255,255,255,0.5);
471
+ }
472
+ .compare-table tr:hover td{background:rgba(255,255,255,0.85);}
473
+ .td-prop{color:var(--text);font-weight:500;}
474
+ .td-llm{color:#c47a7a;}
475
+ .td-vexa{color:#4a9b75;}
476
+
477
+ /* ── BRIDGE ── */
478
+ .bridge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px;}
479
+ .bridge-card{
480
+ padding:18px 16px;border-radius:14px;
481
+ background:rgba(255,255,255,0.55);
482
+ border:1px solid rgba(255,255,255,0.8);
483
+ transition:all 0.2s;
484
+ }
485
+ .bridge-card:hover{transform:translateY(-3px);background:rgba(255,255,255,0.9);}
486
+ .bc-name{font-weight:600;color:var(--text);margin-bottom:4px;font-size:13px;}
487
+ .bc-method{font-family:'Fira Code',monospace;font-size:9px;color:var(--text-soft);margin-bottom:10px;}
488
+ .bc-badge{
489
+ display:inline-block;padding:3px 10px;border-radius:100px;
490
+ font-size:8px;letter-spacing:1px;
491
+ background:rgba(168,230,207,0.2);border:1px solid rgba(168,230,207,0.4);color:#4a9b75;
492
+ }
493
+
494
+ .bridge-flow{
495
+ border-radius:16px;padding:24px;
496
+ background:rgba(255,255,255,0.5);
497
+ border:1px solid rgba(255,255,255,0.8);
498
+ }
499
+ .bf-row{
500
+ display:flex;align-items:flex-start;gap:14px;
501
+ padding:10px 0;border-bottom:1px solid rgba(196,181,244,0.08);
502
+ font-size:11px;
503
+ }
504
+ .bf-n{
505
+ width:24px;height:24px;border-radius:50%;flex-shrink:0;
506
+ display:flex;align-items:center;justify-content:center;
507
+ font-family:'Fira Code',monospace;font-size:9px;font-weight:500;color:white;
508
+ }
509
+ .bf-1 .bf-n{background:var(--pink);}
510
+ .bf-2 .bf-n{background:var(--lavender);}
511
+ .bf-3 .bf-n{background:var(--mint);}
512
+ .bf-4 .bf-n{background:var(--peach);}
513
+ .bf-5 .bf-n{background:var(--sky);}
514
+ .bf-6 .bf-n{background:var(--lilac);}
515
+ .bf-t{color:var(--text);line-height:1.6;}
516
+ .bf-t strong{color:var(--lavender);}
517
+ .bf-arr{text-align:center;color:var(--lavender);opacity:0.4;padding:4px 0;font-size:14px;}
518
+
519
+ /* ── HF PLAN ── */
520
+ .hf-list{display:flex;flex-direction:column;gap:8px;}
521
+ .hf-card{
522
+ display:grid;grid-template-columns:1fr auto;
523
+ align-items:center;gap:16px;
524
+ padding:16px 20px;border-radius:14px;
525
+ background:rgba(255,255,255,0.55);
526
+ border:1px solid rgba(255,255,255,0.8);
527
+ transition:all 0.2s;
528
+ }
529
+ .hf-card:hover{transform:translateX(4px);background:rgba(255,255,255,0.9);}
530
+ .hf-name{font-family:'Fira Code',monospace;font-size:11px;color:var(--lavender);margin-bottom:4px;}
531
+ .hf-desc{font-size:10px;color:var(--text-soft);}
532
+ .hf-badge{
533
+ padding:4px 12px;border-radius:100px;
534
+ font-size:8px;letter-spacing:1px;white-space:nowrap;
535
+ background:rgba(168,230,207,0.2);border:1px solid rgba(168,230,207,0.4);color:#4a9b75;
536
+ }
537
+
538
+ /* ── FOOTER ── */
539
+ .footer{
540
+ margin-top:100px;padding:32px 0;
541
+ border-top:1px solid rgba(196,181,244,0.2);
542
+ display:flex;justify-content:space-between;align-items:center;
543
+ flex-wrap:wrap;gap:16px;
544
+ }
545
+ .footer-l{font-size:10px;color:var(--text-soft);line-height:2;font-family:'Fira Code',monospace;letter-spacing:2px;}
546
+ .footer-r{
547
+ font-family:'Playfair Display',serif;font-size:22px;font-style:italic;
548
+ background:linear-gradient(135deg,var(--pink),var(--lavender));
549
+ -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
550
+ }
551
+
552
+ @media(max-width:900px){
553
+ .anatomy-grid,.lume-grid,.lattice-wrap,.cryst-grid{grid-template-columns:1fr;}
554
+ .edges-wrap{grid-template-columns:repeat(2,1fr);}
555
+ .threads-grid{grid-template-columns:1fr;}
556
+ .bridge-grid{grid-template-columns:1fr 1fr;}
557
+ }
558
+ </style>
559
+ </head>
560
+ <body>
561
+ <canvas id="rainCanvas"></canvas>
562
+ <div class="wrap">
563
+
564
+ <!-- ══ HERO ══ -->
565
+ <div class="hero">
566
+ <div class="hero-badge">✦ NOT AN AI — A NEW PARADIGM ✦</div>
567
+
568
+ <div class="hero-crystal">
569
+ <svg viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
570
+ <defs>
571
+ <linearGradient id="cg1" x1="0%" y1="0%" x2="100%" y2="100%">
572
+ <stop offset="0%" stop-color="#f4a7c3"/>
573
+ <stop offset="50%" stop-color="#c4b5f4"/>
574
+ <stop offset="100%" stop-color="#a8e6cf"/>
575
+ </linearGradient>
576
+ <linearGradient id="cg2" x1="100%" y1="0%" x2="0%" y2="100%">
577
+ <stop offset="0%" stop-color="#ffcba4" stop-opacity="0.6"/>
578
+ <stop offset="100%" stop-color="#a8d8ea" stop-opacity="0.6"/>
579
+ </linearGradient>
580
+ <filter id="glow"><feGaussianBlur stdDeviation="3" result="blur"/><feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
581
+ </defs>
582
+ <!-- Main crystal body -->
583
+ <polygon points="100,10 160,60 170,130 100,190 30,130 40,60" fill="url(#cg1)" opacity="0.7" filter="url(#glow)"/>
584
+ <polygon points="100,10 160,60 170,130 100,190 30,130 40,60" fill="none" stroke="white" stroke-width="1.5" opacity="0.8"/>
585
+ <!-- Inner facets -->
586
+ <polygon points="100,10 160,60 100,80" fill="white" opacity="0.2"/>
587
+ <polygon points="100,10 40,60 100,80" fill="url(#cg2)" opacity="0.3"/>
588
+ <polygon points="100,80 160,60 170,130 100,190" fill="url(#cg1)" opacity="0.4"/>
589
+ <polygon points="100,80 40,60 30,130 100,190" fill="white" opacity="0.15"/>
590
+ <!-- Center line -->
591
+ <line x1="100" y1="10" x2="100" y2="190" stroke="white" stroke-width="0.5" opacity="0.5"/>
592
+ <!-- Sparkles -->
593
+ <circle cx="100" cy="80" r="4" fill="white" opacity="0.9" filter="url(#glow)"/>
594
+ <circle cx="155" cy="65" r="2" fill="#f4a7c3" opacity="0.8"/>
595
+ <circle cx="45" cy="65" r="2" fill="#c4b5f4" opacity="0.8"/>
596
+ <circle cx="100" cy="185" r="2" fill="#a8e6cf" opacity="0.8"/>
597
+ <!-- Outer glow ring -->
598
+ <circle cx="100" cy="100" r="90" fill="none" stroke="url(#cg1)" stroke-width="0.5" opacity="0.4" stroke-dasharray="4 8"/>
599
+ </svg>
600
+ </div>
601
+
602
+ <h1 class="hero-title">Vexa</h1>
603
+ <div class="hero-sub">Crystalline Intelligence Substrate</div>
604
+ <p class="hero-desc">
605
+ A living, self-updating lattice of <strong>Glyphs</strong> that understands because its structure <em>is</em> understanding. Not weights. Not tokens. Crystallizes knowledge in <strong>10 minutes on any laptop</strong> — and keeps learning forever.
606
+ </p>
607
+ <div class="hero-pills">
608
+ <span class="pill p1">✦ Glyph Lattice</span>
609
+ <span class="pill p2">◈ Crystallization Engine</span>
610
+ <span class="pill p3">⬡ Lume Language</span>
611
+ <span class="pill p4">⟳ Real-Time Learning</span>
612
+ <span class="pill p5">⬡ Ollama Compatible</span>
613
+ <span class="pill p1">✦ Fully Open Source</span>
614
+ <span class="pill p2">◈ No GPU Required</span>
615
+ <span class="pill p3">⬡ Any Laptop</span>
616
+ </div>
617
+ <div class="scroll-down">scroll to explore ↓</div>
618
+ </div>
619
+
620
+ <!-- ══ SECTION 1 — GLYPH ══ -->
621
+ <div class="sec" id="s1">
622
+ <div class="sec-label">// 01</div>
623
+ <div class="sec-title">The <em>Glyph</em></div>
624
+ <div class="sec-rule"></div>
625
+ <div class="sec-sub">Not a weight. Not a vector. Not a symbol. A structured meaning object with identity, relations, confidence, and a soul.</div>
626
+
627
+ <div class="anatomy-grid">
628
+ <div>
629
+ <div class="glyph-canvas-wrap">
630
+ <div class="gc-label">LIVE GLYPH NETWORK</div>
631
+ <canvas id="glyphCanvas"></canvas>
632
+ </div>
633
+ </div>
634
+ <div class="fields-list">
635
+ <div class="field-row fr-c1"><span class="fr-name">id</span><span class="fr-type">UUID</span><span class="fr-desc">Permanent identity — always traceable</span></div>
636
+ <div class="field-row fr-c2"><span class="fr-name">concept</span><span class="fr-type">Vector[512]</span><span class="fr-desc">Dense semantic meaning — what this Glyph represents</span></div>
637
+ <div class="field-row fr-c3"><span class="fr-name">relations</span><span class="fr-type">Map&lt;ID,Edge&gt;</span><span class="fr-desc">Typed connections — how it links to the world</span></div>
638
+ <div class="field-row fr-c1"><span class="fr-name">tension</span><span class="fr-type">float</span><span class="fr-desc">How strongly it pulls toward certain outputs</span></div>
639
+ <div class="field-row fr-c2"><span class="fr-name">resonance</span><span class="fr-type">float</span><span class="fr-desc">Activation strength — how it lights up neighbors</span></div>
640
+ <div class="field-row fr-c4"><span class="fr-name">confidence</span><span class="fr-type">float[0,1]</span><span class="fr-desc">Structurally real certainty — not simulated</span></div>
641
+ <div class="field-row fr-c5"><span class="fr-name">decay</span><span class="fr-type">DecayFn</span><span class="fr-desc">How fast it fades — fast for news, never for physics</span></div>
642
+ <div class="field-row fr-c3"><span class="fr-name">source</span><span class="fr-type">SourceRef[]</span><span class="fr-desc">Every claim sourced. Always. No exceptions.</span></div>
643
+ <div class="field-row fr-c1"><span class="fr-name">valence</span><span class="fr-type">float[-1,1]</span><span class="fr-desc">Semantic charge — positive or negative meaning</span></div>
644
+ <div class="field-row fr-c2"><span class="fr-name">mutable</span><span class="fr-type">bool</span><span class="fr-desc">Can real-time learning update this Glyph?</span></div>
645
+ </div>
646
+ </div>
647
+
648
+ <div style="margin-top:32px;">
649
+ <div style="font-family:'Fira Code',monospace;font-size:9px;color:var(--lavender);letter-spacing:3px;text-align:center;margin-bottom:20px;">10 EDGE TYPES — THE RELATION PRIMITIVES</div>
650
+ <div class="edges-wrap">
651
+ <div class="edge-card"><div class="ec-gem">💎</div><div class="ec-name" style="color:#c4617f;">IS_A</div><div class="ec-ex">dog → animal</div><div class="ec-desc">Taxonomic hierarchy</div></div>
652
+ <div class="edge-card"><div class="ec-gem">✨</div><div class="ec-name" style="color:#7c5cbf;">HAS_PROPERTY</div><div class="ec-ex">ice → cold</div><div class="ec-desc">Attribute assignment</div></div>
653
+ <div class="edge-card"><div class="ec-gem">⚡</div><div class="ec-name" style="color:#4a9b75;">CAUSES</div><div class="ec-ex">rain → wet</div><div class="ec-desc">Causal chain</div></div>
654
+ <div class="edge-card"><div class="ec-gem">🌸</div><div class="ec-name" style="color:#c47a3a;">CONTRADICTS</div><div class="ec-ex">hot ↔ cold</div><div class="ec-desc">Triggers the Arbiter</div></div>
655
+ <div class="edge-card"><div class="ec-gem">🔮</div><div class="ec-name" style="color:#3a7a9b;">REQUIRES</div><div class="ec-ex">fire → oxygen</div><div class="ec-desc">Dependency</div></div>
656
+ <div class="edge-card"><div class="ec-gem">🌙</div><div class="ec-name" style="color:#9c5cbf;">PRECEDES</div><div class="ec-ex">cause → effect</div><div class="ec-desc">Temporal ordering</div></div>
657
+ <div class="edge-card"><div class="ec-gem">🦋</div><div class="ec-name" style="color:#b47a2a;">ANALOGOUS_TO</div><div class="ec-ex">brain → CPU</div><div class="ec-desc">Cross-domain bridge</div></div>
658
+ <div class="edge-card"><div class="ec-gem">🌺</div><div class="ec-name" style="color:#c4617f;">PART_OF</div><div class="ec-ex">wheel → car</div><div class="ec-desc">Composition</div></div>
659
+ <div class="edge-card"><div class="ec-gem">🌟</div><div class="ec-name" style="color:#7c5cbf;">GENERATES</div><div class="ec-ex">plant → O₂</div><div class="ec-desc">Production</div></div>
660
+ <div class="edge-card"><div class="ec-gem">💫</div><div class="ec-name" style="color:#4a9b75;">RESOLVES</div><div class="ec-ex">key → lock</div><div class="ec-desc">Solution mapping</div></div>
661
+ </div>
662
+ </div>
663
+ </div>
664
+
665
+ <!-- ══ SECTION 2 — CRYSTALLIZATION ══ -->
666
+ <div class="sec" id="s2">
667
+ <div class="sec-label">// 02</div>
668
+ <div class="sec-title"><em>Crystallization</em> Replaces Training</div>
669
+ <div class="sec-rule"></div>
670
+ <div class="sec-sub">No gradient descent. No GPU cluster. No weeks. 5 phases, 10 minutes, any laptop. Knowledge folds into the Glyph Lattice directly.</div>
671
+
672
+ <div class="cryst-grid">
673
+ <div class="phase-list">
674
+ <div class="phase-card ph1">
675
+ <div class="phase-left"><div class="pl-num">01</div><div class="pl-time">0–2 MIN</div></div>
676
+ <div class="phase-right">
677
+ <div class="pr-name">Ingestion</div>
678
+ <div class="pr-desc">Raw knowledge consumed — web pages, PDFs, code, JSON, RSS. Parsed into Concept Fragments across all CPU cores in parallel.</div>
679
+ </div>
680
+ </div>
681
+ <div class="phase-card ph2">
682
+ <div class="phase-left"><div class="pl-num">02</div><div class="pl-time">2–4 MIN</div></div>
683
+ <div class="phase-right">
684
+ <div class="pr-name">Concept Extraction</div>
685
+ <div class="pr-desc">NLP pipeline extracts typed relation triples. Named entities, causal phrases, temporal expressions, dependency parsing.</div>
686
+ </div>
687
+ </div>
688
+ <div class="phase-card ph3">
689
+ <div class="phase-left"><div class="pl-num">03</div><div class="pl-time">4–6 MIN</div></div>
690
+ <div class="phase-right">
691
+ <div class="pr-name">Glyph Formation</div>
692
+ <div class="pr-desc">Each concept becomes a Glyph via a tiny frozen encoder. Duplicates merged. Confidence scored. Sources attached permanently.</div>
693
+ </div>
694
+ </div>
695
+ <div class="phase-card ph4">
696
+ <div class="phase-left"><div class="pl-num">04</div><div class="pl-time">6–8 MIN</div></div>
697
+ <div class="phase-right">
698
+ <div class="pr-name">Lattice Integration</div>
699
+ <div class="pr-desc">New Glyphs woven into the graph. Edges inferred. Conflicts detected — the Arbiter fires and resolves by evidence and recency.</div>
700
+ </div>
701
+ </div>
702
+ <div class="phase-card ph5">
703
+ <div class="phase-left"><div class="pl-num">05</div><div class="pl-time">8–10 MIN</div></div>
704
+ <div class="phase-right">
705
+ <div class="pr-name">Resonance Calibration</div>
706
+ <div class="pr-desc">Tension and resonance tuned across all new Glyphs. Cluster coherence checked. Lattice integrity verified. Complete. ✦</div>
707
+ </div>
708
+ </div>
709
+ </div>
710
+
711
+ <div class="crystal-timer">
712
+ <div class="ct-gem">💎</div>
713
+ <div class="ct-title">Crystallization Timer</div>
714
+ <div class="ct-time" id="timerDisp">10:00</div>
715
+ <div class="ct-unit">MINUTES · ANY LAPTOP</div>
716
+ <div class="ct-bars">
717
+ <div class="cb-row"><div class="cb-labels"><span class="cb-k">Ingestion</span><span class="cb-v" id="p1v" style="color:#c4617f;">0%</span></div><div class="cb-track"><div class="cb-fill cf1" id="b1" style="width:0%"></div></div></div>
718
+ <div class="cb-row"><div class="cb-labels"><span class="cb-k">Extraction</span><span class="cb-v" id="p2v" style="color:#7c5cbf;">0%</span></div><div class="cb-track"><div class="cb-fill cf2" id="b2" style="width:0%"></div></div></div>
719
+ <div class="cb-row"><div class="cb-labels"><span class="cb-k">Glyph Formation</span><span class="cb-v" id="p3v" style="color:#4a9b75;">0%</span></div><div class="cb-track"><div class="cb-fill cf3" id="b3" style="width:0%"></div></div></div>
720
+ <div class="cb-row"><div class="cb-labels"><span class="cb-k">Integration</span><span class="cb-v" id="p4v" style="color:#c47a3a;">0%</span></div><div class="cb-track"><div class="cb-fill cf4" id="b4" style="width:0%"></div></div></div>
721
+ <div class="cb-row"><div class="cb-labels"><span class="cb-k">Calibration</span><span class="cb-v" id="p5v" style="color:#3a7a9b;">0%</span></div><div class="cb-track"><div class="cb-fill cf5" id="b5" style="width:0%"></div></div></div>
722
+ </div>
723
+ <button class="ct-btn" id="cBtn" onclick="runCryst()">✦ Start Crystallization</button>
724
+ <div class="ct-stats">
725
+ <div class="cs-row"><span class="cs-k">GPU Required</span><span class="cs-v">None — CPU only</span></div>
726
+ <div class="cs-row"><span class="cs-k">Glyphs Formed</span><span class="cs-v" id="gStat">—</span></div>
727
+ <div class="cs-row"><span class="cs-k">Edges Created</span><span class="cs-v" id="eStat">—</span></div>
728
+ <div class="cs-row"><span class="cs-k">Conflicts</span><span class="cs-v" id="cStat">—</span></div>
729
+ </div>
730
+ </div>
731
+ </div>
732
+ </div>
733
+
734
+ <!-- ══ SECTION 3 — LATTICE ══ -->
735
+ <div class="sec" id="s3">
736
+ <div class="sec-label">// 03</div>
737
+ <div class="sec-title">The Glyph <em>Lattice</em></div>
738
+ <div class="sec-rule"></div>
739
+ <div class="sec-sub">The model itself. A living knowledge graph that scales by Glyph density — same architecture, same code, anywhere from 2GB RAM to 40GB.</div>
740
+ <div class="lattice-wrap">
741
+ <div>
742
+ <div class="lattice-canvas-box">
743
+ <div class="lc-tag">LIVE LATTICE</div>
744
+ <canvas id="latticeCanvas"></canvas>
745
+ <div class="lc-legend">
746
+ <div class="ll"><div class="ll-dot" style="background:var(--pink)"></div>Core concept</div>
747
+ <div class="ll"><div class="ll-dot" style="background:var(--lavender)"></div>Relation node</div>
748
+ <div class="ll"><div class="ll-dot" style="background:var(--mint)"></div>Freshly crystallized</div>
749
+ <div class="ll"><div class="ll-dot" style="background:var(--peach)"></div>Conflict flagged</div>
750
+ <div class="ll"><div class="ll-dot" style="background:rgba(150,140,160,0.4)"></div>Decaying</div>
751
+ </div>
752
+ </div>
753
+ </div>
754
+ <div>
755
+ <p style="font-size:13px;line-height:1.9;color:var(--text);margin-bottom:24px;font-weight:300;">Vexa scales not by model size but by <strong style="color:var(--lavender)">Glyph density</strong>. One architecture. One codebase. Dial up density for more knowledge.</p>
756
+ <div class="density-cards">
757
+ <div class="dc header"><span>TIER</span><span>GLYPHS</span><span>RAM</span><span>EQUIV.</span></div>
758
+ <div class="dc"><span class="dc-tier">Nano</span><span class="dc-glyphs">~1M</span><span class="dc-ram">2GB</span><span class="dc-use">IoT / edge</span></div>
759
+ <div class="dc"><span class="dc-tier">Micro</span><span class="dc-glyphs">~10M</span><span class="dc-ram">4GB</span><span class="dc-use">Any laptop</span></div>
760
+ <div class="dc"><span class="dc-tier">Core</span><span class="dc-glyphs">~100M</span><span class="dc-ram">8GB</span><span class="dc-use">Consumer GPU</span></div>
761
+ <div class="dc"><span class="dc-tier">Dense</span><span class="dc-glyphs">~1B</span><span class="dc-ram">16GB</span><span class="dc-use">Workstation</span></div>
762
+ <div class="dc max"><span class="dc-tier">Max ✦</span><span class="dc-glyphs">~10B</span><span class="dc-ram">40GB</span><span class="dc-use">A100 / p300a</span></div>
763
+ </div>
764
+ <div style="margin-top:12px;padding:14px;border-radius:12px;background:rgba(196,181,244,0.08);border:1px solid rgba(196,181,244,0.2);font-size:10px;color:var(--text-soft);line-height:1.7;">
765
+ ✦ Same crystallization process at every tier. Same Lume code. Same architecture. Just more Glyphs.
766
+ </div>
767
+ </div>
768
+ </div>
769
+ </div>
770
+
771
+ <!-- ══ SECTION 4 — LUME ══ -->
772
+ <div class="sec" id="s4">
773
+ <div class="sec-label">// 04</div>
774
+ <div class="sec-title">The <em>Lume</em> Language</div>
775
+ <div class="sec-rule"></div>
776
+ <div class="sec-sub">Not Python. Not SQL. A declarative-relational language where meaning is a first-class citizen. You describe intent — Lume resolves it through the Glyph Lattice.</div>
777
+ <div class="lume-grid">
778
+ <div class="lume-box">
779
+ <div class="lume-tabbar">
780
+ <div class="ltab on" onclick="showLume('glyph',this)">glyph</div>
781
+ <div class="ltab" onclick="showLume('ask',this)">ask</div>
782
+ <div class="ltab" onclick="showLume('agent',this)">agent</div>
783
+ <div class="ltab" onclick="showLume('flow',this)">flow</div>
784
+ <div class="ltab" onclick="showLume('watch',this)">watch</div>
785
+ </div>
786
+ <div class="lume-code">
787
+ <div class="lc-b on" id="lc-glyph">
788
+ <span class="lcm">// Define a concept directly in the lattice</span><br>
789
+ <span class="lkw">glyph</span> <span class="lid">QuantumEntanglement</span> {<br>
790
+ &nbsp;&nbsp;<span class="lprop">IS_A</span>: <span class="lid">QuantumPhenomenon</span><br>
791
+ &nbsp;&nbsp;<span class="lprop">HAS_PROPERTY</span>: <span class="lstr">"non-local correlation"</span><br>
792
+ &nbsp;&nbsp;<span class="lprop">HAS_PROPERTY</span>: <span class="lstr">"instantaneous state sharing"</span><br>
793
+ &nbsp;&nbsp;<span class="lprop">REQUIRES</span>: <span class="lid">QuantumSuperposition</span><br>
794
+ &nbsp;&nbsp;<span class="lprop">CONTRADICTS</span>: <span class="lid">LocalRealism</span><br>
795
+ &nbsp;&nbsp;<span class="lprop">confidence</span>: <span class="lnum">0.98</span><br>
796
+ &nbsp;&nbsp;<span class="lprop">decay</span>: <span class="lkw">none</span> <span class="lcm">// physics never changes</span><br>
797
+ }
798
+ </div>
799
+ <div class="lc-b" id="lc-ask">
800
+ <span class="lcm">// Traverse the Glyph Lattice to answer</span><br>
801
+ <span class="lkw">ask</span> <span class="lstr">"What causes inflation?"</span> {<br>
802
+ &nbsp;&nbsp;<span class="lprop">depth</span>: <span class="lnum">4</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="lcm">// glyph hops</span><br>
803
+ &nbsp;&nbsp;<span class="lprop">confidence</span>: <span class="lnum">0.7</span>&nbsp;&nbsp;&nbsp;<span class="lcm">// min threshold</span><br>
804
+ &nbsp;&nbsp;<span class="lprop">sources</span>: <span class="lkw">true</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="lcm">// show refs</span><br>
805
+ &nbsp;&nbsp;<span class="lprop">recency</span>: <span class="lstr">"6h"</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="lcm">// prefer fresh</span><br>
806
+ }<br><br>
807
+ <span class="lcm">// Inspect any Glyph</span><br>
808
+ <span class="lkw">inspect</span> <span class="lkw">glyph</span> <span class="lstr">"machine learning"</span> {<br>
809
+ &nbsp;&nbsp;<span class="lprop">show</span>: <span class="lid">relations</span><br>
810
+ &nbsp;&nbsp;<span class="lprop">show</span>: <span class="lid">confidence</span><br>
811
+ &nbsp;&nbsp;<span class="lprop">show</span>: <span class="lid">sources</span><br>
812
+ }
813
+ </div>
814
+ <div class="lc-b" id="lc-agent">
815
+ <span class="lcm">// Agentic task — lattice IS the memory</span><br>
816
+ <span class="lkw">agent</span> <span class="lid">ResearchAssistant</span> {<br>
817
+ &nbsp;&nbsp;<span class="lprop">goal</span>: <span class="lstr">"Summarize fusion breakthroughs"</span><br>
818
+ &nbsp;&nbsp;<span class="lprop">tools</span>: [<span class="lid">web_search</span>, <span class="lid">glyph_writer</span>]<br>
819
+ &nbsp;&nbsp;<span class="lprop">crystallize_findings</span>: <span class="lkw">true</span><br>
820
+ &nbsp;&nbsp;<span class="lprop">recency</span>: <span class="lstr">"7d"</span><br>
821
+ &nbsp;&nbsp;<span class="lprop">report</span>: <span class="lid">markdown</span><br>
822
+ }
823
+ </div>
824
+ <div class="lc-b" id="lc-flow">
825
+ <span class="lcm">// Chain operations with |&gt;</span><br>
826
+ <span class="lkw">flow</span> <span class="lid">MarketWatch</span> {<br>
827
+ &nbsp;&nbsp;<span class="lkw">crystallize</span> <span class="lkw">from</span> <span class="lid">web</span> {<br>
828
+ &nbsp;&nbsp;&nbsp;&nbsp;<span class="lprop">topic</span>: <span class="lstr">"AI stocks"</span><br>
829
+ &nbsp;&nbsp;&nbsp;&nbsp;<span class="lprop">recency</span>: <span class="lstr">"1h"</span><br>
830
+ &nbsp;&nbsp;}<br>
831
+ &nbsp;&nbsp;|&gt; <span class="lkw">ask</span> <span class="lstr">"Key trends?"</span> { <span class="lprop">depth</span>: <span class="lnum">4</span> }<br>
832
+ &nbsp;&nbsp;|&gt; <span class="lkw">agent</span> <span class="lid">Summarizer</span> {}<br>
833
+ &nbsp;&nbsp;|&gt; <span class="lkw">output</span> <span class="lid">markdown</span><br>
834
+ }
835
+ </div>
836
+ <div class="lc-b" id="lc-watch">
837
+ <span class="lcm">// Reactive — fires when lattice shifts</span><br>
838
+ <span class="lkw">watch</span> {<br>
839
+ &nbsp;&nbsp;<span class="lprop">when</span>: <span class="lkw">glyph</span> changes <span class="lprop">near</span> <span class="lstr">"bitcoin"</span><br>
840
+ &nbsp;&nbsp;<span class="lprop">confidence_delta</span>: <span class="lnum">0.2</span><br>
841
+ &nbsp;&nbsp;<span class="lprop">trigger</span>: <span class="lkw">agent</span> <span class="lid">AlertBot</span> {<br>
842
+ &nbsp;&nbsp;&nbsp;&nbsp;<span class="lprop">message</span>: <span class="lstr">"Crypto landscape shifted"</span><br>
843
+ &nbsp;&nbsp;}<br>
844
+ }
845
+ </div>
846
+ </div>
847
+ </div>
848
+ <div class="lume-explain">
849
+ <div class="le e1"><div class="le-n">glyph { }</div><div class="le-d">Declare a concept directly into the lattice with typed edges, confidence, and decay — human-readable and inspectable forever.</div></div>
850
+ <div class="le e2"><div class="le-n">ask " "</div><div class="le-d">Traverse the Glyph Lattice by semantic similarity. Specify traversal depth, confidence floor, source visibility, recency preference.</div></div>
851
+ <div class="le e3"><div class="le-n">crystallize from</div><div class="le-d">Ingest new knowledge on demand from web, files, or APIs. Triggers the full 5-phase crystallization pipeline in the background.</div></div>
852
+ <div class="le e4"><div class="le-n">agent { }</div><div class="le-d">Agentic tasks where the Glyph Lattice is memory. Everything the agent learns is crystallized permanently — no separate memory system.</div></div>
853
+ <div class="le e5"><div class="le-n">flow { } with |&gt;</div><div class="le-d">Chain crystallize → ask → agent → output. Build complex intelligence pipelines in readable, composable steps.</div></div>
854
+ <div class="le e6"><div class="le-n">watch { }</div><div class="le-d">Reactive intelligence. Fire agents when the lattice topology changes — breaking news, confidence shifts, conflict detection.</div></div>
855
+ <div class="le e7"><div class="le-n">inspect glyph</div><div class="le-d">Peer inside any Glyph. See relations, cluster, confidence, decay rate, and every source. Full transparency by design.</div></div>
856
+ </div>
857
+ </div>
858
+ </div>
859
+
860
+ <!-- ══ SECTION 5 — THREADS ══ -->
861
+ <div class="sec" id="s5">
862
+ <div class="sec-label">// 05</div>
863
+ <div class="sec-title">Always <em>Learning</em></div>
864
+ <div class="sec-rule"></div>
865
+ <div class="sec-sub">Three threads run continuously after initial crystallization. The lattice is never frozen. Knowledge from 30 minutes ago is already there.</div>
866
+ <div class="threads-grid">
867
+ <div class="thread-card tc1"><div class="tc-pulse tcp1"></div>
868
+ <div class="tc-icon">🌐</div>
869
+ <div class="tc-name">Web Crystallizer</div>
870
+ <div class="tc-desc">Crawls the live web continuously. Priority queue: trending topics first. Auto-integrates findings into the lattice in real time.</div>
871
+ <div class="tc-stats">
872
+ <div class="ts"><span class="ts-k">Rate</span><span class="ts-v">~10K Glyphs/hour</span></div>
873
+ <div class="ts"><span class="ts-k">News decay</span><span class="ts-v">24–72 hours</span></div>
874
+ <div class="ts"><span class="ts-k">Science decay</span><span class="ts-v">Years–decades</span></div>
875
+ </div>
876
+ </div>
877
+ <div class="thread-card tc2"><div class="tc-pulse tcp2"></div>
878
+ <div class="tc-icon">💬</div>
879
+ <div class="tc-name">Interaction Crystallizer</div>
880
+ <div class="tc-desc">Every conversation crystallizes new knowledge. User corrections instantly adjust confidence. Opt-in shared learning across instances.</div>
881
+ <div class="tc-stats">
882
+ <div class="ts"><span class="ts-k">Trigger</span><span class="ts-v">Every novel query</span></div>
883
+ <div class="ts"><span class="ts-k">Correction</span><span class="ts-v">Instant ±0.15 conf</span></div>
884
+ <div class="ts"><span class="ts-k">Privacy</span><span class="ts-v">Ephemeral mode</span></div>
885
+ </div>
886
+ </div>
887
+ <div class="thread-card tc3"><div class="tc-pulse tcp3"></div>
888
+ <div class="tc-icon">⏳</div>
889
+ <div class="tc-name">Decay Monitor</div>
890
+ <div class="tc-desc">Scans for stale Glyphs every 15 minutes. Prunes below threshold. Fires the Arbiter on contradictions. Daily defragmentation.</div>
891
+ <div class="tc-stats">
892
+ <div class="ts"><span class="ts-k">Scan interval</span><span class="ts-v">15 minutes</span></div>
893
+ <div class="ts"><span class="ts-k">Prune floor</span><span class="ts-v">confidence &lt; 0.1</span></div>
894
+ <div class="ts"><span class="ts-k">Defrag</span><span class="ts-v">Daily</span></div>
895
+ </div>
896
+ </div>
897
+ </div>
898
+ </div>
899
+
900
+ <!-- ══ SECTION 6 — COMPARE ══ -->
901
+ <div class="sec" id="s6">
902
+ <div class="sec-label">// 06</div>
903
+ <div class="sec-title">Vexa <em>vs</em> Every LLM</div>
904
+ <div class="sec-rule"></div>
905
+ <table class="compare-table">
906
+ <thead><tr><th>PROPERTY</th><th>EVERY LLM EVER BUILT</th><th>MATRIX VEXA</th></tr></thead>
907
+ <tbody>
908
+ <tr><td class="td-prop">Knowledge currency</td><td class="td-llm">Training cutoff — months/years old</td><td class="td-vexa">✦ Live — minutes old, always current</td></tr>
909
+ <tr><td class="td-prop">Training cost</td><td class="td-llm">Weeks · $millions · GPU cluster</td><td class="td-vexa">✦ 10 min · free · any laptop · CPU only</td></tr>
910
+ <tr><td class="td-prop">Interpretable</td><td class="td-llm">No — complete black box</td><td class="td-vexa">✦ Yes — every Glyph human-readable</td></tr>
911
+ <tr><td class="td-prop">Self-updating</td><td class="td-llm">Never without retraining</td><td class="td-vexa">✦ Continuously — 3 live threads</td></tr>
912
+ <tr><td class="td-prop">Remembers conversations</td><td class="td-llm">No — context window only</td><td class="td-vexa">✦ Yes — crystallized permanently</td></tr>
913
+ <tr><td class="td-prop">Source tracking</td><td class="td-llm">Never — lost at training</td><td class="td-vexa">✦ Every claim sourced always</td></tr>
914
+ <tr><td class="td-prop">Uncertainty</td><td class="td-llm">Simulated / hallucinated</td><td class="td-vexa">✦ Structurally real — Glyph.confidence</td></tr>
915
+ <tr><td class="td-prop">Conflict resolution</td><td class="td-llm">Averages contradictions</td><td class="td-vexa">✦ Arbiter fires — resolves by evidence</td></tr>
916
+ <tr><td class="td-prop">Runs on laptop</td><td class="td-llm">Barely — heavily quantized</td><td class="td-vexa">✦ Native — 4GB RAM, fast</td></tr>
917
+ </tbody>
918
+ </table>
919
+ </div>
920
+
921
+ <!-- ══ SECTION 7 — BRIDGE ══ -->
922
+ <div class="sec" id="s7">
923
+ <div class="sec-label">// 07</div>
924
+ <div class="sec-title">The Vexa <em>Bridge</em></div>
925
+ <div class="sec-rule"></div>
926
+ <div class="sec-sub">Vexa isn't an LLM. But the Bridge makes it look exactly like one to Ollama, vLLM, and HuggingFace. Drop it in anywhere.</div>
927
+ <div class="bridge-grid">
928
+ <div class="bridge-card"><div class="bc-name">Ollama</div><div class="bc-method">GGUF-compatible bridge + Modelfile</div><div class="bc-badge">✦ Planned</div></div>
929
+ <div class="bridge-card"><div class="bc-name">vLLM</div><div class="bc-method">OpenAI-compatible API shim</div><div class="bc-badge">✦ Planned</div></div>
930
+ <div class="bridge-card"><div class="bc-name">HuggingFace</div><div class="bc-method">Custom model class</div><div class="bc-badge">✦ Planned</div></div>
931
+ <div class="bridge-card"><div class="bc-name">LM Studio</div><div class="bc-method">GGUF bridge</div><div class="bc-badge">✦ Planned</div></div>
932
+ <div class="bridge-card"><div class="bc-name">Kobold.cpp</div><div class="bc-method">API adapter</div><div class="bc-badge">✦ Planned</div></div>
933
+ <div class="bridge-card"><div class="bc-name">llama.cpp</div><div class="bc-method">Custom backend</div><div class="bc-badge">◎ Stretch</div></div>
934
+ </div>
935
+ <div class="bridge-flow">
936
+ <div class="bf-row bf-1"><div class="bf-n">1</div><div class="bf-t"><strong>Ollama sends:</strong> { prompt: "What is quantum computing?" }</div></div>
937
+ <div class="bf-arr">↓</div>
938
+ <div class="bf-row bf-2"><div class="bf-n">2</div><div class="bf-t"><strong>Vexa Bridge intercepts</strong> — detects incoming LLM-format request</div></div>
939
+ <div class="bf-arr">↓</div>
940
+ <div class="bf-row bf-3"><div class="bf-n">3</div><div class="bf-t"><strong>Compiles to Lume:</strong> ask "quantum computing" { depth: 3 } |&gt; output natural_language</div></div>
941
+ <div class="bf-arr">↓</div>
942
+ <div class="bf-row bf-4"><div class="bf-n">4</div><div class="bf-t"><strong>Lattice Executor</strong> traverses Glyph lattice, activates relevant clusters</div></div>
943
+ <div class="bf-arr">↓</div>
944
+ <div class="bf-row bf-5"><div class="bf-n">5</div><div class="bf-t"><strong>Response Synthesizer</strong> — tiny frozen LM converts Glyph activations → fluent text</div></div>
945
+ <div class="bf-arr">↓</div>
946
+ <div class="bf-row bf-6"><div class="bf-n">6</div><div class="bf-t"><strong>Ollama receives:</strong> { response: "Quantum computing is..." } — standard format</div></div>
947
+ </div>
948
+ </div>
949
+
950
+ <!-- ══ SECTION 8 — HF PLAN ══ -->
951
+ <div class="sec" id="s8">
952
+ <div class="sec-label">// 08</div>
953
+ <div class="sec-title">Open Source <em>Release</em></div>
954
+ <div class="sec-rule"></div>
955
+ <div class="hf-list">
956
+ <div class="hf-card"><div><div class="hf-name">Matrix-Corp/Vexa-V1</div><div class="hf-desc">Glyph Lattice — Max density (~10B Glyphs). Full capability.</div></div><div class="hf-badge">Open Source</div></div>
957
+ <div class="hf-card"><div><div class="hf-name">Matrix-Corp/Vexa-Micro-V1</div><div class="hf-desc">Glyph Lattice — Micro density (~10M Glyphs). 4GB RAM. Laptop-first.</div></div><div class="hf-badge">Open Source</div></div>
958
+ <div class="hf-card"><div><div class="hf-name">Matrix-Corp/Lume-Language-Spec</div><div class="hf-desc">Lume language specification, parser, and reference implementation.</div></div><div class="hf-badge">Open Source</div></div>
959
+ <div class="hf-card"><div><div class="hf-name">Matrix-Corp/Vexa-Bridge</div><div class="hf-desc">Ollama / vLLM / HuggingFace compatibility adapter.</div></div><div class="hf-badge">Open Source</div></div>
960
+ <div class="hf-card"><div><div class="hf-name">Matrix-Corp/Vexa-Crystallizer</div><div class="hf-desc">Crystallization engine — ingest any knowledge source into Glyphs.</div></div><div class="hf-badge">Open Source</div></div>
961
+ </div>
962
+ </div>
963
+
964
+ <div class="footer">
965
+ <div class="footer-l">MATRIX.CORP — VEXA V1<br>CRYSTALLINE INTELLIGENCE · 🔴 PLANNED<br>FULLY OPEN SOURCE</div>
966
+ <div class="footer-r">Matrix Vexa ✦</div>
967
+ </div>
968
+
969
+ </div><!-- /wrap -->
970
+
971
+ <script>
972
+ // ── PASTEL CRYSTAL RAIN ──
973
+ const rain = document.getElementById('rainCanvas');
974
+ const rCtx = rain.getContext('2d');
975
+ let RW, RH;
976
+ function resizeRain(){RW=rain.width=window.innerWidth;RH=rain.height=window.innerHeight;}
977
+ resizeRain();window.addEventListener('resize',resizeRain);
978
+
979
+ const PASTEL = ['#f4a7c3','#c4b5f4','#a8e6cf','#ffcba4','#a8d8ea','#f9c6cf','#f7d794','#dbb8f5'];
980
+ const crystals = [];
981
+ for(let i=0;i<60;i++){
982
+ crystals.push({
983
+ x:Math.random()*window.innerWidth,
984
+ y:Math.random()*window.innerHeight-window.innerHeight,
985
+ size:Math.random()*18+5,
986
+ speed:Math.random()*0.8+0.3,
987
+ rotation:Math.random()*Math.PI*2,
988
+ rotSpeed:(Math.random()-0.5)*0.02,
989
+ color:PASTEL[Math.floor(Math.random()*PASTEL.length)],
990
+ alpha:Math.random()*0.5+0.1,
991
+ type:Math.floor(Math.random()*3) // 0=diamond 1=hexagon 2=star
992
+ });
993
+ }
994
+
995
+ function drawCrystal(ctx, x, y, size, rotation, color, alpha, type){
996
+ ctx.save();ctx.translate(x,y);ctx.rotate(rotation);ctx.globalAlpha=alpha;
997
+ ctx.strokeStyle=color;ctx.lineWidth=1;ctx.fillStyle=color+'33';
998
+ ctx.beginPath();
999
+ if(type===0){
1000
+ // Diamond
1001
+ ctx.moveTo(0,-size);ctx.lineTo(size*0.5,0);
1002
+ ctx.lineTo(0,size);ctx.lineTo(-size*0.5,0);ctx.closePath();
1003
+ } else if(type===1){
1004
+ // Hexagon
1005
+ for(let i=0;i<6;i++){
1006
+ const a=i*Math.PI/3;
1007
+ i===0?ctx.moveTo(Math.cos(a)*size,Math.sin(a)*size):ctx.lineTo(Math.cos(a)*size,Math.sin(a)*size);
1008
+ }ctx.closePath();
1009
+ } else {
1010
+ // 4-point star
1011
+ for(let i=0;i<8;i++){
1012
+ const a=i*Math.PI/4;
1013
+ const r=i%2===0?size:size*0.4;
1014
+ i===0?ctx.moveTo(Math.cos(a)*r,Math.sin(a)*r):ctx.lineTo(Math.cos(a)*r,Math.sin(a)*r);
1015
+ }ctx.closePath();
1016
+ }
1017
+ ctx.fill();ctx.stroke();
1018
+ // Sparkle
1019
+ ctx.globalAlpha=alpha*0.8;
1020
+ ctx.fillStyle='white';
1021
+ ctx.beginPath();ctx.arc(0,-size*0.3,size*0.12,0,Math.PI*2);ctx.fill();
1022
+ ctx.restore();
1023
+ }
1024
+
1025
+ function animateRain(){
1026
+ rCtx.clearRect(0,0,RW,RH);
1027
+ crystals.forEach(c=>{
1028
+ c.y+=c.speed;c.rotation+=c.rotSpeed;
1029
+ if(c.y>RH+c.size){c.y=-c.size*2;c.x=Math.random()*RW;}
1030
+ drawCrystal(rCtx,c.x,c.y,c.size,c.rotation,c.color,c.alpha,c.type);
1031
+ });
1032
+ requestAnimationFrame(animateRain);
1033
+ }
1034
+ animateRain();
1035
+
1036
+ // ── GLYPH CANVAS ──
1037
+ const gc=document.getElementById('glyphCanvas');
1038
+ gc.width=gc.offsetWidth*2;gc.height=gc.offsetHeight*2;
1039
+ const gCtx=gc.getContext('2d');gCtx.scale(2,2);
1040
+ const GW=gc.offsetWidth/2,GH=gc.offsetHeight/2;
1041
+
1042
+ const glyphs=[];
1043
+ const GCOLORS=['#f4a7c3','#c4b5f4','#a8e6cf','#ffcba4','#a8d8ea','#dbb8f5'];
1044
+ const LABELS=['CONCEPT','CAUSE','ENTITY','FACT','PLACE','TIME','EFFECT','BELIEF'];
1045
+ for(let i=0;i<16;i++){
1046
+ glyphs.push({
1047
+ x:40+Math.random()*(GW-80),y:40+Math.random()*(GH-80),
1048
+ r:Math.random()*10+5,
1049
+ color:GCOLORS[Math.floor(Math.random()*GCOLORS.length)],
1050
+ vx:(Math.random()-0.5)*0.4,vy:(Math.random()-0.5)*0.4,
1051
+ pulse:Math.random()*Math.PI*2,
1052
+ links:[],label:LABELS[Math.floor(Math.random()*LABELS.length)]
1053
+ });
1054
+ }
1055
+ glyphs.forEach((g,i)=>{
1056
+ const n=Math.floor(Math.random()*3)+1;
1057
+ for(let j=0;j<n;j++){
1058
+ const t=Math.floor(Math.random()*glyphs.length);
1059
+ if(t!==i)g.links.push(t);
1060
+ }
1061
+ });
1062
+ let hoverG=-1;
1063
+ gc.addEventListener('mousemove',e=>{
1064
+ const r=gc.getBoundingClientRect();
1065
+ const mx=(e.clientX-r.left)*(gc.width/r.width)/2;
1066
+ const my=(e.clientY-r.top)*(gc.height/r.height)/2;
1067
+ hoverG=-1;
1068
+ glyphs.forEach((g,i)=>{if(Math.hypot(g.x-mx,g.y-my)<g.r+8)hoverG=i;});
1069
+ });
1070
+
1071
+ function animateGlyphs(){
1072
+ gCtx.fillStyle='rgba(255,252,248,0.15)';
1073
+ gCtx.fillRect(0,0,GW,GH);
1074
+ glyphs.forEach((g,i)=>{
1075
+ g.links.forEach(j=>{
1076
+ const t=glyphs[j];
1077
+ const hot=i===hoverG||j===hoverG;
1078
+ gCtx.beginPath();gCtx.moveTo(g.x,g.y);gCtx.lineTo(t.x,t.y);
1079
+ gCtx.strokeStyle=g.color;
1080
+ gCtx.globalAlpha=hot?0.5:0.12;
1081
+ gCtx.lineWidth=hot?1.5:0.7;
1082
+ gCtx.stroke();gCtx.globalAlpha=1;
1083
+ });
1084
+ });
1085
+ glyphs.forEach((g,i)=>{
1086
+ g.pulse+=0.035;g.x+=g.vx;g.y+=g.vy;
1087
+ if(g.x<g.r||g.x>GW-g.r)g.vx*=-1;
1088
+ if(g.y<g.r||g.y>GH-g.r)g.vy*=-1;
1089
+ const pr=g.r+Math.sin(g.pulse)*2;
1090
+ const hot=i===hoverG;
1091
+ // Glow
1092
+ const grad=gCtx.createRadialGradient(g.x,g.y,0,g.x,g.y,pr*3);
1093
+ grad.addColorStop(0,g.color+(hot?'80':'30'));grad.addColorStop(1,'transparent');
1094
+ gCtx.beginPath();gCtx.arc(g.x,g.y,pr*3,0,Math.PI*2);
1095
+ gCtx.fillStyle=grad;gCtx.fill();
1096
+ // Diamond
1097
+ gCtx.save();gCtx.translate(g.x,g.y);gCtx.rotate(Math.PI/4);
1098
+ gCtx.beginPath();gCtx.rect(-pr,-pr,pr*2,pr*2);
1099
+ gCtx.fillStyle=g.color+(hot?'50':'20');
1100
+ gCtx.strokeStyle=g.color;gCtx.lineWidth=hot?2:1;
1101
+ gCtx.globalAlpha=hot?1:0.7;
1102
+ gCtx.fill();gCtx.stroke();gCtx.restore();gCtx.globalAlpha=1;
1103
+ if(hot){
1104
+ gCtx.font='8px DM Sans';gCtx.fillStyle=g.color;
1105
+ gCtx.textAlign='center';gCtx.fillText(g.label,g.x,g.y-pr-6);
1106
+ }
1107
+ });
1108
+ requestAnimationFrame(animateGlyphs);
1109
+ }
1110
+ animateGlyphs();
1111
+
1112
+ // ── LATTICE CANVAS ──
1113
+ const lc=document.getElementById('latticeCanvas');
1114
+ lc.width=lc.offsetWidth*2;lc.height=lc.offsetHeight*2;
1115
+ const lCtx=lc.getContext('2d');lCtx.scale(2,2);
1116
+ const LW=lc.offsetWidth/2,LH=lc.offsetHeight/2;
1117
+
1118
+ const LTYPES=[
1119
+ {color:'#f4a7c3'},{color:'#c4b5f4'},{color:'#a8e6cf'},
1120
+ {color:'#ffcba4'},{color:'rgba(180,165,185,0.5)'}
1121
+ ];
1122
+ const lNodes=[];
1123
+ for(let i=0;i<55;i++){
1124
+ const t=Math.random()<0.35?0:Math.random()<0.3?1:Math.random()<0.1?3:Math.random()<0.1?4:2;
1125
+ lNodes.push({
1126
+ x:30+Math.random()*(LW-60),y:30+Math.random()*(LH-60),
1127
+ r:t===0?6:t===3?5:3,type:t,
1128
+ vx:(Math.random()-0.5)*0.25,vy:(Math.random()-0.5)*0.25,
1129
+ pulse:Math.random()*Math.PI*2,links:[]
1130
+ });
1131
+ }
1132
+ lNodes.forEach((n,i)=>{
1133
+ const k=Math.floor(Math.random()*4)+1;
1134
+ for(let j=0;j<k;j++){
1135
+ const t=Math.floor(Math.random()*lNodes.length);
1136
+ if(t!==i)n.links.push(t);
1137
+ }
1138
+ });
1139
+
1140
+ // Travelling packet
1141
+ let pkt={prog:0,from:0,to:3,spd:0.007};
1142
+
1143
+ function animateLattice(){
1144
+ lCtx.fillStyle='rgba(255,252,248,0.1)';lCtx.fillRect(0,0,LW,LH);
1145
+ lNodes.forEach((n,i)=>{
1146
+ n.links.forEach(j=>{
1147
+ const t=lNodes[j];
1148
+ lCtx.beginPath();lCtx.moveTo(n.x,n.y);lCtx.lineTo(t.x,t.y);
1149
+ lCtx.strokeStyle=LTYPES[n.type].color;
1150
+ lCtx.globalAlpha=0.1;lCtx.lineWidth=0.6;lCtx.stroke();lCtx.globalAlpha=1;
1151
+ });
1152
+ });
1153
+ // Packet
1154
+ pkt.prog+=pkt.spd;
1155
+ if(pkt.prog>=1){pkt.prog=0;pkt.from=pkt.to;pkt.to=Math.floor(Math.random()*lNodes.length);}
1156
+ const pf=lNodes[pkt.from],pt=lNodes[pkt.to];
1157
+ const px=pf.x+(pt.x-pf.x)*pkt.prog,py=pf.y+(pt.y-pf.y)*pkt.prog;
1158
+ const pg=lCtx.createRadialGradient(px,py,0,px,py,10);
1159
+ pg.addColorStop(0,'rgba(244,167,195,0.9)');pg.addColorStop(1,'transparent');
1160
+ lCtx.beginPath();lCtx.arc(px,py,10,0,Math.PI*2);lCtx.fillStyle=pg;lCtx.fill();
1161
+
1162
+ lNodes.forEach(n=>{
1163
+ n.pulse+=0.025;n.x+=n.vx;n.y+=n.vy;
1164
+ if(n.x<n.r||n.x>LW-n.r)n.vx*=-1;if(n.y<n.r||n.y>LH-n.r)n.vy*=-1;
1165
+ const pr=n.r+Math.sin(n.pulse)*1.5;
1166
+ const c=LTYPES[n.type].color;
1167
+ const g=lCtx.createRadialGradient(n.x,n.y,0,n.x,n.y,pr*2.5);
1168
+ g.addColorStop(0,c.replace('rgba(','').replace(')','').split(',').length>3?c:c+'60');
1169
+ g.addColorStop(1,'transparent');
1170
+ lCtx.beginPath();lCtx.arc(n.x,n.y,pr*2.5,0,Math.PI*2);lCtx.fillStyle=g;lCtx.fill();
1171
+ lCtx.beginPath();lCtx.arc(n.x,n.y,pr,0,Math.PI*2);
1172
+ lCtx.fillStyle=c+'30';lCtx.strokeStyle=c;lCtx.lineWidth=1;lCtx.fill();lCtx.stroke();
1173
+ });
1174
+ requestAnimationFrame(animateLattice);
1175
+ }
1176
+ animateLattice();
1177
+
1178
+ // ── CRYSTALLIZATION TIMER ──
1179
+ let cRunning=false,cTime=0,cIv;
1180
+ const TOTAL=600;
1181
+
1182
+ function runCryst(){
1183
+ if(cRunning)return;
1184
+ cRunning=true;cTime=0;
1185
+ document.getElementById('cBtn').textContent='✦ Crystallizing...';
1186
+ document.getElementById('timerDisp').style.background='linear-gradient(135deg,#f4a7c3,#c4b5f4)';
1187
+ document.getElementById('timerDisp').style.webkitBackgroundClip='text';
1188
+ document.getElementById('timerDisp').style.webkitTextFillColor='transparent';
1189
+
1190
+ cIv=setInterval(()=>{
1191
+ cTime++;
1192
+ const pct=cTime/TOTAL;
1193
+ const m=Math.floor((TOTAL-cTime)/60),s=(TOTAL-cTime)%60;
1194
+ document.getElementById('timerDisp').textContent=`${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`;
1195
+
1196
+ const phases=[
1197
+ {b:'b1',v:'p1v',s:0,e:0.2},
1198
+ {b:'b2',v:'p2v',s:0.2,e:0.4},
1199
+ {b:'b3',v:'p3v',s:0.4,e:0.6},
1200
+ {b:'b4',v:'p4v',s:0.6,e:0.8},
1201
+ {b:'b5',v:'p5v',s:0.8,e:1.0},
1202
+ ];
1203
+ phases.forEach(p=>{
1204
+ const local=Math.max(0,Math.min(1,(pct-p.s)/(p.e-p.s)));
1205
+ document.getElementById(p.b).style.width=Math.round(local*100)+'%';
1206
+ document.getElementById(p.v).textContent=Math.round(local*100)+'%';
1207
+ });
1208
+
1209
+ const g=Math.floor(pct*10000000);
1210
+ document.getElementById('gStat').textContent=g.toLocaleString();
1211
+ document.getElementById('eStat').textContent=Math.floor(g*2.3).toLocaleString();
1212
+ document.getElementById('cStat').textContent=Math.floor(pct*47);
1213
+
1214
+ if(cTime>=TOTAL){
1215
+ clearInterval(cIv);cRunning=false;
1216
+ document.getElementById('cBtn').textContent='✦ Complete!';
1217
+ document.getElementById('timerDisp').textContent='00:00';
1218
+ }
1219
+ },30);
1220
+ }
1221
+
1222
+ // ── LUME TABS ──
1223
+ function showLume(tab,el){
1224
+ document.querySelectorAll('.lc-b').forEach(b=>b.classList.remove('on'));
1225
+ document.querySelectorAll('.ltab').forEach(t=>t.classList.remove('on'));
1226
+ document.getElementById('lc-'+tab).classList.add('on');
1227
+ el.classList.add('on');
1228
+ }
1229
+
1230
+ // ── SCROLL REVEALS ──
1231
+ const obs=new IntersectionObserver(entries=>{
1232
+ entries.forEach(e=>{if(e.isIntersecting)e.target.classList.add('vis');});
1233
+ },{threshold:0.05});
1234
+ document.querySelectorAll('.sec').forEach((s,i)=>{s.style.transitionDelay=(i*0.04)+'s';obs.observe(s);});
1235
+
1236
+ // ── MOUSE SPARKLE TRAIL ──
1237
+ document.addEventListener('mousemove', e=>{
1238
+ if(Math.random()>0.7) return;
1239
+ const s=document.createElement('div');
1240
+ s.style.cssText=`position:fixed;left:${e.clientX}px;top:${e.clientY}px;
1241
+ width:6px;height:6px;border-radius:50%;pointer-events:none;z-index:9999;
1242
+ background:${PASTEL[Math.floor(Math.random()*PASTEL.length)]};
1243
+ transform:translate(-50%,-50%) scale(1);
1244
+ transition:all 0.6s ease;opacity:0.8;`;
1245
+ document.body.appendChild(s);
1246
+ requestAnimationFrame(()=>{
1247
+ s.style.transform=`translate(${(Math.random()-0.5)*40-3}px,${-30+Math.random()*-20}px) scale(0)`;
1248
+ s.style.opacity='0';
1249
+ });
1250
+ setTimeout(()=>s.remove(),600);
1251
+ });
1252
+ </script>
1253
+ </body>
1254
+ </html>