.topology{--pointer-x:0px;--pointer-y:0px}
.hub .hub-logo{display:block;width:88%;height:auto;object-fit:contain}
.topology::before,.topology::after{content:"";position:absolute;left:50%;top:50%;width:74%;aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:-1;transform:translate(-50%,-50%);background:conic-gradient(from 20deg,transparent 0 63%,#e9772910 72%,#e9772990 83%,transparent 84%);mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));animation:rein-orbit 18s linear infinite}
.topology::after{width:55%;background:conic-gradient(transparent 0 65%,#5599b440 77%,#75acbeaa 88%,transparent 89%);animation-duration:13s;animation-direction:reverse}
.topology-grid{animation:rein-atmosphere 8s ease-in-out infinite}
.connections path{stroke:#de8d53;stroke-dasharray:4 9;animation:rein-flow 2s linear infinite}
.hub{animation:rein-core 5s ease-in-out infinite;translate:var(--pointer-x) var(--pointer-y);transition:translate .45s ease-out}
.hub::after{content:"";position:absolute;inset:-17px;border:1px solid #e977292b;border-radius:38px;pointer-events:none;animation:rein-pulse 5s ease-out infinite}
.hub svg{animation:rein-icon 5s ease-in-out infinite}
.node{animation:rein-float 6s ease-in-out infinite;translate:var(--pointer-x) var(--pointer-y);transition:translate .45s ease-out,border-color .25s,box-shadow .25s}
.node-two{animation-delay:-1.5s}.node-three{animation-delay:-3s}.node-four{animation-delay:-4.5s}
.node:hover{border-color:#df9866;box-shadow:0 12px 30px #e9772920;animation-play-state:paused}
.diagram-note i{animation:rein-status 3s ease-in-out infinite}
.motion-toggle{position:absolute;right:0;top:0;border:1px solid #dce5eb;background:#ffffffb8;color:#607381;border-radius:20px;padding:5px 10px;font-size:9px;line-height:1.4;z-index:3;backdrop-filter:blur(6px)}
.motion-toggle:hover{background:#fff;color:#a95117}
.topology.motion-paused *,.topology.motion-paused::before,.topology.motion-paused::after,.topology.motion-paused .hub::after,.topology.motion-offscreen *,.topology.motion-offscreen::before,.topology.motion-offscreen::after,.topology.motion-offscreen .hub::after{animation-play-state:paused!important}
@keyframes rein-orbit{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes rein-flow{to{stroke-dashoffset:-26}}
@keyframes rein-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes rein-core{0%,100%{box-shadow:0 18px 50px #28445525,0 0 0 0 #e9772900}50%{box-shadow:0 22px 55px #28445530,0 0 38px 5px #e9772925}}
@keyframes rein-pulse{0%{transform:scale(.96);opacity:0}30%{opacity:.7}100%{transform:scale(1.24);opacity:0}}
@keyframes rein-icon{0%,100%{filter:drop-shadow(0 0 0 transparent)}50%{filter:drop-shadow(0 0 6px #f7a56b88)}}
@keyframes rein-atmosphere{0%,100%{opacity:.35;transform:scale(.98)}50%{opacity:.6;transform:scale(1.02)}}
@keyframes rein-status{0%,100%{box-shadow:0 0 0 0 #579a8500}50%{box-shadow:0 0 0 4px #579a8517}}
@media(max-width:760px){.motion-toggle{top:-14px;font-size:8px}.topology::before{width:85%}.topology::after{width:64%}.node{animation-name:rein-float-mobile}.hub::after{inset:-10px;border-radius:28px}@keyframes rein-float-mobile{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}}
@media(prefers-reduced-motion:reduce){.topology *,.topology::before,.topology::after,.topology .hub::after{animation:none!important;transition:none!important}.topology .node,.topology .hub{translate:none}.motion-toggle{display:none}}