/* 叮叮当，回到童年 · 样式
   版式：一条从放学到睡前的纵向长卷。前两屏在农村，后三屏在镇上。
   页面底色随滚动从午后纸色连续过渡到夜色（由 main.js 写入 --page）。 */

@font-face{font-family:"ZCOOL XiaoWei";src:url("../fonts/zcool-xiaowei.woff2") format("woff2");font-display:swap}
@font-face{font-family:"ZCOOL KuaiLe";src:url("../fonts/zcool-kuaile.woff2") format("woff2");font-display:swap}

:root{
  color-scheme:light;
  --paper:#f3e3bd; --paper-2:#e8cf98; --ink:#33281d; --ink-soft:#6e5b45;
  --board:#2f4b3c; --board-2:#203629; --brick:#b5473a; --soda:#6fa892; --wood:#8a5a3b; --wood-2:#b27b4b; --warm:#f2bd4b;
  --night:#252a40; --night-2:#363d5e; --moon:#f5e6b2; --gold:#f6d36b;
  --skin:#efc59b; --skin-n:#d4a37f; --blush:#e98b7a; --white:#fff8ea; --screen:#1d2626; --glow:#cfe8ff; --note:#f6e58d; --card:#c99d63; --pink:#e9a0a0;
  --hair:#2a221b; --buzz:#4a3f36; --denim:#3f5d8c;
  /* 农村 */
  --mud:#e7c991; --mud-2:#d6b073; --cement:#bfae90; --sunset:#f3a75c; --sky-out:#fdf1cf;
  --field:#93b26c; --field-2:#6f9452; --hill:#a9bf9f; --hill-2:#86a08b; --hay:#dcb45e; --hay-2:#b8913f; --tile:#5b5450;
  --bamboo:#b9b25a; --bamboo-2:#8f8a3e; --dog:#c98b45; --dog-2:#9c6630; --fu:#c8372d;
  /* 镇上 */
  --bldg:#cdbca3; --bldg-2:#b3a184; --bldg-n:#3f4766; --tv:#b9a582;
  --wall-3:#ead6b0; --desk:#a8744a; --deck:#1a2a22; --glass:#8fb3a4; --pencil:#f0c43a;
  --dream:#2f2b57; --dream-2:#5a4b8c;
  --n-wall:#2e3452; --n-floor:#3a3749; --sofa:#7c4a3c; --sofa-2:#93594a;
  /* 页面 */
  --page:#f5dfae; --text:var(--ink); --text-soft:var(--ink-soft); --accent:var(--brick);
  --frame:#33281d; --frame-2:#dcbd86; --pill:#fff8eaeb; --pill-line:#33281d2e;
  --f-display:"ZCOOL XiaoWei","Songti SC","STSong","Noto Serif SC","SimSun",serif;
  --f-hand:"ZCOOL KuaiLe","Kaiti SC","STKaiti","KaiTi",cursive;
  --f-body:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --beat:625ms; /* 96 BPM 的一拍。所有动效时长取它的倍数 */
}
body[data-dark="1"]{--text:#f3e6c8;--text-soft:#c7bc9f;--accent:var(--gold);--frame:#f3e6c8;--frame-2:#3a4266;--pill:#2f3552eb;--pill-line:#f3e6c833}

html{scroll-behavior:smooth}
html.rm{scroll-behavior:auto}
body{margin:0;background:var(--page);color:var(--text);font-family:var(--f-body);font-size:16px;line-height:1.7;
  transition:color calc(var(--beat)*2) ease;-webkit-tap-highlight-color:transparent;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.grain{position:fixed;inset:0;pointer-events:none;z-index:15;opacity:.22;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .25 0 0 0 0 .18 0 0 0 0 .1 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nw{white-space:nowrap}
#sprites{position:absolute;width:0;height:0;overflow:hidden}
.wrap{max-width:1180px;margin-inline:auto;width:100%;box-sizing:border-box;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
button,select{font:inherit;color:inherit}
:focus-visible{outline:3px dashed var(--accent);outline-offset:3px}

/* ---------- 章节通用 ---------- */
.sec{position:relative;padding-block:clamp(48px,9vh,104px)}
@media (min-width:900px) and (min-height:640px){.sec.full{min-height:100svh;display:flex;align-items:center;box-sizing:border-box}}
.copy{display:flex;flex-direction:column;gap:14px;min-width:0}
.eyebrow{font-family:var(--f-hand);color:var(--accent);font-size:17px;letter-spacing:.05em;margin:0}
.sec h2{font-family:var(--f-display);font-weight:400;font-size:clamp(30px,4.4vw,52px);line-height:1.2;margin:0;text-wrap:balance}
.story{font-size:clamp(16px,1.3vw,18px);line-height:1.95;margin:0;max-width:30em}
.hint{font-family:var(--f-hand);color:var(--text-soft);font-size:16px;margin:0}
.stage{position:relative;margin:0;min-width:0;aspect-ratio:var(--ar)}
.stage::before{content:"";position:absolute;inset:0;border-radius:16px;background:var(--paper-2);opacity:.5;transition:opacity .4s}
.stage.loaded::before{opacity:0}
.stage .art-error{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:16px;font-size:14px;color:var(--ink-soft)}
.scene{display:block;width:100%;height:auto;border-radius:16px;box-shadow:0 0 0 2px var(--frame),8px 8px 0 var(--frame-2);position:relative}
.lay-a{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:center}
.lay-b{display:grid;gap:28px}
.lay-b .copy-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:12px 48px;align-items:start}
.lay-c{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(24px,4vw,56px);align-items:center}
.lay-d{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:start}
.lay-e{display:grid;gap:32px;justify-items:center}
.lay-e .copy{align-items:center;text-align:center}
@media (max-width:820px){.lay-a,.lay-c,.lay-d,.lay-b .copy-row{grid-template-columns:1fr}.lay-d .copy{order:2}}

/* 第一屏里的开场 */
.kicker{font-family:var(--f-hand);color:var(--accent);font-size:16px;letter-spacing:.06em;margin:0}
.site{font-family:var(--f-display);font-weight:400;font-size:clamp(44px,6.4vw,84px);line-height:1.04;margin:0 0 4px;letter-spacing:.02em}
.site em{font-style:normal;color:var(--brick)}
.opener{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 0 18px;border-bottom:2px dashed var(--frame-2);margin-bottom:10px}
.bell-btn{width:76px;height:76px;flex:none;border-radius:50%;border:2px solid var(--ink);background:var(--warm);cursor:pointer;display:grid;place-items:center;
  box-shadow:4px 4px 0 var(--ink);transition:transform .15s,box-shadow .15s;padding:0}
.bell-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.bell-btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.bell-btn[aria-busy="true"]{cursor:progress}
.bell-btn svg{width:48px;height:48px;overflow:visible}
.opener-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.bell-label{font-family:var(--f-hand);font-size:20px;line-height:1.3}
.linkish{color:var(--text-soft);text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:0;cursor:pointer;font-size:14px;align-self:flex-start}

/* 可点的热点 */
.hot{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);border:0;background:transparent;border-radius:14px;cursor:pointer;padding:0;z-index:3}
.hot:hover{outline:2px dashed var(--accent);outline-offset:2px}
.hot .tag{position:absolute;left:50%;top:-4px;transform:translate(-50%,-100%);font-family:var(--f-hand);font-size:15px;line-height:1.3;
  background:var(--note);color:var(--ink);padding:3px 10px;border-radius:4px;white-space:nowrap;box-shadow:2px 2px 0 #33281d40;pointer-events:none}
.hot.below .tag{top:auto;bottom:-4px;transform:translate(-50%,100%)}
.hot.pulse::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--accent);animation:pulse calc(var(--beat)*2) ease-out infinite}
@keyframes pulse{from{opacity:.9;transform:scale(.92)}to{opacity:0;transform:scale(1.12)}}
.rm .hot.pulse::after{animation:none;opacity:.6}
.chip{align-self:flex-start;font-family:var(--f-hand);font-size:16px;border:2px solid var(--text);background:transparent;border-radius:999px;padding:6px 16px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--text);color:var(--page)}

