:root{font-family:"Microsoft YaHei","PingFang SC",sans-serif;color:#214e47;background:#dce7d2;font-synthesis:none;--cream:#fffbea;--ink:#284f47;--line:#526451;--layer-items:60;--layer-drag:90}
*{box-sizing:border-box}body{margin:0}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;border:2px solid #e3e6ce;background:var(--cream);border-radius:999px;min-height:52px;padding:10px 23px;font-weight:700;box-shadow:0 3px 0 #48684c13;touch-action:manipulation}button:hover{filter:brightness(1.025)}button:focus-visible{outline:4px solid #274d48;outline-offset:4px}button:disabled{cursor:default;opacity:.55}.primary{background:#3d7060;color:#fffdf1;border-color:#fffdf1;min-width:165px}.icon{width:54px;padding:8px;font-size:25px}[hidden]{display:none!important}.garden{position:relative;max-width:1536px;margin:auto;height:100svh;min-height:720px;max-height:1100px;overflow:hidden;isolation:isolate}.scenery{position:absolute;inset:0;background-color:#c8dcb7;background-image:url('/content/themes/handdraw-picnic/1.0.0/forest.webp');background-size:cover;background-position:center;z-index:-1}.scenery:after{content:"";position:absolute;inset:0;background:linear-gradient(#e9f8fa44,transparent 28%)}.topbar{position:absolute;z-index:100;top:24px;left:3%;right:3%;display:flex;justify-content:space-between;align-items:flex-start}.topbar nav{display:flex;gap:12px}.heading{text-align:center;position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}.heading h1{font-size:clamp(35px,4.4vw,62px);line-height:1.12;margin:0;font-weight:900;letter-spacing:.08em}.heading p{margin:9px 0 0;font-size:20px;letter-spacing:.16em}.instruction{position:absolute;z-index:100;top:15.5%;left:50%;transform:translateX(-50%);margin:0;padding:17px 35px;border-radius:40px;background:#fffbeceF;text-align:center;font-size:clamp(18px,2vw,28px);font-weight:700;white-space:nowrap}.playfield{position:absolute;inset:0}.elephant{position:absolute;left:3.5%;top:34%;width:23%;height:31%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 5px 3px #4c5d3318);pointer-events:none}.elephant.celebrate{animation:nod .7s ease-in-out}.beds{position:absolute;left:27%;right:10%;top:40%;height:31%;display:flex;gap:2.5%;align-items:end;justify-content:center}.bed{position:relative;flex:1;height:100%;min-width:0}.bed-target{position:absolute;inset:0;width:100%;height:100%;padding:0;background:none;border:0;border-radius:45%;box-shadow:none}.bed-base{position:absolute;width:100%;height:81%;object-fit:fill;left:0;bottom:0;pointer-events:none}.bed-sign{position:absolute;width:38%;height:82%;object-fit:contain;left:31%;top:-39%;pointer-events:none}.bed-target.drop-hover{outline:3px dashed #31594c;outline-offset:5px}.placed{position:absolute;inset:42% 9% 17%;display:flex;gap:0;align-items:center;justify-content:center;pointer-events:none;z-index:var(--layer-items)}.item{position:relative;flex:0 0 auto;width:clamp(68px,7.2vw,106px);height:clamp(68px,7.2vw,106px);background:none;border:3px solid transparent;padding:5px;border-radius:22px;box-shadow:none;touch-action:none;pointer-events:auto;user-select:none}.item img{width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}.item.selected{outline:3px solid #31534c;outline-offset:4px;background:#fffbec66;transform:translateY(-5px)}.item.chosen{outline:4px solid #31534c;outline-offset:3px;background:#fffbec66}.item:disabled{opacity:1}.tray{position:absolute;left:33%;right:16%;bottom:16%;height:17%;min-height:112px;background:#fff5dc;border:3px solid #bca782;border-radius:24px 19px 25px 16px;box-shadow:inset 0 0 0 6px #fff9e9,0 6px 0 #857a5318;display:flex;align-items:center;justify-content:center;gap:24px;padding:12px;isolation:isolate}.tray:before{content:"";position:absolute;inset:10px;border:2px dashed #d7c2a2;border-radius:14px;z-index:-1;pointer-events:none}.tray-return{position:absolute;inset:0;width:100%;height:100%;border:0;background:none;box-shadow:none;border-radius:20px}.tray .item{z-index:2}.tray-label{position:absolute;bottom:4px;font-size:12px;font-weight:400;pointer-events:none;color:#766d53}.feedback{position:absolute;bottom:9.7%;left:15%;right:15%;text-align:center;font-size:18px;margin:0;line-height:1.6;pointer-events:none}.feedback:not(:empty){padding:4px 16px;border-radius:22px;background:#fffbebdf}.controls{position:absolute;left:3%;right:3%;bottom:32px;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:10px}.help-controls,.task-controls{display:flex;gap:12px;align-items:center}.reference{position:absolute;top:30%;left:45%;width:190px;height:180px;transform:translateX(-25%);background:#fffbeacF;border-radius:40px;text-align:center;padding:12px}.reference img{height:115px;width:115px;object-fit:contain;display:block;margin:auto}.reference p{margin:4px 0;font-size:16px}.garden[data-kind="hunt"] .tray{left:29%;right:17%;bottom:22%;height:24%;gap:32px}.garden[data-kind="hunt"] .item{width:clamp(84px,9vw,125px);height:clamp(84px,9vw,125px)}.garden[data-kind="free"] .instruction{font-size:22px}.pattern-badge{position:absolute;right:0;bottom:0;display:grid;place-items:center;background:#fffbe9;border:2px solid #39584d;color:#39584d;border-radius:50%;font-size:20px;width:29px;height:29px;pointer-events:none}.bed .pattern-badge{top:3%;right:26%;bottom:auto}.reference .pattern-badge{right:22px;bottom:40px}.hub{position:absolute;z-index:70;top:28%;left:26%;right:10%;padding:30px;background:#fffbeaf2;border:2px solid #e1dabe;border-radius:32px;text-align:center;box-shadow:0 10px 35px #54673b13}.hub h2{font-size:32px;margin:0 0 12px}.hub p{line-height:1.7;margin:8px 0 18px}.hub .options{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:20px 0}.hub .options button{background:#edf0d8}.hub .ending{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.hub .small{font-size:13px;color:#687763}.leaf{position:absolute;left:9%;bottom:20%;z-index:80;font-size:68px;border:0;box-shadow:none;background:none;color:#507a4a;transform:rotate(-25deg);animation:leaf 3s ease-in-out infinite;min-width:72px;min-height:72px}.butterfly{position:absolute;left:15%;bottom:29%;width:95px;z-index:80;animation:visit 1s ease-out}.preview-label,.cloud-status{position:fixed;bottom:3px;left:50%;transform:translateX(-50%);font-size:12px;color:#3d5a47;background:#fffbeddd;padding:3px 10px;border-radius:10px;z-index:101;white-space:nowrap}.cloud-blocker{position:fixed;inset:0;background:#26443d88;z-index:300;display:grid;place-items:center;padding:20px}.cloud-card{background:var(--cream);border-radius:24px;padding:30px;max-width:460px;text-align:center}.cloud-card a{display:block;color:inherit;margin:20px}.loading{position:fixed;inset:0;z-index:250;background:#e7efdf;display:grid;place-content:center;text-align:center;padding:30px}.loading h2{font-size:32px}.loading p{max-width:550px;line-height:1.8}dialog{border:2px solid #d8dcc4;border-radius:28px;background:var(--cream);color:var(--ink);padding:30px;max-width:min(90vw,520px);text-align:center;box-shadow:0 18px 80px #22362b40}dialog::backdrop{background:#24463b66}dialog h2{font-size:27px;margin:0 0 16px}dialog p{line-height:1.8}dialog label{display:block;text-align:left;margin:18px 0;line-height:1.8}dialog input{width:22px;height:22px;vertical-align:middle;accent-color:#376c57}dialog .help-menu{display:grid;gap:14px;margin-bottom:20px}.demo-stage{display:flex;gap:24px;align-items:center;justify-content:center;min-height:170px}.demo-stage img{width:100px;height:135px;object-fit:contain}.demo-stage img:first-child{animation:demo-move 2.5s ease-in-out infinite}.drag-ghost{position:fixed;pointer-events:none;z-index:200;width:100px;height:100px;object-fit:contain;filter:drop-shadow(0 6px 4px #21433433)}.hint-target{outline:3px dashed #495b4b;outline-offset:6px}.paused *,.reduced *{animation:none!important;transition:none!important}.paused .playfield{pointer-events:none}@keyframes nod{50%{transform:rotate(3deg) translateY(-7px)}}@keyframes leaf{50%{transform:rotate(-16deg)}}@keyframes visit{from{transform:translate(-35px,-45px);opacity:0}to{opacity:1}}@keyframes demo-move{0%,20%{transform:translateX(0)}65%,85%{transform:translateX(90px)}100%{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
@media(max-width:680px){.garden{min-height:730px;max-height:none}.topbar{top:max(14px,env(safe-area-inset-top));left:14px;right:14px}.quiet{padding:7px 12px;font-size:18px;min-width:48px}.quiet span{display:none}.topbar nav{gap:6px}.icon{width:48px;min-height:48px;padding:7px;font-size:21px}.heading{top:64px}.heading h1{font-size:36px}.heading p{font-size:15px;margin-top:6px}.instruction{top:21%;max-width:94%;white-space:normal;width:max-content;padding:13px 20px;font-size:18px;line-height:1.5}.elephant{left:2%;top:30%;width:24%;height:17%;opacity:.96}.beds{left:5%;right:5%;top:43%;height:21%;gap:8px}.bed-sign{height:85%;top:-45%;width:46%;left:27%}.bed-base{height:88%}.placed{inset:35% 3% 20%;gap:0}.item{width:66px;height:66px;padding:4px}.placed .item{flex-shrink:1;min-width:48px}.tray{left:12%;right:12%;bottom:19%;height:12%;min-height:91px;gap:18px;padding:10px}.tray .item{width:74px;height:74px}.feedback{bottom:12%;left:5%;right:5%;font-size:14px}.controls{bottom:max(29px,calc(env(safe-area-inset-bottom) + 24px));left:12px;right:12px;align-items:flex-end;gap:6px}.controls button{padding:9px 10px;min-height:49px;font-size:14px}.controls .primary{min-width:99px}.help-controls{gap:6px}.help-controls #repeat,.help-controls #demo{width:49px;height:49px;font-size:25px;padding:7px}.help-controls #repeat span,.help-controls #demo span{display:none}.help-controls #help{width:42px}.task-controls{gap:6px}.task-controls #back{padding:9px 6px}.reference{top:34%;left:50%;width:130px;height:130px;padding:8px;transform:translateX(-25%);border-radius:25px}.reference img{height:85px;width:85px}.reference p{font-size:13px;margin:2px 0}.garden[data-kind="hunt"] .tray{left:5%;right:5%;bottom:27%;height:20%;gap:14px}.garden[data-kind="hunt"] .item{width:84px;height:84px}.garden[data-three="true"] .beds{top:36%;height:30%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:16px 10px;left:8%;right:8%}.garden[data-three="true"] .bed{height:100%}.garden[data-three="true"] .bed:last-child{grid-column:1/3;width:50%;justify-self:center}.garden[data-three="true"] .bed-sign{top:-20%;height:70%;width:30%;left:35%}.garden[data-three="true"] .bed-base{height:85%}.garden[data-three="true"] .placed{inset:30% 0 5%}.garden[data-three="true"] .elephant{top:29%;height:12%;width:20%;left:0}.garden[data-three="true"] .item{width:64px;height:64px}.garden[data-kind="free"] .instruction{font-size:18px}.hub{top:31%;left:5%;right:5%;padding:24px 17px}.hub h2{font-size:27px}.hub p{font-size:15px}.hub .options{gap:10px;margin:16px 0}.hub button{font-size:15px;padding:10px 15px}.hub .ending{gap:10px}.leaf{left:1%;bottom:15%;font-size:50px}.butterfly{left:15%;bottom:18%;width:65px}dialog{padding:24px}.demo-stage{gap:15px}.demo-stage img{width:80px}.preview-label,.cloud-status{font-size:11px;max-width:95vw;overflow:hidden;text-overflow:ellipsis}.garden[data-screen="hub"] .elephant{top:25%;left:4%;height:13%}.bed .pattern-badge{top:-3%;right:15%;width:25px;height:25px;font-size:16px}.reference .pattern-badge{bottom:24px;right:6px}}
@media(max-width:370px){.garden{min-height:750px}.garden[data-kind="hunt"] .tray{gap:4px}.instruction{font-size:17px}.task-controls .primary{min-width:93px}}
.is-selecting .placed .item:not(.selected){pointer-events:none}
.bed-front{z-index:var(--layer-front,70);pointer-events:none}.drag-ghost{z-index:90}
button{font-size:20px}.bed-base{object-fit:contain;object-position:center bottom}@media(max-width:680px){button{font-size:16px}.bed-sign{top:-25%}.placed{inset:55% 3% 10%}.garden[data-three="true"] .placed{inset:30% 0 5%}}
/* Each planter owns one stacking context and one aspect-ratio box. Its front
   and body must stay aligned; signs anchor to the soil, not the row height. */
.elephant>img,.elephant>canvas{width:100%;height:100%;object-fit:contain;object-position:center bottom;display:block}
.beds{z-index:50;isolation:isolate}.tray{z-index:30}
.bed{height:auto;aspect-ratio:480/267;flex:1;isolation:isolate}
/* Exploration has one planter: keep it centered without filling the two-bed row. */
.bed:only-child{flex:0 1 48.75%;max-width:300px}
.bed-base{height:100%;object-fit:fill}
.bed-sign{top:auto;bottom:65%;left:30%;width:40%;height:110%;object-position:center bottom}
.placed{inset:26% 5% 20%;align-items:center}
.placed .item{flex-shrink:1;min-width:48px}
@media(min-width:681px){
 .garden[data-three="true"] .beds{top:39%;height:28%;left:27%;right:10%}
 .garden[data-three="true"] .tray{top:72%;bottom:auto;left:33%;right:16%;height:14%}
}
@media(max-width:680px){
 .bed,.garden[data-three="true"] .bed{height:auto;aspect-ratio:480/267}
 .bed-base,.garden[data-three="true"] .bed-base{height:100%}
 .bed-sign,.garden[data-three="true"] .bed-sign{top:auto;bottom:65%;left:30%;width:40%;height:110%}
 .placed,.garden[data-three="true"] .placed{inset:22% 3% 17%}
}
.bed-target:disabled{opacity:1}
.item[data-size="small"] img{width:60%;height:60%;margin:20%}
.reference .sample-butterfly{position:absolute;left:-90px;top:-18px;width:110px;height:110px}
.garden[data-task="butterfly-sample"][data-solved="true"] .sample-butterfly{transform:translateY(45px) rotate(-8deg);transition:transform .5s}
.expansion-options{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px!important}
.expansion-options button{border-radius:20px;padding:16px 12px;text-align:left;font-size:21px;background:#edf0d8}
.expansion-options button:nth-child(4){background:#e7eff1}.expansion-options button:nth-child(5){background:#f4e3cc}
.expansion-options span{display:block;font-size:13px;font-weight:400;margin-top:7px}
#composer{position:absolute;left:29%;right:7%;top:25%;bottom:16%;z-index:65;display:flex;flex-direction:column;align-items:center;gap:9px}
.compose-toolbar,.compose-edit,.compose-palette{display:flex;justify-content:center;align-items:center;gap:9px;flex-shrink:0}
.compose-toolbar button,.compose-edit button{font-size:17px;min-height:48px;padding:8px 16px}
.compose-board{position:relative;isolation:isolate;width:min(100%,440px);aspect-ratio:1;min-height:0;flex:1;max-height:440px;background:#fff7e2;border:3px solid #b5a282;border-radius:35% 38% 32% 36% / 24% 28% 23% 26%;box-shadow:inset 0 0 0 7px #fffbed,0 8px 20px #43654920;touch-action:none}
.compose-board.garden-board{width:100%;max-width:650px;background:#d4dfba;border-radius:36px;box-shadow:inset 0 0 0 7px #e8edcf}
.compose-board.paper-board,.compose-board.garden-board{width:min(100%,max(230px,calc(59svh - 195px)),440px);flex:none}
.expansion-options .card-art{float:right;width:65px;height:60px;margin:0 0 0 8px;display:flex;align-items:center;justify-content:center}
.card-art img{width:100%;height:100%;object-fit:contain}.card-art img+img{width:45%;height:45%;margin-left:-20px}
.compose-petal,.composed-flower{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:26%;aspect-ratio:1;height:auto;min-height:48px;min-width:48px;border:2px solid transparent;border-radius:22px;padding:0;background:none;box-shadow:none;touch-action:none;z-index:3}
.compose-petal img{width:100%;height:100%;display:block;object-fit:contain;transform:rotate(var(--angle));pointer-events:none}
.compose-petal.picked{z-index:8;outline:3px solid #36594d;outline-offset:2px;background:#ffffff30}
.composed-flower{width:32%;isolation:isolate}.composed-flower.picked{outline:3px dashed #36594d;outline-offset:2px;z-index:8}
.mini-petal{position:absolute;width:26%;height:26%;object-fit:contain;pointer-events:none;z-index:3}
.paper-heart{position:absolute;left:50%;top:50%;width:14%;aspect-ratio:1;transform:translate(-50%,-50%);border:3px solid #8c714b;background:radial-gradient(circle at 35% 35%,#f6df9a,#d4b574);border-radius:48% 52% 45% 55%;z-index:9;pointer-events:none;box-shadow:inset 0 0 0 4px #eedcaa}
.paper-stem{position:absolute;top:50%;left:49%;width:3%;height:40%;background:#708958;border:1px solid #587744;border-radius:40%;pointer-events:none;z-index:1}
.paper-stem:after{content:"";position:absolute;left:0;top:45%;width:450%;height:30%;border-radius:90% 5% 90% 5%;background:#8ba569;transform:rotate(-18deg);border:1px solid #587744}
.paper-board>.paper-stem{display:none}
.compose-palette button{width:64px;height:64px;min-height:48px;padding:6px;border-radius:18px;background:#fff6e4;touch-action:none}
.compose-palette img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.compose-palette button[aria-pressed="true"]{outline:3px solid #36594d;outline-offset:2px}
.compose-palette span{background:#fffbe9cc;border-radius:18px;padding:7px 14px;font-size:15px}
.compose-empty{position:absolute;inset:30% 10%;text-align:center;line-height:2;pointer-events:none;color:#526744}
.placement-cursor{position:absolute;width:50px;height:50px;border:3px dashed #31584d;border-radius:50%;transform:translate(-50%,-50%);z-index:20;pointer-events:none}
.compose-ghost{position:fixed!important;min-width:0;min-height:0;transform:translate(-50%,-50%);z-index:220!important;pointer-events:none!important;opacity:.9}
.compose-ghost:not(.composed-flower)>img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.garden[data-kind="compose"] .feedback{bottom:10%;left:28%;right:7%;font-size:15px}
@media(min-width:681px) and (max-height:800px){#composer{top:26%;bottom:14%;gap:5px}.compose-board{max-width:320px}.compose-palette button{width:50px;height:50px}.compose-toolbar button,.compose-edit button{font-size:14px;padding:7px 12px}.garden[data-screen="hub"] .hub{top:24%;padding:20px}.expansion-options button{padding:10px 12px;font-size:18px}}
@media(max-width:680px){
 .garden[data-kind="compose"]{min-height:840px}
 #composer{top:30%;bottom:16%;left:4%;right:4%;gap:7px}
 .garden[data-kind="compose"] .elephant{top:23%;left:0;width:18%;height:10%}
 .compose-toolbar{gap:5px;width:100%}.compose-toolbar button,.compose-edit button{font-size:13px;padding:7px 9px;min-height:48px}
 .compose-board,.compose-board.paper-board,.compose-board.garden-board{width:min(100%,290px);max-height:290px;flex:none}
 .compose-edit{gap:4px;flex-wrap:wrap}.compose-edit button{padding:7px 8px}
 .compose-palette button{width:54px;height:54px}.compose-palette span{font-size:13px}
 .garden[data-kind="compose"] .feedback{left:5%;right:5%;bottom:9.5%;font-size:13px}
 .garden[data-kind="compose"] .help-controls #help{display:none}
 .garden[data-screen="hub"]{min-height:900px}.garden[data-screen="hub"] .hub{top:25%;padding:18px 14px}
 .expansion-options{gap:8px!important}.expansion-options button{font-size:16px;padding:12px 10px;min-height:80px}.expansion-options span{font-size:12px;line-height:1.5}
 .expansion-options .card-art{width:35px;height:40px;margin-left:3px}
 .reference .sample-butterfly{left:-67px;width:80px;height:80px}
}
@media(min-width:681px) and (max-height:800px){
 .heading h1{font-size:44px}.heading p{font-size:16px;margin-top:5px}
 .feedback{left:32%;right:25%;bottom:43px;font-size:14px}
}