*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:#EBDFC6;font-family:'Nunito','Avenir Next','Trebuchet MS',system-ui,sans-serif;color:#3A2E22;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
a{color:#D97B54;text-decoration:none;cursor:pointer}a:hover{color:#B85F3C}
button{font-family:inherit;cursor:pointer;border:0;color:inherit;background:none}
input{font-family:inherit;color:inherit;border:0;outline:none}
input[type=range]{accent-color:#D97B54;width:100%;height:30px;touch-action:pan-x}
::selection{background:#E9B85C55}

#app,.desk{min-height:100dvh}
.desk{display:flex;align-items:center;justify-content:center;padding:14px;background:#EBDFC6}
.phone{position:relative;width:min(420px,100%);height:min(880px,calc(100dvh - 28px));min-height:600px;background:#F6EEDD;border-radius:30px;box-shadow:0 30px 80px rgba(58,46,34,.32),0 4px 18px rgba(58,46,34,.16);overflow:hidden}
/* on a real phone the garden fills the screen — no desk, no frame */
@media (max-width:520px){
  .desk{padding:0}
  .phone{width:100%;height:100dvh;min-height:100dvh;border-radius:0;box-shadow:none}
}

@keyframes sway{0%,100%{transform:rotate(-.7deg)}50%{transform:rotate(.7deg)}}
@keyframes swayB{0%,100%{transform:rotate(.6deg)}50%{transform:rotate(-.6deg)}}
.sway{animation:sway 7.5s ease-in-out infinite}
.swayB{animation:swayB 8.5s ease-in-out infinite}
@keyframes fly1{0%,100%{transform:translate(0px,0px)}25%{transform:translate(30px,-16px)}50%{transform:translate(62px,6px)}75%{transform:translate(28px,18px)}}
@keyframes fly2{0%,100%{transform:translate(0px,0px)}30%{transform:translate(-36px,12px)}60%{transform:translate(-60px,-10px)}}
.fly1{animation:fly1 17s ease-in-out infinite}
.fly2{animation:fly2 21s ease-in-out infinite}
@keyframes flap{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.55)}}
.flap{animation:flap .5s ease-in-out infinite}
@keyframes fire{0%,100%{opacity:.08;transform:translate(0px,0px)}35%{opacity:.95}60%{opacity:.5;transform:translate(9px,-11px)}80%{opacity:.85}}
.fire{animation:fire 5.5s ease-in-out infinite}
@keyframes rainfall{0%{transform:translateY(-14px);opacity:0}12%{opacity:.55}85%{opacity:.5}100%{transform:translateY(74px);opacity:0}}
.rainl{animation:rainfall 1.15s linear infinite}
@keyframes snowfall{0%{transform:translate(0px,-10px);opacity:0}12%{opacity:.95}50%{transform:translate(7px,44px)}100%{transform:translate(-3px,96px);opacity:0}}
.snowl{animation:snowfall 5s linear infinite}
@keyframes twinkle{0%,100%{opacity:.3}50%{opacity:1}}
.twk{animation:twinkle 3.4s ease-in-out infinite}
@keyframes sparkle{0%{opacity:0;transform:scale(.3)}25%{opacity:1;transform:scale(1.2)}100%{opacity:0;transform:scale(1.7) translateY(-10px)}}
.spk{animation:sparkle .95s ease-out forwards}
@keyframes popIn{0%{opacity:0;transform:translateY(9px) scale(.96)}100%{opacity:1;transform:translateY(0px) scale(1)}}
.pop{animation:popIn .42s cubic-bezier(.34,1.3,.64,1) both}