.mascot { width: 150px; aspect-ratio: 200 / 212; margin: 0 auto; }
.mascot.big { width: 170px; }
.mascot.small { width: 92px; }
.m-svg { width: 100%; height: 100%; overflow: visible; display: block; }
.m-svg * { transform-box: view-box; }
.m-shadow { fill: rgba(0, 0, 0, .1); transform-origin: 100px 204px; animation: shadow 2.6s ease-in-out infinite; }
.m-bob { transform-origin: 100px 192px; animation: bob 2.6s ease-in-out infinite; }
.m-eye-open { transform-origin: 100px 106px; animation: blink 4.6s infinite; }
.m-pupils { transition: transform .3s; }
.m-arm-l { transform-origin: 38px 120px; }
.m-arm-r { transform-origin: 162px 120px; animation: wave-soft 5s ease-in-out infinite; }
.m-star { transform-origin: 110px 14px; animation: twinkle 3s ease-in-out infinite; }
.m-eye-happy, .m-grin, .m-oh, .m-sad, .m-sweat, .m-acc { display: none; }
.mascot[data-acc="none"] .m-antenna, .mascot[data-acc="daily"] .m-antenna { display: inline; }
.m-antenna { display: none; }
.mascot[data-acc="exam"] .m-acc-exam,
.mascot[data-acc="translate"] .m-acc-translate,
.mascot[data-acc="creature"] .m-acc-creature,
.mascot[data-acc="music"] .m-acc-music,
.mascot[data-acc="daily"] .m-acc-daily,
.mascot[data-acc="ask"] .m-acc-ask { display: inline; }
.mascot[data-acc="ask"] .m-antenna { display: inline; }
.m-acc-creature { transform-origin: 100px 46px; animation: sway 3s ease-in-out infinite; }

/* 表情 */
.mascot.happy .m-eye-open, .mascot.listening .m-eye-open { display: none; }
.mascot.happy .m-eye-happy, .mascot.listening .m-eye-happy { display: inline; }
.mascot.happy .m-smile { display: none; }
.mascot.happy .m-grin { display: inline; }
.mascot.happy .m-jump { transform-origin: 100px 200px; animation: hop .7s cubic-bezier(.3, 1.4, .5, 1) 2; }
.mascot.happy .m-arm-l { animation: arm-up-l .7s ease-in-out 2; }
.mascot.happy .m-arm-r { animation: arm-up-r .7s ease-in-out 2; }
.mascot.thinking .m-smile { display: none; }
.mascot.thinking .m-oh { display: inline; }
.mascot.thinking .m-pupils { transform: translate(5px, -7px); }
.mascot.thinking .m-sweat { display: inline; animation: sweat 1.6s ease-in infinite; }
.mascot.thinking .m-bob { animation: think 1.8s ease-in-out infinite; }
.mascot.thinking .m-arm-r { animation: none; transform: rotate(-35deg); }
.mascot.sad .m-smile { display: none; }
.mascot.sad .m-sad { display: inline; }
.mascot.sad .m-pupils { transform: translateY(5px); }
.mascot.sad .m-bob { animation: sad 3s ease-in-out infinite; }
.mascot.listening .m-bob { animation: groove .5s ease-in-out infinite alternate; }
.mascot.waving .m-arm-r { animation: wave 1.2s ease-in-out infinite; }
.mascot.jump .m-jump { transform-origin: 100px 200px; animation: hop .55s cubic-bezier(.3, 1.4, .5, 1); }

@keyframes bob { 0%, 100% { transform: translateY(0) scale(1.03, .97); } 50% { transform: translateY(-7px) scale(.98, 1.02); } }
@keyframes shadow { 0%, 100% { transform: scale(1); } 50% { transform: scale(.85); opacity: .7; } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
@keyframes wave-soft { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-30deg); } 82% { transform: rotate(-5deg); } 88% { transform: rotate(-30deg); } }
@keyframes wave { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(-55deg); } }
@keyframes twinkle { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(20deg) scale(1.2); } }
@keyframes sway { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes hop { 0%, 100% { transform: translateY(0) scale(1); } 20% { transform: translateY(4px) scale(1.12, .88); } 50% { transform: translateY(-34px) scale(.94, 1.08); } 80% { transform: translateY(2px) scale(1.06, .94); } }
@keyframes arm-up-l { 50% { transform: rotate(50deg); } }
@keyframes arm-up-r { 50% { transform: rotate(-50deg); } }
@keyframes think { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg) translateY(-3px); } }
@keyframes sad { 0%, 100% { transform: translateY(2px) scale(1.02, .98); } 50% { transform: translateY(0) scale(1); } }
@keyframes groove { from { transform: rotate(-6deg) translateY(0); } to { transform: rotate(6deg) translateY(-6px); } }
@keyframes sweat { 0% { transform: translateY(-4px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }
.mascot { position: relative; }
.m-eye-sleep { display: none; }
.mascot:not(.thinking):not(.sad) .m-pupils { transform: translate(var(--px, 0px), var(--py, 0px)); }
.mascot .m-svg { transition: transform .2s; }
.pk-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.pk-hi { stop-color: color-mix(in srgb, var(--mc) 38%, #fff); }
.pk-mid { stop-color: var(--mc); }
.pk-lo { stop-color: var(--mc-dark); }
.pk-deep { stop-color: color-mix(in srgb, var(--mc-dark) 70%, #000); }