/* The hidden tester site's own pages (website/beta/proxy.ts): the password page, the "You're in"
   moment, and the closed and not-found pages. The look is variation D, "Neon sign", of
   Demos/beta-site/, chosen by the owner (docs/decisions/beta-site-launch.answers.json). It reuses the
   landing page's sky, stars, neon type and lit call-to-action. Served before the cookie exists, so
   it must never hold anything private. Fonts and the icon come from the site's own files. */
@font-face { font-family: "Manrope"; font-weight: 400 800; font-display: swap; src: url("/fonts/manrope-latin.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 400 700; font-display: swap; src: url("/fonts/dm-sans-latin.woff2") format("woff2"); }
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
:root { --g1: #d2b8ff; --g2: #a77bff; --g3: rgba(167,123,255,.75); --tube: #f5eeff;
  --n-rest: 0 0 1px rgba(255,255,255,.55), 0 0 7px rgba(210,184,255,.5), 0 0 18px rgba(167,123,255,.42), 0 0 42px rgba(167,123,255,.24);
  --n-surge: 0 0 2px #fff, 0 0 10px var(--g1), 0 0 28px var(--g2), 0 0 64px var(--g2), 0 0 130px var(--g3); }
* { box-sizing: border-box; }
html { background: var(--night); height: 100%; }
body { margin: 0; min-height: 100%; color: var(--text); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden;
  background: radial-gradient(ellipse 58% 42% at 50% 0%, var(--sky-glow), transparent 70%),
    linear-gradient(180deg, var(--sky-0) 0%, var(--sky-1) 48%, #1c1a63 78%, #241f70 100%); }
h1, p { margin: 0; }
.sky { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.stars { position: absolute; inset: 0; background: url("/home/stars.svg") 0 0 / 1400px 900px repeat; opacity: .7; }
.stars::after { content: ""; position: absolute; inset: 0; background: url("/home/stars.svg") 520px 330px / 1100px 707px repeat; opacity: .5; animation: twinkle 7s ease-in-out infinite alternate; }
.shooting-star { position: absolute; top: 9%; right: 12%; width: 140px; height: 1.5px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(220,230,255,.35) 40%, rgba(255,255,255,0)); transform: rotate(-32deg); opacity: 0; animation: shoot 11s ease-in 4s infinite; }
.shooting-star::after { content: ""; position: absolute; left: -2px; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px rgba(200,215,255,.9); }
.head { position: relative; z-index: 3; display: flex; align-items: center; height: 92px; width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.wordmark { color: var(--text); text-decoration: none; font: 600 19px/1 var(--display-manrope); letter-spacing: -.01em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.neon-text { font-family: var(--display-manrope); font-weight: var(--display-manrope-weight); letter-spacing: var(--display-manrope-track); color: #fbf7ff; text-shadow: var(--n-rest); text-wrap: balance; }
.muted { color: var(--muted); }
.help { color: var(--dim); font-size: 14px; }
/* The lit field: the landing page's lit call-to-action, holding the password and its arrow chip. */
.lit { position: relative; isolation: isolate; display: flex; align-items: center; gap: 16px; width: min(500px, 100%); padding: 12px 12px 12px 12px; border-radius: 28px;
  color: #fff; background: rgba(14,17,52,.92); backdrop-filter: blur(16px); box-shadow: 0 22px 54px rgba(4,5,28,.55); will-change: transform; transition: transform .25s cubic-bezier(.3,1.4,.5,1); }
.lit::before, .lit::after { content: ""; position: absolute; inset: -1.5px; border-radius: inherit;
  background: conic-gradient(from var(--a), #9db8ff, #c9a2ff 18%, #ffa067 32%, #9db8ff 46%, rgba(157,184,255,.18) 60%, rgba(157,184,255,.18) 88%, #9db8ff); animation: spin 7s linear infinite; }
.lit::before { z-index: -1; padding: 1.5px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.lit::after { z-index: -2; filter: blur(16px); opacity: .55; transition: opacity .3s ease; }
.lit:hover::after, .lit:focus-within::after { opacity: .85; }
.lit .icon { width: 52px; height: 52px; border-radius: 13px; flex: none; }
.lit input { flex: 1; min-width: 0; padding: 0; background: transparent; border: 0; outline: 0; color: #fff; font: 650 19px/1.2 var(--sans); letter-spacing: .02em; }
.lit input::placeholder { color: rgba(228,232,255,.52); font-weight: 500; letter-spacing: 0; }
.go { width: 48px; height: 48px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #10143f; background: #fff; box-shadow: 0 0 16px rgba(160,185,255,.6); }
.go:focus-visible { outline: 2px solid var(--neon-core); outline-offset: 4px; }
/* The field's own lit edge shows focus; a second rectangle would fight it. */
.lit input:focus, .lit input:focus-visible { outline: none; }
.go svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.lit:hover .go svg, .go:focus-visible svg { animation: nudge .9s ease-in-out infinite; }
.say { min-height: 1.6em; font-size: 15px; color: var(--text); }
.say:empty { visibility: hidden; }
/* A wrong password flickers the field like a neon tube that misfires, then it settles. */
.is-wrong .lit { animation: misfire .9s linear; }
.chevron { display: block; overflow: visible; }
.chevron path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.chevron .bloom { stroke: var(--g2); stroke-width: 13; opacity: .5; filter: blur(7px); animation: surge-bloom 4.6s ease-in-out 3s infinite; }
.chevron .tube { stroke: var(--tube); stroke-width: 4; filter: drop-shadow(0 0 2px var(--g1)) drop-shadow(0 0 10px var(--g2)) drop-shadow(0 0 30px var(--g3)); }
.chevron { animation: ignite 2.6s linear .3s both; }
@keyframes spin { to { --a: 360deg; } }
@keyframes nudge { 0%, 100% { transform: translateX(-1px); } 50% { transform: translateX(3px); } }
@keyframes twinkle { from { opacity: .15; } to { opacity: .6; } }
@keyframes shoot { 0%, 92% { opacity: 0; translate: 0 0; } 93% { opacity: 1; } 98% { opacity: 0; translate: -260px 160px; } 100% { opacity: 0; translate: -260px 160px; } }
@keyframes ignite { 0% { opacity: 0; } 6% { opacity: .85; } 8% { opacity: .05; } 14% { opacity: .95; } 16% { opacity: .2; } 22% { opacity: 1; } 25% { opacity: .55; } 31%, 100% { opacity: 1; } }
@keyframes misfire { 0% { opacity: 1; } 12% { opacity: .35; } 18% { opacity: 1; } 30% { opacity: .5; } 36%, 100% { opacity: 1; } }
@keyframes surge-bloom { 0%, 100% { opacity: .5; stroke-width: 13; } 50% { opacity: 1; stroke-width: 26; } }
@keyframes strike { 0% { color: rgba(236,228,255,.05); text-shadow: none; } 8% { color: #fbf7ff; text-shadow: var(--n-surge); } 12% { color: rgba(236,228,255,.08); text-shadow: none; }
  22% { color: #fbf7ff; text-shadow: var(--n-surge); } 26% { color: rgba(246,240,255,.55); text-shadow: none; } 40% { color: #fbf7ff; text-shadow: var(--n-surge); } 100% { color: #fbf7ff; text-shadow: var(--n-rest); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition: none !important; } }

/* ---- the neon sign (variation D, the owner's pick on 26 October 2026) ---- */
main.d { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 70px 20px 60px; }
.d .kicker-cat { color: color-mix(in srgb, var(--tube) 70%, var(--g2)); font: 650 15px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.d h1 { margin-top: 26px; font-size: clamp(56px, 7.5vw, 108px); line-height: .98; }
.d h1 .ln { display: inline-block; animation: strike 1.3s both; }
.d h1 .ln1 { animation-delay: .4s; }
.d h1 .ln2 { animation-delay: 1.5s; }
.d .lit { margin-top: 48px; }
.d .say { margin-top: 18px; }
.d .sub-line { margin-top: 4px; color: var(--muted); font-size: 19px; }
.d .sub-line a { color: var(--text); }
.d .plain { margin-top: 36px; }
/* The "You're in" page: the sign strikes "Come on in." before the home page loads. */
.is-in .d h1 .ln { animation-delay: .2s; }