\begin{Verbatim}[commandchars=\\\{\}]
\PY{c+cp}{\PYZlt{}!DOCTYPE html\PYZgt{}}
\PY{p}{\PYZlt{}}\PY{n+nt}{html} \PY{n+na}{lang}\PY{o}{=}\PY{l+s}{\PYZdq{}de\PYZdq{}}\PY{p}{\PYZgt{}}
\PY{p}{\PYZlt{}}\PY{n+nt}{head}\PY{p}{\PYZgt{}}
    \PY{p}{\PYZlt{}}\PY{n+nt}{meta} \PY{n+na}{charset}\PY{o}{=}\PY{l+s}{\PYZdq{}UTF\PYZhy{}8\PYZdq{}}\PY{p}{\PYZgt{}}
    \PY{p}{\PYZlt{}}\PY{n+nt}{meta} \PY{n+na}{name}\PY{o}{=}\PY{l+s}{\PYZdq{}viewport\PYZdq{}} \PY{n+na}{content}\PY{o}{=}\PY{l+s}{\PYZdq{}width=device\PYZhy{}width, initial\PYZhy{}scale=1.0, maximum\PYZhy{}scale=1.0, user\PYZhy{}scalable=no\PYZdq{}}\PY{p}{\PYZgt{}}
    \PY{p}{\PYZlt{}}\PY{n+nt}{title}\PY{p}{\PYZgt{}}Misa Kitara Mobile \PYZhy{} Digital Synth\PY{p}{\PYZlt{}}\PY{p}{/}\PY{n+nt}{title}\PY{p}{\PYZgt{}}
    \PY{p}{\PYZlt{}}\PY{n+nt}{style}\PY{p}{\PYZgt{}}
\PY{+w}{        }\PY{p}{:}\PY{n+nd}{root}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{            }\PY{n+nv}{\PYZhy{}\PYZhy{}bg\PYZhy{}color}\PY{p}{:}\PY{+w}{ }\PY{l+m+mh}{\PYZsh{}08080c}\PY{p}{;}
\PY{+w}{            }\PY{n+nv}{\PYZhy{}\PYZhy{}panel\PYZhy{}bg}\PY{p}{:}\PY{+w}{ }\PY{l+m+mh}{\PYZsh{}12121c}\PY{p}{;}
\PY{+w}{            }\PY{n+nv}{\PYZhy{}\PYZhy{}accent\PYZhy{}cyan}\PY{p}{:}\PY{+w}{ }\PY{l+m+mh}{\PYZsh{}00f0ff}\PY{p}{;}
\PY{+w}{            }\PY{n+nv}{\PYZhy{}\PYZhy{}accent\PYZhy{}magenta}\PY{p}{:}\PY{+w}{ }\PY{l+m+mh}{\PYZsh{}ff0055}\PY{p}{;}
\PY{+w}{            }\PY{n+nv}{\PYZhy{}\PYZhy{}accent\PYZhy{}gold}\PY{p}{:}\PY{+w}{ }\PY{l+m+mh}{\PYZsh{}ffcc00}\PY{p}{;}
\PY{+w}{            }\PY{n+nv}{\PYZhy{}\PYZhy{}grid\PYZhy{}line}\PY{p}{:}\PY{+w}{ }\PY{l+m+mh}{\PYZsh{}222233}\PY{p}{;}
\PY{+w}{        }\PY{p}{\PYZcb{}}

\PY{+w}{        }\PY{o}{*}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{            }\PY{k}{box\PYZhy{}sizing}\PY{p}{:}\PY{+w}{ }\PY{k+kc}{border\PYZhy{}box}\PY{p}{;}
\PY{+w}{            }\PY{k}{user\PYZhy{}select}\PY{p}{:}\PY{+w}{ }\PY{k+kc}{none}\PY{p}{;}
\PY{+w}{            }\PY{k+kp}{\PYZhy{}webkit\PYZhy{}}\PY{k}{user\PYZhy{}select}\PY{p}{:}\PY{+w}{ }\PY{k+kc}{none}\PY{p}{;}
\PY{+w}{            }\PY{n}{touch\PYZhy{}action}\PY{p}{:}\PY{+w}{ }\PY{k+kc}{none}\PY{p}{;}
\PY{+w}{        }\PY{p}{\PYZcb{}}

\PY{+w}{        }\PY{n+nt}{body}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{            }\PY{k}{background\PYZhy{}color}\PY{p}{:}\PY{+w}{ }\PY{n+nf}{var}\PY{p}{(}\PY{n+nv}{\PYZhy{}\PYZhy{}bg\PYZhy{}color}\PY{p}{)}\PY{p}{;}
\PY{+w}{            }\PY{k}{color}\PY{p}{:}\PY{+w}{ }\PY{l+m+mh}{\PYZsh{}fff}\PY{p}{;}
\PY{+w}{            }\PY{k}{font\PYZhy{}family}\PY{p}{:}\PY{+w}{ }\PY{o}{\PYZhy{}}\PY{n}{apple\PYZhy{}system}\PY{p}{,}\PY{+w}{ }\PY{n}{BlinkMacSystemFont}\PY{p}{,}\PY{+w}{ }\PY{l+s+s2}{\PYZdq{}Segoe UI\PYZdq{}}\PY{p}{,}\PY{+w}{ }\PY{n}{Roboto}\PY{p}{,}\PY{+w}{ }\PY{k+kc}{monospace}\PY{p}{;}
\PY{+w}{            }\PY{k}{margin}\PY{p}{:}\PY{+w}{ }\PY{l+m+mi}{0}\PY{p}{;}
\PY{+w}{            }\PY{k}{padding}\PY{p}{:}\PY{+w}{ }\PY{l+m+mi}{8}\PY{k+kt}{px}\PY{p}{;}
\PY{+w}{            }\PY{k}{height}\PY{p}{:}\PY{+w}{ }\PY{l+m+mi}{100}\PY{k+kt}{vh}\PY{p}{;}
\PY{+w}{            }\PY{k}{height}\PY{p}{:}\PY{+w}{ }\PY{l+m+mi}{100}\PY{n}{dvh}\PY{p}{;}
\PY{+w}{            }\PY{k}{display}\PY{p}{:}\PY{+w}{ }\PY{k+kc}{flex}\PY{p}{;}
\PY{+w}{            }\PY{k}{flex\PYZhy{}direction}\PY{p}{:}\PY{+w}{ }\PY{k+kc}{column}\PY{p}{;}
\PY{+w}{            }\PY{k}{gap}\PY{p}{:}\PY{+w}{ }\PY{l+m+mi}{8}\PY{k+kt}{px}\PY{p}{;}
\PY{+w}{            }\PY{k}{overflow}\PY{p}{:}\PY{+w}{ }\PY{k+kc}{hidden}\PY{p}{;}
\PY{+w}{        }\PY{p}{\PYZcb{}}

\PY{+w}{        }\PY{c}{/* Top Header \PYZam{} Display */}
\PY{+w}{        }\PY{p}{.}\PY{n+nc}{header}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{            }\PY{k}{background}\PY{p}{:}\PY{+w}{ }\PY{n+nf}{var}\PY{p}{(}\PY{n+nv}{\PYZhy{}\PYZhy{}panel\PYZhy{}bg}\PY{p}{)}\PY{p}{;}
\PY{+w}{            }\PY{k}{border}\PY{p}{:}\PY{+w}{ }\PY{l+m+mi}{1}\PY{k+kt}{px}\PY{+w}{ }\PY{k+kc}{solid}\PY{+w}{ }\PY{l+m+mh}{\PYZsh{}333}\PY{p}{;}
\PY{+w}{            }\PY{k}{border\PYZhy{}radius}\PY{p}{:}\PY{+w}{ }\PY{l+m+mi}{8}\PY{k+kt}{px}\PY{p}{;}
\PY{+w}{            }\PY{k}{padding}\PY{p}{:}\PY{+w}{ }\PY{l+m+mi}{6}\PY{k+kt}{px}\PY{+w}{ }\PY{l+m+mi}{10}\PY{k+kt}{px}\PY{p}{;}
\PY{+w}{            }\PY{k}{display}\PY{p}{:}\PY{+w}{ }\PY{k+kc}{flex}\PY{p}{;}
\PY{+w}{            }\PY{k}{justify\PYZhy{}content}\PY{p}{:}\PY{+w}{ }\PY{k+kc}{space\PYZhy{}between}\PY{p}{;}
\PY{+w}{            }\PY{k}{align\PYZhy{}items}\PY{p}{:}\PY{+w}{ }\PY{k+kc}{center}\PY{p}{;}
\PY{+w}{        }\PY{p}{\PYZcb{}}

\PY{+w}{        }\PY{p}{.}\PY{n+nc}{title}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{            }\PY{k}{font\PYZhy{}size}\PY{p}{:}\PY{+w}{ }\PY{l+m+mf}{0.9}\PY{k+kt}{rem}\PY{p}{;}
\PY{+w}{            }\PY{k}{font\PYZhy{}weight}\PY{p}{:}\PY{+w}{ }\PY{l+m+mi}{900}\PY{p}{;}
\PY{+w}{            }\PY{k}{color}\PY{p}{:}\PY{+w}{ }\PY{n+nf}{var}\PY{p}{(}\PY{n+nv}{\PYZhy{}\PYZhy{}accent\PYZhy{}cyan}\PY{p}{)}\PY{p}{;}
\PY{+w}{            }\PY{k}{letter\PYZhy{}spacing}\PY{p}{:}\PY{+w}{ }\PY{l+m+mi}{1}\PY{k+kt}{px}\PY{p}{;}
\PY{+w}{        }\PY{p}{\PYZcb{}}

\PY{+w}{        }\PY{p}{.}\PY{n+nc}{status}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{            }\PY{k}{font\PYZhy{}size}\PY{p}{:}\PY{+w}{ }\PY{l+m+mf}{0.7}\PY{k+kt}{rem}\PY{p}{;}
\PY{+w}{            }\PY{k}{color}\PY{p}{:}\PY{+w}{ }\PY{n+nf}{var}\PY{p}{(}\PY{n+nv}{\PYZhy{}\PYZhy{}accent\PYZhy{}gold}\PY{p}{)}\PY{p}{;}
\PY{+w}{            }\PY{k}{font\PYZhy{}family}\PY{p}{:}\PY{+w}{ }\PY{k+kc}{monospace}\PY{p}{;}
\PY{+w}{        }\PY{p}{\PYZcb{}}

\PY{+w}{        }\PY{c}{/* Fretboard Matrix Area */}
\PY{+w}{        }\PY{p}{.}\PY{n+nc}{fretboard\PYZhy{}container}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{            }\PY{k}{background}\PY{p}{:}\PY{+w}{ }\PY{n+nf}{var}\PY{p}{(}\PY{n+nv}{\PYZhy{}\PYZhy{}panel\PYZhy{}bg}\PY{p}{)}\PY{p}{;}
\PY{+w}{            }\PY{k}{border}\PY{p}{:}\PY{+w}{ }\PY{l+m+mi}{1}\PY{k+kt}{px}\PY{+w}{ }\PY{k+kc}{solid}\PY{+w}{ }\PY{l+m+mh}{\PYZsh{}333}\PY{p}{;}
\PY{+w}{            }\PY{k}{border\PYZhy{}radius}\PY{p}{:}\PY{+w}{ }\PY{l+m+mi}{8}\PY{k+kt}{px}\PY{p}{;}
\PY{+w}{            }\PY{k}{padding}\PY{p}{:}\PY{+w}{ }\PY{l+m+mi}{6}\PY{k+kt}{px}\PY{p}{;}
\PY{+w}{            }\PY{k}{display}\PY{p}{:}\PY{+w}{ }\PY{k+kc}{flex}\PY{p}{;}
\PY{+w}{            }\PY{k}{flex\PYZhy{}direction}\PY{p}{:}\PY{+w}{ }\PY{k+kc}{column}\PY{p}{;}
\PY{+w}{            }\PY{k}{gap}\PY{p}{:}\PY{+w}{ }\PY{l+m+mi}{4}\PY{k+kt}{px}\PY{p}{;}
\PY{+w}{            }\PY{k}{flex\PYZhy{}shrink}\PY{p}{:}\PY{+w}{ }\PY{l+m+mi}{0}\PY{p}{;}
\PY{+w}{        }\PY{p}{\PYZcb{}}

\PY{+w}{        }\PY{p}{.}\PY{n+nc}{string\PYZhy{}row}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{            }\PY{k}{display}\PY{p}{:}\PY{+w}{ }\PY{k+kc}{flex}\PY{p}{;}
\PY{+w}{            }\PY{k}{align\PYZhy{}items}\PY{p}{:}\PY{+w}{ }\PY{k+kc}{center}\PY{p}{;}
\PY{+w}{            }\PY{k}{gap}\PY{p}{:}\PY{+w}{ }\PY{l+m+mi}{4}\PY{k+kt}{px}\PY{p}{;}
\PY{+w}{            }\PY{k}{height}\PY{p}{:}\PY{+w}{ }\PY{l+m+mi}{28}\PY{k+kt}{px}\PY{p}{;}
\PY{+w}{        }\PY{p}{\PYZcb{}}

