:root { color-scheme: light; background: #e9e6df; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body { -webkit-tap-highlight-color: transparent; }
main, #world, .still { position: fixed; inset: 0; width: 100%; height: 100%; }
main { isolation: isolate; }
.still { display: block; overflow: hidden; }
.still img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 50%; transform: scale(1.035); }
#world { display: block; opacity: 0; transition: opacity 1.4s ease; touch-action: none; }
html[data-renderer="webgl"] #world { opacity: 1; }
#motion { position: fixed; z-index: 2; right: max(28px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #34382f17; border-radius: 50%; padding: 10px; background: #eeede725; color: #2f383b; opacity: .35; cursor: pointer; transition: opacity .3s, background .3s, border-color .3s; }
#motion:hover, #motion:focus-visible { opacity: .9; background: #faf9f275; border-color: #45545740; }
#motion:focus-visible { outline: 1px solid #3e6873; outline-offset: 5px; }
#motion svg { width: 22px; height: 22px; }
#motion .play, #motion[aria-pressed="true"] .pause { display: none; }
#motion[aria-pressed="true"] .play { display: block; }
html[data-renderer="fallback"] #motion { display: none; }
@media (max-width: 600px) { #motion { right: max(16px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { #world, #motion { transition: none; } }