console/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>A11oy — Brand Orchestration Layer</title>
    <meta name="description" content="A11oy is the brand orchestration command center for the SZL family of products — governing design tokens, voice, component library, releases, and accessibility compliance across all sub-brands." />
    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' rx='6' fill='%230a0f1e'/><text y='24' x='4' font-size='20' font-family='monospace' fill='%233b82f6'>A</text></svg>" />
    <style>
      .skip-to-content {
        position: absolute;
        left: -9999px;
        top: 1rem;
        z-index: 99999;
        padding: 0.5rem 1.25rem;
        background: #c8d8e8;
        color: #060b12;
        font-weight: 600;
        font-size: 0.875rem;
        line-height: 1.5;
        border-radius: 4px;
        text-decoration: none;
        white-space: nowrap;
        border: 2px solid #4d8fcc;
      }
      .skip-to-content:focus {
        left: 1rem;
        outline: 3px solid #4d8fcc;
        outline-offset: 2px;
      }
      :focus-visible {
        outline: 3px solid #4d8fcc;
        outline-offset: 2px;
        border-radius: 3px;
      }
      @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
          scroll-behavior: auto !important;
        }
      }
    </style>
    <script type="module" crossorigin src="/assets/index-p7D9h6Gt.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-WpFF-hl3.css">
  </head>
  <body>
