.flip-clock{--flip-phase:0.42s;--digit-font:"Helvetica Neue",Helvetica,Arial,sans-serif;--face-bg:#2b2b2b;--digit-color:#ffffff;--digit-width:34px;--digit-height:48px;--digit-radius:6px;--label-color:#8a8a8a;font-family:var(--digit-font)}.flip-clock--compact{--digit-width:18px;--digit-height:26px;--digit-radius:4px}.flip-clock__row{display:flex;align-items:flex-start;justify-content:center;flex-wrap:nowrap;gap:6px}.flip-clock--compact .flip-clock__row{gap:4px}.flip-clock__unit{display:flex;flex-direction:column;align-items:center}.flip-clock__label{margin-top:.35rem;font-size:7px;font-weight:600;letter-spacing:.12em;color:var(--label-color);text-transform:uppercase}.flip-clock--compact .flip-clock__label{margin-top:.12rem}.flip-clock__card{display:flex;gap:2px;padding:5px 6px;background:var(--face-bg);border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,.14),0 1px 3px rgba(0,0,0,.08)}.flip-clock .flip-digit{position:relative;width:var(--digit-width);height:var(--digit-height);perspective:900px;font-size:calc(var(--digit-height) * .82);font-weight:700;color:var(--digit-color);line-height:var(--digit-height);text-align:center}.flip-clock .flip-digit__inner{position:relative;width:100%;height:100%;transform-style:preserve-3d}.flip-clock .flip-digit__half{position:absolute;left:0;right:0;height:50%;overflow:hidden;background:var(--face-bg)}.flip-clock .flip-digit__half--top{top:0;z-index:1;border-radius:var(--digit-radius) var(--digit-radius) 0 0}.flip-clock .flip-digit__half--bottom{bottom:0;z-index:0;border-radius:0 0 var(--digit-radius) var(--digit-radius)}.flip-clock .flip-digit__text{display:block;height:var(--digit-height);line-height:var(--digit-height)}.flip-clock .flip-digit__half--bottom .flip-digit__text{transform:translateY(-50%)}.flip-clock .flip-digit__inner:after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;transform:translateY(-50%);background:linear-gradient(180deg,rgba(0,0,0,.65),rgba(0,0,0,.25) 40%,rgba(255,255,255,.04));z-index:8;pointer-events:none}.flip-clock .flip-digit__flap{position:absolute;left:0;right:0;height:50%;overflow:hidden;visibility:hidden;backface-visibility:hidden;transform-style:preserve-3d;will-change:transform;background:var(--face-bg)}.flip-clock .flip-digit__flap:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.35))}.flip-clock .flip-digit__flap--top{top:0;z-index:4;transform-origin:50% 100%;transform:rotateX(0deg);border-radius:var(--digit-radius) var(--digit-radius) 0 0}.flip-clock .flip-digit__flap--bottom{bottom:0;z-index:3;transform-origin:50% 0;transform:rotateX(90deg);border-radius:0 0 var(--digit-radius) var(--digit-radius)}.flip-clock .flip-digit__flap--bottom .flip-digit__text,.flip-clock .flip-digit__flap--top .flip-digit__text{display:block;height:var(--digit-height);line-height:var(--digit-height)}.flip-clock .flip-digit__flap--bottom .flip-digit__text{transform:translateY(-50%)}.flip-clock .flip-digit.is-flipping-top .flip-digit__flap--top{visibility:visible;animation:flip-fold-down var(--flip-phase) cubic-bezier(.55,.06,.68,.19) forwards}.flip-clock .flip-digit.is-flipping-top .flip-digit__flap--top:before{animation:flip-shade-down var(--flip-phase) ease-in forwards}.flip-clock .flip-digit.is-flipping-bottom .flip-digit__flap--bottom{visibility:visible;z-index:5;animation:flip-fold-up var(--flip-phase) cubic-bezier(.22,.61,.36,1) forwards}.flip-clock .flip-digit.is-flipping-bottom .flip-digit__flap--bottom:before{animation:flip-shade-up var(--flip-phase) ease-out forwards}@keyframes flip-fold-down{0%{transform:rotateX(0deg)}to{transform:rotateX(-90deg)}}@keyframes flip-fold-up{0%{transform:rotateX(90deg)}to{transform:rotateX(0deg)}}@keyframes flip-shade-down{0%{opacity:0}40%{opacity:.15}to{opacity:.55}}@keyframes flip-shade-up{0%{opacity:.55}60%{opacity:.2}to{opacity:0}}@media (prefers-reduced-motion:reduce){.flip-clock{--flip-phase:0.01s}}