:root{--ink:#204743;--teal:#126d61;--paper:#f7f7ed;--line:#d5e4dc;--gold:#f8d46c}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'PingFang SC','Microsoft YaHei',system-ui,sans-serif;font-size:18px}button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;background:white;border:1px solid var(--line);border-radius:16px;padding:12px 18px;min-height:48px}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible{outline:4px solid #a55c00;outline-offset:4px}a{color:var(--teal);text-underline-offset:4px}header,main{max-width:1440px;margin:auto}header{padding:24px 40px;display:flex;justify-content:space-between;gap:20px;align-items:center}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:23px;font-weight:850;letter-spacing:2px}.brand small{display:block;font-size:12px;letter-spacing:1px;margin-top:4px}.brand-mark{width:48px;height:48px;display:grid;place-items:center;background:var(--teal);color:white;border-radius:16px;transform:rotate(-5deg);font-size:32px}.tools{display:flex;align-items:center;gap:8px;font-size:14px}.tools a{padding:12px}button[aria-pressed=true]{background:#e1f3e8;border-color:var(--teal)}main{padding:4px 40px 24px}.lesson-label{display:flex;justify-content:space-between;gap:12px;font-size:14px;font-weight:700;margin-bottom:20px}.milestones{display:flex;gap:12px;align-items:center}.milestones span{padding:10px 18px;border:1px solid var(--line);border-radius:30px;font-size:14px}.milestones span[aria-current=step]{background:var(--teal);border-color:var(--teal);color:white}.context{font-size:14px;color:#5c736a;min-height:22px;margin:12px 0}.preview-banner{background:#fff0c7;border:1px solid #dfbe62;border-radius:16px;padding:12px 18px;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:15px}.preview-banner[hidden]{display:none}#scene{display:grid;grid-template-columns:.85fr 1.15fr;background:white;border:1px solid var(--line);border-radius:32px;overflow:hidden;min-height:470px}.story{padding:34px;display:flex;flex-direction:column;align-items:flex-start}.tag{font-size:13px;background:#e5f2e4;padding:7px 12px;border-radius:30px;font-weight:750;margin-bottom:24px}h1{font-size:clamp(36px,3.8vw,56px);line-height:1.2;letter-spacing:-1px;margin:0 0 22px;white-space:pre-line}.subtitle{font-size:clamp(22px,2.15vw,29px);line-height:1.65;white-space:pre-line;margin:0 0 24px}.safety{font-size:14px;line-height:1.65;color:#61766c;margin:16px 0}.host{margin-top:auto;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:750}.host img{width:90px;height:78px;object-fit:contain}.activity{background:#eaf3dd;padding:26px;display:flex;flex-direction:column;justify-content:center;gap:18px}.illustration{width:100%;height:280px;display:block}.caption{font-size:15px;line-height:1.7;text-align:center;margin:0;color:#536b5b}.yaya-hero{width:100%;height:210px;object-fit:contain}.cover-art{display:flex;flex-direction:column;align-items:center}.cover-art .illustration{height:210px}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.route-card{display:flex;flex-direction:column;gap:6px;padding:18px;text-align:left;border:2px solid transparent}.route-card:hover{border-color:var(--teal)}.route-card .illustration{height:110px}.route-card strong{font-size:24px}.route-card small{font-size:13px;font-weight:500;line-height:1.6}.choices{display:flex;gap:12px}.choice{flex:1;font-size:19px;font-weight:750;line-height:1.5}.choice .icon{font-size:38px;display:block;margin-bottom:8px}.feedback{font-size:18px;line-height:1.7;font-weight:700;margin:0}.feedback:empty{display:none}.body-action{background:#fff8dc;padding:14px 16px;border-radius:16px;font-size:16px;line-height:1.6}.body-action p{margin:0 0 10px}.body-action small{display:block;font-size:13px;margin:8px 0 0}.nav{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 0}.primary{background:var(--teal);color:white;border-color:var(--teal);font-weight:750}.secondary{background:white}#progress{font-size:14px;text-align:center}#notice{font-size:15px;line-height:1.6;margin:0}.guide{border-top:1px solid var(--line);padding:18px 0;font-size:15px;line-height:1.9}.guide summary{min-height:32px;cursor:pointer;font-weight:750}.guide-mode{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}.guide-mode button{font-size:14px}.teacher-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px}.teacher-controls button{font-size:13px}.teacher-controls a{margin-left:auto}footer{text-align:center;font-size:12px;color:#63796d;line-height:1.9;padding:15px 24px 30px}.album-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.album-card{background:white;border:1px solid #c9d7c9;border-radius:18px;padding:16px}.album-card h2{font-size:21px;margin:0 0 8px}.album-card p{font-size:14px;line-height:1.7;margin:8px 0}.album-card .illustration{height:95px}.status{display:inline-block;padding:5px 10px;border-radius:20px;font-size:13px;background:#f1f1ed;color:#687467}.status.walked{background:#d6efe0;color:#1b5e43}.status.previewed{background:#fff0c6;color:#73551b}.preview-controls{display:flex;gap:10px;flex-wrap:wrap}.preview-controls button{font-size:15px}.grid-path{font-size:18px;line-height:1.8;text-align:center;background:white;border-radius:16px;padding:12px}.pause-card{grid-column:1/-1;padding:70px 30px;text-align:center}.pause-card h1{margin:0 0 18px}.skip{position:fixed;top:-100px;left:18px;z-index:99;background:white;padding:12px}.skip:focus{top:15px}.projector header{padding-top:12px;padding-bottom:12px}.projector h1{font-size:clamp(42px,4.8vw,68px)}.projector .subtitle{font-size:clamp(26px,2.6vw,36px)}.projector .guide,.projector footer{display:none}.projector #scene{min-height:540px}.reduced *{animation:none!important;transition:none!important;scroll-behavior:auto!important}dialog{border:1px solid var(--line);border-radius:24px;padding:28px;max-width:500px;width:calc(100% - 36px);color:var(--ink)}dialog::backdrop{background:#163a3455}dialog h2{font-size:24px}dialog p{line-height:1.8}.dialog-buttons{display:flex;gap:10px;justify-content:flex-end}.teacher-page{max-width:1000px}.teacher-page h1{font-size:42px}.teacher-page h2{margin-top:32px;font-size:26px}.teacher-page p,.teacher-page li{line-height:1.9}.teacher-page table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.8}.teacher-page th,.teacher-page td{text-align:left;padding:12px;border-bottom:1px solid var(--line);vertical-align:top}.teacher-page a{overflow-wrap:anywhere}.notice-box{background:#e6efdf;padding:24px;border-radius:22px}.asset-fallback{padding:30px;background:#f4eed0;border-radius:20px;text-align:center;font-size:18px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}@media(max-width:900px){header{padding:20px 24px;align-items:flex-start}.tools{flex-wrap:wrap;justify-content:flex-end}main{padding:4px 24px 20px}.story{padding:26px}.activity{padding:20px}#scene{grid-template-columns:1fr 1fr}.illustration{height:240px}.route-card{padding:12px}.route-card strong{font-size:21px}.route-card small{font-size:12px}}@media(max-width:650px){body{font-size:16px}header{padding:18px 16px;flex-wrap:wrap}.tools{width:100%;justify-content:flex-start;font-size:12px;gap:6px}.tools button{padding:10px 12px}.tools a{padding:10px 4px;margin-left:auto}main{padding:0 16px 20px}.lesson-label{font-size:12px;flex-wrap:wrap}.milestones{gap:6px}.milestones span{flex:1;text-align:center;padding:9px 5px;font-size:13px}.context{font-size:13px}.preview-banner{flex-direction:column;align-items:stretch}#scene{grid-template-columns:1fr;border-radius:24px;min-height:0}h1{font-size:36px;letter-spacing:0}.subtitle{font-size:22px}.story{padding:24px}.tag{margin-bottom:18px}.host img{width:72px;height:62px}.activity{padding:22px 16px}.illustration{height:220px}.cover-art .illustration{height:170px}.yaya-hero{height:180px}.choice-grid,.album-grid{gap:9px}.choice{padding:14px 10px;font-size:17px}.route-card .illustration{height:90px}.route-card strong{font-size:21px}.nav button{font-size:15px;padding:12px 14px}#progress{font-size:12px}.album-card{padding:12px}.album-card h2{font-size:18px}.teacher-controls a{width:100%;margin:4px 0}.projector h1{font-size:40px}.projector .subtitle{font-size:25px}.projector #scene{min-height:0}.teacher-page h1{font-size:36px}.teacher-page td,.teacher-page th{padding:8px;font-size:13px}}
/* Keep the four-card album and navigation on a 1440x900 teaching screen. */
.projector .album-card .illustration{height:70px}
.painted-scene{position:relative;width:100%;height:280px;margin:0;overflow:hidden;border-radius:18px;background:#e3edde;isolation:isolate}.scene-paint{display:block;width:100%;height:100%;object-fit:cover;animation:scene-breeze 24s ease-in-out infinite alternate;transform:scale(1.015)}.cloud-layer{position:absolute;top:2%;left:52%;width:26%;height:auto;opacity:.62;pointer-events:none;animation:cloud-drift 54s ease-in-out infinite alternate}.little-light{position:absolute;right:10%;bottom:9%;font-size:35px;background:#fff3cddd;padding:8px 14px;border-radius:50%;pointer-events:none}.lamp-glow{position:absolute;left:56%;top:47%;width:23%;height:22%;border-radius:50%;background:#ffe8a077;box-shadow:0 0 28px 12px #ffe8a055;pointer-events:none}.painting-room .scene-paint{animation:none;transform:none}.route-card .painted-scene{height:110px}.album-card .painted-scene{height:95px}.route-card .scene-paint,.album-card .scene-paint{animation:none;transform:none}.route-card .cloud-layer,.album-card .cloud-layer{display:none}.cover-art .painted-scene{height:250px}.science-diagram{font-size:14px;line-height:1.7;border-top:1px solid #bfd4b7;padding-top:10px}.science-diagram summary{cursor:pointer;min-height:30px}.science-diagram .illustration{height:200px;margin-top:8px}.science-diagram p{font-size:13px;margin:8px 0 0}.loading-card{grid-column:1/-1;padding:36px;font-size:20px;line-height:1.8}.projector .album-card .painted-scene{height:70px}.wind-rotor{transform-box:view-box;transform-origin:250px 125px;animation:wind-turn 54s linear infinite}.water-flow{animation:water-flow 24s linear infinite}@keyframes scene-breeze{from{transform:scale(1.015) translateX(-.3%)}to{transform:scale(1.015) translateX(.3%)}}@keyframes cloud-drift{from{transform:translateX(-12px)}to{transform:translateX(12px)}}@keyframes wind-turn{to{transform:rotate(360deg)}}@keyframes water-flow{to{stroke-dashoffset:-128}}.reduced .scene-paint{transform:none!important}.reduced .cloud-layer{transform:none!important}@media(prefers-reduced-motion:reduce){.scene-paint{transform:none!important}.cloud-layer{transform:none!important}}@media(max-width:650px){.painted-scene{height:220px}.route-card .painted-scene{height:90px}.cover-art .painted-scene{height:190px}}
.cover-art{position:relative}.cover-art .painted-scene{height:310px}.cover-art .yaya-hero{position:absolute;right:2%;bottom:2%;width:44%;height:200px;object-fit:contain;pointer-events:none}.projector .cover-art .painted-scene{height:330px}@media(max-width:650px){.cover-art .painted-scene{height:240px}.cover-art .yaya-hero{width:48%;height:160px}}

/* Equal-cell imagegen sheet: crop at presentation time, preserve source pixels. */
.yaya-pose{display:block;position:relative;overflow:hidden;width:148px;height:148px;flex:0 0 auto;isolation:isolate}.yaya-pose img{position:absolute;width:300%;height:300%;max-width:none;object-fit:fill;pointer-events:none}.host .yaya-pose img{width:300%;height:300%;object-fit:fill}.cover-art .yaya-pose.yaya-hero{width:220px;height:220px;right:2%;bottom:2%}.yaya-pose .asset-fallback{display:block;font-size:14px;padding:12px}.host{gap:16px}.projector .host .yaya-pose{width:170px;height:170px}@media(max-width:650px){.host .yaya-pose{width:112px;height:112px}.cover-art .yaya-pose.yaya-hero{width:160px;height:160px}.projector .host .yaya-pose{width:120px;height:120px}}

.yaya-pose{clip-path:inset(8%)}

/* Keep teacher navigation visible when projecting at 1440x900. */
@media(min-width:901px){
 .projector h1{font-size:clamp(40px,3.9vw,56px);margin-bottom:16px}
 .projector .subtitle{font-size:28px;line-height:1.5;margin-bottom:16px}
 .projector .story{padding:24px}
 .projector .tag{margin-bottom:14px}
 .projector .safety{margin:10px 0}
 .projector .host .yaya-pose{width:124px;height:124px}
 .projector .activity{padding:20px;gap:12px}
 .projector .activity > .painted-scene{height:240px}
 .projector #scene{min-height:480px}
}