[data-layout="globe"] body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: clip;
}
html[data-layout="globe"] { overflow: clip; }

[data-layout="globe"] .app-shell {
  --globe-ink: #effaf7;
  --globe-muted: #bfdfda;
  --globe-control: #123c43;
  --globe-line: #4c7e82;
  width: min(100vw, 110vh);
  height: min(100vh, 100vw);
  border-radius: 50%;
  background: transparent;
  /* Focus/scroll-into-view must not pan the entire globe when a dock is near its rim. */
  overflow: clip;
}

:root:not([data-layout]) .app-shell { visibility: hidden; }

#globe-surface, #globe-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}

#globe-surface:active { cursor: grabbing; }
#globe-fallback { pointer-events: none; }
[data-layout="globe"] #globe-surface { animation: none; }

[data-layout="globe"] .titlebar {
  position: absolute;
  top: 8%;
  left: 22%;
  right: 22%;
  height: 40px;
  padding: 0;
  z-index: 6;
  pointer-events: none;
  -webkit-app-region: no-drag;
  color: var(--globe-ink);
  text-shadow: 0 1px 5px #001923;
}

[data-layout="globe"] .titlebar .brand {
  pointer-events: auto;
  -webkit-app-region: no-drag;
}

[data-layout="globe"] #maximize { display: none; }
#globe-placement { position: absolute; top: 14%; left: 50%; translate: -50% 0; z-index: 7; display: flex; align-items: center; gap: 4px; padding: 5px 8px; border: 1px solid #5b878b; border-radius: 22px; background: #0d303bf2; color: #eefaf8; font-size: 11px; }
#globe-placement button { flex: none; background: transparent; border: 0; border-radius: 14px; min-width: 30px; min-height: 30px; padding: 3px 8px; }
#globe-placement button:hover { background: #315d65; }
#globe-placement #globe-move { cursor: move; touch-action: none; user-select: none; }
#globe-placement #globe-size { min-width: 36px; text-align: center; font-variant-numeric: tabular-nums; }
#globe-placement #globe-position-done { background: #4763ff; }

[data-layout="globe"] .brand-mark { color: inherit; }
[data-layout="globe"] .preview-label { display: none; }
[data-layout="globe"] .titlebar-right { padding-right: 0; pointer-events: auto; }
[data-layout="globe"] .toolbar-button,
[data-layout="globe"] .window-controls button { color: var(--globe-ink); border-color: var(--globe-line); }
[data-layout="globe"] .toolbar-button:hover,
[data-layout="globe"] .window-controls button:hover { background: var(--globe-control); color: white; }
[data-layout="globe"] .window-controls { align-items: center; }
[data-layout="globe"] .window-controls button { height: 32px; border-radius: 50%; }

