.launch-countdown {
  width: min(100%, 440px);
  color: #fff8ef;
  font-family: "Manrope UI", Manrope, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}

.countdown-remaining {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.countdown-clock {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .31em;
  font-size: 60px;
  font-weight: 540;
  line-height: 1.12;
  margin-bottom: clamp(16px, 3.5dvh, 30px);
}

.countdown-number { display: flex; }

.countdown-digit {
  display: grid;
  width: .61em;
  height: 1.13em;
  overflow: hidden;
  text-align: center;
  mask-image: linear-gradient(transparent, #000 12%, #000 90%, transparent);
}

.countdown-digit > span { grid-area: 1 / 1; }

.countdown-track {
  width: 168px;
  margin-inline: auto;
  height: 8px;
  padding: 1px;
  border: 1px solid #e8dcff60;
  border-radius: 999px;
  background: linear-gradient(#090713c4, #ccc0eb26);
  box-shadow: inset 0 1px 2px #08061199, 0 1px #e0d6ff19;
}

.countdown-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #b39bff, #ead9ff 38%, #bbecff 73%, #d9fff5);
  box-shadow: inset 0 1px #fff9, 0 0 9px #c2aaff90;
  transform: scaleX(var(--progress));
  transform-origin: left;
  transition: transform 1100ms linear;
}

@media (max-width: 640px), (hover: none) and (max-width: 960px) and (max-height: 480px) {
  .countdown-clock {
    font-size: clamp(22px, 7vw, 30px);
    margin-bottom: 16px;
  }

  .countdown-track {
    width: 104px;
    height: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .countdown-fill { transition: none; }
}