:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100vh;overflow:hidden;background:#1a3a2a;color:#fafafa}.scene{position:relative;width:100vw;height:100vh;overflow:hidden;background:linear-gradient(180deg,#87ceeb,#b0e0e6 40%,#4a8c5c 40%,#3a7a4c)}.moon{position:absolute;top:40px;right:80px;width:80px;height:80px;border-radius:50%;background:#ffe4b5;box-shadow:0 0 40px 10px #ffe4b54d}.stars{position:absolute;top:0;left:0;width:100%;height:40%}.star{position:absolute;width:3px;height:3px;background:#fff;border-radius:50%;animation:twinkle 2s ease-in-out infinite alternate}@keyframes twinkle{0%{opacity:.3}to{opacity:1}}.grass-container{position:absolute;bottom:0;left:0;width:100%;height:60%;pointer-events:none}.grass-blade{position:absolute;bottom:0;width:8px;background:linear-gradient(to top,#2d6a3a,#4a9c5a);border-radius:50% 50% 0 0;transform-origin:bottom center;animation:sway 3s ease-in-out infinite}@keyframes sway{0%,to{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}.lily-pad{position:absolute;width:80px;height:40px;background:#2d8a4e;border-radius:50%;border:2px solid #1a6b35}.lily-pad:after{content:"";position:absolute;top:5px;left:50%;width:2px;height:30px;background:#1a6b35;transform:translate(-50%) rotate(15deg)}.frog{position:absolute;width:70px;height:60px;transition:none;z-index:10;filter:drop-shadow(2px 4px 6px rgba(0,0,0,.3))}.frog-body{position:absolute;bottom:0;left:50%;transform:translate(-50%);width:55px;height:45px;background:#4caf50;border-radius:50% 50% 45% 45%;border:2px solid #388E3C}.frog-belly{position:absolute;bottom:2px;left:50%;transform:translate(-50%);width:35px;height:25px;background:#81c784;border-radius:50%}.frog-eye{position:absolute;top:-5px;width:18px;height:20px;background:#4caf50;border-radius:50%;border:2px solid #388E3C}.frog-eye-left{left:5px}.frog-eye-right{right:5px}.frog-pupil{position:absolute;top:6px;left:50%;transform:translate(-50%);width:8px;height:10px;background:#1a1a1a;border-radius:50%}.frog-pupil-shine{position:absolute;top:2px;right:1px;width:3px;height:3px;background:#fff;border-radius:50%}.frog-mouth{position:absolute;bottom:12px;left:50%;transform:translate(-50%);width:20px;height:8px;border-bottom:2px solid #2E7D32;border-radius:0 0 50% 50%}.frog-leg-left,.frog-leg-right{position:absolute;bottom:-2px;width:20px;height:12px;background:#4caf50;border:2px solid #388E3C}.frog-leg-left{left:-8px;border-radius:50% 0 50% 50%;transform-origin:right center}.frog-leg-right{right:-8px;border-radius:0 50% 50%;transform-origin:left center}.frog.dancing .frog-body{animation:frogDance .4s ease-in-out infinite}.frog.dancing .frog-leg-left{animation:legKickLeft .4s ease-in-out infinite}.frog.dancing .frog-leg-right{animation:legKickRight .4s ease-in-out infinite .2s}@keyframes frogDance{0%,to{transform:translate(-50%) translateY(0) rotate(-3deg)}25%{transform:translate(-50%) translateY(-8px) rotate(0)}50%{transform:translate(-50%) translateY(0) rotate(3deg)}75%{transform:translate(-50%) translateY(-5px) rotate(0)}}@keyframes legKickLeft{0%,to{transform:rotate(0)}50%{transform:rotate(-25deg)}}@keyframes legKickRight{0%,to{transform:rotate(0)}50%{transform:rotate(25deg)}}.frog.jumping .frog-body{animation:frogJump .6s ease-in-out}@keyframes frogJump{0%{transform:translate(-50%) translateY(0) scaleY(1)}20%{transform:translate(-50%) translateY(5px) scaleY(.8) scaleX(1.1)}50%{transform:translate(-50%) translateY(-30px) scaleY(1.1) scaleX(.9)}80%{transform:translate(-50%) translateY(-10px) scaleY(1)}to{transform:translate(-50%) translateY(0) scaleY(1)}}.dragonfly{position:absolute;width:60px;height:50px;z-index:10;filter:drop-shadow(1px 2px 4px rgba(0,0,0,.2))}.dragonfly-body{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:40px;background:linear-gradient(to bottom,#1565c0,#0d47a1);border-radius:4px}.dragonfly-body:after{content:"";position:absolute;bottom:-15px;left:50%;transform:translate(-50%);width:4px;height:20px;background:linear-gradient(to bottom,#0d47a1,#1565c0);border-radius:2px}.dragonfly-head{position:absolute;top:2px;left:50%;transform:translate(-50%);width:12px;height:12px;background:#1565c0;border-radius:50%}.dragonfly-eye-left,.dragonfly-eye-right{position:absolute;top:3px;width:6px;height:6px;background:#e3f2fd;border-radius:50%}.dragonfly-eye-left{left:0}.dragonfly-eye-right{right:0}.dragonfly-wing{position:absolute;top:8px;width:28px;height:12px;background:#bbdefbb3;border:1px solid rgba(100,181,246,.5);border-radius:50%}.dragonfly-wing-left{right:50%;margin-right:2px;transform-origin:right center;animation:wingFlapLeft .15s ease-in-out infinite alternate}.dragonfly-wing-right{left:50%;margin-left:2px;transform-origin:left center;animation:wingFlapRight .15s ease-in-out infinite alternate}.dragonfly-wing-bottom{top:22px}@keyframes wingFlapLeft{0%{transform:rotate(-20deg) scaleY(1)}to{transform:rotate(15deg) scaleY(.7)}}@keyframes wingFlapRight{0%{transform:rotate(20deg) scaleY(1)}to{transform:rotate(-15deg) scaleY(.7)}}.dragonfly:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30px;height:30px;background:radial-gradient(circle,rgba(100,181,246,.3),transparent);border-radius:50%;animation:glow 2s ease-in-out infinite}@keyframes glow{0%,to{opacity:.5;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}}.sparkle{position:absolute;width:4px;height:4px;background:gold;border-radius:50%;pointer-events:none;animation:sparkleFade .8s ease-out forwards;z-index:5}@keyframes sparkleFade{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}.ripple{position:absolute;border:1px solid rgba(100,181,246,.4);border-radius:50%;animation:rippleExpand 2s ease-out forwards;pointer-events:none}@keyframes rippleExpand{0%{width:10px;height:5px;opacity:1}to{width:80px;height:40px;opacity:0}}