*{box-sizing:border-box}body{margin:0;background:#151613}.demo{position:relative;isolation:isolate;height:100svh;height:100dvh;overflow:hidden;display:grid;align-items:center;justify-items:end;padding-inline:3.75vw}.camera,.demo:after{position:absolute;inset:0;width:100%;height:100%}.camera{object-fit:cover;object-position:20% center;z-index:-2}.demo:after{content:"";z-index:-1;pointer-events:none;background:linear-gradient(90deg,transparent 29%,#10130f29 52%,#10130f78)}.loading{position:fixed;inset:0;z-index:1;display:grid;place-items:center;padding:24px;background:#151613;color:#f6f5ef;font:16px/1.4 system-ui,sans-serif}.loading section{width:min(100%,320px)}.loading h1{font-size:20px;font-weight:600;margin:0 0 18px}.loading progress{display:block;width:100%;height:7px;accent-color:#c0cba6}.loading p{color:#c4c7bf;margin:10px 0 0;font-variant-numeric:tabular-nums}.loading button{font:inherit;padding:7px 16px;cursor:pointer}.tablet{display:grid;place-items:center}.case{width:min(53.6vw,calc((100dvh - 52px) * var(--screen-ratio)));position:relative;padding:clamp(6px,.72vw,12px);border-radius:24px;background:#161617;box-shadow:0 13px 29px #07070555}.screen{width:100%;aspect-ratio:var(--screen-ratio);position:relative;overflow:hidden;border-radius:14px;background:#efeef4}iframe{display:block;position:absolute;inset:0;border:0;transform-origin:0 0}.expand{position:absolute;right:17px;bottom:0;transform:translateY(50%);width:32px;height:26px;display:grid;place-items:center;border:0;border-radius:14px;background:#181819;color:#fff;cursor:pointer}.expand svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6}button:focus-visible{outline:2px solid white;outline-offset:2px}.tablet:fullscreen{width:100%;height:100%;background:#151613}.tablet:fullscreen .case{width:min(100vw,calc((100dvh - 36px) * var(--screen-ratio)))}@media(min-aspect-ratio:2/1){.camera{object-fit:contain;object-position:left center}}@media(max-aspect-ratio:5/4){.demo{--tablet-size: min(94vw, 70dvh);--bottom-gap: max(4dvh, 16px);--camera-height: min(120vw, calc(100dvh - var(--tablet-size) * .75 - 24px - var(--bottom-gap)));align-items:end;justify-items:center;padding:0 3vw var(--bottom-gap)}.case{width:var(--tablet-size)}.camera{height:var(--camera-height);width:min(100%,calc(var(--camera-height) * 16 / 9));left:50%;transform:translate(-50%);object-position:6% center}}