.experience-transition{--mode-art-duration:850ms;position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:24px;border:0;background:var(--surface);color:var(--ink);opacity:1}.experience-transition::backdrop{background:var(--surface)}.experience-transition-content{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center}.experience-transition p{margin-top:64px;text-align:center;font-size:14px;font-weight:600}.experience-art{position:relative;width:min(240px,70vw);aspect-ratio:1}.experience-art img{position:absolute;inset:0;width:100%;height:100%}.experience-art-from{opacity:0;animation:mode-art-out var(--mode-art-duration) var(--ease-out) both}.experience-art-to{animation:mode-art-in var(--mode-art-duration) var(--ease-out) both}.experience-transition[data-leaving]{animation:mode-screen-out .22s ease-out both}.experience-recovery{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));text-align:center}.experience-recovery p{margin:0 0 12px;color:var(--ink-muted)}.experience-recovery a,.experience-recovery button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 16px;text-decoration:underline;cursor:pointer}@keyframes mode-art-out{0%{opacity:1;transform:scale(1) rotate(0)}to{opacity:0;transform:scale(.65) rotate(-14deg)}}@keyframes mode-art-in{0%,20%{opacity:0;transform:scale(.6) rotate(12deg)}80%{opacity:1;transform:scale(1.06) rotate(1deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes mode-screen-out{to{opacity:0}}@media (prefers-reduced-motion:reduce){.experience-art-from{display:none}.experience-art-to,.experience-transition[data-leaving]{animation:none}}