.mobile-screenshot{display:none}
@media(max-width:999px){
 html[data-mobile-screenshot] :is(#hero-app,[data-mobile-screenshot-target]){display:none!important}
 html[data-mobile-screenshot] .mobile-screenshot{display:block;width:100%;padding:0;margin:0;border:1px solid var(--app-border);border-radius:12px;background:var(--editor-bg);overflow:hidden;cursor:zoom-in;line-height:0}
 .mobile-screenshot img{display:block;width:100%;height:auto}
 .mobile-screenshot:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
}
.mobile-screenshot-dialog{position:fixed;inset:0;width:calc(100vw - 32px);max-width:1500px;height:calc(100dvh - 80px);max-height:900px;padding:48px 12px 12px;border:1px solid var(--app-border);border-radius:12px;box-sizing:border-box;background:var(--editor-bg,#101722);color:var(--editor-fg,#fff);overflow:hidden}
.mobile-screenshot-dialog::backdrop{background:rgb(0 0 0 / .8)}
.mobile-screenshot-close{position:absolute;right:4px;top:2px;width:44px;height:44px;font-size:28px;background:transparent;color:inherit;border:0;cursor:pointer}
.mobile-screenshot-scroll{width:100%;height:100%;overflow:auto;overscroll-behavior:contain;display:flex;align-items:safe center;justify-content:safe center}
.mobile-screenshot-scroll img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;cursor:zoom-in;flex:none}
.mobile-screenshot-scroll.is-zoomed{display:block}
.mobile-screenshot-scroll.is-zoomed img{width:1326px;max-width:none;max-height:none;cursor:zoom-out}