.study-narration {
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:14px;
  align-items:end;
  margin-top:18px;
  padding:14px;
  border:1px solid rgba(255,255,255,.35);
  border-left:6px solid #8fd3ff;
  border-radius:10px;
  background:rgba(255,255,255,.13);
  box-shadow:0 10px 24px rgba(0,0,0,.10);
}
.study-narration strong {
  display:block;
  color:#fff;
  font-size:.9rem;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.study-narration-status {
  display:block;
  margin-top:4px;
  color:rgba(255,255,255,.9);
  font-size:.86rem;
  line-height:1.35;
}
.study-narration-controls {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}
.study-narration label {
  display:grid;
  gap:4px;
  color:rgba(255,255,255,.88);
  font-size:.74rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.035em;
}
.study-narration select {
  min-height:36px;
  min-width:150px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:8px;
  background:#fff;
  color:#211b18;
  padding:7px 9px;
  font:800 .84rem Arial, Helvetica, sans-serif;
}
.study-narration button {
  min-height:36px;
  border:1px solid rgba(255,255,255,.65);
  border-radius:8px;
  background:#fff;
  color:#6b2d2d;
  padding:8px 11px;
  font:900 .84rem Arial, Helvetica, sans-serif;
  cursor:pointer;
}
.study-narration button.secondary {
  background:rgba(255,255,255,.12);
  color:#fff;
}
@media (max-width:760px) {
  .study-narration {
    grid-template-columns:1fr;
    align-items:stretch;
  }
  .study-narration-controls {
    justify-content:flex-start;
  }
  .study-narration label,
  .study-narration select,
  .study-narration button {
    width:100%;
  }
}