:root {
  --font-base: "Space Mono", monospace;
  --transition: .2s linear;
  --color-dark: #1f1a38;
  --color-dark-glare: #989ea9;
  --color-success: #76f7bf;
  --progress-indicator-color-complete: var(--color-success);
  --progress-indicator-progress-stroke: var(--color-dark);
  --progress-indicator-bg-stroke: var(--color-dark-glare);
}

.progress-indicator {
  font-family: var(--font-base);
  color: var(--color-dark);
  width: var(--progress-indicator-viewbox);
  height: auto;
  line-height: 1.1;
  container-type: inline-size;
}

.progress-indicator__progress-circle {
  stroke: var(--progress-indicator-progress-stroke, currentColor);
  transition: stroke-dashoffset var(--transition);
  transform-origin: 50%;
  transform: rotate(-90deg);
}

.progress-indicator__background-circle {
  stroke: var(--progress-indicator-bg-stroke, grey);
}

.progress-indicator__check {
  width: var(--progress-indicator-check-size, 60cqw);
  height: auto;
  display: none;
}

.progress-indicator__count {
  font-size: var(--progress-indicator-count-size, max(25cqw, 1rem));
  z-index: 1;
}

.progress-indicator__visual {
  grid-template-areas: "stack";
  align-items: center;
  justify-items: center;
  display: grid;
}

.progress-indicator__visual > * {
  grid-area: stack;
}

[data-progress-state="complete"] .progress-indicator__progress-circle {
  fill: var(--progress-indicator-color-complete);
}

[data-progress-state="complete"] .progress-indicator__count {
  display: none;
}

[data-progress-state="complete"] .progress-indicator__check {
  display: revert;
}

.visually-hidden:not(:is(:focus, :active)) {
  clip-path: inset(100%);
  white-space: nowrap;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}