.\!container{width:100%!important}.container{width:100%}@media (min-width: 640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width: 768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width: 1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width: 1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width: 1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.btn{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;gap:.5rem;border-radius:.375rem;border-width:1px;padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem;font-weight:500;transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.btn:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-offset-width: 2px}.btn:disabled{cursor:not-allowed;opacity:.5}.btn-xs{padding:.25rem .5rem;font-size:.75rem;line-height:1rem}.btn-sm{padding:.375rem .75rem;font-size:.875rem;line-height:1.25rem}.btn-primary{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity, 1))}.btn-primary:hover{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}.btn-primary:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1))}.btn-primary:active{--tw-bg-opacity: 1;background-color:rgb(209 213 219 / var(--tw-bg-opacity, 1))}.btn-secondary{--tw-border-opacity: 1;border-color:rgb(75 85 99 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(75 85 99 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.btn-secondary:hover{--tw-border-opacity: 1;border-color:rgb(55 65 81 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.btn-secondary:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity, 1))}.btn-secondary:active{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.btn-success{--tw-border-opacity: 1;border-color:rgb(22 163 74 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(22 163 74 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.btn-success:hover{--tw-border-opacity: 1;border-color:rgb(21 128 61 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(21 128 61 / var(--tw-bg-opacity, 1))}.btn-success:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity, 1))}.btn-success:active{--tw-bg-opacity: 1;background-color:rgb(22 101 52 / var(--tw-bg-opacity, 1))}.btn-danger{--tw-border-opacity: 1;border-color:rgb(220 38 38 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(220 38 38 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.btn-danger:hover{--tw-border-opacity: 1;border-color:rgb(185 28 28 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(185 28 28 / var(--tw-bg-opacity, 1))}.btn-danger:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1))}.btn-danger:active{--tw-bg-opacity: 1;background-color:rgb(153 27 27 / var(--tw-bg-opacity, 1))}.btn-warning{--tw-border-opacity: 1;border-color:rgb(202 138 4 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(202 138 4 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.btn-warning:hover{--tw-border-opacity: 1;border-color:rgb(161 98 7 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(161 98 7 / var(--tw-bg-opacity, 1))}.btn-warning:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(234 179 8 / var(--tw-ring-opacity, 1))}.btn-warning:active{--tw-bg-opacity: 1;background-color:rgb(133 77 14 / var(--tw-bg-opacity, 1))}.btn-outline-success{--tw-border-opacity: 1;border-color:rgb(22 163 74 / var(--tw-border-opacity, 1));background-color:transparent;--tw-text-opacity: 1;color:rgb(22 163 74 / var(--tw-text-opacity, 1))}.btn-outline-success:hover{--tw-bg-opacity: 1;background-color:rgb(22 163 74 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.btn-outline-success:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity, 1))}.btn-icon{border-radius:9999px;padding:.5rem}.btn-icon.btn-xs{padding:.25rem}.btn-icon.btn-sm{padding:.375rem}.btn-icon.btn-md{padding:.5rem}.btn-icon.btn-lg{padding:.75rem}.btn-icon.btn-xl{padding:1rem}.btn-group .btn{border-radius:0;border-right-width:0px}.btn-group .btn:first-child{border-top-left-radius:.375rem;border-bottom-left-radius:.375rem}.btn-group .btn:last-child{border-top-right-radius:.375rem;border-bottom-right-radius:.375rem;border-right-width:1px}.btn-group .btn:only-child{border-radius:.375rem;border-right-width:1px}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{top:0;right:0;bottom:0;left:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.right-4{right:1rem}.top-0{top:0}.top-12{top:3rem}.top-20{top:5rem}.z-40{z-index:40}.z-50{z-index:50}.z-\[1000\]{z-index:1000}.col-span-2{grid-column:span 2 / span 2}.mx-1{margin-left:.25rem;margin-right:.25rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.ml-10{margin-left:2.5rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.block{display:block}.inline{display:inline}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-1{height:.25rem}.h-1\.5{height:.375rem}.h-12{height:3rem}.h-2{height:.5rem}.h-2\.5{height:.625rem}.h-3{height:.75rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-64{height:16rem}.h-full{height:100%}.max-h-\[90vh\]{max-height:90vh}.w-0\.5{width:.125rem}.w-1{width:.25rem}.w-1\.5{width:.375rem}.w-10{width:2.5rem}.w-12{width:3rem}.w-2{width:.5rem}.w-2\.5{width:.625rem}.w-20{width:5rem}.w-3{width:.75rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-80{width:20rem}.w-full{width:100%}.min-w-0{min-width:0px}.min-w-8{min-width:2rem}.max-w-6xl{max-width:72rem}.flex-1{flex:1 1 0%}.flex-shrink{flex-shrink:1}.flex-shrink-0{flex-shrink:0}.-translate-y-full{--tw-translate-y: -100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-full{--tw-translate-y: 100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-pointer{cursor:pointer}.resize{resize:both}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-l{border-left-width:1px}.border-t{border-top-width:1px}.border-blue-600{--tw-border-opacity: 1;border-color:rgb(37 99 235 / var(--tw-border-opacity, 1))}.border-gray-600{--tw-border-opacity: 1;border-color:rgb(75 85 99 / var(--tw-border-opacity, 1))}.border-gray-700{--tw-border-opacity: 1;border-color:rgb(55 65 81 / var(--tw-border-opacity, 1))}.border-green-500{--tw-border-opacity: 1;border-color:rgb(34 197 94 / var(--tw-border-opacity, 1))}.border-orange-600{--tw-border-opacity: 1;border-color:rgb(234 88 12 / var(--tw-border-opacity, 1))}.border-red-600{--tw-border-opacity: 1;border-color:rgb(220 38 38 / var(--tw-border-opacity, 1))}.border-yellow-400{--tw-border-opacity: 1;border-color:rgb(250 204 21 / var(--tw-border-opacity, 1))}.border-yellow-500{--tw-border-opacity: 1;border-color:rgb(234 179 8 / var(--tw-border-opacity, 1))}.border-opacity-30{--tw-border-opacity: .3}.border-opacity-50{--tw-border-opacity: .5}.bg-black{--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.bg-blue-500{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.bg-gray-600{--tw-bg-opacity: 1;background-color:rgb(75 85 99 / var(--tw-bg-opacity, 1))}.bg-gray-700{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.bg-gray-800{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.bg-gray-900{--tw-bg-opacity: 1;background-color:rgb(17 24 39 / var(--tw-bg-opacity, 1))}.bg-green-500{--tw-bg-opacity: 1;background-color:rgb(34 197 94 / var(--tw-bg-opacity, 1))}.bg-purple-500{--tw-bg-opacity: 1;background-color:rgb(168 85 247 / var(--tw-bg-opacity, 1))}.bg-red-500{--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity, 1))}.bg-red-900{--tw-bg-opacity: 1;background-color:rgb(127 29 29 / var(--tw-bg-opacity, 1))}.bg-yellow-500{--tw-bg-opacity: 1;background-color:rgb(234 179 8 / var(--tw-bg-opacity, 1))}.bg-opacity-10{--tw-bg-opacity: .1}.bg-opacity-20{--tw-bg-opacity: .2}.bg-opacity-30{--tw-bg-opacity: .3}.bg-opacity-40{--tw-bg-opacity: .4}.bg-opacity-5{--tw-bg-opacity: .05}.bg-opacity-50{--tw-bg-opacity: .5}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-gray-900{--tw-gradient-from: #111827 var(--tw-gradient-from-position);--tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.via-gray-800{--tw-gradient-to: rgb(31 41 55 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #1f2937 var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-gray-900{--tw-gradient-to: #111827 var(--tw-gradient-to-position)}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.text-center{text-align:center}.text-right{text-align:right}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.italic{font-style:italic}.text-blue-300{--tw-text-opacity: 1;color:rgb(147 197 253 / var(--tw-text-opacity, 1))}.text-blue-400{--tw-text-opacity: 1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}.text-gray-300{--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.text-gray-400{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-green-400{--tw-text-opacity: 1;color:rgb(74 222 128 / var(--tw-text-opacity, 1))}.text-orange-300{--tw-text-opacity: 1;color:rgb(253 186 116 / var(--tw-text-opacity, 1))}.text-orange-400{--tw-text-opacity: 1;color:rgb(251 146 60 / var(--tw-text-opacity, 1))}.text-purple-400{--tw-text-opacity: 1;color:rgb(192 132 252 / var(--tw-text-opacity, 1))}.text-red-300{--tw-text-opacity: 1;color:rgb(252 165 165 / var(--tw-text-opacity, 1))}.text-red-400{--tw-text-opacity: 1;color:rgb(248 113 113 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-yellow-300{--tw-text-opacity: 1;color:rgb(253 224 71 / var(--tw-text-opacity, 1))}.text-yellow-400{--tw-text-opacity: 1;color:rgb(250 204 21 / var(--tw-text-opacity, 1))}.opacity-50{opacity:.5}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-2xl{--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.blur{--tw-blur: blur(8px);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)}.grayscale{--tw-grayscale: grayscale(100%);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)}.invert{--tw-invert: invert(100%);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)}.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)}.backdrop-blur-md{--tw-backdrop-blur: blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}:root{--color-primary: #ffffff;--color-primary-light: #cccccc;--color-primary-dark: #999999;--color-secondary: #666666;--color-accent: #ffffff;--color-success: #10b981;--color-success-dark: #059669;--color-warning: #f59e0b;--color-danger: #ef4444;--color-danger-dark: #dc2626;--color-bg-primary: #000000;--color-bg-secondary: rgba(0, 0, 0, .8);--color-text-primary: #a7a7a7;--color-text-secondary: #cccccc;--color-border: #333333;--color-bg-tertiary: rgba(0, 0, 0, .9);--color-bg-overlay: rgba(255, 255, 255, .05);--color-bg-warning: rgba(255, 255, 0, .1);--color-bg-error: rgba(255, 0, 0, .1);--color-bg-success: rgba(0, 255, 0, .1);--color-text-muted: #999999;--color-border-primary: #333333;--color-border-secondary: #444444;--color-border-tertiary: #555555;--color-border-quaternary: #666666;--color-input-bg: #333333;--color-input-bg-dark: #222222;--color-input-border: #555555;--color-input-border-dark: #444444;--color-error: var(--color-danger);--color-shadow-primary: rgba(255, 255, 255, .2);--color-shadow-success: rgba(16, 185, 129, .5);--opacity-10: .1;--opacity-20: .2;--opacity-30: .3;--opacity-40: .4;--opacity-50: .5;--opacity-60: .6;--opacity-70: .7;--opacity-80: .8;--opacity-90: .9;--spacing-xs: 2px;--spacing-sm: 4px;--spacing-md: 8px;--spacing-lg: 16px;--spacing-xl: 20px;--spacing-2xl: 24px;--spacing-3xl: 32px;--radius-sm: 3px;--radius-md: 4px;--radius-lg: 8px;--radius-xl: 12px;--text-xs: 11px;--text-sm: 12px;--text-md: 14px;--text-lg: 16px;--text-xl: 18px;--leading-tight: 1.25;--leading-normal: 1.6;--leading-relaxed: 1.8;--z-dropdown: 1000;--z-sticky: 1020;--z-fixed: 1030;--z-modal-backdrop: 1040;--z-modal: 1050;--z-popover: 1060;--z-tooltip: 1070}body{margin:0;overflow:hidden;background:var(--color-bg-primary);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}canvas{display:block}#midi-top-bar{position:fixed;top:0;left:0;right:0;height:48px;background:linear-gradient(to right,var(--color-bg-primary),var(--color-bg-secondary),var(--color-bg-primary));color:var(--color-text-primary);z-index:50;box-shadow:0 4px 6px -1px rgba(0,0,0,var(--opacity-10));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--color-border-primary)}#transport-bottom-bar{position:fixed;bottom:0;left:0;right:0;height:48px;background:linear-gradient(to right,var(--color-bg-primary),var(--color-bg-secondary),var(--color-bg-primary));color:var(--color-text-primary);z-index:50;box-shadow:0 -4px 6px -1px rgba(0,0,0,var(--opacity-10));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--color-border-primary)}#gui-container{position:absolute;top:52px;right:10px;bottom:62px;z-index:30;overflow-y:auto}#gui-container .dg,#gui-container .dg.main{position:relative!important;top:0!important;right:0!important;margin-top:0!important;margin-bottom:0!important}.dg.ac{top:52px!important;margin-top:0!important;margin-bottom:62px!important}.dg{top:52px!important;margin-top:0!important}@media (max-width: 768px){#midi-top-bar{height:auto;min-height:48px}#midi-top-bar .flex{padding:8px 16px}#midi-top-bar button{min-width:auto;flex-shrink:0}#midi-drawer-container{top:auto;min-height:48px}}#midi-drawer-container{position:fixed;top:48px;left:0;right:0;background:linear-gradient(to bottom right,var(--color-bg-primary),var(--color-bg-secondary),var(--color-bg-primary));color:var(--color-text-primary);z-index:40;box-shadow:0 4px 6px -1px #0000001a;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--color-border-primary);transform:translateY(-100%);transition:all .15s cubic-bezier(.4,0,.2,1);max-height:80vh;overflow-y:auto;opacity:0}@media (min-width: 769px){#midi-drawer-container{left:50%;right:auto;width:50%;transform:translate(-50%) translateY(-100%);border-radius:0 0 8px 8px;box-shadow:0 8px 32px #0000004d}#midi-drawer-container.open{transform:translate(-50%) translateY(0)}#midi-drawer-container.connect-drawer{left:16px;right:auto;width:400px;transform:translateY(-100%)}#midi-drawer-container.connect-drawer.open{transform:translateY(0)}#midi-drawer-container.connection-drawer{left:16px;right:auto;width:400px;transform:translateY(-100%)}#midi-drawer-container.connection-drawer.open{transform:translateY(0)}#midi-drawer-container.audio-interface-drawer{left:16px;right:auto;width:400px;transform:translateY(-100%)}#midi-drawer-container.audio-interface-drawer.open{transform:translateY(0)}#midi-drawer-container.midi-activity-drawer{left:16px;right:auto;width:400px;transform:translateY(-100%)}#midi-drawer-container.midi-activity-drawer.open{transform:translateY(0)}}@media (max-width: 768px){#midi-drawer-container{position:fixed;bottom:0;left:0;right:0;z-index:45;transform:translateY(100%);max-height:80vh;border-top:1px solid var(--color-border-primary);border-bottom:none;opacity:0}#midi-drawer-container.open{transform:translateY(0);opacity:1}}#midi-drawer-container.open{transform:translateY(0);opacity:1}#midi-drawer-container.drawer-hidden{display:none!important;visibility:hidden!important;pointer-events:none!important}.tab-container{display:flex;border-bottom:2px solid var(--color-border-primary);margin-bottom:1rem;background:#0000004d;border-radius:8px 8px 0 0;overflow:hidden}.tab-button{flex:1;padding:.75rem 1rem;font-size:.875rem;font-weight:600;color:var(--color-text-secondary);background:#0003;border:none;border-bottom:3px solid transparent;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.tab-button:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#ffffff1a,#ffffff0d);opacity:0;transition:opacity .2s ease}.tab-button:hover{color:var(--color-text-primary);background:#0006}.tab-button:hover:before{opacity:1}.tab-button.active{color:var(--color-primary);background:#0009;border-bottom-color:var(--color-primary);box-shadow:0 0 10px #ffffff4d}.tab-button.active:before{opacity:1;background:linear-gradient(135deg,#ffffff1a,#ffffff0d)}.tab-button:focus{outline:none;box-shadow:0 0 0 2px #ffffff4d}.tab-button:not(:last-child){border-right:1px solid var(--color-border-primary)}.tab-section{display:none;animation:fadeIn .3s ease-in-out}.tab-section.active{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.drawer-content.active button,.drawer-content.active input,.drawer-content.active select,.drawer-content.active .midi-control{animation:slideInUp .15s cubic-bezier(.4,0,.2,1) forwards;animation-delay:calc(var(--animation-order, 0) * .02s);opacity:0;transform:translateY(20px)}@keyframes slideInUp{to{opacity:1;transform:translateY(0)}}.drawer-content{padding:1rem;display:none;opacity:0;transform:translateY(20px);transition:all .1s cubic-bezier(.4,0,.2,1)}.drawer-content.active{display:block;opacity:1;transform:translateY(0)}#midi-status,#audio-status-top{padding:var(--spacing-md);border-radius:var(--radius-md);font-weight:700}.midi-connected{background:var(--color-bg-success);border:1px solid var(--color-success);color:var(--color-success)}.midi-disconnected{background:var(--color-bg-error);border:1px solid var(--color-error);color:var(--color-error)}.midi-control{margin:var(--spacing-md) 0;display:flex;align-items:center;gap:var(--spacing-lg)}.midi-control label{font-size:var(--text-sm);color:var(--color-text-secondary);text-align:left;min-width:120px;flex-shrink:0}.midi-control .inputs{display:flex;gap:var(--spacing-md);align-items:center;flex:1}.midi-channel-input{width:50px!important;background:var(--color-input-bg-dark)!important;border-color:var(--color-input-border-dark)!important;color:var(--color-primary)!important}.midi-cc-input{width:60px!important;background:var(--color-input-bg)!important;border-color:var(--color-border-quaternary)!important;color:var(--color-text-primary)!important}.midi-slider{width:80px;height:6px;background:var(--color-input-bg);outline:none;border-radius:var(--radius-sm);-webkit-appearance:none}.midi-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:var(--color-primary);border-radius:50%;cursor:pointer;box-shadow:0 0 5px var(--color-shadow-primary)}.midi-slider::-moz-range-thumb{width:16px;height:16px;background:var(--color-primary);border-radius:50%;cursor:pointer;border:none;box-shadow:0 0 5px var(--color-shadow-primary)}.midi-range{width:100%;height:6px;border-radius:3px;background:var(--color-input-bg-dark);outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:8px 0}.midi-range::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--color-primary);cursor:pointer;border:2px solid var(--color-bg-secondary);box-shadow:0 2px 4px #0000004d;-webkit-transition:all .2s ease;transition:all .2s ease}.midi-range::-webkit-slider-thumb:hover{background:var(--color-primary-light);transform:scale(1.1)}.midi-range::-moz-range-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--color-primary);cursor:pointer;border:2px solid var(--color-bg-secondary);box-shadow:0 2px 4px #0000004d;-moz-transition:all .2s ease;transition:all .2s ease}.midi-range::-moz-range-thumb:hover{background:var(--color-primary-light);transform:scale(1.1)}.midi-value{color:var(--color-primary);font-weight:700;text-align:center;min-width:30px}.midi-control.buttons{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);justify-content:flex-start}.midi-section{margin:var(--spacing-lg) 0;padding:var(--spacing-md);border:1px solid var(--color-border-secondary);border-radius:var(--radius-md)}.midi-section h4{margin:0 0 var(--spacing-md) 0;color:var(--color-text-primary);font-size:var(--text-md);display:flex;align-items:center;justify-content:space-between;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.midi-section h4:hover{color:var(--color-primary)}.midi-section-toggle{background:none;border:none;color:var(--color-text-secondary);font-size:var(--text-lg);cursor:pointer;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;transition:transform .2s ease}.midi-section-toggle:hover{color:var(--color-primary)}.midi-section-toggle.collapsed{transform:rotate(-90deg)}.midi-section-content{overflow:hidden;transition:max-height .3s ease,opacity .3s ease;max-height:1000px;opacity:1}.midi-section-content.collapsed{max-height:0;opacity:0;margin:0;padding:0}.midi-activity-indicator{display:flex;gap:var(--spacing-xs);margin:var(--spacing-lg) 0;height:20px;align-items:flex-end}.activity-bar{flex:1;background:var(--color-input-bg);border-radius:var(--spacing-xs);transition:all .1s ease}.activity-bar.active{background:var(--color-primary);box-shadow:0 0 5px var(--color-shadow-success)}.midi-last-message{font-size:var(--text-xs);color:var(--color-text-secondary);text-align:center;margin-top:var(--spacing-sm)}.midi-device-selection{background:var(--color-bg-tertiary);border:2px solid var(--color-primary);border-radius:var(--radius-lg);padding:var(--spacing-lg);margin-top:var(--spacing-lg);top:100%;left:0;right:0;z-index:var(--z-sticky)}.midi-device-selection h4{margin:0 0 var(--spacing-lg) 0;color:var(--color-primary);font-size:var(--text-md);text-align:center}.device-section{margin:var(--spacing-lg) 0}.device-section label{display:block;font-size:var(--text-sm);color:var(--color-text-secondary);margin-bottom:var(--spacing-sm)}.device-buttons{display:flex;gap:var(--spacing-lg);margin-top:var(--spacing-lg);justify-content:center}.device-buttons .btn{flex:1;max-width:120px}#preset-file-input{display:none}.help-body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--color-bg-primary);color:var(--color-text-primary);margin:0;padding:var(--spacing-xl);line-height:var(--leading-normal);overflow:auto}.help-h1{color:var(--color-primary);text-align:center;border-bottom:2px solid var(--color-primary);padding-bottom:var(--spacing-lg)}.help-h2{color:var(--color-primary);margin-top:var(--spacing-2xl)}.help-section{background:var(--color-bg-overlay);padding:var(--spacing-xl);margin:var(--spacing-xl) 0;border-radius:var(--radius-lg);border:1px solid var(--color-border-primary)}.midi-table{width:100%;border-collapse:collapse;margin:var(--spacing-lg) 0}.midi-table th,.midi-table td{border:1px solid var(--color-border-primary);padding:var(--spacing-md);text-align:left}.midi-table th{background:var(--color-input-bg);color:var(--color-primary)}.midi-table tr:nth-child(2n){background:var(--color-bg-overlay)}.help-note{background:var(--color-bg-warning);border-left:4px solid var(--color-warning);padding:var(--spacing-lg);margin:var(--spacing-lg) 0}.help-warning{background:var(--color-bg-error);border-left:4px solid var(--color-error);padding:var(--spacing-lg);margin:var(--spacing-lg) 0}.back-link{display:inline-block;background:var(--color-primary);color:var(--color-bg-primary);padding:var(--spacing-lg) var(--spacing-xl);text-decoration:none;border-radius:var(--radius-sm);margin:var(--spacing-xl) 0;font-weight:700}.back-link:hover{background:var(--color-primary-light)}.help-pre{background:var(--color-bg-success);border:1px solid var(--color-primary);padding:var(--spacing-lg);border-radius:var(--radius-md);font-size:var(--text-xs);overflow-x:auto;margin:var(--spacing-lg) 0}.help-code{background:var(--color-bg-secondary);border:1px solid var(--color-border-secondary);border-radius:var(--radius-sm);padding:.75rem;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:.875rem;color:var(--color-primary);margin:.5rem 0}.parameter-table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14px;background:var(--color-bg-secondary);border-radius:var(--radius-md);overflow:hidden}.parameter-table th,.parameter-table td{border:1px solid var(--color-border-secondary);padding:12px;text-align:left;vertical-align:top}.parameter-table th{background:var(--color-bg-tertiary);color:var(--color-primary);font-weight:700;text-transform:uppercase;font-size:.75rem;letter-spacing:.05em}.parameter-table tr:hover{background:var(--color-bg-tertiary)}.parameter-table td{color:var(--color-text-secondary)}.p5-example{background:var(--color-bg-secondary);border:1px solid var(--color-border-secondary);border-radius:var(--radius-lg);padding:1.5rem;margin:1.5rem 0;transition:all .3s ease}.p5-example:hover{border-color:var(--color-primary);box-shadow:0 4px 20px #ffffff1a}.p5-example h4{color:var(--color-primary);font-size:1.1rem;font-weight:600;margin-bottom:1rem}.p5-function{background:var(--color-bg-tertiary);border:1px solid var(--color-border-tertiary);border-radius:var(--radius-md);padding:1rem;margin:1rem 0}.p5-function h5{color:var(--color-accent);font-size:1rem;font-weight:600;margin-bottom:.75rem}.p5-function p{color:var(--color-text-secondary);font-size:.875rem;line-height:1.5;margin-bottom:.75rem}.api-section{background:var(--color-bg-secondary);border:1px solid var(--color-border-secondary);border-radius:var(--radius-lg);padding:1.5rem;margin:1.5rem 0}.api-section h4{color:var(--color-primary);font-size:1.2rem;font-weight:600;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid var(--color-border-secondary)}.api-method{margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--color-border-tertiary)}.api-method:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.api-method h5{color:var(--color-accent);font-size:1rem;font-weight:600;margin-bottom:.5rem}.api-method p{color:var(--color-text-secondary);font-size:.875rem;line-height:1.5;margin-bottom:.75rem}.help-layout{display:flex;gap:16px;max-width:1600px;margin:0 auto}.help-sidebar{width:280px;background:var(--color-bg-overlay);border-radius:var(--radius-lg);padding:var(--spacing-xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--color-border-primary);height:100vh;position:sticky;top:20px;overflow-y:auto;overflow-x:hidden}.help-main-content{flex:1;background:var(--color-bg-overlay);border-radius:var(--radius-lg);padding:var(--spacing-xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--color-border-primary)}.nav-section{margin-bottom:var(--spacing-xl)}.nav-section-title{color:var(--color-primary);font-weight:600;font-size:var(--text-lg);margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--color-primary)}.nav-item{display:block;padding:var(--spacing-sm) var(--spacing-md);margin:var(--spacing-xs) 0;color:var(--color-text-primary);text-decoration:none;border-radius:var(--radius-md);transition:all .3s ease;font-size:var(--text-sm)}.nav-item:hover{background:#fff3;color:var(--color-primary)}.nav-item.active{background:#ffffff4d;color:var(--color-primary);font-weight:600}.help-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:20px;margin:30px 0}.help-card{background:var(--color-bg-secondary);border:1px solid var(--color-border-secondary);border-radius:var(--radius-lg);padding:25px;transition:all .3s ease;cursor:pointer}.help-card:hover{border-color:var(--color-primary);background:var(--color-bg-tertiary);transform:translateY(-2px);box-shadow:0 8px 25px #ffffff26}@media (max-width: 1024px){.help-layout{flex-direction:column}.help-sidebar{width:100%;position:static;height:auto}}.help-step{background:var(--color-bg-secondary);border:1px solid var(--color-border-secondary);border-radius:var(--radius-md);padding:1rem;margin:1rem 0}.help-step-number{display:inline-block;background:var(--color-primary);color:#fff;width:24px;height:24px;border-radius:50%;text-align:center;line-height:24px;font-weight:700;margin-right:.5rem}.animation-demo{background:var(--color-bg-secondary);border:1px solid var(--color-border-secondary);border-radius:var(--radius-lg);padding:1.5rem;margin:1.5rem 0;transition:all .3s ease}.animation-demo:hover{border-color:var(--color-primary);box-shadow:0 4px 20px #ffffff1a}.animation-demo h4{color:var(--color-primary);margin-bottom:1rem;font-size:1.1rem;font-weight:600}.timing-table{width:100%;border-collapse:collapse;margin:15px 0;font-size:13px;background:var(--color-bg-secondary);border-radius:var(--radius-md);overflow:hidden}.timing-table th,.timing-table td{border:1px solid var(--color-border-secondary);padding:10px;text-align:left;vertical-align:top}.timing-table th{background:var(--color-bg-tertiary);color:var(--color-primary);font-weight:700;text-transform:uppercase;font-size:.75rem;letter-spacing:.05em}.timing-table tr:hover{background:var(--color-bg-tertiary)}.timing-table td{color:var(--color-text-secondary)}.animation-type{background:var(--color-bg-secondary);border:1px solid var(--color-border-secondary);border-radius:var(--radius-lg);padding:1.5rem;margin:1.5rem 0;transition:all .3s ease}.animation-type:hover{border-color:var(--color-primary);box-shadow:0 4px 20px #ffffff1a}.animation-type-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid var(--color-border-secondary)}.animation-type-icon{width:24px;height:24px;color:var(--color-primary)}.animation-type-title{color:var(--color-primary);font-size:1.2rem;font-weight:600}.animation-type-description{color:var(--color-text-secondary);font-size:.875rem;line-height:1.5;margin-bottom:1rem}.animation-parameters{background:var(--color-bg-tertiary);border:1px solid var(--color-border-tertiary);border-radius:var(--radius-md);padding:1rem;margin:1rem 0}.animation-parameters h5{color:var(--color-accent);font-size:1rem;font-weight:600;margin-bottom:.75rem}.parameter-list{list-style:none;padding:0;margin:0}.parameter-list li{color:var(--color-text-secondary);font-size:.875rem;margin-bottom:.5rem;padding-left:1rem;position:relative}.parameter-list li:before{content:"•";color:var(--color-primary);position:absolute;left:0;font-weight:700}.parameter-category{background:var(--color-bg-secondary);border:1px solid var(--color-border-secondary);border-radius:var(--radius-lg);padding:1.5rem;margin:1.5rem 0;transition:all .3s ease}.parameter-category:hover{border-color:var(--color-primary);box-shadow:0 4px 20px #ffffff1a}.category-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid var(--color-border-secondary)}.category-icon{width:24px;height:24px;color:var(--color-primary)}.category-title{color:var(--color-primary);font-size:1.2rem;font-weight:600}.category-description{color:var(--color-text-secondary);font-size:.875rem;line-height:1.5;margin-bottom:1rem}.parameter-name{color:var(--color-primary);font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.parameter-type{color:var(--color-accent);font-weight:500}.parameter-range{color:var(--color-success);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.parameter-default{color:var(--color-warning);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.preset-demo{background:var(--color-bg-secondary);border:1px solid var(--color-border-secondary);border-radius:var(--radius-lg);padding:1.5rem;margin:1.5rem 0;transition:all .3s ease}.preset-demo:hover{border-color:var(--color-primary);box-shadow:0 4px 20px #ffffff1a}.preset-demo h4{color:var(--color-primary);margin-bottom:1rem;font-size:1.1rem;font-weight:600}.preset-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin:20px 0}.preset-card{background:var(--color-bg-secondary);border:1px solid var(--color-border-secondary);border-radius:var(--radius-lg);padding:1.5rem;transition:all .3s ease;cursor:pointer}.preset-card:hover{border-color:var(--color-primary);background:var(--color-bg-tertiary);transform:translateY(-2px);box-shadow:0 8px 25px #ffffff26}.preset-card h4{color:var(--color-primary);font-size:1.1rem;font-weight:600;margin-bottom:.75rem}.preset-card p{color:var(--color-text-secondary);font-size:.875rem;line-height:1.5;margin-bottom:1rem}.preset-features{list-style:none;padding:0;margin:0}.preset-features li{color:var(--color-text-secondary);font-size:.8rem;margin-bottom:.25rem;padding-left:1rem;position:relative}.preset-features li:before{content:"•";color:var(--color-primary);position:absolute;left:0;font-weight:700}.scene-management{background:var(--color-bg-secondary);border:1px solid var(--color-border-secondary);border-radius:var(--radius-lg);padding:1.5rem;margin:1.5rem 0}.scene-management h4{color:var(--color-primary);font-size:1.1rem;font-weight:600;margin-bottom:1rem}.scene-steps{list-style:none;padding:0;margin:0;counter-reset:step-counter}.scene-steps li{color:var(--color-text-secondary);font-size:.875rem;margin-bottom:.75rem;padding-left:2rem;position:relative}.scene-steps li:before{content:counter(step-counter);counter-increment:step-counter;position:absolute;left:0;top:0;background:var(--color-primary);color:#fff;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700}.file-structure{background:var(--color-bg-secondary);border:1px solid var(--color-border-secondary);border-radius:var(--radius-md);padding:1rem;margin:1rem 0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:.875rem}.file-structure .folder{color:var(--color-primary);font-weight:600}.file-structure .file{color:var(--color-text-secondary)}.file-structure .json{color:var(--color-success)}#midi-top-bar{position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:50!important}body{border:none!important;outline:none!important}canvas{border:none!important;outline:none!important}.sensitivity-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(to right,rgba(255,255,255,var(--opacity-60)),rgba(255,255,255,var(--opacity-90)));border-radius:8px;height:8px;border:2px solid rgba(255,255,255,var(--opacity-80));box-shadow:inset 0 2px 4px rgba(0,0,0,var(--opacity-40)),0 1px 3px rgba(255,255,255,var(--opacity-30));cursor:pointer;position:relative}.sensitivity-slider::-webkit-slider-track{background:linear-gradient(to right,rgba(255,255,255,var(--opacity-60)),rgba(255,255,255,var(--opacity-90)));border-radius:8px;height:8px;border:2px solid rgba(255,255,255,var(--opacity-80));box-shadow:inset 0 2px 4px rgba(0,0,0,var(--opacity-40)),0 1px 3px rgba(255,255,255,var(--opacity-30))}.sensitivity-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(135deg,var(--color-primary),var(--color-primary-light));border-radius:50%;width:16px;height:16px;cursor:pointer;border:2px solid rgba(255,255,255,var(--opacity-80));box-shadow:0 2px 8px rgba(255,255,255,var(--opacity-60)),0 0 0 1px rgba(255,255,255,var(--opacity-30));-webkit-transition:all .2s ease;transition:all .2s ease;position:relative}.sensitivity-slider::-webkit-slider-thumb:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:4px;height:4px;background:rgba(255,255,255,var(--opacity-90));border-radius:50%}.sensitivity-slider::-webkit-slider-thumb:hover{background:linear-gradient(135deg,var(--color-primary-light),var(--color-primary));box-shadow:0 4px 12px rgba(255,255,255,var(--opacity-80)),0 0 0 2px rgba(255,255,255,var(--opacity-50));transform:scale(1.15)}.sensitivity-slider::-webkit-slider-thumb:active{transform:scale(1.2);box-shadow:0 6px 16px #fff,0 0 0 3px rgba(255,255,255,var(--opacity-70))}.sensitivity-slider::-moz-range-track{background:linear-gradient(to right,rgba(255,255,255,var(--opacity-60)),rgba(255,255,255,var(--opacity-90)));border-radius:8px;height:8px;border:2px solid rgba(255,255,255,var(--opacity-80));box-shadow:inset 0 2px 4px rgba(0,0,0,var(--opacity-40)),0 1px 3px rgba(255,255,255,var(--opacity-30))}.sensitivity-slider::-moz-range-thumb{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-light));border-radius:50%;width:16px;height:16px;cursor:pointer;border:2px solid rgba(255,255,255,var(--opacity-80));box-shadow:0 2px 8px rgba(255,255,255,var(--opacity-60)),0 0 0 1px rgba(255,255,255,var(--opacity-30));-moz-transition:all .2s ease;transition:all .2s ease}.sensitivity-slider::-moz-range-thumb:hover{background:linear-gradient(135deg,var(--color-primary-light),var(--color-primary));box-shadow:0 4px 12px rgba(255,255,255,var(--opacity-80)),0 0 0 2px rgba(255,255,255,var(--opacity-50));transform:scale(1.15)}.sensitivity-slider::-moz-range-thumb:active{transform:scale(1.2);box-shadow:0 6px 16px #fff,0 0 0 3px rgba(255,255,255,var(--opacity-70))}.sensitivity-value{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:700;color:var(--color-primary);text-shadow:0 0 6px rgba(255,255,255,var(--opacity-70));background:rgba(255,255,255,var(--opacity-10));padding:2px 6px;border-radius:4px;border:1px solid rgba(255,255,255,var(--opacity-30));min-width:32px;text-align:center;transition:all .2s ease}.audio-mapping-control:hover .sensitivity-slider::-webkit-slider-thumb{box-shadow:0 0 12px rgba(255,255,255,var(--opacity-90))}.audio-mapping-control:hover .sensitivity-value{color:var(--color-primary-light);text-shadow:0 0 8px rgba(255,255,255,var(--opacity-90));background:rgba(255,255,255,var(--opacity-20));border-color:rgba(255,255,255,var(--opacity-60));transform:scale(1.05)}.slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;background:var(--color-primary);border-radius:50%;cursor:pointer;border:2px solid var(--color-bg-primary);box-shadow:0 2px 8px rgba(255,255,255,var(--opacity-30));-webkit-transition:all .2s cubic-bezier(.4,0,.2,1);transition:all .2s cubic-bezier(.4,0,.2,1)}.slider::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 4px 12px rgba(255,255,255,var(--opacity-40))}.slider::-moz-range-thumb{width:18px;height:18px;background:var(--color-primary);border-radius:50%;cursor:pointer;border:2px solid var(--color-bg-primary);box-shadow:0 2px 8px rgba(255,255,255,var(--opacity-30));-moz-transition:all .2s cubic-bezier(.4,0,.2,1);transition:all .2s cubic-bezier(.4,0,.2,1)}.slider::-moz-range-thumb:hover{transform:scale(1.1);box-shadow:0 4px 12px rgba(255,255,255,var(--opacity-40))}.midi-control-modern input:focus,.midi-control-modern select:focus,.preset-select:focus,.setting-select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(255,255,255,var(--opacity-10));transform:scale(1.02)}.btn-primary:disabled,.btn-secondary:disabled,.btn-small:disabled{opacity:.6;cursor:not-allowed;transform:none!important}.midi-modern-btn.success{background:linear-gradient(135deg,var(--color-success) 0%,var(--color-success-dark) 100%);box-shadow:0 4px 15px rgba(16,185,129,var(--opacity-30))}.midi-modern-btn.error{background:linear-gradient(135deg,var(--color-danger) 0%,var(--color-danger-dark) 100%);box-shadow:0 4px 15px rgba(239,68,68,var(--opacity-30))}@media (max-width: 768px){.midi-modern-container{width:100%;height:100vh}.connection-controls,.scene-controls{grid-template-columns:1fr}.midi-card{margin:12px 16px}.card-content{padding:16px}.btn-primary,.btn-secondary{padding:10px 16px;font-size:13px}}@media (prefers-color-scheme: dark){.midi-modern-container{background:linear-gradient(135deg,var(--color-bg-primary) 0%,var(--color-bg-primary) 50%,var(--color-bg-secondary) 100%)}}.device-selection-modern{padding:20px}.device-selection-header{margin-bottom:20px}.device-selection-header h4{font-size:16px;font-weight:600;color:var(--color-text-primary);margin:0 0 16px;display:flex;align-items:center;gap:10px}.device-selection-header h4:before{content:"";width:12px;height:12px;background:var(--color-primary);border-radius:50%;display:inline-block}.device-section{margin-bottom:20px}.device-label{display:block;font-size:13px;font-weight:500;color:var(--color-text-secondary);margin-bottom:8px}.device-select{width:100%;padding:10px 12px;background:rgba(255,255,255,var(--opacity-10));color:var(--color-text-primary);border:1px solid rgba(255,255,255,var(--opacity-20));border-radius:8px;font-size:14px;cursor:pointer;transition:all .3s ease}.device-select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(255,255,255,var(--opacity-10))}.device-select option{background:var(--color-bg-primary);color:var(--color-text-primary)}.device-buttons,.connection-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px}.hover\:border-purple-500:hover{--tw-border-opacity: 1;border-color:rgb(168 85 247 / var(--tw-border-opacity, 1))}.hover\:bg-opacity-10:hover{--tw-bg-opacity: .1}.hover\:bg-opacity-50:hover{--tw-bg-opacity: .5}.focus\:border-blue-400:focus{--tw-border-opacity: 1;border-color:rgb(96 165 250 / var(--tw-border-opacity, 1))}.focus\:border-orange-400:focus{--tw-border-opacity: 1;border-color:rgb(251 146 60 / var(--tw-border-opacity, 1))}.focus\:border-purple-500:focus{--tw-border-opacity: 1;border-color:rgb(168 85 247 / var(--tw-border-opacity, 1))}.focus\:border-opacity-50:focus{--tw-border-opacity: .5}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-1:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-purple-500:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(168 85 247 / var(--tw-ring-opacity, 1))}.focus\:ring-offset-0:focus{--tw-ring-offset-width: 0px}@media (min-width: 640px){.sm\:inline{display:inline}}@media (min-width: 768px){.md\:top-12{top:3rem}.md\:mb-0{margin-bottom:0}.md\:inline{display:inline}.md\:h-12{height:3rem}.md\:flex-row{flex-direction:row}.md\:items-center{align-items:center}.md\:justify-start{justify-content:flex-start}.md\:justify-end{justify-content:flex-end}.md\:justify-between{justify-content:space-between}.md\:gap-2{gap:.5rem}.md\:gap-4{gap:1rem}.md\:py-0{padding-top:0;padding-bottom:0}}