/* Lottie hosts inherit the original icon's size and theme color. Static SVGs are the fallback. */
.apex-micro-control>.apex-lottie-icon{display:none;pointer-events:none;flex-shrink:0;line-height:0}
.apex-micro-control.apex-micro-ready>.apex-micro-static{display:none}
.apex-micro-control.apex-micro-ready>.apex-lottie-icon{display:inline-block}
.apex-micro-control>.apex-lottie-icon svg{display:block;width:100%;height:100%;overflow:visible}
.apex-micro-control>.apex-lottie-icon svg [stroke]{stroke:currentColor}
.apex-micro-control.apex-micro-ready>.apex-lottie-icon{transform:none;transition:none}
.apex-micro-control:active{transform:translateY(1px)}
/* Keep the menu button's label and native behavior. Only replace its three visual bars. */
.apex-micro-menu.apex-micro-ready>span:not(.screen-reader-text):not(.apex-lottie-menu){display:none}
.apex-micro-menu>span.apex-lottie-menu{display:none;width:24px;height:24px;min-width:24px;margin:0;padding:0;background:none;border-radius:0;color:var(--on-primary);opacity:1;transform:none}
.apex-micro-menu.apex-micro-ready>span.apex-lottie-menu{display:block}
.apex-micro-control.apex-micro-ready:focus-visible{outline:2px solid var(--mood-link);outline-offset:4px}
@media(prefers-reduced-motion:reduce){
  .apex-micro-control:active{transform:none}
}
html[data-ambient-motion=paused] .apex-micro-control:active{transform:none}
/* One viewport observer pauses decorative CSS loops outside the visible section. */
.apex-motion-region[data-motion-viewport=offscreen],
.apex-motion-region[data-motion-viewport=offscreen]::before,
.apex-motion-region[data-motion-viewport=offscreen]::after,
.apex-motion-region[data-motion-viewport=offscreen] *,
.apex-motion-region[data-motion-viewport=offscreen] *::before,
.apex-motion-region[data-motion-viewport=offscreen] *::after{animation-play-state:paused!important}

/* Native same-origin page transitions; unsupported browsers keep normal navigation.
   https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@view-transition */
@view-transition{navigation:auto}
@keyframes apex-page-out{from{opacity:1}to{opacity:0}}
@keyframes apex-page-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
html::view-transition-group(root){animation-duration:160ms;animation-timing-function:ease-out}
html::view-transition-old(root){animation:apex-page-out 160ms ease-out both;mix-blend-mode:normal}
html::view-transition-new(root){animation:apex-page-in 160ms ease-out both;mix-blend-mode:normal}
/* Stay static until the motion preference has been restored on the incoming page. */
html:not([data-ambient-motion=running])::view-transition-group(root),
html:not([data-ambient-motion=running])::view-transition-old(root),
html:not([data-ambient-motion=running])::view-transition-new(root){animation:none!important}
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  html::view-transition-group(root),html::view-transition-old(root),html::view-transition-new(root){animation:none!important}
}