.map-container { display: flex; gap: 20px; align-items: center; }
.map-section { flex: 3; overflow-x: auto; }
#world-map { position: relative; }
.chart-section { flex: 2; }

@media (max-width: 1024px) {
  .map-container { flex-direction: column; }
  .map-section { width: 100%; /*min-width: 500px; */}
  .chart-section { width: 100%; }
}

@media (max-width: 500px) {
  .map-section { overflow-x: scroll; }
  #world-map {
    min-width: 500px;
  }
}

@media (max-width: 319px) {
  .chart-section { overflow-x: scroll; padding-left: 20px; }
  #pie-chart {
    min-width: 260px;
  }
}

#tooltip { position: absolute; pointer-events: none; display:none; background: rgba(0,0,0,.78); color: #fff; padding: 6px 8px; border-radius: 6px; font-size: 12px; transform: translate(-50%,-120%); white-space: nowrap; }
svg { width: 100%; display: block; background: #ffffff; }
#pie-chart { background: #fff; }
.sphere { fill:#eef2f7; stroke:#cbd5e1; }
.graticule { fill: none; stroke: #d1d9e6; stroke-width: 0.5px; stroke-dasharray: 2 2; }
.country { fill: #6a6b6d; stroke: #393a3b; stroke-width: .5px; }
.alumni-region { stroke-width: 1px; cursor: pointer; }
.alumni-region:hover { fill-opacity: .32; stroke-opacity:.9; }
.arc { cursor: pointer; }
.label {
  position: absolute; pointer-events: none; display:none;
  background: rgba(0,0,0,.78); color: #fff; padding: 6px 8px; border-radius: 6px; font-size: 12px;
  transform: translate(-50%,-120%); white-space: nowrap;
}
.legend { margin-top: 8px; font-size: 12px; color:#334155; }
.legend b { display:inline-block; width:1em; height:1em; background:#2563eb; opacity:.32; vertical-align: middle; margin-right:6px; }
.note { font-size: 12px; color:#475569; margin-top: 6px; }
.footer { font-size: 12px; color:#64748b; margin-top: 8px; }
a { color:#2563eb; text-decoration: none; }
a:hover { text-decoration: underline; }