/* ORBITA 16 · motion on first visibility, not on every scroll frame */
@keyframes orbita16-reveal {
  from { opacity: 0; transform: translate3d(0, 13px, 0) scale(.992); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes orbita16-heading {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
#app-shell .view.active .orbita16-revealed {
  animation: orbita16-reveal .46s cubic-bezier(.2,.72,.22,1) both !important;
  animation-delay: var(--orbita16-delay, 0ms) !important;
  backface-visibility: hidden;
}
#app-shell .view.active .orbita16-heading.orbita16-revealed {
  animation-name: orbita16-heading !important;
  animation-duration: .38s !important;
}
/* Não criar uma camada de GPU por cartão; os efeitos continuam no elemento visível. */
#app-shell .view.active :is(
  .panel,.metric-card,.shortcut-card,.explore-card,.menu-launch-card,
  .menu-ai-feature,.menu-quick-panel,.menu-category-visual,
  .orbita-visual-guide,.orbita-visual-card,.orbita-pulse-panel,.orbita-pulse-feature,
  .radar-panel,.quote-panel,.assessment-panel,.result-panel,.journey-intention-panel,
  .privacy-panel,.notifications-panel,.featured-task,.impulse-panel,
  .workspace-priority-panel,.workspace-quick-panel,.workspace-task-card,
  .workspace-routine-card,.workspace-vault-item,.workspace-capacity,
  .workspace-skill-trail,.workspace-skill-card,.workspace-feedback,
  .workspace-feedback-item,.workspace-return,.workspace-return-item,
  .nexus-hero,.nexus-section,.nexus-panel,.nexus-atlas-panel,
  .nexus-quest-panel,.nexus-ambient-card,.nexus-command-card,
  .nexus-museum-panel,.nexus-continuity-card,
  .orbita-lab-hero,.orbita-lab-section,.orbita-lab-action-card,
  .orbita-lab-panel,.orbita-workspace-panel,.orbita-focus-panel,
  .orbita-feedback-panel,
  .premium-hero,.premium-status-panel,.premium-pricing-section,
  .premium-plan-card,.premium-benefits-panel,
  .memory-hero,.memory-stat-card,.memory-card,.memory-saved-item,
  .memory-inspector-card,.memory-connect-card,
  .journal-entry,.mission-card,.opportunity-card,.my-course-card,
  .certificate-card,.orbit31-record-card,.orbit31-experiment-card,
  .orbit31-template-panel,.orbit31-flashcard-current,
  .orbit31-flashcard-list,.orbit31-access-panel,
  .help-status-panel,.help-guide-card,.orbit11-stat,.orbit11-form,
  .orbit11-board,.orbit11-next,.orbit11-record,
  .workspace-section-heading,.orbit31-section-heading,
  .nexus-section-head,.orbita-lab-section-title,
  .memory-panel-heading,.premium-section-heading,.workspace-growth-heading
) {
  transform: none;
}
#app-shell .view.active :is(
  .orbita16-revealed.panel,.orbita16-revealed.metric-card,
  .orbita16-revealed.shortcut-card,.orbita16-revealed.explore-card,
  .orbita16-revealed.menu-launch-card,.orbita16-revealed.memory-card,
  .orbita16-revealed.nexus-panel,.orbita16-revealed.orbita-lab-panel,
  .orbita16-revealed.workspace-task-card,.orbita16-revealed.workspace-routine-card
) {
  transform-origin: 50% 60%;
}
#app-shell .view.active :is(button.btn,.menu-pin-toggle,.memory-connect-this,
  .memory-related-row button,.workspace-skill-bottom button,
  .workspace-growth-links button,.workspace-return-actions button) {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  #app-shell .view.active :is(
    .panel,.metric-card,.shortcut-card,.explore-card,.menu-launch-card,
    .menu-ai-feature,.menu-quick-panel,.menu-category-visual,
    .orbita-visual-card,.memory-card,.memory-stat-card,.nexus-panel,
    .nexus-ambient-card,.orbita-lab-panel,.orbita-lab-action-card,
    .workspace-task-card,.workspace-routine-card,.workspace-skill-card,
    .premium-plan-card,.help-guide-card
  ):hover {
    transform: translate3d(0,-2px,0);
    border-color: rgba(112,225,244,.34);
    box-shadow: 0 10px 26px rgba(48,174,207,.09), 0 0 0 1px rgba(112,225,244,.08);
  }
}
@media (max-width:850px), (pointer:coarse) {
  /* Avoid browser viewport virtualization that can flash long cards while scrolling. */
  #app-shell .view.active :is(
    .journal-entry,.mission-card,.opportunity-card,.my-course-card,
    .certificate-card,.orbit31-record-card,.orbit31-experiment-card,
    .workspace-task-card,.workspace-routine-card,.workspace-vault-item,
    .memory-saved-item
  ) {
    content-visibility: visible !important;
    contain: none !important;
    contain-intrinsic-size: none !important;
  }
  #app-shell #view-menu .menu-directory-section {
    content-visibility: visible !important;
    contain: none !important;
    contain-intrinsic-size: none !important;
  }
  /* Keep fixed chrome visually stable throughout a finger scroll. */
  #app-shell .topbar,#app-shell .mobile-nav {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  #app-shell .topbar { background: rgba(12,9,20,.98) !important; }
}
@media (prefers-reduced-motion:reduce) {
  #app-shell .view.active .orbita16-revealed,
  #app-shell .view.active .orbita16-heading.orbita16-revealed {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}
@media (prefers-reduced-data:reduce) {
  #app-shell .view.active .orbita16-revealed {
    animation-duration: .2s !important;
  }
}