<!-- SZL FLAGSHIP HERO v2 (ADDITIVE, prepended before #root) — Sign: Yachay · Perplexity Computer Agent
     Anduril×Anthropic×a11oy aesthetic. Kanchay tokens reused (no new tokens). Open-source fonts.
     Self-contained: no external CDN, no build step. Canvas wire-mesh animation (Live Wires lineage).
     Does NOT touch #root (React SPA) or any /api route — pure prepend. MARKER: data-szl-hero-v2 -->
<section id="szl-flagship-hero" data-szl-hero-v2="a11oy" aria-label="a11oy command hero">
  <style>
    #szl-flagship-hero{position:relative;width:100%;min-height:560px;background:#0a0f1e;color:#f5f7fa;
      font-family:"Inter","IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;overflow:hidden;
      border-bottom:1px solid #3c4757}
    #szl-flagship-hero *{box-sizing:border-box}
    #szl-hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;opacity:.55}
    #szl-hero-grid{position:absolute;inset:0;z-index:1;pointer-events:none;
      background-image:linear-gradient(rgba(60,71,87,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(60,71,87,.18) 1px,transparent 1px);
      background-size:48px 48px;mask-image:radial-gradient(ellipse 75% 70% at 50% 38%,#000 55%,transparent 100%)}
    #szl-hero-inner{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:30px 34px 26px}
    .szl-hero-top{display:flex;align-items:center;gap:12px;font-family:"JetBrains Mono",ui-monospace,monospace;
      font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#76859b}
    .szl-hero-top .dot{width:7px;height:7px;border-radius:50%;background:#1f9d57;box-shadow:0 0 0 0 rgba(31,157,87,.6);
      animation:szlpulse 2.4s infinite}
    @keyframes szlpulse{0%{box-shadow:0 0 0 0 rgba(31,157,87,.55)}70%{box-shadow:0 0 0 9px rgba(31,157,87,0)}100%{box-shadow:0 0 0 0 rgba(31,157,87,0)}}
    .szl-hero-top .sep{color:#3c4757}
    .szl-hero-top b{color:#d7b96b;font-weight:600}
    #szl-flagship-hero h1{font-size:clamp(30px,5vw,52px);line-height:1.02;margin:18px 0 12px;font-weight:680;
      letter-spacing:-.02em;max-width:18ch}
    #szl-flagship-hero h1 .accent{color:#d7b96b}
    .szl-hero-sub{font-size:clamp(14px,1.7vw,17px);line-height:1.5;color:#c9d2df;max-width:60ch;margin:0 0 22px}
    .szl-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:1px;
      background:#3c4757;border:1px solid #3c4757;border-radius:10px;overflow:hidden;max-width:880px}
    .szl-metric{background:#10151c;padding:13px 15px}
    .szl-metric .v{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:21px;font-weight:600;color:#f5f7fa;line-height:1}
    .szl-metric .v .u{font-size:12px;color:#76859b;margin-left:3px}
    .szl-metric .k{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:#76859b;margin-top:7px}
    .szl-metric.good .v{color:#5cc4bf}
    .szl-hero-cta{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
    .szl-hero-cta a{font-size:13px;font-weight:600;text-decoration:none;padding:9px 16px;border-radius:8px;
      font-family:"Inter",sans-serif;border:1px solid #3c4757;transition:.16s}
    .szl-hero-cta a.primary{background:#d7b96b;color:#10151c;border-color:#d7b96b}
    .szl-hero-cta a.primary:hover{background:#e4cf99}
    .szl-hero-cta a.ghost{background:transparent;color:#c9d2df}
    .szl-hero-cta a.ghost:hover{border-color:#5cc4bf;color:#5cc4bf}
    .szl-hero-foot{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:#525f73;margin-top:18px;letter-spacing:.04em}
    @media(prefers-reduced-motion:reduce){#szl-hero-canvas{animation:none;opacity:.3}.szl-hero-top .dot{animation:none}}
    @media(max-width:640px){#szl-flagship-hero{min-height:480px}}
  </style>
  <canvas id="szl-hero-canvas" aria-hidden="true"></canvas>
  <div id="szl-hero-grid"></div>
  <div id="szl-hero-inner">
    <div class="szl-hero-top">
      <span class="dot"></span><span>SZL HOLDINGS</span><span class="sep">/</span>
      <span>A11OY</span><span class="sep">/</span>
      <span>DOCTRINE v11 · LOCKED</span><span class="sep">/</span>
      <b>REPLAY bacf5443…</b>
    </div>
    <h1>The <span class="accent">brand orchestration</span> command layer.</h1>
    <p class="szl-hero-sub">One governed control plane for tokens, voice, components, releases and accessibility across every SZL sub-brand — sensor-fused like Lattice, transparent like a constitution. Human retains final authority on every gate.</p>
    <div class="szl-metrics"><div class="szl-metric"><div class="v">749<span class="u">decls</span></div><div class="k">Lean kernel</div></div><div class="szl-metric"><div class="v">14<span class="u">axioms</span></div><div class="k">unique</div></div><div class="szl-metric"><div class="v">163<span class="u">sorries</span></div><div class="k">tracked</div></div><div class="szl-metric good"><div class="v">13<span class="u">axis</span></div><div class="k">yuyay_v3</div></div><div class="szl-metric good"><div class="v">100%<span class="u">gates</span></div><div class="k">GREEN</div></div></div>
    <div class="szl-hero-cta"><a class="primary" href="#root">Open command console</a><a class="ghost" href="/api/a11oy/v1/evidence">Evidence ledger</a></div>
    <!-- ADDITIVE (Yachay): Frontier 3D Visualizations banner. Pure prepend-style insert, links to
         self-contained R3F/Three.js r171 scenes served at /static/viz/{khipu,doctrine,router}/.
         WebGPU baseline + WebGL2 fallback. Real data binding. MARKER: data-szl-viz-banner -->
    <div data-szl-viz-banner="frontier-3d" style="margin-top:26px;padding-top:20px;border-top:1px solid #3c4757">
      <div style="font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#76859b;margin-bottom:12px">FRONTIER 3D &middot; live scenes</div>
      <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;max-width:880px">
        <a href="/static/viz/khipu/" style="text-decoration:none;background:#10151c;border:1px solid #3c4757;border-radius:10px;padding:14px 16px;transition:.16s;display:block" onmouseover="this.style.borderColor='#c0392b'" onmouseout="this.style.borderColor='#3c4757'">
          <div style="font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:600;color:#f5f7fa">Khipu Constellation</div>
          <div style="font-size:11.5px;color:#9aa6b8;margin-top:5px;line-height:1.4">Receipt ledger as a 3D star-field &middot; polls 6 flagship endpoints</div>
        </a>
        <a href="/static/viz/doctrine/" style="text-decoration:none;background:#10151c;border:1px solid #3c4757;border-radius:10px;padding:14px 16px;transition:.16s;display:block" onmouseover="this.style.borderColor='#d7b96b'" onmouseout="this.style.borderColor='#3c4757'">
          <div style="font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:600;color:#f5f7fa">Doctrine Cathedral</div>
          <div style="font-size:11.5px;color:#9aa6b8;margin-top:5px;line-height:1.4">Doctrine v11 as architecture &middot; 749 / 14 / 163 LOCKED &middot; WASD walkthrough</div>
        </a>
        <a href="/static/viz/router/" style="text-decoration:none;background:#10151c;border:1px solid #3c4757;border-radius:10px;padding:14px 16px;transition:.16s;display:block" onmouseover="this.style.borderColor='#5cc4bf'" onmouseout="this.style.borderColor='#3c4757'">
          <div style="font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:600;color:#f5f7fa">LLM-Router Live</div>
          <div style="font-size:11.5px;color:#9aa6b8;margin-top:5px;line-height:1.4">7-tier model router as organs &middot; polls /v1/router/stats &middot; sovereign mode</div>
        </a>
      </div>
    </div>
    <div class="szl-hero-foot">FRONTIER: Live constitution diff — every gate change replays against doctrine before merge · governed loop GREEN · additive deploy · sign: Yachay</div>
  </div>
  <script>
  (function(){
    var prefersReduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    var c = document.getElementById('szl-hero-canvas'); if(!c) return;
    var ctx = c.getContext('2d'); var W,H,DPR,nodes=[],t=0;
    var ACCENT='#d7b96b', TEAL='#5cc4bf', LINE='rgba(60,71,87,.55)';
    function size(){DPR=Math.min(2,window.devicePixelRatio||1);var r=c.getBoundingClientRect();
      W=c.width=Math.max(1,r.width*DPR);H=c.height=Math.max(1,r.height*DPR);build();}
    function build(){nodes=[];var N=Math.round((W*H)/(DPR*DPR)/26000);N=Math.max(26,Math.min(64,N));
      for(var i=0;i<N;i++){nodes.push({x:Math.random()*W,y:Math.random()*H,
        vx:(Math.random()-.5)*0.18*DPR,vy:(Math.random()-.5)*0.18*DPR,
        r:(1.1+Math.random()*1.8)*DPR,p:Math.random()*6.28});}}
    function step(){t+=0.016;ctx.clearRect(0,0,W,H);
      for(var i=0;i<nodes.length;i++){var n=nodes[i];n.x+=n.vx;n.y+=n.vy;
        if(n.x<0||n.x>W)n.vx*=-1; if(n.y<0||n.y>H)n.vy*=-1;}
      var MAX=150*DPR;
      for(var i=0;i<nodes.length;i++){for(var j=i+1;j<nodes.length;j++){
        var a=nodes[i],b=nodes[j];var dx=a.x-b.x,dy=a.y-b.y;var d=Math.sqrt(dx*dx+dy*dy);
        if(d<MAX){var o=(1-d/MAX);ctx.strokeStyle='rgba(92,196,191,'+(o*0.28).toFixed(3)+')';
          ctx.lineWidth=DPR*0.7;ctx.beginPath();ctx.moveTo(a.x,a.y);ctx.lineTo(b.x,b.y);ctx.stroke();}}}
      for(var i=0;i<nodes.length;i++){var n=nodes[i];
        var pulse=0.5+0.5*Math.sin(t*1.3+n.p);
        ctx.fillStyle = (i%5===0)?ACCENT:TEAL;
        ctx.globalAlpha=0.35+0.45*pulse;ctx.beginPath();ctx.arc(n.x,n.y,n.r*(0.8+0.5*pulse),0,6.2832);ctx.fill();}
      ctx.globalAlpha=1;
      if(!prefersReduce) requestAnimationFrame(step);}
    size();window.addEventListener('resize',size);
    if(prefersReduce){step();}else{requestAnimationFrame(step);}
  })();
  </script>
</section>


    <a href="#main-content" class="skip-to-content">Skip to main content</a>
    <div id="root"></div>
  </body>
</html>