\PY{+w}{        }\PY{p}{.}\PY{n+nc}{string\PYZhy{}label}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{            }\PY{k}{width}\PY{p}{:}\PY{+w}{ }\PY{l+m+mi}{24}\PY{k+kt}{px}\PY{p}{;}
\PY{+w}{            }\PY{k}{font\PYZhy{}size}\PY{p}{:}\PY{+w}{ }\PY{l+m+mf}{0.65}\PY{k+kt}{rem}\PY{p}{;}
\PY{+w}{            }\PY{k}{font\PYZhy{}weight}\PY{p}{:}\PY{+w}{ }\PY{k+kc}{bold}\PY{p}{;}
\PY{+w}{            }\PY{k}{color}\PY{p}{:}\PY{+w}{ }\PY{n+nf}{var}\PY{p}{(}\PY{n+nv}{\PYZhy{}\PYZhy{}accent\PYZhy{}cyan}\PY{p}{)}\PY{p}{;}
\PY{+w}{            }\PY{k}{text\PYZhy{}align}\PY{p}{:}\PY{+w}{ }\PY{k+kc}{center}\PY{p}{;}
\PY{+w}{        }\PY{p}{\PYZcb{}}

\PY{+w}{        }\PY{p}{.}\PY{n+nc}{fret\PYZhy{}buttons}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{            }\PY{k}{display}\PY{p}{:}\PY{+w}{ }\PY{k+kc}{flex}\PY{p}{;}
\PY{+w}{            }\PY{k}{flex}\PY{p}{:}\PY{+w}{ }\PY{l+m+mi}{1}\PY{p}{;}
\PY{+w}{            }\PY{k}{gap}\PY{p}{:}\PY{+w}{ }\PY{l+m+mi}{3}\PY{k+kt}{px}\PY{p}{;}
\PY{+w}{            }\PY{k}{height}\PY{p}{:}\PY{+w}{ }\PY{l+m+mi}{100}\PY{k+kt}{\PYZpc{}}\PY{p}{;}
\PY{+w}{        }\PY{p}{\PYZcb{}}

\PY{+w}{        }\PY{p}{.}\PY{n+nc}{fret\PYZhy{}btn}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{            }\PY{k}{flex}\PY{p}{:}\PY{+w}{ }\PY{l+m+mi}{1}\PY{p}{;}
\PY{+w}{            }\PY{k}{background}\PY{p}{:}\PY{+w}{ }\PY{l+m+mh}{\PYZsh{}1a1a26}\PY{p}{;}
\PY{+w}{            }\PY{k}{border}\PY{p}{:}\PY{+w}{ }\PY{l+m+mi}{1}\PY{k+kt}{px}\PY{+w}{ }\PY{k+kc}{solid}\PY{+w}{ }\PY{l+m+mh}{\PYZsh{}333}\PY{p}{;}
\PY{+w}{            }\PY{k}{color}\PY{p}{:}\PY{+w}{ }\PY{l+m+mh}{\PYZsh{}888}\PY{p}{;}
\PY{+w}{            }\PY{k}{font\PYZhy{}size}\PY{p}{:}\PY{+w}{ }\PY{l+m+mf}{0.65}\PY{k+kt}{rem}\PY{p}{;}
\PY{+w}{            }\PY{k}{font\PYZhy{}weight}\PY{p}{:}\PY{+w}{ }\PY{k+kc}{bold}\PY{p}{;}
\PY{+w}{            }\PY{k}{border\PYZhy{}radius}\PY{p}{:}\PY{+w}{ }\PY{l+m+mi}{4}\PY{k+kt}{px}\PY{p}{;}
\PY{+w}{            }\PY{k}{display}\PY{p}{:}\PY{+w}{ }\PY{k+kc}{flex}\PY{p}{;}
\PY{+w}{            }\PY{k}{align\PYZhy{}items}\PY{p}{:}\PY{+w}{ }\PY{k+kc}{center}\PY{p}{;}
\PY{+w}{            }\PY{k}{justify\PYZhy{}content}\PY{p}{:}\PY{+w}{ }\PY{k+kc}{center}\PY{p}{;}
\PY{+w}{            }\PY{k}{cursor}\PY{p}{:}\PY{+w}{ }\PY{k+kc}{pointer}\PY{p}{;}
\PY{+w}{        }\PY{p}{\PYZcb{}}

\PY{+w}{        }\PY{p}{.}\PY{n+nc}{fret\PYZhy{}btn}\PY{p}{.}\PY{n+nc}{active}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{            }\PY{k}{background}\PY{p}{:}\PY{+w}{ }\PY{n+nf}{var}\PY{p}{(}\PY{n+nv}{\PYZhy{}\PYZhy{}accent\PYZhy{}magenta}\PY{p}{)}\PY{p}{;}
\PY{+w}{            }\PY{k}{color}\PY{p}{:}\PY{+w}{ }\PY{l+m+mh}{\PYZsh{}fff}\PY{p}{;}
\PY{+w}{            }\PY{k}{border\PYZhy{}color}\PY{p}{:}\PY{+w}{ }\PY{l+m+mh}{\PYZsh{}ff6699}\PY{p}{;}
\PY{+w}{            }\PY{k}{box\PYZhy{}shadow}\PY{p}{:}\PY{+w}{ }\PY{l+m+mi}{0}\PY{+w}{ }\PY{l+m+mi}{0}\PY{+w}{ }\PY{l+m+mi}{8}\PY{k+kt}{px}\PY{+w}{ }\PY{n+nb}{rgba}\PY{p}{(}\PY{l+m+mi}{255}\PY{p}{,}\PY{+w}{ }\PY{l+m+mi}{0}\PY{p}{,}\PY{+w}{ }\PY{l+m+mi}{85}\PY{p}{,}\PY{+w}{ }\PY{l+m+mf}{0.6}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }\PY{p}{\PYZcb{}}

\PY{+w}{        }\PY{c}{/* Kitara XY Performance Touchpad */}
\PY{+w}{        }\PY{p}{.}\PY{n+nc}{pad\PYZhy{}container}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{            }\PY{k}{flex}\PY{p}{:}\PY{+w}{ }\PY{l+m+mi}{1}\PY{p}{;}
\PY{+w}{            }\PY{k}{position}\PY{p}{:}\PY{+w}{ }\PY{k+kc}{relative}\PY{p}{;}
\PY{+w}{            }\PY{k}{background}\PY{p}{:}\PY{+w}{ }\PY{l+m+mh}{\PYZsh{}040406}\PY{p}{;}
\PY{+w}{            }\PY{k}{border}\PY{p}{:}\PY{+w}{ }\PY{l+m+mi}{2}\PY{k+kt}{px}\PY{+w}{ }\PY{k+kc}{solid}\PY{+w}{ }\PY{n+nf}{var}\PY{p}{(}\PY{n+nv}{\PYZhy{}\PYZhy{}accent\PYZhy{}cyan}\PY{p}{)}\PY{p}{;}
\PY{+w}{            }\PY{k}{border\PYZhy{}radius}\PY{p}{:}\PY{+w}{ }\PY{l+m+mi}{10}\PY{k+kt}{px}\PY{p}{;}
\PY{+w}{            }\PY{k}{overflow}\PY{p}{:}\PY{+w}{ }\PY{k+kc}{hidden}\PY{p}{;}
\PY{+w}{            }\PY{k}{box\PYZhy{}shadow}\PY{p}{:}\PY{+w}{ }\PY{k+kc}{inset}\PY{+w}{ }\PY{l+m+mi}{0}\PY{+w}{ }\PY{l+m+mi}{0}\PY{+w}{ }\PY{l+m+mi}{20}\PY{k+kt}{px}\PY{+w}{ }\PY{n+nb}{rgba}\PY{p}{(}\PY{l+m+mi}{0}\PY{p}{,}\PY{+w}{ }\PY{l+m+mi}{240}\PY{p}{,}\PY{+w}{ }\PY{l+m+mi}{255}\PY{p}{,}\PY{+w}{ }\PY{l+m+mf}{0.15}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }\PY{p}{\PYZcb{}}

\PY{+w}{        }\PY{n+nt}{canvas}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{            }\PY{k}{width}\PY{p}{:}\PY{+w}{ }\PY{l+m+mi}{100}\PY{k+kt}{\PYZpc{}}\PY{p}{;}
\PY{+w}{            }\PY{k}{height}\PY{p}{:}\PY{+w}{ }\PY{l+m+mi}{100}\PY{k+kt}{\PYZpc{}}\PY{p}{;}
\PY{+w}{            }\PY{k}{display}\PY{p}{:}\PY{+w}{ }\PY{k+kc}{block}\PY{p}{;}
\PY{+w}{        }\PY{p}{\PYZcb{}}

\PY{+w}{        }\PY{c}{/* FX Preset Control Bar */}
\PY{+w}{        }\PY{p}{.}\PY{n+nc}{controls\PYZhy{}bar}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{            }\PY{k}{display}\PY{p}{:}\PY{+w}{ }\PY{k+kc}{flex}\PY{p}{;}
\PY{+w}{            }\PY{k}{gap}\PY{p}{:}\PY{+w}{ }\PY{l+m+mi}{6}\PY{k+kt}{px}\PY{p}{;}
\PY{+w}{            }\PY{k}{height}\PY{p}{:}\PY{+w}{ }\PY{l+m+mi}{36}\PY{k+kt}{px}\PY{p}{;}
\PY{+w}{        }\PY{p}{\PYZcb{}}

\PY{+w}{        }\PY{n+nt}{select}\PY{o}{,}\PY{+w}{ }\PY{n+nt}{button}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{            }\PY{k}{background}\PY{p}{:}\PY{+w}{ }\PY{l+m+mh}{\PYZsh{}1a1a26}\PY{p}{;}
\PY{+w}{            }\PY{k}{color}\PY{p}{:}\PY{+w}{ }\PY{l+m+mh}{\PYZsh{}fff}\PY{p}{;}
\PY{+w}{            }\PY{k}{border}\PY{p}{:}\PY{+w}{ }\PY{l+m+mi}{1}\PY{k+kt}{px}\PY{+w}{ }\PY{k+kc}{solid}\PY{+w}{ }\PY{l+m+mh}{\PYZsh{}444}\PY{p}{;}
\PY{+w}{            }\PY{k}{border\PYZhy{}radius}\PY{p}{:}\PY{+w}{ }\PY{l+m+mi}{6}\PY{k+kt}{px}\PY{p}{;}
\PY{+w}{            }\PY{k}{padding}\PY{p}{:}\PY{+w}{ }\PY{l+m+mi}{4}\PY{k+kt}{px}\PY{+w}{ }\PY{l+m+mi}{8}\PY{k+kt}{px}\PY{p}{;}
\PY{+w}{            }\PY{k}{font\PYZhy{}size}\PY{p}{:}\PY{+w}{ }\PY{l+m+mf}{0.75}\PY{k+kt}{rem}\PY{p}{;}
\PY{+w}{            }\PY{k}{font\PYZhy{}weight}\PY{p}{:}\PY{+w}{ }\PY{k+kc}{bold}\PY{p}{;}
\PY{+w}{            }\PY{k}{flex}\PY{p}{:}\PY{+w}{ }\PY{l+m+mi}{1}\PY{p}{;}
\PY{+w}{        }\PY{p}{\PYZcb{}}

