/* One shared three-card teaching route across all pages. */
.app .footer-nav,.app.page-middle .footer-nav,.app.page-third .footer-nav{height:96px;min-height:96px;display:flex;align-items:center;gap:14px;padding:9px 20px;border:0;background:linear-gradient(180deg,#d8effb,#bddfef);box-shadow:0 -3px 12px #3288b52b;color:#133b79}
.app .nav-context,.app.page-middle .nav-context,.app.page-third .nav-context{display:none}
.app .nav-item,.app.page-middle .nav-item,.app.page-third .nav-item{position:relative;isolation:isolate;overflow:hidden;height:76px;min-width:0;flex:1;display:flex;align-items:center;justify-content:flex-start;gap:12px;padding:6px 15px;border:2px solid #fff;border-radius:17px;background:linear-gradient(105deg,#fffffffa,#e8f5ffed);box-shadow:0 4px 13px #3c81a650;color:#0d3978;text-align:left;cursor:pointer}
.app .nav-item::before{content:"";position:absolute;z-index:-1;inset:0 0 0 51%;background-image:var(--nav-scene);background-repeat:no-repeat;background-size:cover;background-position:center;mask-image:linear-gradient(90deg,transparent,#000 35%);opacity:.7}
.app .nav-item[data-page=overview]{--nav-scene:url("assets/header-panorama.png")}
.app .nav-item[data-page=middle]{--nav-scene:url("assets/lower-river-scene.png")}
.app .nav-item[data-page=third]{--nav-scene:url("assets/xiaolangdi-scene.png")}
.app .nav-item.selected,.app.page-middle .nav-item.selected,.app.page-third .nav-item.selected{border-color:#118efa;background:linear-gradient(105deg,#e3f8ff,#56baf8 62%,#b8e6ff);box-shadow:0 0 0 2px #ffffffcf,0 5px 14px #168be680;color:#073b84}
.app .nav-item.selected::before{opacity:.85}
.app .nav-illustration,.app.page-middle .nav-illustration,.app.page-third .nav-illustration{position:relative;z-index:1;width:64px;min-width:64px;height:57px;object-fit:contain;opacity:1;filter:drop-shadow(0 2px 3px #276d9d30)}
.app .nav-copy{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0;flex:1;text-shadow:0 1px #ffffffb0}
.app .nav-title,.app.page-middle .nav-item .nav-title,.app.page-third .nav-item .nav-title,.app .nav-item.selected .nav-title{display:block;font-size:clamp(14px,1.05vw,20px);font-weight:900;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .nav-copy small,.app .nav-item small{display:block;margin:0;color:#5d80a4;font-size:clamp(10px,.7vw,13px);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .nav-item.selected .nav-copy small{color:#206aa8}
.app .nav-arrow,.app.page-middle .nav-arrow,.app.page-third .nav-arrow{position:relative;z-index:1;flex:none;margin-left:auto;width:31px;min-width:31px;height:31px;border-radius:50%;background:#67869b9c;color:white;font:800 26px/28px Arial,sans-serif;text-align:center}
.app .nav-item.selected .nav-arrow{background:#fff;color:#0675df;box-shadow:0 2px 6px #136daf66}
@media(max-width:1200px){.app .footer-nav,.app.page-middle .footer-nav,.app.page-third .footer-nav{height:82px;min-height:82px;gap:8px;padding:7px 10px}.app .nav-item,.app.page-middle .nav-item,.app.page-third .nav-item{height:65px;gap:7px;padding:5px 9px}.app .nav-illustration,.app.page-middle .nav-illustration,.app.page-third .nav-illustration{width:43px;min-width:43px;height:45px}.app .nav-title,.app.page-middle .nav-item .nav-title,.app.page-third .nav-item .nav-title,.app .nav-item.selected .nav-title{font-size:clamp(10px,1.2vw,15px)}}
@media(max-width:760px){.app .footer-nav,.app.page-middle .footer-nav,.app.page-third .footer-nav{position:sticky;bottom:0;z-index:10;height:69px;min-height:69px;gap:5px;padding:5px}.app .nav-item,.app.page-middle .nav-item,.app.page-third .nav-item{height:55px;padding:4px 6px;gap:3px}.app .nav-illustration,.app.page-middle .nav-illustration,.app.page-third .nav-illustration{display:none}.app .nav-copy small,.app .nav-item small{display:none}.app .nav-arrow,.app.page-middle .nav-arrow,.app.page-third .nav-arrow{display:none}}