body.dark{--bg-color: #121212;--text-color: #e0e0e0;--header-bg-color: #1e1e1e;--module-bg-color: #252526;--button-bg-color: #333333;--button-hover-bg-color: #444444;--accent-color: #4CAF50;--knob-color: #4CAF50;--border-color: #333}body.light{--bg-color: #f5f5f5;--text-color: #333333;--header-bg-color: #ffffff;--module-bg-color: #e0e0e0;--button-bg-color: #d0d0d0;--button-hover-bg-color: #c0c0c0;--accent-color: #2196F3;--knob-color: #1976D2;--border-color: #ccc}body.cyberpunk{--bg-color: #0b0c15;--text-color: #00f3ff;--header-bg-color: #120422;--module-bg-color: #181825;--button-bg-color: #2a2a40;--button-hover-bg-color: #ff0055;--accent-color: #ff0055;--knob-color: #ffe600;--border-color: #00f3ff}body.matrix{--bg-color: #000000;--text-color: #00ff00;--header-bg-color: #0a0a0a;--module-bg-color: #051105;--button-bg-color: #002200;--button-hover-bg-color: #004400;--accent-color: #00ff00;--knob-color: #00ff00;--border-color: #003300}body.vaporwave{--bg-color: #2b213a;--text-color: #e0e0e0;--header-bg-color: #241b35;--module-bg-color: #362f50;--button-bg-color: #01cdfe;--button-hover-bg-color: #b967ff;--accent-color: #05ffa1;--knob-color: #fffb96;--border-color: #ff71ce}body.retro-future{--bg-color: #240046;--text-color: #e0e0e0;--header-bg-color: #3c096c;--module-bg-color: #5a189a;--button-bg-color: #7b2cbf;--button-hover-bg-color: #9d4edd;--accent-color: #ff6d00;--knob-color: #ff9e00;--border-color: #c77dff}body.blue-steel{--bg-color: #0f172a;--text-color: #94a3b8;--header-bg-color: #1e293b;--module-bg-color: #1e293b;--button-bg-color: #334155;--button-hover-bg-color: #475569;--accent-color: #38bdf8;--knob-color: #38bdf8;--border-color: #334155}body.sunset{--bg-color: #450a0a;--text-color: #fca5a5;--header-bg-color: #7f1d1d;--module-bg-color: #991b1b;--button-bg-color: #b91c1c;--button-hover-bg-color: #dc2626;--accent-color: #fcd34d;--knob-color: #fbbf24;--border-color: #f87171}body{background-color:var(--bg-color);color:var(--text-color);transition:background-color .3s,color .3s;margin:0;font-family:sans-serif;overflow:hidden}button{background-color:var(--button-bg-color);color:var(--text-color);border:1px solid var(--border-color);cursor:pointer}button:hover{background-color:var(--button-hover-bg-color)}.studio-container{display:flex;height:100vh;width:100%;background-color:#121212;overflow:hidden}.app-title{-webkit-text-stroke:0px!important;color:#fff!important;text-shadow:0 0 10px rgba(0,229,255,.7),0 0 20px rgba(0,229,255,.4)!important;position:relative!important;overflow:visible!important;z-index:2000!important;min-width:220px;text-align:left}.app-title:hover{color:#00e5ff;text-shadow:0 0 15px rgba(0,229,255,.8)}.app-title:after{content:attr(data-tooltip);position:absolute;top:100%;left:50%;transform:translate(-50%) translateY(10px);background-color:#222;color:#00e5ff;border:1px solid #00E5FF;padding:5px 10px;border-radius:4px;font-size:.7rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:1000;box-shadow:0 4px 10px #00000080}.app-title:hover:after{opacity:1;transform:translate(-50%) translateY(5px)}.app-header{display:flex;justify-content:space-between;align-items:center;padding:0 15px;background-color:#1a1a1a;border-bottom:1px solid #333;margin-bottom:15px;width:100%;box-sizing:border-box;height:60px;flex-shrink:0}.header-left{display:flex;align-items:center;gap:15px;flex:1;min-width:0;overflow:hidden}.header-right{display:flex;align-items:center;gap:15px;flex-shrink:0;margin-left:20px}.app-title.recording{color:#ff3d00;text-shadow:0 0 10px #ff3d00}.track-sidebar{width:240px;flex-shrink:0;display:flex;flex-direction:column;background-color:var(--module-bg-color);border:1px solid var(--border-color);border-radius:12px;margin:15px 0 15px 15px;height:calc(100vh - 30px);box-shadow:0 5px 15px #0000004d}.sidebar-header{padding:15px;background:#222;border-bottom:1px solid #333;color:#666;font-size:.8rem;letter-spacing:2px}.track-list{flex:1;padding:10px;display:flex;flex-direction:column;gap:6px}.track-card{background:#252525;border-radius:4px;padding:8px 10px;cursor:pointer;transition:all .2s ease;position:relative;box-shadow:0 2px 5px #0000004d;margin-bottom:2px}.track-card:hover{background:#333}.track-card.active{background:#383838;box-shadow:inset 0 0 0 1px #ffffff1a}.track-info{display:flex;align-items:center;gap:10px;margin-bottom:5px}.track-name{font-weight:700;font-size:.85rem}.track-controls{display:flex;gap:5px}.tiny-btn{background:#222;border:1px solid #444;color:#666;font-size:.7rem;width:24px;height:24px;border-radius:3px;cursor:pointer}.tiny-btn:hover{color:#fff;border-color:#666}.rec-btn:hover{color:#f44}.rec-btn.recording{background:red;color:#fff;border-color:red;box-shadow:0 0 8px red;animation:pulseRec 1s infinite}.add-track-btn{margin-top:0;margin-bottom:10px;background:transparent;border:1px dashed #444;color:#666;padding:6px;font-size:.8rem;text-align:center;cursor:pointer;border-radius:4px;transition:all .2s;width:90%;align-self:center}.add-track-btn:hover{border-color:#888;color:#fff;background:#222}.track-name-container span{color:inherit;width:100%;display:inline-block}.main-rack-view{flex:1;min-width:0;overflow-y:auto;overflow-x:auto;padding:15px;background:#121212;position:relative}.rack-row{display:flex;flex-wrap:wrap;gap:15px;background-color:#1a1a1a;border:2px solid #333;border-radius:6px;padding:20px 10px 15px;position:relative;box-shadow:inset 0 0 20px #000c,0 5px 15px #00000080;width:100%;align-items:flex-start;justify-content:flex-start;box-sizing:border-box}.rack-label{position:absolute;top:-9px;left:15px;background:linear-gradient(180deg,#444,#222);color:#fff;padding:1px 10px;border:1px solid #555;border-radius:3px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;z-index:10;box-shadow:0 2px 5px #00000080}.rack-ears-left,.rack-ears-right{position:absolute;top:0;bottom:0;width:15px;background-color:#111;border-right:1px solid #333;display:flex;flex-direction:column;justify-content:space-between;padding:10px 0;align-items:center}.rack-ears-left{left:0;border-right:1px solid #333;border-radius:4px 0 0 4px}.rack-ears-right{right:0;border-left:1px solid #333;border-radius:0 4px 4px 0}.screw{width:8px;height:8px;background:radial-gradient(circle at 30% 30%,#999,#333);border-radius:50%;margin:15px 0;box-shadow:0 1px 2px #000}.control-group{margin-bottom:5px;gap:2px}.control-group label{font-size:.7rem;margin-bottom:2px;color:var(--text-color)}select,input[type=text],input[type=number],textarea{background-color:var(--button-bg-color);color:var(--text-color);border:1px solid var(--border-color);border-radius:4px;padding:4px 8px;font-family:inherit;font-size:inherit}option{background-color:var(--module-bg-color);color:var(--text-color)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:24px;width:12px;border-radius:2px;margin-top:-10px;cursor:grab;border:1px solid #111;background:linear-gradient(to right,#666,#888 35%,#222 50%,#aaa 55%,#888 65%,#666);box-shadow:0 2px 5px #00000080,inset 0 1px #fff6,inset 0 -1px #0000004d}input[type=range]::-webkit-slider-thumb{background:var(--knob-color)}.preset-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#000000b3;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:1000;display:flex;justify-content:center;align-items:center;padding:2rem;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.preset-overlay.open{opacity:1;visibility:visible}.preset-modal{background-color:var(--module-bg-color);color:var(--text-color);width:100%;max-width:1100px;height:80vh;border-radius:12px;box-shadow:0 10px 25px #00000080;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--button-bg-color);transform:translateY(-30px) scale(.98);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}.preset-overlay.open .preset-modal{transform:translateY(0) scale(1)}.preset-header{padding:1rem 1.5rem;border-bottom:1px solid var(--button-bg-color);display:flex;justify-content:space-between;align-items:center;background-color:var(--header-bg-color)}.close-btn{background:none;border:none;color:var(--text-color);font-size:2rem;cursor:pointer;line-height:1;padding:0}.preset-grid{display:flex;flex-wrap:nowrap;overflow-x:auto;padding:1.5rem;gap:2rem;height:100%}.preset-category-column{min-width:180px;flex:1;display:flex;flex-direction:column}.preset-category-column h3{border-bottom:2px solid var(--button-bg-color);padding-bottom:.5rem;margin-top:0;color:#4caf50}.preset-category-column ul{list-style:none;padding:0;margin:0;overflow-y:auto}.preset-category-column li{display:flex;justify-content:space-between;align-items:center;padding:.5rem;border-bottom:1px solid rgba(128,128,128,.1);cursor:pointer;transition:background-color .2s}.preset-category-column li:hover{background-color:var(--button-hover-bg-color)}.preset-category-column li.active{background-color:#4caf50;color:#fff;font-weight:700}.delete-preset-btn{background:transparent;border:none;color:#f44;font-weight:700;cursor:pointer;padding:0 .5rem;opacity:.6}.delete-preset-btn:hover{opacity:1;background-color:#ff00001a;border-radius:4px}.preset-controls{display:flex;align-items:flex-end}.help-modal{max-width:900px;height:85vh}.help-content{padding:2rem;overflow-y:auto;display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}.help-section{background-color:#0003;padding:1.5rem;border-radius:8px;border:1px solid var(--button-bg-color)}.help-section h3{color:#4caf50;border-bottom:1px solid var(--button-bg-color);padding-bottom:.5rem;margin-top:0}.help-section ul{padding-left:1.2rem;line-height:1.6}.help-section li{margin-bottom:.5rem;color:var(--text-color)}.help-btn{background-color:var(--button-bg-color);color:var(--text-color);border:1px solid transparent;padding:.5rem 1rem;border-radius:20px;font-size:.9rem;cursor:pointer;margin-right:1rem;font-weight:700;display:flex;align-items:center;gap:5px}.help-btn:hover{background-color:var(--button-hover-bg-color);border-color:#4caf50}@keyframes pulseRed{0%{text-shadow:0 0 10px rgba(255,0,0,.5)}to{text-shadow:0 0 25px rgba(255,0,0,1)}}@keyframes tooltipFade{0%{opacity:0;transform:translate(-50%,-5px)}to{opacity:1;transform:translate(-50%)}}@keyframes pulseRec{0%{opacity:1}50%{opacity:.5}to{opacity:1}}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.midi-light.active-red{background-color:#f44;box-shadow:0 0 10px #f44,inset 0 0 2px #ffffff80;border-color:#f66}.drum-pad.active.flam{background-color:#ff9800;box-shadow:0 0 10px #ff980088;border-color:gold}.drum-pad.active.playing{filter:brightness(1.3)}.menu-item:hover{background-color:var(--accent-color, #4CAF50)!important;color:#fff!important}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}@media (max-width: 768px){.help-content{grid-template-columns:1fr}}.arrangement-container{display:flex;flex-direction:column;height:100%;width:100%;background-color:#121212;overflow:hidden}.bar-marker{width:25%;border-left:1px solid #444;padding-left:5px}.timeline-tracks{flex:1;overflow-y:auto;position:relative;background:linear-gradient(90deg,#222 1px,transparent 1px),linear-gradient(#222 1px,transparent 1px);background-size:6.25% 100%,100% 60px}.timeline-lane{height:80px;display:flex;border-bottom:1px solid #2a2a2a;position:relative}.lane-header{width:120px;min-width:120px;background-color:#1a1a1a;border-right:1px solid #333;display:flex;align-items:center;padding:10px;gap:8px;z-index:2}.clip-item.selected{z-index:20;box-shadow:0 0 0 2px #fff;background-color:#fff3!important}.clip-region{position:absolute;top:5px;bottom:5px;left:0;width:25%;border-radius:4px;overflow:hidden}.playhead{position:absolute;top:0;bottom:0;width:2px;background-color:#fff;box-shadow:0 0 10px #fff;z-index:10;pointer-events:none;transition:left .05s linear}.dashboard-panel{display:flex;flex-direction:column;gap:10px;padding:15px;background-color:#1a1a1a;border:2px solid #333;border-radius:6px;margin-bottom:15px;overflow-x:auto;min-width:0}.visualizer-container{width:100%;height:90px;background:#000;border:1px solid #333;border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center}.visualizer-container canvas{width:100%!important;height:100%!important}.dashboard-row{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;flex-wrap:wrap}.control-section{display:flex;align-items:center;gap:8px;background:#252526;padding:4px 8px;border-radius:4px;border:1px solid #333;flex-shrink:0;max-width:100%;overflow-x:auto;flex-wrap:nowrap;white-space:nowrap}.v-sep{width:1px;height:20px;background-color:#444;margin:0 5px}.dashboard-input{background:#111;border:1px solid #444;color:#fff;padding:4px 8px;border-radius:3px;width:140px;text-align:center}.arrangement-container{display:flex;flex-direction:column;height:100%;width:100%;background-color:#121212;overflow:hidden;-webkit-user-select:none;user-select:none}.timeline-header{height:30px;background-color:#222;border-bottom:1px solid #333;display:flex;padding-left:120px;align-items:center;color:#666;font-size:.7rem}.bar-marker{border-left:1px solid #444;padding-left:5px;height:100%;display:flex;align-items:center;transition:background .2s}.bar-marker.active-bar{background-color:#333;color:#fff;font-weight:700;box-shadow:inset 0 -2px #4caf50}.timeline-tracks{flex:1;overflow-y:auto;position:relative;background:linear-gradient(90deg,#222 1px,transparent 1px);background-size:12.5% 100%}.timeline-lane{height:70px;display:flex;border-bottom:1px solid #2a2a2a;position:relative}.lane-header{width:120px;min-width:120px;background-color:#1a1a1a;border-right:1px solid #333;display:flex;align-items:center;padding:10px;gap:8px;z-index:2;cursor:pointer}.lane-header:hover{background-color:#222}.lane-content{position:absolute;left:120px;top:0;bottom:0;right:0}.clip-region{position:absolute;top:5px;bottom:5px;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all .1s ease;z-index:1}.clip-region:hover{filter:brightness(1.2);z-index:10}.clip-label{font-size:.8rem;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.8);pointer-events:none}.clip-region.dragging{opacity:.5;transform:scale(.95)}.clip-region.drag-over{background-color:#ffffff1a!important;border:2px dashed #fff!important}.timeline-toolbar{height:30px;background:#222;display:flex;align-items:center;border-bottom:1px solid #333;position:relative;z-index:20}.tool-btn{background:#333;border:1px solid #444;color:#888;padding:4px 10px;margin-right:10px;border-radius:4px;cursor:pointer}.tool-btn.active{background:#2196f3;color:#fff;border-color:#2196f3}.timeline-tracks{overflow-x:auto;position:relative;background:#121212}.timeline-lane{height:80px;position:relative;border-bottom:1px solid #252525;background:linear-gradient(90deg,#1a1a1a 1px,transparent 1px);background-size:120px 100%}.timeline-ruler{flex:1;position:relative;height:100%;margin-left:120px;overflow:hidden}.ruler-tick{position:absolute;top:6px;bottom:0;border-left:1px solid #444;padding-left:5px;font-size:.7rem;color:#888;pointer-events:none;height:20px;line-height:1}.ruler-content{height:100%;position:relative;will-change:transform}.lane-header-sticky{position:sticky;left:0;width:120px;height:100%;background-color:#1a1a1a;border-right:1px solid #333;z-index:50;display:flex;align-items:center;padding-left:10px;box-shadow:2px 0 5px #00000080;cursor:pointer}.clip-item{z-index:10;position:absolute;top:5px;bottom:5px;border:1px solid;border-radius:4px;overflow:hidden;cursor:grab;display:flex;align-items:center;justify-content:center}.clip-item.razor-mode{cursor:cell}.clip-item.razor-mode:hover{box-shadow:0 0 0 2px #fff}.clip-item.razor-mode:active{cursor:crosshair}input[type=range]{-webkit-appearance:none;width:100%;background:transparent;margin:5px 0;border:none}input[type=range]::-webkit-slider-runnable-track{width:100%;height:6px;cursor:pointer;background:#1a1a1a;border-radius:3px;border:1px solid #333;box-shadow:inset 0 1px 3px #000c;transform:translateZ(0)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:16px;width:10px;border-radius:2px;background:#fff;cursor:pointer;margin-top:-6px;border:1px solid #000;box-shadow:0 0 5px #00e5ff,0 0 1px #00e5ff;transition:transform .1s ease,box-shadow .1s ease}input[type=range]::-webkit-slider-thumb:hover{background:#00e5ff;box-shadow:0 0 10px #00e5ff}input[type=range]::-webkit-slider-thumb:active{transform:scale(1.2);background:#fff;box-shadow:0 0 15px #00e5ff,0 0 5px #fff}input[type=range]::-moz-range-track{width:100%;height:6px;cursor:pointer;background:#1a1a1a;border-radius:3px;border:1px solid #333;box-shadow:inset 0 1px 3px #000c}input[type=range]::-moz-range-thumb{height:16px;width:10px;border:1px solid #000;border-radius:2px;background:#fff;cursor:pointer;box-shadow:0 0 5px #00e5ff}input[type=range]::-moz-range-thumb:hover{background:#00e5ff;box-shadow:0 0 10px #00e5ff}input[type=range]::-moz-range-thumb:active{transform:scale(1.2);background:#fff;box-shadow:0 0 15px #00e5ff,0 0 5px #fff}.arrangement-scroll-area::-webkit-scrollbar{height:12px;background:#111}.arrangement-scroll-area::-webkit-scrollbar-thumb{background:#444;border-radius:6px;border:2px solid #111}.arrangement-scroll-area::-webkit-scrollbar-thumb:hover{background:#666}.control-section{flex-wrap:nowrap!important;white-space:nowrap}.transport-group{display:flex;align-items:center;background:#111;border:1px solid #444;border-radius:4px;overflow:hidden;margin-right:10px;height:28px}.transport-group button{background:transparent;border:none;color:#888;padding:0 12px;height:100%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.transport-group button:hover{color:#fff;background:#222}.transport-group button:active{color:#00e5ff;background:#000}.transport-sep{width:1px;height:16px;background:#333}:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;padding:0;transition:background-color .3s ease,color .3s ease}body.light{--bg-color: #f0f0f0;--text-color: #1a1a1a;--module-bg-color: #ffffff;--header-bg-color: #e0e0e0;--button-bg-color: #dcdcdc;--button-hover-bg-color: #c9c9c9}body.dark{--bg-color: #121212;--text-color: #f0f0f0;--module-bg-color: #1e1e1e;--header-bg-color: #2a2a2a;--button-bg-color: #333333;--button-hover-bg-color: #444444}body{background-color:var(--bg-color);color:var(--text-color)}.app-container{padding:1rem}.app-header{display:flex;justify-content:space-between;align-items:center;background-color:var(--header-bg-color);padding:1rem;border-radius:8px;margin-bottom:1rem}.app-header h1{color:transparent;-webkit-text-stroke:1px #fff;text-shadow:0 0 10px #00ffcc}.app-header h1:hover{text-shadow:0 0 10px #00ffcc,0 0 20px #00ffcc,0 0 40px #00ffff,0 0 80px #00ffff}.theme-toggle-button{padding:.6em 1.2em;border-radius:8px;border:1px solid transparent;background-color:var(--button-bg-color);color:var(--text-color);cursor:pointer;transition:background-color .2s}.theme-toggle-button:hover{background-color:var(--button-hover-bg-color)}.synth-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}.module-container{background-color:var(--module-bg-color);padding:1.5rem;border-radius:4px;position:relative;box-shadow:0 4px 6px #00000080,inset 0 1px #ffffff1a,inset -1px -1px #c0c0c033;--screw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='6' fill='%23bdc3c7' stroke='%237f8c8d' stroke-width='1'/%3E%3Cpath d='M4 7h6M7 4v6' stroke='%23555' stroke-width='1.5' stroke-linecap='round' transform='rotate(45 7 7)'/%3E%3C/svg%3E");background-image:var(--screw),var(--screw),var(--screw),var(--screw);background-position:5px 5px,calc(100% - 5px) 5px,5px calc(100% - 5px),calc(100% - 5px) calc(100% - 5px);background-repeat:no-repeat}.module-container h3{color:#fff;text-shadow:0 0 4px #89CFF0,0 0 8px #00BFFF,0 0 15px #010140}.audio-init-overlay{display:flex;justify-content:center;align-items:center;padding:4rem}.audio-init-overlay button{padding:1rem 2rem;font-size:1.5rem;border-radius:8px;border:none;background-color:#4caf50;color:#fff;cursor:pointer;transition:background-color .2s}.audio-init-overlay button:hover{background-color:#45a049}.control-group{margin-bottom:1rem}.control-group label{display:block;margin-bottom:.5rem}.control-group select,.control-group input[type=range]{width:100%;padding:.5rem;border-radius:4px;border:1px solid var(--button-bg-color);box-sizing:border-box}.control-group input[type=range]{background-color:transparent;padding:0}.control-group select{background-color:var(--module-bg-color);color:var(--text-color);-moz-appearance:none;-webkit-appearance:none;appearance:none;background-image:url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23cccccc%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E);background-repeat:no-repeat;background-position:right .7em top 50%;background-size:.65em auto}.master-controls{padding:1rem;margin-bottom:1rem;background-color:var(--module-bg-color);border-radius:8px}.master-controls button,.control-group button{padding:.8rem 1.5rem;font-size:1rem;border-radius:8px;border:1px solid transparent;background-color:var(--button-bg-color);color:var(--text-color);cursor:pointer;transition:background-color .2s}.button-on{background-color:#4caf50;color:#fff}.button-on:hover{background-color:#45a049}.master-controls{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.midi-select{display:flex;align-items:center;gap:.5rem;margin-bottom:0}.midi-select select{padding:.8rem 1.5rem}.learnable-control{border:1px dashed #ffd700;border-radius:4px;cursor:crosshair;transition:background-color .2s}.learnable-control:hover{background-color:#ffd7001a}.drum-machine{grid-column:span 2}.drum-grid-container{display:flex;gap:1rem}.drum-labels{display:flex;flex-direction:column;justify-content:space-around;font-size:.9em;color:var(--text-color);opacity:.7}.drum-label{height:25px;display:flex;align-items:center}.drum-grid{display:grid;grid-template-columns:repeat(16,1fr);grid-template-rows:repeat(8,1fr);gap:5px;flex-grow:1}.drum-pad{height:25px;background-color:var(--button-bg-color);border:1px solid var(--header-bg-color);border-radius:4px;padding:0;cursor:pointer;transition:background-color .1s}.drum-pad:hover{background-color:var(--button-hover-bg-color)}.drum-pad.active{background-color:#4caf50;box-shadow:0 0 10px #4caf4f88}.drum-pad.playing{border-color:gold;box-shadow:inset 0 0 5px gold}.drum-pad.active.playing{background-color:#8bc34a;border-color:gold}.preset-controls{gap:.5rem;background-color:var(--header-bg-color)}.preset-controls .control-group{margin-bottom:0;display:flex;flex-direction:column;align-items:flex-start}.preset-controls label{font-size:.75em;opacity:.8;margin-bottom:.25rem}.preset-controls input[type=text],.preset-controls select{padding:.8rem;font-size:1rem;border-radius:8px;border:1px solid var(--button-bg-color);background-color:var(--bg-color);color:var(--text-color)}.button-danger{background-color:#b71c1c;color:#fff}.button-danger:hover{background-color:#c62828}.button-recording{background-color:#d32f2f;color:#fff;animation:pulse-animation 1.5s infinite}.button-recording:hover{background-color:#e53935}@keyframes pulse-animation{0%{box-shadow:0 0 #d32f2fb3}to{box-shadow:0 0 0 10px #d32f2f00}}.recording-timer{display:flex;align-items:center;padding:.8rem 1rem;font-family:Courier New,Courier,monospace;font-weight:700;font-size:1.1rem;color:#d32f2f;background-color:var(--button-bg-color);border-radius:8px;border:1px solid var(--header-bg-color)}.drum-mixer-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.5rem}.drum-mixer-grid .control-group{margin-bottom:0}.midi-indicator-group{display:flex;flex-direction:column;align-items:center;margin-bottom:0!important;margin-right:1rem}.midi-indicator-group label{font-size:.7rem;margin-bottom:4px;opacity:.8}.midi-light{width:20px;height:20px;border-radius:50%;background-color:#333;border:2px solid #555;transition:all .05s ease;box-shadow:inset 0 0 5px #000c}.midi-light.active{background-color:#4caf50;border-color:#66bb6a;box-shadow:0 0 10px #4caf50,inset 0 0 2px #ffffff80}.oscilloscope-container{padding:0;overflow:hidden;margin-bottom:1rem;background-color:#000;border:2px solid #444}.random-btn{padding:.6em 1.2em;border-radius:8px;border:1px solid transparent;background-color:#9c27b0;color:#fff;cursor:pointer;font-weight:700;margin-right:1rem;transition:all .2s ease;display:flex;align-items:center;gap:6px}.random-btn:hover{background-color:#ab47bc;box-shadow:0 0 15px #9c27b099;transform:translateY(-1px)}.random-btn:active{transform:translateY(1px);background-color:#7b1fa2}.seq-btn{padding:.4em 1.2em;border-radius:8px;border:1px solid transparent;font-weight:700;cursor:pointer;transition:all .2s ease;font-size:.9rem;box-shadow:0 2px 5px #0003}.seq-btn.on{background-color:#4caf50;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)}.seq-btn.on:hover{background-color:#45a049;box-shadow:0 0 10px #4caf5088}.seq-btn.off{background-color:#333;color:#888;border:1px solid #444}.seq-btn.off:hover{background-color:#444;color:#fff}input[type=range]{-webkit-appearance:none;width:100%;background:transparent;margin:10px 0}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{width:100%;height:8px;cursor:pointer;background:#111;border-radius:4px;box-shadow:inset 0 1px 3px #000c,0 1px #ffffff1a;border:1px solid #000}input[type=range]::-moz-range-track{width:100%;height:8px;cursor:pointer;background:#111;border-radius:4px;box-shadow:inset 0 1px 3px #000c,0 1px #ffffff1a;border:1px solid #000}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:24px;width:14px;border-radius:2px;background:linear-gradient(to bottom,#e0e0e0,#d0d0d0);cursor:grab;margin-top:-9px;box-shadow:0 4px 6px #0009,inset 0 1px #ffffffe6,inset 0 -1px #0003;background-image:linear-gradient(to bottom,transparent 45%,#999 45%,#999 55%,transparent 55%)}input[type=range]::-moz-range-thumb{height:24px;width:14px;border:none;border-radius:2px;background:linear-gradient(to bottom,#e0e0e0,#d0d0d0);cursor:grab;box-shadow:0 4px 6px #0009,inset 0 1px #ffffffe6,inset 0 -1px #0003;background-image:linear-gradient(to bottom,transparent 45%,#999 45%,#999 55%,transparent 55%)}input[type=range]:active::-webkit-slider-thumb{background:linear-gradient(to bottom,#f0f0f0,#dcdcdc);background-image:linear-gradient(to bottom,transparent 45%,#888 45%,#888 55%,transparent 55%);cursor:grabbing;box-shadow:0 2px 4px #000c,inset 0 1px #fff}input[type=range]:active::-moz-range-thumb{background:linear-gradient(to bottom,#f0f0f0,#dcdcdc);background-image:linear-gradient(to bottom,transparent 45%,#888 45%,#888 55%,transparent 55%);cursor:grabbing;box-shadow:0 2px 4px #000c,inset 0 1px #fff}.session-btn{padding:.4em 1em;border-radius:8px;border:1px solid transparent;background-color:#2196f3;color:#fff;cursor:pointer;font-weight:700;font-size:.9rem;transition:all .2s ease;box-shadow:0 2px 5px #0003}.session-btn:hover{background-color:#42a5f5;box-shadow:0 0 10px #2196f399;transform:translateY(-1px)}.session-btn:active{transform:translateY(1px);background-color:#1976d2}