.brief-narration { display:flex; align-items:center; gap:14px; max-width:520px; margin:20px 0 28px; padding:14px 0; border-top:1px solid #ffffff12; border-bottom:1px solid #ffffff12; flex-wrap:wrap; }
.listen-button { display:grid; place-items:center; flex:0 0 38px; width:38px; height:38px; padding:0; border:1px solid #bda07955; border-radius:50%; background:transparent; color:#e4c89f; cursor:pointer; transition:background .15s; }
.listen-button:hover { background:#e4c89f12; }
.listen-button svg { fill:currentColor; }
.listen-button:focus-visible, .narration-progress:focus-visible { outline:2px solid #e4c89f; outline-offset:4px; }
.listen-button:disabled { opacity:.55; cursor:wait; }
.pause-symbol, .is-playing .play-symbol { display:none; }
.is-playing .pause-symbol { display:block; }
.narration-caption { display:flex; flex-direction:column; gap:3px; }
.listen-label { color:#e7dfd3; font-size:.8rem; font-weight:500; }
.voice-label { color:#a99d8c; font-size:.65rem; letter-spacing:.02em; }
.narration-progress { --progress:0%; appearance:none; -webkit-appearance:none; flex:1; min-width:50px; width:80px; height:3px; margin:0; border:0; border-radius:5px; background:linear-gradient(to right,#c6ab83 var(--progress),#ffffff20 var(--progress)); cursor:pointer; }
.narration-progress::-webkit-slider-thumb { appearance:none; width:9px; height:9px; border-radius:50%; background:#e4c89f; border:0; }
.narration-progress::-moz-range-thumb { width:9px; height:9px; border:0; border-radius:50%; background:#e4c89f; }
.narration-progress:disabled { opacity:.4; cursor:default; }
.narration-time { color:#b9ad9a; font-size:.68rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.narration-status { flex-basis:100%; font-size:.75rem; color:#d4bda0; }
.narration-status:empty { display:none; }
.brief-narration [hidden] { display:none; }
@media(max-width:480px) { .brief-narration { gap:10px; } .listen-label { font-size:.73rem; } .narration-time { font-size:.63rem; } }
@media(max-width:480px) {
  .brief-narration { display:grid; grid-template-columns:38px minmax(0,1fr) auto; column-gap:10px; row-gap:10px; }
  .listen-button { grid-column:1; grid-row:1 / 3; }
  .narration-caption { grid-column:2; grid-row:1; }
  .narration-time { grid-column:3; grid-row:1; }
  .narration-progress { grid-column:2 / 4; grid-row:2; width:100%; min-width:0; }
  .narration-status { grid-column:1 / -1; }
}