:root{--glassBg: rgba(20, 20, 20, .6);--glassBorder: rgba(255, 255, 255, .1);--accent: #00ffff;--textMain: #ffffff;--textMuted: #aaaaaa;--fontFamily: "Inter", sans-serif}body,html{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background-color:#050505;font-family:var(--fontFamily);color:var(--textMain)}#app{position:relative;width:100%;height:100%}#canvasContainer{width:100%;height:100%;position:absolute;top:0;left:0;z-index:1}#videoInput{position:absolute;bottom:20px;right:20px;width:160px;height:120px;border-radius:8px;z-index:20;opacity:1;transform:scaleX(-1);border:1px solid var(--glassBorder);box-shadow:0 4px 12px #00000080;background:#000}.glassPanel{position:absolute;top:20px;left:20px;width:280px;background:var(--glassBg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glassBorder);border-radius:16px;padding:24px;z-index:10;box-shadow:0 8px 32px #0000004d;display:flex;flex-direction:column;gap:20px;transition:opacity .3s}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}h1{font-size:18px;font-weight:600;margin:0;letter-spacing:-.02em}.statusIndicator{width:8px;height:8px;border-radius:50%;background-color:#ff3b3b;box-shadow:0 0 8px #ff3b3b80;transition:background-color .3s,box-shadow .3s}.statusIndicator.active{background-color:#0f8;box-shadow:0 0 8px #00ff8880}.controlGroup label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--textMuted);margin-bottom:10px}.styleRow{display:flex;align-items:center;justify-content:space-between;gap:10px}.controlItem{display:flex;align-items:center;font-size:13px;color:#fff}.switchLabel{display:flex;align-items:center;gap:8px;cursor:pointer}.switchLabel input{width:16px;height:16px;accent-color:var(--accent)}.colorPickerWrapper{display:flex;align-items:center;justify-content:flex-end;width:auto}input[type=color]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;width:32px;height:32px;border-radius:50%;cursor:pointer;padding:0;background:none;overflow:hidden}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:2px solid var(--glassBorder);border-radius:50%}.footerControls{margin-top:10px}.iconBtn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:#ffffff14;border:none;padding:12px;border-radius:8px;color:#fff;cursor:pointer;font-family:var(--fontFamily);font-size:13px;transition:background .2s}.iconBtn:hover{background:#ffffff26}.gestureIcons{display:flex;justify-content:space-around;font-size:11px;color:#fff}.gestureListContainer{margin-top:15px;border-top:1px solid rgba(255,255,255,.05);padding-top:15px}.gestureListContainer label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--textMuted);margin-bottom:10px}.scrollList{max-height:200px;overflow-y:auto;padding:5px}.noScrollbar::-webkit-scrollbar{display:none}.noScrollbar{-ms-overflow-style:none;scrollbar-width:none}.gestureItem{display:flex;align-items:center;gap:12px;padding:10px 12px;margin-bottom:8px;border-radius:8px;background:#ffffff08;border:1px solid transparent;cursor:default;opacity:0;transform:scale(.8);animation:itemEntrance .4s cubic-bezier(.175,.885,.32,1.275) forwards}.gestureItem:nth-child(1){animation-delay:.1s}.gestureItem:nth-child(2){animation-delay:.2s}.gestureItem:nth-child(3){animation-delay:.3s}.gestureItem:nth-child(4){animation-delay:.4s}.gestureItem:nth-child(5){animation-delay:.5s}@keyframes itemEntrance{to{opacity:1;transform:scale(1)}}.gestureItem:hover{background:#ffffff14;transform:translate(4px);transition:transform .2s,background .2s}.gestureItem.active{background:#00ffff26;border-color:var(--accent);box-shadow:0 0 12px #0ff3;transform:scale(1.02);transition:all .3s cubic-bezier(.175,.885,.32,1.275)}.gestureIcon{font-size:16px}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;display:flex;justify-content:center;align-items:center;opacity:0;visibility:hidden;transition:all .3s ease}.modal-overlay.active{opacity:1;visibility:visible}.modal-content{background:#1e1e23f2;border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:30px;width:90%;max-width:450px;text-align:center;position:relative;transform:scale(.9);transition:transform .3s cubic-bezier(.34,1.56,.64,1);box-shadow:0 15px 50px #00000080;display:flex;flex-direction:column;align-items:center}.modal-overlay.active .modal-content{transform:scale(1)}.close-modal{position:absolute;top:15px;right:20px;background:none;border:none;color:var(--textMuted);font-size:28px;cursor:pointer;transition:color .2s;line-height:1}.close-modal:hover{color:var(--textMain)}.modal-content h2{margin:0 0 20px;font-size:24px;font-weight:600;background:linear-gradient(135deg,#fff,#aaa);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.modal-image-container{width:100%;aspect-ratio:1 / 1;background:#ffffff0d;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;margin-bottom:20px;border:1px solid rgba(255,255,255,.1)}.modal-image-container img{width:100%;height:100%;object-fit:cover}.modal-instruction{font-size:14px;color:var(--textMuted);line-height:1.5;margin:0}.gestureItem{cursor:pointer}