:root{--c-background: #1F304A;--c-primary-dark: #14232A;--c-primary-light: #FBE697;--c-selected: #516888;--c-correct: #40663F;--c-incorrect: #802729}:root{font-family:Inter,Avenir,Helvetica,Arial,sans-serif;font-size:16px;line-height:24px;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}body{color:var(--c-primary-light);background-color:var(--c-background);margin:0;display:flex;flex-direction:column;place-items:center;min-width:320px;min-height:100vh}#root{max-width:1280px;margin:0 auto;text-align:center}.page{display:flex;flex-direction:column;min-height:100vh}.page-body{place-content:center;place-items:center;min-width:320px;display:flex;flex:auto}footer{margin-top:auto;margin-bottom:.5em;text-align:center}a{color:var(--c-primary-light)}h1{font-size:3.2em;line-height:1.1}.toggle{cursor:pointer;display:inline-block}.toggle-switch{display:inline-block;background:var(--c-selected);border-radius:1em;width:2.75em;height:1.5em;position:relative;vertical-align:middle;transition:background .25s}.toggle-switch:before,.toggle-switch:after{content:""}.toggle-switch:before{display:block;background:var(--c-primary-light);border-radius:50%;width:1em;height:1em;position:absolute;top:.25em;left:.25em;transition:left .25s}.toggle:hover .toggle-switch:before{background:var(--c-primary-light)}.toggle-checkbox:checked+.toggle-switch{background:var(--c-selected)}.toggle-checkbox:checked+.toggle-switch:before{left:1.5em}.toggle-checkbox{position:absolute;visibility:hidden}.toggle-label-disabled{opacity:40%}.toggle-label-left{margin-right:1em;position:relative;transition:.25s}.toggle-label-right{margin-left:1em;position:relative;transition:.25s}input{color:var(--c-primary-light);border-bottom-color:var(--c-primary-light);appearance:textfield;background:none;border-left:none;border-right:none;border-top:none;text-align:center}input:focus-visible{outline:none;border-bottom-style:dashed}select{background:none;border:1px solid;border-radius:8px;color:var(--c-primary-light);padding:2px 4px}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;color:var(--c-primary-light);background-color:var(--c-primary-dark);cursor:pointer;transition:border-color .25s}button:disabled{opacity:60%}button:hover:enabled{border-color:var(--c-primary-light);outline:none}[data-title]:hover:after{opacity:1;transition:all .1s ease .5s;visibility:visible}[data-title]:after{content:attr(data-title);background-color:var(--c-primary-dark);color:var(--c-primary-light);font-size:.75em;position:absolute;padding:1px 5px 2px;bottom:-1.5em;left:100%;white-space:nowrap;opacity:0;border:1px solid var(--c-primary-light);border-radius:4px;z-index:99999;visibility:hidden}[data-title]{position:relative}button.interval-button{width:100%}table.interval-buttons{table-layout:fixed;width:100%}td.spacer{visibility:hidden;border-style:none}button#begin-exercise{font-size:x-large;margin-top:4em}div#exercise-type-setup{font-size:x-large;margin-bottom:2em}div#num-questions-setup{font-size:xx-large;margin-bottom:2em}#num-questions-setup input{font-size:xx-large;margin-right:2em}.selected{background-color:var(--c-selected)}div#range-setup{font-size:x-large;margin-bottom:2em}#range-setup input{font-size:x-large;width:4em;margin-left:1em;margin-right:1em}#range-setup select{font-size:x-large;margin-left:1em}div#clef-setup{font-size:x-large;margin-bottom:2em;margin-top:-1em}#clef-setup .setup-label{margin-right:.5em;vertical-align:middle}#clef-setup svg{fill:var(--c-primary-light);margin-left:.5em;stroke:none;vertical-align:middle;width:1em}div#question-buttons{margin-bottom:1em}.correct-guessed{background-color:var(--c-correct)}.incorrect-guessed{background-color:var(--c-incorrect)}table#exercise-results-table{margin-left:4em;margin-right:4em;table-layout:fixed;width:100%}#correct-answer-th{writing-mode:vertical-lr;transform:rotate(180deg);white-space:nowrap}#correct-answer-label{position:relative;z-index:-1}th.exercise-results-col-header,td.exercise-results-cell{width:100%}.pitch-component{text-align:left}