@font-face{font-family:Lato;font-style:normal;font-weight:100;src:url(https://fonts.gstatic.com/s/lato/v24/S6u8w4BMUTPHh30AUi-qJCY.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Lato;font-style:normal;font-weight:100;src:url(https://fonts.gstatic.com/s/lato/v24/S6u8w4BMUTPHh30AXC-q.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Lato;font-style:normal;font-weight:300;src:url(https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh7USSwaPGR_p.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Lato;font-style:normal;font-weight:300;src:url(https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh7USSwiPGQ.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Lato;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjxAwXjeu.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Lato;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjx4wXg.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--fretboard-height: 300;--number-of-strings-bass: 4;--number-of-strings-guitar: 6;--string-height: 10;--half-string-height: calc(var(--string-height) / 2);--bass-string-top-position: calc( var(--fretboard-height) / var(--number-of-strings-bass) / 2 - var( --half-string-height ) );--guitar-string-top-position: calc( var(--fretboard-height) / var(--number-of-strings-guitar) / 2 - var( --half-string-height ) );--double-fretmark-position-1: calc(var(--fretboard-height) * .25);--double-fretmark-position-2: calc(var(--fretboard-height) * .75);--noteDotOpacity: 1}*{margin:0;padding:0}body{background:#353535;font-family:Lato,sans-serif}.fretboard{display:flex;flex-direction:column;background:#2b2316;width:100%;height:calc(var(--fretboard-height) * 1px);margin-top:25px}.string{width:100%;height:100%;display:flex;position:relative}.string.bass:before{content:"";width:100%;height:calc(var(--string-height) * 1px);background:linear-gradient(#eee,#999);box-shadow:76px 3px 10px #806233;z-index:1;position:absolute;top:22px;top:calc(var(--bass-string-top-position) * 1px)}.string.guitar:before{content:"";width:100%;height:calc(var(--string-height) * 1px);background:linear-gradient(#eee,#999);box-shadow:76px 3px 10px #806233;z-index:1;position:absolute;top:22px;top:calc(var(--guitar-string-top-position) * 1px)}.note-fret{display:flex;flex:1;border-right:10px solid;border-image:linear-gradient(to left,#777,#bbb,#777) 1 100%;justify-content:center;align-items:center;position:relative}.note-fret:before{content:attr(data-note);width:33px;height:33px;border-radius:50%;line-height:33px;text-align:center;background:#3a75c966;z-index:2;color:#eee;opacity:var(--noteDotOpacity)}.note-fret.in-scale:before{background:#ff69b4}.note-fret.bass{padding-top:0}:root{--form-control-color: rebeccapurple;--form-control-disabled: #959495}*,*:before,*:after{box-sizing:border-box}body{margin:0}form{display:grid;place-content:center;min-height:100vh}.form-control{font-family:system-ui,sans-serif;font-size:2rem;font-weight:700;line-height:1.1;display:grid;grid-template-columns:1em auto;gap:.5em}.form-control+.form-control{margin-top:1em}.form-control--disabled{color:var(--form-control-disabled);cursor:not-allowed}input[type=checkbox]{-webkit-appearance:none;appearance:none;background-color:var(--form-background);margin:0;font:inherit;color:currentColor;width:1.15em;height:1.15em;border:.15em solid currentColor;border-radius:.15em;transform:translateY(-.075em);display:grid;place-content:center}input[type=checkbox]:before{content:"";width:.65em;height:.65em;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);transform:scale(0);transform-origin:bottom left;transition:.12s transform ease-in-out;box-shadow:inset 1em 1em var(--form-control-color);background-color:CanvasText}input[type=checkbox]:checked:before{transform:scale(1)}input[type=checkbox]:focus{outline:max(2px,.15em) solid currentColor;outline-offset:max(2px,.15em)}input[type=checkbox]:disabled{--form-control-color: var(--form-control-disabled);color:var(--form-control-disabled);cursor:not-allowed}@keyframes vibrate{0%{transform:translateY(0)}25%{transform:translateY(-2px)}50%{transform:translateY(2px)}75%{transform:translateY(-2px)}to{transform:translateY(0)}}.vibrate{animation:vibrate .1s infinite linear}