.ScaleModeFretboardVisual_fretboardContainer__MrjCh{--cell:28px;width:100%;display:flex;align-items:center;justify-content:center;padding:8px 10px}@media (max-width:640px){.ScaleModeFretboardVisual_fretboardContainer__MrjCh{padding:4px 6px}}.ScaleModeFretboardVisual_fretboardGrid__Wy_yT{display:grid;position:relative;gap:0;background:transparent;grid-template-columns:repeat(var(--display-frets),var(--cell));grid-template-rows:repeat(var(--display-strings),var(--cell));width:calc(var(--display-frets) * var(--cell));margin:0 auto;border-radius:14px;overflow:hidden}.ScaleModeFretboardVisual_fretboardGrid__Wy_yT:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--cell) / 2 - 1px),#c9c9c9 calc(var(--cell) / 2 - 1px),#c9c9c9 calc(var(--cell) / 2 + 1px),transparent calc(var(--cell) / 2 + 1px),transparent var(--cell));pointer-events:none;z-index:2}.ScaleModeFretboardVisual_fret__9Qf4C{width:var(--cell);height:var(--cell);display:flex;align-items:center;justify-content:center;position:relative}.ScaleModeFretboardVisual_fret__9Qf4C:before{content:"";position:absolute;top:0;bottom:0;right:0;width:calc(var(--cell) / 12);background:linear-gradient(90deg,#b6b6b6,#e2e2e2,#b6b6b6);transform:translateX(50%);z-index:1}.ScaleModeFretboardVisual_gameButton__CeWIj,.ScaleModeFretboardVisual_noteContent__1iRxH{width:calc(var(--cell) * .75);height:calc(var(--cell) * .75);font-size:calc(var(--cell) * .25);border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:3}.ScaleModeFretboardVisual_scaleNote__uwrAE{font-weight:700;color:#fff;outline:3px solid #d9d9d9;background-color:var(--hl-color,transparent)}.ScaleModeFretboardVisual_gameButton__CeWIj{--primary:255,90,120;--secondary:150,50,60;border:none;outline:3px solid rgb(var(--primary));background:transparent;transition:.3s;touch-action:manipulation;padding:0}.ScaleModeFretboardVisual_gameButtonCurrentNote__652A6{--primary:0,128,0;--secondary:0,64,0}.ScaleModeFretboardVisual_gameButtonNextNote__VP_zE{--primary:255,165,0;--secondary:150,100,0}.ScaleModeFretboardVisual_back__Mhjhg{background:rgb(var(--secondary));border-radius:50%;position:absolute;inset:0}.ScaleModeFretboardVisual_front__8gaf_{background:linear-gradient(0deg,rgba(var(--primary),.6) 20%,rgba(var(--primary),1) 50%);border:1px solid rgb(var(--secondary));border-radius:50%;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:600;transform:translateY(-15%);box-shadow:0 .5em 1em -.2em rgba(var(--secondary),.5);transition:.15s;color:#fff}