:root{color-scheme:light only}
html,body{background:#E9ECF2}
.pv{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(8px + env(safe-area-inset-bottom));z-index:60;background:rgba(35,45,67,.92);color:#fff;font:700 .7rem Inter,Arial,sans-serif;padding:5px 12px;border-radius:999px;pointer-events:none;white-space:nowrap;letter-spacing:.02em}
.pwa-ov{position:fixed;inset:0;z-index:100;background:rgba(14,19,32,.55);display:flex;align-items:flex-end;justify-content:center}
.pwa-sh{background:#fff;color:#1B2232;width:100%;max-width:430px;border-radius:22px 22px 0 0;padding:20px 20px calc(20px + env(safe-area-inset-bottom));font-family:Inter,Arial,sans-serif;box-shadow:0 -10px 40px rgba(0,0,0,.25)}
.pwa-sh h3{font-size:1.1rem;margin:0 0 6px}.pwa-sh p{font-size:.88rem;color:#475069;margin:0 0 14px;line-height:1.45}
.pwa-sh a,.pwa-sh button{display:block;width:100%;text-align:center;text-decoration:none;border:0;border-radius:14px;padding:13px;font:700 .95rem Inter,Arial,sans-serif;margin-top:8px;cursor:pointer}
.pwa-sh .p{background:#D75939;color:#fff}.pwa-sh .w{background:#25D366;color:#fff}.pwa-sh .g{background:#F1F2F6;color:#232D43}
.a2hs{position:fixed;left:10px;right:10px;top:calc(10px + env(safe-area-inset-top));z-index:90;max-width:410px;margin:0 auto;background:#fff;color:#1B2232;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.2);padding:12px 40px 12px 12px;display:flex;gap:10px;align-items:center;font:500 .82rem/1.35 Inter,Arial,sans-serif}
.a2hs img{width:40px;height:40px;border-radius:10px;flex:none}.a2hs b{color:#232D43}
.a2hs .x{position:absolute;right:8px;top:8px;border:0;background:none;font-size:1.1rem;color:#667085;cursor:pointer;padding:4px}
.a2hs .go{border:0;background:#B5442A;color:#fff;border-radius:10px;padding:7px 10px;font:700 .78rem Inter;cursor:pointer;flex:none}
/* phones: full-screen app, no frame */
@media (max-width:600px){
 html,body{background:#fff;height:100%;overflow:hidden;overscroll-behavior:none}
 .side,.notes{display:none!important}.stage{display:block;min-height:0}.main{display:block;padding:0}
 .device{width:100vw;height:100vh;height:100dvh;border-radius:0;padding:0;box-shadow:none;background:#fff}
 .screen{width:100vw;height:100vh;height:100dvh;border-radius:0}
 .status{height:calc(44px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)}
 .status>span{visibility:hidden}
 .top-float{top:calc(50px + env(safe-area-inset-top))}
 .pv{bottom:calc(74px + env(safe-area-inset-bottom))}
}
/* desktop: centred phone frame */
@media (min-width:601px) and (max-width:900px){.stage{display:block}.side{display:none}.main{min-height:100vh}}
@media (min-width:601px) and (max-height:900px){.device{transform:scale(.88);transform-origin:center}}