html, body { margin: 0; width: 100%; height: 100%; background: #176bd1; }
#boot { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 20px; box-sizing: border-box; background: #176bd1; color: #e9fbff; font-family: Arial, sans-serif; text-align: center; transition: opacity .18s ease-out, visibility 0s .18s; }
body[data-ready="true"] #boot { opacity: 0; visibility: hidden; pointer-events: none; }
.boot-cube { position: relative; width: 54px; height: 54px; border: 3px solid #eaffb6; background: #c5ff68; box-shadow: inset -7px -7px 0 #95cf49, 5px 6px 0 #0a4093; transform: rotate(-8deg); }
.boot-cube i { position: absolute; top: 16px; left: 12px; width: 8px; height: 10px; background: #173f45; }
.boot-cube i + i { left: 34px; }.boot-cube b { position: absolute; top: 36px; left: 20px; width: 18px; height: 4px; background: #173f45; }
.boot-title { font-size: 32px; line-height: 1.2; font-weight: 900; color: #d8ff67; text-shadow: 0 3px 0 #104694; letter-spacing: 0; }.boot-title span { color: #fff; }
.boot-track { width: 180px; height: 5px; overflow: hidden; background: #0c4594; border: 1px solid #9cd5ff; border-radius: 2px; }
.boot-track span { display: block; width: 60px; height: 100%; background: #d8ff67; animation: boot-load 1.1s ease-in-out infinite alternate; }
#boot p { margin: -9px 0 0; font-size: 12px; font-weight: 600; color: #c7e6ff; }
#boot small { position: absolute; bottom: max(28px, env(safe-area-inset-bottom)); font-size: 11px; font-weight: 700; color: #b9dcff; }
#boot-retry { padding: 9px 16px; border: 2px solid #e9fbff; border-radius: 4px; background: transparent; color: white; font: inherit; font-size: 12px; cursor: pointer; }
#boot [hidden] { display: none; }
@keyframes boot-load { from { transform: translateX(0); } to { transform: translateX(120px); } }
@media (prefers-reduced-motion: reduce) { #boot { transition: none; }.boot-track span { animation: none; width: 100%; opacity: .6; } }