:root{--ink:#354c43;--muted:#78857a;--green:#507860;--paper:#f7f3e9;--pink:#d88687}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:ui-rounded,'Segoe UI',sans-serif}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #df9871;outline-offset:4px}main{max-width:980px;margin:auto;padding:28px 34px}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}.brand{display:flex;align-items:center;gap:14px}.brand-icon{font-size:42px;color:#6c9774}.brand small{font-size:10px;letter-spacing:2.6px;font-weight:700}h1{font-family:Georgia,serif;font-size:42px;margin:1px 0;font-weight:500;letter-spacing:-1.7px}h1 span{font-family:sans-serif;font-size:18px;color:var(--pink);margin-left:8px}.header-actions{display:flex;align-items:center;gap:14px}.credits{background:#efe5c9;padding:11px 17px;border-radius:30px;color:#8e713b}.icon-button{border:1px solid #dddccc;background:transparent;border-radius:50%;width:49px;height:49px;font-size:22px;display:grid;place-content:center}.icon-button span{font-size:9px}.wellbeing{padding:0 5px 18px}.wellbeing>div{display:flex;justify-content:space-between;font-size:14px}.wellbeing strong{color:var(--green)}small{font-weight:500}.wellbeing progress{width:100%;height:9px;border:0;border-radius:20px;overflow:hidden;display:block;margin-top:12px;background:#e4e6d9}progress::-webkit-progress-bar{background:#e4e6d9}progress::-webkit-progress-value{background:#8dab82;border-radius:20px;transition:width .4s}progress::-moz-progress-bar{background:#8dab82}.wellbeing p{font-size:11px;color:var(--muted);margin:8px 0 0}.scene{position:relative;aspect-ratio:900/650;overflow:hidden;border-radius:26px;border:7px solid #fffaf0;box-shadow:0 9px 28px #6b674311;isolation:isolate}.habitat{position:absolute;width:100%;height:100%;inset:0}.scene-label{position:absolute;top:20px;left:22px;z-index:2;font-size:10px;letter-spacing:1px;color:#786a4d;background:#fffaf0bd;border-radius:20px;padding:8px 12px}.bubble{position:absolute;z-index:3;top:26%;left:38%;max-width:49%;background:#fffcf2;padding:12px 18px;border-radius:18px 18px 18px 3px;font-size:13px;box-shadow:0 4px 0 #594e3610}.rabbit{position:absolute;border:0;background:none;width:38%;height:61%;left:32%;bottom:11%;padding:0;touch-action:none;user-select:none}.rabbit svg{width:100%;height:100%;overflow:visible}.rabbit:hover{filter:brightness(1.025)}#bunny-art{transform-origin:center 90%;animation:breathe 3.5s ease-in-out infinite}.rabbit.happy{animation:hop .5s ease}.scene-caption{position:absolute;bottom:13px;left:0;right:0;text-align:center;font-size:11px;color:#685d42}.section-title{display:flex;justify-content:space-between;align-items:center;margin:24px 0 14px}h2{font:500 23px Georgia,serif;margin:0}.section-title>span{font-size:10px;color:var(--muted)}.tools{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.tools button{border:1px solid #e1dfd2;background:#fffcf4;border-radius:17px;min-height:112px;font-size:12px;font-weight:650;padding:12px 3px;transition:.2s}.tools button>span{display:block;font-size:29px;margin-bottom:8px}.tools i{display:block;font-style:normal;font-size:10px;color:var(--muted);font-weight:400;margin-top:5px}.tools button[aria-pressed=true]{background:#e1ecdE;border-color:#719579;box-shadow:0 3px 0 #a8bea0}.action-bar{min-height:63px;display:flex;align-items:center;justify-content:center;gap:15px;text-align:center;font-size:12px;color:#627564}.action-bar button{border:0;border-radius:12px;background:#e3eaca;padding:10px}#item{font-size:29px;touch-action:none;user-select:none}.quiz-card{width:100%;display:flex;align-items:center;gap:19px;text-align:left;border:1px solid #dce2d3;border-radius:18px;background:#eaf0e2;padding:20px 23px}.quiz-icon{display:grid;place-content:center;font:30px Georgia;background:#d5e3c9;color:#5c7b54;width:52px;height:58px;border-radius:45%}.quiz-card small{display:block;letter-spacing:1.4px;font-size:8px;color:#6e8466}.quiz-card strong{display:block;font:22px Georgia;margin:5px 0}.quiz-card span span{font-size:11px;color:#72826c}.quiz-card>b{margin-left:auto;font-size:12px}footer{font-size:10px;color:#8b9183;display:flex;justify-content:center;gap:12px;flex-wrap:wrap;padding:25px 0 5px}footer>span:first-child{color:#cf9793}.heart{position:absolute;color:#d78184;font-size:27px;pointer-events:none;animation:float 1.5s ease-out forwards;z-index:5}.straw{position:absolute;background:#edd59b;border:2px solid #d1af6f;border-radius:40%;width:45px;height:27px;transform:rotate(-12deg);font-size:17px;touch-action:none;z-index:4}dialog{border:0;border-radius:24px;background:#fffaf0;color:var(--ink);width:min(440px,90vw);padding:30px;box-shadow:0 20px 80px #20352d33}dialog::backdrop{background:#263e365e;backdrop-filter:blur(5px)}dialog small{font-size:10px;letter-spacing:2px}dialog h2{margin:17px 0;line-height:1.3}dialog p{font-size:14px;line-height:1.6}dialog button{border:1px solid #d5decc;background:#e5eddc;border-radius:12px;padding:13px;margin:6px 0;min-height:45px}#answers{display:grid;gap:5px}#answers button{text-align:left}#answers button:disabled{opacity:.8}#answers .correct{background:#cce4c9}#answers .wrong{background:#f2d8c9}.close{position:absolute;right:12px;top:7px;border:0;background:none;font-size:24px}.drag-ghost{position:fixed;font-size:40px;z-index:20;pointer-events:none;transform:translate(-50%,-50%)}[hidden]{display:none!important}@keyframes float{to{transform:translate(var(--dx),-110px) rotate(16deg);opacity:0}}@keyframes breathe{50%{transform:scale(1.018,1.008)}}@keyframes hop{50%{transform:translateY(-14px) rotate(-3deg)}}@media(min-width:1000px){main{max-width:900px}.scene{aspect-ratio:900/570}.habitat{object-fit:cover}.rabbit{bottom:7%;height:67%}}@media(max-width:600px){main{padding:18px 15px}header{margin-bottom:20px}.brand{gap:8px}.brand-icon{display:none}.brand small{font-size:8px;letter-spacing:1.6px}h1{font-size:34px}.header-actions{gap:8px}.credits{padding:9px 12px;font-size:13px}.icon-button{width:41px;height:41px}.wellbeing>div{font-size:11px}.scene{aspect-ratio: .94;border-width:4px;border-radius:22px}.habitat{width:140%;max-width:none;left:-20%}.rabbit{width:53%;height:58%;left:24%;bottom:14%}.scene-label{left:12px;top:13px;font-size:8px}.bubble{top:28%;left:29%;max-width:65%;font-size:11px;padding:10px 12px}.scene-caption{font-size:9px;bottom:15px}.section-title{margin-top:20px;gap:10px}.section-title h2{font-size:19px}.section-title>span{font-size:8px;max-width:90px;text-align:right}.tools{gap:5px}.tools button{border-radius:13px;min-height:87px;font-size:9px}.tools button>span{font-size:25px}.tools i{display:none}.action-bar{font-size:11px;min-height:70px}.quiz-card{padding:16px 12px;gap:12px}.quiz-card strong{font-size:18px}.quiz-card small{font-size:7px}.quiz-card>b{font-size:0}.quiz-card>b:after{content:'↗';font-size:22px}.quiz-card span span{font-size:10px}.quiz-icon{width:39px;height:45px;flex-shrink:0}footer{gap:5px 10px;font-size:9px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* Comfortable touch targets, including the small straw piles. */
.straw{min-width:44px;min-height:44px}
/* Illustrated tools are rendered in the scene, above the rabbit and below feedback. */
.care-effects{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:hidden}
.care-prop{position:absolute;width:88px;height:88px;filter:drop-shadow(0 5px 3px #48372424);transform-origin:0 0;pointer-events:none}
.care-prop svg{width:100%;height:100%;overflow:visible;display:block}
.prop-feed,.prop-treat{width:65px;height:65px;margin-left:-12px;margin-top:-52px;transform-origin:12px 52px}
.prop-brush{width:100px;height:74px;margin-left:-38px;margin-top:-44px;transform-origin:38px 44px}
.prop-clean{width:100px;height:88px;margin-left:-38px;margin-top:-55px;transform-origin:38px 55px}
.prop-medicine{width:139px;height:58px;margin-left:-6px;margin-top:-29px;transform-origin:6px 29px}
.sipping .plunger{animation:plunger 1.7s ease-in-out forwards}
.brushing{animation:brush-tilt .3s ease-in-out infinite alternate}
.care-spark{position:absolute;width:6px;height:6px;border-radius:50%;pointer-events:none}
.rabbit.being-cared #bunny-art{animation:none}
.rabbit.nibbling #mouth-motion{transform-box:fill-box;transform-origin:center;animation:nibble .22s ease-in-out infinite alternate}
.rabbit.nibbling .rabbit-cheek{animation:cheek .3s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
.straw{background:transparent;border:0;border-radius:12px;width:56px;height:44px;padding:0;transform:none;filter:drop-shadow(0 3px 2px #75583922)}
.straw svg{width:100%;height:100%;overflow:visible}.straw:disabled{cursor:default}
.scene:has(.prop-clean) .scene-caption{color:#557658}
@keyframes nibble{to{transform:translateY(3px) scale(1.08,.78)}}
@keyframes cheek{to{transform:scale(1.025,1.035)}}
@keyframes brush-tilt{to{transform:rotate(-13deg)}}
@keyframes plunger{to{transform:translateX(-23px)}}
@media(max-width:600px){.prop-feed,.prop-treat{width:48px;height:48px;margin-left:-9px;margin-top:-39px;transform-origin:9px 39px}.prop-medicine{width:104px;height:44px;margin-top:-22px}.prop-brush,.prop-clean{width:78px;height:65px}}
@media(prefers-reduced-motion:reduce){.sipping .plunger,.brushing,.rabbit.nibbling #mouth-motion,.rabbit.nibbling .rabbit-cheek{animation:none}}
/* Softer photo-inspired art and a visibly cleanable foreground. */
.scene{aspect-ratio:3/2;background:#d9cbb6;border-width:5px}
.habitat-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rabbit{width:36%;height:87%;left:34%;bottom:-5%;filter:drop-shadow(0 8px 5px #30251635)}
.rabbit:hover{filter:drop-shadow(0 8px 5px #30251635) brightness(1.025)}
#bunny-art{transform-origin:50% 80%;animation:soft-breath 3.8s ease-in-out infinite}
.rabbit.looking-around{animation:little-step .75s ease-in-out}
.rabbit[data-pose=left]{margin-left:-1.5%}.rabbit[data-pose=right]{margin-left:1.5%}
.rabbit.being-cared{margin-left:0}.rabbit.nibbling #bunny-art{animation:soft-nibble .25s ease-in-out infinite alternate}
.bubble{top:31%;left:37%;max-width:53%;background:#fffcf1ed;font-size:12px}
.scene-label{background:#fffaf0df}.scene-caption{background:#fffcf0dd;bottom:9px;left:25%;right:20%;border-radius:12px;padding:5px 8px;font-size:10px}
#floor-dust{position:absolute;inset:64% 0 0;pointer-events:none;background:radial-gradient(ellipse at 20% 50%,#82684465,transparent 29%),radial-gradient(ellipse at 75% 65%,#785e3e66,transparent 34%),linear-gradient(transparent,#8a775044);opacity:var(--dust,1);transition:opacity 1.2s}
#broom-dock{position:absolute;left:3%;bottom:8%;z-index:5;width:68px;height:134px;border:0;background:none;padding:0;transform:rotate(-12deg);filter:drop-shadow(0 4px 3px #33231440)}
#broom-dock svg{width:100%;height:110px}#broom-dock span{display:block;font-size:11px;background:#fff5df;padding:4px;border-radius:9px}#broom-dock:hover{transform:rotate(-4deg)}
.clean-status{position:absolute;right:13px;top:14px;background:#fff9ebed;border:1px solid #e6d6bc;padding:7px 10px;border-radius:15px;font-size:11px;z-index:3}
.straw{width:72px;height:52px;transition:filter .2s}.straw:hover{filter:drop-shadow(0 0 5px #fff0b4)}
.prop-clean{width:135px;height:118px;margin-left:-45px;margin-top:-65px}
.floor-shine{position:absolute;font-size:27px;color:#fffbd1;text-shadow:0 0 12px #fff;pointer-events:none;animation:shine-out 1.8s forwards}
@keyframes soft-breath{50%{transform:translateY(-3px) scale(1.008,1.006)}}
@keyframes soft-nibble{to{transform:translateY(2px) scale(1.005,.997)}}
@keyframes little-step{30%{transform:translateY(-7px) rotate(-1deg)}65%{transform:translateY(-3px) rotate(1deg)}}
@keyframes shine-out{0%{opacity:0;transform:scale(.4)}30%{opacity:1}100%{opacity:0;transform:scale(1.3) translateY(-20px)}}
@media(max-width:600px){.scene{aspect-ratio:.94}.habitat-photo{object-position:52% center}.rabbit{width:52%;height:77%;left:27%;bottom:-2%}.bubble{left:22%;top:28%;font-size:10px;max-width:71%}.scene-label{max-width:43%;font-size:7px;padding:6px}.clean-status{font-size:8px;padding:6px;right:8px;top:12px}#broom-dock{width:49px;height:100px;left:1%;bottom:9%}#broom-dock svg{height:78px}#broom-dock span{font-size:9px}.straw{width:54px;height:44px}.scene-caption{font-size:8px;left:20%;right:12%}.prop-clean{width:108px;height:97px}}
@media(prefers-reduced-motion:reduce){#bunny-art,.rabbit.looking-around,.rabbit.nibbling #bunny-art{animation:none}#floor-dust{transition:none}}
/* Quiet motion: no reward hops or sideways position jumps. */
.rabbit[data-pose=left],.rabbit[data-pose=right],.rabbit.being-cared{margin-left:0}
.rabbit.happy{animation:gentle-contentment 2s ease-in-out}
.rabbit.looking-around{animation:none}
#bunny-art{animation:slow-breath 6s ease-in-out infinite}
.rabbit.nibbling #bunny-art{animation:soft-nibble .48s ease-in-out infinite alternate}
@keyframes gentle-contentment{50%{transform:translateY(-2px) rotate(.4deg)}}
@keyframes slow-breath{50%{transform:translateY(-2px) scale(1.005,1.003)}}
#quiz{max-height:88dvh;overflow:auto}#quiz-menu{display:grid;gap:10px}#quiz-menu button{text-align:left;padding:16px;line-height:1.5}#quiz-menu strong{display:block;font-size:16px}#quiz-menu span{display:block;font-size:12px;color:#607563}#quiz-count{font-size:11px;color:#70836b;letter-spacing:.3px}#quiz-back{background:transparent;border:0;font-size:12px;text-decoration:underline}#quiz-feedback{min-height:55px}#quiz-recap{padding:0;list-style:none}#quiz-recap li{padding:10px 0;border-bottom:1px solid #e4e5d6;font-size:12px;line-height:1.5}.quiz-sources{font-size:10px;color:#74846a}.quiz-sources a{color:inherit}
@media(prefers-reduced-motion:reduce){.rabbit.happy,#bunny-art,.rabbit.nibbling #bunny-art{animation:none}}



.round-clock{display:flex;justify-content:space-between;font-size:12px;margin:0 4px 12px;color:#677a65}.round-clock span{font-variant-numeric:tabular-nums}.live-needs{position:absolute;left:10px;top:37%;z-index:7;width:88px;padding:11px 8px;background:#fffaf0eb;border-radius:15px;display:grid;gap:5px;pointer-events:none}.live-needs label{font-size:10px;font-weight:600}.live-needs meter{width:100%;height:12px;accent-color:#729b66}.live-needs span{font-size:9px;color:#687965}.live-needs label:not(:first-child){margin-top:5px}.pause-rabbit{text-align:center;font-size:50px}#play-pause{text-align:center}#pause-time{font-weight:600}.play-ended .rabbit,.play-ended #bunny-art{animation-play-state:paused!important}@media(max-width:600px){.live-needs{left:5px;top:40%;width:70px;padding:8px 5px}.live-needs label{font-size:8px}.round-clock{font-size:10px}}
/* Keep earned bonus points in view within both play scenes. */
.scene-credits{position:absolute;top:12px;right:12px;z-index:8;display:flex;align-items:center;gap:5px;max-width:54%;padding:9px 12px;background:#fff0c9f5;border:1px solid #d9bd75;box-shadow:0 2px 8px #594e361a;font-size:12px;pointer-events:none}
.scene-credits b{font-size:16px;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
.scene-label{max-width:42%}
.clean-status{top:61px}
@media(max-width:600px){.scene-credits{top:10px;right:8px;padding:7px 9px;font-size:10px;gap:4px}.scene-credits b{font-size:14px}.clean-status{top:53px}}