/* An open, luminous Earth within the Quanta Orbis navy, teal and champagne palette. */
.qg-globe {
  position: relative;
  width: 100%;
  max-width: 600px;
  min-width: 0;
  aspect-ratio: 1 / 1.06;
  min-height: 450px;
  max-height: 600px;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  color: #e7e2d6;
  background: transparent;
  isolation: isolate;
}
.qg-globe .qg-stage { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; width: 100%; overflow: hidden; background: radial-gradient(ellipse at 50% 48%, #24564f16, transparent 69%); }
.qg-globe .qg-canvas, .qg-globe .qg-fallback { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.qg-globe .qg-canvas { touch-action: pan-y; cursor: grab; outline: 0; }
.qg-globe.qg-dragging .qg-canvas { cursor: grabbing; }
.qg-globe .qg-canvas:focus-visible { outline: 2px solid #d9c18b; outline-offset: -7px; box-shadow: inset 0 0 0 5px #081521; }
.qg-globe .qg-fallback { object-fit: contain; pointer-events: none; }
.qg-globe[data-globe-ready="true"] .qg-fallback { visibility: hidden; }
.qg-globe .qg-stage-label { position: absolute; top: 12px; left: 0; right: 0; text-align: center; pointer-events: none; color: #c5b28c; font: 11px/1.7 var(--sans, Arial, sans-serif); letter-spacing: .14em; }
.qg-globe .qg-drag-hint { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; color: #afc0ce; text-align: center; pointer-events: none; font: 11px/1.7 var(--sans, Arial, sans-serif); letter-spacing: .035em; }
.qg-globe .qg-controls { flex: none; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 9px; }
.qg-globe .qg-controls[hidden], .qg-globe .qg-canvas[hidden] { display: none !important; }
.qg-globe .qg-controls button { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 44px; min-width: 44px; height: 44px; padding: 0 10px; border: 1px solid #bca57266; border-radius: 0; color: #dfcda8; background: #12263177; font: 13px/1.6 var(--sans, Arial, sans-serif); cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.qg-globe .qg-controls button > [aria-hidden="true"] { font-size: 20px; line-height: 1; }
.qg-globe .qg-controls .qg-toggle { width: 105px; min-width: 105px; }
.qg-globe .qg-controls .qg-toggle > [aria-hidden="true"] { font-size: 15px; }
.qg-globe .qg-controls button:hover { color: #fff0d2; border-color: #d9bd84; background: #25413e88; }
.qg-globe .qg-controls button:focus-visible { outline: 2px solid #efd39c; outline-offset: 4px; box-shadow: 0 0 0 2px #0b1826; }
.qg-globe .qg-controls button:disabled { cursor: default; opacity: .6; color: #bdc4c7; border-color: #87958e66; background: transparent; }
.qg-globe .qg-caption { flex: none; margin-top: 19px; text-align: center; padding: 0 8px; }
.qg-globe .qg-caption > span { display: block; color: #d2bc91; font: 11px/1.7 var(--sans, Arial, sans-serif); letter-spacing: .14em; }
.qg-globe .qg-caption > p { color: #bfccd7; max-width: 450px; margin: 7px auto 0; font: 15px/1.75 var(--sans, Arial, sans-serif); }
.qg-globe .qg-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 620px) {
  .qg-globe { min-height: 440px; max-height: 560px; }
  .qg-globe .qg-stage-label { font-size: 10px; top: 6px; letter-spacing: .12em; }
  .qg-globe .qg-controls { gap: 6px; margin-top: 8px; }
  .qg-globe .qg-controls .qg-toggle { width: 98px; min-width: 98px; }
  .qg-globe .qg-caption { margin-top: 17px; padding: 0 4px; }
  .qg-globe .qg-caption > p { font-size: 15px; line-height: 1.8; }
}
@media (max-width: 360px) {
  .qg-globe { min-height: 420px; }
  .qg-globe .qg-controls { gap: 5px; }
  .qg-globe .qg-controls .qg-toggle { width: 92px; min-width: 92px; }
  .qg-globe .qg-stage-label { font-size: 10px; letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) { .qg-globe .qg-controls button { transition: none; } }
html.no-motion .qg-globe .qg-controls button { transition: none; }
@media (forced-colors: active) {
  .qg-globe .qg-controls button { color: ButtonText; border-color: ButtonText; background: Canvas; }
  .qg-globe .qg-controls button:focus-visible, .qg-globe .qg-canvas:focus-visible { outline-color: Highlight; }
}
@media print {
  .qg-globe { min-height: 0; height: 450px; max-height: 450px; break-inside: avoid; }
  .qg-globe .qg-fallback { visibility: visible !important; }
  .qg-globe .qg-canvas, .qg-globe .qg-controls, .qg-globe .qg-drag-hint { display: none !important; }
  .qg-globe .qg-caption > span, .qg-globe .qg-caption > p { color: #182636; }
}
