body{font-family:sans-serif;margin:20px;background-color:#f0f0f0;color:#333}h1{text-align:center;color:#0056b3}#container{display:flex;justify-content:center;align-items:flex-start;gap:20px;margin-top:20px}#liveView{position:relative;width:640px;height:480px;border:2px solid #0056b3;border-radius:10px;overflow:hidden;background:#000}#webcam{width:100%;height:100%;transform:scaleX(-1)}#output_canvas{position:absolute;top:0;left:0;width:100%;height:100%;transform:scaleX(-1)}#webcamButton{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:15px 30px;font-size:18px;cursor:pointer;background-color:#007bff;color:#fff;border:none;border-radius:5px;z-index:10}#webcamButton:disabled{background-color:#777;cursor:not-allowed}#gesture_output{min-width:200px;padding:20px;background-color:#fff;border:1px solid #ddd;border-radius:10px;box-shadow:0 2px 5px #0000001a;font-size:1.2em;text-align:center}#timer-container{display:none;position:fixed;bottom:30px;left:50%;transform:translate(-50%);background-color:#000000b3;color:#fff;padding:10px 20px;border-radius:25px;align-items:center;gap:15px;z-index:100;font-size:24px}#gesture-icon{font-size:32px}#progress-bar-container{width:200px;height:10px;background-color:#555;border-radius:5px;overflow:hidden}#progress-bar{width:0%;height:100%;background-color:#4caf50;border-radius:5px;transition:width .1s linear}