*{box-sizing:border-box}body{color:#2b2118;margin:0;font-family:system-ui,sans-serif}header{z-index:5;position:absolute;top:.5rem;left:.5rem}header nav a{color:#2b2118;background:#ffffffb3;border-radius:999px;padding:.3rem .7rem;font-size:.85rem;text-decoration:none;display:inline-block}.zoo{flex-direction:column;min-height:100vh;display:flex;position:relative;overflow:hidden}.sky{z-index:0;background:linear-gradient(#bfe6ff 0%,#e3f5ff 42%,#cdeeb0 42%,#8bc766 100%);position:absolute;inset:0}.sun{background:#ffd166;border-radius:50%;width:5rem;height:5rem;position:absolute;top:5%;right:8%;box-shadow:0 0 0 .55rem #ffd16659}.cloud{opacity:.9;background:#fff;border-radius:999px;position:absolute}.cloud:before,.cloud:after{content:"";background:#fff;border-radius:999px;position:absolute}.cloud--1{width:4.6rem;height:1.6rem;top:8%;left:6%}.cloud--1:before{width:2.2rem;height:2.2rem;top:-1rem;left:.3rem}.cloud--1:after{width:1.8rem;height:1.8rem;top:-.7rem;left:2.4rem}.cloud--2{width:3.4rem;height:1.3rem;top:14%;right:26%}.cloud--2:before{width:1.6rem;height:1.6rem;top:-.7rem;left:.3rem}.cloud--2:after{width:1.3rem;height:1.3rem;top:-.5rem;left:1.7rem}.tree{width:3.2rem;height:4.8rem;position:absolute}.tree:before{content:"";background:#8a5a2b;border:2px solid #3a2b22;border-radius:.2rem;width:.75rem;height:1.7rem;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.tree:after{content:"";background:#6fae4d;border:3px solid #3a2b22;border-radius:50%;width:3.2rem;height:3.2rem;position:absolute;top:0;left:50%;transform:translate(-50%)}.tree--1{bottom:40%;left:1%;transform:scale(.85)}.tree--2{bottom:44%;left:9%;transform:scale(1.05)}.tree--3{bottom:43%;left:88%;transform:scale(1)}.tree--4{bottom:39%;left:95%;transform:scale(.8)}.grass{z-index:1;flex-direction:column;flex:1;justify-content:flex-end;align-items:center;padding:0 .6rem 1.2rem;display:flex;position:relative}.gate{aspect-ratio:800/560;z-index:0;pointer-events:none;width:min(73vw,96rem);position:absolute;bottom:1.2rem;left:50%;transform:translate(-50%)}.gate-arch{width:100%;height:100%;display:block;overflow:visible}.arch-outline{fill:none;stroke:#2b2118;stroke-width:56px;stroke-linecap:round}.arch-band{fill:none;stroke:#e0864a;stroke-width:46px;stroke-linecap:round}.arch-highlight{fill:none;stroke:#f6c893;stroke-width:12px;stroke-linecap:round}.pillar{fill:#8a5a2e;stroke:#2b2118;stroke-width:6px}.pillar-groove{fill:none;stroke:#6b4423;stroke-width:5px;stroke-linecap:round}.fence-rail{fill:none;stroke:#8a5a2e;stroke-width:9px;stroke-linecap:round}.fence-post{fill:none;stroke:#6b4423;stroke-width:12px;stroke-linecap:round}.gate-sign{white-space:nowrap;z-index:2;background:#fff6e6;border:4px solid #2b2118;border-radius:999px;padding:.3rem 2rem;position:absolute;top:1%;left:50%;transform:translate(-50%,-50%)}.gate-sign h1{letter-spacing:.1rem;color:#e0524a;margin:0;font-family:Comic Sans MS,Chalkboard SE,system-ui,sans-serif;font-size:clamp(1.5rem,3.6vw,2.6rem)}.animal-row{z-index:1;flex-wrap:nowrap;justify-content:center;align-items:flex-end;gap:clamp(.1rem,.3vw,.4rem);width:100%;margin:0;padding:0 .35rem;list-style:none;display:flex;position:relative}.animal{flex:none;min-width:0;display:flex}.animal-trigger{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;flex-direction:column;justify-content:flex-end;align-items:center;gap:clamp(.15rem,.5vw,.4rem);margin:0;padding:0;display:flex}.animal-trigger:focus-visible{outline-offset:4px;border-radius:.5rem;outline:3px solid #2b2118}.animal img{transform-origin:bottom;width:auto;max-width:100%;display:block}@keyframes animal-pop{0%{transform:scale(1)translateY(0)}35%{transform:scale(1.08)translateY(-6%)}to{transform:scale(1)translateY(0)}}.animal-trigger.is-playing img{animation:.35s ease-out animal-pop}.animal-trigger.is-playing .animal-note{border-color:#e0524a}@media (prefers-reduced-motion:reduce){.animal-trigger.is-playing img{animation:none}}.animal-note{color:#2b2118;text-align:center;white-space:nowrap;background:#fff6e6;border:2px solid #2b2118;border-radius:999px;flex:none;padding:.08rem .45rem;font-family:Comic Sans MS,Chalkboard SE,system-ui,sans-serif;font-size:clamp(.6rem,.9vw,.85rem);font-weight:700;line-height:1.3;transition:border-color .15s;display:inline-block}.animal--chick .animal-note{background:#ff8787}.animal--rabbit .animal-note{background:#ffb454}.animal--cat .animal-note{background:#ffe066}.animal--dog .animal-note{background:#8ce99a}.animal--sheep .animal-note{background:#74c0fc}.animal--lion .animal-note{background:#b197fc}.animal--elephant .animal-note{background:#e599f7}.animal--giraffe .animal-note{background:#ffa8a8}.row-break{display:none}.animal--chick img{height:clamp(6.25rem,1.7rem + 4.29vw,8.125rem)}.animal--rabbit img{height:clamp(7.625rem,2.46rem + 4.86vw,9.75rem)}.animal--cat img{height:clamp(9.375rem,3.3rem + 5.71vw,11.875rem)}.animal--dog img{height:clamp(11.5625rem,3.97rem + 7.14vw,14.6875rem)}.animal--sheep img{height:clamp(14.0625rem,4.96rem + 8.57vw,17.8125rem)}.animal--lion img{height:clamp(16.875rem,7.01rem + 9.29vw,20.9375rem)}.animal--elephant img{height:clamp(19.6875rem,12.1rem + 7.14vw,22.8125rem)}.animal--giraffe img{height:clamp(24.0625rem,19.51rem + 4.29vw,25.9375rem)}@media (width<=1700px){.animal-row{flex-wrap:wrap;gap:clamp(.03rem,.5vw,.25rem);padding:0 .15rem}.row-break{flex-basis:100%;height:0;display:block}.animal--chick img{height:clamp(2.8125rem,2.02rem + 3.99vw,6.25rem)}.animal--rabbit img{height:clamp(3.4375rem,2.47rem + 4.86vw,7.625rem)}.animal--cat img{height:clamp(4.25rem,3.06rem + 5.94vw,9.375rem)}.animal--dog img{height:clamp(5.3125rem,3.86rem + 7.25vw,11.5625rem)}.animal--sheep img{height:clamp(3.625rem,1.22rem + 12.03vw,14.0625rem)}.animal--lion img{height:clamp(4.375rem,1.48rem + 14.49vw,16.875rem)}.animal--elephant img{height:clamp(5.4375rem,2.13rem + 16.52vw,19.6875rem)}.animal--giraffe img{height:clamp(6.75rem,2.74rem + 20.07vw,24.0625rem)}}