.Fretboard_fretboardContainer__k5NKD{--cell:clamp(22px,5vw,48px);--display-frets:15;--display-strings:6;--fretboard-label-gap-units:0.24;--fretboard-label-row-units:0.72;width:100%;flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 10px;overflow:hidden}.Fretboard_fretboardGridWrapper__xMbLq,.Fretboard_fretboardGrid__aMqKz{position:relative;width:calc(var(--display-frets, 15) * var(--cell, 28px));max-width:100%;margin:0 auto}.Fretboard_fretboardGrid__aMqKz{display:grid;gap:0;background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(0,0,0,.18)),linear-gradient(180deg,#e7bf8b,#ffcfac,#e7bf8b);background-size:calc(100% - var(--cell, 28px)) 100%,calc(100% - var(--cell, 28px)) 100%;background-position:var(--cell,28px) 0,var(--cell,28px) 0;background-repeat:no-repeat;grid-template-columns:repeat(var(--display-frets,15),var(--cell,28px));grid-template-rows:repeat(var(--display-strings,6),var(--cell,28px));border-radius:calc(var(--cell, 28px) * .4);box-shadow:0 14px 14px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -12px 20px rgba(0,0,0,.22),inset 0 -4px 10px rgba(255,255,255,.12);overflow:hidden;box-sizing:border-box;isolation:isolate;--inlay-size:calc(var(--cell, 28px) * 0.16);--inlay-glow:calc(var(--cell, 28px) * 0.2);--inlay-mid:calc(var(--cell, 28px) * 3);--inlay-hi:calc(var(--cell, 28px) * 2);--inlay-lo:calc(var(--cell, 28px) * 4);--inlay-color:rgba(0,0,0,0.65);--grain-light:rgba(255,255,255,0.16);--grain-dark:rgba(0,0,0,0.1)}.Fretboard_fretboardGrid__aMqKz.Fretboard_theme__PDBMC{background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(0,0,0,.15)),var(--fretboard-bg,rgb(var(--background)));background-size:calc(100% - var(--cell, 28px)) 100%,calc(100% - var(--cell, 28px)) 100%;background-position:var(--cell,28px) 0,var(--cell,28px) 0;background-repeat:no-repeat;box-shadow:0 8px 8px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.12),inset 0 -10px 18px rgba(0,0,0,.015);--inlay-color:rgba(0,0,0,0.25);--grain-light:rgba(255,255,255,0.06);--grain-dark:rgba(0,0,0,0.08)}.dark .Fretboard_fretboardGrid__aMqKz.Fretboard_theme__PDBMC{--inlay-color:rgba(255,255,255,0.32)}.Fretboard_fretboardGrid__aMqKz:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(circle at calc(var(--cell, 28px) * 3.5) var(--inlay-mid),var(--inlay-color) 0,var(--inlay-color) var(--inlay-size),transparent var(--inlay-glow)),radial-gradient(circle at calc(var(--cell, 28px) * 5.5) var(--inlay-mid),var(--inlay-color) 0,var(--inlay-color) var(--inlay-size),transparent var(--inlay-glow)),radial-gradient(circle at calc(var(--cell, 28px) * 7.5) var(--inlay-mid),var(--inlay-color) 0,var(--inlay-color) var(--inlay-size),transparent var(--inlay-glow)),radial-gradient(circle at calc(var(--cell, 28px) * 9.5) var(--inlay-mid),var(--inlay-color) 0,var(--inlay-color) var(--inlay-size),transparent var(--inlay-glow)),radial-gradient(circle at calc(var(--cell, 28px) * 12.5) var(--inlay-hi),var(--inlay-color) 0,var(--inlay-color) var(--inlay-size),transparent var(--inlay-glow)),radial-gradient(circle at calc(var(--cell, 28px) * 12.5) var(--inlay-lo),var(--inlay-color) 0,var(--inlay-color) var(--inlay-size),transparent var(--inlay-glow)),radial-gradient(circle at calc(var(--cell, 28px) * 15.5) var(--inlay-mid),var(--inlay-color) 0,var(--inlay-color) var(--inlay-size),transparent var(--inlay-glow)),radial-gradient(circle at calc(var(--cell, 28px) * 17.5) var(--inlay-mid),var(--inlay-color) 0,var(--inlay-color) var(--inlay-size),transparent var(--inlay-glow)),radial-gradient(circle at calc(var(--cell, 28px) * 19.5) var(--inlay-mid),var(--inlay-color) 0,var(--inlay-color) var(--inlay-size),transparent var(--inlay-glow)),radial-gradient(circle at calc(var(--cell, 28px) * 21.5) var(--inlay-mid),var(--inlay-color) 0,var(--inlay-color) var(--inlay-size),transparent var(--inlay-glow)),radial-gradient(circle at calc(var(--cell, 28px) * 24.5) var(--inlay-hi),var(--inlay-color) 0,var(--inlay-color) var(--inlay-size),transparent var(--inlay-glow)),radial-gradient(circle at calc(var(--cell, 28px) * 24.5) var(--inlay-lo),var(--inlay-color) 0,var(--inlay-color) var(--inlay-size),transparent var(--inlay-glow)),repeating-linear-gradient(90deg,var(--grain-light) 0,var(--grain-light) 3px,var(--grain-dark) 6px,var(--grain-dark) 9px);opacity:.9}.Fretboard_fretboardOverlay__yBE_k{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--display-frets,15),var(--cell,28px));grid-template-rows:repeat(var(--display-strings,6),var(--cell,28px));pointer-events:none;z-index:4}.Fretboard_fretboardOverlay__yBE_k .Fretboard_gameButton__CYeMi{pointer-events:auto;align-self:center;justify-self:center}.Fretboard_barreOverlay__aBj_i{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--display-frets,15),var(--cell,28px));grid-template-rows:repeat(var(--display-strings,6),var(--cell,28px));pointer-events:none;z-index:3}.Fretboard_barreSpan__BPMqq{align-self:stretch;justify-self:center;margin:calc(var(--cell, 28px) * .08) 0;width:calc(var(--cell, 28px) * .75);border-radius:999px;background:#d3d7df;opacity:.75;box-shadow:inset 1px 0 0 rgba(255,255,255,.2),inset -1px 0 0 rgba(0,0,0,.25),0 2px 6px rgba(0,0,0,.28)}.dark .Fretboard_barreSpan__BPMqq{background:#7f8894;opacity:.8}.Fretboard_fretboardGrid__aMqKz:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--cell, 28px)/2 - 1.5px),rgba(255,255,255,.75) calc(var(--cell, 28px)/2 - 1.5px),rgba(160,160,160,.85) calc(var(--cell, 28px)/2),rgba(60,60,60,.6) calc(var(--cell, 28px)/2 + 1.5px),transparent calc(var(--cell, 28px)/2 + 1.5px),transparent var(--cell,28px));pointer-events:none;z-index:2}.Fretboard_fret__DmumF{width:var(--cell,28px);height:var(--cell,28px);display:flex;align-items:center;justify-content:center;position:relative}.Fretboard_nutCell__I7_Mj{background:var(--nut-cell-bg,transparent)}.Fretboard_fret__DmumF:before{content:"";position:absolute;top:0;bottom:0;right:0;width:calc(var(--cell, 28px)/14);background:linear-gradient(90deg,#5c5c5c,#c0c0c0 45%,#6f6f6f);transform:translateX(50%);z-index:1;box-shadow:1px 0 2px rgba(0,0,0,.2)}.Fretboard_fretboardGrid__aMqKz.Fretboard_theme__PDBMC .Fretboard_fret__DmumF:before{background:linear-gradient(90deg,#d0d0d0,#959595 100%,#d0d0d0)}.dark .Fretboard_fretboardGrid__aMqKz.Fretboard_theme__PDBMC .Fretboard_fret__DmumF:before{background:linear-gradient(90deg,#5c5c5c,#c0c0c0 45%,#6f6f6f)}.Fretboard_gameButton__CYeMi,.Fretboard_noteContent__TO21V{width:calc(var(--cell, 28px)*.75);height:calc(var(--cell, 28px)*.75);font-size:calc(var(--cell, 28px)*.25);line-height:1;box-sizing:border-box;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;user-select:none;cursor:pointer;z-index:3}.Fretboard_scaleNote__87nYH{font-weight:700;color:#fff;outline:2px solid rgb(var(--background-inset));background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.32),rgba(255,255,255,.08) 45%,transparent 46%),radial-gradient(circle at 70% 80%,rgba(0,0,0,.2),transparent 55%),var(--hl-color,transparent);box-shadow:0 10px 16px rgba(0,0,0,.35),inset 0 0 0 2px rgba(255,255,255,.08);text-shadow:0 1px 2px rgba(0,0,0,.65)}.Fretboard_gameButton__CYeMi{--primary:255,90,120;--secondary:150,50,60;--ring:var(--primary);border:none;outline:3px solid rgb(var(--ring));background:transparent;touch-action:manipulation}.Fretboard_gameButtonCurrentNote__ng_Zc{--primary:0,128,0;--secondary:0,64,0;z-index:6}.Fretboard_gameButtonNextNote__y1hmG{--primary:255,165,0;--secondary:150,100,0;z-index:5}.Fretboard_gameButtonCurrentMatched__DFWV1{box-shadow:0 0 0 1px rgba(0,128,0,.3),0 0 12px rgba(0,128,0,.24);filter:brightness(1.06)}.Fretboard_gameButtonCurrentWithNext__PHqAH{--ring:255,165,0}.Fretboard_gameButtonCurrentWithNextMatched__n6cav{--ring:0,128,0;box-shadow:0 0 0 1px rgba(0,128,0,.28),0 0 10px rgba(0,128,0,.22)}.Fretboard_gameButtonPreviewMuted__gJMGT{opacity:.5}.Fretboard_gameButtonSequenceHit__10nNr{animation:var(--sequence-hit-ring-name,gameButtonSequenceRingA) .22s ease-out 1}.Fretboard_gameButtonSequenceHit__10nNr .Fretboard_front__d316Q{animation:var(--sequence-hit-front-name,gameButtonSequenceHitA) .22s cubic-bezier(.22,.9,.3,1) 1}.Fretboard_back__ZBhuM{background:linear-gradient(180deg,rgba(var(--primary),.62) 0,rgba(var(--secondary),.94) 72%,rgba(var(--secondary),1) 100%);border-radius:50%;position:absolute;inset:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 4px rgba(0,0,0,.28)}.Fretboard_front__d316Q{background:radial-gradient(circle at 30% 18%,rgba(255,255,255,.42) 0,rgba(255,255,255,.1) 35%,rgba(255,255,255,0) 42%),linear-gradient(180deg,rgba(var(--primary),1) 0,rgba(var(--primary),.94) 52%,rgba(var(--primary),.86) 100%);border:none;border-radius:50%;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:600;transform:translate3d(0,-15%,0);box-shadow:0 .42em .84em -.24em rgba(var(--secondary),.38),inset 0 1px 0 rgba(255,255,255,.24);transition:transform .15s ease;will-change:transform;color:#fff}.Fretboard_gameButton__CYeMi:active .Fretboard_front__d316Q{transform:translateZ(0)}@keyframes Fretboard_gameButtonSequenceHitA__tD9fU{0%{transform:translate3d(0,-15%,0)}46%{transform:translateZ(0)}to{transform:translate3d(0,-15%,0)}}@keyframes Fretboard_gameButtonSequenceHitB__azneR{0%{transform:translate3d(0,-15%,0)}46%{transform:translateZ(0)}to{transform:translate3d(0,-15%,0)}}@keyframes Fretboard_gameButtonSequenceRingA__9ZhZw{0%{filter:brightness(1)}46%{filter:brightness(1.18)}to{filter:brightness(1)}}@keyframes Fretboard_gameButtonSequenceRingB__vu7pR{0%{filter:brightness(1)}46%{filter:brightness(1.18)}to{filter:brightness(1)}}.Fretboard_gameButton__CYeMi[data-feedback=correct]:after,.Fretboard_noteContent__TO21V[data-feedback=correct]:after{content:"";position:absolute;inset:0;border-radius:50%;background:lime;opacity:.5;animation:Fretboard_fadeOut__pYt6w .5s forwards}.Fretboard_gameButton__CYeMi[data-feedback=incorrect]:after,.Fretboard_noteContent__TO21V[data-feedback=incorrect]:after{content:"";position:absolute;inset:0;border-radius:50%;background:red;opacity:.5;animation:Fretboard_fadeOut__pYt6w .5s forwards}@keyframes Fretboard_fadeOut__pYt6w{0%{opacity:.5}to{opacity:0}}.Fretboard_fretNumbers__KK5D_{display:grid;grid-template-columns:repeat(var(--display-frets,15),var(--cell,28px));grid-auto-rows:calc(var(--cell, 28px) * var(--fretboard-label-row-units, .72));position:relative;width:calc(var(--display-frets, 15) * var(--cell, 28px));height:calc(var(--cell, 28px) * var(--fretboard-label-row-units, .72));margin:calc(var(--cell, 28px) * var(--fretboard-label-gap-units, .24)) auto 0}.Fretboard_fretNumberOnboardingSpan__I1fAn{position:absolute;top:0;bottom:0;pointer-events:none;z-index:0}.Fretboard_fretNumber__bfUDH{min-height:calc(var(--cell, 28px) * var(--fretboard-label-row-units, .72));display:flex;align-items:center;justify-content:center;text-align:center;font-size:calc(var(--cell, 28px)*.5);line-height:1;color:rgb(var(--text-primary));position:relative;z-index:1}.Fretboard_fretNumberActive__YQMDK{filter:brightness(100%)}.Fretboard_fretNumberInactive__Tn3_H{filter:invert(.75)}.Fretboard_fretNumberPosition__6xLba{color:limegreen;font-weight:600;filter:none}.Fretboard_dimmed__ZbtxP{opacity:.65;filter:grayscale(.15)}.Fretboard_nextDimmed__GF02g{opacity:.5;filter:grayscale(.5)}.Fretboard_jamPreviewDimmed__oWwFj{opacity:.5}