:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,html{margin:0;padding:0;box-sizing:border-box}.main{width:100%;max-width:672px;height:100%;min-height:100dvh;margin:0 auto;display:flex;flex-direction:column;justify-content:center}.main .container{padding:16px;display:flex;flex-direction:column;gap:16px}.main .container .content-area{border-radius:8px;overflow:hidden;background:#000}.main .container .content-area .default-container,.main .container .content-area .default-image{width:100%;height:100%;object-fit:cover}.main .container .content-area .loading-container{display:flex;align-items:center;justify-content:center;aspect-ratio:3/4}.main .container .content-area .loading-container img{width:100px;height:100px}.main .container .content-area .canvas-container{position:relative;display:flex;flex-direction:column;gap:8px;background:#000}.main .container .content-area .canvas-container .canvas-wrapper{position:relative;width:content-fit;background:red}.main .container .content-area .canvas-container .canvas-wrapper .makemetryon-canvas{display:block;background:#000}.main .container .content-area .canvas-container .validation-overlay{position:absolute;bottom:0%;left:50%;transform:translate(-50%,-50%);background:#00000080;padding:6px 16px 8px;border-radius:999px;text-align:center;z-index:1000;min-width:100px;display:flex;align-items:center;gap:6px;display:none}.main .container .content-area .canvas-container .validation-overlay .validation-text{color:#ffc400;font-size:.8em;font-weight:400;letter-spacing:.3px}.main .container .content-area .canvas-container .face-marker{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}.main .container .content-area .canvas-container .face-marker svg{position:absolute;top:47.5%;left:50%;transform:translate(-50%,-50%);width:auto;height:55%;max-width:484px}.main .container .controls button{margin-bottom:16px}.main .container .controls p{text-align:center;font-size:.8em;color:#666;margin-top:0}@media screen and (min-width: 768px){.default-container,.loading-container{aspect-ratio:4/3;max-height:none}}button{padding:10px;font-size:14px;width:100%;transition:all .3s ease;margin:0;border-radius:8px;border:1px solid transparent;font-weight:500;background-color:#1a1a1a;color:#fff;cursor:pointer;transition:border-color .25s,background .3s,transform .3s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}