:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:2.5;font-weight:800}body,html{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background-color:#000;position:fixed}#app{position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center}#webcam{display:block}#output_canvas{display:block;width:100%;height:100%;object-fit:cover}#ui-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:50px}.record-btn{pointer-events:auto;width:80px;height:80px;border-radius:50%;background-color:#ffffff40;border:5px solid white;cursor:pointer;position:relative;transition:all .2s cubic-bezier(.25,.46,.45,.94);outline:none;-webkit-tap-highlight-color:transparent;margin-bottom:40px}.record-btn:active{transform:scale(.9)}.record-btn:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;background-color:#ff3b30;border-radius:50%;transition:all .3s cubic-bezier(.25,.46,.45,.94)}.record-btn.recording:after{border-radius:8px;transform:translate(-50%,-50%) scale(.5);background-color:#ff3b30}.record-btn.recording{border-color:#fff;background-color:#fff0}