:root {
  color-scheme: dark;
  --night: #071627;
  --deep: #102a40;
  --steel: #587991;
  --mist: #a9becb;
  --white: #eaf1f4;
  --copper: #e5996c;
  font-family: "Avenir Next", "Helvetica Neue", "PingFang SC", sans-serif;
  color: var(--white);
  background: var(--night);
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--copper); outline-offset: 6px; }
button:disabled { opacity: .55; cursor: default; }
.skip-link { position: fixed; top: -100px; left: 24px; padding: 14px; z-index: 100; background: var(--white); color: var(--night); }
.skip-link:focus { top: 12px; }
.header { position: absolute; z-index: 20; inset: 0 0 auto; height: 96px; display: flex; align-items: center; gap: 28px; padding: 0 4.4vw; }
.brand { font-size: 27px; letter-spacing: -1.8px; font-weight: 800; }
.brand span { color: var(--copper); }
.header-caption { color: var(--mist); font-size: 13px; padding-left: 28px; border-left: 1px solid #ffffff28; }
.home-link { margin-left: auto; color: var(--mist); font-size: 14px; }
.home-link span { display: inline-block; margin-left: 8px; }
.journey { height: 330svh; position: relative; }
.stage { height: 100svh; min-height: 620px; position: sticky; top: 0; overflow: clip; isolation: isolate; background: radial-gradient(ellipse at 55% 51%, #254257 0, #102a40 23%, var(--night) 68%); }
.intro { position: absolute; z-index: 6; left: 4.4vw; top: max(112px, 15vh); pointer-events: none; }
h1 { font-size: clamp(32px, 3.6vw, 60px); font-weight: 500; letter-spacing: -.055em; line-height: 1.2; margin: 0 0 14px; }
.intro p { font-size: 16px; color: var(--mist); letter-spacing: .08em; margin: 0; }
.scene { position: absolute; inset: 0; perspective: 1200px; pointer-events: none; }
.wordmark { position: absolute; width: 100%; top: 26%; text-align: center; font-size: clamp(80px, 17.7vw, 300px); font-weight: 800; letter-spacing: -.065em; line-height: .9; color: #f1f6fa0d; user-select: none; }
.portal-wrap { position: absolute; left: 50%; top: 53%; width: min(58vw, 980px); height: 47%; transform: translate(-50%, -50%); }
.portal { position: absolute; inset: 0; overflow: hidden; border: 1px solid #7796ad91; border-radius: 4px; background: linear-gradient(160deg, #223e50, #102437 40%, #091b2f 65%, #213d51); box-shadow: 0 0 0 9px #07162744, 0 40px 100px #020d1b90, inset 0 0 60px #071627; }
.portal-glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 66% 48%, #7b99ac60, transparent 60%); }
.depth-frame { position: absolute; inset: 0; border: 1px solid #8cabbe32; border-radius: 4px; }
.depth-frame-one { transform: scale(.78); }
.depth-frame-two { transform: scale(.56); opacity: .7; }
.depth-frame-three { transform: scale(.34); opacity: .4; }
.horizon { position: absolute; top: 70%; left: 0; width: 100%; height: 1px; background: #93bdd638; box-shadow: 0 0 20px 4px #aadfff15; }
.portal-caption { position: absolute; right: 20px; bottom: 15px; font-size: 12px; color: #a9becb90; }
.corner { position: absolute; width: 19px; height: 19px; border-color: var(--mist); border-style: solid; opacity: .8; }
.corner-tl { left: -5px; top: -5px; border-width: 1px 0 0 1px; }
.corner-tr { right: -5px; top: -5px; border-width: 1px 1px 0 0; }
.corner-bl { left: -5px; bottom: -5px; border-width: 0 0 1px 1px; }
.corner-br { right: -5px; bottom: -5px; border-width: 0 1px 1px 0; }
.aircraft-position { position: absolute; z-index: 4; left: 50%; top: 51%; width: min(88vw, 1450px); transform: translate(-50%, -50%); }
.aircraft-motion { transform: translate3d(5vw,-2vh,0) rotate(8deg) scale(.57); transform-origin: 47% 49%; will-change: transform; }
.aircraft { display: block; width: 100%; height: auto; }
.aircraft-selector { position: absolute; z-index: 12; right: 4.4vw; top: max(116px, 15vh); display: flex; gap: 5px; padding: 5px; background: #071627b0; border: 1px solid #a9becb50; border-radius: 40px; }
.aircraft-selector a { font-size: 14px; padding: 10px 17px; border-radius: 30px; }
.aircraft-selector [aria-current="page"] { color: #071627; background: #eaf1f4; }
.aircraft-shadow { position: absolute; z-index: 2; left: 29%; top: 73%; width: 44%; height: 8%; border-radius: 50%; background: #020913; filter: blur(23px); opacity: .48; transform: scale(.6); }
.edge-rule { position: absolute; top: 50%; width: 10vw; height: 1px; background: #63879d36; }
.edge-left { left: 0; }
.edge-right { right: 0; }
.flight-position { position: absolute; z-index: 6; left: 4.4vw; bottom: 18%; }
.phase-count { color: var(--copper); font-size: 14px; font-variant-numeric: tabular-nums; }
.phase-count span { color: var(--steel); margin-left: 6px; }
.phase-label { font-size: 17px; margin: 12px 0 18px; letter-spacing: .04em; }
.phase-track { display: flex; gap: 6px; }
.phase-track i { width: 26px; height: 2px; background: #8fa9bc40; }
.phase-track i:first-child { background: var(--copper); }
.controls { position: absolute; z-index: 10; inset: auto 4.4vw 43px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.scroll-hint { display: flex; align-items: center; gap: 13px; font-size: 14px; color: var(--mist); }
.scroll-icon { width: 28px; height: 40px; border: 1px solid #93acbf50; border-radius: 16px; display: grid; place-items: center; color: var(--white); font-size: 18px; }
.control-buttons { display: flex; gap: 10px; }
.control-buttons button { min-height: 44px; border: 1px solid #91aabd50; border-radius: 50px; background: #091d30aa; color: var(--white); padding: 10px 20px; font-size: 14px; }
.control-buttons button:hover { background: #284456; }
.control-buttons button[aria-pressed="true"] { color: var(--night); background: var(--white); }
#play span { margin-right: 6px; }
.flight-progress { position: absolute; inset: auto 0 0; height: 2px; background: #8fa9bc20; }
.flight-progress > span { display: block; height: 100%; background: var(--copper); transform-origin: left; transform: scaleX(0); }
.arrival { padding: 110px 7vw 0; background: var(--white); color: var(--night); display: grid; grid-template-columns: 1.5fr 1fr; gap: 56px; }
.arrival-heading { display: flex; align-items: flex-start; gap: 28px; }
.arrival-mark { font-size: 48px; line-height: 1; color: #416c85; }
h2 { font-size: clamp(28px, 3.8vw, 58px); line-height: 1.3; font-weight: 500; letter-spacing: -.04em; margin: 0; }
.arrival-detail { padding-top: 4px; }
.arrival-detail p { font-size: 16px; color: #476174; line-height: 1.85; margin: 0 0 26px; }
#replay { border: 0; border-bottom: 1px solid #47617480; color: var(--night); background: none; padding: 10px 0; font-size: 16px; }
#replay span { margin-left: 32px; }
footer { grid-column: 1 / -1; border-top: 1px solid #07162725; min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: #476174; font-size: 13px; }
footer a { font-size: 14px; }
.asset-error { position: absolute; z-index: 15; left: 50%; top: 48%; width: min(80%, 360px); transform: translateX(-50%); padding: 20px; color: var(--white); background: var(--night); border: 1px solid var(--mist); }
.no-script { position: fixed; z-index: 30; bottom: 0; background: var(--night); padding: 12px; margin: 0; }
body.is-static .journey { height: 100svh; min-height: 620px; }
body.is-static .flight-position, body.is-static .flight-progress { visibility: hidden; }
body.is-static .aircraft-motion { will-change: auto; }
@media (max-width: 760px) {
  .header { padding: 0 6vw; height: 80px; gap: 15px; }
  .header-caption { padding-left: 15px; font-size: 12px; }
  .home-link { font-size: 13px; }
  .home-link span { display: none; }
  .stage { min-height: 580px; }
  .intro { top: 122px; left: 6vw; }
  h1 { font-size: clamp(34px, 8.5vw, 56px); }
  .intro p { font-size: 14px; }
  .aircraft-selector { right: 6vw; top: 215px; }
  .aircraft-selector a { padding: 8px 14px; }
  .wordmark { top: 37%; font-size: 21vw; }
  .portal-wrap { width: 74vw; height: 31%; top: 52%; }
  .aircraft-position { width: 126vw; top: 51%; }
  .portal-caption { font-size: 12px; right: 12px; bottom: 12px; }
  .flight-position { left: 6vw; bottom: 22%; }
  .phase-label { font-size: 15px; margin: 8px 0 12px; }
  .controls { inset: auto 6vw 32px; align-items: flex-start; flex-direction: column; gap: 16px; }
  .scroll-hint { font-size: 13px; }
  .scroll-icon { height: 30px; width: 23px; }
  .control-buttons { align-self: flex-end; }
  .control-buttons button { padding: 10px 16px; }
  .arrival { padding: 70px 6vw 0; grid-template-columns: 1fr; gap: 32px; }
  .arrival-mark { font-size: 36px; }
  .arrival-heading { gap: 16px; }
  .arrival-detail { padding-left: 52px; }
  footer { flex-wrap: wrap; padding: 26px 0; gap: 16px; }
  footer span:nth-child(2) { order: 3; width: 100%; font-size: 12px; }
  body.is-static .journey { min-height: 580px; }
}
@media (max-width: 480px) {
  .header-caption { display: none; }
}
@media (max-height: 620px) {
  .stage { min-height: 0; }
  .header { height: 70px; }
  .intro { top: 90px; }
  .aircraft-selector { top: 178px; }
  h1 { font-size: 32px; }
  .portal-wrap { top: 54%; }
  .aircraft-position { top: 54%; width: 65vw; }
  .controls { bottom: 24px; }
  .flight-position { bottom: 21%; }
  body.is-static .journey { min-height: 0; }
}
@media (max-height: 480px) {
  .header { height: 55px; }
  .intro { top: 70px; }
  .aircraft-selector { top: 70px; }
  h1 { font-size: 27px; margin-bottom: 8px; }
  .intro p { font-size: 13px; }
  .controls { flex-direction: row; align-items: center; bottom: 14px; }
  .flight-position { bottom: 28%; }
  .portal-caption { display: none; }
  .scroll-icon { display: none; }
  .hint-text { max-width: 120px; }
}