:root{--key-width:46px}.instrument-stage.piano-mode{display:flex;height:var(--piano-height,180px);background:#111;padding:10px 0 10px 10px;border:4px solid #222;gap:1px;align-items:flex-start;width:max-content!important;min-width:auto!important;overflow:visible!important;transition:height .1s ease-out;--p-note-size:calc(var(--key-width) * 0.55)}.piano-key{position:relative;border-radius:0 0 4px 4px;cursor:pointer;transition:background .1s,transform 50ms;flex-shrink:0}.piano-key.white{width:var(--key-width);height:100%;background:#fff;border:1px solid #999;z-index:1;box-shadow:inset 0 -5px 10px rgba(0,0,0,.1)}.piano-key.white:active{background:#f0f0f0;transform:translateY(2px)}.piano-key.black{width:calc(var(--key-width) * .65);height:60%;background:linear-gradient(to bottom,#111 0,#333 100%);border:1px solid #000;border-radius:0 0 4px 4px;z-index:10;margin-left:calc(var(--key-width) * -.325);margin-right:calc(var(--key-width) * -.325);box-shadow:2px 2px 4px rgba(0,0,0,.5)}.piano-key.black:active{background:#000;transform:translateY(2px)}.piano-key .note-marker{position:absolute;left:50%;top:82%;transform:translateX(-50%) scale(.9)!important;width:var(--p-note-size);height:var(--p-note-size);font-size:calc(var(--p-note-size) * .5);font-weight:700;opacity:0;z-index:5;box-shadow:0 2px 4px rgba(0,0,0,.4);display:flex;justify-content:center;align-items:center}.piano-key.black .note-marker{width:calc(var(--p-note-size) * .8);height:calc(var(--p-note-size) * .8);font-size:calc(var(--p-note-size) * .4);z-index:15}.piano-key.white .note-marker,.piano-key.white .note-marker.in-extension,.piano-key.white .note-marker.in-fifth,.piano-key.white .note-marker.in-root,.piano-key.white .note-marker.in-scale,.piano-key.white .note-marker.in-seventh,.piano-key.white .note-marker.in-third{top:85%!important;width:var(--p-note-size);height:var(--p-note-size);font-size:calc(var(--p-note-size) * .5);transform:translateX(-50%) scale(.9)!important}.piano-key.black .note-marker,.piano-key.black .note-marker.in-extension,.piano-key.black .note-marker.in-fifth,.piano-key.black .note-marker.in-root,.piano-key.black .note-marker.in-scale,.piano-key.black .note-marker.in-seventh,.piano-key.black .note-marker.in-third{top:82%!important;width:calc(var(--p-note-size) * .8);height:calc(var(--p-note-size) * .8);font-size:calc(var(--p-note-size) * .4)}.piano-key .interval-badge{position:absolute;left:50%;top:55%;transform:translateX(-50%) scale(0)!important;z-index:6;filter:drop-shadow(0 1px 1px rgba(0, 0, 0, .5))}.piano-key.white .interval-badge{top:68%}.piano-key.black .interval-badge{top:55%;z-index:16}.piano-key .interval-badge.visible{transform:translateX(-50%) scale(1)!important}.piano-key .next-note-marker{position:absolute;left:50%;top:calc(85% - (var(--p-note-size) * .15));width:calc(var(--p-note-size) * 1.3);height:calc(var(--p-note-size) * 1.3);border-radius:50%;transform:translateX(-50%);pointer-events:none;opacity:0;z-index:2;transition:opacity .3s}.piano-key.black .next-note-marker{top:82%;width:24px;height:24px;z-index:12}.piano-key .next-note-marker.active{opacity:1;background:0 0;box-shadow:0 0 10px 2px var(--next-glow-color),inset 0 0 10px var(--next-glow-color);animation:1.5s infinite alternate pianoGlowPulse}@keyframes pianoGlowPulse{0%{transform:translateX(-50%) scale(.9);opacity:.6}100%{transform:translateX(-50%) scale(1.1);opacity:1}}.piano-key .note-marker.in-chord,.piano-key .note-marker.in-root,.piano-key .note-marker.in-scale{opacity:1}.piano-key .note-marker .note-marker-inner{display:flex;width:100%;height:100%;justify-content:center;align-items:center;border-radius:50%;background:inherit;color:inherit}.piano-key.black .note-marker.in-root.pulse .note-marker-inner,.piano-key.white .note-marker.in-root.pulse .note-marker-inner{animation:.4s ease-out pianoPulse}.piano-key .note-marker.in-root.pulse{z-index:200!important}@keyframes pianoPulse{0%,100%{transform:scale(1.1);box-shadow:0 0 5px rgba(255,0,0,.5)}50%{transform:scale(1.4);box-shadow:0 0 15px rgba(255,0,0,.8)}}@media (max-width:600px){.instrument-stage.piano-mode{height:160px}.piano-key .note-marker{width:22px;height:22px;font-size:.65rem}.piano-key .interval-badge.visible{transform:translateX(-50%) scale(.8)!important}}