Spaces:

SZLHOLDINGS
/

README

Running

File size: 47,490 Bytes

<!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>