.flip-counter{perspective:300px;gap:4px;display:inline-flex}.flip-card{color:#fff;border-radius:7px;width:34px;height:48px;font:800 34px/48px Heebo,system-ui,sans-serif;display:inline-block;position:relative;box-shadow:0 3px 6px #00000040}.flip-half{backface-visibility:hidden;background:#2b2b2b;width:100%;height:50%;position:absolute;left:0;overflow:hidden}.flip-half>span{text-align:center;width:100%;height:48px;position:absolute;left:0}.flip-top{transform-origin:50% 100%;background:linear-gradient(#3a3a3a,#2a2a2a);border-radius:7px 7px 0 0;top:0}.flip-top>span{top:0}.flip-bottom{transform-origin:50% 0;background:linear-gradient(#262626,#1e1e1e);border-radius:0 0 7px 7px;bottom:0}.flip-bottom>span{bottom:0}.flip-card:after{content:"";z-index:5;background:#0009;height:2px;margin-top:-1px;position:absolute;top:50%;left:0;right:0}.flip-fall{z-index:3;animation:.3s ease-in forwards flip-fall}.flip-rise{z-index:4;animation:.3s ease-out .3s forwards flip-rise;transform:rotateX(90deg)}@keyframes flip-fall{to{transform:rotateX(-90deg)}}@keyframes flip-rise{to{transform:rotateX(0)}}@media (prefers-reduced-motion:reduce){.flip-fall,.flip-rise{animation-duration:1ms;animation-delay:0s}}@media (width<=480px){.flip-card{width:28px;height:40px;font-size:28px;line-height:40px}.flip-half>span{height:40px}}.flip-counter.flip-sm .flip-card{border-radius:6px;width:26px;height:36px;font-size:25px;line-height:36px}.flip-counter.flip-sm .flip-half>span{height:36px}