.rgb-parade{display:flex;flex-direction:column;background:#1a1a1a;border-radius:8px;padding:16px;box-shadow:0 4px 6px #0000004d;height:100%;min-height:0;overflow:hidden}.rgb-parade-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:12px}.rgb-parade-header h2{margin:0;color:#fff;font-size:18px;font-weight:600}.channel-selector{display:flex;align-items:center;gap:0;background:#222;border-radius:4px;padding:2px;border:1px solid #333}.channel-button{background:transparent;color:#aaa;border:none;padding:6px 12px;cursor:pointer;font-size:12px;font-weight:500;transition:all .2s;border-radius:3px;min-width:40px}.channel-button:hover{color:#fff;background:#333}.channel-button.active{background:#08f;color:#fff;font-weight:600}.channel-button.active:hover{background:#0af}.rgb-parade-canvas{width:100%;height:100%;flex:1;min-height:0;background:#000;border:1px solid #333;border-radius:4px;display:block}.rgb-parade-info{display:flex;justify-content:space-around;margin-top:12px;font-size:12px}.channel-label{padding:4px 12px;border-radius:4px;font-weight:500}.channel-label.red{color:red;background:#ff00001a}.channel-label.green{color:#0f0;background:#00ff001a}.channel-label.blue{color:#08f;background:#0088ff1a}.luma-scope{display:flex;flex-direction:column;background:#1a1a1a;border-radius:8px;padding:16px;box-shadow:0 4px 6px #0000004d;height:100%;min-height:0;overflow:hidden}.luma-scope-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:12px}.luma-scope-header h2{margin:0;color:#fff;font-size:18px;font-weight:600}.brightness-control{display:flex;align-items:center;gap:8px;color:#fff;font-size:12px}.brightness-control span:first-child{white-space:nowrap}.brightness-slider{width:120px;height:4px;background:#333;border-radius:2px;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.brightness-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;background:#08f;border-radius:50%;cursor:pointer;transition:background .2s}.brightness-slider::-webkit-slider-thumb:hover{background:#0af}.brightness-slider::-moz-range-thumb{width:14px;height:14px;background:#08f;border-radius:50%;cursor:pointer;border:none;transition:background .2s}.brightness-slider::-moz-range-thumb:hover{background:#0af}.brightness-value{min-width:35px;text-align:right;font-family:Courier New,monospace;color:#aaa}.clear-ruler-button{background:#fa0;color:#000;border:1px solid #ffaa00;padding:6px 12px;border-radius:4px;cursor:pointer;font-size:11px;font-weight:600;transition:background .2s}.clear-ruler-button:hover{background:#fc0}.luma-scope-canvas{width:100%;height:100%;flex:1;min-height:0;background:#000;border:1px solid #333;border-radius:4px;display:block}.zoom-box{display:flex;flex-direction:column;background:#1a1a1a;border-radius:8px;padding:16px;box-shadow:0 4px 6px #0000004d;height:100%;min-height:0;overflow:hidden}.zoom-box-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.zoom-box-header h2{margin:0;color:#fff;font-size:18px;font-weight:600}.zoom-box-canvas{width:100%;height:100%;flex:1;min-height:0;background:#000;border:1px solid #333;border-radius:4px;display:block}.zoom-box-info{margin-top:12px;font-size:12px;color:#aaa;text-align:center}.false-color{display:flex;flex-direction:column;background:#1a1a1a;border-radius:8px;padding:16px;box-shadow:0 4px 6px #0000004d;height:100%;min-height:0;overflow:hidden}.false-color-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:12px}.false-color-header h2{margin:0;color:#fff;font-size:18px;font-weight:600}.header-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.opacity-control{display:flex;align-items:center;gap:8px;color:#fff;font-size:12px}.opacity-control span:first-child{white-space:nowrap}.opacity-slider{width:100px;height:4px;background:#333;border-radius:2px;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.opacity-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;background:#fff;border-radius:50%;cursor:pointer}.opacity-slider::-moz-range-thumb{width:14px;height:14px;background:#fff;border-radius:50%;cursor:pointer;border:none}.opacity-value{min-width:35px;text-align:right;font-weight:600}.false-color-canvas{width:100%;height:100%;flex:1;min-height:0;background:#000;border:1px solid #333;border-radius:4px;display:block}.false-color-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;padding:8px;background:#0f0f0f;border-radius:4px;font-size:11px;color:#aaa;justify-content:center}.legend-item{display:flex;align-items:center;gap:6px}.legend-color{width:16px;height:16px;border-radius:2px;border:1px solid #333;display:inline-block}.vectorscope{display:flex;flex-direction:column;background:#1a1a1a;border-radius:8px;padding:16px;box-shadow:0 4px 6px #0000004d;height:100%;min-height:0;overflow:hidden}.vectorscope-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:12px}.vectorscope-header h2{margin:0;color:#fff;font-size:18px;font-weight:600}.header-controls{display:flex;align-items:center;gap:12px}.brightness-control,.zoom-control{display:flex;align-items:center;gap:8px;color:#fff;font-size:12px}.brightness-control span:first-child,.zoom-control span:first-child{white-space:nowrap}.brightness-slider,.zoom-slider{width:120px;height:4px;background:#333;border-radius:2px;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.brightness-slider::-webkit-slider-thumb,.zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;background:#08f;border-radius:50%;cursor:pointer;transition:background .2s}.brightness-slider::-webkit-slider-thumb:hover,.zoom-slider::-webkit-slider-thumb:hover{background:#0af}.brightness-slider::-moz-range-thumb,.zoom-slider::-moz-range-thumb{width:14px;height:14px;background:#08f;border-radius:50%;cursor:pointer;border:none;transition:background .2s}.brightness-slider::-moz-range-thumb:hover,.zoom-slider::-moz-range-thumb:hover{background:#0af}.brightness-value,.zoom-value{min-width:45px;text-align:right;font-family:Courier New,monospace;color:#aaa}.toggle-button{background:#333;color:#fff;border:1px solid #555;padding:6px 12px;border-radius:4px;cursor:pointer;font-size:12px;transition:background .2s}.toggle-button:hover{background:#444}.toggle-button.active{background:#08f;color:#fff;border-color:#08f}.toggle-button.active:hover{background:#0af}.vectorscope-canvas{width:100%;height:100%;flex:1;min-height:0;background:#000;border:1px solid #333;border-radius:4px;display:block;margin:0 auto}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#0f0f0f;color:#fff}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{background:#1a1a1a;padding:20px;border-bottom:1px solid #333;box-shadow:0 2px 4px #0000004d;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}.app-header h1{font-size:24px;font-weight:600;color:#fff;margin:0}.scope-toggles{display:flex;gap:8px;flex-wrap:wrap}.scope-toggle{background:#333;color:#fff;border:1px solid #555;padding:8px 16px;border-radius:4px;cursor:pointer;font-size:12px;font-weight:600;transition:all .2s;white-space:nowrap}.scope-toggle:hover{background:#444}.scope-toggle.active{background:#08f;color:#fff;border-color:#08f}.scope-toggle.active:hover{background:#0af}.app-content{flex:1;padding:24px;display:flex;flex-direction:column;gap:24px;max-width:100%;margin:0 auto;width:100%}.video-container{background:#1a1a1a;border-radius:8px;padding:16px;box-shadow:0 4px 6px #0000004d;display:flex;flex-direction:column;overflow:hidden;position:relative}.video-player{width:100%;height:100%;min-height:0;border-radius:4px;background:#000;display:block;margin-bottom:12px}.webcam-error{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:20px;text-align:center;color:#ff6b6b}.webcam-error p{margin-bottom:16px;font-size:14px}.retry-button{background:#333;color:#fff;border:1px solid #555;padding:8px 16px;border-radius:4px;cursor:pointer;font-size:14px;transition:background .2s}.retry-button:hover{background:#444}.video-controls{display:flex;align-items:center;gap:12px;padding:8px 0;flex-wrap:wrap}.video-toggle{display:flex;align-items:center}.video-toggle .toggle-button{background:#333;color:#fff;border:1px solid #555;padding:8px 16px;border-radius:4px;cursor:pointer;font-size:12px;font-weight:600;transition:all .2s}.video-toggle .toggle-button:hover{background:#444}.video-toggle .toggle-button.active{background:#08f;color:#fff;border-color:#08f}.video-toggle .toggle-button.active:hover{background:#0af}.play-button{background:#333;color:#fff;border:1px solid #555;padding:8px 16px;border-radius:4px;cursor:pointer;font-size:16px;transition:background .2s;min-width:50px}.play-button:hover{background:#444}.device-selector{display:flex;align-items:center;gap:8px;flex:1}.device-label{font-size:14px;color:#aaa;white-space:nowrap}.device-select{flex:1;background:#333;color:#fff;border:1px solid #555;padding:6px 12px;border-radius:4px;font-size:14px;cursor:pointer;transition:background .2s;min-width:150px}.device-select:hover{background:#444}.device-select:focus{outline:none;border-color:#08f;background:#444}.scopes-grid{width:100%;display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.scope-container{width:100%;height:100%;min-height:0;min-width:0;display:flex;flex-direction:column;overflow:hidden;position:relative;transition:opacity .2s,border-color .2s}@media (min-width: 800px){.scope-container.scope-2x{grid-column:1 / -1}}.scope-container.dragging{opacity:.5;cursor:grabbing;-webkit-user-select:none;user-select:none}.scope-container.drag-over{border:2px dashed #0088ff;border-radius:8px}.drag-handle{position:absolute;top:8px;right:8px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:#888;cursor:grab;z-index:10;background:#1a1a1acc;border-radius:4px;transition:all .2s;opacity:0;pointer-events:auto;-webkit-user-select:none;user-select:none}.scope-container:hover .drag-handle{opacity:1}.drag-handle:hover{color:#fff;background:#1a1a1af2}.drag-handle:active{cursor:grabbing}.scope-container.dragging .drag-handle{opacity:1;cursor:grabbing}video{width:100%;height:100%;aspect-ratio:16 / 9}canvas{width:100%;height:100%;aspect-ratio:3 / 2}@media (max-width: 800px){.scopes-grid{grid-template-columns:1fr}}@media (max-width: 768px){.app-content{padding:16px}.app-header h1{font-size:20px}}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}