/* A quiet, hand-drawn character: movement accompanies the conversation. */
.hiyoppo {
  display: block;
  width: var(--hiyoppo-size, 100%);
  height: var(--hiyoppo-size, 100%);
  line-height: 0;
  isolation: isolate;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.hiyoppo > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hiyoppo__bird {
  transform-box: view-box;
  transform-origin: 50% 81%;
}
.hiyoppo__wing {
  transform-box: view-box;
  transform-origin: 71% 52%;
}
.hiyoppo__shoulder { opacity: 0; }
.hiyoppo[data-mood] .hiyoppo__shoulder { opacity: 1; }
.hiyoppo__blink {
  opacity: 0;
  animation: hiyoppo-blink 10.8s linear 2s infinite;
}
.hiyoppo__ink { fill: none; stroke: #504f47; stroke-width: 4.8; stroke-linecap: round; stroke-linejoin: round; }
.hiyoppo__ink--soft { stroke-width: 1.7; opacity: .28; }
.hiyoppo__brows { stroke-width: 3.5; opacity: .76; }
.hiyoppo__face--talking .hiyoppo__ink { fill: #efb978; }
.hiyoppo__face, .hiyoppo__emote { opacity: 0; }
.hiyoppo__emote { transform-box: fill-box; transform-origin: center; }
.hiyoppo[data-mood] .hiyoppo__blink { animation: none; opacity: 0; }
.hiyoppo[data-mood="happy"] .hiyoppo__face--happy,
.hiyoppo[data-mood="celebrate"] .hiyoppo__face--happy,
.hiyoppo[data-mood="greeting"] .hiyoppo__face--greeting,
.hiyoppo[data-mood="listen"] .hiyoppo__face--listen,
.hiyoppo[data-mood="thinking"] .hiyoppo__face--thinking,
.hiyoppo[data-mood="talking"] .hiyoppo__face--talking { opacity: 1; }
.hiyoppo[data-mood="happy"] .hiyoppo__emote--heart,
.hiyoppo[data-mood="celebrate"] .hiyoppo__emote--heart,
.hiyoppo[data-mood="celebrate"] .hiyoppo__emote--sparkles,
.hiyoppo[data-mood="greeting"] .hiyoppo__emote--hello,
.hiyoppo[data-mood="thinking"] .hiyoppo__emote--thought {
  opacity: 1;
  animation: hiyoppo-emote 3.4s ease-in-out both;
}
.hiyoppo[data-mood="celebrate"] .hiyoppo__emote { animation-duration: 4.4s; }
.hiyoppo[data-mood="thinking"] .hiyoppo__emote { animation-duration: 4.2s; }
.hiyoppo[data-mood="thinking"] .hiyoppo__thought-dot { animation: hiyoppo-thought 2.2s ease-in-out infinite; }
.hiyoppo__thought-dot:nth-child(2) { animation-delay: .25s !important; }
.hiyoppo__thought-dot:nth-child(3) { animation-delay: .5s !important; }
.hiyoppo[data-mood="greeting"] .hiyoppo__wing {
  animation: hiyoppo-wave 3.6s ease-in-out both;
}
.hiyoppo[data-mood="happy"] .hiyoppo__wing {
  animation: hiyoppo-wave 3.4s ease-in-out both;
}
.hiyoppo[data-mood="greeting"] .hiyoppo__bird {
  animation: hiyoppo-hello 3.6s ease-in-out both;
}
.hiyoppo[data-mood="happy"] .hiyoppo__bird {
  animation: hiyoppo-nod 3.4s ease-in-out both;
}
.hiyoppo[data-mood="listen"] .hiyoppo__bird {
  animation: hiyoppo-listen 4.2s ease-in-out both;
}
.hiyoppo[data-mood="thinking"] .hiyoppo__bird {
  animation: hiyoppo-ponder 4.2s ease-in-out both;
}
.hiyoppo[data-mood="talking"] .hiyoppo__bird {
  animation: hiyoppo-speak 3.6s ease-in-out both;
}
.hiyoppo[data-mood="talking"] .hiyoppo__wing {
  animation: hiyoppo-talk-wing 3.6s ease-in-out both;
}
.hiyoppo[data-mood="talking"] .hiyoppo__face--talking {
  animation: hiyoppo-beak 3.6s linear both;
}
.hiyoppo[data-mood="celebrate"] .hiyoppo__bird {
  animation: hiyoppo-joy 4.4s ease-in-out both;
}
.hiyoppo[data-mood="celebrate"] .hiyoppo__wing {
  animation: hiyoppo-wave 4.4s ease-in-out both;
}
@keyframes hiyoppo-emote {
  0%, 100% { opacity: 0; transform: translateY(4px) scale(.84); }
  18%, 78% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes hiyoppo-thought {
  0%, 100% { opacity: .46; }
  40%, 65% { opacity: 1; }
}
@keyframes hiyoppo-ponder {
  0%, 100% { transform: rotate(0deg); }
  32%, 76% { transform: rotate(-4deg) translateY(-2px); }
}
@keyframes hiyoppo-speak {
  0%, 100% { transform: translateY(0) rotate(0); }
  22% { transform: translateY(-3px) rotate(-1.5deg); }
  43% { transform: translateY(2px) rotate(1deg); }
  67% { transform: translateY(-2px) rotate(-.8deg); }
  84% { transform: translateY(1px); }
}
@keyframes hiyoppo-talk-wing {
  0%, 100% { transform: rotate(0deg); }
  27%, 58% { transform: rotate(-4deg); }
  76% { transform: rotate(-1deg); }
}
@keyframes hiyoppo-beak {
  0%, 17%, 31%, 48%, 65%, 82%, 100% { opacity: 0; }
  4%, 13%, 21%, 27%, 36%, 43%, 53%, 60%, 69%, 77% { opacity: 1; }
}
@keyframes hiyoppo-blink {
  0%, 91.8%, 93.7%, 100% { opacity: 0; }
  92%, 93.5% { opacity: 1; }
}
@keyframes hiyoppo-wave {
  0%, 100% { transform: rotate(0deg); }
  21% { transform: rotate(-7deg); }
  45% { transform: rotate(3deg); }
  69% { transform: rotate(-6deg); }
  84% { transform: rotate(1deg); }
}
@keyframes hiyoppo-hello {
  0%, 100% { transform: rotate(0deg); }
  34%, 58% { transform: rotate(-2deg); }
}
@keyframes hiyoppo-nod {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  29% { transform: translateY(6px) rotate(2deg); }
  59% { transform: translateY(-1px) rotate(-.7deg); }
  78% { transform: translateY(2px) rotate(.5deg); }
}
@keyframes hiyoppo-listen {
  0%, 100% { transform: rotate(0deg); }
  34%, 70% { transform: rotate(4deg); }
}
@keyframes hiyoppo-joy {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  19% { transform: translateY(-11px) rotate(-3deg); }
  39% { transform: translateY(0) rotate(1deg); }
  61% { transform: translateY(-7px) rotate(-2deg); }
  82% { transform: translateY(0) rotate(.7deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hiyoppo *, .hiyoppo *::before, .hiyoppo *::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  .hiyoppo__blink, .hiyoppo__shoulder { opacity: 0 !important; }
}

/* A dedicated bold portrait, drawn for 48 px rather than shrinking a full body. */
.hiyoppo--icon{position:relative;isolation:auto;mix-blend-mode:normal;filter:none}
.hiyoppo-icon__art{display:block;width:100%;height:100%;object-fit:contain;transform-origin:50% 80%}
.hiyoppo-icon__heart{position:absolute;right:-2px;top:1px;font-size:13px;line-height:1;color:#76cfba;opacity:0;transform:translateY(4px)}
.hiyoppo--icon[data-mood="happy"] .hiyoppo-icon__art{animation:hiyoppo-nod 3.4s ease-in-out both}
.hiyoppo--icon[data-mood="listen"] .hiyoppo-icon__art{animation:hiyoppo-listen 4.2s ease-in-out both}
.hiyoppo--icon[data-mood="celebrate"] .hiyoppo-icon__art{animation:hiyoppo-joy 4.4s ease-in-out both}
.hiyoppo--icon[data-mood="happy"] .hiyoppo-icon__heart,.hiyoppo--icon[data-mood="celebrate"] .hiyoppo-icon__heart{animation:hiyoppo-emote 3.4s ease-in-out both}