.flip-clock-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#111827;gap:2.5rem}.flip-clock-page.flip-clock-page--fill{min-height:0;flex:1 1 auto;justify-content:flex-start;padding-top:5rem;padding-bottom:1.5rem}.flip-clock-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.25rem 2rem}.flip-clock-toggle-cluster{display:flex;flex-direction:column;align-items:center;gap:.45rem}.flip-clock-toggle-label{font-size:.65rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.28)}.flip-clock-toggle-group{display:inline-flex;border-radius:.75rem;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);padding:.2rem;gap:.2rem}.flip-clock-toggle-btn{border:none;border-radius:.5rem;padding:.45rem 1rem;font-size:.8125rem;font-weight:600;color:rgba(255,255,255,.45);background:transparent;cursor:pointer;transition:color .15s ease,background .15s ease}.flip-clock-toggle-btn:hover{color:rgba(255,255,255,.75)}.flip-clock-toggle-btn[aria-pressed=true]{color:#f9fafb;background:rgba(255,255,255,.12)}.flip-clock-tail{display:flex;flex-direction:row;align-items:stretch;gap:.5rem}.flip-clock-ampm-tail{display:flex;flex-direction:column;justify-content:flex-end;flex-shrink:0;padding-bottom:calc(1rem + 1.05rem)}.flip-clock-ampm{font-size:2.75rem;font-weight:700;line-height:1;letter-spacing:.04em;color:rgba(255,255,255,.5);user-select:none;text-align:right}.flip-clock{display:flex;align-items:center;gap:0}.flip-clock-separator{color:rgba(255,255,255,.45);font-size:10rem;font-weight:700;line-height:1;margin:0 1.28rem 5rem;user-select:none}.flip-card-wrapper{display:flex;flex-direction:column;align-items:stretch;gap:1rem;margin:0 .4rem}.flip-card-wrapper>.flex{align-self:center}.flip-clock-group-label{width:100%;text-align:center;color:rgba(255,255,255,.2);font-size:.85rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500}.flip-card{position:relative;width:256px;height:480px;border-radius:19px;box-shadow:0 20px 80px rgba(0,0,0,.6),0 4px 16px rgba(0,0,0,.4)}.flip-card:after{content:"";position:absolute;left:0;right:0;top:calc(50% - 1px);height:2px;background:rgba(0,0,0,.7);z-index:20;pointer-events:none}.card-number{display:flex;align-items:center;justify-content:center;font-size:16rem;font-weight:700;color:#dde3ee;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;line-height:480px;height:480px;user-select:none}.card-number,.card-top{position:absolute;left:0;right:0;top:0}.card-top{border-radius:19px 19px 0 0;background:linear-gradient(180deg,#223060,#1b2650)}.card-bottom,.card-top{height:50%;overflow:hidden}.card-bottom{position:absolute;top:50%;left:0;right:0;border-radius:0 0 19px 19px;background:linear-gradient(180deg,#162040,#111933)}.card-bottom .card-number{top:-240px}.card-flip-bottom,.card-flip-top{position:absolute;left:0;right:0;height:50%;overflow:hidden;opacity:0;font-size:11rem;font-weight:700;color:#dde3ee;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;backface-visibility:hidden}.card-flip-top{top:0;border-radius:19px 19px 0 0;background:linear-gradient(180deg,#223060,#1b2650);transform-origin:bottom center}.card-flip-bottom{top:50%;border-radius:0 0 19px 19px;background:linear-gradient(180deg,#162040,#111933);transform-origin:top center;transform:rotateX(90deg)}.card-flip-top .card-number{top:0}.card-flip-bottom .card-number{top:-240px}.flip-card.flipping .card-flip-top{opacity:1;animation:flipTop .28s ease-in forwards}.flip-card.flipping .card-flip-bottom{opacity:1;animation:flipBottom .28s ease-out .14s forwards}@keyframes flipTop{0%{transform:rotateX(0deg)}to{transform:rotateX(-90deg)}}@keyframes flipBottom{0%{transform:rotateX(90deg)}to{transform:rotateX(0deg)}}@media (max-width:640px){.flip-card{width:115px;height:184px;border-radius:10px}.card-top{border-radius:10px 10px 0 0}.card-bottom{border-radius:0 0 10px 10px}.card-number{font-size:7.2rem;line-height:184px;height:184px}.card-bottom .card-number,.card-flip-bottom .card-number{top:-92px}.card-flip-top{border-radius:10px 10px 0 0}.card-flip-bottom{border-radius:0 0 10px 10px}.flip-clock-separator{font-size:4rem;margin-bottom:2.4rem}.flip-clock-ampm{font-size:1.35rem}.flip-clock-ampm-tail{padding-bottom:calc(1rem + .85rem)}.flip-clock-toolbar{gap:1rem 1.25rem}.flip-clock-toggle-btn{padding:.35rem .75rem;font-size:.75rem}}