:root { color-scheme: light; font-family: ui-rounded, "Avenir Next", "Trebuchet MS", sans-serif; color: #294a52; background: #fff9ed; }
* { box-sizing: border-box; }
body { margin: 0; }
button { font: inherit; cursor: pointer; color: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:focus-visible { outline: 4px solid #234b63; outline-offset: 5px; }
.zoo { max-width: 1440px; margin: auto; padding: 22px 32px 26px; }
.topbar { margin-bottom: 20px; }
.eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .19em; font-weight: 850; color: #637b75; }
h1 { margin: 1px 0 0; font-size: clamp(24px, 3.2vw, 40px); letter-spacing: -.045em; line-height: 1.1; }
h1 span { display: inline-block; margin-left: 12px; font-size: 25px; color: #f49556; vertical-align: middle; }
.restart { border: 2px solid #dcdcca; background: #fffdf4; border-radius: 50px; padding: 12px 18px; font-weight: 750; font-size: 17px; min-height: 48px; }
.restart:hover { background: #f8edcd; }
.scene { height: clamp(570px, calc(100svh - 132px), 900px); position: relative; overflow: hidden; isolation: isolate; border-radius: 36px; background: linear-gradient(#bfe9ed, #e6f6ed 73%, #f5f4d7); border: 2px solid #d6e9dd; }
.sun { position: absolute; right: 11%; top: 8%; width: 85px; height: 85px; border-radius: 50%; background: #ffe59b; box-shadow: 0 0 0 12px #ffeaa738; color: #aa8750; display: grid; place-items: center; font-size: 37px; transform: rotate(8deg); }
.sun::before { content: "· ·"; position: absolute; top: 12px; font-size: 31px; }
.cloud { position: absolute; width: 130px; height: 35px; border-radius: 60px; background: #ffffffa3; pointer-events: none; }
.cloud::before,.cloud::after { content: ""; position: absolute; background: inherit; border-radius: 50%; width: 64px; height: 58px; left: 20px; bottom: 8px; }
.cloud::after { width: 48px; height: 43px; left: 65px; }
.cloud-one { top: 17%; left: -25px; transform: scale(1.5); }
.cloud-two { top: 8%; left: 43%; transform: scale(.6); }
.cloud-three { top: 43%; right: -15px; }
.distant-hill { position: absolute; bottom: 25px; width: 80%; height: 150px; border-radius: 50% 50% 0 0; background: #c2dfb7; }
.hill-one { left: -30%; transform: rotate(10deg); }
.hill-two { right: -35%; background: #d5e6b5; transform: rotate(-9deg); }
.ground { position: absolute; bottom: -40px; left: -5%; width: 110%; height: 145px; background: #e6e9be; border-radius: 50% 50% 0 0; }
.ground i { position: absolute; left: 12%; top: 38%; width: 7px; height: 18px; border-radius: 50%; background: #a4c29a; transform: rotate(-24deg); box-shadow: 10px 2px #aac89d; }
.ground i:nth-child(2) { left: 22%; top: 55%; }.ground i:nth-child(3) { left: 78%; top: 30%; }.ground i:nth-child(4) { left: 87%; top: 55%; }.ground i:nth-child(5) { left: 68%; top: 75%; }
.parade { position: absolute; inset: 0; }
.sky-animal { position: absolute; width: var(--size); height: calc(var(--size) * 1.14); margin: 0; padding: 0; border: 0; background: transparent; border-radius: 45%; transform: translate(-50%, -50%); will-change: left, top; }
.sky-animal:focus-visible { background: #ffffff42; }
.animal-art { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 2px #40676b10); transform-origin: 50% 70%; }
.balloon-shine { fill: #fff; opacity: .47; }
.face { transition: opacity .2s; }
.blink { transform-box: fill-box; transform-origin: center; animation: blink 5.7s infinite; }
.sky-animal:nth-child(2n) .blink { animation-delay: -2s; }
.ready-area { position: absolute; top: 51%; left: 50%; width: 270px; height: 270px; transform: translate(-50%, -50%); pointer-events: none; }
.ready { width: 100%; height: 100%; transform-origin: 50% 86%; }
.balloon-shadow { position: absolute; bottom: -14px; width: 130px; height: 20px; left: 70px; background: #52826a1c; border-radius: 50%; filter: blur(2px); transform: scale(var(--shadow, .4)); }
.reaction { position: absolute; right: -12px; top: 35%; font-size: 24px; font-weight: 900; color: #426b6a; transform: rotate(8deg); }
.pump-hose { position: absolute; bottom: 79px; left: calc(50% - 155px); width: 167px; height: 110px; border: 10px solid #728f91; border-top: 0; border-right: 0; border-radius: 0 0 0 90px; transform: rotate(-9deg); opacity: .75; }
.play-controls { position: absolute; bottom: 23px; left: 0; width: 100%; display: grid; justify-items: center; }
.cue { font-size: clamp(16px, 2vw, 21px); font-weight: 750; margin: 0 0 14px; background: #fffbeddf; border: 2px solid #fffdf5; padding: 9px 19px; border-radius: 30px; }
.button-row { display: flex; gap: 24px; align-items: center; padding-left: 60px; }
.pump-wrap { position: relative; }
.pump { position: relative; display: block; width: 225px; height: 124px; border: 0; padding: 0; background: transparent; user-select: none; touch-action: none; border-radius: 24px; }
.pump-handle { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 73px; background: #ef777b; border: 4px solid #fff6e6; border-radius: 27px; box-shadow: inset 0 -7px #d75464, 0 5px 0 #b6556866; color: #fffdf3; display: flex; align-items: center; justify-content: center; gap: 15px; font-weight: 900; font-size: 31px; transition: transform .12s; text-shadow: 0 2px #c34e5b; }
.pump-handle > span { font-size: 38px; }
.pump-stem { position: absolute; left: 100px; width: 25px; top: 60px; height: 40px; background: #7b9c9c; border-left: 7px solid #abc6bc; }
.pump-base { position: absolute; bottom: 0; left: 35px; right: 35px; height: 39px; background: #edb764; border: 3px solid #fff2d0; box-shadow: inset 0 -7px #d59c58; border-radius: 20px 20px 12px 12px; font-size: 24px; color: #fff4d6; }
.pump.is-pumping .pump-handle { transform: translateY(20px); background: #e96773; }
.pump:hover .pump-handle { filter: brightness(1.04); }
.fly { border: 3px solid #fff9dc; border-radius: 50%; width: 88px; height: 88px; background: #397d7b; color: #fffde9; box-shadow: inset 0 -6px #286261, 0 5px #6e927d24; font-size: 23px; font-weight: 850; display: grid; align-content: center; justify-items: center; line-height: 1.1; }
.fly span { font-size: 30px; }.fly:active { transform: translateY(3px); }
.gesture { position: absolute; width: 53px; height: 66px; left: 150px; top: 42px; pointer-events: none; z-index: 3; animation: demonstrate 2.6s ease-in-out infinite; filter: drop-shadow(0 3px 2px #294a5230); }
.has-played .gesture { display: none; }
.flourish-label { position: absolute; inset: -15px -35px auto; text-align: center; font-weight: 900; font-size: 20px; color: #33535d; pointer-events: none; text-shadow: 0 2px #fff; }
.sky-animal.leaving { opacity: 0; transition: opacity .5s; pointer-events: none; }
.sky-animal.flourish .animal-art { animation: var(--flourish) 1s ease-in-out; }
.sky-animal.flourish .special { animation: detail .3s ease-in-out 3 alternate; transform-box: fill-box; transform-origin: center; }
.sky-animal.flourish .surprise { opacity: 1; }
.surprise { opacity: 0; transition: opacity .2s; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@keyframes blink { 0%, 44%, 48%, 100% { transform: scaleY(1); } 46% { transform: scaleY(.08); } }
@keyframes demonstrate { 0%, 20%, 100% { transform: translate(10px, 0) rotate(-10deg); opacity: .85; } 40%, 60% { transform: translate(-5px, 15px) rotate(-15deg); opacity: 1; } 80% { transform: translate(10px, -22px) rotate(8deg); opacity: .3; } }
@keyframes hop { 30% { transform: translateY(-35px) rotate(-12deg); } 65% { transform: translateY(0) scale(1.15,.86); } }
@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes wobble { 20%, 60% { transform: rotate(-20deg) scale(1.08); } 40%, 80% { transform: rotate(20deg) scale(.96); } }
@keyframes squish { 30% { transform: scale(1.35,.72); } 65% { transform: scale(.85,1.18); } }
@keyframes swoop { 30% { transform: translate(24px,-24px) rotate(18deg); } 70% { transform: translate(-18px,0) rotate(-15deg); } }
@keyframes flutter { 20%,60% { transform: scaleX(.5) rotate(8deg); } 40%,80% { transform: scaleX(1.12) rotate(-8deg); } }
@keyframes stretch { 40% { transform: scale(.85,1.24) rotate(6deg); } 75% { transform: scale(1.12,.9); } }
@keyframes wave { 25% { transform: rotate(18deg) translateY(-10px); } 75% { transform: rotate(-18deg) translateY(-10px); } }
@keyframes detail { to { transform: rotate(12deg) scale(1.12); } }
@media (max-width: 700px) {
  .zoo { padding: 14px 12px; }.topbar { margin-bottom: 13px; }.scene { border-radius: 24px; height: max(600px, calc(100svh - 110px)); }
  .zoo .topbar { grid-template-columns: 46px minmax(0,1fr) auto; gap: 10px; }
  .zoo .topbar > .restart:last-child { grid-column: auto; justify-self: end; }
  .restart { padding: 10px 12px; }.restart span { display: none; }.eyebrow { font-size: 9px; letter-spacing: .1em; } h1 span { display: none; }
  .ready-area { width: 240px; height: 240px; }.sun { width: 60px; height: 60px; right: 9%; top: 7%; }.sun::before { top: 0; }
  .button-row { gap: 17px; padding-left: 0; }.pump { width: 197px; }.pump-stem { left: 85px; }.fly { width: 78px; height: 78px; }.gesture { left: 125px; }
  .pump-hose { left: calc(50% - 133px); }.flourish-label { font-size: 16px; }.reaction { right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .gesture { transform: rotate(-12deg); }
  .sky-animal.flourish .animal-art { filter: drop-shadow(0 0 9px #fff8cb); }
}