@keyframes track-shine{0%,55%{transform:translateX(-130%)}85%,100%{transform:translateX(130%)}}
#story{position:absolute;inset:65px 18px max(16px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px}#story[hidden]{display:none}.book{position:relative;flex:1;min-height:0!important;min-width:0!important;width:100%;touch-action:none;outline:none;box-shadow:3px 3px #d9c8aa,5px 5px #efdfc2,0 12px 30px #49301e30}.book:focus-visible{outline:1px solid #aa8050;outline-offset:5px}.book,.book *{user-select:none;-webkit-user-select:none}.book .stf__wrapper{width:100%;height:100%;padding:0!important}.book .stf__block{width:100%;height:100%}.story-page{background:#fcf3e3;overflow:hidden}.paper{position:absolute;inset:0;background:#fcf3e3;display:flex;flex-direction:column;padding:15px 15px 13px;overflow:hidden;box-shadow:inset 4px 0 10px #7655290c}.paper:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#73533214,transparent 5%,transparent 96%,#9e7d400c)}.page-art{width:100%;height:39%;flex:none;object-fit:cover;border:1px solid #d7c7b0;pointer-events:none}.page-copy{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;margin:0;padding:16px 8px 10px;font:clamp(19px,2.65dvh,25px)/1.4 'Cormorant Garamond',Georgia,serif;text-align:center;color:#34251c;overflow-wrap:break-word}.page-folio{text-align:center;font:12px 'DM Sans',sans-serif;color:#8c7558;letter-spacing:.2em;padding-top:7px}.paper.long .page-art{height:28%}.paper.long .page-copy{font-size:clamp(17px,2.3dvh,22px);line-height:1.32;padding:12px 2px 5px}.book-nav{display:flex;align-items:center;justify-content:space-between;flex:none;gap:12px;background:#f8eddbeb;border:1px solid #d7c6aa;border-radius:32px;padding:5px 6px}.book-nav button{width:48px;height:48px;border:1px solid #b69a72;border-radius:50%;background:#171511;color:#fae7c4;font-size:22px}.book-nav button:disabled{opacity:.45;cursor:default}.book-nav>div{text-align:center}.book-nav #page-count{font-size:13px;letter-spacing:.2em}.gesture-hint{display:block;font-size:12px;margin-top:6px;color:#59432c}#restart{position:absolute;bottom:0;left:50%;transform:translateX(-50%);background:#f7ead7;border:0;padding:8px 10px;color:#58412b;font-size:13px;white-space:nowrap}#story.finished .gesture-hint{visibility:hidden}#story.finished .book-nav{padding-bottom:20px}.cover{transform-origin:left center}.book-cover-opening{animation:cover-turn .8s ease-in-out forwards}@keyframes cover-turn{to{transform:perspective(1400px) rotateY(-95deg);opacity:0}}header{display:flex;align-items:center;gap:8px}.music-toggle{width:36px;height:36px;border:1px solid #86674450;background:#f8ecdce8;border-radius:50%;color:#49382a;font-size:21px;position:relative}.music-toggle:not(.playing):after{content:'';position:absolute;width:21px;height:1px;background:#49382a;left:7px;top:17px;transform:rotate(-45deg)}.music-toggle.playing{box-shadow:0 0 0 3px #e4c48d44}@media(max-height:650px){#story{inset:50px 14px 10px;gap:10px}.paper{padding:10px}.page-art{height:32%}.page-copy{font-size:18px;line-height:1.25;padding:10px 2px}.paper.long .page-art{height:22%}.paper.long .page-copy{font-size:16px;line-height:1.2}.book-nav button{width:42px;height:42px}}@media(prefers-reduced-motion:reduce){.book-cover-opening{animation:none!important}}
.blank-paper-back{background:#f7ecd7!important;box-shadow:inset 0 0 18px #9b805c0a;pointer-events:none}.blank-paper-back:after{content:none!important}.story-page{backdrop-filter:none!important;filter:none!important}.page-art{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.book.stf__parent{transform:none!important;touch-action:none!important}
.book .stf__block{perspective:none!important}
.book .stf__item{transform-style:flat!important;backface-visibility:visible!important;-webkit-backface-visibility:visible!important}
.book .page-art{backface-visibility:visible!important;-webkit-backface-visibility:visible!important}

/* A printed keepsake: quiet paper, framed photographs and a satin marker. */
#story{top:max(65px,calc(env(safe-area-inset-top) + 48px))}
.paper,.blank-paper-back{
  background-color:#fbf1df!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%2378542f' opacity='.055' filter='url(%23grain)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")!important;
  box-shadow:inset 5px 0 14px #74523012,inset 0 0 2px #99714630;
}
.paper{padding:18px 18px 12px}
.paper:after{background:linear-gradient(90deg,#78502b12,transparent 6%,transparent 95%,#9269320b);box-shadow:inset 0 0 22px #97734608}
.page-illustration{position:relative;flex:none;width:100%;height:51%;overflow:hidden;border:1px solid #b9965f;background:#e1cfae;box-shadow:0 2px 8px #63421f10}
.page-illustration:after{content:'';position:absolute;inset:4px;border:1px solid #fff2d74a;pointer-events:none}
.page-art,.paper.long .page-art{display:block;width:100%;height:100%;border:0;object-fit:cover;transform-origin:50% 48%;animation:photograph-drift 22s ease-in-out infinite alternate;animation-play-state:paused}
.story-page.is-current .page-art{animation-play-state:running}
.book.is-turning .page-art{animation-play-state:paused}
.page-copy{display:block;flex:none;min-height:0;margin:0;padding:22px 4px 0;font-size:clamp(21px,2.8dvh,27px);line-height:1.37;letter-spacing:.005em;color:#39291f}
.page-folio{flex:none;margin-top:auto;padding-top:14px;color:#90724d;font-size:12px}
.page-folio:before,.page-folio:after{content:'';display:inline-block;width:20px;height:1px;background:#b59a714f;vertical-align:middle;margin:0 10px}
.paper.long .page-illustration{height:48%}
.paper.long .page-copy{padding:18px 1px 0;font-size:clamp(18px,2.45dvh,23px);line-height:1.3}
.final-page .page-illustration{height:52%}
.final-page .page-copy{padding:26px 12px 0;font-size:clamp(28px,3.7dvh,35px);line-height:1.2;color:#652136}
.ending-word{display:inline-block;opacity:0}
.final-page.is-current .ending-word{animation:words-arrive .95s ease both;animation-delay:calc(.35s + var(--word)*.17s)}
.keepsake-signature{flex:none;margin:22px 0 0;text-align:center;color:#8b623c;font:38px/1.1 'Allura','Cormorant Garamond',cursive;opacity:0}
.final-page.is-current .keepsake-signature{animation:signature-arrive 1.5s ease both;animation-delay:1.9s}
.book.is-turning .ending-word,.book.is-turning .keepsake-signature{animation-play-state:paused}
.paused .ending-word,.paused .keepsake-signature{animation:none!important;opacity:1;transform:none;clip-path:none}
@keyframes photograph-drift{from{transform:scale(1.005)}to{transform:scale(1.065)}}
@keyframes words-arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes signature-arrive{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@media(max-height:700px){
  .paper{padding:12px 12px 10px}
  .page-copy{font-size:20px;line-height:1.3;padding-top:17px}
  .paper.long .page-illustration{height:46%}
  .paper.long .page-copy{font-size:17px;line-height:1.24;padding-top:13px}
  .page-folio{padding-top:10px}
  .final-page .page-copy{font-size:28px;padding-top:20px}
  .keepsake-signature{font-size:33px;margin-top:15px}
}
@media(prefers-reduced-motion:reduce){
  .page-art{transform:none!important}
  .ending-word,.keepsake-signature{opacity:1;transform:none;clip-path:none}
}