html, body {
  margin: 0; height: 100%; background: #0A192F; overflow: hidden;
  font-family: 'Plus Jakarta Sans', Helvetica, Arial, sans-serif;
}
#wrap { position: relative; width: 100%; height: 100%; }
svg { display: block; width: 100%; height: 100%; }
.graticule { fill: none; stroke: #1E293B; stroke-width: .5; }
.country { fill: #14243d; stroke: #24344f; stroke-width: .5; }
.country.lit { fill: #1E293B; }
.arc { fill: none; stroke: #00D8F6; stroke-width: 1.1; stroke-dasharray: 3 5; opacity: .5; }
.hub-hit { cursor: pointer; }
.hub-core { fill: #00D8F6; }
.hub-ring { fill: none; stroke: #00D8F6; }
.hub-label {
  font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 600;
  fill: #F8FAFC; pointer-events: none;
}
.hub-sub {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .08em;
  fill: #7c93b4; pointer-events: none;
}
#card {
  position: absolute; left: 20px; bottom: 20px; width: 250px; padding: 16px 18px;
  background: rgba(10, 25, 47, .94); border: 1px solid #24344f; border-left: 2px solid #00D8F6;
  color: #F8FAFC; opacity: 0; transition: opacity .18s; pointer-events: none;
}
#card h4 { margin: 0 0 2px; font-family: 'Space Grotesk', sans-serif; font-size: 15px; }
#card .reg {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .1em;
  color: #00D8F6; text-transform: uppercase; margin-bottom: 8px;
}
#card p { margin: 0; font-size: 12.5px; line-height: 1.5; color: #a9bcd4; }
@keyframes pulse { 0% { r: 7; opacity: .85 } 100% { r: 26px; opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .hub-ring { animation: none !important; } }