/* Compact learning directories, sharing the school's official navy shell. */
.ls-learning{--ls-navy:#283d23;--ls-blue:#31462b;--ls-blue-strong:#283d23;--ls-line:#e2e5e2;--ls-bg:#fff;--ls-tint:#f7f6f2;background:#fff;color:#283d23;display:flex;flex-direction:column;min-height:100vh}
.ls-learning *{box-sizing:border-box}
.ls-learning .ls-banner{min-height:240px;background-color:#e8ede6;background-position:right center}
.ls-learning .ls-banner::before{background:linear-gradient(90deg,rgba(236,240,235,.18),transparent 70%)}
.ls-learning .ls-banner h1{font-size:clamp(32px,4vw,46px)}
.lr-main>section{scroll-margin-top:100px}
.lr-main>section+section{margin-top:40px}
.lr-main{width:100%;padding-top:30px;padding-bottom:36px;flex:1}
.lr-main h2{margin:0 0 20px;font:700 clamp(26px,2.5vw,32px)/1.4 var(--ls-serif);color:var(--ls-navy)}
.lr-main h3{margin:0;color:var(--ls-navy);font:700 20px/1.5 var(--ls-serif)}
.lr-books{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.lr-book,.lr-reserved{border:1px solid var(--ls-line);border-radius:5px;min-width:0;background:#fff;min-height:180px;padding:18px}
.lr-book{display:flex;align-items:center;gap:16px}
.lr-cover{display:block;flex:0 0 78px}
.lr-cover img{width:78px;height:116px;object-fit:contain;display:block}
.lr-book-content{min-width:0;flex:1}
.lr-book h3{font-size:18px;margin-bottom:14px}
.lr-practice{display:flex;align-items:center;justify-content:center;min-height:40px;padding:8px 12px;background:var(--ls-navy);border-radius:3px;color:#fff;font-size:14px;text-decoration:none;font-weight:500;text-align:center}
.lr-practice:hover{background:#3d5238}
.lr-downloads{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--ls-line)}
.lr-downloads a{display:inline-flex;gap:4px;align-items:center;color:var(--ls-navy);font-size:14px;text-decoration:none;min-height:24px}
.lr-downloads a:hover{text-decoration:underline}
.lr-downloads svg{width:15px;height:15px;flex:none}
.lr-reserved{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.lr-reserved>svg{width:48px;height:48px;margin-bottom:12px}
.lr-reserved p{margin:8px 0 0;color:var(--ls-muted);font-size:14px;line-height:1.6}
.lr-foundations{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.lr-foundation{display:flex;flex-direction:column;min-width:0;padding:12px 12px 18px;border:1px solid var(--ls-line);border-radius:5px;text-decoration:none;color:var(--ls-navy);background:#fff}
.lr-foundation:hover{border-color:#929c90;background:#fdfcf9}
.lr-demo{height:150px;display:flex;align-items:center;justify-content:center;background:#faf8f3;border-radius:3px;margin-bottom:14px;overflow:hidden}
.lr-pinyin{flex-direction:column;gap:8px;font-size:32px;letter-spacing:.05em}
.lr-pinyin b{font-weight:600}.lr-pinyin>span{font-size:30px}
.lr-character{display:flex;align-items:center;justify-content:center;position:relative;width:120px;height:120px;border:1px solid #b6bcb4;font:500 100px/1 var(--ls-serif);background:linear-gradient(45deg,transparent 49.6%,#dbdeda 49.6%,#dbdeda 50.4%,transparent 50.4%),linear-gradient(-45deg,transparent 49.6%,#dbdeda 49.6%,#dbdeda 50.4%,transparent 50.4%)}
.lr-word-pair{gap:18px}.lr-word-pair>span{display:flex;flex-direction:column;align-items:center;justify-content:center;width:94px;min-height:112px;background:#fff;border:1px solid var(--ls-line);border-radius:5px}
.lr-word-pair b{font:700 48px/1.3 var(--ls-serif)}.lr-word-pair small{font-size:20px;line-height:1.4}
.lr-foundation h3,.lr-foundation p{margin-left:6px;margin-right:6px}
.lr-foundation p{font-size:16px;line-height:1.6;color:var(--ls-muted);margin-top:6px;margin-bottom:20px}
.lr-start{align-self:flex-end;margin-top:auto;padding:0 6px;font-size:14px;font-weight:600}
.lr-main a:focus-visible{outline:3px solid #92a88c;outline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ls-learning>footer.ls-footer{background:#31462b;color:#e9ede8}
.ls-learning .ls-footer::before{display:none}
.ls-learning .ls-footer :is(.ls-brand strong,.ls-brand small,.ls-footer-contact a,.ls-footer-contact span,.ls-footer-contact svg,.ls-footer-nav a,.ls-footer-sites b,.ls-social button){color:#fff}
.ls-learning .ls-footer :is(.ls-footer-sites a,.ls-footer-bottom,.ls-footer-bottom a){color:#dde3db}
.ls-learning .ls-footer-bottom{border-top-color:rgba(255,255,255,.16)}
.ls-learning .ls-footer :is(.ls-footer-nav a,.ls-footer-contact a,.ls-footer-sites a):hover{color:#fff;text-decoration:underline}
@media(max-width:1100px){.lr-book{gap:12px;padding:16px}.lr-cover{flex-basis:64px}.lr-cover img{width:64px;height:100px}.lr-book h3{font-size:17px}.lr-downloads{gap:6px 10px}}
@media(max-width:820px){.lr-books{grid-template-columns:repeat(2,minmax(0,1fr))}.lr-reserved{grid-column:auto}.lr-reserved:nth-child(3){order:1}.lr-reserved:nth-child(6){order:2}.lr-foundations{gap:12px}.lr-demo{height:130px}.lr-word-pair{gap:10px}.lr-word-pair>span{width:72px}.lr-foundation h3{font-size:18px}.lr-foundation p{font-size:14px}}
@media(max-width:620px){.ls-learning .ls-banner{min-height:170px;background-position:65% center}.ls-learning .ls-banner::before{background:linear-gradient(90deg,rgba(236,240,235,.7),rgba(236,240,235,.1))}.lr-tabs .ls-wrap{gap:28px}.lr-tabs button{min-height:56px;font-size:15px}.lr-main{padding:24px 18px 30px}.lr-books{grid-template-columns:1fr;gap:12px}.lr-book{min-height:158px;padding:16px;gap:18px}.lr-cover{flex-basis:76px}.lr-cover img{width:76px;height:112px}.lr-book h3{font-size:19px}.lr-reserved{min-height:150px}.lr-reserved>svg{width:40px;height:40px}.lr-foundations{grid-template-columns:1fr;gap:16px}.lr-demo{height:150px}.lr-foundation h3{font-size:21px}.lr-foundation p{font-size:16px}.lr-word-pair>span{width:94px}.lr-start{min-height:30px;display:flex;align-items:center}}
.ls-learning .ls-banner-learning{background-image:url('/tigao/assets/home/banner-learning-2026-v3.jpg');background-position:center 57%;background-color:#eeeae3}
.ls-learning .ls-banner::before{background:linear-gradient(90deg,rgba(250,249,246,.97) 0%,rgba(250,249,246,.84) 28%,rgba(250,249,246,.22) 58%,transparent 80%)}
@media(max-width:760px){.ls-learning .ls-banner-learning{background-position:60% center}.ls-learning .ls-banner::before{background:linear-gradient(90deg,rgba(250,249,246,.92),rgba(250,249,246,.55) 50%,rgba(250,249,246,.1))}}