*{box-sizing:border-box}
html,body{height:100%;margin:0}
:root{
  --dur-sky-move: 60s;
  --dur-daynight: 60s;
  --dur-river: 12s;

  --river-height: 18vh;          

  --sky-day-1:#8acaf6; --sky-day-2:#bde4ff;
  --sky-night-1:#0b1b3a; --sky-night-2:#132b4a;

  --grass-1:#7ec971; --grass-2:#5db055;

  --river-1:#64b9ff; --river-2:#2d8fe2;

  --house-body:#f4e5db; --house-border:#caa68a;
  --roof:#6b4a35; --door:#6b4227; --chimney:#8b4a39;
  --window-day:#fff6b8; --window-frame:#c2d7e6; --window-night:#ffd65d;

  --mount-1:#7a8896; --mount-2:#677484; --mount-3:#566274;

  --shadow-soft:0 6px 8px rgba(0,0,0,.08);
  --shadow-deep:0 20px 60px rgba(0,0,0,.35);
}
body{font-family:Inter, Segoe UI, Arial, sans-serif;background:#87ceeb}
.scene{
  position:relative; width:100%; min-height:100vh; overflow:hidden;
  background:linear-gradient(var(--sky-day-1) 0%, var(--sky-day-2) 55%, #7ec38f 100%);
  animation: skyTint var(--dur-daynight) linear infinite;
  box-shadow: var(--shadow-deep) inset 0 0 0 1px rgba(255,255,255,.05);
}
.ground{
  position:relative; z-index:4; margin-top:48vh; height:52vh;
  background:linear-gradient(var(--grass-1) 0%, var(--grass-2) 100%);
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:6vh;
}
.credits{position:fixed;left:8px;bottom:8px;font-size:12px;color:rgba(0,0,0,.6)}
@keyframes skyTint{
  0%{background:linear-gradient(var(--sky-day-1) 0%, var(--sky-day-2) 55%, #7ec38f 100%)}
  49%{background:linear-gradient(var(--sky-day-1) 0%, var(--sky-day-2) 55%, #7ec38f 100%)}
  51%{background:linear-gradient(var(--sky-night-1) 0%, var(--sky-night-2) 55%, #0f2b1f 100%)}
  100%{background:linear-gradient(var(--sky-day-1) 0%, var(--sky-day-2) 55%, #7ec38f 100%)}
}
@media (prefers-reduced-motion:reduce){.scene{animation:none}}