:root{font-family:"Songti SC","STSong","Noto Serif CJK SC","SimSun",serif;color:#482c1d;background:#17120d;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100svh;display:grid;place-items:center;background:radial-gradient(ellipse at center,#453320,#17120d 65%)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0}button:focus-visible,a:focus-visible{outline:2px solid #df9c4a;outline-offset:4px}button:disabled{opacity:.6}img{display:block;max-width:100%;user-select:none;-webkit-user-drag:none}#app{width:min(100vw,calc(94svh * 6 / 13));height:94svh;max-width:520px;position:relative;overflow:hidden;container-type:inline-size;border:1px solid #a88b61;border-radius:18px;box-shadow:0 18px 100px #0009;background:#f9e5c2}.page{height:100%;width:100%;display:flex;flex-direction:column;align-items:center;position:relative;padding:5cqw 6cqw 6cqw;background-size:cover;background-position:center;isolation:isolate;overflow:hidden;outline:none}.light .page{background-image:url('../assets/01_浅色纸纹背景.png')}.dark .page{background-image:linear-gradient(#0d0805aa,#160b06aa 30%,#21140d33 75%,#160d08aa),url('../assets/02_深色木桌背景.png');color:#f2d8a1}.topbar{width:100%;height:8cqw;display:flex;align-items:center;justify-content:space-between;font-family:system-ui,sans-serif;font-size:2.5cqw;letter-spacing:.15em;margin-bottom:3cqw;opacity:.8}.back{font-family:serif;font-size:9cqw;width:10cqw;height:10cqw;background:none;text-align:left;line-height:1}.chapter-mark{color:#b51d18;border:1px solid #b51d18;padding:1cqw 1.8cqw;font-family:serif}.chapter-name{letter-spacing:.28em;font-family:serif}.page-1 .chapter-name{visibility:hidden}.page-1 .topbar{margin-bottom:5cqw}.heading{text-align:center;flex-shrink:0;animation:rise .7s .12s both}.heading h1{font-weight:500;font-size:7.5cqw;letter-spacing:.1em;margin:2cqw 0;line-height:1.3}.light .heading h1{color:#be2017}.heading p{font-size:3.9cqw;line-height:1.8;margin:0;letter-spacing:.05em}.eyebrow{font-size:2.9cqw;letter-spacing:.16em;color:#ae4833;margin:0 0 3cqw}.dark .eyebrow{color:#d8ad64}.hero{position:relative;width:calc(100% + 7cqw);flex:1;min-height:0;display:flex;align-items:center;justify-content:center}.hero>img{width:100%;height:100%;object-fit:contain}.cutout{background:none;mix-blend-mode:multiply;width:100%;margin:2cqw 0;padding:0;animation:paper-enter 1.2s .25s both}.home-bottom{width:100%;text-align:center;flex-shrink:0;animation:rise .7s .5s both}.home-bottom p{font-size:4.4cqw;line-height:1.8;margin:0 0 4cqw}.home-bottom small{display:block;margin-top:3cqw;font-size:2.4cqw;color:#ac5c41;letter-spacing:.08em}.page-1 .heading h1{font-size:11cqw;letter-spacing:.08em;margin-bottom:1cqw}.page-1 .heading p{color:#ae271c;font-size:4.5cqw}.primary,.secondary{width:100%;min-height:11cqw;border-radius:8cqw;padding:2.7cqw 3cqw;font-size:3.9cqw;letter-spacing:.07em;display:flex;align-items:center;justify-content:center;gap:2cqw;text-decoration:none;line-height:1.3;transition:transform .2s;flex-shrink:0}.primary{color:#fff0d7;background:linear-gradient(110deg,#e33a28,#b91514);border:1px solid #ed8a61;box-shadow:inset 0 1px 5px #ffe4bb4d,0 3px 12px #8b18081a}.secondary{background:linear-gradient(#504d3dcc,#25251ecc);border:1px solid #b9a883;color:#f2e5c5}.primary b{margin-left:3cqw;font-family:system-ui;font-weight:400}button:active{transform:scale(.975)}footer{width:100%;margin-top:4cqw;flex-shrink:0}.two-actions{display:flex;gap:2cqw}.two-actions .secondary{width:43%}.two-actions .primary{width:57%}.hint{font-size:2.7cqw;line-height:1.6;text-align:center;opacity:.75;display:block;margin:2cqw 0}.angle-view{touch-action:pan-y;margin:3cqw 0}.angle-image{animation:angle-in .4s ease-out}.thumbnails{width:100%;display:flex;gap:2cqw;flex-shrink:0}.thumbnail{flex:1;min-width:0;padding:0;border-radius:1.5cqw;border:1px solid #b295625c;background:#20150db3;overflow:hidden}.thumbnail img{width:100%;aspect-ratio:1;object-fit:contain}.thumbnail span{display:block;font-size:3.2cqw;line-height:1.6;padding:1cqw 0}.thumbnail.selected{border-color:#f7d09a;background:#f9dbaa;color:#582b18}.round{margin:3cqw 0;padding:1cqw 4cqw;border:1px solid #cf6540;border-radius:5cqw;color:#a73723;font-size:3cqw}.verse{display:flex;align-items:center;width:100%;border:1px solid #dea468;border-radius:5cqw;padding:3cqw;gap:3cqw;background:#fff5df82;flex-shrink:0}.verse p{margin:0;font-size:4.5cqw;line-height:1.6;flex:1;text-align:center}.audio-button{gap:1.5cqw}.verse .audio-button{width:12cqw;height:12cqw;min-height:0;border-radius:100%;padding:0;font-size:7cqw;background:#fbcf9580;color:#d22a18;flex-shrink:0}.verse .audio-button span{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}.playing{animation:audio-pulse 1.2s infinite}.question{font-size:4cqw;text-align:center;line-height:1.6;margin:3cqw 0 0;flex-shrink:0}.quiz-bowl{width:100%;flex:1;min-height:0;display:flex;align-items:center}.bowl-stack{position:relative;width:100%;aspect-ratio:1}.quiz-bowl .bowl-stack{height:100%;max-height:78cqw;aspect-ratio:1;width:auto;margin:auto}.bowl-base{height:100%;width:100%;object-fit:contain}.in-bowl{position:absolute;width:25%;top:48%;filter:drop-shadow(0 3px 3px #43100070)}.fruit-0{left:23%;z-index:2}.fruit-1{left:42%;top:50%;z-index:3}.fruit-2{left:59%;top:43%;width:27%;z-index:1}.bowl-rim{position:absolute;inset:0;z-index:4;clip-path:polygon(0 64%,15% 68%,30% 70%,50% 71%,70% 70%,85% 68%,100% 64%,100% 100%,0 100%);pointer-events:none}.bowl-rim img{width:100%;height:100%}.drop{animation:fruit-drop .85s cubic-bezier(.2,.65,.35,1) both}.fruit-options{width:100%;display:flex;gap:2.5cqw;flex-shrink:0}.fruit-option{width:calc(100% / 3);border:1px solid #ddb68b;background:#fff4df9e;padding:2.3cqw;border-radius:4cqw;display:flex;flex-direction:column;align-items:center;gap:1cqw;font-size:3.7cqw}.fruit-option img{width:100%;height:22cqw;object-fit:contain}.fruit-option.correct{border:2px solid #bd211b;background:#f9d8a3}.wrong{animation:shake .5s}.message{font-size:2.9cqw;min-height:7cqw;padding-top:2cqw;text-align:center;color:#a32017;line-height:1.4}.explanation{font-size:3.6cqw;text-align:center;line-height:1.8;margin:5cqw 2cqw 0;max-width:82%;color:#e5c894;flex-shrink:0}.reward .bowl-stack{width:100%;max-height:100%;aspect-ratio:1}.collected{display:flex;gap:4cqw;font-size:3.2cqw}.collected span{opacity:.35}.collected .obtained{opacity:1;color:#f4d6a5}.page-4 .heading h1{font-size:9cqw}.full-bowl{animation:pull-in .9s}.meaning-cards{display:flex;gap:3cqw;width:90%;flex-shrink:0;margin-top:4cqw}.meaning-cards button{flex:1;position:relative;border-radius:4cqw;background:#f5dbaf;color:#a92b1d;padding:7cqw 2cqw 3cqw;font-size:4.4cqw;line-height:1.5;border:1px solid #d98d42}.meaning-cards img{position:absolute;width:13cqw;height:13cqw;object-fit:contain;top:-7cqw;left:50%;transform:translateX(-50%)}.meaning-cards .selected{outline:2px solid #edbc60}.meaning-note{font-size:3.2cqw;text-align:center;min-height:5cqw;margin:3cqw 0 0}.fruit-hit{position:absolute;background:none;z-index:2;width:23%;height:23%;border-radius:50%}.hit-0{top:35%;left:18%}.hit-1{top:45%;left:43%}.hit-2{top:30%;left:70%}.pattern-scene{position:relative;width:calc(100% + 8cqw);margin:auto 0;aspect-ratio:1;flex-shrink:1;min-height:0}.pattern-scene>img{width:100%;height:100%;object-fit:contain}.hotspot{position:absolute;transform:translate(-50%,-50%);width:10cqw;height:10cqw;border-radius:50%;border:1px solid #ffe5b6;background:#d79a5260;display:grid;place-items:center;box-shadow:0 0 0 1.7cqw #fff2c52d;animation:hotspot-breathe 2.5s infinite}.hotspot span{display:block;width:5cqw;height:5cqw;border-radius:50%;background:#f6d8a0aa;border:2px solid #fff4d5;font-size:3cqw;color:#681d10;line-height:4cqw}.hotspot.visited{animation:none;background:#f4cf75}.exploration-note{font-size:3cqw;margin:3cqw 0}.detail-image{position:relative;margin:0 -6cqw;width:calc(100% + 12cqw);flex:1;min-height:0;background:none;padding:0;overflow:hidden}.detail-image img{width:100%;height:100%;object-fit:cover}.detail-image span{position:absolute;bottom:3cqw;right:4cqw;padding:1.5cqw 3cqw;background:#21110599;border-radius:4cqw;font-size:2.9cqw;color:#fff0cc}.detail-copy{flex-shrink:0;margin:3cqw 0 2cqw;width:100%}.detail-copy .eyebrow{font-size:2.6cqw;margin:0}.detail-copy h1{font-weight:400;font-size:6cqw;margin:1.5cqw 0}.detail-copy p{font-size:3.5cqw;line-height:1.9;margin:1cqw 0 3cqw}.audio-row{display:flex;gap:2cqw}.replay{border-radius:50%;width:11cqw;flex-shrink:0;border:1px solid #b99866;background:#322119;color:#f3d99e;font-size:6cqw}.page-7 .thumbnail img{height:13cqw;aspect-ratio:auto;object-fit:cover}.page-7 .thumbnail span{font-size:2.8cqw;padding:.7cqw}.page-7 footer{margin-top:2cqw}.page-7 footer button{min-height:9cqw;font-size:3.4cqw}.selection-bowl{margin:2cqw 0;min-height:0}.blessings{display:flex;flex-direction:column;gap:2.5cqw;width:100%;flex-shrink:0}.blessing{border:1px solid #d9ae81;background:#fff4dd9c;border-radius:4cqw;padding:3.3cqw 4cqw;font-size:3.6cqw;text-align:left;color:#a5533c;display:flex;align-items:center;justify-content:space-between}.blessing.selected{border:1.5px solid #c72117;color:#ad2018;background:#fff0cd}.blessing span{width:4.5cqw;height:4.5cqw;line-height:4.5cqw;text-align:center;border-radius:50%;background:#be2017;color:#fff0d4;font-family:system-ui;font-size:2.7cqw}.blessing:not(.selected) span{background:none}.card-preview{width:100%;min-height:0;flex:1;background:url('../assets/16_祝福卡边框背景.png') center/100% 100%;border-radius:3cqw;display:flex;flex-direction:column;align-items:center;padding:11cqw 6cqw 8cqw;color:#b3251a}.card-preview .eyebrow{font-size:2.8cqw;margin:0 0 2cqw}.card-preview h1{font-weight:500;font-size:8.5cqw;margin:0}.card-sub{font-size:3.4cqw;margin:1.5cqw 0}.card-cut{width:100%;flex:1;min-height:0;object-fit:contain;mix-blend-mode:multiply;margin:1cqw 0}.card-verse{font-size:5cqw;line-height:1.6;margin:3cqw 0 5cqw;text-align:center;letter-spacing:.08em}.card-credit{font-size:2.6cqw;margin:0;letter-spacing:.1em}.card-actions{display:flex;flex-wrap:wrap;gap:2cqw;margin-top:1cqw}.card-actions .primary{width:55%;font-size:3.4cqw}.card-actions .secondary{width:calc(45% - 2cqw);font-size:3.4cqw}.text-button{width:100%;min-height:7cqw;background:none;font-size:3cqw}.page-9 .topbar{margin-bottom:1cqw}.completion{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.seal{width:17cqw;height:17cqw;background:#f6dfb1;border-radius:50%;padding:2cqw;margin-bottom:6cqw}.seal svg{width:100%;height:100%}.seal path{stroke:#a22519;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;fill:none;stroke-dasharray:60;animation:draw-check 1s both}.completion .heading h1{font-size:6.4cqw}.completion>p{font-size:3.7cqw;line-height:2.3;margin:4cqw 0 0;animation:rise 1s .3s both}.finish-actions{display:flex;flex-direction:column;gap:4cqw;margin-bottom:4cqw}.page-line{display:flex;gap:1.5cqw;justify-content:center;margin-top:4cqw;width:100%;flex-shrink:0}.page-line i{height:1px;width:3cqw;background:currentColor;opacity:.18}.page-line .active{width:6cqw;opacity:.65}.modal-overlay{position:absolute;inset:0;background:#140a07bb;z-index:30;display:flex;align-items:center;justify-content:center;padding:6cqw;backdrop-filter:blur(6px)}.modal{width:100%;max-height:94%;overflow:auto;position:relative;border:1px solid #d7ae77;border-radius:5cqw;padding:10cqw 6cqw 7cqw;background:#fff0d4;color:#5b3322;box-shadow:0 4cqw 20cqw #0005}.modal h2{font-size:6cqw;font-weight:400;color:#aa2419;line-height:1.5;margin:0 0 3cqw}.modal p{font-size:3.8cqw;line-height:1.9;margin:2cqw 0}.modal small{font-size:2.9cqw;line-height:1.8;display:block;color:#886750}.close{position:absolute;top:2cqw;right:2cqw;width:10cqw;height:10cqw;border-radius:50%;background:none;font-family:system-ui;font-size:7cqw;z-index:5}.zoom-modal{padding:12cqw 2cqw 4cqw;background:#21140e;color:#f7dbae}.zoom-stage{height:95cqw;width:100%;overflow:hidden;touch-action:none;display:flex;align-items:center;justify-content:center}.zoom-image{width:100%;height:100%;object-fit:contain;pointer-events:none;will-change:transform}.zoom-controls{display:flex;gap:2cqw;margin:3cqw 4cqw 0}.zoom-controls button{font-size:4cqw}.zoom-instructions{font-size:3cqw!important;text-align:center}.export-modal{padding-top:10cqw;text-align:center}.export-image{width:70%;margin:4cqw auto;user-select:auto;-webkit-touch-callout:default}.export-modal p{font-size:3cqw}.download-link{margin-top:4cqw}.arriving{animation:page-enter .5s both}.leaving{pointer-events:none;animation:page-exit .35s both}.leaving.morph{animation:morph-exit .65s both}.leaving.morph .cutout{animation:morph-cut .65s both}.arriving.morph .angle-image{animation:materialize .9s both}.leaving.push .hero,.leaving.push .pattern-scene{transition:transform .33s;transform:scale(1.25)}.arriving.push .detail-image{animation:detail-enter .7s both}.arriving.card-turn .card-preview{animation:card-reveal .7s both}.paper-float{animation:paper-float .7s!important}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes paper-enter{from{opacity:0;transform:scale(.9) rotate(-2deg)}to{opacity:1;transform:none}}@keyframes paper-float{50%{transform:translateY(-8px) rotate(1deg)}to{transform:none}}@keyframes angle-in{from{opacity:.3;transform:translateX(12px)}to{opacity:1;transform:none}}@keyframes fruit-drop{0%{opacity:0;transform:translateY(-65%) scale(.9)}65%{opacity:1;transform:translateY(3%) scale(1.015)}100%{opacity:1;transform:none}}@keyframes shake{25%,75%{transform:translateX(-5px)}50%{transform:translateX(5px)}}@keyframes audio-pulse{50%{box-shadow:0 0 0 1.4cqw #d2602525}}@keyframes hotspot-breathe{50%{box-shadow:0 0 0 2.7cqw #fff2c509}}@keyframes pull-in{from{transform:scale(1.12);opacity:.4}to{transform:none;opacity:1}}@keyframes draw-check{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}@keyframes page-enter{from{opacity:.2;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes page-exit{to{opacity:0;transform:translateY(-8px)}}@keyframes morph-exit{to{opacity:0}}@keyframes morph-cut{to{transform:scale(1.5);filter:blur(2px)}}@keyframes materialize{from{transform:scale(.8);opacity:.2}to{transform:none;opacity:1}}@keyframes detail-enter{from{transform:scale(1.12);opacity:.3}to{transform:none;opacity:1}}@keyframes card-reveal{from{opacity:0;transform:perspective(700px) rotateY(14deg) scale(.94)}to{opacity:1;transform:none}}
@media(max-width:600px){#app{width:100vw;height:100svh;max-width:600px;border:0;border-radius:0;box-shadow:none}.page{padding-top:max(3cqw,env(safe-area-inset-top));padding-bottom:max(4cqw,env(safe-area-inset-bottom))}}@media(max-height:700px) and (max-width:600px){.heading h1{font-size:6.5cqw}.heading p{font-size:3.5cqw}.topbar{height:6cqw;margin-bottom:1cqw}.page-1 .topbar{margin-bottom:1cqw}.page-1 .heading h1{font-size:9cqw}.home-bottom p{font-size:3.9cqw;margin-bottom:2cqw}.primary,.secondary{min-height:10cqw}.page-line{margin-top:2cqw}.verse{padding:2cqw}.question{font-size:3.5cqw;margin-top:2cqw}.round{margin:2cqw 0}.fruit-option img{height:17cqw}.detail-copy p{font-size:3.2cqw;line-height:1.7}.card-preview{padding-top:8cqw}.card-verse{margin:2cqw 0}.blessing{padding:2.5cqw 3cqw}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.hotspot:active{transform:translate(-50%,-50%) scale(.975)}
/* 主体与热点共用实际方形图像区域，短屏也不改变归一化坐标。 */
.pattern-scene{width:min(96cqw,calc(100svh - 102cqw));flex-shrink:0}
.reward .bowl-stack{height:100%;width:auto;max-width:100%;max-height:96cqw;aspect-ratio:1}
.topbar-right{display:flex;align-items:center;gap:2cqw}.music-toggle{display:flex;align-items:center;gap:1cqw;min-width:19cqw;min-height:11.3cqw;padding:1cqw 1.8cqw;border:1px solid #b969424d;border-radius:6cqw;background:#f9e1b670;color:#aa3023;letter-spacing:0;font-size:2.5cqw}.dark .music-toggle{border-color:#e0bd7770;background:#271c12aa;color:#f4d49a}.music-icon{font-family:serif;font-size:5cqw;width:5cqw;line-height:1}.music-on .music-icon{animation:music-sway 1.8s ease-in-out infinite}.page-1 .chapter-name{display:none}.topbar{flex-shrink:0;opacity:1}.topbar .page-counter{font-size:2.3cqw}.chapter-name{font-size:2.5cqw}@keyframes music-sway{50%{transform:rotate(15deg)}to{transform:rotate(0)}}