/* Created only after successful Canvas initialization. Never blocks input. */
.phxel-intro {
    position: fixed;
    inset: 0;
    z-index: 102;
    display: grid;
    place-items: center;
    background: #0B0D0F;
    pointer-events: none;
    animation: phxel-intro-exit 1750ms linear forwards;
}
.phxel-intro canvas { display: block; width: min(680px, calc(100vw - 64px)); height: auto; }
/* CSS releases the interface even if JS stops executing after activation. */
body:has(.phxel-intro) :is(.ask-launcher, .back-to-top) {
    animation: phxel-intro-controls 1750ms step-end forwards;
}
@keyframes phxel-intro-exit {
    0%, 88.571% { opacity: 1; visibility: visible; }
    100% { opacity: 0; visibility: hidden; }
}
@keyframes phxel-intro-controls {
    0% { opacity: 0; visibility: hidden; }
    100% { opacity: 1; visibility: visible; }
}
@media (prefers-reduced-motion: reduce) {
    .phxel-intro { display: none; animation: none; }
    body:has(.phxel-intro) :is(.ask-launcher, .back-to-top) { animation: none; }
}