.screen-preview::before{transition:opacity 150ms ease}
.screen-preview-content,.screen-preview.is-closing .screen-preview-content{transition-duration:200ms;filter:none}
.screen-preview.is-loading .screen-preview-content,.screen-preview.load-failed .screen-preview-content{visibility:hidden;pointer-events:none}
.screen-preview-loader{position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px;padding:64px 24px;text-align:center;pointer-events:none}
.screen-preview-loader[hidden],.screen-preview-retry[hidden],.screen-preview-phone img[hidden]{display:none}
.volcano-loader{display:block;width:128px;height:170.667px;background:url('assets/volcano-loader.webp') 0 0/512px 170.667px repeat-x;animation:volcano-erupt 900ms steps(4) infinite}
.screen-preview-loader p{font-size:1rem;color:#e4edf4;max-width:360px;line-height:1.5}
.screen-preview-close{position:absolute;z-index:3;right:max(20px,env(safe-area-inset-right));top:max(20px,env(safe-area-inset-top));width:44px;height:44px;border:1px solid #ffffff35;border-radius:50%;background:#17232dee;color:white;font-size:30px;line-height:1}
.screen-preview-retry{pointer-events:auto;min-height:44px;border:1px solid #91d9ed88;border-radius:8px;background:#17232d;color:#b8ebfc;padding:10px 20px}
.screen-preview.load-failed .volcano-loader{animation:none}
@keyframes volcano-erupt{to{background-position:-512px 0}}
@media(prefers-reduced-motion:reduce){.volcano-loader{animation:none}.screen-preview::before,.screen-preview-content{transition:none}}