.note-glow{box-shadow:0 2px 8px #0000001f,0 0 0 4px #ffd70099,0 0 12px 4px #ffe066e6,0 0 24px 8px #ffd70066!important}.note-dim{opacity:.22;filter:blur(1px) grayscale(75%)}.note-glow-green{box-shadow:0 2px 8px #0000001f,0 0 0 4px #4caf5099,0 0 12px 4px #81c784e6,0 0 24px 8px #4caf5066!important}.note-glow-grey{box-shadow:0 2px 8px #0000001f,0 0 0 4px #9e9e9e99,0 0 12px 4px #bdbdbde6,0 0 24px 8px #9e9e9e66!important}.piano-keyboard-container{width:100%;max-width:100%;margin:20px 0;overflow-x:auto}.piano-keyboard-container .piano-keyboard{display:flex;flex-direction:row;position:relative;height:280px;margin:20px 0;-webkit-user-select:none;user-select:none;max-width:100%;border-radius:4px;overflow:visible}.piano-keyboard-container .piano-keyboard:disabled{background-color:#f0f0f0;color:#aaa;cursor:not-allowed}.piano-keyboard-container .piano-octave{display:flex;flex-direction:row;position:relative;height:220px;min-width:var(--piano-octave-width, 420px);overflow:visible}.piano-keyboard-container .black-keys-container{position:absolute;top:0;left:0;height:140px;width:100%;display:flex;flex-direction:row;pointer-events:none;z-index:2}.piano-keyboard-container .white-key{position:relative;width:var(--white-key-width);height:var(--white-key-height, 240px)!important;margin:0 1px;background:#fff;border:1px solid #bbb;border-radius:0 0 12px 12px;box-shadow:0 2px 4px #00000014;z-index:1;display:flex;align-items:flex-end;justify-content:center;overflow:visible}.piano-keyboard-container .white-key.selected,.piano-keyboard-container .white-key.scale,.piano-keyboard-container .white-key.root{background:#fff}.piano-keyboard-container .white-key:hover{cursor:pointer!important}.piano-keyboard-container .black-key{position:absolute;width:var(--black-key-width, 45px)!important;height:var(--black-key-height, 155px)!important;top:0;left:var(--black-key-left, 0);transform:translate(-50%);margin-left:0;background:#222;border-radius:0 0 10px 10px;box-shadow:0 2px 8px #0000002e;z-index:3;display:flex;align-items:flex-end;justify-content:center;pointer-events:auto;overflow:visible}.piano-keyboard-container .black-key.selected,.piano-keyboard-container .black-key.scale,.piano-keyboard-container .black-key.root{background:#222}.piano-keyboard-container .black-key:hover{cursor:pointer!important}.piano-keyboard-container .note-circle{position:absolute;left:50%;transform:translate(-50%,-50%);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;pointer-events:none;background:var(--note-circle-bg);outline:var(--note-circle-outline);outline-offset:var(--note-circle-outline-offset);color:var(--note-circle-color);box-shadow:var(--note-circle-shadow);filter:var(--note-circle-filter);opacity:var(--note-circle-opacity);transition:opacity .05s linear,box-shadow .05s linear,filter .05s linear}.piano-keyboard-container .white-key .note-circle{top:82%;width:38px;height:38px}.piano-keyboard-container .black-key .note-circle{top:50%;width:36px;height:36px}.piano-keyboard-container .key-label{position:absolute;left:22px;bottom:-22px}.piano-keyboard-container .note-interval-indicator{position:absolute;left:calc(50% + 18px);top:calc(82% - 26px);transform:translate(-50%,-50%);min-width:34px;padding:2px 6px;border-radius:10px;background:var(--indicator-color, rgb(220, 225, 234));color:#0c1018f2;font-size:11px;font-weight:700;text-align:center;pointer-events:none;z-index:30;border:1px solid rgba(16,22,34,.3);box-shadow:0 2px 8px #080b1240}.piano-keyboard-container .note-interval-indicator-black{left:calc(50% + 17px);top:calc(50% - 22px)}.piano-keyboard-container .piano-octave:first-of-type .white-key:first-of-type{margin-left:0}.piano-keyboard-container .piano-octave:last-of-type .white-key:last-of-type{margin-right:0}.octave-navigation{margin-top:12px;text-align:center}.octave-navigation-label{margin:0 12px}@media (max-width: 768px){.piano-keyboard-container,.piano-keyboard-container .piano-keyboard{margin:12px 0}.octave-navigation{position:sticky;left:0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px}.octave-navigation .fretboard-btn{padding:10px 14px}.octave-navigation-label{margin:0}}