.toggle-switch[data-v-414808e1]{position:relative;display:flex;height:40px;align-items:center;gap:12px}.toggle-switch input[data-v-414808e1]{opacity:0;width:0;height:0;display:none}.toggle-switch .toggle-switch-label[data-v-414808e1]{display:flex;align-items:center;justify-content:center;height:100%;font-size:18px;gap:12px;color:var(--gray-02);transition:color .24s ease-out;background:transparent;padding:0 12px;transition:background-color,ease-out,.12s;border-radius:20px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.toggle-switch .toggle-switch-label[data-v-414808e1]:hover{background:var(--black-02);cursor:pointer}.toggle-switch[data-v-414808e1]:focus-visible{border-radius:20px;background:var(--black-02);outline:2px solid var(--light-24)}.toggle-switch.left .toggle-switch-text.left[data-v-414808e1],.toggle-switch.right .toggle-switch-text.right[data-v-414808e1]{color:var(--white-01)}.toggle-switch .toggle-switch-slider[data-v-414808e1]{position:relative;width:28px;height:16px;background-color:var(--slider-background-color);border-radius:20px;transition:background-color .24s ease-out}.toggle-switch .toggle-switch-slider[data-v-414808e1]:before{position:absolute;content:"";height:12px;width:12px;left:2px;bottom:2px;background-color:var(--white-01);border-radius:50%;transition:transform .24s ease-out;transform:translateX(100%)}.toggle-switch input:checked~.toggle-switch-slider[data-v-414808e1]:before{transform:translateX(0)}.toggle-switch input:checked~.toggle-switch-slider[data-v-414808e1]{background-color:var(--slider-checked-background-color)}html{background:linear-gradient(135deg,#121212,#161616)}h3,label{color:var(--white-01)}h1.main-title{color:var(--white-02);font-size:18px;margin:0;white-space:nowrap}span.version{font-weight:400;color:var(--gray-02);margin-left:4px}.flat-symbol,.sharp-symbol{font-size:.85em;vertical-align:super;font-family:M PLUS\ 1p,sans-serif;position:absolute;top:0;right:7px}span.flat-note,span.sharp-note{padding-right:7px}span.flat-note .flat-symbol,span.sharp-note .sharp-symbol{top:-4px}.flat-degree:before{content:"♭"}.flat-degree:before,.sharp-degree:before{font-size:.85em;vertical-align:super;font-family:M PLUS\ 1p,sans-serif;position:absolute;top:0;left:7px}.sharp-degree:before{content:"♯"}span.flat-degree,span.sharp-degree{padding-left:5px}.flat-degree.symbol,.sharp-degree.symbol{font-size:.85em;vertical-align:super;font-family:M PLUS\ 1p,sans-serif}.note-circle{fill:var(--gray-01);transition:all .12s ease-out;cursor:pointer;transform-box:fill-box;transform-origin:center;transform:scale(1);opacity:1}.dimmed .note-circle{fill:var(--black-03)}.dimmed .note-label{fill:#666}.note-label{fill:var(--white-01);font-size:18px;font-weight:600;text-anchor:middle;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}.hide{transform:scale(.01);opacity:0}.pm-1 .scale-degree-1.colored .note-circle{fill:var(--color-1)}.pm-1 .scale-degree-1.colored.dimmed .note-circle{fill:var(--color-1-dimmed)}.pm-1 .scale-degree-2.colored .note-circle{fill:var(--color-2)}.pm-1 .scale-degree-2.colored.dimmed .note-circle{fill:var(--color-2-dimmed)}.pm-1 .scale-degree-3.colored .note-circle{fill:var(--color-3)}.pm-1 .scale-degree-3.colored.dimmed .note-circle{fill:var(--color-3-dimmed)}.pm-1 .scale-degree-4.colored .note-circle{fill:var(--color-4)}.pm-1 .scale-degree-4.colored.dimmed .note-circle{fill:var(--color-4-dimmed)}.pm-1 .scale-degree-5.colored .note-circle{fill:var(--color-5)}.pm-1 .scale-degree-5.colored.dimmed .note-circle{fill:var(--color-5-dimmed)}.pm-1 .scale-degree-6.colored .note-circle{fill:var(--color-6)}.pm-1 .scale-degree-6.colored.dimmed .note-circle{fill:var(--color-6-dimmed)}.pm-1 .scale-degree-7.colored .note-circle{fill:var(--color-7)}.pm-1 .scale-degree-7.colored.dimmed .note-circle{fill:var(--color-7-dimmed)}.pm-2 .scale-degree-1.colored .note-circle{fill:var(--color-2)}.pm-2 .scale-degree-1.colored.dimmed .note-circle{fill:var(--color-2-dimmed)}.pm-2 .scale-degree-2.colored .note-circle{fill:var(--color-3)}.pm-2 .scale-degree-2.colored.dimmed .note-circle{fill:var(--color-3-dimmed)}.pm-2 .scale-degree-3.colored .note-circle{fill:var(--color-4)}.pm-2 .scale-degree-3.colored.dimmed .note-circle{fill:var(--color-4-dimmed)}.pm-2 .scale-degree-4.colored .note-circle{fill:var(--color-5)}.pm-2 .scale-degree-4.colored.dimmed .note-circle{fill:var(--color-5-dimmed)}.pm-2 .scale-degree-5.colored .note-circle{fill:var(--color-6)}.pm-2 .scale-degree-5.colored.dimmed .note-circle{fill:var(--color-6-dimmed)}.pm-2 .scale-degree-6.colored .note-circle{fill:var(--color-7)}.pm-2 .scale-degree-6.colored.dimmed .note-circle{fill:var(--color-7-dimmed)}.pm-2 .scale-degree-7.colored .note-circle{fill:var(--color-1)}.pm-2 .scale-degree-7.colored.dimmed .note-circle{fill:var(--color-1-dimmed)}.pm-3 .scale-degree-1.colored .note-circle{fill:var(--color-3)}.pm-3 .scale-degree-1.colored.dimmed .note-circle{fill:var(--color-3-dimmed)}.pm-3 .scale-degree-2.colored .note-circle{fill:var(--color-4)}.pm-3 .scale-degree-2.colored.dimmed .note-circle{fill:var(--color-4-dimmed)}.pm-3 .scale-degree-3.colored .note-circle{fill:var(--color-5)}.pm-3 .scale-degree-3.colored.dimmed .note-circle{fill:var(--color-5-dimmed)}.pm-3 .scale-degree-4.colored .note-circle{fill:var(--color-6)}.pm-3 .scale-degree-4.colored.dimmed .note-circle{fill:var(--color-6-dimmed)}.pm-3 .scale-degree-5.colored .note-circle{fill:var(--color-7)}.pm-3 .scale-degree-5.colored.dimmed .note-circle{fill:var(--color-7-dimmed)}.pm-3 .scale-degree-6.colored .note-circle{fill:var(--color-1)}.pm-3 .scale-degree-6.colored.dimmed .note-circle{fill:var(--color-1-dimmed)}.pm-3 .scale-degree-7.colored .note-circle{fill:var(--color-2)}.pm-3 .scale-degree-7.colored.dimmed .note-circle{fill:var(--color-2-dimmed)}.pm-4 .scale-degree-1.colored .note-circle{fill:var(--color-4)}.pm-4 .scale-degree-1.colored.dimmed .note-circle{fill:var(--color-4-dimmed)}.pm-4 .scale-degree-2.colored .note-circle{fill:var(--color-5)}.pm-4 .scale-degree-2.colored.dimmed .note-circle{fill:var(--color-5-dimmed)}.pm-4 .scale-degree-3.colored .note-circle{fill:var(--color-6)}.pm-4 .scale-degree-3.colored.dimmed .note-circle{fill:var(--color-6-dimmed)}.pm-4 .scale-degree-4.colored .note-circle{fill:var(--color-7)}.pm-4 .scale-degree-4.colored.dimmed .note-circle{fill:var(--color-7-dimmed)}.pm-4 .scale-degree-5.colored .note-circle{fill:var(--color-1)}.pm-4 .scale-degree-5.colored.dimmed .note-circle{fill:var(--color-1-dimmed)}.pm-4 .scale-degree-6.colored .note-circle{fill:var(--color-2)}.pm-4 .scale-degree-6.colored.dimmed .note-circle{fill:var(--color-2-dimmed)}.pm-4 .scale-degree-7.colored .note-circle{fill:var(--color-3)}.pm-4 .scale-degree-7.colored.dimmed .note-circle{fill:var(--color-3-dimmed)}.pm-5 .scale-degree-1.colored .note-circle{fill:var(--color-5)}.pm-5 .scale-degree-1.colored.dimmed .note-circle{fill:var(--color-5-dimmed)}.pm-5 .scale-degree-2.colored .note-circle{fill:var(--color-6)}.pm-5 .scale-degree-2.colored.dimmed .note-circle{fill:var(--color-6-dimmed)}.pm-5 .scale-degree-3.colored .note-circle{fill:var(--color-7)}.pm-5 .scale-degree-3.colored.dimmed .note-circle{fill:var(--color-7-dimmed)}.pm-5 .scale-degree-4.colored .note-circle{fill:var(--color-1)}.pm-5 .scale-degree-4.colored.dimmed .note-circle{fill:var(--color-1-dimmed)}.pm-5 .scale-degree-5.colored .note-circle{fill:var(--color-2)}.pm-5 .scale-degree-5.colored.dimmed .note-circle{fill:var(--color-2-dimmed)}.pm-5 .scale-degree-6.colored .note-circle{fill:var(--color-3)}.pm-5 .scale-degree-6.colored.dimmed .note-circle{fill:var(--color-3-dimmed)}.pm-5 .scale-degree-7.colored .note-circle{fill:var(--color-4)}.pm-5 .scale-degree-7.colored.dimmed .note-circle{fill:var(--color-4-dimmed)}.pm-6 .scale-degree-1.colored .note-circle{fill:var(--color-6)}.pm-6 .scale-degree-1.colored.dimmed .note-circle{fill:var(--color-6-dimmed)}.pm-6 .scale-degree-2.colored .note-circle{fill:var(--color-7)}.pm-6 .scale-degree-2.colored.dimmed .note-circle{fill:var(--color-7-dimmed)}.pm-6 .scale-degree-3.colored .note-circle{fill:var(--color-1)}.pm-6 .scale-degree-3.colored.dimmed .note-circle{fill:var(--color-1-dimmed)}.pm-6 .scale-degree-4.colored .note-circle{fill:var(--color-2)}.pm-6 .scale-degree-4.colored.dimmed .note-circle{fill:var(--color-2-dimmed)}.pm-6 .scale-degree-5.colored .note-circle{fill:var(--color-3)}.pm-6 .scale-degree-5.colored.dimmed .note-circle{fill:var(--color-3-dimmed)}.pm-6 .scale-degree-6.colored .note-circle{fill:var(--color-4)}.pm-6 .scale-degree-6.colored.dimmed .note-circle{fill:var(--color-4-dimmed)}.pm-6 .scale-degree-7.colored .note-circle{fill:var(--color-5)}.pm-6 .scale-degree-7.colored.dimmed .note-circle{fill:var(--color-5-dimmed)}.pm-7 .scale-degree-1.colored .note-circle{fill:var(--color-7)}.pm-7 .scale-degree-1.colored.dimmed .note-circle{fill:var(--color-7-dimmed)}.pm-7 .scale-degree-2.colored .note-circle{fill:var(--color-1)}.pm-7 .scale-degree-2.colored.dimmed .note-circle{fill:var(--color-1-dimmed)}.pm-7 .scale-degree-3.colored .note-circle{fill:var(--color-2)}.pm-7 .scale-degree-3.colored.dimmed .note-circle{fill:var(--color-2-dimmed)}.pm-7 .scale-degree-4.colored .note-circle{fill:var(--color-3)}.pm-7 .scale-degree-4.colored.dimmed .note-circle{fill:var(--color-3-dimmed)}.pm-7 .scale-degree-5.colored .note-circle{fill:var(--color-4)}.pm-7 .scale-degree-5.colored.dimmed .note-circle{fill:var(--color-4-dimmed)}.pm-7 .scale-degree-6.colored .note-circle{fill:var(--color-5)}.pm-7 .scale-degree-6.colored.dimmed .note-circle{fill:var(--color-5-dimmed)}.pm-7 .scale-degree-7.colored .note-circle{fill:var(--color-6)}.pm-7 .scale-degree-7.colored.dimmed .note-circle{fill:var(--color-6-dimmed)}.colored .note-label{fill:var(--black-01)}.colored.dimmed .note-label{fill:var(--light-48)}.key-button{border:none;background-color:var(--black-01);color:var(--gray-02);border-radius:50%;width:40px;height:40px;line-height:34px;font-weight:600;font-size:18px;text-align:center;cursor:pointer;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.row.flats .key-button,.row.sharps .key-button{padding-right:12px}.key-button--selected{background-color:var(--red-primary);fill:var(--black-01);color:var(--black-01)}.pm-1 .key-button--selected{background-color:var(--color-1);fill:var(--black-01);color:var(--black-01)}.pm-2 .key-button--selected{background-color:var(--color-2);fill:var(--black-01);color:var(--black-01)}.pm-3 .key-button--selected{background-color:var(--color-3);fill:var(--black-01);color:var(--black-01)}.pm-4 .key-button--selected{background-color:var(--color-4);fill:var(--black-01);color:var(--black-01)}.pm-5 .key-button--selected{background-color:var(--color-5);fill:var(--black-01);color:var(--black-01)}.pm-6 .key-button--selected{background-color:var(--color-6);fill:var(--black-01);color:var(--black-01)}.pm-7 .key-button--selected{background-color:var(--color-7);fill:var(--black-01);color:var(--black-01)}.fret-marker{fill:var(--gray-03)}.nut{stroke:var(--white-01);stroke-width:2}.fret{stroke:var(--gray-02);stroke-width:2}.string{stroke:var(--white-01)}.fret-number-label{font-size:16px;font-weight:600;text-anchor:middle;fill:var(--gray-03)}.custom-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;font-family:Jost,Avenir Next,Helvetica,Arial,sans-serif;-webkit-user-select:none;-moz-user-select:none;user-select:none;height:40px;border-radius:20px;background-color:transparent;border:none;font-size:18px;color:var(--white-01);padding:0 32px 0 12px;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTYgOSA2IDYgNi02IiBzdHJva2U9IiNGNUY1RjUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+);background-position:right 10px center;background-repeat:no-repeat;transition:all .12s ease-out}.custom-select:hover{cursor:pointer;background-color:var(--black-02)}select.custom-select:focus-visible{outline:2px solid var(--light-24);background-color:var(--black-02)}.tuning-controls{display:flex;flex-direction:column-reverse;position:absolute;top:56px;left:8px;gap:12px}.tuning-controls.bass{top:69px;gap:34px}select.tuning-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;height:32px;width:32px;border-radius:20px;background-color:transparent;border:none;font-size:16px;font-weight:600;color:var(--gray-03);text-align:center;transition:background-color .12s ease-out}select.tuning-select:hover{background-color:var(--light-12);cursor:pointer}select.tuning-select:focus-visible{outline:2px solid var(--light-24);background-color:var(--light-12)}.hidden-checkbox{position:absolute;opacity:0;width:0;height:0}.bright-label,.color-label,.show-label{display:inline-block;position:relative;width:40px;height:40px;border-radius:50%;background-color:var(--black-01);text-align:center;line-height:40px;background-repeat:no-repeat;background-position:50%}.bright-label.active,.color-label.active,.show-label.active{background-color:var(--gray-01)}.bright-icon,.dim-icon,.hide-icon{width:24px;height:24px;margin-top:8px}.show-label{color:var(--white-01);font-weight:600;font-size:18px}.show-label.active.colored{color:var(--black-01)}.show-label.active.dimmed{background-color:var(--black-03);color:var(--gray-02)}.pm-1 .show-label.active.deg-1.colored{background-color:var(--color-1)}.pm-1 .color-label.active .color-icon-1 g{stroke:var(--color-1)}.pm-1 .show-label.active.deg-1.colored.dimmed{background-color:var(--color-1-dimmed);color:var(--light-48)}.pm-1 .show-label.active.deg-2.colored{background-color:var(--color-2)}.pm-1 .color-label.active .color-icon-2 g{stroke:var(--color-2)}.pm-1 .show-label.active.deg-2.colored.dimmed{background-color:var(--color-2-dimmed);color:var(--light-48)}.pm-1 .show-label.active.deg-3.colored{background-color:var(--color-3)}.pm-1 .color-label.active .color-icon-3 g{stroke:var(--color-3)}.pm-1 .show-label.active.deg-3.colored.dimmed{background-color:var(--color-3-dimmed);color:var(--light-48)}.pm-1 .show-label.active.deg-4.colored{background-color:var(--color-4)}.pm-1 .color-label.active .color-icon-4 g{stroke:var(--color-4)}.pm-1 .show-label.active.deg-4.colored.dimmed{background-color:var(--color-4-dimmed);color:var(--light-48)}.pm-1 .show-label.active.deg-5.colored{background-color:var(--color-5)}.pm-1 .color-label.active .color-icon-5 g{stroke:var(--color-5)}.pm-1 .show-label.active.deg-5.colored.dimmed{background-color:var(--color-5-dimmed);color:var(--light-48)}.pm-1 .show-label.active.deg-6.colored{background-color:var(--color-6)}.pm-1 .color-label.active .color-icon-6 g{stroke:var(--color-6)}.pm-1 .show-label.active.deg-6.colored.dimmed{background-color:var(--color-6-dimmed);color:var(--light-48)}.pm-1 .show-label.active.deg-7.colored{background-color:var(--color-7)}.pm-1 .color-label.active .color-icon-7 g{stroke:var(--color-7)}.pm-1 .show-label.active.deg-7.colored.dimmed{background-color:var(--color-7-dimmed);color:var(--light-48)}.pm-2 .show-label.active.deg-1.colored{background-color:var(--color-2)}.pm-2 .color-label.active .color-icon-1 g{stroke:var(--color-2)}.pm-2 .show-label.active.deg-1.colored.dimmed{background-color:var(--color-2-dimmed);color:var(--light-48)}.pm-2 .show-label.active.deg-2.colored{background-color:var(--color-3)}.pm-2 .color-label.active .color-icon-2 g{stroke:var(--color-3)}.pm-2 .show-label.active.deg-2.colored.dimmed{background-color:var(--color-3-dimmed);color:var(--light-48)}.pm-2 .show-label.active.deg-3.colored{background-color:var(--color-4)}.pm-2 .color-label.active .color-icon-3 g{stroke:var(--color-4)}.pm-2 .show-label.active.deg-3.colored.dimmed{background-color:var(--color-4-dimmed);color:var(--light-48)}.pm-2 .show-label.active.deg-4.colored{background-color:var(--color-5)}.pm-2 .color-label.active .color-icon-4 g{stroke:var(--color-5)}.pm-2 .show-label.active.deg-4.colored.dimmed{background-color:var(--color-5-dimmed);color:var(--light-48)}.pm-2 .show-label.active.deg-5.colored{background-color:var(--color-6)}.pm-2 .color-label.active .color-icon-5 g{stroke:var(--color-6)}.pm-2 .show-label.active.deg-5.colored.dimmed{background-color:var(--color-6-dimmed);color:var(--light-48)}.pm-2 .show-label.active.deg-6.colored{background-color:var(--color-7)}.pm-2 .color-label.active .color-icon-6 g{stroke:var(--color-7)}.pm-2 .show-label.active.deg-6.colored.dimmed{background-color:var(--color-7-dimmed);color:var(--light-48)}.pm-2 .show-label.active.deg-7.colored{background-color:var(--color-1)}.pm-2 .color-label.active .color-icon-7 g{stroke:var(--color-1)}.pm-2 .show-label.active.deg-7.colored.dimmed{background-color:var(--color-1-dimmed);color:var(--light-48)}.pm-3 .show-label.active.deg-1.colored{background-color:var(--color-3)}.pm-3 .color-label.active .color-icon-1 g{stroke:var(--color-3)}.pm-3 .show-label.active.deg-1.colored.dimmed{background-color:var(--color-3-dimmed);color:var(--light-48)}.pm-3 .show-label.active.deg-2.colored{background-color:var(--color-4)}.pm-3 .color-label.active .color-icon-2 g{stroke:var(--color-4)}.pm-3 .show-label.active.deg-2.colored.dimmed{background-color:var(--color-4-dimmed);color:var(--light-48)}.pm-3 .show-label.active.deg-3.colored{background-color:var(--color-5)}.pm-3 .color-label.active .color-icon-3 g{stroke:var(--color-5)}.pm-3 .show-label.active.deg-3.colored.dimmed{background-color:var(--color-5-dimmed);color:var(--light-48)}.pm-3 .show-label.active.deg-4.colored{background-color:var(--color-6)}.pm-3 .color-label.active .color-icon-4 g{stroke:var(--color-6)}.pm-3 .show-label.active.deg-4.colored.dimmed{background-color:var(--color-6-dimmed);color:var(--light-48)}.pm-3 .show-label.active.deg-5.colored{background-color:var(--color-7)}.pm-3 .color-label.active .color-icon-5 g{stroke:var(--color-7)}.pm-3 .show-label.active.deg-5.colored.dimmed{background-color:var(--color-7-dimmed);color:var(--light-48)}.pm-3 .show-label.active.deg-6.colored{background-color:var(--color-1)}.pm-3 .color-label.active .color-icon-6 g{stroke:var(--color-1)}.pm-3 .show-label.active.deg-6.colored.dimmed{background-color:var(--color-1-dimmed);color:var(--light-48)}.pm-3 .show-label.active.deg-7.colored{background-color:var(--color-2)}.pm-3 .color-label.active .color-icon-7 g{stroke:var(--color-2)}.pm-3 .show-label.active.deg-7.colored.dimmed{background-color:var(--color-2-dimmed);color:var(--light-48)}.pm-4 .show-label.active.deg-1.colored{background-color:var(--color-4)}.pm-4 .color-label.active .color-icon-1 g{stroke:var(--color-4)}.pm-4 .show-label.active.deg-1.colored.dimmed{background-color:var(--color-4-dimmed);color:var(--light-48)}.pm-4 .show-label.active.deg-2.colored{background-color:var(--color-5)}.pm-4 .color-label.active .color-icon-2 g{stroke:var(--color-5)}.pm-4 .show-label.active.deg-2.colored.dimmed{background-color:var(--color-5-dimmed);color:var(--light-48)}.pm-4 .show-label.active.deg-3.colored{background-color:var(--color-6)}.pm-4 .color-label.active .color-icon-3 g{stroke:var(--color-6)}.pm-4 .show-label.active.deg-3.colored.dimmed{background-color:var(--color-6-dimmed);color:var(--light-48)}.pm-4 .show-label.active.deg-4.colored{background-color:var(--color-7)}.pm-4 .color-label.active .color-icon-4 g{stroke:var(--color-7)}.pm-4 .show-label.active.deg-4.colored.dimmed{background-color:var(--color-7-dimmed);color:var(--light-48)}.pm-4 .show-label.active.deg-5.colored{background-color:var(--color-1)}.pm-4 .color-label.active .color-icon-5 g{stroke:var(--color-1)}.pm-4 .show-label.active.deg-5.colored.dimmed{background-color:var(--color-1-dimmed);color:var(--light-48)}.pm-4 .show-label.active.deg-6.colored{background-color:var(--color-2)}.pm-4 .color-label.active .color-icon-6 g{stroke:var(--color-2)}.pm-4 .show-label.active.deg-6.colored.dimmed{background-color:var(--color-2-dimmed);color:var(--light-48)}.pm-4 .show-label.active.deg-7.colored{background-color:var(--color-3)}.pm-4 .color-label.active .color-icon-7 g{stroke:var(--color-3)}.pm-4 .show-label.active.deg-7.colored.dimmed{background-color:var(--color-3-dimmed);color:var(--light-48)}.pm-5 .show-label.active.deg-1.colored{background-color:var(--color-5)}.pm-5 .color-label.active .color-icon-1 g{stroke:var(--color-5)}.pm-5 .show-label.active.deg-1.colored.dimmed{background-color:var(--color-5-dimmed);color:var(--light-48)}.pm-5 .show-label.active.deg-2.colored{background-color:var(--color-6)}.pm-5 .color-label.active .color-icon-2 g{stroke:var(--color-6)}.pm-5 .show-label.active.deg-2.colored.dimmed{background-color:var(--color-6-dimmed);color:var(--light-48)}.pm-5 .show-label.active.deg-3.colored{background-color:var(--color-7)}.pm-5 .color-label.active .color-icon-3 g{stroke:var(--color-7)}.pm-5 .show-label.active.deg-3.colored.dimmed{background-color:var(--color-7-dimmed);color:var(--light-48)}.pm-5 .show-label.active.deg-4.colored{background-color:var(--color-1)}.pm-5 .color-label.active .color-icon-4 g{stroke:var(--color-1)}.pm-5 .show-label.active.deg-4.colored.dimmed{background-color:var(--color-1-dimmed);color:var(--light-48)}.pm-5 .show-label.active.deg-5.colored{background-color:var(--color-2)}.pm-5 .color-label.active .color-icon-5 g{stroke:var(--color-2)}.pm-5 .show-label.active.deg-5.colored.dimmed{background-color:var(--color-2-dimmed);color:var(--light-48)}.pm-5 .show-label.active.deg-6.colored{background-color:var(--color-3)}.pm-5 .color-label.active .color-icon-6 g{stroke:var(--color-3)}.pm-5 .show-label.active.deg-6.colored.dimmed{background-color:var(--color-3-dimmed);color:var(--light-48)}.pm-5 .show-label.active.deg-7.colored{background-color:var(--color-4)}.pm-5 .color-label.active .color-icon-7 g{stroke:var(--color-4)}.pm-5 .show-label.active.deg-7.colored.dimmed{background-color:var(--color-4-dimmed);color:var(--light-48)}.pm-6 .show-label.active.deg-1.colored{background-color:var(--color-6)}.pm-6 .color-label.active .color-icon-1 g{stroke:var(--color-6)}.pm-6 .show-label.active.deg-1.colored.dimmed{background-color:var(--color-6-dimmed);color:var(--light-48)}.pm-6 .show-label.active.deg-2.colored{background-color:var(--color-7)}.pm-6 .color-label.active .color-icon-2 g{stroke:var(--color-7)}.pm-6 .show-label.active.deg-2.colored.dimmed{background-color:var(--color-7-dimmed);color:var(--light-48)}.pm-6 .show-label.active.deg-3.colored{background-color:var(--color-1)}.pm-6 .color-label.active .color-icon-3 g{stroke:var(--color-1)}.pm-6 .show-label.active.deg-3.colored.dimmed{background-color:var(--color-1-dimmed);color:var(--light-48)}.pm-6 .show-label.active.deg-4.colored{background-color:var(--color-2)}.pm-6 .color-label.active .color-icon-4 g{stroke:var(--color-2)}.pm-6 .show-label.active.deg-4.colored.dimmed{background-color:var(--color-2-dimmed);color:var(--light-48)}.pm-6 .show-label.active.deg-5.colored{background-color:var(--color-3)}.pm-6 .color-label.active .color-icon-5 g{stroke:var(--color-3)}.pm-6 .show-label.active.deg-5.colored.dimmed{background-color:var(--color-3-dimmed);color:var(--light-48)}.pm-6 .show-label.active.deg-6.colored{background-color:var(--color-4)}.pm-6 .color-label.active .color-icon-6 g{stroke:var(--color-4)}.pm-6 .show-label.active.deg-6.colored.dimmed{background-color:var(--color-4-dimmed);color:var(--light-48)}.pm-6 .show-label.active.deg-7.colored{background-color:var(--color-5)}.pm-6 .color-label.active .color-icon-7 g{stroke:var(--color-5)}.pm-6 .show-label.active.deg-7.colored.dimmed{background-color:var(--color-5-dimmed);color:var(--light-48)}.pm-7 .show-label.active.deg-1.colored{background-color:var(--color-7)}.pm-7 .color-label.active .color-icon-1 g{stroke:var(--color-7)}.pm-7 .show-label.active.deg-1.colored.dimmed{background-color:var(--color-7-dimmed);color:var(--light-48)}.pm-7 .show-label.active.deg-2.colored{background-color:var(--color-1)}.pm-7 .color-label.active .color-icon-2 g{stroke:var(--color-1)}.pm-7 .show-label.active.deg-2.colored.dimmed{background-color:var(--color-1-dimmed);color:var(--light-48)}.pm-7 .show-label.active.deg-3.colored{background-color:var(--color-2)}.pm-7 .color-label.active .color-icon-3 g{stroke:var(--color-2)}.pm-7 .show-label.active.deg-3.colored.dimmed{background-color:var(--color-2-dimmed);color:var(--light-48)}.pm-7 .show-label.active.deg-4.colored{background-color:var(--color-3)}.pm-7 .color-label.active .color-icon-4 g{stroke:var(--color-3)}.pm-7 .show-label.active.deg-4.colored.dimmed{background-color:var(--color-3-dimmed);color:var(--light-48)}.pm-7 .show-label.active.deg-5.colored{background-color:var(--color-4)}.pm-7 .color-label.active .color-icon-5 g{stroke:var(--color-4)}.pm-7 .show-label.active.deg-5.colored.dimmed{background-color:var(--color-4-dimmed);color:var(--light-48)}.pm-7 .show-label.active.deg-6.colored{background-color:var(--color-5)}.pm-7 .color-label.active .color-icon-6 g{stroke:var(--color-5)}.pm-7 .show-label.active.deg-6.colored.dimmed{background-color:var(--color-5-dimmed);color:var(--light-48)}.pm-7 .show-label.active.deg-7.colored{background-color:var(--color-6)}.pm-7 .color-label.active .color-icon-7 g{stroke:var(--color-6)}.pm-7 .show-label.active.deg-7.colored.dimmed{background-color:var(--color-6-dimmed);color:var(--light-48)}.show-label span{-webkit-user-select:none;-moz-user-select:none;user-select:none}.color-icon{width:24px;height:24px;margin-top:8px}.color-icon g{stroke:gray}.main-container{max-width:1556px;margin:0 auto}.top-row{width:100%;max-width:calc(100% - 160px);margin:0 auto}.settings-row,.top-row{display:flex;justify-content:space-between;align-items:center}.settings-row{margin-bottom:8px}.fb-scroll-container{width:100%;overflow-x:scroll}.fretboard-container{position:relative;width:100%;max-width:calc(100% - 160px);margin:8px auto 0;padding-bottom:16px}.fretboard-svg{background:var(--black-02);border-radius:8px;min-width:900px;width:100%}.bottom-settings{margin-top:24px;display:flex;justify-content:flex-start;gap:24px;max-width:calc(100% - 160px);margin:0 auto;flex-wrap:wrap}.key-selectors{display:flex;gap:8px;flex-direction:column;align-items:flex-start;position:relative}.key-selectors .row{display:flex;flex-direction:row;gap:8px}.selected-key-label{font-size:16px;font-weight:600;color:var(--gray-03);text-align:center;margin-bottom:8px;position:absolute;top:1px;left:1px}.settings-container{padding:24px;background:#212121;box-shadow:0 4px 60px rgba(0,0,0,.24);border-radius:12px}.row.flats,.row.sharps{margin-left:24px}.row.flats button.key-button:nth-child(2),.row.sharps button.key-button:nth-child(2){margin-right:48px}.scale-degree-column{display:flex;flex-direction:column;gap:8px}.scale-degree-settings{display:flex;flex-direction:row;gap:8px}@media(min-width:767px)and (max-width:1196px){.bottom-settings,.fretboard-container,.top-row{max-width:calc(100% - 80px)}.fretboard-container{margin-top:8px;margin-left:40px;margin-right:0;margin-bottom:0}}@media(max-width:767px){.bottom-settings,.fretboard-container,.top-row{max-width:calc(100% - 40px)}}@media(max-width:960px){.bottom-settings{justify-content:center}}@media(min-width:768px){.middle-row::-webkit-scrollbar{height:8px}.middle-row::-webkit-scrollbar-thumb{background-color:var(--light-24);border-radius:4px}.middle-row::-webkit-scrollbar-track{background-color:var(--light-12);border-radius:4px}}@keyframes noteAnimation{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.note-circle.animating{animation:noteAnimation .12s ease-out}.bright-label,.color-label,.key-button,.show-label{cursor:pointer;transition:all .12s ease-out;transform-origin:center center}.bright-label:hover,.color-label:hover,.key-button:hover,.show-label:hover{transform:scale(1.12);filter:brightness(1.12)}.bright-label:active,.color-label:active,.key-button:active,.show-label:active{transform:scale(1)}g.note-circle:hover{transform:scale(1.12);filter:brightness(1.12)}g.note-circle:active{transform:scale(1)}:root{--black-01:#0f0f0f;--black-02:#262626;--black-03:#2e2e2e;--gray-01:#474747;--gray-02:grey;--gray-03:#a8a8a8;--white-01:#f5f5f5;--white-02:#eee;--red-primary:#ff6161;--orange-primary:#ff9344;--yellow-primary:#edda31;--green-primary:#5e9055;--blue-primary:#5297fd;--purple-primary:#9664ff;--pink-primary:#f559ef;--red-dimmed:#4b2d2d;--orange-dimmed:#4b3728;--yellow-dimmed:#494526;--green-dimmed:#2d352a;--blue-dimmed:#2c374d;--purple-dimmed:#362e4e;--pink-dimmed:#492d4a;--color-1:var(--red-primary);--color-2:var(--orange-primary);--color-3:var(--yellow-primary);--color-4:var(--green-primary);--color-5:var(--blue-primary);--color-6:var(--purple-primary);--color-7:var(--pink-primary);--color-1-dimmed:var(--red-dimmed);--color-2-dimmed:var(--orange-dimmed);--color-3-dimmed:var(--yellow-dimmed);--color-4-dimmed:var(--green-dimmed);--color-5-dimmed:var(--blue-dimmed);--color-6-dimmed:var(--purple-dimmed);--color-7-dimmed:var(--pink-dimmed);--light-48:hsla(0,0%,100%,.48);--light-24:hsla(0,0%,100%,.24);--light-12:hsla(0,0%,100%,.12);--slider-background-color:#474747;--slider-checked-background-color:#474747;--color-for-checked-left-label:#f5f5f5;--color-for-checked-right-label:#f5f5f5}#app{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px;box-sizing:border-box}#app,*{font-family:Jost,Avenir Next,Helvetica,Arial,sans-serif}