#welcome.garden{background:#9fe5ec url('assets/welcome-v11/valley.webp') center/cover;isolation:isolate}
#welcome.garden.active{position:relative;display:block;height:100dvh;min-height:560px;padding:0;overflow:hidden}
#welcome .intro{position:absolute;inset:0 0 auto;height:37%;width:100%;padding:0;margin:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;pointer-events:none}
#welcome .intro>*{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap}
#welcome .runstage{position:absolute;top:36%;bottom:19%;left:0;right:0;height:auto;min-height:0;margin:0;overflow:visible;z-index:3}
#welcome .runninggroup{position:absolute;inset:0;width:100%;height:100%;animation:none;transform:none}
#welcome .runner{position:absolute;left:0;bottom:0;height:100%;width:min(48vw,280px);max-height:360px;padding:0;border:0;background:none;animation:none;transform:none;will-change:transform;touch-action:manipulation}
#welcome .runner:active{scale:1}#welcome .runner.bounce{animation:none!important}#welcome .runner.bounce .welcome-sprite{animation:welcome-jump .65s ease-out!important}
#welcome .sprite-facing{display:block;width:100%;height:100%;transform-style:preserve-3d}
#welcome .welcome-sprite{display:block;width:100%;height:100%;background-repeat:no-repeat;background-size:400% 200%;background-position:0 0}
#welcome .hillary-sprite{background-image:url('assets/welcome-v11/hillary-run.webp')}
#welcome .welcome-unicorn{position:absolute;left:0;bottom:2%;width:min(35vw,210px);height:76%;max-height:270px;will-change:transform;pointer-events:none}
#welcome .unicorn-sprite{background-image:url('assets/welcome-v11/unicorn-run.webp')}
#welcome .follower{display:none}
#welcome .welcome-mermaid{position:absolute;right:0;top:6%;width:min(30vw,180px);height:46%;overflow:hidden;pointer-events:none;z-index:2}
#welcome .mermaid-sprite{background-image:url('assets/welcome-v11/mermaid.webp');background-size:300% 200%;position:absolute;inset:0;transition:opacity .7s,transform 1s}
#welcome .welcome-mermaid.diving .mermaid-sprite{opacity:0;transform:translateY(50%)}
#welcome .water-rings{position:absolute;bottom:8%;left:8%;right:8%;height:10%;border:2px solid #ebffffb3;border-radius:50%;animation:welcome-ripples 4s ease-out infinite}
#welcome .start{position:absolute;bottom:calc(10% + env(safe-area-inset-bottom));left:5%;width:90%;max-width:550px;min-height:64px;height:9%;margin:0;padding:8px 15px;border:3px solid #ffecae;border-radius:38px;background:linear-gradient(#ffbadf 0%,#fa65b5 45%,#ef248d 100%);box-shadow:inset 0 0 0 3px #fff6,0 4px 0 #c48231,0 6px 18px #86325966;color:white;font-size:clamp(20px,5.7vw,30px);text-shadow:0 3px 2px #a52d7980;z-index:6}
#welcome .start:before,#welcome .start:after{content:'✿';position:absolute;bottom:-10px;font-size:32px;color:#fff3c5;text-shadow:0 0 2px #e860a0,0 2px 3px #905284}
#welcome .start:before{left:0}#welcome .start:after{right:0}
#welcome .touchhint{position:absolute;bottom:calc(2.5% + env(safe-area-inset-bottom));left:8%;right:8%;margin:0;width:auto;max-width:none;min-height:40px;display:flex;align-items:center;justify-content:center;padding:7px 10px;background:linear-gradient(#fff6bd,#ffe29b);border:1px solid #fff2c7;border-radius:24px;color:#66318f;font-size:clamp(11px,3vw,15px);font-weight:bold;box-shadow:0 2px 5px #87543030;z-index:6}
#welcome .sun,#welcome .hills,#welcome .sparkles,#welcome .critter.turtle,#welcome .critter.fish{display:none}
#welcome .cloud{top:3%;width:100px;height:24px;opacity:.2;z-index:1;animation:welcome-cloud 50s ease-in-out infinite}
#welcome .c1{left:3%}#welcome .c2{top:40%;right:2%;animation-delay:-25s}
#welcome .critters{z-index:5}
#welcome .butterfly{top:43%;left:4%;min-width:44px;min-height:44px;font-size:38px;animation:welcome-butterfly 13s ease-in-out infinite}
#welcome .magic-butterfly{position:absolute;pointer-events:none;font-size:25px;animation:welcome-butterfly 17s ease-in-out infinite;right:8%;top:43%;z-index:2}
#welcome .magic-butterfly.second{right:auto;left:15%;top:64%;font-size:20px;animation-delay:-7s;animation-duration:19s}
#welcome .ambient-layer{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
#welcome .river-glimmer{position:absolute;right:0;top:54%;width:32%;height:11%;background:repeating-linear-gradient(175deg,transparent 0 14px,#fff9 16px,transparent 18px);opacity:.2;animation:welcome-water 5s linear infinite;mask-image:linear-gradient(transparent,#000,transparent)}
#welcome .waterfall-glimmer{position:absolute;right:5%;top:23%;width:8%;height:23%;background:repeating-linear-gradient(0deg,transparent 0 18px,#edffff66 22px,transparent 25px);opacity:.3;animation:welcome-waterfall 3s linear infinite;mask-image:linear-gradient(transparent,#000,transparent)}
#welcome .magic-dust{position:absolute;top:48%;left:18%;color:#fffbc0;font-size:14px;animation:welcome-dust 7s ease-in-out infinite}
#welcome .magic-dust:nth-of-type(4){top:66%;left:82%;animation-delay:-3s}
#welcome .flower-sway{position:absolute;left:2%;bottom:2%;font-size:35px;color:#fff7d0;transform-origin:bottom;animation:welcome-flower 6s ease-in-out infinite;opacity:.7}
#welcome:not(.active) *,#welcome.motion-paused *{animation-play-state:paused!important}
#welcome.low-effects .magic-butterfly.second,#welcome.low-effects .magic-dust,#welcome.low-effects .cloud,#welcome.low-effects .flower-sway{display:none}
@keyframes welcome-jump{0%,100%{transform:translateY(0)}45%{transform:translateY(-45px)}}
@keyframes welcome-ripples{0%{transform:scale(.7);opacity:.7}100%{transform:scale(1.25);opacity:0}}
@keyframes welcome-butterfly{0%,100%{transform:translate(0,0) rotate(-8deg) scaleX(1)}25%{transform:translate(30px,-30px) rotate(8deg) scaleX(.75)}50%{transform:translate(60px,10px) rotate(-8deg) scaleX(1)}75%{transform:translate(15px,30px) rotate(8deg) scaleX(.75)}}
@keyframes welcome-cloud{50%{transform:translateX(65px)}}
@keyframes welcome-water{50%{transform:translateX(8px);opacity:.35}}
@keyframes welcome-waterfall{to{background-position:0 50px}}
@keyframes welcome-dust{0%,100%{opacity:0;transform:translateY(0)}50%{opacity:.85;transform:translateY(-18px)}}
@keyframes welcome-flower{50%{transform:rotate(8deg)}}
@media(min-width:600px) and (orientation:portrait){#welcome{background-size:100% 100%}#welcome .start{left:calc(50% - 275px)}#welcome .runner{width:35vw}#welcome .welcome-unicorn{width:28vw}}
@media(orientation:landscape){#welcome.garden.active{height:100dvh;min-height:340px;background-size:auto 150%;background-position:center 30%}#welcome .intro{height:32%}#welcome .runstage{top:27%;bottom:23%;left:15%;right:15%}#welcome .runner{width:180px}#welcome .welcome-unicorn{width:140px}#welcome .start{left:calc(50% - 200px);width:400px;height:13%;bottom:11%;min-height:46px;font-size:22px}#welcome .touchhint{bottom:1%;left:25%;right:25%;min-height:32px}#welcome .welcome-mermaid{top:0;width:110px}#welcome .butterfly{font-size:26px}}
@media(prefers-reduced-motion:reduce){#welcome *{animation:none!important;transition:none!important}}
#welcome .runner{width:min(60vw,280px);height:auto;aspect-ratio:3/4;max-height:none}#welcome .welcome-unicorn{width:min(42vw,210px);height:auto;aspect-ratio:3/4;max-height:none}#welcome .welcome-mermaid{height:auto;aspect-ratio:1}@media(orientation:landscape){#welcome .runner{width:160px}#welcome .welcome-unicorn{width:125px}}
#welcome .runner{width:min(55vw,260px)}#welcome .welcome-unicorn{width:min(38vw,200px)}#welcome .welcome-mermaid{top:14%}#welcome .butterfly svg{display:block;width:44px;height:44px}#welcome .magic-butterfly svg{display:block;width:32px;height:32px}.welcome-wing{transform-origin:50% 50%;animation:welcome-wing 1.2s ease-in-out infinite}@keyframes welcome-wing{50%{transform:scaleX(.5)}}@media(orientation:landscape){#welcome.garden{background-size:cover;background-position:center 72%}#welcome .intro{top:3%;left:1%;width:36%;height:61%;background:url(assets/welcome-v11/title.webp) center/contain no-repeat;mask-image:radial-gradient(ellipse,#000 55%,transparent 74%)}#welcome .runstage{left:36%;right:0;top:6%;bottom:23%}#welcome .runner{width:min(25vw,160px)}#welcome .welcome-unicorn{width:min(20vw,130px)}}
@media(orientation:landscape){#welcome.garden.active{background-size:cover;background-position:center 72%;background-repeat:no-repeat}}