* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: rgb(5, 0, 11);
  color: #eee;
  font-family: system-ui, -apple-system, Arial, sans-serif;
  text-align: center;
  overflow: hidden;
  height: 100%;
}

.aviso {
  padding: 12px;
  font-size: 14px;
  color: #ccc;
}

.boton {
  display: inline-block;
  margin: 8px auto 12px;
  padding: 10px 22px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: #7a2cff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s ease;
}
.boton:hover  { background: #8f4bff; }
.boton:active { background: #5f1fd6; }
.boton[disabled] {
  background: #444;
  cursor: default;
  opacity: .6;
}

.contenedor {
  position: relative;
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  aspect-ratio: 650 / 400;
  background: rgb(5, 0, 11);
}

#espectro {
  display: block;
  width: 100%;
  height: 100%;
  background: rgb(5, 0, 11);
}

/* En móviles pequeños, achicar el botón */
@media (max-width: 500px) {
  .boton { font-size: 14px; padding: 8px 16px; }
  .aviso { font-size: 13px; }
}