.mobile-logo-particles{display:none;pointer-events:none}
@media(max-aspect-ratio:1/1),(max-width:1100px) and (max-height:600px){
 /* A local negative layer stays below both logo media variants, above the frame. */
 #app .brand{isolation:isolate}
 #app .brand>.mobile-logo-particles{display:block;position:absolute;inset:-18% -7% -3%;z-index:-1;overflow:hidden;pointer-events:none;contain:paint;--spark-rise:clamp(18px,5cqw,30px)}
 .mobile-logo-spark{display:block;position:absolute;left:var(--spark-x);top:var(--spark-y);width:2px;height:2px;border-radius:50%;background:#ffe6aa;box-shadow:0 0 3px 1px #ffad3c99;opacity:0;animation:mobileLogoEmber var(--spark-duration) var(--spark-delay) linear infinite;pointer-events:none}
 .mobile-logo-spark.is-cyan{width:1px;height:5px;border-radius:1px;background:#c2faff;box-shadow:0 0 4px 1px #39d9ff88;animation-name:mobileLogoIon}
 #app.startup-armed .brand:not(.startup-revealed) .mobile-logo-spark,
 #app.startup-suspended .mobile-logo-spark,
 #app:has(.paused-overlay:not([hidden])) .mobile-logo-spark,
 .mobile-logo-particles[data-suspended='true'] .mobile-logo-spark{animation-play-state:paused}
 #app.startup-armed .brand:not(.startup-revealed)>.mobile-logo-particles{visibility:hidden}
}
@keyframes mobileLogoEmber{
 0%,9%{opacity:0;transform:translate3d(0,4px,0) scale(.55)}
 23%{opacity:.8}
 64%{opacity:.5}
 88%,100%{opacity:0;transform:translate3d(var(--spark-drift),calc(-1 * var(--spark-rise)),0) scale(.3)}
}
@keyframes mobileLogoIon{
 0%,30%{opacity:0;transform:translate3d(0,0,0) rotate(-22deg) scaleY(.35)}
 43%{opacity:.7}
 70%,100%{opacity:0;transform:translate3d(var(--spark-drift),calc(-.8 * var(--spark-rise)),0) rotate(-22deg) scaleY(.7)}
}
.reduced-motion #app .brand>.mobile-logo-particles{display:none}
.reduced-motion .mobile-logo-spark{animation:none}
@media(prefers-reduced-motion:reduce){
 #app .brand>.mobile-logo-particles{display:none}
 .mobile-logo-spark{animation:none}
}