.cYU2kq_example{border:1px solid var(--color-line);background:var(--color-diagram-panel);border-radius:3px;position:relative}.cYU2kq_controls{position:absolute;top:.75rem;right:.75rem}.cYU2kq_controls button{border:1px solid var(--color-line);width:2.75rem;height:2.75rem;color:var(--color-ink);background:var(--color-paper);border-radius:3px;justify-content:center;align-items:center;display:inline-flex}.cYU2kq_controls button:hover{background:var(--color-leaf);border-color:var(--color-moss)}.cYU2kq_controls svg{width:1.125rem;height:1.125rem}.cYU2kq_canvas{place-items:center;min-height:12rem;padding:2rem;display:grid;overflow:hidden}.cYU2kq_example figcaption{padding:0 1rem 1rem}.cYU2kq_loader{--size:2.5em;--thickness:.5em;--lat:calc((var(--size) - var(--thickness)) / 2);--offset:calc(var(--lat) - var(--thickness));--pink:#e11462bf;--green:#3db88fbf;--blue:#6fcadcbf;--yellow:#e9a920bf;width:var(--size);height:var(--size);font-size:2.5rem;position:relative}.cYU2kq_loader:not([data-stage=final]){background:var(--color-leaf);outline:1px dashed var(--color-muted)}.cYU2kq_loader:not([data-stage=element]):before,.cYU2kq_loader:not([data-stage=element]):after{content:"";width:var(--thickness);height:var(--thickness);border-radius:calc(var(--thickness) / 2);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.cYU2kq_loader:is([data-stage=pseudo],[data-stage=shadows]):before,.cYU2kq_loader:is([data-stage=pseudo],[data-stage=shadows]):after{background:var(--color-muted)}.cYU2kq_loader:is([data-stage=shadows],[data-stage=motion],[data-stage=final]):before{box-shadow:var(--lat) calc(-1 * var(--offset)) var(--pink), calc(-1 * var(--lat)) var(--offset) var(--blue)}.cYU2kq_loader:is([data-stage=shadows],[data-stage=motion],[data-stage=final]):after{box-shadow:var(--offset) var(--lat) var(--green), calc(-1 * var(--offset)) calc(-1 * var(--lat)) var(--yellow)}.cYU2kq_loader:is([data-stage=motion],[data-stage=final]):before{animation:2s infinite cYU2kq_horizontal}.cYU2kq_loader:is([data-stage=motion],[data-stage=final]):after{animation:2s infinite cYU2kq_vertical}.cYU2kq_loader[data-stage=final]{transform:rotate(165deg)}.cYU2kq_loader[data-paused=true]:before,.cYU2kq_loader[data-paused=true]:after{animation-play-state:paused}@keyframes cYU2kq_horizontal{0%,to{width:var(--thickness);box-shadow:var(--lat) calc(-1 * var(--offset)) var(--pink), calc(-1 * var(--lat)) var(--offset) var(--blue)}35%{width:var(--size);box-shadow:0 calc(-1 * var(--offset)) var(--pink), 0 var(--offset) var(--blue)}70%{width:var(--thickness);box-shadow:calc(-1 * var(--lat)) calc(-1 * var(--offset)) var(--pink), var(--lat) var(--offset) var(--blue)}}@keyframes cYU2kq_vertical{0%,to{height:var(--thickness);box-shadow:var(--offset) var(--lat) var(--green), calc(-1 * var(--offset)) calc(-1 * var(--lat)) var(--yellow)}35%{height:var(--size);box-shadow:var(--offset) 0 var(--green), calc(-1 * var(--offset)) 0 var(--yellow)}70%{height:var(--thickness);box-shadow:var(--offset) calc(-1 * var(--lat)) var(--green), calc(-1 * var(--offset)) var(--lat) var(--yellow)}}@media (prefers-reduced-motion:reduce){.cYU2kq_loader:is([data-stage=motion],[data-stage=final]):before,.cYU2kq_loader:is([data-stage=motion],[data-stage=final]):after{animation-duration:2s!important}}