@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";.video-mixer{flex:1;display:flex;flex-direction:column;background:var(--surface)}.mixer-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--border);background:var(--surface-light)}.mixer-title{display:flex;flex-direction:column;gap:2px}.mixer-title h3{font-size:12px;font-weight:600;color:var(--text);margin:0}.size-indicator{font-size:10px;color:var(--text-secondary);font-family:monospace}.mixer-controls{display:flex;gap:8px;align-items:center}.size-select,.output-select{background:var(--surface);border:1px solid var(--border);color:var(--text);padding:4px 8px;border-radius:4px;font-size:12px;outline:none}.size-select:focus,.output-select:focus{border-color:var(--primary)}.fullscreen-btn{background:var(--primary);color:#fff;border:none;padding:4px 12px;border-radius:4px;font-size:12px;cursor:pointer;transition:background .2s}.fullscreen-btn:hover{background:var(--primary-dark)}.mixer-canvas{flex:1;position:relative;background:#000;min-height:300px;max-height:350px;display:flex;align-items:center;justify-content:center;overflow:hidden}.mixer-canvas canvas{max-width:100%;max-height:100%;object-fit:contain}.video-layer{position:absolute;top:0;left:0;width:100%;height:100%;transition:all .3s ease}.video-layer.selected{box-shadow:0 0 0 2px var(--primary)}.video-layer video{width:100%;height:100%;object-fit:cover;background:#000;border-radius:4px}.video-layer video::-webkit-media-controls{display:none!important}.video-layer video::-webkit-media-controls-panel{display:none!important}.video-layer video::-webkit-media-controls-play-button{display:none!important}.video-layer video::-webkit-media-controls-start-playback-button{display:none!important}.layer-controls{padding:8px 12px;background:var(--surface-light);border-top:1px solid var(--border);display:flex;flex-direction:column;gap:6px}.layer-control{display:flex;align-items:center;gap:12px;padding:8px;background:var(--surface);border-radius:4px;border:1px solid var(--border)}.layer-control label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text);min-width:80px}.layer-control input[type=checkbox]{width:14px;height:14px;accent-color:var(--primary)}.video-upload{flex:1;font-size:11px;color:var(--text-secondary)}.opacity-slider{width:60px;height:4px;background:var(--border);border-radius:2px;outline:none;-webkit-appearance:none}.opacity-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:var(--primary);border-radius:50%;cursor:pointer}.opacity-slider::-moz-range-thumb{width:12px;height:12px;background:var(--primary);border-radius:50%;cursor:pointer;border:none}.mixer-canvas canvas{position:absolute;top:0;left:0;pointer-events:none}.mixer-canvas canvas:first-child{pointer-events:auto}.audio-controller{height:50%;display:flex;flex-direction:column;background:var(--surface);border-bottom:1px solid var(--border)}.audio-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--surface-light)}.audio-header h3{font-size:14px;font-weight:600;color:var(--text);margin:0}.audio-toggle{background:var(--surface);border:1px solid var(--border);color:var(--text-secondary);width:32px;height:32px;border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}.audio-toggle:hover{border-color:var(--primary);color:var(--primary)}.audio-toggle.active{background:var(--primary);border-color:var(--primary);color:#fff}.audio-content{flex:1;padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}.audio-section{display:flex;flex-direction:column;gap:8px}.audio-section h4{font-size:12px;font-weight:600;color:var(--text);margin:0}.device-select{background:var(--surface-light);border:1px solid var(--border);color:var(--text);padding:6px 8px;border-radius:4px;font-size:12px;outline:none}.device-select:focus{border-color:var(--primary)}.midi-devices{display:flex;flex-direction:column;gap:4px}.midi-device{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;background:var(--surface-light);border-radius:4px;font-size:11px}.midi-device span:first-child{color:var(--text)}.midi-status{font-size:10px;padding:2px 6px;border-radius:2px}.midi-status.connected{background:var(--success);color:#fff}.no-devices{color:var(--text-secondary);font-size:11px;font-style:italic}.level-meters{display:flex;flex-direction:column;gap:8px}.level-meter{display:flex;align-items:center;gap:8px}.level-meter span{font-size:11px;color:var(--text);min-width:40px}.meter-bar{flex:1;height:8px;background:var(--surface-light);border-radius:4px;overflow:hidden;position:relative}.meter-fill{height:100%;background:linear-gradient(90deg,var(--success),var(--warning),var(--error));border-radius:4px;transition:width .1s ease}.frequency-visualizer{display:flex;align-items:end;gap:1px;height:60px;background:var(--surface-light);border-radius:4px;padding:4px}.frequency-bar{flex:1;background:var(--primary);border-radius:1px;min-height:2px;transition:height .1s ease}.midi-notes{display:flex;flex-wrap:wrap;gap:4px;min-height:24px}.midi-note{background:var(--primary);color:#fff;padding:2px 6px;border-radius:3px;font-size:10px;font-weight:600;cursor:pointer;transition:all .2s}.midi-note:hover{background:var(--primary-dark);transform:scale(1.05)}.effects-panel{flex:1;display:flex;flex-direction:column;background:var(--surface)}.effects-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--surface-light)}.effects-header h3{font-size:14px;font-weight:600;color:var(--text);margin:0}.tab-btn{display:flex;align-items:center;gap:4px;background:var(--surface);border:1px solid var(--border);color:var(--text-secondary);padding:4px 8px;border-radius:4px;font-size:11px;cursor:pointer;transition:all .2s}.effects-body{flex:1;overflow-y:auto;padding:16px}.effects-content,.generative-content,.transitions-content{display:flex;flex-direction:column;gap:20px}.effects-section,.generative-section,.transitions-section{display:flex;flex-direction:column;gap:12px}.effects-section h4,.generative-section h4,.transitions-section h4{font-size:12px;font-weight:600;color:var(--text);margin:0;display:flex;align-items:center;gap:6px}.effect-controls{display:flex;flex-direction:column;gap:12px}.effect-control{display:flex;align-items:center;gap:12px}.effect-control.checkbox-control{justify-content:flex-start}.effect-control.checkbox-control label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:11px;color:var(--text)}.effect-control.checkbox-control input[type=checkbox]{width:14px;height:14px;accent-color:var(--primary);cursor:pointer}.effect-control label{font-size:11px;color:var(--text);min-width:70px}.effect-control input[type=range]{flex:1;height:4px;background:var(--border);border-radius:2px;outline:none;-webkit-appearance:none}.effect-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:var(--primary);border-radius:50%;cursor:pointer}.effect-control input[type=range]::-moz-range-thumb{width:12px;height:12px;background:var(--primary);border-radius:50%;cursor:pointer;border:none}.effect-control span{font-size:10px;color:var(--text-secondary);min-width:30px;text-align:right}.preset-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:200px;overflow-y:auto}.preset-btn{background:var(--surface-light);border:1px solid var(--border);color:var(--text);padding:6px 8px;border-radius:4px;font-size:11px;cursor:pointer;transition:all .2s}.preset-btn:hover{background:var(--primary);border-color:var(--primary);color:#fff}.pattern-select,.geometry-select,.transition-select,.easing-select,.direction-select,.trigger-select{background:var(--surface-light);border:1px solid var(--border);color:var(--text);padding:6px 8px;border-radius:4px;font-size:12px;outline:none;width:100%}.pattern-select:focus,.geometry-select:focus,.transition-select:focus,.easing-select:focus,.direction-select:focus,.trigger-select:focus{border-color:var(--primary)}.color-controls{display:flex;align-items:center;gap:12px}.color-picker{width:40px;height:24px;border:1px solid var(--border);border-radius:4px;cursor:pointer;background:none}.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border:none;border-radius:3px}.color-value{font-size:11px;color:var(--text-secondary);font-family:monospace}.timeline{height:120px;display:flex;flex-direction:column;background:var(--surface);border-top:1px solid var(--border)}.timeline-header{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:var(--surface-light);border-bottom:1px solid var(--border)}.time-display{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text);font-family:monospace}.timeline-controls{display:flex;gap:4px}.control-btn{background:var(--surface);border:1px solid var(--border);color:var(--text-secondary);width:28px;height:28px;border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}.control-btn:hover{background:var(--primary);border-color:var(--primary);color:#fff}.timeline-track{flex:1;padding:16px;display:flex;align-items:center}.timeline-progress{width:100%;height:20px;background:var(--surface-light);border-radius:10px;position:relative;cursor:pointer;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:10px;position:absolute;top:0;left:0}.playhead{position:absolute;top:-2px;width:4px;height:24px;background:var(--accent);border-radius:2px;transform:translate(-50%);z-index:2}.timeline-markers{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.marker{position:absolute;top:50%;width:2px;height:12px;background:var(--warning);border-radius:1px;transform:translateY(-50%)}.timeline-footer{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:var(--surface-light);border-top:1px solid var(--border)}.timeline-info{display:flex;gap:12px;align-items:center}.info-value{font-size:11px;color:var(--text);font-weight:600}.timeline-actions{display:flex;gap:8px}.action-btn{background:var(--surface);border:1px solid var(--border);color:var(--text);padding:4px 8px;border-radius:4px;font-size:11px;cursor:pointer;transition:all .2s}.sidebar{width:280px;display:flex;flex-direction:column;background:var(--surface);border-right:1px solid var(--border)}.sidebar-header{padding:12px 16px;border-bottom:1px solid var(--border);background:var(--surface-light)}.tab-buttons{display:flex;gap:4px}.tab-btn{display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);color:var(--text-secondary);padding:6px 10px;border-radius:4px;font-size:12px;cursor:pointer;transition:all .2s;flex:1;justify-content:center}.tab-btn:hover{border-color:var(--primary);color:var(--primary)}.tab-btn.active{background:var(--primary);border-color:var(--primary);color:#fff}.sidebar-content{flex:1;overflow-y:auto;padding:16px}.layers-content,.project-content{display:flex;flex-direction:column;gap:20px}.layers-header{display:flex;justify-content:space-between;align-items:center}.layers-header h4{font-size:14px;font-weight:600;color:var(--text);margin:0}.add-layer-btn{background:var(--primary);color:#fff;border:none;width:24px;height:24px;border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}.add-layer-btn:hover{background:var(--primary-dark)}.layers-list{display:flex;flex-direction:column;gap:8px}.layer-item{background:var(--surface-light);border:1px solid var(--border);border-radius:6px;padding:8px;cursor:pointer;transition:all .2s}.layer-item:hover{border-color:var(--primary)}.layer-item.selected{border-color:var(--primary);background:var(--primary);color:#fff}.layer-info{display:flex;align-items:center;gap:8px}.layer-visibility{display:flex;align-items:center}.visibility-btn{background:none;border:none;color:inherit;cursor:pointer;padding:2px;border-radius:2px;transition:background .2s}.visibility-btn:hover{background:rgba(255,255,255,.1)}.layer-details{flex:1;display:flex;flex-direction:column;gap:2px}.layer-name{font-size:12px;font-weight:500}.layer-type{font-size:10px;opacity:.7}.layer-actions{display:flex;gap:4px}.upload-video-btn,.layer-settings-btn,.delete-layer-btn{background:none;border:none;color:inherit;cursor:pointer;padding:2px;border-radius:2px;transition:background .2s}.upload-video-btn:hover{background:rgba(99,102,241,.2);color:var(--primary)}.layer-settings-btn:hover,.delete-layer-btn:hover{background:rgba(255,255,255,.1)}.layer-settings{margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:8px}.setting-group{display:flex;align-items:center;gap:8px}.setting-group label{font-size:10px;min-width:50px}.setting-group input[type=range]{flex:1;height:4px;background:var(--border);border-radius:2px;outline:none;-webkit-appearance:none}.setting-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;background:var(--accent);border-radius:50%;cursor:pointer}.setting-group select{flex:1;background:var(--surface);border:1px solid var(--border);color:inherit;padding:2px 4px;border-radius:2px;font-size:10px;outline:none}.setting-group span{font-size:10px;min-width:20px;text-align:right}.project-section{display:flex;flex-direction:column;gap:12px}.project-section h4{font-size:12px;font-weight:600;color:var(--text);margin:0}.project-info{display:flex;flex-direction:column;gap:6px}.info-item{display:flex;justify-content:space-between;align-items:center}.info-label{font-size:11px;color:var(--text-secondary)}.info-value{font-size:11px;color:var(--text);font-weight:500}.device-list{display:flex;flex-direction:column;gap:4px}.device-item{display:flex;justify-content:space-between;align-items:center;padding:4px 6px;background:var(--surface-light);border-radius:3px;font-size:10px}.device-name{color:var(--text)}.device-status{font-size:9px;padding:1px 4px;border-radius:2px}.device-status.connected{background:var(--success);color:#fff}.top-bar{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:var(--surface);border-bottom:1px solid var(--border);position:relative}.top-bar-left{display:flex;align-items:center;gap:20px}.logo{display:flex;align-items:center;gap:8px}.logo-text{font-size:18px;font-weight:700;color:var(--primary);letter-spacing:-.5px}.logo-version{font-size:11px;color:var(--text-secondary);font-weight:400}.project-info{display:flex;align-items:center;gap:12px}.project-name-input{background:var(--surface-light);border:1px solid var(--border);color:var(--text);padding:4px 8px;border-radius:4px;font-size:14px;outline:none;min-width:200px}.project-name-input:focus{border-color:var(--primary)}.project-status{font-size:12px;color:var(--success);font-weight:500}.top-bar-center{display:flex;align-items:center;gap:20px}.transport-controls{display:flex;gap:8px}.transport-btn{background:var(--surface-light);border:1px solid var(--border);color:var(--text);width:36px;height:36px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}.transport-btn:hover,.transport-btn:first-child{background:var(--primary);border-color:var(--primary);color:#fff}.time-display{display:flex;align-items:center;gap:4px;font-family:monospace;font-size:14px;color:var(--text)}.time-separator{color:var(--text-secondary)}.top-bar-right{display:flex;align-items:center;gap:20px}.status-indicators{display:flex;gap:16px}.status-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary)}.status-item.ready{color:var(--success)}.status-item.loading{color:var(--warning)}.action-buttons{display:flex;gap:8px}.action-btn{display:flex;align-items:center;gap:6px;background:var(--surface-light);border:1px solid var(--border);color:var(--text);padding:6px 12px;border-radius:4px;font-size:12px;cursor:pointer;transition:all .2s}.action-btn:hover{background:var(--primary);border-color:var(--primary);color:#fff}.settings-panel{position:absolute;top:100%;right:16px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:16px;min-width:250px;z-index:1000;box-shadow:0 8px 32px #0000004d}.settings-content h4{font-size:14px;font-weight:600;color:var(--text);margin:0 0 16px}.setting-group{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.setting-group label{font-size:12px;color:var(--text-secondary)}.setting-group select{background:var(--surface-light);border:1px solid var(--border);color:var(--text);padding:6px 8px;border-radius:4px;font-size:12px;outline:none}.setting-group select:focus{border-color:var(--primary)}.app{width:100%;min-height:100vh;display:flex;flex-direction:column;background:var(--background)}.main-content{flex:1;display:flex;min-height:calc(100vh - 60px)}.center-panel{flex:1;display:flex;flex-direction:column;background:var(--surface);border-left:1px solid var(--border);border-right:1px solid var(--border)}.right-panel{width:320px;display:flex;flex-direction:column;background:var(--surface);border-left:1px solid var(--border)}@media (max-width: 1200px){.right-panel{width:280px}}@media (max-width: 768px){.main-content{flex-direction:column}.right-panel{width:100%;height:200px;border-left:none;border-top:1px solid var(--border)}}.center-panel{min-width:0;min-height:0}.right-panel{min-width:280px;overflow-y:auto}@media (max-width: 1024px){.right-panel{min-width:250px}}:root{--primary: #6366f1;--primary-dark: #4f46e5;--secondary: #8b5cf6;--accent: #06b6d4;--background: #0a0a0a;--surface: #1a1a1a;--surface-light: #2a2a2a;--text: #ffffff;--text-secondary: #a1a1aa;--border: #27272a;--success: #10b981;--warning: #f59e0b;--error: #ef4444}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--background);color:var(--text);overflow:auto;-webkit-user-select:none;user-select:none;min-height:100vh}#root{width:100%;min-height:100vh}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--surface)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.fade-in{animation:fadeIn .3s ease-out}.slide-up{animation:slideUp .3s ease-out}.pulse{animation:pulse 2s infinite}