:root{--navy:#23486e;--ink:#183754;--blue:#356da8;--yellow:#ffce5b;--paper:#fff;--muted:#667887;--line:#dce5ec}*{box-sizing:border-box}body{margin:0;background:#edf4fa;color:var(--ink);font-family:ui-rounded,'PingFang SC','Microsoft YaHei',system-ui,sans-serif;font-size:16px}button,select,input{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.4}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #eb9c26;outline-offset:4px}button{touch-action:manipulation}.topbar{height:76px;background:var(--navy);color:#fff;display:flex;justify-content:space-between;align-items:center;padding:0 max(5%,calc((100vw - 1200px)/2));gap:20px}.brand{font-size:24px;display:flex;gap:12px;align-items:center;font-weight:850;letter-spacing:.04em}.brand span:not(.brand-icon){font-size:18px;font-weight:500;margin-left:8px}.brand-icon{background:var(--yellow);color:var(--navy);width:39px;height:39px;border-radius:12px;display:grid;place-items:center;font-size:28px}.top-actions{display:flex;gap:24px;align-items:center}.edition{font-size:14px;color:#d2e2ee;letter-spacing:.08em}.settings-btn{border:1px solid #64809a;border-radius:9px;color:white;background:none;padding:8px 14px;font-size:14px}main{max-width:1200px;margin:auto;padding:30px 28px 12px}.heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.eyebrow{font-size:14px;color:#67809b;letter-spacing:.08em;margin-bottom:7px}h1{font-size:30px;line-height:1.3;margin:0;font-weight:800}.language{display:flex;gap:12px;align-items:center;font-size:14px}.language label{color:var(--muted)}select{border:1px solid #ccd9e5;color:var(--ink);background:white;border-radius:12px;padding:10px 33px 10px 14px;min-width:140px;font-size:16px}.topics{display:flex;gap:9px;overflow-x:auto;padding:0 0 17px;scrollbar-width:thin}.topic{white-space:nowrap;background:transparent;border:1px solid #cbd9e6;border-radius:99px;padding:10px 20px;font-weight:600;font-size:15px;min-height:44px}.topic.active{background:var(--navy);border-color:var(--navy);color:white}.activity-bar{display:flex;justify-content:space-between;align-items:center;background:white;padding:10px;border:1px solid var(--line);border-radius:16px;margin-bottom:24px;gap:10px}.modes{display:flex;gap:4px}.mode{border:0;background:none;border-radius:10px;padding:11px 17px;color:var(--muted);font-weight:650;font-size:15px}.mode span{margin-right:5px;font-weight:800;font-size:18px}.mode.active{background:#e9f1fb;color:#25598c}.start-btn,.primary{background:var(--yellow);border:0;color:#513b0f;border-radius:11px;padding:12px 23px;font-weight:750;min-height:44px}.book-wrap{padding:0 9px}.book{display:grid;grid-template-columns:1fr 1fr;gap:0;box-shadow:0 12px 28px #23486e14;border:1px solid #d6e0e8;border-bottom:5px solid #d8e1e9;border-radius:14px;overflow:hidden;background:white}.sheet{min-width:0;padding:22px 20px 14px;background:white;position:relative}.sheet:first-child{border-right:1px solid #dce3ea;background:linear-gradient(to right,#fff 94%,#f2f4f6)}.sheet:nth-child(2){background:linear-gradient(to right,#f1f3f5,#fff 6%)}.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}.sheet h2{font-size:24px;letter-spacing:.03em;margin:0;color:var(--theme)}.sheet-number{font-size:14px;color:#91a0ae}.sheet-sub{font-size:14px;margin:0 0 16px;color:var(--muted);line-height:1.5}.animal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:126px;gap:8px}.animal-card{border:0;padding:0;background:var(--bg,#f0f4fa);border-radius:10px;overflow:hidden;text-align:left;position:relative;color:var(--ink);display:flex;flex-direction:column;min-width:0;transition:transform .16s,box-shadow .16s}.animal-card:hover{transform:translateY(-3px);box-shadow:0 4px 12px #23486e24}.animal-card.speaking{outline:3px solid #ebae32;outline-offset:2px}.animal-card.hero{grid-column:span 2;grid-row:span 2}.animal-photo{flex:1;min-height:0;position:relative;overflow:hidden;background:var(--bg)}.crop{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:100%;width:auto;overflow:hidden}.crop img{position:absolute;max-width:none;display:block}.animal-caption{height:43px;background:#ffffffed;padding:4px 8px;display:flex;justify-content:space-between;gap:3px;align-items:center;flex-shrink:0}.animal-name{font-size:15px;line-height:1.25;font-weight:700;display:block}.animal-en{font-size:12px;line-height:1.4;color:#6b7882;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.names{min-width:0}.speaker{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--theme);flex-shrink:0}.speaker svg{width:14px;height:14px}.hero .animal-caption{height:47px}.hero .animal-name{font-size:18px}.hero .animal-en{font-size:14px}.sheet-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:15px;font-size:12px;color:#8292a0}.page-badge{background:var(--theme);width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:white;font-size:12px}.page-controls{display:flex;justify-content:center;align-items:center;gap:30px;margin:22px 0 15px}.page-controls>button{border:1px solid #cbd9e5;background:white;border-radius:10px;padding:9px 17px;min-height:44px;font-size:14px;color:var(--ink)}.page-dots{display:flex;gap:9px}.page-dot{border:0;width:11px;height:11px;border-radius:50%;background:#bfcedd;padding:0;position:relative}.page-dot:before{content:'';position:absolute;inset:-10px}.page-dot.active{background:var(--navy)}.listening{display:flex;align-items:center;justify-content:center;gap:9px;min-height:38px;font-size:14px;color:#6a7d91;text-align:center}.sound-dot{width:7px;height:7px;border-radius:50%;background:#9db8d1}.listening.is-playing .sound-dot{background:#e3a429;animation:pulse 1s infinite}#stopBtn{border:0;background:white;color:var(--navy);border-radius:6px;padding:5px 9px;font-size:14px}footer{border-top:1px solid var(--line);margin-top:21px;padding-top:15px;color:#8391a0;font-size:12px;display:flex;justify-content:space-between;gap:12px}dialog{border:0;border-radius:23px;padding:26px;color:var(--ink);width:min(92vw,520px);max-height:90vh;overflow:auto;box-shadow:0 20px 100px #152c5550}dialog::backdrop{background:#18375480;backdrop-filter:blur(4px)}.dialog-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px}.dialog-top h2{margin:0;font-size:23px}.close{border:0;background:#edf2f7;border-radius:50%;width:40px;height:40px;font-size:26px;color:var(--ink)}.range-label{display:flex;justify-content:space-between;font-size:16px;margin-top:22px;margin-bottom:12px}input[type=range]{width:100%;accent-color:var(--blue);min-height:35px}.settings-note{margin:20px 0;font-size:14px;line-height:1.8;color:var(--muted)}.primary{width:100%}.activity-kind{color:var(--blue);font-weight:750}.activity-progress{display:flex;gap:7px;justify-content:center}.step{height:6px;width:42px;background:#e2eaf1;border-radius:5px}.step.done{background:#3b85bd}.step.current{background:var(--yellow)}#activity h2{text-align:center;font-size:26px;margin:22px 0 14px;line-height:1.4}.replay{display:block;margin:0 auto 20px;background:#eaf2fb;border:0;border-radius:99px;color:var(--blue);padding:10px 19px;font-size:14px;min-height:44px}.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}.choices .animal-card{height:170px}.choices .animal-card.hero{grid-column:auto;grid-row:auto}.choices .animal-caption{height:49px}.choices .animal-name{font-size:18px}.choices .animal-en{font-size:14px}.choices.single{grid-template-columns:1fr;max-width:270px;margin:auto}.choices.single .animal-card{height:235px}#feedback{text-align:center;font-size:16px;line-height:1.6;min-height:26px;margin:18px 0;color:#37628b}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#23486ef5;color:white;border-radius:12px;max-width:90vw;width:max-content;padding:12px 20px;font-size:14px;box-shadow:0 6px 24px #1d385540;display:none;z-index:30}.reading-word{font-weight:700}@keyframes pulse{50%{opacity:.35}}@media(min-width:1400px){.animal-grid{grid-auto-rows:137px}}@media(max-width:900px){main{padding:25px 18px 12px}.sheet{padding:18px 13px 12px}.animal-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:125px}.animal-en{font-size:12px}.sheet h2{font-size:22px}.mode{padding:11px 12px}}@media(max-width:700px){.topbar{height:65px;padding:0 18px}.brand{font-size:22px}.brand span:not(.brand-icon){font-size:16px}.edition{display:none}.settings-btn{font-size:14px;padding:7px 10px}.heading{align-items:flex-start;margin-bottom:21px;gap:10px}.heading h1{font-size:25px}.eyebrow{font-size:12px}.language{display:block}.language label{display:block;font-size:12px;margin-bottom:4px}.language select{min-width:104px;width:119px;font-size:14px;padding:9px 18px 9px 9px}.topics{gap:7px}.topic{font-size:14px;padding:9px 15px}.activity-bar{margin-bottom:18px;flex-wrap:wrap}.modes{width:100%;justify-content:space-between}.mode{padding:10px 8px;font-size:14px;flex:1}.start-btn{width:100%;padding:10px}.book-wrap{padding:0}.book{grid-template-columns:1fr;border-radius:13px}.sheet:first-child{border-right:0;background:white}.sheet:nth-child(2){display:none}.sheet{padding:20px 15px 14px}.animal-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:135px;gap:8px}.animal-en{font-size:12px}.sheet h2{font-size:25px}.sheet-sub{font-size:14px}.animal-name{font-size:16px}.animal-caption{height:45px;padding:4px 7px}.speaker{width:22px;height:22px}.page-controls{gap:20px;margin-top:19px}footer{font-size:12px;flex-wrap:wrap}.listening{font-size:14px}dialog{padding:22px}.choices .animal-card{height:168px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}@media(max-width:370px){main{padding-left:10px;padding-right:10px}.brand{gap:7px}.heading h1{font-size:22px}.animal-caption{padding:3px 5px}.speaker{width:18px;height:18px}.animal-name{font-size:14px}}

.animal-photo>img{width:100%;height:100%;display:block;object-fit:contain}.animal-photo{padding:4px;background:var(--bg)}.hero .animal-photo{padding:0}.hero .animal-photo>img{object-fit:contain}.choices .animal-photo{padding:5px}.recording-panel{background:#eef4fb;border-radius:14px;padding:15px;margin-bottom:16px}.recording-panel[hidden]{display:none}.record-buttons{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.record-buttons button{border:1px solid #aac2db;background:white;color:var(--navy);padding:11px 15px;min-height:44px;border-radius:10px;font-size:15px;font-weight:650}#recordBtn{background:var(--navy);color:white;border-color:var(--navy)}#stopRecordingBtn{background:#fff0ed;border-color:#e5b8ad;color:#944530}#recordStatus{text-align:center;font-size:14px;line-height:1.6;margin:12px 0 7px}.recording-panel small{display:block;text-align:center;color:var(--muted);font-size:12px}footer a{color:inherit}.mode.active{box-shadow:inset 0 0 0 1px #c6d9ed}.activity-bar .modes .mode{min-height:46px}@media(max-width:700px){.activity-bar{position:sticky;top:8px;z-index:5;box-shadow:0 4px 15px #23486e12}.mode{font-size:14px;padding:10px 5px}}

/* Equal-sized photo cards, with room to recognise each animal. */
.animal-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:auto;gap:14px}
.animal-grid>.animal-card{grid-column:auto;grid-row:auto;border:1px solid #dce5ec;border-radius:12px}
.animal-grid>.animal-card>.animal-photo{flex:none;aspect-ratio:1;width:100%;padding:6px}
.animal-grid>.animal-card>.animal-caption{height:auto;min-height:58px;padding:8px 10px;gap:6px}
.animal-grid .animal-name{font-size:18px;line-height:1.35}
.animal-grid .animal-en{font-size:14px;line-height:1.45}
.animal-grid .speaker{width:28px;height:28px}
.animal-grid .speaker svg{width:17px;height:17px}
.choices .animal-card,.choices.single .animal-card{height:auto;min-height:0}
.choices .animal-photo{flex:none;width:100%;aspect-ratio:1;padding:6px}
.choices.single{max-width:300px}
@media(max-width:900px){.animal-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:12px}}
@media(max-width:700px){main{padding-left:12px;padding-right:12px}.sheet{padding:18px 12px 14px}.animal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.animal-grid .animal-name{font-size:18px}.animal-grid .animal-en{font-size:14px}.animal-grid>.animal-card>.animal-caption{min-height:60px;padding:8px 9px}}
@media(max-width:370px){main{padding-left:8px;padding-right:8px}.sheet{padding-left:10px;padding-right:10px}.animal-grid{gap:10px}.animal-grid .animal-name{font-size:17px}.animal-grid .speaker{width:25px;height:25px}}

/* Day and night surfaces; animal photographs keep their original colours. */
:root{color-scheme:light;--page:#edf4fa;--surface:#fff;--soft:#eaf2fb;--caption:#ffffffed;--control-line:#cbd9e6;--secondary:#6a7d91;--accent-ink:#25598c;--card-line:#dce5ec}
:root[data-theme=dark]{color-scheme:dark;--navy:#111f30;--ink:#e8f0fa;--blue:#a0ceff;--paper:#1b2b3e;--muted:#aabbd0;--line:#384b62;--page:#101925;--surface:#1b2b3e;--soft:#283d55;--caption:#213247;--control-line:#4b6079;--secondary:#b5c5d8;--accent-ink:#b8d9ff;--card-line:#44576d}
body{background:var(--page)}
.topbar{height:auto;min-height:76px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap;gap:12px}
.top-actions{gap:10px;flex-wrap:wrap;justify-content:flex-end}
.settings-btn{min-height:44px;white-space:nowrap}
.theme-toggle{background:#ffffff12}
.brand-icon{color:#23486e}
select{background:var(--surface);border-color:var(--control-line)}
.topic{color:var(--ink);border-color:var(--control-line)}
.topic.active{background:var(--accent-ink);border-color:var(--accent-ink);color:var(--surface)}
.activity-bar,.book,.sheet{background:var(--surface);border-color:var(--line)}
.sheet:first-child,.sheet:nth-child(2){background:var(--surface)}
.sheet:first-child{border-color:var(--line)}
.animal-grid>.animal-card{border-color:var(--card-line)}
.animal-caption{background:var(--caption)}
.animal-en{color:var(--muted)}
.eyebrow,.sheet-number,.sheet-foot,footer,.listening{color:var(--secondary)}
.mode.active,.replay,.recording-panel{background:var(--soft);color:var(--accent-ink)}
.mode.active{box-shadow:inset 0 0 0 1px var(--control-line)}
.page-controls>button,dialog,#stopBtn,.record-buttons button{background:var(--surface);border-color:var(--control-line);color:var(--ink)}
.page-dot{background:var(--control-line)}
.page-dot.active{background:var(--accent-ink)}
.close{background:var(--soft)}
.step{background:var(--control-line)}
#feedback{color:var(--accent-ink)}
#recordBtn{background:var(--accent-ink);border-color:var(--accent-ink);color:var(--surface)}
:root[data-theme=dark] .sheet h2{color:#b8d9ff}
:root[data-theme=dark] .animal-card{background:#26384d}
:root[data-theme=dark] .animal-photo{background:#dce4ed}
:root[data-theme=dark] .book{box-shadow:0 12px 28px #0004}
:root[data-theme=dark] dialog::backdrop{background:#050c16b8}
:root[data-theme=dark] #stopRecordingBtn{background:#452d2b;border-color:#986b61;color:#ffd0bf}
:root[data-theme=dark] #toast{background:#304a68}
@media(max-width:700px){.topbar{min-height:65px;padding-top:10px;padding-bottom:10px}.top-actions{gap:8px;flex:1;flex-wrap:nowrap}.settings-btn{padding:8px 10px}}
@media(max-width:400px){.top-actions{flex-basis:100%;justify-content:space-between}.top-actions .settings-btn{flex:1}.topbar{gap:8px}}

.site-nav{display:flex;gap:10px;margin-bottom:22px;flex-wrap:wrap}.site-nav a{display:flex;align-items:center;justify-content:center;min-height:46px;padding:10px 22px;border:1px solid var(--control-line);border-radius:12px;color:var(--ink);text-decoration:none;font-weight:700;background:var(--surface)}.site-nav a.active{background:var(--accent-ink);color:var(--surface);border-color:var(--accent-ink)}@media(max-width:650px){.site-nav{gap:7px}.site-nav a{padding:10px 16px;flex:1}}

@media(max-width:650px){nav.site-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}nav.site-nav a{padding:10px 6px;font-size:14px;white-space:nowrap}}

/* One complete category; the document scrolls naturally. */
.topics{flex-wrap:wrap;overflow:visible;padding-bottom:18px}
.book-wrap{padding:0}
.book{display:block;overflow:visible;border-radius:16px;box-shadow:0 8px 24px #23486e0d}
.book .sheet{padding:24px;border:0;background:var(--surface);border-radius:12px}
.book .animal-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));grid-auto-rows:auto;gap:16px}
.category-count{font-size:14px;color:var(--secondary);white-space:nowrap}
@media(max-width:900px){.book .animal-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media(max-width:700px){.topics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.topic{white-space:normal;padding:10px 12px}.book .sheet{padding:18px 12px}.book .animal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}

/* Language-aware labels stay readable on small screens. */
.site-nav a,.topic{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:3px;line-height:1.4}
.nav-label-main,.nav-label-sub{max-width:100%;overflow-wrap:anywhere}
.nav-label-sub{font-size:14px;font-weight:500}
.topic.speaking,.site-nav a.speaking{outline:3px solid #ebae32;outline-offset:2px}
.sheet-head h2{min-width:0;overflow-wrap:anywhere}
.category-count{flex-shrink:0}
@media(max-width:700px){.heading>div:first-child{min-width:0}.heading h1{font-size:23px}.sheet-head{align-items:flex-start}.sheet h2{font-size:22px}}