* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body { background: #bed6de; }
main { position: relative; width: 100%; height: 100%; height: 100svh; overflow: hidden; background: linear-gradient(#bad4df, #e1e5d5 66%); }
.ground { position: absolute; inset: 64% 0 0; background: linear-gradient(#dfcba2, #d2b787); border-top: 1px solid #cbbb97; }
.traveller { --size: clamp(46px, 5vw, 70px); position: absolute; top: 73%; left: 0; width: var(--size); height: var(--size); transform: translateX(-160px); }
.hop { position: absolute; bottom: 0; width: 100%; height: 100%; }
.weed { display: block; width: 100%; height: 100%; user-select: none; }
.shadow { position: absolute; left: 15%; bottom: 4%; width: 70%; height: 6%; background: #8a6c3c; opacity: .13; border-radius: 50%; filter: blur(2px); }
.motion-toggle { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: default; -webkit-tap-highlight-color: transparent; }
.motion-toggle span { position: absolute; bottom: 16px; right: 16px; padding: 8px 12px; border-radius: 3px; background: #f5eddc; color: #584c38; font: 12px/1.4 system-ui, sans-serif; opacity: 0; }
.motion-toggle:focus-visible { outline: 2px solid #6f786b; outline-offset: -5px; }
.motion-toggle:focus-visible span { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .traveller { display: none; }
  .motion-toggle { display: none; }
}