/* First paint before JavaScript is ready. React replaces this entire placeholder. */
body:has(.sbs-boot) { margin: 0; }
.sbs-boot { box-sizing: border-box; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; color: var(--sbs-primary); background: var(--sbs-bg); font-family: system-ui, sans-serif; }
.sbs-boot__mark { width: 112px; height: 112px; display: grid; place-items: center; border-radius: 34px; background: var(--sbs-surface); border: 1px solid var(--sbs-border); box-shadow: var(--sbs-shadow); animation: sbs-boot-breathe 2.2s ease-in-out infinite; }
.sbs-boot__mark img { width: 58px; height: 68px; object-fit: contain; }
.sbs-boot strong { font-size: 24px; line-height: 1.2; letter-spacing: .16em; }
.sbs-boot__progress { width: 116px; height: 3px; overflow: hidden; border-radius: 4px; background: var(--sbs-skeleton); }
.sbs-boot__progress::after { content: ''; display: block; width: 45%; height: 100%; background: var(--sbs-primary); animation: sbs-boot-progress 1.6s ease-in-out infinite alternate; }
@keyframes sbs-boot-breathe { 0%, 100% { transform: scale(.96); } 50% { transform: scale(1.03); } }
@keyframes sbs-boot-progress { from { transform: translateX(-20%); } to { transform: translateX(145%); } }
@media (prefers-reduced-motion: reduce) { .sbs-boot__mark, .sbs-boot__progress::after { animation: none; } }