.hero { --globe-overlap:clamp(52px,14vw,72px); position:relative; z-index:0; display:grid; justify-items:center; margin-bottom:calc(-1 * var(--globe-overlap)); overflow-x:clip; }
.atlas { position:relative; min-width:0; width:min(100%,420px); margin:0; transform:translateX(5%); }  /* the globe sits left of center in its viewBox to leave room for the country label */
.globe { display:block; width:100%; height:auto; overflow:hidden; -webkit-user-select:none; user-select:none; }
.atlas.ready .globe { touch-action:none; }
.atlas.ready #globe-surface, .atlas.ready #globe-cutout { touch-action:none; cursor:grab; }
.atlas.dragging #globe-surface { cursor:grabbing; }
.globe:focus-visible { outline:2px solid #2aa198; outline-offset:2px; border-radius:8px; }
.globe .country { stroke:#002b36; stroke-width:.65; stroke-linejoin:round; }
.globe .country:hover { fill:#2aa198; }
.globe .country.selected { fill:#b58900; }
.globe .lighting, .globe .decoration { pointer-events:none; }
#country-shape { fill:#b58900; stroke:#eee8d5; stroke-width:.7; stroke-linejoin:round; }
#country-name { fill:#073642; font:500 20px system-ui,sans-serif; letter-spacing:-.025em; }
#globe-cutout { cursor:pointer; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
/* Keyboard controls appear only while focused; the pointer view stays uncluttered. */
.atlas-tools { position:absolute; bottom:calc(var(--globe-overlap) + 8px); right:0; display:flex; gap:8px; max-width:100%; padding:8px; background:#fdf6e3; border:1px solid #93a1a1; border-radius:4px; z-index:1; }
.atlas-tools:not(:focus-within) { width:1px; height:1px; padding:0; border:0; clip-path:inset(50%); overflow:hidden; }
.atlas-tools select, .atlas-tools button { font: .8rem system-ui,sans-serif; min-width:0; max-width:65%; color:inherit; background:transparent; border:1px solid #93a1a1; border-radius:3px; padding:8px; }
.atlas-tools :focus-visible { outline:2px solid #2aa198; outline-offset:2px; }
.atlas [hidden] { display:none !important; }

#globe-connectors path { fill:none; stroke:#b58900; stroke-opacity:.65; stroke-width:1; vector-effect:non-scaling-stroke; }