body { margin: 0; font: 22px/1.4 system-ui, sans-serif; background: #fdf6ec; color: #333; }
main { max-width: 640px; margin: 0 auto; padding: 24px; text-align: center; }
button, input { font: inherit; padding: 12px 20px; margin: 6px; border-radius: 16px; border: 2px solid #ccc; background: #fff; }
button:disabled { opacity: .35; }
.tile { min-width: 64px; font-size: 32px; }
.answer { font-size: 40px; letter-spacing: 4px; min-height: 56px; }
/* Placeholder pet until art lands: a blob that grows per form. */
.pet { width: calc(90px + var(--f) * 25px); aspect-ratio: 1; margin: 0 auto; border-radius: 50% 50% 45% 45%;
       background: var(--c); display: grid; place-items: center; font-size: 48px; transition: width .4s; }
.pet.sleepy { opacity: .6; }
.pet.thinking { transform: rotate(-8deg); }
.ok { color: #2a8a3e; } .no { color: #b5651d; }
.hint { font-size: 16px; color: #8a5a2b; min-height: 1em; }