Spaces:

Matrix-Corp
/

Vexa

Running

File size: 62,483 Bytes

2f6956a

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Matrix Vexa — Crystalline Intelligence</title>
<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">
<style>
:root {
  --bg: #fdf8f5;
  --bg2: #faf3ee;
  --pink: #f4a7c3;
  --lavender: #c4b5f4;
  --mint: #a8e6cf;
  --peach: #ffcba4;
  --sky: #a8d8ea;
  --rose: #f9c6cf;
  --gold: #f7d794;
  --lilac: #dbb8f5;
  --text: #5a4a5a;
  --text-soft: #9a8a9a;
  --white: #fff;
  --panel: rgba(255,255,255,0.6);
  --border: rgba(196,181,244,0.25);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  font-family:'DM Sans',sans-serif;
  color:var(--text);
  overflow-x:hidden;
  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;
}

/* ── Dreamy gradient bg ── */
body::before {
  content:'';
  position:fixed;inset:0;
  background:
    radial-gradient(ellipse 70% 50% at 15% 20%, rgba(244,167,195,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 70% at 85% 80%, rgba(196,181,244,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(168,230,207,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 40% 60% at 80% 15%, rgba(255,203,164,0.14) 0%, transparent 50%);
  pointer-events:none;z-index:0;
  animation:bgShift 12s ease-in-out infinite alternate;
}
@keyframes bgShift {
  0%{filter:hue-rotate(0deg);}
  100%{filter:hue-rotate(20deg);}
}

/* Rain canvas */
#rainCanvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:0.7;}

::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--lavender);border-radius:3px;}

.wrap{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 36px 120px;}

/* ── HERO ── */
.hero{
  min-height:100vh;
  display:flex;flex-direction:column;
  justify-content:center;align-items:center;
  text-align:center;
  padding:100px 0 60px;
  position:relative;
}

.hero-crystal{
  width:200px;height:200px;
  position:relative;margin-bottom:32px;
  animation:crystalFloat 4s ease-in-out infinite;
}
@keyframes crystalFloat{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-16px) rotate(8deg);}
}

.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 20px;
  background:rgba(244,167,195,0.15);
  border:1px solid rgba(244,167,195,0.4);
  border-radius:100px;
  font-family:'Fira Code',monospace;font-size:10px;
  color:var(--pink);letter-spacing:3px;
  margin-bottom:24px;
  animation:badgePulse 3s ease-in-out infinite;
}
@keyframes badgePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(244,167,195,0.3);}
  50%{box-shadow:0 0 0 12px rgba(244,167,195,0);}
}

.hero-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(64px,12vw,140px);
  font-weight:900;
  line-height:0.9;
  margin-bottom:16px;
  background:linear-gradient(135deg,
    var(--pink) 0%,
    var(--lavender) 35%,
    var(--sky) 65%,
    var(--mint) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  filter:drop-shadow(0 4px 24px rgba(196,181,244,0.4));
  animation:titleGlow 3s ease-in-out infinite alternate;
  background-size:200% 200%;
}
@keyframes titleGlow{
  0%{filter:drop-shadow(0 4px 24px rgba(244,167,195,0.4));background-position:0% 50%;}
  100%{filter:drop-shadow(0 4px 40px rgba(196,181,244,0.6));background-position:100% 50%;}
}

.hero-sub{
  font-family:'Playfair Display',serif;
  font-size:clamp(14px,2vw,20px);
  font-style:italic;
  color:var(--text-soft);
  margin-bottom:32px;
  letter-spacing:1px;
}

.hero-desc{
  font-size:15px;color:var(--text);line-height:1.9;
  max-width:580px;margin:0 auto 48px;font-weight:300;
}
.hero-desc strong{color:var(--lavender);font-weight:500;}

