/* colour pop */
.swatch{display:inline-block;width:1em;height:1em;border-radius:50%;vertical-align:-.12em;margin-right:.25em;border:3px solid var(--ink)}
.thing-pic{font-size:1.3em;vertical-align:-.1em}
.balloons{display:flex;gap:0.625rem;justify-content:center;flex-wrap:wrap;padding-top:0.375rem}
.balloon{--w:min(6.875rem,calc((100cqw - 1.75rem - (var(--n,4) - 1) * 0.625rem) / var(--n,4)),28cqh);width:var(--w);aspect-ratio:5/6;padding:0;border-radius:50% 50% 48% 48%/56% 56% 44% 44%;position:relative;animation:float 3s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.7s);box-shadow:inset -10px -12px 0 rgba(0,0,0,.12)}
.balloon.light{outline:3px solid #D5DEEA;outline-offset:-3px}
.balloon::before{content:"";position:absolute;top:16%;left:22%;width:18%;height:22%;border-radius:50%;background:rgba(255,255,255,.55)}
.balloon::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:min(2.875rem,10cqh);background:var(--muted)}
@keyframes float{50%{transform:translateY(-12px)}}
.balloon.pop{animation:pop .35s forwards!important}
@keyframes pop{to{transform:scale(1.5);opacity:0}}
/* moving levels: balloons rise from the bottom of the stage at their own speed */
.balloons.moving{display:block;position:relative;flex:1;align-self:stretch;overflow:hidden;padding:0}
.balloons.moving .balloon{--w:min(6.25rem,calc(80cqw / var(--n,4)),24cqh);position:absolute;left:calc((var(--i) + .5) * 100% / var(--n) - var(--w) / 2);animation:rise var(--speed,6s) linear infinite;animation-delay:var(--delay,0s)}
@keyframes rise{from{top:100%}to{top:calc(-1 * var(--w) * 1.6)}}