/* Cinematic composition: image, poetry and questions each have reserved space. */
.scene{height:auto;min-height:calc(100dvh - 259px);padding:24px 3vw 18px;display:grid;grid-template-columns:minmax(0,1fr) clamp(310px,29vw,410px);gap:24px;align-items:start;background:radial-gradient(ellipse at 23% 35%,#24352b88,transparent 72%),#081110;overflow:visible}
.scene:before,.scene:after{display:none}
.visual-zone{min-width:0;position:relative;animation:scene-arrive .75s ease both}
.scene-heading{display:flex;gap:20px;align-items:center;justify-content:space-between;margin-bottom:14px;min-height:25px}
.location,.scene-num{position:static;font-size:10px}.scene-num{white-space:nowrap}
.picture-frame{position:relative;width:100%;aspect-ratio:16/9;isolation:isolate;overflow:hidden;background:#0e1813;box-shadow:0 16px 50px #0004;border:1px solid #d0c19524;border-radius:5px}
.art{position:absolute;inset:0;width:100%;height:100%;z-index:0;filter:saturate(.96);transform-origin:center;animation:whole-frame-camera 14s ease-in-out infinite alternate}
@keyframes whole-frame-camera{0%{transform:scale(.982) translateY(.2%)}100%{transform:scale(1) translateY(0)}}
@keyframes scene-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.scene-effects{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;contain:paint}
.frame-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0 8px;border-bottom:1px solid #ffffff17}
.motion-label{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.05em;color:#b0bca7}
.live-dot{height:5px;width:5px;border-radius:50%;background:#d2b67b;box-shadow:0 0 7px #d2b67b;animation:status-breathe 2s ease-in-out infinite alternate}
.paused .live-dot{background:#788071;box-shadow:none}
@keyframes status-breathe{to{opacity:.35}}
.frame-tools button{padding:5px 9px;font-size:10px;background:transparent;border-color:#ffffff20}
.verse-wrap{position:static;max-width:none;width:100%;padding:17px 2px 4px;transform:none}
.verse-wrap .eyebrow{margin-bottom:8px;font-size:10px}
.verse{font-size:clamp(23px,2.25vw,36px);line-height:1.5;letter-spacing:.08em;text-shadow:none}
.verse.long{font-size:clamp(20px,1.65vw,27px);line-height:1.65;letter-spacing:.045em}
.verse p{margin-bottom:2px;text-wrap:pretty}
.verse.reveal-verse p{animation:verse-reveal 1.2s ease both}
.verse.reveal-verse p:nth-child(2){animation-delay:.3s}
.verse.reveal-verse p:nth-child(3){animation-delay:.6s}
@keyframes verse-reveal{from{opacity:0;filter:blur(4px);transform:translateY(9px)}to{opacity:1;filter:blur(0);transform:none}}
.observe{margin:10px 0 0;padding:0;border:0;font-size:11px;max-width:100%;line-height:1.9;color:#a8b59f}
.scene-question{position:relative;margin-top:14px;padding-top:12px;border-top:1px solid #ffffff1c}
.hotspot{position:static;transform:none;max-width:100%;white-space:normal;font-size:12px;border-radius:6px;padding:11px 15px;text-align:left;background:#203a2d77;border-color:#a9bd875c}
.hotspot:before{content:'◎';font-size:14px}
.clue-pop{position:static;width:100%;margin-top:10px;padding:13px 16px;background:#12261b;box-shadow:none}
.task-card{position:sticky;top:16px;right:auto;bottom:auto;width:100%;max-width:none;max-height:calc(100dvh - 32px);min-height:460px;margin:39px 0 0;box-shadow:0 18px 50px #0002;border-color:#d9e4c525}
.task-scroll{max-height:min(65vh,670px)}
.task-top{padding:18px 19px 0}.task-scroll{padding:18px 19px 22px}
.task-scroll h2{font-size:15px}.choice,.feedback,.rubric li{font-size:12px}
.scene-footnote{position:static;grid-column:1/-1;margin-top:0;font-size:9px;color:#81917d}
.chapterbar{height:auto;min-height:91px;padding:15px 3vw;flex-wrap:wrap;gap:17px}
.motion-controls{display:flex;gap:7px;align-items:center}
.motion-btn,.autoplay-btn{padding:10px 12px;font-size:11px;white-space:nowrap}
.autoplay-btn[aria-pressed=true]{background:#c9b387;color:#102317}
.film-progress{height:2px;background:#ffffff16;margin-top:10px;width:100%;overflow:hidden}
.film-progress i{display:block;width:0;height:100%;background:var(--accent)}
.chapterbar .chapters{min-width:330px}
.reader-footer{font-size:9px;line-height:1.8;padding:0 15px 13px}
.image-dialog{width:min(1300px,96vw);max-height:96dvh;padding:18px;background:#07100d}
.image-dialog .dialog-head{margin-bottom:13px}.image-dialog .dialog-head h2{font-size:21px}
.image-dialog .full-art{width:100%;height:auto;max-height:76dvh;aspect-ratio:16/9;display:block}
.image-dialog .dialog-body p{font-size:11px;color:#a7b29e}
.particle{position:absolute;display:block;left:var(--px);top:var(--py);width:var(--size);height:var(--size);animation-duration:var(--duration);animation-delay:var(--delay);animation-timing-function:linear;animation-iteration-count:infinite;will-change:transform,opacity}
.leaf{background:linear-gradient(135deg,#c19048,#6c4627);width:calc(var(--size) * .6);border-radius:90% 0 85% 15%;box-shadow:1px 0 1px #dcb17466;animation-name:leaf-fall}
@keyframes leaf-fall{0%{opacity:0;transform:translate(-35px,-80px) rotate(-50deg)}12%{opacity:.85}60%{opacity:.8;transform:translate(var(--sway),110px) rotate(200deg)}100%{opacity:0;transform:translate(110px,310px) rotate(450deg)}}
.petal{background:linear-gradient(135deg,#e9bdc0,#a97890);border-radius:80% 20% 65% 30%;animation-name:petal-fall}
@keyframes petal-fall{0%{opacity:0;transform:translate(0,-75px) rotate(0)}15%{opacity:.7}50%{transform:translate(var(--sway),80px) rotate(160deg)}100%{opacity:0;transform:translate(-30px,240px) rotate(390deg)}}
.dust-mote,.ember{background:#e6cea0;border-radius:50%;width:var(--size);height:var(--size);box-shadow:0 0 8px #dbbe7955;animation-name:mote-rise}
.ember{background:#db9557;box-shadow:0 0 10px #e88639;top:calc(55% + var(--py) * .3)}
@keyframes mote-rise{0%{opacity:0;transform:translate(0,50px)}25%{opacity:.65}75%{opacity:.25}100%{opacity:0;transform:translate(var(--sway),-90px)}}
.light-wash{position:absolute;inset:-30%;mix-blend-mode:screen;background:linear-gradient(114deg,transparent 30%,#d6e4ed07 43%,#d6e4ed36 49%,#d6e4ed06 57%,transparent 66%);animation:light-pass 12s ease-in-out infinite}
.light-wash.warm{background:linear-gradient(114deg,transparent 30%,#dfae7108 43%,#e9c38e32 49%,#e7c19806 57%,transparent 66%)}
@keyframes light-pass{0%,100%{opacity:.12;transform:translateX(-17%)}45%{opacity:.6}70%{opacity:.35;transform:translateX(23%)}}
.light-breath{position:absolute;inset:0;background:radial-gradient(ellipse at 74% 24%,#c4e1ff24,transparent 47%);mix-blend-mode:screen;animation:light-pulse 6s ease-in-out infinite alternate}
.light-breath.warm{background:radial-gradient(ellipse at 74% 64%,#ffd48335,transparent 46%)}
@keyframes light-pulse{from{opacity:.2}to{opacity:.8}}
.mist{position:absolute;left:-25%;width:130%;height:28%;background:radial-gradient(ellipse,#b9ccc227,transparent 68%);filter:blur(12px);animation:mist-drift 19s ease-in-out infinite alternate}
.mist-a{top:45%}.mist-b{top:66%;opacity:.65;animation-delay:-11s;animation-duration:26s}
@keyframes mist-drift{from{transform:translateX(-9%) scaleY(.75);opacity:.3}to{transform:translateX(22%) scaleY(1.2);opacity:.7}}
.smoke{position:absolute;left:8%;top:15%;width:42%;height:58%;background:radial-gradient(ellipse,#5a625e35,transparent 65%);filter:blur(12px);animation:smoke-rise 13s linear infinite}
.smoke-b{left:26%;animation-delay:-7s;animation-duration:18s}
@keyframes smoke-rise{0%{opacity:0;transform:translateY(70px) scale(.8)}35%{opacity:.65}100%{opacity:0;transform:translate(80px,-80px) scale(1.3)}}
.wind-stroke{position:absolute;left:-30%;top:29%;width:70%;height:22%;border-top:1px solid #e0e6cf30;border-radius:50%;filter:blur(1px);animation:wind-pass 9s ease-in-out infinite}
.wind-b{top:65%;animation-delay:-5s;animation-duration:12s;opacity:.6}
@keyframes wind-pass{0%{opacity:0;transform:translateX(-30%)}35%{opacity:.55}100%{opacity:0;transform:translateX(170%)}}
.water-zone{position:absolute;overflow:hidden;transform:skewX(-9deg);mask-image:linear-gradient(transparent,#000 18%,#000 80%,transparent)}
.water-ribbon{position:absolute;left:var(--px);top:var(--py);width:var(--size);height:3px;border-radius:50%;background:linear-gradient(90deg,transparent,#f4ead983,transparent);filter:blur(.6px);animation:river-current var(--duration) var(--delay) ease-in-out infinite}
@keyframes river-current{0%{opacity:0;transform:translateX(-35px) scaleX(.55)}35%{opacity:.58}100%{opacity:0;transform:translateX(72px) scaleX(1.5)}}
.spray-zone{position:absolute;left:14%;top:38%;width:83%;height:61%;overflow:hidden}
.spray{background:#e6eeee;border-radius:50%;animation-name:spray-arc}
@keyframes spray-arc{0%{opacity:0;transform:translate(0,30px) scale(.5)}30%{opacity:.65;transform:translate(25px,-18px) scale(1)}100%{opacity:0;transform:translate(65px,50px) scale(.2)}}
.butterfly{width:14px;height:12px;animation-name:butterfly-drift}
.butterfly b{position:absolute;width:8px;height:12px;background:linear-gradient(140deg,#efd492cc,#9aaab5b3);border:1px solid #dccd9955;border-radius:90% 25% 75% 25%;transform-origin:right center;animation:wing-flap .4s ease-in-out infinite alternate}
.butterfly b:last-child{left:8px;transform-origin:left center;border-radius:25% 90% 25% 75%;animation-delay:-.2s}
@keyframes wing-flap{to{transform:scaleX(.2)}}
@keyframes butterfly-drift{0%{opacity:0;transform:translate(-30px,40px) rotate(-15deg)}18%{opacity:.9}60%{transform:translate(40px,-20px) rotate(18deg)}100%{opacity:0;transform:translate(95px,-60px) rotate(-10deg)}}
.bird{position:absolute;left:var(--px);top:var(--py);width:15px;height:7px;animation:bird-flight var(--duration) var(--delay) linear infinite}
.bird i{position:absolute;width:8px;height:4px;border-top:1.4px solid #253126;border-radius:80% 60% 0 0;transform-origin:right center;animation:bird-wing 1s ease-in-out infinite alternate}
.bird i:last-child{left:7px;transform-origin:left center;animation-direction:alternate-reverse}
@keyframes bird-wing{to{transform:rotate(28deg) scaleY(.4)}}
@keyframes bird-flight{0%{opacity:0;transform:translate(-70px,25px) scale(.7)}15%{opacity:.85}65%{transform:translate(90px,-12px) scale(1)}100%{opacity:0;transform:translate(190px,12px) scale(.6)}}
.reader.paused .scene *,.reader.paused .scene *:before,.reader.paused .scene *:after{animation-play-state:paused!important}
.reader.paused .visual-zone,.reader.paused .verse p{animation:none!important}
@media(min-width:1700px){.scene{grid-template-columns:minmax(0,1fr) 430px;padding:26px 4vw 18px;gap:34px}.task-scroll h2{font-size:17px}.choice,.feedback,.rubric li{font-size:14px}.scene-heading{margin-bottom:17px}.verse{font-size:35px}}
@media(max-width:1150px){.scene{gap:18px;padding:19px 2.5vw;grid-template-columns:minmax(0,1fr) 310px}.scene-heading{gap:8px;flex-wrap:wrap;margin-bottom:10px}.scene-num{font-size:9px}.location{font-size:9px}.task-card{margin-top:35px}.verse{font-size:26px}.verse.long{font-size:21px}.chapterbar{gap:11px}.motion-controls{order:1}.step-controls{order:2}.chapters{flex-basis:100%}}
@media(max-width:900px){.scene{display:block;padding:18px 4vw;min-height:0;overflow:visible}.scene-heading{margin-bottom:12px;min-height:20px}.location{font-size:10px}.picture-frame{aspect-ratio:16/9;border-radius:4px}.art{height:100%;animation:whole-frame-camera 14s ease-in-out infinite alternate}.verse-wrap{padding:17px 0 0;width:100%}.verse{font-size:28px}.verse.long{font-size:22px}.observe{font-size:11px}.hotspot{font-size:12px;max-width:100%}.clue-pop{padding:13px;margin-top:9px;max-width:100%}.task-card{position:relative;top:auto;margin:22px 0 0;min-height:0;max-height:none}.task-scroll{max-height:none}.scene-footnote{margin-top:15px;text-align:left}.frame-tools{gap:6px}.motion-label{font-size:9px}.frame-tools button{font-size:9px;padding:5px 7px}.chapterbar .chapters{min-width:0;flex-basis:100%;order:0}.motion-btn{display:block}.motion-controls{order:1}.step-controls{order:2;margin-left:auto}.chapterbar{padding:15px 4vw;gap:12px;min-height:0}.reader-footer{padding-top:3px}.live-dot{flex-shrink:0}.hidden-verse{font-size:21px}.image-dialog{padding:12px}.scene-effects .leaf,.scene-effects .petal{animation-duration:calc(var(--duration) * .8)}.task-scroll h2{font-size:16px}.choice{font-size:13px}}
@media(max-width:420px){.scene-heading{display:block}.scene-num{margin-top:8px;display:block}.verse{font-size:24px}.verse.long{font-size:20px}.frame-tools{align-items:flex-start}.motion-label{max-width:68%;line-height:1.7}.motion-btn,.autoplay-btn{font-size:10px;padding:8px}.step-controls button{padding:8px;font-size:10px}.particle.leaf{--size:7px!important}}
@media(prefers-reduced-motion:reduce){.scene *,.scene *:before,.scene *:after{animation:none!important}.scene-effects{display:none}.live-dot{animation:none}.visual-zone{animation:none}.verse p{opacity:1;transform:none;filter:none}}