.tecla-2d-stage{position:relative;isolation:isolate;display:grid;place-items:center;min-height:420px;overflow:hidden;border-radius:24px;background:radial-gradient(circle at 50% 34%,rgba(86,230,166,.18),transparent 33%),linear-gradient(165deg,#12342b,#071310 72%)}
.tecla-2d-halo{position:absolute;width:min(72%,430px);aspect-ratio:1;border:1px solid rgba(86,230,166,.34);border-radius:50%;box-shadow:0 0 75px rgba(86,230,166,.13);animation:teclaHalo 5s ease-in-out infinite}
.tecla-2d-shadow{position:absolute;bottom:7%;width:42%;height:5%;border-radius:50%;background:rgba(0,0,0,.42);filter:blur(11px);animation:teclaShadow 7.2s ease-in-out infinite}
.tecla-2d-rig{position:relative;z-index:2;width:min(68%,360px);aspect-ratio:941/1672;transform-origin:50% 82%;animation:teclaIdle 7.2s ease-in-out infinite;transition:transform .35s ease}
.tecla-2d-rig img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 25px 28px rgba(0,0,0,.3));transition:opacity .16s ease,filter .16s ease;user-select:none;pointer-events:none}
.tecla-2d-rig.pose-changing img{opacity:.2;filter:blur(1px) drop-shadow(0 18px 22px rgba(0,0,0,.22))}
.tecla-2d-eyelid{position:absolute;z-index:4;top:10.55%;width:7.2%;height:.82%;border-radius:55%;background:#c98867;box-shadow:0 -1px 1px rgba(72,35,26,.4);opacity:0;transform:scaleY(.08);animation:teclaBlink 6.4s infinite;pointer-events:none}
.tecla-2d-eyelid-left{left:44.3%;rotate:4deg}.tecla-2d-eyelid-right{left:53.2%;rotate:-4deg}
.tecla-2d-mouth{position:absolute;z-index:5;top:14.3%;left:48.8%;width:7.4%;height:.55%;border-radius:50%;background:rgba(113,35,32,.7);opacity:0;transform:scaleY(.2);pointer-events:none}
.tecla-2d-stage[data-state=speaking] .tecla-2d-rig{animation:teclaSpeaking 2.4s ease-in-out infinite}
.tecla-2d-stage[data-state=speaking] .tecla-2d-mouth{opacity:.62;animation:teclaMouth .22s ease-in-out infinite alternate}
.tecla-2d-stage[data-state=listening] .tecla-2d-rig{animation:teclaListening 2.2s ease-in-out infinite}
.tecla-2d-stage[data-state=listening] .tecla-2d-halo{animation:teclaListeningHalo 1.2s ease-out infinite}
.tecla-2d-state{position:absolute;left:16px;bottom:15px;z-index:5;display:flex;align-items:center;gap:8px;border:1px solid rgba(86,230,166,.3);border-radius:99px;background:rgba(7,19,16,.84);padding:8px 12px;color:#d8ffea;font-size:10px;letter-spacing:.1em}
.tecla-2d-state i{width:8px;height:8px;border-radius:50%;background:#56e6a6;box-shadow:0 0 12px #56e6a6}
.tecla-2d-stage[data-state=speaking] .tecla-2d-state i{animation:teclaDot .75s ease-in-out infinite}
@keyframes teclaIdle{0%,100%{transform:perspective(1100px) rotateY(-.3deg) translateY(0) rotate(-.15deg) scale(1)}50%{transform:perspective(1100px) rotateY(.35deg) translateY(-7px) rotate(.25deg) scale(1.006)}}
@keyframes teclaSpeaking{0%,100%{transform:translateY(0) rotate(-.1deg)}50%{transform:translateY(-5px) rotate(.35deg)}}
@keyframes teclaListening{0%,100%{transform:perspective(1100px) rotateY(-1.2deg) rotateZ(-.2deg)}50%{transform:perspective(1100px) rotateY(1deg) rotateZ(.35deg) translateY(-3px)}}
@keyframes teclaBlink{0%,43%,47%,49%,100%{opacity:0;transform:scaleY(.08)}44%,46%,48%{opacity:.92;transform:scaleY(1)}}
@keyframes teclaMouth{from{transform:scaleX(.82) scaleY(.35)}to{transform:scaleX(1.08) scaleY(1.8)}}
@keyframes teclaHalo{0%,100%{transform:scale(.98);opacity:.72}50%{transform:scale(1.03);opacity:.98}}
@keyframes teclaListeningHalo{from{transform:scale(.92);opacity:.8}to{transform:scale(1.14);opacity:.12}}
@keyframes teclaShadow{0%,100%{transform:scaleX(1);opacity:.7}50%{transform:scaleX(.94);opacity:.56}}
@keyframes teclaDot{50%{box-shadow:0 0 0 8px rgba(86,230,166,0)}}
@media(max-width:720px){.tecla-2d-stage{min-height:360px}.tecla-2d-rig{width:min(72%,300px)}}
@media(prefers-reduced-motion:reduce){.tecla-2d-stage *{animation-duration:.01ms!important;animation-iteration-count:1!important}}