*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent}body,html{width:100%;height:100%}body{margin:0;padding:0;text-rendering:geometricPrecision;font-family:Roboto,sans-serif;font-weight:400;font-size:clamp(16px,1.1vw,26px);line-height:1.2;color:#000}.toolbar-holder{padding:10px 0;position:sticky;top:0;background-color:#fff;z-index:999999}.toolbar-holder .toolbar-flex{width:96%;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.toolbar-holder .toolbar-flex .input-element{padding:15px;flex-basis:auto;min-width:250px}.fretboard-section{width:100%;margin:30px 0;overflow-y:scroll;background-color:#b88e72;border-top:2px solid #eee8aa;border-bottom:2px solid #eee8aa;box-shadow:0 0 10px 1px rgba(0,0,0,.36)}.fretboard-section .fretboard{display:flex;align-items:flex-start;justify-content:flex-start;padding-left:20px}.fretboard-section .fretboard .fret{height:200px;flex-basis:10%;min-width:130px;flex-shrink:0;border-left:3px solid #848789;border-radius:5px;position:relative}.fretboard-section .fretboard .fret .string{width:102%;background-color:#b5b6b5;height:6px;position:absolute;left:0;top:8%;z-index:40}.fretboard-section .fretboard .fret .string .note-value{position:absolute;top:50%;left:50%;width:20px;height:20px;border-radius:200px;transform:translate(-50%,-50%);z-index:50;color:#000;text-align:center;padding:2px;box-shadow:0 0 10px 1px rgba(0,0,0,.36)}.fretboard-section .fretboard .fret .string .note-value.root{background-color:red;border:2px solid red}.fretboard-section .fretboard .fret .string .note-value.b_second{background-color:orange;border:2px solid orange}.fretboard-section .fretboard .fret .string .note-value.second{background-color:#ff0;border:2px solid #ff0}.fretboard-section .fretboard .fret .string .note-value.b_third{background-color:#7fff00;border:2px solid #7fff00}.fretboard-section .fretboard .fret .string .note-value.third{background-color:green;border:2px solid green}.fretboard-section .fretboard .fret .string .note-value.fourth{background-color:#00ff7f;border:2px solid #00ff7f}.fretboard-section .fretboard .fret .string .note-value.b_fifthxsharp_fourth{background-color:cyan;border:2px solid cyan}.fretboard-section .fretboard .fret .string .note-value.fifth{background-color:azure;border:2px solid azure}.fretboard-section .fretboard .fret .string .note-value.b_sixth{background-color:blue;border:2px solid blue}.fretboard-section .fretboard .fret .string .note-value.sixth{background-color:violet;border:2px solid violet}.fretboard-section .fretboard .fret .string .note-value.b_seventh{background-color:#f0f;border:2px solid #f0f}.fretboard-section .fretboard .fret .string .note-value.seventh{background-color:pink;border:2px solid pink}.fretboard-section .fretboard .fret .string:nth-child(2){height:5px;top:24%}.fretboard-section .fretboard .fret .string:nth-child(3){height:4px;top:40%}.fretboard-section .fretboard .fret .string:nth-child(4){height:3px;top:58%}.fretboard-section .fretboard .fret .string:nth-child(5){height:2px;top:75%}.fretboard-section .fretboard .fret .string:last-child{height:1px;top:92%}.fretboard-section .fretboard .fret.fret-zero{min-width:auto;width:0;flex-basis:auto;border:none}.fretboard-section .fretboard .fret.fret-zero .string .note-value{background-color:transparent}.fretboard-section .fretboard .fret:last-child{border-right:3px solid grey}.fretboard-section .fretboard .fret:nth-child(10):after,.fretboard-section .fretboard .fret:nth-child(16):after,.fretboard-section .fretboard .fret:nth-child(18):after,.fretboard-section .fretboard .fret:nth-child(20):after,.fretboard-section .fretboard .fret:nth-child(22):after,.fretboard-section .fretboard .fret:nth-child(4):after,.fretboard-section .fretboard .fret:nth-child(6):after,.fretboard-section .fretboard .fret:nth-child(8):after{content:"";position:absolute;width:20px;height:20px;background-color:#fff;border-radius:200px;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10}.fretboard-section .fretboard .fret:nth-child(13):after,.fretboard-section .fretboard .fret:nth-child(13):before{content:"";position:absolute;width:20px;height:20px;background-color:#fff;border-radius:200px;top:66%;left:50%;transform:translate(-50%,-50%);z-index:10}.fretboard-section .fretboard .fret:nth-child(13):before{top:33%}.modes-table{width:96%;margin:0 auto;padding-bottom:30px}@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:300;src:url(/_next/static/media/roboto-cyrillic-ext-300-normal.a09ffd2f.woff2) format("woff2"),url(/_next/static/media/roboto-cyrillic-ext-300-normal.6f2be5c4.woff) format("woff");unicode-range:u+0460-052f,u+1c80-1c88,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:300;src:url(/_next/static/media/roboto-cyrillic-300-normal.59a71b9c.woff2) format("woff2"),url(/_next/static/media/roboto-cyrillic-300-normal.7a991871.woff) format("woff");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:300;src:url(/_next/static/media/roboto-greek-ext-300-normal.1e592275.woff2) format("woff2"),url(/_next/static/media/roboto-greek-ext-300-normal.48d247e3.woff) format("woff");unicode-range:u+1f??}@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:300;src:url(/_next/static/media/roboto-greek-300-normal.d89041b1.woff2) format("woff2"),url(/_next/static/media/roboto-greek-300-normal.3d62b6f4.woff) format("woff");unicode-range:u+0370-0377,u+037a-037f,u+0384-038a,u+038c,u+038e-03a1,u+03a3-03ff}@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:300;src:url(/_next/static/media/roboto-vietnamese-300-normal.d3306554.woff2) format("woff2"),url(/_next/static/media/roboto-vietnamese-300-normal.8c4d36f4.woff) format("woff");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:300;src:url(/_next/static/media/roboto-latin-ext-300-normal.62df8e18.woff2) format("woff2"),url(/_next/static/media/roboto-latin-ext-300-normal.937a484c.woff) format("woff");unicode-range:u+0100-02af,u+0304,u+0308,u+0329,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:300;src:url(/_next/static/media/roboto-latin-300-normal.434c501c.woff2) format("woff2"),url(/_next/static/media/roboto-latin-300-normal.c8de52c3.woff) format("woff");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:400;src:url(/_next/static/media/roboto-cyrillic-ext-400-normal.c8c031de.woff2) format("woff2"),url(/_next/static/media/roboto-cyrillic-ext-400-normal.dade5e89.woff) format("woff");unicode-range:u+0460-052f,u+1c80-1c88,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:400;src:url(/_next/static/media/roboto-cyrillic-400-normal.cc800fd1.woff2) format("woff2"),url(/_next/static/media/roboto-cyrillic-400-normal.5858323b.woff) format("woff");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:400;src:url(/_next/static/media/roboto-greek-ext-400-normal.b6f74950.woff2) format("woff2"),url(/_next/static/media/roboto-greek-ext-400-normal.bd6455e3.woff) format("woff");unicode-range:u+1f??}@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:400;src:url(/_next/static/media/roboto-greek-400-normal.bb96a486.woff2) format("woff2"),url(/_next/static/media/roboto-greek-400-normal.1cc7496c.woff) format("woff");unicode-range:u+0370-0377,u+037a-037f,u+0384-038a,u+038c,u+038e-03a1,u+03a3-03ff}@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:400;src:url(/_next/static/media/roboto-vietnamese-400-normal.89d07565.woff2) format("woff2"),url(/_next/static/media/roboto-vietnamese-400-normal.7a893d1e.woff) format("woff");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:400;src:url(/_next/static/media/roboto-latin-ext-400-normal.3806f052.woff2) format("woff2"),url(/_next/static/media/roboto-latin-ext-400-normal.90150948.woff) format("woff");unicode-range:u+0100-02af,u+0304,u+0308,u+0329,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:400;src:url(/_next/static/media/roboto-latin-400-normal.4b70338a.woff2) format("woff2"),url(/_next/static/media/roboto-latin-400-normal.871c3cee.woff) format("woff");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:500;src:url(/_next/static/media/roboto-cyrillic-ext-500-normal.8cfbfbd3.woff2) format("woff2"),url(/_next/static/media/roboto-cyrillic-ext-500-normal.f6e1854c.woff) format("woff");unicode-range:u+0460-052f,u+1c80-1c88,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:500;src:url(/_next/static/media/roboto-cyrillic-500-normal.a9a86642.woff2) format("woff2"),url(/_next/static/media/roboto-cyrillic-500-normal.259c166b.woff) format("woff");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:500;src:url(/_next/static/media/roboto-greek-ext-500-normal.21b7c92d.woff2) format("woff2"),url(/_next/static/media/roboto-greek-ext-500-normal.19f91f1a.woff) format("woff");unicode-range:u+1f??}@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:500;src:url(/_next/static/media/roboto-greek-500-normal.a2b67360.woff2) format("woff2"),url(/_next/static/media/roboto-greek-500-normal.e14b7a3b.woff) format("woff");unicode-range:u+0370-0377,u+037a-037f,u+0384-038a,u+038c,u+038e-03a1,u+03a3-03ff}@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:500;src:url(/_next/static/media/roboto-vietnamese-500-normal.630c5ad5.woff2) format("woff2"),url(/_next/static/media/roboto-vietnamese-500-normal.619287de.woff) format("woff");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:500;src:url(/_next/static/media/roboto-latin-ext-500-normal.c0cd4364.woff2) format("woff2"),url(/_next/static/media/roboto-latin-ext-500-normal.ef28e132.woff) format("woff");unicode-range:u+0100-02af,u+0304,u+0308,u+0329,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:500;src:url(/_next/static/media/roboto-latin-500-normal.f87c7e09.woff2) format("woff2"),url(/_next/static/media/roboto-latin-500-normal.1e8de118.woff) format("woff");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:700;src:url(/_next/static/media/roboto-cyrillic-ext-700-normal.1192b38e.woff2) format("woff2"),url(/_next/static/media/roboto-cyrillic-ext-700-normal.736e673b.woff) format("woff");unicode-range:u+0460-052f,u+1c80-1c88,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:700;src:url(/_next/static/media/roboto-cyrillic-700-normal.e81332fe.woff2) format("woff2"),url(/_next/static/media/roboto-cyrillic-700-normal.43cee8b3.woff) format("woff");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:700;src:url(/_next/static/media/roboto-greek-ext-700-normal.69426761.woff2) format("woff2"),url(/_next/static/media/roboto-greek-ext-700-normal.0ce1ebd0.woff) format("woff");unicode-range:u+1f??}@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:700;src:url(/_next/static/media/roboto-greek-700-normal.cb4e4e5d.woff2) format("woff2"),url(/_next/static/media/roboto-greek-700-normal.7f7357dc.woff) format("woff");unicode-range:u+0370-0377,u+037a-037f,u+0384-038a,u+038c,u+038e-03a1,u+03a3-03ff}@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:700;src:url(/_next/static/media/roboto-vietnamese-700-normal.031b9314.woff2) format("woff2"),url(/_next/static/media/roboto-vietnamese-700-normal.a995d3bd.woff) format("woff");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:700;src:url(/_next/static/media/roboto-latin-ext-700-normal.4a386aca.woff2) format("woff2"),url(/_next/static/media/roboto-latin-ext-700-normal.3f48d5c9.woff) format("woff");unicode-range:u+0100-02af,u+0304,u+0308,u+0329,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:700;src:url(/_next/static/media/roboto-latin-700-normal.031cf8d6.woff2) format("woff2"),url(/_next/static/media/roboto-latin-700-normal.deaeec31.woff) format("woff");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}