/* v3: true alpha; preserve the supplied colors, proportions and breathing room. */
.mascot { object-fit: contain; flex-shrink: 0; mix-blend-mode: normal !important; border-radius: 0 !important; }
.mascot-xs { width: 32px; height: 32px; }
.mascot-sm { width: 64px; height: 64px; }
.mascot-md { width: 160px; }
.mascot-lg { width: 180px; }
.mascot-full { height: auto; padding: 24px; box-sizing: content-box; }
.hero-card > .mascot { width: clamp(160px, 23vw, 240px); margin: 0; padding: 24px; align-self: center; }
.hero-copy { flex: 1; min-width: 0; }
.balance-hero .mascot { margin: 0; padding: 16px; }
.empty-inline .mascot,.auth-visual .mascot { margin: 0; padding: 16px; }
.mascot-tip .mascot { width: 64px; height: 64px; margin: 8px; }
.mascot-grid .mascot { margin: 8px auto; }
.mascot-grid figure { width: 112px; }
.mascot-grid-full figure { width: 228px; }
@media (max-width: 520px) {
  .hero-card { flex-wrap: wrap; gap: 12px; }
  .hero-copy { flex-basis: 100%; width: 100%; }
  .hero-card > .mascot { width: 180px; margin: 0 auto; }
  .balance-hero { flex-wrap: wrap; }
  .balance-hero .mascot { width: 160px; margin: 0 auto; }
  .empty-inline { flex-wrap: wrap; justify-content: center; }
  .auth-visual .mascot { width: 180px; margin: 0; }
}