@import"https://fonts.googleapis.com/css2?family=Questrial&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Sono:wght@200..800&display=swap";#app{max-width:100%;min-height:100vh;box-sizing:border-box;padding:2em}header{display:flex;margin-bottom:1em}#header-buttons{margin-left:auto;display:flex;gap:.5em;align-items:center}.header-button{cursor:pointer;-webkit-user-select:none;user-select:none}.control-panel{padding:0 1em 1em;border-radius:.5em;background-color:var(--color-secondary-background);max-width:720px;margin-left:auto;font-family:Questrial;position:fixed;top:0;left:0;right:0;height:100vh;overflow-y:scroll;z-index:50;scrollbar-width:thin;scrollbar-color:var(--color-tertiary-background) transparent;animation:fade-in .25s}.control-panel-header{background-color:var(--color-secondary-background);position:sticky;top:0;padding-top:.5em;padding-bottom:1em;z-index:60}.control-panel h2{font-size:.9em}@keyframes fade-in{0%{opacity:0}to{opacity:100}}.control-panel-close-button{float:right;font-size:.8em;position:relative;top:.75em;opacity:.5;cursor:pointer}.control-panel-open-button{cursor:pointer;-webkit-user-select:none;user-select:none}.control-panel-close-button:hover{opacity:1}.modal-background{position:fixed;top:0;left:0;right:0;width:100vw;height:100vh;overflow:hidden;z-index:40;background-color:#00000040;animation:fade-in .25s}.settings{padding:1em 2em 2em;border-radius:.5em;background-color:var(--darken-transparent);max-width:720px;margin:.5em auto;font-family:Questrial;overflow:hidden}.settings>.settings{padding:1em;margin:1em -1em 0;border:none;background-color:rbga(0,0,0,1)!important}h2,.settings h3{font-family:Roboto Mono;font-size:1em;font-weight:400}.debug{background-color:var(--dark);border-radius:.5em;font-family:Roboto Mono;font-size:.8em;padding:.8em;box-sizing:border-box;display:flex;align-items:center;position:relative}.exercise-link-container{width:75%;overflow:hidden}.copy-to-clipboard-button{background-color:var(--button-fill);border-radius:.3em;padding:.4em .8em;position:absolute;box-sizing:border-box;right:.4em;cursor:pointer;-webkit-user-select:none;user-select:none}.options{display:flex;flex-direction:row;flex-wrap:wrap;width:100%}.options label{width:25%;display:flex;flex-wrap:wrap;flex-direction:row;-webkit-user-select:none;user-select:none}.options .columns-1{width:100%}.options .columns-2{width:50%}.options .columns-3{width:calc(100% / 3)}.options .columns-4{width:25%}.options .columns-5{width:20%}.options div,.options input[type=number],.selection-button{width:100%;border-radius:.2em;box-shadow:inset 0 0 0 .1em var(--button-outline);background-color:var(--button-fill);color:var(--button-text);box-sizing:border-box;padding:1em;margin:.5em;text-align:center;cursor:pointer;font-family:Roboto Mono,Courier New,Courier,monospace,Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;text-transform:lowercase;font-size:.9em;transition:box-shadow .1s}.options div:hover{box-shadow:inset 0 0 0 .1em var(--button-hover-outline)}.options input[type=checkbox],.options input[type=radio]{position:absolute;visibility:hidden;opacity:0}.options input[type=number],.options input[type=range]{width:100%;border:none}.options .number-label,.options .range-label{background-color:transparent;height:auto;width:100%;max-width:100%;padding:0}.options :checked+div{box-shadow:inset 0 0 0 .1em var(--selection-outline);background-color:var(--selection-fill);color:var(--selection-text)}.options>.romanNumerals>div{text-transform:none!important}.options .select .select-label{margin-top:0;margin-bottom:0;padding:1em;height:3em;scroll-snap-align:start;text-transform:none}.select-form{overflow-y:scroll;scrollbar-width:thin;scroll-snap-type:y mandatory;max-height:0em;position:relative;z-index:40}.select-form.active{max-height:14em}.selection-button{text-transform:none}.color-primary{background-color:var(--color-primary)}#exercise-interface{display:flex;justify-content:center;height:86vh;gap:1em}.exercise-container{width:100%;height:100%;display:flex;justify-content:center;flex-direction:column;align-items:center;flex:1}.brain{width:100%;box-sizing:border-box;padding:1em;border-radius:1em;display:flex;flex-direction:column;min-height:75vh}.side-bar{width:30%;max-width:1700px;height:100%;box-sizing:border-box;background-color:var(--dark);padding:1em;border-radius:1em;display:flex;flex-direction:column;font-size:.75em;color:gray;max-height:100%}@media only screen and (max-width: 1400px){#exercise-interface{flex-direction:column;height:fit-content}.side-bar{width:100%}}.brain h2{position:absolute;margin:0}.brain-box{width:100%;border-radius:1em;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box}.question{width:100%;margin:0 auto}.response{width:100%;margin:0 auto;height:8em}.note-name{background-color:var(--selection-fill);border:2px solid;border-color:var(--selection-outline);padding:.25em .75em;width:1.5em;text-align:center;border-radius:.5em;margin:.25em;display:inline-block;-webkit-user-select:none;user-select:none}.note-names,.answer-buttons,.chord-name{display:flex;width:fit-content;justify-content:center;box-sizing:border-box;margin-left:auto;margin-right:auto}.chord-name{padding:.5em 1.5em;font-size:1.25em;background-color:var(--button-fill)}.arrow-down{font-size:2em;padding-bottom:.6em}.answer-buttons{width:100%}:root{--diagram-line-thickness: .15em}.piano-diagram{flex-grow:1;box-sizing:border-box;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--color-secondary-background) var(--darken-transparent);-webkit-user-select:none;user-select:none}.piano-diagram-container{display:flex;border:var(--diagram-line-thickness) solid black;border-radius:.4em;width:fit-content;margin:0 auto}.piano-diagram-container.friendly-style{border:none}.piano-key{display:flex;text-align:center;flex-direction:column;justify-content:flex-end}.white-key{width:3em;height:6em;background-color:#fff;z-index:5;border:var(--diagram-line-thickness) solid black;box-sizing:border-box;color:transparent}.black-key{width:2em;height:3.5em;background-color:#000;color:transparent;margin-left:-1em;margin-right:-1em;margin-top:calc(var(--diagram-line-thickness) * -.75);z-index:10;border:calc(var(--diagram-line-thickness) * 2) solid black;box-sizing:border-box;border-radius:.2em}.large.white-key{width:6em;height:12em}.large.black-key{width:4em;height:7em;margin-left:-2em;margin-right:-2em}.friendly-style.white-key{border:1px solid rgb(174,174,174);border-radius:0 0 .5em .5em}.friendly-style.black-key{background-color:#2d2d2d;border:2px solid rgb(25,25,25);border-bottom:6px solid rgb(25,25,25);border-radius:0 0 .5em .5em}.friendly-style.black-key.highlighted-key,.friendly-style.white-key.highlighted-key{border:2px solid var(--color-primary-border)}.friendly-style.black-key.active-MIDI-input{border:2px solid var(--color-secondary-border)}.highlighted-key{background-color:var(--color-primary)!important;color:#fff}.active-MIDI-input{background-color:var(--color-secondary)!important;border-color:var(--color-secondary-border)!important}.correct-input{background-color:var(--color-correct)!important;border-color:var(--color-correct-border)!important;color:#fff}.friendly-style.black-key.correct-input{border:2px solid var(--color-correct-border)}.fretboard{width:fit-content;margin:0 auto;padding:1em;display:flex}.fretboard-landscape{flex-direction:column}.fretboard-portrait{flex-direction:row}.guitar-string{display:flex}.guitar-string-landscape{flex-direction:row}.guitar-string-portrait{flex-direction:column}.guitar-note{padding:.75em;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.9em;width:1em;height:1em;position:relative;z-index:2}.fretboard-landscape .guitar-note{border-right:double .5em rgb(0,0,0)}.fretboard-portrait .guitar-note{border-bottom:double .5em rgb(0,0,0)}.guitar-note:before{box-sizing:border-box;content:"";position:absolute;background-color:#fff;top:0;left:0;bottom:0;right:0;margin:auto;z-index:-2}.fretboard-landscape .guitar-note:before{height:.4em;width:calc(100% + .7em);border-top:.2em solid rgba(0,0,0,.3);border-bottom:.2em solid rgba(0,0,0,.3)}.fretboard-portrait .guitar-note:before{width:.4em;height:calc(100% + .7em);border-left:.2em solid rgba(0,0,0,.3);border-right:.2em solid rgba(0,0,0,.3)}.guitar-note:after{content:"";position:absolute;background-color:#00000009;height:80%;width:80%;border-radius:100%;top:0;left:0;bottom:0;right:0;margin:auto;z-index:-1}.guitar-note:hover:after{background-color:#00000062}.fret-marker{padding:.75em;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.9em;width:1em;height:1em;position:relative;z-index:2;opacity:.5;font-family:Sono}.fretboard-landscape .fret-marker{height:0em;border-right:double .5em rgba(0,0,0,0)}.fretboard-portrait .fret-marker{border-bottom:double .5em rgba(0,0,0,0)}.fret-markers-portrait{display:flex;flex-direction:column}.open-note:before{background-color:transparent;border-color:transparent!important}.highlighted-guitar-note:after{background-color:var(--color-primary)}.musical-staff-container{display:flex;flex-direction:column-reverse;max-width:900px;margin:0 auto}.staff-note{z-index:5;overflow:visible;position:absolute;color:var(--text)}.staff-row{display:flex;align-items:center;width:100%;position:relative}.line{height:1.4em;box-sizing:border-box;margin-top:-.7em;margin-bottom:-.7em}.staff-line{z-index:0;width:inherit;height:50%;border-bottom:.2em solid var(--selection-outline)}.ledger-line{z-index:0;width:100px;height:50%;border-bottom:.2em solid var(--selection-outline)}.space{height:1.4em;box-sizing:border-box;z-index:5}.history-tracker button{margin-top:auto}.snapshots-container{height:inherit;max-height:80vh;overflow:scroll;scrollbar-width:thin;scrollbar-color:var(--button-fill) transparent}.snapshot{padding:.25em 1em}.snapshot:not(:last-child){border-bottom:2px solid var(--button-fill)}.snapshot:hover{background-color:var(--button-fill);cursor:pointer}.random:before{content:"🥶"}.flashcards:before{content:"🤢"}.quiz:before{content:"😡"}.piano:before{content:"🎹"}.guitar:before{content:"🎸"}.musical:before{content:"🎼"}.text:before{content:"🔤"}:root{font-family:Roboto Mono,Courier New,Courier,monospace,Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;scrollbar-width:thin;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--color-primary: red;--color-secondary: blue;--color-tertiary: yellow}[data-theme=red-dark]{--color-primary: rgb(246, 19, 57);--color-secondary: #7ef1a0;--color-secondary-background: #1f1f21;--color-tertiary-background: #2f2f31;--button-outline: transparent;--button-hover-outline: #8a8a8a;--button-fill: #171717;--button-text: white;--selection-outline: rgb(246, 19, 57);--selection-fill: #00000025;--selection-text: white;--dark: rgb(18, 18, 18);--darken-transparent: rgba(0, 0, 0, .06);--light: white;--text: white;color-scheme:dark;color:#fff;background-color:#1d1d20}[data-theme=red-light]{--color-primary: rgb(246, 19, 57);--color-secondary-background: #ebebeb;--color-tertiary-background: #c7c7c7;--button-outline: transparent;--button-hover-outline: rgb(246, 19, 57);--button-fill: #16161515;--button-text: rgb(56, 56, 56);--selection-outline: rgb(246, 19, 57);--selection-fill: rgb(246, 19, 57);--selection-text: white;--dark: #eaeaea;--darken-transparent: rgba(0, 0, 0, .03);--light: white;--text: rgb(56, 56, 56);color-scheme:light;color:var(--text);background-color:#fff}[data-theme=blue-dark]{--color-primary: rgb(19, 125, 246);--color-secondary-background: #1f1f21;--color-tertiary-background: #2f2f31;--button-outline: transparent;--button-hover-outline: #8a8a8a;--button-fill: #171717;--button-text: white;--selection-outline: rgb(19, 125, 246);--selection-fill: #00000025;--selection-text: white;--dark: rgb(18, 18, 18);--darken-transparent: rgba(0, 0, 0, .06);--light: white;--text: white;color-scheme:dark;color:#fff;background-color:#1d1d20}[data-theme=blue-light]{--color-primary: rgb(19, 125, 246);--color-secondary-background: #ebebeb;--color-tertiary-background: #c7c7c7;--button-outline: transparent;--button-hover-outline: rgb(19, 125, 246);--button-fill: #16161515;--button-text: rgb(56, 56, 56);--selection-outline: rgb(19, 125, 246);--selection-fill: rgb(19, 125, 246);--selection-text: white;--dark: #eaeaea;--darken-transparent: rgba(0, 0, 0, .03);--light: white;--text: rgb(56, 56, 56);color-scheme:light;color:var(--text);background-color:#fff}[data-theme=yellow-dark]{--color-primary: rgb(218, 179, 9);--color-primary-border: rgb(184, 152, 7);--color-correct: #7ef1a0;--color-correct-border: #51c072;--color-incorrect: #f17e7e;--color-incorrect-border: #c05151;--color-secondary: #7ebff1;--color-secondary-border: #5190c0;--color-secondary-background: #1f1f21;--color-tertiary-background: #2f2f31;--button-outline: transparent;--button-hover-outline: #8a8a8a;--button-fill: #171717;--button-text: white;--selection-outline: rgb(218, 179, 9);--selection-fill: #00000025;--selection-text: white;--dark: rgb(18, 18, 18);--darken-transparent: rgba(0, 0, 0, .06);--light: white;--text: white;color-scheme:dark;color:#fff;background-color:#1d1d20}[data-theme=yellow-light]{--color-primary: rgb(246, 204, 19);--color-secondary-background: #ebebeb;--color-tertiary-background: #c7c7c7;--button-outline: transparent;--button-hover-outline: rgba(246, 204, 19);--button-fill: #16161515;--button-text: rgb(56, 56, 56);--selection-outline: rgb(246, 204, 19);--selection-fill: rgb(246, 204, 19);--selection-text: white;--dark: #eaeaea;--darken-transparent: rgba(0, 0, 0, .03);--light: white;--text: rgb(56, 56, 56);color-scheme:light;color:var(--text);background-color:#fff}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0}h1{font-size:1em;line-height:1.1}button{border-radius:8px;border:2px solid transparent;border-color:var(--button-outline);padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--button-fill);color:var(--button-text);cursor:pointer;transition:border-color .25s;-webkit-user-select:none;user-select:none}button:hover{border-color:var(--selection-outline)}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}input{accent-color:var(--color-primary)}