.stats { gap: 28px; }
.stats strong { font-variant-numeric: tabular-nums; }
.stats .score-stat strong { color: var(--accent); }
.run-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
  margin: 24px 0 0;
}
.run-summary > div { min-width: 0; }
.run-summary dt { color: var(--muted); font-size: .875rem; }
.run-summary dd {
  margin: 3px 0 0;
  font: 600 32px 'Barlow Condensed', Impact, sans-serif;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.run-summary .summary-score { grid-column: 1 / -1; border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.summary-score dd { color: var(--accent); font-size: 52px; }
@media (max-width: 1000px) and (min-width: 701px) {
  .stats { gap: 20px; }
  .stats strong { font-size: 38px; }
}
@media (max-width: 700px) {
  .stats { width: 24%; display: flex; flex-direction: column; gap: 9px; }
  .stats > div, .stats > div:last-child { display: flex; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 4px; }
  .stats .score-stat { flex-direction: column; align-items: flex-end; gap: 3px; padding-bottom: 5px; }
  .stats .eyebrow { font-size: .75rem; letter-spacing: 0; }
  .stats strong { font-size: 20px; }
  .stats .score-stat strong { font-size: 30px; }
  #complete-dialog { padding: 26px; max-height: 90dvh; overflow-y: auto; }
  #complete-dialog h2 { margin: 14px 0; }
  .run-summary { gap: 12px 20px; margin-top: 18px; }
}