Aprende diseño web adaptativo construyendo un piano - Paso 6

Hola, estoy haciendo exactamente lo que me pide y no hay caso. ¿Alguien sabe cuál es mi error?

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Piano</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>

<!-- User Editable Region -->

    <div id="piano">
      <div class="keys">
        <div class="key"></div>
        <div class="black--key"></div>
        <div class="black--key"></div>
        <div class="key"></div>
        <div class="black--key"></div>
        <div class="black--key"></div>
        <div class="black--key"></div>
      </div>
    </div>

<!-- User Editable Region -->

  </body>
</html>
/* file: styles.css */

Información de tu navegador:

El agente de usuario es: Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/111.0

Desafío: Aprende diseño web adaptativo construyendo un piano - Paso 6

Enlaza al desafío:

The specified elements should have two classes. Both key and black--key

Example

<div class="key black--key"></div>