/* App viewport for the unchanged screen artwork and its interactive controller. */
html,body {width:100%;height:100%;overflow:hidden}
body.xo-app {background:#000;color:#f5f5f7;overflow:hidden}
body.xo-app .page {display:none}
body.xo-app .xo-shell {width:100%;height:100dvh;min-height:0;padding:0;gap:0;display:flex;align-items:center;justify-content:center}
body.xo-app .xo-stage {width:min(100%,480px);height:100%;flex:none;min-height:0;overflow:hidden;display:block;position:relative;background:#000}
body.xo-app .xo-stage .fr {display:none!important;width:100%;height:100%;margin:0!important}
body.xo-app .xo-stage .fr.xo-active {display:block!important}
body.xo-app .xo-stage .fr-cap,body.xo-app .xo-stage .fr-act,body.xo-app .xo-stage .replay,body.xo-app .xo-stage .pseg {display:none!important}
body.xo-app .xo-stage .ph-wrap {width:100%;height:100%;margin:0}
body.xo-app .xo-stage .phone {position:relative;width:100%;height:100%;transform:none;border-radius:0;box-shadow:none}
body.xo-app .sb {display:none}
body.xo-app.xo-telegram .tg,body.xo-app.xo-root-screen .tg {display:none}
body.xo-app .tg {height:48px;grid-template-columns:90px 1fr 90px}
body.xo-app .tg .c small,body.xo-app .tg .r {display:none}
body.xo-app .tabbar {width:min(calc(100% - 20px),390px);bottom:max(14px,env(safe-area-inset-bottom,0px));justify-content:space-between}
body.xo-app .tabbar .tab {flex:1;min-width:0}
body.xo-app .mb-zone {padding-bottom:max(20px,env(safe-area-inset-bottom,0px))}
body.xo-app .xo-toast {bottom:max(18px,env(safe-area-inset-bottom,0px));max-width:calc(100% - 30px);text-align:center}
body.xo-app .xo-stage .scr button,body.xo-app .xo-stage .scr .card,body.xo-app .xo-stage .scr .w-item,body.xo-app .xo-stage .scr .gi,body.xo-app .xo-stage .scr .tg .l,body.xo-app .xo-stage .scr .ava {cursor:pointer}
body.xo-app .xo-visible-prompt {padding:12px 0;border-top:1px solid rgba(255,255,255,.1);font-size:13px;color:#b8b8c2;line-height:1.4}
body.xo-app .xo-visible-prompt b {display:block;color:#f5f5f7;margin-bottom:4px}