@font-face{font-family:primeicons;font-display:block;src:url(/assets/primeicons-DMOk5skT.eot);src:url(/assets/primeicons-DMOk5skT.eot?#iefix) format("embedded-opentype"),url(/assets/primeicons-C6QP2o4f.woff2) format("woff2"),url(/assets/primeicons-WjwUDZjB.woff) format("woff"),url(/assets/primeicons-MpK4pl85.ttf) format("truetype"),url(/assets/primeicons-Dr5RGzOO.svg?#primeicons) format("svg");font-weight:400;font-style:normal}.pi{font-family:primeicons;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;display:inline-block;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.pi:before{--webkit-backface-visibility:hidden;backface-visibility:hidden}.pi-fw{width:1.28571429em;text-align:center}.pi-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}@media(prefers-reduced-motion:reduce){.pi-spin{-webkit-animation-delay:-1ms;animation-delay:-1ms;-webkit-animation-duration:1ms;animation-duration:1ms;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s}}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.pi-folder-plus:before{content:""}.pi-receipt:before{content:""}.pi-asterisk:before{content:""}.pi-face-smile:before{content:""}.pi-pinterest:before{content:""}.pi-expand:before{content:""}.pi-pen-to-square:before{content:""}.pi-wave-pulse:before{content:""}.pi-turkish-lira:before{content:""}.pi-spinner-dotted:before{content:""}.pi-crown:before{content:""}.pi-pause-circle:before{content:""}.pi-warehouse:before{content:""}.pi-objects-column:before{content:""}.pi-clipboard:before{content:""}.pi-play-circle:before{content:""}.pi-venus:before{content:""}.pi-cart-minus:before{content:""}.pi-file-plus:before{content:""}.pi-microchip:before{content:""}.pi-twitch:before{content:""}.pi-building-columns:before{content:""}.pi-file-check:before{content:""}.pi-microchip-ai:before{content:""}.pi-trophy:before{content:""}.pi-barcode:before{content:""}.pi-file-arrow-up:before{content:""}.pi-mars:before{content:""}.pi-tiktok:before{content:""}.pi-arrow-up-right-and-arrow-down-left-from-center:before{content:""}.pi-ethereum:before{content:""}.pi-list-check:before{content:""}.pi-thumbtack:before{content:""}.pi-arrow-down-left-and-arrow-up-right-to-center:before{content:""}.pi-equals:before{content:""}.pi-lightbulb:before{content:""}.pi-star-half:before{content:""}.pi-address-book:before{content:""}.pi-chart-scatter:before{content:""}.pi-indian-rupee:before{content:""}.pi-star-half-fill:before{content:""}.pi-cart-arrow-down:before{content:""}.pi-calendar-clock:before{content:""}.pi-sort-up-fill:before{content:""}.pi-sparkles:before{content:""}.pi-bullseye:before{content:""}.pi-sort-down-fill:before{content:""}.pi-graduation-cap:before{content:""}.pi-hammer:before{content:""}.pi-bell-slash:before{content:""}.pi-gauge:before{content:""}.pi-shop:before{content:""}.pi-headphones:before{content:""}.pi-eraser:before{content:""}.pi-stopwatch:before{content:""}.pi-verified:before{content:""}.pi-delete-left:before{content:""}.pi-hourglass:before{content:""}.pi-truck:before{content:""}.pi-wrench:before{content:""}.pi-microphone:before{content:""}.pi-megaphone:before{content:""}.pi-arrow-right-arrow-left:before{content:""}.pi-bitcoin:before{content:""}.pi-file-edit:before{content:""}.pi-language:before{content:""}.pi-file-export:before{content:""}.pi-file-import:before{content:""}.pi-file-word:before{content:""}.pi-gift:before{content:""}.pi-cart-plus:before{content:""}.pi-thumbs-down-fill:before{content:""}.pi-thumbs-up-fill:before{content:""}.pi-arrows-alt:before{content:""}.pi-calculator:before{content:""}.pi-sort-alt-slash:before{content:""}.pi-arrows-h:before{content:""}.pi-arrows-v:before{content:""}.pi-pound:before{content:""}.pi-prime:before{content:""}.pi-chart-pie:before{content:""}.pi-reddit:before{content:""}.pi-code:before{content:""}.pi-sync:before{content:""}.pi-shopping-bag:before{content:""}.pi-server:before{content:""}.pi-database:before{content:""}.pi-hashtag:before{content:""}.pi-bookmark-fill:before{content:""}.pi-filter-fill:before{content:""}.pi-heart-fill:before{content:""}.pi-flag-fill:before{content:""}.pi-circle:before{content:""}.pi-circle-fill:before{content:""}.pi-bolt:before{content:""}.pi-history:before{content:""}.pi-box:before{content:""}.pi-at:before{content:""}.pi-arrow-up-right:before{content:""}.pi-arrow-up-left:before{content:""}.pi-arrow-down-left:before{content:""}.pi-arrow-down-right:before{content:""}.pi-telegram:before{content:""}.pi-stop-circle:before{content:""}.pi-stop:before{content:""}.pi-whatsapp:before{content:""}.pi-building:before{content:""}.pi-qrcode:before{content:""}.pi-car:before{content:""}.pi-instagram:before{content:""}.pi-linkedin:before{content:""}.pi-send:before{content:""}.pi-slack:before{content:""}.pi-sun:before{content:""}.pi-moon:before{content:""}.pi-vimeo:before{content:""}.pi-youtube:before{content:""}.pi-flag:before{content:""}.pi-wallet:before{content:""}.pi-map:before{content:""}.pi-link:before{content:""}.pi-credit-card:before{content:""}.pi-discord:before{content:""}.pi-percentage:before{content:""}.pi-euro:before{content:""}.pi-book:before{content:""}.pi-shield:before{content:""}.pi-paypal:before{content:""}.pi-amazon:before{content:""}.pi-phone:before{content:""}.pi-filter-slash:before{content:""}.pi-facebook:before{content:""}.pi-github:before{content:""}.pi-twitter:before{content:""}.pi-step-backward-alt:before{content:""}.pi-step-forward-alt:before{content:""}.pi-forward:before{content:""}.pi-backward:before{content:""}.pi-fast-backward:before{content:""}.pi-fast-forward:before{content:""}.pi-pause:before{content:""}.pi-play:before{content:""}.pi-compass:before{content:""}.pi-id-card:before{content:""}.pi-ticket:before{content:""}.pi-file-o:before{content:""}.pi-reply:before{content:""}.pi-directions-alt:before{content:""}.pi-directions:before{content:""}.pi-thumbs-up:before{content:""}.pi-thumbs-down:before{content:""}.pi-sort-numeric-down-alt:before{content:""}.pi-sort-numeric-up-alt:before{content:""}.pi-sort-alpha-down-alt:before{content:""}.pi-sort-alpha-up-alt:before{content:""}.pi-sort-numeric-down:before{content:""}.pi-sort-numeric-up:before{content:""}.pi-sort-alpha-down:before{content:""}.pi-sort-alpha-up:before{content:""}.pi-sort-alt:before{content:""}.pi-sort-amount-up:before{content:""}.pi-sort-amount-down:before{content:""}.pi-sort-amount-down-alt:before{content:""}.pi-sort-amount-up-alt:before{content:""}.pi-palette:before{content:""}.pi-undo:before{content:""}.pi-desktop:before{content:""}.pi-sliders-v:before{content:""}.pi-sliders-h:before{content:""}.pi-search-plus:before{content:""}.pi-search-minus:before{content:""}.pi-file-excel:before{content:""}.pi-file-pdf:before{content:""}.pi-check-square:before{content:""}.pi-chart-line:before{content:""}.pi-user-edit:before{content:""}.pi-exclamation-circle:before{content:""}.pi-android:before{content:""}.pi-google:before{content:""}.pi-apple:before{content:""}.pi-microsoft:before{content:""}.pi-heart:before{content:""}.pi-mobile:before{content:""}.pi-tablet:before{content:""}.pi-key:before{content:""}.pi-shopping-cart:before{content:""}.pi-comments:before{content:""}.pi-comment:before{content:""}.pi-briefcase:before{content:""}.pi-bell:before{content:""}.pi-paperclip:before{content:""}.pi-share-alt:before{content:""}.pi-envelope:before{content:""}.pi-volume-down:before{content:""}.pi-volume-up:before{content:""}.pi-volume-off:before{content:""}.pi-eject:before{content:""}.pi-money-bill:before{content:""}.pi-images:before{content:""}.pi-image:before{content:""}.pi-sign-in:before{content:""}.pi-sign-out:before{content:""}.pi-wifi:before{content:""}.pi-sitemap:before{content:""}.pi-chart-bar:before{content:""}.pi-camera:before{content:""}.pi-dollar:before{content:""}.pi-lock-open:before{content:""}.pi-table:before{content:""}.pi-map-marker:before{content:""}.pi-list:before{content:""}.pi-eye-slash:before{content:""}.pi-eye:before{content:""}.pi-folder-open:before{content:""}.pi-folder:before{content:""}.pi-video:before{content:""}.pi-inbox:before{content:""}.pi-lock:before{content:""}.pi-unlock:before{content:""}.pi-tags:before{content:""}.pi-tag:before{content:""}.pi-power-off:before{content:""}.pi-save:before{content:""}.pi-question-circle:before{content:""}.pi-question:before{content:""}.pi-copy:before{content:""}.pi-file:before{content:""}.pi-clone:before{content:""}.pi-calendar-times:before{content:""}.pi-calendar-minus:before{content:""}.pi-calendar-plus:before{content:""}.pi-ellipsis-v:before{content:""}.pi-ellipsis-h:before{content:""}.pi-bookmark:before{content:""}.pi-globe:before{content:""}.pi-replay:before{content:""}.pi-filter:before{content:""}.pi-print:before{content:""}.pi-align-right:before{content:""}.pi-align-left:before{content:""}.pi-align-center:before{content:""}.pi-align-justify:before{content:""}.pi-cog:before{content:""}.pi-cloud-download:before{content:""}.pi-cloud-upload:before{content:""}.pi-cloud:before{content:""}.pi-pencil:before{content:""}.pi-users:before{content:""}.pi-clock:before{content:""}.pi-user-minus:before{content:""}.pi-user-plus:before{content:""}.pi-trash:before{content:""}.pi-external-link:before{content:""}.pi-window-maximize:before{content:""}.pi-window-minimize:before{content:""}.pi-refresh:before{content:""}.pi-user:before{content:""}.pi-exclamation-triangle:before{content:""}.pi-calendar:before{content:""}.pi-chevron-circle-left:before{content:""}.pi-chevron-circle-down:before{content:""}.pi-chevron-circle-right:before{content:""}.pi-chevron-circle-up:before{content:""}.pi-angle-double-down:before{content:""}.pi-angle-double-left:before{content:""}.pi-angle-double-right:before{content:""}.pi-angle-double-up:before{content:""}.pi-angle-down:before{content:""}.pi-angle-left:before{content:""}.pi-angle-right:before{content:""}.pi-angle-up:before{content:""}.pi-upload:before{content:""}.pi-download:before{content:""}.pi-ban:before{content:""}.pi-star-fill:before{content:""}.pi-star:before{content:""}.pi-chevron-left:before{content:""}.pi-chevron-right:before{content:""}.pi-chevron-down:before{content:""}.pi-chevron-up:before{content:""}.pi-caret-left:before{content:""}.pi-caret-right:before{content:""}.pi-caret-down:before{content:""}.pi-caret-up:before{content:""}.pi-search:before{content:""}.pi-check:before{content:""}.pi-check-circle:before{content:""}.pi-times:before{content:""}.pi-times-circle:before{content:""}.pi-plus:before{content:""}.pi-plus-circle:before{content:""}.pi-minus:before{content:""}.pi-minus-circle:before{content:""}.pi-circle-on:before{content:""}.pi-circle-off:before{content:""}.pi-sort-down:before{content:""}.pi-sort-up:before{content:""}.pi-sort:before{content:""}.pi-step-backward:before{content:""}.pi-step-forward:before{content:""}.pi-th-large:before{content:""}.pi-arrow-down:before{content:""}.pi-arrow-left:before{content:""}.pi-arrow-right:before{content:""}.pi-arrow-up:before{content:""}.pi-bars:before{content:""}.pi-arrow-circle-down:before{content:""}.pi-arrow-circle-left:before{content:""}.pi-arrow-circle-right:before{content:""}.pi-arrow-circle-up:before{content:""}.pi-info:before{content:""}.pi-info-circle:before{content:""}.pi-home:before{content:""}.pi-spinner:before{content:""}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}#app{min-height:100vh}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}}.virtual-keyboard-container[data-v-e8d1eddc]{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:2px solid #ddd;padding:1rem;box-shadow:0 -4px 6px #0000001a;z-index:1000}.keyboard-header[data-v-e8d1eddc]{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.keyboard-header h3[data-v-e8d1eddc]{margin:0;font-size:1rem;color:#333}.keyboard[data-v-e8d1eddc]{display:flex;justify-content:center;align-items:flex-end;height:180px;position:relative;-webkit-user-select:none;user-select:none;gap:2px;padding:0 2rem;transition:opacity .3s ease}.keyboard.disabled[data-v-e8d1eddc]{opacity:.4;pointer-events:none}.key[data-v-e8d1eddc]{position:relative;cursor:pointer;transition:all .05s ease;display:flex;align-items:flex-end;justify-content:center;padding-bottom:.5rem;border-radius:0 0 4px 4px}.key.white[data-v-e8d1eddc]{width:40px;height:140px;background:#fff;border:1px solid #333;z-index:1}.key.black[data-v-e8d1eddc]{width:28px;height:90px;background:#333;border:1px solid #000;z-index:2;margin:0 -15px}.key.white[data-v-e8d1eddc]:hover{background:#f0f0f0}.key.black[data-v-e8d1eddc]:hover{background:#555}.key.white.active[data-v-e8d1eddc]{background:#3b82f6;transform:translateY(2px)}.key.black.active[data-v-e8d1eddc]{background:#1e40af;transform:translateY(2px)}.key-label[data-v-e8d1eddc]{font-size:.7rem;font-weight:500;pointer-events:none}.key.white .key-label[data-v-e8d1eddc]{color:#666}.key.black .key-label[data-v-e8d1eddc]{color:#fff}.key.active .key-label[data-v-e8d1eddc]{color:#fff;font-weight:700}.keyboard-info[data-v-e8d1eddc]{text-align:center;margin-top:.5rem;color:#666}.keyboard-info .disabled-message[data-v-e8d1eddc]{color:#f59e0b;font-weight:600}@media(max-width:768px){.keyboard[data-v-e8d1eddc]{height:120px;padding:0 .5rem}.key.white[data-v-e8d1eddc]{width:30px;height:100px}.key.black[data-v-e8d1eddc]{width:20px;height:65px;margin:0 -11px}}.metronome-card[data-v-9a8a475e]{max-width:400px}.metronome-header[data-v-9a8a475e]{display:flex;align-items:center;gap:.5rem}.metronome-content[data-v-9a8a475e]{display:flex;flex-direction:column;gap:1.5rem}.bpm-section[data-v-9a8a475e]{display:flex;flex-direction:column;gap:1rem}.bpm-display[data-v-9a8a475e]{text-align:center;padding:1rem;background:var(--surface-50);border-radius:8px}.bpm-value[data-v-9a8a475e]{font-size:3rem;font-weight:700;color:var(--primary-color);line-height:1}.bpm-label[data-v-9a8a475e]{font-size:.9rem;color:var(--text-color-secondary);margin-top:.25rem}.bpm-buttons[data-v-9a8a475e]{display:flex;justify-content:center;gap:1rem;align-items:center}.bpm-button-group[data-v-9a8a475e]{display:flex;flex-direction:column;align-items:center;gap:.25rem}.button-label[data-v-9a8a475e]{font-size:.75rem;color:var(--text-color-secondary);font-weight:600}.button-label.small[data-v-9a8a475e]{font-size:.7rem}.bpm-presets[data-v-9a8a475e]{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}.tap-tempo-section[data-v-9a8a475e]{display:flex;flex-direction:column;align-items:center;gap:.5rem}.tap-button[data-v-9a8a475e]{width:100%}.tap-hint[data-v-9a8a475e]{color:var(--text-color-secondary);font-style:italic}.beat-indicators[data-v-9a8a475e]{display:flex;justify-content:center;gap:.75rem;padding:1rem 0}.beat-dot[data-v-9a8a475e]{width:20px;height:20px;border-radius:50%;background:var(--surface-300);transition:all .1s ease}.beat-dot.active[data-v-9a8a475e]{background:var(--primary-color);transform:scale(1.3);box-shadow:0 0 10px var(--primary-color)}.beat-dot.accent.active[data-v-9a8a475e]{background:var(--orange-500);box-shadow:0 0 10px var(--orange-500)}.time-signature-control[data-v-9a8a475e]{display:flex;flex-direction:column;gap:.5rem}.time-signature-control label[data-v-9a8a475e]{font-weight:600;color:var(--text-color)}.button-group[data-v-9a8a475e]{display:flex;gap:.5rem;flex-wrap:wrap}.metronome-controls[data-v-9a8a475e]{display:flex;justify-content:center;padding-top:.5rem}.play-stop-button[data-v-9a8a475e]{min-width:150px}@media(prefers-color-scheme:light){.bpm-display[data-v-9a8a475e]{background:var(--surface-100)}}.sight-reading-container[data-v-e4c74a2d]{max-width:900px;margin:0 auto;padding-bottom:2rem}.exercise-header[data-v-e4c74a2d]{display:flex;align-items:center;padding:1rem;gap:1rem;border-bottom:1px solid var(--surface-border)}.melody-selector[data-v-e4c74a2d]{margin-bottom:1.5rem;padding:1rem;background:var(--surface-50);border-radius:8px}.melody-selector label[data-v-e4c74a2d]{display:block;margin-bottom:.5rem;font-weight:600;color:var(--text-color)}.exercise-header h2[data-v-e4c74a2d]{margin:0;flex:1;text-align:center}.spacer[data-v-e4c74a2d]{width:40px}.instructions[data-v-e4c74a2d]{background:var(--surface-50);padding:1.5rem;border-radius:8px;margin-bottom:2rem}.instructions h3[data-v-e4c74a2d]{margin-top:0;color:var(--primary-color)}.instructions ul[data-v-e4c74a2d]{margin-bottom:0}.instructions li[data-v-e4c74a2d]{margin-bottom:.5rem}.progress-section[data-v-e4c74a2d]{margin-bottom:1.5rem}.progress-info[data-v-e4c74a2d]{display:flex;justify-content:space-between;margin-bottom:.5rem;font-weight:600}.progress-bar-container[data-v-e4c74a2d]{position:relative}.progress-value[data-v-e4c74a2d]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-weight:700;font-size:.9rem;color:#fff;pointer-events:none;padding:.25rem .5rem;background:#0009;border-radius:4px}.notation-container[data-v-e4c74a2d]{display:flex;justify-content:center;margin:2rem 0;padding:1rem;background:#fff;border-radius:8px;border:2px solid var(--surface-border)}.notation[data-v-e4c74a2d]{min-height:350px}.current-note-info[data-v-e4c74a2d]{text-align:center;font-size:1.2rem;margin:1rem 0;padding:1rem;background:var(--surface-100);border-radius:8px}.current-note-info strong[data-v-e4c74a2d]{color:var(--primary-color);font-size:1.5rem}.current-note-info .played-note[data-v-e4c74a2d]{opacity:.4;text-decoration:line-through}.current-note-info .group-progress[data-v-e4c74a2d]{font-size:.9rem;color:var(--text-color-secondary);margin-top:.5rem;font-weight:400}.exercise-controls[data-v-e4c74a2d]{display:flex;justify-content:center;gap:1rem;margin-top:2rem}.success-message[data-v-e4c74a2d]{text-align:center;padding:2rem;background:var(--green-50);border:2px solid var(--green-500);border-radius:8px;margin-top:2rem}.success-message i[data-v-e4c74a2d]{font-size:3rem;color:var(--green-500)}.success-message h3[data-v-e4c74a2d]{color:var(--green-700);margin:1rem 0}.success-message p[data-v-e4c74a2d]{font-size:1.2rem;font-weight:600;color:var(--green-600);margin-bottom:1rem}@media(prefers-color-scheme:light){.instructions[data-v-e4c74a2d]{background:var(--surface-100)}.notation-container[data-v-e4c74a2d]{background:#fff}}.abc-playground-container[data-v-fde146d5]{max-width:900px;margin:0 auto;padding-bottom:2rem}.playground-header[data-v-fde146d5]{display:flex;align-items:center;padding:1rem;gap:1rem;border-bottom:1px solid var(--surface-border)}.playground-header h2[data-v-fde146d5]{margin:0;flex:1;text-align:center}.spacer[data-v-fde146d5]{width:40px}.playground-content[data-v-fde146d5]{display:flex;flex-direction:column;gap:1.5rem}.instructions[data-v-fde146d5]{background:var(--surface-50);padding:1.5rem;border-radius:8px}.instructions h3[data-v-fde146d5]{margin-top:0;color:var(--primary-color)}.instructions ul[data-v-fde146d5]{margin-bottom:0}.instructions li[data-v-fde146d5]{margin-bottom:.5rem}.input-section[data-v-fde146d5]{display:flex;flex-direction:column;gap:.5rem}.input-section label[data-v-fde146d5]{font-weight:600;color:var(--text-color)}.abc-textarea[data-v-fde146d5]{font-family:Courier New,monospace;font-size:.95rem;width:100%}.controls[data-v-fde146d5]{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}.playback-controls[data-v-fde146d5]{display:flex;gap:.5rem}.bpm-control[data-v-fde146d5]{display:flex;flex-direction:column;gap:.5rem;min-width:200px}.bpm-control label[data-v-fde146d5]{font-size:.9rem;font-weight:600;color:var(--text-color)}.bpm-slider[data-v-fde146d5]{width:100%}.notation-container[data-v-fde146d5]{display:flex;justify-content:center;margin:2rem 0;padding:2rem;background:#fff;border-radius:8px;border:2px solid var(--surface-border);overflow-x:auto;min-height:250px}.notation[data-v-fde146d5]{width:100%}.notation[data-v-fde146d5] svg{width:100%;height:auto;display:block}.notation[data-v-fde146d5] svg path{fill:#000;stroke:#000}.notation[data-v-fde146d5] svg text{fill:#000}.notation[data-v-fde146d5] svg line{stroke:#000}.notation[data-v-fde146d5] svg path[fill="#3b82f6"]{fill:#3b82f6!important;stroke:#3b82f6!important}.notation[data-v-fde146d5] svg ellipse[fill="#3b82f6"]{fill:#3b82f6!important;stroke:#3b82f6!important}.notation[data-v-fde146d5] .abcjs-highlight{fill:#3b82f6!important;stroke:#3b82f6!important}.notation[data-v-fde146d5] .abcjs-highlight path{fill:#3b82f6!important;stroke:#3b82f6!important}.notation[data-v-fde146d5] .abcjs-highlight ellipse{fill:#3b82f6!important;stroke:#3b82f6!important}@media(prefers-color-scheme:light){.instructions[data-v-fde146d5]{background:var(--surface-100)}.notation-container[data-v-fde146d5]{background:#fff}}.hanon-exercises[data-v-06c934a8]{max-width:1200px;margin:0 auto;padding:2rem}.header-with-close[data-v-06c934a8]{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}h1[data-v-06c934a8]{color:#2c3e50;margin:0}.close-button[data-v-06c934a8]{padding:.5rem 1rem;background:#f8f9fa;border:1px solid #dee2e6;border-radius:6px;color:#495057;font-size:.95rem;cursor:pointer;transition:all .2s}.close-button[data-v-06c934a8]:hover{background:#e9ecef;border-color:#adb5bd}.exercise-info[data-v-06c934a8]{background:#f8f9fa;padding:1.5rem;border-radius:8px;margin-bottom:2rem}.exercise-info .description[data-v-06c934a8]{margin:0;color:#495057;line-height:1.6}.controls[data-v-06c934a8]{background:#fff;padding:1.5rem;border-radius:8px;box-shadow:0 2px 4px #0000001a;margin-bottom:2rem}.control-group[data-v-06c934a8]{margin-bottom:1.5rem}.control-group label[data-v-06c934a8]{display:block;margin-bottom:.5rem;font-weight:500;color:#495057}.control-group input[type=range][data-v-06c934a8]{width:100%;max-width:400px}.control-group select[data-v-06c934a8]{width:100%;max-width:400px;padding:.5rem;border:1px solid #dee2e6;border-radius:6px;font-size:1rem;color:#495057;background:#fff;cursor:pointer}.button-group[data-v-06c934a8]{display:flex;gap:1rem}.primary-button[data-v-06c934a8],.secondary-button[data-v-06c934a8]{padding:.75rem 2rem;border:none;border-radius:6px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s}.primary-button[data-v-06c934a8]{background:#007bff;color:#fff}.primary-button[data-v-06c934a8]:hover:not(:disabled){background:#0056b3}.primary-button[data-v-06c934a8]:disabled{background:#6c757d;cursor:not-allowed;opacity:.6}.secondary-button[data-v-06c934a8]{background:#6c757d;color:#fff}.secondary-button[data-v-06c934a8]:hover:not(:disabled){background:#545b62}.secondary-button[data-v-06c934a8]:disabled{opacity:.4;cursor:not-allowed}.notation-container[data-v-06c934a8]{background:#fff;padding:2rem;border-radius:8px;box-shadow:0 2px 4px #0000001a;margin-bottom:2rem;overflow-x:auto}.notation[data-v-06c934a8]{min-height:200px}.practice-tips[data-v-06c934a8]{background:#e7f3ff;padding:1.5rem;border-radius:8px;border-left:4px solid #007bff}.practice-tips h3[data-v-06c934a8]{margin-top:0;color:#2c3e50}.practice-tips ul[data-v-06c934a8]{margin:0;padding-left:1.5rem}.practice-tips li[data-v-06c934a8]{margin-bottom:.5rem;color:#495057;line-height:1.6}@media(max-width:768px){.hanon-exercises[data-v-06c934a8],.notation-container[data-v-06c934a8]{padding:1rem}.button-group[data-v-06c934a8]{flex-direction:column}.primary-button[data-v-06c934a8],.secondary-button[data-v-06c934a8]{width:100%}}header[data-v-f9a8620d]{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background:var(--primary-color);color:#fff;margin-bottom:2rem}h1[data-v-f9a8620d]{margin:0;font-size:1.8rem}.header-controls[data-v-f9a8620d]{display:flex;align-items:center;gap:1.5rem}.midi-status[data-v-f9a8620d]{display:flex;align-items:center;gap:.5rem;font-size:.9rem}.audio-controls[data-v-f9a8620d]{display:flex;align-items:center;gap:.5rem}.status-indicator[data-v-f9a8620d]{width:12px;height:12px;border-radius:50%;background:#ef4444}.status-indicator.connected[data-v-f9a8620d]{background:#22c55e;animation:pulse-f9a8620d 2s infinite}@keyframes pulse-f9a8620d{0%,to{opacity:1}50%{opacity:.5}}main[data-v-f9a8620d]{max-width:1400px;margin:0 auto;padding:0 2rem 2rem;padding-bottom:340px}.main-content[data-v-f9a8620d]{display:grid;grid-template-columns:1fr 400px;gap:2rem;align-items:start}.left-column[data-v-f9a8620d]{min-width:0}.right-column[data-v-f9a8620d]{position:sticky;top:2rem}.exercises-grid[data-v-f9a8620d]{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;margin-top:2rem}@media(max-width:1024px){.main-content[data-v-f9a8620d]{grid-template-columns:1fr}.right-column[data-v-f9a8620d]{position:static}}.exercise-card[data-v-f9a8620d]{height:100%}