.instrument-piano {
    background-color: #f1f5f9; 
    border: 2px solid #cbd5e1;
}

.piano-keyboard {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
}

.key-white {
    flex: 1;
    height: 100%;
    background-color: #ffffff;
    border-right: 1px solid #cbd5e1;
    position: relative;
    cursor: pointer;
    transition: background-color 0.1s ease;
    border-bottom: 4px solid #e2e8f0; 
}

.key-white:last-child {
    border-right: none;
}

.key-white:hover {
    background-color: #f8fafc;
}

.key-black {
    position: absolute;
    width: 4.3%; 
    height: 60%; 
    background-color: #1e293b; 
    border-left: 1px solid #334155;  
    border-right: 1px solid #0f172a; 
    border-bottom: 4px solid #0f172a; 
    border-radius: 0 0 4px 4px; 
    z-index: 5; 
    cursor: pointer;
    transition: background-color 0.1s ease;
}

.key-black:hover {
    background-color: #0f172a;
}

.note-piano {
    transform: translate(-50%, -50%) !important; 
}