/* tabular digits so the fast-changing decimals don't shuffle the width */
.percent {
  margin: 0 0 16px;
  font: 600 clamp(2rem, 9vw, 3.6rem)/1 var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* the native progress element, restyled the same in every browser */
.bar {
  width: min(100%, 560px);
  height: 26px;
  appearance: none;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 3px;
  background: var(--glass-strong);
}

.bar::-webkit-progress-bar {
  background: transparent;
}

.bar::-webkit-progress-value {
  border-radius: 999px;
  background: var(--accent-gradient);
}

.bar::-moz-progress-bar {
  border-radius: 999px;
  background: var(--accent-gradient);
}

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
  width: min(100%, 560px);
  margin: 40px 0 0;
  text-align: left;
}

.facts dt {
  color: var(--muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.facts dd {
  margin: 2px 0 0;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 420px) {
  .facts {
    grid-template-columns: 1fr;
  }
}