*{margin:0;padding:0;box-sizing:border-box}body,html{min-height:100vh;width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.app-container{max-width:1200px;margin:0 auto;padding:20px}.header{text-align:center;margin-bottom:30px}.title{font-size:3rem;font-weight:700;margin-bottom:10px;background:linear-gradient(45deg,#ff6b6b,#4ecdc4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{font-size:1.2rem;opacity:.9;font-weight:300}.camera-container{position:relative;max-width:900px;margin:40px auto;background:#ffffff1a;border-radius:20px;padding:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 32px #0000001a}.video-wrapper{position:relative;border-radius:15px;overflow:hidden;margin-bottom:20px;width:100%;aspect-ratio:16/9;background:#222}#video{position:absolute;top:0;left:0;width:100%;height:100%;display:block;object-fit:cover;transform:scaleX(-1);z-index:1;border:3px solid red}#canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2;transform:scaleX(-1)}.status-info{background:#0000004d;border-radius:10px;padding:10px;margin-bottom:20px;text-align:center}#detection-status{font-size:.9rem;color:#4ecdc4;font-weight:500}.filter-section{margin-bottom:25px}.filter-section h3{text-align:center;margin-bottom:15px;font-size:1.3rem;font-weight:600;opacity:.9}.controls{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:15px}.filter-btn{padding:10px 20px;border:none;border-radius:25px;background:#fff3;color:#fff;font-size:.95rem;font-weight:500;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid transparent;min-width:100px}.filter-btn:hover{background:#ffffff4d;transform:translateY(-2px);box-shadow:0 5px 15px #0003}.filter-btn.active{background:#fff6;border-color:#ffffff80;transform:scale(1.05);box-shadow:0 5px 20px #0000004d}.gesture-hint{text-align:center;font-size:.9rem;opacity:.7;font-style:italic;margin-top:5px}.start-btn{display:block;margin:0 auto;padding:15px 30px;background:linear-gradient(45deg,#ff6b6b,#4ecdc4);border:none;border-radius:30px;color:#fff;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 5px 15px #0003}.start-btn:hover{transform:translateY(-3px);box-shadow:0 8px 25px #0000004d}.loading{text-align:center;padding:40px;font-size:1.1rem;opacity:.8}.error{text-align:center;padding:40px;color:#ff6b6b;font-size:1.1rem}.hidden{display:none}.hand-tool-overlay{position:absolute;left:0;bottom:0;width:100%;pointer-events:none;z-index:10;display:flex;justify-content:center}.tool-options{display:flex;gap:32px;background:#00000080;border-radius:20px 20px 0 0;padding:18px 32px 10px;pointer-events:auto;box-shadow:0 8px 32px #0000004d;margin-bottom:0}.tool-option{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 18px;border-radius:12px;cursor:pointer;transition:all .3s ease;background:#ffffff1a;border:2px solid transparent;min-width:80px}.tool-option:hover,.tool-option.highlighted{background:#ffffff4d;border-color:#ffffff80;transform:scale(1.1);box-shadow:0 0 20px #ffffff80}.tool-icon{font-size:2.2rem;display:block}.tool-label{font-size:1rem;font-weight:500;text-align:center;color:#fff}#hand-gesture-hint{color:#4ecdc4;font-weight:500;margin-top:5px;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:.7}50%{opacity:1}}@media (max-width: 768px){.title{font-size:2rem}.app-container{padding:15px}.controls{gap:8px}.filter-btn{padding:8px 16px;font-size:.85rem;min-width:80px}.filter-section h3{font-size:1.1rem}}@media (max-width: 480px){.controls{flex-direction:column;align-items:center}.filter-btn{width:200px}}.gesture-label-overlay{position:absolute;top:16px;left:50%;transform:translate(-50%);color:#0f0;font-size:2.2rem;font-family:Arial,sans-serif;font-weight:700;text-shadow:0 2px 8px #000,0 0 2px #000;z-index:20;pointer-events:none;text-align:center;letter-spacing:1px}