*{box-sizing:border-box}html,body{margin:0;color:#49392e;background:#faf6ee;font-family:system-ui,-apple-system,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #668d7d;outline-offset:4px}main{max-width:1120px;margin:auto;padding:24px 32px}.header{display:flex;align-items:center;justify-content:space-between;gap:18px}.title{text-align:center}.eyebrow{font-size:10px;letter-spacing:3px;color:#967359;font-weight:700}h1{font-family:Georgia,serif;font-size:clamp(26px,4vw,44px);font-weight:500;margin:7px 0 0}.back{text-decoration:none;color:#796655;font-size:14px}.score{background:#fff2d6;border-radius:18px;padding:10px 15px;white-space:nowrap;color:#926826}.tabs{display:flex;justify-content:center;gap:6px;margin:22px auto 16px}.tab{border:1px solid #e6dccb;background:transparent;padding:10px 22px;border-radius:24px;color:#786957;font-size:14px}.tab.active{background:#657f70;border-color:#657f70;color:white;box-shadow:0 3px 8px #657f7020}.instruction{text-align:center;margin:0 0 14px}#prompt{font-size:14px;color:#877361}.relation{font-family:Georgia,serif;font-size:28px;font-weight:700;margin-top:4px;color:#916340}.scene{position:relative;aspect-ratio:3/2;isolation:isolate;overflow:hidden;border-radius:24px;box-shadow:0 8px 28px #69503914;background:#efe2ca}.room{position:absolute;width:100%;height:100%;object-fit:fill;pointer-events:none}.object{position:absolute;pointer-events:none;object-fit:fill;z-index:20}.table{left:32%;top:52%;width:36%;height:34%}.basket{left:3%;top:70%;width:18%;height:20%}.cup{left:80%;top:74%;width:15%;height:18%}.bunny{position:absolute;width:8%;height:22%;padding:0;border:0;background:none;z-index:30;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transition:filter .15s;min-width:44px}.bunny img{width:100%;height:100%;object-fit:fill;pointer-events:none}.bunny.dragging{cursor:grabbing;filter:drop-shadow(0 5px 5px #50382030)}.bunny:focus-visible{outline-offset:0;border-radius:20px}.feedback{min-height:44px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;color:#6e826f;padding:10px 0}.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:12px 0 16px}h2{font:500 24px Georgia,serif;margin:0}.section-heading span{font-size:12px;color:#9b8c7c}.cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.card{padding:6px 6px 12px;border:1px solid #e6dfd2;border-radius:16px;background:#fffdf8;box-shadow:0 3px 8px #73573808;color:#65503c;transition:transform .15s,border-color .15s}.card:hover{transform:translateY(-3px)}.card.active{border-color:#648371;box-shadow:0 0 0 2px #648371}.thumb{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:11px;background:#eee5d4;isolation:isolate}.thumb .room{opacity:.78}.thumb .mini-bunny{position:absolute;width:9%;height:24%;object-fit:fill}.thumb .object{z-index:20}.card strong{display:block;text-align:center;margin-top:10px;font-size:11px;letter-spacing:.4px;line-height:1.5}.card:nth-child(3n+2){background:#f8f4eb}.card:nth-child(3n){background:#f1f5ef}footer{text-align:center;color:#a59583;font-size:11px;padding:24px 0 6px}.confetti{position:absolute;inset:0;z-index:100;pointer-events:none;overflow:hidden}.piece{position:absolute;top:-20px;width:8px;height:13px;animation:fall 1.2s ease-in forwards}@keyframes fall{to{transform:translate(var(--dx),var(--fall)) rotate(720deg);opacity:0}}@media(min-width:1000px){.scene{max-height:590px;aspect-ratio:auto;height:590px}}@media(max-width:650px){main{padding:16px 12px}.header{flex-wrap:wrap;gap:10px}.title{order:3;width:100%}.eyebrow{font-size:9px}h1{font-size:32px}.back{font-size:12px}.score{padding:7px 12px}.tabs{margin:16px 0 12px}.tab{padding:10px 19px}.relation{font-size:24px}.scene{border-radius:16px}.cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.section-heading{display:block;margin:12px 0}h2{font-size:22px}.section-heading span{display:block;margin-top:5px}.card{padding:5px 5px 9px;border-radius:12px}.card strong{font-size:9px;margin-top:7px}.feedback{font-size:12px}.bunny{width:10%;height:25%}footer{font-size:10px}}@media(prefers-reduced-motion:reduce){.piece{animation-duration:.01s}.card{transition:none}}

.bunny.under-size img{width:68%;height:68%;position:absolute;bottom:0;left:16%}

/* Reuse the original illustrations as front-wall layers, without drawing new graphics.
   Bunny sits above the back rim and below the front lip of each vessel. */
.container-front{z-index:35;pointer-events:none}
.cup-front{clip-path:polygon(0 23%,5% 25%,12% 28%,22% 30%,35% 31.5%,44% 32%,57% 31.5%,68% 30%,77% 27%,83% 23%,100% 23%,100% 100%,0 100%)}
.basket-front{clip-path:polygon(0 23%,7% 29%,18% 35%,32% 38%,50% 40%,68% 38%,82% 35%,93% 29%,100% 23%,100% 100%,0 100%)}
.scene>.container-front{visibility:hidden}
.scene[data-containment="in"]>.cup-front,.scene[data-containment="inside"]>.basket-front{visibility:visible}
.thumb .container-front{z-index:35}