*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f5f7fa;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}#app{width:100%;height:100vh}@keyframes tail-rush{0%{opacity:.7;transform:translate(0)scale(1)}60%{opacity:.3;transform:translate(15px,8px)scale(.6)}to{opacity:0;transform:translate(25px,15px)scale(.2)}}[data-action=sprint] .tw-1{animation:.5s ease-out infinite tail-rush}[data-action=sprint] .tw-2{animation:.5s ease-out .1s infinite tail-rush}[data-action=sprint] .tw-3{animation:.5s ease-out .2s infinite tail-rush}[data-action=sprint] .tw-4{animation:.5s ease-out .3s infinite tail-rush}@keyframes tail-gentle{0%{opacity:.5;transform:translate(0)scale(1)}to{opacity:0;transform:translate(12px,5px)scale(.3)}}[data-action=cruise] .tw-1{animation:1.8s ease-out infinite tail-gentle}[data-action=cruise] .tw-2{animation:1.8s ease-out .4s infinite tail-gentle}[data-action=cruise] .tw-3{animation:1.8s ease-out .8s infinite tail-gentle}[data-action=cruise] .tw-4{animation:1.8s ease-out 1.2s infinite tail-gentle}@keyframes tail-circle{0%{opacity:.6;transform:translate(0)scale(1)}50%{opacity:.3;transform:translate(8px,-8px)scale(.6)}to{opacity:0;transform:translate(14px,-12px)scale(.2)}}[data-action=circle] .tw-1{animation:.8s ease-out infinite tail-circle}[data-action=circle] .tw-2{animation:.8s ease-out .2s infinite tail-circle}[data-action=circle] .tw-3{animation:.8s ease-out .4s infinite tail-circle}[data-action=circle] .tw-4{animation:.8s ease-out .6s infinite tail-circle}@keyframes tail-burst{0%{opacity:.8;transform:translate(0)scale(1)}40%{opacity:.5;transform:translate(20px,-5px)scale(1.2)}to{opacity:0;transform:translate(32px,-12px)scale(.2)}}[data-action=dive] .tw-1{animation:.7s ease-out forwards tail-burst}[data-action=dive] .tw-2{animation:.7s ease-out 50ms forwards tail-burst}[data-action=dive] .tw-3{animation:.7s ease-out .1s forwards tail-burst}[data-action=dive] .tw-4{animation:.7s ease-out .15s forwards tail-burst}[data-action=breach] .tw-1{animation:.8s ease-out forwards tail-burst}[data-action=breach] .tw-2{animation:.8s ease-out 50ms forwards tail-burst}[data-action=breach] .tw-3{animation:.8s ease-out .1s forwards tail-burst}[data-action=breach] .tw-4{animation:.8s ease-out .15s forwards tail-burst}@keyframes flipper-ripple{0%{opacity:.5;transform:scaleX(1)}60%{opacity:.2;transform:scaleX(1.6)}to{opacity:0;transform:scaleX(.8)}}[data-action=sprint] .fw-1{animation:.4s ease-out infinite flipper-ripple}[data-action=sprint] .fw-2{animation:.4s ease-out .15s infinite flipper-ripple}[data-action=cruise] .fw-1{animation:1.2s ease-out infinite flipper-ripple}[data-action=cruise] .fw-2{animation:1.2s ease-out .4s infinite flipper-ripple}[data-action=circle] .fw-1{animation:.6s ease-out infinite flipper-ripple}[data-action=circle] .fw-2{animation:.6s ease-out .2s infinite flipper-ripple}[data-action=idle] .fw-1{animation:3s ease-out infinite flipper-ripple}[data-action=idle] .fw-2{animation:3s ease-out 1s infinite flipper-ripple}[data-action=walk] .fw-1{animation:1.5s ease-out infinite flipper-ripple}[data-action=walk] .fw-2{animation:1.5s ease-out .5s infinite flipper-ripple}[data-action=spout] .fw-1{animation:1s ease-out infinite flipper-ripple}[data-action=spout] .fw-2{animation:1s ease-out .3s infinite flipper-ripple}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes bounce{0%{transform:translateY(0)scale(1)}20%{transform:translateY(-35px)scale(1)}30%{transform:translateY(-35px)scale(1)}50%{transform:translateY(0)scale(1.05,.95)}70%{transform:translateY(-20px)scale(1)}85%{transform:translateY(0)scale(1.03,.97)}to{transform:translateY(0)scale(1)}}@keyframes wobble{0%,to{transform:rotate(0)}25%{transform:rotate(3deg)}75%{transform:rotate(-3deg)}}@keyframes sleep-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-2px)}}@keyframes z-float{0%{opacity:0;transform:translateY(10px)scale(.5)}30%{opacity:.8;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(-30px)scale(1.2)}}@keyframes spout-rise{0%{opacity:0;transform:translateY(0)scale(.6)}40%{opacity:.7;transform:translateY(-8px)scale(1)}to{opacity:0;transform:translateY(-20px)scale(.4)}}@keyframes tail-wag{0%,to{transform-origin:0;transform:rotate(0)}50%{transform-origin:0;transform:rotate(8deg)}}@keyframes flipper-wave{0%,to{transform-origin:top;transform:rotate(-10deg)}50%{transform-origin:top;transform:rotate(5deg)}}@keyframes ocean-sway{0%,to{transform:rotate(0)translateY(0)}25%{transform:rotate(3deg)translateY(-5px)}50%{transform:rotate(0)translateY(0)}75%{transform:rotate(-3deg)translateY(5px)}}@keyframes circle-swim{0%{transform:rotate(0)translate(0)}25%{transform:rotate(8deg)translate(-8px)}50%{transform:rotate(0)translate(0)}75%{transform:rotate(-8deg)translate(8px)}to{transform:rotate(0)translate(0)}}@keyframes dive-fade{0%{opacity:1;transform:scale(1)translateY(0)}40%{opacity:.6;transform:scale(.8)translateY(10px)}70%{opacity:0;transform:scale(.4)translateY(20px)}to{opacity:0;transform:scale(.3)translateY(25px)}}@keyframes breed-body{0%{transform:scaleY(.85)translateY(3px)}10%{transform:scaleY(1.05)rotate(6deg)translateY(-8px)}40%{transform:rotate(-2deg)translateY(-20px)}65%{transform:rotate(4deg)translateY(-8px)}85%{transform:rotate(2deg)translateY(3px)}to{transform:scaleY(.95)translateY(8px)}}@keyframes splash-up{0%{opacity:1;transform:translateY(0)scale(1)}60%{opacity:.8;transform:translateY(-15px)scale(.5)}to{opacity:0;transform:translateY(-22px)scale(.2)}}@keyframes splash-down{0%{opacity:1;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(18px)scale(.3)}}@keyframes ripple-out{0%{opacity:.7;transform:scale(.3)rotate(0)}to{opacity:0;transform:scale(2)rotate(10deg)}}@keyframes sleep-crouch{0%,to{transform:translateY(0)}50%{transform:translateY(4px)}}.pet-whale{width:100%;height:100%;overflow:visible}.pet-whale .body,.pet-whale .belly,.pet-whale .tail,.pet-whale .flipper,.pet-whale .mouth{transition:all .4s}.pet-whale[data-action=idle] .body,.pet-whale[data-action=idle] .belly{animation:3s ease-in-out infinite float}.pet-whale[data-action=idle] .tail{animation:2s ease-in-out infinite tail-wag}.pet-whale[data-action=idle] .flipper{animation:3s ease-in-out infinite flipper-wave}.pet-whale[data-action=idle] .spout-d1{animation:2s ease-out infinite spout-rise}.pet-whale[data-action=idle] .spout-d2{animation:2s ease-out .4s infinite spout-rise}.pet-whale[data-action=idle] .spout-d3{animation:2s ease-out .8s infinite spout-rise}.pet-whale[data-action=sleep] .body,.pet-whale[data-action=sleep] .belly{animation:4s ease-in-out infinite sleep-bob}.pet-whale[data-action=sleep] .z-1{animation:3s ease-out infinite z-float}.pet-whale[data-action=sleep] .z-2{animation:3s ease-out 1s infinite z-float}.pet-whale[data-action=sleep] .z-3{animation:3s ease-out 2s infinite z-float}.pet-whale[data-action=jump]{animation:.8s ease-out bounce}.pet-whale[data-action=walk]{animation:1.2s ease-in-out infinite wobble}.pet-whale[data-action=walk] .flipper{animation:.8s ease-in-out infinite flipper-wave}.pet-whale[data-action=cruise]{animation:2.5s ease-in-out infinite ocean-sway}.pet-whale[data-action=cruise] .tail{animation:1.5s ease-in-out infinite tail-wag}.pet-whale[data-action=cruise] .flipper{animation:2s ease-in-out infinite flipper-wave}.pet-whale[data-action=cruise] .spout-d1{animation:3s ease-out infinite spout-rise}.pet-whale[data-action=cruise] .spout-d2{animation:3s ease-out .6s infinite spout-rise}.pet-whale[data-action=cruise] .spout-d3{animation:3s ease-out 1.2s infinite spout-rise}.pet-whale[data-action=sprint]{animation:.6s ease-in-out infinite wobble}.pet-whale[data-action=sprint] .tail{animation:.4s ease-in-out infinite tail-wag}.pet-whale[data-action=sprint] .flipper{animation:.3s ease-in-out infinite flipper-wave}.pet-whale[data-action=spout]{animation:1s ease-in-out infinite float}.pet-whale[data-action=spout] .tail{animation:.6s ease-in-out infinite tail-wag}.pet-whale[data-action=circle]{animation:1.5s ease-in-out infinite circle-swim}.pet-whale[data-action=circle] .tail{animation:.5s ease-in-out infinite tail-wag}.pet-whale[data-action=circle] .flipper{animation:.4s ease-in-out infinite flipper-wave}.pet-whale[data-action=dive]>g,.pet-whale[data-action=dive] .body,.pet-whale[data-action=dive] .belly,.pet-whale[data-action=dive] .tail,.pet-whale[data-action=dive] .flipper,.pet-whale[data-action=dive] .eye-group,.pet-whale[data-action=dive] .blush,.pet-whale[data-action=dive] .tail-wake,.pet-whale[data-action=dive] .flipper-wake{animation:1.2s ease-in forwards dive-fade}.pet-whale[data-action=breach]{animation:1.8s ease-in-out breed-body}.pet-whale[data-action=breach] .splash .drop-dr,.pet-whale[data-action=breach] .splash .drop-dl,.pet-whale[data-action=breach] .splash .drop-dm{animation:.7s ease-out forwards splash-up}.pet-whale[data-action=breach] .splash .drop-dr{animation-delay:20ms}.pet-whale[data-action=breach] .splash .drop-dl{animation-delay:80ms}.pet-whale[data-action=breach] .splash .drop-dm{animation-delay:.15s}.pet-whale[data-action=breach] .splash .ripple-1{animation:.9s ease-out forwards ripple-out}.pet-whale[data-action=breach] .splash .ripple-2{animation:1.1s ease-out forwards ripple-out}.pet-whale[data-action=dive] .splash .ripple-1{animation:.7s ease-out forwards ripple-out}.pet-whale[data-action=dive] .splash .ripple-2{animation:.9s ease-out forwards ripple-out}.pet-whale[data-action=dive] .splash .drop-bt,.pet-whale[data-action=dive] .splash .drop-bl{animation:.5s ease-out forwards splash-down}.pet-whale[data-action=spout] .splash .drop-dr,.pet-whale[data-action=spout] .splash .drop-dl{animation:.8s ease-out infinite splash-up}.pet-whale[data-action=spout] .splash .drop-bt,.pet-whale[data-action=spout] .splash .drop-bl{animation:.6s ease-out infinite splash-down}.pet-panda{width:100%;height:100%;overflow:visible}.pet-panda .body,.pet-panda .ear-l,.pet-panda .ear-r{transition:all .4s}.pet-panda[data-action=idle]{animation:2.5s ease-in-out infinite wobble}.pet-panda[data-action=idle] .ear-l{animation:3s ease-in-out infinite float}.pet-panda[data-action=idle] .ear-r{animation:3s ease-in-out .5s infinite float}.pet-panda[data-action=sleep] .body{animation:4s ease-in-out infinite sleep-crouch}.pet-panda[data-action=sleep] .z-1{animation:3s ease-out infinite z-float}.pet-panda[data-action=sleep] .z-2{animation:3s ease-out 1s infinite z-float}.pet-panda[data-action=sleep] .z-3{animation:3s ease-out 2s infinite z-float}.pet-panda[data-action=jump]{animation:.8s ease-out bounce}@keyframes bubble-rise{0%{opacity:.3;transform:translateY(0)scale(1)}50%{opacity:.5}to{opacity:0;transform:translateY(-100px)scale(.6)}}@keyframes wave-move-1{0%{transform:translate(0)}50%{transform:translate(-12px)}to{transform:translate(0)}}@keyframes wave-move-2{0%{transform:translate(0)}50%{transform:translate(8px)}to{transform:translate(0)}}.ocean-wave .wave-path-1{animation:4s ease-in-out infinite wave-move-1}.ocean-wave .wave-path-2{animation:5s ease-in-out 1s infinite wave-move-2}[data-action=sleep] .ocean-wave .wave-path-1{animation:7s ease-in-out infinite wave-move-1}[data-action=sleep] .ocean-wave .wave-path-2{animation:9s ease-in-out 2s infinite wave-move-2}[data-action=cruise] .ocean-wave .wave-path-1{animation:3.5s ease-in-out infinite wave-move-1}[data-action=walk] .ocean-wave .wave-path-1{animation:2.5s ease-in-out infinite wave-move-1}[data-action=sprint] .ocean-wave .wave-path-1{animation:1.5s ease-in-out infinite wave-move-1}[data-action=sprint] .ocean-wave .wave-path-2{animation:2s ease-in-out .5s infinite wave-move-2}[data-action=spout] .ocean-wave .wave-path-1{animation:2s ease-in-out infinite wave-move-1}[data-action=circle] .ocean-wave .wave-path-1{animation:2.8s ease-in-out infinite wave-move-1}@keyframes ripple-expand{0%{opacity:.5;transform:translate(-50%)scale(.3)}50%{opacity:.2;transform:translate(-50%)scale(4)}to{opacity:0;transform:translate(-50%)scale(10)}}.surface-ripple,.surface-ripple-2{transform-origin:50%}[data-action=breach] .surface-ripple{animation:.9s ease-out forwards ripple-expand}[data-action=breach] .surface-ripple-2{animation:.7s ease-out .12s forwards ripple-expand}[data-action=dive] .surface-ripple{animation:.5s ease-out forwards ripple-expand}[data-action=dive] .surface-ripple-2{animation:.4s ease-out 80ms forwards ripple-expand}[data-action=jump] .surface-ripple{animation:.5s ease-out forwards ripple-expand}[data-action=jump] .surface-ripple-2{animation:.4s ease-out 80ms forwards ripple-expand}.sky-layer{pointer-events:none;z-index:3;width:100%;height:66%;position:absolute;top:0;left:0;overflow:hidden}@keyframes sun-pulse{0%,to{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}@keyframes cloud-drift{0%{opacity:0;transform:translate(-30px)}15%{opacity:1}85%{opacity:.8}to{opacity:0;transform:translate(40px)}}@keyframes rain-fall{0%{opacity:0;transform:translateY(0)rotate(-8deg)}10%{opacity:var(--opacity,.6)}90%{opacity:calc(var(--opacity,.6) * .8)}to{opacity:0;transform:translateY(185px)rotate(-8deg)}}@keyframes snow-fall{0%{opacity:0;transform:translateY(0)translate(0)rotate(0)}12%{opacity:var(--opacity,.7)}40%{transform:translateY(75px) translateX(calc(var(--sway,15px) * .5)) rotate(120deg)}70%{transform:translateY(130px) translateX(calc(var(--sway,15px) * -.3)) rotate(240deg);opacity:var(--opacity,.7)}88%{opacity:calc(var(--opacity,.7) * .5)}to{transform:translateY(185px) translateX(var(--sway,15px)) rotate(360deg);opacity:0}}@keyframes mist-drift{0%{opacity:0;transform:translate(-35px)}15%{opacity:var(--opacity,.08)}50%{transform:translate(10px)}85%{opacity:calc(var(--opacity,.08) * .6)}to{opacity:0;transform:translate(40px)}}@keyframes lightning-burst{0%{opacity:.35}30%{opacity:.12}60%{opacity:.05}to{opacity:0}}.rain-drop.pet{animation:linear infinite rain-pet;position:absolute}@keyframes rain-pet{0%{opacity:.65;transform:translateY(-10px)rotate(15deg)}to{opacity:0;transform:translateY(280px)rotate(15deg)}}.snow-flake.pet{background:#dcf0ffb3;border-radius:50%;animation:linear infinite snow-pet;position:absolute}@keyframes snow-pet{0%{opacity:.8;transform:translateY(-10px)translate(0)}50%{transform:translateY(140px) translateX(var(--sway,15px));opacity:.5}to{opacity:0;transform:translateY(280px)translate(0)}}.pet-notif-bubble{white-space:nowrap;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid;border-radius:10px;padding:2px 10px;font-family:SF Mono,Consolas,monospace;font-size:11px;animation:.3s ease-out notif-in,.3s ease-in 3.7s forwards notif-out}@keyframes notif-in{0%{opacity:0;transform:translateY(8px)scale(.8)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes notif-out{0%{opacity:1}to{opacity:0;transform:translateY(-6px)scale(.9)}}