body{font-family:Arial,sans-serif;margin:0;padding:20px;background-color:#f5f5f5}#app{max-width:900px;margin:0 auto;background-color:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a}h1{color:#3498db;text-align:center}.description{text-align:center;margin-bottom:30px}table{width:100%;border-collapse:collapse;margin-top:20px}thead{background-color:#3498db;color:#fff}th,td{padding:12px;text-align:center;border:1px solid #ddd}tr:nth-child(2n){background-color:#f2f2f2}.song-title{text-align:center;font-weight:700;background-color:#f0f8ff;padding:10px;font-size:1.1em;border-bottom:2px solid #3498db}.play-button{background-color:#3498db;color:#fff;border:none;border-radius:4px;padding:8px 12px;cursor:pointer;transition:background-color .3s;min-width:80px}.play-button:hover{filter:brightness(90%);transform:scale(1.05)}.button-group{display:flex;flex-direction:column;gap:5px}td:nth-child(2) .play-button{background-color:#e74c3c}td:nth-child(3) .play-button{background-color:#f39c12}td:nth-child(4) .play-button{background-color:#2ecc71}td:nth-child(5) .play-button{background-color:#3498db}.hidden{display:none}@media (max-width: 768px){#app{padding:15px}th,td{padding:8px}.play-button{padding:8px;min-width:70px;font-size:.9em}}@media (max-width: 576px){body,#app{padding:10px}h1{font-size:1.6em}.description{font-size:.9em}.play-button{padding:10px;min-width:60px;margin-bottom:5px;font-size:1em}th,td{padding:10px 5px}}@media (max-width: 480px){thead{display:none}table,tbody,tr,td{display:block;border:none}.song-title{border:1px solid #ddd;border-radius:5px 5px 0 0;margin-top:20px}.notes-row td{margin-bottom:2px;text-align:left;padding:10px;position:relative;border:1px solid #ddd;border-top:none}.notes-row td:last-child{border-radius:0 0 5px 5px;margin-bottom:0}.notes-row td:before{content:attr(data-label);font-weight:700;display:block;margin-bottom:5px}.play-button,.button-group{width:100%;margin-top:5px}.button-group .play-button{margin-bottom:5px}.notes-row td:nth-child(2):before{color:#e74c3c}.notes-row td:nth-child(3):before{color:#f39c12}.notes-row td:nth-child(4):before{color:#2ecc71}.notes-row td:nth-child(5):before{color:#3498db}.notes-row td.alle-column:before{color:#555}}.filter-section{background-color:#f8f9fa;border-radius:8px;padding:15px;margin-bottom:20px;box-shadow:0 1px 3px #0000001a}.filter-heading{font-weight:700;margin-bottom:10px}.filter-options{display:flex;flex-wrap:wrap;gap:15px}.filter-option{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.filter-option input[type=checkbox]{margin-right:5px;cursor:pointer;width:18px;height:18px}.filter-label{font-weight:600;padding:3px 8px;border-radius:4px}.filter-label.soprano{color:#e74c3c}.filter-label.alto{color:#f39c12}.filter-label.tenor{color:#2ecc71}.filter-label.bass{color:#3498db}.filter-label.alle-filter{color:#6c757d}.settings-divider{border:0;height:1px;background-color:#e0e0e0;margin:20px 0}.setting-option{margin-bottom:15px}.setting-label{display:block;font-weight:500;margin-bottom:5px;color:#333}.range-slider-container{display:flex;align-items:center;gap:10px}.setting-input{padding:8px;border:1px solid #ccc;border-radius:4px;font-size:.9rem}.setting-input.setting-range-slider{flex-grow:1;width:auto;padding:0;height:20px}.range-slider-value{font-weight:500;color:#333;min-width:35px;text-align:right}.input-description{display:block;font-size:.8rem;color:#666;margin-top:3px}.voice-column.hidden,td.voice-column.hidden{display:none}@media (max-width: 576px){.filter-options{flex-direction:column;gap:10px}.filter-option{width:100%}}@media (max-width: 480px){.notes-row td.soprano,.notes-row td.alto,.notes-row td.tenor,.notes-row td.bass{display:block}.notes-row td.soprano.hidden,.notes-row td.alto.hidden,.notes-row td.tenor.hidden,.notes-row td.bass.hidden{display:none}}.search-section{margin-bottom:20px}.search-container{position:relative;display:flex;align-items:center;margin-bottom:10px}#song-search{flex:1;padding:12px 40px 12px 15px;border:2px solid #ddd;border-radius:30px;font-size:1rem;outline:none;transition:border-color .3s,box-shadow .3s}#song-search:focus{border-color:#3498db;box-shadow:0 0 0 3px #3498db40}.clear-search-btn{position:absolute;right:15px;background:none;border:none;font-size:1.5rem;color:#999;cursor:pointer;padding:0;opacity:0;transition:opacity .2s}.clear-search-btn.visible{opacity:1}.clear-search-btn:hover{color:#666}.search-results{margin-top:5px;color:#666;font-size:.9rem;height:20px}.song-hidden{display:none}.highlight-match{background-color:#fff3cd;padding:0 3px;border-radius:3px}@media (max-width: 576px){#song-search{padding:10px 35px 10px 12px;font-size:.9rem}.clear-search-btn{font-size:1.3rem;right:12px}}.play-button.playing{animation:playing-pulse .8s ease-in-out;filter:brightness(110%)}@keyframes playing-pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}td:nth-child(2) .play-button.playing{box-shadow:0 0 8px 2px #e74c3c80}td:nth-child(3) .play-button.playing{box-shadow:0 0 8px 2px #f39c1280}td:nth-child(4) .play-button.playing{box-shadow:0 0 8px 2px #2ecc7180}td:nth-child(5) .play-button.playing{box-shadow:0 0 8px 2px #3498db80}.alle-column .play-button{background-color:#6c757d}.alle-column .play-button.playing{box-shadow:0 0 8px 2px #6c757d80}.play-button:disabled{opacity:.7;cursor:wait}.section-header{display:flex;align-items:center;margin-bottom:10px}.section-header h3{margin:0;font-size:1rem;font-weight:600;color:#333}.filter-options{display:flex;flex-wrap:wrap;gap:10px}.filter-option{display:flex;align-items:center;cursor:pointer}.filter-label{margin-left:6px;font-weight:500}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@media (max-width: 767px){.section-header{padding:10px 12px}.section-content{padding:10px}.filter-options{gap:8px}}.app-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.app-header h1{margin:0}.filter-trigger-button{background:none;border:none;font-size:1.5rem;cursor:pointer;padding:.5rem;line-height:1}.filter-trigger-button svg{width:24px;height:24px;vertical-align:middle}.filter-trigger-button:hover{opacity:.7}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000;padding:1rem;box-sizing:border-box}.modal.hidden{display:none}.modal-content{background-color:#fff;padding:20px;border-radius:8px;box-shadow:0 4px 15px #0003;position:relative;max-width:500px;width:90%;max-height:90vh;overflow-y:auto}.modal-close-button{position:absolute;top:10px;right:15px;background:none;border:none;font-size:1.8rem;font-weight:700;cursor:pointer;line-height:1;padding:0;color:#333}.modal-close-button:hover{color:#000}.modal .filter-section{margin-top:1rem}.modal .filter-section .section-header h3{margin-top:0}