@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400;500;600;700&display=swap');
:root{--ink:#343d32;--forest:#46634a;--paper:#faf0cf;--leaf:#c3d681;--line:#48543d;--pixel:'Pixelify Sans',monospace;font-family:'Trebuchet MS',Verdana,sans-serif;color:var(--ink);background:#e5eacb;font-size:16px;color-scheme:light}
*{box-sizing:border-box}body{margin:0;min-width:300px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:disabled{opacity:.55;cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible,canvas:focus-visible{outline:3px solid #b55732;outline-offset:4px}button:active:not(:disabled){transform:translateY(2px)}a{color:inherit}canvas{image-rendering:pixelated}h1,h2,h3,p{margin:0}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.shell{max-width:960px;margin:auto;padding:0 26px}.topbar{min-height:56px;display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid #a8b58a}.brand{font-size:20px;text-decoration:none;font-weight:700;letter-spacing:-.5px}.brand span{font-weight:400}.tools{display:flex;gap:8px;align-items:center}.toplink{font-size:14px;margin-right:10px;text-underline-offset:3px}.icon-btn{width:38px;min-height:38px;background:transparent;border:1px solid #899a75;border-radius:2px;font-size:20px}
.title-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0 12px}.title-row h1{font:500 38px/1.1 var(--pixel)}.session-stars{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font:500 23px var(--pixel)}.session-stars small{font:13px 'Trebuchet MS',sans-serif;color:#586849}
.lesson-picker{display:flex;gap:4px;overflow-x:auto;padding:0 0 5px;scroll-snap-type:x proximity;scrollbar-width:thin}.lesson-card{flex:1 0 135px;display:flex;align-items:center;justify-content:center;gap:7px;padding:8px 10px;position:relative;border:2px solid transparent;border-bottom-color:#9eaf7f;border-radius:0;background:#d5dfb7;min-height:60px;scroll-snap-align:start}.lesson-card:hover{background:#e2e9c5}.lesson-card.selected{background:var(--paper);border-color:var(--line);border-bottom:4px solid var(--line)}.lesson-card canvas{width:32px;height:38px;flex-shrink:0}.lesson-card strong{font-size:14px;font-weight:700;display:block;line-height:1.25}.lesson-card small,.lesson-card .level{display:none}.lesson-check{position:absolute;right:4px;top:1px;font-size:12px}
.medium-panel{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:8px 0 12px;font-size:14px}.medium-panel>strong{font-weight:400}.medium-options{display:flex;gap:4px}.medium-options button{padding:7px 14px;min-height:38px;background:transparent;border:1px solid #899b6f;border-radius:2px;font-size:14px}.medium-options button[aria-pressed=true]{background:var(--forest);color:#fff9e8;border-color:var(--forest)}.medium-panel p{font-size:13px;color:#596b48}
.game{border:3px solid var(--line);background:var(--paper);box-shadow:4px 5px 0 #9cab7f;margin-top:7px}.game-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 15px;background:var(--forest);color:#fff8e0;min-height:42px}.game-top strong{font:500 20px var(--pixel)}.game-top small{font-size:13px;color:#e0e8c5}.step-track{display:flex;gap:5px;flex-shrink:0}.step-dot{width:13px;height:7px;background:#789075;display:block}.step-dot.past{background:#cee091}.step-dot.current{background:#f4d880}
.canvas-wrap{position:relative;height:360px;overflow:hidden;background:#b38859;border-bottom:3px solid var(--line)}.canvas-wrap>canvas{display:block;width:100%;height:100%;touch-action:none}.scene-label{position:absolute;top:12px;left:12px;background:#faf0cfee;padding:5px 8px;border:1px solid var(--line);font:500 16px var(--pixel);max-width:calc(100% - 24px);pointer-events:none}.result-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:12px 25px;background:#fff4cd;border:3px solid var(--line);box-shadow:4px 4px 0 #343d324d;text-align:center;pointer-events:none}.result-label strong{display:block;font:500 30px var(--pixel);white-space:nowrap}.result-label span{font-size:20px;color:#8d641e;letter-spacing:3px}.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:15px;background:#dce4bf;font:24px var(--pixel)}
.game-body{display:flex;flex-direction:column}.mentor{display:flex;align-items:flex-start;gap:14px;padding:14px 20px 10px;border-bottom:1px solid #cccca8;background:#f7edcb}.mentor-head{display:flex;flex-direction:column;align-items:center;width:65px;flex-shrink:0}.mentor-head canvas{width:42px;height:48px;object-fit:contain}.mentor-name{font:500 14px var(--pixel);white-space:nowrap;margin-top:3px}.mentor-words{flex:1;min-width:0;padding-top:2px}.speech{font-size:16px;line-height:1.55;max-width:660px}.mentor-tip{font-size:14px;line-height:1.5;margin-top:7px;color:#657051}.mentor-tip summary{cursor:pointer;text-decoration:underline;text-underline-offset:3px}.mentor-tip p{margin-top:5px}.data-link{border:0;background:none;text-decoration:underline;text-underline-offset:3px;font-size:14px;white-space:nowrap;padding:7px 0;align-self:flex-start}
.work-area{padding:14px 22px 17px}.work-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}.work-title h2{font:500 27px/1.15 var(--pixel)}.work-title p{font-size:13px;color:#687253;text-align:right}.work-controls{padding-top:0}.instructions{font-size:16px;line-height:1.5;margin-bottom:12px}.buttons{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.primary,.secondary{min-height:44px;padding:10px 17px;border:2px solid var(--line);border-bottom-width:4px;border-radius:2px;font-size:15px;font-weight:700;line-height:1.3}.primary{background:#d9d885;touch-action:none;user-select:none}.primary:hover{background:#e9e59b}.secondary{background:#f4e9c8;font-weight:400}.secondary:hover{background:#fff6dd}.hold-button{background:#b8d09b;min-width:165px}.holding{background:#96b67d!important}.next{margin-left:auto}.feedback{font-size:15px;line-height:1.5;margin-top:10px;color:#416332;min-height:0}.feedback:empty{display:none}.feedback.warn{color:#944c31}.meter-wrap{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;margin-bottom:12px;max-width:620px}.meter{height:17px;position:relative;overflow:hidden;background:#e0d6b1;border:2px solid #828764}.target-band{position:absolute;top:0;height:100%;background:#a9c77b;border-left:2px solid #5a723f;border-right:2px solid #5a723f}.meter-fill{height:100%;width:0;background:#72925b}.meter-value{font:500 21px var(--pixel);min-width:65px;text-align:right}
.footer-nav{display:flex;justify-content:center;gap:18px;margin-top:16px}.footer-nav button{background:none;border:0;border-bottom:2px solid transparent;font:500 20px var(--pixel);padding:9px 6px;min-height:44px}.footer-nav button.selected{border-bottom-color:#657750}footer{text-align:center;color:#677652;font-size:12px;padding:13px 0 20px}
dialog{width:min(610px,calc(100% - 28px));max-height:calc(100dvh - 30px);padding:0;border:3px solid var(--line);border-radius:1px;background:var(--paper);color:var(--ink);box-shadow:6px 6px 0 #263b3066;overflow:auto}dialog::backdrop{background:#213a2cc4}.dialog-inner{padding:27px;position:relative}.dialog-close{position:absolute;top:7px;right:7px;width:36px;height:36px;border:0;background:transparent;font-size:27px}.dialog-inner h2{font:500 31px/1.15 var(--pixel);margin:0 23px 16px 0}.dialog-copy{font-size:16px;line-height:1.65;margin:12px 0 18px}.dialog-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.plant-tabs{display:flex;flex-wrap:wrap;gap:5px;margin:12px 0 20px}.plant-tabs button{padding:8px 11px;min-height:42px;background:#e2e4b8;border:1px solid #7a8a61;border-radius:0;font-size:14px}.plant-tabs button.active{background:#bcd293;border:2px solid #4c653e}.fact-hero{display:flex;align-items:center;gap:17px;margin-bottom:20px}.fact-hero canvas{width:85px;height:100px;flex-shrink:0}.fact-hero h3{font:500 31px var(--pixel)}.fact-hero p{font-size:14px;line-height:1.5;margin-top:4px;color:#657052}.level{font-size:12px;color:#596b42;text-transform:none}.data-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;margin:14px 0}.data-grid div{border-bottom:1px dashed #b3bc91;padding:12px 0}.data-grid dt{font-size:12px;line-height:1.4;color:#63734e;margin-bottom:5px}.data-grid dd{margin:0;font-size:16px;line-height:1.5}.fact-block{margin:20px 0}.fact-block h3{font-size:17px;margin:0 0 7px}.fact-block p{font-size:16px;line-height:1.6;margin-bottom:8px}.sources{font-size:14px;line-height:1.5;margin-top:17px}.sources summary{cursor:pointer}.sources a{display:block;margin-top:10px;text-underline-offset:3px}.small-note{font-size:13px;line-height:1.55;color:#687452;margin-top:16px}.eyebrow{font-size:12px;letter-spacing:1px;color:#6b7754;margin:12px 0 3px}.center{text-align:center}.win-plant{display:block;width:110px;height:125px;margin:12px auto}.win-stars{font-size:29px;letter-spacing:5px;color:#9b7424}.win-title{font:500 32px var(--pixel)}.care-options{display:grid;gap:10px}.care-options button{background:#e5e6bd;border:2px solid #839064;border-radius:1px;padding:13px;text-align:left;font-size:16px;line-height:1.45}.garden-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px}.garden-card{text-align:center;padding:10px 5px;border-bottom:1px dashed #a7b187}.garden-card canvas{display:block;width:70px;height:85px;margin:auto}.garden-card strong{display:block;font:500 23px var(--pixel);margin:7px 0}.garden-card span{font-size:13px;line-height:1.4;color:#5b6f43}
@media(max-width:700px){.shell{padding:0 14px}.title-row h1{font-size:33px}.session-stars{gap:5px;font-size:20px;flex-direction:column;align-items:flex-end}.session-stars small{font-size:12px}.lesson-card{flex:0 0 128px;min-height:56px;padding:7px}.canvas-wrap{height:300px}.mentor{padding:12px 13px;gap:10px}.mentor-head{width:54px}.mentor-head canvas{width:38px;height:46px}.data-link{display:none}.speech{font-size:15px}.mentor-tip{font-size:14px}.work-area{padding:13px 15px 15px}.work-title h2{font-size:25px}.work-title p{font-size:12px}.medium-panel{padding-bottom:7px}.medium-panel p{flex-basis:100%;margin-left:0}.scene-label{font-size:14px}.game-top{padding:8px 12px}.game-top strong{font-size:19px}.game-top small{font-size:12px}.step-dot{width:10px;height:6px}.step-track{gap:4px}.dialog-inner{padding:23px}.footer-nav{gap:14px}.footer-nav button{font-size:19px}.primary,.secondary{padding:10px 13px}.title-row{padding-top:13px}.game{box-shadow:3px 4px 0 #9cab7f}}
@media(max-width:420px){.shell{padding:0 9px}.toplink{font-size:13px;margin-right:2px}.topbar{gap:6px}.tools{gap:5px}.title-row h1{font-size:30px}.canvas-wrap{height:260px}.game-top{flex-wrap:wrap;gap:5px 10px}.medium-panel{font-size:14px;gap:7px}.medium-panel p{font-size:12px}.work-title{flex-wrap:wrap;gap:3px}.work-title p{text-align:left}.mentor-name{font-size:13px}.speech{font-size:15px}.buttons{gap:8px}.data-grid{grid-template-columns:1fr}.garden-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fact-hero{gap:12px}.fact-hero canvas{width:65px;height:85px}.fact-hero h3{font-size:28px}.result-label{top:58%}.dialog-inner h2{font-size:28px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.canvas-wrap{height:clamp(230px,38vh,340px)}.game[data-started=false] .mentor{display:none}.game[data-started=false] .work-title p{display:none}
@media(max-width:700px){.canvas-wrap{height:clamp(220px,34vh,300px)}.medium-panel p{display:none}}
.scene-choices{position:absolute;left:5%;right:5%;bottom:9px;display:grid;grid-template-columns:1fr 1fr;gap:10%;z-index:2}
.scene-choice{min-height:46px;padding:8px 9px;border:2px solid #394b34;border-bottom-width:4px;border-radius:3px;background:#fff6de;color:#293b29;font:700 16px/1.25 'Trebuchet MS',Verdana,sans-serif;box-shadow:2px 2px 0 #342d273b}
.scene-choice:hover{background:#e4edc2}.scene-choice:focus-visible{outline-offset:2px}.scene-choice:active{background:#d1dfa9}
.scene-readout{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);width:max-content;max-width:94%;padding:7px 12px;border:1px solid #526146;background:#fff6e4;color:#293b29;font:700 15px/1.3 'Trebuchet MS',Verdana,sans-serif;text-align:center;pointer-events:none}
.scene-label{font:700 14px/1.35 'Trebuchet MS',Verdana,sans-serif;background:#fff6e4}.mentor-name{font:700 14px 'Trebuchet MS',Verdana,sans-serif}.meter-value{font:700 16px 'Trebuchet MS',Verdana,sans-serif;min-width:76px}.meter-fill{transition:width .08s linear,background .15s}
.result-label{top:31%;padding:9px 20px;animation:celebrate .4s ease-out}.result-label strong{font:700 23px/1.2 'Trebuchet MS',Verdana,sans-serif}.result-label span{font-size:17px}.win-plant{transform-origin:center bottom;animation:sprout-in .65s cubic-bezier(.2,.8,.25,1.2)}
@keyframes celebrate{0%{transform:translate(-50%,-50%) scale(.7);opacity:0}65%{transform:translate(-50%,-50%) scale(1.07);opacity:1}100%{transform:translate(-50%,-50%) scale(1)}}
@keyframes sprout-in{from{transform:translateY(14px) scale(.78);opacity:.25}to{transform:translateY(0) scale(1);opacity:1}}
@media(max-width:420px){.scene-choice{font-size:15px;padding:6px;min-height:46px}.scene-choices{left:4%;right:4%;gap:6%;bottom:7px}.scene-readout{font-size:13px;bottom:7px}.scene-label{top:8px;left:8px;font-size:12px}.result-label strong{font-size:20px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.music-btn{display:flex;align-items:center;justify-content:center;min-height:40px;padding:7px 11px;border:1px solid #899a75;border-radius:3px;background:#f5edd1;font:700 14px/1.2 'Trebuchet MS',Verdana,sans-serif;white-space:nowrap}.music-btn[aria-pressed=true]{background:#46634a;color:#fff9e7;border-color:#46634a}
.audio-controls{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-height:42px;font-size:13px;color:#394b34}.audio-controls input{width:110px;accent-color:#46634a;min-height:32px;cursor:pointer}.audio-controls output{min-width:33px}.audio-message{font-size:13px;line-height:1.45;color:#85502f;padding-top:8px}.audio-message:empty{display:none}
.growth-scene{border:2px solid #869865;background:#e3ebc5;overflow:hidden;margin:8px 0 18px;text-align:center}.growth-scene canvas{display:block;width:100%;height:190px;object-fit:contain;background:#e3ebc5}.growth-scene span{display:block;padding:9px;font:700 15px 'Trebuchet MS',Verdana,sans-serif;border-top:1px solid #b5c687;background:#eff1d1}
.mentor-head canvas{animation:papa-breathe 3.5s ease-in-out infinite}.dialog-inner{animation:page-in .24s ease-out}.dialog-inner .win-title{display:inline-block;padding:7px 15px;border-bottom:3px solid #b89a62;animation:page-in .45s ease-out}.step-dot.current{animation:step-pulse 1.8s ease-in-out infinite}.lesson-card{transition:background .15s,border-color .15s}.scene-choice{transition:background .15s,box-shadow .15s}.primary,.secondary{transition:background .15s}
@keyframes papa-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.mentor-head{width:78px}.mentor-head canvas{width:72px;height:72px;transform-origin:center bottom}.mentor-head canvas[data-mood=oops]{animation:papa-oops .4s ease-out}.mentor-head canvas[data-mood=proud]{animation:papa-proud 1.3s ease-in-out infinite}.mentor-head canvas[data-mood=talking]{animation:papa-chat .35s steps(2,end) infinite}.mentor-head canvas[data-mood=focused]{animation:none;transform:rotate(-2deg)}
@keyframes papa-oops{0%,100%{transform:rotate(0)}30%{transform:rotate(-5deg)}65%{transform:rotate(4deg)}}
@keyframes papa-proud{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(2deg)}}
@keyframes papa-chat{0%,100%{transform:translateY(0)}50%{transform:translateY(-1px)}}
@media(max-width:700px){.mentor-head{width:66px}.mentor-head canvas{width:62px;height:62px}}
@keyframes page-in{from{opacity:.4;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes step-pulse{0%,100%{opacity:1}50%{opacity:.65}}
@media(max-width:420px){.music-btn{font-size:13px;padding:7px 9px}.growth-scene canvas{height:160px}.audio-controls{font-size:12px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}