/* Each scene has a reading rhythm and a concrete keepsake. */
.stage{height:auto;max-height:none;min-height:max(575px,calc(100svh - 166px));display:flex;align-items:center}
.topbar{height:72px}.journey-footer{height:72px}.prototype-caption{height:22px;padding-top:4px;padding-bottom:4px}
.scene-content{padding-top:38px;padding-bottom:108px}
.stage .actor-shell .character{max-height:calc(100svh - 160px)}
.stage .character-cue{display:none}
.scene-signature{bottom:35px}
.backdrop{opacity:.68}
.world-echo{position:absolute;right:0;bottom:0;width:58%;height:72%;z-index:-2;pointer-events:none;overflow:hidden;opacity:.5;mask-image:linear-gradient(180deg,transparent,black 65%)}
.world-echo>img{width:100%;height:100%;object-fit:cover;object-position:center bottom;mask-image:linear-gradient(90deg,transparent,black 50%)}
.world-echo>span{position:absolute;bottom:12%;right:-3%;font:clamp(70px,9vw,155px)/1 Georgia,serif;color:var(--accent);opacity:.22;letter-spacing:-5px}
.reverse .world-echo{right:0;width:51%}
.world-seal{position:absolute;right:4%;top:15%;width:clamp(140px,15vw,240px);height:clamp(150px,16vw,255px);background:center/contain no-repeat;opacity:.24;transform:rotate(-12deg)}
.interests,.interest-note{position:relative;text-shadow:0 2px 8px var(--scene),0 0 15px var(--scene)}
.reverse .scene-content{margin-left:49%;width:48%}
.scroll-invitation{position:absolute;bottom:22px;left:7vw;display:flex;align-items:center;gap:13px;color:var(--accent);z-index:5;padding:0;text-align:left;min-height:43px;font-size:12px;letter-spacing:2px}
.reverse .scroll-invitation{left:49%}
.scroll-invitation small{display:block;color:var(--muted);font-size:10px;letter-spacing:1px;margin-top:6px}
.scroll-invitation>b{font-weight:400;font-size:24px;margin-left:10px;animation:invitation 2.8s ease-in-out infinite}
.scroll-mouse{display:block;width:20px;height:32px;border:1px solid var(--accent);border-radius:12px;position:relative;opacity:.8}
.scroll-mouse i{position:absolute;top:7px;left:8px;width:2px;height:6px;background:var(--accent);border-radius:2px;animation:scroll-tick 2.8s ease-in-out infinite}
.gate{height:calc(100svh - 166px)}.gate .scene-content{bottom:80px}.gate .scroll-invitation{left:50%;transform:translateX(-50%);bottom:16px}.gate .scroll-invitation small{display:none}
.journey-keepsake{pointer-events:auto}
.route-atlas{width:min(490px,100%);margin-top:29px;position:relative;transform:rotate(-2deg)}
.atlas-caption{display:flex;justify-content:space-between;align-items:center;font:16px var(--serif);color:var(--accent);margin-bottom:15px;letter-spacing:2px}
.atlas-caption small{font:10px Georgia,serif;letter-spacing:3px}
.atlas-stops{position:relative;display:flex;justify-content:space-between;gap:10px;isolation:isolate}
.atlas-stops:before{content:'';position:absolute;top:19px;left:20px;right:20px;border-top:1px dashed var(--accent);opacity:.45;z-index:-1;transform:rotate(-1deg)}
.atlas-stop{display:flex;flex-direction:column;align-items:center;gap:6px;transform:translateY(calc(var(--stop) * -2px))}
.atlas-stop img{width:32px;height:34px;object-fit:contain;padding:4px;background:var(--scene);border-radius:50%;animation:atlas-arrive .85s both;animation-delay:calc(var(--stop)*.14s)}
.atlas-stop small{font-size:10px;letter-spacing:2px;color:var(--muted)}
.conversation-thread{display:flex;align-items:center;gap:13px;width:min(430px,100%);margin-top:32px;font:15px var(--serif);letter-spacing:2px;color:var(--accent)}
.conversation-thread>i{height:1px;flex:1;position:relative;background:var(--accent);opacity:.7}
.conversation-thread>i:after{content:'';position:absolute;width:5px;height:5px;right:0;top:-2px;transform:rotate(45deg);background:var(--accent)}
.conversation-thread>strong{font-weight:400;white-space:nowrap}
.dispatch-strip{position:relative;width:min(490px,100%);margin-top:33px;padding:19px 25px 19px 28px;border-left:3px double var(--accent);border-bottom:1px solid var(--accent);background:color-mix(in srgb,var(--scene) 87%,var(--accent));transform:rotate(-1deg);clip-path:polygon(0 0,95% 0,100% 18%,100% 100%,0 100%)}
.dispatch-heading{font:18px var(--serif);letter-spacing:3px;color:var(--accent)}
.dispatch-strip>div:not(.dispatch-fold){display:flex;gap:13px;align-items:center;margin-top:15px;font-size:13px}
.dispatch-strip i{font-style:normal;color:var(--accent);animation:message-pass 3.8s ease-in-out infinite}
.dispatch-strip small{font-size:11px;line-height:1.8;display:block;margin-top:11px;color:var(--muted)}
.dispatch-fold{position:absolute;right:0;top:0;width:24px;height:24px;background:var(--accent);opacity:.3;clip-path:polygon(0 0,100% 100%,0 100%)}
.stage[data-scene=fontaine] .message-line{margin-top:21px}
.stage[data-scene=fontaine] .companion-cameo{right:-180px;bottom:-86px}
.stage[data-scene=sumeru] .directory{max-width:520px;background:color-mix(in srgb,var(--scene) 94%,var(--accent));padding-bottom:38px;transform:rotate(-1deg);border-bottom:1px solid var(--accent);clip-path:none}
.directory details{transition:background .3s}
.directory details[data-active=true]{background:color-mix(in srgb,var(--scene) 83%,var(--accent))}
.directory summary{padding:12px 0;font-size:23px}
.directory details p{font-size:14px;line-height:1.75;padding:0 18px 13px 35px}
.directory summary:after,.directory details[open] summary:after{content:'↗';font-size:16px}
.book-page-number{position:absolute;bottom:13px;left:35px;font:10px var(--sans);letter-spacing:2px;color:var(--accent)}
.expedition-stamp{display:flex;align-items:center;gap:18px;margin-top:33px;width:min(460px,100%);padding:12px 0;transform:rotate(-3deg)}
.expedition-stamp>img{width:63px;height:66px;object-fit:contain;opacity:.8}
.expedition-stamp>span{font:14px/1.6 var(--serif);color:var(--accent);letter-spacing:4px}
.expedition-stamp strong{font-size:29px;font-weight:400;letter-spacing:6px}
.expedition-stamp>i{writing-mode:vertical-rl;font:9px/1 var(--sans);letter-spacing:2px;font-style:normal;opacity:.6}
.travel-journal{position:relative;width:min(520px,100%);margin-top:29px;isolation:isolate;transform:rotate(-3deg);perspective:900px}
.journal-underlay{position:absolute;inset:7px -5px -7px 6px;transform:rotate(2deg);background:var(--accent);opacity:.6;z-index:-1}
.journal-spread{position:relative;display:grid;grid-template-columns:44% 56%;min-height:180px;background:var(--ink);color:var(--scene);box-shadow:0 14px 35px #0004}
.journal-spread:after{content:'';position:absolute;left:44%;width:13px;top:0;bottom:0;background:linear-gradient(90deg,#0002,transparent);pointer-events:none}
.journal-visual{position:relative;overflow:hidden;min-height:180px;background:var(--accent)}
.journal-picture{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:journal-photo .8s ease-out both}
.journal-picture.mora{object-fit:contain;padding:26px;transform:rotate(-12deg)}
.journal-visual>span{position:absolute;bottom:12px;left:13px;font:8px var(--sans);letter-spacing:3px;color:var(--ink);background:var(--scene);padding:5px 7px}
.journal-copy{padding:20px 20px 35px;transform-origin:left center;animation:journal-open .7s cubic-bezier(.2,.7,.2,1) both}
.journal-copy>small{font:9px var(--sans);letter-spacing:1px}
.journal-copy>h2{font:27px/1.35 var(--serif);letter-spacing:1px;margin:12px 0 7px;text-wrap:balance}
.journal-copy>p{font-size:11px;line-height:1.8;opacity:.8}
.journal-pagination{display:flex;gap:6px;margin-top:15px}
.journal-pagination i{height:2px;width:14px;background:var(--scene);opacity:.2}
.journal-pagination i.active{width:30px;opacity:.8}
.journal-pause{position:absolute;right:10px;bottom:7px;min-height:26px;font-size:9px;color:var(--scene);opacity:.75;padding:5px 8px}
.journal-pause:hover,.journal-pause:focus-visible{opacity:1}
.journal-bowl{position:absolute;width:100%;height:100%;inset:0;fill:none;stroke:var(--scene);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.journal-bowl .steam{stroke-width:2;opacity:.65;animation:steam-rise 3s ease-in-out infinite}
.stage[data-scene=liyue] .interests{max-width:520px;margin-top:22px}
.stage[data-scene=liyue] .interest{min-height:76px;padding-top:11px;padding-bottom:11px}
.stage[data-scene=liyue] .interest b{font-size:22px}.stage[data-scene=liyue] .interest span{font-size:13px}
.stage[data-scene=liyue] .interest-note{margin-top:9px;min-height:24px;font-size:13px}
.interest:hover,.interest:focus-visible{background:color-mix(in srgb,var(--scene) 88%,var(--accent));outline-offset:3px}
@keyframes invitation{0%,100%{translate:0 -2px;opacity:.6}50%{translate:0 4px;opacity:1}}
@keyframes scroll-tick{0%,100%{translate:0 0;opacity:.5}55%{translate:0 9px;opacity:1}}
@keyframes atlas-arrive{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes message-pass{0%,100%{translate:0 0;opacity:.5}50%{translate:3px 0;opacity:1}}
@keyframes journal-open{from{rotate:y -24deg;opacity:.4}to{rotate:y 0deg;opacity:1}}
@keyframes journal-photo{from{opacity:.4;scale:1.06}to{opacity:1;scale:1}}
@keyframes steam-rise{0%,100%{translate:0 2px;opacity:.35}50%{translate:0 -5px;opacity:.7}}
@media(min-width:1800px){.scene-content{padding-top:6vh;padding-bottom:120px}.travel-journal{width:570px;max-width:92%}.journal-spread,.journal-visual{min-height:220px}.journal-copy{padding:25px 28px}.journal-copy h2{font-size:32px}.world-echo{height:58%}}
@media(max-width:1100px){
 .topbar{height:100px}.stage{display:block;min-height:calc(100svh - 170px);max-height:none;align-items:initial}
 .stage .actor-shell .character{max-height:none}
 .scene-content,.reverse .scene-content{padding-bottom:117px;margin-left:0;width:100%}
 .world-echo,.reverse .world-echo{width:100%;height:42%;opacity:.28;z-index:1}
 .world-echo>span{font-size:80px;bottom:8%;opacity:.15}
 .world-echo>img{mask-image:linear-gradient(180deg,transparent,black)}
 .journey-footer{height:93px}.prototype-caption{height:26px;padding-top:6px}
 .scroll-invitation,.reverse .scroll-invitation{left:25px;bottom:23px}
 .gate{height:calc(100svh - 150px);min-height:560px}.gate .scene-content{bottom:85px}.gate .scroll-invitation{left:50%;bottom:22px}
 .route-atlas{margin-top:28px}.atlas-caption{font-size:14px;letter-spacing:1px}.atlas-stops{gap:7px}
 .atlas-stop img{width:29px;height:31px}.atlas-stop small{font-size:9px;letter-spacing:0}
 .conversation-thread{gap:9px;font-size:12px;letter-spacing:1px;margin-top:31px}
 .dispatch-strip{margin-top:36px;padding:16px 18px}.dispatch-strip>div:not(.dispatch-fold){font-size:11px;gap:10px}.dispatch-heading{font-size:16px}
 .stage[data-scene=fontaine] .companion-cameo{right:-36px;bottom:-40px}
 .stage[data-scene=sumeru] .directory{max-width:none;padding-bottom:43px}
 .directory details p{padding-left:22px;padding-right:6px;font-size:14px}.directory summary{font-size:22px;padding:13px 0}
 .directory details p br{display:none}.book-page-number{left:20px;font-size:8px;letter-spacing:1px}
 .expedition-stamp{gap:14px;margin-top:28px}.expedition-stamp>img{width:53px;height:56px}.expedition-stamp strong{font-size:26px}
 .travel-journal{margin-top:27px;width:100%;transform:rotate(-2deg)}
 .journal-spread{grid-template-columns:42% 58%}.journal-spread:after{left:42%}.journal-spread,.journal-visual{min-height:178px}
 .journal-copy{padding:18px 12px 33px}.journal-copy>small{font-size:8px}.journal-copy>h2{font-size:22px;margin-top:12px}.journal-copy>p{font-size:10px}
 .journal-visual>span{left:7px;bottom:11px;font-size:6px;letter-spacing:1px}.journal-picture.mora{padding:14px}
 .ending .scene-content{padding-bottom:50px}
}
body.simple-motion .journey-keepsake *,body.simple-motion .scroll-invitation *{animation:none!important}
body.simple-motion .journal-pause{display:none}
body.page-hidden .journey-keepsake *,body.page-hidden .scroll-invitation *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.journey-keepsake *,.scroll-invitation *{animation:none!important}.journey-keepsake{transition:none!important}.journal-pause{display:none}}

.transition-cover .journey-keepsake *,.transition-cover .scroll-invitation *{animation:none!important}

/* Liyue dishes retain their original game artwork and colors. */
.journal-feast{position:absolute;inset:0 0 25px;isolation:isolate;animation:journal-photo .8s ease-out both}
.journal-feast .dish{position:absolute;object-fit:contain;width:58%;height:62%}
.journal-feast .dish-main{width:78%;height:80%;left:11%;top:-5%;z-index:2}
.journal-feast .dish-left{left:-4%;bottom:-8%;z-index:3;transform:rotate(-10deg)}
.journal-feast .dish-right{right:-4%;bottom:-5%;z-index:1;transform:rotate(9deg)}
.travel-journal[data-page="2"] .journal-copy>h2{font-size:25px}
@media(max-width:1100px){.travel-journal[data-page="2"] .journal-copy>h2{font-size:20px}.travel-journal[data-page="2"] .journal-copy>p{font-size:10px}}

#notes-content{font-size:17px;line-height:2;white-space:pre-line}