.ccf-countdown{display:flex;justify-content:center;gap:20px;font-family:system-ui;margin:20px auto;color:#111;text-align:center}
.ccf-unit{display:flex;flex-direction:column;align-items:center}
.ccf-face{background:#0b5fa8;color:#fff;padding:20px 15px;border-radius:8px;min-width:100px;font-size:60px;font-weight:700;position:relative;overflow:hidden}
.ccf-label{margin-top:10px;font-size:18px}
.ccf-colon{font-size:50px;font-weight:700;color:#0b5fa8;align-self:center}

/* flip animation */
.ccf-face.flip .ccf-num{
  animation: flip 0.6s ease;
}

@keyframes flip{
  0%{transform: rotateX(0);}
  50%{transform: rotateX(-90deg);}
  100%{transform: rotateX(0);}
}