* {
  box-sizing: border-box
}

html, body {
  height: 100%;
  width: 100%
}

body {
  background: #242424;
  color: #fff;
  font-family: system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  place-items: center;
  place-content: center;
  gap: .5rem;
  margin: 0;
  padding: 1.5rem;
  text-align: center
}

.container {
  display: flex;
  flex-direction: column;
  place-items: center;
  place-content: center;
  gap: 1rem;
  padding: 1rem;
  border: 2px solid #ff6740;
  border-radius: .5rem;
  background: #202020
}

.separator {
  width: 100%;
  border: 1px solid #525252
}

.brand {
  display: flex;
  align-items: end;
  gap: 1rem
}

.logo {
  height: 4rem
}

.wordmark {
  height: 3rem
}

.resultbox {
  display: flex;
  flex-direction: column;
  place-items: center;
  gap: .5rem
}

h1 {
  font-size: 1.5rem;
  font-weight: normal;
  margin: 0
}

p {
  color: #b5b5b5;
  font-size: .95rem;
  margin: 0
}

.spinner {
  width: 2.5rem;
  height: 2.5rem;
  margin: 1rem;
  border: 3px solid rgba(255, 255, 255, .12);
  border-top-color: #ff6740;
  border-radius: 50%;
  animation: spin 600ms linear infinite
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation-duration: 3s
  }
}

.progress {
  width: 16rem;
  max-width: 100%;
  height: .5rem;
  background: #3a3a3a;
  border-radius: .25rem;
  overflow: hidden
}

.progress-fill {
  height: 100%;
  width: 0;
  background: #ff6740;
  transition: width .4s ease-out
}

.progress-text {
  font-size: .85rem;
  font-variant-numeric: tabular-nums
}

.retry {
  margin-top: .5rem;
  padding: .5rem 1.25rem;
  border: 1px solid #ff6740;
  border-radius: .375rem;
  background: transparent;
  color: #ff6740;
  cursor: pointer;
  font: inherit;
  font-weight: bold
}

.retry:hover {
  background: rgba(255, 103, 64, .1)
}

.warning {
  color: #e0a83a;
  max-width: 28rem
}