/* The lesson keeps a readable learning route and separate spaces for art and text. */
.topbar{gap:18px}.learning-route{list-style:none;display:flex;align-items:center;justify-content:center;gap:18px;padding:0;margin:0;color:#8c9a85;font-size:20px;flex:1}.learning-route li{display:flex;align-items:center;gap:8px;padding:5px 12px 8px;border-radius:18px;white-space:nowrap;transition:background .25s,color .25s}.learning-route li.active{background:#e5ecd5;color:#28564d}.learning-route li.visited{color:#66896b}.phase-dot{display:grid;place-items:center;width:22px;height:22px;flex:none;border-radius:50%;font-size:13px;background:#eceddd}.active .phase-dot{background:#7d9b70;color:#fff}.learning-route .reading{line-height:1.3}.learning-route rt{font-size:.42em}.lesson-mode{font-size:14px;padding:8px 26px 8px 10px;border:1px solid #d8e3c6;border-radius:20px;background:#faf9eb;color:#627b60;max-width:155px}.nav-shell{padding-bottom:max(23px,env(safe-area-inset-bottom));padding-top:10px}.nav-center{flex-wrap:wrap;justify-content:center;gap:8px}.next-button{box-shadow:0 5px 0 #d6a943,0 9px 18px #cab7731c}.nav-shell.collapsed .route-toggle{box-shadow:none}.route-panel{bottom:100px}
.checkin-layout{grid-template-columns:1.04fr .96fr;gap:4vw;align-items:center}.arrival-island{display:flex;flex-direction:column;justify-content:center;align-self:stretch;gap:16px;padding:0;min-height:0}.arrival-view{position:relative;isolation:isolate;width:100%;height:245px;border-radius:46% 48% 40% 44%;overflow:hidden;background:#e7edce}.arrival-view .island-mini{inset:0;border:0;border-radius:inherit;box-shadow:none}.island-mini:before{display:none}#arrival-friends{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;gap:2%;padding:4% 6% 7%;min-height:0;z-index:1}.arrival-visitor{width:46%;max-width:220px;animation:visitor-enter .6s cubic-bezier(.16,1,.3,1) both}.arrival-visitor>.friend{width:100%;filter:drop-shadow(0 7px 4px #52794a36)}#arrival-friends.together .visitor-0,#arrival-friends.together .visitor-1{rotate:0}.arrival-visitor.visitor-1{animation-delay:.08s}#arrival-response{flex:none;min-height:0;font-size:clamp(25px,2.1vw,36px);padding:4px 8px 0;line-height:1.75;text-align:center}.checkin-bottom{min-height:46px;margin-top:10px;padding-bottom:4px}.checkin-bottom .gentle-button{font-size:21px;padding:6px 18px}#unclear-note{font-size:23px;max-width:760px;line-height:1.8}.checkin-scene .mood-option .friend{width:clamp(100px,8.2vw,157px)}.checkin-scene .mood-option{padding-top:5px;padding-bottom:10px}.checkin-scene .mood-word{font-size:clamp(25px,2vw,35px)}
@keyframes visitor-enter{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
.mirror-character .mirror-detail{background-position:calc(var(--col)*20%) var(--detail-y,0%)}.part-lens{border-width:2px;background:#fffceb08;box-shadow:0 0 0 4px #e8ba5c75;transition:top .3s ease,left .3s ease,width .3s ease,height .3s ease}.focus-body .friend{animation:none}.lens-body{border-radius:28%;border-style:dashed}.lens-eyes,.lens-mouth{border-radius:50%}
.story-picker{display:flex;justify-content:center;align-items:center;gap:18px;margin:0 0 12px;min-height:43px}.story-picker .story-tabs{margin:0;gap:8px}.story-picker>.text-button{font-size:16px;padding:6px 4px;white-space:nowrap}.story-tab[hidden]{display:none}.story-world{aspect-ratio:1.72}.motion-story{position:absolute;inset:0}.story-world .story-caption{font-size:clamp(20px,1.65vw,29px);bottom:2.5%;padding:4px 14px}.expression-actions{flex-wrap:wrap;gap:7px}.expression-actions .text-button{font-size:17px;padding:4px 8px;min-height:36px}.expression-actions .primary{margin-left:auto}.story-question{display:none}
.tool-stage.tool-move{padding:12px 20px 22px}.movement-path{width:100%;height:245px;max-width:610px;position:relative;margin:0 auto;background:none}.movement-path:before,.movement-path:after{display:none}.tool-move h2{margin:0}.tool-move>p{margin-top:8px}.activity-controls{margin-top:15px}.build-motion{width:100%;height:290px;position:relative;flex:none}.help-picture{border-radius:36px;padding:12px 18px 22px;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;gap:10px;background:linear-gradient(140deg,#eef0d9,#e2e8c7)}.help-picture>p{margin:0;min-height:60px;font-size:clamp(24px,1.9vw,34px);line-height:1.8}.build-track{height:5px;border-radius:8px;background:#cedab666;overflow:hidden;flex:none;margin:0 10px}.build-track #help-progress{display:block;position:static;inset:auto;height:100%;width:0;background:#7f9b6c;border-radius:8px}.build-controls{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:5px}.build-controls .primary{min-height:48px;font-size:22px;padding:10px 18px}.build-controls .secondary{min-height:46px}.help-layout{align-items:center;gap:3.5vw}.help-dialogue{gap:15px;padding-bottom:16px}.help-response{min-height:0;margin-top:7px}.garden-share-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.garden-share-actions .text-button{font-size:18px}.garden-world .garden-bubble{max-height:43%;overflow:auto}.ending-banner p{max-width:95%;margin:10px auto 0}
@media(min-width:1000px){#app{grid-template-rows:86px minmax(0,1fr) 94px}.scene-heading{padding-top:5px;padding-bottom:17px}.checkin-scene .scene-heading{padding-bottom:12px}.checkin-scene .scene-heading p{margin-top:2px}.nav-shell{align-items:center}.help-layout{max-width:1500px}.help-picture{min-height:0}}
@media(min-width:1500px){.learning-route{font-size:24px;gap:22px}.learning-route li{padding-left:18px;padding-right:18px}.phase-dot{width:26px;height:26px;font-size:15px}.arrival-view{height:355px}.build-motion{height:390px}.movement-path{height:325px;max-width:760px}.help-picture{padding:16px 22px 26px}.build-controls .primary{font-size:27px}.build-controls{margin-top:10px}.tool-stage.tool-move{padding-bottom:30px}.story-picker{margin-bottom:16px}.story-picker>.text-button{font-size:19px}.expression-actions .text-button{font-size:20px}.help-dialogue{gap:20px}.help-picture>p{min-height:75px}}
@media(min-width:1000px) and (max-height:760px){#app{grid-template-rows:76px minmax(0,1fr) 86px}.topbar{padding-top:8px;padding-bottom:8px}.learning-route{font-size:18px;gap:9px}.learning-route li{padding:3px 9px 6px}.scene-heading{padding:0 0 9px}.checkin-scene .scene-heading{padding-bottom:8px}.checkin-layout{gap:4vw}.arrival-view{height:240px}.checkin-scene .mood-option .friend{width:100px}.checkin-scene .mood-word{font-size:25px}#arrival-response{font-size:25px}.arrival-island{gap:11px}.checkin-bottom{margin-top:12px;min-height:40px}.checkin-bottom .gentle-button{font-size:22px;padding:6px 18px}#unclear-note{font-size:20px}.movement-path{height:200px}.tool-stage.tool-move{min-height:365px;padding:8px 18px 17px}.build-motion{height:238px}.help-picture{padding:10px 15px 18px;gap:8px}.help-picture>p{font-size:23px;min-height:56px}.build-controls .primary{font-size:20px;min-height:44px;padding:9px 15px}.build-controls .secondary{min-height:42px}.help-dialogue{gap:11px}.help-response{font-size:22px}.story-picker{margin-bottom:8px;min-height:38px}.story-world{aspect-ratio:1.85}.story-tab{font-size:22px}.expression-actions .text-button{font-size:16px}.expression-board{gap:5px}.expression-actions button{min-height:38px}.story-caption{max-width:95%;font-size:21px}.nav-shell{padding-bottom:20px}}
@media(min-width:701px) and (max-width:1100px){.learning-route{font-size:16px;gap:5px}.learning-route li{gap:5px;padding:4px 6px}.phase-dot{display:none}.brand{font-size:18px}.topbar{gap:12px}.lesson-mode{font-size:12px;max-width:130px}.arrival-view{height:230px}.build-motion{height:230px}.build-controls .primary{font-size:18px}.movement-path{height:225px}.help-picture>p{font-size:22px}.story-picker{gap:8px}.story-picker>.text-button{font-size:14px}}
@media(max-width:700px){#app{grid-template-rows:112px 1fr 96px;min-height:100svh}.topbar{display:flex;flex-wrap:wrap;align-content:center;padding:8px 4vw;gap:8px}.brand{flex:1}.toolbar{margin-left:auto}.learning-route{flex-basis:100%;order:3;gap:4px;justify-content:space-between;font-size:16px}.learning-route li{padding:3px 8px;gap:5px;flex:1;justify-content:center}.phase-dot{display:none}.learning-route .reading{line-height:1.35}.learning-route rt{font-size:.45em}.nav-shell{padding-bottom:max(22px,env(safe-area-inset-bottom));padding-top:12px;min-height:96px}.nav-shell.expanded{grid-template-columns:1fr 1fr;row-gap:10px}.nav-shell.expanded .nav-center{grid-row:1;grid-column:1 / -1}.nav-shell.expanded>.back-button{grid-row:2;grid-column:1}.nav-shell.expanded>.next-button{grid-row:2;grid-column:2;justify-self:end}.nav-shell.expanded{min-height:140px}.route-panel{bottom:145px}.lesson-mode{font-size:13px;padding:7px 20px 7px 9px}.arrival-view{height:235px;max-width:520px}.arrival-island{gap:18px;align-self:center}.arrival-visitor{max-width:165px;width:45%}#arrival-friends{padding-bottom:4%}#arrival-response{font-size:26px;padding:5px 8px 0;line-height:1.8}.checkin-scene .mood-option .friend{width:88px}.checkin-bottom{margin-bottom:20px}#unclear-note{font-size:22px}.help-picture{padding:10px 13px 24px}.build-motion{height:240px}.build-controls{margin-top:6px}.build-controls .primary{font-size:20px}.build-controls .secondary{font-size:20px}.help-picture>p{font-size:24px;min-height:65px}.movement-path{height:220px}.tool-stage.tool-move{padding-bottom:24px}.story-picker{gap:7px;flex-wrap:wrap}.story-tab{font-size:20px}.story-world{aspect-ratio:1.65}.story-world .story-caption{font-size:20px}.expression-actions .text-button{font-size:18px}.expression-actions .primary{margin-left:0}.ending-scene{height:calc(100svh - 208px);min-height:530px}.ending-banner p{font-size:21px}.help-dialogue{padding-bottom:24px}}
@media(prefers-reduced-motion:reduce){.arrival-visitor{animation:none}.part-lens{transition:none}}
.mirror-practice-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.mirror-practice-actions .primary,.mirror-practice-actions .secondary{font-size:21px;padding:10px 18px}.mirror-invite>svg{display:none}.mirror-invite>p{margin-bottom:8px}.seated-modal{max-width:1050px}.seated-practice{text-align:center}.seated-reminder{font-size:26px}.seated-motion{position:relative;width:100%;height:280px}.seated-practice h3{font-weight:500;font-size:30px;min-height:64px}.seated-track{max-width:580px;height:5px;margin:9px auto 21px;background:#dce5c8;border-radius:9px;overflow:hidden}.seated-track>span{display:block;height:100%;background:#7e9d6c;width:0}.seated-controls{display:flex;gap:18px;justify-content:center}.seated-note{font-size:22px;color:#718370;margin-top:16px}
@media(min-width:1500px){.seated-motion{height:340px}.seated-practice h3{font-size:36px}.mirror-practice-actions .primary,.mirror-practice-actions .secondary{font-size:25px}}
@media(max-height:760px){.seated-motion{height:230px}.seated-reminder{font-size:23px}.seated-practice h3{font-size:27px;min-height:55px}.seated-note{font-size:20px;margin-top:8px}.seated-track{margin:5px auto 16px}}
@media(max-width:700px){.mirror-practice-actions{gap:10px}.mirror-practice-actions .primary,.mirror-practice-actions .secondary{font-size:20px}.seated-motion{height:215px}.seated-practice h3{font-size:25px}.seated-reminder{font-size:21px}.seated-note{font-size:20px}}
.mirror-invite{flex-direction:column;gap:12px}.mirror-invite>p{flex:none;white-space:nowrap;margin:0}
@media(min-width:701px){.nav-shell.expanded{grid-template-columns:auto minmax(0,1fr) auto}.nav-shell>.next-button{min-height:54px;padding:8px 18px}.nav-shell>.next-button .next-flower{font-size:25px;padding:5px}}
@media(min-width:1000px) and (max-height:820px){.story-world{aspect-ratio:1.9}.story-picker{margin-bottom:8px}.story-tab{padding-top:4px;padding-bottom:4px}.expression-board{gap:6px;padding:10px 14px}.expression-board .mini .friend{width:54px}.sentence-preview{min-height:50px;padding:5px;font-size:23px}.expression-actions button{min-height:44px;font-size:20px;padding:9px 12px}.expression-actions .text-button{font-size:17px}}