.harmonic-info .row{display:flex;flex-flow:nowrap;border-bottom:1px solid #ccc}.harmonic-info .row>div{flex:1 1 auto;padding:10px;text-align:center}.harmonic-info .row>div:not(:last-child){border-right:1px solid #ccc}.harmonic-details{font-size:.9rem;text-transform:initial;text-align:left}.harmonic-interval{white-space:nowrap}button{background-color:#fff;border:1px solid #cccccc;border-radius:5px;padding:6px 12px;text-align:center;font-family:inherit;font-size:.9rem;cursor:pointer}button.active{background-color:#eee}.notation{background:#fff;margin:10px;display:flex;justify-content:center;align-items:center}.notation>svg{max-width:100%}.harmonic{background-color:#fff;flex:0 0 240px;width:240px;border-radius:8px;box-shadow:0 2px 4px #0000001a}@media(max-width:520px){.harmonic{flex:1 1 100%;width:100%;max-width:100%}}.keyboard{height:100px;margin:10px 0;display:flex;width:fit-content;max-width:100%;overflow-x:auto;position:relative;background:#fff;box-shadow:0 2px 4px #0000001a}.keyboard-key{cursor:pointer;display:block;flex-basis:auto;flex-grow:0;flex-shrink:0;flex-wrap:nowrap;border:1px solid #000;padding:5px;vertical-align:bottom;border-radius:0;width:14px}.keyboard-key+.keyboard-key{border-left:0}.keyboard-key.black{border-right:0;border-left:0;background:#000;height:60px;margin-right:-8px;margin-left:-8px;z-index:1;width:6px}.keyboard-key.open-string{background:#ffdfaa}.keyboard-key:active{background:#dae1eb;outline:none}.keyboard-key.active{background:#acbccf;outline:none}.keyboard-key.black:active{background:#536f92}.keyboard-key.black.active{background:#304d74}.keyboard-key.open-string.active{background:#ffedd0}.error-message{color:red}form{margin:10px 0}input,select{background:#fff;font-size:inherit;font-family:inherit;margin:5px 0 5px 5px;padding:6px 8px;border:1px solid #ccc;border-radius:4px;max-width:200px}@media(min-width:760px){input,select{padding:6px 10px}}.harmonics-wrapper{display:flex;flex-flow:wrap;align-content:center;align-items:flex-start;justify-content:left;margin-bottom:10px;gap:10px}.harmonics-list{margin:10px 0}.sounding-note{font-family:Lora,serif;font-size:1.2rem;margin:20px 0 30px;text-align:center}.app{display:flex;flex-direction:column;flex:1}.info-footnote{margin-top:auto;padding-top:30px;font-size:.85em;color:#666;line-height:1.5}.info-marker{color:#999;font-weight:500}.info-footnote .info-marker{margin-right:.25em}.sounding-note .info-marker{margin-left:.1em}