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: 960px; 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 24px; }
#map { background: #e8f0f8; cursor: grab; }
#map:active { cursor: grabbing; }
.country { fill: #ccc; stroke: #fff; stroke-width: 0.5; transition: fill 0.15s; cursor: pointer; }
.country:hover { fill: #222; }
.country.selected { fill: #222; }
.graticule { fill: none; stroke: #ddd; stroke-width: 0.3; }
.sphere { fill: #e8f0f8; }
.border { fill: none; stroke: #fff; stroke-width: 0.5; }
.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;
}