*{box-sizing:border-box;margin:0;padding:0}:root{--topH: 13vh;--bottomH: 18vh}body{margin:0;display:flex;flex-direction:column;height:100svh;overflow:hidden;background:#000;color:#fff;font-family:sans-serif;user-select:none;-webkit-user-select:none}.max-width{position:relative;height:100%;max-width:800px;width:100%;margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;justify-items:center}#top-bar{position:fixed;top:0;left:0;width:100%;height:var(--topH);background:#111;display:flex;align-items:center;justify-content:space-between;z-index:45;padding:0 1rem;padding-top:env(safe-area-inset-top,0px)}#top-bar .max-width{display:flex}.top-col{flex:1;display:flex;justify-content:center;align-items:center}#top-bar .top-col:first-child{flex:0 0 20%;max-width:20%;justify-content:flex-start}#top-bar .top-col:nth-child(2){flex:0 0 80%;max-width:80%;justify-content:flex-start;padding-left:15px}#top-bar .messages{position:static!important;transform:none;max-width:100%;text-align:center;color:#fff}.video-container{position:relative;flex:0 0 auto;--visH: calc(100svh - var(--topH) - var(--bottomH));width:min(calc(var(--visH) * 7 / 9),100vw);height:min(var(--visH),calc(100vw * 9 / 7));margin:var(--topH) auto calc(var(--bottomH) + env(safe-area-inset-bottom));background:#000;-webkit-user-drag:none}.video-container video{width:100%;height:100%;object-fit:cover;display:block;z-index:0;-webkit-user-drag:none}#overlay,#faceOverlay,.video-container canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#overlay{z-index:1}#faceOverlay{z-index:2}#photoContainer{display:none;position:absolute;inset:0;width:100%;height:100%;z-index:3;overflow:hidden}#photoContainer img{width:100%;height:100%;object-fit:contain;border:2px solid #fff;display:block;-webkit-user-drag:none}#photoEditCanvas,#photoMaskCanvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-drag:none}#photoEditCanvas{pointer-events:auto;cursor:grab;z-index:4}#photoEditCanvas:active{cursor:grabbing}#photoMaskCanvas{pointer-events:none;z-index:5}.edit-overlay{position:absolute;left:0;bottom:0;width:100%;padding:.55rem .9rem calc(.65rem + env(safe-area-inset-bottom));background:linear-gradient(to top,#000000eb,#0006 60%,#0000);z-index:6;pointer-events:none}.edit-overlay .edit-group{position:absolute;bottom:.55rem;display:flex;gap:.6rem;pointer-events:auto}.edit-overlay .edit-group.left{left:.9rem}.edit-overlay .edit-group.right{right:.9rem}.edit-overlay button{width:54px;height:54px;border-radius:50%;border:3px solid #fff;background:#1d1d1d;color:#fff;font-size:1.5rem;font-weight:600;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 5px #0000008c;transition:background .2s,transform .15s}.edit-overlay button:hover{background:#2a2a2a}.edit-overlay button:active{transform:scale(.9)}#bottom-bar{position:fixed;left:0;bottom:0;width:100%;background:#111;display:flex;align-items:center;justify-content:center;z-index:40;height:var(--bottomH);padding-bottom:calc(env(safe-area-inset-bottom,0px) + .75rem)}#captureBtn,#startBtn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:4px solid #fff;background:transparent;cursor:pointer;outline:none;color:#fff}#captureBtn{display:none;width:85px;height:85px;border-radius:50%;background:#fff;border:5px solid #111;box-shadow:0 0 0 4px #fff}#startBtn{display:block;padding:0 1rem;height:60px;border-radius:30px;font-size:1.2rem;line-height:1}#reviewControls{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);gap:1rem;z-index:41}#reviewControls button{display:inline-block;padding:.6em 1.2em;border-radius:24px;font-size:1rem;line-height:1;cursor:pointer;background:transparent;color:#fff;border:4px solid #fff;box-sizing:border-box;min-width:140px}#downloadBtn{border-color:#0f0!important;font-size:1.4rem!important}#downloadBtn:disabled,#discardBtn:disabled{opacity:.4;cursor:default;border-color:#666!important}#switchCam{position:absolute;right:1rem;top:50%;transform:translateY(-50%);width:80px;height:80px;cursor:pointer;border-radius:5px;display:none}.dir-icon{width:80px;height:80px;border-radius:5px}.mirror{transform:scaleX(-1);-webkit-transform:scaleX(-1)}#introInstructions{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem;font-size:1.2rem;line-height:1.4;color:#fff;background:#000;z-index:4}#introInstructions p{display:none}#introInstructions .intro-stack{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}#introInstructions .intro-heading{display:flex;flex-direction:column;align-items:center;gap:0}#introInstructions .intro-title{font-family:Bebas Neue,sans-serif;font-size:1.8rem;letter-spacing:.5px}#introInstructions .intro-subtitle{opacity:.9;font-size:1.1rem}#introInstructions .intro-sep{width:60%;height:1px;background:#333;margin:6px 0 2px}button{line-height:1.2}.start-like{display:inline-flex;align-items:center;justify-content:center;padding:0 1.1rem;min-height:60px;border-radius:30px;font-size:1.2rem;line-height:1.2;border:4px solid #fff;background:transparent;color:#fff;cursor:pointer;min-width:220px}.start-like:active{transform:scale(.98)}@media (hover:hover) and (pointer:fine){#switchCam{display:none!important}}#infoBtn{position:relative;z-index:auto;grid-column:1;justify-self:start;align-self:center;margin-left:20px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.4rem;line-height:1;width:55px;height:55px;border-radius:50%;background:#111;border:none;cursor:pointer;--inner-angle: 0deg;--outer-angle: 0deg;--inner-color: #0f0;--outer-color: #2b9cff;--inner-track: rgba(0,255,0,.2);--outer-track: rgba(43,156,255,.2);--ring-w: 6px;--gap: 4px}#infoBtn .ring{position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:.95;transition:opacity .2s ease;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--ring-w)),#000 0);mask:radial-gradient(farthest-side,transparent calc(100% - var(--ring-w)),#000 0)}#infoBtn .ring-inner{inset:-3px;background:conic-gradient(from -90deg,var(--inner-color) var(--inner-angle),transparent 0 360deg),conic-gradient(from -90deg,var(--inner-track) 360deg)}#infoBtn .ring-outer{inset:calc(-3px - var(--gap) - var(--ring-w));background:conic-gradient(from -90deg,var(--outer-color) var(--outer-angle),transparent 0 360deg),conic-gradient(from -90deg,var(--outer-track) 360deg);opacity:0}#infoBtn.dual .ring-outer{opacity:.95}.info-popup{position:fixed;left:0;bottom:0;width:100%;height:50vh;background:#000;color:#fff;transform:translateY(100%);transition:transform .3s ease-in-out;z-index:50;display:flex;flex-direction:column}.info-popup.open{transform:translateY(0)}#infoBtn .info-badge{position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#e53935;color:#fff;font-weight:700;font-size:12px;line-height:20px;text-align:center;display:none;transform-origin:center;z-index:3;box-shadow:0 0 0 2px #111}#infoBtn .info-badge.show{display:flex;align-items:center;justify-content:center;animation:pulseBadge 1.2s ease-in-out infinite}@keyframes pulseBadge{0%,to{transform:scale(1)}50%{transform:scale(1.12)}}#popupContent .popup-dynamic{margin-bottom:.75rem}.popup-hidden{display:none}.popup-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-bottom:1px solid #444;font-size:1.1rem}.close-btn{background:transparent;border:none;font-size:1.5rem;color:#fff;cursor:pointer}.popup-content{padding:1rem;overflow-y:auto;flex:1}#countdownTimer{font-size:3rem;font-weight:700;padding-left:10px;line-height:1;user-select:none}#soundToggle{position:absolute;top:8px;left:50%;right:auto;transform:translate(-50%);z-index:11;width:40px;height:40px;padding:0;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#28c463;transition:color .25s,transform .15s}#soundToggle.off{color:#8d8d8d}#soundToggle .icon-sound{width:100%;height:100%;display:block;pointer-events:none;filter:drop-shadow(0 0 4px rgba(40,196,99,.45))}#soundToggle.off .icon-sound{filter:none}#soundToggle:active{transform:scale(.9)}@media (max-width: 640px){#reviewControls{flex-direction:row;top:50%}#reviewControls button{min-width:140px}.edit-overlay button{width:48px;height:48px;font-size:1.15rem}.edit-overlay .edit-group.left{left:.65rem}.edit-overlay .edit-group.right{right:.65rem}}#top-center{display:flex;flex-direction:column;align-items:center;justify-content:center}.stage-header{font-size:1.3rem;font-weight:700;text-align:center;width:100%;margin-bottom:.2rem}.light-icon{position:absolute;top:8px;width:40px;height:40px;opacity:0;background:currentColor;-webkit-mask:url(/icons/light.svg) center / contain no-repeat;mask:url(/icons/light.svg) center / contain no-repeat;z-index:10;transition:opacity .35s ease,color .8s ease,filter .8s ease,transform .25s ease}.video-container.lights-on .light-icon{opacity:.5}.light-icon.left{left:8px}.light-icon.right{right:8px}.light-icon.on{color:#ffd400;filter:drop-shadow(0 0 8px rgba(255,212,0,.5));animation:none}.light-icon.off{animation:colorPulse 1.8s ease-in-out infinite}@keyframes colorPulse{0%{color:#666}50%{color:#ff3c3c}to{color:#666}}#nextStageBtn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:none;padding:.6em 1.2em;border-radius:24px;font-size:1rem;line-height:1;cursor:pointer;background:transparent;color:#fff;border:4px solid #fff;min-width:140px;box-sizing:border-box}