/* Ported from Atmosphere Money EcosystemOrbit.tsx and globals.css. */
.atm-orbit {
  position: relative;
  width: min(560px, 92vw);
  aspect-ratio: 1;
  margin: 0 auto;
  isolation: isolate;
}

.atm-orbit-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(244, 166, 63, 0.18),
    transparent 68%
  );
  filter: blur(14px);
  transform: translate(-50%, -50%);
  z-index: 0;
}

.atm-orbit-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(4.4rem, 15%, 6rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: var(--text-strong);
  transform: translate(-50%, -50%);
  z-index: 5;
}

.atm-orbit-core::before {
  content: "";
  position: absolute;
  inset: 8%;
  background: currentColor;
  -webkit-mask: url("assets/atmosphere-symbol.svg") center / contain no-repeat;
  mask: url("assets/atmosphere-symbol.svg") center / contain no-repeat;
  filter: drop-shadow(0 0 12px rgba(244, 166, 63, 0.32));
}

.atm-orbit-core img {
  display: none;
}

.atm-orbit-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(100%, 28rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 3;
}

.atm-orbit-ring::before,
.atm-orbit-ring::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.atm-orbit-ring::before {
  width: 56%;
  opacity: 0.7;
}
.atm-orbit-ring::after {
  width: 88%;
  opacity: 0.5;
}

.atm-orbit .app-icon {
  --app-x: -50%;
  --app-y: -50%;
  --app-size: clamp(1.6rem, 4vw, 2.55rem);
  --app-rotate: 0deg;
  --app-drift-x: 0.16rem;
  --app-drift-y: 0.5rem;
  --app-speed: 7.6s;
  --app-delay: 0s;
  position: absolute;
  left: var(--app-left, 50%);
  top: var(--app-top, 50%);
  z-index: 4;
  width: var(--app-size);
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: clamp(0.85rem, 2.2vw, 1.4rem);
  background: var(--card);
  box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.4);
  transform: translate3d(var(--app-x), var(--app-y), 0)
    rotate(var(--app-rotate));
  animation: atmOrbitFloat var(--app-speed) ease-in-out infinite;
  animation-delay: var(--app-delay);
}

.atm-orbit .app-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* grain.svg is a black silhouette on transparent — give it a light tile +
   contain so it reads on the dark orbit (every other orbit icon is an opaque
   raster that fills the tile). */
.atm-orbit .app-grain {
  background: #fff;
}
.atm-orbit .app-grain img {
  object-fit: contain;
  padding: 16%;
}

.atm-orbit .inner-ring {
  --app-size: clamp(1.9rem, 4.4vw, 2.85rem);
  z-index: 5;
}
.atm-orbit .outer-ring {
  --app-size: clamp(1.1rem, 2.7vw, 1.75rem);
  z-index: 4;
}

