*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;margin:0;padding:0}body{color:#eaeaea;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#0b0e27;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.video-capture-container{background-color:#1b496b;width:100%;height:100%;position:relative;overflow:hidden}.video-capture-container video{object-fit:contain;width:100%;height:100%;display:block}.camera-selector{z-index:20;position:absolute;bottom:10px;left:50%;transform:translate(-50%)}.camera-selector select{color:#00d4ff;cursor:pointer;background:#16213ed9;border:1px solid #00d4ff;border-radius:6px;outline:none;padding:4px 10px;font-size:13px}.camera-selector select:hover{background:#00d4ff26}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#16213e}::-webkit-scrollbar-thumb{background:#00d4ff;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#0ff}*{scrollbar-color:#00d4ff #16213e;scrollbar-width:thin}.menubar{z-index:320;min-height:var(--topbar-height);color:#eaeaea;background-color:#1a1a2e;border-bottom:2px solid #16213e;flex-shrink:0;justify-content:space-between;align-items:center;gap:20px;padding:12px 20px;display:flex;position:relative}.menubar-left{flex:none;align-items:center;gap:12px;display:flex}.burger-toggle{cursor:pointer;background:#0c1e38e0;border:1px solid #2e6ea5;border-radius:6px;flex-direction:column;justify-content:center;gap:4px;width:34px;height:34px;padding:6px;display:inline-flex}.burger-toggle:hover{background:#20568ae6}.burger-line{background:#d6f1ff;border-radius:4px;width:100%;height:2px;display:block}.menubar-title{color:#00d4ff;margin:0;font-size:20px;font-weight:700}.menubar-center{flex:1;align-items:center;gap:10px;display:flex}.mode-label{font-size:14px;font-weight:500}.mode-select{color:#eaeaea;cursor:pointer;background-color:#0f3460;border:1px solid #00d4ff;border-radius:4px;padding:6px 12px;font-size:14px;transition:all .2s}.mode-select:hover{background-color:#1a5f7a;border-color:#0ff}.mode-select:focus{outline:none;box-shadow:0 0 8px #00d4ff80}.menubar-right{flex:none;gap:10px;display:flex}.menubar-btn{color:#eaeaea;cursor:pointer;white-space:nowrap;background-color:#0f3460;border:1px solid #00d4ff;border-radius:4px;padding:8px 16px;font-size:14px;transition:all .2s}.menubar-btn:hover{background-color:#1a5f7a;border-color:#0ff;transform:translateY(-1px)}.menubar-btn:active{transform:translateY(0)}.sidebar{top:var(--topbar-height);z-index:300;width:280px;height:calc(100vh - var(--topbar-height));pointer-events:auto;background-color:#16192b;border-right:1px solid #333;flex-direction:column;gap:12px;padding:12px;font-size:13px;display:flex;position:absolute;left:0;overflow-y:auto}.sidebar-section{background-color:#1a1f3a;border:1px solid #2a2f4a;border-radius:6px;flex-direction:column;gap:8px;padding:12px;display:flex}.section-header{cursor:pointer;text-align:left;background:0 0;border:none;justify-content:space-between;align-items:center;gap:8px;width:100%;margin:0;padding:0;display:flex}.sidebar-section h3{color:#64b5f6;text-transform:uppercase;letter-spacing:.5px;margin:0 0 8px;font-size:14px;font-weight:600}.section-header h3{margin:0}.section-chevron{color:#88c8ff;font-size:14px;line-height:1}.detection-counts{background:linear-gradient(135deg,#1a3a52,#1a2a3a);border:1px solid #2a4a6a}.count-display{flex-direction:column;gap:10px;display:flex}.count-item{background-color:#0000004d;border-left:3px solid #4db8ff;border-radius:4px;justify-content:space-between;align-items:center;padding:2px;display:flex}.count-label{color:#b0bec5;font-weight:500}.count-value{color:#4db8ff;text-align:right;min-width:30px;font-size:18px;font-weight:700}.finger-table{border:1px solid #4db8ff59;border-radius:4px;margin-top:8px;overflow:hidden}.finger-table-header,.finger-table-row{grid-template-columns:1fr 1fr;display:grid}.finger-table-header span{text-transform:uppercase;color:#d2ecff;background-color:#11273ad9;padding:6px 8px;font-size:10px;font-weight:700}.finger-table-row span{color:#e6f6ff;background-color:#0003;border-top:1px solid #ffffff0f;min-height:22px;padding:4px 8px;font-size:12px}.face-score-table{border:1px solid #4db8ff59;border-radius:4px;margin-top:8px;overflow:hidden}.face-score-header,.face-score-row{grid-template-columns:52px 1fr 72px;display:grid}.face-score-header span{text-transform:uppercase;color:#d2ecff;background-color:#11273ad9;padding:6px 8px;font-size:10px;font-weight:700}.face-score-row span{color:#e6f6ff;background-color:#0003;border-top:1px solid #ffffff0f;min-height:22px;padding:4px 8px;font-size:12px}.face-score-empty span:nth-child(2){color:#9fc7d6}.drawing-controls{flex-direction:column;gap:10px;display:flex}.control-group{flex-direction:column;gap:6px;display:flex}.control-group label{color:#b0bec5;font-size:12px;font-weight:500}.color-palette{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.color-btn{aspect-ratio:1;cursor:pointer;border:3px solid #0000;border-radius:4px;transition:all .2s;box-shadow:0 2px 4px #0000004d}.color-btn:hover{transform:scale(1.1);box-shadow:0 4px 8px #00000080}.color-btn.active{border-color:#4db8ff;box-shadow:0 0 12px #4db8ff99}.objects-list{flex-direction:column;gap:6px;max-height:150px;display:flex;overflow-y:auto}.object-item{color:#eaeaea;background-color:#0003;border-radius:3px;align-items:center;gap:8px;padding:6px;font-size:11px;display:flex}.object-emoji{flex-shrink:0;font-size:18px;line-height:1}.object-name{text-overflow:ellipsis;white-space:nowrap;flex:1;font-weight:500;overflow:hidden}.btn-delete{color:#ff6b6b;cursor:pointer;background:0 0;border:none;flex-shrink:0;padding:0;font-size:12px;transition:color .2s}.btn-delete:hover{color:#ff8787}.btn-action{color:#eaeaea;cursor:pointer;text-transform:uppercase;background-color:#0f3460;border:2px solid #4db8ff;border-radius:4px;padding:8px 12px;font-size:12px;font-weight:600;transition:all .2s}.btn-action:hover{background-color:#1a5f7a;border-color:#0ff;box-shadow:0 0 12px #4db8ff66}.btn-action:active{transform:scale(.98)}.btn-add{border-color:#90caf9}.settings-content{flex-direction:column;gap:10px;display:flex}.setting-group{flex-direction:column;gap:6px;display:flex}.setting-group label{color:#b0bec5;font-size:12px;font-weight:500}.setting-group.checkbox{flex-direction:row;align-items:center}.setting-group.checkbox label{align-items:center;gap:8px;margin:0;display:flex}.setting-group.checkbox input[type=checkbox]{cursor:pointer;accent-color:#4db8ff;width:16px;height:16px}.setting-divider{background:#ffffff24;width:100%;height:1px;margin:4px 0}.camera-settings{flex-direction:column;gap:8px;display:flex}.camera-select{color:#d6f1ff;background:#111d2f;border:1px solid #2e6ea5;border-radius:4px;width:100%;padding:8px}.camera-empty{color:#9fb8c5;font-size:12px}.slider{appearance:none;cursor:pointer;background:#2a3f5f;border-radius:2px;outline:none;width:100%;height:4px}.slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#4db8ff;border-radius:50%;width:14px;height:14px;box-shadow:0 0 4px #4db8ff80}.slider::-moz-range-thumb{cursor:pointer;background:#4db8ff;border:none;border-radius:50%;width:14px;height:14px;box-shadow:0 0 4px #4db8ff80}.stats-section{max-height:200px;overflow-y:auto}.stats-content{flex-direction:column;gap:6px;display:flex}.stat-row{border-bottom:1px solid #ffffff0d;justify-content:space-between;align-items:center;padding:4px 0;font-size:11px;display:flex}.stat-row:last-child{border-bottom:none}.stat-label{color:#90caf9;font-weight:500}.stat-value{color:#fff;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}.sidebar::-webkit-scrollbar{width:6px}.stats-section::-webkit-scrollbar{width:6px}.objects-list::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-track{background:0 0}.stats-section::-webkit-scrollbar-track{background:0 0}.objects-list::-webkit-scrollbar-track{background:0 0}.sidebar::-webkit-scrollbar-thumb{background:#404a6a;border-radius:3px}.stats-section::-webkit-scrollbar-thumb{background:#404a6a;border-radius:3px}.objects-list::-webkit-scrollbar-thumb{background:#404a6a;border-radius:3px}.sidebar::-webkit-scrollbar-thumb:hover{background:#505a7a}.stats-section::-webkit-scrollbar-thumb:hover{background:#505a7a}.objects-list::-webkit-scrollbar-thumb:hover{background:#505a7a}.drawing-space{background-color:#1b496b;flex:1;width:100%;height:auto;min-height:0;display:flex;overflow:hidden}.drawing-canvas-container{width:min(100%, calc((100dvh - var(--topbar-height)) * 16 / 9));aspect-ratio:16/9;background:#000;justify-content:center;align-items:center;max-width:100%;max-height:100%;margin:auto;display:flex;position:relative;overflow:hidden}.drawing-canvas{width:100%;height:100%;display:block;position:absolute;inset:0;transform:scaleX(-1)}.drawing-canvas.video-layer{z-index:100}.drawing-canvas.paint-layer{z-index:200;cursor:crosshair;background-color:#0000}.video-error,.video-loading{color:#00d4ff;justify-content:center;align-items:center;width:100%;height:100%;font-size:16px;display:flex}.video-error{color:#ff6b6b;background-color:#5a1a1a}.object-space{background-color:#1b496b;flex:1;width:100%;height:auto;min-height:0;display:flex;overflow:hidden}.object-canvas-container{width:min(100%, calc((100dvh - var(--topbar-height)) * 16 / 9));aspect-ratio:16/9;background:#000;justify-content:center;align-items:center;max-width:100%;max-height:100%;margin:auto;display:flex;position:relative;overflow:hidden}.object-canvas{width:100%;height:100%;display:block;position:absolute;inset:0;transform:scaleX(-1)}.object-canvas.video-layer{z-index:100}.object-canvas.object-layer{z-index:200;cursor:grab;background-color:#0000}.object-canvas.object-layer:active{cursor:grabbing}.face-detection-space{background-color:#1b496b;flex:1;width:100%;height:auto;min-height:0;display:flex;overflow:hidden}.face-canvas-container{width:min(100%, calc((100dvh - var(--topbar-height)) * 16 / 9));aspect-ratio:16/9;background:#000;justify-content:center;align-items:center;max-width:100%;max-height:100%;margin:auto;display:flex;position:relative;overflow:hidden}.face-canvas{width:100%;height:100%;display:block;position:absolute;inset:0;transform:scaleX(-1)}.face-canvas.video-layer{z-index:100}.face-canvas.overlay-layer{z-index:200;background-color:#0000}.face-dom-overlay{z-index:300;pointer-events:none;position:absolute;inset:0}.face-label{text-align:center;white-space:nowrap;text-shadow:0 2px 6px #000000a6;font-weight:700;position:absolute;transform:translate(-50%,-100%)}.face-label-top{color:#f7dc6f}.face-label-bottom{color:#00d4ff;transform:translate(-50%)}.face-no-detection{color:#eaeaea;text-shadow:0 2px 6px #000000a6;font-size:clamp(18px,2.2vw,32px);font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.app-container{--topbar-height:64px;color:#eaeaea;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#0b0e27;flex-direction:row;width:100%;height:100vh;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;display:flex;position:relative;overflow:hidden}.app-main{flex-direction:column;flex:1;width:100%;height:100vh;min-height:0;display:flex;position:relative;overflow:hidden}