.boot-screen {
  --splash-logo-size: 160px;
  --text-gap-below-logo: 32px;

  position: fixed;
  inset: 0;
  z-index: 100000;
  background-color: #188698;
  color: #ffffff;
  font-family: "Helvetica Neue", "Segoe UI", helvetica, verdana, sans-serif;
}

.boot-screen[hidden],
.boot-screen-text[hidden],
.boot-screen-detail[hidden] {
  display: none;
}

@media (max-resolution: 1dppx) {
  .boot-screen {
    --splash-logo-size: 144px;
  }
}

@media (min-resolution: 1.51dppx) and (max-resolution: 2dppx) {
  .boot-screen {
    --splash-logo-size: 192px;
  }
}

@media (min-resolution: 3.01dppx) {
  .boot-screen {
    --splash-logo-size: 144px;
  }
}

.boot-screen[data-platform="ios"] {
  --splash-logo-size: calc(max(100vw, 100vh) * 0.3001);
}

.boot-screen-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--splash-logo-size);
  height: var(--splash-logo-size);
  transform: translate(-50%, -50%);
}

.boot-screen-text {
  position: absolute;
  top: calc(50% + var(--splash-logo-size) / 2 + var(--text-gap-below-logo));
  right: calc(24px + env(safe-area-inset-right));
  left: calc(24px + env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.boot-screen-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.boot-screen-detail {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  overflow-wrap: anywhere;
}

.boot-screen-spinner {
  width: 28px;
  height: 28px;
  margin-top: 18px;
  box-sizing: border-box;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: boot-screen-spin 0.9s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .boot-screen-spinner {
    animation-duration: 2.4s;
  }
}

@keyframes boot-screen-spin {
  to {
    transform: rotate(360deg);
  }
}