:root{--bg-primary: #0A0E17;--bg-surface: #111827;--bg-elevated: #1A2332;--border: #1E293B;--border-active: #334155;--text-primary: #E2E8F0;--text-muted: #94A3B8;--text-dim: #64748B;--accent: #3B82F6;--accent-hover: #60A5FA;--sensor-flex: #22D3EE;--sensor-pressure: #F472B6;--sensor-accel: #A78BFA;--sensor-imu: #FBBF24;--recording: #EF4444;--success: #22C55E;--grid: #1E293B;--font-ui: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--sp-tight: 4px;--sp-inline: 8px;--sp-component: 12px;--sp-section: 16px;--sp-panel: 24px;--sp-major: 32px}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden;background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-ui);font-size:13px;line-height:1.4;-webkit-font-smoothing:antialiased}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-active);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-dim)}.app{display:flex;flex-direction:column;height:100vh;min-width:1024px}.header{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--sp-panel);border-bottom:1px solid var(--border);background:var(--bg-surface);flex-shrink:0}.header-title{font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--text-primary)}.header-nav-link{font-size:12px;color:var(--text-muted);text-decoration:none;padding:4px 10px;border-radius:4px;border:1px solid var(--border);transition:color .15s,border-color .15s}.header-nav-link:hover{color:var(--accent-hover);border-color:var(--accent)}.header-controls{display:flex;align-items:center;gap:var(--sp-inline)}.main{display:flex;flex:1;overflow:hidden}.viewport{flex:1;position:relative;overflow:hidden}.left-panel{width:340px;flex-shrink:0;border-right:1px solid var(--border);background:var(--bg-surface);overflow-y:auto;display:flex;flex-direction:column}.right-panel{width:320px;flex-shrink:0;border-left:1px solid var(--border);background:var(--bg-surface);overflow-y:auto;display:flex;flex-direction:column}.timeline-bar{height:48px;display:flex;align-items:center;gap:var(--sp-component);padding:0 var(--sp-panel);border-top:1px solid var(--border);background:var(--bg-surface);flex-shrink:0}.panel-section{padding:var(--sp-section);border-bottom:1px solid var(--border)}.panel-section-title{font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--sp-component)}.btn{height:36px;padding:0 var(--sp-component);border-radius:6px;border:none;cursor:pointer;font-family:var(--font-ui);font-size:13px;font-weight:500;letter-spacing:.01em;display:inline-flex;align-items:center;gap:var(--sp-inline);transition:background .15s,border-color .15s}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover)}.btn-primary:disabled{opacity:.4;cursor:not-allowed}.btn-secondary{background:transparent;color:var(--text-primary);border:1px solid var(--border)}.btn-secondary:hover{border-color:var(--border-active);background:var(--bg-elevated)}.btn-icon{width:32px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:6px;color:var(--text-muted);cursor:pointer}.btn-icon:hover{background:var(--bg-elevated);color:var(--text-primary)}.btn-record{background:var(--recording);color:#fff}.btn-record:hover{background:#dc2626}.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-inline)}.preset-btn{height:36px;padding:0 var(--sp-component);border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--text-primary);font-family:var(--font-ui);font-size:13px;font-weight:500;cursor:pointer;text-align:left;transition:all .15s}.preset-btn:hover{border-color:var(--border-active);background:var(--bg-elevated)}.preset-btn.active{border-color:var(--accent);background:var(--bg-elevated)}.slider-row{display:flex;align-items:center;height:28px;gap:var(--sp-inline)}.slider-label{font-size:12px;color:var(--text-muted);width:90px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.slider-input{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;background:var(--border);border-radius:2px;outline:none}.slider-input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--bg-surface)}.slider-input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.slider-value{font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--text-muted);width:40px;text-align:right;flex-shrink:0}.slider-group-title{font-size:12px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em;margin-top:var(--sp-inline);margin-bottom:var(--sp-tight)}.slider-group-title:first-child{margin-top:0}.sensor-card{display:flex;flex-direction:column;gap:var(--sp-tight);padding:var(--sp-component);border:1px solid var(--border);border-radius:8px;margin-bottom:var(--sp-inline);position:relative}.sensor-card-header{display:flex;align-items:center;gap:var(--sp-inline)}.sensor-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.sensor-card-label{font-size:13px;font-weight:500;flex:1}.sensor-card-remove{opacity:0;transition:opacity .15s}.sensor-card:hover .sensor-card-remove{opacity:1}.sensor-config-row{display:flex;align-items:center;gap:var(--sp-inline);font-size:12px;color:var(--text-muted)}.sensor-config-input{width:60px;height:24px;padding:0 var(--sp-tight);background:var(--bg-primary);border:1px solid var(--border);border-radius:4px;color:var(--text-primary);font-family:var(--font-mono);font-size:12px;outline:none}.sensor-config-input:focus{border-color:var(--border-active)}.sensor-config-input.invalid{border-color:var(--recording);background:#ef444414}.readout-row{display:flex;align-items:center;gap:var(--sp-inline);height:28px}.readout-label{font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--text-dim);width:80px;flex-shrink:0}.readout-bar-container{flex:1;height:6px;background:var(--bg-primary);border-radius:3px;overflow:hidden}.readout-bar-fill{height:100%;border-radius:3px;transition:width 16ms linear}.readout-value{font-family:var(--font-mono);font-size:14px;font-weight:500;letter-spacing:-.02em;color:var(--text-primary);width:60px;text-align:right;flex-shrink:0}.recording-dot{width:8px;height:8px;border-radius:50%;background:var(--recording);animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.recording-timer{font-family:var(--font-mono);font-size:14px;font-weight:500;color:var(--text-primary)}.timeline-scrubber{flex:1;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--border);border-radius:2px;outline:none}.timeline-scrubber::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent);cursor:pointer}.timeline-time{font-family:var(--font-mono);font-size:13px;color:var(--text-muted);flex-shrink:0}.add-sensor-row{display:flex;gap:var(--sp-inline);margin-bottom:var(--sp-component)}.select-input{height:32px;padding:0 var(--sp-inline);background:var(--bg-primary);border:1px solid var(--border);border-radius:6px;color:var(--text-primary);font-family:var(--font-ui);font-size:13px;outline:none;flex:1}.select-input:focus{border-color:var(--border-active)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--sp-major) var(--sp-section);text-align:center;color:var(--text-dim);font-size:13px;gap:var(--sp-inline)}.toast{position:fixed;bottom:var(--sp-panel);right:var(--sp-panel);padding:var(--sp-component) var(--sp-section);background:var(--bg-elevated);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);font-size:13px;display:flex;align-items:center;gap:var(--sp-inline);z-index:100;animation:slideIn .2s ease-out}@keyframes slideIn{0%{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}.speed-btns{display:flex;gap:2px}.speed-btn{padding:2px 6px;background:transparent;border:1px solid var(--border);color:var(--text-dim);font-size:11px;font-family:var(--font-mono);cursor:pointer;border-radius:4px}.speed-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}.viewport-tooltip{position:absolute;bottom:24px;left:50%;transform:translate(-50%);z-index:10;background:var(--surface-elevated);border:1px solid var(--accent);color:var(--text-primary);font-size:13px;font-weight:500;padding:8px 16px;border-radius:6px;cursor:pointer;animation:tooltip-fade-in .3s ease-out;pointer-events:auto}.viewport-tooltip:hover{background:var(--surface)}@keyframes tooltip-fade-in{0%{opacity:0;transform:translate(-50%) translateY(8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.viewport-tooltip--camera{bottom:64px}.input-mode-pills{position:absolute;bottom:16px;left:16px;z-index:10;display:flex;background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;overflow:hidden;pointer-events:auto}.input-mode-pills--disabled{opacity:.5;pointer-events:none}.input-mode-pill{background:transparent;border:none;border-left:2px solid transparent;color:var(--text-dim);font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:6px 12px;cursor:pointer;transition:all .15s ease}.input-mode-pill:first-child{border-left:none}.input-mode-pill:hover:not(:disabled){color:var(--text-primary);background:var(--bg-elevated)}.input-mode-pill--active{border-left-color:var(--accent);color:var(--text-primary);background:var(--bg-elevated)}.input-mode-pill:disabled{cursor:not-allowed}.camera-panel{position:absolute;bottom:16px;right:16px;z-index:10;pointer-events:auto}.camera-preview{width:160px;height:120px;object-fit:cover;background:var(--bg-elevated);border:1px solid var(--border);border-radius:8px;opacity:.9;transform:scaleX(-1)}.camera-status{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;margin-top:4px;padding:0 2px}.camera-status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.status--accent{color:var(--accent)}.status--accent .camera-status-dot{background:var(--accent)}.status--amber{color:#fbbf24}.status--amber .camera-status-dot{background:#fbbf24}.status--green{color:#22c55e}.status--green .camera-status-dot{background:#22c55e;animation:pulse 1s ease-in-out infinite}.status--muted{color:var(--text-muted)}.status--muted .camera-status-dot{background:var(--text-muted)}.status--red{color:#ef4444}.status--red .camera-status-dot{background:#ef4444}@media (max-width: 1280px){.camera-preview{width:120px;height:90px}}@media (max-width: 1023px){.app{display:none}body:after{content:"Best experienced on desktop (1024px+)";display:flex;align-items:center;justify-content:center;height:100vh;color:var(--text-dim);font-size:16px;text-align:center;padding:24px}}