.clip-player{display:inline-flex;align-items:center;gap:10px;max-width:100%;margin:10px 0;vertical-align:middle}
.clip-player .clip-play{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 52px;width:52px;height:52px;min-height:52px;padding:2px;border:0;border-radius:50%;background:#e7f4fc;color:#086ba9;box-shadow:0 3px 10px #086ba919;cursor:pointer;transition:background .15s,transform .15s}
.clip-player .clip-play:hover{background:#d6edfa;transform:translateY(-1px)}
.clip-player .clip-play:focus-visible{outline:3px solid #cf8c28;outline-offset:3px}
.clip-play svg{display:block;width:48px;height:48px;overflow:visible}
.clip-play circle{fill:none;stroke-width:2.5}
.clip-ring-bg{stroke:#bfddeE}
.clip-ring{stroke:#086ba9;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--clip-progress,0));transform:rotate(-90deg);transform-origin:24px 24px}
.clip-play path{fill:currentColor;stroke:none}
.clip-icon-pause{display:none}
.clip-play.is-playing .clip-icon-play{display:none}
.clip-play.is-playing .clip-icon-pause{display:block}
.clip-play.is-loading .clip-ring{stroke-dasharray:22 78;stroke-dashoffset:0;animation:clip-loading 1s linear infinite}
@keyframes clip-loading{to{transform:rotate(270deg)}}
.clip-player audio,.clip-player [hidden],.vocab-audio.has-clip-player>span[hidden]{display:none!important}
.vocab-audio.has-clip-player{display:block;padding:0;margin:8px 0;border:0;background:transparent}
.clip-error{max-width:260px;color:#a43b27;font:400 .85rem/1.5 system-ui}
.flashcard-audio{display:flex;justify-content:center;padding:0 16px 12px}
.flashcard-audio>.clip-player{margin:0}
.flashcard-audio>audio{max-width:100%}
@media(prefers-reduced-motion:reduce){.clip-player .clip-play{transition:none}.clip-play.is-loading .clip-ring{animation:none}}