:root{--countdown-height:24px;--countdown-width:56px;--countdown-radius:5px;--clear-primary:oklch(0.6787 0.1154 198.45);--intermediate-primary:oklch(0.5752 0.0745 230.93);--dark-primary:oklch(0.2883 0.0805 244.79);--countdown-background-color:linear-gradient(to bottom,var(--dark-primary),var(--intermediate-primary));--countdown-top-color:linear-gradient(to bottom,var(--clear-primary),var(--intermediate-primary));--text-opacity:1}@media (width >=48rem){:root{--countdown-height:24px;--countdown-width:56px}}@media (width >=64rem){:root{--countdown-height:32px;--countdown-width:64px}}@keyframes rotate{0%{transform:rotateX(0deg)}to{transform:rotateX(-180deg)}}.countdown-container{width:var(--countdown-width);height:calc(var(--countdown-height) * 2);perspective:250px;perspective-origin:50% 50%;filter:drop-shadow(1.2px 1.2px 1px hsl(240,5%,12%))}.countdown-wrapper{position:absolute;width:var(--countdown-width);height:var(--countdown-height);transform-style:preserve-3d;transform-origin:bottom;animation:rotate .6s ease-in forwards;animation-delay:.4s}.countdown{position:absolute;width:100%;height:100%;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}.top{background:var(--countdown-top-color);border-radius:var(--countdown-radius) var(--countdown-radius) 0 0;box-shadow:inset 0 0 .7px 0 hsl(203,50%,90%)}.bottom,.top{position:absolute;width:var(--countdown-width);height:var(--countdown-height)}.bottom{background:var(--countdown-background-color);border-radius:0 0 var(--countdown-radius) var(--countdown-radius)}.countdown.top{transform:rotateX(0deg);padding-bottom:0}.countdown.bottom{transform:rotateX(180deg);padding-top:0}.number-bottom,.number-flip,.number-top{position:absolute;width:100%;height:var(--countdown-height);text-align:center;font-size:calc(var(--countdown-height) * 1.4);font-weight:600;color:hsla(203,50%,90%,var(--text-opacity));backface-visibility:hidden;-webkit-backface-visibility:hidden;filter:drop-shadow(-1px 1px 0 hsl(201,45%,20%))}.number-bottom{line-height:3px;overflow:hidden}.flip-top,.number-bottom{backface-visibility:hidden}.flip-top{transform:translateY(0)}.flip-bottom{transform:translateY(-100%);backface-visibility:hidden}.division-line{position:absolute;width:100%;height:.8px;background-color:var(--dark-primary);z-index:1;top:50%;left:0;transform:translateY(-50%)}.image-scroll{animation:color-grayscale linear both;animation-timeline:scroll(root);animation-range:0 800px}@keyframes color-grayscale{0%{filter:grayscale(100%)}to{filter:grayscale(20%)}}