.doodle-traveler{position:fixed;left:0;top:0;z-index:35;width:138px;pointer-events:none;color:var(--ink);opacity:0;visibility:hidden;transition:transform .8s cubic-bezier(.22,.8,.3,1),opacity .25s;will-change:transform}
.doodle-traveler.is-traveling{opacity:1;visibility:visible}
.girl-away .sleepy-girl{visibility:hidden}
.doodle-traveler .sleepy-girl{display:block;height:90px;background:color-mix(in srgb,var(--paper) 88%,transparent);border-radius:30px}
.doodle-traveler .doodle-upper{transform:rotate(0deg)}
.doodle-traveler :is(.doodle-legs-sleep,.doodle-eyes-sleep,.doodle-zzz){display:none}
.doodle-traveler :is(.doodle-legs-awake,.doodle-eyes-awake){opacity:1}
.doodle-activity{display:block;text-align:center;font:10px/1.35 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--subtle);padding:5px 7px;background:var(--paper);border:1px solid var(--line);border-radius:12px}
.journey-prop{display:none;fill:var(--paper);stroke:var(--rose);stroke-width:2}
[data-activity=code] .prop-code,[data-activity=radar] .prop-radar,[data-activity=build] .prop-build,[data-activity=read] .prop-read,[data-activity=paint] .prop-paint,[data-activity=signal] .prop-signal,[data-activity=wave] .prop-wave{display:block}
.doodle-traveler .doodle-arm{transform-origin:100px 67px;animation:journey-tinker 1.4s ease-in-out infinite alternate}
[data-activity=wave] .doodle-arm{opacity:0}
.prop-wave{transform-origin:111px 68px;animation:journey-wave .7s ease-in-out infinite alternate}
.prop-signal,.prop-radar{animation:journey-signal 2s ease-in-out infinite}
@keyframes journey-tinker{to{transform:rotate(-7deg) translateY(-2px)}}
@keyframes journey-wave{to{transform:rotate(16deg)}}
@keyframes journey-signal{50%{opacity:.4}}
.journey-still,.journey-still *{animation:none!important;transition:none!important}
@media(max-width:600px){.doodle-traveler{width:94px}.doodle-traveler .sleepy-girl{height:64px}.doodle-activity{font-size:8px;padding:4px}}
@media(prefers-reduced-motion:reduce){.doodle-traveler,.doodle-traveler *{animation:none!important;transition:none!important}}

/* The character walks in document coordinates, between section landing points. */
.doodle-traveler{position:absolute;transition:opacity .2s;overflow:visible}
.doodle-traveler .sleepy-girl{height:auto;background:none;border-radius:0;filter:drop-shadow(0 1px 2px var(--paper))}
.doodle-activity{display:none}
.walking-legs{display:none}
.is-walking .walking-legs{display:block}
.is-walking .doodle-legs-awake,.is-walking .journey-prop,.is-walking .doodle-ground{display:none!important}
.is-walking .sleepy-girl{transform:translateY(var(--step-bob)) scaleX(var(--facing));transform-origin:center}
.walk-leg-a,.walk-leg-b{transform-origin:100px 102px}
.walk-leg-a{transform:rotate(var(--stride))}.walk-leg-b{transform:rotate(var(--counter-stride))}
.is-walking .doodle-arm{opacity:1;animation:none;transform:rotate(var(--counter-stride));transform-origin:100px 67px}
.doodle-traveler .doodle-upper{transition:none}

.doodle-traveler{transition:opacity .65s ease}
.doodle-traveler.is-idle-hidden{opacity:0}
.doodle-traveler.is-idle-hidden *{animation-play-state:paused!important}