:root{--primary: #00f2fe;--secondary: #4facfe;--bg-dark: #0f172a;--glass-bg: rgba(255, 255, 255, .05);--glass-border: rgba(255, 255, 255, .1);--text-main: #f8fafc;--text-muted: #94a3b8;--accent-glow: 0 0 20px rgba(0, 242, 254, .3)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Outfit,sans-serif;background-color:var(--bg-dark);color:var(--text-main);min-height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden;background:radial-gradient(circle at top right,#1e293b,#0f172a)}#app{width:100%;max-width:1200px;padding:2rem;display:flex;flex-direction:column;gap:2rem}header{text-align:center}header h1{font-size:3rem;font-weight:600;letter-spacing:-1px;margin-bottom:.5rem}header h1 span{background:linear-gradient(to right,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent}header p{color:var(--text-muted);font-size:1.1rem}main{display:grid;grid-template-columns:1fr 300px;gap:2rem;align-items:start}.video-container{position:relative;width:100%;aspect-ratio:16 / 9;background:#000;border-radius:24px;overflow:hidden;box-shadow:0 25px 50px -12px #00000080;border:1px solid var(--glass-border)}#webcam{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}#drawing_canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10;transform:scaleX(-1)}#output_canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:5;transform:scaleX(-1)}video{width:100%;height:100%;object-fit:cover;border-radius:12px;transform:scaleX(-1);z-index:1}.loader-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0f172ae6;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;z-index:10;transition:opacity .5s ease}.spinner{width:50px;height:50px;border:3px solid var(--glass-border);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.controls-panel{background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:24px;padding:1.5rem;display:flex;flex-direction:column;gap:2rem}.control-group h3{font-size:.9rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin-bottom:1rem}.buttons{display:flex;flex-direction:column;gap:.75rem}button{background:#ffffff0d;border:1px solid var(--glass-border);color:var(--text-main);padding:1rem;border-radius:12px;font-family:inherit;font-size:1rem;cursor:pointer;transition:all .3s ease;text-align:left;display:flex;align-items:center;gap:.5rem}button:hover{background:#ffffff1a;border-color:var(--primary);transform:translate(4px)}button.active{background:linear-gradient(135deg,var(--primary),var(--secondary));border-color:transparent;box-shadow:var(--accent-glow);color:#000;font-weight:600}.status-panel{border-top:1px solid var(--glass-border);padding-top:1.5rem;display:flex;flex-direction:column;gap:.75rem}.status-item{display:flex;justify-content:space-between;font-size:.9rem}.status-item .label{color:var(--text-muted)}.status-item .value{color:var(--primary);font-weight:600}footer{text-align:center;color:var(--text-muted);font-size:.9rem}#virtual-cursor{position:absolute;width:20px;height:20px;background:var(--primary);border-radius:50%;pointer-events:none;z-index:20;transform:translate(-50%,-50%);box-shadow:0 0 15px var(--primary);opacity:0;transition:opacity .3s ease,transform .1s ease-out,background .2s ease}#virtual-cursor.active{background:#ff0080;transform:translate(-50%,-50%) scale(1.5);box-shadow:0 0 25px #ff0080}#virtual-cursor.eraser-active{background:#ffffff80;width:80px;height:80px;border:2px solid #fff;box-shadow:0 0 15px #ffffff80;transform:translate(-50%,-50%) scale(1)}.object-list{display:flex;flex-direction:column;gap:.5rem;max-height:200px;overflow-y:auto;padding-right:5px}.object-list::-webkit-scrollbar{width:4px}.object-list::-webkit-scrollbar-thumb{background:var(--glass-border);border-radius:10px}.object-item{background:#ffffff08;padding:.75rem 1rem;border-radius:8px;border-left:3px solid var(--primary);display:flex;justify-content:space-between;align-items:center;animation:slideIn .3s ease-out forwards}@keyframes slideIn{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.object-item .name{font-weight:600;font-size:.9rem}.object-item .score{font-size:.8rem;color:var(--text-muted)}.empty-msg{color:var(--text-muted);font-size:.85rem;font-style:italic;text-align:center;padding:1rem 0}#gesture-banner{position:absolute;top:20px;left:50%;transform:translate(-50%);background:#00f2fe33;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:.75rem 2rem;border-radius:50px;border:1px solid var(--primary);color:var(--primary);font-weight:600;text-transform:uppercase;letter-spacing:2px;font-size:1.2rem;z-index:25;pointer-events:none;opacity:0;transition:all .3s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 0 20px #00f2fe33}#gesture-banner.visible{opacity:1;top:40px}#gesture-banner.active{background:var(--primary);color:#000;transform:translate(-50%) scale(1.1);box-shadow:0 0 40px var(--primary)}.report-item{background:#ffffff08;padding:.5rem .75rem;border-radius:6px;font-size:.8rem;border-left:2px solid var(--secondary);animation:slideIn .2s ease-out}.report-item span{color:var(--text-muted);margin-right:5px}@media(max-width:900px){main{grid-template-columns:1fr}#app{padding:1rem}header h1{font-size:2.5rem}}