.element-tooltip[data-v-1e0ddbaa]{background-color:#141414;border:1px solid var(--shade-20);border-radius:8px;padding:8px 12px;font-size:13px;color:var(--shade-70);max-width:200px;word-wrap:break-word;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.3)}.element-tooltip--adjusted[data-v-1e0ddbaa]{border-color:var(--shade-40)}.tooltip-content[data-v-1e0ddbaa]{font-size:inherit;line-height:1.4}.tooltip-enter-active[data-v-1e0ddbaa],.tooltip-leave-active[data-v-1e0ddbaa]{transition:all .2s ease-out}.tooltip-enter-from[data-v-1e0ddbaa],.tooltip-leave-to[data-v-1e0ddbaa]{opacity:0;transform:scale(.8)}.tooltip-enter-to[data-v-1e0ddbaa],.tooltip-leave-from[data-v-1e0ddbaa]{opacity:1;transform:scale(1)}.note-label[data-v-75754b6a]{display:inline-flex;align-items:baseline;justify-content:center;font-family:Jost,sans-serif;font-weight:600;text-align:center;color:inherit}.note-label--small .note-letter[data-v-75754b6a]{font-size:14px;line-height:1}.note-label--small .note-accidental[data-v-75754b6a]{margin-left:1px;align-self:flex-start;margin-top:2px}.note-label--small .note-both[data-v-75754b6a]{font-size:14px;line-height:1}.note-label--medium .note-letter[data-v-75754b6a]{font-size:18px;line-height:1}.note-label--medium .note-accidental[data-v-75754b6a]{margin-left:1px;align-self:flex-start;margin-top:2px}.note-label--medium .note-both[data-v-75754b6a]{font-size:14px;line-height:1}.note-label--large .note-letter[data-v-75754b6a]{font-size:24px;line-height:1}.note-label--large .note-accidental[data-v-75754b6a]{margin-left:3px;align-self:flex-start;margin-top:-1px}.note-label--large .note-both[data-v-75754b6a]{font-size:18px;line-height:1}.note-letter[data-v-75754b6a]{font-family:Jost,sans-serif;font-weight:600;color:inherit}.note-accidental[data-v-75754b6a]{font-family:Jost,sans-serif;font-weight:400;position:relative;top:-.1em;color:inherit}.note-accidental svg[data-v-75754b6a]{color:inherit}.note-both[data-v-75754b6a]{font-family:Jost,sans-serif;font-weight:600;white-space:nowrap}.tuning-controls[data-v-bcc3cce8]{display:flex;flex-direction:column;position:absolute;top:53px;left:12px;gap:6px;border-radius:48px;&[data-v-bcc3cce8]:has(.tuning-selector--open){.tuning-selector[data-v-bcc3cce8]:not(.tuning-selector--open){opacity:.2}}}.tuning-controls[data-v-bcc3cce8]:hover{cursor:pointer;.tuning-selector-trigger[data-v-bcc3cce8]{background-color:var(--shade-10)}}.tuning-controls.bass[data-v-bcc3cce8]{top:66px;gap:28px}.tuning-selector[data-v-bcc3cce8]{position:relative;width:40px;height:40px}.tuning-selector-trigger[data-v-bcc3cce8]{width:40px;height:40px;background:transparent;border:2px solid transparent;border-radius:20px;color:var(--shade-50);cursor:pointer;transition:all .12s ease-out;display:flex;align-items:center;justify-content:center;[data-v-bcc3cce8]{pointer-events:none}&[data-v-bcc3cce8]:focus-visible{outline-offset:2px}&[data-v-bcc3cce8]:hover{outline:none;border:2px solid var(--shade-50)}&--active[data-v-bcc3cce8],&[data-v-bcc3cce8]:hover{background-color:var(--shade-10);color:var(--shade-70)}&--active[data-v-bcc3cce8]{border:2px solid var(--color-0);box-shadow:0 0 0 2px rgba(255,97,97,.2);&[data-v-bcc3cce8]:focus-visible{outline-offset:2px}}&.selector-open[data-v-bcc3cce8]{background-color:var(--shade-10);border:2px solid var(--shade-50);color:var(--shade-70);outline-offset:2px}}.tuning-selector-open[data-v-bcc3cce8]{position:absolute;left:40px;top:-8px;height:286px;bottom:0;width:60px;border:1px solid var(--shade-30);background:#141414de;border-radius:8px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:8px 4px;overflow-y:auto;display:flex;flex-direction:column;gap:0;z-index:100000;box-shadow:0 4px 12px rgba(0,0,0,.3);&[data-v-bcc3cce8]:focus-visible{outline-offset:2px}}.tuning-option[data-v-bcc3cce8]{width:100%;height:32px;border:none;border-radius:4px;background:transparent;color:var(--shade-60);cursor:pointer;transition:all .12s ease-out;display:flex;align-items:center;justify-content:left;padding-left:17px;position:relative;&[data-v-bcc3cce8]:focus-visible{outline-offset:2px}&[data-v-bcc3cce8]:hover:not(.tuning-option--selected){background:var(--shade-20);color:var(--shade-70)}}.tuning-option--selected[data-v-bcc3cce8]{color:var(--shade-70)}.tuning-option--focused[data-v-bcc3cce8]{background:var(--shade-30);color:var(--shade-70)}.selection-indicator[data-v-bcc3cce8]{position:absolute;left:6px;top:50%;transform:translateY(-50%);width:6px;height:6px;background-color:var(--shade-70);border-radius:50%;pointer-events:none}.tuning-dropdown-enter-active[data-v-bcc3cce8],.tuning-dropdown-leave-active[data-v-bcc3cce8]{transition:all .3s ease-out}.tuning-dropdown-enter-from[data-v-bcc3cce8],.tuning-dropdown-leave-to[data-v-bcc3cce8]{opacity:0;transform:scale(.8)}.tuning-dropdown-enter-to[data-v-bcc3cce8],.tuning-dropdown-leave-from[data-v-bcc3cce8]{opacity:1;transform:scale(1)}.tooltip-container[data-v-4c365c0b]{background:var(--shade-10);border:1px solid var(--shade-20);border-radius:8px;padding:8px 12px;font-size:14px;box-shadow:0 4px 12px rgba(0,0,0,.3);max-width:300px;word-wrap:break-word;transition:left .25s ease-out,top .25s ease-out,width .2s ease-out,height .2s ease-out}.tooltip-content[data-v-4c365c0b],.tooltip-text[data-v-4c365c0b]{color:var(--shade-70);line-height:1.4}.tooltip-enter-active[data-v-4c365c0b],.tooltip-leave-active[data-v-4c365c0b]{transition:all .15s ease-out}.tooltip-enter-from[data-v-4c365c0b],.tooltip-leave-to[data-v-4c365c0b]{opacity:0;transform:scale(.1) translateY(4px)}.tooltip-enter-to[data-v-4c365c0b],.tooltip-leave-from[data-v-4c365c0b]{opacity:1;transform:scale(1) translateY(0)}.fretboard-tooltip-content[data-v-be8acd80]{display:flex;flex-direction:column;gap:6px;min-width:-moz-max-content;min-width:max-content;white-space:nowrap}.note-info[data-v-be8acd80]{display:flex;align-items:baseline;gap:8px}.note-name[data-v-be8acd80]{font-size:16px;font-weight:600;color:var(--shade-70)}.alternate-name[data-v-be8acd80]{font-size:14px;font-weight:500;color:var(--shade-50)}.scale-degree[data-v-be8acd80]{font-size:13px;color:var(--shade-70)}.degree-value[data-v-be8acd80]{font-weight:600;color:var(--shade-70)}.instruction[data-v-be8acd80]{font-size:12px;color:var(--shade-60);font-style:italic;border-top:1px solid var(--shade-30);padding-top:6px;margin-top:2px}.scale-degree-label[data-v-1996f515]{display:inline-flex;align-items:baseline;justify-content:center;font-family:Jost,sans-serif;font-weight:600;text-align:center;color:inherit}.scale-degree-label--small .degree-number[data-v-1996f515]{font-size:14px;line-height:1}.scale-degree-label--small .degree-accidental[data-v-1996f515]{margin-right:1px;align-self:flex-start;margin-top:2px}.scale-degree-label--medium .degree-number[data-v-1996f515]{font-size:18px;line-height:1}.scale-degree-label--medium .degree-accidental[data-v-1996f515]{margin-right:1px;align-self:flex-start;margin-top:2px}.scale-degree-label--large .degree-number[data-v-1996f515]{font-size:24px;line-height:1}.scale-degree-label--large .degree-accidental[data-v-1996f515]{margin-right:3px;align-self:flex-start;margin-top:-1px}.degree-number[data-v-1996f515]{font-family:Jost,sans-serif;font-weight:600;color:inherit}.degree-accidental[data-v-1996f515]{font-family:Jost,sans-serif;font-weight:400;position:relative;top:-.1em;color:inherit}.degree-accidental svg[data-v-1996f515]{color:inherit}.fretboard[data-v-095f810c]{min-width:1080px;width:100%;height:360px;padding-bottom:12px;padding-top:4px}.nut[data-v-095f810c]{stroke:var(--shade-70);stroke-width:2}.fret[data-v-095f810c]{stroke:var(--shade-50);stroke-width:2}.string[data-v-095f810c]{stroke:var(--shade-70)}.fret-number-label[data-v-095f810c]{font-size:16px;font-weight:600;text-anchor:middle;fill:var(--shade-40)}.fret-number-label--highlighted[data-v-095f810c]{fill:var(
    --shade-60
  )}.fret-marker[data-v-095f810c]{fill:var(--shade-60)}.note-circle[data-v-095f810c]{fill:var(--shade-40);transition:all .12s ease-out;cursor:pointer;transform-box:fill-box;transform-origin:center;transform:scale(1);opacity:1}.note-label[data-v-095f810c]{fill:inherit;font-size:18px;font-weight:600;text-anchor:middle;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}.note-label[data-v-095f810c] *{fill:inherit}.dimmed .note-label[data-v-095f810c]{fill:var(--light-48)}g.note-circle[data-v-095f810c]:hover{transform:scale(1.12);filter:brightness(1.12)}g.note-circle[data-v-095f810c]:active{transform:scale(1)}.note-marker[data-v-095f810c]{transform-box:fill-box;transform-origin:50% 50%}.note-marker-enter-active[data-v-095f810c],.note-marker-leave-active[data-v-095f810c]{transition:transform .2s ease-out,opacity .2s ease-out}.note-marker-enter-from[data-v-095f810c],.note-marker-leave-to[data-v-095f810c]{transform:scale(.1);opacity:0}.note-marker-enter-to[data-v-095f810c],.note-marker-leave-from[data-v-095f810c]{transform:scale(1);opacity:1}.note-marker circle[data-v-095f810c]{transform-box:border-box;transform-origin:center;transition:fill .2s ease-out}.note-marker svg[data-v-095f810c]{transition:opacity .2s ease-out}.note-marker svg path[data-v-095f810c]{transition:fill .2s ease-out}.interactive-marker[data-v-095f810c]{cursor:pointer}.note-marker.hover-active circle[data-v-095f810c]:first-child{stroke:var(--shade-60);stroke-width:2px;transition:all .9s ease}.note-marker[data-v-095f810c]{transition:transform .2s ease-out;transform-origin:center}.note-foreign-object[data-v-095f810c]{transform-box:border-box;transform-origin:center;overflow:visible}.note-label-container[data-v-095f810c]{width:100%;height:100%;display:flex;align-items:center;justify-content:center;pointer-events:none;transform-box:border-box;transform-origin:center}.key-selector[data-v-923477c6]{position:relative;width:44px;height:44px}.key-selector--open[data-v-923477c6]{width:320px;height:83px;z-index:1000;transition:all .24s ease-out}.root-selector-trigger[data-v-923477c6]{width:44px;height:44px;background:var(--shade-10);border:none;border-radius:32px;font-weight:600;font-size:18px;text-align:center;color:var(--shade-70);cursor:pointer;transition:outline .1s ease-out;display:flex;align-items:center;justify-content:center}.root-selector-trigger[data-v-923477c6] *{pointer-events:none}.root-selector-open[data-v-923477c6]{position:absolute;left:0;right:0;top:0;bottom:0;border:1px solid var(--shade-30);background:hsla(0,0%,8%,.678);border-radius:28px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);width:320px}.root-selector-open[data-v-923477c6]:focus-visible{outline:2px solid var(--light-24);outline-offset:2px}.black-keys[data-v-923477c6],.white-keys[data-v-923477c6]{position:relative;width:100%;height:100%}.piano-key[data-v-923477c6]{position:absolute;border:none;border-radius:117.544px;cursor:pointer;transition:all .2s ease-out;display:flex;align-items:center;justify-content:center}.piano-key[data-v-923477c6]:focus-visible{outline:2px solid var(--light-48);outline-offset:2px}.piano-key--white[data-v-923477c6]{width:40px;height:67px;top:8px;background:var(--shade-70);color:var(--shade-10)}.piano-key--white .note-label[data-v-923477c6]{position:absolute;top:38px}.piano-key--white[data-v-923477c6]:hover:not(.piano-key--selected){background:var(--shade-60)}.piano-key--white.piano-key--selected[data-v-923477c6]{background:var(--color-0);color:var(--shade-10)}.piano-key--black[data-v-923477c6]{width:40px;height:40px;top:-78px;background:var(--shade-20);color:var(--shade-70);z-index:10}.piano-key--black[data-v-923477c6]:hover:not(.piano-key--selected){background:var(--shade-30)}.piano-key--black.piano-key--selected[data-v-923477c6]{background:var(--color-0);color:var(--shade-10)}.piano-white-key-enter-active[data-v-923477c6],.piano-white-key-leave-active[data-v-923477c6]{transition:all .4s ease-out;transition-delay:var(--animation-delay,0ms)}.piano-white-key-enter-from[data-v-923477c6]{opacity:0}.piano-white-key-enter-to[data-v-923477c6],.piano-white-key-leave-from[data-v-923477c6]{opacity:1}.piano-white-key-leave-to[data-v-923477c6]{opacity:0}.piano-black-key-enter-active[data-v-923477c6],.piano-black-key-leave-active[data-v-923477c6]{transition:all .4s ease-out;transition-delay:var(--animation-delay,0ms)}.piano-black-key-enter-from[data-v-923477c6]{opacity:0}.piano-black-key-enter-to[data-v-923477c6],.piano-black-key-leave-from[data-v-923477c6]{opacity:1}.piano-black-key-leave-to[data-v-923477c6]{opacity:0}.scale-select[data-v-b353ada8]{max-width:120px;height:44px;background:var(--shade-10);border:none;border-radius:32px;font-weight:400;font-size:14px;text-align:left;padding:0 32px 0 16px;color:var(--shade-70);flex:none;order:1;flex-grow:0;cursor:pointer;transition:all .36s ease-out,outline .1s ease-out;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url('data:image/svg+xml;charset=US-ASCII,<svg width="8" height="5" viewBox="0 0 8 5" fill="%23333" xmlns="http://www.w3.org/2000/svg"><path d="M0.097818 1.06235C-0.111142 0.853387 0.0368522 0.496094 0.332367 0.496094H7.02335C7.31886 0.496094 7.46686 0.853387 7.2579 1.06235L3.91241 4.40787C3.78287 4.53741 3.57285 4.53741 3.44331 4.40787L0.097818 1.06235Z" fill="white"/></svg>');background-repeat:no-repeat;background-position:right 12px center;background-size:12px}.smart-toggle-switch[data-v-054b386a]{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0 16px;gap:24px;height:48px;background:var(--shade-10);border-radius:48px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex:none;order:1;flex-grow:0}.smart-toggle-switch[data-v-054b386a]:focus-visible{outline:2px solid var(--light-24);outline-offset:2px}.toggle-background-slider[data-v-054b386a]{position:absolute;display:flex;flex-direction:row;justify-content:center;align-items:center;padding:11px 8px;height:40px;background:var(--shade-30);border-radius:32px;transition:all .3s ease-out;z-index:1}.toggle-option[data-v-054b386a]{position:relative;z-index:2;display:flex;justify-content:center;align-items:center;white-space:nowrap;height:40px;font-size:14px;color:var(--shade-50);transition:color .3s ease-out}.toggle-option.active[data-v-054b386a]{color:var(--shade-70)}.toggle-option.left[data-v-054b386a]{order:0}.toggle-option.right[data-v-054b386a]{order:1}.highlighting-settings[data-v-4ffde150]{border-radius:8px;transition:all .36s ease-out}.highlighting-settings--collapsed .labels-column[data-v-4ffde150]{opacity:0;transform:translateY(-8px);pointer-events:none;width:0;overflow:hidden}.highlighting-settings--collapsed .color-button[data-v-4ffde150],.highlighting-settings--collapsed .dim-button[data-v-4ffde150]{opacity:0;transform:translateY(-12px) scale(.8);pointer-events:none;width:32px;height:32px}.highlighting-settings--collapsed .show-button[data-v-4ffde150]{width:32px;height:32px;border-width:2px}.highlighting-settings--collapsed .show-button .button-note-label[data-v-4ffde150]{font-size:12px;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.highlighting-settings--collapsed .show-button .button-note-label .note-label svg[data-v-4ffde150],.highlighting-settings--collapsed .show-button .button-note-label .note-label[data-v-4ffde150]{font-size:10px!important;width:18px!important;height:18px!important}.highlighting-settings--collapsed .show-button .button-note-label .note-label text[data-v-4ffde150]{font-size:10px!important}.highlighting-settings--collapsed .show-button .button-note-label .scale-degree-label[data-v-4ffde150]{font-size:10px!important;width:18px!important;height:18px!important}.highlighting-settings--collapsed .show-button .button-note-label .scale-degree-label svg[data-v-4ffde150]{width:12px!important;height:12px!important;font-size:8px!important}.highlighting-settings--collapsed .show-button .button-note-label .scale-degree-label text[data-v-4ffde150]{font-size:8px!important}.highlighting-settings--collapsed .show-button .button-note-label .scale-degree-label .degree-number[data-v-4ffde150],.highlighting-settings--collapsed .show-button .button-note-label .scale-degree-label.scale-degree-label--medium .degree-number[data-v-4ffde150]{font-size:10px!important}.highlighting-settings--collapsed .show-button .button-note-label .scale-degree-label.scale-degree-label--medium svg[data-v-4ffde150]{width:12px!important;height:12px!important}.highlighting-settings--collapsed .show-button .button-note-label .scale-degree-label.scale-degree-label--small .degree-number[data-v-4ffde150]{font-size:8px!important}.highlighting-settings--collapsed .show-button .button-note-label .scale-degree-label.scale-degree-label--small svg[data-v-4ffde150]{width:10px!important;height:10px!important}.highlighting-settings--collapsed .highlight-settings-layout[data-v-4ffde150]{gap:0}.highlighting-settings--collapsed .controls-columns[data-v-4ffde150],.highlighting-settings--collapsed .note-column[data-v-4ffde150]{gap:6px}.highlight-settings-layout[data-v-4ffde150]{display:flex;align-items:flex-start;gap:24px;transition:all .36s ease-out}.labels-column[data-v-4ffde150]{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:0;transition:all .36s ease-out}.function-label[data-v-4ffde150]{height:48px;text-align:left;color:var(--shade-70);font-size:12px;display:flex;align-items:center;flex:none;order:0;flex-grow:0}.controls-columns[data-v-4ffde150]{display:flex;gap:8px;justify-content:center;transition:all .36s ease-out}.note-column[data-v-4ffde150]{display:flex;flex-direction:column;gap:8px;align-items:center;transition:all .36s ease-out}button[data-v-4ffde150]{border-radius:50%;border:none;transition:all .3s ease,outline .1s ease-out}.show-button[data-v-4ffde150],button[data-v-4ffde150]{width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer}.show-button[data-v-4ffde150]{border-radius:50%;border:4px solid var(--shade-10);flex-direction:column;transition:all .36s ease-out,outline .1s ease-out;background-color:var(--shade-10)}.show-button svg[data-v-4ffde150]{width:48px;height:100%}.show-button.show-button--hidden[data-v-4ffde150]{background-color:var(--shade-10)}.color-button[data-v-4ffde150],.dim-button[data-v-4ffde150]{width:48px;height:48px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:1;transform:scale(1);transition:all .36s ease-out,outline .1s ease-out;background-color:var(--shade-10);border:4px solid var(--shade-10)}.color-button svg[data-v-4ffde150],.dim-button svg[data-v-4ffde150]{width:24px;height:24px}.color-button.color-button--active[data-v-4ffde150],.dim-button.color-button--active[data-v-4ffde150]{background-color:var(--shade-30)!important}.color-button.color-button--inactive[data-v-4ffde150],.dim-button.color-button--inactive[data-v-4ffde150]{background-color:var(--shade-10)!important}.color-button.color-button--hidden[data-v-4ffde150],.dim-button.color-button--hidden[data-v-4ffde150]{opacity:0!important;transform:scale(.1)!important;pointer-events:none}.color-button.dim-button--bright[data-v-4ffde150],.dim-button.dim-button--bright[data-v-4ffde150]{background-color:var(--shade-30)!important}.color-button.dim-button--dimmed[data-v-4ffde150],.dim-button.dim-button--dimmed[data-v-4ffde150]{background-color:var(--shade-10)!important}.color-button.dim-button--hidden[data-v-4ffde150],.dim-button.dim-button--hidden[data-v-4ffde150]{opacity:0!important;transform:scale(.1)!important;pointer-events:none}.button-note-label[data-v-4ffde150]{width:100%;height:100%;display:flex;align-items:center;justify-content:center;pointer-events:none}@media(max-width:900px){.highlight-settings-layout[data-v-4ffde150]{gap:20px}.controls-columns[data-v-4ffde150]{gap:6px}}@media(max-width:640px){.labels-column[data-v-4ffde150]{display:none}.highlight-settings-layout[data-v-4ffde150]{gap:16px}.controls-columns[data-v-4ffde150]{gap:4px}.note-column[data-v-4ffde150]{gap:6px}button[data-v-4ffde150]{width:40px;height:40px}.color-button[data-v-4ffde150],.dim-button[data-v-4ffde150],.show-button[data-v-4ffde150]{width:40px;height:40px;border-width:3px}.color-button svg[data-v-4ffde150],.dim-button svg[data-v-4ffde150]{width:20px;height:20px}}@media(max-width:480px){.labels-column[data-v-4ffde150]{display:none}.highlight-settings-layout[data-v-4ffde150]{gap:12px}.controls-columns[data-v-4ffde150]{gap:3px}.note-column[data-v-4ffde150]{gap:4px}button[data-v-4ffde150]{width:36px;height:36px}.color-button[data-v-4ffde150],.dim-button[data-v-4ffde150],.show-button[data-v-4ffde150]{width:36px;height:36px;border-width:2px}.color-button svg[data-v-4ffde150],.dim-button svg[data-v-4ffde150]{width:18px;height:18px}}.fretboard-settings[data-v-3d901df7]{display:flex;flex-direction:row;align-items:flex-start;padding:24px 0 24px 32px;gap:32px;position:relative;width:100%;background:var(--shade-20);border-radius:0 0 32px 32px;margin:0 auto;transition:all .36s ease-out;height:auto;min-height:160px}.fretboard-settings--collapsed[data-v-3d901df7]{height:72px!important;min-height:72px!important;overflow:hidden;padding:16px 0 16px 32px}.fretboard-settings--collapsed .markers-toggle[data-v-3d901df7]{opacity:0;transform:translateY(-8px);pointer-events:none}.fretboard-settings--collapsed .root-selector[data-v-3d901df7],.fretboard-settings--collapsed .scale-selector[data-v-3d901df7]{height:32px!important}.fretboard-settings--collapsed .root-selector[data-v-3d901df7] .root-selector-trigger,.fretboard-settings--collapsed .scale-selector[data-v-3d901df7] .root-selector-trigger{height:32px;width:32px;font-size:14px;display:flex;align-items:center;justify-content:center}.fretboard-settings--collapsed .root-selector[data-v-3d901df7] .root-selector-trigger .note-label,.fretboard-settings--collapsed .root-selector[data-v-3d901df7] .root-selector-trigger .note-label svg,.fretboard-settings--collapsed .scale-selector[data-v-3d901df7] .root-selector-trigger .note-label,.fretboard-settings--collapsed .scale-selector[data-v-3d901df7] .root-selector-trigger .note-label svg{font-size:12px!important;width:20px!important;height:20px!important}.fretboard-settings--collapsed .root-selector[data-v-3d901df7] .root-selector-trigger .note-label text,.fretboard-settings--collapsed .scale-selector[data-v-3d901df7] .root-selector-trigger .note-label text{font-size:12px!important}.fretboard-settings--collapsed .root-selector[data-v-3d901df7] .scale-select,.fretboard-settings--collapsed .scale-selector[data-v-3d901df7] .scale-select{height:32px;font-size:12px;padding:6px 10px}.fretboard-settings--collapsed .root-selector[data-v-3d901df7]{width:32px!important}.fretboard-settings--collapsed .select-menus[data-v-3d901df7]{height:32px}.fretboard-settings--collapsed .left-settings-container[data-v-3d901df7]{margin-top:0;gap:16px}.collapse-toggle[data-v-3d901df7]{position:absolute;top:16px;right:24px;width:32px;height:32px;background:var(--shade-10);border:1px solid var(--shade-30);border-radius:16px;color:var(--shade-60);font-size:20px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease-out;z-index:10}.collapse-toggle[data-v-3d901df7]:hover{background:var(--shade-20);color:var(--shade-70);border-color:var(--shade-40)}.collapse-toggle[data-v-3d901df7]:focus-visible{outline:2px solid var(--light-48);outline-offset:2px}.left-settings-container[data-v-3d901df7]{display:flex;flex-direction:column;align-items:flex-start;padding:0;gap:24px;margin-top:12px;flex:none;order:0;flex-grow:0}.root-and-scale-selector[data-v-3d901df7]{display:flex;justify-content:center;align-items:center;padding:0;flex:none;order:0;flex-grow:0;transition:all .36s ease-out}.select-menus[data-v-3d901df7]{flex-direction:row;align-items:flex-end;gap:8px;width:186px;height:44px}.markers-toggle[data-v-3d901df7],.select-menus[data-v-3d901df7]{display:flex;padding:0;flex:none;order:1;flex-grow:0;transition:all .36s ease-out}.markers-toggle[data-v-3d901df7]{justify-content:center;align-items:center}.settings-divider[data-v-3d901df7]{width:2px;height:100%;background:var(--shade-10);flex-shrink:0}.right-settings-container[data-v-3d901df7]{flex:1;display:flex;justify-content:flex-start;overflow-x:auto;scrollbar-width:thin;scrollbar-color:transparent transparent;padding:4px 0 8px}.right-settings-container[data-v-3d901df7]::-webkit-scrollbar{height:8px}.right-settings-container[data-v-3d901df7]::-webkit-scrollbar-track{background:transparent;border-radius:4px}.right-settings-container[data-v-3d901df7]::-webkit-scrollbar-thumb{background:transparent;border-radius:4px;-webkit-transition:background-color .2s ease;transition:background-color .2s ease}.right-settings-container[data-v-3d901df7]:hover{scrollbar-color:var(--shade-40) var(--shade-30)}.right-settings-container[data-v-3d901df7]:hover::-webkit-scrollbar-thumb{background:var(--shade-40)}.right-settings-container[data-v-3d901df7]:hover::-webkit-scrollbar-track{background:var(--shade-30)}@media(max-width:1200px){.fretboard-settings[data-v-3d901df7]{gap:28px;padding:24px 0 24px 28px}}@media(max-width:900px){.fretboard-settings[data-v-3d901df7]{gap:24px}}@media(max-width:800px){.fretboard-settings[data-v-3d901df7]{flex-direction:column;gap:20px}.left-settings-container[data-v-3d901df7]{width:100%;flex-direction:row;justify-content:flex-start;align-items:flex-start;gap:16px;padding-right:24px;margin-top:0}.markers-toggle[data-v-3d901df7],.root-and-scale-selector[data-v-3d901df7]{flex-direction:row;align-items:center;width:auto;height:auto;gap:12px}.settings-divider[data-v-3d901df7]{display:none}.right-settings-container[data-v-3d901df7]{width:100%;justify-content:left}}@media(max-width:640px){.fretboard-settings[data-v-3d901df7]{gap:16px;padding:16px 0 16px 20px}.left-settings-container[data-v-3d901df7]{gap:12px}.markers-toggle[data-v-3d901df7],.root-and-scale-selector[data-v-3d901df7]{gap:8px}.smart-toggle-switch.markers-toggle-switch[data-v-3d901df7]{height:40px}.smart-toggle-switch.markers-toggle-switch[data-v-3d901df7] .toggle-background-slider{height:32px!important}.root-selector[data-v-3d901df7],.root-selector[data-v-3d901df7] .root-selector-trigger{height:40px;width:40px}.scale-selector[data-v-3d901df7] .scale-select{height:40px}}@media(max-width:480px){.fretboard-settings[data-v-3d901df7]{gap:12px;padding:12px 0 12px 16px}.left-settings-container[data-v-3d901df7]{flex-direction:column;gap:12px}.markers-toggle[data-v-3d901df7],.root-and-scale-selector[data-v-3d901df7]{width:100%;justify-content:space-between}}#app{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;box-sizing:border-box}.sticky-header{position:sticky;top:0;background-color:transparent;z-index:1000}.header-content{max-width:calc(100% - 160px);margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between}@media(max-width:1200px){.header-content{max-width:calc(100% - 80px);padding:16px 24px}}@media(max-width:900px){.header-content{max-width:calc(100% - 32px);padding:16px 16px}}@media(max-width:640px){.header-content{max-width:calc(100% - 16px);padding:16px 8px}}.rightside-content{display:flex;gap:20px}.main-title{margin:0;font-size:24px;color:var(--shade-70)}.version{font-size:14px;color:var(--shade-50)}h3[data-v-0d7965a8]{margin:40px 0 0}ul[data-v-0d7965a8]{list-style-type:none;padding:0}li[data-v-0d7965a8]{display:inline-block;margin:0 10px}a[data-v-0d7965a8]{color:#42b983}:root{--shade-10:#141414;--shade-20:#212121;--shade-30:#363636;--shade-40:#484848;--shade-50:#888;--shade-60:#a6a6a6;--shade-70:#ededed;--red-primary:#ff6161;--red-orange:#fa7046;--orange-primary:#f57f2b;--orange-yellow:#eca92d;--yellow-primary:#edda31;--green-primary:#44b731;--green-blue:#4ba797;--blue-primary:#5297fd;--blue-purple:#7265f6;--purple-primary:#9133f0;--purple-pink:#c850f0;--pink-primary:#ff6cf0;--red-dimmed:#4c2626;--red-orange-dimmed:#4b2a20;--orange-dimmed:#4a2d19;--orange-yellow-dimmed:#48431b;--yellow-dimmed:#48431b;--green-dimmed:#1f3b1b;--green-blue-dimmed:#213733;--blue-dimmed:#23334c;--blue-purple-dimmed:#2a274a;--purple-dimmed:#321b49;--purple-pink-dimmed:#3f2249;--pink-dimmed:#4c2949;--color-0:var(--red-primary);--color-1:var(--red-orange);--color-2:var(--orange-primary);--color-3:var(--orange-yellow);--color-4:var(--yellow-primary);--color-5:var(--green-primary);--color-6:var(--green-blue);--color-7:var(--blue-primary);--color-8:var(--blue-purple);--color-9:var(--purple-primary);--color-10:var(--purple-pink);--color-11:var(--pink-primary);--color-0-dimmed:var(--red-dimmed);--color-1-dimmed:var(--red-orange-dimmed);--color-2-dimmed:var(--orange-dimmed);--color-3-dimmed:var(--orange-yellow-dimmed);--color-4-dimmed:var(--yellow-dimmed);--color-5-dimmed:var(--green-dimmed);--color-6-dimmed:var(--green-blue-dimmed);--color-7-dimmed:var(--blue-dimmed);--color-8-dimmed:var(--blue-purple-dimmed);--color-9-dimmed:var(--purple-dimmed);--color-10-dimmed:var(--purple-pink-dimmed);--color-11-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:var(--shade-40);--slider-checked-background-color:var(--shade-40);--color-for-checked-left-label:var(--shade-70);--color-for-checked-right-label:var(--shade-70)}*,html{box-sizing:border-box}html{background:linear-gradient(135deg,#121212,#161616)}body{margin:0;font-family:Jost,Avenir Next,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh}.main-container{max-width:calc(100% - 160px);margin:5vh auto 0;box-shadow:0 0 24px 0 rgba(0,0,0,.24);border-radius:32px}@media(max-width:1200px){.main-container{max-width:calc(100% - 80px);margin:20px auto}}@media(max-width:900px){.main-container{max-width:calc(100% - 32px);margin:16px auto}}@media(max-width:640px){.main-container{max-width:calc(100% - 16px);margin:12px auto}}h1.main-title,h3,label{color:var(--shade-70)}h1.main-title{margin:0;white-space:nowrap}span.version{font-weight:400;color:var(--shade-50);margin-left:4px}.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}.fretboard-container{position:relative;width:100%;margin-bottom:2px;border-radius:32px 32px 0 0;background-color:var(--shade-20);overflow-x:auto;scrollbar-width:thin;scrollbar-color:transparent transparent}.fretboard-container::-webkit-scrollbar{height:8px}.fretboard-container::-webkit-scrollbar-track{background:transparent;border-radius:4px}.fretboard-container::-webkit-scrollbar-thumb{background:transparent;border-radius:4px;-webkit-transition:background-color .2s ease;transition:background-color .2s ease}.fretboard-container:hover{scrollbar-color:var(--shade-40) var(--shade-30)}.fretboard-container:hover::-webkit-scrollbar-thumb{background:var(--shade-40)}.fretboard-container:hover::-webkit-scrollbar-track{background:var(--shade-30)}.fretboard-svg{border-radius:24px;min-width:1080px;width:100%}.bottom-settings{margin:0 auto;display:flex;justify-content:center;width:100%;gap:24px;flex-wrap:wrap}.key-button{border:none;background-color:var(--shade-10);color:var(--shade-50);border-radius:50%;width:40px;height:40px;line-height:34px;font-weight:600;font-size:18px;text-align:center;cursor:pointer;position:relative}.bottom-settings,.bottom-settings *,.element-tooltip,.fretboard-container,.fretboard-container *,.fretboard-settings,.fretboard-settings *,.highlighting-settings,.highlighting-settings *,.key-button,.tooltip-container,[class*=tooltip]{-webkit-user-select:none;-moz-user-select:none;user-select:none}.element-tooltip,.tooltip-container,[class*=tooltip]{pointer-events:none}.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:var(--shade-30);border:2px solid var(--shade-30);font-size:18px;color:var(--shade-70);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 option{background-color:var(--shade-20);color:var(--shade-70)}.custom-select:hover,select.custom-select:focus-visible{cursor:pointer;border:2px solid var(--light-24);outline:none}.interactive-outline{transition:outline .1s ease-out}.interactive-outline:focus-visible,.interactive-outline:hover{outline:2px solid var(--shade-60);outline-offset:0}.interactive-outline:focus-visible{box-shadow:none}