/* The public hull: the arrival page and the fallback for phones and browsers without WebGL2. */
body.landed #surface { display: none; }
#fallback {
  position: fixed; inset: 0; overflow: auto; display: grid; align-content: center; justify-items: center; gap: 28px;
  padding: 32px 18px 48px; background: radial-gradient(ellipse at 50% 35%, #0a1622 0%, #03070c 55%, #010204 100%);
  color: #cfe3f0; font: 15px/1.6 "SFMono-Regular", Menlo, Consolas, ui-monospace, monospace;
}
#fallback .tube {
  position: relative; width: min(100%, 880px); aspect-ratio: 1920 / 1098; border-radius: 18px; overflow: hidden;
  background: #000; box-shadow: 0 0 0 1px #1a2a36, 0 0 60px rgba(74, 168, 255, .14), 0 0 140px rgba(255, 70, 150, .07);
}
#fallback video { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.08) contrast(1.04); }
#fallback .tube::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, .45) 100%);
  mix-blend-mode: multiply;
}
#words { width: min(100%, 560px); }
/* No box: the phosphor adds its light onto the page. Unlit phosphor is black, and black adds nothing. */
#words.phosphor { position: relative; height: 220px; overflow: visible; background: transparent; }
#words .phone-shell { position: absolute; inset: 12px; overflow: hidden; }
#words .phone-glass { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; }
#words .xterm { padding: 0; }
#words .xterm .xterm-viewport { overflow: hidden; }
#words.plain { padding: 14px 16px; background: #03090f; border-radius: 14px; box-shadow: 0 0 0 1px #13202a; }
#words.plain p { margin: 0 0 12px; color: #e5eceb; text-shadow: 0 0 6px rgba(143, 201, 255, .25); }
#words.plain .title { color: #ffbe5c; font-weight: 700; text-shadow: 0 0 8px rgba(255, 190, 92, .6); }
#words.plain .sky { color: #8fc9ff; }
#words.plain .prompt { margin: 0; } #words.plain .dir { color: #62dcff; } #words.plain .sign { color: #ffc171; }
#words.plain .ghost { color: rgba(143, 201, 255, .45); }
@keyframes warm { 0% { opacity: 0; filter: blur(3px); } 35% { opacity: .55; } 60% { opacity: .9; filter: blur(0); } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #fallback h1 { animation: none; } }
.noscript { color: #cfe3f0; font: 15px/1.6 monospace; padding: 24px; }