* { margin: 0; box-sizing: border-box; }
body { background: #fdf6e3; height: 100vh; overflow: hidden;
       display: flex; align-items: center; justify-content: center; }
.screen { display: flex; gap: 6vw; align-items: center; justify-content: center;
          width: 100%; height: 100%; flex-direction: row; }
.hidden { display: none !important; }
.kid { font-size: 18vw; background: #fff; border: none; border-radius: 4vw;
       padding: 4vw; box-shadow: 0 6px 0 #e0d5b8; }
#talk { flex-direction: column; }
#avatar { width: min(70vw, 70vh); height: min(70vw, 70vh); }
#bye { font-size: 10vw; background: none; border: none; }
/* состояния */
#avatar[data-state="listening"] #eyeL, #avatar[data-state="listening"] #eyeR { r: 13; }
#avatar[data-state="thinking"] #eyeL, #avatar[data-state="thinking"] #eyeR
  { animation: look 1.2s infinite alternate; }
@keyframes look { from { transform: translateX(-4px); } to { transform: translateX(4px); } }
#avatar[data-state="idle"] { animation: breathe 3s infinite ease-in-out; }
@keyframes breathe { 50% { transform: scale(1.03); } }