.topnav{display:flex;align-items:center;background-color:#868e96;position:fixed;top:0;left:0;right:0;z-index:100;padding:0;margin:0}.topnav a{display:inline-block;color:#f2f2f2!important;text-align:center;padding:14px 16px;text-decoration:none;transition:background-color .3s;font-size:17px}.topnav a:hover{background-color:#555}.topnav a.active{background-color:#555;opacity:.7}.topnav .menu-icon{display:none;background:none;border:none;color:#f2f2f2;font-size:20px;padding:14px 16px;cursor:pointer;margin-left:auto}.topnav .menu-icon:hover{background-color:#555}@media screen and (max-width:680px){.topnav{flex-wrap:wrap}.topnav a:not(:first-child){display:none}.topnav .menu-icon{display:block}.topnav.responsive a{display:block;width:100%;text-align:left}.topnav.responsive .menu-icon{position:absolute;right:0;top:0}}.toggle-container{display:flex;align-items:center;justify-content:space-between;height:44px}.toggle-label{flex:1}.toggle-switch{position:relative;display:inline-block;width:60px;height:34px;margin:5px;flex-shrink:0}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s}.toggle-slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;transition:.4s}.toggle-slider.round{border-radius:34px}.toggle-slider.round:before{border-radius:50%}input:checked+.toggle-slider{background-color:#3fb0ac}input:focus+.toggle-slider{box-shadow:0 0 1px #3fb0ac}input:checked+.toggle-slider:before{transform:translate(26px)}.slider-container{margin-bottom:10px}.slider-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}.slider-label{font-weight:500}.slider-value{font-weight:600;color:#035eb6}.slider-input{width:100%;height:8px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#ddd;border-radius:4px;outline:none;cursor:pointer}.slider-input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;background:#035eb6;border-radius:50%;cursor:pointer;transition:background .2s}.slider-input::-webkit-slider-thumb:hover{background:#024484}.slider-input::-moz-range-thumb{width:20px;height:20px;background:#035eb6;border-radius:50%;cursor:pointer;border:none}.slider-input::-moz-range-thumb:hover{background:#024484}.accordion{border:1px solid #ddd;border-radius:4px;margin-bottom:8px;overflow:hidden}.accordion-header{display:flex;justify-content:space-between;align-items:center;width:100%;padding:12px 16px;background:#f7f7f7;border:none;cursor:pointer;text-align:left;font-size:1rem;color:#212529;transition:background .2s}.accordion-header:hover{background:#eee}.accordion-title{font-weight:500}.accordion-icon{font-size:1.25rem;font-weight:700;color:#666}.accordion-content{max-height:0;overflow:hidden;transition:max-height .3s ease-out}.accordion.open .accordion-content{max-height:1000px;transition:max-height .5s ease-in}.accordion-inner{padding:16px;background:#fff}.multiselect{position:relative;display:inline-block;min-width:200px}.multiselect-trigger{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px 12px;background:#fff;border:1px solid #ccc;border-radius:4px;cursor:pointer;font-size:14px;text-align:left;color:#212529}.multiselect-trigger:hover:not(:disabled){border-color:#999}.multiselect-trigger:disabled,.multiselect-trigger.multiselect-disabled{background:#f5f5f5;color:#999;cursor:not-allowed;border-color:#ddd}.multiselect-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.multiselect-arrow{margin-left:8px;font-size:10px;color:#666}.multiselect-dropdown{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 8px #0000001a;z-index:50;max-height:300px;overflow-y:auto}.multiselect-actions{display:flex;gap:8px;padding:8px;border-bottom:1px solid #eee}.multiselect-actions button{flex:1;padding:4px 8px;font-size:12px;background:#f5f5f5;border:1px solid #ddd;border-radius:3px;cursor:pointer;color:#212529}.multiselect-actions button:hover{background:#eee}.multiselect-options{padding:4px 0}.multiselect-option{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;transition:background .15s;color:#212529}.multiselect-option:hover{background:#f5f5f5}.multiselect-option input[type=checkbox]{width:16px;height:16px;cursor:pointer}.metronome-container{justify-content:center;display:flex;align-items:center;top:8px;position:fixed;width:100%;z-index:2;pointer-events:none;background:none!important}.met-beat{width:20px;height:20px;border-radius:50%;background:#d3d3d3;display:inline-block;margin:7px;transition:all .1s ease}.met-beat.active{background:#cf6766;box-shadow:0 0 10px #cf6766}.measure-counter{color:#fff;opacity:.75;padding-left:5px;padding-top:1px;text-shadow:0 0 4px rgba(0,0,0,.5)}.chord-display{margin-top:10px}.chord{display:inline-block;color:#000;font-size:1.5rem;font-weight:500;height:52px;width:128px;text-align:left;padding-top:5px;border-left:1px solid #868e96;padding-left:7px;letter-spacing:-1.5px;margin-top:9px;margin-bottom:9px;transition:background-color .2s ease}.chord.highlighted{background-color:#faef96}.chord.last-in-group{border-right:5px solid #000}@media screen and (max-width:680px){.chord-display{margin-left:-8px;margin-right:-8px}.chord{font-size:1.2rem;font-weight:400;width:84px;height:38px;border-left:.5px solid #868e96;padding-left:3px;letter-spacing:-1.8px;margin-top:6px;margin-bottom:6px}.chord.last-in-group{border-right:3px solid #000}}@media screen and (max-width:321px){.chord{font-size:1rem;width:74px}}.chords-main{margin-bottom:60px;margin-top:60px}.chords-main h2{margin-bottom:20px}.playing-area{position:fixed;top:0;left:0;right:0;bottom:0;background:#f8f8f8;cursor:pointer;overflow-y:auto;padding:10px 15px;display:flex;flex-direction:column}.playing-area .chord-display{flex:1;min-height:0}.pause-toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%);background:#000000bf;color:#fff;padding:12px 24px;border-radius:8px;font-size:.95rem;pointer-events:none;animation:fadeInOut 2.5s ease-in-out forwards}@keyframes fadeInOut{0%{opacity:0;transform:translate(-50%) translateY(10px)}15%{opacity:1;transform:translate(-50%) translateY(0)}70%{opacity:1}to{opacity:0}}.info-alert{background:#f8f9fa;border:1px solid #ddd;border-radius:4px;padding:12px 16px;margin-bottom:16px}.options-panel{margin-bottom:20px}.reset-link{background:none;border:none;padding:0;font:inherit;color:#035eb6;text-decoration:underline;cursor:pointer}.reset-link:hover{color:#02376b}.option-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px}.option-row>span{min-width:150px}.option-row .multiselect{flex:1;min-width:200px}.custom-pattern-section{margin-top:15px}.custom-pattern-section>span{display:block;margin-bottom:5px;font-weight:500}.custom-pattern-help{font-size:.85rem;color:#666;margin:0 0 10px}.chord-select-container{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px}.chord-note-button{width:71px;height:46px;margin:2px;color:#f5f1f1e6;background-color:#004085a1;border-color:#21252966;border-width:1px;font-size:larger;border-radius:4px;cursor:pointer;transition:all .15s ease}.chord-note-button:hover{background-color:#004085d9;transform:scale(1.02)}.chord-note-button:active{transform:scale(.98)}.pattern-builder{display:flex;align-items:center;gap:8px;margin-bottom:12px;min-height:44px}.add-pattern-button{width:38px;height:38px;background-color:#3aa753;color:#fff;font-size:1.5rem;font-weight:700;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s ease}.add-pattern-button:hover:not(:disabled){background-color:#2d8140}.add-pattern-button:disabled{background-color:#ccc;cursor:not-allowed}.clear-pattern-button{width:32px;height:32px;background-color:#ce2f2f;color:#fff;font-size:1.25rem;font-weight:700;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s ease}.clear-pattern-button:hover{background-color:#a42626}.active-pattern-display{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 12px;background:#f5f5f5;border:1px dashed #ccc;border-radius:4px;min-height:38px}.active-pattern-display .placeholder{color:#999;font-size:.9rem;font-style:italic}.active-pattern-item{background:#035eb6;color:#fff;padding:4px 10px;border-radius:4px;font-weight:500;font-size:.95rem}.user-patterns-list{margin-top:12px;padding-top:12px;border-top:1px solid #eee}.user-patterns-label{display:block;font-size:.9rem;color:#666;margin-bottom:8px}.user-pattern-item{display:flex;align-items:center;gap:8px;margin-bottom:6px}.remove-pattern-button{width:28px;height:28px;background-color:#ce2f2f;color:#fff;font-size:1.1rem;font-weight:700;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s ease}.remove-pattern-button:hover{background-color:#a42626}.pattern-name{background:#e9ecef;padding:4px 10px;border-radius:4px;font-size:.9rem}.control-button{width:140px;height:36px;margin:5px}.fixed-footer{position:fixed;height:50px;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;box-shadow:0 -3px 7px -2px #999;background:#d3d3d3b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:50}@media screen and (max-width:680px){.chords-main h2{font-size:1.5rem}.option-row{flex-direction:column;align-items:flex-start}.option-row>span{min-width:auto}.option-row .multiselect{width:100%}.chord-note-button{width:60px;height:40px;font-size:1rem}}.about-main{margin-bottom:50px;margin-top:60px;max-width:800px}.about-main h2{margin-top:30px;margin-bottom:15px}.about-main h2:first-child{margin-top:0}.about-main p{line-height:1.7;margin-bottom:15px}.about-main blockquote{background:#f9f9f9;border-left:10px solid #ccc;margin:1.5em 0;padding:.5em 1em;font-style:italic}.about-main blockquote p{display:inline;margin:0}.about-main a{color:#035eb6;text-decoration:underline}.about-main a:hover{color:#02376b}@media screen and (max-width:680px){.about-main h2{font-size:1.5rem}}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f8f8f8;color:#212529}.main-content{padding:0 15px}body.is-playing .topnav{display:none}body.is-playing .main-content{padding-top:0}a{color:#212529;text-decoration:none}a:hover{color:#434b53}.loader{position:absolute;left:50%;top:50%;z-index:1;width:50px;height:50px;margin:-25px 0 0 -25px;animation:spin 1s linear infinite;border:5px solid #f3f3f3;border-top:5px solid #555;border-radius:50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.btn{display:inline-block;font-weight:400;text-align:center;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;user-select:none;border:1px solid transparent;padding:.375rem .75rem;font-size:1rem;line-height:1.5;border-radius:.25rem;cursor:pointer;transition:all .15s ease-in-out}.btn:disabled{opacity:.65;cursor:not-allowed}.btn-primary{color:#fff;background-color:#035eb6;border-color:#035eb6}.btn-primary:hover:not(:disabled){background-color:#024484;border-color:#024484}