/* index.html's screen before the app mounts: no JS, no theme yet, so the neutral look. */
.boot {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 1rem;
  font-family: system-ui, sans-serif;
  color: #111827;
  text-align: center;
}
.boot > div {
  grid-area: 1 / 1;
  max-width: 28rem;
}
.boot-wait p,
.boot-gave-up p {
  margin: 0.5rem 0 0;
  color: #4b5563;
}
.boot-spinner {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border: 2px solid #4b5563;
  border-top-color: transparent;
  border-radius: 50%;
  animation: boot-spin 1s linear infinite;
}
.boot-gave-up h1 {
  margin: 0;
  font-size: 1.25rem;
}
.boot-gave-up a {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  margin-top: 1.5rem;
  border-radius: 0.5rem;
  background: #111827;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
/* ponytail: one give-up after 15 s, the client reloads by hand; an auto-reload needs a script. */
.boot-wait {
  animation: boot-hide 0s 15s forwards;
}
.boot-gave-up {
  visibility: hidden;
  animation: boot-show 0s 15s forwards;
}
@keyframes boot-hide {
  to {
    visibility: hidden;
  }
}
@keyframes boot-show {
  to {
    visibility: visible;
  }
}
@keyframes boot-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .boot-spinner {
    animation: none;
  }
}