/* ORBITA 17 · do not animate the whole long page or every card at once */
#app-shell .view.active {
  animation: none !important;
  transform: none !important;
  filter: none !important;
}
#app-shell .view.active :is(
  .panel,.metric-card,.shortcut-card,.explore-card,.menu-launch-card,
  .menu-ai-feature,.menu-quick-panel,.menu-category-visual,
  .orbita-visual-guide,.orbita-visual-card,.orbita-pulse-panel,
  .orbita-pulse-feature,.radar-panel,.quote-panel,.assessment-panel,
  .result-panel,.journey-intention-panel,.privacy-panel,.notifications-panel,
  .featured-task,.impulse-panel,.workspace-priority-panel,.workspace-quick-panel,
  .workspace-task-card,.workspace-routine-card,.workspace-vault-item,
  .workspace-capacity,.workspace-skill-trail,.workspace-skill-card,
  .workspace-feedback,.workspace-feedback-item,.workspace-return,
  .workspace-return-item,.nexus-hero,.nexus-section,.nexus-panel,
  .nexus-atlas-panel,.nexus-quest-panel,.nexus-ambient-card,
  .nexus-command-card,.nexus-museum-panel,.nexus-continuity-card,
  .orbita-lab-hero,.orbita-lab-section,.orbita-lab-action-card,
  .orbita-lab-panel,.orbita-workspace-panel,.orbita-focus-panel,
  .orbita-feedback-panel,.premium-hero,.premium-status-panel,
  .premium-pricing-section,.premium-plan-card,.premium-benefits-panel,
  .memory-hero,.memory-stat-card,.memory-card,.memory-saved-item,
  .memory-inspector-card,.memory-connect-card,.journal-entry,.mission-card,
  .opportunity-card,.my-course-card,.certificate-card,.orbit31-record-card,
  .orbit31-experiment-card,.orbit31-template-panel,
  .orbit31-flashcard-current,.orbit31-flashcard-list,.orbit31-access-panel,
  .help-status-panel,.help-guide-card,.orbit11-stat,.orbit11-form,
  .orbit11-board,.orbit11-next,.orbit11-record,.workspace-section-heading,
  .orbit31-section-heading,.nexus-section-head,.orbita-lab-section-title,
  .memory-panel-heading,.premium-section-heading,.workspace-growth-heading
):not(.orbita16-revealed) {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #app-shell .view.active .orbita16-revealed,
  #app-shell .view.active .orbita16-heading.orbita16-revealed {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ORBITA 18 · rolagem sem alternância de classes, órbitas em movimento */
#app-shell .hero-orbit-art .orbit-spin {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  transform-origin: 50% 50%;
}
#app-shell .hero-orbit-art .orbit-spin-a {
  animation: orbita92-orbit-clockwise 22s linear infinite;
}
#app-shell .hero-orbit-art .orbit-spin-b {
  animation: orbita92-orbit-counter 34s linear infinite;
}
#app-shell .hero-orbit-art .orbit-spin-c {
  animation: orbita92-orbit-clockwise 48s linear infinite;
}
#app-shell .hero-orbit-art .orbit-spin .orbit-ring {
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}
#app-shell .hero-orbit-art .orbit-planet {
  position: absolute;
  top: 0;
  left: 50%;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(255,255,255,.76);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  box-shadow: 0 0 7px currentColor, 0 0 16px currentColor;
}
#app-shell .hero-orbit-art .planet-a {
  color: #78efff;
  background: radial-gradient(circle at 32% 28%, #fff, #70e7f5 52%, #286b9d);
}
#app-shell .hero-orbit-art .planet-b {
  width: 7px;
  height: 7px;
  color: #d5a1ff;
  background: radial-gradient(circle at 32% 28%, #fff, #c58aff 52%, #6135a0);
}
#app-shell .hero-orbit-art .planet-c {
  width: 5px;
  height: 5px;
  color: #fff;
  background: radial-gradient(circle at 32% 28%, #fff, #e5faff 65%, #74a8cb);
}
@keyframes orbita92-orbit-clockwise {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes orbita92-orbit-counter {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

/* No celular, mantém os brilhos e deixa os reflexos estáticos durante a rolagem. */
@media (hover: none), (pointer: coarse) {
  .ambient.ambient-one,
  .ambient.ambient-two {
    animation: none !important;
    will-change: auto !important;
  }
  #app-shell .topbar {
    animation: none !important;
  }
  #app-shell .topbar::after {
    animation: none !important;
    opacity: .58 !important;
  }
  #app-shell .view.active .panel::after,
  #app-shell .view.active .metric-card::after {
    animation: none !important;
    transform: translateX(0) !important;
    opacity: .34 !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  #app-shell .hero-orbit-art .orbit-spin {
    animation: none !important;
  }
}


