body{margin:0;overflow:hidden;color:#fff;background:#000}#app{position:fixed;bottom:1em;z-index:2;display:flex;justify-content:center;text-align:center;width:100%;opacity:0;animation:fadeIn .5s ease .5s forwards}#instructions{padding-bottom:1em;text-wrap:balance}#shutter{position:relative;display:grid;place-items:center;height:80px;width:80px;background:#797979;border-radius:50%}#shutter button{all:unset;height:68px;width:68px;border-radius:50%;cursor:pointer;background:#fff;transition:transform .2s ease}#shutter button:hover:not(:active){background:#fff;transform:scale(1.04)}#shutter button:active{transform:scale(.88);transition:transform .1s ease}#app.ready #instructions{display:none}#app:not(.ready) #shutter{display:none}canvas{z-index:1;background:#000}.export{z-index:0}.flipped canvas{transform:scaleX(-1)}video{position:fixed;height:1px;width:1px;opacity:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}