.error-boundary{padding:2rem;margin:2rem auto;max-width:800px;background-color:#fff4f4;border:1px solid #ffcdd2;border-radius:4px;box-shadow:0 2px 4px #0000001a}.error-boundary h2{color:#d32f2f;margin-top:0}.error-boundary details{margin:1rem 0;padding:1rem;background-color:#f8f8f8;border-radius:4px;border:1px solid #ddd}.error-boundary summary{cursor:pointer;font-weight:700;margin-bottom:.5rem}.error-boundary pre{white-space:pre-wrap;word-break:break-word;background-color:#f1f1f1;padding:.5rem;border-radius:4px;font-size:.85rem;max-height:300px;overflow:auto}.reload-button{background-color:var(--primary-color);color:#005baa;border:none;padding:.75rem 1.5rem;border-radius:6px;font-size:1rem;cursor:pointer;transition:background-color .3s ease}.error-reload-button:hover{background-color:#0d8aee}.file-upload-container{display:flex;flex-direction:column;gap:20px;padding:25px;border:2px dashed var(--primary-color, #00AEEF);border-radius:10px;background-color:var(--light-background, #e3f2fd);margin-bottom:30px;width:100%;max-width:1200px;margin-left:auto;margin-right:auto;box-shadow:0 3px 10px #0000000d}.file-upload-item{display:flex;flex-direction:column;width:100%;padding:15px;background-color:#ffffffb3;border-radius:8px;transition:all .2s ease}.file-upload-item:hover{background-color:#ffffffe6;box-shadow:0 2px 5px #0000000d}.file-upload-container label{font-weight:700;margin-right:10px;display:block;margin-bottom:10px;font-size:1.1rem;color:var(--text-color, #333)}.file-upload-container input[type=file]{padding:12px;border:1px solid #ddd;border-radius:4px;background-color:#fff;cursor:pointer;width:100%;box-sizing:border-box;transition:border-color .2s ease}.file-upload-container input[type=file]:hover{border-color:var(--primary-color, #00AEEF)}.file-upload-container input[type=file]:disabled{opacity:.6;cursor:not-allowed}.file-info{display:block;color:var(--secondary-color, #00796b);font-size:.9rem;margin-top:8px;background-color:var(--light-background, #e3f2fd);padding:5px 10px;border-radius:4px;font-weight:700}.instruments-toggles-container{margin-bottom:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:800px;min-width:300px;overflow:hidden;min-height:fit-content;margin-left:auto;margin-right:auto}.toggles-label{margin-bottom:10px;font-size:1rem;font-weight:700;display:flex;align-items:center;justify-content:center;color:#005baa}.toggles-label:after{content:"⟷";margin-left:8px;font-size:.9rem;opacity:.5}.instrument-toggles{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:100%;max-width:800px;padding:10px 0}.instrument-toggle{flex:0 1 auto;width:auto;min-width:90px;max-width:150px}.toggle-label{font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70px;color:#005baa}.instrument-toggles::-webkit-scrollbar{height:6px}.instrument-toggles::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.instrument-toggles::-webkit-scrollbar-thumb{background:#ccc;border-radius:10px}.instrument-toggles::-webkit-scrollbar-thumb:hover{background:#3498db}.no-instruments-message{margin:20px 0;padding:15px;color:#005baa;background-color:#fff3cd;border:1px solid #ffeeba;border-radius:5px;text-align:center}.restart-button{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fff;color:var(--primary-color, #00AEEF);border:2px solid var(--primary-color, #00AEEF);font-size:20px;cursor:pointer;transition:background .3s,color .3s,border-color .3s;outline:none;box-shadow:none;padding:0;margin-right:12px}.restart-button:hover{background:var(--primary-color, #00AEEF);color:#fff;border-color:var(--hover-color, #008FCC)}.restart-button:disabled{background:#f0f0f0;color:#aaa;border-color:#ccc;cursor:not-allowed}.toggle-switch{position:relative;display:inline-flex;align-items:center;cursor:pointer;padding:6px 10px;border-radius:50px;background-color:#edebeb;transition:all .3s ease;white-space:nowrap;height:36px;min-width:110px;justify-content:flex-start}.toggle-switch.active{background-color:#e6f4ff;border-color:#3498db}.toggle-switch input{opacity:0;width:0;height:0;position:absolute}.toggle-slider{position:relative;display:inline-block;width:36px;height:18px;background-color:#ccc;border-radius:34px;margin-right:10px;transition:all .3s ease}.toggle-switch.active .toggle-slider{background-color:#3498db}.toggle-slider:before{position:absolute;content:"";height:14px;width:14px;left:2px;bottom:2px;background-color:#fff;border-radius:50%;transition:all .3s ease}.toggle-switch.active .toggle-slider:before{transform:translate(18px)}.player-info-row{display:flex;flex-direction:row;gap:24px;align-items:center;width:100%;justify-content:space-evenly;font-family:inherit;font-size:.9rem;font-weight:500;color:#005baa;max-height:25px}.player-container{width:100%;padding-top:20px;background-color:#edebeb;box-shadow:0 4px 8px #0000001a;flex-grow:1;display:flex;flex-direction:column;border-radius:80px;max-height:fit-content}.player-controls{display:flex;flex-direction:column;align-items:center;gap:15px;margin-bottom:20px;width:100%}.play-button{width:48px;height:48px;display:flex;align-items:center;justify-content:center;text-align:center;vertical-align:middle;border-radius:50%;background:#fff;color:var(--primary-color, #00AEEF);border:2px solid var(--primary-color, #00AEEF);font-size:24px;cursor:pointer;transition:background .3s,color .3s,border-color .3s;outline:none;box-shadow:none;padding:0;line-height:1}.play-button .MuiSvgIcon-root,.play-button svg{display:block;margin:0 auto}.play-button .play-icon,.play-button .MuiSvgIcon-root[data-testid=PlayArrowIcon]{padding-left:2px}.play-button:hover{background:var(--primary-color, #00AEEF);color:#fff;border-color:var(--hover-color, #008FCC)}.play-button:disabled{background:#f0f0f0;color:#aaa;border-color:#ccc;cursor:not-allowed}.time-display{display:flex;align-items:center;justify-content:center;width:100%;max-width:500px;margin:0 auto;gap:10px}.time-slider{flex:1;height:10px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#ddd;border-radius:5px;outline:none;width:100%;max-width:800px;transition:background .2s;position:relative}.time-slider::-webkit-slider-runnable-track{height:10px;border-radius:5px;background:linear-gradient(to right,var(--primary-color, #00AEEF) 0%,var(--primary-color, #00AEEF) calc(var(--progress-percentage, 0) * 100%),#ddd calc(var(--progress-percentage, 0) * 100%),#ddd 100%)}.time-slider::-moz-range-track{height:10px;border-radius:5px;background:linear-gradient(to right,var(--primary-color, #00AEEF) 0%,var(--primary-color, #00AEEF) calc(var(--progress-percentage, 0) * 100%),#ddd calc(var(--progress-percentage, 0) * 100%),#ddd 100%)}.time-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--primary-color, #00AEEF);cursor:pointer;border:2px solid white;margin-top:-5px;box-shadow:0 2px 4px #0003;transition:transform .1s,background .1s}.time-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--primary-color, #00AEEF);cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0003;transition:transform .1s,background .1s}.time-slider:hover::-webkit-slider-thumb{transform:scale(1.2);background:var(--hover-color, #008FCC)}.time-slider:hover::-moz-range-thumb{transform:scale(1.2);background:var(--hover-color, #008FCC)}.time-slider:active::-webkit-slider-thumb{transform:scale(1.3);background:var(--hover-color, #008FCC)}.time-slider:active::-moz-range-thumb{transform:scale(1.3);background:var(--hover-color, #008FCC)}.visualizations{margin-top:20px}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#0009;z-index:100}.loading-spinner{width:50px;height:50px;border:5px solid var(--light-background, #e3f2fd);border-top:5px solid var(--primary-color, #00AEEF);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.chord-preview-container{display:flex;flex-direction:column;padding:16px 16px 12px;background-color:#fff;box-shadow:0 2px 4px #0000001a;width:100%;max-width:100%;margin:0 auto;overflow:hidden;position:relative;height:100%;background:#F0F6FC;border-radius:5px;--visible-bars: 4}.all-chords-row{display:flex;flex-direction:row;width:max-content;min-width:100%;flex-wrap:nowrap;margin-bottom:20px;height:100%;align-items:stretch}.bar-container{display:flex;flex-direction:row;position:relative;border-right:2px solid #ddd;justify-content:space-around;width:25%;min-width:25%;padding:5px;height:100%;align-items:stretch;flex-shrink:0}@keyframes shiftLeft{to{transform:translate(-25%)}}.has-previous-bar{animation:shiftLeft .5s forwards}@keyframes fadeOut{0%{opacity:1;background-color:#fff}75%{opacity:.5;background-color:#fff}to{opacity:0;background-color:#eee8aa}}.bar-container.fade-out-bar{animation:fadeOut .5s forwards}.bar-container:last-child{border-right:none}.bar-number{position:absolute;bottom:2px;left:0;right:0;font-size:.8rem;color:#666;text-align:center;font-weight:500}.beat-column{display:flex;flex-direction:column;align-items:center;flex:1;height:100%;justify-content:center}.chord-box{display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;width:100%;min-width:40px;height:100%;min-height:60px;border:1px solid #ccc;border-radius:4px;background-color:#fff;margin:0 1px;padding:0;overflow:hidden}.chord-name{font-size:1.2rem;font-weight:500;color:#005baa;flex:1;display:flex;align-items:center;justify-content:center;padding:4px}.beat-number{font-size:.8rem;color:#005baa;background-color:#c6d5eb;padding:4px 8px;font-weight:500;text-align:center;width:100%}.empty-chord .chord-name{color:#ccc}.current-chord{border-color:var(--hover-color, #008FCC);box-shadow:0 2px 8px #0003}.current-chord .chord-name{color:#005baa}.current-chord .beat-number{background-color:#005baa;color:#fff}.progress-bar-container{height:12px;width:100%;background-color:#eee;border-radius:6px;overflow:visible;margin-top:auto;position:relative;cursor:pointer;transition:background-color .2s ease}.progress-bar-container:hover,.progress-bar-container.dragging{background-color:#e0e0e0}.progress-bar-container.dragging{cursor:grabbing}.progress-bar-fill{height:100%;background-color:var(--primary-color, #00AEEF);border-radius:6px;position:absolute;top:0;left:0;bottom:0;will-change:width;pointer-events:none;box-shadow:0 0 4px #00aeef4d;transition:none!important}.progress-bar-indicator{position:absolute;height:18px;width:18px;background-color:var(--primary-color, #00AEEF);border:2px solid white;border-radius:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 5px #0000004d;z-index:2;transition:transform .1s ease}.progress-bar-container:hover .progress-bar-indicator,.progress-bar-container.dragging .progress-bar-indicator{transform:translate(-50%,-50%) scale(1.2)}.progress-time-tooltip{position:absolute;bottom:20px;padding:4px 8px;background-color:#000000b3;color:#fff;border-radius:4px;font-size:12px;transform:translate(-50%);pointer-events:none;white-space:nowrap;z-index:10;opacity:0;animation:fadeIn .2s forwards}.progress-time-tooltip:after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:rgba(0,0,0,.7) transparent transparent transparent}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (max-width: 768px){.chord-name{font-size:1rem}.beat-number{font-size:.7rem;padding:2px 4px}}@media (max-width: 480px){.chord-name{font-size:.9rem}.beat-number{font-size:.6rem;padding:2px 3px}}.chord-display-container{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;padding:8px;margin-top:10px;background-color:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;overflow:hidden;position:relative;max-width:1400px;margin-left:auto;margin-right:auto;box-sizing:border-box;--chord-width: 320px;--chord-gap: 20px;--chord-total-width: calc(var(--chord-width) + var(--chord-gap))}.chord-train-viewport{width:100%;height:100%;max-width:calc(4 * var(--chord-total-width));overflow:hidden;position:relative;margin:0 auto;display:flex;align-items:center}#bar-display{position:relative;width:100%;height:100%;padding:0 5px;overflow:hidden}.beat-element{display:flex;flex-direction:column;align-items:center;padding:10px;border-radius:8px;background-color:#f8f9fa;border:2px solid #dee2e6;transition:transform .15s cubic-bezier(.2,0,.1,1),background-color .15s linear,border-color .15s linear,box-shadow .15s linear;flex:0 0 auto;min-width:var(--chord-width);max-width:var(--chord-width);height:100%;position:relative;will-change:transform,background-color,border-color,box-shadow;overflow:hidden;justify-content:flex-start}.beat-element.current{background-color:#e6f4ff;border-color:var(--primary-color, #00AEEF);box-shadow:0 0 10px #00aeef80;transform:translateY(-5px) scale(1.03);z-index:1;transform-style:preserve-3d;backface-visibility:hidden;perspective:1000px;-webkit-font-smoothing:subpixel-antialiased}.beat-element.next{background-color:#f0f9ff;border-color:#a8d5ff;transition-duration:.15s}.chord-text{font-size:3.5rem;font-weight:700;margin-bottom:4px;color:#005baa;text-align:center;flex-shrink:0;background-color:#fff;width:100%;padding:0;border-radius:6px;box-shadow:0 1px 3px #0000001a;transition:background-color .3s ease,color .3s ease}.beat-element.current .chord-text{background-color:#005baa;color:#fff}.chord-diagrams-container{display:flex;flex-direction:column;justify-content:center;gap:8px;margin-top:5px;width:100%;height:100%;max-height:100%;flex:1;align-items:stretch;will-change:contents;contain:content;padding:0 10px;overflow:hidden;min-height:0}.chord-diagrams-row{display:flex;flex-direction:row;justify-content:center;align-items:stretch;gap:12px;width:100%;flex:1 1 0;min-height:0;max-height:100%;overflow:hidden}.chord-diagram{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex:1 1 0;min-height:0;max-height:100%;contain:layout style;overflow:hidden}.instrument-label{font-size:1rem;margin-bottom:5px;color:#005baa;font-weight:600;text-align:center;width:100%;flex-shrink:0}.chord-diagram img{width:100%;max-width:100%;height:auto;max-height:100%;flex:1;min-height:0;aspect-ratio:1 / 1;border:2px solid #ddd;border-radius:4px;object-fit:contain;background-color:#fff;padding:5px;box-shadow:0 1px 3px #0000001a;transition:transform .15s ease-out;will-change:transform;backface-visibility:hidden;transform:translateZ(0)}.chord-diagram img:hover{transform:scale(1.05);box-shadow:0 4px 8px #00000026}@media (max-width: 768px){.chord-display-container{--chord-width: 280px}.chord-text{font-size:3rem}.instrument-label{font-size:.9rem}.chord-train-viewport{max-width:calc(3 * var(--chord-total-width))}}@media (max-width: 480px){.chord-display-container{--chord-width: 200px}.beat-element{padding:8px}.instrument-label{font-size:.8rem}.chord-text{font-size:2.5rem}.chord-train-viewport{max-width:calc(3 * var(--chord-total-width))}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.chord-container{position:absolute;top:0;left:0;height:100%;margin:20px 0 10px;transform:translate(calc(var(--position, 0) * var(--chord-total-width)));transition:transform var(--animation-duration, .7s) ease;will-change:transform}.chord-container.previous-chord{animation:fadeOut var(--animation-duration, .7s) forwards}.no-chords-message{padding:20px;text-align:center;color:#005baa;font-size:1.2rem}.lyrics-display{font-size:1.2rem;line-height:1.5;text-align:center;background-color:var(--light-background, #e3f2fd);border-radius:8px;transition:all .3s ease;min-height:40px;display:flex;justify-content:center;align-items:center;width:100%;margin-left:auto;margin-right:auto;box-shadow:0 2px 5px #0000000d;margin-top:20px}.current-lyric{font-weight:500;animation:highlight .5s ease-in-out;font-size:1.3rem}.no-lyric{color:#888;font-style:italic}@keyframes highlight{0%{opacity:.5}to{opacity:1}}.main-content{display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden;flex:1}.content-section{margin-bottom:2rem}.main-container{width:70%;height:100vh;margin:0 auto;padding:15px;background-color:#fff;border-radius:12px;box-shadow:0 6px 18px #0000001a;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box}header{display:flex;align-items:center;gap:15px;margin-bottom:30px;padding-bottom:20px;border-bottom:2px solid var(--light-background, #e3f2fd)}header img{height:55px;width:auto}header h1{margin:0;color:var(--primary-color, #00AEEF);font-size:30px;font-weight:600}@font-face{font-family:Proxima Nova;src:url(/fonts/ProximaNova-Regular.otf) format("opentype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Proxima Nova;src:url("/fonts/Proxima Nova Bold.otf") format("opentype");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:Proxima Nova;src:url("/fonts/Proxima Nova Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Proxima Nova;src:url("/fonts/Proxima Nova Extrabold.otf") format("opentype");font-weight:800;font-style:normal;font-display:swap}@font-face{font-family:Proxima Nova;src:url("/fonts/Proxima Nova Black.otf") format("opentype");font-weight:900;font-style:normal;font-display:swap}:root{--primary-color: #00AEEF;--secondary-color: #00796b;--background-color: #f4f4f9;--text-color: #005BAA;--hover-color: #008FCC;--light-background: #e3f2fd;--light-hover: #bbdefb;--error-color: #d84315;--error-background: #fbe9e7}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;width:100%;overflow-x:hidden}body{font-family:Proxima Nova,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:16px;line-height:1.6;background-color:var(--background-color);color:var(--text-color)}#app{width:100%;height:100vh;display:flex;justify-content:center;overflow:hidden}label{font-weight:700;margin-right:10px}button{cursor:pointer}button:disabled{cursor:not-allowed}input,select{font-family:Proxima Nova,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}