[hidden]{display:none!important}
:root{color-scheme:light;--ink:#263d2f;--paper:#f5f2df;--muted:#496044}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#c6af7b;color:var(--ink);font-family:Arial,Helvetica,sans-serif}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #314c87;outline-offset:5px}button:disabled{cursor:default}#world{position:fixed;inset:0}canvas{display:block;width:100%;height:100%}.paper{position:fixed;inset:0;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.5' d='M0 0h180v180H0z'/%3E%3C/svg%3E") }header{position:fixed;top:42px;left:46px;pointer-events:none}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;display:flex;align-items:center;gap:10px}.mark{font-size:25px;line-height:1}h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(32px,4vw,55px);font-weight:400;letter-spacing:-2px;margin:20px 0 11px}header p{font-size:12px;margin:0;letter-spacing:.35px;opacity:.75}.top-controls{position:fixed;top:43px;right:40px;display:flex;gap:18px;align-items:center}#flight-state{display:flex;gap:8px;align-items:center;font-size:11px}#flight-state i{height:6px;width:6px;border-radius:50%;background:#385a3d}#flight-state[data-mode=loop] i{background:#b75c35}.icon-button{border:1px solid #38503930;border-radius:50%;height:38px;width:38px;background:#f8f4df60;font-size:16px}.icon-button:hover{background:#f8f4dfb0}.telemetry{position:fixed;bottom:42px;left:46px;display:flex;align-items:center;gap:22px}.telemetry>div{display:flex;flex-direction:column;gap:7px}.tiny{font-size:8px;letter-spacing:1.5px;opacity:.7}.telemetry strong{font-size:23px;font-weight:400;font-family:Georgia,serif;font-variant-numeric:tabular-nums}.telemetry small{font:10px Arial,sans-serif}.rule{height:34px;width:1px;background:#34493230}.corner-note{position:fixed;right:42px;bottom:48px;font-size:8px;letter-spacing:1.5px;opacity:.65}.corner-note span{font-size:20px;margin-left:13px}#error{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--paper);padding:30px;max-width:420px;width:90%;border-radius:15px;z-index:10}#error h2{font-family:Georgia,serif;font-weight:400}#error p{font-size:14px;line-height:1.6}#error button{background:var(--ink);color:var(--paper);border:0;border-radius:8px;padding:12px 15px}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:900px){.corner-note{display:none}.telemetry{bottom:135px;left:26px}header{left:26px;top:26px}.top-controls{top:27px;right:24px}}@media(pointer:coarse),(max-width:600px){header{left:22px;top:24px}h1{font-size:35px;letter-spacing:-1.3px;margin-top:14px}.eyebrow{font-size:8px;letter-spacing:1.4px}header p{font-size:10px}.top-controls{top:26px;right:19px}#flight-state{display:none}.telemetry{left:24px;bottom:145px}}
body[data-flight-mode=ground] #flight-state i{background:#af7845}@media(min-width:901px) and (max-width:1150px){.telemetry{bottom:130px}}@media(max-width:900px){.telemetry{bottom:145px}}@media(pointer:coarse),(max-width:600px){.telemetry{bottom:176px;gap:18px}}
@media(max-width:900px){body[data-flight-mode=ground] .telemetry{bottom:165px}}@media(pointer:coarse),(max-width:600px){body[data-flight-mode=ground] .telemetry{bottom:185px}}
@media(max-width:900px){.telemetry{bottom:165px}}@media(pointer:coarse),(max-width:600px){.telemetry{bottom:185px}}
.navigator{position:fixed;top:24px;right:26px;width:184px;text-align:center;pointer-events:none}.radar{width:184px;height:184px;filter:drop-shadow(0 4px 12px #34493216)}.radar svg{width:100%;height:100%}.radar-paper{fill:#f4edd9ed;stroke:#53664d80;stroke-width:1.4}.radar-ring{fill:none;stroke:#52624a25;stroke-width:1}.radar-axis{stroke:#52624a22;stroke-width:1}.marker-halo{fill:#5a8c3f26}#marker-dot{fill:#4f8238;stroke:#f4edd9;stroke-width:2}#map-plane{fill:#263d2f;stroke:none;filter:drop-shadow(0 0 1px #f4edd9)}.map-caption{margin-top:7px;text-shadow:0 1px 8px #f5e5bb}.map-caption>span{font-size:8px;letter-spacing:1.7px;opacity:.7}.map-caption strong{display:block;font:17px Georgia,serif;margin:6px 0}.map-caption p{margin:4px 0;font-size:10px}.map-caption #map-distance{font-variant-numeric:tabular-nums;font-size:12px}.top-controls{right:236px;top:39px}.encounter{position:fixed;left:50%;bottom:115px;transform:translateX(-50%);width:min(430px,calc(100vw - 32px));padding:26px 30px;background:#f7f0df;border:1px solid #fff9e7;border-radius:18px;box-shadow:0 12px 48px #493f2e33;z-index:4}.encounter-eyebrow{font-size:9px;letter-spacing:2px;color:#768068}.encounter h2{font:29px Georgia,serif;margin:12px 0}.encounter p{font-size:13px;line-height:1.7}.encounter-actions:not([hidden]){display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}.encounter button{border:0;border-radius:8px;padding:12px 16px;background:#e9e3cf}.encounter #story-open{background:#344f39;color:#fff9e9}.encounter #story-open span{margin-left:12px}.encounter .encounter-close{position:absolute;top:8px;right:9px;background:transparent;font-size:22px;padding:4px 10px}.encounter a{color:inherit}.encounter #story-resume{margin-top:6px}.encounter #story-window-status{color:#586650;font-size:12px}
@media(max-width:900px){.navigator{right:16px;top:17px;width:150px}.radar{width:150px;height:150px}.top-controls{right:183px;top:26px}#flight-state{display:none}.map-caption strong{font-size:15px}}
@media(max-width:600px){.navigator{right:12px;top:14px;width:112px}.radar{width:112px;height:112px}.map-caption>span{display:none}.map-caption strong{font-size:12px;margin:3px 0}.map-caption p{font-size:9px;line-height:1.4}.top-controls{top:160px;right:48px}header{left:18px;max-width:calc(100vw - 150px)}header h1{font-size:28px;line-height:1.05;letter-spacing:-1px}header p{max-width:170px;line-height:1.5}.encounter{padding:22px;bottom:160px}.encounter h2{font-size:26px}}
.map-caption{background:#f4edd9dd;border:1px solid #f7f1df99;border-radius:12px;padding:8px 5px;margin:4px 0 0;text-shadow:none}@media(max-width:600px){.map-caption{padding:6px 3px}.top-controls{top:211px;right:48px}}
@media(max-width:600px){.top-controls{top:230px}}

.flight-controls {
  position:fixed;
  bottom:34px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  max-width:calc(100% - 32px);
  padding:12px 10px;
  border:1px solid #fcfbea66;
  border-radius:18px;
  background:#f7f4e6df;
  box-shadow:0 6px 30px #31432915;
  backdrop-filter:blur(12px);
  font-size:12px;
  line-height:1.25;
  white-space:nowrap;
}
.control-group {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  gap:7px;
  padding:0 12px;
}
.control-group+.control-group { border-left:1px solid #34493225; }
.flight-controls button { background:transparent; border:0; }
.flight-controls button:disabled { opacity:.55; }
.turn-keys { display:flex; }
.direction-key {
  display:grid;
  place-items:center;
  min-height:32px;
  padding:0 2px;
  border-radius:5px;
  touch-action:none;
  user-select:none;
}
.direction-key:not(:disabled):hover, .direction-key:not(:disabled):active { background:#e2e9d5; }
.control-icon {
  display:block;
  flex:none;
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.icon-definitions { position:absolute; }
.loop-icon { width:38px; }
.action-key.running .loop-icon { animation:spin 2.6s linear infinite; }
@media(prefers-reduced-motion:reduce) { .action-key.running .loop-icon { animation:none; } }
.flight-controls kbd {
  font:inherit;
  border:1px solid #52624a55;
  box-shadow:0 2px 0 #52624a30;
  padding:6px 8px;
  border-radius:5px;
}
.action-key:hover:not(:disabled) kbd { background:#e2e9d5; }
.encounter-actions button:focus {
  outline:2px solid #314c87;
  outline-offset:4px;
}
@media(max-width:900px) {
  .flight-controls { bottom:24px; }
}
@media(pointer:coarse),(max-width:660px) {
  .flight-controls {
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    max-width:calc(100% - 20px);
    bottom:max(16px,env(safe-area-inset-bottom));
    gap:4px 0;
    padding:8px;
  }
  .control-group { grid-column:span 4; padding:0 5px; gap:3px; }
  .control-group:first-child { grid-column:span 3; }
  .control-group:nth-child(3) { grid-column:span 5; }
  .flight-controls .action-key { grid-column:span 6; }
  #throttle-down-label { white-space:normal; }
  .flight-controls #land { border-left:0; }
  .direction-key { min-width:32px; min-height:38px; }
  .encounter { bottom:135px; }
}
@media(max-width:380px) {
  .flight-controls .direction-key { min-width:28px; }
}


#startup {
  position:fixed;
  inset:0;
  z-index:5;
  display:grid;
  align-items:safe center;
  justify-items:center;
  overflow:auto;
  padding:clamp(14px,4vw,40px);
  background:#c6af7b url("./assets/ground-watercolor.jpg") center/cover;
}
#startup[hidden] { display:none; }
.startup-card {
  width:min(100%,460px);
  padding:clamp(22px,5vw,40px);
  border:1px solid #fff8e7;
  border-radius:20px;
  background:#f7f0df;
  box-shadow:0 12px 48px #493f2e33;
}
.startup-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.startup-age {
  padding:4px 7px;
  border:1px solid #53664d80;
  border-radius:5px;
  font-size:12px;
  font-weight:700;
}
.startup-kicker {
  display:flex;
  align-items:center;
  gap:6px;
}
.startup-card h2 {
  font:clamp(26px,10.75vw,54px)/.95 Georgia,serif;
  margin:clamp(35px,8vw,68px) 0 10px;
}
.startup-card p {
  margin:0 0 18px;
  color:#495b45;
  font-size:14px;
  line-height:1.55;
}
.startup-card .startup-eyebrow {
  font:700 11px/1.25 Arial,Helvetica,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.startup-card .startup-tagline { color:var(--ink); margin-bottom:14px; }
.startup-card .progress-setting { border-top:1px solid #34493225; }
#start-flight {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  width:100%;
  margin-top:10px;
  padding:12px 16px;
  border:0;
  border-radius:8px;
  background:#344f39;
  color:#fff9e9;
  font-size:14px;
}
#start-flight:disabled { opacity:.6; }
#start-flight:hover:not(:disabled) { background:#426247; }
@media(max-width:390px) {
  .startup-heading { gap:8px; }
  .startup-card .startup-eyebrow { font-size:10px; letter-spacing:.1em; }
}
