body,html{margin:0;padding:0;overflow:hidden;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;user-select:none;touch-action:none;-webkit-tap-highlight-color:rgba(255,255,255,0);background:#000}video{width:100dvw;height:100dvh;object-fit:cover}#swap,#zoom{width:16vmin;aspect-ratio:1;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;cursor:pointer;border-radius:100%}#zoom{font-size:6vmin;visibility:hidden}#swap{font-size:8vmin}#swap div{transform:translate(-.2vmin,-.8vmin)}#snapshot{width:25vmin;height:25vmin;border:.8vmin solid #fff;box-sizing:border-box;padding:1.2vmin;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:100%;aspect-ratio:1}#snapshot div{width:100%;height:100%;background:#fff;border-radius:100%}#button-bar{position:absolute;bottom:0;width:100dvw;display:flex;justify-content:center;align-items:center;gap:10vmin;padding:6vh 0;box-sizing:border-box;background:linear-gradient(0deg,rgba(0,0,0,.5) 0,rgba(0,0,0,.48) 12.5%,rgba(0,0,0,.43) 25%,rgba(0,0,0,.35) 37.5%,rgba(0,0,0,.25) 50%,rgba(0,0,0,.15) 62.5%,rgba(0,0,0,.07) 75%,rgba(0,0,0,.02) 87.5%,rgba(0,0,0,0) 100%)}#debug{position:absolute;top:0;left:0;color:#fff;background:rgba(0,0,0,.5);padding:.5vw;width:100vw;display:none}#overlay{box-sizing:border-box;background:#000;position:absolute;top:0;left:0;width:100dvw;height:100dvh;padding:8vmin 10vmin;display:flex;flex-direction:column;justify-content:space-between;opacity:0;visibility:hidden;transition:all .25s}#overlay.show{opacity:1;visibility:visible}#image-border{padding:3vmin;box-sizing:border-box;width:100%;aspect-ratio:9/16;min-height:0}#image-border img{width:100%;height:100%;object-fit:contain;background:#000}.gradient-border-mask{position:relative}.gradient-border-mask::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:5px;border:5px solid transparent;background:linear-gradient(217deg,#084dff,#0aebe8) border-box;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:destination-out;mask-composite:exclude}#send{padding:2vmin;background:linear-gradient(217deg,#084dff 5.08%,#0aebe8 94.92%);border-radius:100%;display:flex;align-items:center;justify-content:center;aspect-ratio:1;width:16vmin}#retake{display:flex;align-items:center;justify-content:center;background:#4c4c4c;color:#fff;border-radius:100px;height:min-content;padding:4vmin}#retake img{height:8vmin}#retake div{margin-left:2vmin;font-size:5vmin;font-weight:500;translate:0 -0.4vmin}#buttons{display:flex;align-items:center;justify-content:space-between;margin-top:8vmin}#notification-bar{position:absolute;top:8vmin;display:flex;box-shadow:rgba(0,0,0,.5) 0 0 10px 0;border-radius:100px;padding:1.8vmin;left:50%;translate:-50% 0;align-items:center;z-index:10;background:#fff;opacity:0;visibility:hidden;transition:all .25s}#notification-bar.show{opacity:1;visibility:visible}#notification-bar .complete{background:linear-gradient(267.46deg,#084dff -6.26%,#0aebe8 110.33%);border-radius:100%;padding:1vmin;width:3.5vmin;margin-right:2.5vmin}#notification-bar .spinner{width:5.5vmin;height:5.5vmin;margin-right:2.5vmin;box-shadow:rgba(0,0,0,.2) 0 0 1vmin .5vmin;border-radius:100%;animation:spin 1.5s linear infinite;display:none}#notification-bar.loading .spinner{display:block}#notification-bar.loading .complete{display:none}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}#notification-bar div{font-weight:500;margin-right:2vmin;font-size:3.5vmin}@media (orientation:landscape){#button-bar{right:0;top:0;flex-direction:column-reverse;width:min-content;padding:0 6vw;background:linear-gradient(270deg,rgba(0,0,0,.5) 0,rgba(0,0,0,.48) 12.5%,rgba(0,0,0,.43) 25%,rgba(0,0,0,.35) 37.5%,rgba(0,0,0,.25) 50%,rgba(0,0,0,.15) 62.5%,rgba(0,0,0,.07) 75%,rgba(0,0,0,.02) 87.5%,rgba(0,0,0,0) 100%);height:100dvh}#overlay{flex-direction:row}#buttons{flex-direction:column;margin-top:0;margin-left:8vmin}#image-border{width:unset;height:100%;aspect-ratio:16/9}}