.help-button[data-v-370ae6b0]{position:fixed;top:14px;right:280px;width:34px;height:34px;cursor:pointer;border-radius:50%;background-color:#fff;border-width:2px;border-style:solid;font-size:24px;border-color:#000;font-weight:lighter;color:#000;z-index:1000;box-shadow:0 3px 4px rgba(0,0,0,.3)}.help-button span[data-v-370ae6b0]{display:block}.modal-background[data-v-370ae6b0]{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;z-index:1000}.help-modal[data-v-370ae6b0]{background-color:#fff;padding:20px;width:500px;max-height:80%;overflow-y:auto;border-radius:8px;position:relative;justify-items:left;justify-content:left}.close-button[data-v-370ae6b0]{position:sticky;top:10px;right:10px;background-color:transparent;border:none;font-size:20px;cursor:pointer;float:right}.fade-enter-active[data-v-370ae6b0],.fade-leave-active[data-v-370ae6b0]{transition:opacity .5s}.fade-enter[data-v-370ae6b0],.fade-leave-to[data-v-370ae6b0]{opacity:0}.help-content[data-v-370ae6b0]{font-size:14px;line-height:1.6;text-align:left}.help-content h1[data-v-370ae6b0]{text-align:center}.credits[data-v-370ae6b0]{margin-top:20px;font-style:italic;text-align:center}.track-tab-container[data-v-78489fbc]{display:flex;align-items:flex-end;max-width:83%;background-color:#f1f1f1;flex-wrap:nowrap;height:50px}.track-tab[data-v-78489fbc]{-webkit-user-select:none;-moz-user-select:none;user-select:none;display:flex;flex-direction:column;margin-right:-10px;flex-grow:1;min-width:75px;max-width:200px;height:40px;border:2px solid #ccc;border-radius:8px 8px 0 0;cursor:pointer;transition:background-color .3s ease;position:relative;z-index:1;align-self:flex-end;overflow:hidden}.track-tab.selected[data-v-78489fbc]{padding-bottom:10px;z-index:10;border-bottom:none}.tab-header[data-v-78489fbc]{display:flex;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:8px 8px 0 0;font-weight:700;font-size:1em;color:#fff}.track-name-input[data-v-78489fbc]{width:100%;font-size:1em;background-color:transparent;border:none;color:#fff;outline:none}.track-name[data-v-78489fbc]{color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mute-icon[data-v-78489fbc]{font-size:1.2em;cursor:pointer;margin-left:10px;color:#fff}.delete-btn[data-v-78489fbc]{background:transparent;border:none;cursor:pointer;color:#fff;font-size:1.1em;font-weight:700}.add-track-btn[data-v-78489fbc]{-webkit-user-select:none;-moz-user-select:none;user-select:none;width:50px;height:50px;font-size:2em;background-color:#007bff;color:#fff;border:none;border-radius:8px;margin-left:12px;flex-shrink:0;cursor:pointer;position:relative;z-index:5;transition:background-color .3s ease}.add-track-btn[data-v-78489fbc]:disabled{background-color:#ccc;cursor:not-allowed}.color-picker[data-v-78489fbc]{margin-left:10px}.track-tab[data-v-78489fbc]:hover:after{content:attr(title);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background-color:rgba(0,0,0,.7);color:#fff;padding:5px;border-radius:4px;white-space:nowrap;z-index:10;margin-bottom:5px;opacity:0;transition:opacity .2s ease;opacity:1}.tempo-marker[data-v-3f9a78ee]{z-index:1;position:absolute;bottom:0;transform:translateX(-50%);cursor:pointer;pointer-events:auto}.tempo-triangle[data-v-3f9a78ee]{z-index:1;position:absolute;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:10px solid #333;left:50%;transform:translateX(-50%)}.tempo-label[data-v-3f9a78ee]{z-index:13;position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-size:12px;background-color:#fff;color:#333;padding:2px 4px;border-radius:3px;white-space:nowrap;border:1px solid #ccc}.export-button[data-v-054bb656]{position:fixed;top:50px;right:160px;padding:10px 20px;font-size:16px;cursor:pointer;border:none;border-radius:5px;background-color:#0078d4;color:#fff;z-index:1000;outline:none;box-shadow:0 3px 4px rgba(0,0,0,.3);width:105px}.export-modal[data-v-054bb656]{background-color:#fff;padding:20px;width:500px;max-height:80%;overflow-y:auto;border-radius:8px;position:relative;justify-items:left;justify-content:left}.modal-background[data-v-054bb656]{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;z-index:1000}.close-button[data-v-054bb656]{position:sticky;top:10px;right:10px;background-color:transparent;border:none;font-size:20px;cursor:pointer;float:right}.export-content[data-v-054bb656]{font-size:14px;line-height:1.6;text-align:left;width:100%}.flex-row[data-v-054bb656]{display:flex;flex-direction:row;gap:20px}.left-panel[data-v-054bb656]{width:200px;display:flex;flex-direction:column;background-color:#fff;padding:10px;border:1px solid #ccc}.track-header[data-v-054bb656]{font-weight:700;margin-bottom:5px}.track-list[data-v-054bb656]{display:flex;flex-direction:column;gap:5px;margin-bottom:auto}.clear-btn[data-v-054bb656]{margin-top:10px;align-self:flex-start}.right-panel[data-v-054bb656]{flex:1;display:flex;flex-direction:column;gap:15px}.info-box[data-v-054bb656],.output-settings[data-v-054bb656]{background-color:#fff;border:1px solid #ccc;padding:10px}li[data-v-054bb656]{list-style:none}.piano-container[data-v-2cb96792]{position:fixed;top:0;left:0;height:100%;width:100%;background-color:#ddd}.copyNotification[data-v-2cb96792]{position:fixed;top:20px;right:20px;background-color:#4caf50;color:#fff;padding:10px 20px;border-radius:5px;box-shadow:0 2px 5px rgba(0,0,0,.3);z-index:1000}.instrument-selector[data-v-2cb96792]{padding:10px;background-color:#f0f0f0;border-bottom:1px solid #ccc}.piano-roll[data-v-2cb96792]{height:94vh;flex-wrap:wrap;display:flex;overflow-y:auto;box-sizing:border-box;padding-bottom:36px}.piano-keys[data-v-2cb96792]{padding-top:30px;background-color:#ccc;width:10%;display:flex;flex-direction:column-reverse;padding-bottom:18px;z-index:12}.octave[data-v-2cb96792]{flex-direction:column;position:relative}.keys-wrapper[data-v-2cb96792]{flex-direction:column-reverse}.piano-key[data-v-2cb96792]{box-sizing:border-box;border:1px solid #ccc;cursor:pointer;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.white-key[data-v-2cb96792]{background:#fff;border-bottom:1px solid #ccc}.black-key[data-v-2cb96792],.white-key[data-v-2cb96792]{width:100%;height:24px;align-content:center;text-align:right;padding-right:10px;-webkit-user-select:none;-moz-user-select:none;user-select:none;font-size:80%}.black-key[data-v-2cb96792]{background:#000;color:#fff;position:relative}.white-key[data-v-2cb96792]:nth-child(odd){background:#fff}.white-key[data-v-2cb96792]:nth-child(12n){background:#bbb}.grid-wrapper[data-v-2cb96792]{overflow-x:scroll;overflow-y:hidden;flex-grow:1;position:relative}.ruler[data-v-2cb96792]{position:absolute;left:0;margin-left:calc(10% - 2px);background-color:#eee;height:29px;border-bottom:1px solid #ccc;display:flex;align-items:end;font-size:12px;color:#333;z-index:11;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer}.ruler-tick-label[data-v-2cb96792]{position:absolute;bottom:0;white-space:nowrap;transform:translateX(5px);font-size:14px;color:#333}.marker-replay-triangle[data-v-2cb96792]{position:absolute;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #bbb;left:50%;bottom:0;transform:translateX(-50%)}.marker-wrapper[data-v-2cb96792]{position:absolute;bottom:0;left:0;transform:translateX(-50%);pointer-events:none}.marker-triangle[data-v-2cb96792]{width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid red;bottom:0}.marker-line[data-v-2cb96792],.marker-triangle[data-v-2cb96792]{position:absolute;left:50%;transform:translateX(-50%);z-index:100}.marker-line[data-v-2cb96792]{width:2px;height:100vh;background-color:red;bottom:- 100%}.grid[data-v-2cb96792],.note[data-v-2cb96792]{position:absolute;overflow:hidden;display:flex}.note[data-v-2cb96792]{background-color:rgba(0,120,255,.5);border:1px solid #0078d4;cursor:pointer;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:center;justify-content:center;z-index:20;font-size:70%;margin-left:1px}.note[data-v-2cb96792]:active{background-color:rgba(0,120,255,.7)}.resize-handle[data-v-2cb96792]{position:absolute;right:0;top:0;width:40%;max-width:10px;height:100%;cursor:ew-resize;background-color:rgba(0,0,0,.2)}.volume-handle[data-v-2cb96792]{width:12px;height:60%;background-color:rgba(0,0,0,.2);position:absolute;bottom:-35%;left:50%;transform:translateX(-50%);border-radius:50%;clip-path:inset(0 0 50% 0);cursor:ns-resize}.play-button[data-v-2cb96792]{right:10px;border:none;outline:none}.loop-wrapper[data-v-2cb96792],.play-button[data-v-2cb96792]{position:fixed;top:10px;padding:10px 20px;font-size:16px;cursor:pointer;border-radius:5px;background-color:#0078d4;color:#fff;z-index:1000;box-shadow:0 3px 4px rgba(0,0,0,.3)}.loop-wrapper[data-v-2cb96792]{right:160px;height:18px;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:65px}.scroll-wrapper[data-v-2cb96792]{position:fixed;width:108px;top:50px;right:10px;padding:10px 20px;height:18px;font-size:16px;cursor:pointer;border:none;border-radius:5px;background-color:#0078d4;color:#fff;z-index:1000;outline:none;box-shadow:0 3px 4px rgba(0,0,0,.3)}.controls[data-v-2cb96792]{display:flex;align-items:center}.instrument-selector[data-v-2cb96792],.tempo-selector[data-v-2cb96792]{margin-right:15px}.selection-rect[data-v-2cb96792]{position:absolute;border:1px solid rgba(0,100,255,.5);background-color:rgba(0,100,255,.3);z-index:30}.gridCanvas[data-v-2cb96792]{margin-top:30px;display:block;z-index:10;left:0}.grid[data-v-2e49d91b]{position:absolute;width:100%;height:100%;background:repeating-linear-gradient(0deg,#ccc,#ccc 1px,transparent 0,transparent 50px),repeating-linear-gradient(90deg,#ccc,#ccc 1px,transparent 0,transparent 50px);z-index:10;overflow:hidden}.note[data-v-2e49d91b]{position:absolute;background-color:rgba(0,120,255,.5);border:1px solid #0078d4;cursor:pointer;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;z-index:20}.note[data-v-2e49d91b]:active{background-color:rgba(0,120,255,.7)}.pattern-editor[data-v-f2d0b530]{height:100%;width:100%;overflow:hidden}.scroll-container[data-v-f2d0b530]{height:100%;width:100%;overflow:auto;display:flex}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;position:fixed;top:0;left:0;height:100%;width:100%;background-color:#ddd}