:root { --navy: #071b33; --cyan: #34d6ff; --lime: #c7f000; --muted: #b9cada; }
* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; height: 100%; margin: 0; }
body { display: grid; place-items: center; overflow: hidden; color: white; background: radial-gradient(circle at 50% 35%, #164a75 0, var(--navy) 58%); font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
main { width: min(900px, 90vw); padding: clamp(30px, 6vmin, 70px); border: 1px solid rgba(255,255,255,.15); border-radius: 2.2vmin; background: rgba(4,20,39,.72); box-shadow: 0 4vmin 12vmin rgba(0,0,0,.3); text-align: center; }
main > img { width: clamp(80px, 12vmin, 150px); aspect-ratio: 1; border-radius: 50%; }
.eyebrow { margin: 2.5vh 0 1vh; color: var(--lime); font-size: clamp(12px, 1.7vmin, 24px); font-weight: 900; letter-spacing: .15em; }
h1 { max-width: 720px; margin: 0 auto 3vh; font-size: clamp(28px, 4.8vmin, 68px); line-height: 1.04; }
.connection-code { display: block; color: white; font-size: clamp(70px, 16vmin, 220px); font-variant-numeric: tabular-nums; line-height: .9; letter-spacing: .06em; }
.connection-code span { color: var(--lime); }
.connection-help { max-width: 680px; margin: 3.5vh auto 2.5vh; color: var(--muted); font-size: clamp(15px, 2vmin, 28px); line-height: 1.5; }
.connection-help b { color: white; font-variant-numeric: tabular-nums; }
.connection-status { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--cyan); font-size: clamp(13px, 1.5vmin, 21px); font-weight: 800; text-transform: uppercase; }
.connection-status i { width: 10px; height: 10px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 7px rgba(199,240,0,.1); animation: pulse 1.5s infinite; }
.connection-stopped .connection-status { color: #f4c56b; }
.connection-stopped .connection-status i { background: #f4c56b; animation: none; }
main > a { min-height: 48px; padding: 0 22px; display: inline-flex; align-items: center; border-radius: 8px; color: var(--navy); background: var(--lime); font-weight: 850; text-decoration: none; }
@keyframes pulse { 50% { opacity: .45; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }