body{

margin:0;

background:#0B0F19;

color:white;

font-family:Arial,sans-serif;

display:flex;

justify-content:center;

align-items:center;

height:100vh;

}

.container{

width:80%;

text-align:center;

}

.emoji{

font-size:100px;

margin-bottom:20px;

}

h1{

color:#FFD54A;

font-size:60px;

margin:0;

}

.title{

font-size:28px;

color:#cccccc;

margin-top:10px;

}

.state{

margin-top:40px;

font-size:30px;

font-weight:bold;

color:#FFD54A;

}

.divider{

width:180px;

height:2px;

background:#FFD54A;

margin:35px auto;

}

.subtitle{

font-size:30px;

line-height:1.6;

min-height:180px;

}

.footer{

margin-top:40px;

color:#888;

font-size:20px;

}

.face{

    display:flex;

    justify-content:center;

    align-items:center;

    margin:40px auto;

}

.face.ready .ring-rotator{

    animation:spin 8s linear infinite;

}

.face.ready .ring-glow{

    animation:glow 4s ease-in-out infinite;

}

.face.listening .ring-rotator{

    animation:spin 2.5s linear infinite;

}

.face.listening .ring-glow{

    animation:glow .8s ease-in-out infinite;

}

.face.thinking .ring-rotator{

    animation:spin .8s linear infinite;

}

.face.thinking .ring-glow{

    animation:glow .4s ease-in-out infinite;

}

.face.speaking .ring-rotator{

    animation:spin 1.5s linear infinite;

}

.face.speaking .mouth{

    animation:talk .35s infinite alternate;

}

.face-ring{

    width:240px;
    height:240px;

    border:4px solid #FFD54A;
    border-radius:50%;

    display:flex;

    justify-content:center;
    align-items:center;
    flex-direction:column;

    position:relative;

    overflow:visible;

    animation:breathe 4s ease-in-out infinite;
}

.ring-glow{

    position:absolute;

    inset:-4px;

    border-radius:50%;

    box-shadow:

        0 0 25px rgba(255,213,74,.25),

        0 0 60px rgba(255,213,74,.15);

    animation:glow 3s ease-in-out infinite;

}

.ring-rotator{

    position:absolute;

    width:100%;
    height:100%;

    animation:spin 4s linear infinite;

}

.ring-beam{

    position:absolute;

    top:-5px;
    left:50%;

    transform:translateX(-50%);

    width:12px;
    height:12px;

    border-radius:50%;

    background:#33A8FF;

    box-shadow:

        0 0 12px #33A8FF,

        0 0 30px #33A8FF,

        0 0 60px #33A8FF;

}

.eyes{

    display:flex;

    gap:70px;

    margin-bottom:40px;

}

.eye{

    width:22px;
    height:22px;

    background:#FFD54A;

    border-radius:50%;

    box-shadow:
        0 0 8px rgba(255,213,74,.8);

}

.mouth{

    width:65px;
    height:8px;

    background:#FFD54A;

    border-radius:999px;

    box-shadow:
        0 0 8px rgba(255,213,74,.8);

}

@keyframes breathe{

0%{
transform:scale(1);
}

50%{
transform:scale(1.03);
}

100%{
transform:scale(1);
}

}

@keyframes blink{

0%,92%,100%{
transform:scaleY(1);
}

95%{
transform:scaleY(.08);
}

}

@keyframes glow{

    0%{

        box-shadow:
            0 0 8px rgba(255,213,74,.20),
            0 0 18px rgba(255,213,74,.15),
            inset 0 0 8px rgba(255,213,74,.15);

    }

    50%{

        box-shadow:
            0 0 18px rgba(255,213,74,.45),
            0 0 40px rgba(255,213,74,.30),
            inset 0 0 15px rgba(255,213,74,.25);

    }

    100%{

        box-shadow:
            0 0 8px rgba(255,213,74,.20),
            0 0 18px rgba(255,213,74,.15),
            inset 0 0 8px rgba(255,213,74,.15);

    }

}

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes talk{

0%{

height:8px;

width:60px;

}

100%{

height:28px;

width:34px;

}

}