.top-bar{position:sticky;top:0;left:0;width:100%;z-index:1000;background-color:#f8f9fa;padding:10px 20px;border-bottom:1px solid #dee2e6;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between}.top-bar .nav-links{list-style:none;padding:0;margin:0;display:flex;flex-shrink:0}.top-bar li{margin-right:20px}.top-bar a{text-decoration:none;color:#007bff;font-weight:500;padding:5px 0}.top-bar li.active a{color:#343a40;border-bottom:2px solid #343a40}.top-bar a:hover{color:#0056b3}.sheet-selector{display:flex;align-items:center;position:absolute;left:50%;transform:translate(-50%)}.sheet-selector label{margin-right:10px;font-weight:500}.sheet-selector select{padding:6px 12px;border:1px solid #ced4da;border-radius:4px;background-color:#fff;max-width:180px;font-size:14px}.sheet-selector select:focus{border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem #007bff40}.zoom-controls{display:flex;align-items:center;margin-left:auto;flex-shrink:0}.zoom-controls button{background-color:#f8f9fa;border:1px solid #ced4da;width:24px;height:24px;padding:0;font-size:13px;display:flex;align-items:center;justify-content:center;cursor:pointer}.zoom-controls button.zout{border-right:none;border-radius:4px 0 0 4px}.zoom-controls button.zin{border-left:none;border-radius:0 4px 4px 0}.zoom-controls button:hover:not(:disabled){background-color:#e9ecef}.zoom-controls button:disabled{opacity:.5;cursor:not-allowed}.zoom-controls span{font-size:14px;min-width:50px;text-align:center}.top-bar .about-button{background:none;border:none;color:#000;font-weight:500;padding:5px 0;cursor:pointer;font-size:16px;font-family:inherit}.top-bar .about-button:hover{color:#0056b3}.modal-overlay{position:fixed;inset:0;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000;padding:20px}.modal-content{background-color:#fff;border-radius:8px;max-width:800px;width:90%;max-height:80vh;overflow-y:auto;position:relative;padding:20px;box-shadow:0 4px 8px #0003;margin:auto}.close-button{position:absolute;top:10px;right:15px;font-size:24px;border:none;background:transparent;cursor:pointer;color:#333;z-index:1}.modal-body{padding-top:10px;overflow-y:auto}.modal-body h1{font-size:24px;margin-bottom:16px;color:#333}.modal-body h2{font-size:18px;margin-top:20px;margin-bottom:10px;color:#444}.modal-body p{line-height:1.5;margin-bottom:16px;color:#555}.modal-body ul{padding-left:20px;margin-bottom:16px}.modal-body li{margin-bottom:8px;line-height:1.4;color:#555}@media (max-height: 600px){.modal-content{max-height:85vh;padding:15px}.modal-body h1{font-size:20px;margin-bottom:12px}.modal-body h2{font-size:16px;margin-top:15px;margin-bottom:8px}}@media (max-width: 480px){.modal-content{width:95%;padding:15px 12px}.modal-body{padding-top:5px}.modal-body ul{padding-left:15px}.modal-body li{margin-bottom:6px}.close-button{top:5px;right:10px}}.sheet-music-container{margin-top:20px;border:1px solid #ccc;padding:10px;background-color:#fff;position:relative}.osmd-render-area{width:100%;min-height:200px;overflow-x:auto;background-color:#fff}.osmd-render-area svg{display:block;margin:0 auto;max-width:100%;height:auto}.osmd-controls{display:flex;justify-content:center;align-items:center;gap:10px;margin-bottom:15px;padding:5px;background-color:#f0f0f0;border-radius:5px}.osmd-controls button{padding:5px 10px}.osmd-controls span{min-width:50px;text-align:center;font-weight:700;color:#333}.osmd-controls label{margin-left:15px;font-weight:700;color:#333}.osmd-controls input[type=number]{padding:4px 8px;border:1px solid #ccc;border-radius:4px;width:60px;margin-left:5px;text-align:right}.osmd-controls button.clear-highlight{margin-left:5px;padding:5px 8px}.error-message{padding:20px;margin:20px auto;max-width:80%;background-color:#fff8f8;border:1px solid #ffcdd2;border-radius:6px;color:#d32f2f;text-align:center}.error-message p{margin:8px 0}.loading-indicator{padding:20px;margin:20px auto;max-width:80%;text-align:center;color:#666;font-style:italic;background-color:#f9f9f9;border:1px solid #eee;border-radius:6px;animation:fadeIn .3s ease-in}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.highlight-overlay{position:absolute;background-color:#ffd70033;border:1px solid rgba(255,215,0,.5);z-index:0;pointer-events:none;transition:all .1s ease-out}.no-sheet-message{padding:20px;margin:20px auto;max-width:80%;text-align:center;color:#666;font-style:italic}.bottom-bar{position:fixed;bottom:0;left:0;width:100%;background-color:#f8f8f8;border-top:1px solid #e7e7e7;padding:8px 15px;display:flex;justify-content:center;align-items:center;gap:20px;z-index:1000;box-sizing:border-box;user-select:none}.controls-section{display:flex;align-items:center;gap:8px;transition:opacity .2s ease-out}.controls-section button{padding:4px 8px;cursor:pointer;border:1px solid #e0e0e0;background:#fff;border-radius:6px;transition:border-color .2s,box-shadow .2s}.controls-section button:focus,.controls-section button:hover{border-color:#bdbdbd;box-shadow:0 1px 4px #0000000a}.controls-section span{min-width:35px;text-align:center}#audio-progress-bar{user-select:none}#audio-bars-label{font-family:inherit;font-size:1rem;padding:2px 10px;color:#333;background:#f5f5f5;border-radius:5px;min-width:36px;display:inline-block;text-align:center;letter-spacing:.5px}#bar-select-bottom{font-family:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;padding:2px 10px;color:#333;background:#ccc;border-radius:5px;width:48px;font-size:14px;display:inline-block;text-align:center;letter-spacing:.5px;border:none;outline:none}.playback-disabled-notice{display:flex;align-items:center;padding:4px 8px;color:#888;background-color:#f5f5f5;border-radius:6px;border:1px solid #e0e0e0}.playback-disabled-notice span{opacity:.6;cursor:not-allowed}.playback-disabled-message{padding:6px 12px;margin-right:8px;color:#666;background-color:#f5f5f5;border-radius:6px;border:1px solid #e0e0e0;font-size:14px;display:inline-block}.loading-message{padding:6px 12px;margin-right:8px;color:#555;background-color:#f0f7ff;border-radius:6px;border:1px solid #d0e2ff;font-size:14px;display:inline-block;animation:pulse 1.5s infinite ease-in-out}@keyframes pulse{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}.transition-loading{position:relative;opacity:.8}.inline-loading-indicator{display:inline-flex;align-items:center;justify-content:center;margin-left:8px;position:absolute;right:-16px;top:50%;transform:translateY(-50%)}.loading-dot{width:8px;height:8px;background-color:#3498db;border-radius:50%;animation:bounce 1.2s infinite ease-in-out}@keyframes bounce{0%,to{transform:scale(.6);opacity:.6}50%{transform:scale(1);opacity:1}}.controls-section{transition:opacity .2s ease-out}#audio-inline-controls{display:inline-flex;align-items:center;gap:0px;color:#213547}#audio-play-pause-btn,#audio-stop-btn{min-width:28px;padding:4px;font-size:1rem}#audio-play-pause-btn{border-radius:4px 0 0 4px;border-right:none}#audio-stop-btn{border-radius:0 4px 4px 0;border-left:none}#audio-progress-bar{flex:1;min-width:120px;margin:0 16px;cursor:pointer;background:#ddd;height:16px;border-radius:3px;position:relative}#audio-progress-fill{position:absolute;left:0;top:0;height:100%;background:#6cf;border-radius:3px 0 0 3px}#audio-progress-indicator{position:absolute;width:16px;height:16px;background-color:#3498db;border-radius:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 4px #0000004d;z-index:2;pointer-events:none;will-change:left}#audio-time-label{text-align:right;font-size:12px;font-family:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;padding:2px 8px;border-radius:6px;color:#213547;background:#eee}@media screen and (max-width: 480px){#audio-time-label{display:none}#audio-progress-bar{margin:0 12px}}#audio-bars-label{text-align:right;font-size:12px;font-family:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;white-space:nowrap;overflow:hidden;display:inline-block;padding:2px 8px;border-radius:6px;color:#213547;background:#fff12e;min-width:unset}#audio-tracks-popup-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0000004d;z-index:1000}#audio-tracks-popup{background:#fff;border-radius:8px;max-width:400px;margin:60px auto;padding:24px;position:relative;box-shadow:0 4px 24px #0003}#audio-tracks-popup-close{position:absolute;top:8px;right:8px;font-size:1.2rem;background:transparent;border:none;cursor:pointer}#audio-tracks-popup-title{margin-top:0}#audio-tracks-loading{text-align:center;padding:16px 0}#audio-tracks-list{display:flex;flex-direction:column;gap:12px}[id^=audio-track-row-]{display:flex;align-items:center;gap:8px}[id^=audio-track-label-]{width:80px}[id^=audio-track-volume-]{flex:1}[id^=audio-track-mute-],[id^=audio-track-solo-]{margin-left:4px}:root{color-scheme:light;background-color:#fff;color:#213547}body{background:#fff;color:#213547}@media (prefers-color-scheme: dark){:root{color-scheme:light;background-color:#fff;color:#213547}body{background:#fff;color:#213547}}.audio-player.disabled button{opacity:.5;cursor:not-allowed;background-color:#f5f5f5;color:#888}.audio-controls{display:flex;align-items:center;gap:10px;margin-bottom:10px}.audio-progress-bar{position:relative;height:16px;background-color:#ddd;border-radius:8px;flex-grow:1;cursor:pointer;overflow:visible}.audio-progress-indicator{position:absolute;width:16px;height:16px;background-color:#3498db;border-radius:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 4px #0000004d;z-index:2;pointer-events:none;will-change:left}.audio-time{min-width:100px;text-align:right;font-family:monospace;font-size:14px}.bar-controls{display:flex;align-items:center;gap:10px;margin-top:10px}@keyframes blink{0%,to{opacity:1}50%{opacity:.5}}.audio-player-wrapper button:disabled{background-color:#95a5a6;cursor:not-allowed}#audio-mixer-btn{min-width:28px;padding:4px 8px;font-size:.9rem;margin-left:8px;background-color:#4caf50;border-radius:4px}#audio-mixer-btn:hover{background-color:#45a049}.bottom-bar-container{position:relative;width:100%;display:flex;justify-content:center}.no-indicator{opacity:0}.loading-message-invisible{display:none}.fallback-container{width:100%;display:flex;justify-content:center}.bottom-bar-container>*{transition:opacity .15s ease;width:100%}.bottom-bar-container .fallback-container,.bottom-bar-container .suspense-content{position:absolute;left:0;right:0;display:flex;justify-content:center}.bottom-bar-container .fallback-container{z-index:1}.sheets-page{width:100%}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.App{display:flex;flex-direction:column;min-height:100vh}.content{padding:0 20px 60px;flex-grow:1;text-align:left}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;background-color:#fff;color:#213547;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#747bff}body{margin:0;min-width:320px;min-height:100vh;background:#fff;color:#213547}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#f9f9f9;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}