#jb-globe{
  --space:#04060f; --deep:#060a18; --ink:#eaf1fb; --muted:#8294b2; --faint:#4a5a78;
  --flight:#5bd1ff; --drive:#f5ad5c; --now:#ffe39a; --home:#8fe9c2; --warn:#ff9e7a;
  --panel:rgba(8,12,26,.78); --hair:#22314e; --hair2:#1a2540;
}
#jb-globe *{box-sizing:border-box}
#jb-globe{margin:0;color:var(--ink);background:var(--space);
  font-family:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased}
.sans{font-family:Archivo,system-ui,-apple-system,sans-serif}

/* ---------- stage ---------- */
.stage{height:100svh;min-height:520px;display:grid;grid-template-columns:minmax(0,1fr) 322px;
  background:radial-gradient(130% 100% at 50% 20%,#0a1330 0%,var(--deep) 45%,var(--space) 100%)}
@media(max-width:880px){.stage{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 36svh}}
.globe{position:relative;min-width:0;min-height:0;overflow:hidden}
#jb-globe svg#map{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}
#jb-globe svg#map:active{cursor:grabbing}
.star{fill:#cfe0ff}
.grat{fill:none;stroke:#1c2b49;stroke-width:.5;vector-effect:non-scaling-stroke}
.land{stroke:#54799f;stroke-width:.6;vector-effect:non-scaling-stroke;fill:#2c4a73}
.arc{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 3px currentColor)}
.arc.flight{stroke:var(--flight);stroke-width:1.7;color:var(--flight)}
.arc.drive{stroke:var(--drive);stroke-width:1.5;stroke-dasharray:1 3;color:var(--drive)}
.node{stroke:#06101f;stroke-width:.6;opacity:.18;transition:opacity .4s}
.node.abroad{fill:var(--now)} .node.usa{fill:var(--home)}
.node.seen{opacity:.95}
#marker .core{fill:var(--now)} #marker .ring{fill:none;stroke:var(--now);stroke-width:1.5;opacity:.85}
.pulse{animation:pulse 1.7s ease-out infinite}
@keyframes pulse{0%{r:4;opacity:.9}100%{r:21;opacity:0}}
.evlab{font-family:Archivo,system-ui,sans-serif;font-size:17px;font-weight:800;fill:var(--now);
  stroke:#04060f;stroke-width:4.5;paint-order:stroke;pointer-events:none;letter-spacing:-.01em}
.evlab.lost{font-size:13px;font-weight:600;fill:var(--warn);stroke-width:4}
@media(max-width:700px){.evlab{font-size:15px}.evlab.lost{font-size:12px}}
.evtick{stroke:var(--now);stroke-width:1;opacity:.6}

/* overlays */
#jb-globe header.hud{position:absolute;top:14px;left:18px;z-index:5;pointer-events:none;max-width:60%}
#jb-globe header.hud .kick{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
#jb-globe header.hud .sub{font-size:11px;color:var(--muted);margin-top:5px;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#jb-globe header.hud h1{margin:.2em 0 0;font-size:clamp(19px,2.5vw,28px);font-weight:800;letter-spacing:-.01em;
  font-family:Archivo,system-ui,sans-serif;text-transform:uppercase}
#tstats{position:absolute;top:14px;right:18px;z-index:5;display:flex;gap:16px;text-align:right;pointer-events:none}
#tstats b{display:block;font-size:clamp(14px,1.7vw,19px);font-weight:600;font-family:Archivo,system-ui,sans-serif}
#tstats span{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
#info{position:absolute;left:18px;bottom:92px;z-index:5;background:var(--panel);border:1px solid var(--hair);
  border-radius:12px;padding:12px 15px;min-width:212px;max-width:min(62%,330px);backdrop-filter:blur(8px)}
#info .date{font-size:12px;color:var(--flight);letter-spacing:.05em}
#info .place{font-size:21px;font-weight:800;margin:.1em 0 .06em;font-family:Archivo,system-ui,sans-serif;line-height:1.12}
#info .region{font-size:11.5px;color:var(--muted)}
#info .status{margin-top:7px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
#info .ev{margin-top:8px;font-size:12px;color:var(--now);font-family:Archivo,system-ui,sans-serif;font-weight:600;line-height:1.3}
#info .ev a{color:inherit}
#bar{position:absolute;left:0;right:0;bottom:0;z-index:6;padding:12px 18px 14px;
  background:linear-gradient(to top,rgba(4,7,16,.95),rgba(4,7,16,0))}
#scrub{width:100%;margin:0 0 8px;accent-color:var(--now);height:20px;display:block}
.row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
#jb-globe button{background:#15203a;color:var(--ink);border:1px solid var(--hair);border-radius:8px;padding:7px 11px;
  font:inherit;font-size:12.5px;cursor:pointer;line-height:1.2}
#jb-globe button:hover{border-color:var(--muted)}
#jb-globe button.on{background:var(--now);border-color:var(--now);color:#101014}
#jb-globe button:focus-visible, #jb-globe input:focus-visible{outline:2px solid var(--flight);outline-offset:2px}
.seg{display:flex;gap:4px}
.hint{font-size:10.5px;color:var(--faint);letter-spacing:.06em;margin-left:auto}
@media(max-width:560px){.hint{display:none}}
@media(max-width:700px){#tstats{display:none}header.hud{max-width:calc(100% - 36px)}header.hud h1{font-size:21px}
  #jb-globe button{padding:6px 9px;font-size:11.5px}#bar{padding:10px 14px 12px}
  #info{left:14px;bottom:86px;padding:10px 13px;min-width:0}#info .place{font-size:18px}}

/* trips panel */
#jb-globe aside#trips{border-left:1px solid var(--hair2);background:rgba(4,7,16,.55);overflow-y:auto;min-height:0}
@media(max-width:880px){aside#trips{border-left:none;border-top:1px solid var(--hair2)}}
#jb-globe aside#trips .ph{position:sticky;top:0;background:#06091a;padding:11px 14px 9px;border-bottom:1px solid var(--hair2);
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);z-index:2}
.trip{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;
  padding:10px 14px;background:none;border:0;border-bottom:1px solid var(--hair2);border-radius:0;
  text-align:left;color:inherit;cursor:pointer;font-size:12.5px}
.trip:hover{background:rgba(91,209,255,.07)}
.trip[aria-current="true"]{background:rgba(255,227,154,.1);box-shadow:inset 3px 0 0 var(--now)}
.trip .yr{color:var(--faint);font-size:11.5px}
.trip .fl{display:flex;gap:3px;flex-wrap:wrap}
.trip .fl span{font-size:10px;letter-spacing:.05em;padding:1px 4px;border-radius:3px;background:#1d2b47;color:#bcd0ee}
.trip .fl span.mark{background:none;color:var(--warn);padding-left:0}
.trip .wh{color:var(--muted);font-size:11px;margin-top:2px}
.trip .r{color:var(--muted);font-size:11.5px;text-align:right;white-space:nowrap}

/* ---------- below the fold ---------- */
.wrap{max-width:860px;margin:0 auto;padding-inline:20px;padding-block:44px 52px}
#jb-globe h2{font-family:Archivo,system-ui,sans-serif;font-size:13px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);margin:0 0 16px;font-weight:600}
.stats{display:grid;gap:10px}
@media(min-width:560px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:rgba(12,18,38,.7);border:1px solid var(--hair2);border-radius:11px;padding:13px 14px}
.stat .v{font-family:Archivo,system-ui,sans-serif;font-size:25px;font-weight:800;line-height:1;letter-spacing:-.02em}
.stat .k{font-size:11.5px;color:var(--muted);margin-top:6px;line-height:1.35}
.bars{display:grid;gap:5px;margin-top:18px}
.bar{display:grid;grid-template-columns:104px minmax(0,1fr) 42px;gap:10px;align-items:center;font-size:12px}
.bar .n{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .t{height:8px;border-radius:3px;background:#101a33;overflow:hidden}
.bar .t i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--flight),#2f7fb8)}
.bar .v{color:var(--faint);text-align:right}
.hole{margin-top:22px;border-left:2px solid var(--warn);padding:2px 0 2px 13px;font-size:12.5px;color:var(--muted);line-height:1.65}
.hole b{color:var(--warn);font-weight:500}
#jb-globe footer{margin-top:34px;padding-top:16px;border-top:1px solid var(--hair2);font-size:11.5px;color:var(--faint);line-height:1.8}
#jb-globe footer b{color:var(--muted);font-weight:500}
@media (prefers-reduced-motion:reduce){.pulse{animation:none}}

/* --- site build only: the page is not the whole document --- */
#jb-globe{display:block;border-radius:14px;overflow:hidden;margin:0 0 8px}
#jb-globe .stage{height:min(86svh,880px);min-height:480px}
#jb-globe a{text-decoration:none}
#jb-globe p{margin:0}
#jb-globe .wrap{max-width:100%;padding-block:34px 30px}
#jb-globe input[type=range]{-webkit-appearance:auto;appearance:auto}
#jb-globe header.hud .kick{font-size:10.5px}
#jb-globe header.hud .sub{margin-top:7px;font-size:12px;color:var(--ink)}