.ReactPiano__Keyboard{display:flex;position:relative}.ReactPiano__Key{display:flex}.ReactPiano__Key--accidental{border:1px solid var(--border);cursor:pointer;z-index:1;background:#1e293b;border-top:1px solid #0000;border-radius:0 0 6px 6px;height:66%;position:absolute;top:0}.ReactPiano__Key--natural{border:1px solid var(--border);cursor:pointer;z-index:0;background:#f6f5f3;border-radius:0 0 6px 6px;flex:1;margin-right:1px}.ReactPiano__Key--natural:last-child{margin-right:0}.ReactPiano__Key--active{background-image:linear-gradient(#f793a4,#f9788e)}.ReactPiano__Key--active.ReactPiano__Key--accidental{border:1px solid #1e293b;height:65%}.ReactPiano__Key--active.ReactPiano__Key--natural{border:1px solid var(--border);height:98%}.ReactPiano__Key--disabled.ReactPiano__Key--accidental{background:#ddd;border:1px solid #999}.ReactPiano__Key--disabled.ReactPiano__Key--natural{background:#eee;border:1px solid #aaa}.ReactPiano__NoteLabelContainer{flex:1;justify-content:center;align-self:flex-end;align-items:center;display:flex}.ReactPiano__NoteLabel{letter-spacing:.02em;text-align:center;text-transform:capitalize;-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:geometricprecision;font-size:12px;font-weight:600}.ReactPiano__NoteLabel--accidental{color:#ffffffd9;margin-bottom:6px}.ReactPiano__NoteLabel--natural{color:#475569;margin-bottom:6px}.ReactPiano__NoteLabel--natural.ReactPiano__NoteLabel--active{color:#fff}