/* ---------- 插画用的填色与笔触 ---------- */
.o{stroke:var(--ink);stroke-width:2.2;stroke-linejoin:round}
.sh{fill:var(--ink);opacity:.13}
.hl{fill:#fff;opacity:.3}
.k-paper{fill:var(--paper)}.k-paper2{fill:var(--paper-2)}.k-ink{fill:var(--ink)}.k-inks{fill:var(--ink-soft)}
.k-board{fill:var(--board)}.k-board2{fill:var(--board-2)}.k-brick{fill:var(--brick)}.k-soda{fill:var(--soda)}
.k-wood{fill:var(--wood)}.k-wood2{fill:var(--wood-2)}.k-warm{fill:var(--warm)}.k-night2{fill:var(--night-2)}
.k-moon{fill:var(--moon)}.k-gold{fill:var(--gold)}.k-skin{fill:var(--skin)}.k-skinn{fill:var(--skin-n)}.k-white{fill:var(--white)}
.k-blush{fill:var(--blush);opacity:.45}.k-pink{fill:var(--pink)}
.k-screen{fill:var(--screen)}.k-glow{fill:var(--glow)}.k-note{fill:var(--note)}.k-card{fill:var(--card)}
.k-hair{fill:var(--hair)}.k-buzz{fill:var(--buzz)}.k-denim{fill:var(--denim)}
.k-mud{fill:var(--mud)}.k-mud2{fill:var(--mud-2)}.k-cement{fill:var(--cement)}.k-sunset{fill:var(--sunset)}.k-skyout{fill:var(--sky-out)}
.k-field{fill:var(--field)}.k-field2{fill:var(--field-2)}.k-hill{fill:var(--hill)}.k-hill2{fill:var(--hill-2)}.k-hay{fill:var(--hay)}.k-hay2{fill:var(--hay-2)}
.k-tile{fill:var(--tile)}.k-bamboo{fill:var(--bamboo)}.k-dog{fill:var(--dog)}.k-dog2{fill:var(--dog-2)}.k-fu{fill:var(--fu)}
.k-bldg{fill:var(--bldg)}.k-bldg2{fill:var(--bldg-2)}.k-bldgn{fill:var(--bldg-n)}.k-tv{fill:var(--tv)}
.k-patch{fill:var(--warm);opacity:.35}
.k-wall3{fill:var(--wall-3)}.k-desk{fill:var(--desk)}.k-deck{fill:var(--deck)}.k-glass{fill:var(--glass)}.k-pencil{fill:var(--pencil)}
.k-dream{fill:var(--dream)}.k-nwall{fill:var(--n-wall)}.k-nfloor{fill:var(--n-floor)}.k-sofa{fill:var(--sofa)}.k-sofa2{fill:var(--sofa-2)}
.s-ink{stroke:var(--ink);fill:none}.s-inks{stroke:var(--ink-soft);fill:none}.s-wood{stroke:var(--wood);fill:none}.s-wood2{stroke:var(--wood-2);fill:none}
.s-chalk{stroke:var(--white);fill:none}.s-board{stroke:var(--board);fill:none}.s-board2{stroke:var(--board-2);fill:none}.s-gold{stroke:var(--gold);fill:none}
.s-paper2{stroke:var(--paper-2);fill:none}.s-hay2{stroke:var(--hay-2);fill:none}.s-field2{stroke:var(--field-2);fill:none}
.s-denim{stroke:var(--denim);fill:none}.s-white{stroke:var(--white);fill:none}.s-warm{stroke:var(--warm);fill:none}.s-brick{stroke:var(--brick);fill:none}
.s-mud{stroke:var(--mud);fill:none}.s-mud2{stroke:var(--mud-2);fill:none}.s-bamboo2{stroke:var(--bamboo-2);fill:none}.s-cement{stroke:var(--cement);fill:none}
.hand{font-family:var(--f-hand)}.disp{font-family:var(--f-display)}
.st-warm{stop-color:var(--warm)}.st-glow{stop-color:var(--glow)}.st-dream{stop-color:var(--dream)}.st-dream2{stop-color:var(--dream-2)}
.st-sunset{stop-color:var(--sunset)}.st-skyout{stop-color:var(--sky-out)}.st-mud{stop-color:var(--mud)}.st-mud2{stop-color:var(--mud-2)}

/* ---------- 动效机制 ----------
   .en  入场动画：只在所在章节 .armed 时挂上，画面进入视口加 .play 才开始跑；没有脚本时直接显示终态。
   .amb 常驻微动：所在段落离开视口即暂停。
   .fx  交互动画。 */
.en,.amb,.fx{transform-box:fill-box}
.armed:not(.play) .en{animation-play-state:paused!important}
.sec:not(.inview) .amb{animation-play-state:paused}
.rm .en,.rm .amb,.rm .fx{animation:none!important}
@media (prefers-reduced-motion:reduce){.en,.amb,.fx{animation:none!important}}

/* 第一屏 */
.door{transform-origin:0 50%;transform:scaleX(.24)}
.armed .door{animation:door-open calc(var(--beat)*1.5) cubic-bezier(.3,.7,.3,1) both}
@keyframes door-open{from{transform:scaleX(1)}to{transform:scaleX(.24)}}
.armed .kid-run{animation:kid-run calc(var(--beat)*3) cubic-bezier(.25,.6,.3,1) calc(var(--beat)*1) both}
@keyframes kid-run{from{transform:translateX(-560px)}to{transform:none}}
.leg{transform-origin:50% 0}
.armed .leg-a{animation:leg-a var(--beat) linear calc(var(--beat)*1) 3 both}
.armed .leg-b{animation:leg-b var(--beat) linear calc(var(--beat)*1) 3 both}
@keyframes leg-a{0%,100%{transform:rotate(0)}25%{transform:rotate(28deg)}75%{transform:rotate(-28deg)}}
@keyframes leg-b{0%,100%{transform:rotate(0)}25%{transform:rotate(-28deg)}75%{transform:rotate(28deg)}}
.bag-drop{transform-origin:50% 100%}
.armed .bag-drop{animation:bag-drop calc(var(--beat)*2) ease-out calc(var(--beat)*1.5) both}
@keyframes bag-drop{0%{transform:translate(120px,-170px) rotate(-50deg);opacity:0}10%{opacity:1}55%{transform:translate(0,0) rotate(10deg)}72%{transform:translate(0,-18px) rotate(-5deg)}86%{transform:translate(0,0) rotate(2deg)}100%{transform:none;opacity:1}}
.amb-patch{animation:patch calc(var(--beat)*16) ease-in-out infinite alternate}
@keyframes patch{from{transform:translateX(-10px);opacity:.75}to{transform:translateX(22px);opacity:1}}
.amb-cloud{animation:cloud calc(var(--beat)*24) linear infinite alternate}
@keyframes cloud{from{transform:translateX(-20px)}to{transform:translateX(60px)}}
.amb-note{transform-origin:50% 0;animation:note calc(var(--beat)*4) ease-in-out infinite alternate}
@keyframes note{from{transform:rotate(-3deg)}to{transform:rotate(4deg)}}
.amb-bulb{transform-origin:50% 0;animation:note calc(var(--beat)*6) ease-in-out infinite alternate}
.amb-peck{transform-origin:20% 90%;animation:peck calc(var(--beat)*2) ease-in-out infinite}
@keyframes peck{0%,40%,100%{transform:rotate(0)}55%{transform:rotate(28deg)}70%{transform:rotate(0)}80%{transform:rotate(24deg)}}
.amb-smoke{transform-origin:50% 100%;animation:smoke calc(var(--beat)*6) ease-in-out infinite}
@keyframes smoke{0%{transform:translateY(4px) scaleY(.8);opacity:.1}40%{opacity:.75}100%{transform:translateY(-10px) scaleY(1.1);opacity:0}}
.amb-led{animation:led calc(var(--beat)*4) ease-in-out infinite}
@keyframes led{0%,100%{opacity:.25}50%{opacity:1}}
.tv.on .amb-led{animation:none;fill:var(--soda);opacity:1}
.tv-on{opacity:0;transition:opacity .15s}
.tv.on .tv-on{opacity:1}
.crt{transform-origin:50% 50%}
.tv.on .crt{animation:crt calc(var(--beat)*.8) cubic-bezier(.2,.8,.2,1) both}
@keyframes crt{0%{transform:scale(1.03,.02)}40%{transform:scale(1,.05)}75%{transform:scale(1,1.04)}100%{transform:none}}
.tv .show{opacity:0;transition:opacity .5s}
.tv.showing .show{opacity:1}
.bob{transform-origin:50% 100%}
.tv.showing .bob{animation:bob calc(var(--beat)/2) ease-in-out infinite alternate}
@keyframes bob{from{transform:translateY(0) scaleY(1)}to{transform:translateY(-8px) scaleY(1.04)}}
.bike-bell{transform-origin:50% 50%}
.bike-bell.ring{animation:ring .12s ease-in-out 6 alternate}
@keyframes ring{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}

/* 第二屏 */
.chalk{stroke-dasharray:1;stroke-dashoffset:0}
.armed .chalk{animation:draw calc(var(--beat)*4) ease-in-out calc(var(--beat)*.5) both}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.armed .jump{animation:jump calc(var(--beat)*1.5) cubic-bezier(.3,.6,.4,1) both}
.armed .j1{animation-delay:calc(var(--beat)*1)}.armed .j2{animation-delay:calc(var(--beat)*1.5)}.armed .j3{animation-delay:calc(var(--beat)*2)}
@keyframes jump{0%{transform:translate(-130px,40px);opacity:0}15%{opacity:1}55%{transform:translate(-40px,-60px)}80%{transform:translate(0,4px)}100%{transform:none;opacity:1}}
.amb-sheet{transform-origin:50% 0;animation:sheet calc(var(--beat)*4) ease-in-out infinite}
@keyframes sheet{0%,100%{transform:skewX(0) scaleY(1)}30%{transform:skewX(-7deg) scaleY(.96)}65%{transform:skewX(4deg) scaleY(1.01)}}
.amb-shirt{transform-origin:50% 0;animation:sheet calc(var(--beat)*5) ease-in-out infinite reverse}
.amb-stick{transform-origin:0 100%;animation:stick calc(var(--beat)*2) ease-in-out infinite alternate}
@keyframes stick{from{transform:rotate(-10deg)}to{transform:rotate(18deg)}}
.amb-tail{transform-origin:100% 100%;animation:tail calc(var(--beat)/2) ease-in-out infinite alternate}
@keyframes tail{from{transform:rotate(-18deg)}to{transform:rotate(22deg)}}
.amb-leaves{transform-origin:50% 100%;animation:leaves calc(var(--beat)*6) ease-in-out infinite alternate}
@keyframes leaves{from{transform:rotate(-1.5deg)}to{transform:rotate(1.5deg)}}
.amb-birds{animation:birds calc(var(--beat)*32) linear infinite}
@keyframes birds{from{transform:translateX(-120px)}to{transform:translateX(220px)}}
.amb-cape{transform-origin:50% 0;animation:sheet calc(var(--beat)*2) ease-in-out infinite}
.imagine-layer{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;border-radius:16px;
  clip-path:circle(0% at var(--cx,75%) var(--cy,60%));transition:clip-path calc(var(--beat)*2) cubic-bezier(.6,0,.3,1)}
.dream .imagine-layer{clip-path:circle(150% at var(--cx,75%) var(--cy,60%))}
.rm .imagine-layer{transition:none}
.amb-twinkle{animation:twinkle calc(var(--beat)*3) ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}
.amb-flag{transform-origin:0 50%;animation:flag calc(var(--beat)) ease-in-out infinite alternate}
@keyframes flag{from{transform:scaleX(1) skewY(0)}to{transform:scaleX(.82) skewY(6deg)}}


/* 第三屏 */
.armed .tape-in{animation:tape-in calc(var(--beat)*2) cubic-bezier(.3,.7,.2,1) calc(var(--beat)*.5) both}
@keyframes tape-in{0%{transform:translateY(-200px);opacity:0}20%{opacity:1}85%{transform:translateY(5px)}100%{transform:none;opacity:1}}
.armed .key-play{animation:keypress calc(var(--beat)*.6) ease calc(var(--beat)*2.7) both}
@keyframes keypress{0%,100%{transform:none}50%{transform:translateY(7px)}}
.vu rect{fill:#2b3d33}
.vu rect.lit{fill:var(--soda)}
.vu rect.hi.lit{fill:var(--warm)}
.vu rect.top.lit{fill:var(--brick)}
.pencil-w{transform-origin:50% 50%}
.pencil-w.wiggle{animation:wiggle .2s ease-in-out 6 alternate}
@keyframes wiggle{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
.keys{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.key{font-family:var(--f-hand);font-size:17px;background:var(--board);color:var(--paper);border:0;border-radius:8px;padding:10px 18px;min-height:44px;
  box-shadow:0 5px 0 var(--board-2);cursor:pointer;transition:transform .08s,box-shadow .08s}
.key:active,.key[aria-pressed="true"]{transform:translateY(4px);box-shadow:0 1px 0 var(--board-2)}
.key:disabled{opacity:.45;cursor:default}
.key.rec{background:var(--brick);box-shadow:0 5px 0 #7d2f26}
.caption{min-height:3.4em;margin:14px 0 0;font-family:var(--f-hand);font-size:18px;color:var(--text-soft)}

/* 第四屏 */
.page-l{transform-origin:100% 50%}
.armed .page-l{animation:page-open calc(var(--beat)*1.5) cubic-bezier(.3,.7,.3,1) both}
@keyframes page-open{from{transform:scaleX(0)}to{transform:none}}
.armed .roll{animation:roll calc(var(--beat)*2.5) cubic-bezier(.2,.7,.3,1) calc(var(--beat)*1) both}
@keyframes roll{from{transform:translateX(520px)}to{transform:none}}
.armed .crumb{animation:crumb calc(var(--beat)*1.2) ease-out calc(var(--beat)*2.5) both}
@keyframes crumb{from{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}to{transform:none;opacity:1}}
.armed .lean{animation:lean calc(var(--beat)*2) ease-out calc(var(--beat)*3) both}
@keyframes lean{from{transform:translateY(-80px)}to{transform:none}}
.amb-stache{stroke-dasharray:1;animation:stache calc(var(--beat)*8) ease-in-out infinite}
@keyframes stache{0%{stroke-dashoffset:1;opacity:1}30%{stroke-dashoffset:0}82%{stroke-dashoffset:0;opacity:1}94%{opacity:0}100%{stroke-dashoffset:1;opacity:0}}
.flip-corner{transform-origin:100% 100%}
.flip-corner.lift{animation:corner .22s ease-in-out 6 alternate}
@keyframes corner{from{transform:none}to{transform:scale(1.35)}}
.note-pop{position:absolute;left:2%;bottom:36%;width:min(270px,64%);z-index:4;background:var(--note);color:var(--ink);font-family:var(--f-hand);font-size:19px;line-height:1.5;
  padding:14px 16px;border-radius:4px;box-shadow:4px 4px 0 #33281d55;transform:rotate(-3deg)}
.note-pop small{display:block;font-size:14px;opacity:.7;margin-top:4px}

/* 第五屏 */
.armed .lamp-glow{animation:lamp-on calc(var(--beat)*2) linear calc(var(--beat)*1) both}
@keyframes lamp-on{0%{opacity:0}12%{opacity:.7}18%{opacity:.25}30%{opacity:.85}36%{opacity:.6}55%,100%{opacity:1}}
.amb-fan{transform-origin:50% 50%;animation:fan-osc calc(var(--beat)*8) ease-in-out infinite alternate}
@keyframes fan-osc{from{transform:scaleX(1)}to{transform:scaleX(.5)}}
.amb-blades{transform-origin:50% 50%;animation:spin .45s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.amb-beam{animation:beam calc(var(--beat)*6) ease-in-out infinite}
@keyframes beam{0%,100%{opacity:.7}22%{opacity:.85}40%{opacity:.62}63%{opacity:.9}82%{opacity:.72}}
.amb-eyelid{transform-origin:50% 0;transform:scaleY(0);animation:droop calc(var(--beat)*12) ease-in-out infinite}
@keyframes droop{0%,30%{transform:scaleY(0)}52%{transform:scaleY(.85)}58%{transform:scaleY(.1)}80%,92%{transform:scaleY(.9)}100%{transform:scaleY(0)}}
.amb-window{animation:winlight calc(var(--beat)*16) steps(1) infinite}
@keyframes winlight{0%,45%{opacity:1}46%,100%{opacity:.15}}
.ending{font-family:var(--f-display);font-size:clamp(22px,2.6vw,30px);color:var(--accent);margin:6px 0 0}
.replay{font-family:var(--f-hand);font-size:19px;background:var(--gold);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:10px 26px;min-height:48px;cursor:pointer;box-shadow:4px 4px 0 #0006}
.replay:active{transform:translate(3px,3px);box-shadow:1px 1px 0 #0006}

/* 童年卡片 */
.lay-card{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,5vw,72px);align-items:center}
@media (max-width:820px){.lay-card{grid-template-columns:1fr}}
.checks{border:0;margin:0;padding:0;display:grid;gap:8px}
.check{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1.5px solid var(--pill-line);border-radius:10px;cursor:pointer;font-size:16px;min-height:44px;box-sizing:border-box}
.check input{width:22px;height:22px;accent-color:var(--accent);flex:none;margin:0}
.check small{margin-left:auto;font-family:var(--f-hand);color:var(--text-soft);font-size:14px}
.check:has(input:checked){border-color:var(--accent)}
.year{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--text-soft)}
.year select{background:transparent;border:1.5px solid var(--pill-line);border-radius:8px;padding:6px 10px;color:var(--text)}
.year select option{color:#33281d;background:#fff8ea}
.card-out{margin:0;justify-self:center;width:100%;max-width:380px}
.card-out img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 18px 40px #0007;transform:rotate(-1.5deg)}
.card-out figcaption{font-family:var(--f-hand);color:var(--text-soft);font-size:15px;text-align:center;margin-top:16px}

/* 页脚 */
.foot{padding-block:8px 120px;font-size:13px;color:var(--text-soft)}
.foot p{margin:0 0 4px;max-width:44em}

/* ---------- 底部：导航与声音 ---------- */
.dock{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:20;
  display:flex;align-items:center;gap:6px;padding:6px 10px 6px 8px;background:var(--pill);border:1px solid var(--pill-line);border-radius:999px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);max-width:calc(100vw - 24px);box-sizing:border-box;color:var(--text);
  transition:background-color calc(var(--beat)*2),color calc(var(--beat)*2)}
.dots{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.dot{width:34px;height:34px;border-radius:50%;border:0;background:transparent;cursor:pointer;font-family:var(--f-display);font-size:16px;color:var(--text-soft);padding:0}
.dot[aria-current="true"]{background:var(--accent);color:var(--page)}
.sep{width:1px;height:22px;background:var(--pill-line)}
.music{display:flex;align-items:center;gap:8px;border:0;background:transparent;cursor:pointer;padding:6px 8px;border-radius:999px;font-size:14px;white-space:nowrap;min-height:36px}
.eq{display:flex;align-items:flex-end;gap:2px;height:14px}
.eq i{width:3px;height:5px;background:currentColor;border-radius:1px}
.bgm-on .eq i{animation:eq calc(var(--beat)/2) ease-in-out infinite alternate}
.bgm-on .eq i:nth-child(2){animation-delay:-.15s}.bgm-on .eq i:nth-child(3){animation-delay:-.3s}
@keyframes eq{from{height:3px}to{height:14px}}
.rm .eq i{animation:none!important}
.vol{display:flex;align-items:center}
.vol input{width:84px;accent-color:var(--accent)}
@media (max-width:420px){.mlabel{display:none}.vol input{width:60px}.dot{width:30px;height:30px}}