*{box-sizing:border-box}
body{margin:0;font-family:"Comic Sans MS","Chalkboard SE","Trebuchet MS",sans-serif;font-size:1.25rem;line-height:1.5;color:#1b1b3a;background:#fff8e1}
a{color:#3b1fa3}
:focus-visible{outline:4px solid #ff5722;outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:9}
header{background:linear-gradient(90deg,#ff6f91,#ffc75f,#4dd0e1,#9575cd);padding:12px}
.logo{font-size:2rem;font-weight:bold;color:#1b1b3a;text-decoration:none;display:inline-block;margin-right:12px}
nav ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
nav a{display:block;background:#fff;padding:8px 16px;border-radius:999px;text-decoration:none;font-weight:bold;color:#1b1b3a;border:3px solid #1b1b3a}
nav a[aria-current=page]{background:#1b1b3a;color:#fff}
main{max-width:1000px;margin:0 auto;padding:16px}
h1{font-size:2.4rem;margin:.4em 0;color:#c2185b}h2{font-size:1.8rem;color:#3b1fa3}
.card{background:#fff;border:4px solid #1b1b3a;border-radius:24px;padding:16px;margin:16px 0;box-shadow:6px 6px 0 #1b1b3a}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.tile{display:block;text-align:center;text-decoration:none;color:#1b1b3a;font-size:1.5rem;font-weight:bold}
.tile span{font-size:3.5rem;display:block}
button,select,input{font:inherit}
button{background:#ffc75f;border:3px solid #1b1b3a;border-radius:16px;padding:10px 18px;cursor:pointer;font-weight:bold;color:#1b1b3a;margin:4px}
button:hover{background:#ffb300}
footer{background:#1b1b3a;color:#fff;padding:20px;text-align:center;margin-top:32px;font-size:1.05rem}
.mascot{width:220px;max-width:60%;animation:bob 2.5s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-12px)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}
.hero{text-align:center}
.memory{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:420px}
.memory button{aspect-ratio:1;font-size:2.4rem;margin:0;background:#9575cd}
.memory button.open,.memory button.done{background:#fff}
.memory button.done{border-color:#2e7d32}
.big{font-size:2.2rem;font-weight:bold;letter-spacing:.2em}
.msg{font-weight:bold;min-height:1.6em}
.palette button{width:48px;height:48px;border-radius:50%;padding:0}
.palette button[aria-pressed=true]{outline:5px solid #1b1b3a}
canvas{background:#fff;border:4px solid #1b1b3a;border-radius:12px;width:100%;max-width:800px;touch-action:none;display:block}
.fact{font-size:1.6rem;min-height:4em}
.pals{display:flex;gap:24px;justify-content:center;align-items:flex-start}
.pal{flex:1 1 0;max-width:420px}
.pal .mascot{max-width:80%}
.mascot.gaa{animation:bob-gaa 1.8s ease-in-out .4s infinite;transform-origin:50% 100%}
@keyframes bob-gaa{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-16px) rotate(-4deg)}60%{transform:translateY(-4px) rotate(4deg)}}
.gaa-hi{font-size:2.4rem;margin:.4em 0;color:#e65100}
.welcome{font-size:1.4rem}
@media (max-width:640px){.pals{flex-direction:column;align-items:center}}
@media (prefers-reduced-motion:reduce){.mascot,.mascot.gaa{animation:none!important}}