Spaces:

Matrix-Corp
/

Matrix-Voxel

Running

File size: 69,515 Bytes

cb8e78b

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Matrix Voxel — Architecture Spec</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&family=Barlow+Condensed:wght@300;400;600;700;900&display=swap" rel="stylesheet">
<style>
:root {
  --bg: #06080a;
  --bg2: #090c10;
  --panel: #0b1018;
  --border: #14202e;
  --border2: #1c2d40;
  --amber: #f5a623;
  --amber2: #ffcc5c;
  --amber-dim: rgba(245,166,35,0.08);
  --blue: #1e90ff;
  --blue-dim: rgba(30,144,255,0.08);
  --teal: #00d4aa;
  --red: #ff4757;
  --green: #2ed573;
  --purple: #a855f7;
  --text: #8fa8c0;
  --text-bright: #c8dce8;
  --white: #eaf2f8;
  --atlas: #f5a623;
  --forge: #ff6b35;
  --cast: #00d4aa;
  --lens: #7b8fff;
  --prime: #a855f7;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  font-family: 'DM Mono', monospace;
  color: var(--text);
  overflow-x: hidden;
  cursor: crosshair;
}

/* ── Blueprint grid bg ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(245,166,35,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,166,35,0.025) 1px, transparent 1px),
    linear-gradient(rgba(245,166,35,0.008) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,166,35,0.008) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
  pointer-events: none;
  z-index: 0;
}

/* ── Scanline overlay ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.08) 2px,
    rgba(0,0,0,0.08) 4px
  );
  pointer-events: none;
  z-index: 0;
}

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

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

/* Rotating wireframe cube */
.cube-wrap {
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  width: 520px;
  height: 520px;
  opacity: 0.18;
}

.cube-svg {
  width: 100%;
  height: 100%;
  animation: rotateCube 20s linear infinite;
  transform-origin: center center;
}

@keyframes rotateCube {
  0%   { transform: rotateY(0deg) rotateX(15deg); }
  100% { transform: rotateY(360deg) rotateX(15deg); }
}

.cube-svg line {
  stroke: var(--amber);
  stroke-width: 1;
}

.hero-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--amber);
  letter-spacing: 6px;
  text-transform: uppercase;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero-eyebrow::before {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--amber);
}

.hero-title {
  font-family: 'Orbitron', monospace;
  font-size: clamp(56px, 8vw, 112px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -2px;
  margin-bottom: 8px;
}

.hero-title .matrix {
  color: var(--border2);
  display: block;
  font-size: 0.45em;
  letter-spacing: 8px;
  font-weight: 400;
  margin-bottom: 4px;
}

.hero-title .voxel {
  background: linear-gradient(135deg, var(--amber) 0%, var(--amber2) 50%, var(--forge) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
  filter: drop-shadow(0 0 40px rgba(245,166,35,0.3));
}

.hero-sub {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  color: var(--text);
  letter-spacing: 3px;
  margin-bottom: 48px;
  font-weight: 300;
  text-transform: uppercase;
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 56px;
  max-width: 700px;
}

.tag {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 2px;
  padding: 5px 14px;
  border: 1px solid var(--border2);
  color: var(--text);
  text-transform: uppercase;
}

.tag.a { border-color: var(--amber); color: var(--amber); background: var(--amber-dim); }
.tag.b { border-color: var(--blue); color: var(--blue); background: var(--blue-dim); }
.tag.g { border-color: var(--green); color: var(--green); background: rgba(46,213,115,0.06); }
.tag.p { border-color: var(--purple); color: var(--purple); background: rgba(168,85,247,0.06); }

/* Scroll indicator */
.scroll-hint {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 9px;
  color: var(--border2);
  letter-spacing: 3px;
  animation: pulse 2s ease-in-out infinite;
}
.scroll-hint::after {
  content: '↓';
  font-size: 14px;
  animation: bounce 1.5s ease-in-out infinite;
}
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }
@keyframes pulse { 0%,100%{opacity:0.4} 50%{opacity:1} }

/* Hero bottom rule */
.hero-rule {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--amber), var(--border), transparent);
  margin-top: 60px;
}

/* ─────────────── SECTION SYSTEM ─────────────── */
.section {
  margin-top: 100px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.section.visible {
  opacity: 1;
  transform: translateY(0);
}

.section-header {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 36px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.section-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 80px;
  height: 1px;
  background: var(--amber);
}

.section-num {
  font-family: 'Orbitron', monospace;
  font-size: 11px;
  color: var(--border2);
  letter-spacing: 3px;
}

.section-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ─────────────── MODEL FAMILY TABLE ─────────────── */
.model-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
}

.model-card {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 0;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, border-color 0.2s;
}
.model-card:hover {
  transform: translateY(-4px);
  z-index: 2;
}

.model-card-top {
  height: 4px;
}
.mc-atlas .model-card-top { background: var(--atlas); }
.mc-forge .model-card-top { background: var(--forge); }
.mc-cast  .model-card-top { background: var(--cast); }
.mc-lens  .model-card-top { background: var(--lens); }
.mc-prime .model-card-top { background: var(--prime); }

.mc-atlas:hover { border-color: var(--atlas); }
.mc-forge:hover { border-color: var(--forge); }
.mc-cast:hover  { border-color: var(--cast); }
.mc-lens:hover  { border-color: var(--lens); }
.mc-prime:hover { border-color: var(--prime); }

.model-card-body { padding: 20px; }

.mc-icon { font-size: 28px; margin-bottom: 12px; }

.mc-name {
  font-family: 'Orbitron', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 4px;
  letter-spacing: 1px;
}
.mc-atlas .mc-name { color: var(--atlas); }
.mc-forge .mc-name { color: var(--forge); }
.mc-cast  .mc-name { color: var(--cast); }
.mc-lens  .mc-name { color: var(--lens); }
.mc-prime .mc-name { color: var(--prime); }

.mc-task {
  font-size: 10px;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 14px;
}

.mc-formats {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mc-fmt {
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--text);
  padding: 3px 8px;
  background: rgba(255,255,255,0.03);
  border-left: 2px solid var(--border2);
}
.mc-atlas .mc-fmt { border-left-color: rgba(245,166,35,0.4); }
.mc-forge .mc-fmt { border-left-color: rgba(255,107,53,0.4); }
.mc-cast  .mc-fmt { border-left-color: rgba(0,212,170,0.4); }
.mc-lens  .mc-fmt { border-left-color: rgba(123,143,255,0.4); }
.mc-prime .mc-fmt { border-left-color: rgba(168,85,247,0.4); }

.mc-badges {
  display: flex;
  gap: 5px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.mc-badge {
  font-size: 8px;
  letter-spacing: 1px;
  padding: 2px 7px;
  border: 1px solid;
  text-transform: uppercase;
}
.badge-open { border-color: var(--green); color: var(--green); }
.badge-closed { border-color: var(--purple); color: var(--purple); }
.badge-planned { border-color: var(--amber); color: var(--amber); }

/* ─────────────── INPUT MODALITIES ─────────────── */
.input-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
}

.input-card {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 24px 20px;
  position: relative;
  transition: border-color 0.2s;
}
.input-card:hover { border-color: var(--amber); }

.input-icon { font-size: 32px; margin-bottom: 14px; }
.input-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 1px;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.input-enc {
  font-size: 9px;
  color: var(--amber);
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.input-desc {
  font-size: 10px;
  color: var(--text);
  line-height: 1.7;
}

/* Arrow between inputs */
.input-grid-wrap {
  position: relative;
}
.fusion-arrow {
  text-align: center;
  padding: 20px 0;
  font-size: 11px;
  color: var(--amber);
  letter-spacing: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.fusion-arrow::before,
.fusion-arrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--amber));
}
.fusion-arrow::after {
  background: linear-gradient(90deg, var(--amber), transparent);
}

.fusion-box {
  background: linear-gradient(135deg, rgba(245,166,35,0.1), rgba(255,107,53,0.05));
  border: 1px solid var(--amber);
  padding: 20px 28px;
  text-align: center;
  position: relative;
}
.fusion-box::before,
.fusion-box::after {
  content: '◆';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--amber);
  font-size: 10px;
}
.fusion-box::before { left: -6px; }
.fusion-box::after { right: -6px; }
.fusion-label {
  font-family: 'Orbitron', monospace;
  font-size: 11px;
  color: var(--amber);
  letter-spacing: 4px;
  margin-bottom: 4px;
}
.fusion-desc { font-size: 10px; color: var(--text); letter-spacing: 1px; }

