@layer reset{*{margin:0;padding:0;box-sizing:border-box}button{border:none;background-color:transparent;cursor:pointer;font-family:inherit}a{text-decoration:none;color:inherit}}@layer variables{:root{--primary-color: #2f60e7;--secondary-color: #9d671b;--primary-color-bg: var(--primary-color);--secondary-color-bg: var(--secondary-color);--primary-color-text: #fff;--secondary-color-text: #fff;--lips-color: tomato;--tongue-color: #c553a7;--mouth-transition-duration: 50ms;--accent-color: #c553a7;--system-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif}@media (prefers-reduced-motion: no-preference){:root{--mouth-transition-duration: 50ms}}@media (max-width: 768px){:root{--mouth-transition-duration: 0}}}@layer animations{@keyframes scanlines{0%{background-position:0 30%}30%{background-position:0 10%;rotate:-3deg}to{background-position:0 40%}}@keyframes scanline{0%{background-position:0 0}20%{background-position:0 20%}40%{background-position:0 100%}40%{rotate:6deg;background-position:0 0}60%{rotate:-3deg;background-position:0 80%}70%{background-position:0 75%}80%{background-position:0 100%}to{background-position:0 100%}}@keyframes ping{0%{transform:scale(.5);opacity:1}80%{opacity:1}to{transform:scale(1);opacity:0}}@keyframes pulse{0%{filter:brightness(1) saturate(1)}50%{filter:brightness(1.1) saturate(0)}to{filter:brightness(1) saturate(1)}}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(1.2vh) rotate(-1deg)}to{transform:translateY(0)}}}html{font-family:"Germania One",var(--system-font);font-weight:400;height:100svh;color:#333;background-image:linear-gradient(to bottom,wheat 30%,#f3ae2d);filter:sepia(10%) saturate(90%)}body{position:relative;width:100%;height:100%}body:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:url(/texture.jpg);background-size:100% 100%;mix-blend-mode:darken;background-size:cover;opacity:1;user-select:none;z-index:-1}.header{font-size:1.5rem;font-weight:600;padding:4rem 2rem}.container{display:flex;align-items:center;justify-content:center}.container.row{flex-direction:row;gap:10px}.container.column{flex-direction:column;gap:10px}.shapes{justify-content:space-evenly!important;height:100dvh}.button{position:relative;padding:1rem;font-size:1.8rem;line-height:2rem;user-select:none;width:10rem;height:10rem;border-radius:100%;box-shadow:3px 4px 0 var(--shadow-buttons-color)}.button.primary{background-color:var(--primary-color-bg);color:var(--primary-color-text);--shadow-buttons-color: #2044a9}.button.secondary{background-color:var(--secondary-color-bg);color:var(--secondary-color-text);--shadow-buttons-color: #795316}.button.ghost{background-color:transparent;color:var(--primary-color-text);--shadow-buttons-color: transparent}.button:hover{filter:brightness(1.1);box-shadow:4px 5px 0 var(--shadow-buttons-color);transform:translateY(-1px) rotate(1deg)}.button:active{filter:brightness(.9);box-shadow:inset 3px 4px 0 var(--shadow-buttons-color);transform:translate(1px,1px) rotate(-1deg)}.button:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px;box-shadow:3px 4px 0 var(--shadow-buttons-color),0 0 0 2px #fff}.button:disabled{opacity:.9;cursor:wait;animation:pulse 1s linear infinite}.button:after{content:"";position:absolute;background-image:url(/wood.webp);z-index:10;width:100%;height:100%;top:0;right:0;bottom:0;left:0;background-size:cover;border-radius:100%;mix-blend-mode:difference;filter:contrast(4) saturate(0);opacity:.8}.recording:before{content:"";position:absolute;top:-.5rem;left:-.5rem;width:2rem;height:2rem;background-color:var(--lips-color);z-index:10;border-radius:100%;animation:ping 1s linear infinite}#errorMessage{display:none;position:absolute;top:0;left:0;z-index:10;font-size:1rem;color:var(--primary-color-text);font-family:var(--system-font);background-color:brown;width:100%;text-align:center;font-style:italic;padding:1rem 2rem 1rem .5rem}#closeErrorMessage{display:none;position:absolute;top:0;right:0;font-size:1rem;padding:1rem;z-index:11;mix-blend-mode:difference}#playButton{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:200}#langSelector{position:absolute;bottom:1rem;right:1rem;font-size:1rem;padding:.5rem}#audio{display:none}#avatar{position:relative;width:20rem;height:20rem;background-color:#2f2f2f;border-radius:1rem;display:flex;align-items:center;justify-content:center;transform:perspective(1000px) rotateX(0) rotateY(0) translateZ(0);filter:saturate(1.5);margin-bottom:-5rem;overflow:hidden;-webkit-mask-image:-webkit-radial-gradient(circle,white 100%,black 100%);animation:float 6s ease-in-out infinite}#avatar:before{content:"";position:absolute;width:150%;height:200%;left:-25%;top:-25%;background-image:linear-gradient(rgb(0,0,0,.3) 50%,transparent 50%);background-size:100% 5px;filter:blur(1px);rotate:3deg;opacity:.3;mix-blend-mode:soft-light;filter:contrast(1.5) saturate(0);animation:scanlines 10s linear infinite;z-index:200;user-select:none;border-radius:1rem;overflow:hidden}#avatar:after{content:"";position:absolute;width:150%;height:150%;left:-25%;top:-25%;background:linear-gradient(to bottom,rgba(255,255,255,.2),rgba(255,255,255,.4),rgba(255,255,255,.2));background-size:100% 80px;background-repeat:no-repeat;rotate:-3deg;z-index:11;opacity:.1;filter:blur(10px);user-select:none;border-radius:1rem;overflow:hidden}#pttButton.idle.lang_en{font-size:3rem;padding-top:1.6rem}#pttButton.idle.lang_es{font-size:2rem;line-height:1.4rem;padding-top:1.5rem}.effect{position:absolute;top:calc(0% - 2.5rem);left:calc(0% - 2.5rem);width:calc(100% + 5rem);height:calc(100% + 5rem);transform:scaleY(1.14);opacity:.9;mix-blend-mode:lighten;z-index:20;border-radius:10rem;user-select:none}.mouth{position:relative;overflow:hidden;width:15rem;height:10rem;border-left-width:2rem;border-right-width:2rem;border-color:var(--lips-color);border-style:solid;border-radius:3rem;background-color:#533;transition:height var(--mouth-transition-duration) ease-in-out;animation:float 4s ease-in-out infinite}.mouth .upper_lips{position:absolute;width:calc(100% + 8rem);height:5rem;background-color:var(--lips-color);top:-2rem;left:-4rem;transition:var(--mouth-transition-duration) linear}.mouth .upper_lips:after{content:"";position:absolute;width:3rem;height:.8rem;transform:rotate(3deg);border-radius:100% 0 0;border-top:2px solid white;bottom:2rem;left:3rem;z-index:2;transition:var(--mouth-transition-duration) ease-in-out}.mouth .upper_lips:before{content:"";position:absolute;width:100%;height:3.5rem;bottom:12rem;-webkit-mask-image:radial-gradient(ellipse at center bottom,transparent 60%,black 60%);mask-image:radial-gradient(ellipse at center bottom,transparent 60%,black 60%);-webkit-mask-size:50% 25%;mask-size:50% 25%;-webkit-mask-position:center bottom;mask-position:center bottom;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:var(--lips-color);transition:var(--mouth-transition-duration) ease-in-out}.mouth .teeth{display:flex;align-items:center;justify-content:center;position:absolute;width:calc(100% + 8rem);height:2.5rem;top:1rem;left:-4rem;transition:var(--mouth-transition-duration) linear}.mouth .teeth:before{content:"";position:absolute;width:100%;height:50%;top:0;background-color:#db517a}.mouth .teeth .tooth{position:relative;top:0;height:2rem;width:2rem;margin-right:1px;background-color:#fff;border-radius:.7rem}.mouth .teeth .tooth:nth-child(3){height:calc(2rem + 5px);width:calc(2rem + 3px);clip-path:polygon(0% 0%,100% 0%,100% 85%,70% 100%,0% 100%)}.mouth .teeth .tooth:nth-child(4){height:calc(2rem + 5px);width:calc(2rem + 3px)}.mouth .teeth .tooth:nth-child(6){clip-path:polygon(0% 0%,100% 0%,100% 85%,60% 100%,0% 100%)}.mouth .lower_lips{position:absolute;width:calc(100% + 8rem);height:5rem;background-color:var(--lips-color);bottom:-2rem;left:-4rem;border-top:.2rem solid rgba(0,0,0,.2);transition:var(--mouth-transition-duration) linear}.mouth .tongue{position:absolute;width:7rem;height:1.5rem;background-color:var(--tongue-color);border-radius:.1rem .1rem 2.5rem 2.5rem;bottom:2rem;left:calc(50% - 3.5rem);z-index:0;opacity:.6;border-top:.4rem solid rgba(0,0,0,.2);transition:var(--mouth-transition-duration) linear}.mouth.cue_A{transition:var(--mouth-transition-duration) ease-in-out;height:5rem}.mouth.cue_A .lower_lips{bottom:-2.5rem;transform:rotate(-2deg)}.mouth.cue_A .upper_lips{top:-2rem;transform:rotate(2deg)}.mouth.cue_A .upper_lips:after{transition:var(--mouth-transition-duration) ease-in-out;width:4.5rem;left:3.5rem}.mouth.cue_B{transition:var(--mouth-transition-duration) ease-in-out;height:7rem}.mouth.cue_B .lower_lips{transform:rotate(1deg)}.mouth.cue_B .tongue{bottom:1rem}.mouth.cue_C{transition:var(--mouth-transition-duration) ease-in-out;height:9rem;width:13rem}.mouth.cue_D{transition:var(--mouth-transition-duration) ease-in-out;height:10rem;width:12rem}.mouth.cue_D .tongue{bottom:2.1rem;height:1.5rem;width:8rem;left:calc(50% - 4rem)}.mouth.cue_E{transition:var(--mouth-transition-duration) ease-in-out;height:8rem;width:10rem}.mouth.cue_E .upper_lips{top:-3rem}.mouth.cue_E .upper_lips:before{bottom:-1rem;z-index:2;-webkit-mask-size:50% 35%;mask-size:50% 35%;transition:var(--mouth-transition-duration) ease-in-out}.mouth.cue_E .tongue{bottom:1.5rem}.mouth.cue_F{transition:var(--mouth-transition-duration) ease-in-out;height:8rem;width:8rem}.mouth.cue_F .upper_lips{top:-3rem}.mouth.cue_F .upper_lips:before{bottom:-1.8rem;z-index:2;height:5rem;-webkit-mask-size:50% 40%;mask-size:50% 40%;transition:var(--mouth-transition-duration) ease-in-out}.mouth.cue_G{transition:var(--mouth-transition-duration) ease-in-out;height:4rem}.mouth.cue_G .teeth{top:1.4rem;height:1rem;border-bottom:.2rem solid rgba(0,0,0,.2);transform:rotate(2sdeg);border-radius:4rem}.mouth.cue_G .lower_lips{border-top:.2rem solid rgba(0,0,0,0)}.mouth.cue_H{transition:var(--mouth-transition-duration) ease-in-out;height:9rem}.mouth.cue_H .tongue{position:absolute;width:7rem;height:3rem;background-color:#c553a7;border-radius:2.5rem 2.5rem .1rem .1rem;bottom:3rem;left:calc(50% - 2.5rem);z-index:0;border-top:.2rem solid rgba(0,0,0,.1);opacity:1;transition:var(--mouth-transition-duration) ease-in-out}.mouth.cue_X{transition:var(--mouth-transition-duration) ease-in-out;height:6rem}.mouth.cue_X .upper_lips:after{transition:var(--mouth-transition-duration) ease-in-out;width:4rem;height:1rem;left:4rem;bottom:1.9rem;transform:rotate(7deg)}#toastContainer{position:fixed;top:1rem;right:1rem;z-index:1000;display:flex;flex-direction:column;align-items:flex-end;pointer-events:none}#toastContainer .toast{pointer-events:auto}@media (max-width: 768px){#toastContainer{top:.5rem;right:.5rem;left:.5rem;align-items:stretch}#toastContainer .toast{max-width:none;margin-bottom:.25rem}}