.layout{display:flex;flex-direction:column;height:100vh;width:100vw}.layout-main{flex:1;overflow:auto;background-color:#121212}.loading-spinner-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;width:100vw}.loading-spinner{width:50px;height:50px;border:4px solid #ecf0f1;border-top:4px solid #3498db;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-text{margin-top:1rem;color:#7f8c8d;font-size:1rem}:root{--color-primary: #5dade2;--color-primary-dark: #3498db;--color-primary-light: #85c1e9;--color-secondary: #7f8c8d;--color-secondary-dark: #5d6d7e;--color-secondary-light: #95a5a6;--color-success: #58d68d;--color-success-dark: #27ae60;--color-success-light: #7dcea0;--color-danger: #ec7063;--color-danger-dark: #e74c3c;--color-danger-light: #f1948a;--color-warning: #f7dc6f;--color-warning-dark: #f39c12;--color-warning-light: #f9e79f;--color-info: #5dade2;--color-info-dark: #3498db;--color-info-light: #85c1e9;--bg-primary: #1a1a1a;--bg-secondary: #2c2c2c;--bg-tertiary: #3a3a3a;--text-primary: #ecf0f1;--text-secondary: #bdc3c7;--text-tertiary: #95a5a6;--text-inverse: #2c3e50;--border-color: #3a3a3a;--border-color-dark: #2c2c2c;--border-color-light: #4a4a4a;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px rgba(0, 0, 0, .4);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .5);--shadow-xl: 0 20px 25px rgba(0, 0, 0, .6);--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--font-family-mono: "Courier New", Courier, monospace;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.25;--line-height-normal: 1.5;--line-height-relaxed: 1.75;--radius-sm: 2px;--radius-md: 4px;--radius-lg: 8px;--radius-xl: 12px;--radius-full: 9999px;--transition-fast: .15s;--transition-base: .2s;--transition-slow: .3s;--breakpoint-sm: 640px;--breakpoint-md: 768px;--breakpoint-lg: 1024px;--breakpoint-xl: 1280px;--breakpoint-2xl: 1536px;--z-dropdown: 1000;--z-sticky: 1020;--z-fixed: 1030;--z-modal-backdrop: 1040;--z-modal: 1050;--z-popover: 1060;--z-tooltip: 1070}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-family-base);font-size:var(--font-size-base);line-height:var(--line-height-normal);color:var(--text-primary);background-color:var(--bg-primary);transition:background-color var(--transition-base),color var(--transition-base)}h1,h2,h3,h4,h5,h6{font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);color:var(--text-primary)}p{margin-bottom:var(--spacing-md)}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-primary-dark)}button{font-family:inherit;font-size:inherit;line-height:inherit;cursor:pointer}input,textarea,select{font-family:inherit;font-size:inherit;line-height:inherit}img,svg{max-width:100%;height:auto}ul,ol{list-style:none}table{border-collapse:collapse;border-spacing:0}.container{width:100%;margin-left:auto;margin-right:auto;padding-left:var(--spacing-md);padding-right:var(--spacing-md)}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.grid{display:grid;gap:var(--spacing-md)}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}@media (min-width: 640px){.grid-cols-sm-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width: 768px){.grid-cols-md-3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width: 1024px){.grid-cols-lg-4{grid-template-columns:repeat(4,minmax(0,1fr))}}.flex{display:flex}.flex-col{flex-direction:column}.flex-row{flex-direction:row}@media (min-width: 768px){.md\:flex-row{flex-direction:row}.md\:flex-col{flex-direction:column}}.hidden{display:none}@media (min-width: 640px){.sm\:block{display:block}.sm\:hidden{display:none}}@media (min-width: 768px){.md\:block{display:block}.md\:hidden{display:none}}@media (min-width: 1024px){.lg\:block{display:block}.lg\:hidden{display:none}}@media (min-width: 768px){.md\:p-0{padding:0}.md\:p-4{padding:var(--spacing-md)}.md\:p-8{padding:var(--spacing-xl)}.md\:m-0{margin:0}.md\:m-4{margin:var(--spacing-md)}.md\:m-8{margin:var(--spacing-xl)}}:root{--fl-bg-primary: #2a2d32;--fl-bg-secondary: #1e2024;--fl-bg-tertiary: #16181a;--fl-bg-quaternary: #0d0f10;--fl-accent-orange: #ff6b00;--fl-accent-orange-light: #ff8533;--fl-accent-orange-dark: #cc5600;--fl-accent-green: #5cff5c;--fl-accent-green-dark: #4caf50;--fl-accent-blue: #4a90d9;--fl-accent-blue-light: #6ba8e8;--fl-accent-red: #ff5252;--fl-accent-yellow: #ffcc00;--fl-accent-purple: #9c27b0;--fl-accent-pink: #e91e63;--fl-accent-cyan: #00bcd4;--fl-text-primary: #ffffff;--fl-text-secondary: #a0a0a0;--fl-text-tertiary: #707070;--fl-text-disabled: #505050;--fl-border: #3a3d42;--fl-border-light: #4a4d52;--fl-border-dark: #2a2d32;--fl-step-active: #ff6b00;--fl-step-inactive: #3a3d42;--fl-step-beat: #4a4d52;--fl-step-bar: #5a5d62;--fl-pattern-red: #ff5252;--fl-pattern-orange: #ff9800;--fl-pattern-yellow: #ffeb3b;--fl-pattern-green: #4caf50;--fl-pattern-blue: #2196f3;--fl-pattern-purple: #9c27b0;--fl-pattern-pink: #e91e63;--fl-pattern-cyan: #00bcd4;--fl-meter-green: #00ff00;--fl-meter-yellow: #ffff00;--fl-meter-red: #ff0000;--fl-shadow-sm: 0 2px 4px rgba(0, 0, 0, .2);--fl-shadow-md: 0 4px 12px rgba(0, 0, 0, .3);--fl-shadow-lg: 0 8px 24px rgba(0, 0, 0, .4);--fl-shadow-glow-orange: 0 0 12px rgba(255, 107, 0, .5);--fl-shadow-glow-green: 0 0 12px rgba(92, 255, 92, .5);--fl-font-primary: "Segoe UI", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;--fl-font-mono: "Consolas", "SF Mono", "JetBrains Mono", monospace;--fl-border-radius-sm: 2px;--fl-border-radius-md: 4px;--fl-border-radius-lg: 6px;--fl-border-radius-xl: 8px;--fl-transition-fast: .1s ease;--fl-transition-normal: .15s ease;--fl-transition-slow: .25s ease}body{font-family:var(--fl-font-primary);background:var(--fl-bg-tertiary);color:var(--fl-text-primary);margin:0;padding:0;overflow:hidden}::selection{background:var(--fl-accent-orange);color:#fff}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--fl-bg-tertiary)}::-webkit-scrollbar-thumb{background:var(--fl-border-light);border-radius:var(--fl-border-radius-md)}::-webkit-scrollbar-thumb:hover{background:#5a5d62}::-webkit-scrollbar-corner{background:var(--fl-bg-tertiary)}.fl-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 14px;background:linear-gradient(180deg,#4a4d52,#3a3d42);border:1px solid var(--fl-border-light);border-radius:var(--fl-border-radius-md);color:var(--fl-text-primary);font-size:12px;font-weight:500;cursor:pointer;transition:all var(--fl-transition-fast)}.fl-button:hover{background:linear-gradient(180deg,#5a5d62,#4a4d52);border-color:#6a6d72}.fl-button:active{background:linear-gradient(180deg,#3a3d42,#2a2d32)}.fl-button.primary{background:linear-gradient(180deg,var(--fl-accent-orange-light) 0%,var(--fl-accent-orange) 100%);border-color:var(--fl-accent-orange);color:#fff}.fl-button.primary:hover{background:linear-gradient(180deg,#ff9955 0%,var(--fl-accent-orange-light) 100%);box-shadow:var(--fl-shadow-glow-orange)}.fl-button.danger{background:linear-gradient(180deg,#ff6666 0%,var(--fl-accent-red) 100%);border-color:var(--fl-accent-red);color:#fff}.fl-button.success{background:linear-gradient(180deg,#6cff6c 0%,var(--fl-accent-green-dark) 100%);border-color:var(--fl-accent-green-dark);color:#000}.fl-button.small{padding:4px 10px;font-size:11px}.fl-button.icon-only{width:28px;height:28px;padding:0}.fl-input{padding:8px 12px;background:var(--fl-bg-primary);border:1px solid var(--fl-border);border-radius:var(--fl-border-radius-md);color:var(--fl-text-primary);font-size:12px;font-family:var(--fl-font-primary);transition:border-color var(--fl-transition-fast)}.fl-input:focus{outline:none;border-color:var(--fl-accent-orange)}.fl-input::placeholder{color:var(--fl-text-tertiary)}.fl-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;background:var(--fl-bg-primary);border-radius:var(--fl-border-radius-sm);cursor:pointer}.fl-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--fl-accent-orange);border-radius:50%;cursor:pointer;box-shadow:var(--fl-shadow-glow-orange);transition:transform var(--fl-transition-fast)}.fl-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.fl-slider::-moz-range-thumb{width:14px;height:14px;background:var(--fl-accent-orange);border-radius:50%;border:none;cursor:pointer}.fl-dropdown{padding:6px 28px 6px 10px;background:var(--fl-bg-primary);border:1px solid var(--fl-border);border-radius:var(--fl-border-radius-md);color:var(--fl-text-primary);font-size:12px;font-family:var(--fl-font-primary);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}.fl-dropdown:focus{outline:none;border-color:var(--fl-accent-orange)}.fl-dropdown option{background:var(--fl-bg-secondary);color:var(--fl-text-primary)}.fl-panel{background:var(--fl-bg-secondary);border:1px solid var(--fl-border);border-radius:var(--fl-border-radius-lg);box-shadow:var(--fl-shadow-md);overflow:hidden}.fl-panel-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:linear-gradient(180deg,#3a3d42,#2a2d32);border-bottom:1px solid var(--fl-border)}.fl-panel-title{font-size:12px;font-weight:600;color:var(--fl-text-primary)}.fl-panel-content{padding:12px}.fl-tooltip{position:absolute;padding:6px 10px;background:var(--fl-bg-quaternary);border:1px solid var(--fl-border);border-radius:var(--fl-border-radius-md);color:var(--fl-text-primary);font-size:11px;white-space:nowrap;box-shadow:var(--fl-shadow-lg);z-index:10000;pointer-events:none}.fl-meter{width:10px;height:100px;background:var(--fl-bg-quaternary);border:1px solid var(--fl-border);border-radius:var(--fl-border-radius-sm);overflow:hidden;position:relative}.fl-meter-fill{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg,var(--fl-meter-green) 0%,var(--fl-meter-green) 70%,var(--fl-meter-yellow) 85%,var(--fl-meter-red) 100%)}.fl-transport{display:flex;align-items:center;gap:8px;padding:8px 16px;background:linear-gradient(180deg,#3a3d42,#2a2d32);border:1px solid var(--fl-border-light);border-radius:var(--fl-border-radius-xl)}.fl-transport-btn{width:32px;height:32px;padding:0;background:linear-gradient(180deg,#4a4d52,#3a3d42);border:1px solid var(--fl-border-light);border-radius:50%;color:var(--fl-text-primary);font-size:14px;cursor:pointer;transition:all var(--fl-transition-fast)}.fl-transport-btn:hover{background:linear-gradient(180deg,#5a5d62,#4a4d52)}.fl-transport-btn.play.active{background:var(--fl-accent-green-dark);border-color:var(--fl-accent-green);box-shadow:var(--fl-shadow-glow-green)}.fl-transport-btn.record.active{background:var(--fl-accent-red);border-color:#f66;animation:fl-pulse 1s infinite}@keyframes fl-pulse{0%,to{opacity:1}50%{opacity:.7}}.fl-time-display{font-family:var(--fl-font-mono);font-size:18px;color:var(--fl-accent-orange);background:var(--fl-bg-quaternary);padding:6px 12px;border-radius:var(--fl-border-radius-md);letter-spacing:2px;text-shadow:0 0 10px rgba(255,107,0,.3)}.fl-knob-container{display:flex;flex-direction:column;align-items:center;gap:4px}.fl-knob{width:40px;height:40px;background:linear-gradient(180deg,#4a4d52,#2a2d32);border:2px solid var(--fl-border-light);border-radius:50%;position:relative;cursor:pointer}.fl-knob:after{content:"";position:absolute;top:4px;left:50%;width:3px;height:12px;background:var(--fl-accent-orange);border-radius:1px;transform-origin:bottom center;transform:translate(-50%)}.fl-knob-label{font-size:10px;color:var(--fl-text-secondary);text-transform:uppercase}.fl-knob-value{font-size:10px;color:var(--fl-text-primary);font-family:var(--fl-font-mono)}.fl-text-orange{color:var(--fl-accent-orange)}.fl-text-green{color:var(--fl-accent-green)}.fl-text-blue{color:var(--fl-accent-blue)}.fl-text-red{color:var(--fl-accent-red)}.fl-text-yellow{color:var(--fl-accent-yellow)}.fl-bg-primary{background:var(--fl-bg-primary)}.fl-bg-secondary{background:var(--fl-bg-secondary)}.fl-bg-tertiary{background:var(--fl-bg-tertiary)}.fl-glow-orange{box-shadow:var(--fl-shadow-glow-orange)}.fl-glow-green{box-shadow:var(--fl-shadow-glow-green)}*{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-color:#1a1a1a;color:#e0e0e0;overflow:hidden}#root{width:100vw;height:100vh}