:root{--ink:#493a40;--rose:#a36b75;--rose-dark:#825461;--paper:#f8f3ef;--blush:#eadbd8;--line:#cbb9b3}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{color:var(--ink);background:var(--blush);font-family:'Noto Sans JP',sans-serif;font-weight:300}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid var(--rose);outline-offset:4px}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}.book{height:100vh;height:100dvh;width:100vw;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}.book::-webkit-scrollbar{display:none}.page{position:relative;flex:0 0 100vw;height:100vh;height:100dvh;overflow-y:auto;overflow-x:hidden;scroll-snap-align:start;scroll-snap-stop:always;scrollbar-width:none;padding:clamp(22px,5vh,42px) max(24px,calc((100vw - 1100px)/2)) 95px}.page::-webkit-scrollbar{display:none}.page:before{content:"";position:absolute;inset:14px;border:1px solid #cdbab5;pointer-events:none;z-index:3}.page-content{position:relative;z-index:2;max-width:920px;margin:auto;opacity:.45;transform:translateX(24px);transition:opacity .7s ease,transform .7s ease}.page.is-active .page-content,.page.is-active .cover-center{opacity:1;transform:translateX(0)}.page-top{max-width:1100px;margin:0 auto;padding-bottom:15px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;font:600 10px 'DM Sans',sans-serif;letter-spacing:.22em;color:#947d7e}.page-top span:last-child{font-size:17px;color:var(--rose)}.label,.page-kicker{font:600 10px 'DM Sans',sans-serif;letter-spacing:.26em;color:var(--rose-dark)}h1,h2,p{margin-top:0}.page h2{font-size:clamp(29px,3.3vw,44px);line-height:1.5;font-weight:300;color:#70535b}.page h2 b{font-weight:400;color:var(--rose-dark)}.page p{font-size:clamp(15px,1.5vw,17px);line-height:2.05}.book-nav{position:fixed;z-index:20;bottom:calc(16px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:23px;background:#fffaf5ed;border:1px solid #d4bfc0;border-radius:100px;padding:7px 12px;box-shadow:0 7px 24px #5e43432e;backdrop-filter:blur(12px)}.nav-arrow{width:38px;height:38px;border:0;border-radius:50%;background:transparent;color:var(--rose-dark);font-size:23px;line-height:1}.nav-arrow:hover{background:#ecddda}.nav-arrow:disabled{opacity:.25;cursor:default}.page-dots{display:flex;gap:11px;align-items:center}.page-dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:#cfb7b6;transition:width .25s,background .25s}.page-dots button[aria-current="page"]{width:23px;border-radius:10px;background:var(--rose-dark)}
.cover{background:radial-gradient(ellipse at 50% 45%,#f8f1ed 0%,#eadbd7 70%,#e2d1ce 100%);display:flex;align-items:center;justify-content:center;text-align:center}.cover:after{content:"";position:absolute;inset:0;opacity:.24;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.17'/%3E%3C/svg%3E")}.page-kicker{position:absolute;top:clamp(38px,6vh,60px);left:0;right:0;z-index:2}.cover-center{position:relative;z-index:2;opacity:.45;transform:translateX(24px);transition:opacity .7s ease,transform .7s ease}.cover-heart{font:32px Georgia,serif;color:var(--rose);margin-bottom:16px}.cover h1{white-space:nowrap;font:clamp(85px,12vw,180px)/.85 'Italianno',cursive;color:#644953;margin:0 0 34px}.cover h1 em{font:italic .25em Georgia,serif;color:var(--rose);vertical-align:20%}.cover-center p{font-size:clamp(18px,2vw,23px);line-height:1.9}.cover-rule{width:160px;margin:26px auto 25px;border-top:1px solid #bb989b;color:var(--rose);line-height:0}.cover-rule:before{content:"";display:inline-block;background:#eee2de;width:30px;height:20px;position:absolute;transform:translate(-15px,-10px);z-index:-1}.primary-button{background:var(--rose-dark);color:white;border:1px solid var(--rose-dark);padding:12px 26px;transition:transform .2s,background .2s}.primary-button:hover{transform:translateY(-3px);background:#67404c}.primary-button span{margin-left:19px}.cover-footer{position:absolute;z-index:2;bottom:calc(76px + env(safe-area-inset-bottom));left:7%;right:7%;display:flex;justify-content:space-between;font:600 9px 'DM Sans',sans-serif;letter-spacing:.2em;color:#806f72}.flower,.cover-sprig{position:absolute;pointer-events:none}.cover-flower{width:265px;height:340px;z-index:1}.cover-flower.left{left:-30px;bottom:-70px;transform:rotate(-27deg)}.cover-flower.right{right:-50px;top:40px;transform:rotate(28deg)}.cover-sprig{width:120px;height:220px;opacity:.65}.sprig-a{left:-18vw;top:-8vh;transform:rotate(-25deg)}.sprig-b{right:-17vw;bottom:-15vh;transform:rotate(20deg)}
.story-page{background:#f8f3ef}.story-content{max-width:720px;padding-top:clamp(30px,5vh,70px)}.mini-portrait{float:left;width:225px;height:305px;margin:0 55px 25px 0;background:#e9dcd6;border:10px solid #fffaf5;box-shadow:7px 13px 25px #63494c24;transform:rotate(-4deg);display:flex;align-items:center;justify-content:center;font:80px 'Italianno',cursive;color:#815d66;position:relative}.mini-portrait i{font:italic 24px Georgia,serif;margin:0 9px;color:#a7717a}.portrait-flower{position:absolute;width:110px;height:150px;bottom:-52px;left:-54px;transform:rotate(-20deg)}.story-content .label{display:block;margin:17px 0 14px}.story-content h2{margin-bottom:23px}.story-content p{margin-bottom:15px}.handwriting{font:53px 'Italianno',cursive;color:var(--rose-dark);text-align:right;margin-right:50px}
.memory-page{background:#ecdfdc}.memory-content{text-align:center;padding-top:clamp(32px,6vh,70px)}.memory-content h2{margin:15px 0 0}.memory-subtitle{color:#846f72;margin-bottom:28px}.polaroids{display:flex;justify-content:center;align-items:center;gap:clamp(12px,3vw,48px);margin-top:30px}.polaroid{width:min(25vw,240px);min-width:150px;background:#fffaf5;padding:10px 10px 2px;box-shadow:5px 10px 20px #66505025}.p-one{transform:rotate(-6deg) translateY(13px)}.p-two{transform:rotate(4deg) translateY(-6px)}.p-three{transform:rotate(-4deg) translateY(17px)}.photo-slot{height:clamp(165px,26vh,285px);background:#ddc9c6;display:grid;place-items:center;color:#9c777f;font:60px Georgia,serif}.p-two .photo-slot{background:#d9d8ce}.p-three .photo-slot{background:#e6d7cc}.polaroid p{font:29px 'Italianno',cursive;margin:7px 0 0}.memory-note{display:block;margin-top:38px;color:#916d74;font:italic 16px Georgia,serif}
.letter-page{background:#f8f3ef}.letter-content{max-width:650px;padding-top:clamp(38px,8vh,100px)}.letter-content .label,.ending-content .label{display:block;margin-bottom:20px}.letter-content h2{margin-bottom:30px}.letter-content p{margin-bottom:20px}.letter-decoration{position:absolute;width:155px;height:260px;right:-90px;top:20px;transform:rotate(25deg);opacity:.75}.turn-note{font:italic 18px Georgia,serif;color:var(--rose);display:block;text-align:right;margin-top:35px}
.ending-page{background:radial-gradient(ellipse at 55% 35%,#fff9f3,#eadbd8 80%)}.ending-content{max-width:640px;padding-top:clamp(65px,12vh,145px)}.ending-content h2{margin-bottom:30px}.ending-content p{max-width:590px}.ending-content .love-line{font-weight:500;color:var(--rose-dark);margin-top:30px}.signoff{font:55px 'Italianno',cursive;color:var(--rose-dark);margin-top:25px}.signoff span{font:300 14px 'Noto Sans JP',sans-serif;color:var(--ink);display:block;margin-top:-12px}.ending-flower{position:absolute;width:205px;height:260px;right:-150px;bottom:-50px;transform:rotate(30deg)}.replay-button{border:0;background:transparent;color:var(--rose-dark);text-decoration:underline;text-underline-offset:5px;margin-top:30px;padding:5px 0;font-size:14px}
@media(max-width:700px){.page{padding:32px 30px calc(104px + env(safe-area-inset-bottom))}.page:before{inset:9px}.page-top{font-size:9px;padding-bottom:10px}.cover h1{font-size:clamp(74px,17vw,112px)}.cover-flower{width:185px;height:245px}.cover-flower.left{left:-78px;bottom:0}.cover-flower.right{right:-85px;top:65px}.cover-sprig{width:85px}.sprig-a{left:-20px;top:-75px}.sprig-b{right:-15px;bottom:-110px}.cover-footer{font-size:8px;bottom:calc(89px + env(safe-area-inset-bottom))}.cover-footer span:last-child{display:none}.story-content{padding-top:26px}.mini-portrait{float:none;width:145px;height:145px;margin:0 auto 28px;border-width:7px;font-size:58px}.portrait-flower{width:70px;height:100px;bottom:-35px;left:-40px}.story-content .label{margin:8px 0 10px}.page h2{font-size:clamp(26px,7.3vw,36px);line-height:1.4;margin-bottom:15px}.page p{font-size:14px;line-height:1.85}.story-content p{margin-bottom:10px}.handwriting{font-size:42px;margin-top:5px;margin-right:10px}.memory-content{padding-top:40px}.memory-content h2{margin:12px 0 2px}.memory-subtitle{margin-bottom:8px}.polaroids{position:relative;width:100%;height:330px;margin:25px auto 0}.polaroid{position:absolute;min-width:0;width:43%;padding:6px 6px 0}.p-one{left:4%;top:0}.p-two{right:4%;top:10px}.p-three{left:28%;top:155px}.photo-slot{height:125px;font-size:38px}.polaroid p{font-size:23px;line-height:1.1;white-space:nowrap;margin:5px 0 8px}.memory-note{margin-top:2px;font-size:14px}.letter-content{padding-top:40px}.letter-content .label{margin-bottom:15px}.letter-content h2{margin-bottom:23px}.letter-content p{margin-bottom:17px}.letter-decoration{width:100px;right:-55px;top:0;opacity:.4}.turn-note{margin-top:22px;font-size:15px}.ending-content{padding-top:clamp(70px,13vh,120px)}.ending-flower{width:140px;right:-80px;bottom:-40px}.signoff{font-size:45px}.replay-button{margin-top:25px}}
@media(max-width:380px){.page{padding-left:27px;padding-right:27px}.cover h1{font-size:69px}.cover-center p{font-size:17px}.story-content{padding-top:15px}.mini-portrait{height:115px;width:125px;margin-bottom:18px}.page h2{font-size:25px}.page p{font-size:13px;line-height:1.75}.polaroids{height:295px}.p-three{top:145px}.photo-slot{height:105px}.polaroid p{font-size:20px}.letter-content{padding-top:27px}.letter-content p{margin-bottom:12px}}
@media(max-height:700px) and (max-width:700px){.cover h1{margin-bottom:20px}.cover-heart{margin-bottom:4px}.cover-rule{margin:15px auto 17px}.story-content{padding-top:12px}.mini-portrait{width:110px;height:105px;margin-bottom:15px}.story-content p{margin-bottom:7px}.memory-content{padding-top:20px}.polaroids{margin-top:15px}.letter-content{padding-top:20px}.letter-content h2{margin-bottom:13px}.letter-content p{margin-bottom:10px}.ending-content{padding-top:40px}}
@media(prefers-reduced-motion:reduce){.book{scroll-behavior:auto}.page-content,.cover-center,.page-dots button,.primary-button{transition:none}}

/* The bookmark is just six small dots. */
.book-nav{bottom:calc(18px + env(safe-area-inset-bottom));gap:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none}
.page-dots{gap:13px;padding:8px 4px;background:none;backdrop-filter:none}
.page-dots button{width:9px;height:9px;border-radius:50%;background:#bc9a9f;box-shadow:0 0 0 1px #fff8}
.page-dots button[aria-current="page"]{width:9px;height:9px;border-radius:50%;background:#79515f;box-shadow:0 0 0 4px #fff9,0 0 0 5px #a77781}

/* Cover: layered vellum, a wax stamp, and drifting petals. */
.cover{background:radial-gradient(circle at 20% 20%,#fff4e7 0,#f0dedb 38%,transparent 65%),radial-gradient(circle at 80% 75%,#ddb9c0 0,transparent 55%),#e6d5d3}
.cover:before{inset:8px;border:1px solid #fff9}
.cover-glass{position:absolute;inset:4% 13%;border-radius:48% 52% 43% 57%;background:#fff8f16b;filter:blur(38px);animation:glass-breathe 8s ease-in-out infinite alternate}
.cover-center{width:min(640px,83vw);padding:55px 25px 43px;background:linear-gradient(135deg,#fffdf4a8,#fff3eee0 60%,#fbeceaa0);border:1px solid #fffdf2;outline:1px solid #c69fa59c;outline-offset:-13px;box-shadow:0 20px 70px #764e592b,inset 0 0 32px #fffaf6;backdrop-filter:blur(10px);border-radius:46% 46% 42% 42%/13% 13% 11% 11%}
.cover-center:before,.cover-center:after{content:"✿";position:absolute;color:#a2727c;font-size:18px;top:17px}.cover-center:before{left:25px}.cover-center:after{right:25px}
.cover-heart{animation:heartbeat 2.5s ease-in-out infinite}.cover h1{font-size:clamp(90px,11vw,160px);text-shadow:1px 2px 0 #fff9}.cover-seal{position:absolute;z-index:5;top:9%;right:18%;width:93px;height:93px;border-radius:50%;display:grid;place-items:center;transform:rotate(15deg);background:#9d6773;color:#fff2e9;border:4px double #eac9c9;box-shadow:0 6px 18px #7a4a543d;font:30px 'Italianno',cursive}.cover-seal span{font:10px Georgia,serif;position:absolute;bottom:16px}.cover-flower.left{width:340px;height:440px;left:-35px;bottom:-110px;animation:sway-left 6s ease-in-out infinite alternate}.cover-flower.right{width:350px;height:450px;right:-65px;top:20px;animation:sway-right 7s ease-in-out infinite alternate}.cover-sprig{animation:sway-right 8s ease-in-out infinite alternate}.cover-hint{position:absolute;z-index:5;bottom:95px;left:50%;transform:translateX(-50%);color:#815765;display:flex;align-items:center;gap:12px;white-space:nowrap;font-size:13px;letter-spacing:.03em;animation:hint-bob 2s ease-in-out infinite}.hint-arrow{font:32px Georgia,serif;line-height:1;transform:rotate(0deg)}.cover-footer{bottom:33px}.floaties{position:absolute;z-index:4;inset:0;pointer-events:none;overflow:hidden}.floaties span{position:absolute;color:#b47f89;opacity:.52;animation:petal-drift 7s ease-in-out infinite alternate}.floaties span:nth-child(1){left:11%;top:22%;font-size:25px;animation-delay:-1s}.floaties span:nth-child(2){left:80%;top:30%;font-size:20px;animation-delay:-3s}.floaties span:nth-child(3){left:24%;top:71%;font-size:19px;animation-delay:-5s}.floaties span:nth-child(4){left:72%;top:14%;font-size:28px;animation-delay:-2s}.floaties span:nth-child(5){left:88%;top:67%;font-size:18px;animation-delay:-4s}.floaties span:nth-child(6){left:6%;top:55%;font-size:18px;animation-delay:-6s}.floaties span:nth-child(7){left:62%;top:78%;font-size:20px;animation-delay:-2.5s}.floaties span:nth-child(8){left:35%;top:12%;font-size:19px;animation-delay:-4.5s}

/* A full slide for the first anniversary. */
.anniversary-page{background:radial-gradient(circle at 50% 40%,#fff9f2 0,#eedfdb 70%,#dcc3c8 100%)}.anniversary-page:after{content:"";position:absolute;inset:35px;border:1px dashed #b98e96a8;border-radius:48% 48% 40% 40%/12% 12% 10% 10%;pointer-events:none}.anniversary-content{text-align:center;max-width:570px;padding-top:clamp(30px,7vh,75px)}.anniversary-content .label{color:#9a6a75}.year-mark{height:clamp(170px,25vh,265px);position:relative;display:flex;justify-content:center;align-items:center;color:#9a6975}.year-mark strong{font:clamp(200px,29vw,310px)/1 'Italianno',cursive;font-weight:400;text-shadow:3px 6px 0 #fff8;opacity:0}.anniversary-page.is-active .year-mark strong{animation:year-appear 1.3s both}.year-mark span{font-size:35px;margin:25px 0 0 8px}.anniversary-content h2{margin:12px 0 16px}.anniversary-content p{margin:0 auto 13px}.anniversary-whisper{font-weight:500;color:#935f6b}.anniversary-decor svg{position:absolute;pointer-events:none}.anniversary-decor svg:nth-child(1){width:230px;height:300px;left:5%;bottom:0;transform:rotate(-25deg);animation:sway-left 8s ease-in-out infinite alternate}.anniversary-decor svg:nth-child(2){width:180px;height:290px;right:8%;top:10%;transform:rotate(25deg);animation:sway-right 6s ease-in-out infinite alternate}.anniversary-decor svg:nth-child(3){width:160px;height:210px;right:5%;bottom:-55px;transform:rotate(22deg);animation:sway-right 9s ease-in-out infinite alternate}

/* Photo album waits for the couple's real photographs. */
.memory-page{background:radial-gradient(circle at 20% 0,#f8eee7 0,transparent 50%),#e9dad7}.memory-content{max-width:810px;padding-top:clamp(14px,3vh,35px)}.memory-content h2{margin:8px 0 0}.memory-subtitle{margin-bottom:15px!important}.photo-album{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 22px;padding:0 10px 35px}.album-photo{background:#fffaf5;padding:7px 7px 0;box-shadow:4px 7px 14px #6650502c;position:relative;opacity:0}.memory-page.is-active .album-photo{animation:photo-reveal .6s both}.memory-page.is-active .album-photo:nth-child(2){animation-delay:.1s}.memory-page.is-active .album-photo:nth-child(3){animation-delay:.2s}.memory-page.is-active .album-photo:nth-child(4){animation-delay:.3s}.memory-page.is-active .album-photo:nth-child(5){animation-delay:.4s}.memory-page.is-active .album-photo:nth-child(6){animation-delay:.5s}.album-photo:nth-child(1){transform:rotate(-4deg)}.album-photo:nth-child(2){transform:rotate(3deg)}.album-photo:nth-child(3){transform:rotate(-2deg)}.album-photo:nth-child(4){transform:rotate(3deg)}.album-photo:nth-child(5){transform:rotate(-4deg)}.album-photo:nth-child(6){transform:rotate(3deg)}.album-photo .photo-slot{height:clamp(105px,17vh,165px);font-size:37px;background:#dec9c7}.album-photo:nth-child(2n) .photo-slot{background:#d8d9ce}.album-photo:nth-child(3n) .photo-slot{background:#e7d4ca}.album-photo p{font:25px 'Italianno',cursive;line-height:1;margin:6px 0 8px}.album-photo:after{content:"";position:absolute;top:-7px;left:39%;width:22%;height:15px;background:#f7e7d8a8;transform:rotate(-3deg)}

@keyframes glass-breathe{to{transform:scale(1.07) rotate(3deg)}}@keyframes heartbeat{50%{transform:scale(1.18)}}@keyframes petal-drift{to{transform:translate(20px,-35px) rotate(45deg);opacity:.85}}@keyframes sway-left{to{transform:rotate(-16deg) translateX(12px)}}@keyframes sway-right{to{transform:rotate(34deg) translateX(-10px)}}@keyframes hint-bob{50%{transform:translate(-50%,-7px)}}@keyframes year-appear{from{opacity:0;transform:scale(.65) rotate(-8deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes photo-reveal{from{opacity:0;scale:.88}to{opacity:1;scale:1}}
@media(max-width:700px){.cover-center{width:min(82vw,410px);padding:55px 14px 34px;border-radius:45% 45% 42% 42%/11% 11% 10% 10%}.cover h1{font-size:clamp(70px,16.5vw,110px);margin-bottom:24px}.cover-heart{margin-bottom:8px}.cover-center p{font-size:18px}.cover-seal{width:70px;height:70px;top:12%;right:7%;font-size:23px}.cover-seal span{bottom:10px}.cover-flower.left{width:230px;height:290px;left:-80px;bottom:-50px}.cover-flower.right{width:215px;height:275px;right:-95px;top:30px}.cover-hint{bottom:82px;font-size:12px}.cover-footer{display:none}.page-kicker{font-size:9px;top:47px}.anniversary-page:after{inset:21px}.anniversary-content{padding-top:clamp(30px,5vh,65px)}.year-mark{height:165px}.year-mark strong{font-size:205px}.year-mark span{font-size:27px}.anniversary-content h2{font-size:30px}.anniversary-content p{max-width:320px;font-size:14px}.anniversary-decor svg:nth-child(1){width:140px;height:190px;left:-50px;bottom:35px}.anniversary-decor svg:nth-child(2){width:115px;height:190px;right:-33px;top:65px}.anniversary-decor svg:nth-child(3){width:100px;height:140px;right:-40px;bottom:-10px}.memory-content{padding-top:20px}.memory-content h2{font-size:30px}.photo-album{grid-template-columns:repeat(2,1fr);gap:13px 18px;padding:0 6px 35px}.album-photo .photo-slot{height:clamp(100px,16vh,145px);font-size:30px}.album-photo p{font-size:22px}.memory-subtitle{font-size:13px!important;margin-bottom:18px!important}}
@media(max-width:380px){.cover-center{padding:47px 12px 28px}.cover h1{font-size:66px}.cover-center p{font-size:16px}.cover-seal{top:10%}.anniversary-content{padding-top:20px}.year-mark{height:135px}.year-mark strong{font-size:170px}.anniversary-content h2{font-size:26px}.anniversary-content p{font-size:13px}.album-photo .photo-slot{height:98px}.album-photo p{font-size:19px}}
@media(max-height:700px) and (max-width:700px){.cover-center{padding-top:40px;padding-bottom:25px}.cover h1{font-size:65px;margin-bottom:12px}.cover-center p{font-size:15px}.cover-heart{margin-bottom:2px}.cover-hint{bottom:73px}.anniversary-content{padding-top:12px}.year-mark{height:115px}.year-mark strong{font-size:150px}.anniversary-content h2{font-size:25px;margin-bottom:8px}.anniversary-content p{font-size:12px;line-height:1.7}.memory-content{padding-top:5px}.album-photo .photo-slot{height:90px}.photo-album{gap:10px 15px}}
@media(prefers-reduced-motion:reduce){.cover-glass,.cover-heart,.cover-flower,.cover-sprig,.cover-hint,.floaties span,.anniversary-decor svg,.year-mark strong,.album-photo{animation:none!important}.year-mark strong,.album-photo{opacity:1}}

/* The album cards and full-screen viewer. */
.album-photo{border:1px solid #f4eae4;color:var(--ink);text-align:center;cursor:zoom-in;transition:box-shadow .25s,translate .25s}
.album-photo:hover{translate:0 -6px;box-shadow:7px 13px 20px #66505036}
.album-photo .photo-slot{display:grid;place-items:center;overflow:hidden;position:relative;border:5px double #f8efe8;outline:1px solid #b98f93;outline-offset:-9px}
.album-photo .photo-slot img{width:100%;height:100%;object-fit:cover;display:block}
.photo-title{display:block;font:26px 'Noto Serif JP',serif;color:#8b5c68;margin:10px 0 2px;line-height:1.25}
.photo-caption{display:block;min-height:2.8em;font:400 11px/1.45 'Noto Sans JP',sans-serif;margin:0 5px 8px;color:#746165}
.tap-hint{position:absolute;z-index:4;right:-16px;top:14px;background:#9b6772;color:white;padding:5px 8px;font:500 10px 'Noto Sans JP',sans-serif;box-shadow:2px 3px 8px #69424b44;animation:tap-bob 1.7s ease-in-out infinite}
.tap-hint:before{content:"";position:absolute;left:-5px;top:10px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #9b6772}
.photo-viewer:not([open]){display:none}.photo-viewer[open]{display:flex;flex-direction:column;align-items:center;justify-content:center}.photo-viewer{width:min(92vw,760px);max-height:calc(100dvh - 34px);padding:32px 30px 20px;margin:auto;border:8px solid #fff8f2;outline:1px solid #c9a9ac;background:linear-gradient(145deg,#fff9f4,#f4e6e2);box-shadow:0 20px 80px #3f2b30aa;color:var(--ink);overflow:auto}.photo-viewer::backdrop{background:#2b1b249c;backdrop-filter:blur(8px)}.viewer-close{position:absolute;right:8px;top:3px;background:none;border:0;color:#865662;font:36px Georgia,serif;line-height:1;z-index:3}.viewer-frame{width:100%;height:min(56dvh,540px);min-height:220px;border:10px solid #fffdf7;box-shadow:0 7px 20px #6a4d5329;background:radial-gradient(circle,#efdbd8,#d8c7c4);display:grid;place-items:center;overflow:hidden;position:relative}.viewer-frame:after{content:"";position:absolute;inset:8px;border:1px solid #b58c92;pointer-events:none}.viewer-frame img{width:100%;height:100%;object-fit:contain;background:#e7d9d5}.viewer-frame img[hidden],.viewer-frame span[hidden]{display:none}.viewer-frame span{font:110px Georgia,serif;color:#a8767e}.viewer-text{text-align:center;margin-top:16px}.viewer-text strong{font:35px 'Noto Serif JP',serif;color:#875a65}.viewer-text p{font-size:14px;line-height:1.6;margin:5px 0 0}.viewer-controls{display:flex;align-items:center;justify-content:center;gap:36px;margin-top:17px}.viewer-controls button{border:0;background:none;color:#875a65;font:28px Georgia,serif;padding:2px 12px}.viewer-controls button:disabled{opacity:.3}.viewer-controls span{font:500 11px 'Noto Sans JP',sans-serif;color:#90777e}

/* A space for Gong's own video, followed by a brighter final page. */
.letter-content{padding-top:clamp(22px,4vh,55px)}.letter-content h2{margin-bottom:18px}.letter-content p{margin-bottom:13px}
.ending-page{background:radial-gradient(circle at 50% 46%,#fffaf3 0,#f4e4df 41%,#dcbcc2 100%)}.ending-page:after{content:"";position:absolute;z-index:0;width:min(75vw,650px);height:min(75vw,650px);border-radius:50%;left:50%;top:43%;transform:translate(-50%,-50%);background:#fff6ed9a;filter:blur(45px);animation:ending-glow 5s ease-in-out infinite alternate}.ending-content{z-index:2;padding:clamp(42px,8vh,105px) clamp(12px,4vw,45px) 45px;text-align:center;background:linear-gradient(140deg,#fffdf6a1,#fff8f0aa);border:1px solid #fff9f0;box-shadow:0 18px 55px #81596025;backdrop-filter:blur(7px)}.ending-content h2{margin:15px 0 22px}.ending-content p{margin-left:auto;margin-right:auto}.ending-content .love-line{font-size:clamp(18px,2vw,23px);animation:love-shimmer 3s ease-in-out infinite alternate}.ending-content .signoff{margin-top:30px}.final-script{display:block;font:700 clamp(32px,4vw,48px) 'Noto Serif JP',serif;color:#9b6571;opacity:0}.ending-page.is-active .final-script{animation:final-reveal 1.3s .2s both}.ending-flower{width:210px;height:270px;right:-135px;bottom:-72px;animation:sway-right 6s ease-in-out infinite alternate}.ending-atmosphere{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}.ending-atmosphere span{position:absolute;color:#a36b75;opacity:.45;animation:petal-drift 5s ease-in-out infinite alternate}.ending-atmosphere span:nth-child(1){font-size:44px;left:8%;top:20%;animation-delay:-1s}.ending-atmosphere span:nth-child(2){font-size:30px;right:13%;top:14%;animation-delay:-3s}.ending-atmosphere span:nth-child(3){font-size:26px;left:20%;bottom:15%;animation-delay:-2s}.ending-atmosphere span:nth-child(4){font-size:20px;right:11%;bottom:20%;animation-delay:-4s}.ending-atmosphere span:nth-child(5){font-size:38px;left:6%;bottom:37%;animation-delay:-2.5s}.ending-atmosphere span:nth-child(6){font-size:32px;right:5%;top:47%;animation-delay:-.5s}.ending-atmosphere span:nth-child(7){font-size:23px;right:30%;bottom:8%;animation-delay:-5s}
@keyframes tap-bob{50%{transform:translate(5px,-5px)}}@keyframes video-pulse{50%{transform:scale(1.1);box-shadow:0 0 0 10px #fff5}}@keyframes ending-glow{to{transform:translate(-50%,-50%) scale(1.16);opacity:.65}}@keyframes final-reveal{from{opacity:0;transform:translateY(18px) rotate(-5deg)}to{opacity:1;transform:translateY(0) rotate(0)}}@keyframes love-shimmer{to{text-shadow:0 0 17px #b56d80a1}}
@media(max-width:700px){.album-photo{padding:5px 5px 0}.album-photo .photo-slot{height:clamp(95px,15vh,140px);border-width:3px;outline-offset:-6px}.photo-title{font-size:19px;margin:5px 0 0}.photo-caption{font-size:9px;line-height:1.35;min-height:2.7em;margin:0 1px 5px}.tap-hint{font-size:9px;right:-16px;top:12px}.photo-viewer{width:94vw;padding:29px 12px 16px;border-width:6px}.viewer-frame{height:min(54dvh,480px);min-height:180px;border-width:7px}.viewer-text strong{font-size:27px}.viewer-text p{font-size:12px}.letter-content{padding-top:clamp(15px,2vh,35px)}.letter-content h2{font-size:clamp(25px,6.8vw,33px);margin-bottom:13px}.letter-content p{font-size:13px;line-height:1.75;margin-bottom:10px}.ending-content{padding:clamp(47px,8vh,85px) 20px 42px}.ending-content h2{font-size:clamp(27px,7vw,37px)}.ending-content p{font-size:14px}.ending-flower{width:140px;right:-72px;bottom:-72px}}
@media(max-width:380px){.photo-title{font-size:17px}.photo-caption{font-size:8px}.letter-content p{font-size:12px}.ending-content{padding-top:35px}.ending-content p{font-size:12px}.ending-content h2{font-size:26px}}
@media(max-height:700px) and (max-width:700px){.photo-album{gap:8px 15px}.album-photo .photo-slot{height:85px}.photo-title{font-size:17px}.photo-caption{font-size:8px}.letter-content h2{margin-bottom:8px}.letter-content p{font-size:11px;line-height:1.6;margin-bottom:6px}.ending-content{padding-top:25px}.ending-content h2{margin:8px 0 12px}.ending-content p{line-height:1.7}.ending-content .signoff{margin-top:12px}}
@media(prefers-reduced-motion:reduce){.tap-hint,.ending-page:after,.ending-flower,.ending-atmosphere span,.ending-content .love-line,.final-script{animation:none!important}.final-script{opacity:1}}

/* The story photograph keeps its original landscape composition. */
.page:before{z-index:1}
.mini-portrait{width:300px;height:225px;padding:0;overflow:visible}
.mini-portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}

@media(max-width:700px){.mini-portrait{width:min(245px,76vw);height:auto;aspect-ratio:4/3;margin-bottom:25px}}
@media(max-width:380px){.mini-portrait{width:min(210px,70vw);height:auto;margin-bottom:18px}}
@media(max-height:700px) and (max-width:700px){.mini-portrait{width:min(190px,65vw);height:auto}}

/* The cover flower now sits directly on two equal lines. */
.cover-rule{width:min(190px,70%);border:0;margin:26px auto 25px;display:flex;align-items:center;justify-content:center;gap:11px;line-height:1;color:#a36b75;font-size:20px}
.cover-rule:before,.cover-rule:after{content:"";position:static;display:block;flex:1;width:auto;height:1px;background:#bd999d;transform:none;z-index:auto}

/* The outgoing photograph glides away as the next one enters. */
.viewer-stage{position:relative;width:100%;height:min(56dvh,540px);min-height:220px;overflow:hidden;isolation:isolate}
.viewer-stage .viewer-frame{height:100%;min-height:0}
.viewer-stage .viewer-ghost{position:absolute;inset:0;z-index:2;pointer-events:none}

/* Vines grow up both sides of the last page; blossoms and hearts follow. */
.ending-vine{position:absolute;z-index:2;width:230px;height:640px;bottom:-75px;pointer-events:none;overflow:visible;filter:drop-shadow(2px 7px 4px #78575b30)}
.vine-left{left:2%}.vine-right{right:2%;transform:scaleX(-1)}
.vine-stem,.vine-branch{fill:none;stroke:#5e7865;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1100;stroke-dashoffset:1100}
.vine-branch{stroke-width:3}
.ending-page.is-active .vine-stem{animation:vine-grow 2.4s .15s ease-out both}
.ending-page.is-active .vine-branch{animation:vine-grow 1.5s 1.2s ease-out both}
.vine-leaves{fill:#839c7d;stroke:#617b66;stroke-width:1.5;opacity:0}
.ending-page.is-active .vine-leaves{animation:leaves-grow 1s 1.4s ease-out both}
.vine-bloom{fill:#f9e6e2;stroke:#bb818a;stroke-width:1.5;opacity:0;scale:0;transform-box:fill-box;transform-origin:center}
.vine-bloom .bloom-center{fill:#d5a47d;stroke:#9d7465}
.ending-page.is-active .bloom-one{animation:blossom-open 1s 1.8s cubic-bezier(.16,1,.3,1) both}
.ending-page.is-active .bloom-two{animation:blossom-open .8s 2.25s cubic-bezier(.16,1,.3,1) both}
.vine-right .vine-bloom{fill:#fff1e6}.vine-right .bloom-center{fill:#d8b581}
.ending-content{z-index:3;background:linear-gradient(140deg,#fffdf6c9,#fff8f0bd)}
.final-script{opacity:0;clip-path:inset(0 100% 0 0);transform:none}
.ending-page.is-active .final-script{animation:ink-write 1.4s 1.25s ease-out both}
.ending-atmosphere{z-index:4}.ending-atmosphere span{top:auto!important;bottom:-10%;opacity:0;color:#a85e73;animation:heart-rise 6s linear infinite}
.ending-atmosphere span:nth-child(1){left:7%;font-size:35px;animation-delay:1s}.ending-atmosphere span:nth-child(2){left:16%;font-size:20px;animation-delay:3.2s}.ending-atmosphere span:nth-child(3){left:24%;font-size:24px;animation-delay:5.1s}.ending-atmosphere span:nth-child(4){left:35%;font-size:17px;animation-delay:2s}.ending-atmosphere span:nth-child(5){left:46%;font-size:26px;animation-delay:4.3s}.ending-atmosphere span:nth-child(6){left:57%;font-size:19px;animation-delay:.4s}.ending-atmosphere span:nth-child(7){left:66%;font-size:31px;animation-delay:2.8s}.ending-atmosphere span:nth-child(8){left:74%;font-size:16px;animation-delay:5.6s}.ending-atmosphere span:nth-child(9){left:84%;font-size:29px;animation-delay:1.7s}.ending-atmosphere span:nth-child(10){left:92%;font-size:22px;animation-delay:4.8s}.ending-atmosphere span:nth-child(11){left:29%;font-size:14px;animation-delay:6.1s}.ending-atmosphere span:nth-child(12){left:79%;font-size:18px;animation-delay:6.7s}
@keyframes vine-grow{to{stroke-dashoffset:0}}@keyframes leaves-grow{from{opacity:0;filter:blur(4px)}to{opacity:1;filter:blur(0)}}@keyframes blossom-open{0%{opacity:0;scale:0;rotate:-40deg}70%{opacity:1;scale:1.2;rotate:8deg}100%{opacity:1;scale:1;rotate:0}}@keyframes ink-write{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}@keyframes heart-rise{0%{opacity:0;transform:translateY(0) translateX(0) scale(.6)}12%{opacity:.65}85%{opacity:.6}100%{opacity:0;transform:translateY(-95dvh) translateX(25px) scale(1.2)}}
@media(max-width:700px){.viewer-stage{height:min(54dvh,480px);min-height:180px}.ending-vine{width:165px;height:510px;bottom:-115px}.vine-left{left:-62px}.vine-right{right:-62px}.ending-content{background:linear-gradient(140deg,#fffdf6d9,#fff8f0d2)}.cover-rule{margin:19px auto 20px}}
@media(max-width:380px){.ending-vine{width:130px;height:440px;bottom:-105px}.vine-left{left:-53px}.vine-right{right:-53px}.cover-rule{margin:14px auto 15px}}
@media(prefers-reduced-motion:reduce){.vine-stem,.vine-branch{stroke-dashoffset:0}.vine-leaves,.vine-bloom{opacity:1;scale:1}.final-script{clip-path:none}.ending-atmosphere span{animation:none!important;opacity:.25}}

.photo-slot span[hidden]{display:none}
.album-photo .photo-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo-count:not([hidden]){position:absolute;top:13px;left:13px;z-index:4;display:block;padding:3px 7px;background:#fffaf0dc;border:1px solid #dbc0c0;color:#805662;font:600 10px 'Noto Sans JP',sans-serif;box-shadow:1px 2px 5px #64414a33}
.ending-atmosphere span{color:#a86e7b;animation:heart-rise-gentle 16s linear infinite}
.ending-atmosphere span:nth-child(1){left:12%;font-size:20px;animation-delay:0s}
.ending-atmosphere span:nth-child(2){left:32%;font-size:14px;animation-delay:3.5s;animation-duration:18s}
.ending-atmosphere span:nth-child(3){left:51%;font-size:18px;animation-delay:7s;animation-duration:17s}
.ending-atmosphere span:nth-child(4){left:72%;font-size:16px;animation-delay:10.5s;animation-duration:19s}
.ending-atmosphere span:nth-child(5){left:87%;font-size:21px;animation-delay:14s;animation-duration:18s}
@keyframes heart-rise-gentle{0%{opacity:0;transform:translateY(0) scale(.7)}15%{opacity:.3}80%{opacity:.3}100%{opacity:0;transform:translateY(-90dvh) translateX(12px) scale(1)}}
@media(max-width:700px){.photo-count:not([hidden]){top:9px;left:9px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.ending-atmosphere span{animation:none!important;opacity:.18}}

/* Give the letter room to breathe without a video block. */
.letter-content{padding-top:clamp(65px,11vh,120px)}
@media(max-width:700px){.letter-content{padding-top:clamp(55px,9vh,85px)}}
@media(max-height:700px) and (max-width:700px){.letter-content{padding-top:clamp(25px,5vh,45px)}}

/* Japanese letterforms and album labels. */
.cover-center{min-width:0}
.page-top,.label,.page-kicker{letter-spacing:.1em}
.photo-title{font-size:21px;line-height:1.4;font-weight:500}
.final-script{font-weight:600}
@media(max-width:700px){.cover-center{max-width:calc(100vw - 48px)}.cover h1{font-size:clamp(54px,14vw,74px)}.cover-center p{font-size:15px;line-height:1.85}.photo-title{font-size:16px;line-height:1.35;min-height:2.7em;margin:5px 0 0}.photo-caption{font-size:10px;line-height:1.45;min-height:4.35em}.tap-hint{font-size:9px}}
@media(max-width:380px){.photo-title{font-size:14px}.photo-caption{font-size:9px}}