.topic-library{padding-top:32px}.topic-library>h1{font-size:clamp(48px,7vw,92px);line-height:1.02;letter-spacing:-.055em;margin:30px 0 24px}.topic-library>h1 em{color:#127b72;font-style:normal}.topic-intro{font-size:20px;max-width:650px;color:#52716d;margin-bottom:44px}.topic-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}.topic-cover-card{display:block;position:relative;isolation:isolate;min-height:520px;overflow:hidden;border-radius:28px;background:#123a3a;color:white;box-shadow:0 20px 60px #183a3322;border:1px solid #ffffff70;transition:transform .3s,box-shadow .3s}.topic-cover-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% 50%;z-index:-2;transition:transform .6s}.topic-cover-shade{position:absolute;inset:0;background:linear-gradient(180deg,#08262d00 15%,#08262d65 50%,#061e2cf5);z-index:-1}.topic-cover-label{display:inline-flex;margin:26px;padding:9px 13px;border:1px solid #fff7;border-radius:30px;font-size:12px;letter-spacing:2px;background:#08312d50;backdrop-filter:blur(8px)}.topic-cover-content{position:absolute;bottom:34px;left:34px;right:34px}.topic-cover-content>span:first-child{color:#efd497;font-size:13px;font-weight:650}.topic-cover-content h2{color:white;font-size:clamp(26px,3vw,39px);line-height:1.1;letter-spacing:-.035em;margin:13px 0}.topic-cover-content p{font-size:15px;line-height:1.5;color:#d8e8e3}.topic-cover-open{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #fff4;padding-top:22px;margin-top:24px;font-weight:650}.topic-cover-open b{font-size:26px;font-weight:400}.topic-cover-card:hover{transform:translateY(-5px);box-shadow:0 28px 70px #183a3338}.topic-cover-card:hover>img{transform:scale(1.035)}.topic-cover-card:focus-visible{outline:4px solid #dba95b;outline-offset:6px}.topic-home{margin:80px 0 30px}.topic-home .topic-cover-card{min-height:460px}.topic-all{font-weight:650;color:#17655c}.topic-book-hero{position:relative;isolation:isolate;overflow:hidden;min-height:390px;border-radius:26px;background:#123838;margin:24px 0 28px}.topic-book-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 45%;z-index:-2}.topic-book-shade{position:absolute;inset:0;background:linear-gradient(90deg,#062c34cc,#062c3410),linear-gradient(0deg,#06232cdc,transparent 80%);z-index:-1}.topic-book-title{position:absolute;bottom:40px;left:38px;right:38px;display:flex;align-items:flex-end;gap:26px;color:white}.topic-book-number{font-size:96px;line-height:.9;color:#f4d38c;font-weight:800;letter-spacing:-7px}.topic-book-title h1{font-size:clamp(28px,4vw,49px);line-height:1.1;letter-spacing:-1.7px;margin:13px 0 0;max-width:950px;color:white}.topic-book-title>div>span{font-size:12px;letter-spacing:2px;color:#d7e9df}.topic-reader .reader-stage{align-items:start}.topic-comic-open{display:block;position:relative;border:0;padding:0;width:100%;background:transparent;cursor:zoom-in}.topic-comic-open img{display:block;width:100%;height:auto;max-height:none;object-fit:contain}.topic-reader .topic-word>.han{display:block;font-size:clamp(32px,4vw,55px);line-height:1.35}.topic-word .py{font-size:19px}.topic-reader .spoken-content{min-width:0}.topic-reader .spoken-content .han{font-size:clamp(25px,3vw,38px)}.topic-reader .spoken-content .word{border:0;margin:0;padding:0}.topic-reader .spoken-content .word-sound{width:100%}.topic-image-pending{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 28px;min-height:420px;text-align:center;background:radial-gradient(ellipse at top,#f5dfb755,transparent 65%),linear-gradient(145deg,#eaf3ec,#fffaf0);border-radius:20px}.topic-image-pending>span{font-size:62px;color:#6d927e}.topic-image-pending p{max-width:330px;line-height:1.7}.topic-lightbox{border:0;border-radius:16px;padding:50px 12px 12px;background:#fbfbf5;max-width:min(1100px,96vw);max-height:96dvh;overflow:auto}.topic-lightbox::backdrop{background:#04212ad9;backdrop-filter:blur(12px)}.topic-lightbox img{display:block;width:100%;height:auto}.topic-close{position:sticky;top:0;float:right;margin:-42px 0 8px;background:#145c52;color:white;border:0;border-radius:30px;padding:10px 18px;cursor:pointer}.topic-reader .unit-page-strip{scroll-snap-type:x proximity}.topic-reader .unit-page{scroll-snap-align:start;flex-shrink:0}.topic-reader .experience-nav{scrollbar-width:thin}.topic-reader .spoken-line{overflow:hidden}
@media(max-width:760px){.topic-grid{grid-template-columns:1fr;gap:22px}.topic-cover-card,.topic-home .topic-cover-card{min-height:440px}.topic-cover-content{left:25px;right:25px;bottom:28px}.topic-book-hero{min-height:330px;border-radius:20px}.topic-book-title{left:23px;right:23px;bottom:29px;gap:18px;align-items:start;flex-direction:column}.topic-book-number{font-size:54px;letter-spacing:-3px}.topic-book-title h1{letter-spacing:-1px;font-size:30px}.topic-reader .reader-stage{grid-template-columns:minmax(0,1fr)}.topic-reader .vocabulary-rail{position:static;max-height:none}.topic-reader .rail-words{max-height:450px}.topic-reader .spoken-line{padding:18px 14px;gap:10px}.topic-reader .spoken-content .word-sound{display:flex;flex-wrap:wrap;gap:10px}.topic-reader .spoken-content .han{overflow-wrap:anywhere;word-break:normal}.topic-reader .unit-contents-top{gap:18px}.topic-reader .unit-contents-top label{max-width:100%;width:100%}.topic-reader select{max-width:100%}.topic-home{margin:56px 0 24px}.topic-library>h1{font-size:58px}.topic-reader .unit-reader-nav{gap:12px}.topic-reader .unit-reader-nav .btn{padding:13px 17px}.topic-reader .experience-nav{max-width:100%;overflow:auto}}
@media(prefers-reduced-motion:reduce){.topic-cover-card,.topic-cover-card>img{transition:none}.topic-cover-card:hover{transform:none}.topic-cover-card:hover>img{transform:none}}

.topic-grid.topic-carousel{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:28px}.topic-carousel::-webkit-scrollbar{display:none}.topic-carousel .topic-cover-card{scroll-snap-align:start;min-width:0;min-height:520px}.topic-carousel .topic-cover-content{max-width:800px}.topic-carousel .topic-cover-card:hover{transform:none}.topic-library .slider-controls{margin-top:32px}@media(max-width:760px){.topic-carousel .topic-cover-card{min-height:490px}.topic-carousel .topic-cover-content h2{font-size:29px}.topic-library .slider-controls{align-items:center}}

/* Compact pronunciation affordance; the Chinese text remains the click target. */
.topic-word .word-sound{display:inline-flex;align-items:center;gap:12px;max-width:100%;width:auto;text-align:left;flex-wrap:wrap}.topic-word .topic-sound-icon{display:inline-grid;place-items:center;flex:0 0 40px;width:40px;height:40px;padding:0;border-radius:50%;background:#e5f0e6;color:#176b58;box-shadow:inset 0 0 0 1px #176b581c}.topic-word .word-sound:hover .topic-sound-icon,.topic-word .word-sound[aria-pressed="true"] .topic-sound-icon{background:#176b58;color:#fff}.topic-word .word-sound:focus-visible{outline:3px solid #d49442;outline-offset:5px;border-radius:12px}

.topic-carousel-actions{display:flex;align-items:center;gap:20px}.topic-title-select{display:grid;gap:6px;font-size:12px;font-weight:700;color:#39665d}.topic-title-select select{width:min(430px,42vw);font:inherit;font-size:15px;padding:12px 35px 12px 14px;border:1px solid #c6dcd4;border-radius:12px;background:#fff;color:#153e3a}.topic-title-select select:focus-visible{outline:3px solid #e0b85c;outline-offset:3px}@media(max-width:680px){.topic-library .slider-controls{align-items:flex-start;gap:16px;flex-wrap:wrap}.topic-carousel-actions{width:100%;justify-content:space-between;gap:10px}.topic-title-select{min-width:0;flex:1}.topic-title-select select{width:100%;max-width:100%}.topic-carousel-actions .slider-buttons{flex-shrink:0}}