.clock-container{--clockheight:140px;--radius:15px;--rotationtime:0.55s;align-items:center;font-family:Saira Extra Condensed,sans-serif}.clock-body,.clock-container{display:flex;justify-content:center;padding:10px;width:100%}.clock-body{gap:8px;max-width:450px;height:var(--clockheight);border-radius:var(--radius);background-image:linear-gradient(#0e0e0f,#1a191c 20%,#2c2c34 50%,#14141b);box-shadow:inset 0 -3px 6px 3px rgba(0,0,0,.2),inset 0 4px 8px 3px rgba(0,0,0,.4),0 2px 3px 1px hsla(0,0%,100%,.3),0 -2px 4px 4px rgba(56,56,61,.5)}.flipper-digit{position:relative;flex:1 1;min-width:0;height:100%;transform-style:preserve-3d;perspective:1600px}.digit-gear{position:absolute;top:30%;width:6px;height:40%;background:linear-gradient(180deg,#000 0,#666 17%,#7f7f7f 52%,#7f7f7f 0,#0c0c0c 53%,#595959 87%,#131313);outline:1px solid #000;z-index:99;transform:translateZ(10px)}.digit-gear:nth-child(2){right:0}.digit-bottom,.digit-top{box-shadow:0 6px 6px 1px rgba(0,0,0,.5),0 2px 2px 1px hsla(0,0%,100%,.15);border-top:1px solid #66676e;border-bottom:1px solid #000;position:relative;width:100%;height:calc(50% - 10px);overflow:hidden}.digit-top{background-image:linear-gradient(#303135,#38393e);border-top-left-radius:8px;border-top-right-radius:8px}.digit-bottom,.digit-top{margin-top:5px;margin-bottom:5px}.digit-bottom{background-image:linear-gradient(#393a3f,#414147);border-bottom-left-radius:8px;border-bottom-right-radius:8px}.digit-text{font-size:80px;font-weight:700;display:block;position:absolute;width:100%;height:100%;line-height:120px;text-align:center;color:#fff}.digit-bottom .digit-text{line-height:0}.digit-top.flipping-new{position:absolute;top:0;left:0;z-index:12;transform-origin:bottom center;animation:rotate-top var(--rotationtime) 1 ease-in-out forwards;-webkit-backface-visibility:hidden;backface-visibility:hidden}.digit-bottom.flipping-new{position:absolute;top:0;left:0;height:calc(100% - 0px);transform:rotateX(.5turn);z-index:1;animation:rotate-bottom var(--rotationtime) 1 ease-in-out forwards}@keyframes rotate-top{0%{transform:rotateX(0) translateY(0)}to{transform:rotateX(-180deg) translateY(-10px)}}@keyframes rotate-bottom{0%{opacity:0}49%{opacity:0}50%{opacity:1}to{opacity:1}}@media (max-width:640px){.clock-container{--clockheight:100px;padding:5px}.clock-body{gap:5px;padding:8px}.digit-text{font-size:56px;line-height:85px}.digit-bottom .digit-text{line-height:0}.digit-bottom,.digit-top{height:calc(50% - 8px)}}