*{margin:0;padding:0;box-sizing:border-box}:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffde;background-color:#1e1e2e;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh}#root{width:100%;min-height:100vh}:root{--accent-blue: #6dd5ed;--accent-blue-hover: #7ee5fd;--accent-blue-soft: rgba(109, 213, 237, .45);--accent-blue-rgb: 109, 213, 237}.app{width:100%;min-height:100vh;background:linear-gradient(135deg,#1e1e2e,#2d2d44);color:#e0e0e0;padding:12px;box-sizing:border-box;--transport-bar-height: 90px;touch-action:manipulation}@media(max-width:768px){.app{padding:8px}}.app-header,.app-header h1,.app-header p{display:none}.app-content{max-width:1320px;margin:0 auto;display:flex;flex-direction:column;gap:20px}.app-footer{position:static;max-width:1320px;margin:10px auto 0;text-align:left;font-size:.78rem;line-height:1.2;color:#ffffffb8}.app-footer a{color:#fffffff5;text-decoration:none}.app-footer a:hover{text-decoration:underline}.content-columns{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,.95fr);gap:18px;align-items:start}@media(max-width:900px){.content-columns{grid-template-columns:1fr}}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.tab-toggle .track-volume-knob{margin:0;min-width:0}.tab-toggle .track-volume-knob label{display:none}.tab-toggle .track-volume-knob .knob{width:34px;height:34px}.tab-toggle .track-volume-knob .knob:after{inset:4px}.tab-toggle .track-volume-knob .knob-indicator:before{height:9px}.panel-tabs{display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0;min-width:min-content}.panel-tabs button{padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.15);background:#ffffff0f;color:#e0e0e0;font-weight:600;cursor:pointer;transition:all .2s ease;flex-shrink:0}.panel-tabs button.tab-toggle-engine{width:max-content;min-width:min-content}.tab-toggle .engine-tab-knob-spacer{width:34px;height:34px;flex-shrink:0}.engine-tab-with-preset{position:relative;display:inline-flex;align-items:center;gap:10px;padding:6px 10px 6px 14px;border-radius:999px;border:1px solid rgba(102,126,234,.6);box-shadow:0 0 0 2px #667eea33;background:#ffffff0f;min-height:34px;box-sizing:border-box;flex-shrink:0;width:max-content;min-width:min-content}.engine-tab-with-preset span{pointer-events:none;font-weight:600;color:#e0e0e0}.engine-tab-preset-select{margin-left:8px;padding-left:10px;padding-right:20px;border:none;border-left:1px solid rgba(255,255,255,.25);border-radius:0;background:transparent;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23e0e0e0' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right center;background-size:10px 6px;color:#e0e0e0;font-weight:600;font-size:.9em;cursor:pointer;min-height:0;flex-shrink:0;max-width:none;overflow:visible;appearance:none;-webkit-appearance:none}.engine-tab-preset-select:focus{outline:none}.engine-tab-preset-measure{position:absolute;visibility:hidden;pointer-events:none;white-space:nowrap;font-size:.9em;font-weight:600;font-family:inherit;color:#e0e0e0}.panel-tabs button.active{border-color:#667eea99;box-shadow:0 0 0 2px #667eea33}.panel-tabs button:disabled{opacity:.4;cursor:not-allowed}.engine-selector{display:flex;align-items:center;gap:12px;margin:0 0 10px;flex-wrap:wrap}.engine-selector span{font-weight:600;color:#ffffffd1}.engine-selector-buttons{display:flex;gap:8px;flex-wrap:wrap}.prophet-presets select{padding:6px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:#ffffff14;color:#e0e0e0}.tab-toggle{display:inline-flex;align-items:center;gap:10px}.tab-toggle span{pointer-events:none}.tab-toggle.disabled{opacity:.55}.tab-switch{position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.tab-switch input{position:absolute;opacity:0;pointer-events:none}.tab-switch-track{width:36px;height:18px;border-radius:999px;background:#ffffff2e;position:relative;transition:background .2s ease}.tab-switch-track:after{content:"";position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:#ffffffb3;transition:transform .2s ease,background .2s ease}.tab-switch input:checked+.tab-switch-track{background:var(--accent-blue-soft)}.tab-switch input:checked+.tab-switch-track:after{transform:translate(18px);background:var(--accent-blue)}.left-column,.right-column{min-width:0}.right-column .control-panel{position:sticky;top:calc(var(--transport-bar-height) + 20px)}.fx-panel .fx-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.fx-panel h3{margin:0}.fx-controls{margin-bottom:8px}.fx-disabled{opacity:.45;pointer-events:none}.fx-advanced-toggle{border:none;background:#ffffff14;color:#e0e0e0;border-radius:10px;padding:6px 12px;cursor:pointer;font-weight:600;margin:6px 0 12px}.delay-top-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}.transport-bar{position:fixed;top:0;left:0;right:0;height:var(--transport-bar-height);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:12px 24px;background:#181622e6;border-bottom:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:opacity .2s ease;z-index:20}.transport-fade-target,.transport-right>:not(.transport-volume-control){transition:opacity .2s ease}.transport-bar.volume-interacting .transport-fade-target,.transport-bar.volume-interacting .transport-right>:not(.transport-volume-control){opacity:.6}@media(max-width:768px){.transport-bar{padding:8px 12px;gap:8px}.tab-toggle{min-height:44px;padding:8px 12px}}.transport-side{display:flex;align-items:center;gap:16px}.transport-scope{justify-content:flex-start}.transport-center{display:flex;justify-content:center;align-items:center}.transport-right{justify-content:flex-end}.transport-section{display:flex;align-items:center;gap:10px}.transport-volume-control{position:relative;display:inline-flex;align-items:center;justify-content:center}.transport-volume-button{width:28px;height:28px;padding:0;border:none;border-radius:8px;background:transparent;color:#e8ebf3;cursor:pointer;transition:color .18s ease,transform .18s ease}.transport-volume-button:hover{color:#fff;transform:translateY(-1px)}.transport-volume-button svg{width:22px;height:22px;display:block}.transport-volume-popover{position:absolute;left:50%;top:50%;width:168px;height:54px;display:flex;align-items:center;justify-content:center;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:#12161eeb;box-shadow:0 10px 24px #00000059;opacity:0;transform:translate(-50%,-50%) scale(.97);pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:30}.transport-volume-control.open .transport-volume-popover,.transport-volume-control:hover .transport-volume-popover{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}.transport-volume-slider-wrap{width:136px;height:30px;display:flex;align-items:center;justify-content:center}.transport-volume-slider{width:122px;height:4px;margin:0;accent-color:var(--accent-blue);touch-action:none}@media(max-width:768px){.transport-volume-button{width:40px;height:40px}}@media(hover:none){.transport-volume-control:hover .transport-volume-popover{opacity:0;transform:translate(-50%,-50%) scale(.97);pointer-events:none}}.transport-label{font-weight:600;color:silver}.transport-slider{width:50px;accent-color:var(--accent-blue);touch-action:none}.transport-tempo input{width:90px;padding:8px 12px;border-radius:8px;background:#ffffff14;border:2px solid rgba(255,255,255,.18);color:#e0e0e0;font-weight:600}.transport-musical select{padding:8px 10px;border-radius:8px;background:#ffffff14;border:2px solid rgba(255,255,255,.18);color:#e0e0e0;font-weight:600}.transport-musical select:disabled{opacity:.5}.icon-button{padding:12px 16px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;transition:transform .2s ease,box-shadow .2s ease;touch-action:manipulation}@media(max-width:768px){.icon-button{min-width:44px;min-height:44px}}.loop-button{padding:0;margin-right:20px;color:#ffffff73;background:transparent;border:none;position:relative}.loop-button.active{color:var(--accent-blue)}.loop-button:hover{transform:none;box-shadow:none;background:transparent}.loop-button:after{content:attr(data-tooltip);position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:6px;background:#14141ee6;color:#e0e0e0;font-size:.7rem;opacity:0;pointer-events:none;transition:opacity .1s ease;white-space:nowrap}.loop-button:hover:after,.loop-button:focus-visible:after{opacity:1}.icon-button svg{width:24px;height:40px;box-sizing:content-box;fill:currentColor}.play-button svg{width:32px;height:32px}.icon-button:hover{transform:translateY(-1px);box-shadow:0 6px 18px #667eea59}.transport-bar-spacer{height:var(--transport-bar-height)}.control-panel{background:#ffffff0d;border-radius:12px;padding:18px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start;overflow:hidden}.control-section{flex:1;min-width:180px;overflow:hidden}.control-section h3{margin:0 0 10px;font-size:1.05em;color:#fff;font-weight:600}.mute-label{display:inline-flex;align-items:center;justify-content:flex-start;gap:10px;padding:0;border:none;background:transparent;cursor:pointer;color:inherit}.mute-label.muted{opacity:.5}.drum-snare-preset-row{position:relative;margin-bottom:10px}.drum-snare-preset-select{padding:0 20px 0 0;border:none;border-radius:0;background:transparent;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23e0e0e0' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right center;background-size:10px 6px;color:#e0e0e0;font-weight:600;font-size:.9em;cursor:pointer;min-height:0;appearance:none;-webkit-appearance:none}.drum-snare-preset-select:focus{outline:none}.drum-snare-preset-measure{position:absolute;visibility:hidden;pointer-events:none;white-space:nowrap;font-size:.9em;font-weight:600;font-family:inherit;color:#e0e0e0}.drone-grid{display:flex;flex-direction:column;gap:16px;padding:16px;border-radius:12px;background:#ffffff0a;border:1px solid rgba(255,255,255,.1)}.drone-header{display:flex;align-items:center;justify-content:space-between;font-weight:600;color:#e0e0e0}.drone-lfo{display:flex;flex-direction:column;gap:10px;padding:10px 12px;border-radius:10px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08)}.drone-lfo-row{display:grid;grid-template-columns:80px 1fr auto;align-items:center;gap:10px;color:#d0d0d0;font-weight:600}.drone-button-group{display:flex;flex-wrap:wrap;gap:8px}.drone-option-button{padding:8px 12px;font-size:.85rem}.drone-option-button.active{background:#7c5feb73;border-color:#c4b5fdcc;color:#fff}.drone-lfo-row select,.drone-lfo-row input[type=range]{width:100%}.drone-lfo-row input[type=range]{touch-action:none;accent-color:var(--accent-blue)}.drone-lfo-value{min-width:64px;text-align:right;color:#e0e0e0cc;font-size:.85rem}.drone-key{font-size:.85rem;color:#e0e0e0b3}.drone-notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:10px}.drone-note{padding:10px 8px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#ffffff0d;color:#e0e0e0;cursor:pointer;font-weight:600;transition:all .2s ease}.drone-note:hover{background:#ffffff1f;border-color:#fff3}.drone-note.active{background:#7c5feb73;border-color:#c4b5fdcc;color:#fff}.arp-panel{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:12px;background:#ffffff0a;border:1px solid rgba(255,255,255,.1)}.arp-header{display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:600;color:#e0e0e0;-webkit-user-select:none;user-select:none}.arp-row{display:grid;grid-template-columns:80px 1fr;align-items:center;gap:10px;color:#d0d0d0;font-weight:600}.arp-row select{width:100%}.arp-row input[type=range]{width:100%;touch-action:none;accent-color:var(--accent-blue)}.arp-button-group{display:flex;flex-wrap:wrap;gap:8px}.arp-option-button{padding:8px 12px;font-size:.85rem}.arp-option-button.active{background:#7c5feb73;border-color:#c4b5fdcc;color:#fff}.arp-disabled{color:#e0e0e0b3;font-size:.9rem}.arp-chord-preview{color:#e0e0e0d9;font-size:.9rem}.preset-selector{display:flex;flex-wrap:wrap;gap:10px}.preset-button{padding:10px 16px;background:#ffffff14;border:2px solid rgba(255,255,255,.18);color:#e0e0e0;border-radius:8px;cursor:pointer;transition:all .2s ease;font-weight:600;font-size:.9em}.preset-button:hover{background:#ffffff26;border-color:#ffffff4d;transform:translateY(-2px)}.prophet-control-panel .preset-selector{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:14px}.prophet-control-panel .preset-button{padding:0;background:none;border:none;border-radius:0;color:#e0e0e0;font-weight:600;font-size:.9em;cursor:pointer;transition:color .15s ease}.prophet-control-panel .preset-button:hover{background:none;border:none;color:#fff;transform:none}.prophet-control-panel .preset-button.active{color:var(--accent-blue)}.prophet-control-panel .preset-button.active:hover{color:var(--accent-blue-hover)}.step-selector select{width:100%;min-width:120px;padding:10px 14px;border-radius:8px;background:#ffffff14;border:2px solid rgba(255,255,255,.18);color:#e0e0e0;font-weight:600;cursor:pointer}.control-slider{display:flex;align-items:center;gap:10px;margin-bottom:12px}.control-slider label{font-weight:600;color:silver}.control-slider input[type=range]{flex:1;min-width:120px;accent-color:var(--accent-blue);touch-action:none}.control-slider span{font-size:.85em;color:#a0a0a0;min-width:70px;text-align:right}.step-selector select:focus{outline:none;border-color:#fff6}.waveform-selector{display:flex;gap:10px}.waveform-selector button{flex:1;padding:12px 20px;background:#ffffff1a;border:2px solid rgba(255,255,255,.2);color:#e0e0e0;border-radius:8px;cursor:pointer;transition:all .3s ease;font-weight:500}.waveform-selector button:hover{background:#ffffff26;border-color:#ffffff4d;transform:translateY(-2px)}.waveform-selector button.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:#667eea;color:#fff;box-shadow:0 4px 15px #667eea66}.sh101-control-panel .waveform-section .waveform-selector{margin-bottom:14px}.sh101-control-panel .waveform-selector button{flex:none;padding:0;background:none;border:none;border-radius:0;color:#e0e0e0;font-weight:600;font-size:.9em;cursor:pointer;transition:color .15s ease}.sh101-control-panel .waveform-selector button:hover{background:none;border:none;color:#fff;transform:none}.sh101-control-panel .waveform-selector button.active{color:var(--accent-blue);background:none;border:none;box-shadow:none}.sh101-control-panel .waveform-selector button.active:hover{color:var(--accent-blue-hover)}.sh101-control-panel .quality-select-wrap{display:inline-block}.sh101-control-panel .minimal-dropdown-select{padding:0 20px 0 0;border:none;border-radius:0;background:transparent;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23e0e0e0' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right center;background-size:10px 6px;color:#e0e0e0;font-weight:600;font-size:.9em;cursor:pointer;min-height:0;appearance:none;-webkit-appearance:none}.sh101-control-panel .minimal-dropdown-select:focus{outline:none}.oscilloscope{width:300px;height:100px;background:transparent}.scope-header{border-radius:999px;padding:0;background:transparent}.transport-scope .oscilloscope{width:220px;height:60px}.transport-skin-icon{padding:0;color:#fff;background:transparent;border:none;border-radius:0;cursor:pointer}.transport-skin-icon:hover{color:#fff;opacity:.85}.transport-skin-icon svg{width:20px;height:20px;display:block}.skin-modal-overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000}.skin-modal-panel{background:linear-gradient(145deg,#2d2d44,#1e1e2e);border:1px solid rgba(109,213,237,.35);border-radius:12px;box-shadow:0 8px 32px #0006;min-width:280px;max-width:90vw}.skin-modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08)}.skin-modal-title{margin:0;font-size:1.1rem;font-weight:600;color:var(--accent-blue, #6dd5ed)}.skin-modal-close{padding:4px;background:transparent;border:none;color:#e0e0e0;cursor:pointer;border-radius:6px}.skin-modal-close:hover{background:#ffffff1a;color:#fff}.skin-modal-body{padding:16px}.skin-modal-section{display:flex;flex-direction:column;gap:8px}.skin-modal-label{font-size:.85rem;color:#e0e0e0e6}.skin-modal-select{padding:8px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:#1e1e2ecc;color:#e0e0e0;font-size:.95rem;min-width:140px}.skin-modal-select:focus{outline:none;border-color:var(--accent-blue, #6dd5ed)}.morphic-sphere-fullscreen{position:fixed;inset:0;z-index:100;background:#0a0515;display:flex;align-items:center;justify-content:center}.morphic-sphere-close{position:absolute;top:16px;right:16px;z-index:101;width:48px;height:48px;padding:0;border:2px solid rgba(255,255,255,.2);border-radius:50%;background:#ffffff14;color:#e0e0e0;font-size:1.25rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;line-height:1}.morphic-sphere-close:hover{background:#ffffff1f;border-color:var(--accent-blue, #6dd5ed);color:var(--accent-blue, #6dd5ed)}.morphic-sphere-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}.morphic-sphere-hydra{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}.morphic-sphere-snare-flash{position:absolute;inset:0;width:100%;height:100%;background:#fff;opacity:0;pointer-events:none;z-index:2}.adsr-controls{display:flex;gap:16px;flex-wrap:nowrap;flex-direction:row;align-items:flex-start;overflow-x:auto;padding-bottom:4px;min-width:440px;justify-content:flex-start;scrollbar-width:none}.adsr-controls-wrap{flex-wrap:wrap;overflow-x:visible;min-width:0}.filter-controls,.mixer-controls{display:grid;grid-template-columns:repeat(2,minmax(90px,1fr));gap:16px 20px}.filter-controls{row-gap:12px}.sh101-knob-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 20px;width:100%;flex-basis:100%;order:1}.sh101-knob-grid .filter-section{grid-column:1 / 3;grid-row:1}.sh101-knob-grid .mixer-section{grid-column:3 / -1;grid-row:1}.sh101-knob-grid .envelope-section{grid-column:1 / -1;grid-row:2}.sh101-control-panel .adsr-controls-envelope{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 20px;min-width:0;overflow:visible;flex-wrap:nowrap}.filter-break,.mix-break{flex-basis:100%;height:0}.adsr-controls::-webkit-scrollbar{display:none}.adsr-control{display:flex;flex-direction:column;gap:8px;align-items:center;min-width:96px}.envelope-section{order:2;flex:2;min-width:320px}.waveform-section{order:3;flex:1;min-width:220px}.quality-section{order:4;flex:1 0 100%;min-width:0}.adsr-control label{font-size:.9em;color:silver;font-weight:500;text-align:center}.adsr-graph{margin-top:12px;padding:10px 12px;border-radius:10px;background:#00000040;border:1px solid rgba(255,255,255,.08)}.adsr-graph svg text{fill:#fff9;font-size:10px;font-weight:600}.adsr-values{display:flex;gap:10px;font-size:.75em;color:#fff9;margin-top:6px;flex-wrap:wrap}.adsr-values span{white-space:nowrap}.knob{width:64px;height:64px;touch-action:none;border-radius:50%;position:relative;background:conic-gradient(from -135deg,var(--accent-blue) 0deg,var(--accent-blue) var(--knob-fill),#2a2a2a var(--knob-fill),#2a2a2a 270deg,rgba(0,0,0,0) 270deg);box-shadow:inset 0 0 10px #00000073}.knob:after{content:"";position:absolute;inset:8px;border-radius:50%;background:#1a1a1a;box-shadow:inset 0 0 8px #0009,0 4px 10px #00000059;pointer-events:none}.knob-indicator{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;transform:rotate(var(--knob-angle));pointer-events:none}.knob-indicator:before{content:"";width:3px;height:16px;margin-top:6px;background:#f7f7f7;border-radius:2px;box-shadow:0 0 6px #fff6}.knob-input{position:absolute;inset:-8px;opacity:0;cursor:pointer;z-index:2}.playback-controls{display:flex;gap:15px;align-items:center}.play-button,.clear-button{padding:0 20px;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;border:none;font-size:1em}.play-button{width:80px;height:20px;background:unset;background-color:unset;background-image:none;color:#fff;box-shadow:none;border-style:solid;border-width:1px;border-color:#b3b3b303}.play-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:none}.play-button:disabled{opacity:.6;cursor:not-allowed}.clear-button{background:#ffffff1a;color:#e0e0e0;border:2px solid rgba(255,255,255,.2)}.clear-button:hover{background:#ffffff26;transform:translateY(-2px)}.piano-roll-section{background:#ffffff0d;border-radius:12px;padding:14px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);position:relative}.bassline-placeholder{min-height:360px;border-radius:12px;border:1px dashed rgba(255,255,255,.18);background:#0003;display:flex;align-items:center;justify-content:center;color:#fff9;font-weight:600;letter-spacing:.02em}.bassline-grid{display:grid;gap:10px}.bassline-header{display:flex;justify-content:space-between;align-items:center;gap:12px}.bassline-octave{display:flex;align-items:center;gap:8px}.bassline-octave-btn{width:28px;height:28px;border:none;border-radius:8px;background:#ffffff0f;color:#e0e0e0;cursor:pointer}.bassline-octave-btn:hover{border:1px solid rgba(102,126,234,.6);box-shadow:0 0 0 2px #667eea33}.bassline-octave-label{font-size:.85rem;color:#ffffffbf;min-width:44px;text-align:center}.bassline-generate{padding:6px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.15);background:#ffffff0f;color:#e0e0e0;font-weight:600;cursor:pointer;transition:all .2s ease}.bassline-generate:hover{border-color:#667eea99;box-shadow:0 0 0 2px #667eea33}.bassline-steps{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:6px}.bassline-step-label{text-align:center;font-size:.75em;color:#fff9}.bassline-step{display:grid;gap:4px;height:170px}.bassline-region{width:100%;height:100%;border-radius:6px;border:1px solid rgba(255,255,255,.1);background:#ffffff14;cursor:pointer;transition:transform .1s ease,background .2s ease}.bassline-region.white{background:#ffffff1f}.bassline-region.black{background:#00000059}.bassline-step.beat-start .bassline-region.white{background:#fff3}.bassline-step.beat-start .bassline-region.black{background:#00000075}.bassline-region.muted{opacity:.35}.bassline-region.selected{background:rgba(var(--accent-blue-rgb),.7);border-color:rgba(var(--accent-blue-rgb),.9)}.piano-roll-toolbar{display:flex;gap:16px;align-items:center;margin-bottom:12px;flex-wrap:wrap;position:relative;z-index:3}.piano-roll-footer{margin-top:12px;margin-bottom:0}.piano-roll-control{display:flex;align-items:center;gap:8px;color:silver;font-weight:600}.piano-roll-control-label{color:inherit}.piano-roll-control .piano-roll-chord-select{padding:0 20px 0 0;border:none;border-radius:0;background:transparent;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23e0e0e0' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right center;background-size:10px 6px;color:#e0e0e0;font-weight:600;font-size:.9em;cursor:pointer;min-height:0;appearance:none;-webkit-appearance:none}.piano-roll-control .piano-roll-chord-select:focus{outline:none}.piano-roll-chord-measure{position:absolute;visibility:hidden;pointer-events:none;white-space:nowrap;font-size:.9em;font-weight:600;font-family:inherit;color:#e0e0e0}.piano-roll-view-sentence{display:inline;white-space:nowrap;color:inherit;font-weight:inherit;font-size:inherit}.piano-roll-view-inline-select{display:inline;margin:0;padding:0;border:none;border-radius:0;background:transparent;background-image:none;color:var(--accent-blue);font-weight:600;font-size:inherit;font-family:inherit;cursor:pointer;text-decoration:none;appearance:none;-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;vertical-align:baseline}.piano-roll-view-inline-select:hover:not(:disabled){color:var(--accent-blue-hover)}.piano-roll-view-inline-select:disabled{opacity:.6;cursor:not-allowed}.piano-roll-view-inline-select:focus{outline:none}.piano-roll-view-inline-select{margin-right:-.7em}.piano-roll-view-value-all{width:9.5ch;min-width:9.5ch}.piano-roll-view-value-scale{width:11.5ch;min-width:11.5ch}.piano-roll-octave-loop-row{display:flex;align-items:stretch;flex-wrap:nowrap;margin-bottom:0}.piano-roll-octave-cell{flex-shrink:0;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;gap:6px;height:28px;min-height:28px;background:#252525;border-right:2px solid #333;border-bottom:1px solid #333;padding:0}.piano-roll-octave-cell .octave-btn{width:28px;height:28px;min-height:28px;padding:0;border:none;border-radius:0;background:none;color:#e0e0e0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:color .15s ease,opacity .15s ease;box-sizing:border-box}.piano-roll-octave-cell .octave-btn:hover:not(:disabled){color:#fff}.piano-roll-octave-cell .octave-btn:disabled{opacity:.4;cursor:not-allowed}.piano-roll-control input{padding:8px 12px;border-radius:8px;background:#ffffff14;border:2px solid rgba(255,255,255,.18);color:#e0e0e0;font-weight:600}.piano-roll-control .piano-roll-minimal-select{margin-left:6px;padding:0 18px 0 0;border:none;border-radius:0;background:transparent;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23e0e0e0' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right center;background-size:10px 6px;color:#e0e0e0;font-weight:600;font-size:.9em;cursor:pointer;min-height:0;appearance:none;-webkit-appearance:none}.piano-roll-control .piano-roll-minimal-select:first-of-type{margin-left:0}.piano-roll-control .piano-roll-minimal-select:focus{outline:none}.piano-roll-control input{width:80px}.tempo-unit{font-size:.85em;color:#a0a0a0}.piano-roll-check{display:flex;align-items:center;gap:8px;color:silver;font-weight:600}.piano-roll-check input{width:16px;height:16px}.clear-inline{margin-left:auto;padding:0;border-radius:0;font-weight:600;cursor:pointer;border:none;background:transparent;color:#ffffffb3;transition:color .2s ease;display:inline-flex;align-items:center;justify-content:center;position:relative;z-index:4;pointer-events:auto}.clear-inline:hover{color:var(--accent-blue);transform:none}.loop-range-fill{position:absolute;height:100%;background:rgba(var(--accent-blue-rgb),.6);border-radius:0;top:0}.piano-roll-scroll{overflow-x:hidden;margin-top:0;padding-top:0;padding-bottom:0;position:relative;z-index:1}.loop-strip{position:relative;height:28px;border-radius:0;background:#252525;border:1px solid #333;border-left:none;margin-bottom:0;overflow:hidden;touch-action:none}.loop-strip input[type=range]{position:absolute;inset:0;width:100%;background:transparent;pointer-events:none;-webkit-appearance:none;appearance:none}.loop-strip input[type=range]::-webkit-slider-thumb{pointer-events:auto;width:14px;height:28px;border-radius:0;background:transparent;-webkit-appearance:none;cursor:ew-resize}.loop-strip input[type=range]::-moz-range-thumb{pointer-events:auto;width:14px;height:28px;border-radius:0;background:transparent;border:none;cursor:ew-resize}.piano-roll-bar-nav{display:flex;align-items:center;gap:10px;margin-left:8px;padding:0;border:none;background:transparent;box-shadow:none;position:absolute;top:10px;right:12px;z-index:5}.piano-roll-bar-button{display:inline-flex;align-items:center;justify-content:center;width:28px;height:24px;border-radius:0;border:none;background:transparent;color:#d8d8e3;cursor:pointer;padding:0;-webkit-appearance:none;appearance:none;box-shadow:none}.piano-roll-bar-button:disabled{opacity:.4;cursor:not-allowed}.piano-roll-bar-icon{width:18px;height:18px;display:block;stroke:currentColor;stroke-width:2;fill:none}.piano-roll-bar-label{font-size:.75rem;color:#c7c7d6;white-space:nowrap}.piano-roll-container{display:flex;gap:0;margin-top:0;background:#1a1a1a;overflow:hidden}.drum-grid{display:grid;gap:12px}.drum-row{display:grid;grid-template-columns:60px 1fr;align-items:center;gap:12px}.drum-row.muted{opacity:.5}.drum-row-label{font-weight:600;color:#c7c7d6;text-transform:uppercase;font-size:.75rem;letter-spacing:.08em}.drum-row-label.mute-toggle{background:none;border:none;padding:0;text-align:left;cursor:pointer}.drum-row-label.mute-toggle.muted{opacity:.5}.drum-row-steps{display:grid;grid-template-columns:repeat(16,minmax(18px,1fr));gap:6px}.drum-step{height:26px;border-radius:6px;border:1px solid rgba(255,255,255,.12);background:#ffffff0f;cursor:pointer;transition:background .15s ease,border-color .15s ease}.drum-step.beat{border-color:#ffffff38}.drum-step.downbeat{border-color:#ffffff47}.drum-step.active{background:rgba(var(--accent-blue-rgb),.75);border-color:rgba(var(--accent-blue-rgb),.9)}.drum-step.active.downbeat{background:rgba(var(--accent-blue-rgb),.75)}.piano-roll-sidebar{background:#252525;border-right:2px solid #333;min-width:80px;width:80px;display:flex;flex-direction:column}.piano-roll-key-label{display:flex;align-items:center;justify-content:center;font-size:.75em;color:#a0a0a0;border-bottom:1px solid #333;font-weight:500;-webkit-user-select:none;user-select:none}.piano-roll-canvas-wrapper{overflow-x:hidden;overflow-y:hidden;flex:1;min-width:0}.piano-roll-canvas-wrapper canvas{display:block;background:#1a1a1a;position:relative;z-index:1}@media(max-width:768px){.piano-roll-canvas-wrapper.piano-roll-mobile-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.piano-roll-canvas-wrapper.piano-roll-mobile-scroll::-webkit-scrollbar{display:none}}.app[data-theme=gradient]{--accent-blue: #00e5ff;--accent-blue-hover: #5efaff;--accent-blue-soft: rgba(0, 229, 255, .45);--accent-blue-rgb: 0, 229, 255;--gd-bg-app: linear-gradient(145deg, #1a0a2e 0%, #2d1b4e 35%, #16213e 65%, #0f3460 100%);--gd-bg-panel: rgba(255, 248, 231, .06);--gd-bg-panel-strong: rgba(255, 248, 231, .12);--gd-bg-input: rgba(255, 248, 231, .08);--gd-bg-dark: rgba(0, 0, 0, .25);--gd-text: #fff8e7;--gd-text-dim: rgba(255, 248, 231, .88);--gd-text-muted: rgba(255, 248, 231, .65);--gd-text-soft: rgba(255, 248, 231, .5);--gd-border: rgba(255, 248, 231, .18);--gd-border-strong: rgba(255, 248, 231, .3);--gd-warm: #ff6b35;--gd-warm-soft: rgba(255, 107, 53, .35);--gd-purple: #b24bf3;--gd-purple-soft: rgba(178, 75, 243, .5);--gd-glow: 0 0 20px rgba(0, 229, 255, .35);--gd-glow-strong: 0 0 24px rgba(0, 229, 255, .5);--gd-shadow-active: 0 0 0 2px rgba(0, 229, 255, .35);--gd-3d-panel: linear-gradient(180deg, rgba(255, 248, 231, .12) 0%, rgba(255, 248, 231, .02) 50%, rgba(0, 0, 0, .15) 100%);--gd-3d-panel-inset: linear-gradient(180deg, rgba(0, 0, 0, .12) 0%, rgba(255, 248, 231, .04) 40%, rgba(255, 248, 231, .08) 100%);--gd-3d-button: linear-gradient(180deg, rgba(255, 248, 231, .18) 0%, rgba(255, 248, 231, .06) 100%);--gd-3d-button-active: linear-gradient(180deg, rgba(0, 229, 255, .35) 0%, rgba(0, 229, 255, .12) 100%);--gd-3d-input: linear-gradient(180deg, rgba(255, 248, 231, .14) 0%, rgba(255, 248, 231, .04) 100%);--gd-3d-bar: linear-gradient(180deg, rgba(45, 27, 78, .98) 0%, rgba(26, 10, 46, .98) 100%);--gd-shadow-3d: 0 4px 12px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 248, 231, .08);--gd-shadow-3d-sm: 0 2px 8px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 248, 231, .06);background:var(--gd-bg-app);color:var(--gd-text);box-shadow:inset 0 0 120px #0003}.app[data-theme=gradient] .transport-bar{background:var(--gd-3d-bar);border-bottom:1px solid var(--gd-border);box-shadow:0 4px 20px #0006,inset 0 1px #fff8e70f}.app[data-theme=gradient] .transport-label{color:var(--gd-text-muted)}.app[data-theme=gradient] .transport-tempo input,.app[data-theme=gradient] .transport-musical select{background:var(--gd-3d-input);border:2px solid var(--gd-border);color:var(--gd-text);box-shadow:inset 0 2px 6px #0003}.app[data-theme=gradient] .panel-tabs button{border:1px solid var(--gd-border);background:var(--gd-3d-button);color:var(--gd-text);box-shadow:var(--gd-shadow-3d-sm)}.app[data-theme=gradient] .panel-tabs button.active{border-color:var(--accent-blue);box-shadow:var(--gd-shadow-active),var(--gd-shadow-3d-sm);background:var(--gd-3d-button-active)}.app[data-theme=gradient] .engine-tab-with-preset{border:1px solid var(--accent-blue);box-shadow:var(--gd-shadow-active),var(--gd-shadow-3d-sm);background:var(--gd-3d-button-active)}.app[data-theme=gradient] .engine-tab-with-preset span{color:var(--gd-text)}.app[data-theme=gradient] .engine-tab-preset-select{border-left:1px solid var(--gd-border-strong);color:var(--gd-text);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23fff8e7' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E")}.app[data-theme=gradient] .engine-tab-preset-measure{color:var(--gd-text)}.app[data-theme=gradient] .loop-button{color:var(--gd-text-soft)}.app[data-theme=gradient] .loop-button.active{color:var(--accent-blue)}.app[data-theme=gradient] .loop-button:after{background:#1a0a2ef2;color:var(--gd-text)}.app[data-theme=gradient] .icon-button:hover{box-shadow:var(--gd-glow)}.app[data-theme=gradient] .control-panel{background:var(--gd-3d-panel);border:1px solid var(--gd-border);box-shadow:var(--gd-shadow-3d)}.app[data-theme=gradient] .control-section h3{color:var(--gd-text)}.app[data-theme=gradient] .transport-skin-icon{color:#fff}.app[data-theme=gradient] .transport-skin-icon:hover{color:#fff;opacity:.85}.app[data-theme=gradient] .skin-modal-panel{background:linear-gradient(145deg,#2d1b4e,#1a0a2e);border:1px solid rgba(0,229,255,.35);box-shadow:0 8px 32px #0006}.app[data-theme=gradient] .skin-modal-title{color:var(--accent-blue)}.app[data-theme=gradient] .skin-modal-close{color:var(--gd-text)}.app[data-theme=gradient] .skin-modal-close:hover{background:var(--gd-bg-input);color:var(--gd-text)}.app[data-theme=gradient] .skin-modal-label{color:var(--gd-text-dim)}.app[data-theme=gradient] .skin-modal-select{background:var(--gd-bg-input);border:1px solid var(--gd-border);color:var(--gd-text)}.app[data-theme=gradient] .skin-modal-select:focus{border-color:var(--accent-blue)}.app[data-theme=gradient] .skin-modal-header{border-bottom:1px solid var(--gd-border)}.app[data-theme=gradient] .engine-selector span{color:var(--gd-text-dim)}.app[data-theme=gradient] .prophet-presets select{border:1px solid var(--gd-border);background:var(--gd-bg-input);color:var(--gd-text)}.app[data-theme=flat]{--accent-blue: #6dd5ed;--accent-blue-hover: #7ee5fd;--accent-blue-soft: rgba(109, 213, 237, .45);--accent-blue-rgb: 109, 213, 237;background:#1e1e2e}.app[data-theme=flat] .transport-bar{background:#252536;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-bottom:1px solid rgba(255,255,255,.08)}.app[data-theme=flat] .panel-tabs button{background:#ffffff0d;box-shadow:none}.app[data-theme=flat] .panel-tabs button.active,.app[data-theme=flat] .engine-tab-with-preset{box-shadow:none;border:1px solid rgba(102,126,234,.5)}.app[data-theme=flat] .icon-button:hover{box-shadow:none;transform:none}.app[data-theme=flat] .skin-modal-panel{background:#252536;box-shadow:0 4px 16px #0000004d;border:1px solid rgba(255,255,255,.12)}.app[data-theme=flat] .play-button,.app[data-theme=flat] .loop-button{box-shadow:none}.app[data-theme=dark]{--accent-blue: #f1c84c;--accent-blue-hover: #f7d878;--accent-blue-soft: rgba(241, 200, 76, .45);--accent-blue-rgb: 241, 200, 76;background:linear-gradient(160deg,#12141a,#171b23 52%,#111317);color:#e7e9ee}.app[data-theme=dark] .transport-bar{background:linear-gradient(180deg,#14171ef2,#0e1016f2);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 8px 22px #00000059,inset 0 1px #ffffff08}.app[data-theme=dark] .transport-tempo input,.app[data-theme=dark] .transport-musical select{background:#ffffff0f;border:1px solid rgba(255,255,255,.14);color:#e7e9ee}.app[data-theme=dark] .control-panel,.app[data-theme=dark] .piano-roll-section,.app[data-theme=dark] .drone-grid,.app[data-theme=dark] .arp-panel{background:linear-gradient(180deg,#ffffff0e,#ffffff06);border:1px solid rgba(255,255,255,.11);box-shadow:0 6px 20px #00000047}.app[data-theme=dark] .panel-tabs button,.app[data-theme=dark] .preset-button,.app[data-theme=dark] .bassline-generate,.app[data-theme=dark] .drone-option-button,.app[data-theme=dark] .arp-option-button{background:linear-gradient(180deg,#ffffff14,#ffffff08);border-color:#ffffff29}.app[data-theme=dark] .panel-tabs button.active,.app[data-theme=dark] .engine-tab-with-preset{border-color:#f1c84cd9;box-shadow:0 0 0 2px #f1c84c40}.app[data-theme=dark] .loop-button.active{color:var(--accent-blue)}.app[data-theme=dark] .skin-modal-panel{background:linear-gradient(165deg,#1a1f28,#13171f);border:1px solid rgba(241,200,76,.35)}.app[data-theme=dark] .skin-modal-title{color:var(--accent-blue)}.app[data-theme=dark] .skin-modal-select{background:#0f1218e6;border:1px solid rgba(255,255,255,.18);color:#e7e9ee}.app[data-theme=dark] .skin-modal-select:focus{border-color:var(--accent-blue)}@media(max-width:768px){.app-content{gap:20px}.control-panel{flex-direction:column;gap:25px}.app-header h1{font-size:2em}}@media(max-width:1100px){.content-columns{grid-template-columns:1fr}.right-column .control-panel{position:static}}