/* Keep the printed image as the accessible, no-script and reduced-motion version. */
:where([data-living-art]) { position: relative; isolation: isolate; }
[data-living-art] > img, [data-living-art] > picture, [data-living-art] > picture > img { display: block; width: 100%; }
[data-living-art] > .living-art-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .4s ease; }
[data-living-ready=true] > .living-art-canvas { opacity: 1; }
[data-living-art] > .living-art-toggle { position: absolute; right: 9px; bottom: 9px; z-index: 3; display: grid; place-items: center; width: 30px; height: 30px; min-height: 0; padding: 0; border: 1px solid #bca674aa; border-radius: 50%; background: #faf3e9e8; color: #52634b; cursor: pointer; box-shadow: 0 1px 4px #193e3512; }
[data-living-art] > .living-art-toggle:hover { background: #fff8e9; border-color: #9f804b; }
[data-living-art] > .living-art-toggle:focus-visible { outline: 2px solid #193e35; outline-offset: 3px; }
.living-art-toggle svg { width: 14px; height: 14px; }
.living-art-toggle .living-play, .living-art-toggle[data-paused=true] .living-pause, [data-living-art] > [hidden] { display: none; }
.living-art-toggle[data-paused=true] .living-play { display: block; }
@media (prefers-reduced-motion: reduce) { [data-living-art] > .living-art-canvas, [data-living-art] > .living-art-toggle { display: none; } }
@media print { [data-living-art] > .living-art-canvas, [data-living-art] > .living-art-toggle { display: none; } }