.listen-controls {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  padding-top: 10px;
  color: var(--muted);
  font-size: 10px;
}

.listen-controls label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.listen-controls input {
  width: 14px;
  height: 14px;
  accent-color: var(--green);
}

.transcript [data-transcript] {
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}

.transcript [data-transcript]:hover,
.transcript [data-transcript]:focus-visible {
  background: var(--surface);
  outline: 1px solid var(--line);
  outline-offset: -1px;
}

.transcript [data-transcript].current {
  background: #e5f3ee;
  border-left: 3px solid var(--green);
}

@media (max-width: 650px) {
  .listen-controls {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

.lesson-favorite{display:flex;align-items:center;gap:6px;margin-top:10px;margin-left:auto;border:1px solid var(--line);border-radius:5px;background:var(--paper);color:var(--muted);padding:7px 10px;font:600 10px inherit;cursor:pointer}.lesson-favorite svg{width:14px;height:14px}.lesson-favorite.active{border-color:var(--green);color:var(--green);background:#e5f3ee}.sentence-note-box{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line)}.sentence-note-box label{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700}.sentence-note-box label svg{width:15px;height:15px;color:var(--green)}.sentence-note-box textarea{box-sizing:border-box;width:100%;margin-top:8px;padding:10px;border:1px solid var(--line);border-radius:5px;background:var(--paper);color:var(--ink);font:12px/1.5 inherit;resize:vertical}.sentence-note-box small{display:block;margin-top:4px;color:var(--muted);font-size:9px}