:root{--transition: all .3s ease-out;--c1: #286733;--section_padding: clamp(30px, 8vw, 80px);--gap_min: clamp(15px, 2vw, 20px);--gap: clamp(20px, 4vw, 40px);--gap_xl: clamp(25px, 8vw, 80px);--radius: 20px;--radius_l: clamp(20px, 5vw, 40px);--radius_xl: clamp(25px, 8vw, 100px)}*{margin:0;padding:0}*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-family:Roboto,sans-serif;font-size:15px;scroll-behavior:smooth}body{overflow:hidden;display:grid;grid-template-rows:max-content auto;gap:20px;margin:0;padding:10px;height:calc(100vh - 20px)}#app{position:relative;width:clamp(320px,100%,1000px);margin:0 auto;overflow:hidden;aspect-ratio:16 / 9}#app>*{position:absolute;top:0;left:0;width:100%!important;height:100%!important;object-fit:cover}#app #videoCanvas{z-index:1;transform:scaleX(-1)}#app #threeCanvas{z-index:2;transform:scaleX(-1)}#app #overlay{z-index:3;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background-color:#0000001a;transition:var(--transition)}body.interacting #app #overlay{-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);background-color:transparent}#app #overlay .logo{position:absolute;width:clamp(320px,70%,800px);top:50%;left:50%;transform:translate(-50%,-60%);transition:var(--transition);filter:drop-shadow(0px 0px 20px rgba(0,0,0,.2))}#app #overlay .logo .logo_1{width:80%}#app #overlay .logo{display:flex;flex-direction:column;align-items:center;gap:4vh}body.interacting #app #overlay .logo{width:clamp(100px,20%,300px);top:2vh;left:2vh;transform:translate(0)}body.interacting #app #overlay .logo .logo_2{opacity:0}#overlay .coupon{color:#fff;text-transform:uppercase;background-color:var(--c1);display:flex;gap:2vh;padding:1vh;align-items:center;justify-content:center;position:absolute;bottom:2vh;left:0;right:0}#overlay .coupon h1{font-size:6vh}#overlay .coupon h2{text-transform:initial;font-size:3vh}#overlay .coupon p{font-size:1.4vh}#analytics-container{height:100%;overflow:auto}.analytics-table{width:100%;border-collapse:collapse}.analytics-table th,.analytics-table td{border:1px solid #ddd;padding:8px;text-align:left}.analytics-table th{background-color:#f2f2f2}.analytics-summary{padding:10px;background-color:#f9f9f9;border-radius:4px}.boxed{width:clamp(320px,100%,1000px);margin:0 auto;height:100%;overflow:hidden;display:grid;grid-template-columns:4fr 1fr;gap:20px}.boxed .stats{display:grid;grid-template-rows:max-content auto max-content;gap:10px;height:100%;overflow:hidden}.alerts{display:flex;flex-direction:row;justify-content:space-between}.boxed p{margin:0 0 5px}button{cursor:pointer}#status{position:absolute;top:10px;right:10px;padding:10px;z-index:999;color:#000;background:#fdd72e;border-radius:50%}#status.ready{background:#2ecc71}#faceCanvas{position:absolute;bottom:10px;left:10px}fieldset{padding:10px;border-radius:5px;margin-bottom:10px}.availableMasks{display:flex;flex-wrap:wrap;gap:10px;margin:5px 0}.availableMasks .mask-option{display:flex;flex-direction:column;align-items:center;justify-content:center}.availableMasks .mask-option button{font-size:11px}.availableMasks .mask-button{width:60px;height:60px;padding:3px;border:2px solid #ccc;border-radius:5px;background:none;cursor:pointer;transition:all .2s ease;overflow:hidden}.availableMasks .mask-button:hover{border-color:#888}.availableMasks .mask-button.selected{border-color:#4c9eff}.availableMasks .mask-button img{width:100%;height:100%;object-fit:cover;border-radius:3px}button{width:100%;padding:2px 0;margin:5px 0}.main-app{padding:0}.main-app #app{width:100vw;height:100vh}.main-app .controls{position:absolute;top:20px;left:20px;z-index:9999;background-color:#fff;padding:10px;border-radius:10px;display:none}.main-app.show-controls .controls{display:block}.update-notification{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background-color:#333;color:#fff;padding:15px;border-radius:5px;box-shadow:0 0 10px #0000001a;z-index:9999}.update-notification button{margin-left:10px}