/* The inside of the globe iframe (static/globe.html).

   It is its own document, so it inherits nothing from the page that frames it
   and needs none of site.css. The ground is transparent: the figure box behind
   it supplies the skin's paper, and globe.js paints the sphere in the skin the
   parent tells it. This is a file rather than a <style> element because the
   origin serves every page with "style-src 'self'" and would refuse an inline
   one (worker/src/index.js). */
html, body { margin: 0; height: 100%; overflow: hidden; background: transparent; }
#stage { position: absolute; inset: 0; cursor: grab; }
#stage:active { cursor: grabbing; }
/* a mark is a link to that country's page, so it says so */
#stage.on-mark, #stage.on-mark:active { cursor: pointer; }
#tip { position: absolute; left: 0; top: 0; pointer-events: none;
  transform: translate(-50%, calc(-100% - 14px)); padding: 6px 10px; white-space: nowrap;
  font: 12.5px/1.4 "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  opacity: 0; transition: opacity .12s; }
#tip b { display: block; font: 500 15px/1.2 "Newsreader", Georgia, "Times New Roman", serif; }
@media (prefers-reduced-motion: reduce) { #tip { transition: none; } }