:root{
  --bg:#04060f; --bg2:#0a1226; --ink:#eef1fa; --dim:#8b93b0;
  --accent:#4fd1c5; --accent2:#6ea8ff; --hi:#ffd166; --line:rgba(255,255,255,.09);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:radial-gradient(130% 130% at 72% 8%,var(--bg2),var(--bg) 62%);
  color:var(--ink); font-family:"Space Grotesk",system-ui,sans-serif; overflow:hidden;
}
#globe{position:fixed; inset:0}
#globe canvas{cursor:grab} #globe canvas:active{cursor:grabbing}

/* loader */
#loader{position:fixed; inset:0; display:flex; flex-direction:column; gap:16px;
  align-items:center; justify-content:center; z-index:20; color:var(--dim);
  font-family:"IBM Plex Mono",monospace; font-size:13px; letter-spacing:.1em; background:var(--bg)}
.spinner{width:34px;height:34px;border:3px solid rgba(255,255,255,.15);
  border-top-color:var(--accent); border-radius:50%; animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

#topbar{position:fixed; top:26px; left:32px; z-index:5; pointer-events:none}
.wordmark{font-weight:700; font-size:38px; letter-spacing:.02em; line-height:.95;
  text-shadow:0 0 42px rgba(110,168,255,.35)}
.sub{margin-top:6px; color:var(--dim); font-size:12px; letter-spacing:.11em;
  text-transform:uppercase; font-family:"IBM Plex Mono",monospace}

/* year selector */
#yearbar{position:fixed; left:32px; bottom:26px; z-index:6; display:flex; gap:8px}
.yr-btn{font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--dim);
  background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:20px;
  padding:8px 16px; cursor:pointer; transition:.2s}
.yr-btn:hover{color:var(--ink); border-color:var(--accent2)}
.yr-btn.active{color:var(--bg); background:linear-gradient(90deg,var(--accent),var(--accent2));
  border-color:transparent; font-weight:600}

/* panel */
#panel{position:fixed; top:0; right:0; z-index:5; width:360px; height:100%;
  padding:32px 28px; background:linear-gradient(180deg,rgba(8,12,26,.74),rgba(8,12,26,.93));
  backdrop-filter:blur(14px); border-left:1px solid var(--line);
  display:flex; flex-direction:column}
#panel-empty{margin:auto 0; text-align:center; color:var(--dim)}
.ghost-globe{font-size:56px; opacity:.5; margin-bottom:14px}
#panel-empty p{font-size:14px; line-height:1.6}

.c-name{font-size:30px; font-weight:700; margin-bottom:20px; line-height:1.1}
.c-row{display:flex; gap:26px; margin-bottom:26px}
.c-metric .c-big{font-size:34px; font-weight:700;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.c-lbl{color:var(--dim); font-size:12px; font-family:"IBM Plex Mono",monospace; margin-top:2px}

.c-chart{display:flex; align-items:flex-end; gap:12px; height:150px; padding:10px 0 0;
  border-bottom:1px solid var(--line); margin-bottom:8px}
.cb{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end}
.cb .bar{width:100%; border-radius:6px 6px 0 0; min-height:3px;
  background:linear-gradient(180deg,var(--accent2),var(--accent)); transition:height .7s cubic-bezier(.2,.8,.2,1)}
.cb.on .bar{background:linear-gradient(180deg,var(--hi),#f0a93b); box-shadow:0 0 16px rgba(255,209,102,.5)}
.cb .cby{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--dim)}
.cb .cbv{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink)}
.c-growth{color:var(--accent); font-family:"IBM Plex Mono",monospace; font-size:13px; margin-top:12px}

#closeBtn{margin-top:22px; align-self:flex-start; color:var(--dim); background:none;
  border:1px solid var(--line); border-radius:20px; padding:8px 16px; cursor:pointer;
  font-family:"IBM Plex Mono",monospace; font-size:12px; transition:.2s}
#closeBtn:hover{color:var(--ink); border-color:var(--accent2)}

.src{margin-top:auto; color:rgba(139,147,176,.6); font-size:11px;
  font-family:"IBM Plex Mono",monospace; padding-top:18px}

@media (max-width:820px){
  #panel{width:100%; height:auto; bottom:0; top:auto; border-left:none;
    border-top:1px solid var(--line); padding:20px}
  #panel.empty{display:none}
  #topbar{left:18px; top:14px} .wordmark{font-size:26px}
  #yearbar{left:50%; transform:translateX(-50%); bottom:auto; top:70px}
  .c-chart{height:120px}
}