\PY{+w}{        }\PY{n+nt}{button}\PY{p}{.}\PY{n+nc}{active}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{            }\PY{k}{background}\PY{p}{:}\PY{+w}{ }\PY{n+nf}{var}\PY{p}{(}\PY{n+nv}{\PYZhy{}\PYZhy{}accent\PYZhy{}cyan}\PY{p}{)}\PY{p}{;}
\PY{+w}{            }\PY{k}{color}\PY{p}{:}\PY{+w}{ }\PY{l+m+mh}{\PYZsh{}000}\PY{p}{;}
\PY{+w}{        }\PY{p}{\PYZcb{}}
\PY{+w}{    }\PY{p}{\PYZlt{}}\PY{p}{/}\PY{n+nt}{style}\PY{p}{\PYZgt{}}
\PY{p}{\PYZlt{}}\PY{p}{/}\PY{n+nt}{head}\PY{p}{\PYZgt{}}
\PY{p}{\PYZlt{}}\PY{n+nt}{body}\PY{p}{\PYZgt{}}

    \PY{p}{\PYZlt{}}\PY{n+nt}{div} \PY{n+na}{class}\PY{o}{=}\PY{l+s}{\PYZdq{}header\PYZdq{}}\PY{p}{\PYZgt{}}
        \PY{p}{\PYZlt{}}\PY{n+nt}{div} \PY{n+na}{class}\PY{o}{=}\PY{l+s}{\PYZdq{}title\PYZdq{}}\PY{p}{\PYZgt{}}KITARA\PYZhy{}MOBILE\PY{p}{\PYZlt{}}\PY{p}{/}\PY{n+nt}{div}\PY{p}{\PYZgt{}}
        \PY{p}{\PYZlt{}}\PY{n+nt}{div} \PY{n+na}{class}\PY{o}{=}\PY{l+s}{\PYZdq{}status\PYZdq{}} \PY{n+na}{id}\PY{o}{=}\PY{l+s}{\PYZdq{}status\PYZhy{}display\PYZdq{}}\PY{p}{\PYZgt{}}TOUCH PAD TO PLAY\PY{p}{\PYZlt{}}\PY{p}{/}\PY{n+nt}{div}\PY{p}{\PYZgt{}}
    \PY{p}{\PYZlt{}}\PY{p}{/}\PY{n+nt}{div}\PY{p}{\PYZgt{}}

    \PY{p}{\PYZlt{}}\PY{n+nt}{div} \PY{n+na}{class}\PY{o}{=}\PY{l+s}{\PYZdq{}fretboard\PYZhy{}container\PYZdq{}} \PY{n+na}{id}\PY{o}{=}\PY{l+s}{\PYZdq{}fretboard\PYZdq{}}\PY{p}{\PYZgt{}}\PY{p}{\PYZlt{}}\PY{p}{/}\PY{n+nt}{div}\PY{p}{\PYZgt{}}

    \PY{p}{\PYZlt{}}\PY{n+nt}{div} \PY{n+na}{class}\PY{o}{=}\PY{l+s}{\PYZdq{}pad\PYZhy{}container\PYZdq{}} \PY{n+na}{id}\PY{o}{=}\PY{l+s}{\PYZdq{}pad\PYZhy{}box\PYZdq{}}\PY{p}{\PYZgt{}}
        \PY{p}{\PYZlt{}}\PY{n+nt}{canvas} \PY{n+na}{id}\PY{o}{=}\PY{l+s}{\PYZdq{}pad\PYZhy{}canvas\PYZdq{}}\PY{p}{\PYZgt{}}\PY{p}{\PYZlt{}}\PY{p}{/}\PY{n+nt}{canvas}\PY{p}{\PYZgt{}}
    \PY{p}{\PYZlt{}}\PY{p}{/}\PY{n+nt}{div}\PY{p}{\PYZgt{}}

    \PY{p}{\PYZlt{}}\PY{n+nt}{div} \PY{n+na}{class}\PY{o}{=}\PY{l+s}{\PYZdq{}controls\PYZhy{}bar\PYZdq{}}\PY{p}{\PYZgt{}}
        \PY{p}{\PYZlt{}}\PY{n+nt}{select} \PY{n+na}{id}\PY{o}{=}\PY{l+s}{\PYZdq{}synth\PYZhy{}sound\PYZdq{}}\PY{p}{\PYZgt{}}
            \PY{p}{\PYZlt{}}\PY{n+nt}{option} \PY{n+na}{value}\PY{o}{=}\PY{l+s}{\PYZdq{}lead\PYZdq{}}\PY{p}{\PYZgt{}}Kitara Cyber Lead\PY{p}{\PYZlt{}}\PY{p}{/}\PY{n+nt}{option}\PY{p}{\PYZgt{}}
            \PY{p}{\PYZlt{}}\PY{n+nt}{option} \PY{n+na}{value}\PY{o}{=}\PY{l+s}{\PYZdq{}acid\PYZdq{}}\PY{p}{\PYZgt{}}303 Distorted\PY{p}{\PYZlt{}}\PY{p}{/}\PY{n+nt}{option}\PY{p}{\PYZgt{}}
            \PY{p}{\PYZlt{}}\PY{n+nt}{option} \PY{n+na}{value}\PY{o}{=}\PY{l+s}{\PYZdq{}poly\PYZdq{}}\PY{p}{\PYZgt{}}Digital PolySaw\PY{p}{\PYZlt{}}\PY{p}{/}\PY{n+nt}{option}\PY{p}{\PYZgt{}}
            \PY{p}{\PYZlt{}}\PY{n+nt}{option} \PY{n+na}{value}\PY{o}{=}\PY{l+s}{\PYZdq{}sub\PYZdq{}}\PY{p}{\PYZgt{}}Sub Bass Heavy\PY{p}{\PYZlt{}}\PY{p}{/}\PY{n+nt}{option}\PY{p}{\PYZgt{}}
        \PY{p}{\PYZlt{}}\PY{p}{/}\PY{n+nt}{select}\PY{p}{\PYZgt{}}
        \PY{p}{\PYZlt{}}\PY{n+nt}{button} \PY{n+na}{id}\PY{o}{=}\PY{l+s}{\PYZdq{}delay\PYZhy{}btn\PYZdq{}}\PY{p}{\PYZgt{}}DELAY: ON\PY{p}{\PYZlt{}}\PY{p}{/}\PY{n+nt}{button}\PY{p}{\PYZgt{}}
    \PY{p}{\PYZlt{}}\PY{p}{/}\PY{n+nt}{div}\PY{p}{\PYZgt{}}

\PY{p}{\PYZlt{}}\PY{n+nt}{script}\PY{p}{\PYZgt{}}
\PY{+w}{    }\PY{c+c1}{// Base Frequencies for 6 Standard Guitar Strings (E2, A2, D3, G3, B3, E4)}
\PY{+w}{    }\PY{k+kd}{const}\PY{+w}{ }\PY{n+nx}{baseNotes}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{p}{[}\PY{l+m+mf}{40}\PY{p}{,}\PY{+w}{ }\PY{l+m+mf}{45}\PY{p}{,}\PY{+w}{ }\PY{l+m+mf}{50}\PY{p}{,}\PY{+w}{ }\PY{l+m+mf}{55}\PY{p}{,}\PY{+w}{ }\PY{l+m+mf}{59}\PY{p}{,}\PY{+w}{ }\PY{l+m+mf}{64}\PY{p}{]}\PY{p}{;}\PY{+w}{ }
\PY{+w}{    }\PY{k+kd}{const}\PY{+w}{ }\PY{n+nx}{availableFrets}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{p}{[}\PY{l+m+mf}{0}\PY{p}{,}\PY{+w}{ }\PY{l+m+mf}{1}\PY{p}{,}\PY{+w}{ }\PY{l+m+mf}{3}\PY{p}{,}\PY{+w}{ }\PY{l+m+mf}{5}\PY{p}{,}\PY{+w}{ }\PY{l+m+mf}{7}\PY{p}{,}\PY{+w}{ }\PY{l+m+mf}{8}\PY{p}{,}\PY{+w}{ }\PY{l+m+mf}{10}\PY{p}{,}\PY{+w}{ }\PY{l+m+mf}{12}\PY{p}{]}\PY{p}{;}
\PY{+w}{    }\PY{k+kd}{const}\PY{+w}{ }\PY{n+nx}{stringStates}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{p}{[}\PY{l+m+mf}{0}\PY{p}{,}\PY{+w}{ }\PY{l+m+mf}{0}\PY{p}{,}\PY{+w}{ }\PY{l+m+mf}{0}\PY{p}{,}\PY{+w}{ }\PY{l+m+mf}{0}\PY{p}{,}\PY{+w}{ }\PY{l+m+mf}{0}\PY{p}{,}\PY{+w}{ }\PY{l+m+mf}{0}\PY{p}{]}\PY{p}{;}\PY{+w}{ }\PY{c+c1}{// Selected fret per string}

\PY{+w}{    }\PY{k+kd}{let}\PY{+w}{ }\PY{n+nx}{audioCtx}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{k+kc}{null}\PY{p}{;}
\PY{+w}{    }\PY{k+kd}{let}\PY{+w}{ }\PY{n+nx}{masterGain}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{filterNode}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{driveNode}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{delayNode}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{delayFeedback}\PY{p}{;}
\PY{+w}{    }\PY{k+kd}{let}\PY{+w}{ }\PY{n+nx}{delayActive}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{k+kc}{true}\PY{p}{;}
\PY{+w}{    }\PY{k+kd}{let}\PY{+w}{ }\PY{n+nx}{activeVoices}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{p}{\PYZob{}}\PY{p}{\PYZcb{}}\PY{p}{;}\PY{+w}{ }\PY{c+c1}{// Tracks active touch sound voices}

\PY{+w}{    }\PY{k+kd}{function}\PY{+w}{ }\PY{n+nx}{midiToFreq}\PY{p}{(}\PY{n+nx}{midi}\PY{p}{)}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{        }\PY{k}{return}\PY{+w}{ }\PY{l+m+mf}{440}\PY{+w}{ }\PY{o}{*}\PY{+w}{ }\PY{n+nb}{Math}\PY{p}{.}\PY{n+nx}{pow}\PY{p}{(}\PY{l+m+mf}{2}\PY{p}{,}\PY{+w}{ }\PY{p}{(}\PY{n+nx}{midi}\PY{+w}{ }\PY{o}{\PYZhy{}}\PY{+w}{ }\PY{l+m+mf}{69}\PY{p}{)}\PY{+w}{ }\PY{o}{/}\PY{+w}{ }\PY{l+m+mf}{12}\PY{p}{)}\PY{p}{;}
\PY{+w}{    }\PY{p}{\PYZcb{}}

\PY{+w}{    }\PY{c+c1}{// Audio Engine Setup}
\PY{+w}{    }\PY{k+kd}{function}\PY{+w}{ }\PY{n+nx}{initAudio}\PY{p}{(}\PY{p}{)}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{        }\PY{k}{if}\PY{+w}{ }\PY{p}{(}\PY{n+nx}{audioCtx}\PY{p}{)}\PY{+w}{ }\PY{k}{return}\PY{p}{;}
\PY{+w}{        }\PY{n+nx}{audioCtx}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{o+ow}{new}\PY{+w}{ }\PY{p}{(}\PY{n+nb}{window}\PY{p}{.}\PY{n+nx}{AudioContext}\PY{+w}{ }\PY{o}{||}\PY{+w}{ }\PY{n+nb}{window}\PY{p}{.}\PY{n+nx}{webkitAudioContext}\PY{p}{)}\PY{p}{(}\PY{p}{\PYZob{}}\PY{+w}{ }\PY{n+nx}{latencyHint}\PY{o}{:}\PY{+w}{ }\PY{l+s+s1}{\PYZsq{}interactive\PYZsq{}}\PY{+w}{ }\PY{p}{\PYZcb{}}\PY{p}{)}\PY{p}{;}

\PY{+w}{        }\PY{n+nx}{masterGain}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nx}{audioCtx}\PY{p}{.}\PY{n+nx}{createGain}\PY{p}{(}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }\PY{n+nx}{masterGain}\PY{p}{.}\PY{n+nx}{gain}\PY{p}{.}\PY{n+nx}{value}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{l+m+mf}{0.4}\PY{p}{;}

\PY{+w}{        }\PY{n+nx}{filterNode}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nx}{audioCtx}\PY{p}{.}\PY{n+nx}{createBiquadFilter}\PY{p}{(}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }\PY{n+nx}{filterNode}\PY{p}{.}\PY{n+nx}{type}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{l+s+s1}{\PYZsq{}lowpass\PYZsq{}}\PY{p}{;}
\PY{+w}{        }\PY{n+nx}{filterNode}\PY{p}{.}\PY{n+nx}{frequency}\PY{p}{.}\PY{n+nx}{value}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{l+m+mf}{2500}\PY{p}{;}
\PY{+w}{        }\PY{n+nx}{filterNode}\PY{p}{.}\PY{n+nx}{Q}\PY{p}{.}\PY{n+nx}{value}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{l+m+mf}{4}\PY{p}{;}

\PY{+w}{        }\PY{n+nx}{driveNode}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nx}{audioCtx}\PY{p}{.}\PY{n+nx}{createWaveShaper}\PY{p}{(}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }\PY{n+nx}{driveNode}\PY{p}{.}\PY{n+nx}{curve}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nx}{makeDistortionCurve}\PY{p}{(}\PY{l+m+mf}{60}\PY{p}{)}\PY{p}{;}

\PY{+w}{        }\PY{c+c1}{// Delay FX}
\PY{+w}{        }\PY{n+nx}{delayNode}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nx}{audioCtx}\PY{p}{.}\PY{n+nx}{createDelay}\PY{p}{(}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }\PY{n+nx}{delayNode}\PY{p}{.}\PY{n+nx}{delayTime}\PY{p}{.}\PY{n+nx}{value}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{l+m+mf}{0.25}\PY{p}{;}\PY{+w}{ }\PY{c+c1}{// 1/8 note vibe}
\PY{+w}{        }\PY{n+nx}{delayFeedback}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nx}{audioCtx}\PY{p}{.}\PY{n+nx}{createGain}\PY{p}{(}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }\PY{n+nx}{delayFeedback}\PY{p}{.}\PY{n+nx}{gain}\PY{p}{.}\PY{n+nx}{value}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{l+m+mf}{0.4}\PY{p}{;}

