/* --- IVORY KEYBOARD --- */

#keyboard-container {
    flex: 1;
    /* Occupy remaining 75% */
    height: 150px;
    background: transparent;
    border-top: 2px solid #111;
    border-left: 2px solid var(--black);
}

/* Obsolete Octave buttons removed - now in performance.css grid */

#ivory-keys-bed {
    display: flex;
    height: 100%;
    position: relative;
    background: transparent;
    padding: 0 2px;
}

.key {
    border-radius: 0 0 5px 5px;
    cursor: pointer;
    transition: transform 0.04s, background 0.04s;
}

.key.white {
    flex: 1;
    background: linear-gradient(to bottom, #f8f6ee 0%, #fffff8 40%, var(--juno-beige) 100%);
    border: 1px solid #bbb;
    border-top: none;
    z-index: 10;
    position: relative;
    box-shadow: -1px 0 0 #ddd, 1px 0 0 #aaa, 0 8px 6px rgba(0, 0, 0, 0.25);
}

.key.black {
    background: linear-gradient(to bottom, #2a2a2a 0%, #111 50%, var(--black) 100%);
    border: 1px solid var(--black);
    z-index: 20;
    position: absolute;
    top: 0;
    height: 65%;
    box-shadow: -1px 0 1px rgba(0, 0, 0, 0.5), 1px 0 1px rgba(0, 0, 0, 0.5), 0 4px 4px rgba(0, 0, 0, 0.6);
}

.key.white.pushed {
    transform: translateY(2px);
    background: #e8e4d6;
    box-shadow: none;
}

.key.black.pushed {
    transform: translateY(1px);
    background: #1a1a1a;
    box-shadow: none;
}