.anim{--anim-dur:0.8s;display:grid;grid-template-columns:minmax(0,1fr);container-type:inline-size;gap:.5rem;margin:0;padding:.75rem;border-radius:.75rem;border:1.5px solid rgba(128,128,128,.25);background:var(--pt-sand)}html.dark .anim{background:rgba(255,255,255,3%)}.nb .anim{background:rgba(255,255,255,.55)}.anim-title{font-weight:700}.anim-stage{display:flex;justify-content:center}.anim-stage svg{display:block;width:100%;max-width:40rem;height:auto;max-height:24rem;overflow:visible}.anim-stage [data-show],.anim-stage [data-draw],.anim-stage [data-move],.anim-stage [data-style]{transition-duration:var(--el-dur,var(--anim-dur));transition-timing-function:ease-in-out;transition-property:opacity,visibility,transform,fill,stroke,fill-opacity,stroke-opacity,stroke-width,stroke-dashoffset,r,cx,cy,x,y,width,height}.anim-stage .anim-off{opacity:0;visibility:hidden}.anim-stage [data-move]{transform-box:fill-box;transform-origin:center}.anim-stage .anim-drawn{stroke-dasharray:1;stroke-dashoffset:0}.anim-stage .anim-undrawn{stroke-dashoffset:1}@media(prefers-reduced-motion:reduce){html:not(.a11y-motion) .anim-stage :is([data-show],[data-draw],[data-move],[data-style]){transition-duration:var(--el-dur,var(--anim-dur))!important}}.anim-captions{display:grid;min-height:1.5em}.anim-caption{grid-area:1/1;visibility:hidden;line-height:1.6;font-size:1.125rem}.anim-caption.is-on{visibility:visible}.anim-caption>*+*{margin-top:.4em}.anim-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem}.anim-steps,.anim-sound{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem}.anim-btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:999px;border:1.5px solid var(--pt-tile);color:var(--pt-tile);background:0 0;cursor:pointer}.anim-btn:hover:not(:disabled){background:var(--pt-tile-soft)}.anim-btn:disabled{opacity:.35;cursor:default}.anim-btn svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.anim-play{width:2.75rem;height:2.75rem;background:var(--pt-tile);color:#fff}html.dark .anim-play{color:#111}.anim-play:hover:not(:disabled){background:var(--pt-tile);filter:brightness(1.1)}.anim-play svg{fill:currentColor;stroke:none}.anim-i-pause,.is-playing .anim-i-play{display:none}.is-playing .anim-i-pause{display:inline}.anim-count{min-width:6.5em;font-size:.9rem;color:var(--pt-muted);font-variant-numeric:tabular-nums;text-align:center}.anim-i-off,.is-muted .anim-i-on{display:none}.is-muted .anim-i-off{display:inline}.anim-volume{width:5.5rem;accent-color:var(--pt-tile)}.anim-speed{padding:.2rem .4rem;border-radius:.5rem;border:1.5px solid rgba(128,128,128,.35);background:0 0;color:inherit;font-size:.9rem}.anim>*{min-width:0}@media(max-width:40rem){.anim{padding:.5rem}}@container(max-width:24rem){.anim-btn { width: 2rem; height: 2rem; }
  .anim-play { width: 2.5rem; height: 2.5rem; }
  .anim-count { min-width: 0; font-size: 0.8rem; }
  .anim-volume { width: 4.5rem; }
  .anim-caption { font-size: 1rem; }
}@media print{.anim-bar{display:none}.anim-captions{display:block;counter-reset:anim}.anim-caption{visibility:visible;counter-increment:anim}.anim-caption::before{content:counter(anim)". ";font-weight:700}}