@supports (display:grid) and (--a:0) and selector(:has(*)){@property --ang{syntax: "<angle>"; inherits: true; initial-value: 0deg;}@property --ry{syntax: "<length>"; inherits: true; initial-value: 32px;}.orbit{position:relative;width:var(--orbit-w, 190px);height:var(--orbit-h, 96px);--ang: 0deg;--ry: 32px;--orbit-r: 62px}.orbit__rail{position:absolute;inset:0;overflow:visible}.orbit__rail ellipse{fill:none;stroke:var(--between);stroke-width:1.5;vector-effect:non-scaling-stroke}.orbit__body{position:absolute;top:50%;left:50%;width:54px;height:54px;margin:-27px 0 0 -27px}.orbit__body>svg{width:100%;height:100%}.orbit__body--a{z-index:2}.orbit__body--b{z-index:1}.orbit__body--a{transform:translate(calc(cos(var(--ang)) * var(--orbit-r)),calc(sin(var(--ang)) * var(--ry)))}.orbit__body--b{transform:translate(calc(cos(var(--ang) + 180deg) * var(--orbit-r)),calc(sin(var(--ang) + 180deg) * var(--ry)))}.orbit--hover{transition:--ang var(--T) var(--ease),--ry var(--T) var(--ease)}.orbit--hover .orbit__rail ellipse{transition:ry var(--T) var(--ease)}@media(hover:hover){.orbit--hover:hover{--ang: 90deg;--ry: 0px}.orbit--hover:hover .orbit__rail ellipse{ry:.01px}}.orbit--hover:focus-visible,:is(.footer-orbit,.lead-orbit):has(.tap-state:checked) .orbit--hover{--ang: 90deg;--ry: 0px}.orbit--hover:focus-visible .orbit__rail ellipse,:is(.footer-orbit,.lead-orbit):has(.tap-state:checked) .orbit--hover .orbit__rail ellipse{ry:.01px}}