\PY{+w}{        }\PY{n+nx}{delayNode}\PY{p}{.}\PY{n+nx}{connect}\PY{p}{(}\PY{n+nx}{delayFeedback}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }\PY{n+nx}{delayFeedback}\PY{p}{.}\PY{n+nx}{connect}\PY{p}{(}\PY{n+nx}{delayNode}\PY{p}{)}\PY{p}{;}

\PY{+w}{        }\PY{c+c1}{// Routing}
\PY{+w}{        }\PY{n+nx}{filterNode}\PY{p}{.}\PY{n+nx}{connect}\PY{p}{(}\PY{n+nx}{driveNode}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }\PY{n+nx}{driveNode}\PY{p}{.}\PY{n+nx}{connect}\PY{p}{(}\PY{n+nx}{masterGain}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }\PY{n+nx}{driveNode}\PY{p}{.}\PY{n+nx}{connect}\PY{p}{(}\PY{n+nx}{delayNode}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }\PY{n+nx}{delayNode}\PY{p}{.}\PY{n+nx}{connect}\PY{p}{(}\PY{n+nx}{masterGain}\PY{p}{)}\PY{p}{;}

\PY{+w}{        }\PY{n+nx}{masterGain}\PY{p}{.}\PY{n+nx}{connect}\PY{p}{(}\PY{n+nx}{audioCtx}\PY{p}{.}\PY{n+nx}{destination}\PY{p}{)}\PY{p}{;}
\PY{+w}{    }\PY{p}{\PYZcb{}}

\PY{+w}{    }\PY{k+kd}{function}\PY{+w}{ }\PY{n+nx}{makeDistortionCurve}\PY{p}{(}\PY{n+nx}{amount}\PY{p}{)}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{        }\PY{k+kd}{let}\PY{+w}{ }\PY{n+nx}{k}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nx}{amount}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{n}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{l+m+mf}{44100}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{curve}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{o+ow}{new}\PY{+w}{ }\PY{n+nb}{Float32Array}\PY{p}{(}\PY{n+nx}{n}\PY{p}{)}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{deg}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nb}{Math}\PY{p}{.}\PY{n+nx}{PI}\PY{+w}{ }\PY{o}{/}\PY{+w}{ }\PY{l+m+mf}{180}\PY{p}{;}
\PY{+w}{        }\PY{k}{for}\PY{+w}{ }\PY{p}{(}\PY{k+kd}{let}\PY{+w}{ }\PY{n+nx}{i}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{l+m+mf}{0}\PY{p}{;}\PY{+w}{ }\PY{n+nx}{i}\PY{+w}{ }\PY{o}{\PYZlt{}}\PY{+w}{ }\PY{n+nx}{n}\PY{p}{;}\PY{+w}{ }\PY{o}{++}\PY{n+nx}{i}\PY{p}{)}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{            }\PY{k+kd}{let}\PY{+w}{ }\PY{n+nx}{x}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nx}{i}\PY{+w}{ }\PY{o}{*}\PY{+w}{ }\PY{l+m+mf}{2}\PY{+w}{ }\PY{o}{/}\PY{+w}{ }\PY{n+nx}{n}\PY{+w}{ }\PY{o}{\PYZhy{}}\PY{+w}{ }\PY{l+m+mf}{1}\PY{p}{;}
\PY{+w}{            }\PY{n+nx}{curve}\PY{p}{[}\PY{n+nx}{i}\PY{p}{]}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{p}{(}\PY{l+m+mf}{3}\PY{+w}{ }\PY{o}{+}\PY{+w}{ }\PY{n+nx}{k}\PY{p}{)}\PY{+w}{ }\PY{o}{*}\PY{+w}{ }\PY{n+nx}{x}\PY{+w}{ }\PY{o}{*}\PY{+w}{ }\PY{l+m+mf}{20}\PY{+w}{ }\PY{o}{*}\PY{+w}{ }\PY{n+nx}{deg}\PY{+w}{ }\PY{o}{/}\PY{+w}{ }\PY{p}{(}\PY{n+nb}{Math}\PY{p}{.}\PY{n+nx}{PI}\PY{+w}{ }\PY{o}{+}\PY{+w}{ }\PY{n+nx}{k}\PY{+w}{ }\PY{o}{*}\PY{+w}{ }\PY{n+nb}{Math}\PY{p}{.}\PY{n+nx}{abs}\PY{p}{(}\PY{n+nx}{x}\PY{p}{)}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }\PY{p}{\PYZcb{}}
\PY{+w}{        }\PY{k}{return}\PY{+w}{ }\PY{n+nx}{curve}\PY{p}{;}
\PY{+w}{    }\PY{p}{\PYZcb{}}

\PY{+w}{    }\PY{c+c1}{// Play Kitara Voice on String Trigger}
\PY{+w}{    }\PY{k+kd}{function}\PY{+w}{ }\PY{n+nx}{startVoice}\PY{p}{(}\PY{n+nx}{touchId}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{stringIndex}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{xRatio}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{yRatio}\PY{p}{)}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{        }\PY{n+nx}{initAudio}\PY{p}{(}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }\PY{k}{if}\PY{+w}{ }\PY{p}{(}\PY{n+nx}{audioCtx}\PY{p}{.}\PY{n+nx}{state}\PY{+w}{ }\PY{o}{===}\PY{+w}{ }\PY{l+s+s1}{\PYZsq{}suspended\PYZsq{}}\PY{p}{)}\PY{+w}{ }\PY{n+nx}{audioCtx}\PY{p}{.}\PY{n+nx}{resume}\PY{p}{(}\PY{p}{)}\PY{p}{;}

\PY{+w}{        }\PY{k+kd}{const}\PY{+w}{ }\PY{n+nx}{midiNote}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nx}{baseNotes}\PY{p}{[}\PY{n+nx}{stringIndex}\PY{p}{]}\PY{+w}{ }\PY{o}{+}\PY{+w}{ }\PY{n+nx}{stringStates}\PY{p}{[}\PY{n+nx}{stringIndex}\PY{p}{]}\PY{p}{;}
\PY{+w}{        }\PY{k+kd}{const}\PY{+w}{ }\PY{n+nx}{freq}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nx}{midiToFreq}\PY{p}{(}\PY{n+nx}{midiNote}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }\PY{k+kd}{const}\PY{+w}{ }\PY{n+nx}{preset}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nb}{document}\PY{p}{.}\PY{n+nx}{getElementById}\PY{p}{(}\PY{l+s+s1}{\PYZsq{}synth\PYZhy{}sound\PYZsq{}}\PY{p}{)}\PY{p}{.}\PY{n+nx}{value}\PY{p}{;}

\PY{+w}{        }\PY{k+kd}{const}\PY{+w}{ }\PY{n+nx}{osc1}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nx}{audioCtx}\PY{p}{.}\PY{n+nx}{createOscillator}\PY{p}{(}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }\PY{k+kd}{const}\PY{+w}{ }\PY{n+nx}{osc2}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nx}{audioCtx}\PY{p}{.}\PY{n+nx}{createOscillator}\PY{p}{(}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }\PY{k+kd}{const}\PY{+w}{ }\PY{n+nx}{voiceGain}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nx}{audioCtx}\PY{p}{.}\PY{n+nx}{createGain}\PY{p}{(}\PY{p}{)}\PY{p}{;}

\PY{+w}{        }\PY{k}{if}\PY{+w}{ }\PY{p}{(}\PY{n+nx}{preset}\PY{+w}{ }\PY{o}{===}\PY{+w}{ }\PY{l+s+s1}{\PYZsq{}acid\PYZsq{}}\PY{p}{)}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{            }\PY{n+nx}{osc1}\PY{p}{.}\PY{n+nx}{type}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{l+s+s1}{\PYZsq{}sawtooth\PYZsq{}}\PY{p}{;}\PY{+w}{ }\PY{n+nx}{osc2}\PY{p}{.}\PY{n+nx}{type}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{l+s+s1}{\PYZsq{}sawtooth\PYZsq{}}\PY{p}{;}
\PY{+w}{            }\PY{n+nx}{osc2}\PY{p}{.}\PY{n+nx}{detune}\PY{p}{.}\PY{n+nx}{value}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{l+m+mf}{12}\PY{p}{;}
\PY{+w}{        }\PY{p}{\PYZcb{}}\PY{+w}{ }\PY{k}{else}\PY{+w}{ }\PY{k}{if}\PY{+w}{ }\PY{p}{(}\PY{n+nx}{preset}\PY{+w}{ }\PY{o}{===}\PY{+w}{ }\PY{l+s+s1}{\PYZsq{}poly\PYZsq{}}\PY{p}{)}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{            }\PY{n+nx}{osc1}\PY{p}{.}\PY{n+nx}{type}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{l+s+s1}{\PYZsq{}sawtooth\PYZsq{}}\PY{p}{;}\PY{+w}{ }\PY{n+nx}{osc2}\PY{p}{.}\PY{n+nx}{type}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{l+s+s1}{\PYZsq{}square\PYZsq{}}\PY{p}{;}
\PY{+w}{            }\PY{n+nx}{osc2}\PY{p}{.}\PY{n+nx}{detune}\PY{p}{.}\PY{n+nx}{value}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{o}{\PYZhy{}}\PY{l+m+mf}{7}\PY{p}{;}
\PY{+w}{        }\PY{p}{\PYZcb{}}\PY{+w}{ }\PY{k}{else}\PY{+w}{ }\PY{k}{if}\PY{+w}{ }\PY{p}{(}\PY{n+nx}{preset}\PY{+w}{ }\PY{o}{===}\PY{+w}{ }\PY{l+s+s1}{\PYZsq{}sub\PYZsq{}}\PY{p}{)}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{            }\PY{n+nx}{osc1}\PY{p}{.}\PY{n+nx}{type}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{l+s+s1}{\PYZsq{}triangle\PYZsq{}}\PY{p}{;}\PY{+w}{ }\PY{n+nx}{osc2}\PY{p}{.}\PY{n+nx}{type}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{l+s+s1}{\PYZsq{}sine\PYZsq{}}\PY{p}{;}
\PY{+w}{        }\PY{p}{\PYZcb{}}\PY{+w}{ }\PY{k}{else}\PY{+w}{ }\PY{p}{\PYZob{}}\PY{+w}{ }\PY{c+c1}{// Kitara Lead}
\PY{+w}{            }\PY{n+nx}{osc1}\PY{p}{.}\PY{n+nx}{type}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{l+s+s1}{\PYZsq{}sawtooth\PYZsq{}}\PY{p}{;}\PY{+w}{ }\PY{n+nx}{osc2}\PY{p}{.}\PY{n+nx}{type}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{l+s+s1}{\PYZsq{}square\PYZsq{}}\PY{p}{;}
\PY{+w}{            }\PY{n+nx}{osc2}\PY{p}{.}\PY{n+nx}{detune}\PY{p}{.}\PY{n+nx}{value}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{l+m+mf}{5}\PY{p}{;}
\PY{+w}{        }\PY{p}{\PYZcb{}}

\PY{+w}{        }\PY{n+nx}{osc1}\PY{p}{.}\PY{n+nx}{frequency}\PY{p}{.}\PY{n+nx}{setValueAtTime}\PY{p}{(}\PY{n+nx}{freq}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{audioCtx}\PY{p}{.}\PY{n+nx}{currentTime}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }\PY{n+nx}{osc2}\PY{p}{.}\PY{n+nx}{frequency}\PY{p}{.}\PY{n+nx}{setValueAtTime}\PY{p}{(}\PY{n+nx}{freq}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{audioCtx}\PY{p}{.}\PY{n+nx}{currentTime}\PY{p}{)}\PY{p}{;}

\PY{+w}{        }\PY{n+nx}{osc1}\PY{p}{.}\PY{n+nx}{connect}\PY{p}{(}\PY{n+nx}{voiceGain}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }\PY{n+nx}{osc2}\PY{p}{.}\PY{n+nx}{connect}\PY{p}{(}\PY{n+nx}{voiceGain}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }\PY{n+nx}{voiceGain}\PY{p}{.}\PY{n+nx}{connect}\PY{p}{(}\PY{n+nx}{filterNode}\PY{p}{)}\PY{p}{;}

\PY{+w}{        }\PY{c+c1}{// Fast Attack Envelope}
\PY{+w}{        }\PY{n+nx}{voiceGain}\PY{p}{.}\PY{n+nx}{gain}\PY{p}{.}\PY{n+nx}{setValueAtTime}\PY{p}{(}\PY{l+m+mf}{0.01}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{audioCtx}\PY{p}{.}\PY{n+nx}{currentTime}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }\PY{n+nx}{voiceGain}\PY{p}{.}\PY{n+nx}{gain}\PY{p}{.}\PY{n+nx}{linearRampToValueAtTime}\PY{p}{(}\PY{l+m+mf}{0.8}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{audioCtx}\PY{p}{.}\PY{n+nx}{currentTime}\PY{+w}{ }\PY{o}{+}\PY{+w}{ }\PY{l+m+mf}{0.01}\PY{p}{)}\PY{p}{;}

\PY{+w}{        }\PY{n+nx}{osc1}\PY{p}{.}\PY{n+nx}{start}\PY{p}{(}\PY{p}{)}\PY{p}{;}\PY{+w}{ }\PY{n+nx}{osc2}\PY{p}{.}\PY{n+nx}{start}\PY{p}{(}\PY{p}{)}\PY{p}{;}

\PY{+w}{        }\PY{n+nx}{activeVoices}\PY{p}{[}\PY{n+nx}{touchId}\PY{p}{]}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{p}{\PYZob{}}\PY{+w}{ }\PY{n+nx}{osc1}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{osc2}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{voiceGain}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{stringIndex}\PY{+w}{ }\PY{p}{\PYZcb{}}\PY{p}{;}
\PY{+w}{        }\PY{n+nx}{updateSynthParameters}\PY{p}{(}\PY{n+nx}{xRatio}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{yRatio}\PY{p}{)}\PY{p}{;}
\PY{+w}{    }\PY{p}{\PYZcb{}}

\PY{+w}{    }\PY{k+kd}{function}\PY{+w}{ }\PY{n+nx}{updateVoice}\PY{p}{(}\PY{n+nx}{touchId}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{xRatio}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{yRatio}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{stringIndex}\PY{p}{)}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{        }\PY{k}{if}\PY{+w}{ }\PY{p}{(}\PY{o}{!}\PY{n+nx}{activeVoices}\PY{p}{[}\PY{n+nx}{touchId}\PY{p}{]}\PY{p}{)}\PY{+w}{ }\PY{k}{return}\PY{p}{;}

\PY{+w}{        }\PY{c+c1}{// Pitch shift if finger slides to another string zone}
\PY{+w}{        }\PY{k}{if}\PY{+w}{ }\PY{p}{(}\PY{n+nx}{activeVoices}\PY{p}{[}\PY{n+nx}{touchId}\PY{p}{]}\PY{p}{.}\PY{n+nx}{stringIndex}\PY{+w}{ }\PY{o}{!==}\PY{+w}{ }\PY{n+nx}{stringIndex}\PY{p}{)}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{            }\PY{k+kd}{const}\PY{+w}{ }\PY{n+nx}{midiNote}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nx}{baseNotes}\PY{p}{[}\PY{n+nx}{stringIndex}\PY{p}{]}\PY{+w}{ }\PY{o}{+}\PY{+w}{ }\PY{n+nx}{stringStates}\PY{p}{[}\PY{n+nx}{stringIndex}\PY{p}{]}\PY{p}{;}
\PY{+w}{            }\PY{k+kd}{const}\PY{+w}{ }\PY{n+nx}{freq}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nx}{midiToFreq}\PY{p}{(}\PY{n+nx}{midiNote}\PY{p}{)}\PY{p}{;}
\PY{+w}{            }\PY{k+kd}{const}\PY{+w}{ }\PY{n+nx}{now}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nx}{audioCtx}\PY{p}{.}\PY{n+nx}{currentTime}\PY{p}{;}
\PY{+w}{            }\PY{n+nx}{activeVoices}\PY{p}{[}\PY{n+nx}{touchId}\PY{p}{]}\PY{p}{.}\PY{n+nx}{osc1}\PY{p}{.}\PY{n+nx}{frequency}\PY{p}{.}\PY{n+nx}{setTargetAtTime}\PY{p}{(}\PY{n+nx}{freq}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{now}\PY{p}{,}\PY{+w}{ }\PY{l+m+mf}{0.01}\PY{p}{)}\PY{p}{;}
\PY{+w}{            }\PY{n+nx}{activeVoices}\PY{p}{[}\PY{n+nx}{touchId}\PY{p}{]}\PY{p}{.}\PY{n+nx}{osc2}\PY{p}{.}\PY{n+nx}{frequency}\PY{p}{.}\PY{n+nx}{setTargetAtTime}\PY{p}{(}\PY{n+nx}{freq}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{now}\PY{p}{,}\PY{+w}{ }\PY{l+m+mf}{0.01}\PY{p}{)}\PY{p}{;}
\PY{+w}{            }\PY{n+nx}{activeVoices}\PY{p}{[}\PY{n+nx}{touchId}\PY{p}{]}\PY{p}{.}\PY{n+nx}{stringIndex}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nx}{stringIndex}\PY{p}{;}
\PY{+w}{        }\PY{p}{\PYZcb{}}

