/* A character gesture replaces the old generic whole-page fade. */
@view-transition{navigation:none}
html.knodd-travelling,html.knodd-arriving{overflow:hidden}
#knodd-page-transition{position:fixed;inset:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#F4F0E6;color:#293C38;overflow:hidden}
#knodd-page-transition:not([open]){display:none}
#knodd-page-transition::backdrop{background:#F4F0E6}
.route-friend{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(42vh,320px,76vw);width:min(42dvh,320px,76vw);aspect-ratio:1}
.route-friend img,.route-friend canvas,.route-friend video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.route-friend canvas[hidden],.route-friend video[hidden]{display:none}
.route-animated .route-friend img{visibility:hidden}
.route-skip{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);padding:12px 18px;color:#80644B;font:inherit;font-size:13px;background:none;border:0;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
#knodd-page-transition[open] .route-friend{animation:knodd-gesture-in .2s ease-out both}
.knodd-arriving::before{content:"";position:fixed;inset:0;z-index:2147483647;background:#F4F0E6 url('/assets/knodd-transparent.webp') no-repeat center;background-size:min(42vh,320px,76vw) auto;background-size:min(42dvh,320px,76vw) auto;pointer-events:none;opacity:1;transition:opacity .24s ease-out}
.knodd-arriving.knodd-arrived::before{opacity:0}
@keyframes knodd-gesture-in{from{opacity:0}to{opacity:1}}
#knodd-page-transition.route-leaving .route-friend{animation:knodd-gesture-out .24s ease-in both}
@keyframes knodd-gesture-out{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){#knodd-page-transition[open] .route-friend{animation:none}.knodd-arriving::before{display:none}}