.hero-pills{
  display:flex;flex-wrap:wrap;gap:8px;
  justify-content:center;margin-bottom:56px;
}
.pill{
  padding:7px 18px;border-radius:100px;
  font-size:11px;font-weight:500;letter-spacing:0.5px;
  backdrop-filter:blur(8px);
  transition:transform 0.2s,box-shadow 0.2s;
}
.pill:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.1);}
.p1{background:rgba(244,167,195,0.2);border:1px solid rgba(244,167,195,0.4);color:#c4617f;}
.p2{background:rgba(196,181,244,0.2);border:1px solid rgba(196,181,244,0.4);color:#7c5cbf;}
.p3{background:rgba(168,230,207,0.2);border:1px solid rgba(168,230,207,0.4);color:#4a9b75;}
.p4{background:rgba(255,203,164,0.2);border:1px solid rgba(255,203,164,0.4);color:#c47a3a;}
.p5{background:rgba(168,216,234,0.2);border:1px solid rgba(168,216,234,0.4);color:#3a7a9b;}

.scroll-down{
  font-family:'Fira Code',monospace;font-size:10px;
  color:var(--text-soft);letter-spacing:3px;
  animation:scrollHint 2s ease-in-out infinite;
}
@keyframes scrollHint{0%,100%{opacity:0.4;transform:translateY(0);}50%{opacity:1;transform:translateY(6px);}}

/* ── SECTION SYSTEM ── */
.sec{margin-top:100px;opacity:0;transform:translateY(32px);transition:opacity 0.8s ease,transform 0.8s ease;}
.sec.vis{opacity:1;transform:translateY(0);}

.sec-label{
  font-family:'Fira Code',monospace;font-size:10px;
  color:var(--pink);letter-spacing:4px;
  margin-bottom:8px;text-align:center;
}
.sec-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(32px,5vw,56px);
  font-weight:700;text-align:center;
  color:var(--text);margin-bottom:12px;
}
.sec-title em{
  font-style:italic;
  background:linear-gradient(135deg,var(--pink),var(--lavender));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.sec-sub{
  font-size:14px;color:var(--text-soft);text-align:center;
  max-width:560px;margin:0 auto 48px;line-height:1.8;
}
.sec-rule{
  width:80px;height:2px;margin:16px auto 48px;
  background:linear-gradient(90deg,var(--pink),var(--lavender),var(--mint));
  border-radius:1px;
}

/* ── GLASS CARDS ── */
.glass{
  background:rgba(255,255,255,0.55);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.7);
  border-radius:20px;
  box-shadow:0 8px 32px rgba(196,181,244,0.12), 0 2px 8px rgba(244,167,195,0.08);
  transition:transform 0.3s,box-shadow 0.3s;
}
.glass:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 48px rgba(196,181,244,0.2), 0 4px 16px rgba(244,167,195,0.12);
}

/* ── GLYPH ANATOMY ── */
.anatomy-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;}
.glyph-canvas-wrap{
  border-radius:20px;overflow:hidden;
  background:rgba(255,255,255,0.4);
  border:1px solid rgba(255,255,255,0.7);
  height:440px;position:relative;
}
.glyph-canvas-wrap canvas{width:100%;height:100%;}
.gc-label{
  position:absolute;top:16px;left:16px;
  font-family:'Fira Code',monospace;font-size:9px;
  color:var(--lavender);letter-spacing:3px;
}

.fields-list{display:flex;flex-direction:column;gap:6px;}
.field-row{
  display:grid;grid-template-columns:110px 100px 1fr;
  align-items:center;gap:12px;
  padding:12px 16px;
  border-radius:12px;
  background:rgba(255,255,255,0.6);
  border:1px solid rgba(255,255,255,0.8);
  transition:all 0.2s;
}
.field-row:hover{background:rgba(255,255,255,0.9);transform:translateX(4px);}
.fr-name{font-family:'Fira Code',monospace;font-size:10px;font-weight:400;}
.fr-type{font-family:'Fira Code',monospace;font-size:9px;color:var(--text-soft);}
.fr-desc{font-size:10px;color:var(--text);line-height:1.5;}
.fr-c1 .fr-name{color:#c4617f;}
.fr-c2 .fr-name{color:#7c5cbf;}
.fr-c3 .fr-name{color:#4a9b75;}
.fr-c4 .fr-name{color:#c47a3a;}
.fr-c5 .fr-name{color:#3a7a9b;}

/* ── EDGES ── */
.edges-wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
.edge-card{
  padding:16px 14px;border-radius:16px;
  background:rgba(255,255,255,0.6);
  border:1px solid rgba(255,255,255,0.8);
  text-align:center;
  transition:all 0.2s;
}
.edge-card:hover{transform:translateY(-4px);background:rgba(255,255,255,0.9);}
.ec-gem{font-size:24px;margin-bottom:8px;}
.ec-name{font-family:'Fira Code',monospace;font-size:9px;letter-spacing:1px;margin-bottom:4px;}
.ec-ex{font-size:9px;color:var(--text-soft);font-style:italic;margin-bottom:4px;}
.ec-desc{font-size:9px;color:var(--text);line-height:1.5;}

/* ── CRYSTALLIZATION ── */
.cryst-grid{display:grid;grid-template-columns:1fr 320px;gap:32px;}
.phase-list{display:flex;flex-direction:column;gap:8px;}
.phase-card{
  display:grid;grid-template-columns:64px 1fr;
  border-radius:16px;overflow:hidden;
  background:rgba(255,255,255,0.55);
  border:1px solid rgba(255,255,255,0.8);
  transition:all 0.2s;
}
.phase-card:hover{transform:translateX(4px);background:rgba(255,255,255,0.85);}
.phase-left{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:16px 8px;
  font-family:'Playfair Display',serif;
}
.pl-num{font-size:28px;font-weight:900;line-height:1;}
.pl-time{font-family:'Fira Code',monospace;font-size:7px;color:var(--text-soft);letter-spacing:1px;margin-top:2px;}
.phase-right{padding:16px 20px;}
.pr-name{font-size:13px;font-weight:600;color:var(--text);margin-bottom:4px;}
.pr-desc{font-size:10px;color:var(--text-soft);line-height:1.7;}

.ph1 .phase-left{background:rgba(244,167,195,0.12);} .ph1 .pl-num{color:var(--pink);}
.ph2 .phase-left{background:rgba(196,181,244,0.12);} .ph2 .pl-num{color:var(--lavender);}
.ph3 .phase-left{background:rgba(168,230,207,0.12);} .ph3 .pl-num{color:var(--mint);}
.ph4 .phase-left{background:rgba(255,203,164,0.12);} .ph4 .pl-num{color:var(--peach);}
.ph5 .phase-left{background:rgba(168,216,234,0.12);} .ph5 .pl-num{color:var(--sky);}

/* Crystal timer */
.crystal-timer{
  border-radius:20px;
  background:rgba(255,255,255,0.6);
  border:1px solid rgba(255,255,255,0.8);
  padding:28px 24px;
  position:sticky;top:32px;
  text-align:center;
}
.ct-gem{font-size:48px;margin-bottom:8px;animation:gemSpin 6s linear infinite;}
@keyframes gemSpin{0%{transform:rotateY(0);}100%{transform:rotateY(360deg);}}
.ct-title{
  font-family:'Playfair Display',serif;font-size:13px;
  color:var(--text-soft);margin-bottom:16px;letter-spacing:1px;
}
.ct-time{
  font-family:'Playfair Display',serif;
  font-size:56px;font-weight:900;
  background:linear-gradient(135deg,var(--pink),var(--lavender));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  line-height:1;margin-bottom:4px;
}
.ct-unit{font-size:10px;color:var(--text-soft);letter-spacing:3px;margin-bottom:20px;font-family:'Fira Code',monospace;}
.ct-bars{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.cb-row{text-align:left;}
.cb-labels{display:flex;justify-content:space-between;font-size:9px;margin-bottom:3px;}
.cb-k{color:var(--text-soft);}
.cb-v{font-family:'Fira Code',monospace;}
.cb-track{height:6px;background:rgba(196,181,244,0.15);border-radius:3px;overflow:hidden;}
.cb-fill{height:100%;border-radius:3px;transition:width 0.1s linear;}
.cf1{background:linear-gradient(90deg,var(--pink),var(--rose));}
.cf2{background:linear-gradient(90deg,var(--lavender),var(--lilac));}
.cf3{background:linear-gradient(90deg,var(--mint),var(--sky));}
.cf4{background:linear-gradient(90deg,var(--peach),var(--gold));}
.cf5{background:linear-gradient(90deg,var(--sky),var(--mint));}
.ct-btn{
  width:100%;padding:12px;border-radius:12px;
  background:linear-gradient(135deg,var(--pink),var(--lavender));
  border:none;color:white;
  font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;
  cursor:pointer;letter-spacing:1px;
  transition:all 0.2s;box-shadow:0 4px 16px rgba(196,181,244,0.3);
}
.ct-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(196,181,244,0.4);}
.ct-stats{margin-top:16px;display:flex;flex-direction:column;gap:4px;}
.cs-row{display:flex;justify-content:space-between;font-size:10px;padding:5px 0;border-bottom:1px solid rgba(196,181,244,0.1);}
.cs-k{color:var(--text-soft);}
.cs-v{font-family:'Fira Code',monospace;color:var(--lavender);}

/* ── LATTICE ── */
.lattice-wrap{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.lattice-canvas-box{
  border-radius:20px;height:480px;overflow:hidden;
  background:rgba(255,255,255,0.4);
  border:1px solid rgba(255,255,255,0.7);
  position:relative;
}
.lattice-canvas-box canvas{width:100%;height:100%;}
.lc-tag{
  position:absolute;top:16px;left:16px;
  font-family:'Fira Code',monospace;font-size:9px;
  color:var(--lavender);letter-spacing:3px;
}
.lc-legend{
  position:absolute;bottom:16px;left:16px;
  display:flex;flex-direction:column;gap:6px;
}
.ll{display:flex;align-items:center;gap:6px;font-size:9px;color:var(--text-soft);}
.ll-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}

.density-cards{display:flex;flex-direction:column;gap:8px;}
.dc{
  display:grid;grid-template-columns:80px 1fr 70px 80px;
  align-items:center;gap:12px;
  padding:14px 16px;border-radius:14px;
  background:rgba(255,255,255,0.55);
  border:1px solid rgba(255,255,255,0.8);
  transition:all 0.2s;
}
.dc:hover{background:rgba(255,255,255,0.9);transform:translateX(4px);}
.dc.header{
  background:rgba(196,181,244,0.08);
  border-color:rgba(196,181,244,0.2);
  font-family:'Fira Code',monospace;font-size:9px;
  color:var(--lavender);letter-spacing:2px;
}
.dc-tier{font-weight:600;color:var(--text);}
.dc-glyphs{font-family:'Fira Code',monospace;font-size:11px;color:var(--lavender);}
.dc-ram{font-family:'Fira Code',monospace;font-size:11px;color:var(--mint);}
.dc-use{font-size:10px;color:var(--text-soft);}
.dc.max .dc-tier{color:var(--pink);}
.dc.max .dc-glyphs{color:var(--pink);}

/* ── LUME ── */
.lume-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.lume-box{
  border-radius:20px;overflow:hidden;
  background:rgba(255,255,255,0.5);
  border:1px solid rgba(255,255,255,0.8);
}
.lume-tabbar{
  display:flex;background:rgba(255,255,255,0.6);
  border-bottom:1px solid rgba(196,181,244,0.15);
}
.ltab{
  padding:10px 18px;font-family:'Fira Code',monospace;
  font-size:9px;letter-spacing:2px;color:var(--text-soft);
  cursor:pointer;border-bottom:2px solid transparent;
  transition:all 0.15s;
}
.ltab:hover{color:var(--text);}
.ltab.on{color:var(--lavender);border-bottom-color:var(--lavender);}
.lume-code{
  padding:24px;font-family:'Fira Code',monospace;
  font-size:11px;line-height:2;min-height:380px;
  overflow-x:auto;
}
.lc-b{display:none;} .lc-b.on{display:block;}
.lkw{color:#c4617f;} .lid{color:#7c5cbf;} .lstr{color:#4a9b75;}
.lnum{color:#c47a3a;} .lcm{color:#c0b4c0;font-style:italic;} .lprop{color:#3a7a9b;}

.lume-explain{display:flex;flex-direction:column;gap:8px;}
.le{
  padding:16px 18px;border-radius:14px;
  background:rgba(255,255,255,0.55);
  border:1px solid rgba(255,255,255,0.8);
  border-left:3px solid;
  transition:all 0.2s;
}
.le:hover{transform:translateX(4px);background:rgba(255,255,255,0.9);}
.le-n{font-family:'Fira Code',monospace;font-size:10px;margin-bottom:4px;}
.le-d{font-size:10px;color:var(--text-soft);line-height:1.7;}
.le.e1{border-left-color:var(--pink);} .le.e1 .le-n{color:#c4617f;}
.le.e2{border-left-color:var(--lavender);} .le.e2 .le-n{color:#7c5cbf;}
.le.e3{border-left-color:var(--mint);} .le.e3 .le-n{color:#4a9b75;}
.le.e4{border-left-color:var(--peach);} .le.e4 .le-n{color:#c47a3a;}
.le.e5{border-left-color:var(--sky);} .le.e5 .le-n{color:#3a7a9b;}
.le.e6{border-left-color:var(--lilac);} .le.e6 .le-n{color:#9c5cbf;}
.le.e7{border-left-color:var(--gold);} .le.e7 .le-n{color:#b47a2a;}

/* ── THREADS ── */
.threads-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.thread-card{
  padding:28px 24px;border-radius:20px;
  background:rgba(255,255,255,0.55);
  border:1px solid rgba(255,255,255,0.8);
  position:relative;overflow:hidden;
  transition:all 0.3s;
}
.thread-card:hover{transform:translateY(-6px);background:rgba(255,255,255,0.85);}
.thread-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
}
.tc1::before{background:linear-gradient(90deg,var(--pink),var(--rose));}
.tc2::before{background:linear-gradient(90deg,var(--lavender),var(--lilac));}
.tc3::before{background:linear-gradient(90deg,var(--gold),var(--peach));}
.tc-pulse{
  position:absolute;top:20px;right:20px;
  width:10px;height:10px;border-radius:50%;
}
.tcp1{background:var(--pink);animation:tcPulse 1.5s ease-in-out infinite;}
.tcp2{background:var(--lavender);animation:tcPulse 1.5s ease-in-out infinite 0.5s;}
.tcp3{background:var(--gold);animation:tcPulse 1.5s ease-in-out infinite 1s;}
@keyframes tcPulse{
  0%,100%{transform:scale(1);opacity:1;box-shadow:0 0 0 0 currentColor;}
  50%{transform:scale(1.4);opacity:0.6;box-shadow:0 0 0 6px transparent;}
}
.tc-icon{font-size:32px;margin-bottom:12px;}
.tc-name{font-family:'Playfair Display',serif;font-size:18px;font-weight:700;color:var(--text);margin-bottom:8px;}
.tc-desc{font-size:11px;color:var(--text-soft);line-height:1.8;margin-bottom:16px;}
.tc-stats{display:flex;flex-direction:column;gap:4px;}
.ts{display:flex;justify-content:space-between;font-size:10px;padding:5px 0;border-bottom:1px solid rgba(196,181,244,0.1);}
.ts-k{color:var(--text-soft);}
.ts-v{font-family:'Fira Code',monospace;}
.tc1 .ts-v{color:#c4617f;} .tc2 .ts-v{color:#7c5cbf;} .tc3 .ts-v{color:#b47a2a;}

/* ── COMPARE ── */
.compare-table{width:100%;border-collapse:collapse;border-radius:16px;overflow:hidden;}
.compare-table th{
  font-size:10px;letter-spacing:2px;padding:14px 16px;
  text-align:left;background:rgba(196,181,244,0.12);
  color:var(--lavender);font-weight:500;font-family:'Fira Code',monospace;
  border-bottom:1px solid rgba(196,181,244,0.2);
}
.compare-table td{
  padding:12px 16px;border-bottom:1px solid rgba(196,181,244,0.08);
  font-size:11px;
  background:rgba(255,255,255,0.5);
}
.compare-table tr:hover td{background:rgba(255,255,255,0.85);}
.td-prop{color:var(--text);font-weight:500;}
.td-llm{color:#c47a7a;}
.td-vexa{color:#4a9b75;}

/* ── BRIDGE ── */
.bridge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px;}
.bridge-card{
  padding:18px 16px;border-radius:14px;
  background:rgba(255,255,255,0.55);
  border:1px solid rgba(255,255,255,0.8);
  transition:all 0.2s;
}
.bridge-card:hover{transform:translateY(-3px);background:rgba(255,255,255,0.9);}
.bc-name{font-weight:600;color:var(--text);margin-bottom:4px;font-size:13px;}
.bc-method{font-family:'Fira Code',monospace;font-size:9px;color:var(--text-soft);margin-bottom:10px;}
.bc-badge{
  display:inline-block;padding:3px 10px;border-radius:100px;
  font-size:8px;letter-spacing:1px;
  background:rgba(168,230,207,0.2);border:1px solid rgba(168,230,207,0.4);color:#4a9b75;
}

.bridge-flow{
  border-radius:16px;padding:24px;
  background:rgba(255,255,255,0.5);
  border:1px solid rgba(255,255,255,0.8);
}
.bf-row{
  display:flex;align-items:flex-start;gap:14px;
  padding:10px 0;border-bottom:1px solid rgba(196,181,244,0.08);
  font-size:11px;
}
.bf-n{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'Fira Code',monospace;font-size:9px;font-weight:500;color:white;
}
.bf-1 .bf-n{background:var(--pink);}
.bf-2 .bf-n{background:var(--lavender);}
.bf-3 .bf-n{background:var(--mint);}
.bf-4 .bf-n{background:var(--peach);}
.bf-5 .bf-n{background:var(--sky);}
.bf-6 .bf-n{background:var(--lilac);}
.bf-t{color:var(--text);line-height:1.6;}
.bf-t strong{color:var(--lavender);}
.bf-arr{text-align:center;color:var(--lavender);opacity:0.4;padding:4px 0;font-size:14px;}

/* ── HF PLAN ── */
.hf-list{display:flex;flex-direction:column;gap:8px;}
.hf-card{
  display:grid;grid-template-columns:1fr auto;
  align-items:center;gap:16px;
  padding:16px 20px;border-radius:14px;
  background:rgba(255,255,255,0.55);
  border:1px solid rgba(255,255,255,0.8);
  transition:all 0.2s;
}
.hf-card:hover{transform:translateX(4px);background:rgba(255,255,255,0.9);}
.hf-name{font-family:'Fira Code',monospace;font-size:11px;color:var(--lavender);margin-bottom:4px;}
.hf-desc{font-size:10px;color:var(--text-soft);}
.hf-badge{
  padding:4px 12px;border-radius:100px;
  font-size:8px;letter-spacing:1px;white-space:nowrap;
  background:rgba(168,230,207,0.2);border:1px solid rgba(168,230,207,0.4);color:#4a9b75;
}

/* ── FOOTER ── */
.footer{
  margin-top:100px;padding:32px 0;
  border-top:1px solid rgba(196,181,244,0.2);
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:16px;
}
.footer-l{font-size:10px;color:var(--text-soft);line-height:2;font-family:'Fira Code',monospace;letter-spacing:2px;}
.footer-r{
  font-family:'Playfair Display',serif;font-size:22px;font-style:italic;
  background:linear-gradient(135deg,var(--pink),var(--lavender));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

@media(max-width:900px){
  .anatomy-grid,.lume-grid,.lattice-wrap,.cryst-grid{grid-template-columns:1fr;}
  .edges-wrap{grid-template-columns:repeat(2,1fr);}
  .threads-grid{grid-template-columns:1fr;}
  .bridge-grid{grid-template-columns:1fr 1fr;}
}
</style>
</head>
<body>
<canvas id="rainCanvas"></canvas>
<div class="wrap">

<!-- ══ HERO ══ -->
<div class="hero">
  <div class="hero-badge">✦ NOT AN AI — A NEW PARADIGM ✦</div>

  <div class="hero-crystal">
    <svg viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="cg1" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#f4a7c3"/>
          <stop offset="50%" stop-color="#c4b5f4"/>
          <stop offset="100%" stop-color="#a8e6cf"/>
        </linearGradient>
        <linearGradient id="cg2" x1="100%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stop-color="#ffcba4" stop-opacity="0.6"/>
          <stop offset="100%" stop-color="#a8d8ea" stop-opacity="0.6"/>
        </linearGradient>
        <filter id="glow"><feGaussianBlur stdDeviation="3" result="blur"/><feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
      </defs>
      <!-- Main crystal body -->
      <polygon points="100,10 160,60 170,130 100,190 30,130 40,60" fill="url(#cg1)" opacity="0.7" filter="url(#glow)"/>
      <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"/>
      <!-- Inner facets -->
      <polygon points="100,10 160,60 100,80" fill="white" opacity="0.2"/>
      <polygon points="100,10 40,60 100,80" fill="url(#cg2)" opacity="0.3"/>
      <polygon points="100,80 160,60 170,130 100,190" fill="url(#cg1)" opacity="0.4"/>
      <polygon points="100,80 40,60 30,130 100,190" fill="white" opacity="0.15"/>
      <!-- Center line -->
      <line x1="100" y1="10" x2="100" y2="190" stroke="white" stroke-width="0.5" opacity="0.5"/>
      <!-- Sparkles -->
      <circle cx="100" cy="80" r="4" fill="white" opacity="0.9" filter="url(#glow)"/>
      <circle cx="155" cy="65" r="2" fill="#f4a7c3" opacity="0.8"/>
      <circle cx="45" cy="65" r="2" fill="#c4b5f4" opacity="0.8"/>
      <circle cx="100" cy="185" r="2" fill="#a8e6cf" opacity="0.8"/>
      <!-- Outer glow ring -->
      <circle cx="100" cy="100" r="90" fill="none" stroke="url(#cg1)" stroke-width="0.5" opacity="0.4" stroke-dasharray="4 8"/>
    </svg>
  </div>

  <h1 class="hero-title">Vexa</h1>
  <div class="hero-sub">Crystalline Intelligence Substrate</div>
  <p class="hero-desc">
    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.
  </p>
  <div class="hero-pills">
    <span class="pill p1">✦ Glyph Lattice</span>
    <span class="pill p2">◈ Crystallization Engine</span>
    <span class="pill p3">⬡ Lume Language</span>
    <span class="pill p4">⟳ Real-Time Learning</span>
    <span class="pill p5">⬡ Ollama Compatible</span>
    <span class="pill p1">✦ Fully Open Source</span>
    <span class="pill p2">◈ No GPU Required</span>
    <span class="pill p3">⬡ Any Laptop</span>
  </div>
  <div class="scroll-down">scroll to explore ↓</div>
</div>

<!-- ══ SECTION 1 — GLYPH ══ -->
<div class="sec" id="s1">
  <div class="sec-label">// 01</div>
  <div class="sec-title">The <em>Glyph</em></div>
  <div class="sec-rule"></div>
  <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>

  <div class="anatomy-grid">
    <div>
      <div class="glyph-canvas-wrap">
        <div class="gc-label">LIVE GLYPH NETWORK</div>
        <canvas id="glyphCanvas"></canvas>
      </div>
    </div>
    <div class="fields-list">
      <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>
      <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>
      <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>
      <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>
      <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>
      <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>
      <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>
      <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>
      <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>
      <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>
    </div>
  </div>

  <div style="margin-top:32px;">
    <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>
    <div class="edges-wrap">
      <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>
      <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>
      <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>
      <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>
      <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>
      <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>
      <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>
      <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>
      <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>
      <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>
    </div>
  </div>
</div>

<!-- ══ SECTION 2 — CRYSTALLIZATION ══ -->
<div class="sec" id="s2">
  <div class="sec-label">// 02</div>
  <div class="sec-title"><em>Crystallization</em> Replaces Training</div>
  <div class="sec-rule"></div>
  <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>

  <div class="cryst-grid">
    <div class="phase-list">
      <div class="phase-card ph1">
        <div class="phase-left"><div class="pl-num">01</div><div class="pl-time">0–2 MIN</div></div>
        <div class="phase-right">
          <div class="pr-name">Ingestion</div>
          <div class="pr-desc">Raw knowledge consumed — web pages, PDFs, code, JSON, RSS. Parsed into Concept Fragments across all CPU cores in parallel.</div>
        </div>
      </div>
      <div class="phase-card ph2">
        <div class="phase-left"><div class="pl-num">02</div><div class="pl-time">2–4 MIN</div></div>
        <div class="phase-right">
          <div class="pr-name">Concept Extraction</div>
          <div class="pr-desc">NLP pipeline extracts typed relation triples. Named entities, causal phrases, temporal expressions, dependency parsing.</div>
        </div>
      </div>
      <div class="phase-card ph3">
        <div class="phase-left"><div class="pl-num">03</div><div class="pl-time">4–6 MIN</div></div>
        <div class="phase-right">
          <div class="pr-name">Glyph Formation</div>
          <div class="pr-desc">Each concept becomes a Glyph via a tiny frozen encoder. Duplicates merged. Confidence scored. Sources attached permanently.</div>
        </div>
      </div>
      <div class="phase-card ph4">
        <div class="phase-left"><div class="pl-num">04</div><div class="pl-time">6–8 MIN</div></div>
        <div class="phase-right">
          <div class="pr-name">Lattice Integration</div>
          <div class="pr-desc">New Glyphs woven into the graph. Edges inferred. Conflicts detected — the Arbiter fires and resolves by evidence and recency.</div>
        </div>
      </div>
      <div class="phase-card ph5">
        <div class="phase-left"><div class="pl-num">05</div><div class="pl-time">8–10 MIN</div></div>
        <div class="phase-right">
          <div class="pr-name">Resonance Calibration</div>
          <div class="pr-desc">Tension and resonance tuned across all new Glyphs. Cluster coherence checked. Lattice integrity verified. Complete. ✦</div>
        </div>
      </div>
    </div>

    <div class="crystal-timer">
      <div class="ct-gem">💎</div>
      <div class="ct-title">Crystallization Timer</div>
      <div class="ct-time" id="timerDisp">10:00</div>
      <div class="ct-unit">MINUTES · ANY LAPTOP</div>
      <div class="ct-bars">
        <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>
        <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>
        <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>
        <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>
        <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>
      </div>
      <button class="ct-btn" id="cBtn" onclick="runCryst()">✦ Start Crystallization</button>
      <div class="ct-stats">
        <div class="cs-row"><span class="cs-k">GPU Required</span><span class="cs-v">None — CPU only</span></div>
        <div class="cs-row"><span class="cs-k">Glyphs Formed</span><span class="cs-v" id="gStat">—</span></div>
        <div class="cs-row"><span class="cs-k">Edges Created</span><span class="cs-v" id="eStat">—</span></div>
        <div class="cs-row"><span class="cs-k">Conflicts</span><span class="cs-v" id="cStat">—</span></div>
      </div>
    </div>
  </div>
</div>

<!-- ══ SECTION 3 — LATTICE ══ -->
<div class="sec" id="s3">
  <div class="sec-label">// 03</div>
  <div class="sec-title">The Glyph <em>Lattice</em></div>
  <div class="sec-rule"></div>
  <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>
  <div class="lattice-wrap">
    <div>
      <div class="lattice-canvas-box">
        <div class="lc-tag">LIVE LATTICE</div>
        <canvas id="latticeCanvas"></canvas>
        <div class="lc-legend">
          <div class="ll"><div class="ll-dot" style="background:var(--pink)"></div>Core concept</div>
          <div class="ll"><div class="ll-dot" style="background:var(--lavender)"></div>Relation node</div>
          <div class="ll"><div class="ll-dot" style="background:var(--mint)"></div>Freshly crystallized</div>
          <div class="ll"><div class="ll-dot" style="background:var(--peach)"></div>Conflict flagged</div>
          <div class="ll"><div class="ll-dot" style="background:rgba(150,140,160,0.4)"></div>Decaying</div>
        </div>
      </div>
    </div>
    <div>
      <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>
      <div class="density-cards">
        <div class="dc header"><span>TIER</span><span>GLYPHS</span><span>RAM</span><span>EQUIV.</span></div>
        <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>
        <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>
        <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>
        <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>
        <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>
      </div>
      <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;">
        ✦ Same crystallization process at every tier. Same Lume code. Same architecture. Just more Glyphs.
      </div>
    </div>
  </div>
</div>

<!-- ══ SECTION 4 — LUME ══ -->
<div class="sec" id="s4">
  <div class="sec-label">// 04</div>
  <div class="sec-title">The <em>Lume</em> Language</div>
  <div class="sec-rule"></div>
  <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>
  <div class="lume-grid">
    <div class="lume-box">
      <div class="lume-tabbar">
        <div class="ltab on" onclick="showLume('glyph',this)">glyph</div>
        <div class="ltab" onclick="showLume('ask',this)">ask</div>
        <div class="ltab" onclick="showLume('agent',this)">agent</div>
        <div class="ltab" onclick="showLume('flow',this)">flow</div>
        <div class="ltab" onclick="showLume('watch',this)">watch</div>
      </div>
      <div class="lume-code">
        <div class="lc-b on" id="lc-glyph">
<span class="lcm">// Define a concept directly in the lattice</span><br>
<span class="lkw">glyph</span> <span class="lid">QuantumEntanglement</span> {<br>
&nbsp;&nbsp;<span class="lprop">IS_A</span>: <span class="lid">QuantumPhenomenon</span><br>
&nbsp;&nbsp;<span class="lprop">HAS_PROPERTY</span>: <span class="lstr">"non-local correlation"</span><br>
&nbsp;&nbsp;<span class="lprop">HAS_PROPERTY</span>: <span class="lstr">"instantaneous state sharing"</span><br>
&nbsp;&nbsp;<span class="lprop">REQUIRES</span>: <span class="lid">QuantumSuperposition</span><br>
&nbsp;&nbsp;<span class="lprop">CONTRADICTS</span>: <span class="lid">LocalRealism</span><br>
&nbsp;&nbsp;<span class="lprop">confidence</span>: <span class="lnum">0.98</span><br>
&nbsp;&nbsp;<span class="lprop">decay</span>: <span class="lkw">none</span> <span class="lcm">// physics never changes</span><br>
}
        </div>
        <div class="lc-b" id="lc-ask">
<span class="lcm">// Traverse the Glyph Lattice to answer</span><br>
<span class="lkw">ask</span> <span class="lstr">"What causes inflation?"</span> {<br>
&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>
&nbsp;&nbsp;<span class="lprop">confidence</span>: <span class="lnum">0.7</span>&nbsp;&nbsp;&nbsp;<span class="lcm">// min threshold</span><br>
&nbsp;&nbsp;<span class="lprop">sources</span>: <span class="lkw">true</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="lcm">// show refs</span><br>
&nbsp;&nbsp;<span class="lprop">recency</span>: <span class="lstr">"6h"</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="lcm">// prefer fresh</span><br>
}<br><br>
<span class="lcm">// Inspect any Glyph</span><br>
<span class="lkw">inspect</span> <span class="lkw">glyph</span> <span class="lstr">"machine learning"</span> {<br>
&nbsp;&nbsp;<span class="lprop">show</span>: <span class="lid">relations</span><br>
&nbsp;&nbsp;<span class="lprop">show</span>: <span class="lid">confidence</span><br>
&nbsp;&nbsp;<span class="lprop">show</span>: <span class="lid">sources</span><br>
}
        </div>
        <div class="lc-b" id="lc-agent">
<span class="lcm">// Agentic task — lattice IS the memory</span><br>
<span class="lkw">agent</span> <span class="lid">ResearchAssistant</span> {<br>
&nbsp;&nbsp;<span class="lprop">goal</span>: <span class="lstr">"Summarize fusion breakthroughs"</span><br>
&nbsp;&nbsp;<span class="lprop">tools</span>: [<span class="lid">web_search</span>, <span class="lid">glyph_writer</span>]<br>
&nbsp;&nbsp;<span class="lprop">crystallize_findings</span>: <span class="lkw">true</span><br>
&nbsp;&nbsp;<span class="lprop">recency</span>: <span class="lstr">"7d"</span><br>
&nbsp;&nbsp;<span class="lprop">report</span>: <span class="lid">markdown</span><br>
}
        </div>
        <div class="lc-b" id="lc-flow">
<span class="lcm">// Chain operations with |&gt;</span><br>
<span class="lkw">flow</span> <span class="lid">MarketWatch</span> {<br>
&nbsp;&nbsp;<span class="lkw">crystallize</span> <span class="lkw">from</span> <span class="lid">web</span> {<br>
&nbsp;&nbsp;&nbsp;&nbsp;<span class="lprop">topic</span>: <span class="lstr">"AI stocks"</span><br>
&nbsp;&nbsp;&nbsp;&nbsp;<span class="lprop">recency</span>: <span class="lstr">"1h"</span><br>
&nbsp;&nbsp;}<br>
&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>
&nbsp;&nbsp;|&gt; <span class="lkw">agent</span> <span class="lid">Summarizer</span> {}<br>
&nbsp;&nbsp;|&gt; <span class="lkw">output</span> <span class="lid">markdown</span><br>
}
        </div>
        <div class="lc-b" id="lc-watch">
<span class="lcm">// Reactive — fires when lattice shifts</span><br>
<span class="lkw">watch</span> {<br>
&nbsp;&nbsp;<span class="lprop">when</span>: <span class="lkw">glyph</span> changes <span class="lprop">near</span> <span class="lstr">"bitcoin"</span><br>
&nbsp;&nbsp;<span class="lprop">confidence_delta</span>: <span class="lnum">0.2</span><br>
&nbsp;&nbsp;<span class="lprop">trigger</span>: <span class="lkw">agent</span> <span class="lid">AlertBot</span> {<br>
&nbsp;&nbsp;&nbsp;&nbsp;<span class="lprop">message</span>: <span class="lstr">"Crypto landscape shifted"</span><br>
&nbsp;&nbsp;}<br>
}
        </div>
      </div>
    </div>
    <div class="lume-explain">
      <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>
      <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>
      <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>
      <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>
      <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>
      <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>
      <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>
    </div>
  </div>
</div>

<!-- ══ SECTION 5 — THREADS ══ -->
<div class="sec" id="s5">
  <div class="sec-label">// 05</div>
  <div class="sec-title">Always <em>Learning</em></div>
  <div class="sec-rule"></div>
  <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>
  <div class="threads-grid">
    <div class="thread-card tc1"><div class="tc-pulse tcp1"></div>
      <div class="tc-icon">🌐</div>
      <div class="tc-name">Web Crystallizer</div>
      <div class="tc-desc">Crawls the live web continuously. Priority queue: trending topics first. Auto-integrates findings into the lattice in real time.</div>
      <div class="tc-stats">
        <div class="ts"><span class="ts-k">Rate</span><span class="ts-v">~10K Glyphs/hour</span></div>
        <div class="ts"><span class="ts-k">News decay</span><span class="ts-v">24–72 hours</span></div>
        <div class="ts"><span class="ts-k">Science decay</span><span class="ts-v">Years–decades</span></div>
      </div>
    </div>
    <div class="thread-card tc2"><div class="tc-pulse tcp2"></div>
      <div class="tc-icon">💬</div>
      <div class="tc-name">Interaction Crystallizer</div>
      <div class="tc-desc">Every conversation crystallizes new knowledge. User corrections instantly adjust confidence. Opt-in shared learning across instances.</div>
      <div class="tc-stats">
        <div class="ts"><span class="ts-k">Trigger</span><span class="ts-v">Every novel query</span></div>
        <div class="ts"><span class="ts-k">Correction</span><span class="ts-v">Instant ±0.15 conf</span></div>
        <div class="ts"><span class="ts-k">Privacy</span><span class="ts-v">Ephemeral mode</span></div>
      </div>
    </div>
    <div class="thread-card tc3"><div class="tc-pulse tcp3"></div>
      <div class="tc-icon">⏳</div>
      <div class="tc-name">Decay Monitor</div>
      <div class="tc-desc">Scans for stale Glyphs every 15 minutes. Prunes below threshold. Fires the Arbiter on contradictions. Daily defragmentation.</div>
      <div class="tc-stats">
        <div class="ts"><span class="ts-k">Scan interval</span><span class="ts-v">15 minutes</span></div>
        <div class="ts"><span class="ts-k">Prune floor</span><span class="ts-v">confidence &lt; 0.1</span></div>
        <div class="ts"><span class="ts-k">Defrag</span><span class="ts-v">Daily</span></div>
      </div>
    </div>
  </div>
</div>

<!-- ══ SECTION 6 — COMPARE ══ -->
<div class="sec" id="s6">
  <div class="sec-label">// 06</div>
  <div class="sec-title">Vexa <em>vs</em> Every LLM</div>
  <div class="sec-rule"></div>
  <table class="compare-table">
    <thead><tr><th>PROPERTY</th><th>EVERY LLM EVER BUILT</th><th>MATRIX VEXA</th></tr></thead>
    <tbody>
      <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>
      <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>
      <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>
      <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>
      <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>
      <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>
      <tr><td class="td-prop">Uncertainty</td><td class="td-llm">Simulated / hallucinated</td><td class="td-vexa">✦ Structurally real — Glyph.confidence</td></tr>
      <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>
      <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>
    </tbody>
  </table>
</div>

<!-- ══ SECTION 7 — BRIDGE ══ -->
<div class="sec" id="s7">
  <div class="sec-label">// 07</div>
  <div class="sec-title">The Vexa <em>Bridge</em></div>
  <div class="sec-rule"></div>
  <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>
  <div class="bridge-grid">
    <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>
    <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>
    <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>
    <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>
    <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>
    <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>
  </div>
  <div class="bridge-flow">
    <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>
    <div class="bf-arr">↓</div>
    <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>
    <div class="bf-arr">↓</div>
    <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>
    <div class="bf-arr">↓</div>
    <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>
    <div class="bf-arr">↓</div>
    <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>
    <div class="bf-arr">↓</div>
    <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>
  </div>
</div>

<!-- ══ SECTION 8 — HF PLAN ══ -->
<div class="sec" id="s8">
  <div class="sec-label">// 08</div>
  <div class="sec-title">Open Source <em>Release</em></div>
  <div class="sec-rule"></div>
  <div class="hf-list">
    <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>
    <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>
    <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>
    <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>
    <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>
  </div>
</div>

<div class="footer">
  <div class="footer-l">MATRIX.CORP — VEXA V1<br>CRYSTALLINE INTELLIGENCE · 🔴 PLANNED<br>FULLY OPEN SOURCE</div>
  <div class="footer-r">Matrix Vexa ✦</div>
</div>

</div><!-- /wrap -->

<script>
// ── PASTEL CRYSTAL RAIN ──
const rain = document.getElementById('rainCanvas');
const rCtx = rain.getContext('2d');
let RW, RH;
function resizeRain(){RW=rain.width=window.innerWidth;RH=rain.height=window.innerHeight;}
resizeRain();window.addEventListener('resize',resizeRain);

const PASTEL = ['#f4a7c3','#c4b5f4','#a8e6cf','#ffcba4','#a8d8ea','#f9c6cf','#f7d794','#dbb8f5'];
const crystals = [];
for(let i=0;i<60;i++){
  crystals.push({
    x:Math.random()*window.innerWidth,
    y:Math.random()*window.innerHeight-window.innerHeight,
    size:Math.random()*18+5,
    speed:Math.random()*0.8+0.3,
    rotation:Math.random()*Math.PI*2,
    rotSpeed:(Math.random()-0.5)*0.02,
    color:PASTEL[Math.floor(Math.random()*PASTEL.length)],
    alpha:Math.random()*0.5+0.1,
    type:Math.floor(Math.random()*3) // 0=diamond 1=hexagon 2=star
  });
}

function drawCrystal(ctx, x, y, size, rotation, color, alpha, type){
  ctx.save();ctx.translate(x,y);ctx.rotate(rotation);ctx.globalAlpha=alpha;
  ctx.strokeStyle=color;ctx.lineWidth=1;ctx.fillStyle=color+'33';
  ctx.beginPath();
  if(type===0){
    // Diamond
    ctx.moveTo(0,-size);ctx.lineTo(size*0.5,0);
    ctx.lineTo(0,size);ctx.lineTo(-size*0.5,0);ctx.closePath();
  } else if(type===1){
    // Hexagon
    for(let i=0;i<6;i++){
      const a=i*Math.PI/3;
      i===0?ctx.moveTo(Math.cos(a)*size,Math.sin(a)*size):ctx.lineTo(Math.cos(a)*size,Math.sin(a)*size);
    }ctx.closePath();
  } else {
    // 4-point star
    for(let i=0;i<8;i++){
      const a=i*Math.PI/4;
      const r=i%2===0?size:size*0.4;
      i===0?ctx.moveTo(Math.cos(a)*r,Math.sin(a)*r):ctx.lineTo(Math.cos(a)*r,Math.sin(a)*r);
    }ctx.closePath();
  }
  ctx.fill();ctx.stroke();
  // Sparkle
  ctx.globalAlpha=alpha*0.8;
  ctx.fillStyle='white';
  ctx.beginPath();ctx.arc(0,-size*0.3,size*0.12,0,Math.PI*2);ctx.fill();
  ctx.restore();
}

function animateRain(){
  rCtx.clearRect(0,0,RW,RH);
  crystals.forEach(c=>{
    c.y+=c.speed;c.rotation+=c.rotSpeed;
    if(c.y>RH+c.size){c.y=-c.size*2;c.x=Math.random()*RW;}
    drawCrystal(rCtx,c.x,c.y,c.size,c.rotation,c.color,c.alpha,c.type);
  });
  requestAnimationFrame(animateRain);
}
animateRain();

// ── GLYPH CANVAS ──
const gc=document.getElementById('glyphCanvas');
gc.width=gc.offsetWidth*2;gc.height=gc.offsetHeight*2;
const gCtx=gc.getContext('2d');gCtx.scale(2,2);
const GW=gc.offsetWidth/2,GH=gc.offsetHeight/2;

const glyphs=[];
const GCOLORS=['#f4a7c3','#c4b5f4','#a8e6cf','#ffcba4','#a8d8ea','#dbb8f5'];
const LABELS=['CONCEPT','CAUSE','ENTITY','FACT','PLACE','TIME','EFFECT','BELIEF'];
for(let i=0;i<16;i++){
  glyphs.push({
    x:40+Math.random()*(GW-80),y:40+Math.random()*(GH-80),
    r:Math.random()*10+5,
    color:GCOLORS[Math.floor(Math.random()*GCOLORS.length)],
    vx:(Math.random()-0.5)*0.4,vy:(Math.random()-0.5)*0.4,
    pulse:Math.random()*Math.PI*2,
    links:[],label:LABELS[Math.floor(Math.random()*LABELS.length)]
  });
}
glyphs.forEach((g,i)=>{
  const n=Math.floor(Math.random()*3)+1;
  for(let j=0;j<n;j++){
    const t=Math.floor(Math.random()*glyphs.length);
    if(t!==i)g.links.push(t);
  }
});
let hoverG=-1;
gc.addEventListener('mousemove',e=>{
  const r=gc.getBoundingClientRect();
  const mx=(e.clientX-r.left)*(gc.width/r.width)/2;
  const my=(e.clientY-r.top)*(gc.height/r.height)/2;
  hoverG=-1;
  glyphs.forEach((g,i)=>{if(Math.hypot(g.x-mx,g.y-my)<g.r+8)hoverG=i;});
});

function animateGlyphs(){
  gCtx.fillStyle='rgba(255,252,248,0.15)';
  gCtx.fillRect(0,0,GW,GH);
  glyphs.forEach((g,i)=>{
    g.links.forEach(j=>{
      const t=glyphs[j];
      const hot=i===hoverG||j===hoverG;
      gCtx.beginPath();gCtx.moveTo(g.x,g.y);gCtx.lineTo(t.x,t.y);
      gCtx.strokeStyle=g.color;
      gCtx.globalAlpha=hot?0.5:0.12;
      gCtx.lineWidth=hot?1.5:0.7;
      gCtx.stroke();gCtx.globalAlpha=1;
    });
  });
  glyphs.forEach((g,i)=>{
    g.pulse+=0.035;g.x+=g.vx;g.y+=g.vy;
    if(g.x<g.r||g.x>GW-g.r)g.vx*=-1;
    if(g.y<g.r||g.y>GH-g.r)g.vy*=-1;
    const pr=g.r+Math.sin(g.pulse)*2;
    const hot=i===hoverG;
    // Glow
    const grad=gCtx.createRadialGradient(g.x,g.y,0,g.x,g.y,pr*3);
    grad.addColorStop(0,g.color+(hot?'80':'30'));grad.addColorStop(1,'transparent');
    gCtx.beginPath();gCtx.arc(g.x,g.y,pr*3,0,Math.PI*2);
    gCtx.fillStyle=grad;gCtx.fill();
    // Diamond
    gCtx.save();gCtx.translate(g.x,g.y);gCtx.rotate(Math.PI/4);
    gCtx.beginPath();gCtx.rect(-pr,-pr,pr*2,pr*2);
    gCtx.fillStyle=g.color+(hot?'50':'20');
    gCtx.strokeStyle=g.color;gCtx.lineWidth=hot?2:1;
    gCtx.globalAlpha=hot?1:0.7;
    gCtx.fill();gCtx.stroke();gCtx.restore();gCtx.globalAlpha=1;
    if(hot){
      gCtx.font='8px DM Sans';gCtx.fillStyle=g.color;
      gCtx.textAlign='center';gCtx.fillText(g.label,g.x,g.y-pr-6);
    }
  });
  requestAnimationFrame(animateGlyphs);
}
animateGlyphs();

// ── LATTICE CANVAS ──
const lc=document.getElementById('latticeCanvas');
lc.width=lc.offsetWidth*2;lc.height=lc.offsetHeight*2;
const lCtx=lc.getContext('2d');lCtx.scale(2,2);
const LW=lc.offsetWidth/2,LH=lc.offsetHeight/2;

const LTYPES=[
  {color:'#f4a7c3'},{color:'#c4b5f4'},{color:'#a8e6cf'},
  {color:'#ffcba4'},{color:'rgba(180,165,185,0.5)'}
];
const lNodes=[];
for(let i=0;i<55;i++){
  const t=Math.random()<0.35?0:Math.random()<0.3?1:Math.random()<0.1?3:Math.random()<0.1?4:2;
  lNodes.push({
    x:30+Math.random()*(LW-60),y:30+Math.random()*(LH-60),
    r:t===0?6:t===3?5:3,type:t,
    vx:(Math.random()-0.5)*0.25,vy:(Math.random()-0.5)*0.25,
    pulse:Math.random()*Math.PI*2,links:[]
  });
}
lNodes.forEach((n,i)=>{
  const k=Math.floor(Math.random()*4)+1;
  for(let j=0;j<k;j++){
    const t=Math.floor(Math.random()*lNodes.length);
    if(t!==i)n.links.push(t);
  }
});

// Travelling packet
let pkt={prog:0,from:0,to:3,spd:0.007};

function animateLattice(){
  lCtx.fillStyle='rgba(255,252,248,0.1)';lCtx.fillRect(0,0,LW,LH);
  lNodes.forEach((n,i)=>{
    n.links.forEach(j=>{
      const t=lNodes[j];
      lCtx.beginPath();lCtx.moveTo(n.x,n.y);lCtx.lineTo(t.x,t.y);
      lCtx.strokeStyle=LTYPES[n.type].color;
      lCtx.globalAlpha=0.1;lCtx.lineWidth=0.6;lCtx.stroke();lCtx.globalAlpha=1;
    });
  });
  // Packet
  pkt.prog+=pkt.spd;
  if(pkt.prog>=1){pkt.prog=0;pkt.from=pkt.to;pkt.to=Math.floor(Math.random()*lNodes.length);}
  const pf=lNodes[pkt.from],pt=lNodes[pkt.to];
  const px=pf.x+(pt.x-pf.x)*pkt.prog,py=pf.y+(pt.y-pf.y)*pkt.prog;
  const pg=lCtx.createRadialGradient(px,py,0,px,py,10);
  pg.addColorStop(0,'rgba(244,167,195,0.9)');pg.addColorStop(1,'transparent');
  lCtx.beginPath();lCtx.arc(px,py,10,0,Math.PI*2);lCtx.fillStyle=pg;lCtx.fill();

  lNodes.forEach(n=>{
    n.pulse+=0.025;n.x+=n.vx;n.y+=n.vy;
    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;
    const pr=n.r+Math.sin(n.pulse)*1.5;
    const c=LTYPES[n.type].color;
    const g=lCtx.createRadialGradient(n.x,n.y,0,n.x,n.y,pr*2.5);
    g.addColorStop(0,c.replace('rgba(','').replace(')','').split(',').length>3?c:c+'60');
    g.addColorStop(1,'transparent');
    lCtx.beginPath();lCtx.arc(n.x,n.y,pr*2.5,0,Math.PI*2);lCtx.fillStyle=g;lCtx.fill();
    lCtx.beginPath();lCtx.arc(n.x,n.y,pr,0,Math.PI*2);
    lCtx.fillStyle=c+'30';lCtx.strokeStyle=c;lCtx.lineWidth=1;lCtx.fill();lCtx.stroke();
  });
  requestAnimationFrame(animateLattice);
}
animateLattice();

// ── CRYSTALLIZATION TIMER ──
let cRunning=false,cTime=0,cIv;
const TOTAL=600;

function runCryst(){
  if(cRunning)return;
  cRunning=true;cTime=0;
  document.getElementById('cBtn').textContent='✦ Crystallizing...';
  document.getElementById('timerDisp').style.background='linear-gradient(135deg,#f4a7c3,#c4b5f4)';
  document.getElementById('timerDisp').style.webkitBackgroundClip='text';
  document.getElementById('timerDisp').style.webkitTextFillColor='transparent';

  cIv=setInterval(()=>{
    cTime++;
    const pct=cTime/TOTAL;
    const m=Math.floor((TOTAL-cTime)/60),s=(TOTAL-cTime)%60;
    document.getElementById('timerDisp').textContent=`${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`;

    const phases=[
      {b:'b1',v:'p1v',s:0,e:0.2},
      {b:'b2',v:'p2v',s:0.2,e:0.4},
      {b:'b3',v:'p3v',s:0.4,e:0.6},
      {b:'b4',v:'p4v',s:0.6,e:0.8},
      {b:'b5',v:'p5v',s:0.8,e:1.0},
    ];
    phases.forEach(p=>{
      const local=Math.max(0,Math.min(1,(pct-p.s)/(p.e-p.s)));
      document.getElementById(p.b).style.width=Math.round(local*100)+'%';
      document.getElementById(p.v).textContent=Math.round(local*100)+'%';
    });

    const g=Math.floor(pct*10000000);
    document.getElementById('gStat').textContent=g.toLocaleString();
    document.getElementById('eStat').textContent=Math.floor(g*2.3).toLocaleString();
    document.getElementById('cStat').textContent=Math.floor(pct*47);

    if(cTime>=TOTAL){
      clearInterval(cIv);cRunning=false;
      document.getElementById('cBtn').textContent='✦ Complete!';
      document.getElementById('timerDisp').textContent='00:00';
    }
  },30);
}

// ── LUME TABS ──
function showLume(tab,el){
  document.querySelectorAll('.lc-b').forEach(b=>b.classList.remove('on'));
  document.querySelectorAll('.ltab').forEach(t=>t.classList.remove('on'));
  document.getElementById('lc-'+tab).classList.add('on');
  el.classList.add('on');
}

// ── SCROLL REVEALS ──
const obs=new IntersectionObserver(entries=>{
  entries.forEach(e=>{if(e.isIntersecting)e.target.classList.add('vis');});
},{threshold:0.05});
document.querySelectorAll('.sec').forEach((s,i)=>{s.style.transitionDelay=(i*0.04)+'s';obs.observe(s);});

// ── MOUSE SPARKLE TRAIL ──
document.addEventListener('mousemove', e=>{
  if(Math.random()>0.7) return;
  const s=document.createElement('div');
  s.style.cssText=`position:fixed;left:${e.clientX}px;top:${e.clientY}px;
    width:6px;height:6px;border-radius:50%;pointer-events:none;z-index:9999;
    background:${PASTEL[Math.floor(Math.random()*PASTEL.length)]};
    transform:translate(-50%,-50%) scale(1);
    transition:all 0.6s ease;opacity:0.8;`;
  document.body.appendChild(s);
  requestAnimationFrame(()=>{
    s.style.transform=`translate(${(Math.random()-0.5)*40-3}px,${-30+Math.random()*-20}px) scale(0)`;
    s.style.opacity='0';
  });
  setTimeout(()=>s.remove(),600);
});
</script>
</body>
</html>