\PY{+w}{        }\PY{n+nx}{updateSynthParameters}\PY{p}{(}\PY{n+nx}{xRatio}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{yRatio}\PY{p}{)}\PY{p}{;}
\PY{+w}{    }\PY{p}{\PYZcb{}}

\PY{+w}{    }\PY{k+kd}{function}\PY{+w}{ }\PY{n+nx}{stopVoice}\PY{p}{(}\PY{n+nx}{touchId}\PY{p}{)}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{        }\PY{k}{if}\PY{+w}{ }\PY{p}{(}\PY{o}{!}\PY{n+nx}{activeVoices}\PY{p}{[}\PY{n+nx}{touchId}\PY{p}{]}\PY{p}{)}\PY{+w}{ }\PY{k}{return}\PY{p}{;}
\PY{+w}{        }\PY{k+kd}{const}\PY{+w}{ }\PY{p}{\PYZob{}}\PY{+w}{ }\PY{n+nx}{osc1}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{osc2}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{voiceGain}\PY{+w}{ }\PY{p}{\PYZcb{}}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nx}{activeVoices}\PY{p}{[}\PY{n+nx}{touchId}\PY{p}{]}\PY{p}{;}
\PY{+w}{        }\PY{k+kd}{const}\PY{+w}{ }\PY{n+nx}{now}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nx}{audioCtx}\PY{p}{.}\PY{n+nx}{currentTime}\PY{p}{;}

\PY{+w}{        }\PY{n+nx}{voiceGain}\PY{p}{.}\PY{n+nx}{gain}\PY{p}{.}\PY{n+nx}{cancelScheduledValues}\PY{p}{(}\PY{n+nx}{now}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }\PY{n+nx}{voiceGain}\PY{p}{.}\PY{n+nx}{gain}\PY{p}{.}\PY{n+nx}{setTargetAtTime}\PY{p}{(}\PY{l+m+mf}{0.001}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{now}\PY{p}{,}\PY{+w}{ }\PY{l+m+mf}{0.05}\PY{p}{)}\PY{p}{;}

\PY{+w}{        }\PY{n+nx}{setTimeout}\PY{p}{(}\PY{p}{(}\PY{p}{)}\PY{+w}{ }\PY{p}{=\PYZgt{}}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{            }\PY{k}{try}\PY{+w}{ }\PY{p}{\PYZob{}}\PY{+w}{ }\PY{n+nx}{osc1}\PY{p}{.}\PY{n+nx}{stop}\PY{p}{(}\PY{p}{)}\PY{p}{;}\PY{+w}{ }\PY{n+nx}{osc2}\PY{p}{.}\PY{n+nx}{stop}\PY{p}{(}\PY{p}{)}\PY{p}{;}\PY{+w}{ }\PY{n+nx}{osc1}\PY{p}{.}\PY{n+nx}{disconnect}\PY{p}{(}\PY{p}{)}\PY{p}{;}\PY{+w}{ }\PY{n+nx}{osc2}\PY{p}{.}\PY{n+nx}{disconnect}\PY{p}{(}\PY{p}{)}\PY{p}{;}\PY{+w}{ }\PY{p}{\PYZcb{}}\PY{+w}{ }\PY{k}{catch}\PY{p}{(}\PY{n+nx}{e}\PY{p}{)}\PY{p}{\PYZob{}}\PY{p}{\PYZcb{}}
\PY{+w}{        }\PY{p}{\PYZcb{}}\PY{p}{,}\PY{+w}{ }\PY{l+m+mf}{100}\PY{p}{)}\PY{p}{;}

\PY{+w}{        }\PY{o+ow}{delete}\PY{+w}{ }\PY{n+nx}{activeVoices}\PY{p}{[}\PY{n+nx}{touchId}\PY{p}{]}\PY{p}{;}
\PY{+w}{    }\PY{p}{\PYZcb{}}

\PY{+w}{    }\PY{k+kd}{function}\PY{+w}{ }\PY{n+nx}{updateSynthParameters}\PY{p}{(}\PY{n+nx}{xRatio}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{yRatio}\PY{p}{)}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{        }\PY{k}{if}\PY{+w}{ }\PY{p}{(}\PY{o}{!}\PY{n+nx}{audioCtx}\PY{p}{)}\PY{+w}{ }\PY{k}{return}\PY{p}{;}
\PY{+w}{        }\PY{k+kd}{const}\PY{+w}{ }\PY{n+nx}{now}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nx}{audioCtx}\PY{p}{.}\PY{n+nx}{currentTime}\PY{p}{;}

\PY{+w}{        }\PY{c+c1}{// X\PYZhy{}Axis controls Filter Cutoff (100 Hz \PYZhy{} 8000 Hz)}
\PY{+w}{        }\PY{k+kd}{const}\PY{+w}{ }\PY{n+nx}{cutoff}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{l+m+mf}{100}\PY{+w}{ }\PY{o}{*}\PY{+w}{ }\PY{n+nb}{Math}\PY{p}{.}\PY{n+nx}{pow}\PY{p}{(}\PY{l+m+mf}{80}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{xRatio}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }\PY{n+nx}{filterNode}\PY{p}{.}\PY{n+nx}{frequency}\PY{p}{.}\PY{n+nx}{setTargetAtTime}\PY{p}{(}\PY{n+nx}{cutoff}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{now}\PY{p}{,}\PY{+w}{ }\PY{l+m+mf}{0.01}\PY{p}{)}\PY{p}{;}

\PY{+w}{        }\PY{c+c1}{// Y\PYZhy{}Axis controls Resonance \PYZam{} Distortion Gain}
\PY{+w}{        }\PY{n+nx}{filterNode}\PY{p}{.}\PY{n+nx}{Q}\PY{p}{.}\PY{n+nx}{setTargetAtTime}\PY{p}{(}\PY{l+m+mf}{2}\PY{+w}{ }\PY{o}{+}\PY{+w}{ }\PY{p}{(}\PY{n+nx}{yRatio}\PY{+w}{ }\PY{o}{*}\PY{+w}{ }\PY{l+m+mf}{16}\PY{p}{)}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{now}\PY{p}{,}\PY{+w}{ }\PY{l+m+mf}{0.01}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }
\PY{+w}{        }\PY{n+nb}{document}\PY{p}{.}\PY{n+nx}{getElementById}\PY{p}{(}\PY{l+s+s1}{\PYZsq{}status\PYZhy{}display\PYZsq{}}\PY{p}{)}\PY{p}{.}\PY{n+nx}{innerText}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }
\PY{+w}{            }\PY{l+s+sb}{`}\PY{l+s+sb}{CUTOFF: }\PY{l+s+si}{\PYZdl{}\PYZob{}}\PY{n+nb}{Math}\PY{p}{.}\PY{n+nx}{round}\PY{p}{(}\PY{n+nx}{cutoff}\PY{p}{)}\PY{l+s+si}{\PYZcb{}}\PY{l+s+sb}{Hz | RES: }\PY{l+s+si}{\PYZdl{}\PYZob{}}\PY{n+nb}{Math}\PY{p}{.}\PY{n+nx}{round}\PY{p}{(}\PY{l+m+mf}{2}\PY{+w}{ }\PY{o}{+}\PY{+w}{ }\PY{n+nx}{yRatio}\PY{+w}{ }\PY{o}{*}\PY{+w}{ }\PY{l+m+mf}{16}\PY{p}{)}\PY{l+s+si}{\PYZcb{}}\PY{l+s+sb}{`}\PY{p}{;}
\PY{+w}{    }\PY{p}{\PYZcb{}}

\PY{+w}{    }\PY{c+c1}{// Render Fretboard UI}
\PY{+w}{    }\PY{k+kd}{const}\PY{+w}{ }\PY{n+nx}{fretboardEl}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nb}{document}\PY{p}{.}\PY{n+nx}{getElementById}\PY{p}{(}\PY{l+s+s1}{\PYZsq{}fretboard\PYZsq{}}\PY{p}{)}\PY{p}{;}
\PY{+w}{    }\PY{k+kd}{const}\PY{+w}{ }\PY{n+nx}{stringNames}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{p}{[}\PY{l+s+s1}{\PYZsq{}E2\PYZsq{}}\PY{p}{,}\PY{+w}{ }\PY{l+s+s1}{\PYZsq{}A2\PYZsq{}}\PY{p}{,}\PY{+w}{ }\PY{l+s+s1}{\PYZsq{}D3\PYZsq{}}\PY{p}{,}\PY{+w}{ }\PY{l+s+s1}{\PYZsq{}G3\PYZsq{}}\PY{p}{,}\PY{+w}{ }\PY{l+s+s1}{\PYZsq{}B3\PYZsq{}}\PY{p}{,}\PY{+w}{ }\PY{l+s+s1}{\PYZsq{}E4\PYZsq{}}\PY{p}{]}\PY{p}{;}

\PY{+w}{    }\PY{n+nx}{stringNames}\PY{p}{.}\PY{n+nx}{forEach}\PY{p}{(}\PY{p}{(}\PY{n+nx}{name}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{sIdx}\PY{p}{)}\PY{+w}{ }\PY{p}{=\PYZgt{}}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{        }\PY{k+kd}{const}\PY{+w}{ }\PY{n+nx}{row}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nb}{document}\PY{p}{.}\PY{n+nx}{createElement}\PY{p}{(}\PY{l+s+s1}{\PYZsq{}div\PYZsq{}}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }\PY{n+nx}{row}\PY{p}{.}\PY{n+nx}{className}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{l+s+s1}{\PYZsq{}string\PYZhy{}row\PYZsq{}}\PY{p}{;}

\PY{+w}{        }\PY{k+kd}{const}\PY{+w}{ }\PY{n+nx}{label}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nb}{document}\PY{p}{.}\PY{n+nx}{createElement}\PY{p}{(}\PY{l+s+s1}{\PYZsq{}div\PYZsq{}}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }\PY{n+nx}{label}\PY{p}{.}\PY{n+nx}{className}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{l+s+s1}{\PYZsq{}string\PYZhy{}label\PYZsq{}}\PY{p}{;}
\PY{+w}{        }\PY{n+nx}{label}\PY{p}{.}\PY{n+nx}{innerText}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nx}{name}\PY{p}{[}\PY{l+m+mf}{0}\PY{p}{]}\PY{+w}{ }\PY{o}{+}\PY{+w}{ }\PY{n+nx}{name}\PY{p}{[}\PY{l+m+mf}{1}\PY{p}{]}\PY{p}{;}
\PY{+w}{        }\PY{n+nx}{row}\PY{p}{.}\PY{n+nx}{appendChild}\PY{p}{(}\PY{n+nx}{label}\PY{p}{)}\PY{p}{;}

