:root { color-scheme: dark; background: #080808; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; }
main { display: grid; place-items: center; width: 100%; min-height: 100vh; min-height: 100svh; }
picture, video { grid-area: 1 / 1; width: 100%; }
img, video { display: block; width: 100%; height: 100vh; height: 100svh; object-fit: contain; }
video { visibility: hidden; }
video.playing { visibility: visible; }
.motion-toggle { position: fixed; right: 16px; bottom: 16px; width: 44px; height: 44px; border: 1px solid #b8a891; background: #080808c9; color: #f1e7d4; font: 18px system-ui; cursor: pointer; }
.motion-toggle:focus-visible { outline: 2px solid #f1e7d4; outline-offset: 3px; }
.motion-toggle[hidden] { display: none; }