/* The door: the only page a stranger can see. A dark plane, the Beacon light behind it, one glass card. Sentence case, nothing else. */
@font-face { font-family: "Manrope"; src: url("manrope.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #070a14; --ink: #eef3ff; --ink-2: #b3bfdc; --ice: #cfe0ff; --ice-rgb: 207, 224, 255;
  --font: "Manrope", system-ui, "Segoe UI", sans-serif;
  --lift: 0 1px 1px rgba(0,0,0,.28), 0 8px 18px rgba(0,0,0,.32), 0 22px 48px rgba(0,0,0,.34);
  --rim: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.07);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); height: 100%; }
body { margin: 0; min-height: 100%; height: 100%; display: grid; place-items: center; color: var(--ink); font: 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased; overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid #e6f0ff; outline-offset: 3px; }

.deep { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background-color: #070a14;
  background-image: radial-gradient(60vmax 40vmax at 18% 14%, rgba(66, 98, 160, .2), rgba(66, 98, 160, .07) 42%, transparent 72%),
                    radial-gradient(44vmax 42vmax at 88% 38%, rgba(44, 114, 138, .13), rgba(44, 114, 138, .04) 44%, transparent 70%),
                    radial-gradient(76vmax 46vmax at 52% 112%, rgba(84, 86, 150, .12), transparent 70%); }
#world { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.2s ease; }
html[data-world="on"] #world { opacity: 1; }

.glass { position: relative; border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.02) 42%), rgba(12, 18, 36, .46);
  box-shadow: var(--rim), var(--lift); backdrop-filter: blur(16px) saturate(1.25); }

.door { position: relative; z-index: 1; width: min(380px, calc(100vw - 40px)); padding: 34px 28px 30px; border-radius: 24px; text-align: center;
  display: flex; flex-direction: column; align-items: center; }
.mark { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(var(--ice-rgb), .3); border-radius: 50%;
  box-shadow: 0 0 22px rgba(var(--ice-rgb), .14), inset 0 0 16px rgba(var(--ice-rgb), .08); }
.mark svg { width: 28px; fill: none; stroke: var(--ice); stroke-width: 1.1; } .mark circle { fill: var(--ice); stroke: none; }
h1 { margin: 16px 0 2px; font-size: 24px; font-weight: 740; letter-spacing: .01em; }
p { margin: 0 0 24px; color: var(--ink-2); font-size: 15px; }
form { margin: 0; }
.go { height: 46px; padding: 0 28px; border-radius: 999px; border: 1px solid rgba(var(--ice-rgb), .38); background: rgba(var(--ice-rgb), .1);
  color: #fff; font-size: 15px; font-weight: 600; transition: background .2s ease, border-color .2s ease; }
.go:hover { background: rgba(var(--ice-rgb), .18); border-color: rgba(var(--ice-rgb), .55); }
.go:active { background: rgba(var(--ice-rgb), .24); }
@media (prefers-reduced-motion: reduce) { #world { transition: none; } .go { transition: none; } }