/* Deliberate state-field geometry: concentric boundaries on fixed axes. */
.hero-visual{height:auto;width:min(100%,610px);aspect-ratio:1;justify-self:end}
.field-ring{position:absolute;left:50%;top:50%;aspect-ratio:1;border:1px solid rgba(116,161,255,.32);border-radius:50%;transform:translate(-50%,-50%)}
.ring-outer{width:82%}.ring-middle{width:59%;border-style:dashed;animation:spin 42s linear infinite}.ring-inner{width:36%;border-color:rgba(116,161,255,.52)}
.ring-outer i{position:absolute;width:8px;height:8px;border:1px solid #74a1ff;background:#102c47;transform:rotate(45deg);box-shadow:0 0 18px rgba(45,118,255,.75)}
.ring-outer i:nth-child(1){top:-4px;left:calc(50% - 4px)}.ring-outer i:nth-child(2){right:-4px;top:calc(50% - 4px)}.ring-outer i:nth-child(3){bottom:-4px;left:calc(50% - 4px)}.ring-outer i:nth-child(4){left:-4px;top:calc(50% - 4px)}
.axis{background:rgba(255,255,255,.1)}.axis-x{left:3%;right:3%}.axis-y{top:3%;bottom:3%}
.axis-x:before,.axis-x:after,.axis-y:before,.axis-y:after{content:"";position:absolute;width:5px;height:5px;background:#74a1ff}
.axis-x:before{left:0;top:-2px}.axis-x:after{right:0;top:-2px}.axis-y:before{left:-2px;top:0}.axis-y:after{left:-2px;bottom:0}
.coordinate{background:#0a2032;padding:4px 7px;z-index:3}.c1{top:4%;left:55%}.c2{bottom:4%;left:4%}.c3{right:1%;bottom:24%}
@media(max-width:900px){.hero-visual{height:auto;aspect-ratio:1}}