:root { --ink: #2f3357; --soft: #5b6180; --green: #2f8f45; --card: #ffffff; }
* { box-sizing: border-box; }
body { margin: 0; background: linear-gradient(#bfe8ff, #e8f8d8) fixed; font-family: Nunito, "Segoe UI", sans-serif; color: var(--ink); line-height: 1.6; }
.top { max-width: 980px; margin: 0 auto; padding: 14px 16px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.top .logo { font: 700 1.35rem Fredoka, sans-serif; color: var(--ink); text-decoration: none; margin-right: auto; }
.top nav { display: flex; flex-wrap: wrap; gap: 6px; }
.top nav a { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.75); color: var(--ink); text-decoration: none; font-weight: 700; font-size: .92rem; }
.top nav a.on { background: #5cc94f; color: #fff; }
main { max-width: 980px; margin: 14px auto 24px; padding: 24px 28px 32px; background: var(--card); border-radius: 22px; box-shadow: 0 10px 30px -18px rgba(0,0,0,0.4); }
h1, h2, h3 { font-family: Fredoka, "Segoe UI", sans-serif; line-height: 1.2; }
h1 { font-size: 2rem; margin: 0 0 6px; }
h2 { font-size: 1.35rem; margin: 30px 0 8px; color: var(--green); }
h3 { font-size: 1.15rem; margin: 0 0 4px; }
.lead { font-size: 1.08rem; color: var(--soft); margin-top: 0; }
.kid { padding: 12px 16px; border-radius: 14px; background: #eafbe9; }
a { color: #2563c9; }
ul, ol { padding-left: 1.3em; }
.play { display: inline-block; margin: 8px 0; padding: 10px 22px; border-radius: 999px; background: #5cc94f; color: #fff; font-family: Fredoka, sans-serif; font-weight: 700; text-decoration: none; box-shadow: 0 5px 0 #2f8f45; }
.toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.toc a { padding: 4px 10px; border-radius: 999px; background: #eef4ff; text-decoration: none; font-weight: 700; font-size: .9rem; }
.animals { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 10px; }
.animal { border: 2px solid #e6ecf7; border-radius: 18px; padding: 14px 16px; scroll-margin-top: 12px; }
.animal .em { font-size: 1.6rem; margin-right: 4px; }
.animal dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 8px 0; font-size: .93rem; }
.animal dt { font-weight: 700; color: var(--soft); }
.animal dd { margin: 0; }
.animal p { margin: 6px 0 0; font-size: .95rem; }
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; font-weight: 700; }
.chain span { padding: 4px 10px; border-radius: 12px; background: #f3f8ee; }
footer { max-width: 980px; margin: 0 auto 30px; padding: 0 16px; font-size: .88rem; color: var(--soft); display: flex; flex-wrap: wrap; gap: 6px 16px; }
footer a { color: var(--soft); }
@media (max-width: 640px) { main { margin: 10px 0 18px; border-radius: 0; padding: 20px 16px 28px; } h1 { font-size: 1.6rem; } }