html, body { margin: 0; min-height: 100%; background: #1b1b1b; }
#splash {
  position: fixed; inset: 0; z-index: 10;
  display: grid; place-items: center; overflow: auto;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  box-sizing: border-box; background: #1b1b1b; color: #e0d6c4;
  font: 16px/1.5 system-ui, sans-serif; text-align: center;
}
.startup-content { max-width: 360px; }
.startup-logo { display: block; margin: 0 auto 24px; object-fit: contain; }
#startup-title { margin: 0 0 12px; font-size: 28px; color: #f4dba9; font-weight: 700; }
#startup-status { margin: 0 0 24px; }
.startup-progress {
  display: inline-block; width: 26px; height: 26px;
  border: 2px solid #5f523a; border-top-color: #ddbb76; border-radius: 50%;
  animation: startup-turn 1.1s linear infinite;
}
#startup-reload {
  display: block; margin: 20px auto 0; min-width: 144px; min-height: 48px;
  padding: 12px 20px; border: 1px solid #ddbb76; border-radius: 12px;
  background: #ddbb76; color: #241a10; font: inherit; font-weight: 600; cursor: pointer;
}
#startup-reload[hidden] { display: none; }
#startup-reload:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
#splash[data-failed] .startup-progress { display: none; }
@keyframes startup-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .startup-progress { animation: none; } }