.paopao { position: relative; display: block; cursor: pointer; transform-origin: center 80%; }
.paopao.welcome-art { position: absolute; }
.paopao:focus-visible { outline: 2px solid #246c68; outline-offset: 3px; border-radius: 6px; }
.paopao-body { position: absolute; display: block; inset: 0; transform-origin: center 80%; pointer-events: none; }
.paopao-body > img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; margin: 0; pointer-events: none; }
.paopao-body > .paopao-blink, .paopao-body > .paopao-light { opacity: 0; }
.lesson .paopao-body > img { transform: none; transition: none; }
.lesson > .paopao { position: absolute; width: 46%; height: 187px; right: 0; bottom: 0; }
.lesson:nth-child(2n) > .paopao { height: 145px; bottom: 10px; }
.live-hero > .paopao { width: 170px; height: 205px; flex-shrink: 0; }
.auth-layout > .paopao { width: 160px; height: 180px; margin: auto; }
.voice-companion > .paopao { flex: 0 0 84px; width: 84px; height: 140px; }
.paopao-success-art { position: absolute; width: 85px; height: 115px; left: -42px; top: -140px; object-fit: contain; pointer-events: none; }
@media(max-width:1200px) {
  .paopao.welcome-art { right: 0; }
}
@media(max-width:760px) {
  .lesson > .paopao { height: 179px; width: 44%; right: 0; }
  .live-hero > .paopao { width: 115px; height: 170px; }
}
@media(prefers-reduced-motion: reduce) {
  .paopao-body > .paopao-blink, .paopao-body > .paopao-light { display: none; }
}