:root { color-scheme: dark; --ink:#f4f0e8; --blue:#061a29; --sea:#0b78ac; --red:#e72128; --gold:#f3bf18; }
* { box-sizing:border-box; }
body { margin:0; min-height:100svh; background:var(--blue); color:var(--ink); font-family:ui-rounded, "Avenir Next", system-ui, sans-serif; }
main { min-height:100svh; padding:clamp(24px, 7vw, 56px); background:radial-gradient(circle at 95% 8%, #087bb2 0 1px, transparent 2px) 0 0/18px 18px, linear-gradient(156deg,#062235 0%,#061a29 53%,#06131f 100%); }
.masthead { display:flex; gap:12px; align-items:center; animation:rise .45s ease-out both; }
.signal { width:42px; height:42px; display:grid; place-items:center; border:3px solid var(--gold); border-radius:50%; color:var(--gold); font-weight:900; letter-spacing:-1px; }
.masthead p,.eyebrow { margin:0; color:var(--gold); font-size:11px; font-weight:800; letter-spacing:.16em; }
.workspace { max-width:460px; margin:clamp(64px, 14vh, 126px) auto 0; animation:rise .55s .08s ease-out both; }
.hidden { display:none; }
h1 { margin:12px 0 16px; font-size:clamp(42px, 12vw, 62px); line-height:.93; letter-spacing:-.06em; }
.intro { margin:0 0 32px; color:#bfd4df; line-height:1.5; max-width:34ch; }
label { display:block; margin:18px 0 7px; color:#b7d3df; font-size:13px; font-weight:700; }
input { width:100%; appearance:none; border:0; border-bottom:1px solid #547181; padding:12px 0; border-radius:0; background:transparent; color:var(--ink); font:600 20px/1.1 inherit; outline:none; }
input:focus { border-color:var(--gold); }
button { width:100%; margin-top:28px; border:0; padding:16px 18px; border-radius:2px; background:var(--red); color:white; font:800 15px/1 inherit; letter-spacing:.03em; cursor:pointer; transition:transform .2s, filter .2s; }
button:active { transform:scale(.98); }
button.secondary { background:transparent; border:1px solid #6f98aa; color:var(--ink); }
.coordinates { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.coordinates label { margin-top:0; }
.divider { margin:28px 0; text-align:center; color:#7fa0ae; font-size:12px; }
.notice { min-height:1.3em; margin-top:18px; color:#f5c13e; line-height:1.4; }
output { display:block; margin:24px 0; padding:18px 8px; border-top:1px solid #5b7988; border-bottom:1px solid #5b7988; color:var(--gold); font:800 clamp(25px,8vw,38px)/1.1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.07em; text-align:center; }
.fine-print { color:#8bacba; font-size:12px; line-height:1.45; }
@keyframes rise { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@media (max-width:360px) { main { padding:22px; } .coordinates { grid-template-columns:1fr; gap:0; } }