.atm-orbit .app-bluesky {
  --app-left: 78%;
  --app-top: 50%;
  --app-rotate: -4deg;
  --app-delay: -1.1s;
}
.atm-orbit .app-spark {
  --app-left: 69.8%;
  --app-top: 30.2%;
  --app-size: clamp(1.9rem, 4.4vw, 2.85rem);
  --app-rotate: 5deg;
  --app-delay: -2.3s;
}
.atm-orbit .app-margin {
  --app-left: 90.2%;
  --app-top: 33.3%;
  --app-rotate: 6deg;
  --app-delay: -4.4s;
}
.atm-orbit .app-mu {
  --app-size: clamp(2.6rem, 6vw, 3.8rem);
  --app-left: 30.2%;
  --app-top: 30.2%;
  --app-rotate: -7deg;
  --app-delay: -0.9s;
}
.atm-orbit .app-blacksky {
  --app-left: 69.8%;
  --app-top: 69.8%;
  --app-rotate: 3deg;
  --app-delay: -5.1s;
}
.atm-orbit .app-stream-place {
  --app-left: 50%;
  --app-top: 22%;
  --app-size: clamp(1.8rem, 4.2vw, 2.7rem);
  --app-rotate: -3deg;
  --app-delay: -2.7s;
  border-radius: 20%;
  background: #111113;
}
.atm-orbit .app-popfeed {
  --app-left: 50%;
  --app-top: 93.5%;
  --app-rotate: 3deg;
  --app-delay: -3s;
}
.atm-orbit .app-offprint {
  --app-left: 33.3%;
  --app-top: 90.2%;
  --app-rotate: -5deg;
  --app-delay: -1.7s;
}
.atm-orbit .app-leaflet {
  --app-left: 22%;
  --app-top: 50%;
  --app-rotate: 2deg;
  --app-delay: -0.4s;
}
.atm-orbit .app-germ {
  --app-left: 80.8%;
  --app-top: 80.8%;
  --app-rotate: -2deg;
  --app-delay: -2.8s;
}
.atm-orbit .app-anisota {
  --app-left: 80.8%;
  --app-top: 19.2%;
  --app-rotate: -5deg;
  --app-delay: -3.9s;
}
.atm-orbit .app-tangled {
  --app-left: 50%;
  --app-top: 78%;
  --app-rotate: 5deg;
  --app-delay: -1.4s;
}
.atm-orbit .app-semble {
  --app-left: 9.8%;
  --app-top: 66.7%;
  --app-rotate: 1deg;
  --app-delay: -4.9s;
}
.atm-orbit .app-beacon-bits {
  --app-left: 50%;
  --app-top: 6.5%;
  --app-rotate: 4deg;
  --app-delay: -3.2s;
}
.atm-orbit .app-plyr {
  --app-left: 30.2%;
  --app-top: 69.8%;
  --app-rotate: -7deg;
  --app-delay: -3.6s;
}
.atm-orbit .app-pckt {
  --app-left: 93.5%;
  --app-top: 50%;
  --app-rotate: 7deg;
  --app-delay: -1.9s;
}
.atm-orbit .app-grain {
  --app-left: 66.7%;
  --app-top: 9.8%;
  --app-rotate: -3deg;
  --app-delay: -5.6s;
}
.atm-orbit .app-northsky {
  --app-left: 19.2%;
  --app-top: 19.2%;
  --app-rotate: 4deg;
  --app-delay: -2.1s;
}
.atm-orbit .app-cartridge {
  --app-left: 90.2%;
  --app-top: 66.7%;
  --app-rotate: -6deg;
  --app-delay: -3.4s;
}
.atm-orbit .app-smoke-signal {
  --app-left: 66.7%;
  --app-top: 90.2%;
  --app-rotate: 5deg;
  --app-delay: -4.2s;
}
.atm-orbit .app-blento {
  --app-left: 19.2%;
  --app-top: 80.8%;
  --app-rotate: -3deg;
  --app-delay: -0.7s;
}
.atm-orbit .app-surf {
  --app-left: 6.5%;
  --app-top: 50%;
  --app-rotate: 3deg;
  --app-delay: -5.2s;
}
.atm-orbit .app-sifa {
  --app-left: 33.3%;
  --app-top: 9.8%;
  --app-rotate: -2deg;
  --app-delay: -1.5s;
}
.atm-orbit .app-sill {
  --app-left: 9.8%;
  --app-top: 33.3%;
  --app-rotate: 5deg;
  --app-delay: -2.9s;
}

@keyframes atmOrbitFloat {
  0%,
  100% {
    transform: translate3d(var(--app-x), var(--app-y), 0)
      rotate(var(--app-rotate));
  }
  50% {
    transform: translate3d(
        calc(var(--app-x) + var(--app-drift-x)),
        calc(var(--app-y) - var(--app-drift-y)),
        0
      )
      rotate(calc(var(--app-rotate) * -1));
  }
}


/* Ecosystem orbit third/fourth ring — ghost cloud ported verbatim from
   atmosphere-account (static/styles.css), scoped under .atm-orbit. Small,
   barely-blurred, colourful constellation tiles. */
.atm-orbit .app-ghost-cloud {
  position: absolute;
  inset: -2%;
  z-index: 3;
  isolation: isolate;
  pointer-events: none;
}

.atm-orbit .app-ghost-cloud::before,
.atm-orbit .app-ghost-cloud::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  aspect-ratio: 1;
  border: 1px solid rgba(23, 30, 66, 0.12);
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
}

.atm-orbit .app-ghost-cloud::before {
  width: 108%;
  opacity: 0.72;
}

.atm-orbit .app-ghost-cloud::after {
  display: block;
  width: 124%;
  opacity: 0.5;
}

