@layer components{.loop-ctl{position:absolute;bottom:var(--ctl-b, 1rem);left:var(--ctl-b, 1rem);z-index:3;display:grid;place-items:center;width:var(--ctl, 2.5rem);height:var(--ctl, 2.5rem);border-radius:50%;background:color-mix(in srgb,var(--color-sheet) 72%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--color-ink);transition:background-color var(--duration-ui) var(--ease-out),color var(--duration-ui) var(--ease-out)}.loop-ctl>*{grid-area:1 / 1}.loop-ring{width:100%;height:100%;transform:rotate(-90deg);fill:none;stroke-width:1}.loop-ring-t{stroke:var(--color-line-2)}.loop-ring-p{stroke:var(--color-ink);stroke-dasharray:109.96px;stroke-dashoffset:109.96px}.loop-ctl:after{content:"";position:absolute;inset:-.25rem}.loop-ctl:hover{background:var(--color-sheet)}.loop-ctl .ico{width:calc(var(--ctl, 2.5rem) * .4);height:calc(var(--ctl, 2.5rem) * .4)}.loop-ico-pause .ico{width:calc(var(--ctl, 2.5rem) * .6);height:calc(var(--ctl, 2.5rem) * .6);stroke-width:2.25}.loop-ico-play .ico{fill:currentColor;stroke-width:1;margin-left:1px}.loop-ctl[aria-pressed=true] .loop-ico-pause,.loop-ctl:not([aria-pressed=true]) .loop-ico-play{display:none}.loop-ctl:not(.is-replay) .loop-ico-replay{display:none}.loop-ctl.is-replay :is(.loop-ring,.loop-ico-pause,.loop-ico-play){display:none}.loop-ctl.is-replay .loop-ico-replay{display:grid}.loop-ctl.is-replay{box-shadow:inset 0 0 0 1px var(--color-line-2)}.loop-ctl>span{display:grid}.how-vis{position:relative}.how-vis.has-ctl{--ctl-b: .75rem;padding-bottom:calc(2 * var(--ctl-b) + var(--ctl, 2.5rem))}.how .how-vis>.loop-ctl{width:var(--ctl, 2.5rem);max-width:none}@media(min-width:768px){.how-vis.has-ctl{--ctl-b: 1rem}}}