.flex-center{display:flex;justify-content:center;align-items:center}:root{--flip-dur:3.8s;--flip-delay-bottom:3.1s;--flip-dur-fast:.23s;--flip-delay-bottom-fast:.12s;--active-dur:.23s;--active-dur-fast:.12s}.flip-dial{perspective:1000px}.flip-dial,.flip-skeleton{position:relative;border-radius:30px;aspect-ratio:9/10;flex:1 1 0%;--tw-bg-opacity:1;background-color:rgb(25 108 243/var(--tw-bg-opacity,1))}.flip-skeleton:before{content:"";width:100%;height:5px;background:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes flip-skeleton-shimmer{0%{background-position:100% 0}to{background-position:0 0}}.flip-card{position:absolute;inset:0;width:100%;height:100%;transform-style:preserve-3d;z-index:0;opacity:0;transition:opacity var(--active-dur) ease-in-out}.flip-card.active{z-index:1;opacity:1}.flip-card.flip{z-index:2;opacity:1}.flip-card.prev{z-index:0;opacity:1}.flip-card .card{position:absolute;left:0;right:0;width:100%;height:50%;overflow:hidden;border-radius:30px 30px 0 0;transform-origin:center bottom;backface-visibility:hidden}.flip-card.active.active-speed{transition-duration:var(--active-dur-fast)}.flip-card .card.top{top:0;z-index:3;border-bottom:2.5px solid #fff;transform:rotateX(0deg);--tw-bg-opacity:1;background-color:rgb(25 108 243/var(--tw-bg-opacity,1))}.flip-card .card.bottom{bottom:0;border-top:2.5px solid #fff;border-radius:0 0 30px 30px;transform-origin:center top;transform:rotateX(90deg);--tw-bg-opacity:1;background-color:rgb(0 92 242/var(--tw-bg-opacity,1))}.flip-card.flip .card.top{transform:rotateX(-90deg);transition:transform var(--flip-dur) ease-in-out}.flip-card.flip .card.bottom{transform:rotateX(0deg);transition:transform var(--flip-dur) ease-in-out var(--flip-delay-bottom)}.flip-card.flip.flip-speed .card.bottom,.flip-card.flip.flip-speed .card.top{transition-duration:var(--flip-dur-fast)}.flip-card.flip.flip-speed .card.bottom{transition-delay:var(--flip-delay-bottom-fast)}.flip-card.prev .card.top{opacity:0;transition:opacity .15s linear}.flip-card.prev .card.bottom{transform-origin:center bottom;transform:rotate3d(0,0,0,0deg);z-index:0}.flip-card .card span{--tw-translate-y:20.8%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));font-size:200px;font-weight:800;--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}@media (min-width:1536px){.flip-card .card span{--tw-translate-y:19%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));font-size:260px}}.flip-card .bottom span{--tw-translate-y:-20.8%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@media (min-width:1536px){.flip-card .bottom span{--tw-translate-y:-19.5%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}