.xloop.t-dark{--wire:#e11d4857;--wire-alt:#ffffff57;--wire-front:#e11d48;--trace:#ff5773;--glow:#e11d48f2}.xloop.t-light{--wire:#e11d486b;--wire-alt:#0a0a0a6b;--wire-front:#e11d48;--trace:#e11d48;--glow:#e11d48f2}.xloop{perspective:1300px;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative;overflow:visible}.xloop__stage{aspect-ratio:1;width:84%;transform-style:preserve-3d;position:relative}.xloop__object{transform-style:preserve-3d;will-change:transform;animation:16s cubic-bezier(.45,0,.25,1) infinite alternate xTurn;position:absolute;inset:0}.xloop__depth{transform-style:preserve-3d;animation:11s ease-in-out infinite alternate xDepth;position:absolute;inset:0}.xloop__layer{transform-style:preserve-3d;backface-visibility:hidden;--sw:2;position:absolute;inset:0}.xloop__layer svg{width:100%;height:100%;display:block;overflow:visible}.xloop__layer--front{--wire:var(--wire-front);--sw:3.4}.xloop__layer--alt{--wire:var(--wire-alt)}.xloop.mode-fill .xloop__layer{--xfill:var(--wire);--xstroke:none}.xloop.mode-lines .xloop__layer{--xfill:none;--xstroke:var(--wire)}.xloop__layer--front svg{filter:drop-shadow(0 0 2.5px var(--glow))}.xloop.t-light .xloop__layer--front svg{filter:drop-shadow(0 0 3px var(--glow)) drop-shadow(0 0 7px var(--glow))}.xloop__trace{transform-style:preserve-3d;position:absolute;inset:0}.xloop__trace svg{width:100%;height:100%;display:block;overflow:visible}.xloop__trace svg path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:30 970;animation:xTrace var(--trace-duration,7s) linear infinite}.xloop--paused .xloop__object,.xloop--paused .xloop__depth,.xloop--paused .xloop__trace svg path,.xloop--scrollpause .xloop__object,.xloop--scrollpause .xloop__depth,.xloop--scrollpause .xloop__trace svg path{animation-play-state:paused}@keyframes xTurn{0%{transform:rotateY(-46deg)rotate(-2deg)}50%{transform:rotateY(2deg)rotate(0)}to{transform:rotateY(46deg)rotate(2deg)}}@keyframes xDepth{0%{transform:rotateX(26deg)scaleZ(.5)}to{transform:rotateX(-26deg)scaleZ(1.25)}}@keyframes xTrace{to{stroke-dashoffset:-1000px}}@media (prefers-reduced-motion:reduce){.xloop__object{animation:none;transform:rotateX(-16deg)rotateY(-14deg)}.xloop__depth{animation:none;transform:scaleZ(1)}.xloop__trace svg path{animation:none}}.xloop--frontal .xloop__object{animation:none!important;transform:none!important}.xloop--frontal .xloop__depth{animation:none!important;transform:scaleZ(1)!important}.xloop--frontal .xloop__trace{display:none!important}