:root {
  color: #1c1410;
  background: #f6f1ea;
  font-family: "Iowan Old Style", Palatino, serif;
}

body { margin: 0; }

.chip, .controles { padding: 0.4rem 0.8rem; }

.lienzo {
  display: flex;
  flex-direction: column;
  min-height: 80vh;
}

.mitad {
  flex: 1 1 50%;
  min-width: 0;
  min-height: 16rem;
  padding: 0.8rem;
  box-sizing: border-box;
}

.mitad.enfocada { box-shadow: inset 0 0 0 3px #8a5a34; }

iframe { width: 100%; height: 70vh; border: 0; background: #fff; }

.hablar:disabled { opacity: 0.45; }

.probador {
  font-size: 1.4rem;
  padding: 0.8rem;
  background: #fff;
  border: 2px solid #8a5a34;
}

.piramide, .acordes { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.nota, .acorde {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.4rem;
  background: #fff;
  border-radius: 999px;
}

.nota.resaltada { outline: 2px solid #8a5a34; }

.nota img, .acorde img { width: 2rem; height: 2rem; object-fit: cover; }

@media (min-width: 800px) {
  .lienzo { flex-direction: row; }
  .mitad { min-height: 70vh; }
}