.spinner{perspective:1000px;transform:rotate(45deg)}.spinner:before,.spinner:after,.spinner span{width:inherit;height:inherit;border-radius:50%;display:block;position:absolute;top:0;left:0}.spinner:before{content:"";color:#1a1a1a;animation:1s linear infinite spinner-spin,8s ease-in-out infinite spinner-tilt-x}.spinner:after{content:"";color:#22c55e;animation:1s linear -.75s infinite spinner-spin,8s ease-in-out infinite spinner-tilt-y}.spinner span:first-child{color:#1a1a1a;animation:1s linear -.5s infinite spinner-spin,8s ease-in-out infinite spinner-tilt-diag1}.spinner span:nth-child(2){color:#22c55e;animation:1s linear -.25s infinite spinner-spin,8s ease-in-out infinite spinner-tilt-diag2}.dark .spinner:before,.dark .spinner span:first-child{color:#f9fafb}.dark .spinner:after,.dark .spinner span:nth-child(2){color:#22c55e}.spinner.spinner--on-color:before,.spinner.spinner--on-color span:first-child{color:#f9fafb}.spinner.spinner--on-color:after,.spinner.spinner--on-color span:nth-child(2){color:#1a1a1a}@keyframes spinner-tilt-x{0%,to{transform:rotateX(0)}25%,75%{transform:rotateX(70deg)}}@keyframes spinner-tilt-y{0%,to{transform:rotateY(0)}25%,75%{transform:rotateY(70deg)}}@keyframes spinner-tilt-diag1{0%,to{transform:rotateX(0)rotateY(0)}25%,75%{transform:rotateX(45deg)rotateY(45deg)}}@keyframes spinner-tilt-diag2{0%,to{transform:rotateX(0)rotateY(0)}25%,75%{transform:rotateX(45deg)rotateY(-45deg)}}@keyframes spinner-spin{0%,to{box-shadow:.2em 0}12%{box-shadow:.2em .2em}25%{box-shadow:0 .2em}37%{box-shadow:-.2em .2em}50%{box-shadow:-.2em 0}62%{box-shadow:-.2em -.2em}75%{box-shadow:0 -.2em}87%{box-shadow:.2em -.2em}}@media (prefers-reduced-motion:reduce){.spinner{perspective:none;transform:none}.spinner:before,.spinner:after,.spinner span{animation:2s ease-in-out infinite spinner-pulse!important}.spinner:after{animation-delay:-.5s!important}.spinner span:first-child{animation-delay:-1s!important}.spinner span:nth-child(2){animation-delay:-1.5s!important}@keyframes spinner-pulse{0%,to{opacity:.4}50%{opacity:1}}}