feat(roster): ship video-game-style 3D character-select roster

Replaces the flat 5-tile grid + static AI-illustration hero banner with a
live Three.js (r160) character-select scene: five procedural low-poly heroes
(AMARU, SENTRA, ROSIE, KILLINCHU, A11OY) on colored rim-lit daises in an arc,
UDS NPCs orbiting in the background, KHIPU-style particle motes, slow camera
carousel orbit. Hover reveals animated superpower panels + activates each
hero's prop and dims the rest; click opens the hero's HF Space. Fully
procedural geometry + canvas-painted UDS swag (zero external assets). WebGL
fallback to the existing 5-tile SVG grid. prefers-reduced-motion honored.

Files: index.html, js/{main,heroes,uds_npcs,hover_panel,superpower_icons,canvas_decals}.js, css/style.css

Author: Yachay <yachay@szlholdings.dev>
Co-Authored-By: Perplexity Computer Agent <agent@perplexity.ai>
Signed-off-by: Yachay <yachay@szlholdings.dev>

ADDITIVE only; no force push. Doctrine v11 LOCKED 749/14/163 unchanged.
Lambda stays Conjecture 1. SLSA L1 honest. README frontmatter untouched.

css/style.css

@@ -0,0 +1,85 @@
+/* style.css — minimal, mostly defaults. SZL palette: deep purple + gold. */
+:root{
+  --purple-deep:#12091f; --purple-mid:#2d1b4e; --gold:#d4af37; --gold-light:#e8cc6a;
+  --text-main:#e8e0f0; --text-muted:#a090c0; --text-dim:#7060a0;
+  --font-head:'Cinzel',Georgia,serif; --font-mono:'JetBrains Mono','Fira Code',monospace;
+}
+*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
+html,body{height:100%;}
+body{
+  background:var(--purple-deep);color:var(--text-main);
+  font-family:'Inter',system-ui,-apple-system,sans-serif;line-height:1.6;
+  -webkit-font-smoothing:antialiased;overflow-x:hidden;
+  background-image:radial-gradient(circle at 50% -10%,rgba(61,40,120,0.5),transparent 55%),
+                   radial-gradient(circle at 90% 10%,rgba(212,175,55,0.07),transparent 45%);
+}
+.skip{position:absolute;left:-9999px;top:0.5rem;z-index:99;padding:.5rem 1rem;background:var(--gold);color:#150b22;font-weight:700;border-radius:4px;}
+.skip:focus{left:1rem;}
+
+/* Header / footer banding */
+.roster-header,.roster-footer{text-align:center;font-family:var(--font-mono);letter-spacing:.18em;
+  text-transform:uppercase;color:var(--gold-light);padding:1.1rem 1rem .6rem;font-size:clamp(.62rem,1.6vw,.86rem);}
+.roster-footer{color:var(--text-muted);padding:.7rem 1rem 1.4rem;font-size:clamp(.56rem,1.4vw,.74rem);}
+.roster-footer b{color:var(--gold);}
+.tagline{text-align:center;font-family:var(--font-head);color:var(--gold);
+  font-size:clamp(1.1rem,3vw,1.8rem);padding:.4rem 1rem 0;}
+.tagline small{display:block;font-family:var(--font-mono);text-transform:none;letter-spacing:.04em;
+  font-size:.62rem;color:var(--text-dim);margin-top:.4rem;}
+
+/* The 3D stage */
+#stage{position:relative;width:100%;height:min(70vh,640px);min-height:420px;}
+#roster{display:block;width:100%;height:100%;}
+#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
+  font-family:var(--font-mono);color:var(--text-dim);font-size:.8rem;letter-spacing:.1em;}
+
+/* Holographic hover panel */
+.hover-panel{position:absolute;transform:translate(-50%,-100%);min-width:240px;max-width:300px;
+  padding:.8rem .9rem;pointer-events:none;opacity:0;transition:opacity .18s ease-out;z-index:40;
+  background:linear-gradient(180deg,rgba(18,9,31,.92),rgba(18,9,31,.78));
+  border:1px solid var(--hc,#d4af37);border-radius:10px;
+  box-shadow:0 0 24px -4px var(--hc,#d4af37),inset 0 0 18px -8px var(--hc,#d4af37);
+  backdrop-filter:blur(6px);}
+.hover-panel.hp-visible{opacity:1;}
+.hover-panel::after{content:'';position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);
+  width:0;height:0;border:7px solid transparent;border-top-color:var(--hc,#d4af37);}
+.hp-name{font-family:var(--font-mono);font-weight:700;font-size:1.05rem;letter-spacing:.08em;}
+.hp-role{font-size:.62rem;color:var(--text-muted);margin:.1rem 0 .5rem;}
+.hp-head{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.22em;color:var(--text-dim);
+  border-top:1px solid rgba(255,255,255,.12);padding-top:.4rem;margin-bottom:.4rem;}
+.hp-list{list-style:none;display:flex;flex-direction:column;gap:.4rem;}
+.hp-line{display:flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.72rem;
+  color:var(--text-main);min-height:22px;opacity:.25;}
+.hp-line.hp-shown{opacity:1;}
+.hp-line.hp-pulse{animation:hp-pulse 1.4s ease-in-out infinite;}
+@keyframes hp-pulse{0%,100%{filter:none;}50%{filter:drop-shadow(0 0 5px var(--hc));}}
+.sp-icon{display:inline-flex;width:22px;height:22px;flex:0 0 22px;}
+.sp-static *{animation:none !important;}
+.hp-text{white-space:nowrap;overflow:hidden;}
+
+/* Accessible focus proxies (visually hidden but focusable) */
+.a11y-heroes{position:absolute;width:1px;height:1px;overflow:hidden;}
+.a11y-heroes button{width:1px;height:1px;}
+.a11y-hero:focus{position:fixed;left:8px;top:8px;width:auto;height:auto;z-index:200;
+  padding:.4rem .7rem;background:var(--gold);color:#150b22;border:0;border-radius:4px;
+  font-family:var(--font-mono);font-size:.7rem;}
+
+/* SVG fallback grid (WebGL unavailable) */
+#fallback[hidden]{display:none;}
+#fallback{max-width:1100px;margin:1rem auto;padding:0 1rem;}
+.fb-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;}
+.fb-cell{display:flex;flex-direction:column;align-items:center;text-decoration:none;
+  background:#0a0e14;border:1px solid rgba(212,175,55,.18);border-radius:14px;padding:.9rem;
+  transition:transform .2s,border-color .2s;}
+.fb-cell:hover,.fb-cell:focus-visible{transform:translateY(-4px);border-color:var(--gold);}
+.fb-cell img{width:100%;aspect-ratio:1/1;border-radius:12px;}
+.fb-name{font-family:var(--font-head);color:var(--gold);margin-top:.5rem;}
+.fb-role{font-family:var(--font-mono);font-size:.6rem;color:var(--text-dim);
+  text-transform:uppercase;letter-spacing:.06em;text-align:center;}
+@media(max-width:900px){.fb-grid{grid-template-columns:repeat(3,1fr);}}
+@media(max-width:560px){.fb-grid{grid-template-columns:repeat(2,1fr);}}
+
+@media(prefers-reduced-motion:reduce){
+  .hover-panel{transition:none;}
+  .hp-line.hp-pulse{animation:none;}
+  .sp-anim *{animation:none !important;}
+}

index.html

@@ -2,579 +2,61 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8"/>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=yes"/>
-  <meta name="apple-mobile-web-app-capable" content="yes"/>
-  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-  <meta name="theme-color" content="#1a0d2e"/>
-  <title>SZL Holdings — Governed Agentic Mesh</title>
-  <meta name="description" content="SZL Holdings: a governed agentic mesh. rosie commands a11oy; a11oy enforces; amaru remembers; sentra guards; vessels carries the load. Doctrine v11 (749/14/163), formal Lean proofs, signed receipts."/>
-  <meta property="og:title" content="SZL Holdings — Governed Agentic Mesh"/>
-  <meta property="og:description" content="Five organs, ten sub-organs. Every call leaves a receipt. Doctrine v11 LOCKED · 749/14/163."/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"/>
+  <meta name="theme-color" content="#12091f"/>
+  <title>SZL Holdings — Five Organs · Live 3D Character Roster</title>
+  <meta name="description" content="SZL Holdings character-select roster: five live organs as 3D heroes in UDS swag. Hover reveals superpowers; click opens each Space. Doctrine v11 LOCKED 749/14/163."/>
+  <meta property="og:title" content="SZL Holdings — Live 3D Character Roster"/>
+  <meta property="og:description" content="The Mesh · Five Organs · Live 3D · Character Roster · UDS Edition."/>
   <meta property="og:image" content="https://huggingface.co/spaces/SZLHOLDINGS/README/resolve/main/assets/szl_banner.png"/>
   <meta property="og:type" content="website"/>
   <link rel="preconnect" href="https://fonts.googleapis.com"/>
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
-  <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"/>
-  <style>
-  /* =========================================================
-     SZL SHOWCASE — inherits amaru-platform design language
-     Palette: deep purple #1a0d2e · gold #d4af37
-     ========================================================= */
-  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
-  :root{
-    --purple-deep:#1a0d2e; --purple-mid:#2d1b4e; --purple-light:#3d2878;
-    --gold:#d4af37; --gold-light:#e8cc6a; --gold-dim:#b8952e;
-    --text-main:#e8e0f0; --text-muted:#a090c0; --text-dim:#7060a0;
-    --border:rgba(212,175,55,0.18); --glass:rgba(45,27,78,0.55);
-    --coral:#ff7a59; --cyan:#00d4ff; --green:#3ddc84; --ocean:#0099cc;
-    --font-head:'Cinzel','Palatino Linotype',Georgia,serif;
-    --font-body:'Inter',system-ui,-apple-system,sans-serif;
-    --font-mono:'JetBrains Mono','Fira Code',monospace;
-    --radius:12px; --radius-lg:20px; --content-max:1180px;
-  }
-  html{scroll-behavior:smooth;font-size:16px;}
-  body{background:var(--purple-deep);color:var(--text-main);font-family:var(--font-body);line-height:1.7;-webkit-font-smoothing:antialiased;
-    background-image:radial-gradient(circle at 20% -10%,rgba(61,40,120,0.45),transparent 45%),radial-gradient(circle at 90% 10%,rgba(212,175,55,0.06),transparent 40%);}
-  h1,h2,h3,h4{font-family:var(--font-head);letter-spacing:0.03em;line-height:1.2;}
-  h1{font-size:clamp(2.4rem,6vw,4.2rem);color:var(--gold);}
-  h2{font-size:clamp(1.6rem,3.5vw,2.5rem);color:var(--gold-light);margin-bottom:0.4rem;}
-  h3{font-size:1.1rem;color:var(--gold);margin-bottom:0.35rem;}
-  h4{font-size:0.8rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.12em;}
-  p{margin-bottom:1rem;color:var(--text-main);}
-  a{color:var(--gold);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s,color .2s;}
-  a:hover{border-color:var(--gold);}
-  code,.mono{font-family:var(--font-mono);font-size:0.85em;background:rgba(212,175,55,0.08);padding:0.12em 0.45em;border-radius:5px;color:var(--gold-light);}
-  strong{color:var(--gold-light);font-weight:600;}
-  .container{max-width:var(--content-max);margin:0 auto;padding:0 1.6rem;}
-  section{padding:5rem 0;position:relative;}
-  section+section{border-top:1px solid var(--border);}
-  .gold-bar{width:54px;height:3px;background:linear-gradient(90deg,var(--gold),transparent);margin:0.6rem 0 2rem;border-radius:2px;}
-  .section-label{font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold-dim);}
-  .skip{position:absolute;left:-9999px;top:1rem;z-index:9999;padding:0.5rem 1.25rem;background:var(--gold);color:var(--purple-deep);font-weight:700;border-radius:4px;}
-  .skip:focus{left:1rem;}
-  /* NAV */
-  nav{position:sticky;top:0;z-index:100;background:rgba(26,13,46,0.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);}
-  .nav-inner{max-width:var(--content-max);margin:0 auto;padding:0.7rem 1.6rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
-  .nav-logo{display:flex;align-items:center;gap:0.5rem;font-family:var(--font-head);font-weight:700;color:var(--gold);font-size:1.05rem;}
-  .nav-links{display:flex;gap:1.05rem;flex-wrap:wrap;font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;}
-  .nav-links a{color:var(--text-muted);border:none;}
-  .nav-links a:hover{color:var(--gold-light);}
-  /* HERO */
-  #hero{padding-top:4rem;}
-  .hero-eyebrow{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold-dim);margin-bottom:1rem;}
-  .pill{display:inline-block;font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.05em;padding:0.32rem 0.85rem;border-radius:999px;border:1px solid var(--border);background:var(--glass);color:var(--text-muted);margin:0.2rem 0.3rem 0.2rem 0;}
-  .pill.warn{border-color:rgba(255,122,89,0.4);color:#ffb39e;}
-  .pill.gold{border-color:var(--gold);color:var(--gold-light);}
-  .hero-tagline{font-size:clamp(1.05rem,2.2vw,1.4rem);color:var(--text-main);max-width:760px;margin:1.1rem auto 1.4rem;}
-  .hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:2.5rem;align-items:center;}
-  .hero-img{width:100%;max-width:540px;border-radius:var(--radius-lg);border:1px solid var(--border);background:#fff;}
-  .ctas{display:flex;gap:0.8rem;flex-wrap:wrap;margin-top:1.6rem;}
-  .btn{font-family:var(--font-body);font-weight:600;font-size:0.92rem;padding:0.7rem 1.3rem;border-radius:var(--radius);border:1px solid var(--border);transition:transform .15s,box-shadow .15s;}
-  .btn-primary{background:linear-gradient(135deg,var(--gold),var(--gold-dim));color:var(--purple-deep);border-color:var(--gold);}
-  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(212,175,55,0.25);border-color:var(--gold);}
-  .btn-secondary{background:var(--glass);color:var(--text-main);}
-  .btn-secondary:hover{transform:translateY(-2px);border-color:var(--gold);}
-  /* ORGAN GRID */
-  .organ-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.2rem;margin-top:1.5rem;}
-  .organ-card{background:var(--glass);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.2rem 1rem;text-align:center;transition:transform .18s,border-color .18s,box-shadow .18s;display:flex;flex-direction:column;}
-  .organ-card:hover{transform:translateY(-4px);border-color:var(--accent,var(--gold));box-shadow:0 12px 30px rgba(0,0,0,0.35);}
-  .organ-card img{width:118px;height:118px;border-radius:50%;margin:0 auto 0.7rem;border:2px solid var(--accent,var(--gold));}
-  .organ-name{font-family:var(--font-head);font-size:1.25rem;color:var(--gold);margin-bottom:0.15rem;}
-  .organ-role{font-size:0.82rem;color:var(--text-muted);min-height:2.4em;}
-  .organ-quote{font-family:var(--font-mono);font-size:0.72rem;color:var(--text-main);background:rgba(255,255,255,0.04);border-radius:8px;padding:0.5rem;margin:0.7rem 0;min-height:3.4em;}
-  .organ-facts{font-family:var(--font-mono);font-size:0.68rem;color:var(--text-dim);letter-spacing:0.02em;margin-bottom:0.8rem;}
-  .organ-card a.go{margin-top:auto;font-size:0.8rem;font-weight:600;}
-  /* SUB-ORGAN GRID */
-  .sub-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0.8rem;margin-top:1.5rem;}
-  .sub-card{background:var(--glass);border:1px solid var(--border);border-radius:var(--radius);padding:0.85rem;font-size:0.8rem;}
-  .sub-card b{color:var(--gold-light);font-size:0.92rem;}
-  .sub-card .where{display:block;font-family:var(--font-mono);font-size:0.66rem;color:var(--text-dim);margin-top:0.4rem;letter-spacing:0.04em;}
-  /* PhD STRIP */
-  .phd-note{font-size:0.85rem;color:var(--text-muted);background:rgba(255,122,89,0.07);border:1px solid rgba(255,122,89,0.25);border-radius:var(--radius);padding:0.7rem 1rem;margin-bottom:1.4rem;}
-  .phd-strip{display:flex;gap:1rem;overflow-x:auto;padding:0.6rem 0.2rem 1.2rem;scroll-snap-type:x mandatory;}
-  .phd-badge{flex:0 0 220px;scroll-snap-align:start;background:var(--glass);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.1rem;text-align:center;transition:transform .18s,border-color .18s;}
-  .phd-badge:hover{transform:translateY(-4px);border-color:var(--gold);}
-  .phd-badge img{width:120px;height:120px;border-radius:50%;margin:0 auto 0.6rem;display:block;}
-  .phd-badge .title{font-family:var(--font-head);color:var(--gold);font-size:1.05rem;margin-bottom:0.4rem;}
-  .phd-badge .ship{font-size:0.76rem;color:var(--text-muted);line-height:1.5;}
-  /* STATE TABLE */
-  table.state{width:100%;border-collapse:collapse;margin-top:1.2rem;font-size:0.88rem;}
-  table.state th,table.state td{text-align:left;padding:0.6rem 0.8rem;border-bottom:1px solid var(--border);}
-  table.state th{font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold-dim);}
-  table.state td:nth-child(2){font-family:var(--font-mono);color:var(--gold-light);}
-  /* FOOTER */
-  footer{padding:3rem 0 4rem;border-top:1px solid var(--border);font-size:0.85rem;color:var(--text-muted);}
-  footer .links{display:flex;flex-wrap:wrap;gap:0.6rem 1.2rem;margin:1rem 0;font-family:var(--font-mono);font-size:0.8rem;}
-  footer .built{font-family:var(--font-mono);font-size:0.74rem;color:var(--text-dim);margin-top:1rem;letter-spacing:0.03em;}
-  /* RESPONSIVE */
-  @media(max-width:980px){
-    .hero-grid{grid-template-columns:1fr;text-align:center;}
-    .hero-img{margin:0 auto;}
-    .ctas{justify-content:center;}
-    .organ-grid{grid-template-columns:repeat(2,1fr);}
-    .sub-grid{grid-template-columns:repeat(2,1fr);}
-  }
-  @media(max-width:560px){
-    .organ-grid{grid-template-columns:1fr;}
-    .sub-grid{grid-template-columns:1fr;}
-  }
-  /* =========================================================
-     AMBIENT EMOJI LAYER (Wave4 — additive)
-     5 character emojis hanging around the page edges, animated.
-     Additive layer: does NOT touch the banner or the organ-card
-     painterly avatars. Uses transform/opacity (GPU compositor).
-     z-index 40: above the page background, below nav (100) + skip (9999).
-     ========================================================= */
-  .emoji-layer{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden;}
-  /* outer wrapper = resting spot + slow drift; inner img = breathing + hover pulse */
-  .ambient-emoji{position:fixed;width:84px;height:84px;pointer-events:auto;}
-  .ae-inner{display:block;width:100%;height:100%;opacity:0.9;
-    filter:drop-shadow(0 4px 14px rgba(0,0,0,0.45));will-change:transform,opacity;
-    transition:transform .25s ease,filter .25s ease,opacity .25s ease;}
-  /* fixed resting spots — corners/edges, clear of the top-center banner */
-  .ae-a11oy{top:88px;left:22px;}            /* upper-left, below nav */
-  .ae-rosie{top:118px;right:26px;}          /* upper-right */
-  .ae-amaru{top:46%;left:14px;}             /* mid-left edge */
-  .ae-sentra{top:54%;right:16px;}           /* mid-right edge */
-  .ae-vessels{bottom:42px;right:40px;}      /* lower-right */
-  /* hover + keyboard focus: non-motion cue (brighten) survives reduced-motion */
-  .ambient-emoji:hover .ae-inner,.ambient-emoji:focus-visible .ae-inner{opacity:1;
-    filter:drop-shadow(0 6px 20px rgba(212,175,55,0.55));}
-  .ambient-emoji:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:50%;}
-  /* shrink + tuck on small screens so emojis never block reading */
-  @media(max-width:760px){
-    .ambient-emoji{width:54px;height:54px;opacity:0.8;}
-    .ae-amaru,.ae-sentra{display:none;}
-  }
-
-  /* Motion enabled for users who have NOT requested reduced motion */
-  @media(prefers-reduced-motion:no-preference){
-    @keyframes ae-breathe{0%,100%{transform:translateY(0) scale(1);opacity:0.88;}
-      50%{transform:translateY(-6px) scale(1.05);opacity:1;}}
-    @keyframes ae-drift-a{0%{transform:translate3d(0,0,0);}25%{transform:translate3d(10px,-8px,0);}
-      50%{transform:translate3d(4px,8px,0);}75%{transform:translate3d(-8px,4px,0);}100%{transform:translate3d(0,0,0);}}
-    @keyframes ae-drift-b{0%{transform:translate3d(0,0,0);}30%{transform:translate3d(-12px,6px,0);}
-      60%{transform:translate3d(6px,-10px,0);}100%{transform:translate3d(0,0,0);}}
-    @keyframes ae-pulse{0%{transform:scale(1);}40%{transform:scale(1.16);}100%{transform:scale(1);}}
-    /* idle breathing on the inner image; slow 30s drift on the wrapper */
-    .ae-inner{animation:ae-breathe 5.5s ease-in-out infinite;}
-    .ambient-emoji{animation:ae-drift-a 30s ease-in-out infinite;}
-    .ae-a11oy .ae-inner{animation-delay:-0.2s;}
-    .ae-rosie .ae-inner{animation-delay:-1.4s;}
-    .ae-amaru .ae-inner{animation-delay:-2.6s;}
-    .ae-sentra .ae-inner{animation-delay:-3.8s;}
-    .ae-vessels .ae-inner{animation-delay:-4.9s;}
-    .ae-rosie,.ae-sentra{animation-name:ae-drift-b;}
-    .ambient-emoji:hover .ae-inner,.ambient-emoji:focus-visible .ae-inner{animation:ae-pulse .6s ease-in-out;}
-  }
-
-  @media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important;}
-    .ae-inner{animation:none!important;}.ambient-emoji{animation:none!important;}}
-
-  /* =========================================================
-     MISSION ROOM — joint cyber-ops action band (Wave4, additive)
-     Replaces the static team picture. Six characters, each an
-     animated WebP looping its own cyber task. The looping is baked
-     into each WebP; CSS adds just a very slight ambient float that
-     is fully disabled under prefers-reduced-motion. A static
-     first-frame WebP is stacked underneath and revealed when motion
-     is reduced (the animated layer is hidden in that case).
-     ========================================================= */
-  #mission-room{padding:2.4rem 0 1.6rem;border-top:none;text-align:center;}
-  .mr-head{font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold-dim);margin-bottom:0.2rem;}
-  .mr-band{display:flex;justify-content:center;align-items:flex-end;gap:0.3rem;flex-wrap:wrap;
-    padding:0.6rem 0 0.4rem;margin:0 auto;max-width:1140px;}
-  .mr-unit{position:relative;width:clamp(120px,15vw,178px);height:clamp(120px,15vw,178px);
-    display:flex;align-items:flex-end;justify-content:center;}
-  .mr-unit img{display:block;width:100%;height:100%;object-fit:contain;
-    filter:drop-shadow(0 6px 16px rgba(0,0,0,0.45));}
-  /* the static layer sits beneath the moving layer; hidden by default */
-  .mr-static{position:absolute;inset:0;opacity:0;}
-  .mr-cap{font-family:var(--font-mono);font-size:0.74rem;letter-spacing:0.14em;
-    color:var(--text-muted);margin-top:0.5rem;}
-  .mr-cap b{color:var(--gold-light);font-weight:500;}
-  @media(max-width:760px){
-    .mr-band{gap:0.2rem;}
-    .mr-unit{width:clamp(92px,29vw,120px);height:clamp(92px,29vw,120px);}
-  }
-  /* ambient float for motion-OK users; offset per unit so the band is alive, not in lock-step */
-  @media(prefers-reduced-motion:no-preference){
-    @keyframes mr-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
-    @keyframes mr-blip{0%,92%,100%{opacity:0;transform:scale(0.6);}96%{opacity:0.9;transform:scale(1);}}
-    .mr-unit{animation:mr-bob 4.6s ease-in-out infinite;}
-    .mr-unit:nth-child(1){animation-delay:-0.1s;}
-    .mr-unit:nth-child(2){animation-delay:-1.3s;animation-duration:5.1s;}
-    .mr-unit:nth-child(3){animation-delay:-2.4s;animation-duration:4.2s;}
-    .mr-unit:nth-child(4){animation-delay:-3.0s;animation-duration:5.4s;}
-    .mr-unit:nth-child(5){animation-delay:-1.9s;animation-duration:4.8s;}
-    .mr-unit:nth-child(6){animation-delay:-3.7s;animation-duration:5.0s;}
-    /* occasional sparkle blip near a couple of units */
-    .mr-unit::after{content:"";position:absolute;top:8%;right:10%;width:7px;height:7px;border-radius:50%;
-      background:var(--gold-light);box-shadow:0 0 8px var(--gold-light);opacity:0;pointer-events:none;}
-    .mr-unit:nth-child(1)::after{animation:mr-blip 7.5s ease-in-out infinite;}
-    .mr-unit:nth-child(4)::after{animation:mr-blip 9.2s ease-in-out infinite 2s;}
-  }
-  /* reduced motion: kill float + sparkle, hide the animated frame, show the still */
-  @media(prefers-reduced-motion:reduce){
-    .mr-unit{animation:none!important;}
-    .mr-unit::after{display:none!important;}
-    .mr-anim{opacity:0!important;}
-    .mr-static{opacity:1!important;}
-  }
-  </style>
-
-  <style id="szl-mobile-card-safety">
-  /* SZL org-card mobile safety net (ADDITIVE — Yachay). Overrides via later cascade. */
-  html, body { -webkit-tap-highlight-color: transparent; }
-  body { max-width: 100vw; overflow-x: hidden; }
-  img, canvas, svg, video, iframe { max-width: 100%; height: auto; }
-  /* intermediate tablet/large-phone layout: 5-col -> 2-col before the 560px 1-col fallback */
-  @media (max-width: 900px) and (min-width: 561px) {
-    .organ-grid, .sub-grid { grid-template-columns: repeat(2, 1fr) !important; }
-  }
-  @media (max-width: 560px) {
-    body { font-size: 16px; }
-    h1 { font-size: 24px; line-height: 1.2; }
-    a, button, [role="button"] { min-height: 44px; }
-    .organ-grid, .sub-grid { gap: 0.9rem; }
-  }
-  </style>
+  <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet"/>
+  <link rel="stylesheet" href="css/style.css"/>
 </head>
 <body>
