*{margin:0;padding:0;box-sizing:border-box;scroll-behavior:smooth}body{width:100svw;height:100svh}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;background:#000}.app-root{width:100vw;height:100svh;display:flex;justify-content:center;align-items:center}.camera-wrapper{position:relative;width:92vw;height:88svh;margin:auto;overflow:hidden;border-radius:22px;background:radial-gradient(circle at top,#05070f,#000);box-shadow:0 0 0 1px #008ca026,0 0 24px #0064782e,0 25px 80px #000000d9}.webcam{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:scaleX(-1) scale(.96);filter:contrast(1.05) brightness(.96)}.instruction{position:absolute;top:18px;left:50%;transform:translate(-50%);padding:12px 26px;font-size:18px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:#9fefff;background:#030c16c7;border:1px solid rgba(0,160,180,.35);border-radius:36px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 14px #008ca059;z-index:10}.face-label{position:absolute;transform:translate(-50%,-120%);padding:10px 22px;font-size:17px;font-weight:800;letter-spacing:.4px;text-align:center;white-space:pre-line;line-height:1.35;color:#bffbff;background:#020a12eb;border:1px solid rgba(0,160,180,.55);border-radius:20px;box-shadow:0 0 12px #00788c73,inset 0 0 6px #00788c40;animation:hudPop .25s ease-out;z-index:10}@keyframes hudPop{0%{opacity:0;transform:translate(-50%,-140%) scale(.92)}to{opacity:1;transform:translate(-50%,-120%) scale(1)}}@media(max-width:768px){.camera-wrapper{width:96vw;height:85svh}.instruction{font-size:16px}.face-label{font-size:15px}}