.ds-audio{--audio-size:52px;vertical-align:middle;align-items:flex-end;gap:8px;display:inline-flex}.ds-audio--sm{--audio-size:36px}.ds-audio--lg{--audio-size:72px}.ds-audio--xl{--audio-size:88px}.ds-audio__main,.ds-audio__slow{cursor:pointer;transition:transform var(--dur-press) var(--ease-out), filter var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);border:none;place-items:center;padding:0;display:grid}.ds-audio__main{width:var(--audio-size);height:var(--audio-size);background:radial-gradient(circle at 30% 22%, #ffffff73 0 10%, transparent 34%), linear-gradient(180deg, color-mix(in srgb, var(--skill-listening) 78%, #fff) 0%, var(--skill-listening) 55%, color-mix(in srgb, var(--skill-listening) 80%, #0b3a6e) 100%);color:#fff;box-shadow:inset 0 1px 0 #ffffff80, 0 8px 16px -8px color-mix(in srgb, var(--skill-listening) 75%, transparent);border-radius:32%}.ds-audio__main .ds-icon{filter:drop-shadow(0 1px #00285a59)}.ds-audio--sm .ds-audio__main{border-radius:50%}.ds-audio__main:hover{filter:brightness(1.05)}.ds-audio__main:active,.ds-audio__slow:active{transform:scale(.93)}.ds-audio__main.is-playing{box-shadow:inset 0 1px 0 #ffffff80, 0 0 0 5px color-mix(in srgb, var(--skill-listening) 22%, transparent), 0 8px 16px -8px color-mix(in srgb, var(--skill-listening) 75%, transparent)}.ds-audio__slow{width:calc(var(--audio-size) * .66);height:calc(var(--audio-size) * .66);background:var(--c-surface-2);min-width:32px;min-height:32px;color:var(--c-ink-2);box-shadow:var(--gloss-top), inset 0 0 0 1px var(--c-line);border-radius:50%}.ds-audio__slow:hover{color:var(--c-ink);background:var(--c-surface-3)}.ds-audio__slow.is-playing{color:var(--skill-listening);box-shadow:var(--gloss-top), inset 0 0 0 2px var(--skill-listening)}.ds-audio__wave{align-items:center;gap:3px;height:40%;display:flex}.ds-audio__wave i{transform-origin:50%;width:4px;height:100%;animation:ds-audio-bar .9s var(--ease-in-out) infinite;background:#fff;border-radius:4px}.ds-audio__wave i:nth-child(2){animation-delay:-.3s}.ds-audio__wave i:nth-child(3){animation-delay:-.6s}.ds-audio__wave i:nth-child(4){animation-delay:-.15s}@keyframes ds-audio-bar{0%,to{transform:scaleY(.35)}50%{transform:scaleY(1)}}@media (prefers-reduced-motion:reduce){.ds-audio__wave i{transform:scaleY(.7)}.ds-audio__main:active,.ds-audio__slow:active{transform:none}}