.panel {
  max-width: 768px;
}

.loading {
  margin: 0;
  font-size: var(--fs-2);
  line-height: 1.5;
  color: var(--ui-select);
  animation: blink 1s steps(2, jump-none) infinite;
}

@keyframes blink {
  50% {
    opacity: 0.2;
  }
}

.score {
  margin: 0 0 24px;
  font-size: var(--fs-2);
  line-height: 1.5;
}

.number {
  font-size: var(--fs-4);
  line-height: 1;
}

.error {
  margin: 0 0 12px;
  font-size: var(--fs-2);
  line-height: 1.5;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 24px;
}

@media (max-width: 720px) {
  .score,
  .error {
    font-size: var(--fs-1);
    line-height: 2;
  }

  .number {
    font-size: var(--fs-3);
    line-height: 1.333;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading {
    animation: none;
  }
}