.area-switch{display:flex;background:#e9e9f8;border:1px solid #dedff4;padding:4px;border-radius:14px;gap:3px;flex-shrink:0}.area-switch a{display:block;min-height:40px;min-width:76px;text-align:center;padding:9px 17px;color:#707d9c;font-size:14px;font-weight:750;border-radius:10px}.area-switch a.active{background:linear-gradient(135deg,#7650ef,#4679ff);color:white;box-shadow:0 4px 12px #6b57e52b}.library-count{font-size:14px;color:#8d92b0;font-weight:500}.more-books-note{padding:16px 30px 0;font-size:13px;color:#8994ae}.book-description{white-space:normal!important;line-height:1.8;margin-top:13px!important}.book-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.book-picture{aspect-ratio:1.474}.whole-book-body{width:100%;max-width:1250px;margin:0 auto;padding:20px 28px 50px}.whole-book .reader-title{flex:1}.whole-book .reader-header{position:sticky;top:0;z-index:30}.book-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:15px;color:#7c85a7;font-size:13px}.book-toolbar-actions{display:flex;align-items:center;gap:8px}.book-toolbar .nav-page{font-size:12px;min-height:44px}.book-toolbar .icon-button{width:44px;height:44px}.flip-perspective{perspective:2000px;isolation:isolate}.book-surface{transform-origin:left center;position:relative;backface-visibility:hidden;will-change:transform;box-shadow:0 16px 45px #5665a21a;border-radius:17px;background:white}.book-surface:after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 7px 0 14px #17263f0b;opacity:.7}.whole-book .page-stage{border-radius:16px;overflow:hidden;min-height:0}.whole-book .scene-img{width:100%;height:auto;display:block}.whole-book .scene-wrap{width:100%}.whole-book .hotspot{padding:0;align-items:center;touch-action:pan-y;min-height:0}.whole-book .hotspot.question:hover,.whole-book .hotspot.answer:hover,.whole-book .hotspot.sentence:hover,.whole-book .hotspot.playing{background:#c9beff33;box-shadow:inset 0 0 0 2px #8a71f0}.whole-book .hotspot .spot-sound{position:absolute;right:-3px;top:-8px;padding:4px;z-index:2}.whole-book .hotspot:focus-visible{outline:3px solid #7256ed}.turning-forward{animation:turn-out-forward .22s ease-in forwards}.turning-backward{animation:turn-out-backward .22s ease-in forwards;transform-origin:right center}.arriving-forward{animation:turn-in-forward .26s ease-out}.arriving-backward{animation:turn-in-backward .26s ease-out;transform-origin:right center}@keyframes turn-out-forward{to{transform:rotateY(-62deg) translateX(-1%);filter:brightness(.86);opacity:.5}}@keyframes turn-in-forward{from{transform:rotateY(62deg) translateX(1%);filter:brightness(.87);opacity:.6}to{transform:none;filter:none;opacity:1}}@keyframes turn-out-backward{to{transform:rotateY(62deg) translateX(1%);filter:brightness(.86);opacity:.5}}@keyframes turn-in-backward{from{transform:rotateY(-62deg) translateX(-1%);filter:brightness(.87);opacity:.6}to{transform:none;filter:none;opacity:1}}.book-pager{margin:17px 0 12px}.book-pager .nav-page{min-width:120px}.reading-status{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:9px 2px 15px;color:#8a91ae;font-size:11px}.reading-status .audio-status{margin:0;flex-shrink:0}.reading-status #now-playing{text-align:right;color:#7563dc;line-height:1.6}.page-readalong{margin-top:15px;background:#ffffffd9;border:1px solid white;border-radius:23px;padding:24px}.readalong-title{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:17px}.readalong-title h2{margin:0;font-size:18px;color:#263454}.readalong-title>span{font-size:11px;color:#8c95b0}.readalong-lines{display:grid;grid-template-columns:1fr 1fr;gap:10px}.read-line{min-height:67px;display:flex;align-items:center;gap:12px;padding:14px 16px;background:#f4f3fd;border:1px solid #e7e2fb;border-radius:13px;text-align:left;line-height:1.5}.read-line>span:nth-child(2){flex:1;min-width:0}.read-line strong{font-size:16px;font-weight:650;display:block}.read-line small{font-size:12px;color:#8a8da7;display:block;margin-top:5px}.read-line>svg{width:15px;height:15px;color:#9285d4}.line-icon{display:grid;place-items:center;width:30px;height:30px;flex-shrink:0;background:#e6e0fc;color:#7961da;border-radius:9px}.line-icon svg{width:17px;height:17px}.read-line.answer{background:#edf4ff;border-color:#dee9fc}.read-line.playing{background:#e9e2ff;border-color:#9878ef;box-shadow:0 0 0 2px #d4c3ff}.page-word-strip{display:flex;gap:9px;flex-wrap:wrap;margin-top:17px}.page-word-strip button{display:flex;gap:7px;align-items:center;min-height:44px;background:#fff;border:1px solid #dedff2;border-radius:12px;padding:10px 13px}.page-word-strip button svg{width:16px;height:16px;color:#7c65df}.page-word-strip strong{font-size:13px}.page-word-strip small{font-size:11px;color:#8c92a9}.page-word-strip .playing{border-color:#8b68ee;background:#efe9ff}.focus-book .page-readalong,.focus-book .page-word-strip{display:none}.book-dialog{max-width:820px;max-height:85dvh;overflow-y:auto}.book-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:18px}.book-dialog h2{margin:0}.contents-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-top:24px}.contents-grid button{background:#f2f2fd;padding:6px;border:2px solid transparent;border-radius:13px;text-align:left}.contents-grid button.current{border-color:#8d72ea}.contents-grid img{display:block;width:100%;border-radius:7px}.contents-grid span{display:block;font-size:11px;padding:9px 4px;color:#69769a}.whole-book .finish-actions{margin:24px 0}.area-switch a:focus-visible{outline:3px solid #9d80ed}.book-pager .page-dots{gap:4px}.book-pager .page-dots i{width:5px;height:5px}.book-pager .page-dots i.active{width:16px}
@media(max-width:1100px){.book-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.whole-book-body{padding:15px 15px 35px}.book-toolbar{flex-wrap:wrap}.book-toolbar-actions{gap:5px}.readalong-title{display:block}.readalong-title>span{display:block;margin-top:7px}.page-readalong{padding:19px}.readalong-lines{grid-template-columns:1fr}.whole-book .reader-title h1{font-size:15px}.area-switch a{font-size:12px;min-width:58px;min-height:36px;padding:8px 10px}.whole-book .reader-controls .icon-button{display:none}.book-pager .nav-page{min-width:95px}.reading-status{display:block}.reading-status #now-playing{display:block;text-align:left;margin-top:8px}.contents-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.book-toolbar>span{font-size:12px}}
@media(max-width:450px){.reader-header{gap:7px}.whole-book .reader-title h1{font-size:13px}.whole-book .reader-title p{font-size:9px}.whole-book .area-switch a{min-width:47px;padding:8px 6px;font-size:11px}.whole-book .reader-controls .rate{font-size:10px;padding:9px}.whole-book .reader-header>.icon-button{width:36px;height:36px}.book-toolbar-actions .nav-page{padding:9px 10px;font-size:11px}.book-toolbar .icon-button{width:39px;height:39px}.book-pager .page-dots{display:none}.page-readalong{padding:17px 13px}.read-line{padding:13px 11px}.read-line strong{font-size:15px}.readalong-title h2{font-size:16px}.book-grid{grid-template-columns:1fr}.book-card{max-width:340px}.more-books-note{padding-left:18px}.whole-book .page-stage,.book-surface{border-radius:10px}.contents-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.whole-book .book-hotspot{background:transparent;border:0;margin:0;box-shadow:none;display:flex;min-height:0;padding:0;text-align:center}
.whole-book .book-hotspot.playing,.whole-book .book-hotspot:hover{background:#c9beff33;box-shadow:inset 0 0 0 2px #8a71f0}
.flip-perspective{max-width:min(100%,calc((100dvh - 245px)*1.474));margin:0 auto}
@media(max-width:760px){.flip-perspective{max-width:100%}}
.whole-book .word .word-pronunciation{position:absolute;bottom:var(--ipa-bottom,20%);left:var(--ipa-left,50%);transform:translateX(-50%);white-space:nowrap;display:block;background:#fffdf2ed;color:#465575;line-height:1.2;font-family:'Segoe UI','Arial',sans-serif;font-size:clamp(9px,1.24vw,15px);font-weight:500;padding:2px 6px;border-radius:6px;box-shadow:0 1px 5px #31476613;pointer-events:none}
.whole-book .book-hotspot.word{position:absolute;background:transparent;border:0;box-shadow:none;min-height:0;display:flex;gap:0}
.whole-book .word .spot-sound{opacity:1;top:auto;bottom:7%;right:4%;padding:4px;background:#ffffffec;border:1px solid #c5c1ef;color:#7560e2;box-shadow:0 2px 6px #7560e21c}
.whole-book .word .spot-sound svg{width:clamp(10px,1.3vw,16px);height:clamp(10px,1.3vw,16px)}
.whole-book .word.playing .spot-sound{background:#7560e2;color:white}
.whole-book .compact-word-row.word .word-pronunciation{bottom:88%;font-size:clamp(8px,1.02vw,13px)}
.whole-book .compact-word-row.word .spot-sound{right:0;bottom:4%;padding:2px}
.word-reading{display:flex;flex-direction:column;gap:3px;align-items:center}.word-ipa{font-family:'Segoe UI','Arial',sans-serif;font-size:12px;color:#6c6799;line-height:1.3}
@media(max-width:650px){.whole-book .word .word-pronunciation{font-size:8px;padding:1px 3px;border-radius:4px}.whole-book .word .spot-sound{padding:2px;right:2%}.whole-book .word .spot-sound svg{width:10px;height:10px}.word-ipa{font-size:11px}}
@media(prefers-reduced-motion:reduce){.book-surface{animation:none!important;transform:none!important}}