Hugging Face's logo

Spaces:
SZLHOLDINGS
/
README
Running

App Files Community
README / index.html
betterwithage's picture
betterwithage
Polish org card: SVG poster fallback per organ so the 5-organ mesh is never empty when the org-card iframe strips the Three.js module; live 3D paints over posters when WebGL is supported; resilient per-cell init
d56c193 verified
raw
history blame contribute delete
47.5 kB
<!DOCTYPE html>
<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 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>
</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) -->
</body>
</html>