@font-face { font-family: Tanker; src: url('assets/Tanker-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
:root { color-scheme: dark; --space:#050505; --panel:#191919; --ink:#f0efec; --muted:#afafaa; --faint:#93938f; --path:#e54840; --display:Tanker,Impact,'Arial Narrow',sans-serif; font-family:Arial,Helvetica,sans-serif; color:var(--ink); background:var(--space); font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; -webkit-font-smoothing:antialiased; }
button,input,select { font:inherit; }
button,a,input,select,summary { -webkit-tap-highlight-color:transparent; }
button { color:inherit; cursor:pointer; border:0; background:none; padding:0; min-height:44px; }
button:hover,a:hover { color:#fff; }
button:disabled { cursor:default; color:var(--faint); }
a { color:inherit; text-decoration:none; }
button:focus-visible,a:focus-visible,canvas:focus-visible,summary:focus-visible { outline:2px solid var(--path); outline-offset:4px; }
input:focus-visible,select:focus-visible { outline:2px solid var(--path); outline-offset:2px; }
svg { fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
p,h1,h2,h3,dl,dd { margin:0; }
h1,h2,h3 { font-weight:400; }
select,input { color:var(--ink); background:var(--panel); border:0; border-radius:4px; padding:10px 12px; min-width:0; max-width:100%; min-height:44px; }
select { cursor:pointer; }
input { border:1px solid #5d5d5a; }
input[type=checkbox] { width:20px; height:20px; min-height:0; accent-color:var(--ink); flex-shrink:0; }
input[type=range] { padding:0; }
::selection { background:var(--path); color:white; }
[hidden] { display:none!important; }
dd,time,input,.compare-value { font-variant-numeric:tabular-nums; }
#app { max-width:1480px; margin:auto; padding-inline:40px; }
.masthead { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; position:sticky; top:0; z-index:5; background:var(--space); }
.wordmark { display:flex; align-items:center; }
.curse-logo { width:122px; height:38px; stroke:none; }
.masthead nav { display:flex; align-items:center; gap:28px; font-size:14px; color:var(--muted); }
.masthead #open-share { display:flex; align-items:center; gap:8px; color:var(--ink); }
.heading-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:24px; padding-block:14px 26px; }
.intro h1 { font-family:var(--display); font-size:clamp(48px,5.5vw,76px); line-height:1.1; letter-spacing:.015em; }
.intro p { color:var(--muted); font-size:14px; line-height:1.6; margin-top:8px; }
.intro em { font-style:normal; color:var(--ink); }
.clock-block { text-align:end; font-size:12px; color:var(--muted); flex-shrink:0; }
.clock-block > span:first-child { display:block; color:var(--ink); margin-bottom:8px; font-size:13px; }
.clock-zone { margin-inline-start:5px; }
.snapshot { display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:32px; padding-block:0 30px; }
.stat dt { font-size:14px; color:var(--muted); margin-bottom:8px; }
.stat dd { display:flex; align-items:baseline; flex-wrap:wrap; column-gap:10px; }
.stat-value { font-family:var(--display); font-size:53px; line-height:1.1; letter-spacing:.025em; }
.stat-unit { color:#dddcd8; font-size:15px; white-space:nowrap; }
.stat p { color:var(--faint); font-size:12px; margin-top:7px; line-height:1.5; }
.workspace { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:40px; }
.map-column { min-width:0; scroll-margin-top:88px; }
.map-toolbar { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.view-switch { display:flex; gap:4px; }
.view-switch button { color:var(--muted); font-size:14px; padding-inline:16px; border-radius:4px; }
.view-switch button[aria-pressed=true] { background:#272727; color:var(--ink); }
.view-switch button:hover { color:#fff; background:#1c1c1c; }
.takeoff-replay { justify-self:center; min-height:48px; padding-inline:20px; border-radius:3px; background:#b53d36; color:#fff; font-size:14px; letter-spacing:.01em; white-space:nowrap; }
.takeoff-replay:hover { background:#c74740; color:#fff; }
.settings-button { font-size:13px; color:var(--muted); padding-inline:8px; }
.map-area { position:relative; height:clamp(310px,calc(100svh - 495px),530px); isolation:isolate; overflow:hidden; }
.map-area canvas { position:absolute; inset:0; display:block; width:100%; height:100%; touch-action:pan-y pinch-zoom; cursor:grab; }
.map-area canvas:active { cursor:grabbing; }
.asher-marker { position:absolute; z-index:2; display:flex; flex-direction:column; align-items:center; left:50%; top:50%; width:110px; transform:translate(-50%,-50%); min-height:0; }
.face-tumble { display:block; width:var(--head-size, 70px); height:var(--head-size, 70px); transform:rotate(-12deg); }
.face-sprite { display:block; width:100%; height:100%; background-image:url('assets/asher-expressions.png'); background-size:300% 100%; background-repeat:no-repeat; background-position:50% 0; }
.is-tumbling .face-tumble { animation:space-tumble 28s linear infinite; }
.is-tumbling .face-sprite { animation:asher-expressions 5.4s steps(1,end) infinite; }
.marker-label { position:absolute; top:calc(var(--head-size, 70px) + 5px); color:var(--ink); font-size:13px; white-space:nowrap; line-height:1.5; text-shadow:0 1px 2px var(--space); }
.marker-label span { display:block; color:var(--ink); font-size:11px; }
.marker-label span:empty { display:none; }
.asher-marker.compact .face-tumble,.asher-marker.compact .face-sprite { animation:none; }
.asher-marker.offscreen .marker-label { max-width:160px; white-space:normal; }
.asher-marker.offscreen[data-edge="right"] .marker-label { transform:translateX(-60%); text-align:right; }
.asher-marker.offscreen[data-edge="left"] .marker-label { transform:translateX(55%); text-align:left; }
.takeoff-scene { position:absolute; z-index:5; inset:0; overflow:hidden; isolation:isolate; background:transparent; }
.takeoff-still { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 42%; opacity:0; transform:scale(1.12); transition:opacity .32s ease; }
.takeoff-scene.scene-arrived { background:#050505; }
.takeoff-scene.scene-arrived .takeoff-still { opacity:1; }
.takeoff-scene::after { content:''; position:absolute; z-index:1; inset:0; pointer-events:none; opacity:0; background:linear-gradient(180deg,rgba(5,5,5,.2) 0%,transparent 32%,transparent 56%,rgba(5,5,5,.88) 100%); transition:opacity .32s ease; }
.takeoff-scene.scene-arrived::after { opacity:1; }
.takeoff-face { position:absolute; z-index:2; left:18%; top:23%; display:block; width:clamp(56px,8vw,92px); height:auto; max-height:34%; object-fit:contain; opacity:0; transform:translate(-50%,-50%); transition:opacity .18s ease; }
.takeoff-scene.scene-arrived .takeoff-face { opacity:1; }
.takeoff-scene.is-launching .takeoff-face { animation:asher-liftoff 3.65s cubic-bezier(.48,.03,.83,.47) forwards; }
.takeoff-scene.reduced-motion .takeoff-face { left:76%; top:9%; width:66px; transform:translate(-50%,-50%); }
.takeoff-copy { position:absolute; z-index:3; left:clamp(16px,4vw,36px); bottom:clamp(18px,5vh,32px); max-width:min(520px,calc(100% - 32px)); text-shadow:0 2px 8px #000; }
.takeoff-copy h2 { font-family:var(--display); font-size:clamp(25px,4vw,42px); letter-spacing:.02em; line-height:1.1; }
.takeoff-copy p { margin-top:6px; color:#e3e0d8; font-size:clamp(12px,1.5vw,14px); line-height:1.45; }
.takeoff-skip { position:absolute; z-index:4; top:8px; right:10px; min-height:44px; padding-inline:10px; color:#fff; font-size:13px; text-shadow:0 1px 3px #000; }
.takeoff-skip:hover { color:#ded6c9; }
.map-tools { position:absolute; z-index:3; inset-inline-end:0; bottom:8px; display:flex; gap:4px; }
.map-tools button { width:42px; min-height:42px; display:grid; place-items:center; font-size:24px; color:#deded8; background:#151515; border-radius:4px; }
.map-tools button:hover { background:#303030; }
.map-caption { position:absolute; z-index:1; bottom:18px; inset-inline-start:0; display:flex; gap:8px; align-items:center; font-size:12px; color:var(--muted); pointer-events:none; }
.path-key { width:19px; height:2px; border-radius:2px; background:var(--path); flex-shrink:0; }
.map-help { margin-inline-start:18px; color:var(--faint); font-size:11px; }
.scale-indicator { position:absolute; bottom:65px; right:3px; color:var(--muted); text-align:center; font-size:11px; pointer-events:none; }
.scale-indicator:before { content:''; display:block; background:#858580; height:2px; border-radius:2px; margin-bottom:5px; }
.map-tooltip { position:absolute; z-index:4; padding:10px 12px; background:#30302e; font-size:13px; border-radius:4px; pointer-events:none; max-width:calc(100% - 16px); }
.timeline { padding-top:8px; }
.transport { display:flex; align-items:center; gap:20px; }
#replay { display:flex; align-items:center; justify-content:center; gap:9px; padding-inline:18px; background:var(--ink); color:#111; border-radius:4px; font-size:14px; min-width:100px; }
#replay:hover { background:#fff; }
#replay svg { fill:currentColor; stroke:none; width:13px; }
.selected-date { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:13px; }
.selected-date input { border:0; font-size:13px; padding-inline:10px; background:#151515; }
#go-live { margin-inline-start:auto; padding-inline:8px; color:var(--ink); font-size:14px; white-space:nowrap; }
#go-live[aria-pressed=true] { color:var(--muted); }
.scrubber { margin-top:8px; }
#time-slider { display:block; width:100%; height:28px; min-height:28px; margin:0; background:transparent; border:0; appearance:none; cursor:pointer; --progress:0%; }
#time-slider::-webkit-slider-runnable-track { height:4px; background:linear-gradient(to right,var(--path) var(--progress),#3d3d3b var(--progress)); border-radius:3px; }
#time-slider::-moz-range-track { height:4px; background:#3d3d3b; border-radius:3px; }
#time-slider::-moz-range-progress { background:var(--path); height:4px; border-radius:3px; }
#time-slider::-webkit-slider-thumb { appearance:none; height:16px; width:16px; background:var(--ink); border:0; border-radius:50%; margin-top:-6px; }
#time-slider::-moz-range-thumb { height:16px; width:16px; background:var(--ink); border:0; border-radius:50%; }
.timeline-ticks { position:relative; height:18px; color:var(--faint); font-size:10px; pointer-events:none; }
.timeline-ticks span { position:absolute; transform:translateX(-50%); top:0; }
.timeline-bottom { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; font-size:12px; }
.timeline-bottom > button { text-align:start; line-height:1.6; padding-block:5px; }
.timeline-bottom > button:last-child { text-align:end; }
.timeline-bottom > button span { display:block; font-size:11px; color:var(--faint); }
.playback-setting { display:flex; align-items:center; gap:8px; color:var(--faint); font-size:11px; }
.playback-setting select { padding:5px; color:var(--muted); background:none; font-size:12px; }
.flight-panel { min-width:0; }
.comparison > label { display:block; font-size:15px; margin-bottom:12px; }
.comparison select { width:100%; font-size:16px; min-height:46px; }
.compare-caption { color:var(--muted); font-size:13px; margin-top:24px; }
.compare-value { margin-top:7px; font-family:var(--display); font-size:34px; letter-spacing:.02em; }
.compare-value span { font-family:Arial,Helvetica,sans-serif; font-size:13px; color:var(--muted); }
#comparison-note { font-size:12px; color:var(--faint); margin-top:6px; line-height:1.6; }
.show-object { width:100%; margin-top:18px; display:flex; align-items:center; justify-content:center; gap:9px; background:#272727; border-radius:4px; font-size:14px; }
.show-object:hover { background:#353535; }
.browse-objects { font-size:13px; color:var(--muted); margin-top:3px; }
.position-summary { margin-top:25px; }
.position-summary h2 { font-size:14px; color:var(--muted); }
.position-summary p { margin-top:8px; font-size:16px; line-height:1.5; }
.position-summary .position-context { font-size:11px; color:var(--faint); margin-top:6px; }
.measurements { margin-top:18px; font-size:13px; }
summary { cursor:pointer; min-height:44px; align-content:center; line-height:1.5; color:var(--muted); }
summary:hover { color:white; }
.measurements dl { display:grid; gap:18px; padding-block:12px; }
.measurements dt { font-size:12px; color:var(--faint); margin-bottom:5px; }
.measurements dd { font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.measurements p { color:var(--faint); line-height:1.7; margin-top:15px; font-size:12px; }
.footnote { display:flex; justify-content:space-between; gap:20px; padding-block:23px 18px; color:var(--faint); font-size:12px; line-height:1.6; }
.footnote p button { font-size:inherit; color:var(--muted); min-height:32px; margin-inline-start:5px; }
.footnote > p:last-child { align-self:center; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.no-script { position:fixed; inset:25% 10%; background:var(--panel); padding:32px; z-index:5; font-size:20px; }
dialog { width:min(680px,calc(100vw - 32px)); max-height:90svh; background:#171717; color:var(--ink); border:0; border-radius:6px; padding:28px 30px; overscroll-behavior:contain; }
dialog::backdrop { background:#000d; }
.dialog-header { display:flex; align-items:center; justify-content:space-between; gap:20px; position:sticky; top:0; z-index:3; background:#171717; }
.dialog-header h2 { font-family:var(--display); font-size:36px; letter-spacing:.02em; }
.dialog-header button { width:44px; font-size:28px; color:var(--muted); flex-shrink:0; }
.dialog-tabs { display:flex; flex-wrap:wrap; gap:4px 12px; padding-block:14px 20px; font-size:13px; color:var(--faint); }
.dialog-tabs button { padding-inline:10px; border-radius:4px; }
.dialog-tabs button[aria-pressed=true] { background:#303030; color:var(--ink); }
.dialog-content > p { font-size:15px; line-height:1.7; color:#c4c4bc; margin-bottom:16px; }
.control-note { color:var(--muted); font-size:13px; line-height:1.7; grid-column:1/-1; }
.catalog-scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; text-align:start; }
th { color:var(--muted); font-weight:400; white-space:nowrap; padding-block:12px; padding-inline:8px; }
td { padding:5px 8px; font-variant-numeric:tabular-nums; }
th:not(:first-child),td:not(:first-child) { text-align:end; white-space:nowrap; }
td button { text-align:start; min-height:40px; }
tbody tr:nth-child(2n) { background:#222; }
.catalog-scroll + p { margin-top:20px; }
#share-dialog { width:min(530px,calc(100vw - 32px)); }
#share-canvas { display:block; width:100%; height:auto; margin-top:16px; border-radius:3px; }
.share-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px 20px; padding-top:18px; }
#save-image,#native-share { display:flex; align-items:center; padding-inline:16px; min-height:44px; background:var(--ink); color:#151515; font-size:14px; border-radius:4px; }
.share-actions:has(#native-share:not([hidden])) #save-image { background:none; color:var(--ink); padding-inline:0; }
#copy-share { font-size:14px; }
#share-status { color:var(--muted); font-size:12px; min-height:18px; margin-top:12px; }
#share-text { width:100%; min-height:100px; margin-top:10px; font:inherit; font-size:13px; padding:10px; color:var(--ink); background:#252525; }
@keyframes space-tumble { from { transform:rotate(-12deg); } to { transform:rotate(348deg); } }
@keyframes asher-expressions { 0%,100% { background-position:50% 0; } 34% { background-position:0 0; } 67% { background-position:100% 0; } }
@keyframes asher-liftoff {
  0% { transform:translate(-50%,-50%) rotate(-5deg) scale(.72); }
  13% { transform:translate(-50%,-50%) rotate(3deg) scale(1.06); }
  72% { transform:translate(18vw,-6vh) rotate(390deg) scale(.62); }
  100% { transform:translate(42vw,-88vh) rotate(720deg) scale(.16); }
}
@media (max-width:1100px) {
  #app { padding-inline:28px; }
  .workspace { gap:28px; grid-template-columns:minmax(0,1fr) 225px; }
  .map-help { display:none; }
  .map-toolbar { gap:8px; }
  .view-switch button { padding-inline:12px; font-size:13px; }
  .settings-button { font-size:12px; }
  .transport { gap:12px; }
  .selected-date { gap:6px; }
  .selected-date input { width:132px; }
  .playback-setting { display:block; text-align:center; }
  .playback-setting select { display:block; padding:0; min-height:28px; }
}
@media (max-width:900px) {
  .workspace { grid-template-columns:minmax(0,1fr); gap:36px; }
  .flight-panel { display:grid; grid-template-columns:1fr 1fr; gap:24px 40px; }
  .comparison { grid-row:1/3; }
  .position-summary { margin:0; padding-top:4px; }
  .measurements { margin:0; }
  .map-area { height:390px; }
  .map-help { display:inline; }
  .clock-block { font-size:11px; }
  .snapshot { gap:20px; }
  .stat-value { font-size:46px; }
  .stat-unit { font-size:13px; }
}
@media (max-width:580px) {
  #app { padding-inline:20px; }
  .masthead { min-height:66px; gap:16px; }
  .curse-logo { width:107px; height:34px; }
  .masthead nav { gap:20px; font-size:13px; }
  .heading-row { display:block; padding-block:16px 22px; }
  .intro h1 { font-size:clamp(44px,11.5vw,64px); }
  .intro p { font-size:13px; margin-top:8px; }
  .takeoff-replay { justify-self:start; margin-top:14px; padding-inline:18px; }
  .clock-block { margin-top:12px; text-align:start; display:flex; align-items:center; flex-wrap:wrap; gap:5px; font-size:11px; }
  .clock-block > span:first-child { margin:0 auto 0 0; font-size:12px; }
  .clock-zone { margin:0; }
  .snapshot { grid-template-columns:1fr 1fr; gap:20px 18px; padding-bottom:22px; }
  .stat dt { font-size:12px; margin-bottom:7px; }
  .stat dd { column-gap:8px; }
  .stat:not(.elapsed-stat) dd { flex-direction:column; align-items:flex-start; row-gap:4px; }
  .stat-value { font-size:42px; }
  .stat-unit { font-size:12px; }
  .stat p { font-size:11px; margin-top:5px; }
  .elapsed-stat { grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:baseline; column-gap:10px; color:var(--muted); }
  .elapsed-stat dt { margin:0; font-size:12px; }
  .elapsed-stat .stat-value { font:inherit; font-size:13px; letter-spacing:0; color:var(--ink); }
  .elapsed-stat dd { gap:4px; }
  .elapsed-stat p { margin:0; font-size:11px; }
  .map-toolbar { gap:5px; flex-wrap:wrap; justify-content:flex-start; }
  .view-switch { gap:2px; }
  .view-switch button { padding-inline:11px; font-size:13px; }
  .takeoff-replay { padding-inline:4px; font-size:12px; }
  .settings-button { margin-inline-start:auto; padding-inline:4px; font-size:12px; }
  .map-area { height:340px; }
  .marker-label { font-size:12px; }
  .map-help { display:none; }
  .map-caption { font-size:11px; }
  .map-tools button { width:40px; min-height:40px; }
  .transport { gap:10px; flex-wrap:wrap; }
  #replay { min-width:86px; padding-inline:12px; font-size:13px; }
  #go-live { font-size:13px; padding-inline:0; }
  .selected-date { font-size:12px; gap:6px; }
  .selected-date input { width:128px; font-size:12px; padding-inline:8px; }
  .timeline-bottom { font-size:11px; }
  .timeline-bottom > button span { font-size:10px; }
  .timeline-ticks { font-size:10px; }
  .playback-setting { font-size:10px; }
  .playback-setting select { font-size:11px; }
  .flight-panel { grid-template-columns:1fr; gap:25px; }
  .comparison { grid-row:auto; }
  .comparison select { font-size:17px; }
  .position-summary p { font-size:16px; }
  .measurements { margin-top:-9px; }
  .footnote { display:block; padding-block:28px; font-size:11px; }
  .footnote > p:last-child { margin-top:7px; }
  dialog { padding:20px; width:calc(100vw - 24px); }
  .dialog-header h2 { font-size:32px; }
  .dialog-tabs { gap:4px; font-size:12px; padding-block:10px 18px; }
  .dialog-tabs button { padding-inline:8px; }
  table { font-size:12px; }
  th,td { padding-inline:6px; }
}
@media (max-width:360px) {
  #app { padding-inline:16px; }
  .masthead nav { gap:14px; font-size:12px; }
  .intro h1 { font-size:44px; }
  .stat-value { font-size:39px; }
  .stat-unit { font-size:11px; }
  .elapsed-stat p { display:none; }
  .map-toolbar { gap:3px; }
  .view-switch { gap:0; }
  .view-switch button { font-size:11px; padding-inline:4px; }
  .takeoff-replay { font-size:11px; padding-inline:0; }
  .settings-button { font-size:11px; padding-inline:0; }
  .selected-date > span { display:none; }
  .selected-date input { width:124px; }
  .transport { gap:8px; }
  .map-area { height:320px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }