:root{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #0a0a0a;--surface: #151515;--border: #2a2a2a;--text: #e0e0e0;--text-muted: #888;--accent: #fff}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.app{min-height:100vh;padding:2rem;max-width:1400px;margin:0 auto}header{margin-bottom:2rem}header h1{font-size:1.5rem;font-weight:600;letter-spacing:-.02em}.dropzone{border:2px dashed var(--border);border-radius:12px;padding:4rem 2rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s,background .2s;min-height:400px}.dropzone:hover,.dropzone.dragging{border-color:var(--text-muted);background:var(--surface)}.dropzone-content{text-align:center;color:var(--text-muted);display:flex;flex-direction:column;align-items:center;gap:1rem}.dropzone-content p{font-size:1rem}.workspace{display:flex;gap:2rem}.controls{flex-shrink:0;width:260px;display:flex;flex-direction:column;gap:1.25rem}.control-group{display:flex;flex-direction:column;gap:.4rem}.control-group label{font-size:.8rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:500}.resolution-info{text-transform:none;letter-spacing:0;font-weight:400}.control-group select,.control-group input[type=range]{width:100%}.tint-pickers{display:flex;gap:.5rem}.tint-pickers label{flex:1;display:flex;flex-direction:column;gap:.2rem}.tint-pickers label span{font-size:.7rem;color:var(--text-muted);text-transform:none;letter-spacing:0;font-weight:400}.tint-pickers input[type=color]{width:100%;height:28px;border:1px solid var(--border);border-radius:4px;background:var(--surface);padding:2px;cursor:pointer;-webkit-appearance:none;appearance:none}.tint-pickers input[type=color]::-webkit-color-swatch-wrapper{padding:2px}.tint-pickers input[type=color]::-webkit-color-swatch{border:none;border-radius:2px}select{appearance:none;background:var(--surface);border:1px solid var(--border);color:var(--text);padding:.5rem .75rem;border-radius:6px;font-size:.9rem;cursor:pointer}select:focus{outline:none;border-color:var(--text-muted)}input[type=range]{-webkit-appearance:none;appearance:none;height:4px;background:var(--border);border-radius:2px;outline:none;margin-top:.25rem}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer}.control-actions{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem}button{background:var(--accent);color:var(--bg);border:none;padding:.6rem 1rem;border-radius:6px;font-size:.9rem;font-weight:600;cursor:pointer;transition:opacity .2s}button:hover{opacity:.85}button.secondary{background:transparent;color:var(--text-muted);border:1px solid var(--border)}button.secondary:hover{border-color:var(--text-muted);color:var(--text);opacity:1}button:disabled{opacity:.5;cursor:not-allowed}.preview{flex:1;display:flex;gap:1.5rem;min-width:0}.preview-panel{flex:1;min-width:0}.preview-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.preview-panel h3{font-size:.8rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:500;margin-bottom:0}.preview-panel>h3{margin-bottom:.75rem}.toggle-depth{font-size:.7rem;padding:.25rem .6rem;background:transparent;color:var(--text-muted);border:1px solid var(--border);font-weight:500;text-transform:uppercase;letter-spacing:.04em}.toggle-depth.active{background:var(--text-muted);color:var(--bg);border-color:var(--text-muted)}.preview-stack{position:relative;border-radius:8px;overflow:hidden;background:var(--surface)}.preview-stack canvas{width:100%;height:auto;display:block;image-rendering:pixelated;transition:opacity .2s}.preview-stack .depth-layer{position:absolute;top:0;left:0;opacity:0;pointer-events:none}.preview-stack .depth-layer.visible{opacity:1}.preview-stack .hidden-layer{opacity:0}.preview-panel>canvas{width:100%;height:auto;border-radius:8px;background:var(--surface);image-rendering:pixelated}.preview-stack video{width:100%;height:auto;display:block;border-radius:8px;background:var(--surface)}.progress-bar{position:relative;height:24px;background:var(--surface);border:1px solid var(--border);border-radius:6px;overflow:hidden;margin-bottom:.75rem}.progress-fill{height:100%;background:var(--accent);transition:width .3s ease}.progress-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:600;color:var(--text-muted);mix-blend-mode:difference}.video-loading{display:flex;align-items:center;justify-content:center;min-height:200px;color:var(--text-muted);background:var(--surface);border-radius:8px}.video-error{text-align:center;padding:3rem;color:var(--text-muted)}.video-error p{margin-bottom:1rem}.video-error-msg{margin-top:.75rem;padding:.75rem;background:var(--surface);border:1px solid var(--border);border-radius:6px;color:#e57373;font-size:.85rem}.landing{display:flex;flex-direction:column;gap:1.5rem}.realtime-buttons{display:flex;gap:.75rem;justify-content:center}.realtime-buttons button{min-width:140px}.source-buttons{display:flex;gap:.5rem}.source-buttons button{flex:1;font-size:.8rem;padding:.4rem .6rem}.realtime-container{position:relative;border-radius:8px;overflow:hidden;background:var(--surface)}.realtime-canvas{width:100%;height:auto;display:block}.fps-overlay{position:absolute;top:8px;right:8px;background:#000000b3;color:#0f0;font-family:SF Mono,Fira Code,monospace;font-size:.7rem;padding:3px 8px;border-radius:4px;pointer-events:none}.recording-indicator{position:absolute;top:8px;left:8px;background:#e53935;color:#fff;font-size:.7rem;font-weight:700;padding:3px 10px;border-radius:4px;animation:rec-blink 1s ease-in-out infinite;pointer-events:none}@keyframes rec-blink{0%,to{opacity:1}50%{opacity:.4}}@media(max-width:900px){.workspace{flex-direction:column}.controls{width:100%;flex-direction:row;flex-wrap:wrap}.control-group{flex:1;min-width:140px}.control-actions{flex-direction:row;width:100%}.control-actions button{flex:1}}@media(max-width:600px){.preview{flex-direction:column}.app{padding:1rem}}