/* Render the chosen background before the application JavaScript and CSS arrive. */
html { background: #f3f0e8; color-scheme: light; }
html[data-theme="dark"] { background: #151719; color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) { background: #151719; color-scheme: dark; }
}
body { margin: 0; }
.startup-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 1000; overflow: hidden; background: rgb(100 212 138 / 0.15); pointer-events: none; }
.startup-progress span { display: block; width: 35%; height: 100%; background: linear-gradient(90deg, #64d48a, #ff8c45, #55a9ff); transform: translateX(-100%); animation: startup-progress 1.2s ease-in-out infinite; }
@keyframes startup-progress { to { transform: translateX(386%); } }
.startup-logo { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; gap: 9px; pointer-events: none; }
.startup-logo i { width: 14px; height: 14px; border-radius: 50%; background: #64d48a; animation: startup-dot 1.2s ease-in-out infinite; }
.startup-logo i:nth-child(2) { background: #ff8c45; animation-delay: 0.15s; }
.startup-logo i:nth-child(3) { background: #55a9ff; animation-delay: 0.3s; }
@keyframes startup-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.6; } 30% { transform: translateY(-7px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .startup-progress span { width: 100%; transform: none; animation: none; }
  .startup-logo i { animation: none; opacity: 1; }
}