html, body { background: #fff; }
#startup {
  position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center;
  padding: 24px; box-sizing: border-box; background: #fff; color: #101b3f;
  font-family: Arial, sans-serif; text-align: center;
  transition: opacity 240ms ease;
}
#startup.startup-ready { opacity: 0; pointer-events: none; }
.startup-brand { width: min(100%, 300px); }
.startup-brand img { object-fit: contain; animation: startup-breathe 2s ease-in-out infinite; }
.startup-name { margin-top: 12px; font-size: 28px; font-weight: 700; letter-spacing: -.7px; }
.startup-track { width: 100px; height: 3px; margin: 28px auto 20px; background: #edf1f5; overflow: hidden; border-radius: 4px; }
.startup-track span { display: block; width: 40%; height: 100%; background: #b9f227; border-radius: inherit; animation: startup-progress 1.4s ease-in-out infinite; }
#startup-message { font-size: 14px; line-height: 1.5; color: #65718a; }
#startup-retry { min-height: 44px; padding: 10px 18px; border: 0; border-radius: 12px; background: #b9f227; color: #101b3f; font: inherit; cursor: pointer; }
@keyframes startup-breathe { 50% { transform: scale(.96); opacity: .75; } }
@keyframes startup-progress { from { transform: translateX(-100%); } to { transform: translateX(350%); } }
@media (prefers-reduced-motion: reduce) {
  .startup-brand img, .startup-track span { animation: none; }
  #startup { transition: none; }
}