Travei nesse exercicio | JavaScript: manipulando o DOM | Alura

Olá tudo bem, desculpa eu travei nesse exercicio e não consigo ver como a aplicação deve se comportar, o meu htm está dessa forma:

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Manipulando o DOM - Aula 3</title>
  <link rel="stylesheet" href="../css/principal.css">
</head>
<body>

  <button onclick="mostrar(this)">Alura tintas em estoque:</button>

  <button onclick="esconde()">Apagar as cores</button>

  <ul class="lista">
    <li cor="laranja" tipo="tinta-exterior" class="item" data-tinta>Tinta laranja</li>
    <li cor="vermelho" tipo="tinta-interior" class="item" data-tinta>Tinta vermelha</li>
    <li cor="branco" tipo="tinta-interior" class="item" data-tinta>Tinta branca</li>
    <li cor="amarelo" tipo="tinta-exterior" class="item" data-tinta>Tinta amarela</li>
    <li cor="rosa" tipo="tinta-exterior" class="item" data-tinta>Tinta rosa</li>
    <li cor="preto" tipo="tinta-exterior" class="item" data-tinta>Tinta preta</li>
  </ul>

  <a href="https://alura.com.br/" target="_blank"><img src="https://www.alura.com.br/assets/img/home/alura-logo.svg" alt="" class="alura-logo"></a>
  <script src="../main.js"></script>
</body>
</html>

O javascript dessa forma :

function mostrar() {
  var lista = document.querySelector('[data-lista]');
  lista.style.display = 'block';
}

function esconde() {
  var lista = document.querySelector('[data-lista]');
  lista.style.display = 'none';
}

quando eu executo ele mostra que há um erro no listar.style.display = 'none'