/* ORBITA 19 · pintura estável no toque + sistema solar visível */
@media (hover: none), (pointer: coarse), (max-width: 850px) {
  /* O feixe fixo atravessava o viewport por cima do conteúdo durante a rolagem. */
  #app-shell::before,
  #app-shell::after {
    display: none !important;
    animation: none !important;
    opacity: 0 !important;
    transform: none !important;
    will-change: auto !important;
  }
  /* Mantém o desenho e as cores do menu, sem deslocar a tela inteira. */
  #app-shell #view-menu::before {
    animation: none !important;
    transform: none !important;
  }
  html, body {
    scroll-behavior: auto !important;
  }
}

/* Ecossistema orbital: os anéis permanecem estáveis; os planetas percorrem cada trilha. */
#app-shell .hero-orbit-art.orbit-system-art {
  width: 300px;
  height: 260px;
  flex: 0 0 300px;
  margin: 0 1% 0 0;
  isolation: isolate;
  filter: drop-shadow(0 12px 25px rgba(80, 65, 150, .22));
}
#app-shell .hero-orbit-art.orbit-system-art::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 2%;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(129, 77, 206, .18), transparent 22%),
    radial-gradient(circle at 20% 23%, rgba(111, 232, 255, .25) 0 1px, transparent 2px),
    radial-gradient(circle at 81% 31%, rgba(205, 167, 255, .7) 0 1px, transparent 2px),
    radial-gradient(circle at 76% 78%, rgba(117, 227, 246, .55) 0 1px, transparent 2px),
    radial-gradient(circle at 22% 73%, rgba(255, 255, 255, .6) 0 1px, transparent 2px);
  box-shadow: inset 0 0 48px rgba(99, 85, 194, .08);
}
#app-shell .hero-orbit-art.orbit-system-art::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 17%;
  border: 1px solid rgba(140, 124, 225, .12);
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(89, 212, 241, .08), inset 0 0 24px rgba(151, 94, 230, .08);
  pointer-events: none;
}
#app-shell .hero-orbit-art.orbit-system-art .orbit-spin {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  pointer-events: none;
  transform-origin: 50% 50%;
}
#app-shell .hero-orbit-art.orbit-system-art .orbit-spin-a {
  animation: orbita93-orbit-a 17s linear infinite;
}
#app-shell .hero-orbit-art.orbit-system-art .orbit-spin-b {
  animation: orbita93-orbit-b 26s linear infinite;
}
#app-shell .hero-orbit-art.orbit-system-art .orbit-spin-c {
  animation: orbita93-orbit-c 35s linear infinite;
}
#app-shell .hero-orbit-art.orbit-system-art .orbit-spin-d {
  animation: orbita93-orbit-d 46s linear infinite;
}
#app-shell .hero-orbit-art.orbit-system-art .orbit-spin .orbit-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  transform: none !important;
  animation: none !important;
  border-width: 1px;
  box-shadow: 0 0 12px rgba(83, 231, 245, .09), inset 0 0 12px rgba(180, 135, 255, .035);
}
#app-shell .hero-orbit-art.orbit-system-art .orbit-spin-a .ring-a {
  width: 91%;
  height: 34%;
  border-color: rgba(111, 230, 255, .62);
  border-style: solid;
}
#app-shell .hero-orbit-art.orbit-system-art .orbit-spin-b .ring-b {
  width: 66%;
  height: 76%;
  border-color: rgba(190, 143, 255, .60);
  border-style: solid;
}
#app-shell .hero-orbit-art.orbit-system-art .orbit-spin-c .ring-c {
  width: 50%;
  height: 51%;
  border-color: rgba(218, 207, 255, .47);
  border-style: dashed;
}
#app-shell .hero-orbit-art.orbit-system-art .orbit-spin-d .ring-d {
  width: 99%;
  height: 85%;
  border-color: rgba(99, 221, 239, .27);
  border-style: dotted;
}
#app-shell .hero-orbit-art.orbit-system-art .orbit-planet {
  position: absolute;
  top: -5px;
  left: 50%;
  display: block;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(255, 255, 255, .88);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 8px currentColor, 0 0 17px currentColor, 0 0 28px rgba(83, 231, 245, .22);
}
#app-shell .hero-orbit-art.orbit-system-art .planet-a {
  color: #76efff;
  background: radial-gradient(circle at 30% 25%, #fff 0 8%, #9af3ff 20%, #48b9e7 58%, #1a568d 100%);
}
#app-shell .hero-orbit-art.orbit-system-art .planet-b {
  width: 10px;
  height: 10px;
  color: #d8a6ff;
  background: radial-gradient(circle at 30% 25%, #fff 0 8%, #e4c2ff 22%, #a36ae5 60%, #51317f 100%);
}
#app-shell .hero-orbit-art.orbit-system-art .planet-c {
  width: 7px;
  height: 7px;
  color: #fff;
  background: radial-gradient(circle at 30% 25%, #fff, #d8ecff 55%, #7294d4);
}
#app-shell .hero-orbit-art.orbit-system-art .planet-d {
  width: 8px;
  height: 8px;
  color: #8dfff0;
  background: radial-gradient(circle at 30% 25%, #fff, #8dfff0 48%, #287d92);
}
#app-shell .hero-orbit-art.orbit-system-art .orbit-sun {
  position: relative;
  z-index: 4;
  width: 66px;
  height: 66px;
  background: radial-gradient(circle at 31% 24%, #fff 0 3%, #ffedff 9%, #e0b7ff 19%, #a568ed 42%, #583190 72%, #201636 100%);
  border: 1px solid rgba(255, 238, 255, .78);
  box-shadow:
    0 0 16px rgba(216, 174, 255, .78),
    0 0 38px rgba(173, 105, 246, .48),
    0 0 76px rgba(110, 87, 220, .22),
    inset -9px -10px 17px rgba(23, 12, 46, .54),
    inset 5px 5px 14px rgba(255, 255, 255, .36);
}
#app-shell .hero-orbit-art.orbit-system-art .orbit-sun-corona {
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(121, 232, 255, .32);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(106, 220, 246, .2), inset 0 0 12px rgba(198, 155, 255, .14);
  pointer-events: none;
}
#app-shell .hero-orbit-art.orbit-system-art .orbit-system-spark {
  position: absolute;
  z-index: 5;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 2px rgba(129, 229, 255, .8), 0 0 17px rgba(129, 229, 255, .45);
  pointer-events: none;
}
#app-shell .hero-orbit-art.orbit-system-art .spark-one { top: 18%; left: 22%; }
#app-shell .hero-orbit-art.orbit-system-art .spark-two { top: 75%; right: 19%; width: 3px; height: 3px; }
#app-shell .hero-orbit-art.orbit-system-art .spark-three { top: 24%; right: 17%; width: 2px; height: 2px; }
@keyframes orbita93-orbit-a { to { transform: rotate(360deg); } }
@keyframes orbita93-orbit-b { to { transform: rotate(-360deg); } }
@keyframes orbita93-orbit-c { to { transform: rotate(360deg); } }
@keyframes orbita93-orbit-d { to { transform: rotate(-360deg); } }

