@import"https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap";:root{--border-color: #dcd9d9;--component-bg-color: #edecec;--header-bg-color: #5c677a;--popup-color: #8794ac}.btn{background-color:transparent;border:none;transition:all .3s ease;cursor:pointer;position:relative;overflow:hidden;background-color:#fff}.btn:hover{opacity:.8;transform:translateY(-2px)}.btn:active{transform:translateY(0);transition:all .1s ease}.btn:focus{outline:none}.flex-center-full{display:flex;justify-content:center;align-items:center}.flex-center-vertically{display:flex;align-items:center}.flex-center-horizontally{display:flex;justify-content:center}html,body{width:100%;margin:0;padding:0;box-sizing:border-box;font-family:Roboto,Arial,sans-serif;overflow:hidden}#app{min-height:100vh;max-height:100dvh;padding-top:env(safe-area-inset-top,0);overflow:hidden}body{background-color:#6c7686}*,*:before,*:after{box-sizing:inherit}.popup-overlay[data-v-c2e5a747]{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.popup-content[data-v-c2e5a747]{background:var(--popup-color);color:#fff;padding-bottom:20px;padding-left:20px;padding-right:20px;border-radius:8px;max-width:500px;width:90%;box-shadow:0 8px 16px #0000004d}header[data-v-c2e5a747]{display:flex;justify-content:space-between;position:relative}header button[data-v-c2e5a747]{background-color:#fff;border:none;width:25px;height:25px;border-radius:5px;font-size:21px;position:absolute;right:-10px;top:10px;transition:all .2s ease}header button[data-v-c2e5a747]:hover{transform:scale(1.08);background-color:#e0e0e0;cursor:pointer}.circle-of-fifths-container[data-v-6e187534]{display:flex;flex-direction:column;align-items:center;padding:20px;-webkit-user-select:none;user-select:none;margin-top:20px}.circle-wrapper[data-v-6e187534]{position:relative;width:300px;height:300px;display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.circle-wrapper[data-v-6e187534]:active{cursor:grabbing}.circle-of-fifths[data-v-6e187534]{width:100%;height:100%}.circle-of-fifths.snapping[data-v-6e187534]{transition:transform .2s ease-out}.key-label[data-v-6e187534]{pointer-events:none;transition:fill .3s}.key-label.active[data-v-6e187534]{fill:#e0d758;font-size:16px}.top-marker[data-v-6e187534]{position:absolute;top:-10px;left:50%;transform:translate(-50%);font-size:24px;color:#e0d758;pointer-events:none;text-shadow:0 0 5px rgba(76,175,80,.5)}.instruction[data-v-6e187534]{margin-top:20px;text-align:center;color:#fff;font-size:14px;font-style:italic}.midi-output-container[data-v-8b18d7e8]{display:flex;flex-direction:column;align-items:center;padding:20px;-webkit-user-select:none;user-select:none;margin-top:20px;color:#fff}.title[data-v-8b18d7e8]{font-size:18px;font-weight:700;margin-bottom:20px}.output-list[data-v-8b18d7e8]{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}.output-item[data-v-8b18d7e8]{display:flex;align-items:center;gap:10px;font-size:14px}.reload-button[data-v-8b18d7e8]{padding:10px 20px;font-size:14px;font-weight:700;color:#fff;background-color:#87ceeb;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s}.reload-button[data-v-8b18d7e8]:disabled{background-color:#888;cursor:not-allowed}.reload-button[data-v-8b18d7e8]:hover:not(:disabled){background-color:#45a049}.selected-output[data-v-8b18d7e8]{margin-top:20px;font-size:14px;font-style:italic}.room-selection[data-v-797c7551]{min-height:300px;max-height:600px;overflow:hidden;display:flex;flex-direction:column}.empty-state[data-v-797c7551]{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;color:#fff9}.empty-state i[data-v-797c7551]{font-size:48px;margin-bottom:20px;opacity:.5}.empty-state p[data-v-797c7551]{margin:5px 0}.empty-state .hint[data-v-797c7551]{font-size:14px;opacity:.7}.rooms-container[data-v-797c7551]{display:flex;flex-direction:column;gap:16px;flex:1}.rooms-grid[data-v-797c7551]{display:flex;flex-direction:column;gap:12px;padding:10px 0;flex:1}.room-card[data-v-797c7551]{background:#ffffff0d;border:2px solid rgba(255,255,255,.1);border-radius:10px;padding:12px 14px;cursor:pointer;transition:all .3s ease}.room-card[data-v-797c7551]:hover{background:#ffffff14;border-color:#ffffff4d;transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.room-card.current-room[data-v-797c7551]{border-color:#e1e2e0;background:#4caf501a}.room-header[data-v-797c7551]{display:flex;justify-content:space-between;align-items:start;margin-bottom:10px}.room-name[data-v-797c7551]{margin:0;font-size:16px;font-weight:700;color:#fff;display:flex;align-items:center;gap:6px;flex:1}.current-badge[data-v-797c7551]{font-size:10px;background:#4caf50;padding:2px 6px;border-radius:10px;font-weight:400}.room-actions[data-v-797c7551]{display:flex;gap:4px}.action-btn[data-v-797c7551]{background:#ffffff1a;border:none;color:#fff;width:28px;height:28px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;font-size:12px}.action-btn[data-v-797c7551]:hover{background:#fff3;transform:scale(1.1)}.delete-btn[data-v-797c7551]:hover{background:#f44336}.rename-btn[data-v-797c7551]:hover{background:#2196f3}.rename-input[data-v-797c7551]{flex:1;margin-right:8px}.rename-input input[data-v-797c7551]{width:100%;padding:4px 8px;background:#ffffff1a;border:1px solid rgba(255,255,255,.3);border-radius:4px;color:#fff;font-size:16px;font-weight:700}.rename-input input[data-v-797c7551]:focus{outline:none;border-color:#2196f3}.room-stats[data-v-797c7551]{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:8px;padding:8px 0;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1)}.stat[data-v-797c7551]{display:flex;align-items:center;gap:6px;font-size:13px;color:#fffc}.stat i[data-v-797c7551]{width:14px;color:#fff9}.room-footer[data-v-797c7551]{display:flex;justify-content:space-between;align-items:center}.timestamp[data-v-797c7551]{font-size:12px;color:#ffffff80;display:flex;align-items:center;gap:6px}.timestamp i[data-v-797c7551]{font-size:10px}.pagination[data-v-797c7551]{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 0;border-top:1px solid rgba(255,255,255,.1)}.pagination-btn[data-v-797c7551]{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;width:32px;height:32px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;font-size:12px}.pagination-btn[data-v-797c7551]:hover:not(:disabled){background:#fff3;transform:scale(1.05)}.pagination-btn[data-v-797c7551]:disabled{opacity:.3;cursor:not-allowed}.pagination-dots[data-v-797c7551]{display:flex;gap:8px;align-items:center}.pagination-dot[data-v-797c7551]{width:8px;height:8px;border-radius:50%;background:#ffffff4d;border:none;cursor:pointer;transition:all .2s ease;padding:0}.pagination-dot[data-v-797c7551]:hover{background:#ffffff80;transform:scale(1.2)}.pagination-dot.active[data-v-797c7551]{background:#4caf50;width:10px;height:10px}.help-content[data-v-2042e94e]{padding:20px;max-width:800px;margin:0 auto;line-height:1.3;height:50vh;overflow-y:scroll}.help-content h1[data-v-2042e94e]{font-size:26px;margin-bottom:1.5rem;color:var(--color-heading, #ffffff);border-bottom:2px solid var(--color-border, #ffffff);padding-bottom:.5rem}.help-content h2[data-v-2042e94e]{font-size:1.5rem;margin-top:2rem;margin-bottom:1rem;color:var(--color-heading, #ffffff)}.help-content h3[data-v-2042e94e]{font-size:1.2rem;margin-top:1.5rem;margin-bottom:.75rem;color:var(--color-heading, #ffffff)}.help-content section[data-v-2042e94e]{margin-bottom:2rem}.help-content ol[data-v-2042e94e],.help-content ul[data-v-2042e94e]{margin-left:1.5rem;margin-bottom:1rem}.help-content li[data-v-2042e94e]{margin-bottom:.75rem}.help-content strong[data-v-2042e94e]{color:var(--color-text-strong, #ffffff);font-weight:600}.help-content p[data-v-2042e94e]{margin-bottom:.75rem}.piano-roll-container[data-v-ca341683]{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 4px 10px #0000001a,0 4px 10px #0000001a;background-color:#cacaca;padding:20px;display:flex;justify-content:center;align-items:center;border-radius:5px;z-index:9999;touch-action:none;-webkit-overflow-scrolling:touch;max-height:95vh;overflow:auto}.piano-roll[data-v-ca341683]{display:flex;flex-direction:column;-webkit-user-select:none;user-select:none;font-family:sans-serif}.piano-row[data-v-ca341683]{display:flex;flex-direction:row}.piano-key[data-v-ca341683]{width:50px;height:24px;line-height:24px;text-align:center;border:1px solid #ccc;background:#fff;font-size:12px;box-sizing:border-box;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,.1)}.piano-key.black[data-v-ca341683]{background:#333;color:#fff}.piano-cell[data-v-ca341683]{width:25px;height:24px;border:1px solid #eee;background-color:#fff;cursor:crosshair;box-sizing:border-box;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.piano-cell.active[data-v-ca341683]{background-color:#4fc3f7}.piano-cell.active.active-left[data-v-ca341683]{border-left:none}.piano-cell.active.active-right[data-v-ca341683]{border-right:none}.piano-cell.bar-line[data-v-ca341683]{border-right:2px solid rgba(0,0,0,.3);position:relative}.draw-btn-container[data-v-ca341683]{display:flex;justify-content:space-between;margin-top:15px}.draw-btn-container button[data-v-ca341683]{color:#fff;background-color:#000;border-radius:5px;padding:5px 10px;transition:all .1s ease-out;border:none;outline:none;touch-action:manipulation;-webkit-tap-highlight-color:rgba(255,255,255,.2);-webkit-user-select:none;user-select:none;min-width:fit-content;display:inline-flex;align-items:center;justify-content:center;gap:4px;position:relative;margin:2px}.button-content[data-v-ca341683]{display:inline-flex;align-items:center;gap:4px;position:relative}.button-spinner[data-v-ca341683]{width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top:2px solid white;border-radius:50%;animation:spin-ca341683 .6s linear infinite;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}@keyframes spin-ca341683{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.draw-btn-container button[data-v-ca341683]:hover,.draw-btn-container button[data-v-ca341683]:active,.draw-btn-container button.touch-active[data-v-ca341683]{color:#000;background-color:#fff;outline:solid 1px black;cursor:pointer;box-shadow:0 4px 8px #0000004d}.draw-btn-container button:hover .button-spinner[data-v-ca341683],.draw-btn-container button:active .button-spinner[data-v-ca341683],.draw-btn-container button.touch-active .button-spinner[data-v-ca341683]{border:2px solid rgba(0,0,0,.3);border-top:2px solid black}.draw-play-safe-btn-container button[data-v-ca341683]:not(:first-child),.draw-reset-close-btn-container button[data-v-ca341683]:not(:first-child){margin-left:5px}@media (max-width: 1650px){.piano-cell[data-v-ca341683]{width:22px}}@media (max-width: 1500px){.piano-cell[data-v-ca341683]{width:20px}}@media (max-width: 1400px){.piano-cell[data-v-ca341683]{width:15px}}@media (max-width: 1100px){.piano-cell[data-v-ca341683]{width:13px}}@media (max-width: 1000px){.piano-cell[data-v-ca341683]{width:10px}}@media (max-width: 750px){.piano-cell[data-v-ca341683]{width:7px}}@media (max-width: 550px){.piano-cell[data-v-ca341683]{width:6px}}.sequence-preview[data-v-cf4baef1]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;border-radius:4px;overflow:hidden;animation:fadeInPreview-cf4baef1 .6s ease-out}@keyframes fadeInPreview-cf4baef1{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.preview-svg[data-v-cf4baef1]{display:block;animation:fadeInChart-cf4baef1 .8s ease-out .1s both}@keyframes fadeInChart-cf4baef1{0%{opacity:0}to{opacity:1}}.empty-preview[data-v-cf4baef1]{width:60px;height:40px;display:flex;align-items:center;justify-content:center;animation:fadeInEmpty-cf4baef1 .5s ease-out}@keyframes fadeInEmpty-cf4baef1{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.empty-indicator[data-v-cf4baef1]{width:8px;height:8px;border:1px solid rgba(255,255,255,.3);border-radius:50%;animation:pulse-cf4baef1 2s ease-in-out infinite}@keyframes pulse-cf4baef1{0%,to{opacity:.3}50%{opacity:.7}}.square[data-v-6dba362b]{border-radius:10px;border:solid 1px var(--border-color);position:relative;box-shadow:0 4px 8px #0000001a;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.square[data-v-6dba362b]:hover{opacity:.6;cursor:pointer}.square[data-v-6dba362b]:active{opacity:.7}.loading-spinner[data-v-6dba362b]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;border:2px solid rgba(0,0,0,.1);border-left:2px solid #333;border-radius:50%;animation:spin-6dba362b 1s linear infinite}@keyframes spin-6dba362b{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.room-container[data-v-04b126d1]{border:solid 1px var(--border-color);border-radius:10px;padding:4px;background-color:var(--component-bg-color)}.grid-container[data-v-04b126d1]{display:flex;flex-direction:column;position:relative}.grid-row[data-v-04b126d1]{display:flex}.grid-cell[data-v-04b126d1]{position:relative;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--border-color);border-bottom:1px solid var(--border-color);touch-action:none;-webkit-tap-highlight-color:rgba(0,0,0,.1)}.formation-button-container[data-v-04b126d1]{position:absolute;transform:translate(-50%,-50%);z-index:15;pointer-events:auto}.formation-button[data-v-04b126d1]{width:25px;height:25px;border-radius:50%;background-color:#55f;color:#fff;font-weight:700;font-size:18px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 5px #0003;transition:all .1s ease-out;touch-action:manipulation;-webkit-tap-highlight-color:rgba(85,85,255,.3);-webkit-user-select:none;user-select:none}.formation-button[data-v-04b126d1]:hover,.formation-button[data-v-04b126d1]:active{background-color:#77f;transform:scale(1.15);box-shadow:0 4px 8px #0000004d}.formation-button.loading[data-v-04b126d1]{background-color:#77f;cursor:not-allowed;transform:scale(1.15);box-shadow:0 4px 8px #0000004d}.button-spinner[data-v-04b126d1]{width:12px;height:12px;border:2px solid rgba(255,255,255,.3);border-left:2px solid white;border-radius:50%;animation:spin-04b126d1 1s linear infinite}@keyframes spin-04b126d1{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.grid-cell.highlighted[data-v-04b126d1]{background-color:#90ee904d;border:2px solid rgb(34,139,34)}.drawing-canvas[data-v-04b126d1]{position:absolute;top:0;left:0;z-index:5;touch-action:none;-webkit-user-select:none;user-select:none}.formation-button-container[data-v-04b126d1]{z-index:15;pointer-events:auto}.popup-overlay[data-v-04b126d1]{position:absolute;top:0;left:0;width:100%;height:100%;background:#0006;display:flex;justify-content:center;align-items:center;z-index:100}.popup-content[data-v-04b126d1]{background:#fff;padding:20px 30px;border-radius:12px;box-shadow:0 4px 10px #0000004d;text-align:center}.popup-buttons[data-v-04b126d1]{display:flex;justify-content:center;margin-top:10px;gap:10px}.popup-buttons button[data-v-04b126d1]{padding:6px 14px;border:none;border-radius:6px;cursor:pointer;font-weight:700}.popup-buttons button[data-v-04b126d1]:first-child{background-color:#28a745;color:#fff}.popup-buttons button[data-v-04b126d1]:last-child{background-color:#dc3545;color:#fff}.loading-overlay[data-v-04b126d1]{position:absolute;top:0;left:0;width:100%;height:100%;background:#0000004d;display:flex;justify-content:center;align-items:center;z-index:50}.loading-spinner[data-v-04b126d1]{width:50px;height:50px;border:5px solid rgba(255,255,255,.3);border-top:5px solid white;border-radius:50%;animation:spin-loading-04b126d1 .8s linear infinite}@keyframes spin-loading-04b126d1{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.buffer-container[data-v-cd19f5a9]{padding-top:30px;padding-bottom:10px;position:relative;background-color:var(--component-bg-color);width:150px}.buffer-wrapper[data-v-cd19f5a9],.buffer-container[data-v-cd19f5a9]{border:solid 1px var(--border-color);border-radius:10px;flex-direction:column}.buffer-title[data-v-cd19f5a9]{position:absolute;top:-9px;left:5px;font-size:13px;font-weight:600;padding:0 6px;background-color:var(--component-bg-color);color:var(--text-color);opacity:.7}.room-row[data-v-cd19f5a9]{display:flex}@media (max-width: 1200px){.buffer-container[data-v-cd19f5a9]{width:120px}}@media (max-width: 1100px){.buffer-container[data-v-cd19f5a9]{width:100px}}@media (max-width: 768px){.buffer-wrapper[data-v-cd19f5a9]{flex-direction:row!important}.buffer-container[data-v-cd19f5a9]{width:auto;padding:25px 3px 10px}}.melody-container[data-v-3d9caba3]{padding-top:30px;padding-bottom:10px;position:relative;background-color:var(--component-bg-color)}.melody-wrapper[data-v-3d9caba3],.melody-container[data-v-3d9caba3]{border:solid 1px var(--border-color);border-radius:10px;flex-direction:column;position:relative}.melody-title[data-v-3d9caba3]{position:absolute;top:-8px;left:10px;font-size:13px;font-weight:600;color:var(--text-color);opacity:.7}.room-row[data-v-3d9caba3]{display:flex}@media (max-width: 1300px){.melody-container[data-v-3d9caba3]{width:1160px!important;margin:auto}}@media (max-width: 1200px){.melody-container[data-v-3d9caba3]{width:990px!important;margin:auto}}@media (max-width: 1100px){.melody-container[data-v-3d9caba3]{width:950px!important;margin:auto}}@media (max-width: 900px){.melody-container[data-v-3d9caba3]{width:700px!important;margin:auto;margin-top:0!important}}@media (max-width: 700px){.melody-container[data-v-3d9caba3]{width:600px!important;margin:auto}}@media (max-width: 600px){.melody-container[data-v-3d9caba3]{width:590px!important;margin:auto}}@media (max-width: 590px){.melody-container[data-v-3d9caba3]{width:500px!important;margin:auto}}@media (max-width: 500px){.melody-container[data-v-3d9caba3]{width:475px!important;margin:auto}}.melody-rewind[data-v-3d9caba3]{position:absolute;left:-150px;top:50%;transform:translateY(-50%)}.melody-rewind button[data-v-3d9caba3]{display:block;height:50px;width:50px;border-radius:50%;border:2px solid #6c7686}.melody-rewind button[data-v-3d9caba3]:hover{cursor:pointer;opacity:.7}.melody-rewind button i[data-v-3d9caba3]{color:#6c7686}.melody-play[data-v-3d9caba3]{position:absolute;left:-80px;top:50%;transform:translateY(-50%)}.melody-play button[data-v-3d9caba3]{display:block;height:50px;width:50px;border-radius:50%;border:2px solid #6c7686}.melody-play button[data-v-3d9caba3]:hover{cursor:pointer;opacity:.7}.melody-play button i[data-v-3d9caba3]{color:#6c7686}@media (max-width: 1300px){.melody-play[data-v-3d9caba3]{left:-80px}.melody-rewind[data-v-3d9caba3]{left:-150px}}@media (max-width: 1200px){.melody-play[data-v-3d9caba3]{left:-60px}.melody-rewind[data-v-3d9caba3]{left:-130px}}@media (max-width: 1100px){.melody-play[data-v-3d9caba3]{left:-60px}}@media (max-width: 900px){.melody-play[data-v-3d9caba3]{left:-55px}.melody-play button[data-v-3d9caba3]{height:45px;width:45px}}@media (max-width: 700px){.melody-play[data-v-3d9caba3]{left:50px;top:-28px;transform:none}.melody-play button[data-v-3d9caba3]{height:22px;width:22px;font-size:10px}.melody-play button i[data-v-3d9caba3]{font-size:10px}}@media (max-width: 500px){.melody-play[data-v-3d9caba3]{left:55px;top:-27px;transform:none}.melody-play button[data-v-3d9caba3]{height:18px;width:18px;display:flex;justify-content:center;align-items:center}.melody-play button i[data-v-3d9caba3]{font-size:8px;margin-left:2px}}.home-container[data-v-87b7520a]{display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.home-components-wrapper[data-v-87b7520a]{display:flex;margin-top:40px;width:80%;flex:1 0 auto}.action-buttons-btn-group[data-v-87b7520a]{height:100px;margin-bottom:20px}.action-buttons-left[data-v-87b7520a],.action-buttons-right[data-v-87b7520a]{margin-top:3px;display:flex;flex-direction:column}.action-buttons-left[data-v-87b7520a]{margin-right:30px}.action-buttons-right .action-buttons-btn-group[data-v-87b7520a]{display:flex;flex-direction:column;align-items:center;justify-content:center}.action-buttons-right .action-buttons-btn-group button[data-v-87b7520a]{height:25px;width:25px;border-radius:5px;transform:none;background-color:#fbfbfb;filter:brightness(.8);box-shadow:0 0 1px 1px #000;color:#000}.action-buttons-right .action-buttons-btn-group button[data-v-87b7520a]:hover{opacity:.7}.highlighted-create-mode[data-v-87b7520a]{box-shadow:0 0 2px 1px #000;filter:unset!important;transform:scale(1.1)!important}.toggle-buttons-row[data-v-87b7520a]{display:flex;gap:10px;justify-content:center;align-items:center}.action-buttons-right[data-v-87b7520a]{margin-left:30px}.action-buttons-left .action-buttons-btn-group[data-v-87b7520a]{display:flex;flex-direction:column;justify-content:flex-start}.action-buttons-left .action-buttons-btn-group button[data-v-87b7520a]{border:solid 1px var(--border-color);border-radius:5px;height:30px;width:150px;background-color:#fff;color:var(--text-color)}.action-buttons-btn-group button[data-v-87b7520a]:not(:first-child){margin-top:15px}.action-buttons-btn-group button[data-v-87b7520a]:disabled{opacity:.5;cursor:not-allowed}.melody-container[data-v-87b7520a]{width:1270px;margin-top:10px}.mode-slider[data-v-87b7520a]{display:flex;flex-direction:column;align-items:center;margin-top:20px}.mode-slider input[data-v-87b7520a]{display:none}.slider-label[data-v-87b7520a]{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#fff}.slider-track[data-v-87b7520a]{width:50px;height:24px;background-color:#ccc;border-radius:12px;position:relative;transition:background-color .3s ease;display:flex;align-items:center}.slider-thumb[data-v-87b7520a]{width:20px;height:20px;background-color:#fff;border-radius:50%;position:absolute;left:2px;transition:transform .3s ease;box-shadow:0 2px 4px #0003}.mode-slider input:checked+.slider-label .slider-track[data-v-87b7520a]{background-color:#ff6b6b}.mode-slider input:checked+.slider-label .slider-thumb[data-v-87b7520a]{transform:translate(26px)}.mode-slider input:not(:checked)+.slider-label .slider-track[data-v-87b7520a]{background-color:#4ebccd}.mode-text[data-v-87b7520a]{margin-top:8px;font-weight:500;text-transform:capitalize;font-size:13px;font-weight:700;color:var(--text-color)}.tooltip-wrapper[data-v-87b7520a]{position:relative;display:inline-block}.tooltip-text[data-v-87b7520a]{position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:8px;padding:6px 10px;background-color:#000000d9;color:#fff;font-size:12px;border-radius:4px;white-space:nowrap;z-index:1000;pointer-events:none}.tooltip-text[data-v-87b7520a]:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-top-color:#000000d9}.undo-redo-btn-text[data-v-87b7520a]{font-size:13px;font-weight:600;color:var(--text-color);opacity:.7}@media (max-width: 1400px){.melody-container[data-v-87b7520a]{width:1160px;margin-top:10px}.action-buttons-btn-group[data-v-87b7520a]{height:90px;margin-bottom:10px}}@media (max-width: 1200px){.action-buttons-left[data-v-87b7520a]{margin-right:30px!important}.action-buttons-right[data-v-87b7520a]{margin-left:30px!important}.action-buttons-left .action-buttons-btn-group button[data-v-87b7520a]{width:80px}.action-buttons-left .action-buttons-btn-group[data-v-87b7520a]{margin:auto}}@media (max-width: 768px){.home-components-wrapper[data-v-87b7520a]{flex-direction:row;flex-wrap:wrap;justify-content:center;width:100%}.home-components-wrapper[data-v-87b7520a]>:nth-child(2){order:1}.action-buttons-left[data-v-87b7520a]{order:2;margin:20px 10px 0 0!important;width:auto;flex:0 1 auto}.action-buttons-right[data-v-87b7520a]{order:3;margin:20px 0 0 10px!important;width:auto;flex:0 1 auto}.action-buttons-left .action-buttons-btn-group[data-v-87b7520a],.action-buttons-right .action-buttons-btn-group[data-v-87b7520a]{width:auto}.action-buttons-left .action-buttons-btn-group button[data-v-87b7520a]{width:auto;min-width:100px}}.header-container[data-v-df0576fb]{justify-content:space-between;border-bottom:1px solid black;height:5vh;background-color:var(--header-bg-color)}.header-container button[data-v-df0576fb]{background-color:transparent;color:#fff;font-weight:700}.room-btn-container[data-v-df0576fb]{margin-left:15px}.settings-btn-container[data-v-df0576fb]{margin-right:15px}