:root {
  --color-text: #222;
  --color-primary: #0078d4;
  --color-primary-hover: #106ebe;
  --color-progress-track: #eaeaea;
  --content-width: 640px;
  --radius: 6px;
}

body {
  max-width: var(--content-width);
  margin: 4rem auto;
  padding: 0 1rem;
  color: var(--color-text);
  font-family: system-ui, sans-serif;
}

.stack > * {
  margin: 0;
}

.stack > * + * {
  margin-top: 1rem;
}

.manual-link a {
  color: var(--color-primary);
  text-decoration: underline;
}

.manual-link a:hover {
  color: var(--color-primary-hover);
}

.manual-link a:focus-visible {
  outline: 3px solid var(--color-primary-hover);
  outline-offset: 2px;
  border-radius: var(--radius);
}

.progress {
  width: 100%;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--color-progress-track);
}

.progress-bar {
  width: 0%;
  height: 100%;
  background: var(--color-primary);
  animation: fill-progress 1500ms linear forwards;
}

@keyframes fill-progress {
  to {
    width: 100%;
  }
}