.startup-screen { display: none; }
html.is-starting .startup-screen,
.launch-preview .startup-screen {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: max(36px, env(safe-area-inset-top)) 24px max(30px, env(safe-area-inset-bottom));
  background: #f8f3e9;
  color: #174c42;
  text-align: center;
  isolation: isolate;
  opacity: 1;
  transition: opacity 400ms ease, visibility 400ms ease;
}
.startup-screen::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: min(800px, 170vw);
  aspect-ratio: 1;
  left: 50%;
  top: 43%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(235, 173, 82, .13), rgba(244, 226, 194, .16) 42%, transparent 69%);
  pointer-events: none;
}
.startup-eyebrow {
  position: absolute;
  top: max(52px, calc(env(safe-area-inset-top) + 30px));
  margin: 0;
  color: #9a7854;
  font: 500 9px/1.8 var(--sans, sans-serif);
  letter-spacing: 3px;
}
.startup-identity { position: relative; margin-top: -44px; animation: startup-arrive 900ms ease both; }
.startup-emblem {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 0 auto 33px;
  display: grid;
  place-items: center;
}
.startup-emblem::before,
.startup-emblem::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(173, 128, 70, .17);
  border-radius: 50%;
}
.startup-emblem::after { inset: -17px; border-color: rgba(173, 128, 70, .075); }
.startup-orbit {
  position: absolute;
  inset: 0;
  animation: startup-orbit 24s linear infinite;
}
.startup-orbit::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d78039;
  box-shadow: 0 0 0 5px #f8f3e9;
}
.startup-logo {
  display: block;
  width: 144px;
  height: 144px;
  object-fit: contain;
  animation: startup-breathe 4s ease-in-out infinite;
}
.startup-wordmark {
  margin: 0;
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(58px, 16vw, 76px);
  font-weight: 400;
  letter-spacing: -4px;
  line-height: 1.1;
}
.startup-tagline {
  max-width: 290px;
  margin: 17px auto 0;
  color: #7b796d;
  font: 400 13px/1.7 var(--sans, sans-serif);
}
.startup-loading { position: absolute; bottom: max(114px, calc(env(safe-area-inset-bottom) + 92px)); }
.startup-dots { display: flex; justify-content: center; gap: 7px; height: 12px; }
.startup-dots i { width: 5px; height: 5px; border-radius: 50%; background: #cb7637; animation: startup-dot 1.5s ease-in-out infinite; }
.startup-dots i:nth-child(2) { animation-delay: 180ms; }
.startup-dots i:nth-child(3) { animation-delay: 360ms; }
.startup-loading p { margin: 10px 0 0; color: #7b796d; font: 400 10px/1.6 var(--sans, sans-serif); letter-spacing: .3px; }
.startup-footer { position: absolute; bottom: max(32px, calc(env(safe-area-inset-bottom) + 22px)); margin: 0; color: #a09a8b; font: 400 10px/1.6 var(--sans, sans-serif); }
html.startup-leaving .startup-screen { opacity: 0; visibility: hidden; }
html.is-starting #app-root { pointer-events: none; }
#app-root { height: 100%; }
@keyframes startup-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes startup-breathe { 0%, 100% { transform: scale(.97); } 50% { transform: scale(1); } }
@keyframes startup-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes startup-orbit { to { transform: rotate(360deg); } }
@media (max-height: 600px) {
  .startup-eyebrow { top: 24px; }
  .startup-identity { margin-top: -35px; }
  .startup-emblem { width: 116px; height: 116px; margin-bottom: 19px; }
  .startup-emblem::after { inset: -11px; }
  .startup-logo { width: 100px; height: 100px; }
  .startup-wordmark { font-size: 54px; }
  .startup-tagline { margin-top: 9px; font-size: 11px; }
  .startup-loading { bottom: 68px; }
  .startup-footer { bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .startup-screen, .startup-identity, .startup-logo, .startup-orbit, .startup-dots i { animation: none !important; transition: none !important; }
}