*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0f1117;--surface: #181c27;--surface2: #1f2435;--border: #2a2f45;--accent: #4a7de8;--accent-hi: #6d9bf4;--text: #cdd6f4;--text-dim: #6c7086;--green: #a6e3a1;--red: #f38ba8}html,body{height:100%;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,sans-serif;font-size:13px;overflow:hidden}#app{display:flex;flex-direction:column;height:100vh}#app-header{display:flex;align-items:baseline;gap:12px;padding:10px 18px;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0}#app-title{font-size:15px;font-weight:600;letter-spacing:.03em;color:var(--accent-hi)}#app-subtitle{font-size:11px;color:var(--text-dim)}#main-row{display:flex;flex:1;min-height:0;gap:1px;background:var(--border)}#camera-panel,#scene-panel{position:relative;flex:1;overflow:hidden;background:var(--bg)}.panel-label{position:absolute;top:8px;left:10px;z-index:10;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);background:#0f1117b3;padding:2px 8px;border-radius:4px;border:1px solid var(--border);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#webcam{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);display:block}#tracker-status{position:absolute;bottom:10px;left:50%;transform:translate(-50%);background:#0f1117bf;color:var(--text-dim);font-size:11px;padding:4px 12px;border-radius:20px;white-space:nowrap;pointer-events:none;border:1px solid var(--border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity 1s}#tracker-status.active{color:var(--green)}#tracker-status.error{color:var(--red)}#scene{width:100%;height:100%;display:block}#toolbar{display:flex;align-items:center;gap:0;background:var(--surface);border-top:1px solid var(--border);flex-shrink:0;flex-wrap:wrap}#primitives,#upload-section,#sensitivity-section{display:flex;align-items:center;gap:6px;padding:8px 16px}#primitives,#upload-section{border-right:1px solid var(--border)}#sensitivity-section{margin-left:auto}.toolbar-label{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);margin-right:2px}button{background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:5px;padding:5px 13px;font-size:12px;font-family:inherit;cursor:pointer;transition:background .12s,border-color .12s,color .12s;line-height:1.4}button:hover{background:#252b40;border-color:#3d4663;color:#fff}button.active{background:var(--accent);border-color:var(--accent-hi);color:#fff}#upload-label{display:inline-block;background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:5px;padding:5px 13px;font-size:12px;cursor:pointer;transition:background .12s,border-color .12s;line-height:1.4}#upload-label:hover{background:#252b40;border-color:#3d4663}#file-input{display:none}#file-name{font-size:11px;color:var(--text-dim);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#sensitivity-slider{width:90px;accent-color:var(--accent);cursor:pointer;vertical-align:middle}#sensitivity-number{width:54px;background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:5px;padding:4px 7px;font-size:12px;font-family:inherit;text-align:center}#sensitivity-number:focus{outline:none;border-color:var(--accent)}
