.fragment-play{
  --fragment-accent:var(--tc,var(--brand,var(--accent,#d80b24)));
  appearance:none;-webkit-appearance:none;display:grid;place-items:center;flex:none;
  width:44px;height:44px;padding:0;border:0;border-radius:50%;
  background:transparent;color:var(--fragment-accent);font:inherit;cursor:pointer;
}
.fragment-play-glyph{
  display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;
  background:color-mix(in srgb,var(--fragment-accent) 14%,transparent);pointer-events:none;
  transition:background .15s ease,color .15s ease,transform .15s ease;
}
.fragment-play:not(:disabled):hover .fragment-play-glyph{background:color-mix(in srgb,var(--fragment-accent) 26%,transparent)}
.fragment-play[data-playback-state="playing"] .fragment-play-glyph,
.fragment-play[data-playback-state="playing"]:hover .fragment-play-glyph{background:var(--fragment-accent);color:#fff}
.fragment-play:not(:disabled):active .fragment-play-glyph{transform:scale(.94)}
.fragment-play:focus-visible{outline:2px solid var(--fragment-accent);outline-offset:2px}
.fragment-play-glyph .anticon{display:inline-flex}
.fragment-play-glyph svg{display:block;width:14px;height:14px}
.fragment-play-spinner{width:14px;height:14px;border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:fragment-play-spin .7s linear infinite}
.fragment-play:disabled{opacity:.5;cursor:not-allowed}
.fragment-play-error{display:block;color:var(--fragment-accent,var(--accent,#d80b24));font-size:12px;margin-top:6px}
@keyframes fragment-play-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.fragment-play-spinner{animation:none}}