#labels, #minimap, #web, #botbar .pill { transition: opacity .35s var(--out), visibility 0s linear .35s; }
html.globe3d-on #labels, html.globe3d-on #minimap, html.globe3d-on #web, html.globe3d-on #botbar .pill {
  opacity: 0 !important; visibility: hidden; pointer-events: none;
}

html.globe3d-on #viewport { cursor: grab; }
html.globe3d-on.g3-drag #viewport, html.globe3d-on.g3-drag #viewport * { cursor: grabbing !important; }
html.globe3d-on #world { transform-style: preserve-3d; }

html.globe3d-on .node { pointer-events: auto; cursor: pointer; backface-visibility: visible; }
html.globe3d-on .node:not(.g3-open), html.globe3d-on .node:not(.g3-open) * { cursor: pointer; }
html.globe3d-on .node:not(.g3-open) * { pointer-events: none !important; }
html.globe3d-on .node.g3-far { pointer-events: none; }
html.globe3d-on .node.g3-open { cursor: auto; }
html.globe3d-on .node::before, html.globe3d-on .node::after { display: none; }
html.globe3d-on .win {
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  transition: border-color .3s var(--out), background-color .3s var(--out);
}
html.globe3d-on .node.g3-hov .win { border-color: rgba(255, 255, 255, .42); background-color: var(--panel-2); }
html.globe3d-on .node.g3-open .win, html.globe3d-on .node.g3-open:hover .win { border-color: rgba(255, 255, 255, .3); }

.g3-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .6s var(--out); }
.g3-bg.g3-in { opacity: 1; }
.g3-stars { position: absolute; inset: 0; transform-origin: 50% 50%; }
.g3-layer { position: absolute; left: 0; top: 0; }
.g3-layer canvas { display: block; }
.g3-vig {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(11, 11, 11, 0) 38%, rgba(11, 11, 11, .78) 100%);
}
.g3-limb {
  position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .09);
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, .035) 96%, rgba(255, 255, 255, .06) 100%);
}
.g3-fx { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.g3-ring { position: absolute; left: -60px; top: -60px; width: 120px; height: 120px; opacity: 0; overflow: visible; }
.g3-ring circle { fill: none; stroke: #fff; stroke-width: 1px; vector-effect: non-scaling-stroke; }

.g3-sphere { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; --g3-wo: 0; pointer-events: none; }
.g3-ln {
  position: absolute; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, calc(.075 * var(--g3-wo)));
}
.g3-ln.eq { border-color: rgba(255, 255, 255, calc(.13 * var(--g3-wo))); }

.g3-shine {
  position: absolute; top: 0; bottom: 0; left: 0; width: 42%; z-index: 6; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .11) 46%, rgba(255, 255, 255, .04) 56%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-130%) skewX(-12deg);
}

.g3-hud, .g3-hint, .g3-back {
  position: fixed; z-index: 30; font: 11px/1 var(--mono); letter-spacing: .04em; color: var(--ink-2);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm);
  box-shadow: inset 0 1px 0 var(--glow);
  opacity: 0; transform: translateY(6px); transition: opacity .35s var(--out), transform .45s var(--out);
  user-select: none; -webkit-user-select: none;
}
.g3-hud.g3-in, .g3-hint.g3-in { opacity: 1; transform: none; }
.g3-hud { left: 16px; top: calc(var(--bar-h) + 20px); padding: 8px 10px; display: flex; gap: 12px; pointer-events: none; font-variant-numeric: tabular-nums; }
.g3-hud i { font-style: normal; color: var(--dim); margin-right: 5px; }
.g3-hud b { font-weight: 400; color: var(--ink); display: inline-block; min-width: 5.2ch; text-align: right; }
.g3-hud em { font-style: normal; color: var(--ink); min-width: 9ch; }
.g3-hint { left: 50%; bottom: 14px; margin-left: 0; padding: 9px 14px; white-space: nowrap; translate: -50% 0; pointer-events: none; }
.g3-back {
  left: 50%; top: calc(var(--bar-h) + 20px); translate: -50% 0; display: flex; align-items: center; gap: 9px; padding: 8px 12px; cursor: pointer;
  transform: translateY(-6px); pointer-events: none;
}
.g3-back.g3-in { opacity: 1; transform: none; pointer-events: auto; }
.g3-back kbd { font: inherit; padding: 2px 5px; border: 1px solid var(--line-2); border-radius: var(--r-xs); color: var(--ink); }
.g3-back kbd::before, .g3-back kbd::after { content: none; }
.g3-back b { font-weight: 400; color: var(--ink); }
.g3-back:hover { border-color: var(--line-2); color: var(--ink); }
.g3-back:active { transform: scale(.97); }
.g3-back:focus-visible { outline: 1px solid rgba(255, 255, 255, .5); outline-offset: 2px; }

@media (max-width: 760px) {
  .g3-hud, .g3-hint, .g3-back, .g3-bg { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .g3-bg, .g3-hud, .g3-hint, .g3-back { transition-duration: .01s; }
}