.home-mascot-greeting {
  display: flex;
  align-items: center;
  gap: 12px;
}
.home-mascot-greeting--app { margin-top: 4px; }
.home-mascot-greeting--app .home-dot-mascot { margin-block: -8px; }
.home-dot-mascot {
  --mascot-size: 64px;
  display: block;
  flex: 0 0 var(--mascot-size);
  width: var(--mascot-size);
  height: var(--mascot-size);
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}
.home-dot-mascot:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.home-dot-mascot__window {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.home-dot-mascot__sheet {
  display: block;
  width: calc(var(--mascot-size) * 31);
  max-width: none;
  height: var(--mascot-size);
  image-rendering: pixelated;
  pointer-events: none;
}
@media (min-width: 1024px) {
  .home-dot-mascot { --mascot-size: 128px; }
}
.home-dot-mascot[data-state="idle"] .home-dot-mascot__sheet {
  animation: home-mascot-idle 900ms steps(1, end) infinite both;
}
@keyframes home-mascot-idle {
  0.00000% { transform: translateX(calc(var(--mascot-size) * -0)); }
  22.22222% { transform: translateX(calc(var(--mascot-size) * -1)); }
  50.00000% { transform: translateX(calc(var(--mascot-size) * -2)); }
  77.77778% { transform: translateX(calc(var(--mascot-size) * -3)); }
  100% { transform: translateX(calc(var(--mascot-size) * -3)); }
}
.home-dot-mascot[data-state="blink"] .home-dot-mascot__sheet {
  animation: home-mascot-blink 420ms steps(1, end) 1 both;
}
@keyframes home-mascot-blink {
  0.00000% { transform: translateX(calc(var(--mascot-size) * -4)); }
  35.71429% { transform: translateX(calc(var(--mascot-size) * -5)); }
  64.28571% { transform: translateX(calc(var(--mascot-size) * -6)); }
  100% { transform: translateX(calc(var(--mascot-size) * -6)); }
}
.home-dot-mascot[data-state="jump"] .home-dot-mascot__sheet {
  animation: home-mascot-jump 1040ms steps(1, end) 1 both;
}
@keyframes home-mascot-jump {
  0.00000% { transform: translateX(calc(var(--mascot-size) * -7)); }
  13.46154% { transform: translateX(calc(var(--mascot-size) * -8)); }
  23.07692% { transform: translateX(calc(var(--mascot-size) * -9)); }
  32.69231% { transform: translateX(calc(var(--mascot-size) * -10)); }
  50.00000% { transform: translateX(calc(var(--mascot-size) * -11)); }
  59.61538% { transform: translateX(calc(var(--mascot-size) * -12)); }
  69.23077% { transform: translateX(calc(var(--mascot-size) * -13)); }
  84.61538% { transform: translateX(calc(var(--mascot-size) * -14)); }
  100% { transform: translateX(calc(var(--mascot-size) * -14)); }
}
.home-dot-mascot[data-state="wave"] .home-dot-mascot__sheet {
  animation: home-mascot-wave 600ms steps(1, end) 1 both;
}
@keyframes home-mascot-wave {
  0.00000% { transform: translateX(calc(var(--mascot-size) * -15)); }
  23.33333% { transform: translateX(calc(var(--mascot-size) * -16)); }
  46.66667% { transform: translateX(calc(var(--mascot-size) * -17)); }
  76.66667% { transform: translateX(calc(var(--mascot-size) * -18)); }
  100% { transform: translateX(calc(var(--mascot-size) * -18)); }
}
.home-dot-mascot[data-state="face_uruuru"] .home-dot-mascot__sheet {
  animation: home-mascot-face_uruuru 500ms steps(1, end) infinite both;
}
@keyframes home-mascot-face_uruuru {
  0.00000% { transform: translateX(calc(var(--mascot-size) * -19)); }
  50.00000% { transform: translateX(calc(var(--mascot-size) * -20)); }
  100% { transform: translateX(calc(var(--mascot-size) * -20)); }
}
.home-dot-mascot[data-state="face_sparkle"] .home-dot-mascot__sheet {
  animation: home-mascot-face_sparkle 500ms steps(1, end) infinite both;
}
@keyframes home-mascot-face_sparkle {
  0.00000% { transform: translateX(calc(var(--mascot-size) * -21)); }
  50.00000% { transform: translateX(calc(var(--mascot-size) * -22)); }
  100% { transform: translateX(calc(var(--mascot-size) * -22)); }
}
.home-dot-mascot[data-state="face_squint"] .home-dot-mascot__sheet {
  animation: home-mascot-face_squint 500ms steps(1, end) infinite both;
}
@keyframes home-mascot-face_squint {
  0.00000% { transform: translateX(calc(var(--mascot-size) * -23)); }
  100% { transform: translateX(calc(var(--mascot-size) * -23)); }
}
.home-dot-mascot[data-state="face_heart"] .home-dot-mascot__sheet {
  animation: home-mascot-face_heart 500ms steps(1, end) infinite both;
}
@keyframes home-mascot-face_heart {
  0.00000% { transform: translateX(calc(var(--mascot-size) * -24)); }
  100% { transform: translateX(calc(var(--mascot-size) * -24)); }
}
.home-dot-mascot[data-state="face_smile"] .home-dot-mascot__sheet {
  animation: home-mascot-face_smile 500ms steps(1, end) infinite both;
}
@keyframes home-mascot-face_smile {
  0.00000% { transform: translateX(calc(var(--mascot-size) * -25)); }
  100% { transform: translateX(calc(var(--mascot-size) * -25)); }
}
.home-dot-mascot[data-state="face_pout"] .home-dot-mascot__sheet {
  animation: home-mascot-face_pout 500ms steps(1, end) infinite both;
}
@keyframes home-mascot-face_pout {
  0.00000% { transform: translateX(calc(var(--mascot-size) * -26)); }
  100% { transform: translateX(calc(var(--mascot-size) * -26)); }
}
.home-dot-mascot[data-state="face_surprise"] .home-dot-mascot__sheet {
  animation: home-mascot-face_surprise 500ms steps(1, end) infinite both;
}
@keyframes home-mascot-face_surprise {
  0.00000% { transform: translateX(calc(var(--mascot-size) * -27)); }
  100% { transform: translateX(calc(var(--mascot-size) * -27)); }
}
.home-dot-mascot[data-state="face_sleepy"] .home-dot-mascot__sheet {
  animation: home-mascot-face_sleepy 500ms steps(1, end) infinite both;
}
@keyframes home-mascot-face_sleepy {
  0.00000% { transform: translateX(calc(var(--mascot-size) * -28)); }
  100% { transform: translateX(calc(var(--mascot-size) * -28)); }
}
.home-dot-mascot[data-state="face_wink"] .home-dot-mascot__sheet {
  animation: home-mascot-face_wink 500ms steps(1, end) infinite both;
}
@keyframes home-mascot-face_wink {
  0.00000% { transform: translateX(calc(var(--mascot-size) * -29)); }
  100% { transform: translateX(calc(var(--mascot-size) * -29)); }
}
.home-dot-mascot[data-state="face_wink_left"] .home-dot-mascot__sheet {
  animation: home-mascot-face_wink_left 500ms steps(1, end) infinite both;
}
@keyframes home-mascot-face_wink_left {
  0.00000% { transform: translateX(calc(var(--mascot-size) * -30)); }
  100% { transform: translateX(calc(var(--mascot-size) * -30)); }
}
@media (prefers-reduced-motion: reduce) {
  .home-dot-mascot[data-state] .home-dot-mascot__sheet {
    animation: none;
    transform: none;
  }
}