@font-face{font-family:XiaocaoSerif;src:url(font/serif.woff2) format("woff2");font-display:swap}
:root{--paper:#fcf9f1;--ink:#4c4a40;--muted:#999583;--green:#566745;--col:min(100vw,520px);--bar:46px}
*{box-sizing:border-box}
html{background:#ece6d7;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0 auto;max-width:520px;min-height:100vh;background:var(--paper);color:var(--ink);font-family:XiaocaoSerif,"Songti SC",STSong,"Noto Serif SC","Source Han Serif SC",serif;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
body::after{content:"";position:fixed;inset:0;background:url(tex/grain.png);opacity:.6;pointer-events:none;z-index:30}
@media (min-width:560px){body{box-shadow:0 0 70px #5a4a2a1f}}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:focus-visible,a:focus-visible{outline:2px solid #8c9a7d;outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* 顶栏 */
.bar{position:fixed;z-index:20;top:0;left:50%;width:var(--col);height:calc(var(--bar) + env(safe-area-inset-top));padding:env(safe-area-inset-top) 14px 0 18px;display:flex;align-items:center;justify-content:space-between;background:#fcf9f1e0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transform:translateX(-50%);transition:transform .4s ease,opacity .4s}
.bar.hide{transform:translate(-50%,-105%)}
.bar.top{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.bar.top .bar-title{opacity:0}
.bar-title{font-size:16px;letter-spacing:.32em;color:var(--green);text-decoration:none;transition:opacity .4s}
.bar-tools{display:flex;gap:6px}
.bar-tools button{display:flex;align-items:center;gap:6px;padding:10px 8px;font-size:13px;letter-spacing:.1em;color:var(--muted)}
.bar-tools button::before{content:"";width:7px;height:7px;border-radius:50%;border:1px solid currentColor}
.bar-tools button[aria-pressed=true]{color:#4d653d}
.bar-tools button[aria-pressed=true]::before{background:currentColor}
.bar-progress{position:absolute;left:0;bottom:0;height:2px;width:100%;background:#9aa78b;transform:scaleX(0);transform-origin:left;opacity:.8}

/* 封面 */
.cover{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(18vh + env(safe-area-inset-top)) 0 4vh;text-align:center}
.cover-text h1{margin:0 0 20px;padding-left:.45em;font-weight:400;font-size:50px;letter-spacing:.45em;color:var(--green)}
.cover-text p{margin:0;font-size:14px;letter-spacing:.18em;color:#8c8a7c}
.cover-art{position:relative;margin:7vh 0 0;aspect-ratio:var(--ar);overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
.cover-art img{display:block;width:100%;height:100%}
.again{padding:11px 30px;border:1px solid #b9c0a8;border-radius:999px;font-size:15px;letter-spacing:.24em;color:#4d653d}
.cover-hint{margin:5vh 0 0;padding-left:.24em;font-size:13px;letter-spacing:.24em;color:#a8a28b;animation:hint 2.8s ease-in-out infinite}
@keyframes hint{50%{transform:translateY(5px);opacity:.55}}

/* 正文 */
.page{position:relative;padding-bottom:5vh}
.folio{display:none}
.review .folio{display:block;padding:0 16px 10px;text-align:right;font-size:11px;letter-spacing:.1em;color:#b9b29c}
.txt{margin:0 0 26px;padding:0 26px}
.ln{margin:0 0 .4em;font-size:17px;line-height:1.9;letter-spacing:.03em;text-align:left;line-break:strict;word-break:normal;overflow-wrap:break-word}
.ln.blank{height:.55em;margin:0}
@media (max-width:359px){.ln{font-size:16px}.txt{padding:0 22px}}
.js .ln{opacity:0;transform:translateY(9px);transition:opacity .9s ease,transform .9s ease}
.js .ln.on{opacity:1;transform:none}

/* 画格 */
.pn{position:relative;margin:0 0 34px}
.vw{position:relative;aspect-ratio:var(--ar);overflow:hidden}
.cam{position:absolute;inset:0;z-index:0;transform-origin:0 0}  /* 帧的层级只在镜头层内部叠，边框与动效始终在上面 */
.art{position:absolute}
.fr{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;transition:opacity 260ms ease}
.fr.on{opacity:1}
.bleed .vw{-webkit-mask-image:linear-gradient(transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(transparent,#000 5%,#000 95%,transparent)}
.frame{margin-left:18px;margin-right:18px}
.frame .vw{background:var(--paper)}
.frame .vw::after{content:"";position:absolute;inset:0;z-index:3;border:9px solid transparent;border-image:url(tex/frame.png) 30 round;pointer-events:none}
.memory{width:62%;margin-left:auto;margin-right:auto}
.memory .vw{-webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 48%,#000 52%,transparent 100%);mask-image:radial-gradient(ellipse 72% 70% at 50% 48%,#000 52%,transparent 100%)}
.memory .art{filter:sepia(.32) saturate(.72) brightness(1.03);opacity:.78}
.sz-small{width:56%;margin-left:auto;margin-right:auto}
.sz-mid{width:72%;margin-left:auto;margin-right:auto}
.row{display:flex;gap:10px;align-items:flex-start;margin:0 18px 34px}
.row .pn{min-width:0;margin:0;width:auto}
.stk{position:relative;height:calc(var(--stk) * 100vh);margin-bottom:34px}
.stk>.pn{position:sticky;top:max(calc(var(--bar) + 6px),calc(50vh - var(--col) / var(--ar) / 2));margin:0}
.replay{position:absolute;z-index:5;right:12px;bottom:12px;width:34px;height:34px;border-radius:50%;background:#fcf9f1d9;color:#7a8068;font-size:17px;line-height:34px;opacity:.85}
.replay::before{content:"↻"}
.frame .replay{right:16px;bottom:16px}

/* 随滚动的白场渐变：--w 纸色层不透明度，--a 现在的她不透明度 */
.wfade .wa,.wfade .wb,.wfade .ww{position:absolute;inset:0;display:block;width:100%;height:100%;will-change:opacity}
.wfade .ww{background:var(--paper);opacity:var(--w,0)}
.wfade .wb{opacity:var(--a,0)}

/* 入场 */
.js .pn{opacity:0;transform:translateY(18px);transition:opacity 1s ease,transform 1s ease}
.js .pn.on{opacity:1;transform:none}
.js .pn[data-in=fade]{transform:none;transition-duration:1.5s}
.js .pn[data-in=slow]{transform:none;transition-duration:2.8s}
.js .pn[data-in=step]{transform:none}
.js .pn[data-in=step] .art{transform:translateX(16%);transition:transform 1.5s cubic-bezier(.22,.9,.3,1)}
.js .pn[data-in=step].on .art{transform:none}
.js .pn[data-in=slide] .art{transform:translateX(22%);transition:transform 1.6s cubic-bezier(.2,.8,.25,1)}
.js .pn[data-in=slide].on .art{transform:none}
.js .pn[data-in=pop].on .art{animation:pop .75s ease-out .15s both}
.js .pn[data-in=blur] .vw{filter:blur(14px);transition:filter 2.6s ease .2s}
.js .pn[data-in=blur].on .vw{filter:none}
.js .row[data-in=stagger]>.pn:nth-child(2){transition-delay:.5s}
.js .row[data-in=stagger]>.pn:nth-child(3){transition-delay:1s}
@keyframes pop{0%{transform:scale(1.07)}35%{transform:scale(.985) rotate(-.6deg)}60%{transform:scale(1.01) rotate(.5deg)}100%{transform:none}}

/* 叠加动效 */
.fx{position:absolute;pointer-events:none;z-index:2}
.fx-wind{inset:0;overflow:hidden}
.fx-wind i{position:absolute;left:0;width:58%;height:15%;background:url(tex/wind0.png) center/100% 100% no-repeat;opacity:0;animation:wind 7s linear infinite;animation-play-state:paused}
.fx-wind i:nth-child(1){top:16%;animation-delay:-1.2s}
.fx-wind i:nth-child(2){top:40%;background-image:url(tex/wind1.png);animation-duration:8.6s;animation-delay:-5s}
.fx-wind i:nth-child(3){top:62%;width:46%;background-image:url(tex/wind2.png);animation-duration:6.2s;animation-delay:-3s}
.fx-wind[data-dir=rtl] i{animation-name:windr}
.vis .fx-wind i,.cover .fx-wind i{animation-play-state:running}
@keyframes wind{0%{transform:translateX(-80%);opacity:0}18%{opacity:.8}72%{opacity:.65}100%{transform:translateX(190%);opacity:0}}
@keyframes windr{0%{transform:translateX(190%) scaleX(-1);opacity:0}18%{opacity:.8}72%{opacity:.65}100%{transform:translateX(-80%) scaleX(-1);opacity:0}}
.fx-sun{inset:0;opacity:0;background:radial-gradient(circle at 90% 4%,#ffd68a80,#ffdca02e 36%,#ffdca000 62%);transition:opacity 3s ease .8s}
.fx-sun i{position:absolute;inset:0;background:radial-gradient(circle at 90% 4%,#fff0c870,#fff0c800 44%);animation:glow 6s ease-in-out infinite alternate;animation-play-state:paused}
.on .fx-sun{opacity:1}
.vis .fx-sun i{animation-play-state:running}
@keyframes glow{from{opacity:.3}to{opacity:1}}
.fx-tickle{width:24%;aspect-ratio:1;overflow:visible;opacity:0;transform:translate(-50%,-50%) scale(.5)}
.fx-tickle path{fill:none;stroke:#6f6852;stroke-width:3;stroke-linecap:round}
.on .fx-tickle{animation:tickle 1.6s ease-in-out 1.2s infinite;animation-play-state:paused}
.vis.on .fx-tickle{animation-play-state:running}
@keyframes tickle{0%,100%{opacity:0;transform:translate(-50%,-50%) rotate(-6deg)}30%,70%{opacity:.9}50%{transform:translate(-50%,-50%) rotate(6deg)}}
.jolt-shake .art{animation:shake .45s ease-in-out 2}
.jolt-bumpy .art{animation:bump .9s ease-in-out 3}
@keyframes shake{25%{transform:translateX(-2.5%) rotate(-1.2deg)}75%{transform:translateX(2.5%) rotate(1.2deg)}}
@keyframes bump{30%{transform:translateY(-2.2%) rotate(-.8deg)}60%{transform:translateY(.8%) rotate(.6deg)}}
.bubble .lay{position:absolute;inset:0;width:100%;height:100%;transition:opacity 1.3s ease}
.js .bubble .lay{opacity:0}
.js .bubble .lay.show{opacity:1}

/* 留白 */
.gap-s{height:4vh}.gap-m{height:9vh}

/* 留白小图素：鞋印一步步走向下一格的皮鞋；蒲公英种子在沉默里慢慢飘过；小卡车载着树开过来、停下 */
.deco{position:relative;pointer-events:none}
.deco img{position:absolute;display:block;height:auto}
.deco-steps{height:96px;margin:-6px 26px 22px}
.deco-steps img{width:17px;transform:rotate(var(--r))}
.deco-steps .d1{left:116px;top:0;--r:132deg}
.deco-steps .d2{left:134px;top:24px;--r:134deg}
.deco-steps .d3{left:166px;top:40px;--r:131deg}
.deco-steps .d4{left:184px;top:66px;--r:133deg}
.js .deco-steps img{opacity:0;transform:rotate(var(--r)) translateY(-6px);transition:opacity .8s ease,transform .8s ease}
.js .deco-steps.on img{opacity:.8;transform:rotate(var(--r))}
.js .deco-steps.on .d2{transition-delay:.5s}.js .deco-steps.on .d3{transition-delay:1s}.js .deco-steps.on .d4{transition-delay:1.5s}
.deco-seeds{height:112px;margin:-2vh 0 6px;overflow:hidden}
.deco-seeds img{left:0;top:0;opacity:0;animation:drift 22s ease-in-out infinite;animation-play-state:paused}
.deco-seeds .d1{width:42px;top:14px;animation-delay:-5s}
.deco-seeds .d2{width:34px;top:54px;animation-duration:27s;animation-delay:-17s}
.deco-seeds .d3{width:27px;top:30px;animation-duration:18s;animation-delay:-11s}
.deco-seeds.vis img{animation-play-state:running}
.deco-truck{height:150px;margin:-1vh 0 14px;overflow:hidden}
.deco-truck .d1{left:0;bottom:0;width:100%}
.deco-truck .d2{left:0;bottom:22px;width:112px;transform:translate(calc(var(--col)*.5 - 56px),0);transform-origin:50% 100%}
.js .deco-truck .d2{animation:drive 6.2s linear both paused}
.js .deco-truck.on .d2{animation-play-state:running}
@keyframes drive{0.0%{transform:translate(calc(var(--col)*0.0000 + -130.0px),0.00px) rotate(0.00deg)}6.2%{transform:translate(calc(var(--col)*0.0717 + -119.4px),-2.96px) rotate(0.83deg)}12.5%{transform:translate(calc(var(--col)*0.1371 + -109.7px),0.00px) rotate(0.00deg)}18.8%{transform:translate(calc(var(--col)*0.1962 + -101.0px),-2.49px) rotate(-0.70deg)}25.0%{transform:translate(calc(var(--col)*0.2493 + -93.1px),0.00px) rotate(0.00deg)}31.2%{transform:translate(calc(var(--col)*0.2966 + -86.1px),-2.04px) rotate(0.57deg)}37.5%{transform:translate(calc(var(--col)*0.3382 + -80.0px),0.00px) rotate(0.00deg)}43.8%{transform:translate(calc(var(--col)*0.3743 + -74.6px),-1.60px) rotate(-0.45deg)}50.0%{transform:translate(calc(var(--col)*0.4053 + -70.0px),0.00px) rotate(0.00deg)}56.2%{transform:translate(calc(var(--col)*0.4312 + -66.2px),-1.19px) rotate(0.33deg)}62.5%{transform:translate(calc(var(--col)*0.4525 + -63.0px),0.00px) rotate(0.00deg)}68.8%{transform:translate(calc(var(--col)*0.4693 + -60.5px),-0.79px) rotate(-0.22deg)}75.0%{transform:translate(calc(var(--col)*0.4821 + -58.7px),0.00px) rotate(0.00deg)}81.2%{transform:translate(calc(var(--col)*0.4910 + -57.3px),-0.43px) rotate(0.12deg)}87.5%{transform:translate(calc(var(--col)*0.4966 + -56.5px),0.00px) rotate(0.00deg)}93.8%{transform:translate(calc(var(--col)*0.4994 + -56.1px),-0.11px) rotate(-0.03deg)}100.0%{transform:translate(calc(var(--col)*0.5000 + -56.0px),0.00px) rotate(0.00deg)}}
@keyframes drift{0%{transform:translate(-50px,0) rotate(-10deg);opacity:0}10%{opacity:.95}30%{transform:translate(calc(var(--col)*.3),16px) rotate(8deg)}55%{transform:translate(calc(var(--col)*.55),-6px) rotate(-6deg)}80%{transform:translate(calc(var(--col)*.8),12px) rotate(7deg)}90%{opacity:.95}100%{transform:translate(calc(var(--col) + 20px),2px) rotate(-4deg);opacity:0}}
.end{padding:16vh 0 20vh;text-align:center}
.end-mark{margin:0 0 7vh;font-size:15px;letter-spacing:.32em;color:#90967d}

/* 关闭动效 */
.still .ln,.still .pn{opacity:1!important;transform:none!important;transition:none!important}
.still .pn .art{transform:none!important;animation:none!important;transition:none!important}
.still .pn .vw{filter:none!important;transition:none!important}
.still .fx-wind,.still .fx-tickle,.still .replay{display:none!important}
.still .bubble .lay{opacity:1;transition:none}
.still .fx-sun{opacity:1;transition:none}.still .fx-sun i{animation:none}
.still .stk{height:auto}.still .stk>.pn{position:relative;top:0}
.still .cover-hint{animation:none}
.still .deco-steps img{opacity:.8;transform:rotate(var(--r));transition:none}
.still .deco-seeds img{animation:none;opacity:.9}
.still .deco-truck .d2{animation:none}
.still .deco-seeds .d1{transform:translate(calc(var(--col)*.16),0) rotate(-6deg)}
.still .deco-seeds .d2{transform:translate(calc(var(--col)*.5),-10px) rotate(5deg)}
.still .deco-seeds .d3{transform:translate(calc(var(--col)*.74),14px) rotate(-4deg)}
.still .fr{transition:none}