*{box-sizing:border-box}html,body,#page{width:100%;height:100%;margin:0;padding:0;overflow:hidden}body{background-color:#49306B;background-image:linear-gradient(125deg, #49306B, #312048);color:#F7EBE8;font-size:18px;font-family:'Balsamiq Sans',sans-serif;font-weight:400}strong{font-weight:700}.container{width:100%;max-width:24rem;margin:0 auto;padding-left:2rem;padding-right:2rem;overflow:hidden}a{color:#97D8B2;text-decoration:none}a.hidden-link{color:inherit}.position-relative{position:relative}.text-center{text-align:center}ul{list-style:none;margin:0;padding:0}.d-none{display:none !important}.d-block{display:block !important;width:100% !important;margin-bottom:1rem}.mb-2{margin-bottom:1rem}.mb-4{margin-bottom:2rem}h1,h2,h3,p{margin-top:0;margin-bottom:1rem}.btn{display:inline-block;padding:1em 2em;border:0;border-radius:.5em;box-shadow:none !important;font-size:18px;font-family:'Balsamiq Sans',sans-serif;font-weight:400;cursor:pointer}.btn-primary{background-color:#E54B4B;border-color:#E54B4B;color:White}.btn-secondary{background-color:#FFA987;border-color:#FFA987;color:White}.btn:hover,.btn:focus{background:#F7EBE8;border-color:#F7EBE8;color:#49306B}.form-control,.form-control+label{color:#49306B}.form-floating{margin:0 auto 1rem;position:relative}.form-floating>.form-control{display:block;width:100%;height:calc(3.5rem + 2px);padding:0.375rem 0.75rem;font-size:1rem;font-weight:500;line-height:1.5;color:#212529;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;-webkit-appearance:none;border-radius:0.25rem;line-height:1.25}.form-floating>label{text-transform:uppercase;font-size:.85rem;white-space:nowrap;position:absolute;top:0;left:0;height:100%;padding:1.2rem 0.75rem;pointer-events:none;border:1px solid transparent;transform-origin:0 0;transition:opacity 0.1s ease-in-out, transform 0.1s ease-in-out}@media (prefers-reduced-motion: reduce){.form-floating>label{transition:none}}.form-floating>.form-control{padding:1rem 0.75rem}.form-floating>.form-control::-moz-placeholder{color:transparent}.form-floating>.form-control::placeholder{color:transparent}.form-floating>.form-control:not(:-moz-placeholder-shown){padding-top:1.625rem;padding-bottom:0.625rem}.form-floating>.form-control:focus,.form-floating>.form-control:not(:placeholder-shown){padding-top:1.625rem;padding-bottom:0.625rem}.form-floating>.form-control:-webkit-autofill{padding-top:1.625rem;padding-bottom:0.625rem}.form-floating>.form-control:not(:-moz-placeholder-shown) ~ label{opacity:0.65;transform:scale(0.85) translateY(-0.5rem) translateX(0.15rem)}.form-floating>.form-control:focus ~ label,.form-floating>.form-control:not(:placeholder-shown) ~ label{opacity:0.65;transform:scale(0.85) translateY(-0.5rem) translateX(0.15rem)}.form-floating>.form-control:-webkit-autofill ~ label{opacity:0.65;transform:scale(0.85) translateY(-0.5rem) translateX(0.15rem)}#page{display:flex;flex-direction:column}.page-header,.page-footer{flex:0 0 auto}.page-header{padding:2rem 2rem 0}.page-footer{padding:0 2rem 2rem}.page-content{display:flex;flex-direction:column;flex:1 1 auto;justify-content:center}#bar{list-style:none;display:flex;align-items:center;justify-content:center}#bar li{padding:.5em}#bar-progress{width:1em;display:inline-block;vertical-align:text-top}.exercise #intro,.exercise #content{display:flex;flex:1 1 auto;flex-direction:column}.exercise #intro-content,.exercise #exercise-content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;padding-top:2rem;padding-bottom:2rem}.exercise #intro-actions,.exercise #actions{flex:0 0 auto;padding-bottom:2rem}.exercise .phrase{font-size:1.5rem}.exercise #cue b,.exercise .phrase strong{color:#97D8B2}.exercise .phrase .prefix{color:#E54B4B}.exercise #notes{width:100%}.exercise #notes .play-note{width:3.2em;padding-left:0;padding-right:0;border-radius:50%}.exercise #notes #note-e{position:relative}.exercise #notes #note-g{position:relative}.index #progress{width:150px;font-size:150px;margin:0 auto 20px}.index #progress .circle-wrap{box-shadow:0 0 1rem rgba(255,255,255,0.1)}.index #progress .circle-wrap.pulse{animation:pulse 3s ease-in-out infinite}.index #actions{padding:0 2rem 2rem}.circle-wrap{display:block;width:1em;height:1em;background:#61408e;border-radius:50%}.circle-wrap .circle .mask,.circle-wrap .circle .fill{display:block;width:1em;height:1em;position:absolute;border-radius:50%}.circle-wrap .circle .mask{clip:rect(0px, 1em, 1em, 0.5em)}.circle-wrap .inside-circle{display:block;width:3.252em;height:3.252em;border-radius:50%;background:#F7EBE8;line-height:3.4em;text-align:center;margin-top:.372em;margin-left:.372em;color:#49306B;position:absolute;z-index:100;font-weight:700;font-size:.25em}.mask .fill{clip:rect(0px, 0.5em, 1em, 0px);background-color:#97D8B2}.mask.full,.circle .fill{animation:fill ease-in-out 3s}.icon{width:1em;height:1em;margin-top:-0.2em;display:inline-block;position:relative;vertical-align:middle}.icon svg{width:100%;height:100%;position:absolute;top:0;left:0}.icon-inverse svg{fill:White}.icon-spin{-webkit-animation-name:fa-spin;animation-name:fa-spin;-webkit-animation-delay:var(--fa-animation-delay, 0s);animation-delay:var(--fa-animation-delay, 0s);-webkit-animation-direction:var(--fa-animation-direction, normal);animation-direction:var(--fa-animation-direction, normal);-webkit-animation-duration:var(--fa-animation-duration, 2s);animation-duration:var(--fa-animation-duration, 2s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count, infinite);animation-iteration-count:var(--fa-animation-iteration-count, infinite);-webkit-animation-timing-function:var(--fa-animation-timing, linear);animation-timing-function:var(--fa-animation-timing, linear)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.icon-spin{-webkit-animation-delay:-1ms;animation-delay:-1ms;-webkit-animation-duration:1ms;animation-duration:1ms;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s}}@keyframes pulse{0%{box-shadow:0 0 1rem rgba(255,255,255,0.1)}50%{box-shadow:0 0 8rem rgba(255,255,255,0.5)}100%{box-shadow:0 0 1rem rgba(255,255,255,0.1)}}