:root { color-scheme: dark; --bg:#1a1b26; --ink:#c0caf5; --muted:#7a88b8; --cyan:#7dcfff; --violet:#bb9af7; --pink:#f7768e; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; overflow:hidden; touch-action:manipulation; background:radial-gradient(ellipse at 50% 115%, #34355d 0, #1f2034 36%, var(--bg) 72%); color:var(--ink); font-family:Outfit,sans-serif; }
body.lightning { animation:sky-flash .32s ease-out; }
body::before { content:""; position:fixed; inset:0; background:linear-gradient(90deg, transparent 49.95%, rgba(125,207,255,.07) 50%, transparent 50.05%),linear-gradient(0deg, transparent 49.95%, rgba(187,154,247,.06) 50%, transparent 50.05%); background-size:80px 80px; mask-image:linear-gradient(transparent 10%, #000 100%); }
#rain { position:fixed; inset:0; width:100%; height:100%; opacity:.62; }
.noise { position:fixed; inset:0; pointer-events:none; opacity:.04; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); }
main { position:relative; min-height:100vh; display:grid; place-items:center; padding:36px; }
.hero { text-align:center; transform:translateY(-3vh); animation:rise 1.4s cubic-bezier(.16,1,.3,1) both; }
h1 { font-size:clamp(72px, 17vw, 250px); line-height:.79; margin:0; letter-spacing:-.09em; font-weight:300; text-shadow:0 0 70px rgba(125,207,255,.12); }
h1 span { color:#c0caf5; } h1 strong { color:var(--violet); font-weight:700; text-shadow:0 0 46px rgba(187,154,247,.28); }
.visitors { margin:34px auto 0; color:var(--cyan); font:500 13px 'DM Mono',monospace; letter-spacing:.12em; display:flex; flex-direction:column; gap:8px; }
.visitors span { font-size:28px; letter-spacing:0; color:var(--ink); }
.visitors small { color:var(--muted); font-size:9px; }
@keyframes rise { from { opacity:0; transform:translateY(2vh); filter:blur(9px); } to { opacity:1; transform:translateY(-3vh); filter:none; } }
@keyframes sky-flash { 0% { filter:brightness(1.9); } 28% { filter:brightness(1.25); } 100% { filter:brightness(1); } }
@media(max-width:600px) { main{padding:22px} }
@media(prefers-reduced-motion:reduce) { body.lightning { animation:none; } }