.react-grid-layout{position:relative;transition:height .2s ease}.react-grid-item{transition:all .2s ease;transition-property:left,top,width,height}.react-grid-item img{pointer-events:none;-webkit-user-select:none;user-select:none}.react-grid-item.cssTransforms{transition-property:transform,width,height}.react-grid-item.resizing{transition:none;will-change:width,height;z-index:1}.react-grid-item.react-draggable-dragging{transition:none;will-change:transform;z-index:3}.react-grid-item.dropping{visibility:hidden}.react-grid-item.react-grid-placeholder{background:red;opacity:.2;transition-duration:.1s;-webkit-user-select:none;-o-user-select:none;user-select:none;z-index:2}.react-grid-item.react-grid-placeholder.placeholder-resizing{transition:none}.react-grid-item>.react-resizable-handle{height:20px;position:absolute;width:20px}.react-grid-item>.react-resizable-handle:after{border-bottom:2px solid #0006;border-right:2px solid #0006;bottom:3px;content:"";height:5px;position:absolute;right:3px;width:5px}.react-resizable-hide>.react-resizable-handle{display:none}.react-grid-item>.react-resizable-handle.react-resizable-handle-sw{bottom:0;cursor:sw-resize;left:0;transform:rotate(90deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-se{bottom:0;cursor:se-resize;right:0}.react-grid-item>.react-resizable-handle.react-resizable-handle-nw{cursor:nw-resize;left:0;top:0;transform:rotate(180deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-ne{cursor:ne-resize;right:0;top:0;transform:rotate(270deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-e,.react-grid-item>.react-resizable-handle.react-resizable-handle-w{cursor:ew-resize;margin-top:-10px;top:50%}.react-grid-item>.react-resizable-handle.react-resizable-handle-w{left:0;transform:rotate(135deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-e{right:0;transform:rotate(315deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-n,.react-grid-item>.react-resizable-handle.react-resizable-handle-s{cursor:ns-resize;left:50%;margin-left:-10px}.react-grid-item>.react-resizable-handle.react-resizable-handle-n{top:0;transform:rotate(225deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-s{bottom:0;transform:rotate(45deg)}.react-resizable{position:relative}.react-resizable-handle{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgd2lkdGg9IjYiIGhlaWdodD0iNiI+PHBhdGggZD0iTTYgNkgwVjQuMmg0LjJWMEg2djZaIiBvcGFjaXR5PSIuMzAyIi8+PC9zdmc+);background-origin:content-box;background-position:100% 100%;background-repeat:no-repeat;box-sizing:border-box;height:20px;padding:0 3px 3px 0;position:absolute;width:20px}.react-resizable-handle-sw{bottom:0;cursor:sw-resize;left:0;transform:rotate(90deg)}.react-resizable-handle-se{bottom:0;cursor:se-resize;right:0}.react-resizable-handle-nw{cursor:nw-resize;left:0;top:0;transform:rotate(180deg)}.react-resizable-handle-ne{cursor:ne-resize;right:0;top:0;transform:rotate(270deg)}.react-resizable-handle-e,.react-resizable-handle-w{cursor:ew-resize;margin-top:-10px;top:50%}.react-resizable-handle-w{left:0;transform:rotate(135deg)}.react-resizable-handle-e{right:0;transform:rotate(315deg)}.react-resizable-handle-n,.react-resizable-handle-s{cursor:ns-resize;left:50%;margin-left:-10px}.react-resizable-handle-n{top:0;transform:rotate(225deg)}.react-resizable-handle-s{bottom:0;transform:rotate(45deg)}.piano-container{display:flex;flex-direction:column;font-family:Arial,sans-serif;height:100%;overflow:hidden}.piano-controls{align-items:center;background:#140c1e80;border-radius:8px;display:flex;flex-wrap:wrap;justify-content:space-between;margin-bottom:.5rem;padding:.5rem}.control-button,.mode-button{background:#6a1b9a66;border:none;border-radius:4px;color:#fff;cursor:pointer;margin:0 .25rem;padding:.5rem 1rem;transition:all .2s ease}.control-button:hover,.mode-button:hover{background:#6a1b9ab3}.mode-button.active{background:#6a1b9ae6;box-shadow:0 0 10px #8a2be2b3}.octave-display{color:#fff;font-size:.9rem;margin:0 .5rem}.status-text{color:#ffffffb3;font-size:.8rem;margin-left:auto}.piano-keyboard{background:#1a0d2c;border-radius:0 0 5px 5px;flex:1 1;margin:0 auto;overflow:hidden}.piano-keyboard,.white-keys{display:flex;position:relative;width:100%}.white-key,.white-keys{height:100%}.white-key{background:linear-gradient(180deg,#f5f5f5,#ddd);border-radius:0 0 3px 3px;cursor:pointer;flex:1 1;margin:0 1px;position:relative;transition:all .05s ease;z-index:1}.white-key.active{background:linear-gradient(180deg,#b19dd8,#8a2be2);box-shadow:inset 0 -5px 10px #0003;transform:translateY(2px)}.black-keys{height:65%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.black-key{background:linear-gradient(180deg,#333,#111);border-radius:0 0 3px 3px;cursor:pointer;height:100%;pointer-events:all;position:absolute;transition:all .05s ease;width:8%;z-index:2}.black-key.active{background:linear-gradient(180deg,#6a1b9a,#4a148c);box-shadow:inset 0 -3px 5px #00000080;transform:translateY(2px)}.key-label{bottom:10px;font-size:12px;position:absolute;text-align:center;-webkit-user-select:none;user-select:none;width:100%}.white-key .key-label{color:#333}.black-key .key-label{color:#ddd;font-size:10px}.drum-machine-container{display:flex;flex-direction:column;font-family:Arial,sans-serif;height:100%;overflow:hidden}.pad-grid{grid-gap:.5rem;display:grid;flex:1 1;gap:.5rem;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);margin-bottom:.5rem;padding:.5rem}.drum-pad{align-items:center;aspect-ratio:1/1;background:linear-gradient(135deg,#472073,#2d1546);border:1px solid #b19dd84d;border-radius:6px;box-shadow:0 4px 6px #0003;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;padding:.5rem;transition:all .1s ease}.drum-pad.active{background:linear-gradient(135deg,#8a2be2,indigo);box-shadow:0 0 15px #8a2be2b3,inset 0 0 10px #ffffff4d;transform:scale(.95)}.pad-number{color:#ffffff80;font-size:.7rem;margin-bottom:auto}.pad-name{color:#fff;font-size:.9rem;font-weight:700;text-align:center;text-shadow:0 0 5px #b19dd8cc}.sequencer-container{border:1px solid #b19dd833;border-radius:8px}.sequencer-container,.sequencer-controls{background:#1a102866;margin-bottom:.5rem;padding:.5rem}.sequencer-controls{align-items:center;border-radius:4px;display:flex;flex-wrap:wrap;justify-content:space-between}.bar-button,.control-button{background:#6a1b9a66;border:none;border-radius:4px;color:#fff;cursor:pointer;margin:0 .25rem;padding:.5rem 1rem;transition:all .2s ease}.bar-button:hover,.control-button:hover{background:#6a1b9ab3}.control-button.active{background:#6a1b9ae6;box-shadow:0 0 10px #8a2be2b3}.bar-button:disabled,.control-button:disabled{cursor:not-allowed;opacity:.3}.bpm-control{align-items:center;color:#fff;display:flex;font-size:.9rem}.bpm-control input{background:#321e504d;border:1px solid #b19dd84d;border-radius:4px;color:#fff;margin-left:.5rem;padding:.25rem;width:50px}.bar-navigation{align-items:center;color:#fff;display:flex;font-size:.9rem}.bar-navigation span{margin:0 .5rem}.position-display{background:#1a102899;color:#fff;font-size:1rem;font-weight:700;min-width:4rem}.sequencer-grid{background:#1a10284d;border:1px solid #b19dd833;border-radius:4px;max-height:300px;overflow-y:auto}.beat-markers{background:#1a1028cc;border-bottom:1px solid #b19dd833;display:flex;padding:.25rem 0;position:sticky;top:0;z-index:2}.beat-marker{color:#ffffffb3;flex:1 1;font-size:.7rem;padding:.25rem 0;text-align:center}.beat-marker.current{color:#8a2be2;font-weight:700}.sequence-row{border-bottom:1px solid #1a102880;display:flex}.row-label{align-items:center;background:#1a102866;border-right:1px solid #1a102880;color:#fff;display:flex;font-size:.8rem;padding:.25rem .5rem;width:80px}.step-buttons{display:flex;flex:1 1}.step-button{aspect-ratio:1/1;background:#321e501a;border:none;border-radius:2px;cursor:pointer;flex:1 1;margin:.25rem;transition:background .1s ease}.step-button:hover{background:#321e504d}.step-button.active{background:#8a2be299;box-shadow:0 0 5px #8a2be280}.step-button.current{border:2px solid #ffffffb3}.step-button.active.current{background:#8a2be2e6;box-shadow:0 0 10px #8a2be2cc}.controls{background:#140c1e80;border-radius:8px;justify-content:space-between;padding:.5rem}.controls,.volume-control{align-items:center;display:flex}.volume-control{color:#fff}.volume-control input[type=range]{-webkit-appearance:none;background:linear-gradient(90deg,#8a2be2,indigo);border-radius:2px;height:4px;margin:0 1rem;width:100px}.volume-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;border-radius:50%;box-shadow:0 0 5px #0000004d;cursor:pointer;height:16px;width:16px}.arrangement-container{background:#140c1e66;border-radius:8px;color:#fff;display:flex;flex-direction:column;font-family:Arial,sans-serif;height:100%;overflow:hidden;width:100%}.arrangement-toolbar{align-items:center;background:#1a102899;border-bottom:1px solid #b19dd833;display:flex;height:40px;justify-content:space-between;padding:.5rem}.transport-controls{align-items:center;display:flex;gap:.5rem}.transport-button{align-items:center;background:#6a1b9a66;border:none;border-radius:4px;color:#fff;cursor:pointer;display:flex;font-size:14px;height:30px;justify-content:center;transition:all .2s ease;width:30px}.transport-button:hover{background:#6a1b9ab3}.transport-button.active{background:#8a2be2cc;box-shadow:0 0 10px #8a2be280}.position-display{background:#1a1028cc;border-radius:4px;font-family:monospace;font-size:14px;min-width:50px;padding:.25rem .5rem;text-align:center}.zoom-controls{gap:.5rem}.zoom-button,.zoom-controls{align-items:center;display:flex}.zoom-button{background:#6a1b9a66;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:14px;height:24px;justify-content:center;width:24px}.zoom-button:hover{background:#6a1b9ab3}.action-buttons{display:flex;gap:.5rem}.add-track-button,.save-button{border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:.8rem;padding:.25rem .75rem;transition:all .2s ease}.add-track-button{background:#6a1b9a66}.add-track-button:hover{background:#6a1b9ab3}.save-button{background:#4caf5099}.save-button:hover{background:#4caf50cc}.save-button:disabled{background:#4caf504d;cursor:not-allowed}.status-message{background:#4caf5033;border-left:3px solid #4caf50cc;font-size:.8rem;margin:0;padding:.3rem .5rem}.status-message.error{background:#f4433633;border-left:3px solid #f44336cc}.arrangement-content{display:flex;flex:1 1;flex-direction:column;overflow:hidden}.tracks-header{border-bottom:1px solid #b19dd833;display:flex;height:30px}.track-controls-header{align-items:center;background:#1a102899;border-right:1px solid #b19dd833;display:flex;font-size:12px;font-weight:700;min-width:200px;padding:0 .5rem;width:200px}.timeline-header{background:#1a102866;flex:1 1;overflow:hidden;position:relative}.timeline-marker{background:#b19dd84d;height:100%;position:absolute;top:0;width:1px}.timeline-marker.major{background:#b19dd880}.timeline-marker span{color:#ffffffb3;font-size:10px;left:3px;position:absolute;top:2px}.playhead{background:#ff5252;height:100%;position:absolute;top:0;width:2px;z-index:10}.tracks-container{flex:1 1;overflow-x:auto;overflow-y:auto}.track-row{border-bottom:1px solid #1a1028cc;display:flex;height:60px}.track-row.selected{background:#8a2be21a}.track-controls{align-items:center;background:#1a102880;border-right:1px solid #b19dd833;display:flex;min-width:200px;padding:0 .5rem;width:200px}.track-color{border-radius:50%;height:12px;margin-right:.5rem;width:12px}.track-name{flex:1 1;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-button{align-items:center;background:#6a1b9a4d;border:none;border-radius:3px;color:#fff;cursor:pointer;display:flex;font-size:10px;height:22px;justify-content:center;margin-left:3px;width:22px}.track-button:hover{background:#6a1b9a80}.track-button.active{background:#8a2be2cc;box-shadow:0 0 5px #8a2be24d}.track-button.remove{background:#dc35454d}.track-button.remove:hover{background:#dc354599}.track-clips{background:#1a10284d;background-image:linear-gradient(#b19dd80d 1px,#0000 0);background-size:30px 15px;flex:1 1;height:100%;position:relative}.clip{align-items:center;border:1px solid #ffffff1a;border-radius:4px;box-shadow:0 2px 4px #0003;color:#fff;cursor:pointer;display:flex;font-size:12px;height:80%;overflow:hidden;padding:0 .5rem;position:absolute;top:10%;transition:all .1s ease}.clip:hover{filter:brightness(1.1)}.clip.selected{border:1px solid #fff;box-shadow:0 0 10px #ffffff4d}.clip-name{flex:1 1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.clip-remove{background:none;border:none;color:#fff;cursor:pointer;font-size:14px;opacity:0;transition:opacity .2s ease}.clip:hover .clip-remove{opacity:1}
/*# sourceMappingURL=main.6d22a974.css.map*/