*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{-webkit-tap-highlight-color:transparent;touch-action:none;-ms-touch-action:none;overscroll-behavior:none;background:#0a0a0f;width:100%;height:100%;font-family:Segoe UI,system-ui,-apple-system,sans-serif;position:fixed;inset:0;overflow:hidden}#root{width:100%;height:100%}.canvas-wrap{touch-action:none;-ms-touch-action:none;position:absolute;inset:0}.cam{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.output-layer,.draw-layer,.cursor-layer{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.output-layer{z-index:0}.draw-layer{z-index:1}.cursor-layer{z-index:2}.ctrl-panel{z-index:100;-webkit-backdrop-filter:blur(20px);background:#000000b3;border:1px solid #ffffff1f;border-radius:14px;flex-direction:column;align-items:center;gap:8px;max-width:96vw;padding:10px 14px;display:flex;position:absolute;bottom:20px;left:50%;transform:translate(-50%);box-shadow:0 4px 24px #0009}.ctrl-row{justify-content:center;align-items:center;gap:8px;width:100%;display:flex}.ctrl-group{align-items:center;gap:5px;display:flex}.divider{background:#ffffff26;flex-shrink:0;width:1px;height:24px}.color-btn{cursor:pointer;border:2.5px solid #fff3;border-radius:50%;flex-shrink:0;width:26px;height:26px;transition:transform .15s,border-color .15s,box-shadow .15s}.color-btn:active{transform:scale(1.15)}.color-btn.active{border-color:#fffffff2;transform:scale(1.1);box-shadow:0 0 10px}.ctrl-btn{color:#fff;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;text-align:center;background:#ffffff1a;border:1px solid #ffffff26;border-radius:8px;flex:1;min-width:0;padding:7px 12px;font-family:inherit;font-size:12px;font-weight:600;transition:background .15s,transform .1s}.ctrl-btn:active{background:#fff3;transform:scale(.96)}.ctrl-btn.active{background:#ffffff40;border-color:#ffffff59}.ctrl-btn.danger{color:#fca5a5;background:#ef44441a;border-color:#ef444466}.ctrl-btn.danger:active{background:#ef44444d}.ctrl-btn.save{color:#93c5fd;background:#3b82f61a;border-color:#3b82f666}.ctrl-btn.save:active{background:#3b82f640}.slider-wrap{align-items:center;gap:6px;display:flex}.slider-wrap label{color:#fff9;text-transform:uppercase;letter-spacing:.5px;font-size:11px;font-weight:600}.slider-wrap input[type=range]{appearance:none;cursor:pointer;background:#fff3;border-radius:2px;outline:none;width:80px;height:4px}.slider-wrap input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:18px;height:18px;box-shadow:0 1px 6px #00000080}.slider-wrap input[type=range]::-moz-range-thumb{cursor:pointer;background:#fff;border:none;border-radius:50%;width:18px;height:18px;box-shadow:0 1px 6px #00000080}.size-val{color:#ffffffb3;text-align:center;min-width:28px;font-size:11px;font-weight:600}@media (width<=640px){.ctrl-panel{bottom:calc(env(safe-area-inset-bottom,0px) + 52px);background:#000000d9;max-width:none;padding:8px 10px;left:6px;right:6px;transform:none}.color-btn{border-width:2.5px;width:28px;height:28px}.ctrl-btn{color:#fff;background:#ffffff1f;min-height:36px;padding:8px 6px;font-size:11px}.slider-wrap input[type=range]{width:50px}.divider{display:none}}.loading-overlay{z-index:200;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#fff;background:#0a0a0ff2;flex-direction:column;justify-content:center;align-items:center;gap:16px;display:flex;position:absolute;inset:0}.spinner{border:3px solid #ffffff1a;border-top-color:#3b82f6;border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading-overlay p{color:#fff9;font-size:14px}.app{width:100vw;height:100vh;position:relative;overflow:hidden}.error-overlay{z-index:200;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#fff;text-align:center;background:#0a0a0ff2;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:24px;display:flex;position:absolute;inset:0}.error-icon{background:#ef444426;border:2px solid #ef444466;border-radius:50%;width:48px;height:48px;position:relative}.error-icon:before{content:"!";color:#fca5a5;justify-content:center;align-items:center;font-size:24px;font-weight:700;display:flex;position:absolute;inset:0}.error-msg{color:#fffc;max-width:320px;font-size:14px;line-height:1.5}.status-indicator{z-index:40;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);pointer-events:none;background:#0000008c;border:1px solid #ffffff14;border-radius:14px;flex-direction:column;align-items:center;gap:10px;padding:16px 24px;transition:opacity .4s;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.status-indicator.hand,.status-indicator.detected,.status-indicator.hover,.status-indicator.draw{opacity:0}.status-dot-lg{background:#ffffff4d;border-radius:50%;width:14px;height:14px;transition:background .3s,box-shadow .3s}.status-indicator.loading .status-dot-lg{background:#3b82f6;animation:1.5s ease-in-out infinite pulse;box-shadow:0 0 12px #3b82f6}.status-indicator.hand .status-dot-lg,.status-indicator.detected .status-dot-lg,.status-indicator.hover .status-dot-lg{background:#eab308;box-shadow:0 0 12px #eab308}.status-indicator.draw .status-dot-lg{background:#22c55e;animation:1s ease-in-out infinite pulse-draw;box-shadow:0 0 16px #22c55e}.status-indicator.error .status-dot-lg{background:#ef4444;box-shadow:0 0 12px #ef4444}.status-label{color:#ffffffd9;text-align:center;white-space:nowrap;font-size:14px;font-weight:600}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.85)}}@keyframes pulse-draw{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.2)}}.hud{z-index:50;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0009;border:1px solid #ffffff14;border-radius:8px;align-items:center;gap:10px;padding:6px 12px;display:flex;position:absolute;top:12px;left:12px}.hud-left{align-items:center;gap:8px;display:flex}.dot{background:#ffffff4d;border-radius:50%;width:8px;height:8px;transition:background .3s,box-shadow .3s}.dot.draw{background:#22c55e;box-shadow:0 0 8px #22c55e}.dot.hover{background:#eab308;box-shadow:0 0 8px #eab308}.dot.detected{background:#eab308;box-shadow:0 0 6px #eab308}.hud-fps{color:#fff6;font-variant-numeric:tabular-nums;font-size:11px;font-weight:600}@media (width<=640px){.hud{top:env(safe-area-inset-top,8px);background:#000000b3;left:8px}.status-indicator{padding:12px 18px}.status-label{font-size:13px}}