*{box-sizing:border-box}body{margin:0;background:#faf8f5;color:#39342f;font:16px/1.5 system-ui,sans-serif}button,select{font:inherit}button{cursor:pointer}header{max-width:1120px;margin:auto;padding:24px 30px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e4ddd4}header span{font-size:10px;letter-spacing:1.4px;color:#897d71}main{max-width:1060px;margin:auto;padding:32px 24px}.heading{display:flex;justify-content:space-between;align-items:center;gap:24px}.eyebrow{font-size:11px;letter-spacing:2px;color:#ac2c39;font-weight:750}h1{font-size:clamp(26px,4vw,42px);letter-spacing:-1.6px;line-height:1.15;margin:10px 0}.heading p:not(.eyebrow){color:#7c7369;font-size:14px}.heading>button{border:1px solid #ded6cc;border-radius:30px;background:white;padding:10px 16px;font-size:12px;white-space:nowrap}.playground{height:390px;margin-top:24px;border-radius:28px;background:#edf2e9;overflow:hidden;position:relative;isolation:isolate;touch-action:none;border:1px solid #dedfd3}.sky{position:absolute;inset:0;background:linear-gradient(#edf3ed,#fcf6df)}#season-label{position:absolute;top:23px;left:25px;font-size:12px;background:#ffffffa8;padding:7px 14px;border-radius:30px}.sun{position:absolute;right:12%;top:38px;width:57px;height:57px;border-radius:50%;background:#eed39b;box-shadow:0 0 0 13px #eed39b22}.cloud{position:absolute;left:37%;top:65px;background:#fff9;border-radius:60%;width:100px;height:20px}.hill{position:absolute;width:140%;height:240px;border-radius:50%;left:-20%;top:180px;background:#d0d9b7}.hill.front{background:#e4e3bd;top:235px;left:0}.grass{position:absolute;bottom:45px;left:12%;color:#929b6e;font-size:35px}.field-note{position:absolute;bottom:17px;right:24px;font-size:11px;color:#706f5399}#dog{position:absolute;left:50%;top:74%;width:190px;height:165px;transform:translate(-50%,-85%);background:none;border:0;padding:0;z-index:3;transition:left 1s ease-in-out,top 1s ease-in-out;touch-action:none}#dog svg{width:100%;height:100%;overflow:visible}.conti-thought,.conti-question{display:none}.conti-tail{transform-origin:94px 65px;animation:wag 1.3s ease-in-out infinite}.conti-eyes{transform-origin:55px 40px;animation:blink 6s infinite}.conti-head{transform-origin:56px 65px}.conti-tongue{opacity:0}#dog[data-action=happy] .conti-tail,#dog[data-action=brush] .conti-tail{animation-duration:.22s}#dog[data-action=happy] .conti-tongue{opacity:1}#dog[data-action=walk] .conti-dog{animation:bounce .23s infinite alternate}#dog[data-action=drink] .conti-head,#dog[data-action=eat] .conti-head{animation:sniff .5s infinite alternate}#dog[data-action=tilt] .conti-head{transform:rotate(-12deg)}#dog[data-action=roll] svg{animation:roll 2s ease-in-out}#dog[data-action=sniff] .conti-head{animation:sniff 1s infinite alternate}#hat{position:absolute;left:26%;top:-7%;font-size:49px;z-index:4;pointer-events:none}#prop{position:absolute;font-size:43px;transform:translate(-50%,-65%);z-index:2}#effect{position:absolute;left:50%;top:35%;font-size:30px;z-index:5;pointer-events:none;transition:left 1s;animation:float 2s infinite}.status{display:flex;gap:12px;align-items:center;min-height:65px}.status-dot{background:#c73142;width:7px;height:7px;border-radius:50%;flex-shrink:0}.status p{font-size:14px;margin:10px 0}.tools{display:flex;gap:10px;align-items:stretch}.tools button{background:white;border:1px solid #e4dcd3;border-radius:17px;min-width:0;padding:14px 10px;flex:1;display:grid;justify-items:center;gap:3px;color:#423b35}.tools button span{font-size:30px;line-height:1.3}.tools button strong{font-size:13px}.tools button small{font-size:10px;color:#8b8076}.tools button[aria-pressed=true]{border-color:#bb2639;background:#fff0ef;box-shadow:0 0 0 2px #bb263920}.tools button:hover{border-color:#c99e95}.divider{width:1px;background:#e1d8ce;margin:10px 4px}#season-tools{display:flex;gap:10px;flex:2}.tools>button{flex:1}.help{font-size:12px;color:#8b8076;max-width:770px;margin:18px auto;text-align:center}details{margin:30px 0;border-top:1px solid #e4ddd4;padding-top:14px;font-size:12px;color:#7d7369}summary{cursor:pointer}summary span{margin-left:12px;font-size:10px;color:#a79c90}details label{display:block;margin-top:14px}select{margin-top:8px;border:1px solid #ddd1c6;background:white;border-radius:8px;padding:8px;font-size:13px}footer{text-align:center;color:#8c8177;font-size:12px;padding:15px}footer small{font-size:10px}button:focus-visible,select:focus-visible,.playground:focus-visible{outline:3px solid #b91f32;outline-offset:4px}.playground[data-season=winter] .hill,.playground[data-season=christmas] .hill{background:#e2ebed}.playground[data-season=winter] .hill.front,.playground[data-season=christmas] .hill.front{background:#f8fbfb}.playground[data-season=autumn] .hill,.playground[data-season=halloween] .hill{background:#d4bb92}.playground[data-season=autumn] .hill.front,.playground[data-season=halloween] .hill.front{background:#e9d5ad}.playground[data-season=summer] .hill.front{background:#d6e2ad}.paused *, .reduced *{animation:none!important;transition:none!important}@keyframes wag{50%{transform:rotate(15deg)}}@keyframes blink{0%,43%,47%,100%{transform:scaleY(1)}45%{transform:scaleY(.15)}}@keyframes bounce{to{transform:translateY(-3px)}}@keyframes sniff{to{transform:rotate(9deg) translateY(2px)}}@keyframes roll{50%{transform:rotate(-85deg) translateX(-10px)}}@keyframes float{50%{transform:translateY(-9px)}}@media(max-width:650px){header{padding:18px}header span{font-size:8px;letter-spacing:.5px}main{padding:22px 16px}.heading{display:block}.heading>button{font-size:11px;padding:7px 12px}.playground{height:340px;border-radius:22px;margin-top:16px}#dog{width:150px;height:130px}#hat{font-size:38px}.tools{flex-wrap:wrap}.tools>button{flex:1 1 27%}.divider{display:none}#season-tools{flex:1 1 100%}.tools button{padding:10px}.tools button span{font-size:25px}.tools button small{font-size:9px}.field-note{font-size:9px}.status{min-height:76px}.status p{font-size:12px}.hill{top:160px}.hill.front{top:210px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Keep placed objects in front of the dog's ground shadow. */
#prop{z-index:4;pointer-events:none}

/* Draw the costume independently of platform emoji fonts. */
#hat.bunny-ears{left:27%;top:-20%;width:38%;height:42%;font-size:0;transform:rotate(-4deg)}
#hat.bunny-ears::before,#hat.bunny-ears::after{content:'';position:absolute;bottom:0;width:30%;height:100%;background:#edb1b5;border:6px solid #fff5e9;outline:2px solid #815b43;border-radius:55% 55% 35% 35%;box-shadow:0 2px 3px #59433725}
#hat.bunny-ears::before{left:3%;transform:rotate(-13deg)}
#hat.bunny-ears::after{right:3%;transform:rotate(15deg);height:92%}

#hat.pumpkin-hat{left:21%;top:-2%;width:47%;height:26%;font-size:0;background:repeating-linear-gradient(90deg,#e78024 0%,#f7a43c 22%,#ce621d 25%,#f2952f 29%);border:2px solid #92501f;border-radius:48% 48% 24% 24%;box-shadow:0 3px 0 #713e2525;transform:rotate(-4deg)}
#hat.pumpkin-hat::before{content:'';position:absolute;width:13%;height:37%;left:45%;top:-36%;background:#6e8447;border:2px solid #4f6034;border-radius:5px 5px 0 0;transform:rotate(12deg)}
#hat.pumpkin-hat::after{content:'';position:absolute;left:-9%;bottom:-8%;width:118%;height:15%;border-radius:50%;background:#bb5a1c;border:1px solid #92501f}

/* Knitted winter hat: the pompom rests above the crown. */
#hat.bobble-hat{left:22%;top:-7%;width:45%;height:31%;font-size:0;background:repeating-linear-gradient(90deg,#b62238 0 5px,#ce3449 5px 8px);border:2px solid #8f2435;border-radius:55% 55% 12% 12%;transform:rotate(-5deg);box-shadow:0 2px 2px #59433720}
#hat.bobble-hat::before{content:'';position:absolute;left:25%;top:-64%;width:52%;aspect-ratio:1;background:radial-gradient(circle at 35% 30%,#fffdf6,#e6dbce);border:2px dashed #c8b6a6;border-radius:46% 53% 45% 50%;transform-origin:50% 110%;animation:bobble-wiggle 1.8s ease-in-out infinite}
#hat.bobble-hat::after{content:'';position:absolute;left:-8%;bottom:-7%;width:116%;height:30%;background:repeating-linear-gradient(90deg,#f5eadc 0 4px,#e5d7c8 4px 6px);border:2px solid #bbab9a;border-radius:7px}
@keyframes bobble-wiggle{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}
.paused #hat::before,.reduced #hat::before{animation:none!important}
@media(prefers-reduced-motion:reduce){#hat::before{animation:none!important}}

#hat.reindeer-antlers{left:12%;top:-31%;width:62%;height:53%;font-size:0;transform:rotate(-4deg)}
#hat.reindeer-antlers svg{display:block;width:100%;height:100%;overflow:visible}

#hat.pirate-hat{left:0%;top:-15%;width:86%;height:48%;font-size:0;transform:rotate(-4deg)}
#hat.pirate-hat svg{display:block;width:100%;height:100%;overflow:visible}

#hat.rain-umbrella{left:28%;top:-57%;width:110%;height:143%;font-size:0;transform:none;z-index:-1}
#hat.rain-umbrella svg{display:block;width:100%;height:100%;overflow:visible}

header a,footer a{color:#a82032;text-decoration:none;font-size:12px}header a:hover,footer a:hover{text-decoration:underline}
.tools button{touch-action:none}