:root { color-scheme: light; background: #fff; color: #596269; font-family: system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { background: #fff; overflow-x: hidden; }
main { min-height: 100svh; display: grid; place-items: center; position: relative; overflow: hidden; }
.scene { position: relative; width: min(92vw, 1280px); aspect-ratio: 3 / 2; margin: 0; transform: translate(1.5vw, 3vh); isolation: isolate; }
.pond { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; filter: saturate(.94) contrast(.985); }
#motion { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: multiply; pointer-events: none; }
.still-person { position: absolute; left: 13.35%; top: 31.93%; width: 16.93%; aspect-ratio: 3 / 4; background: url('/assets/person.png') 0 0 / 400% 300% no-repeat; mix-blend-mode: multiply; }
.motion-toggle { position: fixed; bottom: max(22px, env(safe-area-inset-bottom)); right: max(22px, env(safe-area-inset-right)); width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #828b91; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity 1.2s 18s, background .2s; -webkit-tap-highlight-color: transparent; }
.motion-toggle[hidden] { display: none; }
.motion-toggle:hover, .motion-toggle:focus-visible { opacity: .75; background: #f3f5f6; transition-delay: 0s; }
.motion-toggle:focus-visible { outline: 2px solid #788a98; outline-offset: 3px; }
.motion-toggle svg { grid-area: 1 / 1; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.motion-toggle .play-icon { display: none; }
.motion-toggle[aria-pressed="true"] .pause-icon { display: none; }
.motion-toggle[aria-pressed="true"] .play-icon { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 640px) {
  .scene { width: 116vw; max-width: 760px; transform: translate(8vw, 3vh); flex-shrink: 0; }
  .motion-toggle { bottom: max(16px, env(safe-area-inset-bottom)); right: max(16px, env(safe-area-inset-right)); }
}
@media (max-width: 640px) and (orientation: landscape) {
  .scene { width: min(96vw, 760px); transform: translate(3vw, 3vh); }
}
@media (prefers-reduced-motion: reduce) { .motion-toggle { transition: none; } }