*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif;background:radial-gradient(circle at 30% 10%,#203a5c,#0b1220);color:#eef;line-height:1.55}
header{text-align:center;padding:2rem 1rem 0}h1{font-size:clamp(2.6rem,10vw,5rem);margin:0;color:#ffd84a;text-shadow:3px 3px 0 #d33;letter-spacing:.05em}.sub{opacity:.85}
main{max-width:760px;margin:auto;padding:1rem}.stage{text-align:center}#bot{display:block;margin:0 auto 1rem;width:min(260px,70vw);animation:roll 4s ease-in-out infinite}
@keyframes roll{0%,100%{transform:translateX(-18px) rotate(-2deg)}50%{transform:translateX(18px) rotate(2deg)}}
#bot.spin{animation:spin .8s}@keyframes spin{to{transform:rotate(360deg)}}
.bubble{display:inline-block;background:#fff;color:#111;padding:.6rem 1rem;border-radius:16px;max-width:90%;font-weight:600}
button{font:inherit;font-weight:700;background:#ffd84a;border:0;border-radius:999px;padding:.7rem 1.4rem;cursor:pointer;margin:.5rem}button:active{transform:scale(.96)}
section{background:#ffffff10;border-radius:14px;padding:.5rem 1.2rem;margin:1.2rem 0}h2{color:#9fe0ff}
footer{font-size:.8rem;opacity:.7;text-align:center;padding:1rem 1rem 2rem;max-width:760px;margin:auto}
@media (prefers-reduced-motion:reduce){#bot{animation:none}}
a{color:#ffd84a}.cta{font-weight:700}.big{font-size:clamp(6rem,30vw,12rem);text-align:center;margin:0;color:#ffd84a;text-shadow:5px 5px 0 #d33;line-height:1}code{background:#0006;padding:.1rem .4rem;border-radius:6px}