/* Isolated, short-lived stage for the existing navigation bubble. */
.compose-flight {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  overflow: hidden;
  contain: layout paint;
  isolation: isolate;
}
.compose-flight-source,
.compose-flight-crab,
.compose-flight-bubble,
.compose-flight-pop,
.compose-flight-ring,
.compose-flight-droplet {
  position: absolute;
  display: block;
  transform: translate3d(0, 0, 0);
  transform-origin: center;
  pointer-events: none;
  will-change: transform, opacity;
}
.compose-flight-source { z-index: 3; }
.compose-flight-crab { z-index: 4; }
.compose-flight-crab svg { display: block; width: 100%; height: 100%; overflow: visible; }
.compose-flight-crab .nav-prop { display: none; }
.compose-flight-crab .nav-body { transform-box: view-box; transform-origin: 40px 45px; }
.compose-flight-crab .nav-legs { transform-box: view-box; transform-origin: 40px 49px; }
.compose-flight-crab .nav-arm-left { transform-box: view-box; transform-origin: 20px 35px; }
.compose-flight-crab .nav-arm-right { transform-box: view-box; transform-origin: 60px 35px; }
.compose-flight-crab .nav-body,.compose-flight-crab .nav-legs,.compose-flight-crab .nav-arm-left,.compose-flight-crab .nav-arm-right { will-change: transform; }
.compose-flight-source svg,
.compose-flight-bubble svg,
.compose-flight-pop svg { display: block; width: 100%; height: 100%; overflow: visible; }
.compose-flight-bubble { z-index: 2; }
.compose-flight-pop { z-index: 2; }
.compose-flight-ring { z-index: 1; border: 1.6px solid #201C22; border-radius: 50%; box-shadow: inset 0 0 0 3px currentColor; }
.compose-flight-droplet { z-index: 2; border-radius: 50%; background: currentColor; border: 1px solid #201C22; }
.phone-screen[data-compose-entering] .crab-compose [data-compose-piece] { opacity: 0; transform-origin: center; will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) {
  .compose-flight { display: none; }
  .phone-screen[data-compose-entering] .crab-compose [data-compose-piece] { opacity: 1; }
}