* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { display: grid; place-items: center; background: #07090d; color: #f5f4f6; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
.gate { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 24px; text-align: center; }
.brand { display: flex; align-items: center; gap: 8px; }
.brand svg { width: 40px; height: 38px; color: #ff1764; rotate: -7deg; }
.brand span { display: flex; flex-direction: column; align-items: center; }
.brand b { font-size: 31px; line-height: 1; font-weight: 800; letter-spacing: -.025em; }
.brand small { color: #ff1764; font-size: 10px; line-height: 1.4; font-weight: 750; letter-spacing: 5px; padding-left: 5px; }
.spinner { width: 28px; height: 28px; border: 3px solid #ffffff1f; border-top-color: #ff1764; border-radius: 50%; animation: spin .8s linear infinite; }
#status { margin: 0; max-width: 280px; color: #a0a8b9; font-size: 14px; line-height: 1.5; }
[data-state=error] .spinner { display: none; }
[data-state=error] #status { color: #f5f4f6; }
@keyframes spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }