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}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}:root{--blackKey:#2a2a2b;--whiteKey:#f1f1f1;--selectedKey:#077af5;--selectedBlock:#1d1d1d;--answerKey:#12c00c;--wrongKey:#b34949;--action:#0082ff;--actionHover:#077af5;--block:#f7f7f7;--controlFill:#f2f3f5;--controlFillHover:#e8eaed;--controlFocus:rgba(0,130,255,0.35);--shadow:#181818;--white:#fff;--unselected:var(--controlFill);--unselectedHover:var(--controlFillHover);--selected:var(--action);--selectedHover:var(--actionHover);--font:lighter 17px sans-serif;--font-family:"Montserrat",sans-serif;--opacity:.5;--radius:3px;--background:#fff}.body{margin:auto;position:relative;padding:10px;box-sizing:border-box;max-width:100%;overflow-x:hidden;color:#000;font:var(--font);font-family:var(--font-family)}.App-header,.body{background-color:var(--background)}.App-header{min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(10px + 2vmin);color:#fff}.keyboardContainer{width:min(100%,720px);max-width:100%;margin:auto;position:relative;overflow-x:auto;overflow-y:hidden;box-sizing:border-box;-webkit-overflow-scrolling:touch}.pianoKeys{--interval-key-slot:62px;--interval-key-width:calc(var(--interval-key-slot) - 4px);--interval-black-left:31px;background-color:var(--background);position:inherit;height:calc(var(--interval-key-slot)*2.35);padding:14px 0 2px;box-sizing:content-box}#results{max-width:100%;overflow-x:auto;overflow-y:visible;text-align:center}#results.resultsWithoutScoreBoard{display:flex;justify-content:center;margin:0 auto;width:100%}#results.resultsWithScoreBoard{display:grid;grid-template-columns:460px 200px;justify-content:start;margin-left:5%}.blackKeys,.whiteKeys{position:absolute;left:0;-webkit-user-select:none;user-select:none;cursor:pointer;display:flex}.whiteKeys p{text-align:center;font-size:15px;position:relative;color:#000;top:65px}.blackKeys{left:var(--interval-black-left)}.blackKey,.blackKeySpace,.whiteKey{border:1px solid #313131;position:relative;display:inline-block;width:var(--interval-key-width);border-radius:5px;margin:1px}.blackKey:active,.whiteKey:active{background:var(--selectedKey)}.whiteKey{background:var(--whiteKey);height:calc(var(--interval-key-slot)*1.9)}.blackKey{height:calc(var(--interval-key-slot)*0.94);background:var(--blackKey)}.blackKeySpace{height:0;opacity:0;z-index:-1}input,select{background:var(--controlFill);margin:5px;border:1px solid transparent;border-radius:var(--radius);font:var(--font);font-family:var(--font-family);max-width:calc(100vw - 32px);box-sizing:border-box}input:hover,select:hover{background:var(--controlFillHover)}button:focus,input:focus,select:focus,summary:focus-visible{outline:none;box-shadow:0 0 0 3px var(--controlFocus)}input{height:20px}select{min-height:32px;height:auto}input[type=range]{height:10px;width:75%}#feedback{position:relative;align-items:center;align-content:center;text-align:center;margin:auto;display:inline}.message{margin:8px;font-size:25px}input[type=checkbox]{height:20px;width:20px}#showAnswerSection,#showAttemptsSection,#showIntervalSection{display:inline-flex;margin:10px 5px 0}#showAnswerSection,.checkShowAnswer{width:76px;min-width:76px}#showAttemptsSection,.checkShowAttempts{width:92px;min-width:92px}#showIntervalSection,.checkShowInterval{width:76px;min-width:76px}.checkShowAnswer,.checkShowAttempts,.checkShowInterval{position:absolute;top:0;left:0;height:25px;border:1px solid transparent;background:var(--unselected);border-radius:var(--radius);color:#000}.checkbox-container input:checked~.checkShowAnswer,.checkbox-container input:checked~.checkShowAttempts,.checkbox-container input:checked~.checkShowInterval{background-color:var(--selected);border:1px solid transparent;color:var(--white);opacity:1}.checkShowAnswer:after{content:"Answer"}.checkShowAttempts:after{content:"Attempts"}.checkShowInterval:after{content:"Interval"}.checkShowAnswer:after,.checkShowAttempts:after,.checkShowInterval:after{position:absolute;top:2px;left:6px;font:lighter 18px sans-serif}.checkShowAnswer:hover,.checkShowAttempts:hover,.checkShowInterval:hover{background:var(--unselectedHover)}input:checked~.checkShowAnswer:hover,input:checked~.checkShowAttempts:hover,input:checked~.checkShowInterval:hover{background-color:var(--selectedHover)}input:checked~.checkShowAnswer:after,input:checked~.checkShowAttempts:after,input:checked~.checkShowInterval:after{display:block;opacity:1}.checkbox-container{display:block;position:relative;cursor:pointer;font-size:18px;-webkit-user-select:none;user-select:none;height:20px;margin:3px}.checkbox-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}#chordTypeC,#clefC,#diatonicRootContainer,#directionC,#intervalDirectionContainer,#notesC,#rangeC,#registerC,#scaleC,#startNoteC,#timingC{display:inline-block}#diatonicRootContainer{display:none}.controlsPanel{display:flex;flex-wrap:wrap;align-items:center;grid-gap:6px 8px;gap:6px 8px;margin-bottom:6px}.advancedControlsPanel,.primaryControls,.viewControlsPanel{display:flex;flex-wrap:wrap;align-items:center;grid-gap:4px;gap:4px}.advancedControls,.viewControls{position:relative;display:inline-block}.advancedControlsSummary,.viewControlsSummary{min-height:32px;border:1px solid transparent;border-radius:var(--radius);background:var(--controlFill);cursor:pointer;list-style:none;box-sizing:border-box}.advancedControlsSummary{padding:4px 28px 6px 8px}.viewControlsSummary{position:relative;width:34px;padding:4px 7px 6px}.advancedControlsSummary:hover,.viewControlsSummary:hover{background:var(--controlFillHover)}.advancedControlsSummary::-webkit-details-marker,.viewControlsSummary::-webkit-details-marker{display:none}.advancedControlsSummary:after{content:"";position:absolute;right:9px;top:16px;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid}.viewControlsIcon{display:block;width:18px;height:18px;margin-top:2px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.advancedControls[open] .advancedControlsSummary,.viewControls[open] .viewControlsSummary{background:var(--white);box-shadow:0 1px 3px 0 var(--shadow)}.advancedControlsPanel,.viewControlsPanel{position:absolute;z-index:8;top:calc(100% + 4px);right:0;border-radius:var(--radius);background:var(--white);box-shadow:0 2px 8px 0 var(--shadow)}.advancedControlsPanel,.viewControlsPanel{width:-webkit-max-content;width:max-content;max-width:calc(100vw - 20px);padding:8px}.viewControlsPanel{flex-wrap:nowrap}.viewControlsPanel #showAnswerSection,.viewControlsPanel #showAttemptsSection,.viewControlsPanel #showIntervalSection{height:25px;margin:0}.controlLabel{margin-left:5px}.qualityMenu{position:relative;display:inline-block;margin:3px;vertical-align:middle}.qualityMenuSummary{min-width:164px;padding:4px 28px 4px 8px;border:1px solid transparent;border-radius:var(--radius);background:var(--controlFill);cursor:pointer;list-style:none}.qualityMenuSummary:hover{background:var(--controlFillHover)}.qualityMenuSummary::-webkit-details-marker{display:none}.qualityMenuSummary:after{content:"";position:absolute;right:9px;top:50%;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid;transform:translateY(-35%)}.qualityMenu[open] .qualityMenuSummary{background:var(--white);box-shadow:0 1px 3px 0 var(--shadow)}.qualityMenuPanel{position:absolute;z-index:10;display:grid;grid-gap:6px;gap:6px;min-width:100%;margin:4px 0 0;padding:8px;border:0;border-radius:var(--radius);background:var(--white);box-shadow:0 2px 8px 0 var(--shadow)}.qualityOption{display:flex;align-items:center;grid-gap:6px;gap:6px;white-space:nowrap}.visuallyHidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}#notation{width:100%;max-width:100%;overflow:visible;text-align:center}button{color:var(--white);display:inline-block;cursor:pointer;background:var(--action);border:1px solid transparent;border-radius:var(--radius);margin:3px;font:var(--font);font-family:var(--font-family);padding:5px;height:35px;box-shadow:0 1px 3px 0 var(--shadow)}@media (max-width:520px){.body{padding:8px 4px}.keyboardContainer{width:100%}.whiteKeys p{top:calc(var(--interval-key-slot)*1.05);font-size:clamp(10px,3vw,14px)}select{width:100%}button{min-height:38px;height:auto}#feedback{display:block;text-align:left;margin:6px 4px}#showAnswerSection,#showAttemptsSection,#showIntervalSection{margin-top:8px}.controlsPanel{align-items:flex-start}.advancedControls,.primaryControls{width:100%}.primaryControls{display:grid;grid-template-columns:1fr;grid-gap:4px;gap:4px}.advancedControlsSummary{width:100%}.advancedControlsPanel,.viewControlsPanel{position:static;min-width:0;width:100%;box-sizing:border-box;margin-top:4px}.checkShowAnswer:after,.checkShowAttempts:after,.checkShowInterval:after{font-size:15px}}#results svg{transform-origin:center top;transform:scale(var(--interval-notation-scale,1.5));margin:0 auto;display:block;width:100px;max-width:100%;height:auto;overflow:visible}.loadingMessage{position:absolute;margin:auto;height:100vh;width:100vw;top:0;left:0;background:rgba(0,0,0,.5)}.loadingMessage p{position:relative;width:300px;height:50px;font:bolder 70px helvetica;color:#fff;top:120px;margin:auto;padding:40px;text-shadow:0 0 20px #000}.animation{animation-name:keyPress;animation-duration:.1s}@keyframes keyPress{0%{top:2px;left:2px}to{top:0;left:0}}#scoreBoard{display:grid;margin-top:25px;grid-template-columns:60px 120px 60px 95px 60px 75px}.scoreBoardName,.scoreBoardScore,.scoreTitle,.scoreTotal{font:bolder 10px sans-serif}.hide{display:none}.show{display:inherit}.red{color:red}.green{color:green}.black{color:#000}.blue{color:#00008b}.purple{color:purple}.scoreTitle{font-weight:bolder}