import{j as e,d as c,G as gt,B as pt}from"./vendor-ui-CTPZfE9g.js";import{u as ut,r as l}from"./vendor-react-C0ZmnAiH.js";import{c as yt,u as xt,s as wt,S as Ne,B as vt,U as kt,a as bt}from"./index-DaP2NQN3.js";import{u as Mt}from"./use_metadata-B1Bii8Lc.js";import{B as At}from"./badge-BW75e_q6.js";import{u as Dt}from"./vendor-utils-C4xF7r1N.js";import{C as N,B as Ue,a as G,S as Qe,A as rt,b as Ze,L as Xe,c as We,N as ot,d as Ct,u as St,V as Lt,e as It,H as Ht,f as Et}from"./vendor-three-Cua8QHdU.js";import"./vendor-query-CdZ_x03T.js";import"./vendor-charts-BITAxzz4.js";var jt={VITE_API_HOST_URL:"https://modelworks.ai/api"};const zt=jt.VITE_API_HOST_URL,Rt=async t=>{try{return(await t.get(`${zt}/home/featured-circuits`)).data.payload.map(a=>({name:a.name,description:a.description,avatarUrl:a.avatar_url,primaryVersionState:a.primary_version_state}))}catch(n){throw console.error("Error fetching featured circuits:",n),n}},Pt=()=>{const[,t]=Dt(wt),n=ut(),r=yt({navigate:n,setState:t});return{useFeaturedCircuitsQuery:()=>xt({queryKey:["featured-circuits"],queryFn:async()=>await Rt(r),options:{staleTime:5*60*1e3},navigate:n,setState:t})}},Bt=128,Ge=70,Ee=7,Vt=pt`
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
`,Ft=c.div`
	position: relative;
	width: 0;
	height: 0;
	pointer-events: none;
	color: #ffffff;
`,Tt=c.div`
	position: absolute;
	width: 14px;
	height: 14px;
	left: 0;
	top: 0;
	transform: translate(-50%, -50%);
	border: 1px solid #ffffff;
	${t=>t.$blink&&gt`
			animation: ${Vt} 160ms ease-in-out 0s 4;
		`}
`,_t=c.div`
	position: absolute;
	${t=>t.$side==="right"?`left: ${Ee}px;`:`right: ${Ee}px;`}
	top: -1px;
	width: ${Ge}px;
	height: 1px;
	background: #ffffff;
	opacity: ${t=>t.$visible?1:0};
	transition: opacity 250ms ease;
`,$t=c.div`
	position: absolute;
	${t=>t.$side==="right"?`left: ${Ee+Ge+6}px;`:`right: ${Ee+Ge+6}px;`}
	top: -22px;
	padding: 10px 10px ${t=>t.$hasBadge?"30px":"10px"} 10px;
	background: rgb(8, 14, 18);
	border: 1px solid #ffffff;
	border-radius: 6px;
	color: #ffffff !important;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 13px;
	letter-spacing: 0.04em;
	max-width: 260px;
	min-width: 120px;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 8px;
	opacity: ${t=>t.$visible?1:0};
	transform: translateX(${t=>t.$visible?"0":t.$side==="right"?"-4px":"4px"});
	transition: opacity 280ms ease, transform 280ms ease;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);

	& * {
		color: #ffffff;
	}
`,Ot=c.div`
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	overflow: hidden;
	margin-top: 4px;
`,Yt=c.img`
	width: 20px;
	height: 20px;
	border-radius: 50%;
	object-fit: cover;
`,Nt=c.div`
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
`,Gt=c.div`
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
`,Ut=c.div`
	opacity: 0.85;
	font-size: 12px;
	line-height: 1.4;
`,Qt=c.span`
	font-size: 9px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 2px 5px;
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.5);
	color: ${t=>t.$color};
	position: absolute;
	bottom: 10px;
	right: 6px;
`,Zt=["#92A1C6","#146A7C","#F0AB3D","#C271B4","#C20D90"];function Xt(t,n){return t.length<=n?t:`${t.slice(0,n)}...`}function Wt({name:t,description:n,avatarUrl:r,primaryVersionState:a,side:u,tooltipVisible:i,squareBlink:k}){const R=t.split("/")[0]||t,p=a?Ne[a]||Ne.RUNNING:Ne.RUNNING;return e.jsxs(Ft,{children:[e.jsx(Tt,{$blink:k,"aria-hidden":"true"},k?"blink":"idle"),e.jsx(_t,{$side:u,$visible:i,"aria-hidden":"true"}),e.jsxs($t,{$side:u,$visible:i,$hasBadge:!!a,role:"status","aria-live":"polite","aria-atomic":"true",children:[e.jsx(Ot,{"aria-hidden":"true",children:r?e.jsx(Yt,{src:r,alt:""}):e.jsx(vt,{size:20,name:R,variant:"beam",colors:Zt})}),e.jsxs(Nt,{children:[e.jsx(Gt,{children:t}),e.jsx(Ut,{children:Xt(n,Bt)})]}),a&&e.jsx(Qt,{$color:p,children:a})]})]})}function qt(){const n=document.createElement("canvas");n.width=128,n.height=128;const r=n.getContext("2d");if(r){const i=r.createRadialGradient(64,64,0,64,64,64);i.addColorStop(0,"rgba(255,255,255,0.5)"),i.addColorStop(.2,"rgba(255,255,255,0.28)"),i.addColorStop(.5,"rgba(255,255,255,0.1)"),i.addColorStop(.8,"rgba(255,255,255,0.02)"),i.addColorStop(1,"rgba(255,255,255,0)"),r.fillStyle=i,r.fillRect(0,0,128,128)}const a=new Ze(n);return a.minFilter=Xe,a.magFilter=We,a.generateMipmaps=!0,a.needsUpdate=!0,a}function Jt(t){const{count:n,radius:r,thickness:a,arms:u,turns:i,fogSize:k,fogOpacity:R,innerColor:p,midColor:E,outerColor:j,interArmBias:V,materialRef:O}=t,J=l.useMemo(()=>qt(),[]),ne=(A,P,b)=>{if(b<.001)return 1;const L=Math.atan2(P,A);let D=0;for(let C=0;C<u;C++){const y=C/u*Math.PI*2,F=b*b*Math.PI*2*i+y;let x=((L-F)%(Math.PI*2)+Math.PI*2)%(Math.PI*2);x>Math.PI&&(x-=Math.PI*2);const T=Math.abs(x),z=Math.max(0,1-T/(a*1.5));z>D&&(D=z)}return D},U=l.useMemo(()=>{const A=new N(p),P=new N(E),b=new N(j),L=v=>v<.5?A.clone().lerp(P,v*2):P.clone().lerp(b,(v-.5)*2),D=new Float32Array(n*3),C=new Float32Array(n*3),y=new Float32Array(n),F=new Float32Array(n);let x=0,T=0;const z=n*30;for(;x<n&&T<z;){T++;const v=Math.pow(Math.random(),.6),$=Math.sqrt(v)*r,M=Math.random()*Math.PI*2,I=Math.cos(M)*$,K=Math.sin(M)*$,Z=$/r,ae=1-ne(I,K,Z)*V;if(Math.random()>ae)continue;const le=1-Z*.85,pe=(Math.random()-.5)*a*le*.4;D[x*3]=I,D[x*3+1]=K,D[x*3+2]=pe;const ce=L(Z),ue=Math.pow(1-Z,1.5)*.6,ye=.35+Math.random()*.4+ue;C[x*3]=ce.r*ye,C[x*3+1]=ce.g*ye,C[x*3+2]=ce.b*ye;const je=.6+Math.pow(1-Z,1.5)*.4;y[x]=je*(.5+Math.random()*.5),F[x]=.5+Math.pow(1-Z,1.2)*.8+Math.random()*.3,x++}const B=x,_=new Ue;return _.setAttribute("position",new G(D.subarray(0,B*3),3)),_.setAttribute("color",new G(C.subarray(0,B*3),3)),_.setAttribute("aOpacity",new G(y.subarray(0,B),1)),_.setAttribute("aSize",new G(F.subarray(0,B),1)),_},[n,r,a,u,i,p,E,j,V]),Q=l.useMemo(()=>{const A=new Qe({uniforms:{uTexture:{value:J},uFogOpacity:{value:R},uPixelRatio:{value:typeof window<"u"?window.devicePixelRatio:1},uBaseSize:{value:k}},vertexShader:`
				attribute float aOpacity;
				attribute float aSize;
				attribute vec3 color;
				uniform float uPixelRatio;
				uniform float uBaseSize;
				varying vec3 vColor;
				varying float vOpacity;
				void main() {
					vColor = color;
					vOpacity = aOpacity;
					vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
					gl_Position = projectionMatrix * mvPosition;
					float size = uBaseSize * aSize * (300.0 / -mvPosition.z);
					gl_PointSize = max(1.0, size * uPixelRatio);
				}
			`,fragmentShader:`
				uniform sampler2D uTexture;
				uniform float uFogOpacity;
				varying vec3 vColor;
				varying float vOpacity;
				void main() {
					vec4 tex = texture2D(uTexture, gl_PointCoord);
					float alpha = tex.a * vOpacity * uFogOpacity;
					if (alpha < 0.002) discard;
					gl_FragColor = vec4(vColor * tex.rgb, alpha);
				}
			`,transparent:!0,depthWrite:!1,blending:rt,vertexColors:!0});return O.current=A,A},[J,R,k,O]);return e.jsx("points",{geometry:U,material:Q})}function Kt(){const n=document.createElement("canvas");n.width=128,n.height=128;const r=n.getContext("2d");if(r){const i=r.createRadialGradient(64,64,0,64,64,64);i.addColorStop(0,"rgba(0,0,0,0.85)"),i.addColorStop(.3,"rgba(0,0,0,0.45)"),i.addColorStop(.6,"rgba(0,0,0,0.12)"),i.addColorStop(1,"rgba(0,0,0,0)"),r.fillStyle=i,r.fillRect(0,0,128,128)}const a=new Ze(n);return a.minFilter=Xe,a.magFilter=We,a.generateMipmaps=!0,a.needsUpdate=!0,a}function en(t){const{count:n,radius:r,thickness:a,arms:u,turns:i,dustSize:k,dustOpacity:R,innerColor:p,midColor:E,outerColor:j}=t,V=l.useMemo(()=>Kt(),[]),O=(U,Q,A)=>{if(A<.001)return 1;const P=Math.atan2(Q,U);let b=0;for(let L=0;L<u;L++){const D=L/u*Math.PI*2,C=A*A*Math.PI*2*i+D;let y=((P-C)%(Math.PI*2)+Math.PI*2)%(Math.PI*2);y>Math.PI&&(y-=Math.PI*2);const F=Math.abs(y),x=Math.max(0,1-F/(a*.8));x>b&&(b=x)}return b},J=l.useMemo(()=>{const U=new N(p),Q=new N(E),A=new N(j),P=B=>B<.5?U.clone().lerp(Q,B*2):Q.clone().lerp(A,(B-.5)*2),b=new Float32Array(n*3),L=new Float32Array(n*3),D=new Float32Array(n),C=new Float32Array(n);let y=0,F=0;const x=n*40;for(;y<n&&F<x;){F++;const B=Math.pow(Math.random(),.5),_=Math.sqrt(B)*r,v=Math.random()*Math.PI*2,$=Math.cos(v)*_,M=Math.sin(v)*_,I=_/r,K=O($,M,I);if(I<.15||I>.95)continue;const Z=K*.7+.15;if(Math.random()>Z)continue;const fe=1-I*.85,ae=(Math.random()-.5)*a*fe*.2;b[y*3]=$,b[y*3+1]=M,b[y*3+2]=ae;const le=P(I),pe=le.r*.15+.04,ce=le.g*.08+.02,ue=le.b*.05+.01;L[y*3]=pe,L[y*3+1]=ce,L[y*3+2]=ue,D[y]=K*(.6+Math.random()*.4),C[y]=.6+Math.random()*.5+K*.4,y++}const T=y,z=new Ue;return z.setAttribute("position",new G(b.subarray(0,T*3),3)),z.setAttribute("color",new G(L.subarray(0,T*3),3)),z.setAttribute("aOpacity",new G(D.subarray(0,T),1)),z.setAttribute("aSize",new G(C.subarray(0,T),1)),z},[n,r,a,u,i,p,E,j]),ne=l.useMemo(()=>new Qe({uniforms:{uTexture:{value:V},uDustOpacity:{value:R},uPixelRatio:{value:typeof window<"u"?window.devicePixelRatio:1},uBaseSize:{value:k}},vertexShader:`
				attribute float aOpacity;
				attribute float aSize;
				attribute vec3 color;
				uniform float uPixelRatio;
				uniform float uBaseSize;
				varying vec3 vColor;
				varying float vOpacity;
				void main() {
					vColor = color;
					vOpacity = aOpacity;
					vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
					gl_Position = projectionMatrix * mvPosition;
					float size = uBaseSize * aSize * (300.0 / -mvPosition.z);
					gl_PointSize = max(1.0, size * uPixelRatio);
				}
			`,fragmentShader:`
				uniform sampler2D uTexture;
				uniform float uDustOpacity;
				varying vec3 vColor;
				varying float vOpacity;
				void main() {
					vec4 tex = texture2D(uTexture, gl_PointCoord);
					float alpha = tex.a * vOpacity * uDustOpacity;
					if (alpha < 0.002) discard;
					// Dark dust: output dark color with opacity to absorb light behind it
					gl_FragColor = vec4(vColor * tex.a, alpha);
				}
			`,transparent:!0,depthWrite:!1,blending:ot,vertexColors:!0}),[V,R,k]);return e.jsx("points",{geometry:J,material:ne})}function tn(){const n=document.createElement("canvas");n.width=256,n.height=256;const r=n.getContext("2d");if(r){const i=r.createRadialGradient(128,128,0,128,128,128);i.addColorStop(0,"rgba(255,255,255,1)"),i.addColorStop(.15,"rgba(255,255,255,0.6)"),i.addColorStop(.4,"rgba(255,255,255,0.18)"),i.addColorStop(.75,"rgba(255,255,255,0.04)"),i.addColorStop(1,"rgba(255,255,255,0)"),r.fillStyle=i,r.fillRect(0,0,256,256)}const a=new Ze(n);return a.minFilter=Xe,a.magFilter=We,a.generateMipmaps=!0,a.needsUpdate=!0,a}function nn(t){const n=l.useRef(null),{count:r,arms:a,turns:u,radius:i,thickness:k,dotSize:R,innerColor:p,midColor:E,outerColor:j,rotationSpeed:V,glowColor:O,glowSize:J,glowIntensity:ne,offsetX:U,offsetY:Q,entries:A,cycleInterval:P,fogCount:b,fogSize:L,fogOpacity:D,fogInterArmBias:C,dustCount:y,dustSize:F,dustOpacity:x}=t,T=l.useRef(null),z=l.useMemo(()=>tn(),[]),B=l.useMemo(()=>new Ct({map:z,color:new N(O),transparent:!0,depthWrite:!1,blending:rt,opacity:ne}),[z,O,ne]),{geometry:_,candidates:v,dotPositions:$}=l.useMemo(()=>{const f=new N(p),g=new N(E),s=new N(j),d=h=>h<.5?f.clone().lerp(g,h*2):g.clone().lerp(s,(h-.5)*2),o=Math.PI*i*i,m=Math.sqrt(2*o/(r*Math.sqrt(3))),w=m*Math.sqrt(3)/2,X=Math.ceil(i*2/w)+2,S=[],ee=(h,H,te)=>{if(te<.001)return 1;const he=Math.atan2(H,h);let se=0;for(let Y=0;Y<a;Y++){const Ie=Y/a*Math.PI*2,me=te*te*Math.PI*2*u+Ie;let ge=((he-me)%(Math.PI*2)+Math.PI*2)%(Math.PI*2);ge>Math.PI&&(ge-=Math.PI*2);const Ye=Math.abs(ge),He=Math.max(0,1-Ye/(k*1.5));He>se&&(se=He)}return se};for(let h=-Math.floor(X/2);h<=Math.floor(X/2);h++){const H=h*w,te=h%2===0?0:m/2,he=Math.ceil(i*2/m)+2;for(let se=-Math.floor(he/2);se<=Math.floor(he/2);se++){const Y=se*m+te,Ie=Math.sqrt(Y*Y+H*H);if(Ie>i)continue;const me=Ie/i,ge=ee(Y,H,me),Ye=Math.pow(1-me,2),He=Math.min(1,Ye+ge*.9+.05);if(Math.random()>He)continue;const ht=1-me*.85,mt=(Math.random()-.5)*k*ht*.3;S.push({x:Y,y:H,z:mt,rNorm:me,armProx:ge})}}const W=S.length,oe=new Float32Array(W*3),q=new Float32Array(W*3),Ce=new Float32Array(W),Se=new Float32Array(W),Le=[];for(let h=0;h<W;h++)S[h].armProx>.6&&S[h].rNorm>.4&&S[h].rNorm<.85&&Le.push(h);const et=new Array(W);for(let h=0;h<W;h++){const H=S[h];oe[h*3]=H.x,oe[h*3+1]=H.y,oe[h*3+2]=H.z,et[h]=[H.x,H.y,H.z],Se[h]=h;const te=d(H.rNorm),he=1+Math.pow(1-H.rNorm,2)*1.2,Y=(.5+H.armProx*.7)*he;q[h*3]=te.r*Y,q[h*3+1]=te.g*Y,q[h*3+2]=te.b*Y,Ce[h]=R}const ve=new Ue;return ve.setAttribute("position",new G(oe,3)),ve.setAttribute("color",new G(q,3)),ve.setAttribute("aSize",new G(Ce,1)),ve.setAttribute("aIndex",new G(Se,1)),{geometry:ve,candidates:Le,dotPositions:et}},[r,a,u,i,k,R,p,E,j]),M=A.length>0?A:[{name:"",description:""}],I=l.useMemo(()=>{const f=new Map;if(v.length===0||$.length===0)return f;const g=M.filter(d=>d.name);if(g.length===0)return f;const s=[...v].sort((d,o)=>{const m=$[d],w=$[o];if(!m||!w)return 0;const X=Math.atan2(m[1],m[0]),S=Math.atan2(w[1],w[0]);return X-S});return g.forEach((d,o)=>{if(!d.name)return;const m=Math.floor(o/g.length*s.length),w=s[m]??s[0];f.set(d.name,w)}),f},[v,M,$]),K=l.useMemo(()=>Array.from(I.values()),[I]),Z=l.useMemo(()=>{if(M.length>=10||v.length===0)return[];const f=new Set(I.values()),s=[...v.filter(d=>!f.has(d))].sort(()=>Math.random()-.5);return s.slice(0,Math.min(50,s.length))},[M.length,v,I]),fe=l.useMemo(()=>[...K,...Z],[K,Z]),{size:ae,camera:le}=St(),pe=400,ce=2500,ue=25,ye=700,je=400,[de,xe]=l.useState("show"),[ze,ke]=l.useState(()=>{const f=M[0];return f!=null&&f.name&&I.has(f.name)?I.get(f.name):v.length>0?v[0]:0}),[Re,Pe]=l.useState(0),be=M[Re%M.length],Be=$[ze]??[0,0,0],qe=l.useMemo(()=>new N("#ffffff"),[]),ie=l.useRef(performance.now()),Ve=l.useRef(0),Me=l.useRef(new Lt),Je=l.useRef(!1),re=l.useMemo(()=>new Qe({uniforms:{uPixelRatio:{value:typeof window<"u"?window.devicePixelRatio:1},uSizeScale:{value:1},uHighlightIndex:{value:-1},uHighlightColor:{value:new N("#ffffff")}},vertexShader:`
				attribute float aSize;
				attribute float aIndex;
				uniform float uPixelRatio;
				uniform float uSizeScale;
				uniform float uHighlightIndex;
				uniform vec3 uHighlightColor;
				varying vec3 vColor;
				void main() {
					bool isHi = abs(aIndex - uHighlightIndex) < 0.5;
					vColor = isHi ? uHighlightColor : color;
					float sizeMul = isHi ? 1.8 : 1.0;
					vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
					gl_Position = projectionMatrix * mvPosition;
					gl_PointSize = max(1.0, aSize * sizeMul * uSizeScale * uPixelRatio * (300.0 / -mvPosition.z));
				}
			`,fragmentShader:`
				varying vec3 vColor;
				void main() {
					vec2 c = gl_PointCoord - vec2(0.5);
					if (dot(c, c) > 0.25) discard;
					gl_FragColor = vec4(vColor, 1.0);
				}
			`,transparent:!0,depthWrite:!1,blending:ot,vertexColors:!0}),[]);l.useEffect(()=>{const g=Math.min(1,Math.max(.45,ae.height/720));re.uniforms.uSizeScale.value=g},[ae.height,re]),l.useEffect(()=>{re.uniforms.uHighlightColor.value=qe},[qe,re]);const[st,Fe]=l.useState("right"),we=l.useRef("right"),Ae=l.useRef(!1);l.useEffect(()=>{if(typeof window>"u"||!window.matchMedia)return;const f=window.matchMedia("(prefers-reduced-motion: reduce)");Ae.current=f.matches;const g=s=>{Ae.current=s.matches};return f.addEventListener("change",g),()=>f.removeEventListener("change",g)},[]);const lt=380,ct=80,Ke=.04,De=8,Te=(f,g)=>{const s=Math.cos(g),d=Math.sin(g),[o,m,w]=$[f]??[0,0,0],X=o*s-m*d+U,S=o*d+m*s+Q;return Me.current.set(X,S,w),Me.current.project(le),{ndcX:Me.current.x,ndcY:Me.current.y}},_e=()=>({marginX:lt/Math.max(ae.width,1)*2,marginY:ct/Math.max(ae.height,1)*2}),dt=()=>{var w;const f=((w=n.current)==null?void 0:w.rotation.z)??0,g=Math.max(P,1e3)/1e3,{marginX:s,marginY:d}=_e(),o=[];for(const X of v){let S=!0;for(let ee=0;ee<De;ee++){const W=ee/(De-1)*g,oe=f+W*V,{ndcX:q,ndcY:Ce}=Te(X,oe);if(Math.abs(q)>1-Ke){S=!1;break}if(Math.abs(Ce)>1-d){S=!1;break}const Se=q+s<=1,Le=q-s>=-1;if(!Se&&!Le){S=!1;break}}S&&o.push(X)}const m=o.length>0?o:v.length>0?v:[0];return m[Math.floor(Math.random()*m.length)]},ft=f=>{var m;const g=((m=n.current)==null?void 0:m.rotation.z)??0,s=Math.max(P,1e3)/1e3,{marginX:d,marginY:o}=_e();for(let w=0;w<De;w++){const X=w/(De-1)*s,S=g+X*V,{ndcX:ee,ndcY:W}=Te(f,S);if(Math.abs(ee)>1-Ke||Math.abs(W)>1-o)return!1;const oe=ee+d<=1,q=ee-d>=-1;if(!oe&&!q)return!1}return!0},$e=f=>{for(let g=0;g<M.length;g++){const s=(f+g)%M.length,d=M[s];if(!(d!=null&&d.name))continue;const o=I.get(d.name);if(o!==void 0&&ft(o))return{entryIndex:s,dotIndex:o}}return null},Oe=f=>{var w;const g=((w=n.current)==null?void 0:w.rotation.z)??0,{ndcX:s}=Te(f,g),{marginX:d}=_e(),o=s+d<=1,m=s-d>=-1;return o?"right":m?"left":we.current};return It((f,g)=>{if(!n.current)return;if(!Je.current){Je.current=!0;const o=$e(0);o&&Pe(o.entryIndex);const m=(o==null?void 0:o.dotIndex)??dt(),w=Oe(m);we.current=w,Fe(w),ke(m),re.uniforms.uHighlightIndex.value=m,ie.current=performance.now()}if(Ae.current||(n.current.rotation.z+=g*V),de==="show"||de==="enter"?re.uniforms.uHighlightIndex.value=ze:re.uniforms.uHighlightIndex.value=-1,de==="show"){const o=Oe(ze);o!==we.current&&(we.current=o,Fe(o))}const s=performance.now(),d=s-ie.current;switch(de){case"show":if(Ae.current)break;d>=P&&(ie.current=s,xe("restore"));break;case"restore":d>=pe&&(ie.current=s,Ve.current=s,xe("scatter"));break;case"scatter":if(s-Ve.current>=ue&&(Ve.current=s,fe.length>0)){const o=fe[Math.floor(Math.random()*fe.length)];ke(o)}if(d>=ce){const o=$e((Re+1)%M.length);if(o){Pe(o.entryIndex),ke(o.dotIndex);const m=Oe(o.dotIndex);we.current=m,Fe(m),ie.current=s,xe("blink")}else ie.current=s}break;case"blink":if(d>=ye){ie.current=s;const o=$e((Re+1)%M.length);o&&(Pe(o.entryIndex),ke(o.dotIndex)),xe("enter")}break;case"enter":d>=je&&(ie.current=s,xe("show"));break}}),e.jsxs("group",{position:[U,Q,0],children:[e.jsx("sprite",{scale:[J,J,1],material:B}),e.jsxs("group",{ref:n,children:[e.jsx(Jt,{count:b,radius:i,thickness:k,arms:a,turns:u,fogSize:L,fogOpacity:D,innerColor:p,midColor:E,outerColor:j,interArmBias:C,materialRef:T}),e.jsx(en,{count:y,radius:i,thickness:k,arms:a,turns:u,dustSize:F,dustOpacity:x,innerColor:p,midColor:E,outerColor:j}),e.jsx("points",{geometry:_,material:re}),e.jsx(Ht,{position:[Be[0],Be[1],Be[2]],center:!0,zIndexRange:[100,0],children:e.jsx(Wt,{name:be.name,description:be.description,avatarUrl:be.avatarUrl,primaryVersionState:be.primaryVersionState,side:st,tooltipVisible:de==="show"||de==="enter",squareBlink:de==="blink"})})]})]})}const an=c.div`
	width: 100%;
	height: 100%;
	background: ${t=>t.$bg};
	pointer-events: none;
`,rn="#ffffff",on="#9d7fff",sn="#5b8def",ln=[{name:"octocat/hello-world",description:"A tiny demo circuit that returns a friendly greeting."},{name:"modelworks/router",description:"Smart routing across LLM providers with automatic fallback and cost-aware selection."},{name:"sara/code-reviewer",description:"Reviews pull requests, flags risky changes, and posts inline suggestions."},{name:"team/translator-pro",description:"Streaming translation pipeline with glossary support and tone preservation."},{name:"lab/embed-search",description:"High-recall semantic search powered by hybrid embeddings and reranking."}],cn=({count:t=14e3,arms:n=4,turns:r=3,radius:a=11,thickness:u=.45,dotSize:i=.25,innerColor:k=rn,midColor:R=on,outerColor:p=sn,rotationSpeed:E=-.04,background:j="rgb(10, 10, 10)",cameraZ:V=9,fov:O=55,glowColor:J="#e8d8ff",glowSize:ne=4,glowIntensity:U=.55,offsetX:Q=0,offsetY:A=-4,entries:P=ln,cycleInterval:b=5e3,dimAmount:L=.18,brightAmount:D=.65,fogCount:C=2500,fogSize:y=3,fogOpacity:F=.08,fogInterArmBias:x=.7,dustCount:T=1200,dustSize:z=2.5,dustOpacity:B=.35,className:_})=>e.jsx(an,{$bg:j,className:_,role:"img","aria-label":"Galaxy of community-shared AI Circuits",children:e.jsx(Et,{dpr:[1,2],camera:{position:[0,0,V],fov:O},children:e.jsx(nn,{count:t,arms:n,turns:r,radius:a,thickness:u,dotSize:i,innerColor:k,midColor:R,outerColor:p,rotationSpeed:E,glowColor:J,glowSize:ne,glowIntensity:U,offsetX:Q,offsetY:A,entries:P,cycleInterval:b,dimAmount:L,brightAmount:D,fogCount:C,fogSize:y,fogOpacity:F,fogInterArmBias:x,dustCount:T,dustSize:z,dustOpacity:B})})}),dn=`<svg xmlns="http://www.w3.org/2000/svg" width="1254" height="1254" viewBox="0 0 1254 1254" role="img" aria-labelledby="title desc">
  <title id="title">Compose Circuits — Wafer</title>
  <desc id="desc">Individual circuits illuminate across a silicon wafer and converge into one workflow.</desc>
  <rect width="1254" height="1254" fill="#0A0A0A"/>
  <defs>
    <clipPath id="waferClip"><circle cx="627" cy="610" r="292"/></clipPath>
    <filter id="glow" x="-120%" y="-120%" width="340%" height="340%"><feGaussianBlur stdDeviation="6" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
    <symbol id="jsonFile" viewBox="0 0 44 52">
      <path d="M5 2H29L39 12V50H5Z M29 2V12H39" fill="#0A0A0A" stroke="#62666D" stroke-width="2" stroke-linejoin="round"/>
      <path d="M18 19C14 19 14 23 14 26C14 29 12 30 10 30C12 30 14 31 14 34C14 37 14 41 18 41 M26 19C30 19 30 23 30 26C30 29 32 30 34 30C32 30 30 31 30 34C30 37 30 41 26 41" fill="none" stroke="#858990" stroke-width="2" stroke-linecap="round"/>
      <circle cx="22" cy="30" r="2" fill="#858990"/>
    </symbol>
    <symbol id="jsonRow" viewBox="0 0 460 52">
      <use href="#jsonFile" x="0" width="44" height="52"/><use href="#jsonFile" x="52" width="44" height="52"/><use href="#jsonFile" x="104" width="44" height="52"/><use href="#jsonFile" x="156" width="44" height="52"/><use href="#jsonFile" x="208" width="44" height="52"/><use href="#jsonFile" x="260" width="44" height="52"/><use href="#jsonFile" x="312" width="44" height="52"/><use href="#jsonFile" x="364" width="44" height="52"/><use href="#jsonFile" x="416" width="44" height="52"/>
    </symbol>
  </defs>
  <style>
    .scene{transform-box:view-box;transform-origin:center;animation:float 6s ease-in-out infinite}
    .line{fill:none;stroke:#D0D6E0;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.dim{stroke:#484B50}.soft{opacity:.38}.strong{opacity:.9}
    .draft{fill:none;stroke:#D0D6E0;stroke-width:2;stroke-linecap:round;stroke-dasharray:7 12;opacity:.15;animation:dash 5s linear infinite}
    .orbit{transform-box:fill-box;transform-origin:center;stroke-dasharray:10 16;animation:orbit 18s linear infinite}
    .wafer{fill:#0A0A0A;stroke:#D0D6E0;stroke-width:3;vector-effect:non-scaling-stroke}
    .die{opacity:.26;filter:url(#glow);animation:activate 5.2s ease-in-out infinite}
    .d1{animation-delay:.08s}.d2{animation-delay:.16s}.d3{animation-delay:.24s}.d4{animation-delay:.32s}.d5{animation-delay:.4s}.d6{animation-delay:.48s}.d7{animation-delay:.56s}.d8{animation-delay:.64s}.d9{animation-delay:.72s}.d10{animation-delay:.8s}.d11{animation-delay:.88s}.d12{animation-delay:.96s}
    svg:hover .die{animation-duration:3.4s}svg:hover .orbit{animation-duration:10s}
    @keyframes float{0%,100%{transform:translateY(6px)}50%{transform:translateY(-6px)}}@keyframes dash{to{stroke-dashoffset:-76}}
    @keyframes orbit{to{transform:rotate(360deg)}}
    @keyframes activate{0%,12%{opacity:.18}25%{opacity:1}62%,86%{opacity:.7}100%{opacity:.18}}
    @media (prefers-reduced-motion:reduce){.scene,.draft,.die,.orbit{animation:none}.die{opacity:.62}}
  </style>
  <g transform="translate(627 627) scale(1.18) translate(-627 -610)"><g class="scene">
    <circle class="draft orbit" cx="627" cy="610" r="324"/>
    <circle class="wafer" cx="627" cy="610" r="292"/>
    <g clip-path="url(#waferClip)">
      <!-- dense nine-by-nine JSON workflow array -->
      <g class="die"><use href="#jsonRow" x="397" y="372" width="460" height="52"/></g>
      <g class="die d1"><use href="#jsonRow" x="397" y="430" width="460" height="52"/></g>
      <g class="die d2"><use href="#jsonRow" x="397" y="488" width="460" height="52"/></g>
      <g class="die d3"><use href="#jsonRow" x="397" y="546" width="460" height="52"/></g>
      <g class="die d4"><use href="#jsonRow" x="397" y="604" width="460" height="52"/></g>
      <g class="die d5"><use href="#jsonRow" x="397" y="662" width="460" height="52"/></g>
      <g class="die d6"><use href="#jsonRow" x="397" y="720" width="460" height="52"/></g>
      <g class="die d7"><use href="#jsonRow" x="397" y="778" width="460" height="52"/></g>
      <g class="die d8"><use href="#jsonRow" x="397" y="836" width="460" height="52"/></g>
    </g>
    <!-- wafer orientation notch -->
    <path class="line strong" d="M609 899Q627 884 645 899"/>
  </g></g>
</svg>
`,fn=`<svg xmlns="http://www.w3.org/2000/svg" width="1254" height="1254" viewBox="0 0 1254 1254" role="img" aria-labelledby="title desc">
  <title id="title">Compute Anywhere</title>
  <desc id="desc">A wireframe globe connects datacenter circuits across regions for compliant, high-performance compute.</desc>
  <rect width="1254" height="1254" fill="#0A0A0A"/>
  <defs>
    <clipPath id="globeClip"><circle cx="627" cy="610" r="286"/></clipPath>
    <filter id="glow" x="-220%" y="-220%" width="540%" height="540%"><feGaussianBlur stdDeviation="8" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
  </defs>
  <style>
    .scene{transform-box:view-box;transform-origin:center;animation:float 9s ease-in-out infinite}
    .line{fill:none;stroke:#D0D6E0;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.dim{stroke:#4A4D53}.soft{opacity:.32}.strong{opacity:.88}
    .draft{fill:none;stroke:#D0D6E0;stroke-width:2;stroke-linecap:round;stroke-dasharray:7 12;opacity:.13}
    .globe{fill:#0A0A0A;stroke:#D0D6E0;stroke-width:3;vector-effect:non-scaling-stroke}
    .grid{fill:none;stroke:#50535A;stroke-width:2;vector-effect:non-scaling-stroke;opacity:.52;transform-box:fill-box;transform-origin:center;animation:grid 14s ease-in-out infinite}
    .route{fill:none;stroke:#D0D6E0;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;path-length:1;opacity:.52;animation:route 7s ease-in-out infinite}.r2{animation-delay:.5s}.r3{animation-delay:1s}.r4{animation-delay:1.5s}
    .node{fill:#0A0A0A;stroke:#D0D6E0;stroke-width:2.5;vector-effect:non-scaling-stroke;opacity:.5;transform-box:fill-box;transform-origin:center;animation:node 7s ease-in-out infinite}.n2{animation-delay:.35s}.n3{animation-delay:.7s}.n4{animation-delay:1.05s}.n5{animation-delay:1.4s}.n6{animation-delay:1.75s}
    .packet{fill:#D0D6E0;filter:url(#glow);opacity:0}.p1{animation:p1 7s ease-in-out infinite}.p2{animation:p2 7s ease-in-out infinite;animation-delay:.7s}.p3{animation:p3 7s ease-in-out infinite;animation-delay:1.4s}
    .orbit{fill:none;stroke:#D0D6E0;stroke-width:2;stroke-dasharray:8 13;opacity:.16;transform-box:fill-box;transform-origin:center;animation:orbit 20s linear infinite}
    svg:hover .route,svg:hover .node,svg:hover .packet{animation-duration:4.8s}svg:hover .orbit{animation-duration:12s}
    @keyframes float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-4px)}}
    @keyframes grid{0%,100%{transform:scaleX(.96)}50%{transform:scaleX(1.04)}}
    @keyframes orbit{to{transform:rotate(360deg)}}
    @keyframes route{0%,12%{stroke-dashoffset:1;opacity:.18}35%,82%{stroke-dashoffset:0;opacity:.68}100%{stroke-dashoffset:-1;opacity:.18}}
    @keyframes node{0%,100%{opacity:.35;transform:scale(.88)}50%{opacity:.9;transform:scale(1.1)}}
    @keyframes p1{0%,24%{opacity:0;transform:translate(-192px,65px)}33%{opacity:1}66%{opacity:1;transform:translate(142px,-122px)}76%,100%{opacity:0;transform:translate(164px,-138px)}}
    @keyframes p2{0%,24%{opacity:0;transform:translate(180px,93px)}33%{opacity:1}66%{opacity:1;transform:translate(-133px,-146px)}76%,100%{opacity:0;transform:translate(-151px,-163px)}}
    @keyframes p3{0%,24%{opacity:0;transform:translate(-92px,-161px)}33%{opacity:1}66%{opacity:1;transform:translate(211px,128px)}76%,100%{opacity:0;transform:translate(231px,144px)}}
    @media (prefers-reduced-motion:reduce){.scene,.grid,.route,.node,.packet,.orbit{animation:none}.route{stroke-dashoffset:0;opacity:.55}.node{opacity:.7}.packet{display:none}}
  </style>
  <g transform="translate(627 627) scale(1.17) translate(-627 -610)"><g class="scene">
    <circle class="orbit" cx="627" cy="610" r="326"/><path class="draft" d="M627 241V284 M627 936V979 M258 610H301 M953 610H996"/>
    <circle class="globe" cx="627" cy="610" r="286"/>
    <g clip-path="url(#globeClip)">
      <!-- latitude and longitude construction -->
      <g class="grid">
        <ellipse cx="627" cy="610" rx="112" ry="286"/><ellipse cx="627" cy="610" rx="214" ry="286"/>
        <ellipse cx="627" cy="610" rx="286" ry="92"/><ellipse cx="627" cy="610" rx="286" ry="184"/>
        <path d="M341 610H913 M627 324V896"/>
      </g>
      <!-- region-to-region compute routes -->
      <path class="route" pathLength="1" d="M435 675Q554 420 769 488"/>
      <path class="route r2" pathLength="1" d="M807 703Q666 431 494 464"/>
      <path class="route r3" pathLength="1" d="M535 449Q696 590 838 738"/>
      <path class="route r4" pathLength="1" d="M424 592Q620 800 811 551"/>
    </g>
    <!-- global datacenter endpoints -->
    <circle class="node" cx="435" cy="675" r="10"/><circle class="node n2" cx="769" cy="488" r="10"/>
    <circle class="node n3" cx="807" cy="703" r="10"/><circle class="node n4" cx="494" cy="464" r="10"/>
    <circle class="node n5" cx="535" cy="449" r="10"/><circle class="node n6" cx="838" cy="738" r="10"/>
    <!-- workload packets follow representative global arcs -->
    <circle class="packet p1" cx="627" cy="610" r="7"/><circle class="packet p2" cx="627" cy="610" r="7"/><circle class="packet p3" cx="627" cy="610" r="7"/>
  </g></g>
</svg>
`,tt=`<svg xmlns="http://www.w3.org/2000/svg" width="1254" height="1254" viewBox="0 0 1254 1254" role="img" aria-labelledby="title desc">
  <title id="title">Version Everything — Container Depot</title>
  <desc id="desc">A floating depot of infrastructure containers, each stamped with an immutable five-character version hash.</desc>
  <rect width="1254" height="1254" fill="#0A0A0A"/>
  <defs>
    <filter id="glow" x="-180%" y="-180%" width="460%" height="460%"><feGaussianBlur stdDeviation="7" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
    <symbol id="container" viewBox="0 0 210 124">
      <path d="M5 22L31 5H205L179 22Z" fill="#0A0A0A" stroke="#666A70" stroke-width="2.5" stroke-linejoin="round"/>
      <path d="M179 22L205 5V100L179 119Z" fill="#0A0A0A" stroke="#55585E" stroke-width="2.5" stroke-linejoin="round"/>
      <rect x="5" y="22" width="174" height="97" fill="#0A0A0A" stroke="#D0D6E0" stroke-width="2.5"/>
      <path d="M20 29V112 M35 29V112 M50 29V112 M65 29V112 M80 29V112 M95 29V112 M110 29V112 M125 29V112 M140 29V112 M155 29V112 M170 29V112" stroke="#4D5056" stroke-width="1.5"/>
      <path d="M12 29H172 M12 111H172 M17 36V104 M167 36V104" fill="none" stroke="#73777E" stroke-width="2"/>
      <circle cx="19" cy="31" r="2" fill="#D0D6E0"/><circle cx="165" cy="31" r="2" fill="#D0D6E0"/><circle cx="19" cy="109" r="2" fill="#D0D6E0"/><circle cx="165" cy="109" r="2" fill="#D0D6E0"/>
    </symbol>
  </defs>
  <style>
    .scene{transform-box:view-box;transform-origin:center;animation:float 7s ease-in-out infinite}
    .draft{fill:none;stroke:#D0D6E0;stroke-width:2;stroke-linecap:round;stroke-dasharray:7 12;opacity:.15;animation:dash 5s linear infinite}
    .unit{transform-box:view-box;transform-origin:center;transition:transform .5s cubic-bezier(.2,.8,.2,1);animation:unit 6s ease-in-out infinite}
    .u2{animation-delay:.15s}.u3{animation-delay:.3s}.u4{animation-delay:.45s}.u5{animation-delay:.6s}.u6{animation-delay:.75s}.u7{animation-delay:.9s}.u8{animation-delay:1.05s}
    .new{animation:newVersion 6s cubic-bezier(.2,.8,.2,1) infinite}
    .hash{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:19px;font-weight:600;letter-spacing:2px;fill:#D0D6E0;text-anchor:middle;paint-order:stroke;stroke:#0A0A0A;stroke-width:5px;stroke-linejoin:round}
    .tag{fill:#0A0A0A;stroke:#D0D6E0;stroke-width:2;rx:3;vector-effect:non-scaling-stroke}
    .version-line{fill:none;stroke:#D0D6E0;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:7 11;opacity:.25;animation:history 4s linear infinite}
    .status{fill:#D0D6E0;opacity:0;filter:url(#glow);animation:status 6s ease-in-out infinite}
    svg:hover .unit{transform:translateY(-10px)}svg:hover .new{transform:translateY(-20px)}
    @keyframes float{0%,100%{transform:translateY(7px)}50%{transform:translateY(-7px)}}@keyframes dash{to{stroke-dashoffset:-76}}@keyframes history{to{stroke-dashoffset:-54}}
    @keyframes unit{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
    @keyframes newVersion{0%,12%{opacity:0;transform:translateY(-190px)}29%{opacity:1;transform:translateY(8px)}36%,88%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(15px)}}
    @keyframes status{0%,28%{opacity:0;transform:scale(.3)}38%{opacity:1;transform:scale(1.4)}47%,88%{opacity:.75;transform:scale(1)}100%{opacity:0}}
    @media (prefers-reduced-motion:reduce){.scene,.draft,.unit,.new,.version-line,.status{animation:none}.unit,.new{opacity:1}.status{opacity:.75}}
  </style>
  <g transform="translate(627 627) scale(1.18) translate(-627 -625)"><g class="scene">
    <path class="draft" d="M282 900H965 M282 371H965 M247 866V817 M1000 420V469"/>
    <path class="version-line" d="M272 861L968 459"/>
    <!-- bottom revision tier -->
    <g transform="translate(300 710)"><g class="unit"><use href="#container" width="210" height="124"/><rect class="tag" x="56" y="53" width="82" height="31"/><text class="hash" x="97" y="75">18F2A</text></g></g>
    <g transform="translate(500 710)"><g class="unit u2"><use href="#container" width="210" height="124"/><rect class="tag" x="56" y="53" width="82" height="31"/><text class="hash" x="97" y="75">4CD91</text></g></g>
    <g transform="translate(700 710)"><g class="unit u3"><use href="#container" width="210" height="124"/><rect class="tag" x="56" y="53" width="82" height="31"/><text class="hash" x="97" y="75">B70E3</text></g></g>
    <!-- middle revision tier -->
    <g transform="translate(330 586)"><g class="unit u4"><use href="#container" width="210" height="124"/><rect class="tag" x="56" y="53" width="82" height="31"/><text class="hash" x="97" y="75">D2A6F</text></g></g>
    <g transform="translate(530 586)"><g class="unit u5"><use href="#container" width="210" height="124"/><rect class="tag" x="56" y="53" width="82" height="31"/><text class="hash" x="97" y="75">73BC8</text></g></g>
    <g transform="translate(730 586)"><g class="unit u6"><use href="#container" width="210" height="124"/><rect class="tag" x="56" y="53" width="82" height="31"/><text class="hash" x="97" y="75">E951D</text></g></g>
    <!-- upper revision tier -->
    <g transform="translate(430 462)"><g class="unit u7"><use href="#container" width="210" height="124"/><rect class="tag" x="56" y="53" width="82" height="31"/><text class="hash" x="97" y="75">2F8C4</text></g></g>
    <g transform="translate(630 462)"><g class="unit new"><use href="#container" width="210" height="124"/><rect class="tag" x="56" y="53" width="82" height="31"/><text class="hash" x="97" y="75">A6D30</text></g></g>
    <circle class="status" cx="836" cy="468" r="7"/>
  </g></g>
</svg>
`,hn=`<svg xmlns="http://www.w3.org/2000/svg" width="1254" height="1254" viewBox="0 0 1254 1254" role="img" aria-labelledby="title desc">
  <title id="title">Deploy Instantly — Switch Array</title>
  <desc id="desc">An array of industrial switches powers on rapidly, activating a scalable endpoint cluster.</desc>
  <rect width="1254" height="1254" fill="#0A0A0A"/>
  <defs>
    <filter id="glow" x="-200%" y="-200%" width="500%" height="500%"><feGaussianBlur stdDeviation="7" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
    <symbol id="switch" viewBox="0 0 92 142">
      <rect x="1.5" y="12" width="89" height="128" rx="10" fill="#0A0A0A" stroke="#D0D6E0" stroke-width="3"/>
      <path d="M12 25L20 18H72L80 25V127L72 134H20L12 127Z" fill="#0A0A0A" stroke="#4C4F55" stroke-width="2"/>
      <g class="rocker">
        <rect x="21" y="31" width="50" height="89" rx="4" fill="#0A0A0A" stroke="#D0D6E0" stroke-width="2.5"/>
        <path class="rocker-seam" d="M22 76H70" fill="none" stroke="#55585E" stroke-width="2"/>
        <path d="M46 44V62" fill="none" stroke="#D0D6E0" stroke-width="3" stroke-linecap="round"/>
        <circle cx="46" cy="99" r="9" fill="none" stroke="#777B82" stroke-width="2.5"/>
      </g>
      <circle class="lamp" cx="46" cy="5" r="4" fill="#D0D6E0"/>
    </symbol>
  </defs>
  <style>
    .scene{transform-box:view-box;transform-origin:center;animation:float 6s ease-in-out infinite}
    .line{fill:none;stroke:#D0D6E0;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.dim{stroke:#484B50}.soft{opacity:.38}.strong{opacity:.9}
    .draft{fill:none;stroke:#D0D6E0;stroke-width:2;stroke-linecap:round;stroke-dasharray:7 12;opacity:.16;animation:dash 5s linear infinite}
    .bus{fill:none;stroke:#D0D6E0;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;path-length:1;opacity:0;animation:bus 5s ease-in-out infinite}
    .unit{transform-box:fill-box;transform-origin:center;animation:unit 5s ease-in-out infinite}
    .rocker{transform-box:fill-box;transform-origin:center;animation:flip 5s cubic-bezier(.2,.8,.2,1) infinite}
    .rocker-seam{animation:seam 5s ease-in-out infinite}.lamp{opacity:.16;filter:url(#glow);animation:lamp 5s steps(1,end) infinite}
    .d1{animation-delay:.06s}.d2{animation-delay:.12s}.d3{animation-delay:.18s}.d4{animation-delay:.24s}.d5{animation-delay:.3s}.d6{animation-delay:.36s}.d7{animation-delay:.42s}.d8{animation-delay:.48s}.d9{animation-delay:.54s}.d10{animation-delay:.6s}.d11{animation-delay:.66s}
    .d1 .rocker,.d1 .lamp,.d1 .rocker-seam{animation-delay:.06s}.d2 .rocker,.d2 .lamp,.d2 .rocker-seam{animation-delay:.12s}.d3 .rocker,.d3 .lamp,.d3 .rocker-seam{animation-delay:.18s}.d4 .rocker,.d4 .lamp,.d4 .rocker-seam{animation-delay:.24s}.d5 .rocker,.d5 .lamp,.d5 .rocker-seam{animation-delay:.3s}.d6 .rocker,.d6 .lamp,.d6 .rocker-seam{animation-delay:.36s}.d7 .rocker,.d7 .lamp,.d7 .rocker-seam{animation-delay:.42s}.d8 .rocker,.d8 .lamp,.d8 .rocker-seam{animation-delay:.48s}.d9 .rocker,.d9 .lamp,.d9 .rocker-seam{animation-delay:.54s}.d10 .rocker,.d10 .lamp,.d10 .rocker-seam{animation-delay:.6s}.d11 .rocker,.d11 .lamp,.d11 .rocker-seam{animation-delay:.66s}
    .endpoint{fill:#0A0A0A;stroke:#D0D6E0;stroke-width:3;vector-effect:non-scaling-stroke;opacity:0;transform-box:fill-box;transform-origin:center;animation:endpoint 5s cubic-bezier(.2,.8,.2,1) infinite}
    svg:hover .scene{animation-duration:3.8s}svg:hover .unit,svg:hover .rocker,svg:hover .lamp,svg:hover .rocker-seam,svg:hover .bus,svg:hover .endpoint{animation-duration:3.8s}
    @keyframes float{0%,100%{transform:translateY(6px)}50%{transform:translateY(-6px)}}@keyframes dash{to{stroke-dashoffset:-76}}
    @keyframes unit{0%,16%{opacity:.48}25%,84%{opacity:1}100%{opacity:.48}}
    @keyframes flip{0%,16%{transform:translateY(4px) scaleY(.94)}25%,84%{transform:translateY(-4px) scaleY(.94)}100%{transform:translateY(4px) scaleY(.94)}}
    @keyframes seam{0%,16%{transform:translateY(-7px)}25%,84%{transform:translateY(7px)}100%{transform:translateY(-7px)}}
    @keyframes lamp{0%,20%{opacity:.12}21%,84%{opacity:.95}85%,100%{opacity:.12}}
    @keyframes bus{0%,37%{stroke-dashoffset:1;opacity:0}58%,86%{stroke-dashoffset:0;opacity:.62}100%{stroke-dashoffset:-1;opacity:0}}
    @keyframes endpoint{0%,55%{opacity:0;transform:scale(.25)}66%{opacity:1;transform:scale(1.35)}74%,87%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(.25)}}
    @media (prefers-reduced-motion:reduce){.scene,.draft,.unit,.rocker,.rocker-seam,.lamp,.bus,.endpoint{animation:none}.unit{opacity:1}.rocker{transform:translateY(-4px) scaleY(.94)}.rocker-seam{transform:translateY(7px)}.lamp{opacity:.9}.bus{stroke-dashoffset:0;opacity:.55}.endpoint{opacity:.85}}
  </style>
  <g transform="translate(627 627) scale(1.18) translate(-627 -627)"><g class="scene">
    <!-- schematic rack boundary -->
    <path class="draft" d="M292 287H962V888H292Z M265 314H316 M938 314H989 M265 861H316 M938 861H989"/>
    <!-- shared power/data buses -->
    <path class="bus" pathLength="1" d="M374 386H880 M374 584H880 M374 782H880 M374 386V782 M543 386V782 M712 386V782 M880 386V782"/>
    <!-- 3 × 4 switch array -->
    <g transform="translate(328 321)"><g class="unit"><use href="#switch" width="92" height="142"/></g></g>
    <g transform="translate(497 321)"><g class="unit d1"><use href="#switch" width="92" height="142"/></g></g>
    <g transform="translate(666 321)"><g class="unit d2"><use href="#switch" width="92" height="142"/></g></g>
    <g transform="translate(835 321)"><g class="unit d3"><use href="#switch" width="92" height="142"/></g></g>
    <g transform="translate(328 519)"><g class="unit d4"><use href="#switch" width="92" height="142"/></g></g>
    <g transform="translate(497 519)"><g class="unit d5"><use href="#switch" width="92" height="142"/></g></g>
    <g transform="translate(666 519)"><g class="unit d6"><use href="#switch" width="92" height="142"/></g></g>
    <g transform="translate(835 519)"><g class="unit d7"><use href="#switch" width="92" height="142"/></g></g>
    <g transform="translate(328 717)"><g class="unit d8"><use href="#switch" width="92" height="142"/></g></g>
    <g transform="translate(497 717)"><g class="unit d9"><use href="#switch" width="92" height="142"/></g></g>
    <g transform="translate(666 717)"><g class="unit d10"><use href="#switch" width="92" height="142"/></g></g>
    <g transform="translate(835 717)"><g class="unit d11"><use href="#switch" width="92" height="142"/></g></g>
    <!-- endpoint-live indicator -->
    <path class="draft" d="M627 888V947"/>
    <circle class="endpoint" cx="627" cy="963" r="13"/><circle class="endpoint" cx="627" cy="963" r="5" style="animation-delay:.12s"/>
  </g></g>
</svg>
`,mn=`<svg xmlns="http://www.w3.org/2000/svg" width="1254" height="1254" viewBox="0 0 1254 1254" role="img" aria-labelledby="title desc">
  <title id="title">Earn — Stacks of Hundreds</title>
  <desc id="desc">Bundles of stylized hundred-value notes fall into aligned earnings stacks.</desc>
  <rect width="1254" height="1254" fill="#0A0A0A"/>
  <defs>
    <filter id="glow" x="-180%" y="-180%" width="460%" height="460%"><feGaussianBlur stdDeviation="7" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
    <symbol id="bundle" viewBox="0 0 190 94">
      <path d="M4 18L32 4H186V70L158 90H4Z" fill="#0A0A0A" stroke="#D0D6E0" stroke-width="2.5" stroke-linejoin="round"/>
      <path d="M4 18H158L186 4 M158 18V90" fill="none" stroke="#5A5E64" stroke-width="2"/>
      <rect x="65" y="18" width="36" height="72" fill="#0A0A0A" stroke="#777B82" stroke-width="2"/>
      <rect x="14" y="28" width="134" height="51" rx="5" fill="none" stroke="#55585E" stroke-width="2"/>
      <text x="31" y="48" fill="#D0D6E0" font-family="ui-monospace,SFMono-Regular,Menlo,monospace" font-size="17" font-weight="600">100</text>
      <text x="129" y="72" fill="#D0D6E0" font-family="ui-monospace,SFMono-Regular,Menlo,monospace" font-size="17" font-weight="600" text-anchor="end">100</text>
      <text x="119" y="58" fill="#777B82" font-family="ui-monospace,SFMono-Regular,Menlo,monospace" font-size="28" text-anchor="middle">$</text>
    </symbol>
  </defs>
  <style>
    .scene{transform-box:view-box;transform-origin:center;animation:float 7s ease-in-out infinite}
    .draft{fill:none;stroke:#D0D6E0;stroke-width:2;stroke-linecap:round;stroke-dasharray:7 12;opacity:.15;animation:dash 5s linear infinite}
    .stack{transform-box:view-box;transform-origin:center;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
    .layer{opacity:.42}.l2{opacity:.52}.l3{opacity:.62}.l4{opacity:.72}.l5{opacity:.82}.top{opacity:1}
    .fall{transform-box:view-box;transform-origin:center;opacity:0;animation:drop 4.8s cubic-bezier(.25,.75,.2,1) infinite}
    .fall-b{animation-delay:.55s}.fall-c{animation-delay:1.1s}.fall-d{animation-delay:1.65s}
    .impact{fill:none;stroke:#D0D6E0;stroke-width:2.5;stroke-linecap:round;opacity:0;filter:url(#glow);animation:impact 4.8s ease-out infinite}.impact-b{animation-delay:.55s}.impact-c{animation-delay:1.1s}.impact-d{animation-delay:1.65s}
    .counter{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:22px;letter-spacing:3px;fill:#D0D6E0;opacity:.42;text-anchor:middle;animation:count 4.8s steps(4,end) infinite}
    svg:hover .stack{transform:translateY(-10px)}svg:hover .fall,svg:hover .impact,svg:hover .counter{animation-duration:3.2s}
    @keyframes float{0%,100%{transform:translateY(7px)}50%{transform:translateY(-7px)}}@keyframes dash{to{stroke-dashoffset:-76}}
    @keyframes drop{0%,10%{opacity:0;transform:translateY(-310px) rotate(-3deg)}18%{opacity:1}45%{opacity:1;transform:translateY(9px) rotate(0)}51%,82%{opacity:1;transform:translateY(0)}94%,100%{opacity:0;transform:translateY(12px)}}
    @keyframes impact{0%,43%{opacity:0;transform:scale(.4)}48%{opacity:.8;transform:scale(1)}57%,100%{opacity:0;transform:scale(1.5)}}
    @keyframes count{0%{opacity:.28}25%{opacity:.45}50%{opacity:.62}75%,92%{opacity:.9}100%{opacity:.28}}
    @media (prefers-reduced-motion:reduce){.scene,.draft,.stack,.fall,.impact,.counter{animation:none}.fall{opacity:1;transform:translateY(0)}.impact{display:none}.counter{opacity:.8}}
  </style>
  <g transform="translate(627 627) scale(1.16) translate(-627 -620)"><g class="scene">
    <path class="draft" d="M240 902H1014 M281 326H973 M265 868V821 M989 407V454"/>
    <!-- left stack -->
    <g class="stack" transform="translate(286 720)">
      <g class="layer"><use href="#bundle" y="72" width="190" height="94"/></g><g class="layer l2"><use href="#bundle" y="54" width="190" height="94"/></g><g class="layer l3"><use href="#bundle" y="36" width="190" height="94"/></g><g class="layer l4"><use href="#bundle" y="18" width="190" height="94"/></g><g class="layer top"><use href="#bundle" width="190" height="94"/></g>
      <g class="fall"><use href="#bundle" y="-18" width="190" height="94"/></g><ellipse class="impact" cx="95" cy="80" rx="112" ry="18"/>
    </g>
    <!-- center stack, tallest -->
    <g class="stack" transform="translate(532 598)">
      <g class="layer"><use href="#bundle" y="126" width="190" height="94"/></g><g class="layer l2"><use href="#bundle" y="108" width="190" height="94"/></g><g class="layer l2"><use href="#bundle" y="90" width="190" height="94"/></g><g class="layer l3"><use href="#bundle" y="72" width="190" height="94"/></g><g class="layer l3"><use href="#bundle" y="54" width="190" height="94"/></g><g class="layer l4"><use href="#bundle" y="36" width="190" height="94"/></g><g class="layer l5"><use href="#bundle" y="18" width="190" height="94"/></g><g class="layer top"><use href="#bundle" width="190" height="94"/></g>
      <g class="fall fall-b"><use href="#bundle" y="-18" width="190" height="94"/></g><ellipse class="impact impact-b" cx="95" cy="80" rx="112" ry="18"/>
    </g>
    <!-- right stack -->
    <g class="stack" transform="translate(778 678)">
      <g class="layer"><use href="#bundle" y="90" width="190" height="94"/></g><g class="layer l2"><use href="#bundle" y="72" width="190" height="94"/></g><g class="layer l3"><use href="#bundle" y="54" width="190" height="94"/></g><g class="layer l4"><use href="#bundle" y="36" width="190" height="94"/></g><g class="layer l5"><use href="#bundle" y="18" width="190" height="94"/></g><g class="layer top"><use href="#bundle" width="190" height="94"/></g>
      <g class="fall fall-c"><use href="#bundle" y="-18" width="190" height="94"/></g><ellipse class="impact impact-c" cx="95" cy="80" rx="112" ry="18"/>
    </g>
    <!-- earnings counter -->
    <text class="counter" x="627" y="946">$ 0 0 0 4 0 0</text>
  </g></g>
</svg>
`,gn=`<svg xmlns="http://www.w3.org/2000/svg" width="1254" height="1254" viewBox="0 0 1254 1254" role="img" aria-labelledby="title desc">
  <title id="title">Discover AI — Lighthouse</title>
  <desc id="desc">A striped lighthouse slowly scans for and illuminates available AI endpoints.</desc>
  <rect width="1254" height="1254" fill="#0A0A0A"/>
  <defs>
    <clipPath id="towerClip"><path d="M556 829L585 420H669L698 829Z"/></clipPath>
    <filter id="glow" x="-300%" y="-300%" width="700%" height="700%"><feGaussianBlur stdDeviation="14" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
  </defs>
  <style>
    .scene{transform-box:view-box;transform-origin:center;animation:float 8s ease-in-out infinite}
    .line{fill:none;stroke:#D0D6E0;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.dim{stroke:#4B4E54}.soft{opacity:.35}.strong{opacity:.9}
    .draft{fill:none;stroke:#D0D6E0;stroke-width:2;stroke-linecap:round;stroke-dasharray:7 12;opacity:.14;animation:dash 6s linear infinite}
    .tower{fill:#0A0A0A;stroke:#D0D6E0;stroke-width:3;stroke-linejoin:round;vector-effect:non-scaling-stroke}
    .stripe{fill:none;stroke:#666A70;stroke-width:42;opacity:.62}
    .beam{transform-box:view-box;transform-origin:627px 347px;animation:sweep 8s ease-in-out infinite}.beam-fill{fill:#D0D6E0;opacity:.035}.beam-edge{fill:none;stroke:#D0D6E0;stroke-width:2;stroke-dasharray:8 12;opacity:.22}
    .lamp{fill:#D0D6E0;filter:url(#glow);animation:lamp 4s ease-in-out infinite}
    .node{fill:#0A0A0A;stroke:#D0D6E0;stroke-width:2.5;opacity:.25;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center}.n1{animation:n1 8s ease-in-out infinite}.n2{animation:n2 8s ease-in-out infinite}.n3{animation:n3 8s ease-in-out infinite}
    svg:hover .beam{animation-duration:5s}
    @keyframes float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-4px)}}@keyframes dash{to{stroke-dashoffset:-76}}
    @keyframes sweep{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(18deg)}}@keyframes lamp{0%,100%{opacity:.55;transform:scale(.82)}50%{opacity:1;transform:scale(1.15)}}
    @keyframes n1{0%,8%,100%{opacity:.2;transform:scale(.8)}19%,31%{opacity:1;transform:scale(1.15)}42%{opacity:.3;transform:scale(1)}}
    @keyframes n2{0%,39%{opacity:.2;transform:scale(.8)}50%,62%{opacity:1;transform:scale(1.15)}73%,100%{opacity:.3;transform:scale(1)}}
    @keyframes n3{0%,68%{opacity:.2;transform:scale(.8)}79%,91%{opacity:1;transform:scale(1.15)}100%{opacity:.25;transform:scale(1)}}
    @media (prefers-reduced-motion:reduce){.scene,.draft,.beam,.lamp,.node{animation:none}.node{opacity:.65}}
  </style>
  <g transform="translate(627 627) scale(1.15) translate(-627 -620)"><g class="scene">
    <path class="draft" d="M210 829H1044 M627 228V275 M260 885H994"/>
    <g class="beam"><path class="beam-fill" d="M627 347L1080 451L1060 545Z"/><path class="beam-edge" d="M627 347L1080 451 M627 347L1060 545"/></g>
    <!-- compact lantern room -->
    <path class="tower" d="M567 359H687V420H567Z"/><path class="line dim" d="M592 359V420 M627 359V420 M662 359V420"/>
    <path class="line strong" d="M549 420H705 M558 405V434 M696 405V434"/>
    <path class="tower" d="M552 359L580 319H674L702 359Z"/><path class="line strong" d="M580 319L627 288L674 319 M627 288V267"/>
    <circle class="lamp" cx="627" cy="386" r="8"/>
    <!-- tapered striped tower -->
    <path class="tower" d="M585 420H669L698 829H556Z"/>
    <g clip-path="url(#towerClip)"><path class="stripe" d="M535 465L695 555 M542 590L706 682 M548 716L715 810"/></g>
    <path class="line dim" d="M574 585H680 M565 704H689"/><path class="line strong" d="M530 829H724"/>
    <!-- discovered endpoints on the horizon -->
    <circle class="node n1" cx="276" cy="733" r="17"/><circle class="node n1" cx="276" cy="733" r="5"/>
    <circle class="node n2" cx="1000" cy="650" r="17"/><circle class="node n2" cx="1000" cy="650" r="5"/>
    <circle class="node n3" cx="895" cy="804" r="17"/><circle class="node n3" cx="895" cy="804" r="5"/>
  </g></g>
</svg>
`,pn=`<svg xmlns="http://www.w3.org/2000/svg" width="1254" height="1254" viewBox="0 0 1254 1254" role="img" aria-labelledby="title desc">
  <title id="title">Seamless Billing — Faceted Unified Key</title>
  <desc id="desc">A dimensional cruciform key aligns into one secure billing credential.</desc>
  <rect width="1254" height="1254" fill="#0A0A0A"/>
  <defs><filter id="glow" x="-220%" y="-220%" width="540%" height="540%"><feGaussianBlur stdDeviation="8" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs>
  <style>
    .scene{transform-box:view-box;transform-origin:center;animation:float 9s ease-in-out infinite}
    .line{fill:none;stroke:#D0D6E0;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.dim{stroke:#4B4E54}.soft{opacity:.36}.strong{opacity:.9}
    .draft{fill:none;stroke:#D0D6E0;stroke-width:2;stroke-linecap:round;stroke-dasharray:7 12;opacity:.14}
    .depth{fill:#0A0A0A;stroke:#4F5258;stroke-width:3;stroke-linejoin:round;vector-effect:non-scaling-stroke}
    .key{fill:#0A0A0A;stroke:#D0D6E0;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
    .left,.right{transform-box:view-box;transform-origin:center;animation-duration:9s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}.left{animation-name:left}.right{animation-name:right}
    .gem{fill:#0A0A0A;stroke:#D0D6E0;stroke-width:3;vector-effect:non-scaling-stroke}.facet{fill:none;stroke:#666A70;stroke-width:2;stroke-linejoin:round;opacity:.65}
    .seam{stroke:#686C72;stroke-width:2;stroke-dasharray:5 7;opacity:.5;animation:seam 9s ease-in-out infinite}
    .orbit{fill:none;stroke:#D0D6E0;stroke-width:2;stroke-dasharray:8 12;opacity:.15;transform-box:fill-box;transform-origin:center;animation:orbit 16s linear infinite}
    .status{fill:#D0D6E0;opacity:.2;filter:url(#glow);animation:status 9s ease-in-out infinite}
    @keyframes float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-4px)}}@keyframes orbit{to{transform:rotate(360deg)}}
    @keyframes left{0%,32%,68%,100%{transform:translateX(-6px)}44%,56%{transform:translateX(0)}}@keyframes right{0%,32%,68%,100%{transform:translateX(6px)}44%,56%{transform:translateX(0)}}
    @keyframes seam{0%,32%,68%,100%{opacity:.55}44%,56%{opacity:.12}}@keyframes status{0%,36%,64%,100%{opacity:.18;transform:scale(.85)}46%,55%{opacity:.7;transform:scale(1.08)}}
    @media (prefers-reduced-motion:reduce){.scene,.left,.right,.seam,.orbit,.status{animation:none}.status{opacity:.55}}
  </style>
  <g transform="translate(627 627) scale(1.12) translate(-627 -627)">
    <circle class="orbit" cx="627" cy="627" r="330"/><path class="draft" d="M627 254V297 M627 957V1000 M254 627H297 M957 627H1000"/>
    <!-- angled three-quarter presentation -->
    <g transform="rotate(-34 627 627)">
      <!-- offset rear extrusion -->
      <path class="depth" d="M637 276H580Q557 276 557 299V377H497Q472 377 472 402V486Q472 511 497 511H557V667L535 688L557 710V758L531 781L557 808V902L603 948H671L717 902V808L743 781L717 758V710L739 688L717 667V511H777Q802 511 802 486V402Q802 377 777 377H717V299Q717 276 694 276Z" transform="translate(11 13)"/>
      <g class="left"><path class="key" d="M637 276H580Q557 276 557 299V377H497Q472 377 472 402V486Q472 511 497 511H557V667L535 688L557 710V758L531 781L557 808V902L603 948H637Z"/></g>
      <g class="right"><path class="key" d="M637 276H694Q717 276 717 299V377H777Q802 377 802 402V486Q802 511 777 511H717V667L739 688L717 710V758L743 781L717 808V902L671 948H637Z"/></g>
      <path class="seam" d="M637 276V948"/>
      <!-- inset stones and machined facets -->
      <circle class="gem" cx="520" cy="444" r="29"/><path class="facet" d="M520 415L541 423L549 444L541 465L520 473L499 465L491 444L499 423Z"/>
      <circle class="gem" cx="754" cy="444" r="29"/><path class="facet" d="M754 415L775 423L783 444L775 465L754 473L733 465L725 444L733 423Z"/>
      <circle class="gem" cx="637" cy="326" r="25"/><path class="facet" d="M637 301L655 308L662 326L655 344L637 351L619 344L612 326L619 308Z"/>
      <path class="line dim" d="M593 392V650 M609 392V650 M665 392V650 M681 392V650 M582 835L618 881 M692 835L656 881"/>
      <path class="line soft" d="M570 535H620 M654 535H704 M570 570H620 M654 570H704 M570 605H620 M654 605H704"/>
      <circle class="status" cx="637" cy="730" r="7"/>
    </g>
  </g>
</svg>
`,un=c.div`
	min-height: 100vh;
	width: 100%;
	background-color: rgb(10, 10, 10);
	display: flex;
	flex-direction: column;
	position: relative;
`,yn=c.div`
	width: 100%;
	height: 720px;
	margin: 0;
	overflow: hidden;
	border-radius: 12px;

	@media (max-width: 1024px) {
		height: 560px;
	}

	@media (max-width: 640px) {
		height: 420px;
	}
`,xn=c.header`
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 50;
`,wn=c.a`
	position: absolute;
	left: -9999px;
	top: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	background: #ffffff;
	color: #000000;
	padding: 8px 12px;
	z-index: 100;
	text-decoration: none;
	font-weight: 600;
	border-radius: 0 0 6px 0;

	&:focus,
	&:focus-visible {
		left: 0;
		top: 0;
		width: auto;
		height: auto;
		outline: 2px solid #000000;
		outline-offset: 2px;
	}
`,vn=c.main`
	display: contents;
`,kn=c.div`
	display: flex;
	flex-direction: column;
	flex: 1;
	position: relative;
	z-index: 1;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 4rem;

	@media (max-width: 1024px) {
		padding: 0 2rem;
	}

	@media (max-width: 640px) {
		padding: 0 1rem;
	}
`,nt=64,bn=c.div`
	width: 100%;
	max-width: 1280px;
	padding: 8rem 0 2rem 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	gap: 0.5rem;

	@media (max-width: 1024px) {
		padding: ${nt+32}px 0 2rem 0;
		max-width: 100%;
	}

	@media (max-width: 640px) {
		padding: ${nt+24}px 0 1.5rem 0;
	}
`,Mn=c.section`
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 2rem 0 0 0;

	@media (max-width: 640px) {
		margin: 2rem 0 0 0;
	}
`,An=c.section`
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 3rem 0 0 0;

	@media (max-width: 640px) {
		margin: 2rem 0 0 0;
	}
`,Dn=c.div`
	display: inline-flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 1.5rem 0;
	position: relative;
`,at=c.button`
	all: unset;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	font-size: 1.5rem;
	font-weight: 510;
	letter-spacing: -0.005em;
	transition: color 0.15s ease;
	white-space: nowrap;
	color: ${t=>t.$active?"#ffffff":"rgba(255, 255, 255, 0.4)"};

	&:hover {
		color: ${t=>t.$active?"#ffffff":"rgba(255, 255, 255, 0.7)"};
	}
`,Cn=c.div`
	position: absolute;
	bottom: -8px;
	height: 2px;
	background: #ffffff;
	border-radius: 2px;
	left: ${t=>t.$left}px;
	width: ${t=>t.$width}px;
	transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1),
		width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
`,Sn=c.section`
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 1rem 0 0 0;

	@media (max-width: 640px) {
		margin: 0.75rem 0 0 0;
	}
`,Ln=c.h2`
	font-size: 2rem;
	line-height: 1.1;
	letter-spacing: -0.022em;
	color: #8a8f98;
	font-weight: 510;
	max-width: 1250px;
	margin: 0;
	text-align: left;

	& strong {
		color: #f7f8f8;
		font-weight: 510;
	}

	@media (max-width: 1280px) {
		font-size: 1.75rem;
	}

	@media (max-width: 768px) {
		font-size: 1.5rem;
		line-height: 1.125;
	}

	@media (max-width: 640px) {
		font-size: 1.25rem;
		line-height: 1.33;
		letter-spacing: -0.012em;
	}
`,In=c.div`
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
	gap: 1rem;
	width: 100%;

	@media (max-width: 1024px) {
		gap: 0.75rem;
	}

	@media (max-width: 640px) {
		flex-wrap: wrap;
		gap: 0.75rem;
	}
`,Hn=c.article`
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	max-width: 280px;
	min-height: 380px;
	margin: 0.5rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	overflow: hidden;

	@media (max-width: 640px) {
		flex: 1 1 calc(50% - 1.75rem);
		max-width: calc(50% - 1.75rem);
		min-height: 320px;
		margin: 0.375rem;
	}
`,En=c.img`
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
`,jn=c.div`
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;

	svg {
		display: block;
		width: 100%;
		height: 100%;
	}

	svg * {
		vector-effect: none !important;
	}

	svg .depth {
		stroke-width: 1.25;
		opacity: 0.65;
	}
`,zn=c.div`
	width: 100%;
	height: 1px;
	background-color: rgba(255, 255, 255, 0.12);
`,Rn=c.div`
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.5rem;
	padding: 1.25rem;
	width: 100%;
	box-sizing: border-box;
`,Pn=c.h3`
	font-size: 1.125rem;
	font-weight: 600;
	color: #ffffff;
	margin: 0;
	letter-spacing: -0.01em;
	line-height: 1.3;

	@media (max-width: 640px) {
		font-size: 1rem;
	}
`,Bn=c.p`
	font-size: 0.875rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.7);
	margin: 0;

	@media (max-width: 640px) {
		font-size: 0.8rem;
	}
`,it={"for-you":{headline:e.jsxs(e.Fragment,{children:[e.jsx("strong",{children:"A new way to empower AI."})," Infrastructure that allows you to rapidly connect agents to AI compute and services across the globe. Now you can optimize cost and performance in realtime."]}),cards:[{svg:gn,headline:"Discover AI",explainer:"Connect to any LLM, MCP, or API easily."},{svg:pn,headline:"Seamless Billing",explainer:"Connect to any circuit with one key for seamless billing."},{svg:tt,headline:"Versioned Infrastructure",explainer:"Every adapter, secret, and config is fully versioned so your infrastructure never breaks."},{svg:fn,headline:"Compute Anywhere",explainer:"Fine-grained control over infrastructure. Connect to circuits in datacenters around the world for compliance and performance."}]},"for-developers":{headline:e.jsxs(e.Fragment,{children:[e.jsx("strong",{children:"Bring your own compute."})," Connect your own LLMs, APIs, and more — Modelworks handles the scaling and monetization so you can achieve higher ROI on your infrastructure."]}),cards:[{svg:dn,headline:"Compose Circuits",explainer:"Connect any LLM, API, or MCP server into a single workflow with a simple JSON file."},{svg:hn,headline:"Deploy Instantly",explainer:"Ship scalable HTTP(S) endpoints with built-in auth, metrics, and auditing out of the box."},{svg:tt,headline:"Version Everything",explainer:"Every adapter, secret, and config is fully versioned so your infrastructure never breaks."},{svg:mn,headline:"Earn",explainer:"Deploy datacenter compute and earn seamlessly on ModelWorks."}]}},Vn=({card:t})=>t.svg?e.jsx(jn,{dangerouslySetInnerHTML:{__html:t.svg.replace(/vector-effect:\s*non-scaling-stroke;?/g,"").replace(/vector-effect="non-scaling-stroke"/g,"").replace(/(<svg[^>]*?)\s+width="[^"]*"/,"$1").replace(/(<svg[^>]*?)\s+height="[^"]*"/,"$1").replace(/(<svg\b)/,'$1 preserveAspectRatio="xMidYMid meet"').replace(/svg:hover[^{}]*\{[^}]*\}/g,"")}}):e.jsx(En,{src:t.image,alt:t.headline}),Qn=()=>{Mt({title:"Modelworks: Unified AI",description:"Connect to any LLM, any API, or MCP server effortlessly. By developers, for developers.",keywords:"AI circuits, AI services, deploy AI, AI infrastructure, AI marketplace, AI API, LLM, LLMs, large language model, large language models, AI agents, AI agent",ogTitle:"Modelworks: Unified AI",ogDescription:"Connect to any LLM, any API, or MCP server effortlessly. By developers, for developers."});const{useFeaturedCircuitsQuery:t}=Pt(),{data:n}=t(),[r,a]=l.useState("for-you"),u=l.useRef(null),i=l.useRef([]),[k,R]=l.useState({left:0,width:0});return l.useLayoutEffect(()=>{const p=r==="for-you"?0:1,E=u.current,j=i.current[p];if(E&&j){const V=E.getBoundingClientRect(),O=j.getBoundingClientRect();R({left:O.left-V.left,width:O.width})}},[r]),e.jsxs(un,{children:[e.jsx(wn,{href:"#main-content",children:"Skip to main content"}),e.jsx("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:JSON.stringify({"@context":"https://schema.org","@type":"SoftwareApplication",name:"Modelworks",description:"GitHub for AI - Create, deploy, and share AI service circuits. Connect multiple AI services into powerful workflows.",url:"https://modelworks.ai",applicationCategory:"DeveloperApplication",operatingSystem:"Web",offers:{"@type":"Offer",price:"0",priceCurrency:"USD"},author:{"@type":"Organization",name:"Modelworks",url:"https://modelworks.ai"},publisher:{"@type":"Organization",name:"Modelworks",url:"https://modelworks.ai"},featureList:["Compose AI circuits from any LLM, API, or MCP server","Deploy scalable HTTP(S) endpoints with auth, metrics, and auditing","Versioned adapters, secrets, and configs","Global datacenter compute with seamless billing"],screenshot:"https://modelworks.ai/images/og_1200_600.jpg"})}}),e.jsx(xn,{children:e.jsx(kt,{showBorder:!1})}),e.jsx(vn,{id:"main-content",tabIndex:-1,children:e.jsxs(kn,{children:[e.jsxs(bn,{children:[e.jsx("h1",{className:"text-4xl md:text-6xl font-bold text-white tracking-tight whitespace-pre-line",children:"Unified AI"}),e.jsx("p",{className:"text-base md:text-xl text-white/70 max-w-2xl",children:"Connect to any LLM, any API, or MCP server effortlessly. By developers, for developers."}),e.jsx(At,{variant:"secondary",className:"w-fit",children:"Signups on deck! Coming soon!"})]}),e.jsx(yn,{children:e.jsx(cn,{entries:n&&n.length>0?n:void 0})}),e.jsxs(An,{children:[e.jsxs(Dn,{ref:u,role:"tablist","aria-label":"Homepage audience",children:[e.jsx(at,{ref:p=>{i.current[0]=p},role:"tab","aria-selected":r==="for-you",$active:r==="for-you",onClick:()=>a("for-you"),children:"For You"}),e.jsx(at,{ref:p=>{i.current[1]=p},role:"tab","aria-selected":r==="for-developers",$active:r==="for-developers",onClick:()=>a("for-developers"),children:"For Developers"}),e.jsx(Cn,{$left:k.left,$width:k.width})]}),e.jsx(Sn,{children:e.jsx(Ln,{children:it[r].headline})}),e.jsx(Mn,{children:e.jsx(In,{children:it[r].cards.map(p=>e.jsxs(Hn,{children:[e.jsx(Vn,{card:p}),e.jsx(zn,{}),e.jsxs(Rn,{children:[e.jsx(Pn,{children:p.headline}),e.jsx(Bn,{children:p.explainer})]})]},p.headline))})})]})]})}),e.jsx(bt,{})]})};export{Qn as default};