/* ── Demo 语音解说条 ────────────────────────────────────────────
   四个 Demo 打开之后没有任何声音、也没人说该点哪儿，这条是补这个的。
   放在标题正下方，一进来就看得见。

   不自动播放：自动出声在办公室打开是事故。
   带一份文字稿：听不了声音的场合（会议、地铁、听障）照样能看完。
   这份稿子跟语音是同一段内容，属于这条解说的必备部分。
   ──────────────────────────────────────────────────────────── */
.qnarr{
  margin:22px 0 6px;
  border:1px solid rgba(196,151,73,.24);
  border-radius:3px;
  background:linear-gradient(180deg,#0d1319 0%,#0a1118 100%);
  color:#d0dbe3;
  font-family:"PingFang SC","Noto Sans SC",-apple-system,system-ui,sans-serif;
}
.qnarr__bar{
  display:flex;align-items:center;gap:14px;
  padding:13px 16px;
}
.qnarr__play{
  flex:0 0 auto;
  width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(196,151,73,.46);
  background:transparent;color:#537490;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:color .22s,border-color .22s,background .22s;
}
.qnarr__play:hover{color:#c1d4e5;border-color:rgba(226,192,121,.7);
  background:rgba(196,151,73,.10)}
.qnarr__play:focus-visible{outline:2px solid #c1d4e5;outline-offset:3px}
.qnarr__play svg{width:15px;height:15px;fill:currentColor;display:block}
.qnarr__play .qnarr__pause{display:none}
.qnarr.is-playing .qnarr__play .qnarr__pause{display:block}
.qnarr.is-playing .qnarr__play .qnarr__go{display:none}

.qnarr__mid{flex:1 1 auto;min-width:0}
.qnarr__label{
  display:block;font-size:13px;letter-spacing:.02em;color:#f4f3ef;margin:0 0 7px}
.qnarr__label b{color:#537490;font-weight:500}
.qnarr__track{
  position:relative;height:3px;border-radius:2px;
  background:rgba(240,236,228,.13);overflow:hidden;cursor:pointer}
.qnarr__fill{
  position:absolute;left:0;top:0;bottom:0;width:0;
  background:linear-gradient(90deg,#537490,#c1d4e5)}
.qnarr__time{
  flex:0 0 auto;font-variant-numeric:tabular-nums;
  font-size:12px;color:#9A9384;letter-spacing:.04em}
.qnarr__txt{
  flex:0 0 auto;
  border:1px solid rgba(196,151,73,.28);border-radius:2px;
  background:transparent;color:#537490;
  font:400 12px/1 inherit;padding:8px 11px;cursor:pointer;
  transition:color .22s,border-color .22s}
.qnarr__txt:hover{color:#c1d4e5;border-color:rgba(226,192,121,.6)}
.qnarr__txt:focus-visible{outline:2px solid #c1d4e5;outline-offset:3px}

.qnarr__script{
  border-top:1px solid rgba(196,151,73,.16);
  padding:15px 16px 17px;
  font-size:14px;line-height:1.9;color:#d0dbe3;
  margin:0}
.qnarr__script[hidden]{display:none}
.qnarr__script p{margin:0 0 .55em}
.qnarr__script p:last-child{margin:0}

@media (max-width:640px){
  /* 手机上原来是 [播放][看文字稿][时长] 挤一行、标题掉到下一行，
     文字稿按钮插在播放键和标题中间。排成 [播放][标题+进度] / [时长][文字稿]。 */
  .qnarr__bar{flex-wrap:wrap;gap:10px 12px;padding:12px 13px}
  .qnarr__play{order:1}
  .qnarr__mid{order:2;flex:1 1 190px;min-width:0}
  .qnarr__time{order:3}
  .qnarr__txt{order:4;margin-inline-start:auto}
  .qnarr__label{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  .qnarr__play,.qnarr__txt{transition:none}
}