html, body, #root {
  margin: 0;
  min-height: 100%;
  background: #09090b;
  color: #f4f2f0;
}

body { font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

.animase-startup {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 24px;
  background: #09090b;
  color: #f4f2f0;
  text-align: center;
}
.startup-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 850; letter-spacing: -.055em; line-height: 1; }
.startup-brand img { width: 32px; height: 32px; object-fit: contain; }
.startup-brand .brand-stop { color: #e46c73; }
.startup-status { margin: 22px 0 12px; color: #99999f; font-size: 12px; }
.startup-progress { width: 160px; height: 2px; margin: auto; overflow: hidden; background: #28282e; }
.startup-progress::after { content: ''; display: block; width: 45%; height: 100%; background: #b63840; animation: startup-progress 1.4s ease-in-out infinite; }
.startup-retry { display: none; max-width: 320px; margin: 20px auto 0; color: #99999f; font-size: 13px; line-height: 1.6; }
.startup-retry a { color: #e46c73; text-decoration: underline; }
.animase-boot-failed .startup-retry { display: block; }
.animase-boot-failed .startup-status, .animase-boot-failed .startup-progress { display: none; }

/* Without JavaScript, public route content remains immediately readable. */
#animase-initial-content:not(:empty) + .animase-startup { display: none; }
.animase-booting #animase-initial-content { display: none; }
.animase-booting #animase-initial-content + .animase-startup { display: grid; }

@keyframes startup-progress { from { transform: translateX(-110%); } to { transform: translateX(330%); } }
@media (prefers-reduced-motion: reduce) { .startup-progress::after { animation: none; width: 100%; opacity: .65; } }