*{box-sizing:border-box}html{font:16px/1.6 "Microsoft YaHei","PingFang SC",sans-serif;color:#254d44;background:#e6ede9}body{margin:0;overflow:hidden;height:100dvh}button{font:inherit;cursor:pointer;border:0}button:focus-visible,[tabindex]:focus-visible{outline:3px solid #cb9739;outline-offset:4px}[hidden]{display:none!important}.backdrop{position:fixed;inset:0;background:linear-gradient(#f7faf8ed 0%,#edf4f0ec 40%,#e6eee7e6 100%),url('assets/lettuce-lab-worktable.png') center/cover}.table-surface{position:fixed;left:0;right:0;top:42%;bottom:0;background:linear-gradient(175deg,#f4f0e7,#e4e1d5);box-shadow:0 -2px 0 #fff,0 -14px 35px #24453407}header{position:fixed;inset:0 0 auto;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:23px 32px}.brand{display:flex;gap:12px;align-items:center}.brand-icon{font-size:36px;color:#4c7552}.brand small{font-size:12px;color:#7c9385;letter-spacing:.18em}h1{font-size:23px;letter-spacing:.08em;margin:0;font-weight:600}nav{display:flex;gap:10px}nav button{padding:9px 15px;color:#537063;border:1px solid #b8cdbd;border-radius:30px;background:#ffffff73;font-size:14px}nav button:hover{background:white}.lesson-prompt{position:fixed;left:7%;top:15%;z-index:5;max-width:520px;pointer-events:none}#chapter{font-size:12px;letter-spacing:.14em;color:#728b78}.lesson-prompt h2{font-size:clamp(24px,2.1vw,33px);font-weight:600;line-height:1.4;margin:10px 0}.lesson-prompt p{font-size:15px;color:#68816e;margin:7px 0}.progress{width:96px;height:3px;background:#c8d6c9;margin-top:21px;border-radius:3px}.progress i{display:block;height:100%;width:8%;background:#54764b;transition:width .4s}.scene-label{position:fixed;top:40%;left:7%;font-size:12px;color:#93a08c;z-index:4}.scene-label span{margin-left:8px;color:#a3ad9c}#scene{position:fixed;left:12%;right:12%;top:31%;bottom:24%;isolation:isolate}#visuals,#targets,#effects{position:absolute;inset:0}#visuals{pointer-events:none}#effects{pointer-events:none;z-index:8}.art{display:block;background:url('assets/equipment-atlas-v2.png') var(--x) var(--y)/300% 200% no-repeat;pointer-events:none;width:130px;height:130px}.old-art{background-image:url('assets/lettuce-supplies-atlas.png')}.object{position:absolute;filter:drop-shadow(0 15px 11px #3850311c);transition:transform .7s,opacity .5s}.tray-object{width:520px;height:520px;left:50%;top:52%;transform:translate(-50%,-50%)}.target{position:absolute;border:2px dashed #809b6888;border-radius:24px;background:#f5ffe30d;color:#6c8656;touch-action:none;transition:background .2s,border .2s;display:grid;place-items:center;z-index:3}.target:hover,.target.over{background:#def0c444;border-color:#739359}.target span{pointer-events:none;background:#f9fbeaeb;border-radius:20px;padding:6px 15px;position:absolute;bottom:-19px;font-size:13px;box-shadow:0 2px 10px #4350310d;white-space:nowrap}.tray-target{width:450px;height:225px;left:50%;top:55%;transform:translate(-50%,-50%)}.target.done{border-color:transparent}.target.done span{background:#deedcd}.actionbar{position:fixed;left:50%;bottom:153px;transform:translateX(-50%);z-index:8;display:flex;gap:20px;align-items:center;max-width:calc(100vw - 40px);width:max-content;padding:8px 10px 8px 20px;border:1px solid #ffffffb0;border-radius:16px;background:#ffffffac;box-shadow:0 4px 20px #354f2610;backdrop-filter:blur(12px)}.actionbar p{font-size:14px;margin:0;line-height:1.65;max-width:560px;color:#667856}.actionbar p.error{color:#a2532c}.primary{border-radius:10px;padding:11px 21px;background:#3f6a52;color:#fff;font-size:14px;white-space:nowrap}.primary:hover{background:#315843}.primary:disabled{opacity:.4;cursor:not-allowed}#tools{position:fixed;z-index:9;bottom:34px;left:50%;transform:translateX(-50%);display:flex;gap:12px;align-items:end;border-top:1px solid #b9c7aa88;padding:10px 12px 0;max-width:98vw}.tool{padding:0 12px 6px;min-width:92px;border-radius:14px;background:none;position:relative;touch-action:none;border:1px solid transparent;transition:transform .2s,background .2s}.tool:hover{transform:translateY(-5px);background:#ffffff75}.tool.selected{background:#ffffffe0;border:1px solid #97b079;box-shadow:0 5px 16px #4257350d}.tool:disabled{opacity:.45;cursor:default}.tool .art{width:72px;height:72px;margin:0 auto 0;filter:drop-shadow(0 6px 3px #3e593424)}.tool span{font-size:14px;color:#6a7c59;white-space:nowrap}.tool small{position:absolute;top:2px;right:2px;background:#4f7755;color:white;border-radius:4px;padding:0 4px;font-size:10px}footer{position:fixed;bottom:10px;left:28px;right:28px;display:flex;justify-content:space-between;z-index:8;color:#859275;font-size:11px}footer button{background:none;color:#758567;font-size:12px;padding:0}#stepMenu{position:fixed;z-index:20;right:30px;top:80px;background:#fafff5f5;box-shadow:0 12px 40px #30472a25;border:1px solid white;border-radius:15px;padding:16px;min-width:230px}#stepMenu p{margin:0 0 7px;color:#789067;font-size:12px}#stepMenu ol{list-style:none;margin:0;padding:0}#stepMenu li{padding:6px 10px;color:#7c8b6c;font-size:14px}#stepMenu li.active{color:#335b3c;background:#e4efd7;border-radius:7px}#stepMenu li.done{color:#789463}.sponge-grid{position:absolute;left:50%;top:53%;transform:translate(-50%,-50%);width:332px;height:185px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:0}.sponge-grid .art{width:112px;height:112px;transform:translateY(-8px)}.slot-grid{position:absolute;left:50%;top:53%;transform:translate(-50%,-50%);width:332px;height:185px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:8px;z-index:4}.slot{border-radius:50%;border:1px dashed #81935d99;background:transparent;color:#637544;font-size:14px;position:relative;touch-action:none}.slot:not(.planted):hover{background:#ffffdc80}.slot.planted{border:1px solid #5c7f4377;color:#39602e}.slot.planted:after{content:'✓';position:absolute;right:8px;top:8px;font-size:12px;background:#edfbdc;border-radius:50%;width:20px;height:20px}.slot .seed-dot{position:absolute;width:15px;height:23px;background:url('assets/equipment-atlas-v2.png') 0 100%/300% 200%;display:none}.seed-mark{font-size:21px;color:#65562a;transform:rotate(-20deg);display:inline-block}.seed-dish{position:absolute;left:2%;top:38%;width:170px;height:150px}.seed-dish .art{width:180px;height:180px}.seed-source{position:absolute;left:2%;top:38%;width:170px;height:150px;border-radius:50%;background:transparent;border:1px dashed #7d965d80;color:#6f8852;z-index:5;touch-action:none}.seed-source span{position:absolute;bottom:-28px;left:0;right:0;font-size:12px}.tweezers-cursor{position:absolute;right:8%;top:10%;width:190px;height:190px;transform:rotate(-15deg)}.loaded-label{position:absolute;right:2%;top:15%;font-size:13px;color:#567248;background:#f5f9e9e8;padding:7px 12px;border-radius:20px}.timer-panel{position:absolute;right:0;top:5%;text-align:center;color:#5c7949;background:#fafff1d9;padding:20px;border-radius:16px;min-width:195px;z-index:6}.timer-panel strong{display:block;font-size:32px;font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:.04em}.timer-panel small{font-size:12px;display:block;margin-bottom:12px}.timer-panel button{margin-top:7px}.moisture{position:absolute;right:5%;top:30%;width:105px;color:#6d8560;font-size:12px;text-align:center}.moisture-meter{height:90px;width:20px;border:1px solid #a3bda2;border-radius:10px;position:relative;overflow:hidden;margin:10px auto;background:#ffffff80}.moisture-meter i{position:absolute;left:0;right:0;bottom:0;background:#91c5ba;transition:height .3s}.water-film{position:absolute;width:355px;height:177px;left:50%;top:56%;transform:translate(-50%,-50%);border-radius:12px;background:#8cbec623;pointer-events:none;mix-blend-mode:multiply}.spray-effect{position:absolute;left:40%;top:14%;width:25%;height:58%;background:radial-gradient(#82b9dbe0 1.4px,transparent 3px) 0 0/17px 23px;animation:spray .9s forwards}.pour-effect{position:absolute;left:47%;top:4%;width:7%;height:60%;background:linear-gradient(90deg,transparent,#a0d3daa0,transparent);animation:spray 1s forwards}@keyframes spray{0%{opacity:0;transform:translateY(-40px)}30%{opacity:1}100%{opacity:0;transform:translateY(40px)}}.growing .art{animation:grow 1s ease-out}@keyframes grow{from{opacity:0;transform:translateY(10px) scale(.6)}to{opacity:1;transform:translateY(-8px) scale(1)}}#dragGhost{position:fixed;z-index:100;pointer-events:none;transform:translate(-50%,-50%);filter:drop-shadow(0 10px 8px #38512d33)}#dragGhost .art{width:145px;height:145px}#dragGhost.loaded:after{content:'已夹取种子';position:absolute;bottom:-5px;background:#f6ffea;color:#567348;font-size:11px;border-radius:12px;padding:2px 7px;white-space:nowrap}.diagram{width:100%;height:100%;overflow:visible}.diagram text{font-family:inherit;fill:#5f7967;font-size:15px}.diagram .pipe{fill:none;stroke:#bdd1cf;stroke-width:18;stroke-linecap:round;stroke-linejoin:round}.diagram .flow{fill:none;stroke:#4ba9b7;stroke-width:8;stroke-dasharray:12 16;stroke-linecap:round;opacity:0}.diagram.running .flow{opacity:1;animation:flow 2s linear infinite}@keyframes flow{to{stroke-dashoffset:-56}}.diagram .root{fill:none;stroke:#b8a476;stroke-width:2}.diagram-note{position:absolute;left:50%;top:3%;transform:translateX(-50%);color:#7d927d;font-size:12px;white-space:nowrap}.basket-target{left:calc(50% - 85px);width:170px;height:67px;border-radius:8px;top:54%;border-width:2px}.wrong-target{left:calc(50% - 85px);width:170px;height:50px;border:1px dashed #bcc6b1;top:24%;border-radius:8px;background:none;color:#9aa490;font-size:12px}.placed-plug{position:absolute;width:125px;height:125px;left:50%;top:49%;transform:translate(-50%,-50%);filter:drop-shadow(0 4px 5px #34542b20)}.flow-controls{position:absolute;right:0;top:2%;display:flex;gap:8px;z-index:7}.flow-controls button{padding:10px 15px;border-radius:9px;font-size:14px;background:#edf6e8;border:1px solid #b8cdb1;color:#4d7054}.flow-controls button.active{background:#3f6a52;color:#fff}.flow-caption{position:absolute;bottom:0;left:50%;transform:translateX(-50%);font-size:14px;color:#54735e;background:#f8fff0da;border-radius:14px;padding:9px 18px;max-width:90%;text-align:center}.completion{position:absolute;right:0;top:12%;width:260px;padding:20px;border-left:2px solid #93b277;background:#f9fff080;border-radius:0 14px 14px 0}.completion h3{font-size:24px;font-weight:500;margin:0 0 13px}.completion p{font-size:14px;color:#708363;line-height:1.8}.completion button{margin-top:10px}dialog{border:1px solid white;border-radius:18px;padding:32px;max-width:560px;width:calc(100% - 32px);color:#3e6250;background:#f5faef}dialog::backdrop{background:#163c3260;backdrop-filter:blur(6px)}#closeDialog{position:absolute;right:10px;top:4px;background:none;font-size:25px;color:#698570}dialog h2{font-size:23px}dialog p{font-size:15px;line-height:1.9}.dialog-actions{display:flex;gap:12px}.secondary{background:#e2ecd7;color:#5c7750;padding:11px 18px;border-radius:10px}#panorama{position:fixed;inset:0}body.panorama-mode #lab{display:none}#returnLab{position:fixed;bottom:40px;left:50%;transform:translateX(-50%);z-index:20}.pnlm-controls-container{top:30px}
@media(max-width:1000px){header{padding:18px 22px}.lesson-prompt{left:5%;top:14%}.scene-label{left:5%}#scene{left:5%;right:5%}.tray-object{width:440px;height:440px}.tray-target{width:380px;height:210px}.sponge-grid,.slot-grid{width:282px;height:155px}.sponge-grid .art{width:95px;height:95px}.tool{padding:0 7px 5px;min-width:72px}.tool .art{width:64px;height:64px}.tool span{font-size:13px}#tools{gap:7px}.actionbar{bottom:140px}.seed-dish,.seed-source{left:0;width:120px;height:125px}.seed-dish .art{width:135px;height:135px}.timer-panel{padding:13px;min-width:160px}.timer-panel strong{font-size:27px}.completion{width:225px}.water-film{width:300px;height:155px}}
@media(max-width:650px){header{padding:14px 15px}.brand{gap:7px}.brand-icon{font-size:27px}.brand small{font-size:9px;letter-spacing:.07em}h1{font-size:18px}nav{gap:5px}nav button{font-size:11px;padding:8px 10px}#fullButton{display:none}.lesson-prompt{left:20px;right:20px;top:12%;max-width:none}.lesson-prompt h2{font-size:23px;margin:6px 0}.lesson-prompt p{font-size:14px;line-height:1.65;max-width:95%}#chapter{font-size:10px}.progress{margin-top:12px;width:70px}.table-surface{top:36%}.scene-label{top:34%;left:20px;font-size:10px}.scene-label span{font-size:10px}#scene{left:10px;right:10px;top:35%;bottom:25%}.tray-object{width:340px;height:340px;top:55%}.tray-target{width:285px;height:170px;top:55%;border-radius:18px}.sponge-grid,.slot-grid{width:218px;height:120px;top:56%}.sponge-grid .art{width:74px;height:74px;transform:translateY(-5px)}.slot-grid{gap:4px}.slot{font-size:12px}.slot.planted:after{width:16px;height:16px;top:3px;right:3px;font-size:10px}.target span{font-size:12px;bottom:-15px;padding:4px 10px}.actionbar{bottom:138px;width:calc(100% - 24px);max-width:none;padding:10px 11px;border-radius:12px;gap:10px}.actionbar p{font-size:13px;line-height:1.65}.primary{padding:10px 14px;font-size:13px}#tools{bottom:29px;gap:2px;padding:9px 2px 0;max-width:calc(100% - 12px);width:calc(100% - 12px);justify-content:center;flex-wrap:nowrap}.tool{min-width:0;padding:0 4px 5px;flex:1;max-width:100px}.tool .art{width:52px;height:52px}.tool span{font-size:11px}.tool small{font-size:9px}footer{left:15px;right:15px;bottom:6px;font-size:9px}footer button{font-size:10px}.seed-dish,.seed-source{left:0;top:3%;width:86px;height:76px}.seed-dish .art{width:90px;height:90px}.seed-source span{font-size:10px;bottom:-20px}.loaded-label{font-size:11px;top:3%;right:0;padding:5px 8px}.tweezers-cursor{width:100px;height:100px;right:0;top:1%}.timer-panel{right:0;top:0;padding:9px 13px;min-width:130px;background:#f7fbece8}.timer-panel strong{font-size:21px}.timer-panel small{font-size:10px;margin-bottom:2px}.timer-panel button{font-size:11px;padding:8px 10px}.moisture{right:0;top:2%;font-size:11px;width:80px}.moisture-meter{height:60px;margin:5px auto}.water-film{width:230px;height:110px;top:59%}.diagram text{font-size:18px}.diagram-note{font-size:10px;top:0;white-space:normal;width:90%;text-align:center}.basket-target{top:54%;left:calc(50% - 60px);width:120px;height:50px}.wrong-target{top:26%;left:calc(50% - 60px);width:120px;height:38px;font-size:11px}.placed-plug{width:90px;height:90px;top:49%}.flow-controls{top:0;right:0;gap:5px}.flow-controls button{font-size:11px;padding:7px 9px}.flow-caption{bottom:-6px;padding:6px 9px;font-size:11px;max-width:98%;width:max-content}.completion{left:0;right:0;top:auto;bottom:0;width:100%;padding:10px 13px;background:#f7fdecdd}.completion h3{font-size:19px;margin:0 0 5px}.completion p{font-size:12px;margin:0}.completion button{margin-top:7px}body[data-step="10"] .tray-object{top:22%;width:260px;height:260px}body[data-step="10"] .sponge-grid{top:23%;width:165px;height:91px}body[data-step="10"] .sponge-grid .art{width:56px;height:56px}#stepMenu{top:73px;right:14px;min-width:225px;max-height:65vh;overflow:auto}}
@media(max-height:700px) and (min-width:651px){header{padding:12px 24px}.lesson-prompt{top:15%}.lesson-prompt h2{font-size:25px}.lesson-prompt p{font-size:13px}.progress{margin-top:10px}#scene{top:32%;bottom:26%}.tray-object{width:340px;height:340px}.tray-target{height:170px;width:300px}.sponge-grid,.slot-grid{width:220px;height:125px}.sponge-grid .art{width:74px;height:74px}#tools{bottom:25px}.tool .art{width:51px;height:51px}.actionbar{bottom:118px}.water-film{width:230px;height:120px}.timer-panel{top:-6%;padding:9px 13px}.timer-panel strong{font-size:22px}.scene-label{top:38%}.seed-dish,.seed-source{width:105px;height:100px}.seed-dish .art{width:110px;height:110px}.completion{top:3%;padding:14px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.plug{position:relative}.plug>.seed-mark{position:absolute;left:48%;top:38%;font-size:18px;line-height:1}.slot.over,.seed-source.over{background:#deedba80;outline:2px solid #87a66b}.seed-source:focus-visible{outline:3px solid #c59131}.seed-source:hover{background:#f8ffe233}body[data-step="7"] .lesson-prompt,body[data-step="8"] .lesson-prompt{max-width:540px}.basket-diagram{position:absolute;left:0;top:0}body[data-step="7"] #scene{top:30%;bottom:25%}.diagram-note{z-index:5}
/* Align the nursery cells to the illustrated tray plane. */
.art-1:not(.old-art){clip-path:inset(0 9%)}
.art-0:not(.old-art){background-size:285% 200%}
.sponge-grid,.slot-grid{top:44%;width:290px;height:116px;transform:translate(-50%,-50%) rotate(16deg) skewX(-22deg)}
.sponge-grid .art{width:103px;height:103px;transform:skewX(22deg) rotate(-16deg) translateY(-12px)}
.slot-grid{gap:5px}.slot{border-radius:14px;background:#f7fbd515}
.plug>.seed-mark{left:49%;top:39%;transform:skewX(22deg) rotate(-16deg)}
.growing .art{animation:seedling-reveal .8s ease-out}
@keyframes seedling-reveal{from{opacity:0}to{opacity:1}}
.basket-diagram{height:auto;aspect-ratio:900/370;top:50%;transform:translateY(-50%)}
body[data-step="7"] #scene{height:auto;aspect-ratio:900/370;bottom:auto;top:31%}
.basket-target{left:40.6%;width:18.8%;height:17%;top:58%;border-radius:8px}
.wrong-target{left:38%;width:24%;height:13%;top:24%}
.placed-plug{width:18%;height:auto;aspect-ratio:1;left:50%;top:60%;transform:translate(-50%,-50%)}
body[data-step="9"] .tray-object{left:40%}body[data-step="9"] .sponge-grid{left:40%}
@media(max-width:1000px){.sponge-grid,.slot-grid{width:246px;height:98px}.sponge-grid .art{width:87px;height:87px}.placed-plug{width:18%;height:auto}.basket-target{left:40.6%;width:18.8%;height:17%;top:58%}.wrong-target{left:38%;width:24%;height:13%;top:24%}}
@media(max-width:650px){.sponge-grid,.slot-grid{width:192px;height:76px;top:49%}.sponge-grid .art{width:68px;height:68px;transform:skewX(22deg) rotate(-16deg) translateY(-8px)}.slot{font-size:11px}.basket-target span{font-size:10px;padding:3px 6px}.wrong-target{font-size:10px}.placed-plug{top:60%}body[data-step="7"] #scene{top:42%}.completion{bottom:-20px}body[data-step="9"] .tray-object{top:27%;left:50%;width:260px;height:260px}body[data-step="9"] .sponge-grid{top:23%;left:50%;width:147px;height:58px}body[data-step="9"] .sponge-grid .art{width:52px;height:52px}.flow-controls{top:-25px}.flow-caption{bottom:-6px}}
@media(max-height:700px) and (min-width:651px){.sponge-grid,.slot-grid{width:192px;height:76px}.sponge-grid .art{width:68px;height:68px}.placed-plug{top:60%}}
.plug{min-height:0;min-width:0}
.wrong-target{position:absolute;z-index:4}
body[data-step="7"] #scene{left:16%;right:16%;top:29%}
.placed-plug{top:70%}
body[data-step="8"] .actionbar,body[data-step="9"] .actionbar{bottom:48px}
.cycle-diagram{position:absolute;top:26px;height:86%}
body[data-step="8"] .diagram-note{top:0}
body[data-step="8"] .flow-caption{bottom:-20px}
@media(max-width:650px){body[data-step="7"] #scene{left:10px;right:10px;top:42%}.placed-plug{top:70%}body[data-step="8"] .flow-controls{top:-42px}.cycle-diagram{top:25px;height:86%}body[data-step="8"] .flow-caption{bottom:-22px}body[data-step="8"] .actionbar,body[data-step="9"] .actionbar{bottom:48px}}
@media(max-width:650px){body[data-step="7"] #scene{transform:scale(1.7);transform-origin:50% 20%}body[data-step="7"] .diagram-note{transform:translateX(-50%) scale(.65);top:-12%;width:100%}.basket-target span{font-size:8px}.wrong-target{font-size:8px}.cycle-diagram{width:125%;left:-12.5%;height:100%;top:0}.cycle-diagram text{font-size:24px!important}}
@media(max-width:650px){.cycle-diagram text[style*="13px"]{font-size:18px!important}}
/* Liquid follows the exact tray sprite coordinates and stays beneath the sponges. */
.tray-object>.tray-image{width:100%;height:100%}
.tray-liquid{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;animation:water-arrive 1.1s ease-out both}
.tray-liquid.shallow{opacity:.62;animation:none}
.water-ripple{transform-box:fill-box;transform-origin:center;animation:water-ripple 3.6s ease-out infinite}
.water-ripple.ripple-two{animation-delay:1.8s;opacity:0}
.water-reflections{animation:water-shimmer 4s ease-in-out infinite alternate}
.sponge-grid.wet .art-1{filter:brightness(.88) saturate(.9);transition:filter 1.2s}
.pour-effect{width:3%;left:49%;background:linear-gradient(90deg,#68c7db55,#e0fffaeb 45%,#65c9d899);border-radius:40%;box-shadow:0 0 12px #c9fff288}
@keyframes water-arrive{from{opacity:0;clip-path:inset(34% 0 0)}to{opacity:1;clip-path:inset(0)}}
@keyframes water-ripple{0%{transform:scale(.35);opacity:0}12%{opacity:.85}100%{transform:scale(5);opacity:0}}
@keyframes water-shimmer{from{opacity:.5}to{opacity:.95}}
@media(prefers-reduced-motion:reduce){.tray-liquid{animation:none}.water-ripple{animation:none;opacity:.35;transform:scale(2)}.water-ripple.ripple-two{transform:scale(3.5)}.water-reflections{animation:none}}
/* The same seed stays at the tweezer tip while the tool moves. */
.seed-anchor{position:absolute;left:49%;top:39%;width:1px;height:1px;pointer-events:none}
.tweezer-actor{position:absolute;right:8%;top:4%;width:190px;height:190px;padding:0;border:0;background:none;z-index:7;pointer-events:auto;touch-action:none;cursor:grab;transition:left .6s ease-in-out,top .6s ease-in-out}
.tweezer-actor:active{cursor:grabbing}.tweezer-actor.dragging{visibility:hidden}
.tweezer-assembly{display:block;position:relative;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 5px 3px #26423926);transition:transform .35s}
.tweezer-assembly>.art{width:100%;height:100%}
.tip-seed{position:absolute;left:14.5%;top:81%;width:16px;height:7px;background:linear-gradient(#dfc79a,#947044);border:1px solid #70542e;border-radius:75% 30% 65% 30%;transform:translate(-50%,-50%) rotate(-43deg);box-shadow:0 1px 2px #1f39294d;opacity:0}
.tip-seed:after{content:'';position:absolute;left:-7px;top:2px;width:9px;height:5px;border:2px solid #fff9d9;border-right:0;border-bottom:0;border-radius:70% 0 0 0}
.is-loaded>.tip-seed{opacity:1}
.tweezer-actor.released .tweezer-assembly{transform:translate(16px,-28px)}
#dragGhost.tweezer-ghost{width:190px;height:190px;transform:translate(-14.5%,-81%)}
#dragGhost.tweezer-ghost .art{width:100%;height:100%}
.plug>.seed-mark{width:13px;height:6px;background:linear-gradient(#e0c795,#936d3c);border:1px solid #71552c;border-radius:80% 30% 70% 30%;box-shadow:0 1px 3px #1f39295e;font-size:12px;transform:translate(-50%,-50%) skewX(22deg) rotate(-43deg)}
.plug>.seed-mark:after{content:'';position:absolute;left:-5px;top:1px;width:6px;height:3px;border-top:2px solid #fff4d5;border-radius:80%}
@media(max-width:650px){.tweezer-actor{right:0;top:0;width:135px;height:135px}#dragGhost.tweezer-ghost{width:155px;height:155px}.tip-seed{width:14px;height:6px}}
@media(prefers-reduced-motion:reduce){.tweezer-actor,.tweezer-assembly{transition:none}}
.tip-seed{width:19px;height:8px;box-shadow:0 0 0 1px #fff5cf88,0 2px 3px #24453366}
@media(max-width:650px){.tip-seed{width:16px;height:7px}}
.scene-label{pointer-events:none}
/* Keep every nursery object on one scaled tray coordinate system. */
@media(min-width:651px){
 body{--tray-size:min(70vw,calc((100dvh - 210px)*1.47),940px);--tray-x:55%;--tray-y:52%}
 header{padding:15px 26px}.brand-icon{font-size:29px}h1{font-size:21px}
 .lesson-prompt{left:28px;top:96px;max-width:320px}.lesson-prompt h2{font-size:25px;line-height:1.4}.lesson-prompt p{font-size:14px}.progress{margin-top:12px}
 .table-surface{top:27%}.scene-label{display:none}
 body:not([data-step="7"]):not([data-step="8"]) #scene{left:25px;right:25px;top:90px;bottom:136px}
 .tray-object{width:var(--tray-size);height:var(--tray-size);left:var(--tray-x);top:var(--tray-y)}
 .sponge-grid,.slot-grid{left:var(--tray-x);top:calc(var(--tray-y) - var(--tray-size)*.05);width:calc(var(--tray-size)*.558);height:calc(var(--tray-size)*.223)}
 .sponge-grid .art{width:calc(var(--tray-size)*.198);height:calc(var(--tray-size)*.198);transform:skewX(22deg) rotate(-16deg) translateY(-11.5%)}
 .tray-target{left:var(--tray-x);top:var(--tray-y);width:calc(var(--tray-size)*.83);height:calc(var(--tray-size)*.45)}
 .tray-target span{bottom:-4px}
 .timer-panel{top:18%;right:0;padding:14px;min-width:174px}.timer-panel strong{font-size:28px}
 .seed-dish,.seed-source{left:0;top:48%;width:190px;height:165px}.seed-dish .art{width:200px;height:200px}
 .tweezer-actor{right:1%;top:35%;width:210px;height:210px}
 .moisture{right:1%;top:34%}
 .actionbar{left:26px;bottom:34px;transform:none;max-width:calc(100vw - 640px);width:420px;border-radius:13px;gap:10px;padding:12px}.actionbar p{font-size:14px}.actionbar .primary{padding:12px 17px}
 #tools{left:auto;right:22px;bottom:27px;transform:none;gap:7px;padding:7px 5px 0;max-width:58vw}.tool{min-width:76px;padding:0 7px 5px}.tool .art{width:65px;height:65px}.tool span{font-size:13px}
 body[data-step="8"] .actionbar,body[data-step="9"] .actionbar{bottom:34px;max-width:680px;width:max-content}
 body[data-step="9"]{--tray-x:42%}.completion{right:0;top:34%;width:230px}
}
body:not([data-step="0"]) .tray-target{border-color:transparent;background:transparent}
body:not([data-step="0"]) .tray-target:hover,body:not([data-step="0"]) .tray-target.over{background:transparent;border-color:transparent}
.water-ripple{animation-duration:4.2s}.water-ripple.ripple-two{animation-delay:2.1s}
@keyframes water-ripple{0%{transform:scale(.25);opacity:0}15%{opacity:.45}100%{transform:scale(2.9);opacity:0}}
@media(min-width:651px) and (max-width:1000px){
 body{--tray-size:min(72vw,calc((100dvh - 225px)*1.47));--tray-x:54%}
 .lesson-prompt{top:85px;max-width:240px}.lesson-prompt h2{font-size:21px}.lesson-prompt p{font-size:12px}
 .timer-panel{top:6%;min-width:140px;padding:10px}.timer-panel strong{font-size:22px}.timer-panel small{font-size:10px}
 .seed-dish,.seed-source{width:130px;height:125px}.seed-dish .art{width:145px;height:145px}
 .actionbar{bottom:132px;left:50%;transform:translateX(-50%);max-width:95vw;width:max-content}
 #tools{left:50%;right:auto;transform:translateX(-50%);max-width:95vw}
}
@media(max-width:650px){
 .table-surface{top:27%}.scene-label{display:none}
 body:not([data-step="7"]):not([data-step="8"]):not([data-step="9"]) #scene{top:27%;bottom:25%}
 body:not([data-step="9"]){--tray-size:min(98vw,410px);--tray-x:50%;--tray-y:56%}
 body:not([data-step="9"]) .tray-object{width:var(--tray-size);height:var(--tray-size);left:var(--tray-x);top:var(--tray-y)}
 body:not([data-step="9"]) .sponge-grid,body:not([data-step="9"]) .slot-grid{left:var(--tray-x);top:calc(var(--tray-y) - var(--tray-size)*.05);width:calc(var(--tray-size)*.558);height:calc(var(--tray-size)*.223)}
 body:not([data-step="9"]) .sponge-grid .art{width:calc(var(--tray-size)*.198);height:calc(var(--tray-size)*.198);transform:skewX(22deg) rotate(-16deg) translateY(-11.5%)}
 .tray-target{top:56%;width:90%;height:52%}.tray-target span{bottom:-10px}
 .seed-dish,.seed-source{top:7%}.tweezer-actor{top:4%}
}
#areaTabs{display:flex;gap:6px;margin-top:13px;pointer-events:auto}#areaTabs button{padding:8px 12px;border:1px solid #b7c9b0;border-radius:9px;background:#ffffffb8;color:#62795c;font-size:13px}#areaTabs button[aria-pressed="true"]{background:#446b50;color:white;border-color:#446b50}.free-time .secondary{display:block;width:100%;margin-top:9px}.free-time strong{font-size:25px}.tank-target{left:22%;top:55%;width:22%;height:30%;border-radius:12px}.tank-target span{font-size:11px}.tank-target:hover{background:#d8efbf22}
body[data-mode="free"] .tweezer-actor{left:7%;right:auto;top:34%}
body[data-mode="free"] #stepMenu p{font-size:13px;line-height:1.9}
@media(max-width:650px){
 #areaTabs{margin-top:9px;gap:5px}#areaTabs button{font-size:11px;padding:7px 10px}
 body[data-mode="free"]:not([data-step="7"]):not([data-step="8"]) #scene{top:33%;bottom:25%}
 body[data-mode="free"] .tweezer-actor{left:8%;right:auto;top:4%}
 body[data-mode="free"] .free-time{position:fixed;left:12px;right:12px;top:auto;bottom:212px;min-width:0;display:flex;align-items:center;gap:8px;padding:9px;background:#f6faeee8}
 .free-time small{display:none}.free-time strong{font-size:11px;flex:1;text-align:left;letter-spacing:0}.free-time button,.free-time .secondary{margin:0;width:auto;padding:9px 8px;font-size:11px}
 body[data-mode="free"] #tools{gap:0}body[data-mode="free"] .tool{height:80px;padding:0 1px 4px}body[data-mode="free"] .tool .art{width:43px;height:43px}body[data-mode="free"] .tool span{font-size:10px;white-space:normal;line-height:1.35;display:block}
 body[data-mode="free"] .tool small{font-size:8px;max-width:54px}
 .tank-target{left:3%;top:53%;width:30%;height:22%}.tank-target span{font-size:9px;padding:3px}
 body[data-mode="free"][data-step="7"] #scene{top:44%}
 body[data-mode="free"][data-step="8"] #scene{top:40%;bottom:28%}
}
@media(min-width:1001px){
 body[data-mode="free"][data-step="8"] #scene{left:25px;right:25px;top:135px;bottom:160px}
 body[data-mode="free"] .cycle-diagram{height:100%;top:10px}
 body[data-mode="free"][data-step="8"] .diagram-note{top:-7%}
 body[data-mode="free"] .tank-target{left:18%;top:61%;width:23%;height:28%}
}
/* Single tray plane: ground contact, visible hole and hit region share measured anchors. */
#visuals .sponge-grid.tray-plane,#targets .slot-grid.tray-plane{position:absolute;left:var(--tray-x);top:var(--tray-y);width:var(--tray-size);height:var(--tray-size);transform:translate(-50%,-50%);display:block;gap:0;pointer-events:none}
#visuals .sponge-grid .plug{position:absolute;left:var(--gx);top:var(--gy);width:var(--cell);height:auto;aspect-ratio:1;transform:translate(-50%,-75%)}
#visuals .sponge-grid .plug>.art{width:100%;height:100%;transform:none;position:absolute;inset:0;filter:drop-shadow(0 3px 2px #102e2844)}
#visuals .sponge-grid.wet .plug>.art{filter:brightness(.93) saturate(.94) drop-shadow(0 3px 2px #102e2844)}
#visuals .sponge-grid .plug.grown{transform:translate(-50%,-60%)}
#visuals .sponge-grid .plug.grown>.art{clip-path:inset(0 0 37% 0)}
#visuals .plug>.seed-anchor,#visuals .plug>.seed-mark{position:absolute;left:51.5%;top:39%}
#visuals .plug>.seed-anchor{width:0;height:0}
#visuals .plug>.seed-mark{transform:translate(-50%,-50%) rotate(-43deg);z-index:1}
#targets .slot-grid .slot{position:absolute;left:var(--hx);top:var(--hy);width:10%;height:8%;transform:translate(-50%,-50%);border:0;background:none;border-radius:50%;pointer-events:auto;outline:none;padding:0}
#targets .slot-grid .slot:hover,#targets .slot-grid .slot.over,#targets .slot-grid .slot.planted{border:0;background:none;outline:none;box-shadow:none}
#targets .slot-grid .slot:before{content:'';position:absolute;left:50%;top:50%;width:18%;height:20%;transform:translate(-50%,-50%) rotate(-25deg);border:2px solid #f9d17b;border-radius:50%;opacity:0;pointer-events:none}
#targets .slot-grid .slot:hover:before,#targets .slot-grid .slot.over:before,#targets .slot-grid .slot:focus-visible:before{opacity:1}
#targets .slot-grid .slot.planted:after{display:none}
.slot-number{position:absolute;left:68%;top:6%;font-size:11px;line-height:1.4;padding:0 4px;background:#f7fbeaeb;border-radius:8px;opacity:0;pointer-events:none}
.slot:hover .slot-number,.slot:focus-visible .slot-number{opacity:1}
.pour-effect.located-effect{border-radius:35%;transform-origin:50% 100%;animation:located-pour 1s ease-out forwards}
.spray-effect.located-effect{animation:located-spray 1s ease-out forwards}
@keyframes located-pour{0%{opacity:0;transform:scaleY(.25)}30%{opacity:1;transform:scaleY(1)}75%{opacity:1}100%{opacity:0;transform:scaleY(1)}}
@keyframes located-spray{0%{opacity:0;transform:translateY(-15px)}35%{opacity:1}100%{opacity:0;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.located-effect{animation:none;opacity:.6}}
#visuals .plug>.seed-anchor,#visuals .plug>.seed-mark{left:var(--hole-x);top:var(--hole-y)}
.seed-source span{white-space:nowrap;left:50%;right:auto;transform:translateX(-50%);width:max-content;bottom:-25px}
#targets .slot-grid .slot{min-width:44px;min-height:44px}
@media(max-width:650px){.seed-source span{bottom:-23px;font-size:10px}body[data-mode="free"][data-step="8"] .actionbar{bottom:138px;max-width:none;width:calc(100% - 24px)}}

/* Keep the visible grip under the pointer; only the metal body catches input. */
.tweezer-actor{transition:left .18s ease-out,top .18s ease-out;pointer-events:none}
.tweezer-actor:after{content:"";position:absolute;inset:0;pointer-events:auto;clip-path:polygon(25% 77%,20% 73%,86% 2%,96% 2%,96% 14%,30% 78%)}
.tweezer-assembly{transition:none}
#dragGhost{will-change:left,top;filter:drop-shadow(0 4px 3px #38512d26)}
body.tool-dragging,body.tool-dragging *{cursor:grabbing!important;user-select:none!important}
body.tool-dragging .tool:hover{transform:none}

.tweezer-actor{transition:left .22s ease-out,top .22s ease-out,opacity .22s ease-out}
.tweezer-actor.parked{opacity:0;pointer-events:none}
.tweezer-actor.parked:after{pointer-events:none}
@media(prefers-reduced-motion:reduce){.tweezer-actor{transition:none}}

/* Strengthen the heading and location text without changing layout. */
.brand small{font-weight:700;color:#506d5e}
.brand h1{font-weight:800;color:#204b40}
#chapter{font-weight:700;color:#506c57}