.anchor-mascot {
  position: relative;
  z-index: 1;
  width: var(--anchor-mascot-width);
  height: var(--anchor-mascot-height);
  object-fit: contain;
  image-rendering: pixelated;
  flex: 0 0 auto;
  transform-origin: 50% 82%;
}

.anchor-mascot-button {
  position: relative;
  width: var(--anchor-mascot-width);
  height: var(--anchor-mascot-height);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  cursor: pointer;
  overflow: hidden;
}

.anchor-mascot-button::before,
.anchor-mascot-button::after {
  content: "";
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.anchor-mascot-button::before {
  z-index: 0;
  inset: 8% 7%;
  border-radius: 999px;
  background:
    conic-gradient(
      from 0deg,
      rgba(255, 89, 89, 0.88),
      rgba(255, 193, 77, 0.88),
      rgba(116, 240, 158, 0.88),
      rgba(95, 179, 255, 0.88),
      rgba(183, 116, 255, 0.88),
      rgba(255, 89, 89, 0.88)
    );
  filter: blur(3px);
  transform: scale(0.82);
  transition: opacity 120ms ease, transform 180ms ease;
}

.anchor-mascot-button::after {
  z-index: 2;
  right: 15%;
  top: 6%;
  width: 2px;
  height: 2px;
  background: var(--accent-light);
}

.anchor-mascot-button.is-thinking .anchor-mascot {
  animation: mascot-thinking-bob 4000ms steps(16, end) infinite;
}

.anchor-mascot-button.is-creating .anchor-mascot {
  animation: mascot-create-bob 1800ms steps(6, end) infinite;
}

.anchor-mascot-button.is-creating::after {
  left: 73%;
  top: 8%;
  width: 2px;
  height: 2px;
  opacity: 0.86;
  background: var(--success);
  box-shadow:
    0 4px var(--success),
    -4px 4px rgba(117, 240, 158, 0.62),
    -8px 7px rgba(117, 240, 158, 0.42);
  animation: mascot-create-branch 1800ms steps(6, end) infinite;
}

.anchor-mascot-button.is-running .anchor-mascot {
  animation: mascot-run-stride 640ms steps(4, end) infinite;
}

.anchor-mascot-button.is-running::after {
  left: 6%;
  top: 70%;
  width: 3px;
  height: 1px;
  opacity: 0.78;
  background: rgba(241, 227, 216, 0.58);
  box-shadow:
    6px 0 rgba(241, 227, 216, 0.42),
    12px 0 rgba(241, 227, 216, 0.26);
  animation: mascot-run-dust 640ms steps(4, end) infinite;
}

.anchor-mascot-button.is-editing .anchor-mascot {
  animation: mascot-edit-bob 1280ms steps(8, end) infinite;
}

.anchor-mascot-button.is-editing::after {
  right: 15%;
  top: 6%;
  opacity: 1;
  background: #c6ccd1;
  box-shadow:
    2px 0 #c6ccd1,
    0 2px #8b5a2f,
    0 4px #8b5a2f;
  transform-origin: 1px 10px;
  animation: mascot-edit-hammer 1280ms steps(8, end) infinite;
}

.anchor-mascot-button.is-throwing-money .anchor-mascot {
  animation: mascot-money-bob 5800ms linear infinite;
}

.anchor-mascot-button.is-throwing-money::before,
.anchor-mascot-button.is-throwing-money::after {
  width: 7px;
  height: 4px;
  border-radius: 1px;
  background: linear-gradient(90deg, #58b86f 0 2px, #b8ffd0 2px 5px, #58b86f 5px);
  filter: none;
  transform: none;
}

.anchor-mascot-button.is-throwing-money::before {
  left: 49%;
  top: 45%;
  opacity: 0.92;
  box-shadow:
    -8px -5px 0 -1px #9af7ad,
    -15px 1px 0 -1px #6fd889;
  animation: mascot-bills-left 5800ms linear infinite;
}

.anchor-mascot-button.is-throwing-money::after {
  left: 53%;
  top: 45%;
  opacity: 0.92;
  box-shadow:
    8px -5px 0 -1px #9af7ad,
    15px 1px 0 -1px #6fd889;
  animation: mascot-bills-right 5800ms linear infinite;
}

.island-demo:not(.is-expanded) .anchor-mascot-button:not(.is-rainbow) .anchor-mascot {
  animation: none;
  transform: translateY(8px);
}

.island-demo:not(.is-expanded) .anchor-mascot-button:not(.is-rainbow)::before,
.island-demo:not(.is-expanded) .anchor-mascot-button:not(.is-rainbow)::after {
  opacity: 0;
  box-shadow: none;
  animation: none;
}

.desktop-frame:not(.is-hover-suppressed):hover .anchor-mascot-button:not(.is-rainbow) .anchor-mascot,
.desktop-frame:not(.is-hover-suppressed):focus-within .anchor-mascot-button:not(.is-rainbow) .anchor-mascot,
.island-demo:not(.is-hover-suppressed):hover .anchor-mascot-button:not(.is-rainbow) .anchor-mascot,
.island-demo:not(.is-hover-suppressed):focus-within .anchor-mascot-button:not(.is-rainbow) .anchor-mascot {
  transform: none;
}

.desktop-frame:not(.is-hover-suppressed):hover .anchor-mascot-button.is-thinking .anchor-mascot,
.desktop-frame:not(.is-hover-suppressed):focus-within .anchor-mascot-button.is-thinking .anchor-mascot,
.island-demo:not(.is-hover-suppressed):hover .anchor-mascot-button.is-thinking .anchor-mascot,
.island-demo:not(.is-hover-suppressed):focus-within .anchor-mascot-button.is-thinking .anchor-mascot {
  animation: mascot-thinking-bob 4000ms steps(16, end) infinite;
}

.desktop-frame:not(.is-hover-suppressed):hover .anchor-mascot-button.is-creating .anchor-mascot,
.desktop-frame:not(.is-hover-suppressed):focus-within .anchor-mascot-button.is-creating .anchor-mascot,
.island-demo:not(.is-hover-suppressed):hover .anchor-mascot-button.is-creating .anchor-mascot,
.island-demo:not(.is-hover-suppressed):focus-within .anchor-mascot-button.is-creating .anchor-mascot {
  animation: mascot-create-bob 1800ms steps(6, end) infinite;
}

.desktop-frame:not(.is-hover-suppressed):hover .anchor-mascot-button.is-creating::after,
.desktop-frame:not(.is-hover-suppressed):focus-within .anchor-mascot-button.is-creating::after,
.island-demo:not(.is-hover-suppressed):hover .anchor-mascot-button.is-creating::after,
.island-demo:not(.is-hover-suppressed):focus-within .anchor-mascot-button.is-creating::after {
  opacity: 0.86;
  box-shadow:
    0 4px var(--success),
    -4px 4px rgba(117, 240, 158, 0.62),
    -8px 7px rgba(117, 240, 158, 0.42);
  animation: mascot-create-branch 1800ms steps(6, end) infinite;
}

.desktop-frame:not(.is-hover-suppressed):hover .anchor-mascot-button.is-running .anchor-mascot,
.desktop-frame:not(.is-hover-suppressed):focus-within .anchor-mascot-button.is-running .anchor-mascot,
.island-demo:not(.is-hover-suppressed):hover .anchor-mascot-button.is-running .anchor-mascot,
.island-demo:not(.is-hover-suppressed):focus-within .anchor-mascot-button.is-running .anchor-mascot {
  animation: mascot-run-stride 640ms steps(4, end) infinite;
}

.desktop-frame:not(.is-hover-suppressed):hover .anchor-mascot-button.is-running::after,
.desktop-frame:not(.is-hover-suppressed):focus-within .anchor-mascot-button.is-running::after,
.island-demo:not(.is-hover-suppressed):hover .anchor-mascot-button.is-running::after,
.island-demo:not(.is-hover-suppressed):focus-within .anchor-mascot-button.is-running::after {
  opacity: 0.78;
  box-shadow:
    6px 0 rgba(241, 227, 216, 0.42),
    12px 0 rgba(241, 227, 216, 0.26);
  animation: mascot-run-dust 640ms steps(4, end) infinite;
}

.desktop-frame:not(.is-hover-suppressed):hover .anchor-mascot-button.is-editing .anchor-mascot,
.desktop-frame:not(.is-hover-suppressed):focus-within .anchor-mascot-button.is-editing .anchor-mascot,
.island-demo:not(.is-hover-suppressed):hover .anchor-mascot-button.is-editing .anchor-mascot,
.island-demo:not(.is-hover-suppressed):focus-within .anchor-mascot-button.is-editing .anchor-mascot {
  animation: mascot-edit-bob 1280ms steps(8, end) infinite;
}

.desktop-frame:not(.is-hover-suppressed):hover .anchor-mascot-button.is-editing::after,
.desktop-frame:not(.is-hover-suppressed):focus-within .anchor-mascot-button.is-editing::after,
.island-demo:not(.is-hover-suppressed):hover .anchor-mascot-button.is-editing::after,
.island-demo:not(.is-hover-suppressed):focus-within .anchor-mascot-button.is-editing::after {
  opacity: 1;
  box-shadow:
    2px 0 #c6ccd1,
    0 2px #8b5a2f,
    0 4px #8b5a2f;
  animation: mascot-edit-hammer 1280ms steps(8, end) infinite;
}

.desktop-frame:not(.is-hover-suppressed):hover .anchor-mascot-button.is-throwing-money .anchor-mascot,
.desktop-frame:not(.is-hover-suppressed):focus-within .anchor-mascot-button.is-throwing-money .anchor-mascot,
.island-demo:not(.is-hover-suppressed):hover .anchor-mascot-button.is-throwing-money .anchor-mascot,
.island-demo:not(.is-hover-suppressed):focus-within .anchor-mascot-button.is-throwing-money .anchor-mascot {
  animation: mascot-money-bob 5800ms linear infinite;
}

.desktop-frame:not(.is-hover-suppressed):hover .anchor-mascot-button.is-throwing-money::before,
.desktop-frame:not(.is-hover-suppressed):focus-within .anchor-mascot-button.is-throwing-money::before,
.island-demo:not(.is-hover-suppressed):hover .anchor-mascot-button.is-throwing-money::before,
.island-demo:not(.is-hover-suppressed):focus-within .anchor-mascot-button.is-throwing-money::before {
  opacity: 0.92;
  box-shadow:
    -8px -5px 0 -1px #9af7ad,
    -15px 1px 0 -1px #6fd889;
  animation: mascot-bills-left 5800ms linear infinite;
}

.desktop-frame:not(.is-hover-suppressed):hover .anchor-mascot-button.is-throwing-money::after,
.desktop-frame:not(.is-hover-suppressed):focus-within .anchor-mascot-button.is-throwing-money::after,
.island-demo:not(.is-hover-suppressed):hover .anchor-mascot-button.is-throwing-money::after,
.island-demo:not(.is-hover-suppressed):focus-within .anchor-mascot-button.is-throwing-money::after {
  opacity: 0.92;
  box-shadow:
    8px -5px 0 -1px #9af7ad,
    15px 1px 0 -1px #6fd889;
  animation: mascot-bills-right 5800ms linear infinite;
}

html:not(.js):has(#create:target) .anchor-mascot-button .anchor-mascot {
  animation: mascot-create-bob 1800ms steps(6, end) infinite;
}

html:not(.js):has(#create:target) .anchor-mascot-button::after {
  left: 73%;
  top: 8%;
  width: 2px;
  height: 2px;
  opacity: 0.86;
  background: var(--success);
  box-shadow:
    0 4px var(--success),
    -4px 4px rgba(117, 240, 158, 0.62),
    -8px 7px rgba(117, 240, 158, 0.42);
  animation: mascot-create-branch 1800ms steps(6, end) infinite;
}

html:not(.js):has(#run:target) .anchor-mascot-button .anchor-mascot {
  animation: mascot-run-stride 640ms steps(4, end) infinite;
}

html:not(.js):has(#run:target) .anchor-mascot-button::after {
  left: 6%;
  top: 70%;
  width: 3px;
  height: 1px;
  opacity: 0.78;
  background: rgba(241, 227, 216, 0.58);
  box-shadow:
    6px 0 rgba(241, 227, 216, 0.42),
    12px 0 rgba(241, 227, 216, 0.26);
  animation: mascot-run-dust 640ms steps(4, end) infinite;
}

html:not(.js):has(#merge:target) .anchor-mascot-button .anchor-mascot {
  animation: mascot-edit-bob 1280ms steps(8, end) infinite;
}

html:not(.js):has(#merge:target) .anchor-mascot-button::after {
  right: 15%;
  top: 6%;
  opacity: 1;
  background: #c6ccd1;
  box-shadow:
    2px 0 #c6ccd1,
    0 2px #8b5a2f,
    0 4px #8b5a2f;
  transform-origin: 1px 10px;
  animation: mascot-edit-hammer 1280ms steps(8, end) infinite;
}

html:not(.js):has(#buy:target) .anchor-mascot-button .anchor-mascot {
  animation: mascot-money-bob 5800ms linear infinite;
}

html:not(.js):has(#buy:target) .anchor-mascot-button::before {
  left: 49%;
  top: 45%;
  width: 7px;
  height: 4px;
  border-radius: 1px;
  opacity: 0.92;
  background: linear-gradient(90deg, #58b86f 0 2px, #b8ffd0 2px 5px, #58b86f 5px);
  filter: none;
  box-shadow:
    -8px -5px 0 -1px #9af7ad,
    -15px 1px 0 -1px #6fd889;
  animation: mascot-bills-left 5800ms linear infinite;
}

html:not(.js):has(#buy:target) .anchor-mascot-button::after {
  left: 53%;
  right: auto;
  top: 45%;
  width: 7px;
  height: 4px;
  border-radius: 1px;
  opacity: 0.92;
  background: linear-gradient(90deg, #58b86f 0 2px, #b8ffd0 2px 5px, #58b86f 5px);
  box-shadow:
    8px -5px 0 -1px #9af7ad,
    15px 1px 0 -1px #6fd889;
  animation: mascot-bills-right 5800ms linear infinite;
}

.anchor-mascot-button.is-rainbow::before {
  inset: 8% 7%;
  border-radius: 999px;
  opacity: 0.82;
  background:
    conic-gradient(
      from 0deg,
      rgba(255, 89, 89, 0.88),
      rgba(255, 193, 77, 0.88),
      rgba(116, 240, 158, 0.88),
      rgba(95, 179, 255, 0.88),
      rgba(183, 116, 255, 0.88),
      rgba(255, 89, 89, 0.88)
    );
  filter: blur(3px);
  transform: scale(1);
  animation: mascot-rainbow-spin 900ms linear infinite;
}

.anchor-mascot-button.is-rainbow::after {
  opacity: 0;
  animation: none;
}

.anchor-mascot-button.is-rainbow .anchor-mascot {
  animation: mascot-rainbow-bounce 420ms ease-in-out infinite alternate;
  filter: saturate(1.75) hue-rotate(0deg) brightness(1.08);
}

@keyframes mascot-rainbow-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes mascot-thinking-bob {
  0%,
  24.99% {
    transform: translateY(0);
  }

  25%,
  49.99% {
    transform: translateY(-1px);
  }

  50%,
  100% {
    transform: translateY(0);
  }
}

@keyframes mascot-create-bob {
  0%,
  33.32% {
    transform: translateY(0);
  }

  33.33%,
  66.65% {
    transform: translateY(-1px) rotate(-1deg);
  }

  66.66%,
  100% {
    transform: translateY(0) rotate(1deg);
  }
}

@keyframes mascot-create-branch {
  0%,
  16.65% {
    opacity: 0;
    transform: translate(1px, 2px);
  }

  16.66%,
  49.99% {
    opacity: 0.72;
    transform: translate(0, 0);
  }

  50%,
  83.32% {
    opacity: 0.92;
    transform: translate(-1px, -1px);
  }

  83.33%,
  100% {
    opacity: 0.38;
    transform: translate(0, 0);
  }
}

@keyframes mascot-run-stride {
  0%,
  24.99% {
    transform: translate(0, 0) rotate(-4deg) scaleX(1.04);
  }

  25%,
  49.99% {
    transform: translate(2px, -1px) rotate(3deg) scaleX(0.98);
  }

  50%,
  74.99% {
    transform: translate(0, 1px) rotate(4deg) scaleX(1.04);
  }

  75%,
  100% {
    transform: translate(-1px, -1px) rotate(-2deg) scaleX(1);
  }
}

@keyframes mascot-run-dust {
  0%,
  24.99% {
    opacity: 0.78;
    transform: translateX(0);
  }

  25%,
  49.99% {
    opacity: 0.38;
    transform: translateX(-3px);
  }

  50%,
  74.99% {
    opacity: 0.7;
    transform: translateX(-6px);
  }

  75%,
  100% {
    opacity: 0.3;
    transform: translateX(-9px);
  }
}

@keyframes mascot-money-bob {
  0%,
  2.17%,
  6.55%,
  15.52%,
  15.4%,
  19.78%,
  31.03%,
  100% {
    transform: translateY(0) rotate(0);
  }

  2.18%,
  4.36%,
  15.41%,
  17.59% {
    transform: translateY(-1px) rotate(-3deg);
  }

  4.37%,
  6.54%,
  17.6%,
  19.77% {
    transform: translateY(0) rotate(3deg);
  }
}

@keyframes mascot-bills-left {
  0%,
  15.53% {
    opacity: 0;
    transform: translate(0, 3px) rotate(8deg);
  }

  2.38%,
  18.31% {
    opacity: 1;
    transform: translate(-5px, -3px) rotate(-14deg);
  }

  7.41%,
  24.22% {
    opacity: 0.9;
    transform: translate(-16px, -8px) rotate(-38deg);
  }

  15.52%,
  31.03%,
  100% {
    opacity: 0;
    transform: translate(-26px, 4px) rotate(-74deg);
  }
}

@keyframes mascot-bills-right {
  0%,
  15.53% {
    opacity: 0;
    transform: translate(0, 3px) rotate(-8deg);
  }

  2.38%,
  18.31% {
    opacity: 1;
    transform: translate(5px, -3px) rotate(14deg);
  }

  7.41%,
  24.22% {
    opacity: 0.9;
    transform: translate(16px, -8px) rotate(38deg);
  }

  15.52%,
  31.03%,
  100% {
    opacity: 0;
    transform: translate(26px, 4px) rotate(74deg);
  }
}

@keyframes mascot-edit-bob {
  0%,
  24.99% {
    transform: translateY(-1px) rotate(-1deg);
  }

  25%,
  37.49% {
    transform: translateY(0) rotate(1deg);
  }

  37.5%,
  49.99% {
    transform: translateY(1px) rotate(0);
  }

  50%,
  74.99% {
    transform: translateY(0) rotate(0);
  }

  75%,
  87.49% {
    transform: translateY(-1px) rotate(1deg);
  }

  87.5%,
  100% {
    transform: translateY(0) rotate(0);
  }
}

@keyframes mascot-edit-hammer {
  0%,
  24.99% {
    opacity: 1;
    transform: rotate(-38deg) translateY(-1px);
  }

  25%,
  37.49% {
    opacity: 1;
    transform: rotate(-8deg);
  }

  37.5%,
  62.49% {
    opacity: 1;
    transform: rotate(22deg) translateY(1px);
  }

  62.5%,
  100% {
    opacity: 0.75;
    transform: rotate(-18deg);
  }
}

@keyframes mascot-rainbow-bounce {
  0% {
    transform: translateY(0) scale(1);
    filter: saturate(1.75) hue-rotate(0deg) brightness(1.08);
  }

  100% {
    transform: translateY(-1px) scale(1.05);
    filter: saturate(1.9) hue-rotate(140deg) brightness(1.14);
  }
}