:root{
  --cyan:#00d4ff;--gold:#ffca28;--red:#ff3d21;--green:#00e5a0;--pur:#b06fff;
  --bg:#020810;--panel:rgba(3,9,22,.98);--bdr:rgba(0,212,255,.16);
  --fm:'Courier New',Courier,monospace;
  --fo:'Impact','Arial Black',sans-serif;
  --fb:'Arial Narrow',Arial,sans-serif;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:var(--fb);color:#eef4ff;}
canvas#starfield{position:fixed;inset:0;z-index:0;pointer-events:none;}

/* LANDING-PG STYLE*/
#landing{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse 130% 90% at 50% 55%,#071436,#020810);transition:opacity .9s,transform .9s;}
#landing.out{opacity:0;transform:scale(1.06);pointer-events:none;}
.land-badge{font-family:var(--fm);font-size:.9rem;letter-spacing:.35rem;color:var(--cyan);border:1px solid rgba(0,212,255,.3);padding:6px 22px;margin-bottom:28px;}
.land-title{font-family:var(--fo);font-size:clamp(3rem,9vw,7rem);font-weight:900;line-height:.88;text-align:center;background:linear-gradient(155deg,#fff 0%,#bfe0ff 28%,var(--cyan) 65%,#0060ff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 55px rgba(0,175,255,.35));}
.land-sub{font-family:var(--fo);font-size:clamp(.85rem,1.5vw,1.2rem);letter-spacing:.35rem;color:var(--gold);margin:12px 0 28px;}
.land-desc{max-width:450px;text-align:center;font-size:1.06rem;font-weight:300;line-height:1.72;color:rgba(170,200,255,.68);margin-bottom:44px;}
.land-btn{font-family:var(--fo);font-size:.9rem;font-weight:700;letter-spacing:.25rem;color:#010c1e;background:linear-gradient(135deg,var(--cyan),#0060ff);border:none;padding:16px 52px;cursor:pointer;clip-path:polygon(14px 0%,100% 0%,calc(100% - 14px) 100%,0% 100%);box-shadow:0 0 55px rgba(0,180,255,.5);transition:all .25s;}
.land-btn:hover{transform:translateY(-4px);box-shadow:0 0 80px rgba(0,200,255,.8);}
.orbit-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:-1;overflow:hidden;}
.orbit-ring{position:absolute;border-radius:50%;border:1px solid rgba(0,212,255,.08);}
.orbit-ring:nth-child(1){width:200px;height:200px;border-color:rgba(0,212,255,.2);animation:spinR 14s linear infinite;}
.orbit-ring:nth-child(2){width:380px;height:380px;animation:spinR 27s linear infinite reverse;}
.orbit-ring:nth-child(3){width:580px;height:580px;animation:spinR 44s linear infinite;}
.orbit-dot{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--cyan);top:-3.5px;left:calc(50% - 3.5px);box-shadow:0 0 10px var(--cyan);}
@keyframes spinR{to{transform:rotate(360deg);}}

/* IN-APP STYLES*/
#app{position:fixed;inset:0;z-index:100;display:grid;grid-template-rows:60px 1fr 84px;grid-template-columns:1fr 420px;opacity:0;pointer-events:none;transition:opacity .5s .1s;}
#app.on{opacity:1;pointer-events:all;}

/* TOP BAR */
#topbar{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:rgba(2,7,18,.99);border-bottom:1px solid var(--bdr);z-index:20;}
.tb-left{display:flex;align-items:center;gap:12px;}
.nasa-mark{font-family:var(--fo);font-size:1.25rem;font-weight:900;color:var(--red);letter-spacing:.18rem;text-shadow:0 0 18px rgba(255,61,33,.45);}
.tb-divider{width:1px;height:28px;background:linear-gradient(to bottom,transparent,var(--cyan),transparent);}
.tb-title{font-family:var(--fm);font-size:.75rem;color:var(--cyan);letter-spacing:.14rem;opacity:.7;}
.tb-center{display:flex;flex-direction:column;align-items:center;}
.tb-year{font-family:var(--fo);font-size:1.45rem;font-weight:700;color:var(--gold);line-height:1;letter-spacing:.25rem}
.tb-event{font-size:.9rem;color:rgba(170,205,255,.8);}
.reset-btn{font-family:var(--fm);font-size:.75rem;letter-spacing:.12rem;color:var(--red);background:transparent;border:1px solid rgba(255,61,33,.3);padding:7px 16px;cursor:pointer;clip-path:polygon(7px 0%,100% 0%,calc(100% - 7px) 100%,0% 100%);transition:all .2s;}
.reset-btn:hover{background:rgba(255,61,33,.1);border-color:var(--red);}

/* MAP */
#map-wrap{position:relative;overflow:hidden;border-right:1px solid var(--bdr);background:#010b1d;cursor:grab;}
#map-wrap:active{cursor:grabbing;}
#map-svg{position:absolute;top:0;left:0;display:block;}
.s-base{fill:#0d2244;stroke:#0d2244;stroke-width:0;}
.s-dim{fill:#0d2244;stroke:#0d2244;stroke-width:0;}
.s-hl{fill:#0d2244;stroke:#0d2244;stroke-width:0;}
.s-lbl{font-family:'Arial Narrow',Arial,sans-serif;font-size:11px;fill:rgba(160,200,255,.55);font-weight:600;pointer-events:none;text-anchor:middle;}
.world-land{fill:#0a1a30;stroke:#1a3060;stroke-width:.5px;}
.water-label{font-family:var(--fm);font-size:11px;fill:rgba(0,212,255,.28);letter-spacing:1.8px;}
.map-corner{position:absolute;width:22px;height:22px;pointer-events:none;z-index:5;}
.mc-tl{top:10px;left:10px;border-top:2px solid rgba(0,212,255,.4);border-left:2px solid rgba(0,212,255,.4);}
.mc-tr{top:10px;right:10px;border-top:2px solid rgba(0,212,255,.4);border-right:2px solid rgba(0,212,255,.4);}
.mc-bl{bottom:34px;left:10px;border-bottom:2px solid rgba(0,212,255,.4);border-left:2px solid rgba(0,212,255,.4);}
.mc-br{bottom:34px;right:10px;border-bottom:2px solid rgba(0,212,255,.4);border-right:2px solid rgba(0,212,255,.4);}
#map-hud{position:absolute;bottom:12px;left:12px;z-index:5;font-family:var(--fm);font-size:.52rem;color:rgba(0,212,255,.4);letter-spacing:.12rem;pointer-events:none;}
#map-tabs{position:absolute;top:10px;right:10px;z-index:6;display:flex;gap:4px;}
.map-tab{font-family:var(--fm);font-size:.54rem;letter-spacing:.08rem;color:rgba(0,212,255,.64);background:rgba(2,8,20,.92);border:1px solid rgba(0,212,255,.22);padding:5px 10px;cursor:pointer;transition:all .2s;text-transform:uppercase;}
.map-tab.on{color:#010c1e;background:var(--cyan);border-color:var(--cyan);}
/* Zoom buttons */
#zoom-btns{position:absolute;bottom:52px;right:12px;z-index:6;display:flex;flex-direction:column;gap:4px;}
.zbtn{font-family:var(--fo);font-size:1rem;font-weight:900;color:var(--cyan);background:rgba(2,8,20,.92);border:1px solid rgba(0,212,255,.28);width:34px;height:34px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;}
.zbtn:hover{background:rgba(0,212,255,.15);border-color:var(--cyan);}
/* Legend */
#map-legend{position:absolute;bottom:40px;left:17px;z-index:8;background:rgba(2,8,22,.94);border:1px solid rgba(0,212,255,.2);padding:10px 13px;min-width:190px;box-shadow:0 4px 22px rgba(0,0,0,.5);}
.legend-title{font-family:var(--fm);font-size:.7rem;color:var(--cyan);letter-spacing:.14rem;margin-bottom:9px;opacity:.75;}
.legend-item{display:flex;align-items:center;gap:8px;font-family:var(--fm);font-size:.7rem;color:rgba(180,215,255,.72);margin-bottom:5px;}
.legend-item:last-child{margin-bottom:0;}
.ldot{display:inline-flex;align-items:center;justify-content:center;width:12px;height:12px;border-radius:50%;font-size:8px;color:#020c20;flex-shrink:0;}
#map-scan{position:absolute;inset:0;z-index:4;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,212,255,.007) 3px,rgba(0,212,255,.007) 4px);}
#map-tooltip{position:absolute;z-index:20;background:rgba(3,10,28,.97);border:1px solid var(--cyan);padding:10px 13px;max-width:228px;pointer-events:none;display:none;clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);box-shadow:0 0 22px rgba(0,212,255,.22);}
#map-tooltip.on{display:block;}
.tip-title{font-family:var(--fm);font-size:.68rem;color:var(--cyan);margin-bottom:4px;}
.tip-body{font-size:.9rem;line-height:1.5;color:rgba(185,218,255,.88);}
.tip-tag{display:inline-block;font-family:var(--fm);font-size:.54rem;color:var(--gold);border:1px solid rgba(255,202,40,.3);padding:2px 7px;margin-top:5px;}

/* RIGHT PANEL */
#panel{display:flex;flex-direction:column;background:var(--panel);overflow:hidden;}
#dist-wrap{padding:8px 10px 6px;border-bottom:1px solid var(--bdr);flex-shrink: 0;}
.section-label{font-family:var(--fm);font-size:.7rem;letter-spacing:.1rem;color:var(--cyan);opacity:.6;margin-bottom:4px;}
#info-wrap{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,212,255,.14) transparent;}
#info-wrap::-webkit-scrollbar{width:3px;}
#info-wrap::-webkit-scrollbar-thumb{background:rgba(0,212,255,.2);}
.event-body{padding:10px 14px;}
.event-name{font-family:var(--fo);font-size:1.25rem;letter-spacing: .04em; font-weight:500;color:#eef4ff;line-height:1.22;margin-bottom:3px;}
.event-meta{font-family:var(--fm);font-size:.7rem;color:var(--gold);letter-spacing:.08rem;margin-bottom:8px;}
.event-desc{font-size:.9rem;font-weight:300;line-height:1.65;color:rgba(185,215,255,.82);margin-bottom:10px;}

.event-img-wrap { height:168px; overflow:hidden; position:relative; background:#040e22; flex-shrink:0; }
.event-img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 7s ease; }
.event-img:hover { transform:scale(1.07); }
.img-overlay { position:absolute; inset:0; background:linear-gradient(to bottom,rgba(2,8,20,.04),rgba(2,8,20,.86)); pointer-events:none; }
.img-caption { position:absolute; bottom:7px; left:10px; right:10px; font-family:var(--fm); font-size:.65rem; color:rgba(150,190,255,.56); pointer-events:none; z-index:2; }

.fact-block{background:linear-gradient(135deg,rgba(0,212,255,.055),rgba(0,50,200,.03));border:1px solid rgba(0,212,255,.18);border-left:3px solid var(--cyan);padding:9px 11px;margin-bottom:10px;}
.fact-label{font-family:var(--fm);font-size:.54rem;color:var(--cyan);letter-spacing:.12rem;margin-bottom:4px;}
.fact-text{font-size:.84rem;font-weight:300;line-height:1.6;color:rgba(185,215,255,.88);}
.loc-adv{background:linear-gradient(135deg,rgba(0,229,160,.07),rgba(0,212,255,.04));border:1px solid rgba(0,229,160,.22);border-left:3px solid var(--green);padding:8px 11px;margin-bottom:10px;}
.loc-adv-label{font-family:var(--fm);font-size:.52rem;color:var(--green);letter-spacing:.1rem;margin-bottom:4px;}
.loc-adv-txt{font-size:.82rem;font-weight:300;line-height:1.58;color:rgba(170,240,210,.9);}
.dyk-btn{display:flex;align-items:center;gap:8px;width:100%;font-family:var(--fm);font-size:.58rem;letter-spacing:.1rem;color:var(--gold);background:rgba(255,202,40,.055);border:1px solid rgba(255,202,40,.26);padding:9px 13px;cursor:pointer;margin-bottom:8px;transition:all .2s;animation:dykP 3.5s ease-in-out infinite;}
.dyk-btn:hover{background:rgba(255,202,40,.14);border-color:var(--gold);}
@keyframes dykP{0%,100%{box-shadow:0 0 7px rgba(255,202,40,.1);}50%{box-shadow:0 0 22px rgba(255,202,40,.44);}}
.dyk-panel{display:none;background:linear-gradient(135deg,rgba(255,202,40,.065),rgba(0,212,255,.03));border:1px solid rgba(255,202,40,.26);padding:12px;margin-bottom:10px;font-size:.86rem;font-weight:300;line-height:1.62;color:rgba(255,238,170,.95);}
.dyk-panel.on{display:block;}
.fade-content{transition:opacity .28s ease;}
.fade-content.fading{opacity:0;}

/* TIMELINE */
#timeline{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:0 18px;background:rgba(33, 74, 146, 0.414);border-top:1px solid var(--bdr);}
/* background:rgba(2,7,18,.99) */
.nav-btn{font-family:var(--fo);font-size:.8rem;font-weight:700;letter-spacing:.12rem;color:var(--cyan);background:transparent;border:1px solid rgba(0,212,255,.28);padding:9px 17px;cursor:pointer;clip-path:polygon(9px 0%,100% 0%,calc(100% - 9px) 100%,0% 100%);transition:all .2s;flex-shrink:0;}
.nav-btn:hover:not(:disabled){background:rgba(0, 213, 255, 0.373);border-color:var(--cyan);}
.nav-btn:disabled{opacity:.22;cursor:default;}
#tl-track{flex:1;position:relative;height:42px;display:flex;align-items:center;}
.tl-line{position:absolute;left:0;right:0;height:2px;top:50%;transform:translateY(-50%);background:rgba(0, 213, 255, 0.277);}
#tl-fill{position:absolute;height:2px;top:50%;left:0;transform:translateY(-50%);background:var(--cyan);transition:width .5s ease;box-shadow:0 0 10px var(--cyan);}
#tl-nodes{position:absolute;inset:0;}
.tl-node{position:absolute;top:50%;transform:translate(-60%,-50%);width:10px;height:10px;border-radius:50%;border:1.5px solid rgba(0,212,255,.48);background:var(--bg);cursor:pointer;transition:all .2s;z-index:2;}
.tl-node:hover{border-color:var(--cyan);transform:translate(-50%,-50%) scale(1.6);}
.tl-node.on{border-color: #ffca28 /*var(--cyan)*/;background: #ffca28/*var(--cyan)*/;box-shadow:0 0 11px var(--cyan);transform:translate(-50%,-50%) scale(1.4);}
.tl-node.done{border-color:rgba(0,212,255,.5);background:rgba(0,212,255,.2);}
.tl-year{position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-55%);font-family:var(--fm);font-weight:700;font-size:.7rem;color:rgba(0, 213, 255, 0.586);white-space:nowrap;pointer-events:none;}
.tl-node.on .tl-year{color: #ffca28 /*var(--cyan)*/;}

/* SVG map element classes */
.state-base  { fill:#0d2545; stroke:#1e5090; stroke-width:.7px; }
.state-south { fill:#0d2545; stroke:#1e5090; stroke-width:.9px; }
.state-border { fill:none; stroke:#1e5090; stroke-width:1.3px; }
.world-land  { fill:#0d2245; stroke:#1e5090; stroke-width:.5px; }
.water-label {
  position: absolute;
  z-index: 1000;
  font-family:var(--fm); font-size:10px;
  fill:rgba(0,212,255,.2); letter-spacing:1.5px;
}