.demo-respinner{justify-content:center;align-items:center;min-height:80px;padding:16px;display:flex;position:relative;overflow:hidden}.demo-respinner__spinners{filter:grayscale();opacity:.5;justify-content:center;align-items:center;gap:32px;transition:filter .3s,opacity .3s;display:flex}.demo-respinner.demo--active .demo-respinner__spinners{filter:none;opacity:1}.demo-respinner__spinner{justify-content:center;align-items:center;width:40px;height:40px;display:flex}.demo-respinner:not(.demo--active) .demo-respinner__spinner *{animation-play-state:paused}.demo-respinner__spinners--out{position:absolute;inset:0}@media (prefers-reduced-motion:no-preference){.demo-respinner__spinners--out .demo-respinner__spinner{animation:.3s cubic-bezier(.5,0,.9,.4) both demo-respinner-reel-out;animation-delay:calc(var(--reel,0) * 70ms)}.demo-respinner__spinners[data-swing] .demo-respinner__spinner{animation:.48s cubic-bezier(.2,.9,.3,1) both demo-respinner-reel-in;animation-delay:calc(var(--reel,0) * .11s)}}@media (prefers-reduced-motion:reduce){.demo-respinner__spinners--out{display:none}}@keyframes demo-respinner-reel-out{to{opacity:0;filter:blur(1.5px);transform:translateY(-140%)scaleY(1.25)}}@keyframes demo-respinner-reel-in{0%{opacity:0;filter:blur(1.5px);transform:translateY(140%)scaleY(1.25)}55%{opacity:1;filter:none;transform:translateY(-10%)scaleY(1)}78%{transform:translateY(3%)}to{transform:none}}