*{box-sizing:border-box;margin:0}
body{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,#1e2a5a,#0b1026 70%);color:#e8ecff;font-family:system-ui,sans-serif;overflow:hidden}
main{text-align:center;padding:24px;position:relative}
.stars{position:fixed;inset:0;background-image:radial-gradient(2px 2px at 20% 30%,#fff8,transparent),radial-gradient(2px 2px at 70% 20%,#fff8,transparent),radial-gradient(1.5px 1.5px at 40% 80%,#fff8,transparent),radial-gradient(2px 2px at 85% 65%,#fff8,transparent),radial-gradient(1.5px 1.5px at 10% 70%,#fff8,transparent);animation:twinkle 3s infinite alternate}
@keyframes twinkle{from{opacity:.4}to{opacity:1}}
.robot{position:relative;width:200px;height:330px;margin:0 auto 24px;animation:float 3s ease-in-out infinite;cursor:pointer}
@keyframes float{50%{transform:translateY(-14px)}}
.head{position:absolute;top:34px;left:35px;width:130px;height:100px;background:linear-gradient(#cfd8ff,#8fa0e8);border-radius:28px;box-shadow:inset 0 -6px 0 #0003}
.antenna{position:absolute;top:0;left:97px;width:6px;height:38px;background:#8fa0e8}
.bulb{position:absolute;top:-8px;left:-7px;width:20px;height:20px;border-radius:50%;background:#ff5a7a;box-shadow:0 0 14px #ff5a7a;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.3;box-shadow:0 0 4px #ff5a7a}}
.eye{position:absolute;top:28px;width:30px;height:30px;background:#0b1026;border-radius:50%;overflow:hidden;animation:eyeblink 4s infinite}
.eye.left{left:24px}.eye.right{right:24px}
.eye i{position:absolute;width:12px;height:12px;background:#5ff1ff;border-radius:50%;top:9px;left:9px;box-shadow:0 0 8px #5ff1ff;transition:transform .05s}
@keyframes eyeblink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
.mouth{position:absolute;bottom:16px;left:35px;width:60px;height:12px;border-radius:0 0 30px 30px;background:#0b1026;animation:talk 2s infinite}
@keyframes talk{50%{height:18px}}
.ear{position:absolute;top:36px;width:12px;height:28px;background:#5a6ccc;border-radius:6px}
.ear.l{left:-10px}.ear.r{right:-10px}
.neck{position:absolute;top:134px;left:90px;width:20px;height:14px;background:#5a6ccc}
.body{position:absolute;top:148px;left:45px;width:110px;height:110px;background:linear-gradient(#aebbff,#7385dc);border-radius:22px;box-shadow:inset 0 -6px 0 #0003}
.panel{position:absolute;top:26px;left:20px;width:70px;height:40px;background:#0b1026;border-radius:10px;display:flex;justify-content:space-around;align-items:center}
.led{width:12px;height:12px;border-radius:50%;animation:led 1.5s infinite}
.led.a{background:#5ff1ff}.led.b{background:#7dff8a;animation-delay:.3s}.led.c{background:#ffd75f;animation-delay:.6s}
@keyframes led{50%{opacity:.2}}
.arm{position:absolute;top:12px;width:20px;height:80px;background:#5a6ccc;border-radius:10px;transform-origin:50% 8px}
.arm.l{left:-24px;animation:swing 3s ease-in-out infinite}
.arm.r{right:-24px}
.hand{position:absolute;bottom:-8px;left:-3px;width:26px;height:26px;border-radius:50%;background:#cfd8ff}
.arm.wave{animation:wave 1s ease-in-out infinite}
@keyframes wave{0%,100%{transform:rotate(150deg)}50%{transform:rotate(190deg)}}
@keyframes swing{50%{transform:rotate(-12deg)}}
.legs span{position:absolute;top:258px;width:24px;height:46px;background:#5a6ccc;border-radius:8px 8px 12px 12px}
.legs span:first-child{left:62px}.legs span:last-child{right:62px}
.shadow{position:absolute;bottom:-14px;left:40px;width:120px;height:16px;background:#0006;border-radius:50%;filter:blur(4px);animation:shadow 3s ease-in-out infinite}
@keyframes shadow{50%{transform:scale(.8);opacity:.5}}
.robot.spin{animation:float 3s ease-in-out infinite,spin .8s}
@keyframes spin{to{filter:hue-rotate(360deg)}}
.robot.jump{animation:jump .6s}
@keyframes jump{40%{transform:translateY(-60px) rotate(8deg)}}
h1{font-size:clamp(1.6rem,5vw,2.4rem);margin-bottom:8px}
p{opacity:.75}