*{box-sizing:border-box;margin:0}body{color:#eee;background:#1a1a2e;justify-content:center;align-items:center;height:100dvh;font-family:system-ui,sans-serif;display:flex}#app{text-align:center}#note{-webkit-user-select:none;user-select:none;font-size:8rem;font-weight:700;line-height:1;transition:color .2s,transform .2s}#note.correct{color:#4ade80;transform:scale(1.1)}.detected-row{align-items:flex-end;gap:.25rem;margin-top:1.5rem;display:inline-flex}#detected{text-align:center;opacity:.5;width:5rem;font-size:2.5rem;transition:color .15s,opacity .15s}#detected.match{color:#4ade80;opacity:1}.volume-bar-spacer{width:4px}#volume-bar{opacity:.5;border:1px solid #444;border-radius:3px;flex-direction:column;justify-content:flex-end;width:4px;height:1.2rem;display:flex;overflow:hidden}#volume-fill{background:#eee;width:100%;transition:height 50ms}#string-label{opacity:.5;margin-bottom:.5rem;font-size:1.2rem}.config{text-align:center;margin-top:.5rem;margin-bottom:.5rem}.string-chips{justify-content:center;gap:.4rem;display:flex}.string-chip{color:#eee;cursor:pointer;opacity:.25;-webkit-user-select:none;user-select:none;background:0 0;border:1px solid #444;border-radius:1.4rem;justify-content:center;align-items:center;min-width:2.8rem;height:2.8rem;padding:0 .7rem;font-size:.75rem;transition:opacity .15s,border-color .15s;display:flex}.string-chip.active{opacity:1;border-color:#aaa}.string-chip-label{cursor:text}.string-chip-input{width:2rem;color:inherit;text-align:center;background:0 0;border:none;outline:none;padding:0;font-family:inherit;font-size:1rem}.config-content{flex-direction:column;align-items:center;display:flex}.config .input-group{margin-top:0;margin-bottom:.75rem}.config summary{opacity:.4;letter-spacing:-.03em;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:.3rem;margin-bottom:.75rem;font-size:.85rem;list-style:none;display:inline-flex}.config summary svg{transition:transform .15s}.config[open] summary svg{transform:rotate(180deg)}.input-group{flex-direction:column;align-items:flex-start;margin-top:2rem;display:inline-flex}.input-error{color:#f87171;margin-top:.2rem;font-size:.65rem;font-style:italic}#fret-label,#scale-label,#strings-label,#exercise-label{opacity:.4;letter-spacing:-.03em;margin-bottom:.1rem;font-size:.85rem}#fret-min-input,#fret-max-input,#scale-input{color:#eee;text-align:center;background:0 0;border:1px solid #444;border-radius:4px;padding:.4rem .8rem;font-size:1rem}#fret-min-input,#fret-max-input{width:3.5rem}#scale-input{width:8rem}.fret-range{align-items:center;gap:.3rem;display:flex}#exercise-select{color:#eee;cursor:pointer;background:0 0;border:1px solid #444;border-radius:4px;width:8rem;margin-top:0;padding:.4rem .8rem;font-size:1rem}#exercise-select option{background:#1a1a2e}#start{letter-spacing:.2rem;color:#eee;cursor:pointer;background:0 0;border:none;width:100vw;height:100dvh;font-size:2rem;position:fixed;inset:0}.spinner{border:3px solid #333;border-top-color:#eee;border-radius:50%;width:2rem;height:2rem;margin:auto;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}