.stave-container{font-size:var(--stave-size);background:var(--paper);border-radius:1em;padding-left:2em;padding-right:2em;margin-bottom:1em}.stave{width:25em;margin-left:auto;margin-right:auto;position:relative;box-shadow:0px calc(0em - var(--thickness)) 0px var(--ink),inset 0px var(--thickness) 0px var(--ink)}.stave .interligne{height:2em;box-shadow:0px var(--thickness) 0px var(--ink),inset 0px calc(0em - var(--thickness)) 0px var(--ink)}.stave .harmonic .note.sharp,.stave .harmonic .note.flat{left:calc(50% - 1.75em)}.stave.mini-stave{width:23em;margin:0}.display-space{position:absolute;top:0;right:0;height:100%;width:100%;display:flex}.display-space.harmonic{display:grid;grid-template-rows:100%}.display-space.no-clef{width:100%}.notes-space{top:0;right:0;height:100%;width:100%;display:flex}.notes-space.harmonic{display:grid;grid-template-rows:100%}.notes-space.no-clef{width:100%}.note-container{height:100%;width:100%;position:relative}.note{position:absolute;width:3.5em;height:2em;left:calc(50% - 1.75em)}.note svg{height:100%;display:block;margin:auto;fill:var(--ink)}.note .sharp-symbol{position:absolute;top:-1.5em;left:-2em;width:2em;height:5em}.note.sharp{left:calc(50% - 1em)}.note .flat-symbol{position:absolute;top:-2.4em;left:-2em;width:2em;height:4.7em}.note.flat{left:calc(50% - 1em)}.note.extra-space .sharp-symbol,.note.extra-space .flat-symbol{left:-4em}.note.offsetRight{left:1em}.note.green{--ink: var(--green)}.note.red{--ink: var(--red)}.note.fade-out{opacity:0;transition:opacity 1s ease-in}.clef{flex-shrink:0;fill:var(--ink);width:5.2em;margin-left:.5em;margin-right:1em}.clef svg{position:absolute;width:5.2em}.clef.c1 svg{top:3.9em}.clef.c2 svg{top:1.9em}.clef.c3 svg{top:-.1em}.clef.c4 svg{top:-2.1em}.clef.f svg{top:0}.clef.f3 svg{top:2em}.clef.g svg{top:-3.3em;width:5.1em}.signature-space{position:relative;display:flex}.signature-space .symbol-container{width:2.2em;position:relative}.signature-space .symbol-container svg{position:absolute}.signature-space.sharp svg{width:1.93em}.signature-space.flat svg{width:1.75em}.signature-space.g-clef.sharp div:nth-of-type(1) svg{top:-3em}.signature-space.g-clef.sharp div:nth-of-type(2) svg{top:0em}.signature-space.g-clef.sharp div:nth-of-type(3) svg{top:-4em}.signature-space.g-clef.sharp div:nth-of-type(4) svg{top:-1em}.signature-space.g-clef.sharp div:nth-of-type(5) svg{top:2em}.signature-space.g-clef.sharp div:nth-of-type(6) svg{top:-2em}.signature-space.g-clef.sharp div:nth-of-type(7) svg{top:1em}.signature-space.g-clef.flat div:nth-of-type(1) svg{top:.5em}.signature-space.g-clef.flat div:nth-of-type(2) svg{top:-2.5em}.signature-space.g-clef.flat div:nth-of-type(3) svg{top:1.5em}.signature-space.g-clef.flat div:nth-of-type(4) svg{top:-1.5em}.signature-space.g-clef.flat div:nth-of-type(5) svg{top:2.5em}.signature-space.g-clef.flat div:nth-of-type(6) svg{top:-.5em}.signature-space.g-clef.flat div:nth-of-type(7) svg{top:3.5em}.signature-space.f-clef.sharp div:nth-of-type(1) svg{top:-1em}.signature-space.f-clef.sharp div:nth-of-type(2) svg{top:2em}.signature-space.f-clef.sharp div:nth-of-type(3) svg{top:-2em}.signature-space.f-clef.sharp div:nth-of-type(4) svg{top:1em}.signature-space.f-clef.sharp div:nth-of-type(5) svg{top:4em}.signature-space.f-clef.sharp div:nth-of-type(6) svg{top:0em}.signature-space.f-clef.sharp div:nth-of-type(7) svg{top:3em}.signature-space.f-clef.flat div:nth-of-type(1) svg{top:2.5em}.signature-space.f-clef.flat div:nth-of-type(2) svg{top:-.5em}.signature-space.f-clef.flat div:nth-of-type(3) svg{top:3.5em}.signature-space.f-clef.flat div:nth-of-type(4) svg{top:.5em}.signature-space.f-clef.flat div:nth-of-type(5) svg{top:4.5em}.signature-space.f-clef.flat div:nth-of-type(6) svg{top:1.5em}.signature-space.f-clef.flat div:nth-of-type(7) svg{top:5.5em}.signature-space.c3-clef.sharp div:nth-of-type(1) svg{top:-2em}.signature-space.c3-clef.sharp div:nth-of-type(2) svg{top:1em}.signature-space.c3-clef.sharp div:nth-of-type(3) svg{top:-3em}.signature-space.c3-clef.sharp div:nth-of-type(4) svg{top:0em}.signature-space.c3-clef.sharp div:nth-of-type(5) svg{top:3em}.signature-space.c3-clef.sharp div:nth-of-type(6) svg{top:-1em}.signature-space.c3-clef.sharp div:nth-of-type(7) svg{top:2em}.signature-space.c3-clef.flat div:nth-of-type(1) svg{top:1.5em}.signature-space.c3-clef.flat div:nth-of-type(2) svg{top:-1.5em}.signature-space.c3-clef.flat div:nth-of-type(3) svg{top:2.5em}.signature-space.c3-clef.flat div:nth-of-type(4) svg{top:-.5em}.signature-space.c3-clef.flat div:nth-of-type(5) svg{top:3.5em}.signature-space.c3-clef.flat div:nth-of-type(6) svg{top:.5em}.signature-space.c3-clef.flat div:nth-of-type(7) svg{top:4.5em}.signature-space.c4-clef.sharp div:nth-of-type(1) svg{top:3em}.signature-space.c4-clef.sharp div:nth-of-type(2) svg{top:-1em}.signature-space.c4-clef.sharp div:nth-of-type(3) svg{top:2em}.signature-space.c4-clef.sharp div:nth-of-type(4) svg{top:-2em}.signature-space.c4-clef.sharp div:nth-of-type(5) svg{top:1em}.signature-space.c4-clef.sharp div:nth-of-type(6) svg{top:-3em}.signature-space.c4-clef.sharp div:nth-of-type(7) svg{top:0em}.signature-space.c4-clef.flat div:nth-of-type(1) svg{top:-.5em}.signature-space.c4-clef.flat div:nth-of-type(2) svg{top:-3.5em}.signature-space.c4-clef.flat div:nth-of-type(3) svg{top:.5em}.signature-space.c4-clef.flat div:nth-of-type(4) svg{top:-2.5em}.signature-space.c4-clef.flat div:nth-of-type(5) svg{top:1.5em}.signature-space.c4-clef.flat div:nth-of-type(6) svg{top:-1.5em}.signature-space.c4-clef.flat div:nth-of-type(7) svg{top:2.5em}.signature-space.c1-clef.sharp div:nth-of-type(1) svg{top:2em}.signature-space.c1-clef.sharp div:nth-of-type(2) svg{top:-2em}.signature-space.c1-clef.sharp div:nth-of-type(3) svg{top:1em}.signature-space.c1-clef.sharp div:nth-of-type(4) svg{top:-3em}.signature-space.c1-clef.sharp div:nth-of-type(5) svg{top:0em}.signature-space.c1-clef.sharp div:nth-of-type(6) svg{top:-4em}.signature-space.c1-clef.sharp div:nth-of-type(7) svg{top:-1em}.signature-space.c1-clef.flat div:nth-of-type(1) svg{top:-1.5em}.signature-space.c1-clef.flat div:nth-of-type(2) svg{top:-4.5em}.signature-space.c1-clef.flat div:nth-of-type(3) svg{top:-.5em}.signature-space.c1-clef.flat div:nth-of-type(4) svg{top:-3.5em}.signature-space.c1-clef.flat div:nth-of-type(5) svg{top:.5em}.signature-space.c1-clef.flat div:nth-of-type(6) svg{top:-2.5em}.signature-space.c1-clef.flat div:nth-of-type(7) svg{top:1.5em}.signature-space.c2-clef.sharp div:nth-of-type(1) svg{top:0em}.signature-space.c2-clef.sharp div:nth-of-type(2) svg{top:3em}.signature-space.c2-clef.sharp div:nth-of-type(3) svg{top:-1em}.signature-space.c2-clef.sharp div:nth-of-type(4) svg{top:2em}.signature-space.c2-clef.sharp div:nth-of-type(5) svg{top:-2em}.signature-space.c2-clef.sharp div:nth-of-type(6) svg{top:1em}.signature-space.c2-clef.sharp div:nth-of-type(7) svg{top:-3em}.signature-space.c2-clef.flat div:nth-of-type(1) svg{top:-3.5em}.signature-space.c2-clef.flat div:nth-of-type(2) svg{top:.5em}.signature-space.c2-clef.flat div:nth-of-type(3) svg{top:-2.5em}.signature-space.c2-clef.flat div:nth-of-type(4) svg{top:1.5em}.signature-space.c2-clef.flat div:nth-of-type(5) svg{top:-1.5em}.signature-space.c2-clef.flat div:nth-of-type(6) svg{top:2.5em}.signature-space.c2-clef.flat div:nth-of-type(7) svg{top:-.5em}.signature-space.f3-clef.sharp div:nth-of-type(1) svg{top:1em}.signature-space.f3-clef.sharp div:nth-of-type(2) svg{top:-3em}.signature-space.f3-clef.sharp div:nth-of-type(3) svg{top:0em}.signature-space.f3-clef.sharp div:nth-of-type(4) svg{top:-4em}.signature-space.f3-clef.sharp div:nth-of-type(5) svg{top:-1em}.signature-space.f3-clef.sharp div:nth-of-type(6) svg{top:2em}.signature-space.f3-clef.sharp div:nth-of-type(7) svg{top:-2em}.signature-space.f3-clef.flat div:nth-of-type(1) svg{top:-3.5em}.signature-space.f3-clef.flat div:nth-of-type(2) svg{top:.5em}.signature-space.f3-clef.flat div:nth-of-type(3) svg{top:-2.5em}.signature-space.f3-clef.flat div:nth-of-type(4) svg{top:1.5em}.signature-space.f3-clef.flat div:nth-of-type(5) svg{top:-1.5em}.signature-space.f3-clef.flat div:nth-of-type(6) svg{top:2.5em}.signature-space.f3-clef.flat div:nth-of-type(7) svg{top:-.5em}.supp-8::after,.supp8::after,.supp-7::after,.supp7::after,.supp-6::after,.supp6::after,.supp-5::after,.supp5::after,.supp-4::after,.supp4::after,.supp-3::after,.supp3::after{content:"";position:absolute;left:0;width:100%;background:repeating-linear-gradient(var(--ink) var(--thickness),transparent var(--thickness) calc(2em - var(--thickness)),var(--ink) calc(2em - var(--thickness)) calc(2em + var(--thickness)));box-shadow:0px calc(0em - var(--thickness)) 0px var(--ink),0px var(--thickness) 0px var(--ink)}.supp::after{content:"";position:absolute;top:-1em;left:0;width:100%;height:2em;box-shadow:0px var(--thickness) 0px var(--ink),inset 0px calc(0em - var(--thickness)) 0px var(--ink)}.supp2::after{content:"";position:absolute;top:0;left:0;width:100%;height:2em;box-shadow:0px var(--thickness) 0px var(--ink),inset 0px calc(0em - var(--thickness)) 0px var(--ink)}.supp-2::after{content:"";position:absolute;top:0;left:0;width:100%;height:2em;box-shadow:inset 0px var(--thickness) 0px var(--ink),0px calc(0em - var(--thickness)) 0px var(--ink)}.supp3::after{top:1em;height:2em}.supp-3::after{top:-1em;height:2em}.supp4::after{top:2em;height:2em}.supp-4::after{top:-2em;height:2em}.supp5::after{top:1em;height:4em}.supp-5::after{top:-3em;height:4em}.supp6::after{top:2em;height:4em}.supp-6::after{top:-4em;height:4em}.supp7::after{top:1em;height:6em}.supp-7::after{top:-5em;height:6em}.supp8::after{top:2em;height:6em}.supp-8::after{top:-6em;height:6em}.buttons-container{width:100%;height:6em;display:flex}.buttons-container .btn{--btn-fill: hsl(0, 0%, 60%);display:flex;flex-direction:column;flex-grow:1;justify-content:center;align-items:center;text-align:center;text-transform:uppercase;padding:1rem;cursor:pointer}.buttons-container .btn:not(:last-child){margin-right:1em}.buttons-container .btn:hover{--btn-fill: var(--ink);box-shadow:0 0 0px 2px var(--btn-fill)}.buttons-container .btn .label{pointer-events:none;font-size:1.2rem;font-weight:bold}.buttons-container .btn .key{pointer-events:none;display:flex;justify-content:center;align-items:center;border:2px solid var(--btn-fill);box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--btn-fill);border-radius:.3em;width:1.5em;height:1.5em;margin-top:.5em}.buttons-container .btn .key svg{fill:var(--btn-fill);width:60%;height:60%}.buttons-container .btn.correct-answer{animation:correctFade 1s}.buttons-container .btn.incorrect-answer{animation:incorrectFade 1s}@keyframes correctFade{0%{color:var(--green);--btn-fill: var(--green);box-shadow:0 0 0px 2px var(--green)}to{color:var(--ink);--btn-fill: hsl(0, 0%, 60%);box-shadow:none}}@keyframes incorrectFade{0%{color:var(--red);--btn-fill: var(--red);box-shadow:0 0 0px 2px var(--red)}to{color:var(--ink);--btn-fill: hsl(0, 0%, 60%);box-shadow:none}}.accordion-panel{max-width:35em;margin:1.5em 0}.accordion-panel h1{text-align:left;cursor:pointer;padding:1rem 1.5rem;margin-bottom:.15em;position:relative}.accordion-panel h1::after{content:"";position:absolute;width:1rem;height:1rem;right:1.5rem;top:calc(50% - .5rem);border-top:.2rem solid var(--ink);border-left:.2rem solid var(--ink);transform:rotate(-45deg);transition:ease-out .3s}.accordion-panel h1:hover,.accordion-panel.active h1{color:var(--primary)}.accordion-panel .form-panel{max-height:0;overflow:hidden;transition:ease-out .3s}.accordion-panel.active h1::after{transform:rotate(-135deg);border-top:.2rem solid var(--primary);border-left:.2rem solid var(--primary)}form{width:100%}form .options{width:100%;display:flex;flex-wrap:wrap;margin-bottom:1.5em;outline:3px solid var(--primary)}form .options label{flex:1 1 0%;padding:.5em 1em;display:flex;justify-content:center;align-items:center;text-align:center;outline:1px solid var(--primary);cursor:pointer}form .options.options-difficulty label{text-align:left;display:block}form .options.options-difficulty label input{margin-right:2em}form .options.options-readingLevel label{text-align:left;display:flex;justify-content:space-between}form .options.options-readingLevel label input{margin-left:2em;flex-grow:1}form .options.options-timeSignature label{padding:.5em;flex:1 1 33%;width:33%}form .options input[type=radio]{width:0;height:0;opacity:0;position:fixed;pointer-events:none}form .options input[type=radio]:checked+label{background:var(--primary);color:var(--paper);fill:var(--paper)}form .btn-container{width:100%;display:flex;justify-content:center}form .btn-big{cursor:pointer;padding:.8em 2em;margin:0 auto;background-color:var(--primary);border-radius:999em;border:none;color:var(--paper);font-size:1.33em;text-transform:uppercase;font-weight:700}form .form-time-signature{height:2.75em}.results-display{width:100%}.result-container{background:var(--paper);border-radius:1rem;width:100%;padding-left:4em;padding-right:4em;margin-bottom:1rem;display:flex;justify-content:space-around}.result-comment{font-size:1rem;display:flex;flex-direction:column;justify-content:space-between}.result-comment svg{width:2em;margin-left:2em}.result-details{display:flex;align-items:center;justify-content:space-between}.correct{color:var(--green);fill:var(--green)}.incorrect{color:var(--red);fill:var(--red)}.incorrect p{position:relative}.incorrect p::before{content:"";position:absolute;top:50%;left:0;width:100%;height:.1em;background-color:var(--red);transform:rotate(-15deg)}.result-time{font-size:.8em;color:gray}.keyboard .key:nth-of-type(20)::after,.keyboard .key:nth-of-type(19)::after,.keyboard .key:nth-of-type(18)::after,.keyboard .key:nth-of-type(16)::after,.keyboard .key:nth-of-type(15)::after,.keyboard .key:nth-of-type(13)::after,.keyboard .key:nth-of-type(12)::after,.keyboard .key:nth-of-type(11)::after,.keyboard .key:nth-of-type(9)::after,.keyboard .key:nth-of-type(8)::after,.keyboard .key:nth-of-type(6)::after,.keyboard .key:nth-of-type(5)::after,.keyboard .key:nth-of-type(4)::after,.keyboard .key:nth-of-type(2)::after,.keyboard .key:first-of-type::after{content:"";width:calc(700% / 12);height:var(--black-key-height);background-color:var(--ink);border-radius:0 0 8px 8px;position:absolute;top:0;z-index:1}.keyboard-container{width:100%;height:11.5em;position:relative;overflow:hidden}.keyboard-constraint{position:absolute;top:2em;left:-180%;width:460%}.keyboard{position:absolute;width:calc(300% / 5);left:calc(100% / 5);height:6em;display:inline-flex;justify-content:stretch;--black-key-height: 45%}.keyboard .key{width:100%;border:2px solid var(--ink);border-radius:0 0 12px 12px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:.25em;position:relative}.keyboard .key:not(:first-of-type){margin-left:-2px}.keyboard .key:first-of-type::after{right:-20%}.keyboard .key:nth-of-type(2)::after{right:-40%}.keyboard .key:nth-of-type(4)::after{right:-20%}.keyboard .key:nth-of-type(5)::after{right:-31%}.keyboard .key:nth-of-type(6)::after{right:-40%}.keyboard .key:nth-of-type(8)::after{right:-20%}.keyboard .key:nth-of-type(9)::after{right:-40%}.keyboard .key:nth-of-type(11)::after{right:-20%}.keyboard .key:nth-of-type(12)::after{right:-31%}.keyboard .key:nth-of-type(13)::after{right:-40%}.keyboard .key:nth-of-type(15)::after{right:-20%}.keyboard .key:nth-of-type(16)::after{right:-40%}.keyboard .key:nth-of-type(18)::after{right:-20%}.keyboard .key:nth-of-type(19)::after{right:-31%}.keyboard .key:nth-of-type(20)::after{right:-40%}.keyboard .key.active:hover{cursor:pointer;background-color:var(--primary)}.keyboard .key.active:hover>.key-label{background-color:var(--paper)}.keyboard .key .key-label{text-align:center;border-radius:50%;height:2.4em;width:2.4em;display:flex;justify-content:center;align-items:center;font-weight:bold;font-size:1.15em}.handle{position:absolute;bottom:0;top:105%;height:1.5em;width:100%;background-color:var(--ink);background-image:url(../img/grid-noise.png);opacity:.075;cursor:grab}.handle:active:hover{cursor:grabbing}.rhythm-dictation{margin-top:1em;min-width:36rem}.rhythm-dictation .card{margin-bottom:1rem}.rhythm-dictation .title{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.rhythm-dictation .title svg{width:5rem;height:5rem;cursor:pointer;flex-grow:0;flex-shrink:0;fill:var(--primary)}.rhythm-dictation .title svg:hover{fill:var(--secondary)}.rhythm-dictation .title h1{flex-grow:1;font-size:1.66rem}.rhythm-dictation .fragments{display:flex;justify-content:center;align-items:center;margin-bottom:1rem}.rhythm-dictation .fragments .fragment{border:1px solid var(--primary);padding:10px;border-radius:10px;position:relative;cursor:grab}.rhythm-dictation .fragments .fragment:not(:last-child){margin-right:1em}.rhythm-dictation .fragments .fragment:hover{box-shadow:4px 4px 8px 0px rgba(0,0,0,.2)}.rhythm-dictation .fragments .rhythm-card{width:6rem;height:4rem;fill:var(--ink);pointer-events:none}.rhythm-dictation .targets{display:flex;justify-content:center;align-items:center;position:relative}.rhythm-dictation .targets.noHover{pointer-events:none}.rhythm-dictation .targets .target{position:relative;width:9rem;height:6rem}.rhythm-dictation .targets .target .rhythm-card{width:100%;height:100%;fill:var(--ink)}.rhythm-dictation .targets .target .rhythm-card.green{fill:var(--green)}.rhythm-dictation .targets .target .rhythm-card.red{fill:var(--red)}.rhythm-dictation .targets .target .close-btn{width:12px;height:12px;position:absolute;top:3px;right:3px;opacity:0;fill:silver}.rhythm-dictation .targets .target .close-btn svg,.rhythm-dictation .targets .target .close-btn path,.rhythm-dictation .targets .target .close-btn g{pointer-events:none}.rhythm-dictation .targets .target.empty{border:1px dashed var(--secondary)}.rhythm-dictation .targets .target.hovered{background-color:var(--secondary);opacity:.5}.rhythm-dictation .targets .target.filled{border:1px solid transparent}.rhythm-dictation .targets .target.filled:hover{border:1px dotted silver}.rhythm-dictation .targets .target.filled:hover svg.close-btn{opacity:1;cursor:pointer}.rhythm-dictation .targets .target.filled svg.close-btn:hover{fill:var(--red)}.rhythm-dictation .caption{position:absolute;top:.75rem;left:1.5rem;font-size:.8rem;color:silver}.rhythm-dictation .start-btn{cursor:pointer;display:flex;justify-content:center;align-items:center;font-size:1.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--primary)}.rhythm-dictation .start-btn:hover{background-color:var(--primary);color:var(--paper)}.rhythm-dictation .time-signature{font-size:1.4rem;height:2em;width:1.4em;margin-right:.75em;transform:translateY(15%)}.rhythm-dictation .time-signature.green{fill:var(--green)}.rhythm-dictation .time-signature.red{fill:var(--red)}.answer-btns{display:flex;width:100%}.answer-btns .listen-btns{flex:0 1 50%;margin-right:1em}.answer-btns .questionPlayer,.answer-btns .answerPlayer{cursor:pointer;display:flex;justify-content:space-around;padding:1.2em 1.5em}.answer-btns .questionPlayer svg,.answer-btns .answerPlayer svg{width:2rem;flex-grow:0}.answer-btns .questionPlayer span,.answer-btns .answerPlayer span{font-weight:bold;color:var(--primary)}.answer-btns .questionPlayer svg,.answer-btns .answerPlayer svg{fill:var(--primary)}.answer-btns .questionPlayer:hover,.answer-btns .answerPlayer:hover{background-color:var(--primary)}.answer-btns .questionPlayer:hover span,.answer-btns .answerPlayer:hover span{color:var(--paper)}.answer-btns .questionPlayer:hover svg,.answer-btns .answerPlayer:hover svg{fill:var(--paper)}.answer-btns .answerPlayer svg{transform:scaleX(-1)}.answer-btns .answer-btn{cursor:pointer;flex:0 1 50%;display:flex;justify-content:center;align-items:center;font-size:1.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--primary)}.answer-btns .answer-btn:hover{background-color:var(--primary);color:var(--paper)}.question-display{display:flex;justify-content:center;align-items:center;position:relative}.question-display .question-element{width:9rem;height:6rem;border:1px solid transparent}.question-display .question-element svg{width:100%;height:100%}.rhythm-dictation-results{display:flex;flex-direction:column;font-size:1.1rem}.rhythm-dictation-results .rhythm-dictation-result{display:flex;justify-content:space-around;margin-bottom:1em}.rhythm-dictation-results .time-signature{font-size:.9rem}.rhythm-dictation-results .result-question,.rhythm-dictation-results .result-answer{display:flex;align-items:center}.rhythm-dictation-results .result-question .rhythm-card,.rhythm-dictation-results .result-answer .rhythm-card{width:6em;height:4em}.rhythm-dictation-results .result-comment{display:flex;justify-content:center;align-items:center;margin-left:2em}.rhythm-dictation-results .result-comment.success{color:var(--green)}.green{fill:var(--green)}.red{fill:var(--red)}.disabled{pointer-events:none;color:silver!important}.disabled *{color:silver!important;fill:silver}.rhythm-reading-question{display:flex;justify-content:center;margin-bottom:1em;position:relative}.rhythm-reading-question .beat{display:inline-block;width:9em;height:6em;position:relative}.rhythm-reading-question .beat.time-signature,.rhythm-reading-question .beat.final-note{width:4.5em}.rhythm-reading-question .beat svg{width:100%;height:100%}.rhythm-reading-question .time-signature svg{width:2em;height:6em;position:absolute;right:1em}.rhythm-reading-question .rhythm-reading-bar{display:flex;position:relative}.rhythm-reading-question .rhythm-reading-answer{--beat-width: 9em;position:absolute;top:var(--card-padding);height:calc(100% - calc(2 * var(--card-padding)));left:50%;transform:translateX(-50%);overflow:hidden}.rhythm-reading-question .rhythm-reading-answer .line{position:absolute;background-color:transparent;opacity:.4;height:100%;width:.75em}.rhythm-reading-question .rhythm-reading-answer .perfectLine{position:absolute;background-color:var(--primary);opacity:.4;height:100%;width:.75em}.rhythm-reading-question .final-note svg{width:1.26em;height:6em}.rhythm-reading-answer-btns{width:100%}.rhythm-reading-answer-btns .start-button{cursor:pointer;display:flex;justify-content:center;align-items:center;font-size:1.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--primary)}.rhythm-reading-answer-btns .start-button:hover{background-color:var(--primary);color:var(--paper)}.precision-score{width:100%;display:flex;justify-content:center;align-items:center}.precision-score h3{opacity:.8;line-height:1}.precision-score p{font-size:3rem;margin-left:.33em;font-weight:800}.total-score{text-align:center;margin-bottom:1.5em}.hidden{display:none}.rhythm-reading-results .rhythm-reading-question{justify-content:flex-start}.rhythm-reading-results .rhythm-reading-question .rhythm-reading-answer{--beat-width: 9em;left:var(--card-padding);transform:none}.rhythm-reading-results .score-display{display:flex;justify-content:space-between;margin:2em auto;width:66%}.rhythm-reading-results .score-display h2{padding:0;font-size:3.5em;line-height:1;color:var(--ink)}.rhythm-reading-results .score-display p{color:gray;font-size:1.1em}.rhythm-reading-results .score-display .precision{text-align:right}.rhythm-reading-results .rhythm-reading-comments{text-align:right;display:flex;flex-direction:column;justify-content:space-between;line-height:1.1;font-size:.7rem}.rhythm-reading-results .rhythm-reading-comments>div{color:gray}.rhythm-reading-results .rhythm-reading-comments span{font-size:1.7rem;font-weight:800}:root{font-size:16px;--stave-size: 18px;--mini-stave-size: 8px;--thickness: .08em;--bkg: linear-gradient(5deg, #fcf, #cff);--primary: hsl(250,70%, 70%);--secondary: hsl(30, 70%, 70%);--ink: hsl(240, 2%, 10%);--paper: hsl(0, 0%, 98%);--red: hsl(0, 52%, 56%);--green: hsl(143, 53%, 58%);--card-padding: 1.5rem;--beat-width: 9em}*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;color:var(--ink);font-family:"BioRhyme",serif;user-select:none}body{display:flex;flex-direction:column;align-items:center;height:100vh;background:var(--bkg);background-attachment:fixed;padding-bottom:5em;margin:0 auto}h1,h2{text-align:center;padding:1rem}.card{background-color:var(--paper);border-radius:1rem;padding:var(--card-padding)}