.result-audio{--played:0%;--track-fill:color-mix(in srgb,#61009a 50%,#ededed);display:flex;align-items:center;gap:16px;width:100%;min-height:66px;padding:9px 14px;margin:24px 0 30px;border:1px solid #ededed40;border-radius:999px;background:linear-gradient(125deg,#40155955,#ffffff0c 58%,#40155933);box-shadow:0 8px 26px #00000020,inset 0 1px 0 #ffffff66,inset 0 -1px 0 #ffffff18;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);position:relative;flex-wrap:wrap}.result-audio audio{display:none}.audio-play,.audio-rate,.audio-volume-toggle{display:inline-flex;align-items:center;justify-content:center;border:1px solid #ededed4d;min-height:44px;flex-shrink:0;color:var(--text);cursor:pointer;box-shadow:inset 0 1px 0 #ffffff66,inset 0 -1px 0 #ffffff15;background:linear-gradient(130deg,#ffffff1a,#ffffff05)}.audio-play{width:44px;height:44px;border-radius:50%;color:#ededed;background:linear-gradient(135deg,#61009a,#401559)}.audio-play svg{width:19px;height:19px}.audio-play .play-icon{fill:currentColor;stroke:none}.audio-play .pause-icon{display:none;fill:none;stroke:currentColor;stroke-width:2.5}.result-audio[data-playing=true] .play-icon{display:none}.result-audio[data-playing=true] .pause-icon{display:block}.audio-rate,.audio-volume-toggle{min-width:52px;padding:8px 12px;border-radius:999px;font:600 12px Magnetik;line-height:1;letter-spacing:0}.audio-seek{appearance:none;-webkit-appearance:none;flex:1;min-width:30px;height:44px;border:0;background:transparent;cursor:pointer;outline-offset:3px;margin:0;padding:0}.audio-seek::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--track-fill) 0 var(--played),#ededed38 var(--played) 100%)}.audio-seek::-moz-range-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--track-fill) 0 var(--played),#ededed38 var(--played) 100%)}.audio-seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:11px;height:11px;border-radius:50%;margin-top:-3.5px;border:1px solid #ededed;background:#ededed;box-shadow:0 2px 7px #0004}.audio-seek::-moz-range-thumb{width:10px;height:10px;border:1px solid #ededed;border-radius:50%;background:#ededed;box-shadow:0 2px 7px #0004}.audio-seek:disabled{opacity:.4;cursor:wait}.audio-error{flex-basis:100%;font-size:12px;padding:0 14px 10px;color:var(--text);line-height:1.5}.audio-play:active,.audio-rate:active{box-shadow:inset 0 2px 6px #0005}.audio-play:focus-visible,.audio-rate:focus-visible,.audio-seek:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media(hover:hover) and (pointer:fine){.audio-play:hover{background:linear-gradient(135deg,#61009a,#401559);border-color:#ededed99}.audio-rate:hover{background:#ffffff1a;border-color:#ededed77}}
[data-theme=light] .result-audio{background:linear-gradient(125deg,#40155916,#ffffffb3 58%,#61009a16);border-color:#40155933;box-shadow:0 8px 26px #4015590a,inset 0 1px 0 #ffffffb3}[data-theme=light] .audio-rate{background:#ffffff66;border-color:#40155933}[data-theme=light] .audio-seek::-webkit-slider-runnable-track{background:linear-gradient(90deg,#61009a 0 var(--played),#40155933 var(--played) 100%)}[data-theme=light] .audio-seek::-moz-range-track{background:linear-gradient(90deg,#61009a 0 var(--played),#40155933 var(--played) 100%)}[data-theme=light] .audio-seek::-webkit-slider-thumb{background:#61009a;border-color:#61009a}[data-theme=light] .audio-seek::-moz-range-thumb{background:#61009a;border-color:#61009a}
@media(max-width:800px){.result-audio{gap:12px;padding:8px 10px;min-height:62px;margin:23px 0 26px}.audio-rate{min-width:46px;padding:8px 10px}.audio-play{width:44px}}
@media(prefers-reduced-transparency:reduce){.result-audio{backdrop-filter:none;background:var(--panel)}}

.audio-volume-control{position:relative;flex:0 0 44px;min-height:44px;z-index:2}
.audio-volume-toggle{width:44px;min-width:44px;padding:10px;display:flex;align-items:center;justify-content:center;border-radius:999px}
.audio-volume-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
.audio-volume-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
/* One capsule grows upward from the sound button, without moving the player. */
.audio-volume-control::before{content:"";position:absolute;inset:auto 0 0;height:168px;border:1px solid var(--line);border-radius:999px;background:var(--panel);box-shadow:0 8px 24px #0003,inset 0 1px 0 #ffffff55;pointer-events:none;clip-path:inset(124px 0 0 round 22px);opacity:0;transition:clip-path 200ms var(--ease-out),opacity 160ms var(--ease-out)}
.volume-open .audio-volume-control::before{clip-path:inset(0 0 0 round 22px);opacity:1}
.audio-volume-toggle{position:relative;z-index:4;background:#ffffff0a;border-color:#ededed4d;box-shadow:inset 0 1px 0 #ffffff66,inset 0 -1px 0 #ffffff15;transition:background-color 160ms var(--ease-out),border-color 160ms var(--ease-out),box-shadow 160ms var(--ease-out)}
.result-audio.volume-open .audio-volume-toggle{background:transparent;border-color:transparent;box-shadow:none}
.audio-volume-popover{position:absolute;left:0;bottom:100%;width:44px;height:124px;z-index:3;opacity:0;transform:translateY(8px);transform-origin:bottom center;pointer-events:none;transition:opacity 160ms var(--ease-out),transform 200ms var(--ease-out)}
.volume-open .audio-volume-popover{opacity:1;transform:translateY(0);pointer-events:auto}
.audio-volume-popover[hidden]{display:none}
.audio-volume-panel{display:flex;align-items:center;justify-content:center;height:100%;padding:16px 0 8px}
.audio-volume{appearance:none;-webkit-appearance:none;writing-mode:vertical-lr;direction:rtl;width:32px;height:100px;margin:0;padding:0;background:transparent;cursor:pointer;touch-action:none}
.audio-volume::-webkit-slider-runnable-track{width:4px;border-radius:4px;background:linear-gradient(to top,var(--track-fill) var(--volume-percent),var(--line) var(--volume-percent))}
.audio-volume::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:12px;height:12px;margin-left:-4px;border:1px solid var(--text);border-radius:50%;background:var(--text)}
.audio-volume::-moz-range-track{width:4px;border-radius:4px;background:linear-gradient(to top,var(--track-fill) var(--volume-percent),var(--line) var(--volume-percent))}
.audio-volume::-moz-range-thumb{width:11px;height:11px;border:1px solid var(--text);border-radius:50%;background:var(--text)}
.audio-volume:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:12px}
@media(hover:hover) and (pointer:fine){.audio-volume-toggle:hover{background:#ffffff1a;border-color:#ededed77}}
[data-theme=light] .audio-volume-toggle{background:#ffffff66;border-color:#40155933}
@media(max-width:800px){.result-audio{gap:8px}}

.result-audio.volume-raised{z-index:5}

[data-theme=light] .volume-open .audio-volume-toggle{background:transparent;border-color:transparent}

[data-theme=light] .audio-volume-toggle{background:#ffffff66;border-color:#40155933}
.result-audio[data-volume-motion=instant] .audio-volume-control::before,.result-audio[data-volume-motion=instant] .audio-volume-popover,.result-audio[data-volume-motion=instant] .audio-volume-toggle{transition:none}
@media(prefers-reduced-motion:reduce){.audio-volume-control::before,.audio-volume-popover,.audio-volume-toggle{transition:none}.audio-volume-popover{transform:none}}