@keyframes float{100%{transform:translateY(0)}0%{transform:translateY(5px)}}@keyframes typing{0%{width:0;white-space:nowrap}50%{width:50%;white-space:nowrap}100%{padding-left:20px;width:100%;white-space:normal}}@keyframes caret{50%{opacity:0}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-0.5px, 0.5px)}40%{transform:translate(-0.5px, -0.5px)}60%{transform:translate(0.5px, 0.5px)}80%{transform:translate(0.5px, -0.5px)}}.chat-content{position:relative;padding:10px 15px}.chat-content::after{content:"";position:absolute;width:0;height:0;border:6px solid #fff}.chat-content.chat-content-bottom::after{bottom:-3px;left:50%;transform-origin:0 0;transform:rotate(45deg)}.chat-content.chat-content-top::after{top:-8px;left:50%;transform-origin:0 0;transform:rotate(45deg)}.chat-content.chat-content-left::after{top:15px;left:0;transform-origin:0 0;transform:translateY(-8px) rotate(45deg);border-radius:100% 0 0 0}.chat-content.chat-content-right::after{top:15px;right:-12px;transform-origin:0 0;transform:translateY(-8px) rotate(45deg);border-radius:100% 0 0 0}.bot-chat-content .chat-content{display:inline-block;max-width:400px;font-weight:600;font-size:16px;color:#403f41;margin-bottom:20px}.book{position:relative;z-index:1;margin:0 auto}.book a,.book .page-back{display:block;position:relative;width:100%;padding:5px;border-radius:8px}.book a:before,.book .page-back:before{content:"";display:block;position:absolute;top:-19px;right:0;bottom:0;left:0;width:calc(100% - 5px);height:14px;border-radius:12px 5px 0 5px;z-index:-1;background-image:linear-gradient(rgb(243, 253, 255) 50%, transparent 50%, transparent);background-color:#d5edf3;background-size:3px 5px}.book a:after,.book .page-back:after{content:"";display:block;width:calc(100% + 18px);height:calc(100% + 30px);border-radius:20px 5px 5px 18px;position:absolute;top:-25px;right:0;bottom:0;left:-10px;z-index:-2;background:#addce8}.book a:hover .book-cover,.book .page-back:hover .book-cover{transform:perspective(2000px) rotateY(-80deg);transition:all .5s}.book a:hover .book-cover::after,.book .page-back:hover .book-cover::after{content:"";transition:all .5s;width:calc(100% + 30px);height:calc(100% + 20px);top:-10px;left:0}.book .level-label{text-align:center;width:50px;height:25px;position:absolute;top:-33px;left:10px;color:#fff;font-weight:bold}.book .level-label:before{content:"";width:50px;height:36px;position:absolute;top:-51%;right:0;bottom:auto;left:0;z-index:-1;margin:0 auto;background-color:#f6be0c;-webkit-clip-path:polygon(50% 12%, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 20%, 100% 0, 100% 100%, 0 100%, 0 0)}.book-cover{background-color:#fff;position:relative;width:100%;height:100%;min-height:190px;max-height:190px;display:flex;justify-content:center;align-items:center;transform-origin:left;z-index:1;transition:2s}.book-cover img{width:100%;max-height:190px;-o-object-fit:cover;object-fit:cover}.book-cover::after{content:"";display:block;width:calc(100% + 25px);height:calc(100% + 22px);border-radius:3px 10px 10px 20px;position:absolute;top:-12px;right:0;bottom:0;left:-15px;z-index:-2;background:#addce8}.book-content{position:absolute;top:0;left:0;padding:15px 15px 15px 60px;height:100%;background-color:#fff;overflow:hidden}.book .loading-book-page{position:absolute !important}.content-text{display:flex;justify-content:center;align-items:center;flex-direction:column}.content-text p{font-size:18px;line-height:1.2;color:#28282a;max-height:82px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}.content-text h6{text-align:center;font-size:18px;color:#787878;margin-bottom:6px}.content-text h4{font-size:20px;text-align:center;font-weight:bold;color:#f78f5c;margin-bottom:6px}.recommend-content p{font-size:16px;height:54px;-webkit-line-clamp:3}.loading-book{position:relative;width:250px;height:200px;transform:rotateX(30deg);opacity:1;transition:opacity .5s}.preserve-3d{transform-style:preserve-3d;perspective:2000px}.loading-book-page{position:absolute;top:0;left:5px;width:100%;height:100%;min-height:190px;max-height:190px;display:flex;justify-content:center;align-items:center}.loading-book-page:after{content:"";width:calc(100% + 9px);height:calc(100% + 7px);border-radius:0px 0px 6px 3px;position:absolute;top:-6px;left:-4px;background-color:#fff;z-index:-1}.loading-book-wrapper{position:relative;transform-origin:0 50%;transform:rotateY(0deg);z-index:2}.page-front::after{content:"";width:calc(100% + 16px);height:209px;border-radius:5px 5px 5px 10px;position:absolute;top:-12px;left:-10px;background-color:#addce8;z-index:-20}@keyframes flip-book1{0%,100%{transform:rotateY(0deg)}50%{transform:rotateY(-160deg)}}@keyframes flip-book2{0%,100%{transform:rotateY(0deg)}50%{transform:rotateY(-150deg)}}@keyframes flip-book3{0%,100%{transform:rotateY(0deg)}50%{transform:rotateY(-140deg)}}.fade-out{transform:scale(0.5);opacity:0}.flip-animation-1{animation:flip-book1 10s ease-out}.flip-animation-2{animation:flip-book2 6s 2s ease-out}.flip-animation-3{animation:flip-book3 3s 3s ease-out}.book-search{animation:shake 1.5s cubic-bezier(0.96, -0.2, 0, 1.29) both infinite alternate-reverse}.typing-content{overflow-y:auto;overflow-x:hidden;max-height:88px;-ms-overflow-style:none;scrollbar-width:20px}.typing-content::-webkit-scrollbar{width:10px;height:8px;border-radius:20px;background-color:#fefce8}.typing-content::-webkit-scrollbar-thumb{border-radius:20px;background:#ccc}.typing-effect{width:0;overflow:hidden;animation:typing 2s steps(15) 1 forwards}.typing-effect span{color:#f78f5c;animation:caret 1s steps(1) infinite}.chat-panel-border{border:3px solid #4f4680}#vocabulary-page .chat-panel-border{border:3px solid #86198f}#vocabulary-page .chat-panel-input{border-top:3px solid #86198f;border-bottom:3px solid #86198f}