.narration{margin:32px 0 44px;padding:24px;border:1px solid color-mix(in srgb,var(--c) 45%,transparent);border-radius:18px;background:radial-gradient(ellipse at 0 0,color-mix(in srgb,var(--c) 12%,transparent),transparent 70%),#101512;box-shadow:0 15px 40px #0002}.narration-heading{display:flex;align-items:center;gap:16px}.narration .eyebrow{font-size:9px;color:var(--c);letter-spacing:1.8px}.narration h3{font-size:clamp(22px,3vw,30px);font-weight:500;margin:5px 0;letter-spacing:-.04em}.narration-language{margin-left:auto;font-size:11px;color:#c4cdbf;border:1px solid #ffffff24;border-radius:20px;padding:8px 12px}.narration-wave{display:flex;align-items:center;gap:3px;height:36px;flex:none;width:30px}.narration-wave i{display:block;width:3px;height:12px;border-radius:4px;background:var(--c);transform-origin:center}.narration-wave i:nth-child(2n){height:24px}.narration-wave i:nth-child(3){height:34px}.is-narrating .narration-wave i{animation:narrator-wave .9s ease-in-out infinite alternate}.narration-wave i:nth-child(2){animation-delay:-.2s}.narration-wave i:nth-child(3){animation-delay:-.4s}.narration-wave i:nth-child(4){animation-delay:-.6s}.narration-wave i:nth-child(5){animation-delay:-.8s}.narration-actions{display:flex;flex-wrap:wrap;gap:12px;margin:23px 0 18px}.narration-actions .primary{background:color-mix(in srgb,var(--c) 40%,#e5eacf);color:#142017}.narration button{min-height:46px}.narration button:disabled{opacity:.45;cursor:default}.narration-position{display:flex;align-items:center;gap:20px;font-size:11px;color:#bcc6b6}.narration-position span{flex:1}.narration progress{height:4px;width:35%;accent-color:var(--c)}.narration-options{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:16px;margin-top:22px}.narration-options label{font-size:11px;color:#bec9b9;display:flex;flex-direction:column;gap:8px}.narration-options select{width:100%;min-width:0;text-overflow:ellipsis;font-size:12px;background-color:#131b16;border-color:#ffffff30}#narration-status{font-size:12px;color:#c2cdbb;line-height:1.65;margin:16px 0 0}.narration-note{font-size:10px;color:#8f9b89;line-height:1.65;margin:5px 0 0}.reading-grid [data-narration]{transition:background .25s,box-shadow .25s}.narrating-passage{background:color-mix(in srgb,var(--c) 9%,transparent);box-shadow:-3px 0 0 var(--c);border-radius:0 6px 6px 0}@keyframes narrator-wave{from{transform:scaleY(.35)}to{transform:scaleY(1)}}@media(max-width:600px){.narration{padding:18px 16px;margin:24px 0 32px}.narration-heading{gap:10px}.narration .eyebrow{font-size:8px;letter-spacing:1px}.narration-language{padding:7px 9px}.narration-actions{gap:8px}.narration-actions .primary{flex:1;font-size:11px;padding:12px}.narration-actions .pill:not(.primary){font-size:11px;padding:12px}.narration-options{grid-template-columns:minmax(0,1fr) 82px;gap:10px}.narration-position{gap:12px}.narration-position span{line-height:1.5}.narration-options select{font-size:11px}}@media(prefers-reduced-motion:reduce){.is-narrating .narration-wave i{animation:none}.reading-grid [data-narration]{transition:none}}.no-motion .is-narrating .narration-wave i{animation:none}
#narration-time{flex:none;font-variant-numeric:tabular-nums;color:#aebbac;font-size:11px}#narration-seek{display:block;width:100%;margin:14px 0 0;min-height:22px;accent-color:var(--c);cursor:pointer}.narration-position>span:first-child{line-height:1.5}.narration-note{max-width:640px}
.narration-language-label{display:grid;gap:5px;font-size:11px;letter-spacing:.06em;margin-left:auto}.narration-language-label select{min-height:42px;background:#111e22;color:#e8efe9;border:1px solid #72aa8d70;border-radius:9px;padding:7px 30px 7px 12px;font:inherit}.narration-language-label span{color:#adc5b4}@media(max-width:500px){.narration-heading{flex-wrap:wrap}.narration-language-label{width:100%;margin-top:10px}.narration-language-label select{width:100%}}