:root{color-scheme:dark;--cream:#fff1d4;--ink:#4c2a21;--gold:#ecc184;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#201713}body{display:flex;justify-content:center;overflow:hidden;font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible{outline:3px solid #fff4c8;outline-offset:5px}button:disabled{cursor:default}button[hidden],[hidden]{display:none!important}#stage{position:relative;isolation:isolate;width:100%;max-width:500px;height:100vh;height:100dvh;overflow:hidden;background:#3b241b;box-shadow:0 0 100px #0008;container-type:inline-size}#world{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}#vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(#1f100b52,transparent 18%,transparent 78%,#1c100979)}
#toolbar{position:absolute;z-index:20;top:calc(var(--safe-top) + 12px);left:16px;right:16px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--cream)}#chapter{font-size:13px;letter-spacing:3px;text-shadow:0 1px 4px #0009;flex:1}#stage[data-scene=cover] #chapter,#stage[data-scene=opening] #chapter{opacity:0}.tool-group{display:flex;gap:6px}.tool{position:relative;border:1px solid #f5deb539;background:#281b168a;color:var(--cream);width:44px;height:44px;border-radius:50%;font-size:21px;line-height:1;display:grid;place-items:center;backdrop-filter:blur(5px)}#back{font-size:32px}.slash{position:absolute;width:22px;height:1px;background:var(--cream);transform:rotate(-45deg)}#sound[aria-pressed=true] .slash{display:none}
#book{position:absolute;width:83%;aspect-ratio:3/4;left:8.5%;top:24%;transform:rotate(-6deg);perspective:1300px;filter:drop-shadow(8px 18px 3px #2b160666);transition:opacity .8s,transform 1.5s cubic-bezier(.22,.6,.2,1);z-index:2}.pages{position:absolute;inset:8% 2% 5% 5%;padding:8px;background:#f3d9a4;border:3px solid #d7b378;box-shadow:2px 3px #dfc59a,4px 6px #907246;overflow:hidden}.pages canvas{display:block;width:100%;height:88%;object-fit:cover;image-rendering:pixelated}.pages>span{display:block;text-align:center;color:#6a3b24;font-size:16px;padding-top:4px;letter-spacing:5px}#cover{position:absolute;inset:0;background:none;border:0;padding:0;transform-origin:5% 50%;transform-style:preserve-3d;transition:transform 1.55s cubic-bezier(.35,0,.22,1),opacity .5s;backface-visibility:hidden;color:#713520}#cover img{display:block;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}#cover .book-title{position:absolute;left:12%;right:5%;top:11%;font-family:"Songti SC","STSong",serif;font-size:clamp(24px,7cqw,34px);font-weight:bold;letter-spacing:3px}#cover .book-names{position:absolute;left:10%;right:3%;bottom:12%;font-family:Georgia,serif;font-weight:bold;letter-spacing:2px;font-size:clamp(14px,3.6cqw,19px)}.book-names i{font-style:normal;color:#af714c;padding:0 4px}#book.open #cover{transform:rotateY(-155deg)}#book.zooming{transform:rotate(0deg) scale(1.85);opacity:0;pointer-events:none}.pixel-star{position:absolute;right:5%;bottom:5%;color:#fff0ac;font-size:30px;opacity:0;text-shadow:0 0 12px #ffe6b3;pointer-events:none}#book.ready .pixel-star{animation:star 2.4s infinite}
#dialogue{position:absolute;z-index:5;left:7%;right:7%;top:calc(var(--safe-top) + 78px);padding:19px 22px 22px;color:var(--ink);background:#fff3db;border:3px solid #623623;box-shadow:4px 4px 0 #2a160b8c;animation:appear .4s both;min-height:135px}#dialogue p{font-size:clamp(18px,5cqw,23px);line-height:1.7;margin:5px 0 0;font-weight:600;white-space:pre-line;letter-spacing:.5px}.speaker{font-size:12px;font-weight:700;letter-spacing:2px;color:#9f6b48}.speech-tail{position:absolute;bottom:-14px;left:12%;width:22px;height:22px;background:#fff3db;border-right:3px solid #623623;border-bottom:3px solid #623623;transform:skewY(-35deg);clip-path:polygon(0 0,100% 0,0 100%)}#dialogue-cue{position:absolute;bottom:10px;right:13px;color:#a25d38;font-size:10px;animation:star 2s infinite}
#narration{position:absolute;z-index:5;top:calc(var(--safe-top) + 100px);left:4%;right:4%;text-align:center;color:#fff5df;text-shadow:0 2px 8px #1c100fe6;animation:narrative-in 1.8s both}#narration p{font-family:"Songti SC","STSong",serif;font-size:clamp(20px,5.5cqw,27px);font-weight:600;line-height:1.9;letter-spacing:2px;margin:0}#narration .last-line{margin-top:12px;font-size:clamp(28px,7.5cqw,37px);letter-spacing:5px;animation:narrative-in 2.4s .7s both}
#pot{position:absolute;left:25%;top:60%;width:35%;height:19%;border:0;background:transparent;z-index:3}#interaction{position:absolute;z-index:10;left:4%;right:4%;bottom:calc(var(--safe-bottom) + 22px);text-align:center;animation:appear .55s both}#next{min-height:52px;width:auto;max-width:100%;border:0;background:#281610a8;color:var(--cream);padding:12px 18px;border-radius:3px;font-size:16px;letter-spacing:1px;box-shadow:0 2px 0 #fff2d026;display:inline-flex;gap:10px;align-items:center;justify-content:center;transition:opacity .3s}#next:disabled{opacity:0;pointer-events:none}#stage[data-scene=cover] #next{background:transparent;box-shadow:none;text-shadow:0 2px 5px #3b1c0d;font-size:17px}.hint-star{color:#ffd390;font-size:20px;animation:star 2.4s infinite}.hand{display:none;font-size:19px}#interaction.nudge .hand{display:block;animation:tap 1.4s 2}#dots{height:15px;display:flex;gap:7px;justify-content:center;align-items:end;margin-top:4px}#dots i{width:4px;height:4px;background:#ffe5ba55}#dots i.active{background:#ffe5ba}
#end-card{position:absolute;z-index:25;inset:20% 8% 19%;background:#fff0d9f7;color:var(--ink);border:2px solid #9f7852;outline:6px solid #fff0d9da;padding:28px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:0 15px 50px #170d1599;animation:appear .5s both}.end-ornament{font-size:28px;color:#b77840}.eyebrow{font-size:14px;letter-spacing:4px;margin:12px 0}#end-card h1{font-family:"Songti SC",serif;font-size:30px;line-height:1.65;letter-spacing:3px;margin:8px 0}.end-note{color:#a27e5b;font-size:13px;letter-spacing:3px;margin-bottom:24px}.paper-button{min-height:46px;border:1px solid #9a6f4b;background:#f4dfbb;color:#663d26;padding:10px 26px;box-shadow:2px 2px 0 #b39870;font-size:16px}.quiet-button{margin-top:14px;border:0;background:transparent;color:#865f43;padding:9px 20px;font-size:14px}
#loading,#error,#paused{position:absolute;inset:0;z-index:50;background:#271b15;color:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:25px;gap:18px}#loading p{font-size:15px;letter-spacing:2px;line-height:2}.loading-heart{font-size:36px;color:#d65a4b;animation:tap 1.4s infinite}#load-progress{display:block;color:#bb9a75;font-size:12px}#paused{background:#24190de0;backdrop-filter:blur(5px)}#paused>span{letter-spacing:4px;margin-bottom:16px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.is-paused *{animation-play-state:paused!important}#book,#cover{will-change:transform}
@keyframes star{0%,100%{opacity:.3;transform:scale(.86)}50%{opacity:1;transform:scale(1)}}@keyframes tap{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}@keyframes appear{from{opacity:0;translate:0 7px}to{opacity:1;translate:0 0}}@keyframes narrative-in{from{opacity:0;filter:blur(5px);translate:0 14px}to{opacity:1;filter:blur(0);translate:0 0}}
@media(max-height:700px){#book{width:72%;left:14%;top:20%}#dialogue{top:calc(var(--safe-top) + 64px);min-height:115px;padding:13px 18px 18px}#dialogue p{font-size:18px;line-height:1.55}#narration{top:calc(var(--safe-top) + 77px)}#narration p{font-size:20px}#interaction{bottom:calc(var(--safe-bottom) + 10px)}#end-card{inset:16% 8% 15%}#end-card h1{font-size:26px}}
@media(min-width:700px){body{background:#000;align-items:center}#stage{width:393px;height:760px;max-width:none;flex:none;border-left:1px solid #ba805226;border-right:1px solid #ba805226}#chapter-memory{--photo-height:max(96px,min(calc(760px - 260px - var(--safe-top) - var(--safe-bottom)),122cqw))}#stage[data-scene=birthday-memory] #chapter-memory,#stage[data-scene=singapore-memory] #chapter-memory,#stage[data-scene=seattle-memory] #chapter-memory,#stage[data-scene=engagement-memory] #chapter-memory,#stage[data-scene=portraits-memory] #chapter-memory,#stage[data-scene=wedding-memory] #chapter-memory{--photo-height:max(96px,min(calc(760px - 324px - var(--safe-top) - var(--safe-bottom)),122cqw))}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}#book,#cover{transition-duration:.6s}.pixel-star{opacity:.8!important}.hint-star{opacity:.8}#narration{filter:none}}

/* Approved pixel typography, served locally for mobile/WeChat. */
@font-face{font-family:StoryPixel;src:url('assets/pixel-font.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
body,button,#cover .book-title,#cover .book-names,#narration p,#end-card h1{font-family:StoryPixel,"PingFang SC",sans-serif;font-weight:400;font-synthesis:none}
#dialogue p{font-size:24px;font-weight:400;letter-spacing:0;line-height:1.5}
#dialogue{top:calc(var(--safe-top) + 86px);padding:14px 16px 18px;min-height:120px}
.speaker{font-size:14px;font-weight:400;letter-spacing:1px}
#cover .book-title{font-size:28px;letter-spacing:2px}
#cover .book-names{font-size:20px;letter-spacing:0;text-transform:none}
.book-names i{font-family:system-ui,sans-serif;font-size:17px}
#narration{top:calc(var(--safe-top) + 98px);left:8%;right:8%;padding:14px 5px;background:#fff0dceF;border:3px solid #623623;box-shadow:4px 4px #27160b88;color:#4c2a21;text-shadow:none}
#narration p{font-size:24px;line-height:1.5;letter-spacing:0}
#narration .last-line{font-size:28px;letter-spacing:2px;margin-top:6px}
#next{font-size:18px}#chapter{font-size:14px;letter-spacing:1px}
@media(max-height:700px){#dialogue{top:70px;padding:10px 14px}#dialogue p{font-size:20px}#narration{top:80px}#narration p{font-size:20px}#narration .last-line{font-size:24px}}

#coffee-caption{position:absolute;z-index:6;top:calc(var(--safe-top) + 90px);left:13%;right:13%;text-align:center;background:#fff5dfef;color:#4c2a21;border:3px solid #65452b;box-shadow:4px 4px #33201766;padding:12px;animation:appear 1.3s both}#coffee-caption p{margin:0;font-size:24px;line-height:1.6}
#shutter{position:absolute;inset:0;z-index:30;pointer-events:none;background:#fff;animation:shutter .3s both}
#selfie{position:absolute;z-index:15;left:12%;top:28%;width:76%;margin:0;padding:10px 10px 16px;background:#fff2d8;box-shadow:6px 9px #31261966;transform:rotate(-5deg);animation:keep-photo 3.5s both;pointer-events:none}#selfie canvas{width:100%;image-rendering:pixelated}#selfie figcaption{text-align:center;color:#66412e;font-size:20px;padding-top:10px}
@keyframes shutter{0%{opacity:.85}100%{opacity:0}}@keyframes keep-photo{0%{opacity:0;transform:scale(.85) rotate(0)}15%,65%{opacity:1;transform:scale(1) rotate(-5deg)}100%{opacity:0;transform:translateY(170px) scale(.35) rotate(5deg)}}
@media(max-height:700px){#coffee-caption{top:70px}#coffee-caption p{font-size:20px}}
@media(prefers-reduced-motion:reduce){#shutter{display:none!important}#selfie{animation:none;transform:none}}

#later-caption{position:absolute;z-index:7;bottom:calc(var(--safe-bottom) + 96px);left:6%;right:6%;padding:12px 15px;background:#fff3dfee;color:#4c2a21;border:2px solid #714832;box-shadow:3px 3px #20120866;animation:appear .8s both;pointer-events:none}#later-text{margin:0;text-align:center;font-size:20px;line-height:1.55}

#memory-flash{position:absolute;z-index:19;inset:12%;border:5px solid #fff7d8;pointer-events:none;box-shadow:0 0 20px #fff3bf66;animation:memory-frame 1.4s both}
@keyframes memory-frame{from{opacity:0;transform:scale(1.03)}25%,75%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.98)}}
#chapter-menu{position:absolute;z-index:60;inset:0;background:#302016f7;color:#fff0d4;padding:calc(var(--safe-top) + 30px) 24px 24px;overflow:auto;text-align:center}#chapter-menu h2{font-size:24px;font-weight:400}#chapter-links{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0}#chapter-links button{background:#fff0d9;color:#583823;border:2px solid #b89162;padding:15px 7px;font-size:18px;min-height:60px;font-family:inherit}
#invitation{position:absolute;inset:10% 7%;z-index:30;background:#fff4dfeF;color:#543725;outline:2px solid #c4a16b;outline-offset:5px;padding:24px 16px;text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column;animation:appear 1s both;overflow:auto}.invite-heart{color:#c8473c;font-size:32px}.invite-small{font-size:15px;letter-spacing:1px}#invitation h1{font-size:27px;font-weight:400;margin:12px 0}#invitation h1 span{font-size:19px}.invite-date{font-size:62px;letter-spacing:3px;margin:8px 0}#invitation h2{font-size:30px;font-weight:400;letter-spacing:5px;margin:0 0 12px}.invite-message{font-size:20px;line-height:1.6;margin:6px 0 24px}
@media(max-height:700px){#later-caption{bottom:82px;padding:9px 12px}#later-text{font-size:18px}#invitation{inset:8% 7%;padding:12px}.invite-date{font-size:48px}.invite-message{margin-bottom:12px}#chapter-links{gap:7px;margin:14px 0}#chapter-links button{min-height:46px;padding:10px 4px}}
@media(prefers-reduced-motion:reduce){#memory-flash{animation:none;box-shadow:none}}
/* The hint stays anchored to its target while its glow breathes. */




/* Detail release 1.1 — natural poses, photograph capture, compact cover names. */
#cover .book-names{bottom:10.5%;letter-spacing:-.5px}
.book-names i{padding:0 2px}
#memory-flash{inset:0;border:0;background:#fff9e9;box-shadow:none;animation:capture-flash .42s both}
#memory-photo{position:absolute;z-index:18;inset:12% 12% 18%;margin:0;padding:9px 9px 34px;background:#fff4df;box-shadow:5px 7px 0 #1e140b77;pointer-events:none;animation:develop-photo 3.6s both}
#memory-photo canvas{width:100%;height:100%;object-fit:contain;background:#30251f;image-rendering:pixelated}
#memory-photo figcaption{text-align:center;color:#684732;font-size:16px;margin-top:8px}
@keyframes capture-flash{0%{opacity:0}18%{opacity:.9}100%{opacity:0}}
@keyframes develop-photo{0%,8%{opacity:0;transform:scale(1.05)}16%{opacity:1;transform:scale(1) rotate(0)}35%,78%{opacity:1;transform:scale(.94) rotate(-4deg)}100%{opacity:0;transform:translateY(65px) scale(.86) rotate(-4deg)}}
#gift-bubble{position:absolute;z-index:8;left:20%;top:68%;padding:6px 9px;background:#fff4df;color:#6b432c;border:2px solid #916345;font-size:16px;pointer-events:none;box-shadow:2px 2px #29170855}
#gift-bubble{transform:translate(-50%,-100%)}
#gift-bubble:after{content:"";position:absolute;bottom:-7px;left:calc(50% - 4px);width:8px;height:8px;background:#fff4df;border-right:2px solid #916345;border-bottom:2px solid #916345;transform:rotate(45deg)}
@media(prefers-reduced-motion:reduce){#memory-flash{display:none!important}#memory-photo{animation:photo-gentle 3.6s both} @keyframes photo-gentle{0%,100%{opacity:0}15%,80%{opacity:1}}}

/* Ending reverses the opening: last photo returns to the album, cover closes, then invitation. */
#stage[data-scene^="album-"] #book,#stage[data-scene^="album-"] #cover{transition:none}
#stage[data-scene="invitation"] #book{pointer-events:none}
#stage[data-scene^="album-"] #cover{pointer-events:none}

/* 1.3: clear action dock and quiet chapter cards. */
#interaction{left:6%;right:6%;bottom:calc(var(--safe-bottom) + 16px)}

#next,#stage[data-scene=cover] #next{width:auto;min-width:65%;min-height:50px;padding:10px 18px;background:#261c186b;color:#fff1dc;border:1px solid #fff0d64a;border-radius:5px;box-shadow:0 3px 12px #13090524;text-shadow:0 1px 3px #24130c;font-size:18px;letter-spacing:0;justify-content:center;backdrop-filter:blur(4px);animation:none}
#next-text{flex:1;line-height:1.4}
#next .hint-star{color:#fff1dc;font-size:20px;animation:star 2.4s infinite}
#next .hand,#interaction.nudge .hand{display:block;font-size:24px;line-height:1;animation:none}
#next:active{background:#261c1890;transform:translateY(1px)}

#later-caption{bottom:calc(var(--safe-bottom) + 100px)}
#chapter-intro{position:absolute;inset:0;z-index:18;background:#080706;color:#fff0d5;display:flex;align-items:center;justify-content:center;text-align:center;padding:28px;pointer-events:none}
#chapter-intro-number{font-size:16px;color:#c9a577;letter-spacing:5px;margin:0 0 24px}
#chapter-intro-title{font-size:clamp(28px,8cqw,36px);font-weight:400;line-height:1.7;letter-spacing:3px;margin:0 0 28px}
#chapter-intro-copy>span{font-size:13px;letter-spacing:2px;color:#9b8065}
#stage[data-scene=chapter-intro] #chapter{visibility:hidden}
@media(max-height:700px){#interaction{bottom:calc(var(--safe-bottom) + 10px)}#next,#stage[data-scene=cover] #next{min-height:52px;font-size:18px}.tap-label{margin-bottom:5px;font-size:13px}#later-caption{bottom:calc(var(--safe-bottom) + 92px)}}

/* Gentle two-beat rhythm, with static figures and reduced-motion support. */
.beating-heart{display:inline-block;transform-origin:50% 60%;font-style:normal;color:#d94c4d;animation:heart-beat 1.4s ease-in-out infinite}
@keyframes heart-beat{0%,45%,100%{transform:scale(1)}15%{transform:scale(1.2)}25%{transform:scale(1)}34%{transform:scale(1.12)}}
@media(prefers-reduced-motion:reduce){.beating-heart{animation:none!important}}


/* One continuous cover turn into the single fullscreen chapter card. */
#stage[data-scene=cover] .pages,#stage[data-scene=opening] .pages{background:#080706}
#stage[data-scene=opening] #cover{transition:none}
#opening-fade{position:absolute;inset:0;width:100%;height:100%;z-index:21;background:transparent;pointer-events:none;image-rendering:pixelated}

/* Shared pixel sprite silhouette for every interface heart, independent of emoji fonts. */
.pixel-heart,.book-names i.pixel-heart{display:inline-block;position:relative;width:14px;height:12px;padding:0;margin:0 4px;vertical-align:middle;flex-shrink:0;background:#df5149;clip-path:polygon(14.286% 0,42.857% 0,42.857% 16.667%,57.143% 16.667%,57.143% 0,85.714% 0,85.714% 16.667%,100% 16.667%,100% 50%,85.714% 50%,85.714% 66.667%,71.429% 66.667%,71.429% 83.333%,57.143% 83.333%,57.143% 100%,42.857% 100%,42.857% 83.333%,28.571% 83.333%,28.571% 66.667%,14.286% 66.667%,14.286% 50%,0 50%,0 16.667%,14.286% 16.667%)}
.pixel-heart:before{content:"";position:absolute;left:28.571%;top:16.667%;width:14.286%;height:16.667%;background:#ffe0c7}
.invite-heart.pixel-heart,.loading-heart.pixel-heart{width:28px;height:24px}

/* Preserve the original album silhouette around the edited cover artwork. */
#cover img{-webkit-mask-image:url("assets/cover.png");mask-image:url("assets/cover.png");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

/* A fixed spine, two-sided cover and stationary page block keep the turn grounded. */
#book{perspective:1800px;perspective-origin:8.2% 50%;filter:none}
#cover{transform-origin:8.2% 50%;backface-visibility:visible;-webkit-backface-visibility:visible;transform-style:preserve-3d}
.cover-front{position:absolute;inset:0;display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(1px)}
.cover-back{position:absolute;inset:7.4% 3% 5.5% 3%;display:block;background:#080706;border:3px solid #211b17;box-shadow:inset 0 0 0 2px #14100d;transform:rotateY(180deg) translateZ(1px);backface-visibility:hidden;-webkit-backface-visibility:hidden}
#stage[data-scene=cover] .pages,#stage[data-scene=opening] .pages{inset:7.6% 3% 5.5% 8.2%;background:#080706;border-color:#17120f;box-shadow:2px 3px #211b17,4px 6px #100d0a,8px 18px 3px #2b160644}
#stage[data-scene=opening] #book{transition:none}

/* Warm photo album opens fully before a pixel-block dissolve into the chapter card. */
.cover-back{background:#f3dfb6;border-color:#ae784b;box-shadow:inset 0 0 0 3px #dcc399;overflow:hidden}
.cover-back canvas{width:100%;height:100%;image-rendering:pixelated}
#stage[data-scene=cover] .pages,#stage[data-scene=opening] .pages{background:#f3dfb6;border-color:#d7b378;box-shadow:2px 3px #dfc59a,4px 6px #907246,8px 18px 3px #2b160644}
#stage[data-scene=cover] #book,#stage[data-scene=cover] #cover{transition:none}
#stage[data-scene=opening] .pages canvas,#stage[data-scene=cover] .pages canvas{height:100%}

#opening-art{position:absolute;inset:0}
#stage[data-scene=cover] .pages,#stage[data-scene=cover] .cover-back{visibility:hidden}
#stage[data-scene=cover] .cover-front{transform:none;backface-visibility:visible;-webkit-backface-visibility:visible}
#stage[data-scene=opening] #toolbar{visibility:hidden}

#stage[data-scene=opening] .pages canvas,#stage[data-scene=cover] .pages canvas{object-fit:contain}

/* Chapter epigraphs: pixel headings, readable literary text and a quiet skip control. */
#stage[data-scene=chapter-intro] #chapter-intro{pointer-events:auto}
#chapter-intro{padding:80px 26px 105px}
#chapter-intro-copy{width:100%;max-width:410px}
#chapter-intro-number{margin-bottom:17px}
#chapter-intro-title{margin-bottom:32px}
#intro-epigraph{margin:0 auto 30px;max-width:100%}
#intro-quote{font-family:"PingFang SC","Microsoft YaHei",sans-serif;font-size:clamp(17px,4.6cqw,20px);font-weight:400;line-height:1.9;letter-spacing:.5px;white-space:pre-line;margin:0;color:#f1e6d3;overflow-wrap:break-word}
#intro-quote[lang=en],#intro-quote[lang=fr]{font-family:Georgia,"Times New Roman",serif;letter-spacing:0;line-height:1.65;font-size:clamp(18px,4.8cqw,21px)}
#intro-quote[lang=fr]{font-style:italic;font-size:clamp(21px,5.7cqw,26px)}
#intro-quote[data-kind=llm]{font-family:"PingFang SC",Arial,sans-serif;font-size:clamp(15px,4.1cqw,19px);line-height:2;color:#e8bd90;white-space:pre}
#intro-quote[data-kind=llm]::first-line{color:#f1e6d3}
#intro-translation{font-family:"PingFang SC",sans-serif;font-size:16px;letter-spacing:2px;color:#c9bda8;margin:15px 0 0}
#intro-source{font-family:"PingFang SC",Georgia,serif;font-size:13px;line-height:1.6;color:#b7a28b;margin:19px 0 0;letter-spacing:.4px}
#chapter-intro-copy>.intro-signature{font-size:12px;letter-spacing:1px;color:#9b8065}
#intro-continue{position:absolute;bottom:calc(var(--safe-bottom) + 30px);left:50%;transform:translateX(-50%);min-width:104px;min-height:44px;padding:8px 18px;color:#d2baa0;background:#fff4de08;border:1px solid #d2baa02e;border-radius:4px;font-size:15px;letter-spacing:2px}
#intro-continue:disabled{pointer-events:none}
@media(max-height:650px){#chapter-intro{padding-top:66px;padding-bottom:80px}#chapter-intro-title{margin-bottom:18px}#intro-epigraph{margin-bottom:20px}#chapter-intro-number{margin-bottom:10px}#intro-continue{bottom:15px}}

/* All approved epigraphs share the established handheld pixel typeface. */
#intro-quote,#intro-quote[lang=en],#intro-quote[lang=fr],#intro-quote[data-kind=llm],#intro-translation,#intro-source{font-family:StoryPixel,"PingFang SC",sans-serif;font-style:normal;font-weight:400;font-synthesis:none}

/* A real photograph in the opening album's warm paper mount. */
#chapter-memory{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;padding-bottom:12px;pointer-events:none;--photo-height:max(96px,min(calc(100dvh - 260px - var(--safe-top) - var(--safe-bottom)),122cqw))}
.real-photo-frame{margin:0;width:calc(var(--photo-height)*var(--photo-ratio,.56171875) + 32px);max-width:85%;padding:14px 14px 0;background:#fff4df;border:3px solid #d7b378;box-shadow:3px 4px 0 #dfc59a,6px 8px 0 #907246,10px 18px 25px #20100670;transform:rotate(-2deg);color:#6a3b24}
.real-photo-mount{position:relative;width:100%;aspect-ratio:var(--photo-ratio,.56171875);background:#f3dfb6;overflow:hidden}
#real-photo{display:block;width:100%;height:auto;aspect-ratio:var(--photo-ratio,.56171875);object-fit:contain;image-rendering:auto;opacity:0}
.real-photo-frame figcaption{text-align:center;padding:16px 0 14px;font-size:20px;letter-spacing:3px;line-height:1.4}
.real-photo-frame figcaption small{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:8px;font-size:13px;letter-spacing:.5px;color:#95704b}
.real-photo-frame .pixel-heart{width:10px;height:9px;flex:none}
#real-photo-status{position:absolute;inset:45% 0 auto;text-align:center;font-size:14px;letter-spacing:1px}
#stage[data-scene=coffee-memory] #dots{display:none}
@media(prefers-reduced-motion:reduce){.real-photo-frame{transform:none}}

#stage[data-scene=birthday-memory] #chapter-memory,#stage[data-scene=singapore-memory] #chapter-memory,#stage[data-scene=seattle-memory] #chapter-memory,#stage[data-scene=engagement-memory] #chapter-memory,#stage[data-scene=portraits-memory] #chapter-memory,#stage[data-scene=wedding-memory] #chapter-memory{--photo-height:max(96px,min(calc(100dvh - 324px - var(--safe-top) - var(--safe-bottom)),122cqw))}
#stage[data-scene=birthday-memory] #dots,#stage[data-scene=singapore-memory] #dots,#stage[data-scene=seattle-memory] #dots,#stage[data-scene=engagement-memory] #dots,#stage[data-scene=portraits-memory] #dots,#stage[data-scene=wedding-memory] #dots{display:none}
#memory-nav{display:flex;align-items:center;justify-content:space-between;margin-top:8px;font-size:14px;letter-spacing:1px}
#memory-prev{pointer-events:auto;min-height:44px;padding:6px 8px;color:#6a3b24;border:1px solid #b3916144;background:transparent;border-radius:2px;font-size:14px}
#memory-prev:disabled{opacity:.3;pointer-events:none}

/* Aligned artwork under the original photo, inside the same unchanging mount. */
#pixel-photo{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;pointer-events:none}
#real-photo{position:relative}

#real-photo-status{inset:0;margin:0;padding:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#95704b;background:#f3dfb6;font-size:16px;line-height:1.6;letter-spacing:1px;z-index:2}
#real-photo-status .pixel-heart{width:18px;height:16px}
#photo-retry{pointer-events:auto;background:#fff4df;border:1px solid #b3916177;border-radius:2px;color:#6a3b24;min-height:44px;padding:8px 18px;font-size:15px}