Claro, puedes utilizar CSS para darle estilo a tu modal. Aquí tienes un ejemplo de código HTML y CSS para lograr un estilo más moderno, con gradientes en el fondo, cambios en el tamaño y color de los títulos, y un borde redondeado que priorice el espacio en blanco:

html
Copy code
<dialog id="modalDialog">
  <h1 id="modalTitle">Título de prueba</h1>
  <button id="closeModalBtn">Cerrar el modal</button>
</dialog>

<button id="openModalBtn">Abrir el modal</button>

<script>
  const openModal = document.querySelector( "#openModalBtn" )
  const closeModal = document.querySelector( "#closeModalBtn" )
  const modal = document.querySelector( "#modalDialog" )
  openModal.addEventListener( "click", () => {
    modal.showModal()
  } )
  closeModal.addEventListener( "click", () => {
    modal.close()
  } );
</script>
#modalDialog {
  background-image: linear-gradient( to right, #ffffff, #cccccc );
  border-radius: 10px;
  padding: 20px;
  width: 50%;
  height: 50%;
  position: fixed;
  top: 25%;
  left: 25%;
}

#modalTitle {
  font-size: 20px;
  color: #666666;
  text-align: center;
  margin-bottom: 20px;
}

#closeModalBtn {
  background-color: #333333;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  float: right;
}
spam fails_task lang_mismatch pii not_appropriate hate_speech sexual_content quality toxicity humor helpfulness creativity violence