:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:#02090b;color:#eaffff}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;overflow:hidden;background:#02090b}
.space{position:relative;min-height:100svh;isolation:isolate;overflow:hidden;display:grid;place-items:center}
.background{position:absolute;inset:-4%;z-index:-3;background:linear-gradient(90deg,rgba(1,8,10,.72),rgba(1,8,10,.1)),url('assets/neural-space.png') center/cover no-repeat;animation:drift 22s ease-in-out infinite alternate;filter:saturate(1.15) contrast(1.05)}
.background:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 68% 51%,transparent 0 20%,rgba(1,8,10,.12) 46%,rgba(1,8,10,.74) 100%)}
#particles{position:absolute;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}
header{position:absolute;left:clamp(22px,6vw,92px);top:clamp(28px,7vh,78px);max-width:390px;text-shadow:0 2px 24px #001}
.eyebrow,.card-kicker{margin:0 0 10px;color:#62ffe2;font-size:.72rem;letter-spacing:.28em;font-weight:700}
h1{margin:0;font-size:clamp(2rem,5vw,4.8rem);line-height:.94;letter-spacing:-.045em}
header>p:last-child{margin:18px 0 0;color:#a9c9cb;font-size:clamp(.95rem,1.5vw,1.15rem)}
.core{position:absolute;left:68%;top:52%;width:min(58vw,690px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;animation:float 6s ease-in-out infinite}
.pulse{position:absolute;left:50%;top:50%;width:18%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#fff 0 3%,#70fff1 8%,#00e6d0 18%,rgba(0,238,202,.2) 44%,transparent 70%);box-shadow:0 0 30px #7ff,0 0 90px #00d9b6;animation:breathe 2.7s ease-in-out infinite}
.orbit{position:absolute;inset:9%;border:1px solid rgba(73,255,223,.28);border-radius:50%;box-shadow:inset 0 0 30px rgba(0,255,213,.08)}
.orbit:before,.orbit:after{content:"";position:absolute;inset:10%;border:1px dashed rgba(70,220,255,.17);border-radius:50%}
.orbit-a{animation:spin 22s linear infinite}.orbit-b{inset:21%;animation:spinBack 15s linear infinite;border-style:dashed}
.node,.center-node{position:absolute;width:22px;height:22px;border:0;border-radius:50%;background:#d8fffb;box-shadow:0 0 8px #fff,0 0 18px #00ffd0,0 0 36px #00d4ff;cursor:pointer;transform:translate(-50%,-50%);transition:transform .2s,box-shadow .2s;animation:nodePulse 2.2s ease-in-out infinite}
.node:before{content:"";position:absolute;inset:-14px;border:1px solid rgba(91,255,229,.35);border-radius:50%;animation:ring 2.2s ease-out infinite}
.node:hover,.node:focus-visible,.center-node:hover,.center-node:focus-visible{transform:translate(-50%,-50%) scale(1.35);box-shadow:0 0 10px #fff,0 0 30px #00ffd0,0 0 54px #00c8ff;outline:none}
.n1{left:33%;top:25%}.n2{left:60%;top:18%;animation-delay:.3s}.n3{left:78%;top:36%;animation-delay:.6s}.n4{left:82%;top:64%;animation-delay:.9s}.n5{left:58%;top:81%;animation-delay:1.2s}.n6{left:31%;top:74%;animation-delay:1.5s}.n7{left:17%;top:51%;animation-delay:1.8s}.n8{left:47%;top:49%;animation-delay:2.1s}
.center-node{left:50%;top:50%;width:42px;height:42px;background:transparent;box-shadow:none}
.hint{position:absolute;left:50%;bottom:max(24px,5vh);transform:translateX(-50%);padding:11px 18px;border:1px solid rgba(108,255,233,.2);border-radius:999px;background:rgba(0,13,17,.6);backdrop-filter:blur(12px);color:#b8d8da;font-size:.88rem;white-space:nowrap}
dialog{width:min(88vw,390px);border:1px solid rgba(93,255,229,.34);border-radius:24px;padding:28px;background:linear-gradient(145deg,rgba(7,28,32,.96),rgba(2,11,15,.96));color:#edffff;box-shadow:0 25px 90px #000,0 0 50px rgba(0,255,213,.13);backdrop-filter:blur(24px)}
dialog::backdrop{background:rgba(0,5,8,.62);backdrop-filter:blur(5px)}
dialog[open]{animation:pop .28s ease-out}.close{position:absolute;right:14px;top:10px;border:0;background:transparent;color:#9bc8ca;font-size:2rem;cursor:pointer}
.icon{font-size:2.2rem;margin-bottom:18px}.card-kicker{font-size:.62rem}dialog h2{margin:0 0 10px;font-size:2rem}dialog p:last-child{margin:0;color:#b8d4d5;line-height:1.55}
@keyframes drift{to{transform:scale(1.055) translate3d(-1.2%,.5%,0)}}@keyframes float{50%{transform:translate(-50%,-52%)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes spinBack{to{transform:rotate(-360deg)}}@keyframes breathe{50%{transform:translate(-50%,-50%) scale(1.22);filter:brightness(1.3)}}@keyframes nodePulse{50%{filter:brightness(1.55)}}@keyframes ring{from{transform:scale(.45);opacity:.8}to{transform:scale(1.5);opacity:0}}@keyframes pop{from{opacity:0;transform:scale(.9) translateY(12px)}}
@media(max-width:700px){header{left:22px;right:22px;top:24px;text-align:center;max-width:none}.core{left:50%;top:58%;width:min(105vw,560px)}.background{background-position:68% center}.hint{bottom:20px}.node{width:20px;height:20px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important}}