nav { font-family: monospace; font-size: 0.85em; padding: 12px 20px; }
nav a { color: inherit; text-decoration: none; }
nav a:hover { text-decoration: underline; }
body { margin: 0; font-family: monospace; background: white; }
.container { max-width: 700px; margin: 0 auto; padding: 40px 20px; }
h1 { font-size: 1.4em; margin: 0 0 4px; }
.subtitle { font-size: 0.8em; color: #aaa; margin: 0 0 32px; }
#globe { display: flex; justify-content: center; cursor: grab; }
#globe:active { cursor: grabbing; }
.sphere { fill: #dde8f0; }
.country { fill: #888; stroke: #fff; stroke-width: 0.4; cursor: pointer; transition: fill 0.15s; }
.country:hover { fill: #222; }
.graticule { fill: none; stroke: rgba(0,0,0,0.08); stroke-width: 0.4; }
.tooltip {
  position: fixed;
  background: #222;
  color: #fff;
  font-family: monospace;
  font-size: 0.75em;
  padding: 8px 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  white-space: nowrap;
  z-index: 100;
}