/* Startup only. Ready UI paints behind this node during its brief completion and fade. */
#boot-splash {
  position: fixed; inset: 0; z-index: 1000; overflow: hidden;
  background: #fff; color: #143d2c;
}
.splash-lockup {
  position: absolute; left: 50%; top: 50%;
  width: min(100vw, 450px); aspect-ratio: 900 / 850;
  transform: translate(-50%, -50%);
}
.splash-art { position: absolute; top: 0; left: 13.3333%; width: 73.3333%; height: auto; overflow: visible; }
.splash-wordmark {
  position: absolute; top: 60%; left: 0; width: 100%; margin: 0;
  font-family: Vazirmatn, Tahoma, sans-serif; font-weight: 400;
  font-size: clamp(20px, 7.111vw, 32px); line-height: 1.8;
  text-align: center; white-space: nowrap; direction: rtl;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #boot-splash { background: #000; color: #f5f5f7; }
}
:root[data-theme="dark"] #boot-splash { background: #000; color: #f5f5f7; }
@media (prefers-reduced-motion: reduce) {
  #boot-splash *:not(.tri-spin) { animation: none !important; transition: none !important; }
}

/* A static settled logo must not be mistaken for a frozen connection. */
.splash-wait { position: absolute; top: calc(50% + 145px); left: 10%; width: 80%; text-align: center; }
.splash-wait[hidden], .splash-retry[hidden] { display: none; }
.splash-status { font: 400 13px/1.8 Vazirmatn, Tahoma, sans-serif; color: inherit; opacity: .72; margin: 0 0 10px; }
.splash-retry { border: 0; background: none; color: inherit; font: 500 13px/1.8 Vazirmatn, Tahoma, sans-serif; text-decoration: underline; padding: 6px 12px; }
@media (max-height: 620px) { .splash-wait { top: calc(50% + 115px); } }

/* Loading mark: the tab-bar triangle, turning. Shared look with the in-app loader. */
.tri-spin { display: block; width: 32px; height: 32px; margin: 0 auto; color: #1fae94; animation: tri-turn 1.1s cubic-bezier(.45,.05,.55,.95) infinite; }
:root[data-theme="dark"] .tri-spin { color: #34d1b2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tri-spin { color: #34d1b2; } }
@keyframes tri-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tri-spin { animation: tri-pulse 1.6s ease-in-out infinite !important; } }
@keyframes tri-pulse { 50% { opacity: .35; } }