@import"https://fonts.googleapis.com/css?family=Nunito";html *{-webkit-tap-highlight-color:rgba(0,0,0,0)}html,body{height:100%;width:100%;overflow:hidden}body{padding:0;margin:0;font-family:Nunito,verdana,sans-serif;-webkit-user-select:none!important;touch-action:manipulation}a{-webkit-user-select:none!important}.App{display:flex;flex-direction:column;height:100vh;width:100vw;overflow:hidden}.app-content{flex:1;position:relative;overflow:hidden}svg,g{display:block}.flex-container-full{display:flex;position:absolute;overflow:hidden;inset:0;justify-content:center;align-items:center;flex-direction:column}.congrats{background-color:#109618;color:#fff;border-radius:5px}.wrong{background-color:#f44336;color:#fff;border-radius:5px}.help-button{width:35px;height:35px;padding:5px;margin-right:120px;border-radius:2px;margin-top:10px;text-align:"center"}.next-button{width:70px;height:35px;padding:5px;font-size:14px;margin-left:120px;border-radius:2px;margin-top:10px;text-align:"center"}.next-menu-button{width:80px;height:40px;text-align:"center";border-radius:2px;margin:5px;font-size:12px}.next-level-button,.play-again{animation:swell 1s;animation-iteration-count:10}.summary-container div,.summary-container h3{text-align:center}.summary-container h3{font-size:14px}.column-flex{display:flex;width:33%;flex-direction:column;justify-content:space-between}.outer-column{margin:10px 0}.first-column{margin-left:10px}.last-column{align-items:flex-end;margin-right:10px}.submit{align-self:center;height:100px;margin-bottom:10px;width:100px;background-color:#109618;color:#fff;border-radius:5px}.side-button{width:80px;height:60px}button{display:inline-block;cursor:pointer;pointer-events:all;appearance:none;font-size:20px;box-shadow:none;border-radius:0;transform:scale(1)}button:focus{outline:none}button{color:#fff;background:#109618;font-family:Nunito,verdana,sans-serif;border:0px}.circles{fill:#dc3912;transform:scale(1);opacity:1}.circle-0{fill:#36c}.circle-1{fill:#dc3912}.circle-2{fill:#f90}.circle-3{fill:#109618}@keyframes swell{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}.swell-repeat{animation:swell 1s infinite}@keyframes bigFade{0%{transform:scale(1);opacity:1}to{transform:scale(4);opacity:0}}.circle-under-0,.circle-under-1,.circle-under-2,.circle-under-3{animation:bigFade .3s}.selected-circle-0{stroke-width:4px;stroke:#17becf;fill:#36c;transition:fill .5s}.selected-circle-1{stroke-width:4px;stroke:#17becf;fill:#dc3912;transition:fill .5s}.selected-circle-2{stroke-width:4px;stroke:#17becf;fill:#f90;transition:fill .5s}.selected-circle-3{stroke-width:4px;stroke:#17becf;fill:#109618;transition:fill .5s}.selected-svg-circle{stroke-width:4px;stroke:#17becf}.chord-name{margin-top:10px;text-align:center}.correct-leave{transform:translate(0);opacity:1}.correct-leave.correct-leave-active{transform:translateY(-200px);opacity:.1;transition:.25s ease-in-out}.incorrect-leave{transform:translate(0);opacity:1}.incorrect-leave.incorrect-leave-active{transform:translateY(200px);opacity:.1;transition:.25s ease-in-out}.demo2-ball{position:absolute;border:1px solid black;border-radius:99px;width:50px;height:50px}input[type=color],input[type=date],input[type=datetime],input[type=datetime-local],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select:focus,textarea{font-size:16px}.maintenance-banner{position:relative;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:16px 20px;box-shadow:0 2px 8px #00000026;z-index:1000;width:100%;box-sizing:border-box}.maintenance-banner .close-button{position:absolute;top:8px;right:8px;background:#fff3;border:none;color:#fff;font-size:24px;width:32px;height:32px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease;padding:0;line-height:1}.maintenance-banner .close-button:hover{background:#ffffff4d}.maintenance-banner .close-button:active{background:#fff6}.maintenance-banner .banner-content{display:flex;align-items:center;gap:16px;max-width:1200px;margin:0 auto;padding-right:40px}.maintenance-banner .banner-content .app-icon{width:60px;height:60px;border-radius:12px;box-shadow:0 2px 8px #0003;flex-shrink:0}.maintenance-banner .banner-content .banner-text{flex:1;min-width:0}.maintenance-banner .banner-content .banner-text .banner-message{margin:0 0 12px;font-size:15px;line-height:1.4}.maintenance-banner .banner-content .banner-text .banner-message strong{font-weight:600}.maintenance-banner .banner-content .banner-text .banner-links{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.maintenance-banner .banner-content .banner-text .banner-links .web-link{display:inline-block;background:#fff;color:#667eea;padding:8px 16px;border-radius:6px;text-decoration:none;font-weight:600;font-size:14px;transition:transform .2s ease,box-shadow .2s ease;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:rgba(102,126,234,.3);touch-action:manipulation;user-select:none;-webkit-user-select:none}.maintenance-banner .banner-content .banner-text .banner-links .web-link:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0003}.maintenance-banner .banner-content .banner-text .banner-links .web-link:active{transform:translateY(0)}.maintenance-banner .banner-content .banner-text .banner-links .app-store-link{display:inline-block;cursor:pointer;-webkit-tap-highlight-color:rgba(102,126,234,.3);touch-action:manipulation}.maintenance-banner .banner-content .banner-text .banner-links .app-store-link .app-store-badge{height:40px;width:auto;transition:transform .2s ease;pointer-events:none}.maintenance-banner .banner-content .banner-text .banner-links .app-store-link:hover .app-store-badge{transform:scale(1.05)}@media(max-width:640px){.maintenance-banner{padding:12px 16px}.maintenance-banner .close-button{width:28px;height:28px;font-size:20px;top:6px;right:6px}.maintenance-banner .banner-content{gap:12px;padding-right:36px}.maintenance-banner .banner-content .app-icon{width:50px;height:50px;border-radius:10px}.maintenance-banner .banner-content .banner-text .banner-message{font-size:14px;margin-bottom:10px}.maintenance-banner .banner-content .banner-text .banner-message br{display:inline}.maintenance-banner .banner-content .banner-text .banner-message br:after{content:" "}.maintenance-banner .banner-content .banner-text .banner-links{gap:12px}.maintenance-banner .banner-content .banner-text .banner-links .web-link{font-size:13px;padding:7px 14px}.maintenance-banner .banner-content .banner-text .banner-links .app-store-link .app-store-badge{height:36px}}@media(max-width:400px){.maintenance-banner .banner-content .app-icon{width:44px;height:44px}.maintenance-banner .banner-content .banner-text .banner-message{font-size:13px}.maintenance-banner .banner-content .banner-text .banner-links{flex-direction:column;align-items:flex-start;gap:8px}.maintenance-banner .banner-content .banner-text .banner-links .web-link{font-size:12px;padding:6px 12px}.maintenance-banner .banner-content .banner-text .banner-links .app-store-link .app-store-badge{height:32px}}