*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#fff}.viewer,.device,.device-shell,.device-screen,iframe{width:100%;height:100%}.viewer{height:var(--viewer-height,100dvh)}iframe{display:block;border:0;background:#fff}.device-shell{position:relative}.device-island,.device-side{display:none}
@media(max-width:600px){.viewer{height:var(--viewer-height,100dvh)}}
@media(min-width:601px){html,body{background:#e5e5e5}.viewer{display:grid;place-items:center;background:#e5e5e5}.device{position:relative;width:calc(405px * var(--device-scale,1));height:calc(852px * var(--device-scale,1))}.device-shell{position:absolute;left:0;top:0;width:405px;height:852px;padding:12px;background:#171918;border:3px solid #72766f;border-radius:59px;box-shadow:inset 0 0 0 2px #090b09,0 28px 54px #32432b33;transform:scale(var(--device-scale,1));transform-origin:top left}.device-screen{overflow:hidden;border-radius:44px;background:#fff}.device-screen iframe{width:375px;height:822px}.device-island{display:block;position:absolute;z-index:3;top:23px;left:50%;transform:translateX(-50%);width:108px;height:28px;background:#101110;border-radius:20px;pointer-events:none}.device-side{display:block;position:absolute;top:182px;left:-5px;width:3px;height:62px;border-radius:2px;background:#777b73;box-shadow:0 -76px #777b73,405px 20px #777b73}}
html.recording,html.recording body{background:#e5e5e5}html.recording .viewer{display:grid;place-items:center;background:#e5e5e5}html.recording .device{position:relative;width:calc(405px * var(--device-scale,1));height:calc(852px * var(--device-scale,1))}html.recording .device-shell{position:absolute;left:0;top:0;width:405px;height:852px;padding:12px;background:#171918;border:3px solid #72766f;border-radius:59px;box-shadow:inset 0 0 0 2px #090b09,0 28px 54px #32432b33;transform:scale(var(--device-scale,1));transform-origin:top left}html.recording .device-screen{overflow:hidden;border-radius:44px;background:#fff}html.recording .device-screen iframe{width:375px;height:822px}html.recording .device-island{display:block;position:absolute;z-index:3;top:23px;left:50%;transform:translateX(-50%);width:108px;height:28px;background:#101110;border-radius:20px;pointer-events:none}html.recording .device-side{display:block;position:absolute;top:182px;left:-5px;width:3px;height:62px;border-radius:2px;background:#777b73;box-shadow:0 -76px #777b73,405px 20px #777b73}