:root { color-scheme: dark; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; background: #020805; color: #d4f4de; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
#rain, .shade, .scanlines { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#rain { opacity: .65; }
.shade { background: radial-gradient(ellipse at 50% 45%, rgba(2,8,5,.78) 0%, rgba(2,8,5,.36) 55%, rgba(2,8,5,.8) 100%), linear-gradient(0deg,#020805 0%,transparent 28%,transparent 80%,#020805 100%); }
.scanlines { opacity: .12; background: repeating-linear-gradient(0deg,transparent,transparent 3px,#000 3px,#000 4px); }
.shell { position: relative; min-height: 100svh; display: flex; flex-direction: column; padding: 0 5vw; }
header { min-height: 100px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #55ff9222; }
.brand { display: inline-flex; align-items: center; gap: 14px; font-size: 14px; letter-spacing: .14em; color: #dbffe7; text-decoration: none; }
.mark { display: grid; place-items: center; width: 30px; height: 34px; border: 1px solid #64fa95; color: #64fa95; font-weight: 700; }
.signal { display: flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .08em; color: #8bba99; }
.signal > span { width: 6px; height: 6px; background: #64fa95; border-radius: 50%; box-shadow: 0 0 12px #64fa95; }
main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 75px 0 85px; }
.eyebrow { margin: 0 0 30px; color: #85eba2; font-size: 14px; letter-spacing: .24em; }
.eyebrow > span { color: #578264; padding: 0 10px; }
h1 { position: relative; margin: 0; font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif; font-size: clamp(2.8rem,9.3vw,9rem); font-weight: 900; line-height: 1.05; letter-spacing: -.065em; white-space: nowrap; color: #deffe6; text-shadow: 0 0 45px #5aff8120; }
h1 > span:first-child { color: #6bff9b; }
.cursor { position: absolute; right: -.5em; bottom: .05em; font-size: .5em; color: #6bff9b; animation: blink 1.3s steps(1) infinite; }
.message { margin: 28px 0 0; font-family: system-ui,sans-serif; font-weight: 300; font-size: clamp(1rem,2.2vw,1.4rem); letter-spacing: .25em; color: #b4d5bf; }
.divider { display: flex; gap: 16px; align-items: center; margin: 32px 0 24px; font-size: 14px; color: #74ca8d; }
.divider > span { width: 48px; height: 1px; background: #5cd98244; }
.invitation { margin: 0; font-size: 14px; letter-spacing: .12em; color: #8bba99; }
.controls { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 44px; }
button { display: inline-flex; gap: 12px; align-items: center; padding: 13px 20px; border: 1px solid #67d48c55; background: #07190fb8; color: #c7ebd1; font: 14px system-ui,sans-serif; cursor: pointer; transition: background .2s,border-color .2s; }
button:hover { background: #113f26d9; border-color: #74ef9c; }
button:focus-visible, a:focus-visible { outline: 2px solid #8effb2; outline-offset: 5px; }
.button-icon { color: #74ef9c; font-size: 17px; min-width: 18px; }
button[hidden] { display: none; }
footer { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: 20px; padding: 24px 0; border-top: 1px solid #55ff9222; font-size: 12px; letter-spacing: .09em; color: #85a690; }
.keyboard { color: #8dad96; letter-spacing: .04em; }
.keyboard > span { padding: 0 8px; color: #446f50; }
.footer-dot { color: #6bff9b; }
.fallback { color: #b4d5bf; font: 14px system-ui,sans-serif; }
@keyframes blink { 50% { opacity: 0; } }
@media (max-width: 650px) { .shell { padding: 0 7vw; } header { min-height: 80px; } .signal { font-size: 12px; } .signal { max-width: 130px; line-height: 1.6; } .brand { gap: 9px; font-size: 12px; } main { padding: 70px 0; } h1 { font-size: clamp(2.5rem,10vw,4rem); } .eyebrow { font-size: 12px; letter-spacing: .13em; } .message { letter-spacing: .12em; } footer { justify-content: center; text-align: center; } .keyboard { display: none; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } button { transition: none; } }