:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: #070a12; color: #e9edf9; font-family: "DM Mono", monospace; overflow-x: hidden; }
#starfield { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; background: radial-gradient(circle at 80% 15%, #18223e 0, #090d19 34%, #070a12 72%); }
main { position: relative; z-index: 1; min-height: 100svh; display: grid; place-items: center; padding: 1.4rem; }
.outpost { width: min(100%, 900px); min-height: min(690px, calc(100svh - 2.8rem)); padding: clamp(1.5rem, 5vw, 4rem); display: flex; flex-direction: column; border: 1px solid rgba(189, 209, 255, .2); background: linear-gradient(135deg, rgba(11,16,30,.72), rgba(5,8,15,.48)); box-shadow: 0 24px 80px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.05); backdrop-filter: blur(7px); }
.topline, footer { color: #92a0bd; font-size: .67rem; letter-spacing: .13em; display: flex; align-items: center; gap: .65rem; }
.coordinates { margin-left: auto; }
.beacon { height: 8px; width: 8px; background: #9cfcbe; box-shadow: 0 0 15px #6dfaa0; border-radius: 50%; animation: pulse 2s infinite; }
.copy { margin: auto 0; }
.eyebrow { color: #b4c0dc; margin: 0 0 1.3rem; font-size: clamp(.67rem, 1.8vw, .79rem); letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 0; color: #f4f7ff; font: 700 clamp(4rem, 15vw, 9.3rem)/.79 "Space Grotesk", sans-serif; letter-spacing: -.085em; }
h1 span:first-child { color: #9cfcbe; text-shadow: 0 0 30px rgba(156,252,190,.18); }
.period { color: #7084ff; }
.lede { width: min(100%, 500px); margin: 2rem 0 0; color: #b4c0dc; font-size: clamp(.8rem, 1.8vw, .96rem); line-height: 1.8; }
.console { border-top: 1px solid rgba(189,209,255,.16); padding-top: 1.25rem; }
button { appearance: none; cursor: pointer; border: 1px solid #9cfcbe; background: #9cfcbe; color: #07100c; padding: .85rem 1rem; font: 500 .72rem "DM Mono", monospace; letter-spacing: .08em; transition: transform .2s, box-shadow .2s, background .2s; }
button:hover, button:focus-visible { transform: translateY(-2px); background: #c1ffd5; box-shadow: 0 7px 22px rgba(156,252,190,.25); }
button:focus-visible { outline: 2px solid #7084ff; outline-offset: 3px; }
.button-icon { font-size: 1rem; margin-right: .4rem; }
#status { min-height: 1.3em; margin: .85rem 0 0; color: #8998b9; font-size: .7rem; letter-spacing: .035em; }
footer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgba(189,209,255,.1); justify-content: space-between; }
@keyframes pulse { 50% { opacity: .45; box-shadow: 0 0 5px #6dfaa0; } }
@media (max-width: 520px) { .outpost { min-height: calc(100svh - 2.8rem); } .coordinates { display: none; } h1 { font-size: clamp(4rem, 19vw, 6.5rem); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }