: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: hidden; overscroll-behavior: none; }
main { min-height: 100svh; display: grid; place-items: center; position: relative; overflow: hidden; }
.scene { position: relative; width: min(92vw, 1280px, calc(92svh * 1.5)); aspect-ratio: 3 / 2; margin: 0; transform: translate(1.5vw, 2vh); isolation: isolate; }
.pond { display: block; pointer-events: none; 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.webp?rev=6') 0 0 / 400% 300% no-repeat; mix-blend-mode: multiply; opacity: 1; transition: opacity .18s linear; }
.motion-ready .still-person { opacity: 0; }
.motion-toggle { position: fixed; z-index: 10; touch-action: manipulation; bottom: max(22px, env(safe-area-inset-bottom)); right: max(22px, env(safe-area-inset-right)); width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(243,245,246,.58); color: #59666e; display: grid; place-items: center; cursor: pointer; opacity: .58; transition: opacity .2s, background .2s; -webkit-tap-highlight-color: transparent; }
.motion-toggle[hidden] { display: none; }
.motion-toggle:hover, .motion-toggle:focus-visible { opacity: .9; background: #eef1f2; }
.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: min(108vw, 760px, calc(92svh * 1.5)); transform: translate(4vw, 2vh); flex-shrink: 0; }
  .motion-toggle { bottom: max(16px, env(safe-area-inset-bottom)); right: max(16px, env(safe-area-inset-right)); }
}
@media (max-width: 380px) and (orientation: portrait) {
  .scene { width: min(100vw, calc(90svh * 1.5)); transform: translate(0, 1vh); }
  .motion-toggle { width: 42px; height: 42px; }
}
@media (max-width: 640px) and (orientation: landscape) {
  .scene { width: min(94vw, 760px, calc(88svh * 1.5)); transform: translate(1vw, 0); }
}
@media (hover: none) {
  .motion-toggle { opacity: .68; }
}
@media (prefers-reduced-motion: reduce) {
  .still-person, .motion-toggle { transition: none; }
  #motion { display: none; }
  .motion-ready .still-person { opacity: 1; }
}