Spaces:
Running
Running
| <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 ; | |
| animation-iteration-count: 1 ; | |
| transition-duration: 0.01ms ; | |
| scroll-behavior: auto ; | |
| } | |
| } | |
| </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 · 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 · 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 · 749 / 14 / 163 LOCKED · 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 · polls /v1/router/stats · 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> | |