/* Escolher a velocidade da narração.
   O tocador do navegador já tem isso escondido num menu de contexto — que
   no telefone quase ninguém encontra, e no iPhone às vezes nem existe.
   Aqui fica à vista, ao lado do próprio tocador. */
.ouvir{flex-wrap:wrap; row-gap:.5rem}
.veloc{display:flex; gap:.25rem; margin-left:auto; align-items:center}
.veloc b{font-weight:400; font-size:.62rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-faint); margin-right:.25rem}
.veloc button{font-family:var(--sans); font-size:.72rem; line-height:1;
  padding:.4rem .5rem; min-width:2.5rem; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); color:var(--ink-soft);
  font-variant-numeric:tabular-nums; transition:border-color .12s, color .12s}
.veloc button:hover{border-color:var(--clay); color:var(--ink)}
.veloc button[aria-pressed="true"]{background:var(--clay-wash);
  border-color:var(--clay); color:var(--clay-strong); font-weight:600}
.veloc button:focus-visible{outline:2px solid var(--clay); outline-offset:1px}
@media (max-width:34rem){
  .ouvir audio{flex:1 1 100%}
  .veloc{margin-left:0; width:100%; justify-content:space-between}
  .veloc button{flex:1; min-width:0; font-size:.78rem; padding:.5rem .3rem}
  .veloc b{display:none}
}

/* som de fundo opcional */
.estudo{margin:.5rem 0 0}
.estudo button{background:none; border:1px solid var(--line); border-radius:99px;
  padding:.3rem .8rem; cursor:pointer; font-family:var(--sans);
  font-size:.66rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-faint); transition:color .15s, border-color .15s}
.estudo button:hover{color:var(--ink-soft); border-color:var(--clay)}
.estudo button[aria-pressed="true"]{color:var(--clay-strong); border-color:var(--clay);
  background:var(--clay-wash)}
@media (max-width:52rem){ .estudo button{font-size:.72rem; padding:.4rem .9rem} }
@media print{ .estudo{display:none} }