.story-audio-controls { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; width: 100%; min-width: 0; }
.story-audio-controls > audio { flex: 1 1 180px; width: 180px; max-width: 100%; min-width: 0; }
.story-audio-menu { position: relative; flex: 0 0 44px; font-size: 1rem; }
.story-audio-menu > summary { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 2px solid #496a46; border-radius: 50%; color: #214528; background: #f4faee; font: bold 1.8rem/1 sans-serif; cursor: pointer; list-style: none; }
.story-audio-menu > summary::-webkit-details-marker { display: none; }
.story-audio-menu-panel { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 30; width: min(15rem, calc(100vw - 48px)); padding: .6rem; border: 2px solid #496a46; border-radius: 12px; color: #214528; background: #f4faee; box-shadow: 0 4px 14px #0003; }
.story-audio-menu:not([open]) > .story-audio-menu-panel { display: none; }
.story-audio-menu-panel > button { display: block; width: 100%; min-height: 44px; padding: .6rem; font: inherit; white-space: normal; overflow-wrap: anywhere; border: 1px solid #496a46; border-radius: 8px; color: inherit; background: inherit; cursor: pointer; }
.story-audio-menu-panel > input { box-sizing: border-box; width: 100%; margin-top: .5rem; font: inherit; }
.story-audio-menu-panel > input[hidden] { display: none; }
.story-audio-link-status { flex-basis: 100%; margin: 0; overflow-wrap: anywhere; }
.story-audio-link-status:empty { display: none; }
.story-audio-menu :focus-visible { outline: 3px solid #795700; outline-offset: 3px; }
[data-reading-theme="dark"] .story-audio-menu > summary,
[data-reading-theme="dark"] .story-audio-menu-panel { background: #243127; color: #f1f5e9; border-color: #a1c799; }
[data-reading-theme="dark"] .story-audio-menu :focus-visible { outline-color: #ffe085; }