.story-art{isolation:isolate}.story-scene .copy{width:28%;max-height:65%}.story-scene .passage{font-size:clamp(19px,1.7vw,25px);line-height:2;letter-spacing:1px}.story-wash{position:absolute;inset:0;background:radial-gradient(ellipse at 78% 60%,#ced7b350,transparent 65%)}.story-plane{position:absolute;pointer-events:none;mix-blend-mode:multiply;transform-origin:50% 95%;will-change:transform}.story-cloud{width:66%;height:29%;object-fit:contain;left:37%;top:2%;opacity:.55;z-index:1}.story-distance{width:66%;left:36%;bottom:28%;opacity:.23;z-index:1}.story-ground{width:80%;left:33%;bottom:-7%;z-index:2}.story-bamboo-far{width:22%;left:84%;bottom:20%;opacity:.45;z-index:3}.story-bamboo-near{width:33%;left:94%;bottom:-11%;opacity:.88;z-index:8}.story-actor{position:absolute;aspect-ratio:1;pointer-events:none;mix-blend-mode:multiply;will-change:transform;z-index:5}.story-sprite{width:100%;height:100%;background-size:600% 200%;background-repeat:no-repeat}.story-weather{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:7}.story-stars{position:absolute;left:46%;top:12%;width:43%;height:32%;opacity:0;z-index:2}.story-stars i{position:absolute;font-style:normal;color:#fff6d2;font-size:22px;text-shadow:0 0 15px #d3bb8266}.story-scene[data-id=sky] .story-wash{background:radial-gradient(ellipse at 75% 31%,#929db687,transparent 59%)}.story-scene[data-id=sky] .story-cloud{opacity:.20}.story-scene[data-id=mother] .story-wash{background:radial-gradient(ellipse at 76% 44%,#e6c88c77,transparent 65%)}.story-scene[data-id=mother] .story-cloud{opacity:.14}.story-scene[data-id=mother] .story-ground{opacity:.55}.story-scene[data-id=mother] .story-bamboo-far{opacity:.16}.story-controls{position:absolute;left:7.5%;bottom:15%;z-index:12;display:flex;gap:22px;font:12px Book,serif;color:#697d61}.story-controls button{padding:10px 0}.school-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 72% 68%,#d6ad6825,transparent 60%)}.classroom{width:68%;aspect-ratio:1.5;left:33%;bottom:9%;z-index:2}.room-back,.room-front{inset:0;width:100%;height:100%;mix-blend-mode:normal}.room-back{z-index:1}.room-front{z-index:3;clip-path:polygon(0 55.7%,100% 55.7%,100% 100%,0 100%)}.room-child{position:absolute;top:38.5%;width:15%;aspect-ratio:1;background:url('assets/children-reading.webp') no-repeat;background-size:300% 100%;mix-blend-mode:multiply;z-index:2}.room-back,.room-front{pointer-events:none}.story-scene .audio-row{display:none}
@media(max-width:760px){.story-scene .copy{left:8%;top:15%;width:84%;max-height:27%}.story-scene .passage{font-size:21px;line-height:1.9}.story-cloud{width:115%;height:23%;left:-7%;top:35%}.story-distance{width:125%;left:-10%;bottom:30%}.story-ground{width:145%;left:-23%;bottom:3%}.story-bamboo-far{width:39%;left:79%;bottom:20%;opacity:.36}.story-bamboo-near{width:59%;left:99%;bottom:4%}.story-stars{left:8%;width:82%;top:39%;height:20%}.story-controls{left:6%;bottom:9.5%;font-size:11px;gap:22px;border-radius:25px;padding:0 13px;background:#f5f2e9ed}.classroom{width:110%;left:-5%;bottom:22%}}
@media(prefers-reduced-motion:reduce){.story-plane,.story-actor{transform:none!important}}
/* Keep the pigment-rich actors legible against restrained scenery. */
.story-scene .story-ground{opacity:.43}.story-scene .story-distance{opacity:.12}.story-scene .story-bamboo-far{opacity:.24}.story-scene .story-bamboo-near{opacity:.65}.story-scene[data-id=mother] .story-ground{opacity:.28}.room-back{opacity:.55}.room-front{opacity:.72}
@media(min-width:761px){.story-art{mask-image:linear-gradient(to right,transparent 29%,#000 39%)}}
/* The room is split at one exact boundary so desks occlude seated pupils. */
.room-back{clip-path:polygon(0 0,100% 0,100% 55.7%,0 55.7%)}.room-front{opacity:.55}

/* A local desk-height mask avoids a seam across the full room. */
.room-back{clip-path:none}.room-front{display:none}.room-child{clip-path:inset(0 0 24% 0)}
/* New views follow the text's location and action changes. */
.room-open{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:normal;opacity:0;z-index:1}.room-depart{position:absolute;top:44%;width:15%;aspect-ratio:1;background-repeat:no-repeat;background-size:600% 200%;mix-blend-mode:multiply;z-index:4;opacity:0}.scene[data-id=holiday] .classroom{bottom:9%}.touch-branch{width:44%;top:43%;z-index:6;transform-origin:50% 50%;opacity:.9}.branch-left{left:28%}.branch-right{left:73%}.scene[data-id=branches] .story-ground{opacity:.3}.scene[data-id=branches] .story-bamboo-far,.scene[data-id=branches] .story-bamboo-near{opacity:.12}.scene[data-id=hurry] .story-cloud{opacity:.2}.scene[data-id=hurry] .story-wash{background:radial-gradient(ellipse at 75% 31%,#a4adb84d,transparent 59%)}
@media(max-width:760px){.touch-branch{width:89%;top:58%}.branch-left{left:-35%}.branch-right{left:57%}.scene[data-id=holiday] .classroom{bottom:22%}}
@media(prefers-reduced-motion:reduce){.branch-left{transform:translateX(1.2vw) scaleX(-1)!important}.branch-right{transform:translateX(-1.2vw)!important}}

@media(max-width:760px) and (prefers-reduced-motion:reduce){.branch-left{transform:translateX(2.7vw) scaleX(-1)!important}.branch-right{transform:translateX(-2.7vw)!important}}

/* Keep the next painted pose outside this frame without cutting the feet. */
.scene[data-id=sky] .story-sprite,.scene[data-id=mother] .story-sprite{clip-path:inset(0 0 2% 0)}