.atm-orbit .ghost-app {
  --ghost-left: 50%;
  --ghost-top: 50%;
  --ghost-size: clamp(0.62rem, 1.24vw, 0.88rem);
  --ghost-blur: 0.9px;
  --ghost-opacity: 0.4;
  --ghost-hue: 0deg;
  --ghost-tilt: 0deg;
  --ghost-drift-x: 0.06rem;
  --ghost-drift-y: 0.14rem;
  --ghost-speed: 10.8s;
  --ghost-delay: -0.6s;
  --ghost-bg: linear-gradient(135deg, #42c9ff, #fb4ea3 58%, #e7ff53);
  --ghost-border-color: rgba(23, 30, 66, 0.16);
  --ghost-radius: 30%;
  position: absolute;
  left: var(--ghost-left);
  top: var(--ghost-top);
  z-index: 1;
  width: var(--ghost-size);
  aspect-ratio: 1;
  display: block;
  overflow: hidden;
  border: 1px solid var(--ghost-border-color);
  border-radius: var(--ghost-radius);
  background: var(--ghost-bg);
  box-shadow:
    0 0.58rem 1.9rem rgba(23, 30, 66, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.52);
  filter: blur(var(--ghost-blur)) saturate(1.1) hue-rotate(var(--ghost-hue));
  opacity: var(--ghost-opacity);
  transform: translate(-50%, -50%) rotate(var(--ghost-tilt));
  animation: ghostConstellationFloat var(--ghost-speed) ease-in-out infinite;
  animation-delay: var(--ghost-delay);
}

.atm-orbit .ghost-app:nth-child(n + 25) {
  --ghost-size: clamp(0.42rem, 0.82vw, 0.58rem);
  --ghost-blur: 0.95px;
  --ghost-opacity: 0.34;
  --ghost-drift-x: 0.05rem;
  --ghost-drift-y: 0.11rem;
}

.atm-orbit .ghost-app:nth-child(4n + 1) {
  --ghost-drift-x: -0.07rem;
  --ghost-drift-y: 0.16rem;
  --ghost-speed: 11.4s;
  --ghost-delay: -1.8s;
}

.atm-orbit .ghost-app:nth-child(4n + 2) {
  --ghost-drift-x: 0.08rem;
  --ghost-drift-y: 0.12rem;
  --ghost-speed: 10.1s;
  --ghost-delay: -3.2s;
}

.atm-orbit .ghost-app:nth-child(4n + 3) {
  --ghost-drift-x: 0.04rem;
  --ghost-drift-y: 0.18rem;
  --ghost-speed: 12.2s;
  --ghost-delay: -4.4s;
}

.atm-orbit .ghost-app:nth-child(4n) {
  --ghost-drift-x: -0.05rem;
  --ghost-drift-y: 0.13rem;
  --ghost-speed: 10.8s;
  --ghost-delay: -2.5s;
}

.atm-orbit .ghost-app::before,
.atm-orbit .ghost-app::after {
  content: "";
  position: absolute;
  pointer-events: none;
  display: block;
  border: 0;
  box-shadow: none;
}

.atm-orbit .ghost-app:nth-child(6n + 1) {
  --ghost-bg: #ff6657;
  --ghost-border-color: rgba(23, 30, 66, 0.13);
  --ghost-radius: 34%;
}

.atm-orbit .ghost-app:nth-child(6n + 1)::before {
  left: 24%;
  top: 22%;
  width: 12%;
  height: 56%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow:
    calc(var(--ghost-size) * 0.22) 0 0 rgba(255, 255, 255, 0.88),
    calc(var(--ghost-size) * 0.44) 0 0 rgba(255, 255, 255, 0.88);
}

.atm-orbit .ghost-app:nth-child(6n + 1)::after {
  display: none;
}

.atm-orbit .ghost-app:nth-child(6n + 2) {
  --ghost-bg: #10131f;
  --ghost-border-color: rgba(255, 255, 255, 0.2);
  --ghost-radius: 26%;
}

.atm-orbit .ghost-app:nth-child(6n + 2)::before {
  inset: 18%;
  border: calc(var(--ghost-size) * 0.075) solid rgba(91, 157, 255, 0.86);
  border-radius: 50%;
  background: transparent;
}

.atm-orbit .ghost-app:nth-child(6n + 2)::after {
  left: 42%;
  top: 42%;
  width: 16%;
  height: 16%;
  border-radius: 50%;
  background: rgba(91, 157, 255, 0.92);
  transform: none;
}

.atm-orbit .ghost-app:nth-child(6n + 3) {
  --ghost-bg: #e7ff53;
  --ghost-border-color: rgba(72, 118, 42, 0.24);
  --ghost-radius: 28%;
}

.atm-orbit .ghost-app:nth-child(6n + 3)::before {
  left: 22%;
  top: 18%;
  width: 58%;
  height: 54%;
  border-radius: 64% 48% 56% 42%;
  background: rgba(72, 118, 42, 0.78);
  transform: rotate(-30deg);
}

.atm-orbit .ghost-app:nth-child(6n + 3)::after {
  left: 27%;
  top: 49%;
  width: 47%;
  height: 9%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  transform: rotate(-30deg);
}

.atm-orbit .ghost-app:nth-child(6n + 4) {
  --ghost-bg: #5a48f3;
  --ghost-border-color: rgba(255, 255, 255, 0.18);
  --ghost-radius: 50% 42% 46% 34%;
}

.atm-orbit .ghost-app:nth-child(6n + 4)::before {
  left: 31%;
  top: 31%;
  width: 38%;
  height: 38%;
  border-radius: 18%;
  background: rgba(255, 255, 255, 0.88);
  transform: rotate(45deg);
}

.atm-orbit .ghost-app:nth-child(6n + 4)::after {
  left: 54%;
  top: 20%;
  width: 13%;
  height: 13%;
  border-radius: 50%;
  background: rgba(231, 255, 83, 0.9);
  transform: none;
}

.atm-orbit .ghost-app:nth-child(6n + 5) {
  --ghost-bg: #fff8df;
  --ghost-border-color: rgba(23, 30, 66, 0.18);
  --ghost-radius: 19%;
}

.atm-orbit .ghost-app:nth-child(6n + 5)::before {
  left: 19%;
  top: 26%;
  width: 62%;
  height: 16%;
  border-radius: 999px;
  background: rgba(23, 30, 66, 0.78);
}

.atm-orbit .ghost-app:nth-child(6n + 5)::after {
  left: 24%;
  top: 56%;
  width: 52%;
  height: 18%;
  border-radius: 999px;
  background: rgba(251, 78, 163, 0.72);
  transform: none;
}

.atm-orbit .ghost-app:nth-child(6n) {
  --ghost-bg: #42c9ff;
  --ghost-border-color: rgba(23, 30, 66, 0.12);
  --ghost-radius: 42%;
}

.atm-orbit .ghost-app:nth-child(6n)::before {
  left: 19%;
  top: 25%;
  width: 27%;
  height: 32%;
  border-radius: 62% 46% 62% 46%;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: calc(var(--ghost-size) * 0.32) 0 0 rgba(255, 255, 255, 0.88);
}

.atm-orbit .ghost-app:nth-child(6n)::after {
  left: 36%;
  top: 57%;
  width: 28%;
  height: 19%;
  border-radius: 50%;
  background: rgba(23, 30, 66, 0.34);
  transform: none;
}

.atm-orbit .ghost-app:nth-child(1) {
  --ghost-left: 50%;
  --ghost-top: -3.5%;
  --ghost-hue: 58deg;
  --ghost-tilt: 8deg;
}

.atm-orbit .ghost-app:nth-child(2) {
  --ghost-left: 63.8%;
  --ghost-top: -1.7%;
  --ghost-hue: 116deg;
  --ghost-tilt: 0deg;
}

.atm-orbit .ghost-app:nth-child(3) {
  --ghost-left: 76.8%;
  --ghost-top: 3.7%;
  --ghost-hue: 174deg;
  --ghost-tilt: -8deg;
}

.atm-orbit .ghost-app:nth-child(4) {
  --ghost-left: 87.8%;
  --ghost-top: 12.2%;
  --ghost-hue: 232deg;
  --ghost-tilt: 15deg;
}

.atm-orbit .ghost-app:nth-child(5) {
  --ghost-left: 96.3%;
  --ghost-top: 23.3%;
  --ghost-hue: 290deg;
  --ghost-tilt: 7deg;
}

.atm-orbit .ghost-app:nth-child(6) {
  --ghost-left: 101.7%;
  --ghost-top: 36.2%;
  --ghost-hue: 348deg;
  --ghost-tilt: -1deg;
}

.atm-orbit .ghost-app:nth-child(7) {
  --ghost-left: 103.5%;
  --ghost-top: 50%;
  --ghost-hue: 46deg;
  --ghost-tilt: -9deg;
}

.atm-orbit .ghost-app:nth-child(8) {
  --ghost-left: 101.7%;
  --ghost-top: 63.8%;
  --ghost-hue: 104deg;
  --ghost-tilt: 14deg;
}

.atm-orbit .ghost-app:nth-child(9) {
  --ghost-left: 96.3%;
  --ghost-top: 76.8%;
  --ghost-hue: 162deg;
  --ghost-tilt: 6deg;
}

.atm-orbit .ghost-app:nth-child(10) {
  --ghost-left: 87.8%;
  --ghost-top: 87.8%;
  --ghost-hue: 220deg;
  --ghost-tilt: -2deg;
}

.atm-orbit .ghost-app:nth-child(11) {
  --ghost-left: 76.8%;
  --ghost-top: 96.3%;
  --ghost-hue: 278deg;
  --ghost-tilt: -10deg;
}

.atm-orbit .ghost-app:nth-child(12) {
  --ghost-left: 63.8%;
  --ghost-top: 101.7%;
  --ghost-hue: 336deg;
  --ghost-tilt: 13deg;
}

.atm-orbit .ghost-app:nth-child(13) {
  --ghost-left: 50%;
  --ghost-top: 103.5%;
  --ghost-hue: 34deg;
  --ghost-tilt: 5deg;
}

.atm-orbit .ghost-app:nth-child(14) {
  --ghost-left: 36.2%;
  --ghost-top: 101.7%;
  --ghost-hue: 92deg;
  --ghost-tilt: -3deg;
}

.atm-orbit .ghost-app:nth-child(15) {
  --ghost-left: 23.3%;
  --ghost-top: 96.3%;
  --ghost-hue: 150deg;
  --ghost-tilt: -11deg;
}

.atm-orbit .ghost-app:nth-child(16) {
  --ghost-left: 12.2%;
  --ghost-top: 87.8%;
  --ghost-hue: 208deg;
  --ghost-tilt: 12deg;
}

.atm-orbit .ghost-app:nth-child(17) {
  --ghost-left: 3.7%;
  --ghost-top: 76.8%;
  --ghost-hue: 266deg;
  --ghost-tilt: 4deg;
}

.atm-orbit .ghost-app:nth-child(18) {
  --ghost-left: -1.7%;
  --ghost-top: 63.8%;
  --ghost-hue: 324deg;
  --ghost-tilt: -4deg;
}

.atm-orbit .ghost-app:nth-child(19) {
  --ghost-left: -3.5%;
  --ghost-top: 50%;
  --ghost-hue: 22deg;
  --ghost-tilt: -12deg;
}

.atm-orbit .ghost-app:nth-child(20) {
  --ghost-left: -1.7%;
  --ghost-top: 36.2%;
  --ghost-hue: 80deg;
  --ghost-tilt: 11deg;
}

.atm-orbit .ghost-app:nth-child(21) {
  --ghost-left: 3.7%;
  --ghost-top: 23.2%;
  --ghost-hue: 138deg;
  --ghost-tilt: 3deg;
}

.atm-orbit .ghost-app:nth-child(22) {
  --ghost-left: 12.2%;
  --ghost-top: 12.2%;
  --ghost-hue: 196deg;
  --ghost-tilt: -5deg;
}

.atm-orbit .ghost-app:nth-child(23) {
  --ghost-left: 23.2%;
  --ghost-top: 3.7%;
  --ghost-hue: 254deg;
  --ghost-tilt: -13deg;
}

.atm-orbit .ghost-app:nth-child(24) {
  --ghost-left: 36.2%;
  --ghost-top: -1.7%;
  --ghost-hue: 312deg;
  --ghost-tilt: 10deg;
}

.atm-orbit .ghost-app:nth-child(25) {
  --ghost-left: 50%;
  --ghost-top: -11.8%;
  --ghost-hue: 352deg;
  --ghost-tilt: 8deg;
}

.atm-orbit .ghost-app:nth-child(26) {
  --ghost-left: 60.7%;
  --ghost-top: -10.9%;
  --ghost-hue: 41deg;
  --ghost-tilt: 0deg;
}

.atm-orbit .ghost-app:nth-child(27) {
  --ghost-left: 71.1%;
  --ghost-top: -8.1%;
  --ghost-hue: 90deg;
  --ghost-tilt: -8deg;
}

.atm-orbit .ghost-app:nth-child(28) {
  --ghost-left: 80.9%;
  --ghost-top: -3.5%;
  --ghost-hue: 139deg;
  --ghost-tilt: 15deg;
}

.atm-orbit .ghost-app:nth-child(29) {
  --ghost-left: 89.7%;
  --ghost-top: 2.7%;
  --ghost-hue: 188deg;
  --ghost-tilt: 7deg;
}

.atm-orbit .ghost-app:nth-child(30) {
  --ghost-left: 97.3%;
  --ghost-top: 10.3%;
  --ghost-hue: 237deg;
  --ghost-tilt: -1deg;
}

.atm-orbit .ghost-app:nth-child(31) {
  --ghost-left: 103.5%;
  --ghost-top: 19.1%;
  --ghost-hue: 286deg;
  --ghost-tilt: -9deg;
}

.atm-orbit .ghost-app:nth-child(32) {
  --ghost-left: 108.1%;
  --ghost-top: 28.9%;
  --ghost-hue: 335deg;
  --ghost-tilt: 14deg;
}

.atm-orbit .ghost-app:nth-child(33) {
  --ghost-left: 110.9%;
  --ghost-top: 39.3%;
  --ghost-hue: 24deg;
  --ghost-tilt: 6deg;
}

.atm-orbit .ghost-app:nth-child(34) {
  --ghost-left: 111.8%;
  --ghost-top: 50%;
  --ghost-hue: 73deg;
  --ghost-tilt: -2deg;
}

.atm-orbit .ghost-app:nth-child(35) {
  --ghost-left: 110.9%;
  --ghost-top: 60.7%;
  --ghost-hue: 122deg;
  --ghost-tilt: -10deg;
}

.atm-orbit .ghost-app:nth-child(36) {
  --ghost-left: 108.1%;
  --ghost-top: 71.1%;
  --ghost-hue: 171deg;
  --ghost-tilt: 13deg;
}

.atm-orbit .ghost-app:nth-child(37) {
  --ghost-left: 103.5%;
  --ghost-top: 80.9%;
  --ghost-hue: 220deg;
  --ghost-tilt: 5deg;
}

.atm-orbit .ghost-app:nth-child(38) {
  --ghost-left: 97.3%;
  --ghost-top: 89.7%;
  --ghost-hue: 269deg;
  --ghost-tilt: -3deg;
}

.atm-orbit .ghost-app:nth-child(39) {
  --ghost-left: 89.7%;
  --ghost-top: 97.3%;
  --ghost-hue: 318deg;
  --ghost-tilt: -11deg;
}

.atm-orbit .ghost-app:nth-child(40) {
  --ghost-left: 80.9%;
  --ghost-top: 103.5%;
  --ghost-hue: 7deg;
  --ghost-tilt: 12deg;
}

.atm-orbit .ghost-app:nth-child(41) {
  --ghost-left: 71.1%;
  --ghost-top: 108.1%;
  --ghost-hue: 56deg;
  --ghost-tilt: 4deg;
}

.atm-orbit .ghost-app:nth-child(42) {
  --ghost-left: 60.7%;
  --ghost-top: 110.9%;
  --ghost-hue: 105deg;
  --ghost-tilt: -4deg;
}

.atm-orbit .ghost-app:nth-child(43) {
  --ghost-left: 50%;
  --ghost-top: 111.8%;
  --ghost-hue: 154deg;
  --ghost-tilt: -12deg;
}

.atm-orbit .ghost-app:nth-child(44) {
  --ghost-left: 39.3%;
  --ghost-top: 110.9%;
  --ghost-hue: 203deg;
  --ghost-tilt: 11deg;
}

.atm-orbit .ghost-app:nth-child(45) {
  --ghost-left: 28.9%;
  --ghost-top: 108.1%;
  --ghost-hue: 252deg;
  --ghost-tilt: 3deg;
}

.atm-orbit .ghost-app:nth-child(46) {
  --ghost-left: 19.1%;
  --ghost-top: 103.5%;
  --ghost-hue: 301deg;
  --ghost-tilt: -5deg;
}

.atm-orbit .ghost-app:nth-child(47) {
  --ghost-left: 10.3%;
  --ghost-top: 97.3%;
  --ghost-hue: 350deg;
  --ghost-tilt: -13deg;
}

.atm-orbit .ghost-app:nth-child(48) {
  --ghost-left: 2.7%;
  --ghost-top: 89.7%;
  --ghost-hue: 39deg;
  --ghost-tilt: 10deg;
}

.atm-orbit .ghost-app:nth-child(49) {
  --ghost-left: -3.5%;
  --ghost-top: 80.9%;
  --ghost-hue: 88deg;
  --ghost-tilt: 8deg;
}

.atm-orbit .ghost-app:nth-child(50) {
  --ghost-left: -8.1%;
  --ghost-top: 71.1%;
  --ghost-hue: 137deg;
  --ghost-tilt: 0deg;
}

.atm-orbit .ghost-app:nth-child(51) {
  --ghost-left: -10.9%;
  --ghost-top: 60.7%;
  --ghost-hue: 186deg;
  --ghost-tilt: -8deg;
}

.atm-orbit .ghost-app:nth-child(52) {
  --ghost-left: -11.8%;
  --ghost-top: 50%;
  --ghost-hue: 235deg;
  --ghost-tilt: 15deg;
}

.atm-orbit .ghost-app:nth-child(53) {
  --ghost-left: -10.9%;
  --ghost-top: 39.3%;
  --ghost-hue: 284deg;
  --ghost-tilt: 7deg;
}

.atm-orbit .ghost-app:nth-child(54) {
  --ghost-left: -8.1%;
  --ghost-top: 28.9%;
  --ghost-hue: 333deg;
  --ghost-tilt: -1deg;
}

.atm-orbit .ghost-app:nth-child(55) {
  --ghost-left: -3.5%;
  --ghost-top: 19.1%;
  --ghost-hue: 22deg;
  --ghost-tilt: -9deg;
}

.atm-orbit .ghost-app:nth-child(56) {
  --ghost-left: 2.7%;
  --ghost-top: 10.3%;
  --ghost-hue: 71deg;
  --ghost-tilt: 14deg;
}

.atm-orbit .ghost-app:nth-child(57) {
  --ghost-left: 10.3%;
  --ghost-top: 2.7%;
  --ghost-hue: 120deg;
  --ghost-tilt: 6deg;
}

.atm-orbit .ghost-app:nth-child(58) {
  --ghost-left: 19.1%;
  --ghost-top: -3.5%;
  --ghost-hue: 169deg;
  --ghost-tilt: -2deg;
}

.atm-orbit .ghost-app:nth-child(59) {
  --ghost-left: 28.9%;
  --ghost-top: -8.1%;
  --ghost-hue: 218deg;
  --ghost-tilt: -10deg;
}

.atm-orbit .ghost-app:nth-child(60) {
  --ghost-left: 39.3%;
  --ghost-top: -10.9%;
  --ghost-hue: 267deg;
  --ghost-tilt: 13deg;
}

@keyframes ghostConstellationFloat {
  0%,
  100% {
    transform: translate(-50%, -50%) rotate(var(--ghost-tilt));
  }

  50% {
    transform: translate(-50%, -50%)
      translate3d(var(--ghost-drift-x), calc(var(--ghost-drift-y) * -1), 0)
      rotate(calc(var(--ghost-tilt) * -1));
  }
}

@media (prefers-reduced-motion: reduce) {
  .atm-orbit .ghost-app {
    animation: none !important;
  }
}
/* Fit the original orbit into this page's two-column section. */
.atmosphere-visual{min-width:0;width:100%;aspect-ratio:1;display:grid;place-items:center}
.atmosphere-visual .atm-orbit{width:100%;max-width:560px;--text-strong:#efefec;--border:#ffffff1a;--card:#17171b}
.atmosphere-visual .atm-orbit-ring{width:min(80%,28rem)}
.atmosphere-visual .atm-orbit-core{color:#efefec}
@media(prefers-reduced-motion:reduce){.atm-orbit .app-icon,.atm-orbit .ghost-app{animation:none!important}}
/* Match the relative native Bluesky icon sizes at the mockup scale. */
.app-bottom [data-nav-item="home"] .ui-icon{width:21px;height:21px}
.app-bottom [data-nav-item="search"] .ui-icon{width:22px;height:22px}
.app-bottom [data-nav-item="dm"] .ui-icon{width:19px;height:19px}
.app-bottom [data-nav-item="notifications"] .ui-icon{width:20px;height:20px}
.app-bottom [data-nav-item="avatar"]{width:18px;height:18px}