.fp-thin-scroll{scrollbar-width:thin;scrollbar-color:var(--gp-edge) transparent}.fp-thin-scroll::-webkit-scrollbar{width:4px;height:4px}.fp-thin-scroll::-webkit-scrollbar-track{background:0 0}.fp-thin-scroll::-webkit-scrollbar-thumb{background:var(--gp-edge);border-radius:2px}.fp-thin-scroll::-webkit-scrollbar-thumb:hover{background:var(--gp-ink-mute)}.fb-board{fill:var(--gp-neck)}.fb-wire{stroke:var(--gp-neck-fret);stroke-width:2px}.fb-nut{stroke:var(--gp-neck-nut);stroke-width:5px}.fb-string{stroke:var(--gp-neck-string)}.fb-inlay{fill:var(--gp-neck-fret)}.fb-sname,.fb-fnum{fill:var(--gp-ink-3);font-family:var(--gp-f-body);font-weight:650}.fb-mark{transform-box:fill-box;transform-origin:50%;transition:opacity var(--gp-d-state) ease-out, transform var(--gp-d-state) ease-out}.fb-dot,.fb-ring,.fb-label{transition:fill var(--gp-d-state), stroke var(--gp-d-state), opacity var(--gp-d-state)}.fb-mark[data-emphasis=none]{opacity:0;pointer-events:none;transform:scale(.4)}.fb-dot{fill:var(--gp-role-x);stroke:var(--gp-role-x)}.fb-ring{fill:none;opacity:0}.fb-label{fill:var(--gp-on-role);font-family:var(--gp-f-body);font-weight:700}.fb-mark[data-emphasis=root] .fb-dot{fill:var(--gp-m-500);stroke:var(--gp-m-500)}.fb-mark[data-emphasis=root] .fb-label{fill:var(--gp-m-on)}.fb-mark[data-emphasis=root] .fb-ring{opacity:1;fill:var(--gp-m-sh);stroke:none;r:8px;transform:translate(1.5px,1.5px)}.fb-mark[data-emphasis=chordTone] .fb-dot{fill:var(--gp-role-x);stroke:var(--gp-role-x)}.fb-mark[data-tone=third] .fb-dot{fill:var(--gp-role-3);stroke:var(--gp-role-3)}.fb-mark[data-tone=fifth] .fb-dot{fill:var(--gp-role-5);stroke:var(--gp-role-5)}.fb-mark[data-tone=seventh] .fb-dot{fill:var(--gp-role-7);stroke:var(--gp-role-7)}.fb-mark[data-tone=extension] .fb-dot{fill:var(--gp-role-x);stroke:var(--gp-ink-3)}.fb-mark[data-emphasis=muted]{transform:scale(.45)}.fb-mark[data-emphasis=muted] .fb-dot{fill:var(--gp-ink-mute);stroke:var(--gp-ink-mute)}.fb-mark[data-emphasis=muted] .fb-label{opacity:0}.fb-mark[data-run] .fb-dot{stroke:var(--gp-m-500)}.fb-mark[data-run="0"] .fb-dot{fill:color-mix(in oklab, var(--gp-m-500) 45%, var(--gp-card))}.fb-mark[data-run="1"] .fb-dot{fill:color-mix(in oklab, var(--gp-m-500) 30%, var(--gp-card))}.fb-mark[data-run="2"] .fb-dot{fill:color-mix(in oklab, var(--gp-m-500) 18%, var(--gp-card))}.fb-mark[data-run="3"] .fb-dot{fill:color-mix(in oklab, var(--gp-m-500) 10%, var(--gp-card))}.fb-mark[data-run] .fb-label{fill:var(--gp-ink)}.fb-string-play{cursor:pointer}.fb-string-play:focus-visible{outline:none}.fb-string-play-bg{fill:var(--gp-m-100);stroke:var(--gp-m-300);stroke-width:.75px;transition:fill var(--gp-d-state), stroke var(--gp-d-state)}.fb-string-play path,.fb-string-play rect{fill:var(--gp-m-700);transition:fill var(--gp-d-state)}.fb-string-play:hover .fb-string-play-bg,.fb-string-play:focus-visible .fb-string-play-bg,.fb-string-play[data-playing] .fb-string-play-bg{fill:var(--gp-m-500);stroke:var(--gp-m-500)}.fb-string-play:hover path,.fb-string-play:hover rect,.fb-string-play:focus-visible path,.fb-string-play:focus-visible rect,.fb-string-play[data-playing] path,.fb-string-play[data-playing] rect{fill:var(--gp-m-on)}.fb-position{fill:none;stroke:var(--gp-m-700);stroke-width:1.5px;stroke-dasharray:4 3;pointer-events:none}.fb-box-btn{cursor:pointer;outline:none}.fb-box-btn>rect:first-child{fill:#0000;transition:fill var(--gp-d-state)}.fb-box-btn svg{color:var(--gp-m-700);pointer-events:none}.fb-box-btn:hover>rect:first-child,.fb-box-btn:focus-visible>rect:first-child{fill:var(--gp-m-100)}.fb-box-btn[data-stuck]{opacity:.3;pointer-events:none}.fb-capo-shade{fill:var(--gp-card);opacity:.55;pointer-events:none}.fb-capo-bar{fill:var(--gp-ink-fill);stroke:none;pointer-events:none}.fb-capo-grip{fill:#0000;cursor:grab;touch-action:none}.fb-capo-grip:active{cursor:grabbing}.fb-capo-ripple{fill:none;stroke:none;stroke-width:1px;stroke-dasharray:3 3;pointer-events:none;transition:stroke var(--gp-d-state)}.fb-capo:hover .fb-capo-ripple,.fb-capo:focus-visible .fb-capo-ripple{stroke:var(--gp-m-500)}.fb-capo:hover .fb-capo-bar,.fb-capo:focus-visible .fb-capo-bar{fill:var(--gp-ink)}.fb-capo:focus-visible{outline:none}.fb-capo:focus-visible .fb-capo-bar{fill:var(--gp-m-500)}.fb-hit{fill:#0000;pointer-events:all}[data-pressable] .fb-hit{cursor:pointer}.fb-hover,.fb-pop{fill:none;stroke:var(--gp-m-500);opacity:0;pointer-events:none;transform-box:fill-box;transform-origin:50%}.fb-hover{transition:opacity var(--gp-d-state) ease-out}.fb-slot[data-hover=self] .fb-hover{opacity:1;stroke-width:2px}.fb-slot[data-hover=unison] .fb-hover{opacity:.8;stroke-width:1.5px}.fb-slot[data-hover=octave] .fb-hover{opacity:.35;stroke-width:1.25px}.fb-pop{stroke-width:1.25px}@media (prefers-reduced-motion:reduce){.fb-mark,.fb-dot,.fb-ring,.fb-label,.fb-hover{transition:none}}.pk-key{font-family:var(--gp-f-body);cursor:pointer;transition:background-color var(--gp-d-state), color var(--gp-d-state), opacity var(--gp-d-state);border:0;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;padding-bottom:4px;display:flex;position:absolute;top:0}.pk-white{z-index:0;background:var(--gp-face);box-shadow:inset 0 0 0 1px var(--gp-line);color:var(--gp-ink-3);border-radius:0 0 6px 6px}.pk-black{z-index:1;background:var(--gp-key-black);box-shadow:1.5px 1.5px 0 0 var(--gp-key-black-sh);color:var(--gp-on-key-black);border-radius:0 0 4px 4px}.pk-white:hover{background:var(--gp-m-100);color:var(--gp-m-700)}.pk-black:hover{background:color-mix(in oklab, var(--gp-key-black), var(--gp-ink-3) 30%)}.pk-key:active{transform:translateY(1px)}.pk-key[data-selected]{background:var(--gp-m-500);box-shadow:none;color:var(--gp-m-on);font-weight:700}.pk-key[data-outside],.pk-key[data-dimmed]{opacity:.45}.pk-key[data-dimmed][data-selected],.pk-key[data-outside][data-selected]{background:var(--gp-face);box-shadow:inset 0 0 0 2px var(--gp-m-500);color:var(--gp-m-700);opacity:.8}.pk-black[data-dimmed][data-selected],.pk-black[data-outside][data-selected]{background:var(--gp-key-black);color:var(--gp-on-key-black)}.pk-dot{background:var(--gp-m-500);opacity:0;pointer-events:none;width:5px;height:5px;transition:opacity var(--gp-d-state) ease-out;border-radius:50%}.pk-black .pk-dot{background:var(--gp-m-300)}.pk-key[data-scale] .pk-dot,.pk-key[data-exact] .pk-dot{opacity:1}.pk-key[data-tone] .pk-label{opacity:0;transition:opacity var(--gp-d-state) ease-out}.pk-key[data-scale] .pk-label,.pk-key[data-exact] .pk-label{opacity:1}.pk-white[data-tone]{color:var(--gp-m-700)}.pk-key[data-hover=self]{box-shadow:inset 0 0 0 2px var(--gp-m-500);color:var(--gp-m-700)}.pk-key[data-hover=octave]{box-shadow:inset 0 0 0 1px var(--gp-m-500)}.pk-key[data-selected][data-hover]{color:var(--gp-m-on)}.pk-key[data-struck]{animation:.3s ease-out pk-strike}.pk-key[data-selected][data-struck]{animation-name:pk-strike-selected}@keyframes pk-strike{0%{background-color:var(--gp-m-500);color:var(--gp-m-on);transform:translateY(2px)}30%{transform:translateY(2px)}to{transform:translateY(0)}}@keyframes pk-strike-selected{0%{background-color:var(--gp-m-700);transform:translateY(2px)}30%{transform:translateY(2px)}to{transform:translateY(0)}}.pk-label{font-family:var(--gp-f-body);pointer-events:none;font-size:10px;font-weight:650;line-height:1}.pk-band{border-top:1px solid var(--gp-m-500);height:0;margin-top:7px;position:absolute}.pk-band:before,.pk-band:after{content:"";background:var(--gp-m-500);width:1px;height:7px;position:absolute;top:-4px}.pk-band:before{left:0}.pk-band:after{right:0}.pk-band-label,.pk-band-label *{line-height:1}.pk-band-label{background:var(--gp-card);color:var(--gp-ink-3);font-family:var(--gp-f-body);letter-spacing:.02em;white-space:nowrap;padding:0 4px;font-size:10px;font-weight:600;position:absolute;top:1px;left:50%;transform:translate(-50%)}@media (prefers-reduced-motion:reduce){.pk-key{transition:none;animation:none}.pk-dot{transition:none}}
