model output
Claude Sonnet 4.6

Only CSS: Kirby
A 0.90T 0.31
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<title>Kirby Animation</title>
7<style>
8  * { margin: 0; padding: 0; box-sizing: border-box; }
9  body {
10    background: white;
11    display: flex;
12    justify-content: center;
13    align-items: center;
14    min-height: 100vh;
15  }
16  .kirby-container {
17    position: relative;
18    width: 340px;
19    height: 340px;
20  }
21  .kirby-body {
22    width: 300px;
23    height: 300px;
24    background: #f08080;
25    border-radius: 50%;
26    border: 8px solid #111;
27    position: absolute;
28    top: 50%;
29    left: 50%;
30    transform: translate(-50%, -50%);
31    background: radial-gradient(circle at 40% 35%, #f5a0a0 0%, #f08080 50%, #e06060 100%);
32  }
33  .face {
34    position: absolute;
35    top: 50%;
36    left: 50%;
37    transform: translate(-50%, -50%);
38    width: 300px;
39    height: 300px;
40  }
41  /* Cheeks */
42  .cheek {
43    position: absolute;
44    width: 48px;
45    height: 26px;
46    background: #e85555;
47    border-radius: 50%;
48    opacity: 0.7;
49    top: 54%;
50  }
51  .cheek-left { left: 18%; }
52  .cheek-right { right: 18%; }
53  /* Nose dot */
54  .nose {
55    position: absolute;
56    width: 5px;
57    height: 5px;
58    background: #333;
59    border-radius: 50%;
60    top: 52%;
61    left: 50%;
62    transform: translateX(-50%);
63  }
64  /* Eyes */
65  .eyes {
66    position: absolute;
67    top: 28%;
68    left: 50%;
69    transform: translateX(-50%);
70    display: flex;
71    gap: 14px;
72  }
73  .eye {
74    width: 28px;
75    height: 52px;
76    background: #111;
77    border-radius: 14px;
78    position: relative;
79    overflow: hidden;
80    border: 3px solid #111;
81  }
82  .eye-inner {
83    position: absolute;
84    width: 22px;
85    height: 46px;
86    border-radius: 11px;
87    left: 50%;
88    transform: translateX(-50%);
89    overflow: hidden;
90    top: 0;
91  }
92  .eye-gray {
93    position: absolute;
94    width: 100%;
95    height: 50%;
96    background: #b0b0b8;
97    border-radius: 11px 11px 0 0;
98    top: 0;
99  }
100  .eye-blue {
101    position: absolute;
102    width: 100%;
103    height: 55%;
104    background: #2244cc;
105    border-radius: 0 0 11px 11px;
106    bottom: 0;
107    animation: eyeMove 2s ease-in-out infinite;
108  }
109  .eye-right .eye-blue {
110    animation: eyeMove 2s ease-in-out infinite;
111    animation-delay: 0s;
112  }
113  @keyframes eyeMove {
114    0%   { transform: translateY(0%); }
115    20%  { transform: translateY(-30%); }
116    40%  { transform: translateY(-55%); }
117    50%  { transform: translateY(-55%); }
118    65%  { transform: translateY(-30%); }
119    80%  { transform: translateY(0%); }
120    100% { transform: translateY(0%); }
121  }
122</style>
123</head>
124<body>
125<div class="kirby-container">
126  <div class="kirby-body"></div>
127  <div class="face">
128    <div class="eyes">
129      <div class="eye eye-left">
130        <div class="eye-inner">
131          <div class="eye-gray"></div>
132          <div class="eye-blue"></div>
133        </div>
134      </div>
135      <div class="eye eye-right">
136        <div class="eye-inner">
137          <div class="eye-gray"></div>
138          <div class="eye-blue"></div>
139        </div>
140      </div>
141    </div>
142    <div class="cheek cheek-left"></div>
143    <div class="cheek cheek-right"></div>
144    <div class="nose"></div>
145  </div>
146</div>
147</body>
148</html>