/* D/02 perimeter: violet → ice blue → rose. Both SVG layers share
   the same segment color so the existing animated glow stays in sync. */
:root { --rimColor: #c8baff; --worldColor1: #55515d; --shadowColor: #302e37; }
#engine .tick { color: #b7a5ff !important; }
.service-screen { position: absolute; inset: 0; pointer-events: none; }
.service-story h3 { font-size: 1rem; margin: 0 0 .5rem; color: #d0c4ff; }
.service-story p, .modules-sizes .box-heading p { font-size: .875rem; line-height: 1.4; color: #c7c5ce; margin: 0; }
.modules-sizes .box-heading { display: block; }
.modules-sizes :is(.modules-bundle-size,.modules-sizes-chart,.modules-list) { display: none; }
#draggable-demo { display: none; }
#engine :is(.output-progress, .output-progress-bg) path:nth-child(1) { --orbit-color: #b18aff; }
#engine :is(.output-progress, .output-progress-bg) path:nth-child(2) { --orbit-color: #887bff; }
#engine :is(.output-progress, .output-progress-bg) path:nth-child(3) { --orbit-color: #7bafff; }
#engine :is(.output-progress, .output-progress-bg) path:nth-child(4) { --orbit-color: #b3e0ff; }
#engine :is(.output-progress, .output-progress-bg) path:nth-child(5) { --orbit-color: #d0c4ff; }
#engine :is(.output-progress, .output-progress-bg) path:nth-child(6) { --orbit-color: #e7aeeb; }
#engine :is(.output-progress, .output-progress-bg) path:nth-child(7) { --orbit-color: #ee96c9; }
#engine :is(.output-progress, .output-progress-bg) path:nth-child(8) { --orbit-color: #cb95f5; }
#engine :is(.output-progress, .output-progress-bg) path {
  stroke: var(--orbit-color);
}
#engine .output-progress path {
  filter: drop-shadow(0 0 4px var(--orbit-color));
}
#engine .output-progress-bg path {
  filter: drop-shadow(0 0 6px var(--orbit-color));
}
#site-menu .delusional-nav-icon { flex-shrink: 0; transition: color 160ms ease; }
#site-menu .main-nav-link:is(:hover, :focus-visible) .delusional-nav-icon { color: #c8b6ff; }
#site-menu .main-nav-link:focus-visible { outline: 2px solid #c8b6ff; outline-offset: -4px; border-radius: 6px; }
#site-menu .budget-link { color: #d0c4ff; }
#site-menu .main-nav-link {
  --nav-rise: 0px;
  --nav-open: 1;
  --nav-turn: 0deg;
  --nav-shift: 0px;
}
#site-menu .delusional-nav-icon,
#site-menu .delusional-nav-icon > * {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 320ms cubic-bezier(.2,.8,.2,1), color 160ms ease;
}
#site-menu .delusional-nav-icon { transform: translateY(var(--nav-rise)); }
#site-menu [href="#toolbox"] .delusional-nav-icon rect { transform: scale(var(--nav-open)); }
#site-menu [href="#toolbox"] .delusional-nav-icon rect:nth-child(2) { transition-delay: 35ms; }
#site-menu [href="#toolbox"] .delusional-nav-icon rect:nth-child(3) { transition-delay: 70ms; }
#site-menu [href="#toolbox"] .delusional-nav-icon path { transform: rotate(var(--nav-turn)); }
#site-menu [href="#clockwork"] .delusional-nav-icon rect:first-child { transform: translateY(var(--nav-shift)); }
#site-menu [href="#clockwork"] .delusional-nav-icon rect:nth-child(2) { transform: translateY(calc(-1 * var(--nav-shift))); transition-delay: 60ms; }
#site-menu [href="#sponsors"] .delusional-nav-icon { transform: translateY(var(--nav-rise)) rotate(calc(var(--nav-turn) / 15)); }
#site-menu .budget-link .delusional-nav-icon { transform: translateY(var(--nav-rise)) rotate(calc(-1 * var(--nav-turn) / 15)); }
#site-menu .budget-link .delusional-nav-icon path:last-child { transform: translateX(var(--nav-shift)); }
#site-menu .budget-link::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 2.25em;
  border: 1px solid #c8b6ff55;
  border-radius: 8px;
  background: #c8b6ff12;
  opacity: 0;
  transform: translateY(-50%) scale(.96);
  transition: opacity 180ms ease, transform 240ms ease;
  pointer-events: none;
}
#site-menu .main-nav-link:focus-visible {
  --nav-rise: -2px;
  --nav-open: .86;
  --nav-turn: 90deg;
  --nav-shift: 1px;
}
#site-menu .budget-link:focus-visible::before { opacity: 1; transform: translateY(-50%) scale(1); }
@media (hover: hover) and (pointer: fine) {
  #site-menu .main-nav-link:hover {
    --nav-rise: -2px;
    --nav-open: .86;
    --nav-turn: 90deg;
    --nav-shift: 1px;
  }
  #site-menu .budget-link:hover::before { opacity: 1; transform: translateY(-50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #site-menu .delusional-nav-icon,
  #site-menu .delusional-nav-icon > * { transition: none !important; transform: none !important; }
  #site-menu .budget-link::before { transition: none !important; transform: translateY(-50%) !important; }
}