.app{min-height:100vh;background-color:#f5f5f5;padding:16px}.container{max-width:1400px;margin:0 auto}.header{margin-bottom:24px}.header h1{font-size:2rem;font-weight:700;color:#1f2937;margin:0}.controls-bar{background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;padding:16px;margin-bottom:24px;display:flex;justify-content:space-between;align-items:center;border:2px solid #3b82f6}.controls-left{display:flex;gap:16px}.btn{padding:8px 16px;border-radius:6px;font-weight:500;cursor:pointer;border:1px solid;transition:all .2s}.btn-primary{background:#2563eb;color:#fff;border-color:#2563eb}.btn-primary:hover{background:#1d4ed8}.btn-secondary{background:#6b7280;color:#fff;border-color:#6b7280}.btn-secondary:hover{background:#4b5563}.status{font-size:.875rem;color:#6b7280;border:1px solid #d1d5db;padding:4px 8px;border-radius:4px}.preview-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:24px}.preview-card{background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;padding:16px;border:2px solid}.preview-raw{border-color:#10b981}.preview-detection{border-color:#f59e0b}.preview-vector{border-color:#8b5cf6}.preview-card h2{font-size:1.125rem;font-weight:600;margin:0 0 12px}.preview-area{width:100%;height:200px;background:#f3f4f6;border:2px solid #d1d5db;border-radius:6px;overflow:hidden;position:relative}.preview-area canvas{width:100%;height:100%;background:#fff}.preview-area video{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;background:#f0f0f0}.preview-overlay{position:relative}.preview-overlay canvas{position:absolute;top:0;left:0;pointer-events:none}.preview-overlay video{position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.preview-info{margin-top:8px;font-size:.65rem;color:#6b7280;border:1px solid #d1d5db;padding:4px;border-radius:4px}.bottom-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}.bottom-item{display:flex;flex-direction:column}.metrics{background:#fff;border-radius:6px;box-shadow:0 1px 3px #0000001a;padding:16px;border:1px solid #d1d5db;height:-moz-fit-content;height:fit-content}.metrics h2{font-size:1rem;font-weight:600;margin:0 0 12px}.metrics-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.metric{text-align:center;border:1px solid #d1d5db;padding:12px;border-radius:4px}.metric-value{font-size:1.25rem;font-weight:700;font-family:monospace;margin-bottom:3px}.metric-value.target{color:#2563eb}.metric-value.actual{color:#10b981}.metric-value.render{color:#8b5cf6}.metric-value.payload{color:#dc2626}.metric-label{font-size:.75rem;color:#6b7280}.controls-panel{background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;padding:16px;margin-bottom:16px;border:2px solid #e5e7eb;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.control-group{display:flex;flex-direction:column;gap:8px}.control-group label{font-size:.875rem;font-weight:500;color:#374151}.control-group input[type=range]{width:100%}.dialog-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:50}.dialog{background:#fff;border-radius:8px;box-shadow:0 10px 25px #00000040;padding:24px;width:400px;max-width:calc(100vw - 32px);margin:16px}.dialog-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.dialog-header h2{font-size:1.25rem;font-weight:600;margin:0}.dialog-close{background:none;border:none;font-size:1.5rem;color:#6b7280;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.dialog-close:hover{color:#374151}.error{background:#fef2f2;border:1px solid #fecaca;color:#dc2626;padding:12px 16px;border-radius:6px;margin-top:16px}.device-selector{padding:0}.device-header{display:flex;justify-content:flex-end;align-items:center;margin-bottom:16px}.device-info{display:flex;align-items:center;gap:8px;font-size:.875rem;color:#6b7280}.btn-reload{background:#3b82f6;color:#fff;border:none;padding:4px 8px;border-radius:4px;cursor:pointer;font-size:.875rem}.btn-reload:hover{background:#2563eb}.device-error{background:#fef2f2;border:1px solid #fecaca;color:#dc2626;padding:12px;border-radius:6px;margin-bottom:16px}.device-controls{display:flex;flex-direction:column;gap:16px}.device-group{display:flex;flex-direction:column;gap:8px}.device-group label{font-size:.875rem;font-weight:500;color:#374151}.device-group select{width:100%;padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;background:#fff;font-size:.875rem}.device-group select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.expression-graph{background:#fff;border-radius:6px;box-shadow:0 1px 3px #0000001a;padding:12px;margin-bottom:16px;border:1px solid #e5e7eb;display:flex;flex-direction:column;align-items:center}.expression-graph h3{font-size:1rem;font-weight:600;margin:0 0 12px;color:#374151}.expression-graph svg{margin-bottom:12px}.expression-values{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%}.value-item{display:flex;align-items:center;gap:4px;font-size:.65rem}.value-color{width:6px;height:6px;border-radius:50%;flex-shrink:0}.value-label{font-weight:500;color:#6b7280;flex:1}.value-number{font-family:monospace;font-weight:700;color:#374151}@media (max-width: 1024px){.preview-grid,.bottom-row{grid-template-columns:1fr}.metrics-grid{grid-template-columns:repeat(4,1fr)}.controls-panel{grid-template-columns:1fr}.expression-values{grid-template-columns:repeat(2,1fr)}}@media (max-width: 640px){.controls-bar{flex-direction:column;gap:12px}.bottom-row{grid-template-columns:1fr}.metrics-grid{grid-template-columns:repeat(2,1fr)}.expression-values{grid-template-columns:1fr}}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial}}}.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.static{position:static}.container{width:100%}.block{display:block}.flex{display:flex}.grid{display:grid}.h-full{height:100%}.w-full{width:100%}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.resize{resize:both}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.overflow-hidden{overflow:hidden}.border{border-style:var(--tw-border-style);border-width:1px}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.text-center{text-align:center}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.duration-200{--tw-duration:.2s;transition-duration:.2s}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}