html, body { height: 100%; margin: 0 }
body { display: grid; place-items: center; background: #0a0a0a; color: #e8eaed; font: 15px/1.5 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif }
.gate { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px; text-align: center }
.mark { width: 64px; height: 64px }
h1 { margin: 4px 0 0; font-size: 22px; font-weight: 700; letter-spacing: .01em; color: #fff }
.wait { display: flex; align-items: center; gap: 10px; margin: 0; color: #a9b1bb }
.dot { width: 14px; height: 14px; border: 2px solid #3a3d42; border-top-color: #e8eaed; border-radius: 50%; animation: spin .8s linear infinite }
.nojs { margin: 0; color: #ff8a7a }
@keyframes spin { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none } }