body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}:root{--grad_k:linear-gradient(180deg,#000,#000,rgba(255,0,0,0));--black1:#000;--gray1:#555;--fretTrans:hsla(0,0%,100%,.05);--fretTrans2:hsla(0,0%,100%,.1);--fretTrans3:hsla(0,0%,100%,.15);--fretTrans4:hsla(0,0%,100%,.2);--fretTrans5:hsla(60,15%,54%,.3);--fadeTime:.7s;--boardWidth:100vw}*{border:0 solid #000;box-sizing:border-box;color:#fff;color:var(--white1);font-family:sans-serif;font-size:1em;margin:0;padding:0;text-align:center}html{scroll-behavior:smooth}body{background-color:#000!important;background-color:var(--black1)!important;height:100vh;overflow:hidden}.titlenav{background-image:linear-gradient(180deg,#000,#000,rgba(255,0,0,0));background-image:var(--grad_k);padding:.2em .2em 4vh;position:fixed;top:0;width:100%;z-index:4}#chartTitle1,#chartTitle2{-webkit-font-feature-settings:"smcp";font-feature-settings:"smcp";font-size:2rem;font-variant-caps:small-caps;line-height:2.25rem}.keyName1{color:#fff;color:var(--white1)}.keyName2{color:#555;color:var(--gray1)}#titlePipe{-webkit-font-feature-settings:"smcp";font-feature-settings:"smcp";font-size:2rem;font-variant-caps:small-caps}#chartDesc,#titlePipe{color:#fff;color:var(--white1);position:relative}#chartDesc{background-color:#000;background-color:var(--black1);font-size:1rem;top:1em}#chartDesc.active{top:0}.icon-tut{display:inline;max-width:7vw}.icon-tut2{display:inline;max-width:30vw}#sett-btn{position:fixed;right:3vw;top:5.5vh;transition:top .2s ease;width:15vw;z-index:5}#sett-btn.active{top:.125vh;transition:top .2s ease}#xmenu1-btn{left:3vw;opacity:0;position:fixed;top:3.5vh;width:15vw;z-index:3}#xmenu1-btn.active{opacity:1;top:5.5vh;transition:all .5s ease;z-index:4}#is-sharp-btn{left:3vw;position:fixed;top:5.5vh;width:15vw;z-index:4}#is-sharp-btn.active{left:3vw;top:33vh;transition:top .75s ease}#chord-btn{left:3vw;position:fixed;top:23vh;transition:all .5s ease;width:15vw;z-index:3}#chord-btn.active{left:24vw;top:10vh;transition:all .5s ease}#sound-btn{position:fixed;right:3vw;top:13vh;transition:all .5s ease;width:15vw;z-index:3}#sound-btn.active{right:24vw;top:10vh;transition:all .5s ease}.chord-row{display:flex;justify-content:center}.chord-item{border:2px solid #555;border-radius:3em;margin:.65em;padding:.75rem 0;width:25vw}.chord-item>p{margin:0;padding:.65rem 0}#i-chord,#iii-chord,#vi-chord{position:relative;top:-1.5rem}.chord-name{background-color:#555;font-size:2em}.chord-number{font-family:Times New Roman,Times,serif;font-size:2em;line-height:.5rem;position:relative;top:-.125em}.chord-triad{background-color:#333;padding:1.5em 0}#inst-btn{top:35vh;z-index:1}#fret-btn,#inst-btn{left:3vw;position:fixed;width:15vw}#fret-btn{top:13vh;z-index:2}.wrapper{height:105%;left:50%;margin-left:-50vw;margin-left:calc(var(--boardWidth)*-.5);overflow-x:hidden;position:absolute;top:0;transition:all .5s;width:100vw;width:var(--boardWidth)}#fngrbrd_container{aspect-ratio:9/48;background-clip:initial;background-position:bottom;background-repeat:no-repeat;background-size:auto 100%;color:#fff;color:var(--white1);display:grid;grid-template-rows:4% 2.3% 5.1% 5.1% 5% 4.7% 4.7% 4.5% 4.3% 4.2% 4.1% 3.9% 3.8% 3.8% 3.4% 3.2% 3% 2.6% 3% 25%;top:3vh;transition:all .5s;width:100%;z-index:0}.v4_bg{background-image:url(/static/media/v4_bg.c20aa3ee36258375734b.png)}.v5_bg{background-image:url(/static/media/v5_bg.0f93f3b933af548620ef.png)}.va_bg{background-image:url(/static/media/va_bg.fdfbff279fc6f20dacfa.png)}.vc_bg{background-image:url(/static/media/vc_bg.0db6ae8474260adcd0e8.png)}.chart-frets{background-color:transparent;background-color:var(--transp);border:1px solid hsla(0,0%,100%,.15);border:1px solid var(--fretTrans3);border-radius:10%/40%;display:grid;padding-left:15.5%;padding-right:15.5%;position:relative;transition:all .5s;z-index:0}.fret-highlight{background-color:hsla(0,0%,100%,.15);background-color:var(--fretTrans3);border:1px solid #fff;border:1px solid var(--white1);transition:all .5s}.fret-lowlight{background-color:hsla(0,0%,100%,.1);background-color:var(--fretTrans2);border:1px solid hsla(0,0%,100%,.2);border:1px solid var(--fretTrans4);transition:all .5s}.strangs4{grid-template-columns:1fr 1fr 1fr 1fr}.strangs4>div{background-size:9vw}.strangs5{grid-template-columns:1fr 1fr 1fr 1fr 1fr}.strangs5>div{background-size:7.5vw}.fretLabel{-webkit-font-feature-settings:"smcp";font-feature-settings:"smcp";bottom:0;color:hsla(0,0%,100%,.2);color:var(--fretTrans4);font-variant-caps:small-caps;font-weight:bolder;padding:.25em;position:absolute;transition:color .5s;width:100%}.mrkPlace{background-image:url();background-position:50%;background-repeat:no-repeat;transition:opacity .4s}#_op{background-color:transparent;background-color:var(--transp);border:0 solid #000;padding-left:30%!important;padding-right:30%!important;position:-webkit-sticky;position:sticky;top:22vw;z-index:1}#_1L{padding-left:29.5%!important;padding-right:29.5%!important}#_1H{padding-left:28.5%!important;padding-right:28.5%!important}#_2L{padding-left:27.5%!important;padding-right:27.5%!important}#_2H{padding-left:26.8%!important;padding-right:26.8%!important}#_3L{padding-left:25.5%!important;padding-right:25.5%!important}#_3H{padding-left:24.5%!important;padding-right:24.5%!important}#_4{padding-left:23.5%!important;padding-right:23.5%!important}#_5L{padding-left:22.5%!important;padding-right:22.5%!important}#_5H{padding-left:22%!important;padding-right:22%!important}#_6L{padding-left:20.5%!important;padding-right:20.4%!important}#_6H{padding-left:19.5%!important;padding-right:18.6%!important}#_7L{padding-left:17.8%!important;padding-right:17.8%!important}#_7H{padding-left:16%!important;padding-right:16%!important}#_8L{padding-left:15.5%!important;padding-right:15.5%!important}#_8h{padding-left:14.5%!important;padding-right:14.5%!important}#_9L{padding-left:13.5%!important;padding-right:13.5%!important}#_9H{padding-left:12.5%!important;padding-right:12.5%!important}.overlay{align-items:center;background:rgba(0,0,0,.8);display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100vw;z-index:1000}@media (max-width:768px){.overlay{display:none}}.overlay-content{background:#000;border-radius:8px;max-width:500px;padding:20px;text-align:center}.content{padding:20px}:root{--deg30:30deg;--transp:transparent;--transp50:hsla(0,0%,100%,.5);--white1:#fff;--yellow:rgba(255,216,0,.5);--black2:rgba(0,0,0,.95)}.keyCircles:hover{border:1px solid red}.keyMenu{align-items:center;background-color:rgba(0,0,0,.95);background-color:var(--black2);display:flex;height:0;justify-content:center;position:fixed;width:0;z-index:0}.keyMenu.active{height:100vh;width:100vw;z-index:3}.keyMenu li{list-style:none}.keyMenu li div{left:0;padding:1em;position:absolute;-webkit-transform-origin:50vw;transform-origin:50vw;transition:.2s;transition-delay:calc(.01s*var(--i));visibility:hidden}.keyMenu.active li div{align-content:center;display:flex;height:25vw;justify-content:center;-webkit-transform:rotate(calc(30deg*var(--i)));transform:rotate(calc(30deg*var(--i)));visibility:visible;width:25vw}.keyMenu.active li div img{-webkit-transform:rotate(calc(-30deg*var(--i)));transform:rotate(calc(-30deg*var(--i)));width:100%}.mj_mode{font-size:10em}.settMenu{align-items:center;background-color:var(--black2);display:block;height:0;justify-content:center;overflow:hidden;position:fixed;width:100vw;z-index:4}.settMenu.active{height:100vh;width:100vw}.settItem{background-color:hsla(0,0%,8%,.85);padding:1em;width:100%}.settItem>p{color:#b8860b;font-size:1.5em;text-decoration:none}.accPanel{display:flex;flex-direction:row;height:0;opacity:0;overflow-x:scroll;overflow-y:hidden;scroll-snap-stop:always;scroll-snap-type:x mandatory;width:100vw}.accPanel,.accPanel.active{transition:height 1s ease;transition:opacity 1s ease}.accPanel.active{height:auto;opacity:1}accPanel.active>p{display:block}.text{padding:2em}.instOpt{min-width:99vw;scroll-snap-align:start;scroll-snap-stop:always;scroll-snap-type:mandatory}.instOpt>img{max-height:100vw}.instOpt>p{color:hsla(0,0%,76%,.85);font-weight:700;margin:0;padding:.5em;text-align:left}.instOpt>h3{padding:1em}.instOpt>h1,.instOpt>h3{color:#9b9b9b;font-weight:700;margin:0}.instOpt>h1{font-size:1.25em;padding-bottom:.5em;padding-top:1em}.next{height:auto;opacity:30%;position:absolute;top:66%;width:7vw}.left{left:5vw;rotate:180deg}.right{right:5vw}.chordMenu{background-color:var(--black2);display:block;height:0;justify-content:center;overflow:hidden;padding:0;position:fixed;width:100vw;z-index:2}.chordMenu.active{height:100vh;padding-top:15vh;width:100vw}
/*# sourceMappingURL=main.fccd7f66.css.map*/