/* ─────────────── ARCHITECTURE ─────────────── */
.arch-diagram {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.arch-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.arch-layer {
  padding: 14px 20px;
  border: 1px solid var(--border);
  background: var(--panel);
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  transition: all 0.15s;
}
.arch-layer:hover {
  border-color: var(--amber);
  background: rgba(245,166,35,0.04);
  padding-left: 28px;
}

.arch-layer-connector {
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 1px;
  height: 2px;
  background: var(--amber);
  z-index: 1;
}

.arch-dot {
  width: 8px;
  height: 8px;
  border: 1px solid;
  border-radius: 0;
  transform: rotate(45deg);
  flex-shrink: 0;
}

.arch-label {
  font-size: 11px;
  color: var(--text-bright);
  letter-spacing: 0.5px;
  flex: 1;
}
.arch-sub {
  font-size: 9px;
  color: var(--text);
  margin-top: 2px;
  letter-spacing: 0.5px;
}
.arch-param {
  font-size: 9px;
  color: var(--amber);
  letter-spacing: 1px;
  flex-shrink: 0;
}

.arch-layer.backbone { border-color: var(--amber); }
.arch-layer.backbone .arch-dot { border-color: var(--amber); background: rgba(245,166,35,0.3); }
.arch-layer.decoder { }
.arch-layer.decoder .arch-dot { border-color: var(--blue); }
.arch-layer.input .arch-dot { border-color: var(--teal); }
.arch-layer.fuse .arch-dot { border-color: var(--amber2); background: rgba(255,204,92,0.2); }

.arch-aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.arch-stat-box {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 20px;
}

.asb-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  color: var(--amber);
  letter-spacing: 3px;
  margin-bottom: 12px;
}

.asb-row {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 10px;
}
.asb-row:last-child { border-bottom: none; }
.asb-k { color: var(--text); }
.asb-v { color: var(--white); font-weight: 500; }
.asb-v.amber { color: var(--amber); }
.asb-v.green { color: var(--green); }

/* ─────────────── DECODER HEADS ─────────────── */
.decoder-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 2px;
}
.dtab {
  padding: 10px 24px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  transition: all 0.15s;
  text-transform: uppercase;
}
.dtab:hover { color: var(--white); }
.dtab.active-atlas { border-color: var(--atlas); color: var(--atlas); background: rgba(245,166,35,0.06); }
.dtab.active-forge { border-color: var(--forge); color: var(--forge); background: rgba(255,107,53,0.06); }
.dtab.active-cast  { border-color: var(--cast);  color: var(--cast);  background: rgba(0,212,170,0.06); }
.dtab.active-lens  { border-color: var(--lens);  color: var(--lens);  background: rgba(123,143,255,0.06); }

.decoder-panel {
  display: none;
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 32px;
}
.decoder-panel.active { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }

.dp-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.dp-title.atlas { color: var(--atlas); }
.dp-title.forge { color: var(--forge); }
.dp-title.cast  { color: var(--cast); }
.dp-title.lens  { color: var(--lens); }

.dp-task {
  font-size: 11px;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 20px;
}

.dp-outputs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 24px;
}
.dp-fmt {
  font-size: 9px;
  letter-spacing: 2px;
  padding: 4px 12px;
  border: 1px solid var(--border2);
  color: var(--text);
  text-transform: uppercase;
}

.dp-modules {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dp-module {
  padding: 10px 14px;
  border-left: 2px solid var(--border2);
  background: rgba(255,255,255,0.02);
}
.dp-mod-name { font-size: 10px; color: var(--text-bright); margin-bottom: 3px; letter-spacing: 0.5px; }
.dp-mod-desc { font-size: 9px; color: var(--text); line-height: 1.6; }

.dp-stats {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dp-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  font-size: 10px;
}
.dp-stat-k { color: var(--text); }
.dp-stat-v { color: var(--white); font-family: 'Orbitron', monospace; font-size: 9px; }

/* Atlas border color */
.decoder-panel[data-model="atlas"] { border-top: 2px solid var(--atlas); }
.decoder-panel[data-model="forge"] { border-top: 2px solid var(--forge); }
.decoder-panel[data-model="cast"]  { border-top: 2px solid var(--cast); }
.decoder-panel[data-model="lens"]  { border-top: 2px solid var(--lens); }

/* ─────────────── SHARED MODULES ─────────────── */
.modules-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
}

.mod-card {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 20px 16px;
  position: relative;
  transition: all 0.15s;
}
.mod-card:hover {
  border-color: var(--amber);
  background: var(--amber-dim);
}

.mod-num {
  font-family: 'Orbitron', monospace;
  font-size: 20px;
  font-weight: 900;
  color: var(--border2);
  line-height: 1;
  margin-bottom: 10px;
}
.mod-card:hover .mod-num { color: var(--amber); }

.mod-name {
  font-size: 10px;
  color: var(--text-bright);
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  line-height: 1.4;
  font-weight: 500;
}

.mod-desc {
  font-size: 9px;
  color: var(--text);
  line-height: 1.7;
}

/* ─────────────── VRAM TABLE ─────────────── */
.vram-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
}

.vram-card {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 24px 20px;
}
.vc-name {
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.mc-atlas .vc-name { color: var(--atlas); }
.mc-forge .vc-name { color: var(--forge); }
.mc-cast  .vc-name { color: var(--cast); }
.mc-lens  .vc-name { color: var(--lens); }
.mc-prime .vc-name { color: var(--prime); }

.vc-row {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.vc-row:last-child { border-bottom: none; }
.vc-k { color: var(--text); }
.vc-v { color: var(--white); font-weight: 500; }
.vc-v.green { color: var(--green); }

/* ─────────────── TRAINING ─────────────── */
.training-phases {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  position: relative;
}

.training-phases::before {
  content: '';
  position: absolute;
  top: 40px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--amber), var(--amber), var(--amber), transparent);
  z-index: 0;
}

.phase-card {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 28px 20px;
  position: relative;
  z-index: 1;
  transition: all 0.15s;
}
.phase-card:hover {
  border-color: var(--amber);
  transform: translateY(-3px);
}

.phase-num {
  font-family: 'Orbitron', monospace;
  font-size: 36px;
  font-weight: 900;
  color: var(--border2);
  line-height: 1;
  margin-bottom: 12px;
  transition: color 0.15s;
}
.phase-card:hover .phase-num { color: var(--amber); }

.phase-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.phase-steps {
  font-size: 10px;
  color: var(--text);
  line-height: 1.8;
}
.phase-steps li {
  list-style: none;
  padding-left: 14px;
  position: relative;
  margin-bottom: 4px;
}
.phase-steps li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--amber);
  font-size: 8px;
}

/* ─────────────── PRIME ─────────────── */
.prime-panel {
  background: var(--panel);
  border: 1px solid var(--purple);
  position: relative;
  overflow: hidden;
}

.prime-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--prime), var(--blue), var(--prime));
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

.prime-inner { padding: 40px; }

.prime-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 32px;
}
.prime-title {
  font-family: 'Orbitron', monospace;
  font-size: 36px;
  font-weight: 900;
  color: var(--prime);
  filter: drop-shadow(0 0 20px rgba(168,85,247,0.4));
  letter-spacing: 2px;
}
.prime-subtitle { font-size: 11px; color: var(--text); margin-top: 6px; letter-spacing: 2px; }
.prime-badges { display: flex; gap: 8px; flex-direction: column; align-items: flex-end; }
.prime-badge {
  font-size: 9px;
  letter-spacing: 2px;
  padding: 4px 14px;
  border: 1px solid;
  text-transform: uppercase;
}
.pb-closed { border-color: var(--purple); color: var(--purple); background: rgba(168,85,247,0.08); }
.pb-api    { border-color: var(--blue);   color: var(--blue);   background: rgba(30,144,255,0.08); }

.prime-modules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-bottom: 32px;
}
.pm-card {
  background: rgba(168,85,247,0.04);
  border: 1px solid rgba(168,85,247,0.2);
  padding: 16px;
  transition: all 0.15s;
}
.pm-card:hover {
  background: rgba(168,85,247,0.08);
  border-color: var(--purple);
}
.pm-name { font-size: 10px; color: var(--prime); margin-bottom: 5px; letter-spacing: 0.5px; }
.pm-desc { font-size: 9px; color: var(--text); line-height: 1.6; }

