/* Full-screen presentation; the original document remains readable without JS. */
html.story-mode{height:100%;overflow:hidden;scroll-behavior:auto}
.story-mode body{height:100%;overflow:hidden;background:#fbeaf0;transition:background-color 1.2s ease}
.story-mode body::after{content:'';position:fixed;inset:0;background:repeating-linear-gradient(90deg,transparent 0 55px,#fff3 55px 57px);pointer-events:none;z-index:0}
.story-mode header{position:fixed;inset:0 0 auto;z-index:5;width:100%;pointer-events:none;padding-top:max(24px,env(safe-area-inset-top));background:linear-gradient(#faeaf0c9,transparent)}
.story-mode main{position:relative;max-width:none;width:100%;height:100vh;height:100dvh;padding:0;z-index:1}
.story-mode main>section{position:absolute;inset:0;padding:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .65s ease,visibility .65s;overflow:hidden}
.story-mode main>section.is-active{opacity:1;visibility:visible;pointer-events:auto;z-index:1}
.panel-scroll{width:100%;height:100%;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:thin;scrollbar-color:#d6a5b8 transparent}
.panel-content{width:min(calc(100% - 360px),1000px);min-height:100%;margin:0 auto;padding:76px 40px 100px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.panel-content>*{flex-shrink:0}
.panel-content>.en{margin:16px 0}
.panel-content>.album{width:100%;margin-top:30px}
.panel-content>.film{width:min(100%,740px);margin:28px auto 0}
.panel-content>.letter{width:min(100%,660px);margin:25px auto 0;padding:28px 45px}
.panel-content .letter p{margin:9px 0;line-height:2.1}
.panel-content>.wish{margin:25px 0 12px}
.panel-content>.bow{margin:20px auto}
.panel-content h1{margin:15px 0}
.panel-content h2{margin:16px 0}
.panel-content>p{margin:10px 0}
.panel-content .photo .image-space{max-height:32vh}
.story-mode main>.lace,.story-mode .scroll,.story-mode footer{display:none}
.story-mode section .reveal{opacity:0;translate:0 14px}
.story-mode section.is-active .reveal{animation:story-reveal .85s ease both;animation-delay:var(--reveal-delay,0s)}
@keyframes story-reveal{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
.story-next{position:fixed;z-index:6;bottom:max(18px,env(safe-area-inset-bottom));left:50%;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:8px;border:0;background:#fff8f4ad;color:#a1657e;backdrop-filter:blur(8px);padding:10px 22px;border-radius:28px;font:10px 'Microsoft YaHei',sans-serif;letter-spacing:2px;cursor:pointer;opacity:0;animation:arrow-appear .8s 1.3s forwards}
.story-next svg{width:24px;height:17px;opacity:.62;animation:arrow-float 2.2s ease-in-out infinite;transition:rotate .5s}
.story-next.is-last svg{rotate:180deg}
.story-next:focus-visible{outline:2px solid #ad5d7c;outline-offset:4px}
.story-next:hover{background:#fff8f4e6}
.story-next small{font:9px Georgia,serif;letter-spacing:3px;opacity:.7}
@keyframes arrow-float{0%,100%{transform:translateY(-3px)}50%{transform:translateY(3px)}}
@keyframes arrow-appear{to{opacity:.85}}
.story-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:650px){.panel-content{padding:70px 28px 108px}.panel-content>.album{width:100%;max-width:360px;gap:14px;margin-top:22px}.panel-content .image-space{aspect-ratio:4/3;max-height:20vh}.panel-content .photo:nth-child(3){width:58%}.panel-content>.letter{padding:25px 23px}.panel-content .letter p{font-size:13px}.panel-content .en{font-size:9px;letter-spacing:2px}.story-next{padding:9px 18px;gap:5px}.panel-content h2{font-size:26px}}
@media(max-height:700px) and (min-width:651px){.panel-content{padding-top:65px;padding-bottom:95px}.panel-content h1{font-size:52px}.panel-content h2{font-size:28px}.panel-content>.en{margin:10px 0}.panel-content>.bow{margin:10px auto}.panel-content .letter p{font-size:12px}.panel-content>.film{max-width:560px}.panel-content .image-space{max-height:26vh}}
.decorations{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:2}
.sticker{--sticker-size:clamp(112px,10vw,148px);position:absolute;top:clamp(90px,var(--y),calc(100% - var(--sticker-size) - 100px));width:var(--sticker-size);transform:rotate(var(--tilt));filter:drop-shadow(0 5px 7px #c3849b18)}
.sticker:nth-child(odd){left:clamp(20px,3vw,60px)}
.sticker:nth-child(even){--sticker-size:clamp(106px,9.4vw,140px);right:clamp(24px,3.7vw,68px)}
.sticker svg{display:block;width:100%;height:auto}
.panel-content>*:not(.decorations){position:relative;z-index:1}
.smile-sticker{display:block;width:96px;height:96px;object-fit:contain;margin:14px auto 8px}
.bow.bow-ornate{width:200px;height:auto;aspect-ratio:13/8;filter:drop-shadow(0 4px 5px #bd7d9914)}
.bow.bow-ornate::before,.bow.bow-ornate::after{display:none}
.bow-ornate img{display:block;width:100%;height:auto;object-fit:contain}
.panel-content>.bow-ornate{margin:12px auto 8px}
@media(max-width:650px){.bow.bow-ornate{width:172px}}
@media(max-height:700px) and (min-width:901px){.bow.bow-ornate{width:165px}.panel-content>.bow-ornate{margin:5px auto}}
/* On narrow screens decorations have their own space instead of overlapping the content. */
@media(max-width:900px){
  .panel-content{width:min(100%,740px)}
  .decorations{position:relative;inset:auto;width:100%;height:125px;margin:0 0 14px}
  .sticker:nth-child(odd){--sticker-size:96px;left:4%;top:6px}
  .sticker:nth-child(even){--sticker-size:89px;left:auto;right:8%;top:26px}
  section:nth-of-type(2) .sticker:nth-child(odd){left:9%;top:24px}
  section:nth-of-type(2) .sticker:nth-child(even){right:3%;top:3px}
  section:nth-of-type(3) .sticker:nth-child(odd){left:2%;top:13px}
  section:nth-of-type(3) .sticker:nth-child(even){right:11%;top:31px}
  section:nth-of-type(4) .sticker:nth-child(odd){left:12%;top:2px}
  section:nth-of-type(4) .sticker:nth-child(even){right:5%;top:21px}
}
@media(max-width:650px){.smile-sticker{width:76px;height:76px}}
@media(prefers-reduced-motion:reduce){.story-mode body,.story-mode main>section{transition:none}.story-mode section.is-active .reveal{animation:none;opacity:1;translate:none}.story-next{animation:none;opacity:.85}.story-next svg{animation:none;transition:none}}