body{margin:0;height:100vh;display:grid;place-items:center;background:#111;font-family:sans-serif}#phone{width:447px;height:800px;background:#000;border-radius:24px;overflow:hidden;position:relative}#cameraUI,#viewer{position:absolute;inset:0;transition:.45s}#cameraUI.hide{opacity:0;transform:scale(.98)}#viewer{opacity:0;pointer-events:none;background:#000}#viewer.show{opacity:1;pointer-events:auto}header{height:56px;color:#fff;display:flex;justify-content:space-between;align-items:center;padding:0 16px}#preview{position:absolute;top:56px;bottom:90px;left:0;right:0;overflow:hidden}#mainImage,#resultImage{width:100%;height:100%;object-fit:cover;filter:blur(8px);transition:all .7s}#viewer.show #resultImage{filter:blur(0);transform:scale(1)}#resultImage{transform:scale(.96)}#grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.15) 1px,transparent 1px);background-size:33.33% 33.33%}#focus{position:absolute;left:50%;top:50%;width:90px;height:90px;border:2px solid #ffd54d;transform:translate(-50%,-50%) scale(1.3);opacity:0}#focus.show{opacity:1;transform:translate(-50%,-50%) scale(1);transition:.25s}#flash{position:absolute;inset:0;background:#fff;opacity:0}#flash.on{animation:f .25s}@keyframes f{50%{opacity:1}}footer{position:absolute;bottom:0;width:100%;height:90px;display:grid;place-items:center}#shutter{width:74px;height:74px;border-radius:50%;border:6px solid #fff;background:#eee}.bar{position:absolute;bottom:20px;width:100%;display:flex;justify-content:center;gap:10px}