.cover:before,.cover:after{display:none}
.cover{height:100svh;min-height:640px;padding:0;display:block;background:var(--red) url("page-background.jpg?v=126") center/cover no-repeat}
.cover .topWord{top:7px;left:0;width:100%;height:auto;display:block;object-fit:contain;opacity:.96;z-index:3}
.cover .mute{top:18px;right:18px;width:36px;height:36px}
.cover .side{top:25.5%;font-size:24px;line-height:1.8;z-index:3}
.cover .side.left{left:2.5%}.cover .side.right{right:2.5%}
.cover .vword{top:45%;font-size:14px;z-index:3}.cover .vl{left:5.2%}.cover .vr{right:5.2%}
.cover .vl{transform:rotate(180deg)}
.cover .center{position:absolute;top:20.4%;left:0;width:100%;margin:0;z-index:2}
.cover .shape{width:min(66vw,400px);height:min(66vw,400px);margin:0 auto;background:url("double-frame.png?v=126") center/contain no-repeat}
.cover .shape .double{font-size:clamp(70px,16vw,100px)}
.cover .shape{position:relative}
.cover .shape .doubleShadow{position:absolute;width:78%;height:auto;display:block;opacity:.48;transform:translate(7px,9px);filter:sepia(1) saturate(3) hue-rotate(320deg)}
.cover .shape .doubleAsset{position:relative;width:63%;height:auto;display:block;filter:drop-shadow(0 7px 0 #8f252855)}
.cover .sub{margin-top:3.8vh;font-size:clamp(17px,4vw,23px);letter-spacing:.1em}
.cover .invite{margin-top:4.8vh;font-size:clamp(20px,4.5vw,27px);letter-spacing:.16em}
.cover .names{margin-top:5vh;font-size:clamp(17px,3.8vw,22px);letter-spacing:.05em}
.cover .plum.top{width:min(43vw,250px);right:-15px;top:-8px;mix-blend-mode:normal;z-index:2}
.cover .plum.bottom{width:min(34vw,198px);left:0px;bottom:20px;mix-blend-mode:normal;z-index:2}
.page:before{display:none}
.pageHead{position:absolute;left:0;top:0;width:100%;height:92px;overflow:hidden;border-radius:8px 8px 0 0;background:transparent;z-index:7;pointer-events:none}
.headWord{position:absolute;left:0;top:7px;width:100%;height:60px;background:url("wedding-top.png?v=126") center top/auto 60px no-repeat;opacity:.96}
.pageHead .headWord{opacity:0;transform:translateY(-16px) scale(.96);transform-origin:center top}
.page.header-enter .headWord{animation:headerWordIn .8s cubic-bezier(.2,.8,.2,1) both}
.headPlum{position:absolute;right:-12px;top:-10px;width:min(29vw,170px);height:auto}
.cover .pageHead{display:block}
.cover .pageHead .headPlum{width:min(43vw,250px);right:-15px;top:-8px}
.cover .pageHead{animation:coverDrop .8s ease both}
.cover .side.left{animation:sideLeft .8s .2s ease both}.cover .side.right{animation:sideRight .8s .3s ease both}
.cover .vl{animation:sideLeftRot .8s .4s ease both}.cover .vr{animation:sideRight .8s .5s ease both}
.cover .plum.top{transform-origin:right center;backface-visibility:hidden;animation:bookFlipTop 1.05s .35s cubic-bezier(.2,.8,.2,1) both}.cover .plum.bottom{transform-origin:left center;backface-visibility:hidden;animation:bookFlipIn 1.1s .6s cubic-bezier(.2,.8,.2,1) both}
.cover .shape{animation:shapeIn 1s .55s cubic-bezier(.2,.8,.2,1) both}.cover .shape .doubleShadow{animation:doubleIn .8s .82s cubic-bezier(.2,.8,.2,1) both}.cover .shape .doubleAsset{animation:doubleIn .7s 1.05s cubic-bezier(.2,.8,.2,1) both}.cover .shape .doubleShadow{animation-name:doubleStable}.cover .shape .doubleAsset{animation-name:doubleStable}
.cover .sub{animation:textIn .7s 1.15s ease both}.cover .invite{animation:textIn .7s 1.3s ease both}.cover .names{animation:textIn .7s 1.45s ease both}
@keyframes coverDrop{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}@keyframes sideLeft{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:translateX(0)}}@keyframes sideRight{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:translateX(0)}}@keyframes plumIn{from{opacity:0;transform:scale(.88) translateY(-12px)}to{opacity:1;transform:none}}@keyframes shapeIn{from{opacity:0;transform:scale(.72) rotate(-8deg)}to{opacity:1;transform:none}}@keyframes doubleIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}@keyframes textIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.page,.cover{background:url("page-background.jpg?v=126") center/cover no-repeat;background-blend-mode:normal}
.wide .veil{background:linear-gradient(180deg,#a51d2226 0%,#a51d2238 42%,#3b080acc 100%)}
.nav button:first-child{display:none}
.nav{display:none}
.page{flex:0 0 100%;scroll-snap-align:start}
html{scroll-snap-type:none}body{overflow:hidden}main{display:flex;height:100svh;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth}main::-webkit-scrollbar{display:none}
.page{touch-action:pan-x;-webkit-overflow-scrolling:touch}
.stf__parent{margin:0 auto!important;max-width:420px!important}.stf__block{background:transparent!important}main{overflow:hidden!important;display:block!important;height:100svh!important;max-width:420px!important}.stf__page{background:transparent!important}
.stf__parent{touch-action:none!important}
.bookStage{perspective:1400px}
main{position:relative;display:block;overflow:hidden}
main .page{position:absolute;inset:0;width:100%;height:100%;display:none;flex:none;transform-style:preserve-3d;backface-visibility:hidden}
main .page.pageCurrent{display:flex;z-index:2;transform:none}
main .page.pageNext,main .page.pagePrev{display:flex;z-index:1}
main .page.turnNextOut{animation:turnNextOut .72s cubic-bezier(.65,.05,.36,1) both;transform-origin:left center;z-index:3}
main .page.turnNextIn{animation:turnNextIn .72s cubic-bezier(.65,.05,.36,1) both;transform-origin:right center}
main .page.turnPrevOut{animation:turnPrevOut .72s cubic-bezier(.65,.05,.36,1) both;transform-origin:right center;z-index:3}
main .page.turnPrevIn{animation:turnPrevIn .72s cubic-bezier(.65,.05,.36,1) both;transform-origin:left center}
@keyframes turnNextOut{from{transform:rotateY(0);box-shadow:none}to{transform:rotateY(-100deg);box-shadow:18px 0 35px #26030888}}
@keyframes turnNextIn{from{transform:rotateY(100deg);box-shadow:-18px 0 35px #26030888}to{transform:rotateY(0);box-shadow:none}}
@keyframes turnPrevOut{from{transform:rotateY(0);box-shadow:none}to{transform:rotateY(100deg);box-shadow:-18px 0 35px #26030888}}
@keyframes turnPrevIn{from{transform:rotateY(-100deg);box-shadow:18px 0 35px #26030888}to{transform:rotateY(0);box-shadow:none}}
.page:not(.cover) .headPlum{display:none}
.page:not(.cover)>.orn{display:none}
.cover .topWord,.cover>.mute{display:none}
.cover .mute{display:none}
.music{background-color:rgba(132,17,13,.56);background-image:url("music-icon.png?v=128");background-position:center;background-size:contain;background-repeat:no-repeat;border:0;font-size:0}
@media(max-width:380px){.cover .side{font-size:20px}.cover .vword{font-size:14px}.cover .center{top:20%}}
@keyframes sideLeftRot{from{opacity:0;transform:translateX(-18px) rotate(180deg)}to{opacity:1;transform:translateX(0) rotate(180deg)}}
@keyframes doubleStable{from{opacity:0;transform:rotate(180deg) scale(.7)}to{opacity:1;transform:rotate(0) scale(1)}}
.cover .shape{background:none;animation:none;position:relative}
.cover .shape:before{content:"";position:absolute;inset:0;background:url("double-frame.png?v=126") center/contain no-repeat;animation:shapeRotateIn 1s .55s cubic-bezier(.2,.8,.2,1) both;z-index:0}
.cover .shape .doubleShadow{animation-name:doubleIn}.cover .shape .doubleAsset{animation:coverDoubleInBeat 1.7s 1.05s cubic-bezier(.2,.8,.2,1) both}
@keyframes plumSwayIn{0%{opacity:0;transform:translateX(-10px) rotate(-6deg) scale(.9)}35%{opacity:1;transform:translateX(4px) rotate(4deg) scale(1.01)}65%{transform:translateX(-2px) rotate(-2deg) scale(1)}100%{opacity:1;transform:translateX(0) rotate(0) scale(1)}}
@keyframes plumSwayTop{0%{opacity:0;transform:translateX(10px) rotate(6deg) scale(.9)}35%{opacity:1;transform:translateX(-4px) rotate(-4deg) scale(1.01)}65%{transform:translateX(2px) rotate(2deg) scale(1)}100%{opacity:1;transform:translateX(0) rotate(0) scale(1)}}
@keyframes bookFlipIn{0%{opacity:0;transform:perspective(700px) rotateY(-90deg) translateX(-12px)}55%{opacity:1;transform:perspective(700px) rotateY(14deg) translateX(2px)}78%{opacity:1;transform:perspective(700px) rotateY(-3deg) translateX(-1px)}88%{opacity:1;transform:perspective(700px) rotateY(3deg) translateX(1px)}100%{opacity:1;transform:perspective(700px) rotateY(0) translateX(0)}}
@keyframes bookFlipTop{0%{opacity:0;transform:perspective(700px) rotateY(90deg) translateX(12px)}55%{opacity:1;transform:perspective(700px) rotateY(-14deg) translateX(-2px)}78%{opacity:1;transform:perspective(700px) rotateY(3deg) translateX(1px)}88%{opacity:1;transform:perspective(700px) rotateY(-3deg) translateX(-1px)}100%{opacity:1;transform:perspective(700px) rotateY(0) translateX(0)}}
@keyframes shapeRotateIn{from{opacity:0;transform:scale(.72) rotate(-180deg)}to{opacity:1;transform:scale(1) rotate(0deg)}}
@keyframes coverDoubleInBeat{0%{opacity:0;transform:scale(.7)}45%{opacity:1;transform:scale(1)}68%{opacity:1;transform:scale(1.08)}80%{opacity:1;transform:scale(.97)}90%{opacity:1;transform:scale(1.05)}100%{opacity:1;transform:scale(1)}}
@keyframes headerWordIn{from{opacity:0;transform:translateY(-16px) scale(.96)}to{opacity:.96;transform:translateY(0) scale(1)}}
.cover .shape{animation-name:shapeRotateIn}
.stf__item.page[style*="display: block"]:not(.cover):not(.rsvp){display:flex!important}
.stf__item.cover[style*="display: block"],.stf__item.rsvp[style*="display: block"]{display:block!important}
html,body{height:100%;min-height:100%;}
main.stf__parent{height:100dvh!important;min-height:100dvh!important;}
main.stf__parent{position:fixed!important;top:0!important;left:50%!important;bottom:0!important;margin:0!important;width:min(100%,420px)!important;transform:translateX(-50%) translateZ(0)!important;}
main.stf__parent>.stf__wrapper,main.stf__parent>.stf__wrapper>.stf__block{height:100%!important;min-height:100%!important;padding-bottom:0!important;}
.stf__item{height:100%!important;min-height:100%!important;}
.story-page{color:var(--cream);}
.story-page::after{display:none}
.story-side-left{position:absolute;left:0;width:calc(8% + 20px);top:calc(25.5% + 20px);z-index:4;text-align:center;color:var(--cream);font-size:26px;line-height:1.45;letter-spacing:.08em}
.story-side-left small{display:block;margin:3px 0 4px;font:17px Georgia;letter-spacing:.04em}
.story-side-right{position:absolute;right:5.2%;top:45%;transform:none;z-index:4;writing-mode:vertical-rl;font:14px Georgia;letter-spacing:.25em;color:#f3ce8b99}
.story-plum{position:absolute;left:-3%;bottom:18%;width:30%;height:auto;z-index:3;pointer-events:none;opacity:.98;transform:rotate(141deg);transform-origin:center center}
.story-watermark{position:absolute;right:2%;bottom:2%;width:50%;height:auto;z-index:0;opacity:1;pointer-events:none}
.story-emblem{position:absolute;left:7%;bottom:4%;width:27%;aspect-ratio:1;z-index:4;display:grid;place-items:center}
.story-emblem .story-frame{position:absolute;width:100%;height:100%;object-fit:contain}
.story-emblem .story-double{position:relative;width:58%;height:auto;object-fit:contain;filter:sepia(.35) saturate(1.6)}
.story-copy{position:absolute;right:12%;bottom:4%;width:52%;z-index:4;color:var(--cream);font-size:clamp(13px,3.4vw,18px);line-height:2;text-align:right;white-space:nowrap;text-shadow:0 1px 2px #6b101499}
.story-page.story-ready .story-side-right{animation:sideRight .8s .5s ease both}

.story-page .photo.reveal{opacity:0;transform:translateY(22px) scale(.96);transition:none}
.story-page .photo img{object-position:60% center}
.story-page.story-ready .photo.reveal{opacity:1;transform:none}
.story-page:not(.story-ready)>*:not(.pageHead){opacity:0!important}
@media(max-width:380px){.story-side-left{font-size:22px}.story-side-left small{font-size:14px}.story-side-right{font-size:14px}.story-copy{font-size:12px;line-height:1.95}}
.third-page::before,.third-page::after{content:"";position:absolute;display:block;pointer-events:none;z-index:3;background-repeat:no-repeat;background-size:contain;opacity:0}
.third-page::before{left:auto;right:-15px;top:-8px;width:min(43vw,250px);height:min(43vw,250px);background-image:url("plum-top.png?v=126");transform-origin:right center}
.third-page::after{left:0;bottom:20px;width:min(34vw,198px);height:min(34vw,198px);background-image:url("plum-bottom.png?v=126");transform-origin:left center}
.third-page .photo{position:relative;overflow:visible}
.third-page .photo::before,.third-page .photo::after{position:absolute;display:block;z-index:5;opacity:0;pointer-events:none;color:#f3ce8bd9;text-shadow:0 1px 2px #6b101477}
.third-page .photo::before{display:none}
.third-page .photo::after{display:none}
.third-page.third-ready::before{animation:bookFlipTop 1.05s .35s cubic-bezier(.2,.8,.2,1) both}
.third-page.third-ready::after{animation:bookFlipIn 1.1s .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes thirdPlumTopFlip{0%{opacity:0;transform:scaleX(-1) perspective(700px) rotateY(90deg) translateX(12px)}55%{opacity:1;transform:scaleX(-1) perspective(700px) rotateY(-14deg) translateX(-2px)}78%{opacity:1;transform:scaleX(-1) perspective(700px) rotateY(3deg) translateX(1px)}88%{opacity:1;transform:scaleX(-1) perspective(700px) rotateY(-3deg) translateX(-1px)}100%{opacity:1;transform:scaleX(-1) perspective(700px) rotateY(0) translateX(0)}}
@keyframes thirdSideLeftIn{from{opacity:0;transform:translateX(-14px) rotate(180deg)}to{opacity:1;transform:translateX(0) rotate(180deg)}}
@keyframes thirdSideRightIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:translateX(0)}}

.third-page .third-side-left{position:absolute;left:5.2%;top:45%;writing-mode:vertical-rl;transform:rotate(180deg);z-index:5;opacity:0;pointer-events:none;color:#f3ce8b99;font:14px Georgia;letter-spacing:.25em}
.third-page.third-ready .third-side-left{animation:sideLeftRot .8s .4s ease both}

.third-page .third-side-right{position:absolute;right:4%;top:22%;z-index:5;display:flex;flex-direction:column;align-items:flex-start;gap:1.45em;opacity:0;pointer-events:none;color:#f3ce8bd9;text-shadow:0 1px 2px #6b101477}
.third-page .third-side-right span{display:block;writing-mode:vertical-rl;font:17px/1.55 'Noto Serif SC',serif;letter-spacing:.12em}
.third-page.third-ready .third-side-right{animation:thirdSideRightIn .9s .35s cubic-bezier(.2,.8,.2,1) both}

.third-page:not(.third-ready)>*:not(.pageHead){opacity:0!important}
.third-page.third-ready .photo.reveal{opacity:1;transform:none}

.third-page .third-emblem{position:absolute;right:7%;bottom:4%;width:27%;aspect-ratio:1;z-index:4;display:grid;place-items:center;opacity:0}
.third-page .third-emblem .third-frame{position:absolute;width:100%;height:100%;object-fit:contain;opacity:0}
.third-page .third-emblem .third-double{position:relative;width:58%;height:auto;object-fit:contain;filter:sepia(.35) saturate(1.6);opacity:0}
.third-page.third-ready .third-emblem{opacity:1}
.third-page.third-ready .third-frame{animation:thirdFrameIn 1s .33s cubic-bezier(.2,.8,.2,1) both}
.third-page.third-ready .third-double{animation:thirdDoubleBeat 1.25s .42s cubic-bezier(.2,.8,.2,1) both}
@keyframes thirdFrameIn{from{opacity:0;transform:scale(.72) rotate(180deg)}to{opacity:1;transform:scale(1) rotate(0deg)}}
@keyframes thirdDoubleBeat{0%{opacity:0;transform:scale(.82)}56%{opacity:1;transform:scale(1)}72%{opacity:1;transform:scale(1.08)}84%{opacity:1;transform:scale(.98)}93%{opacity:1;transform:scale(1.05)}100%{opacity:1;transform:scale(1)}}

.third-page .label{left:0;width:100%;bottom:10%;text-align:center;font-size:clamp(17px,3.8vw,22px);line-height:1.35;letter-spacing:.16em;color:var(--gold);opacity:0;transform:translateY(12px) scale(.96)}

.third-page.third-ready .label{animation:thirdLabelInBeat 1.7s .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes thirdLabelInBeat{0%{opacity:0;transform:translateY(12px) scale(.96)}38%{opacity:1;transform:translateY(0) scale(1)}65%{opacity:1;transform:translateY(0) scale(1.06)}78%{opacity:1;transform:translateY(0) scale(.97)}90%{opacity:1;transform:translateY(0) scale(1.04)}100%{opacity:1;transform:translateY(0) scale(1)}}

.fourth-page::before,.fourth-page::after{content:"";position:absolute;display:block;pointer-events:none;z-index:3;background-repeat:no-repeat;background-size:contain;opacity:0}
.fourth-page::before{left:auto;right:-15px;top:-8px;width:min(43vw,250px);height:min(43vw,250px);background-image:url("plum-top.png?v=126");transform-origin:right center}
.fourth-page::after{display:none}
.fourth-page .photo{position:relative;overflow:visible}
.fourth-page:not(.fourth-ready)>*:not(.pageHead){opacity:0!important}
.fourth-page.fourth-ready .photo.reveal{opacity:1;transform:none}
.fourth-page .fourth-side-left{position:absolute;left:4%;top:22%;z-index:5;display:flex;flex-direction:column;align-items:flex-start;gap:1.45em;opacity:0;pointer-events:none;color:#f3ce8bd9;text-shadow:0 1px 2px #6b101477}
.fourth-page .fourth-side-left span{display:block;writing-mode:vertical-rl;font:17px/1.55 'Noto Serif SC',serif;letter-spacing:.12em}
.fourth-page.fourth-ready .fourth-side-left{animation:fourthSideLeftIn .9s .35s cubic-bezier(.2,.8,.2,1) both}
.fourth-page .fourth-side-right{position:absolute;right:5.2%;top:45%;writing-mode:vertical-rl;transform:none;z-index:5;opacity:0;pointer-events:none;color:#f3ce8b99;font:14px Georgia;letter-spacing:.25em}
.fourth-page.fourth-ready .fourth-side-right{animation:sideRight .8s .5s ease both}
.fourth-page.fourth-ready::before{animation:bookFlipTop 1.05s .35s cubic-bezier(.2,.8,.2,1) both}
.fourth-page .fourth-emblem{position:absolute;left:7%;bottom:4%;width:27%;aspect-ratio:1;z-index:4;display:grid;place-items:center;opacity:0}
.fourth-page .fourth-emblem .fourth-frame{position:absolute;width:100%;height:100%;object-fit:contain;opacity:0}
.fourth-page .fourth-emblem .fourth-double{position:relative;width:58%;height:auto;object-fit:contain;filter:sepia(.35) saturate(1.6);opacity:0}
.fourth-page.fourth-ready .fourth-emblem{opacity:1}
.fourth-page.fourth-ready .fourth-frame{animation:storyFrameIn 1s .33s cubic-bezier(.2,.8,.2,1) both}
.fourth-page.fourth-ready .fourth-double{animation:thirdDoubleBeat 1.25s .42s cubic-bezier(.2,.8,.2,1) both}
.fourth-page .label{left:0;width:100%;bottom:10%;text-align:center;font-size:clamp(17px,3.8vw,22px);line-height:1.35;letter-spacing:.16em;color:var(--gold);opacity:0;transform:translateY(12px) scale(.96)}
.fourth-page.fourth-ready .label{animation:thirdLabelInBeat 1.7s .35s cubic-bezier(.2,.8,.2,1) both}

@keyframes storyFrameIn{from{opacity:0;transform:scale(.72) rotate(-180deg)}to{opacity:1;transform:scale(1) rotate(0deg)}}

@keyframes fourthSideLeftIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:translateX(0)}}

.fifth-page{background:url("page-background.jpg?v=126") center/cover no-repeat!important}
.fifth-page.fifth-ready{background:none!important}
.fifth-page::before,.fifth-page::after{display:none!important;content:none!important}
.fifth-page .veil{display:none}
.page:not(.cover)::before,.page:not(.cover)::after{display:none!important;content:none!important}
.story-watermark{display:none!important}
.fifth-page .fifth-side-right{position:absolute;right:4%;top:14%;z-index:5;display:flex;flex-direction:column;align-items:flex-start;gap:1.1em;opacity:0;pointer-events:none;color:var(--gold);text-shadow:0 1px 2px #4b080899}
.fifth-page .fifth-side-right span{display:block;writing-mode:vertical-rl;font:16px/1.5 'Noto Serif SC',serif;letter-spacing:.12em}
.fifth-page.fifth-ready .fifth-side-right{animation:fifthTextIn .95s .2s cubic-bezier(.2,.8,.2,1) both}
@keyframes fifthTextIn{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:translateY(0)}}

.fifth-page .fifth-gif{position:absolute;height:auto;object-fit:contain;z-index:4;pointer-events:none}
.fifth-page .fifth-gif-right{right:7%;top:40%;width:22%}
.fifth-page .fifth-gif-bottom{left:4%;bottom:5%;width:24%}
.fifth-page:not(.fifth-ready)>*:not(.pageHead){opacity:0!important}
.fifth-page>img:first-of-type{opacity:0}
.fifth-page.fifth-ready>img:first-of-type{animation:fifthPhotoIn .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes fifthPhotoIn{from{opacity:0}to{opacity:1}}
.fifth-page .pageHead{top:auto;bottom:6%;height:92px}
.fifth-page .pageHead .headWord{top:auto;bottom:7px;height:54px;background-size:auto 54px;transform:translateY(24px) scale(.96);transform-origin:center bottom}
.fifth-page.header-enter .headWord{animation:fifthHeaderWordIn .85s cubic-bezier(.2,.8,.2,1) both}
@keyframes fifthHeaderWordIn{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:.96;transform:translateY(0) scale(1)}}

.sixth-page{display:block!important;background:url("page-background.jpg?v=126") center/cover no-repeat!important;color:var(--gold)}
.sixth-page:not(.sixth-ready)>*:not(.pageHead){opacity:0!important}
.sixth-page .sixth-top-photo,.sixth-page .sixth-bottom-photo{position:absolute;left:12%;width:76%;height:32%;overflow:hidden;border-radius:28px;background:#b7a9a0;z-index:2;box-shadow:0 5px 16px #4b080833}
.sixth-page .sixth-top-photo{top:calc(50% - min(11vw,46px) - 4% - 32%)}
.sixth-page .sixth-bottom-photo{top:calc(50% + min(11vw,46px) + 4%)}
.sixth-page .sixth-top-photo img,.sixth-page .sixth-bottom-photo img{display:block;width:100%;height:100%;object-fit:cover}
.sixth-page .sixth-top-photo img{object-position:center 38%}
.sixth-page .sixth-bottom-photo img{object-position:center 42%}
.sixth-page .sixth-plum{position:absolute;right:-50px;top:25%;width:min(43vw,250px);height:auto;z-index:2;pointer-events:none;mix-blend-mode:normal;opacity:0;transform-origin:right center}
.sixth-page .sixth-middle{position:absolute;left:0;top:calc(50% - min(11vw,46px));width:100%;height:min(22vw,92px);z-index:4}
.sixth-page .sixth-emblem{position:absolute;left:39%;top:0;width:22%;aspect-ratio:1;display:grid;place-items:center;opacity:0}
.sixth-page .sixth-frame{position:absolute;width:100%;height:100%;object-fit:contain}
.sixth-page .sixth-double{position:relative;width:54%;height:auto;object-fit:contain;filter:sepia(.25) saturate(1.5)}
.sixth-page .sixth-copy{position:absolute;top:50%;width:35%;transform:translateY(-50%);color:#f3ce8bd9;text-align:center;font:clamp(13px,3.8vw,18px)/1.45 'Noto Serif SC',serif;letter-spacing:.04em;white-space:nowrap;opacity:0;text-shadow:0 1px 2px #6b101477}
.sixth-page .sixth-copy-left{left:2%}
.sixth-page .sixth-copy-right{right:2%}
.sixth-page .sixth-bottom-word{position:absolute;left:0;bottom:3%;width:100%;z-index:4;text-align:center;color:var(--gold);font:clamp(14px,3.8vw,18px) Georgia,serif;letter-spacing:.16em;white-space:nowrap;opacity:0}
.sixth-page.sixth-ready .sixth-top-photo{animation:sixthPhotoIn .85s .05s cubic-bezier(.2,.8,.2,1) both}
.sixth-page.sixth-ready .sixth-plum{animation:sixthPlumTopIn 1.05s .35s cubic-bezier(.2,.8,.2,1) both}
.sixth-page.sixth-ready .sixth-emblem{opacity:1}
.sixth-page.sixth-ready .sixth-frame{animation:storyFrameIn 1s .33s cubic-bezier(.2,.8,.2,1) both}
.sixth-page.sixth-ready .sixth-double{animation:thirdDoubleBeat 1.25s .42s cubic-bezier(.2,.8,.2,1) both}
.sixth-page.sixth-ready .sixth-copy-left{animation:sixthCopyLeftIn .8s .42s cubic-bezier(.2,.8,.2,1) both}
.sixth-page.sixth-ready .sixth-copy-right{animation:sixthCopyRightIn .8s .48s cubic-bezier(.2,.8,.2,1) both}
.sixth-page.sixth-ready .sixth-bottom-photo{animation:sixthPhotoIn .85s .58s cubic-bezier(.2,.8,.2,1) both}
.sixth-page.sixth-ready .sixth-bottom-word{animation:sixthBottomWordIn .8s .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes sixthPhotoIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes sixthPlumIn{from{opacity:0;transform:scaleX(-1) translateX(18px)}to{opacity:1;transform:scaleX(-1) translateX(0)}}
@keyframes sixthPlumTopIn{0%{opacity:0;transform:perspective(700px) rotateY(90deg) translateX(12px) rotate(56deg)}55%{opacity:1;transform:perspective(700px) rotateY(-14deg) translateX(-2px) rotate(56deg)}78%{opacity:1;transform:perspective(700px) rotateY(3deg) translateX(1px) rotate(56deg)}88%{opacity:1;transform:perspective(700px) rotateY(-3deg) translateX(-1px) rotate(56deg)}100%{opacity:1;transform:perspective(700px) rotateY(0) translateX(0) rotate(56deg)}}
@keyframes sixthEmblemIn{from{opacity:0;transform:scale(.74)}to{opacity:1;transform:scale(1)}}
@keyframes sixthCopyLeftIn{from{opacity:0;transform:translate(-16px,-50%)}to{opacity:1;transform:translate(0,-50%)}}
@keyframes sixthCopyRightIn{from{opacity:0;transform:translate(16px,-50%)}to{opacity:1;transform:translate(0,-50%)}}
@keyframes sixthBottomWordIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

.seventh-page{display:block!important;background:url("page-background.jpg?v=126") center/cover no-repeat!important;color:var(--gold)}
.seventh-page:not(.seventh-ready)>*:not(.pageHead){opacity:0!important}
.seventh-page .pageHead{top:50%;bottom:auto;height:92px;transform:translateY(-50%);z-index:1}
.seventh-page .pageHead .headWord{top:auto;bottom:7px;transform:translateY(24px) scale(.96);transform-origin:center bottom}
.seventh-page.header-enter .headWord{animation:seventhHeaderWordIn .85s cubic-bezier(.2,.8,.2,1) both}
.seventh-page .seventh-photo{position:absolute;left:13%;top:9%;width:74%;height:68%;overflow:hidden;border-radius:30px;background:#b7a9a0;z-index:2;box-shadow:0 5px 16px #4b080833}
.seventh-page .seventh-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 47%}
.seventh-page .seventh-plum{position:absolute;right:-15px;top:-8px;width:min(43vw,250px);height:auto;z-index:3;pointer-events:none;mix-blend-mode:normal;opacity:0;transform-origin:right center}
.seventh-page .seventh-emblem{position:absolute;left:3%;top:1%;width:23%;aspect-ratio:1;z-index:5;display:grid;place-items:center;opacity:0}
.seventh-page .seventh-frame{position:absolute;width:100%;height:100%;object-fit:contain;opacity:0}
.seventh-page .seventh-double{position:relative;width:58%;height:auto;object-fit:contain;filter:sepia(.25) saturate(1.5);opacity:0}
.seventh-page .seventh-calendar{position:absolute;left:15%;top:58%;width:70%;height:36%;z-index:6;color:#f3ce8bd9;opacity:0;text-shadow:0 1px 2px #6b101477}
.seventh-page .seventh-calendar::before{content:"";position:absolute;left:8%;right:8%;top:18%;bottom:0;background:url("double-happiness-shadow.png?v=128") center 72%/58% auto no-repeat;opacity:.12;z-index:0;pointer-events:none}
.seventh-page .seventh-calendar-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:none;opacity:.24;z-index:0;pointer-events:none}
.seventh-page .seventh-date,.seventh-page .seventh-week,.seventh-page .seventh-days{position:relative;z-index:1}
.seventh-page .seventh-date{display:flex;align-items:baseline;padding:0 8%;height:23%;white-space:nowrap}
.seventh-page .seventh-date strong{font:clamp(36px,11vw,52px)/1 Georgia,serif;color:#f05b70;font-weight:400;letter-spacing:.02em}
.seventh-page .seventh-date span{margin-left:8px;font:clamp(17px,4.5vw,23px) Georgia,serif;color:#f05b70}
.seventh-page .seventh-date em{margin-left:auto;font:clamp(16px,4.2vw,21px) Georgia,serif;color:#f05b70;font-style:normal;letter-spacing:.08em}
.seventh-page .seventh-rule{position:relative;z-index:1;width:94%;height:1px;margin:0 auto 2%;background:#f05b70aa}
.seventh-page .seventh-week,.seventh-page .seventh-days{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}
.seventh-page .seventh-week{height:11%;align-items:center;color:#f05b70;font:clamp(11px,3vw,14px) 'Noto Serif SC',serif;letter-spacing:.12em}
.seventh-page .seventh-days{height:62%;grid-auto-rows:1fr;align-items:center;color:#f6eee1;font:clamp(13px,3.8vw,18px) Georgia,serif}
.seventh-page .seventh-days span{display:grid;place-items:center;width:clamp(24px,7vw,30px);height:clamp(24px,7vw,30px);justify-self:center;border-radius:50%}
.seventh-page .seventh-days .selected{position:relative;border:0;color:rgb(245, 86, 104);background:#a51d2244}
.seventh-page .seventh-days .selected::after{content:"♡";position:absolute;left:46%;top:66%;z-index:2;color:rgb(245, 86, 104);font:clamp(23px,7vw,31px)/1 Georgia,serif;transform:translate(-50%,-50%) scale(.9);opacity:0;pointer-events:none}
.seventh-page .seventh-bottom-word{position:absolute;left:0;bottom:3%;width:100%;z-index:4;text-align:center;color:var(--gold);font:clamp(14px,3.8vw,18px) Georgia,serif;letter-spacing:.16em;white-space:nowrap;opacity:0}
.seventh-page.seventh-ready .seventh-photo{animation:seventhPhotoFromTop .85s .05s ease-out both}
.seventh-page.seventh-ready .seventh-plum{animation:bookFlipTop 1.05s .35s cubic-bezier(.2,.8,.2,1) both}
.seventh-page.seventh-ready .seventh-emblem{opacity:1}
.seventh-page.seventh-ready .seventh-frame{animation:storyFrameIn 1s .33s cubic-bezier(.2,.8,.2,1) both}
.seventh-page.seventh-ready .seventh-double{animation:thirdDoubleBeat 1.25s .42s cubic-bezier(.2,.8,.2,1) both}
.seventh-page.seventh-ready .seventh-calendar{animation:seventhCalendarStretch 1.05s .48s cubic-bezier(.2,.8,.2,1) both;transform-origin:center top}
.seventh-page.seventh-ready .seventh-days .selected::after{animation:seventhHeartBeat 1.35s .85s ease-in-out infinite}
.seventh-page.seventh-ready .seventh-bottom-word{animation:sixthBottomWordIn .8s .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes seventhHeaderWordIn{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:.96;transform:translateY(0) scale(1)}}
@keyframes seventhCalendarIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes seventhHeartBeat{0%,100%{opacity:.9;transform:translate(-50%,-50%) scale(.92)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}24%{opacity:1;transform:translate(-50%,-50%) scale(.94)}36%{opacity:1;transform:translate(-50%,-50%) scale(1.16)}52%{opacity:.95;transform:translate(-50%,-50%) scale(.96)}72%{opacity:.9;transform:translate(-50%,-50%) scale(1)} }
@keyframes seventhPhotoFromTop{from{opacity:0;transform:translateY(-36px)}to{opacity:1;transform:translateY(0)}}
@keyframes seventhCalendarStretch{0%{opacity:0;transform:translateY(-18px) scaleY(.62)}55%{opacity:1;transform:translateY(0) scaleY(1.04)}100%{opacity:1;transform:translateY(0) scaleY(1)}}

/* Seventh page calendar layout aligned with the supplied reference */
.seventh-page {
  background: url("page-background.jpg?v=126") center/cover no-repeat !important;
}
.seventh-page .seventh-photo {
  left: 13%;
  top: 8%;
  width: 74%;
  height: 62%;
  border-radius: 28px;
}
.seventh-page .seventh-photo img {
  object-position: 54% 47%;
}
.seventh-page .seventh-calendar {
  left: 12%;
  top: 50%;
  width: 76%;
  height: 30%;
  overflow: visible;
}
.seventh-page .seventh-calendar::before {
  display: none;
}
.seventh-page .seventh-calendar-bg {
  left: 50%;
  top: 17%;
  inset-inline: auto;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  transform: translateX(-50%);
  opacity: .24;
}
.seventh-page .seventh-date {
  height: 23%;
  padding: 0 7%;
}
.seventh-page .seventh-date strong {
  font-size: clamp(38px, 10.5vw, 52px);
}
.seventh-page .seventh-date span {
  margin-left: 7px;
  font-size: clamp(16px, 4.2vw, 22px);
}
.seventh-page .seventh-date em {
  font-size: clamp(15px, 4vw, 20px);
}
.seventh-page .seventh-rule {
  width: 94%;
  margin-bottom: 1%;
}
.seventh-page .seventh-week {
  height: 12%;
}
.seventh-page .seventh-days {
  height: 64%;
}
.seventh-page .seventh-days span {
  width: clamp(22px, 6.7vw, 30px);
  height: clamp(22px, 6.7vw, 30px);
}
.seventh-map {
  position: absolute;
  left: 18%;
  top: 80%;
  width: 64%;
  height: 11%;
  z-index: 6;
  overflow: hidden;
  border-radius: 18px;
  background:
    linear-gradient(148deg, transparent 0 35%, #d7d9d6 35.5% 37%, transparent 37.5% 100%),
    linear-gradient(28deg, transparent 0 52%, #e3c2ae 52.5% 55%, transparent 55.5% 100%),
    linear-gradient(112deg, transparent 0 62%, #c7d9d5 62.5% 65%, transparent 65.5% 100%),
    #f1eee8;
  box-shadow: 0 5px 16px #4b080833;
  opacity: 0;
}
.seventh-map::before,
.seventh-map::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
}
.seventh-map::before {
  left: -10%;
  top: 52%;
  width: 120%;
  height: 22%;
  background: #e5c3b1;
  transform: rotate(-8deg);
  opacity: .8;
}
.seventh-map::after {
  left: 22%;
  top: -12%;
  width: 12%;
  height: 130%;
  background: #d0ddd5;
  transform: rotate(27deg);
  opacity: .8;
}
.seventh-map-label {
  position: absolute;
  z-index: 2;
  padding: 2px 5px;
  border-radius: 5px;
  background: #fffdf9dd;
  color: #85776f;
  font: clamp(10px, 2.8vw, 13px)/1.2 'Noto Serif SC', serif;
  white-space: nowrap;
}
.seventh-page .map-hotel {
  left: 28%;
  top: 27%;
}
.seventh-page .map-home {
  right: 6%;
  top: 13%;
}
.seventh-map-pin {
  position: absolute;
  left: 48%;
  top: 44%;
  z-index: 3;
  width: clamp(12px, 3.5vw, 17px);
  height: clamp(12px, 3.5vw, 17px);
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 0;
  background: #c84c4d;
  box-shadow: 0 1px 3px #5a313166;
  transform: rotate(-45deg);
}
.seventh-map-go {
  position: absolute;
  right: 7%;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: clamp(25px, 7vw, 34px);
  height: clamp(25px, 7vw, 34px);
  border-radius: 50%;
  background: #06bd9b;
  color: #fff;
  font: bold clamp(15px, 4vw, 20px)/1 Arial, sans-serif;
  transform: translateY(-50%);
  box-shadow: 0 3px 7px #008d7666;
}
.seventh-map-caption {
  position: absolute;
  left: 12%;
  top: 92%;
  width: 76%;
  z-index: 6;
  overflow: hidden;
  color: var(--gold);
  font: clamp(10px, 2.6vw, 13px)/1.3 'Noto Serif SC', serif;
  letter-spacing: .04em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
}
.seventh-page.seventh-ready .seventh-map, .location-page.location-ready .seventh-map {
  animation: seventhMapIn .8s .62s cubic-bezier(.2,.8,.2,1) both;
}
.seventh-page.seventh-ready .seventh-map, .location-page.location-ready .seventh-map-caption, .location-page.location-ready .seventh-map-caption {
  animation: seventhCaptionIn .7s .76s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes seventhMapIn {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes seventhCaptionIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}


/* Seventh page reference layout refinement */
.seventh-page .seventh-calendar {
  left: 16%;
  top: 58.5%;
  width: 68%;
  height: 32%;
  background: rgba(255, 255, 255, 0.1);
}
.seventh-page .seventh-calendar-bg {
  display: block;
  left: 50%;
  top: 35%;
  width: 80%;
  height: auto;
  max-width: none;
  object-fit: contain;
  transform: translateX(-50%);
  opacity: .34;
}
.seventh-map {
  left: 18%;
  width: 64%;
}
.seventh-map-caption {
  left: 18%;
  width: 64%;
}


/* Keep the watermark image proportional and free from absolute inset constraints. */
.seventh-page .seventh-calendar-bg {
  right: auto;
  bottom: auto;
}

/* Eighth page invitation layout */
.eighth-page{display:block!important;background:url("page-background.jpg?v=126") center/cover no-repeat!important;color:var(--gold)}
.eighth-page:not(.eighth-ready)>*:not(.pageHead){opacity:0!important}
.eighth-page .pageHead{top:0;bottom:auto;height:92px;transform:none;z-index:7}
.eighth-page .pageHead .headWord{top:7px;bottom:auto;height:60px;background-size:auto 60px;transform:translateY(-16px) scale(.96);transform-origin:center top}
.eighth-page.header-enter .headWord{animation:headerWordIn .8s cubic-bezier(.2,.8,.2,1) both}
.eighth-page .eighth-photo{position:absolute;left:5%;top:10%;width:90%;height:auto;aspect-ratio:1.45;overflow:hidden;border-radius:28px;background:#b7a9a0;z-index:2;box-shadow:0 5px 16px #4b080844;opacity:0}
.eighth-page .eighth-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 48%}
.eighth-page .eighth-plum{position:absolute;left:-2%;top:55%;width:auto;height:25%;z-index:3;pointer-events:none;opacity:0;transform-origin:left center}
.eighth-page .eighth-invite{position:absolute;left:17%;top:50.5%;width:66%;z-index:5;display:flex;align-items:center;justify-content:space-between;color:var(--gold);font:clamp(17px,4.4vw,22px)/1.2 'Noto Serif SC',serif;letter-spacing:.08em;text-shadow:0 1px 2px #6b101477;opacity:0}
.eighth-page .eighth-invite span{opacity:0;white-space:nowrap}
.eighth-page .eighth-emblem{position:absolute;left:38%;top:46%;width:24%;aspect-ratio:1;z-index:6;display:grid;place-items:center;opacity:0}
.eighth-page .eighth-frame{position:absolute;width:100%;height:100%;object-fit:contain;opacity:0}
.eighth-page .eighth-double{position:relative;width:57%;height:auto;object-fit:contain;filter:sepia(.25) saturate(1.5);opacity:0}
.eighth-page .eighth-date-copy{position:absolute;left:0;top:62%;width:100%;z-index:5;color:var(--gold);font:clamp(14px,3.8vw,19px)/1.8 'Noto Serif SC',serif;letter-spacing:.05em;text-align:center;text-shadow:0 1px 2px #6b101477;opacity:0}
.eighth-page .eighth-map{left:20%;top:73%;width:60%;height:12.5%;z-index:6}
.eighth-page .eighth-map::before,.eighth-page .eighth-map::after{display:none}
.eighth-page .eighth-amap-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.eighth-page .eighth-map-action{position:absolute;right:7px;bottom:7px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:2px}
.eighth-page .eighth-map-location{position:relative;right:auto;bottom:auto;width:clamp(22px,7vw,34px);height:auto;z-index:1;display:block;opacity:0;transform:translateY(0);filter:drop-shadow(0 2px 2px #5a313166)}
.eighth-page .eighth-map-open{position:relative;right:auto;bottom:auto;z-index:1;padding:4px 7px;border-radius:999px;background:#ffffffdf;color:#85776f;font:clamp(10px,2.5vw,12px)/1.1 'Noto Serif SC',serif;text-decoration:none;white-space:nowrap;box-shadow:0 1px 4px #5a313133}
.eighth-page .map-hotel{left:28%;top:27%}
.eighth-page .map-home{right:6%;top:13%}
.eighth-page .eighth-map-caption{left:8%;top:87%;width:84%;font-size:clamp(11px,2.8vw,14px);color:var(--gold);text-overflow:clip;opacity:0}
.eighth-page .eighth-bottom-word{position:absolute;left:0;bottom:2%;width:100%;z-index:5;text-align:center;color:var(--gold);font:clamp(14px,3.8vw,18px) Georgia,serif;letter-spacing:.16em;white-space:nowrap;opacity:0}
.eighth-page.eighth-ready .eighth-photo{animation:eighthPhotoIn .9s .08s cubic-bezier(.2,.8,.2,1) both}
.eighth-page.eighth-ready .eighth-plum{animation:bookFlipIn 1.1s .25s cubic-bezier(.2,.8,.2,1) both}
.eighth-page.eighth-ready .eighth-invite{opacity:1}
.eighth-page.eighth-ready .eighth-invite span:first-child{animation:sideLeft .8s .32s ease both}
.eighth-page.eighth-ready .eighth-invite span:last-child{animation:sideRight .8s .38s ease both}
.eighth-page.eighth-ready .eighth-emblem{opacity:1}
.eighth-page.eighth-ready .eighth-frame{animation:storyFrameIn 1s .34s cubic-bezier(.2,.8,.2,1) both}
.eighth-page.eighth-ready .eighth-double{animation:thirdDoubleBeat 1.25s .44s cubic-bezier(.2,.8,.2,1) both}
.eighth-page.eighth-ready .eighth-date-copy{animation:eighthTextIn .8s .55s cubic-bezier(.2,.8,.2,1) both}
.eighth-page.eighth-ready .eighth-map{animation:seventhMapIn .8s .68s cubic-bezier(.2,.8,.2,1) both}
.eighth-page.eighth-ready .eighth-map-location{animation:eighthLocationBounce 1.15s .9s ease-in-out infinite}
.eighth-page.eighth-ready .eighth-map-caption{animation:seventhCaptionIn .7s .8s cubic-bezier(.2,.8,.2,1) both}
.eighth-page.eighth-ready .eighth-bottom-word{animation:sixthBottomWordIn .8s .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes eighthPhotoIn{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:translateY(0)}}
@keyframes eighthTextIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* Resource loading gate */
body.is-loading .stf__parent{opacity:0}
body.is-loading .page,body.is-loading .page *{animation-play-state:paused!important}
.loading-screen{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;align-content:center;gap:12px;background:#4e0a10 url("page-background.jpg?v=126") center/cover no-repeat;color:var(--gold);transition:opacity .35s ease,visibility .35s ease}
.loading-screen[aria-hidden="true"]{opacity:0;visibility:hidden;pointer-events:none}
.loading-heart{font:52px/1 Georgia,serif;animation:loadingPulse 1.15s ease-in-out infinite;color:var(--gold);text-shadow:0 2px 8px #2d030699}
.loading-text{font:14px/1.5 'Noto Serif SC',serif;letter-spacing:.18em;color:#f3ce8bd9}
@keyframes loadingPulse{0%,100%{transform:scale(.92);opacity:.72}50%{transform:scale(1.08);opacity:1}}
@keyframes eighthLocationBounce{0%,100%{opacity:1;transform:translateY(0)}50%{opacity:1;transform:translateY(-6px)}}

/* Brief gesture cue shown after the initial resource loading completes. */
.swipe-hint{position:fixed;left:50%;bottom:8%;z-index:20;display:flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid #f3ce8b55;border-radius:999px;background:#4e0a10b8;color:var(--gold);font:13px/1.2 'Noto Serif SC',serif;letter-spacing:.08em;opacity:0;pointer-events:none;transform:translate(-50%,10px);transition:opacity .35s ease,transform .35s ease}
.swipe-hint.show{opacity:1;transform:translate(-50%,0)}
.swipe-hint-icon{position:relative;display:inline-grid;place-items:center;width:48px;height:28px}
.swipe-hint-arrows{font:30px/1 Georgia,serif;letter-spacing:-.12em;animation:swipeArrows 1.1s ease-in-out infinite}
.swipe-hint-finger{position:absolute;top:5px;left:50%;font:20px/1 Georgia,serif;transform:translateX(-50%);animation:swipeFinger 1.1s ease-in-out infinite}
@keyframes swipeArrows{0%,100%{transform:translateX(-5px);opacity:.65}50%{transform:translateX(5px);opacity:1}}
@keyframes swipeFinger{0%,100%{transform:translateX(-11px)}50%{transform:translateX(11px)}}
@media(prefers-reduced-motion:reduce){.swipe-hint-arrows,.swipe-hint-finger{animation:none}}