:root{--theme-background:#2a303c;--theme-lite:#464e5f;--theme-mid:#464e5f;--theme-strong:#e2e8f0;--theme-pop:#4ca2a1;--theme-background-light:var(--theme-lite);--theme-background-dark:var(--theme-background);--theme-text:var(--theme-strong);--theme-text-muted:var(--theme-mid);--theme-accent:var(--theme-pop);--theme-border:var(--theme-mid);--theme-shadow:rgba(0,0,0,.1)}.theme-bg{background-color:#2a303c;background-color:var(--theme-background)}.theme-bg-lite{background-color:#464e5f;background-color:var(--theme-lite)}.theme-bg-mid{background-color:#464e5f;background-color:var(--theme-mid)}.theme-text{color:#e2e8f0;color:var(--theme-strong)}.theme-text-muted{color:#464e5f;color:var(--theme-mid)}.theme-accent{color:#4ca2a1;color:var(--theme-pop)}.theme-border{border-color:#464e5f;border-color:var(--theme-mid)}.theme-card{background-color:#2a303c;background-color:var(--theme-background);border:1px solid #464e5f;border:1px solid var(--theme-mid);border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.1);box-shadow:0 2px 8px var(--theme-shadow);color:#e2e8f0;color:var(--theme-strong);padding:16px}.theme-button{background-color:#4ca2a1;background-color:var(--theme-pop);border:1px solid #4ca2a1;border:1px solid var(--theme-pop);border-radius:4px;cursor:pointer;padding:8px 16px;transition:all .2s ease}.theme-button,.theme-button:hover{color:#2a303c;color:var(--theme-background)}.theme-button:hover{background-color:#e2e8f0;background-color:var(--theme-strong)}.theme-input{background-color:#2a303c;background-color:var(--theme-background);border:1px solid #464e5f;border:1px solid var(--theme-mid);border-radius:4px;color:#e2e8f0;color:var(--theme-strong);padding:8px 12px}.theme-input:focus{border-color:#4ca2a1;border-color:var(--theme-pop);box-shadow:0 0 0 2px rgba(76,162,161,.2);outline:none}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#202124;background:var(--theme-background,#202124);color:#fff;color:var(--theme-strong,#fff);font-family:-apple-system,BlinkMacSystemFont,Roboto Mono,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:auto;padding:2rem}.vexbox{background-color:#fff;flex-direction:column;height:150px;justify-content:center}.selectionContainer,.vexbox{align-items:center;display:flex}.selectionContainer{border:2px dashed #f69c55;display:table;font-size:24px;height:32pt;justify-content:left;text-align:center;width:100%}.staveContainer{background-color:#fff;display:flex}.fixed{width:300px}.flex-item{flex-grow:1}.container{display:flex;justify-content:right;width:100%}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}body{margin:0}:root{--keyboard:#520052;--keyboard-shadow:hsla(19,50%,66%,.2);--keyboard-border:#180901;--black-10:rgba(0,0,0,.1);--black-20:rgba(0,0,0,.2);--black-30:rgba(0,0,0,.3);--black-50:rgba(0,0,0,.5);--black-60:rgba(0,0,0,.6);--white-20:hsla(0,0%,100%,.2);--white-50:hsla(0,0%,100%,.5);--white-80:hsla(0,0%,100%,.8)}.black,.white{align-items:center;cursor:pointer;display:flex;float:left;justify-content:right;padding:.5rem 0;position:relative;-webkit-user-select:none;user-select:none;-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl}#keyboard li:first-child{border-radius:5px 0 5px 5px}#keyboard li:last-child{border-radius:0 5px 5px 5px}.white{background:#fff;border-bottom:1px solid #bababa;border-left:1px solid #bababa;border-radius:0 0 5px 5px;box-shadow:inset -1px 0 0 hsla(0,0%,100%,.8),inset 0 0 5px #ccc,0 0 3px rgba(0,0,0,.2);box-shadow:-1px 0 0 var(--white-80) inset,0 0 5px #ccc inset,0 0 3px var(--black-20);color:rgba(0,0,0,.3);color:var(--black-30);height:12.5rem;width:1.81818%;width:calc(100%/var(--num-keys, 55));z-index:1}.black{background:linear-gradient(45deg,#212121,#545454);border:1px solid #000;border-radius:0 0 3px 3px;box-shadow:inset -1px -1px 2px hsla(0,0%,100%,.2),inset 0 -5px 2px 3px rgba(0,0,0,.6),0 2px 4px rgba(0,0,0,.5);box-shadow:-1px -1px 2px var(--white-20) inset,0 -5px 2px 3px var(--black-60) inset,0 2px 4px var(--black-50);color:hsla(0,0%,100%,.5);color:var(--white-50);height:8rem;margin:0 0 0 -.75rem;width:1%;width:calc(100%/var(--num-keys, 50)/2);z-index:2}.white.pressed{background:linear-gradient(180deg,#fff 0,#e8e8e8);border-bottom:1px solid #999;border-left:1px solid #999;border-top:1px solid #787878;box-shadow:inset 2px 0 3px rgba(0,0,0,.1),inset -5px 5px 20px rgba(0,0,0,.2),0 0 3px rgba(0,0,0,.2);box-shadow:2px 0 3px var(--black-10) inset,-5px 5px 20px var(--black-20) inset,0 0 3px var(--black-20);outline:none}.white.highlightedKey{background-color:#036fd3}.black.highlightedKey{background:#036fd3}.white.pressedKey{background-color:#d38703}.black.pressedKey{background:#d3a903}.black.pressedKey.highlightedKey,.white.pressedKey.highlightedKey{background:repeating-linear-gradient(45deg,#036fd3,#036fd3 10px,#d3a903 0,#d3a903 20px)}.white.scaleKey{background-color:#8003d3}.black.scaleKey{background:#8003d3}.black.scaleKey.highlightedKey,.white.scaleKey.highlightedKey{background:repeating-linear-gradient(45deg,#8003d3,#8003d3 10px,#036fd3 0,#036fd3 20px)}.black.pressedKey.scaleKey,.white.pressedKey.scaleKey{background:repeating-linear-gradient(45deg,#8003d3,#8003d3 10px,#d3a903 0,#d3a903 20px)}.black.pressedKey.scaleKey.highlightedKey,.white.pressedKey.scaleKey.highlightedKey{background:repeating-linear-gradient(45deg,#8003d3,#8003d3 10px,#d3a903 0,#d3a903 20px,#036fd3 0,#036fd3 30px)}.black.pressed{background:linear-gradient(90deg,#454545 0,#212121);box-shadow:inset -1px -1px 2px hsla(0,0%,100%,.2),inset 0 -2px 2px rgba(123,0,200,.6),0 1px 2px rgba(0,0,0,.5);box-shadow:-1px -1px 2px var(--white-20) inset,0 -2px 2px rgba(123,0,200,.6) inset,0 1px 2px var(--black-50);outline:none}.offset{margin:0 0 0 -.66667%;margin:0 0 0 calc(-100%/var(--num-keys, 50)/3)}#keyboard{display:flex;height:12.5rem;justify-content:center;padding:0;position:relative}.tableCell{border:2px dashed #55dbf6;clear:left;display:table-cell}.switch,.tableCell{vertical-align:middle}.switch{height:24pt;position:relative;width:48pt}.switch input{height:0;opacity:0;width:0}.slider{background-color:#ccc;bottom:0;cursor:pointer;left:0;right:0;top:0}.slider,.slider:before{position:absolute;transition:.4s}.slider:before{background-color:#fff;bottom:2pt;content:"";height:20pt;left:4pt;width:20pt}input:checked+.slider{background-color:#2196f3}input:focus+.slider{box-shadow:0 0 1px #2196f3}input:checked+.slider:before{-webkit-transform:translateX(20pt);transform:translateX(20pt)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.btn{border:none;color:#fff;cursor:pointer;height:45pt}.success{background-color:#04aa6d}.success:hover{background-color:#46a049}.info{background-color:#2196f3}.info:hover{background:#0b7dda}.warning{background-color:#ff9800}.warning:hover{background:#e68a00}.danger{background-color:#f44336}.danger:hover{background:#da190b}.default{background-color:#e7e7e7;color:#000}.default:hover{background:#ddd}.tab{background-color:#111;border:1px solid #ccc;float:left;height:650px;width:15%}.tab button{background-color:inherit;border:none;color:#000;color:#818181;cursor:pointer;display:block;font-size:16pt;outline:none;padding:22px 16px;text-align:left;width:100%}.tab button.active,.tab button:hover{background-color:#fff}.tabcontent{border:1px solid #ccc;border-left:none;display:none;float:left;font-size:18pt;height:1010px;padding:0 12px;width:100%}.clearfix:after{clear:both;content:"";display:table}*{box-sizing:border-box}body{font-family:Lato,sans-serif}h4{font-size:24pt}h3{font-size:36pt}[data-animation]{-webkit-animation:1s infinite running;animation:1s infinite running;-webkit-animation:var(--animdur,1s) var(--animic,infinite) var(--animps,running);animation:var(--animdur,1s) var(--animic,infinite) var(--animps,running)}.metronome{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;background:red;height:60px;width:4%}.metronome01{--box-shadow-color:#fde725;-webkit-animation-name:animation01;animation-name:animation01}.metronome01,.metronome02{background:var(--box-shadow-color);box-shadow:0 0 30px var(--box-shadow-color),inset 0 0 5px}.metronome02{--box-shadow-color:#c8e020;-webkit-animation-name:animation02;animation-name:animation02}.metronome03{--box-shadow-color:#90d743;-webkit-animation-name:animation03;animation-name:animation03}.metronome03,.metronome04{background:var(--box-shadow-color);box-shadow:0 0 30px var(--box-shadow-color),inset 0 0 5px}.metronome04{--box-shadow-color:#5ec962;-webkit-animation-name:animation04;animation-name:animation04}.metronome05{--box-shadow-color:#35b779;-webkit-animation-name:animation05;animation-name:animation05}.metronome05,.metronome06{background:var(--box-shadow-color);box-shadow:0 0 30px var(--box-shadow-color),inset 0 0 5px}.metronome06{--box-shadow-color:#20a486;-webkit-animation-name:animation06;animation-name:animation06}.metronome07{--box-shadow-color:#21918c;-webkit-animation-name:animation07;animation-name:animation07}.metronome07,.metronome08{background:var(--box-shadow-color);box-shadow:0 0 30px var(--box-shadow-color),inset 0 0 5px}.metronome08{--box-shadow-color:#287c8e;-webkit-animation-name:animation08;animation-name:animation08}.metronome09{--box-shadow-color:#31688e;-webkit-animation-name:animation09;animation-name:animation09}.metronome09,.metronome10{background:var(--box-shadow-color);box-shadow:0 0 30px var(--box-shadow-color),inset 0 0 5px}.metronome10{--box-shadow-color:#3b528b;-webkit-animation-name:animation10;animation-name:animation10}.metronome11{--box-shadow-color:#443983;-webkit-animation-name:animation11;animation-name:animation11}.metronome11,.metronome12{background:var(--box-shadow-color);box-shadow:0 0 30px var(--box-shadow-color),inset 0 0 5px}.metronome12{--box-shadow-color:#481f70;-webkit-animation-name:animation12;animation-name:animation12}.metronome13{--box-shadow-color:#440154;-webkit-animation-name:animation13;animation-name:animation13}.metronome13,.metronome14{background:var(--box-shadow-color);box-shadow:0 0 30px var(--box-shadow-color),inset 0 0 5px}.metronome14{--box-shadow-color:#481f70;-webkit-animation-name:animation14;animation-name:animation14}.metronome15{--box-shadow-color:#443983;-webkit-animation-name:animation15;animation-name:animation15}.metronome15,.metronome16{background:var(--box-shadow-color);box-shadow:0 0 30px var(--box-shadow-color),inset 0 0 5px}.metronome16{--box-shadow-color:#3b528b;-webkit-animation-name:animation16;animation-name:animation16}.metronome17{--box-shadow-color:#31688e;-webkit-animation-name:animation17;animation-name:animation17}.metronome17,.metronome18{background:var(--box-shadow-color);box-shadow:0 0 30px var(--box-shadow-color),inset 0 0 5px}.metronome18{--box-shadow-color:#287c8e;-webkit-animation-name:animation18;animation-name:animation18}.metronome19{--box-shadow-color:#21918c;-webkit-animation-name:animation19;animation-name:animation19}.metronome19,.metronome20{background:var(--box-shadow-color);box-shadow:0 0 30px var(--box-shadow-color),inset 0 0 5px}.metronome20{--box-shadow-color:#20a486;-webkit-animation-name:animation20;animation-name:animation20}.metronome21{--box-shadow-color:#35b779;-webkit-animation-name:animation21;animation-name:animation21}.metronome21,.metronome22{background:var(--box-shadow-color);box-shadow:0 0 30px var(--box-shadow-color),inset 0 0 5px}.metronome22{--box-shadow-color:#5ec962;-webkit-animation-name:animation22;animation-name:animation22}.metronome23{--box-shadow-color:#90d743;-webkit-animation-name:animation23;animation-name:animation23}.metronome23,.metronome24{background:var(--box-shadow-color);box-shadow:0 0 30px var(--box-shadow-color),inset 0 0 5px}.metronome24{--box-shadow-color:#c8e020;-webkit-animation-name:animation24;animation-name:animation24}[data-animation-pause]:checked~[data-animation]{--animps:paused}@-webkit-keyframes animation01{0%{opacity:.9}1%{opacity:.7}2%{opacity:.4}2%{opacity:.1}91%{opacity:.2}92%{opacity:.2}92%{opacity:.3}93%{opacity:.3}93%{opacity:.4}94%{opacity:.4}94%{opacity:.5}95%{opacity:.5}95%{opacity:.6}96%{opacity:.7}97%{opacity:.8}98%{opacity:.9}to{opacity:.9}}@keyframes animation01{0%{opacity:.9}1%{opacity:.7}2%{opacity:.4}2%{opacity:.1}91%{opacity:.2}92%{opacity:.2}92%{opacity:.3}93%{opacity:.3}93%{opacity:.4}94%{opacity:.4}94%{opacity:.5}95%{opacity:.5}95%{opacity:.6}96%{opacity:.7}97%{opacity:.8}98%{opacity:.9}to{opacity:.9}}@-webkit-keyframes animation02{0%{opacity:.7}1%{opacity:.8}2%{opacity:.9}3%{opacity:.8}4%{opacity:.5}4%{opacity:.2}5%{opacity:.1}89%{opacity:.2}90%{opacity:.2}90%{opacity:.3}91%{opacity:.3}91%{opacity:.4}92%{opacity:.5}93%{opacity:.6}94%{opacity:.7}95%{opacity:.8}96%{opacity:.9}97%{opacity:.8}98%{opacity:.5}98%{opacity:.2}99%{opacity:.1}to{opacity:.1}}@keyframes animation02{0%{opacity:.7}1%{opacity:.8}2%{opacity:.9}3%{opacity:.8}4%{opacity:.5}4%{opacity:.2}5%{opacity:.1}89%{opacity:.2}90%{opacity:.2}90%{opacity:.3}91%{opacity:.3}91%{opacity:.4}92%{opacity:.5}93%{opacity:.6}94%{opacity:.7}95%{opacity:.8}96%{opacity:.9}97%{opacity:.8}98%{opacity:.5}98%{opacity:.2}99%{opacity:.1}to{opacity:.1}}@-webkit-keyframes animation03{0%{opacity:.4}0%{opacity:.5}1%{opacity:.5}1%{opacity:.6}2%{opacity:.7}3%{opacity:.8}4%{opacity:.9}6%{opacity:.6}6%{opacity:.3}7%{opacity:.1}87%{opacity:.2}88%{opacity:.3}89%{opacity:.4}90%{opacity:.5}91%{opacity:.6}92%{opacity:.7}93%{opacity:.8}93%{opacity:.9}95%{opacity:.7}96%{opacity:.4}96%{opacity:.1}to{opacity:.1}}@keyframes animation03{0%{opacity:.4}0%{opacity:.5}1%{opacity:.5}1%{opacity:.6}2%{opacity:.7}3%{opacity:.8}4%{opacity:.9}6%{opacity:.6}6%{opacity:.3}7%{opacity:.1}87%{opacity:.2}88%{opacity:.3}89%{opacity:.4}90%{opacity:.5}91%{opacity:.6}92%{opacity:.7}93%{opacity:.8}93%{opacity:.9}95%{opacity:.7}96%{opacity:.4}96%{opacity:.1}to{opacity:.1}}@-webkit-keyframes animation04{0%{opacity:.2}0%{opacity:.3}1%{opacity:.3}1%{opacity:.4}2%{opacity:.4}2%{opacity:.5}3%{opacity:.5}3%{opacity:.6}4%{opacity:.6}4%{opacity:.7}5%{opacity:.7}5%{opacity:.8}6%{opacity:.9}8%{opacity:.7}8%{opacity:.4}9%{opacity:.1}85%{opacity:.2}86%{opacity:.3}87%{opacity:.4}88%{opacity:.5}89%{opacity:.6}89%{opacity:.7}90%{opacity:.7}90%{opacity:.8}91%{opacity:.8}91%{opacity:.9}93%{opacity:.6}94%{opacity:.3}94%{opacity:.1}to{opacity:.1}}@keyframes animation04{0%{opacity:.2}0%{opacity:.3}1%{opacity:.3}1%{opacity:.4}2%{opacity:.4}2%{opacity:.5}3%{opacity:.5}3%{opacity:.6}4%{opacity:.6}4%{opacity:.7}5%{opacity:.7}5%{opacity:.8}6%{opacity:.9}8%{opacity:.7}8%{opacity:.4}9%{opacity:.1}85%{opacity:.2}86%{opacity:.3}87%{opacity:.4}88%{opacity:.5}89%{opacity:.6}89%{opacity:.7}90%{opacity:.7}90%{opacity:.8}91%{opacity:.8}91%{opacity:.9}93%{opacity:.6}94%{opacity:.3}94%{opacity:.1}to{opacity:.1}}@-webkit-keyframes animation05{0%{opacity:.1}2%{opacity:.2}3%{opacity:.3}4%{opacity:.4}4%{opacity:.5}5%{opacity:.5}5%{opacity:.6}6%{opacity:.6}6%{opacity:.7}7%{opacity:.7}7%{opacity:.8}8%{opacity:.8}8%{opacity:.9}10%{opacity:.8}10%{opacity:.5}11%{opacity:.2}11%{opacity:.1}83%{opacity:.2}84%{opacity:.3}85%{opacity:.4}85%{opacity:.5}86%{opacity:.5}86%{opacity:.6}87%{opacity:.6}87%{opacity:.7}88%{opacity:.7}88%{opacity:.8}89%{opacity:.8}89%{opacity:.9}91%{opacity:.8}91%{opacity:.5}92%{opacity:.2}92%{opacity:.1}to{opacity:.1}}@keyframes animation05{0%{opacity:.1}2%{opacity:.2}3%{opacity:.3}4%{opacity:.4}4%{opacity:.5}5%{opacity:.5}5%{opacity:.6}6%{opacity:.6}6%{opacity:.7}7%{opacity:.7}7%{opacity:.8}8%{opacity:.8}8%{opacity:.9}10%{opacity:.8}10%{opacity:.5}11%{opacity:.2}11%{opacity:.1}83%{opacity:.2}84%{opacity:.3}85%{opacity:.4}85%{opacity:.5}86%{opacity:.5}86%{opacity:.6}87%{opacity:.6}87%{opacity:.7}88%{opacity:.7}88%{opacity:.8}89%{opacity:.8}89%{opacity:.9}91%{opacity:.8}91%{opacity:.5}92%{opacity:.2}92%{opacity:.1}to{opacity:.1}}@-webkit-keyframes animation06{0%{opacity:.1}4%{opacity:.2}5%{opacity:.3}6%{opacity:.4}7%{opacity:.5}8%{opacity:.6}8%{opacity:.7}9%{opacity:.7}9%{opacity:.8}10%{opacity:.8}10%{opacity:.9}12%{opacity:.6}13%{opacity:.3}13%{opacity:.1}81%{opacity:.2}81%{opacity:.3}82%{opacity:.3}82%{opacity:.4}83%{opacity:.4}83%{opacity:.5}84%{opacity:.5}84%{opacity:.6}85%{opacity:.6}85%{opacity:.7}86%{opacity:.7}86%{opacity:.8}87%{opacity:.8}87%{opacity:.9}89%{opacity:.7}89%{opacity:.4}90%{opacity:.1}to{opacity:.1}}@keyframes animation06{0%{opacity:.1}4%{opacity:.2}5%{opacity:.3}6%{opacity:.4}7%{opacity:.5}8%{opacity:.6}8%{opacity:.7}9%{opacity:.7}9%{opacity:.8}10%{opacity:.8}10%{opacity:.9}12%{opacity:.6}13%{opacity:.3}13%{opacity:.1}81%{opacity:.2}81%{opacity:.3}82%{opacity:.3}82%{opacity:.4}83%{opacity:.4}83%{opacity:.5}84%{opacity:.5}84%{opacity:.6}85%{opacity:.6}85%{opacity:.7}86%{opacity:.7}86%{opacity:.8}87%{opacity:.8}87%{opacity:.9}89%{opacity:.7}89%{opacity:.4}90%{opacity:.1}to{opacity:.1}}@-webkit-keyframes animation07{0%{opacity:.1}6%{opacity:.2}7%{opacity:.3}8%{opacity:.4}9%{opacity:.5}10%{opacity:.6}11%{opacity:.7}12%{opacity:.8}12%{opacity:.9}14%{opacity:.7}15%{opacity:.4}15%{opacity:.1}78%{opacity:.2}79%{opacity:.2}79%{opacity:.3}80%{opacity:.3}80%{opacity:.4}81%{opacity:.4}81%{opacity:.5}82%{opacity:.5}82%{opacity:.6}83%{opacity:.6}83%{opacity:.7}84%{opacity:.8}85%{opacity:.9}87%{opacity:.6}87%{opacity:.3}88%{opacity:.1}to{opacity:.1}}@keyframes animation07{0%{opacity:.1}6%{opacity:.2}7%{opacity:.3}8%{opacity:.4}9%{opacity:.5}10%{opacity:.6}11%{opacity:.7}12%{opacity:.8}12%{opacity:.9}14%{opacity:.7}15%{opacity:.4}15%{opacity:.1}78%{opacity:.2}79%{opacity:.2}79%{opacity:.3}80%{opacity:.3}80%{opacity:.4}81%{opacity:.4}81%{opacity:.5}82%{opacity:.5}82%{opacity:.6}83%{opacity:.6}83%{opacity:.7}84%{opacity:.8}85%{opacity:.9}87%{opacity:.6}87%{opacity:.3}88%{opacity:.1}to{opacity:.1}}@-webkit-keyframes animation08{0%{opacity:.1}8%{opacity:.2}9%{opacity:.2}9%{opacity:.3}10%{opacity:.4}11%{opacity:.5}12%{opacity:.6}13%{opacity:.7}14%{opacity:.8}15%{opacity:.9}16%{opacity:.8}17%{opacity:.4}17%{opacity:.1}76%{opacity:.2}77%{opacity:.2}77%{opacity:.3}78%{opacity:.3}78%{opacity:.4}79%{opacity:.4}79%{opacity:.5}80%{opacity:.6}81%{opacity:.7}82%{opacity:.8}83%{opacity:.9}85%{opacity:.5}85%{opacity:.2}86%{opacity:.1}to{opacity:.1}}@keyframes animation08{0%{opacity:.1}8%{opacity:.2}9%{opacity:.2}9%{opacity:.3}10%{opacity:.4}11%{opacity:.5}12%{opacity:.6}13%{opacity:.7}14%{opacity:.8}15%{opacity:.9}16%{opacity:.8}17%{opacity:.4}17%{opacity:.1}76%{opacity:.2}77%{opacity:.2}77%{opacity:.3}78%{opacity:.3}78%{opacity:.4}79%{opacity:.4}79%{opacity:.5}80%{opacity:.6}81%{opacity:.7}82%{opacity:.8}83%{opacity:.9}85%{opacity:.5}85%{opacity:.2}86%{opacity:.1}to{opacity:.1}}@-webkit-keyframes animation09{0%{opacity:.1}10%{opacity:.2}11%{opacity:.2}11%{opacity:.3}12%{opacity:.3}12%{opacity:.4}13%{opacity:.4}13%{opacity:.5}14%{opacity:.6}15%{opacity:.7}16%{opacity:.8}17%{opacity:.9}19%{opacity:.5}19%{opacity:.2}20%{opacity:.1}74%{opacity:.2}75%{opacity:.2}75%{opacity:.3}76%{opacity:.4}77%{opacity:.5}78%{opacity:.6}79%{opacity:.7}80%{opacity:.8}81%{opacity:.9}82%{opacity:.8}83%{opacity:.4}83%{opacity:.1}to{opacity:.1}}@keyframes animation09{0%{opacity:.1}10%{opacity:.2}11%{opacity:.2}11%{opacity:.3}12%{opacity:.3}12%{opacity:.4}13%{opacity:.4}13%{opacity:.5}14%{opacity:.6}15%{opacity:.7}16%{opacity:.8}17%{opacity:.9}19%{opacity:.5}19%{opacity:.2}20%{opacity:.1}74%{opacity:.2}75%{opacity:.2}75%{opacity:.3}76%{opacity:.4}77%{opacity:.5}78%{opacity:.6}79%{opacity:.7}80%{opacity:.8}81%{opacity:.9}82%{opacity:.8}83%{opacity:.4}83%{opacity:.1}to{opacity:.1}}@-webkit-keyframes animation10{0%{opacity:.1}12%{opacity:.2}13%{opacity:.2}13%{opacity:.3}14%{opacity:.3}14%{opacity:.4}15%{opacity:.4}15%{opacity:.5}16%{opacity:.5}16%{opacity:.6}17%{opacity:.6}17%{opacity:.7}18%{opacity:.8}19%{opacity:.9}21%{opacity:.6}21%{opacity:.3}22%{opacity:.1}72%{opacity:.2}73%{opacity:.3}74%{opacity:.4}75%{opacity:.5}76%{opacity:.6}77%{opacity:.7}78%{opacity:.8}78%{opacity:.9}80%{opacity:.7}81%{opacity:.3}81%{opacity:.1}to{opacity:.1}}@keyframes animation10{0%{opacity:.1}12%{opacity:.2}13%{opacity:.2}13%{opacity:.3}14%{opacity:.3}14%{opacity:.4}15%{opacity:.4}15%{opacity:.5}16%{opacity:.5}16%{opacity:.6}17%{opacity:.6}17%{opacity:.7}18%{opacity:.8}19%{opacity:.9}21%{opacity:.6}21%{opacity:.3}22%{opacity:.1}72%{opacity:.2}73%{opacity:.3}74%{opacity:.4}75%{opacity:.5}76%{opacity:.6}77%{opacity:.7}78%{opacity:.8}78%{opacity:.9}80%{opacity:.7}81%{opacity:.3}81%{opacity:.1}to{opacity:.1}}@-webkit-keyframes animation11{0%{opacity:.1}15%{opacity:.2}15%{opacity:.3}16%{opacity:.3}16%{opacity:.4}17%{opacity:.4}17%{opacity:.5}18%{opacity:.5}18%{opacity:.6}19%{opacity:.6}19%{opacity:.7}20%{opacity:.7}20%{opacity:.8}21%{opacity:.8}21%{opacity:.9}23%{opacity:.7}23%{opacity:.4}24%{opacity:.1}70%{opacity:.2}71%{opacity:.3}72%{opacity:.4}73%{opacity:.5}73%{opacity:.6}74%{opacity:.6}74%{opacity:.7}75%{opacity:.7}75%{opacity:.8}76%{opacity:.8}76%{opacity:.9}78%{opacity:.6}79%{opacity:.2}79%{opacity:.1}to{opacity:.1}}@keyframes animation11{0%{opacity:.1}15%{opacity:.2}15%{opacity:.3}16%{opacity:.3}16%{opacity:.4}17%{opacity:.4}17%{opacity:.5}18%{opacity:.5}18%{opacity:.6}19%{opacity:.6}19%{opacity:.7}20%{opacity:.7}20%{opacity:.8}21%{opacity:.8}21%{opacity:.9}23%{opacity:.7}23%{opacity:.4}24%{opacity:.1}70%{opacity:.2}71%{opacity:.3}72%{opacity:.4}73%{opacity:.5}73%{opacity:.6}74%{opacity:.6}74%{opacity:.7}75%{opacity:.7}75%{opacity:.8}76%{opacity:.8}76%{opacity:.9}78%{opacity:.6}79%{opacity:.2}79%{opacity:.1}to{opacity:.1}}@-webkit-keyframes animation12{0%{opacity:.1}17%{opacity:.2}18%{opacity:.3}19%{opacity:.4}19%{opacity:.5}20%{opacity:.5}20%{opacity:.6}21%{opacity:.6}21%{opacity:.7}22%{opacity:.7}22%{opacity:.8}23%{opacity:.8}23%{opacity:.9}25%{opacity:.5}26%{opacity:.2}26%{opacity:.1}68%{opacity:.2}69%{opacity:.3}69%{opacity:.4}70%{opacity:.4}70%{opacity:.5}71%{opacity:.5}71%{opacity:.6}72%{opacity:.6}72%{opacity:.7}73%{opacity:.7}73%{opacity:.8}74%{opacity:.8}74%{opacity:.9}76%{opacity:.8}76%{opacity:.5}77%{opacity:.1}to{opacity:.1}}@keyframes animation12{0%{opacity:.1}17%{opacity:.2}18%{opacity:.3}19%{opacity:.4}19%{opacity:.5}20%{opacity:.5}20%{opacity:.6}21%{opacity:.6}21%{opacity:.7}22%{opacity:.7}22%{opacity:.8}23%{opacity:.8}23%{opacity:.9}25%{opacity:.5}26%{opacity:.2}26%{opacity:.1}68%{opacity:.2}69%{opacity:.3}69%{opacity:.4}70%{opacity:.4}70%{opacity:.5}71%{opacity:.5}71%{opacity:.6}72%{opacity:.6}72%{opacity:.7}73%{opacity:.7}73%{opacity:.8}74%{opacity:.8}74%{opacity:.9}76%{opacity:.8}76%{opacity:.5}77%{opacity:.1}to{opacity:.1}}@-webkit-keyframes animation13{0%{opacity:.1}19%{opacity:.2}20%{opacity:.3}21%{opacity:.4}22%{opacity:.5}23%{opacity:.6}24%{opacity:.7}24%{opacity:.8}25%{opacity:.8}25%{opacity:.9}27%{opacity:.6}28%{opacity:.3}28%{opacity:.1}65%{opacity:.2}66%{opacity:.2}66%{opacity:.3}67%{opacity:.3}67%{opacity:.4}68%{opacity:.4}68%{opacity:.5}69%{opacity:.5}69%{opacity:.6}70%{opacity:.6}70%{opacity:.7}71%{opacity:.7}71%{opacity:.8}72%{opacity:.9}74%{opacity:.7}74%{opacity:.4}75%{opacity:.1}to{opacity:.1}}@keyframes animation13{0%{opacity:.1}19%{opacity:.2}20%{opacity:.3}21%{opacity:.4}22%{opacity:.5}23%{opacity:.6}24%{opacity:.7}24%{opacity:.8}25%{opacity:.8}25%{opacity:.9}27%{opacity:.6}28%{opacity:.3}28%{opacity:.1}65%{opacity:.2}66%{opacity:.2}66%{opacity:.3}67%{opacity:.3}67%{opacity:.4}68%{opacity:.4}68%{opacity:.5}69%{opacity:.5}69%{opacity:.6}70%{opacity:.6}70%{opacity:.7}71%{opacity:.7}71%{opacity:.8}72%{opacity:.9}74%{opacity:.7}74%{opacity:.4}75%{opacity:.1}to{opacity:.1}}@-webkit-keyframes animation14{0%{opacity:.1}21%{opacity:.2}22%{opacity:.3}23%{opacity:.4}24%{opacity:.5}25%{opacity:.6}26%{opacity:.7}27%{opacity:.8}28%{opacity:.9}29%{opacity:.7}30%{opacity:.4}30%{opacity:.1}63%{opacity:.2}64%{opacity:.2}64%{opacity:.3}65%{opacity:.3}65%{opacity:.4}66%{opacity:.4}66%{opacity:.5}67%{opacity:.5}67%{opacity:.6}68%{opacity:.7}69%{opacity:.8}70%{opacity:.9}72%{opacity:.6}72%{opacity:.3}73%{opacity:.1}to{opacity:.1}}@keyframes animation14{0%{opacity:.1}21%{opacity:.2}22%{opacity:.3}23%{opacity:.4}24%{opacity:.5}25%{opacity:.6}26%{opacity:.7}27%{opacity:.8}28%{opacity:.9}29%{opacity:.7}30%{opacity:.4}30%{opacity:.1}63%{opacity:.2}64%{opacity:.2}64%{opacity:.3}65%{opacity:.3}65%{opacity:.4}66%{opacity:.4}66%{opacity:.5}67%{opacity:.5}67%{opacity:.6}68%{opacity:.7}69%{opacity:.8}70%{opacity:.9}72%{opacity:.6}72%{opacity:.3}73%{opacity:.1}to{opacity:.1}}@-webkit-keyframes animation15{0%{opacity:.1}23%{opacity:.2}24%{opacity:.2}24%{opacity:.3}25%{opacity:.3}25%{opacity:.4}26%{opacity:.5}27%{opacity:.6}28%{opacity:.7}29%{opacity:.8}30%{opacity:.9}31%{opacity:.8}32%{opacity:.5}32%{opacity:.2}33%{opacity:.1}61%{opacity:.2}62%{opacity:.2}62%{opacity:.3}63%{opacity:.3}63%{opacity:.4}64%{opacity:.5}65%{opacity:.6}66%{opacity:.7}67%{opacity:.8}68%{opacity:.9}69%{opacity:.8}70%{opacity:.5}70%{opacity:.2}71%{opacity:.1}to{opacity:.1}}@keyframes animation15{0%{opacity:.1}23%{opacity:.2}24%{opacity:.2}24%{opacity:.3}25%{opacity:.3}25%{opacity:.4}26%{opacity:.5}27%{opacity:.6}28%{opacity:.7}29%{opacity:.8}30%{opacity:.9}31%{opacity:.8}32%{opacity:.5}32%{opacity:.2}33%{opacity:.1}61%{opacity:.2}62%{opacity:.2}62%{opacity:.3}63%{opacity:.3}63%{opacity:.4}64%{opacity:.5}65%{opacity:.6}66%{opacity:.7}67%{opacity:.8}68%{opacity:.9}69%{opacity:.8}70%{opacity:.5}70%{opacity:.2}71%{opacity:.1}to{opacity:.1}}@-webkit-keyframes animation16{0%{opacity:.1}25%{opacity:.2}26%{opacity:.2}26%{opacity:.3}27%{opacity:.3}27%{opacity:.4}28%{opacity:.4}28%{opacity:.5}29%{opacity:.5}29%{opacity:.6}30%{opacity:.7}31%{opacity:.8}32%{opacity:.9}34%{opacity:.6}34%{opacity:.3}35%{opacity:.1}59%{opacity:.2}60%{opacity:.3}61%{opacity:.4}62%{opacity:.5}63%{opacity:.6}64%{opacity:.7}65%{opacity:.8}66%{opacity:.9}67%{opacity:.7}68%{opacity:.4}68%{opacity:.1}to{opacity:.1}}@keyframes animation16{0%{opacity:.1}25%{opacity:.2}26%{opacity:.2}26%{opacity:.3}27%{opacity:.3}27%{opacity:.4}28%{opacity:.4}28%{opacity:.5}29%{opacity:.5}29%{opacity:.6}30%{opacity:.7}31%{opacity:.8}32%{opacity:.9}34%{opacity:.6}34%{opacity:.3}35%{opacity:.1}59%{opacity:.2}60%{opacity:.3}61%{opacity:.4}62%{opacity:.5}63%{opacity:.6}64%{opacity:.7}65%{opacity:.8}66%{opacity:.9}67%{opacity:.7}68%{opacity:.4}68%{opacity:.1}to{opacity:.1}}@-webkit-keyframes animation17{0%{opacity:.1}27%{opacity:.2}28%{opacity:.2}28%{opacity:.3}29%{opacity:.3}29%{opacity:.4}30%{opacity:.4}30%{opacity:.5}31%{opacity:.5}31%{opacity:.6}32%{opacity:.6}32%{opacity:.7}33%{opacity:.7}33%{opacity:.8}34%{opacity:.9}36%{opacity:.7}36%{opacity:.4}37%{opacity:.1}57%{opacity:.2}58%{opacity:.3}59%{opacity:.4}60%{opacity:.5}61%{opacity:.6}62%{opacity:.7}62%{opacity:.8}63%{opacity:.8}63%{opacity:.9}65%{opacity:.6}66%{opacity:.3}66%{opacity:.1}to{opacity:.1}}@keyframes animation17{0%{opacity:.1}27%{opacity:.2}28%{opacity:.2}28%{opacity:.3}29%{opacity:.3}29%{opacity:.4}30%{opacity:.4}30%{opacity:.5}31%{opacity:.5}31%{opacity:.6}32%{opacity:.6}32%{opacity:.7}33%{opacity:.7}33%{opacity:.8}34%{opacity:.9}36%{opacity:.7}36%{opacity:.4}37%{opacity:.1}57%{opacity:.2}58%{opacity:.3}59%{opacity:.4}60%{opacity:.5}61%{opacity:.6}62%{opacity:.7}62%{opacity:.8}63%{opacity:.8}63%{opacity:.9}65%{opacity:.6}66%{opacity:.3}66%{opacity:.1}to{opacity:.1}}@-webkit-keyframes animation18{0%{opacity:.1}30%{opacity:.2}31%{opacity:.3}31%{opacity:.4}32%{opacity:.4}32%{opacity:.5}33%{opacity:.5}33%{opacity:.6}34%{opacity:.6}34%{opacity:.7}35%{opacity:.7}35%{opacity:.8}36%{opacity:.8}36%{opacity:.9}38%{opacity:.8}38%{opacity:.5}39%{opacity:.1}55%{opacity:.2}56%{opacity:.3}57%{opacity:.4}57%{opacity:.5}58%{opacity:.5}58%{opacity:.6}59%{opacity:.6}59%{opacity:.7}60%{opacity:.7}60%{opacity:.8}61%{opacity:.8}61%{opacity:.9}63%{opacity:.5}64%{opacity:.2}64%{opacity:.1}to{opacity:.1}}@keyframes animation18{0%{opacity:.1}30%{opacity:.2}31%{opacity:.3}31%{opacity:.4}32%{opacity:.4}32%{opacity:.5}33%{opacity:.5}33%{opacity:.6}34%{opacity:.6}34%{opacity:.7}35%{opacity:.7}35%{opacity:.8}36%{opacity:.8}36%{opacity:.9}38%{opacity:.8}38%{opacity:.5}39%{opacity:.1}55%{opacity:.2}56%{opacity:.3}57%{opacity:.4}57%{opacity:.5}58%{opacity:.5}58%{opacity:.6}59%{opacity:.6}59%{opacity:.7}60%{opacity:.7}60%{opacity:.8}61%{opacity:.8}61%{opacity:.9}63%{opacity:.5}64%{opacity:.2}64%{opacity:.1}to{opacity:.1}}@-webkit-keyframes animation19{0%{opacity:.1}32%{opacity:.2}33%{opacity:.3}34%{opacity:.4}35%{opacity:.5}35%{opacity:.6}36%{opacity:.6}36%{opacity:.7}37%{opacity:.7}37%{opacity:.8}38%{opacity:.8}38%{opacity:.9}40%{opacity:.6}41%{opacity:.2}41%{opacity:.1}53%{opacity:.2}53%{opacity:.3}54%{opacity:.3}54%{opacity:.4}55%{opacity:.4}55%{opacity:.5}56%{opacity:.5}56%{opacity:.6}57%{opacity:.6}57%{opacity:.7}58%{opacity:.7}58%{opacity:.8}59%{opacity:.8}59%{opacity:.9}61%{opacity:.7}61%{opacity:.4}62%{opacity:.1}to{opacity:.1}}@keyframes animation19{0%{opacity:.1}32%{opacity:.2}33%{opacity:.3}34%{opacity:.4}35%{opacity:.5}35%{opacity:.6}36%{opacity:.6}36%{opacity:.7}37%{opacity:.7}37%{opacity:.8}38%{opacity:.8}38%{opacity:.9}40%{opacity:.6}41%{opacity:.2}41%{opacity:.1}53%{opacity:.2}53%{opacity:.3}54%{opacity:.3}54%{opacity:.4}55%{opacity:.4}55%{opacity:.5}56%{opacity:.5}56%{opacity:.6}57%{opacity:.6}57%{opacity:.7}58%{opacity:.7}58%{opacity:.8}59%{opacity:.8}59%{opacity:.9}61%{opacity:.7}61%{opacity:.4}62%{opacity:.1}to{opacity:.1}}@-webkit-keyframes animation20{0%{opacity:.1}34%{opacity:.2}35%{opacity:.3}36%{opacity:.4}37%{opacity:.5}38%{opacity:.6}39%{opacity:.7}39%{opacity:.8}40%{opacity:.8}40%{opacity:.9}42%{opacity:.7}43%{opacity:.3}43%{opacity:.1}50%{opacity:.2}51%{opacity:.2}51%{opacity:.3}52%{opacity:.3}52%{opacity:.4}53%{opacity:.4}53%{opacity:.5}54%{opacity:.5}54%{opacity:.6}55%{opacity:.6}55%{opacity:.7}56%{opacity:.8}57%{opacity:.9}59%{opacity:.6}59%{opacity:.3}60%{opacity:.1}to{opacity:.1}}@keyframes animation20{0%{opacity:.1}34%{opacity:.2}35%{opacity:.3}36%{opacity:.4}37%{opacity:.5}38%{opacity:.6}39%{opacity:.7}39%{opacity:.8}40%{opacity:.8}40%{opacity:.9}42%{opacity:.7}43%{opacity:.3}43%{opacity:.1}50%{opacity:.2}51%{opacity:.2}51%{opacity:.3}52%{opacity:.3}52%{opacity:.4}53%{opacity:.4}53%{opacity:.5}54%{opacity:.5}54%{opacity:.6}55%{opacity:.6}55%{opacity:.7}56%{opacity:.8}57%{opacity:.9}59%{opacity:.6}59%{opacity:.3}60%{opacity:.1}to{opacity:.1}}@-webkit-keyframes animation21{0%{opacity:.1}36%{opacity:.2}37%{opacity:.2}37%{opacity:.3}38%{opacity:.4}39%{opacity:.5}40%{opacity:.6}41%{opacity:.7}42%{opacity:.8}43%{opacity:.9}44%{opacity:.8}45%{opacity:.4}45%{opacity:.1}50%{opacity:.3}50%{opacity:.4}51%{opacity:.4}51%{opacity:.5}52%{opacity:.6}53%{opacity:.7}54%{opacity:.8}55%{opacity:.9}57%{opacity:.5}57%{opacity:.2}58%{opacity:.1}to{opacity:.1}}@keyframes animation21{0%{opacity:.1}36%{opacity:.2}37%{opacity:.2}37%{opacity:.3}38%{opacity:.4}39%{opacity:.5}40%{opacity:.6}41%{opacity:.7}42%{opacity:.8}43%{opacity:.9}44%{opacity:.8}45%{opacity:.4}45%{opacity:.1}50%{opacity:.3}50%{opacity:.4}51%{opacity:.4}51%{opacity:.5}52%{opacity:.6}53%{opacity:.7}54%{opacity:.8}55%{opacity:.9}57%{opacity:.5}57%{opacity:.2}58%{opacity:.1}to{opacity:.1}}@-webkit-keyframes animation22{0%{opacity:.1}38%{opacity:.2}39%{opacity:.2}39%{opacity:.3}40%{opacity:.3}40%{opacity:.4}41%{opacity:.4}41%{opacity:.5}42%{opacity:.6}43%{opacity:.7}44%{opacity:.8}45%{opacity:.9}47%{opacity:.5}47%{opacity:.2}48%{opacity:.1}50%{opacity:.6}51%{opacity:.7}52%{opacity:.8}53%{opacity:.9}54%{opacity:.8}55%{opacity:.5}55%{opacity:.1}to{opacity:.1}}@keyframes animation22{0%{opacity:.1}38%{opacity:.2}39%{opacity:.2}39%{opacity:.3}40%{opacity:.3}40%{opacity:.4}41%{opacity:.4}41%{opacity:.5}42%{opacity:.6}43%{opacity:.7}44%{opacity:.8}45%{opacity:.9}47%{opacity:.5}47%{opacity:.2}48%{opacity:.1}50%{opacity:.6}51%{opacity:.7}52%{opacity:.8}53%{opacity:.9}54%{opacity:.8}55%{opacity:.5}55%{opacity:.1}to{opacity:.1}}@-webkit-keyframes animation23{0%{opacity:.1}40%{opacity:.2}41%{opacity:.2}41%{opacity:.3}42%{opacity:.3}42%{opacity:.4}43%{opacity:.4}43%{opacity:.5}44%{opacity:.5}44%{opacity:.6}45%{opacity:.6}45%{opacity:.7}46%{opacity:.8}47%{opacity:.9}49%{opacity:.6}49%{opacity:.3}50%{opacity:.8}50%{opacity:.9}52%{opacity:.7}53%{opacity:.4}53%{opacity:.1}to{opacity:.1}}@keyframes animation23{0%{opacity:.1}40%{opacity:.2}41%{opacity:.2}41%{opacity:.3}42%{opacity:.3}42%{opacity:.4}43%{opacity:.4}43%{opacity:.5}44%{opacity:.5}44%{opacity:.6}45%{opacity:.6}45%{opacity:.7}46%{opacity:.8}47%{opacity:.9}49%{opacity:.6}49%{opacity:.3}50%{opacity:.8}50%{opacity:.9}52%{opacity:.7}53%{opacity:.4}53%{opacity:.1}to{opacity:.1}}@-webkit-keyframes animation24{0%{opacity:.1}43%{opacity:.2}43%{opacity:.3}44%{opacity:.3}44%{opacity:.4}45%{opacity:.4}45%{opacity:.5}46%{opacity:.5}46%{opacity:.6}47%{opacity:.6}47%{opacity:.7}48%{opacity:.7}48%{opacity:.8}49%{opacity:.8}49%{opacity:.9}50%{opacity:.6}51%{opacity:.3}51%{opacity:.1}to{opacity:.1}}@keyframes animation24{0%{opacity:.1}43%{opacity:.2}43%{opacity:.3}44%{opacity:.3}44%{opacity:.4}45%{opacity:.4}45%{opacity:.5}46%{opacity:.5}46%{opacity:.6}47%{opacity:.6}47%{opacity:.7}48%{opacity:.7}48%{opacity:.8}49%{opacity:.8}49%{opacity:.9}50%{opacity:.6}51%{opacity:.3}51%{opacity:.1}to{opacity:.1}}@-webkit-keyframes rootPulse{0%{box-shadow:0 3px 8px rgba(0,0,0,.4);-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}50%{box-shadow:0 4px 12px rgba(255,68,68,.6);-webkit-transform:translate(-50%,-50%) scale(1.1);transform:translate(-50%,-50%) scale(1.1)}to{box-shadow:0 3px 8px rgba(0,0,0,.4);-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}}.fretboard{font-family:Roboto Mono,monospace;position:relative;-webkit-user-select:none;user-select:none}.fretboard .neck-container{border-radius:8px;box-shadow:inset 0 2px 8px rgba(0,0,0,.3)}.fretboard .guitar-string{-webkit-transform:translateY(-50%);transform:translateY(-50%)}.fretboard .nut{background:linear-gradient(180deg,#f8f8f8 0,#e8e8e8 30%,#d8d8d8 50%,#e8e8e8 70%,#f8f8f8)!important;border:1px solid #ccc;box-shadow:1px 0 3px rgba(0,0,0,.4),inset 1px 0 1px hsla(0,0%,100%,.3)!important}.fretboard .fret-wire{background:linear-gradient(180deg,#444 0,#888 30%,#aaa 50%,#888 70%,#444);box-shadow:1px 0 3px rgba(0,0,0,.4),inset 1px 0 1px hsla(0,0%,100%,.2)}.fretboard .position-marker{border:1px solid rgba(0,0,0,.2)}.fretboard .fret:hover{z-index:20}.fretboard .note-marker:hover{box-shadow:0 3px 10px rgba(0,0,0,.5);-webkit-transform:translate(-50%,-50%) scale(1.1);transform:translate(-50%,-50%) scale(1.1)}@-webkit-keyframes markerAppear{0%{opacity:0;-webkit-transform:translate(-50%,-50%) scale(0);transform:translate(-50%,-50%) scale(0)}to{opacity:1;-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}}@keyframes markerAppear{0%{opacity:0;-webkit-transform:translate(-50%,-50%) scale(0);transform:translate(-50%,-50%) scale(0)}to{opacity:1;-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}}@keyframes rootPulse{0%,to{box-shadow:0 3px 8px rgba(0,0,0,.4);-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}50%{box-shadow:0 4px 12px rgba(255,68,68,.6);-webkit-transform:translate(-50%,-50%) scale(1.05);transform:translate(-50%,-50%) scale(1.05)}}.fretboard .note-marker.root-note{z-index:20}@media (max-width:768px){.fretboard{font-size:10px}.fretboard .neck-container{height:120px;margin:0 10px}.fretboard .note-marker{font-size:9px;height:20px;width:20px}.fretboard .position-marker{height:10px;width:10px}.fretboard .fret-wire{width:2px}}.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{-webkit-animation:App-logo-spin 20s linear infinite;animation:App-logo-spin 20s linear infinite}}.App-header{align-items:center;background-color:#282c34;color:#fff;display:flex;flex-direction:column;font-size:calc(10px + 2vmin);justify-content:center;min-height:100vh}.App-link{color:#61dafb}@-webkit-keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}
/*# sourceMappingURL=main.41771ef8.css.map*/