:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #040609; color: #eef6fb; }
canvas { display: block; outline: 0; }
.loader, .gate { position: fixed; inset: 0; display: grid; place-items: center; }
.loader { z-index: 20; background: radial-gradient(circle at 50% 42%, #0c526655, transparent 34%), #05080c; transition: opacity .25s; }
.loader.ready { opacity: 0; pointer-events: none; }
.gate { z-index: 30; padding: 24px; background: radial-gradient(circle at 50% 40%, #0f758b33, transparent 38%); }
.gate.hidden { display: none; }
.card { width: min(520px, 100%); padding: 28px; border: 1px solid #2a5360; border-radius: 18px; text-align: center; background: #081017ee; box-shadow: 0 24px 80px #000b; }
.eyebrow { color: #49d5ed; font: 700 11px/1.2 ui-monospace, monospace; letter-spacing: .18em; text-transform: uppercase; }
h1 { margin: 10px 0 8px; font-size: clamp(30px, 7vw, 54px); line-height: .95; }
p { margin: 0 auto 20px; max-width: 42ch; color: #9fb1bd; line-height: 1.5; }
button { border: 0; border-radius: 999px; padding: 13px 22px; color: #021014; background: #55dff4; font: 800 14px/1 system-ui; cursor: pointer; }
button:disabled { opacity: .45; cursor: wait; }
.hint { margin-top: 14px; color: #6f838f; font-size: 12px; }
.mark { font-size: 42px; font-weight: 800; letter-spacing: .08em; }
.mark span { color: #31cde7; }
.track { width: min(320px, 60vw); height: 3px; margin: 22px auto 0; overflow: hidden; border-radius: 9px; background: #202b34; }
.track::after { display: block; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, #55dff4, transparent); content: ''; animation: sweep 1.1s infinite; }
.status { margin-top: 12px; color: #7f929e; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; }
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(350%); } }