[data-layout="globe"] .workspace { display: none; }
#globe-map, #globe-panels, #globe-panel-links {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#globe-map { z-index: 1; }
#globe-panels { z-index: 4; }
#globe-panel-links { width: 100%; height: 100%; stroke: #b3e7df8c; stroke-width: 1.5; }
.continent-label, .weather-marker {
  position: absolute;
  translate: -50% -50%;
  white-space: nowrap;
  color: #effbf1;
  text-shadow: 0 1px 3px #09232c, 0 0 8px #09232c;
}
.continent-label { font-size: clamp(9px, 1.2vh, 13px); font-weight: 650; letter-spacing: .13em; text-transform: uppercase; }
.weather-marker { font-size: 9px; color: #fae7cf; }
.weather-marker::before {
  display: block;
  content: "";
  margin: auto;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  background: #ffd6a04a;
  border: 1px dashed #ffe1bbaa;
  box-shadow: 0 0 10px #ffd9ac36;
}
.weather-marker.cyclone::before { width: 21px; height: 21px; border: 2px dotted #fff0d391; background: #d0dfe21f; }
.globe-page {
  container-type: inline-size;
  --page-glass: #bfd9d6ed;
  --page-gloss: #e4f7ed96;
  --page-rim: #d4f7ea9e;
  --page-mark: #235967;
  --text: #102f38;
  --muted: #34555d;
  --line: #39656c36;
  --soft: #315e6814;
  --surface: #e5f2ed3d;
  --surface-raised: #e5f2ed75;
  display: flex;
  flex-direction: column;
  position: absolute;
  min-width: 0;
  overflow: hidden;
  border-radius: 38px 38px 22px 22px / 28px 28px 22px 22px;
  background: linear-gradient(135deg, var(--page-gloss), transparent 54%), var(--page-glass);
  border: 1px solid var(--page-rim);
  color: var(--text);
  box-shadow: inset 0 1px 0 #e8fff54d, inset 0 -12px 28px #062c3d0c, 0 8px 24px #001c3460;
  pointer-events: auto;
}
.globe-page[data-dock="below"] { border-radius: 22px 22px 38px 38px / 22px 22px 28px 28px; }
.globe-page.is-current { border-color: var(--page-mark); box-shadow: inset 0 1px 0 #effffb80, inset 0 -12px 28px #062c3d0c, 0 0 0 2px #8df2df22, 0 8px 24px #001c3460; }
:root[data-theme="dark"] .globe-page {
  --page-glass: #0b3039ee;
  --page-gloss: #3b797d70;
  --page-rim: #92d6cb61;
  --page-mark: #9be6d8;
  --text: #effbf7;
  --muted: #bdd7d4;
  --line: #abd9d333;
  --soft: #92d6cb16;
  --surface: #729c9b0f;
  --surface-raised: #305962b3;
}
.globe-page-heading {
  display: flex;
  flex: none;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 7px 14px 4px;
}
.globe-page-title { flex: 1; min-width: 0; }
.globe-expand-hint { display: block; flex: none; padding: 1px 12px 5px; color: #c2d9df; font-size: 11px; line-height: 1.3; cursor: pointer; }
.globe-page.is-expanded .globe-expand-hint { display: none; }
.globe-page-heading h1 { font-size: 14px; font-weight: 650; letter-spacing: -.3px; margin: 0; }
.globe-page-symbol { width: 26px; height: 30px; display: grid; place-items: center; flex: none; color: var(--page-mark); }
.globe-page-symbol svg { width: 22px; height: 22px; }
.globe-page-heading button { flex: none; background: transparent; border: 1px solid var(--line); border-radius: 50%; width: 27px; height: 27px; font-size: 15px; padding: 0; transition: background .15s, border-color .15s; }
.globe-page-heading [data-globe-close] { font-size: 19px; border-color: transparent; }
.globe-page-heading button:hover, .globe-page-heading button[aria-expanded="true"] { background: var(--soft); border-color: var(--page-mark); }
.globe-page :focus-visible { outline-color: var(--page-mark); outline-offset: 2px; }
.globe-page-body { overflow: auto; flex: 1; overscroll-behavior: contain; padding: 5px 16px 6px; scrollbar-gutter: stable; min-height: 0; overflow-wrap: anywhere; }
.globe-page-body .page-heading { align-items: start; flex-wrap: wrap; margin-bottom: 14px; }
.globe-page[data-globe-panel="overview"] .page-heading, .globe-page[data-globe-panel="scans"] .page-heading { display: none; }
.globe-page-body :is(.panel, .activity-panel) { padding: 14px 0; margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.globe-page-body .panel:first-child { padding-top: 0; border-top: 0; }
.globe-page-body h2 { font-size: 15px; margin-bottom: 8px; }
.globe-page-body p { font-size: 12px; line-height: 1.55; margin-bottom: 12px; }
.globe-page-body .panel-label { margin-bottom: 10px; font-size: 9px; letter-spacing: 1px; }
.globe-page-body .large-reading { font-size: 37px; letter-spacing: -2px; margin: 12px 0; }
.globe-page-body :is(.primary, .secondary) { min-height: 38px; padding: 8px 13px; border-radius: 18px 8px 18px 8px; transition: background .15s, box-shadow .15s; }
.globe-page-body .secondary { background: var(--surface-raised); border-color: var(--line); }
.globe-page-body :is(.primary, .secondary):hover:not(:disabled) { box-shadow: 0 0 0 2px var(--line); }
.globe-page-body .text-button { min-height: 35px; }
.globe-page-body .ledger-row { padding: 10px 0; gap: 9px; }
.globe-page-body .ledger-row:hover { color: var(--page-mark); background: var(--soft); }
.globe-page-body .metrics { gap: 6px; margin: 10px 0; }
.globe-page-body .metric { padding: 10px; border: 0; border-radius: 16px; }
.globe-page-body .report-head { flex-wrap: wrap; }
.globe-page-body .feature-list { display: block; }
.globe-page-body .feature-list > div { padding: 12px 0; border: 0; background: transparent; border-top: 1px solid var(--line); border-radius: 0; }
.globe-page-body .empty-activity { padding: 12px 0; }
.globe-page-body .input-row { flex-wrap: wrap; }
.globe-page-body .input-row input { min-width: 0; width: 100%; }
.globe-page-body :is(input, select) { border-color: var(--line); }
.globe-page-body #scan-options { padding: 0 0 16px; margin: 0 0 14px; border-radius: 0; }
.globe-page-body #scan-options .panel-label { display: none; }
.globe-page-body .scan-choices { gap: 7px; }
@container (max-width: 235px) {
  .globe-page-body .scan-choices { grid-template-columns: 1fr; }
}
.globe-page-body .scan-choices select { border-radius: 14px 6px 14px 6px; font-size: 12px; padding: 10px 4px; background: var(--surface-raised); }
.globe-page-body #station-scope-note { font-size: 11px; margin: 7px 0 0; }
.globe-overview-status { padding: 0 0 16px; }
.globe-overview-status .monitoring-status { font-size: 18px; letter-spacing: -.4px; gap: 8px; margin-bottom: 8px; }
.globe-overview-status .status-dot { width: 8px; height: 8px; box-shadow: 0 0 0 4px var(--soft); }
.globe-page-help { padding: 12px; margin: 0 0 14px; border-radius: 18px 8px 18px 8px; background: var(--soft); border: 1px solid var(--line); }
.globe-page-help strong { font-size: 12px; color: var(--page-mark); }
.globe-page-help p { font-size: 11px; margin: 5px 0 0; }
.globe-page-foot { min-height: 24px; flex: none; display: flex; gap: 12px; align-items: center; padding: 2px 18px 5px; }
.globe-page-trail { height: 2px; border-radius: 9px; background: var(--line); flex: 1; overflow: hidden; }
.globe-page-trail::after { content: ""; display: block; height: 100%; background: var(--page-mark); transform: scaleX(var(--page-progress, 0)); transform-origin: left; }
#globe-feedback {
  position: absolute;
  z-index: 7;
  width: min(360px, 59%);
  top: 20%;
  left: 50%;
  translate: -50% 0;
  pointer-events: none;
}
#globe-feedback > :is(#notice, #protection-reminder) { margin: 0 0 8px; pointer-events: auto; box-shadow: 0 4px 18px #071b2d50; }
[data-layout="globe"] .badge-rail { display: block; inset: 0; width: auto; height: auto; }

.classic-icon, .badge-copy { display: contents; }
.badge-rim, .nav-item .globe-glyph { display: none; }
[data-layout="globe"] .classic-icon { display: none; }

[data-layout="globe"] :is(.nav-item, .globe-scan-node) {
  /* Frosted navy glass: the Earth shows softly through, the rim stays crisp. */
  --glyph-color: #86c8ff;
  --badge-tint: #0a1d38;
  --badge-face: color-mix(in srgb, var(--badge-tint) 72%, transparent);
  --badge-edge: #020b17a6;
  --badge-inlay: #d6e6ff33;
  position: absolute;
  top: var(--badge-y);
  left: var(--badge-x);
  width: var(--badge-w);
  height: var(--badge-h);
  z-index: var(--badge-stack);
  clip-path: var(--badge-outline, circle(50%));
  display: block;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  padding: 0;
  outline: 0;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(105% 68% at 50% 0%, #ffffff29, #ffffff00 58%),
    radial-gradient(80% 80% at 50% 40%, color-mix(in srgb, var(--glyph-color) 9%, var(--badge-face)), var(--badge-face));
  color: #f4f8ff;
  box-shadow: none;
  font-size: clamp(13px, calc(var(--globe-feature-size) * .088), 20px);
  font-weight: 600;
  letter-spacing: .01em;
  text-align: center;
  line-height: 1.18;
  text-shadow: 0 1px 2px #00102499;
}

[data-layout="globe"] :is(.nav-item, .globe-scan-node)[aria-hidden="true"] { pointer-events: none; }
[data-layout="globe"] .badge-rim {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.badge-cut { fill: none; stroke: var(--badge-edge); stroke-width: 6; }
.badge-etch { stroke: var(--badge-inlay); stroke-width: 1.25; transition: stroke .2s, stroke-width .2s; }

[data-layout="globe"] .badge-copy {
  position: absolute;
  left: var(--badge-ink-x);
  top: var(--badge-ink-y);
  width: max-content;
  max-width: calc(var(--globe-feature-size) * .84);
  translate: -50% -50%;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

[data-layout="globe"] .nav-item span { max-width: none; }
[data-layout="globe"] .nav-item[aria-expanded="true"] .badge-etch { stroke: var(--glyph-color); stroke-width: 2.4; }

/* The box and its contents never scale. Only the outward-facing part is
   concealed as the world carries it around the horizon. */
[data-layout="globe"] :is(.nav-item, .globe-scan-node, .globe-page) {
  opacity: calc(var(--horizon-opacity, 1) * var(--badge-availability, 1));
  mask-image: linear-gradient(var(--horizon-angle, 90deg), #000 calc(var(--horizon-edge, 110%) - 5%), transparent calc(var(--horizon-edge, 110%) + 5%));
}
[data-layout="globe"] .globe-scan-node:disabled { --badge-availability: .42; }
.globe-page[inert] { pointer-events: none; }
/* One family: equal lightness and restraint, so no badge shouts over the map. */
[data-layout="globe"] [data-nav="scans"] { --glyph-color: #8fb8ff; }
[data-layout="globe"] [data-nav="watch"] { --glyph-color: #74dcb0; }
[data-layout="globe"] [data-nav="quarantine"] { --glyph-color: #f4c27c; }
[data-layout="globe"] [data-nav="exclusions"] { --glyph-color: #f1a99e; }
[data-layout="globe"] [data-nav="web"] { --glyph-color: #7fd2f0; }
[data-layout="globe"] [data-nav="search"] { --glyph-color: #9db8ff; }
[data-layout="globe"] [data-nav="reports"] { --glyph-color: #baa9f4; }
[data-layout="globe"] [data-nav="settings"] { --glyph-color: #a9c0e8; }
[data-layout="globe"] [data-nav="about"] { --glyph-color: #8edbd5; }

[data-layout="globe"] :is(.nav-item, .globe-scan-node) .globe-glyph {
  display: block;
  width: clamp(42px, calc(var(--globe-feature-size) * .33), 72px);
  height: clamp(42px, calc(var(--globe-feature-size) * .33), 72px);
  color: var(--glyph-color);
  stroke-width: 1.9;
  filter: drop-shadow(0 2px 3px #000c1a8c);
  /* Switching modes must not replay an entrance fade for every badge. */
}

/* Ink draws the shape, the badge colour marks the one detail that matters,
   and cut-out chips sit on top of the container they overlap. */
.globe-glyph { --glyph-ink: #f2f7ff; --glyph-cutout: #0c2141; overflow: visible; }
.globe-glyph .glyph-fill { fill: color-mix(in srgb, currentColor 15%, transparent); stroke: var(--glyph-ink); }
.globe-glyph .glyph-tint { fill: color-mix(in srgb, currentColor 15%, transparent); stroke: none; }
.globe-glyph .glyph-core { fill: var(--glyph-cutout); stroke: currentColor; }
.globe-glyph .glyph-bright { fill: currentColor; stroke: none; }
.globe-glyph .glyph-accent { stroke: currentColor; }
.globe-glyph .glyph-faint { stroke: var(--glyph-ink); opacity: .42; stroke-width: 1.45; }
.globe-glyph .glyph-dot { fill: var(--glyph-ink); opacity: .5; stroke: none; }
.globe-glyph .glyph-line { stroke: var(--glyph-ink); }
.globe-glyph .glyph-orbit { stroke-dasharray: 2.5 4; transform-origin: 24px 24px; }
.globe-glyph .glyph-moving { transform-origin: center; transform-box: fill-box; }

[data-layout="globe"] .globe-scan-node {
  --glyph-color: #c3d0ff;
  --badge-tint: #2541c4;
  --badge-face: color-mix(in srgb, var(--badge-tint) 80%, transparent);
  --badge-edge: #0a155acc;
  --badge-inlay: #c4d0ffa6;
}
[data-layout="globe"] .globe-scan-node .globe-glyph { --glyph-cutout: #1d34a6; }

[data-layout="globe"] .globe-scan-node strong { font-size: clamp(18px, calc(var(--globe-scan-size) * .102), 27px); }
[data-layout="globe"] .globe-scan-node small { font-size: clamp(11px, calc(var(--globe-scan-size) * .059), 15px); color: #d7e6ff; max-width: 100%; }
[data-layout="globe"] .globe-scan-node .badge-etch { animation: charge-breathe 2.8s ease-in-out infinite; }
[data-layout="globe"] .globe-scan-node.running {
  --glyph-color: #ffd08f;
  --badge-tint: #6a4312;
  --badge-edge: #2c1a05cc;
  --badge-inlay: #ffcf8ab3;
}

[data-layout="globe"] .globe-scan-node:enabled:hover { --badge-inlay: #e1e8ff; }
[data-layout="globe"] .globe-scan-node.running .glyph-orbit { animation: glyph-orbit 1.9s linear infinite; }

[data-layout="globe"] .nav-item.active,
[data-layout="globe"] .nav-item:hover {
  --badge-tint: #0f2a50;
  --badge-face: color-mix(in srgb, var(--badge-tint) 82%, transparent);
  --badge-inlay: color-mix(in srgb, var(--glyph-color) 85%, transparent);
  color: white;
}
[data-layout="globe"] .nav-item:hover .badge-etch { stroke-width: 1.8; }

[data-layout="globe"] :is(.nav-item, .globe-scan-node):focus-visible .badge-etch { stroke: #afbdff; stroke-width: 4; }
[data-layout="globe"] #globe-grip:focus-visible {
  outline: 3px solid #afbdff;
  outline-offset: 4px;
}

[data-layout="globe"] .spinning :is(.nav-item, .globe-scan-node) { cursor: grabbing; }
[data-layout="globe"] .nav-item:is(:hover, :focus-visible) .glyph-moving { animation: glyph-nudge .68s ease-in-out; }
[data-layout="globe"] .nav-item:is(:hover, :focus-visible) .glyph-sweep { animation: glyph-sweep .72s ease-in-out; }
[data-layout="globe"] .nav-item:is(:hover, :focus-visible) .glyph-orbit { animation: glyph-orbit 1.2s ease-out; }

@keyframes globe-fade { from { opacity: .45; } to { opacity: 1; } }
@keyframes glyph-arrive { from { opacity: .4; } to { opacity: 1; } }
@keyframes glyph-nudge { 45% { transform: translate(2px, -3px) scale(1.13); } }
@keyframes glyph-sweep { 34% { transform: translateY(-10px); } 72% { transform: translateY(10px); } }
@keyframes glyph-orbit { to { transform: rotate(360deg); } }
@keyframes charge-breathe { 50% { opacity: .5; } }

#globe-controls {
  position: absolute;
  bottom: 4%;
  left: 50%;
  translate: -50% 0;
  z-index: 5;
  width: 348px;
  height: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--globe-ink);
  font-size: 13px;
}

/* Optional actions have reserved slots, so their visibility and wording cannot
   move the arrows or replace a repeated navigation click with a scan click. */
.globe-direction-controls { display: grid; grid-template-columns: 36px 112px 36px; gap: 12px; height: 36px; flex: none; align-items: center; }
.globe-tool-controls { display: grid; grid-template-columns: 94px 122px 116px; column-gap: 8px; width: 348px; height: 30px; flex: none; }
#globe-run { grid-column: 1; grid-row: 1; }
#globe-report { grid-column: 2; grid-row: 1; }
#globe-weather { grid-column: 3; grid-row: 1; }

#globe-controls button {
  width: 36px;
  height: 36px;
  padding: 0 0 3px;
  border-radius: 50%;
  border: 1px solid var(--globe-line);
  background: var(--globe-control);
  color: inherit;
  font-size: 22px;
  line-height: 1;
}

#globe-controls button:hover { background: #24575f; }
#globe-controls :is(#globe-run, #globe-report, #globe-weather) {
  width: 100%;
  height: 30px;
  border-radius: 999px;
  padding: 0 6px;
  font-size: 11px;
  white-space: nowrap;
}
#globe-weather[aria-pressed="false"] { color: var(--globe-muted); }
#globe-grip { cursor: grab; touch-action: none; user-select: none; white-space: nowrap; display: grid; text-align: center; line-height: 1.3; }
#globe-grip small { font-size: 9px; color: var(--globe-muted); margin-top: 3px; }
#globe-grip:active { cursor: grabbing; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

[data-layout="globe"] #scan-station { display: none; }
.globe-page-stop { display: none; }

@media (max-width: 1050px) {
  [data-layout="globe"] .titlebar-right { gap: 4px; }
  [data-layout="globe"] .toolbar-button { padding-inline: 6px; }
  [data-layout="globe"] #theme-button { width: 30px; }
  [data-layout="globe"] .window-controls button { width: 24px; }
}

@media (max-height: 680px) {
  [data-layout="globe"] .titlebar { top: 7.5%; height: 34px; }
  [data-layout="globe"] .brand { font-size: 20px; gap: 6px; }
  [data-layout="globe"] .brand-mark, [data-layout="globe"] .brand-mark svg { width: 22px; }
  [data-layout="globe"] #globe-controls { height: 60px; width: 270px; gap: 4px; }
  [data-layout="globe"] .globe-direction-controls { height: 30px; }
  [data-layout="globe"] .globe-tool-controls { width: 270px; height: 26px; grid-template-columns: 78px 88px 96px; column-gap: 4px; }
  [data-layout="globe"] #globe-controls button { height: 30px; }
  [data-layout="globe"] #globe-controls :is(#globe-run, #globe-report, #globe-weather) { height: 26px; font-size: 9px; }
  .globe-page-heading { padding: 4px 11px 2px; gap: 4px; }
  .globe-page-symbol { width: 22px; height: 27px; }
  .globe-page-heading h1 { font-size: 12px; }
  .globe-page-foot { min-height: 22px; }
}

@media (forced-colors: active) {
  [data-layout="globe"] .badge-cut { fill: ButtonFace; stroke: ButtonText; }
  .globe-page { background: Canvas; border: 1px solid CanvasText; color: CanvasText; }
}

@media (prefers-reduced-motion: reduce) {
  [data-layout="globe"] :is(#globe-surface, .globe-glyph, .glyph-moving, .glyph-sweep, .glyph-orbit) { animation: none !important; }
  [data-layout="globe"] .globe-scan-node .badge-etch { animation: none; }
  .globe-page { animation: none; }
  .globe-page button { transition: none; }
}

/* Double-click reading mode: the Earth stays behind one large, scrollable page. */
[data-layout="globe"] .globe-page.is-expanded {
  mask-image: none;
  opacity: 1;
  border-radius: 32px;
  background: linear-gradient(140deg, #265866ee, #102f3bf5);
  --text: #f1faf7; --muted: #c3d9d7; --page-mark: #b5f1d7;
  --line: #badbd32e; --soft: #c6eee014; --surface-raised: #375d63;
  box-shadow: inset 0 1px 0 #d6fff159, 0 12px 50px #00152091;
}
.globe-page.is-expanded .globe-page-heading { padding: 19px 24px 13px; border-bottom: 1px solid var(--line); }
.globe-page.is-expanded .globe-page-heading h1 { font-size: clamp(19px, 2.5vw, 27px); }
.globe-page.is-expanded .globe-page-heading button { width: 32px; height: 32px; }
.globe-page-heading [data-globe-expand] { display: grid; place-items: center; }
.globe-page-heading [data-globe-expand] svg { width: 15px; height: 15px; }
.globe-page-heading [aria-expanded="true"][data-globe-expand] svg { transform: rotate(180deg) scale(.8); }
.globe-page.is-expanded .globe-page-body { padding: 20px 26px; scrollbar-width: auto; }
.globe-page.is-expanded .globe-page-body h2 { font-size: 18px; }
.globe-page.is-expanded .globe-page-body p { font-size: 13px; }
.globe-page.is-expanded .globe-page-foot { min-height: 14px; padding-inline: 26px; }
[data-layout="globe"][data-expanded-page] #navigation { visibility: hidden; }
[data-layout="globe"][data-expanded-page] #globe-run { visibility: hidden; }
@container (min-width: 560px) {
  .is-expanded .globe-page-content:has(> [data-column]) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
}

/* The figurine is stationary by default; only scan state activates movement. */
.runner-caption { max-width: 140px; font-size: 11px; line-height: 1.4; font-weight: 400; text-align: center; }
.scan-runner { transform-origin: 24px 23px; }
.runner-arm { transform-origin: 24px 14px; }
.runner-leg { transform-origin: 23px 21px; }
.scanner-light { stroke: #d4f56a; stroke-width: 2; opacity: .5; }
[data-layout="classic"] .switch-disc .globe-glyph { width: 76px; height: 76px; stroke-width: 2; --glyph-cutout: #2a45d0; }
.scanning .scan-runner { animation: scanner-runner-bob .32s ease-in-out infinite alternate; }
.scanning .runner-arm-left, .scanning .runner-leg-right { animation: scanner-stride .62s ease-in-out infinite alternate; }
.scanning .runner-arm-right, .scanning .runner-leg-left { animation: scanner-stride .62s ease-in-out infinite alternate-reverse; }
.scanning .scanner-light { animation: scanner-pass 1.5s ease-in-out infinite alternate; opacity: 1; }
.scanning.runner-dance .scan-runner { animation: scanner-running-man .45s ease-in-out infinite alternate; }
.scanning.runner-dance .runner-leg-left { animation: scanner-dance-step .45s ease-in-out infinite alternate; }
.scanning.runner-dance .runner-leg-right { animation: scanner-dance-step .45s ease-in-out infinite alternate-reverse; }
@keyframes scanner-runner-bob { from { transform: translateY(-1px) rotate(7deg); } to { transform: translateY(0) rotate(11deg); } }
@keyframes scanner-stride { from { transform: rotate(-29deg); } to { transform: rotate(29deg); } }
@keyframes scanner-pass { from { transform: translateY(0); } to { transform: translateY(2px); } }
@keyframes scanner-running-man { from { transform: translate(-1px, -1px) rotate(-5deg); } to { transform: translate(1px, 0) rotate(8deg); } }
@keyframes scanner-dance-step { from { transform: translateX(-2px) rotate(38deg); } to { transform: translateX(2px) rotate(-24deg); } }
[data-window-hidden] :is(.scan-runner, .scan-runner *, .scanner-light) { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .scan-runner, .scan-runner *, .scanner-light { animation: none !important; }
}