:root { --night:#02080f; --ocean:#03121d; --land:#112a31; --coast:#24535c; --cable:#1e7181; --route:#ffd76a; --observed:#79f2d2; --text:#edf9f7; --muted:#91aaa9; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html,body { margin:0; min-height:100%; background:var(--night); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body { overflow:hidden; }
main { height:100vh; min-height:620px; padding:18px; }
.earth { position:relative; width:100%; height:100%; min-height:584px; overflow:hidden; border:1px solid rgba(121,242,210,.14); border-radius:26px; background:radial-gradient(circle at 50% 45%,#0b2c3b 0,#04131e 56%,#01050a 100%); box-shadow:inset 0 0 90px rgba(0,0,0,.72); }
.earth::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(1,5,10,.42),transparent 25%,transparent 68%,rgba(1,5,10,.75)); }
#earth-canvas,#route-map { position:absolute; inset:0; width:100%; height:100%; }
#earth-canvas { opacity:.96; }
#route-map { z-index:2; }
header { position:absolute; z-index:4; top:34px; left:40px; }
.eyebrow { margin:0 0 9px; color:var(--observed); font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.18em; }
h1 { margin:0; font-size:clamp(34px,5vw,64px); line-height:.92; letter-spacing:-.055em; }
h1 b { font:inherit; }
h1 span { color:var(--route); font-weight:400; }
.headline-time { margin:12px 0 0; color:var(--muted); font-size:13px; }
.headline-time b { margin-right:5px; color:var(--text); font-size:19px; }
.map-key { position:absolute; z-index:4; top:42px; right:38px; display:grid; gap:9px; color:var(--muted); font-size:11px; }
.map-key span { display:flex; align-items:center; gap:8px; }
.map-key b { font-weight:500; }
.map-key i { display:inline-block; width:23px; height:2px; }
.key-cable { background:var(--cable); }.key-point { position:relative; background:transparent; }.key-point::after { content:""; position:absolute; left:8px; top:-4px; width:7px; height:7px; border:2px solid var(--observed); border-radius:50%; }
#replay { position:absolute; z-index:5; left:40px; bottom:40px; display:flex; align-items:center; gap:10px; border:1px solid rgba(121,242,210,.35); border-radius:999px; padding:12px 18px; background:rgba(3,18,29,.72); color:var(--text); backdrop-filter:blur(12px); cursor:pointer; font:700 13px/1 inherit; }
#replay:hover { border-color:var(--observed); background:rgba(12,48,57,.88); }.play { color:var(--route); font-size:10px; }
.utility { position:absolute; z-index:7; top:38px; right:38px; display:flex; gap:7px; }
.utility button { border:1px solid rgba(145,170,169,.2); border-radius:999px; padding:8px 11px; background:rgba(3,18,29,.54); color:var(--muted); cursor:pointer; font:600 10px/1 inherit; backdrop-filter:blur(10px); }
.utility button:hover { border-color:rgba(121,242,210,.5); color:var(--text); }
#mobile-location { display:none; }
.map-key { top:82px; }
#journey-caption { position:absolute; z-index:4; left:190px; bottom:46px; color:var(--text); font-size:14px; }
.source-note { position:absolute; z-index:4; right:38px; bottom:42px; color:#607a7a; font:500 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; text-transform:uppercase; letter-spacing:.08em; }
#unknown-detail { position:absolute; z-index:5; top:140px; right:38px; display:flex; align-items:center; gap:6px; border:0; background:transparent; color:rgba(255,227,154,.64); cursor:pointer; font:600 10px/1 inherit; text-shadow:0 1px 12px #000; }
#unknown-detail span { width:19px; height:19px; display:grid; place-items:center; border:1px dashed rgba(255,227,154,.58); border-radius:50%; }
#detail-card { position:absolute; z-index:6; top:174px; right:38px; width:min(320px,48vw); padding:17px 18px; border:1px solid rgba(255,215,106,.28); border-radius:12px; background:rgba(3,13,20,.9); backdrop-filter:blur(15px); box-shadow:0 16px 55px rgba(0,0,0,.45); }
.detail-kicker { margin:0 0 7px; color:var(--route); font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.16em; }
#detail-card h2 { margin:0 0 7px; font-size:17px; } #detail-card p:last-child { margin:0; color:var(--muted); font-size:12px; line-height:1.6; }
#reveal { position:absolute; z-index:5; right:38px; bottom:80px; width:310px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; overflow:hidden; border:1px solid rgba(255,215,106,.28); border-radius:12px; background:rgba(3,13,20,.8); backdrop-filter:blur(15px); box-shadow:0 16px 55px rgba(0,0,0,.38); animation:reveal-in .55s ease both; }
#reveal div { padding:14px 11px; background:rgba(11,35,43,.74); }
#reveal span { display:block; margin-bottom:7px; color:var(--muted); font:700 9px/1 ui-monospace,monospace; letter-spacing:.09em; }
#reveal strong { display:block; font-size:16px; letter-spacing:-.03em; }
#reveal .route-reveal { grid-column:1/-1; margin:0; padding:14px 10px; color:var(--route); text-align:center; }
#reveal .route-reveal span { margin:0; color:var(--route); font:800 15px/1.2 ui-monospace,monospace; letter-spacing:.07em; text-shadow:0 0 22px rgba(255,215,106,.28); }
dialog { width:min(760px,calc(100vw - 38px)); max-height:min(88vh,760px); overflow:auto; padding:28px; border:1px solid rgba(121,242,210,.24); border-radius:18px; background:rgba(2,12,19,.96); color:var(--text); box-shadow:0 30px 100px rgba(0,0,0,.75); backdrop-filter:blur(20px); }
dialog::backdrop { background:rgba(0,5,9,.72); backdrop-filter:blur(3px); }
dialog h2 { margin:0 44px 22px 0; font-size:24px; letter-spacing:-.03em; }
.dialog-close { position:absolute; top:16px; right:17px; width:34px; height:34px; border:1px solid rgba(145,170,169,.25); border-radius:50%; background:transparent; color:var(--muted); cursor:pointer; font-size:21px; }
.evidence-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; overflow:hidden; border:1px solid rgba(145,170,169,.14); border-radius:11px; background:rgba(145,170,169,.14); }
.evidence-grid section { padding:16px; background:#071822; }
.evidence-grid h3,.method strong { display:block; margin:0 0 9px; color:var(--observed); font:700 10px/1 ui-monospace,monospace; letter-spacing:.12em; }
.evidence-grid section:nth-child(2) h3 { color:var(--route); }.evidence-grid section:nth-child(3) h3 { color:#bac5c5; }
.evidence-grid p,.method { margin:0; color:var(--muted); font-size:12px; line-height:1.6; }
.method { display:grid; grid-template-columns:80px 1fr; gap:12px; margin-top:18px; }.method strong{margin-top:4px}.method span{display:block}
@keyframes reveal-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.route-glow { fill:none; stroke:var(--route); stroke-width:20; opacity:0; filter:url(#soft); transition:opacity .5s; }
.route-unknown { fill:none; stroke:#ffe39a; stroke-width:26; stroke-dasharray:2 18; stroke-linecap:round; opacity:0; transition:opacity .5s; }
.journey-complete .route-glow { opacity:.15; }.journey-complete .route-unknown { opacity:.11; }
.journey-running .route-glow,.journey-running .route-unknown { opacity:0; transition:none; }
.route-progress { fill:none; stroke:#fff4b3; stroke-width:4; stroke-linecap:round; filter:url(#glow); stroke-dasharray:1; stroke-dashoffset:1; }
.route-point .outer { fill:rgba(3,18,29,.7); stroke:var(--observed); stroke-width:2; stroke-dasharray:3 3; }
.route-point .inner { fill:var(--observed); filter:url(#glow); }
.route-label { pointer-events:none; }
.route-label text { fill:var(--text); font:700 16px/1 ui-sans-serif,system-ui; paint-order:stroke; stroke:#03121d; stroke-width:5px; }
.route-label .sub { fill:var(--muted); font:500 11.5px/1 ui-monospace,monospace; }
.route-label .label-leader { stroke:rgba(121,242,210,.5); stroke-width:1; }
.route-label.intermediate { opacity:0; transition:opacity .45s; }.route-label.intermediate.visible { opacity:1; }
.route-point.progressive { opacity:0; }.route-point.progressive.visible { opacity:1; }
.pulse { fill:var(--route); filter:url(#glow); opacity:0; }
@media(max-width:760px) { body{overflow:hidden}main{height:100svh;min-height:620px;padding:0}.earth{border:0;border-radius:0;min-height:620px}#earth-canvas,#route-map{transform:scale(1);transform-origin:50% 46%}header{top:24px;left:12px;right:8px}.eyebrow{font-size:9px;margin-bottom:8px}h1{white-space:nowrap;font-size:clamp(19px,5.3vw,22px);line-height:1;letter-spacing:-.06em}.utility{top:90px;left:12px;right:auto}.utility button{font-size:9px;padding:7px 10px}.map-key{top:auto;right:auto;left:20px;bottom:99px;display:flex;gap:13px}.map-key span{gap:5px;font-size:9px}.map-key i{width:16px}#replay{left:20px;bottom:25px;padding:11px 15px}#journey-caption{left:168px;right:15px;bottom:32px;font-size:11px;line-height:1.35}.source-note{display:none}#unknown-detail{display:none}#detail-card{left:7%;right:auto;top:45%;width:86%}#reveal{right:14px;bottom:142px;width:calc(100% - 28px)}#reveal div{padding:11px 8px}#reveal span{font-size:8px}#reveal strong{font-size:14px}#reveal .route-reveal{padding:11px 7px}#reveal .route-reveal span{font-size:14px;letter-spacing:.03em}dialog{padding:24px 19px}dialog h2{font-size:21px}.evidence-grid{grid-template-columns:1fr}.evidence-grid section{padding:12px 14px}.method{grid-template-columns:1fr;gap:2px}.method strong{margin-bottom:2px}}
@media(max-width:760px){#earth-canvas,#route-map{transform:scale(1.3)}}
@media(max-width:760px){
  .eyebrow{font-size:11px;line-height:1.2}
  .utility button{font-size:12px;padding:9px 12px}
  #mobile-location{position:absolute;z-index:6;top:151px;left:20px;display:grid;grid-template-columns:minmax(0,1fr);width:min(280px,calc(100% - 40px));padding:10px 13px 12px;border-left:2px solid var(--observed);background:linear-gradient(90deg,rgba(3,18,29,.9),rgba(3,18,29,.18) 76%,rgba(3,18,29,0));text-shadow:0 2px 10px #000}
  #mobile-location span{grid-column:1/-1;margin-bottom:5px;color:var(--observed);font:700 11px/1 ui-monospace,monospace;letter-spacing:.12em}
  #mobile-location strong{position:relative;z-index:2;font-size:20px;line-height:1.1}
  #mobile-location small{display:block;margin-top:5px;color:var(--muted);font-size:13px;line-height:1.35;overflow-wrap:anywhere}
  .route-label,.route-label.intermediate{opacity:1}
  .route-label text{font-size:48px;stroke-width:11px}
  .route-label.current text{fill:var(--route)}
  .route-label .label-leader{stroke-width:2;stroke:rgba(121,242,210,.7)}
  .route-point.current .outer{stroke-width:5px}
  .route-point.current .inner{r:5px}
  .map-key span{font-size:12px}.map-key i{width:20px}
  #replay{font-size:14px;padding:13px 16px}
  #journey-caption{left:184px;bottom:30px;font-size:13px;line-height:1.35}
  #reveal span{font-size:10px;line-height:1.15}
  #reveal strong{font-size:16px}
  #reveal .route-reveal span{font-size:clamp(13px,3.8vw,17px)}
  #unknown-detail{top:54%;font-size:14px}
  #detail-card h2{font-size:20px}#detail-card p:last-child{font-size:14px}
  .detail-kicker{font-size:11px}.evidence-grid h3,.method strong{font-size:12px}.evidence-grid p,.method{font-size:14px}
}
@media(max-width:340px){h1{font-size:19px}#mobile-location{top:145px;left:12px;width:calc(100% - 24px)}}