@keyframes loading{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}*{-webkit-tap-highlight-color:rgba(255,255,255,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box;cursor:default;-webkit-user-select:none;user-select:none}body{--bg:#f5f5f7;--bgTrans:#f5f5f7aa;--primary:#06c;--primaryLight:#0066cc11;--text:#1d1d1f;--border:#eaeaea;--lightText:#00000077;--borderLight:#fefefe;--shadow:#00000022;--shadowLight:#00000011;background:var(--bg);color:var(--text);font-family:helvetica neue;margin:0;max-width:100vw;padding:20px}.container{position:relative;width:100%}.bg{height:700px;left:0;overflow:hidden;right:0}.bg,.bg:before{position:absolute;top:0}.bg:before{background:linear-gradient(to bottom right,#88e4ec 20%,#ffb795 80%);box-shadow:0 -170px 150px var(--bg) inset;content:"";height:550px;left:-50px;right:-50px;z-index:-1}strong{color:var(--text)}h1,h2,h3,h4{margin:0;padding:0}h1{font-size:4rem;margin-bottom:20px;margin-top:30px}h1 small{color:var(--lightText);display:block;font-size:1rem;font-weight:400}a,a *{cursor:pointer}a:hover{color:var(--text)}a{color:var(--lightText);font-weight:700;text-decoration:none;transition:.2s}a:active{opacity:.4}.flex{display:flex}.flexCenterY{align-items:center}.flexCenterX{justify-content:center}h2{font-size:1rem}label{color:var(--lightText);font-size:.8rem;text-transform:uppercase}button,label{font-weight:700}button{align-items:center;background:var(--borderLight);border:3px solid var(--borderLight);border-radius:20px;color:var(--text);display:flex;height:35px;padding:0 10px;transition:.1s;white-space:nowrap}button svg{color:var(--lightText);height:1rem}button:active{opacity:.4}.noPadding{padding:0!important}.tag{border:3px solid var(--border);border-radius:5px;font-size:1rem;padding:3px 5px;position:absolute;right:0;top:-2px}.overlay{background:#0000;bottom:0;left:0;position:fixed;right:0;top:0}form button{align-items:center;border-radius:10px;display:flex;font-size:1rem;justify-content:center;margin:10px 0;padding:30px 10px!important;text-align:center;width:100%}form{flex:1 1;padding-top:15px}form input{background:var(--borderLight);border:0;border:3px solid var(--border);border-radius:10px;cursor:text;display:block;font-family:Helvetica Neue;font-size:1rem;margin:10px 0;outline:none;padding:15px 10px!important;width:100%}form input:focus{border-color:var(--primary)}button[disabled]{cursor:not-allowed;opacity:.4}form a{display:block;margin-top:-10px;padding:30px 10px;text-align:center}.manage{background:var(--primary);border-color:var(--primary);color:#fff}.manage svg{color:#fff!important}.delete{background-color:#ff000011;border-color:#ff000011;color:red}.delete svg{color:red!important}.logout{background:var(--primaryLight);border-color:var(--primaryLight);color:var(--primary)}.logout svg{color:var(--primary)!important}.loading{animation:loading 1s linear infinite}ul{display:flex;font-size:1rem;list-style:none;margin:20px 0 0;padding:0;width:100%}ul li{margin-right:10px}a svg{height:1rem;vertical-align:middle;width:1rem}ul svg{height:1.5rem;width:1.5rem}@keyframes streaksLoading{0%{opacity:.4}50%{opacity:.8}to{opacity:.4}}.currentUser{align-items:center;display:flex}.currentUser h2{margin-right:auto}.container{margin:auto;max-width:700px}.header{display:flex}.header h1{margin-bottom:0;margin-right:auto}.button{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff77;box-shadow:0 0 50px var(--shadow);color:var(--text);display:flex;font-size:1rem;font-weight:700;height:35px;overflow:hidden;padding:0 10px;white-space:nowrap}.button svg{color:var(--lightText);height:1rem}button svg.loading{height:2rem;width:2rem}.streaksContainer{background:#ffffff55;border-radius:10px;box-shadow:0 0 10px var(--shadowLight);overflow:hidden}.streaks{display:flex;height:90px}.streaksNumber{align-items:center;border-right:1px solid #00000011;display:flex;justify-content:center;text-align:center;width:30%}.streaksNumber svg{height:1em;width:1em}.streaksNumber small svg{height:1rem;vertical-align:middle;width:1rem}.streaksContainer small{color:var(--lightText);font-size:.7rem}.streaksNumber h4{font-size:2rem;line-height:1}.streaksFooter{background:#ffffff55;padding:5px 10px}.streaksProgressContainer{background:#00000011;border-radius:50px;display:flex;height:10px;margin-bottom:5px;margin-top:2px;overflow:hidden}.streaksProgress{background:#00000011;width:20%}.streaksSteps{align-items:center;display:flex;flex:1 1}.streaksSteps ul{display:flex;margin-top:0}.streaksSteps i{align-items:center;background:#fff3;border-radius:50%;display:inline-flex;height:40px;justify-content:center;width:40px}.streaksSteps small{display:block;margin-top:5px}.streaksLoading{animation:streaksLoading 1s linear infinite}.streaks li{flex:1 1;margin:0;text-align:center}.streaksSteps svg{color:#00000022}.confetti{bottom:20px;left:50%;position:fixed}.streaks li.active small,.streaks li.active svg{color:var(--text)!important;font-weight:700}.streaks li.active i{background-color:var(--border)}.streaksFooter small{display:flex;width:100%}.streaksFooter small strong{align-items:center;color:var(--lightText);display:flex;margin-left:auto}.streaksFooter small strong svg{color:green;height:1em;margin-right:3px;width:1em}.container>p{color:var(--lightText);font-size:1rem;-webkit-hyphens:auto;hyphens:auto;text-align:justify}.container>p a{align-items:center;display:inline-flex}.container>p svg{margin-left:3px}@keyframes loadingEx{0%{opacity:.6}50%{opacity:.3}to{opacity:.6}}.exercise{background:var(--borderLight);border:3px solid var(--borderLight);box-shadow:0 0 10px var(--shadowLight);overflow:hidden;padding:10px;transition:opacity .1s}.exerciseWrapper.loadingEx .exercise{animation:loadingEx 1s infinite}.exerciseWrapper{display:inline-block;height:155px;vertical-align:top;width:calc(50% - 5px)}.exerciseWrapper:nth-child(2n){margin-left:10px}.exercise:active{opacity:.4}.exercise.isOpen{box-shadow:0 0 20px var(--shadow);margin:auto;max-width:700px}.exercise.isOpen:active{opacity:1}.exercise.isOpen:before{background:#fff;content:"";height:25px;left:0;position:absolute;right:0;z-index:2}.exercise.isOpen:after{background:var(--border);border-radius:10px;content:"";height:5px;left:50%;position:absolute;top:10px;transform:translateX(-50%);width:80px;z-index:3}.exercise h3{font-size:.8rem;line-height:1;margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.exercise small{color:var(--lightText);font-size:.7rem;font-weight:400}.exercise img{background:#000;object-fit:contain;object-position:center;width:100%}.exerciseIcon{margin:10px 0;padding-bottom:10px}.icon{border-radius:50%;height:50px;margin:auto auto -12px;padding:10px;width:50px}.icon svg{height:40px;width:40px}.exerciseMeta{background:var(--borderLight);border-radius:50px;color:var(--primary);font-size:.6rem;font-weight:700;height:20px;margin:auto;padding:0 5px}.exerciseMeta svg{height:.6rem}.exerciseMetas{width:75px}.exercisesContainer>div:nth-of-type(2) .exerciseMeta,.exercisesContainer>div:nth-of-type(2) .icon{border:2px solid #ff8d28;color:#ff8d28}.exercisesContainer>div:first-of-type .exerciseMeta,.exercisesContainer>div:first-of-type .icon{border:2px solid #ff383c;color:#ff383c}.exercisesContainer>div:nth-of-type(4) .exerciseMeta,.exercisesContainer>div:nth-of-type(4) .icon{border:2px solid #34c759;color:#34c759}.exercisesContainer>div:nth-of-type(3) .exerciseMeta,.exercisesContainer>div:nth-of-type(3) .icon{border:2px solid #fc0;color:#fc0}.exercisesContainer>div:nth-of-type(5) .exerciseMeta,.exercisesContainer>div:nth-of-type(5) .icon{border:2px solid #00c8b3;color:#00c8b3}.exercisesContainer>div:nth-of-type(6) .exerciseMeta,.exercisesContainer>div:nth-of-type(6) .icon{border:2px solid #00c3c8;color:#00c3c8}.exercisesContainer>div:nth-of-type(7) .exerciseMeta,.exercisesContainer>div:nth-of-type(7) .icon{border:2px solid #00c0e8;color:#00c0e8}.exercisesContainer>div:nth-of-type(8) .exerciseMeta,.exercisesContainer>div:nth-of-type(8) .icon{border:2px solid #08f;color:#08f}.exercisesContainer>div:nth-of-type(9) .exerciseMeta,.exercisesContainer>div:nth-of-type(9) .icon{border:2px solid #6155f5;color:#6155f5}.exercisesContainer>div:nth-of-type(10) .exerciseMeta,.exercisesContainer>div:nth-of-type(10) .icon{border:2px solid #cb30e0;color:#cb30e0}.exercisesContainer>div:nth-of-type(11) .exerciseMeta,.exercisesContainer>div:nth-of-type(11) .icon{border:2px solid #ff2d55;color:#ff2d55}.exercisesContainer>div:nth-of-type(12) .exerciseMeta,.exercisesContainer>div:nth-of-type(12) .icon{border:2px solid #ac7f5e;color:#ac7f5e}.patternContainer{bottom:0;display:flex;flex-direction:column;left:0;position:absolute;right:0;top:0}.score{border-top:2px solid var(--border);height:70px;z-index:1}.patterns,.score{position:relative}.patterns{flex:1 1}.pattern,.tonality{align-items:center;background:#fff;border:2px solid var(--border);border-radius:50%;bottom:-25px;display:flex;font-family:serif;font-size:30px;height:50px;justify-content:center;position:absolute;width:50px;z-index:2}.flat:after,.sharp:after{font-size:1rem;margin-left:-2px}.sharp:after{content:"♯"}.flat:after{content:"♭"}.pattern{color:var(--primary);right:20px}.tonality{left:20px}.controls{border-top:2px solid var(--border);height:50px}.controls,.controls>div{align-items:center;display:flex}.controls>div{color:var(--lightText);justify-content:center;width:30px}.controlsTrack{align-items:normal!important;background:var(--border);border-radius:20px;display:flex;flex:1 1;height:20px;justify-content:normal!important;overflow:hidden}.controlsProgress{background:var(--primary);width:20%}.tablature{bottom:0;left:0;position:absolute;right:0;top:25px}.notes div:first-child,.strings div:first-child{margin-left:0;margin-top:0;opacity:0}.notes div:last-child,.strings div:last-child{margin-bottom:0;margin-right:0;opacity:0}.fingers,.notes,.notesLabels,.strings{display:flex;height:100%;left:0;position:absolute;top:0;width:100%}.strings div{background:#000;height:100%;margin:auto;width:3px}.notes{flex-direction:column;z-index:-1}.notes div{background:var(--border);height:2px;margin:auto;width:100%}.notesLabels div{align-items:center;background:none;background:var(--border);border-radius:50%;color:var(--lightText);display:flex;height:30px;justify-content:center;position:absolute;transform:translate(-50%,-50%);width:30px}.notesLabels div:empty{display:none}.fingers div{align-items:center;border-radius:50%;display:flex;height:35px;justify-content:center;position:absolute;transform:translate(-50%,-50%);width:35px}.fingers div:after{color:#fff;font-size:1rem}.s1{background:#6b3184;left:80%}.s2{background:#2862a3;left:60%}.s3{background:#236742;left:40%}.s4{background:#f2e705;left:20%}.n1{top:7.14286%}.n2{top:14.28571%}.n3{top:21.42857%}.n4{top:28.57143%}.n5{top:35.71429%}.n6{top:42.85714%}.n7{top:50%}.n8{top:57.14286%}.n9{top:64.28571%}.n10{top:71.42857%}.n11{top:78.57143%}.n12{top:85.71429%}.n13{top:92.85714%}.f1:after{content:"1"}.f2:after{content:"2"}.f3:after{content:"3"}.f4:after{content:"4"}.scoreControls div{align-items:center;bottom:0;color:var(--lightText);display:flex;left:0;padding:0 10px;position:absolute;top:0}.scoreControls>div:last-child{left:auto;right:0}.scoreDrag{height:100%}.controls div:active,.scoreControls div:active{opacity:.4}.scoreControls .controlsTrack:active{opacity:1}#scoreAbc{align-items:center;display:flex!important;height:100%!important;justify-content:center;padding:0!important}#scoreAbc svg{display:block!important;height:80%;left:auto!important;position:relative!important;top:auto!important}.exercisesList{margin-top:10px}.exercisesContainer h4{font-size:1.3rem;margin-top:30px}.disabled{position:relative}.disabled:after{background:var(--bgTrans);bottom:0;content:"";left:0;position:absolute;right:0;top:-5px}.exercisesContainer p{color:var(--lightText);-webkit-hyphens:auto;hyphens:auto;margin-top:5px;overflow:hidden;position:relative;text-align:justify}.exercisesContainer p:active{opacity:.4}.exercisesContainer p:after{background:var(--bg);background:linear-gradient(to right,#0000 0,var(--bg) 40%,var(--bg) 100%);content:"See more";font-weight:700;position:absolute;right:0;text-align:right;top:18px;width:130px}.exercisesContainer p.open:after{display:none}.formContainer{width:100%}.button.isOpen{align-items:center;background:#fff;box-shadow:0 0 20px var(--shadow);display:flex;justify-content:center;margin:auto;max-width:700px}.button.isOpen:active{opacity:1!important}.button:active{opacity:.4}.button.isOpen:after{background:var(--border);border-radius:10px;content:"";height:5px;left:50%;position:absolute;top:10px;transform:translateX(-50%);width:80px;z-index:3}
/*# sourceMappingURL=main.f47495f3.css.map*/