/* Controls stay outside the scaled illustrations. */
.am-ctl { position: absolute; z-index: 12; top: 24px; right: max(12px, var(--am-gutter, 40px)); width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #93a9ac; border-radius: 50%; background: #102329; color: #fff; font: 600 16px/1 sans-serif; cursor: pointer; }
.am-ctl[hidden] { display: none; }
.am-ctl:focus-visible { outline: 3px solid #ffb285; outline-offset: 4px; }
html.am-hold :is(.hb-say, .hb-reach, .hb-world, .hb-wall, .hb-globe) *,
html.am-hold :is(.hb-say, .hb-reach, .hb-world, .hb-wall, .hb-globe) *::before,
html.am-hold :is(.hb-say, .hb-reach, .hb-world, .hb-wall, .hb-globe) *::after,
html.am-hidden :is(.hb-say, .hb-reach, .hb-world, .hb-wall, .hb-globe) *,
html.am-hidden :is(.hb-say, .hb-reach, .hb-world, .hb-wall, .hb-globe) *::before,
html.am-hidden :is(.hb-say, .hb-reach, .hb-world, .hb-wall, .hb-globe) *::after { animation-play-state: paused !important; }
/* Each color change is a panel edge, rather than a clipped glow. */
.hb.hb-wall { border-radius: 40px 40px 0 0; margin-top: -40px; z-index: 1; }
.hb.hb-globe { border-radius: 40px 40px 0 0; margin-top: -40px; z-index: 2; }
.hb.hb-say { margin-top: -24px; }
.hb.hb-reach { padding-top: 80px; }
.hb.hb-world { padding-top: 80px; padding-bottom: 100px; }
html:not(.fxjs) .hb.hb-reach { background: #02090a; }
@media (max-width: 767px) {
  .am-ctl { top: 14px; }
  .hb.hb-wall, .hb.hb-globe { border-radius: 24px 24px 0 0; margin-top: -24px; }
  .hb.hb-say { margin-top: -20px; }
  .hb.hb-reach, .hb.hb-world { padding-top: 64px; }
  .hb.hb-world { padding-bottom: 88px; }
}