.prime-api {
  background: #020608;
  border: 1px solid var(--border);
  padding: 24px 28px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  line-height: 2;
  overflow-x: auto;
}
.kw   { color: var(--prime); }
.str  { color: #86efac; }
.key  { color: var(--amber); }
.cm   { color: var(--border2); }
.num  { color: var(--lens); }

/* ─────────────── TRAINING DATA ─────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.data-table th {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--amber);
  text-transform: uppercase;
  padding: 10px 16px;
  border-bottom: 1px solid var(--amber);
  text-align: left;
  background: rgba(245,166,35,0.04);
}
.data-table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: top;
}
.data-table tr:hover td { background: rgba(255,255,255,0.02); color: var(--text-bright); }
.td-dataset { color: var(--white); font-weight: 500; }
.td-size { color: var(--amber); font-family: 'Orbitron', monospace; font-size: 9px; }
.td-used { display: flex; gap: 4px; flex-wrap: wrap; }
.td-chip {
  font-size: 8px;
  letter-spacing: 1px;
  padding: 2px 7px;
  border: 1px solid var(--border2);
  color: var(--text);
}
.chip-atlas { border-color: rgba(245,166,35,0.4); color: var(--atlas); }
.chip-forge { border-color: rgba(255,107,53,0.4); color: var(--forge); }
.chip-cast  { border-color: rgba(0,212,170,0.4);  color: var(--cast); }
.chip-lens  { border-color: rgba(123,143,255,0.4); color: var(--lens); }
.chip-prime { border-color: rgba(168,85,247,0.4); color: var(--prime); }

/* ─────────────── FOOTER ─────────────── */
.footer {
  margin-top: 100px;
  padding: 32px 0;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: gap;
  gap: 16px;
}
.footer-left {
  font-size: 9px;
  color: var(--border2);
  letter-spacing: 3px;
  line-height: 1.8;
}
.footer-models {
  display: flex;
  gap: 20px;
}
.fm-dot {
  font-size: 9px;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.fm-dot::before { content: '◆'; font-size: 7px; }
.fm-atlas::before { color: var(--atlas); }
.fm-forge::before { color: var(--forge); }
.fm-cast::before  { color: var(--cast); }
.fm-lens::before  { color: var(--lens); }
.fm-prime::before { color: var(--prime); }

/* ─────────────── SCROLLBAR ─────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border2); }
::-webkit-scrollbar-thumb:hover { background: var(--amber); }

/* ─────────────── RESPONSIVE ─────────────── */
@media (max-width: 1100px) {
  .model-grid { grid-template-columns: repeat(3, 1fr); }
  .vram-grid  { grid-template-columns: repeat(3, 1fr); }
  .arch-diagram { grid-template-columns: 1fr; }
  .prime-modules { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px) {
  .wrap { padding: 0 20px 80px; }
  .model-grid { grid-template-columns: 1fr 1fr; }
  .input-grid { grid-template-columns: 1fr 1fr; }
  .modules-grid { grid-template-columns: 1fr 1fr; }
  .training-phases { grid-template-columns: 1fr 1fr; }
  .training-phases::before { display: none; }
  .decoder-panel.active { grid-template-columns: 1fr; }
  .decoder-tabs { flex-wrap: wrap; }
  .prime-modules { grid-template-columns: 1fr; }
  .cube-wrap { display: none; }
}
</style>
</head>
<body>
<div class="wrap">

  <!-- ══════ HERO ══════ -->
  <div class="hero">
    <!-- Wireframe cube SVG (CSS 3D simulated) -->
    <div class="cube-wrap">
      <svg class="cube-svg" viewBox="0 0 520 520" fill="none" xmlns="http://www.w3.org/2000/svg">
        <!-- Outer cube -->
        <line x1="130" y1="130" x2="390" y2="130"/>
        <line x1="390" y1="130" x2="390" y2="390"/>
        <line x1="390" y1="390" x2="130" y2="390"/>
        <line x1="130" y1="390" x2="130" y2="130"/>
        <!-- Inner cube (depth illusion) -->
        <line x1="180" y1="180" x2="340" y2="180"/>
        <line x1="340" y1="180" x2="340" y2="340"/>
        <line x1="340" y1="340" x2="180" y2="340"/>
        <line x1="180" y1="340" x2="180" y2="180"/>
        <!-- Connectors -->
        <line x1="130" y1="130" x2="180" y2="180" stroke-dasharray="4 4"/>
        <line x1="390" y1="130" x2="340" y2="180" stroke-dasharray="4 4"/>
        <line x1="390" y1="390" x2="340" y2="340" stroke-dasharray="4 4"/>
        <line x1="130" y1="390" x2="180" y2="340" stroke-dasharray="4 4"/>
        <!-- Diagonals -->
        <line x1="130" y1="130" x2="390" y2="390" stroke-opacity="0.15"/>
        <line x1="390" y1="130" x2="130" y2="390" stroke-opacity="0.15"/>
        <!-- Cross hairs -->
        <line x1="260" y1="80" x2="260" y2="440" stroke-opacity="0.1" stroke-dasharray="2 6"/>
        <line x1="80" y1="260" x2="440" y2="260" stroke-opacity="0.1" stroke-dasharray="2 6"/>
        <!-- Corner dots -->
        <circle cx="130" cy="130" r="4" fill="#f5a623"/>
        <circle cx="390" cy="130" r="4" fill="#f5a623"/>
        <circle cx="390" cy="390" r="4" fill="#f5a623"/>
        <circle cx="130" cy="390" r="4" fill="#f5a623"/>
        <circle cx="180" cy="180" r="3" fill="#f5a623" fill-opacity="0.5"/>
        <circle cx="340" cy="180" r="3" fill="#f5a623" fill-opacity="0.5"/>
        <circle cx="340" cy="340" r="3" fill="#f5a623" fill-opacity="0.5"/>
        <circle cx="180" cy="340" r="3" fill="#f5a623" fill-opacity="0.5"/>
        <!-- Center -->
        <circle cx="260" cy="260" r="6" fill="none" stroke="#f5a623" stroke-opacity="0.6"/>
        <circle cx="260" cy="260" r="2" fill="#f5a623"/>
        <!-- Measurement lines -->
        <line x1="80" y1="130" x2="110" y2="130" stroke-opacity="0.3"/>
        <line x1="80" y1="390" x2="110" y2="390" stroke-opacity="0.3"/>
        <line x1="80" y1="130" x2="80" y2="390" stroke-opacity="0.3"/>
        <line x1="130" y1="440" x2="130" y2="410" stroke-opacity="0.3"/>
        <line x1="390" y1="440" x2="390" y2="410" stroke-opacity="0.3"/>
        <line x1="130" y1="440" x2="390" y2="440" stroke-opacity="0.3"/>
      </svg>
    </div>

    <div class="hero-eyebrow">MATRIX.CORP — 3D GENERATION SERIES</div>

    <h1 class="hero-title">
      <span class="matrix">MATRIX</span>
      <span class="voxel">VOXEL</span>
    </h1>

    <p class="hero-sub">Flow Matching · Multi-Modal Input · Task-Specific Decoders · A100 40GB</p>

    <div class="hero-tags">
      <span class="tag a">5 Models</span>
      <span class="tag a">Shared Backbone ~2.3B</span>
      <span class="tag b">Flow Matching (DiT)</span>
      <span class="tag b">Triplane Latent Space</span>
      <span class="tag g">4 Open Source</span>
      <span class="tag p">1 Closed Source (Prime)</span>
      <span class="tag">Text + Image + Video + 3D Input</span>
      <span class="tag">OBJ · GLB · STL · NeRF · 3DGS · USD</span>
      <span class="tag">A100 40GB Target</span>
    </div>

    <div class="scroll-hint">SCROLL TO EXPLORE</div>
    <div class="hero-rule"></div>
  </div>

  <!-- ══════ SECTION 1 — MODEL FAMILY ══════ -->
  <div class="section" id="s1">
    <div class="section-header">
      <span class="section-num">01 —</span>
      <span class="section-title">Model Family</span>
    </div>

    <div class="model-grid">
      <!-- Atlas -->
      <div class="model-card mc-atlas">
        <div class="model-card-top"></div>
        <div class="model-card-body">
          <div class="mc-icon">🗺️</div>
          <div class="mc-name">Voxel Atlas</div>
          <div class="mc-task">World & environment generation. Terrain, buildings, biomes, interiors.</div>
          <div class="mc-formats">
            <div class="mc-fmt">.vox — Voxel Grid</div>
            <div class="mc-fmt">.obj — Scene</div>
            <div class="mc-fmt">.usd — Stage</div>
          </div>
          <div class="mc-badges">
            <span class="mc-badge badge-open">Open Source</span>
            <span class="mc-badge badge-planned">Planned</span>
          </div>
        </div>
      </div>
      <!-- Forge -->
      <div class="model-card mc-forge">
        <div class="model-card-top"></div>
        <div class="model-card-body">
          <div class="mc-icon">⚒️</div>
          <div class="mc-name">Voxel Forge</div>
          <div class="mc-task">Game-ready mesh & asset generation with PBR textures.</div>
          <div class="mc-formats">
            <div class="mc-fmt">.obj / .glb</div>
            <div class="mc-fmt">.fbx — Game Engine</div>
            <div class="mc-fmt">.usdz — Apple AR</div>
          </div>
          <div class="mc-badges">
            <span class="mc-badge badge-open">Open Source</span>
            <span class="mc-badge badge-planned">Planned</span>
          </div>
        </div>
      </div>
      <!-- Cast -->
      <div class="model-card mc-cast">
        <div class="model-card-top"></div>
        <div class="model-card-body">
          <div class="mc-icon">🖨️</div>
          <div class="mc-name">Voxel Cast</div>
          <div class="mc-task">3D printable generation. Watertight, manifold, structurally valid.</div>
          <div class="mc-formats">
            <div class="mc-fmt">.stl — Universal</div>
            <div class="mc-fmt">.step — CAD</div>
            <div class="mc-fmt">.3mf — Modern</div>
          </div>
          <div class="mc-badges">
            <span class="mc-badge badge-open">Open Source</span>
            <span class="mc-badge badge-planned">Planned</span>
          </div>
        </div>
      </div>
      <!-- Lens -->
      <div class="model-card mc-lens">
        <div class="model-card-top"></div>
        <div class="model-card-body">
          <div class="mc-icon">🔭</div>
          <div class="mc-name">Voxel Lens</div>
          <div class="mc-task">NeRF & Gaussian Splatting. Photorealistic scenes for VR/AR & cinema.</div>
          <div class="mc-formats">
            <div class="mc-fmt">.ply — 3DGS</div>
            <div class="mc-fmt">NeRF weights</div>
            <div class="mc-fmt">.mp4 — Render</div>
          </div>
          <div class="mc-badges">
            <span class="mc-badge badge-open">Open Source</span>
            <span class="mc-badge badge-planned">Planned</span>
          </div>
        </div>
      </div>
      <!-- Prime -->
      <div class="model-card mc-prime">
        <div class="model-card-top"></div>
        <div class="model-card-body">
          <div class="mc-icon">⭐</div>
          <div class="mc-name">Voxel Prime</div>
          <div class="mc-task">All-in-one unified generation. All output types in a single API call.</div>
          <div class="mc-formats">
            <div class="mc-fmt">All formats</div>
            <div class="mc-fmt">Pipeline mode</div>
            <div class="mc-fmt">Style transfer</div>
          </div>
          <div class="mc-badges">
            <span class="mc-badge badge-closed">Closed Source</span>
            <span class="mc-badge badge-planned">Planned</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- ══════ SECTION 2 — INPUTS ══════ -->
  <div class="section" id="s2">
    <div class="section-header">
      <span class="section-num">02 —</span>
      <span class="section-title">Input Modalities</span>
    </div>

    <div class="input-grid">
      <div class="input-card">
        <div class="input-icon">💬</div>
        <div class="input-name">Text</div>
        <div class="input-enc">CLIP-ViT-L + T5-XXL</div>
        <div class="input-desc">Natural language prompt. Primary conditioning signal. Supports detailed descriptions, style directives, material specs.</div>
      </div>
      <div class="input-card">
        <div class="input-icon">🖼️</div>
        <div class="input-name">Image</div>
        <div class="input-enc">DINOv2-L + Depth Encoder</div>
        <div class="input-desc">Single reference image lifted to 3D. Infers geometry from visual cues, shading, perspective.</div>
      </div>
      <div class="input-card">
        <div class="input-icon">📷</div>
        <div class="input-name">Multi-View</div>
        <div class="input-enc">Multi-View Transformer</div>
        <div class="input-desc">2–12 images from different angles. Best geometry accuracy. Triangulates structure from multiple perspectives.</div>
      </div>
      <div class="input-card">
        <div class="input-icon">🎬</div>
        <div class="input-name">Video</div>
        <div class="input-enc">Video-MAE + Temporal Pool</div>
        <div class="input-desc">Extracts frames, infers 3D from camera motion. Enables dynamic / animated 3D scene generation (Lens).</div>
      </div>
      <div class="input-card">
        <div class="input-icon">🗿</div>
        <div class="input-name">3D Model</div>
        <div class="input-enc">PointNet++</div>
        <div class="input-desc">Existing mesh or point cloud as conditioning. Enables retexturing, restyling, format conversion, remeshing.</div>
      </div>
    </div>

    <div class="fusion-arrow">ALL INPUTS → CROSS-MODAL ATTENTION FUSION → 1024-DIM CONDITIONING VECTOR</div>
  </div>

  <!-- ══════ SECTION 3 — ARCHITECTURE ══════ -->
  <div class="section" id="s3">
    <div class="section-header">
      <span class="section-num">03 —</span>
      <span class="section-title">Core Architecture</span>
    </div>

    <div class="arch-diagram">
      <div class="arch-stack">
        <!-- Input encoders -->
        <div class="arch-layer input">
          <div class="arch-dot"></div>
          <div><div class="arch-label">Text Encoder (T5-XXL + CLIP-ViT-L)</div><div class="arch-sub">→ 1024-dim text embedding</div></div>
          <div class="arch-param">~4.7B</div>
        </div>
        <div class="arch-layer input">
          <div class="arch-dot"></div>
          <div><div class="arch-label">Image / MultiView / Video / 3D Encoders</div><div class="arch-sub">DINOv2 · MultiViewTX · VideoMAE · PointNet++</div></div>
          <div class="arch-param">~1.2B</div>
        </div>
        <!-- Fusion -->
        <div class="arch-layer fuse" style="border-color:rgba(255,204,92,0.4); margin-top:2px;">
          <div class="arch-dot"></div>
          <div><div class="arch-label">Cross-Modal Conditioning Fusion</div><div class="arch-sub">Fuses all active input modalities → unified conditioning</div></div>
          <div class="arch-param">Module 01</div>
        </div>
        <!-- Backbone -->
        <div style="margin-top:2px;">
          <div class="arch-layer backbone">
            <div class="arch-dot"></div>
            <div><div class="arch-label">Flow Matching DiT Backbone</div><div class="arch-sub">24 blocks · hidden 1536 · 24 heads · AdaLN-Zero · 3D RoPE</div></div>
            <div class="arch-param">~2.3B</div>
          </div>
          <div class="arch-layer backbone" style="opacity:0.7">
            <div class="arch-dot"></div>
            <div><div class="arch-label">Triplane Latent Space</div><div class="arch-sub">3 × 256 × 256 × 32 channels · XY / XZ / YZ planes</div></div>
            <div class="arch-param">SHARED</div>
          </div>
        </div>
        <!-- Decoders -->
        <div style="margin-top:2px; display:grid; grid-template-columns:1fr 1fr; gap:2px;">
          <div class="arch-layer decoder" style="border-color:rgba(245,166,35,0.3)">
            <div class="arch-dot" style="border-color:var(--atlas)"></div>
            <div><div class="arch-label">Atlas Decoder</div><div class="arch-sub">Scene layout + voxelizer</div></div>
          </div>
          <div class="arch-layer decoder" style="border-color:rgba(255,107,53,0.3)">
            <div class="arch-dot" style="border-color:var(--forge)"></div>
            <div><div class="arch-label">Forge Decoder</div><div class="arch-sub">Occupancy + mesh refinement</div></div>
          </div>
          <div class="arch-layer decoder" style="border-color:rgba(0,212,170,0.3)">
            <div class="arch-dot" style="border-color:var(--cast)"></div>
            <div><div class="arch-label">Cast Decoder</div><div class="arch-sub">SDF → watertight mesh</div></div>
          </div>
          <div class="arch-layer decoder" style="border-color:rgba(123,143,255,0.3)">
            <div class="arch-dot" style="border-color:var(--lens)"></div>
            <div><div class="arch-label">Lens Decoder</div><div class="arch-sub">Gaussian param predictor</div></div>
          </div>
        </div>
      </div>

      <!-- Stats aside -->
      <div class="arch-aside">
        <div class="arch-stat-box">
          <div class="asb-label">Flow Matching Config</div>
          <div class="asb-row"><span class="asb-k">Method</span><span class="asb-v amber">Optimal Transport FM</span></div>
          <div class="asb-row"><span class="asb-k">Inference Steps</span><span class="asb-v">20 – 50 NFE</span></div>
          <div class="asb-row"><span class="asb-k">vs DDPM</span><span class="asb-v green">~50× faster sampling</span></div>
          <div class="asb-row"><span class="asb-k">CFG Scale</span><span class="asb-v">5.0 – 10.0</span></div>
          <div class="asb-row"><span class="asb-k">CFG Dropout</span><span class="asb-v">10% during train</span></div>
          <div class="asb-row"><span class="asb-k">Scheduler</span><span class="asb-v">RF (Rectified Flow)</span></div>
        </div>
        <div class="arch-stat-box">
          <div class="asb-label">Triplane Latent</div>
          <div class="asb-row"><span class="asb-k">Planes</span><span class="asb-v">XY · XZ · YZ</span></div>
          <div class="asb-row"><span class="asb-k">Resolution</span><span class="asb-v">256 × 256</span></div>
          <div class="asb-row"><span class="asb-k">Channels</span><span class="asb-v">32 per plane</span></div>
          <div class="asb-row"><span class="asb-k">Total values</span><span class="asb-v">~6M latents</span></div>
          <div class="asb-row"><span class="asb-k">Point query</span><span class="asb-v">Project → 3 planes → sum</span></div>
        </div>
        <div class="arch-stat-box">
          <div class="asb-label">Backbone Stats</div>
          <div class="asb-row"><span class="asb-k">Architecture</span><span class="asb-v amber">DiT (Diffusion Transformer)</span></div>
          <div class="asb-row"><span class="asb-k">Layers</span><span class="asb-v">24 transformer blocks</span></div>
          <div class="asb-row"><span class="asb-k">Hidden dim</span><span class="asb-v">1536</span></div>
          <div class="asb-row"><span class="asb-k">Attention heads</span><span class="asb-v">24</span></div>
          <div class="asb-row"><span class="asb-k">Conditioning</span><span class="asb-v">AdaLN-Zero</span></div>
          <div class="asb-row"><span class="asb-k">Parameters</span><span class="asb-v green">~2.3B</span></div>
        </div>
      </div>
    </div>
  </div>

  <!-- ══════ SECTION 4 — DECODER HEADS ══════ -->
  <div class="section" id="s4">
    <div class="section-header">
      <span class="section-num">04 —</span>
      <span class="section-title">Task-Specific Decoder Heads</span>
    </div>

    <div class="decoder-tabs">
      <div class="dtab active-atlas" onclick="showDecoder('atlas', this)">🗺️ Atlas</div>
      <div class="dtab" onclick="showDecoder('forge', this)">⚒️ Forge</div>
      <div class="dtab" onclick="showDecoder('cast', this)">🖨️ Cast</div>
      <div class="dtab" onclick="showDecoder('lens', this)">🔭 Lens</div>
    </div>

    <!-- Atlas -->
    <div class="decoder-panel active" id="dp-atlas" data-model="atlas">
      <div>
        <div class="dp-title atlas">Voxel Atlas</div>
        <div class="dp-task">World & environment generation. Generates complete 3D scenes — terrain, structures, vegetation, sky. Supports infinite world tiling with seamless chunk stitching and biome-aware generation across 8 biome types.</div>
        <div class="dp-outputs">
          <span class="dp-fmt">.vox</span><span class="dp-fmt">.obj scene</span><span class="dp-fmt">.usd stage</span>
        </div>
        <div class="dp-modules">
          <div class="dp-module">
            <div class="dp-mod-name">Scene Layout Transformer</div>
            <div class="dp-mod-desc">6-layer transformer over 32×32 spatial grid. Divides space into semantic regions: terrain, structures, vegetation, sky, water.</div>
          </div>
          <div class="dp-module">
            <div class="dp-mod-name">Region-wise NeRF Decoder</div>
            <div class="dp-mod-desc">Per-region MLP: 3D coords + triplane → density + RGB + semantic label. Marching cubes extraction per region.</div>
          </div>
          <div class="dp-module">
            <div class="dp-mod-name">Infinite World Tiling</div>
            <div class="dp-mod-desc">Generates seamless adjacent chunks. Tiling latent conditioning ensures consistent biome transitions at borders.</div>
          </div>
          <div class="dp-module">
            <div class="dp-mod-name">LOD Generator</div>
            <div class="dp-mod-desc">Auto-generates 4 levels of detail per scene object. Compatible with Unity/Unreal LOD systems.</div>
          </div>
        </div>
      </div>
      <div class="dp-stats">
        <div class="dp-stat"><span class="dp-stat-k">Decoder params</span><span class="dp-stat-v">~400M</span></div>
        <div class="dp-stat"><span class="dp-stat-k">Total model size</span><span class="dp-stat-v">~2.7B</span></div>
        <div class="dp-stat"><span class="dp-stat-k">VRAM (BF16)</span><span class="dp-stat-v">~22GB</span></div>
        <div class="dp-stat"><span class="dp-stat-k">Small scene</span><span class="dp-stat-v">~8s on A100</span></div>
        <div class="dp-stat"><span class="dp-stat-k">Large chunk (256³)</span><span class="dp-stat-v">~35s on A100</span></div>
        <div class="dp-stat"><span class="dp-stat-k">Biome types</span><span class="dp-stat-v">8</span></div>
        <div class="dp-stat"><span class="dp-stat-k">LOD levels</span><span class="dp-stat-v">4</span></div>
        <div class="dp-stat"><span class="dp-stat-k">Max world resolution</span><span class="dp-stat-v">256×256×128 voxels</span></div>
      </div>
    </div>

    <!-- Forge -->
    <div class="decoder-panel" id="dp-forge" data-model="forge">
      <div>
        <div class="dp-title forge">Voxel Forge</div>
        <div class="dp-task">Game-ready 3D asset generation with clean topology and full PBR texture maps. Supports characters, objects, props, vehicles, and architectural elements. Topology-optimized for animation rigging.</div>
        <div class="dp-outputs">
          <span class="dp-fmt">.obj + .mtl</span><span class="dp-fmt">.glb / .gltf</span><span class="dp-fmt">.fbx</span><span class="dp-fmt">.usdz</span>
        </div>
        <div class="dp-modules">
          <div class="dp-module">
            <div class="dp-mod-name">Occupancy Network + Marching Cubes</div>
            <div class="dp-mod-desc">MLP: 3D point + triplane → occupancy probability. Differentiable marching cubes produces initial raw mesh.</div>
          </div>
          <div class="dp-module">
            <div class="dp-mod-name">Mesh Refinement GNN</div>
            <div class="dp-mod-desc">Graph neural network over mesh vertices/edges. 8 message-passing rounds. Predicts vertex position offsets for clean quad-dominant topology.</div>
          </div>
          <div class="dp-module">
            <div class="dp-mod-name">UV Unwrapper + Texture Diffusion</div>
            <div class="dp-mod-desc">Learned UV unwrapping (SeamlessUV lineage). 2D flow matching in UV space generates albedo, roughness, metallic, normal maps at 1K–2K resolution.</div>
          </div>
          <div class="dp-module">
            <div class="dp-mod-name">Topology & Animation Optimizer</div>
            <div class="dp-mod-desc">Enforces edge loops for rigging. Optional bilateral symmetry. Scale normalized to real-world meters.</div>
          </div>
        </div>
      </div>
      <div class="dp-stats">
        <div class="dp-stat"><span class="dp-stat-k">Decoder params</span><span class="dp-stat-v">~350M</span></div>
        <div class="dp-stat"><span class="dp-stat-k">Total model size</span><span class="dp-stat-v">~2.65B</span></div>
        <div class="dp-stat"><span class="dp-stat-k">VRAM (BF16)</span><span class="dp-stat-v">~21GB</span></div>
        <div class="dp-stat"><span class="dp-stat-k">Low poly (≤5K tris)</span><span class="dp-stat-v">~6s on A100</span></div>
        <div class="dp-stat"><span class="dp-stat-k">Mid poly (≤50K tris)</span><span class="dp-stat-v">~15s on A100</span></div>
        <div class="dp-stat"><span class="dp-stat-k">High poly (≤500K)</span><span class="dp-stat-v">~45s on A100</span></div>
        <div class="dp-stat"><span class="dp-stat-k">Texture resolution</span><span class="dp-stat-v">1024 or 2048px</span></div>
        <div class="dp-stat"><span class="dp-stat-k">LOD levels</span><span class="dp-stat-v">4 (100/50/25/10%)</span></div>
      </div>
    </div>

    <!-- Cast -->
    <div class="decoder-panel" id="dp-cast" data-model="cast">
      <div>
        <div class="dp-title cast">Voxel Cast</div>
        <div class="dp-task">Physically valid 3D printable model generation. Every Cast output is guaranteed watertight, manifold, zero self-intersections, minimum wall thickness enforced. Supports FDM, SLA, and resin printing workflows.</div>
        <div class="dp-outputs">
          <span class="dp-fmt">.stl</span><span class="dp-fmt">.obj (watertight)</span><span class="dp-fmt">.step (CAD)</span><span class="dp-fmt">.3mf</span>
        </div>
        <div class="dp-modules">
          <div class="dp-module">
            <div class="dp-mod-name">SDF Decoder → Dual Marching Cubes</div>
            <div class="dp-mod-desc">MLP outputs signed distance field. Dual marching cubes guarantees watertight topology — no holes by construction.</div>
          </div>
          <div class="dp-module">
            <div class="dp-mod-name">Printability Validator (hard constraints)</div>
            <div class="dp-mod-desc">Wall thickness ≥ 1.2mm enforced. Overhang > 45° flagged. Manifold checker + auto-repair. All outputs pass validation before delivery.</div>
          </div>
          <div class="dp-module">
            <div class="dp-mod-name">Hollowing Engine</div>
            <div class="dp-mod-desc">Auto-hollows solid objects with configurable wall thickness. Adds drain holes. Reduces material use by up to 80%.</div>
          </div>
          <div class="dp-module">
            <div class="dp-mod-name">Interlocking Part Splitter</div>
            <div class="dp-mod-desc">Splits large objects into printable parts with generated snap-fit joints. Scale validates against Bambu, Prusa, Ender bed sizes.</div>
          </div>
        </div>
      </div>
      <div class="dp-stats">
        <div class="dp-stat"><span class="dp-stat-k">Decoder params</span><span class="dp-stat-v">~200M</span></div>
        <div class="dp-stat"><span class="dp-stat-k">Total model size</span><span class="dp-stat-v">~2.5B</span></div>
        <div class="dp-stat"><span class="dp-stat-k">VRAM (BF16)</span><span class="dp-stat-v">~20GB</span></div>
        <div class="dp-stat"><span class="dp-stat-k">Guaranteed</span><span class="dp-stat-v">Watertight + Manifold</span></div>
        <div class="dp-stat"><span class="dp-stat-k">Min wall thickness</span><span class="dp-stat-v">1.2mm</span></div>
        <div class="dp-stat"><span class="dp-stat-k">Hollowing saving</span><span class="dp-stat-v">up to 80% material</span></div>
        <div class="dp-stat"><span class="dp-stat-k">Supported printers</span><span class="dp-stat-v">Bambu · Prusa · Ender</span></div>
        <div class="dp-stat"><span class="dp-stat-k">Non-manifold edges</span><span class="dp-stat-v">0 (guaranteed)</span></div>
      </div>
    </div>

    <!-- Lens -->
    <div class="decoder-panel" id="dp-lens" data-model="lens">
      <div>
        <div class="dp-title lens">Voxel Lens</div>
        <div class="dp-task">Photorealistic 3D scene generation via Neural Radiance Fields and 3D Gaussian Splatting. Optimized for VR/AR visualization, cinematic rendering, and dynamic animated scenes from video input.</div>
        <div class="dp-outputs">
          <span class="dp-fmt">.ply (3DGS)</span><span class="dp-fmt">NeRF weights</span><span class="dp-fmt">.mp4 render</span><span class="dp-fmt">depth maps</span>
        </div>
        <div class="dp-modules">
          <div class="dp-module">
            <div class="dp-mod-name">Gaussian Parameter Decoder</div>
            <div class="dp-mod-desc">Per-Gaussian: position (3) + rotation (4) + scale (3) + opacity (1) + SH coefficients (48). Targets 500K–3M Gaussians per scene. Adaptive densification + pruning.</div>
          </div>
          <div class="dp-module">
            <div class="dp-mod-name">NeRF Branch (Instant-NGP style)</div>
            <div class="dp-mod-desc">Hash-grid encoder + tiny MLP. Runs in parallel with 3DGS branch. Used for scenes requiring higher photometric accuracy.</div>
          </div>
          <div class="dp-module">
            <div class="dp-mod-name">Dynamic Scene Support</div>
            <div class="dp-mod-desc">Temporal Gaussian sequences for animated scenes. Accepts video input → extracts motion → generates temporally consistent 3DGS.</div>
          </div>
          <div class="dp-module">
            <div class="dp-mod-name">Compression Module</div>
            <div class="dp-mod-desc">Reduces 3DGS file size by 60–80% with minimal quality loss. Critical for web and mobile delivery of Gaussian scenes.</div>
          </div>
        </div>
      </div>
      <div class="dp-stats">
        <div class="dp-stat"><span class="dp-stat-k">Decoder params</span><span class="dp-stat-v">~500M</span></div>
        <div class="dp-stat"><span class="dp-stat-k">Total model size</span><span class="dp-stat-v">~2.8B</span></div>
        <div class="dp-stat"><span class="dp-stat-k">VRAM (BF16)</span><span class="dp-stat-v">~22GB</span></div>
        <div class="dp-stat"><span class="dp-stat-k">Object-centric</span><span class="dp-stat-v">~12s on A100</span></div>
        <div class="dp-stat"><span class="dp-stat-k">Indoor scene</span><span class="dp-stat-v">~40s on A100</span></div>
        <div class="dp-stat"><span class="dp-stat-k">Outdoor scene</span><span class="dp-stat-v">~90s on A100</span></div>
        <div class="dp-stat"><span class="dp-stat-k">Max Gaussians</span><span class="dp-stat-v">3M per scene</span></div>
        <div class="dp-stat"><span class="dp-stat-k">File compression</span><span class="dp-stat-v">60–80% reduction</span></div>
      </div>
    </div>
  </div>

  <!-- ══════ SECTION 5 — SHARED MODULES ══════ -->
  <div class="section" id="s5">
    <div class="section-header">
      <span class="section-num">05 —</span>
      <span class="section-title">10 Shared Custom Modules</span>
    </div>
    <div class="modules-grid">
      <div class="mod-card"><div class="mod-num">01</div><div class="mod-name">Cross-Modal Conditioning Fusion</div><div class="mod-desc">CrossModalAttention over all active input types. Unified 1024-dim conditioning vector fed to backbone.</div></div>
      <div class="mod-card"><div class="mod-num">02</div><div class="mod-name">3D RoPE Encoder</div><div class="mod-desc">RoPE adapted for triplane 3D spatial positions. Encodes XYZ coordinates with rotary positional embeddings.</div></div>
      <div class="mod-card"><div class="mod-num">03</div><div class="mod-name">Geometry Quality Scorer</div><div class="mod-desc">Rates generated geometry [0–1] before output. Flags low-quality generations for re-sampling at higher NFE.</div></div>
      <div class="mod-card"><div class="mod-num">04</div><div class="mod-name">Semantic Label Head</div><div class="mod-desc">Per-voxel/vertex semantic class prediction: wall, floor, ceiling, tree, water, metal, glass, fabric, etc.</div></div>
      <div class="mod-card"><div class="mod-num">05</div><div class="mod-name">Scale & Unit Manager</div><div class="mod-desc">Enforces consistent real-world scale. All outputs tagged with unit metadata (meters). Validates print scale.</div></div>
      <div class="mod-card"><div class="mod-num">06</div><div class="mod-name">Material Property Head</div><div class="mod-desc">Predicts PBR properties: roughness, metallic, IOR, subsurface scattering. Compatible with Blender/UE material graphs.</div></div>
      <div class="mod-card"><div class="mod-num">07</div><div class="mod-name">Confidence & Uncertainty Head</div><div class="mod-desc">Per-region generation confidence. Flags uncertain areas in output metadata. Drives re-sampling priority.</div></div>
      <div class="mod-card"><div class="mod-num">08</div><div class="mod-name">Prompt Adherence Scorer</div><div class="mod-desc">CLIP-based similarity score: how well the 3D output matches the input text prompt. Exposed in API response.</div></div>
      <div class="mod-card"><div class="mod-num">09</div><div class="mod-name">Multi-Resolution Decoder</div><div class="mod-desc">Coarse-to-fine generation: 64³ → 128³ → 256³. Each stage refines the previous. Enables fast previews at 64³.</div></div>
      <div class="mod-card"><div class="mod-num">10</div><div class="mod-name">Style Embedding Module</div><div class="mod-desc">Encodes style reference images into conditioning vector. Transfers art style, material aesthetic, and visual language to 3D output.</div></div>
    </div>
  </div>

  <!-- ══════ SECTION 6 — VOXEL PRIME ══════ -->
  <div class="section" id="s6">
    <div class="section-header">
      <span class="section-num">06 —</span>
      <span class="section-title">Voxel Prime — All-In-One</span>
    </div>
    <div class="prime-panel">
      <div class="prime-inner">
        <div class="prime-header">
          <div>
            <div class="prime-title">VOXEL PRIME</div>
            <div class="prime-subtitle">CLOSED SOURCE · API ONLY · ALL DECODER HEADS · 6 EXCLUSIVE MODULES</div>
          </div>
          <div class="prime-badges">
            <span class="prime-badge pb-closed">🟣 Closed Source</span>
            <span class="prime-badge pb-api">API Access Only</span>
          </div>
        </div>

        <div class="prime-modules">
          <div class="pm-card"><div class="pm-name">Cross-Task Consistency</div><div class="pm-desc">Ensures Atlas world + Forge assets + Lens scene all match visually when generated together in one call.</div></div>
          <div class="pm-card"><div class="pm-name">Scene Population Engine</div><div class="pm-desc">Generates a world (Atlas) then auto-populates it with fitting assets (Forge). One prompt → full scene.</div></div>
          <div class="pm-card"><div class="pm-name">Pipeline Orchestrator</div><div class="pm-desc">Chains Atlas → Forge → Cast → Lens in a single API request. Manages inter-model dependencies automatically.</div></div>
          <div class="pm-card"><div class="pm-name">4× Texture Upscaler</div><div class="pm-desc">Photorealistic super-resolution on all generated textures. 512px base → 2048px final via flow matching in UV space.</div></div>
          <div class="pm-card"><div class="pm-name">Style Transfer Module</div><div class="pm-desc">Apply artistic styles (Studio Ghibli, cyberpunk, brutalist, etc.) consistently across all output types in one generation.</div></div>
          <div class="pm-card"><div class="pm-name">Iterative Refinement</div><div class="pm-desc">Text-guided editing of already-generated 3D content. "Make the roof taller" → re-runs only affected regions.</div></div>
        </div>

        <div class="prime-api">
<span class="cm">POST /v1/voxel/generate</span><br>
{<br>
&nbsp;&nbsp;<span class="key">"prompt"</span>: <span class="str">"A medieval castle on a cliff at sunset"</span>,<br>
&nbsp;&nbsp;<span class="key">"output_types"</span>: [<span class="str">"world"</span>, <span class="str">"mesh"</span>, <span class="str">"nerf"</span>],<br>
&nbsp;&nbsp;<span class="key">"inputs"</span>: {<br>
&nbsp;&nbsp;&nbsp;&nbsp;<span class="key">"image"</span>: <span class="str">"base64..."</span>,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="cm">// optional reference</span><br>
&nbsp;&nbsp;&nbsp;&nbsp;<span class="key">"video"</span>: <span class="str">"base64..."</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="cm">// optional for dynamic scenes</span><br>
&nbsp;&nbsp;},<br>
&nbsp;&nbsp;<span class="key">"settings"</span>: {<br>
&nbsp;&nbsp;&nbsp;&nbsp;<span class="key">"quality"</span>: <span class="str">"high"</span>,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="cm">// draft | standard | high</span><br>
&nbsp;&nbsp;&nbsp;&nbsp;<span class="key">"style"</span>: <span class="str">"realistic"</span>,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="cm">// realistic | stylized | low-poly | ...</span><br>
&nbsp;&nbsp;&nbsp;&nbsp;<span class="key">"scale_meters"</span>: <span class="num">100.0</span>,<br>
&nbsp;&nbsp;&nbsp;&nbsp;<span class="key">"populate_scene"</span>: <span class="kw">true</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="cm">// Atlas → auto-populate with Forge assets</span><br>
&nbsp;&nbsp;}<br>
}
        </div>
      </div>
    </div>
  </div>

  <!-- ══════ SECTION 7 — TRAINING DATA ══════ -->
  <div class="section" id="s7">
    <div class="section-header">
      <span class="section-num">07 —</span>
      <span class="section-title">Training Data</span>
    </div>
    <table class="data-table">
      <thead>
        <tr><th>Dataset</th><th>Size</th><th>Content</th><th>Used by</th></tr>
      </thead>
      <tbody>
        <tr><td class="td-dataset">Objaverse-XL</td><td class="td-size">10M+</td><td>Massive diverse 3D objects</td><td class="td-used"><span class="td-chip chip-atlas">Atlas</span><span class="td-chip chip-forge">Forge</span><span class="td-chip chip-cast">Cast</span><span class="td-chip chip-lens">Lens</span></td></tr>
        <tr><td class="td-dataset">Objaverse</td><td class="td-size">800K+</td><td>Diverse annotated 3D assets</td><td class="td-used"><span class="td-chip chip-forge">Forge</span><span class="td-chip chip-cast">Cast</span><span class="td-chip chip-lens">Lens</span></td></tr>
        <tr><td class="td-dataset">ShapeNet</td><td class="td-size">55K</td><td>Common object categories</td><td class="td-used"><span class="td-chip chip-forge">Forge</span><span class="td-chip chip-cast">Cast</span></td></tr>
        <tr><td class="td-dataset">ScanNet / ScanNet++</td><td class="td-size">1.5K scenes</td><td>Indoor 3D scans (RGB-D)</td><td class="td-used"><span class="td-chip chip-atlas">Atlas</span><span class="td-chip chip-lens">Lens</span></td></tr>
        <tr><td class="td-dataset">KITTI / nuScenes</td><td class="td-size">40K frames</td><td>Outdoor driving 3D scenes</td><td class="td-used"><span class="td-chip chip-atlas">Atlas</span><span class="td-chip chip-lens">Lens</span></td></tr>
        <tr><td class="td-dataset">ABO (Amazon Berkeley)</td><td class="td-size">148K</td><td>Product meshes + materials</td><td class="td-used"><span class="td-chip chip-forge">Forge</span></td></tr>
        <tr><td class="td-dataset">Thingiverse</td><td class="td-size">2M+</td><td>3D printable STL models</td><td class="td-used"><span class="td-chip chip-cast">Cast</span></td></tr>
        <tr><td class="td-dataset">Polycam Scans</td><td class="td-size">~500K</td><td>Real-world 3DGS / NeRF captures</td><td class="td-used"><span class="td-chip chip-lens">Lens</span></td></tr>
        <tr><td class="td-dataset">Synthetic Renders</td><td class="td-size">Generated</td><td>Multi-view renders of Objaverse</td><td class="td-used"><span class="td-chip chip-atlas">Atlas</span><span class="td-chip chip-forge">Forge</span><span class="td-chip chip-cast">Cast</span><span class="td-chip chip-lens">Lens</span></td></tr>
        <tr><td class="td-dataset">Text-3D Pairs (synthetic)</td><td class="td-size">Generated</td><td>GPT-4o descriptions of Objaverse</td><td class="td-used"><span class="td-chip chip-atlas">Atlas</span><span class="td-chip chip-forge">Forge</span><span class="td-chip chip-cast">Cast</span><span class="td-chip chip-lens">Lens</span></td></tr>
      </tbody>
    </table>
  </div>

  <!-- ══════ SECTION 8 — VRAM ══════ -->
  <div class="section" id="s8">
    <div class="section-header">
      <span class="section-num">08 —</span>
      <span class="section-title">Model Sizes & VRAM</span>
    </div>
    <div class="vram-grid">
      <div class="vram-card mc-atlas">
        <div class="vc-name">VOXEL ATLAS</div>
        <div class="vc-row"><span class="vc-k">Backbone</span><span class="vc-v">2.3B</span></div>
        <div class="vc-row"><span class="vc-k">Decoder</span><span class="vc-v">~400M</span></div>
        <div class="vc-row"><span class="vc-k">Total</span><span class="vc-v">~2.7B</span></div>
        <div class="vc-row"><span class="vc-k">BF16 VRAM</span><span class="vc-v">~22GB</span></div>
        <div class="vc-row"><span class="vc-k">INT8 VRAM</span><span class="vc-v green">~11GB</span></div>
      </div>
      <div class="vram-card mc-forge">
        <div class="vc-name">VOXEL FORGE</div>
        <div class="vc-row"><span class="vc-k">Backbone</span><span class="vc-v">2.3B</span></div>
        <div class="vc-row"><span class="vc-k">Decoder</span><span class="vc-v">~350M</span></div>
        <div class="vc-row"><span class="vc-k">Total</span><span class="vc-v">~2.65B</span></div>
        <div class="vc-row"><span class="vc-k">BF16 VRAM</span><span class="vc-v">~21GB</span></div>
        <div class="vc-row"><span class="vc-k">INT8 VRAM</span><span class="vc-v green">~11GB</span></div>
      </div>
      <div class="vram-card mc-cast">
        <div class="vc-name">VOXEL CAST</div>
        <div class="vc-row"><span class="vc-k">Backbone</span><span class="vc-v">2.3B</span></div>
        <div class="vc-row"><span class="vc-k">Decoder</span><span class="vc-v">~200M</span></div>
        <div class="vc-row"><span class="vc-k">Total</span><span class="vc-v">~2.5B</span></div>
        <div class="vc-row"><span class="vc-k">BF16 VRAM</span><span class="vc-v">~20GB</span></div>
        <div class="vc-row"><span class="vc-k">INT8 VRAM</span><span class="vc-v green">~10GB</span></div>
      </div>
      <div class="vram-card mc-lens">
        <div class="vc-name">VOXEL LENS</div>
        <div class="vc-row"><span class="vc-k">Backbone</span><span class="vc-v">2.3B</span></div>
        <div class="vc-row"><span class="vc-k">Decoder</span><span class="vc-v">~500M</span></div>
        <div class="vc-row"><span class="vc-k">Total</span><span class="vc-v">~2.8B</span></div>
        <div class="vc-row"><span class="vc-k">BF16 VRAM</span><span class="vc-v">~22GB</span></div>
        <div class="vc-row"><span class="vc-k">INT8 VRAM</span><span class="vc-v green">~11GB</span></div>
      </div>
      <div class="vram-card mc-prime">
        <div class="vc-name">VOXEL PRIME</div>
        <div class="vc-row"><span class="vc-k">Backbone</span><span class="vc-v">2.3B</span></div>
        <div class="vc-row"><span class="vc-k">All Decoders</span><span class="vc-v">~1.4B</span></div>
        <div class="vc-row"><span class="vc-k">Total</span><span class="vc-v">~3.7B</span></div>
        <div class="vc-row"><span class="vc-k">BF16 VRAM</span><span class="vc-v">~30GB</span></div>
        <div class="vc-row"><span class="vc-k">INT8 VRAM</span><span class="vc-v green">~15GB</span></div>
      </div>
    </div>
    <div style="margin-top:12px; padding:12px 16px; border:1px solid var(--border); background:var(--panel); font-size:10px; color:var(--text);">
      ✦ &nbsp;All specialist models (Atlas/Forge/Cast/Lens) fit A100 40GB in BF16 comfortably. &nbsp;·&nbsp; INT8 quantization brings all under 15GB — viable on consumer RTX 4090 (24GB). &nbsp;·&nbsp; Voxel Prime requires A100 40GB BF16 or 2× 4090 INT8.
    </div>
  </div>

  <!-- ══════ SECTION 9 — TRAINING ══════ -->
  <div class="section" id="s9">
    <div class="section-header">
      <span class="section-num">09 —</span>
      <span class="section-title">Training Strategy</span>
    </div>
    <div class="training-phases">
      <div class="phase-card">
        <div class="phase-num">01</div>
        <div class="phase-title">Backbone Pre-Training</div>
        <ul class="phase-steps">
          <li>Train shared DiT on Objaverse-XL triplane reconstructions</li>
          <li>Text + single image conditioning only</li>
          <li>Context: general 3D structure, no task specialization</li>
          <li>~100K steps on A100 cluster</li>
        </ul>
      </div>
      <div class="phase-card">
        <div class="phase-num">02</div>
        <div class="phase-title">Decoder Head Training</div>
        <ul class="phase-steps">
          <li>Freeze backbone, train each head independently</li>
          <li>Atlas: ScanNet + synthetic world data</li>
          <li>Forge: ShapeNet + Objaverse + textures</li>
          <li>Cast: Thingiverse + watertight synthetic meshes</li>
          <li>Lens: Polycam + synthetic multi-view renders</li>
          <li>~50K steps each (parallel runs)</li>
        </ul>
      </div>
      <div class="phase-card">
        <div class="phase-num">03</div>
        <div class="phase-title">Joint Fine-Tuning</div>
        <ul class="phase-steps">
          <li>Unfreeze backbone, full end-to-end per model</li>
          <li>Add all input modalities (video, multi-view, point cloud)</li>
          <li>Multi-resolution curriculum: 64³ → 128³ → 256³</li>
          <li>~30K steps each</li>
        </ul>
      </div>
      <div class="phase-card">
        <div class="phase-num">04</div>
        <div class="phase-title">Prime Training</div>
        <ul class="phase-steps">
          <li>Init from jointly fine-tuned backbone</li>
          <li>All 4 decoder heads trained simultaneously</li>
          <li>Cross-task consistency losses</li>
          <li>Pipeline orchestrator + style transfer modules</li>
          <li>~50K steps</li>
        </ul>
      </div>
    </div>
  </div>

  <!-- Footer -->
  <div class="footer">
    <div class="footer-left">
      MATRIX.CORP — VOXEL SPEC V1.0<br>
      🔴 PLANNED · ARCHITECTURE COMPLETE · COMPUTE TBD
    </div>
    <div class="footer-models">
      <span class="fm-dot fm-atlas" style="color:var(--atlas)">ATLAS</span>
      <span class="fm-dot fm-forge" style="color:var(--forge)">FORGE</span>
      <span class="fm-dot fm-cast"  style="color:var(--cast)">CAST</span>
      <span class="fm-dot fm-lens"  style="color:var(--lens)">LENS</span>
      <span class="fm-dot fm-prime" style="color:var(--prime)">PRIME</span>
    </div>
  </div>

</div>

<script>
// ── Decoder tab switching ──
function showDecoder(model, tabEl) {
  document.querySelectorAll('.decoder-panel').forEach(p => p.classList.remove('active'));
  document.querySelectorAll('.dtab').forEach(t => t.className = 'dtab');
  document.getElementById('dp-' + model).classList.add('active');
  tabEl.classList.add('active-' + model);
}

// ── Scroll-triggered section reveals ──
const observer = new IntersectionObserver((entries) => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      e.target.classList.add('visible');
    }
  });
}, { threshold: 0.08 });

document.querySelectorAll('.section').forEach((s, i) => {
  s.style.transitionDelay = '0.05s';
  observer.observe(s);
});
</script>
</body>
</html>