/* Хромовый отсчёт. Высоту цифр задаёт --cc-h, ширина ячейки постоянная, поэтому вёрстка не прыгает. */
.cc { --cc-h: 96px; --cc-w: calc(var(--cc-h) * .9); --cc-gap: calc(var(--cc-h) * .06); display: inline-flex; align-items: center; gap: calc(var(--cc-h) * .14); line-height: 0; }
.cc-g { display: inline-flex; gap: var(--cc-gap); }
.cc-s { position: relative; display: inline-block; width: var(--cc-w); height: var(--cc-h); overflow: hidden; }
.cc-d { position: absolute; left: 50%; top: 0; height: 100%; width: auto; max-width: none; transform: translate(-50%, 0); transition: transform .38s cubic-bezier(.22, 1, .36, 1), opacity .3s; user-select: none; }
.cc-d.is-in { transform: translate(-50%, 104%); }
.cc-d.is-out { transform: translate(-50%, -104%); opacity: .3; }
.cc-c { position: relative; display: inline-block; width: calc(var(--cc-h) * .34); height: calc(var(--cc-h) * .8); }
.cc-c .cc-d { top: 0; height: 100%; }
@media (prefers-reduced-motion: reduce) { .cc-d { transition: none; } }