.narration{color:inherit;margin:10px 0 20px;padding:0;text-align:left;width:100%;min-width:0}
.narration-panel{max-width:340px;margin:0}
.narration-panel summary{display:flex;align-items:center;gap:9px;width:fit-content;min-height:44px;box-sizing:border-box;cursor:pointer;font:500 13px/1.5 system-ui,sans-serif;list-style:none;padding:5px 0}
.narration-panel summary::-webkit-details-marker{display:none}
.narration-length{font-size:11px;font-weight:400;opacity:.7;margin-left:3px;font-variant-numeric:tabular-nums}
.narration-wave{display:inline-flex;align-items:center;justify-content:center;gap:2px;width:20px;height:20px;color:#ad8c4d}
.narration-wave i{display:block;background:currentColor;width:2px;height:6px;border-radius:2px;transform-origin:center}
.narration-wave i:nth-child(2){height:14px;animation-delay:-.35s}
.narration-wave i:nth-child(3){height:10px;animation-delay:-.7s}
.narration-wave i:nth-child(4){height:7px;animation-delay:-.15s}
.narration-panel.is-playing .narration-wave i{animation-name:narration-wave;animation-duration:1.2s;animation-iteration-count:infinite;animation-timing-function:ease-in-out}
@keyframes narration-wave{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.narration-panel.is-playing .narration-wave i{animation:none}}
.narration-body{padding-bottom:4px}
.narration-body p{font:400 11px/1.6 system-ui,sans-serif;margin:0 0 7px;opacity:.8}
.narration-body audio{display:block;width:100%;max-width:100%;height:44px}
.narration :focus-visible{outline:2px solid #ad8c4d;outline-offset:4px}
.narration [hidden]{display:none}
.narration-controls{box-sizing:border-box;font:400 13px/1.5 system-ui,sans-serif;width:100%;max-width:340px;margin:0;padding:0 10px 4px;border:1px solid #60704d;border-radius:10px;background:linear-gradient(120deg,#1d4335,#102c23);color:#eedab2}
.narration-buttons{display:flex;align-items:center;justify-content:space-between;gap:4px;margin:0}
.narration-buttons::after{content:"";width:44px;flex:none}
.narration .narration-buttons button{display:grid;place-items:center;flex:none;box-sizing:border-box;width:44px;height:44px;min-width:44px;min-height:44px;padding:8px;border:0;border-radius:50%;color:inherit;background:transparent;box-shadow:none;cursor:pointer;touch-action:manipulation;transition:background .15s}
.narration .narration-buttons button svg{display:block;width:28px;height:28px;pointer-events:none}
.narration .narration-buttons .narration-toggle{width:44px;height:44px;padding:10px;background:linear-gradient(145deg,#efdbac,#d8b778);color:#163b2d}
.narration .narration-buttons .narration-toggle svg{width:24px;height:24px}
.narration .narration-buttons button:disabled{opacity:.35;cursor:default}
.narration .narration-buttons button:not(:disabled):hover{background:rgba(173,140,77,.16)}
.narration .narration-buttons .narration-toggle:not(:disabled):hover{background:#f3dfaf}
.narration-toggle[data-icon="play"] svg:last-child,.narration-toggle[data-icon="pause"] svg:first-child{display:none}
.narration-seek{touch-action:none;display:block;appearance:none;-webkit-appearance:none;box-sizing:border-box;width:100%;height:44px;padding:0;margin:0;cursor:pointer;background:transparent;border:0;border-radius:0;color:inherit}
.narration-seek::-webkit-slider-runnable-track{height:2px;border-radius:3px;background:linear-gradient(to right,currentColor var(--progress,0%),rgba(222,198,143,.3) var(--progress,0%))}
.narration-seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:12px;height:12px;border:0;border-radius:50%;background:currentColor;margin-top:-5px}
.narration-seek::-moz-range-track{height:2px;border-radius:3px;background:rgba(222,198,143,.3)}
.narration-seek::-moz-range-progress{height:2px;background:currentColor}
.narration-seek::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:currentColor}
.narration-clock{color:#e5d9be;display:flex;justify-content:space-between;font-variant-numeric:tabular-nums;font-size:10px;margin-top:-18px;opacity:.75}
.narration-controls .narration-speed{color:#eedab2;display:flex;align-items:center;margin:0;width:44px;flex:none;gap:0;font-size:0}
.narration-controls .narration-speed select{font:500 11px/1.4 system-ui,sans-serif;width:44px;min-height:44px;padding:4px 0;border:0;border-radius:4px;background:transparent;color:inherit}
.narration-speed option{background:#f5f0e5;color:#102b23}
.narration-body .narration-hint{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}