:root{font-family:Noto Sans Mono,monospace,Arial,sans-serif;line-height:1.2}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background-color:#000}.init .loading{opacity:0;visibility:hidden}.init .main__media{opacity:1}.result .main__content,.result .main__foot{opacity:1;visibility:visible}.result .main__logo{opacity:0}.loading{background-color:#00000080;transition:all .5s;position:absolute;inset:0}.loading:before,.loading:after{--size:48px;width:var(--size);height:var(--size);border-radius:var(--size);border:4px solid var(--primaryColor);content:"";opacity:.3;margin:calc(var(--size) / -2);position:absolute;top:50%;left:50%}.loading:before{opacity:1;border-color:#0000;border-right-color:var(--primaryColor);animation:.75s linear infinite spin}.message{z-index:10;color:#fff;pointer-events:none;text-align:center;white-space:pre-wrap;opacity:0;visibility:hidden;background-color:#0003;place-items:center;padding-top:10vh;font-size:22px;font-weight:500;transition:all .5s;display:grid;position:absolute;inset:0}html:not(.loading):not(.result) .message.show{opacity:1;visibility:visible;transition:all .5s 2s}.main{align-content:space-between;margin:auto;padding:16px;display:grid;position:absolute;inset:0;overflow:hidden}.main__media{pointer-events:none;opacity:0;width:100%;height:100%;margin:auto;transition:all .5s .5s;display:grid;position:absolute;inset:0}.main__video,.main__canvas{z-index:-1;width:auto;height:100%;position:absolute;left:50%;transform:scaleX(-1)translate(50%)}.main__head,.main__foot{align-content:space-between;justify-self:center;gap:16px;width:100%;max-width:460px;height:100%;display:grid}.main__foot{visibility:hidden;opacity:0;transition:all .5s}.main__content{text-align:center;visibility:hidden;opacity:0;background:#fff;border-radius:8px;padding:8px;transition:all .5s}.main__content span{min-width:30px;padding:0 4px;font-size:22px;font-weight:600}.main__button{border-radius:var(--borderRadius);width:100%;height:48px;color:var(--textColor);background:var(--primaryColor);text-transform:uppercase;cursor:pointer;-webkit-user-select:none;user-select:none;border:none;justify-content:center;align-items:center;padding:0 20px;font-size:18px;font-weight:600;transition:all .3s;display:flex}.main__button:hover{opacity:.9}.main__button:disabled{opacity:.5;pointer-events:none}.main__logo,.main__logo img{display:block}.main__logo{opacity:.8;transition:all .5s;display:none;position:absolute;bottom:16px;left:16px}.main__logo a:hover{opacity:1}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}