.article-listen{
  margin:20px 0 26px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(127,127,127,.045);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.article-listen__row{display:flex;align-items:center;gap:12px}
.article-listen__play{
  flex:0 0 44px;width:44px;height:44px;border-radius:999px;
  border:2px solid var(--ink);background:transparent;color:var(--ink);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-size:18px;line-height:1
}
.article-listen__play:hover,.article-listen__play:active,.article-listen__play:focus-visible,.article-listen.is-playing .article-listen__play{border-color:var(--orange);color:var(--orange)}
.article-listen__copy{min-width:0;flex:1}
.article-listen__title{display:block;font-size:15px;font-weight:760;color:var(--ink);line-height:1.25}
.article-listen__status{display:block;margin-top:2px;font-size:12px;color:var(--muted);line-height:1.35}
.article-listen__actions{display:flex;align-items:center;gap:6px}
.article-listen__action{
  min-width:42px;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:999px;
  background:var(--card);color:var(--muted);cursor:pointer;font:700 12px/1 Inter,ui-sans-serif,system-ui,sans-serif
}
.article-listen__action:hover{color:var(--ink);border-color:var(--muted)}
.article-listen__seek{font-size:12px;font-variant-numeric:tabular-nums}
.article-listen__progress{height:3px;margin:11px 0 0 56px;border-radius:999px;background:var(--line);overflow:hidden}
.article-listen__progress span{display:block;width:0;height:100%;background:var(--orange);transition:width .18s ease}
.article-listen.is-unsupported{opacity:.65}
.article-listen.is-unsupported .article-listen__play,
.article-listen.is-unsupported .article-listen__action{cursor:not-allowed}
html[data-theme="dark"] .article-listen{background:rgba(255,255,255,.035)}
html[data-theme="dark"] .article-listen__play{border-color:#eef2ff;color:#eef2ff}
html[data-theme="dark"] .article-listen__play:hover,
html[data-theme="dark"] .article-listen__play:active,
html[data-theme="dark"] .article-listen__play:focus-visible,
html[data-theme="dark"] .article-listen.is-playing .article-listen__play{border-color:var(--orange);color:var(--orange)}
@media(max-width:720px){
  .article-listen{margin:18px 0 24px;padding:13px 14px}
  .article-listen__row{gap:10px}
  .article-listen__play{flex-basis:42px;width:42px;height:42px}
  .article-listen__actions{gap:4px}
  .article-listen__action{min-width:36px;padding:0 7px}
  .article-listen__progress{margin-left:52px}
}