.satellite--observatory .satellite-light { transition: opacity .25s ease-out; }
.satellite--observatory .satellite-crystal { transition: opacity .22s ease-out; }
[data-satellite="observatory"][data-observatory-glow] .satellite-light {
  animation: cc-observatory-idle 2.25s ease-in-out both;
}
@keyframes cc-observatory-idle {
  0%, 100% { opacity: var(--ambient-light); }
  47% { opacity: .54; }
}
.satellite--observatory .satellite-crystal::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(113deg, transparent 46%, #f9e6ffb0 50%, transparent 53%);
}
[data-satellite="observatory"]:is([data-observatory-glow="shimmer"], :focus-visible) .satellite-crystal { opacity: .47; }
[data-satellite="observatory"]:focus-visible .satellite-light { opacity: .43; }
[data-satellite="observatory"][data-observatory-glow="shimmer"] .satellite-crystal::after {
  animation: cc-observatory-shimmer .95s .55s ease-in-out both;
}
@media (hover: hover) and (pointer: fine) {
  [data-satellite="observatory"]:hover .satellite-light { opacity: .48; }
  [data-satellite="observatory"]:hover .satellite-crystal { opacity: .58; }
  [data-satellite="observatory"]:hover:not([aria-expanded="true"]) .satellite-crystal::after {
    animation: cc-observatory-shimmer .75s ease-out both;
  }
}
@keyframes cc-observatory-shimmer {
  0% { transform: translateX(-16%); opacity: 0; }
  45% { opacity: .8; }
  100% { transform: translateX(15%); opacity: 0; }
}
[data-satellite="observatory"].is-still :is(.satellite-light, .satellite-crystal) { opacity: .61 !important; }
[data-satellite="observatory"][data-circuit-return]::after {
  content: "";
  position: absolute;
  inset: 5% 23% 50%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(ellipse, #efdcff9c, #c281f944 34%, transparent 70%);
  mix-blend-mode: screen;
  opacity: .49;
  animation: cc-observatory-return 1.25s ease-out both;
}
@keyframes cc-observatory-return {
  0%, 100% { opacity: 0; }
  35% { opacity: .62; transform: scale(1.1); }
}
.circuit-dock {
  position: relative;
  width: min(calc(100% - 16px), clamp(500px, 100svh - 194px, 640px));
  margin: clamp(18px, 4svh, 36px) auto 0;
  scroll-margin-top: max(12px, env(safe-area-inset-top, 0px));
}
.circuit-dock:not([hidden]):has(.circuit-game:not([hidden])) + .worlds {
  padding-block-start: clamp(32px, 4.7svh, 56px);
}
.circuit-dock[data-leaving] {
  pointer-events: none;
  animation: cc-dock-out .14s ease-in both;
}
@keyframes cc-dock-out { to { opacity: 0; transform: translateY(5px); } }
.circuit-invitation:not([hidden]) {
  display: flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 44px;
  margin-inline: auto;
  padding-inline: 10px 2px;
  border-block: 1px solid #b894755e;
  border-radius: 11px 3px 11px 3px;
  background: linear-gradient(111deg, #332343b8, #1b132bb8 75%, #26193752);
  box-shadow: 0 6px 26px #0e081a4d;
  animation: cc-signal-in .24s ease-out both;
}
@keyframes cc-signal-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.circuit-invite-copy { padding-block: 7px; }
.circuit-invite-copy small {
  display: block;
  margin: 2px 0 0 14px;
  color: #ccbbdc;
  font-size: 11px;
  line-height: 1.3;
}
.circuit-invitation p {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: #eadbf4;
  font: 500 13px/1.26 "Bitcount Prop Single", var(--mono);
}
.circuit-invitation p::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  align-self: center;
  transform: rotate(45deg);
  border-radius: 1px;
  background: #f5caff;
  box-shadow: 0 0 8px #e5aaff89;
}
.circuit-invitation button {
  min-width: 44px;
  min-height: 44px;
  padding: 0 7px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--dim);
  font-size: 13px;
  cursor: pointer;
  touch-action: manipulation;
}
.circuit-invitation [data-circuit-play] { margin-left: 4px; color: #ffd6a9; font-weight: 700; white-space: nowrap; }
.circuit-invitation [data-circuit-dismiss] { padding: 0; font-size: 18px; }
.circuit-invitation button:is(:hover,:active) { background: #d8b9f51b; color: var(--ink); }
.circuit-invitation button:focus-visible { outline: 2px solid #ffd6a9; outline-offset: -3px; }
.circuit-invitation button:disabled { cursor: wait; }
@media (max-width: 600px) {
  .circuit-dock { padding-bottom: env(safe-area-inset-bottom, 0px); }
}