@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700;800&family=Instrument+Serif:ital@0;1&display=swap');
:root{--blue:#172fe8;--paper:#fffdf2;--pink:#ffb5c9}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--blue)}body{color:var(--paper);font:16px/1.4 'DM Sans',sans-serif}button{font:inherit;cursor:pointer;border:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #fff1a1;outline-offset:7px}.world{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:35px 24px;overflow:hidden;position:relative}h1{font-size:clamp(54px,10vw,140px);line-height:.85;margin:0;font-weight:800;letter-spacing:-.075em;white-space:nowrap}h1 em{font:italic 1.13em/.7 'Instrument Serif',Georgia,serif;letter-spacing:-.055em;margin-left:.045em}.playground{width:min(830px,100%);height:clamp(330px,49vh,510px);position:relative;display:grid;place-items:center;margin-top:30px}.breathing{width:min(470px,51vh);animation:breathe 3.4s ease-in-out infinite;transform-origin:50% 90%}.meat{position:relative;display:block;background:none;padding:0;width:100%;aspect-ratio:1;transform-origin:50% 78%;will-change:transform}.meat img,.meat canvas{display:block;width:100%;height:100%;pointer-events:none;user-select:none;mask-image:radial-gradient(ellipse 70% 68% at 50% 48%,#000 55%,transparent 79%)}.meat canvas{position:absolute;inset:0;display:none}.meat.rendered canvas{display:block}.meat.rendered img{visibility:hidden}.bubble{position:absolute;top:12%;left:0;max-width:220px;min-width:120px;background:var(--paper);color:#192044;padding:16px 21px;border-radius:24px 24px 5px 24px;font-size:19px;font-weight:600;line-height:1.23;letter-spacing:-.5px;transform:rotate(-7deg);z-index:3;pointer-events:none}.bubble-tail{position:absolute;right:-10px;bottom:10px;width:20px;height:20px;background:var(--paper);clip-path:polygon(0 0,100% 100%,0 100%)}.controls{z-index:3;margin-top:6px}.do-it{display:flex;align-items:center;justify-content:space-between;gap:58px;font-size:23px;font-weight:700;letter-spacing:-.8px;color:#192044;background:var(--pink);padding:18px 31px 20px;border-radius:50px;box-shadow:0 6px 0 #ad759c;transition:transform .1s,box-shadow .1s}.do-it:hover{background:#ffc7d6}.do-it:active{transform:translateY(5px);box-shadow:0 1px 0 #ad759c}.do-it[aria-disabled=true]{cursor:default}.ca{min-height:20px;margin:22px 0 0;max-width:90vw;overflow-wrap:anywhere;font:12px/1.5 monospace;opacity:.75;text-align:center}.mute{position:absolute;right:22px;bottom:18px;background:none;color:var(--paper);opacity:.55;font-size:22px;padding:10px}.mute:hover{opacity:1}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.013,.991)}}@media(max-width:700px){.world{padding:30px 20px}h1{font-size:clamp(49px,11.6vw,82px)}.playground{height:355px;margin-top:26px}.breathing{width:330px;max-width:108%;margin-top:36px}.bubble{top:0;left:0;max-width:185px;font-size:17px;padding:14px 18px}.do-it{font-size:23px;padding:17px 29px 19px;gap:65px}.ca{font-size:11px}.mute{right:10px;bottom:8px}}@media(max-height:740px) and (min-width:701px){h1{font-size:95px}.playground{height:330px;margin-top:16px}.breathing{width:345px}.bubble{left:8%}}@media(prefers-reduced-motion:reduce){.breathing{animation:none}*,*:before,*:after{transition:none!important}}

.breathing{animation:none}.meat canvas{mask-image:none}.meat{will-change:auto}.breathing{width:min(520px,59vh)}@media(max-width:700px){.breathing{width:370px;max-width:115%;margin-top:26px}}
/* Keep the entire seated model above the copy control at every height. */
.breathing{width:min(450px,46vh)}.playground{align-items:center;align-content:center}header,.bubble{isolation:isolate}header{position:relative;z-index:4}@media(max-width:700px){.breathing{width:350px;max-width:100%;margin-top:15px}}@media(max-height:740px) and (min-width:701px){.breathing{width:350px}}

.meat canvas{mask-image:radial-gradient(ellipse 70% 68% at 50% 48%,#000 55%,transparent 79%)}

.meat canvas{mask-image:none}

.meat{touch-action:none;cursor:grab}.meat:active{cursor:grabbing}

/* Leave room for the wide squash and tall rebound without clipping. */
.meat canvas{width:140%;height:140%;inset:-20%;}
