/* The illustrated guide and example slider enliven the green design. */
.guide{width:74px;flex:0 0 74px;filter:drop-shadow(0 8px 8px #38543820);transform-origin:50% 88%;animation:guide-arrive .55s ease-out both}.guide img{width:100%;height:auto;display:block}.guide-greeting{display:flex;align-items:center;gap:14px;max-width:510px;margin-top:26px;color:#3d5943}.guide-greeting p{font-size:14px;line-height:1.48;margin:0}.guide-greeting strong{font-size:16px;color:#203d28}.guide-greeting .guide{width:88px;flex-basis:88px}.lesson-top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}.lesson-top>div:first-child{flex:1}.lesson-top .guide{width:67px;flex-basis:67px}.lesson-top .stepbar{margin-bottom:9px}.guide.thinking{transform:rotate(-7deg)}.guide.celebrate{animation:guide-bounce .55s ease-out both}.guide-note{display:flex;align-items:center;gap:16px;background:#e7f2e3;padding:14px 22px;border-radius:18px;margin-bottom:24px;color:#385c3d;max-width:700px}.guide-note p{margin:0}.guide-note .guide{width:80px;flex-basis:80px}.hero-visual{min-height:356px;justify-content:space-between;gap:16px}.visual-top{margin:0;padding:0}.visual-content{display:flex;flex-direction:column;justify-content:center;min-height:160px;gap:14px}.visual-chat{margin-bottom:0}.visual-control{padding:12px 15px 10px;background:#ffffffb8;border:1px solid #ffffffd9;border-radius:17px}.visual-control-title{display:flex;justify-content:space-between;gap:12px;font-size:12px;font-weight:800;color:#3d6548}.visual-control input{display:block;width:100%;height:30px;margin:3px 0;accent-color:#407d51;cursor:pointer;touch-action:none}.visual-control input:focus-visible{outline:3px solid #ec9d4e;outline-offset:3px}.visual-tip{font-size:12px!important;line-height:1.4!important;color:#45634b!important;margin:1px 0 0!important}.visual-chat p{transition:opacity .15s ease}.hero.landing{gap:36px;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr)}.hero-copy{align-self:center}.stage{max-width:790px;margin:32px auto 0;clear:both}.stage h1{font-size:clamp(32px,4vw,48px)}.stage .panel{border-color:#e3e8e1;box-shadow:0 12px 32px #2841280d}.stage .bubble{background:#e7f2e3}.stage .bubble.assistant{background:#fff}.stage .bubble strong{color:#43734d}@keyframes guide-arrive{from{opacity:0;transform:translateY(12px) rotate(-6deg)}to{opacity:1;transform:translateY(0) rotate(0)}}@keyframes guide-bounce{0%{opacity:0;transform:translateY(10px)}60%{transform:translateY(-8px)}100%{opacity:1;transform:translateY(0)}}@media(max-width:820px){.hero.landing{grid-template-columns:1fr 300px;gap:22px}.hero-visual{min-height:320px;padding:18px}.guide-greeting{margin-top:18px}}@media(max-width:660px){.hero.landing{display:block;grid-template-columns:none}.hero-visual{display:flex;min-height:0;margin-top:25px;padding:18px;border-radius:20px;gap:17px}.visual-content{min-height:120px;gap:10px}.visual-chat p{font-size:13px;padding:10px 12px}.visual-control{padding:10px 13px}.guide-greeting{margin-top:18px}.guide-greeting .guide{width:62px;flex-basis:62px}.guide-greeting p{font-size:13px}.lesson-top .guide{width:58px;flex-basis:58px}.stage{margin-top:20px}.guide-note{padding:12px}.guide-note .guide{width:62px;flex-basis:62px}}@media(prefers-reduced-motion:reduce){.guide,.guide.celebrate{animation:none;opacity:1;transform:none}.visual-chat p{transition:none}}

/* Keep the guide visible throughout the exercises. */
.guide,.guide.celebrate{opacity:1;animation:none}