.logo-guide{
  --guide-edge:#293b32;--guide-color:#293b32;
  position:fixed;left:0;top:0;z-index:59;display:block;color:#293b32;
  text-decoration:none;outline-offset:6px;will-change:transform;transform-origin:0 0;
  transition:color 2.6s ease;
}
.logo-guide[hidden]{display:none}
.logo-guide svg{display:block;width:100%;height:100%;overflow:visible}
.guide-ink-start{stop-color:var(--guide-edge);transition:stop-color 2.8s ease}
.guide-ink-end{stop-color:var(--guide-color);transition:stop-color 2.8s ease}
.theme-blue{--guide-edge:#293b32;--guide-color:#355bea;color:#355bea}
.theme-lime{--guide-edge:#293b32;--guide-color:#8baf25;color:#8baf25}
.guide-ring{transform-origin:180px 180px;transition:transform 1.15s ease}
.guide-body,.guide-heads{transition:opacity .7s ease}
.guide-shades,.guide-smile{opacity:0;transition:opacity .7s ease}
.guide-spark{opacity:0;fill:#b6d87a;filter:blur(5px);transition:opacity 1s ease}
.is-cool .guide-shades{opacity:1}
.is-cool .guide-body,.is-cool .guide-heads{opacity:.15}
.is-smiling .guide-smile{opacity:.65}
.is-surprised .guide-ring{transform:scale(1.04) rotate(-5deg)}
.is-surprised .guide-spark,.is-inviting .guide-spark,.is-welcoming .guide-spark{opacity:.7}
.guide-message{
  position:absolute;right:calc(100% + 12px);top:50%;white-space:nowrap;
  transform:translateY(-50%) scale(.97);opacity:0;
  padding:10px 13px;border:1px solid #d6d9cc;border-radius:5px;
  background:rgba(246,245,238,.96);color:#293b32;
  font:500 11px/1.4 var(--sans,Arial,sans-serif);letter-spacing:-.01em;
  box-shadow:0 5px 18px #293b3209;pointer-events:none;
  transition:opacity .75s ease,transform .75s ease;
}
.has-caption .guide-message{opacity:1;transform:translateY(-50%) scale(1)}
.caption-right .guide-message{left:calc(100% + 12px);right:auto;transform-origin:left center}
.guide-highlight{box-shadow:0 0 0 8px #dfff803d;transition:box-shadow 1.2s ease}
@media(max-width:600px){
  .guide-message{display:none}
  .is-welcoming .guide-message{display:block;font-size:10px;padding:9px 11px}
}
@media(prefers-reduced-motion:reduce){
  .logo-guide{display:none!important}
  .guide-highlight{box-shadow:none;transition:none}
}

.on-dark{--guide-edge:#f1f0e9;--guide-color:#f1f0e9;color:#f1f0e9}.on-dark.theme-blue{--guide-color:#93a5ff;color:#93a5ff}.on-dark.theme-lime{--guide-color:#d1ed7b;color:#d1ed7b}.guide-message{max-width:220px;white-space:normal;width:max-content}.is-welcoming .guide-message{max-width:min(220px,calc(100vw - 98px))}
