/* A quiet decorative enhancement; the immutable v003 sheet owns the UI. */
body { isolation: isolate; }
.cosmic-scene {
  position: fixed;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: strict;
}
.cosmic-scene > span { position: absolute; display: block; pointer-events: none; }
.cosmic-nebula {
  inset: -5%;
  background:
    radial-gradient(ellipse at 84% 18%, #547c763b, transparent 46%),
    radial-gradient(ellipse at 96% 68%, #596a8020, transparent 44%),
    radial-gradient(ellipse at 12% 87%, #606f301c, transparent 42%);
  animation: cosmic-cloud-drift 180s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.cosmic-stars-far {
  inset: 0;
  background:
    radial-gradient(circle at 4% 11%, #c8d5c340 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 9% 43%, #c8d5c340 0 0.52px, transparent 1.4px),
    radial-gradient(circle at 13% 81%, #c8d5c340 0 0.52px, transparent 1.4px),
    radial-gradient(circle at 16% 24%, #c8d5c340 0 0.52px, transparent 1.4px),
    radial-gradient(circle at 20% 66%, #c8d5c340 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 24% 7%, #c8d5c340 0 0.52px, transparent 1.4px),
    radial-gradient(circle at 28% 45%, #c8d5c340 0 0.52px, transparent 1.4px),
    radial-gradient(circle at 32% 88%, #c8d5c340 0 0.52px, transparent 1.4px),
    radial-gradient(circle at 36% 18%, #c8d5c340 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 39% 61%, #c8d5c340 0 0.52px, transparent 1.4px),
    radial-gradient(circle at 42% 35%, #c8d5c340 0 0.52px, transparent 1.4px),
    radial-gradient(circle at 47% 77%, #c8d5c340 0 0.52px, transparent 1.4px),
    radial-gradient(circle at 51% 9%, #c8d5c340 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 54% 53%, #c8d5c340 0 0.52px, transparent 1.4px),
    radial-gradient(circle at 57% 93%, #c8d5c340 0 0.52px, transparent 1.4px),
    radial-gradient(circle at 61% 27%, #c8d5c340 0 0.52px, transparent 1.4px),
    radial-gradient(circle at 64% 69%, #c8d5c340 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 68% 12%, #c8d5c340 0 0.52px, transparent 1.4px),
    radial-gradient(circle at 70% 46%, #c8d5c340 0 0.52px, transparent 1.4px),
    radial-gradient(circle at 73% 84%, #c8d5c340 0 0.52px, transparent 1.4px),
    radial-gradient(circle at 76% 34%, #c8d5c340 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 79% 58%, #c8d5c340 0 0.52px, transparent 1.4px),
    radial-gradient(circle at 81% 7%, #c8d5c340 0 0.52px, transparent 1.4px),
    radial-gradient(circle at 84% 74%, #c8d5c340 0 0.52px, transparent 1.4px),
    radial-gradient(circle at 87% 22%, #c8d5c340 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 89% 94%, #c8d5c340 0 0.52px, transparent 1.4px),
    radial-gradient(circle at 91% 48%, #c8d5c340 0 0.52px, transparent 1.4px),
    radial-gradient(circle at 94% 65%, #c8d5c340 0 0.52px, transparent 1.4px),
    radial-gradient(circle at 96% 16%, #c8d5c340 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 98% 84%, #c8d5c340 0 0.52px, transparent 1.4px);
}
.cosmic-stars-near {
  inset: -24px;
  opacity: .8;
  background:
    radial-gradient(circle at 6% 28%, #d9e2d070 0 1px, transparent 1.6px),
    radial-gradient(circle at 12% 58%, #d9e2d070 0 0.65px, transparent 1.6px),
    radial-gradient(circle at 19% 14%, #d9e2d070 0 0.65px, transparent 1.6px),
    radial-gradient(circle at 27% 79%, #d9e2d070 0 0.65px, transparent 1.6px),
    radial-gradient(circle at 35% 31%, #d9e2d070 0 1px, transparent 1.6px),
    radial-gradient(circle at 43% 91%, #d9e2d070 0 0.65px, transparent 1.6px),
    radial-gradient(circle at 49% 42%, #d9e2d070 0 0.65px, transparent 1.6px),
    radial-gradient(circle at 59% 16%, #d9e2d070 0 0.65px, transparent 1.6px),
    radial-gradient(circle at 66% 81%, #d9e2d070 0 1px, transparent 1.6px),
    radial-gradient(circle at 72% 61%, #d9e2d070 0 0.65px, transparent 1.6px),
    radial-gradient(circle at 78% 23%, #d9e2d070 0 0.65px, transparent 1.6px),
    radial-gradient(circle at 83% 89%, #d9e2d070 0 0.65px, transparent 1.6px),
    radial-gradient(circle at 88% 39%, #d9e2d070 0 1px, transparent 1.6px),
    radial-gradient(circle at 93% 10%, #d9e2d070 0 0.65px, transparent 1.6px),
    radial-gradient(circle at 97% 56%, #d9e2d070 0 0.65px, transparent 1.6px);
  animation: cosmic-star-drift 150s linear infinite alternate;
  animation-play-state: paused;
}
/* Leave the reading column quieter than the open atmosphere around the diagram. */
.cosmic-scene::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, #090b0ab8, #090b0a40 46%, transparent 78%),
    radial-gradient(ellipse at 50% 45%, transparent 35%, #090b0a55 100%);
}
html[data-cosmic-motion="running"] .cosmic-nebula,
html[data-cosmic-motion="running"] .cosmic-stars-near {
  animation-play-state: running;
  will-change: transform;
}
.support-section {
  background: linear-gradient(135deg, #11170e88, #090b0ad9 70%);
}
.support-panel { background: linear-gradient(145deg, #171e13, #101510 70%); }
.site-footer { background: #090b0a99; }
.motion-setting { max-width: 310px; font-size: .75rem; line-height: 1.6; }
.cosmic-toggle {
  min-height: 44px; padding: 8px 0; border: 0; border-bottom: 1px solid #697364;
  background: transparent; color: var(--muted); font: inherit; text-align: left;
}
.cosmic-toggle:hover { color: var(--lime-soft); }
.cosmic-toggle[hidden], [data-cosmic-status][hidden] { display: none; }
.support-label-small { display: none; }
.header-nav .button .support-label-wide, .header-nav .button .support-label-small { font-size: inherit; line-height: inherit; }
@keyframes cosmic-cloud-drift {
  from { transform: translate3d(-12px, 8px, 0); }
  to { transform: translate3d(16px, -10px, 0); }
}
@keyframes cosmic-star-drift {
  from { transform: translate3d(-8px, 8px, 0); }
  to { transform: translate3d(16px, -12px, 0); }
}
@media (max-width: 600px) {
  .cosmic-nebula { opacity: .7; }
  .cosmic-stars-far { opacity: .55; }
  .cosmic-stars-near { opacity: .45; }
  .header-nav { gap: 8px; }
  .header-inner { gap: 10px; }
  .support-label-wide { display: none; }
  .support-label-small { display: inline; }
  .header-nav .button .support-label-small { font-size: .75rem; }
  .header-nav .button { gap: 8px; padding-inline: 12px; }
  .footer-inner { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
  .footer-inner > p:last-child { grid-column: 2; grid-row: 1; margin: 0; }
  .footer-inner .motion-setting { grid-column: 1 / -1; grid-row: 2; }
  .footer-inner .footer-signature { grid-column: 1 / -1; grid-row: 3; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cosmic-nebula, .cosmic-stars-near { animation: none !important; will-change: auto !important; }
}
@media (forced-colors: active) {
  .cosmic-scene { display: none; }
  .cosmic-toggle { border-color: ButtonText; }
}
@media print {
  .cosmic-scene, .motion-setting { display: none; }
}