@media (max-width: 850px) {
  #app-shell .hero-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    align-items: center;
    gap: 5px;
    min-height: unset;
    padding: 18px 16px 10px;
  }
  #app-shell .hero-orbit-art.orbit-system-art {
    width: min(100%, 300px);
    max-width: 300px;
    height: 230px;
    flex: none;
    margin: 0 auto;
  }
}
@media (max-width: 560px) {
  #app-shell .hero-row { padding: 15px 13px 7px; }
  #app-shell .hero-orbit-art.orbit-system-art {
    width: min(100%, 286px);
    height: 218px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #app-shell .hero-orbit-art.orbit-system-art .orbit-spin {
    animation: none !important;
  }
}


/* ORBITA 20 · observatório orbital dedicado, visível e independente das classes antigas */
#app-shell .orbita-universe-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(210px, .78fr) minmax(0, 1.22fr);
  align-items: center;
  gap: clamp(12px, 2.5vw, 30px);
  min-height: 300px;
  margin: 12px 0 20px;
  padding: clamp(17px, 2.6vw, 27px);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(127, 196, 239, .24);
  border-radius: 25px;
  background:
    radial-gradient(ellipse at 78% 46%, rgba(80, 198, 230, .13), transparent 40%),
    radial-gradient(ellipse at 6% 0%, rgba(151, 92, 233, .20), transparent 43%),
    linear-gradient(128deg, rgba(23, 18, 40, .98), rgba(8, 17, 30, .98) 65%, rgba(14, 24, 39, .98));
  box-shadow: 0 18px 44px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.055);
}
#app-shell .orbita-universe-panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background-image:
    linear-gradient(rgba(151, 180, 230, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(151, 180, 230, .06) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(90deg, transparent, #000 50%, transparent);
}
#app-shell .orbita-universe-copy {
  position: relative;
  z-index: 2;
  max-width: 330px;
}
#app-shell .orbita-universe-copy h2 {
  margin: 10px 0 9px;
  font: 600 clamp(22px, 3vw, 34px)/1.1 'Space Grotesk', 'DM Sans', system-ui, sans-serif;
  letter-spacing: -.045em;
  color: #f7f2ff;
}
#app-shell .orbita-universe-copy h2 span {
  background: linear-gradient(100deg, #c99cff, #81eafa);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
#app-shell .orbita-universe-copy p {
  max-width: 300px;
  margin: 0;
  color: #ada6c0;
  font-size: 12px;
  line-height: 1.7;
}
#app-shell .orbita-universe-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 15px;
  margin-top: 22px;
  color: #aaa6bc;
  font-size: 9px;
  letter-spacing: .04em;
}
#app-shell .orbita-universe-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#app-shell .orbita-legend-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  box-shadow: 0 0 9px currentColor;
}
#app-shell .orbita-legend-dot.legend-cyan { color: #7cefff; background: #7cefff; }
#app-shell .orbita-legend-dot.legend-purple { color: #c99bff; background: #c99bff; }
#app-shell .orbita-legend-dot.legend-white { color: #dcefff; background: #dcefff; }
#app-shell .orbita-universe-scene {
  position: relative;
  z-index: 1;
  width: min(100%, 460px);
  height: 282px;
  margin: 0 auto;
  isolation: isolate;
  overflow: visible;
}
#app-shell .orbita-universe-nebula {
  position: absolute;
  z-index: 0;
  width: 56%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(28px);
  opacity: .4;
}
#app-shell .orbita-universe-nebula.nebula-one {
  top: 5%;
  left: 17%;
  background: rgba(128, 73, 227, .36);
}
#app-shell .orbita-universe-nebula.nebula-two {
  right: 4%;
  bottom: 0;
  width: 40%;
  background: rgba(52, 186, 219, .26);
}
#app-shell .orbita-universe-star {
  position: absolute;
  z-index: 4;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #e9f9ff;
  box-shadow: 0 0 7px 2px rgba(125, 225, 255, .56);
  pointer-events: none;
}
#app-shell .orbita-universe-star.star-one { top: 13%; left: 19%; }
#app-shell .orbita-universe-star.star-two { top: 24%; right: 14%; width: 2px; height: 2px; }
#app-shell .orbita-universe-star.star-three { bottom: 16%; left: 23%; width: 2px; height: 2px; }
#app-shell .orbita-universe-star.star-four { right: 25%; bottom: 11%; }
#app-shell .orbita-universe-orbit {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: var(--orbita-orbit-width);
  height: var(--orbita-orbit-height);
  transform: translate(-50%, -50%) rotate(var(--orbita-orbit-tilt));
  transform-origin: center;
}
#app-shell .orbita-universe-ring {
  position: absolute;
  inset: 0;
  display: block;
  border: 1px solid var(--orbita-orbit-color);
  border-radius: 50%;
  opacity: .78;
  box-shadow: 0 0 13px var(--orbita-orbit-glow), inset 0 0 10px rgba(177, 135, 255, .04);
}
#app-shell .orbita-universe-motion {
  position: absolute;
  inset: 0;
  display: block;
  transform-origin: 50% 50%;
  animation: orbita-universe-revolution var(--orbita-orbit-speed) linear infinite;
}
#app-shell .orbita-universe-orbit.orbit-two .orbita-universe-motion,
#app-shell .orbita-universe-orbit.orbit-four .orbita-universe-motion {
  animation-direction: reverse;
}
#app-shell .orbita-universe-orbit.orbit-one {
  --orbita-orbit-width: 96%;
  --orbita-orbit-height: 40%;
  --orbita-orbit-tilt: -13deg;
  --orbita-orbit-speed: 18s;
  --orbita-orbit-color: rgba(113, 229, 255, .76);
  --orbita-orbit-glow: rgba(70, 212, 246, .20);
}
#app-shell .orbita-universe-orbit.orbit-two {
  --orbita-orbit-width: 75%;
  --orbita-orbit-height: 67%;
  --orbita-orbit-tilt: 46deg;
  --orbita-orbit-speed: 26s;
  --orbita-orbit-color: rgba(198, 157, 255, .7);
  --orbita-orbit-glow: rgba(170, 111, 243, .2);
}
#app-shell .orbita-universe-orbit.orbit-three {
  --orbita-orbit-width: 57%;
  --orbita-orbit-height: 53%;
  --orbita-orbit-tilt: -57deg;
  --orbita-orbit-speed: 34s;
  --orbita-orbit-color: rgba(218, 230, 255, .52);
  --orbita-orbit-glow: rgba(185, 200, 250, .16);
}
#app-shell .orbita-universe-orbit.orbit-four {
  --orbita-orbit-width: 36%;
  --orbita-orbit-height: 34%;
  --orbita-orbit-tilt: 20deg;
  --orbita-orbit-speed: 13s;
  --orbita-orbit-color: rgba(111, 248, 229, .6);
  --orbita-orbit-glow: rgba(92, 236, 218, .18);
}
#app-shell .orbita-universe-planet {
  position: absolute;
  top: -6px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  transform: translateX(-50%);
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 24%, #fff 0 8%, #9ceeff 20%, #3488d6 64%, #14264d);
  box-shadow: 0 0 8px currentColor, 0 0 20px currentColor, 0 0 34px rgba(83, 231, 245, .22);
}
#app-shell .orbita-universe-planet i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  box-shadow: 0 0 5px #fff;
}
#app-shell .orbit-two .orbita-universe-planet {
  width: 11px;
  height: 11px;
  color: #d5a8ff;
  background: radial-gradient(circle at 30% 24%, #fff, #e2c3ff 22%, #a16ade 63%, #3a225e);
  box-shadow: 0 0 8px #c69aff, 0 0 20px rgba(186, 124, 250, .62);
}
#app-shell .orbit-three .orbita-universe-planet {
  width: 8px;
  height: 8px;
  color: #e4f8ff;
  background: radial-gradient(circle at 30% 24%, #fff, #d7ecff 58%, #7899ca);
}
#app-shell .orbit-four .orbita-universe-planet {
  width: 7px;
  height: 7px;
  color: #93fff0;
  background: radial-gradient(circle at 30% 24%, #fff, #93fff0 52%, #277c87);
  box-shadow: 0 0 7px #78fff0, 0 0 15px rgba(120, 255, 240, .55);
}
#app-shell .orbita-universe-core {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  display: block;
  width: 60px;
  height: 60px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255,241,255,.78);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 24%, #fff 0 3%, #ffedff 10%, #dfb9ff 21%, #a76cec 44%, #57308a 73%, #17132b 100%);
  box-shadow: 0 0 17px rgba(220, 178, 255, .82), 0 0 42px rgba(165, 101, 239, .58), 0 0 84px rgba(99, 120, 237, .24), inset -8px -9px 16px rgba(23,12,46,.45), inset 5px 5px 13px rgba(255,255,255,.38);
}
#app-shell .orbita-universe-core > i {
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(137,236,255,.5);
  border-radius: 50%;
  box-shadow: 0 0 13px rgba(112,226,255,.44), inset 0 0 9px rgba(112,226,255,.2);
}
#app-shell .orbita-universe-corona {
  position: absolute;
  inset: -13px;
  border: 1px solid rgba(124,226,255,.38);
  border-radius: 50%;
  box-shadow: 0 0 25px rgba(105,214,255,.26), inset 0 0 13px rgba(195,148,255,.2);
}
#app-shell .orbita-universe-caption {
  position: absolute;
  z-index: 6;
  right: 2%;
  bottom: 2%;
  color: rgba(159, 195, 217, .62);
  font-size: 7px;
  letter-spacing: .2em;
}
#app-shell .orbita-universe-caption b { color: #8beefa; }
@keyframes orbita-universe-revolution {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (max-width: 900px) {
  #app-shell .orbita-universe-panel {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 18px 15px 11px;
  }
  #app-shell .orbita-universe-copy {
    max-width: none;
    text-align: center;
  }
  #app-shell .orbita-universe-copy p {
    margin: 0 auto;
  }
  #app-shell .orbita-universe-legend {
    justify-content: center;
    margin-top: 12px;
  }
  #app-shell .orbita-universe-scene {
    width: min(100%, 390px);
    height: 250px;
  }
}
@media (max-width: 420px) {
  #app-shell .orbita-universe-panel {
    margin-top: 8px;
    padding-left: 11px;
    padding-right: 11px;
    border-radius: 19px;
  }
  #app-shell .orbita-universe-scene {
    width: 100%;
    height: 228px;
  }
  #app-shell .orbita-universe-copy h2 {
    font-size: 23px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #app-shell .orbita-universe-motion {
    animation: none !important;
  }
}