\PY{+w}{        }\PY{k+kd}{const}\PY{+w}{ }\PY{n+nx}{fretContainer}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nb}{document}\PY{p}{.}\PY{n+nx}{createElement}\PY{p}{(}\PY{l+s+s1}{\PYZsq{}div\PYZsq{}}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }\PY{n+nx}{fretContainer}\PY{p}{.}\PY{n+nx}{className}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{l+s+s1}{\PYZsq{}fret\PYZhy{}buttons\PYZsq{}}\PY{p}{;}

\PY{+w}{        }\PY{n+nx}{availableFrets}\PY{p}{.}\PY{n+nx}{forEach}\PY{p}{(}\PY{p}{(}\PY{n+nx}{fret}\PY{p}{)}\PY{+w}{ }\PY{p}{=\PYZgt{}}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{            }\PY{k+kd}{const}\PY{+w}{ }\PY{n+nx}{btn}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nb}{document}\PY{p}{.}\PY{n+nx}{createElement}\PY{p}{(}\PY{l+s+s1}{\PYZsq{}div\PYZsq{}}\PY{p}{)}\PY{p}{;}
\PY{+w}{            }\PY{n+nx}{btn}\PY{p}{.}\PY{n+nx}{className}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{l+s+sb}{`}\PY{l+s+sb}{fret\PYZhy{}btn }\PY{l+s+si}{\PYZdl{}\PYZob{}}\PY{n+nx}{fret}\PY{+w}{ }\PY{o}{===}\PY{+w}{ }\PY{l+m+mf}{0}\PY{+w}{ }\PY{o}{?}\PY{+w}{ }\PY{l+s+s1}{\PYZsq{}active\PYZsq{}}\PY{+w}{ }\PY{o}{:}\PY{+w}{ }\PY{l+s+s1}{\PYZsq{}\PYZsq{}}\PY{l+s+si}{\PYZcb{}}\PY{l+s+sb}{`}\PY{p}{;}
\PY{+w}{            }\PY{n+nx}{btn}\PY{p}{.}\PY{n+nx}{innerText}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nx}{fret}\PY{+w}{ }\PY{o}{===}\PY{+w}{ }\PY{l+m+mf}{0}\PY{+w}{ }\PY{o}{?}\PY{+w}{ }\PY{l+s+s1}{\PYZsq{}O\PYZsq{}}\PY{+w}{ }\PY{o}{:}\PY{+w}{ }\PY{n+nx}{fret}\PY{p}{;}
\PY{+w}{            }\PY{n+nx}{btn}\PY{p}{.}\PY{n+nx}{dataset}\PY{p}{.}\PY{n+nx}{string}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nx}{sIdx}\PY{p}{;}
\PY{+w}{            }\PY{n+nx}{btn}\PY{p}{.}\PY{n+nx}{dataset}\PY{p}{.}\PY{n+nx}{fret}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nx}{fret}\PY{p}{;}

\PY{+w}{            }\PY{n+nx}{btn}\PY{p}{.}\PY{n+nx}{addEventListener}\PY{p}{(}\PY{l+s+s1}{\PYZsq{}pointerdown\PYZsq{}}\PY{p}{,}\PY{+w}{ }\PY{p}{(}\PY{n+nx}{e}\PY{p}{)}\PY{+w}{ }\PY{p}{=\PYZgt{}}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{                }\PY{n+nx}{e}\PY{p}{.}\PY{n+nx}{preventDefault}\PY{p}{(}\PY{p}{)}\PY{p}{;}
\PY{+w}{                }\PY{n+nx}{stringStates}\PY{p}{[}\PY{n+nx}{sIdx}\PY{p}{]}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nx}{fret}\PY{p}{;}
\PY{+w}{                }\PY{n+nx}{row}\PY{p}{.}\PY{n+nx}{querySelectorAll}\PY{p}{(}\PY{l+s+s1}{\PYZsq{}.fret\PYZhy{}btn\PYZsq{}}\PY{p}{)}\PY{p}{.}\PY{n+nx}{forEach}\PY{p}{(}\PY{n+nx}{b}\PY{+w}{ }\PY{p}{=\PYZgt{}}\PY{+w}{ }\PY{n+nx}{b}\PY{p}{.}\PY{n+nx}{classList}\PY{p}{.}\PY{n+nx}{remove}\PY{p}{(}\PY{l+s+s1}{\PYZsq{}active\PYZsq{}}\PY{p}{)}\PY{p}{)}\PY{p}{;}
\PY{+w}{                }\PY{n+nx}{btn}\PY{p}{.}\PY{n+nx}{classList}\PY{p}{.}\PY{n+nx}{add}\PY{p}{(}\PY{l+s+s1}{\PYZsq{}active\PYZsq{}}\PY{p}{)}\PY{p}{;}
\PY{+w}{            }\PY{p}{\PYZcb{}}\PY{p}{)}\PY{p}{;}

\PY{+w}{            }\PY{n+nx}{fretContainer}\PY{p}{.}\PY{n+nx}{appendChild}\PY{p}{(}\PY{n+nx}{btn}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }\PY{p}{\PYZcb{}}\PY{p}{)}\PY{p}{;}

\PY{+w}{        }\PY{n+nx}{row}\PY{p}{.}\PY{n+nx}{appendChild}\PY{p}{(}\PY{n+nx}{fretContainer}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }\PY{n+nx}{fretboardEl}\PY{p}{.}\PY{n+nx}{appendChild}\PY{p}{(}\PY{n+nx}{row}\PY{p}{)}\PY{p}{;}
\PY{+w}{    }\PY{p}{\PYZcb{}}\PY{p}{)}\PY{p}{;}

\PY{+w}{    }\PY{c+c1}{// Touchpad \PYZam{} Canvas Performance Rendering}
\PY{+w}{    }\PY{k+kd}{const}\PY{+w}{ }\PY{n+nx}{padBox}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nb}{document}\PY{p}{.}\PY{n+nx}{getElementById}\PY{p}{(}\PY{l+s+s1}{\PYZsq{}pad\PYZhy{}box\PYZsq{}}\PY{p}{)}\PY{p}{;}
\PY{+w}{    }\PY{k+kd}{const}\PY{+w}{ }\PY{n+nx}{canvas}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nb}{document}\PY{p}{.}\PY{n+nx}{getElementById}\PY{p}{(}\PY{l+s+s1}{\PYZsq{}pad\PYZhy{}canvas\PYZsq{}}\PY{p}{)}\PY{p}{;}
\PY{+w}{    }\PY{k+kd}{const}\PY{+w}{ }\PY{n+nx}{ctx}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nx}{canvas}\PY{p}{.}\PY{n+nx}{getContext}\PY{p}{(}\PY{l+s+s1}{\PYZsq{}2d\PYZsq{}}\PY{p}{)}\PY{p}{;}
\PY{+w}{    }\PY{k+kd}{let}\PY{+w}{ }\PY{n+nx}{touches}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{p}{[}\PY{p}{]}\PY{p}{;}

\PY{+w}{    }\PY{k+kd}{function}\PY{+w}{ }\PY{n+nx}{resizeCanvas}\PY{p}{(}\PY{p}{)}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{        }\PY{n+nx}{canvas}\PY{p}{.}\PY{n+nx}{width}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nx}{padBox}\PY{p}{.}\PY{n+nx}{clientWidth}\PY{p}{;}
\PY{+w}{        }\PY{n+nx}{canvas}\PY{p}{.}\PY{n+nx}{height}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nx}{padBox}\PY{p}{.}\PY{n+nx}{clientHeight}\PY{p}{;}
\PY{+w}{    }\PY{p}{\PYZcb{}}
\PY{+w}{    }\PY{n+nb}{window}\PY{p}{.}\PY{n+nx}{addEventListener}\PY{p}{(}\PY{l+s+s1}{\PYZsq{}resize\PYZsq{}}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{resizeCanvas}\PY{p}{)}\PY{p}{;}
\PY{+w}{    }\PY{n+nx}{resizeCanvas}\PY{p}{(}\PY{p}{)}\PY{p}{;}

\PY{+w}{    }\PY{k+kd}{function}\PY{+w}{ }\PY{n+nx}{getPadCoordinates}\PY{p}{(}\PY{n+nx}{e}\PY{p}{)}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{        }\PY{k+kd}{const}\PY{+w}{ }\PY{n+nx}{rect}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nx}{padBox}\PY{p}{.}\PY{n+nx}{getBoundingClientRect}\PY{p}{(}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }\PY{k+kd}{const}\PY{+w}{ }\PY{n+nx}{touchList}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nx}{e}\PY{p}{.}\PY{n+nx}{touches}\PY{+w}{ }\PY{o}{?}\PY{+w}{ }\PY{n+nb}{Array}\PY{p}{.}\PY{k+kr}{from}\PY{p}{(}\PY{n+nx}{e}\PY{p}{.}\PY{n+nx}{touches}\PY{p}{)}\PY{+w}{ }\PY{o}{:}\PY{+w}{ }\PY{p}{[}\PY{n+nx}{e}\PY{p}{]}\PY{p}{;}
\PY{+w}{        }\PY{k}{return}\PY{+w}{ }\PY{n+nx}{touchList}\PY{p}{.}\PY{n+nx}{map}\PY{p}{(}\PY{n+nx}{t}\PY{+w}{ }\PY{p}{=\PYZgt{}}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{            }\PY{k+kd}{const}\PY{+w}{ }\PY{n+nx}{x}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nb}{Math}\PY{p}{.}\PY{n+nx}{max}\PY{p}{(}\PY{l+m+mf}{0}\PY{p}{,}\PY{+w}{ }\PY{n+nb}{Math}\PY{p}{.}\PY{n+nx}{min}\PY{p}{(}\PY{n+nx}{rect}\PY{p}{.}\PY{n+nx}{width}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{t}\PY{p}{.}\PY{n+nx}{clientX}\PY{+w}{ }\PY{o}{\PYZhy{}}\PY{+w}{ }\PY{n+nx}{rect}\PY{p}{.}\PY{n+nx}{left}\PY{p}{)}\PY{p}{)}\PY{p}{;}
\PY{+w}{            }\PY{k+kd}{const}\PY{+w}{ }\PY{n+nx}{y}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nb}{Math}\PY{p}{.}\PY{n+nx}{max}\PY{p}{(}\PY{l+m+mf}{0}\PY{p}{,}\PY{+w}{ }\PY{n+nb}{Math}\PY{p}{.}\PY{n+nx}{min}\PY{p}{(}\PY{n+nx}{rect}\PY{p}{.}\PY{n+nx}{height}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{t}\PY{p}{.}\PY{n+nx}{clientY}\PY{+w}{ }\PY{o}{\PYZhy{}}\PY{+w}{ }\PY{n+nx}{rect}\PY{p}{.}\PY{n+nx}{top}\PY{p}{)}\PY{p}{)}\PY{p}{;}
\PY{+w}{            }\PY{k+kd}{const}\PY{+w}{ }\PY{n+nx}{xRatio}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nx}{x}\PY{+w}{ }\PY{o}{/}\PY{+w}{ }\PY{n+nx}{rect}\PY{p}{.}\PY{n+nx}{width}\PY{p}{;}
\PY{+w}{            }\PY{k+kd}{const}\PY{+w}{ }\PY{n+nx}{yRatio}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{l+m+mf}{1}\PY{+w}{ }\PY{o}{\PYZhy{}}\PY{+w}{ }\PY{p}{(}\PY{n+nx}{y}\PY{+w}{ }\PY{o}{/}\PY{+w}{ }\PY{n+nx}{rect}\PY{p}{.}\PY{n+nx}{height}\PY{p}{)}\PY{p}{;}
\PY{+w}{            }\PY{c+c1}{// 6 Virtual String Zones on Y\PYZhy{}Axis}
\PY{+w}{            }\PY{k+kd}{const}\PY{+w}{ }\PY{n+nx}{stringIndex}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nb}{Math}\PY{p}{.}\PY{n+nx}{min}\PY{p}{(}\PY{l+m+mf}{5}\PY{p}{,}\PY{+w}{ }\PY{n+nb}{Math}\PY{p}{.}\PY{n+nx}{floor}\PY{p}{(}\PY{p}{(}\PY{n+nx}{y}\PY{+w}{ }\PY{o}{/}\PY{+w}{ }\PY{n+nx}{rect}\PY{p}{.}\PY{n+nx}{height}\PY{p}{)}\PY{+w}{ }\PY{o}{*}\PY{+w}{ }\PY{l+m+mf}{6}\PY{p}{)}\PY{p}{)}\PY{p}{;}
\PY{+w}{            }\PY{k}{return}\PY{+w}{ }\PY{p}{\PYZob{}}\PY{+w}{ }\PY{n+nx}{id}\PY{o}{:}\PY{+w}{ }\PY{n+nx}{t}\PY{p}{.}\PY{n+nx}{identifier}\PY{+w}{ }\PY{o}{??}\PY{+w}{ }\PY{l+s+s1}{\PYZsq{}mouse\PYZsq{}}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{x}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{y}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{xRatio}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{yRatio}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{stringIndex}\PY{+w}{ }\PY{p}{\PYZcb{}}\PY{p}{;}
\PY{+w}{        }\PY{p}{\PYZcb{}}\PY{p}{)}\PY{p}{;}
\PY{+w}{    }\PY{p}{\PYZcb{}}

