:root{color-scheme:light;--pink:#e97094;--deep-pink:#cf4f75;--ink:#513c42;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--paper-bg:rgba(255,250,248,.64);--paper-border:rgba(238,120,153,.46);--wash-color:rgba(93,41,58,.08)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#f3b4c5}
body{margin:0;color:var(--ink);font-family:"Avenir Next","Helvetica Neue","PingFang SC","Hiragino Sans GB",sans-serif;-webkit-font-smoothing:antialiased}
body[data-letter-phase="vulnerable"]{--paper-bg:rgba(247,249,250,.62);--paper-border:rgba(149,167,181,.38);--wash-color:rgba(53,66,84,.18)}
body[data-letter-phase="bright"]{--paper-bg:rgba(255,251,243,.61);--paper-border:rgba(239,157,171,.46);--wash-color:rgba(203,91,123,.055)}
body[data-letter-phase="reflective"]{--paper-bg:rgba(255,248,244,.63);--paper-border:rgba(230,135,158,.48);--wash-color:rgba(138,57,85,.08)}
body[data-letter-phase="love"]{--paper-bg:rgba(255,246,244,.67);--paper-border:rgba(226,102,139,.53);--wash-color:rgba(149,45,81,.09)}
body:not(.opened){overflow:hidden}
button{font:inherit}

.bg{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-3}
.backdrop{position:fixed;inset:0;z-index:-2;background-color:var(--wash-color);background-image:linear-gradient(180deg,rgba(255,235,241,.055),rgba(74,37,52,.035));pointer-events:none;transition:background-color 1.5s ease}

/* 独立开场：正文在拆封前完全不可见 */
.intro{position:fixed;inset:0;z-index:30;overflow:hidden;background:#eaf1ec;transition:opacity .8s ease,visibility .8s ease}
.intro.done{opacity:0;visibility:hidden;pointer-events:none}
.scene{position:absolute;inset:0}

.scene-hello{padding:var(--safe-top) 0 var(--safe-bottom);background:radial-gradient(circle at 18% 16%,rgba(255,255,255,.82),transparent 26%),linear-gradient(155deg,#d9edf4 0%,#eef3ea 50%,#c7d8b2 100%);transition:opacity .75s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.hello-atmosphere{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hello-atmosphere i,.hello-atmosphere b,.hello-atmosphere em{position:absolute;border-radius:50%;filter:blur(2px);background:rgba(255,255,255,.34)}
.hello-atmosphere i{width:42vw;height:42vw;left:-12vw;top:8vh}.hello-atmosphere b{width:30vw;height:30vw;right:-8vw;top:24vh}.hello-atmosphere em{width:62vw;height:22vw;left:18vw;bottom:-9vw;background:rgba(102,142,86,.2)}
.character-stage{position:relative;width:min(100%,650px);height:100%;margin:auto}
.scribble-kitty{position:absolute;right:4%;bottom:10%;width:min(58vw,310px);height:auto;filter:drop-shadow(0 17px 20px rgba(37,62,52,.18));animation:kittyWalkIn 1.25s cubic-bezier(.16,.82,.18,1) both}
.speech-bubble{position:absolute;left:6%;top:36%;width:min(66vw,300px);min-height:96px;padding:15px 18px 14px;border:2.5px solid #414e48;border-radius:29px 34px 31px 27px/28px 31px 27px 33px;background:rgba(255,253,251,.96);box-shadow:4px 6px 0 rgba(65,78,72,.09),0 13px 30px rgba(39,66,57,.1);opacity:0;transform:translateY(12px) rotate(-1deg) scale(.97);animation:bubbleIn .55s 1.2s cubic-bezier(.2,.8,.2,1) forwards}
.speech-bubble::before{content:"";position:absolute;inset:4px 5px 5px 4px;border:1px solid rgba(65,78,72,.36);border-radius:25px 30px 27px 24px/24px 27px 23px 29px;transform:rotate(.35deg);pointer-events:none}
.bubble-copy{display:flex;width:100%;min-height:62px;padding:0 5px;border:0;background:transparent;color:#34413b;cursor:pointer;text-align:left;flex-direction:column;justify-content:center;align-items:flex-start;overflow-wrap:anywhere}
.bubble-copy span{font-size:clamp(19px,5.4vw,27px);font-weight:600;line-height:1.42;letter-spacing:.015em;transition:opacity .16s ease,transform .16s ease}
.speech-bubble.switching .bubble-copy span{opacity:0;transform:translateY(-5px)}
.speech-bubble.actions-visible{left:5%;top:25%;width:min(84vw,334px);min-height:154px;padding:18px 18px 14px;border-radius:33px 28px 35px 30px/29px 35px 28px 34px}
.speech-bubble.actions-visible .bubble-copy{min-height:auto;cursor:default}
.speech-bubble.actions-visible .bubble-copy span{font-size:clamp(14px,3.75vw,16px);font-weight:500;line-height:1.55}
.dialogue-actions{display:flex;justify-content:center;gap:10px;margin-top:11px}
.dialogue-actions[hidden]{display:none}
.dialogue-actions button[hidden]{display:none}
.dialogue-actions button{position:relative;display:flex;width:116px;height:38px;min-height:38px;padding:0 12px;align-items:center;justify-content:center;border:2px solid #536059;border-radius:48% 52% 47% 53%/53% 46% 54% 47%;background:#fff9fa;color:#4c5a53;cursor:pointer;font-size:11px;font-weight:600;letter-spacing:.02em;box-shadow:2px 3px 0 rgba(83,96,89,.12);transition:transform .18s ease}
.dialogue-actions button::after{content:"";position:absolute;inset:3px 4px 4px 3px;border:1px solid rgba(83,96,89,.28);border-radius:52% 48% 51% 49%/48% 54% 46% 52%;pointer-events:none}
.dialogue-actions button:active{transform:scale(.97)}
.music-disc.playing{animation:buttonBreathe 1.8s ease-in-out infinite}
.nuclear-button{animation:buttonBreathe 2.1s ease-in-out infinite}
.control-label{display:block;color:inherit;font-size:11px;white-space:nowrap}
.music-status{display:block;min-height:12px;margin:5px 5px 0;color:#7d8b84;font-size:10px}

.scene-garden{opacity:0;pointer-events:none;clip-path:circle(0 at 50% 62%);background:#d875a4;transition:opacity .5s ease,clip-path 1.2s cubic-bezier(.2,.72,.18,1)}
.garden-picture{position:absolute;inset:0;background:linear-gradient(180deg,#72c8ee,#e98bb4);opacity:.5}
.garden-glow{position:absolute;inset:0;z-index:3;background:radial-gradient(circle at 50% 46%,transparent 35%,rgba(74,27,60,.12));pointer-events:none}
.emerge-stage{position:absolute;inset:-2%;overflow:hidden;opacity:0;transform:translateY(16%) scale(.98);transition:opacity .55s ease .35s,transform 1.55s cubic-bezier(.16,.84,.2,1) .3s;transform-origin:50% 57%}
.garden-wallpaper{position:absolute;inset:0;overflow:hidden;background:#e98bb4}
.wallpaper-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;will-change:transform}
.wallpaper-base{z-index:0}
.kitty-motion{z-index:1;clip-path:ellipse(23% 21% at 50% 52%);transform-origin:50% 55%;animation:wallpaperKittyBreath 5.4s ease-in-out infinite;animation-play-state:paused}
.flower-motion{z-index:1;pointer-events:none}
.flower-one{clip-path:ellipse(25% 24% at 10% 9%);transform-origin:10% 9%;animation:wallpaperFlowerOne 6.2s ease-in-out infinite;animation-play-state:paused}
.flower-two{clip-path:ellipse(26% 25% at 91% 17%);transform-origin:91% 17%;animation:wallpaperFlowerTwo 7s ease-in-out infinite;animation-play-state:paused}
.flower-three{clip-path:ellipse(29% 27% at 82% 82%);transform-origin:82% 82%;animation:wallpaperFlowerThree 6.6s ease-in-out infinite;animation-play-state:paused}
.floating-petal{position:absolute;z-index:2;width:9px;height:15px;border-radius:70% 30% 65% 35%;background:rgba(255,191,222,.72);box-shadow:0 0 5px rgba(255,232,242,.55);will-change:transform}
.petal-one{left:17%;top:29%;animation:petalDriftOne 6.5s ease-in-out infinite}.petal-two{left:34%;top:20%;width:7px;height:12px;animation:petalDriftTwo 7.4s ease-in-out infinite}.petal-three{left:49%;top:31%;width:8px;height:13px;animation:petalDriftOne 8s ease-in-out infinite}.petal-four{left:67%;top:23%;width:7px;height:11px;animation:petalDriftTwo 7s ease-in-out infinite}.petal-five{left:78%;top:34%;width:10px;height:16px;animation:petalDriftOne 8.5s ease-in-out infinite}
.floating-petal{animation-play-state:paused}
.letter-transition{position:absolute;inset:0;z-index:5;background:#fff9f8;opacity:0;pointer-events:none;transition:opacity .5s ease .7s}
.intro.garden .scene-hello{opacity:0;transform:scale(.96);pointer-events:none}
.intro.garden .scene-garden{opacity:1;clip-path:circle(145% at 50% 62%);pointer-events:auto}
.intro.garden .emerge-stage{opacity:1;transform:none}
.intro.garden .kitty-motion,.intro.garden .flower-motion,.intro.garden .floating-petal{animation-play-state:running}
.intro.expanding .letter-transition{opacity:1}
.intro.expanding .emerge-stage{animation:none;filter:brightness(.96);transform:scale(5.2);transform-origin:50% 58%;transition:transform 1.25s cubic-bezier(.45,0,.12,1),filter .6s ease}

/* 正文像翻信纸：不纵向滚动，每页保留完整自然段 */
body.opened{overflow:hidden}
.page{position:fixed;inset:0;width:100%;padding:calc(24px + var(--safe-top)) 14px calc(82px + var(--safe-bottom));opacity:0;visibility:hidden;transform:translateY(15px);transition:opacity .8s ease .15s,transform .8s ease .15s,visibility 0s linear .95s;touch-action:pan-y;cursor:pointer}
body.opened .page{opacity:1;visibility:visible;transform:none;transition:opacity .8s ease .12s,transform .8s ease .12s}
.letter-deck{position:relative;width:min(100%,680px);height:100%;margin:0 auto;perspective:1300px}
.letter{position:absolute;inset:0;width:100%;margin:auto;padding:clamp(25px,4vh,38px) clamp(21px,5vw,48px) 42px;border:1px solid var(--paper-border);border-radius:25px 22px 27px 23px/23px 27px 22px 26px;background-color:var(--paper-bg);background-image:repeating-linear-gradient(8deg,rgba(129,84,96,.018) 0,rgba(129,84,96,.018) 1px,transparent 1px,transparent 8px),radial-gradient(circle at 16% 12%,rgba(255,255,255,.34),transparent 30%);box-shadow:0 18px 55px rgba(91,35,54,.18),inset 0 0 0 3px rgba(255,255,255,.27);backdrop-filter:blur(3px) saturate(1.02);-webkit-backdrop-filter:blur(3px) saturate(1.02);overflow:hidden;opacity:0;pointer-events:none;transform:translateX(78%) rotateY(-8deg) rotate(.45deg) scale(.96);transform-origin:left center;transition:opacity .48s ease,transform .68s cubic-bezier(.2,.78,.2,1),background-color 1.2s ease,border-color 1.2s ease,box-shadow 1.2s ease}
.letter::before,.letter::after{content:"";position:absolute;width:125px;height:125px;border-radius:50%;opacity:.1;background:radial-gradient(circle,var(--pink) 0 3px,transparent 4px);background-size:18px 18px;pointer-events:none}
.letter::before{top:-40px;left:-40px}.letter::after{right:-40px;bottom:-38px}
.letter-body{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center}
.letter-body p{position:relative;margin:0 0 1.32em;font-size:clamp(13.2px,3.45vw,16.2px);font-weight:400;line-height:1.82;letter-spacing:.012em;text-align:left;text-indent:1.75em;text-wrap:pretty;text-shadow:0 1px 5px rgba(255,255,255,.95);opacity:0;clip-path:inset(0 0 18% 0);transform:translateY(11px);filter:blur(1.5px)}
.letter-body p:first-child::first-letter{color:inherit;font-size:inherit;font-weight:inherit;line-height:inherit}
.letter-sheet{isolation:isolate}
.letter-sheet.is-active{opacity:1;pointer-events:auto;transform:translateX(0) rotateY(0) rotate(-.08deg) scale(1);z-index:3}
body.opened .letter-sheet.is-active .letter-body p{animation:paragraphInk .72s cubic-bezier(.2,.72,.2,1) both}
body.opened .letter-sheet.is-active .letter-body p:nth-child(1){animation-delay:.14s}
body.opened .letter-sheet.is-active .letter-body p:nth-child(2){animation-delay:.34s}
body.opened .letter-sheet.is-active .letter-body p:nth-child(3){animation-delay:.54s}
body.opened .letter-sheet.is-active .letter-body p:nth-child(4){animation-delay:.72s}
body.opened .letter-sheet.is-active .letter-body p:nth-child(5){animation-delay:.9s}
body.opened .letter-sheet.is-active .letter-body p:nth-child(6){animation-delay:1.08s}
.letter-sheet.is-entering.transition-slide{animation:pageSlideIn .76s cubic-bezier(.18,.78,.16,1) both}
.letter-sheet.is-entering.transition-fold{animation:pageFoldIn .84s cubic-bezier(.18,.72,.18,1) both}
.letter-sheet.is-entering.transition-dissolve{animation:pageDissolveIn .95s ease both}
.letter-sheet.is-entering.transition-rise{animation:pageRiseIn .82s cubic-bezier(.16,.78,.18,1) both}
.letter-sheet.is-entering.transition-zoom{animation:pageLetterZoomIn .92s cubic-bezier(.16,.75,.18,1) both}
.letter-sheet.is-entering.enter-backward{animation-name:pageBackIn}
.letter-sheet.is-before{opacity:0;transform:translateX(-82%) rotateY(9deg) rotate(-.5deg) scale(.95);transform-origin:right center;z-index:1}
.letter-sheet.is-after{z-index:2}
.letter-sheet .letter-body>p:last-child{margin-bottom:0}
.sheet-vulnerable{box-shadow:0 18px 52px rgba(60,63,82,.15),inset 0 0 0 3px rgba(255,255,255,.24)}
.sheet-reflective{box-shadow:0 18px 52px rgba(68,66,86,.15),inset 0 0 0 3px rgba(255,255,255,.25)}
.sheet-bright{box-shadow:0 18px 54px rgba(125,63,68,.15),inset 0 0 0 3px rgba(255,255,255,.27)}
.sheet-love{padding-bottom:42px;box-shadow:0 20px 58px rgba(118,42,68,.19),inset 0 0 0 3px rgba(255,255,255,.29)}
.page-kitty{position:absolute;z-index:1;pointer-events:none}
.page-kitty img{display:block;height:auto;filter:drop-shadow(0 5px 6px rgba(85,45,57,.12))}
.kitty-guide{right:9px;bottom:-13px;width:104px;height:86px;animation:kittyPageBreathe 4.6s ease-in-out infinite;animation-play-state:paused}
.kitty-guide img{position:absolute;right:-13px;bottom:-35px;width:91px;opacity:.82}
.kitty-guide span{position:absolute;right:64px;top:5px;width:78px;padding:6px 8px;border:1.3px solid rgba(80,61,68,.55);border-radius:47% 53% 46% 54%/54% 47% 53% 46%;background:rgba(255,253,251,.7);font-size:9px;color:#725461;white-space:nowrap;animation:hintFloat 3.2s ease-in-out infinite}
.kitty-peek-page{left:-13px;bottom:-50px;width:112px;animation:kittyLookAround 6s ease-in-out infinite;animation-play-state:paused}
.kitty-peek-page img{width:112px;opacity:.72}
.kitty-apple{right:-18px;bottom:-15px;width:127px;animation:kittyPageBreathe 5.2s ease-in-out infinite;animation-play-state:paused}
.kitty-apple img{width:127px;opacity:.68}
body.opened .letter-sheet.is-active .page-kitty{animation-play-state:running}
.turning-line{margin:20px 0 22px!important;padding:11px 4px 13px;font-weight:500!important}
.letter-body .turning-line,.letter-body .lyric-line{text-indent:0}
.turning-line::after{content:"";position:absolute;left:1px;bottom:10px;width:min(92%,410px);height:7px;border-radius:50%;background:rgba(236,130,160,.2);transform:scaleX(.05) rotate(-.6deg);transform-origin:left center;transition:transform 1.3s cubic-bezier(.2,.75,.2,1)}
.turning-line.in-view::after{transform:scaleX(1) rotate(-.6deg)}
.first-confession::after{background:rgba(139,164,181,.2);width:min(72%,290px)}
.core-line::after{height:9px;background:rgba(235,111,149,.24)}
.lyric-line{margin-top:19px!important;padding:12px 11px 12px 14px;border-left:2px solid rgba(221,102,139,.38);border-radius:0 15px 15px 0;background:linear-gradient(90deg,rgba(255,229,237,.36),transparent 88%);line-height:1.75!important}
.letter-foot{position:absolute;z-index:2;left:0;right:0;bottom:15px;display:flex;align-items:center;justify-content:center;gap:9px;color:var(--pink)}
.letter-foot i{width:30px;height:1px;background:rgba(239,120,153,.4)}
.page-turner{position:absolute;left:50%;bottom:calc(17px + var(--safe-bottom));z-index:8;display:flex;align-items:center;gap:13px;transform:translateX(-50%)}
.page-turner button{position:relative;width:67px;height:35px;padding:0;border:1.5px solid rgba(99,69,78,.66);border-radius:48% 52% 45% 55%/53% 47% 53% 47%;background:rgba(255,250,249,.72);color:#725461;font-size:10px;letter-spacing:.04em;box-shadow:2px 3px 0 rgba(91,56,67,.08);cursor:pointer;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.page-turner button:disabled{opacity:.28;cursor:default}
.page-turner button:active:not(:disabled){transform:scale(.96)}
.page-dots{display:flex;gap:6px;align-items:center}
.page-dots i{display:block;width:5px;height:5px;border-radius:50%;background:rgba(112,75,87,.3);transition:transform .35s ease,background .35s ease}
.page-dots i.active{background:#cf5d82;transform:scale(1.45)}
.player-controls{position:fixed;right:15px;bottom:calc(16px + var(--safe-bottom));z-index:11;display:flex;align-items:center;gap:7px;opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none;transition:opacity .5s ease,transform .5s ease,visibility 0s linear .5s}
body.opened .player-controls{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .5s ease .55s,transform .5s ease .55s}
body.opened .player-controls.idle{opacity:.3}
.player-controls.unavailable{display:none}
.sound,.next-track{height:40px;border:1px solid rgba(255,255,255,.9);background:rgba(219,91,128,.84);color:#fff;box-shadow:0 4px 16px rgba(91,35,54,.18);cursor:pointer;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.sound{width:40px;border-radius:50%}.next-track{min-width:64px;padding:0 13px;border-radius:22px;font-size:11px;letter-spacing:.04em}
.sound:active,.next-track:active{transform:scale(.95)}.sound:focus-visible,.next-track:focus-visible,.dialogue-actions button:focus-visible,.bubble-copy:focus-visible{outline:2px solid #fff;outline-offset:3px}

@keyframes kittyWalkIn{0%{opacity:0;transform:translateX(115%) rotate(3deg)}55%{opacity:1;transform:translateX(15%) rotate(-2deg)}70%{transform:translateX(10%) translateY(-7px) rotate(1deg)}85%{transform:translateX(5%) translateY(0) rotate(-1deg)}100%{opacity:1;transform:none}}
@keyframes bubbleIn{to{opacity:1;transform:none}}
@keyframes discSpin{to{transform:rotate(360deg)}}
@keyframes nuclearPulse{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.045);filter:brightness(1.1)}}
@keyframes buttonBreathe{0%,100%{transform:rotate(-.5deg) scale(1)}50%{transform:rotate(.5deg) scale(1.025)}}
@keyframes wallpaperKittyBreath{0%,100%{transform:translateY(0) scale(1)}45%,55%{transform:translateY(-7px) scale(1.022)}}
@keyframes wallpaperFlowerOne{0%,100%{transform:rotate(0) scale(1)}50%{transform:translate(3px,-3px) rotate(1.1deg) scale(1.014)}}
@keyframes wallpaperFlowerTwo{0%,100%{transform:rotate(0) scale(1)}50%{transform:translate(-3px,2px) rotate(-1deg) scale(1.013)}}
@keyframes wallpaperFlowerThree{0%,100%{transform:rotate(0) scale(1)}50%{transform:translate(-2px,-4px) rotate(.9deg) scale(1.015)}}
@keyframes petalDriftOne{0%,100%{transform:translate(0,0) rotate(-12deg)}50%{transform:translate(24px,18px) rotate(32deg)}}
@keyframes petalDriftTwo{0%,100%{transform:translate(0,0) rotate(16deg)}50%{transform:translate(-21px,22px) rotate(-30deg)}}
@keyframes hintFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-3px) rotate(1deg)}}
@keyframes kittyPeek{0%,100%{transform:translateY(18px) rotate(4deg)}45%,65%{transform:translateY(-3px) rotate(-2deg)}}
@keyframes paragraphInk{0%{opacity:0;clip-path:inset(0 0 22% 0);transform:translateY(11px);filter:blur(1.5px)}100%{opacity:1;clip-path:inset(0);transform:none;filter:blur(0)}}
@keyframes pageSlideIn{0%{opacity:0;transform:translateX(74%) rotate(1.2deg) scale(.96)}100%{opacity:1;transform:translateX(0) rotate(-.08deg) scale(1)}}
@keyframes pageFoldIn{0%{opacity:.18;transform:perspective(1100px) translateX(52%) rotateY(-48deg) rotate(.8deg);filter:brightness(.9)}65%{opacity:1;transform:perspective(1100px) translateX(-1.5%) rotateY(2deg) rotate(-.2deg);filter:brightness(1)}100%{opacity:1;transform:none;filter:none}}
@keyframes pageDissolveIn{0%{opacity:0;transform:scale(1.035) rotate(.3deg);filter:blur(8px) saturate(.8)}100%{opacity:1;transform:scale(1) rotate(-.08deg);filter:blur(0) saturate(1)}}
@keyframes pageRiseIn{0%{opacity:0;transform:translateY(15%) scale(.965) rotate(-.7deg)}70%{opacity:1;transform:translateY(-1%) scale(1.005) rotate(.12deg)}100%{opacity:1;transform:none}}
@keyframes pageLetterZoomIn{0%{opacity:0;transform:scale(.72) rotate(-1.4deg);filter:blur(4px)}72%{opacity:1;transform:scale(1.012) rotate(.12deg);filter:blur(0)}100%{opacity:1;transform:none}}
@keyframes pageBackIn{0%{opacity:0;transform:translateX(-56%) rotateY(10deg) rotate(-.5deg) scale(.96)}100%{opacity:1;transform:none}}
@keyframes kittyPageBreathe{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}
@keyframes kittyLookAround{0%,100%{transform:translateY(17px) rotate(4deg)}45%,65%{transform:translateY(0) rotate(-3deg)}}
@media(min-width:700px){.page{padding:6vh 18px calc(82px + var(--safe-bottom))}.letter{padding:43px 58px 52px}.sheet-love{padding-bottom:52px}.player-controls{right:24px}.page-turner{left:50%;transform:translateX(-50%)}}
@media(max-height:680px){.scribble-kitty{width:min(43vw,220px);bottom:5%}.speech-bubble{top:29%;min-height:88px}.speech-bubble.actions-visible{top:13%;min-height:146px}.bubble-copy{min-height:54px}.dialogue-actions{margin-top:7px}.dialogue-actions button{width:108px;height:36px;min-height:36px}}
@media(max-width:699px){.page-turner{left:14px;transform:none}.letter-foot{bottom:10px}}
@media(max-width:360px){.page{padding-left:9px;padding-right:9px}.page-turner{left:9px;gap:8px}.page-turner button{width:57px}.letter-body p{font-size:12.7px;line-height:1.73}.player-controls{right:9px}}
@media(max-height:700px){.page{padding-top:calc(12px + var(--safe-top));padding-bottom:calc(69px + var(--safe-bottom))}.letter{padding-top:20px;padding-bottom:30px}.letter-body p{font-size:clamp(12.4px,3.22vw,14px);line-height:1.67;margin-bottom:1em}.turning-line{margin:10px 0 12px!important;padding:8px 4px 10px}.lyric-line{margin-top:10px!important;padding-top:8px;padding-bottom:8px}.page-turner{bottom:calc(12px + var(--safe-bottom))}.letter-foot{bottom:7px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scribble-kitty,.speech-bubble,.page-kitty{animation:none!important;opacity:1}.scene,.emerge-stage,.letter{transition-duration:.01ms!important}body.opened .letter-sheet.is-active .letter-body p{animation:none!important;opacity:1;clip-path:none;transform:none;filter:none}}

/* v12 · 私人信笺视觉系统 */
:root{
  --ink:#4d3c41;
  --muted-ink:#806a71;
  --paper-bg:rgba(255,252,248,.9);
  --paper-border:rgba(255,255,255,.72);
  --rose:#cf6684;
  --rose-deep:#a94f69;
  --paper-shadow:rgba(76,37,50,.2);
}

body{
  background:#c85470;
  font-family:"Avenir Next","Helvetica Neue","PingFang SC","Hiragino Sans GB",sans-serif;
}

.bg{
  transform:scale(1.035);
  filter:saturate(.82) contrast(.94) brightness(.92);
}

.backdrop{
  background-color:var(--wash-color);
  background-image:
    linear-gradient(180deg,rgba(90,31,49,.09),rgba(102,35,54,.18)),
    radial-gradient(circle at 50% 24%,rgba(255,236,240,.08),transparent 48%);
  backdrop-filter:blur(1.5px);
  -webkit-backdrop-filter:blur(1.5px);
}

body[data-letter-phase="vulnerable"]{--paper-bg:rgba(251,251,249,.91);--paper-border:rgba(224,232,234,.78);--wash-color:rgba(56,66,78,.22)}
body[data-letter-phase="reflective"]{--paper-bg:rgba(255,251,247,.91);--paper-border:rgba(255,239,237,.8);--wash-color:rgba(111,54,72,.16)}
body[data-letter-phase="bright"]{--paper-bg:rgba(255,253,246,.91);--paper-border:rgba(255,243,232,.82);--wash-color:rgba(157,66,86,.12)}
body[data-letter-phase="love"]{--paper-bg:rgba(255,249,246,.93);--paper-border:rgba(255,226,232,.84);--wash-color:rgba(136,39,67,.17)}

/* 开场：同一套纸张、墨色与玫瑰色语言 */
.scene-hello{
  background:
    radial-gradient(circle at 13% 13%,rgba(255,255,255,.88),transparent 27%),
    radial-gradient(circle at 89% 66%,rgba(255,239,230,.52),transparent 31%),
    linear-gradient(154deg,#dceef0 0%,#f3f0e8 53%,#c7d5b4 100%);
}

.scene-hello::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background-image:repeating-linear-gradient(106deg,rgba(79,92,80,.11) 0,rgba(79,92,80,.11) 1px,transparent 1px,transparent 9px);
  mix-blend-mode:multiply;
}

.character-stage{width:min(100%,560px);z-index:1}

.intro-keepsake{
  position:absolute;
  left:7%;
  top:calc(8% + var(--safe-top));
  display:grid;
  grid-template-columns:auto 42px;
  align-items:center;
  column-gap:10px;
  color:rgba(62,77,69,.55);
  letter-spacing:.16em;
  animation:keepsakeIn .8s .25s ease both;
}

.intro-keepsake span{font-size:10px;font-weight:700}
.intro-keepsake i{display:block;width:42px;height:1px;background:currentColor}
.intro-keepsake small{grid-column:1 / -1;margin-top:7px;font-size:8px;letter-spacing:.22em}

.scribble-kitty{
  right:2%;
  bottom:8%;
  width:min(54vw,278px);
  filter:drop-shadow(0 18px 18px rgba(46,66,57,.16));
}

.speech-bubble{
  left:6%;
  top:34%;
  width:min(69vw,315px);
  min-height:100px;
  padding:16px 19px;
  border:1.8px solid rgba(58,72,65,.88);
  border-radius:25px 31px 27px 33px/30px 25px 32px 27px;
  background:rgba(255,253,249,.93);
  box-shadow:0 16px 38px rgba(42,66,55,.12),3px 4px 0 rgba(65,78,72,.08);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.speech-bubble::before{inset:5px;border-color:rgba(78,92,84,.22)}
.bubble-copy span{font-size:clamp(18px,5vw,24px);font-weight:560;letter-spacing:.025em}

.speech-bubble.actions-visible{
  left:5%;
  top:24%;
  width:min(88vw,350px);
  min-height:158px;
  padding:20px 20px 15px;
}

.speech-bubble.actions-visible .bubble-copy span{font-size:clamp(14px,3.7vw,16px);line-height:1.65;color:#46534d}
.dialogue-actions{gap:12px;margin-top:12px}
.dialogue-actions button{
  width:120px;
  height:40px;
  min-height:40px;
  border:1.5px solid rgba(164,82,105,.72);
  background:rgba(255,248,247,.93);
  color:#925169;
  box-shadow:0 5px 13px rgba(132,64,83,.1);
  font-size:11px;
}
.dialogue-actions button::after{border-color:rgba(169,79,105,.22)}
.music-status{margin-top:7px;color:#92777f;font-size:10px;text-align:center}

.intro.garden .intro-keepsake{opacity:0;transition:opacity .35s ease}
.garden-picture{background:linear-gradient(180deg,#73c4e6,#dd76a2);opacity:.34}
.garden-glow{background:radial-gradient(circle at 50% 47%,transparent 31%,rgba(72,26,58,.17))}
.garden-caption{
  position:absolute;
  left:50%;
  bottom:calc(7% + var(--safe-bottom));
  z-index:4;
  margin:0;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,249,247,.68);
  color:rgba(110,54,75,.78);
  font-family:"Songti SC","STSong","Noto Serif CJK SC",serif;
  font-size:12px;
  letter-spacing:.12em;
  white-space:nowrap;
  opacity:0;
  transform:translate(-50%,8px);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.intro.garden .garden-caption{animation:gardenCaptionIn .8s 1.15s ease forwards}
.intro.expanding .garden-caption{opacity:0;transition:opacity .25s ease}

/* 正文：稳定视线、暖白信纸、更高的前景对比 */
.page{
  padding:calc(20px + var(--safe-top)) 15px calc(78px + var(--safe-bottom));
  cursor:default;
}

.letter-deck{width:min(100%,700px);perspective:1500px}

.letter{
  padding:52px clamp(24px,6vw,58px) 36px;
  border:1px solid var(--paper-border);
  border-radius:20px 18px 22px 19px/19px 22px 18px 21px;
  background-color:var(--paper-bg);
  background-image:
    linear-gradient(90deg,transparent 0,transparent 28px,rgba(215,114,141,.09) 29px,transparent 30px),
    repeating-linear-gradient(0deg,rgba(111,77,84,.018) 0,rgba(111,77,84,.018) 1px,transparent 1px,transparent 8px),
    radial-gradient(circle at 16% 9%,rgba(255,255,255,.72),transparent 36%);
  box-shadow:0 22px 68px var(--paper-shadow),inset 0 0 0 4px rgba(255,255,255,.24);
  backdrop-filter:blur(10px) saturate(.9);
  -webkit-backdrop-filter:blur(10px) saturate(.9);
}

.letter::before{
  content:attr(data-page);
  top:22px;
  left:clamp(24px,6vw,58px);
  width:auto;
  height:auto;
  padding-bottom:7px;
  border-radius:0;
  border-bottom:1px solid rgba(142,90,104,.2);
  background:none;
  color:var(--muted-ink);
  opacity:.72;
  font-family:"Avenir Next","Helvetica Neue",sans-serif;
  font-size:9px;
  font-weight:650;
  letter-spacing:.2em;
}

.letter::after{
  right:-56px;
  bottom:-58px;
  width:150px;
  height:150px;
  opacity:.07;
  background:radial-gradient(circle,var(--rose) 0 2px,transparent 3px);
  background-size:17px 17px;
}

.letter-body{
  height:100%;
  padding-top:28px;
  justify-content:flex-start;
}

.letter-body p{
  margin:0 0 1.18em;
  color:#4b3a40;
  font-family:"Songti SC","STSong","Noto Serif CJK SC","Source Han Serif SC",serif;
  font-size:clamp(13.4px,3.55vw,16.4px);
  font-weight:400;
  line-height:1.9;
  letter-spacing:.025em;
  text-indent:2em;
  text-shadow:0 1px 0 rgba(255,255,255,.86);
}

.sheet-vulnerable,.sheet-reflective,.sheet-bright,.sheet-love{
  box-shadow:0 22px 68px var(--paper-shadow),inset 0 0 0 4px rgba(255,255,255,.24);
}

.turning-line{
  margin:8px 0 12px!important;
  padding:10px 13px 11px!important;
  border-left:2px solid rgba(191,113,135,.38);
  border-radius:0 12px 12px 0;
  background:linear-gradient(90deg,rgba(240,222,226,.42),transparent 92%);
  color:#655059!important;
  font-size:.94em!important;
}
.turning-line::after{bottom:7px;height:5px;opacity:.72}
.first-confession::after{width:min(78%,310px)}

.core-line{
  margin:5px 0 12px!important;
  padding:12px 14px 13px!important;
  border-left-color:rgba(202,85,120,.48);
  background:linear-gradient(90deg,rgba(250,223,230,.64),rgba(250,234,236,.18) 90%);
  color:#5c414b!important;
}

.lyric-line{
  margin:3px 0 11px!important;
  padding:10px 12px 10px 14px;
  border-left:1.5px solid rgba(187,105,127,.36);
  border-radius:0 11px 11px 0;
  background:linear-gradient(90deg,rgba(250,229,233,.45),transparent 90%);
  color:#755865!important;
  font-size:.92em!important;
  line-height:1.8!important;
}

.page-kitty{z-index:1;opacity:.76}
.kitty-guide{right:8px;bottom:-17px;transform:scale(.92)}
.kitty-guide span{right:62px;top:2px;background:rgba(255,252,248,.88);color:#755863}
.kitty-peek-page{bottom:-56px;opacity:.72}
.kitty-apple{right:-14px;bottom:-17px;opacity:.7}

/* 翻页和音乐不再争抢同一行 */
.page-turner{
  left:50%;
  bottom:calc(14px + var(--safe-bottom));
  gap:12px;
  min-height:48px;
  padding:6px 8px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:999px;
  background:rgba(107,47,65,.22);
  box-shadow:0 8px 25px rgba(75,28,43,.1);
  transform:translateX(-50%);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.page-turner button{
  width:68px;
  height:36px;
  border:1px solid rgba(255,255,255,.64);
  border-radius:999px;
  background:rgba(255,249,247,.9);
  color:#845467;
  font-size:11px;
  font-weight:560;
  box-shadow:none;
}

.page-turner button:disabled{opacity:.38}
.page-position{display:flex;width:78px;flex-direction:column;align-items:center;gap:5px}
.page-counter{color:rgba(255,255,255,.88);font-size:9px;font-weight:650;letter-spacing:.15em}
.page-dots{gap:5px}
.page-dots i{width:4px;height:4px;background:rgba(255,255,255,.35)}
.page-dots i.active{background:#fff;transform:scale(1.35)}

.player-controls{
  right:calc(13px + env(safe-area-inset-right,0px));
  top:calc(13px + var(--safe-top));
  bottom:auto;
  gap:6px;
  padding:5px;
  border:1px solid rgba(255,255,255,.36);
  border-radius:999px;
  background:rgba(88,42,56,.2);
  box-shadow:0 8px 24px rgba(68,28,41,.12);
  backdrop-filter:blur(11px);
  -webkit-backdrop-filter:blur(11px);
}

.sound,.next-track{
  height:34px;
  border-color:rgba(255,255,255,.52);
  background:rgba(183,80,110,.84);
  box-shadow:none;
}
.sound{width:34px}
.next-track{min-width:56px;padding:0 11px;font-size:10px}
body.opened .player-controls.idle{opacity:.42}

@keyframes keepsakeIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
@keyframes gardenCaptionIn{to{opacity:1;transform:translate(-50%,0)}}

@media(min-width:700px){
  .page{padding:5vh 22px calc(82px + var(--safe-bottom))}
  .letter{padding:62px 62px 46px}
  .letter::before{top:25px;left:62px}
  .letter-body{padding-top:32px}
  .player-controls{right:24px;top:22px}
}

@media(max-width:699px){
  .page-turner{left:50%;transform:translateX(-50%)}
  .letter-foot{bottom:9px}
}

@media(max-width:380px){
  .page{padding-left:9px;padding-right:9px}
  .letter{padding-left:20px;padding-right:20px}
  .letter::before{left:20px}
  .letter-body p{font-size:13.1px;line-height:1.8;letter-spacing:.012em}
  .page-turner{gap:8px;padding-left:6px;padding-right:6px}
  .page-turner button{width:61px}
  .page-position{width:72px}
  .player-controls{right:9px}
}

@media(max-height:700px){
  .scribble-kitty{width:min(41vw,210px);bottom:4%}
  .speech-bubble{top:27%;min-height:88px}
  .speech-bubble.actions-visible{top:12%;min-height:146px}
  .page{padding-top:calc(11px + var(--safe-top));padding-bottom:calc(69px + var(--safe-bottom))}
  .letter{padding-top:38px;padding-bottom:27px}
  .letter::before{top:15px}
  .letter-body{padding-top:17px}
  .letter-body p{font-size:13px;line-height:1.72;margin-bottom:.92em}
  .turning-line{margin:4px 0 8px!important;padding:7px 10px 8px!important}
  .core-line{padding:8px 10px 9px!important}
  .lyric-line{margin-top:1px!important;padding:7px 9px 7px 11px;line-height:1.66!important}
  .page-turner{bottom:calc(8px + var(--safe-bottom));min-height:45px}
  .player-controls{top:calc(8px + var(--safe-top))}
}

@media(prefers-reduced-motion:reduce){
  .intro-keepsake,.garden-caption,.kitty-motion,.flower-motion,.floating-petal{animation:none!important}
  .intro.garden .garden-caption{opacity:1;transform:translate(-50%,0)}
  .letter-sheet.is-entering{animation-duration:.01ms!important}
}

/* v13 · 正文回归统一排版，页角角色完整露出 */
.letter-body .turning-line,
.letter-body .core-line,
.letter-body .lyric-line{
  margin:0 0 1.18em!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  color:#4b3a40!important;
  font-size:clamp(13.4px,3.55vw,16.4px)!important;
  font-weight:400!important;
  line-height:1.9!important;
  text-indent:2em;
}

.letter-body .turning-line::after,
.letter-body .core-line::after,
.letter-body .lyric-line::after{display:none!important}

.kitty-guide{
  right:8px;
  bottom:5px;
  width:110px;
  height:96px;
  transform:none;
}

.kitty-guide img{
  right:0;
  bottom:0;
  width:88px;
}

.kitty-guide span{
  right:66px;
  top:18px;
}

.kitty-peek-page{
  left:-2px;
  bottom:22px;
  width:98px;
  height:92px;
}

.kitty-peek-page img{
  width:98px;
  transform:none;
}

@media(max-width:380px){
  .letter-body .turning-line,
  .letter-body .core-line,
  .letter-body .lyric-line{font-size:13.1px!important;line-height:1.8!important}
  .kitty-guide{right:3px;transform:scale(.9);transform-origin:right bottom}
  .kitty-peek-page{left:-1px;bottom:20px;transform:scale(.9);transform-origin:left bottom}
}

@media(max-height:700px){
  .letter-body .turning-line,
  .letter-body .core-line,
  .letter-body .lyric-line{margin-bottom:.92em!important;font-size:13px!important;line-height:1.72!important}
  .kitty-guide{bottom:3px;transform:scale(.84);transform-origin:right bottom}
  .kitty-peek-page{bottom:18px;transform:scale(.84);transform-origin:left bottom}
}

/* v14 · 更柔和的开场气泡与更清晰的花丛动态 */
.scribble-kitty{
  animation:
    kittySlowArrival 2.25s .18s cubic-bezier(.16,.75,.18,1) both,
    kittyHelloBreathe 4.8s 2.45s ease-in-out infinite;
}

.speech-bubble{
  border:2px solid rgba(67,78,72,.86);
  border-radius:36px 31px 39px 34px/31px 38px 32px 40px;
  background:linear-gradient(145deg,rgba(255,255,252,.97),rgba(255,248,244,.94));
  box-shadow:0 17px 42px rgba(47,67,58,.13),4px 5px 0 rgba(72,87,79,.08);
  animation:bubbleIn .68s 1.85s cubic-bezier(.2,.78,.2,1) forwards;
}

.speech-bubble::before{
  inset:5px 6px 6px 5px;
  border-color:rgba(91,105,97,.2);
  border-radius:31px 27px 34px 29px/27px 33px 28px 35px;
}

.speech-bubble::after{
  content:"";
  position:absolute;
  right:30px;
  bottom:-11px;
  width:21px;
  height:21px;
  border-right:2px solid rgba(67,78,72,.86);
  border-bottom:2px solid rgba(67,78,72,.86);
  border-radius:0 0 5px 0;
  background:#fff9f5;
  transform:rotate(45deg) skew(5deg,5deg);
  box-shadow:5px 5px 8px rgba(47,67,58,.04);
}

.bubble-copy{padding:2px 8px 0}
.bubble-copy span{color:#3f4c46;line-height:1.5}
.speech-bubble.actions-visible{border-radius:39px 34px 42px 36px/35px 42px 34px 40px}
.speech-bubble.actions-visible::after{right:42px}

.kitty-motion{
  animation-name:wallpaperKittyBreathStrong;
  animation-duration:4.8s;
}

.flower-one{animation-name:wallpaperFlowerOneStrong;animation-duration:5.2s}
.flower-two{animation-name:wallpaperFlowerTwoStrong;animation-duration:5.8s}
.flower-three{animation-name:wallpaperFlowerThreeStrong;animation-duration:5.5s}
.petal-one,.petal-three,.petal-five{animation-name:petalDriftOneStrong}
.petal-two,.petal-four{animation-name:petalDriftTwoStrong}

@keyframes kittySlowArrival{
  0%{opacity:0;transform:translateX(128%) translateY(10px) rotate(4deg) scale(.96)}
  48%{opacity:1;transform:translateX(29%) translateY(0) rotate(-2deg) scale(1)}
  68%{transform:translateX(15%) translateY(-9px) rotate(1.2deg)}
  84%{transform:translateX(6%) translateY(1px) rotate(-.7deg)}
  100%{opacity:1;transform:none}
}

@keyframes kittyHelloBreathe{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-5px) rotate(.6deg)}
}

@keyframes wallpaperKittyBreathStrong{
  0%,100%{transform:translateY(0) scale(1)}
  44%,56%{transform:translateY(-11px) scale(1.032)}
}

@keyframes wallpaperFlowerOneStrong{
  0%,100%{transform:rotate(0) scale(1)}
  50%{transform:translate(5px,-5px) rotate(1.7deg) scale(1.024)}
}

@keyframes wallpaperFlowerTwoStrong{
  0%,100%{transform:rotate(0) scale(1)}
  50%{transform:translate(-5px,4px) rotate(-1.6deg) scale(1.022)}
}

@keyframes wallpaperFlowerThreeStrong{
  0%,100%{transform:rotate(0) scale(1)}
  50%{transform:translate(-4px,-6px) rotate(1.4deg) scale(1.024)}
}

@keyframes petalDriftOneStrong{
  0%,100%{transform:translate(0,0) rotate(-14deg);opacity:.48}
  50%{transform:translate(34px,27px) rotate(46deg);opacity:.92}
}

@keyframes petalDriftTwoStrong{
  0%,100%{transform:translate(0,0) rotate(18deg);opacity:.5}
  50%{transform:translate(-31px,30px) rotate(-44deg);opacity:.94}
}

@media(prefers-reduced-motion:reduce){
  .scribble-kitty{animation:none!important;opacity:1}
}

/* v21 · 像素唱片结尾页 */
.sheet-finale{
  padding:0!important;
  border-color:rgba(255,255,255,.78);
  background:#fff7ee;
  box-shadow:0 22px 68px rgba(69,38,46,.22),inset 0 0 0 4px rgba(255,255,255,.3);
}

.sheet-finale::before,.sheet-finale::after{display:none}

.finale-stage{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-rows:52% 48%;
  overflow:hidden;
  border-radius:inherit;
  background:#fff7ee;
}

.finale-video-panel{
  position:relative;
  overflow:hidden;
  background:#f7c8d7;
  isolation:isolate;
}

.finale-video-panel::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  z-index:2;
  height:52px;
  background:linear-gradient(180deg,transparent,#fff7ee 92%);
  pointer-events:none;
}

#endingCdVideo{
  position:absolute;
  inset:0 0 auto;
  display:block;
  width:100%;
  height:114%;
  object-fit:cover;
  object-position:right top;
  filter:saturate(.96) brightness(1.02);
}

.finale-video-shine{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(115deg,rgba(255,255,255,.18),transparent 30%),
    radial-gradient(circle at 72% 46%,rgba(255,198,220,.08),transparent 34%);
}

.finale-message{
  position:relative;
  display:flex;
  min-height:0;
  padding:34px 26px 30px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(247,181,204,.12) 0 1px,transparent 1px 19px),
    linear-gradient(rgba(247,181,204,.1) 0 1px,transparent 1px 19px),
    linear-gradient(145deg,#fff9f1 0%,#fff5ec 58%,#f7e4e5 100%);
  background-size:19px 19px,19px 19px,100% 100%;
}

.finale-message::before{
  content:"";
  position:absolute;
  top:-26px;
  right:-12px;
  width:45%;
  height:70%;
  background:rgba(196,199,205,.28);
  clip-path:polygon(12% 0,100% 0,100% 88%,82% 88%,82% 100%,55% 100%,55% 92%,30% 92%,30% 74%,12% 74%);
}

.finale-message p{
  position:relative;
  z-index:3;
  max-width:14em;
  margin:0;
  color:#654b55;
  font-family:"Songti SC","STSong","Noto Serif CJK SC",serif;
  font-size:clamp(16px,4.4vw,21px);
  font-weight:500;
  line-height:2;
  letter-spacing:.055em;
  text-align:center;
  text-shadow:0 1px 0 rgba(255,255,255,.86);
}

.finale-heart{
  position:relative;
  z-index:3;
  display:block;
  margin-top:17px;
  color:#d77a99;
  font-size:20px;
  animation:finaleHeart 2.6s ease-in-out infinite;
}

.pixel-garden{
  position:absolute;
  z-index:1;
  width:96px;
  height:96px;
  opacity:.76;
  transform:rotate(-5deg);
}

.pixel-garden-left{left:-22px;bottom:-8px}
.pixel-garden-right{right:-31px;top:33%;transform:rotate(8deg) scale(.82)}
.pixel-garden i,.pixel-garden b,.pixel-garden em{
  position:absolute;
  display:block;
  width:25px;
  height:25px;
  background:#f4b2c8;
  box-shadow:
    25px 0 #ffd9e3,
    0 25px #ffd9e3,
    25px 25px #ef9fbc,
    50px 25px #ffd9e3,
    25px 50px #f4b2c8;
}
.pixel-garden i{left:0;top:0}
.pixel-garden b{left:43px;top:47px;transform:scale(.64);opacity:.78}
.pixel-garden em{left:10px;top:62px;transform:scale(.42);opacity:.62}

body.finale-active .player-controls{
  top:auto;
  bottom:calc(72px + var(--safe-bottom));
}

@keyframes finaleHeart{
  0%,100%{transform:scale(1);opacity:.68}
  50%{transform:scale(1.16);opacity:1}
}

@media(max-height:700px){
  .finale-stage{grid-template-rows:49% 51%}
  .finale-message{padding:20px 22px 21px}
  .finale-message p{font-size:15px;line-height:1.82}
  .finale-heart{margin-top:10px}
}

@media(prefers-reduced-motion:reduce){
  .finale-heart{animation:none}
}

/* v23 · 连续的唱片收尾画面 */
.finale-stage{
  display:block;
  background:linear-gradient(180deg,#f8ceda 0%,#fff7ee 64%,#f8e8e8 100%);
}

.finale-video-panel{
  position:absolute;
  inset:0 0 34%;
}

.finale-video-panel::after{
  bottom:-1px;
  height:44%;
  background:linear-gradient(180deg,transparent 0%,rgba(255,247,238,.12) 18%,rgba(255,247,238,.7) 63%,#fff7ee 100%);
}

#endingCdVideo{
  height:110%;
  object-position:right top;
}

.finale-video-shine{
  background:
    linear-gradient(115deg,rgba(255,255,255,.16),transparent 28%),
    radial-gradient(circle at 72% 43%,rgba(255,203,221,.1),transparent 36%),
    linear-gradient(180deg,transparent 58%,rgba(255,247,238,.22));
}

.finale-message{
  position:absolute;
  inset:42% 0 0;
  padding:23% 28px 27px;
  background:linear-gradient(180deg,transparent 0%,rgba(255,247,238,.48) 22%,rgba(255,247,238,.92) 52%,#f8e8e8 100%);
}

.finale-message::before{display:none}

.finale-message p{
  max-width:13.5em;
  color:#644b54;
  font-size:clamp(15.5px,4.2vw,20px);
  line-height:2.05;
  letter-spacing:.045em;
}

.pixel-garden{opacity:.34;filter:saturate(.88)}
.pixel-garden-left{left:-36px;bottom:-21px;transform:rotate(-5deg) scale(.86)}
.pixel-garden-right{right:-47px;top:48%;transform:rotate(8deg) scale(.66)}

body.finale-active .page-turner{
  border-color:rgba(255,255,255,.4);
  background:rgba(116,77,89,.2);
}

body.finale-active .player-controls{
  background:rgba(116,77,89,.18);
}

.sheet-finale.is-entering.transition-dissolve{
  animation:finaleDissolveIn 1.18s cubic-bezier(.2,.72,.2,1) both;
}

@keyframes finaleDissolveIn{
  0%{opacity:0;transform:scale(.965);filter:blur(7px) saturate(.8)}
  58%{opacity:1;filter:blur(1px) saturate(.94)}
  100%{opacity:1;transform:scale(1);filter:blur(0) saturate(1)}
}

@media(max-height:700px){
  .finale-video-panel{inset:0 0 37%}
  .finale-message{inset:40% 0 0;padding:25% 22px 20px}
  .finale-message p{font-size:14.5px;line-height:1.9}
  .pixel-garden-right{top:51%}
}

/* v24 · 透明收尾卡片，让循环背景视频完整延续 */
.sheet-finale{
  padding:0;
  border:1px solid rgba(255,255,255,.58);
  background:transparent;
  background-image:none;
  box-shadow:
    0 22px 58px rgba(58,31,42,.13),
    inset 0 0 0 1px rgba(255,255,255,.18);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

.finale-stage{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(28px,8vw,54px);
  background:transparent;
}

.finale-message{
  position:relative;
  inset:auto;
  width:min(100%,480px);
  min-height:260px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:42px 28px;
  overflow:visible;
  border:1px solid rgba(255,255,255,.62);
  border-radius:28px;
  background:transparent;
  box-shadow:
    0 18px 48px rgba(60,31,43,.1),
    inset 0 0 0 1px rgba(255,255,255,.14);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

.finale-message::before,
.finale-message::after{
  display:none;
}

.finale-message p{
  max-width:14em;
  margin:0;
  color:#614951;
  font-size:clamp(16px,4.3vw,20px);
  line-height:2.05;
  letter-spacing:.045em;
  text-shadow:
    0 0 9px rgba(255,255,255,1),
    0 0 18px rgba(255,255,255,.9),
    0 2px 3px rgba(255,255,255,.92);
}

.finale-video-panel,
.finale-video-shine,
#endingCdVideo,
.pixel-garden{
  display:none;
}

body.finale-active .player-controls{
  top:calc(13px + var(--safe-top));
  bottom:auto;
  background:rgba(255,255,255,.18);
}

body.finale-active .page-turner{
  border-color:rgba(255,255,255,.42);
  background:rgba(255,255,255,.16);
}

@media(max-height:700px){
  .finale-stage{padding:24px 28px}
  .finale-message{inset:auto;min-height:220px;padding:32px 22px}
  .finale-message p{font-size:14.5px;line-height:1.9}
}

/* v25 · 手机端中文正文使用两端对齐，末行保持自然 */
.letter-body p{
  text-align:justify;
  text-align-last:left;
  text-justify:inter-ideograph;
  line-break:strict;
  word-break:normal;
  overflow-wrap:break-word;
}

.finale-message p{
  text-align:center;
  text-align-last:center;
}

/* v28 · 微信 WebView 背景视频兼容：避免负层级被 body 背景遮住 */
html{background:#c85470}
body{isolation:isolate;background:transparent}
.bg{
  z-index:0;
  background:#c85470 url("assets/garden-mobile-letter.png") center/cover no-repeat;
}
.backdrop{z-index:1}
.page{z-index:2}