:root { color-scheme: light; font-family: Arial, Helvetica, sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #fff; }
.scene, .poster, canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.poster { object-fit: contain; }
canvas { display: block; opacity: 0; }
.scene[data-ready] canvas { opacity: 1; }
.scene[data-ready] .poster { visibility: hidden; }
.scene[data-ready] { cursor: grab; }
.scene.is-dragging { cursor: grabbing; }
.motion-toggle { position: absolute; right: .75rem; bottom: .75rem; z-index: 1; padding: .5rem .75rem; border: 1px solid #767676; border-radius: .25rem; background: #fff; color: #222; font: inherit; font-size: .75rem; cursor: pointer; }
.motion-toggle:focus-visible { outline: 3px solid #226b83; outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }