:root{font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;background:#eae7dd;color:#3f2210}
*{box-sizing:border-box}
body{margin:0}
main{position:relative;width:min(100%,390px);margin:auto;background:#faf7f0}
header,nav{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 15px;background:#faf7f0;font-size:.82rem}
header{border-bottom:1px solid #dedac8}
header select{max-width:49%;min-height:32px;color:#526027;background:#faf7f0;border:1px solid #c7cbb0;border-radius:6px}
nav{position:sticky;bottom:0;z-index:2;border-top:1px solid #dedac8;padding-bottom:max(8px,env(safe-area-inset-bottom))}
button{font:inherit;cursor:pointer}
nav button{min-height:44px;padding:7px 14px;border-radius:22px;border:1px solid #657235;color:#3f2210;background:#faf7f0;font-weight:700}
nav button:last-child{color:white;background:#59652f}
.cover-page nav{position:absolute;bottom:6.4%;left:0;right:0;border:0;padding:0;justify-content:center;background:transparent}
.cover-page nav #previous,.cover-page nav #number{display:none}
.cover-page nav #next{background:#fff;color:#452610;animation:ink .35s 4.7s both}
button:disabled{opacity:.45}
#paper{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:390/844;background:#faf7f0}
#paper{container-type:inline-size}
.art,.ink{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ink{animation:ink .56s cubic-bezier(.2,.72,.32,1) var(--at) both}
@keyframes ink{from{opacity:0}}
.zone{position:absolute;overflow:hidden}
.zone>img,.zone>iframe{width:100%;height:100%;display:block;border:0}
.village-preview{opacity:0;pointer-events:none;transition:opacity .45s ease-out}
.village-preview.village-ready{opacity:1;pointer-events:auto}
.scene-motion{animation:ink .5s var(--at,0s) both}
.reveal-zone{animation:ink .6s var(--at,0s) both}
.harvest-ink{width:100%;height:100%;background-image:url(assets/layout-8-base-3x.png);animation:harvest-fill .52s var(--at) ease-out both}
.steep-cup-mask{animation:steep-card-background .6s var(--at) both}
@keyframes steep-card-background{from{background-color:#faf7f0}}
@keyframes harvest-fill{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
.slide-in{animation:slide-in .75s var(--at) both}
@keyframes slide-in{from{opacity:0;transform:translateX(4%)}}
.pop-in{animation:pop-in .6s var(--at) both}
@keyframes pop-in{from{opacity:0;transform:scale(.988)}}
.number-settle{animation:number-settle .58s var(--at) cubic-bezier(.2,.7,.3,1) both}
@keyframes number-settle{from{opacity:0;transform:scale(.78)}to{opacity:1;transform:none}}
.timeline-entry{animation:ink .40s var(--at) ease-out both}
.timeline-highlight{animation:ink .68s var(--at) ease-out both}
.timeline-curtain{animation:timeline-grow 2.05s .12s ease-out both}
@keyframes timeline-grow{to{clip-path:inset(100% 0 0)}}
.farm-sticker{animation:farm-sticker-land .48s var(--at) cubic-bezier(.23,.75,.38,1) both}
@keyframes farm-sticker-land{0%{opacity:0;transform:translateY(-4.103cqw) rotate(var(--tilt)) scale(1.18)}68%{opacity:1;transform:translateY(0) rotate(0deg) scale(.96)}100%{opacity:1;transform:none}}
.doodle-in{animation:doodle-in .74s cubic-bezier(.23,.7,.32,1) var(--at) both,doodle-nod .82s ease-in-out calc(var(--at) + .74s) both}
@keyframes doodle-in{from{opacity:0;transform:translateY(.55%)}}
@keyframes doodle-nod{0%,100%{transform:rotate(0)}42%{transform:rotate(2deg)}}
.farewell-mask{background:#faf7f0}
.farewell-piece{animation:ink .6s 3.5s both,var(--move) var(--duration) ease-in-out var(--at) both}
.wave{--move:wave;--duration:1.8s}
.flower{--move:flower;--duration:2.65s}
.butterfly{--move:butterfly;--duration:2.25s}
@keyframes wave{20%{transform:rotate(-7deg)}42%{transform:rotate(5deg)}63%{transform:rotate(-6deg)}82%{transform:rotate(3deg)}}
@keyframes flower{24%{transform:rotate(4deg)}54%{transform:rotate(-4deg)}78%{transform:rotate(2deg)}}
@keyframes butterfly{28%{transform:translate(1%,-1.6%) rotate(-8deg)}56%{transform:translate(3%,-3.1%) rotate(6deg)}100%{transform:translate(2.8%,-5.8%) rotate(-5deg)}}
.stage{background:radial-gradient(ellipse at 50% 25%,#fff8e8,#e9dcc3 52%,#c7b294);border-radius:7px}
.stage figure{position:absolute;inset:0;margin:0;display:grid;place-content:center;text-align:center;animation:stage 2.85s ease-in-out var(--at) both}
.stage figure:last-child{animation-name:stage-last}
.stage img{display:block;width:145px;max-width:47vw;height:125px;object-fit:contain}
.stage figcaption{font-size:.78rem;font-weight:700}
.stage-light{position:absolute;inset:0;background:radial-gradient(ellipse at 50% -13%,#fffce7 0%,#fff8e7b0 19%,transparent 59%)}
.stage-plinth{position:absolute;left:23%;right:23%;bottom:13%;height:19%;border-radius:50% / 38%;background:linear-gradient(#f5e8cf,#dbc4a5 62%,#bfa481);box-shadow:0 9px 17px #66492f36}
.stage-intro{animation:stage-intro 1.05s 3.95s forwards}
@keyframes stage-intro{to{opacity:0}}
@keyframes stage{0%{opacity:0;transform:translateX(55%) scale(.85)}20%,77%{opacity:1;transform:none}100%{opacity:0;transform:translateX(-55%) scale(.85)}}
@keyframes stage-last{0%{opacity:0;transform:translateX(55%) scale(.85)}24%,100%{opacity:1;transform:none}}
.tile{position:absolute;padding:0;border:0;background:none;perspective:600px;border-radius:5%}
.turn,.face{position:absolute;inset:0;border-radius:inherit}
.turn{display:block;transform-style:preserve-3d;transition:transform .95s cubic-bezier(.45,.03,.24,1)}
.tile[aria-pressed=true] .turn{transform:rotateY(180deg)}
.face{display:block;backface-visibility:hidden;overflow:hidden}
.front{background-color:#faf7f0}
.reverse{transform:rotateY(180deg)}
.reverse.pattern{background:#657235 center top/100% 215%}
.reverse.type-card{display:grid;place-content:center;gap:5px;background:#f0efdf;color:#657235;font-weight:800;line-height:1.05;letter-spacing:.06em;font-size:4.9cqw;border:1px solid #dedcc8}
.reverse.type-card small{font-size:2.2cqw;letter-spacing:.14em}
.reverse.type-card.logo{display:flex;align-items:center;justify-content:center;background:#3f2210;border:0}
.reverse.logo img{width:106%;max-width:none;display:block}
.reader-copy{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.stage figure:not(:last-child){display:none}}