/* The same X4 figure as home, with quiet, contextual gestures on inner pages. */
.page-guide {
  --guide-ink:#13201E;
  position:fixed;
  right:max(12px, env(safe-area-inset-right));
  bottom:calc(20px + env(safe-area-inset-bottom));
  z-index:45;
  width:58px;
  height:88px;
  padding:0;
  border:0;
  border-radius:14px;
  background:none;
  color:var(--guide-ink);
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  animation:page-guide-arrive .38s cubic-bezier(.2,.7,.2,1) both;
}
.page-guide[hidden]{display:none}
.page-guide:focus-visible{outline:3px solid #00758A;outline-offset:4px;background:#F1F8F4}
.page-guide>svg{width:100%;height:100%;overflow:visible;transform:rotate(var(--guide-lean,0deg));transform-origin:50% 95%;transition:transform .2s ease-out}
.page-guide .g-shadow{fill:rgba(19,32,30,.16)}
.page-guide .g-body{fill:#fff;stroke:var(--guide-ink);stroke-width:.4;stroke-linejoin:round}
.page-guide .g-eye,.page-guide .g-o{fill:var(--guide-ink)}
.page-guide .g-cheek{fill:#FF8A5B;opacity:.8}
.page-guide .g-smile,.page-guide .g-wink{fill:none;stroke:var(--guide-ink);stroke-width:.28;stroke-linecap:round}
.page-guide .g-o,.page-guide .g-wink,.page-guide .g-prop{display:none}
.page-guide .g-ln{stroke:var(--guide-ink);stroke-width:.24;stroke-linejoin:round;stroke-linecap:round}
.page-guide .g-prop.on{display:inline;transform-box:fill-box;transform-origin:50% 100%;animation:page-guide-prop .4s cubic-bezier(.2,1.5,.4,1) both}
.page-guide .g-eye{transform-box:fill-box;transform-origin:center;animation:page-guide-blink 6.4s infinite}
.page-guide .g-all{transform-origin:14.8px 34px}
.page-guide .g-eyes{transition:transform .3s ease}
.page-guide[data-prop="magnifier"] .g-eyes{transform:translate(-.45px,.1px)}
.page-guide[data-prop="glasses"] .g-eyes,
.page-guide[data-prop="pencil"] .g-eyes{transform:translate(0,.3px)}
.page-guide[data-prop="magnifier"] .g-all,
.page-guide[data-prop="cap"] .g-all{animation:page-guide-peek 8s ease-in-out infinite}
.page-guide[data-prop="bowtie"] .g-all,
.page-guide[data-prop="glasses"] .g-all{animation:page-guide-nod 9s ease-in-out infinite}
.page-guide[data-prop="wave"] .g-hand{transform-origin:16.5px 21.6px;animation:page-guide-wave 6s ease-in-out infinite}
.page-guide[data-prop="pencil"] .g-prop.on,
.page-guide[data-prop="brush"] .g-prop.on{animation:page-guide-sketch 7s ease-in-out infinite}
.page-guide[data-prop="flower"] .g-prop.on,
.page-guide[data-prop="tangerine"] .g-prop.on{animation:page-guide-flower 8s ease-in-out infinite}
.page-guide-label {
  position:absolute;
  right:calc(100% + 6px);
  bottom:17px;
  padding:6px 11px;
  border-radius:999px;
  background:var(--guide-ink);
  color:#fff;
  font:600 12px/1.5 var(--site-font);
  white-space:nowrap;
  opacity:0;
  transform:translateX(4px);
  transition:opacity .18s,transform .18s;
  pointer-events:none;
}
.page-guide:focus-visible .page-guide-label{opacity:1;transform:none}
.page-guide:focus-visible .g-wink{display:inline}
.page-guide:focus-visible .g-eye-l{display:none}
@media(hover:hover) and (pointer:fine){
  .page-guide:hover .page-guide-label{opacity:1;transform:none}
  .page-guide:hover .g-wink{display:inline}
  .page-guide:hover .g-eye-l{display:none}
  .page-guide:hover>svg{transform:translateY(-4px) rotate(-4deg)}
}
.page-guide:active>svg{transform:translateY(-8px) scale(.95,1.04)}
.page-guide.is-paused,.page-guide.is-paused *{animation-play-state:paused!important}
@media(min-width:64rem){.page-guide{right:clamp(12px,calc((var(--header-gut) - 58px) / 2),36px)}}
@media(max-width:600px){.page-guide{width:52px;height:80px;right:max(8px,env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom))}}
@keyframes page-guide-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes page-guide-prop{from{transform:scale(.65)}to{transform:none}}
@keyframes page-guide-blink{0%,43%,47%,100%{transform:scaleY(1)}45%{transform:scaleY(.1)}}
@keyframes page-guide-peek{0%,70%,100%{transform:none}77%,84%{transform:rotate(-5deg)}92%{transform:rotate(2deg)}}
@keyframes page-guide-nod{0%,76%,90%,100%{transform:none}82%{transform:scale(1.04,.97)}86%{transform:scale(.99,1.01)}}
@keyframes page-guide-wave{0%,64%,100%{transform:none}70%,82%{transform:rotate(-18deg)}76%,88%{transform:rotate(12deg)}}
@keyframes page-guide-sketch{0%,65%,100%{transform:none}72%,84%{transform:rotate(-6deg)}78%,90%{transform:rotate(4deg)}}
@keyframes page-guide-flower{0%,72%,100%{transform:none}79%{transform:rotate(-9deg)}87%{transform:rotate(7deg)}}
@media(prefers-reduced-motion:reduce){
  .page-guide,.page-guide *{animation:none!important;transition:none!important}
  .page-guide>svg{transform:none!important}
}