:root{--video-blur: 30px}body{margin:0;overflow:hidden;font-family:system-ui,sans-serif;background:#111;color:#fff}#app{position:relative;width:100vw;height:100vh}video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);opacity:.3;filter:blur(var(--video-blur))}#hand-canvas{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);z-index:4;pointer-events:none}#interaction-layer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}.draggable{width:120px;height:120px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-weight:700;user-select:none;transition:transform .15s cubic-bezier(.4,0,.2,1),box-shadow .15s ease,background-color .3s ease;box-shadow:0 4px 15px #0000004d;border:2px solid rgba(255,255,255,.1)}.draggable.hover{transform:scale(1.05);border-color:#ffffff80;box-shadow:0 8px 25px #0006}.draggable.dragging{transform:scale(1.15);box-shadow:0 20px 40px #0009;border-color:#fff;filter:brightness(1.2)}#box1{background:#ff4757;top:200px;left:200px}#box2{background:#2ed573;top:200px;left:400px}#box3{background:#1e90ff;top:400px;left:300px}.cursor{position:absolute;width:20px;height:20px;background:#fff;border:2px solid black;border-radius:50%;pointer-events:none;z-index:100;transform:translate(-50%,-50%);display:none}#cursor-1{filter:hue-rotate(90deg)}.cursor.pinching{background:#ffec33;transform:translate(-50%,-50%) scale(1.5)}.status-bar{position:absolute;bottom:0;left:0;width:100%;height:40px;background:#000000d9;backdrop-filter:blur(10px);display:flex;align-items:center;padding:0 20px;box-sizing:border-box;z-index:2100;border-top:1px solid rgba(255,255,255,.1);color:#eee;font-size:.8rem;font-family:monospace;gap:20px}#status{flex:1;letter-spacing:1px;opacity:.8}.status-bar fps-monitor{display:flex;align-items:center}#debug-toggle{position:absolute;top:20px;right:20px;background:#000000b3;color:#fff;border:1px solid #555;padding:4px 12px;border-radius:20px;cursor:pointer;z-index:1600;font-size:.8rem;transition:background-color .2s}#debug-toggle:hover{background:#323232cc}#debug-sidebar{position:absolute;top:0;right:0;width:250px;height:100%;background:#000000d9;backdrop-filter:blur(10px);z-index:1500;padding:20px;box-sizing:border-box;border-left:1px solid rgba(255,255,255,.1);overflow-y:auto}#debug-sidebar.hidden{transform:translate(100%)}#debug-sidebar h3{margin-top:0;border-bottom:1px solid #444;padding-bottom:10px;color:#ffec33}.debug-section{margin-bottom:20px}.debug-section h4{margin:0 0 8px;font-size:.9rem;color:#aaa;text-transform:uppercase;letter-spacing:1px}.debug-section p,.debug-section div{margin:4px 0;font-family:monospace;font-size:.85rem;color:#eee}.hand-label{font-size:.7rem;background:#444;padding:2px 6px;border-radius:4px;margin-left:8px;color:#ffec33;text-transform:uppercase}.debug-hand-container{border:1px solid rgba(255,255,255,.1);padding:10px;border-radius:8px;margin-bottom:15px;background:#ffffff08}#gesture-selector-sidebar{display:flex;flex-direction:column;gap:8px}#gesture-selector-sidebar select{background:#333;color:#fff;border:1px solid #555;border-radius:4px;padding:6px;cursor:pointer;width:100%}#camera-toggle-btn{background:#ff4757;color:#fff;border:none;padding:8px 12px;border-radius:4px;cursor:pointer;width:100%;font-weight:700;transition:background-color .2s}#camera-toggle-btn.starting{background:#2ed573}#camera-toggle-btn:hover{filter:brightness(1.1)}.debug-link{color:#1e90ff;text-decoration:none;font-size:.85rem;font-family:monospace}.debug-link:hover{text-decoration:underline}.mini-debug{white-space:pre-wrap;background:#ffffff0d;padding:4px;border-radius:4px;font-size:.75rem!important}#paused-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000c;display:none;flex-direction:column;align-items:center;justify-content:center;z-index:2000;backdrop-filter:blur(5px)}#paused-overlay h2{font-size:3rem;margin-bottom:1rem}.top-nav{position:absolute;top:20px;left:50%;transform:translate(-50%);display:flex;gap:20px;background:#000000b3;padding:10px 30px;border-radius:30px;z-index:2100;border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px)}.top-nav a{color:#888;text-decoration:none;font-weight:600;font-size:.9rem;transition:color .2s}.top-nav a:hover{color:#fff}.top-nav a.active{color:#2ed573}