/* Device frames. Sizes scale with the frame via cqw. */
.dev{--w:240px;width:var(--w);flex:none;margin:0;padding:calc(var(--w)*.028);border-radius:calc(var(--w)*.15);background:var(--frame,#151515);box-shadow:inset 0 0 0 1px rgb(255 255 255/.08),var(--dev-shadow,0 30px 60px -24px rgb(0 0 0/.45))}
.scr{position:relative;container-type:inline-size;aspect-ratio:412/915;border-radius:calc(var(--w)*.125);overflow:hidden;background:#000;display:flex;flex-direction:column}
.ios .scr{aspect-ratio:402/874}
.scr img{display:block;width:100%;height:auto;flex:none;-webkit-user-drag:none;user-select:none}
.scr picture{display:contents}
.scr img.full{height:100%;object-fit:cover;object-position:top}
.android .scr::after{content:"";position:absolute;z-index:2;top:2.3cqw;left:50%;width:3.4cqw;aspect-ratio:1;margin-left:-1.7cqw;border-radius:50%;background:#050505}
.sb{flex:none;height:8.4cqw;display:flex;align-items:center;justify-content:space-between;padding:0 6.5cqw;font:600 3.3cqw/1 system-ui,sans-serif}
.sb i{position:relative;width:5.4cqw;height:2.6cqw;border:.35cqw solid currentColor;border-radius:.7cqw;box-shadow:inset -1.6cqw 0 0 -.1cqw transparent,inset 3.4cqw 0 0 currentColor}
.sb i::before{content:"";position:absolute;right:calc(100% + 1.4cqw);bottom:-.35cqw;width:2.8cqw;height:2.8cqw;background:currentColor;clip-path:polygon(100% 0,100% 100%,0 100%)}
.nav{flex:1;min-height:5cqw;display:flex;align-items:flex-end;justify-content:center;padding-bottom:2cqw}
.nav b{width:27cqw;height:1.1cqw;border-radius:1cqw;opacity:.5}