@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap);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}.fretboard-vertical-container{--fret-cell-size:55px;display:flex;font-family:Open Sans,sans-serif;margin:0 auto;position:relative;-webkit-user-select:none;user-select:none}.v-fret-numbers-column{width:40px}.v-fret-cell{align-items:center;box-sizing:border-box;display:flex!important;height:var(--fret-cell-size);justify-content:center;position:relative;width:30px}.v-fret-cell-4-strings{width:45px}.v-fret-cell.fret-nut{background-color:initial;height:var(--fret-cell-size)}.v-fret-wire{background-color:silver;bottom:0;height:2px;left:0;position:absolute;right:0}.theme-light .v-fret-wire{background-color:#333}.theme-dark .v-fret-wire{background-color:silver}.v-fret-wire.left-capped{left:50%}.v-fret-wire.right-capped{right:50%}.v-fret-wire.v-fret-wire-nut{background-color:#333;height:8px}.theme-light .v-fret-wire.v-fret-wire-nut{background-color:#000}.theme-dark .v-fret-wire.v-fret-wire-nut{background-color:#fff}.v-fret-wire.v-fret-wire-nut.left-capped{border-top-left-radius:4px;left:45%}.v-fret-wire.v-fret-wire-nut.right-capped{border-top-right-radius:4px;right:45%}.v-string-line{background-color:#333;bottom:0;left:50%;position:absolute;top:0;transform:translateX(-50%);width:1px;z-index:1}.theme-light .v-string-line{background-color:#000}.theme-dark .v-string-line{background-color:#ddd}.v-fret-marker{border-radius:50%;height:12px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:12px;z-index:0}.theme-light .v-fret-marker,.v-fret-marker{background-color:#0003}.theme-dark .v-fret-marker{background-color:#ffffff4d}.v-fret-marker.single-offset{left:100%}.v-fret-marker.double-left,.v-fret-marker.single-offset.marker-reverse{left:0}.v-fret-marker.double-left.marker-reverse,.v-fret-marker.double-right{left:100%}.v-fret-marker.double-right.marker-reverse{left:0}.v-note-bullet-wrapper{background-color:#1d1d1d;border-radius:50%;height:22px;position:absolute;width:22px;z-index:10}.v-note-bullet-wrapper.theme-light{background-color:#fff}.v-note-bullet{align-items:center;background-color:#ee675c;border-radius:50%;color:#262626;cursor:pointer;display:flex;font-size:11px;font-weight:700;height:22px;justify-content:center;left:0;position:absolute;top:0;transition:transform .1s ease-out,box-shadow .1s ease-out;width:22px;z-index:10}.v-note-bullet.theme-light{color:#fff}.v-note-bullet.bounce{animation:bounce .3s ease-out}.v-note-bullet.dimmed{opacity:.2}.v-note-bullet.active{transform:scale(1.35)}.v-note-bullet.dimmed.active{transform:scale(1.15)}@keyframes bounce{0%{transform:scale(1)}50%{transform:scale(1.5)}to{transform:scale(1)}}.v-fret-number-column{align-items:center;display:flex;flex-direction:column;justify-content:flex-start;margin-right:8px}.v-fret-number-cell{align-items:center;box-sizing:border-box;color:#7b7b7b;display:flex;font-size:16px;height:var(--fret-cell-size);justify-content:center;visibility:hidden}.theme-light .v-fret-number-cell{color:#333}.theme-dark .v-fret-number-cell{color:#aaa}.v-fret-number-cell.visible{visibility:visible}.fretboard-horizontal-container{--fret-cell-size:55px;display:flex;flex-direction:column;font-family:Open Sans,sans-serif;margin:0 auto;position:relative;-webkit-user-select:none;user-select:none}.h-fret-numbers-row{height:30px}.h-string-row{display:flex;flex-direction:row}.h-fret-cell{align-items:center;box-sizing:border-box;display:flex!important;height:30px;justify-content:center;position:relative;width:var(--fret-cell-size)}.h-fret-cell-4-strings{height:45px}.h-fret-cell.fret-nut{background-color:initial;width:var(--fret-cell-size)}.h-fret-wire{background-color:silver;bottom:0;position:absolute;right:0;top:0;width:2px}.theme-light .h-fret-wire{background-color:#333}.theme-dark .h-fret-wire{background-color:silver}.h-fret-wire.top-capped{top:50%}.h-fret-wire.bottom-capped{bottom:50%}.h-fret-wire.h-fret-wire-nut{background-color:#333;width:8px}.theme-light .h-fret-wire.h-fret-wire-nut{background-color:#000}.theme-dark .h-fret-wire.h-fret-wire-nut{background-color:#fff}.h-fret-wire.h-fret-wire-nut.top-capped{border-top-left-radius:4px;top:45%}.h-fret-wire.h-fret-wire-nut.bottom-capped{border-bottom-left-radius:4px;bottom:45%}.h-string-line{background-color:#333;height:1px;left:0;position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:1}.theme-light .h-string-line{background-color:#000}.theme-dark .h-string-line{background-color:#ddd}.h-fret-marker{border-radius:50%;height:12px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:12px;z-index:0}.h-fret-marker,.theme-light .h-fret-marker{background-color:#0003}.theme-dark .h-fret-marker{background-color:#ffffff4d}.h-fret-marker.single-offset{top:0}.h-fret-marker.double-left,.h-fret-marker.single-offset.marker-reverse{top:100%}.h-fret-marker.double-left.h-fret-marker-strings-4,.h-fret-marker.double-left.h-fret-marker-strings-4.marker-reverse{top:50%}.h-fret-marker.double-left.marker-reverse{top:0}.h-fret-marker.double-right{top:100%}.h-fret-marker.double-right.h-fret-marker-strings-4,.h-fret-marker.double-right.h-fret-marker-strings-4.marker-reverse{top:50%}.h-fret-marker.double-right.marker-reverse{top:0}.h-fret-number-row{align-items:center;display:flex;flex-direction:row;justify-content:flex-start;margin-bottom:8px}.h-fret-number-cell{align-items:center;box-sizing:border-box;color:#7b7b7b;display:flex;font-size:16px;justify-content:center;visibility:hidden;width:var(--fret-cell-size)}.theme-light .h-fret-number-cell{color:#333}.theme-dark .h-fret-number-cell{color:#aaa}.h-fret-number-cell.visible{visibility:visible}.keyboard-key-label{align-items:center;border-radius:50%;box-shadow:0 2px 4px #0000004d;display:flex;height:24px;justify-content:center;width:24px;z-index:2}.keyboard-key-label.black-label{margin-bottom:8px}.keyboard-key-label.white-label{margin-bottom:16px}.keyboard-key-label-text{color:#2f3237;font-family:Open Sans,sans-serif;font-size:11px;font-weight:700}.keyboard-key{align-items:center;box-shadow:0 2px 4px #0000001a;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;transition:background-color .1s ease,transform .1s ease}.keyboard-key.active{transform:scale(.98)}.white-key{background-color:#fff;border:1px solid #ccc;border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-right-color:#bbb;height:100%;width:100%}.white-key:hover{background-color:#f5f5f5}.white-key.is-scale-active{background-color:#e0f7fa}.white-key.active{background-color:#d0f0f5;box-shadow:inset 0 2px 4px #0003}.black-key{background-color:#222;border-bottom-left-radius:3px;border-bottom-right-radius:3px;box-shadow:2px 2px 4px #00000080;height:130px;position:absolute;right:-14px;top:0;width:28px;z-index:1}.black-key:hover{background-color:#333}.black-key.is-scale-active{background-color:#4caf50}.black-key.active{background-color:#3d8c40;box-shadow:inset 0 2px 4px #000c}.keyboard-container{border-radius:8px;display:flex;flex-direction:row;height:220px;margin:0 auto;padding:16px;position:relative}.keyboard-container.theme-light{background-color:#eee}.keyboard-container.theme-dark{background-color:#222}.keyboard-key-wrapper{flex-shrink:0;height:100%;position:relative;width:44px}.fretboard-scrollable-container{--scroll-shadow-color:#1d1d1d;-webkit-overflow-scrolling:touch;box-sizing:border-box;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;position:relative;scroll-behavior:smooth;scrollbar-color:#0000004d #0000001a;scrollbar-width:thin}.fretboard-scrollable-container:has(.theme-light){--scroll-shadow-color:#fff}.fretboard-scrollable-container:after,.fretboard-scrollable-container:before{content:"";display:block;flex-shrink:0;height:40px;left:0;opacity:0;pointer-events:none;position:-webkit-sticky;position:sticky;right:0;transition:opacity .2s ease;width:100%;z-index:15}.fretboard-scrollable-container:before{background:linear-gradient(to bottom,var(--scroll-shadow-color),#0000);margin-bottom:-40px;order:-1;top:0}.fretboard-scrollable-container:after{background:linear-gradient(to top,var(--scroll-shadow-color),#0000);bottom:0;margin-top:-40px}.fretboard-scrollable-container.show-bottom-shadow:after,.fretboard-scrollable-container.show-top-shadow:before{opacity:1}.fretboard-scrollable-container>*{flex-shrink:0}.fretboard-scrollable-horizontal-wrapper{--scroll-shadow-color:#1d1d1d;box-sizing:border-box;position:relative}.fretboard-scrollable-horizontal-wrapper:has(.theme-light){--scroll-shadow-color:#fff}.fretboard-scrollable-horizontal-wrapper:after,.fretboard-scrollable-horizontal-wrapper:before{bottom:0;content:"";opacity:0;pointer-events:none;position:absolute;top:0;transition:opacity .2s ease;width:40px;z-index:15}.fretboard-scrollable-horizontal-wrapper:before{background:linear-gradient(to right,var(--scroll-shadow-color),#0000);left:0}.fretboard-scrollable-horizontal-wrapper:after{background:linear-gradient(to left,var(--scroll-shadow-color),#0000);right:0}.fretboard-scrollable-horizontal-wrapper.show-left-shadow:before,.fretboard-scrollable-horizontal-wrapper.show-right-shadow:after{opacity:1}.fretboard-scrollable-container-horizontal{-webkit-overflow-scrolling:touch;align-items:center;box-sizing:border-box;display:flex;flex-direction:row;height:100%;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-color:#0000004d #0000001a;scrollbar-width:thin;width:100%}.fretboard-scrollable-container-horizontal::-webkit-scrollbar{height:8px}.fretboard-scrollable-container-horizontal::-webkit-scrollbar-track{background:#0000000d;border-radius:4px}.fretboard-scrollable-container-horizontal::-webkit-scrollbar-thumb{background:#0000004d;border-radius:4px}.fretboard-scrollable-container-horizontal::-webkit-scrollbar-thumb:hover{background:#00000080}.fretboard-scrollable-container-horizontal>*{flex-shrink:0}