.empty.with-mascot { padding:16px 10px 24px; }
.empty-mascot { width:192px;height:204px;max-width:100%;margin:0 auto 12px;display:grid;place-items:center; }
.empty-mascot > * { grid-area:1 / 1; }
.empty-mascot img { display:block;width:192px;height:192px;max-width:100%;object-fit:contain;transform-origin:50% 90%;animation:mascot-sway 6s ease-in-out infinite; }
.empty-mascot.ready { animation:mascot-arrive 360ms cubic-bezier(.22,1,.36,1); }
.empty-mascot.ready > svg { display:none; }
.empty-mascot > svg { width:62px;height:62px;color:var(--pink); }
.with-mascot h1 { font-size:28px;margin:10px 0 16px; }
.with-mascot .primary { min-height:44px;white-space:normal;overflow-wrap:anywhere; }
@keyframes mascot-sway {
  0%,100% { transform:translateY(0) rotate(-1deg) scale(1); }
  50% { transform:translateY(-5px) rotate(1deg) scale(1.015); }
}
@keyframes mascot-arrive {
  from { opacity:0;transform:translateY(10px) scale(.96); }
  to { opacity:1;transform:none; }
}
.motion-paused .empty-mascot,.motion-paused .empty-mascot img { animation-play-state:paused; }
@media(max-height:760px) {
  .empty.with-mascot { padding-top:10px; }
  .empty-mascot { width:144px;height:154px;margin-bottom:8px; }
  .empty-mascot img { width:144px;height:144px; }
  .with-mascot h1 { font-size:26px;margin:8px 0 12px; }
  .with-mascot p { margin:12px 0; }
}
@media(prefers-reduced-motion:reduce) {
  .empty-mascot.ready,.empty-mascot img { animation:none; }
}