:root { --character: #86b4ce; --face: #293c49; }
:root[data-theme="dark"] { --character: #b0a4d9; --face: #302d47; }
.mascot-stage { display: grid; place-items: center; min-height: 330px; margin-top: 26px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.lab-mascot { width: 216px; height: 216px; }
.lab-mascot svg { width: 100%; display: block; overflow: visible; }
.character { transform-origin: 80px 116px; }
.body { fill: var(--character); transition: fill 400ms; }
.face { transform-origin: 80px 80px; }
.lab-mascot[data-mood="idle"] .face { animation: look-around 7s ease-in-out infinite; }
.lab-mascot[data-mood="thinking"] .character { animation: ponder 3s ease-in-out infinite; }
.lab-mascot[data-mood="happy"] .character { animation: happy-bob 600ms cubic-bezier(.22,1,.36,1) both; }
.lab-mascot[data-mood="proud"] .character { transform: rotate(-3deg); }
.lab-mascot[data-mood="sleepy"] .character { animation: breathe 4s ease-in-out infinite; }
.lab-mascot[data-reaction] .character, .lab-mascot[data-reaction] .face { animation: none; transform: none; }
.lab-mascot[data-reaction="notice"] .character, .lab-mascot[data-reaction="surprised"] .character { animation: perk-up 600ms ease-out both; }
.lab-mascot[data-reaction="wink"] .character { animation: wink-tilt 900ms ease-in-out both; }
.lab-mascot[data-reaction="consider"] .character { animation: consider-tilt 950ms ease-in-out both; }
.lab-mascot[data-reaction="approve"] .character { animation: nod 900ms ease-in-out both; }
@keyframes look-around { 0%,15%,100% { transform: translateX(0); } 30%,44% { transform: translateX(3px); } 66%,80% { transform: translateX(-3px); } }
@keyframes ponder { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(2deg); } }
@keyframes happy-bob { 0% { transform: translateY(0); } 40% { transform: translateY(-5px); } 100% { transform: translateY(0); } }
@keyframes breathe { 0%,100% { transform: translateY(2px) scaleY(.99); } 50% { transform: translateY(0) scaleY(1); } }
@keyframes perk-up { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-4px); } }
@keyframes wink-tilt { 0%,100% { transform: rotate(0); } 35%,65% { transform: rotate(-5deg); } }
@keyframes consider-tilt { 0%,100% { transform: rotate(0); } 35%,70% { transform: rotate(5deg); } }
@keyframes nod { 0%,100% { transform: translateY(0); } 30%,70% { transform: translateY(3px); } 50% { transform: translateY(-1px); } }
.lab-mascot[data-still] * { animation: none !important; transition: none !important; }
:root[data-preview] .mascot-stage { height: 400px; margin: 0; border: 0; border-radius: 0; background: var(--bg); }
:root[data-preview] .lab-mascot { width: 228px; height: 228px; }
.face path { fill: none; stroke: var(--face); stroke-linecap: round; stroke-linejoin: round; }
.face .eye { stroke-width: 10; }