.article-narration { display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"transport heading controls" "transport progress controls" "status status download"; align-items:center; column-gap:18px; row-gap:4px; margin:24px 0 0; padding:16px 18px; border:1px solid #a5823d; border-radius:16px; background:#061b31; color:#fff8ea; font:14px/1.5 var(--sans); text-align:start; }
.article-narration[hidden],.article-narration [hidden] { display:none!important; }
.narration-heading { grid-area:heading; align-self:end; min-width:0; }
.narration-emblem { display:none; }
.article-narration .narration-title { font:600 18px/1.3 var(--display); color:#fff8ea; margin:0 0 4px; }
.article-narration .narration-meta { font:12px/1.5 var(--sans); color:#b9c9d7; margin:0; }
.article-narration button { min-height:44px; border-radius:999px; padding:10px; font:600 14px/1.4 var(--sans); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.article-narration button svg,.article-narration button span[data-play-icon],.article-narration button span[data-pause-icon] { display:block; flex:none; }
.article-narration button:disabled { opacity:.4; cursor:default; }
.narration-transport { grid-area:transport; display:flex; align-items:center; justify-content:center; gap:2px; }
.narration-dial { position:relative; width:80px; height:80px; flex:none; display:grid; place-items:center; }
.narration-ring { position:absolute; inset:0; width:100%; height:100%; fill:none; stroke-width:5; transform:rotate(-90deg); pointer-events:none; }
.narration-ring-track { stroke:#294054; }
.narration-ring-value { stroke:#edc05b; stroke-linecap:round; }
.article-narration .narration-play { width:64px; height:64px; padding:8px; flex-direction:column; gap:0; background:#e3ad36; color:#041427; border:1px solid #e3ad36; }
.narration-play:hover:not(:disabled) { background:#f0c86a; }
.narration-play [data-play-icon] svg,.narration-play [data-playing-icon] svg { width:26px; height:26px; }
.narration-wave,.narration-wave svg { display:block; width:44px; height:28px; }
.narration-wave { order:-1; }
.narration-play:has(.narration-wave:not([hidden])) [data-playing-icon] svg { width:18px; height:18px; }
.narration-play:has(.narration-wave:not([hidden])) .narration-wave,.narration-play:has(.narration-wave:not([hidden])) .narration-wave svg { height:22px; }
.narration-clock { font-variant-numeric:tabular-nums; color:#fff8ea; white-space:nowrap; }
.article-narration .narration-skip { width:44px; height:44px; padding:9px; flex:none; color:#e5eef6; border:0; background:transparent; }
.narration-skip svg { width:26px; height:26px; }
.narration-skip:hover:not(:disabled) { color:#edc05b; background:#142f47; }
.narration-accessible-progress,.narration-play-caption,.narration-skip span,.narration-restart span,.narration-progress-label [data-section] { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.narration-progress-label { grid-area:progress; align-self:start; color:#b9c9d7; font-size:12px; }
.narration-progress-label strong { color:#edc05b; font-weight:600; font-variant-numeric:tabular-nums; }
.narration-controls { grid-area:controls; display:flex; align-items:center; gap:6px; }
.article-narration .narration-restart { width:44px; height:44px; padding:10px; background:transparent; color:#fff8ea; border:0; }
.narration-restart:hover:not(:disabled) { background:#142f47; }
.narration-speed { display:flex; align-items:center; gap:8px; color:#b9c9d7; font-size:0; }
.narration-select { position:relative; display:block; }
.narration-select svg { pointer-events:none; position:absolute; top:50%; inset-inline-end:10px; transform:translateY(-50%); width:16px; height:16px; }
.narration-select select { appearance:none; color:#fff8ea; background:#0c263e; border:1px solid #60778b; border-radius:9px; padding:10px 30px 10px 10px; min-height:44px; font:14px/1.4 var(--sans); width:80px; cursor:pointer; }
.article-narration .narration-status { grid-area:status; color:#b9c9d7; margin:0; font:11px/1.5 var(--sans); }
.narration-download { grid-area:download; justify-self:end; display:inline-flex; align-items:center; gap:5px; color:#edc05b; min-height:44px; font-size:12px; text-underline-offset:3px; white-space:nowrap; }
.narration-download svg { width:16px; height:16px; flex:none; }
.article-narration :is(button,select,a):focus-visible { outline:3px solid #f0c86a; outline-offset:3px; }

@media(max-width:700px) {
 .article-narration { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"heading heading" "transport controls" "progress download" "status status"; column-gap:8px; row-gap:6px; padding:16px; }
 .narration-transport { justify-content:flex-start; }
 .narration-controls { justify-content:flex-end; }
 .narration-progress-label { align-self:center; }
 .narration-select select { font-size:16px; }
 .narration-download { min-height:32px; }
}
@media(max-width:400px) {
 .article-narration { padding:12px; column-gap:4px; }
 .narration-controls { gap:0; flex-direction:column-reverse; }
 .narration-select select { width:76px; }
 .narration-download { font-size:11px; }
}
@media(max-width:350px) {
 .article-narration { grid-template-areas:"heading heading" "transport controls" "progress progress" "status status" "download download"; }
 .narration-dial { width:64px; height:64px; }
 .article-narration .narration-play { width:52px; height:52px; }
 .narration-wave,.narration-wave svg { width:34px; }
}