*{box-sizing:border-box}
:root{--cyan:#00a8a8;--cyan2:#19d4d0;--ink:#050809;--line:#173536;--text:#e7eeee;--muted:#718080}
html,body{margin:0;width:100%;min-height:100%;background:var(--ink);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{overflow:hidden}
#field{position:fixed;inset:0;width:100%;height:100%;z-index:0}
.scanlines{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.10;background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(255,255,255,.025) 4px)}
.shell{position:relative;z-index:2;min-height:100vh;max-width:1280px;margin:auto;padding:24px 32px;display:flex;flex-direction:column}
.topbar{height:42px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(100,150,150,.18);font-size:10px;letter-spacing:.22em}
.brand{font-weight:700;letter-spacing:.28em}.brand i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--cyan2);box-shadow:0 0 14px var(--cyan);margin-right:8px}
.telemetry{color:#718080}.live-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);margin-right:7px}
.stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;min-height:620px}
.ai-core{width:430px;height:430px;position:relative;display:grid;place-items:center;cursor:pointer;transition:transform .5s ease;filter:drop-shadow(0 0 30px rgba(0,190,190,.08))}
.ai-core:hover{transform:scale(1.035)}
.halo{position:absolute;border-radius:50%;pointer-events:none}
.halo-a{width:330px;height:330px;background:radial-gradient(circle,rgba(0,190,190,.14),transparent 66%);filter:blur(20px);animation:breathe 4s ease-in-out infinite}
.halo-b{width:250px;height:250px;border:1px solid rgba(30,190,190,.18);box-shadow:0 0 55px rgba(0,180,180,.10) inset;animation:pulse 3s ease-in-out infinite}
.halo-c{width:430px;height:430px;border:1px solid rgba(80,130,130,.13);mask-image:linear-gradient(90deg,transparent,#fff 25%,#fff 75%,transparent)}
.orbit{position:absolute;border:1px solid rgba(130,170,170,.27);border-radius:50%;transform-style:preserve-3d}
.orbit b{position:absolute;width:7px;height:7px;background:#d9ffff;border-radius:50%;box-shadow:0 0 12px var(--cyan2)}
.orbit-a{width:390px;height:150px;transform:rotate(25deg);animation:orbit1 12s linear infinite}.orbit-a b{top:-4px;left:50%}
.orbit-b{width:390px;height:150px;transform:rotate(-25deg);animation:orbit2 16s linear infinite}.orbit-b b{bottom:-4px;left:50%}
.orbit-c{width:250px;height:380px;transform:rotate(55deg);animation:orbit3 19s linear infinite}.orbit-c b{left:-4px;top:50%}
.node{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--cyan2);box-shadow:0 0 16px rgba(25,212,208,.85);transition:.35s}
.node-n{top:35px}.node-e{right:35px}.node-s{bottom:35px}.node-w{left:35px}
.vector{position:absolute;width:95px;height:95px;display:grid;place-items:center;transform-origin:center;transition:.45s}
.vector:before{content:"";position:absolute;width:75px;height:75px;background:linear-gradient(135deg,rgba(30,220,215,.75),rgba(5,40,42,.08));clip-path:polygon(50% 0,100% 50%,50% 100%,42% 78%,67% 50%,42% 22%);filter:drop-shadow(0 0 12px rgba(0,200,200,.22))}
.vector span{position:absolute;width:44px;height:44px;border:1px solid rgba(220,255,255,.65);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);opacity:.7}
.vector-n{top:68px}.vector-e{right:68px;transform:rotate(90deg)}.vector-s{bottom:68px;transform:rotate(180deg)}.vector-w{left:68px;transform:rotate(270deg)}
.core-ring{position:relative;width:170px;height:170px;border-radius:50%;border:18px solid transparent;background:linear-gradient(var(--ink),var(--ink)) padding-box,linear-gradient(135deg,#063536,var(--cyan2),#071919) border-box;box-shadow:0 0 25px rgba(0,210,210,.22),inset 0 0 25px rgba(0,220,220,.16);z-index:3;animation:corePulse 3s ease-in-out infinite}
.core-hole{position:absolute;inset:25px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#142424,#020404 65%);box-shadow:inset 0 0 25px #000,0 0 20px rgba(0,200,200,.13)}
.core-light{position:absolute;width:38px;height:38px;border-radius:50%;background:#caffff;filter:blur(15px);opacity:.28;z-index:4;animation:light 2.6s ease-in-out infinite}
.copy{margin-top:8px}.eyebrow{margin:0 0 8px;color:#557070;font-size:9px;letter-spacing:.34em}.copy h1{font-size:68px;letter-spacing:.16em;margin:0 0 2px;font-weight:650}.state{color:var(--cyan2);font-size:11px;letter-spacing:.38em}.copy p:last-child{color:#667777;font-size:12px}
#activate{margin-top:20px;padding:12px 22px;background:rgba(5,12,13,.7);border:1px solid #2b4a4a;color:#b8cccc;font-size:10px;letter-spacing:.18em;cursor:pointer;transition:.25s}
#activate:hover{border-color:var(--cyan);color:#eaffff;box-shadow:0 0 20px rgba(0,200,200,.12)}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(100,150,150,.18);border-bottom:1px solid rgba(100,150,150,.18)}
.metrics div{padding:13px 16px;border-right:1px solid rgba(100,150,150,.12);display:flex;justify-content:space-between}.metrics div:last-child{border-right:0}.metrics span{font-size:8px;letter-spacing:.18em;color:#526363}.metrics strong{font-size:8px;letter-spacing:.12em;color:#9ab0b0}
footer{display:flex;justify-content:space-between;padding-top:16px;color:#3d4d4d;font-size:8px;letter-spacing:.2em}
.active .orbit-a{animation-duration:3s}.active .orbit-b{animation-duration:4s}.active .orbit-c{animation-duration:5s}.active .node{box-shadow:0 0 25px var(--cyan2);transform:scale(1.35)}.active .vector{transform:scale(1.08)}.active .vector-e{transform:rotate(90deg) scale(1.08)}.active .vector-s{transform:rotate(180deg) scale(1.08)}.active .vector-w{transform:rotate(270deg) scale(1.08)}.active .halo-a{opacity:.8}
@keyframes breathe{0%,100%{transform:scale(.85);opacity:.55}50%{transform:scale(1.08);opacity:1}}
@keyframes pulse{0%,100%{transform:scale(.94);opacity:.35}50%{transform:scale(1.04);opacity:.8}}
@keyframes corePulse{0%,100%{box-shadow:0 0 25px rgba(0,210,210,.18),inset 0 0 25px rgba(0,220,220,.12)}50%{box-shadow:0 0 45px rgba(0,210,210,.38),inset 0 0 35px rgba(0,220,220,.25)}}
@keyframes light{0%,100%{transform:scale(.7);opacity:.15}50%{transform:scale(1.5);opacity:.45}}
@keyframes orbit1{to{transform:rotate(385deg) rotate(25deg)}}@keyframes orbit2{to{transform:rotate(-385deg) rotate(-25deg)}}@keyframes orbit3{to{transform:rotate(415deg) rotate(55deg)}}
@media(max-width:700px){body{overflow:auto}.shell{padding:18px}.stage{min-height:570px}.ai-core{width:340px;height:340px}.halo-c{width:340px;height:340px}.orbit-a,.orbit-b{width:310px;height:120px}.orbit-c{width:200px;height:300px}.core-ring{width:140px;height:140px}.vector-n{top:48px}.vector-e{right:48px}.vector-s{bottom:48px}.vector-w{left:48px}.node-n{top:25px}.node-e{right:25px}.node-s{bottom:25px}.node-w{left:25px}.copy h1{font-size:52px}.metrics{grid-template-columns:repeat(2,1fr)}.metrics div:nth-child(2){border-right:0}.metrics div{border-bottom:1px solid rgba(100,150,150,.12)}}