.flip-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  vertical-align: baseline;
}

.flip-char {
  display: inline-block;
}

.flip-unit {
  position: relative;
  display: inline-block;
  width: 0.62em;
  height: 1.05em;
  margin-inline: 0.03em;
  perspective: 420px;
  font-style: normal;
}

.flip-unit-top,
.flip-unit-bottom,
.flip-unit-flip-top,
.flip-unit-flip-bottom {
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  background: var(--flip-bg, color-mix(in oklch, var(--fg, #111) 7%, var(--bg, #fff)));
  color: inherit;
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--fg, #111) 8%, transparent);
}

.flip-unit-top,
.flip-unit-flip-top {
  top: 0;
  height: 50%;
  line-height: 1.05em;
  border-radius: 3px 3px 0 0;
  border-bottom: 1px solid color-mix(in oklch, var(--fg, #111) 14%, transparent);
}

.flip-unit-bottom,
.flip-unit-flip-bottom {
  bottom: 0;
  height: 50%;
  line-height: 1.05em;
  border-radius: 0 0 3px 3px;
}

.flip-unit-bottom .flip-unit-num,
.flip-unit-flip-bottom .flip-unit-num {
  display: block;
  transform: translateY(-50%);
}

.flip-unit-flip {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
}

.flip-unit.flipping .flip-unit-flip {
  opacity: 1;
}

.flip-unit-flip-top {
  transform-origin: bottom center;
  backface-visibility: hidden;
}

.flip-unit-flip-bottom {
  top: 50%;
  transform-origin: top center;
  transform: rotateX(180deg);
  backface-visibility: hidden;
}

.flip-unit.flipping .flip-unit-flip {
  animation: flipDown 0.22s ease-in forwards;
}

@keyframes flipDown {
  0% { transform: rotateX(0deg); }
  100% { transform: rotateX(-180deg); }
}

@media (prefers-reduced-motion: reduce) {
  .flip-unit.flipping .flip-unit-flip {
    animation: none;
  }
}