-<!-- ================= SZL 3D HERO FIGURES (Three.js) — replaces chibi 2D avatars =================
-     Five distinct procedural low-poly 3D heroes, one per organ, each in its own scene cell.
-     Click a figure -> opens that organ's live HF Space. Mobile-first per SZL_MOBILE_FIRST_STANDARD.
-     Aesthetic: dark slate #0a0e14 cells, warm gold #d4a444 accents, white emissive highlights.
-     Apache-2.0 · Signed Yachay <yachay@szlholdings.dev> · Doctrine v11 LOCKED (749/14/163).
-     ADDITIVE: this block replaces ONLY the chibi avatar portrait row. -->
-<section id="szl-3d-heroes" style="padding:3rem 0 1rem;text-align:center;">
-  <div class="container">
-    <p class="mr-head" style="font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold-dim);margin-bottom:0.2rem;">The Mesh · Five Organs · Live 3D</p>
-    <div id="szl-hero-grid" role="group" aria-label="SZL Holdings five organs, interactive 3D figures">
-      <a class="szl-hero-cell" href="https://huggingface.co/spaces/SZLHOLDINGS/amaru"   data-organ="amaru"   aria-label="amaru — memory cortex (serpent + crystal core), open Space"><canvas data-organ="amaru" style="background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJiZyIgY3g9IjUwJSIgY3k9IjQyJSIgcj0iNzAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMTAxNTFmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDYwOTBmIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3Qgd2lkdGg9IjI1NiIgaGVpZ2h0PSIyNTYiIHJ4PSIxMiIgZmlsbD0idXJsKCNiZykiLz48ZyBmaWxsPSJub25lIiBzdHJva2U9IiNkNGE0NDQiIHN0cm9rZS13aWR0aD0iMTEiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgb3BhY2l0eT0iMC45NSI+PGVsbGlwc2UgY3g9IjEyOCIgY3k9IjE5MCIgcng9IjU4IiByeT0iMTciLz48ZWxsaXBzZSBjeD0iMTI4IiBjeT0iMTUwIiByeD0iNTAiIHJ5PSIxNSIvPjxlbGxpcHNlIGN4PSIxMjgiIGN5PSIxMTIiIHJ4PSI0MCIgcnk9IjEyIi8+PGVsbGlwc2UgY3g9IjEyOCIgY3k9IjgwIiByeD0iMjgiIHJ5PSI5Ii8+PC9nPjxwb2x5Z29uIHBvaW50cz0iMTI4LDk4IDE1MCwxMzIgMTI4LDE1NiAxMDYsMTMyIiBmaWxsPSIjZThjYzZhIi8+PHBvbHlnb24gcG9pbnRzPSIxMjgsNjAgMTQ0LDg0IDEyOCw5OCAxMTIsODQiIGZpbGw9IiNkNGE0NDQiLz48Y2lyY2xlIGN4PSIxNDIiIGN5PSI3NCIgcj0iNCIgZmlsbD0iI2Y0ZWVkZSIvPjwvc3ZnPg==');background-size:cover;background-position:center;"></canvas><span class="szl-hero-name">amaru</span><span class="szl-hero-role">cortex · serpent</span></a>
-      <a class="szl-hero-cell" href="https://huggingface.co/spaces/SZLHOLDINGS/sentra"  data-organ="sentra"  aria-label="sentra — immune shield, open Space"><canvas data-organ="sentra" style="background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJiZyIgY3g9IjUwJSIgY3k9IjQyJSIgcj0iNzAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMTAxNTFmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDYwOTBmIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3Qgd2lkdGg9IjI1NiIgaGVpZ2h0PSIyNTYiIHJ4PSIxMiIgZmlsbD0idXJsKCNiZykiLz48ZyBmaWxsPSJub25lIiBzdHJva2U9IiNkNGE0NDQiIHN0cm9rZS13aWR0aD0iMi40IiBvcGFjaXR5PSIwLjkiPjxwb2x5Z29uIHBvaW50cz0iMTI4LDU2IDE5NiwxMDQgMTcwLDE4MiA4NiwxODIgNjAsMTA0Ii8+PHBvbHlnb24gcG9pbnRzPSIxMjgsNTYgMTcwLDE4MiA2MCwxMDQiLz48cG9seWdvbiBwb2ludHM9IjEyOCw1NiA4NiwxODIgMTk2LDEwNCIvPjxsaW5lIHgxPSI2MCIgeTE9IjEwNCIgeDI9IjE5NiIgeTI9IjEwNCIvPjxsaW5lIHgxPSIxMjgiIHkxPSI1NiIgeDI9IjEyOCIgeTI9IjE4MiIvPjwvZz48cG9seWdvbiBwb2ludHM9IjEwMCwxMTggMTU2LDExOCAxMjgsMTUwIiBmaWxsPSIjZDRhNDQ0IiBvcGFjaXR5PSIwLjU1Ii8+PGNpcmNsZSBjeD0iNjAiIGN5PSIxMzgiIHI9IjYiIGZpbGw9IiNmZjVhNDQiLz48Y2lyY2xlIGN4PSIyMDAiIGN5PSIxMjAiIHI9IjYiIGZpbGw9IiNmZjVhNDQiLz48Y2lyY2xlIGN4PSI3OCIgY3k9IjkyIiByPSI1IiBmaWxsPSIjNjY4OGZmIi8+PGNpcmNsZSBjeD0iMTI4IiBjeT0iMTIwIiByPSIzNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZThjYzZhIiBzdHJva2Utd2lkdGg9IjQiIG9wYWNpdHk9IjAuOCIvPjwvc3ZnPg==');background-size:cover;background-position:center;"></canvas><span class="szl-hero-name">sentra</span><span class="szl-hero-role">immune · shield</span></a>
-      <a class="szl-hero-cell" href="https://huggingface.co/spaces/SZLHOLDINGS/rosie"   data-organ="rosie"   aria-label="rosie — operator console (HUD rings), open Space"><canvas data-organ="rosie" style="background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJiZyIgY3g9IjUwJSIgY3k9IjQyJSIgcj0iNzAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMTAxNTFmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDYwOTBmIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3Qgd2lkdGg9IjI1NiIgaGVpZ2h0PSIyNTYiIHJ4PSIxMiIgZmlsbD0idXJsKCNiZykiLz48Y2lyY2xlIGN4PSIxMjgiIGN5PSIxMjgiIHI9IjQ0IiBmaWxsPSIjMTExNjFmIiBzdHJva2U9IiNkNGE0NDQiIHN0cm9rZS13aWR0aD0iMyIvPjxjaXJjbGUgY3g9IjEyOCIgY3k9IjEyOCIgcj0iMjIiIGZpbGw9IiNmNGVlZGUiIG9wYWNpdHk9IjAuOTIiLz48ZyBzdHJva2U9IiNkNGE0NDQiIHN0cm9rZS13aWR0aD0iNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBvcGFjaXR5PSIwLjg1Ij48bGluZSB4MT0iNjAiIHkxPSIxNzAiIHgyPSI2MCIgeTI9IjEyMCIvPjxsaW5lIHgxPSIxMDAiIHkxPSIxODAiIHgyPSIxMDAiIHkyPSIxMTAiLz48bGluZSB4MT0iMTU2IiB5MT0iMTgwIiB4Mj0iMTU2IiB5Mj0iMTEwIi8+PGxpbmUgeDE9IjE5NiIgeTE9IjE3MCIgeDI9IjE5NiIgeTI9IjEyMCIvPjwvZz48cmVjdCB4PSI1NiIgeT0iMTc2IiB3aWR0aD0iMTQ0IiBoZWlnaHQ9IjgiIHJ4PSI0IiBmaWxsPSIjZDRhNDQ0Ii8+PGNpcmNsZSBjeD0iMTI4IiBjeT0iMTI4IiByPSI2MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZThjYzZhIiBzdHJva2Utd2lkdGg9IjEuNiIgb3BhY2l0eT0iMC41Ii8+PC9zdmc+');background-size:cover;background-position:center;"></canvas><span class="szl-hero-name">rosie</span><span class="szl-hero-role">operator · console</span></a>
-      <a class="szl-hero-cell" href="https://huggingface.co/spaces/SZLHOLDINGS/killinchu" data-organ="killinchu" aria-label="killinchu — kestrel drone intel, open Space"><canvas data-organ="killinchu" style="background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJiZyIgY3g9IjUwJSIgY3k9IjQyJSIgcj0iNzAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMTAxNTFmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDYwOTBmIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3Qgd2lkdGg9IjI1NiIgaGVpZ2h0PSIyNTYiIHJ4PSIxMiIgZmlsbD0idXJsKCNiZykiLz48cGF0aCBkPSJNNzAgMTQwIFExMjggOTYgMTg2IDE0MCBRMTUwIDEyOCAxMjggMTI4IFExMDYgMTI4IDcwIDE0MFoiIGZpbGw9IiNkNGE0NDQiLz48cG9seWdvbiBwb2ludHM9IjEyOCwxMTIgMTM0LDEyOCAxMjIsMTI4IiBmaWxsPSIjZThjYzZhIi8+PGcgZmlsbD0iI2Y0ZWVkZSIgb3BhY2l0eT0iMC45Ij48Y2lyY2xlIGN4PSI2NCIgY3k9IjEyMCIgcj0iMy4yIi8+PGNpcmNsZSBjeD0iOTIiIGN5PSI5NiIgcj0iMi42Ii8+PGNpcmNsZSBjeD0iMTYwIiBjeT0iOTIiIHI9IjMiLz48Y2lyY2xlIGN4PSIxOTYiIGN5PSIxMTgiIHI9IjMuNCIvPjxjaXJjbGUgY3g9IjE1MCIgY3k9IjE2MCIgcj0iMi42Ii8+PGNpcmNsZSBjeD0iMTAwIiBjeT0iMTY4IiByPSIzIi8+PGNpcmNsZSBjeD0iMjAwIiBjeT0iMTUwIiByPSIyLjQiLz48Y2lyY2xlIGN4PSI1OCIgY3k9IjE1OCIgcj0iMi42Ii8+PGNpcmNsZSBjeD0iMTI4IiBjeT0iNzgiIHI9IjIuNCIvPjwvZz48ZyBmaWxsPSIjNjY4OGZmIiBvcGFjaXR5PSIwLjgiPjxjaXJjbGUgY3g9IjEyMCIgY3k9IjE1MCIgcj0iMi42Ii8+PGNpcmNsZSBjeD0iMTcwIiBjeT0iMTQwIiByPSIyLjYiLz48L2c+PC9zdmc+');background-size:cover;background-position:center;"></canvas><span class="szl-hero-name">killinchu</span><span class="szl-hero-role">kestrel · drone</span></a>
-      <a class="szl-hero-cell" href="https://huggingface.co/spaces/SZLHOLDINGS/a11oy"   data-organ="a11oy"   aria-label="a11oy — router knot-graph (Khipu cords), open Space"><canvas data-organ="a11oy" style="background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJiZyIgY3g9IjUwJSIgY3k9IjQyJSIgcj0iNzAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMTAxNTFmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDYwOTBmIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3Qgd2lkdGg9IjI1NiIgaGVpZ2h0PSIyNTYiIHJ4PSIxMiIgZmlsbD0idXJsKCNiZykiLz48ZyBzdHJva2U9IiNkNGE0NDQiIHN0cm9rZS13aWR0aD0iMi4yIiBvcGFjaXR5PSIwLjg1Ij48bGluZSB4MT0iMTI4IiB5MT0iNzIiIHgyPSIxODYiIHkyPSIxMDQiLz48bGluZSB4MT0iMTg2IiB5MT0iMTA0IiB4Mj0iMTk2IiB5Mj0iMTY4Ii8+PGxpbmUgeDE9IjE5NiIgeTE9IjE2OCIgeDI9IjE0MCIgeTI9IjE5NiIvPjxsaW5lIHgxPSIxNDAiIHkxPSIxOTYiIHgyPSI4NiIgeTI9IjE4NCIvPjxsaW5lIHgxPSI4NiIgeTE9IjE4NCIgeDI9IjY0IiB5Mj0iMTI4Ii8+PGxpbmUgeDE9IjY0IiB5MT0iMTI4IiB4Mj0iMTI4IiB5Mj0iNzIiLz48bGluZSB4MT0iMTI4IiB5MT0iNzIiIHgyPSI5NiIgeTI9Ijk2Ii8+PGxpbmUgeDE9Ijk2IiB5MT0iOTYiIHgyPSIxNTAiIHkyPSIxNDAiLz48bGluZSB4MT0iMTUwIiB5MT0iMTQwIiB4Mj0iMTg2IiB5Mj0iMTA0Ii8+PGxpbmUgeDE9IjE1MCIgeTE9IjE0MCIgeDI9IjE0MCIgeTI9IjE5NiIvPjxsaW5lIHgxPSI5NiIgeTE9Ijk2IiB4Mj0iNjQiIHkyPSIxMjgiLz48bGluZSB4MT0iMTUwIiB5MT0iMTQwIiB4Mj0iMTk2IiB5Mj0iMTY4Ii8+PC9nPjxjaXJjbGUgY3g9IjEyOCIgY3k9IjcyIiByPSI3IiBmaWxsPSIjZDRhNDQ0Ii8+PGNpcmNsZSBjeD0iMTg2IiBjeT0iMTA0IiByPSI3IiBmaWxsPSIjZDRhNDQ0Ii8+PGNpcmNsZSBjeD0iMTk2IiBjeT0iMTY4IiByPSI3IiBmaWxsPSIjZDRhNDQ0Ii8+PGNpcmNsZSBjeD0iMTQwIiBjeT0iMTk2IiByPSI3IiBmaWxsPSIjZDRhNDQ0Ii8+PGNpcmNsZSBjeD0iODYiIGN5PSIxODQiIHI9IjciIGZpbGw9IiNkNGE0NDQiLz48Y2lyY2xlIGN4PSI2NCIgY3k9IjEyOCIgcj0iNyIgZmlsbD0iI2Q0YTQ0NCIvPjxjaXJjbGUgY3g9Ijk2IiBjeT0iOTYiIHI9IjciIGZpbGw9IiNkNGE0NDQiLz48Y2lyY2xlIGN4PSIxNTAiIGN5PSIxNDAiIHI9IjciIGZpbGw9IiNkNGE0NDQiLz48Y2lyY2xlIGN4PSI5NiIgY3k9Ijk2IiByPSI3IiBmaWxsPSIjZjRlZWRlIi8+PC9zdmc+');background-size:cover;background-position:center;"></canvas><span class="szl-hero-name">a11oy</span><span class="szl-hero-role">router · wires</span></a>
-    </div>
-    <p style="font-family:var(--font-mono);font-size:0.68rem;color:var(--text-dim);margin-top:0.9rem;letter-spacing:0.04em;">Interactive 3D where WebGL is supported · rendered preview otherwise · tap a figure to open its Space</p>
-  </div>
-</section>
-
-<style id="szl-3d-heroes-style">
-  #szl-hero-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.1rem;margin-top:1.4rem;}
-  .szl-hero-cell{display:flex;flex-direction:column;align-items:center;background:#0a0e14;
-    border:1px solid rgba(212,164,68,0.22);border-radius:16px;padding:0.6rem 0.5rem 0.9rem;
-    text-decoration:none;border-bottom:1px solid rgba(212,164,68,0.22);
-    transition:transform .18s,border-color .18s,box-shadow .18s;min-height:44px;}
-  .szl-hero-cell:hover,.szl-hero-cell:focus-visible{transform:translateY(-4px);
-    border-color:#d4a444;box-shadow:0 12px 30px rgba(0,0,0,0.5);outline:none;}
-  .szl-hero-cell canvas{width:100%;aspect-ratio:1/1;display:block;border-radius:12px;
-    background:radial-gradient(circle at 50% 40%,#10151f,#06090f 70%);touch-action:none;}
-  .szl-hero-name{font-family:var(--font-head,'Cinzel',serif);font-size:1.05rem;color:#d4a444;margin-top:0.55rem;}
-  .szl-hero-role{font-family:var(--font-mono,monospace);font-size:0.62rem;color:#8c7d5e;letter-spacing:0.06em;text-transform:uppercase;}
-  @media(max-width:900px) and (min-width:561px){#szl-hero-grid{grid-template-columns:repeat(3,1fr);}}
-  @media(max-width:560px){#szl-hero-grid{grid-template-columns:repeat(2,1fr);gap:0.8rem;}
-    .szl-hero-cell{width:80vw;max-width:none;margin:0 auto;}
-    #szl-hero-grid .szl-hero-cell:last-child{grid-column:1 / -1;width:80vw;}}
-  @media(prefers-reduced-motion:reduce){.szl-hero-cell{transition:none;}}
-</style>
-
-<script type="importmap">
-{ "imports": { "three": "https://unpkg.com/three@0.171.0/build/three.module.js" } }
-</script>
-<script type="module">
-import * as THREE from 'three';
-
-const SZL_MOBILE  = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0);
-const SZL_REDUCED = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-const PR = Math.min(window.devicePixelRatio || 1, SZL_MOBILE ? 1.5 : 2);
-const GOLD = 0xd4a444, GOLD_HI = 0xe8cc6a, WHITE = 0xffffff, SLATE = 0x0a0e14;
-
-const cells = [];
-
-function makeScene(canvas, organ){
-  const renderer = new THREE.WebGLRenderer({
-    canvas, antialias: !SZL_MOBILE, alpha: true,
-    powerPreference: SZL_MOBILE ? 'low-power' : 'high-performance'
-  });
-  renderer.setPixelRatio(PR);
-  // WebGL is live for this cell — drop the SVG poster fallback so the real 3D shows cleanly.
-  canvas.style.backgroundImage = 'none';
-  const scene = new THREE.Scene();
-  scene.background = null;
-  const cam = new THREE.PerspectiveCamera(42, 1, 0.1, 100);
-  cam.position.set(0, 0.4, 6.2);
-
-  scene.add(new THREE.AmbientLight(0x404a5e, 1.1));
-  const key = new THREE.DirectionalLight(GOLD_HI, 1.6); key.position.set(3,4,5); scene.add(key);
-  const rim = new THREE.DirectionalLight(0x6688ff, 0.7); rim.position.set(-4,-2,-3); scene.add(rim);
-  const pt = new THREE.PointLight(WHITE, 0.9, 20); pt.position.set(0,0,4); scene.add(pt);
-
-  const root = new THREE.Group(); scene.add(root);
-  const goldMat  = new THREE.MeshStandardMaterial({color:GOLD, metalness:0.85, roughness:0.32, emissive:0x2a1d08, emissiveIntensity:0.4});
-  const slateMat = new THREE.MeshStandardMaterial({color:0x1b2230, metalness:0.6, roughness:0.5});
-  const emitMat  = new THREE.MeshStandardMaterial({color:WHITE, emissive:WHITE, emissiveIntensity:1.4, metalness:0.2, roughness:0.3});
-  const goldEmit = new THREE.MeshStandardMaterial({color:GOLD_HI, emissive:GOLD, emissiveIntensity:1.1});
-
-  const extras = {}; // per-organ animated handles
-
-  if(organ==='amaru'){
-    // serpent (tube) coiled around a glowing crystal core
-    const core = new THREE.Mesh(new THREE.IcosahedronGeometry(0.85,0), emitMat.clone());
-    core.material.color.setHex(GOLD_HI); core.material.emissive.setHex(GOLD);
-    root.add(core); extras.core = core;
-    const pts=[]; const turns=3.2, N=160;
-    for(let i=0;i<=N;i++){const t=i/N; const a=t*Math.PI*2*turns; const r=1.5-0.35*t;
-      pts.push(new THREE.Vector3(Math.cos(a)*r, (t-0.5)*3.0, Math.sin(a)*r));}
-    const tube = new THREE.Mesh(new THREE.TubeGeometry(new THREE.CatmullRomCurve3(pts),200,0.16,10,false), goldMat.clone());
-    root.add(tube);
-    const head = new THREE.Mesh(new THREE.ConeGeometry(0.26,0.6,8), goldEmit.clone());
-    const hp = pts[pts.length-1]; head.position.copy(hp); root.add(head);
-    const eyeL=new THREE.Mesh(new THREE.SphereGeometry(0.05,8,8),emitMat); eyeL.position.copy(hp).add(new THREE.Vector3(0.12,0.1,0.12)); root.add(eyeL);
-  }
-  else if(organ==='sentra'){
-    // icosahedron shield with hex panels + threat dots absorbed
-    const shield = new THREE.Mesh(new THREE.IcosahedronGeometry(1.5,1),
-      new THREE.MeshStandardMaterial({color:0x16202f, metalness:0.7, roughness:0.35, flatShading:true}));
-    root.add(shield);
-    const wire = new THREE.LineSegments(new THREE.WireframeGeometry(shield.geometry),
-      new THREE.LineBasicMaterial({color:GOLD})); root.add(wire);
-    const lambda = new THREE.Mesh(new THREE.TorusGeometry(0.55,0.07,8,30), goldEmit.clone());
-    root.add(lambda); extras.lambda=lambda;
-    const threats=[]; const tg=new THREE.SphereGeometry(0.08,8,8);
-    const tm=new THREE.MeshStandardMaterial({color:0xff5a44,emissive:0xff5a44,emissiveIntensity:1.2});
-    for(let i=0;i<8;i++){const m=new THREE.Mesh(tg,tm.clone());
-      m.userData={a:Math.random()*6.28, r:2.4+Math.random()*0.6, sp:0.6+Math.random()*0.5};
-      root.add(m); threats.push(m);} extras.threats=threats;
-  }
-  else if(organ==='rosie'){
-    // torus + sphere stack (head + HUD rings) + pulsing data lines
-    const head = new THREE.Mesh(new THREE.SphereGeometry(0.7,24,24), slateMat.clone());
-    head.material.color.setHex(0x1d2636); head.position.y=0.2; root.add(head);
-    const visor = new THREE.Mesh(new THREE.TorusGeometry(0.55,0.09,10,30), goldEmit.clone());
-    visor.rotation.x=Math.PI/2; visor.position.y=0.2; root.add(visor);
-    const rings=[];
-    for(let i=0;i<3;i++){const r=new THREE.Mesh(new THREE.TorusGeometry(1.0+i*0.42,0.025,8,48),
-      new THREE.MeshStandardMaterial({color:GOLD,emissive:GOLD,emissiveIntensity:0.6,transparent:true,opacity:0.8-i*0.18}));
-      r.rotation.x=Math.PI/2.1; r.position.y=-0.1; root.add(r); rings.push(r);} extras.rings=rings;
-    const base=new THREE.Mesh(new THREE.CylinderGeometry(0.9,1.05,0.18,32), slateMat.clone()); base.position.y=-1.25; root.add(base);
-    // pulsing data lines (vertical)
-    const lines=[]; for(let i=0;i<6;i++){const a=i/6*6.28;
-      const m=new THREE.Mesh(new THREE.BoxGeometry(0.05,1.2,0.05),goldEmit.clone());
-      m.position.set(Math.cos(a)*1.3,-0.55,Math.sin(a)*1.3); root.add(m); lines.push(m);} extras.lines=lines;
-  }
-  else if(organ==='killinchu'){
-    // low-poly kestrel over faceted terrain + 53 drone-dots circling
-    const terrain=new THREE.Mesh(new THREE.ConeGeometry(2.3,0.7,3,1),
-      new THREE.MeshStandardMaterial({color:0x14202c,metalness:0.4,roughness:0.7,flatShading:true}));
-    terrain.position.y=-1.6; terrain.rotation.y=0.4; root.add(terrain);
-    const bird=new THREE.Group(); bird.position.y=0.5; root.add(bird); extras.bird=bird;
-    const body=new THREE.Mesh(new THREE.ConeGeometry(0.22,1.0,6),goldMat.clone());
-    body.rotation.x=Math.PI/2; bird.add(body);
-    const wgeo=new THREE.BufferGeometry(); const wv=new Float32Array([0,0,0, 1.5,0.15,-0.5, 1.3,-0.05,0.4]);
-    wgeo.setAttribute('position',new THREE.BufferAttribute(wv,3)); wgeo.computeVertexNormals();
-    const wmat=new THREE.MeshStandardMaterial({color:GOLD_HI,metalness:0.7,roughness:0.4,side:THREE.DoubleSide,flatShading:true});
-    const wingL=new THREE.Mesh(wgeo,wmat); const wingR=new THREE.Mesh(wgeo,wmat); wingR.scale.x=-1;
-    bird.add(wingL); bird.add(wingR); extras.wingL=wingL; extras.wingR=wingR;
-    const eye=new THREE.Mesh(new THREE.SphereGeometry(0.06,8,8),emitMat); eye.position.set(0.08,0.05,0.5); bird.add(eye);
-    // 53 drone-dots
-    const dg=new THREE.SphereGeometry(0.04,6,6);
-    const dm=new THREE.MeshStandardMaterial({color:WHITE,emissive:0x88ccff,emissiveIntensity:1.0});
-    const drones=new THREE.InstancedMesh(dg,dm,53); const dummy=new THREE.Object3D(); const dd=[];
-    for(let i=0;i<53;i++){dd.push({a:Math.random()*6.28, r:1.6+Math.random()*0.9, y:-0.3+Math.random()*1.4, sp:0.4+Math.random()*0.6});}
-    root.add(drones); extras.drones=drones; extras.dd=dd; extras.dummy=dummy;
-  }
-  else if(organ==='a11oy'){
-    // 16-node icosahedron knot-graph (Khipu cords) + edge pulses
-    const ico=new THREE.IcosahedronGeometry(1.5,0);
-    const pos=ico.attributes.position; const nodes=[]; const seen=new Set();
-    for(let i=0;i<pos.count;i++){const v=new THREE.Vector3().fromBufferAttribute(pos,i);
-      const k=v.toArray().map(n=>n.toFixed(2)).join(','); if(seen.has(k))continue; seen.add(k); nodes.push(v);}
-    const ng=new THREE.SphereGeometry(0.13,12,12);
-    nodes.forEach(v=>{const m=new THREE.Mesh(ng,goldEmit.clone()); m.position.copy(v); root.add(m);});
-    // knotted edges
-    const edgeMat=new THREE.LineBasicMaterial({color:GOLD,transparent:true,opacity:0.6});
-    const segs=[]; for(let i=0;i<nodes.length;i++)for(let j=i+1;j<nodes.length;j++){
-      if(nodes[i].distanceTo(nodes[j])<1.95){segs.push(nodes[i],nodes[j]);}}
-    const eg=new THREE.BufferGeometry().setFromPoints(segs);
-    root.add(new THREE.LineSegments(eg, edgeMat));
-    // pulse traveling along edges
-    const pulse=new THREE.Mesh(new THREE.SphereGeometry(0.1,10,10),emitMat); root.add(pulse);
-    extras.pulse=pulse; extras.segs=segs;
-  }
-
-  // touch / mouse rotate (additive — auto-rotate continues unless reduced motion)
-  let drag=false, px=0, py=0, vy=0, vx=0;
-  const dn=e=>{drag=true; const p=e.touches?e.touches[0]:e; px=p.clientX; py=p.clientY;};
-  const mv=e=>{if(!drag)return; const p=e.touches?e.touches[0]:e;
-    vy=(p.clientX-px)*0.01; vx=(p.clientY-py)*0.01; root.rotation.y+=vy; root.rotation.x+=vx;
-    px=p.clientX; py=p.clientY; if(e.touches)e.preventDefault();};
-  const up=()=>{drag=false;};
-  canvas.addEventListener('mousedown',dn); canvas.addEventListener('mousemove',mv); window.addEventListener('mouseup',up);
-  canvas.addEventListener('touchstart',dn,{passive:true}); canvas.addEventListener('touchmove',mv,{passive:false}); canvas.addEventListener('touchend',up);
-
-  function resize(){const w=canvas.clientWidth||220, h=canvas.clientHeight||220;
-    if(canvas.width!==w*PR||canvas.height!==h*PR){renderer.setSize(w,h,false); cam.aspect=w/h; cam.updateProjectionMatrix();}}
-
-  cells.push({renderer,scene,cam,root,organ,extras,resize});
-}
-
-// Resilient init: if WebGL is unavailable or the module/importmap is stripped by a
-// host sanitizer (e.g. the HF org-card iframe), each canvas keeps its inline SVG
-// poster background so the mesh is NEVER an empty box. Live 3D paints over it when supported.
-document.querySelectorAll('#szl-hero-grid canvas').forEach(function(c){
-  try { makeScene(c, c.dataset.organ); }
-  catch(err){ /* keep poster fallback for this organ */ }
-});
-
-let t0=performance.now();
-function loop(now){
-  requestAnimationFrame(loop);
-  if(document.hidden) return;
-  const t=(now-t0)/1000;
-  for(const c of cells){
-    c.resize();
-    if(!SZL_REDUCED) c.root.rotation.y += 0.0045;
-    const e=c.extras;
-    if(c.organ==='amaru' && e.core){ e.core.rotation.y+=0.02; e.core.scale.setScalar(1+Math.sin(t*2)*0.06); }
-    if(c.organ==='sentra'){ if(e.lambda)e.lambda.rotation.z+=0.02;
-      (e.threats||[]).forEach(m=>{m.userData.r-=m.userData.sp*0.012; if(m.userData.r<0.6){m.userData.r=2.6;}
-        m.userData.a+=0.02; m.position.set(Math.cos(m.userData.a)*m.userData.r, Math.sin(m.userData.a*1.3)*0.6, Math.sin(m.userData.a)*m.userData.r);}); }
-    if(c.organ==='rosie'){ (e.rings||[]).forEach((r,i)=>r.rotation.z+=0.01*(i+1));
-      (e.lines||[]).forEach((l,i)=>{l.scale.y=0.6+0.5*(0.5+0.5*Math.sin(t*3+i)); l.material.emissiveIntensity=0.6+0.6*(0.5+0.5*Math.sin(t*3+i));}); }
-    if(c.organ==='killinchu'){ if(e.bird)e.bird.position.y=0.5+Math.sin(t*1.5)*0.12;
-      if(e.wingL){const f=Math.sin(t*5)*0.5; e.wingL.rotation.z=f; e.wingR.rotation.z=-f;}
-      if(e.drones){const dummy=e.dummy; e.dd.forEach((d,i)=>{d.a+=d.sp*0.01;
-        dummy.position.set(Math.cos(d.a)*d.r,d.y+Math.sin(t+d.a)*0.1,Math.sin(d.a)*d.r);
-        dummy.updateMatrix(); e.drones.setMatrixAt(i,dummy.matrix);}); e.drones.instanceMatrix.needsUpdate=true;} }
-    if(c.organ==='a11oy' && e.pulse && e.segs.length){
-      const seg=Math.floor(t*0.7)%(e.segs.length/2); const a=e.segs[seg*2], b=e.segs[seg*2+1];
-      const f=(t*0.7)%1; e.pulse.position.lerpVectors(a,b,f); }
-    c.renderer.render(c.scene,c.cam);
-  }
-}
-requestAnimationFrame(loop);
-</script>
-<!-- ================= /SZL 3D HERO FIGURES ================= -->
-
-<!-- BANNER — UNTOUCHED (5-hero painterly artwork is sacred) -->
-<section id="banner" style="padding:0;border-top:none;">
-  <img src="https://huggingface.co/spaces/SZLHOLDINGS/README/resolve/main/assets/szl_banner.png" alt="SZL Holdings — the five-hero governed agentic mesh team" style="display:block;width:100%;height:auto;"/>
-</section>
-
-
-
-<!-- flag block: five hero portraits as links + org name + icon links + footer -->
-<main id="main">
-<section style="padding:3.5rem 0;text-align:center;">
-  <div class="container">
-
-    <!-- chibi portrait row replaced by 3D heroes (above) + live mesh panel (below) — Yachay -->
-
-    <h1 style="margin-bottom:1.4rem;">SZL&nbsp;Holdings</h1>
-
-    <div style="display:flex;justify-content:center;gap:1.6rem;font-size:1.8rem;">
-      <a href="https://orcid.org/0009-0001-0110-4173" aria-label="ORCID" title="ORCID">✦</a>
-      <a href="https://github.com/szl-holdings" aria-label="GitHub" title="GitHub">⌬</a>
-      <a href="https://huggingface.co/spaces/SZLHOLDINGS/uds-demo" aria-label="UDS Demo" title="UDS Demo">▶</a>
-    </div>
-
-  </div>
-</section>
-</main>
-<!-- ============ LIVE MESH + LATEST RECEIPTS (ADDITIVE — Yachay) ============
-     Polls /healthz of each flagship live (badge flips green/red) and pulls the
-     5 most recent Khipu receipts across the mesh. Apache-2.0. Doctrine v11 LOCKED. -->
-<section id="szl-live-mesh" style="padding:2.2rem 0;">
-  <div class="container">
-    <p class="mr-head" style="font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold-dim);margin-bottom:0.2rem;text-align:center;">Live Mesh · /healthz</p>
-    <div id="szl-mesh-grid" style="display:grid;grid-template-columns:repeat(5,1fr);gap:0.7rem;margin:1rem 0 0;">
-      <div class="szl-mesh-cell" data-organ="amaru"><span class="szl-mesh-name">amaru</span><span class="szl-mesh-badge" data-code="…">…</span></div>
-      <div class="szl-mesh-cell" data-organ="sentra"><span class="szl-mesh-name">sentra</span><span class="szl-mesh-badge" data-code="…">…</span></div>
-      <div class="szl-mesh-cell" data-organ="rosie"><span class="szl-mesh-name">rosie</span><span class="szl-mesh-badge" data-code="…">…</span></div>
-      <div class="szl-mesh-cell" data-organ="killinchu"><span class="szl-mesh-name">killinchu</span><span class="szl-mesh-badge" data-code="…">…</span></div>
-      <div class="szl-mesh-cell" data-organ="a11oy"><span class="szl-mesh-name">a11oy</span><span class="szl-mesh-badge" data-code="…">…</span></div>
-    </div>
-    <p id="szl-receipt-counter" style="text-align:center;font-family:var(--font-mono);font-size:0.8rem;color:var(--gold-light);margin-top:1.1rem;">signed receipts across the mesh: <b data-receipts>—</b></p>
-    <div style="max-width:760px;margin:1.2rem auto 0;">
-      <p class="mr-head" style="font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold-dim);margin-bottom:0.4rem;text-align:center;">Latest signed receipts</p>
-      <ul id="szl-receipt-list" style="list-style:none;padding:0;margin:0;font-family:var(--font-mono);font-size:0.72rem;color:var(--text-muted);">
-        <li style="opacity:0.6;text-align:center;padding:0.5rem;">polling Khipu DAG…</li>
-      </ul>
-    </div>
-  </div>
-</section>
-<style id="szl-live-mesh-style">
-  .szl-mesh-cell{background:var(--glass,rgba(45,27,78,0.55));border:1px solid var(--border,rgba(212,175,55,0.18));border-radius:12px;padding:0.7rem 0.4rem;text-align:center;display:flex;flex-direction:column;gap:0.4rem;min-height:44px;}
-  .szl-mesh-name{font-family:var(--font-mono,monospace);font-size:0.72rem;color:var(--text-muted,#a090c0);letter-spacing:0.04em;}
-  .szl-mesh-badge{font-family:var(--font-mono,monospace);font-size:0.78rem;font-weight:600;padding:0.18rem 0.4rem;border-radius:6px;background:rgba(255,255,255,0.06);color:var(--text-dim,#7060a0);}
-  .szl-mesh-badge.ok{background:rgba(61,220,132,0.16);color:#3ddc84;}
-  .szl-mesh-badge.down{background:rgba(255,90,68,0.16);color:#ff7a59;}
-  #szl-receipt-list li{padding:0.4rem 0.6rem;border-bottom:1px solid var(--border,rgba(212,175,55,0.12));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
-  #szl-receipt-list li b{color:var(--gold-light,#e8cc6a);}
-  @media(max-width:900px) and (min-width:561px){#szl-mesh-grid{grid-template-columns:repeat(3,1fr);}}
-  @media(max-width:560px){#szl-mesh-grid{grid-template-columns:repeat(2,1fr);}}
-</style>
-<script>
-(function(){
-  var ORGANS=["amaru","sentra","rosie","killinchu","a11oy"];
-  var receipts=[];
-  function base(o){return "https://szlholdings-"+o+".hf.space";}
-  function pollHealth(){
-    ORGANS.forEach(function(o){
-      var cell=document.querySelector('.szl-mesh-cell[data-organ="'+o+'"] .szl-mesh-badge');
-      if(!cell)return;
-      fetch(base(o)+"/healthz",{mode:"cors",cache:"no-store"}).then(function(r){
-        cell.textContent=r.status; cell.dataset.code=r.status;
-        cell.className="szl-mesh-badge "+(r.ok?"ok":"down");
-      }).catch(function(){ cell.textContent="—"; cell.className="szl-mesh-badge down"; });
-    });
-  }
-  function pollReceipts(){
-    var total=0, got=0;
-    ORGANS.forEach(function(o){
-      // metrics counter for running total
-      fetch(base(o)+"/metrics",{mode:"cors",cache:"no-store"}).then(function(r){return r.text();}).then(function(t){
-        var m=t.match(/(\w*receipts_total)\s+(\d+)/);
-        if(m){ total+=parseInt(m[2],10); }
-      }).catch(function(){}).finally(function(){
-        got++; if(got>=ORGANS.length){var b=document.querySelector('[data-receipts]'); if(b&&total>0)b.textContent=total.toLocaleString();}
-      });
-      // latest receipts
-      fetch(base(o)+"/api/"+o+"/v2/khipu/lmdb/tail?n=2",{mode:"cors",cache:"no-store"}).then(function(r){return r.json();}).then(function(j){
-        var arr=(j&&j.receipts)||j&&j.tail||[];
-        arr.forEach(function(rec){ receipts.push({organ:o, id:(rec.id||rec.hash||rec.receipt_id||"").toString().slice(0,16), ts:rec.ts||rec.timestamp||""}); });
-        renderReceipts();
-      }).catch(function(){});
-    });
-  }
-  function renderReceipts(){
-    var ul=document.getElementById("szl-receipt-list"); if(!ul)return;
-    var latest=receipts.slice(-5).reverse();
-    if(!latest.length)return;
-    ul.innerHTML=latest.map(function(r){return '<li><b>'+r.organ+'</b> · '+(r.id||'receipt')+' <span style="opacity:0.6;">'+(r.ts||'')+'</span></li>';}).join("");
-  }
-  pollHealth(); pollReceipts();
-  setInterval(pollHealth,5000); setInterval(pollReceipts,15000);
-})();
-</script>
-<!-- ============ /LIVE MESH + LATEST RECEIPTS ============ -->
-
-
-<footer style="text-align:center;padding:1.5rem 0;border-top:1px solid var(--border);">
-  <!-- Stills strip: the previous static team picture, relocated here from below the banner
-       when the live Mission Room action band replaced it. Kept as a reference still. -->
-  <!-- team-portrait still removed: replaced by 3D heroes (Yachay) -->
-  <span class="mono" style="font-size:0.72rem;color:var(--text-dim);">— szl-holdings/.github @ d304951 · Doctrine v11 LOCKED · 749 declarations · 14 unique axioms · 163 sorries · ORCID 0009-0001-0110-4173</span>
-</footer>
-
-<!-- AMBIENT EMOJI LAYER (Wave4, additive) — 5 character emojis hanging around
-     the page edges via position:fixed. Decorative (aria-hidden), placed at the
-     end of <body> so that if a host strips the <style> block (e.g. the HF org-card
-     HTML sanitizer), these small 64px images fall to the page bottom instead of
-     overlaying content; explicit width/height attributes keep them small even
-     with CSS removed. Animation is gated behind prefers-reduced-motion: no-preference. -->
-<!-- ambient chibi emoji layer removed: replaced by 3D heroes (Yachay) -->
+  <a class="skip" href="#stage">Skip to character roster</a>
+
+  <header class="roster-header">THE MESH · FIVE ORGANS · LIVE 3D · CHARACTER ROSTER</header>
+
+  <!-- 3D character-select stage. Replaces both the old flat 5-tile grid and the
+       static AI-illustration hero banner. -->
+  <main id="stage" aria-label="SZL Holdings five-organ 3D character roster">
+    <canvas id="roster" aria-hidden="true"></canvas>
+    <div id="loading">INITIALIZING ROSTER…</div>
+    <!-- Hidden focusable proxies for keyboard nav (Tab cycles, Enter opens Space) -->
+    <div id="a11y-heroes" class="a11y-heroes" aria-label="Hero select"></div>
+
+    <!-- WebGL fallback: the existing 5-tile SVG grid (graceful degradation) -->
+    <section id="fallback" hidden aria-label="SZL Holdings five organs (static)">
+      <div class="fb-grid">
+      <a class="fb-cell" href="https://huggingface.co/spaces/SZLHOLDINGS/amaru" aria-label="AMARU — cortex · serpent. Open Space."><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJiZyIgY3g9IjUwJSIgY3k9IjQyJSIgcj0iNzAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMTAxNTFmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDYwOTBmIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3Qgd2lkdGg9IjI1NiIgaGVpZ2h0PSIyNTYiIHJ4PSIxMiIgZmlsbD0idXJsKCNiZykiLz48ZyBmaWxsPSJub25lIiBzdHJva2U9IiNkNGE0NDQiIHN0cm9rZS13aWR0aD0iMTEiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgb3BhY2l0eT0iMC45NSI+PGVsbGlwc2UgY3g9IjEyOCIgY3k9IjE5MCIgcng9IjU4IiByeT0iMTciLz48ZWxsaXBzZSBjeD0iMTI4IiBjeT0iMTUwIiByeD0iNTAiIHJ5PSIxNSIvPjxlbGxpcHNlIGN4PSIxMjgiIGN5PSIxMTIiIHJ4PSI0MCIgcnk9IjEyIi8+PGVsbGlwc2UgY3g9IjEyOCIgY3k9IjgwIiByeD0iMjgiIHJ5PSI5Ii8+PC9nPjxwb2x5Z29uIHBvaW50cz0iMTI4LDk4IDE1MCwxMzIgMTI4LDE1NiAxMDYsMTMyIiBmaWxsPSIjZThjYzZhIi8+PHBvbHlnb24gcG9pbnRzPSIxMjgsNjAgMTQ0LDg0IDEyOCw5OCAxMTIsODQiIGZpbGw9IiNkNGE0NDQiLz48Y2lyY2xlIGN4PSIxNDIiIGN5PSI3NCIgcj0iNCIgZmlsbD0iI2Y0ZWVkZSIvPjwvc3ZnPg==" alt="amaru emblem"/><span class="fb-name">AMARU</span><span class="fb-role">cortex · serpent</span></a>
+      <a class="fb-cell" href="https://huggingface.co/spaces/SZLHOLDINGS/sentra" aria-label="SENTRA — immune · shield. Open Space."><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJiZyIgY3g9IjUwJSIgY3k9IjQyJSIgcj0iNzAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMTAxNTFmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDYwOTBmIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3Qgd2lkdGg9IjI1NiIgaGVpZ2h0PSIyNTYiIHJ4PSIxMiIgZmlsbD0idXJsKCNiZykiLz48ZyBmaWxsPSJub25lIiBzdHJva2U9IiNkNGE0NDQiIHN0cm9rZS13aWR0aD0iMi40IiBvcGFjaXR5PSIwLjkiPjxwb2x5Z29uIHBvaW50cz0iMTI4LDU2IDE5NiwxMDQgMTcwLDE4MiA4NiwxODIgNjAsMTA0Ii8+PHBvbHlnb24gcG9pbnRzPSIxMjgsNTYgMTcwLDE4MiA2MCwxMDQiLz48cG9seWdvbiBwb2ludHM9IjEyOCw1NiA4NiwxODIgMTk2LDEwNCIvPjxsaW5lIHgxPSI2MCIgeTE9IjEwNCIgeDI9IjE5NiIgeTI9IjEwNCIvPjxsaW5lIHgxPSIxMjgiIHkxPSI1NiIgeDI9IjEyOCIgeTI9IjE4MiIvPjwvZz48cG9seWdvbiBwb2ludHM9IjEwMCwxMTggMTU2LDExOCAxMjgsMTUwIiBmaWxsPSIjZDRhNDQ0IiBvcGFjaXR5PSIwLjU1Ii8+PGNpcmNsZSBjeD0iNjAiIGN5PSIxMzgiIHI9IjYiIGZpbGw9IiNmZjVhNDQiLz48Y2lyY2xlIGN4PSIyMDAiIGN5PSIxMjAiIHI9IjYiIGZpbGw9IiNmZjVhNDQiLz48Y2lyY2xlIGN4PSI3OCIgY3k9IjkyIiByPSI1IiBmaWxsPSIjNjY4OGZmIi8+PGNpcmNsZSBjeD0iMTI4IiBjeT0iMTIwIiByPSIzNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZThjYzZhIiBzdHJva2Utd2lkdGg9IjQiIG9wYWNpdHk9IjAuOCIvPjwvc3ZnPg==" alt="sentra emblem"/><span class="fb-name">SENTRA</span><span class="fb-role">immune · shield</span></a>
+      <a class="fb-cell" href="https://huggingface.co/spaces/SZLHOLDINGS/rosie" aria-label="ROSIE — operator · console. Open Space."><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJiZyIgY3g9IjUwJSIgY3k9IjQyJSIgcj0iNzAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMTAxNTFmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDYwOTBmIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3Qgd2lkdGg9IjI1NiIgaGVpZ2h0PSIyNTYiIHJ4PSIxMiIgZmlsbD0idXJsKCNiZykiLz48Y2lyY2xlIGN4PSIxMjgiIGN5PSIxMjgiIHI9IjQ0IiBmaWxsPSIjMTExNjFmIiBzdHJva2U9IiNkNGE0NDQiIHN0cm9rZS13aWR0aD0iMyIvPjxjaXJjbGUgY3g9IjEyOCIgY3k9IjEyOCIgcj0iMjIiIGZpbGw9IiNmNGVlZGUiIG9wYWNpdHk9IjAuOTIiLz48ZyBzdHJva2U9IiNkNGE0NDQiIHN0cm9rZS13aWR0aD0iNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBvcGFjaXR5PSIwLjg1Ij48bGluZSB4MT0iNjAiIHkxPSIxNzAiIHgyPSI2MCIgeTI9IjEyMCIvPjxsaW5lIHgxPSIxMDAiIHkxPSIxODAiIHgyPSIxMDAiIHkyPSIxMTAiLz48bGluZSB4MT0iMTU2IiB5MT0iMTgwIiB4Mj0iMTU2IiB5Mj0iMTEwIi8+PGxpbmUgeDE9IjE5NiIgeTE9IjE3MCIgeDI9IjE5NiIgeTI9IjEyMCIvPjwvZz48cmVjdCB4PSI1NiIgeT0iMTc2IiB3aWR0aD0iMTQ0IiBoZWlnaHQ9IjgiIHJ4PSI0IiBmaWxsPSIjZDRhNDQ0Ii8+PGNpcmNsZSBjeD0iMTI4IiBjeT0iMTI4IiByPSI2MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZThjYzZhIiBzdHJva2Utd2lkdGg9IjEuNiIgb3BhY2l0eT0iMC41Ii8+PC9zdmc+" alt="rosie emblem"/><span class="fb-name">ROSIE</span><span class="fb-role">operator · console</span></a>
+      <a class="fb-cell" href="https://huggingface.co/spaces/SZLHOLDINGS/killinchu" aria-label="KILLINCHU — kestrel · drone. Open Space."><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJiZyIgY3g9IjUwJSIgY3k9IjQyJSIgcj0iNzAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMTAxNTFmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDYwOTBmIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3Qgd2lkdGg9IjI1NiIgaGVpZ2h0PSIyNTYiIHJ4PSIxMiIgZmlsbD0idXJsKCNiZykiLz48cGF0aCBkPSJNNzAgMTQwIFExMjggOTYgMTg2IDE0MCBRMTUwIDEyOCAxMjggMTI4IFExMDYgMTI4IDcwIDE0MFoiIGZpbGw9IiNkNGE0NDQiLz48cG9seWdvbiBwb2ludHM9IjEyOCwxMTIgMTM0LDEyOCAxMjIsMTI4IiBmaWxsPSIjZThjYzZhIi8+PGcgZmlsbD0iI2Y0ZWVkZSIgb3BhY2l0eT0iMC45Ij48Y2lyY2xlIGN4PSI2NCIgY3k9IjEyMCIgcj0iMy4yIi8+PGNpcmNsZSBjeD0iOTIiIGN5PSI5NiIgcj0iMi42Ii8+PGNpcmNsZSBjeD0iMTYwIiBjeT0iOTIiIHI9IjMiLz48Y2lyY2xlIGN4PSIxOTYiIGN5PSIxMTgiIHI9IjMuNCIvPjxjaXJjbGUgY3g9IjE1MCIgY3k9IjE2MCIgcj0iMi42Ii8+PGNpcmNsZSBjeD0iMTAwIiBjeT0iMTY4IiByPSIzIi8+PGNpcmNsZSBjeD0iMjAwIiBjeT0iMTUwIiByPSIyLjQiLz48Y2lyY2xlIGN4PSI1OCIgY3k9IjE1OCIgcj0iMi42Ii8+PGNpcmNsZSBjeD0iMTI4IiBjeT0iNzgiIHI9IjIuNCIvPjwvZz48ZyBmaWxsPSIjNjY4OGZmIiBvcGFjaXR5PSIwLjgiPjxjaXJjbGUgY3g9IjEyMCIgY3k9IjE1MCIgcj0iMi42Ii8+PGNpcmNsZSBjeD0iMTcwIiBjeT0iMTQwIiByPSIyLjYiLz48L2c+PC9zdmc+" alt="killinchu emblem"/><span class="fb-name">KILLINCHU</span><span class="fb-role">kestrel · drone</span></a>
+      <a class="fb-cell" href="https://huggingface.co/spaces/SZLHOLDINGS/a11oy" aria-label="A11OY — router · wires. Open Space."><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJiZyIgY3g9IjUwJSIgY3k9IjQyJSIgcj0iNzAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMTAxNTFmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDYwOTBmIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3Qgd2lkdGg9IjI1NiIgaGVpZ2h0PSIyNTYiIHJ4PSIxMiIgZmlsbD0idXJsKCNiZykiLz48ZyBzdHJva2U9IiNkNGE0NDQiIHN0cm9rZS13aWR0aD0iMi4yIiBvcGFjaXR5PSIwLjg1Ij48bGluZSB4MT0iMTI4IiB5MT0iNzIiIHgyPSIxODYiIHkyPSIxMDQiLz48bGluZSB4MT0iMTg2IiB5MT0iMTA0IiB4Mj0iMTk2IiB5Mj0iMTY4Ii8+PGxpbmUgeDE9IjE5NiIgeTE9IjE2OCIgeDI9IjE0MCIgeTI9IjE5NiIvPjxsaW5lIHgxPSIxNDAiIHkxPSIxOTYiIHgyPSI4NiIgeTI9IjE4NCIvPjxsaW5lIHgxPSI4NiIgeTE9IjE4NCIgeDI9IjY0IiB5Mj0iMTI4Ii8+PGxpbmUgeDE9IjY0IiB5MT0iMTI4IiB4Mj0iMTI4IiB5Mj0iNzIiLz48bGluZSB4MT0iMTI4IiB5MT0iNzIiIHgyPSI5NiIgeTI9Ijk2Ii8+PGxpbmUgeDE9Ijk2IiB5MT0iOTYiIHgyPSIxNTAiIHkyPSIxNDAiLz48bGluZSB4MT0iMTUwIiB5MT0iMTQwIiB4Mj0iMTg2IiB5Mj0iMTA0Ii8+PGxpbmUgeDE9IjE1MCIgeTE9IjE0MCIgeDI9IjE0MCIgeTI9IjE5NiIvPjxsaW5lIHgxPSI5NiIgeTE9Ijk2IiB4Mj0iNjQiIHkyPSIxMjgiLz48bGluZSB4MT0iMTUwIiB5MT0iMTQwIiB4Mj0iMTk2IiB5Mj0iMTY4Ii8+PC9nPjxjaXJjbGUgY3g9IjEyOCIgY3k9IjcyIiByPSI3IiBmaWxsPSIjZDRhNDQ0Ii8+PGNpcmNsZSBjeD0iMTg2IiBjeT0iMTA0IiByPSI3IiBmaWxsPSIjZDRhNDQ0Ii8+PGNpcmNsZSBjeD0iMTk2IiBjeT0iMTY4IiByPSI3IiBmaWxsPSIjZDRhNDQ0Ii8+PGNpcmNsZSBjeD0iMTQwIiBjeT0iMTk2IiByPSI3IiBmaWxsPSIjZDRhNDQ0Ii8+PGNpcmNsZSBjeD0iODYiIGN5PSIxODQiIHI9IjciIGZpbGw9IiNkNGE0NDQiLz48Y2lyY2xlIGN4PSI2NCIgY3k9IjEyOCIgcj0iNyIgZmlsbD0iI2Q0YTQ0NCIvPjxjaXJjbGUgY3g9Ijk2IiBjeT0iOTYiIHI9IjciIGZpbGw9IiNkNGE0NDQiLz48Y2lyY2xlIGN4PSIxNTAiIGN5PSIxNDAiIHI9IjciIGZpbGw9IiNkNGE0NDQiLz48Y2lyY2xlIGN4PSI5NiIgY3k9Ijk2IiByPSI3IiBmaWxsPSIjZjRlZWRlIi8+PC9zdmc+" alt="a11oy emblem"/><span class="fb-name">A11OY</span><span class="fb-role">router · wires</span></a>
+      </div>
+    </section>
+  </main>
+
+  <p class="tagline">Governed Agentic Mesh
+    <small>Provable by math · signed by receipts · runs on your hardware · UDS Edition</small>
+  </p>
+
+  <footer class="roster-footer">
+    Doctrine v11 LOCKED · <b>749 / 14 / 163</b> · &Lambda; Conjecture 1 · SLSA L1 honest · UDS Edition
+  </footer>
+
+  <script type="importmap">
+  { "imports": { "three": "https://unpkg.com/three@0.160.0/build/three.module.js" } }
+  </script>
+  <script type="module" src="js/main.js"></script>
+  <noscript>
+    <p style="text-align:center;color:#a090c0;font-family:monospace;padding:1rem">
+      JavaScript is required for the live 3D roster. Visit each organ:
+      <a href="https://huggingface.co/SZLHOLDINGS">SZLHOLDINGS</a>.
+    </p>
+  </noscript>
 </body>
 </html>

js/canvas_decals.js

@@ -0,0 +1,195 @@
+// canvas_decals.js
+// Procedural canvas-painted textures for UDS swag — zero external assets.
+// Every texture is generated with the 2D Canvas API and wrapped in a THREE.CanvasTexture.
+// This keeps the scene asset-free (fast load, no licensing risk, clearly readable).
+import * as THREE from 'three';
+
+const DPR = 2; // supersample the decal canvases for crisp text
+
+function makeCanvas(w, h) {
+  const c = document.createElement('canvas');
+  c.width = w * DPR;
+  c.height = h * DPR;
+  const ctx = c.getContext('2d');
+  ctx.scale(DPR, DPR);
+  return { c, ctx, w, h };
+}
+
+function texFrom(c) {
+  const t = new THREE.CanvasTexture(c);
+  t.anisotropy = 4;
+  t.colorSpace = THREE.SRGBColorSpace;
+  t.needsUpdate = true;
+  return t;
+}
+
+// Draw a small emblem glyph for a hero. Keeps shapes simple + iconic.
+function drawEmblem(ctx, kind, cx, cy, r, color) {
+  ctx.save();
+  ctx.translate(cx, cy);
+  ctx.strokeStyle = color;
+  ctx.fillStyle = color;
+  ctx.lineWidth = Math.max(2, r * 0.14);
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+  switch (kind) {
+    case 'serpent': { // AMARU — golden serpent S-curve
+      ctx.beginPath();
+      for (let i = 0; i <= 40; i++) {
+        const t = i / 40;
+        const a = t * Math.PI * 2.6;
+        const x = Math.sin(a) * r * 0.62;
+        const y = (t - 0.5) * r * 1.9;
+        if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
+      }
+      ctx.stroke();
+      ctx.beginPath(); ctx.arc(Math.sin(0) * r * 0.62, -0.5 * r * 1.9, r * 0.16, 0, 7); ctx.fill();
+      break;
+    }
+    case 'shield': { // SENTRA — gate-glyph shield
+      ctx.beginPath();
+      ctx.moveTo(0, -r);
+      ctx.lineTo(r * 0.82, -r * 0.45);
+      ctx.lineTo(r * 0.62, r * 0.85);
+      ctx.lineTo(0, r);
+      ctx.lineTo(-r * 0.62, r * 0.85);
+      ctx.lineTo(-r * 0.82, -r * 0.45);
+      ctx.closePath(); ctx.stroke();
+      // gate bars inside
+      for (let i = -1; i <= 1; i++) {
+        ctx.beginPath();
+        ctx.moveTo(-r * 0.4, i * r * 0.32);
+        ctx.lineTo(r * 0.4, i * r * 0.32);
+        ctx.stroke();
+      }
+      break;
+    }
+    case 'console': { // ROSIE — console rune (terminal prompt)
+      ctx.strokeRect(-r * 0.9, -r * 0.7, r * 1.8, r * 1.4);
+      ctx.beginPath();
+      ctx.moveTo(-r * 0.5, -r * 0.2);
+      ctx.lineTo(-r * 0.1, r * 0.05);
+      ctx.lineTo(-r * 0.5, r * 0.3);
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.moveTo(r * 0.05, r * 0.3);
+      ctx.lineTo(r * 0.55, r * 0.3);
+      ctx.stroke();
+      break;
+    }
+    case 'falcon': { // KILLINCHU — falcon / kestrel in flight
+      ctx.beginPath();
+      ctx.moveTo(-r, -r * 0.1);
+      ctx.quadraticCurveTo(-r * 0.35, -r * 0.65, 0, -r * 0.15);
+      ctx.quadraticCurveTo(r * 0.35, -r * 0.65, r, -r * 0.1);
+      ctx.quadraticCurveTo(r * 0.35, r * 0.1, 0, r * 0.55);
+      ctx.quadraticCurveTo(-r * 0.35, r * 0.1, -r, -r * 0.1);
+      ctx.closePath(); ctx.fill();
+      break;
+    }
+    case 'router': { // A11OY — neural-net / multi-arrow router node
+      ctx.beginPath(); ctx.arc(0, 0, r * 0.28, 0, 7); ctx.stroke();
+      const dirs = [[0, -1], [0.87, 0.5], [-0.87, 0.5]];
+      for (const [dx, dy] of dirs) {
+        ctx.beginPath();
+        ctx.moveTo(dx * r * 0.3, dy * r * 0.3);
+        ctx.lineTo(dx * r, dy * r);
+        ctx.stroke();
+        // arrowhead
+        ctx.beginPath();
+        ctx.arc(dx * r, dy * r, r * 0.12, 0, 7);
+        ctx.fill();
+      }
+      break;
+    }
+  }
+  ctx.restore();
+}
+
+// Build the wrap-around torso texture: dark fabric, name stencil on chest,
+// UDS monogram patch on right shoulder, emblem on chest center.
+// The texture wraps a cylinder; chest faces +Z, so we paint chest at U≈0.5.
+export function makeTorsoTexture({ name, stencil, emblem, color, swatch }) {
+  const W = 512, H = 512;
+  const { c, ctx } = makeCanvas(W, H);
+  // base fabric
+  const g = ctx.createLinearGradient(0, 0, 0, H);
+  g.addColorStop(0, shade(swatch, -0.45));
+  g.addColorStop(1, shade(swatch, -0.7));
+  ctx.fillStyle = g; ctx.fillRect(0, 0, W, H);
+
+  // subtle vertical seams
+  ctx.strokeStyle = 'rgba(0,0,0,0.25)'; ctx.lineWidth = 2;
+  for (let x = 64; x < W; x += 128) { ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke(); }
+
+  // chest panel (centered at U=0.5 -> x=W/2)
+  const cx = W / 2;
+  // emblem on chest center
+  drawEmblem(ctx, emblem, cx, H * 0.42, 56, color);
+
+  // name stencil under emblem
+  ctx.fillStyle = '#f4f4f6';
+  ctx.font = 'bold 30px "JetBrains Mono", monospace';
+  ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+  ctx.fillText(stencil, cx, H * 0.66);
+  // colored underline
+  ctx.fillStyle = color; ctx.fillRect(cx - 120, H * 0.72, 240, 4);
+
+  // UDS shoulder patch — right shoulder sits near U≈0.78 -> x≈0.78*W
+  drawUDSPatch(ctx, W * 0.80, H * 0.16, 70, color);
+
+  return texFrom(c);
+}
+
+// A reusable UDS monogram patch (also used by grey NPCs).
+export function drawUDSPatch(ctx, cx, cy, size, accent = '#9aa3ad') {
+  ctx.save();
+  ctx.translate(cx, cy);
+  // patch backing
+  ctx.fillStyle = '#1b2128';
+  roundRect(ctx, -size * 0.7, -size * 0.55, size * 1.4, size * 1.1, 8); ctx.fill();
+  ctx.strokeStyle = accent; ctx.lineWidth = 3;
+  roundRect(ctx, -size * 0.7, -size * 0.55, size * 1.4, size * 1.1, 8); ctx.stroke();
+  // UDS text
+  ctx.fillStyle = '#e8edf2';
+  ctx.font = `bold ${Math.round(size * 0.5)}px "JetBrains Mono", monospace`;
+  ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+  ctx.fillText('UDS', 0, -size * 0.05);
+  ctx.fillStyle = accent;
+  ctx.font = `${Math.round(size * 0.16)}px "JetBrains Mono", monospace`;
+  ctx.fillText('UNITED DEFENSE', 0, size * 0.32);
+  ctx.restore();
+}
+
+// Plain grey UDS NPC torso texture.
+export function makeNPCTexture() {
+  const W = 256, H = 256;
+  const { c, ctx } = makeCanvas(W, H);
+  const g = ctx.createLinearGradient(0, 0, 0, H);
+  g.addColorStop(0, '#3a4048'); g.addColorStop(1, '#262b31');
+  ctx.fillStyle = g; ctx.fillRect(0, 0, W, H);
+  drawUDSPatch(ctx, W / 2, H * 0.42, 48, '#7f8a95');
+  ctx.fillStyle = '#b9c2cb';
+  ctx.font = '600 16px "JetBrains Mono", monospace';
+  ctx.textAlign = 'center';
+  ctx.fillText('PARADE REST', W / 2, H * 0.78);
+  return texFrom(c);
+}
+
+function roundRect(ctx, x, y, w, h, r) {
+  ctx.beginPath();
+  ctx.moveTo(x + r, y);
+  ctx.arcTo(x + w, y, x + w, y + h, r);
+  ctx.arcTo(x + w, y + h, x, y + h, r);
+  ctx.arcTo(x, y + h, x, y, r);
+  ctx.arcTo(x, y, x + w, y, r);
+  ctx.closePath();
+}
+
+function shade(hex, amt) {
+  const c = new THREE.Color(hex);
+  const hsl = {}; c.getHSL(hsl);
+  hsl.l = Math.max(0, Math.min(1, hsl.l + amt));
+  c.setHSL(hsl.h, hsl.s * 0.8, hsl.l);
+  return '#' + c.getHexString();
+}

js/heroes.js

@@ -0,0 +1,219 @@
+// heroes.js
+// The 5 SZL heroes: stylized low-poly humanoids built from primitives
+// (capsule torso/limbs, sphere head, cone stance) — deliberately PS1-era,
+// readable, fast, fully procedural. UDS swag painted via canvas_decals.
+import * as THREE from 'three';
+import { makeTorsoTexture } from './canvas_decals.js';
+
+export const HEROES = [
+  {
+    id: 'amaru', name: 'AMARU', role: 'Cognitive Cortex — the brain',
+    color: '#f5c518', stencil: 'AMARU · CORTEX', emblem: 'serpent',
+    swag: 'Gold UDS shoulder patch · golden serpent emblem',
+    url: 'https://huggingface.co/spaces/SZLHOLDINGS/amaru',
+    prop: 'brain',
+    powers: [
+      { label: 'Dual-stream routing', icon: 'amaru_dualstream' },
+      { label: '7-chakra memory', icon: 'amaru_memory' },
+      { label: 'Forward-model prediction', icon: 'amaru_forward' },
+      { label: 'Lineage DAG', icon: 'amaru_lineage' },
+    ],
+  },
+  {
+    id: 'sentra', name: 'SENTRA', role: 'Immune Sentinel — the gates',
+    color: '#c8324e', stencil: 'SENTRA · SHIELD', emblem: 'shield',
+    swag: 'Crimson UDS tactical vest · gate-glyph shield emblem',
+    url: 'https://huggingface.co/spaces/SZLHOLDINGS/sentra',
+    prop: 'runes',
+    powers: [
+      { label: '8 fail-CLOSED gates', icon: 'sentra_gates' },
+      { label: 'DSSE signing', icon: 'sentra_dsse' },
+      { label: 'Conduction-aphasia detector', icon: 'sentra_conduction' },
+      { label: 'Cosign verify', icon: 'sentra_cosign' },
+    ],
+  },
+  {
+    id: 'rosie', name: 'ROSIE', role: 'Executive Operator — multi-organ orchestrator',
+    color: '#2ea66c', stencil: 'ROSIE · CONSOLE', emblem: 'console',
+    swag: 'Emerald UDS command jacket · console-rune emblem',
+    url: 'https://huggingface.co/spaces/SZLHOLDINGS/rosie',
+    prop: 'console',
+    powers: [
+      { label: 'Multi-LLM ensemble', icon: 'rosie_ensemble' },
+      { label: 'Adaptive routing', icon: 'rosie_routing' },
+      { label: 'Step-3.7-Flash voter', icon: 'rosie_step' },
+      { label: 'Executive UI', icon: 'rosie_exec' },
+    ],
+  },
+  {
+    id: 'killinchu', name: 'KILLINCHU', role: 'Kestrel Drone Health — UDS Edition',
+    color: '#4ac4d9', stencil: 'KILLINCHU · KESTREL', emblem: 'falcon',
+    swag: 'Full UDS field uniform · falcon emblem — the UDS face',
+    url: 'https://huggingface.co/spaces/SZLHOLDINGS/killinchu',
+    prop: 'hud', isUDSFace: true,
+    powers: [
+      { label: 'NOAA space-weather', icon: 'kil_noaa' },
+      { label: 'USGS seismic', icon: 'kil_usgs' },
+      { label: 'MQ-9 drone health', icon: 'kil_mq9' },
+      { label: 'Phase prediction', icon: 'kil_phase' },
+    ],
+  },
+  {
+    id: 'a11oy', name: 'A11OY', role: 'Sovereign Router — the wires',
+    color: '#8b6cf2', stencil: 'A11OY · ROUTER', emblem: 'router',
+    swag: 'Violet UDS sash · neural-net circuit pattern',
+    url: 'https://huggingface.co/spaces/SZLHOLDINGS/a11oy',
+    prop: 'streams',
+    powers: [
+      { label: 'PAC-Bayes governance', icon: 'a11_governance' },
+      { label: 'Multi-LLM router', icon: 'a11_router' },
+      { label: '35 anchor formulas', icon: 'a11_formulas' },
+      { label: 'Khipu chain', icon: 'a11_khipu' },
+    ],
+  },
+];
+
+// Build one stylized low-poly humanoid. Returns a THREE.Group with a `.userData`
+// describing animatable parts (torso for breathing, prop group, etc.).
+export function buildHero(hero) {
+  const g = new THREE.Group();
+  const col = new THREE.Color(hero.color);
+  const skin = new THREE.Color('#caa98c');
+
+  const matBody = new THREE.MeshStandardMaterial({
+    map: makeTorsoTexture({
+      name: hero.name, stencil: hero.stencil, emblem: hero.emblem,
+      color: hero.color, swatch: hero.color,
+    }),
+    roughness: 0.62, metalness: 0.12, flatShading: true,
+  });
+  const matLimb = new THREE.MeshStandardMaterial({
+    color: col.clone().multiplyScalar(0.45), roughness: 0.7, metalness: 0.1, flatShading: true,
+  });
+  const matSkin = new THREE.MeshStandardMaterial({ color: skin, roughness: 0.8, flatShading: true });
+  const matAccent = new THREE.MeshStandardMaterial({
+    color: col, emissive: col, emissiveIntensity: 0.35, roughness: 0.4, metalness: 0.3, flatShading: true,
+  });
+
+  // Torso — capsule. Pivot so breathing scales from the waist.
+  const torsoGeo = new THREE.CapsuleGeometry(0.34, 0.7, 4, 10);
+  const torso = new THREE.Mesh(torsoGeo, matBody);
+  torso.castShadow = true;
+  const torsoPivot = new THREE.Group();
+  torso.position.y = 0.55;
+  torsoPivot.add(torso);
+  torsoPivot.position.y = 0.9;
+  g.add(torsoPivot);
+
+  // Head — sphere + a small accent visor band.
+  const head = new THREE.Mesh(new THREE.SphereGeometry(0.27, 16, 12), matSkin);
+  head.position.y = 0.55 + 0.62;
+  head.castShadow = true;
+  torsoPivot.add(head);
+  const visor = new THREE.Mesh(new THREE.TorusGeometry(0.24, 0.05, 6, 16), matAccent);
+  visor.rotation.x = Math.PI / 2.1;
+  visor.position.y = 0.55 + 0.66;
+  torsoPivot.add(visor);
+
+  // Shoulders / arms — capsules angled outward (parade-ready stance).
+  for (const side of [-1, 1]) {
+    const arm = new THREE.Mesh(new THREE.CapsuleGeometry(0.1, 0.6, 4, 8), matLimb);
+    arm.position.set(side * 0.46, 0.42, 0);
+    arm.rotation.z = side * 0.18;
+    arm.castShadow = true;
+    torsoPivot.add(arm);
+    const shoulder = new THREE.Mesh(new THREE.SphereGeometry(0.14, 10, 8), matAccent);
+    shoulder.position.set(side * 0.44, 0.78, 0);
+    torsoPivot.add(shoulder);
+  }
+
+  // Legs — capsules.
+  for (const side of [-1, 1]) {
+    const leg = new THREE.Mesh(new THREE.CapsuleGeometry(0.13, 0.7, 4, 8), matLimb);
+    leg.position.set(side * 0.17, 0.45, 0);
+    leg.castShadow = true;
+    g.add(leg);
+  }
+
+  // Stance cone — anchors the figure to the dais (the "base").
+  const base = new THREE.Mesh(new THREE.ConeGeometry(0.5, 0.3, 16), matLimb);
+  base.position.y = 0.12; base.rotation.x = Math.PI;
+  g.add(base);
+
+  // Prop group (weapon/tool) — hidden until hover.
+  const prop = buildProp(hero, col);
+  prop.visible = false;
+  g.add(prop);
+
+  g.userData = { hero, torsoPivot, prop, baseScale: 1 };
+  return g;
+}
+
+// Per-hero activated prop. Returns a group positioned around the hero.
+function buildProp(hero, col) {
+  const grp = new THREE.Group();
+  const mat = new THREE.MeshStandardMaterial({
+    color: col, emissive: col, emissiveIntensity: 0.9, transparent: true,
+    opacity: 0.85, roughness: 0.3, metalness: 0.4,
+  });
+  switch (hero.prop) {
+    case 'brain': { // glowing brain hemispheres halo above head
+      for (const side of [-1, 1]) {
+        const hemi = new THREE.Mesh(new THREE.SphereGeometry(0.18, 12, 10, 0, Math.PI), mat);
+        hemi.position.set(side * 0.16, 2.05, 0);
+        hemi.rotation.y = side > 0 ? 0 : Math.PI;
+        grp.add(hemi);
+      }
+      const halo = new THREE.Mesh(new THREE.TorusGeometry(0.34, 0.02, 6, 24), mat);
+      halo.position.y = 2.05; halo.rotation.x = Math.PI / 2;
+      grp.add(halo);
+      grp.userData.spin = halo;
+      break;
+    }
+    case 'runes': { // 8 floating shield runes orbit
+      const runes = [];
+      for (let i = 0; i < 8; i++) {
+        const r = new THREE.Mesh(new THREE.BoxGeometry(0.12, 0.16, 0.03), mat);
+        const a = (i / 8) * Math.PI * 2;
+        r.position.set(Math.cos(a) * 0.7, 1.0, Math.sin(a) * 0.7);
+        grp.add(r); runes.push(r);
+      }
+      grp.userData.orbit = runes;
+      break;
+    }
+    case 'console': { // holographic console panel materializes in front
+      const panel = new THREE.Mesh(new THREE.PlaneGeometry(0.8, 0.5), mat);
+      panel.position.set(0, 1.1, 0.55);
+      grp.add(panel);
+      for (let i = 0; i < 3; i++) {
+        const bar = new THREE.Mesh(new THREE.BoxGeometry(0.5, 0.04, 0.01),
+          new THREE.MeshStandardMaterial({ color: '#0a160f', emissive: col, emissiveIntensity: 0.6 }));
+        bar.position.set(0, 1.2 - i * 0.12, 0.56);
+        grp.add(bar);
+      }
+      break;
+    }
+    case 'hud': { // holographic drone HUD reticle locks on
+      const reticle = new THREE.Mesh(new THREE.RingGeometry(0.28, 0.34, 24), mat);
+      reticle.position.set(0, 1.4, 0.5);
+      grp.add(reticle);
+      const inner = new THREE.Mesh(new THREE.RingGeometry(0.1, 0.12, 16), mat);
+      inner.position.set(0, 1.4, 0.5);
+      grp.add(inner);
+      grp.userData.spin = reticle;
+      break;
+    }
+    case 'streams': { // glowing routing-arrow streams flow from hand
+      const streams = [];
+      for (let i = 0; i < 5; i++) {
+        const s = new THREE.Mesh(new THREE.ConeGeometry(0.05, 0.18, 6), mat);
+        s.position.set(0.5, 0.7 + i * 0.02, 0.2);
+        s.rotation.z = -Math.PI / 2;
+        grp.add(s); streams.push(s);
+      }
+      grp.userData.stream = streams;
+      break;
+    }
+  }
+  return grp;
+}

js/hover_panel.js

@@ -0,0 +1,84 @@
+// hover_panel.js
+// Floating holographic superpower panel. Rendered as a DOM overlay anchored to
+// the hero's screen-projected head position (rises ~60cm above the head in world
+// space). Name in hero color (monospace), SUPERPOWERS header, 4 lines that type
+// out sequentially (30ms/char) then pulse, each with an animated SVG icon.
+import { buildIcon } from './superpower_icons.js';
+
+export class HoverPanel {
+  constructor(container, reduced) {
+    this.container = container;
+    this.reduced = reduced;
+    this.el = document.createElement('div');
+    this.el.className = 'hover-panel';
+    this.el.setAttribute('role', 'tooltip');
+    this.el.setAttribute('aria-hidden', 'true');
+    container.appendChild(this.el);
+    this.activeId = null;
+    this._timers = [];
+  }
+
+  _clearTimers() { this._timers.forEach(clearTimeout); this._timers = []; }
+
+  show(hero) {
+    if (this.activeId === hero.id) return;
+    this.activeId = hero.id;
+    this._clearTimers();
+    const c = hero.color;
+    this.el.style.setProperty('--hc', c);
+    this.el.innerHTML = `
+      <div class="hp-name" style="color:${c}">${hero.name}</div>
+      <div class="hp-role">${hero.role}</div>
+      <div class="hp-head">SUPERPOWERS</div>
+      <ul class="hp-list"></ul>`;
+    const list = this.el.querySelector('.hp-list');
+    hero.powers.forEach((p, i) => {
+      const li = document.createElement('li');
+      li.className = 'hp-line';
+      const icon = buildIcon(p.icon, c, this.reduced);
+      const txt = document.createElement('span');
+      txt.className = 'hp-text';
+      li.appendChild(icon);
+      li.appendChild(txt);
+      list.appendChild(li);
+      if (this.reduced) {
+        txt.textContent = p.label;
+        li.classList.add('hp-shown');
+      } else {
+        // sequential type-out: 30ms/char, staggered per line
+        const startDelay = i * 520;
+        this._timers.push(setTimeout(() => this._type(li, txt, p.label), startDelay));
+      }
+    });
+    this.el.classList.add('hp-visible');
+    this.el.setAttribute('aria-hidden', 'false');
+  }
+
+  _type(li, txt, label) {
+    li.classList.add('hp-shown');
+    let n = 0;
+    const step = () => {
+      txt.textContent = label.slice(0, n);
+      n++;
+      if (n <= label.length) {
+        this._timers.push(setTimeout(step, 30));
+      } else {
+        li.classList.add('hp-pulse'); // pulse once typed
+      }
+    };
+    step();
+  }
+
+  hide() {
+    this.activeId = null;
+    this._clearTimers();
+    this.el.classList.remove('hp-visible');
+    this.el.setAttribute('aria-hidden', 'true');
+  }
+
+  // Position the panel at a screen-space point (px), centered horizontally above it.
+  place(x, y) {
+    this.el.style.left = x + 'px';
+    this.el.style.top = y + 'px';
+  }
+}

js/main.js

@@ -0,0 +1,344 @@
+// main.js — Three.js bootstrap + character-select scene for the SZL org card.
+// Five procedural low-poly heroes on lit daises in a slight arc, slow camera
+// carousel orbit, KHIPU-style particle motes, UDS NPCs in the background.
+// Hover reveals animated superpowers; click opens the hero's HF Space.
+import * as THREE from 'three';
+import { HEROES, buildHero } from './heroes.js';
+import { buildUDSNPCs, animateNPCs } from './uds_npcs.js';
+import { HoverPanel } from './hover_panel.js';
+
+const REDUCED = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+// ---- WebGL capability gate (graceful degradation to SVG grid) ----
+function webglOK() {
+  try {
+    if (!window.WebGLRenderingContext) return false;
+    const c = document.createElement('canvas');
+    return !!(c.getContext('webgl2') || c.getContext('webgl'));
+  } catch (e) { return false; }
+}
+
+const stage = document.getElementById('stage');
+const canvas = document.getElementById('roster');
+const fallback = document.getElementById('fallback');
+
+if (!webglOK()) {
+  // Show the static SVG 5-tile grid fallback, hide the 3D canvas.
+  canvas.style.display = 'none';
+  if (fallback) fallback.hidden = false;
+  document.getElementById('loading')?.remove();
+} else {
+  if (fallback) fallback.hidden = true;
+  init();
+}
+
+function init() {
+  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
+  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+  renderer.shadowMap.enabled = true;
+  renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+
+  const scene = new THREE.Scene();
+  scene.fog = new THREE.FogExp2(0x12091f, 0.045);
+
+  const camera = new THREE.PerspectiveCamera(42, 1, 0.1, 100);
+  const CAM_RADIUS = 9.2, CAM_HEIGHT = 2.4;
+  camera.position.set(0, CAM_HEIGHT, CAM_RADIUS);
+
+  // ---- Lights ----
+  scene.add(new THREE.AmbientLight(0x5a4a7a, 0.55));
+  const key = new THREE.DirectionalLight(0xffffff, 0.85);
+  key.position.set(4, 9, 6); key.castShadow = true;
+  key.shadow.mapSize.set(1024, 1024);
+  key.shadow.camera.near = 1; key.shadow.camera.far = 30;
+  key.shadow.camera.left = -10; key.shadow.camera.right = 10;
+  key.shadow.camera.top = 10; key.shadow.camera.bottom = -10;
+  scene.add(key);
+  const fill = new THREE.DirectionalLight(0x8b6cf2, 0.3);
+  fill.position.set(-6, 4, -4); scene.add(fill);
+
+  // ---- Ground plane (receives shadows, dark) ----
+  const ground = new THREE.Mesh(
+    new THREE.CircleGeometry(16, 48),
+    new THREE.MeshStandardMaterial({ color: 0x0c0718, roughness: 1, metalness: 0 })
+  );
+  ground.rotation.x = -Math.PI / 2; ground.position.y = -0.02; ground.receiveShadow = true;
+  scene.add(ground);
+
+  // ---- Heroes on daises in a slight arc, slightly elevated ----
+  const heroRoot = new THREE.Group();
+  scene.add(heroRoot);
+  const heroEntries = [];
+  const N = HEROES.length;
+  const arcSpan = 2.0;      // radians across which heroes are spread
+  const arcRadius = 5.0;    // distance from arc center
+  HEROES.forEach((hero, i) => {
+    const t = N === 1 ? 0.5 : i / (N - 1);
+    const a = -arcSpan / 2 + t * arcSpan;
+    const x = Math.sin(a) * arcRadius;
+    const z = -arcRadius + Math.cos(a) * arcRadius * 0.55; // gentle forward arc
+    const slot = new THREE.Group();
+    slot.position.set(x, 0.25, z); // slightly elevated
+    slot.rotation.y = -a * 0.45;   // face toward camera center
+
+    // dais
+    const daisMat = new THREE.MeshStandardMaterial({ color: 0x171022, roughness: 0.5, metalness: 0.4 });
+    const dais = new THREE.Mesh(new THREE.CylinderGeometry(0.95, 1.05, 0.18, 32), daisMat);
+    dais.position.y = -0.09; dais.receiveShadow = true; dais.castShadow = true;
+    slot.add(dais);
+    // colored rim-light ring on the dais edge
+    const rimMat = new THREE.MeshStandardMaterial({
+      color: hero.color, emissive: hero.color, emissiveIntensity: 1.0,
+      roughness: 0.3, transparent: true, opacity: 0.95,
+    });
+    const rim = new THREE.Mesh(new THREE.TorusGeometry(0.98, 0.045, 8, 48), rimMat);
+    rim.rotation.x = Math.PI / 2; rim.position.y = 0.02;
+    slot.add(rim);
+    // a point light per dais (cheap; 5 total) for the colored glow
+    const rimLight = new THREE.PointLight(new THREE.Color(hero.color), 1.4, 4.5, 2);
+    rimLight.position.set(0, 0.6, 0.4);
+    slot.add(rimLight);
+
+    const figure = buildHero(hero);
+    slot.add(figure);
+
+    heroRoot.add(slot);
+    heroEntries.push({ hero, slot, figure, rim, rimMat, rimLight, baseRim: 1.0,
+      bodyMats: collectBodyMats(figure), hovered: false, scale: 1 });
+  });
+
+  // ---- UDS NPCs in the background ----
+  const { group: npcGroup, npcs } = buildUDSNPCs(4);
+  scene.add(npcGroup);
+
+  // ---- KHIPU DAG particle motes ----
+  const PCOUNT = REDUCED ? 0 : 420;
+  let particles = null, pPos = null, pHome = null, pVel = null;
+  if (PCOUNT > 0) {
+    pPos = new Float32Array(PCOUNT * 3);
+    pHome = new Float32Array(PCOUNT * 3);
+    pVel = new Float32Array(PCOUNT * 3);
+    for (let i = 0; i < PCOUNT; i++) {
+      const r = 3 + Math.random() * 7;
+      const a = Math.random() * Math.PI * 2;
+      const x = Math.cos(a) * r, y = Math.random() * 6 + 0.2, z = Math.sin(a) * r - 2;
+      pPos[i * 3] = pHome[i * 3] = x;
+      pPos[i * 3 + 1] = pHome[i * 3 + 1] = y;
+      pPos[i * 3 + 2] = pHome[i * 3 + 2] = z;
+    }
+    const pg = new THREE.BufferGeometry();
+    pg.setAttribute('position', new THREE.BufferAttribute(pPos, 3));
+    const pm = new THREE.PointsMaterial({ color: 0xcda8ff, size: 0.06, transparent: true, opacity: 0.7,
+      depthWrite: false, blending: THREE.AdditiveBlending });
+    particles = new THREE.Points(pg, pm);
+    scene.add(particles);
+  }
+
+  // ---- Hover panel (DOM overlay) ----
+  const panel = new HoverPanel(stage, REDUCED);
+
+  // ---- Raycaster + invisible hit cylinders per hero ----
+  const raycaster = new THREE.Raycaster();
+  const pointer = new THREE.Vector2();
+  let pointerInside = false;
+  const hitMeshes = heroEntries.map((e, i) => {
+    const hit = new THREE.Mesh(
+      new THREE.CylinderGeometry(0.9, 0.9, 2.6, 8),
+      new THREE.MeshBasicMaterial({ visible: false })
+    );
+    hit.position.y = 1.1;
+    hit.userData.index = i;
+    e.slot.add(hit);
+    return hit;
+  });
+
+  let activeIndex = -1;
+  function setActive(idx) {
+    if (idx === activeIndex) return;
+    activeIndex = idx;
+    heroEntries.forEach((e, i) => { e.hovered = (i === idx); });
+    if (idx >= 0) {
+      panel.show(heroEntries[idx].hero);
+      burst(idx);
+      stage.style.cursor = 'pointer';
+      stage.setAttribute('data-active', heroEntries[idx].hero.id);
+    } else {
+      panel.hide();
+      stage.style.cursor = 'default';
+      stage.removeAttribute('data-active');
+    }
+  }
+
+  // particle energy burst toward a hero then radiate
+  let burstUntil = 0, burstTarget = new THREE.Vector3();
+  function burst(idx) {
+    if (!particles) return;
+    burstTarget.copy(heroEntries[idx].slot.position).add(new THREE.Vector3(0, 1.2, 0));
+    burstUntil = performance.now() + 900;
+  }
+
+  // ---- Pointer events ----
+  function updatePointer(ev) {
+    const rect = canvas.getBoundingClientRect();
+    pointer.x = ((ev.clientX - rect.left) / rect.width) * 2 - 1;
+    pointer.y = -((ev.clientY - rect.top) / rect.height) * 2 + 1;
+    pointerInside = true;
+  }
+  canvas.addEventListener('pointermove', updatePointer);
+  canvas.addEventListener('pointerleave', () => { pointerInside = false; setActive(-1); });
+  canvas.addEventListener('click', () => {
+    if (activeIndex >= 0) window.open(heroEntries[activeIndex].hero.url, '_blank', 'noopener');
+  });
+
+  // ---- Keyboard accessibility: Tab cycles, Enter activates ----
+  // Hidden focusable proxies announce each hero and drive the 3D highlight.
+  const a11yRoot = document.getElementById('a11y-heroes');
+  heroEntries.forEach((e, i) => {
+    const b = document.createElement('button');
+    b.className = 'a11y-hero';
+    const labels = e.hero.powers.map(p => p.label.toLowerCase()).join(', ');
+    b.setAttribute('aria-label',
+      `${e.hero.name} — ${e.hero.role}. Superpowers: ${labels}. Click to open Space.`);
+    b.addEventListener('focus', () => setKeyActive(i));
+    b.addEventListener('blur', () => { if (kbActive === i) setKeyActive(-1); });
+    b.addEventListener('click', () => window.open(e.hero.url, '_blank', 'noopener'));
+    a11yRoot.appendChild(b);
+  });
+  let kbActive = -1;
+  function setKeyActive(i) { kbActive = i; setActive(i); }
+
+  // ---- Resize ----
+  function resize() {
+    const w = stage.clientWidth, h = stage.clientHeight;
+    renderer.setSize(w, h, false);
+    camera.aspect = w / h; camera.updateProjectionMatrix();
+  }
+  window.addEventListener('resize', resize);
+  resize();
+
+  // ---- Animation loop ----
+  const clock = new THREE.Clock();
+  let camAngle = 0;
+  const _proj = new THREE.Vector3();
+
+  function frame() {
+    const dt = clock.getDelta();
+    const t = clock.elapsedTime * 1000;
+
+    // camera slow orbit (~60s period) unless reduced motion
+    if (!REDUCED) camAngle = (clock.elapsedTime / 60) * Math.PI * 2;
+    const orbitR = CAM_RADIUS;
+    camera.position.x = Math.sin(camAngle) * orbitR;
+    camera.position.z = Math.cos(camAngle) * orbitR;
+    camera.position.y = CAM_HEIGHT;
+    camera.lookAt(0, 1.0, -1.2);
+
+    // hover hit-test (only when pointer is in canvas)
+    if (pointerInside) {
+      raycaster.setFromCamera(pointer, camera);
+      const hits = raycaster.intersectObjects(hitMeshes, false);
+      setActive(hits.length ? hits[0].object.userData.index : -1);
+    }
+
+    // per-hero animation
+    heroEntries.forEach((e, i) => {
+      const ud = e.figure.userData;
+      // breathing: torso scale y ±2% over 3s
+      if (!REDUCED) {
+        const breathe = 1 + Math.sin(t * 0.00209 + i) * 0.02;
+        ud.torsoPivot.scale.y = breathe;
+      }
+      // hover scale-up to 1.15x over ~200ms (ease toward target)
+      const target = e.hovered ? 1.15 : 1.0;
+      const lerpK = REDUCED ? 1 : Math.min(1, dt / 0.2);
+      e.scale += (target - e.scale) * lerpK;
+      e.slot.scale.setScalar(e.scale);
+
+      // dais rim pulse (HSL lightness) + hover brighten +50%
+      const baseI = e.hovered ? 1.5 : 1.0;
+      const pulse = REDUCED ? 0 : Math.sin(t * 0.0016 + i * 1.3) * 0.25;
+      e.rimMat.emissiveIntensity = baseI + pulse;
+      e.rimLight.intensity = (e.hovered ? 2.6 : 1.4) + pulse;
+
+      // dim non-hovered heroes to 50% when one is active
+      const dim = (activeIndex >= 0 && !e.hovered) ? 0.5 : 1.0;
+      e.bodyMats.forEach(m => {
+        m.transparent = dim < 1;
+        m.opacity += (dim - m.opacity) * (REDUCED ? 1 : Math.min(1, dt * 6));
+      });
+
+      // prop activation on hover
+      ud.prop.visible = e.hovered;
+      if (e.hovered && !REDUCED) animateProp(ud.prop, t);
+    });
+
+    // NPC idle
+    animateNPCs(npcs, t, REDUCED);
+
+    // particle motes drift + burst/converge
+    if (particles) {
+      const now = performance.now();
+      const bursting = now < burstUntil;
+      for (let i = 0; i < PCOUNT; i++) {
+        const ix = i * 3;
+        if (bursting) {
+          // converge toward target then radiate (second half)
+          const half = burstUntil - 450;
+          const k = now < half ? 0.06 : -0.05;
+          pPos[ix] += (burstTarget.x - pPos[ix]) * k;
+          pPos[ix + 1] += (burstTarget.y - pPos[ix + 1]) * k;
+          pPos[ix + 2] += (burstTarget.z - pPos[ix + 2]) * k;
+        } else {
+          // ease home + gentle float
+          pPos[ix] += (pHome[ix] - pPos[ix]) * 0.02;
+          pPos[ix + 1] += (pHome[ix + 1] - pPos[ix + 1]) * 0.02 + Math.sin(t * 0.0006 + i) * 0.0009;
+          pPos[ix + 2] += (pHome[ix + 2] - pPos[ix + 2]) * 0.02;
+        }
+      }
+      particles.geometry.attributes.position.needsUpdate = true;
+      if (!REDUCED) particles.rotation.y = clock.elapsedTime * 0.01;
+    }
+
+    // place hover panel above active hero's head (screen projection)
+    if (activeIndex >= 0) {
+      const e = heroEntries[activeIndex];
+      _proj.copy(e.slot.position); _proj.y += 2.6; // ~60cm above head
+      _proj.project(camera);
+      const rect = canvas.getBoundingClientRect();
+      const sx = (_proj.x * 0.5 + 0.5) * rect.width;
+      const sy = (-_proj.y * 0.5 + 0.5) * rect.height;
+      panel.place(sx, sy);
+    }
+
+    renderer.render(scene, camera);
+    requestAnimationFrame(frame);
+  }
+
+  document.getElementById('loading')?.remove();
+  requestAnimationFrame(frame);
+
+  // expose for smoke tests
+  window.__SZL_ROSTER__ = { setActive, heroEntries, HEROES };
+}
+
+function collectBodyMats(figure) {
+  const mats = [];
+  figure.traverse(o => { if (o.isMesh && o.material && o.material.map) mats.push(o.material); });
+  return mats;
+}
+
+function animateProp(prop, t) {
+  if (prop.userData.spin) prop.userData.spin.rotation.z = t * 0.003;
+  if (prop.userData.orbit) {
+    prop.userData.orbit.forEach((r, k) => {
+      const a = (k / 8) * Math.PI * 2 + t * 0.001;
+      r.position.set(Math.cos(a) * 0.7, 1.0 + Math.sin(t * 0.002 + k) * 0.05, Math.sin(a) * 0.7);
+    });
+  }
+  if (prop.userData.stream) {
+    prop.userData.stream.forEach((s, k) => {
+      s.position.x = 0.5 + ((t * 0.001 + k * 0.2) % 0.6);
+      s.material.opacity = 0.3 + 0.6 * Math.abs(Math.sin(t * 0.003 + k));
+    });
+  }
+}

js/superpower_icons.js

@@ -0,0 +1,105 @@
+// superpower_icons.js
+// Animated SVG icon set, one per superpower. Each factory returns an <svg>
+// element (24x24 viewBox) with embedded CSS/SMIL animation. Color is injected.
+// Animations respect prefers-reduced-motion via the `reduced` flag (freezes).
+
+const NS = 'http://www.w3.org/2000/svg';
+
+function svg(color, reduced, inner) {
+  const s = `<svg xmlns="${NS}" viewBox="0 0 24 24" width="22" height="22" fill="none"
+    stroke="${color}" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"
+    class="${reduced ? 'sp-static' : 'sp-anim'}">${inner}</svg>`;
+  const wrap = document.createElement('span');
+  wrap.className = 'sp-icon';
+  wrap.innerHTML = s;
+  return wrap;
+}
+
+// Each builder takes (color, reduced) and returns an element.
+const ICONS = {
+  // ---- AMARU ----
+  amaru_dualstream: (c, r) => svg(c, r, `
+    <path d="M3 9 H18"><animate attributeName="stroke-dashoffset" values="0;-12" dur="1s" repeatCount="indefinite"/></path>
+    <path d="M14 6 L18 9 L14 12" stroke-dasharray="0"/>
+    <path d="M21 15 H6"><animate attributeName="stroke-dashoffset" values="0;12" dur="1s" repeatCount="indefinite"/></path>
+    <path d="M10 18 L6 15 L10 12"/>`),
+  amaru_memory: (c, r) => {
+    let dots = '';
+    for (let i = 0; i < 7; i++) { const a = (i / 7) * Math.PI * 2; dots += `<circle cx="${(12 + Math.cos(a) * 8).toFixed(1)}" cy="${(12 + Math.sin(a) * 8).toFixed(1)}" r="1.4" fill="${c}" stroke="none"/>`; }
+    return svg(c, r, `<g>${dots}<animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="6s" repeatCount="indefinite"/></g>`);
+  },
+  amaru_forward: (c, r) => svg(c, r, `
+    <circle cx="18" cy="12" r="3"/><circle cx="18" cy="12" r="0.8" fill="${c}" stroke="none"/>
+    <path d="M3 12 q3 -4 6 0 q3 4 6 0"><animate attributeName="stroke-dashoffset" values="0;-12" dur="1.4s" repeatCount="indefinite"/></path>`),
+  amaru_lineage: (c, r) => svg(c, r, `
+    <path d="M12 21 V13" stroke-dasharray="14"><animate attributeName="stroke-dashoffset" values="14;0" dur="1.6s" repeatCount="indefinite"/></path>
+    <path d="M12 13 L6 6 M12 13 L18 6" stroke-dasharray="11"><animate attributeName="stroke-dashoffset" values="11;0" dur="1.6s" begin="0.4s" repeatCount="indefinite"/></path>
+    <circle cx="12" cy="21" r="1.4" fill="${c}" stroke="none"/><circle cx="6" cy="6" r="1.4" fill="${c}" stroke="none"/><circle cx="18" cy="6" r="1.4" fill="${c}" stroke="none"/>`),
+  // ---- SENTRA ----
+  sentra_gates: (c, r) => {
+    let locks = '';
+    for (let i = 0; i < 8; i++) { const x = 3 + (i % 4) * 6; const y = i < 4 ? 7 : 16;
+      locks += `<g><rect x="${x - 1.5}" y="${y}" width="3" height="3" rx="0.5"/><path d="M${x - 1} ${y} v-1.5 a1 1 0 0 1 2 0 V${y}"><animate attributeName="d" values="M${x - 1} ${y} v-1.5 a1 1 0 0 1 2 0 V${y}; M${x - 1} ${y} v-0.5 a1 1 0 0 1 2 0 V${y}" dur="0.9s" begin="${i * 0.1}s" repeatCount="indefinite"/></path></g>`; }
+    return svg(c, r, locks);
+  },
+  sentra_dsse: (c, r) => svg(c, r, `
+    <path d="M4 17 q4 -8 8 -4 q4 4 8 -4" />
+    <g opacity="0"><rect x="14" y="13" width="7" height="5" rx="1"/><text x="17.5" y="17" font-size="3" fill="${c}" stroke="none" text-anchor="middle">SIG</text>
+      <animate attributeName="opacity" values="0;1;1;0" dur="2s" repeatCount="indefinite"/>
+      <animateTransform attributeName="transform" type="scale" values="1.4;1" dur="0.4s" repeatCount="indefinite" additive="sum"/></g>`),
+  sentra_conduction: (c, r) => svg(c, r, `
+    <path d="M2 12 H7 L9 6 L12 18 L14 12 H22" stroke-dasharray="40"><animate attributeName="stroke-dashoffset" values="40;0;-40" dur="1.6s" repeatCount="indefinite"/></path>`),
+  sentra_cosign: (c, r) => svg(c, r, `
+    <circle cx="8" cy="12" r="3"/><path d="M11 12 H20 M17 12 V15 M20 12 V16"/>
+    <g><animateTransform attributeName="transform" type="rotate" values="0 8 12;90 8 12;0 8 12" dur="1.8s" repeatCount="indefinite"/><line x1="8" y1="12" x2="8" y2="9"/></g>`),
+  // ---- ROSIE ----
+  rosie_ensemble: (c, r) => {
+    let tally = '';
+    for (let i = 0; i < 5; i++) tally += `<line x1="${4 + i * 3.5}" y1="6" x2="${4 + i * 3.5}" y2="18" opacity="0"><animate attributeName="opacity" values="0;1" dur="0.3s" begin="${i * 0.25}s" fill="freeze" repeatCount="1"/><animate attributeName="opacity" values="1;1;0" dur="2.5s" begin="2.5s" repeatCount="indefinite"/></line>`;
+    return svg(c, r, tally);
+  },
+  rosie_routing: (c, r) => svg(c, r, `
+    <path d="M3 18 H8 L12 6 H16 L21 12"/>
+    <circle cx="3" cy="18" r="1.6" fill="${c}" stroke="none"><animateMotion dur="1.8s" repeatCount="indefinite" path="M0 0 H5 L9 -12 H13 L18 -6"/></circle>`),
+  rosie_step: (c, r) => svg(c, r, `
+    <path d="M13 2 L4 14 H11 L9 22 L20 9 H12 Z" fill="${c}" stroke="none" opacity="0.9"><animate attributeName="opacity" values="0.4;1;0.4" dur="0.9s" repeatCount="indefinite"/></path>`),
+  rosie_exec: (c, r) => svg(c, r, `
+    <rect x="4" y="14" width="3.5" height="6" rx="0.5"><animate attributeName="height" values="2;6;2" dur="1.6s" repeatCount="indefinite"/><animate attributeName="y" values="18;14;18" dur="1.6s" repeatCount="indefinite"/></rect>
+    <rect x="10" y="10" width="3.5" height="10" rx="0.5"><animate attributeName="height" values="4;10;4" dur="1.6s" begin="0.2s" repeatCount="indefinite"/><animate attributeName="y" values="16;10;16" dur="1.6s" begin="0.2s" repeatCount="indefinite"/></rect>
+    <rect x="16" y="7" width="3.5" height="13" rx="0.5"><animate attributeName="height" values="6;13;6" dur="1.6s" begin="0.4s" repeatCount="indefinite"/><animate attributeName="y" values="14;7;14" dur="1.6s" begin="0.4s" repeatCount="indefinite"/></rect>`),
+  // ---- KILLINCHU ----
+  kil_noaa: (c, r) => svg(c, r, `
+    <circle cx="5" cy="12" r="2.5" fill="${c}" stroke="none"/>
+    <path d="M7 10 L21 6 M7 12 H21 M7 14 L21 18"><animate attributeName="stroke-dashoffset" values="0;-10" dur="1.2s" repeatCount="indefinite"/></path>`),
+  kil_usgs: (c, r) => svg(c, r, `
+    <path d="M2 12 H6 L8 5 L11 19 L13 9 L15 15 L17 12 H22" stroke-dasharray="42"><animate attributeName="stroke-dashoffset" values="42;0;-42" dur="2s" repeatCount="indefinite"/></path>`),
+  kil_mq9: (c, r) => svg(c, r, `
+    <g><path d="M2 13 q5 -3 9 -1 q5 -4 11 -2 q-5 2 -9 2 q-5 2 -11 1 Z" fill="${c}" stroke="none" opacity="0.85"/>
+      <animateTransform attributeName="transform" type="translate" values="-2 1;2 -1;-2 1" dur="2.4s" repeatCount="indefinite"/></g>`),
+  kil_phase: (c, r) => svg(c, r, `
+    <path d="M2 12 q3 -7 6 0 q3 7 6 0 q3 -7 6 0" opacity="0.4"/>
+    <path d="M2 12 q3 -7 6 0 q3 7 6 0 q3 -7 6 0"><animateTransform attributeName="transform" type="translate" values="0 0;6 0;0 0" dur="2s" repeatCount="indefinite"/></path>`),
+  // ---- A11OY ----
+  a11_governance: (c, r) => svg(c, r, `
+    <g><line x1="4" y1="8" x2="20" y2="8"/><line x1="12" y1="4" x2="12" y2="8"/>
+      <path d="M4 8 l-2 5 h4 Z"/><path d="M20 8 l-2 5 h4 Z"/>
+      <animateTransform attributeName="transform" type="rotate" values="-8 12 8;6 12 8;0 12 8" dur="2.4s" repeatCount="indefinite"/></g>
+    <path d="M9 20 H15"/>`),
+  a11_router: (c, r) => svg(c, r, `
+    <circle cx="12" cy="12" r="3"/><path d="M12 9 V3 M12 15 V21 M9 12 H3 M15 12 H21 M14 10 l4 -4 M10 14 l-4 4 M14 14 l4 4 M10 10 l-4 -4"><animate attributeName="opacity" values="0.3;1;0.3" dur="1.5s" repeatCount="indefinite"/></path>`),
+  a11_formulas: (c, r) => {
+    let dots = '';
+    for (let i = 0; i < 35; i++) { const x = 3 + (i % 7) * 3; const y = 4 + Math.floor(i / 7) * 4;
+      dots += `<circle cx="${x}" cy="${y}" r="0.9" fill="${c}" stroke="none" opacity="0"><animate attributeName="opacity" values="0;1" dur="0.2s" begin="${(i * 0.04).toFixed(2)}s" fill="freeze" repeatCount="1"/></circle>`; }
+    return svg(c, r, `<g>${dots}<animate attributeName="opacity" values="1;0.3;1" dur="3s" begin="1.6s" repeatCount="indefinite"/></g>`);
+  },
+  a11_khipu: (c, r) => svg(c, r, `
+    <path d="M3 6 H21" /><path d="M6 6 V18 M12 6 V20 M18 6 V16" stroke-dasharray="16"><animate attributeName="stroke-dashoffset" values="16;0" dur="1.4s" repeatCount="indefinite"/></path>
+    <circle cx="6" cy="14" r="1.6" fill="${c}" stroke="none"/><circle cx="12" cy="16" r="1.6" fill="${c}" stroke="none"/><circle cx="18" cy="12" r="1.6" fill="${c}" stroke="none"/>`),
+};
+
+export function buildIcon(name, color, reduced) {
+  const f = ICONS[name];
+  if (f) return f(color, reduced);
+  return svg(color, reduced, `<circle cx="12" cy="12" r="6" fill="${color}" stroke="none"/>`);
+}

js/uds_npcs.js

@@ -0,0 +1,64 @@
+// uds_npcs.js
+// Background UDS NPC silhouettes — same humanoid template, neutral grey,
+// "UDS" monogram decal, standing at parade rest. They orbit slowly + idle-sway.
+import * as THREE from 'three';
+import { makeNPCTexture } from './canvas_decals.js';
+
+let sharedTexture = null;
+
+function npcMaterials() {
+  if (!sharedTexture) sharedTexture = makeNPCTexture();
+  return {
+    body: new THREE.MeshStandardMaterial({ map: sharedTexture, roughness: 0.85, metalness: 0.05, flatShading: true }),
+    limb: new THREE.MeshStandardMaterial({ color: 0x2c3138, roughness: 0.9, flatShading: true }),
+    head: new THREE.MeshStandardMaterial({ color: 0x3c4249, roughness: 0.9, flatShading: true }),
+  };
+}
+
+function buildNPC() {
+  const g = new THREE.Group();
+  const m = npcMaterials();
+  const torso = new THREE.Mesh(new THREE.CapsuleGeometry(0.3, 0.6, 4, 8), m.body);
+  torso.position.y = 1.05; g.add(torso);
+  const head = new THREE.Mesh(new THREE.SphereGeometry(0.22, 12, 10), m.head);
+  head.position.y = 1.62; g.add(head);
+  for (const side of [-1, 1]) {
+    // arms at parade rest — hands clasped front, slight inward angle
+    const arm = new THREE.Mesh(new THREE.CapsuleGeometry(0.08, 0.5, 4, 6), m.limb);
+    arm.position.set(side * 0.36, 0.92, 0.08);
+    arm.rotation.z = side * 0.12; arm.rotation.x = -0.25;
+    g.add(arm);
+    const leg = new THREE.Mesh(new THREE.CapsuleGeometry(0.11, 0.6, 4, 6), m.limb);
+    leg.position.set(side * 0.15, 0.5, 0);
+    g.add(leg);
+  }
+  return g;
+}
+
+// Create N NPCs arranged in a back arc. Returns { group, npcs[] } for animation.
+export function buildUDSNPCs(count = 4) {
+  const group = new THREE.Group();
+  const npcs = [];
+  for (let i = 0; i < count; i++) {
+    const npc = buildNPC();
+    const a = -0.9 + (i / Math.max(1, count - 1)) * 1.8; // spread across back arc
+    const radius = 6.5;
+    npc.position.set(Math.sin(a) * radius, 0, -radius * 0.55 + Math.cos(a) * 0.4);
+    npc.scale.setScalar(0.85);
+    npc.rotation.y = -a * 0.5; // face roughly toward center/camera
+    npc.userData = { baseAngle: a, radius, phase: Math.random() * Math.PI * 2, baseX: npc.position.x };
+    group.add(npc); npcs.push(npc);
+  }
+  return { group, npcs };
+}
+
+// Slow orbit + idle sway. orbit is subtle so NPCs stay readable in-frame.
+export function animateNPCs(npcs, t, reduced) {
+  if (reduced) return;
+  for (const npc of npcs) {
+    const u = npc.userData;
+    npc.position.y = Math.sin(t * 0.0009 + u.phase) * 0.04;          // idle bob
+    npc.rotation.z = Math.sin(t * 0.0011 + u.phase) * 0.02;          // idle sway
+    npc.position.x = u.baseX + Math.sin(t * 0.00012 + u.phase) * 0.6; // slow lateral orbit
+  }
+}