@font-face{font-family:Book;src:url('assets/xiaowei.ttf');font-display:swap}@font-face{font-family:Book;src:url('assets/return-glyph.ttf');unicode-range:U+56DE;font-display:swap}
:root{--paper:#f6f2e8;--ink:#3c4936;--bark:#95876e}*{box-sizing:border-box}html{scrollbar-width:thin;scrollbar-color:#bbc1aa var(--paper)}body{margin:0;background:var(--paper);color:var(--ink);font-family:Book,'Kaiti SC',serif;overflow-x:hidden}header{display:none}#experience{position:fixed;inset:0;isolation:isolate;touch-action:pan-y;cursor:grab}body.dragging #experience{cursor:grabbing}body.dragging{user-select:none}.scene{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;will-change:opacity,transform}.scene.active{visibility:visible}.art{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.actor{position:absolute;object-fit:contain;transform-origin:50% 98%;will-change:transform;pointer-events:none;user-select:none;border:0;outline:0;box-shadow:none;mask:none}.actor.near{filter:blur(.3px)}.actor.bell{transform-origin:50% 4%}.actor.far{filter:saturate(.65);opacity:.65}.scene-copy{position:absolute;left:7.5%;top:29%;width:26%;z-index:250;transform-origin:left center}.chapter-label{font-size:12px;letter-spacing:3px;color:var(--bark);margin:0 0 23px}.scene h1,.scene h2{font-size:clamp(30px,2.8vw,49px);font-weight:400;line-height:1.4;letter-spacing:3px;margin:0 0 27px;text-wrap:balance}.scene h1{font-size:clamp(44px,4.1vw,68px);line-height:1.35;letter-spacing:4px}.passage{font-size:clamp(17px,1.3vw,23px);line-height:2;letter-spacing:1px;white-space:pre-wrap;margin:0;color:#7c7c65;max-width:390px}.scene-copy.original{top:17%;width:29%}.scene-copy.original .passage{font-size:clamp(17px,1.2vw,22px);line-height:1.9;color:var(--ink)}.scene-copy.original h1,.scene-copy.original h2{font-size:30px}.dust{position:absolute;left:0;top:0;width:4px;height:4px;border-radius:50%;background:#fffde6;box-shadow:0 0 7px #fffbe7;pointer-events:none}.paper{pointer-events:none;position:fixed;inset:0;z-index:260;opacity:.11;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.3' filter='url(%23n)'/%3E%3C/svg%3E")}
#chapterDots{position:fixed;z-index:270;right:3.5%;top:50%;transform:translateY(-50%);display:grid;gap:17px;pointer-events:none}#chapterDots i{width:4px;height:4px;background:#acb298;border-radius:50%;opacity:.55;transition:transform .5s,opacity .5s}#chapterDots i.current{transform:scale(1.7);opacity:1;background:#657d50}footer{position:fixed;left:5%;right:5%;bottom:max(25px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none;z-index:270;color:var(--bark);font-size:10px;letter-spacing:2px}#pageNumber{opacity:.65}#scrollHint{text-align:center;position:absolute;left:50%;bottom:0;transform:translateX(-50%);font-size:11px;white-space:nowrap;color:#a0a38d}#scrollHint i{display:block;font:18px serif;margin-top:9px;animation:hint 2.6s infinite}#textKind{font-size:9px;opacity:.65}#progressTrack{position:fixed;bottom:0;height:1px;left:0;right:0;z-index:280}#progress{height:100%;background:#9ea987;width:0}#scrollSpace{height:940vh;pointer-events:none}#loading{position:fixed;z-index:300;inset:0;background:var(--paper);display:grid;place-items:center;font-size:15px;letter-spacing:3px;transition:opacity .7s}#loading.done{opacity:0;pointer-events:none}noscript{position:fixed;inset:40% 10%;z-index:300}@keyframes hint{50%{transform:translateY(6px)}}
@media(max-width:800px){.scene-copy{left:8%;top:11%;width:84%}.chapter-label{font-size:10px;margin-bottom:16px}.scene h1{font-size:39px;line-height:1.3;margin-bottom:20px}.scene h1 br{display:none}.scene h2{font-size:28px;line-height:1.4;margin-bottom:18px}.passage{font-size:16px;line-height:1.9;max-width:100%;letter-spacing:.5px}.scene-copy.original{top:8%;width:84%}.scene-copy.original h1,.scene-copy.original h2{font-size:25px;margin-bottom:12px}.scene-copy.original .passage{font-size:15px;line-height:1.75}footer{bottom:21px;font-size:9px;letter-spacing:1px}#scrollHint{font-size:9px;bottom:14px}#textKind{font-size:8px}#chapterDots{right:4%;gap:14px}#scrollSpace{height:940svh}.actor.near{filter:none}}
@media(max-height:600px) and (min-width:801px){.scene-copy{top:24%}.scene h1{font-size:38px}.scene h2{font-size:28px}.passage{font-size:15px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Scene objects sit directly on the paper. Only the cast shadow is clipped to its physical wall. */
.scene[data-scene="0"]::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 76% 23%,#f5d9a540,transparent 53%);pointer-events:none}
.scene[data-scene="6"]::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 65% 46%,#e4dcc52b,transparent 65%);pointer-events:none}
.morning-sun{aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#f4ca7c 0%,#edbf73 55%,#edbf7310 70%,transparent 73%);filter:blur(.7px)}
.morning-sun::before{content:"";position:absolute;inset:-60%;border-radius:50%;background:radial-gradient(circle,#f4ca7c21,transparent 65%)}
.bell-rope{width:3px;background:repeating-linear-gradient(20deg,#8d8064 0px,#b9aa86 3px,#8d8064 5px)}
.actor.flag-cloth{transform-origin:0% 50%;filter:drop-shadow(1px 2px 2px #67665120)}
.wall-object>img{width:100%;height:100%;display:block}.wall-cast{position:absolute;inset:0;mask-image:url('assets/v4/white-wall.webp');mask-size:100% 100%;mask-repeat:no-repeat;pointer-events:none}.wall-cast img{position:absolute;left:23%;bottom:-10%;height:143%;width:auto;filter:brightness(0) blur(1.2px);opacity:.17;transform-origin:30% 95%;mix-blend-mode:multiply}
.room-dark{aspect-ratio:2.3;background:linear-gradient(160deg,#565d48,#7b8066 56%,#b9b09b)}

/* Page turns settle exactly; long learning content keeps its own scrolling area. */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}#scrollSpace{display:none}#experience{touch-action:pan-y}.learning-shell,.scene-copy{touch-action:pan-y;overscroll-behavior:contain}.scene-copy.original{max-height:73%;overflow:auto;scrollbar-width:thin}

@media(min-width:801px){.scene-copy.original{width:26%}}

/* Reading is a quiet ink change; spans do not move or resize the textbook. */
.reading-phrase{transition:color .45s ease,text-shadow .45s ease;background:transparent}
.has-narration .reading-phrase{color:#68715d}
.has-narration .reading-phrase.has-read{color:#43503a}
.has-narration .reading-phrase.is-reading{color:#976328;text-shadow:0 0 12px #d8b97428}
.reading-controls{position:fixed;left:7.5%;bottom:70px;z-index:275;display:flex;gap:12px;align-items:center;color:#81765f;font-family:Book,'Kaiti SC',serif}
.reading-controls[hidden]{display:none}.reading-toggle{font:inherit;font-size:13px;letter-spacing:1px;color:#667551;background:transparent;border:0;padding:10px 0;cursor:pointer}.reading-toggle::before{content:'♪';display:inline-block;margin-right:8px}.reading-toggle:focus-visible{outline:1px solid #9da58b;outline-offset:5px}.reading-status{font-size:11px;letter-spacing:1px;opacity:.8}
.reading-controls[data-playing="true"] .reading-toggle::before{animation:reading-breath 2s ease-in-out infinite}
@keyframes reading-breath{50%{opacity:.4}}
@media(max-width:800px){.reading-controls{left:8%;top:var(--reading-control-top,38%);bottom:auto;gap:8px}.reading-status{font-size:10px}.reading-toggle{font-size:12px}}

.garden-home{position:fixed;top:max(18px,env(safe-area-inset-top));left:5%;z-index:400;font-size:13px;color:#647056;text-decoration:none;background:#f6f2e8d9;padding:8px 12px;border-radius:24px}.garden-home:focus-visible{outline:2px solid #647056;outline-offset:3px}@media(max-width:800px){.garden-home{top:max(10px,env(safe-area-inset-top));font-size:12px}}