/* From Uiverse.io by Carlos-vargs, pink-bat-84 (MIT).
   Authored split surfaces and rotateX flip, sized for the online-time metric. */
.metric-online.has-online-flip > strong { display: none; }
.desk .metric-online { container-type: inline-size; position: relative; display: flex; align-items: center; justify-content: center; padding: 17px 14px; }
.desk .metric-online .metric-icon, .desk .metric-online .metric-foot { display: none; }
.desk .metric-online .metric-label { position: absolute; top: 16px; left: 14px; right: 14px; display: block; margin: 0; padding: 0; text-align: center; color: #eaf2fa; font-size: .94rem; font-weight: 650; letter-spacing: .04em; line-height: 20px; }
.online-flip {
  --digit-count: 6;
  --digit-width: min(46px, calc((100cqw - 40px) / var(--digit-count)));
  --digit-height: calc(var(--digit-width) * 1.42857);
  --digit-font: calc(var(--digit-width) * 1.0357);
  display: flex; align-items: center; justify-content: center; gap: 3px;
  width: 100%; margin: 0;
  font-family: Inter, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
.online-flip__digit {
  position: relative; display: inline-block; flex: none;
  width: var(--digit-width); height: var(--digit-height);
  perspective: 1000px; border-top: 1px solid #393939;
  border-radius: 5px; box-shadow: 0 3px 10px #111;
  font-size: var(--digit-font); font-weight: 500; letter-spacing: 0;
}
.online-flip__digit::before, .online-flip__digit::after,
.online-flip__flap::before, .online-flip__flap::after {
  position: absolute; left: 0; width: 100%; height: 50%;
  display: block; overflow: hidden; text-align: center;
  color: #eee; text-shadow: 0 1px 2px #333;
  backface-visibility: hidden; box-sizing: border-box;
}
.online-flip__digit::before, .online-flip__flap::before {
  content: attr(data-current); top: 0; line-height: 1.38;
  background: #181818; border-radius: 5px 5px 0 0;
  box-shadow: inset 0 15px 50px #111;
  border-bottom: 1px solid #000;
}
.online-flip__digit::after, .online-flip__flap::after {
  content: attr(data-bottom); bottom: 0; line-height: 0;
  height: calc(50% - 1px); background: #2a2a2a;
  border-bottom: 1px solid #444; border-top: 1px solid #000;
  border-radius: 0 0 5px 5px; box-shadow: inset 0 15px 50px #202020;
}
.online-flip__flap {
  position: absolute; inset: 0; z-index: 2;
  border-radius: 5px; transform-style: preserve-3d;
  animation: online-digit-flip .6s ease-in forwards;
}
.online-flip__flap::before { content: attr(data-num); }
.online-flip__flap::after {
  content: attr(data-num-next); top: 0; bottom: auto;
  transform: rotateX(180deg);
}
.online-flip__separator { flex: 0 0 8px; color: #a4b9c9; font-size: 24px; line-height: 1; text-align: center; }
@keyframes online-digit-flip { from { transform: rotateX(0); } to { transform: rotateX(-180deg); } }
@media (prefers-reduced-motion:reduce) { .online-flip__flap { animation: none; } }