/* A quiet meadow and an engraved, interlaced maker's seal. No dependencies. */
:root{color-scheme:light;--paper:#f4f0df;--ink:#4c5842}

*{box-sizing:border-box}

body{margin:0;background:var(--paper);color:var(--ink)}

main{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:36px 24px 20px;position:relative;overflow:hidden}

.illustration{width:min(560px,82vw)}

.scene{position:relative;isolation:isolate;overflow:hidden;width:100%;aspect-ratio:1.13;background:#dfe6ca;border:1px solid #ced8b6;border-radius:48% 48% 10px 10px}
.scene *{position:absolute}
.sun{width:20%;height:23%;background:#f4ce74;border-radius:50%;left:64%;top:12%;box-shadow:0 0 0 13px #efce7620}
.cloud{background:#f5f3df;border-radius:50%;width:18%;height:5%;opacity:.8}
.cloud:before{content:"";position:absolute;width:50%;height:170%;border-radius:50%;background:inherit;left:22%;bottom:0}
.c1{top:25%;left:13%}
.c2{top:39%;right:9%;transform:scale(.6)}
.spark{font-size:23px;color:#78935b}
.s1{top:13%;left:40%}
.s2{top:44%;left:14%;font-size:15px}
.hill{border-radius:50% 50% 0 0;width:160%;height:49%;left:-25%;bottom:-20%}
.hill-back{background:#c6d4ac;bottom:-9%;left:-47%;transform:rotate(12deg)}
.hill-front{background:#acbf8c;transform:rotate(-9deg)}
.shadow{left:27%;bottom:20%;width:52%;height:5%;background:#788d5b40;border-radius:50%;animation:shadow 3s ease-in-out infinite}
.shrew{width:68%;height:45%;left:12%;bottom:23%;animation:breathe 3s ease-in-out infinite;transform-origin:55% 100%}
.body{width:64%;height:69%;left:13%;bottom:2%;background:#8b725d;border-radius:56% 58% 42% 42%;box-shadow:inset 7px 10px 0 #9d8269,inset -2px -10px 0 #79614f}
.tummy{width:45%;height:29%;bottom:3%;left:31%;border-radius:50%;background:#b49b79;transform:rotate(-5deg)}
.head{width:45%;height:60%;left:58%;bottom:5%;transform-origin:20% 65%;animation:sniff 3s ease-in-out infinite}
.snout{width:100%;height:82%;left:0;bottom:5%;background:#8b725d;clip-path:polygon(0 0,45% 10%,100% 75%,92% 89%,30% 100%,0 87%);border-radius:40%}
.ear{width:21%;height:33%;left:9%;top:2%;border-radius:50%;background:#c29785;border:6px solid #79614f;transform:rotate(-15deg)}
.eye{width:7%;height:11%;border-radius:50%;background:#292a24;left:47%;top:39%;animation:blink 5s infinite}
.eye:after{content:"";position:absolute;width:32%;height:32%;border-radius:50%;background:#fff9e7;top:15%;left:20%}
.cheek{width:14%;height:13%;border-radius:50%;background:#c38773;left:45%;top:58%;opacity:.85}
.nose{width:12%;height:15%;background:#4e3934;border-radius:48%;right:-2%;bottom:15%;transform:rotate(20deg)}
.whisker{width:29%;height:1px;background:#4e3934;left:72%;bottom:24%;transform-origin:0 50%}
.w1{transform:rotate(-20deg)}
.w2{transform:rotate(5deg)}
.w3{transform:rotate(25deg)}
.tail{width:35%;height:36%;bottom:4%;left:-9%;border:9px solid #b48d7d;border-right:0;border-top:0;border-radius:0 0 0 70%;transform:rotate(-15deg);transform-origin:right bottom;animation:tail 3s ease-in-out infinite}
.foot{width:14%;height:9%;background:#b48d7d;border-radius:60% 60% 30% 30%;bottom:-3%}
.back-foot{left:27%;transform:rotate(-7deg)}
.front-foot{left:66%;transform:rotate(9deg)}
.fur{width:9%;height:13%;background:#9d8269;clip-path:polygon(0 100%,40% 0,55% 65%,85% 15%,100% 100%);top:23%;left:35%;transform:rotate(-20deg)}
.f2{left:42%;top:24%;transform:rotate(9deg)}
.flower{width:14%;height:31%;right:6%;bottom:22%;transform-origin:50% 100%;animation:sway 4s ease-in-out infinite}
.stem{height:70%;width:3px;background:#637d45;bottom:0;left:48%;transform:rotate(5deg)}
.petals{font-size:65px;line-height:1;color:#faf1cf;top:-6%;left:2%;text-shadow:0 1px 0 #c2b983}
.leaf{width:33%;height:15%;border-radius:0 80% 0 80%;background:#637d45;left:17%;bottom:26%;transform:rotate(10deg)}
.grass{width:7%;height:9%;border-left:3px solid #6f8a51;border-right:3px solid #6f8a51;border-radius:50% 50% 0 0;transform:rotate(-10deg);bottom:17%;left:17%}
.g2{bottom:11%;left:80%;transform:rotate(12deg) scale(.7)}
.g3{bottom:31%;left:9%;transform:scale(.5)}
.pebble{width:6%;height:2.5%;background:#8e9f77;border-radius:80% 80% 30% 30%;bottom:13%;left:48%}
.p2{width:3%;bottom:16%;left:58%}
@keyframes breathe{0%,100%{transform:translateY(0) rotate(-1deg)}
50%{transform:translateY(-4px) rotate(1deg)}
}
@keyframes sniff{0%,65%,100%{transform:rotate(0)}
73%,85%{transform:rotate(-5deg)}
79%,91%{transform:rotate(1deg)}
}
@keyframes blink{0%,42%,46%,100%{transform:scaleY(1)}
44%{transform:scaleY(.08)}
}
@keyframes tail{0%,100%{transform:rotate(-15deg)}
50%{transform:rotate(-7deg)}
}
@keyframes sway{0%,100%{transform:rotate(-4deg)}
50%{transform:rotate(5deg)}
}
@keyframes shadow{0%,100%{transform:scaleX(1)}
50%{transform:scaleX(.94)}
}

/* The stars and flower are shapes, not text glyphs. */
.spark{width:16px;height:16px;background:#78935b;clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%)}

.s2{width:10px;height:10px}

.petals{width:23px;height:23px;top:7%;left:29%;background:#e9cc79;border:5px solid #faf1cf;border-radius:50%;box-shadow:0 -13px 0 -3px #faf1cf,12px -4px 0 -3px #faf1cf,8px 11px 0 -3px #faf1cf,-8px 11px 0 -3px #faf1cf,-12px -4px 0 -3px #faf1cf}

.motion-toggle{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

.motion-control{position:absolute;right:24px;bottom:24px;width:44px;height:44px;border:1px solid #c8ccb9;border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:background .2s}

.motion-control:hover{background:#e5e7d4}

.pause-icon{width:11px;height:13px;border-left:3px solid #657154;border-right:3px solid #657154}

.play-icon{display:none;width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:10px solid #657154;margin-left:3px}

#pause:checked~.illustration .scene *{animation-play-state:paused}

#pause:checked~.motion-control .pause-icon{display:none}

#pause:checked~.motion-control .play-icon{display:block}

#pause:focus-visible~.motion-control{outline:2px solid #795335;outline-offset:5px}

.signature{position:relative;width:280px;height:110px;margin-top:22px;display:grid;place-items:center;color:#8c8066;transform:rotate(-4deg)}

.filigree{position:absolute;inset:0;width:100%;height:100%;opacity:.55}

.credit{position:relative;font-family:Georgia,'Times New Roman',serif;font-size:17px;font-style:italic;letter-spacing:.07em;color:#716c57;text-shadow:0 1px 0 #fffdf1;transform:rotate(4deg);padding:6px 14px;background:radial-gradient(ellipse,var(--paper) 45%,transparent 72%);font-variant-ligatures:common-ligatures}

@media(max-width:600px){main{padding:30px 20px 76px}
.illustration{width:min(100%,440px)}
.signature{margin-top:20px;transform:rotate(-4deg) scale(.9)}
.motion-control{right:18px;bottom:18px}
}

@media(prefers-reduced-motion:reduce){.scene *{animation:none!important}
.motion-control,.motion-toggle{display:none}
}

/* Petting adds no visible instructions or controls. */
.illustration{position:relative}
.scene{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none}
.scene:focus-visible{outline:2px solid #795335;outline-offset:6px}
.scene.petted .cheek{background:#e3a18e}
.surprise{inset:0;pointer-events:none;display:none}
.scene.surprised .surprise{display:block}
.puff{left:19%;bottom:27%;width:11%;height:10%;border-radius:50%;background:#a4ac75;opacity:0;box-shadow:-16px -5px 0 -2px #a4ac75,4px -12px 0 -4px #a4ac75;animation:toot 1.2s ease-out both}
.puff-two{animation-delay:.15s;bottom:29%;width:7%;height:7%}
.poop{left:21%;bottom:19%;width:7%;height:4%;border-radius:50% 50% 35% 35%;background:#71503d;box-shadow:inset 0 -3px 0 #5b402f;animation:plop .5s .18s both}
.poop:before,.poop:after{content:"";position:absolute;background:#71503d;border-radius:50% 50% 30% 30%}
.poop:before{width:72%;height:80%;bottom:55%;left:14%}
.poop:after{width:42%;height:75%;bottom:105%;left:30%;transform:rotate(-12deg)}
.speech{position:absolute;top:39%;right:9%;max-width:60%;border-radius:16px 16px 16px 3px;background:#fff8e8;color:#594c3c;font:italic 18px Georgia,serif;box-shadow:0 3px 12px #49513712;pointer-events:none}
.speech:not(:empty){padding:12px 16px}
@keyframes toot{0%{opacity:0;transform:scale(.4)}20%{opacity:.65}100%{opacity:0;transform:translate(-45px,-20px) scale(1.7)}}
@keyframes plop{0%{opacity:0;transform:translateY(-18px) scale(.5)}70%{opacity:1;transform:translateY(2px) scale(1.15,.85)}100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.scene.surprised .puff{opacity:.4}.scene.surprised .poop{opacity:1}.motion-control{transition:none}}