@font-face { font-family: Flight Mono; src: local("Consolas"), local("Menlo"); font-display: swap; } /* taste-skill-ignore: the brief explicitly requires ASCII and monospace. */
:root { color-scheme: dark; --ground: #08090a; --ink: #e1e3db; --muted: #8c9289; --accent: #ff986c; --gutter: clamp(22px, 3.5vw, 56px); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 14px/1.5 "Flight Mono", "Courier New", monospace; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 1px solid var(--accent); outline-offset: 8px; }
::selection { background: var(--accent); color: var(--ground); }
header { position: fixed; top: 28px; left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; align-items: start; gap: 24px; z-index: 3; }
h1 { font-size: 24px; font-weight: 400; letter-spacing: -.06em; line-height: 1; margin: 0; }
.identity p { color: var(--muted); font-size: 12px; margin: 13px 0 0; }
.cursor { color: var(--accent); animation: cursor 1.9s steps(1) infinite; }
.contact { font-size: 13px; padding: 2px 0 12px; transition: color 150ms ease; }
.contact:hover { color: var(--accent); }
#space, #landing { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#landing { z-index: 3; }
.planet { position: fixed; left: 0; top: 0; height: auto; pointer-events: none; z-index: 1; will-change: transform, opacity; }
.earth { width: min(50vw, 82svh); opacity: .5; }
.pluto { width: min(72vw, 105svh); opacity: 0; }
.surface { position: fixed; bottom: 0; left: 0; width: 100%; height: 50svh; object-fit: cover; pointer-events: none; opacity: 0; z-index: 2; }
.ship-position { position: fixed; left: 0; top: 0; width: min(84vw, 1240px, 112svh); pointer-events: none; transform: translate3d(56vw, 48svh, 0) translate(-50%, -50%) scale(.9); will-change: transform; z-index: 4; }
.ship-idle { position: relative; animation: drift 10s ease-in-out infinite; }
.ship-hull { display: block; width: 100%; height: auto; }
.ship-occlusion { position: absolute; inset: 0; width: 100%; height: 100%; }
.ship-hull { position: relative; }
.engine-system { position: absolute; inset: 0; opacity: var(--thrust, .65); }
#ship-fx { position: absolute; left: -20%; top: 0; width: 120%; height: 120%; }
.ship-light { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: .65; }
.engine-port { animation: port-thrust 1.3s linear infinite; }
.engine-starboard { animation: starboard-thrust 1.7s linear infinite; }
.hull-lights { animation: navigation-lights 4.8s linear infinite; }
.flight-track { height: 640svh; }
.story { position: fixed; left: var(--gutter); bottom: 90px; z-index: 6; width: min(345px, calc(100vw - 44px)); }
.story h2 { margin: 0 0 9px; font-size: clamp(22px, 2.3vw, 34px); font-weight: 400; letter-spacing: -.045em; }
.story p { margin: 0; color: #c0c3b8; font-size: 14px; line-height: 1.7; text-wrap: pretty; }
.story h2, .story p { text-shadow: 0 1px 2px var(--ground), 0 0 5px var(--ground); } /* taste-skill-ignore: neutral lettering protection on the real cinematic caption overlay. */
header, footer { z-index: 7; }
.is-landed .ship-idle { animation: none; }
footer { position: fixed; bottom: 20px; left: var(--gutter); right: var(--gutter); display: flex; justify-content: center; align-items: center; min-height: 44px; z-index: 3; font-size: 12px; color: var(--muted); }
footer button { position: absolute; right: 0; top: 0; min-height: 44px; min-width: 44px; border: 0; padding: 4px 0 4px 12px; font: inherit; color: var(--muted); background: none; cursor: pointer; }
footer a:hover, footer button:hover { color: var(--ink); }
.is-paused .ship-idle, .is-paused .ship-light, .is-paused .cursor, .is-hidden .ship-idle, .is-hidden .ship-light, .is-hidden .cursor { animation-play-state: paused; }
@keyframes cursor { 50% { opacity: 0; } }
@keyframes drift { 0%,100% { transform: translateY(0) rotate(-.2deg); } 50% { transform: translateY(-5px) rotate(.2deg); } }
/* Localized engine-core contrast, accompanied by character exhaust and sparks. */
@keyframes port-thrust { 0%,100% { opacity: .82; } 14% { opacity: 1; } 28% { opacity: .22; } 38% { opacity: .94; } 57% { opacity: .45; } 72% { opacity: 1; } 86% { opacity: .28; } }
@keyframes starboard-thrust { 0%,100% { opacity: 1; } 19% { opacity: .3; } 34% { opacity: .94; } 51% { opacity: .48; } 67% { opacity: 1; } 85% { opacity: .25; } }
@keyframes navigation-lights { 0%,36%,100% { opacity: .13; } 40%,47% { opacity: .9; } 52%,74% { opacity: .35; } 79%,85% { opacity: .76; } }
@media (max-width: 600px) {
  header { top: 24px; }
  h1 { font-size: 22px; }
  .identity p { font-size: 11px; max-width: 205px; line-height: 1.8; margin-top: 10px; }
  .contact { font-size: 11px; white-space: nowrap; }
  .ship-position { width: 96vw; }
  .earth { width: 85vw; }
  .pluto { width: 115vw; }
  .story { bottom: 95px; width: min(290px, calc(100vw - 44px)); }
  .story p { font-size: 13px; }
  footer { bottom: 20px; font-size: 10px; }
}
@media (max-width: 360px) { .identity p { max-width: 170px; } header { gap: 12px; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body:not(.motion-enabled) .ship-idle, body:not(.motion-enabled) .ship-light, body:not(.motion-enabled) .cursor { animation: none; }
  .ship-position { will-change: auto; }
}