\PY{+w}{    }\PY{k+kd}{function}\PY{+w}{ }\PY{n+nx}{handleTouchStart}\PY{p}{(}\PY{n+nx}{e}\PY{p}{)}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{        }\PY{n+nx}{e}\PY{p}{.}\PY{n+nx}{preventDefault}\PY{p}{(}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }\PY{k+kd}{const}\PY{+w}{ }\PY{n+nx}{currentTouches}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nx}{getPadCoordinates}\PY{p}{(}\PY{n+nx}{e}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }\PY{n+nx}{currentTouches}\PY{p}{.}\PY{n+nx}{forEach}\PY{p}{(}\PY{n+nx}{t}\PY{+w}{ }\PY{p}{=\PYZgt{}}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{            }\PY{n+nx}{startVoice}\PY{p}{(}\PY{n+nx}{t}\PY{p}{.}\PY{n+nx}{id}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{t}\PY{p}{.}\PY{n+nx}{stringIndex}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{t}\PY{p}{.}\PY{n+nx}{xRatio}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{t}\PY{p}{.}\PY{n+nx}{yRatio}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }\PY{p}{\PYZcb{}}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }\PY{n+nx}{touches}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nx}{currentTouches}\PY{p}{;}
\PY{+w}{    }\PY{p}{\PYZcb{}}

\PY{+w}{    }\PY{k+kd}{function}\PY{+w}{ }\PY{n+nx}{handleTouchMove}\PY{p}{(}\PY{n+nx}{e}\PY{p}{)}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{        }\PY{n+nx}{e}\PY{p}{.}\PY{n+nx}{preventDefault}\PY{p}{(}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }\PY{k+kd}{const}\PY{+w}{ }\PY{n+nx}{currentTouches}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nx}{getPadCoordinates}\PY{p}{(}\PY{n+nx}{e}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }\PY{n+nx}{currentTouches}\PY{p}{.}\PY{n+nx}{forEach}\PY{p}{(}\PY{n+nx}{t}\PY{+w}{ }\PY{p}{=\PYZgt{}}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{            }\PY{n+nx}{updateVoice}\PY{p}{(}\PY{n+nx}{t}\PY{p}{.}\PY{n+nx}{id}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{t}\PY{p}{.}\PY{n+nx}{xRatio}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{t}\PY{p}{.}\PY{n+nx}{yRatio}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{t}\PY{p}{.}\PY{n+nx}{stringIndex}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }\PY{p}{\PYZcb{}}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }\PY{n+nx}{touches}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nx}{currentTouches}\PY{p}{;}
\PY{+w}{    }\PY{p}{\PYZcb{}}

\PY{+w}{    }\PY{k+kd}{function}\PY{+w}{ }\PY{n+nx}{handleTouchEnd}\PY{p}{(}\PY{n+nx}{e}\PY{p}{)}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{        }\PY{n+nx}{e}\PY{p}{.}\PY{n+nx}{preventDefault}\PY{p}{(}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }\PY{k+kd}{const}\PY{+w}{ }\PY{n+nx}{remainingTouches}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nx}{getPadCoordinates}\PY{p}{(}\PY{n+nx}{e}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }\PY{k+kd}{const}\PY{+w}{ }\PY{n+nx}{remainingIds}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{o+ow}{new}\PY{+w}{ }\PY{n+nb}{Set}\PY{p}{(}\PY{n+nx}{remainingTouches}\PY{p}{.}\PY{n+nx}{map}\PY{p}{(}\PY{n+nx}{t}\PY{+w}{ }\PY{p}{=\PYZgt{}}\PY{+w}{ }\PY{n+nx}{t}\PY{p}{.}\PY{n+nx}{id}\PY{p}{)}\PY{p}{)}\PY{p}{;}

\PY{+w}{        }\PY{n+nb}{Object}\PY{p}{.}\PY{n+nx}{keys}\PY{p}{(}\PY{n+nx}{activeVoices}\PY{p}{)}\PY{p}{.}\PY{n+nx}{forEach}\PY{p}{(}\PY{n+nx}{id}\PY{+w}{ }\PY{p}{=\PYZgt{}}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{            }\PY{k}{if}\PY{+w}{ }\PY{p}{(}\PY{o}{!}\PY{n+nx}{remainingIds}\PY{p}{.}\PY{n+nx}{has}\PY{p}{(}\PY{n+nx}{id}\PY{+w}{ }\PY{o}{===}\PY{+w}{ }\PY{l+s+s1}{\PYZsq{}mouse\PYZsq{}}\PY{+w}{ }\PY{o}{?}\PY{+w}{ }\PY{l+s+s1}{\PYZsq{}mouse\PYZsq{}}\PY{+w}{ }\PY{o}{:}\PY{+w}{ }\PY{n+nb}{Number}\PY{p}{(}\PY{n+nx}{id}\PY{p}{)}\PY{p}{)}\PY{p}{)}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{                }\PY{n+nx}{stopVoice}\PY{p}{(}\PY{n+nx}{id}\PY{p}{)}\PY{p}{;}
\PY{+w}{            }\PY{p}{\PYZcb{}}
\PY{+w}{        }\PY{p}{\PYZcb{}}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }\PY{n+nx}{touches}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nx}{remainingTouches}\PY{p}{;}
\PY{+w}{    }\PY{p}{\PYZcb{}}

\PY{+w}{    }\PY{n+nx}{padBox}\PY{p}{.}\PY{n+nx}{addEventListener}\PY{p}{(}\PY{l+s+s1}{\PYZsq{}touchstart\PYZsq{}}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{handleTouchStart}\PY{p}{,}\PY{+w}{ }\PY{p}{\PYZob{}}\PY{+w}{ }\PY{n+nx}{passive}\PY{o}{:}\PY{+w}{ }\PY{k+kc}{false}\PY{+w}{ }\PY{p}{\PYZcb{}}\PY{p}{)}\PY{p}{;}
\PY{+w}{    }\PY{n+nx}{padBox}\PY{p}{.}\PY{n+nx}{addEventListener}\PY{p}{(}\PY{l+s+s1}{\PYZsq{}touchmove\PYZsq{}}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{handleTouchMove}\PY{p}{,}\PY{+w}{ }\PY{p}{\PYZob{}}\PY{+w}{ }\PY{n+nx}{passive}\PY{o}{:}\PY{+w}{ }\PY{k+kc}{false}\PY{+w}{ }\PY{p}{\PYZcb{}}\PY{p}{)}\PY{p}{;}
\PY{+w}{    }\PY{n+nx}{padBox}\PY{p}{.}\PY{n+nx}{addEventListener}\PY{p}{(}\PY{l+s+s1}{\PYZsq{}touchend\PYZsq{}}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{handleTouchEnd}\PY{p}{,}\PY{+w}{ }\PY{p}{\PYZob{}}\PY{+w}{ }\PY{n+nx}{passive}\PY{o}{:}\PY{+w}{ }\PY{k+kc}{false}\PY{+w}{ }\PY{p}{\PYZcb{}}\PY{p}{)}\PY{p}{;}

\PY{+w}{    }\PY{k+kd}{let}\PY{+w}{ }\PY{n+nx}{isMouseDown}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{k+kc}{false}\PY{p}{;}
\PY{+w}{    }\PY{n+nx}{padBox}\PY{p}{.}\PY{n+nx}{addEventListener}\PY{p}{(}\PY{l+s+s1}{\PYZsq{}mousedown\PYZsq{}}\PY{p}{,}\PY{+w}{ }\PY{p}{(}\PY{n+nx}{e}\PY{p}{)}\PY{+w}{ }\PY{p}{=\PYZgt{}}\PY{+w}{ }\PY{p}{\PYZob{}}\PY{+w}{ }\PY{n+nx}{isMouseDown}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{k+kc}{true}\PY{p}{;}\PY{+w}{ }\PY{n+nx}{handleTouchStart}\PY{p}{(}\PY{n+nx}{e}\PY{p}{)}\PY{p}{;}\PY{+w}{ }\PY{p}{\PYZcb{}}\PY{p}{)}\PY{p}{;}
\PY{+w}{    }\PY{n+nb}{window}\PY{p}{.}\PY{n+nx}{addEventListener}\PY{p}{(}\PY{l+s+s1}{\PYZsq{}mousemove\PYZsq{}}\PY{p}{,}\PY{+w}{ }\PY{p}{(}\PY{n+nx}{e}\PY{p}{)}\PY{+w}{ }\PY{p}{=\PYZgt{}}\PY{+w}{ }\PY{p}{\PYZob{}}\PY{+w}{ }\PY{k}{if}\PY{+w}{ }\PY{p}{(}\PY{n+nx}{isMouseDown}\PY{p}{)}\PY{+w}{ }\PY{n+nx}{handleTouchMove}\PY{p}{(}\PY{n+nx}{e}\PY{p}{)}\PY{p}{;}\PY{+w}{ }\PY{p}{\PYZcb{}}\PY{p}{)}\PY{p}{;}
\PY{+w}{    }\PY{n+nb}{window}\PY{p}{.}\PY{n+nx}{addEventListener}\PY{p}{(}\PY{l+s+s1}{\PYZsq{}mouseup\PYZsq{}}\PY{p}{,}\PY{+w}{ }\PY{p}{(}\PY{n+nx}{e}\PY{p}{)}\PY{+w}{ }\PY{p}{=\PYZgt{}}\PY{+w}{ }\PY{p}{\PYZob{}}\PY{+w}{ }\PY{k}{if}\PY{+w}{ }\PY{p}{(}\PY{n+nx}{isMouseDown}\PY{p}{)}\PY{+w}{ }\PY{p}{\PYZob{}}\PY{+w}{ }\PY{n+nx}{isMouseDown}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{k+kc}{false}\PY{p}{;}\PY{+w}{ }\PY{n+nx}{handleTouchEnd}\PY{p}{(}\PY{n+nx}{e}\PY{p}{)}\PY{p}{;}\PY{+w}{ }\PY{p}{\PYZcb{}}\PY{+w}{ }\PY{p}{\PYZcb{}}\PY{p}{)}\PY{p}{;}

\PY{+w}{    }\PY{c+c1}{// Visualizer Loop}
\PY{+w}{    }\PY{k+kd}{function}\PY{+w}{ }\PY{n+nx}{drawPad}\PY{p}{(}\PY{p}{)}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{        }\PY{n+nx}{requestAnimationFrame}\PY{p}{(}\PY{n+nx}{drawPad}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }\PY{n+nx}{ctx}\PY{p}{.}\PY{n+nx}{fillStyle}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{l+s+s1}{\PYZsq{}\PYZsh{}040406\PYZsq{}}\PY{p}{;}
\PY{+w}{        }\PY{n+nx}{ctx}\PY{p}{.}\PY{n+nx}{fillRect}\PY{p}{(}\PY{l+m+mf}{0}\PY{p}{,}\PY{+w}{ }\PY{l+m+mf}{0}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{canvas}\PY{p}{.}\PY{n+nx}{width}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{canvas}\PY{p}{.}\PY{n+nx}{height}\PY{p}{)}\PY{p}{;}

\PY{+w}{        }\PY{c+c1}{// Draw 6 Virtual String Bands (Kitara Style)}
\PY{+w}{        }\PY{k+kd}{const}\PY{+w}{ }\PY{n+nx}{bandHeight}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nx}{canvas}\PY{p}{.}\PY{n+nx}{height}\PY{+w}{ }\PY{o}{/}\PY{+w}{ }\PY{l+m+mf}{6}\PY{p}{;}
\PY{+w}{        }\PY{n+nx}{ctx}\PY{p}{.}\PY{n+nx}{lineWidth}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{l+m+mf}{1}\PY{p}{;}
\PY{+w}{        }\PY{k}{for}\PY{+w}{ }\PY{p}{(}\PY{k+kd}{let}\PY{+w}{ }\PY{n+nx}{i}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{l+m+mf}{0}\PY{p}{;}\PY{+w}{ }\PY{n+nx}{i}\PY{+w}{ }\PY{o}{\PYZlt{}}\PY{+w}{ }\PY{l+m+mf}{6}\PY{p}{;}\PY{+w}{ }\PY{n+nx}{i}\PY{o}{++}\PY{p}{)}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{            }\PY{n+nx}{ctx}\PY{p}{.}\PY{n+nx}{strokeStyle}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{l+s+s1}{\PYZsq{}\PYZsh{}181828\PYZsq{}}\PY{p}{;}
\PY{+w}{            }\PY{n+nx}{ctx}\PY{p}{.}\PY{n+nx}{beginPath}\PY{p}{(}\PY{p}{)}\PY{p}{;}
\PY{+w}{            }\PY{n+nx}{ctx}\PY{p}{.}\PY{n+nx}{moveTo}\PY{p}{(}\PY{l+m+mf}{0}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{i}\PY{+w}{ }\PY{o}{*}\PY{+w}{ }\PY{n+nx}{bandHeight}\PY{p}{)}\PY{p}{;}
\PY{+w}{            }\PY{n+nx}{ctx}\PY{p}{.}\PY{n+nx}{lineTo}\PY{p}{(}\PY{n+nx}{canvas}\PY{p}{.}\PY{n+nx}{width}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{i}\PY{+w}{ }\PY{o}{*}\PY{+w}{ }\PY{n+nx}{bandHeight}\PY{p}{)}\PY{p}{;}
\PY{+w}{            }\PY{n+nx}{ctx}\PY{p}{.}\PY{n+nx}{stroke}\PY{p}{(}\PY{p}{)}\PY{p}{;}

\PY{+w}{            }\PY{c+c1}{// Highlight Active Fretted String Lines}
\PY{+w}{            }\PY{n+nx}{ctx}\PY{p}{.}\PY{n+nx}{strokeStyle}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{l+s+s1}{\PYZsq{}rgba(0, 240, 255, 0.15)\PYZsq{}}\PY{p}{;}
\PY{+w}{            }\PY{n+nx}{ctx}\PY{p}{.}\PY{n+nx}{beginPath}\PY{p}{(}\PY{p}{)}\PY{p}{;}
\PY{+w}{            }\PY{n+nx}{ctx}\PY{p}{.}\PY{n+nx}{moveTo}\PY{p}{(}\PY{l+m+mf}{0}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{i}\PY{+w}{ }\PY{o}{*}\PY{+w}{ }\PY{n+nx}{bandHeight}\PY{+w}{ }\PY{o}{+}\PY{+w}{ }\PY{n+nx}{bandHeight}\PY{+w}{ }\PY{o}{/}\PY{+w}{ }\PY{l+m+mf}{2}\PY{p}{)}\PY{p}{;}
\PY{+w}{            }\PY{n+nx}{ctx}\PY{p}{.}\PY{n+nx}{lineTo}\PY{p}{(}\PY{n+nx}{canvas}\PY{p}{.}\PY{n+nx}{width}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{i}\PY{+w}{ }\PY{o}{*}\PY{+w}{ }\PY{n+nx}{bandHeight}\PY{+w}{ }\PY{o}{+}\PY{+w}{ }\PY{n+nx}{bandHeight}\PY{+w}{ }\PY{o}{/}\PY{+w}{ }\PY{l+m+mf}{2}\PY{p}{)}\PY{p}{;}
\PY{+w}{            }\PY{n+nx}{ctx}\PY{p}{.}\PY{n+nx}{stroke}\PY{p}{(}\PY{p}{)}\PY{p}{;}
\PY{+w}{        }\PY{p}{\PYZcb{}}

\PY{+w}{        }\PY{c+c1}{// Draw Touch Pointers}
\PY{+w}{        }\PY{n+nx}{touches}\PY{p}{.}\PY{n+nx}{forEach}\PY{p}{(}\PY{n+nx}{t}\PY{+w}{ }\PY{p}{=\PYZgt{}}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{            }\PY{c+c1}{// Horizontal / Vertical Crosshair}
\PY{+w}{            }\PY{n+nx}{ctx}\PY{p}{.}\PY{n+nx}{strokeStyle}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{l+s+s1}{\PYZsq{}rgba(255, 0, 85, 0.4)\PYZsq{}}\PY{p}{;}
\PY{+w}{            }\PY{n+nx}{ctx}\PY{p}{.}\PY{n+nx}{beginPath}\PY{p}{(}\PY{p}{)}\PY{p}{;}\PY{+w}{ }\PY{n+nx}{ctx}\PY{p}{.}\PY{n+nx}{moveTo}\PY{p}{(}\PY{n+nx}{t}\PY{p}{.}\PY{n+nx}{x}\PY{p}{,}\PY{+w}{ }\PY{l+m+mf}{0}\PY{p}{)}\PY{p}{;}\PY{+w}{ }\PY{n+nx}{ctx}\PY{p}{.}\PY{n+nx}{lineTo}\PY{p}{(}\PY{n+nx}{t}\PY{p}{.}\PY{n+nx}{x}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{canvas}\PY{p}{.}\PY{n+nx}{height}\PY{p}{)}\PY{p}{;}\PY{+w}{ }\PY{n+nx}{ctx}\PY{p}{.}\PY{n+nx}{stroke}\PY{p}{(}\PY{p}{)}\PY{p}{;}
\PY{+w}{            }\PY{n+nx}{ctx}\PY{p}{.}\PY{n+nx}{beginPath}\PY{p}{(}\PY{p}{)}\PY{p}{;}\PY{+w}{ }\PY{n+nx}{ctx}\PY{p}{.}\PY{n+nx}{moveTo}\PY{p}{(}\PY{l+m+mf}{0}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{t}\PY{p}{.}\PY{n+nx}{y}\PY{p}{)}\PY{p}{;}\PY{+w}{ }\PY{n+nx}{ctx}\PY{p}{.}\PY{n+nx}{lineTo}\PY{p}{(}\PY{n+nx}{canvas}\PY{p}{.}\PY{n+nx}{width}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{t}\PY{p}{.}\PY{n+nx}{y}\PY{p}{)}\PY{p}{;}\PY{+w}{ }\PY{n+nx}{ctx}\PY{p}{.}\PY{n+nx}{stroke}\PY{p}{(}\PY{p}{)}\PY{p}{;}

\PY{+w}{            }\PY{c+c1}{// Glowing Touch Point}
\PY{+w}{            }\PY{n+nx}{ctx}\PY{p}{.}\PY{n+nx}{fillStyle}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{l+s+s1}{\PYZsq{}\PYZsh{}00f0ff\PYZsq{}}\PY{p}{;}
\PY{+w}{            }\PY{n+nx}{ctx}\PY{p}{.}\PY{n+nx}{shadowColor}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{l+s+s1}{\PYZsq{}\PYZsh{}00f0ff\PYZsq{}}\PY{p}{;}
\PY{+w}{            }\PY{n+nx}{ctx}\PY{p}{.}\PY{n+nx}{shadowBlur}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{l+m+mf}{12}\PY{p}{;}
\PY{+w}{            }\PY{n+nx}{ctx}\PY{p}{.}\PY{n+nx}{beginPath}\PY{p}{(}\PY{p}{)}\PY{p}{;}
\PY{+w}{            }\PY{n+nx}{ctx}\PY{p}{.}\PY{n+nx}{arc}\PY{p}{(}\PY{n+nx}{t}\PY{p}{.}\PY{n+nx}{x}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{t}\PY{p}{.}\PY{n+nx}{y}\PY{p}{,}\PY{+w}{ }\PY{l+m+mf}{16}\PY{p}{,}\PY{+w}{ }\PY{l+m+mf}{0}\PY{p}{,}\PY{+w}{ }\PY{n+nb}{Math}\PY{p}{.}\PY{n+nx}{PI}\PY{+w}{ }\PY{o}{*}\PY{+w}{ }\PY{l+m+mf}{2}\PY{p}{)}\PY{p}{;}
\PY{+w}{            }\PY{n+nx}{ctx}\PY{p}{.}\PY{n+nx}{fill}\PY{p}{(}\PY{p}{)}\PY{p}{;}
\PY{+w}{            }\PY{n+nx}{ctx}\PY{p}{.}\PY{n+nx}{shadowBlur}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{l+m+mf}{0}\PY{p}{;}
\PY{+w}{        }\PY{p}{\PYZcb{}}\PY{p}{)}\PY{p}{;}
\PY{+w}{    }\PY{p}{\PYZcb{}}
\PY{+w}{    }\PY{n+nx}{drawPad}\PY{p}{(}\PY{p}{)}\PY{p}{;}

\PY{+w}{    }\PY{c+c1}{// UI Listeners}
\PY{+w}{    }\PY{n+nb}{document}\PY{p}{.}\PY{n+nx}{getElementById}\PY{p}{(}\PY{l+s+s1}{\PYZsq{}delay\PYZhy{}btn\PYZsq{}}\PY{p}{)}\PY{p}{.}\PY{n+nx}{addEventListener}\PY{p}{(}\PY{l+s+s1}{\PYZsq{}click\PYZsq{}}\PY{p}{,}\PY{+w}{ }\PY{p}{(}\PY{n+nx}{e}\PY{p}{)}\PY{+w}{ }\PY{p}{=\PYZgt{}}\PY{+w}{ }\PY{p}{\PYZob{}}
\PY{+w}{        }\PY{n+nx}{delayActive}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{o}{!}\PY{n+nx}{delayActive}\PY{p}{;}
\PY{+w}{        }\PY{n+nx}{delayFeedback}\PY{p}{.}\PY{n+nx}{gain}\PY{p}{.}\PY{n+nx}{value}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{n+nx}{delayActive}\PY{+w}{ }\PY{o}{?}\PY{+w}{ }\PY{l+m+mf}{0.4}\PY{+w}{ }\PY{o}{:}\PY{+w}{ }\PY{l+m+mf}{0}\PY{p}{;}
\PY{+w}{        }\PY{n+nx}{e}\PY{p}{.}\PY{n+nx}{target}\PY{p}{.}\PY{n+nx}{innerText}\PY{+w}{ }\PY{o}{=}\PY{+w}{ }\PY{l+s+sb}{`}\PY{l+s+sb}{DELAY: }\PY{l+s+si}{\PYZdl{}\PYZob{}}\PY{n+nx}{delayActive}\PY{+w}{ }\PY{o}{?}\PY{+w}{ }\PY{l+s+s1}{\PYZsq{}ON\PYZsq{}}\PY{+w}{ }\PY{o}{:}\PY{+w}{ }\PY{l+s+s1}{\PYZsq{}OFF\PYZsq{}}\PY{l+s+si}{\PYZcb{}}\PY{l+s+sb}{`}\PY{p}{;}
\PY{+w}{        }\PY{n+nx}{e}\PY{p}{.}\PY{n+nx}{target}\PY{p}{.}\PY{n+nx}{classList}\PY{p}{.}\PY{n+nx}{toggle}\PY{p}{(}\PY{l+s+s1}{\PYZsq{}active\PYZsq{}}\PY{p}{,}\PY{+w}{ }\PY{n+nx}{delayActive}\PY{p}{)}\PY{p}{;}
\PY{+w}{    }\PY{p}{\PYZcb{}}\PY{p}{)}\PY{p}{;}
\PY{p}{\PYZlt{}}\PY{p}{/}\PY{n+nt}{script}\PY{p}{\PYZgt{}}
\PY{p}{\PYZlt{}}\PY{p}{/}\PY{n+nt}{body}\PY{p}{\PYZgt{}}
\PY{p}{\PYZlt{}}\PY{p}{/}\PY{n+nt}{html}\PY{p}{\PYZgt{}}
\end{Verbatim}